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
|
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)
, 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)
|
