From f5305436fb7039fd1651b826b9a2e26e2b2b3ffe Mon Sep 17 00:00:00 2001
From: Dilyana Yarabanova <45598235+didimmova@users.noreply.github.com>
Date: Tue, 22 Mar 2022 15:07:43 +0200
Subject: [PATCH] feat(checkbox): change indeterminate fluent checkbox look
 (#11253)

* feat(checkbox): change indeterminate fluent checkbox look
---
 .../components/checkbox/_checkbox-theme.scss  | 39 +++++++++++++++++++
 .../themes/schemas/light/_checkbox.scss       |  4 +-
 2 files changed, 41 insertions(+), 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
index 26e9c2e2c38..62416c56a78 100644
--- 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
index aed8cfd8231..3dacf0e46e2 100644
--- 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)
         ),
     )
 );