0001-fontenay-sous-bois-2018-update-steps-36765.patch
static/fontenay-sous-bois-2018/_custom.scss | ||
---|---|---|
355 | 355 |
border-radius: 10px; |
356 | 356 |
text-align: center; |
357 | 357 |
div#tracking-code { |
358 |
min-width: 0; |
|
358 | 359 |
background: transparent url(img/trackingcode.png) 2rem 1rem no-repeat; |
359 | 360 |
padding: 1rem 3rem 1rem 130px; |
360 | 361 |
@media screen and (max-width: $mobile-limit) { |
... | ... | |
374 | 375 |
} |
375 | 376 |
} |
376 | 377 |
} |
377 |
div#steps { |
|
378 |
margin-top: 1rem; |
|
379 |
&::before { |
|
380 |
content: ""; |
|
381 |
height: 1px; |
|
382 |
width: 80%; |
|
383 |
margin-left: 10%; |
|
384 |
background: $primary-color; |
|
385 |
display: block; |
|
386 |
position: relative; |
|
387 |
top: 70px; |
|
378 |
} |
|
379 | ||
380 |
// Steps |
|
381 |
.wcs-steps { |
|
382 |
border-radius: 10px; |
|
383 |
overflow: hidden; |
|
384 |
font-size: 1.2em; |
|
385 |
margin-bottom: 0; |
|
386 |
} |
|
387 |
.wcs-step { |
|
388 |
&--marker { |
|
389 |
background-size: 100% !important; |
|
390 |
} |
|
391 |
&--label { |
|
392 |
text-align: left; |
|
393 |
} |
|
394 |
&.current { |
|
395 |
font-weight: normal; |
|
396 |
} |
|
397 |
} |
|
398 |
@media ($mq-min--wcs-steps-horizontal-layout){ |
|
399 |
.wcs-steps--list { |
|
400 |
justify-content: center; |
|
401 |
padding-bottom: 0; |
|
402 |
} |
|
403 |
.wcs-step { |
|
404 |
margin-right: $wcs-steps-spacing; |
|
405 |
flex: 1 1 auto; |
|
406 |
max-width: 33%; |
|
407 |
&:last-child { |
|
408 |
flex-grow: 0; |
|
409 |
} |
|
410 |
&--label { |
|
411 |
text-align: center; |
|
388 | 412 |
} |
389 |
ol { |
|
390 |
display: -ms-flexbox; |
|
391 |
display: flex; |
|
392 |
-ms-justify-content: space-evenly; |
|
393 |
justify-content: space-evenly; |
|
413 |
} |
|
414 |
} |
|
415 |
@include desktop-horizontal-steps() { |
|
416 |
.wcs-steps{ |
|
417 |
font-size: 2.5em; |
|
418 |
&--list { |
|
419 |
margin-bottom: 0; |
|
394 | 420 |
} |
395 |
li { |
|
396 |
position: relative; |
|
397 |
z-index: 10; |
|
421 |
} |
|
422 |
.wcs-step { |
|
423 |
$wcs-step-marker-size: 6rem; |
|
424 |
position: relative; |
|
425 |
margin-bottom: 0; |
|
426 |
flex-direction: column; |
|
427 |
&--marker { |
|
428 |
width: $wcs-step-marker-size; |
|
429 |
height: $wcs-step-marker-size; |
|
430 |
flex-basis: $wcs-step-marker-size; |
|
431 |
} |
|
432 |
&--label { |
|
433 |
display: block !important; |
|
434 |
position: static; |
|
435 |
font-size: 0.4em; |
|
436 |
padding-top: 0.5em; |
|
437 |
top: 100%; |
|
438 |
width: $wcs-step-marker-size + 1; |
|
439 |
margin-left: -1 * ($wcs-steps-spacing / 2); |
|
398 | 440 |
text-align: center; |
399 |
width: 15ex; |
|
400 |
border-bottom: 0; |
|
401 |
background: url(img/step-g.png) top center no-repeat; |
|
402 |
@media screen and (max-width: $mobile-limit) { |
|
403 |
background: none; |
|
404 |
width: 2ex; |
|
405 |
text-align: center; |
|
406 |
padding-right: 0; |
|
407 |
} |
|
408 |
span.marker { |
|
409 |
padding: 1.5rem 0; |
|
410 |
color: white; |
|
411 |
@media screen and (max-width: $mobile-limit) { |
|
412 |
padding: 0; |
|
413 |
display: inline-block; |
|
414 |
width: 100%; |
|
415 |
} |
|
416 |
} |
|
417 |
span.label { |
|
418 |
display: inline-block; |
|
419 |
padding-top: 0.5rem; |
|
420 |
@media screen and (max-width: $mobile-limit) { |
|
421 |
display: none; |
|
422 |
} |
|
423 |
} |
|
424 |
&.current { |
|
425 |
background-image: url(img/step-r.png); |
|
426 |
span.label { |
|
427 |
color: $primary-color; |
|
428 |
font-weight: normal; |
|
429 |
} |
|
430 |
@media screen and (max-width: $mobile-limit) { |
|
431 |
background: none; |
|
432 |
span.marker { |
|
433 |
background: $primary-color; |
|
434 |
} |
|
435 |
} |
|
436 |
} |
|
441 |
align-self: flex-start; |
|
442 |
} |
|
443 |
// Tie |
|
444 |
&::after { |
|
445 |
position: absolute; |
|
446 |
top: calc( (#{$wcs-step-marker-size} - #{$wcs-step-marker-tie-width}) / 2}) !important; |
|
447 |
left: $wcs-step-marker-size; |
|
448 |
width: calc(100% + #{$wcs-steps-spacing}); |
|
437 | 449 |
} |
438 | 450 |
} |
439 | 451 |
} |
static/fontenay-sous-bois-2018/_vars.scss | ||
---|---|---|
29 | 29 |
$footer-background: $primary-color; |
30 | 30 | |
31 | 31 |
$widget-unique-checkbox-position: left; |
32 | ||
33 |
$form-sidebar-position: top; |
|
34 |
$wcs-step-border-bottom: none; |
|
35 |
$wcs-steps-spacing: 1rem; |
|
36 |
$wcs-steps-background: white; |
|
37 |
$wcs-step-marker-size: 3rem; |
|
38 |
$wcs-step-marker-type: tied; |
|
39 |
$wcs-step-marker-tie-color: $primary-color; |
|
40 |
$wcs-step-marker-tie-width: 1px; |
|
41 |
$wcs-step-marker-color: white; |
|
42 |
$wcs-step-marker-background: url(img/step-g.png) center center no-repeat; |
|
43 |
$wcs-step-current-marker-color: white; |
|
44 |
$wcs-step-current-marker-background: url(img/step-r.png) center center no-repeat; |
|
45 | ||
46 | ||
32 |
- |