Project

General

Profile

Development #41298

$wcs-steps-spacing concerne aussi bien l'horizontal que le vertical

Added by Frédéric Péters almost 3 years ago. Updated almost 3 years ago.

Status:
Nouveau
Priority:
Normal
Assignee:
-
Target version:
-
Start date:
03 April 2020
Due date:
% Done:

0%

Estimated time:
Patch proposed:
No
Planning:
No

Description

J'aimerais bien pouvoir augmenter l'espace vertical entre les étapes mais ne pas toucher à l'espace horizontal.


Files

3.png (3.69 KB) 3.png Frédéric Péters, 03 April 2020 02:50 PM
2.png (3.66 KB) 2.png Frédéric Péters, 03 April 2020 02:50 PM
1.png (3.64 KB) 1.png Frédéric Péters, 03 April 2020 02:50 PM

History

#1

Updated by Thomas Jund almost 3 years ago

Je ne suis pas sûr d'avoir compris.

#2

Updated by Frédéric Péters almost 3 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é
#3

Updated by Thomas Jund almost 3 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

#4

Updated by Frédéric Péters almost 3 years ago

Ok mais on pourrait imaginer ne pas avoir besoin d'astuce ?

#5

Updated by Thomas Jund almost 3 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 ?

Also available in: Atom PDF