Remove legacy v-deep selector

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

src/components/card/CardSidebar.vue

@@ -208,53 +208,54 @@ export default {
 
 <style lang="scss" scoped>
 
-	section.app-sidebar__tab--active {
-		min-height: auto;
-		display: flex;
-		flex-direction: column;
-		height: 100%;
-	}
+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 {
-		$modal-padding: 14px;
-		border: 0;
-		min-width: calc(100% - #{$modal-padding * 2});
-		position: relative;
-		top: 0;
-		left: 0;
-		right: 0;
-		max-width: calc(100% - #{$modal-padding * 2});
-		padding: 0 14px;
-		max-height: 100%;
-		overflow: initial;
-		user-select: text;
-		-webkit-user-select: text;
+// 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});
+	position: relative;
+	top: 0;
+	left: 0;
+	right: 0;
+	max-width: calc(100% - #{$modal-padding * 2});
+	padding: 0 14px;
+	max-height: 100%;
+	overflow: initial;
+	user-select: text;
+	-webkit-user-select: text;
 
-		&::v-deep {
-			.app-sidebar-header {
-				position: sticky;
-				top: 0;
-				z-index: 100;
-				background-color: var(--color-main-background);
-			}
-			.app-sidebar-tabs__nav {
-				position: sticky;
-				top: 87px;
-				margin: 0;
-				z-index: 100;
-				background-color: var(--color-main-background);
-			}
+	// FIXME: test
+	&:deep {
+		.app-sidebar-header {
+			position: sticky;
+			top: 0;
+			z-index: 100;
+			background-color: var(--color-main-background);
+		}
+		.app-sidebar-tabs__nav {
+			position: sticky;
+			top: 87px;
+			margin: 0;
+			z-index: 100;
+			background-color: var(--color-main-background);
+		}
 
-			.app-sidebar__tab {
-				overflow: initial;
-			}
+		.app-sidebar__tab {
+			overflow: initial;
+		}
 
-			#emptycontent, .emptycontent {
-				margin-top: 88px;
-			}
+		#emptycontent, .emptycontent {
+			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;
 	}
 }