@klodd/ds 3.19.1 → 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 +16 -18
- package/package.json +1 -1
|
@@ -18,15 +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
24
|
Layout-doktrin (2026-05-13): alla direkta <li>-barn av .kv-list far
|
|
25
25
|
automatiskt flex-row + space-between + ellipsis-truncation pa forsta
|
|
26
|
-
barnet
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
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.
|
|
30
30
|
================================================================ */
|
|
31
31
|
.kv-list {
|
|
32
32
|
list-style: none;
|
|
@@ -35,9 +35,9 @@
|
|
|
35
35
|
}
|
|
36
36
|
|
|
37
37
|
/* Default rad-layout for alla direkta <li>-barn + explicit .kv-list__item.
|
|
38
|
-
--budget och --divider
|
|
39
|
-
.kv-list > li,
|
|
40
|
-
.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) {
|
|
41
41
|
display: flex;
|
|
42
42
|
justify-content: space-between;
|
|
43
43
|
align-items: baseline;
|
|
@@ -47,9 +47,9 @@
|
|
|
47
47
|
color: var(--text-subtle);
|
|
48
48
|
}
|
|
49
49
|
|
|
50
|
-
/* Forsta barnet (label) trunkeras vid overflow med ellipsis.
|
|
51
|
-
|
|
52
|
-
.kv-
|
|
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,
|
|
53
53
|
.kv-list__key {
|
|
54
54
|
display: block;
|
|
55
55
|
flex: 1;
|
|
@@ -59,8 +59,9 @@
|
|
|
59
59
|
white-space: nowrap;
|
|
60
60
|
}
|
|
61
61
|
|
|
62
|
-
/*
|
|
63
|
-
.kv-list > li > :last-child,
|
|
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,
|
|
64
65
|
.kv-list__value {
|
|
65
66
|
flex-shrink: 0;
|
|
66
67
|
color: var(--text-default);
|
|
@@ -77,9 +78,6 @@
|
|
|
77
78
|
color: var(--text-subtle);
|
|
78
79
|
}
|
|
79
80
|
|
|
80
|
-
/* Divider och budget overrider tillbaka till block-display sa
|
|
81
|
-
default-flex inte stor deras egen layout. */
|
|
82
|
-
.kv-list > li.kv-list__item--divider,
|
|
83
81
|
.kv-list__item--divider {
|
|
84
82
|
display: block;
|
|
85
83
|
border-bottom: 1px solid var(--border-subtle);
|
|
@@ -87,14 +85,14 @@
|
|
|
87
85
|
margin: var(--space-4) 0;
|
|
88
86
|
}
|
|
89
87
|
|
|
90
|
-
.kv-list > li.kv-list__item--budget,
|
|
91
88
|
.kv-list__item--budget {
|
|
92
89
|
display: block;
|
|
93
90
|
padding: 0;
|
|
94
91
|
}
|
|
95
92
|
|
|
96
93
|
/* kv-budget-header foljer samma rad-layout som .kv-list > li
|
|
97
|
-
(label + varde med ellipsis-truncation).
|
|
94
|
+
(label + varde med ellipsis-truncation). Egen flex-regel sa
|
|
95
|
+
den inte kollapsar fran --budget's block-display. */
|
|
98
96
|
.kv-budget-header {
|
|
99
97
|
display: flex;
|
|
100
98
|
justify-content: space-between;
|