0001-scss-add-support-for-custom-CSS-rendered-checkbox-an.patch
| help/fr/misc-scss.page | ||
|---|---|---|
| 382 | 382 |
<td><p>Taille de l'arrondi à appliquer aux champs de formulaire (texte, liste…)</p></td> |
| 383 | 383 |
<td><p><var>0</var></p></td> |
| 384 | 384 |
</tr> |
| 385 |
<tr> |
|
| 386 |
<td><p><code>$widget-custom-radio-checkbox</code></p></td> |
|
| 387 |
<td><p>Rendu personnalisé des cases à cocher et des boutons radios (plutôt |
|
| 388 |
que le rendu standard proposé par le navigateur).</p></td> |
|
| 389 |
<td><p><var>false</var></p></td> |
|
| 390 |
</tr> |
|
| 391 |
<tr> |
|
| 392 |
<td><p><code>$widget-custom-radio-checkbox-color</code></p></td> |
|
| 393 |
<td><p>Couleur des cases à cocher et boutons radios quand leur rendu est |
|
| 394 |
personnalisé.</p></td> |
|
| 395 |
<td><p><var>$button-background</var></p></td> |
|
| 396 |
</tr> |
|
| 385 | 397 |
</table> |
| 386 | 398 |
</section> |
| 387 | 399 | |
| static/includes/_forms.scss | ||
|---|---|---|
| 14 | 14 |
$widget-focus-background: inherit !default; |
| 15 | 15 |
$widget-focus-border: 1px solid #AAA !default; |
| 16 | 16 | |
| 17 |
$widget-custom-radio-checkbox: false !default; |
|
| 18 |
$widget-custom-radio-checkbox-color: $button-background !default; |
|
| 19 | ||
| 17 | 20 |
/* $form-style: global style of form elements; possible values |
| 18 | 21 |
* are: |
| 19 | 22 |
* classic: nothing special. |
| ... | ... | |
| 265 | 268 |
margin-top: 4px; |
| 266 | 269 |
} |
| 267 | 270 | |
| 271 |
@if $widget-custom-radio-checkbox == true {
|
|
| 272 |
.CheckboxWidget, |
|
| 273 |
.CheckboxesWidget, |
|
| 274 |
.RadiobuttonsWidget {
|
|
| 275 |
label {
|
|
| 276 |
position: relative; |
|
| 277 |
} |
|
| 278 |
input {
|
|
| 279 |
position: absolute; |
|
| 280 |
opacity: 0; |
|
| 281 |
+ span {
|
|
| 282 |
padding-left: 1.2rem; |
|
| 283 |
&::before {
|
|
| 284 |
display: block; |
|
| 285 |
content: ''; |
|
| 286 |
position: absolute; |
|
| 287 |
margin: auto; |
|
| 288 |
height: 0.66rem; |
|
| 289 |
width: 0.66rem; |
|
| 290 |
background: transparent; |
|
| 291 |
top: 0.33rem; |
|
| 292 |
border: 1px solid $widget-custom-radio-checkbox-color; |
|
| 293 |
} |
|
| 294 |
&::after {
|
|
| 295 |
display: block; |
|
| 296 |
content: ''; |
|
| 297 |
position: absolute; |
|
| 298 |
margin: auto; |
|
| 299 |
height: calc(0.66rem - 2px); |
|
| 300 |
width: calc(0.66rem - 2px); |
|
| 301 |
background: transparent; |
|
| 302 |
transition: background 0.2s linear; |
|
| 303 |
top: calc(0.33rem + 2px); |
|
| 304 |
left: 2px; |
|
| 305 |
} |
|
| 306 |
} |
|
| 307 | ||
| 308 |
&:checked + span::after {
|
|
| 309 |
background: $widget-custom-radio-checkbox-color; |
|
| 310 |
} |
|
| 311 |
&[disabled]:checked + span::after {
|
|
| 312 |
background: grayscale($widget-custom-radio-checkbox-color); |
|
| 313 |
} |
|
| 314 | ||
| 315 |
&:focus + span {
|
|
| 316 |
outline: 1px dotted $widget-custom-radio-checkbox-color; |
|
| 317 |
} |
|
| 318 |
} |
|
| 319 |
} |
|
| 320 | ||
| 321 |
.CheckboxWidget {
|
|
| 322 |
div.content {
|
|
| 323 |
position: relative; |
|
| 324 |
} |
|
| 325 |
} |
|
| 326 | ||
| 327 |
.RadiobuttonsWidget {
|
|
| 328 |
input + span {
|
|
| 329 |
&::before {
|
|
| 330 |
border-radius: 6px; |
|
| 331 |
} |
|
| 332 |
&::after {
|
|
| 333 |
border-radius: 5px; |
|
| 334 |
} |
|
| 335 |
} |
|
| 336 |
} |
|
| 337 |
} |
|
| 268 | 338 | |
| 269 | 339 |
@if $form-style == light {
|
| 270 | 340 |
form p label, |
| 271 |
- |
|