Penpot/penpot
0
Fork 0
mirror of https://github.com/penpot/penpot.git synced 2025-03-20 03:31:24 -05:00
Code Issues 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

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

@ -316,7 +316,7 @@
height: $s-32;
border-radius: $br-8;
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);
span,
label {
@ -336,14 +336,45 @@
}
&: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 {
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 {
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%;
margin: 0;
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);
background-color: var(--input-background-color);
}
@ -500,7 +531,7 @@
min-height: $s-32;
margin-top: $s-8;
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);
&:focus-within,
&:active {

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

@ -143,11 +143,19 @@
--icon-foreground-discard: var(--error-color);
// 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-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-foreground-color-hover: var(--color-foreground-primary);
--input-border-color-hover: var(--color-background-quaternary);
--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-background-color-active: var(--color-background-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;
margin: 0;
padding: 0;
border: $s-1 solid var(--input-background-color);
border: $s-1 solid var(--input-border-color);
position: relative;
display: flex;
height: $s-32;

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

@ -46,7 +46,7 @@
input:-webkit-autofill:active {
-webkit-text-fill-color: var(--input-foreground-color-active);
-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;
transition: background-color 5000s ease-in-out 0s;
caret-color: var(--input-foreground-color-active);
@ -180,7 +180,7 @@
height: $s-32;
width: 100%;
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);
background-color: var(--input-background-color);
.main-content {
@ -282,8 +282,7 @@
margin: 0;
border-radius: $br-8;
background-color: var(--input-background-color);
border: $s-1 solid var(--input-background-color);
color: var(--input-foreground-color-active);
border: $s-1 solid var(--input-border-color-active);
&:focus {
outline: none;
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 {
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);
input {
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;
width: $s-32;
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;
background-color: var(--color-background-tertiary);
background-color: var(--input-background-color-rest);
svg {
height: $s-16;
width: $s-16;
stroke: var(--icon-foreground);
}
&:focus {
border: 1px solid var(--input-border-color-focus);
border: $s-1 solid var(--input-border-color-focus);
outline: 0;
background-color: var(--input-background-color-active);
color: var(--input-foreground-color-active);
background-color: var(--input-background-color-focus);
color: var(--input-foreground-color-focus);
svg {
background-color: var(--input-background-color-active);
background-color: var(--input-background-color-focus);
}
}
&: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);
svg {
background-color: var(--input-background-color-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 {
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);
svg {
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);
color: var(--menu-foreground-color);
box-sizing: border-box;
border: $s-1 solid var(--input-background-color);
border: $s-1 solid var(--input-border-color);
}
}
.actions {

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

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

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

@ -275,7 +275,7 @@
padding: 0;
margin-right: 0;
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);
.start-flow-btn {
@include buttonStyle;
@ -315,22 +315,27 @@
&: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 {
background-color: var(--input-background-color-active);
background-color: var(--input-background-color-hover);
.flow-input-wrapper {
background-color: var(--input-background-color-active);
background-color: var(--input-background-color-hover);
}
}
}
&:focus,
&: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 {
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;
margin: 0;
padding: 0;
border: $s-1 solid var(--input-background-color);
border: $s-1 solid var(--input-border-color);
position: relative;
.font-size-select {
@include removeInputStyle;

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

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