blob: 1a8b499430ba1d09525494b07a8bcf0126e48f06 (
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
|
{-# LANGUAGE OverloadedStrings #-}
module Design.LoggedIn.Home.Add
( design
) where
import Data.Monoid ((<>))
import Clay
import Design.Color as Color
import Design.Helper
import Design.Constants
design :: Css
design = do
centeredWithMargin
marginBottom blockMarginBottom
display flex
"justify-content" -: "center"
".name" <> ".cost" ? do
position relative
display flex
marginRight (pct blockPercentMargin)
label ? do
fontWeight bold
display inlineBlock
width (px 50)
textAlign (alignSide sideCenter)
backgroundColor Color.mountainMist
color Color.white
height (px inputHeight)
lineHeight (px inputHeight)
fontSize (px 22)
verticalAlign middle
cursor cursorText
borderRadius (px 0) radius radius (px 0)
input ? do
defaultInput inputHeight
borderRadius radius (px 0) (px 0) radius
"width" -: "calc(100% - 40px)"
"input:focus + label" ? backgroundColor Color.pumice
hover & do
input ? borderColor Color.pumice
label ? backgroundColor Color.pumice
".name" ? minWidth (px 150)
button # ".frequency" ? do
fontSize (pct 90)
marginRight (pct blockPercentMargin)
(".punctual" <> ".monthly") ? do
defaultButton Color.mercury Color.mountainMist (px $ inputHeight `Prelude.div` 2) focusLighten
paddingLeft (px 15)
paddingRight (px 15)
".selected" & do
backgroundColor Color.blue
color Color.white
hover & (".punctual" <> ".monthly") ?
".selected" & backgroundColor (focusLighten Color.blue)
focus & (".punctual" <> ".monthly") ?
".selected" & backgroundColor (focusLighten Color.blue)
".punctual" ? borderRadius radius radius 0 0
".monthly" ? borderRadius 0 0 radius radius
button # ".add" ? do
defaultButton Color.red Color.white (px inputHeight) focusLighten
paddingLeft (px 15)
paddingRight (px 15)
i ? marginLeft (px 10)
".waitingServer" & ("cursor" -: "not-allowed")
".name.error" <> ".cost.error" ? do
input ? borderColor Color.redError
label ? backgroundColor Color.redError
"input:focus + label" ? backgroundColor Color.redError
".errorMessage" ? do
position absolute
color Color.redError
top (px (inputHeight + 10))
left (px 0)
|
