Show fullheight modal on desktop (#115)

ekaterinburgdev · Aug 26, 2024 · 9f75498 · 9f75498
1 parent 33d8ec2
commit 9f75498
Showing 1 changed file with 15 additions and 12 deletions.
diff --git a/client/components/UI/Modal/Modal.module.css b/client/components/UI/Modal/Modal.module.css
@@ -15,14 +15,15 @@ html:has(.Modal) {
     border: 0;
     background: transparent;
     transition: .15s ease-out;
-    animation: .2s ease-in-out fadeIn;
+    animation: .15s ease fadeIn;
 }
 
 .Modal:not([open]) {
     display: none;
 }
 
 .Modal::backdrop {
+    transition: .15s ease;
     background: rgba(12, 27, 39, .3);
 }
 
@@ -51,6 +52,7 @@ html:has(.Modal) {
     border-radius: 16px 16px 0 0;
     background: white;
     scrollbar-color: transparent transparent;
+    transition: .15s ease;
 }
 
 .ModalInner:hover {
@@ -106,27 +108,32 @@ html:has(.Modal) {
 @media screen and (min-width: 768px) {
     .Modal {
         width: calc(100% - 120px);
-        height: fit-content;
-        max-height: calc(100% - 160px);
+        max-height: calc(100% - 80px);
         background: none;
     }
 
     .Modal_Align-top {
         margin-top: 80px;
         margin-bottom: 0;
+        height: calc(100% - 80px);
+    }
+
+    .Modal_Align-top .ModalInner {
+        border-radius: 24px 24px 0 0;
     }
 
     .Modal_Align-center {
         margin-top: auto;
         margin-bottom: auto;
+        height: fit-content;
     }
 
-    .ModalDragArea {
-        display: none;
+    .Modal_Align-center .ModalInner {
+        border-radius: 24px;
     }
 
-    .ModalInner {
-        border-radius: 24px;
+    .ModalDragArea {
+        display: none;
     }
 
     .ModalClose {
@@ -184,10 +191,6 @@ html:has(.Modal) {
         padding: 24px 32px;
     }
 
-    .ModalInner {
-        border-radius: 28px;
-    }
-
     .ModalClose {
         right: -8px;
         padding: 16px;
@@ -202,7 +205,7 @@ html:has(.Modal) {
 @keyframes fadeIn {
     from {
         opacity: 0;
-        transform: translateY(-24px) translateZ(0);
+        transform: translateY(32px) translateZ(0);
     }
 
     to {