blob: ce6407728f04bccb39b67eb9d148ee18dc6ed62e (
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
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.dustyGray
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.silver
hover & do
input ? borderColor Color.silver
label ? backgroundColor Color.silver
".name" ? minWidth (px 150)
button # ".frequency" ? do
fontSize (pct 90)
marginRight (pct blockPercentMargin)
(".punctual" <> ".monthly") ? do
defaultButton Color.wildSand Color.dustyGray (px $ inputHeight `Prelude.div` 2) focusLighten
paddingLeft (px 15)
paddingRight (px 15)
".selected" & do
backgroundColor Color.gothic
color Color.white
hover & (".punctual" <> ".monthly") ?
".selected" & backgroundColor (focusLighten Color.gothic)
focus & (".punctual" <> ".monthly") ?
".selected" & backgroundColor (focusLighten Color.gothic)
".punctual" ? borderRadius radius radius 0 0
".monthly" ? borderRadius 0 0 radius radius
button # ".add" ? do
defaultButton Color.chestnutRose 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.chestnutRose
label ? backgroundColor Color.chestnutRose
"input:focus + label" ? backgroundColor Color.chestnutRose
".errorMessage" ? do
position absolute
color Color.chestnutRose
top (px (inputHeight + 10))
left (px 0)
|
