/
Border.purs
91 lines (83 loc) · 2.02 KB
/
Border.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
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
module Lumi.Styles.Border where
import Prelude
import Lumi.Components.Spacing (Space(..))
import Lumi.Styles (StyleModifier, style, style_)
import Lumi.Styles.Box (box)
import Lumi.Styles.Box as Box
import Lumi.Styles.Theme (LumiTheme(..))
import React.Basic.Emotion (color, css, int, nested, none, prop, str)
border :: StyleModifier
border =
box
<<< style \(LumiTheme theme) ->
css
{ label: str "border"
, borderWidth: int 1
, borderColor: color theme.colors.black4
, borderStyle: str "solid"
, padding: str "8px 16px"
}
_round :: StyleModifier
_round =
style_
$ css
{ borderRadius: int 4
}
_topBottom :: StyleModifier
_topBottom =
style_
( css
{ borderLeft: none
, borderRight: none
, borderRadius: int 0
, paddingLeft: int 0
, paddingRight: int 0
}
)
_interactive :: StyleModifier
_interactive =
Box._interactive
<<< Box._focusable
<<< style \(LumiTheme theme) ->
css
{ "&:hover":
nested
$ css
{ borderColor: color theme.colors.black2
}
}
_listSpaced :: StyleModifier
_listSpaced =
style \(LumiTheme theme) ->
css
{ "&:not(:first-child)":
nested
$ css
{ marginTop: prop S8
}
}
_listCompact :: StyleModifier
_listCompact =
style \(LumiTheme theme) ->
css
{ "&:first-child":
nested
$ css
{ borderTopColor: color theme.colors.transparent
}
, "&:last-child":
nested
$ css
{ borderBottomColor: color theme.colors.transparent
}
, "&:not(:first-child)":
nested
$ css
{ marginTop: int (-1)
, ":not(:hover)":
nested
$ css
{ borderTopColor: color theme.colors.transparent
}
}
}