gorb/frontend
4
0
Fork 0
Code Issues Pull requests Projects Releases Packages 1 Wiki Activity Actions

feat: start work on Modal component

Browse source
This commit is contained in:
SauceyRed 2025-06-07 06:29:31 +02:00
parent 80945f1177
commit 4dea7d27db
Signed by: sauceyred
GPG key ID: 270B096EF6E9A462
1 changed files with 50 additions and 0 deletions
Download patch file Download diff file Expand all files Collapse all files

50
components/Modal.vue Normal file
View file

@ -0,0 +1,50 @@
<template>
<div class="modal-top-container">
<div v-if="heavy" class="modal-container modal-heavy">
</div>
<div v-else class="modal-container modal-light">
</div>
<div class="modal-div">
<slot />
</div>
</div>
</template>
<script lang="ts" setup>
const props = defineProps<{ heavy?: boolean }>();
</script>
<style>
.modal-container {
position: fixed;
border: 1px solid cyan;
height: 100%;
width: 100%;
opacity: 70%;
z-index: 10;
background-color: var(--background-color);
}
.modal-div {
display: flex;
justify-content: center;
align-items: center;
background-color: rgb(50, 50, 50);
opacity: 100%;
z-index: 11;
padding: 1%;
}
.modal-top-container {
position: fixed;
display: flex;
justify-content: center;
align-items: center;
height: 100%;
width: 100%;
}
</style>