0001-scss-forms-add-order-alignment-options-for-buttons-3.patch
help/fr/misc-scss.page | ||
---|---|---|
526 | 526 |
libellé.</p></td> |
527 | 527 |
<td><p><var>bottom</var></p></td> |
528 | 528 |
</tr> |
529 |
<tr> |
|
530 |
<td><p><code>$buttons-order</code></p></td> |
|
531 |
<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> |
|
532 |
</td> |
|
533 |
<td><p><var>null</var></p></td> |
|
534 |
</tr> |
|
535 |
<tr> |
|
536 |
<td><p><code>$buttons-alignment</code></p></td> |
|
537 |
<td><p>Alignement des boutons. Toutes valeurs CSS de <code>justify-content</code></p> |
|
538 |
</td> |
|
539 |
<td><p><var>null</var></p></td> |
|
540 |
</tr> |
|
529 | 541 |
</table> |
530 | 542 |
</section> |
531 | 543 |
static/includes/_forms.scss | ||
---|---|---|
31 | 31 |
// light: light bottom border, no other border. |
32 | 32 |
$form-style: classic !default; |
33 | 33 | |
34 |
// buttons orders and alignment |
|
35 |
// work only for wcs forms |
|
36 |
// order : |
|
37 |
// 3 buttons : submit (form validation or next page), cancel, previous; |
|
38 |
// put button in the desired order (ex: previous, submit, cancel); |
|
39 |
// optionnal (grow) option to move next button to right (ex: cancel (grow), previous, submit); |
|
40 |
$buttons-order: null !default; |
|
41 |
$buttons-alignment: null !default; // any flexbox justify-content value; |
|
42 | ||
34 | 43 |
input, select, button, textarea { |
35 | 44 |
font-size: 100%; |
36 | 45 |
font-family: $font-family; |
... | ... | |
530 | 539 |
} |
531 | 540 |
} |
532 | 541 |
} |
542 | ||
543 |
// Buttons order & alignment configuration |
|
544 |
@if $buttons-order or $buttons-alignment { |
|
545 |
div.buttons { |
|
546 |
display: -ms-flexbox; |
|
547 |
display: flex; |
|
548 |
-ms-flex-wrap: wrap; |
|
549 |
flex-wrap: wrap; |
|
550 |
-ms-flex-pack: $buttons-alignment; |
|
551 |
justify-content: $buttons-alignment; |
|
552 | ||
553 |
@each $btn, $grow in $buttons-order { |
|
554 |
$i: index($buttons-order, $btn); |
|
555 |
@if $grow { |
|
556 |
$i: index($buttons-order, $btn $grow); |
|
557 |
} |
|
558 | ||
559 |
.#{$btn}-button { |
|
560 |
-ms-flex-order: $i; |
|
561 |
order: $i; |
|
562 |
@if ($grow == 'grow') { |
|
563 |
-ms-flex-positive: 1 |
|
564 |
flex-grow: 1; |
|
565 |
} |
|
566 |
} |
|
567 |
} |
|
568 |
// always hidden, exclude to flex-child |
|
569 |
.savedraft-button { |
|
570 |
display: none; |
|
571 |
} |
|
572 |
} |
|
573 |
} |
|
533 |
- |