From d4431efb47b168d92d6ec1261e5ccb564fc21d62 Mon Sep 17 00:00:00 2001 From: Dilyana Dimova Date: Wed, 16 Mar 2022 17:31:22 +0200 Subject: [PATCH 1/2] style(material): change indeterminate disabled checkbox color --- .../components/checkbox/_checkbox-theme.scss | 13 +++++++++++++ .../styles/themes/schemas/light/_checkbox.scss | 15 ++++++++++----- 2 files changed, 23 insertions(+), 5 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 8752254982a..26e9c2e2c38 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 @@ -21,6 +21,7 @@ /// @param {Color} $fill-color [null] - The checked border and fill colors. /// @param {Color} $tick-color [null] - The checked mark color. /// @param {Color} $disabled-color [null] - The disabled border and fill colors. +/// @param {Color} $disabled-indeterminate-color [null] - The disabled border and fill colors in indeterminate state. /// @param {Color} $disabled-color-label [null] - The disabled label color. /// @param {border-radius} $border-radius [null] - The border radius used for checkbox component. /// @param {border-radius} $border-radius-ripple [null] - The border radius used for checkbox ripple. @@ -46,6 +47,7 @@ $fill-color: null, $tick-color: null, $disabled-color: null, + $disabled-indeterminate-color: null, $disabled-color-label: null, $border-radius-ripple: null, $focus-outline-color: null @@ -77,6 +79,7 @@ fill-color: $fill-color, tick-color: $tick-color, disabled-color: $disabled-color, + disabled-indeterminate-color: $disabled-indeterminate-color, disabled-color-label: $disabled-color-label, border-radius: $border-radius, border-radius-ripple: $border-radius-ripple, @@ -267,6 +270,16 @@ top: $mark-offset; left: $mark-offset; } + + @if $variant == 'material' { + %cbx-composite--x--disabled { + border: var-get($theme, 'disabled-indeterminate-color'); + + &::after { + background: var-get($theme, 'disabled-indeterminate-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 210b950aa06..a8c11affb77 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 @@ -10,11 +10,12 @@ /// Generates a light checkbox schema. /// @type {Map} /// @prop {Color} tick-color [color: ('grays', 50)] - The checked mark color. -/// @prop {Map} label-color [color: ('grays', 900)]- The text color used for the label text. -/// @prop {Map} empty-color [color: ('grays', 600)] - The unchecked border color. -/// @prop {Map} fill-color [color: ('secondary', 500)] - The checked border and fill colors. -/// @prop {Map} disabled-color [color: ('grays', 400)] - The disabled border and fill colors. -/// @prop {Map} disabled-color-label [color: ('grays', 400)] - The disabled color of the label. +/// @prop {Color} label-color [color: ('grays', 900)]- The text color used for the label text. +/// @prop {Color} empty-color [color: ('grays', 600)] - The unchecked border color. +/// @prop {Color} fill-color [color: ('secondary', 500)] - The checked border and fill colors. +/// @prop {Color} disabled-color [color: ('grays', 400)] - The disabled border and fill colors. +/// @prop {Color} disabled-indeterminate-color [color: ('secondary', 200)] - The disabled border and fill colors in indeterminate state. +/// @prop {Color} disabled-color-label [color: ('grays', 400)] - The disabled color of the label. /// @prop {Number} border-radius [.2] - The border radius used for checkbox. Can be a fraction between 0 and 1, pixels, or percent. /// @prop {Number} border-radius-ripple [1] - The border radius used for checkbox ripple. Can be a fraction between 0 and 1, pixels, or percent. /// @@ -46,6 +47,10 @@ $light-checkbox: extend( color: ('grays', 400) ), + disabled-indeterminate-color: ( + color: ('secondary', 200) + ), + disabled-color-label: ( color: ('grays', 400) ) From 1e7e6ce58dabb8a5f4d0305186d005788f5df171 Mon Sep 17 00:00:00 2001 From: Simeon Simeonoff Date: Thu, 17 Mar 2022 10:26:06 +0200 Subject: [PATCH 2/2] Update projects/igniteui-angular/src/lib/core/styles/themes/schemas/light/_checkbox.scss Co-authored-by: Stefan Ivanov --- .../src/lib/core/styles/themes/schemas/light/_checkbox.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) 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 a8c11affb77..aed8cfd8231 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 @@ -48,7 +48,7 @@ $light-checkbox: extend( ), disabled-indeterminate-color: ( - color: ('secondary', 200) + color: ('secondary', 100) ), disabled-color-label: (