Use :deep instead of ::v-deep

Signed-off-by: Raimund Schlüßler <raimund.schluessler@mailbox.org>

11 files changed, 35 insertions, 39 deletions

diff --git a/src/components/AppNavigation/ListItemCalendar.vue b/src/components/AppNavigation/ListItemCalendar.vue
index cc0f4cff..9aaebf2f 100644
--- a/src/components/AppNavigation/ListItemCalendar.vue
+++ b/src/components/AppNavigation/ListItemCalendar.vue
@@ -537,10 +537,10 @@ export default {
 }
 </script>
 
-<style lang="scss" scoped>
+<style lang="scss">
 $color-error: #e9322d;
 
-.list::v-deep {
+.list {
 	div.active .app-navigation-entry__icon-bullet > div {
 		height: 16px;
 		width: 16px;
diff --git a/src/components/AppSidebar/CalendarPickerItem.vue b/src/components/AppSidebar/CalendarPickerItem.vue
index 0c838bdd..fb5766ce 100644
--- a/src/components/AppSidebar/CalendarPickerItem.vue
+++ b/src/components/AppSidebar/CalendarPickerItem.vue
@@ -96,20 +96,20 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-.property__item::v-deep {
+.property__item {
 	display: flex;
 	border-bottom: 1px solid var(--color-border);
 	width: 100%;
 
-	.multiselect {
+	:deep(.multiselect) {
 		width: 100%;
 
-		&--active .multiselect__tags {
+		.multiselect--active .multiselect__tags {
 			border: 1px solid var(--color-border-dark);
 		}
 
-		&--disabled,
-		&--disabled .multiselect__single {
+		.multiselect--disabled,
+		.multiselect--disabled .multiselect__single {
 			background-color: var(--color-main-background) !important;
 
 			& * {
diff --git a/src/components/AppSidebar/MultiselectItem.vue b/src/components/AppSidebar/MultiselectItem.vue
index 2f689347..a21f17f5 100644
--- a/src/components/AppSidebar/MultiselectItem.vue
+++ b/src/components/AppSidebar/MultiselectItem.vue
@@ -102,24 +102,24 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-.property__item::v-deep {
+.property__item {
 	display: flex;
 	border-bottom: 1px solid var(--color-border);
 	width: 100%;
 
-	.multiselect {
+	:deep(.multiselect) {
 		width: 100%;
 
 		&:hover .multiselect__placeholder {
 			color: var(--color-text-lighter);
 		}
 
-		&--active .multiselect__tags {
+		.multiselect--active .multiselect__tags {
 			border: 1px solid var(--color-border-dark);
 		}
 
-		&--disabled,
-		&--disabled .multiselect__single {
+		.multiselect--disabled,
+		.multiselect--disabled .multiselect__single {
 			background-color: var(--color-main-background) !important;
 
 			& * {
@@ -127,7 +127,7 @@ export default {
 			}
 		}
 
-		&__tags {
+		.multiselect__tags {
 			border: 1px solid transparent;
 			height: 44px;
 
@@ -150,7 +150,7 @@ export default {
 			}
 		}
 
-		&__content-wrapper li > span {
+		.multiselect__content-wrapper li > span {
 			padding: 0;
 
 			&.multiselect__option--selected {
diff --git a/src/components/AppSidebar/NotesItem.vue b/src/components/AppSidebar/NotesItem.vue
index 18d59e1e..b90981cc 100644
--- a/src/components/AppSidebar/NotesItem.vue
+++ b/src/components/AppSidebar/NotesItem.vue
@@ -196,7 +196,7 @@ export default {
 	}
 }
 
-#note__viewer::v-deep {
+:deep(#note__viewer) {
 	width: 100% !important;
 	min-height: 40px;
 	cursor: text;
diff --git a/src/components/AppSidebar/TagsItem.vue b/src/components/AppSidebar/TagsItem.vue
index baad630d..5b054297 100644
--- a/src/components/AppSidebar/TagsItem.vue
+++ b/src/components/AppSidebar/TagsItem.vue
@@ -99,20 +99,20 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-.property__item::v-deep {
+.property__item {
 	display: flex;
 	border-bottom: 1px solid var(--color-border);
 	width: 100%;
 	color: var(--color-text-lighter);
 
-	.multiselect {
+	:deep(.multiselect) {
 		width: 100%;
 
 		&:hover .multiselect__placeholder {
 			color: var(--color-text-lighter);
 		}
 
-		&--active {
+		.multiselect--active {
 			.multiselect__tags {
 				border: 1px solid var(--color-border-dark);
 			}
@@ -122,8 +122,8 @@ export default {
 			}
 		}
 
-		&--disabled,
-		&--disabled .multiselect__single {
+		.multiselect--disabled,
+		.multiselect--disabled .multiselect__single {
 			background-color: var(--color-main-background) !important;
 
 			& * {
@@ -131,7 +131,7 @@ export default {
 			}
 		}
 
-		&__icon {
+		.multiselect__icon {
 			position: absolute;
 			display: flex;
 			width: 44px;
@@ -141,7 +141,7 @@ export default {
 			justify-content: center;
 		}
 
-		&__tags {
+		.multiselect__tags {
 			border: 1px solid transparent;
 			height: 44px;
 			flex-grow: 1;
@@ -174,7 +174,7 @@ export default {
 			}
 		}
 
-		&__content-wrapper {
+		.multiselect__content-wrapper {
 			// We need this so the options list is not cut off
 			// by the tabs header
 			max-height: 170px !important;
diff --git a/src/components/SortorderDropdown.vue b/src/components/SortorderDropdown.vue
index fd660275..01f1b247 100644
--- a/src/components/SortorderDropdown.vue
+++ b/src/components/SortorderDropdown.vue
@@ -203,13 +203,11 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-li.action::v-deep {
 	// indicate which sort order is selected
-	&.selected .action-button {
+li.action.selected :deep(.action-button) {
 		opacity: 1;
 		// allow to absolute position the sort direction icon
 		position: relative;
-	}
 }
 // overlay the sort direction icon with the sort order icon
 .material-design-icon.sort-direction {
diff --git a/src/components/TaskBody.vue b/src/components/TaskBody.vue
index 1629ff39..fcb86479 100644
--- a/src/components/TaskBody.vue
+++ b/src/components/TaskBody.vue
@@ -774,8 +774,8 @@ $breakpoint-mobile: 1024px;
 						overflow: hidden;
 						text-overflow: ellipsis;
 
-						// We need v-deep as it comes from a directive
-						&::v-deep a {
+						// We need deep as it comes from a directive
+						:deep(a) {
 							cursor: pointer;
 							text-decoration: underline;
 						}
diff --git a/src/components/TaskCreateDialog.vue b/src/components/TaskCreateDialog.vue
index 4d635309..55234e3f 100644
--- a/src/components/TaskCreateDialog.vue
+++ b/src/components/TaskCreateDialog.vue
@@ -229,7 +229,7 @@ export default {
 		border-bottom: none;
 		margin-bottom: 3px;
 
-		&::v-deep .multiselect {
+		:deep(.multiselect) {
 			border: 1px solid var(--color-border-dark);
 			border-radius: var(--border-radius);
 		}
@@ -268,10 +268,8 @@ export default {
 		justify-content: flex-end;
 	}
 
-	::v-deep {
-		.calendar-picker-option__label,
-		.property__item .multiselect__tags input.multiselect__input {
+	:deep(.calendar-picker-option__label),
+	:deep(.property__item .multiselect__tags) input.multiselect__input {
 			font-weight: normal;
-		}
 	}
 </style>
diff --git a/src/components/TaskStatusDisplay.vue b/src/components/TaskStatusDisplay.vue
index 3d3ebe79..94d9b84f 100644
--- a/src/components/TaskStatusDisplay.vue
+++ b/src/components/TaskStatusDisplay.vue
@@ -112,17 +112,17 @@ export default {
 		}
 		&--sync,
 		&--conflict {
-			::v-deep svg {
+			:deep(svg) {
 				animation-iteration-count: infinite;
 				animation-duration: 1s;
 			}
 		}
-		&--sync ::v-deep svg {
+		&--sync :deep(svg) {
 			animation-name: spin;
 		}
 		&--conflict {
 			color: var(--color-warning);
-			::v-deep svg {
+			:deep(svg) {
 				animation-name: pulse;
 				border-radius: 50%;
 			}
diff --git a/src/views/AppNavigation.vue b/src/views/AppNavigation.vue
index dd3169cf..a981da6c 100644
--- a/src/views/AppNavigation.vue
+++ b/src/views/AppNavigation.vue
@@ -459,7 +459,7 @@ $color-error: #e9322d;
 	}
 }
 
-.collection::v-deep {
+:deep(.collection) {
 	&.collection--edit {
 		.app-navigation-entry {
 			display: none;
diff --git a/src/views/AppSidebar.vue b/src/views/AppSidebar.vue
index 12d91677..63eea99c 100644
--- a/src/views/AppSidebar.vue
+++ b/src/views/AppSidebar.vue
@@ -883,12 +883,12 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-.app-sidebar::v-deep .app-sidebar-header__description {
+.app-sidebar :deep(.app-sidebar-header__description) {
 	flex-wrap: wrap;
 	margin: 0;
 }
 
-.app-sidebar::v-deep .app-sidebar-tabs {
+.app-sidebar  :deep(.app-sidebar-tabs) {
 	min-height: 160px !important;
 }