fix(checkbox): fix colors for indeterminate checkboxes (#1339)

* Fix the active/pressed state on a disabled checkbox
Orange-OpenSource · Jul 5, 2022 · 0d94817 · 0d94817
1 parent 1734401
commit 0d94817
Show file tree

Hide file tree

Showing 4 changed files with 21 additions and 12 deletions.
diff --git a/scss/_variables.scss b/scss/_variables.scss
@@ -1041,8 +1041,8 @@ $form-check-input-checked-bg-image:       var(--#{$boosted-prefix}check-icon) !d
 $form-check-input-disabled-color:         $gray-900 !default; // Boosted mod
 $form-check-radio-checked-bg-image:       url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'><circle r='2' fill='#{$form-check-input-checked-color}'/></svg>") !default;
 
-$form-check-input-indeterminate-color:          color-contrast($component-active-color) !default;
-$form-check-input-indeterminate-bg-color:       $component-active-color !default;
+$form-check-input-indeterminate-color:          $form-check-input-checked-color !default;
+$form-check-input-indeterminate-bg-color:       $form-check-input-checked-bg-color !default;
 $form-check-input-indeterminate-border-color:   $form-check-input-indeterminate-bg-color !default;
 $form-check-input-indeterminate-bg-image:       url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 3'><path fill='#{$form-check-input-indeterminate-color}' d='M0 0h10v3H0z'/></svg>") !default;
 

diff --git a/scss/forms/_form-check.scss b/scss/forms/_form-check.scss
@@ -49,17 +49,18 @@
     border-radius: $form-check-radio-border-radius;
   }
 
-  &:focus {
-    border-color: $form-check-input-focus-border;
-    box-shadow: $form-check-input-focus-box-shadow;
-  }
-
   &:active {
     background-color: $form-check-input-active-bg-color; // Boosted mod
     filter: $form-check-input-active-filter;
     border-color: $form-check-input-active-bg-color; // Boosted mod
   }
 
+  &:focus {
+    border-color: $form-check-input-focus-border;
+    // Boosted mod: default outline
+    box-shadow: $form-check-input-focus-box-shadow;
+  }
+
   &:checked {
     background-color: $form-check-input-checked-bg-color;
     border-color: $form-check-input-checked-border-color;
@@ -103,7 +104,8 @@
     opacity: $form-check-input-disabled-opacity;
 
     // Boosted mod
-    &:checked {
+    &:checked,
+    &:indeterminate {
       background-color: $form-check-input-disabled-color;
       filter: $invert-filter;
       border-color: $form-check-input-disabled-color;
@@ -117,6 +119,7 @@
   &:disabled {
     ~ .form-check-label {
       color: $form-label-disabled-color; // Boosted mod
+      pointer-events: none;
       cursor: default;
       opacity: $form-check-label-disabled-opacity;
     }

diff --git a/site/assets/js/snippets.js b/site/assets/js/snippets.js
@@ -76,9 +76,9 @@
   }
 
   // Indeterminate checkbox example
-  document.querySelectorAll('.bd-example-indeterminate [type="checkbox"]')
-    .forEach(checkbox => {
-      checkbox.indeterminate = true
+  document.querySelectorAll('.bd-example-indeterminate')
+    .forEach(example => {
+      example.querySelector('[type="checkbox"]').indeterminate = true
     })
 
   // Disable empty links in docs examples

diff --git a/site/content/docs/5.2/forms/checks-radios.md b/site/content/docs/5.2/forms/checks-radios.md
@@ -49,7 +49,13 @@ Checkboxes can utilize the `:indeterminate` pseudo class when manually set via J
 
 Add the `disabled` attribute and the associated `<label>`s are automatically styled to match with a lighter color to help indicate the input's state.
 
-{{< example >}}
+{{< example class="bd-example-indeterminate">}}
+<div class="form-check">
+  <input class="form-check-input" type="checkbox" value="" id="flexCheckIndeterminateDisabled" disabled>
+  <label class="form-check-label" for="flexCheckIndeterminateDisabled">
+    Indeterminate checkbox
+  </label>
+</div>
 <div class="form-check">
   <input class="form-check-input" type="checkbox" value="" id="flexCheckDisabled" disabled>
   <label class="form-check-label" for="flexCheckDisabled">