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

Adds variables to gap module

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

62
src/_gap.css
View File

@ -1,17 +1,3 @@
/* Variables */
:root {
--spacing-0: 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/
@ -28,35 +14,35 @@
*/
.g0 { gap: var(--spacing-0); }
.g1 { gap: var(--spacing-1); }
.g2 { gap: var(--spacing-2); }
.g3 { gap: var(--spacing-3); }
.g4 { gap: var(--spacing-4); }
.g5 { gap: var(--spacing-5); }
.g6 { gap: var(--spacing-6); }
.g7 { gap: var(--spacing-7); }
.g0 { gap: var(--spacing-0, 0); }
.g1 { gap: var(--spacing-1, 4px); }
.g2 { gap: var(--spacing-2, 8px); }
.g3 { gap: var(--spacing-3, 16px); }
.g4 { gap: var(--spacing-4, 32px); }
.g5 { gap: var(--spacing-5, 64px); }
.g6 { gap: var(--spacing-6, 128px); }
.g7 { gap: var(--spacing-7, 256px); }
@media (--breakpoint-small) {
.g0-s { gap: var(--spacing-0); }
.g1-s { gap: var(--spacing-1); }
.g2-s { gap: var(--spacing-2); }
.g3-s { gap: var(--spacing-3); }
.g4-s { gap: var(--spacing-4); }
.g5-s { gap: var(--spacing-5); }
.g6-s { gap: var(--spacing-6); }
.g7-s { gap: var(--spacing-7); }
.g0-s { gap: var(--spacing-0, 0); }
.g1-s { gap: var(--spacing-1, 4px); }
.g2-s { gap: var(--spacing-2, 8px); }
.g3-s { gap: var(--spacing-3, 16px); }
.g4-s { gap: var(--spacing-4, 32px); }
.g5-s { gap: var(--spacing-5, 64px); }
.g6-s { gap: var(--spacing-6, 128px); }
.g7-s { gap: var(--spacing-7, 256px); }
}
@media (--breakpoint-medium) {
.g0-m { gap: var(--spacing-0); }
.g1-m { gap: var(--spacing-1); }
.g2-m { gap: var(--spacing-2); }
.g3-m { gap: var(--spacing-3); }
.g4-m { gap: var(--spacing-4); }
.g5-m { gap: var(--spacing-5); }
.g6-m { gap: var(--spacing-6); }
.g7-m { gap: var(--spacing-7); }
.g0-m { gap: var(--spacing-0, 0); }
.g1-m { gap: var(--spacing-1, 4px); }
.g2-m { gap: var(--spacing-2, 8px); }
.g3-m { gap: var(--spacing-3, 16px); }
.g4-m { gap: var(--spacing-4, 32px); }
.g5-m { gap: var(--spacing-5, 64px); }
.g6-m { gap: var(--spacing-6, 128px); }
.g7-m { gap: var(--spacing-7, 256px); }
}