fix: use :deep() selector instead of ::v-deep

src/components/home/navigation.vue

@@ -393,7 +393,7 @@ $vikunja-nav-selected-width: 0.4rem;
 				padding: 0 .25rem;
 			}
 
-			::v-deep.dropdown-trigger {
+			:deep(.dropdown-trigger) {
 				padding: .5rem;
 				cursor: pointer;
 			}
@@ -433,19 +433,19 @@ $vikunja-nav-selected-width: 0.4rem;
 				display: flex;
 				align-items: center;
 
-				::v-deep.dropdown-trigger {
+				&:hover {
+					background: $white;
+				}
+
+				:deep(.dropdown-trigger) {
 					opacity: 0;
 					padding: .5rem;
 					cursor: pointer;
 					transition: $transition;
 				}
 
-				&:hover {
+				&:hover :deep(.dropdown-trigger) {
-					background: $white;
+					opacity: 1;
-
-					::v-deep.dropdown-trigger {
-						opacity: 1;
-					}
 				}
 
 				&.loader-container.is-loading:after {

src/components/home/topNavigation.vue

@@ -206,7 +206,7 @@ $vikunja-nav-logo-full-width: 164px;
 			display: flex;
 			align-items: center;
 
-			::v-deep.dropdown-trigger {
+			:deep(.dropdown-trigger) {
 				line-height: 1;
 
 				.button {
@@ -228,7 +228,7 @@ $vikunja-nav-logo-full-width: 164px;
 
 .navbar {
 	// FIXME: notifications should provide a slot for the icon instead, so that we can style it as we want
-	::v-deep {
+	:deep() {
 		.trigger-button {
 			cursor: pointer;
 			color: $grey-400;
@@ -256,7 +256,7 @@ $vikunja-nav-logo-full-width: 164px;
 			height: 40px;
 		}
 
-		::v-deep .dropdown-trigger .button {
+		:deep(.dropdown-trigger .button) {
 			background: none;
 
 			&:focus:not(:active), &:active {
@@ -289,7 +289,7 @@ $vikunja-nav-logo-full-width: 164px;
     margin: 0;
   }
 
-  ::v-deep.dropdown-trigger {
+  :deep(.dropdown-trigger) {
     color: $grey-400;
     margin-left: 1rem;
     height: 1rem;

src/components/input/datepicker.vue

@@ -312,7 +312,7 @@ export default {
 			width: calc(100% - 2rem);
 		}
 
-		::v-deep .flatpickr-calendar {
+		:deep(.flatpickr-calendar) {
 			margin: 0 auto 8px;
 			box-shadow: none;
 		}

src/components/misc/card.vue

@@ -71,7 +71,7 @@ export default {
 }
 
 // FIXME: should maybe be merged somehow with modal
-::v-deep.modal-card-foot {
+:deep(.modal-card-foot) {
   background-color: $grey-50;
   border-top: 0;
 }

src/components/modal/modal.vue

@@ -181,7 +181,7 @@ export default {
 .hint-modal {
 	z-index: 4600;
 
-	::v-deep.card-content {
+	:deep(.card-content) {
 		text-align: left;
 
 		.info {

src/components/quick-actions/quick-actions.vue

@@ -463,7 +463,7 @@ export default {
 <style lang="scss" scoped>
 .quick-actions {
 	// FIXME: changed position should be an option of the modal
-	::v-deep.modal-content {
+	:deep(.modal-content) {
 		top: 3rem;
 		transform: translate(-50%, 0);
 	}
@@ -531,7 +531,7 @@ export default {
 
 // HACK:
 // FIXME:
-.modal-container-smaller ::v-deep.hint-modal .modal-container {
+.modal-container-smaller :deep(.hint-modal .modal-container) {
 	height: calc(100vh - 5rem);
 }
 </style>

src/components/tasks/gantt-component.vue

@@ -618,7 +618,7 @@ $gantt-vertical-border-color: $grey-100;
 		z-index: 5;
 
 		// FIXME: should be an option of the card, e.g. overflow
-		::v-deep.card-content {
+		:deep(.card-content) {
 			max-height: 60vh;
 			overflow-y: auto;
 		}

src/components/tasks/partials/defer-task.vue

@@ -164,7 +164,7 @@ $defer-task-max-width: 350px + 100px;
 	margin: .5rem 0;
 }
 
-::v-deep {
+:deep() {
 	input.input {
 		display: none;
 	}

src/components/tasks/partials/editAssignees.vue

@@ -126,7 +126,7 @@ export default {
 		margin-left: -1.5rem;
 	}
 
-	::v-deep.user img {
+	:deep(.user img) {
 		border: 2px solid $white;
 		margin-right: 0;
 	}

src/components/tasks/partials/kanban-card.vue

@@ -173,7 +173,7 @@ $task-background: $white;
 		flex-wrap: wrap;
 		align-items: center;
 
-		::v-deep.tag,
+		:deep(.tag),
 		.assignees,
 		.icon,
 		.priority-label {
@@ -195,7 +195,7 @@ $task-background: $white;
 		}
 
 		// FIXME: should be in labels.vue
-		::v-deep.tag {
+		:deep(.tag) {
 			margin-left: 0;
 		}
 

src/components/tasks/partials/reminders.vue

@@ -111,7 +111,7 @@ export default {
     display: flex;
     align-items: center;
 
-    &.overdue ::v-deep.datepicker a.show {
+    &.overdue :deep(.datepicker a.show) {
       color: $red;
     }
 

src/components/tasks/partials/singleTaskInList.vue

@@ -313,7 +313,7 @@ export default {
 		opacity: 1;
 	}
 
-	::v-deep.fancycheckbox {
+	:deep(.fancycheckbox) {
 		height: 18px;
 		padding-top: 0;
 		padding-right: .5rem;

src/views/list/views/Kanban.vue

@@ -730,7 +730,7 @@ $filter-container-height: '1rem - #{$switch-view-height}';
 		}
 	}
 
-	::v-deep.dropdown-trigger {
+	:deep(.dropdown-trigger) {
 		cursor: pointer;
 		padding: .5rem;
 	}

src/views/tasks/ShowTasks.vue

@@ -265,7 +265,7 @@ export default {
 			margin-top: 3rem;
 		}
 
-		.input {
+		:deep(.input) {
 			width: 190px;
 			vertical-align: middle;
 			margin: .5rem 0;

src/views/tasks/TaskDetailView.vue

@@ -723,7 +723,7 @@ $flash-background-duration: 750ms;
     color: $grey-400;
   }
 
-  ::v-deep.heading {
+  :deep(.heading) {
     display: flex;
     justify-content: space-between;
     text-transform: none;
@@ -766,7 +766,7 @@ $flash-background-duration: 750ms;
     }
   }
 
-  ::v-deep.datepicker {
+  :deep(.datepicker) {
     width: 100%;
 
     a.show {
@@ -809,7 +809,7 @@ $flash-background-duration: 750ms;
 
     &.labels-list,
 	.assignees {
-      ::v-deep.multiselect {
+      :deep(.multiselect) {
         .input-wrapper {
           &:not(:focus-within):not(:hover) {
             background: transparent !important;
@@ -820,8 +820,8 @@ $flash-background-duration: 750ms;
     }
   }
 
-  ::v-deep.details,
+  :deep(.details),
-  ::v-deep.heading {
+  :deep(.heading) {
     .input:not(.has-defaults),
     .textarea,
     .select:not(.has-defaults) select {