Add missing :disabled styles for checkbox/radio button buttons

patrickhlauke · patrickhlauke · commit c90e312c4256 · 2019-06-11T12:02:18.000+01:00
diff --git a/scss/_buttons.scss b/scss/_buttons.scss
@@ -156,6 +156,25 @@ input[type="button"] {
   + .btn {
     margin-bottom: 0; // Override default `<label>` value
   }
+
+  &:focus + .btn {
+    outline: 0;
+    box-shadow: $btn-focus-box-shadow;
+  }
+
+  // Disabled comes first so active can properly restyle
+  &:disabled + .btn {
+    opacity: $btn-disabled-opacity;
+    @include box-shadow(none);
+  }
+
+  &:not(:disabled):active + .btn {
+    @include box-shadow($btn-active-box-shadow);
+  }
+
+  &:not(:disabled):active:focus + .btn {
+    @include box-shadow($btn-focus-box-shadow, $btn-active-box-shadow);
+  }
 }
 
 // Make the button input wrapper behave like a button
diff --git a/scss/mixins/_buttons.scss b/scss/mixins/_buttons.scss
@@ -19,7 +19,7 @@
   &:focus,
   &.focus,
   .btn-input:focus + &,
-  .btn-input:active + & {
+  .btn-input:not(:disabled):active + & {
     color: color-yiq($hover-background);
     @include gradient-bg($hover-background);
     border-color: $hover-border;
@@ -33,7 +33,8 @@
 
   // Disabled comes first so active can properly restyle
   &.disabled,
-  &:disabled {
+  &:disabled,
+  .btn-input:disabled + & {
     color: color-yiq($background);
     background-color: $background;
     border-color: $border;
@@ -45,8 +46,8 @@
 
   &:not(:disabled):not(.disabled):active,
   &:not(:disabled):not(.disabled).active,
-  .btn-input:checked + &,
-  .btn-input:active + &,
+  .btn-input:not(:disabled):checked + &,
+  .btn-input:not(:disabled):active + &,
   .show > &.dropdown-toggle {
     color: color-yiq($active-background);
     background-color: $active-background;
@@ -64,6 +65,20 @@
       }
     }
   }
+
+  // Duplicate the disabled styles again specifically to
+  // override the previous :active styles, as button-like
+  // checkbox/radio buttons can't be excluded generically
+  // from the previous set of selectors
+  .btn-input:disabled + &:active {
+    color: color-yiq($background);
+    background-color: $background;
+    border-color: $border;
+    // Remove CSS gradients if they're enabled
+    @if $enable-gradients {
+      background-image: none;
+    }
+  }
 }
 
 @mixin button-outline-variant($color, $color-hover: color-yiq($color), $active-background: $color, $active-border: $color) {
@@ -80,20 +95,22 @@
   &:focus,
   &.focus,
   .btn-input:focus + &,
-  .btn-input:active + & {
+  .btn-input:not(:disabled):active + & {
     box-shadow: 0 0 0 $btn-focus-width rgba($color, .5);
   }
 
   &.disabled,
-  &:disabled {
+  &:disabled,
+  .btn-input:disabled + &,
+  .btn-input:not(:disabled) + &:active {
     color: $color;
     background-color: transparent;
   }
 
   &:not(:disabled):not(.disabled):active,
   &:not(:disabled):not(.disabled).active,
-  .btn-input:checked + &,
-  .btn-input:active + &,
+  .btn-input:not(:disabled):checked + &,
+  .btn-input:not(:disabled):active + &,
   .show > &.dropdown-toggle {
     color: color-yiq($active-background);
     background-color: $active-background;
@@ -108,6 +125,15 @@
       }
     }
   }
+
+  // Duplicate the disabled styles again specifically to
+  // override the previous :active styles, as button-like
+  // checkbox/radio buttons can't be excluded generically
+  // from the previous set of selectors
+  .btn-input:disabled + &:active {
+    color: $color;
+    background-color: transparent;
+  }
 }
 
 // Button sizes
