aboutsummaryrefslogtreecommitdiff
path: root/server/src/Design/Global.hs
blob: 24d999f9c434dab2cd85dd3ddcfb75fe252fdd8d (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
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
module Design.Global
  ( globalDesign
  ) where

import           Clay
import           Clay.Color       as C
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.design
  ".tooltip" ? Tooltip.design
  Views.design
  Form.design

  spinKeyframes
  appearKeyframe

  html ? do
    height (pct 100)

  "g-Body--Modal" ?
    overflowY hidden

  body ? do
    position relative
    minWidth (px 320)
    height (pct 100)
    fontFamily ["Cantarell"] [sansSerif]
    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)

  ".app" ? do
    appearAnimation

  ".spinner" ? do
    display flex
    alignItems center
    justifyContent center
    width (pct 100)
    height (pct 100)
    paddingBottom (pct 10)

    before & do
      display block
      content (stringContent "")
      width (px 50)
      height (px 50)
      border solid (px 3) (C.setA 0.3 Color.chestnutRose)
      sym borderRadius (pct 50)
      borderTopColor Color.chestnutRose
      spinKeyframes
      spinAnimation

  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
        spinAnimation

  select ? cursor pointer

spinAnimation :: Css
spinAnimation = do
  animationName "rotate"
  animationDuration (sec 1)
  animationTimingFunction easeInOut
  animationIterationCount infinite

spinKeyframes :: Css
spinKeyframes = keyframes
  "rotate"
  [ (100, "transform" -: "rotate(360deg)")
  ]

appearAnimation :: Css
appearAnimation = do
  animationName "appear"
  animationDuration (sec 0.2)
  animationTimingFunction easeIn

appearKeyframe :: Css
appearKeyframe = keyframes
  "appear"
  [ (0, "opacity" -: "0")
  ]