Skip to content

Commit a41a580

Browse files
EugeniyKiyashkoEugeniyKiyashko
authored
Stepper: remove the use of the :before pseudo-element for indicator styles (DevExpress#29431)
1 parent 545bdcc commit a41a580

File tree

2 files changed

+29
-64
lines changed

2 files changed

+29
-64
lines changed

‎packages/devextreme-scss/scss/widgets/base/stepper/layout/step/_index.scss‎

Lines changed: 2 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -29,26 +29,14 @@
2929
transition-property: color, background-color, border-color;
3030
transition-duration: .4s;
3131
transition-timing-function: ease-in-out;
32+
border-style: solid;
33+
border-radius: 999em;
3234
}
3335

3436
.dx-step-content {
3537
display: flex;
3638
align-items: center;
3739
flex-direction: column;
38-
39-
&::before {
40-
content: '';
41-
position: absolute;
42-
border-width: 1px;
43-
border-style: solid;
44-
border-radius: 999em;
45-
display: flex;
46-
align-items: center;
47-
justify-content: center;
48-
transition-property: color, background-color, border-color;
49-
transition-duration: .4s;
50-
transition-timing-function: ease-in-out;
51-
}
5240
}
5341

5442
.dx-step-label {

‎packages/devextreme-scss/scss/widgets/base/stepper/layout/step/_mixins.scss‎

Lines changed: 27 additions & 50 deletions
Original file line numberDiff line numberDiff line change
@@ -22,11 +22,6 @@
2222
row-gap: $content-row-gap;
2323
column-gap: $content-column-gap;
2424

25-
&::before {
26-
width: $width;
27-
height: $height;
28-
}
29-
3025
.dx-step-optional-mark {
3126
font-size: $stepper-step-optional-mark-font-size;
3227
}
@@ -54,32 +49,29 @@
5449
$disabled-color,
5550
$disabled-bg,
5651
) {
57-
.dx-step-content::before {
52+
.dx-step-indicator {
5853
background-color: $background-color;
5954
border-color: $border-color;
6055
box-shadow: 0 0 0 8px $background-color;
6156
}
6257

6358
.dx-step {
6459
&.dx-state-hover {
65-
.dx-step-content::before {
60+
.dx-step-indicator {
6661
border-color: $border-color-hover;
6762
background-color: $background-color-hover;
6863
}
6964

7065
&.dx-step-completed,
7166
&.dx-step-selected {
72-
.dx-step-content::before {
67+
.dx-step-indicator {
7368
border-color: $border-color-focused;
7469
background-color: $background-color-selected-hover;
7570
}
7671

7772
&.dx-step-invalid {
7873
.dx-step-indicator {
7974
color: $color-selected;
80-
}
81-
82-
.dx-step-content::before {
8375
border-color: $invalid-color-hover;
8476
background-color: $invalid-color-hover;
8577
}
@@ -98,7 +90,7 @@
9890
}
9991

10092
&.dx-state-active {
101-
.dx-step-content::before {
93+
.dx-step-indicator {
10294
background-color: $background-color-hover;
10395
}
10496
}
@@ -116,31 +108,28 @@
116108
&.dx-step-completed {
117109
.dx-step-indicator {
118110
color: $color-selected;
111+
border-color: $border-color-selected;
112+
background-color: $background-color-selected;
113+
box-shadow: 0 0 0 8px $background-color;
119114
}
120115

121116
.dx-step-label {
122117
color: $background-color-selected;
123118
}
124119

125-
.dx-step-content::before {
126-
border-color: $border-color-selected;
127-
background-color: $background-color-selected;
128-
box-shadow: 0 0 0 8px $background-color;
129-
}
130-
131120
&.dx-step-invalid {
132121
.dx-step-label {
133122
color: $invalid-color;
134123
}
135124

136-
.dx-step-content::before {
125+
.dx-step-indicator {
137126
border-color: $invalid-color;
138127
background-color: $invalid-color;
139128
box-shadow: 0 0 0 8px $background-color;
140129
}
141130

142131
&.dx-state-focused {
143-
.dx-step-content::before {
132+
.dx-step-indicator {
144133
border-color: $invalid-color-hover;
145134
background-color: $invalid-color-hover;
146135
}
@@ -150,19 +139,16 @@
150139
&.dx-state-disabled {
151140
.dx-step-indicator {
152141
color: $disabled-color;
142+
border-color: $disabled-bg;
143+
background-color: $disabled-bg;
153144
}
154145

155146
.dx-step-label {
156147
color: $disabled-color;
157148
}
158149

159-
.dx-step-content::before {
160-
border-color: $disabled-bg;
161-
background-color: $disabled-bg;
162-
}
163-
164150
&.dx-state-focused {
165-
.dx-step-content::before {
151+
.dx-step-indicator {
166152
border-color: $disabled-bg;
167153
background-color: $disabled-bg;
168154
}
@@ -173,24 +159,21 @@
173159
&.dx-step-selected {
174160
.dx-step-indicator {
175161
color: $color-selected;
162+
border-color: $border-color-selected;
163+
background-color: $background-color-selected;
164+
box-shadow: 0 0 0 2px $background-color, 0 0 0 4px $border-color-selected, 0 0 0 8px $background-color;
176165
}
177166

178167
.dx-step-label {
179168
color: $background-color-selected;
180169
}
181170

182-
.dx-step-content::before {
183-
border-color: $border-color-selected;
184-
background-color: $background-color-selected;
185-
box-shadow: 0 0 0 2px $background-color, 0 0 0 4px $border-color-selected, 0 0 0 8px $background-color;
186-
}
187-
188171
&.dx-step-invalid {
189172
.dx-step-label {
190173
color: $invalid-color;
191174
}
192175

193-
.dx-step-content::before {
176+
.dx-step-indicator {
194177
border-color: $invalid-color;
195178
background-color: $invalid-color;
196179
box-shadow: 0 0 0 2px $background-color, 0 0 0 4px $invalid-color, 0 0 0 8px $background-color;
@@ -200,19 +183,16 @@
200183
&.dx-state-disabled {
201184
.dx-step-indicator {
202185
color: $disabled-color;
186+
border-color: $disabled-bg;
187+
background-color: $disabled-bg;
203188
}
204189

205190
.dx-step-label {
206191
color: $disabled-color;
207192
}
208193

209-
.dx-step-content::before {
210-
border-color: $disabled-bg;
211-
background-color: $disabled-bg;
212-
}
213-
214194
&.dx-state-focused {
215-
.dx-step-content::before {
195+
.dx-step-indicator {
216196
border-color: $disabled-bg;
217197
background-color: $disabled-bg;
218198
}
@@ -221,19 +201,19 @@
221201
}
222202

223203
&.dx-state-focused {
224-
.dx-step-content::before {
204+
.dx-step-indicator {
225205
box-shadow: 0 0 0 2px $background-color, 0 0 0 4px $border-color-focused, 0 0 0 8px $background-color;
226206
}
227207

228208
&.dx-step-selected,
229209
&.dx-step-completed {
230-
.dx-step-content::before {
210+
.dx-step-indicator {
231211
background-color: $background-color-selected-hover;
232212
}
233213
}
234214

235215
&.dx-step-invalid {
236-
.dx-step-content::before {
216+
.dx-step-indicator {
237217
box-shadow: 0 0 0 2px $background-color, 0 0 0 4px $invalid-color-hover, 0 0 0 8px $background-color;
238218
}
239219
}
@@ -242,33 +222,30 @@
242222
&.dx-state-disabled {
243223
.dx-step-indicator {
244224
color: $disabled-color;
225+
border-color: $disabled-bg;
226+
background-color: $disabled-bg;
245227
}
246228

247229
.dx-step-label {
248230
color: $disabled-color;
249231
}
250-
251-
.dx-step-content::before {
252-
border-color: $disabled-bg;
253-
background-color: $disabled-bg;
254-
}
255232
}
256233
}
257234

258235
.dx-stepper {
259236
&.dx-state-focused {
260237
.dx-step-selected {
261-
.dx-step-content::before {
238+
.dx-step-indicator {
262239
box-shadow: 0 0 0 8px $background-color;
263240
}
264241

265242
&.dx-state-focused {
266-
.dx-step-content::before {
243+
.dx-step-indicator {
267244
box-shadow: 0 0 0 2px $background-color, 0 0 0 4px $border-color-focused, 0 0 0 8px $background-color;
268245
}
269246

270247
&.dx-step-invalid {
271-
.dx-step-content::before {
248+
.dx-step-indicator {
272249
border-color: $invalid-color-hover;
273250
background-color: $invalid-color-hover;
274251
box-shadow: 0 0 0 2px $background-color, 0 0 0 4px $invalid-color-hover, 0 0 0 8px $background-color;

0 commit comments

Comments
 (0)