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

forms: apply custom styles to all radio and checkbox widgets (#55988)

This commit is contained in:
Serghei Mihai 2021-08-11 10:33:35 +02:00
parent 1bda1572d2
commit beab6d22d1
7 changed files with 166 additions and 187 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

36
static/dordogne-cd24/_custom.scss
View File

@ -40,6 +40,24 @@ $mobile-header-height: 280px;
background: #fff;
}
.custom-radio-checkbox-widget {
input + span {
padding-left: 1.75rem;
&::before {
height: 1.1rem;
width: 1.1rem;
top: 0;
}
&::after {
left: 4px;
top: 4px;
width: calc(1.1rem - 8px);
height: calc(1.1rem - 8px);
background: rgba(194, 197, 200, 0.47);
}
}
}
@mixin after-line($color: #cbd05d) {
&::after {
display: block;
@ -281,24 +299,6 @@ div#tracking-code {
background: #fff;
}
.RadiobuttonsWidget, .CheckboxWidget,
.CheckboxesWidget {
input + span {
padding-left: 1.75rem;
&::before {
height: 1.1rem;
width: 1.1rem;
top: 0;
}
&::after {
left: 4px;
top: 4px;
width: calc(1.1rem - 8px);
height: calc(1.1rem - 8px);
background: rgba(194, 197, 200, 0.47);
}
}
}
.gru-content {
div.cell, .block {
margin-bottom: 2em;

43
static/grandlyon-glc/_custom.scss
View File

@ -1,5 +1,22 @@
@import '../includes/fonts/roboto';
.custom-radio-checkbox-widget {
input + span {
&::before {
height: 15px;
width: 15px;
background: white;
top: 0.15rem;
}
&::after {
width: 11px;
height: 11px;
top: calc(0.15rem + 2px);
}
padding-left: 1.5rem;
}
}
a.show-scopes, a.hide-scopes {
display: block;
margin: 2ex 0;
@ -606,29 +623,3 @@ div#nav {
background: #fbd3d3;
}
}
.django-checkbox-input,
.django-radio-select,
.CheckboxWidget,
.CheckboxesWidget,
.RadiobuttonsWidget {
input + span {
&::before {
height: 15px;
width: 15px;
background: white;
top: 0.15rem;
}
padding-left: 1.5rem;
}
}
.django-checkbox-input input + span::after,
.django-radio-select input + span::after,
.CheckboxWidget input + span::after,
.CheckboxesWidget input + span::after,
.RadiobuttonsWidget input + span::after {
width: 11px;
height: 11px;
top: calc(0.15rem + 2px);
}

53
static/grenoble-metropole-2019/_custom.scss
View File

@ -70,6 +70,21 @@ $categories: administration, dechets, eau-potable, eaux-usees, economie, logemen
background-position: 10px center;
}
.custom-radio-checkbox-widget {
input + span {
&::before {
height: 0.86rem;
width: 0.86rem;
top: 0.1rem;
}
&::after {
height: calc(0.86rem - 4px);
width: calc(0.86rem - 4px);
top: calc(0.1rem + 2px);
}
}
}
div#columns > div {
&.column {
width: 100%;
@ -918,44 +933,6 @@ select {
background-color: #e4e4e4;
}
.CheckboxWidget,
.CheckboxesWidget,
.RadiobuttonsWidget {
label {
margin: 3px auto;
display: inline-block;
}
input {
+ span {
&::before {
background: #FFFFFF;
height: 0.86rem;
width: 0.86rem;
top: 0.1rem;
}
&::after {
height: calc(0.86rem - 2px);
width: calc(0.86rem - 2px);
top: calc(0.1rem + 2px);
}
}
&:checked + span::after {
background: #000000;
}
}
}
.RadiobuttonsWidget {
input + span {
&::before {
border-radius: 7px;
}
&::after {
border-radius: 6px;
}
}
}
#sidebar div.user-menu div.cell {
margin-right: 0;
}

1
static/grenoble-metropole-2019/_vars.scss
View File

@ -56,6 +56,7 @@ $widget-border: 1px solid $gam-button-background-color;
$widget-background: $gam-user-cell-background-color;
$widget-custom-radio-checkbox-color: $gam-button-background-color;
$widget-unique-checkbox-position: left;
$widget-custom-radio-checkbox-marker-color: black;
$form-sidebar-position: right;

158
static/includes/_forms.scss
View File

@ -42,6 +42,85 @@ $form-style: classic !default;
$buttons-order: null !default;
$buttons-alignment: null !default; // any flexbox justify-content value;
.custom-radio-checkbox-widget {
label {
position: relative;
}
input {
position: absolute;
opacity: 0;
+ span {
padding-left: 1.2rem;
&::before {
display: block;
content: '';
position: absolute;
margin: auto;
height: 0.66rem;
width: 0.66rem;
background: transparent;
top: 0.33rem;
left: 0;
border: 1px solid $widget-custom-radio-checkbox-border-color;
}
&::after {
display: block;
content: '';
position: absolute;
margin: auto;
height: calc(0.66rem - 2px);
width: calc(0.66rem - 2px);
background: transparent;
transition: background 0.2s linear;
top: calc(0.33rem + 2px);
left: 2px;
}
}
&:checked + span::after {
background: $widget-custom-radio-checkbox-marker-color;
}
&[disabled]:checked + span::after {
background: grayscale($widget-custom-radio-checkbox-marker-color);
}
&:focus + span {
&::before {
box-shadow: $widget-focus-box-shadow;
}
@if $widget-focus-outline == none {
outline: $widget-border;
@if extract-color($widget-border) == transparent {
outline-color: #444;
}
outline-style: dotted;
} @else {
outline: $widget-focus-outline;
outline-offset: $widget-focus-outline-offset;
}
}
&:active + span {
&::before {
top: calc(0.33rem - 4px);
left: -4px;
border: 5px solid $widget-custom-radio-checkbox-border-color;
opacity: 0.5;
}
}
}
}
.custom-radio-widget {
input + span {
&::before {
border-radius: 16px;
}
&::after {
border-radius: 5px;
}
}
}
input, select, button, textarea {
font-size: 100%;
font-family: $font-family;
@ -424,73 +503,12 @@ div.select2-search {
}
@if $widget-custom-radio-checkbox == true {
.django-checkbox-input,
.django-radio-select,
.CheckboxWidget,
.CheckboxesWidget,
.RadiobuttonsWidget {
label {
position: relative;
}
input {
position: absolute;
opacity: 0;
+ span {
padding-left: 1.2rem;
&::before {
display: block;
content: '';
position: absolute;
margin: auto;
height: 0.66rem;
width: 0.66rem;
background: transparent;
top: 0.33rem;
left: 0;
border: 1px solid $widget-custom-radio-checkbox-border-color;
}
&::after {
display: block;
content: '';
position: absolute;
margin: auto;
height: calc(0.66rem - 2px);
width: calc(0.66rem - 2px);
background: transparent;
transition: background 0.2s linear;
top: calc(0.33rem + 2px);
left: 2px;
}
}
&:checked + span::after {
background: $widget-custom-radio-checkbox-marker-color;
}
&[disabled]:checked + span::after {
background: grayscale($widget-custom-radio-checkbox-marker-color);
}
&:focus + span {
&::before {
box-shadow: $widget-focus-box-shadow;
}
@if $widget-focus-outline == none {
outline: $widget-border;
@if extract-color($widget-border) == transparent {
outline-color: #444;
}
outline-style: dotted;
} @else {
outline: $widget-focus-outline;
outline-offset: $widget-focus-outline-offset;
}
}
&:active + span {
&::before {
top: calc(0.33rem - 4px);
left: -4px;
border: 5px solid $widget-custom-radio-checkbox-border-color;
opacity: 0.5;
}
}
}
@extend .custom-radio-checkbox-widget;
}
.CheckboxWidget {
@ -498,20 +516,14 @@ div.select2-search {
position: relative;
}
}
.django-radio-select,
.RadiobuttonsWidget {
input + span {
&::before {
border-radius: 16px;
}
&::after {
border-radius: 5px;
}
}
@extend .custom-radio-widget;
}
}
@if $widget-unique-checkbox-position == left {
div.django-checkbox-input,
div.CheckboxWidget {
position: relative;
div.title {

31
static/toulouse-metropole/_custom.scss
View File

@ -44,6 +44,21 @@ a:hover {
}
}
.custom-radio-checkbox-widget {
input + span {
&::before {
border: none;
box-shadow: 0 0 6px 0px #505050;
}
&::after {
left: 0;
top: calc(0.33em - 1px);
height: calc(0.66rem);
width: calc(0.66rem);
}
}
}
header {
position: absolute;
top: 0;
@ -1186,22 +1201,6 @@ span.required {
color: $primary-color;
}
.CheckboxWidget input + span::before,
.CheckboxesWidget input + span::before,
.RadiobuttonsWidget input + span::before {
border: none;
box-shadow: 0 0 6px 0px #505050;
}
.CheckboxWidget input + span::after,
.CheckboxesWidget input + span::after,
.RadiobuttonsWidget input + span::after {
left: 0;
top: calc(0.33em - 1px);
height: calc(0.66rem);
width: calc(0.66rem);
}
div#rub_service {
div#receipt-intro,
div.section {

31
static/toulouse/_custom.scss
View File

@ -52,6 +52,21 @@ a:hover {
}
}
.custom-radio-checkbox-widget {
input + span {
&::before {
border: none;
box-shadow: 0 0 6px 0px #505050;
}
&::after {
left: 0;
top: calc(0.33em - 1px);
height: calc(0.66rem);
width: calc(0.66rem);
}
}
}
.page-template-two-columns #columns {
padding: 2rem;
}
@ -1174,22 +1189,6 @@ span.required {
color: $primary-color;
}
.CheckboxWidget input + span::before,
.CheckboxesWidget input + span::before,
.RadiobuttonsWidget input + span::before {
border: none;
box-shadow: 0 0 6px 0px #505050;
}
.CheckboxWidget input + span::after,
.CheckboxesWidget input + span::after,
.RadiobuttonsWidget input + span::after {
left: 0;
top: calc(0.33em - 1px);
height: calc(0.66rem);
width: calc(0.66rem);
}
div#rub_service {
div#receipt-intro,
div.section {