Fixed multiselect styling

Signed-off-by: John Molakvoæ (skjnldsv) <skjnldsv@protonmail.com>

6 files changed, 36 insertions, 19 deletions

diff --git a/css/Properties/Properties.scss b/css/Properties/Properties.scss
index 8ca4bf90..5add862b 100644
--- a/css/Properties/Properties.scss
+++ b/css/Properties/Properties.scss
@@ -71,7 +71,7 @@
 	
 	// property label or multiselect within row
 	&__label,
-	&__label.multiselect {
+	&__label.multiselect.multiselect-vue {
 		margin: $grid-input-margin;
 		margin: $grid-input-margin 5px $grid-input-margin 0;
 		height: $grid-input-height-with-margin;
@@ -81,6 +81,10 @@
 		user-select: none;
 		background-size: 16px;
 
+		.multiselect__tags {
+			border-color: transparent;
+		}
+
 		&,
 		.multiselect__input::placeholder {
 			text-align: right;
@@ -93,10 +97,15 @@
 			overflow-x: hidden;
 		}
 
+		// mouse feedback
 		&.multiselect {
 			&:hover,
-			&:focus {
+			&:focus,
+			&:active {
 				opacity: 1;
+				.multiselect__tags {
+					border-color: var(--color-border-dark);
+				}
 			}
 		}
 	}
@@ -105,7 +114,6 @@
 		.multiselect__tags {
 			border: none;
 			.multiselect__single {
-				@include icon-color('triangle-s', 'actions', $color-black, 1, true);
 				background-repeat: no-repeat;
 				background-position: center right 4px;
 				padding-right: 24px;
diff --git a/css/Settings/SettingsAddressbook.scss b/css/Settings/SettingsAddressbook.scss
index 92d6fc20..680a7c7d 100644
--- a/css/Settings/SettingsAddressbook.scss
+++ b/css/Settings/SettingsAddressbook.scss
@@ -23,6 +23,7 @@
 
 .addressbook {
 	display: flex;
+	flex-wrap: wrap;
 	align-items: center;
 	white-space: nowrap;
 	text-overflow: ellipsis;
diff --git a/css/Settings/SettingsAddressbookSharee.scss b/css/Settings/SettingsAddressbookSharee.scss
index c9777c52..82fafebb 100644
--- a/css/Settings/SettingsAddressbookSharee.scss
+++ b/css/Settings/SettingsAddressbookSharee.scss
@@ -57,12 +57,15 @@
 		width: 16px;
 		height: 16px;
 		display: inline-block;
+		margin-bottom: 2px;
 	}
 	
 	.icon-delete {
 		display: inline-block;
-		width: 24px;
+		width: 20px;
 		height: 20px;
 		opacity: 0.4;
+		margin-bottom: 2px;
+		margin-left: 4px;
 	}
 }
\ No newline at end of file
diff --git a/css/Settings/SettingsAddressbookShares.scss b/css/Settings/SettingsAddressbookShares.scss
index 9a311bb6..87cf2f9c 100644
--- a/css/Settings/SettingsAddressbookShares.scss
+++ b/css/Settings/SettingsAddressbookShares.scss
@@ -41,8 +41,9 @@
 		width: 14px;
 	}
 
-	.multiselect {
+	.multiselect.multiselect-vue {
 		width: inherit;
+		margin: 0;
 		.multiselect__tags:focus-within, 
 		.multiselect__tags:hover {
 			border-color: var(--color-primary-element);
diff --git a/css/SettingsSection.scss b/css/SettingsSection.scss
index 03cc55bf..561036df 100644
--- a/css/SettingsSection.scss
+++ b/css/SettingsSection.scss
@@ -26,29 +26,29 @@
 	.settings-section {
 		display: flex;
 		align-items: center;
+		margin-top: 5px;
 	}
 }
 
 #new-addressbook-form {
 	display: flex;
+	input {
+		margin-top: 0;
+		margin-bottom: 0;
+	}
 }
 
 // Sort Contacts
 .sort-contacts {
 	.multiselect.multiselect-vue {
-		width: 120px;
-		margin-left: 5px;
-	}
-	input#sort-by,
-	.multiselect__single {
-		padding: 6px 12px;
-		min-height: 34px;
-		text-align: center;
-		background-repeat: no-repeat;
-		background-position: right 4px center;
-		@include icon-color('triangle-s', 'actions', $color-black, 1, true);
-		outline: 0;
-		padding-right: 24px !important;
+		width: 100%;
+		margin: 0;
+		.multiselect__single {
+			padding-right: 24px !important;
+			@include icon-color('triangle-s', 'actions', $color-black, 1, true);
+			background-repeat: no-repeat;
+			background-position: right 4px center;
+		}
 	}
 }
 
@@ -68,7 +68,7 @@
 			border-radius: var(--border-radius);
 		}
 	}
-	&__multiselect.multiselect {
+	&__multiselect.multiselect.multiselect-vue {
 		width: 100%;
 		margin: 0;
 		margin-top: -1px;
diff --git a/css/icons.scss b/css/icons.scss
index f688ac51..e5b18450 100644
--- a/css/icons.scss
+++ b/css/icons.scss
@@ -22,4 +22,8 @@
 
 .icon-social {
 	@include icon-color('social', 'contacts', $color-black, 1);
+}
+
+.icon-address-book {
+	@include icon-color('address-book', 'contacts', $color-black, 1);
 }
\ No newline at end of file