Migrate to use :deep selector instead of deprecated ::v-deep

Signed-off-by: Ferdinand Thiessen <[email protected]>

Author: susnux

src/components/Editor/ContentContainer.vue

@@ -68,7 +68,7 @@ export default {
 	}
 
 	.ie {
-		.editor__content::v-deep(.ProseMirror) {
+		.editor__content:deep(.ProseMirror) {
 			padding-top: 50px;
 		}
 	}

src/components/Editor/GuestNameDialog.vue

@@ -102,7 +102,7 @@ export default {
 		align-items: center;
 		padding: 6px;
 
-		&::v-deep(img) {
+		&:deep(img) {
 			margin: 0 !important;
 		}
 

src/components/Editor/Wrapper.vue

@@ -130,13 +130,13 @@ export default {
 		overflow: hidden;
 		position: absolute;
 
-		&.show-color-annotations::v-deep(.author-annotation) {
+		&.show-color-annotations:deep(.author-annotation) {
 			padding-top: 2px;
 			padding-bottom: 2px;
 		}
 
-		&:not(.show-color-annotations)::v-deep(.author-annotation),
-		&:not(.show-color-annotations)::v-deep(.image) {
+		&:not(.show-color-annotations):deep(.author-annotation),
+		&:not(.show-color-annotations):deep(.image) {
 			background-color: transparent !important;
 		}
 

src/components/HelpModal.vue

@@ -203,7 +203,7 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-	::v-deep(.modal-wrapper) {
+	:deep(.modal-wrapper) {
 		.modal-container {
 			padding: 30px 40px 20px;
 			user-select: text;

src/nodes/Callout.vue

@@ -86,15 +86,15 @@ export default {
 
 	.callout__content {
 		margin-left: 1em;
-		&::v-deep(p) {
+		&:deep(p) {
 			&:last-child {
 				margin-bottom: 0;
 			}
 		}
 	}
 
 	.callout__icon {
-		&, ::v-deep(svg) {
+		&, :deep(svg) {
 			color: var(--callout-border);
 		}
 	}

src/views/DirectEditing.vue

@@ -138,11 +138,11 @@ export default {
 		position: fixed;
 		overflow: hidden;
 
-		&::v-deep(.text-editor) {
+		&:deep(.text-editor) {
 			height: 100%;
 			top: 0;
 		}
-		&::v-deep(.text-editor__wrapper div.ProseMirror) {
+		&:deep(.text-editor__wrapper div.ProseMirror) {
 			margin-top: 0;
 		}
 	}

src/views/RichWorkspace.vue

@@ -252,42 +252,42 @@ export default {
 		color: var(--color-text-maxcontrast);
 	}
 
-	#rich-workspace::v-deep(div[contenteditable=false]){
+	#rich-workspace:deep(div[contenteditable=false]){
 		width: 100%;
 		padding: 0px;
 		background-color: var(--color-main-background);
 		opacity: 1;
 		border: none;
 	}
 
-	#rich-workspace::v-deep(.text-editor) {
+	#rich-workspace:deep(.text-editor) {
 		height: 100%;
 		position: unset !important;
 		top: auto !important;
 	}
 
-	#rich-workspace::v-deep(.text-editor__wrapper) {
+	#rich-workspace:deep(.text-editor__wrapper) {
 		position: unset !important;
 		overflow: visible;
 	}
 
-	#rich-workspace::v-deep(.text-editor__main) {
+	#rich-workspace:deep(.text-editor__main) {
 		overflow: visible !important;
 	}
 
-	#rich-workspace::v-deep(.content-wrapper) {
+	#rich-workspace:deep(.content-wrapper) {
 		overflow: scroll !important;
 		max-height: calc(40vh - 50px);
 		padding-left: 10px;
 		padding-bottom: 60px; /* ensure menububble fits below */
 	}
 
-	#rich-workspace::v-deep(.text-editor__wrapper .ProseMirror) {
+	#rich-workspace:deep(.text-editor__wrapper .ProseMirror) {
 		padding: 0px;
 		margin: 0;
 	}
 
-	#rich-workspace::v-deep(.editor__content) {
+	#rich-workspace:deep(.editor__content) {
 		margin: 0;
 	}
 
@@ -324,7 +324,7 @@ export default {
 	}
 
 	html.ie {
-		#rich-workspace::v-deep {
+		#rich-workspace:deep() {
 			.text-editor {
 				position: initial;
 			}