Button style improvments.

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

View file

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

View file

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

View file

@ -78,13 +78,29 @@ button,
&--shadow {
&:hover {
box-shadow: 2px 2px 5px 1px var(--color-button-hover);
box-shadow: 2px 2px 5px 1px var(--color-button-disabled);
}
&:active {
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