blob: ebb8ac89c33e8667a9c5186e4fd663717b3bf14a (
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
129
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)
|
