0001-toodego-update-steps-36765.patch
static/toodego/_custom.scss | ||
---|---|---|
334 | 334 |
} |
335 | 335 |
} |
336 | 336 | |
337 |
.gru-content div#steps { |
|
337 |
// Steps |
|
338 |
.wcs-steps { |
|
339 |
font-size: 0.9em; |
|
338 | 340 |
margin-top: 2rem; |
339 | 341 |
margin-bottom: 2rem; |
342 |
&--list { |
|
343 |
align-items: flex-end; |
|
344 |
overflow: hidden; |
|
345 |
flex-wrap: nowrap; |
|
346 |
max-width: 90%; |
|
347 |
margin: 0 auto; |
|
348 |
} |
|
340 | 349 |
} |
341 | ||
342 |
.gru-content div#steps ol { |
|
343 |
display: flex; |
|
344 |
justify-content: space-between; |
|
345 |
max-width: 90%; |
|
346 |
margin: 0 auto; |
|
350 |
.wcs-step { |
|
351 |
flex-direction: column; |
|
352 |
align-items: center; |
|
353 |
flex: 1 1 6em; |
|
354 |
max-width: 50%; |
|
347 | 355 |
position: relative; |
348 |
color: $font-color; |
|
349 |
&::before { |
|
350 |
content: ""; |
|
351 |
width: 84%; |
|
352 |
left: 8%; |
|
353 |
height: 2px; |
|
354 |
background: $red; |
|
355 |
position: absolute; |
|
356 |
bottom: 8px; |
|
356 | ||
357 |
&--marker { |
|
358 |
border: 2px solid $red; |
|
357 | 359 |
} |
358 |
li {
|
|
359 |
margin-bottom: 0;
|
|
360 |
position: relative;
|
|
361 |
display: block;
|
|
360 |
&--label {
|
|
361 |
position: static;
|
|
362 |
order: -1;
|
|
363 |
padding-bottom: .66em;
|
|
362 | 364 |
text-align: center; |
363 |
min-width: 160px; |
|
364 |
padding-bottom: 30px; |
|
365 |
z-index: 2; |
|
366 |
border: none; |
|
367 |
span.marker { |
|
368 |
position: absolute; |
|
369 |
bottom: 0; |
|
370 |
left: calc(50% - 10px); |
|
371 |
font-size: 12px; |
|
372 |
display: block; |
|
373 |
width: 20px; |
|
374 |
height: 20px; |
|
375 |
border-radius: 10px; |
|
376 |
font-weight: bold; |
|
377 |
border: 2px solid $red; |
|
378 |
box-sizing: border-box; |
|
379 |
background: white; |
|
380 |
color: white; |
|
381 |
} |
|
382 |
&.step-before span.marker { |
|
383 |
color: $red; |
|
384 |
background: $red; |
|
385 |
} |
|
386 |
@media screen and (max-width: $desktop-limit) { |
|
387 |
min-width: 20px; |
|
388 |
&.current { |
|
389 |
min-width: 100px; |
|
390 |
} |
|
391 |
&.current span.label { |
|
392 |
display: block; |
|
393 |
} |
|
394 |
span.label { |
|
395 |
display: none; |
|
396 |
} |
|
397 |
} |
|
398 |
&.current { |
|
399 |
background: inherit; |
|
400 |
color: inherit; |
|
401 |
span.marker { |
|
402 |
background: $red; |
|
403 |
} |
|
365 |
font-size: 1.1em; |
|
366 |
} |
|
367 | ||
368 |
&:not(.current) & { |
|
369 |
&--label { |
|
370 |
display: none; |
|
404 | 371 |
} |
405 | 372 |
} |
373 |
// Tie |
|
374 |
&::after { |
|
375 |
position: absolute; |
|
376 |
bottom: calc( (#{$wcs-step-marker-size} - #{$wcs-step-marker-tie-width}) / 2}) !important; |
|
377 |
left: 50%; |
|
378 |
width: calc(100% + #{$wcs-step-marker-size}); |
|
379 |
} |
|
406 | 380 |
} |
407 | 381 | |
408 | 382 |
div#content div#tracking-code { |
static/toodego/_vars.scss | ||
---|---|---|
46 | 46 |
$tile-producer-circle-radius: 40px; |
47 | 47 | |
48 | 48 |
$carrousel-height: 400px; |
49 | ||
50 |
$wcs-steps-background: #fff; |
|
51 |
$form-sidebar-position: top; |
|
52 |
$wcs-step-color: #333; |
|
53 |
$wcs-step-current-color: #333; |
|
54 |
$wcs-step-border-bottom: none; |
|
55 |
$wcs-step-marker-type: disc tied; |
|
56 |
$wcs-step-marker-tie-color: $red; |
|
57 |
$wcs-step-marker-tie-width: 2px; |
|
58 |
$wcs-step-marker-background: #fff; |
|
59 |
$wcs-step-marker-color: #fff; |
|
60 |
$wcs-step-current-marker-color: #fff; |
|
61 |
$wcs-step-current-marker-background: $red; |
|
62 |
$wcs-step-marker-size: 1.5em; |
|
63 |
$wcs-steps-small-layout-limit: 0px; |
|
49 |
- |