aboutsummaryrefslogtreecommitdiff
path: root/frontend/src/Styles.elm
blob: fbef6e13b4958bced1f50425ea64f5ca6bd0c223 (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
module Styles exposing (..)

import Css exposing (..)
import Html
import Html.Styled exposing (..)
import Html.Styled.Attributes exposing (..)
import Html.Styled.Events exposing (..)


type alias Theme =
    { primary : Color
    , secondary : Color
    , bad : Color
    , fg : Color
    , bg : Color
    , fgLight : Color
    , bgLight : Color
    }


theme : Theme
theme =
    Theme
        (hex "fedbd0")
        -- primary
        (hex "feeae6")
        -- secondary
        (hex "ff0000")
        -- bad
        (hex "442c2e")
        -- fg
        (hex "ffffff")
        -- bg
        (hex "442c2e")
        -- fgLight
        (hex "feeae6")



-- bgLight


headerLink : List (Attribute msg) -> List (Html msg) -> Html msg
headerLink =
    styled a
        [ color theme.fgLight
        , padding (px 12)
        , textDecoration Css.none
        , hover
            [ backgroundColor theme.secondary
            , textDecoration underline
            ]
        ]


furbyButton : List (Attribute msg) -> List (Html msg) -> Html msg
furbyButton =
    styled button
        [ margin (px 12)
        , color theme.fg
        , Css.height (px 40)
        , border (px 0)
        , borderRadius (px 2)
        , padding2 (px 6) (px 12)
        , backgroundColor theme.primary
        , hover
            [ backgroundColor theme.secondary
            , color theme.fg
            , margin (px 12)
            ]
        ]


furbySelect : List (Attribute msg) -> List (Html msg) -> Html msg
furbySelect =
    styled select
        [ margin (px 6)
        , color theme.fg
        , border (px 0)
        , borderBottom3 (px 2) solid theme.bgLight
        , textAlign right
        , padding2 (px 3) (px 3)
        , backgroundColor theme.bg
        , hover
            [ borderBottom3 (px 2) solid theme.fg
            ]
        ]


loginInputField : List (Attribute msg) -> List (Html msg) -> Html msg
loginInputField =
    styled input
        [ Css.width (pct 100)
        , color theme.fg
        , border (px 0)
        , borderBottom3 (px 1) solid theme.bgLight
        , focus
            [ borderBottom3 (px 2) solid theme.fg
            ]
        ]


bigHeading : Style
bigHeading =
    fontSize (px 24)



-- card styles


cardPrimaryText =
    fontSize (px 18)


cardSecondaryText =
    Css.batch [ color theme.fgLight, fontSize (px 12) ]


cardSupportingText =
    fontSize (px 16)


money =
    before [ Css.property "content" "\"\"" ]