fix(checkbox): disabled state issues (#15200)

IgniteUI · Jan 7, 2025 · 652d9cb · 652d9cb
1 parent 50f32c3
commit 652d9cb
Show file tree

Hide file tree

Showing 2 changed files with 15 additions and 5 deletions.
diff --git a/projects/igniteui-angular/src/lib/core/styles/components/checkbox/_checkbox-component.scss b/projects/igniteui-angular/src/lib/core/styles/components/checkbox/_checkbox-component.scss
@@ -232,10 +232,6 @@
             @extend %igx-checkbox--indeterminate-fluent !optional;
         }
 
-        @include mx(material, indeterminate) {
-            @extend %igx-checkbox--indeterminate-material !optional;
-        }
-
         @include mx(invalid, indeterminate) {
             @extend %igx-checkbox--indeterminate--invalid !optional;
 
@@ -246,6 +242,14 @@
             }
         }
 
+        @include mx(material, disabled, indeterminate) {
+            @extend %igx-checkbox--disabled-indeterminate-material !optional;
+        }
+
+        @include mx(fluent, disabled, indeterminate) {
+            @extend %igx-checkbox--disabled-indeterminate-fluent !optional;
+        }
+
         @include mx(indigo, focused, indeterminate) {
             @extend %igx-checkbox--focused-checked-indigo !optional;
         }

diff --git a/projects/igniteui-angular/src/lib/core/styles/components/checkbox/_checkbox-theme.scss b/projects/igniteui-angular/src/lib/core/styles/components/checkbox/_checkbox-theme.scss
@@ -377,6 +377,12 @@
                 z-index: 1;
             }
         }
+    }
+
+    %igx-checkbox--disabled-indeterminate-fluent {
+        %cbx-composite-mark {
+            stroke: transparent;
+        }
 
         %cbx-composite--x--disabled {
             background: transparent;
@@ -387,7 +393,7 @@
         }
     }
 
-    %igx-checkbox--indeterminate-material {
+    %igx-checkbox--disabled-indeterminate-material {
         %cbx-composite--x--disabled {
             border-color: var-get($theme, 'disabled-indeterminate-color');
             background: var-get($theme, 'disabled-indeterminate-color');