aboutsummaryrefslogtreecommitdiff
path: root/src/server/Design
diff options
context:
space:
mode:
Diffstat (limited to 'src/server/Design')
-rw-r--r--src/server/Design/Errors.hs55
-rw-r--r--src/server/Design/Global.hs2
2 files changed, 57 insertions, 0 deletions
diff --git a/src/server/Design/Errors.hs b/src/server/Design/Errors.hs
new file mode 100644
index 0000000..57aaeee
--- /dev/null
+++ b/src/server/Design/Errors.hs
@@ -0,0 +1,55 @@
+{-# LANGUAGE OverloadedStrings #-}
+
+module Design.Errors
+ ( design
+ ) where
+
+import Clay
+
+import Design.Color as Color
+
+design :: Css
+design = do
+ position fixed
+ top (px 20)
+ left (pct 50)
+ "transform" -: "translateX(-50%)"
+ margin (px 0) (px 0) (px 0) (px 0)
+ disapearKeyframes
+
+ ".error" ? do
+ disapearAnimation
+ let errorColor = Color.chestnutRose -. 15
+ color errorColor
+ border solid (px 2) errorColor
+ backgroundColor Color.white
+ borderRadius (px 5) (px 5) (px 5) (px 5)
+ padding (px 5) (px 5) (px 5) (px 5)
+
+ before & display none
+
+disapearAnimation :: Css
+disapearAnimation = do
+ animationName "disapear"
+ animationDelay (sec 5)
+ animationDuration (sec 1)
+ animationFillMode forwards
+
+disapearKeyframes :: Css
+disapearKeyframes = keyframes
+ "disapear"
+ [ ( 10
+ , do
+ opacity 0
+ height (px 40)
+ lineHeight (px 40)
+ marginBottom (px 10)
+ )
+ , ( 100
+ , do
+ opacity 0
+ height (px 0)
+ lineHeight (px 0)
+ marginBottom (px 0)
+ )
+ ]
diff --git a/src/server/Design/Global.hs b/src/server/Design/Global.hs
index 26c1a42..e742978 100644
--- a/src/server/Design/Global.hs
+++ b/src/server/Design/Global.hs
@@ -12,6 +12,7 @@ import qualified Design.Header as Header
import qualified Design.SignIn as SignIn
import qualified Design.LoggedIn as LoggedIn
import qualified Design.Form as Form
+import qualified Design.Errors as Errors
import qualified Design.Dialog as Dialog
import qualified Design.Tooltip as Tooltip
@@ -29,6 +30,7 @@ global = do
header ? Header.design
".signIn" ? SignIn.design
".loggedIn" ? LoggedIn.design
+ ".errors" ? Errors.design
".dialog" ? Dialog.design
".tooltip" ? Tooltip.design
Form.design