diff --git a/scss/_buttons.scss b/scss/_buttons.scss index f860d96e31..9d4f3efc8b 100644 --- a/scss/_buttons.scss +++ b/scss/_buttons.scss @@ -1,5 +1,3 @@ -// stylelint-disable selector-no-qualifying-type - // // Base styles // @@ -31,27 +29,22 @@ box-shadow: $btn-focus-box-shadow; } - // Disabled comes first so active can properly restyle - &.disabled, - &:disabled { - opacity: $btn-disabled-opacity; - @include box-shadow(none); - } - - &:not(:disabled):not(.disabled):active, - &:not(:disabled):not(.disabled).active { + &:active, + &.active { @include box-shadow($btn-active-box-shadow); &:focus { @include box-shadow($btn-focus-box-shadow, $btn-active-box-shadow); } } -} -// Future-proof disabling of clicks on `` elements -a.btn.disabled, -fieldset:disabled a.btn { - pointer-events: none; + &:disabled, + &.disabled, + fieldset:disabled & { // stylelint-disable-line selector-no-qualifying-type + pointer-events: none; + opacity: $btn-disabled-opacity; + @include box-shadow(none); + } } @@ -96,7 +89,6 @@ fieldset:disabled a.btn { &:disabled, &.disabled { color: $btn-link-disabled-color; - pointer-events: none; } // No need for an active state here diff --git a/scss/_close.scss b/scss/_close.scss index d7e7434da6..2bcbe104da 100644 --- a/scss/_close.scss +++ b/scss/_close.scss @@ -12,11 +12,14 @@ text-decoration: none; } - &:not(:disabled):not(.disabled) { - &:hover, - &:focus { - opacity: .75; - } + &:hover, + &:focus { + opacity: .75; + } + + &:disabled, + &.disabled { + pointer-events: none; } } @@ -32,10 +35,3 @@ button.close { border: 0; appearance: none; } - -// Future-proof disabling of clicks on `` elements - -// stylelint-disable-next-line selector-no-qualifying-type -a.close.disabled { - pointer-events: none; -} diff --git a/scss/_pagination.scss b/scss/_pagination.scss index 67d27176aa..d987d0fbec 100644 --- a/scss/_pagination.scss +++ b/scss/_pagination.scss @@ -40,8 +40,6 @@ &.disabled .page-link { color: $pagination-disabled-color; pointer-events: none; - // Opinionated: remove the "hand" cursor set previously for .page-link - cursor: auto; background-color: $pagination-disabled-bg; border-color: $pagination-disabled-border-color; } diff --git a/scss/forms/_form-range.scss b/scss/forms/_form-range.scss index 13fb981174..6cf90138d3 100644 --- a/scss/forms/_form-range.scss +++ b/scss/forms/_form-range.scss @@ -119,22 +119,16 @@ } &:disabled { + pointer-events: none; + &::-webkit-slider-thumb { background-color: $form-range-thumb-disabled-bg; } - &::-webkit-slider-runnable-track { - cursor: default; - } - &::-moz-range-thumb { background-color: $form-range-thumb-disabled-bg; } - &::-moz-range-track { - cursor: default; - } - &::-ms-thumb { background-color: $form-range-thumb-disabled-bg; } diff --git a/scss/mixins/_buttons.scss b/scss/mixins/_buttons.scss index 77331e1a01..8dc2c882a7 100644 --- a/scss/mixins/_buttons.scss +++ b/scss/mixins/_buttons.scss @@ -38,20 +38,8 @@ } } - // Disabled comes first so active can properly restyle - &.disabled, - &:disabled { - color: $color; - background-color: $background; - border-color: $border; - // Remove CSS gradients if they're enabled - @if $enable-gradients { - background-image: none; - } - } - - &:not(:disabled):not(.disabled):active, - &:not(:disabled):not(.disabled).active, + &:active, + &.active, .show > &.dropdown-toggle { color: $active-color; background-color: $active-background; @@ -69,6 +57,17 @@ } } } + + &:disabled, + &.disabled { + color: $color; + background-color: $background; + border-color: $border; + // Remove CSS gradients if they're enabled + @if $enable-gradients { + background-image: none; + } + } } @mixin button-outline-variant( @@ -92,14 +91,8 @@ box-shadow: 0 0 0 $btn-focus-width rgba($color, .5); } - &.disabled, - &:disabled { - color: $color; - background-color: transparent; - } - - &:not(:disabled):not(.disabled):active, - &:not(:disabled):not(.disabled).active, + &:active, + &.active, .show > &.dropdown-toggle { color: $active-color; background-color: $active-background; @@ -114,6 +107,12 @@ } } } + + &:disabled, + &.disabled { + color: $color; + background-color: transparent; + } } // Button sizes diff --git a/site/content/docs/4.3/components/buttons.md b/site/content/docs/4.3/components/buttons.md index 73cb838032..b64dfdbec9 100644 --- a/site/content/docs/4.3/components/buttons.md +++ b/site/content/docs/4.3/components/buttons.md @@ -86,7 +86,7 @@ Buttons will appear pressed (with a darker background, darker border, and inset ## Disabled state -Make buttons look inactive by adding the `disabled` boolean attribute to any ` diff --git a/site/content/docs/4.3/components/close-button.md b/site/content/docs/4.3/components/close-button.md index 377c365b64..28211cd5d6 100644 --- a/site/content/docs/4.3/components/close-button.md +++ b/site/content/docs/4.3/components/close-button.md @@ -5,10 +5,14 @@ description: A generic close button for dismissing content like modals and alert group: components --- -**Be sure to include text for screen readers**, as we've done with `aria-label`. +**Be sure to include text for screen readers**, as we've done with `aria-label`. Disabled close buttons have `pointer-events: none` applied to, preventing hover and active states from triggering. {{< example >}} + + {{< /example >}} diff --git a/site/content/docs/4.3/migration.md b/site/content/docs/4.3/migration.md index 67f46c1c0a..0f6ddf1917 100644 --- a/site/content/docs/4.3/migration.md +++ b/site/content/docs/4.3/migration.md @@ -91,6 +91,10 @@ Changes to Reboot, typography, tables, and more. ## Components +### Disabled states + +- Disabled states of the buttons, close button, pagination link & form range now have `pointer-events: none` added. This simplifies our codebase and makes it easier to override active states in CSS. [#29296](https://github.com/twbs/bootstrap/pull/29296). + ### Alerts - **Todo:** Remove auto-darkening of `
` elements in `.alert-*` class variants. `
`s use `rgba()` for their color, so these should naturally blend anyway.