@@ -41,6 +41,7 @@ import {ref, computed, type PropType} from 'vue'
import {useRouter} from 'vue-router'
import BaseButton from '@/components/base/BaseButton.vue'
+import CustomTransition from '@/components/misc/CustomTransition.vue'
import ColorBubble from '@/components/misc/colorBubble.vue'
import Done from '@/components/misc/Done.vue'
diff --git a/src/components/tasks/partials/quick-add-magic.vue b/src/components/tasks/partials/quick-add-magic.vue
index a93db2fc3..187acd67b 100644
--- a/src/components/tasks/partials/quick-add-magic.vue
+++ b/src/components/tasks/partials/quick-add-magic.vue
@@ -5,8 +5,8 @@
visible = true">{{ $t('task.quickAddMagic.what') }}
visible = false"
:enabled="visible"
+ @close="() => visible = false"
transition-name="fade"
:overflow="true"
variant="hint-modal"
diff --git a/src/components/tasks/partials/relatedTasks.vue b/src/components/tasks/partials/relatedTasks.vue
index 241c4fcb5..632ce146e 100644
--- a/src/components/tasks/partials/relatedTasks.vue
+++ b/src/components/tasks/partials/relatedTasks.vue
@@ -14,7 +14,7 @@
@@ -163,6 +163,7 @@ import {RELATION_KINDS, RELATION_KIND, type IRelationKind} from '@/types/IRelati
import TaskRelationService from '@/services/taskRelation'
import TaskRelationModel from '@/models/taskRelation'
+import CustomTransition from '@/components/misc/CustomTransition.vue'
import BaseButton from '@/components/base/BaseButton.vue'
import Multiselect from '@/components/input/multiselect.vue'
import Fancycheckbox from '@/components/input/fancycheckbox.vue'
@@ -442,6 +443,4 @@ async function toggleTaskDone(task: ITask) {
padding: 0;
height: 18px; // The exact height of the checkbox in the container
}
-
-@include modal-transition();
\ No newline at end of file
diff --git a/src/components/tasks/partials/singleTaskInList.vue b/src/components/tasks/partials/singleTaskInList.vue
index 7d2a4d581..844017ec8 100644
--- a/src/components/tasks/partials/singleTaskInList.vue
+++ b/src/components/tasks/partials/singleTaskInList.vue
@@ -74,9 +74,9 @@
- {{ $t('task.detail.due', {at: formatDateSince(task.dueDate)}) }}
-
+
-
+
@@ -140,6 +140,7 @@ import User from '@/components/misc/user.vue'
import BaseButton from '@/components/base/BaseButton.vue'
import Fancycheckbox from '@/components/input/fancycheckbox.vue'
import ColorBubble from '@/components/misc/colorBubble.vue'
+import CustomTransition from '@/components/misc/CustomTransition.vue'
import TaskService from '@/services/task'
diff --git a/src/styles/common-imports.scss b/src/styles/common-imports.scss
index c4e18cfec..002745792 100644
--- a/src/styles/common-imports.scss
+++ b/src/styles/common-imports.scss
@@ -16,8 +16,6 @@
// since $tablet is defined by bulma we can just define it after importing the utilities
$mobile: math.div($tablet, 2);
-@import "mixins";
-
$family-sans-serif: 'Open Sans', Helvetica, Arial, sans-serif;
$vikunja-font: 'Quicksand', sans-serif;
diff --git a/src/styles/mixins.scss b/src/styles/mixins.scss
deleted file mode 100644
index 687355e73..000000000
--- a/src/styles/mixins.scss
+++ /dev/null
@@ -1,12 +0,0 @@
-/* Transitions */
-@mixin modal-transition() {
- .modal-enter,
- .modal-leave-active {
- opacity: 0;
- }
-
- .modal-enter .modal-container,
- .modal-leave-active .modal-container {
- transform: scale(0.9);
- }
-}
\ No newline at end of file
diff --git a/src/views/labels/ListLabels.vue b/src/views/labels/ListLabels.vue
index 7a8957625..07fccae1d 100644
--- a/src/views/labels/ListLabels.vue
+++ b/src/views/labels/ListLabels.vue
@@ -94,9 +94,9 @@
{{ $t('task.label.delete.header') }}
diff --git a/src/views/list/ListKanban.vue b/src/views/list/ListKanban.vue
index c59411a53..979c26ad0 100644
--- a/src/views/list/ListKanban.vue
+++ b/src/views/list/ListKanban.vue
@@ -206,20 +206,18 @@
-