Something went wrong. Try again.
[READ-ONLY] Mirror of https://github.com/lowmess/tachyons-print. Functional CSS for humans (and printers). www.npmjs.com/package/tachyons-print
tachyons tachyons-css
Something went wrong. Try again.
8.7 kB · 269 lines
CSS
at master
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270/* Variables */
/* Spacing Scale - based on a ratio of 1:2 */:root { --spacing-none: 0; --spacing-extra-small: .25rem; --spacing-small: .5rem; --spacing-medium: 1rem; --spacing-large: 2rem; --spacing-extra-large: 4rem; --spacing-extra-extra-large: 8rem; --spacing-extra-extra-extra-large: 16rem;}
/* SPACING
An eight step powers of two scale ranging from 0 to 16rem. Namespaces are composable and thus highly grockable - check the legend below
Legend:
p = padding m = margin
a = all 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: -p = print
*/
@media print { .pa0-p { padding: var(--spacing-none); } .pa1-p { padding: var(--spacing-extra-small); } .pa2-p { padding: var(--spacing-small); } .pa3-p { padding: var(--spacing-medium); } .pa4-p { padding: var(--spacing-large); } .pa5-p { padding: var(--spacing-extra-large); } .pa6-p { padding: var(--spacing-extra-extra-large); } .pa7-p { padding: var(--spacing-extra-extra-extra-large); }
.pl0-p { padding-left: var(--spacing-none); } .pl1-p { padding-left: var(--spacing-extra-small); } .pl2-p { padding-left: var(--spacing-small); } .pl3-p { padding-left: var(--spacing-medium); } .pl4-p { padding-left: var(--spacing-large); } .pl5-p { padding-left: var(--spacing-extra-large); } .pl6-p { padding-left: var(--spacing-extra-extra-large); } .pl7-p { padding-left: var(--spacing-extra-extra-extra-large); }
.pr0-p { padding-right: var(--spacing-none); } .pr1-p { padding-right: var(--spacing-extra-small); } .pr2-p { padding-right: var(--spacing-small); } .pr3-p { padding-right: var(--spacing-medium); } .pr4-p { padding-right: var(--spacing-large); } .pr5-p { padding-right: var(--spacing-extra-large); } .pr6-p { padding-right: var(--spacing-extra-extra-large); } .pr7-p { padding-right: var(--spacing-extra-extra-extra-large); }
.pb0-p { padding-bottom: var(--spacing-none); } .pb1-p { padding-bottom: var(--spacing-extra-small); } .pb2-p { padding-bottom: var(--spacing-small); } .pb3-p { padding-bottom: var(--spacing-medium); } .pb4-p { padding-bottom: var(--spacing-large); } .pb5-p { padding-bottom: var(--spacing-extra-large); } .pb6-p { padding-bottom: var(--spacing-extra-extra-large); } .pb7-p { padding-bottom: var(--spacing-extra-extra-extra-large); }
.pt0-p { padding-top: var(--spacing-none); } .pt1-p { padding-top: var(--spacing-extra-small); } .pt2-p { padding-top: var(--spacing-small); } .pt3-p { padding-top: var(--spacing-medium); } .pt4-p { padding-top: var(--spacing-large); } .pt5-p { padding-top: var(--spacing-extra-large); } .pt6-p { padding-top: var(--spacing-extra-extra-large); } .pt7-p { padding-top: var(--spacing-extra-extra-extra-large); }
.pv0-p { padding-top: var(--spacing-none); padding-bottom: var(--spacing-none); } .pv1-p { padding-top: var(--spacing-extra-small); padding-bottom: var(--spacing-extra-small); } .pv2-p { padding-top: var(--spacing-small); padding-bottom: var(--spacing-small); } .pv3-p { padding-top: var(--spacing-medium); padding-bottom: var(--spacing-medium); } .pv4-p { padding-top: var(--spacing-large); padding-bottom: var(--spacing-large); } .pv5-p { padding-top: var(--spacing-extra-large); padding-bottom: var(--spacing-extra-large); } .pv6-p { padding-top: var(--spacing-extra-extra-large); padding-bottom: var(--spacing-extra-extra-large); } .pv7-p { padding-top: var(--spacing-extra-extra-extra-large); padding-bottom: var(--spacing-extra-extra-extra-large); } .ph0-p { padding-left: var(--spacing-none); padding-right: var(--spacing-none); } .ph1-p { padding-left: var(--spacing-extra-small); padding-right: var(--spacing-extra-small); } .ph2-p { padding-left: var(--spacing-small); padding-right: var(--spacing-small); } .ph3-p { padding-left: var(--spacing-medium); padding-right: var(--spacing-medium); } .ph4-p { padding-left: var(--spacing-large); padding-right: var(--spacing-large); } .ph5-p { padding-left: var(--spacing-extra-large); padding-right: var(--spacing-extra-large); } .ph6-p { padding-left: var(--spacing-extra-extra-large); padding-right: var(--spacing-extra-extra-large); } .ph7-p { padding-left: var(--spacing-extra-extra-extra-large); padding-right: var(--spacing-extra-extra-extra-large); }
.ma0-p { margin: var(--spacing-none); } .ma1-p { margin: var(--spacing-extra-small); } .ma2-p { margin: var(--spacing-small); } .ma3-p { margin: var(--spacing-medium); } .ma4-p { margin: var(--spacing-large); } .ma5-p { margin: var(--spacing-extra-large); } .ma6-p { margin: var(--spacing-extra-extra-large); } .ma7-p { margin: var(--spacing-extra-extra-extra-large); }
.ml0-p { margin-left: var(--spacing-none); } .ml1-p { margin-left: var(--spacing-extra-small); } .ml2-p { margin-left: var(--spacing-small); } .ml3-p { margin-left: var(--spacing-medium); } .ml4-p { margin-left: var(--spacing-large); } .ml5-p { margin-left: var(--spacing-extra-large); } .ml6-p { margin-left: var(--spacing-extra-extra-large); } .ml7-p { margin-left: var(--spacing-extra-extra-extra-large); }
.mr0-p { margin-right: var(--spacing-none); } .mr1-p { margin-right: var(--spacing-extra-small); } .mr2-p { margin-right: var(--spacing-small); } .mr3-p { margin-right: var(--spacing-medium); } .mr4-p { margin-right: var(--spacing-large); } .mr5-p { margin-right: var(--spacing-extra-large); } .mr6-p { margin-right: var(--spacing-extra-extra-large); } .mr7-p { margin-right: var(--spacing-extra-extra-extra-large); }
.mb0-p { margin-bottom: var(--spacing-none); } .mb1-p { margin-bottom: var(--spacing-extra-small); } .mb2-p { margin-bottom: var(--spacing-small); } .mb3-p { margin-bottom: var(--spacing-medium); } .mb4-p { margin-bottom: var(--spacing-large); } .mb5-p { margin-bottom: var(--spacing-extra-large); } .mb6-p { margin-bottom: var(--spacing-extra-extra-large); } .mb7-p { margin-bottom: var(--spacing-extra-extra-extra-large); }
.mt0-p { margin-top: var(--spacing-none); } .mt1-p { margin-top: var(--spacing-extra-small); } .mt2-p { margin-top: var(--spacing-small); } .mt3-p { margin-top: var(--spacing-medium); } .mt4-p { margin-top: var(--spacing-large); } .mt5-p { margin-top: var(--spacing-extra-large); } .mt6-p { margin-top: var(--spacing-extra-extra-large); } .mt7-p { margin-top: var(--spacing-extra-extra-extra-large); }
.mv0-p { margin-top: var(--spacing-none); margin-bottom: var(--spacing-none); } .mv1-p { margin-top: var(--spacing-extra-small); margin-bottom: var(--spacing-extra-small); } .mv2-p { margin-top: var(--spacing-small); margin-bottom: var(--spacing-small); } .mv3-p { margin-top: var(--spacing-medium); margin-bottom: var(--spacing-medium); } .mv4-p { margin-top: var(--spacing-large); margin-bottom: var(--spacing-large); } .mv5-p { margin-top: var(--spacing-extra-large); margin-bottom: var(--spacing-extra-large); } .mv6-p { margin-top: var(--spacing-extra-extra-large); margin-bottom: var(--spacing-extra-extra-large); } .mv7-p { margin-top: var(--spacing-extra-extra-extra-large); margin-bottom: var(--spacing-extra-extra-extra-large); }
.mh0-p { margin-left: var(--spacing-none); margin-right: var(--spacing-none); } .mh1-p { margin-left: var(--spacing-extra-small); margin-right: var(--spacing-extra-small); } .mh2-p { margin-left: var(--spacing-small); margin-right: var(--spacing-small); } .mh3-p { margin-left: var(--spacing-medium); margin-right: var(--spacing-medium); } .mh4-p { margin-left: var(--spacing-large); margin-right: var(--spacing-large); } .mh5-p { margin-left: var(--spacing-extra-large); margin-right: var(--spacing-extra-large); } .mh6-p { margin-left: var(--spacing-extra-extra-large); margin-right: var(--spacing-extra-extra-large); } .mh7-p { margin-left: var(--spacing-extra-extra-extra-large); margin-right: var(--spacing-extra-extra-extra-large); }}