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

app/views/helpers/index/normal/entry_bottom.phtml

@@ -44,7 +44,7 @@
 			<a class="dropdown-toggle" href="#dropdown-labels-<?= $this->entry->id() ?>"><?php
 				echo _t('index.menu.tags');
 			?></a>
-			<ul class="dropdown-menu dropdown-menu-scrollable">
+			<ul class="dropdown-menu dropdown-menu-scrollable scrollbar-thin">
 				<li class="dropdown-close"><a href="#close">❌</a></li>
 				<!-- Ajax -->
 			</ul>

p/themes/Alternative-Dark/adark.css

@@ -1149,6 +1149,12 @@ a.btn {
 		width: 400px;
 	}
 
+	.dropdown-target:target ~ .dropdown-toggle::after {
+		background-color: #333;
+		border-top: 2px solid #262626;
+		border-left: 2px solid #262626;
+	}
+
 	.day .name {
 		display: none!important;
 		font-size: 1.1rem;

p/themes/Alternative-Dark/adark.rtl.css

@@ -1149,6 +1149,12 @@ a.btn {
 		width: 400px;
 	}
 
+	.dropdown-target:target ~ .dropdown-toggle::after {
+		background-color: #333;
+		border-top: 2px solid #262626;
+		border-right: 2px solid #262626;
+	}
+
 	.day .name {
 		display: none!important;
 		font-size: 1.1rem;

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;

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;
 }
 

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;

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;

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;

p/themes/BlueLagoon/BlueLagoon.css

@@ -1322,6 +1322,13 @@ a.btn {
 		width: 400px;
 	}
 
+	.dropdown-target:target ~ .dropdown-toggle::after {
+		background-color: #222;
+		border-top: 1px solid #171717;
+		border-left: 1px solid #171717;
+		right: 13px;
+	}
+
 	.day .name {
 		display: none;
 	}

p/themes/BlueLagoon/BlueLagoon.rtl.css

@@ -1322,6 +1322,13 @@ a.btn {
 		width: 400px;
 	}
 
+	.dropdown-target:target ~ .dropdown-toggle::after {
+		background-color: #222;
+		border-top: 1px solid #171717;
+		border-right: 1px solid #171717;
+		left: 13px;
+	}
+
 	.day .name {
 		display: none;
 	}

p/themes/Dark/dark.css

@@ -1172,6 +1172,12 @@ a.btn {
 		width: 400px;
 	}
 
+	.dropdown-target:target ~ .dropdown-toggle::after {
+		background-color: #1a1a1a;
+		border-top: 1px solid #888;
+		border-left: 1px solid #888;
+	}
+
 	.day .name {
 		font-size: 1.1rem;
 	}

p/themes/Dark/dark.rtl.css

@@ -1172,6 +1172,12 @@ a.btn {
 		width: 400px;
 	}
 
+	.dropdown-target:target ~ .dropdown-toggle::after {
+		background-color: #1a1a1a;
+		border-top: 1px solid #888;
+		border-right: 1px solid #888;
+	}
+
 	.day .name {
 		font-size: 1.1rem;
 	}

p/themes/Flat/flat.css

@@ -1165,6 +1165,16 @@ a.btn {
 		width: 400px;
 	}
 
+	.dropdown-target:target ~ .dropdown-toggle::after {
+		background-color: #fafafa;
+		border-top: 1px solid #95a5a6;
+		border-left: 1px solid #95a5a6;
+	}
+
+	.dropdown-target:target ~ .btn.dropdown-toggle::after {
+		bottom: -19px;
+	}
+
 	.day .name {
 		font-size: 1.1rem;
 	}

p/themes/Flat/flat.rtl.css

@@ -1165,6 +1165,16 @@ a.btn {
 		width: 400px;
 	}
 
+	.dropdown-target:target ~ .dropdown-toggle::after {
+		background-color: #fafafa;
+		border-top: 1px solid #95a5a6;
+		border-right: 1px solid #95a5a6;
+	}
+
+	.dropdown-target:target ~ .btn.dropdown-toggle::after {
+		bottom: -19px;
+	}
+
 	.day .name {
 		font-size: 1.1rem;
 	}

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;

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;

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;

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;

p/themes/Origine-compact/origine-compact.css

@@ -1247,6 +1247,16 @@ a.btn,
 		width: 400px;
 	}
 
+	.dropdown-target:target ~ .dropdown-toggle::after {
+		background-color: #fff;
+		border-top: 1px solid #ddd;
+		border-left: 1px solid #ddd;
+	}
+
+	.dropdown-target:target ~ .dropdown-toggle:not(.btn) ~ .dropdown-menu {
+		margin-top: 5px;
+	}
+
 	.day .name {
 		font-size: 1.1rem;
 		text-shadow: none;

p/themes/Origine-compact/origine-compact.rtl.css

@@ -1247,6 +1247,16 @@ a.btn,
 		width: 400px;
 	}
 
+	.dropdown-target:target ~ .dropdown-toggle::after {
+		background-color: #fff;
+		border-top: 1px solid #ddd;
+		border-right: 1px solid #ddd;
+	}
+
+	.dropdown-target:target ~ .dropdown-toggle:not(.btn) ~ .dropdown-menu {
+		margin-top: 5px;
+	}
+
 	.day .name {
 		font-size: 1.1rem;
 		text-shadow: none;

p/themes/Origine/origine.css

@@ -1188,6 +1188,12 @@ a.btn {
 		width: 400px;
 	}
 
+	.dropdown-target:target ~ .dropdown-toggle::after {
+		background-color: #fff;
+		border-top: 1px solid #ddd;
+		border-left: 1px solid #ddd;
+	}
+
 	.form-group.form-actions {
 		margin-left: -15px;
 		margin-right: -15px;

p/themes/Origine/origine.rtl.css

@@ -1188,6 +1188,12 @@ a.btn {
 		width: 400px;
 	}
 
+	.dropdown-target:target ~ .dropdown-toggle::after {
+		background-color: #fff;
+		border-top: 1px solid #ddd;
+		border-right: 1px solid #ddd;
+	}
+
 	.form-group.form-actions {
 		margin-right: -15px;
 		margin-left: -15px;

p/themes/Pafat/pafat.css

@@ -1176,6 +1176,11 @@ a.signin {
 		width: 400px;
 	}
 
+	.dropdown-target:target ~ .dropdown-toggle::after {
+		border-top: 1px solid #aaa;
+		border-left: 1px solid #aaa;
+	}
+
 	.day .name {
 		font-size: 1.1rem;
 		text-shadow: none;

p/themes/Pafat/pafat.rtl.css

@@ -1176,6 +1176,11 @@ a.signin {
 		width: 400px;
 	}
 
+	.dropdown-target:target ~ .dropdown-toggle::after {
+		border-top: 1px solid #aaa;
+		border-right: 1px solid #aaa;
+	}
+
 	.day .name {
 		font-size: 1.1rem;
 		text-shadow: none;

p/themes/Screwdriver/screwdriver.css

@@ -1307,6 +1307,12 @@ a.btn {
 		width: 400px;
 	}
 
+	.dropdown-target:target ~ .dropdown-toggle::after {
+		background-color: #222;
+		border-top: 1px solid #171717;
+		border-left: 1px solid #171717;
+	}
+
 	.day .name {
 		display: none;
 	}

p/themes/Screwdriver/screwdriver.rtl.css

@@ -1307,6 +1307,12 @@ a.btn {
 		width: 400px;
 	}
 
+	.dropdown-target:target ~ .dropdown-toggle::after {
+		background-color: #222;
+		border-top: 1px solid #171717;
+		border-right: 1px solid #171717;
+	}
+
 	.day .name {
 		display: none;
 	}

p/themes/Swage/swage.css

@@ -1011,6 +1011,10 @@ form th {
 		padding-right: 10px;
 	}
 
+	.dropdown-target:target ~ .dropdown-toggle.btn::after {
+		display: none;
+	}
+
 	.day .name {
 		font-size: 1.1rem;
 	}

p/themes/Swage/swage.rtl.css

@@ -1011,6 +1011,10 @@ form th {
 		padding-left: 10px;
 	}
 
+	.dropdown-target:target ~ .dropdown-toggle.btn::after {
+		display: none;
+	}
+
 	.day .name {
 		font-size: 1.1rem;
 	}

p/themes/Swage/swage.scss

@@ -1253,6 +1253,10 @@ form {
 		padding-right: 10px;
 	}
 
+	.dropdown-target:target ~ .dropdown-toggle.btn::after {
+		display: none;
+	}
+
 	.day .name {
 		font-size: 1.1rem;
 	}

p/themes/base-theme/template.css

@@ -1394,25 +1394,63 @@ input:checked + .slide-container .properties {
 		margin-left: 0;
 	}
 
+	.dropdown {
+		position: inherit;
+	}
+
 	.dropdown .dropdown-menu {
-		width: 100%;
+		width: 94%;
 		border-radius: 0;
-		bottom: 0;
-		position: fixed;
+		left: 3%;
+		right: 3%;
+		position: absolute;
+	}
+
+	.dropdown .dropdown-menu .item {
+		margin: 2px 0;
+	}
+
+	.dropdown .dropdown-menu .item button.as-link,
+	.dropdown .dropdown-menu .item button.as-link:hover, button.as-link:active {
+		width: 100%;
+	}
+
+	.dropdown-target:target ~ .dropdown-toggle {
+		position: relative;
+		overflow: visible;
+	}
+
+	.dropdown-target:target ~ .dropdown-toggle::after {
+		background-color: #fff;
+		width: 10px;
+		height: 10px;
+		content: "";
+		position: absolute;
+		right: 8px;
+		bottom: -17px;
+		transform: rotate(45deg);
+		z-index: 9999;
+		cursor: default;
+	}
+
+	.dropdown-target:target ~ .dropdown-toggle:not(.btn) ~ .dropdown-menu {
+		margin-top: 0;
 	}
 
 	.configure .dropdown .dropdown-menu {
 		width: 90%;
 		height: 100vh;
+		top: 0;
+		right: 0;
+		bottom: 0;
+		left: auto;
+		position: fixed;
+		padding-top: 0;
+		margin-top: 0;
 		overflow: auto;
 		box-shadow: -3px 0 3px #aaa;
 	}
 
-	.dropdown-target ~ .dropdown-menu {
-		width: 0;
-
-	}
-
 	.dropdown-target:target ~ .dropdown-menu {
 		display: table-cell;
 		z-index: 1000;

p/themes/base-theme/template.rtl.css

@@ -1394,25 +1394,63 @@ input:checked + .slide-container .properties {
 		margin-right: 0;
 	}
 
+	.dropdown {
+		position: inherit;
+	}
+
 	.dropdown .dropdown-menu {
-		width: 100%;
+		width: 94%;
 		border-radius: 0;
-		bottom: 0;
-		position: fixed;
+		right: 3%;
+		left: 3%;
+		position: absolute;
+	}
+
+	.dropdown .dropdown-menu .item {
+		margin: 2px 0;
+	}
+
+	.dropdown .dropdown-menu .item button.as-link,
+	.dropdown .dropdown-menu .item button.as-link:hover, button.as-link:active {
+		width: 100%;
+	}
+
+	.dropdown-target:target ~ .dropdown-toggle {
+		position: relative;
+		overflow: visible;
+	}
+
+	.dropdown-target:target ~ .dropdown-toggle::after {
+		background-color: #fff;
+		width: 10px;
+		height: 10px;
+		content: "";
+		position: absolute;
+		left: 8px;
+		bottom: -17px;
+		transform: rotate(-45deg);
+		z-index: 9999;
+		cursor: default;
+	}
+
+	.dropdown-target:target ~ .dropdown-toggle:not(.btn) ~ .dropdown-menu {
+		margin-top: 0;
 	}
 
 	.configure .dropdown .dropdown-menu {
 		width: 90%;
 		height: 100vh;
+		top: 0;
+		left: 0;
+		bottom: 0;
+		right: auto;
+		position: fixed;
+		padding-top: 0;
+		margin-top: 0;
 		overflow: auto;
 		box-shadow: 3px 0 3px #aaa;
 	}
 
-	.dropdown-target ~ .dropdown-menu {
-		width: 0;
-
-	}
-
 	.dropdown-target:target ~ .dropdown-menu {
 		display: table-cell;
 		z-index: 1000;