@plus234feed/ds 0.8.0 → 0.9.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 +28 -1
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@plus234feed/ds",
|
|
3
|
-
"version": "0.
|
|
3
|
+
"version": "0.9.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
|
@@ -1374,7 +1374,14 @@ textarea.p234-field__control {
|
|
|
1374
1374
|
/* --- directory ---------------------------------------------------------
|
|
1375
1375
|
A long index: every equity, every state, every seat. Grouped, with the
|
|
1376
1376
|
group letter sticking as the reader scrolls past it. */
|
|
1377
|
-
.p234-directory {
|
|
1377
|
+
.p234-directory {
|
|
1378
|
+
border-top: var(--p234-border-thick) solid var(--p234-color-ink);
|
|
1379
|
+
/* So a row can lay itself out from the width it actually has, rather than
|
|
1380
|
+
the page deciding for it. A directory in a full width column and the same
|
|
1381
|
+
directory in one half of a two-up both read correctly without the page
|
|
1382
|
+
passing a variant down. */
|
|
1383
|
+
container-type: inline-size;
|
|
1384
|
+
}
|
|
1378
1385
|
.p234-directory__letter {
|
|
1379
1386
|
position: sticky;
|
|
1380
1387
|
top: 0;
|
|
@@ -1419,6 +1426,26 @@ textarea.p234-field__control {
|
|
|
1419
1426
|
color: var(--p234-color-ink);
|
|
1420
1427
|
}
|
|
1421
1428
|
|
|
1429
|
+
/* In a narrow column the three parts of a row compete for the same line and
|
|
1430
|
+
the name truncates to nothing. Below this width the detail moves under the
|
|
1431
|
+
name and the figure keeps the right edge, which is the shape a list of
|
|
1432
|
+
movers wants when two of them sit side by side. */
|
|
1433
|
+
@container (max-width: 26rem) {
|
|
1434
|
+
.p234-directory__row {
|
|
1435
|
+
display: grid;
|
|
1436
|
+
grid-template-columns: 1fr auto;
|
|
1437
|
+
column-gap: var(--p234-space-4);
|
|
1438
|
+
align-items: baseline;
|
|
1439
|
+
}
|
|
1440
|
+
.p234-directory__name { grid-area: 1 / 1; }
|
|
1441
|
+
.p234-directory__detail { grid-area: 2 / 1; }
|
|
1442
|
+
.p234-directory__value {
|
|
1443
|
+
grid-area: 1 / 2 / span 2;
|
|
1444
|
+
margin-left: 0;
|
|
1445
|
+
align-self: center;
|
|
1446
|
+
}
|
|
1447
|
+
}
|
|
1448
|
+
|
|
1422
1449
|
/* --- chart -------------------------------------------------------------
|
|
1423
1450
|
The frame around a plot: title, legend, the plot itself, and the line
|
|
1424
1451
|
saying where the numbers came from and as of when. */
|