1 files changed, 101 insertions, 0 deletions
diff --git a/server/src/Design/Form.hs b/server/src/Design/Form.hs
new file mode 100644
index 0000000..5713bfe
--- /dev/null
+++ b/server/src/Design/Form.hs
@@ -0,0 +1,101 @@
+module Design.Form
+  ( design
+  ) where
+
+import           Data.Monoid  ((<>))
+
+import           Clay
+
+import           Design.Color as Color
+
+design :: Css
+design = do
+
+  let inputHeight = 30
+  let inputTop = 22
+  let inputPaddingBottom = 3
+
+  ".textInput" ? do
+    position relative
+    marginBottom (em 2)
+    paddingTop (px inputTop)
+    marginTop (px (-10))
+
+    input ? do
+      width (pct 100)
+      position relative
+      backgroundColor transparent
+      paddingBottom (px inputPaddingBottom)
+      paddingRight (px 14) -- Space for the delete icon
+      borderStyle none
+      borderBottom solid (px 1) Color.dustyGray
+      marginBottom (px 5)
+      height (px inputHeight)
+      lineHeight (px inputHeight)
+      focus & do
+        borderWidth (px 2)
+        paddingBottom (px $ inputPaddingBottom - 1)
+
+    ".label" ? do
+      zIndex (-1)
+      color Color.silver
+      lineHeight (px inputHeight)
+      position absolute
+      top (px inputTop)
+      left (px 0)
+      transition "all" (sec 0.2) easeInOut (sec 0)
+
+    button ? do
+      position absolute
+      right (px 0)
+      top (px 27)
+      svg ? "path" ?
+        ("fill" -: Color.toString Color.silver)
+      hover & svg ? "path" ?
+        ("fill" -: Color.toString (Color.silver -. 25))
+
+    (input # ".filled" |+ ".label") <> (input # focus |+ ".label") ? do
+      top (px 0)
+      fontSize (pct 80)
+
+    ".error" & do
+      input ? do
+        borderBottomColor Color.chestnutRose
+
+      ".errorMessage" ? do
+        position absolute
+        color Color.chestnutRose
+        fontSize (pct 80)
+
+  ".colorInput" ? do
+    display flex
+    alignItems center
+    marginBottom (em 1.5)
+
+    input ? do
+      borderColor transparent
+      backgroundColor transparent
+
+  ".selectInput" ? do
+
+    ".label" ? do
+      color Color.silver
+      display block
+      marginBottom (px 10)
+      fontSize (pct 80)
+
+    select ? do
+      width (pct 100)
+      backgroundColor Color.white
+      border solid (px 1) Color.silver
+      sym borderRadius (px 3)
+      sym2 padding (px 5) (px 8)
+      option ? sym2 padding (px 5) (px 8)
+      focus & backgroundColor Color.wildSand
+
+    ".error" & do
+      select ? borderColor Color.chestnutRose
+      ".errorMessage" ? do
+        color Color.chestnutRose
+        fontSize (pct 80)
+        marginTop (em 0.5)