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

Button style improvments.

Browse source
This commit is contained in:
Fredrik Jonsson 2024-12-11 15:33:29 +01:00
commit 7a0b81b7e3
3 changed files with 18 additions and 6 deletions
Download patch file Download diff file Expand all files Collapse all files

2
assets/sass/_colors.scss
View file

@ -60,7 +60,7 @@ $colors: (
mobile-menu-cover: rgba($black, .2), mobile-menu-cover: rgba($black, .2),
button: $brand, button: $brand,
button-hover: $brand-alt, button-hover: $brand-dark,
button-text: $white, button-text: $white,
button-text-hover: $white, button-text-hover: $white,
button-disabled: $grey, button-disabled: $grey,

4
assets/sass/_zen.scss
View file

@ -151,10 +151,6 @@ main {
background-color: var(--color-warning-bg); background-color: var(--color-warning-bg);
} }
} }
button {
@extend %button--shadow;
}
} }
.js-submitted { .js-submitted {

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

@ -78,13 +78,29 @@ button,
&--shadow { &--shadow {
&:hover { &:hover {
box-shadow: 2px 2px 5px 1px var(--color-button-hover); box-shadow: 2px 2px 5px 1px var(--color-button-disabled);
} }
&:active { &:active {
box-shadow: inset 2px 2px 5px 1px var(--color-button); box-shadow: inset 2px 2px 5px 1px var(--color-button);
} }
} }
&--plain {
appearance: none;
padding: .5rem;
color: currentcolor;
background-color: unset;
border: unset;
&:hover,
&:focus-visible,
&:active {
color: currentcolor;
background-color: unset;
scale: 1.15;
}
}
} }
// The disabled variation should always go last, so that it overrides any // The disabled variation should always go last, so that it overrides any