mirror of
https://github.com/tachyons-css/tachyons.git
synced 2026-02-06 13:36:50 +00:00
Bumping package number.
This commit is contained in:
mrmrs
parent
91c54a29ab
commit
62fb568bb2
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "tachyons",
|
||||
"version": "4.5.5",
|
||||
"version": "4.6.0",
|
||||
"description": "Functional CSS for humans",
|
||||
"author": "mrmrs",
|
||||
"style": "css/tachyons.min.css",
|
||||
|
||||
135
src/_aspect-ratios.css
Normal file
135
src/_aspect-ratios.css
Normal file
@ -0,0 +1,135 @@
|
||||
/*
|
||||
|
||||
ASPECT RATIOS
|
||||
|
||||
*/
|
||||
|
||||
/* 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>
|
||||
*
|
||||
* */
|
||||
|
||||
.aspect-ratio {
|
||||
height: 0;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.aspect-ratio--16x9 { padding-bottom: 56.25%; }
|
||||
.aspect-ratio--9x16 { padding-bottom: 177.77%; }
|
||||
|
||||
.aspect-ratio--4x3 { padding-bottom: 75%; }
|
||||
.aspect-ratio--3x4 { padding-bottom: 133.33%; }
|
||||
|
||||
.aspect-ratio--6x4 { padding-bottom: 66.6%; }
|
||||
.aspect-ratio--4x6 { padding-bottom: 150%; }
|
||||
|
||||
.aspect-ratio--8x5 { padding-bottom: 62.5%; }
|
||||
.aspect-ratio--5x8 { padding-bottom: 160%; }
|
||||
|
||||
.aspect-ratio--7x5 { padding-bottom: 71.42%; }
|
||||
.aspect-ratio--5x7 { padding-bottom: 140%; }
|
||||
|
||||
.aspect-ratio--1x1 { padding-bottom: 100%; }
|
||||
|
||||
.aspect-ratio--object {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
z-index: 100;
|
||||
}
|
||||
|
||||
@media (--breakpoint-not-small){
|
||||
.aspect-ratio-ns {
|
||||
height: 0;
|
||||
position: relative;
|
||||
}
|
||||
.aspect-ratio--16x9-ns { padding-bottom: 56.25%; }
|
||||
.aspect-ratio--9x16-ns { padding-bottom: 177.77%; }
|
||||
.aspect-ratio--4x3-ns { padding-bottom: 75%; }
|
||||
.aspect-ratio--3x4-ns { padding-bottom: 133.33%; }
|
||||
.aspect-ratio--6x4-ns { padding-bottom: 66.6%; }
|
||||
.aspect-ratio--4x6-ns { padding-bottom: 150%; }
|
||||
.aspect-ratio--8x5-ns { padding-bottom: 62.5%; }
|
||||
.aspect-ratio--5x8-ns { padding-bottom: 160%; }
|
||||
.aspect-ratio--7x5-ns { padding-bottom: 71.42%; }
|
||||
.aspect-ratio--5x7-ns { padding-bottom: 140%; }
|
||||
.aspect-ratio--1x1-ns { padding-bottom: 100%; }
|
||||
.aspect-ratio--object-ns {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
z-index: 100;
|
||||
}
|
||||
}
|
||||
|
||||
@media (--breakpoint-medium){
|
||||
.aspect-ratio-m {
|
||||
height: 0;
|
||||
position: relative;
|
||||
}
|
||||
.aspect-ratio--16x9-m { padding-bottom: 56.25%; }
|
||||
.aspect-ratio--9x16-m { padding-bottom: 177.77%; }
|
||||
.aspect-ratio--4x3-m { padding-bottom: 75%; }
|
||||
.aspect-ratio--3x4-m { padding-bottom: 133.33%; }
|
||||
.aspect-ratio--6x4-m { padding-bottom: 66.6%; }
|
||||
.aspect-ratio--4x6-m { padding-bottom: 150%; }
|
||||
.aspect-ratio--8x5-m { padding-bottom: 62.5%; }
|
||||
.aspect-ratio--5x8-m { padding-bottom: 160%; }
|
||||
.aspect-ratio--7x5-m { padding-bottom: 71.42%; }
|
||||
.aspect-ratio--5x7-m { padding-bottom: 140%; }
|
||||
.aspect-ratio--1x1-m { padding-bottom: 100%; }
|
||||
.aspect-ratio--object-m {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
z-index: 100;
|
||||
}
|
||||
}
|
||||
|
||||
@media (--breakpoint-large){
|
||||
.aspect-ratio-l {
|
||||
height: 0;
|
||||
position: relative;
|
||||
}
|
||||
.aspect-ratio--16x9-l { padding-bottom: 56.25%; }
|
||||
.aspect-ratio--9x16-l { padding-bottom: 177.77%; }
|
||||
.aspect-ratio--4x3-l { padding-bottom: 75%; }
|
||||
.aspect-ratio--3x4-l { padding-bottom: 133.33%; }
|
||||
.aspect-ratio--6x4-l { padding-bottom: 66.6%; }
|
||||
.aspect-ratio--4x6-l { padding-bottom: 150%; }
|
||||
.aspect-ratio--8x5-l { padding-bottom: 62.5%; }
|
||||
.aspect-ratio--5x8-l { padding-bottom: 160%; }
|
||||
.aspect-ratio--7x5-l { padding-bottom: 71.42%; }
|
||||
.aspect-ratio--5x7-l { padding-bottom: 140%; }
|
||||
.aspect-ratio--1x1-l { padding-bottom: 100%; }
|
||||
.aspect-ratio--object-l {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
z-index: 100;
|
||||
}
|
||||
}
|
||||
199
src/_negative-margins.css
Normal file
199
src/_negative-margins.css
Normal file
@ -0,0 +1,199 @@
|
||||
/*
|
||||
NEGATIVE MARGINS
|
||||
|
||||
Base:
|
||||
n = negative
|
||||
|
||||
Modifiers:
|
||||
a = all
|
||||
t = top
|
||||
r = right
|
||||
b = bottom
|
||||
l = left
|
||||
|
||||
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:
|
||||
-ns = not-small
|
||||
-m = medium
|
||||
-l = large
|
||||
|
||||
*/
|
||||
|
||||
|
||||
|
||||
.na1 { margin: -var(--spacing-extra-small); }
|
||||
.na2 { margin: -var(--spacing-small); }
|
||||
.na3 { margin: -var(--spacing-medium); }
|
||||
.na4 { margin: -var(--spacing-large); }
|
||||
.na5 { margin: -var(--spacing-extra-large); }
|
||||
.na6 { margin: -var(--spacing-extra-extra-large); }
|
||||
.na7 { margin: -var(--spacing-extra-extra-extra-large); }
|
||||
|
||||
.nl1 { margin-left: -var(--spacing-extra-small); }
|
||||
.nl2 { margin-left: -var(--spacing-small); }
|
||||
.nl3 { margin-left: -var(--spacing-medium); }
|
||||
.nl4 { margin-left: -var(--spacing-large); }
|
||||
.nl5 { margin-left: -var(--spacing-extra-large); }
|
||||
.nl6 { margin-left: -var(--spacing-extra-extra-large); }
|
||||
.nl7 { margin-left: -var(--spacing-extra-extra-extra-large); }
|
||||
|
||||
.nr1 { margin-right: -var(--spacing-extra-small); }
|
||||
.nr2 { margin-right: -var(--spacing-small); }
|
||||
.nr3 { margin-right: -var(--spacing-medium); }
|
||||
.nr4 { margin-right: -var(--spacing-large); }
|
||||
.nr5 { margin-right: -var(--spacing-extra-large); }
|
||||
.nr6 { margin-right: -var(--spacing-extra-extra-large); }
|
||||
.nr7 { margin-right: -var(--spacing-extra-extra-extra-large); }
|
||||
|
||||
.nb1 { margin-bottom: -var(--spacing-extra-small); }
|
||||
.nb2 { margin-bottom: -var(--spacing-small); }
|
||||
.nb3 { margin-bottom: -var(--spacing-medium); }
|
||||
.nb4 { margin-bottom: -var(--spacing-large); }
|
||||
.nb5 { margin-bottom: -var(--spacing-extra-large); }
|
||||
.nb6 { margin-bottom: -var(--spacing-extra-extra-large); }
|
||||
.nb7 { margin-bottom: -var(--spacing-extra-extra-extra-large); }
|
||||
|
||||
.nt1 { margin-top: -var(--spacing-extra-small); }
|
||||
.nt2 { margin-top: -var(--spacing-small); }
|
||||
.nt3 { margin-top: -var(--spacing-medium); }
|
||||
.nt4 { margin-top: -var(--spacing-large); }
|
||||
.nt5 { margin-top: -var(--spacing-extra-large); }
|
||||
.nt6 { margin-top: -var(--spacing-extra-extra-large); }
|
||||
.nt7 { margin-top: -var(--spacing-extra-extra-extra-large); }
|
||||
|
||||
@media (--breakpoint-not-small) {
|
||||
|
||||
.na1-ns { margin: -var(--spacing-extra-small); }
|
||||
.na2-ns { margin: -var(--spacing-small); }
|
||||
.na3-ns { margin: -var(--spacing-medium); }
|
||||
.na4-ns { margin: -var(--spacing-large); }
|
||||
.na5-ns { margin: -var(--spacing-extra-large); }
|
||||
.na6-ns { margin: -var(--spacing-extra-extra-large); }
|
||||
.na7-ns { margin: -var(--spacing-extra-extra-extra-large); }
|
||||
|
||||
.nl1-ns { margin-left: -var(--spacing-extra-small); }
|
||||
.nl2-ns { margin-left: -var(--spacing-small); }
|
||||
.nl3-ns { margin-left: -var(--spacing-medium); }
|
||||
.nl4-ns { margin-left: -var(--spacing-large); }
|
||||
.nl5-ns { margin-left: -var(--spacing-extra-large); }
|
||||
.nl6-ns { margin-left: -var(--spacing-extra-extra-large); }
|
||||
.nl7-ns { margin-left: -var(--spacing-extra-extra-extra-large); }
|
||||
|
||||
.nr1-ns { margin-right: -var(--spacing-extra-small); }
|
||||
.nr2-ns { margin-right: -var(--spacing-small); }
|
||||
.nr3-ns { margin-right: -var(--spacing-medium); }
|
||||
.nr4-ns { margin-right: -var(--spacing-large); }
|
||||
.nr5-ns { margin-right: -var(--spacing-extra-large); }
|
||||
.nr6-ns { margin-right: -var(--spacing-extra-extra-large); }
|
||||
.nr7-ns { margin-right: -var(--spacing-extra-extra-extra-large); }
|
||||
|
||||
.nb1-ns { margin-bottom: -var(--spacing-extra-small); }
|
||||
.nb2-ns { margin-bottom: -var(--spacing-small); }
|
||||
.nb3-ns { margin-bottom: -var(--spacing-medium); }
|
||||
.nb4-ns { margin-bottom: -var(--spacing-large); }
|
||||
.nb5-ns { margin-bottom: -var(--spacing-extra-large); }
|
||||
.nb6-ns { margin-bottom: -var(--spacing-extra-extra-large); }
|
||||
.nb7-ns { margin-bottom: -var(--spacing-extra-extra-extra-large); }
|
||||
|
||||
.nt1-ns { margin-top: -var(--spacing-extra-small); }
|
||||
.nt2-ns { margin-top: -var(--spacing-small); }
|
||||
.nt3-ns { margin-top: -var(--spacing-medium); }
|
||||
.nt4-ns { margin-top: -var(--spacing-large); }
|
||||
.nt5-ns { margin-top: -var(--spacing-extra-large); }
|
||||
.nt6-ns { margin-top: -var(--spacing-extra-extra-large); }
|
||||
.nt7-ns { margin-top: -var(--spacing-extra-extra-extra-large); }
|
||||
|
||||
}
|
||||
|
||||
@media (--breakpoint-medium) {
|
||||
.na1-m { margin: -var(--spacing-extra-small); }
|
||||
.na2-m { margin: -var(--spacing-small); }
|
||||
.na3-m { margin: -var(--spacing-medium); }
|
||||
.na4-m { margin: -var(--spacing-large); }
|
||||
.na5-m { margin: -var(--spacing-extra-large); }
|
||||
.na6-m { margin: -var(--spacing-extra-extra-large); }
|
||||
.na7-m { margin: -var(--spacing-extra-extra-extra-large); }
|
||||
|
||||
.nl1-m { margin-left: -var(--spacing-extra-small); }
|
||||
.nl2-m { margin-left: -var(--spacing-small); }
|
||||
.nl3-m { margin-left: -var(--spacing-medium); }
|
||||
.nl4-m { margin-left: -var(--spacing-large); }
|
||||
.nl5-m { margin-left: -var(--spacing-extra-large); }
|
||||
.nl6-m { margin-left: -var(--spacing-extra-extra-large); }
|
||||
.nl7-m { margin-left: -var(--spacing-extra-extra-extra-large); }
|
||||
|
||||
.nr1-m { margin-right: -var(--spacing-extra-small); }
|
||||
.nr2-m { margin-right: -var(--spacing-small); }
|
||||
.nr3-m { margin-right: -var(--spacing-medium); }
|
||||
.nr4-m { margin-right: -var(--spacing-large); }
|
||||
.nr5-m { margin-right: -var(--spacing-extra-large); }
|
||||
.nr6-m { margin-right: -var(--spacing-extra-extra-large); }
|
||||
.nr7-m { margin-right: -var(--spacing-extra-extra-extra-large); }
|
||||
|
||||
.nb1-m { margin-bottom: -var(--spacing-extra-small); }
|
||||
.nb2-m { margin-bottom: -var(--spacing-small); }
|
||||
.nb3-m { margin-bottom: -var(--spacing-medium); }
|
||||
.nb4-m { margin-bottom: -var(--spacing-large); }
|
||||
.nb5-m { margin-bottom: -var(--spacing-extra-large); }
|
||||
.nb6-m { margin-bottom: -var(--spacing-extra-extra-large); }
|
||||
.nb7-m { margin-bottom: -var(--spacing-extra-extra-extra-large); }
|
||||
|
||||
.nt1-m { margin-top: -var(--spacing-extra-small); }
|
||||
.nt2-m { margin-top: -var(--spacing-small); }
|
||||
.nt3-m { margin-top: -var(--spacing-medium); }
|
||||
.nt4-m { margin-top: -var(--spacing-large); }
|
||||
.nt5-m { margin-top: -var(--spacing-extra-large); }
|
||||
.nt6-m { margin-top: -var(--spacing-extra-extra-large); }
|
||||
.nt7-m { margin-top: -var(--spacing-extra-extra-extra-large); }
|
||||
|
||||
}
|
||||
|
||||
@media (--breakpoint-large) {
|
||||
.na1-l { margin: -var(--spacing-extra-small); }
|
||||
.na2-l { margin: -var(--spacing-small); }
|
||||
.na3-l { margin: -var(--spacing-medium); }
|
||||
.na4-l { margin: -var(--spacing-large); }
|
||||
.na5-l { margin: -var(--spacing-extra-large); }
|
||||
.na6-l { margin: -var(--spacing-extra-extra-large); }
|
||||
.na7-l { margin: -var(--spacing-extra-extra-extra-large); }
|
||||
|
||||
.nl1-l { margin-left: -var(--spacing-extra-small); }
|
||||
.nl2-l { margin-left: -var(--spacing-small); }
|
||||
.nl3-l { margin-left: -var(--spacing-medium); }
|
||||
.nl4-l { margin-left: -var(--spacing-large); }
|
||||
.nl5-l { margin-left: -var(--spacing-extra-large); }
|
||||
.nl6-l { margin-left: -var(--spacing-extra-extra-large); }
|
||||
.nl7-l { margin-left: -var(--spacing-extra-extra-extra-large); }
|
||||
|
||||
.nr1-l { margin-right: -var(--spacing-extra-small); }
|
||||
.nr2-l { margin-right: -var(--spacing-small); }
|
||||
.nr3-l { margin-right: -var(--spacing-medium); }
|
||||
.nr4-l { margin-right: -var(--spacing-large); }
|
||||
.nr5-l { margin-right: -var(--spacing-extra-large); }
|
||||
.nr6-l { margin-right: -var(--spacing-extra-extra-large); }
|
||||
.nr7-l { margin-right: -var(--spacing-extra-extra-extra-large); }
|
||||
|
||||
.nb1-l { margin-bottom: -var(--spacing-extra-small); }
|
||||
.nb2-l { margin-bottom: -var(--spacing-small); }
|
||||
.nb3-l { margin-bottom: -var(--spacing-medium); }
|
||||
.nb4-l { margin-bottom: -var(--spacing-large); }
|
||||
.nb5-l { margin-bottom: -var(--spacing-extra-large); }
|
||||
.nb6-l { margin-bottom: -var(--spacing-extra-extra-large); }
|
||||
.nb7-l { margin-bottom: -var(--spacing-extra-extra-extra-large); }
|
||||
|
||||
.nt1-l { margin-top: -var(--spacing-extra-small); }
|
||||
.nt2-l { margin-top: -var(--spacing-small); }
|
||||
.nt3-l { margin-top: -var(--spacing-medium); }
|
||||
.nt4-l { margin-top: -var(--spacing-large); }
|
||||
.nt5-l { margin-top: -var(--spacing-extra-large); }
|
||||
.nt6-l { margin-top: -var(--spacing-extra-extra-large); }
|
||||
.nt7-l { margin-top: -var(--spacing-extra-extra-extra-large); }
|
||||
}
|
||||
|
||||
Loading…
Reference in New Issue
Block a user