0001-publik-update-steps-36765.patch
static/publik/_custom.scss | ||
---|---|---|
219 | 219 |
} |
220 | 220 |
} |
221 | 221 | |
222 |
div#steps ol li::before, |
|
223 | 222 |
div#tracking-code::before { |
224 | 223 |
content: ""; |
225 | 224 |
display: block; |
... | ... | |
230 | 229 |
position: absolute; |
231 | 230 |
} |
232 | 231 | |
233 |
div#steps ol li { |
|
234 |
padding: 0 1ex; |
|
235 |
min-height: 50px; |
|
236 |
} |
|
237 | ||
238 |
div#steps ol li span.marker { |
|
239 |
color: #acacac; |
|
240 |
font-size: 40px; |
|
241 |
font-weight: bold; |
|
242 |
position: absolute; |
|
243 |
} |
|
244 | ||
245 |
div#steps ol li span.label, |
|
246 |
div#steps ol li.current span.label { |
|
247 |
display: block; |
|
248 |
padding-top: 10px; |
|
249 |
padding-left: 40px; |
|
250 |
font-size: 20px; |
|
251 |
font-weight: normal; |
|
252 |
} |
|
253 | ||
254 |
div#steps ol li { |
|
255 |
position: relative; |
|
256 |
background: #E6E6E6; |
|
257 |
border: none; |
|
258 |
} |
|
259 | ||
260 |
div#steps ol li.current { |
|
261 |
position: relative; |
|
262 |
background: linear-gradient(to left, rgba(1, 1, 1, 0.1) 0%, rgba(0, 0, 0, 0) 20px), $title-background; |
|
263 |
span.marker { |
|
264 |
color: white; |
|
232 |
// Steps |
|
233 |
.wcs-steps { |
|
234 |
@include desktop-vertical-steps() { |
|
235 |
position: relative; |
|
236 |
z-index: -1; |
|
237 |
font-size: 1.5rem; |
|
265 | 238 |
} |
266 | 239 |
} |
240 |
.wcs-step { |
|
241 |
padding: 0; |
|
242 |
&--marker { |
|
243 |
font-weight: bold; |
|
244 |
font-size: 1.2em; |
|
245 |
} |
|
267 | 246 | |
268 |
div#steps ol li.current::before { |
|
269 |
background: #6D2080; |
|
270 |
} |
|
247 |
&--label { |
|
248 |
top: calc(100% + 0.35em); |
|
249 |
// padding-left: .7em; |
|
250 |
} |
|
271 | 251 | |
272 |
div#steps ol li::before { |
|
273 |
background: inherit; |
|
252 |
&.current & { |
|
253 |
&--marker { |
|
254 |
@include desktop-vertical-steps() { |
|
255 |
position: relative; |
|
256 | ||
257 |
&::before { |
|
258 |
content: ""; |
|
259 |
display: block; |
|
260 |
left: calc(-10px - (100vw - #{$width}) / 2); |
|
261 |
width: calc(10px + (100vw - #{$width}) / 2); |
|
262 |
height: 100%; |
|
263 |
background: $secondary-color; |
|
264 |
position: absolute; |
|
265 |
} |
|
266 |
} |
|
267 |
} |
|
268 |
} |
|
274 | 269 |
} |
275 | 270 | |
276 | 271 |
div#gauche + div#rub_service { |
... | ... | |
317 | 312 | |
318 | 313 | |
319 | 314 |
@media screen and (max-width: $mobile-limit) { |
320 |
div#steps ol li span.marker { |
|
321 |
border: none; |
|
322 |
} |
|
323 | 315 |
div#gauche { |
324 | 316 |
width: auto; |
325 | 317 |
min-height: auto; |
static/publik/_vars.scss | ||
---|---|---|
18 | 18 |
$category-toggled-background: $secondary-color; |
19 | 19 |
$category-toggled-link-hover-color: #DF017A; |
20 | 20 |
$dashboard-selected-color: $primary-color; |
21 | ||
22 |
$wcs-steps-spacing: 0.7rem; |
|
23 |
$wcs-step-border-bottom: none; |
|
24 |
$wcs-step-background:#e6e6e6; |
|
25 |
$wcs-step-current-color: $secondary-color; |
|
26 |
$wcs-step-marker-color: #aaa; |
|
27 |
$wcs-step-current-marker-background: $secondary-color; |
|
28 |
$wcs-step-current-marker-color: white; |
|
21 |
- |