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
126
127
128
129
130
131
132
133
134
135
136
137
138
139
|
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)
]
]
furbyRadio : String -> msg -> Html msg
furbyRadio value msg =
label
[]
[ input
[ type_ "radio"
, onClick msg
, name "radio"
]
[]
, text value
]
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" "\"₹ \"" ]
|
