blob: be0e74f27da6c62d0ef3cdcbb6e1cb127ccfa02f (
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
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
|
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)
|
