@klodd/ds 3.19.0 → 3.19.2
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/kv-list.css +55 -11
- package/package.json +1 -1
|
@@ -18,12 +18,15 @@
|
|
|
18
18
|
Modifiers (pa .kv-list__item):
|
|
19
19
|
--strong - primary text + medium weight
|
|
20
20
|
--sub - secondary text + smaller font
|
|
21
|
-
--divider - horisontell separator-rad
|
|
21
|
+
--divider - horisontell separator-rad (block-display)
|
|
22
22
|
--budget - block-display for burndown-rad med expanderbar header
|
|
23
23
|
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
24
|
+
Layout-doktrin (2026-05-13): alla direkta <li>-barn av .kv-list far
|
|
25
|
+
automatiskt flex-row + space-between + ellipsis-truncation pa forsta
|
|
26
|
+
barnet sa templates kan skriva <li><span>label</span><span>value</span></li>
|
|
27
|
+
utan BEM-klasser. Undantag: --budget och --divider behaller block-
|
|
28
|
+
display sa de kan stacka kv-budget-header + kv-budget-body alternativt
|
|
29
|
+
rendera en separator-linje.
|
|
27
30
|
================================================================ */
|
|
28
31
|
.kv-list {
|
|
29
32
|
list-style: none;
|
|
@@ -31,7 +34,10 @@
|
|
|
31
34
|
margin: 0;
|
|
32
35
|
}
|
|
33
36
|
|
|
34
|
-
.kv-list__item
|
|
37
|
+
/* Default rad-layout for alla direkta <li>-barn + explicit .kv-list__item.
|
|
38
|
+
:not()-filter sa --budget och --divider behaller egen layout. */
|
|
39
|
+
.kv-list > li:not(.kv-list__item--budget):not(.kv-list__item--divider),
|
|
40
|
+
.kv-list__item:not(.kv-list__item--budget):not(.kv-list__item--divider) {
|
|
35
41
|
display: flex;
|
|
36
42
|
justify-content: space-between;
|
|
37
43
|
align-items: baseline;
|
|
@@ -41,18 +47,22 @@
|
|
|
41
47
|
color: var(--text-subtle);
|
|
42
48
|
}
|
|
43
49
|
|
|
50
|
+
/* Forsta barnet (label) trunkeras vid overflow med ellipsis. */
|
|
51
|
+
.kv-list > li:not(.kv-list__item--budget):not(.kv-list__item--divider) > :first-child,
|
|
52
|
+
.kv-list__item:not(.kv-list__item--budget):not(.kv-list__item--divider) > :first-child,
|
|
44
53
|
.kv-list__key {
|
|
45
|
-
display:
|
|
46
|
-
align-items: center;
|
|
47
|
-
gap: var(--space-6);
|
|
54
|
+
display: block;
|
|
48
55
|
flex: 1;
|
|
49
56
|
min-width: 0;
|
|
57
|
+
overflow: hidden;
|
|
58
|
+
text-overflow: ellipsis;
|
|
59
|
+
white-space: nowrap;
|
|
50
60
|
}
|
|
51
61
|
|
|
62
|
+
/* Sista barnet (varde) krymper inte + tabular-nums for siffer-alignment. */
|
|
63
|
+
.kv-list > li:not(.kv-list__item--budget):not(.kv-list__item--divider) > :last-child,
|
|
64
|
+
.kv-list__item:not(.kv-list__item--budget):not(.kv-list__item--divider) > :last-child,
|
|
52
65
|
.kv-list__value {
|
|
53
|
-
display: inline-flex;
|
|
54
|
-
align-items: center;
|
|
55
|
-
gap: var(--space-6);
|
|
56
66
|
flex-shrink: 0;
|
|
57
67
|
color: var(--text-default);
|
|
58
68
|
font-variant-numeric: tabular-nums;
|
|
@@ -69,6 +79,7 @@
|
|
|
69
79
|
}
|
|
70
80
|
|
|
71
81
|
.kv-list__item--divider {
|
|
82
|
+
display: block;
|
|
72
83
|
border-bottom: 1px solid var(--border-subtle);
|
|
73
84
|
padding: 0;
|
|
74
85
|
margin: var(--space-4) 0;
|
|
@@ -79,10 +90,14 @@
|
|
|
79
90
|
padding: 0;
|
|
80
91
|
}
|
|
81
92
|
|
|
93
|
+
/* kv-budget-header foljer samma rad-layout som .kv-list > li
|
|
94
|
+
(label + varde med ellipsis-truncation). Egen flex-regel sa
|
|
95
|
+
den inte kollapsar fran --budget's block-display. */
|
|
82
96
|
.kv-budget-header {
|
|
83
97
|
display: flex;
|
|
84
98
|
justify-content: space-between;
|
|
85
99
|
align-items: baseline;
|
|
100
|
+
gap: var(--space-10);
|
|
86
101
|
padding: var(--space-8) 0;
|
|
87
102
|
cursor: pointer;
|
|
88
103
|
user-select: none;
|
|
@@ -90,6 +105,21 @@
|
|
|
90
105
|
touch-action: manipulation;
|
|
91
106
|
}
|
|
92
107
|
|
|
108
|
+
.kv-budget-header > :first-child {
|
|
109
|
+
display: block;
|
|
110
|
+
flex: 1;
|
|
111
|
+
min-width: 0;
|
|
112
|
+
overflow: hidden;
|
|
113
|
+
text-overflow: ellipsis;
|
|
114
|
+
white-space: nowrap;
|
|
115
|
+
}
|
|
116
|
+
|
|
117
|
+
.kv-budget-header > :last-child {
|
|
118
|
+
flex-shrink: 0;
|
|
119
|
+
color: var(--text-default);
|
|
120
|
+
font-variant-numeric: tabular-nums;
|
|
121
|
+
}
|
|
122
|
+
|
|
93
123
|
.kv-budget-body {
|
|
94
124
|
padding: var(--space-4) 0 var(--space-8) 0;
|
|
95
125
|
}
|
|
@@ -98,7 +128,21 @@
|
|
|
98
128
|
display: flex;
|
|
99
129
|
justify-content: space-between;
|
|
100
130
|
align-items: baseline;
|
|
131
|
+
gap: var(--space-10);
|
|
101
132
|
font-size: var(--fs-11);
|
|
102
133
|
color: var(--text-subtle);
|
|
103
134
|
padding: var(--space-4) 0;
|
|
104
135
|
}
|
|
136
|
+
|
|
137
|
+
.kv-budget-body .kv-list__item--sub > :first-child {
|
|
138
|
+
display: block;
|
|
139
|
+
flex: 1;
|
|
140
|
+
min-width: 0;
|
|
141
|
+
overflow: hidden;
|
|
142
|
+
text-overflow: ellipsis;
|
|
143
|
+
white-space: nowrap;
|
|
144
|
+
}
|
|
145
|
+
|
|
146
|
+
.kv-budget-body .kv-list__item--sub > :last-child {
|
|
147
|
+
flex-shrink: 0;
|
|
148
|
+
}
|