34 lines
No EOL
813 B
Vue
34 lines
No EOL
813 B
Vue
<script setup lang="ts">
|
|
// Modal.vue
|
|
// Assume component existing means it's open
|
|
// Closing a modal emits a close event
|
|
// Ensure everything outside of modal gets darkened to 80% opacity
|
|
|
|
const emit = defineEmits(['close']);
|
|
|
|
</script>
|
|
|
|
<template>
|
|
<div>
|
|
<div class="modal-overlay" @click="emit('close')">
|
|
<div class="modal-content max-w-[50rem]" @click.stop>
|
|
<slot></slot>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<style>
|
|
.modal-overlay {
|
|
@apply fixed top-0 left-0 flex justify-center w-screen h-screen;
|
|
background-color: rgba(0, 0, 0, 0.2);
|
|
overflow: scroll;
|
|
}
|
|
|
|
.modal-content {
|
|
@apply bg-overlay-0 max-h-[48rem];
|
|
padding: 1rem;
|
|
border-radius: 0.5rem;
|
|
overflow: scroll;
|
|
}
|
|
</style> |