Project

General

Profile

Development #41298

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

Added by Frédéric Péters about 2 months ago. Updated about 2 months ago.

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

0%

Patch proposed:
No
Planning:
No

Description

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

3.png View (3.69 KB) Frédéric Péters, 03 Apr 2020 02:50 PM

2.png View (3.66 KB) Frédéric Péters, 03 Apr 2020 02:50 PM

1.png View (3.64 KB) Frédéric Péters, 03 Apr 2020 02:50 PM

43014
43015
43016

History

#1 Updated by Thomas Jund about 2 months ago

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

#2 Updated by Frédéric Péters about 2 months ago

43014
43015
43016

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 about 2 months 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 about 2 months ago

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

#5 Updated by Thomas Jund about 2 months 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