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

Adds variables to widths scale

Browse Source
This commit is contained in:
mrmrs 2023-07-12 12:11:00 -07:00
parent 15e7091ec7
commit a46bfb13d3
1 changed files with 49 additions and 30 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

79
src/_widths.css
View File

@ -12,6 +12,9 @@
3 = 3rd step in width scale
4 = 4th step in width scale
5 = 5th step in width scale
6 = 6th step in width scale
7 = 7th step in width scale
8 = 8th step in width scale
-10 = literal value 10%
-20 = literal value 20%
@ -34,7 +37,7 @@
Media Query Extensions:
-ns = small
-s = small
-m = medium
-l = large
@ -42,11 +45,15 @@
/* Width Scale */
.w1 { width: 1rem; }
.w2 { width: 2rem; }
.w3 { width: 4rem; }
.w4 { width: 8rem; }
.w5 { width: 16rem; }
.w0 { width: var(--size-0, 0); }
.w1 { width: var(--size-1, 1rem); }
.w2 { width: var(--size-2, 2rem); }
.w3 { width: var(--size-3, 3rem); }
.w4 { width: var(--size-4, 4rem); }
.w5 { width: var(--size-5, 8rem); }
.w6 { width: var(--size-6, 16rem); }
.w7 { width: var(--size-7, 32rem); }
.w8 { width: var(--size-8, 64rem); }
.w-10 { width: 10%; }
.w-20 { width: 20%; }
@ -60,28 +67,36 @@
.w-auto { width: auto; }
@media (--breakpoint-small) {
.w1-ns { width: 1rem; }
.w2-ns { width: 2rem; }
.w3-ns { width: 4rem; }
.w4-ns { width: 8rem; }
.w5-ns { width: 16rem; }
.w-10-ns { width: 10%; }
.w-20-ns { width: 20%; }
.w-25-ns { width: 25%; }
.w-50-ns { width: 50%; }
.w-75-ns { width: 75%; }
.w-100-ns { width: 100%; }
.w-third-ns { width: calc(100% / 3); }
.w-two-thirds-ns { width: calc(100% / 1.5); }
.w-auto-ns { width: auto; }
.w0-s { width: var(--size-0, 0); }
.w1-s { width: var(--size-1, 1rem); }
.w2-s { width: var(--size-2, 2rem); }
.w3-s { width: var(--size-3, 3rem); }
.w4-s { width: var(--size-4, 4rem); }
.w5-s { width: var(--size-5, 8rem); }
.w6-s { width: var(--size-6, 16rem); }
.w7-s { width: var(--size-7, 32rem); }
.w8-s { width: var(--size-8, 64rem); }
.w-10-s { width: 10%; }
.w-20-s { width: 20%; }
.w-25-s { width: 25%; }
.w-50-s { width: 50%; }
.w-75-s { width: 75%; }
.w-100-s { width: 100%; }
.w-third-s { width: calc(100% / 3); }
.w-two-thirds-s { width: calc(100% / 1.5); }
.w-auto-s { width: auto; }
}
@media (--breakpoint-medium) {
.w1-m { width: 1rem; }
.w2-m { width: 2rem; }
.w3-m { width: 4rem; }
.w4-m { width: 8rem; }
.w5-m { width: 16rem; }
.w0-m { width: var(--size-0, 0); }
.w1-m { width: var(--size-1, 1rem); }
.w2-m { width: var(--size-2, 2rem); }
.w3-m { width: var(--size-3, 3rem); }
.w4-m { width: var(--size-4, 4rem); }
.w5-m { width: var(--size-5, 8rem); }
.w6-m { width: var(--size-6, 16rem); }
.w7-m { width: var(--size-7, 32rem); }
.w8-m { width: var(--size-8, 64rem); }
.w-10-m { width: 10%; }
.w-20-m { width: 20%; }
.w-25-m { width: 25%; }
@ -94,11 +109,15 @@
}
@media (--breakpoint-large) {
.w1-l { width: 1rem; }
.w2-l { width: 2rem; }
.w3-l { width: 4rem; }
.w4-l { width: 8rem; }
.w5-l { width: 16rem; }
.w0-l { width: var(--size-0, 0); }
.w1-l { width: var(--size-1, 1rem); }
.w2-l { width: var(--size-2, 2rem); }
.w3-l { width: var(--size-3, 3rem); }
.w4-l { width: var(--size-4, 4rem); }
.w5-l { width: var(--size-5, 8rem); }
.w6-l { width: var(--size-6, 16rem); }
.w7-l { width: var(--size-7, 32rem); }
.w8-l { width: var(--size-8, 64rem); }
.w-10-l { width: 10%; }
.w-20-l { width: 20%; }
.w-25-l { width: 25%; }