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, 57 insertions, 9 deletions

diff --git a/p/themes/Mapco/_components.scss b/p/themes/Mapco/_components.scss
index f54170c0a..91fa2126d 100644
--- a/p/themes/Mapco/_components.scss
+++ b/p/themes/Mapco/_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;
@@ -62,11 +62,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/Mapco/_layout.scss b/p/themes/Mapco/_layout.scss
index 30feb9f19..0e49854d5 100644
--- a/p/themes/Mapco/_layout.scss
+++ b/p/themes/Mapco/_layout.scss
@@ -183,6 +183,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/Mapco/mapco.css b/p/themes/Mapco/mapco.css
index b8a2281ba..b1497b777 100644
--- a/p/themes/Mapco/mapco.css
+++ b/p/themes/Mapco/mapco.css
@@ -238,7 +238,7 @@ form th {
 	right: 18px;
 }
 .dropdown-menu .dropdown-header {
-	margin: 1.75rem 0 0.5rem 2rem;
+	margin: 1rem 0.5rem 1rem 1rem;
 	font-weight: bold;
 	text-align: left;
 	color: #5b6871;
@@ -254,11 +254,11 @@ form th {
 	font-size: 1rem;
 	line-height: 2.5em;
 }
-.dropdown-menu .item:hover {
+.dropdown-menu .item:not(.addItem):hover {
 	background: #36c;
 	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;
 }
@@ -888,6 +888,21 @@ form th {
 	text-transform: uppercase;
 }
 
+.btn {
+	border-left-width: 0;
+	padding: 0.5rem 1rem;
+	background-color: #eff0f2;
+	background-position: center;
+	background-repeat: no-repeat;
+	transition: all 0.15s ease-in-out;
+}
+.btn:hover {
+	background-color: #d5d8db;
+}
+.btn.active {
+	background-color: #36c;
+}
+
 /*=== Index menu */
 .nav_menu {
 	text-align: center;
diff --git a/p/themes/Mapco/mapco.rtl.css b/p/themes/Mapco/mapco.rtl.css
index f38c8837e..63b16b0f9 100644
--- a/p/themes/Mapco/mapco.rtl.css
+++ b/p/themes/Mapco/mapco.rtl.css
@@ -238,7 +238,7 @@ form th {
 	left: 18px;
 }
 .dropdown-menu .dropdown-header {
-	margin: 1.75rem 2rem 0.5rem 0;
+	margin: 1rem 1rem 1rem 0.5rem;
 	font-weight: bold;
 	text-align: right;
 	color: #5b6871;
@@ -254,11 +254,11 @@ form th {
 	font-size: 1rem;
 	line-height: 2.5em;
 }
-.dropdown-menu .item:hover {
+.dropdown-menu .item:not(.addItem):hover {
 	background: #36c;
 	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;
 }
@@ -888,6 +888,21 @@ form th {
 	text-transform: uppercase;
 }
 
+.btn {
+	border-right-width: 0;
+	padding: 0.5rem 1rem;
+	background-color: #eff0f2;
+	background-position: center;
+	background-repeat: no-repeat;
+	transition: all 0.15s ease-in-out;
+}
+.btn:hover {
+	background-color: #d5d8db;
+}
+.btn.active {
+	background-color: #36c;
+}
+
 /*=== Index menu */
 .nav_menu {
 	text-align: center;