Grey out disabled button

It looks like the disabled-bg colour was being used for pagination, but I can't see where. This way we should be able to apply the styles more consistently in the future.
This commit is contained in:
David Cook
2023-11-03 17:28:20 +11:00
parent 38296eb967
commit f9fc1657a8
2 changed files with 14 additions and 1 deletions

View File

@@ -1,3 +1,13 @@
@mixin disabled-button() {
&:disabled,
&:disabled:hover {
cursor: initial;
color: $color-btn-disabled-text;
background-color: $color-btn-disabled-bg;
border-color: transparent;
}
}
input[type="submit"],
input[type="reset"],
input[type="button"]:not(.trix-button),
@@ -15,6 +25,7 @@ button:not(.plain):not(.trix-button),
line-height: $btn-regular-height - 2px; // remove 2px to compensate for border
height: $btn-regular-height;
font-weight: bold;
@include disabled-button();
&:before {
font-weight: normal !important;
@@ -100,6 +111,7 @@ button:not(.plain):not(.trix-button),
&.red {
background-color: $color-btn-red-bg;
border-color: $color-btn-red-bg;
@include disabled-button(); // required for specifity
&:hover {
background-color: $color-btn-red-hover-bg;

View File

@@ -44,7 +44,8 @@ $color-btn-shadow: 0px 1px 0px rgba(0, 0, 0, 0.05), 0px 2px 2px rg
$color-btn-hover-bg: $orient !default;
$color-btn-hover-text: $white !default;
$color-btn-hover-border: $dark-blue !default;
$color-btn-disabled-bg: $light-grey !default;
$color-btn-disabled-bg: $medium-grey !default;
$color-btn-disabled-text: $lighter-grey !default;
$color-btn-red-bg: $red !default;
$color-btn-red-hover-bg: $roof-terracotta !default;