/
Divider.purs
64 lines (54 loc) · 1.46 KB
/
Divider.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.Divider where
import Prelude
import Color (cssStringHSLA)
import JSS (JSS, jss)
import Lumi.Components.Color (colors)
import React.Basic (Component, JSX, createComponent, element, makeStateless)
import React.Basic.DOM as R
type DividerProps =
{ style :: R.CSS
}
component :: Component DividerProps
component = createComponent "Divider"
divider :: DividerProps -> JSX
divider = makeStateless component $ R.hr <<< mapProps
where
mapProps props =
{ className: "lumi"
, style: props.style
}
divider_ :: JSX
divider_ = divider { style: R.css {} }
flexDivider :: DividerProps -> JSX
flexDivider { style } =
lumiFlexDividerElement
{ style
}
where
lumiFlexDividerElement = element (R.unsafeCreateDOMComponent "lumi-flex-divider")
flexDivider_ :: JSX
flexDivider_ = flexDivider { style: R.css {} }
styles :: JSS
styles = jss
{ "@global":
{ "hr.lumi":
{ height: "1px"
, alignSelf: "stretch"
, color: cssStringHSLA colors.black4
, background: cssStringHSLA colors.black4
, fontSize: "0"
, border: "0"
, flexShrink: "0"
, flexBasis: "1px"
}
, "lumi-flex-divider":
{ alignSelf: "stretch"
, color: cssStringHSLA colors.black4
, background: cssStringHSLA colors.black4
, fontSize: "0"
, border: "0"
, flexShrink: "0"
, flexBasis: "1px"
}
}
}