Something went wrong. Try again.
[READ-ONLY] Mirror of https://github.com/lowmess/tachyons-custom-print.
tachyons tachyons-css tachyons-custom
Something went wrong. Try again.
1.4 kB · 62 lines
CSS
at master
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263/*
UTILITIES
*/
/* This is for fluid media that is embedded from third party sites like youtube, vimeo etc. * Wrap the outer element in aspect-ratio and then extend it with the desired ratio i.e * Make sure there are no height and width attributes on the embedded media. * Adapted from: https://github.com/suitcss/components-flex-embed * * Example: * * <div class="aspect-ratio aspect-ratio--16x9"> * <iframe class="aspect-ratio--object"></iframe> * </div> * * */
@media print { .aspect-ratio-p { height: 0; position: relative; }
.aspect-ratio--16x9-p { padding-bottom: 56.25%; } .aspect-ratio--9x16-p { padding-bottom: 177.77%; }
.aspect-ratio--4x3-p { padding-bottom: 75%; } .aspect-ratio--3x4-p { padding-bottom: 133.33%; }
.aspect-ratio--6x4-p { padding-bottom: 66.6%; } .aspect-ratio--4x6-p { padding-bottom: 150%; }
.aspect-ratio--8x5-p { padding-bottom: 62.5%; } .aspect-ratio--5x8-p { padding-bottom: 160%; }
.aspect-ratio--7x5-p { padding-bottom: 71.42%; } .aspect-ratio--5x7-p { padding-bottom: 140%; }
.aspect-ratio--1x1-p { padding-bottom: 100%; }
.aspect-ratio--object-p { position: absolute; top: 0; right: 0; bottom: 0; left: 0; width: 100%; height: 100%; z-index: 100; }
.overflow-container-p { overflow-y: scroll; }
.center-p { margin-right: auto; margin-left: auto; }}