From 00e527230a426d8288ca23b56ec26daa0c1a120c Mon Sep 17 00:00:00 2001
From: Thomas JUND <tjund@entrouvert.com>
Date: Fri, 15 Nov 2019 13:47:01 +0100
Subject: [PATCH] help: write steps doc (#36765)

---
 help/fr/misc-scss.page | 155 +++++++++++++++++++++++++++++++++++++++++
 1 file changed, 155 insertions(+)

diff --git a/help/fr/misc-scss.page b/help/fr/misc-scss.page
index 4757a820..6aaf5b8f 100644
--- a/help/fr/misc-scss.page
+++ b/help/fr/misc-scss.page
@@ -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>$bq-max--wcs-steps-small-layout</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>
 
-- 
2.20.1

