added variable for the background of checked and indeterminate custom inputs and radios that are disabled

added styles for these cases

2 files changed, 16 insertions, 0 deletions

diff --git a/scss/_custom-forms.scss b/scss/_custom-forms.scss
index d99a86dc7..dd844c07f 100644
--- a/scss/_custom-forms.scss
+++ b/scss/_custom-forms.scss
@@ -117,6 +117,15 @@
       background-image: $custom-checkbox-indicator-icon-indeterminate;
     }
   }
+
+  .custom-control-input:disabled {
+    &:checked ~ .custom-control-label::before {
+      background-color: $custom-control-indicator-checked-disabled-bg;
+    }
+    &:indeterminate ~ .custom-control-label::before {
+      background-color: $custom-control-indicator-checked-disabled-bg;
+    }
+  }
 }
 
 // Radios
@@ -136,6 +145,12 @@
       background-image: $custom-radio-indicator-icon-checked;
     }
   }
+
+  .custom-control-input:disabled {
+    &:checked ~ .custom-control-label::before {
+      background-color: $custom-control-indicator-checked-disabled-bg;
+    }
+  }
 }
 
 
diff --git a/scss/_variables.scss b/scss/_variables.scss
index 31149a5e4..fe3f85b3a 100644
--- a/scss/_variables.scss
+++ b/scss/_variables.scss
@@ -449,6 +449,7 @@ $custom-control-label-disabled-color:     $gray-600 !default;
 
 $custom-control-indicator-checked-color:        $white !default;
 $custom-control-indicator-checked-bg:           theme-color("primary") !default;
+$custom-control-indicator-checked-disabled-bg:  rgba(theme-color("primary"), .5) !default;
 $custom-control-indicator-checked-box-shadow:   none !default;
 
 $custom-control-indicator-focus-box-shadow:     0 0 0 1px $body-bg, $input-btn-focus-box-shadow !default;