@klodd/ds 5.2.0 → 5.2.1
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/css/components/progress-bar.css +110 -0
- package/css/index.css +1 -0
- package/package.json +1 -1
|
@@ -0,0 +1,110 @@
|
|
|
1
|
+
/* ================================================================
|
|
2
|
+
components/progress-bar.css
|
|
3
|
+
|
|
4
|
+
Två sibling-blocks for polling-driven progress-UI:
|
|
5
|
+
|
|
6
|
+
.pipeline-progress - overst pa /korningar nar DigestRun pagar
|
|
7
|
+
(cron-morning/cron-alert/cron-signals)
|
|
8
|
+
.brief-progress - pa /jobb/{id} nar bolagsanalys eller
|
|
9
|
+
brevgenerering pagar (job_briefs)
|
|
10
|
+
|
|
11
|
+
Samma visuella formspraket (6px-bar, 0.4s width-transition, accent-9-
|
|
12
|
+
fill, sunken-track) men separata block-klasser sa de inte krockar
|
|
13
|
+
med varandra. Olika DOM-id:n och olika underlag (digest_runs vs
|
|
14
|
+
job_briefs) - hade kunnat slas ihop till en .progress-bar med
|
|
15
|
+
modifiers, men kept separata for tydligare BEM-block per use-case.
|
|
16
|
+
|
|
17
|
+
Blocks:
|
|
18
|
+
.pipeline-progress - root, /korningar
|
|
19
|
+
.brief-progress - root, /jobb/{id}
|
|
20
|
+
|
|
21
|
+
BEM-element (samma per block):
|
|
22
|
+
__header - flex-row: label vänster, pct hoger
|
|
23
|
+
__bar-track - bakgrund-track 6px hojd
|
|
24
|
+
__bar - accent-fyllning, width transition
|
|
25
|
+
__sub - sub-text under bar (.pipeline-progress)
|
|
26
|
+
__hint - hint-text under bar (.brief-progress)
|
|
27
|
+
__label - inline label-element (anvandbart pa /design)
|
|
28
|
+
__pct - inline pct-element (anvandbart pa /design)
|
|
29
|
+
|
|
30
|
+
Lyftad fran jubb.css 2026-05-18 till komponent-mappen sa /design
|
|
31
|
+
kan ladda bara denna fil utan att dra in hela Jubb-domain-CSS:n
|
|
32
|
+
(per Calles brief 2026-05-07: ingenting i styleguiden far paverka
|
|
33
|
+
appens overiga CSS).
|
|
34
|
+
|
|
35
|
+
Tokens: --surface-sunken, --accent-9, --text-default, --text-muted,
|
|
36
|
+
--space-6/-8/-12/-16, --radius-full, --fs-12/-13.
|
|
37
|
+
================================================================ */
|
|
38
|
+
|
|
39
|
+
|
|
40
|
+
/* ─── .pipeline-progress (/korningar) ──────────────────────────── */
|
|
41
|
+
|
|
42
|
+
.pipeline-progress {
|
|
43
|
+
margin: 0 0 var(--space-16);
|
|
44
|
+
padding: var(--space-12) 0;
|
|
45
|
+
}
|
|
46
|
+
|
|
47
|
+
.pipeline-progress__header {
|
|
48
|
+
display: flex;
|
|
49
|
+
justify-content: space-between;
|
|
50
|
+
align-items: baseline;
|
|
51
|
+
margin-bottom: var(--space-8);
|
|
52
|
+
font-size: var(--fs-13);
|
|
53
|
+
color: var(--text-default);
|
|
54
|
+
}
|
|
55
|
+
|
|
56
|
+
.pipeline-progress__bar-track {
|
|
57
|
+
height: 6px;
|
|
58
|
+
background: var(--surface-sunken);
|
|
59
|
+
border-radius: var(--radius-full);
|
|
60
|
+
overflow: hidden;
|
|
61
|
+
}
|
|
62
|
+
|
|
63
|
+
.pipeline-progress__bar {
|
|
64
|
+
height: 100%;
|
|
65
|
+
background: var(--accent-9);
|
|
66
|
+
border-radius: inherit;
|
|
67
|
+
transition: width 0.4s ease;
|
|
68
|
+
}
|
|
69
|
+
|
|
70
|
+
.pipeline-progress__sub {
|
|
71
|
+
margin-top: var(--space-6);
|
|
72
|
+
font-size: var(--fs-12);
|
|
73
|
+
color: var(--text-muted);
|
|
74
|
+
}
|
|
75
|
+
|
|
76
|
+
|
|
77
|
+
/* ─── .brief-progress (/jobb/{id}) ─────────────────────────────── */
|
|
78
|
+
|
|
79
|
+
.brief-progress {
|
|
80
|
+
margin: var(--space-12) 0 var(--space-16);
|
|
81
|
+
}
|
|
82
|
+
|
|
83
|
+
.brief-progress__header {
|
|
84
|
+
display: flex;
|
|
85
|
+
justify-content: space-between;
|
|
86
|
+
align-items: baseline;
|
|
87
|
+
margin-bottom: var(--space-8);
|
|
88
|
+
font-size: var(--fs-13);
|
|
89
|
+
color: var(--text-default);
|
|
90
|
+
}
|
|
91
|
+
|
|
92
|
+
.brief-progress__bar-track {
|
|
93
|
+
height: 6px;
|
|
94
|
+
background: var(--surface-sunken);
|
|
95
|
+
border-radius: var(--radius-full);
|
|
96
|
+
overflow: hidden;
|
|
97
|
+
}
|
|
98
|
+
|
|
99
|
+
.brief-progress__bar {
|
|
100
|
+
height: 100%;
|
|
101
|
+
background: var(--accent-9);
|
|
102
|
+
border-radius: inherit;
|
|
103
|
+
transition: width 0.4s ease;
|
|
104
|
+
}
|
|
105
|
+
|
|
106
|
+
.brief-progress__hint {
|
|
107
|
+
margin: var(--space-6) 0 0;
|
|
108
|
+
font-size: var(--fs-12);
|
|
109
|
+
color: var(--text-muted);
|
|
110
|
+
}
|
package/css/index.css
CHANGED