UNPKG

4.63 kBtext/stylusView Raw
1////////////////////
2//// Framework /////
3////////////////////
4body
5 margin: 0
6
7*
8 box-sizing: border-box
9
10////////////
11// resets //
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// flex //
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
91for 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//Row class good for image next to text
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// display //
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// positioning //
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// width, height //
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
212for 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
231for 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%; /* fg: 0, fs: 0, fb: 100% */
239
240for 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// margin, padding //
261/////////////////////
262.m-auto
263 margin: auto
264
265for i in 1..4
266 .m-{i}
267 margin: i * 1px
268
269for 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