Fix: dropdown menu triangle in mobile view (#4169)

* central triangle styles moved to template.css

* Update template.rtl.css

* fix: triangle in config menu in mobile view

* improve dark theme in mobile view

23 files changed, 73 insertions, 197 deletions

diff --git a/p/themes/Alternative-Dark/adark.css b/p/themes/Alternative-Dark/adark.css
index 827c0c730..eab1b1786 100644
--- a/p/themes/Alternative-Dark/adark.css
+++ b/p/themes/Alternative-Dark/adark.css
@@ -304,18 +304,7 @@ a.btn {
 }
 
 .dropdown-menu::after {
-	background: #fff;
-	display: none;
-	width: 10px;
-	height: 10px;
-	border-top: 1px solid #ddd;
-	border-left: 1px solid #ddd;
-	content: "";
-	position: absolute;
-	top: -6px;
-	right: 13px;
-	z-index: -10;
-	transform: rotate(45deg);
+	border-color: #ddd;
 }
 
 .dropdown-header {
diff --git a/p/themes/Alternative-Dark/adark.rtl.css b/p/themes/Alternative-Dark/adark.rtl.css
index 52966cc03..79dcae992 100644
--- a/p/themes/Alternative-Dark/adark.rtl.css
+++ b/p/themes/Alternative-Dark/adark.rtl.css
@@ -304,18 +304,7 @@ a.btn {
 }
 
 .dropdown-menu::after {
-	background: #fff;
-	display: none;
-	width: 10px;
-	height: 10px;
-	border-top: 1px solid #ddd;
-	border-right: 1px solid #ddd;
-	content: "";
-	position: absolute;
-	top: -6px;
-	left: 13px;
-	z-index: -10;
-	transform: rotate(-45deg);
+	border-color: #ddd;
 }
 
 .dropdown-header {
diff --git a/p/themes/Ansum/_components.scss b/p/themes/Ansum/_components.scss
index b3fae5d08..58338db18 100644
--- a/p/themes/Ansum/_components.scss
+++ b/p/themes/Ansum/_components.scss
@@ -30,18 +30,8 @@
 	text-align: left;
 
 	&::after {
-		background: $grey-lighter;
-		width: 10px;
-		height: 10px;
-		content: "";
-		position: absolute;
-		top: -4px;
-		right: 18px;
-		bottom: -14px;
-		z-index: -10;
-		transform: rotate(45deg);
-		// border-top: 1px solid #95a5a6;
-		// border-left: 1px solid #95a5a6;
+		border: none;
+		right: 17px;
 	}
 
 	.dropdown-header {
diff --git a/p/themes/Ansum/ansum.css b/p/themes/Ansum/ansum.css
index 411e1b152..0e92ce051 100644
--- a/p/themes/Ansum/ansum.css
+++ b/p/themes/Ansum/ansum.css
@@ -234,16 +234,8 @@ form th {
 	text-align: left;
 }
 .dropdown-menu::after {
-	background: #fcfaf8;
-	width: 10px;
-	height: 10px;
-	content: "";
-	position: absolute;
-	top: -4px;
-	right: 18px;
-	bottom: -14px;
-	z-index: -10;
-	transform: rotate(45deg);
+	border: none;
+	right: 17px;
 }
 .dropdown-menu .dropdown-header {
 	margin: 1.75rem 0 0.5rem 2rem;
diff --git a/p/themes/Ansum/ansum.rtl.css b/p/themes/Ansum/ansum.rtl.css
index 8788a6df9..d03cbcad4 100644
--- a/p/themes/Ansum/ansum.rtl.css
+++ b/p/themes/Ansum/ansum.rtl.css
@@ -234,16 +234,8 @@ form th {
 	text-align: right;
 }
 .dropdown-menu::after {
-	background: #fcfaf8;
-	width: 10px;
-	height: 10px;
-	content: "";
-	position: absolute;
-	top: -4px;
-	left: 18px;
-	bottom: -14px;
-	z-index: -10;
-	transform: rotate(-45deg);
+	border: none;
+	left: 17px;
 }
 .dropdown-menu .dropdown-header {
 	margin: 1.75rem 2rem 0.5rem 0;
diff --git a/p/themes/Dark/dark.css b/p/themes/Dark/dark.css
index 9950a79d5..4753fc053 100644
--- a/p/themes/Dark/dark.css
+++ b/p/themes/Dark/dark.css
@@ -340,17 +340,7 @@ a.btn {
 }
 
 .dropdown-menu::after {
-	background: #1a1a1a;
-	width: 10px;
-	height: 10px;
-	border-top: 1px solid #888;
-	border-left: 1px solid #888;
-	content: "";
-	position: absolute;
-	top: -6px;
-	right: 13px;
-	z-index: -10;
-	transform: rotate(45deg);
+	border-color: #888;
 }
 
 .dropdown-header {
@@ -1176,6 +1166,7 @@ a.btn {
 		background-color: #1a1a1a;
 		border-top: 1px solid #888;
 		border-left: 1px solid #888;
+		right: 12px;
 	}
 
 	.day .name {
diff --git a/p/themes/Dark/dark.rtl.css b/p/themes/Dark/dark.rtl.css
index f693e9e48..77482e8f6 100644
--- a/p/themes/Dark/dark.rtl.css
+++ b/p/themes/Dark/dark.rtl.css
@@ -340,17 +340,7 @@ a.btn {
 }
 
 .dropdown-menu::after {
-	background: #1a1a1a;
-	width: 10px;
-	height: 10px;
-	border-top: 1px solid #888;
-	border-right: 1px solid #888;
-	content: "";
-	position: absolute;
-	top: -6px;
-	left: 13px;
-	z-index: -10;
-	transform: rotate(-45deg);
+	border-color: #888;
 }
 
 .dropdown-header {
@@ -1176,6 +1166,7 @@ a.btn {
 		background-color: #1a1a1a;
 		border-top: 1px solid #888;
 		border-right: 1px solid #888;
+		left: 12px;
 	}
 
 	.day .name {
diff --git a/p/themes/Flat/flat.css b/p/themes/Flat/flat.css
index 1131f67ac..7616fa180 100644
--- a/p/themes/Flat/flat.css
+++ b/p/themes/Flat/flat.css
@@ -340,17 +340,8 @@ a.btn {
 }
 
 .dropdown-menu::after {
-	background: #fff;
-	width: 10px;
-	height: 10px;
-	border-top: 1px solid #95a5a6;
-	border-left: 1px solid #95a5a6;
-	content: "";
-	position: absolute;
-	top: -6px;
-	right: 13px;
-	z-index: -10;
-	transform: rotate(45deg);
+	border-color: #95a5a6;
+	right: 12px;
 }
 
 .dropdown-header {
diff --git a/p/themes/Flat/flat.rtl.css b/p/themes/Flat/flat.rtl.css
index e64e861c7..63d0b3657 100644
--- a/p/themes/Flat/flat.rtl.css
+++ b/p/themes/Flat/flat.rtl.css
@@ -340,17 +340,8 @@ a.btn {
 }
 
 .dropdown-menu::after {
-	background: #fff;
-	width: 10px;
-	height: 10px;
-	border-top: 1px solid #95a5a6;
-	border-right: 1px solid #95a5a6;
-	content: "";
-	position: absolute;
-	top: -6px;
-	left: 13px;
-	z-index: -10;
-	transform: rotate(-45deg);
+	border-color: #95a5a6;
+	left: 12px;
 }
 
 .dropdown-header {
diff --git a/p/themes/Mapco/_components.scss b/p/themes/Mapco/_components.scss
index 6441ac0fb..35b4e5790 100644
--- a/p/themes/Mapco/_components.scss
+++ b/p/themes/Mapco/_components.scss
@@ -30,18 +30,8 @@
 	text-align: left;
 
 	&::after {
-		background: $grey-lighter;
-		width: 10px;
-		height: 10px;
-		content: "";
-		position: absolute;
-		top: -4px;
+		border: none;
 		right: 18px;
-		bottom: -14px;
-		z-index: -10;
-		transform: rotate(45deg);
-		// border-top: 1px solid #95a5a6;
-		// border-left: 1px solid #95a5a6;
 	}
 
 	.dropdown-header {
diff --git a/p/themes/Mapco/mapco.css b/p/themes/Mapco/mapco.css
index f411802b9..741df030b 100644
--- a/p/themes/Mapco/mapco.css
+++ b/p/themes/Mapco/mapco.css
@@ -234,16 +234,8 @@ form th {
 	text-align: left;
 }
 .dropdown-menu::after {
-	background: #f9fafb;
-	width: 10px;
-	height: 10px;
-	content: "";
-	position: absolute;
-	top: -4px;
+	border: none;
 	right: 18px;
-	bottom: -14px;
-	z-index: -10;
-	transform: rotate(45deg);
 }
 .dropdown-menu .dropdown-header {
 	margin: 1.75rem 0 0.5rem 2rem;
diff --git a/p/themes/Mapco/mapco.rtl.css b/p/themes/Mapco/mapco.rtl.css
index 269ae3ca6..44beb1a01 100644
--- a/p/themes/Mapco/mapco.rtl.css
+++ b/p/themes/Mapco/mapco.rtl.css
@@ -234,16 +234,8 @@ form th {
 	text-align: right;
 }
 .dropdown-menu::after {
-	background: #f9fafb;
-	width: 10px;
-	height: 10px;
-	content: "";
-	position: absolute;
-	top: -4px;
+	border: none;
 	left: 18px;
-	bottom: -14px;
-	z-index: -10;
-	transform: rotate(-45deg);
 }
 .dropdown-menu .dropdown-header {
 	margin: 1.75rem 2rem 0.5rem 0;
diff --git a/p/themes/Origine/origine.css b/p/themes/Origine/origine.css
index d5a779502..05bf07157 100644
--- a/p/themes/Origine/origine.css
+++ b/p/themes/Origine/origine.css
@@ -359,18 +359,7 @@ a.btn {
 }
 
 .dropdown-menu::after {
-	background: #fff;
-	width: 10px;
-	height: 10px;
-	border-top: 1px solid #ddd;
-	/* @noflip */
-	border-left: 1px solid #ddd;
-	content: "";
-	position: absolute;
-	top: -6px;
-	right: 13px;
-	z-index: -10;
-	transform: rotate(45deg);
+	border-color: #ddd;
 }
 
 .dropdown-header {
diff --git a/p/themes/Origine/origine.rtl.css b/p/themes/Origine/origine.rtl.css
index ea94b36ae..32e502617 100644
--- a/p/themes/Origine/origine.rtl.css
+++ b/p/themes/Origine/origine.rtl.css
@@ -359,18 +359,7 @@ a.btn {
 }
 
 .dropdown-menu::after {
-	background: #fff;
-	width: 10px;
-	height: 10px;
-	border-top: 1px solid #ddd;
-	/* @noflip */
-	border-right: 1px solid #ddd;
-	content: "";
-	position: absolute;
-	top: -6px;
-	left: 13px;
-	z-index: -10;
-	transform: rotate(-45deg);
+	border-color: #ddd;
 }
 
 .dropdown-header {
diff --git a/p/themes/Pafat/pafat.css b/p/themes/Pafat/pafat.css
index 19794585c..e1c55e458 100644
--- a/p/themes/Pafat/pafat.css
+++ b/p/themes/Pafat/pafat.css
@@ -327,17 +327,8 @@ a.btn {
 }
 
 .dropdown-menu::after {
-	background: #fff;
-	width: 10px;
-	height: 10px;
-	border-top: 1px solid #aaa;
-	border-left: 1px solid #aaa;
-	content: "";
-	position: absolute;
-	top: -6px;
-	right: 13px;
-	z-index: -10;
-	transform: rotate(45deg);
+	border-color: #aaa;
+	right: 8px;
 }
 
 .dropdown-header {
diff --git a/p/themes/Pafat/pafat.rtl.css b/p/themes/Pafat/pafat.rtl.css
index d3efed136..7716c2115 100644
--- a/p/themes/Pafat/pafat.rtl.css
+++ b/p/themes/Pafat/pafat.rtl.css
@@ -327,17 +327,8 @@ a.btn {
 }
 
 .dropdown-menu::after {
-	background: #fff;
-	width: 10px;
-	height: 10px;
-	border-top: 1px solid #aaa;
-	border-right: 1px solid #aaa;
-	content: "";
-	position: absolute;
-	top: -6px;
-	left: 13px;
-	z-index: -10;
-	transform: rotate(-45deg);
+	border-color: #aaa;
+	left: 8px;
 }
 
 .dropdown-header {
diff --git a/p/themes/Screwdriver/screwdriver.css b/p/themes/Screwdriver/screwdriver.css
index 72df5d7ea..6f29c1562 100644
--- a/p/themes/Screwdriver/screwdriver.css
+++ b/p/themes/Screwdriver/screwdriver.css
@@ -373,17 +373,7 @@ a.btn {
 }
 
 .dropdown-menu::after {
-	background: #222;
-	width: 10px;
-	height: 10px;
-	border-top: 1px solid #171717;
-	border-left: 1px solid #171717;
-	content: "";
-	position: absolute;
-	top: -6px;
-	right: 13px;
-	z-index: -10;
-	transform: rotate(45deg);
+	border-color: #171717;
 }
 
 .configure .dropdown-header {
diff --git a/p/themes/Screwdriver/screwdriver.rtl.css b/p/themes/Screwdriver/screwdriver.rtl.css
index 34aea5d3b..7dd1bc717 100644
--- a/p/themes/Screwdriver/screwdriver.rtl.css
+++ b/p/themes/Screwdriver/screwdriver.rtl.css
@@ -373,17 +373,7 @@ a.btn {
 }
 
 .dropdown-menu::after {
-	background: #222;
-	width: 10px;
-	height: 10px;
-	border-top: 1px solid #171717;
-	border-right: 1px solid #171717;
-	content: "";
-	position: absolute;
-	top: -6px;
-	left: 13px;
-	z-index: -10;
-	transform: rotate(-45deg);
+	border-color: #171717;
 }
 
 .configure .dropdown-header {
diff --git a/p/themes/Swage/swage.css b/p/themes/Swage/swage.css
index a02000d02..47c893007 100644
--- a/p/themes/Swage/swage.css
+++ b/p/themes/Swage/swage.css
@@ -296,6 +296,9 @@ form th {
 .dropdown-menu .dropdown-header {
 	cursor: default;
 }
+.dropdown-menu::after {
+	content: none;
+}
 .dropdown-menu > .item {
 	padding: 0;
 	margin-left: 10px;
diff --git a/p/themes/Swage/swage.rtl.css b/p/themes/Swage/swage.rtl.css
index 1ea6dd236..b8a2eea2d 100644
--- a/p/themes/Swage/swage.rtl.css
+++ b/p/themes/Swage/swage.rtl.css
@@ -296,6 +296,9 @@ form th {
 .dropdown-menu .dropdown-header {
 	cursor: default;
 }
+.dropdown-menu::after {
+	content: none;
+}
 .dropdown-menu > .item {
 	padding: 0;
 	margin-right: 10px;
diff --git a/p/themes/Swage/swage.scss b/p/themes/Swage/swage.scss
index de71c5fdf..5ad678cda 100644
--- a/p/themes/Swage/swage.scss
+++ b/p/themes/Swage/swage.scss
@@ -376,6 +376,10 @@ form {
 		cursor: default;
 	}
 
+	&::after {
+		content: none;
+	}
+
 	> {
 		.item {
 
diff --git a/p/themes/base-theme/template.css b/p/themes/base-theme/template.css
index 1c3b0490c..63d7a3b41 100644
--- a/p/themes/base-theme/template.css
+++ b/p/themes/base-theme/template.css
@@ -336,6 +336,20 @@ a.btn {
 	right: 0;
 }
 
+.dropdown-menu::after {
+	background-color: inherit;
+	width: 10px;
+	height: 10px;
+	border-width: 1px 0 0 1px;
+	border-style: solid;
+	content: "";
+	position: absolute;
+	top: -6px;
+	right: 13px;
+	z-index: -10;
+	transform: rotate(45deg);
+}
+
 .dropdown-menu-scrollable {
 	max-height: min(75vh, 50em);
 	overflow-x: hidden;
@@ -1451,6 +1465,10 @@ input:checked + .slide-container .properties {
 		box-shadow: -3px 0 3px #aaa;
 	}
 
+	.configure .dropdown-target:target ~ .dropdown-toggle::after {
+		content: none;
+	}
+
 	.dropdown-target:target ~ .dropdown-menu {
 		display: table-cell;
 		z-index: 1000;
diff --git a/p/themes/base-theme/template.rtl.css b/p/themes/base-theme/template.rtl.css
index 78d4e45af..e5bc46970 100644
--- a/p/themes/base-theme/template.rtl.css
+++ b/p/themes/base-theme/template.rtl.css
@@ -336,6 +336,20 @@ a.btn {
 	left: 0;
 }
 
+.dropdown-menu::after {
+	background-color: inherit;
+	width: 10px;
+	height: 10px;
+	border-width: 1px 1px 0 0;
+	border-style: solid;
+	content: "";
+	position: absolute;
+	top: -6px;
+	left: 13px;
+	z-index: -10;
+	transform: rotate(-45deg);
+}
+
 .dropdown-menu-scrollable {
 	max-height: min(75vh, 50em);
 	overflow-x: hidden;
@@ -1451,6 +1465,10 @@ input:checked + .slide-container .properties {
 		box-shadow: 3px 0 3px #aaa;
 	}
 
+	.configure .dropdown-target:target ~ .dropdown-toggle::after {
+		content: none;
+	}
+
 	.dropdown-target:target ~ .dropdown-menu {
 		display: table-cell;
 		z-index: 1000;