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

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 {

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 {

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 {

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;

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;

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 {

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 {

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 {

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 {

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 {

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;

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;

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 {

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 {

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 {

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 {

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 {

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 {

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;

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;

p/themes/Swage/swage.scss

@@ -376,6 +376,10 @@ form {
 		cursor: default;
 	}
 
+	&::after {
+		content: none;
+	}
+
 	> {
 		.item {
 

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;

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;