csechet
/
publik-base-theme
forked from entrouvert/publik-base-theme
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

scss: define border and marker colors for custom radio/checkbox (#41372)

This commit is contained in:
Serghei Mihai 2020-04-09 10:29:34 +02:00
parent c542424a0c
commit 1bb1d77643
2 changed files with 20 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -515,10 +515,22 @@ paramètre, la deuxième sa description et la troisième la valeur par défaut.
</tr>
<tr>
<td><p><code>$widget-custom-radio-checkbox-color</code></p></td>
<td><p>Couleur des cases à cocher et boutons radios quand leur rendu est
personnalisé.</p></td>
<td><p>Couleur des cases à cocher et boutons radios (bordure et marqueur)
quand leur rendu est personnalisé.</p></td>
<td><p><var>$button-background</var></p></td>
</tr>
<tr>
<td><p><code>$widget-custom-radio-checkbox-border-color</code></p></td>
<td><p>Couleur de la bordure des cases à cocher et boutons radios
quand leur rendu est personnalisé.</p></td>
<td><p><var>$widget-custom-radio-checkbox-color</var></p></td>
</tr>
<tr>
<td><p><code>$widget-custom-radio-checkbox-marker-color</code></p></td>
<td><p>Couleur du marqueur des cases à cocher et des boutons radios
cochés quand leur rendu est personnalisé.</p></td>
<td><p><var>$widget-custom-radio-checkbox-color</var></p></td>
</tr>
<tr>
<td><p><code>$widget-unique-checkbox-position</code></p></td>
<td><p>Positionnement de la case à cocher d'un champ de type « Case à

10
static/includes/_forms.scss
View File

@ -24,6 +24,8 @@ $button-focus-outline-offset: $widget-focus-outline-offset !default;
$widget-custom-radio-checkbox: false !default;
$widget-custom-radio-checkbox-color: $button-background !default;
$widget-custom-radio-checkbox-border-color: $widget-custom-radio-checkbox-color !default;
$widget-custom-radio-checkbox-marker-color: $widget-custom-radio-checkbox-color !default;
$widget-unique-checkbox-position: bottom !default; // also possible: left
// $form-style: global style of form elements; possible values are:
@ -414,7 +416,7 @@ div.select2-search {
background: transparent;
top: 0.33rem;
left: 0;
border: 1px solid $widget-custom-radio-checkbox-color;
border: 1px solid $widget-custom-radio-checkbox-border-color;
}
&::after {
display: block;
@ -430,10 +432,10 @@ div.select2-search {
}
}
&:checked + span::after {
background: $widget-custom-radio-checkbox-color;
background: $widget-custom-radio-checkbox-marker-color;
}
&[disabled]:checked + span::after {
background: grayscale($widget-custom-radio-checkbox-color);
background: grayscale($widget-custom-radio-checkbox-marker-color);
}
&:focus + span {
@ -455,7 +457,7 @@ div.select2-search {
&::before {
top: calc(0.33rem - 4px);
left: -4px;
border: 5px solid $widget-custom-radio-checkbox-color;
border: 5px solid $widget-custom-radio-checkbox-border-color;
opacity: 0.5;
}
}