Navigation buttons: Group icons (.group instead of .stick) (#5737)

* replace stick with group + update the themes

* Update nav_menu.phtml

---------

Co-authored-by: math-gh <>

1 files changed, 46 insertions, 18 deletions

diff --git a/p/themes/Mapco/mapco.rtl.css b/p/themes/Mapco/mapco.rtl.css
index bda493487..c52c22a57 100644
--- a/p/themes/Mapco/mapco.rtl.css
+++ b/p/themes/Mapco/mapco.rtl.css
@@ -531,13 +531,19 @@ form th {
 }
 
 /*=== Buttons */
-.stick input, .stick .btn {
+.stick input, .stick .btn,
+.group input,
+.group .btn {
 	border-radius: 0;
 }
-.stick .btn:first-child {
+.stick .btn:first-child,
+.group .btn:first-child {
 	border-radius: 0 5px 5px 0;
 }
-.stick .btn:last-child, .stick input:last-child, .stick .dropdown:last-child > .btn {
+.stick .btn:last-child, .stick input:last-child, .stick .dropdown:last-child > .btn,
+.group .btn:last-child,
+.group input:last-child,
+.group .dropdown:last-child > .btn {
 	border-radius: 5px 0 0 5px;
 }
 .stick .btn + .btn,
@@ -548,7 +554,16 @@ form th {
 .stick input + .dropdown > .btn,
 .stick .dropdown + .btn,
 .stick .dropdown + input,
-.stick .dropdown + .dropdown > .btn {
+.stick .dropdown + .dropdown > .btn,
+.group .btn + .btn,
+.group .btn + input,
+.group .btn + .dropdown > .btn,
+.group input + .btn,
+.group input + input,
+.group input + .dropdown > .btn,
+.group .dropdown + .btn,
+.group .dropdown + input,
+.group .dropdown + .dropdown > .btn {
 	border-right: 1px solid #d5d8db;
 }
 
@@ -819,7 +834,8 @@ main.prompt {
 .nav_menu .btn:hover {
 	background-color: #d5d8db;
 }
-.nav_menu .stick .btn {
+.nav_menu .stick .btn,
+.nav_menu .group .btn {
 	border-right-width: 0;
 	padding: 0.5rem 1rem;
 	background-color: #f9fafb;
@@ -827,35 +843,44 @@ main.prompt {
 	background-repeat: no-repeat;
 	transition: all 0.15s ease-in-out;
 }
-.nav_menu .stick .btn:hover {
+.nav_menu .stick .btn:hover,
+.nav_menu .group .btn:hover {
 	background-color: #d5d8db;
 }
-.nav_menu .stick .btn.active {
+.nav_menu .stick .btn.active,
+.nav_menu .group .btn.active {
 	background-color: #36c;
 }
-.nav_menu .stick .btn#toggle-read.active .icon {
+.nav_menu .stick .btn#toggle-read.active .icon,
+.nav_menu .group .btn#toggle-read.active .icon {
 	filter: brightness(3.5);
 }
-.nav_menu .stick .btn#toggle-unread.active .icon {
+.nav_menu .stick .btn#toggle-unread.active .icon,
+.nav_menu .group .btn#toggle-unread.active .icon {
 	filter: brightness(3.5) grayscale(1);
 }
-.nav_menu .stick .btn.read_all {
+.nav_menu .stick .btn.read_all,
+.nav_menu .group .btn.read_all {
 	padding: 5px 16px;
 	color: #303136;
 	background-color: #f9fafb;
 	transition: all 0.15s ease-in-out;
 }
-.nav_menu .stick .btn.read_all:hover {
+.nav_menu .stick .btn.read_all:hover,
+.nav_menu .group .btn.read_all:hover {
 	background-color: #d5d8db;
 }
-.nav_menu .stick .dropdown:not(#dropdown-search-wrapper) a.dropdown-toggle {
+.nav_menu .stick .dropdown:not(#dropdown-search-wrapper) a.dropdown-toggle,
+.nav_menu .group .dropdown:not(#dropdown-search-wrapper) a.dropdown-toggle {
 	border-right-width: 0;
 	background-image: url(icons/more.svg);
 }
-.nav_menu .stick .dropdown:not(#dropdown-search-wrapper) a.dropdown-toggle .icon {
+.nav_menu .stick .dropdown:not(#dropdown-search-wrapper) a.dropdown-toggle .icon,
+.nav_menu .group .dropdown:not(#dropdown-search-wrapper) a.dropdown-toggle .icon {
 	display: none;
 }
-.nav_menu .stick #dropdown-search-wrapper.dropdown a.dropdown-toggle {
+.nav_menu .stick #dropdown-search-wrapper.dropdown a.dropdown-toggle,
+.nav_menu .group #dropdown-search-wrapper.dropdown a.dropdown-toggle {
 	border-right-width: 0;
 }
 
@@ -1244,14 +1269,17 @@ main.prompt {
 		margin: 0;
 		padding: 0.85rem 1.25rem;
 	}
-	.nav_menu .stick {
+	.nav_menu .stick,
+.nav_menu .group {
 		margin: 0.5rem 0.5rem;
 	}
-	.nav_menu .stick .btn {
+	.nav_menu .stick .btn,
+.nav_menu .group .btn {
 		margin: 0;
 		padding: 0.85rem 1.25rem;
 	}
-	.nav_menu .stick .btn.read_all {
+	.nav_menu .stick .btn.read_all,
+.nav_menu .group .btn.read_all {
 		padding: 0.85rem 1.25rem;
 	}
 	.nav_menu .search .input {
@@ -1324,4 +1352,4 @@ body.register {
 a, button.as-link {
 	outline: none;
 	color: #36c;
-}
+}
\ No newline at end of file