add: modal layout 반응형 디자인 적용

NGuard-Security · Jan 17, 2024 · 402ce5f · 402ce5f
1 parent b428879
commit 402ce5f
Showing 1 changed file with 27 additions and 18 deletions.
diff --git a/assets/styles/layouts/modal.scss b/assets/styles/layouts/modal.scss
@@ -1,17 +1,37 @@
+@media (max-width: 767px) {
+  .modal_wrap {
+    width: 90%;
+
+    .modal {
+      width: 100% !important;
+      left: 0 !important;
+
+      .btns {
+        flex-direction: column;
+        font-size: 18px !important;
+      }
+    }
+  }
+}
+
+@media (max-width: 1024px) {
+  .modal_wrap {
+    position: fixed !important;
+  }
+
+  .modal_bg {
+    z-index: 30 !important;
+  }
+}
+
 .modal_wrap {
   position: absolute;
   left: 50%;
   top: 50%;
   transform: translate(-50%, -50%);
-  z-index: 30;
+  z-index: 40;
 
   .modal {
-    @media (max-width: 767px) {
-      width: 100% !important;
-      left: 0 !important;
-      border-radius: 0px !important;
-    }
-
     display: flex;
     flex-direction: column;
     background-color: $color-navbar;
@@ -23,17 +43,6 @@
     line-height: 2rem;
 
     .btns a {
-      @media (max-width: 660px) {
-        font-size: 18px !important;
-      }
-
-      @media (max-width: 767px) {
-        .btns {
-          flex-direction: column;
-        }
-      }
-
-
       padding: 10px;
       background: $color-bg;
       border-radius: 10px;