Skip to content

Commit 50c1a3a

Browse files
gwyneplainegwyneplaine
committed
Checkbox consolidate se23 styles
1 parent 03ad430 commit 50c1a3a

File tree

2 files changed

+71
-135
lines changed

2 files changed

+71
-135
lines changed

‎polaris-react/src/components/Checkbox/Checkbox.scss‎

Lines changed: 70 additions & 130 deletions
Original file line numberDiff line numberDiff line change
@@ -6,37 +6,29 @@
66
}
77

88
.ChoiceLabel .Backdrop {
9-
#{$se23} & {
10-
border-width: 0;
11-
box-shadow: inset 0 0 0 var(--p-border-width-1-experimental)
12-
var(--p-color-border-input);
13-
transition: border-color var(--p-motion-duration-100)
14-
var(--p-motion-ease-out),
15-
border-width var(--p-motion-duration-100) var(--p-motion-ease-out),
16-
box-shadow var(--p-motion-duration-100) var(--p-motion-ease-out);
17-
18-
// This fixes artifacts caused by box-shadow in some browsers
19-
transform: translate3d(0, 0, 0);
20-
}
9+
border-width: 0;
10+
box-shadow: inset 0 0 0 var(--p-border-width-1-experimental)
11+
var(--p-color-border-input);
12+
transition: border-color var(--p-motion-duration-100) var(--p-motion-ease-out),
13+
border-width var(--p-motion-duration-100) var(--p-motion-ease-out),
14+
box-shadow var(--p-motion-duration-100) var(--p-motion-ease-out);
15+
16+
// This fixes artifacts caused by box-shadow in some browsers
17+
transform: translate3d(0, 0, 0);
2118
}
2219

2320
.ChoiceLabel:hover .Backdrop {
2421
border-color: var(--p-color-border-input-hover);
25-
26-
#{$se23} & {
27-
box-shadow: inset 0 0 0 var(--p-border-width-1-experimental)
28-
var(--p-color-border-input-hover);
29-
background-color: var(--p-color-bg-input-hover-experimental);
30-
}
22+
box-shadow: inset 0 0 0 var(--p-border-width-1-experimental)
23+
var(--p-color-border-input-hover);
24+
background-color: var(--p-color-bg-input-hover-experimental);
3125
}
3226

3327
.ChoiceLabel:active .Backdrop,
3428
.ChoiceLabel:checked .Backdrop {
35-
#{$se23} & {
36-
border-color: var(--p-color-bg-primary);
37-
border-width: 0;
38-
box-shadow: inset 0 0 0 var(--p-space-05) var(--p-color-bg-primary);
39-
}
29+
border-color: var(--p-color-bg-primary);
30+
border-width: 0;
31+
box-shadow: inset 0 0 0 var(--p-space-05) var(--p-color-bg-primary);
4032
}
4133

4234
// stylelint-disable selector-max-specificity, selector-max-class -- Much easier to read the rules when written like this
@@ -64,29 +56,18 @@
6456
+ .Backdrop {
6557
// stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY
6658
@include control-backdrop(active);
67-
68-
#{$se23} & {
69-
border-color: var(--p-color-bg-primary);
70-
background-color: var(--p-color-bg-primary);
71-
box-shadow: inset 0 0 0 var(--p-space-8) var(--p-color-bg-primary);
72-
}
59+
border-color: var(--p-color-bg-primary);
60+
background-color: var(--p-color-bg-primary);
61+
box-shadow: inset 0 0 0 var(--p-space-8) var(--p-color-bg-primary);
7362
}
7463

7564
~ .Icon {
76-
transition: opacity var(--p-motion-duration-150) var(--p-motion-ease),
77-
transform var(--p-motion-duration-150) var(--p-motion-ease);
78-
transform: translate3d(-50%, -50%, 0) scale(1);
65+
transition: opacity var(--p-motion-duration-150) var(--p-motion-ease-out),
66+
transform var(--p-motion-duration-150) var(--p-motion-ease-out);
7967
opacity: 1;
8068

81-
#{$se23} & {
82-
transition: opacity var(--p-motion-duration-150)
83-
var(--p-motion-ease-out),
84-
transform var(--p-motion-duration-150) var(--p-motion-ease-out);
85-
86-
// stylelint-disable-next-line selector-max-combinators, max-nesting-depth -- se23 override
87-
&.animated {
88-
transition: initial;
89-
}
69+
&.animated {
70+
transition: initial;
9071
}
9172
}
9273
}
@@ -95,39 +76,29 @@
9576
+ .Backdrop {
9677
// stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY
9778
@include control-backdrop(disabled);
98-
#{$se23} & {
99-
// We set the border-color to transparent here
100-
// in order for the background color to bleed all the way to the edge of the element.
101-
border-color: transparent;
102-
background-color: var(
103-
--p-color-bg-transparent-secondary-disabled-experimental
104-
);
105-
box-shadow: none;
106-
107-
// stylelint-disable-next-line max-nesting-depth, selector-max-combinators -- se23
108-
&::before {
109-
background-color: transparent;
110-
}
79+
// We set the border-color to transparent here
80+
// in order for the background color to bleed all the way to the edge of the element.
81+
border-color: transparent;
82+
background-color: var(
83+
--p-color-bg-transparent-secondary-disabled-experimental
84+
);
85+
box-shadow: none;
86+
87+
&::before {
88+
background-color: transparent;
11189
}
11290
}
11391
}
11492

11593
&:disabled:checked,
11694
&:disabled.Input-indeterminate {
11795
+ .Backdrop {
118-
background: var(--p-color-border-disabled);
96+
background-color: var(
97+
--p-color-bg-transparent-secondary-disabled-experimental
98+
);
11999

120100
&::before {
121-
background: var(--p-color-border-disabled);
122-
}
123-
#{$se23} & {
124-
background-color: var(
125-
--p-color-bg-transparent-secondary-disabled-experimental
126-
);
127-
// stylelint-disable-next-line max-nesting-depth, selector-max-combinators -- pse23 override
128-
&::before {
129-
background-color: transparent;
130-
}
101+
background-color: transparent;
131102
}
132103
}
133104
}
@@ -141,15 +112,10 @@
141112
display: block;
142113
width: 100%;
143114
height: 100%;
144-
// stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY
145-
@include focus-ring($border-width: var(--p-border-width-2));
146115

147-
#{$se23} & {
148-
/* stylelint-disable-next-line polaris/border/polaris/at-rule-disallowed-list -- se23 override */
149-
@include no-focus-ring;
150-
border: var(--p-border-width-1-experimental) solid
151-
var(--p-color-border-input);
152-
}
116+
// stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY
117+
@include no-focus-ring;
118+
border: var(--p-border-width-1-experimental) solid var(--p-color-border-input);
153119

154120
&:hover {
155121
border-color: var(--p-color-border-input-hover);
@@ -158,48 +124,34 @@
158124

159125
.Icon {
160126
position: absolute;
161-
top: 50%;
162-
left: 50%;
163127
transform-origin: 50% 50%;
164128
pointer-events: none;
165-
166-
transform: translate3d(-50%, -50%, 0) scale(0.25);
167129
opacity: 0;
168-
transition: opacity var(--p-motion-duration-100) var(--p-motion-ease),
169-
transform var(--p-motion-duration-100) var(--p-motion-ease);
170-
171-
#{$se23} & {
172-
top: calc(-1 * var(--p-space-05));
173-
left: calc(-1 * var(--p-space-05));
174-
bottom: calc(-1 * var(--p-space-05));
175-
right: calc(-1 * var(--p-space-05));
176-
/* stylelint-disable-next-line -- se23 override */
177-
transform: none !important;
178-
179-
transition: opacity var(--p-motion-duration-100) var(--p-motion-ease-out),
180-
transform var(--p-motion-duration-100) var(--p-motion-ease-out);
181-
182-
&.animated {
183-
top: 0;
184-
left: 0;
185-
bottom: 0;
186-
right: 0;
187-
margin: var(--p-space-05);
188-
transform: none;
189-
transition: initial;
190-
}
130+
transition: opacity var(--p-motion-duration-100) var(--p-motion-ease-out),
131+
transform var(--p-motion-duration-100) var(--p-motion-ease-out);
132+
133+
top: calc(-1 * var(--p-space-05));
134+
left: calc(-1 * var(--p-space-05));
135+
bottom: calc(-1 * var(--p-space-05));
136+
right: calc(-1 * var(--p-space-05));
137+
138+
&.animated {
139+
top: 0;
140+
left: 0;
141+
bottom: 0;
142+
right: 0;
143+
margin: var(--p-space-05);
144+
transition: initial;
191145
}
192146

193147
svg {
194148
fill: var(--p-color-icon-on-color);
195149

196-
#{$se23} & {
197-
position: absolute;
198-
top: 0;
199-
left: 0;
200-
bottom: 0;
201-
right: 0;
202-
}
150+
position: absolute;
151+
top: 0;
152+
left: 0;
153+
bottom: 0;
154+
right: 0;
203155
}
204156

205157
@media (-ms-high-contrast: active) {
@@ -217,53 +169,41 @@
217169
+ .Backdrop {
218170
// stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY
219171
@include control-backdrop(error);
220-
#{$se23} & {
221-
background-color: var(--p-color-bg-critical-subdued);
222-
box-shadow: inset 0 0 0 var(--p-border-width-1-experimental)
223-
var(--p-color-bg-critical-strong-active);
224-
}
172+
background-color: var(--p-color-bg-critical-subdued);
173+
box-shadow: inset 0 0 0 var(--p-border-width-1-experimental)
174+
var(--p-color-bg-critical-strong-active);
225175
}
226176
}
227177

228178
.Backdrop {
229179
&:active {
230-
#{$se23} & {
231-
box-shadow: inset 0 0 0 var(--p-space-05)
232-
var(--p-color-bg-critical-strong-active);
233-
}
180+
box-shadow: inset 0 0 0 var(--p-space-05)
181+
var(--p-color-bg-critical-strong-active);
234182
}
235183
}
236184

237185
.Input:checked,
238186
.Input.Input-indeterminate {
239187
+ .Backdrop {
240188
background-color: var(--p-color-border-critical);
241-
#{$se23} & {
242-
// stylelint-disable declaration-no-important -- se23
243-
box-shadow: inset 0 0 0 var(--p-space-3)
244-
var(--p-color-bg-critical-strong-active) !important;
245-
// stylelint-enable declaration-no-important
246-
}
189+
box-shadow: inset 0 0 0 var(--p-space-3)
190+
var(--p-color-bg-critical-strong-active);
247191
}
248192
}
249193

250194
.Input:active {
251195
+ .Backdrop {
252196
background-color: var(--p-color-border-critical);
253-
#{$se23} & {
254-
box-shadow: inset 0 0 0 var(--p-space-05)
255-
var(--p-color-bg-critical-strong-active);
256-
}
197+
box-shadow: inset 0 0 0 var(--p-space-05)
198+
var(--p-color-bg-critical-strong-active);
257199
}
258200
}
259201

260202
.Input:focus-visible + .Backdrop {
261203
&,
262204
.ChoiceLabel:hover & {
263-
#{$se23} & {
264-
border-color: var(--p-color-border-critical-strong-experimental);
265-
background-color: var(--p-color-bg-critical-subdued);
266-
}
205+
border-color: var(--p-color-border-critical-strong-experimental);
206+
background-color: var(--p-color-bg-critical-subdued);
267207
}
268208
}
269209
}

‎polaris-react/src/styles/shared/_controls.scss‎

Lines changed: 1 addition & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -14,7 +14,7 @@
1414
border-radius: var(--p-border-radius-1);
1515

1616
&::before {
17-
content: '';
17+
content: none;
1818
position: absolute;
1919
top: calc(-1 * var(--p-border-width-2));
2020
right: calc(-1 * var(--p-border-width-2));
@@ -26,10 +26,6 @@
2626
transform: scale(0.25);
2727
transition: opacity var(--p-motion-duration-100) var(--p-motion-ease),
2828
transform var(--p-motion-duration-100) var(--p-motion-ease);
29-
30-
#{$se23} & {
31-
content: none;
32-
}
3329
}
3430

3531
&.hover,

0 commit comments

Comments
 (0)