feat(checkbox): change indeterminate fluent checkbox look (#11253)

* feat(checkbox): change indeterminate fluent checkbox look
IgniteUI · Mar 22, 2022 · f530543 · f530543
1 parent 4815398
commit f530543
Show file tree

Hide file tree

Showing 2 changed files with 41 additions and 2 deletions.
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
@@ -280,6 +280,45 @@
                 }
             }
         }
+
+        @if $variant == 'fluent' {
+            %cbx-composite-mark {
+                stroke: transparent;
+            }
+
+            %cbx-composite {
+                background: transparent;
+
+                &::after {
+                    background: transparent;
+                }
+
+                &::before {
+                    content: '';
+                    position: absolute;
+                    top: calc($size / 2 - rem(6px));
+                    left: calc($size / 2 - rem(6px));
+                    width: rem(10px);
+                    height: rem(10px);
+                    border-radius: rem(2px);
+                    border: rem(5px) solid var-get($theme, 'fill-color');
+                    z-index: 1;
+                }
+            }
+
+            %cbx-composite--x--disabled {
+                background: transparent;
+
+                &::after {
+                    background: transparent;
+                }
+
+                &::before {
+                    border-color: var-get($theme, 'disabled-color');
+                    background: var-get($theme, 'disabled-color');
+                }
+            }
+        }
     }
 
     %cbx-composite-mark--x {

diff --git a/projects/igniteui-angular/src/lib/core/styles/themes/schemas/light/_checkbox.scss b/projects/igniteui-angular/src/lib/core/styles/themes/schemas/light/_checkbox.scss
@@ -61,7 +61,7 @@ $light-checkbox: extend(
 /// @type {Map}
 /// @prop {Map} empty-color [color: ('grays', 900)] - The unchecked border color.
 /// @prop {Map} fill-color [color: ('primary', 500)] - The checked border and fill colors.
-/// @prop {Map} disabled-color [color: ('grays', 300)] - The disabled border and fill colors.
+/// @prop {Map} disabled-color [color: ('grays', 400)] - The disabled border and fill colors.
 /// @prop {Number} border-radius [2px] - The border radius used for checkbox. Can be a fraction between 0 and 1, pixels, or percent.
 /// @prop {Number} border-radius-ripple [2px] - The border radius used for checkbox ripple. Can be a fraction between 0 and 1, pixels, or percent.
 /// @property {Map} focus-outline-color [color: ('grays', 800)] - The focus outlined color.
@@ -88,7 +88,7 @@ $fluent-checkbox: extend(
         ),
 
         disabled-color: (
-            color: ('grays', 300)
+            color: ('grays', 400)
         ),
     )
 );