@klodd/ds 3.18.0 → 3.19.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/hero.css +16 -8
- package/css/components/kv-list.css +55 -9
- package/package.json +1 -1
package/css/components/hero.css
CHANGED
|
@@ -36,12 +36,15 @@
|
|
|
36
36
|
}
|
|
37
37
|
|
|
38
38
|
.hero__label {
|
|
39
|
+
/* 2026-05-13: text-transform: uppercase borttaget. Labels skrivs
|
|
40
|
+
sentence-case i template ("Din dagsbudget", inte "DIN DAGSBUDGET").
|
|
41
|
+
Det matchar svensk grafisk konvention + var hero-hierarki kommer
|
|
42
|
+
fran font-size och weight, inte fran caps. */
|
|
39
43
|
font-size: var(--fs-12);
|
|
40
44
|
font-weight: var(--fw-medium);
|
|
41
45
|
color: var(--text-muted);
|
|
42
|
-
letter-spacing: var(--ls-
|
|
43
|
-
|
|
44
|
-
margin: 0 0 var(--space-8);
|
|
46
|
+
letter-spacing: var(--ls-tight);
|
|
47
|
+
margin: 0 0 var(--space-12);
|
|
45
48
|
}
|
|
46
49
|
|
|
47
50
|
.hero__label--muted {
|
|
@@ -49,7 +52,6 @@
|
|
|
49
52
|
font-weight: var(--fw-regular);
|
|
50
53
|
color: var(--text-disabled);
|
|
51
54
|
letter-spacing: 0.03em;
|
|
52
|
-
text-transform: lowercase;
|
|
53
55
|
opacity: 0.7;
|
|
54
56
|
}
|
|
55
57
|
|
|
@@ -60,7 +62,7 @@
|
|
|
60
62
|
letter-spacing: var(--ls-tightest, -0.04em);
|
|
61
63
|
color: var(--text-default);
|
|
62
64
|
line-height: var(--lh-tight);
|
|
63
|
-
margin: 0 0 var(--space-
|
|
65
|
+
margin: 0 0 var(--space-12);
|
|
64
66
|
font-variant-numeric: tabular-nums;
|
|
65
67
|
}
|
|
66
68
|
|
|
@@ -75,11 +77,17 @@
|
|
|
75
77
|
}
|
|
76
78
|
|
|
77
79
|
.hero__amount-row {
|
|
80
|
+
/* 2026-05-13: justify-content center → flex-start och gap 10 → 16.
|
|
81
|
+
Amount-row anvands inom .panel/.collapsible-kontext (Ekonom
|
|
82
|
+
Gemensamma utgifter) dar parent ar text-align:left. Center-just
|
|
83
|
+
overrode den left-align via flex. Nu foljer amount-row parent-
|
|
84
|
+
justification. Gap-16 ger luft mellan summa och adjacent
|
|
85
|
+
actions-knappar (btn-copy, btn-bank). */
|
|
78
86
|
display: flex;
|
|
79
87
|
align-items: center;
|
|
80
|
-
justify-content:
|
|
81
|
-
gap: var(--space-
|
|
82
|
-
margin-bottom: var(--space-
|
|
88
|
+
justify-content: flex-start;
|
|
89
|
+
gap: var(--space-16);
|
|
90
|
+
margin-bottom: var(--space-12);
|
|
83
91
|
}
|
|
84
92
|
|
|
85
93
|
.hero__amount-row .hero__amount,
|
|
@@ -21,9 +21,12 @@
|
|
|
21
21
|
--divider - horisontell separator-rad
|
|
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. Det galler aven bare <li> utan BEM-klasser - sa templates
|
|
27
|
+
som inte explicit anvander .kv-list__item far samma rad-layout. Det
|
|
28
|
+
loser radbrytningar och fel-vansterstallning nar template skriver
|
|
29
|
+
<li><span>label</span><span>value</span></li> utan klass.
|
|
27
30
|
================================================================ */
|
|
28
31
|
.kv-list {
|
|
29
32
|
list-style: none;
|
|
@@ -31,6 +34,9 @@
|
|
|
31
34
|
margin: 0;
|
|
32
35
|
}
|
|
33
36
|
|
|
37
|
+
/* Default rad-layout for alla direkta <li>-barn + explicit .kv-list__item.
|
|
38
|
+
--budget och --divider overrider till block-display nedanfor. */
|
|
39
|
+
.kv-list > li,
|
|
34
40
|
.kv-list__item {
|
|
35
41
|
display: flex;
|
|
36
42
|
justify-content: space-between;
|
|
@@ -41,18 +47,21 @@
|
|
|
41
47
|
color: var(--text-subtle);
|
|
42
48
|
}
|
|
43
49
|
|
|
50
|
+
/* Forsta barnet (label) trunkeras vid overflow med ellipsis.
|
|
51
|
+
display:block (override pa span) for att text-overflow ska tradgardas. */
|
|
52
|
+
.kv-list > li > :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
|
+
/* Andra barnet (varde) krymper inte + tabular-nums for siffer-alignment. */
|
|
63
|
+
.kv-list > li > :last-child,
|
|
52
64
|
.kv-list__value {
|
|
53
|
-
display: inline-flex;
|
|
54
|
-
align-items: center;
|
|
55
|
-
gap: var(--space-6);
|
|
56
65
|
flex-shrink: 0;
|
|
57
66
|
color: var(--text-default);
|
|
58
67
|
font-variant-numeric: tabular-nums;
|
|
@@ -68,21 +77,29 @@
|
|
|
68
77
|
color: var(--text-subtle);
|
|
69
78
|
}
|
|
70
79
|
|
|
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,
|
|
71
83
|
.kv-list__item--divider {
|
|
84
|
+
display: block;
|
|
72
85
|
border-bottom: 1px solid var(--border-subtle);
|
|
73
86
|
padding: 0;
|
|
74
87
|
margin: var(--space-4) 0;
|
|
75
88
|
}
|
|
76
89
|
|
|
90
|
+
.kv-list > li.kv-list__item--budget,
|
|
77
91
|
.kv-list__item--budget {
|
|
78
92
|
display: block;
|
|
79
93
|
padding: 0;
|
|
80
94
|
}
|
|
81
95
|
|
|
96
|
+
/* kv-budget-header foljer samma rad-layout som .kv-list > li
|
|
97
|
+
(label + varde med ellipsis-truncation). */
|
|
82
98
|
.kv-budget-header {
|
|
83
99
|
display: flex;
|
|
84
100
|
justify-content: space-between;
|
|
85
101
|
align-items: baseline;
|
|
102
|
+
gap: var(--space-10);
|
|
86
103
|
padding: var(--space-8) 0;
|
|
87
104
|
cursor: pointer;
|
|
88
105
|
user-select: none;
|
|
@@ -90,6 +107,21 @@
|
|
|
90
107
|
touch-action: manipulation;
|
|
91
108
|
}
|
|
92
109
|
|
|
110
|
+
.kv-budget-header > :first-child {
|
|
111
|
+
display: block;
|
|
112
|
+
flex: 1;
|
|
113
|
+
min-width: 0;
|
|
114
|
+
overflow: hidden;
|
|
115
|
+
text-overflow: ellipsis;
|
|
116
|
+
white-space: nowrap;
|
|
117
|
+
}
|
|
118
|
+
|
|
119
|
+
.kv-budget-header > :last-child {
|
|
120
|
+
flex-shrink: 0;
|
|
121
|
+
color: var(--text-default);
|
|
122
|
+
font-variant-numeric: tabular-nums;
|
|
123
|
+
}
|
|
124
|
+
|
|
93
125
|
.kv-budget-body {
|
|
94
126
|
padding: var(--space-4) 0 var(--space-8) 0;
|
|
95
127
|
}
|
|
@@ -98,7 +130,21 @@
|
|
|
98
130
|
display: flex;
|
|
99
131
|
justify-content: space-between;
|
|
100
132
|
align-items: baseline;
|
|
133
|
+
gap: var(--space-10);
|
|
101
134
|
font-size: var(--fs-11);
|
|
102
135
|
color: var(--text-subtle);
|
|
103
136
|
padding: var(--space-4) 0;
|
|
104
137
|
}
|
|
138
|
+
|
|
139
|
+
.kv-budget-body .kv-list__item--sub > :first-child {
|
|
140
|
+
display: block;
|
|
141
|
+
flex: 1;
|
|
142
|
+
min-width: 0;
|
|
143
|
+
overflow: hidden;
|
|
144
|
+
text-overflow: ellipsis;
|
|
145
|
+
white-space: nowrap;
|
|
146
|
+
}
|
|
147
|
+
|
|
148
|
+
.kv-budget-body .kv-list__item--sub > :last-child {
|
|
149
|
+
flex-shrink: 0;
|
|
150
|
+
}
|