mirror of
https://github.com/tachyons-css/tachyons.git
synced 2026-02-06 15:31:51 +00:00
976 lines
26 KiB
CSS
976 lines
26 KiB
CSS
/*!!!
|
|
|
|
# SPACING
|
|
|
|
An eight step powers of two scale ranging from 0 to 16rem.
|
|
|
|
### Docs
|
|
|
|
http://tachyons.io/docs/layout/spacing/
|
|
|
|
### Base
|
|
|
|
- p = padding
|
|
- m = margin
|
|
|
|
### Modifiers
|
|
|
|
- h = horizontal
|
|
- v = vertical
|
|
- t = top
|
|
- r = right
|
|
- b = bottom
|
|
- l = left
|
|
|
|
- 0 = none
|
|
- 1 = 1st step in spacing scale
|
|
- 2 = 2nd step in spacing scale
|
|
- 3 = 3rd step in spacing scale
|
|
- 4 = 4th step in spacing scale
|
|
- 5 = 5th step in spacing scale
|
|
- 6 = 6th step in spacing scale
|
|
- 7 = 7th step in spacing scale
|
|
|
|
### Media Query Extensions
|
|
|
|
- `-s` = small
|
|
- `-m` = medium
|
|
- `-l` = large
|
|
*/
|
|
|
|
/* Variables */
|
|
|
|
:root {
|
|
--spacing-0: 0;
|
|
--spacing-1: .25rem;
|
|
--spacing-2: .5rem;
|
|
--spacing-3: 1rem;
|
|
--spacing-4: 2rem;
|
|
--spacing-5: 4rem;
|
|
--spacing-6: 8rem;
|
|
--spacing-7: 16rem;
|
|
}
|
|
|
|
.p0 { padding: var(--spacing-0); }
|
|
.p1 { padding: var(--spacing-1); }
|
|
.p2 { padding: var(--spacing-2); }
|
|
.p3 { padding: var(--spacing-3); }
|
|
.p4 { padding: var(--spacing-4); }
|
|
.p5 { padding: var(--spacing-5); }
|
|
.p6 { padding: var(--spacing-6); }
|
|
.p7 { padding: var(--spacing-7); }
|
|
|
|
.pl0 { padding-left: var(--spacing-0); }
|
|
.pl1 { padding-left: var(--spacing-1); }
|
|
.pl2 { padding-left: var(--spacing-2); }
|
|
.pl3 { padding-left: var(--spacing-3); }
|
|
.pl4 { padding-left: var(--spacing-4); }
|
|
.pl5 { padding-left: var(--spacing-5); }
|
|
.pl6 { padding-left: var(--spacing-6); }
|
|
.pl7 { padding-left: var(--spacing-7); }
|
|
|
|
.pr0 { padding-right: var(--spacing-0); }
|
|
.pr1 { padding-right: var(--spacing-1); }
|
|
.pr2 { padding-right: var(--spacing-2); }
|
|
.pr3 { padding-right: var(--spacing-3); }
|
|
.pr4 { padding-right: var(--spacing-4); }
|
|
.pr5 { padding-right: var(--spacing-5); }
|
|
.pr6 { padding-right: var(--spacing-6); }
|
|
.pr7 { padding-right: var(--spacing-7); }
|
|
|
|
.pb0 { padding-bottom: var(--spacing-0); }
|
|
.pb1 { padding-bottom: var(--spacing-1); }
|
|
.pb2 { padding-bottom: var(--spacing-2); }
|
|
.pb3 { padding-bottom: var(--spacing-3); }
|
|
.pb4 { padding-bottom: var(--spacing-4); }
|
|
.pb5 { padding-bottom: var(--spacing-5); }
|
|
.pb6 { padding-bottom: var(--spacing-6); }
|
|
.pb7 { padding-bottom: var(--spacing-7); }
|
|
|
|
.pt0 { padding-top: var(--spacing-0); }
|
|
.pt1 { padding-top: var(--spacing-1); }
|
|
.pt2 { padding-top: var(--spacing-2); }
|
|
.pt3 { padding-top: var(--spacing-3); }
|
|
.pt4 { padding-top: var(--spacing-4); }
|
|
.pt5 { padding-top: var(--spacing-5); }
|
|
.pt6 { padding-top: var(--spacing-6); }
|
|
.pt7 { padding-top: var(--spacing-7); }
|
|
|
|
.pv0 {
|
|
padding-top: var(--spacing-0);
|
|
padding-bottom: var(--spacing-0);
|
|
}
|
|
.pv1 {
|
|
padding-top: var(--spacing-1);
|
|
padding-bottom: var(--spacing-1);
|
|
}
|
|
.pv2 {
|
|
padding-top: var(--spacing-2);
|
|
padding-bottom: var(--spacing-2);
|
|
}
|
|
.pv3 {
|
|
padding-top: var(--spacing-3);
|
|
padding-bottom: var(--spacing-3);
|
|
}
|
|
.pv4 {
|
|
padding-top: var(--spacing-4);
|
|
padding-bottom: var(--spacing-4);
|
|
}
|
|
.pv5 {
|
|
padding-top: var(--spacing-5);
|
|
padding-bottom: var(--spacing-5);
|
|
}
|
|
.pv6 {
|
|
padding-top: var(--spacing-6);
|
|
padding-bottom: var(--spacing-6);
|
|
}
|
|
|
|
.pv7 {
|
|
padding-top: var(--spacing-7);
|
|
padding-bottom: var(--spacing-7);
|
|
}
|
|
|
|
.ph0 {
|
|
padding-left: var(--spacing-0);
|
|
padding-right: var(--spacing-0);
|
|
}
|
|
|
|
.ph1 {
|
|
padding-left: var(--spacing-1);
|
|
padding-right: var(--spacing-1);
|
|
}
|
|
|
|
.ph2 {
|
|
padding-left: var(--spacing-2);
|
|
padding-right: var(--spacing-2);
|
|
}
|
|
|
|
.ph3 {
|
|
padding-left: var(--spacing-3);
|
|
padding-right: var(--spacing-3);
|
|
}
|
|
|
|
.ph4 {
|
|
padding-left: var(--spacing-4);
|
|
padding-right: var(--spacing-4);
|
|
}
|
|
|
|
.ph5 {
|
|
padding-left: var(--spacing-5);
|
|
padding-right: var(--spacing-5);
|
|
}
|
|
|
|
.ph6 {
|
|
padding-left: var(--spacing-6);
|
|
padding-right: var(--spacing-6);
|
|
}
|
|
|
|
.ph7 {
|
|
padding-left: var(--spacing-7);
|
|
padding-right: var(--spacing-7);
|
|
}
|
|
|
|
.mt-auto { margin-top: auto; }
|
|
.mr-auto { margin-right: auto; }
|
|
.mb-auto { margin-bottom: auto; }
|
|
.ml-auto { margin-left: auto; }
|
|
|
|
.m0 { margin: var(--spacing-0); }
|
|
.m1 { margin: var(--spacing-1); }
|
|
.m2 { margin: var(--spacing-2); }
|
|
.m3 { margin: var(--spacing-3); }
|
|
.m4 { margin: var(--spacing-4); }
|
|
.m5 { margin: var(--spacing-5); }
|
|
.m6 { margin: var(--spacing-6); }
|
|
.m7 { margin: var(--spacing-7); }
|
|
|
|
.ml0 { margin-left: var(--spacing-0); }
|
|
.ml1 { margin-left: var(--spacing-1); }
|
|
.ml2 { margin-left: var(--spacing-2); }
|
|
.ml3 { margin-left: var(--spacing-3); }
|
|
.ml4 { margin-left: var(--spacing-4); }
|
|
.ml5 { margin-left: var(--spacing-5); }
|
|
.ml6 { margin-left: var(--spacing-6); }
|
|
.ml7 { margin-left: var(--spacing-7); }
|
|
|
|
.mr0 { margin-right: var(--spacing-0); }
|
|
.mr1 { margin-right: var(--spacing-1); }
|
|
.mr2 { margin-right: var(--spacing-2); }
|
|
.mr3 { margin-right: var(--spacing-3); }
|
|
.mr4 { margin-right: var(--spacing-4); }
|
|
.mr5 { margin-right: var(--spacing-5); }
|
|
.mr6 { margin-right: var(--spacing-6); }
|
|
.mr7 { margin-right: var(--spacing-7); }
|
|
|
|
.mb0 { margin-bottom: var(--spacing-0); }
|
|
.mb1 { margin-bottom: var(--spacing-1); }
|
|
.mb2 { margin-bottom: var(--spacing-2); }
|
|
.mb3 { margin-bottom: var(--spacing-3); }
|
|
.mb4 { margin-bottom: var(--spacing-4); }
|
|
.mb5 { margin-bottom: var(--spacing-5); }
|
|
.mb6 { margin-bottom: var(--spacing-6); }
|
|
.mb7 { margin-bottom: var(--spacing-7); }
|
|
|
|
.mt0 { margin-top: var(--spacing-0); }
|
|
.mt1 { margin-top: var(--spacing-1); }
|
|
.mt2 { margin-top: var(--spacing-2); }
|
|
.mt3 { margin-top: var(--spacing-3); }
|
|
.mt4 { margin-top: var(--spacing-4); }
|
|
.mt5 { margin-top: var(--spacing-5); }
|
|
.mt6 { margin-top: var(--spacing-6); }
|
|
.mt7 { margin-top: var(--spacing-7); }
|
|
|
|
.mv0 {
|
|
margin-top: var(--spacing-0);
|
|
margin-bottom: var(--spacing-0);
|
|
}
|
|
.mv1 {
|
|
margin-top: var(--spacing-1);
|
|
margin-bottom: var(--spacing-1);
|
|
}
|
|
.mv2 {
|
|
margin-top: var(--spacing-2);
|
|
margin-bottom: var(--spacing-2);
|
|
}
|
|
.mv3 {
|
|
margin-top: var(--spacing-3);
|
|
margin-bottom: var(--spacing-3);
|
|
}
|
|
.mv4 {
|
|
margin-top: var(--spacing-4);
|
|
margin-bottom: var(--spacing-4);
|
|
}
|
|
.mv5 {
|
|
margin-top: var(--spacing-5);
|
|
margin-bottom: var(--spacing-5);
|
|
}
|
|
.mv6 {
|
|
margin-top: var(--spacing-6);
|
|
margin-bottom: var(--spacing-6);
|
|
}
|
|
.mv7 {
|
|
margin-top: var(--spacing-7);
|
|
margin-bottom: var(--spacing-7);
|
|
}
|
|
|
|
.mh0 {
|
|
margin-left: var(--spacing-0);
|
|
margin-right: var(--spacing-0);
|
|
}
|
|
.mh1 {
|
|
margin-left: var(--spacing-1);
|
|
margin-right: var(--spacing-1);
|
|
}
|
|
.mh2 {
|
|
margin-left: var(--spacing-2);
|
|
margin-right: var(--spacing-2);
|
|
}
|
|
.mh3 {
|
|
margin-left: var(--spacing-3);
|
|
margin-right: var(--spacing-3);
|
|
}
|
|
.mh4 {
|
|
margin-left: var(--spacing-4);
|
|
margin-right: var(--spacing-4);
|
|
}
|
|
.mh5 {
|
|
margin-left: var(--spacing-5);
|
|
margin-right: var(--spacing-5);
|
|
}
|
|
.mh6 {
|
|
margin-left: var(--spacing-6);
|
|
margin-right: var(--spacing-6);
|
|
}
|
|
.mh7 {
|
|
margin-left: var(--spacing-7);
|
|
margin-right: var(--spacing-7);
|
|
}
|
|
|
|
|
|
@media (--breakpoint-small) {
|
|
.p0-s { padding: var(--spacing-0); }
|
|
.p1-s { padding: var(--spacing-1); }
|
|
.p2-s { padding: var(--spacing-2); }
|
|
.p3-s { padding: var(--spacing-3); }
|
|
.p4-s { padding: var(--spacing-4); }
|
|
.p5-s { padding: var(--spacing-5); }
|
|
.p6-s { padding: var(--spacing-6); }
|
|
.p7-s { padding: var(--spacing-7); }
|
|
|
|
.pl0-s { padding-left: var(--spacing-0); }
|
|
.pl1-s { padding-left: var(--spacing-1); }
|
|
.pl2-s { padding-left: var(--spacing-2); }
|
|
.pl3-s { padding-left: var(--spacing-3); }
|
|
.pl4-s { padding-left: var(--spacing-4); }
|
|
.pl5-s { padding-left: var(--spacing-5); }
|
|
.pl6-s { padding-left: var(--spacing-6); }
|
|
.pl7-s { padding-left: var(--spacing-7); }
|
|
|
|
.pr0-s { padding-right: var(--spacing-0); }
|
|
.pr1-s { padding-right: var(--spacing-1); }
|
|
.pr2-s { padding-right: var(--spacing-2); }
|
|
.pr3-s { padding-right: var(--spacing-3); }
|
|
.pr4-s { padding-right: var(--spacing-4); }
|
|
.pr5-s { padding-right: var(--spacing-5); }
|
|
.pr6-s { padding-right: var(--spacing-6); }
|
|
.pr7-s { padding-right: var(--spacing-7); }
|
|
|
|
.pb0-s { padding-bottom: var(--spacing-0); }
|
|
.pb1-s { padding-bottom: var(--spacing-1); }
|
|
.pb2-s { padding-bottom: var(--spacing-2); }
|
|
.pb3-s { padding-bottom: var(--spacing-3); }
|
|
.pb4-s { padding-bottom: var(--spacing-4); }
|
|
.pb5-s { padding-bottom: var(--spacing-5); }
|
|
.pb6-s { padding-bottom: var(--spacing-6); }
|
|
.pb7-s { padding-bottom: var(--spacing-7); }
|
|
|
|
.pt0-s { padding-top: var(--spacing-0); }
|
|
.pt1-s { padding-top: var(--spacing-1); }
|
|
.pt2-s { padding-top: var(--spacing-2); }
|
|
.pt3-s { padding-top: var(--spacing-3); }
|
|
.pt4-s { padding-top: var(--spacing-4); }
|
|
.pt5-s { padding-top: var(--spacing-5); }
|
|
.pt6-s { padding-top: var(--spacing-6); }
|
|
.pt7-s { padding-top: var(--spacing-7); }
|
|
|
|
.pv0-s {
|
|
padding-top: var(--spacing-0);
|
|
padding-bottom: var(--spacing-0);
|
|
}
|
|
.pv1-s {
|
|
padding-top: var(--spacing-1);
|
|
padding-bottom: var(--spacing-1);
|
|
}
|
|
.pv2-s {
|
|
padding-top: var(--spacing-2);
|
|
padding-bottom: var(--spacing-2);
|
|
}
|
|
.pv3-s {
|
|
padding-top: var(--spacing-3);
|
|
padding-bottom: var(--spacing-3);
|
|
}
|
|
.pv4-s {
|
|
padding-top: var(--spacing-4);
|
|
padding-bottom: var(--spacing-4);
|
|
}
|
|
.pv5-s {
|
|
padding-top: var(--spacing-5);
|
|
padding-bottom: var(--spacing-5);
|
|
}
|
|
.pv6-s {
|
|
padding-top: var(--spacing-6);
|
|
padding-bottom: var(--spacing-6);
|
|
}
|
|
.pv7-s {
|
|
padding-top: var(--spacing-7);
|
|
padding-bottom: var(--spacing-7);
|
|
}
|
|
|
|
.ph0-s {
|
|
padding-left: var(--spacing-0);
|
|
padding-right: var(--spacing-0);
|
|
}
|
|
.ph1-s {
|
|
padding-left: var(--spacing-1);
|
|
padding-right: var(--spacing-1);
|
|
}
|
|
.ph2-s {
|
|
padding-left: var(--spacing-2);
|
|
padding-right: var(--spacing-2);
|
|
}
|
|
.ph3-s {
|
|
padding-left: var(--spacing-3);
|
|
padding-right: var(--spacing-3);
|
|
}
|
|
.ph4-s {
|
|
padding-left: var(--spacing-4);
|
|
padding-right: var(--spacing-4);
|
|
}
|
|
.ph5-s {
|
|
padding-left: var(--spacing-5);
|
|
padding-right: var(--spacing-5);
|
|
}
|
|
.ph6-s {
|
|
padding-left: var(--spacing-6);
|
|
padding-right: var(--spacing-6);
|
|
}
|
|
.ph7-s {
|
|
padding-left: var(--spacing-7);
|
|
padding-right: var(--spacing-7);
|
|
}
|
|
|
|
.mt-auto-s { margin-top: auto; }
|
|
.mr-auto-s { margin-right: auto; }
|
|
.mb-auto-s { margin-bottom: auto; }
|
|
.ml-auto-s { margin-left: auto; }
|
|
|
|
.m0-s { margin: var(--spacing-0); }
|
|
.m1-s { margin: var(--spacing-1); }
|
|
.m2-s { margin: var(--spacing-2); }
|
|
.m3-s { margin: var(--spacing-3); }
|
|
.m4-s { margin: var(--spacing-4); }
|
|
.m5-s { margin: var(--spacing-5); }
|
|
.m6-s { margin: var(--spacing-6); }
|
|
.m7-s { margin: var(--spacing-7); }
|
|
|
|
.ml0-s { margin-left: var(--spacing-0); }
|
|
.ml1-s { margin-left: var(--spacing-1); }
|
|
.ml2-s { margin-left: var(--spacing-2); }
|
|
.ml3-s { margin-left: var(--spacing-3); }
|
|
.ml4-s { margin-left: var(--spacing-4); }
|
|
.ml5-s { margin-left: var(--spacing-5); }
|
|
.ml6-s { margin-left: var(--spacing-6); }
|
|
.ml7-s { margin-left: var(--spacing-7); }
|
|
|
|
.mr0-s { margin-right: var(--spacing-0); }
|
|
.mr1-s { margin-right: var(--spacing-1); }
|
|
.mr2-s { margin-right: var(--spacing-2); }
|
|
.mr3-s { margin-right: var(--spacing-3); }
|
|
.mr4-s { margin-right: var(--spacing-4); }
|
|
.mr5-s { margin-right: var(--spacing-5); }
|
|
.mr6-s { margin-right: var(--spacing-6); }
|
|
.mr7-s { margin-right: var(--spacing-7); }
|
|
|
|
.mb0-s { margin-bottom: var(--spacing-0); }
|
|
.mb1-s { margin-bottom: var(--spacing-1); }
|
|
.mb2-s { margin-bottom: var(--spacing-2); }
|
|
.mb3-s { margin-bottom: var(--spacing-3); }
|
|
.mb4-s { margin-bottom: var(--spacing-4); }
|
|
.mb5-s { margin-bottom: var(--spacing-5); }
|
|
.mb6-s { margin-bottom: var(--spacing-6); }
|
|
.mb7-s { margin-bottom: var(--spacing-7); }
|
|
|
|
.mt0-s { margin-top: var(--spacing-0); }
|
|
.mt1-s { margin-top: var(--spacing-1); }
|
|
.mt2-s { margin-top: var(--spacing-2); }
|
|
.mt3-s { margin-top: var(--spacing-3); }
|
|
.mt4-s { margin-top: var(--spacing-4); }
|
|
.mt5-s { margin-top: var(--spacing-5); }
|
|
.mt6-s { margin-top: var(--spacing-6); }
|
|
.mt7-s { margin-top: var(--spacing-7); }
|
|
|
|
.mv0-s {
|
|
margin-top: var(--spacing-0);
|
|
margin-bottom: var(--spacing-0);
|
|
}
|
|
.mv1-s {
|
|
margin-top: var(--spacing-1);
|
|
margin-bottom: var(--spacing-1);
|
|
}
|
|
.mv2-s {
|
|
margin-top: var(--spacing-2);
|
|
margin-bottom: var(--spacing-2);
|
|
}
|
|
.mv3-s {
|
|
margin-top: var(--spacing-3);
|
|
margin-bottom: var(--spacing-3);
|
|
}
|
|
.mv4-s {
|
|
margin-top: var(--spacing-4);
|
|
margin-bottom: var(--spacing-4);
|
|
}
|
|
.mv5-s {
|
|
margin-top: var(--spacing-5);
|
|
margin-bottom: var(--spacing-5);
|
|
}
|
|
.mv6-s {
|
|
margin-top: var(--spacing-6);
|
|
margin-bottom: var(--spacing-6);
|
|
}
|
|
.mv7-s {
|
|
margin-top: var(--spacing-7);
|
|
margin-bottom: var(--spacing-7);
|
|
}
|
|
|
|
.mh0-s {
|
|
margin-left: var(--spacing-0);
|
|
margin-right: var(--spacing-0);
|
|
}
|
|
.mh1-s {
|
|
margin-left: var(--spacing-1);
|
|
margin-right: var(--spacing-1);
|
|
}
|
|
.mh2-s {
|
|
margin-left: var(--spacing-2);
|
|
margin-right: var(--spacing-2);
|
|
}
|
|
.mh3-s {
|
|
margin-left: var(--spacing-3);
|
|
margin-right: var(--spacing-3);
|
|
}
|
|
.mh4-s {
|
|
margin-left: var(--spacing-4);
|
|
margin-right: var(--spacing-4);
|
|
}
|
|
.mh5-s {
|
|
margin-left: var(--spacing-5);
|
|
margin-right: var(--spacing-5);
|
|
}
|
|
.mh6-s {
|
|
margin-left: var(--spacing-6);
|
|
margin-right: var(--spacing-6);
|
|
}
|
|
.mh7-s {
|
|
margin-left: var(--spacing-7);
|
|
margin-right: var(--spacing-7);
|
|
}
|
|
}
|
|
|
|
@media (--breakpoint-medium) {
|
|
.p0-m { padding: var(--spacing-0); }
|
|
.p1-m { padding: var(--spacing-1); }
|
|
.p2-m { padding: var(--spacing-2); }
|
|
.p3-m { padding: var(--spacing-3); }
|
|
.p4-m { padding: var(--spacing-4); }
|
|
.p5-m { padding: var(--spacing-5); }
|
|
.p6-m { padding: var(--spacing-6); }
|
|
.p7-m { padding: var(--spacing-7); }
|
|
|
|
.pl0-m { padding-left: var(--spacing-0); }
|
|
.pl1-m { padding-left: var(--spacing-1); }
|
|
.pl2-m { padding-left: var(--spacing-2); }
|
|
.pl3-m { padding-left: var(--spacing-3); }
|
|
.pl4-m { padding-left: var(--spacing-4); }
|
|
.pl5-m { padding-left: var(--spacing-5); }
|
|
.pl6-m { padding-left: var(--spacing-6); }
|
|
.pl7-m { padding-left: var(--spacing-7); }
|
|
|
|
.pr0-m { padding-right: var(--spacing-0); }
|
|
.pr1-m { padding-right: var(--spacing-1); }
|
|
.pr2-m { padding-right: var(--spacing-2); }
|
|
.pr3-m { padding-right: var(--spacing-3); }
|
|
.pr4-m { padding-right: var(--spacing-4); }
|
|
.pr5-m { padding-right: var(--spacing-5); }
|
|
.pr6-m { padding-right: var(--spacing-6); }
|
|
.pr7-m { padding-right: var(--spacing-7); }
|
|
|
|
.pb0-m { padding-bottom: var(--spacing-0); }
|
|
.pb1-m { padding-bottom: var(--spacing-1); }
|
|
.pb2-m { padding-bottom: var(--spacing-2); }
|
|
.pb3-m { padding-bottom: var(--spacing-3); }
|
|
.pb4-m { padding-bottom: var(--spacing-4); }
|
|
.pb5-m { padding-bottom: var(--spacing-5); }
|
|
.pb6-m { padding-bottom: var(--spacing-6); }
|
|
.pb7-m { padding-bottom: var(--spacing-7); }
|
|
|
|
.pt0-m { padding-top: var(--spacing-0); }
|
|
.pt1-m { padding-top: var(--spacing-1); }
|
|
.pt2-m { padding-top: var(--spacing-2); }
|
|
.pt3-m { padding-top: var(--spacing-3); }
|
|
.pt4-m { padding-top: var(--spacing-4); }
|
|
.pt5-m { padding-top: var(--spacing-5); }
|
|
.pt6-m { padding-top: var(--spacing-6); }
|
|
.pt7-m { padding-top: var(--spacing-7); }
|
|
|
|
.pv0-m {
|
|
padding-top: var(--spacing-0);
|
|
padding-bottom: var(--spacing-0);
|
|
}
|
|
.pv1-m {
|
|
padding-top: var(--spacing-1);
|
|
padding-bottom: var(--spacing-1);
|
|
}
|
|
.pv2-m {
|
|
padding-top: var(--spacing-2);
|
|
padding-bottom: var(--spacing-2);
|
|
}
|
|
.pv3-m {
|
|
padding-top: var(--spacing-3);
|
|
padding-bottom: var(--spacing-3);
|
|
}
|
|
.pv4-m {
|
|
padding-top: var(--spacing-4);
|
|
padding-bottom: var(--spacing-4);
|
|
}
|
|
.pv5-m {
|
|
padding-top: var(--spacing-5);
|
|
padding-bottom: var(--spacing-5);
|
|
}
|
|
.pv6-m {
|
|
padding-top: var(--spacing-6);
|
|
padding-bottom: var(--spacing-6);
|
|
}
|
|
.pv7-m {
|
|
padding-top: var(--spacing-7);
|
|
padding-bottom: var(--spacing-7);
|
|
}
|
|
|
|
.ph0-m {
|
|
padding-left: var(--spacing-0);
|
|
padding-right: var(--spacing-0);
|
|
}
|
|
.ph1-m {
|
|
padding-left: var(--spacing-1);
|
|
padding-right: var(--spacing-1);
|
|
}
|
|
.ph2-m {
|
|
padding-left: var(--spacing-2);
|
|
padding-right: var(--spacing-2);
|
|
}
|
|
.ph3-m {
|
|
padding-left: var(--spacing-3);
|
|
padding-right: var(--spacing-3);
|
|
}
|
|
.ph4-m {
|
|
padding-left: var(--spacing-4);
|
|
padding-right: var(--spacing-4);
|
|
}
|
|
.ph5-m {
|
|
padding-left: var(--spacing-5);
|
|
padding-right: var(--spacing-5);
|
|
}
|
|
.ph6-m {
|
|
padding-left: var(--spacing-6);
|
|
padding-right: var(--spacing-6);
|
|
}
|
|
.ph7-m {
|
|
padding-left: var(--spacing-7);
|
|
padding-right: var(--spacing-7);
|
|
}
|
|
|
|
.mt-auto-m { margin-top: auto; }
|
|
.mr-auto-m { margin-right: auto; }
|
|
.mb-auto-m { margin-bottom: auto; }
|
|
.ml-auto-m { margin-left: auto; }
|
|
|
|
.m0-m { margin: var(--spacing-0); }
|
|
.m1-m { margin: var(--spacing-1); }
|
|
.m2-m { margin: var(--spacing-2); }
|
|
.m3-m { margin: var(--spacing-3); }
|
|
.m4-m { margin: var(--spacing-4); }
|
|
.m5-m { margin: var(--spacing-5); }
|
|
.m6-m { margin: var(--spacing-6); }
|
|
.m7-m { margin: var(--spacing-7); }
|
|
|
|
.ml0-m { margin-left: var(--spacing-0); }
|
|
.ml1-m { margin-left: var(--spacing-1); }
|
|
.ml2-m { margin-left: var(--spacing-2); }
|
|
.ml3-m { margin-left: var(--spacing-3); }
|
|
.ml4-m { margin-left: var(--spacing-4); }
|
|
.ml5-m { margin-left: var(--spacing-5); }
|
|
.ml6-m { margin-left: var(--spacing-6); }
|
|
.ml7-m { margin-left: var(--spacing-7); }
|
|
|
|
.mr0-m { margin-right: var(--spacing-0); }
|
|
.mr1-m { margin-right: var(--spacing-1); }
|
|
.mr2-m { margin-right: var(--spacing-2); }
|
|
.mr3-m { margin-right: var(--spacing-3); }
|
|
.mr4-m { margin-right: var(--spacing-4); }
|
|
.mr5-m { margin-right: var(--spacing-5); }
|
|
.mr6-m { margin-right: var(--spacing-6); }
|
|
.mr7-m { margin-right: var(--spacing-7); }
|
|
|
|
.mb0-m { margin-bottom: var(--spacing-0); }
|
|
.mb1-m { margin-bottom: var(--spacing-1); }
|
|
.mb2-m { margin-bottom: var(--spacing-2); }
|
|
.mb3-m { margin-bottom: var(--spacing-3); }
|
|
.mb4-m { margin-bottom: var(--spacing-4); }
|
|
.mb5-m { margin-bottom: var(--spacing-5); }
|
|
.mb6-m { margin-bottom: var(--spacing-6); }
|
|
.mb7-m { margin-bottom: var(--spacing-7); }
|
|
|
|
.mt0-m { margin-top: var(--spacing-0); }
|
|
.mt1-m { margin-top: var(--spacing-1); }
|
|
.mt2-m { margin-top: var(--spacing-2); }
|
|
.mt3-m { margin-top: var(--spacing-3); }
|
|
.mt4-m { margin-top: var(--spacing-4); }
|
|
.mt5-m { margin-top: var(--spacing-5); }
|
|
.mt6-m { margin-top: var(--spacing-6); }
|
|
.mt7-m { margin-top: var(--spacing-7); }
|
|
|
|
.mv0-m {
|
|
margin-top: var(--spacing-0);
|
|
margin-bottom: var(--spacing-0);
|
|
}
|
|
.mv1-m {
|
|
margin-top: var(--spacing-1);
|
|
margin-bottom: var(--spacing-1);
|
|
}
|
|
.mv2-m {
|
|
margin-top: var(--spacing-2);
|
|
margin-bottom: var(--spacing-2);
|
|
}
|
|
.mv3-m {
|
|
margin-top: var(--spacing-3);
|
|
margin-bottom: var(--spacing-3);
|
|
}
|
|
.mv4-m {
|
|
margin-top: var(--spacing-4);
|
|
margin-bottom: var(--spacing-4);
|
|
}
|
|
.mv5-m {
|
|
margin-top: var(--spacing-5);
|
|
margin-bottom: var(--spacing-5);
|
|
}
|
|
.mv6-m {
|
|
margin-top: var(--spacing-6);
|
|
margin-bottom: var(--spacing-6);
|
|
}
|
|
.mv7-m {
|
|
margin-top: var(--spacing-7);
|
|
margin-bottom: var(--spacing-7);
|
|
}
|
|
|
|
.mh0-m {
|
|
margin-left: var(--spacing-0);
|
|
margin-right: var(--spacing-0);
|
|
}
|
|
.mh1-m {
|
|
margin-left: var(--spacing-1);
|
|
margin-right: var(--spacing-1);
|
|
}
|
|
.mh2-m {
|
|
margin-left: var(--spacing-2);
|
|
margin-right: var(--spacing-2);
|
|
}
|
|
.mh3-m {
|
|
margin-left: var(--spacing-3);
|
|
margin-right: var(--spacing-3);
|
|
}
|
|
.mh4-m {
|
|
margin-left: var(--spacing-4);
|
|
margin-right: var(--spacing-4);
|
|
}
|
|
.mh5-m {
|
|
margin-left: var(--spacing-5);
|
|
margin-right: var(--spacing-5);
|
|
}
|
|
.mh6-m {
|
|
margin-left: var(--spacing-6);
|
|
margin-right: var(--spacing-6);
|
|
}
|
|
.mh7-m {
|
|
margin-left: var(--spacing-7);
|
|
margin-right: var(--spacing-7);
|
|
}
|
|
}
|
|
|
|
@media (--breakpoint-large) {
|
|
.p0-l { padding: var(--spacing-0); }
|
|
.p1-l { padding: var(--spacing-1); }
|
|
.p2-l { padding: var(--spacing-2); }
|
|
.p3-l { padding: var(--spacing-3); }
|
|
.p4-l { padding: var(--spacing-4); }
|
|
.p5-l { padding: var(--spacing-5); }
|
|
.p6-l { padding: var(--spacing-6); }
|
|
.p7-l { padding: var(--spacing-7); }
|
|
|
|
.pl0-l { padding-left: var(--spacing-0); }
|
|
.pl1-l { padding-left: var(--spacing-1); }
|
|
.pl2-l { padding-left: var(--spacing-2); }
|
|
.pl3-l { padding-left: var(--spacing-3); }
|
|
.pl4-l { padding-left: var(--spacing-4); }
|
|
.pl5-l { padding-left: var(--spacing-5); }
|
|
.pl6-l { padding-left: var(--spacing-6); }
|
|
.pl7-l { padding-left: var(--spacing-7); }
|
|
|
|
.pr0-l { padding-right: var(--spacing-0); }
|
|
.pr1-l { padding-right: var(--spacing-1); }
|
|
.pr2-l { padding-right: var(--spacing-2); }
|
|
.pr3-l { padding-right: var(--spacing-3); }
|
|
.pr4-l { padding-right: var(--spacing-4); }
|
|
.pr5-l { padding-right: var(--spacing-5); }
|
|
.pr6-l { padding-right: var(--spacing-6); }
|
|
.pr7-l { padding-right: var(--spacing-7); }
|
|
|
|
.pb0-l { padding-bottom: var(--spacing-0); }
|
|
.pb1-l { padding-bottom: var(--spacing-1); }
|
|
.pb2-l { padding-bottom: var(--spacing-2); }
|
|
.pb3-l { padding-bottom: var(--spacing-3); }
|
|
.pb4-l { padding-bottom: var(--spacing-4); }
|
|
.pb5-l { padding-bottom: var(--spacing-5); }
|
|
.pb6-l { padding-bottom: var(--spacing-6); }
|
|
.pb7-l { padding-bottom: var(--spacing-7); }
|
|
|
|
.pt0-l { padding-top: var(--spacing-0); }
|
|
.pt1-l { padding-top: var(--spacing-1); }
|
|
.pt2-l { padding-top: var(--spacing-2); }
|
|
.pt3-l { padding-top: var(--spacing-3); }
|
|
.pt4-l { padding-top: var(--spacing-4); }
|
|
.pt5-l { padding-top: var(--spacing-5); }
|
|
.pt6-l { padding-top: var(--spacing-6); }
|
|
.pt7-l { padding-top: var(--spacing-7); }
|
|
|
|
.pv0-l {
|
|
padding-top: var(--spacing-0);
|
|
padding-bottom: var(--spacing-0);
|
|
}
|
|
.pv1-l {
|
|
padding-top: var(--spacing-1);
|
|
padding-bottom: var(--spacing-1);
|
|
}
|
|
.pv2-l {
|
|
padding-top: var(--spacing-2);
|
|
padding-bottom: var(--spacing-2);
|
|
}
|
|
.pv3-l {
|
|
padding-top: var(--spacing-3);
|
|
padding-bottom: var(--spacing-3);
|
|
}
|
|
.pv4-l {
|
|
padding-top: var(--spacing-4);
|
|
padding-bottom: var(--spacing-4);
|
|
}
|
|
.pv5-l {
|
|
padding-top: var(--spacing-5);
|
|
padding-bottom: var(--spacing-5);
|
|
}
|
|
.pv6-l {
|
|
padding-top: var(--spacing-6);
|
|
padding-bottom: var(--spacing-6);
|
|
}
|
|
.pv7-l {
|
|
padding-top: var(--spacing-7);
|
|
padding-bottom: var(--spacing-7);
|
|
}
|
|
|
|
.ph0-l {
|
|
padding-left: var(--spacing-0);
|
|
padding-right: var(--spacing-0);
|
|
}
|
|
.ph1-l {
|
|
padding-left: var(--spacing-1);
|
|
padding-right: var(--spacing-1);
|
|
}
|
|
.ph2-l {
|
|
padding-left: var(--spacing-2);
|
|
padding-right: var(--spacing-2);
|
|
}
|
|
.ph3-l {
|
|
padding-left: var(--spacing-3);
|
|
padding-right: var(--spacing-3);
|
|
}
|
|
.ph4-l {
|
|
padding-left: var(--spacing-4);
|
|
padding-right: var(--spacing-4);
|
|
}
|
|
.ph5-l {
|
|
padding-left: var(--spacing-5);
|
|
padding-right: var(--spacing-5);
|
|
}
|
|
.ph6-l {
|
|
padding-left: var(--spacing-6);
|
|
padding-right: var(--spacing-6);
|
|
}
|
|
.ph7-l {
|
|
padding-left: var(--spacing-7);
|
|
padding-right: var(--spacing-7);
|
|
}
|
|
|
|
.mt-auto-l { margin-top: auto; }
|
|
.mr-auto-l { margin-right: auto; }
|
|
.mb-auto-l { margin-bottom: auto; }
|
|
.ml-auto-l { margin-left: auto; }
|
|
|
|
.m0-l { margin: var(--spacing-0); }
|
|
.m1-l { margin: var(--spacing-1); }
|
|
.m2-l { margin: var(--spacing-2); }
|
|
.m3-l { margin: var(--spacing-3); }
|
|
.m4-l { margin: var(--spacing-4); }
|
|
.m5-l { margin: var(--spacing-5); }
|
|
.m6-l { margin: var(--spacing-6); }
|
|
.m7-l { margin: var(--spacing-7); }
|
|
|
|
.ml0-l { margin-left: var(--spacing-0); }
|
|
.ml1-l { margin-left: var(--spacing-1); }
|
|
.ml2-l { margin-left: var(--spacing-2); }
|
|
.ml3-l { margin-left: var(--spacing-3); }
|
|
.ml4-l { margin-left: var(--spacing-4); }
|
|
.ml5-l { margin-left: var(--spacing-5); }
|
|
.ml6-l { margin-left: var(--spacing-6); }
|
|
.ml7-l { margin-left: var(--spacing-7); }
|
|
|
|
.mr0-l { margin-right: var(--spacing-0); }
|
|
.mr1-l { margin-right: var(--spacing-1); }
|
|
.mr2-l { margin-right: var(--spacing-2); }
|
|
.mr3-l { margin-right: var(--spacing-3); }
|
|
.mr4-l { margin-right: var(--spacing-4); }
|
|
.mr5-l { margin-right: var(--spacing-5); }
|
|
.mr6-l { margin-right: var(--spacing-6); }
|
|
.mr7-l { margin-right: var(--spacing-7); }
|
|
|
|
.mb0-l { margin-bottom: var(--spacing-0); }
|
|
.mb1-l { margin-bottom: var(--spacing-1); }
|
|
.mb2-l { margin-bottom: var(--spacing-2); }
|
|
.mb3-l { margin-bottom: var(--spacing-3); }
|
|
.mb4-l { margin-bottom: var(--spacing-4); }
|
|
.mb5-l { margin-bottom: var(--spacing-5); }
|
|
.mb6-l { margin-bottom: var(--spacing-6); }
|
|
.mb7-l { margin-bottom: var(--spacing-7); }
|
|
|
|
.mt0-l { margin-top: var(--spacing-0); }
|
|
.mt1-l { margin-top: var(--spacing-1); }
|
|
.mt2-l { margin-top: var(--spacing-2); }
|
|
.mt3-l { margin-top: var(--spacing-3); }
|
|
.mt4-l { margin-top: var(--spacing-4); }
|
|
.mt5-l { margin-top: var(--spacing-5); }
|
|
.mt6-l { margin-top: var(--spacing-6); }
|
|
.mt7-l { margin-top: var(--spacing-7); }
|
|
|
|
.mv0-l {
|
|
margin-top: var(--spacing-0);
|
|
margin-bottom: var(--spacing-0);
|
|
}
|
|
.mv1-l {
|
|
margin-top: var(--spacing-1);
|
|
margin-bottom: var(--spacing-1);
|
|
}
|
|
.mv2-l {
|
|
margin-top: var(--spacing-2);
|
|
margin-bottom: var(--spacing-2);
|
|
}
|
|
.mv3-l {
|
|
margin-top: var(--spacing-3);
|
|
margin-bottom: var(--spacing-3);
|
|
}
|
|
.mv4-l {
|
|
margin-top: var(--spacing-4);
|
|
margin-bottom: var(--spacing-4);
|
|
}
|
|
.mv5-l {
|
|
margin-top: var(--spacing-5);
|
|
margin-bottom: var(--spacing-5);
|
|
}
|
|
.mv6-l {
|
|
margin-top: var(--spacing-6);
|
|
margin-bottom: var(--spacing-6);
|
|
}
|
|
.mv7-l {
|
|
margin-top: var(--spacing-7);
|
|
margin-bottom: var(--spacing-7);
|
|
}
|
|
|
|
.mh0-l {
|
|
margin-left: var(--spacing-0);
|
|
margin-right: var(--spacing-0);
|
|
}
|
|
.mh1-l {
|
|
margin-left: var(--spacing-1);
|
|
margin-right: var(--spacing-1);
|
|
}
|
|
.mh2-l {
|
|
margin-left: var(--spacing-2);
|
|
margin-right: var(--spacing-2);
|
|
}
|
|
.mh3-l {
|
|
margin-left: var(--spacing-3);
|
|
margin-right: var(--spacing-3);
|
|
}
|
|
.mh4-l {
|
|
margin-left: var(--spacing-4);
|
|
margin-right: var(--spacing-4);
|
|
}
|
|
.mh5-l {
|
|
margin-left: var(--spacing-5);
|
|
margin-right: var(--spacing-5);
|
|
}
|
|
.mh6-l {
|
|
margin-left: var(--spacing-6);
|
|
margin-right: var(--spacing-6);
|
|
}
|
|
.mh7-l {
|
|
margin-left: var(--spacing-7);
|
|
margin-right: var(--spacing-7);
|
|
}
|
|
}
|