signal-publik: update steps (#36765)
This commit is contained in:
parent
5a470ec68b
commit
3412d29b76
|
|
@ -806,142 +806,53 @@ div#title-section {
|
|||
}
|
||||
}
|
||||
|
||||
div#steps {
|
||||
margin: 0;
|
||||
width: auto;
|
||||
ol {
|
||||
// Steps
|
||||
.wcs-steps {
|
||||
font-size: 1em;
|
||||
|
||||
&.steps-1 {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
.wcs-step {
|
||||
flex: 1 0 auto;
|
||||
&--marker {
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
text-align: left;
|
||||
display: flex;
|
||||
li {
|
||||
position: relative;
|
||||
white-space: nowrap;
|
||||
border-radius: 0;
|
||||
border: none;
|
||||
padding: 0;
|
||||
height: 36px;
|
||||
background: $steps-background;
|
||||
&.step-before {
|
||||
flex: 0;
|
||||
background: darken($steps-background, 20%);
|
||||
}
|
||||
&.step-after {
|
||||
background: #e4e4e4;
|
||||
span.label {
|
||||
color: $darkgray;
|
||||
}
|
||||
}
|
||||
flex: 1;
|
||||
text-align: left;
|
||||
span.marker {
|
||||
text-align: center;
|
||||
display: inline-block;
|
||||
padding: 0;
|
||||
width: 36px;
|
||||
height: 36px;
|
||||
line-height: 36px;
|
||||
color: $darkgray;
|
||||
border: none;
|
||||
background: transparent;
|
||||
z-index: 100;
|
||||
position: relative;
|
||||
font-weight: bold;
|
||||
font-size: $font-size * 1.2;
|
||||
border-radius: none;
|
||||
&::after {
|
||||
content: "";
|
||||
width: 0px;
|
||||
height: 0px;
|
||||
display: block;
|
||||
background: transparent;
|
||||
position: absolute;
|
||||
right: -20px;
|
||||
top: 9px;
|
||||
border: 10px solid white;
|
||||
border-color: transparent transparent transparent white;
|
||||
}
|
||||
}
|
||||
span.total {
|
||||
display: none;
|
||||
}
|
||||
&.current {
|
||||
padding-left: 0px;
|
||||
background: $steps-background;
|
||||
span.marker {
|
||||
background: white;
|
||||
color: black;
|
||||
}
|
||||
span.label {
|
||||
font-weight: normal;
|
||||
}
|
||||
}
|
||||
span.label {
|
||||
text-transform: uppercase;
|
||||
font-weight: normal;
|
||||
padding-top: 10px;
|
||||
display: inline-block;
|
||||
font-weight: normal;
|
||||
color: white;
|
||||
padding-left: 20px;
|
||||
padding-right: 1rem;
|
||||
}
|
||||
}
|
||||
&::before {
|
||||
content: '';
|
||||
&::after {
|
||||
content: "";
|
||||
width: 0px;
|
||||
height: 0px;
|
||||
display: block;
|
||||
background: transparent;
|
||||
position: absolute;
|
||||
top: 26px;
|
||||
width: 100%;
|
||||
height: 3px;
|
||||
background: #4d4d55;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
left: 100%;
|
||||
margin: auto;
|
||||
border: .6em solid transparent;
|
||||
border-left-color: $wcs-step-marker-background;
|
||||
}
|
||||
}
|
||||
&.steps-10, &.steps-11, &.steps-12, &.steps-13, &.steps-14, &.steps-15,
|
||||
&.steps-16, &.steps-17, &.steps-18, &.steps-19, &.steps-20, &.steps-21 {
|
||||
ol {
|
||||
li {
|
||||
span.label {
|
||||
display: none;
|
||||
}
|
||||
&.current {
|
||||
span.label {
|
||||
display: inline-block;
|
||||
}
|
||||
}
|
||||
}
|
||||
&--label {
|
||||
padding-left: 1em;
|
||||
padding-right: 1em;
|
||||
text-transform: uppercase;
|
||||
font-weight: normal !important;
|
||||
@media (min-width: $wcs-steps-min-horizontal-layout) {
|
||||
position: static;
|
||||
display: block !important;
|
||||
}
|
||||
}
|
||||
@media screen and (max-width: $mobile-limit) {
|
||||
ol {
|
||||
li.step-before, li.step-after {
|
||||
display: none;
|
||||
}
|
||||
li.current {
|
||||
background: #e4e4e4;
|
||||
span.marker {
|
||||
border-radius: 0;
|
||||
background: $orange;
|
||||
color: $darkgray;
|
||||
width: auto;
|
||||
min-width: 2rem;
|
||||
}
|
||||
span.total {
|
||||
background: $orange;
|
||||
padding-left: 16px;
|
||||
display: inline-block;
|
||||
color: white;
|
||||
height: 36px;
|
||||
line-height: 36px;
|
||||
font-weight: bold;
|
||||
padding-right: 5px;
|
||||
font-size: $font-size * 1.2;
|
||||
}
|
||||
span.label {
|
||||
color: $darkgray;
|
||||
}
|
||||
}
|
||||
&.step-before {
|
||||
background-color: darken($wcs-step-current-background, 20%);
|
||||
color: $wcs-step-current-color;
|
||||
}
|
||||
&.current & {
|
||||
&--marker {
|
||||
&::after {
|
||||
border-left-color: $wcs-step-current-marker-background;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -56,3 +56,15 @@ $widget-custom-radio-checkbox: true;
|
|||
|
||||
$carrousel-arrows: none;
|
||||
$carrousel-text-position: bottom-left;
|
||||
|
||||
$form-sidebar-position: top;
|
||||
$wcs-steps-max-small-layout: 800px;
|
||||
$wcs-step-border-bottom: none;
|
||||
$wcs-steps-spacing: 0;
|
||||
$wcs-step-color: $darkgray;
|
||||
$wcs-step-background: #e4e4e4;
|
||||
$wcs-step-current-color: #fff;
|
||||
$wcs-step-current-background: $steps-background;
|
||||
$wcs-step-marker-background: hsla(0,0%,100%,0.6);
|
||||
$wcs-step-current-marker-color: #000;
|
||||
$wcs-step-current-marker-background: hsla(0,0%,100%,0.9);
|
||||
|
|
@ -1,19 +0,0 @@
|
|||
{% if page_labels|length > 1 %}
|
||||
<div id="steps" class="steps-{{page_labels|length}}">
|
||||
<ol>
|
||||
{% for page_label in page_labels %}
|
||||
{% spaceless %}
|
||||
<li class="{% if forloop.first %}first{% endif %}
|
||||
{% if forloop.last %}last{% endif %}
|
||||
{% if forloop.counter == current_page_no %}current{% endif %}
|
||||
{% if forloop.counter < current_page_no %}step-before{% endif %}
|
||||
{% if forloop.counter > current_page_no %}step-after{% endif %}" >
|
||||
<span class="marker">{{ forloop.counter }}</span>
|
||||
<span class="total">{{ page_labels|length }}</span>
|
||||
<span class="label">{{ page_label }}</span>
|
||||
</li>
|
||||
{% endspaceless %}
|
||||
{% endfor %}
|
||||
</ol>
|
||||
</div>
|
||||
{% endif %}
|
||||
Loading…
Reference in New Issue