update modal and add slide animation for modal

2 files changed, 38 insertions, 14 deletions

diff --git a/src/modals.less b/src/modals.less
index 4aaacd3..bdfe8b8 100644
--- a/src/modals.less
+++ b/src/modals.less
@@ -1,6 +1,6 @@
 // Modals
-.modal.active {
-  display: flex;
+.modal {
+  display: none;
   position: fixed;
   top: 0;
   right: 0;
@@ -9,16 +9,25 @@
   align-items: center;
   justify-content: center;
   overflow: hidden;
-  z-index: 499;
+  opacity: 0;
 
-  .modal-overlay {
-    display: block;
-    position: absolute;
-    top: 0;
-    right: 0;
-    bottom: 0;
-    left: 0;
-    background-color: rgba(0, 0, 0, .75);
+  &.active {
+    display: flex;
+    z-index: 1988;
+    opacity: 1;
+
+    .modal-overlay {
+      display: block;
+      position: absolute;
+      top: 0;
+      right: 0;
+      bottom: 0;
+      left: 0;
+      background-color: rgba(0, 0, 0, .75);
+    }
+    .modal-container {
+      animation: slide-down .216s;
+    }
   }
 }
 .modal-container {
@@ -28,7 +37,8 @@
   padding: 0;
   border-radius: .3rem;
   background-color: #fff;
-  z-index: 999;
+  z-index: 1988;
+  animation: slide-up .216s;
   .shadow;
 
   .modal-header {
diff --git a/src/utilities.less b/src/utilities.less
index 6feba1e..9dcd35e 100644
--- a/src/utilities.less
+++ b/src/utilities.less
@@ -200,6 +200,20 @@
 
 // Animations
 @keyframes loading {
-  0%{transform: rotate(0deg);}
-  100%{transform: rotate(360deg);}
+  0% {
+    transform: rotate(0deg);
+  }
+  100% {
+    transform: rotate(360deg);
+  }
+}
+@keyframes slide-down {
+  0% {
+    margin-top: -3rem;
+    opacity: 0;
+  }
+  100% {
+    margin-top: 0;
+    opacity: 1;
+  }
 }
\ No newline at end of file