Improved: navigation menu structure (#4937)

3 files changed, 24 insertions, 19 deletions

diff --git a/p/themes/Swage/swage.css b/p/themes/Swage/swage.css
index 0ebdfa3fb..3bf9d8684 100644
--- a/p/themes/Swage/swage.css
+++ b/p/themes/Swage/swage.css
@@ -54,10 +54,9 @@ select:invalid {
 	box-shadow: none;
 }
 
-.nav-list .item, .nav-list .nav-header {
-	height: 2.5em;
+.nav-list .item .nav-header, .nav-list .item {
+	min-height: 2.5em;
 	line-height: 2.5;
-	font-size: 0.9rem;
 }
 
 .dropdown-menu > .item a,
@@ -263,7 +262,10 @@ form th {
 	background-image: url("./icons/disabled-light.svg");
 }
 
-.nav-list .nav-header {
+.nav-list {
+	font-size: 0.9rem;
+}
+.nav-list .item .nav-header {
 	padding: 0 1rem;
 	font-weight: bold;
 	background-color: var(--color-background-aside);
diff --git a/p/themes/Swage/swage.rtl.css b/p/themes/Swage/swage.rtl.css
index f8f031567..d2282f52c 100644
--- a/p/themes/Swage/swage.rtl.css
+++ b/p/themes/Swage/swage.rtl.css
@@ -54,10 +54,9 @@ select:invalid {
 	box-shadow: none;
 }
 
-.nav-list .item, .nav-list .nav-header {
-	height: 2.5em;
+.nav-list .item .nav-header, .nav-list .item {
+	min-height: 2.5em;
 	line-height: 2.5;
-	font-size: 0.9rem;
 }
 
 .dropdown-menu > .item a,
@@ -263,7 +262,10 @@ form th {
 	background-image: url("./icons/disabled-light.svg");
 }
 
-.nav-list .nav-header {
+.nav-list {
+	font-size: 0.9rem;
+}
+.nav-list .item .nav-header {
 	padding: 0 1rem;
 	font-weight: bold;
 	background-color: var(--color-background-aside);
diff --git a/p/themes/Swage/swage.scss b/p/themes/Swage/swage.scss
index a0570bb16..e24e9da7f 100644
--- a/p/themes/Swage/swage.scss
+++ b/p/themes/Swage/swage.scss
@@ -76,9 +76,8 @@ $color_hover:	#fff;
 }
 
 %nav-list {
-	height: 2.5em;
+	min-height: 2.5em;
 	line-height: 2.5;
-	font-size: 0.9rem;
 }
 
 %dropdown {
@@ -338,20 +337,22 @@ form {
 }
 
 .nav-list {
-	.nav-header {
-
-		@extend %nav-list;
-		padding: 0 1rem;
-		font-weight: bold;
-		background-color: var(--color-background-aside);
-		color: var(--color-text-light);
-		cursor: default;
-	}
+	font-size: 0.9rem;
 
 	.item {
 
 		@extend %nav-list;
 
+		.nav-header {
+
+			@extend %nav-list;
+			padding: 0 1rem;
+			font-weight: bold;
+			background-color: var(--color-background-aside);
+			color: var(--color-text-light);
+			cursor: default;
+		}
+
 		a:hover {
 			background-color: var(--color-background-nav-darker);
 			color: var(--color-text-light);