Use brand colour for links and buttons by default. Add button hover and hover text colours.
This commit is contained in:
parent
6df6316000
commit
431441e843
2 changed files with 20 additions and 6 deletions
|
|
@ -29,7 +29,7 @@ $colors: (
|
|||
|
||||
link: $black,
|
||||
link-visited: $black,
|
||||
link-hover: $nearblack,
|
||||
link-hover: $brand,
|
||||
link-active: $red,
|
||||
|
||||
border: $grey-light,
|
||||
|
|
@ -41,14 +41,16 @@ $colors: (
|
|||
autocomplete-select-bg: $blue,
|
||||
|
||||
body-bg: $white,
|
||||
header-bg: $nearblack,
|
||||
header-bg: $brand,
|
||||
backdrop: $grey-extra-light,
|
||||
|
||||
mobile-menu: $nearblack,
|
||||
mobile-menu: $brand,
|
||||
mobile-menu-cover: rgba($black, .2),
|
||||
|
||||
button: $nearblack,
|
||||
button: $brand,
|
||||
button-hover: $brand-dark,
|
||||
button-text: $white,
|
||||
button-text-hover: $white,
|
||||
button-disabled: $grey,
|
||||
|
||||
form-error: $red,
|
||||
|
|
|
|||
|
|
@ -35,8 +35,8 @@ button,
|
|||
&:active {
|
||||
// Override any link underlines and color changes.
|
||||
text-decoration: none;
|
||||
color: var(--color-button);
|
||||
background-color: var(--color-button-text);
|
||||
color: var(--color-button-text-hover);
|
||||
background-color: var(--color-button-hover);
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -50,6 +50,18 @@ button,
|
|||
@include padding(.1 .5);
|
||||
}
|
||||
|
||||
&--alt {
|
||||
color: var(--color-button-text-hover);
|
||||
background-color: var(--color-button-hover);
|
||||
|
||||
&:hover,
|
||||
&:focus,
|
||||
&:active {
|
||||
color: var(--color-button-text);
|
||||
background-color: var(--color-button);
|
||||
}
|
||||
}
|
||||
|
||||
&--outline {
|
||||
color: var(--color-button);
|
||||
background-color: var(--color-button-text);
|
||||
|
|
|
|||
Loading…
Reference in a new issue