1 files changed, 69 insertions, 0 deletions
diff --git a/server/src/Design/Modal.hs b/server/src/Design/Modal.hs
new file mode 100644
index 0000000..1195e10
--- /dev/null
+++ b/server/src/Design/Modal.hs
@@ -0,0 +1,69 @@
+module Design.Modal
+  ( design
+  ) where
+
+import           Clay
+import           Data.Monoid              ((<>))
+
+import qualified Design.View.Payment.Form as Form
+
+design :: Css
+design = do
+
+  appearKeyframe
+
+  ".g-Modal" ? do
+    display none
+    appearAnimation
+    transition "all" (sec 0.2) ease (sec 0)
+    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.6)
+    zIndex 1
+
+  ".g-Modal__Content" ? do
+    minWidth (px 300)
+    position fixed
+    top (pct 25)
+    left (pct 50)
+    "transform" -: "translate(-50%, -25%)"
+    zIndex 1
+    backgroundColor white
+    sym borderRadius (px 5)
+    boxShadow . pure . bsColor (rgba 0 0 0 0.5) $ shadowWithBlur (px 0) (px 0) (px 15)
+
+    ".form" ? Form.design
+
+  ".paymentModal" & do
+    ".radioGroup" ? ".title" ? display none
+    ".selectInput" ? do
+      select ? width (pct 100)
+      marginBottom (em 1)
+
+  ".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")
+  ]