blob: bb7d7db512e8257a4c85433571ee0a36fa48f8c1 (
plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
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)
|
