/
Layouts.purs
64 lines (56 loc) · 1.67 KB
/
Layouts.purs
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
module Lumi.Components.Layouts where
import Color (cssStringHSLA)
import JSS (JSS, jss)
import Lumi.Components.Color (colors)
styles :: JSS
styles = jss
{ "@global":
{ "lumi-layout":
{ boxSizing: "border-box"
, flex: "1"
, display: "flex"
, flexFlow: "column"
, alignSelf: "stretch"
, "& > lumi-layout-view-head":
{ boxSizing: "border-box"
, flex: "none"
, display: "flex"
, flexDirection: "row"
, padding: "12px 24px"
, backgroundColor: cssStringHSLA colors.black6
, borderBottom: [ "1px", "solid", cssStringHSLA colors.black4 ]
}
, "& > lumi-layout-view-body":
{ boxSizing: "border-box"
, overflowY: "auto"
, display: "flex"
, flexFlow: "column"
}
}
, "lumi-layout-centered":
{ display: "block"
, width: "850px"
, maxWidth: "90%"
, margin: "5vh auto"
}
, "lumi-layout-centered-full-width":
{ display: "block"
, width: "90%"
, maxWidth: "90%"
, margin: "5vh auto"
}
, "lumi-layout > lumi-layout-view-body, lumi-layout-centered, .lumi-layout-content":
{ "& lumi-section-header":
{ paddingTop: "32px"
, paddingBottom: "12px"
}
}
, "lumi-layout-view-body, lumi-layout-centered":
{ flex: "1"
, "& lumi-section-header":
{ paddingTop: "32px"
, paddingBottom: "12px"
}
}
}
}