Skip to content

Commit 053d32f

Browse files
stephl3stephl3
authored
fix: pseudo-element selectors (#2976)
1 parent b5ec55d commit 053d32f

File tree

28 files changed

+127
-127
lines changed

28 files changed

+127
-127
lines changed

‎charts/legend/src/LegendCheckbox/LegendCheckbox.styles.ts

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -31,7 +31,7 @@ const getBaseLegendCheckboxStyles = ({
3131
.${checkWrapperClassName} {
3232
border-color: ${checkboxColor || defaultCheckboxColor};
3333
34-
&:before {
34+
&::before {
3535
background-color: ${checkboxColor || defaultCheckboxColor};
3636
}
3737
}

‎chat/input-bar/src/InputBar/InputBar.styles.ts

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -157,8 +157,8 @@ const gradientWidth = 3;
157157
const gradientOffset = 1;
158158

159159
export const gradientAnimationStyles = css`
160-
&:before,
161-
&:after {
160+
&::before,
161+
&::after {
162162
content: '';
163163
position: absolute;
164164
top: -${gradientWidth + gradientOffset}px;
@@ -171,11 +171,11 @@ export const gradientAnimationStyles = css`
171171
background-position: 800% 800%; // set final state of animation
172172
}
173173
174-
&:after {
174+
&::after {
175175
animation: 4s animateBg linear;
176176
}
177177
178-
&:before {
178+
&::before {
179179
filter: blur(4px) opacity(0.6);
180180
animation: 4s animateBg, animateShadow linear infinite;
181181
opacity: 0;

‎chat/message/src/Message/Message.styles.ts

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -56,7 +56,7 @@ export const messageContainerWrapperStyles = css`
5656

5757
const sharedMessageContainerWedgeStyles = css`
5858
// Left wedge
59-
&:before {
59+
&::before {
6060
content: '';
6161
position: absolute;
6262
left: 0;
@@ -70,13 +70,13 @@ const sharedMessageContainerWedgeStyles = css`
7070
export const messageContainerWedgeStyles = {
7171
[Theme.Dark]: css`
7272
${sharedMessageContainerWedgeStyles}
73-
&:before {
73+
&::before {
7474
background-color: ${palette.green.base};
7575
}
7676
`,
7777
[Theme.Light]: css`
7878
${sharedMessageContainerWedgeStyles}
79-
&:before {
79+
&::before {
8080
background-color: ${palette.green.dark2};
8181
}
8282
`,

‎chat/message/src/MessageBanner/MessageBanner.styles.ts

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@ import { spacing } from '@leafygreen-ui/tokens';
66
*/
77
export const baseStyles = css`
88
// Remove the Banner's left border wedge
9-
&:before {
9+
&::before {
1010
content: '';
1111
background: transparent;
1212
}

‎packages/banner/src/Banner/styles.ts

Lines changed: 9 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -15,7 +15,7 @@ export const baseBannerStyles = css`
1515
border-radius: 12px;
1616
font-family: ${fontFamilies.default};
1717
18-
&:before {
18+
&::before {
1919
content: '';
2020
position: absolute;
2121
width: 13px;
@@ -44,7 +44,7 @@ const darkModeInfoBannerStyles = css`
4444
}
4545
}
4646
47-
&:before {
47+
&::before {
4848
background: linear-gradient(
4949
to left,
5050
transparent 6px,
@@ -71,7 +71,7 @@ const darkModeWarningBannerStyles = css`
7171
}
7272
}
7373
74-
&:before {
74+
&::before {
7575
background: linear-gradient(
7676
to left,
7777
transparent 6px,
@@ -98,7 +98,7 @@ const darkModeDangerBannerStyles = css`
9898
}
9999
}
100100
101-
&:before {
101+
&::before {
102102
background: linear-gradient(
103103
to left,
104104
transparent 6px,
@@ -125,7 +125,7 @@ const darkModeSuccessBannerStyles = css`
125125
}
126126
}
127127
128-
&:before {
128+
&::before {
129129
background: linear-gradient(
130130
to left,
131131
transparent 6px,
@@ -152,7 +152,7 @@ const lightModeInfoBannerStyles = css`
152152
}
153153
}
154154
155-
&:before {
155+
&::before {
156156
background: linear-gradient(
157157
to left,
158158
transparent 6px,
@@ -179,7 +179,7 @@ const lightModeWarningBannerStyles = css`
179179
}
180180
}
181181
182-
&:before {
182+
&::before {
183183
background: linear-gradient(
184184
to left,
185185
transparent 6px,
@@ -206,7 +206,7 @@ const lightModeDangerBannerStyles = css`
206206
}
207207
}
208208
209-
&:before {
209+
&::before {
210210
background: linear-gradient(
211211
to left,
212212
transparent 6px,
@@ -233,7 +233,7 @@ const lightModeSuccessBannerStyles = css`
233233
}
234234
}
235235
236-
&:before {
236+
&::before {
237237
background: linear-gradient(
238238
to left,
239239
transparent 6px,

‎packages/banner/src/BannerDismissButton/styles.ts

Lines changed: 8 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -24,7 +24,7 @@ const darkModeInfoStyles = css`
2424
box-shadow: 0 0 0 2px ${palette.blue.dark3},
2525
0 0 0 4px ${palette.blue.light1};
2626
27-
&:before {
27+
&::before {
2828
background-color: ${palette.blue.dark2};
2929
}
3030
}
@@ -39,7 +39,7 @@ const darkModeWarningStyles = css`
3939
box-shadow: 0 0 0 2px ${palette.yellow.dark3},
4040
0 0 0 4px ${palette.blue.light1};
4141
42-
&:before {
42+
&::before {
4343
background-color: ${palette.yellow.dark2};
4444
}
4545
}
@@ -54,7 +54,7 @@ const darkModeDangerStyles = css`
5454
color: ${palette.red.light2};
5555
box-shadow: 0 0 0 2px ${palette.red.dark3}, 0 0 0 4px ${palette.blue.light1};
5656
57-
&:before {
57+
&::before {
5858
background-color: ${palette.red.dark2};
5959
}
6060
}
@@ -70,7 +70,7 @@ const darkModeSuccessStyles = css`
7070
box-shadow: 0 0 0 2px ${palette.green.dark3},
7171
0 0 0 4px ${palette.blue.light1};
7272
73-
&:before {
73+
&::before {
7474
background-color: ${palette.green.dark2};
7575
}
7676
}
@@ -84,7 +84,7 @@ const lightModeInfoStyles = css`
8484
&:focus-visible {
8585
color: ${palette.blue.dark2};
8686
87-
&:before {
87+
&::before {
8888
background-color: ${palette.blue.light2};
8989
}
9090
}
@@ -98,7 +98,7 @@ const lightModeWarningStyles = css`
9898
&:focus-visible {
9999
color: ${palette.yellow.dark2};
100100
101-
&:before {
101+
&::before {
102102
background-color: ${palette.yellow.light2};
103103
}
104104
}
@@ -112,7 +112,7 @@ const lightModeDangerStyles = css`
112112
&:focus-visible {
113113
color: ${palette.red.dark2};
114114
115-
&:before {
115+
&::before {
116116
background-color: ${palette.red.light2};
117117
}
118118
}
@@ -126,7 +126,7 @@ const lightModeSuccessStyles = css`
126126
&:focus-visible {
127127
color: ${palette.green.dark2};
128128
129-
&:before {
129+
&::before {
130130
background-color: ${palette.green.light2};
131131
}
132132
}

‎packages/callout/src/Callout/Callout.styles.ts

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -77,7 +77,7 @@ export const getBaseStyles = (theme: Theme, variant: Variant) =>
7777
padding-inline-start: ${spacing[300]}px;
7878
position: relative;
7979
80-
&:after {
80+
&::after {
8181
content: '';
8282
position: absolute;
8383
width: 3px;

‎packages/checkbox/src/Check/Check.style.ts

Lines changed: 9 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -18,7 +18,7 @@ export const checkBorderSizePx = 2;
1818

1919
export const disableAnimation = css`
2020
&,
21-
&:before {
21+
&::before {
2222
transition: unset;
2323
transition-delay: 0ms;
2424
transition-duration: 0ms;
@@ -47,7 +47,7 @@ export const wrapperBaseStyle = css`
4747
/**
4848
* The animated background circle
4949
*/
50-
&:before {
50+
&::before {
5151
content: '';
5252
position: absolute;
5353
inset: ${insetPct}%;
@@ -64,14 +64,14 @@ export const wrapperThemeStyle: Record<Theme, string> = {
6464
[Theme.Light]: css`
6565
border-color: ${palette.gray.dark2};
6666
67-
&:before {
67+
&::before {
6868
background-color: ${palette.blue.base};
6969
}
7070
`,
7171
[Theme.Dark]: css`
7272
border-color: ${palette.gray.base};
7373
74-
&:before {
74+
&::before {
7575
background-color: ${palette.blue.light1};
7676
}
7777
`,
@@ -81,7 +81,7 @@ export const wrapperCheckedBaseStyle = css`
8181
// Delay background transition in
8282
transition-delay: 0ms, ${checkAnimationDuration}ms, 0ms;
8383
84-
&:before {
84+
&::before {
8585
transform: scale(1);
8686
// No delay on enter
8787
transition-delay: 0ms;
@@ -105,7 +105,7 @@ export const wrapperDisabledStyle: Record<Theme, string> = {
105105
background-color: ${palette.gray.light3};
106106
box-shadow: unset;
107107
108-
&:before {
108+
&::before {
109109
background-color: ${palette.gray.light3};
110110
}
111111
`,
@@ -115,7 +115,7 @@ export const wrapperDisabledStyle: Record<Theme, string> = {
115115
background-color: ${palette.gray.dark3};
116116
box-shadow: unset;
117117
118-
&:before {
118+
&::before {
119119
background-color: ${palette.gray.dark3};
120120
}
121121
`,
@@ -125,14 +125,14 @@ export const wrapperCheckedDisabledStyle: Record<Theme, string> = {
125125
[Theme.Light]: css`
126126
background-color: ${palette.gray.light2};
127127
128-
&:before {
128+
&::before {
129129
background-color: ${palette.gray.light2};
130130
}
131131
`,
132132
[Theme.Dark]: css`
133133
background-color: ${palette.gray.dark2};
134134
135-
&:before {
135+
&::before {
136136
background-color: ${palette.gray.dark2};
137137
}
138138
`,

‎packages/code/src/Code/Code.styles.ts

Lines changed: 9 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -156,7 +156,7 @@ export const codeWithoutPanelStyles = css`
156156
// No panel, all code
157157
grid-template-areas: 'code code';
158158
159-
&:after {
159+
&::after {
160160
grid-column: -1; // Placed on the right edge
161161
}
162162
`;
@@ -167,8 +167,8 @@ export const codeWithPanelStyles = css`
167167
'code';
168168
grid-template-columns: unset;
169169
170-
&:before,
171-
&:after {
170+
&::before,
171+
&::after {
172172
grid-row: 2; // Placed on the top under the Picker Panel
173173
}
174174
`;
@@ -307,8 +307,8 @@ export function getExpandButtonUtilsVariantStyle(theme: Theme): string {
307307
}
308308

309309
export const baseScrollShadowStyles = css`
310-
&:before,
311-
&:after {
310+
&::before,
311+
&::after {
312312
content: '';
313313
display: block;
314314
position: absolute;
@@ -320,11 +320,11 @@ export const baseScrollShadowStyles = css`
320320
box-shadow: unset;
321321
transition: box-shadow ${transitionDuration.faster}ms ease-in-out;
322322
}
323-
&:before {
323+
&::before {
324324
grid-column: 1;
325325
left: -40px;
326326
}
327-
&:after {
327+
&::after {
328328
grid-column: 2; // Placed either under Panel, or on the right edge
329329
}
330330
`;
@@ -344,14 +344,14 @@ export function getScrollShadow(
344344
: `-15px 0px 15px 0 ${transparentize(0.7, 'black')}`;
345345

346346
return css`
347-
&:before {
347+
&::before {
348348
${(scrollState === ScrollState.Both ||
349349
scrollState === ScrollState.Left) &&
350350
css`
351351
box-shadow: ${dropShadowBefore};
352352
`};
353353
}
354-
&:after {
354+
&::after {
355355
${(scrollState === ScrollState.Both ||
356356
scrollState === ScrollState.Right) &&
357357
`

‎packages/code/src/CopyButton/CopyButton.styles.ts

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -56,7 +56,7 @@ export const copiedThemeStyle: Record<Theme, string> = {
5656
&:focus,
5757
&:hover {
5858
background-color: ${palette.green.dark1};
59-
&:before {
59+
&::before {
6060
background-color: ${palette.green.dark1};
6161
}
6262
}
@@ -78,7 +78,7 @@ export const copiedThemeStyle: Record<Theme, string> = {
7878
&:hover {
7979
background-color: ${palette.green.base};
8080
81-
&:before {
81+
&::before {
8282
background-color: ${palette.green.base};
8383
}
8484
}

0 commit comments

Comments
 (0)