Penpot/penpot
0
Fork 0
mirror of https://github.com/penpot/penpot.git synced 2025-03-18 10:41:29 -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
Show stats 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;
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 {