Improved: Remove <li> as separator (#4597)

* templates

* themes

* fix

* fix

* fixes

* fix

3 files changed, 64 insertions, 22 deletions

diff --git a/p/themes/Ansum/_components.scss b/p/themes/Ansum/_components.scss
index acb2430ff..35298b4de 100644
--- a/p/themes/Ansum/_components.scss
+++ b/p/themes/Ansum/_components.scss
@@ -38,8 +38,7 @@
 	}
 
 	.dropdown-header {
-		// padding: 0 5px 5px;
-		margin: 1rem 0.5rem 1rem 1rem;
+		padding: 1rem 0.5rem 1rem 1rem;
 		font-weight: bold;
 		text-align: left;
 		color: variables.$grey-dark;
@@ -74,12 +73,35 @@
 			}
 		}
 
+		&:not(.addItem) {
+			a:hover,
+			button:hover {
+				background: variables.$main-first;
+				color: variables.$white;
+
+				.icon {
+					filter: brightness(3);
+				}
+			}
+		}
+
 		&[aria-checked="true"] {
 			a::before {
 				margin: 0 0 0 -14px;
 				font-weight: bold;
 			}
 		}
+
+		~ .dropdown-header {
+			margin-top: 0.75rem;
+			padding-top: 1.75rem;
+			border-top-color: variables.$grey-light;
+		}
+
+		&.separator {
+			margin-top: 0.75rem;
+			border-top-color: variables.$grey-light;
+		}
 	}
 
 	.input {
@@ -90,12 +112,6 @@
 		}
 	}
 
-	.separator {
-		margin: 0.75rem 0;
-		border-bottom: 1px solid variables.$grey-light;
-		// display: none;
-	}
-
 }
 
 .tree .tree-folder .tree-folder-items .dropdown-menu {
diff --git a/p/themes/Ansum/ansum.css b/p/themes/Ansum/ansum.css
index 0aeae0e08..8e2ace58e 100644
--- a/p/themes/Ansum/ansum.css
+++ b/p/themes/Ansum/ansum.css
@@ -243,7 +243,7 @@ form th {
 	right: 17px;
 }
 .dropdown-menu .dropdown-header {
-	margin: 1rem 0.5rem 1rem 1rem;
+	padding: 1rem 0.5rem 1rem 1rem;
 	font-weight: bold;
 	text-align: left;
 	color: #766556;
@@ -270,19 +270,33 @@ form th {
 .dropdown-menu .item:not(.addItem):hover .icon {
 	filter: grayscale(100%) brightness(2.5);
 }
+.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) button:hover .icon {
+	filter: brightness(3);
+}
 .dropdown-menu .item[aria-checked=true] a::before {
 	margin: 0 0 0 -14px;
 	font-weight: bold;
 }
+.dropdown-menu .item ~ .dropdown-header {
+	margin-top: 0.75rem;
+	padding-top: 1.75rem;
+	border-top-color: #f5f0ec;
+}
+.dropdown-menu .item.separator {
+	margin-top: 0.75rem;
+	border-top-color: #f5f0ec;
+}
 .dropdown-menu .input select, .dropdown-menu .input input {
 	margin: 0 auto 5px;
 	padding: 2px 5px;
 	border-radius: 3px;
 }
-.dropdown-menu .separator {
-	margin: 0.75rem 0;
-	border-bottom: 1px solid #f5f0ec;
-}
 
 .tree .tree-folder .tree-folder-items .dropdown-menu .item {
 	padding: 0;
@@ -1363,6 +1377,4 @@ body.register {
 a, button.as-link {
 	outline: none;
 	color: #ca7227;
-}
-
-/*# sourceMappingURL=ansum.css.map */
+}
\ No newline at end of file
diff --git a/p/themes/Ansum/ansum.rtl.css b/p/themes/Ansum/ansum.rtl.css
index 429cb36aa..f09f5c1bf 100644
--- a/p/themes/Ansum/ansum.rtl.css
+++ b/p/themes/Ansum/ansum.rtl.css
@@ -243,7 +243,7 @@ form th {
 	left: 17px;
 }
 .dropdown-menu .dropdown-header {
-	margin: 1rem 1rem 1rem 0.5rem;
+	padding: 1rem 1rem 1rem 0.5rem;
 	font-weight: bold;
 	text-align: right;
 	color: #766556;
@@ -270,19 +270,33 @@ form th {
 .dropdown-menu .item:not(.addItem):hover .icon {
 	filter: grayscale(100%) brightness(2.5);
 }
+.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) button:hover .icon {
+	filter: brightness(3);
+}
 .dropdown-menu .item[aria-checked=true] a::before {
 	margin: 0 -14px 0 0;
 	font-weight: bold;
 }
+.dropdown-menu .item ~ .dropdown-header {
+	margin-top: 0.75rem;
+	padding-top: 1.75rem;
+	border-top-color: #f5f0ec;
+}
+.dropdown-menu .item.separator {
+	margin-top: 0.75rem;
+	border-top-color: #f5f0ec;
+}
 .dropdown-menu .input select, .dropdown-menu .input input {
 	margin: 0 auto 5px;
 	padding: 2px 5px;
 	border-radius: 3px;
 }
-.dropdown-menu .separator {
-	margin: 0.75rem 0;
-	border-bottom: 1px solid #f5f0ec;
-}
 
 .tree .tree-folder .tree-folder-items .dropdown-menu .item {
 	padding: 0;
@@ -1363,4 +1377,4 @@ body.register {
 a, button.as-link {
 	outline: none;
 	color: #ca7227;
-}
+}
\ No newline at end of file