From c542424b7b41c78a170763f6996c12f56b359860 Mon Sep 17 00:00:00 2001
From: Joris
Date: Sat, 10 Aug 2019 21:31:27 +0200
Subject: Add smooth transitions to modal show and hide

---
 server/src/Design/Modal.hs | 39 ++++++++++++++++++++++++++++++++-------
 1 file changed, 32 insertions(+), 7 deletions(-)

(limited to 'server/src/Design/Modal.hs')

diff --git a/server/src/Design/Modal.hs b/server/src/Design/Modal.hs
index 9c016b9..dce2ef9 100644
--- a/server/src/Design/Modal.hs
+++ b/server/src/Design/Modal.hs
@@ -11,24 +11,37 @@ import qualified Design.View.Payment.Delete as Delete
 design :: Css
 design = do
 
-  ".modalCurtain" ? do
+  appearKeyframe
+
+  ".g-Modal" ? do
+    appearAnimation
+    transition "all" (sec 0.2) ease (sec 0)
+    display none
+    opacity 0
+
+  ".g-Modal--Show" & do
+    display block
+    opacity 1
+
+  ".g-Modal--Hiding" & do
+    display block
+
+  ".g-Modal__Curtain" ? do
     position fixed
     top (px 0)
     left (px 0)
     width (pct 100)
     height (pct 100)
-    backgroundColor (rgba 0 0 0 0.7)
-    zIndex 1000
-    opacity 1
-    transition "all" (sec 0.2) ease (sec 0)
+    backgroundColor (rgba 0 0 0 0.6)
+    zIndex 1
 
-  ".modalContent" ? do
+  ".g-Modal__Content" ? do
     minWidth (px 300)
     position fixed
     top (pct 25)
     left (pct 50)
     "transform" -: "translate(-50%, -25%)"
-    zIndex 1000
+    zIndex 1
     backgroundColor white
     sym borderRadius (px 5)
     boxShadow . pure . bsColor (rgba 0 0 0 0.5) $ shadowWithBlur (px 0) (px 0) (px 15)
@@ -44,3 +57,15 @@ design = do
 
   ".deletePaymentModal" <> ".deleteIncomeModal" ? do
     h1 ? marginBottom (em 1.5)
+
+appearAnimation :: Css
+appearAnimation = do
+  animationName "appear"
+  animationDuration (sec 0.15)
+  animationTimingFunction easeIn
+
+appearKeyframe :: Css
+appearKeyframe = keyframes
+  "appear"
+  [ (0, "opacity" -: "0")
+  ]
-- 
cgit v1.2.3