li0nhunter/Website-template
Template
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

initial commit

Browse Source
This commit is contained in:
Ari Yeger
2025-07-23 11:29:35 -04:00
parent d104d37a27
commit 5e9654728e
67 changed files with 7956 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files

84
client/src/components/Modal.vue Normal file
View File

@ -0,0 +1,84 @@
<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>