3pp-mirror/penpot
1
0
Fork 0
mirror of https://github.com/penpot/penpot.git synced 2025-06-04 06:21:37 +02:00
Code Issues Projects Releases Packages Wiki Activity

🐛 Fix border color on inputs when hovering

Browse source
This commit is contained in:
Eva 2024-01-19 14:31:42 +01:00 • committed by Andrey Antukh
parent 1c98230487
commit 844634e8c8
12 changed files with 101 additions and 35 deletions
Download patch file Download diff file Expand all files Collapse all files

43
frontend/resources/styles/common/refactor/basic-rules.scss
View file

@ -316,7 +316,7 @@
height: $s-32; height: $s-32;
border-radius: $br-8; border-radius: $br-8;
background-color: var(--input-background-color); background-color: var(--input-background-color);
border: $s-1 solid var(--input-background-color); border: $s-1 solid var(--input-border-color);
color: var(--input-foreground-color); color: var(--input-foreground-color);
span, span,
label { label {
@ -336,14 +336,45 @@
} }
&:hover { &:hover {
border: $s-1 solid var(--input-background-color-hover); border: $s-1 solid var(--input-border-color-hover);
background-color: var(--input-background-color-hover);
span { span {
color: var(--input-foreground-color); color: var(--input-foreground-color-hover);
}
input {
color: var(--input-foreground-color-hover);
}
}
&:active {
border: $s-1 solid var(--input-border-color-active);
background-color: var(--input-background-color-active);
span {
color: var(--input-foreground-color-active);
} }
input { input {
color: var(--input-foreground-color-active); color: var(--input-foreground-color-active);
} }
background-color: var(--input-background-color-hover); }
&:focus,
&:focus-within {
border: $s-1 solid var(--input-border-color-focus);
background-color: var(--input-background-color-focus);
span {
color: var(--input-foreground-color-focus);
}
input {
color: var(--input-foreground-color-focus);
}
&:hover {
border: $s-1 solid var(--input-border-color-focus);
background-color: var(--input-background-color-focus);
span {
color: var(--input-foreground-color-focus);
}
input {
color: var(--input-foreground-color-focus);
}
}
} }
} }
@ -362,7 +393,7 @@
width: 100%; width: 100%;
margin: 0; margin: 0;
border-radius: $br-8; border-radius: $br-8;
border: $s-1 solid var(--input-background-color); border: $s-1 solid var(--input-border-color);
color: var(--input-foreground-color-active); color: var(--input-foreground-color-active);
background-color: var(--input-background-color); background-color: var(--input-background-color);
} }
@ -500,7 +531,7 @@
min-height: $s-32; min-height: $s-32;
margin-top: $s-8; margin-top: $s-8;
background-color: var(--input-background-color); background-color: var(--input-background-color);
border: $s-1 solid var(--input-background-color); border: $s-1 solid var(--input-border-color);
color: var(--input-foreground-color-active); color: var(--input-foreground-color-active);
&:focus-within, &:focus-within,
&:active { &:active {

12
frontend/resources/styles/common/refactor/design-tokens.scss
View file

@ -143,11 +143,19 @@
--icon-foreground-discard: var(--error-color); --icon-foreground-discard: var(--error-color);
// INPUTS, SELECTS, DROPDOWNS // INPUTS, SELECTS, DROPDOWNS
--input-background-color: var(--color-background-tertiary);
--input-foreground-color: var(--color-foreground-secondary);
--input-placeholder-color: var(--color-foreground-secondary); --input-placeholder-color: var(--color-foreground-secondary);
--input-background-color: var(--color-background-tertiary); // empty state
--input-foreground-color: var(--color-foreground-secondary); // empty state
--input-border-color: var(--color-background-tertiary); // empty state
--input-background-color-rest: var(--color-background-tertiary);
--input-foreground-color-rest: var(--color-foreground-primary);
--input-border-color-rest: var(--color-background-tertiary);
--input-background-color-hover: var(--color-background-quaternary); --input-background-color-hover: var(--color-background-quaternary);
--input-foreground-color-hover: var(--color-foreground-primary);
--input-border-color-hover: var(--color-background-quaternary);
--input-background-color-focus: var(--color-background-tertiary); --input-background-color-focus: var(--color-background-tertiary);
--input-foreground-color-focus: var(--color-foreground-primary);
--input-border-color-focus: var(--color-accent-primary); --input-border-color-focus: var(--color-accent-primary);
--input-background-color-active: var(--color-background-primary); --input-background-color-active: var(--color-background-primary);
--input-foreground-color-active: var(--color-foreground-primary); --input-foreground-color-active: var(--color-foreground-primary);

2
frontend/src/app/main/ui/components/editable_select.scss
View file

@ -10,7 +10,7 @@
@extend .asset-element; @extend .asset-element;
margin: 0; margin: 0;
padding: 0; padding: 0;
border: $s-1 solid var(--input-background-color); border: $s-1 solid var(--input-border-color);
position: relative; position: relative;
display: flex; display: flex;
height: $s-32; height: $s-32;

7
frontend/src/app/main/ui/components/forms.scss
View file

@ -46,7 +46,7 @@
input:-webkit-autofill:active { input:-webkit-autofill:active {
-webkit-text-fill-color: var(--input-foreground-color-active); -webkit-text-fill-color: var(--input-foreground-color-active);
-webkit-box-shadow: inset 0 0 20px 20px var(--input-background-color); -webkit-box-shadow: inset 0 0 20px 20px var(--input-background-color);
border: $s-1 solid var(--input-background-color); border: $s-1 solid var(--input-border-color);
-webkit-background-clip: text; -webkit-background-clip: text;
transition: background-color 5000s ease-in-out 0s; transition: background-color 5000s ease-in-out 0s;
caret-color: var(--input-foreground-color-active); caret-color: var(--input-foreground-color-active);
@ -180,7 +180,7 @@
height: $s-32; height: $s-32;
width: 100%; width: 100%;
border-radius: $br-8; border-radius: $br-8;
border: $s-1 solid var(--input-background-color); border: $s-1 solid var(--input-border-color);
color: var(--input-foreground-color-active); color: var(--input-foreground-color-active);
background-color: var(--input-background-color); background-color: var(--input-background-color);
.main-content { .main-content {
@ -282,8 +282,7 @@
margin: 0; margin: 0;
border-radius: $br-8; border-radius: $br-8;
background-color: var(--input-background-color); background-color: var(--input-background-color);
border: $s-1 solid var(--input-background-color); border: $s-1 solid var(--input-border-color-active);
color: var(--input-foreground-color-active);
&:focus { &:focus {
outline: none; outline: none;
border: $s-1 solid var(--input-border-color-focus); border: $s-1 solid var(--input-border-color-focus);

2
frontend/src/app/main/ui/components/search_bar.scss
View file

@ -35,7 +35,7 @@
} }
} }
&:hover { &:hover {
border: $s-1 solid var(--input-background-color-hover); border: $s-1 solid var(--input-border-color-hover);
background-color: var(--input-background-color-hover); background-color: var(--input-background-color-hover);
input { input {
background-color: var(--input-background-color-hover); background-color: var(--input-background-color-hover);

23
frontend/src/app/main/ui/workspace/sidebar/assets.scss
View file

@ -56,30 +56,39 @@
height: $s-32; height: $s-32;
width: $s-32; width: $s-32;
margin: 0; margin: 0;
border: 1px solid var(--color-background-tertiary); border: $s-1 solid var(--input-border-color-rest);
border-radius: $br-8 $br-2 $br-2 $br-8; border-radius: $br-8 $br-2 $br-2 $br-8;
background-color: var(--color-background-tertiary); background-color: var(--input-background-color-rest);
svg { svg {
height: $s-16; height: $s-16;
width: $s-16; width: $s-16;
stroke: var(--icon-foreground); stroke: var(--icon-foreground);
} }
&:focus { &:focus {
border: 1px solid var(--input-border-color-focus); border: $s-1 solid var(--input-border-color-focus);
outline: 0; outline: 0;
background-color: var(--input-background-color-active); background-color: var(--input-background-color-focus);
color: var(--input-foreground-color-active); color: var(--input-foreground-color-focus);
svg { svg {
background-color: var(--input-background-color-active); background-color: var(--input-background-color-focus);
} }
} }
&:hover { &:hover {
border: 1px solid var(--input-background-color-hover); border: $s-1 solid var(--input-border-color-hover);
background-color: var(--input-background-color-hover); background-color: var(--input-background-color-hover);
svg { svg {
background-color: var(--input-background-color-hover); background-color: var(--input-background-color-hover);
stroke: var(--button-foreground-hover); stroke: var(--button-foreground-hover);
} }
&:focus {
border: $s-1 solid var(--input-border-color-focus);
outline: 0;
background-color: var(--input-background-color-focus);
color: var(--input-foreground-color-focus);
svg {
background-color: var(--input-background-color-focus);
}
}
} }
} }

2
frontend/src/app/main/ui/workspace/sidebar/layers.scss
View file

@ -42,7 +42,7 @@
} }
} }
&:hover { &:hover {
border: $s-1 solid var(--input-background-color-hover); border: $s-1 solid var(--input-border-color-hover);
background-color: var(--input-background-color-hover); background-color: var(--input-background-color-hover);
svg { svg {
background-color: var(--input-background-color-hover); background-color: var(--input-background-color-hover);

2
frontend/src/app/main/ui/workspace/sidebar/options/menus/blur.scss
View file

@ -67,7 +67,7 @@
background-color: var(--input-background-color); background-color: var(--input-background-color);
color: var(--menu-foreground-color); color: var(--menu-foreground-color);
box-sizing: border-box; box-sizing: border-box;
border: $s-1 solid var(--input-background-color); border: $s-1 solid var(--input-border-color);
} }
} }
.actions { .actions {

8
frontend/src/app/main/ui/workspace/sidebar/options/menus/frame_grid.scss
View file

@ -45,7 +45,7 @@
width: $s-28; width: $s-28;
border-radius: $br-8 0 0 $br-8; border-radius: $br-8 0 0 $br-8;
box-sizing: border-box; box-sizing: border-box;
border: $s-1 solid var(--input-background-color); border: $s-1 solid var(--input-border-color);
svg { svg {
@extend .button-icon; @extend .button-icon;
} }
@ -62,9 +62,9 @@
border-radius: 0; border-radius: 0;
height: 100%; height: 100%;
box-sizing: border-box; box-sizing: border-box;
border: $s-1 solid var(--input-background-color); border: $s-1 solid var(--input-border-color);
&:hover { &:hover {
border: $s-1 solid var(--input-background-color-hover); border: $s-1 solid var(--input-border-color-hover);
} }
} }
} }
@ -90,7 +90,7 @@
height: $s-32; height: $s-32;
border-radius: 0 $br-8 $br-8 0; border-radius: 0 $br-8 $br-8 0;
box-sizing: border-box; box-sizing: border-box;
border: $s-1 solid var(--input-background-color); border: $s-1 solid var(--input-border-color);
.numeric-input { .numeric-input {
@extend .input-base; @extend .input-base;
margin: 0; margin: 0;

15
frontend/src/app/main/ui/workspace/sidebar/options/menus/interactions.scss
View file

@ -275,7 +275,7 @@
padding: 0; padding: 0;
margin-right: 0; margin-right: 0;
background-color: var(--input-background-color); background-color: var(--input-background-color);
border: $s-1 solid var(--input-background-color); border: $s-1 solid var(--input-border-color);
color: var(--input-foreground-color); color: var(--input-foreground-color);
.start-flow-btn { .start-flow-btn {
@include buttonStyle; @include buttonStyle;
@ -315,22 +315,27 @@
&:hover { &:hover {
background-color: var(--input-background-color-hover); background-color: var(--input-background-color-hover);
border: $s-1 solid var(--input-background-color-hover); border: $s-1 solid var(--input-border-color-hover);
&:active { &:active {
background-color: var(--input-background-color-active); background-color: var(--input-background-color-hover);
.flow-input-wrapper { .flow-input-wrapper {
background-color: var(--input-background-color-active); background-color: var(--input-background-color-hover);
} }
} }
} }
&:focus, &:focus,
&:focus-within { &:focus-within {
background-color: var(--input-background-color-active); background-color: var(--input-background-color-focus);
border: $s-1 solid var(--input-border-color-focus);
&:hover {
border: $s-1 solid var(--input-border-color-focus);
}
} }
&.editing { &.editing {
background-color: var(--input-background-color-active); background-color: var(--input-background-color-active);
border: $s-1 solid var(--input-border-color-active);
} }
} }

2
frontend/src/app/main/ui/workspace/sidebar/options/menus/typography.scss
View file

@ -278,7 +278,7 @@
width: $s-60; width: $s-60;
margin: 0; margin: 0;
padding: 0; padding: 0;
border: $s-1 solid var(--input-background-color); border: $s-1 solid var(--input-border-color);
position: relative; position: relative;
.font-size-select { .font-size-select {
@include removeInputStyle; @include removeInputStyle;

20
frontend/src/app/main/ui/workspace/sidebar/options/rows/color_row.scss
View file

@ -85,7 +85,7 @@
} }
&:hover { &:hover {
background-color: var(--input-background-color-hover); background-color: var(--input-background-color-hover);
border: $s-1 solid var(--input-background-color-hover); border: $s-1 solid var(--input-border-color-hover);
.color-bullet-wrapper, .color-bullet-wrapper,
.color-name, .color-name,
.detach-btn, .detach-btn,
@ -107,14 +107,28 @@
background-color: var(--input-background-color-active); background-color: var(--input-background-color-active);
} }
} }
}
&:focus, &:focus,
&:focus-within { &:focus-within {
background-color: var(--input-background-color-active); background-color: var(--input-background-color-focus);
border: $s-1 solid var(--input-border-color-focus);
}
}
&:focus,
&:focus-within {
background-color: var(--input-background-color-focus);
border: $s-1 solid var(--input-border-color-focus);
&:hover {
background-color: var(--input-background-color-hover);
border: $s-1 solid var(--input-border-color-focus);
}
} }
&.editing { &.editing {
background-color: var(--input-background-color-active); background-color: var(--input-background-color-active);
&:hover {
border: $s-1 solid var(--input-border-color-active);
}
} }
} }
.gradient-name-wrapper { .gradient-name-wrapper {