From cebf2051834664f188ff28189ace8659987be840 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Bj=C3=B6rn?= <me@tentakelfabrik.de>
Date: Wed, 30 Jun 2021 00:11:27 +0200
Subject: [PATCH] change modal transition

---
 dist/index.html                  | 16 ++++++++++++++--
 dist/plain-ui.css                | 20 ++++++++++++++++++--
 src/scss/components/_button.scss |  4 ++++
 src/scss/components/_modal.scss  | 26 ++++++++++++++++++++++++--
 4 files changed, 60 insertions(+), 6 deletions(-)

diff --git a/dist/index.html b/dist/index.html
index 4e36849..2c8a2f0 100644
--- a/dist/index.html
+++ b/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>
diff --git a/dist/plain-ui.css b/dist/plain-ui.css
index 9d6f953..4ac6a4c 100644
--- a/dist/plain-ui.css
+++ b/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;
diff --git a/src/scss/components/_button.scss b/src/scss/components/_button.scss
index faa8832..bcc3334 100644
--- a/src/scss/components/_button.scss
+++ b/src/scss/components/_button.scss
@@ -40,6 +40,10 @@
             font-size: 0.8em;
         }
 
+        &--outline {
+            
+        }
+
         &--no-style {
             margin: 0;
             padding: 0;
diff --git a/src/scss/components/_modal.scss b/src/scss/components/_modal.scss
index eeb49a6..613c7cc 100644
--- a/src/scss/components/_modal.scss
+++ b/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);
+            }
+        }
     }
 }
\ No newline at end of file