aboutsummaryrefslogtreecommitdiff
path: root/src/server/Design/Form.hs
blob: 612759bba926c518f3b8f77eb59009d5c7f3141b (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
{-# LANGUAGE OverloadedStrings #-}

module Design.Form
  ( design
  ) where

import Data.Monoid ((<>))

import Clay

import Design.Color as Color

design :: Css
design = do

  let inputHeight = 30
  let inputTop = 22
  let inputPaddingBottom = 3
  let inputZIndex = 1

  ".textInput" ? do
    position relative
    marginBottom (em 1.5)
    paddingTop (px inputTop)
    marginTop (px (-10))

    input ? do
      position relative
      zIndex inputZIndex
      backgroundColor transparent
      paddingBottom (px inputPaddingBottom)
      borderStyle none
      borderBottom solid (px 1) Color.dustyGray
      marginBottom (px 5)
      height (px inputHeight)
      lineHeight (px inputHeight)
      focus & do
        borderWidth (px 2)
        paddingBottom (px $ inputPaddingBottom - 1)

    label ? do
      lineHeight (px inputHeight)
      position absolute
      top (px inputTop)
      left (px 0)
      color Color.silver
      transition "all" (sec 0.2) easeIn (sec 0)

    button ? do
      position absolute
      right (px 0)
      top (px 27)
      zIndex inputZIndex

    (input # ".filled" |+ label) <> (input # focus |+ label) ? do
      top (px 0)
      fontSize (pct 80)

    ".error" & do
      input ? do
        borderBottomColor Color.chestnutRose

      ".errorMessage" ? do
        position absolute
        color Color.chestnutRose
        fontSize (pct 80)

  ".radioGroup" ? do
    position relative
    marginBottom (em 2)

    ".title" ? do
      color Color.silver
      marginBottom (em 0.8)

    ".radioInputs" ? do
      display flex
      "justify-content" -: "center"

      ".radioInput:not(:last-child)::after" ? do
        content (stringContent "/")
        marginLeft (px 10)
        marginRight (px 10)

      input ? do
        opacity 0
        width (px 30)
        margin (px 0) (px (-15)) (px 0) (px (-15))

      label ? cursor pointer

      "input:focus + label" ? do
        textDecoration underline

      "input:checked + label" ? do
        color Color.chestnutRose
        fontWeight bold