0001-metz-metropole-2019-update-steps-36765.patch
| static/metz-metropole-2019/_custom.scss | ||
|---|---|---|
| 788 | 788 |
} |
| 789 | 789 |
} |
| 790 | 790 | |
| 791 |
div#steps {
|
|
| 792 |
border-right: 1px solid #ececec; |
|
| 793 |
ol {
|
|
| 794 |
text-transform: uppercase; |
|
| 795 |
color: $darkblue; |
|
| 796 |
font-size: 14px; |
|
| 797 |
li {
|
|
| 798 |
border-radius: 0; |
|
| 799 |
font-weight: 500; |
|
| 800 |
letter-spacing: 0; |
|
| 801 |
margin: 0; |
|
| 791 |
// Steps |
|
| 792 |
.wcs-steps {
|
|
| 793 |
text-transform: uppercase; |
|
| 794 |
font-size: .89em; |
|
| 795 | ||
| 796 |
@media ($mq-max--wcs-steps-small-layout) {
|
|
| 797 |
margin: -1px 10px; |
|
| 798 |
} |
|
| 799 |
} |
|
| 800 |
.wcs-step {
|
|
| 801 |
margin-bottom: 0; |
|
| 802 |
border-radius: 0; |
|
| 803 | ||
| 804 |
&--label {
|
|
| 805 |
font-size: 1em; |
|
| 806 |
} |
|
| 807 | ||
| 808 |
&--marker {
|
|
| 809 |
font-weight: bold; |
|
| 810 |
> * {
|
|
| 811 |
transform: none; |
|
| 812 |
font-size: 1em; |
|
| 802 | 813 |
} |
| 803 |
li.current {
|
|
| 804 |
background: $yellow; |
|
| 805 |
color: white; |
|
| 814 |
&-total {
|
|
| 815 |
color: #fff; |
|
| 816 |
font-weight: bold; |
|
| 817 |
margin-right: .33em; |
|
| 806 | 818 |
} |
| 807 |
li span.marker {
|
|
| 808 |
display: inline-block; |
|
| 809 |
font-size: 100%; |
|
| 810 |
font-weight: 500; |
|
| 811 |
&::after {
|
|
| 812 |
content: " - "; |
|
| 813 |
margin-right: 1ex; |
|
| 814 |
} |
|
| 819 |
// Slash |
|
| 820 |
&::before {
|
|
| 821 |
height: 1.2em; |
|
| 822 |
margin: .3em; |
|
| 815 | 823 |
} |
| 816 |
li span.total {
|
|
| 817 |
display: none; |
|
| 824 |
&::after {
|
|
| 825 |
content: "-"; |
|
| 826 |
align-self: center; |
|
| 827 |
order: 3; |
|
| 828 |
color: #fff; |
|
| 818 | 829 |
} |
| 819 |
} |
|
| 820 |
@media screen and (max-width: $mobile-limit) {
|
|
| 821 |
margin: -1px 10px 0 10px; |
|
| 822 |
width: auto; |
|
| 823 |
ol {
|
|
| 824 |
li.step-before, li.step-after {
|
|
| 825 |
display: none; |
|
| 826 |
} |
|
| 827 |
li.current {
|
|
| 828 |
padding: 6px 0; |
|
| 829 |
width: 100%; |
|
| 830 |
span.marker {
|
|
| 831 |
border-radius: 0; |
|
| 832 |
border: 0; |
|
| 833 |
padding: 0; |
|
| 834 |
padding-left: 10px; |
|
| 835 |
background: transparent; |
|
| 836 |
color: $darkblue; |
|
| 837 |
width: auto; |
|
| 838 |
&::after {
|
|
| 839 |
content: "/"; |
|
| 840 |
margin-right: 0; |
|
| 841 |
} |
|
| 842 |
} |
|
| 843 |
span.total {
|
|
| 844 |
display: inline-block; |
|
| 845 |
color: white; |
|
| 846 |
&::after {
|
|
| 847 |
content: "-"; |
|
| 848 |
margin: 0 1ex; |
|
| 849 |
} |
|
| 850 |
} |
|
| 851 |
span.label {
|
|
| 852 |
font-weight: bold; |
|
| 853 |
} |
|
| 854 |
} |
|
| 830 |
@media ($mq-max--wcs-steps-small-layout) {
|
|
| 831 |
height: auto; |
|
| 832 |
width: auto; |
|
| 833 |
color: $primary-color !important; |
|
| 834 |
padding-left: .33em; |
|
| 855 | 835 |
} |
| 856 | 836 |
} |
| 857 | 837 |
} |
| static/metz-metropole-2019/_vars.scss | ||
|---|---|---|
| 5 | 5 |
$yellow: #fcc14b; |
| 6 | 6 |
$green: #37bd9c; |
| 7 | 7 | |
| 8 | ||
| 8 | 9 |
$font-family: "Now Alt", sans-serif; |
| 9 | 10 |
$primary-color: $darkblue; |
| 10 | 11 |
$link-color: $blue; |
| ... | ... | |
| 62 | 63 |
$notification_error_color: #fdefee; |
| 63 | 64 |
$widget-custom-radio-checkbox: true; |
| 64 | 65 |
$widget-custom-radio-checkbox-color: $blue; |
| 66 | ||
| 67 |
$very-small-limit: 800px; |
|
| 68 |
$wcs-step-color: $primary-color; |
|
| 69 |
$wcs-step-border-bottom: 1px solid #ccc; |
|
| 70 |
$wcs-step-current-border-bottom: 1px solid $yellow; |
|
| 71 |
$wcs-step-current-color: #fff; |
|
| 72 |
$wcs-step-background: #fff; |
|
| 73 |
$wcs-step-current-background: $yellow; |
|
| templates/variants/metz-metropole-2019/wcs/front/formdata_steps.html | ||
|---|---|---|
| 1 |
{% if page_labels|length > 1 %}
|
|
| 2 |
<div id="steps" class="steps-{{page_labels|length}}">
|
|
| 3 |
<ol> |
|
| 4 |
{% for page_label in page_labels %}
|
|
| 5 |
{% spaceless %}
|
|
| 6 |
<li class="{% if forloop.first %}first{% endif %}
|
|
| 7 |
{% if forloop.last %}last{% endif %}
|
|
| 8 |
{% if forloop.counter == current_page_no %}current{% endif %}
|
|
| 9 |
{% if forloop.counter < current_page_no %}step-before{% endif %}
|
|
| 10 |
{% if forloop.counter > current_page_no %}step-after{% endif %}" >
|
|
| 11 |
<span class="marker">{{ forloop.counter }}</span>
|
|
| 12 |
<span class="total">{{ page_labels|length }}</span>
|
|
| 13 |
<span class="label">{{ page_label }}</span>
|
|
| 14 |
</li> |
|
| 15 |
{% endspaceless %}
|
|
| 16 |
{% endfor %}
|
|
| 17 |
</ol> |
|
| 18 |
</div> |
|
| 19 |
{% endif %}
|
|
| 20 |
- |
|