ViMaSter/hackertours-theme
Watch
0
0
Fork
You've already forked hackertours-theme
 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

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

Browse source
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
Download patch file Download diff file Expand all files Collapse all files

10
assets/sass/_colors.scss
View file

@ -29,7 +29,7 @@ $colors: (
link: $black, link: $black,
link-visited: $black, link-visited: $black,
link-hover: $nearblack, link-hover: $brand,
link-active: $red, link-active: $red,
border: $grey-light, border: $grey-light,
@ -41,14 +41,16 @@ $colors: (
autocomplete-select-bg: $blue, autocomplete-select-bg: $blue,
body-bg: $white, body-bg: $white,
header-bg: $nearblack, header-bg: $brand,
backdrop: $grey-extra-light, backdrop: $grey-extra-light,
mobile-menu: $nearblack, mobile-menu: $brand,
mobile-menu-cover: rgba($black, .2), mobile-menu-cover: rgba($black, .2),
button: $nearblack, button: $brand,
button-hover: $brand-dark,
button-text: $white, button-text: $white,
button-text-hover: $white,
button-disabled: $grey, button-disabled: $grey,
form-error: $red, form-error: $red,

16
assets/sass/components/button/_button.scss
View file

@ -35,8 +35,8 @@ button,
&:active { &:active {
// Override any link underlines and color changes. // Override any link underlines and color changes.
text-decoration: none; text-decoration: none;
color: var(--color-button); color: var(--color-button-text-hover);
background-color: var(--color-button-text); background-color: var(--color-button-hover);
} }
} }
@ -50,6 +50,18 @@ button,
@include padding(.1 .5); @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 { &--outline {
color: var(--color-button); color: var(--color-button);
background-color: var(--color-button-text); background-color: var(--color-button-text);