Skip to content

Commit 08f89b4

Browse files
didimmovaSisIvanovarkaraivanov
authored
fix(checkbox): fix checkbox theming issues (#1909)
--------- Co-authored-by: Silvia Ivanova <[email protected]> Co-authored-by: Radoslav Karaivanov <[email protected]>
1 parent b154374 commit 08f89b4

File tree

5 files changed

+95
-38
lines changed

5 files changed

+95
-38
lines changed

‎src/components/checkbox/themes/shared/checkbox/checkbox.bootstrap.scss‎

Lines changed: 1 addition & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -53,14 +53,9 @@ $theme: $bootstrap;
5353
}
5454

5555
:host(:hover) {
56-
[part~='control']::after {
56+
[part='control']::after {
5757
box-shadow: inset 0 0 0 rem(1px) var-get($theme, 'empty-color-hover');
5858
}
59-
60-
[part='control checked']::after {
61-
background: var-get($theme, 'fill-color-hover');
62-
box-shadow: inset 0 0 0 rem(1px) var-get($theme, 'fill-color-hover');
63-
}
6459
}
6560

6661
:host(:focus-visible) ,

‎src/components/checkbox/themes/shared/checkbox/checkbox.common.scss‎

Lines changed: 13 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,26 @@
11
@use 'styles/utilities' as *;
22
@use '../../light/checkbox/themes' as *;
33

4-
$theme: $base;
4+
$theme: $material;
55

66
[part~='label'] {
77
@include type-style('body-2');
88

99
color: var-get($theme, 'label-color');
1010
}
1111

12+
:host(:not([disabled], :state(ig-invalid)):hover),
13+
:host(:not([disabled], :state(ig-invalid))[indeterminate]:hover) {
14+
[part~='label'] {
15+
color: var-get($theme, 'label-color-hover');
16+
}
17+
18+
[part='control checked']::after {
19+
background: var-get($theme, 'fill-color-hover');
20+
box-shadow: inset 0 0 0 rem(1px) var-get($theme, 'fill-color-hover');
21+
}
22+
}
23+
1224
[part~='control'] {
1325
background: var-get($theme, 'empty-fill-color');
1426
}

‎src/components/checkbox/themes/shared/checkbox/checkbox.fluent.scss‎

Lines changed: 6 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -55,13 +55,6 @@ $disabled-color: var-get($theme, 'disabled-color');
5555
}
5656
}
5757

58-
:host(:hover) [part='control checked'] {
59-
&::after {
60-
background: $checked-hover-color;
61-
box-shadow: inset 0 0 0 rem(1px) $checked-hover-color;
62-
}
63-
}
64-
6558
:host([indeterminate]) {
6659
[part~='indicator'] {
6760
display: none;
@@ -198,6 +191,12 @@ $disabled-color: var-get($theme, 'disabled-color');
198191
}
199192
}
200193

194+
:host(:not([disabled], :state(ig-invalid))[indeterminate]:hover) {
195+
[part='control checked']::after {
196+
background: transparent;
197+
}
198+
}
199+
201200
[part~='focused'] {
202201
position: relative;
203202

‎src/components/checkbox/themes/shared/checkbox/checkbox.indigo.scss‎

Lines changed: 8 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -58,21 +58,14 @@ $error-color-hover: var-get($theme, 'error-color-hover');
5858
}
5959

6060
:host(:hover) {
61-
[part~='label'] {
62-
color: var-get($theme, 'label-color-hover');
63-
}
64-
65-
[part~='control'] {
61+
[part='control'] {
6662
&::after {
6763
border-color: var-get($theme, 'empty-color-hover');
6864
}
6965
}
7066

71-
[part='control checked'] {
72-
&::after {
73-
background: $fill-color-hover;
74-
border-color: $fill-color-hover;
75-
}
67+
[part='control checked']::after {
68+
border-color: var-get($theme, 'fill-color-hover');
7669
}
7770
}
7871

@@ -119,7 +112,8 @@ $error-color-hover: var-get($theme, 'error-color-hover');
119112
}
120113
}
121114

122-
:host([indeterminate]:focus-visible) {
115+
:host([indeterminate]:focus-visible),
116+
:host([indeterminate]) [part='base focused'] {
123117
[part~='control'] {
124118
box-shadow: 0 0 0 rem(3px) var-get($theme, 'focus-outline-color-focused');
125119
}
@@ -146,7 +140,9 @@ $error-color-hover: var-get($theme, 'error-color-hover');
146140
}
147141
}
148142

149-
[part='base focused'] {
143+
[part='base focused'],
144+
&:focus-visible,
145+
[part='base checked focused'] {
150146
[part~='control'],
151147
[part='control checked'] {
152148
box-shadow: 0 0 0 rem(3px) var-get($theme, 'focus-outline-color-error');

‎src/components/checkbox/themes/shared/checkbox/checkbox.material.scss‎

Lines changed: 67 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -12,6 +12,13 @@ $theme: $material;
1212
}
1313
}
1414

15+
:host(:not([disabled], :state(ig-invalid)):hover),
16+
:host(:not([disabled], :state(ig-invalid))[indeterminate]:hover) {
17+
[part='control checked']::after {
18+
border-color: var-get($theme, 'fill-color-hover');
19+
}
20+
}
21+
1522
[part~='label'] {
1623
@include type-style('subtitle-1');
1724
}
@@ -62,7 +69,7 @@ $theme: $material;
6269
&:hover {
6370
[part~='control'] {
6471
&::before {
65-
background: var-get($theme, 'fill-color');
72+
background: var-get($theme, 'fill-color-hover');
6673
opacity: .06;
6774
}
6875
}
@@ -89,6 +96,12 @@ $theme: $material;
8996
opacity: .12;
9097
}
9198
}
99+
100+
&:hover [part~='control'] {
101+
&::before {
102+
background: var-get($theme, 'fill-color-hover');
103+
}
104+
}
92105
}
93106

94107
:host([indeterminate]) {
@@ -99,7 +112,6 @@ $theme: $material;
99112
}
100113
}
101114

102-
[part='base']:hover,
103115
[part='base']:focus-visible,
104116
[part='base focused'] {
105117
[part~='control']::before {
@@ -108,6 +120,17 @@ $theme: $material;
108120
}
109121
}
110122

123+
:host(:not([disabled], :state(ig-invalid))[indeterminate]:hover) {
124+
[part~='control']::after {
125+
background: var-get($theme, 'fill-color-hover');
126+
border-color: var-get($theme, 'fill-color-hover');
127+
}
128+
129+
[part~='control']::before {
130+
background: var-get($theme, 'fill-color-hover');
131+
}
132+
}
133+
111134
:host(:not([disabled]):state(ig-invalid)),
112135
:host(:not(:disabled):state(ig-invalid)) {
113136
[part~='control'] {
@@ -122,17 +145,52 @@ $theme: $material;
122145
}
123146
}
124147

125-
[part~='base']:hover {
148+
[part='base focused'] {
126149
[part~='control']::before {
127150
background: var-get($theme, 'error-color');
128151
}
129152
}
130153

131-
[part='base focused'] {
154+
[part='base checked']:focus-visible,
155+
[part='base checked focused'] {
132156
[part~='control']::before {
157+
background: var-get($theme, 'error-color');
158+
opacity: .12;
159+
}
160+
}
161+
}
162+
163+
:host(:not([disabled]):state(ig-invalid):hover),
164+
:host(:not(:disabled):state(ig-invalid):hover),
165+
:host(:not([disabled]):state(ig-invalid)[indeterminate]:hover),
166+
:host(:not(:disabled):state(ig-invalid)[indeterminate]:hover) {
167+
[part~='control'] {
168+
&::after {
169+
border-color: var-get($theme, 'error-color-hover');
170+
}
171+
}
172+
173+
[part='control checked'] {
174+
&::after {
133175
background: var-get($theme, 'error-color-hover');
134176
}
135177
}
178+
179+
[part~='control']::before {
180+
background: var-get($theme, 'error-color-hover');
181+
}
182+
183+
[part='base checked']:focus-visible,
184+
[part='base checked focused'] {
185+
[part~='control'] {
186+
&::before {
187+
background: var-get($theme, 'error-color-hover');
188+
}
189+
190+
&::after {
191+
border-color: var-get($theme, 'error-color-hover');}
192+
}
193+
}
136194
}
137195

138196
:host(:not([disabled]):state(ig-invalid)[indeterminate]),
@@ -145,14 +203,11 @@ $theme: $material;
145203
}
146204

147205
[part~='base']:hover {
148-
[part~='control']::before {
149-
background: var-get($theme, 'error-color-hover');
150-
}
151-
}
152-
153-
[part='base focused'] {
154-
[part~='control']::before {
155-
background: var-get($theme, 'error-color-hover');
206+
[part~='control'] {
207+
&::after {
208+
border-color: var-get($theme, 'error-color-hover');
209+
background: var-get($theme, 'error-color-hover');
210+
}
156211
}
157212
}
158213
}

0 commit comments

Comments
 (0)