entrouvert
/
publik-base-theme
15
1
Fork 1
Code Issues Pull Requests 12 Releases Wiki Activity

scss: add option to display icons in forms buttons (#74954)

This commit is contained in:
Serghei Mihai 2023-03-14 16:27:05 +01:00
parent 357e0a381c
commit b086575235
2 changed files with 47 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
help/fr/misc-scss.page
View File

@ -665,6 +665,12 @@ paramètre, la deuxième sa description et la troisième la valeur par défaut.
</td>
<td><p><var>null</var></p></td>
</tr>
<tr>
<td><p><code>$buttons-with-icons</code></p></td>
<td><p>Ajoute des icônes aux boutons des formulaires des demandes.</p>
</td>
<td><p><var>false</var></p></td>
</tr>
<tr>
<td><p><code>$timetable-cell-background</code></p></td>
<td><p>Couleur de fond des créneaux horaires.</p>

41
static/includes/_forms.scss
View File

@ -45,7 +45,11 @@ $form-style: classic !default;
// 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;
$buttons-with-icons: false !default;
$submit-button-icon: '\f105' !default; /* angle right */
$previous-button-icon: '\f104' !default; /* angle left */
$cancel-button-icon: '\f00d' !default; /* remove icon */
%custom-radio-checkbox-widget {
label {
@ -652,6 +656,43 @@ div.select2-search {
}
}
// Buttons with icons
.submit-button-with-icon {
&::after {
font-family: FontAwesome;
content: $submit-button-icon;
margin-left: 0.5em;
}
}
.previous-button-with-icon {
&::before {
font-family: FontAwesome;
content: $previous-button-icon;
margin-right: 0.5em;
}
}
.cancel-button-with-icon {
&::before {
font-family: FontAwesome;
content: $cancel-button-icon;
margin-right: 0.5em;
}
}
@if $buttons-with-icons {
.quixote:not(#wf-actions) div.buttons {
@each $btn in (submit, previous, cancel) {
.#{$btn}-button button {
@extend .#{$btn}-button-with-icon;
}
}
}
}
// Buttons order & alignment configuration
@if $buttons-order or $buttons-alignment {
.quixote:not(#wf-actions) div.buttons {