diff --git a/assets/sass/_colors.scss b/assets/sass/_colors.scss index e57141d..374b9cf 100644 --- a/assets/sass/_colors.scss +++ b/assets/sass/_colors.scss @@ -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, diff --git a/assets/sass/_zen.scss b/assets/sass/_zen.scss index 9b45bb5..1466754 100644 --- a/assets/sass/_zen.scss +++ b/assets/sass/_zen.scss @@ -151,10 +151,6 @@ main { background-color: var(--color-warning-bg); } } - - button { - @extend %button--shadow; - } } .js-submitted { diff --git a/assets/sass/components/button/_button.scss b/assets/sass/components/button/_button.scss index 6177370..6ee84b7 100644 --- a/assets/sass/components/button/_button.scss +++ b/assets/sass/components/button/_button.scss @@ -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