Skip to content

Commit b38bdcf

Browse files
SisIvanovaSisIvanova
committed
refactor(checkbox/radio): update invalid styles
1 parent 0d250df commit b38bdcf

File tree

13 files changed

+72
-107
lines changed

13 files changed

+72
-107
lines changed

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

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -8,8 +8,8 @@ $theme: $bootstrap;
88
@include css-vars-from-theme(diff(light.$base, $theme), 'ig-checkbox');
99
}
1010

11-
:host(:not([disabled])[invalid]),
12-
:host(:not(:disabled)[invalid]) {
11+
:host(:not([disabled]):state(ig-invalid)),
12+
:host(:not(:disabled):state(ig-invalid)) {
1313
[part~='indicator'] {
1414
stroke: black;
1515
}

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,7 @@ $theme: $fluent;
88
@include css-vars-from-theme(diff(light.$base, $theme), 'ig-checkbox');
99
}
1010

11-
:host([invalid]:hover) {
11+
:host(:state(ig-invalid):hover) {
1212
[part~='indicator'] {
1313
stroke: color('error', 500);
1414
}

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

Lines changed: 14 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -100,8 +100,8 @@ $theme: $bootstrap;
100100
}
101101
}
102102

103-
:host(:not([disabled])[invalid]),
104-
:host(:not(:disabled)[invalid]) {
103+
:host(:not([disabled]):state(ig-invalid)),
104+
:host(:not(:disabled):state(ig-invalid)) {
105105
[part~='control'] {
106106
&::after {
107107
box-shadow: inset 0 0 0 rem(1px) var-get($theme, 'error-color');
@@ -123,10 +123,10 @@ $theme: $bootstrap;
123123
}
124124
}
125125

126-
:host(:hover:not([disabled])[invalid]),
127-
:host(:hover:not(:disabled)[invalid]),
128-
:host(:hover:not([disabled])[invalid][indeterminate]),
129-
:host(:hover:not(:disabled)[invalid][indeterminate]) {
126+
:host(:hover:not([disabled]):state(ig-invalid)),
127+
:host(:hover:not(:disabled):state(ig-invalid)),
128+
:host(:hover:not([disabled]):state(ig-invalid)[indeterminate]),
129+
:host(:hover:not(:disabled):state(ig-invalid)[indeterminate]) {
130130
[part~='control'],
131131
[part='control checked'] {
132132
&::after {
@@ -141,28 +141,28 @@ $theme: $bootstrap;
141141
}
142142
}
143143

144-
:host(:not([disabled])[invalid][indeterminate]),
145-
:host(:not(:disabled)[invalid][indeterminate]) {
144+
:host(:not([disabled]):state(ig-invalid)[indeterminate]),
145+
:host(:not(:disabled):state(ig-invalid)[indeterminate]) {
146146
[part~='control'] {
147147
&::after {
148148
background: var-get($theme, 'error-color');
149149
}
150150
}
151151
}
152152

153-
:host(:hover:not([disabled])[invalid][indeterminate]),
154-
:host(:hover:not(:disabled)[invalid][indeterminate]) {
153+
:host(:hover:not([disabled]):state(ig-invalid)[indeterminate]),
154+
:host(:hover:not(:disabled):state(ig-invalid)[indeterminate]) {
155155
[part~='control'] {
156156
&::after {
157157
background: var-get($theme, 'error-color-hover');
158158
}
159159
}
160160
}
161161

162-
:host(:focus-visible:not([disabled])[invalid]) [part~='control'],
163-
:host(:focus-visible:not(:disabled)[invalid]) [part~='control'],
164-
:host(:not([disabled])[invalid]) [part~='focused'] [part~='control'],
165-
:host(:not(:disabled)[invalid]) [part~='focused'] [part~='control'] {
162+
:host(:focus-visible:not([disabled]):state(ig-invalid)) [part~='control'],
163+
:host(:focus-visible:not(:disabled):state(ig-invalid)) [part~='control'],
164+
:host(:not([disabled]):state(ig-invalid)) [part~='focused'] [part~='control'],
165+
:host(:not(:disabled):state(ig-invalid)) [part~='focused'] [part~='control'] {
166166
box-shadow: 0 0 0 rem(4px) var-get($theme, 'focus-outline-color-error');
167167
}
168168

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

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -17,8 +17,8 @@ $theme: $base;
1717
stroke: var-get($theme, 'tick-color');
1818
}
1919

20-
:host(:not([disabled])[invalid]),
21-
:host(:not(:disabled)[invalid]) {
20+
:host(:not([disabled]):state(ig-invalid)),
21+
:host(:not(:disabled):state(ig-invalid)) {
2222
[part~='label'] {
2323
color: var-get($theme, 'error-color');
2424
}

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

Lines changed: 7 additions & 44 deletions
Original file line numberDiff line numberDiff line change
@@ -107,7 +107,7 @@ $disabled-color: var-get($theme, 'disabled-color');
107107
}
108108
}
109109

110-
:host([invalid]:not([disabled])) {
110+
:host(:state(ig-invalid):not([disabled])) {
111111
[part~='control'] {
112112
&::after {
113113
box-shadow: inset 0 0 0 rem(1px) $invalid-color;
@@ -121,7 +121,7 @@ $disabled-color: var-get($theme, 'disabled-color');
121121
}
122122
}
123123

124-
:host([invalid]:focus-visible) {
124+
:host(:state(ig-invalid):focus-visible) {
125125
[part~='control'] {
126126
&::after {
127127
box-shadow: inset 0 0 0 rem(1px) $invalid-hover-color;
@@ -135,7 +135,7 @@ $disabled-color: var-get($theme, 'disabled-color');
135135
}
136136
}
137137

138-
:host([invalid]:hover) {
138+
:host(:state(ig-invalid):hover) {
139139
[part~='indicator'] {
140140
stroke: $invalid-color;
141141
}
@@ -157,8 +157,8 @@ $disabled-color: var-get($theme, 'disabled-color');
157157
}
158158
}
159159

160-
:host(:not([disabled])[invalid][indeterminate]),
161-
:host(:not(:disabled)[invalid][indeterminate]) {
160+
:host(:not([disabled]):state(ig-invalid)[indeterminate]),
161+
:host(:not(:disabled):state(ig-invalid)[indeterminate]) {
162162
[part~='control'] {
163163
&::before {
164164
background: $invalid-color;
@@ -184,8 +184,8 @@ $disabled-color: var-get($theme, 'disabled-color');
184184
}
185185
}
186186

187-
:host(:hover:not([disabled])[invalid][indeterminate]),
188-
:host(:hover:not(:disabled)[invalid][indeterminate]) {
187+
:host(:hover:not([disabled]):state(ig-invalid)[indeterminate]),
188+
:host(:hover:not(:disabled):state(ig-invalid)[indeterminate]) {
189189
[part~='control'] {
190190
&::before {
191191
background: $invalid-hover-color;
@@ -198,13 +198,6 @@ $disabled-color: var-get($theme, 'disabled-color');
198198
}
199199
}
200200

201-
:host([invalid][checked]) [part='control checked'] {
202-
&::after {
203-
box-shadow: inset 0 0 0 rem(1px) $invalid-color;
204-
background: $invalid-color;
205-
}
206-
}
207-
208201
[part~='focused'] {
209202
position: relative;
210203

@@ -250,33 +243,3 @@ $disabled-color: var-get($theme, 'disabled-color');
250243
}
251244
}
252245
}
253-
254-
:host([disabled][invalid]),
255-
:host(:disabled[invalid]) {
256-
[part~='control'] {
257-
&::after {
258-
box-shadow: inset 0 0 0 rem(1px) $disabled-color;
259-
}
260-
}
261-
262-
[part='control checked'] {
263-
&::after {
264-
background: $disabled-color;
265-
}
266-
}
267-
}
268-
269-
:host([disabled][invalid][indeterminate]),
270-
:host(:disabled[invalid][indeterminate]) {
271-
[part~='control'] {
272-
&::before {
273-
background: $disabled-color;
274-
}
275-
276-
&::after {
277-
box-shadow: inset 0 0 0 rem(1px) $disabled-color;
278-
background: transparent;
279-
}
280-
}
281-
}
282-

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

Lines changed: 24 additions & 28 deletions
Original file line numberDiff line numberDiff line change
@@ -125,8 +125,8 @@ $error-color-hover: var-get($theme, 'error-color-hover');
125125
}
126126
}
127127

128-
:host(:not([disabled])[invalid]),
129-
:host(:not(:disabled)[invalid]) {
128+
:host(:not([disabled]):state(ig-invalid)),
129+
:host(:not(:disabled):state(ig-invalid)) {
130130
[part~='label'] {
131131
color: var-get($theme, 'label-color');
132132
}
@@ -145,23 +145,36 @@ $error-color-hover: var-get($theme, 'error-color-hover');
145145
background: $error-color;
146146
}
147147
}
148+
149+
[part='base focused'] {
150+
[part~='control'],
151+
[part='control checked'] {
152+
box-shadow: 0 0 0 rem(3px) var-get($theme, 'focus-outline-color-error');
153+
}
154+
}
148155
}
149156

150-
:host(:not([disabled])[invalid][indeterminate]),
151-
:host(:not(:disabled)[invalid][indeterminate]) {
157+
:host(:not([disabled]):state(ig-invalid)[indeterminate]),
158+
:host(:not(:disabled):state(ig-invalid)[indeterminate]) {
152159
[part~='control'] {
153160
border-color: $error-color;
154161

155162
&::after {
156163
background: $error-color;
157164
}
158165
}
166+
167+
[part='base focused'] {
168+
[part~='control'] {
169+
box-shadow: 0 0 0 rem(3px) var-get($theme, 'focus-outline-color-error');
170+
}
171+
}
159172
}
160173

161-
:host(:hover:not([disabled])[invalid]),
162-
:host(:hover:not(:disabled)[invalid]),
163-
:host(:hover:not([disabled])[invalid][indeterminate]),
164-
:host(:hover:not(:disabled)[invalid][indeterminate]) {
174+
:host(:hover:not([disabled]):state(ig-invalid)),
175+
:host(:hover:not(:disabled):state(ig-invalid)),
176+
:host(:hover:not([disabled]):state(ig-invalid)[indeterminate]),
177+
:host(:hover:not(:disabled):state(ig-invalid)[indeterminate]) {
165178
[part~='label'] {
166179
color: var-get($theme, 'label-color-hover');
167180
}
@@ -180,34 +193,17 @@ $error-color-hover: var-get($theme, 'error-color-hover');
180193
}
181194
}
182195

183-
:host(:hover:not([disabled])[invalid][indeterminate]),
184-
:host(:hover:not(:disabled)[invalid][indeterminate]) {
196+
:host(:hover:not([disabled]):state(ig-invalid)[indeterminate]),
197+
:host(:hover:not(:disabled):state(ig-invalid)[indeterminate]) {
185198
[part~='control'] {
186199
&::after {
187200
background: $error-color-hover;
188201
}
189202
}
190203
}
191204

192-
:host(:focus-visible:not([disabled])[invalid]),
193-
:host(:focus-visible:not(:disabled)[invalid]) {
194-
[part~='control'],
195-
[part='control checked'] {
196-
box-shadow: 0 0 0 rem(3px) var-get($theme, 'focus-outline-color-error');
197-
}
198-
}
199-
200-
:host(:focus-visible:not([disabled])[invalid][indeterminate]),
201-
:host(:focus-visible:not(:disabled)[invalid][indeterminate]) {
202-
[part~='control'] {
203-
box-shadow: 0 0 0 rem(3px) var-get($theme, 'focus-outline-color-error');
204-
}
205-
}
206-
207205
:host([disabled]),
208-
:host(:disabled),
209-
:host([disabled][invalid]),
210-
:host(:disabled[invalid]) {
206+
:host(:disabled) {
211207
[part~='control'] {
212208
&::after {
213209
border-color: $disabled-color;

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

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -108,8 +108,8 @@ $theme: $material;
108108
}
109109
}
110110

111-
:host(:not([disabled])[invalid]),
112-
:host(:not(:disabled)[invalid]) {
111+
:host(:not([disabled]):state(ig-invalid)),
112+
:host(:not(:disabled):state(ig-invalid)) {
113113
[part~='control'] {
114114
&::after {
115115
border-color: var-get($theme, 'error-color');
@@ -135,8 +135,8 @@ $theme: $material;
135135
}
136136
}
137137

138-
:host(:not([disabled])[invalid][indeterminate]),
139-
:host(:not(:disabled)[invalid][indeterminate]) {
138+
:host(:not([disabled]):state(ig-invalid)[indeterminate]),
139+
:host(:not(:disabled):state(ig-invalid)[indeterminate]) {
140140
[part~='control'] {
141141
&::after {
142142
border-color: var-get($theme, 'error-color');

‎src/components/radio/themes/dark/radio.fluent.scss‎

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -8,15 +8,17 @@ $theme: $fluent;
88
@include css-vars-from-theme(diff(light.$base, $theme), 'ig-radio');
99
}
1010

11-
:host(:not([disabled])[invalid]:hover) {
11+
:host(:not([disabled]):state(ig-invalid):hover),
12+
:host(:not(:disabled):state(ig-invalid):hover) {
1213
[part='control'] {
1314
&::before {
1415
background: color(error, 500);
1516
}
1617
}
1718
}
1819

19-
:host(:not([disabled])[invalid]) {
20+
:host(:not([disabled]):state(ig-invalid)),
21+
:host(:not(:disabled):state(ig-invalid)) {
2022
[part='focused'] [part='control'] {
2123
&::before {
2224
background: color(error, 500);

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

Lines changed: 4 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -95,8 +95,8 @@ $theme: $bootstrap;
9595
}
9696
}
9797

98-
:host(:not([disabled])[invalid]),
99-
:host(:not(:disabled)[invalid]) {
98+
:host(:not([disabled]):state(ig-invalid)),
99+
:host(:not(:disabled):state(ig-invalid)) {
100100
[part~='control']::after {
101101
border-color: var-get($theme, 'error-color');
102102
}
@@ -112,7 +112,8 @@ $theme: $bootstrap;
112112
}
113113
}
114114

115-
:host(:not([disabled])[invalid]:hover) {
115+
:host(:not([disabled]):state(ig-invalid):hover),
116+
:host(:not(:disabled):state(ig-invalid):hover) {
116117
[part~='control']::after {
117118
border-color: var-get($theme, 'error-color-hover');
118119
}

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

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -14,8 +14,8 @@ $theme: $base;
1414
}
1515
}
1616

17-
:host(:not([disabled])[invalid]),
18-
:host(:not(:disabled)[invalid]) {
17+
:host(:not([disabled]):state(ig-invalid)),
18+
:host(:not(:disabled):state(ig-invalid)) {
1919
[part~='label'] {
2020
color: var-get($theme, 'error-color');
2121
}

0 commit comments

Comments
 (0)