core: refactorisation of wcs steps component (#36765)
This commit is contained in:
parent
35b0c7a9e1
commit
b144e00e31
|
|
@ -519,6 +519,161 @@ paramètre, la deuxième sa description et la troisième la valeur par défaut.
|
|||
</table>
|
||||
</section>
|
||||
|
||||
<section>
|
||||
<title>Bloc étapes d'une démarche</title>
|
||||
|
||||
<p>
|
||||
Ces paramètres contrôlent le rendu du bloc présentant les étapes ou pages d'une démarche.
|
||||
</p>
|
||||
<p>
|
||||
Le rendu de ce bloc diffère automatiquement en fonction de la taille de l'écran et de la position de la <em>sidebar</em> <code>$form-sidebar-position</code> pour s'adapter aux différents terminaux :
|
||||
</p>
|
||||
<ul>
|
||||
<li><em>rendu mobile :</em> seul l'étape courante est affichée avec une indication du nombre totale d'étapes ;</li>
|
||||
<li><em>rendu horizontal :</em>Les marqueurs d'étapes (chiffres) s'affichent côte à côte et sur plusieurs lignes s'il le faut. Seul le label de l'étape en cours s'affiche ;</li>
|
||||
<li><em>rendu vertical :</em> (s'affiche uniquement si la variable <code>$form-sidebar-position</code> a la valeur <var>left</var> ou <var>right</var>) dispose les étapes les unes au dessous des autres avec chacune leur numéro et leur label</li>.
|
||||
</ul>
|
||||
<p>
|
||||
Plusieurs options sont également disponibles pour gérer le rendu du <em>marqueur d'étape</em> (chiffre).
|
||||
</p>
|
||||
|
||||
<table shade="row">
|
||||
<tr>
|
||||
<td><p><code>$wcs-steps-background</code></p></td>
|
||||
<td><p>Couleur de fond du bloc</p></td>
|
||||
<td><var>transparent</var></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><p><code>$wcs-steps-spacing</code></p></td>
|
||||
<td>
|
||||
<p>Fixe la taille des espacements entre les différents blocs, mais également entre les marqueurs chiffres et leur label</p>
|
||||
</td>
|
||||
<td><var>0.35rem</var></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><p><code>$wcs-step-color</code></p></td>
|
||||
<td><p>Couleur du texte des étapes non courantes</p></td>
|
||||
<td><var>#868686</var></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><p><code>$wcs-step-current-color</code></p></td>
|
||||
<td><p>Couleur du texte de l'étape courantes</p></td>
|
||||
<td><var>$primary-color</var></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><p><code>$wcs-step-background</code></p></td>
|
||||
<td><p>Couleur de fond des étapes</p></td>
|
||||
<td><var>transparent</var></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><p><code>$wcs-step-current-background</code></p></td>
|
||||
<td><p>Couleur de fond de l'étape courante</p></td>
|
||||
<td><var>$wcs-step-background</var></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><p><code>$wcs-step-border-bottom</code></p></td>
|
||||
<td>
|
||||
<p>
|
||||
Épaisseur et couleur du filet qui sépare les étapes en mode vertical et du filet présent sous les marqueurs en mode horizontal.
|
||||
la valeur <var>none</var> supprimera les filets.
|
||||
</p>
|
||||
</td>
|
||||
<td><var>1px solid $wcs-step-color</var></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><p><code>$wcs-step-current-border-bottom</code></p></td>
|
||||
<td>
|
||||
<p>
|
||||
Épaisseur et couleur du filet de l'étape courante.
|
||||
Si <code>$wcs-step-border-bottom</code> est à <var>none</var>, ce filet sera automatiquement <var>none</var> également.
|
||||
</p>
|
||||
</td>
|
||||
<td><var>3px solid $wcs-step-current-color</var></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><p><code>$wsc-step-before-piled</code></p></td>
|
||||
<td>
|
||||
<p>
|
||||
Cette option n'est valable qu'en mode vertical et si <code>$wcs-step-background</code> a une valeur différente de <var>transparent</var>.
|
||||
Avec la valeur <var>true</var>, elle va superposer les étapes passée les unes sur les autres pour gagner de la place.
|
||||
</p>
|
||||
</td>
|
||||
<td><var>false</var></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><p><code>$wcs-step-marker-color</code></p></td>
|
||||
<td><p>Couleur du chiffre des marqueurs d'étapes non courantes</p></td>
|
||||
<td><var>$wcs-step-color</var></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><p><code>$wcs-step-current-marker-color</code></p></td>
|
||||
<td><p>Couleur du chiffre du marqueur d'étape courante</p></td>
|
||||
<td><var>$wcs-step-current-color</var></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><p><code>$wcs-step-marker-background</code></p></td>
|
||||
<td><p>Couleur de fond des marqueurs d'étapes non courantes</p></td>
|
||||
<td><var>$wcs-step-background</var></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><p><code>$wcs-step-current-marker-background</code></p></td>
|
||||
<td><p>Couleur de fond du marqueur d'étape courante</p></td>
|
||||
<td><var>$wcs-step-current-background</var></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><p><code>$wcs-step-marker-size</code></p></td>
|
||||
<td><p>Taille du marqueur. La taille du marquer n'influe pas sur la taille du chiffre</p></td>
|
||||
<td><var>2.1em</var></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><p><code>$wcs-step-current-marker-enlarge</code></p></td>
|
||||
<td><p>Facteur d'agrandissement de la taille du marqueur courant. Une valeur de <var>1.1</var> agrandira le marqueur de 110%</p></td>
|
||||
<td><var>1</var></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><p><code>$wcs-step-marker-type</code></p></td>
|
||||
<td>
|
||||
<p>
|
||||
Défini le style des marqueurs. Les marqueurs peuvent être sous forme de carrés (par défaut), de cercles mais également liés entre eux (par une ligne).
|
||||
Valeurs possibles: <var>tied</var>, <var>disc</var>, <var>disc tied</var>.
|
||||
Il est possible de gérer le rendu de la ligne avec les variables <code>$wcs-step-marker-tie-color</code> et <code>$wcs-step-marker-tie-width</code>
|
||||
</p>
|
||||
</td>
|
||||
<td><var>square</var></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><p><code>$wcs-step-marker-background-type</code></p></td>
|
||||
<td>
|
||||
<p>
|
||||
Cette option ne fonctionnera que si <code>$wcs-step-marker-background</code> est une couleur pleine.
|
||||
Avec la valeur <var>gradient</var>, elle permet de générer un dégradé en fond des marqueurs non courant permettant de souligner visuellement la progression.
|
||||
</p>
|
||||
</td>
|
||||
<td><var>solid</var></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><p><code>$wcs-step-current-label-color</code></p></td>
|
||||
<td>
|
||||
<p>
|
||||
Cette option ne fonctionnera que si <code>$wcs-step-marker-background</code> est une couleur pleine.
|
||||
Avec la valeur <var>gradient</var>, elle permet de générer un dégradé en fond des marqueurs non courant permettant de souligner visuellement la progression.
|
||||
</p>
|
||||
</td>
|
||||
<td><var>$wcs-step-current-color</var></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><var>$wcs-step-current-color</var></td>
|
||||
<td><p>Couleur du label de l'étape courante</p></td>
|
||||
<td><var>solid</var></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code>$wcs-steps-small-layout-limit</code></td>
|
||||
<td><p>Fixe la valeur du point de rupture entre le rendu mobile et horizontal</p></td>
|
||||
<td><var>$very-small-limit</var></td>
|
||||
</tr>
|
||||
</table>
|
||||
</section>
|
||||
|
||||
<section>
|
||||
<title>Cellules</title>
|
||||
|
||||
|
|
|
|||
|
|
@ -1,3 +1,4 @@
|
|||
@import 'grid';
|
||||
@import 'wcs/bulk';
|
||||
@import 'wcs/nearby-form';
|
||||
@import 'wcs/steps';
|
||||
@import 'wcs/nearby-form';
|
||||
|
|
|
|||
|
|
@ -2,12 +2,9 @@
|
|||
// possible values are: left, right, top
|
||||
$form-sidebar-position: left !default;
|
||||
|
||||
$responsive-steps: horizontal !default;
|
||||
|
||||
// hide a bunch of elements
|
||||
div#droite,
|
||||
div#services > h3,
|
||||
div#steps h2,
|
||||
div#sidebox div#links {
|
||||
display: none;
|
||||
}
|
||||
|
|
@ -133,51 +130,10 @@ div#services div.block-custom-text {
|
|||
margin: 1em;
|
||||
}
|
||||
|
||||
// steps
|
||||
div#steps ol {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
list-style: none;
|
||||
color: #868686;
|
||||
|
||||
& li {
|
||||
border: 0;
|
||||
border-bottom: 1px solid #ccc;
|
||||
margin-bottom: 1.5em;
|
||||
border-radius: $border-radius;
|
||||
padding: 0.7em;
|
||||
letter-spacing: 1px;
|
||||
}
|
||||
& li.current {
|
||||
border: 0;
|
||||
background: $title-background;
|
||||
color: $title-color;
|
||||
& span.label {
|
||||
font-weight: bold;
|
||||
}
|
||||
}
|
||||
& li span.marker {
|
||||
font-size: 250%;
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@if ($form-sidebar-position == top) {
|
||||
div#steps ol {
|
||||
text-align: center;
|
||||
li {
|
||||
display: inline-block;
|
||||
min-width: 7rem;
|
||||
max-width: 11rem;
|
||||
vertical-align: top;
|
||||
border-bottom: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@if ($responsive-steps == horizontal) {
|
||||
@media screen and (max-width: $mobile-limit) {
|
||||
// move #gauche on top and tracking code after steps
|
||||
div#gauche {
|
||||
float: none;
|
||||
width: 100%;
|
||||
|
|
@ -193,59 +149,7 @@ div#steps ol {
|
|||
h3 { display: inline-block; }
|
||||
.text-tracking-code-short-text { display: none; }
|
||||
}
|
||||
div#steps {
|
||||
position: static;
|
||||
margin: 0;
|
||||
color: #aaa;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
width: 100%;
|
||||
& ol {
|
||||
list-style: none;
|
||||
padding: 0 0;
|
||||
margin: 0;
|
||||
text-align: left;
|
||||
& li {
|
||||
border: none;
|
||||
display: inline-block;
|
||||
margin: 0;
|
||||
padding: 0 1em 0.7em 0;
|
||||
list-style: none;
|
||||
min-width: auto;
|
||||
border-radius: 0;
|
||||
& span.marker {
|
||||
float: none;
|
||||
display: inline;
|
||||
font-size: 26px;
|
||||
position: static;
|
||||
padding: 2px 9px;
|
||||
font-weight: bold;
|
||||
color: white;
|
||||
text-align: center;
|
||||
background: #ddd;
|
||||
border-radius: $border-radius;
|
||||
border: 1px solid #ddd;
|
||||
}
|
||||
}
|
||||
& li.current {
|
||||
background: inherit;
|
||||
color: inherit;
|
||||
& span.label {
|
||||
font-weight: normal;
|
||||
}
|
||||
& span.marker {
|
||||
background: $title-background;
|
||||
color: $title-color;
|
||||
border-radius: $border-radius;
|
||||
}
|
||||
}
|
||||
& li.step-before .label {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
} // @endif ($responsive-steps == horizontal)
|
||||
|
||||
@media screen and (max-width: $mobile-limit) {
|
||||
div#gauche + div#rub_service,
|
||||
|
|
|
|||
|
|
@ -0,0 +1,474 @@
|
|||
/*
|
||||
* WCS Steps
|
||||
*
|
||||
* Affiche les étapes/pages d'un formulaire
|
||||
*
|
||||
* Template : wcs/front/formdata_steps.html
|
||||
*
|
||||
* $form-sidebar-position define Steps orientation
|
||||
*
|
||||
*/
|
||||
|
||||
//
|
||||
// Config
|
||||
//
|
||||
|
||||
// Steps Bloc
|
||||
$wcs-steps-background: transparent !default;
|
||||
$wcs-steps-spacing: 0.35rem !default; // half of default 0.7rem used in publik
|
||||
|
||||
// Step
|
||||
$wcs-step-color: #868686 !default; // color for default marker & label
|
||||
$wcs-step-current-color: $primary-color !default;
|
||||
$wcs-step-background: transparent !default;
|
||||
$wcs-step-current-background: $wcs-step-background !default;
|
||||
$wcs-step-border-bottom: 1px solid $wcs-step-color !default;
|
||||
$wcs-step-current-border-bottom: 3px solid $wcs-step-current-color !default;
|
||||
@if ($wcs-step-border-bottom == none) {
|
||||
$wcs-step-current-border-bottom: none;
|
||||
}
|
||||
// Step option
|
||||
$wsc-step-before-piled: false !default;
|
||||
|
||||
// marker
|
||||
$wcs-step-marker-color: $wcs-step-color !default;
|
||||
$wcs-step-current-marker-color: $wcs-step-current-color !default;
|
||||
$wcs-step-marker-background: $wcs-step-background !default;
|
||||
$wcs-step-current-marker-background: $wcs-step-current-background !default;
|
||||
// marker options
|
||||
$wcs-step-marker-size: 2.1em !default;
|
||||
$wcs-step-current-marker-enlarge: 1 !default;
|
||||
$wcs-step-marker-type: square !default; // square || tied || disc || disc tied
|
||||
$wcs-step-marker-tie-color: $wcs-step-color !default;
|
||||
$wcs-step-marker-tie-width: 5px !default;
|
||||
$wcs-step-marker-background-type: solid !default;
|
||||
|
||||
// Label
|
||||
$wcs-step-current-label-color: $wcs-step-current-color !default;
|
||||
|
||||
// Breakpoints between small & horizontal layout
|
||||
$wcs-steps-small-layout-limit: $very-small-limit !default;
|
||||
|
||||
// UTILS for custom code
|
||||
// media queries between small & horizontal layout
|
||||
$mq-max--wcs-steps-small-layout: "max-width: #{$wcs-steps-small-layout-limit}";
|
||||
$mq-min--wcs-steps-horizontal-layout: "min-width: #{$wcs-steps-small-layout-limit+1}";
|
||||
// Desktop Steps orientation sass mixins
|
||||
// Steps orientations depend on media-queries & $form-sidebar-position
|
||||
@mixin desktop-horizontal-steps() {
|
||||
@if ($form-sidebar-position == top) {
|
||||
@media (min-width: $mobile-limit + 1) {
|
||||
@content;
|
||||
}
|
||||
}
|
||||
}
|
||||
@mixin desktop-vertical-steps() {
|
||||
@if ($form-sidebar-position == left or $form-sidebar-position == right) {
|
||||
@media (min-width: $mobile-limit + 1) {
|
||||
@content;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
/*
|
||||
* Default Steps (with SQUARES markers)
|
||||
*/
|
||||
|
||||
/* Steps bloc */
|
||||
.wcs-steps {
|
||||
background: $wcs-steps-background;
|
||||
margin-bottom: 0.7rem;
|
||||
border-radius: $border-radius;
|
||||
|
||||
@if $wcs-steps-background != transparent {
|
||||
padding: $wcs-steps-spacing;
|
||||
}
|
||||
|
||||
// hide injected h2
|
||||
h2 {
|
||||
display: none;
|
||||
}
|
||||
|
||||
// hide if only one step
|
||||
&.steps-1 {
|
||||
display: none;
|
||||
}
|
||||
|
||||
&--list {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
list-style: none;
|
||||
color: $wcs-step-color;
|
||||
}
|
||||
}
|
||||
|
||||
/* Step item */
|
||||
.wcs-step {
|
||||
border-radius: $border-radius;
|
||||
background-color: $wcs-step-background;
|
||||
display: -ms-flexbox;
|
||||
display: flex;
|
||||
|
||||
&--marker {
|
||||
// marker is abbr tag
|
||||
text-decoration: none;
|
||||
box-sizing: border-box;
|
||||
|
||||
font-size: 1em;
|
||||
text-align: center;
|
||||
|
||||
display: -ms-flexbox;
|
||||
display: flex;
|
||||
|
||||
color: $wcs-step-marker-color;
|
||||
background: $wcs-step-marker-background;
|
||||
border-radius: $border-radius;
|
||||
|
||||
width: $wcs-step-marker-size;
|
||||
height: $wcs-step-marker-size;
|
||||
-ms-flex: 0 0 $wcs-step-marker-size;
|
||||
flex: 0 0 $wcs-step-marker-size;
|
||||
|
||||
&-nb {
|
||||
margin: auto;
|
||||
}
|
||||
|
||||
&-total {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
&--label {
|
||||
display: block;
|
||||
-ms-grid-row-align: center;
|
||||
align-self: center;
|
||||
letter-spacing: 1px;
|
||||
line-height: 1.25;
|
||||
}
|
||||
|
||||
|
||||
// If step is current
|
||||
&.current {
|
||||
font-weight: bold;
|
||||
background: $wcs-step-current-background;
|
||||
}
|
||||
|
||||
&.current & {
|
||||
&--marker {
|
||||
background: $wcs-step-current-marker-background;
|
||||
color: $wcs-step-current-marker-color;
|
||||
@if ($wcs-step-current-marker-enlarge != 1) {
|
||||
transform: scale($wcs-step-current-marker-enlarge);
|
||||
}
|
||||
}
|
||||
&--label {
|
||||
color: $wcs-step-current-label-color;
|
||||
}
|
||||
}
|
||||
|
||||
// If step is NOT current
|
||||
&:not(.current) & {
|
||||
&--label {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* Sidebar on TOP, SMALL LAYOUT (very-small viewport)
|
||||
* Display only current step with nb and total in marker
|
||||
*/
|
||||
@media ($mq-max--wcs-steps-small-layout) {
|
||||
.wcs-step {
|
||||
@if ($wcs-step-background != transparent or $wcs-step-current-background != transparent) {
|
||||
padding: $wcs-steps-spacing;
|
||||
}
|
||||
|
||||
&--marker {
|
||||
|
||||
$size: $wcs-step-marker-size + 0.8;
|
||||
|
||||
width: $size;
|
||||
height: $size;
|
||||
-ms-flex: 0 0 auto;
|
||||
flex: 0 0 auto;
|
||||
-ms-flex-align: center;
|
||||
align-items: center;
|
||||
-ms-flex-pack: center;
|
||||
justify-content: center;
|
||||
|
||||
&-nb {
|
||||
margin: 0;
|
||||
transform: translateY(-0.5em);
|
||||
-ms-flex-order: 1;
|
||||
order: 1;
|
||||
}
|
||||
|
||||
&-total {
|
||||
display: block;
|
||||
transform: translateY(0.5em);
|
||||
font-size: 0.75em;
|
||||
font-weight: normal;
|
||||
-ms-flex-order: 3;
|
||||
order: 3;
|
||||
}
|
||||
|
||||
// add slash
|
||||
&::before {
|
||||
content: "";
|
||||
display: block;
|
||||
-ms-flex: 0 0 0.1em;
|
||||
flex: 0 0 0.1em;
|
||||
height: 2em;
|
||||
margin: 0 0.1em;
|
||||
background: currentColor;
|
||||
transform: rotate(30deg);
|
||||
-ms-flex-order: 2;
|
||||
order: 2;
|
||||
}
|
||||
}
|
||||
|
||||
&--label {
|
||||
margin-left: $wcs-steps-spacing*2;
|
||||
}
|
||||
|
||||
// If step is NOT current
|
||||
&:not(.current) {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* Horizontal Layout
|
||||
* Sidebar on TOP, SMALL and more viewport
|
||||
* Diplay all marker, but only current Label
|
||||
*/
|
||||
@media ($mq-min--wcs-steps-horizontal-layout) {
|
||||
|
||||
.wcs-steps {
|
||||
&--list {
|
||||
position: relative;
|
||||
display: -ms-flexbox;
|
||||
display: flex;
|
||||
-ms-flex-wrap: wrap;
|
||||
flex-wrap: wrap;
|
||||
|
||||
// keep space for label
|
||||
margin-bottom: 2em;
|
||||
}
|
||||
}
|
||||
|
||||
.wcs-step {
|
||||
margin-bottom: $wcs-steps-spacing;
|
||||
margin-right: $wcs-steps-spacing*2;
|
||||
border-bottom: $wcs-step-border-bottom;
|
||||
&:last-child {
|
||||
margin-right: 0;
|
||||
}
|
||||
|
||||
&--label {
|
||||
position: absolute;
|
||||
top: 100%;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
padding-bottom: $wcs-steps-spacing;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
&.current {
|
||||
border-bottom: $wcs-step-current-border-bottom;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
|
||||
|
||||
@include desktop-horizontal-steps() {
|
||||
.wcs-steps {
|
||||
font-size: 1.25em;
|
||||
&--list {
|
||||
justify-content: center;
|
||||
}
|
||||
}
|
||||
.wcs-step {
|
||||
margin-bottom: $wcs-steps-spacing*3;
|
||||
margin-right: $wcs-steps-spacing*3;
|
||||
&--label {
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* Vertical Steps
|
||||
* Sidebar on LEFT or RIGHT, DESKTOP only
|
||||
* Display All steps with marker and label. One below the other.
|
||||
*/
|
||||
@include desktop-vertical-steps() {
|
||||
.wcs-steps {
|
||||
font-size: 1.25em;
|
||||
|
||||
// display even if only one step
|
||||
&.steps-1 {
|
||||
display: block;
|
||||
}
|
||||
|
||||
&--list {
|
||||
-ms-flex-wrap: nowrap;
|
||||
flex-wrap: nowrap;
|
||||
-ms-flex-direction: column;
|
||||
flex-direction: column;
|
||||
// remove keep space for label
|
||||
padding-bottom: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.wcs-step {
|
||||
margin-bottom: $wcs-steps-spacing;
|
||||
|
||||
@if $wcs-step-border-bottom != none {
|
||||
padding-bottom: $wcs-steps-spacing;
|
||||
}
|
||||
@if ($wcs-step-background != transparent or $wcs-step-current-background != transparent) {
|
||||
padding: $wcs-steps-spacing;
|
||||
}
|
||||
|
||||
margin-right: 0;
|
||||
|
||||
&--label {
|
||||
position: static;
|
||||
font-size: 0.7em;
|
||||
margin-left: $wcs-steps-spacing;
|
||||
padding-bottom: 0;
|
||||
}
|
||||
|
||||
// If step is NOT current
|
||||
&:not(.current) & {
|
||||
&--label {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
/*
|
||||
* OPTION marker-background-type: gradient.
|
||||
* Generate automatically a gradient based on background-color
|
||||
*/
|
||||
|
||||
@if $wcs-step-marker-background-type == gradient {
|
||||
.wcs-step {
|
||||
&--marker {
|
||||
background-attachment: fixed;
|
||||
@media (min-width: $very-small-limit + 1) {
|
||||
background-image: linear-gradient(to right, lighten($wcs-step-marker-background, 10%), darken($wcs-step-marker-background, 10%));
|
||||
}
|
||||
|
||||
@include desktop-vertical-steps() {
|
||||
background-image: linear-gradient(to bottom, lighten($wcs-step_marker-background, 10%), darken($wcs-step_marker-background, 10%));
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/*
|
||||
* OPTION Pile Step Before
|
||||
* Work only for
|
||||
* * horizontal mode: desktop breakpoint and sidebar on left or right
|
||||
* * with background-color on step
|
||||
*/
|
||||
@if ($wsc-step-before-piled ) {
|
||||
@include desktop-vertical-steps() {
|
||||
.wcs-step {
|
||||
&:not(:first-child) {
|
||||
&.step-before,
|
||||
&.current {
|
||||
box-shadow: 0 -4px 4px -4px darken($wcs-step-background, 40%);
|
||||
}
|
||||
}
|
||||
|
||||
&.step-before,
|
||||
&.current {
|
||||
z-index: 1;
|
||||
transition: margin 400ms, box-shadow 400ms;
|
||||
}
|
||||
|
||||
&.step-before {
|
||||
margin-bottom: calc( (#{$wcs-step-marker-size} + #{$wcs-steps-spacing * 2}) / 2 * -1);
|
||||
|
||||
&:hover {
|
||||
margin-bottom: $wcs-steps-spacing;
|
||||
|
||||
& + .wcs-step {
|
||||
box-shadow: 0 0 0 0 darken($wcs-step-background, 40%);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
/*
|
||||
* OPTION marker type DISC
|
||||
*/
|
||||
@if (str-index(quote($wcs-step-marker-type), 'disc')) {
|
||||
.wcs-step {
|
||||
&--marker {
|
||||
border-radius: 50% !important;
|
||||
|
||||
@media ($mq-max--wcs-steps-small-layout) {
|
||||
$size: $wcs-step-marker-size + 1.4;
|
||||
width: $size;
|
||||
height: $size;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/*
|
||||
* OPTION marker type TIED
|
||||
*/
|
||||
@if (str-index(quote($wcs-step-marker-type), 'tied')) {
|
||||
|
||||
.wcs-step {
|
||||
&:not(:last-child) {
|
||||
@media ($mq-min--wcs-steps-horizontal-layout) {
|
||||
&::after {
|
||||
content: "";
|
||||
display: block;
|
||||
height: $wcs-step-marker-tie-width;
|
||||
-ms-flex: 0 0 calc(100% + #{$wcs-steps-spacing});
|
||||
flex: 0 0 calc(100% + #{$wcs-steps-spacing});
|
||||
background-color: $wcs-step-marker-tie-color;
|
||||
margin: auto;
|
||||
}
|
||||
}
|
||||
|
||||
@include desktop-vertical-steps() {
|
||||
position: relative;
|
||||
|
||||
&::after {
|
||||
height: calc(100% + #{$wcs-steps-spacing});
|
||||
width: $wcs-step-marker-tie-width;
|
||||
|
||||
position: absolute;
|
||||
z-index: 1;
|
||||
top: $wcs-steps-spacing;
|
||||
left: calc( (#{$wcs-step-marker-size} - #{$wcs-step-marker-tie-width}) / 2 );
|
||||
|
||||
@if $wcs-step-background != transparent {
|
||||
left: calc( (#{$wcs-step-marker-size} - #{$wcs-step-marker-tie-width}) / 2 + #{$wcs-steps-spacing});
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&--marker {
|
||||
position: relative;
|
||||
z-index: 2;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -49,7 +49,7 @@
|
|||
</div>
|
||||
|
||||
<div id="page" {% block page-args %}{% endblock %}>
|
||||
<header role="banner">
|
||||
<header role="banner" class="site-header">
|
||||
<div id="header-wrapper" >
|
||||
{% block header-pre %}{% endblock %}
|
||||
<div id="header">
|
||||
|
|
|
|||
|
|
@ -0,0 +1,30 @@
|
|||
<header id="steps" class="wcs-steps steps-{{page_labels|length}}">
|
||||
<ol class="wcs-steps--list">
|
||||
{% for page_label in page_labels %}
|
||||
{% spaceless %}
|
||||
<li {% if forloop.counter != current_page_no %}aria-hidden="true"{% endif %}
|
||||
class="wcs-step
|
||||
{% 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 %}" >
|
||||
<abbr
|
||||
{% if forloop.counter == current_page_no %}
|
||||
aria-label="Étape {{ forloop.counter }} sur {{ page_labels|length }}:"
|
||||
title="Étape {{ forloop.counter }} sur {{ page_labels|length }}"
|
||||
{% endif %}
|
||||
class="marker wcs-step--marker">
|
||||
<span class="wcs-step--marker-nb">
|
||||
{{ forloop.counter }}
|
||||
</span>
|
||||
<span class="wcs-step--marker-total">
|
||||
{{ page_labels|length }}
|
||||
</span>
|
||||
</abbr>
|
||||
<span class="label wcs-step--label">{{ page_label }}</span>
|
||||
</li>
|
||||
{% endspaceless %}
|
||||
{% endfor %}
|
||||
</ol>
|
||||
</header>
|
||||
Loading…
Reference in New Issue