server/src/Design/View/Payment/Header.hs


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

module Design.View.Payment.Header
  ( design
  ) where

import           Data.Monoid      ((<>))

import           Clay

import           Design.Constants

import qualified Design.Color     as Color
import qualified Design.Constants as Constants
import qualified Design.Helper    as Helper
import qualified Design.Media     as Media

design :: Css
design = do
  Media.desktop $ marginBottom (em 3)
  Media.mobileTablet $ marginBottom (em 2)
  marginLeft (pct blockPercentMargin)
  marginRight (pct blockPercentMargin)

  ".payerAndAdd" ? do
    Media.tabletDesktop $ display flex
    marginBottom (em 1)

    ".exceedingPayers" ? do
      backgroundColor Color.mossGreen
      borderRadius (px 5) (px 5) (px 5) (px 5)
      color Color.white
      lineHeight (px Constants.inputHeight)
      paddingLeft (px 10)
      paddingRight (px 10)

      Media.tabletDesktop $ do
        "flex-grow" -: "1"
        marginRight (px 15)

      Media.mobile $ do
        marginBottom (em 1)
        textAlign (alignSide sideCenter)

      ".exceedingPayer:not(:last-child)::after" ? content (stringContent ", ")

      ".userName" ? marginRight (px 8)

    ".addPayment" ? do
      Helper.button Color.chestnutRose Color.white (px Constants.inputHeight) Constants.focusLighten
      Media.mobile $ width (pct 100)

  ".searchLine" ? do
    marginBottom (em 1)
    form ? do
      Media.mobile $ textAlign (alignSide sideCenter)

      ".textInput" ? do
        display inlineBlock
        marginBottom (px 0)

        Media.tabletDesktop $ marginRight (px 30)
        Media.mobile $ do
          marginBottom (em 1)
          width (pct 100)

      ".radioGroup" ? do
        display inlineBlock
        marginBottom (px 0)
        ".title" ? display none

  ".infos" ? do
    Media.tabletDesktop $ lineHeight (px Constants.inputHeight)
    Media.mobile $ lineHeight (px 25)

    ".total" <> ".partition" ? do
      Media.mobileTablet $ display block
      Media.mobile $ do
        fontSize (pct 90)
        textAlign (alignSide sideCenter)

    ".partition" ? do
      color Color.dustyGray
      Media.desktop $ marginLeft (px 15)