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 |
- |
|