1 |
|
2 |
|
3 |
|
4 | body
|
5 | margin: 0
|
6 |
|
7 | *
|
8 | box-sizing: border-box
|
9 |
|
10 |
|
11 |
|
12 |
|
13 | .reset
|
14 | margin: 0
|
15 | text-decoration: none
|
16 | color: inherit
|
17 | border: 0
|
18 | background-color: inherit
|
19 | font-weight: inherit
|
20 |
|
21 | .user-select-none
|
22 | -webkit-user-select: none
|
23 | user-select: none
|
24 |
|
25 |
|
26 |
|
27 |
|
28 | .fl
|
29 | display: flex
|
30 |
|
31 | .fl-row
|
32 | .fl-column
|
33 | display: flex
|
34 |
|
35 | .fl-row
|
36 | flex-direction: row
|
37 |
|
38 | .fl-row-reverse
|
39 | flex-direction: row-reverse
|
40 |
|
41 | .fl-column
|
42 | flex-direction: column
|
43 |
|
44 | .fl-column-reverse
|
45 | flex-direction: column-reverse
|
46 |
|
47 | .fl-wrap
|
48 | flex-wrap: wrap
|
49 |
|
50 | .fl-center-x
|
51 | justify-content: center
|
52 |
|
53 | .fl.fl-center-x
|
54 | .fl-row.fl-center-x
|
55 | .fl-column.fl-center-y
|
56 | justify-content: center
|
57 |
|
58 | .fl-center-y
|
59 | align-items: center
|
60 |
|
61 | .fl.fl-center-y
|
62 | .fl-row.fl-center-y
|
63 | .fl-column.fl-center-x
|
64 | align-items: center
|
65 |
|
66 | .fl-center
|
67 | display: flex
|
68 | justify-content: center
|
69 | align-items: center
|
70 | align-content: center
|
71 |
|
72 | .fl-row
|
73 | .fl-column
|
74 | &.fl-fill
|
75 | align-items: stretch
|
76 | & > *
|
77 | flex: 1
|
78 |
|
79 | .fl-row
|
80 | &.fl-fill-x > *
|
81 | flex: 1
|
82 | &.fl-fill-y
|
83 | align-items: stretch
|
84 |
|
85 | .fl-column
|
86 | &.fl-fill-x
|
87 | align-items: stretch
|
88 | &.fl-fill-y > *
|
89 | flex: 1
|
90 |
|
91 | for i in 0..10
|
92 | .fl-{i}
|
93 | flex: i
|
94 |
|
95 | .fl-justify-start
|
96 | justify-content: flex-start
|
97 | .fl-justify-end
|
98 | justify-content: flex-end
|
99 | .fl-justify-center
|
100 | justify-content: center
|
101 | .fl-justify-between
|
102 | justify-content: space-between
|
103 | .fl-justify-around
|
104 | justify-content: space-around
|
105 | .fl-justify-evenly
|
106 | justify-content: space-evenly
|
107 |
|
108 | .fl-items-start
|
109 | align-items: flex-start
|
110 | .fl-items-end
|
111 | align-items: flex-end
|
112 | .fl-items-center
|
113 | align-items: center
|
114 | .fl-items-stretch
|
115 | align-items: stretch
|
116 | .fl-items-baseline
|
117 | align-items: baseline
|
118 |
|
119 | .fl-content-start
|
120 | align-content: flex-start
|
121 | .fl-content-end
|
122 | align-content: flex-end
|
123 | .fl-content-center
|
124 | align-content: center
|
125 | .fl-content-stretch
|
126 | align-content: stretch
|
127 | .fl-content-around
|
128 | align-content: space-around
|
129 | .fl-content-between
|
130 | align-content: space-between
|
131 |
|
132 |
|
133 | .row
|
134 | display: flex
|
135 | flex: row wrap
|
136 | align-items: flex-start
|
137 | > *
|
138 | margin: 0px 5px
|
139 | > *:first-child
|
140 | margin-left: 0px
|
141 | margin-right: 5px
|
142 | > *:last-child
|
143 | margin-right: 0px
|
144 | margin-left: 5px
|
145 |
|
146 | .row-even > *
|
147 | flex: 1
|
148 |
|
149 |
|
150 |
|
151 |
|
152 | .disp-none
|
153 | display: none
|
154 |
|
155 | .disp-inline-block
|
156 | display: inline-block
|
157 |
|
158 | .disp-block
|
159 | display: block
|
160 |
|
161 |
|
162 |
|
163 |
|
164 | .absolute
|
165 | position: absolute
|
166 |
|
167 | .relative
|
168 | position: relative
|
169 |
|
170 | .fixed
|
171 | position: fixed
|
172 |
|
173 | .top
|
174 | top: 0
|
175 |
|
176 | .bottom
|
177 | bottom: 0
|
178 |
|
179 | .left
|
180 | left: 0
|
181 |
|
182 | .right
|
183 | right: 0
|
184 |
|
185 |
|
186 |
|
187 |
|
188 | .w-full
|
189 | width: 100%
|
190 |
|
191 | .w-full-at-1000
|
192 | width: 100%
|
193 |
|
194 | .w-half
|
195 | width: 50%
|
196 |
|
197 | .w-quarter
|
198 | width: 25%
|
199 |
|
200 | .w-third
|
201 | width: 33.3%
|
202 |
|
203 | .h-full
|
204 | height: 100%
|
205 |
|
206 | .h-half
|
207 | height: 50%
|
208 |
|
209 | .h-quarter
|
210 | height: 25%
|
211 |
|
212 | for i in 1..280
|
213 | .w-{i * 5}
|
214 | width: i * 5px
|
215 |
|
216 | .w-max-{i * 5}
|
217 | max-width: i * 5px
|
218 |
|
219 | .w-min-{i * 5}
|
220 | min-width: i * 5px
|
221 |
|
222 | .h-{i * 5}
|
223 | height: i * 5px
|
224 |
|
225 | .h-min-{i * 5}
|
226 | min-height: i * 5px
|
227 |
|
228 | .h-max-{i * 5}
|
229 | max-height: i * 5px
|
230 |
|
231 | for i in 100..250
|
232 | .full-if-lt-{i * 5}
|
233 | @media(max-width: i * 5px)
|
234 | width: 100%
|
235 |
|
236 | .fl-full-if-lt-{i * 5}
|
237 | @media(max-width: i * 5px)
|
238 | flex: 0 0 100%;
|
239 |
|
240 | for i in 10..140
|
241 | @media(max-width: i * 10px)
|
242 | .hide-lt-{i * 10}
|
243 | display: none
|
244 |
|
245 | .show-lt-{i * 10}
|
246 | display: initial
|
247 |
|
248 | .center-lt-{i * 10}
|
249 | text-align: center
|
250 | margin: auto
|
251 |
|
252 | @media(min-width: i * 10px)
|
253 | .hide-gt-{i * 10}
|
254 | display: none
|
255 |
|
256 | .show-gt-{i * 10}
|
257 | display: initial
|
258 |
|
259 |
|
260 |
|
261 |
|
262 | .m-auto
|
263 | margin: auto
|
264 |
|
265 | for i in 1..4
|
266 | .m-{i}
|
267 | margin: i * 1px
|
268 |
|
269 | for i in 0..40
|
270 | .m-{i * 5}
|
271 | margin: i * 5px
|
272 |
|
273 | .m-v-{i * 5}
|
274 | margin-top: i * 5px
|
275 | margin-bottom: i * 5px
|
276 |
|
277 | .m-h-{i * 5}
|
278 | margin-left: i * 5px
|
279 | margin-right: i * 5px
|
280 |
|
281 | .m-l-{i * 5}
|
282 | margin-left: i * 5px
|
283 |
|
284 | .m-r-{i * 5}
|
285 | margin-right: i * 5px
|
286 |
|
287 | .m-t-{i * 5}
|
288 | margin-top: i * 5px
|
289 |
|
290 | .m-b-{i * 5}
|
291 | margin-bottom: i * 5px
|
292 |
|
293 | .p-{i * 5}
|
294 | padding: i * 5px
|
295 |
|
296 | .p-v-{i * 5}
|
297 | padding-top: i * 5px
|
298 | padding-bottom: i * 5px
|
299 |
|
300 | .p-h-{i * 5}
|
301 | padding-left: i * 5px
|
302 | padding-right: i * 5px
|
303 |
|
304 | .p-t-{i * 5}
|
305 | padding-top: i * 5px
|
306 |
|
307 | .p-b-{i * 5}
|
308 | padding-bottom: i * 5px
|
309 |
|
310 | .p-l-{i * 5}
|
311 | padding-left: i * 5px
|
312 |
|
313 | .p-r-{i * 5}
|
314 | padding-right: i * 5px
|