From fb264df7d84b797b049689809dd24ee1c0e6ac44 Mon Sep 17 00:00:00 2001 From: didimmova Date: Thu, 23 Oct 2025 16:55:12 +0300 Subject: [PATCH 1/6] fix(checkbox): use label-color-hover for all themes --- .../components/checkbox/_checkbox-component.scss | 10 ++++------ 1 file changed, 4 insertions(+), 6 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 index 5c0def5856a..da778f4b4bd 100644 --- 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 @@ -14,6 +14,10 @@ @extend %cbx-display !optional; &:hover { + @include e(label) { + @extend %cbx-label--hover !optional; + } + @include e(ripple) { @extend %cbx-ripple--hover !optional; } @@ -78,12 +82,6 @@ @include e(composite-mark) { @extend %cbx-composite-mark-indigo !optional; } - - @include e(label) { - &:hover { - @extend %cbx-label--hover !optional; - } - } } @include m(invalid) { From 13b229aae9d1ffaf77e7aba475df7ea1598dc786 Mon Sep 17 00:00:00 2001 From: didimmova Date: Fri, 24 Oct 2025 15:21:01 +0300 Subject: [PATCH 2/6] fix(checkbox): fix checkbox theme to use properties properly --- .../checkbox/_checkbox-component.scss | 25 +++++++++++++++++++ .../components/checkbox/_checkbox-theme.scss | 16 ++++++++++-- 2 files changed, 39 insertions(+), 2 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 index da778f4b4bd..2f677d1c649 100644 --- 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 @@ -110,6 +110,10 @@ @include e(composite-mark) { @extend %cbx-composite-mark--invalid--fluent !optional; } + + @include e(label) { + @extend %cbx-label--invalid !optional; + } } &:active { @@ -181,6 +185,12 @@ @include e(ripple) { @extend %cbx-ripple--focused-invalid !optional; } + + &:hover { + @include e(ripple) { + @extend %cbx-ripple--hover-invalid !optional; + } + } } @include mx(indigo, focused, invalid) { @@ -322,6 +332,21 @@ @extend %cbx-ripple--focused !optional; @extend %cbx-ripple--focused-checked !optional; } + + &:hover { + @include e(ripple) { + @extend %cbx-ripple--focused !optional; + @extend %cbx-ripple--focused--hover-checked !optional; + } + } + } + + @include mx(focused, invalid, checked) { + &:hover { + @include e(ripple) { + @extend %cbx-ripple--hover-invalid !optional; + } + } } @include mx(focused, indeterminate) { 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 83dc5b45d3f..70c27223bbf 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 @@ -291,6 +291,14 @@ z-index: 1; } } + + &:hover { + %cbx-composite { + &::before { + background: var-get($theme, 'fill-color-hover'); + } + } + } } %igx-checkbox--disabled-indeterminate-fluent { @@ -458,11 +466,11 @@ } %cbx-ripple--hover-checked { - background: var-get($theme, 'fill-color'); + background: var-get($theme, 'fill-color-hover'); } %cbx-ripple--hover-invalid { - background: var-get($theme, 'error-color'); + background: var-get($theme, 'error-color-hover'); } %igx-checkbox--focused-indigo { @@ -544,6 +552,10 @@ background: var-get($theme, 'fill-color'); } + %cbx-ripple--focused--hover-checked { + background: var-get($theme, 'fill-color-hover'); + } + %cbx-ripple--focused-invalid { background: var-get($theme, 'error-color'); } From 205eb114adef1b72be0d0c688cad79dd00dff152 Mon Sep 17 00:00:00 2001 From: didimmova Date: Fri, 24 Oct 2025 18:55:02 +0300 Subject: [PATCH 3/6] fix(checkbox): address latest issues --- .../checkbox/_checkbox-component.scss | 28 +++++++++---------- .../components/checkbox/_checkbox-theme.scss | 11 +++++--- 2 files changed, 20 insertions(+), 19 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 index 2f677d1c649..afc1d9fc506 100644 --- 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 @@ -22,6 +22,10 @@ @extend %cbx-ripple--hover !optional; } + @include e(composite) { + @extend %cbx-composite--hover !optional; + } + @include e(composite-mark) { @extend %cbx-composite-mark--fluent !optional; } @@ -64,21 +68,7 @@ @extend %cbx-ripple !optional; } - @include m(bootstrap) { - @include e(composite) { - &:hover { - @extend %cbx-composite--hover !optional; - } - } - } - @include m(indigo) { - @include e(composite) { - &:hover { - @extend %cbx-composite--hover !optional; - } - } - @include e(composite-mark) { @extend %cbx-composite-mark-indigo !optional; } @@ -247,11 +237,19 @@ @include e(composite) { @extend %cbx-composite--x--hover !optional; } + + @include e(composite-mark) { + @extend %cbx-composite-mark--in--fluent !optional; + } } } @include mx(material, disabled, indeterminate) { - @extend %igx-checkbox--disabled-indeterminate-material !optional; + @extend %igx-checkbox--disabled-indeterminate !optional; + } + + @include mx(bootstrap, disabled, indeterminate) { + @extend %igx-checkbox--disabled-indeterminate !optional; } @include mx(fluent, disabled, indeterminate) { 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 70c27223bbf..ba1af213faa 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 @@ -122,7 +122,9 @@ } %cbx-composite--hover { - border-color: var-get($theme, 'empty-color-hover'); + @if $variant == 'bootstrap' or $variant == 'indigo' { + border-color: var-get($theme, 'empty-color-hover'); + } } %cbx-composite--x { @@ -175,6 +177,7 @@ %cbx-composite--x--disabled { @if $variant == 'material' or $variant == 'fluent' { background: var-get($theme, 'disabled-color'); + border-color: var-get($theme, 'disabled-color'); } @if $variant == 'indigo' or $variant == 'bootstrap' { @@ -262,7 +265,7 @@ } %igx-checkbox--disabled-indeterminate-indigo { - @extend %igx-checkbox--indeterminate-indigo; + @extend %igx-checkbox--disabled-indeterminate; %cbx-composite-mark { rect { @@ -307,7 +310,7 @@ } %cbx-composite--x--disabled { - background: transparent; + border-color: var-get($theme, 'disabled-color'); &::before { background: var-get($theme, 'disabled-color'); @@ -315,7 +318,7 @@ } } - %igx-checkbox--disabled-indeterminate-material { + %igx-checkbox--disabled-indeterminate { %cbx-composite--x--disabled { border-color: var-get($theme, 'disabled-indeterminate-color'); background: var-get($theme, 'disabled-indeterminate-color'); From 64b35f9cc282f43c1596cbcb0839e4da97b7ddd0 Mon Sep 17 00:00:00 2001 From: didimmova Date: Mon, 27 Oct 2025 14:08:12 +0200 Subject: [PATCH 4/6] fix(checkbox): add styles for label when positioned before --- .../components/checkbox/_checkbox-component.scss | 12 ++++++++++++ 1 file changed, 12 insertions(+) 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 index afc1d9fc506..dc652e6ec4f 100644 --- 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 @@ -18,6 +18,10 @@ @extend %cbx-label--hover !optional; } + @include e(label, $m: before) { + @extend %cbx-label--hover !optional; + } + @include e(ripple) { @extend %cbx-ripple--hover !optional; } @@ -87,6 +91,10 @@ @extend %cbx-label--invalid !optional; } + @include e(label, $m: before) { + @extend %cbx-label--invalid !optional; + } + &:hover { @include e(ripple) { @extend %cbx-ripple--hover !optional; @@ -104,6 +112,10 @@ @include e(label) { @extend %cbx-label--invalid !optional; } + + @include e(label, $m: before) { + @extend %cbx-label--invalid !optional; + } } &:active { From 3c8fc1c3b0c8419e692b20fabe08c3dd92e751b0 Mon Sep 17 00:00:00 2001 From: didimmova Date: Tue, 28 Oct 2025 10:31:14 +0200 Subject: [PATCH 5/6] fix(checkbox): fix indigo indeterminate-disabled state --- .../lib/core/styles/components/checkbox/_checkbox-theme.scss | 5 ++++- 1 file changed, 4 insertions(+), 1 deletion(-) 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 ba1af213faa..e5c6c9e958c 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 @@ -320,7 +320,10 @@ %igx-checkbox--disabled-indeterminate { %cbx-composite--x--disabled { - border-color: var-get($theme, 'disabled-indeterminate-color'); + @if $variant != 'indigo' { + border-color: var-get($theme, 'disabled-indeterminate-color'); + } + background: var-get($theme, 'disabled-indeterminate-color'); } } From 3ce857666228a44faf0546bb9d9bc8e6553ae789 Mon Sep 17 00:00:00 2001 From: didimmova Date: Tue, 28 Oct 2025 11:19:06 +0200 Subject: [PATCH 6/6] fix(checkbox): fix indigo disabled indeterminate --- .../styles/components/checkbox/_checkbox-component.scss | 4 +++- .../core/styles/components/checkbox/_checkbox-theme.scss | 7 ++----- 2 files changed, 5 insertions(+), 6 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 index dc652e6ec4f..512d2335b64 100644 --- 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 @@ -269,7 +269,9 @@ } @include mx(indigo, disabled, indeterminate) { - @extend %igx-checkbox--disabled-indeterminate-indigo !optional; + @include e(composite) { + @extend %igx-checkbox--disabled-indeterminate-indigo !optional; + } } @include mx(indigo, focused, indeterminate) { 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 e5c6c9e958c..3bcf97b1d4d 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 @@ -265,7 +265,7 @@ } %igx-checkbox--disabled-indeterminate-indigo { - @extend %igx-checkbox--disabled-indeterminate; + @extend %cbx-composite--x--disabled; %cbx-composite-mark { rect { @@ -320,10 +320,7 @@ %igx-checkbox--disabled-indeterminate { %cbx-composite--x--disabled { - @if $variant != 'indigo' { - border-color: var-get($theme, 'disabled-indeterminate-color'); - } - + border-color: var-get($theme, 'disabled-indeterminate-color'); background: var-get($theme, 'disabled-indeterminate-color'); } }