Form input background color to CSS custom property (not fully working)

This commit is contained in:
Adrian Simmons 2021-09-10 12:11:48 +01:00
parent dd942428e3
commit cb7b7f23e7
3 changed files with 7 additions and 4 deletions

View File

@ -136,13 +136,13 @@
&:not(:disabled) {
&:hover, &:active {
background: $input-background-color;
background: var(--input-background-color) !important;
border-color: $input-border-color;
cursor: text;
}
&:focus {
background: $input-background-color;
background: var(--input-background-color) !important;
border-color: $input-focus-border-color;
}
}

View File

@ -129,8 +129,8 @@
padding: .3rem;
&:focus {
background: $input-background-color;
border-color: $input-focus-border-color;
background: var(--input-background-color) !important;
border-color: $input-focus-border-color !important;
}
&.disabled {

View File

@ -16,6 +16,7 @@
--black: hsl(0, 0%, 4%);
--light-background: var(--grey-100);
--input-background-color: var(--white);
}
$grey-50: #F9FAFB;
@ -62,5 +63,7 @@ $grey-lightest: $grey-100;
--white: hsl(0, 0%, 4%);
--black: hsl(0, 0%, 100%);
--input-background-color: var(--black);
}
}