From a5697c4cc25024610cf4aa2078562442c5e0dfd5 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Fr=C3=A9d=C3=A9ric=20P=C3=A9ters?= <fpeters@entrouvert.com>
Date: Wed, 30 Nov 2022 15:42:04 +0100
Subject: [PATCH] scss: sync some form elements with publik-base-theme (#71886)

---
 gadjo/static/css/_forms.scss | 46 ++++++++++++++++++++++++------------
 1 file changed, 31 insertions(+), 15 deletions(-)

diff --git a/gadjo/static/css/_forms.scss b/gadjo/static/css/_forms.scss
index 9ff4ce7..7a5dc4a 100644
--- a/gadjo/static/css/_forms.scss
+++ b/gadjo/static/css/_forms.scss
@@ -30,7 +30,7 @@ label {
 }
 
 form div.widget {
-	margin-bottom: 2ex;
+	margin-bottom: 1.5em;
 }
 
 div.errornotice p {
@@ -63,9 +63,9 @@ div.error {
 }
 
 span.required {
-	margin-left: 0.7ex;
+	margin-left: 0.3em;
 	position: relative;
-	top: -0.2ex;
+	top: -0.1em;
 	cursor: help;
 }
 
@@ -104,9 +104,18 @@ a.button {
 	border: 1px solid $button-color;
 	color: $button-color;
 	&[aria-pressed=true], &:hover {
+		border-color: darken($button-color, 20%);
 		background: $button-color;
 		color: white;
-		border-color: darken($button-color, 20%);
+	}
+
+	&.disabled, &:disabled {
+		box-shadow: none;
+		cursor: not-allowed;
+		background: #f3f3f3;
+		color: #888;
+		border-color: #888;
+		pointer-events: none;
 	}
 	&:active { border-color: darken($button-color, 10%); }
 	&:focus {
@@ -117,15 +126,6 @@ a.button {
 			outline-offset: $button-focus-outline-offset;
 		}
 	}
-
-	&.disabled, &:disabled {
-		border-color: #888;
-		color: #888;
-		background: #f3f3f3;
-		pointer-events: none;
-		box-shadow: none;
-		cursor: not-allowed;
-	}
 	transition: border-color 0.2s ease, box-shadow 0.2s linear;
 }
 
@@ -278,6 +278,10 @@ select {
 	background-position: right 1.3rem center;
 	background-repeat: no-repeat;
 	background-size: 1rem auto;
+	&::-ms-expand {
+		// remove the arrow of select element in IE
+		display: none;
+	}
 }
 
 select[multiple] {
@@ -317,6 +321,7 @@ div.a2-block form select {
 	width: 100%;
 }
 
+div.a2-block form input[type=checkbox],
 div.a2-block form input[type=radio] {
 	width: auto;
 }
@@ -387,6 +392,7 @@ span.select2-container {
 		padding: 0.1em 0.7em;
 	}
 	span.select2-selection--single,
+	span.select2-selection--multiple,
 	a.select2-choice,
 	a.select2-choice div {
 		box-sizing: content-box;
@@ -399,9 +405,15 @@ span.select2-container {
 			color: $widget-color;
 		}
 	}
+	.select2-search--inline .select2-search__field {
+		margin-top: 0;
+		margin-bottom: 0;
+		border: none;
+	}
 	&.select2-container--focus,
 	&.select2-container--open {
 		span.select2-selection--single,
+		span.select2-selection--multiple,
 		a.select2-choice,
 		a.select2-choice div {
 			background: $widget-focus-background;
@@ -412,7 +424,8 @@ span.select2-container {
 			}
 		}
 	}
-	&.select2-container--focus span.select2-selection--single {
+	&.select2-container--focus span.select2-selection--single,
+	&.select2-container--focus span.select2-selection--multiple {
 		outline: $widget-focus-outline;
 		outline-offset: $widget-focus-outline-offset;
 	}
@@ -443,11 +456,14 @@ span.select2-container {
 			display: none;
 		}
 	}
+	.select2-selection--single .select2-selection__clear {
+		margin-right: 2em;
+	}
 	.select2-dropdown {
 		border: $widget-border;
 		&.select2-dropdown--below {
 			position: relative;
-			top: -5px;
+			top: -6px;
 		}
 	}
 	.select2-results {