Fix: article footer + improve: labeling (#4306)

* icon = open dropdown

* label icon

* added: link to edit labels

* dropdown-menu label: padding and hover

* improve input row

* CSS

* Update main.js

* Update main.js

* Update main.js

* fix

* make addItem button selectable via tabbing

* Fixed theme: Ansum

* tags menu: use the new icon

* Fixed theme: Flat design

make the manage button visible

* fixed Theme: Mapco

* Fixed theme: Pafat

4 files changed, 59 insertions, 11 deletions

diff --git a/p/themes/Ansum/_components.scss b/p/themes/Ansum/_components.scss
index 02b1563b1..c7270b39e 100644
--- a/p/themes/Ansum/_components.scss
+++ b/p/themes/Ansum/_components.scss
@@ -42,7 +42,7 @@
 
 	.dropdown-header {
 		// padding: 0 5px 5px;
-		margin: 1.75rem 0 0.5rem 2rem;
+		margin: 1rem 0.5rem 1rem 1rem;
 		font-weight: bold;
 		text-align: left;
 		color: variables.$grey-dark;
@@ -63,11 +63,11 @@
 			line-height: 2.5em;
 		}
 
-		&:hover {
+		&:not(.addItem):hover {
 			background: variables.$main-first;
 			color: variables.$white;
 
-			a, button {
+			a, button, label {
 				text-decoration: none;
 				color: variables.$white;
 			}
diff --git a/p/themes/Ansum/_layout.scss b/p/themes/Ansum/_layout.scss
index 2ef77113f..ab9116d3c 100644
--- a/p/themes/Ansum/_layout.scss
+++ b/p/themes/Ansum/_layout.scss
@@ -180,6 +180,24 @@
 	}
 }
 
+.btn {
+	border-left-width: 0;
+	padding: 0.5rem 1rem;
+	background-color: variables.$grey-light;
+	background-position: center;
+	background-repeat: no-repeat;
+
+	@include mixins.transition(all, 0.15s, ease-in-out);
+
+	&:hover {
+		background-color: variables.$grey-medium-light;
+	}
+
+	&.active {
+		background-color: variables.$main-first;
+	}
+}
+
 /*=== Index menu */
 .nav_menu {
 	text-align: center;
diff --git a/p/themes/Ansum/ansum.css b/p/themes/Ansum/ansum.css
index 7cdb2eed5..c2629e55c 100644
--- a/p/themes/Ansum/ansum.css
+++ b/p/themes/Ansum/ansum.css
@@ -241,7 +241,7 @@ form th {
 	right: 17px;
 }
 .dropdown-menu .dropdown-header {
-	margin: 1.75rem 0 0.5rem 2rem;
+	margin: 1rem 0.5rem 1rem 1rem;
 	font-weight: bold;
 	text-align: left;
 	color: #766556;
@@ -257,15 +257,15 @@ form th {
 	font-size: 1rem;
 	line-height: 2.5em;
 }
-.dropdown-menu .item:hover {
+.dropdown-menu .item:not(.addItem):hover {
 	background: #ca7227;
 	color: #fff;
 }
-.dropdown-menu .item:hover a, .dropdown-menu .item:hover button {
+.dropdown-menu .item:not(.addItem):hover a, .dropdown-menu .item:not(.addItem):hover button, .dropdown-menu .item:not(.addItem):hover label {
 	text-decoration: none;
 	color: #fff;
 }
-.dropdown-menu .item:hover .icon {
+.dropdown-menu .item:not(.addItem):hover .icon {
 	filter: grayscale(100%) brightness(2.5);
 }
 .dropdown-menu .item[aria-checked=true] a::before {
@@ -901,6 +901,21 @@ form th {
 	text-transform: uppercase;
 }
 
+.btn {
+	border-left-width: 0;
+	padding: 0.5rem 1rem;
+	background-color: #f5f0ec;
+	background-position: center;
+	background-repeat: no-repeat;
+	transition: all 0.15s ease-in-out;
+}
+.btn:hover {
+	background-color: #e4d8cc;
+}
+.btn.active {
+	background-color: #ca7227;
+}
+
 /*=== Index menu */
 .nav_menu {
 	text-align: center;
diff --git a/p/themes/Ansum/ansum.rtl.css b/p/themes/Ansum/ansum.rtl.css
index 458460573..42c373349 100644
--- a/p/themes/Ansum/ansum.rtl.css
+++ b/p/themes/Ansum/ansum.rtl.css
@@ -241,7 +241,7 @@ form th {
 	left: 17px;
 }
 .dropdown-menu .dropdown-header {
-	margin: 1.75rem 2rem 0.5rem 0;
+	margin: 1rem 1rem 1rem 0.5rem;
 	font-weight: bold;
 	text-align: right;
 	color: #766556;
@@ -257,15 +257,15 @@ form th {
 	font-size: 1rem;
 	line-height: 2.5em;
 }
-.dropdown-menu .item:hover {
+.dropdown-menu .item:not(.addItem):hover {
 	background: #ca7227;
 	color: #fff;
 }
-.dropdown-menu .item:hover a, .dropdown-menu .item:hover button {
+.dropdown-menu .item:not(.addItem):hover a, .dropdown-menu .item:not(.addItem):hover button, .dropdown-menu .item:not(.addItem):hover label {
 	text-decoration: none;
 	color: #fff;
 }
-.dropdown-menu .item:hover .icon {
+.dropdown-menu .item:not(.addItem):hover .icon {
 	filter: grayscale(100%) brightness(2.5);
 }
 .dropdown-menu .item[aria-checked=true] a::before {
@@ -901,6 +901,21 @@ form th {
 	text-transform: uppercase;
 }
 
+.btn {
+	border-right-width: 0;
+	padding: 0.5rem 1rem;
+	background-color: #f5f0ec;
+	background-position: center;
+	background-repeat: no-repeat;
+	transition: all 0.15s ease-in-out;
+}
+.btn:hover {
+	background-color: #e4d8cc;
+}
+.btn.active {
+	background-color: #ca7227;
+}
+
 /*=== Index menu */
 .nav_menu {
 	text-align: center;