84 lines
2.3 KiB
Vue
84 lines
2.3 KiB
Vue
<script setup lang="ts">
|
|
import BaseDiv from "@components/baseComponents/BaseDiv.vue";
|
|
|
|
const emit = defineEmits(["close"])
|
|
|
|
</script>
|
|
|
|
<template>
|
|
<div class="modal-fade" tabindex="-1" id="editModal" aria-labelledby="editModalLabel" @click="emit('close')">
|
|
<div class="modal" @click.stop>
|
|
<div class="modal-content">
|
|
<BaseDiv class="modal-header">
|
|
<slot name="modal-header">
|
|
Modal Header
|
|
</slot>
|
|
<button type="button" class="btn-close" aria-label="Close" @click="emit('close')"/>
|
|
</BaseDiv>
|
|
<BaseDiv v-if="$slots.body" class="modal-body">
|
|
<slot name="body"></slot>
|
|
</BaseDiv>
|
|
<BaseDiv v-if="$slots.footer" class="modal-footer">
|
|
<slot name="footer">
|
|
<button type="button" class="btn btn-secondary" @click="emit('close')">Close</button>
|
|
</slot>
|
|
</BaseDiv>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<style scoped>
|
|
.modal-content {
|
|
color: var(--color-background-font);
|
|
background-color: var(--color-background) !important;
|
|
border: 1px solid var(--color-modal-background-inverted);
|
|
}
|
|
|
|
.modal-header {
|
|
color: var(--color-background-font);
|
|
background-color: var(--color-background-soft);
|
|
border-bottom: 1px solid var(--color-modal-background-inverted);
|
|
}
|
|
|
|
.modal-footer {
|
|
color: var(--color-background-font);
|
|
background-color: var(--color-background-soft);
|
|
border-top: 1px solid var(--color-modal-background-inverted);
|
|
}
|
|
|
|
.modal-body {
|
|
color: var(--color-background-font);
|
|
background-color: var(--color-background) !important;
|
|
}
|
|
|
|
.modal-body {
|
|
background-color: var(--color-background) !important;
|
|
color: var(--color-background-font);
|
|
border: 2px solid var(--color-modal-background-inverted);
|
|
}
|
|
|
|
.modal {
|
|
position: relative;
|
|
max-width: 600px;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
z-index: 1050;
|
|
}
|
|
|
|
.modal-fade {
|
|
position: fixed;
|
|
top: 0;
|
|
left: 0;
|
|
width: 100%;
|
|
height: 100%;
|
|
background-color: rgba(0, 0, 0, 0.5);
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
transition: background-color 1s ease;
|
|
z-index: 1000;
|
|
}
|
|
|
|
</style> |