blob: ab58b0c839404843f87fc1ec3b5038701d32e82a (
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
|
{-# LANGUAGE OverloadedStrings #-}
module Header
( style
) where
import Data.Monoid ((<>))
import Clay hiding (style)
import Clay.Display (displayTable)
import qualified Color as Color
import qualified Media as Media
style :: Css
style = do
".Header__Container" ? do
backgroundColor Color.red
color Color.white
fontSize (px 28)
display flex
".Header__Link" ? do
display flex
justifyContent center
alignItems center
flexGrow 1
flexBasis (px 0)
height (em 3)
lineHeight (em 3)
textDecoration none
padding (px 0) (px 0) (px 0) (px 0)
textAlign (alignSide sideCenter)
color Color.white
textTransform capitalize
transition "background-color" (ms 500) ease (sec 0)
Media.tablet $ fontSize (em 0.8)
Media.mobile $ fontSize (em 0.6)
(".Header__Link" # hover <> ".Header__Link" # focus <> ".Header__LinkCurrent") ? do
backgroundColor Color.red
borderBottomStyle solid
borderBottomColor (Color.red +. 40)
Media.mobile $ borderBottomWidth (px 6)
Media.tablet $ borderBottomWidth (px 8)
Media.desktop $ borderBottomWidth (px 10)
".Header__Icon" ? do
display flex
height (px 40)
marginRight (px 20)
Media.mobile $ display none
|
