blob: 609d8fcf02d98cd3f3f06b8a5570efb18fb593ec (
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
|
module Design.View.Header
( design
) where
import Data.Monoid ((<>))
import Clay
import Design.Color as Color
import qualified Design.Media as Media
design :: Css
design = do
let headerPadding = "padding" -: "0 20px"
display flex
"flex-wrap" -: "wrap"
lineHeightMedia
position relative
backgroundColor Color.chestnutRose
color Color.white
Media.desktop $ marginBottom (em 3)
Media.mobileTablet $ marginBottom (em 2)
Media.mobile $ marginBottom (em 1.5)
".title" <> ".item" ? headerPadding
".title" ? do
textAlign (alignSide sideLeft)
Media.mobile $ fontSize (px 22)
Media.mobileTablet $ width (pct 100)
Media.tabletDesktop $ do
display inlineBlock
fontSize (px 35)
".item" ? do
display inlineBlock
transition "background-color" (ms 50) easeIn (sec 0)
".current" & backgroundColor (Color.chestnutRose -. 20)
Media.mobile $ fontSize (px 13)
(".item" # hover) <> (".item" # focus) ?
backgroundColor (Color.chestnutRose +. 10)
(".item.current" # hover) <> (".item.current" # focus) ?
backgroundColor (Color.chestnutRose -. 10)
".nameSignOut" ? do
display flex
heightMedia
position absolute
top (px 0)
right (px 0)
".name" ? do
Media.mobile $ display none
Media.tabletDesktop $ headerPadding
".signOut" ? do
display flex
justifyContent center
alignItems center
svg ? do
Media.tabletDesktop $ width (px 30)
Media.mobile $ width (px 20)
"path" ? ("fill" -: "white")
lineHeightMedia :: Css
lineHeightMedia = do
Media.desktop $ lineHeight (px 80)
Media.tablet $ lineHeight (px 65)
Media.mobile $ lineHeight (px 50)
heightMedia :: Css
heightMedia = do
Media.desktop $ height (px 80)
Media.tablet $ height (px 65)
Media.mobile $ height (px 50)
|
