0001-quimper-update-steps-36765.patch
static/quimper/_custom.scss | ||
---|---|---|
433 | 433 |
} |
434 | 434 |
} |
435 | 435 | |
436 |
// Steps |
|
437 |
.wcs-steps { |
|
438 |
margin-bottom: 0; |
|
439 |
border-radius: 0; |
|
440 |
@include desktop-vertical-steps() { |
|
441 |
background-color: transparent; |
|
442 |
} |
|
443 |
} |
|
444 |
@media ($mq-max--wcs-steps-small-layout) { |
|
445 |
.wcs-steps { |
|
446 |
padding: 0; |
|
447 |
} |
|
448 |
.wcs-step { |
|
449 |
padding: $wcs-steps-spacing; |
|
450 |
padding-left: $wcs-steps-spacing*2; |
|
451 |
position: relative; |
|
452 |
&--marker { |
|
453 |
position: static; |
|
454 |
transform: none !important; |
|
455 |
height: auto; |
|
456 |
width: auto; |
|
457 |
font-size: 1.2em; |
|
458 |
&::before { |
|
459 |
display: none; |
|
460 |
} |
|
461 |
&-nb { |
|
462 |
transform: none; |
|
463 |
} |
|
464 |
&-total { |
|
465 |
box-sizing: border-box; |
|
466 |
transform: none; |
|
467 |
position: absolute; |
|
468 |
right: 0; |
|
469 |
top: 0; |
|
470 |
height: 100%; |
|
471 |
padding: $wcs-steps-spacing; |
|
472 |
font-weight: inherit; |
|
473 |
font-size: inherit; |
|
474 |
background-color: #ccc; |
|
475 |
color: #333; |
|
476 |
display: flex; |
|
477 |
align-items: center; |
|
478 |
} |
|
479 |
} |
|
480 |
&--label { |
|
481 |
text-transform: uppercase; |
|
482 |
font-weight: normal; |
|
483 |
color: #333 !important; |
|
484 |
font-size: 14px; |
|
485 |
padding-right: 2em; |
|
486 |
align-self: flex-end; |
|
487 |
} |
|
488 |
} |
|
489 |
} |
|
490 | ||
491 | ||
436 | 492 |
@media screen and (max-width: $mobile-limit) { |
437 | 493 |
br.clear { |
438 | 494 |
display: none; |
... | ... | |
516 | 572 |
font-size: 14px; |
517 | 573 |
} |
518 | 574 |
} |
519 |
div#steps ol { |
|
520 |
font-size: 14px; |
|
521 |
height: 24px; |
|
522 |
overflow: hidden; |
|
523 |
background: #b3b3b3; |
|
524 |
li { |
|
525 |
padding: 0; |
|
526 |
float: left; |
|
527 |
span.marker { |
|
528 |
padding-top: 2px; |
|
529 |
display: inline-block; |
|
530 |
font-size: 18px; |
|
531 |
border: none; |
|
532 |
border-radius: 0; |
|
533 |
} |
|
534 |
span.label { |
|
535 |
display: none; |
|
536 |
position: relative; |
|
537 |
top: 3px; |
|
538 |
} |
|
539 |
} |
|
540 |
.current { |
|
541 |
.label { |
|
542 |
display: inline-block; |
|
543 |
max-width: 50vw; |
|
544 |
overflow: hidden; |
|
545 |
text-overflow: ellipsis; |
|
546 |
} |
|
547 |
} |
|
548 |
.step-before { |
|
549 |
span.marker { |
|
550 |
background: #333333; |
|
551 |
color: white; |
|
552 |
} |
|
553 |
} |
|
554 |
.current { |
|
555 |
span.label { |
|
556 |
color: #333333; |
|
557 |
text-transform: uppercase; |
|
558 |
} |
|
559 |
} |
|
560 |
.step-after { |
|
561 |
span.marker { |
|
562 |
background: #cccccc; |
|
563 |
color: #333333; |
|
564 |
} |
|
565 |
} |
|
566 |
.step-before, .step-after { |
|
567 |
display: none; |
|
568 |
} |
|
569 |
.first, .last { |
|
570 |
display: block; |
|
571 |
&.last { |
|
572 |
float: right; |
|
573 |
} |
|
574 |
&.last.current, |
|
575 |
&.last.first { |
|
576 |
float: left; |
|
577 |
span.label { |
|
578 |
max-width: 80vw; |
|
579 |
} |
|
580 |
} |
|
581 |
} |
|
582 |
} |
|
583 | 575 |
div.form-validation form, // target form validation |
584 | 576 |
div#rub_service form[action="."] { // target form pages |
585 | 577 |
div.buttons { |
static/quimper/_vars.scss | ||
---|---|---|
8 | 8 | |
9 | 9 |
$altgreen: #16c4b3; |
10 | 10 | |
11 | ||
11 | 12 |
$font-family: Roboto, sans-serif; |
12 | 13 |
$primary-color: $green; |
14 |
$mobile-limit: 800px; |
|
13 | 15 |
$very-small-limit: 360px; |
14 | 16 |
$width: 1280px; |
15 | 17 |
$sidebar-width: 400px; |
... | ... | |
59 | 61 | |
60 | 62 |
$carrousel-arrows: none; |
61 | 63 |
$carrousel-text-position: bottom-left; |
64 | ||
65 |
$wcs-steps-background: #b3b3b3; |
|
66 |
$wcs-step-current-color: $mauve; |
|
67 |
$wcs-steps-small-layout-limit: $mobile-limit; |
|
68 | ||
62 |
- |