diff options
Diffstat (limited to 'src/server/Design/Form.hs')
-rw-r--r-- | src/server/Design/Form.hs | 62 |
1 files changed, 62 insertions, 0 deletions
diff --git a/src/server/Design/Form.hs b/src/server/Design/Form.hs new file mode 100644 index 0000000..bb7d7db --- /dev/null +++ b/src/server/Design/Form.hs @@ -0,0 +1,62 @@ +{-# LANGUAGE OverloadedStrings #-} + +module Design.Form + ( design + ) where + +import Data.Monoid ((<>)) + +import Clay + +-- import Design.Constants +import Design.Color as Color +-- import qualified Design.Media as Media + + +design :: Css +design = do + + let inputHeight = 30 + let inputTop = 22 + let inputPaddingBottom = 3 + + ".textInput" ? do + position relative + marginBottom (em 1) + paddingTop (px inputTop) + marginTop (px (-10)) + + input ? do + position relative + zIndex 1 + 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) + color Color.silver + transition "all" (sec 0.2) easeIn (sec 0) + + (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) |