84 lines
1.6 KiB
Vue
84 lines
1.6 KiB
Vue
|
<template>
|
||
|
|
<div class="modal-dialog__container">
|
||
|
|
<div class="modal-dialog__box">
|
||
|
|
<div class="modal-dialog__header">
|
||
|
|
<div class="modal-dialog__title">{{ title }}</div>
|
||
|
|
<Button :border="false" @click="emit('close')">x</Button>
|
||
|
|
</div>
|
||
|
|
<div class="modal-dialog__body">
|
||
|
|
<slot />
|
||
|
|
</div>
|
||
|
|
<div class="modal-dialog__footer">
|
||
|
|
<slot name="footer" />
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="modal-dialog__backdrop" />
|
||
|
|
</div>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<script setup lang="ts">
|
||
|
|
defineProps<{
|
||
|
|
title?: string
|
||
|
|
}>()
|
||
|
|
const emit = defineEmits(['close'])
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<style lang="scss">
|
||
|
|
@import '~/assets/css/components';
|
||
|
|
|
||
|
|
.modal-dialog {
|
||
|
|
&__container {
|
||
|
|
display: flex;
|
||
|
|
position: absolute;
|
||
|
|
left: 0;
|
||
|
|
top: 0;
|
||
|
|
width: 100%;
|
||
|
|
height: 100%;
|
||
|
|
}
|
||
|
|
|
||
|
|
&__box {
|
||
|
|
display: flex;
|
||
|
|
flex-direction: column;
|
||
|
|
min-width: 400px;
|
||
|
|
min-height: 280px;
|
||
|
|
margin: auto;
|
||
|
|
background-color: $modal-dialog-background-color;
|
||
|
|
border: $modal-dialog-border;
|
||
|
|
border-radius: 8px;
|
||
|
|
color: $modal-dialog-text-color;
|
||
|
|
z-index: 12;
|
||
|
|
}
|
||
|
|
|
||
|
|
&__header {
|
||
|
|
display: flex;
|
||
|
|
}
|
||
|
|
|
||
|
|
&__title {
|
||
|
|
flex-grow: 1;
|
||
|
|
margin: 16px 16px 8px 16px;
|
||
|
|
font-family: $font-primary;
|
||
|
|
font-size: 24px;
|
||
|
|
}
|
||
|
|
|
||
|
|
&__body {
|
||
|
|
flex-grow: 1;
|
||
|
|
margin: 16px;
|
||
|
|
font-family: $font-secondary;
|
||
|
|
}
|
||
|
|
|
||
|
|
&__footer {
|
||
|
|
display: flex;
|
||
|
|
justify-content: end;
|
||
|
|
margin: 24px 16px;
|
||
|
|
}
|
||
|
|
|
||
|
|
&__backdrop {
|
||
|
|
position: absolute;
|
||
|
|
width: 100%;
|
||
|
|
height: 100%;
|
||
|
|
background-color: $modal-dialog-backdrop-background-color;
|
||
|
|
z-index: 10;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
</style>
|