Add modal template

zelytra · Feb 22, 2024 · ff2c95b · ff2c95b
1 parent 1813e30
commit ff2c95b
Showing 1 changed file with 38 additions and 0 deletions.
diff --git a/frontend/src/vue/templates/ModaleTemplate.vue b/frontend/src/vue/templates/ModaleTemplate.vue
@@ -0,0 +1,38 @@
+<template>
+  <div
+      v-if="isModalOpen"
+      class="modal"
+  >
+    <slot/>
+  </div>
+</template>
+
+<script setup lang="ts">
+defineProps({
+  isModalOpen: Boolean
+})
+
+const emits = defineEmits<{
+  (e: "update:isModalOpen", isModalOpen: boolean): void;
+}>();
+</script>
+
+<style scoped lang="scss">
+.modal {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  padding: 12px;
+  display: flex;
+  justify-content: center;
+  background: rgba(255, 255, 255, 0.19);
+  border-radius: 16px;
+  box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
+  backdrop-filter: blur(11.7px);
+  -webkit-backdrop-filter: blur(11.7px);
+  max-width: 90%;
+  min-width: 40%;
+  height: 80%;
+}
+</style>