fix indeterminate check styling

deephaven · Dec 21, 2023 · fd3fe24 · fd3fe24
1 parent fa4e040
commit fd3fe24
Show file tree

Hide file tree

Showing 2 changed files with 12 additions and 2 deletions.
diff --git a/packages/components/scss/BaseStyleSheet.scss b/packages/components/scss/BaseStyleSheet.scss
@@ -472,7 +472,7 @@ form label small {
 .custom-radio {
   .custom-control-input:checked ~ .custom-control-label {
     &::after {
-      mask: escape-svg($custom-radio-indicator-icon-checked) 50%/40% 40%
+      mask: escape-svg($custom-radio-indicator-icon-checked) 4px / 6px 6px
         no-repeat;
       background: var(--dh-color-input-bg);
     }
@@ -488,6 +488,14 @@ form label small {
     }
   }
 
+  .custom-control-input:indeterminate ~ .custom-control-label {
+    &::after {
+      mask: escape-svg($custom-checkbox-indicator-icon-indeterminate) 50%/65%
+        65% no-repeat;
+      background: var(--dh-color-input-bg);
+    }
+  }
+
   .custom-control-input:disabled {
     &:checked ~ .custom-control-label::before {
       border: var(--dh-color-input-disabled-fg);

diff --git a/packages/components/scss/bootstrap_overrides.scss b/packages/components/scss/bootstrap_overrides.scss
@@ -190,8 +190,10 @@ $custom-control-indicator-border-color: var(--dh-color-input-border);
 $custom-checkbox-indicator-border-radius: 2px;
 $custom-control-indicator-border-width: 2px;
 $custom-control-indicator-active-bg: var(--dh-color-input-bg);
+$custom-control-indicator-active-border-color: var(--dh-color-input-fg);
 $custom-control-indicator-checked-bg: var(--dh-color-input-fg);
-$custom-control-indicator-checked-color: var(--dh-color-input-fg);
+$custom-control-indicator-checked-color: black; // used as mask fill color
+$custom-checkbox-indicator-indeterminate-bg: var(--dh-color-input-fg);
 $custom-control-indicator-bg-size: 75% 75%;
 $custom-control-indicator-disabled-bg: var(--dh-color-input-disabled-bg);
 $custom-control-indicator-checked-disabled-bg: var(