@plus234feed/ds 0.12.0 → 0.13.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/package.json +1 -1
- package/src/components.css +27 -0
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@plus234feed/ds",
|
|
3
|
-
"version": "0.
|
|
3
|
+
"version": "0.13.0",
|
|
4
4
|
"description": "Plus234Feed design system. Editorial tokens, type scale and components for a news intelligence platform: newspaper hierarchy, accessible colour in both themes, one component per job.",
|
|
5
5
|
"keywords": [
|
|
6
6
|
"design-system",
|
package/src/components.css
CHANGED
|
@@ -292,6 +292,33 @@
|
|
|
292
292
|
.p234-delta--cost[data-direction="up"] { color: var(--p234-color-data-down); }
|
|
293
293
|
.p234-delta--cost[data-direction="down"] { color: var(--p234-color-data-up); }
|
|
294
294
|
|
|
295
|
+
/* --- split ------------------------------------------------------------
|
|
296
|
+
A column of content with a rail beside it: a table and its related links,
|
|
297
|
+
an article and its filings, a chart and its figures.
|
|
298
|
+
|
|
299
|
+
Written by hand on four pages before this existed, each time as an auto-fit
|
|
300
|
+
grid, and each time the wide thing inside it pushed its own track past its
|
|
301
|
+
share and ran under the rail. An auto-fit track sizes from its contents,
|
|
302
|
+
and `min-width: 0` on the child is not enough to stop that: the track
|
|
303
|
+
itself has to be told it may shrink, which is what minmax(0, 1fr) says.
|
|
304
|
+
|
|
305
|
+
One column until there is room for two, so a rail never becomes a sliver. */
|
|
306
|
+
.p234-split {
|
|
307
|
+
display: grid;
|
|
308
|
+
gap: var(--p234-space-8);
|
|
309
|
+
align-items: start;
|
|
310
|
+
}
|
|
311
|
+
/* Both halves may shrink. Without this a table or a pre refuses to, and
|
|
312
|
+
whatever sits beside it is covered. */
|
|
313
|
+
.p234-split > * { min-width: 0; }
|
|
314
|
+
|
|
315
|
+
@media (min-width: 60rem) {
|
|
316
|
+
.p234-split { grid-template-columns: minmax(0, 1fr) minmax(0, 20rem); }
|
|
317
|
+
/* Equal halves, for two lists of the same kind rather than content plus a
|
|
318
|
+
rail: top gainers beside top losers. */
|
|
319
|
+
.p234-split--even { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
|
|
320
|
+
}
|
|
321
|
+
|
|
295
322
|
/* --- tile row ----------------------------------------------------------
|
|
296
323
|
The grid a row of tiles sits in. Every page that showed figures was
|
|
297
324
|
writing this inline, with a different minimum each time, and the counts
|