From 27e11b20b06f2f2dbfb56c0998a63169b4b8abc4 Mon Sep 17 00:00:00 2001
From: Joris
Date: Wed, 8 Nov 2017 23:47:26 +0100
Subject: Use a better project structure

---
 server/src/Design/Form.hs | 130 ++++++++++++++++++++++++++++++++++++++++++++++
 1 file changed, 130 insertions(+)
 create mode 100644 server/src/Design/Form.hs

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

diff --git a/server/src/Design/Form.hs b/server/src/Design/Form.hs
new file mode 100644
index 0000000..ebb8ac8
--- /dev/null
+++ b/server/src/Design/Form.hs
@@ -0,0 +1,130 @@
+{-# LANGUAGE OverloadedStrings #-}
+
+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
+  let inputZIndex = 1
+
+  label ? do
+    cursor pointer
+    color Color.silver
+
+  ".textInput" ? do
+    position relative
+    marginBottom (em 1.5)
+    paddingTop (px inputTop)
+    marginTop (px (-10))
+
+    input ? do
+      width (pct 100)
+      position relative
+      zIndex inputZIndex
+      backgroundColor transparent
+      paddingBottom (px inputPaddingBottom)
+      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
+      lineHeight (px inputHeight)
+      position absolute
+      top (px inputTop)
+      left (px 0)
+      transition "all" (sec 0.2) easeIn (sec 0)
+
+    button ? do
+      position absolute
+      right (px 0)
+      top (px 27)
+      zIndex inputZIndex
+      hover & "svg path" ? do
+        "fill" -: "rgb(220, 220, 220)"
+
+    (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
+
+  ".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
+    label ? do
+      display block
+      marginBottom (px 10)
+      fontSize (pct 80)
+    select ? do
+      backgroundColor Color.white
+      border solid (px 1) Color.silver
+      sym borderRadius (px 3)
+      sym2 padding (px 5) (px 8)
+      option ? do
+        firstChild & display none
+        sym2 padding (px 5) (px 8)
+    ".error" & do
+      select ? borderColor Color.chestnutRose
+      ".errorMessage" ? do
+        color Color.chestnutRose
+        fontSize (pct 80)
+        marginTop (em 0.5)
-- 
cgit v1.2.3