feat: implement modals with vue router 4 #816
|
@ -248,4 +248,6 @@ store.dispatch('labels/loadAllLabels')
|
|||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
@include modal-transition();
|
||||
</style>
|
|
@ -1,4 +1,5 @@
|
|||
<template>
|
||||
<!-- FIXME: transition should not be included in the modal -->
|
||||
dpschen marked this conversation as resolved
|
||||
<transition name="modal">
|
||||
<section
|
||||
v-if="enabled"
|
||||
|
@ -196,18 +197,4 @@ export default {
|
|||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
/* Transitions */
|
||||
|
||||
.modal-enter,
|
||||
.modal-leave-active {
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
.modal-enter .modal-container,
|
||||
.modal-leave-active .modal-container {
|
||||
transform: scale(0.9);
|
||||
}
|
||||
</style>
|
|
@ -264,4 +264,6 @@ export default {
|
|||
.sharables-list:not(.card-content) {
|
||||
overflow-y: auto
|
||||
}
|
||||
|
||||
@include modal-transition();
|
||||
dpschen marked this conversation as resolved
Outdated
konrad
commented
Doesn't repeating this create duplicate css everywhere? (even if very little) Doesn't repeating this create duplicate css everywhere? (even if very little)
dpschen
commented
Yes it does for now. But it shouldn't stay: By using a mixin I create a direct dependency. The reason for me doing this is, that I want to change this later when working on the Modal / Dialog feature. Perceive it as a reminder =) Yes it does for now. But it shouldn't stay:
By using a mixin I create a direct dependency. The reason for me doing this is, that I want to change this later when working on the Modal / Dialog feature.
Perceive it as a reminder =)
|
||||
</style>
|
|
@ -365,3 +365,7 @@ export default {
|
|||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@include modal-transition();
|
||||
</style>
|
|
@ -382,4 +382,6 @@ export default {
|
|||
transform: translate3d(0, -4px, 0);
|
||||
}
|
||||
}
|
||||
|
||||
@include modal-transition();
|
||||
</style>
|
|
@ -339,4 +339,6 @@ export default {
|
|||
.media-content {
|
||||
width: calc(100% - 48px - 2rem);
|
||||
}
|
||||
|
||||
@include modal-transition();
|
||||
dpschen marked this conversation as resolved
konrad
commented
Why does this component need the modal-transition css if it is never opened as a modal? Why does this component need the modal-transition css if it is never opened as a modal?
dpschen
commented
It does have a modal inside! See line 135. It does have a modal inside! See line 135.
By importing it here we remove the indirect dependency.
|
||||
</style>
|
|
@ -364,4 +364,6 @@ export default {
|
|||
:deep(.multiselect .search-results button) {
|
||||
padding: 0.5rem;
|
||||
}
|
||||
|
||||
@include modal-transition();
|
||||
</style>
|
|
@ -16,6 +16,8 @@
|
|||
// 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;
|
||||
|
||||
|
|
12
src/styles/mixins.scss
Normal file
12
src/styles/mixins.scss
Normal file
|
@ -0,0 +1,12 @@
|
|||
/* Transitions */
|
||||
@mixin modal-transition() {
|
||||
.modal-enter,
|
||||
.modal-leave-active {
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
.modal-enter .modal-container,
|
||||
.modal-leave-active .modal-container {
|
||||
transform: scale(0.9);
|
||||
}
|
||||
}
|
|
@ -740,4 +740,6 @@ $filter-container-height: '1rem - #{$switch-view-height}';
|
|||
.move-card-leave-active {
|
||||
display: none;
|
||||
}
|
||||
|
||||
@include modal-transition();
|
||||
</style>
|
|
@ -932,4 +932,6 @@ $flash-background-duration: 750ms;
|
|||
background: transparent;
|
||||
}
|
||||
}
|
||||
|
||||
@include modal-transition();
|
||||
</style>
|
|
@ -308,4 +308,6 @@ export default {
|
|||
padding: 0;
|
||||
}
|
||||
}
|
||||
|
||||
@include modal-transition();
|
||||
</style>
|
Reference in New Issue
Block a user
Where should it be included instead?
Around the modal. So where it will get mounted.
Ah okay, makes sense.