Update ModalLayout.vue

n1crack · Jun 30, 2024 · f2f5960 · f2f5960
1 parent 8b9a5a9
commit f2f5960
Showing 1 changed file with 37 additions and 7 deletions.
diff --git a/src/components/modals/ModalLayout.vue b/src/components/modals/ModalLayout.vue
@@ -1,16 +1,16 @@
 <template>
-  <div class="v-f-modal relative z-30" aria-labelledby="modal-title" role="dialog" aria-modal="true" @keyup.esc="app.modal.close()" tabindex="0">
-    <div class="fixed inset-0 bg-gray-500 dark:bg-gray-600 dark:bg-opacity-75 bg-opacity-75 transition-opacity"></div>
+  <div class="vuefinder__modal-layout" aria-labelledby="modal-title" role="dialog" aria-modal="true" @keyup.esc="app.modal.close()" tabindex="0">
+    <div class="vuefinder__modal-layout__overlay"></div>
 
-    <div class="fixed z-10 inset-0 overflow-hidden">
-      <div class="flex items-end sm:items-center justify-center min-h-full p-4 text-center sm:p-0" @mousedown.self="app.modal.close()">
-        <div ref="modalBody" class="relative bg-white dark:bg-gray-800 rounded-lg text-left overflow-hidden shadow-xl transform transition-all sm:my-8 sm:max-w-4xl md:max-w-2xl lg:max-w-3xl xl:max-w-3xl w-full">
-          <div class="bg-white dark:bg-gray-800 px-4 pt-5 pb-4 sm:p-6 sm:pb-4">
+    <div class="vuefinder__modal-layout__container">
+      <div class="vuefinder__modal-layout__wrapper" @mousedown.self="app.modal.close()">
+        <div ref="modalBody" class="vuefinder__modal-layout__body">
+          <div class="vuefinder__modal-layout__content">
 
             <slot/>
 
           </div>
-          <div class="bg-gray-50 dark:bg-gray-800 dark:border-t dark:border-gray-700 px-4 py-3 sm:px-6 sm:flex sm:flex-row-reverse">
+          <div class="vuefinder__modal-layout__footer">
             <slot name="buttons"/>
           </div>
         </div>
@@ -19,6 +19,36 @@
   </div>
 </template>
 
+<style>
+.vuefinder__modal-layout {
+  @apply relative z-30;
+}
+
+.vuefinder__modal-layout__overlay {
+  @apply fixed inset-0 bg-gray-500 dark:bg-gray-600 dark:bg-opacity-75 bg-opacity-75 transition-opacity;
+}
+
+.vuefinder__modal-layout__container {
+  @apply fixed z-10 inset-0 overflow-hidden;
+}
+
+.vuefinder__modal-layout__wrapper {
+  @apply flex items-end sm:items-center justify-center min-h-full p-4 text-center sm:p-0;
+}
+
+.vuefinder__modal-layout__body {
+  @apply relative bg-white dark:bg-gray-800 rounded-lg text-left overflow-hidden shadow-xl transform transition-all sm:my-8 sm:max-w-4xl md:max-w-2xl lg:max-w-3xl xl:max-w-3xl w-full;
+}
+
+.vuefinder__modal-layout__content {
+  @apply bg-white dark:bg-gray-800 px-4 pt-5 pb-4 sm:p-6 sm:pb-4;
+}
+
+.vuefinder__modal-layout__footer {
+  @apply bg-gray-50 dark:bg-gray-800 dark:border-t dark:border-gray-700 px-4 py-3 sm:px-6 sm:flex sm:flex-row-reverse;
+}
+</style>
+
 <script setup>
 import {inject, nextTick, onMounted, ref} from 'vue';