UNPKG

31.3 kBCSSView Raw
1/* Variables */
2
3:root {
4}
5
6/*
7 SPACING
8 Docs: http://tachyons.io/docs/layout/spacing/
9
10 An eight step powers of two scale ranging from 0 to 16rem.
11
12 Base:
13 p = padding
14 m = margin
15
16 Modifiers:
17 a = all
18 h = horizontal
19 v = vertical
20 t = top
21 r = right
22 b = bottom
23 l = left
24
25 0 = none
26 1 = 1st step in spacing scale
27 2 = 2nd step in spacing scale
28 3 = 3rd step in spacing scale
29 4 = 4th step in spacing scale
30 5 = 5th step in spacing scale
31 6 = 6th step in spacing scale
32 7 = 7th step in spacing scale
33
34 Media Query Extensions:
35 -ns = not-small
36 -m = medium
37 -l = large
38
39*/
40
41
42.pa0 { padding: var(--spacing-none); }
43.pa1 { padding: var(--spacing-extra-small); }
44.pa2 { padding: var(--spacing-small); }
45.pa3 { padding: var(--spacing-medium); }
46.pa4 { padding: var(--spacing-large); }
47.pa5 { padding: var(--spacing-extra-large); }
48.pa6 { padding: var(--spacing-extra-extra-large); }
49.pa7 { padding: var(--spacing-extra-extra-extra-large); }
50
51.pl0 { padding-left: var(--spacing-none); }
52.pl1 { padding-left: var(--spacing-extra-small); }
53.pl2 { padding-left: var(--spacing-small); }
54.pl3 { padding-left: var(--spacing-medium); }
55.pl4 { padding-left: var(--spacing-large); }
56.pl5 { padding-left: var(--spacing-extra-large); }
57.pl6 { padding-left: var(--spacing-extra-extra-large); }
58.pl7 { padding-left: var(--spacing-extra-extra-extra-large); }
59
60.pr0 { padding-right: var(--spacing-none); }
61.pr1 { padding-right: var(--spacing-extra-small); }
62.pr2 { padding-right: var(--spacing-small); }
63.pr3 { padding-right: var(--spacing-medium); }
64.pr4 { padding-right: var(--spacing-large); }
65.pr5 { padding-right: var(--spacing-extra-large); }
66.pr6 { padding-right: var(--spacing-extra-extra-large); }
67.pr7 { padding-right: var(--spacing-extra-extra-extra-large); }
68
69.pb0 { padding-bottom: var(--spacing-none); }
70.pb1 { padding-bottom: var(--spacing-extra-small); }
71.pb2 { padding-bottom: var(--spacing-small); }
72.pb3 { padding-bottom: var(--spacing-medium); }
73.pb4 { padding-bottom: var(--spacing-large); }
74.pb5 { padding-bottom: var(--spacing-extra-large); }
75.pb6 { padding-bottom: var(--spacing-extra-extra-large); }
76.pb7 { padding-bottom: var(--spacing-extra-extra-extra-large); }
77
78.pt0 { padding-top: var(--spacing-none); }
79.pt1 { padding-top: var(--spacing-extra-small); }
80.pt2 { padding-top: var(--spacing-small); }
81.pt3 { padding-top: var(--spacing-medium); }
82.pt4 { padding-top: var(--spacing-large); }
83.pt5 { padding-top: var(--spacing-extra-large); }
84.pt6 { padding-top: var(--spacing-extra-extra-large); }
85.pt7 { padding-top: var(--spacing-extra-extra-extra-large); }
86
87.pv0 {
88 padding-top: var(--spacing-none);
89 padding-bottom: var(--spacing-none);
90}
91.pv1 {
92 padding-top: var(--spacing-extra-small);
93 padding-bottom: var(--spacing-extra-small);
94}
95.pv2 {
96 padding-top: var(--spacing-small);
97 padding-bottom: var(--spacing-small);
98}
99.pv3 {
100 padding-top: var(--spacing-medium);
101 padding-bottom: var(--spacing-medium);
102}
103.pv4 {
104 padding-top: var(--spacing-large);
105 padding-bottom: var(--spacing-large);
106}
107.pv5 {
108 padding-top: var(--spacing-extra-large);
109 padding-bottom: var(--spacing-extra-large);
110}
111.pv6 {
112 padding-top: var(--spacing-extra-extra-large);
113 padding-bottom: var(--spacing-extra-extra-large);
114}
115
116.pv7 {
117 padding-top: var(--spacing-extra-extra-extra-large);
118 padding-bottom: var(--spacing-extra-extra-extra-large);
119}
120
121.ph0 {
122 padding-left: var(--spacing-none);
123 padding-right: var(--spacing-none);
124}
125
126.ph1 {
127 padding-left: var(--spacing-extra-small);
128 padding-right: var(--spacing-extra-small);
129}
130
131.ph2 {
132 padding-left: var(--spacing-small);
133 padding-right: var(--spacing-small);
134}
135
136.ph3 {
137 padding-left: var(--spacing-medium);
138 padding-right: var(--spacing-medium);
139}
140
141.ph4 {
142 padding-left: var(--spacing-large);
143 padding-right: var(--spacing-large);
144}
145
146.ph5 {
147 padding-left: var(--spacing-extra-large);
148 padding-right: var(--spacing-extra-large);
149}
150
151.ph6 {
152 padding-left: var(--spacing-extra-extra-large);
153 padding-right: var(--spacing-extra-extra-large);
154}
155
156.ph7 {
157 padding-left: var(--spacing-extra-extra-extra-large);
158 padding-right: var(--spacing-extra-extra-extra-large);
159}
160
161.ma0 { margin: var(--spacing-none); }
162.ma1 { margin: var(--spacing-extra-small); }
163.ma2 { margin: var(--spacing-small); }
164.ma3 { margin: var(--spacing-medium); }
165.ma4 { margin: var(--spacing-large); }
166.ma5 { margin: var(--spacing-extra-large); }
167.ma6 { margin: var(--spacing-extra-extra-large); }
168.ma7 { margin: var(--spacing-extra-extra-extra-large); }
169
170.ml0 { margin-left: var(--spacing-none); }
171.ml1 { margin-left: var(--spacing-extra-small); }
172.ml2 { margin-left: var(--spacing-small); }
173.ml3 { margin-left: var(--spacing-medium); }
174.ml4 { margin-left: var(--spacing-large); }
175.ml5 { margin-left: var(--spacing-extra-large); }
176.ml6 { margin-left: var(--spacing-extra-extra-large); }
177.ml7 { margin-left: var(--spacing-extra-extra-extra-large); }
178
179.mr0 { margin-right: var(--spacing-none); }
180.mr1 { margin-right: var(--spacing-extra-small); }
181.mr2 { margin-right: var(--spacing-small); }
182.mr3 { margin-right: var(--spacing-medium); }
183.mr4 { margin-right: var(--spacing-large); }
184.mr5 { margin-right: var(--spacing-extra-large); }
185.mr6 { margin-right: var(--spacing-extra-extra-large); }
186.mr7 { margin-right: var(--spacing-extra-extra-extra-large); }
187
188.mb0 { margin-bottom: var(--spacing-none); }
189.mb1 { margin-bottom: var(--spacing-extra-small); }
190.mb2 { margin-bottom: var(--spacing-small); }
191.mb3 { margin-bottom: var(--spacing-medium); }
192.mb4 { margin-bottom: var(--spacing-large); }
193.mb5 { margin-bottom: var(--spacing-extra-large); }
194.mb6 { margin-bottom: var(--spacing-extra-extra-large); }
195.mb7 { margin-bottom: var(--spacing-extra-extra-extra-large); }
196
197.mt0 { margin-top: var(--spacing-none); }
198.mt1 { margin-top: var(--spacing-extra-small); }
199.mt2 { margin-top: var(--spacing-small); }
200.mt3 { margin-top: var(--spacing-medium); }
201.mt4 { margin-top: var(--spacing-large); }
202.mt5 { margin-top: var(--spacing-extra-large); }
203.mt6 { margin-top: var(--spacing-extra-extra-large); }
204.mt7 { margin-top: var(--spacing-extra-extra-extra-large); }
205
206.mv0 {
207 margin-top: var(--spacing-none);
208 margin-bottom: var(--spacing-none);
209}
210.mv1 {
211 margin-top: var(--spacing-extra-small);
212 margin-bottom: var(--spacing-extra-small);
213}
214.mv2 {
215 margin-top: var(--spacing-small);
216 margin-bottom: var(--spacing-small);
217}
218.mv3 {
219 margin-top: var(--spacing-medium);
220 margin-bottom: var(--spacing-medium);
221}
222.mv4 {
223 margin-top: var(--spacing-large);
224 margin-bottom: var(--spacing-large);
225}
226.mv5 {
227 margin-top: var(--spacing-extra-large);
228 margin-bottom: var(--spacing-extra-large);
229}
230.mv6 {
231 margin-top: var(--spacing-extra-extra-large);
232 margin-bottom: var(--spacing-extra-extra-large);
233}
234.mv7 {
235 margin-top: var(--spacing-extra-extra-extra-large);
236 margin-bottom: var(--spacing-extra-extra-extra-large);
237}
238
239.mh0 {
240 margin-left: var(--spacing-none);
241 margin-right: var(--spacing-none);
242}
243.mh1 {
244 margin-left: var(--spacing-extra-small);
245 margin-right: var(--spacing-extra-small);
246}
247.mh2 {
248 margin-left: var(--spacing-small);
249 margin-right: var(--spacing-small);
250}
251.mh3 {
252 margin-left: var(--spacing-medium);
253 margin-right: var(--spacing-medium);
254}
255.mh4 {
256 margin-left: var(--spacing-large);
257 margin-right: var(--spacing-large);
258}
259.mh5 {
260 margin-left: var(--spacing-extra-large);
261 margin-right: var(--spacing-extra-large);
262}
263.mh6 {
264 margin-left: var(--spacing-extra-extra-large);
265 margin-right: var(--spacing-extra-extra-large);
266}
267.mh7 {
268 margin-left: var(--spacing-extra-extra-extra-large);
269 margin-right: var(--spacing-extra-extra-extra-large);
270}
271
272@media (--breakpoint-not-small) {
273 .pa0-ns { padding: var(--spacing-none); }
274 .pa1-ns { padding: var(--spacing-extra-small); }
275 .pa2-ns { padding: var(--spacing-small); }
276 .pa3-ns { padding: var(--spacing-medium); }
277 .pa4-ns { padding: var(--spacing-large); }
278 .pa5-ns { padding: var(--spacing-extra-large); }
279 .pa6-ns { padding: var(--spacing-extra-extra-large); }
280 .pa7-ns { padding: var(--spacing-extra-extra-extra-large); }
281
282 .pl0-ns { padding-left: var(--spacing-none); }
283 .pl1-ns { padding-left: var(--spacing-extra-small); }
284 .pl2-ns { padding-left: var(--spacing-small); }
285 .pl3-ns { padding-left: var(--spacing-medium); }
286 .pl4-ns { padding-left: var(--spacing-large); }
287 .pl5-ns { padding-left: var(--spacing-extra-large); }
288 .pl6-ns { padding-left: var(--spacing-extra-extra-large); }
289 .pl7-ns { padding-left: var(--spacing-extra-extra-extra-large); }
290
291 .pr0-ns { padding-right: var(--spacing-none); }
292 .pr1-ns { padding-right: var(--spacing-extra-small); }
293 .pr2-ns { padding-right: var(--spacing-small); }
294 .pr3-ns { padding-right: var(--spacing-medium); }
295 .pr4-ns { padding-right: var(--spacing-large); }
296 .pr5-ns { padding-right: var(--spacing-extra-large); }
297 .pr6-ns { padding-right: var(--spacing-extra-extra-large); }
298 .pr7-ns { padding-right: var(--spacing-extra-extra-extra-large); }
299
300 .pb0-ns { padding-bottom: var(--spacing-none); }
301 .pb1-ns { padding-bottom: var(--spacing-extra-small); }
302 .pb2-ns { padding-bottom: var(--spacing-small); }
303 .pb3-ns { padding-bottom: var(--spacing-medium); }
304 .pb4-ns { padding-bottom: var(--spacing-large); }
305 .pb5-ns { padding-bottom: var(--spacing-extra-large); }
306 .pb6-ns { padding-bottom: var(--spacing-extra-extra-large); }
307 .pb7-ns { padding-bottom: var(--spacing-extra-extra-extra-large); }
308
309 .pt0-ns { padding-top: var(--spacing-none); }
310 .pt1-ns { padding-top: var(--spacing-extra-small); }
311 .pt2-ns { padding-top: var(--spacing-small); }
312 .pt3-ns { padding-top: var(--spacing-medium); }
313 .pt4-ns { padding-top: var(--spacing-large); }
314 .pt5-ns { padding-top: var(--spacing-extra-large); }
315 .pt6-ns { padding-top: var(--spacing-extra-extra-large); }
316 .pt7-ns { padding-top: var(--spacing-extra-extra-extra-large); }
317
318 .pv0-ns {
319 padding-top: var(--spacing-none);
320 padding-bottom: var(--spacing-none);
321 }
322 .pv1-ns {
323 padding-top: var(--spacing-extra-small);
324 padding-bottom: var(--spacing-extra-small);
325 }
326 .pv2-ns {
327 padding-top: var(--spacing-small);
328 padding-bottom: var(--spacing-small);
329 }
330 .pv3-ns {
331 padding-top: var(--spacing-medium);
332 padding-bottom: var(--spacing-medium);
333 }
334 .pv4-ns {
335 padding-top: var(--spacing-large);
336 padding-bottom: var(--spacing-large);
337 }
338 .pv5-ns {
339 padding-top: var(--spacing-extra-large);
340 padding-bottom: var(--spacing-extra-large);
341 }
342 .pv6-ns {
343 padding-top: var(--spacing-extra-extra-large);
344 padding-bottom: var(--spacing-extra-extra-large);
345 }
346 .pv7-ns {
347 padding-top: var(--spacing-extra-extra-extra-large);
348 padding-bottom: var(--spacing-extra-extra-extra-large);
349 }
350 .ph0-ns {
351 padding-left: var(--spacing-none);
352 padding-right: var(--spacing-none);
353 }
354 .ph1-ns {
355 padding-left: var(--spacing-extra-small);
356 padding-right: var(--spacing-extra-small);
357 }
358 .ph2-ns {
359 padding-left: var(--spacing-small);
360 padding-right: var(--spacing-small);
361 }
362 .ph3-ns {
363 padding-left: var(--spacing-medium);
364 padding-right: var(--spacing-medium);
365 }
366 .ph4-ns {
367 padding-left: var(--spacing-large);
368 padding-right: var(--spacing-large);
369 }
370 .ph5-ns {
371 padding-left: var(--spacing-extra-large);
372 padding-right: var(--spacing-extra-large);
373 }
374 .ph6-ns {
375 padding-left: var(--spacing-extra-extra-large);
376 padding-right: var(--spacing-extra-extra-large);
377 }
378 .ph7-ns {
379 padding-left: var(--spacing-extra-extra-extra-large);
380 padding-right: var(--spacing-extra-extra-extra-large);
381 }
382
383 .ma0-ns { margin: var(--spacing-none); }
384 .ma1-ns { margin: var(--spacing-extra-small); }
385 .ma2-ns { margin: var(--spacing-small); }
386 .ma3-ns { margin: var(--spacing-medium); }
387 .ma4-ns { margin: var(--spacing-large); }
388 .ma5-ns { margin: var(--spacing-extra-large); }
389 .ma6-ns { margin: var(--spacing-extra-extra-large); }
390 .ma7-ns { margin: var(--spacing-extra-extra-extra-large); }
391
392 .ml0-ns { margin-left: var(--spacing-none); }
393 .ml1-ns { margin-left: var(--spacing-extra-small); }
394 .ml2-ns { margin-left: var(--spacing-small); }
395 .ml3-ns { margin-left: var(--spacing-medium); }
396 .ml4-ns { margin-left: var(--spacing-large); }
397 .ml5-ns { margin-left: var(--spacing-extra-large); }
398 .ml6-ns { margin-left: var(--spacing-extra-extra-large); }
399 .ml7-ns { margin-left: var(--spacing-extra-extra-extra-large); }
400
401 .mr0-ns { margin-right: var(--spacing-none); }
402 .mr1-ns { margin-right: var(--spacing-extra-small); }
403 .mr2-ns { margin-right: var(--spacing-small); }
404 .mr3-ns { margin-right: var(--spacing-medium); }
405 .mr4-ns { margin-right: var(--spacing-large); }
406 .mr5-ns { margin-right: var(--spacing-extra-large); }
407 .mr6-ns { margin-right: var(--spacing-extra-extra-large); }
408 .mr7-ns { margin-right: var(--spacing-extra-extra-extra-large); }
409
410 .mb0-ns { margin-bottom: var(--spacing-none); }
411 .mb1-ns { margin-bottom: var(--spacing-extra-small); }
412 .mb2-ns { margin-bottom: var(--spacing-small); }
413 .mb3-ns { margin-bottom: var(--spacing-medium); }
414 .mb4-ns { margin-bottom: var(--spacing-large); }
415 .mb5-ns { margin-bottom: var(--spacing-extra-large); }
416 .mb6-ns { margin-bottom: var(--spacing-extra-extra-large); }
417 .mb7-ns { margin-bottom: var(--spacing-extra-extra-extra-large); }
418
419 .mt0-ns { margin-top: var(--spacing-none); }
420 .mt1-ns { margin-top: var(--spacing-extra-small); }
421 .mt2-ns { margin-top: var(--spacing-small); }
422 .mt3-ns { margin-top: var(--spacing-medium); }
423 .mt4-ns { margin-top: var(--spacing-large); }
424 .mt5-ns { margin-top: var(--spacing-extra-large); }
425 .mt6-ns { margin-top: var(--spacing-extra-extra-large); }
426 .mt7-ns { margin-top: var(--spacing-extra-extra-extra-large); }
427
428 .mv0-ns {
429 margin-top: var(--spacing-none);
430 margin-bottom: var(--spacing-none);
431 }
432 .mv1-ns {
433 margin-top: var(--spacing-extra-small);
434 margin-bottom: var(--spacing-extra-small);
435 }
436 .mv2-ns {
437 margin-top: var(--spacing-small);
438 margin-bottom: var(--spacing-small);
439 }
440 .mv3-ns {
441 margin-top: var(--spacing-medium);
442 margin-bottom: var(--spacing-medium);
443 }
444 .mv4-ns {
445 margin-top: var(--spacing-large);
446 margin-bottom: var(--spacing-large);
447 }
448 .mv5-ns {
449 margin-top: var(--spacing-extra-large);
450 margin-bottom: var(--spacing-extra-large);
451 }
452 .mv6-ns {
453 margin-top: var(--spacing-extra-extra-large);
454 margin-bottom: var(--spacing-extra-extra-large);
455 }
456 .mv7-ns {
457 margin-top: var(--spacing-extra-extra-extra-large);
458 margin-bottom: var(--spacing-extra-extra-extra-large);
459 }
460
461 .mh0-ns {
462 margin-left: var(--spacing-none);
463 margin-right: var(--spacing-none);
464 }
465 .mh1-ns {
466 margin-left: var(--spacing-extra-small);
467 margin-right: var(--spacing-extra-small);
468 }
469 .mh2-ns {
470 margin-left: var(--spacing-small);
471 margin-right: var(--spacing-small);
472 }
473 .mh3-ns {
474 margin-left: var(--spacing-medium);
475 margin-right: var(--spacing-medium);
476 }
477 .mh4-ns {
478 margin-left: var(--spacing-large);
479 margin-right: var(--spacing-large);
480 }
481 .mh5-ns {
482 margin-left: var(--spacing-extra-large);
483 margin-right: var(--spacing-extra-large);
484 }
485 .mh6-ns {
486 margin-left: var(--spacing-extra-extra-large);
487 margin-right: var(--spacing-extra-extra-large);
488 }
489 .mh7-ns {
490 margin-left: var(--spacing-extra-extra-extra-large);
491 margin-right: var(--spacing-extra-extra-extra-large);
492 }
493
494}
495
496@media (--breakpoint-medium) {
497 .pa0-m { padding: var(--spacing-none); }
498 .pa1-m { padding: var(--spacing-extra-small); }
499 .pa2-m { padding: var(--spacing-small); }
500 .pa3-m { padding: var(--spacing-medium); }
501 .pa4-m { padding: var(--spacing-large); }
502 .pa5-m { padding: var(--spacing-extra-large); }
503 .pa6-m { padding: var(--spacing-extra-extra-large); }
504 .pa7-m { padding: var(--spacing-extra-extra-extra-large); }
505
506 .pl0-m { padding-left: var(--spacing-none); }
507 .pl1-m { padding-left: var(--spacing-extra-small); }
508 .pl2-m { padding-left: var(--spacing-small); }
509 .pl3-m { padding-left: var(--spacing-medium); }
510 .pl4-m { padding-left: var(--spacing-large); }
511 .pl5-m { padding-left: var(--spacing-extra-large); }
512 .pl6-m { padding-left: var(--spacing-extra-extra-large); }
513 .pl7-m { padding-left: var(--spacing-extra-extra-extra-large); }
514
515 .pr0-m { padding-right: var(--spacing-none); }
516 .pr1-m { padding-right: var(--spacing-extra-small); }
517 .pr2-m { padding-right: var(--spacing-small); }
518 .pr3-m { padding-right: var(--spacing-medium); }
519 .pr4-m { padding-right: var(--spacing-large); }
520 .pr5-m { padding-right: var(--spacing-extra-large); }
521 .pr6-m { padding-right: var(--spacing-extra-extra-large); }
522 .pr7-m { padding-right: var(--spacing-extra-extra-extra-large); }
523
524 .pb0-m { padding-bottom: var(--spacing-none); }
525 .pb1-m { padding-bottom: var(--spacing-extra-small); }
526 .pb2-m { padding-bottom: var(--spacing-small); }
527 .pb3-m { padding-bottom: var(--spacing-medium); }
528 .pb4-m { padding-bottom: var(--spacing-large); }
529 .pb5-m { padding-bottom: var(--spacing-extra-large); }
530 .pb6-m { padding-bottom: var(--spacing-extra-extra-large); }
531 .pb7-m { padding-bottom: var(--spacing-extra-extra-extra-large); }
532
533 .pt0-m { padding-top: var(--spacing-none); }
534 .pt1-m { padding-top: var(--spacing-extra-small); }
535 .pt2-m { padding-top: var(--spacing-small); }
536 .pt3-m { padding-top: var(--spacing-medium); }
537 .pt4-m { padding-top: var(--spacing-large); }
538 .pt5-m { padding-top: var(--spacing-extra-large); }
539 .pt6-m { padding-top: var(--spacing-extra-extra-large); }
540 .pt7-m { padding-top: var(--spacing-extra-extra-extra-large); }
541
542 .pv0-m {
543 padding-top: var(--spacing-none);
544 padding-bottom: var(--spacing-none);
545 }
546 .pv1-m {
547 padding-top: var(--spacing-extra-small);
548 padding-bottom: var(--spacing-extra-small);
549 }
550 .pv2-m {
551 padding-top: var(--spacing-small);
552 padding-bottom: var(--spacing-small);
553 }
554 .pv3-m {
555 padding-top: var(--spacing-medium);
556 padding-bottom: var(--spacing-medium);
557 }
558 .pv4-m {
559 padding-top: var(--spacing-large);
560 padding-bottom: var(--spacing-large);
561 }
562 .pv5-m {
563 padding-top: var(--spacing-extra-large);
564 padding-bottom: var(--spacing-extra-large);
565 }
566 .pv6-m {
567 padding-top: var(--spacing-extra-extra-large);
568 padding-bottom: var(--spacing-extra-extra-large);
569 }
570 .pv7-m {
571 padding-top: var(--spacing-extra-extra-extra-large);
572 padding-bottom: var(--spacing-extra-extra-extra-large);
573 }
574
575 .ph0-m {
576 padding-left: var(--spacing-none);
577 padding-right: var(--spacing-none);
578 }
579 .ph1-m {
580 padding-left: var(--spacing-extra-small);
581 padding-right: var(--spacing-extra-small);
582 }
583 .ph2-m {
584 padding-left: var(--spacing-small);
585 padding-right: var(--spacing-small);
586 }
587 .ph3-m {
588 padding-left: var(--spacing-medium);
589 padding-right: var(--spacing-medium);
590 }
591 .ph4-m {
592 padding-left: var(--spacing-large);
593 padding-right: var(--spacing-large);
594 }
595 .ph5-m {
596 padding-left: var(--spacing-extra-large);
597 padding-right: var(--spacing-extra-large);
598 }
599 .ph6-m {
600 padding-left: var(--spacing-extra-extra-large);
601 padding-right: var(--spacing-extra-extra-large);
602 }
603 .ph7-m {
604 padding-left: var(--spacing-extra-extra-extra-large);
605 padding-right: var(--spacing-extra-extra-extra-large);
606 }
607
608 .ma0-m { margin: var(--spacing-none); }
609 .ma1-m { margin: var(--spacing-extra-small); }
610 .ma2-m { margin: var(--spacing-small); }
611 .ma3-m { margin: var(--spacing-medium); }
612 .ma4-m { margin: var(--spacing-large); }
613 .ma5-m { margin: var(--spacing-extra-large); }
614 .ma6-m { margin: var(--spacing-extra-extra-large); }
615 .ma7-m { margin: var(--spacing-extra-extra-extra-large); }
616
617 .ml0-m { margin-left: var(--spacing-none); }
618 .ml1-m { margin-left: var(--spacing-extra-small); }
619 .ml2-m { margin-left: var(--spacing-small); }
620 .ml3-m { margin-left: var(--spacing-medium); }
621 .ml4-m { margin-left: var(--spacing-large); }
622 .ml5-m { margin-left: var(--spacing-extra-large); }
623 .ml6-m { margin-left: var(--spacing-extra-extra-large); }
624 .ml7-m { margin-left: var(--spacing-extra-extra-extra-large); }
625
626 .mr0-m { margin-right: var(--spacing-none); }
627 .mr1-m { margin-right: var(--spacing-extra-small); }
628 .mr2-m { margin-right: var(--spacing-small); }
629 .mr3-m { margin-right: var(--spacing-medium); }
630 .mr4-m { margin-right: var(--spacing-large); }
631 .mr5-m { margin-right: var(--spacing-extra-large); }
632 .mr6-m { margin-right: var(--spacing-extra-extra-large); }
633 .mr7-m { margin-right: var(--spacing-extra-extra-extra-large); }
634
635 .mb0-m { margin-bottom: var(--spacing-none); }
636 .mb1-m { margin-bottom: var(--spacing-extra-small); }
637 .mb2-m { margin-bottom: var(--spacing-small); }
638 .mb3-m { margin-bottom: var(--spacing-medium); }
639 .mb4-m { margin-bottom: var(--spacing-large); }
640 .mb5-m { margin-bottom: var(--spacing-extra-large); }
641 .mb6-m { margin-bottom: var(--spacing-extra-extra-large); }
642 .mb7-m { margin-bottom: var(--spacing-extra-extra-extra-large); }
643
644 .mt0-m { margin-top: var(--spacing-none); }
645 .mt1-m { margin-top: var(--spacing-extra-small); }
646 .mt2-m { margin-top: var(--spacing-small); }
647 .mt3-m { margin-top: var(--spacing-medium); }
648 .mt4-m { margin-top: var(--spacing-large); }
649 .mt5-m { margin-top: var(--spacing-extra-large); }
650 .mt6-m { margin-top: var(--spacing-extra-extra-large); }
651 .mt7-m { margin-top: var(--spacing-extra-extra-extra-large); }
652
653 .mv0-m {
654 margin-top: var(--spacing-none);
655 margin-bottom: var(--spacing-none);
656 }
657 .mv1-m {
658 margin-top: var(--spacing-extra-small);
659 margin-bottom: var(--spacing-extra-small);
660 }
661 .mv2-m {
662 margin-top: var(--spacing-small);
663 margin-bottom: var(--spacing-small);
664 }
665 .mv3-m {
666 margin-top: var(--spacing-medium);
667 margin-bottom: var(--spacing-medium);
668 }
669 .mv4-m {
670 margin-top: var(--spacing-large);
671 margin-bottom: var(--spacing-large);
672 }
673 .mv5-m {
674 margin-top: var(--spacing-extra-large);
675 margin-bottom: var(--spacing-extra-large);
676 }
677 .mv6-m {
678 margin-top: var(--spacing-extra-extra-large);
679 margin-bottom: var(--spacing-extra-extra-large);
680 }
681 .mv7-m {
682 margin-top: var(--spacing-extra-extra-extra-large);
683 margin-bottom: var(--spacing-extra-extra-extra-large);
684 }
685
686 .mh0-m {
687 margin-left: var(--spacing-none);
688 margin-right: var(--spacing-none);
689 }
690 .mh1-m {
691 margin-left: var(--spacing-extra-small);
692 margin-right: var(--spacing-extra-small);
693 }
694 .mh2-m {
695 margin-left: var(--spacing-small);
696 margin-right: var(--spacing-small);
697 }
698 .mh3-m {
699 margin-left: var(--spacing-medium);
700 margin-right: var(--spacing-medium);
701 }
702 .mh4-m {
703 margin-left: var(--spacing-large);
704 margin-right: var(--spacing-large);
705 }
706 .mh5-m {
707 margin-left: var(--spacing-extra-large);
708 margin-right: var(--spacing-extra-large);
709 }
710 .mh6-m {
711 margin-left: var(--spacing-extra-extra-large);
712 margin-right: var(--spacing-extra-extra-large);
713 }
714 .mh7-m {
715 margin-left: var(--spacing-extra-extra-extra-large);
716 margin-right: var(--spacing-extra-extra-extra-large);
717 }
718
719}
720
721@media (--breakpoint-large) {
722 .pa0-l { padding: var(--spacing-none); }
723 .pa1-l { padding: var(--spacing-extra-small); }
724 .pa2-l { padding: var(--spacing-small); }
725 .pa3-l { padding: var(--spacing-medium); }
726 .pa4-l { padding: var(--spacing-large); }
727 .pa5-l { padding: var(--spacing-extra-large); }
728 .pa6-l { padding: var(--spacing-extra-extra-large); }
729 .pa7-l { padding: var(--spacing-extra-extra-extra-large); }
730
731 .pl0-l { padding-left: var(--spacing-none); }
732 .pl1-l { padding-left: var(--spacing-extra-small); }
733 .pl2-l { padding-left: var(--spacing-small); }
734 .pl3-l { padding-left: var(--spacing-medium); }
735 .pl4-l { padding-left: var(--spacing-large); }
736 .pl5-l { padding-left: var(--spacing-extra-large); }
737 .pl6-l { padding-left: var(--spacing-extra-extra-large); }
738 .pl7-l { padding-left: var(--spacing-extra-extra-extra-large); }
739
740 .pr0-l { padding-right: var(--spacing-none); }
741 .pr1-l { padding-right: var(--spacing-extra-small); }
742 .pr2-l { padding-right: var(--spacing-small); }
743 .pr3-l { padding-right: var(--spacing-medium); }
744 .pr4-l { padding-right: var(--spacing-large); }
745 .pr5-l { padding-right: var(--spacing-extra-large); }
746 .pr6-l { padding-right: var(--spacing-extra-extra-large); }
747 .pr7-l { padding-right: var(--spacing-extra-extra-extra-large); }
748
749 .pb0-l { padding-bottom: var(--spacing-none); }
750 .pb1-l { padding-bottom: var(--spacing-extra-small); }
751 .pb2-l { padding-bottom: var(--spacing-small); }
752 .pb3-l { padding-bottom: var(--spacing-medium); }
753 .pb4-l { padding-bottom: var(--spacing-large); }
754 .pb5-l { padding-bottom: var(--spacing-extra-large); }
755 .pb6-l { padding-bottom: var(--spacing-extra-extra-large); }
756 .pb7-l { padding-bottom: var(--spacing-extra-extra-extra-large); }
757
758 .pt0-l { padding-top: var(--spacing-none); }
759 .pt1-l { padding-top: var(--spacing-extra-small); }
760 .pt2-l { padding-top: var(--spacing-small); }
761 .pt3-l { padding-top: var(--spacing-medium); }
762 .pt4-l { padding-top: var(--spacing-large); }
763 .pt5-l { padding-top: var(--spacing-extra-large); }
764 .pt6-l { padding-top: var(--spacing-extra-extra-large); }
765 .pt7-l { padding-top: var(--spacing-extra-extra-extra-large); }
766
767 .pv0-l {
768 padding-top: var(--spacing-none);
769 padding-bottom: var(--spacing-none);
770 }
771 .pv1-l {
772 padding-top: var(--spacing-extra-small);
773 padding-bottom: var(--spacing-extra-small);
774 }
775 .pv2-l {
776 padding-top: var(--spacing-small);
777 padding-bottom: var(--spacing-small);
778 }
779 .pv3-l {
780 padding-top: var(--spacing-medium);
781 padding-bottom: var(--spacing-medium);
782 }
783 .pv4-l {
784 padding-top: var(--spacing-large);
785 padding-bottom: var(--spacing-large);
786 }
787 .pv5-l {
788 padding-top: var(--spacing-extra-large);
789 padding-bottom: var(--spacing-extra-large);
790 }
791 .pv6-l {
792 padding-top: var(--spacing-extra-extra-large);
793 padding-bottom: var(--spacing-extra-extra-large);
794 }
795 .pv7-l {
796 padding-top: var(--spacing-extra-extra-extra-large);
797 padding-bottom: var(--spacing-extra-extra-extra-large);
798 }
799
800 .ph0-l {
801 padding-left: var(--spacing-none);
802 padding-right: var(--spacing-none);
803 }
804 .ph1-l {
805 padding-left: var(--spacing-extra-small);
806 padding-right: var(--spacing-extra-small);
807 }
808 .ph2-l {
809 padding-left: var(--spacing-small);
810 padding-right: var(--spacing-small);
811 }
812 .ph3-l {
813 padding-left: var(--spacing-medium);
814 padding-right: var(--spacing-medium);
815 }
816 .ph4-l {
817 padding-left: var(--spacing-large);
818 padding-right: var(--spacing-large);
819 }
820 .ph5-l {
821 padding-left: var(--spacing-extra-large);
822 padding-right: var(--spacing-extra-large);
823 }
824 .ph6-l {
825 padding-left: var(--spacing-extra-extra-large);
826 padding-right: var(--spacing-extra-extra-large);
827 }
828 .ph7-l {
829 padding-left: var(--spacing-extra-extra-extra-large);
830 padding-right: var(--spacing-extra-extra-extra-large);
831 }
832
833 .ma0-l { margin: var(--spacing-none); }
834 .ma1-l { margin: var(--spacing-extra-small); }
835 .ma2-l { margin: var(--spacing-small); }
836 .ma3-l { margin: var(--spacing-medium); }
837 .ma4-l { margin: var(--spacing-large); }
838 .ma5-l { margin: var(--spacing-extra-large); }
839 .ma6-l { margin: var(--spacing-extra-extra-large); }
840 .ma7-l { margin: var(--spacing-extra-extra-extra-large); }
841
842 .ml0-l { margin-left: var(--spacing-none); }
843 .ml1-l { margin-left: var(--spacing-extra-small); }
844 .ml2-l { margin-left: var(--spacing-small); }
845 .ml3-l { margin-left: var(--spacing-medium); }
846 .ml4-l { margin-left: var(--spacing-large); }
847 .ml5-l { margin-left: var(--spacing-extra-large); }
848 .ml6-l { margin-left: var(--spacing-extra-extra-large); }
849 .ml7-l { margin-left: var(--spacing-extra-extra-extra-large); }
850
851 .mr0-l { margin-right: var(--spacing-none); }
852 .mr1-l { margin-right: var(--spacing-extra-small); }
853 .mr2-l { margin-right: var(--spacing-small); }
854 .mr3-l { margin-right: var(--spacing-medium); }
855 .mr4-l { margin-right: var(--spacing-large); }
856 .mr5-l { margin-right: var(--spacing-extra-large); }
857 .mr6-l { margin-right: var(--spacing-extra-extra-large); }
858 .mr7-l { margin-right: var(--spacing-extra-extra-extra-large); }
859
860 .mb0-l { margin-bottom: var(--spacing-none); }
861 .mb1-l { margin-bottom: var(--spacing-extra-small); }
862 .mb2-l { margin-bottom: var(--spacing-small); }
863 .mb3-l { margin-bottom: var(--spacing-medium); }
864 .mb4-l { margin-bottom: var(--spacing-large); }
865 .mb5-l { margin-bottom: var(--spacing-extra-large); }
866 .mb6-l { margin-bottom: var(--spacing-extra-extra-large); }
867 .mb7-l { margin-bottom: var(--spacing-extra-extra-extra-large); }
868
869 .mt0-l { margin-top: var(--spacing-none); }
870 .mt1-l { margin-top: var(--spacing-extra-small); }
871 .mt2-l { margin-top: var(--spacing-small); }
872 .mt3-l { margin-top: var(--spacing-medium); }
873 .mt4-l { margin-top: var(--spacing-large); }
874 .mt5-l { margin-top: var(--spacing-extra-large); }
875 .mt6-l { margin-top: var(--spacing-extra-extra-large); }
876 .mt7-l { margin-top: var(--spacing-extra-extra-extra-large); }
877
878 .mv0-l {
879 margin-top: var(--spacing-none);
880 margin-bottom: var(--spacing-none);
881 }
882 .mv1-l {
883 margin-top: var(--spacing-extra-small);
884 margin-bottom: var(--spacing-extra-small);
885 }
886 .mv2-l {
887 margin-top: var(--spacing-small);
888 margin-bottom: var(--spacing-small);
889 }
890 .mv3-l {
891 margin-top: var(--spacing-medium);
892 margin-bottom: var(--spacing-medium);
893 }
894 .mv4-l {
895 margin-top: var(--spacing-large);
896 margin-bottom: var(--spacing-large);
897 }
898 .mv5-l {
899 margin-top: var(--spacing-extra-large);
900 margin-bottom: var(--spacing-extra-large);
901 }
902 .mv6-l {
903 margin-top: var(--spacing-extra-extra-large);
904 margin-bottom: var(--spacing-extra-extra-large);
905 }
906 .mv7-l {
907 margin-top: var(--spacing-extra-extra-extra-large);
908 margin-bottom: var(--spacing-extra-extra-extra-large);
909 }
910
911 .mh0-l {
912 margin-left: var(--spacing-none);
913 margin-right: var(--spacing-none);
914 }
915 .mh1-l {
916 margin-left: var(--spacing-extra-small);
917 margin-right: var(--spacing-extra-small);
918 }
919 .mh2-l {
920 margin-left: var(--spacing-small);
921 margin-right: var(--spacing-small);
922 }
923 .mh3-l {
924 margin-left: var(--spacing-medium);
925 margin-right: var(--spacing-medium);
926 }
927 .mh4-l {
928 margin-left: var(--spacing-large);
929 margin-right: var(--spacing-large);
930 }
931 .mh5-l {
932 margin-left: var(--spacing-extra-large);
933 margin-right: var(--spacing-extra-large);
934 }
935 .mh6-l {
936 margin-left: var(--spacing-extra-extra-large);
937 margin-right: var(--spacing-extra-extra-large);
938 }
939 .mh7-l {
940 margin-left: var(--spacing-extra-extra-extra-large);
941 margin-right: var(--spacing-extra-extra-extra-large);
942 }
943}