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.
Files
History
Updated by Frédéric Péters over 4 years ago
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é
Updated by Thomas Jund over 4 years ago
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
Updated by Frédéric Péters over 4 years ago
Ok mais on pourrait imaginer ne pas avoir besoin d'astuce ?
Updated by Thomas Jund over 4 years ago
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 ?