519 |
519 |
</table>
|
520 |
520 |
</section>
|
521 |
521 |
|
|
522 |
<section>
|
|
523 |
<title>Bloc étapes d'une démarche</title>
|
|
524 |
|
|
525 |
<p>
|
|
526 |
Ces paramètres contrôlent le rendu du bloc présentant les étapes ou pages d'une démarche.
|
|
527 |
</p>
|
|
528 |
<p>
|
|
529 |
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 :
|
|
530 |
</p>
|
|
531 |
<ul>
|
|
532 |
<li><em>rendu mobile :</em> seul l'étape courante est affichée avec une indication du nombre totale d'étapes ;</li>
|
|
533 |
<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>
|
|
534 |
<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>.
|
|
535 |
</ul>
|
|
536 |
<p>
|
|
537 |
Plusieurs options sont également disponibles pour gérer le rendu du <em>marqueur d'étape</em> (chiffre).
|
|
538 |
</p>
|
|
539 |
|
|
540 |
<table shade="row">
|
|
541 |
<tr>
|
|
542 |
<td><p><code>$wcs-steps-background</code></p></td>
|
|
543 |
<td><p>Couleur de fond du bloc</p></td>
|
|
544 |
<td><var>transparent</var></td>
|
|
545 |
</tr>
|
|
546 |
<tr>
|
|
547 |
<td><p><code>$wcs-steps-spacing</code></p></td>
|
|
548 |
<td>
|
|
549 |
<p>Fixe la taille des espacements entre les différents blocs, mais également entre les marqueurs chiffres et leur label</p>
|
|
550 |
</td>
|
|
551 |
<td><var>0.35rem</var></td>
|
|
552 |
</tr>
|
|
553 |
<tr>
|
|
554 |
<td><p><code>$wcs-step-color</code></p></td>
|
|
555 |
<td><p>Couleur du texte des étapes non courantes</p></td>
|
|
556 |
<td><var>#868686</var></td>
|
|
557 |
</tr>
|
|
558 |
<tr>
|
|
559 |
<td><p><code>$wcs-step-current-color</code></p></td>
|
|
560 |
<td><p>Couleur du texte de l'étape courantes</p></td>
|
|
561 |
<td><var>$primary-color</var></td>
|
|
562 |
</tr>
|
|
563 |
<tr>
|
|
564 |
<td><p><code>$wcs-step-background</code></p></td>
|
|
565 |
<td><p>Couleur de fond des étapes</p></td>
|
|
566 |
<td><var>transparent</var></td>
|
|
567 |
</tr>
|
|
568 |
<tr>
|
|
569 |
<td><p><code>$wcs-step-current-background</code></p></td>
|
|
570 |
<td><p>Couleur de fond de l'étape courante</p></td>
|
|
571 |
<td><var>$wcs-step-background</var></td>
|
|
572 |
</tr>
|
|
573 |
<tr>
|
|
574 |
<td><p><code>$wcs-step-border-bottom</code></p></td>
|
|
575 |
<td>
|
|
576 |
<p>
|
|
577 |
Épaisseur et couleur du filet qui sépare les étapes en mode vertical et du filet présent sous les marqueurs en mode horizontal. <br>
|
|
578 |
la valeur <var>none</var> supprimera les filets.
|
|
579 |
</p>
|
|
580 |
</td>
|
|
581 |
<td><var>1px solid $wcs-step-color</var></td>
|
|
582 |
</tr>
|
|
583 |
<tr>
|
|
584 |
<td><p><code>$wcs-step-current-border-bottom</code></p></td>
|
|
585 |
<td>
|
|
586 |
<p>
|
|
587 |
Épaisseur et couleur du filet de l'étape courante. <br>
|
|
588 |
Si <code>$wcs-step-border-bottom</code> est à <var>none</var>, ce filet sera automatiquement <var>none</var> également.
|
|
589 |
</p>
|
|
590 |
</td>
|
|
591 |
<td><var>3px solid $wcs-step-current-color</var></td>
|
|
592 |
</tr>
|
|
593 |
<tr>
|
|
594 |
<td><p><code>$wsc-step-before-piled</code></p></td>
|
|
595 |
<td>
|
|
596 |
<p>
|
|
597 |
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>. <br>
|
|
598 |
Avec la valeur <var>true</var>, elle va superposer les étapes passée les unes sur les autres pour gagner de la place.
|
|
599 |
</p>
|
|
600 |
</td>
|
|
601 |
<td><var>false</var></td>
|
|
602 |
</tr>
|
|
603 |
<tr>
|
|
604 |
<td><p><code>$wcs-step-marker-color</code></p></td>
|
|
605 |
<td><p>Couleur du chiffre des marqueurs d'étapes non courantes</p></td>
|
|
606 |
<td><var>$wcs-step-color</var></td>
|
|
607 |
</tr>
|
|
608 |
<tr>
|
|
609 |
<td><p><code>$wcs-step-current-marker-color</code></p></td>
|
|
610 |
<td><p>Couleur du chiffre du marqueur d'étape courante</p></td>
|
|
611 |
<td><var>$wcs-step-current-color</var></td>
|
|
612 |
</tr>
|
|
613 |
<tr>
|
|
614 |
<td><p><code>$wcs-step-marker-background</code></p></td>
|
|
615 |
<td><p>Couleur de fond des marqueurs d'étapes non courantes</p></td>
|
|
616 |
<td><var>$wcs-step-background</var></td>
|
|
617 |
</tr>
|
|
618 |
<tr>
|
|
619 |
<td><p><code>$wcs-step-current-marker-background</code></p></td>
|
|
620 |
<td><p>Couleur de fond du marqueur d'étape courante</p></td>
|
|
621 |
<td><var>$wcs-step-current-background</var></td>
|
|
622 |
</tr>
|
|
623 |
<tr>
|
|
624 |
<td><p><code>$wcs-step-marker-size</code></p></td>
|
|
625 |
<td><p>Taille du marqueur. La taille du marquer n'influe pas sur la taille du chiffre</p></td>
|
|
626 |
<td><var>2.1em</var></td>
|
|
627 |
</tr>
|
|
628 |
<tr>
|
|
629 |
<td><p><code>$wcs-step-current-marker-enlarge</code></p></td>
|
|
630 |
<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>
|
|
631 |
<td><var>1</var></td>
|
|
632 |
</tr>
|
|
633 |
<tr>
|
|
634 |
<td><p><code>$wcs-step-marker-type</code></p></td>
|
|
635 |
<td>
|
|
636 |
<p>
|
|
637 |
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). <br>
|
|
638 |
Valeurs possibles: <var>tied</var>, <var>disc</var>, <var>disc tied</var>.
|
|
639 |
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>
|
|
640 |
</p>
|
|
641 |
</td>
|
|
642 |
<td><var>square</var></td>
|
|
643 |
</tr>
|
|
644 |
<tr>
|
|
645 |
<td><p><code>$wcs-step-marker-background-type</code></p></td>
|
|
646 |
<td>
|
|
647 |
<p>
|
|
648 |
Cette option ne fonctionnera que si <code>$wcs-step-marker-background</code> est une couleur pleine. <br>
|
|
649 |
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.
|
|
650 |
</p>
|
|
651 |
</td>
|
|
652 |
<td><var>solid</var></td>
|
|
653 |
</tr>
|
|
654 |
<tr>
|
|
655 |
<td><p><code>$wcs-step-current-label-color</code></p></td>
|
|
656 |
<td>
|
|
657 |
<p>
|
|
658 |
Cette option ne fonctionnera que si <code>$wcs-step-marker-background</code> est une couleur pleine. <br>
|
|
659 |
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.
|
|
660 |
</p>
|
|
661 |
</td>
|
|
662 |
</tr>
|
|
663 |
<tr>
|
|
664 |
<td><var>$wcs-step-current-color</var></td>
|
|
665 |
<td><p>Couleur du label de l'étape courante</p></td>
|
|
666 |
<td><var>solid</var></td>
|
|
667 |
</tr>
|
|
668 |
<tr>
|
|
669 |
<td><code>$bq-max--wcs-steps-small-layout</code></td>
|
|
670 |
<td><p>Fixe la valeur du point de rupture entre le rendu mobile et horizontal</p></td>
|
|
671 |
<td><var>$very-small-limit</var></td>
|
|
672 |
</tr>
|
|
673 |
</table>
|
|
674 |
</section>
|
|
675 |
|
522 |
676 |
<section>
|
523 |
677 |
<title>Cellules</title>
|
524 |
678 |
|
525 |
|
-
|