aboutsummaryrefslogtreecommitdiff
path: root/server/src/Design/View/Payment/HeaderForm.hs
blob: 60814435200fef7bc67f92b77dfdd363c76c66ba (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
module Design.View.Payment.HeaderForm
  ( design
  ) where

import           Clay

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

  ".g-PaymentHeaderForm" ? do
    marginBottom (em 2)
    marginLeft (pct Constants.blockPercentMargin)
    marginRight (pct Constants.blockPercentMargin)
    display flex
    justifyContent spaceBetween
    alignItems center
    Media.mobile $ flexDirection column

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

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

    ".selectInput" ? do
      Media.tabletDesktop $ display inlineBlock
      Media.mobile $ marginBottom (em 2)

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