diff --git a/packages/vlossom/src/components/vs-modal/VsModal.scss b/packages/vlossom/src/components/vs-modal/VsModal.scss
index 5a8f9a80d..c4e42fd1b 100644
--- 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
index b253463d7..c0feadbac 100644
--- 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"
>
-