Use brand colour for links and buttons by default. Add button hover and hover text colours.

This commit is contained in:
Fredrik Jonsson 2022-01-24 08:59:13 +01:00
commit 431441e843
2 changed files with 20 additions and 6 deletions

View file

@ -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,

View file

@ -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);