Fix TaskCreateDialog and Multiselect appearance

Signed-off-by: Raimund Schlüßler <[email protected]>
nextcloud · Oct 13, 2022 · 1449a36 · 1449a36
1 parent 5666eb6
commit 1449a36
Show file tree

Hide file tree

Showing 4 changed files with 15 additions and 13 deletions.
diff --git a/src/components/AppSidebar/CalendarPickerItem.vue b/src/components/AppSidebar/CalendarPickerItem.vue
@@ -121,6 +121,7 @@ export default {
 		.multiselect__tags {
 			border: 1px solid transparent;
 			height: 44px;
+			padding: 0 !important;
 
 			.multiselect__single {
 				padding: 0;
@@ -133,6 +134,7 @@ export default {
 				position: absolute !important;
 				font-weight: bold;
 				font-size: var(--default-font-size);
+				line-height: 44px;
 			}
 		}
 

diff --git a/src/components/AppSidebar/MultiselectItem.vue b/src/components/AppSidebar/MultiselectItem.vue
@@ -131,6 +131,7 @@ export default {
 		.multiselect__tags {
 			border: 1px solid transparent;
 			height: 44px;
+			padding: 0 !important;
 
 			.multiselect__single {
 				padding: 0;

diff --git a/src/components/AppSidebar/TagsItem.vue b/src/components/AppSidebar/TagsItem.vue
@@ -148,6 +148,7 @@ export default {
 		.multiselect__tags {
 			border: 1px solid transparent;
 			height: 44px;
+			padding: 0 !important;
 			flex-grow: 1;
 
 			.multiselect__single {
@@ -166,6 +167,7 @@ export default {
 				position: absolute !important;
 				font-weight: bold;
 				font-size: var(--default-font-size);
+				line-height: 44px;
 			}
 
 			.multiselect__tags-wrap {

diff --git a/src/components/TaskCreateDialog.vue b/src/components/TaskCreateDialog.vue
@@ -219,9 +219,8 @@ export default {
 		.empty-content {
 			margin: 10vh 0;
 
-			::v-deep p {
+			:deep(.empty-content__action) {
 				display: flex;
-				justify-content: flex-end;
 			}
 		}
 	}
@@ -230,9 +229,8 @@ export default {
 		border-bottom: none;
 		margin-bottom: 3px;
 
-		:deep(.multiselect) {
-			border: 1px solid var(--color-border-dark);
-			border-radius: var(--border-radius);
+		:deep(.multiselect .multiselect__tags) {
+			border: 2px solid var(--color-border-dark);
 		}
 	}
 
@@ -241,15 +239,14 @@ export default {
 
 		.material-design-icon {
 			position: absolute;
-			top: 12px;
-			left: 12px;
+			top: 14px;
+			left: 14px;
 		}
 
 		input,
 		textarea {
 			width: 100%;
-			font-size: var(--default-font-size);
-			padding-left: 44px;
+			padding-left: 44px !important;
 		}
 
 		input {
@@ -264,10 +261,10 @@ export default {
 		}
 	}
 
-	.modal-buttons {
-		display: flex;
-		justify-content: flex-end;
-	}
+.modal-buttons {
+	display: flex;
+	justify-content: flex-end;
+}
 
 	:deep(.calendar-picker-option__label),
 	:deep(.property__item .multiselect__tags) input.multiselect__input {