@knpkv/herdr-work 0.10.0 → 0.11.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/dist/view.d.ts +3 -1
- package/dist/view.d.ts.map +1 -1
- package/dist/view.js +176 -96
- package/dist/view.js.map +1 -1
- package/dist/work-triage.d.ts +3 -1
- package/dist/work-triage.d.ts.map +1 -1
- package/dist/work-triage.js +3 -6
- package/dist/work-triage.js.map +1 -1
- package/package.json +4 -4
- package/src/styles.css +382 -46
package/src/styles.css
CHANGED
|
@@ -8,19 +8,45 @@
|
|
|
8
8
|
|
|
9
9
|
.work-page-intro {
|
|
10
10
|
align-items: baseline;
|
|
11
|
-
border-block-end: 1px solid var(--rly-color-border-1);
|
|
12
11
|
display: flex;
|
|
13
12
|
flex-wrap: wrap;
|
|
14
|
-
gap: var(--rly-space-8) var(--rly-space-
|
|
15
|
-
justify-content:
|
|
16
|
-
padding-block-end: var(--rly-space-12);
|
|
13
|
+
gap: var(--rly-space-8) var(--rly-space-16);
|
|
14
|
+
justify-content: start;
|
|
17
15
|
}
|
|
18
16
|
|
|
19
17
|
.work-page-intro h1 {
|
|
20
18
|
margin: var(--rly-space-0);
|
|
21
19
|
}
|
|
22
20
|
|
|
23
|
-
|
|
21
|
+
.work-board-controls {
|
|
22
|
+
align-items: start;
|
|
23
|
+
display: flex;
|
|
24
|
+
flex-wrap: wrap;
|
|
25
|
+
gap: var(--rly-space-12) var(--rly-space-24);
|
|
26
|
+
min-inline-size: var(--rly-space-0);
|
|
27
|
+
}
|
|
28
|
+
.work-board-controls > .work-status-filters {
|
|
29
|
+
flex: 1 1 20rem;
|
|
30
|
+
}
|
|
31
|
+
.work-time-controls {
|
|
32
|
+
gap: var(--rly-space-0);
|
|
33
|
+
overflow: hidden;
|
|
34
|
+
border: 1px solid var(--rly-color-border-2);
|
|
35
|
+
border-radius: var(--rly-radius-field);
|
|
36
|
+
}
|
|
37
|
+
.work-time-controls .work-time-option {
|
|
38
|
+
border-inline-end: 1px solid var(--rly-color-border-2);
|
|
39
|
+
font-size: var(--rly-type-meta-size);
|
|
40
|
+
font-weight: var(--rly-type-meta-weight);
|
|
41
|
+
}
|
|
42
|
+
.work-time-controls .work-time-option:last-child {
|
|
43
|
+
border-inline-end: 0;
|
|
44
|
+
}
|
|
45
|
+
.work-finished-count {
|
|
46
|
+
padding-inline: var(--rly-space-16);
|
|
47
|
+
}
|
|
48
|
+
|
|
49
|
+
/* Snapshot windows and status filters share a flat tint for their current selection. */
|
|
24
50
|
.work-time-controls,
|
|
25
51
|
.work-status-filters {
|
|
26
52
|
display: flex;
|
|
@@ -28,6 +54,30 @@
|
|
|
28
54
|
gap: var(--rly-space-4);
|
|
29
55
|
}
|
|
30
56
|
|
|
57
|
+
.work-status-filters {
|
|
58
|
+
gap: var(--rly-space-0);
|
|
59
|
+
flex-wrap: nowrap;
|
|
60
|
+
max-inline-size: 100%;
|
|
61
|
+
min-inline-size: var(--rly-space-0);
|
|
62
|
+
overflow-x: auto;
|
|
63
|
+
scrollbar-width: thin;
|
|
64
|
+
overscroll-behavior-inline: contain;
|
|
65
|
+
}
|
|
66
|
+
|
|
67
|
+
.work-status-filters .work-status-filter {
|
|
68
|
+
flex: none;
|
|
69
|
+
min-block-size: calc(var(--rly-space-32) + var(--rly-space-12));
|
|
70
|
+
white-space: nowrap;
|
|
71
|
+
min-inline-size: calc(var(--rly-space-32) + var(--rly-space-12));
|
|
72
|
+
padding-inline: var(--rly-space-8);
|
|
73
|
+
font: var(--rly-type-meta-weight) var(--rly-type-meta-size) / var(--rly-type-meta-line-height)
|
|
74
|
+
var(--rly-type-meta-font);
|
|
75
|
+
border-inline-end: 1px solid var(--rly-color-border-2);
|
|
76
|
+
}
|
|
77
|
+
.work-status-filters .work-status-filter:last-child {
|
|
78
|
+
border-inline-end: 0;
|
|
79
|
+
}
|
|
80
|
+
|
|
31
81
|
.work-time-option,
|
|
32
82
|
.work-status-filter {
|
|
33
83
|
align-items: center;
|
|
@@ -47,9 +97,8 @@
|
|
|
47
97
|
.work-time-option:is([aria-pressed="true"], [aria-current="page"]),
|
|
48
98
|
.work-status-filter:is([aria-pressed="true"], [aria-current="page"]) {
|
|
49
99
|
color: var(--rly-color-text-1);
|
|
50
|
-
|
|
51
|
-
text-decoration
|
|
52
|
-
text-underline-offset: var(--rly-space-6);
|
|
100
|
+
background: var(--rly-color-surface-2);
|
|
101
|
+
text-decoration: none;
|
|
53
102
|
}
|
|
54
103
|
|
|
55
104
|
.work-time-option:focus-visible,
|
|
@@ -62,17 +111,36 @@
|
|
|
62
111
|
outline-offset: var(--rly-focus-ring-offset);
|
|
63
112
|
}
|
|
64
113
|
|
|
114
|
+
/* Keep the focused option's ring inside the sideways scroller's clipping edge. */
|
|
115
|
+
.work-status-filter:focus-visible,
|
|
116
|
+
.work-time-option:focus-visible {
|
|
117
|
+
outline-offset: calc(-1 * var(--rly-focus-ring-width));
|
|
118
|
+
}
|
|
119
|
+
|
|
65
120
|
/* Goals beside the open goal from a wide container; one column below that. */
|
|
66
121
|
.work-board-layout {
|
|
67
122
|
align-items: start;
|
|
68
123
|
display: grid;
|
|
69
|
-
gap: var(--rly-space-
|
|
124
|
+
gap: var(--rly-space-20);
|
|
125
|
+
grid-template-areas: "board";
|
|
70
126
|
grid-template-columns: minmax(0, 1fr);
|
|
71
127
|
}
|
|
72
128
|
|
|
129
|
+
.work-board-layout[data-has-detail="true"] {
|
|
130
|
+
grid-template-areas: "inspector" "board";
|
|
131
|
+
}
|
|
132
|
+
|
|
133
|
+
.work-board-list {
|
|
134
|
+
grid-area: board;
|
|
135
|
+
}
|
|
136
|
+
.work-inspector {
|
|
137
|
+
grid-area: inspector;
|
|
138
|
+
}
|
|
139
|
+
|
|
73
140
|
@container work-page (width >= 60rem) {
|
|
74
141
|
.work-board-layout[data-has-detail="true"] {
|
|
75
|
-
grid-template-columns: minmax(0,
|
|
142
|
+
grid-template-columns: minmax(0, 8fr) minmax(0, 5fr);
|
|
143
|
+
grid-template-areas: "board inspector";
|
|
76
144
|
}
|
|
77
145
|
}
|
|
78
146
|
|
|
@@ -82,7 +150,12 @@
|
|
|
82
150
|
}
|
|
83
151
|
|
|
84
152
|
.work-group + .work-group {
|
|
85
|
-
|
|
153
|
+
border-block-start: 1px solid var(--rly-color-border-1);
|
|
154
|
+
padding-block-start: var(--rly-space-16);
|
|
155
|
+
}
|
|
156
|
+
|
|
157
|
+
.work-group > .work-group-title {
|
|
158
|
+
padding-inline: var(--rly-space-16);
|
|
86
159
|
}
|
|
87
160
|
|
|
88
161
|
.work-group-title {
|
|
@@ -97,8 +170,8 @@
|
|
|
97
170
|
}
|
|
98
171
|
|
|
99
172
|
.work-rows {
|
|
100
|
-
border-block-start: 1px solid var(--rly-color-border-1);
|
|
101
173
|
display: grid;
|
|
174
|
+
gap: var(--rly-space-0);
|
|
102
175
|
list-style: none;
|
|
103
176
|
margin: var(--rly-space-0);
|
|
104
177
|
padding: var(--rly-space-0);
|
|
@@ -107,24 +180,28 @@
|
|
|
107
180
|
.work-board-row {
|
|
108
181
|
background: none;
|
|
109
182
|
border: 0;
|
|
110
|
-
border-block-end: 1px solid var(--rly-color-border-1);
|
|
111
183
|
color: inherit;
|
|
112
184
|
cursor: pointer;
|
|
113
185
|
display: grid;
|
|
114
186
|
font: inherit;
|
|
115
187
|
gap: var(--rly-space-4) var(--rly-space-12);
|
|
116
|
-
grid-template-areas: "title state" "caption caption";
|
|
188
|
+
grid-template-areas: "title state" "meta meta" "caption caption";
|
|
117
189
|
grid-template-columns: minmax(0, 1fr) auto;
|
|
118
190
|
inline-size: 100%;
|
|
119
|
-
padding: var(--rly-space-12) var(--rly-space-
|
|
191
|
+
padding: var(--rly-space-12) var(--rly-space-16);
|
|
120
192
|
text-align: start;
|
|
121
193
|
text-decoration: none;
|
|
122
194
|
}
|
|
123
195
|
|
|
124
196
|
.work-board-row:is([aria-pressed="true"], [aria-current="true"]) {
|
|
125
197
|
background: var(--rly-color-surface-2);
|
|
126
|
-
|
|
127
|
-
|
|
198
|
+
}
|
|
199
|
+
|
|
200
|
+
@container work-page (width < 40rem) {
|
|
201
|
+
.work-board-row {
|
|
202
|
+
grid-template-areas: "title" "state" "meta" "caption";
|
|
203
|
+
grid-template-columns: minmax(0, 1fr);
|
|
204
|
+
}
|
|
128
205
|
}
|
|
129
206
|
|
|
130
207
|
/* Long unbroken values (branch names, titles) wrap inside their column. The grids below bound
|
|
@@ -150,13 +227,24 @@
|
|
|
150
227
|
|
|
151
228
|
.work-row-title {
|
|
152
229
|
display: grid;
|
|
153
|
-
|
|
230
|
+
font: var(--rly-type-label-weight) var(--rly-type-body-size) / var(--rly-type-body-line-height)
|
|
231
|
+
var(--rly-type-body-font);
|
|
154
232
|
grid-area: title;
|
|
155
233
|
min-inline-size: var(--rly-space-0);
|
|
156
234
|
}
|
|
157
235
|
|
|
158
|
-
.work-row-meta
|
|
236
|
+
.work-row-meta {
|
|
237
|
+
color: var(--rly-color-text-2);
|
|
238
|
+
font: var(--rly-type-meta-weight) var(--rly-type-meta-size) / var(--rly-type-meta-line-height)
|
|
239
|
+
var(--rly-type-meta-font);
|
|
240
|
+
grid-area: meta;
|
|
241
|
+
}
|
|
242
|
+
|
|
159
243
|
.work-row-caption {
|
|
244
|
+
align-items: center;
|
|
245
|
+
display: flex;
|
|
246
|
+
flex-wrap: wrap;
|
|
247
|
+
gap: var(--rly-space-8);
|
|
160
248
|
color: var(--rly-color-text-2);
|
|
161
249
|
font: var(--rly-type-meta-weight) var(--rly-type-meta-size) / var(--rly-type-meta-line-height)
|
|
162
250
|
var(--rly-type-meta-font);
|
|
@@ -167,20 +255,165 @@
|
|
|
167
255
|
font-variant-numeric: tabular-nums;
|
|
168
256
|
grid-area: caption;
|
|
169
257
|
}
|
|
258
|
+
/* The open badge belongs to the request text; only its age is a separate line on phones. */
|
|
259
|
+
.work-request-line {
|
|
260
|
+
display: -webkit-box;
|
|
261
|
+
min-inline-size: var(--rly-space-0);
|
|
262
|
+
overflow: clip;
|
|
263
|
+
-webkit-box-orient: vertical;
|
|
264
|
+
-webkit-line-clamp: 2;
|
|
265
|
+
}
|
|
266
|
+
.work-request-line > .work-row-state {
|
|
267
|
+
display: inline-flex;
|
|
268
|
+
vertical-align: middle;
|
|
269
|
+
}
|
|
270
|
+
.work-request-age {
|
|
271
|
+
white-space: nowrap;
|
|
272
|
+
}
|
|
273
|
+
@container work-page (width < 40rem) {
|
|
274
|
+
.work-row-caption:has(.work-request-line) {
|
|
275
|
+
display: grid;
|
|
276
|
+
gap: var(--rly-space-4);
|
|
277
|
+
}
|
|
278
|
+
}
|
|
170
279
|
|
|
171
280
|
/* Only the blocking fact carries ink. */
|
|
172
281
|
.work-row-caption[data-blocking="true"] {
|
|
173
282
|
color: var(--rly-color-blocked-ink);
|
|
174
283
|
}
|
|
175
284
|
|
|
176
|
-
/*
|
|
285
|
+
/* StateLabel owns the shared state ink and icon. */
|
|
177
286
|
.work-row-state {
|
|
178
|
-
|
|
179
|
-
font: var(--rly-type-label-weight) var(--rly-type-label-size) / var(--rly-type-label-line-height)
|
|
180
|
-
var(--rly-type-label-font);
|
|
287
|
+
align-self: start;
|
|
181
288
|
grid-area: state;
|
|
182
289
|
}
|
|
183
290
|
|
|
291
|
+
.work-delivery {
|
|
292
|
+
display: grid;
|
|
293
|
+
gap: var(--rly-space-12);
|
|
294
|
+
}
|
|
295
|
+
|
|
296
|
+
.work-row-progress {
|
|
297
|
+
display: grid;
|
|
298
|
+
gap: var(--rly-space-12);
|
|
299
|
+
grid-template-columns: repeat(4, minmax(0, 1fr));
|
|
300
|
+
list-style: none;
|
|
301
|
+
margin: var(--rly-space-0);
|
|
302
|
+
padding: var(--rly-space-0);
|
|
303
|
+
}
|
|
304
|
+
|
|
305
|
+
.work-row-progress > li {
|
|
306
|
+
align-content: start;
|
|
307
|
+
color: var(--rly-color-text-2);
|
|
308
|
+
display: grid;
|
|
309
|
+
font: var(--rly-type-meta-weight) var(--rly-type-meta-size) / var(--rly-type-meta-line-height)
|
|
310
|
+
var(--rly-type-meta-font);
|
|
311
|
+
gap: var(--rly-space-8);
|
|
312
|
+
min-inline-size: var(--rly-space-0);
|
|
313
|
+
position: relative;
|
|
314
|
+
}
|
|
315
|
+
|
|
316
|
+
.work-row-progress[data-steps="3"] {
|
|
317
|
+
grid-template-columns: repeat(3, minmax(0, 1fr));
|
|
318
|
+
}
|
|
319
|
+
|
|
320
|
+
.work-step-number {
|
|
321
|
+
align-items: center;
|
|
322
|
+
background: var(--rly-color-surface-1);
|
|
323
|
+
block-size: var(--rly-space-24);
|
|
324
|
+
border: 1px solid var(--rly-color-border-2);
|
|
325
|
+
border-radius: var(--rly-radius-round);
|
|
326
|
+
display: inline-flex;
|
|
327
|
+
inline-size: var(--rly-space-24);
|
|
328
|
+
justify-content: center;
|
|
329
|
+
position: relative;
|
|
330
|
+
z-index: 1;
|
|
331
|
+
}
|
|
332
|
+
|
|
333
|
+
.work-row-progress > li:not(:last-child)::after {
|
|
334
|
+
background: var(--rly-color-border-2);
|
|
335
|
+
block-size: 1px;
|
|
336
|
+
content: "";
|
|
337
|
+
inset-block-start: var(--rly-space-12);
|
|
338
|
+
inset-inline-start: var(--rly-space-24);
|
|
339
|
+
inset-inline-end: calc(-1 * var(--rly-space-12));
|
|
340
|
+
position: absolute;
|
|
341
|
+
}
|
|
342
|
+
|
|
343
|
+
/* Delivery names keep whole words in the desktop rail and phone column. */
|
|
344
|
+
.work-step-name {
|
|
345
|
+
color: var(--rly-color-text-1);
|
|
346
|
+
font-weight: var(--rly-type-label-weight);
|
|
347
|
+
overflow-wrap: normal;
|
|
348
|
+
word-break: normal;
|
|
349
|
+
}
|
|
350
|
+
|
|
351
|
+
@container work-page (width < 40rem) {
|
|
352
|
+
.work-row-progress,
|
|
353
|
+
.work-row-progress[data-steps="3"] {
|
|
354
|
+
gap: var(--rly-space-8);
|
|
355
|
+
grid-template-columns: minmax(0, 1fr);
|
|
356
|
+
}
|
|
357
|
+
.work-row-progress > li {
|
|
358
|
+
align-items: center;
|
|
359
|
+
gap: var(--rly-space-8);
|
|
360
|
+
grid-template-columns: var(--rly-space-24) minmax(0, 1fr) auto;
|
|
361
|
+
}
|
|
362
|
+
.work-row-progress > li::after {
|
|
363
|
+
display: none;
|
|
364
|
+
}
|
|
365
|
+
.work-row-progress > li > :last-child {
|
|
366
|
+
justify-self: end;
|
|
367
|
+
}
|
|
368
|
+
.work-step-name {
|
|
369
|
+
font-weight: var(--rly-type-meta-weight);
|
|
370
|
+
}
|
|
371
|
+
.work-row-progress > li[data-reached="true"]:not([aria-current="step"]) .work-step-number {
|
|
372
|
+
background: var(--rly-color-text-2);
|
|
373
|
+
border-color: var(--rly-color-text-2);
|
|
374
|
+
color: var(--rly-color-surface-1);
|
|
375
|
+
}
|
|
376
|
+
.work-row-progress > li[aria-current="step"] .work-step-name {
|
|
377
|
+
font-weight: var(--rly-type-label-weight);
|
|
378
|
+
}
|
|
379
|
+
.work-row-progress > li[aria-current="step"][data-tone="caution"] .work-step-number {
|
|
380
|
+
background: var(--rly-color-held-tint);
|
|
381
|
+
border-color: var(--rly-color-held-ink);
|
|
382
|
+
color: var(--rly-color-held-ink);
|
|
383
|
+
}
|
|
384
|
+
.work-row-progress > li[aria-current="step"][data-tone="progress"] .work-step-number {
|
|
385
|
+
background: var(--rly-color-deploying-tint);
|
|
386
|
+
border-color: var(--rly-color-deploying-ink);
|
|
387
|
+
color: var(--rly-color-deploying-ink);
|
|
388
|
+
}
|
|
389
|
+
.work-row-progress > li[aria-current="step"][data-tone="critical"] .work-step-number {
|
|
390
|
+
border-color: var(--rly-color-blocked-ink);
|
|
391
|
+
color: var(--rly-color-blocked-ink);
|
|
392
|
+
}
|
|
393
|
+
}
|
|
394
|
+
|
|
395
|
+
.work-row-evidence {
|
|
396
|
+
align-items: start;
|
|
397
|
+
display: flex;
|
|
398
|
+
flex-direction: column;
|
|
399
|
+
gap: var(--rly-space-8);
|
|
400
|
+
}
|
|
401
|
+
.work-evidence-chip {
|
|
402
|
+
align-items: center;
|
|
403
|
+
background: var(--rly-color-surface-2);
|
|
404
|
+
border: 1px solid var(--rly-color-border-1);
|
|
405
|
+
border-radius: var(--rly-radius-round);
|
|
406
|
+
display: flex;
|
|
407
|
+
flex-wrap: wrap;
|
|
408
|
+
font: var(--rly-type-meta-weight) var(--rly-type-meta-size) / var(--rly-type-meta-line-height)
|
|
409
|
+
var(--rly-type-meta-font);
|
|
410
|
+
padding: var(--rly-space-4) var(--rly-space-12);
|
|
411
|
+
}
|
|
412
|
+
.work-row-read {
|
|
413
|
+
color: var(--rly-color-text-2);
|
|
414
|
+
font-variant-numeric: tabular-nums;
|
|
415
|
+
}
|
|
416
|
+
|
|
184
417
|
/* In the detail the state word takes its ink; in a row the group title and caption already say it. */
|
|
185
418
|
.work-detail .work-row-state[data-tone="critical"] {
|
|
186
419
|
color: var(--rly-color-blocked-ink);
|
|
@@ -196,32 +429,23 @@
|
|
|
196
429
|
gap: var(--rly-space-16);
|
|
197
430
|
}
|
|
198
431
|
|
|
432
|
+
.work-inspector > :last-child {
|
|
433
|
+
padding: var(--rly-space-32);
|
|
434
|
+
}
|
|
435
|
+
.work-detail-heading {
|
|
436
|
+
display: grid;
|
|
437
|
+
gap: var(--rly-space-4);
|
|
438
|
+
}
|
|
199
439
|
.work-facts {
|
|
200
|
-
background: var(--rly-color-surface-2);
|
|
201
|
-
border-radius: var(--rly-radius-control);
|
|
202
440
|
display: grid;
|
|
441
|
+
gap: var(--rly-space-12);
|
|
203
442
|
margin: var(--rly-space-0);
|
|
204
|
-
padding: var(--rly-space-
|
|
443
|
+
padding: var(--rly-space-0);
|
|
205
444
|
}
|
|
206
|
-
|
|
207
445
|
.work-facts > div {
|
|
208
|
-
border-block-end: 1px solid var(--rly-color-border-1);
|
|
209
446
|
display: grid;
|
|
210
|
-
gap: var(--rly-space-
|
|
211
|
-
grid-template-columns:
|
|
212
|
-
padding-block: var(--rly-space-8);
|
|
213
|
-
}
|
|
214
|
-
|
|
215
|
-
/* A narrow page stacks each fact's name above its value, so values are not squeezed into a sliver. */
|
|
216
|
-
@container work-page (width < 30rem) {
|
|
217
|
-
.work-facts > div {
|
|
218
|
-
gap: var(--rly-space-2);
|
|
219
|
-
grid-template-columns: minmax(0, 1fr);
|
|
220
|
-
}
|
|
221
|
-
}
|
|
222
|
-
|
|
223
|
-
.work-facts > div:last-child {
|
|
224
|
-
border-block-end: 0;
|
|
447
|
+
gap: var(--rly-space-8);
|
|
448
|
+
grid-template-columns: 5.5rem minmax(0, 1fr);
|
|
225
449
|
}
|
|
226
450
|
|
|
227
451
|
.work-facts dt {
|
|
@@ -236,12 +460,15 @@
|
|
|
236
460
|
}
|
|
237
461
|
|
|
238
462
|
.work-facts dd {
|
|
463
|
+
font: var(--rly-type-label-weight) var(--rly-type-meta-size) / var(--rly-type-meta-line-height)
|
|
464
|
+
var(--rly-type-meta-font);
|
|
239
465
|
margin: var(--rly-space-0);
|
|
240
466
|
min-inline-size: var(--rly-space-0);
|
|
241
467
|
}
|
|
242
468
|
|
|
243
469
|
/* A note is a flat box with an even border; the first word carries the state. */
|
|
244
470
|
.work-note {
|
|
471
|
+
background: var(--rly-color-surface-1);
|
|
245
472
|
border: 1px solid var(--rly-color-border-2);
|
|
246
473
|
border-radius: var(--rly-radius-field);
|
|
247
474
|
margin: var(--rly-space-0);
|
|
@@ -281,15 +508,40 @@
|
|
|
281
508
|
padding-block: var(--rly-space-8);
|
|
282
509
|
}
|
|
283
510
|
|
|
284
|
-
.work-request-heading
|
|
511
|
+
.work-request-heading,
|
|
512
|
+
.work-request-meta {
|
|
285
513
|
align-items: baseline;
|
|
286
514
|
display: flex;
|
|
515
|
+
flex-wrap: wrap;
|
|
516
|
+
gap: var(--rly-space-4) var(--rly-space-8);
|
|
517
|
+
}
|
|
518
|
+
.work-detail-section[aria-labelledby="work-requests-title"] .work-detail-list {
|
|
519
|
+
border: 1px solid var(--rly-color-border-1);
|
|
520
|
+
border-radius: var(--rly-radius-field);
|
|
521
|
+
overflow: hidden;
|
|
522
|
+
}
|
|
523
|
+
.work-detail-section[aria-labelledby="work-requests-title"] .work-detail-list > li {
|
|
524
|
+
padding: var(--rly-space-12);
|
|
525
|
+
}
|
|
526
|
+
.work-detail-section[aria-labelledby="work-requests-title"] .work-detail-list > li:last-child {
|
|
527
|
+
border-block-end: 0;
|
|
528
|
+
}
|
|
529
|
+
.work-activity-row {
|
|
530
|
+
display: grid;
|
|
287
531
|
gap: var(--rly-space-12);
|
|
288
|
-
|
|
532
|
+
grid-template-columns: 3.5rem minmax(0, 1fr);
|
|
533
|
+
padding-block: var(--rly-space-4);
|
|
534
|
+
font: var(--rly-type-meta-weight) var(--rly-type-meta-size) / var(--rly-type-meta-line-height)
|
|
535
|
+
var(--rly-type-meta-font);
|
|
536
|
+
}
|
|
537
|
+
.work-activity-row time {
|
|
538
|
+
color: var(--rly-color-text-2);
|
|
539
|
+
font-variant-numeric: tabular-nums;
|
|
289
540
|
}
|
|
290
541
|
|
|
291
542
|
/* Read out when a request's outcome replaces its bar; the state word already shows it. */
|
|
292
|
-
.work-request-announcement
|
|
543
|
+
.work-request-announcement,
|
|
544
|
+
.work-accessible-detail {
|
|
293
545
|
block-size: 1px;
|
|
294
546
|
clip-path: inset(50%);
|
|
295
547
|
inline-size: 1px;
|
|
@@ -310,10 +562,94 @@
|
|
|
310
562
|
cursor: pointer;
|
|
311
563
|
}
|
|
312
564
|
|
|
565
|
+
.work-note[data-tone="held"] {
|
|
566
|
+
border-color: var(--rly-color-held-ink);
|
|
567
|
+
}
|
|
568
|
+
.work-overlay-note {
|
|
569
|
+
display: flex;
|
|
570
|
+
gap: var(--rly-space-12);
|
|
571
|
+
}
|
|
572
|
+
.work-overlay-note > svg {
|
|
573
|
+
color: var(--rly-color-held-ink);
|
|
574
|
+
flex: none;
|
|
575
|
+
margin-block-start: var(--rly-space-4);
|
|
576
|
+
}
|
|
577
|
+
.work-history-note {
|
|
578
|
+
align-items: start;
|
|
579
|
+
background: var(--rly-color-surface-1);
|
|
580
|
+
display: flex;
|
|
581
|
+
gap: var(--rly-space-12);
|
|
582
|
+
justify-content: space-between;
|
|
583
|
+
}
|
|
584
|
+
.work-history-note > :last-child {
|
|
585
|
+
flex: none;
|
|
586
|
+
}
|
|
587
|
+
.work-empty-copy {
|
|
588
|
+
display: grid;
|
|
589
|
+
gap: var(--rly-space-12);
|
|
590
|
+
padding: var(--rly-space-24) var(--rly-space-16);
|
|
591
|
+
}
|
|
592
|
+
.work-empty-copy > strong {
|
|
593
|
+
font-weight: var(--rly-type-label-weight);
|
|
594
|
+
}
|
|
595
|
+
.work-empty-copy code {
|
|
596
|
+
background: var(--rly-color-surface-2);
|
|
597
|
+
border-radius: var(--rly-radius-tag);
|
|
598
|
+
padding-inline: var(--rly-space-4);
|
|
599
|
+
}
|
|
600
|
+
.work-filter-empty {
|
|
601
|
+
justify-content: space-between;
|
|
602
|
+
align-items: center;
|
|
603
|
+
display: flex;
|
|
604
|
+
flex-wrap: wrap;
|
|
605
|
+
gap: var(--rly-space-12);
|
|
606
|
+
padding: var(--rly-space-24) var(--rly-space-16);
|
|
607
|
+
}
|
|
608
|
+
|
|
313
609
|
.work-links {
|
|
610
|
+
align-items: center;
|
|
611
|
+
border-block-start: 1px solid var(--rly-color-border-1);
|
|
612
|
+
padding-block-start: var(--rly-space-16);
|
|
314
613
|
display: flex;
|
|
315
614
|
flex-wrap: wrap;
|
|
316
615
|
gap: var(--rly-space-16);
|
|
616
|
+
justify-content: space-between;
|
|
617
|
+
}
|
|
618
|
+
.work-links .work-connect-link {
|
|
619
|
+
align-items: center;
|
|
620
|
+
display: inline-flex;
|
|
621
|
+
font: var(--rly-type-label-weight) var(--rly-type-meta-size) / var(--rly-type-meta-line-height)
|
|
622
|
+
var(--rly-type-meta-font);
|
|
623
|
+
gap: var(--rly-space-8);
|
|
624
|
+
text-decoration: underline;
|
|
625
|
+
text-decoration-color: currentColor;
|
|
626
|
+
}
|
|
627
|
+
.work-connect-link > svg {
|
|
628
|
+
flex: none;
|
|
629
|
+
}
|
|
630
|
+
@container work-page (width < 40rem) {
|
|
631
|
+
.work-links {
|
|
632
|
+
align-items: start;
|
|
633
|
+
flex-direction: column;
|
|
634
|
+
}
|
|
635
|
+
}
|
|
636
|
+
.work-close-control,
|
|
637
|
+
.work-history-note .work-exact-link,
|
|
638
|
+
.work-filter-empty .work-exact-link,
|
|
639
|
+
.work-load-more-link {
|
|
640
|
+
align-items: center;
|
|
641
|
+
background: var(--rly-color-surface-1);
|
|
642
|
+
border: 1px solid var(--rly-color-border-2);
|
|
643
|
+
display: inline-flex;
|
|
644
|
+
font: var(--rly-type-label-weight) var(--rly-type-meta-size) / var(--rly-type-meta-line-height)
|
|
645
|
+
var(--rly-type-meta-font);
|
|
646
|
+
min-block-size: var(--rly-control-height-dense);
|
|
647
|
+
padding: var(--rly-space-4) var(--rly-space-12);
|
|
648
|
+
text-decoration: none;
|
|
649
|
+
}
|
|
650
|
+
.work-close-heading {
|
|
651
|
+
background: var(--rly-color-surface-2);
|
|
652
|
+
border-color: transparent;
|
|
317
653
|
}
|
|
318
654
|
|
|
319
655
|
.work-exact-link,
|