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>

1 files changed, 22 insertions, 30 deletions

diff --git a/p/themes/Mapco/mapco.rtl.css b/p/themes/Mapco/mapco.rtl.css
index 7ed00631a..b962e5fe0 100644
--- a/p/themes/Mapco/mapco.rtl.css
+++ b/p/themes/Mapco/mapco.rtl.css
@@ -220,6 +220,10 @@ form th {
 }
 
 /*=== Dropdown */
+.dropdown .dropdown-target:target + .btn {
+	background-color: #d5d8db;
+}
+
 .dropdown-menu {
 	margin: 9px 0 0 0;
 	padding: 0.5rem 0 1rem 0;
@@ -246,20 +250,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: #303136;
 	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: #36c;
 	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: brightness(3);
 }
 .dropdown-menu .item.dropdown-section {
@@ -532,7 +542,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,
@@ -843,13 +853,16 @@ main.prompt {
 .nav_menu .stick .btn.read_all:hover {
 	background-color: #d5d8db;
 }
-.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;
+}
 
 /*=== Content of feed articles */
 .content, .content.thin {
@@ -1213,25 +1226,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%;
+		display: none;
 	}
 	.header .item.configure {
 		position: absolute;
@@ -1264,10 +1260,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;
@@ -1338,4 +1330,4 @@ body.register {
 a, button.as-link {
 	outline: none;
 	color: #36c;
-}
\ No newline at end of file
+}