blob: 7613ba3c0c92d2e22762a6ecace788497d8ae677 (
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 C
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 C.darkGrey
color C.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 C.grey
hover & do
input ? borderColor C.grey
label ? backgroundColor C.grey
".name" ? minWidth (px 150)
button # ".frequency" ? do
fontSize (pct 90)
marginRight (pct blockPercentMargin)
(".punctual" <> ".monthly") ? do
defaultButton C.lightGrey C.darkGrey (px $ inputHeight `Prelude.div` 2) focusLighten
paddingLeft (px 15)
paddingRight (px 15)
".selected" & do
backgroundColor C.blue
color C.white
hover & (".punctual" <> ".monthly") ?
".selected" & backgroundColor (focusLighten C.blue)
focus & (".punctual" <> ".monthly") ?
".selected" & backgroundColor (focusLighten C.blue)
".punctual" ? borderRadius radius radius 0 0
".monthly" ? borderRadius 0 0 radius radius
button # ".add" ? do
defaultButton C.red C.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 C.redError
label ? backgroundColor C.redError
"input:focus + label" ? backgroundColor C.redError
".errorMessage" ? do
position absolute
color C.redError
top (px (inputHeight + 10))
left (px 0)
|
