-
Notifications
You must be signed in to change notification settings - Fork 0
/
flex.styl
167 lines (139 loc) · 3.38 KB
/
flex.styl
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
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
@charset "UTF-8";
// handle param error
flexError(param, type)
position: relative
background-color: #ff3c00 !important
overflow: hidden
&::after
position: absolute
bottom: 0
right: 0
padding: .5em
color: #ff3c00 !important
background-color: white !important
font-size: 12px
content: "ErrorParam: {param} in {type}"
// flex-direction value is row
flex(justify = start, align = top)
display: flex
flex-direction: row
if justify == start
justify-content: flex-start
else if justify == center
justify-content: center
else if justify == end
justify-content: flex-end
else if justify == between
justify-content: space-between
else if justify == around
justify-content: space-around
else
flexError(justify, "flex")
if align == top
align-items: flex-start
else if align == middle
align-items: center
else if align == bottom
align-items: flex-end
else
flexError(align, "flex")
flex-wrap(align = top)
flex-wrap: wrap
if align == auto
align-content: initial
else if align == top
align-content: flex-start
else if align == middle
align-content: center
else if align == bottom
align-content: flex-end
else if align == between
align-content: space-between
else if align == around
align-content: space-around
else
flexError(align, "flex-wrap")
flex-self(flex = auto, align = auto)
if flex == auto
flex: initial
else if flex == full
flex: auto
else if flex == keep
flex: none
else
flexError(flex, "flex-self")
if align == auto
align-self: initial
else if align == top
align-self: flex-start
else if align == middle
align-self: center
else if align == bottom
align-self: flex-end
else if align == full
height: auto
align-self: stretch
else
flexError(align, "flex-self")
// flex-direction value is column
flex-column(align = start, justify = top)
display: flex
flex-direction: column
if align == start
align-items: flex-start
else if align == center
align-items: center
else if align == end
align-items: flex-end
else
flexError(align, "flex-column")
if justify == top
justify-content: flex-start
else if justify == middle
justify-content: center
else if justify == bottom
justify-content: flex-end
else if justify == between
justify-content: space-between
else if justify == around
justify-content: space-around
else
flexError(justify, "flex-column")
flex-column-wrap(align = start)
flex-wrap: wrap
if align == auto
align-content: initial
else if align == start
align-content: flex-start
else if align == center
align-content: center
else if align == end
align-content: flex-end
else if align == between
align-content: space-between
else if align == around
align-content: space-around
else
flexError(align, "flex-column-wrap")
flex-column-self(flex = auto, align = auto)
if flex == auto
flex: initial
else if flex == full
flex: auto
else if flex == keep
flex: none
else
flexError(flex, "flex-column-self")
if align == auto
align-self: initial
else if align == start
align-self: flex-start
else if align == center
align-self: center
else if align == end
align-self: flex-end
else if align == full
width: auto
align-self: stretch
else
flexError(align, "flex-column-self")