From b73c16eac195b1101886d7f6a6783c9a094381a5 Mon Sep 17 00:00:00 2001
From: Serghei Mihai <smihai@entrouvert.com>
Date: Wed, 11 Aug 2021 10:33:35 +0200
Subject: [PATCH] forms: apply custom styles to all radio and checkbox widgets
 (#55988)

---
 static/dordogne-cd24/_custom.scss           |  36 ++---
 static/grandlyon-glc/_custom.scss           |  43 +++---
 static/grenoble-metropole-2019/_custom.scss |  53 ++-----
 static/grenoble-metropole-2019/_vars.scss   |   1 +
 static/includes/_forms.scss                 | 158 +++++++++++---------
 static/toulouse-metropole/_custom.scss      |  31 ++--
 static/toulouse/_custom.scss                |  31 ++--
 7 files changed, 166 insertions(+), 187 deletions(-)

diff --git a/static/dordogne-cd24/_custom.scss b/static/dordogne-cd24/_custom.scss
index c489593f..0b1d8cee 100644
--- a/static/dordogne-cd24/_custom.scss
+++ b/static/dordogne-cd24/_custom.scss
@@ -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;
diff --git a/static/grandlyon-glc/_custom.scss b/static/grandlyon-glc/_custom.scss
index 16861420..47e9c257 100644
--- a/static/grandlyon-glc/_custom.scss
+++ b/static/grandlyon-glc/_custom.scss
@@ -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);
-}
diff --git a/static/grenoble-metropole-2019/_custom.scss b/static/grenoble-metropole-2019/_custom.scss
index b01ece19..27323756 100644
--- a/static/grenoble-metropole-2019/_custom.scss
+++ b/static/grenoble-metropole-2019/_custom.scss
@@ -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;
 }
diff --git a/static/grenoble-metropole-2019/_vars.scss b/static/grenoble-metropole-2019/_vars.scss
index 99216e19..bbeaff9a 100644
--- a/static/grenoble-metropole-2019/_vars.scss
+++ b/static/grenoble-metropole-2019/_vars.scss
@@ -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;
 
diff --git a/static/includes/_forms.scss b/static/includes/_forms.scss
index e1b2cd99..232dc1b6 100644
--- a/static/includes/_forms.scss
+++ b/static/includes/_forms.scss
@@ -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 {
diff --git a/static/toulouse-metropole/_custom.scss b/static/toulouse-metropole/_custom.scss
index 1d998276..aaf7949c 100644
--- a/static/toulouse-metropole/_custom.scss
+++ b/static/toulouse-metropole/_custom.scss
@@ -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 {
diff --git a/static/toulouse/_custom.scss b/static/toulouse/_custom.scss
index 20e0c96b..780f37f3 100644
--- a/static/toulouse/_custom.scss
+++ b/static/toulouse/_custom.scss
@@ -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 {
-- 
2.33.0

