blob: 579cead7a6a583d12d077a65bb1b0b496c7163b5 (
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
|
{-# LANGUAGE OverloadedStrings #-}
module Design.LoggedIn.Add
( addDesign
) where
import Data.Monoid ((<>))
import Clay
import Design.Color as C
import Design.Helper
import Design.Constants
addDesign :: Css
addDesign =
form # ".addPayment" ? 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
".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)
paddingLeft (px 15)
paddingRight (px 15)
".selected" & do
backgroundColor C.blue
color C.white
".punctual" ? borderRadius radius radius 0 0
".monthly" ? borderRadius 0 0 radius radius
button # ".add" ? do
defaultButton C.red C.white (px inputHeight)
paddingLeft (px 15)
paddingRight (px 15)
".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)
|
