artin/tachyons
1
0
Fork 0
mirror of https://github.com/tachyons-css/tachyons.git synced 2026-02-06 11:36:48 +00:00
Code Issues Packages Projects Releases Wiki Activity

Changes values and scales

Browse Source 
- New color system
- New support for grid
- Updated scales
- New hover animations
- Min width based media queries
This commit is contained in:
mrmrs 2022-08-14 22:09:19 -07:00
parent 139156c724
commit 87486e3812
59 changed files with 6063 additions and 1943 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

119
src/_align.css Normal file
View File

@ -0,0 +1,119 @@
/*
ALIGN: FLEX & GRID
Media Query Extensions:
-s = small
-m = medium
-l = large
*/
.items-start { align-items: flex-start; }
.items-end { align-items: flex-end; }
.items-center { align-items: center; }
.items-baseline { align-items: baseline; }
.items-stretch { align-items: stretch; }
.self-start { align-self: flex-start; }
.self-end { align-self: flex-end; }
.self-center { align-self: center; }
.self-baseline { align-self: baseline; }
.self-stretch { align-self: stretch; }
.justify-start { justify-content: flex-start; }
.justify-end { justify-content: flex-end; }
.justify-center { justify-content: center; }
.justify-between { justify-content: space-between; }
.justify-around { justify-content: space-around; }
.content-start { align-content: flex-start; }
.content-end { align-content: flex-end; }
.content-center { align-content: center; }
.content-between { align-content: space-between; }
.content-around { align-content: space-around; }
.content-stretch { align-content: stretch; }
@media (--breakpoint-small) {
.items-start-s { align-items: flex-start; }
.items-end-s { align-items: flex-end; }
.items-center-s { align-items: center; }
.items-baseline-s { align-items: baseline; }
.items-stretch-s { align-items: stretch; }
.self-start-s { align-self: flex-start; }
.self-end-s { align-self: flex-end; }
.self-center-s { align-self: center; }
.self-baseline-s { align-self: baseline; }
.self-stretch-s { align-self: stretch; }
.justify-start-s { justify-content: flex-start; }
.justify-end-s { justify-content: flex-end; }
.justify-center-s { justify-content: center; }
.justify-between-s { justify-content: space-between; }
.justify-around-s { justify-content: space-around; }
.content-start-s { align-content: flex-start; }
.content-end-s { align-content: flex-end; }
.content-center-s { align-content: center; }
.content-between-s { align-content: space-between; }
.content-around-s { align-content: space-around; }
.content-stretch-s { align-content: stretch; }
}
@media (--breakpoint-medium) {
.items-start-m { align-items: flex-start; }
.items-end-m { align-items: flex-end; }
.items-center-m { align-items: center; }
.items-baseline-m { align-items: baseline; }
.items-stretch-m { align-items: stretch; }
.self-start-m { align-self: flex-start; }
.self-end-m { align-self: flex-end; }
.self-center-m { align-self: center; }
.self-baseline-m { align-self: baseline; }
.self-stretch-m { align-self: stretch; }
.justify-start-m { justify-content: flex-start; }
.justify-end-m { justify-content: flex-end; }
.justify-center-m { justify-content: center; }
.justify-between-m { justify-content: space-between; }
.justify-around-m { justify-content: space-around; }
.content-start-m { align-content: flex-start; }
.content-end-m { align-content: flex-end; }
.content-center-m { align-content: center; }
.content-between-m { align-content: space-between; }
.content-around-m { align-content: space-around; }
.content-stretch-m { align-content: stretch; }
}
@media (--breakpoint-large) {
.items-start-l { align-items: flex-start; }
.items-end-l { align-items: flex-end; }
.items-center-l { align-items: center; }
.items-baseline-l { align-items: baseline; }
.items-stretch-l { align-items: stretch; }
.self-start-l { align-self: flex-start; }
.self-end-l { align-self: flex-end; }
.self-center-l { align-self: center; }
.self-baseline-l { align-self: baseline; }
.self-stretch-l { align-self: stretch; }
.justify-start-l { justify-content: flex-start; }
.justify-end-l { justify-content: flex-end; }
.justify-center-l { justify-content: center; }
.justify-between-l { justify-content: space-between; }
.justify-around-l { justify-content: space-around; }
.content-start-l { align-content: flex-start; }
.content-end-l { align-content: flex-end; }
.content-center-l { align-content: center; }
.content-between-l { align-content: space-between; }
.content-around-l { align-content: space-around; }
.content-stretch-l { align-content: stretch; }
}

177
src/_aspect-ratios.css
View File

@ -1,135 +1,86 @@
/*
ASPECT RATIOS
MDN: https://developer.mozilla.org/en-US/docs/Web/CSS/aspect-ratio
*/
/* 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 { aspect-ratio: 16 / 9; }
.aspect-ratio-9x16 { aspect-ratio: 9 / 16; }
.aspect-ratio--16x9 { padding-bottom: 56.25%; }
.aspect-ratio--9x16 { padding-bottom: 177.77%; }
.aspect-ratio-4x3 { aspect-ratio: 4 / 3; }
.aspect-ratio-3x4 { aspect-ratio: 3 / 4; }
.aspect-ratio--4x3 { padding-bottom: 75%; }
.aspect-ratio--3x4 { padding-bottom: 133.33%; }
.aspect-ratio-6x4 { aspect-ratio: 6 / 4; }
.aspect-ratio-4x6 { aspect-ratio: 4 / 6; }
.aspect-ratio--6x4 { padding-bottom: 66.6%; }
.aspect-ratio--4x6 { padding-bottom: 150%; }
.aspect-ratio-8x5 { aspect-ratio: 8 / 5; }
.aspect-ratio-5x8 { aspect-ratio: 5 / 8; }
.aspect-ratio--8x5 { padding-bottom: 62.5%; }
.aspect-ratio--5x8 { padding-bottom: 160%; }
.aspect-ratio-7x5 { aspect-ratio: 7 / 5; }
.aspect-ratio-5x7 { aspect-ratio: 5 / 7; }
.aspect-ratio--7x5 { padding-bottom: 71.42%; }
.aspect-ratio--5x7 { padding-bottom: 140%; }
.aspect-ratio-square,
.aspect-ratio-1x1 { aspect-ratio: 1 / 1; }
.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-small){
.aspect-ratio-16x9-s { aspect-ratio: 16 / 9; }
.aspect-ratio-9x16-s { aspect-ratio: 9 / 16; }
@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;
}
.aspect-ratio-4x3-s { aspect-ratio: 4 / 3; }
.aspect-ratio-3x4-s { aspect-ratio: 3 / 4; }
.aspect-ratio-6x4-s { aspect-ratio: 6 / 4; }
.aspect-ratio-4x6-s { aspect-ratio: 4 / 6; }
.aspect-ratio-8x5-s { aspect-ratio: 8 / 5; }
.aspect-ratio-5x8-s { aspect-ratio: 5 / 8; }
.aspect-ratio-7x5-s { aspect-ratio: 7 / 5; }
.aspect-ratio-5x7-s { aspect-ratio: 5 / 7; }
.aspect-ratio-square-s,
.aspect-ratio-1x1-s { aspect-ratio: 1 / 1; }
}
@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;
}
.aspect-ratio-16x9-m { aspect-ratio: 16 / 9; }
.aspect-ratio-9x16-m { aspect-ratio: 9 / 16; }
.aspect-ratio-4x3-m { aspect-ratio: 4 / 3; }
.aspect-ratio-3x4-m { aspect-ratio: 3 / 4; }
.aspect-ratio-6x4-m { aspect-ratio: 6 / 4; }
.aspect-ratio-4x6-m { aspect-ratio: 4 / 6; }
.aspect-ratio-8x5-m { aspect-ratio: 8 / 5; }
.aspect-ratio-5x8-m { aspect-ratio: 5 / 8; }
.aspect-ratio-7x5-m { aspect-ratio: 7 / 5; }
.aspect-ratio-5x7-m { aspect-ratio: 5 / 7; }
.aspect-ratio-square-m,
.aspect-ratio-1x1-m { aspect-ratio: 1 / 1; }
}
@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;
}
.aspect-ratio-16x9-l { aspect-ratio: 16 / 9; }
.aspect-ratio-9x16-l { aspect-ratio: 9 / 16; }
.aspect-ratio-4x3-l { aspect-ratio: 4 / 3; }
.aspect-ratio-3x4-l { aspect-ratio: 3 / 4; }
.aspect-ratio-6x4-l { aspect-ratio: 6 / 4; }
.aspect-ratio-4x6-l { aspect-ratio: 4 / 6; }
.aspect-ratio-8x5-l { aspect-ratio: 8 / 5; }
.aspect-ratio-5x8-l { aspect-ratio: 5 / 8; }
.aspect-ratio-7x5-l { aspect-ratio: 7 / 5; }
.aspect-ratio-5x7-l { aspect-ratio: 5 / 7; }
.aspect-ratio-square-l,
.aspect-ratio-1x1-l { aspect-ratio: 1 / 1; }
}

14
src/_background-position.css
View File

@ -13,7 +13,7 @@
-left = center left
Media Query Extensions:
-ns = not-small
-s = small
-m = medium
-l = large
@ -44,28 +44,28 @@
background-position: center left;
}
@media (--breakpoint-not-small) {
.bg-center-ns {
@media (--breakpoint-small) {
.bg-center-s {
background-repeat: no-repeat;
background-position: center center;
}
.bg-top-ns {
.bg-top-s {
background-repeat: no-repeat;
background-position: top center;
}
.bg-right-ns {
.bg-right-s {
background-repeat: no-repeat;
background-position: center right;
}
.bg-bottom-ns {
.bg-bottom-s {
background-repeat: no-repeat;
background-position: bottom center;
}
.bg-left-ns {
.bg-left-s {
background-repeat: no-repeat;
background-position: center left;
}

4
src/_background-size.css
View File

@ -4,7 +4,7 @@
Docs: http://tachyons.io/docs/themes/background-size/
Media Query Extensions:
-ns = not-small
-s = small
-m = medium
-l = large
@ -18,7 +18,7 @@
.cover { background-size: cover!important; }
.contain { background-size: contain!important; }
@media (--breakpoint-not-small) {
@media (--breakpoint-small) {
.cover-ns { background-size: cover!important; }
.contain-ns { background-size: contain!important; }
}

65
src/_border-colors.css
View File

@ -18,71 +18,8 @@
*/
.b--black { border-color: var(--black); }
.b--near-black { border-color: var(--near-black); }
.b--dark-gray { border-color: var(--dark-gray); }
.b--mid-gray { border-color: var(--mid-gray); }
.b--gray { border-color: var(--gray); }
.b--silver { border-color: var(--silver); }
.b--light-silver { border-color: var(--light-silver); }
.b--moon-gray { border-color: var(--moon-gray); }
.b--light-gray { border-color: var(--light-gray); }
.b--near-white { border-color: var(--near-white); }
.b--white { border-color: var(--white); }
.b--white-90 { border-color: var(--white-90); }
.b--white-80 { border-color: var(--white-80); }
.b--white-70 { border-color: var(--white-70); }
.b--white-60 { border-color: var(--white-60); }
.b--white-50 { border-color: var(--white-50); }
.b--white-40 { border-color: var(--white-40); }
.b--white-30 { border-color: var(--white-30); }
.b--white-20 { border-color: var(--white-20); }
.b--white-10 { border-color: var(--white-10); }
.b--white-05 { border-color: var(--white-05); }
.b--white-025 { border-color: var(--white-025); }
.b--white-0125 { border-color: var(--white-0125); }
.b--black-90 { border-color: var(--black-90); }
.b--black-80 { border-color: var(--black-80); }
.b--black-70 { border-color: var(--black-70); }
.b--black-60 { border-color: var(--black-60); }
.b--black-50 { border-color: var(--black-50); }
.b--black-40 { border-color: var(--black-40); }
.b--black-30 { border-color: var(--black-30); }
.b--black-20 { border-color: var(--black-20); }
.b--black-10 { border-color: var(--black-10); }
.b--black-05 { border-color: var(--black-05); }
.b--black-025 { border-color: var(--black-025); }
.b--black-0125 { border-color: var(--black-0125); }
.b--dark-red { border-color: var(--dark-red); }
.b--red { border-color: var(--red); }
.b--light-red { border-color: var(--light-red); }
.b--orange { border-color: var(--orange); }
.b--gold { border-color: var(--gold); }
.b--yellow { border-color: var(--yellow); }
.b--light-yellow { border-color: var(--light-yellow); }
.b--purple { border-color: var(--purple); }
.b--light-purple { border-color: var(--light-purple); }
.b--dark-pink { border-color: var(--dark-pink); }
.b--hot-pink { border-color: var(--hot-pink); }
.b--pink { border-color: var(--pink); }
.b--light-pink { border-color: var(--light-pink); }
.b--dark-green { border-color: var(--dark-green); }
.b--green { border-color: var(--green); }
.b--light-green { border-color: var(--light-green); }
.b--navy { border-color: var(--navy); }
.b--dark-blue { border-color: var(--dark-blue); }
.b--blue { border-color: var(--blue); }
.b--light-blue { border-color: var(--light-blue); }
.b--lightest-blue { border-color: var(--lightest-blue); }
.b--washed-blue { border-color: var(--washed-blue); }
.b--washed-green { border-color: var(--washed-green); }
.b--washed-yellow { border-color: var(--washed-yellow); }
.b--washed-red { border-color: var(--washed-red); }
.b--transparent { border-color: var(--transparent); }
.b--transparent { border-color: transparent; }
.b--inherit { border-color: inherit; }
.b--initial { border-color: initial; }
.b--unset { border-color: unset; }

47
src/_border-radius.css
View File

@ -12,25 +12,30 @@
2 = 2nd step in scale
3 = 3rd step in scale
4 = 4th step in scale
5 = 5th step in scale
6 = 6th step in scale
Literal values:
-100 = 100%
-pill = 9999px
Media Query Extensions:
-ns = not-small
-ns = small
-m = medium
-l = large
*/
.br0 { border-radius: 0; }
.br1 { border-radius: .125rem; }
.br2 { border-radius: .25rem; }
.br3 { border-radius: .5rem; }
.br4 { border-radius: 1rem; }
.br1 { border-radius: 4px; }
.br2 { border-radius: 6px; }
.br3 { border-radius: 8px; }
.br4 { border-radius: 12px; }
.br5 { border-radius: 16px; }
.br6 { border-radius: 32px; }
.br-100 { border-radius: 100%; }
.br-pill { border-radius: 9999px; }
.br--bottom {
border-top-left-radius: 0;
border-top-right-radius: 0;
@ -51,12 +56,14 @@
.br-initial { border-radius: initial; }
.br-unset { border-radius: unset; }
@media (--breakpoint-not-small) {
@media (--breakpoint-small) {
.br0-ns { border-radius: 0; }
.br1-ns { border-radius: .125rem; }
.br2-ns { border-radius: .25rem; }
.br3-ns { border-radius: .5rem; }
.br4-ns { border-radius: 1rem; }
.br1-ns { border-radius: 4px; }
.br2-ns { border-radius: 6px; }
.br3-ns { border-radius: 8px; }
.br4-ns { border-radius: 12px; }
.br5-ns { border-radius: 16px; }
.br6-ns { border-radius: 32px; }
.br-100-ns { border-radius: 100%; }
.br-pill-ns { border-radius: 9999px; }
.br--bottom-ns {
@ -82,10 +89,12 @@
@media (--breakpoint-medium) {
.br0-m { border-radius: 0; }
.br1-m { border-radius: .125rem; }
.br2-m { border-radius: .25rem; }
.br3-m { border-radius: .5rem; }
.br4-m { border-radius: 1rem; }
.br1-m { border-radius: 4px; }
.br2-m { border-radius: 6px; }
.br3-m { border-radius: 8px; }
.br4-m { border-radius: 12px; }
.br5-m { border-radius: 16px; }
.br6-m { border-radius: 32px; }
.br-100-m { border-radius: 100%; }
.br-pill-m { border-radius: 9999px; }
.br--bottom-m {
@ -111,10 +120,12 @@
@media (--breakpoint-large) {
.br0-l { border-radius: 0; }
.br1-l { border-radius: .125rem; }
.br2-l { border-radius: .25rem; }
.br3-l { border-radius: .5rem; }
.br4-l { border-radius: 1rem; }
.br1-l { border-radius: 4px; }
.br2-l { border-radius: 6px; }
.br3-l { border-radius: 8px; }
.br4-l { border-radius: 12px; }
.br5-l { border-radius: 16px; }
.br6-l { border-radius: 32px; }
.br-100-l { border-radius: 100%; }
.br-pill-l { border-radius: 9999px; }
.br--bottom-l {

12
src/_border-style.css
View File

@ -15,7 +15,7 @@
--solid = solid
Media Query Extensions:
-ns = not-small
-ns = small
-m = medium
-l = large
@ -26,11 +26,11 @@
.b--solid { border-style: solid; }
.b--none { border-style: none; }
@media (--breakpoint-not-small) {
.b--dotted-ns { border-style: dotted; }
.b--dashed-ns { border-style: dashed; }
.b--solid-ns { border-style: solid; }
.b--none-ns { border-style: none; }
@media (--breakpoint-small) {
.b--dotted-s { border-style: dotted; }
.b--dashed-s { border-style: dashed; }
.b--solid-s { border-style: solid; }
.b--none-s { border-style: none; }
}
@media (--breakpoint-medium) {

51
src/_border-widths.css
View File

@ -12,21 +12,19 @@
2 = 2nd step in border-width scale
3 = 3rd step in border-width scale
4 = 4th step in border-width scale
5 = 5th step in border-width scale
Media Query Extensions:
-ns = not-small
-s = small
-m = medium
-l = large
*/
.bw0 { border-width: 0; }
.bw1 { border-width: .125rem; }
.bw2 { border-width: .25rem; }
.bw3 { border-width: .5rem; }
.bw4 { border-width: 1rem; }
.bw5 { border-width: 2rem; }
.bw1 { border-width: 1px; }
.bw2 { border-width: 2px; }
.bw3 { border-width: 4px; }
.bw4 { border-width: 8px; }
/* Resets */
.bt-0 { border-top-width: 0; }
@ -34,26 +32,24 @@
.bb-0 { border-bottom-width: 0; }
.bl-0 { border-left-width: 0; }
@media (--breakpoint-not-small) {
.bw0-ns { border-width: 0; }
.bw1-ns { border-width: .125rem; }
.bw2-ns { border-width: .25rem; }
.bw3-ns { border-width: .5rem; }
.bw4-ns { border-width: 1rem; }
.bw5-ns { border-width: 2rem; }
.bt-0-ns { border-top-width: 0; }
.br-0-ns { border-right-width: 0; }
.bb-0-ns { border-bottom-width: 0; }
.bl-0-ns { border-left-width: 0; }
@media (--breakpoint-small) {
.bw0-s { border-width: 0; }
.bw1-s { border-width: 1px; }
.bw2-s { border-width: 2px; }
.bw3-s { border-width: 4px; }
.bw4-s { border-width: 8px; }
.bt-0-s { border-top-width: 0; }
.br-0-s { border-right-width: 0; }
.bb-0-s { border-bottom-width: 0; }
.bl-0-s { border-left-width: 0; }
}
@media (--breakpoint-medium) {
.bw0-m { border-width: 0; }
.bw1-m { border-width: .125rem; }
.bw2-m { border-width: .25rem; }
.bw3-m { border-width: .5rem; }
.bw4-m { border-width: 1rem; }
.bw5-m { border-width: 2rem; }
.bw1-m { border-width: 1px; }
.bw2-m { border-width: 2px; }
.bw3-m { border-width: 4px; }
.bw4-m { border-width: 8px; }
.bt-0-m { border-top-width: 0; }
.br-0-m { border-right-width: 0; }
.bb-0-m { border-bottom-width: 0; }
@ -62,11 +58,10 @@
@media (--breakpoint-large) {
.bw0-l { border-width: 0; }
.bw1-l { border-width: .125rem; }
.bw2-l { border-width: .25rem; }
.bw3-l { border-width: .5rem; }
.bw4-l { border-width: 1rem; }
.bw5-l { border-width: 2rem; }
.bw1-l { border-width: 1px; }
.bw2-l { border-width: 2px; }
.bw3-l { border-width: 4px; }
.bw4-l { border-width: 8px; }
.bt-0-l { border-top-width: 0; }
.br-0-l { border-right-width: 0; }
.bb-0-l { border-bottom-width: 0; }

16
src/_borders.css
View File

@ -15,7 +15,7 @@
n = none
Media Query Extensions:
-ns = not-small
-ns = small
-m = medium
-l = large
@ -29,13 +29,13 @@
.bn { border-style: none; border-width: 0; }
@media (--breakpoint-not-small) {
.ba-ns { border-style: solid; border-width: 1px; }
.bt-ns { border-top-style: solid; border-top-width: 1px; }
.br-ns { border-right-style: solid; border-right-width: 1px; }
.bb-ns { border-bottom-style: solid; border-bottom-width: 1px; }
.bl-ns { border-left-style: solid; border-left-width: 1px; }
.bn-ns { border-style: none; border-width: 0; }
@media (--breakpoint-small) {
.ba-s { border-style: solid; border-width: 1px; }
.bt-s { border-top-style: solid; border-top-width: 1px; }
.br-s { border-right-style: solid; border-right-width: 1px; }
.bb-s { border-bottom-style: solid; border-bottom-width: 1px; }
.bl-s { border-left-style: solid; border-left-width: 1px; }
.bn-s { border-style: none; border-width: 0; }
}
@media (--breakpoint-medium) {

87
src/_box-shadow.css
View File

@ -2,40 +2,83 @@
BOX-SHADOW
Docs: http://tachyons.io/docs/themes/box-shadow/
Layered shadows: https://tobiasahlin.com/blog/layered-smooth-box-shadows/
Media Query Extensions:
-ns = not-small
-s = small
-m = medium
-l = large
*/
.shadow-1 { box-shadow: 0px 0px 4px 2px rgba( 0, 0, 0, 0.2 ); }
.shadow-2 { box-shadow: 0px 0px 8px 2px rgba( 0, 0, 0, 0.2 ); }
.shadow-3 { box-shadow: 2px 2px 4px 2px rgba( 0, 0, 0, 0.2 ); }
.shadow-4 { box-shadow: 2px 2px 8px 0px rgba( 0, 0, 0, 0.2 ); }
.shadow-5 { box-shadow: 4px 4px 8px 0px rgba( 0, 0, 0, 0.2 ); }
.shadow-border { box-shadow: inset 0 0 1px 0 rgba(0,0,0,0.125); }
.shadow-border-light { box-shadow: inset 0 0 1px 0 rgba(255,255,255,0.125); }
.shadow-border-solid { box-shadow: inset 0 0 1px 0 currentColor; }
.shadow-border-2 { box-shadow: inset 0 0 2px 0 rgba(255,255,255,.125); }
.shadow-border-light-2 { box-shadow: inset 0 0 2px 0 rgba(0,0,0,0.125); }
.shadow-border-solid-2 { box-shadow: inset 0 0 2px 0 currentColor; }
@media (--breakpoint-not-small) {
.shadow-1-ns { box-shadow: 0px 0px 4px 2px rgba( 0, 0, 0, 0.2 ); }
.shadow-2-ns { box-shadow: 0px 0px 8px 2px rgba( 0, 0, 0, 0.2 ); }
.shadow-3-ns { box-shadow: 2px 2px 4px 2px rgba( 0, 0, 0, 0.2 ); }
.shadow-4-ns { box-shadow: 2px 2px 8px 0px rgba( 0, 0, 0, 0.2 ); }
.shadow-5-ns { box-shadow: 4px 4px 8px 0px rgba( 0, 0, 0, 0.2 ); }
.shadow-1 { box-shadow: 0 1px 1px rgba(0,0,0,0.125), 0 2px 2px rgba(0,0,0,0.125), 0 4px 4px rgba(0,0,0,0.125), 0 8px 8px rgba(0,0,0,0.125), 0 16px 16px rgba(0,0,0,0.125); }
.shadow-2 { box-shadow: 0 1px 1px rgba(0,0,0,0.15), 0 2px 2px rgba(0,0,0,0.15), 0 4px 4px rgba(0,0,0,0.15), 0 8px 8px rgba(0,0,0,0.15); }
.shadow-3 { box-shadow: 0 1px 1px rgba(0,0,0,0.11), 0 2px 2px rgba(0,0,0,0.11), 0 4px 4px rgba(0,0,0,0.11), 0 8px 8px rgba(0,0,0,0.11), 0 16px 16px rgba(0,0,0,0.11), 0 32px 32px rgba(0,0,0,0.11); }
.shadow-4 { box-shadow: 0 1px 1px rgba(0,0,0,0.25), 0 2px 2px rgba(0,0,0,0.20), 0 4px 4px rgba(0,0,0,0.15), 0 8px 8px rgba(0,0,0,0.10), 0 16px 16px rgba(0,0,0,0.05); }
.shadow-5 { box-shadow: 0 1px 1px rgba(0,0,0,0.08), 0 2px 2px rgba(0,0,0,0.12), 0 4px 4px rgba(0,0,0,0.16), 0 8px 8px rgba(0,0,0,0.20); }
.shadow-6 { box-shadow: 0 1px 2px rgba(0,0,0,0.07), 0 2px 4px rgba(0,0,0,0.07), 0 4px 8px rgba(0,0,0,0.07), 0 8px 16px rgba(0,0,0,0.07), 0 16px 32px rgba(0,0,0,0.07), 0 32px 64px rgba(0,0,0,0.07); }
.shadow-7 { box-shadow: 0 1px 1px rgba(0,0,0,0.11), 0 2px 2px rgba(0,0,0,0.11), 0 4px 4px rgba(0,0,0,0.11), 0 6px 8px rgba(0,0,0,0.11), 0 8px 16px rgba(0,0,0,0.11); }
.shadow-8 { box-shadow: 0 2px 1px rgba(0,0,0,0.09), 0 4px 2px rgba(0,0,0,0.09), 0 8px 4px rgba(0,0,0,0.09), 0 16px 8px rgba(0,0,0,0.09), 0 32px 16px rgba(0,0,0,0.09); }
@media (--breakpoint-small) {
.shadow-border-s { box-shadow: inset 0 0 1px 0 rgba(0,0,0,0.125); }
.shadow-border-light-s { box-shadow: inset 0 0 1px 0 rgba(255,255,255,0.125); }
.shadow-border-solid-s { box-shadow: inset 0 0 1px 0 currentColor; }
.shadow-border-2-s { box-shadow: inset 0 0 2px 0 rgba(255,255,255,.125); }
.shadow-border-light-2-s { box-shadow: inset 0 0 2px 0 rgba(0,0,0,0.125); }
.shadow-border-solid-2-s { box-shadow: inset 0 0 2px 0 currentColor; }
.shadow-1-s { box-shadow: 0 1px 1px rgba(0,0,0,0.125), 0 2px 2px rgba(0,0,0,0.125), 0 4px 4px rgba(0,0,0,0.125), 0 8px 8px rgba(0,0,0,0.125), 0 16px 16px rgba(0,0,0,0.125); }
.shadow-2-s { box-shadow: 0 1px 1px rgba(0,0,0,0.15), 0 2px 2px rgba(0,0,0,0.15), 0 4px 4px rgba(0,0,0,0.15), 0 8px 8px rgba(0,0,0,0.15); }
.shadow-3-s { box-shadow: 0 1px 1px rgba(0,0,0,0.11), 0 2px 2px rgba(0,0,0,0.11), 0 4px 4px rgba(0,0,0,0.11), 0 8px 8px rgba(0,0,0,0.11), 0 16px 16px rgba(0,0,0,0.11), 0 32px 32px rgba(0,0,0,0.11); }
.shadow-4-s { box-shadow: 0 1px 1px rgba(0,0,0,0.25), 0 2px 2px rgba(0,0,0,0.20), 0 4px 4px rgba(0,0,0,0.15), 0 8px 8px rgba(0,0,0,0.10), 0 16px 16px rgba(0,0,0,0.05); }
.shadow-5-s { box-shadow: 0 1px 1px rgba(0,0,0,0.08), 0 2px 2px rgba(0,0,0,0.12), 0 4px 4px rgba(0,0,0,0.16), 0 8px 8px rgba(0,0,0,0.20); }
.shadow-6-s { box-shadow: 0 1px 2px rgba(0,0,0,0.07), 0 2px 4px rgba(0,0,0,0.07), 0 4px 8px rgba(0,0,0,0.07), 0 8px 16px rgba(0,0,0,0.07), 0 16px 32px rgba(0,0,0,0.07), 0 32px 64px rgba(0,0,0,0.07); }
.shadow-7-s { box-shadow: 0 1px 1px rgba(0,0,0,0.11), 0 2px 2px rgba(0,0,0,0.11), 0 4px 4px rgba(0,0,0,0.11), 0 6px 8px rgba(0,0,0,0.11), 0 8px 16px rgba(0,0,0,0.11); }
.shadow-8-s { box-shadow: 0 2px 1px rgba(0,0,0,0.09), 0 4px 2px rgba(0,0,0,0.09), 0 8px 4px rgba(0,0,0,0.09), 0 16px 8px rgba(0,0,0,0.09), 0 32px 16px rgba(0,0,0,0.09); }
}
@media (--breakpoint-medium) {
.shadow-1-m { box-shadow: 0px 0px 4px 2px rgba( 0, 0, 0, 0.2 ); }
.shadow-2-m { box-shadow: 0px 0px 8px 2px rgba( 0, 0, 0, 0.2 ); }
.shadow-3-m { box-shadow: 2px 2px 4px 2px rgba( 0, 0, 0, 0.2 ); }
.shadow-4-m { box-shadow: 2px 2px 8px 0px rgba( 0, 0, 0, 0.2 ); }
.shadow-5-m { box-shadow: 4px 4px 8px 0px rgba( 0, 0, 0, 0.2 ); }
.shadow-border-m { box-shadow: inset 0 0 1px 0 rgba(0,0,0,0.125); }
.shadow-border-light-m { box-shadow: inset 0 0 1px 0 rgba(255,255,255,0.125); }
.shadow-border-solid-m { box-shadow: inset 0 0 1px 0 currentColor; }
.shadow-border-2-m { box-shadow: inset 0 0 2px 0 rgba(255,255,255,.125); }
.shadow-border-light-2-m { box-shadow: inset 0 0 2px 0 rgba(0,0,0,0.125); }
.shadow-border-solid-2-m { box-shadow: inset 0 0 2px 0 currentColor; }
.shadow-1-m { box-shadow: 0 1px 1px rgba(0,0,0,0.125), 0 2px 2px rgba(0,0,0,0.125), 0 4px 4px rgba(0,0,0,0.125), 0 8px 8px rgba(0,0,0,0.125), 0 16px 16px rgba(0,0,0,0.125); }
.shadow-2-m { box-shadow: 0 1px 1px rgba(0,0,0,0.15), 0 2px 2px rgba(0,0,0,0.15), 0 4px 4px rgba(0,0,0,0.15), 0 8px 8px rgba(0,0,0,0.15); }
.shadow-3-m { box-shadow: 0 1px 1px rgba(0,0,0,0.11), 0 2px 2px rgba(0,0,0,0.11), 0 4px 4px rgba(0,0,0,0.11), 0 8px 8px rgba(0,0,0,0.11), 0 16px 16px rgba(0,0,0,0.11), 0 32px 32px rgba(0,0,0,0.11); }
.shadow-4-m { box-shadow: 0 1px 1px rgba(0,0,0,0.25), 0 2px 2px rgba(0,0,0,0.20), 0 4px 4px rgba(0,0,0,0.15), 0 8px 8px rgba(0,0,0,0.10), 0 16px 16px rgba(0,0,0,0.05); }
.shadow-5-m { box-shadow: 0 1px 1px rgba(0,0,0,0.08), 0 2px 2px rgba(0,0,0,0.12), 0 4px 4px rgba(0,0,0,0.16), 0 8px 8px rgba(0,0,0,0.20); }
.shadow-6-m { box-shadow: 0 1px 2px rgba(0,0,0,0.07), 0 2px 4px rgba(0,0,0,0.07), 0 4px 8px rgba(0,0,0,0.07), 0 8px 16px rgba(0,0,0,0.07), 0 16px 32px rgba(0,0,0,0.07), 0 32px 64px rgba(0,0,0,0.07); }
.shadow-7-m { box-shadow: 0 1px 1px rgba(0,0,0,0.11), 0 2px 2px rgba(0,0,0,0.11), 0 4px 4px rgba(0,0,0,0.11), 0 6px 8px rgba(0,0,0,0.11), 0 8px 16px rgba(0,0,0,0.11); }
.shadow-8-m { box-shadow: 0 2px 1px rgba(0,0,0,0.09), 0 4px 2px rgba(0,0,0,0.09), 0 8px 4px rgba(0,0,0,0.09), 0 16px 8px rgba(0,0,0,0.09), 0 32px 16px rgba(0,0,0,0.09); }
}
@media (--breakpoint-large) {
.shadow-1-l { box-shadow: 0px 0px 4px 2px rgba( 0, 0, 0, 0.2 ); }
.shadow-2-l { box-shadow: 0px 0px 8px 2px rgba( 0, 0, 0, 0.2 ); }
.shadow-3-l { box-shadow: 2px 2px 4px 2px rgba( 0, 0, 0, 0.2 ); }
.shadow-4-l { box-shadow: 2px 2px 8px 0px rgba( 0, 0, 0, 0.2 ); }
.shadow-5-l { box-shadow: 4px 4px 8px 0px rgba( 0, 0, 0, 0.2 ); }
.shadow-border-l { box-shadow: inset 0 0 1px 0 rgba(0,0,0,0.125); }
.shadow-border-light-l { box-shadow: inset 0 0 1px 0 rgba(255,255,255,0.125); }
.shadow-border-solid-l { box-shadow: inset 0 0 1px 0 currentColor; }
.shadow-border-2-l { box-shadow: inset 0 0 2px 0 rgba(255,255,255,.125); }
.shadow-border-light-2-l { box-shadow: inset 0 0 2px 0 rgba(0,0,0,0.125); }
.shadow-border-solid-2-l { box-shadow: inset 0 0 2px 0 currentColor; }
.shadow-1-l { box-shadow: 0 1px 1px rgba(0,0,0,0.125), 0 2px 2px rgba(0,0,0,0.125), 0 4px 4px rgba(0,0,0,0.125), 0 8px 8px rgba(0,0,0,0.125), 0 16px 16px rgba(0,0,0,0.125); }
.shadow-2-l { box-shadow: 0 1px 1px rgba(0,0,0,0.15), 0 2px 2px rgba(0,0,0,0.15), 0 4px 4px rgba(0,0,0,0.15), 0 8px 8px rgba(0,0,0,0.15); }
.shadow-3-l { box-shadow: 0 1px 1px rgba(0,0,0,0.11), 0 2px 2px rgba(0,0,0,0.11), 0 4px 4px rgba(0,0,0,0.11), 0 8px 8px rgba(0,0,0,0.11), 0 16px 16px rgba(0,0,0,0.11), 0 32px 32px rgba(0,0,0,0.11); }
.shadow-4-l { box-shadow: 0 1px 1px rgba(0,0,0,0.25), 0 2px 2px rgba(0,0,0,0.20), 0 4px 4px rgba(0,0,0,0.15), 0 8px 8px rgba(0,0,0,0.10), 0 16px 16px rgba(0,0,0,0.05); }
.shadow-5-l { box-shadow: 0 1px 1px rgba(0,0,0,0.08), 0 2px 2px rgba(0,0,0,0.12), 0 4px 4px rgba(0,0,0,0.16), 0 8px 8px rgba(0,0,0,0.20); }
.shadow-6-l { box-shadow: 0 1px 2px rgba(0,0,0,0.07), 0 2px 4px rgba(0,0,0,0.07), 0 4px 8px rgba(0,0,0,0.07), 0 8px 16px rgba(0,0,0,0.07), 0 16px 32px rgba(0,0,0,0.07), 0 32px 64px rgba(0,0,0,0.07); }
.shadow-7-l { box-shadow: 0 1px 1px rgba(0,0,0,0.11), 0 2px 2px rgba(0,0,0,0.11), 0 4px 4px rgba(0,0,0,0.11), 0 6px 8px rgba(0,0,0,0.11), 0 8px 16px rgba(0,0,0,0.11); }
.shadow-8-l { box-shadow: 0 2px 1px rgba(0,0,0,0.09), 0 4px 2px rgba(0,0,0,0.09), 0 8px 4px rgba(0,0,0,0.09), 0 16px 8px rgba(0,0,0,0.09), 0 32px 16px rgba(0,0,0,0.09); }
}

46
src/_box-sizing.css
View File

@ -4,45 +4,9 @@
*/
html,
body,
div,
article,
aside,
section,
main,
nav,
footer,
header,
form,
fieldset,
legend,
pre,
code,
a,
h1,h2,h3,h4,h5,h6,
p,
ul,
ol,
li,
dl,
dt,
dd,
blockquote,
figcaption,
figure,
textarea,
table,
td,
th,
tr,
input[type="email"],
input[type="number"],
input[type="password"],
input[type="tel"],
input[type="text"],
input[type="url"],
.border-box {
box-sizing: border-box;
}
*,
*::before,
*::after,
.border-box { box-sizing: border-box; }
.content-box { box-sizing: content-box; }

20
src/_clears.css
View File

@ -18,23 +18,3 @@
.cb { clear: both; }
.cn { clear: none; }
@media (--breakpoint-not-small) {
.cl-ns { clear: left; }
.cr-ns { clear: right; }
.cb-ns { clear: both; }
.cn-ns { clear: none; }
}
@media (--breakpoint-medium) {
.cl-m { clear: left; }
.cr-m { clear: right; }
.cb-m { clear: both; }
.cn-m { clear: none; }
}
@media (--breakpoint-large) {
.cl-l { clear: left; }
.cr-l { clear: right; }
.cb-l { clear: both; }
.cn-l { clear: none; }
}

5
src/_code.css
View File

@ -5,7 +5,6 @@
*/
.pre {
overflow-x: auto;
overflow-y: hidden;
overflow: scroll;
max-width: 100%;
overflow: auto;
}

264
src/_colors.css
View File

@ -3,78 +3,206 @@
Tachyons
COLOR VARIABLES
Grayscale
- Solids
- Transparencies
Colors
A balanced color system optimized for accessibility
Theme generated with https://components.ai/theme
The first six steps in each scale are accessible with white
*/
:root {
--black: #000;
--near-black: #111;
--dark-gray:#333;
--mid-gray:#555;
--gray: #777;
--silver: #999;
--light-silver: #aaa;
--moon-gray: #ccc;
--light-gray: #eee;
--near-white: #f4f4f4;
--white: #fff;
--transparent:transparent;
--black-90: rgba(0,0,0,.9);
--black-80: rgba(0,0,0,.8);
--black-70: rgba(0,0,0,.7);
--black-60: rgba(0,0,0,.6);
--black-50: rgba(0,0,0,.5);
--black-40: rgba(0,0,0,.4);
--black-30: rgba(0,0,0,.3);
--black-20: rgba(0,0,0,.2);
--black-10: rgba(0,0,0,.1);
--black-05: rgba(0,0,0,.05);
--black-025: rgba(0,0,0,.025);
--black-0125: rgba(0,0,0,.0125);
--white-90: rgba(255,255,255,.9);
--white-80: rgba(255,255,255,.8);
--white-70: rgba(255,255,255,.7);
--white-60: rgba(255,255,255,.6);
--white-50: rgba(255,255,255,.5);
--white-40: rgba(255,255,255,.4);
--white-30: rgba(255,255,255,.3);
--white-20: rgba(255,255,255,.2);
--white-10: rgba(255,255,255,.1);
--white-05: rgba(255,255,255,.05);
--white-025: rgba(255,255,255,.025);
--white-0125: rgba(255,255,255,.0125);
--dark-red: #e7040f;
--red: #ff4136;
--light-red: #ff725c;
--orange: #ff6300;
--gold: #ffb700;
--yellow: #ffd700;
--light-yellow: #fbf1a9;
--purple: #5e2ca5;
--light-purple: #a463f2;
--dark-pink: #d5008f;
--hot-pink: #ff41b4;
--pink: #ff80cc;
--light-pink: #ffa3d7;
--dark-green: #137752;
--green: #19a974;
--light-green: #9eebcf;
--navy: #001b44;
--dark-blue: #00449e;
--blue: #357edd;
--light-blue: #96ccff;
--lightest-blue: #cdecff;
--washed-blue: #f6fffe;
--washed-green: #e8fdf5;
--washed-yellow: #fffceb;
--washed-red: #ffdfdf;
--overlay-tint-0: hsla(0, 0%, 100%, 0.035);
--overlay-tint-1: hsla(0, 0%, 100%, 0.1);
--overlay-tint-2: hsla(0, 0%, 100%, 0.19);
--overlay-tint-3: hsla(0, 0%, 100%, 0.28);
--overlay-tint-4: hsla(0, 0%, 100%, 0.36);
--overlay-tint-5: hsla(0, 0%, 100%, 0.45);
--overlay-tint-6: hsla(0, 0%, 100%, 0.55);
--overlay-tint-7: hsla(0, 0%, 100%, 0.64);
--overlay-tint-8: hsla(0, 0%, 100%, 0.73);
--overlay-tint-9: hsla(0, 0%, 100%, 0.815);
--overlay-tint-10: hsla(0, 0%, 100%, 0.895);
--overlay-tint-11: hsla(0, 0%, 100%, 0.94);
--overlay-shadow-0: hsla(0, 0%, 0%, 0.94);
--overlay-shadow-1: hsla(0, 0%, 0%, 0.895);
--overlay-shadow-2: hsla(0, 0%, 0%, 0.815);
--overlay-shadow-3: hsla(0, 0%, 0%, 0.73);
--overlay-shadow-4: hsla(0, 0%, 0%, 0.64);
--overlay-shadow-5: hsla(0, 0%, 0%, 0.55);
--overlay-shadow-6: hsla(0, 0%, 0%, 0.45);
--overlay-shadow-7: hsla(0, 0%, 0%, 0.36);
--overlay-shadow-8: hsla(0, 0%, 0%, 0.28);
--overlay-shadow-9: hsla(0, 0%, 0%, 0.19);
--overlay-shadow-10: hsla(0, 0%, 0%, 0.1);
--overlay-shadow-11: hsla(0, 0%, 0%, 0.035);
--gray-0: #000000;
--gray-1: #171717;
--gray-2: #2f2f2f;
--gray-3: #464646;
--gray-4: #5e5e5e;
--gray-5: #757575;
--gray-6: #8c8c8c;
--gray-7: #a3a3a3;
--gray-8: #bababa;
--gray-9: #d1d1d1;
--gray-10: #e8e8e8;
--gray-11: #ffffff;
--slate-gray-0: #09090b;
--slate-gray-1: #1d1d22;
--slate-gray-2: #313138;
--slate-gray-3: #45444f;
--slate-gray-4: #595866;
--slate-gray-5: #6d6c7d;
--slate-gray-6: #838292;
--slate-gray-7: #9a9aa7;
--slate-gray-8: #b2b1bb;
--slate-gray-9: #c9c9d0;
--slate-gray-10: #e1e0e4;
--slate-gray-11: #f8f8f9;
--blue-0: #030b18;
--blue-1: #071e3f;
--blue-2: #0c3166;
--blue-3: #10448d;
--blue-4: #1556b4;
--blue-5: #1969db;
--blue-6: #317fed;
--blue-7: #5797f0;
--blue-8: #7daef4;
--blue-9: #a3c6f7;
--blue-10: #c9ddfa;
--blue-11: #eff5fe;
--indigo-0: #080614;
--indigo-1: #19143f;
--indigo-2: #2a216a;
--indigo-3: #3a2e95;
--indigo-4: #4b3bc0;
--indigo-5: #5c49eb;
--indigo-6: #725fff;
--indigo-7: #8c7cff;
--indigo-8: #a69aff;
--indigo-9: #c0b7ff;
--indigo-10: #dad5ff;
--indigo-11: #f4f3ff;
--violet-0: #110517;
--violet-1: #2e0d3e;
--violet-2: #4b1465;
--violet-3: #681c8c;
--violet-4: #8424b3;
--violet-5: #a12cda;
--violet-6: #b543ec;
--violet-7: #c366f0;
--violet-8: #d089f3;
--violet-9: #deabf7;
--violet-10: #eccefa;
--violet-11: #f9f0fe;
--magenta-0: #13040f;
--magenta-1: #350a2c;
--magenta-2: #581148;
--magenta-3: #7b1765;
--magenta-4: #9e1e82;
--magenta-5: #c1249e;
--magenta-6: #d43cb2;
--magenta-7: #dc61c1;
--magenta-8: #e485cf;
--magenta-9: #eca9dd;
--magenta-10: #f4ceec;
--magenta-11: #fcf2fa;
--red-0: #120205;
--red-1: #39050f;
--red-2: #5f0819;
--red-3: #860b24;
--red-4: #ac0e2e;
--red-5: #d31138;
--red-6: #e7284e;
--red-7: #ec506f;
--red-8: #f07790;
--red-9: #f49fb0;
--red-10: #f9c7d1;
--red-11: #fdeef1;
--red-orange-0: #190b05;
--red-orange-1: #3d1307;
--red-orange-2: #601b0a;
--red-orange-3: #84240c;
--red-orange-4: #a72c0e;
--red-orange-5: #cb3411;
--red-orange-6: #ee3c13;
--red-orange-7: #fe562f;
--red-orange-8: #fe7d5e;
--red-orange-9: #ffa48e;
--red-orange-10: #ffccbe;
--red-orange-11: #fff3ee;
--orange-0: #150d04;
--orange-1: #2e1c08;
--orange-2: #472a0c;
--orange-3: #603910;
--orange-4: #794714;
--orange-5: #a65d13;
--orange-6: #d37413;
--orange-7: #ff8a14;
--orange-8: #ffa54a;
--orange-9: #ffc081;
--orange-10: #ffdab7;
--orange-11: #fff5ed;
--gold-0: #140e05;
--gold-1: #2c1f0a;
--gold-2: #432f0e;
--gold-3: #5b4013;
--gold-4: #725118;
--gold-5: #946818;
--gold-6: #d4950d;
--gold-7: #eeb028;
--gold-8: #f2c259;
--gold-9: #f7d38a;
--gold-10: #fbe5bc;
--gold-11: #fff5e9;
--yellow-0: #111006;
--yellow-1: #252405;
--yellow-2: #3a3804;
--yellow-3: #4e4d03;
--yellow-4: #636101;
--yellow-5: #777500;
--yellow-6: #ccc500;
--yellow-7: #fcf433;
--yellow-8: #fdf67a;
--yellow-9: #fdf89b;
--yellow-10: #fef9bb;
--yellow-11: #fefadb;
--green-0: #091108;
--green-1: #0f2611;
--green-2: #153c1a;
--green-3: #1b5122;
--green-4: #21662b;
--green-5: #25833a;
--green-6: #26b056;
--green-7: #35d272;
--green-8: #63dd90;
--green-9: #90e8ae;
--green-10: #bdf3cc;
--green-11: #eafeea;
--teal-0: #07100c;
--teal-1: #0c231a;
--teal-2: #113628;
--teal-3: #164936;
--teal-4: #1b5b45;
--teal-5: #177f63;
--teal-6: #12a282;
--teal-7: #2abb9b;
--teal-8: #5acab1;
--teal-9: #8bdac7;
--teal-10: #bbe9dc;
--teal-11: #ecf8f2;
--cyan-0: #0a1211;
--cyan-1: #102425;
--cyan-2: #153639;
--cyan-3: #1b484c;
--cyan-4: #215a60;
--cyan-5: #247981;
--cyan-6: #24a9b6;
--cyan-7: #28d6e6;
--cyan-8: #57e0ec;
--cyan-9: #85eaf2;
--cyan-10: #b4f5f9;
--cyan-11: #e2ffff;
}

46
src/_coordinates.css
View File

@ -19,7 +19,7 @@
--2 = literal value -2
Media Query Extensions:
-ns = not-small
-s = small
-m = medium
-l = large
@ -58,28 +58,28 @@
left: 0;
}
@media (--breakpoint-not-small) {
.top-0-ns { top: 0; }
.left-0-ns { left: 0; }
.right-0-ns { right: 0; }
.bottom-0-ns { bottom: 0; }
.top-1-ns { top: 1rem; }
.left-1-ns { left: 1rem; }
.right-1-ns { right: 1rem; }
.bottom-1-ns { bottom: 1rem; }
.top-2-ns { top: 2rem; }
.left-2-ns { left: 2rem; }
.right-2-ns { right: 2rem; }
.bottom-2-ns { bottom: 2rem; }
.top--1-ns { top: -1rem; }
.right--1-ns { right: -1rem; }
.bottom--1-ns { bottom: -1rem; }
.left--1-ns { left: -1rem; }
.top--2-ns { top: -2rem; }
.right--2-ns { right: -2rem; }
.bottom--2-ns { bottom: -2rem; }
.left--2-ns { left: -2rem; }
.absolute--fill-ns {
@media (--breakpoint-small) {
.top-0-s { top: 0; }
.left-0-s { left: 0; }
.right-0-s { right: 0; }
.bottom-0-s { bottom: 0; }
.top-1-s { top: 1rem; }
.left-1-s { left: 1rem; }
.right-1-s { right: 1rem; }
.bottom-1-s { bottom: 1rem; }
.top-2-s { top: 2rem; }
.left-2-s { left: 2rem; }
.right-2-s { right: 2rem; }
.bottom-2-s { bottom: 2rem; }
.top--1-s { top: -1rem; }
.right--1-s { right: -1rem; }
.bottom--1-s { bottom: -1rem; }
.left--1-s { left: -1rem; }
.top--2-s { top: -2rem; }
.right--2-s { right: -2rem; }
.bottom--2-s { bottom: -2rem; }
.left--2-s { left: -2rem; }
.absolute--fill-s {
top: 0;
right: 0;
bottom: 0;

129
src/_display.css
View File

@ -10,95 +10,86 @@
n = none
b = block
ib = inline-block
it = inline-table
t = table
tc = table-cell
t-row = table-row
t-columm = table-column
t-column-group = table-column-group
if = inline-flex
ig = inline-grid
f = flex
g = grid
Media Query Extensions:
-ns = not-small
-s = small
-m = medium
-l = large
*/
.dn { display: none; }
.di { display: inline; }
.db { display: block; }
.dib { display: inline-block; }
.dit { display: inline-table; }
.dt { display: table; }
.dtc { display: table-cell; }
.dt-row { display: table-row; }
.dt-row-group { display: table-row-group; }
.dt-column { display: table-column; }
.dt-column-group { display: table-column-group; }
/*
This will set table to full width and then
all cells will be equal width
*/
.dt--fixed {
table-layout: fixed;
width: 100%;
.dn { display: none; }
.di { display: inline; }
.db { display: block; }
.dib { display: inline-block; }
.df, .flex { display: flex; }
.dif, .inline-flex { display: inline-flex; }
.dg,
.grid {
display: grid;
}
@media (--breakpoint-not-small) {
.dn-ns { display: none; }
.di-ns { display: inline; }
.db-ns { display: block; }
.dib-ns { display: inline-block; }
.dit-ns { display: inline-table; }
.dt-ns { display: table; }
.dtc-ns { display: table-cell; }
.dt-row-ns { display: table-row; }
.dt-row-group-ns { display: table-row-group; }
.dt-column-ns { display: table-column; }
.dt-column-group-ns { display: table-column-group; }
.dig,
.inline-grid {
display: inline-grid;
}
.dt--fixed-ns {
table-layout: fixed;
width: 100%;
@media (--breakpoint-small) {
.dn-s { display: none; }
.di-s { display: inline; }
.db-s { display: block; }
.dib-s { display: inline-block; }
.df-s, .flex-s { display: flex; }
.dif-s, .inline-flex-s { display: inline-flex; }
.dg-s,
.grid-s {
display: grid;
}
.dig-s,
.inline-grid-s {
display: inline-grid;
}
}
@media (--breakpoint-medium) {
.dn-m { display: none; }
.di-m { display: inline; }
.db-m { display: block; }
.dib-m { display: inline-block; }
.dit-m { display: inline-table; }
.dt-m { display: table; }
.dtc-m { display: table-cell; }
.dt-row-m { display: table-row; }
.dt-row-group-m { display: table-row-group; }
.dt-column-m { display: table-column; }
.dt-column-group-m { display: table-column-group; }
.dt--fixed-m {
table-layout: fixed;
width: 100%;
.dn-m { display: none; }
.di-m { display: inline; }
.db-m { display: block; }
.dib-m { display: inline-block; }
.df-m, .flex-m { display: flex; }
.dif-m, .inline-flex-m { display: inline-flex; }
.dg-m,
.grid-m {
display: grid;
}
.dig-m,
.inline-grid-m {
display: inline-grid;
}
}
@media (--breakpoint-large) {
.dn-l { display: none; }
.di-l { display: inline; }
.db-l { display: block; }
.dib-l { display: inline-block; }
.dit-l { display: inline-table; }
.dt-l { display: table; }
.dtc-l { display: table-cell; }
.dt-row-l { display: table-row; }
.dt-row-group-l { display: table-row-group; }
.dt-column-l { display: table-column; }
.dt-column-group-l { display: table-column-group; }
.dn-l { display: none; }
.di-l { display: inline; }
.db-l { display: block; }
.dib-l { display: inline-block; }
.df-l, .flex-l { display: flex; }
.dif-l, .inline-flex-l { display: inline-flex; }
.dg-l,
.grid-l {
display: grid;
}
.dt--fixed-l {
table-layout: fixed;
width: 100%;
.dig-l,
.inline-grid-l {
display: inline-grid;
}
}

16
src/_filters.css Normal file
View File

@ -0,0 +1,16 @@
/*
FILTER EFFECTS
Docs: http://tachyons.io/docs/themes/hovers/
- Blur
- Grayscale
*/
.filter-blur-none { filter: blur(0); }
.filter-blur { filter: blur(96px); }
.grayscale-0 { filter: grayscale(0); }
.grayscale-50 { filter: grayscale(50%); }
.grayscale-100 { filter: grayscale(100%); }

99
src/_flexbox.css
View File

@ -3,15 +3,12 @@
FLEXBOX
Media Query Extensions:
-ns = not-small
-s = small
-m = medium
-l = large
*/
.flex { display: flex; }
.inline-flex { display: inline-flex; }
/* 1. Fix for Chrome 44 bug.
* https://code.google.com/p/chromium/issues/detail?id=506893 */
.flex-auto {
@ -72,63 +69,63 @@
.flex-shrink-0 { flex-shrink: 0; }
.flex-shrink-1 { flex-shrink: 1; }
@media (--breakpoint-not-small) {
.flex-ns { display: flex; }
.inline-flex-ns { display: inline-flex; }
.flex-auto-ns {
@media (--breakpoint-small) {
.flex-s { display: flex; }
.inline-flex-s { display: inline-flex; }
.flex-auto-s {
flex: 1 1 auto;
min-width: 0; /* 1 */
min-height: 0; /* 1 */
}
.flex-none-ns { flex: none; }
.flex-column-ns { flex-direction: column; }
.flex-row-ns { flex-direction: row; }
.flex-wrap-ns { flex-wrap: wrap; }
.flex-nowrap-ns { flex-wrap: nowrap; }
.flex-wrap-reverse-ns { flex-wrap: wrap-reverse; }
.flex-column-reverse-ns { flex-direction: column-reverse; }
.flex-row-reverse-ns { flex-direction: row-reverse; }
.items-start-ns { align-items: flex-start; }
.items-end-ns { align-items: flex-end; }
.items-center-ns { align-items: center; }
.items-baseline-ns { align-items: baseline; }
.items-stretch-ns { align-items: stretch; }
.flex-none-s { flex: none; }
.flex-column-s { flex-direction: column; }
.flex-row-s { flex-direction: row; }
.flex-wrap-s { flex-wrap: wrap; }
.flex-nowrap-s { flex-wrap: nowrap; }
.flex-wrap-reverse-s { flex-wrap: wrap-reverse; }
.flex-column-reverse-s { flex-direction: column-reverse; }
.flex-row-reverse-s { flex-direction: row-reverse; }
.items-start-s { align-items: flex-start; }
.items-end-s { align-items: flex-end; }
.items-center-s { align-items: center; }
.items-baseline-s { align-items: baseline; }
.items-stretch-s { align-items: stretch; }
.self-start-ns { align-self: flex-start; }
.self-end-ns { align-self: flex-end; }
.self-center-ns { align-self: center; }
.self-baseline-ns { align-self: baseline; }
.self-stretch-ns { align-self: stretch; }
.self-start-s { align-self: flex-start; }
.self-end-s { align-self: flex-end; }
.self-center-s { align-self: center; }
.self-baseline-s { align-self: baseline; }
.self-stretch-s { align-self: stretch; }
.justify-start-ns { justify-content: flex-start; }
.justify-end-ns { justify-content: flex-end; }
.justify-center-ns { justify-content: center; }
.justify-between-ns { justify-content: space-between; }
.justify-around-ns { justify-content: space-around; }
.justify-start-s { justify-content: flex-start; }
.justify-end-s { justify-content: flex-end; }
.justify-center-s { justify-content: center; }
.justify-between-s { justify-content: space-between; }
.justify-around-s { justify-content: space-around; }
.content-start-ns { align-content: flex-start; }
.content-end-ns { align-content: flex-end; }
.content-center-ns { align-content: center; }
.content-between-ns { align-content: space-between; }
.content-around-ns { align-content: space-around; }
.content-stretch-ns { align-content: stretch; }
.content-start-s { align-content: flex-start; }
.content-end-s { align-content: flex-end; }
.content-center-s { align-content: center; }
.content-between-s { align-content: space-between; }
.content-around-s { align-content: space-around; }
.content-stretch-s { align-content: stretch; }
.order-0-ns { order: 0; }
.order-1-ns { order: 1; }
.order-2-ns { order: 2; }
.order-3-ns { order: 3; }
.order-4-ns { order: 4; }
.order-5-ns { order: 5; }
.order-6-ns { order: 6; }
.order-7-ns { order: 7; }
.order-8-ns { order: 8; }
.order-last-ns { order: 99999; }
.order-0-s { order: 0; }
.order-1-s { order: 1; }
.order-2-s { order: 2; }
.order-3-s { order: 3; }
.order-4-s { order: 4; }
.order-5-s { order: 5; }
.order-6-s { order: 6; }
.order-7-s { order: 7; }
.order-8-s { order: 8; }
.order-last-s { order: 99999; }
.flex-grow-0-ns { flex-grow: 0; }
.flex-grow-1-ns { flex-grow: 1; }
.flex-grow-0-s { flex-grow: 0; }
.flex-grow-1-s { flex-grow: 1; }
.flex-shrink-0-ns { flex-shrink: 0; }
.flex-shrink-1-ns { flex-shrink: 1; }
.flex-shrink-0-s { flex-shrink: 0; }
.flex-shrink-1-s { flex-shrink: 1; }
}
@media (--breakpoint-medium) {
.flex-m { display: flex; }

20
src/_floats.css
View File

@ -18,7 +18,7 @@
n = none
Media Query Extensions:
-ns = not-small
-ns = small
-m = medium
-l = large
@ -26,24 +26,24 @@
.fl { float: left; _display: inline; }
.fr { float: right; _display: inline; }
.fl { float: left; }
.fr { float: right; }
.fn { float: none; }
@media (--breakpoint-not-small) {
.fl-ns { float: left; _display: inline; }
.fr-ns { float: right; _display: inline; }
@media (--breakpoint-small) {
.fl-ns { float: left; }
.fr-ns { float: right; }
.fn-ns { float: none; }
}
@media (--breakpoint-medium) {
.fl-m { float: left; _display: inline; }
.fr-m { float: right; _display: inline; }
.fl-m { float: left; }
.fr-m { float: right; }
.fn-m { float: none; }
}
@media (--breakpoint-large) {
.fl-l { float: left; _display: inline; }
.fr-l { float: right; _display: inline; }
.fl-l { float: left; }
.fr-l { float: right; }
.fn-l { float: none; }
}

15
src/_font-family.css
View File

@ -54,11 +54,6 @@ code, .code {
sans-serif;
}
.avenir {
font-family: 'avenir next', avenir,
sans-serif;
}
/* Serif Typefaces */
@ -78,16 +73,6 @@ code, .code {
serif;
}
.bodoni {
font-family: "Bodoni MT",
serif;
}
.calisto {
font-family: "Calisto MT",
serif;
}
.garamond {
font-family: garamond,
serif;

16
src/_font-style.css
View File

@ -4,7 +4,7 @@
Docs: http://tachyons.io/docs/typography/font-style/
Media Query Extensions:
-ns = not-small
-s = small
-m = medium
-l = large
@ -13,17 +13,3 @@
.i { font-style: italic; }
.fs-normal { font-style: normal; }
@media (--breakpoint-not-small) {
.i-ns { font-style: italic; }
.fs-normal-ns { font-style: normal; }
}
@media (--breakpoint-medium) {
.i-m { font-style: italic; }
.fs-normal-m { font-style: normal; }
}
@media (--breakpoint-large) {
.i-l { font-style: italic; }
.fs-normal-l { font-style: normal; }
}

26
src/_font-weight.css
View File

@ -18,7 +18,7 @@
9 = literal value 900
Media Query Extensions:
-ns = not-small
-ns = small
-m = medium
-l = large
@ -37,18 +37,18 @@
.fw9 { font-weight: 900; }
@media (--breakpoint-not-small) {
.normal-ns { font-weight: normal; }
.b-ns { font-weight: bold; }
.fw1-ns { font-weight: 100; }
.fw2-ns { font-weight: 200; }
.fw3-ns { font-weight: 300; }
.fw4-ns { font-weight: 400; }
.fw5-ns { font-weight: 500; }
.fw6-ns { font-weight: 600; }
.fw7-ns { font-weight: 700; }
.fw8-ns { font-weight: 800; }
.fw9-ns { font-weight: 900; }
@media (--breakpoint-small) {
.normal-s { font-weight: normal; }
.b-s { font-weight: bold; }
.fw1-s { font-weight: 100; }
.fw2-s { font-weight: 200; }
.fw3-s { font-weight: 300; }
.fw4-s { font-weight: 400; }
.fw5-s { font-weight: 500; }
.fw6-s { font-weight: 600; }
.fw7-s { font-weight: 700; }
.fw8-s { font-weight: 800; }
.fw9-s { font-weight: 900; }
}
@media (--breakpoint-medium) {

1
src/_forms.css
View File

@ -7,6 +7,7 @@
.input-reset {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
}
.button-reset::-moz-focus-inner,

51
src/_gap.css Normal file
View File

@ -0,0 +1,51 @@
/* Variables */
:root {
--spacing-none: 0;
--spacing-1: .25rem;
--spacing-2: .5rem;
--spacing-3: 1rem;
--spacing-4: 2rem;
--spacing-5: 4rem;
--spacing-6: 8rem;
--spacing-7: 16rem;
--spacing-8: 32rem;
}
/*
GAP: GRID AND FLEX SPACING
Docs: http://tachyons.io/docs/layout/gap/
Base:
g = gap
Media Query Extensions:
-s = small
-m = medium
-l = large
*/
.g0 { padding: var(--spacing-none); }
.g1 { padding: var(--spacing-extra-small); }
.g2 { padding: var(--spacing-small); }
.g3 { padding: var(--spacing-medium); }
.g4 { padding: var(--spacing-large); }
.g5 { padding: var(--spacing-extra-large); }
.g6 { padding: var(--spacing-extra-extra-large); }
.g7 { padding: var(--spacing-extra-extra-extra-large); }
@media (--breakpoint-small) {
}
@media (--breakpoint-medium) {
}
@media (--breakpoint-large) {
}

242
src/_grid-column.css Normal file
View File

@ -0,0 +1,242 @@
/*
Grid Column
Docs: http://tachyons.io/docs/layout/grid-column
This sets the width of the element via declaring how many columns wide it should be
Base:
cols = columns
*/
.col-1 { grid-column: span 1 / span 1; }
.col-2 { grid-column: span 2 / span 2; }
.col-3 { grid-column: span 3 / span 3; }
.col-4 { grid-column: span 4 / span 4; }
.col-5 { grid-column: span 5 / span 5; }
.col-6 { grid-column: span 6 / span 6; }
.col-7 { grid-column: span 7 / span 7; }
.col-8 { grid-column: span 8 / span 8; }
.col-9 { grid-column: span 9 / span 9; }
.col-10 { grid-column: span 10 / span 10; }
.col-11 { grid-column: span 11 / span 11; }
.col-12 { grid-column: span 12 / span 12; }
.col-13 { grid-column: span 13 / span 13; }
.col-14 { grid-column: span 14 / span 14; }
.col-15 { grid-column: span 15 / span 15; }
.col-16 { grid-column: span 16 / span 16; }
.col-full { grid-column: 1 / -1; }
.col-center1 { grid-column: 2 / -2; }
.col-center2 { grid-column: 3 / -3; }
.col-center3 { grid-column: 4 / -4; }
.col-center4 { grid-column: 6 / -6; }
.col-auto { grid-column: auto; }
.start-1 { grid-column-start: 1; }
.start-2 { grid-column-start: 2; }
.start-3 { grid-column-start: 3; }
.start-4 { grid-column-start: 4; }
.start-5 { grid-column-start: 5; }
.start-6 { grid-column-start: 6; }
.start-7 { grid-column-start: 7; }
.start-8 { grid-column-start: 8; }
.start-9 { grid-column-start: 9; }
.start-10 { grid-column-start: 10; }
.start-11 { grid-column-start: 11; }
.start-12 { grid-column-start: 12; }
.start-13 { grid-column-start: 13; }
.start-14 { grid-column-start: 14; }
.start-15 { grid-column-start: 15; }
.end-1 { grid-column-end: 1; }
.end-2 { grid-column-end: 2; }
.end-3 { grid-column-end: 3; }
.end-4 { grid-column-end: 4; }
.end-5 { grid-column-end: 5; }
.end-6 { grid-column-end: 6; }
.end-7 { grid-column-end: 7; }
.end-8 { grid-column-end: 8; }
.end-9 { grid-column-end: 9; }
.end-10 { grid-column-end: 10; }
.end-11 { grid-column-end: 11; }
.end-12 { grid-column-end: 12; }
.end-13 { grid-column-end: 13; }
.end-14 { grid-column-end: 14; }
.end-15 { grid-column-end: 15; }
.end-16 { grid-column-end: 16; }
@media (--breakpoint-small) {
.col-1-s { grid-column: span 1 / span 1; }
.col-2-s { grid-column: span 2 / span 2; }
.col-3-s { grid-column: span 3 / span 3; }
.col-4-s { grid-column: span 4 / span 4; }
.col-5-s { grid-column: span 5 / span 5; }
.col-6-s { grid-column: span 6 / span 6; }
.col-7-s { grid-column: span 7 / span 7; }
.col-8-s { grid-column: span 8 / span 8; }
.col-9-s { grid-column: span 9 / span 9; }
.col-10-s { grid-column: span 10 / span 10; }
.col-11-s { grid-column: span 11 / span 11; }
.col-12-s { grid-column: span 12 / span 12; }
.col-13-s { grid-column: span 13 / span 13; }
.col-14-s { grid-column: span 14 / span 14; }
.col-15-s { grid-column: span 15 / span 15; }
.col-16-s { grid-column: span 16 / span 16; }
.col-full-s { grid-column: 1 / -1; }
.col-center1-s { grid-column: 2 / -2; }
.col-center2-s { grid-column: 3 / -3; }
.col-center3-s { grid-column: 4 / -4; }
.col-center4-s { grid-column: 6 / -6; }
.col-auto-s { grid-column: auto; }
.start-1-s { grid-column-start: 1; }
.start-2-s { grid-column-start: 2; }
.start-3-s { grid-column-start: 3; }
.start-4-s { grid-column-start: 4; }
.start-5-s { grid-column-start: 5; }
.start-6-s { grid-column-start: 6; }
.start-7-s { grid-column-start: 7; }
.start-8-s { grid-column-start: 8; }
.start-9-s { grid-column-start: 9; }
.start-10-s { grid-column-start: 10; }
.start-11-s { grid-column-start: 11; }
.start-12-s { grid-column-start: 12; }
.start-13-s { grid-column-start: 13; }
.start-14-s { grid-column-start: 14; }
.start-15-s { grid-column-start: 15; }
.end-1-s { grid-column-end: 1; }
.end-2-s { grid-column-end: 2; }
.end-3-s { grid-column-end: 3; }
.end-4-s { grid-column-end: 4; }
.end-5-s { grid-column-end: 5; }
.end-6-s { grid-column-end: 6; }
.end-7-s { grid-column-end: 7; }
.end-8-s { grid-column-end: 8; }
.end-9-s { grid-column-end: 9; }
.end-10-s { grid-column-end: 10; }
.end-11-s { grid-column-end: 11; }
.end-12-s { grid-column-end: 12; }
.end-13-s { grid-column-end: 13; }
.end-14-s { grid-column-end: 14; }
.end-15-s { grid-column-end: 15; }
.end-16-s { grid-column-end: 16; }
}
@media (--breakpoint-medium) {
.col-1-m { grid-column: span 1 / span 1; }
.col-2-m { grid-column: span 2 / span 2; }
.col-3-m { grid-column: span 3 / span 3; }
.col-4-m { grid-column: span 4 / span 4; }
.col-5-m { grid-column: span 5 / span 5; }
.col-6-m { grid-column: span 6 / span 6; }
.col-7-m { grid-column: span 7 / span 7; }
.col-8-m { grid-column: span 8 / span 8; }
.col-9-m { grid-column: span 9 / span 9; }
.col-10-m { grid-column: span 10 / span 10; }
.col-11-m { grid-column: span 11 / span 11; }
.col-12-m { grid-column: span 12 / span 12; }
.col-13-m { grid-column: span 13 / span 13; }
.col-14-m { grid-column: span 14 / span 14; }
.col-15-m { grid-column: span 15 / span 15; }
.col-16-m { grid-column: span 16 / span 16; }
.col-full-m { grid-column: 1 / -1; }
.col-center1-m { grid-column: 2 / -2; }
.col-center2-m { grid-column: 3 / -3; }
.col-center3-m { grid-column: 4 / -4; }
.col-center4-m { grid-column: 6 / -6; }
.col-auto-m { grid-column: auto; }
.start-1-m { grid-column-mtart: 1; }
.start-2-m { grid-column-mtart: 2; }
.start-3-m { grid-column-mtart: 3; }
.start-4-m { grid-column-mtart: 4; }
.start-5-m { grid-column-mtart: 5; }
.start-6-m { grid-column-mtart: 6; }
.start-7-m { grid-column-mtart: 7; }
.start-8-m { grid-column-mtart: 8; }
.start-9-m { grid-column-mtart: 9; }
.start-10-m { grid-column-mtart: 10; }
.start-11-m { grid-column-mtart: 11; }
.start-12-m { grid-column-mtart: 12; }
.start-13-m { grid-column-mtart: 13; }
.start-14-m { grid-column-mtart: 14; }
.start-15-m { grid-column-mtart: 15; }
.end-1-m { grid-column-end: 1; }
.end-2-m { grid-column-end: 2; }
.end-3-m { grid-column-end: 3; }
.end-4-m { grid-column-end: 4; }
.end-5-m { grid-column-end: 5; }
.end-6-m { grid-column-end: 6; }
.end-7-m { grid-column-end: 7; }
.end-8-m { grid-column-end: 8; }
.end-9-m { grid-column-end: 9; }
.end-10-m { grid-column-end: 10; }
.end-11-m { grid-column-end: 11; }
.end-12-m { grid-column-end: 12; }
.end-13-m { grid-column-end: 13; }
.end-14-m { grid-column-end: 14; }
.end-15-m { grid-column-end: 15; }
.end-16-m { grid-column-end: 16; }
}
@media (--breakpoint-large) {
.col-1-l { grid-column: span 1 / span 1; }
.col-2-l { grid-column: span 2 / span 2; }
.col-3-l { grid-column: span 3 / span 3; }
.col-4-l { grid-column: span 4 / span 4; }
.col-5-l { grid-column: span 5 / span 5; }
.col-6-l { grid-column: span 6 / span 6; }
.col-7-l { grid-column: span 7 / span 7; }
.col-8-l { grid-column: span 8 / span 8; }
.col-9-l { grid-column: span 9 / span 9; }
.col-10-l { grid-column: span 10 / span 10; }
.col-11-l { grid-column: span 11 / span 11; }
.col-12-l { grid-column: span 12 / span 12; }
.col-13-l { grid-column: span 13 / span 13; }
.col-14-l { grid-column: span 14 / span 14; }
.col-15-l { grid-column: span 15 / span 15; }
.col-16-l { grid-column: span 16 / span 16; }
.col-full-l { grid-column: 1 / -1; }
.col-center1-l { grid-column: 2 / -2; }
.col-center2-l { grid-column: 3 / -3; }
.col-center3-l { grid-column: 4 / -4; }
.col-center4-l { grid-column: 6 / -6; }
.col-auto-l { grid-column: auto; }
.start-1-l { grid-column-start: 1; }
.start-2-l { grid-column-start: 2; }
.start-3-l { grid-column-start: 3; }
.start-4-l { grid-column-start: 4; }
.start-5-l { grid-column-start: 5; }
.start-6-l { grid-column-start: 6; }
.start-7-l { grid-column-start: 7; }
.start-8-l { grid-column-start: 8; }
.start-9-l { grid-column-start: 9; }
.start-10-l { grid-column-start: 10; }
.start-11-l { grid-column-start: 11; }
.start-12-l { grid-column-start: 12; }
.start-13-l { grid-column-start: 13; }
.start-14-l { grid-column-start: 14; }
.start-15-l { grid-column-start: 15; }
.end-1-l { grid-column-end: 1; }
.end-2-l { grid-column-end: 2; }
.end-3-l { grid-column-end: 3; }
.end-4-l { grid-column-end: 4; }
.end-5-l { grid-column-end: 5; }
.end-6-l { grid-column-end: 6; }
.end-7-l { grid-column-end: 7; }
.end-8-l { grid-column-end: 8; }
.end-9-l { grid-column-end: 9; }
.end-10-l { grid-column-end: 10; }
.end-11-l { grid-column-end: 11; }
.end-12-l { grid-column-end: 12; }
.end-13-l { grid-column-end: 13; }
.end-14-l { grid-column-end: 14; }
.end-15-l { grid-column-end: 15; }
.end-16-l { grid-column-end: 16; }
}

161
src/_grid-row.css Normal file
View File

@ -0,0 +1,161 @@
/*
Grid Row
Docs: http://tachyons.io/docs/layout/grid-column-row
This sets the width of the element via declaring how many columns wide it should be
Base:
cols = columns
*/
.row-auto { grid-row: auto; }
.row-start-1 { grid-row-start: 1; }
.row-start-2 { grid-row-start: 2; }
.row-start-3 { grid-row-start: 3; }
.row-start-4 { grid-row-start: 4; }
.row-start-5 { grid-row-start: 5; }
.row-start-6 { grid-row-start: 6; }
.row-start-7 { grid-row-start: 7; }
.row-start-8 { grid-row-start: 8; }
.row-start-9 { grid-row-start: 9; }
.row-start-10 { grid-row-start: 10; }
.row-start-11 { grid-row-start: 11; }
.row-start-12 { grid-row-start: 12; }
.row-start-13 { grid-row-start: 13; }
.row-start-14 { grid-row-start: 14; }
.row-start-15 { grid-row-start: 15; }
.row-start-16 { grid-row-start: 16; }
.row-end-1 { grid-row-end: 1; }
.row-end-2 { grid-row-end: 2; }
.row-end-3 { grid-row-end: 3; }
.row-end-4 { grid-row-end: 4; }
.row-end-5 { grid-row-end: 5; }
.row-end-6 { grid-row-end: 6; }
.row-end-7 { grid-row-end: 7; }
.row-end-8 { grid-row-end: 8; }
.row-end-9 { grid-row-end: 9; }
.row-end-10 { grid-row-end: 10; }
.row-end-11 { grid-row-end: 11; }
.row-end-12 { grid-row-end: 12; }
.row-end-13 { grid-row-end: 13; }
.row-end-14 { grid-row-end: 14; }
.row-end-15 { grid-row-end: 15; }
.row-end-16 { grid-row-end: 16; }
@media (--breakpoint-small) {
.row-auto-s { grid-row: auto; }
.row-start-1-s { grid-row-start: 1; }
.row-start-2-s { grid-row-start: 2; }
.row-start-3-s { grid-row-start: 3; }
.row-start-4-s { grid-row-start: 4; }
.row-start-5-s { grid-row-start: 5; }
.row-start-6-s { grid-row-start: 6; }
.row-start-7-s { grid-row-start: 7; }
.row-start-8-s { grid-row-start: 8; }
.row-start-9-s { grid-row-start: 9; }
.row-start-10-s { grid-row-start: 10; }
.row-start-11-s { grid-row-start: 11; }
.row-start-12-s { grid-row-start: 12; }
.row-start-13-s { grid-row-start: 13; }
.row-start-14-s { grid-row-start: 14; }
.row-start-15-s { grid-row-start: 15; }
.row-start-16-s { grid-row-start: 16; }
.row-end-1-s { grid-row-end: 1; }
.row-end-2-s { grid-row-end: 2; }
.row-end-3-s { grid-row-end: 3; }
.row-end-4-s { grid-row-end: 4; }
.row-end-5-s { grid-row-end: 5; }
.row-end-6-s { grid-row-end: 6; }
.row-end-7-s { grid-row-end: 7; }
.row-end-8-s { grid-row-end: 8; }
.row-end-9-s { grid-row-end: 9; }
.row-end-10-s { grid-row-end: 10; }
.row-end-11-s { grid-row-end: 11; }
.row-end-12-s { grid-row-end: 12; }
.row-end-13-s { grid-row-end: 13; }
.row-end-14-s { grid-row-end: 14; }
.row-end-15-s { grid-row-end: 15; }
.row-end-16-s { grid-row-end: 16; }
}
@media (--breakpoint-medium) {
.row-auto-m { grid-row: auto; }
.row-start-1-m { grid-row-start: 1; }
.row-start-2-m { grid-row-start: 2; }
.row-start-3-m { grid-row-start: 3; }
.row-start-4-m { grid-row-start: 4; }
.row-start-5-m { grid-row-start: 5; }
.row-start-6-m { grid-row-start: 6; }
.row-start-7-m { grid-row-start: 7; }
.row-start-8-m { grid-row-start: 8; }
.row-start-9-m { grid-row-start: 9; }
.row-start-10-m { grid-row-start: 10; }
.row-start-11-m { grid-row-start: 11; }
.row-start-12-m { grid-row-start: 12; }
.row-start-13-m { grid-row-start: 13; }
.row-start-14-m { grid-row-start: 14; }
.row-start-15-m { grid-row-start: 15; }
.row-start-16-m { grid-row-start: 16; }
.row-end-1-m { grid-row-end: 1; }
.row-end-2-m { grid-row-end: 2; }
.row-end-3-m { grid-row-end: 3; }
.row-end-4-m { grid-row-end: 4; }
.row-end-5-m { grid-row-end: 5; }
.row-end-6-m { grid-row-end: 6; }
.row-end-7-m { grid-row-end: 7; }
.row-end-8-m { grid-row-end: 8; }
.row-end-9-m { grid-row-end: 9; }
.row-end-10-m { grid-row-end: 10; }
.row-end-11-m { grid-row-end: 11; }
.row-end-12-m { grid-row-end: 12; }
.row-end-13-m { grid-row-end: 13; }
.row-end-14-m { grid-row-end: 14; }
.row-end-15-m { grid-row-end: 15; }
.row-end-16-m { grid-row-end: 16; }
}
@media (--breakpoint-large) {
.row-auto-l { grid-row: auto; }
.row-start-1-l { grid-row-start: 1; }
.row-start-2-l { grid-row-start: 2; }
.row-start-3-l { grid-row-start: 3; }
.row-start-4-l { grid-row-start: 4; }
.row-start-5-l { grid-row-start: 5; }
.row-start-6-l { grid-row-start: 6; }
.row-start-7-l { grid-row-start: 7; }
.row-start-8-l { grid-row-start: 8; }
.row-start-9-l { grid-row-start: 9; }
.row-start-10-l { grid-row-start: 10; }
.row-start-11-l { grid-row-start: 11; }
.row-start-12-l { grid-row-start: 12; }
.row-start-13-l { grid-row-start: 13; }
.row-start-14-l { grid-row-start: 14; }
.row-start-15-l { grid-row-start: 15; }
.row-start-16-l { grid-row-start: 16; }
.row-end-1-l { grid-row-end: 1; }
.row-end-2-l { grid-row-end: 2; }
.row-end-3-l { grid-row-end: 3; }
.row-end-4-l { grid-row-end: 4; }
.row-end-5-l { grid-row-end: 5; }
.row-end-6-l { grid-row-end: 6; }
.row-end-7-l { grid-row-end: 7; }
.row-end-8-l { grid-row-end: 8; }
.row-end-9-l { grid-row-end: 9; }
.row-end-10-l { grid-row-end: 10; }
.row-end-11-l { grid-row-end: 11; }
.row-end-12-l { grid-row-end: 12; }
.row-end-13-l { grid-row-end: 13; }
.row-end-14-l { grid-row-end: 14; }
.row-end-15-l { grid-row-end: 15; }
.row-end-16-l { grid-row-end: 16; }
}

81
src/_grid-template-columns.css Normal file
View File

@ -0,0 +1,81 @@
/*
Grid Template Columns
Docs: http://tachyons.io/docs/layout/grid-template-columns/
Base:
cols = columns
*/
.cols-1 { grid-template-columns: repeat(1, 1fr) }
.cols-2 { grid-template-columns: repeat(2, 1fr) }
.cols-3 { grid-template-columns: repeat(3, 1fr) }
.cols-4 { grid-template-columns: repeat(4, 1fr) }
.cols-5 { grid-template-columns: repeat(5, 1fr) }
.cols-6 { grid-template-columns: repeat(6, 1fr) }
.cols-8 { grid-template-columns: repeat(8, 1fr) }
.cols-9 { grid-template-columns: repeat(9, 1fr) }
.cols-10 { grid-template-columns: repeat(10, 1fr) }
.cols-12 { grid-template-columns: repeat(12, 1fr) }
.cols-16 { grid-template-columns: repeat(16, 1fr) }
.masonry { grid-template-columns: masonry }
.subgrid { grid-template-columns: subgrid }
.cols-none { grid-template-columns: none }
@media (--breakpoint-small) {
.cols-1-s { grid-template-columns: repeat(1, 1fr) }
.cols-2-s { grid-template-columns: repeat(2, 1fr) }
.cols-3-s { grid-template-columns: repeat(3, 1fr) }
.cols-4-s { grid-template-columns: repeat(4, 1fr) }
.cols-5-s { grid-template-columns: repeat(5, 1fr) }
.cols-6-s { grid-template-columns: repeat(6, 1fr) }
.cols-8-s { grid-template-columns: repeat(8, 1fr) }
.cols-9-s { grid-template-columns: repeat(9, 1fr) }
.cols-10-s { grid-template-columns: repeat(10, 1fr) }
.cols-12-s { grid-template-columns: repeat(12, 1fr) }
.cols-16-s { grid-template-columns: repeat(16, 1fr) }
.masonry-s { grid-template-columns: masonry }
.subgrid-s { grid-template-columns: subgrid }
.cols-none-s { grid-template-columns: none }
}
@media (--breakpoint-medium) {
.cols-1-m { grid-template-columns: repeat(1, 1fr) }
.cols-2-m { grid-template-columns: repeat(2, 1fr) }
.cols-3-m { grid-template-columns: repeat(3, 1fr) }
.cols-4-m { grid-template-columns: repeat(4, 1fr) }
.cols-5-m { grid-template-columns: repeat(5, 1fr) }
.cols-6-m { grid-template-columns: repeat(6, 1fr) }
.cols-8-m { grid-template-columns: repeat(8, 1fr) }
.cols-9-m { grid-template-columns: repeat(9, 1fr) }
.cols-10-m { grid-template-columns: repeat(10, 1fr) }
.cols-12-m { grid-template-columns: repeat(12, 1fr) }
.cols-16-m { grid-template-columns: repeat(16, 1fr) }
.masonry-m { grid-template-columns: masonry }
.subgrid-m { grid-template-columns: subgrid }
.cols-none-m { grid-template-columns: none }
}
@media (--breakpoint-large) {
.cols-1-l { grid-template-columns: repeat(1, 1fr) }
.cols-2-l { grid-template-columns: repeat(2, 1fr) }
.cols-3-l { grid-template-columns: repeat(3, 1fr) }
.cols-4-l { grid-template-columns: repeat(4, 1fr) }
.cols-5-l { grid-template-columns: repeat(5, 1fr) }
.cols-6-l { grid-template-columns: repeat(6, 1fr) }
.cols-8-l { grid-template-columns: repeat(8, 1fr) }
.cols-9-l { grid-template-columns: repeat(9, 1fr) }
.cols-10-l { grid-template-columns: repeat(10, 1fr) }
.cols-12-l { grid-template-columns: repeat(12, 1fr) }
.cols-16-l { grid-template-columns: repeat(16, 1fr) }
.masonry-l { grid-template-columns: masonry }
.subgrid-l { grid-template-columns: subgrid }
.cols-none-l { grid-template-columns: none }
}

239
src/_grid.css Normal file
View File

@ -0,0 +1,239 @@
/*
Grid
Media Query Extensions:
-s = small
-m = medium
-l = large
*/
.flex-none { flex: none; }
.flex-column { flex-direction: column; }
.flex-row { flex-direction: row; }
.flex-wrap { flex-wrap: wrap; }
.flex-nowrap { flex-wrap: nowrap; }
.flex-wrap-reverse { flex-wrap: wrap-reverse; }
.flex-column-reverse { flex-direction: column-reverse; }
.flex-row-reverse { flex-direction: row-reverse; }
.items-start { align-items: flex-start; }
.items-end { align-items: flex-end; }
.items-center { align-items: center; }
.items-baseline { align-items: baseline; }
.items-stretch { align-items: stretch; }
.self-start { align-self: flex-start; }
.self-end { align-self: flex-end; }
.self-center { align-self: center; }
.self-baseline { align-self: baseline; }
.self-stretch { align-self: stretch; }
.justify-start { justify-content: flex-start; }
.justify-end { justify-content: flex-end; }
.justify-center { justify-content: center; }
.justify-between { justify-content: space-between; }
.justify-around { justify-content: space-around; }
.content-start { align-content: flex-start; }
.content-end { align-content: flex-end; }
.content-center { align-content: center; }
.content-between { align-content: space-between; }
.content-around { align-content: space-around; }
.content-stretch { align-content: stretch; }
.order-0 { order: 0; }
.order-1 { order: 1; }
.order-2 { order: 2; }
.order-3 { order: 3; }
.order-4 { order: 4; }
.order-5 { order: 5; }
.order-6 { order: 6; }
.order-7 { order: 7; }
.order-8 { order: 8; }
.order-last { order: 99999; }
.flex-grow-0 { flex-grow: 0; }
.flex-grow-1 { flex-grow: 1; }
.flex-shrink-0 { flex-shrink: 0; }
.flex-shrink-1 { flex-shrink: 1; }
@media (--breakpoint-small) {
.flex-s { display: flex; }
.inline-flex-s { display: inline-flex; }
.flex-auto-s {
flex: 1 1 auto;
min-width: 0; /* 1 */
min-height: 0; /* 1 */
}
.flex-none-s { flex: none; }
.flex-column-s { flex-direction: column; }
.flex-row-s { flex-direction: row; }
.flex-wrap-s { flex-wrap: wrap; }
.flex-nowrap-s { flex-wrap: nowrap; }
.flex-wrap-reverse-s { flex-wrap: wrap-reverse; }
.flex-column-reverse-s { flex-direction: column-reverse; }
.flex-row-reverse-s { flex-direction: row-reverse; }
.items-start-s { align-items: flex-start; }
.items-end-s { align-items: flex-end; }
.items-center-s { align-items: center; }
.items-baseline-s { align-items: baseline; }
.items-stretch-s { align-items: stretch; }
.self-start-s { align-self: flex-start; }
.self-end-s { align-self: flex-end; }
.self-center-s { align-self: center; }
.self-baseline-s { align-self: baseline; }
.self-stretch-s { align-self: stretch; }
.justify-start-s { justify-content: flex-start; }
.justify-end-s { justify-content: flex-end; }
.justify-center-s { justify-content: center; }
.justify-between-s { justify-content: space-between; }
.justify-around-s { justify-content: space-around; }
.content-start-s { align-content: flex-start; }
.content-end-s { align-content: flex-end; }
.content-center-s { align-content: center; }
.content-between-s { align-content: space-between; }
.content-around-s { align-content: space-around; }
.content-stretch-s { align-content: stretch; }
.order-0-s { order: 0; }
.order-1-s { order: 1; }
.order-2-s { order: 2; }
.order-3-s { order: 3; }
.order-4-s { order: 4; }
.order-5-s { order: 5; }
.order-6-s { order: 6; }
.order-7-s { order: 7; }
.order-8-s { order: 8; }
.order-last-s { order: 99999; }
.flex-grow-0-s { flex-grow: 0; }
.flex-grow-1-s { flex-grow: 1; }
.flex-shrink-0-s { flex-shrink: 0; }
.flex-shrink-1-s { flex-shrink: 1; }
}
@media (--breakpoint-medium) {
.flex-m { display: flex; }
.inline-flex-m { display: inline-flex; }
.flex-auto-m {
flex: 1 1 auto;
min-width: 0; /* 1 */
min-height: 0; /* 1 */
}
.flex-none-m { flex: none; }
.flex-column-m { flex-direction: column; }
.flex-row-m { flex-direction: row; }
.flex-wrap-m { flex-wrap: wrap; }
.flex-nowrap-m { flex-wrap: nowrap; }
.flex-wrap-reverse-m { flex-wrap: wrap-reverse; }
.flex-column-reverse-m { flex-direction: column-reverse; }
.flex-row-reverse-m { flex-direction: row-reverse; }
.items-start-m { align-items: flex-start; }
.items-end-m { align-items: flex-end; }
.items-center-m { align-items: center; }
.items-baseline-m { align-items: baseline; }
.items-stretch-m { align-items: stretch; }
.self-start-m { align-self: flex-start; }
.self-end-m { align-self: flex-end; }
.self-center-m { align-self: center; }
.self-baseline-m { align-self: baseline; }
.self-stretch-m { align-self: stretch; }
.justify-start-m { justify-content: flex-start; }
.justify-end-m { justify-content: flex-end; }
.justify-center-m { justify-content: center; }
.justify-between-m { justify-content: space-between; }
.justify-around-m { justify-content: space-around; }
.content-start-m { align-content: flex-start; }
.content-end-m { align-content: flex-end; }
.content-center-m { align-content: center; }
.content-between-m { align-content: space-between; }
.content-around-m { align-content: space-around; }
.content-stretch-m { align-content: stretch; }
.order-0-m { order: 0; }
.order-1-m { order: 1; }
.order-2-m { order: 2; }
.order-3-m { order: 3; }
.order-4-m { order: 4; }
.order-5-m { order: 5; }
.order-6-m { order: 6; }
.order-7-m { order: 7; }
.order-8-m { order: 8; }
.order-last-m { order: 99999; }
.flex-grow-0-m { flex-grow: 0; }
.flex-grow-1-m { flex-grow: 1; }
.flex-shrink-0-m { flex-shrink: 0; }
.flex-shrink-1-m { flex-shrink: 1; }
}
@media (--breakpoint-large) {
.flex-l { display: flex; }
.inline-flex-l { display: inline-flex; }
.flex-auto-l {
flex: 1 1 auto;
min-width: 0; /* 1 */
min-height: 0; /* 1 */
}
.flex-none-l { flex: none; }
.flex-column-l { flex-direction: column; }
.flex-row-l { flex-direction: row; }
.flex-wrap-l { flex-wrap: wrap; }
.flex-nowrap-l { flex-wrap: nowrap; }
.flex-wrap-reverse-l { flex-wrap: wrap-reverse; }
.flex-column-reverse-l { flex-direction: column-reverse; }
.flex-row-reverse-l { flex-direction: row-reverse; }
.items-start-l { align-items: flex-start; }
.items-end-l { align-items: flex-end; }
.items-center-l { align-items: center; }
.items-baseline-l { align-items: baseline; }
.items-stretch-l { align-items: stretch; }
.self-start-l { align-self: flex-start; }
.self-end-l { align-self: flex-end; }
.self-center-l { align-self: center; }
.self-baseline-l { align-self: baseline; }
.self-stretch-l { align-self: stretch; }
.justify-start-l { justify-content: flex-start; }
.justify-end-l { justify-content: flex-end; }
.justify-center-l { justify-content: center; }
.justify-between-l { justify-content: space-between; }
.justify-around-l { justify-content: space-around; }
.content-start-l { align-content: flex-start; }
.content-end-l { align-content: flex-end; }
.content-center-l { align-content: center; }
.content-between-l { align-content: space-between; }
.content-around-l { align-content: space-around; }
.content-stretch-l { align-content: stretch; }
.order-0-l { order: 0; }
.order-1-l { order: 1; }
.order-2-l { order: 2; }
.order-3-l { order: 3; }
.order-4-l { order: 4; }
.order-5-l { order: 5; }
.order-6-l { order: 6; }
.order-7-l { order: 7; }
.order-8-l { order: 8; }
.order-last-l { order: 99999; }
.flex-grow-0-l { flex-grow: 0; }
.flex-grow-1-l { flex-grow: 1; }
.flex-shrink-0-l { flex-shrink: 0; }
.flex-shrink-1-l { flex-shrink: 1; }
}

41
src/_heights.css
View File

@ -16,7 +16,6 @@
4 = 4th step in height scale
5 = 5th step in height scale
-25 = literal value 25%
-50 = literal value 50%
-75 = literal value 75%
-100 = literal value 100%
@ -25,7 +24,7 @@
-inherit = string value of inherit
Media Query Extensions:
-ns = not-small
-s = small
-m = medium
-l = large
@ -41,7 +40,6 @@
/* Height Percentages - Based off of height of parent */
.h-25 { height: 25%; }
.h-50 { height: 50%; }
.h-75 { height: 75%; }
.h-100 { height: 100%; }
@ -63,24 +61,23 @@
.h-auto { height: auto; }
.h-inherit { height: inherit; }
@media (--breakpoint-not-small) {
.h1-ns { height: 1rem; }
.h2-ns { height: 2rem; }
.h3-ns { height: 4rem; }
.h4-ns { height: 8rem; }
.h5-ns { height: 16rem; }
.h-25-ns { height: 25%; }
.h-50-ns { height: 50%; }
.h-75-ns { height: 75%; }
.h-100-ns { height: 100%; }
.min-h-100-ns { min-height: 100%; }
.vh-25-ns { height: 25vh; }
.vh-50-ns { height: 50vh; }
.vh-75-ns { height: 75vh; }
.vh-100-ns { height: 100vh; }
.min-vh-100-ns { min-height: 100vh; }
.h-auto-ns { height: auto; }
.h-inherit-ns { height: inherit; }
@media (--breakpoint-small) {
.h1-s { height: 1rem; }
.h2-s { height: 2rem; }
.h3-s { height: 4rem; }
.h4-s { height: 8rem; }
.h5-s { height: 16rem; }
.h-50-s { height: 50%; }
.h-75-s { height: 75%; }
.h-100-s { height: 100%; }
.min-h-100-s { min-height: 100%; }
.vh-25-s { height: 25vh; }
.vh-50-s { height: 50vh; }
.vh-75-s { height: 75vh; }
.vh-100-s { height: 100vh; }
.min-vh-100-s { min-height: 100vh; }
.h-auto-s { height: auto; }
.h-inherit-s { height: inherit; }
}
@media (--breakpoint-medium) {
@ -89,7 +86,6 @@
.h3-m { height: 4rem; }
.h4-m { height: 8rem; }
.h5-m { height: 16rem; }
.h-25-m { height: 25%; }
.h-50-m { height: 50%; }
.h-75-m { height: 75%; }
.h-100-m { height: 100%; }
@ -109,7 +105,6 @@
.h3-l { height: 4rem; }
.h4-l { height: 8rem; }
.h5-l { height: 16rem; }
.h-25-l { height: 25%; }
.h-50-l { height: 50%; }
.h-75-l { height: 75%; }
.h-100-l { height: 100%; }

26
src/_hovers.css
View File

@ -10,6 +10,7 @@
- Grow
- Pointer
- Shadow
- Colors
*/
@ -28,7 +29,8 @@
transition: opacity .15s ease-in;
}
.dim:active {
opacity: .8; transition: opacity .15s ease-out;
opacity: .8;
transition: opacity .15s ease-out;
}
/*
@ -113,10 +115,14 @@
/* Add pointer on hover */
.pointer:hover {
.pointer {
cursor: pointer;
}
.trans-all {
transition: all 0.25s cubic-bezier(0.165, 0.84, 0.44, 1);
}
/*
Add shadow on hover.
@ -152,9 +158,17 @@
/* Combine with classes in skins and skins-pseudo for
* many different transition possibilities. */
.bg-animate,
.bg-animate:hover,
.bg-animate:focus {
transition: background-color .15s ease-in-out;
.trans-bg {
transition: background-color .25s ease-in-out;
}
.trans-color {
transition: color .25s ease-in-out;
}
.hover-filter-blur-none:hover { filter: blur(0); }
.hover-filter-blur:hover { filter: blur(96px); }
.hover-grayscale-0:hover { filter: grayscale(0); }
.hover-grayscale-50:hover { filter: grayscale(50%); }
.hover-grayscale-100:hover { filter: grayscale(100%); }

16
src/_images.css
View File

@ -5,7 +5,19 @@
*/
/* Responsive images! */
img { display: block; max-width: 100%; }
img { max-width: 100%; }
.random-image {
background-image: url(https://source.unsplash.com/random/);
background-size: cover;
}
.random-image-landscape {
background-image: url(https://source.unsplash.com/random/1920x1080);
background-size: cover;
}
.random-image-portrait {
background-image: url(https://source.unsplash.com/random/1080x1920);
background-size: cover;
}

10
src/_letter-spacing.css
View File

@ -4,7 +4,7 @@
Docs: http://tachyons.io/docs/typography/tracking/
Media Query Extensions:
-ns = not-small
-ns = small
-m = medium
-l = large
@ -14,10 +14,10 @@
.tracked-tight { letter-spacing: -.05em; }
.tracked-mega { letter-spacing: .25em; }
@media (--breakpoint-not-small) {
.tracked-ns { letter-spacing: .1em; }
.tracked-tight-ns { letter-spacing: -.05em; }
.tracked-mega-ns { letter-spacing: .25em; }
@media (--breakpoint-small) {
.tracked-s { letter-spacing: .1em; }
.tracked-tight-s { letter-spacing: -.05em; }
.tracked-mega-s { letter-spacing: .25em; }
}
@media (--breakpoint-medium) {

10
src/_line-height.css
View File

@ -4,7 +4,7 @@
Docs: http://tachyons.io/docs/typography/line-height
Media Query Extensions:
-ns = not-small
-s = small
-m = medium
-l = large
@ -14,10 +14,10 @@
.lh-title { line-height: 1.25; }
.lh-copy { line-height: 1.5; }
@media (--breakpoint-not-small) {
.lh-solid-ns { line-height: 1; }
.lh-title-ns { line-height: 1.25; }
.lh-copy-ns { line-height: 1.5; }
@media (--breakpoint-small) {
.lh-solid-s { line-height: 1; }
.lh-title-s { line-height: 1.25; }
.lh-copy-s { line-height: 1.5; }
}
@media (--breakpoint-medium) {

26
src/_max-widths.css
View File

@ -23,7 +23,7 @@
Media Query Extensions:
-ns = not-small
-s = small
-m = medium
-l = large
@ -49,20 +49,20 @@
.mw-none { max-width: none; }
@media (--breakpoint-not-small) {
.mw-100-ns { max-width: 100%; }
@media (--breakpoint-small) {
.mw-100-s { max-width: 100%; }
.mw1-ns { max-width: 1rem; }
.mw2-ns { max-width: 2rem; }
.mw3-ns { max-width: 4rem; }
.mw4-ns { max-width: 8rem; }
.mw5-ns { max-width: 16rem; }
.mw6-ns { max-width: 32rem; }
.mw7-ns { max-width: 48rem; }
.mw8-ns { max-width: 64rem; }
.mw9-ns { max-width: 96rem; }
.mw1-s { max-width: 1rem; }
.mw2-s { max-width: 2rem; }
.mw3-s { max-width: 4rem; }
.mw4-s { max-width: 8rem; }
.mw5-s { max-width: 16rem; }
.mw6-s { max-width: 32rem; }
.mw7-s { max-width: 48rem; }
.mw8-s { max-width: 64rem; }
.mw9-s { max-width: 96rem; }
.mw-none-ns { max-width: none; }
.mw-none-s { max-width: none; }
}
@media (--breakpoint-medium) {

12
src/_media-queries.css
View File

@ -10,20 +10,20 @@
These media queries can be referenced like so:
@media (--breakpoint-not-small) {
.medium-and-larger-specific-style {
@media (--breakpoint-small) {
.example-s {
background-color: red;
}
}
@media (--breakpoint-medium) {
.medium-screen-specific-style {
.example-m {
background-color: red;
}
}
@media (--breakpoint-large) {
.large-and-larger-screen-specific-style {
.example-l {
background-color: red;
}
}
@ -31,6 +31,6 @@
*/
/* Media Queries */
@custom-media --breakpoint-not-small screen and (min-width: 30em);
@custom-media --breakpoint-medium screen and (min-width: 30em) and (max-width: 60em);
@custom-media --breakpoint-small screen and (min-width: 30em);
@custom-media --breakpoint-medium screen and (min-width: 48em);
@custom-media --breakpoint-large screen and (min-width: 60em);

2
src/_module-template.css
View File

@ -8,7 +8,7 @@
*/
@media (--breakpoint-not-small) {
@media (--breakpoint-small) {
}

74
src/_negative-margins.css
View File

@ -20,7 +20,7 @@
7 = 7th step in spacing scale
Media Query Extensions:
-ns = not-small
-s = small
-m = medium
-l = large
@ -68,47 +68,47 @@
.nt6 { margin-top: calc(-1 * var(--spacing-extra-extra-large)); }
.nt7 { margin-top: calc(-1 * var(--spacing-extra-extra-extra-large)); }
@media (--breakpoint-not-small) {
@media (--breakpoint-small) {
.na1-ns { margin: calc(-1 * var(--spacing-extra-small)); }
.na2-ns { margin: calc(-1 * var(--spacing-small)); }
.na3-ns { margin: calc(-1 * var(--spacing-medium)); }
.na4-ns { margin: calc(-1 * var(--spacing-large)); }
.na5-ns { margin: calc(-1 * var(--spacing-extra-large)); }
.na6-ns { margin: calc(-1 * var(--spacing-extra-extra-large)); }
.na7-ns { margin: calc(-1 * var(--spacing-extra-extra-extra-large)); }
.na1-s { margin: calc(-1 * var(--spacing-extra-small)); }
.na2-s { margin: calc(-1 * var(--spacing-small)); }
.na3-s { margin: calc(-1 * var(--spacing-medium)); }
.na4-s { margin: calc(-1 * var(--spacing-large)); }
.na5-s { margin: calc(-1 * var(--spacing-extra-large)); }
.na6-s { margin: calc(-1 * var(--spacing-extra-extra-large)); }
.na7-s { margin: calc(-1 * var(--spacing-extra-extra-extra-large)); }
.nl1-ns { margin-left: calc(-1 * var(--spacing-extra-small)); }
.nl2-ns { margin-left: calc(-1 * var(--spacing-small)); }
.nl3-ns { margin-left: calc(-1 * var(--spacing-medium)); }
.nl4-ns { margin-left: calc(-1 * var(--spacing-large)); }
.nl5-ns { margin-left: calc(-1 * var(--spacing-extra-large)); }
.nl6-ns { margin-left: calc(-1 * var(--spacing-extra-extra-large)); }
.nl7-ns { margin-left: calc(-1 * var(--spacing-extra-extra-extra-large)); }
.nl1-s { margin-left: calc(-1 * var(--spacing-extra-small)); }
.nl2-s { margin-left: calc(-1 * var(--spacing-small)); }
.nl3-s { margin-left: calc(-1 * var(--spacing-medium)); }
.nl4-s { margin-left: calc(-1 * var(--spacing-large)); }
.nl5-s { margin-left: calc(-1 * var(--spacing-extra-large)); }
.nl6-s { margin-left: calc(-1 * var(--spacing-extra-extra-large)); }
.nl7-s { margin-left: calc(-1 * var(--spacing-extra-extra-extra-large)); }
.nr1-ns { margin-right: calc(-1 * var(--spacing-extra-small)); }
.nr2-ns { margin-right: calc(-1 * var(--spacing-small)); }
.nr3-ns { margin-right: calc(-1 * var(--spacing-medium)); }
.nr4-ns { margin-right: calc(-1 * var(--spacing-large)); }
.nr5-ns { margin-right: calc(-1 * var(--spacing-extra-large)); }
.nr6-ns { margin-right: calc(-1 * var(--spacing-extra-extra-large)); }
.nr7-ns { margin-right: calc(-1 * var(--spacing-extra-extra-extra-large)); }
.nr1-s { margin-right: calc(-1 * var(--spacing-extra-small)); }
.nr2-s { margin-right: calc(-1 * var(--spacing-small)); }
.nr3-s { margin-right: calc(-1 * var(--spacing-medium)); }
.nr4-s { margin-right: calc(-1 * var(--spacing-large)); }
.nr5-s { margin-right: calc(-1 * var(--spacing-extra-large)); }
.nr6-s { margin-right: calc(-1 * var(--spacing-extra-extra-large)); }
.nr7-s { margin-right: calc(-1 * var(--spacing-extra-extra-extra-large)); }
.nb1-ns { margin-bottom: calc(-1 * var(--spacing-extra-small)); }
.nb2-ns { margin-bottom: calc(-1 * var(--spacing-small)); }
.nb3-ns { margin-bottom: calc(-1 * var(--spacing-medium)); }
.nb4-ns { margin-bottom: calc(-1 * var(--spacing-large)); }
.nb5-ns { margin-bottom: calc(-1 * var(--spacing-extra-large)); }
.nb6-ns { margin-bottom: calc(-1 * var(--spacing-extra-extra-large)); }
.nb7-ns { margin-bottom: calc(-1 * var(--spacing-extra-extra-extra-large)); }
.nb1-s { margin-bottom: calc(-1 * var(--spacing-extra-small)); }
.nb2-s { margin-bottom: calc(-1 * var(--spacing-small)); }
.nb3-s { margin-bottom: calc(-1 * var(--spacing-medium)); }
.nb4-s { margin-bottom: calc(-1 * var(--spacing-large)); }
.nb5-s { margin-bottom: calc(-1 * var(--spacing-extra-large)); }
.nb6-s { margin-bottom: calc(-1 * var(--spacing-extra-extra-large)); }
.nb7-s { margin-bottom: calc(-1 * var(--spacing-extra-extra-extra-large)); }
.nt1-ns { margin-top: calc(-1 * var(--spacing-extra-small)); }
.nt2-ns { margin-top: calc(-1 * var(--spacing-small)); }
.nt3-ns { margin-top: calc(-1 * var(--spacing-medium)); }
.nt4-ns { margin-top: calc(-1 * var(--spacing-large)); }
.nt5-ns { margin-top: calc(-1 * var(--spacing-extra-large)); }
.nt6-ns { margin-top: calc(-1 * var(--spacing-extra-extra-large)); }
.nt7-ns { margin-top: calc(-1 * var(--spacing-extra-extra-extra-large)); }
.nt1-s { margin-top: calc(-1 * var(--spacing-extra-small)); }
.nt2-s { margin-top: calc(-1 * var(--spacing-small)); }
.nt3-s { margin-top: calc(-1 * var(--spacing-medium)); }
.nt4-s { margin-top: calc(-1 * var(--spacing-large)); }
.nt5-s { margin-top: calc(-1 * var(--spacing-extra-large)); }
.nt6-s { margin-top: calc(-1 * var(--spacing-extra-extra-large)); }
.nt7-s { margin-top: calc(-1 * var(--spacing-extra-extra-extra-large)); }
}

10
src/_normalize.css
View File

@ -1,4 +1,4 @@
/*! normalize.css v8.0.0 | MIT License | github.com/necolas/normalize.css */
/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */
/* Document
========================================================================== */
@ -24,6 +24,14 @@ body {
margin: 0;
}
/**
* Render the `main` element consistently in IE.
*/
main {
display: block;
}
/**
* Correct the font size and margin on `h1` elements within `section` and
* `article` contexts in Chrome, Firefox, and Safari.

10
src/_outlines.css
View File

@ -3,7 +3,7 @@
OUTLINES
Media Query Extensions:
-ns = not-small
-s = small
-m = medium
-l = large
@ -13,10 +13,10 @@
.outline-transparent { outline: 1px solid transparent; }
.outline-0 { outline: 0; }
@media (--breakpoint-not-small) {
.outline-ns { outline: 1px solid; }
.outline-transparent-ns { outline: 1px solid transparent; }
.outline-0-ns { outline: 0; }
@media (--breakpoint-small) {
.outline-s { outline: 1px solid; }
.outline-transparent-s { outline: 1px solid transparent; }
.outline-0-s { outline: 0; }
}
@media (--breakpoint-medium) {

28
src/_overflow.css
View File

@ -3,7 +3,7 @@
OVERFLOW
Media Query Extensions:
-ns = not-small
-s = small
-m = medium
-l = large
@ -24,20 +24,20 @@
.overflow-y-scroll { overflow-y: scroll; }
.overflow-y-auto { overflow-y: auto; }
@media (--breakpoint-not-small) {
.overflow-visible-ns { overflow: visible; }
.overflow-hidden-ns { overflow: hidden; }
.overflow-scroll-ns { overflow: scroll; }
.overflow-auto-ns { overflow: auto; }
.overflow-x-visible-ns { overflow-x: visible; }
.overflow-x-hidden-ns { overflow-x: hidden; }
.overflow-x-scroll-ns { overflow-x: scroll; }
.overflow-x-auto-ns { overflow-x: auto; }
@media (--breakpoint-small) {
.overflow-visible-s { overflow: visible; }
.overflow-hidden-s { overflow: hidden; }
.overflow-scroll-s { overflow: scroll; }
.overflow-auto-s { overflow: auto; }
.overflow-x-visible-s { overflow-x: visible; }
.overflow-x-hidden-s { overflow-x: hidden; }
.overflow-x-scroll-s { overflow-x: scroll; }
.overflow-x-auto-s { overflow-x: auto; }
.overflow-y-visible-ns { overflow-y: visible; }
.overflow-y-hidden-ns { overflow-y: hidden; }
.overflow-y-scroll-ns { overflow-y: scroll; }
.overflow-y-auto-ns { overflow-y: auto; }
.overflow-y-visible-s { overflow-y: visible; }
.overflow-y-hidden-s { overflow-y: hidden; }
.overflow-y-scroll-s { overflow-y: scroll; }
.overflow-y-auto-s { overflow-y: auto; }
}
@media (--breakpoint-medium) {

16
src/_position.css
View File

@ -4,7 +4,7 @@
Docs: http://tachyons.io/docs/layout/position/
Media Query Extensions:
-ns = not-small
-s = small
-m = medium
-l = large
@ -14,12 +14,14 @@
.relative { position: relative; }
.absolute { position: absolute; }
.fixed { position: fixed; }
.sticky { position: sticky; }
@media (--breakpoint-not-small) {
.static-ns { position: static; }
.relative-ns { position: relative; }
.absolute-ns { position: absolute; }
.fixed-ns { position: fixed; }
@media (--breakpoint-small) {
.static-s { position: static; }
.relative-s { position: relative; }
.absolute-s { position: absolute; }
.fixed-s { position: fixed; }
.sticky-s { position: sticky; }
}
@media (--breakpoint-medium) {
@ -27,6 +29,7 @@
.relative-m { position: relative; }
.absolute-m { position: absolute; }
.fixed-m { position: fixed; }
.sticky-m { position: sticky; }
}
@media (--breakpoint-large) {
@ -34,4 +37,5 @@
.relative-l { position: relative; }
.absolute-l { position: absolute; }
.fixed-l { position: fixed; }
.sticky-l { position: sticky; }
}

16
src/_rotations.css
View File

@ -12,14 +12,14 @@
.rotate-270 { transform: rotate(270deg); }
.rotate-315 { transform: rotate(315deg); }
@media (--breakpoint-not-small){
.rotate-45-ns { transform: rotate(45deg); }
.rotate-90-ns { transform: rotate(90deg); }
.rotate-135-ns { transform: rotate(135deg); }
.rotate-180-ns { transform: rotate(180deg); }
.rotate-225-ns { transform: rotate(225deg); }
.rotate-270-ns { transform: rotate(270deg); }
.rotate-315-ns { transform: rotate(315deg); }
@media (--breakpoint-small){
.rotate-45-s { transform: rotate(45deg); }
.rotate-90-s { transform: rotate(90deg); }
.rotate-135-s { transform: rotate(135deg); }
.rotate-180-s { transform: rotate(180deg); }
.rotate-225-s { transform: rotate(225deg); }
.rotate-270-s { transform: rotate(270deg); }
.rotate-315-s { transform: rotate(315deg); }
}
@media (--breakpoint-medium){

996
src/_skins-pseudo.css
View File

File diff suppressed because it is too large Load Diff

503
src/_skins.css
View File

@ -11,126 +11,391 @@
/* Text colors */
.black-90 { color: var(--black-90); }
.black-80 { color: var(--black-80); }
.black-70 { color: var(--black-70); }
.black-60 { color: var(--black-60); }
.black-50 { color: var(--black-50); }
.black-40 { color: var(--black-40); }
.black-30 { color: var(--black-30); }
.black-20 { color: var(--black-20); }
.black-10 { color: var(--black-10); }
.black-05 { color: var(--black-05); }
.white-90 { color: var(--white-90); }
.white-80 { color: var(--white-80); }
.white-70 { color: var(--white-70); }
.white-60 { color: var(--white-60); }
.white-50 { color: var(--white-50); }
.white-40 { color: var(--white-40); }
.white-30 { color: var(--white-30); }
.white-20 { color: var(--white-20); }
.white-10 { color: var(--white-10); }
.black { color: var(--black); }
.near-black { color: var(--near-black); }
.dark-gray { color: var(--dark-gray); }
.mid-gray { color: var(--mid-gray); }
.gray { color: var(--gray); }
.silver { color: var(--silver); }
.light-silver { color: var(--light-silver); }
.moon-gray { color: var(--moon-gray); }
.light-gray { color: var(--light-gray); }
.near-white { color: var(--near-white); }
.white { color: var(--white); }
.dark-red { color: var(--dark-red); }
.red { color: var(--red); }
.light-red { color: var(--light-red); }
.orange { color: var(--orange); }
.gold { color: var(--gold); }
.yellow { color: var(--yellow); }
.light-yellow { color: var(--light-yellow); }
.purple { color: var(--purple); }
.light-purple { color: var(--light-purple); }
.dark-pink { color: var(--dark-pink); }
.hot-pink { color: var(--hot-pink); }
.pink { color: var(--pink); }
.light-pink { color: var(--light-pink); }
.dark-green { color: var(--dark-green); }
.green { color: var(--green); }
.light-green { color: var(--light-green); }
.navy { color: var(--navy); }
.dark-blue { color: var(--dark-blue); }
.blue { color: var(--blue); }
.light-blue { color: var(--light-blue); }
.lightest-blue { color: var(--lightest-blue); }
.washed-blue { color: var(--washed-blue); }
.washed-green { color: var(--washed-green); }
.washed-yellow { color: var(--washed-yellow); }
.washed-red { color: var(--washed-red); }
.color-inherit { color: inherit; }
.overlay-tint-0 { color: var( --overlay-tint-0); }
.overlay-tint-1 { color: var( --overlay-tint-1); }
.overlay-tint-2 { color: var( --overlay-tint-2); }
.overlay-tint-3 { color: var( --overlay-tint-3); }
.overlay-tint-4 { color: var( --overlay-tint-4); }
.overlay-tint-5 { color: var( --overlay-tint-5); }
.overlay-tint-6 { color: var( --overlay-tint-6); }
.overlay-tint-7 { color: var( --overlay-tint-7); }
.overlay-tint-8 { color: var( --overlay-tint-8); }
.overlay-tint-9 { color: var( --overlay-tint-9); }
.overlay-tint-10 { color: var( --overlay-tint-10); }
.overlay-tint-11 { color: var( --overlay-tint-11); }
.overlay-shadow-0 { color: var( --overlay-shadow-0); }
.overlay-shadow-1 { color: var( --overlay-shadow-1); }
.overlay-shadow-2 { color: var( --overlay-shadow-2); }
.overlay-shadow-3 { color: var( --overlay-shadow-3); }
.overlay-shadow-4 { color: var( --overlay-shadow-4); }
.overlay-shadow-5 { color: var( --overlay-shadow-5); }
.overlay-shadow-6 { color: var( --overlay-shadow-6); }
.overlay-shadow-7 { color: var( --overlay-shadow-7); }
.overlay-shadow-8 { color: var( --overlay-shadow-8); }
.overlay-shadow-9 { color: var( --overlay-shadow-9); }
.overlay-shadow-10 { color: var( --overlay-shadow-10); }
.overlay-shadow-11 { color: var( --overlay-shadow-11); }
.gray-0 { color: var( --gray-0); }
.gray-1 { color: var( --gray-1); }
.gray-2 { color: var( --gray-2); }
.gray-3 { color: var( --gray-3); }
.gray-4 { color: var( --gray-4); }
.gray-5 { color: var( --gray-5); }
.gray-6 { color: var( --gray-6); }
.gray-7 { color: var( --gray-7); }
.gray-8 { color: var( --gray-8); }
.gray-9 { color: var( --gray-9); }
.gray-10 { color: var( --gray-10); }
.gray-11 { color: var( --gray-11); }
.slate-gray-0 { color: var( --slate-gray-0); }
.slate-gray-1 { color: var( --slate-gray-1); }
.slate-gray-2 { color: var( --slate-gray-2); }
.slate-gray-3 { color: var( --slate-gray-3); }
.slate-gray-4 { color: var( --slate-gray-4); }
.slate-gray-5 { color: var( --slate-gray-5); }
.slate-gray-6 { color: var( --slate-gray-6); }
.slate-gray-7 { color: var( --slate-gray-7); }
.slate-gray-8 { color: var( --slate-gray-8); }
.slate-gray-9 { color: var( --slate-gray-9); }
.slate-gray-10 { color: var( --slate-gray-10); }
.slate-gray-11 { color: var( --slate-gray-11); }
.blue-0 { color: var( --blue-0); }
.blue-1 { color: var( --blue-1); }
.blue-2 { color: var( --blue-2); }
.blue-3 { color: var( --blue-3); }
.blue-4 { color: var( --blue-4); }
.blue-5 { color: var( --blue-5); }
.blue-6 { color: var( --blue-6); }
.blue-7 { color: var( --blue-7); }
.blue-8 { color: var( --blue-8); }
.blue-9 { color: var( --blue-9); }
.blue-10 { color: var( --blue-10); }
.blue-11 { color: var( --blue-11); }
.indigo-0 { color: var( --indigo-0); }
.indigo-1 { color: var( --indigo-1); }
.indigo-2 { color: var( --indigo-2); }
.indigo-3 { color: var( --indigo-3); }
.indigo-4 { color: var( --indigo-4); }
.indigo-5 { color: var( --indigo-5); }
.indigo-6 { color: var( --indigo-6); }
.indigo-7 { color: var( --indigo-7); }
.indigo-8 { color: var( --indigo-8); }
.indigo-9 { color: var( --indigo-9); }
.indigo-10 { color: var( --indigo-10); }
.indigo-11 { color: var( --indigo-11); }
.violet-0 { color: var( --violet-0); }
.violet-1 { color: var( --violet-1); }
.violet-2 { color: var( --violet-2); }
.violet-3 { color: var( --violet-3); }
.violet-4 { color: var( --violet-4); }
.violet-5 { color: var( --violet-5); }
.violet-6 { color: var( --violet-6); }
.violet-7 { color: var( --violet-7); }
.violet-8 { color: var( --violet-8); }
.violet-9 { color: var( --violet-9); }
.violet-10 { color: var( --violet-10); }
.violet-11 { color: var( --violet-11); }
.magenta-0 { color: var( --magenta-0); }
.magenta-1 { color: var( --magenta-1); }
.magenta-2 { color: var( --magenta-2); }
.magenta-3 { color: var( --magenta-3); }
.magenta-4 { color: var( --magenta-4); }
.magenta-5 { color: var( --magenta-5); }
.magenta-6 { color: var( --magenta-6); }
.magenta-7 { color: var( --magenta-7); }
.magenta-8 { color: var( --magenta-8); }
.magenta-9 { color: var( --magenta-9); }
.magenta-10 { color: var( --magenta-10); }
.magenta-11 { color: var( --magenta-11); }
.red-0 { color: var( --red-0); }
.red-1 { color: var( --red-1); }
.red-2 { color: var( --red-2); }
.red-3 { color: var( --red-3); }
.red-4 { color: var( --red-4); }
.red-5 { color: var( --red-5); }
.red-6 { color: var( --red-6); }
.red-7 { color: var( --red-7); }
.red-8 { color: var( --red-8); }
.red-9 { color: var( --red-9); }
.red-10 { color: var( --red-10); }
.red-11 { color: var( --red-11); }
.red-orange-0 { color: var( --red-orange-0); }
.red-orange-1 { color: var( --red-orange-1); }
.red-orange-2 { color: var( --red-orange-2); }
.red-orange-3 { color: var( --red-orange-3); }
.red-orange-4 { color: var( --red-orange-4); }
.red-orange-5 { color: var( --red-orange-5); }
.red-orange-6 { color: var( --red-orange-6); }
.red-orange-7 { color: var( --red-orange-7); }
.red-orange-8 { color: var( --red-orange-8); }
.red-orange-9 { color: var( --red-orange-9); }
.red-orange-10 { color: var( --red-orange-10); }
.red-orange-11 { color: var( --red-orange-11); }
.orange-0 { color: var( --orange-0); }
.orange-1 { color: var( --orange-1); }
.orange-2 { color: var( --orange-2); }
.orange-3 { color: var( --orange-3); }
.orange-4 { color: var( --orange-4); }
.orange-5 { color: var( --orange-5); }
.orange-6 { color: var( --orange-6); }
.orange-7 { color: var( --orange-7); }
.orange-8 { color: var( --orange-8); }
.orange-9 { color: var( --orange-9); }
.orange-10 { color: var( --orange-10); }
.orange-11 { color: var( --orange-11); }
.gold-0 { color: var( --gold-0); }
.gold-1 { color: var( --gold-1); }
.gold-2 { color: var( --gold-2); }
.gold-3 { color: var( --gold-3); }
.gold-4 { color: var( --gold-4); }
.gold-5 { color: var( --gold-5); }
.gold-6 { color: var( --gold-6); }
.gold-7 { color: var( --gold-7); }
.gold-8 { color: var( --gold-8); }
.gold-9 { color: var( --gold-9); }
.gold-10 { color: var( --gold-10); }
.gold-11 { color: var( --gold-11); }
.yellow-0 { color: var( --yellow-0); }
.yellow-1 { color: var( --yellow-1); }
.yellow-2 { color: var( --yellow-2); }
.yellow-3 { color: var( --yellow-3); }
.yellow-4 { color: var( --yellow-4); }
.yellow-5 { color: var( --yellow-5); }
.yellow-6 { color: var( --yellow-6); }
.yellow-7 { color: var( --yellow-7); }
.yellow-8 { color: var( --yellow-8); }
.yellow-9 { color: var( --yellow-9); }
.yellow-10 { color: var( --yellow-10); }
.yellow-11 { color: var( --yellow-11); }
.green-0 { color: var( --green-0); }
.green-1 { color: var( --green-1); }
.green-2 { color: var( --green-2); }
.green-3 { color: var( --green-3); }
.green-4 { color: var( --green-4); }
.green-5 { color: var( --green-5); }
.green-6 { color: var( --green-6); }
.green-7 { color: var( --green-7); }
.green-8 { color: var( --green-8); }
.green-9 { color: var( --green-9); }
.green-10 { color: var( --green-10); }
.green-11 { color: var( --green-11); }
.teal-0 { color: var( --teal-0); }
.teal-1 { color: var( --teal-1); }
.teal-2 { color: var( --teal-2); }
.teal-3 { color: var( --teal-3); }
.teal-4 { color: var( --teal-4); }
.teal-5 { color: var( --teal-5); }
.teal-6 { color: var( --teal-6); }
.teal-7 { color: var( --teal-7); }
.teal-8 { color: var( --teal-8); }
.teal-9 { color: var( --teal-9); }
.teal-10 { color: var( --teal-10); }
.teal-11 { color: var( --teal-11); }
.cyan-0 { color: var( --cyan-0); }
.cyan-1 { color: var( --cyan-1); }
.cyan-2 { color: var( --cyan-2); }
.cyan-3 { color: var( --cyan-3); }
.cyan-4 { color: var( --cyan-4); }
.cyan-5 { color: var( --cyan-5); }
.cyan-6 { color: var( --cyan-6); }
.cyan-7 { color: var( --cyan-7); }
.cyan-8 { color: var( --cyan-8); }
.cyan-9 { color: var( --cyan-9); }
.cyan-10 { color: var( --cyan-10); }
.cyan-11 { color: var( --cyan-11); }
/* Background colors */
.bg-black-90 { background-color: var(--black-90); }
.bg-black-80 { background-color: var(--black-80); }
.bg-black-70 { background-color: var(--black-70); }
.bg-black-60 { background-color: var(--black-60); }
.bg-black-50 { background-color: var(--black-50); }
.bg-black-40 { background-color: var(--black-40); }
.bg-black-30 { background-color: var(--black-30); }
.bg-black-20 { background-color: var(--black-20); }
.bg-black-10 { background-color: var(--black-10); }
.bg-black-05 { background-color: var(--black-05); }
.bg-white-90 { background-color: var(--white-90); }
.bg-white-80 { background-color: var(--white-80); }
.bg-white-70 { background-color: var(--white-70); }
.bg-white-60 { background-color: var(--white-60); }
.bg-white-50 { background-color: var(--white-50); }
.bg-white-40 { background-color: var(--white-40); }
.bg-white-30 { background-color: var(--white-30); }
.bg-white-20 { background-color: var(--white-20); }
.bg-white-10 { background-color: var(--white-10); }
.bg-overlay-tint-0 { background-color: var( --overlay-tint-0); }
.bg-overlay-tint-1 { background-color: var( --overlay-tint-1); }
.bg-overlay-tint-2 { background-color: var( --overlay-tint-2); }
.bg-overlay-tint-3 { background-color: var( --overlay-tint-3); }
.bg-overlay-tint-4 { background-color: var( --overlay-tint-4); }
.bg-overlay-tint-5 { background-color: var( --overlay-tint-5); }
.bg-overlay-tint-6 { background-color: var( --overlay-tint-6); }
.bg-overlay-tint-7 { background-color: var( --overlay-tint-7); }
.bg-overlay-tint-8 { background-color: var( --overlay-tint-8); }
.bg-overlay-tint-9 { background-color: var( --overlay-tint-9); }
.bg-overlay-tint-10 { background-color: var( --overlay-tint-10); }
.bg-overlay-tint-11 { background-color: var( --overlay-tint-11); }
.bg-overlay-shadow-0 { background-color: var( --overlay-shadow-0); }
.bg-overlay-shadow-1 { background-color: var( --overlay-shadow-1); }
.bg-overlay-shadow-2 { background-color: var( --overlay-shadow-2); }
.bg-overlay-shadow-3 { background-color: var( --overlay-shadow-3); }
.bg-overlay-shadow-4 { background-color: var( --overlay-shadow-4); }
.bg-overlay-shadow-5 { background-color: var( --overlay-shadow-5); }
.bg-overlay-shadow-6 { background-color: var( --overlay-shadow-6); }
.bg-overlay-shadow-7 { background-color: var( --overlay-shadow-7); }
.bg-overlay-shadow-8 { background-color: var( --overlay-shadow-8); }
.bg-overlay-shadow-9 { background-color: var( --overlay-shadow-9); }
.bg-overlay-shadow-10 { background-color: var( --overlay-shadow-10); }
.bg-overlay-shadow-11 { background-color: var( --overlay-shadow-11); }
.bg-gray-0 { background-color: var( --gray-0); }
.bg-gray-1 { background-color: var( --gray-1); }
.bg-gray-2 { background-color: var( --gray-2); }
.bg-gray-3 { background-color: var( --gray-3); }
.bg-gray-4 { background-color: var( --gray-4); }
.bg-gray-5 { background-color: var( --gray-5); }
.bg-gray-6 { background-color: var( --gray-6); }
.bg-gray-7 { background-color: var( --gray-7); }
.bg-gray-8 { background-color: var( --gray-8); }
.bg-gray-9 { background-color: var( --gray-9); }
.bg-gray-10 { background-color: var( --gray-10); }
.bg-gray-11 { background-color: var( --gray-11); }
.bg-slate-gray-0 { background-color: var( --slate-gray-0); }
.bg-slate-gray-1 { background-color: var( --slate-gray-1); }
.bg-slate-gray-2 { background-color: var( --slate-gray-2); }
.bg-slate-gray-3 { background-color: var( --slate-gray-3); }
.bg-slate-gray-4 { background-color: var( --slate-gray-4); }
.bg-slate-gray-5 { background-color: var( --slate-gray-5); }
.bg-slate-gray-6 { background-color: var( --slate-gray-6); }
.bg-slate-gray-7 { background-color: var( --slate-gray-7); }
.bg-slate-gray-8 { background-color: var( --slate-gray-8); }
.bg-slate-gray-9 { background-color: var( --slate-gray-9); }
.bg-slate-gray-10 { background-color: var( --slate-gray-10); }
.bg-slate-gray-11 { background-color: var( --slate-gray-11); }
.bg-blue-0 { background-color: var( --blue-0); }
.bg-blue-1 { background-color: var( --blue-1); }
.bg-blue-2 { background-color: var( --blue-2); }
.bg-blue-3 { background-color: var( --blue-3); }
.bg-blue-4 { background-color: var( --blue-4); }
.bg-blue-5 { background-color: var( --blue-5); }
.bg-blue-6 { background-color: var( --blue-6); }
.bg-blue-7 { background-color: var( --blue-7); }
.bg-blue-8 { background-color: var( --blue-8); }
.bg-blue-9 { background-color: var( --blue-9); }
.bg-blue-10 { background-color: var( --blue-10); }
.bg-blue-11 { background-color: var( --blue-11); }
.bg-indigo-0 { background-color: var( --indigo-0); }
.bg-indigo-1 { background-color: var( --indigo-1); }
.bg-indigo-2 { background-color: var( --indigo-2); }
.bg-indigo-3 { background-color: var( --indigo-3); }
.bg-indigo-4 { background-color: var( --indigo-4); }
.bg-indigo-5 { background-color: var( --indigo-5); }
.bg-indigo-6 { background-color: var( --indigo-6); }
.bg-indigo-7 { background-color: var( --indigo-7); }
.bg-indigo-8 { background-color: var( --indigo-8); }
.bg-indigo-9 { background-color: var( --indigo-9); }
.bg-indigo-10 { background-color: var( --indigo-10); }
.bg-indigo-11 { background-color: var( --indigo-11); }
.bg-violet-0 { background-color: var( --violet-0); }
.bg-violet-1 { background-color: var( --violet-1); }
.bg-violet-2 { background-color: var( --violet-2); }
.bg-violet-3 { background-color: var( --violet-3); }
.bg-violet-4 { background-color: var( --violet-4); }
.bg-violet-5 { background-color: var( --violet-5); }
.bg-violet-6 { background-color: var( --violet-6); }
.bg-violet-7 { background-color: var( --violet-7); }
.bg-violet-8 { background-color: var( --violet-8); }
.bg-violet-9 { background-color: var( --violet-9); }
.bg-violet-10 { background-color: var( --violet-10); }
.bg-violet-11 { background-color: var( --violet-11); }
.bg-magenta-0 { background-color: var( --magenta-0); }
.bg-magenta-1 { background-color: var( --magenta-1); }
.bg-magenta-2 { background-color: var( --magenta-2); }
.bg-magenta-3 { background-color: var( --magenta-3); }
.bg-magenta-4 { background-color: var( --magenta-4); }
.bg-magenta-5 { background-color: var( --magenta-5); }
.bg-magenta-6 { background-color: var( --magenta-6); }
.bg-magenta-7 { background-color: var( --magenta-7); }
.bg-magenta-8 { background-color: var( --magenta-8); }
.bg-magenta-9 { background-color: var( --magenta-9); }
.bg-magenta-10 { background-color: var( --magenta-10); }
.bg-magenta-11 { background-color: var( --magenta-11); }
.bg-red-0 { background-color: var( --red-0); }
.bg-red-1 { background-color: var( --red-1); }
.bg-red-2 { background-color: var( --red-2); }
.bg-red-3 { background-color: var( --red-3); }
.bg-red-4 { background-color: var( --red-4); }
.bg-red-5 { background-color: var( --red-5); }
.bg-red-6 { background-color: var( --red-6); }
.bg-red-7 { background-color: var( --red-7); }
.bg-red-8 { background-color: var( --red-8); }
.bg-red-9 { background-color: var( --red-9); }
.bg-red-10 { background-color: var( --red-10); }
.bg-red-11 { background-color: var( --red-11); }
.bg-red-orange-0 { background-color: var( --red-orange-0); }
.bg-red-orange-1 { background-color: var( --red-orange-1); }
.bg-red-orange-2 { background-color: var( --red-orange-2); }
.bg-red-orange-3 { background-color: var( --red-orange-3); }
.bg-red-orange-4 { background-color: var( --red-orange-4); }
.bg-red-orange-5 { background-color: var( --red-orange-5); }
.bg-red-orange-6 { background-color: var( --red-orange-6); }
.bg-red-orange-7 { background-color: var( --red-orange-7); }
.bg-red-orange-8 { background-color: var( --red-orange-8); }
.bg-red-orange-9 { background-color: var( --red-orange-9); }
.bg-red-orange-10 { background-color: var( --red-orange-10); }
.bg-red-orange-11 { background-color: var( --red-orange-11); }
.bg-orange-0 { background-color: var( --orange-0); }
.bg-orange-1 { background-color: var( --orange-1); }
.bg-orange-2 { background-color: var( --orange-2); }
.bg-orange-3 { background-color: var( --orange-3); }
.bg-orange-4 { background-color: var( --orange-4); }
.bg-orange-5 { background-color: var( --orange-5); }
.bg-orange-6 { background-color: var( --orange-6); }
.bg-orange-7 { background-color: var( --orange-7); }
.bg-orange-8 { background-color: var( --orange-8); }
.bg-orange-9 { background-color: var( --orange-9); }
.bg-orange-10 { background-color: var( --orange-10); }
.bg-orange-11 { background-color: var( --orange-11); }
.bg-gold-0 { background-color: var( --gold-0); }
.bg-gold-1 { background-color: var( --gold-1); }
.bg-gold-2 { background-color: var( --gold-2); }
.bg-gold-3 { background-color: var( --gold-3); }
.bg-gold-4 { background-color: var( --gold-4); }
.bg-gold-5 { background-color: var( --gold-5); }
.bg-gold-6 { background-color: var( --gold-6); }
.bg-gold-7 { background-color: var( --gold-7); }
.bg-gold-8 { background-color: var( --gold-8); }
.bg-gold-9 { background-color: var( --gold-9); }
.bg-gold-10 { background-color: var( --gold-10); }
.bg-gold-11 { background-color: var( --gold-11); }
.bg-yellow-0 { background-color: var( --yellow-0); }
.bg-yellow-1 { background-color: var( --yellow-1); }
.bg-yellow-2 { background-color: var( --yellow-2); }
.bg-yellow-3 { background-color: var( --yellow-3); }
.bg-yellow-4 { background-color: var( --yellow-4); }
.bg-yellow-5 { background-color: var( --yellow-5); }
.bg-yellow-6 { background-color: var( --yellow-6); }
.bg-yellow-7 { background-color: var( --yellow-7); }
.bg-yellow-8 { background-color: var( --yellow-8); }
.bg-yellow-9 { background-color: var( --yellow-9); }
.bg-yellow-10 { background-color: var( --yellow-10); }
.bg-yellow-11 { background-color: var( --yellow-11); }
.bg-green-0 { background-color: var( --green-0); }
.bg-green-1 { background-color: var( --green-1); }
.bg-green-2 { background-color: var( --green-2); }
.bg-green-3 { background-color: var( --green-3); }
.bg-green-4 { background-color: var( --green-4); }
.bg-green-5 { background-color: var( --green-5); }
.bg-green-6 { background-color: var( --green-6); }
.bg-green-7 { background-color: var( --green-7); }
.bg-green-8 { background-color: var( --green-8); }
.bg-green-9 { background-color: var( --green-9); }
.bg-green-10 { background-color: var( --green-10); }
.bg-green-11 { background-color: var( --green-11); }
.bg-teal-0 { background-color: var( --teal-0); }
.bg-teal-1 { background-color: var( --teal-1); }
.bg-teal-2 { background-color: var( --teal-2); }
.bg-teal-3 { background-color: var( --teal-3); }
.bg-teal-4 { background-color: var( --teal-4); }
.bg-teal-5 { background-color: var( --teal-5); }
.bg-teal-6 { background-color: var( --teal-6); }
.bg-teal-7 { background-color: var( --teal-7); }
.bg-teal-8 { background-color: var( --teal-8); }
.bg-teal-9 { background-color: var( --teal-9); }
.bg-teal-10 { background-color: var( --teal-10); }
.bg-teal-11 { background-color: var( --teal-11); }
.bg-cyan-0 { background-color: var( --cyan-0); }
.bg-cyan-1 { background-color: var( --cyan-1); }
.bg-cyan-2 { background-color: var( --cyan-2); }
.bg-cyan-3 { background-color: var( --cyan-3); }
.bg-cyan-4 { background-color: var( --cyan-4); }
.bg-cyan-5 { background-color: var( --cyan-5); }
.bg-cyan-6 { background-color: var( --cyan-6); }
.bg-cyan-7 { background-color: var( --cyan-7); }
.bg-cyan-8 { background-color: var( --cyan-8); }
.bg-cyan-9 { background-color: var( --cyan-9); }
.bg-cyan-10 { background-color: var( --cyan-10); }
.bg-cyan-11 { background-color: var( --cyan-11); }
.bg-black { background-color: var(--black); }
.bg-near-black { background-color: var(--near-black); }
.bg-dark-gray { background-color: var(--dark-gray); }
.bg-mid-gray { background-color: var(--mid-gray); }
.bg-gray { background-color: var(--gray); }
.bg-silver { background-color: var(--silver); }
.bg-light-silver { background-color: var(--light-silver); }
.bg-moon-gray { background-color: var(--moon-gray); }
.bg-light-gray { background-color: var(--light-gray); }
.bg-near-white { background-color: var(--near-white); }
.bg-white { background-color: var(--white); }
.bg-transparent { background-color: var(--transparent); }
.bg-dark-red { background-color: var(--dark-red); }
.bg-red { background-color: var(--red); }
.bg-light-red { background-color: var(--light-red); }
.bg-orange { background-color: var(--orange); }
.bg-gold { background-color: var(--gold); }
.bg-yellow { background-color: var(--yellow); }
.bg-light-yellow { background-color: var(--light-yellow); }
.bg-purple { background-color: var(--purple); }
.bg-light-purple { background-color: var(--light-purple); }
.bg-dark-pink { background-color: var(--dark-pink); }
.bg-hot-pink { background-color: var(--hot-pink); }
.bg-pink { background-color: var(--pink); }
.bg-light-pink { background-color: var(--light-pink); }
.bg-dark-green { background-color: var(--dark-green); }
.bg-green { background-color: var(--green); }
.bg-light-green { background-color: var(--light-green); }
.bg-navy { background-color: var(--navy); }
.bg-dark-blue { background-color: var(--dark-blue); }
.bg-blue { background-color: var(--blue); }
.bg-light-blue { background-color: var(--light-blue); }
.bg-lightest-blue { background-color: var(--lightest-blue); }
.bg-washed-blue { background-color: var(--washed-blue); }
.bg-washed-green { background-color: var(--washed-green); }
.bg-washed-yellow { background-color: var(--washed-yellow); }
.bg-washed-red { background-color: var(--washed-red); }
.bg-inherit { background-color: inherit; }

1427
src/_spacing.css
View File

File diff suppressed because it is too large Load Diff

18
src/_tables.css
View File

@ -10,26 +10,10 @@
border-spacing: 0;
}
.striped--light-silver:nth-child(odd) {
.striped--light:nth-child(odd) {
background-color: var(--light-silver);
}
.striped--moon-gray:nth-child(odd) {
background-color: var(--moon-gray);
}
.striped--light-gray:nth-child(odd) {
background-color: var(--light-gray);
}
.striped--near-white:nth-child(odd) {
background-color: var(--near-white);
}
.stripe-light:nth-child(odd) {
background-color: var(--white-10);
}
.stripe-dark:nth-child(odd) {
background-color: var(--black-10);
}

12
src/_text-align.css
View File

@ -13,7 +13,7 @@
j = justify
Media Query Extensions:
-ns = not-small
-s = small
-m = medium
-l = large
@ -24,11 +24,11 @@
.tc { text-align: center; }
.tj { text-align: justify; }
@media (--breakpoint-not-small) {
.tl-ns { text-align: left; }
.tr-ns { text-align: right; }
.tc-ns { text-align: center; }
.tj-ns { text-align: justify; }
@media (--breakpoint-small) {
.tl-s { text-align: left; }
.tr-s { text-align: right; }
.tc-s { text-align: center; }
.tj-s { text-align: justify; }
}
@media (--breakpoint-medium) {

21
src/_text-decoration.css
View File

@ -5,7 +5,7 @@
Media Query Extensions:
-ns = not-small
-s = small
-m = medium
-l = large
@ -14,22 +14,3 @@
.strike { text-decoration: line-through; }
.underline { text-decoration: underline; }
.no-underline { text-decoration: none; }
@media (--breakpoint-not-small) {
.strike-ns { text-decoration: line-through; }
.underline-ns { text-decoration: underline; }
.no-underline-ns { text-decoration: none; }
}
@media (--breakpoint-medium) {
.strike-m { text-decoration: line-through; }
.underline-m { text-decoration: underline; }
.no-underline-m { text-decoration: none; }
}
@media (--breakpoint-large) {
.strike-l { text-decoration: line-through; }
.underline-l { text-decoration: underline; }
.no-underline-l { text-decoration: none; }
}

12
src/_text-transform.css
View File

@ -13,7 +13,7 @@
n = none
Media Query Extensions:
-ns = not-small
-ns = small
-m = medium
-l = large
@ -24,11 +24,11 @@
.ttu { text-transform: uppercase; }
.ttn { text-transform: none; }
@media (--breakpoint-not-small) {
.ttc-ns { text-transform: capitalize; }
.ttl-ns { text-transform: lowercase; }
.ttu-ns { text-transform: uppercase; }
.ttn-ns { text-transform: none; }
@media (--breakpoint-small) {
.ttc-s { text-transform: capitalize; }
.ttl-s { text-transform: lowercase; }
.ttu-s { text-transform: uppercase; }
.ttn-s { text-transform: none; }
}
@media (--breakpoint-medium) {

114
src/_type-scale.css
View File

@ -16,80 +16,68 @@
7 = 7th step in size scale
Media Query Extensions:
-ns = not-small
-s = small
-m = medium
-l = large
*/
/*
* For Hero/Marketing Titles
*
* These generally are too large for mobile
* so be careful using them on smaller screens.
* */
.f-6,
.f-headline {
font-size: 6rem;
}
.f-5,
.f-subheadline {
font-size: 5rem;
}
/* Type Scale */
.f1 { font-size: 3rem; }
.f2 { font-size: 2.25rem; }
.f3 { font-size: 1.5rem; }
.f4 { font-size: 1.25rem; }
.f5 { font-size: 1rem; }
.f6 { font-size: .875rem; }
.f7 { font-size: .75rem; } /* Small and hard to read for many people so use with extreme caution */
.f1 { font-size: .75rem; }
.f2 { font-size: .875rem; }
.f3 { font-size: 1rem; }
.f4 { font-size: 1.125rem; }
.f5 { font-size: 1.25rem; }
.f6 { font-size: 1.5rem; }
.f7 { font-size: 2rem; }
.f8 { font-size: 3rem; }
.f9 { font-size: 4rem; }
.f10 { font-size: 6rem; }
.f11 { font-size: 8rem; }
.f12 { font-size: 12rem; }
@media (--breakpoint-not-small){
.f-6-ns,
.f-headline-ns { font-size: 6rem; }
.f-5-ns,
.f-subheadline-ns { font-size: 5rem; }
.f1-ns { font-size: 3rem; }
.f2-ns { font-size: 2.25rem; }
.f3-ns { font-size: 1.5rem; }
.f4-ns { font-size: 1.25rem; }
.f5-ns { font-size: 1rem; }
.f6-ns { font-size: .875rem; }
.f7-ns { font-size: .75rem; }
@media (--breakpoint-small){
.f1-s { font-size: .75rem; }
.f2-s { font-size: .875rem; }
.f3-s { font-size: 1rem; }
.f4-s { font-size: 1.125rem; }
.f5-s { font-size: 1.25rem; }
.f6-s { font-size: 1.5rem; }
.f7-s { font-size: 2rem; }
.f8-s { font-size: 3rem; }
.f9-s { font-size: 4rem; }
.f10-s { font-size: 6rem; }
.f11-s { font-size: 8rem; }
.f12-s { font-size: 12rem; }
}
@media (--breakpoint-medium) {
.f-6-m,
.f-headline-m { font-size: 6rem; }
.f-5-m,
.f-subheadline-m { font-size: 5rem; }
.f1-m { font-size: 3rem; }
.f2-m { font-size: 2.25rem; }
.f3-m { font-size: 1.5rem; }
.f4-m { font-size: 1.25rem; }
.f5-m { font-size: 1rem; }
.f6-m { font-size: .875rem; }
.f7-m { font-size: .75rem; }
.f1-m { font-size: .75rem; }
.f2-m { font-size: .875rem; }
.f3-m { font-size: 1rem; }
.f4-m { font-size: 1.125rem; }
.f5-m { font-size: 1.25rem; }
.f6-m { font-size: 1.5rem; }
.f7-m { font-size: 2rem; }
.f8-m { font-size: 3rem; }
.f9-m { font-size: 4rem; }
.f10-m { font-size: 6rem; }
.f11-m { font-size: 8rem; }
.f12-m { font-size: 12rem; }
}
@media (--breakpoint-large) {
.f-6-l,
.f-headline-l {
font-size: 6rem;
}
.f-5-l,
.f-subheadline-l {
font-size: 5rem;
}
.f1-l { font-size: 3rem; }
.f2-l { font-size: 2.25rem; }
.f3-l { font-size: 1.5rem; }
.f4-l { font-size: 1.25rem; }
.f5-l { font-size: 1rem; }
.f6-l { font-size: .875rem; }
.f7-l { font-size: .75rem; }
.f1-l { font-size: .75rem; }
.f2-l { font-size: .875rem; }
.f3-l { font-size: 1rem; }
.f4-l { font-size: 1.125rem; }
.f5-l { font-size: 1.25rem; }
.f6-l { font-size: 1.5rem; }
.f7-l { font-size: 2rem; }
.f8-l { font-size: 3rem; }
.f9-l { font-size: 4rem; }
.f10-l { font-size: 6rem; }
.f11-l { font-size: 8rem; }
.f12-l { font-size: 12rem; }
}

68
src/_typography.css
View File

@ -4,7 +4,7 @@
http://tachyons.io/docs/typography/measure/
Media Query Extensions:
-ns = not-small
-ns = small
-m = medium
-l = large
@ -12,19 +12,19 @@
/* Measure is limited to ~66 characters */
/* Measure is limited to 66 characters */
.measure {
max-width: 30em;
max-width: 66ch;
}
/* Measure is limited to ~80 characters */
.measure-wide {
max-width: 34em;
max-width: 80ch;
}
/* Measure is limited to ~45 characters */
/* Measure is limited to 45 characters */
.measure-narrow {
max-width: 20em;
max-width: 45ch;
}
/* Book paragraph style - paragraphs are indented with no vertical spacing. */
@ -46,25 +46,17 @@
text-overflow: ellipsis;
}
@media (--breakpoint-not-small) {
.measure-ns {
max-width: 30em;
}
.measure-wide-ns {
max-width: 34em;
}
.measure-narrow-ns {
max-width: 20em;
}
.indent-ns {
@media (--breakpoint-small) {
.measure-s { max-width: 66ch; }
.measure-wide-s { max-width: 80ch; }
.measure-narrow-s { max-width: 45ch; }
.small-caps-s { font-variant: small-caps; }
.indent-s {
text-indent: 1em;
margin-top: 0;
margin-bottom: 0;
}
.small-caps-ns {
font-variant: small-caps;
}
.truncate-ns {
.truncate-s {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
@ -72,48 +64,32 @@
}
@media (--breakpoint-medium) {
.measure-m {
max-width: 30em;
}
.measure-wide-m {
max-width: 34em;
}
.measure-narrow-m {
max-width: 20em;
}
.measure-m { max-width: 66ch; }
.measure-wide-m { max-width: 80ch; }
.measure-narrow-m { max-width: 45ch; }
.small-caps-m { font-variant: small-caps; }
.indent-m {
text-indent: 1em;
margin-top: 0;
margin-bottom: 0;
}
.small-caps-m {
font-variant: small-caps;
}
.truncate-m {
white-space: nowrap;
white-mpace: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
}
@media (--breakpoint-large) {
.measure-l {
max-width: 30em;
}
.measure-wide-l {
max-width: 34em;
}
.measure-narrow-l {
max-width: 20em;
}
.measure-l { max-width: 66ch; }
.measure-wide-l { max-width: 80ch; }
.measure-narrow-l { max-width: 45ch; }
.small-caps-l { font-variant: small-caps; }
.indent-l {
text-indent: 1em;
margin-top: 0;
margin-bottom: 0;
}
.small-caps-l {
font-variant: small-caps;
}
.truncate-l {
white-space: nowrap;
overflow: hidden;

4
src/_utilities.css
View File

@ -3,7 +3,7 @@
UTILITIES
Media Query Extensions:
-ns = not-small
-ns = small
-m = medium
-l = large
@ -22,7 +22,7 @@
.mr-auto { margin-right: auto; }
.ml-auto { margin-left: auto; }
@media (--breakpoint-not-small){
@media (--breakpoint-small){
.center-ns {
margin-right: auto;
margin-left: auto;

12
src/_vertical-align.css
View File

@ -3,7 +3,7 @@
VERTICAL ALIGN
Media Query Extensions:
-ns = not-small
-s = small
-m = medium
-l = large
@ -14,11 +14,11 @@
.v-top { vertical-align: top; }
.v-btm { vertical-align: bottom; }
@media (--breakpoint-not-small) {
.v-base-ns { vertical-align: baseline; }
.v-mid-ns { vertical-align: middle; }
.v-top-ns { vertical-align: top; }
.v-btm-ns { vertical-align: bottom; }
@media (--breakpoint-small) {
.v-base-s { vertical-align: baseline; }
.v-mid-s { vertical-align: middle; }
.v-top-s { vertical-align: top; }
.v-btm-s { vertical-align: bottom; }
}
@media (--breakpoint-medium) {

6
src/_visibility.css
View File

@ -3,7 +3,7 @@
VISIBILITY
Media Query Extensions:
-ns = not-small
-s = small
-m = medium
-l = large
@ -22,8 +22,8 @@
clip: rect(1px, 1px, 1px, 1px);
}
@media (--breakpoint-not-small) {
.clip-ns {
@media (--breakpoint-small) {
.clip-s {
position: fixed !important;
_position: absolute !important;
clip: rect(1px 1px 1px 1px); /* IE6, IE7 */

10
src/_white-space.css
View File

@ -3,7 +3,7 @@
WHITE SPACE
Media Query Extensions:
-ns = not-small
-ns = small
-m = medium
-l = large
@ -14,10 +14,10 @@
.nowrap { white-space: nowrap; }
.pre { white-space: pre; }
@media (--breakpoint-not-small) {
.ws-normal-ns { white-space: normal; }
.nowrap-ns { white-space: nowrap; }
.pre-ns { white-space: pre; }
@media (--breakpoint-small) {
.ws-normal-s { white-space: normal; }
.nowrap-s { white-space: nowrap; }
.pre-s { white-space: pre; }
}
@media (--breakpoint-medium) {

36
src/_widths.css
View File

@ -34,7 +34,7 @@
Media Query Extensions:
-ns = not-small
-ns = small
-m = medium
-l = large
@ -51,23 +51,15 @@
.w-10 { width: 10%; }
.w-20 { width: 20%; }
.w-25 { width: 25%; }
.w-30 { width: 30%; }
.w-33 { width: 33%; }
.w-34 { width: 34%; }
.w-40 { width: 40%; }
.w-50 { width: 50%; }
.w-60 { width: 60%; }
.w-70 { width: 70%; }
.w-75 { width: 75%; }
.w-80 { width: 80%; }
.w-90 { width: 90%; }
.w-100 { width: 100%; }
.w-third { width: calc(100% / 3); }
.w-two-thirds { width: calc(100% / 1.5); }
.w-auto { width: auto; }
@media (--breakpoint-not-small) {
@media (--breakpoint-small) {
.w1-ns { width: 1rem; }
.w2-ns { width: 2rem; }
.w3-ns { width: 4rem; }
@ -76,16 +68,8 @@
.w-10-ns { width: 10%; }
.w-20-ns { width: 20%; }
.w-25-ns { width: 25%; }
.w-30-ns { width: 30%; }
.w-33-ns { width: 33%; }
.w-34-ns { width: 34%; }
.w-40-ns { width: 40%; }
.w-50-ns { width: 50%; }
.w-60-ns { width: 60%; }
.w-70-ns { width: 70%; }
.w-75-ns { width: 75%; }
.w-80-ns { width: 80%; }
.w-90-ns { width: 90%; }
.w-100-ns { width: 100%; }
.w-third-ns { width: calc(100% / 3); }
.w-two-thirds-ns { width: calc(100% / 1.5); }
@ -101,16 +85,8 @@
.w-10-m { width: 10%; }
.w-20-m { width: 20%; }
.w-25-m { width: 25%; }
.w-30-m { width: 30%; }
.w-33-m { width: 33%; }
.w-34-m { width: 34%; }
.w-40-m { width: 40%; }
.w-50-m { width: 50%; }
.w-60-m { width: 60%; }
.w-70-m { width: 70%; }
.w-75-m { width: 75%; }
.w-80-m { width: 80%; }
.w-90-m { width: 90%; }
.w-100-m { width: 100%; }
.w-third-m { width: calc(100% / 3); }
.w-two-thirds-m { width: calc(100% / 1.5); }
@ -126,16 +102,8 @@
.w-10-l { width: 10%; }
.w-20-l { width: 20%; }
.w-25-l { width: 25%; }
.w-30-l { width: 30%; }
.w-33-l { width: 33%; }
.w-34-l { width: 34%; }
.w-40-l { width: 40%; }
.w-50-l { width: 50%; }
.w-60-l { width: 60%; }
.w-70-l { width: 70%; }
.w-75-l { width: 75%; }
.w-80-l { width: 80%; }
.w-90-l { width: 90%; }
.w-100-l { width: 100%; }
.w-third-l { width: calc(100% / 3); }
.w-two-thirds-l { width: calc(100% / 1.5); }

10
src/_word-break.css
View File

@ -6,7 +6,7 @@
word = word-break
Media Query Extensions:
-ns = not-small
-s = small
-m = medium
-l = large
@ -16,10 +16,10 @@
.word-wrap { word-break: break-all; }
.word-nowrap { word-break: keep-all; }
@media (--breakpoint-not-small) {
.word-normal-ns { word-break: normal; }
.word-wrap-ns { word-break: break-all; }
.word-nowrap-ns { word-break: keep-all; }
@media (--breakpoint-small) {
.word-normal-s { word-break: normal; }
.word-wrap-s { word-break: break-all; }
.word-nowrap-s { word-break: keep-all; }
}
@media (--breakpoint-medium) {

8
src/tachyons.css
View File

@ -1,4 +1,4 @@
/*! TACHYONS v4.12.0 | http://tachyons.io */
/*! TACHYONS v5.0.0.beta | http://tachyons.io */
/*
*
@ -30,6 +30,7 @@
/* Modules */
@import './_box-sizing';
@import './_align';
@import './_aspect-ratios';
@import './_images';
@import './_background-size';
@ -45,6 +46,11 @@
@import './_coordinates';
@import './_clears';
@import './_display';
@import './_gap';
@import './_grid-template-columns';
@import './_grid-column';
@import './_grid-row';
@import './_filters';
@import './_flexbox';
@import './_floats';
@import './_font-family';

2383
yarn.lock Normal file
View File

File diff suppressed because it is too large Load Diff