feat: add scrolling variant to modal
All checks were successful
continuous-integration/drone/pr Build is passing
All checks were successful
continuous-integration/drone/pr Build is passing
This commit is contained in:
parent
03e9087437
commit
8a0ca3bd1f
|
@ -61,6 +61,7 @@ export const TRANSITION_NAMES = {
|
|||
export const VARIANTS = {
|
||||
DEFAULT: 'default',
|
||||
HINT_MODAL: 'hint-modal',
|
||||
SCROLLING: 'scrolling',
|
||||
}
|
||||
|
||||
function validValue(values) {
|
||||
|
@ -126,7 +127,8 @@ export default {
|
|||
overflow: auto;
|
||||
}
|
||||
|
||||
.modal-content {
|
||||
.default .modal-content,
|
||||
.hint-modal .modal-content {
|
||||
text-align: center;
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
|
@ -149,15 +151,24 @@ export default {
|
|||
}
|
||||
}
|
||||
|
||||
::v-deep.close {
|
||||
position: fixed;
|
||||
top: 5px;
|
||||
right: 26px;
|
||||
color: $white;
|
||||
font-size: 2rem;
|
||||
// scrolling-content
|
||||
// used e.g. for <TaskDetailViewModal>
|
||||
.scrolling .modal-content {
|
||||
max-width: 1024px;
|
||||
width: 100%;
|
||||
margin: 4rem auto;
|
||||
|
||||
max-height: none; // reset bulma
|
||||
overflow: visible; // reset bulma
|
||||
|
||||
@media screen and (min-width: $tablet) {
|
||||
max-height: none; // reset bulma
|
||||
margin: 4rem auto; // reset bulma
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
@media screen and (max-width: $desktop) {
|
||||
display: none;
|
||||
margin: 0;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
@ -1,19 +1,13 @@
|
|||
<template>
|
||||
<div class="modal-mask">
|
||||
<div
|
||||
class="modal-container"
|
||||
@mousedown.self="close()"
|
||||
v-shortkey="['esc']"
|
||||
@shortkey="close()"
|
||||
>
|
||||
<div class="scrolling-content">
|
||||
<modal
|
||||
@close="close()"
|
||||
variant="scrolling"
|
||||
>
|
||||
<a @click="close()" class="close">
|
||||
<icon icon="times"/>
|
||||
</a>
|
||||
<task-detail-view/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</modal>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
@ -55,13 +49,15 @@ export default {
|
|||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.scrolling-content {
|
||||
max-width: 1024px;
|
||||
width: 100%;
|
||||
margin: 4rem auto;
|
||||
.close {
|
||||
position: fixed;
|
||||
top: 5px;
|
||||
right: 26px;
|
||||
color: $white;
|
||||
font-size: 2rem;
|
||||
|
||||
@media screen and (max-width: $desktop) {
|
||||
margin: 0;
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
</style>
|
Reference in New Issue
Block a user