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