Add smooth transitions to modal show and hide

3 files changed, 37 insertions, 42 deletions

diff --git a/server/src/Design/Form.hs b/server/src/Design/Form.hs
index 31a2127..0f236f7 100644
--- a/server/src/Design/Form.hs
+++ b/server/src/Design/Form.hs
@@ -14,7 +14,6 @@ design = do
   let inputHeight = 30
   let inputTop = 22
   let inputPaddingBottom = 3
-  let inputZIndex = 1
 
   label ? do
     cursor pointer
@@ -29,9 +28,9 @@ design = do
     input ? do
       width (pct 100)
       position relative
-      zIndex inputZIndex
       backgroundColor transparent
       paddingBottom (px inputPaddingBottom)
+      paddingRight (px 14) -- Space for the delete icon
       borderStyle none
       borderBottom solid (px 1) Color.dustyGray
       marginBottom (px 5)
@@ -52,7 +51,6 @@ design = do
       position absolute
       right (px 0)
       top (px 27)
-      zIndex inputZIndex
       svg ? "path" ?
         ("fill" -: Color.toString Color.silver)
       hover & svg ? "path" ?
@@ -80,35 +78,6 @@ design = do
       borderColor transparent
       backgroundColor transparent
 
-  ".radioGroup" ? do
-    position relative
-    marginBottom (em 2)
-
-    ".title" ? do
-      color Color.silver
-      marginBottom (em 0.8)
-
-    ".radioInputs" ? do
-      display flex
-      "justify-content" -: "center"
-
-      ".radioInput:not(:last-child)::after" ? do
-        content (stringContent "/")
-        marginLeft (px 10)
-        marginRight (px 10)
-
-      input ? do
-        opacity 0
-        width (px 30)
-        margin (px 0) (px (-15)) (px 0) (px (-15))
-
-      "input:focus + label" ? do
-        textDecoration underline
-
-      "input:checked + label" ? do
-        color Color.chestnutRose
-        fontWeight bold
-
   ".selectInput" ? do
     marginBottom (em 2)
 
diff --git a/server/src/Design/Global.hs b/server/src/Design/Global.hs
index 66e9f47..24d999f 100644
--- a/server/src/Design/Global.hs
+++ b/server/src/Design/Global.hs
@@ -22,7 +22,7 @@ globalDesign = renderWith compact [] global
 global :: Css
 global = do
   ".errors" ? Errors.design
-  ".modal" ? Modal.design
+  Modal.design
   ".tooltip" ? Tooltip.design
   Views.design
   Form.design
@@ -33,13 +33,14 @@ global = do
   html ? do
     height (pct 100)
 
+  "g-Body--Modal" ?
+    overflowY hidden
+
   body ? do
     position relative
     minWidth (px 320)
     height (pct 100)
     fontFamily ["Cantarell"] [sansSerif]
-    ".modal" &
-      overflowY hidden
     Media.tablet $ do
       fontSize (px 15)
       button ? fontSize (px 15)
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")
+  ]