Search Improved: dropdown (#4994)

* first draft

* fix

* RTL CSS

* add link to documentation

* hide search button in desktop view

* rename .no-desktop to .only-mobile

* i18n

* add ID

* Theme: Swage

* Theme Scewdriver

* Theme Pafat

* Theme flat

* Theme: Adark

* Theme: Dark

* i18n: German

* i18n en-us

* fix i18n

* Update app/i18n/fr/gen.php

Co-authored-by: Alexandre Alapetite <alexandre@alapetite.fr>

* Update app/layout/nav_menu.phtml

Co-authored-by: Alexandre Alapetite <alexandre@alapetite.fr>

* Update app/layout/nav_menu.phtml

Co-authored-by: Alexandre Alapetite <alexandre@alapetite.fr>

* Update app/layout/nav_menu.phtml

Co-authored-by: Alexandre Alapetite <alexandre@alapetite.fr>

* wip

* mapco theme

* RTL for Ansum and Mapco

* fix

* fix

---------

Co-authored-by: Alexandre Alapetite <alexandre@alapetite.fr>

6 files changed, 68 insertions, 105 deletions

diff --git a/p/themes/Ansum/_components.scss b/p/themes/Ansum/_components.scss
index 36b660345..88ab37296 100644
--- a/p/themes/Ansum/_components.scss
+++ b/p/themes/Ansum/_components.scss
@@ -22,6 +22,12 @@
 }
 
 /*=== Dropdown */
+.dropdown {
+	.dropdown-target:target + .btn {
+		background-color: variables.$grey-medium-light;
+	}
+}
+
 .dropdown-menu {
 	margin: 9px 0 0 0;
 	padding: 0.5rem 0 1rem 0;
@@ -51,7 +57,9 @@
 
 		@include mixins.transition(all, 0.075s, ease-in-out);
 
-		a, .as-link {
+		> a,
+		> span,
+		> .as-link {
 			padding: 0 2rem;
 			color: variables.$main-font-color;
 			font-size: inherit;
@@ -60,7 +68,10 @@
 			span.icon {
 				padding: 0 0.25rem !important;
 			}
+		}
 
+		> a,
+		> .as-link {
 			&:not(.addItem):hover {
 				background: variables.$main-first;
 				color: variables.$white;
@@ -86,7 +97,7 @@
 		}
 
 		&:not(.addItem) {
-			a:hover,
+			> a:hover,
 			button:hover {
 				background: variables.$main-first;
 				color: variables.$white;
diff --git a/p/themes/Ansum/_layout.scss b/p/themes/Ansum/_layout.scss
index cb5271dcd..78431f462 100644
--- a/p/themes/Ansum/_layout.scss
+++ b/p/themes/Ansum/_layout.scss
@@ -207,7 +207,7 @@ main.prompt {
 			}
 		}
 
-		.dropdown {
+		.dropdown:not(#dropdown-search-wrapper) {
 			a.dropdown-toggle {
 				border-left-width: 0;
 				background-image: url(icons/more.svg);
@@ -217,6 +217,12 @@ main.prompt {
 				}
 			}
 		}
+
+		#dropdown-search-wrapper.dropdown {
+			a.dropdown-toggle {
+				border-left-width: 0;
+			}
+		}
 	}
 }
 
diff --git a/p/themes/Ansum/_mobile.scss b/p/themes/Ansum/_mobile.scss
index bb13a0e83..6fbca4a52 100644
--- a/p/themes/Ansum/_mobile.scss
+++ b/p/themes/Ansum/_mobile.scss
@@ -35,35 +35,9 @@
 	}
 
 	.header {
-		display: block;
-		height: 8rem;
-
 		.item {
 			&.search {
-				display: block;
-
-				form {
-					display: inherit;
-				}
-
-				.stick {
-					display: flex;
-				}
-
-				input {
-					width: 90%;
-					height: 3.5rem;
-
-					&:focus {
-						width: 100%;
-
-					}
-				}
-
-				.btn {
-					min-height: 49px;
-					padding: 0.5rem 2rem;
-				}
+				display: none;
 			}
 
 			&.configure {
@@ -103,11 +77,7 @@
 		}
 
 		.search {
-			display: none;
-			max-width: 97%;
-
 			.input {
-
 				max-width: 97%;
 				width: 90px;
 
diff --git a/p/themes/Ansum/_sidebar.scss b/p/themes/Ansum/_sidebar.scss
index e92dd2ec4..7c21d159d 100644
--- a/p/themes/Ansum/_sidebar.scss
+++ b/p/themes/Ansum/_sidebar.scss
@@ -93,7 +93,7 @@
 		border-radius: 5px 0 0 5px;
 	}
 
-	.btn:last-child, input:last-child, .btn + .dropdown > .btn {
+	.btn:last-child, input:last-child, .dropdown:last-child > .btn {
 		border-radius: 0 5px 5px 0;
 	}
 
diff --git a/p/themes/Ansum/ansum.css b/p/themes/Ansum/ansum.css
index 03aa67e67..709861e18 100644
--- a/p/themes/Ansum/ansum.css
+++ b/p/themes/Ansum/ansum.css
@@ -221,6 +221,10 @@ form th {
 }
 
 /*=== Dropdown */
+.dropdown .dropdown-target:target + .btn {
+	background-color: #e4d8cc;
+}
+
 .dropdown-menu {
 	margin: 9px 0 0 0;
 	padding: 0.5rem 0 1rem 0;
@@ -247,20 +251,26 @@ form th {
 .dropdown-menu .item {
 	transition: all 0.075s ease-in-out;
 }
-.dropdown-menu .item a, .dropdown-menu .item .as-link {
+.dropdown-menu .item > a,
+.dropdown-menu .item > span,
+.dropdown-menu .item > .as-link {
 	padding: 0 2rem;
 	color: #363330;
 	font-size: inherit;
 	line-height: 2.5em;
 }
-.dropdown-menu .item a span.icon, .dropdown-menu .item .as-link span.icon {
+.dropdown-menu .item > a span.icon,
+.dropdown-menu .item > span span.icon,
+.dropdown-menu .item > .as-link span.icon {
 	padding: 0 0.25rem !important;
 }
-.dropdown-menu .item a:not(.addItem):hover, .dropdown-menu .item .as-link:not(.addItem):hover {
+.dropdown-menu .item > a:not(.addItem):hover,
+.dropdown-menu .item > .as-link:not(.addItem):hover {
 	background: #ca7227;
 	color: #fff;
 }
-.dropdown-menu .item a:not(.addItem):hover .icon, .dropdown-menu .item .as-link:not(.addItem):hover .icon {
+.dropdown-menu .item > a:not(.addItem):hover .icon,
+.dropdown-menu .item > .as-link:not(.addItem):hover .icon {
 	filter: grayscale(100%) brightness(2.5);
 }
 .dropdown-menu .item.dropdown-section {
@@ -272,12 +282,12 @@ form th {
 .dropdown-menu .item.dropdown-section .item a, .dropdown-menu .item.dropdown-section .item .as-link {
 	padding-left: 2rem;
 }
-.dropdown-menu .item:not(.addItem) a:hover,
+.dropdown-menu .item:not(.addItem) > a:hover,
 .dropdown-menu .item:not(.addItem) button:hover {
 	background: #ca7227;
 	color: #fff;
 }
-.dropdown-menu .item:not(.addItem) a:hover .icon,
+.dropdown-menu .item:not(.addItem) > a:hover .icon,
 .dropdown-menu .item:not(.addItem) button:hover .icon {
 	filter: brightness(3);
 }
@@ -518,7 +528,7 @@ form th {
 .stick .btn:first-child {
 	border-radius: 5px 0 0 5px;
 }
-.stick .btn:last-child, .stick input:last-child, .stick .btn + .dropdown > .btn {
+.stick .btn:last-child, .stick input:last-child, .stick .dropdown:last-child > .btn {
 	border-radius: 0 5px 5px 0;
 }
 .stick .btn + .btn,
@@ -819,13 +829,16 @@ main.prompt {
 .nav_menu .stick .btn.read_all:hover {
 	background-color: #e4d8cc;
 }
-.nav_menu .stick .dropdown a.dropdown-toggle {
+.nav_menu .stick .dropdown:not(#dropdown-search-wrapper) a.dropdown-toggle {
 	border-left-width: 0;
 	background-image: url(icons/more.svg);
 }
-.nav_menu .stick .dropdown a.dropdown-toggle .icon {
+.nav_menu .stick .dropdown:not(#dropdown-search-wrapper) a.dropdown-toggle .icon {
 	display: none;
 }
+.nav_menu .stick #dropdown-search-wrapper.dropdown a.dropdown-toggle {
+	border-left-width: 0;
+}
 
 #dropdown-query ~ .dropdown-menu .dropdown-header .icon {
 	vertical-align: middle;
@@ -1196,29 +1209,8 @@ main.prompt {
 #slider .toggle_aside .icon {
 		filter: grayscale(100%) brightness(2.5);
 	}
-	.header {
-		display: block;
-		height: 8rem;
-	}
 	.header .item.search {
-		display: block;
-	}
-	.header .item.search form {
-		display: inherit;
-	}
-	.header .item.search .stick {
-		display: flex;
-	}
-	.header .item.search input {
-		width: 90%;
-		height: 3.5rem;
-	}
-	.header .item.search input:focus {
-		width: 100%;
-	}
-	.header .item.search .btn {
-		min-height: 49px;
-		padding: 0.5rem 2rem;
+		display: none;
 	}
 	.header .item.configure {
 		position: absolute;
@@ -1246,10 +1238,6 @@ main.prompt {
 	.nav_menu .stick .btn.read_all {
 		padding: 0.85rem 1.25rem;
 	}
-	.nav_menu .search {
-		display: none;
-		max-width: 97%;
-	}
 	.nav_menu .search .input {
 		max-width: 97%;
 		width: 90px;
diff --git a/p/themes/Ansum/ansum.rtl.css b/p/themes/Ansum/ansum.rtl.css
index b106da359..ad480c952 100644
--- a/p/themes/Ansum/ansum.rtl.css
+++ b/p/themes/Ansum/ansum.rtl.css
@@ -221,6 +221,10 @@ form th {
 }
 
 /*=== Dropdown */
+.dropdown .dropdown-target:target + .btn {
+	background-color: #e4d8cc;
+}
+
 .dropdown-menu {
 	margin: 9px 0 0 0;
 	padding: 0.5rem 0 1rem 0;
@@ -247,20 +251,26 @@ form th {
 .dropdown-menu .item {
 	transition: all 0.075s ease-in-out;
 }
-.dropdown-menu .item a, .dropdown-menu .item .as-link {
+.dropdown-menu .item > a,
+.dropdown-menu .item > span,
+.dropdown-menu .item > .as-link {
 	padding: 0 2rem;
 	color: #363330;
 	font-size: inherit;
 	line-height: 2.5em;
 }
-.dropdown-menu .item a span.icon, .dropdown-menu .item .as-link span.icon {
+.dropdown-menu .item > a span.icon,
+.dropdown-menu .item > span span.icon,
+.dropdown-menu .item > .as-link span.icon {
 	padding: 0 0.25rem !important;
 }
-.dropdown-menu .item a:not(.addItem):hover, .dropdown-menu .item .as-link:not(.addItem):hover {
+.dropdown-menu .item > a:not(.addItem):hover,
+.dropdown-menu .item > .as-link:not(.addItem):hover {
 	background: #ca7227;
 	color: #fff;
 }
-.dropdown-menu .item a:not(.addItem):hover .icon, .dropdown-menu .item .as-link:not(.addItem):hover .icon {
+.dropdown-menu .item > a:not(.addItem):hover .icon,
+.dropdown-menu .item > .as-link:not(.addItem):hover .icon {
 	filter: grayscale(100%) brightness(2.5);
 }
 .dropdown-menu .item.dropdown-section {
@@ -272,12 +282,12 @@ form th {
 .dropdown-menu .item.dropdown-section .item a, .dropdown-menu .item.dropdown-section .item .as-link {
 	padding-right: 2rem;
 }
-.dropdown-menu .item:not(.addItem) a:hover,
+.dropdown-menu .item:not(.addItem) > a:hover,
 .dropdown-menu .item:not(.addItem) button:hover {
 	background: #ca7227;
 	color: #fff;
 }
-.dropdown-menu .item:not(.addItem) a:hover .icon,
+.dropdown-menu .item:not(.addItem) > a:hover .icon,
 .dropdown-menu .item:not(.addItem) button:hover .icon {
 	filter: brightness(3);
 }
@@ -518,7 +528,7 @@ form th {
 .stick .btn:first-child {
 	border-radius: 0 5px 5px 0;
 }
-.stick .btn:last-child, .stick input:last-child, .stick .btn + .dropdown > .btn {
+.stick .btn:last-child, .stick input:last-child, .stick .dropdown:last-child > .btn {
 	border-radius: 5px 0 0 5px;
 }
 .stick .btn + .btn,
@@ -819,13 +829,16 @@ main.prompt {
 .nav_menu .stick .btn.read_all:hover {
 	background-color: #e4d8cc;
 }
-.nav_menu .stick .dropdown a.dropdown-toggle {
+.nav_menu .stick .dropdown:not(#dropdown-search-wrapper) a.dropdown-toggle {
 	border-right-width: 0;
 	background-image: url(icons/more.svg);
 }
-.nav_menu .stick .dropdown a.dropdown-toggle .icon {
+.nav_menu .stick .dropdown:not(#dropdown-search-wrapper) a.dropdown-toggle .icon {
 	display: none;
 }
+.nav_menu .stick #dropdown-search-wrapper.dropdown a.dropdown-toggle {
+	border-right-width: 0;
+}
 
 #dropdown-query ~ .dropdown-menu .dropdown-header .icon {
 	vertical-align: middle;
@@ -1196,29 +1209,8 @@ main.prompt {
 #slider .toggle_aside .icon {
 		filter: grayscale(100%) brightness(2.5);
 	}
-	.header {
-		display: block;
-		height: 8rem;
-	}
 	.header .item.search {
-		display: block;
-	}
-	.header .item.search form {
-		display: inherit;
-	}
-	.header .item.search .stick {
-		display: flex;
-	}
-	.header .item.search input {
-		width: 90%;
-		height: 3.5rem;
-	}
-	.header .item.search input:focus {
-		width: 100%;
-	}
-	.header .item.search .btn {
-		min-height: 49px;
-		padding: 0.5rem 2rem;
+		display: none;
 	}
 	.header .item.configure {
 		position: absolute;
@@ -1246,10 +1238,6 @@ main.prompt {
 	.nav_menu .stick .btn.read_all {
 		padding: 0.85rem 1.25rem;
 	}
-	.nav_menu .search {
-		display: none;
-		max-width: 97%;
-	}
 	.nav_menu .search .input {
 		max-width: 97%;
 		width: 90px;