scss: forms: add order & alignment options for buttons (#31397)
This commit is contained in:
parent
925bea69ba
commit
8ac68d5fb9
|
@ -526,6 +526,18 @@ paramètre, la deuxième sa description et la troisième la valeur par défaut.
|
|||
libellé.</p></td>
|
||||
<td><p><var>bottom</var></p></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><p><code>$buttons-order</code></p></td>
|
||||
<td><p>Ordre particulier des boutons. Indiquer les boutons (<code>submit</code>,<code>cancel</code>, <code>previous</code>) dans l'ordre souhaité séparé par des vigules. Ajouter l'option <code>(grow)</code> après l'identifiant d'un bouton va pousser le⋅s bouton⋅s suivant⋅s sur la droite (ex: <code>previous, cancel (grow), submit</code>).</p>
|
||||
</td>
|
||||
<td><p><var>null</var></p></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><p><code>$buttons-alignment</code></p></td>
|
||||
<td><p>Alignement des boutons. Toutes valeurs CSS de <code>justify-content</code></p>
|
||||
</td>
|
||||
<td><p><var>null</var></p></td>
|
||||
</tr>
|
||||
</table>
|
||||
</section>
|
||||
|
||||
|
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
Loading…
Reference in New Issue