Skip to content

Commit ed85eca

Browse files
SarmagedSarmaged
authored
release: version 2025.1.25 (#64)
1 parent 40b82fc commit ed85eca

File tree

5 files changed

+180
-94
lines changed

5 files changed

+180
-94
lines changed

‎helpers.css‎

Lines changed: 2 additions & 2 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "style-forge.helpers",
3-
"version": "2025.1.24",
3+
"version": "2025.1.25",
44
"description": "Style-Forge.Helpers: essential CSS helper classes for spacing, alignment, visibility, and more in web development.",
55
"type": "module",
66
"main": "helpers.css",

‎src/gap.css‎

Lines changed: 137 additions & 75 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,8 @@
11
/* flex */
22
.d\:f, .d\:f\:x, .d\:f\:y {
3+
--sf-gap-x: var(--sf-gap-x-sm);
4+
--sf-gap-y: var(--sf-gap-y-sm);
5+
36
row-gap: var(--sf-gap-y);
47
column-gap: var(--sf-gap-x);
58
}
@@ -30,6 +33,9 @@
3033

3134
/* grid */
3235
.d\:g, .d\:g\:x, .d\:g\:y {
36+
--sf-gap-x: var(--sf-gap-x-sm);
37+
--sf-gap-y: var(--sf-gap-y-sm);
38+
3339
row-gap: var(--sf-gap-y);
3440
column-gap: var(--sf-gap-x);
3541
}
@@ -40,7 +46,13 @@
4046
}
4147

4248
/* inline */
43-
.\$d\:i { margin-top: calc(var(--sf-gap-y) * -1); margin-left: calc(var(--sf-gap-x) * -1) }
49+
.\$d\:i {
50+
--sf-gap-x: var(--sf-gap-x-sm);
51+
--sf-gap-y: var(--sf-gap-y-sm);
52+
53+
margin-top: calc(var(--sf-gap-y) * -1);
54+
margin-left: calc(var(--sf-gap-x) * -1);
55+
}
4456
.\$d\:i > * { margin-top: var(--sf-gap-y); margin-left: var(--sf-gap-x) }
4557

4658
.\$d\:i > .\$d\:i, .\$d\:i > [class*='cols'] {
@@ -63,6 +75,9 @@
6375
.cols\:11,
6476
.cols\:12
6577
{
78+
--sf-gap-x: var(--sf-gap-x-sm);
79+
--sf-gap-y: var(--sf-gap-y-sm);
80+
6681
margin-top: calc(var(--sf-gap-y) * -1);
6782
margin-left: calc(var(--sf-gap-x) * -1);
6883
}
@@ -133,14 +148,6 @@
133148
{ padding-top: var(--sf-gap-y) }
134149

135150
/* gap */
136-
.gap:not(html) { --sf-gap-x: var(--sf-em-sm); --sf-gap-y: var(--sf-em-sm) }
137-
.gap\:x { --sf-gap-x: var(--sf-em-sm) }
138-
.gap\:y { --sf-gap-y: var(--sf-em-sm) }
139-
140-
.gap\:0 { --sf-gap-x: 0em; --sf-gap-y: 0em }
141-
.gap\:x\:0 { --sf-gap-x: 0em }
142-
.gap\:y\:0 { --sf-gap-y: 0em }
143-
144151
.gap:not(html):not(.d\:f):not(.d\:f\:x):not(.d\:f\:y):not(.d\:g):not(.d\:g\:x):not(.d\:g\:y) { margin-top: calc(var(--sf-gap-y) * -1); margin-left: calc(var(--sf-gap-x) * -1) }
145152
.gap\:x:not(.d\:f):not(.d\:f\:x):not(.d\:f\:y):not(.d\:g):not(.d\:g\:x):not(.d\:g\:y) { margin-left: calc(var(--sf-gap-x) * -1) }
146153
.gap\:y:not(.d\:f):not(.d\:f\:x):not(.d\:f\:y):not(.d\:g):not(.d\:g\:x):not(.d\:g\:y) { margin-top: calc(var(--sf-gap-y) * -1) }
@@ -149,9 +156,25 @@
149156
.gap\:x:not([class*='cols']):not(.d\:f):not(.d\:f\:x):not(.d\:f\:y):not(.d\:g):not(.d\:g\:x):not(.d\:g\:y) > * { margin-left: var(--sf-gap-x) }
150157
.gap\:y:not([class*='cols']):not(.d\:f):not(.d\:f\:x):not(.d\:f\:y):not(.d\:g):not(.d\:g\:x):not(.d\:g\:y) > * { margin-top: var(--sf-gap-y) }
151158

152-
.gap\:0 { margin-top: 0; margin-left: 0 }
153-
.gap\:x\:0 { margin-left: 0 }
154-
.gap\:y\:0 { margin-top: 0 }
159+
.gap\:xs { --sf-gap-x: var(--sf-gap-x-xs); --sf-gap-y: var(--sf-gap-y-xs) }
160+
.gap\:sm { --sf-gap-x: var(--sf-gap-x-sm); --sf-gap-y: var(--sf-gap-y-sm) }
161+
.gap\:ms { --sf-gap-x: var(--sf-gap-x-ms); --sf-gap-y: var(--sf-gap-y-ms) }
162+
.gap\:ls { --sf-gap-x: var(--sf-gap-x-ls); --sf-gap-y: var(--sf-gap-y-ls) }
163+
.gap\:md { --sf-gap-x: var(--sf-gap-x-md); --sf-gap-y: var(--sf-gap-y-md) }
164+
.gap\:lg { --sf-gap-x: var(--sf-gap-x-lg); --sf-gap-y: var(--sf-gap-y-lg) }
165+
.gap\:xl { --sf-gap-x: var(--sf-gap-x-xl); --sf-gap-y: var(--sf-gap-y-xl) }
166+
167+
.gap\:x\:xs { --sf-gap-x: var(--sf-gap-x-xs) } .gap\:y\:xs { --sf-gap-y: var(--sf-gap-y-xs) }
168+
.gap\:x\:sm { --sf-gap-x: var(--sf-gap-x-sm) } .gap\:y\:sm { --sf-gap-y: var(--sf-gap-y-sm) }
169+
.gap\:x\:ms { --sf-gap-x: var(--sf-gap-x-ms) } .gap\:y\:ms { --sf-gap-y: var(--sf-gap-y-ms) }
170+
.gap\:x\:ls { --sf-gap-x: var(--sf-gap-x-ls) } .gap\:y\:ls { --sf-gap-y: var(--sf-gap-y-ls) }
171+
.gap\:x\:md { --sf-gap-x: var(--sf-gap-x-md) } .gap\:y\:md { --sf-gap-y: var(--sf-gap-y-md) }
172+
.gap\:x\:lg { --sf-gap-x: var(--sf-gap-x-lg) } .gap\:y\:lg { --sf-gap-y: var(--sf-gap-y-lg) }
173+
.gap\:x\:xl { --sf-gap-x: var(--sf-gap-x-xl) } .gap\:y\:xl { --sf-gap-y: var(--sf-gap-y-xl) }
174+
175+
.gap\:0 { --sf-gap-x: 0em; --sf-gap-y: 0em; margin-top: 0; margin-left: 0 }
176+
.gap\:x\:0 { --sf-gap-x: 0em; margin-left: 0 }
177+
.gap\:y\:0 { --sf-gap-y: 0em; margin-top: 0 }
155178

156179
.gap\:0 > * { margin-top: 0; margin-left: 0 }
157180
.gap\:x\:0 > * { margin-left: 0 }
@@ -280,75 +303,114 @@ html.var [class*='cols'] > [class*='col'] { margin-top: 0; padding-top: 0.5em; p
280303
html.var [class*='cols'] > [class*='col']:not([class*='col:start']) { margin-left: 0 }
281304

282305
html.var .gap[class*='cols'] > [class*='col'] { padding-top: 0.5em; padding-left: 0.5em }
306+
307+
html.var .gap\:x[class*='cols'] { margin-left: -0.5em }
283308
html.var .gap\:x[class*='cols'] > [class*='col'] { padding-left: 0.5em }
309+
310+
html.var .gap\:y[class*='cols'] { margin-top: -0.5em }
284311
html.var .gap\:y[class*='cols'] > [class*='col'] { padding-top: 0.5em }
285312

313+
html.var .gap\:xs[class*='cols'] { margin-top: -0.25em; margin-left: -0.25em }
314+
html.var .gap\:sm[class*='cols'] { margin-top: -0.5em; margin-left: -0.5em }
315+
html.var .gap\:ms[class*='cols'] { margin-top: -0.75em; margin-left: -0.75em }
316+
html.var .gap\:ls[class*='cols'] { margin-top: -0.85em; margin-left: -0.85em }
317+
html.var .gap\:md[class*='cols'] { margin-top: -1em; margin-left: -1em }
318+
html.var .gap\:lg[class*='cols'] { margin-top: -1.5em; margin-left: -1.5em }
319+
html.var .gap\:xl[class*='cols'] { margin-top: -2em; margin-left: -2em }
320+
321+
html.var .gap\:xs[class*='cols'] > [class*='col'] { margin-top: 0; padding-top: 0.25em; padding-left: 0.25em }
322+
html.var .gap\:sm[class*='cols'] > [class*='col'] { margin-top: 0; padding-top: 0.5em; padding-left: 0.5em }
323+
html.var .gap\:ms[class*='cols'] > [class*='col'] { margin-top: 0; padding-top: 0.75em; padding-left: 0.75em }
324+
html.var .gap\:ls[class*='cols'] > [class*='col'] { margin-top: 0; padding-top: 0.85em; padding-left: 0.85em }
325+
html.var .gap\:md[class*='cols'] > [class*='col'] { margin-top: 0; padding-top: 1em; padding-left: 1em }
326+
html.var .gap\:lg[class*='cols'] > [class*='col'] { margin-top: 0; padding-top: 1.5em; padding-left: 1.5em }
327+
html.var .gap\:xl[class*='cols'] > [class*='col'] { margin-top: 0; padding-top: 2em; padding-left: 2em }
328+
329+
html.var .gap\:xs[class*='cols'] > [class*='col']:not([class*='col:start']) { margin-left: 0 }
330+
html.var .gap\:sm[class*='cols'] > [class*='col']:not([class*='col:start']) { margin-left: 0 }
331+
html.var .gap\:ms[class*='cols'] > [class*='col']:not([class*='col:start']) { margin-left: 0 }
332+
html.var .gap\:ls[class*='cols'] > [class*='col']:not([class*='col:start']) { margin-left: 0 }
333+
html.var .gap\:md[class*='cols'] > [class*='col']:not([class*='col:start']) { margin-left: 0 }
334+
html.var .gap\:lg[class*='cols'] > [class*='col']:not([class*='col:start']) { margin-left: 0 }
335+
html.var .gap\:xl[class*='cols'] > [class*='col']:not([class*='col:start']) { margin-left: 0 }
336+
337+
html.var .gap\:x\:xs[class*='cols'] { margin-left: -0.25em }
338+
html.var .gap\:x\:sm[class*='cols'] { margin-left: -0.5em }
339+
html.var .gap\:x\:ms[class*='cols'] { margin-left: -0.75em }
340+
html.var .gap\:x\:ls[class*='cols'] { margin-left: -0.85em }
341+
html.var .gap\:x\:md[class*='cols'] { margin-left: -1em }
342+
html.var .gap\:x\:lg[class*='cols'] { margin-left: -1.5em }
343+
html.var .gap\:x\:xl[class*='cols'] { margin-left: -2em }
344+
345+
html.var .gap\:x\:xs[class*='cols'] > [class*='col'] { padding-left: 0.25em }
346+
html.var .gap\:x\:sm[class*='cols'] > [class*='col'] { padding-left: 0.5em }
347+
html.var .gap\:x\:ms[class*='cols'] > [class*='col'] { padding-left: 0.75em }
348+
html.var .gap\:x\:ls[class*='cols'] > [class*='col'] { padding-left: 0.85em }
349+
html.var .gap\:x\:md[class*='cols'] > [class*='col'] { padding-left: 1em }
350+
html.var .gap\:x\:lg[class*='cols'] > [class*='col'] { padding-left: 1.5em }
351+
html.var .gap\:x\:xl[class*='cols'] > [class*='col'] { padding-left: 2em }
352+
353+
html.var .gap\:y\:xs[class*='cols'] { margin-top: -0.25em }
354+
html.var .gap\:y\:sm[class*='cols'] { margin-top: -0.5em }
355+
html.var .gap\:y\:ms[class*='cols'] { margin-top: -0.75em }
356+
html.var .gap\:y\:ls[class*='cols'] { margin-top: -0.85em }
357+
html.var .gap\:y\:md[class*='cols'] { margin-top: -1em }
358+
html.var .gap\:y\:lg[class*='cols'] { margin-top: -1.5em }
359+
html.var .gap\:y\:xl[class*='cols'] { margin-top: -2em }
360+
361+
html.var .gap\:y\:xs[class*='cols'] > [class*='col'] { padding-top: 0.25em }
362+
html.var .gap\:y\:sm[class*='cols'] > [class*='col'] { padding-top: 0.5em }
363+
html.var .gap\:y\:ms[class*='cols'] > [class*='col'] { padding-top: 0.75em }
364+
html.var .gap\:y\:ls[class*='cols'] > [class*='col'] { padding-top: 0.85em }
365+
html.var .gap\:y\:md[class*='cols'] > [class*='col'] { padding-top: 1em }
366+
html.var .gap\:y\:lg[class*='cols'] > [class*='col'] { padding-top: 1.5em }
367+
html.var .gap\:y\:xl[class*='cols'] > [class*='col'] { padding-top: 2em }
368+
369+
html.var .gap\:0[class*='cols'] { margin-top: 0; margin-left: 0 }
286370
html.var .gap\:0[class*='cols'] > [class*='col'] { padding-top: 0; padding-left: 0 }
371+
372+
html.var .gap\:x\:0[class*='cols'] { margin-left: 0 }
287373
html.var .gap\:x\:0[class*='cols'] > [class*='col'] { padding-left: 0 }
374+
375+
html.var .gap\:y\:0[class*='cols'] { margin-top: 0 }
288376
html.var .gap\:y\:0[class*='cols'] > [class*='col'] { padding-top: 0 }
289377

290378
/* gap */
291379
html.var .gap { margin-top: -0.5em; margin-left: -0.5em }
292-
html.var .gap\:x { margin-left: -0.5em }
293-
html.var .gap\:y { margin-top: -0.5em }
294-
295-
html.var .gap > * { margin-top: 0.5em; margin-left: 0.5em }
296-
html.var .gap\:x > * { margin-left: 0.5em }
297-
html.var .gap\:y > * { margin-top: 0.5em }
298-
299-
html.var .gap\:0.d\:f,
300-
html.var .gap\:0.d\:f\:x,
301-
html.var .gap\:0.d\:f\:y,
302-
html.var .gap\:0.d\:g,
303-
html.var .gap\:0.d\:g\:x,
304-
html.var .gap\:0.d\:g\:y,
305-
html.var .gap\:0
306-
{ margin-top: 0; margin-left: 0 }
307-
308-
html.var .gap\:x\:0.d\:f,
309-
html.var .gap\:x\:0.d\:f\:x,
310-
html.var .gap\:x\:0.d\:f\:y,
311-
html.var .gap\:x\:0.d\:g,
312-
html.var .gap\:x\:0.d\:g\:x,
313-
html.var .gap\:x\:0.d\:g\:y,
314-
html.var .gap\:x\:0
315-
{ margin-left: 0 }
316-
317-
html.var .gap\:y\:0.d\:f,
318-
html.var .gap\:y\:0.d\:f\:x,
319-
html.var .gap\:y\:0.d\:f\:y,
320-
html.var .gap\:y\:0.d\:g,
321-
html.var .gap\:y\:0.d\:g\:x,
322-
html.var .gap\:y\:0.d\:g\:y,
323-
html.var .gap\:y\:0
324-
{ margin-top: 0 }
325-
326-
html.var .gap\:0.d\:f > *,
327-
html.var .gap\:0.d\:f\:x > *,
328-
html.var .gap\:0.d\:f\:y > *,
329-
html.var .gap\:0.d\:g > *,
330-
html.var .gap\:0.d\:g\:x > *,
331-
html.var .gap\:0.d\:g\:y > *,
332-
html.var .gap\:0 > *[class*='col:start'],
333-
html.var .gap\:0 > *
334-
{ margin-top: 0; margin-left: 0 }
335-
336-
html.var .gap\:x\:0.d\:f > *,
337-
html.var .gap\:x\:0.d\:f\:x > *,
338-
html.var .gap\:x\:0.d\:f\:y > *,
339-
html.var .gap\:x\:0.d\:g > *,
340-
html.var .gap\:x\:0.d\:g\:x > *,
341-
html.var .gap\:x\:0.d\:g\:y > *,
342-
html.var .gap\:x\:0 > *[class*='col:start'],
343-
html.var .gap\:x\:0 > *
344-
{ margin-left: 0 }
345-
346-
html.var .gap\:y\:0.d\:f > *,
347-
html.var .gap\:y\:0.d\:f\:x > *,
348-
html.var .gap\:y\:0.d\:f\:y > *,
349-
html.var .gap\:y\:0.d\:g > *,
350-
html.var .gap\:y\:0.d\:g\:x > *,
351-
html.var .gap\:y\:0.d\:g\:y > *,
352-
html.var .gap\:y\:0 > *[class*='col:start'],
353-
html.var .gap\:y\:0 > *
354-
{ margin-top: 0 }
380+
html.var .gap > * { margin-top: 0.5em } html.var .gap > *:not([class*='col:start']) { margin-left: 0.5em }
381+
html.var .gap\:x { margin-left: -0.5em } html.var .gap\:x > *:not([class*='col:start']) { margin-left: 0.5em }
382+
html.var .gap\:y { margin-top: -0.5em } html.var .gap\:y > * { margin-top: 0.5em }
383+
384+
html.var .gap\:xs { margin-top: -0.25em; margin-left: -0.25em } html.var .gap\:xs > * { margin-top: 0.25em } html.var .gap\:xs > *:not([class*='col:start']) { margin-left: 0.25em }
385+
html.var .gap\:sm { margin-top: -0.5em; margin-left: -0.5em } html.var .gap\:sm > * { margin-top: 0.5em } html.var .gap\:sm > *:not([class*='col:start']) { margin-left: 0.5em }
386+
html.var .gap\:ms { margin-top: -0.75em; margin-left: -0.75em } html.var .gap\:ms > * { margin-top: 0.75em } html.var .gap\:ms > *:not([class*='col:start']) { margin-top: 0.75em }
387+
html.var .gap\:ls { margin-top: -0.85em; margin-left: -0.85em } html.var .gap\:ls > * { margin-top: 0.85em } html.var .gap\:ls > *:not([class*='col:start']) { margin-left: 0.85em }
388+
html.var .gap\:md { margin-top: -1em; margin-left: -1em } html.var .gap\:md > * { margin-top: 1em } html.var .gap\:md > *:not([class*='col:start']) { margin-left: 1em }
389+
html.var .gap\:lg { margin-top: -1.5em; margin-left: -1.5em } html.var .gap\:lg > * { margin-top: 1.5em } html.var .gap\:lg > *:not([class*='col:start']) { margin-left: 1.5em }
390+
html.var .gap\:xl { margin-top: -2em; margin-left: -2em } html.var .gap\:xl > * { margin-top: 2em } html.var .gap\:xl > *:not([class*='col:start']) { margin-left: 2em }
391+
392+
html.var .gap\:x\:xs { margin-left: -0.25em } html.var .gap\:x\:xs > *:not([class*='col:start']) { margin-left: 0.25em }
393+
html.var .gap\:x\:sm { margin-left: -0.5em } html.var .gap\:x\:sm > *:not([class*='col:start']) { margin-left: 0.5em }
394+
html.var .gap\:x\:ms { margin-left: -0.75em } html.var .gap\:x\:ms > *:not([class*='col:start']) { margin-left: 0.75em }
395+
html.var .gap\:x\:ls { margin-left: -0.85em } html.var .gap\:x\:ls > *:not([class*='col:start']) { margin-left: 0.85em }
396+
html.var .gap\:x\:md { margin-left: -1em } html.var .gap\:x\:md > *:not([class*='col:start']) { margin-left: 1em }
397+
html.var .gap\:x\:lg { margin-left: -1.5em } html.var .gap\:x\:lg > *:not([class*='col:start']) { margin-left: 1.5em }
398+
html.var .gap\:x\:xl { margin-left: -2em } html.var .gap\:x\:xl > *:not([class*='col:start']) { margin-left: 2em }
399+
400+
html.var .gap\:y\:xs { margin-top: -0.25em } html.var .gap\:y\:xs > * { margin-top: 0.25em }
401+
html.var .gap\:y\:sm { margin-top: -0.5em } html.var .gap\:y\:sm > * { margin-top: 0.5em }
402+
html.var .gap\:y\:ms { margin-top: -0.75em } html.var .gap\:y\:ms > * { margin-top: 0.75em }
403+
html.var .gap\:y\:ls { margin-top: -0.85em } html.var .gap\:y\:ls > * { margin-top: 0.85em }
404+
html.var .gap\:y\:md { margin-top: -1em } html.var .gap\:y\:md > * { margin-top: 1em }
405+
html.var .gap\:y\:lg { margin-top: -1.5em } html.var .gap\:y\:lg > * { margin-top: 1.5em }
406+
html.var .gap\:y\:xl { margin-top: -2em } html.var .gap\:y\:xl > * { margin-top: 2em }
407+
408+
html.var .gap\:0 { margin-top: 0; margin-left: 0 }
409+
html.var .gap\:0 > * { margin-top: 0 }
410+
html.var .gap\:0 > *:not([class*='col:start']) { margin-left: 0 }
411+
412+
html.var .gap\:x\:0 { margin-left: 0 }
413+
html.var .gap\:x\:0 > *:not([class*='col:start']) { margin-left: 0 }
414+
415+
html.var .gap\:y\:0 { margin-top: 0 }
416+
html.var .gap\:y\:0 > * { margin-top: 0 }

‎src/text.css‎

Lines changed: 25 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -74,26 +74,28 @@
7474
.fz\:11 { font-size: var(--sf-fz-11) }
7575
.fz\:10 { font-size: var(--sf-fz-10) }
7676

77+
.ta\:i, .\$ta\:i > * { text-align: inherit }
78+
.ta\:ii, .\$ta\:ii > * { text-align: inherit }
7779
.ta\:l, .\$ta\:l > * { text-align: start }
7880
.ta\:c, .\$ta\:c > * { text-align: center }
7981
.ta\:r, .\$ta\:r > * { text-align: end }
8082
.ta\:j, .\$ta\:j > * { text-align: justify }
8183

82-
.whs { white-space: normal }
83-
.whs\:i { white-space: inherit }
84-
.whs\:ii { white-space: initial }
84+
.whs, .\$whs > * { white-space: normal }
85+
.whs\:i, .\$whs\:i > * { white-space: inherit }
86+
.whs\:ii, .\$whs\:ii > * { white-space: initial }
8587
.whs\:nowrap, .\$whs\:nowrap > * { white-space: nowrap }
86-
.whs\:p { white-space: pre }
87-
.whs\:pl { white-space: pre-line }
88-
.whs\:pw { white-space: pre-wrap }
89-
90-
.lh { line-height: var(--sf-lh-normal) }
91-
.lh\:base { line-height: var(--sf-lh) }
92-
.lh\:i { line-height: inherit }
93-
.lh\:ii { line-height: initial }
94-
.lh\:n { line-height: normal }
95-
.lh\:1 { line-height: 1 }
96-
.lh\:0 { line-height: 0 }
88+
.whs\:p, .\$whs\:p > * { white-space: pre }
89+
.whs\:pl, .\$whs\:pl > * { white-space: pre-line }
90+
.whs\:pw, .\$whs\:pw > * { white-space: pre-wrap }
91+
92+
.lh, .\$lh > * { line-height: var(--sf-lh-normal) }
93+
.lh\:base, .\$lh\:base > * { line-height: var(--sf-lh) }
94+
.lh\:i, .\$lh\:i > * { line-height: inherit }
95+
.lh\:ii, .\$lh\:ii > * { line-height: initial }
96+
.lh\:n, .\$lh\:n > * { line-height: normal }
97+
.lh\:1, .\$lh\:1 > * { line-height: 1 }
98+
.lh\:0, .\$lh\:0 > * { line-height: 0 }
9799

98100
/* https://developer.mozilla.org/en-US/docs/Web/CSS/vertical-align */
99101
.va\:i, .\$va\:i > * { vertical-align: inherit }
@@ -179,9 +181,16 @@ html.var .fz\:small\:4 { font-size: 12px }
179181
html.var .fz\:small\:5 { font-size: 11px }
180182
html.var .fz\:small\:6 { font-size: 10px }
181183

182-
html.var .lh { line-height: 1.1875 }
183-
html.var .lh\:base { line-height: 0.8 }
184+
html.var .lh, html.var .\$lh > * { line-height: 1.1875 }
185+
html.var .lh\:base, html.var .\$lh\:base > * { line-height: 0.8 }
186+
html.var .lh\:i, html.var .\$lh\:i > * { line-height: inherit }
187+
html.var .lh\:ii, html.var .\$lh\:ii > * { line-height: initial }
188+
html.var .lh\:n, html.var .\$lh\:n > * { line-height: normal }
189+
html.var .lh\:1, html.var .\$lh\:1 > * { line-height: 1 }
190+
html.var .lh\:0, html.var .\$lh\:0 > * { line-height: 0 }
184191

192+
html.ta .ta\:i, html.ta .\$ta\:i > * { text-align: inherit }
193+
html.ta .ta\:ii, html.ta .\$ta\:ii > * { text-align: initial }
185194
html.ta .ta\:l, html.ta .\$ta\:l > * { text-align: left }
186195
html.ta .ta\:c, html.ta .\$ta\:c > * { text-align: center }
187196
html.ta .ta\:r, html.ta .\$ta\:r > * { text-align: right }

‎src/var.css‎

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,22 @@
99

1010
/* gap */
1111
--sf-gap-x: var(--sf-em-sm);
12+
--sf-gap-x-xs: var(--sf-em-xs);
13+
--sf-gap-x-sm: var(--sf-em-sm);
14+
--sf-gap-x-ms: var(--sf-em-ms);
15+
--sf-gap-x-ls: var(--sf-em-ls);
16+
--sf-gap-x-md: var(--sf-em-md);
17+
--sf-gap-x-lg: var(--sf-em-lg);
18+
--sf-gap-x-xl: var(--sf-em-xl);
19+
1220
--sf-gap-y: var(--sf-em-sm);
21+
--sf-gap-y-xs: var(--sf-em-xs);
22+
--sf-gap-y-sm: var(--sf-em-sm);
23+
--sf-gap-y-ms: var(--sf-em-ms);
24+
--sf-gap-y-ls: var(--sf-em-ls);
25+
--sf-gap-y-md: var(--sf-em-md);
26+
--sf-gap-y-lg: var(--sf-em-lg);
27+
--sf-gap-y-xl: var(--sf-em-xl);
1328

1429
/* margin */
1530
--sf-margin: var(--sf-em-sm);

0 commit comments

Comments
 (0)