From 2d33b6665bc62af9fa6bdad55bdef2c60dfc7d35 Mon Sep 17 00:00:00 2001
From: Serghei Mihai <smihai@entrouvert.com>
Date: Thu, 12 Aug 2021 17:48:40 +0200
Subject: [PATCH] grandlyon-glc: apply custom styles to checkboxes (#55849)

---
 static/grandlyon-glc/_custom.scss             | 60 +++++--------------
 static/grandlyon-glc/_vars.scss               |  3 +
 .../authentic2/login_password_form.html       |  4 +-
 .../authentic2_idp_oidc/authorization.html    | 10 ++--
 4 files changed, 24 insertions(+), 53 deletions(-)

diff --git a/static/grandlyon-glc/_custom.scss b/static/grandlyon-glc/_custom.scss
index 41bc229a..3972c759 100644
--- a/static/grandlyon-glc/_custom.scss
+++ b/static/grandlyon-glc/_custom.scss
@@ -607,54 +607,22 @@ div#nav {
 	}
 }
 
-/* customize "remember me" checkbox */
-#id_remember_me_p, div.a2-oidc-authorization-form--do-not-ask-again, div.django-checkbox-input {
-	position: relative;
-	div.title {
-		position: relative;
-		z-index: 100;
+.django-checkbox-input,
+.CheckboxWidget,
+.CheckboxesWidget {
+	.title {
+		padding-top: 0.25ex;
 	}
-	div.title label {
-		padding-left: 1.5em;
-	}
-	input[type="checkbox"] {
-		position: absolute;
-		left: -99999px;
-		&:checked {
-			+ div.hint {
-				&::before {
-					content: '';
-					position: absolute;
-					top: 5px;
-					left: 2px;
-					background-color: #000000;
-					transition: all .2s;
-					width: 11px;
-					height: 11px;
-				}
-			}
-		}
-	}
-	div.content {
-		&::before {
-			position: absolute;
-			left: 0;
-			top: 3px;
-			content: '';
-			display: block;
-			border: 1px solid #777777;
-			background: #ffffff;
-			width: 15px;
-			height: 15px;
-		}
+	input + span::before {
+		height: 15px;
+		width: 15px;
+		background: white;
 	}
 }
 
-#id_remember_me_p, div.a2-oidc-authorization-form--do-not-ask-again {
-	div.content {
-		div.hint {
-			text-indent: -9999px;
-			width: 11px;
-		}
-	}
+.django-checkbox-input input + span::after,
+.CheckboxWidget input + span::after,
+.CheckboxesWidget input + span::after {
+	width: 11px;
+	height: 11px;
 }
diff --git a/static/grandlyon-glc/_vars.scss b/static/grandlyon-glc/_vars.scss
index 845fdff0..2695528e 100644
--- a/static/grandlyon-glc/_vars.scss
+++ b/static/grandlyon-glc/_vars.scss
@@ -30,3 +30,6 @@ $cell-background: $body-background;
 $data_uri_arrow-down: "data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA0NDQuOCA0NDQuOCI+PHBhdGggZD0iTTI0OC4xIDM1Mkw0MzQgMTY1LjljNy4yLTYuOSAxMC44LTE1LjQgMTAuOC0yNS43IDAtMTAuMy0zLjYtMTguOC0xMC44LTI1LjdsLTIxLjQtMjEuN2MtNy03LTE1LjYtMTAuNi0yNS43LTEwLjYtOS45IDAtMTguNiAzLjUtMjYgMTAuNkwyMjIuNCAyMzEuNSA4My43IDkyLjhjLTctNy0xNS42LTEwLjYtMjUuNy0xMC42LTkuOSAwLTE4LjYgMy41LTI2IDEwLjZsLTIxLjQgMjEuN2MtNyA3LTEwLjYgMTUuNi0xMC42IDI1LjdzMy41IDE4LjcgMTAuNiAyNS43TDE5Ni40IDM1MmM3LjQgNyAxNi4xIDEwLjYgMjYgMTAuNiAxMC4xIDAgMTguNy0zLjUgMjUuNy0xMC42eiIvPjwvc3ZnPg==";
 
 $or-separator: true;
+
+$widget-unique-checkbox-position: left;
+$widget-custom-radio-checkbox: true;
diff --git a/templates/variants/grandlyon-glc/authentic2/login_password_form.html b/templates/variants/grandlyon-glc/authentic2/login_password_form.html
index 0ff19686..78f43706 100644
--- a/templates/variants/grandlyon-glc/authentic2/login_password_form.html
+++ b/templates/variants/grandlyon-glc/authentic2/login_password_form.html
@@ -7,14 +7,12 @@
   {% csrf_token %}
   {% include "gadjo/widget.html" with field=form.username %}
   {% include "gadjo/widget.html" with field=form.password %}
-  <div class="widget" id="id_remember_me_p">
+  <div class="widget django-checkbox-input" id="id_remember_me_p">
     <div class="title">
       <label for="id_remember_me">Rester connecté</label>
     </div>
     <div class="content">
       {{ form.remember_me }}
-      <div class="hint">
-      </div>
     </div>
   </div>
 {% block buttons %}
diff --git a/templates/variants/grandlyon-glc/authentic2_idp_oidc/authorization.html b/templates/variants/grandlyon-glc/authentic2_idp_oidc/authorization.html
index 233593ec..e72f7627 100644
--- a/templates/variants/grandlyon-glc/authentic2_idp_oidc/authorization.html
+++ b/templates/variants/grandlyon-glc/authentic2_idp_oidc/authorization.html
@@ -28,13 +28,15 @@
   <div class="a2-authorization-form">
     <form method="post">
       {% csrf_token %}
-      <div class="a2-oidc-authorization-form--do-not-ask-again">
+      <div class="a2-oidc-authorization-form--do-not-ask-again django-checkbox-input">
         <div class="title">
           <label for="id_do_not_ask_again">Ne plus redemander</label>
         </div>
-       <div class="content">
-         <input type="checkbox" id="id_do_not_ask_again" name="do_not_ask_again" />
-         <div class="hint"></div>
+        <div class="content">
+          <label>
+            <input type="checkbox" id="id_do_not_ask_again" name="do_not_ask_again" />
+            <span></span>
+          </label>
        </div>
     </div>
     <p>
-- 
2.32.0

