Simplify disabled styles (#29296)

* Simplify disabled styles

* Mention pointer-events usage

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
+  &:active,
-  &.disabled,
+  &.active {
-  &:disabled {
-    opacity: $btn-disabled-opacity;
-    @include box-shadow(none);
-  }
-
-  &:not(:disabled):not(.disabled):active,
-  &:not(:disabled):not(.disabled).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
+  &:disabled,
-a.btn.disabled,
+  &.disabled,
-fieldset:disabled a.btn {
+  fieldset:disabled & { // stylelint-disable-line selector-no-qualifying-type
-  pointer-events: none;
+    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

scss/_close.scss

@@ -12,11 +12,14 @@
     text-decoration: none;
   }
 
-  &:not(:disabled):not(.disabled) {
+  &:hover,
-    &:hover,
+  &:focus {
-    &:focus {
+    opacity: .75;
-      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;
-}

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;
   }

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;
     }

scss/mixins/_buttons.scss

@@ -38,20 +38,8 @@
     }
   }
 
-  // Disabled comes first so active can properly restyle
+  &:active,
-  &.disabled,
+  &.active,
-  &: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,
   .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,
+  &:active,
-  &:disabled {
+  &.active,
-    color: $color;
-    background-color: transparent;
-  }
-
-  &:not(:disabled):not(.disabled):active,
-  &:not(:disabled):not(.disabled).active,
   .show > &.dropdown-toggle {
     color: $active-color;
     background-color: $active-background;
@@ -114,6 +107,12 @@
       }
     }
   }
+
+  &:disabled,
+  &.disabled {
+    color: $color;
+    background-color: transparent;
+  }
 }
 
 // Button sizes

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>

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 >}}

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.