Simplify disabled styles (#29296)

* Simplify disabled styles

* Mention pointer-events usage

diff --git a/scss/_buttons.scss b/scss/_buttons.scss
index f860d96e3183acfa7a01589b3e841854016a4af0..9d4f3efc8b0dab9e724cc28b14680df55bc22f4a 100644 (file)
--- 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 `<a>` 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 d7e7434da616f5376fdb15a48527a5f9a212a6df..2bcbe104da4e6d61af620a17d418065ba47a0956 100644 (file)
--- 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 `<a>` 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 67d27176aa625aa55e3cdb1b9f64c92048001d85..d987d0fbec3bae7c965521b55cdc8f5ff281b7c8 100644 (file)
--- 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 13fb981174e2883114d971eb53bd3b5b858f0e3a..6cf90138d303335f487a0263179b69e4c41f8625 100644 (file)
--- 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 77331e1a015690a5b07a9d34e44b584e04ab9d30..8dc2c882a78d0eefc7ce3e1d9e2e9485e0cc9df2 100644 (file)
--- 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 73cb838032471c4a1d149f0f91287c24d2e614c7..b64dfdbec9e8c0303b5ca6d762f618ad251c5d3a 100644 (file)
--- 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 `<button>` element.
+Make buttons look inactive by adding the `disabled` boolean attribute to any `<button>` element. Disabled buttons have `pointer-events: none` applied to, preventing hover and active states from triggering.
 
 {{< example >}}
 <button type="button" class="btn btn-lg btn-primary" disabled>Primary button</button>

diff --git a/site/content/docs/4.3/components/close-button.md b/site/content/docs/4.3/components/close-button.md
index 377c365b64940d46b9b2cf18ff8fe6013dca0dd2..28211cd5d64191cabfa635a6c1e4c2989292ac86 100644 (file)
--- 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 >}}
 <button type="button" class="close" aria-label="Close">
   <span aria-hidden="true">&times;</span>
 </button>
+
+<button type="button" class="close" disabled aria-label="Close">
+  <span aria-hidden="true">&times;</span>
+</button>
 {{< /example >}}

diff --git a/site/content/docs/4.3/migration.md b/site/content/docs/4.3/migration.md
index 67f46c1c0a9a3e582cfa6207ba8e532c293c25fb..0f6ddf1917248c1041b1c7604b6bd1d62887d1b6 100644 (file)
--- 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 `<hr>` elements in `.alert-*` class variants. `<hr>`s use `rgba()` for their color, so these should naturally blend anyway.