blob: 2ad0455f67756a7254e406d9748784ad1d0b39da (
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
|
module Design.View.Header
( design
) where
import Data.Monoid ((<>))
import Clay
import Design.Color as Color
import qualified Design.Media as Media
desktopLineHeight :: Double
desktopLineHeight = 80
tabletLineHeight :: Double
tabletLineHeight = 60
mobileLineHeight :: Double
mobileLineHeight = 40
design :: Css
design = do
display flex
"flex-wrap" -: "wrap"
position relative
backgroundColor Color.chestnutRose
color Color.white
Media.desktop $ do
minHeight (px desktopLineHeight)
lineHeight (px desktopLineHeight)
marginBottom (em 3)
Media.tablet $ do
minHeight (px (tabletLineHeight * 2))
lineHeight (px tabletLineHeight)
marginBottom (em 2)
Media.mobile $ do
minHeight (px (mobileLineHeight * 2))
lineHeight (px mobileLineHeight)
marginBottom (em 1.5)
".title" <> ".item" ? do
Media.tabletDesktop $ sym2 padding (px 0) (px 20)
Media.mobile $ sym2 padding (px 0) (px 10)
".title" ? do
textAlign (alignSide sideLeft)
Media.desktop $ do
fontSize (px 35)
display inlineBlock
Media.tablet $ do
fontSize (px 28)
display inlineBlock
width (pct 100)
Media.mobile $ do
fontSize (px 22)
width (pct 100)
".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
position absolute
top (px 0)
right (px 0)
Media.desktop $ height (px desktopLineHeight)
Media.tablet $ height (px tabletLineHeight)
Media.mobile $ height (px mobileLineHeight)
".name" ? do
Media.mobile $ display none
Media.tabletDesktop $ sym2 padding (px 0) (px 20)
".signOut" ? do
display flex
justifyContent center
alignItems center
svg ? do
Media.tabletDesktop $ width (px 30)
Media.mobile $ width (px 20)
"path" ? ("fill" -: "white")
|
