diff --git a/help/fr/misc-scss.page b/help/fr/misc-scss.page
index ecba41c1..60cfa71d 100644
--- a/help/fr/misc-scss.page
+++ b/help/fr/misc-scss.page
@@ -526,6 +526,18 @@ paramètre, la deuxième sa description et la troisième la valeur par défaut.
libellé.
bottom |
+
+ $buttons-order
|
+ Ordre particulier des boutons. Indiquer les boutons (submit ,cancel , previous ) dans l'ordre souhaité séparé par des vigules. Ajouter l'option (grow) après l'identifiant d'un bouton va pousser le⋅s bouton⋅s suivant⋅s sur la droite (ex: previous, cancel (grow), submit ).
+ |
+ null |
+
+
+ $buttons-alignment
|
+ Alignement des boutons. Toutes valeurs CSS de justify-content
+ |
+ null |
+
diff --git a/static/includes/_forms.scss b/static/includes/_forms.scss
index f59c88dd..dc7e4c7f 100644
--- a/static/includes/_forms.scss
+++ b/static/includes/_forms.scss
@@ -31,6 +31,15 @@ $widget-unique-checkbox-position: bottom !default; // also possible: left
// light: light bottom border, no other border.
$form-style: classic !default;
+// buttons orders and alignment
+// work only for wcs forms
+// order :
+// 3 buttons : submit (form validation or next page), cancel, previous;
+// put button in the desired order (ex: previous, submit, cancel);
+// optionnal (grow) option to move next button to right (ex: cancel (grow), previous, submit);
+$buttons-order: null !default;
+$buttons-alignment: null !default; // any flexbox justify-content value;
+
input, select, button, textarea {
font-size: 100%;
font-family: $font-family;
@@ -533,3 +542,35 @@ div.select2-search {
}
}
}
+
+// Buttons order & alignment configuration
+@if $buttons-order or $buttons-alignment {
+ div.buttons {
+ display: -ms-flexbox;
+ display: flex;
+ -ms-flex-wrap: wrap;
+ flex-wrap: wrap;
+ -ms-flex-pack: $buttons-alignment;
+ justify-content: $buttons-alignment;
+
+ @each $btn, $grow in $buttons-order {
+ $i: index($buttons-order, $btn);
+ @if $grow {
+ $i: index($buttons-order, $btn $grow);
+ }
+
+ .#{$btn}-button {
+ -ms-flex-order: $i;
+ order: $i;
+ @if ($grow == 'grow') {
+ -ms-flex-positive: 1;
+ flex-grow: 1;
+ }
+ }
+ }
+ // always hidden, exclude to flex-child
+ .savedraft-button {
+ display: none;
+ }
+ }
+}