mirror of
https://github.com/tachyons-css/tachyons.git
synced 2026-02-06 11:06:58 +00:00
60 lines
1.7 KiB
CSS
60 lines
1.7 KiB
CSS
/*
|
|
GAP: GRID AND FLEX SPACING
|
|
Docs: http://tachyons.io/docs/layout/gap/
|
|
|
|
Base:
|
|
g = gap
|
|
|
|
|
|
Media Query Extensions:
|
|
-s = small
|
|
-m = medium
|
|
-l = large
|
|
|
|
*/
|
|
|
|
|
|
.gc0 { gap-column: var(--spacing-0, 0); }
|
|
.gc1 { gap-column: var(--spacing-1, 4px); }
|
|
.gc2 { gap-column: var(--spacing-2, 8px); }
|
|
.gc3 { gap-column: var(--spacing-3, 16px); }
|
|
.gc4 { gap-column: var(--spacing-4, 32px); }
|
|
.gc5 { gap-column: var(--spacing-5, 64px); }
|
|
.gc6 { gap-column: var(--spacing-6, 128px); }
|
|
.gc7 { gap-column: var(--spacing-7, 256px); }
|
|
|
|
@container (min-width:30em) {
|
|
.gc0-s { gap-column: var(--spacing-0, 0); }
|
|
.gc1-s { gap-column: var(--spacing-1, 4px); }
|
|
.gc2-s { gap-column: var(--spacing-2, 8px); }
|
|
.gc3-s { gap-column: var(--spacing-3, 16px); }
|
|
.gc4-s { gap-column: var(--spacing-4, 32px); }
|
|
.gc5-s { gap-column: var(--spacing-5, 64px); }
|
|
.gc6-s { gap-column: var(--spacing-6, 128px); }
|
|
.gc7-s { gap-column: var(--spacing-7, 256px); }
|
|
}
|
|
|
|
@container (min-width:48em) {
|
|
.gc0-m { gap-column: var(--spacing-0, 0); }
|
|
.gc1-m { gap-column: var(--spacing-1, 4px); }
|
|
.gc2-m { gap-column: var(--spacing-2, 8px); }
|
|
.gc3-m { gap-column: var(--spacing-3, 16px); }
|
|
.gc4-m { gap-column: var(--spacing-4, 32px); }
|
|
.gc5-m { gap-column: var(--spacing-5, 64px); }
|
|
.gc6-m { gap-column: var(--spacing-6, 128px); }
|
|
.gc7-m { gap-column: var(--spacing-7, 256px); }
|
|
}
|
|
|
|
|
|
@container (min-width:64em) {
|
|
.gc0-l { gap-column: var(--spacing-0); }
|
|
.gc1-l { gap-column: var(--spacing-1); }
|
|
.gc2-l { gap-column: var(--spacing-2); }
|
|
.gc3-l { gap-column: var(--spacing-3); }
|
|
.gc4-l { gap-column: var(--spacing-4); }
|
|
.gc5-l { gap-column: var(--spacing-5); }
|
|
.gc6-l { gap-column: var(--spacing-6); }
|
|
.gc7-l { gap-column: var(--spacing-7); }
|
|
}
|
|
|