Produits Entr'ouvert » Intégrations graphiques Publik

<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>

@import 'wcs/steps';

@import 'wcs/nearby-form';

	// move #gauche on top and tracking code after steps

/*

 *	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;

		line-height: nomal;

		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;

		&--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;

	}

	.wcs-step {

		margin-bottom: $wcs-steps-spacing*3;

		margin-right: $wcs-steps-spacing*3;

	}

}

/*	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;

		}

	}

}

    <header role="banner" class="site-header">

<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>