Improve dropdown menu mobile (#4141)

* Theme template.css

* theme adark

* theme ansum

* theme bluelagoon

* theme dark

* theme template.css RTL fix

* theme flat

* theme Origine

* theme Origine-compact

* theme Pafat

* theme Screwdriver

* theme Swage

* theme Mapco

* dropdown menu with thin scrollbar

* Fix CI foundings

* Fix RTL

* Fix CSS semicolons

* Fix CSS RTL

* Fix SCSS

* Update _mobile.scss

5 files changed, 60 insertions, 12 deletions

diff --git a/p/themes/Ansum/_components.scss b/p/themes/Ansum/_components.scss
index b89821df3..9e78456a2 100644
--- a/p/themes/Ansum/_components.scss
+++ b/p/themes/Ansum/_components.scss
@@ -20,7 +20,7 @@
 
 /*=== Dropdown */
 .dropdown-menu {
-	margin: 0;
+	margin: 9px 0 0 0;
 	padding: 0.5rem 0 1rem 0;
 	background: $grey-lighter;
 	font-size: 1rem;
@@ -30,13 +30,14 @@
 	text-align: left;
 
 	&::after {
-		background: white;
+		background: $grey-lighter;
 		width: 10px;
 		height: 10px;
 		content: "";
 		position: absolute;
 		top: -4px;
-		right: 13px;
+		right: 18px;
+		bottom: -14px;
 		z-index: -10;
 		transform: rotate(45deg);
 		// border-top: 1px solid #95a5a6;
diff --git a/p/themes/Ansum/_layout.scss b/p/themes/Ansum/_layout.scss
index 56fe97a54..0cd81fa5e 100644
--- a/p/themes/Ansum/_layout.scss
+++ b/p/themes/Ansum/_layout.scss
@@ -306,7 +306,6 @@
 
 #dropdown-query ~ .dropdown-menu .dropdown-header .icon {
 	vertical-align: middle;
-	background-color: $grey-medium-dark;
 	border-radius: 3px;
 }
 
diff --git a/p/themes/Ansum/_mobile.scss b/p/themes/Ansum/_mobile.scss
index f74331de5..824bb1056 100644
--- a/p/themes/Ansum/_mobile.scss
+++ b/p/themes/Ansum/_mobile.scss
@@ -147,7 +147,27 @@
 		}
 	}
 
+	.dropdown-target:target {
+		~ .dropdown-toggle::after {
+			background-color: $grey-lighter;
+			border-top: 1px solid $grey-light;
+			border-left: 1px solid $grey-light;
+			right: 21px;
+			bottom: -14px;
+		}
+
+		~ a.dropdown-toggle {
+			&:not(.btn) {
+				~ .dropdown-menu {
+					margin-top: 0;
+				}
 
+				&::after {
+					bottom: -17px;
+				}
+			}
+		}
+	}
 
 	.day {
 		text-align: center;
diff --git a/p/themes/Ansum/ansum.css b/p/themes/Ansum/ansum.css
index 8f41f9b78..4a565d031 100644
--- a/p/themes/Ansum/ansum.css
+++ b/p/themes/Ansum/ansum.css
@@ -227,7 +227,7 @@ form th {
 
 /*=== Dropdown */
 .dropdown-menu {
-	margin: 0;
+	margin: 9px 0 0 0;
 	padding: 0.5rem 0 1rem 0;
 	background: #fcfaf8;
 	font-size: 1rem;
@@ -237,13 +237,14 @@ form th {
 	text-align: left;
 }
 .dropdown-menu::after {
-	background: white;
+	background: #fcfaf8;
 	width: 10px;
 	height: 10px;
 	content: "";
 	position: absolute;
 	top: -4px;
-	right: 13px;
+	right: 18px;
+	bottom: -14px;
 	z-index: -10;
 	transform: rotate(45deg);
 }
@@ -1038,7 +1039,6 @@ form th {
 
 #dropdown-query ~ .dropdown-menu .dropdown-header .icon {
 	vertical-align: middle;
-	background-color: #ba9;
 	border-radius: 3px;
 }
 
@@ -1554,6 +1554,20 @@ form th {
 		padding: 0.5rem 0;
 	}
 
+	.dropdown-target:target ~ .dropdown-toggle::after {
+		background-color: #fcfaf8;
+		border-top: 1px solid #f5f0ec;
+		border-left: 1px solid #f5f0ec;
+		right: 21px;
+		bottom: -14px;
+	}
+	.dropdown-target:target ~ a.dropdown-toggle:not(.btn) ~ .dropdown-menu {
+		margin-top: 0;
+	}
+	.dropdown-target:target ~ a.dropdown-toggle:not(.btn)::after {
+		bottom: -17px;
+	}
+
 	.day {
 		text-align: center;
 		padding: 1rem 0;
diff --git a/p/themes/Ansum/ansum.rtl.css b/p/themes/Ansum/ansum.rtl.css
index 0142968ce..f51507030 100644
--- a/p/themes/Ansum/ansum.rtl.css
+++ b/p/themes/Ansum/ansum.rtl.css
@@ -227,7 +227,7 @@ form th {
 
 /*=== Dropdown */
 .dropdown-menu {
-	margin: 0;
+	margin: 9px 0 0 0;
 	padding: 0.5rem 0 1rem 0;
 	background: #fcfaf8;
 	font-size: 1rem;
@@ -237,13 +237,14 @@ form th {
 	text-align: right;
 }
 .dropdown-menu::after {
-	background: white;
+	background: #fcfaf8;
 	width: 10px;
 	height: 10px;
 	content: "";
 	position: absolute;
 	top: -4px;
-	left: 13px;
+	left: 18px;
+	bottom: -14px;
 	z-index: -10;
 	transform: rotate(-45deg);
 }
@@ -1038,7 +1039,6 @@ form th {
 
 #dropdown-query ~ .dropdown-menu .dropdown-header .icon {
 	vertical-align: middle;
-	background-color: #ba9;
 	border-radius: 3px;
 }
 
@@ -1554,6 +1554,20 @@ form th {
 		padding: 0.5rem 0;
 	}
 
+	.dropdown-target:target ~ .dropdown-toggle::after {
+		background-color: #fcfaf8;
+		border-top: 1px solid #f5f0ec;
+		border-right: 1px solid #f5f0ec;
+		left: 21px;
+		bottom: -14px;
+	}
+	.dropdown-target:target ~ a.dropdown-toggle:not(.btn) ~ .dropdown-menu {
+		margin-top: 0;
+	}
+	.dropdown-target:target ~ a.dropdown-toggle:not(.btn)::after {
+		bottom: -17px;
+	}
+
 	.day {
 		text-align: center;
 		padding: 1rem 0;