fix(VsModal): apply vs-modal container query padding

pubg · Sep 26, 2024 · 4fd7530 · 4fd7530
1 parent ba4fc13
commit 4fd7530
Show file tree

Hide file tree

Showing 3 changed files with 73 additions and 42 deletions.
diff --git a/packages/vlossom/src/components/vs-modal/VsModal.scss b/packages/vlossom/src/components/vs-modal/VsModal.scss
@@ -30,25 +30,20 @@
 
     .vs-modal-wrap {
         position: absolute;
-        display: flex;
-        flex-direction: column;
+        top: 50%;
+        left: 50%;
+        transform: translate(-50%, -50%);
         min-width: var(--vs-modal-width-xs);
         min-height: var(--vs-modal-height-xs);
         width: 100%;
         height: 100%;
         max-width: var(--vs-modal-width);
         max-height: var(--vs-modal-height);
-        top: 50%;
-        left: 50%;
         background-color: var(--vs-modal-backgroundColor, var(--vs-area-bg));
-        color: var(--vs-modal-fontColor, var(--vs-font-color));
-        font-size: var(--vs-modal-fontSize, var(--vs-font-size));
-        font-weight: var(--vs-modal-fontWeight, 400);
         box-shadow: var(--vs-modal-boxShadow, var(--vs-area-shadow-outer));
-        transform: translate(-50%, -50%);
         border-radius: var(--vs-modal-borderRadius, calc(var(--vs-radius-ratio) * var(--vs-radius)));
-        padding: var(--vs-modal-padding, 2rem);
         pointer-events: auto;
+        container-type: inline-size;
 
         // size
         @each $size in $sizes {
@@ -58,24 +53,34 @@
             }
         }
 
-        .vs-modal-header {
+        .vs-modal-contents {
             position: relative;
-            padding-bottom: 1.6rem;
-        }
+            display: flex;
+            width: 100%;
+            height: 100%;
+            padding: var(--vs-modal-padding, 2rem);
+            color: var(--vs-modal-fontColor, var(--vs-font-color));
+            font-size: var(--vs-modal-fontSize, var(--vs-font-size));
+            font-weight: var(--vs-modal-fontWeight, 400);
 
-        .vs-modal-footer {
-            position: relative;
-            padding-top: 1.6rem;
-        }
+            .vs-modal-header {
+                position: relative;
+                padding-bottom: 1.6rem;
+            }
 
-        .vs-modal-body {
-            position: relative;
-            flex: auto;
-            overflow: auto;
-            padding: 0.5rem;
+            .vs-modal-footer {
+                position: relative;
+                padding-top: 1.6rem;
+            }
+
+            .vs-modal-body {
+                position: relative;
+                flex: auto;
+                overflow: auto;
 
-            &.hide-scroll {
-                @include hide-scroll;
+                &.hide-scroll {
+                    @include hide-scroll;
+                }
             }
         }
     }
@@ -98,3 +103,27 @@
     transform: translate(-50%, -50%) scale(0.95);
     opacity: 0;
 }
+
+@container (min-width: 640px) {
+    .vs-modal .vs-modal-wrap .vs-modal-contents {
+        padding: var(--vs-modal-padding, 2.8rem);
+    }
+}
+
+@container (min-width: 768px) {
+    .vs-modal .vs-modal-wrap .vs-modal-contents {
+        padding: var(--vs-modal-padding, 3.6rem);
+    }
+}
+
+@container (min-width: 1024px) {
+    .vs-modal .vs-modal-wrap .vs-modal-contents {
+        padding: var(--vs-modal-padding, 4.8rem);
+    }
+}
+
+@container (min-width: 1280px) {
+    .vs-modal .vs-modal-wrap .vs-modal-contents {
+        padding: var(--vs-modal-padding, 6rem);
+    }
+}
diff --git a/packages/vlossom/src/components/vs-modal/VsModal.vue b/packages/vlossom/src/components/vs-modal/VsModal.vue
@@ -16,17 +16,19 @@
                         :aria-label="hasHeader ? undefined : 'Modal'"
                         :aria-modal="true"
                     >
-                        <header v-if="hasHeader" :id="headerId" class="vs-modal-header" aria-label="Modal Header">
-                            <slot name="header" />
-                        </header>
-
-                        <div :id="bodyId" :class="['vs-modal-body', { 'hide-scroll': hideScroll }]">
-                            <slot />
+                        <div class="vs-modal-contents">
+                            <header v-if="hasHeader" :id="headerId" class="vs-modal-header" aria-label="Modal Header">
+                                <slot name="header" />
+                            </header>
+
+                            <div :id="bodyId" :class="['vs-modal-body', { 'hide-scroll': hideScroll }]">
+                                <slot />
+                            </div>
+
+                            <footer v-if="$slots['footer']" class="vs-modal-footer" aria-label="Modal Footer">
+                                <slot name="footer" />
+                            </footer>
                         </div>
-
-                        <footer v-if="$slots['footer']" class="vs-modal-footer" aria-label="Modal Footer">
-                            <slot name="footer" />
-                        </footer>
                     </div>
                 </vs-focus-trap>
             </div>

diff --git a/packages/vlossom/src/styles/variables.scss b/packages/vlossom/src/styles/variables.scss
@@ -18,16 +18,16 @@ $variables: (
     width-xs: 100%,
 
     // modal
-    modal-height-xs: 18%,
-    modal-height-sm: 32%,
-    modal-height-md: 44%,
-    modal-height-lg: 64%,
+    modal-height-xs: 20%,
+    modal-height-sm: 30%,
+    modal-height-md: 50%,
+    modal-height-lg: 66%,
     modal-height-xl: 82%,
-    modal-width-xs: 16%,
-    modal-width-sm: 24%,
-    modal-width-md: 36%,
-    modal-width-lg: 60%,
-    modal-width-xl: 80%,
+    modal-width-xs: 20%,
+    modal-width-sm: 30%,
+    modal-width-md: 45%,
+    modal-width-lg: 70%,
+    modal-width-xl: 90%,
 
     // z-index
     bar-z-index: 100,