Skip to content

Commit 75a87dc

Browse files
didimmovasimeonoffSisIvanova
authored
fix(checkbox): use label-color-hover for all themes (#16364)
* fix(checkbox): use label-color-hover for all themes * fix(checkbox): fix checkbox theme to use properties properly * fix(checkbox): address latest issues * fix(checkbox): add styles for label when positioned before * fix(checkbox): fix indigo indeterminate-disabled state * fix(checkbox): fix indigo disabled indeterminate --------- Co-authored-by: Simeon Simeonoff <sim.simeonoff@gmail.com> Co-authored-by: Silvia Ivanova <59446295+SisIvanova@users.noreply.github.com>
1 parent d97acd1 commit 75a87dc

File tree

2 files changed

+78
-28
lines changed

2 files changed

+78
-28
lines changed

‎projects/igniteui-angular/src/lib/core/styles/components/checkbox/_checkbox-component.scss‎

Lines changed: 57 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -14,10 +14,22 @@
1414
@extend %cbx-display !optional;
1515

1616
&:hover {
17+
@include e(label) {
18+
@extend %cbx-label--hover !optional;
19+
}
20+
21+
@include e(label, $m: before) {
22+
@extend %cbx-label--hover !optional;
23+
}
24+
1725
@include e(ripple) {
1826
@extend %cbx-ripple--hover !optional;
1927
}
2028

29+
@include e(composite) {
30+
@extend %cbx-composite--hover !optional;
31+
}
32+
2133
@include e(composite-mark) {
2234
@extend %cbx-composite-mark--fluent !optional;
2335
}
@@ -60,30 +72,10 @@
6072
@extend %cbx-ripple !optional;
6173
}
6274

63-
@include m(bootstrap) {
64-
@include e(composite) {
65-
&:hover {
66-
@extend %cbx-composite--hover !optional;
67-
}
68-
}
69-
}
70-
7175
@include m(indigo) {
72-
@include e(composite) {
73-
&:hover {
74-
@extend %cbx-composite--hover !optional;
75-
}
76-
}
77-
7876
@include e(composite-mark) {
7977
@extend %cbx-composite-mark-indigo !optional;
8078
}
81-
82-
@include e(label) {
83-
&:hover {
84-
@extend %cbx-label--hover !optional;
85-
}
86-
}
8779
}
8880

8981
@include m(invalid) {
@@ -99,6 +91,10 @@
9991
@extend %cbx-label--invalid !optional;
10092
}
10193

94+
@include e(label, $m: before) {
95+
@extend %cbx-label--invalid !optional;
96+
}
97+
10298
&:hover {
10399
@include e(ripple) {
104100
@extend %cbx-ripple--hover !optional;
@@ -112,6 +108,14 @@
112108
@include e(composite-mark) {
113109
@extend %cbx-composite-mark--invalid--fluent !optional;
114110
}
111+
112+
@include e(label) {
113+
@extend %cbx-label--invalid !optional;
114+
}
115+
116+
@include e(label, $m: before) {
117+
@extend %cbx-label--invalid !optional;
118+
}
115119
}
116120

117121
&:active {
@@ -183,6 +187,12 @@
183187
@include e(ripple) {
184188
@extend %cbx-ripple--focused-invalid !optional;
185189
}
190+
191+
&:hover {
192+
@include e(ripple) {
193+
@extend %cbx-ripple--hover-invalid !optional;
194+
}
195+
}
186196
}
187197

188198
@include mx(indigo, focused, invalid) {
@@ -239,19 +249,29 @@
239249
@include e(composite) {
240250
@extend %cbx-composite--x--hover !optional;
241251
}
252+
253+
@include e(composite-mark) {
254+
@extend %cbx-composite-mark--in--fluent !optional;
255+
}
242256
}
243257
}
244258

245259
@include mx(material, disabled, indeterminate) {
246-
@extend %igx-checkbox--disabled-indeterminate-material !optional;
260+
@extend %igx-checkbox--disabled-indeterminate !optional;
261+
}
262+
263+
@include mx(bootstrap, disabled, indeterminate) {
264+
@extend %igx-checkbox--disabled-indeterminate !optional;
247265
}
248266

249267
@include mx(fluent, disabled, indeterminate) {
250268
@extend %igx-checkbox--disabled-indeterminate-fluent !optional;
251269
}
252270

253271
@include mx(indigo, disabled, indeterminate) {
254-
@extend %igx-checkbox--disabled-indeterminate-indigo !optional;
272+
@include e(composite) {
273+
@extend %igx-checkbox--disabled-indeterminate-indigo !optional;
274+
}
255275
}
256276

257277
@include mx(indigo, focused, indeterminate) {
@@ -324,6 +344,21 @@
324344
@extend %cbx-ripple--focused !optional;
325345
@extend %cbx-ripple--focused-checked !optional;
326346
}
347+
348+
&:hover {
349+
@include e(ripple) {
350+
@extend %cbx-ripple--focused !optional;
351+
@extend %cbx-ripple--focused--hover-checked !optional;
352+
}
353+
}
354+
}
355+
356+
@include mx(focused, invalid, checked) {
357+
&:hover {
358+
@include e(ripple) {
359+
@extend %cbx-ripple--hover-invalid !optional;
360+
}
361+
}
327362
}
328363

329364
@include mx(focused, indeterminate) {

‎projects/igniteui-angular/src/lib/core/styles/components/checkbox/_checkbox-theme.scss‎

Lines changed: 21 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -122,7 +122,9 @@
122122
}
123123

124124
%cbx-composite--hover {
125-
border-color: var-get($theme, 'empty-color-hover');
125+
@if $variant == 'bootstrap' or $variant == 'indigo' {
126+
border-color: var-get($theme, 'empty-color-hover');
127+
}
126128
}
127129

128130
%cbx-composite--x {
@@ -175,6 +177,7 @@
175177
%cbx-composite--x--disabled {
176178
@if $variant == 'material' or $variant == 'fluent' {
177179
background: var-get($theme, 'disabled-color');
180+
border-color: var-get($theme, 'disabled-color');
178181
}
179182

180183
@if $variant == 'indigo' or $variant == 'bootstrap' {
@@ -262,7 +265,7 @@
262265
}
263266

264267
%igx-checkbox--disabled-indeterminate-indigo {
265-
@extend %igx-checkbox--indeterminate-indigo;
268+
@extend %cbx-composite--x--disabled;
266269

267270
%cbx-composite-mark {
268271
rect {
@@ -291,6 +294,14 @@
291294
z-index: 1;
292295
}
293296
}
297+
298+
&:hover {
299+
%cbx-composite {
300+
&::before {
301+
background: var-get($theme, 'fill-color-hover');
302+
}
303+
}
304+
}
294305
}
295306

296307
%igx-checkbox--disabled-indeterminate-fluent {
@@ -299,15 +310,15 @@
299310
}
300311

301312
%cbx-composite--x--disabled {
302-
background: transparent;
313+
border-color: var-get($theme, 'disabled-color');
303314

304315
&::before {
305316
background: var-get($theme, 'disabled-color');
306317
}
307318
}
308319
}
309320

310-
%igx-checkbox--disabled-indeterminate-material {
321+
%igx-checkbox--disabled-indeterminate {
311322
%cbx-composite--x--disabled {
312323
border-color: var-get($theme, 'disabled-indeterminate-color');
313324
background: var-get($theme, 'disabled-indeterminate-color');
@@ -458,11 +469,11 @@
458469
}
459470

460471
%cbx-ripple--hover-checked {
461-
background: var-get($theme, 'fill-color');
472+
background: var-get($theme, 'fill-color-hover');
462473
}
463474

464475
%cbx-ripple--hover-invalid {
465-
background: var-get($theme, 'error-color');
476+
background: var-get($theme, 'error-color-hover');
466477
}
467478

468479
%igx-checkbox--focused-indigo {
@@ -544,6 +555,10 @@
544555
background: var-get($theme, 'fill-color');
545556
}
546557

558+
%cbx-ripple--focused--hover-checked {
559+
background: var-get($theme, 'fill-color-hover');
560+
}
561+
547562
%cbx-ripple--focused-invalid {
548563
background: var-get($theme, 'error-color');
549564
}

0 commit comments

Comments
 (0)