@klodd/ds 3.19.2 → 3.19.3
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 +24 -14
- package/package.json +1 -1
|
@@ -5,7 +5,7 @@
|
|
|
5
5
|
breakdowns, statistik-paneler, settings-summaries.
|
|
6
6
|
|
|
7
7
|
Blocks:
|
|
8
|
-
.kv-list - <ul>-wrapper,
|
|
8
|
+
.kv-list - <ul>-wrapper, satter default color + font-size
|
|
9
9
|
|
|
10
10
|
Element:
|
|
11
11
|
.kv-list__item - en rad (justify-content: space-between)
|
|
@@ -21,21 +21,30 @@
|
|
|
21
21
|
--divider - horisontell separator-rad (block-display)
|
|
22
22
|
--budget - block-display for burndown-rad med expanderbar header
|
|
23
23
|
|
|
24
|
-
Layout-doktrin (2026-05-13):
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
24
|
+
Layout-doktrin (2026-05-13):
|
|
25
|
+
1) .kv-list satter default color/font-size sa ALLA barn-rader ar
|
|
26
|
+
(inkl. --budget och --divider) ärver via cascade. Det loser
|
|
27
|
+
specificity-konflikten dar default-LI-rule overrode modifier-
|
|
28
|
+
reglerna.
|
|
29
|
+
2) Layout-regeln pa .kv-list > li satter bara display/padding/gap,
|
|
30
|
+
INGEN color/font-size. Modifier-reglerna (--strong, --sub) kan
|
|
31
|
+
darmed override via simple class-selectors utan specificity-hack.
|
|
32
|
+
3) Alla direkta <li>-barn far flex-row + space-between + ellipsis-
|
|
33
|
+
truncation pa forsta barnet sa templates kan skriva
|
|
34
|
+
<li><span>label</span><span>value</span></li> utan BEM-klasser.
|
|
35
|
+
Undantag: --budget och --divider behaller block-display via :not().
|
|
30
36
|
================================================================ */
|
|
31
37
|
.kv-list {
|
|
32
38
|
list-style: none;
|
|
33
39
|
padding: 0;
|
|
34
40
|
margin: 0;
|
|
41
|
+
color: var(--text-subtle);
|
|
42
|
+
font-size: var(--fs-13);
|
|
35
43
|
}
|
|
36
44
|
|
|
37
45
|
/* Default rad-layout for alla direkta <li>-barn + explicit .kv-list__item.
|
|
38
|
-
:not()-filter sa --budget och --divider behaller egen layout.
|
|
46
|
+
:not()-filter sa --budget och --divider behaller egen layout.
|
|
47
|
+
INGEN color/font-size har - arvs fran .kv-list sa modifiers kan vinna. */
|
|
39
48
|
.kv-list > li:not(.kv-list__item--budget):not(.kv-list__item--divider),
|
|
40
49
|
.kv-list__item:not(.kv-list__item--budget):not(.kv-list__item--divider) {
|
|
41
50
|
display: flex;
|
|
@@ -43,8 +52,6 @@
|
|
|
43
52
|
align-items: baseline;
|
|
44
53
|
gap: var(--space-10);
|
|
45
54
|
padding: var(--space-8) 0;
|
|
46
|
-
font-size: var(--fs-13);
|
|
47
|
-
color: var(--text-subtle);
|
|
48
55
|
}
|
|
49
56
|
|
|
50
57
|
/* Forsta barnet (label) trunkeras vid overflow med ellipsis. */
|
|
@@ -59,7 +66,8 @@
|
|
|
59
66
|
white-space: nowrap;
|
|
60
67
|
}
|
|
61
68
|
|
|
62
|
-
/* Sista barnet (varde) krymper inte + tabular-nums for siffer-alignment.
|
|
69
|
+
/* Sista barnet (varde) krymper inte + tabular-nums for siffer-alignment.
|
|
70
|
+
color: text-default sa varde-kolumnen alltid framtrader oavsett LI-class. */
|
|
63
71
|
.kv-list > li:not(.kv-list__item--budget):not(.kv-list__item--divider) > :last-child,
|
|
64
72
|
.kv-list__item:not(.kv-list__item--budget):not(.kv-list__item--divider) > :last-child,
|
|
65
73
|
.kv-list__value {
|
|
@@ -75,7 +83,7 @@
|
|
|
75
83
|
|
|
76
84
|
.kv-list__item--sub {
|
|
77
85
|
font-size: var(--fs-11);
|
|
78
|
-
color
|
|
86
|
+
/* color arvs (text-subtle fran .kv-list) */
|
|
79
87
|
}
|
|
80
88
|
|
|
81
89
|
.kv-list__item--divider {
|
|
@@ -88,11 +96,14 @@
|
|
|
88
96
|
.kv-list__item--budget {
|
|
89
97
|
display: block;
|
|
90
98
|
padding: 0;
|
|
99
|
+
/* color arvs (text-subtle fran .kv-list) sa Mat/Noje/Shopping-label
|
|
100
|
+
far samma farg som Boendeavgift/Amortering/Ranta. */
|
|
91
101
|
}
|
|
92
102
|
|
|
93
103
|
/* kv-budget-header foljer samma rad-layout som .kv-list > li
|
|
94
104
|
(label + varde med ellipsis-truncation). Egen flex-regel sa
|
|
95
|
-
den inte kollapsar fran --budget's block-display.
|
|
105
|
+
den inte kollapsar fran --budget's block-display.
|
|
106
|
+
INGEN color har - arvs fran .kv-list (text-subtle). */
|
|
96
107
|
.kv-budget-header {
|
|
97
108
|
display: flex;
|
|
98
109
|
justify-content: space-between;
|
|
@@ -130,7 +141,6 @@
|
|
|
130
141
|
align-items: baseline;
|
|
131
142
|
gap: var(--space-10);
|
|
132
143
|
font-size: var(--fs-11);
|
|
133
|
-
color: var(--text-subtle);
|
|
134
144
|
padding: var(--space-4) 0;
|
|
135
145
|
}
|
|
136
146
|
|