change modal transition

dist/index.html

@@ -167,6 +167,18 @@
         <div class="grid">
             <div class="col-12">
                 <h2>Modal</h2>
+                <button class="button" onclick="openModal()">
+                    Open
+                </button>
+                <script type="text/javascript">
+                    function openModal() {
+                        document.querySelector('.modal').classList.add('modal--open')
+                    }
+
+                    function closeModal() {
+                        document.querySelector('.modal').classList.remove('modal--open')
+                    }
+                </script>
                 <div class="modal">
                     <div class="modal__inner">
                         <div class="modal__title t-center">
@@ -179,10 +191,10 @@
                             Do you really wan't to delete all files?
                         </div>
                         <div class="modal__footer">
-                            <button class="button button--danger">
+                            <button class="button button--danger" onclick="closeModal()">
                                 Confirm
                             </button>
-                            <button class="button float-right">
+                            <button class="button float-right" onclick="closeModal()">
                                 Reject
                             </button>
                         </div>

dist/plain-ui.css

@@ -4897,15 +4897,19 @@ img.media {
   height: 100%;
   top: 0;
   left: 0;
+  display: flex;
+  visibility: hidden;
+  transition: visibility 0s linear 0.5s;
   padding: 1em;
   z-index: 20;
-  display: flex;
   align-items: center;
   justify-content: center;
 }
 .modal__inner {
   position: relative;
   z-index: 21;
+  transition: transform 0.5s;
+  transform: scale(0);
   max-width: 500px;
 }
 .modal__inner .button {
@@ -4933,10 +4937,22 @@ img.media {
   left: 0;
   width: 100%;
   height: 100%;
-  background: rgba(0, 0, 0, 0.87);
+  background-color: transparent;
+  transition: background-color 0.5s;
   z-index: 19;
   content: "";
 }
+.modal--open {
+  display: flex;
+  visibility: visible;
+  transition: visibility 0s linear 0s;
+}
+.modal--open:before {
+  background: rgba(0, 0, 0, 0.87);
+}
+.modal--open .modal__inner {
+  transform: scale(1);
+}
 
 .masonry {
   display: flex;

src/scss/components/_button.scss

@@ -40,6 +40,10 @@
             font-size: 0.8em;
         }
 
+        &--outline {
+            
+        }
+
         &--no-style {
             margin: 0;
             padding: 0;

src/scss/components/_modal.scss

@@ -17,10 +17,13 @@
         top: 0;
         left: 0;
 
+        display: flex;
+        visibility: hidden;
+        transition: visibility 0s linear 0.5s;
+
         padding: 1em;
         z-index: 20;
 
-        display: flex;
         align-items: center;
         justify-content: center;
 
@@ -28,6 +31,9 @@
             position: relative;
             z-index: 21;
 
+            transition: transform 0.5s;
+            transform: scale(0);
+
             max-width: 500px;
 
             .button {
@@ -62,9 +68,25 @@
             left: 0;
             width: 100%;
             height: 100%;
-            background: rgba(0,0,0,.87);
+            background-color: transparent;
+            transition: background-color 0.5s;
             z-index: 19;
             content: '';
         }
+
+        &--open {
+            display: flex;
+            visibility: visible;
+
+            transition: visibility 0s linear 0s;
+
+            &:before {
+                background: rgba(0,0,0,.87);
+            }
+
+            .modal__inner {
+                transform: scale(1);
+            }
+        }
     }
 }