Remove legacy v-deep selector

Signed-off-by: Julius Härtl <jus@bitgrid.net>

src/CardCreateDialog.vue

@@ -237,14 +237,14 @@ export default {
 		justify-content: flex-end;
 	}
 
-	.card-selector::v-deep .modal-container {
+	.card-selector:deep(.modal-container) {
 		overflow: visible !important;
 	}
 
 	.empty-content {
 		margin-top: 5vh !important;
 
-		&::v-deep h2 {
+		&:deep(h2) {
 			margin-bottom: 5vh;
 		}
 	}

src/CardSelector.vue

@@ -169,7 +169,7 @@ export default {
 		float: right;
 	}
 
-	.card-selector::v-deep .modal-container {
+	.card-selector:deep(.modal-container) {
 		overflow: visible !important;
 	}
 </style>

src/components/board/Board.vue

@@ -209,7 +209,7 @@ export default {
 		align-items: stretch;
 		height: 100%;
 
-		.smooth-dnd-draggable-wrapper::v-deep {
+		&:deep(.smooth-dnd-draggable-wrapper) {
 			display: flex;
 			height: auto;
 

src/components/board/TagsTabSidebar.vue

@@ -189,7 +189,7 @@ export default {
 		}
 
 		.color-picker-wrapper {
-			&, &::v-deep > .trigger {
+			&, &:deep > .trigger {
 				width: $clickable-area;
 				padding: 3px;
 				display: flex;

src/components/card/CardSidebar.vue

@@ -208,16 +208,16 @@ export default {
 
 <style lang="scss" scoped>
 
-	section.app-sidebar__tab--active {
+section.app-sidebar__tab--active {
 	min-height: auto;
 	display: flex;
 	flex-direction: column;
 	height: 100%;
-	}
+}
 
-	// FIXME: Obivously we should at some point not randomly reuse the sidebar component
-	// since this is not oficially supported
-	.modal__card .app-sidebar {
+// FIXME: Obivously we should at some point not randomly reuse the sidebar component
+// since this is not oficially supported
+.modal__card .app-sidebar {
 	$modal-padding: 14px;
 	border: 0;
 	min-width: calc(100% - #{$modal-padding * 2});
@@ -232,7 +232,8 @@ export default {
 	user-select: text;
 	-webkit-user-select: text;
 
-		&::v-deep {
+	// FIXME: test
+	&:deep {
 		.app-sidebar-header {
 			position: sticky;
 			top: 0;
@@ -255,6 +256,6 @@ export default {
 			margin-top: 88px;
 		}
 	}
-	}
+}
 
 </style>

src/components/card/CardSidebarTabDetails.vue

@@ -368,11 +368,11 @@ export default {
 </script>
 <style lang="scss" scoped>
 
-.section-wrapper::v-deep .mx-datepicker-main.mx-datepicker-popup {
+.section-wrapper:deep(.mx-datepicker-main.mx-datepicker-popup) {
 	left: 0 !important;
 }
 
-.section-wrapper::v-deep .mx-datepicker-main.mx-datepicker-popup.mx-datepicker-sidebar {
+.section-wrapper:deep(.mx-datepicker-main.mx-datepicker-popup.mx-datepicker-sidebar) {
 	padding: 0 !important;
 }
 
@@ -413,7 +413,7 @@ export default {
 	padding: 6px
 }
 
-.section-details::v-deep .multiselect__tags-wrap {
+.section-details:deep(.multiselect__tags-wrap) {
 	flex-wrap: wrap;
 }
 
@@ -430,11 +430,11 @@ export default {
 	}
 }
 
-.multiselect::v-deep .multiselect__tags-wrap {
+.multiselect:deep(.multiselect__tags-wrap) {
 	z-index: 2;
 }
 
-.multiselect.multiselect--active::v-deep .multiselect__tags-wrap {
+.multiselect.multiselect--active:deep(.multiselect__tags-wrap) {
 	z-index: 0;
 }
 

src/components/card/CommentForm.vue

@@ -186,13 +186,13 @@ export default {
 		& > div[contenteditable] {
 			width: 100%;
 
-			&::v-deep > span > div {
+			&:deep > span > div {
 				vertical-align: middle;
 			}
 		}
 	}
 
-	.comment-form::v-deep .atwho-li {
+	.comment-form:deep(.atwho-li) {
 		height: 32px;
 	}
 

src/components/card/CommentItem.vue

@@ -222,7 +222,7 @@ export default {
 			padding-left: 8px;
 		}
 
-		&::v-deep .rich-text--wrapper {
+		&:deep(.rich-text--wrapper) {
 			margin-top: -3px;
 			color: var(--color-text-lighter);
 		}
@@ -241,7 +241,7 @@ export default {
 		}
 	}
 
-	.comment--content::v-deep {
+	.comment--content:deep {
 		a {
 			text-decoration: underline;
 		}

src/components/card/Description.vue

@@ -277,7 +277,7 @@ export default {
 	display: flex;
 	flex-direction: column;
 
-	&::v-deep .attachment-list {
+	&:deep(.attachment-list) {
 		flex-shrink: 1;
 	}
 }
@@ -292,16 +292,16 @@ export default {
 	width: auto;
 	overflow-x: auto;
 
-	&::v-deep {
+	&:deep {
 		/* stylelint-disable-next-line no-invalid-position-at-import-rule */
 		@import './../../css/markdown';
 	}
 
-	&::v-deep input {
+	&:deep(input) {
 		min-height: auto;
 	}
 
-	&::v-deep a {
+	&:deep(a) {
 		text-decoration: underline;
 	}
 }

src/components/cards/AvatarList.vue

@@ -154,7 +154,7 @@ export default {
 		margin-top: 5px;
 		position: relative;
 		flex-grow: 1;
-		::v-deep .popovermenu {
+		:deep(.popovermenu) {
 			margin-right: -4px;
 			img {
 				padding: 0;
@@ -174,7 +174,7 @@ export default {
 		padding-right: $avatar-offset;
 		flex-direction: row-reverse;
 		.avatardiv,
-		::v-deep .avatardiv {
+		:deep(.avatardiv) {
 			width: 36px;
 			height: 36px;
 			box-sizing: content-box !important;
@@ -189,7 +189,7 @@ export default {
 				cursor: pointer;
 			}
 		}
-		&:hover div:nth-child(n+2) ::v-deep .avatardiv {
+		&:hover div:nth-child(n+2) :deep(.avatardiv) {
 			margin-right: 1px;
 		}
 	}

src/components/cards/CardBadges.vue

@@ -109,7 +109,7 @@ export default {
 			margin-right: 2px;
 
 			span,
-			&::v-deep span {
+			&:deep(span) {
 				padding: 10px 2px;
 			}
 		}

src/components/cards/CardItem.vue

@@ -208,7 +208,7 @@ export default {
 		background-color: var(--color-main-background);
 		margin-bottom: $card-spacing;
 
-		&::v-deep * {
+		&:deep(*) {
 			cursor: pointer;
 		}
 

src/components/search/GlobalSearchResults.vue

@@ -207,7 +207,7 @@ export default {
 			margin-right: 20px;
 		}
 	}
-	h2::v-deep span {
+	h2:deep(span) {
 		background-color: var(--color-background-dark);
 		padding: 3px;
 		border-radius: var(--border-radius);
@@ -221,7 +221,7 @@ export default {
 			flex-grow: 0;
 		}
 	}
-	&::v-deep .card {
+	&:deep(.card) {
 		width: $stack-width;
 		margin-right: $stack-spacing;
 	}

src/css/comments.scss

@@ -3,7 +3,7 @@
 	flex-grow: 1;
 	position: relative;
 
-	.editor__content::v-deep {
+	.editor__content:deep {
 		flex-grow: 1;
 		margin-left: 44px;
 

src/views/Dashboard.vue

@@ -164,7 +164,7 @@ export default {
 		margin-top: 3px;
 	}
 
-	.duedate::v-deep {
+	.duedate:deep {
 		.due {
 			margin: 0 0 0 10px;
 			padding: 2px 4px;