71 lines
1.3 KiB
Vue
71 lines
1.3 KiB
Vue
<template>
|
|
<div class="dialog-box__container">
|
|
<div class="dialog-box__header">
|
|
<div class="dialog-box__title">{{ title }}</div>
|
|
<Button v-if="!noCloseButton" :border="false" @click="emit('close')">x</Button>
|
|
</div>
|
|
<div class="dialog-box__body">
|
|
<slot />
|
|
</div>
|
|
<div class="dialog-box__footer">
|
|
<slot name="footer" />
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
defineProps<{
|
|
title?: string
|
|
noCloseButton?: boolean
|
|
}>()
|
|
|
|
const emit = defineEmits(['close'])
|
|
</script>
|
|
|
|
<style lang="scss">
|
|
@import '~/assets/css/components';
|
|
|
|
.dialog-box {
|
|
&__container {
|
|
display: flex;
|
|
flex-direction: column;
|
|
min-width: 400px;
|
|
min-height: 280px;
|
|
margin: auto;
|
|
background-color: $dialog-box-background-color;
|
|
border: $dialog-box-border;
|
|
border-radius: 8px;
|
|
color: $dialog-box-text-color;
|
|
z-index: 12;
|
|
|
|
@media (max-width: $phone-max-width) {
|
|
min-width: unset;
|
|
}
|
|
}
|
|
|
|
|
|
&__header {
|
|
display: flex;
|
|
}
|
|
|
|
&__title {
|
|
flex-grow: 1;
|
|
margin: 36px 36px 8px 36px;
|
|
font-family: $font-primary;
|
|
font-size: 24px;
|
|
}
|
|
|
|
&__body {
|
|
flex-grow: 1;
|
|
margin: 36px;
|
|
font-family: $font-secondary;
|
|
}
|
|
|
|
&__footer {
|
|
display: flex;
|
|
// justify-content: end;
|
|
margin: 24px 36px;
|
|
}
|
|
}
|
|
</style>
|