blob: ba4ccb721f1b9ee26777619227ea8ff90e4217f9 (
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
|
module Design.Global
( globalDesign
) where
import Clay
import Data.Text.Lazy (Text)
import qualified Design.Color as Color
import qualified Design.Constants as Constants
import qualified Design.Errors as Errors
import qualified Design.Form as Form
import qualified Design.Helper as Helper
import qualified Design.Media as Media
import qualified Design.Modal as Modal
import qualified Design.Tooltip as Tooltip
import qualified Design.Views as Views
globalDesign :: Text
globalDesign = renderWith compact [] global
global :: Css
global = do
".errors" ? Errors.design
".modal" ? Modal.design
".tooltip" ? Tooltip.design
Views.design
Form.design
body ? do
minWidth (px 320)
fontFamily ["Cantarell"] [sansSerif]
".modal" &
overflowY hidden
Media.tablet $ do
fontSize (px 15)
button ? fontSize (px 15)
input ? fontSize (px 15)
Media.mobile $ do
fontSize (px 14)
button ? fontSize (px 14)
input ? fontSize (px 14)
a ? cursor pointer
input ? fontSize inherit
h1 ? do
color Color.chestnutRose
marginBottom (em 1)
lineHeight (em 1.2)
Media.desktop $ fontSize (px 24)
Media.tablet $ fontSize (px 22)
Media.mobile $ fontSize (px 20)
ul ? do
"margin-bottom" -: "3vh"
"margin-left" -: "1vh"
li <? do
"margin-bottom" -: "2vh"
before & do
content (stringContent "• ")
color Color.chestnutRose
"margin-right" -: "0.3vw"
ul <? do
"margin-left" -: "3vh"
"margin-top" -: "2vh"
".dialog" ? ".content" ? button ? do
".confirm" & Helper.button Color.chestnutRose Color.white (px Constants.inputHeight) Constants.focusLighten
".undo" & Helper.button Color.silver Color.white (px Constants.inputHeight) Constants.focusLighten
svg ? height (pct 100)
button ? do
position relative
".content" ? do
display flex
svg # ".loader" ? do
opacity 0
position absolute
".waiting" & do
".content" ? do
opacity 0
svg # ".loader" ? do
opacity 1
rotateKeyframes
rotateAnimation
select ? cursor pointer
rotateAnimation :: Css
rotateAnimation = do
animationName "rotate"
animationDuration (sec 1)
animationTimingFunction easeOut
animationIterationCount infinite
rotateKeyframes :: Css
rotateKeyframes = keyframes
"rotate"
[ (0, "transform" -: "rotate(0deg)")
, (100, "transform" -: "rotate(360deg)")
]
|