0001-forms-apply-custom-styles-to-all-radio-and-checkbox-.patch
| static/dordogne-cd24/_custom.scss | ||
|---|---|---|
| 40 | 40 |
background: #fff; |
| 41 | 41 |
} |
| 42 | 42 | |
| 43 |
.custom-radio-checkbox-widget {
|
|
| 44 |
input + span {
|
|
| 45 |
padding-left: 1.75rem; |
|
| 46 |
&::before {
|
|
| 47 |
height: 1.1rem; |
|
| 48 |
width: 1.1rem; |
|
| 49 |
top: 0; |
|
| 50 |
} |
|
| 51 |
&::after {
|
|
| 52 |
left: 4px; |
|
| 53 |
top: 4px; |
|
| 54 |
width: calc(1.1rem - 8px); |
|
| 55 |
height: calc(1.1rem - 8px); |
|
| 56 |
background: rgba(194, 197, 200, 0.47); |
|
| 57 |
} |
|
| 58 |
} |
|
| 59 |
} |
|
| 60 | ||
| 43 | 61 |
@mixin after-line($color: #cbd05d) {
|
| 44 | 62 |
&::after {
|
| 45 | 63 |
display: block; |
| ... | ... | |
| 281 | 299 |
background: #fff; |
| 282 | 300 |
} |
| 283 | 301 | |
| 284 |
.RadiobuttonsWidget, .CheckboxWidget, |
|
| 285 |
.CheckboxesWidget {
|
|
| 286 |
input + span {
|
|
| 287 |
padding-left: 1.75rem; |
|
| 288 |
&::before {
|
|
| 289 |
height: 1.1rem; |
|
| 290 |
width: 1.1rem; |
|
| 291 |
top: 0; |
|
| 292 |
} |
|
| 293 |
&::after {
|
|
| 294 |
left: 4px; |
|
| 295 |
top: 4px; |
|
| 296 |
width: calc(1.1rem - 8px); |
|
| 297 |
height: calc(1.1rem - 8px); |
|
| 298 |
background: rgba(194, 197, 200, 0.47); |
|
| 299 |
} |
|
| 300 |
} |
|
| 301 |
} |
|
| 302 | 302 |
.gru-content {
|
| 303 | 303 |
div.cell, .block {
|
| 304 | 304 |
margin-bottom: 2em; |
| static/grandlyon-glc/_custom.scss | ||
|---|---|---|
| 1 | 1 |
@import '../includes/fonts/roboto'; |
| 2 | 2 | |
| 3 |
.custom-radio-checkbox-widget {
|
|
| 4 |
input + span {
|
|
| 5 |
&::before {
|
|
| 6 |
height: 15px; |
|
| 7 |
width: 15px; |
|
| 8 |
background: white; |
|
| 9 |
top: 0.15rem; |
|
| 10 |
} |
|
| 11 |
&::after {
|
|
| 12 |
width: 11px; |
|
| 13 |
height: 11px; |
|
| 14 |
top: calc(0.15rem + 2px); |
|
| 15 |
} |
|
| 16 |
padding-left: 1.5rem; |
|
| 17 |
} |
|
| 18 |
} |
|
| 19 | ||
| 3 | 20 |
a.show-scopes, a.hide-scopes {
|
| 4 | 21 |
display: block; |
| 5 | 22 |
margin: 2ex 0; |
| ... | ... | |
| 606 | 623 |
background: #fbd3d3; |
| 607 | 624 |
} |
| 608 | 625 |
} |
| 609 | ||
| 610 |
.django-checkbox-input, |
|
| 611 |
.django-radio-select, |
|
| 612 |
.CheckboxWidget, |
|
| 613 |
.CheckboxesWidget, |
|
| 614 |
.RadiobuttonsWidget {
|
|
| 615 |
input + span {
|
|
| 616 |
&::before {
|
|
| 617 |
height: 15px; |
|
| 618 |
width: 15px; |
|
| 619 |
background: white; |
|
| 620 |
top: 0.15rem; |
|
| 621 |
} |
|
| 622 |
padding-left: 1.5rem; |
|
| 623 |
} |
|
| 624 |
} |
|
| 625 | ||
| 626 |
.django-checkbox-input input + span::after, |
|
| 627 |
.django-radio-select input + span::after, |
|
| 628 |
.CheckboxWidget input + span::after, |
|
| 629 |
.CheckboxesWidget input + span::after, |
|
| 630 |
.RadiobuttonsWidget input + span::after {
|
|
| 631 |
width: 11px; |
|
| 632 |
height: 11px; |
|
| 633 |
top: calc(0.15rem + 2px); |
|
| 634 |
} |
|
| static/grenoble-metropole-2019/_custom.scss | ||
|---|---|---|
| 70 | 70 |
background-position: 10px center; |
| 71 | 71 |
} |
| 72 | 72 | |
| 73 |
.custom-radio-checkbox-widget {
|
|
| 74 |
input + span {
|
|
| 75 |
&::before {
|
|
| 76 |
height: 0.86rem; |
|
| 77 |
width: 0.86rem; |
|
| 78 |
top: 0.1rem; |
|
| 79 |
} |
|
| 80 |
&::after {
|
|
| 81 |
height: calc(0.86rem - 4px); |
|
| 82 |
width: calc(0.86rem - 4px); |
|
| 83 |
top: calc(0.1rem + 2px); |
|
| 84 |
} |
|
| 85 |
} |
|
| 86 |
} |
|
| 87 | ||
| 73 | 88 |
div#columns > div {
|
| 74 | 89 |
&.column {
|
| 75 | 90 |
width: 100%; |
| ... | ... | |
| 918 | 933 |
background-color: #e4e4e4; |
| 919 | 934 |
} |
| 920 | 935 | |
| 921 |
.CheckboxWidget, |
|
| 922 |
.CheckboxesWidget, |
|
| 923 |
.RadiobuttonsWidget {
|
|
| 924 |
label {
|
|
| 925 |
margin: 3px auto; |
|
| 926 |
display: inline-block; |
|
| 927 |
} |
|
| 928 |
input {
|
|
| 929 |
+ span {
|
|
| 930 |
&::before {
|
|
| 931 |
background: #FFFFFF; |
|
| 932 |
height: 0.86rem; |
|
| 933 |
width: 0.86rem; |
|
| 934 |
top: 0.1rem; |
|
| 935 |
} |
|
| 936 |
&::after {
|
|
| 937 |
height: calc(0.86rem - 2px); |
|
| 938 |
width: calc(0.86rem - 2px); |
|
| 939 |
top: calc(0.1rem + 2px); |
|
| 940 |
} |
|
| 941 |
} |
|
| 942 |
&:checked + span::after {
|
|
| 943 |
background: #000000; |
|
| 944 |
} |
|
| 945 |
} |
|
| 946 |
} |
|
| 947 | ||
| 948 |
.RadiobuttonsWidget {
|
|
| 949 |
input + span {
|
|
| 950 |
&::before {
|
|
| 951 |
border-radius: 7px; |
|
| 952 |
} |
|
| 953 |
&::after {
|
|
| 954 |
border-radius: 6px; |
|
| 955 |
} |
|
| 956 |
} |
|
| 957 |
} |
|
| 958 | ||
| 959 | 936 |
#sidebar div.user-menu div.cell {
|
| 960 | 937 |
margin-right: 0; |
| 961 | 938 |
} |
| static/grenoble-metropole-2019/_vars.scss | ||
|---|---|---|
| 56 | 56 |
$widget-background: $gam-user-cell-background-color; |
| 57 | 57 |
$widget-custom-radio-checkbox-color: $gam-button-background-color; |
| 58 | 58 |
$widget-unique-checkbox-position: left; |
| 59 |
$widget-custom-radio-checkbox-marker-color: black; |
|
| 59 | 60 | |
| 60 | 61 |
$form-sidebar-position: right; |
| 61 | 62 | |
| static/includes/_forms.scss | ||
|---|---|---|
| 42 | 42 |
$buttons-order: null !default; |
| 43 | 43 |
$buttons-alignment: null !default; // any flexbox justify-content value; |
| 44 | 44 | |
| 45 | ||
| 46 |
.custom-radio-checkbox-widget {
|
|
| 47 |
label {
|
|
| 48 |
position: relative; |
|
| 49 |
} |
|
| 50 |
input {
|
|
| 51 |
position: absolute; |
|
| 52 |
opacity: 0; |
|
| 53 |
+ span {
|
|
| 54 |
padding-left: 1.2rem; |
|
| 55 |
&::before {
|
|
| 56 |
display: block; |
|
| 57 |
content: ''; |
|
| 58 |
position: absolute; |
|
| 59 |
margin: auto; |
|
| 60 |
height: 0.66rem; |
|
| 61 |
width: 0.66rem; |
|
| 62 |
background: transparent; |
|
| 63 |
top: 0.33rem; |
|
| 64 |
left: 0; |
|
| 65 |
border: 1px solid $widget-custom-radio-checkbox-border-color; |
|
| 66 |
} |
|
| 67 |
&::after {
|
|
| 68 |
display: block; |
|
| 69 |
content: ''; |
|
| 70 |
position: absolute; |
|
| 71 |
margin: auto; |
|
| 72 |
height: calc(0.66rem - 2px); |
|
| 73 |
width: calc(0.66rem - 2px); |
|
| 74 |
background: transparent; |
|
| 75 |
transition: background 0.2s linear; |
|
| 76 |
top: calc(0.33rem + 2px); |
|
| 77 |
left: 2px; |
|
| 78 |
} |
|
| 79 |
} |
|
| 80 |
&:checked + span::after {
|
|
| 81 |
background: $widget-custom-radio-checkbox-marker-color; |
|
| 82 |
} |
|
| 83 |
&[disabled]:checked + span::after {
|
|
| 84 |
background: grayscale($widget-custom-radio-checkbox-marker-color); |
|
| 85 |
} |
|
| 86 | ||
| 87 |
&:focus + span {
|
|
| 88 |
&::before {
|
|
| 89 |
box-shadow: $widget-focus-box-shadow; |
|
| 90 |
} |
|
| 91 |
@if $widget-focus-outline == none {
|
|
| 92 |
outline: $widget-border; |
|
| 93 |
@if extract-color($widget-border) == transparent {
|
|
| 94 |
outline-color: #444; |
|
| 95 |
} |
|
| 96 |
outline-style: dotted; |
|
| 97 |
} @else {
|
|
| 98 |
outline: $widget-focus-outline; |
|
| 99 |
outline-offset: $widget-focus-outline-offset; |
|
| 100 |
} |
|
| 101 |
} |
|
| 102 |
&:active + span {
|
|
| 103 |
&::before {
|
|
| 104 |
top: calc(0.33rem - 4px); |
|
| 105 |
left: -4px; |
|
| 106 |
border: 5px solid $widget-custom-radio-checkbox-border-color; |
|
| 107 |
opacity: 0.5; |
|
| 108 |
} |
|
| 109 |
} |
|
| 110 |
} |
|
| 111 |
} |
|
| 112 | ||
| 113 |
.custom-radio-widget {
|
|
| 114 |
input + span {
|
|
| 115 |
&::before {
|
|
| 116 |
border-radius: 16px; |
|
| 117 |
} |
|
| 118 |
&::after {
|
|
| 119 |
border-radius: 5px; |
|
| 120 |
} |
|
| 121 |
} |
|
| 122 |
} |
|
| 123 | ||
| 45 | 124 |
input, select, button, textarea {
|
| 46 | 125 |
font-size: 100%; |
| 47 | 126 |
font-family: $font-family; |
| ... | ... | |
| 424 | 503 |
} |
| 425 | 504 | |
| 426 | 505 |
@if $widget-custom-radio-checkbox == true {
|
| 506 |
.django-checkbox-input, |
|
| 507 |
.django-radio-select, |
|
| 427 | 508 |
.CheckboxWidget, |
| 428 | 509 |
.CheckboxesWidget, |
| 429 | 510 |
.RadiobuttonsWidget {
|
| 430 |
label {
|
|
| 431 |
position: relative; |
|
| 432 |
} |
|
| 433 |
input {
|
|
| 434 |
position: absolute; |
|
| 435 |
opacity: 0; |
|
| 436 |
+ span {
|
|
| 437 |
padding-left: 1.2rem; |
|
| 438 |
&::before {
|
|
| 439 |
display: block; |
|
| 440 |
content: ''; |
|
| 441 |
position: absolute; |
|
| 442 |
margin: auto; |
|
| 443 |
height: 0.66rem; |
|
| 444 |
width: 0.66rem; |
|
| 445 |
background: transparent; |
|
| 446 |
top: 0.33rem; |
|
| 447 |
left: 0; |
|
| 448 |
border: 1px solid $widget-custom-radio-checkbox-border-color; |
|
| 449 |
} |
|
| 450 |
&::after {
|
|
| 451 |
display: block; |
|
| 452 |
content: ''; |
|
| 453 |
position: absolute; |
|
| 454 |
margin: auto; |
|
| 455 |
height: calc(0.66rem - 2px); |
|
| 456 |
width: calc(0.66rem - 2px); |
|
| 457 |
background: transparent; |
|
| 458 |
transition: background 0.2s linear; |
|
| 459 |
top: calc(0.33rem + 2px); |
|
| 460 |
left: 2px; |
|
| 461 |
} |
|
| 462 |
} |
|
| 463 |
&:checked + span::after {
|
|
| 464 |
background: $widget-custom-radio-checkbox-marker-color; |
|
| 465 |
} |
|
| 466 |
&[disabled]:checked + span::after {
|
|
| 467 |
background: grayscale($widget-custom-radio-checkbox-marker-color); |
|
| 468 |
} |
|
| 469 | ||
| 470 |
&:focus + span {
|
|
| 471 |
&::before {
|
|
| 472 |
box-shadow: $widget-focus-box-shadow; |
|
| 473 |
} |
|
| 474 |
@if $widget-focus-outline == none {
|
|
| 475 |
outline: $widget-border; |
|
| 476 |
@if extract-color($widget-border) == transparent {
|
|
| 477 |
outline-color: #444; |
|
| 478 |
} |
|
| 479 |
outline-style: dotted; |
|
| 480 |
} @else {
|
|
| 481 |
outline: $widget-focus-outline; |
|
| 482 |
outline-offset: $widget-focus-outline-offset; |
|
| 483 |
} |
|
| 484 |
} |
|
| 485 |
&:active + span {
|
|
| 486 |
&::before {
|
|
| 487 |
top: calc(0.33rem - 4px); |
|
| 488 |
left: -4px; |
|
| 489 |
border: 5px solid $widget-custom-radio-checkbox-border-color; |
|
| 490 |
opacity: 0.5; |
|
| 491 |
} |
|
| 492 |
} |
|
| 493 |
} |
|
| 511 |
@extend .custom-radio-checkbox-widget; |
|
| 494 | 512 |
} |
| 495 | 513 | |
| 496 | 514 |
.CheckboxWidget {
|
| ... | ... | |
| 498 | 516 |
position: relative; |
| 499 | 517 |
} |
| 500 | 518 |
} |
| 501 | ||
| 519 |
.django-radio-select, |
|
| 502 | 520 |
.RadiobuttonsWidget {
|
| 503 |
input + span {
|
|
| 504 |
&::before {
|
|
| 505 |
border-radius: 16px; |
|
| 506 |
} |
|
| 507 |
&::after {
|
|
| 508 |
border-radius: 5px; |
|
| 509 |
} |
|
| 510 |
} |
|
| 521 |
@extend .custom-radio-widget; |
|
| 511 | 522 |
} |
| 512 | 523 |
} |
| 513 | 524 | |
| 514 | 525 |
@if $widget-unique-checkbox-position == left {
|
| 526 |
div.django-checkbox-input, |
|
| 515 | 527 |
div.CheckboxWidget {
|
| 516 | 528 |
position: relative; |
| 517 | 529 |
div.title {
|
| static/toulouse-metropole/_custom.scss | ||
|---|---|---|
| 44 | 44 |
} |
| 45 | 45 |
} |
| 46 | 46 | |
| 47 |
.custom-radio-checkbox-widget {
|
|
| 48 |
input + span {
|
|
| 49 |
&::before {
|
|
| 50 |
border: none; |
|
| 51 |
box-shadow: 0 0 6px 0px #505050; |
|
| 52 |
} |
|
| 53 |
&::after {
|
|
| 54 |
left: 0; |
|
| 55 |
top: calc(0.33em - 1px); |
|
| 56 |
height: calc(0.66rem); |
|
| 57 |
width: calc(0.66rem); |
|
| 58 |
} |
|
| 59 |
} |
|
| 60 |
} |
|
| 61 | ||
| 47 | 62 |
header {
|
| 48 | 63 |
position: absolute; |
| 49 | 64 |
top: 0; |
| ... | ... | |
| 1186 | 1201 |
color: $primary-color; |
| 1187 | 1202 |
} |
| 1188 | 1203 | |
| 1189 |
.CheckboxWidget input + span::before, |
|
| 1190 |
.CheckboxesWidget input + span::before, |
|
| 1191 |
.RadiobuttonsWidget input + span::before {
|
|
| 1192 |
border: none; |
|
| 1193 |
box-shadow: 0 0 6px 0px #505050; |
|
| 1194 |
} |
|
| 1195 | ||
| 1196 |
.CheckboxWidget input + span::after, |
|
| 1197 |
.CheckboxesWidget input + span::after, |
|
| 1198 |
.RadiobuttonsWidget input + span::after {
|
|
| 1199 |
left: 0; |
|
| 1200 |
top: calc(0.33em - 1px); |
|
| 1201 |
height: calc(0.66rem); |
|
| 1202 |
width: calc(0.66rem); |
|
| 1203 |
} |
|
| 1204 | ||
| 1205 | 1204 |
div#rub_service {
|
| 1206 | 1205 |
div#receipt-intro, |
| 1207 | 1206 |
div.section {
|
| static/toulouse/_custom.scss | ||
|---|---|---|
| 52 | 52 |
} |
| 53 | 53 |
} |
| 54 | 54 | |
| 55 |
.custom-radio-checkbox-widget {
|
|
| 56 |
input + span {
|
|
| 57 |
&::before {
|
|
| 58 |
border: none; |
|
| 59 |
box-shadow: 0 0 6px 0px #505050; |
|
| 60 |
} |
|
| 61 |
&::after {
|
|
| 62 |
left: 0; |
|
| 63 |
top: calc(0.33em - 1px); |
|
| 64 |
height: calc(0.66rem); |
|
| 65 |
width: calc(0.66rem); |
|
| 66 |
} |
|
| 67 |
} |
|
| 68 |
} |
|
| 69 | ||
| 55 | 70 |
.page-template-two-columns #columns {
|
| 56 | 71 |
padding: 2rem; |
| 57 | 72 |
} |
| ... | ... | |
| 1174 | 1189 |
color: $primary-color; |
| 1175 | 1190 |
} |
| 1176 | 1191 | |
| 1177 |
.CheckboxWidget input + span::before, |
|
| 1178 |
.CheckboxesWidget input + span::before, |
|
| 1179 |
.RadiobuttonsWidget input + span::before {
|
|
| 1180 |
border: none; |
|
| 1181 |
box-shadow: 0 0 6px 0px #505050; |
|
| 1182 |
} |
|
| 1183 | ||
| 1184 |
.CheckboxWidget input + span::after, |
|
| 1185 |
.CheckboxesWidget input + span::after, |
|
| 1186 |
.RadiobuttonsWidget input + span::after {
|
|
| 1187 |
left: 0; |
|
| 1188 |
top: calc(0.33em - 1px); |
|
| 1189 |
height: calc(0.66rem); |
|
| 1190 |
width: calc(0.66rem); |
|
| 1191 |
} |
|
| 1192 | ||
| 1193 | 1192 |
div#rub_service {
|
| 1194 | 1193 |
div#receipt-intro, |
| 1195 | 1194 |
div.section {
|
| 1196 |
- |
|