From f94ec779e66ca7203cd3cf1e807bcf3c983ed736 Mon Sep 17 00:00:00 2001
From: maTh <math-home@web.de>
Date: Tue, 11 Jan 2022 23:53:40 +0100
Subject: 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
---
 p/themes/Mapco/_components.scss |  7 ++++---
 p/themes/Mapco/_mobile.scss     | 20 ++++++++++++++++++++
 p/themes/Mapco/mapco.css        | 21 ++++++++++++++++++---
 p/themes/Mapco/mapco.rtl.css    | 21 ++++++++++++++++++---
 4 files changed, 60 insertions(+), 9 deletions(-)

(limited to 'p/themes/Mapco')

diff --git a/p/themes/Mapco/_components.scss b/p/themes/Mapco/_components.scss
index 840da5258..6441ac0fb 100644
--- a/p/themes/Mapco/_components.scss
+++ b/p/themes/Mapco/_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/Mapco/_mobile.scss b/p/themes/Mapco/_mobile.scss
index 65b31fb89..068cb1d18 100644
--- a/p/themes/Mapco/_mobile.scss
+++ b/p/themes/Mapco/_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/Mapco/mapco.css b/p/themes/Mapco/mapco.css
index 8edaf81c4..a050cc32d 100644
--- a/p/themes/Mapco/mapco.css
+++ b/p/themes/Mapco/mapco.css
@@ -228,7 +228,7 @@ form th {
 
 /*=== Dropdown */
 .dropdown-menu {
-	margin: 0;
+	margin: 9px 0 0 0;
 	padding: 0.5rem 0 1rem 0;
 	background: #f9fafb;
 	font-size: 1rem;
@@ -238,13 +238,14 @@ form th {
 	text-align: left;
 }
 .dropdown-menu::after {
-	background: white;
+	background: #f9fafb;
 	width: 10px;
 	height: 10px;
 	content: "";
 	position: absolute;
 	top: -4px;
-	right: 13px;
+	right: 18px;
+	bottom: -14px;
 	z-index: -10;
 	transform: rotate(45deg);
 }
@@ -1566,6 +1567,20 @@ form th {
 		padding: 0.5rem 0;
 	}
 
+	.dropdown-target:target ~ .dropdown-toggle::after {
+		background-color: #f9fafb;
+		border-top: 1px solid #eff0f2;
+		border-left: 1px solid #eff0f2;
+		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/Mapco/mapco.rtl.css b/p/themes/Mapco/mapco.rtl.css
index 868766236..23fc886db 100644
--- a/p/themes/Mapco/mapco.rtl.css
+++ b/p/themes/Mapco/mapco.rtl.css
@@ -228,7 +228,7 @@ form th {
 
 /*=== Dropdown */
 .dropdown-menu {
-	margin: 0;
+	margin: 9px 0 0 0;
 	padding: 0.5rem 0 1rem 0;
 	background: #f9fafb;
 	font-size: 1rem;
@@ -238,13 +238,14 @@ form th {
 	text-align: right;
 }
 .dropdown-menu::after {
-	background: white;
+	background: #f9fafb;
 	width: 10px;
 	height: 10px;
 	content: "";
 	position: absolute;
 	top: -4px;
-	left: 13px;
+	left: 18px;
+	bottom: -14px;
 	z-index: -10;
 	transform: rotate(-45deg);
 }
@@ -1566,6 +1567,20 @@ form th {
 		padding: 0.5rem 0;
 	}
 
+	.dropdown-target:target ~ .dropdown-toggle::after {
+		background-color: #f9fafb;
+		border-top: 1px solid #eff0f2;
+		border-right: 1px solid #eff0f2;
+		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;
-- 
cgit v1.2.3