Button style improvments.
This commit is contained in:
parent
3a7bf40e72
commit
7a0b81b7e3
3 changed files with 18 additions and 6 deletions
|
|
@ -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,
|
||||
|
|
|
|||
|
|
@ -151,10 +151,6 @@ main {
|
|||
background-color: var(--color-warning-bg);
|
||||
}
|
||||
}
|
||||
|
||||
button {
|
||||
@extend %button--shadow;
|
||||
}
|
||||
}
|
||||
|
||||
.js-submitted {
|
||||
|
|
|
|||
|
|
@ -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
|
||||
|
|
|
|||
Loading…
Reference in a new issue