Development #41298
$wcs-steps-spacing concerne aussi bien l'horizontal que le vertical
0%
Description
J'aimerais bien pouvoir augmenter l'espace vertical entre les étapes mais ne pas toucher à l'espace horizontal.
Fichiers
Historique
Mis à jour par Thomas Jund (congés, retour le 29/04) il y a environ 4 ans
Je ne suis pas sûr d'avoir compris.
Mis à jour par Frédéric Péters il y a environ 4 ans
Les étapes étant les unes au-dessus des autres, j'aimerais augmenter l'espace entre les étapes.
$wcs-steps-spacing me semble être la variable contrôlant ça.
Mais si je la change, ça augmente aussi l'espace entre le numéro de l'étape et son libellé. cf captures.
Côté code,
.wcs-step {
margin-bottom: $wcs-steps-spacing; <-- de l'espace entre étapes
...
&--label {
position: static;
font-size: 0.7em;
margin-left: $wcs-steps-spacing; <-- et en même temps entre le numéro et le libellé
Mis à jour par Thomas Jund (congés, retour le 29/04) il y a environ 4 ans
Ok, et oui en effet, la variable modifie tous les espaces (margin, padding) qu'ils soient horizontaux ou verticaux.
Il y a une astuce qui double visuellement l'espace entre 2 steps: ajouter un $wcs-step-background : white; qui va ajouter un padding automatiquement aux .wcs-step
Ne pas oublier que l'étape active correspond au titre de la page et qu'elle ne devrait pas se retrouver sous le fold
Sinon, il suffit de fixer une valeur pour la margin-left du label en mode vertical dans les custom.css
@include desktop-vertical-steps() {
.wcs-step--label {
margin-left: 0.5em;
}
}
Et voilà l'espace décorrélée de la variable $wcs-steps-spacing
Mis à jour par Frédéric Péters il y a environ 4 ans
Ok mais on pourrait imaginer ne pas avoir besoin d'astuce ?
Mis à jour par Thomas Jund (congés, retour le 29/04) il y a environ 4 ans
Oui bien sûr.
le margin-left du label est utilisé en layout "mobile" et en version "verticale" entre le marker et le label
Tu penses à quoi.
Une nouvelle variable ?
Ou décorréler la gestion de cette espace de $wcs-step-spacing ?