diff options
| author | Fredrik Jonsson <frjo@xdeb.org> | 2022-01-24 10:59:13 +0300 |
|---|---|---|
| committer | Fredrik Jonsson <frjo@xdeb.org> | 2022-01-24 10:59:13 +0300 |
| commit | 431441e843034be43cae71e798db11afff496d98 (patch) | |
| tree | 1d2e9eb20b59724694521abf7db5d9be5dda62ce | |
| parent | 6df6316000f1dbe17690e2751278cb1d43b1c413 (diff) | |
Use brand colour for links and buttons by default. Add button hover and hover text colours.
| -rw-r--r-- | assets/sass/_colors.scss | 10 | ||||
| -rw-r--r-- | assets/sass/components/button/_button.scss | 16 |
2 files changed, 20 insertions, 6 deletions
diff --git a/assets/sass/_colors.scss b/assets/sass/_colors.scss index 6ad4d9a..c2f015a 100644 --- a/assets/sass/_colors.scss +++ b/assets/sass/_colors.scss @@ -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, diff --git a/assets/sass/components/button/_button.scss b/assets/sass/components/button/_button.scss index baa5a09..179adeb 100644 --- a/assets/sass/components/button/_button.scss +++ b/assets/sass/components/button/_button.scss @@ -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); |