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
-  &.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

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

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
-  &.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