From 4ce876ed4d359cfcd15bdb641ddf6694a4c921f0 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Fr=C3=A9d=C3=A9ric=20P=C3=A9ters?= <fpeters@entrouvert.com>
Date: Fri, 31 Aug 2018 11:02:56 +0200
Subject: [PATCH] scss: add support for custom (CSS rendered) checkbox and
 radio buttons (#25987)

---
 help/fr/misc-scss.page      | 12 +++++++
 static/includes/_forms.scss | 70 +++++++++++++++++++++++++++++++++++++
 2 files changed, 82 insertions(+)

diff --git a/help/fr/misc-scss.page b/help/fr/misc-scss.page
index 3f1f739..e6bdc02 100644
--- a/help/fr/misc-scss.page
+++ b/help/fr/misc-scss.page
@@ -382,6 +382,18 @@ paramètre, la deuxième sa description et la troisième la valeur par défaut.
   <td><p>Taille de l'arrondi à appliquer aux champs de formulaire (texte, liste…)</p></td>
   <td><p><var>0</var></p></td>
  </tr>
+ <tr>
+  <td><p><code>$widget-custom-radio-checkbox</code></p></td>
+  <td><p>Rendu personnalisé des cases à cocher et des boutons radios (plutôt
+  que le rendu standard proposé par le navigateur).</p></td>
+  <td><p><var>false</var></p></td>
+ </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><var>$button-background</var></p></td>
+ </tr>
 </table>
 </section>
 
diff --git a/static/includes/_forms.scss b/static/includes/_forms.scss
index 89fec94..316db6e 100644
--- a/static/includes/_forms.scss
+++ b/static/includes/_forms.scss
@@ -14,6 +14,9 @@ $widget-border-radius: 0 !default;
 $widget-focus-background: inherit !default;
 $widget-focus-border: 1px solid #AAA !default;
 
+$widget-custom-radio-checkbox: false !default;
+$widget-custom-radio-checkbox-color: $button-background !default;
+
 /* $form-style: global style of form elements; possible values
  * are:
  * classic: nothing special.
@@ -265,6 +268,73 @@ div.select2-search {
 	margin-top: 4px;
 }
 
+@if $widget-custom-radio-checkbox == true {
+	.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;
+					border: 1px solid $widget-custom-radio-checkbox-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-color;
+			}
+			&[disabled]:checked + span::after {
+				background: grayscale($widget-custom-radio-checkbox-color);
+			}
+
+			&:focus + span {
+				outline: 1px dotted $widget-custom-radio-checkbox-color;
+			}
+		}
+	}
+
+	.CheckboxWidget {
+		div.content {
+			position: relative;
+		}
+	}
+
+	.RadiobuttonsWidget {
+		input + span {
+			&::before {
+				border-radius: 6px;
+			}
+			&::after {
+				border-radius: 5px;
+			}
+		}
+	}
+}
 
 @if $form-style == light {
 	form p label,
-- 
2.18.0