From faf4f479a51b93781425732b8bf10abaa921dafa Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Fr=C3=A9d=C3=A9ric=20P=C3=A9ters?= <fpeters@entrouvert.com>
Date: Tue, 20 Oct 2020 08:28:34 +0200
Subject: [PATCH 1/2] css: adapt select2 style to look like other widgets
 (#13819)

---
 gadjo/static/css/_forms.scss | 122 +++++++++++++++++++++++++++++++++--
 1 file changed, 118 insertions(+), 4 deletions(-)

diff --git a/gadjo/static/css/_forms.scss b/gadjo/static/css/_forms.scss
index a825627..bff1220 100644
--- a/gadjo/static/css/_forms.scss
+++ b/gadjo/static/css/_forms.scss
@@ -5,6 +5,18 @@ $button-cancel-color: darken(grayscale($button-color), 10%);
 $button-delete-color: #CD2026;
 $button-submit-color: #215D9C;
 
+$widget-background: white;
+$widget-focus-background: white;
+$widget-border: 1px solid #AAA;
+$widget-focus-border: $widget-border;
+$widget-border-radius: 0;
+$widget-color: $font-color;
+$widget-focus-color: $font-color;
+$widget-focus-outline: none;
+$widget-focus-outline-offset: 0;
+
+$data_uri_arrow-down: "arrow-down.svg";
+
 input, select, button, textarea {
 	font-size: 100%;
 	font-family: $font-family;
@@ -174,15 +186,15 @@ input[type=submit]:disabled {
 }
 
 input, input[type="text"], input[type="url"], input[type="email"], input[type="password"], input[type="url"], input[type="tel"], input[type="number"], input[type="search"], input[type="file"], input[type="date"], input[type="datetime-local"], input[type="month"], input[type="time"], input[type="week"], textarea, select {
-	border: 1px solid #AAA;
-	border-radius: 0px;
+	border: $widget-border;
+	border-radius: $widget-border-radius;
 	box-sizing: border-box;
 	margin: 0.2em 0px;
 	outline: medium none;
 	padding: 0.7ex 0.7em;
 	max-width: 100%;
 	@include vendor-prefix('transition', 'background-size 0.2s ease');
-	background: white;
+	background: $widget-background;
 	&:focus {
 		border-bottom-color: $button-submit-color;
 	}
@@ -217,7 +229,7 @@ select {
 	background: white;
 	@include vendor-prefix('appearance', 'none');
 	padding-right: 4em;
-	background-image: url(arrow-down.svg);
+	background-image: url($data_uri_arrow-down);
 	background-position: right 1.3rem center;
 	background-repeat: no-repeat;
 	background-size: 1rem auto;
@@ -319,6 +331,108 @@ fieldset.gadjo-foldable {
 	display: none;
 }
 
+/* select2 */
+div.select2-container,
+span.select2-container {
+	font-size: 100%;
+	min-width: 20em;
+	margin-top: 2px;
+	a.select2-choice {
+		padding: 0.1em 0.7em;
+	}
+	span.select2-selection--single,
+	a.select2-choice,
+	a.select2-choice div {
+		box-sizing: content-box;
+		padding: 1px 0;
+		background: $widget-background;
+		color: $widget-color;
+		border-radius: $widget-border-radius;
+		border: $widget-border;
+	}
+	&.select2-container--focus,
+	&.select2-container--open {
+		span.select2-selection--single,
+		a.select2-choice,
+		a.select2-choice div {
+			background: $widget-focus-background;
+			border: $widget-focus-border;
+			color: $widget-focus-color;
+			span {
+				color: $widget-focus-color;
+			}
+		}
+	}
+	&.select2-container--focus span.select2-selection--single {
+		outline: $widget-focus-outline;
+		outline-offset: $widget-focus-outline-offset;
+	}
+	.select2-choices,
+	.select2-choice {
+		box-shadow: none;
+	}
+	.select2-search--dropdown input,
+	.select2-search--dropdown input:active,
+	.select2-search--dropdown input:focus {
+		background: white;
+		color: #333;
+		border: 1px solid #ccc;
+	}
+	.select2-selection--single .select2-selection__rendered {
+		padding-right: 50px;
+	}
+	.select2-selection--single .select2-selection__arrow {
+		background-image: url($data_uri_arrow-down);
+		background-position: right 1.3rem center;
+		background-repeat: no-repeat;
+		background-size: 1rem auto;
+		width: 50px;
+		right: 0;
+		top: 0;
+		height: 100%;
+		b {
+			display: none;
+		}
+	}
+	.select2-dropdown {
+		border: $widget-border;
+		&.select2-dropdown--below {
+			position: relative;
+			top: -5px;
+		}
+	}
+	.select2-results {
+		.loading-results {
+			position: absolute;
+			display: inline-block;
+			right: 0;
+			color: black;
+			@media screen and (max-width: $mobile-limit) {
+				display: none;
+			}
+		}
+		.loading-results:last-child {
+			position: static;
+			display: block;
+			color: inherit;
+		}
+	}
+}
+
+div.select2-container.select2-drop-above .select2-choice {
+	background: white;
+	border-radius: 0;
+}
+
+div.select2-drop {
+	box-shadow: none;
+	border-radius: 0;
+}
+
+div.select2-search {
+	margin-top: 4px;
+}
+
 /* form.as_p */
 
 form p {
-- 
2.28.0

