mirror of
https://github.com/penpot/penpot.git
synced 2025-03-15 17:21:17 -05:00
🐛 Fix border color on inputs when hovering
This commit is contained in:
parent
1c98230487
commit
844634e8c8
12 changed files with 101 additions and 35 deletions
|
@ -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 {
|
||||
|
|
|
@ -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);
|
||||
|
|
|
@ -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;
|
||||
|
|
|
@ -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);
|
||||
|
|
|
@ -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);
|
||||
|
|
|
@ -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);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
@ -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);
|
||||
|
|
|
@ -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 {
|
||||
|
|
|
@ -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;
|
||||
|
|
|
@ -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);
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
@ -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;
|
||||
|
|
|
@ -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 {
|
||||
|
|
Loading…
Add table
Reference in a new issue