@atelic-action/ui 0.7.2 → 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/README.md +33 -1
- package/package.json +8 -3
- package/src/components/Callout.tsx +60 -0
- package/src/components/Checklist.tsx +43 -0
- package/src/components/Collapsible.tsx +43 -0
- package/src/components/ColumnChart.tsx +97 -0
- package/src/components/DataTable.tsx +194 -0
- package/src/components/StackedBar.tsx +46 -0
- package/src/components/StarRating.tsx +153 -0
- package/src/components/StatRow.tsx +96 -0
- package/src/components/ThresholdScale.tsx +89 -0
- package/src/components/index.ts +34 -0
- package/src/components/tone.ts +7 -0
- package/src/styles/components.css +587 -0
- package/src/styles/star-rating.css +67 -0
|
@@ -1,3 +1,5 @@
|
|
|
1
|
+
@import "./star-rating.css";
|
|
2
|
+
|
|
1
3
|
/* Layout defaults for the components under src/components. A site's own
|
|
2
4
|
classes (.page-hero, .eyebrow, .lead, .btn) arrive unlayered and win, so
|
|
3
5
|
these only fill in where a site does not style them. */
|
|
@@ -17,4 +19,589 @@
|
|
|
17
19
|
.mkt .not-found-closing .cta-row {
|
|
18
20
|
margin-top: 22px;
|
|
19
21
|
}
|
|
22
|
+
|
|
23
|
+
/* ---- Tones: the one palette this package carries, because good, a
|
|
24
|
+
warning, and broken read green, amber, and red whatever the brand is.
|
|
25
|
+
A site's theme may restate any of these on .mkt. A component sets
|
|
26
|
+
data-tone, and --tone, --tone-fill, and --tone-bg follow. ---- */
|
|
27
|
+
.mkt {
|
|
28
|
+
--tone-good: #1b7f3b;
|
|
29
|
+
--tone-good-fill: #37a35c;
|
|
30
|
+
--tone-good-bg: #eaf6ee;
|
|
31
|
+
--tone-warn: #a84500;
|
|
32
|
+
--tone-warn-fill: #e8a317;
|
|
33
|
+
--tone-warn-bg: #fff3df;
|
|
34
|
+
--tone-bad: #b3261e;
|
|
35
|
+
--tone-bad-fill: #d9483f;
|
|
36
|
+
--tone-bad-bg: #fdecea;
|
|
37
|
+
}
|
|
38
|
+
.mkt [data-tone="good"] {
|
|
39
|
+
--tone: var(--tone-good);
|
|
40
|
+
--tone-fill: var(--tone-good-fill);
|
|
41
|
+
--tone-bg: var(--tone-good-bg);
|
|
42
|
+
}
|
|
43
|
+
.mkt [data-tone="warn"] {
|
|
44
|
+
--tone: var(--tone-warn);
|
|
45
|
+
--tone-fill: var(--tone-warn-fill);
|
|
46
|
+
--tone-bg: var(--tone-warn-bg);
|
|
47
|
+
}
|
|
48
|
+
.mkt [data-tone="bad"] {
|
|
49
|
+
--tone: var(--tone-bad);
|
|
50
|
+
--tone-fill: var(--tone-bad-fill);
|
|
51
|
+
--tone-bg: var(--tone-bad-bg);
|
|
52
|
+
}
|
|
53
|
+
.mkt [data-tone="info"] {
|
|
54
|
+
--tone: var(--primary);
|
|
55
|
+
--tone-fill: var(--primary-bright);
|
|
56
|
+
--tone-bg: var(--primary-tint);
|
|
57
|
+
}
|
|
58
|
+
.mkt [data-tone="muted"] {
|
|
59
|
+
--tone: var(--neutral-500);
|
|
60
|
+
--tone-fill: var(--neutral-200);
|
|
61
|
+
--tone-bg: var(--surface-alt);
|
|
62
|
+
}
|
|
63
|
+
|
|
64
|
+
/* ---- StatRow: large figures, each over what it counts, its period,
|
|
65
|
+
and its comparisons ---- */
|
|
66
|
+
.mkt .stat-row {
|
|
67
|
+
display: grid;
|
|
68
|
+
gap: 24px;
|
|
69
|
+
grid-template-columns: repeat(2, minmax(0, 1fr));
|
|
70
|
+
}
|
|
71
|
+
@media (min-width: 760px) {
|
|
72
|
+
.mkt .stat-row {
|
|
73
|
+
grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
|
|
74
|
+
}
|
|
75
|
+
}
|
|
76
|
+
.mkt .stat-row.is-center .stat {
|
|
77
|
+
text-align: center;
|
|
78
|
+
}
|
|
79
|
+
.mkt .stat .num {
|
|
80
|
+
display: flex;
|
|
81
|
+
align-items: center;
|
|
82
|
+
gap: 0.12em;
|
|
83
|
+
font-size: clamp(2.2rem, 5vw, 3rem);
|
|
84
|
+
font-weight: 800;
|
|
85
|
+
letter-spacing: -0.03em;
|
|
86
|
+
color: var(--tone, var(--primary));
|
|
87
|
+
line-height: 1;
|
|
88
|
+
font-variant-numeric: tabular-nums;
|
|
89
|
+
}
|
|
90
|
+
.mkt .stat-row.is-center .stat .num {
|
|
91
|
+
justify-content: center;
|
|
92
|
+
}
|
|
93
|
+
.mkt .stat-trend {
|
|
94
|
+
width: 0.8em;
|
|
95
|
+
height: 0.8em;
|
|
96
|
+
flex: none;
|
|
97
|
+
}
|
|
98
|
+
.mkt .stat .lbl {
|
|
99
|
+
font-size: 0.95rem;
|
|
100
|
+
font-weight: 650;
|
|
101
|
+
color: var(--ink);
|
|
102
|
+
margin-top: 8px;
|
|
103
|
+
}
|
|
104
|
+
.mkt .stat-period {
|
|
105
|
+
margin-left: 0.5em;
|
|
106
|
+
font-weight: 400;
|
|
107
|
+
color: var(--neutral-500);
|
|
108
|
+
}
|
|
109
|
+
.mkt .stat-delta {
|
|
110
|
+
display: flex;
|
|
111
|
+
flex-wrap: wrap;
|
|
112
|
+
align-items: baseline;
|
|
113
|
+
gap: 2px 6px;
|
|
114
|
+
margin-top: 4px;
|
|
115
|
+
font-size: 0.82rem;
|
|
116
|
+
line-height: 1.35;
|
|
117
|
+
color: var(--neutral-500);
|
|
118
|
+
font-variant-numeric: tabular-nums;
|
|
119
|
+
}
|
|
120
|
+
.mkt .stat-delta-change {
|
|
121
|
+
display: inline-flex;
|
|
122
|
+
align-items: center;
|
|
123
|
+
gap: 2px;
|
|
124
|
+
font-weight: 700;
|
|
125
|
+
color: var(--tone);
|
|
126
|
+
}
|
|
127
|
+
.mkt .stat-delta-change svg {
|
|
128
|
+
align-self: center;
|
|
129
|
+
}
|
|
130
|
+
.mkt .stat-delta-basis {
|
|
131
|
+
text-decoration: none;
|
|
132
|
+
}
|
|
133
|
+
.mkt .stat .note {
|
|
134
|
+
font-size: 0.8rem;
|
|
135
|
+
color: var(--neutral-500);
|
|
136
|
+
margin-top: 4px;
|
|
137
|
+
}
|
|
138
|
+
|
|
139
|
+
/* ---- Collapsible: a labeled line that opens to the detail behind it ---- */
|
|
140
|
+
.mkt .collapsible > summary {
|
|
141
|
+
display: flex;
|
|
142
|
+
align-items: center;
|
|
143
|
+
justify-content: space-between;
|
|
144
|
+
gap: 14px;
|
|
145
|
+
cursor: pointer;
|
|
146
|
+
list-style: none;
|
|
147
|
+
}
|
|
148
|
+
.mkt .collapsible > summary::-webkit-details-marker {
|
|
149
|
+
display: none;
|
|
150
|
+
}
|
|
151
|
+
.mkt .collapsible-text {
|
|
152
|
+
display: flex;
|
|
153
|
+
flex-direction: column;
|
|
154
|
+
gap: 2px;
|
|
155
|
+
min-width: 0;
|
|
156
|
+
}
|
|
157
|
+
.mkt .collapsible-label {
|
|
158
|
+
font-weight: 650;
|
|
159
|
+
color: var(--ink);
|
|
160
|
+
}
|
|
161
|
+
.mkt .collapsible-summary {
|
|
162
|
+
color: var(--ink-soft);
|
|
163
|
+
text-wrap: pretty;
|
|
164
|
+
}
|
|
165
|
+
.mkt .collapsible > summary:hover .collapsible-label {
|
|
166
|
+
color: var(--primary);
|
|
167
|
+
}
|
|
168
|
+
.mkt .collapsible-chevron {
|
|
169
|
+
flex: none;
|
|
170
|
+
color: var(--neutral-500);
|
|
171
|
+
transition: transform 0.15s;
|
|
172
|
+
}
|
|
173
|
+
.mkt .collapsible[open] > summary .collapsible-chevron {
|
|
174
|
+
transform: rotate(180deg);
|
|
175
|
+
}
|
|
176
|
+
.mkt .collapsible-body {
|
|
177
|
+
margin-top: 12px;
|
|
178
|
+
}
|
|
179
|
+
@media (prefers-reduced-motion: reduce) {
|
|
180
|
+
.mkt .collapsible-chevron {
|
|
181
|
+
transition: none;
|
|
182
|
+
}
|
|
183
|
+
}
|
|
184
|
+
/* Paper cannot be clicked, so a printed collapsible is open. */
|
|
185
|
+
@media print {
|
|
186
|
+
.mkt .collapsible::details-content {
|
|
187
|
+
content-visibility: visible;
|
|
188
|
+
display: block;
|
|
189
|
+
}
|
|
190
|
+
.mkt .collapsible-chevron {
|
|
191
|
+
display: none;
|
|
192
|
+
}
|
|
193
|
+
}
|
|
194
|
+
|
|
195
|
+
/* ---- Callout: an icon in its tone beside the title, the explainer
|
|
196
|
+
under it; boxed, it sits apart on a tinted ground ---- */
|
|
197
|
+
.mkt .callout {
|
|
198
|
+
display: grid;
|
|
199
|
+
grid-template-columns: auto minmax(0, 1fr);
|
|
200
|
+
gap: 10px;
|
|
201
|
+
align-items: start;
|
|
202
|
+
}
|
|
203
|
+
.mkt .callout-icon {
|
|
204
|
+
margin-top: 0.15em;
|
|
205
|
+
color: var(--tone);
|
|
206
|
+
flex: none;
|
|
207
|
+
}
|
|
208
|
+
.mkt .callout-title {
|
|
209
|
+
font-weight: 650;
|
|
210
|
+
color: var(--ink);
|
|
211
|
+
text-wrap: pretty;
|
|
212
|
+
}
|
|
213
|
+
.mkt .callout-body {
|
|
214
|
+
margin-top: 2px;
|
|
215
|
+
color: var(--ink-soft);
|
|
216
|
+
text-wrap: pretty;
|
|
217
|
+
}
|
|
218
|
+
.mkt .callout.is-box {
|
|
219
|
+
padding: 14px 16px;
|
|
220
|
+
border-radius: var(--radius-sm);
|
|
221
|
+
background: var(--tone-bg);
|
|
222
|
+
border: 1px solid color-mix(in srgb, var(--tone-fill) 45%, transparent);
|
|
223
|
+
}
|
|
224
|
+
|
|
225
|
+
/* ---- Checklist: checks passed or failed, two columns when there is room ---- */
|
|
226
|
+
.mkt .checklist {
|
|
227
|
+
list-style: none;
|
|
228
|
+
margin: 0;
|
|
229
|
+
padding: 0;
|
|
230
|
+
display: grid;
|
|
231
|
+
grid-template-columns: minmax(0, 1fr);
|
|
232
|
+
gap: 12px 28px;
|
|
233
|
+
}
|
|
234
|
+
@media print, (min-width: 721px) {
|
|
235
|
+
.mkt .checklist {
|
|
236
|
+
grid-template-columns: repeat(2, minmax(0, 1fr));
|
|
237
|
+
}
|
|
238
|
+
}
|
|
239
|
+
.mkt .checklist li {
|
|
240
|
+
display: grid;
|
|
241
|
+
grid-template-columns: auto minmax(0, 1fr);
|
|
242
|
+
gap: 10px;
|
|
243
|
+
align-items: start;
|
|
244
|
+
line-height: 1.4;
|
|
245
|
+
}
|
|
246
|
+
.mkt .checklist li > svg {
|
|
247
|
+
margin-top: 0.1em;
|
|
248
|
+
color: var(--tone);
|
|
249
|
+
}
|
|
250
|
+
.mkt .checklist-label {
|
|
251
|
+
display: block;
|
|
252
|
+
font-weight: 600;
|
|
253
|
+
color: var(--ink);
|
|
254
|
+
}
|
|
255
|
+
.mkt .checklist li[data-tone="bad"] .checklist-label {
|
|
256
|
+
color: var(--tone);
|
|
257
|
+
}
|
|
258
|
+
.mkt .checklist-detail {
|
|
259
|
+
display: block;
|
|
260
|
+
color: var(--ink-soft);
|
|
261
|
+
}
|
|
262
|
+
|
|
263
|
+
/* ---- The charts' shared key: a swatch, a figure, a label ---- */
|
|
264
|
+
.mkt .chart-key {
|
|
265
|
+
list-style: none;
|
|
266
|
+
margin: 10px 0 0;
|
|
267
|
+
padding: 0;
|
|
268
|
+
display: flex;
|
|
269
|
+
flex-wrap: wrap;
|
|
270
|
+
gap: 5px 20px;
|
|
271
|
+
font-size: 0.82rem;
|
|
272
|
+
color: var(--ink-soft);
|
|
273
|
+
}
|
|
274
|
+
.mkt .chart-key li {
|
|
275
|
+
display: inline-flex;
|
|
276
|
+
align-items: baseline;
|
|
277
|
+
gap: 7px;
|
|
278
|
+
}
|
|
279
|
+
.mkt .chart-key b {
|
|
280
|
+
font-weight: 650;
|
|
281
|
+
color: var(--ink);
|
|
282
|
+
font-variant-numeric: tabular-nums;
|
|
283
|
+
}
|
|
284
|
+
.mkt .chart-swatch {
|
|
285
|
+
width: 10px;
|
|
286
|
+
height: 10px;
|
|
287
|
+
border-radius: 3px;
|
|
288
|
+
background: var(--tone-fill);
|
|
289
|
+
align-self: center;
|
|
290
|
+
flex: none;
|
|
291
|
+
}
|
|
292
|
+
|
|
293
|
+
/* ---- StackedBar: one bar, the parts of a whole ---- */
|
|
294
|
+
.mkt .stacked-bar-track {
|
|
295
|
+
display: flex;
|
|
296
|
+
gap: 2px;
|
|
297
|
+
height: 16px;
|
|
298
|
+
border-radius: 999px;
|
|
299
|
+
overflow: hidden;
|
|
300
|
+
}
|
|
301
|
+
.mkt .stacked-bar-track span {
|
|
302
|
+
background: var(--tone-fill);
|
|
303
|
+
min-width: 4px;
|
|
304
|
+
}
|
|
305
|
+
|
|
306
|
+
/* ---- ColumnChart: a bar a period, the periods in labeled groups ---- */
|
|
307
|
+
.mkt .column-chart-plot {
|
|
308
|
+
display: flex;
|
|
309
|
+
align-items: flex-end;
|
|
310
|
+
gap: 12px;
|
|
311
|
+
min-width: 0;
|
|
312
|
+
}
|
|
313
|
+
.mkt .column-chart-group {
|
|
314
|
+
flex: 1 1 0;
|
|
315
|
+
min-width: 0;
|
|
316
|
+
}
|
|
317
|
+
.mkt .column-chart-bars {
|
|
318
|
+
display: flex;
|
|
319
|
+
align-items: flex-end;
|
|
320
|
+
gap: 3px;
|
|
321
|
+
}
|
|
322
|
+
.mkt .column-chart-col {
|
|
323
|
+
flex: 1 1 0;
|
|
324
|
+
min-width: 0;
|
|
325
|
+
display: flex;
|
|
326
|
+
flex-direction: column;
|
|
327
|
+
align-items: center;
|
|
328
|
+
gap: 3px;
|
|
329
|
+
}
|
|
330
|
+
.mkt .column-chart-value {
|
|
331
|
+
font-size: 0.64rem;
|
|
332
|
+
font-variant-numeric: tabular-nums;
|
|
333
|
+
color: var(--ink-soft);
|
|
334
|
+
white-space: nowrap;
|
|
335
|
+
}
|
|
336
|
+
.mkt .column-chart-bar {
|
|
337
|
+
width: 100%;
|
|
338
|
+
max-width: 48px;
|
|
339
|
+
border-radius: 4px 4px 0 0;
|
|
340
|
+
background: var(--tone-fill);
|
|
341
|
+
}
|
|
342
|
+
.mkt .column-chart-label {
|
|
343
|
+
font-size: 0.66rem;
|
|
344
|
+
color: var(--ink-soft);
|
|
345
|
+
white-space: nowrap;
|
|
346
|
+
}
|
|
347
|
+
.mkt .column-chart-group-label {
|
|
348
|
+
display: flex;
|
|
349
|
+
flex-wrap: wrap;
|
|
350
|
+
justify-content: center;
|
|
351
|
+
gap: 0 6px;
|
|
352
|
+
margin-top: 6px;
|
|
353
|
+
padding-top: 5px;
|
|
354
|
+
border-top: 1px solid var(--neutral-200);
|
|
355
|
+
font-family: var(--font-mono);
|
|
356
|
+
font-size: 0.66rem;
|
|
357
|
+
letter-spacing: 0.04em;
|
|
358
|
+
color: var(--neutral-500);
|
|
359
|
+
white-space: nowrap;
|
|
360
|
+
}
|
|
361
|
+
.mkt .column-chart-group-label b {
|
|
362
|
+
font-family: var(--font-sans);
|
|
363
|
+
font-size: 0.8rem;
|
|
364
|
+
letter-spacing: 0;
|
|
365
|
+
font-weight: 650;
|
|
366
|
+
color: var(--ink);
|
|
367
|
+
font-variant-numeric: tabular-nums;
|
|
368
|
+
}
|
|
369
|
+
|
|
370
|
+
/* ---- ThresholdScale: zones, and a pin a reading ---- */
|
|
371
|
+
.mkt .threshold-scale {
|
|
372
|
+
display: flex;
|
|
373
|
+
flex-direction: column;
|
|
374
|
+
gap: 10px;
|
|
375
|
+
}
|
|
376
|
+
.mkt .threshold-scale-row {
|
|
377
|
+
display: grid;
|
|
378
|
+
grid-template-columns: 4.4em minmax(0, 1fr) 3.4em;
|
|
379
|
+
gap: 10px;
|
|
380
|
+
align-items: center;
|
|
381
|
+
}
|
|
382
|
+
.mkt .threshold-scale-label {
|
|
383
|
+
color: var(--ink-soft);
|
|
384
|
+
}
|
|
385
|
+
.mkt .threshold-scale-track {
|
|
386
|
+
position: relative;
|
|
387
|
+
display: flex;
|
|
388
|
+
gap: 2px;
|
|
389
|
+
height: 12px;
|
|
390
|
+
}
|
|
391
|
+
.mkt .threshold-scale-zone {
|
|
392
|
+
background: var(--tone-fill);
|
|
393
|
+
opacity: 0.32;
|
|
394
|
+
}
|
|
395
|
+
.mkt .threshold-scale-zone:first-child {
|
|
396
|
+
border-radius: 999px 0 0 999px;
|
|
397
|
+
}
|
|
398
|
+
.mkt .threshold-scale-zone:nth-last-child(2) {
|
|
399
|
+
border-radius: 0 999px 999px 0;
|
|
400
|
+
}
|
|
401
|
+
.mkt .threshold-scale-pin {
|
|
402
|
+
position: absolute;
|
|
403
|
+
top: 50%;
|
|
404
|
+
width: 18px;
|
|
405
|
+
height: 18px;
|
|
406
|
+
margin: -9px 0 0 -9px;
|
|
407
|
+
border-radius: 50%;
|
|
408
|
+
background: var(--tone-fill);
|
|
409
|
+
border: 3px solid var(--card);
|
|
410
|
+
box-shadow: 0 0 0 1.5px var(--tone-fill);
|
|
411
|
+
}
|
|
412
|
+
.mkt .threshold-scale-value {
|
|
413
|
+
font-weight: 700;
|
|
414
|
+
font-variant-numeric: tabular-nums;
|
|
415
|
+
color: var(--tone);
|
|
416
|
+
text-align: right;
|
|
417
|
+
}
|
|
418
|
+
.mkt .threshold-scale-axis {
|
|
419
|
+
position: relative;
|
|
420
|
+
display: flex;
|
|
421
|
+
gap: 2px;
|
|
422
|
+
height: 2.3em;
|
|
423
|
+
font-size: 0.8rem;
|
|
424
|
+
}
|
|
425
|
+
.mkt .threshold-scale-axis > span {
|
|
426
|
+
color: var(--tone);
|
|
427
|
+
font-weight: 600;
|
|
428
|
+
white-space: nowrap;
|
|
429
|
+
overflow: hidden;
|
|
430
|
+
text-overflow: ellipsis;
|
|
431
|
+
}
|
|
432
|
+
.mkt .threshold-scale-axis > i {
|
|
433
|
+
position: absolute;
|
|
434
|
+
top: 1.25em;
|
|
435
|
+
transform: translateX(-50%);
|
|
436
|
+
font-style: normal;
|
|
437
|
+
font-family: var(--font-mono);
|
|
438
|
+
font-size: 0.72rem;
|
|
439
|
+
color: var(--neutral-500);
|
|
440
|
+
white-space: nowrap;
|
|
441
|
+
}
|
|
442
|
+
|
|
443
|
+
/* ---- DataTable: on a phone each row stacks, its facts wearing their
|
|
444
|
+
column's label, and a dropdown sorts; wide, it is a table whose
|
|
445
|
+
headings sort ---- */
|
|
446
|
+
.mkt .data-table table,
|
|
447
|
+
.mkt .data-table tbody {
|
|
448
|
+
display: block;
|
|
449
|
+
width: 100%;
|
|
450
|
+
}
|
|
451
|
+
.mkt .data-table thead {
|
|
452
|
+
position: absolute;
|
|
453
|
+
width: 1px;
|
|
454
|
+
height: 1px;
|
|
455
|
+
overflow: hidden;
|
|
456
|
+
clip: rect(0, 0, 0, 0);
|
|
457
|
+
white-space: nowrap;
|
|
458
|
+
}
|
|
459
|
+
.mkt .data-table-sort {
|
|
460
|
+
display: flex;
|
|
461
|
+
align-items: center;
|
|
462
|
+
gap: 8px;
|
|
463
|
+
margin-bottom: 8px;
|
|
464
|
+
font-size: 0.85rem;
|
|
465
|
+
color: var(--ink-soft);
|
|
466
|
+
}
|
|
467
|
+
.mkt .data-table-sort select {
|
|
468
|
+
font: inherit;
|
|
469
|
+
color: var(--ink);
|
|
470
|
+
background: var(--card);
|
|
471
|
+
border: 1px solid var(--neutral-200);
|
|
472
|
+
border-radius: var(--radius-sm);
|
|
473
|
+
padding: 5px 8px;
|
|
474
|
+
max-width: 100%;
|
|
475
|
+
}
|
|
476
|
+
.mkt .data-table tbody tr {
|
|
477
|
+
display: flex;
|
|
478
|
+
flex-wrap: wrap;
|
|
479
|
+
align-items: center;
|
|
480
|
+
gap: 4px 18px;
|
|
481
|
+
padding: 9px 0;
|
|
482
|
+
border-bottom: 1px solid var(--neutral-100);
|
|
483
|
+
line-height: 1.35;
|
|
484
|
+
}
|
|
485
|
+
.mkt .data-table tbody tr:first-child {
|
|
486
|
+
border-top: 1.5px solid var(--ink);
|
|
487
|
+
}
|
|
488
|
+
.mkt .data-table tbody tr:last-child {
|
|
489
|
+
border-bottom: 0;
|
|
490
|
+
padding-bottom: 0;
|
|
491
|
+
}
|
|
492
|
+
.mkt .data-table tbody th {
|
|
493
|
+
width: 100%;
|
|
494
|
+
text-align: left;
|
|
495
|
+
font-weight: 400;
|
|
496
|
+
}
|
|
497
|
+
.mkt .data-table td {
|
|
498
|
+
display: inline-flex;
|
|
499
|
+
align-items: center;
|
|
500
|
+
gap: 6px;
|
|
501
|
+
font-variant-numeric: tabular-nums;
|
|
502
|
+
}
|
|
503
|
+
.mkt .data-table td::before {
|
|
504
|
+
content: attr(data-label);
|
|
505
|
+
font-family: var(--font-mono);
|
|
506
|
+
font-size: 0.7rem;
|
|
507
|
+
letter-spacing: 0.08em;
|
|
508
|
+
text-transform: uppercase;
|
|
509
|
+
color: var(--neutral-500);
|
|
510
|
+
}
|
|
511
|
+
@media print, (min-width: 721px) {
|
|
512
|
+
.mkt .data-table-sort {
|
|
513
|
+
display: none;
|
|
514
|
+
}
|
|
515
|
+
.mkt .data-table table {
|
|
516
|
+
display: table;
|
|
517
|
+
border-collapse: collapse;
|
|
518
|
+
}
|
|
519
|
+
.mkt .data-table tbody {
|
|
520
|
+
display: table-row-group;
|
|
521
|
+
}
|
|
522
|
+
.mkt .data-table thead {
|
|
523
|
+
position: static;
|
|
524
|
+
width: auto;
|
|
525
|
+
height: auto;
|
|
526
|
+
overflow: visible;
|
|
527
|
+
clip: auto;
|
|
528
|
+
}
|
|
529
|
+
.mkt .data-table tbody tr {
|
|
530
|
+
display: table-row;
|
|
531
|
+
padding: 0;
|
|
532
|
+
border: 0;
|
|
533
|
+
}
|
|
534
|
+
.mkt .data-table tbody tr:first-child {
|
|
535
|
+
border-top: 0;
|
|
536
|
+
}
|
|
537
|
+
.mkt .data-table th,
|
|
538
|
+
.mkt .data-table td {
|
|
539
|
+
display: table-cell;
|
|
540
|
+
padding: 7px 14px 7px 0;
|
|
541
|
+
border-bottom: 1px solid var(--neutral-100);
|
|
542
|
+
text-align: left;
|
|
543
|
+
vertical-align: middle;
|
|
544
|
+
font-weight: 400;
|
|
545
|
+
}
|
|
546
|
+
.mkt .data-table tbody th {
|
|
547
|
+
width: auto;
|
|
548
|
+
}
|
|
549
|
+
.mkt .data-table td::before {
|
|
550
|
+
content: none;
|
|
551
|
+
}
|
|
552
|
+
.mkt .data-table th:last-child,
|
|
553
|
+
.mkt .data-table td:last-child {
|
|
554
|
+
padding-right: 0;
|
|
555
|
+
}
|
|
556
|
+
.mkt .data-table [data-align="center"] {
|
|
557
|
+
text-align: center;
|
|
558
|
+
}
|
|
559
|
+
.mkt .data-table [data-align="right"] {
|
|
560
|
+
text-align: right;
|
|
561
|
+
}
|
|
562
|
+
.mkt .data-table thead th {
|
|
563
|
+
padding-top: 0;
|
|
564
|
+
padding-bottom: 8px;
|
|
565
|
+
border-bottom: 1.5px solid var(--ink);
|
|
566
|
+
font-family: var(--font-mono);
|
|
567
|
+
font-size: 0.72rem;
|
|
568
|
+
letter-spacing: 0.08em;
|
|
569
|
+
text-transform: uppercase;
|
|
570
|
+
color: var(--ink-soft);
|
|
571
|
+
white-space: nowrap;
|
|
572
|
+
vertical-align: bottom;
|
|
573
|
+
}
|
|
574
|
+
.mkt .data-table thead th button {
|
|
575
|
+
display: inline-flex;
|
|
576
|
+
align-items: center;
|
|
577
|
+
gap: 4px;
|
|
578
|
+
padding: 0;
|
|
579
|
+
border: 0;
|
|
580
|
+
background: none;
|
|
581
|
+
font: inherit;
|
|
582
|
+
letter-spacing: inherit;
|
|
583
|
+
text-transform: inherit;
|
|
584
|
+
color: inherit;
|
|
585
|
+
cursor: pointer;
|
|
586
|
+
}
|
|
587
|
+
.mkt .data-table thead th button:hover,
|
|
588
|
+
.mkt .data-table thead th button[data-active] {
|
|
589
|
+
color: var(--primary);
|
|
590
|
+
}
|
|
591
|
+
.mkt .data-table thead th button svg {
|
|
592
|
+
opacity: 0.55;
|
|
593
|
+
}
|
|
594
|
+
.mkt .data-table thead th button[data-active] svg {
|
|
595
|
+
opacity: 1;
|
|
596
|
+
}
|
|
597
|
+
.mkt .data-table tbody tr:last-child th,
|
|
598
|
+
.mkt .data-table tbody tr:last-child td {
|
|
599
|
+
border-bottom: 0;
|
|
600
|
+
}
|
|
601
|
+
}
|
|
602
|
+
@media print {
|
|
603
|
+
.mkt .data-table thead th button svg {
|
|
604
|
+
display: none;
|
|
605
|
+
}
|
|
606
|
+
}
|
|
20
607
|
}
|
|
@@ -0,0 +1,67 @@
|
|
|
1
|
+
/* StarRating: a row of stars in half star steps. On its own sheet, and not
|
|
2
|
+
under .mkt, so an app that wears none of the site chrome can import this
|
|
3
|
+
file alone; components.css imports it for every site.
|
|
4
|
+
|
|
5
|
+
The two colors are custom properties with fallbacks off the text color, so
|
|
6
|
+
the row needs no theme token and takes a color from a prop, from a site's
|
|
7
|
+
own rule, or from whatever it sits in. */
|
|
8
|
+
@layer atelic-ui {
|
|
9
|
+
.star-rating {
|
|
10
|
+
display: inline-flex;
|
|
11
|
+
align-items: center;
|
|
12
|
+
vertical-align: middle;
|
|
13
|
+
line-height: 0;
|
|
14
|
+
border-radius: 4px;
|
|
15
|
+
}
|
|
16
|
+
.star-rating.is-editable:focus-visible {
|
|
17
|
+
outline: 2px solid var(--star-focus, currentColor);
|
|
18
|
+
outline-offset: 2px;
|
|
19
|
+
}
|
|
20
|
+
.star-rating-star {
|
|
21
|
+
position: relative;
|
|
22
|
+
display: inline-block;
|
|
23
|
+
width: var(--star-size, 24px);
|
|
24
|
+
height: var(--star-size, 24px);
|
|
25
|
+
}
|
|
26
|
+
/* Pinned to the star's size: a base reset that caps an svg at its
|
|
27
|
+
container's width would shrink the filled star inside its clip to a
|
|
28
|
+
small whole star, where it has to stay full size and be cut in half. */
|
|
29
|
+
.star-rating .star-rating-star svg {
|
|
30
|
+
display: block;
|
|
31
|
+
width: var(--star-size, 24px);
|
|
32
|
+
height: var(--star-size, 24px);
|
|
33
|
+
max-width: none;
|
|
34
|
+
}
|
|
35
|
+
.star-rating-outline {
|
|
36
|
+
color: var(--star-outline, color-mix(in srgb, currentColor 40%, transparent));
|
|
37
|
+
}
|
|
38
|
+
/* The filled star sits over the outline and is clipped to none, half, or
|
|
39
|
+
all of its width. */
|
|
40
|
+
.star-rating-fill {
|
|
41
|
+
position: absolute;
|
|
42
|
+
inset-block: 0;
|
|
43
|
+
left: 0;
|
|
44
|
+
overflow: hidden;
|
|
45
|
+
pointer-events: none;
|
|
46
|
+
color: var(--star-fill, currentColor);
|
|
47
|
+
}
|
|
48
|
+
.star-rating-fill svg {
|
|
49
|
+
fill: currentColor;
|
|
50
|
+
}
|
|
51
|
+
.star-rating-hit {
|
|
52
|
+
position: absolute;
|
|
53
|
+
inset-block: 0;
|
|
54
|
+
width: 50%;
|
|
55
|
+
margin: 0;
|
|
56
|
+
padding: 0;
|
|
57
|
+
border: 0;
|
|
58
|
+
background: none;
|
|
59
|
+
cursor: pointer;
|
|
60
|
+
}
|
|
61
|
+
.star-rating-hit.is-left {
|
|
62
|
+
left: 0;
|
|
63
|
+
}
|
|
64
|
+
.star-rating-hit.is-right {
|
|
65
|
+
right: 0;
|
|
66
|
+
}
|
|
67
|
+
}
|