@klodd/ds 5.9.0 → 5.11.0
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/base/interactions.css +4 -62
- package/css/base/reset.css +58 -0
- package/css/icons/klodd-icons.svg +131 -0
- package/css/index.css +82 -67
- package/package.json +1 -1
- package/js/lucide-init.js +0 -27
|
@@ -2,77 +2,19 @@
|
|
|
2
2
|
base/interactions.css
|
|
3
3
|
Delade interaktions- och beteendelager, lyfta från appernas
|
|
4
4
|
byte-identiska ds/base.css i Sprint 3:
|
|
5
|
-
- Reset + html/body
|
|
6
5
|
- Touch-cleanup (eliminera webb-tells: tap-callout, 300ms-delay)
|
|
7
6
|
- Hero-glow (radial gradient, opt-in via .with-hero-glow)
|
|
8
7
|
- First-load entry animation (hero/stat-cards/bottom-nav)
|
|
9
8
|
- Press-feedback (asymmetri 80ms in / 160ms out, iOS-feel)
|
|
10
9
|
- Pull-to-refresh indicator
|
|
11
10
|
- View transitions (same-document, 160ms snappy)
|
|
12
|
-
Laddas efter base/pwa.css, typography.css, layout.css.
|
|
13
|
-
================================================================ */
|
|
14
11
|
|
|
12
|
+
Reset + html/body-defaults flyttades till base/reset.css 2026-05-22
|
|
13
|
+
(Åtgärd 1, @layer-fasen). Reset hör i @layer klodd.reset, denna fil
|
|
14
|
+
i @layer klodd.base.
|
|
15
15
|
|
|
16
|
-
|
|
17
|
-
==== RESET
|
|
16
|
+
Laddas efter base/pwa.css, typography.css, layout.css.
|
|
18
17
|
================================================================ */
|
|
19
|
-
*, *::before, *::after {
|
|
20
|
-
box-sizing: border-box;
|
|
21
|
-
margin: 0;
|
|
22
|
-
padding: 0;
|
|
23
|
-
}
|
|
24
|
-
|
|
25
|
-
html {
|
|
26
|
-
/* Sprint A4: Touch-cleanup. Eliminera webb-tells. */
|
|
27
|
-
-webkit-tap-highlight-color: transparent;
|
|
28
|
-
-webkit-text-size-adjust: 100%;
|
|
29
|
-
text-size-adjust: 100%;
|
|
30
|
-
/* Sprint E4: smooth scroll for hash-anchors. Reduced-motion-safe. */
|
|
31
|
-
scroll-behavior: smooth;
|
|
32
|
-
}
|
|
33
|
-
|
|
34
|
-
html, body {
|
|
35
|
-
min-height: 100vh; /* fallback */
|
|
36
|
-
min-height: 100dvh; /* dynamisk viewport, tar hansyn till iOS-toolbar */
|
|
37
|
-
background: var(--surface-page);
|
|
38
|
-
color: var(--text-default);
|
|
39
|
-
font-family: var(--font-sans);
|
|
40
|
-
font-size: var(--fs-14);
|
|
41
|
-
font-weight: var(--fw-regular);
|
|
42
|
-
line-height: var(--lh-base);
|
|
43
|
-
letter-spacing: var(--ls-base);
|
|
44
|
-
-webkit-font-smoothing: antialiased;
|
|
45
|
-
-moz-osx-font-smoothing: grayscale;
|
|
46
|
-
overscroll-behavior: none;
|
|
47
|
-
}
|
|
48
|
-
|
|
49
|
-
/* Sprint G2: reservera utrymme i botten sa sista content inte goms
|
|
50
|
-
bakom fixed bottom-nav. */
|
|
51
|
-
body {
|
|
52
|
-
padding-bottom: var(--bottom-nav-clearance);
|
|
53
|
-
}
|
|
54
|
-
|
|
55
|
-
a {
|
|
56
|
-
color: var(--accent-9);
|
|
57
|
-
text-decoration: none;
|
|
58
|
-
}
|
|
59
|
-
@media (hover: hover) and (pointer: fine) {
|
|
60
|
-
a:hover { text-decoration: underline; }
|
|
61
|
-
}
|
|
62
|
-
|
|
63
|
-
button { font-family: inherit; }
|
|
64
|
-
|
|
65
|
-
/* Tabular numerals dar siffror jamfors visuellt. */
|
|
66
|
-
.num,
|
|
67
|
-
.num-display,
|
|
68
|
-
.num-value,
|
|
69
|
-
.num-inline,
|
|
70
|
-
.stat-card__value,
|
|
71
|
-
.list-row__amount,
|
|
72
|
-
.hero__amount,
|
|
73
|
-
.hero__amount--card {
|
|
74
|
-
font-variant-numeric: tabular-nums;
|
|
75
|
-
}
|
|
76
18
|
|
|
77
19
|
|
|
78
20
|
/* ================================================================
|
|
@@ -0,0 +1,58 @@
|
|
|
1
|
+
/* ================================================================
|
|
2
|
+
base/reset.css
|
|
3
|
+
Reset-lager: nollstallning + element-defaults. Wrappas i
|
|
4
|
+
@layer klodd.reset (lagsta cascade-prioritet) av css/index.css.
|
|
5
|
+
|
|
6
|
+
Box-sizing samt html/body bas-styling (bakgrund, farg, font,
|
|
7
|
+
font-smoothing, tap-highlight, text-size-adjust, overscroll-
|
|
8
|
+
behavior) ags av base/pwa.css och dupliceras medvetet INTE har -
|
|
9
|
+
pwa.css har identiska varden och tar det ansvaret. Denna fil
|
|
10
|
+
haller bara de reset-deklarationer som pwa.css inte tacker.
|
|
11
|
+
|
|
12
|
+
Lyft ur base/interactions.css 2026-05-22 (Atgard 1, @layer-fasen).
|
|
13
|
+
================================================================ */
|
|
14
|
+
|
|
15
|
+
*, *::before, *::after {
|
|
16
|
+
margin: 0;
|
|
17
|
+
padding: 0;
|
|
18
|
+
}
|
|
19
|
+
|
|
20
|
+
html {
|
|
21
|
+
/* Sprint E4: smooth scroll for hash-anchors. Reduced-motion-safe. */
|
|
22
|
+
scroll-behavior: smooth;
|
|
23
|
+
}
|
|
24
|
+
|
|
25
|
+
html, body {
|
|
26
|
+
min-height: 100vh; /* fallback */
|
|
27
|
+
min-height: 100dvh; /* dynamisk viewport, tar hansyn till iOS-toolbar */
|
|
28
|
+
font-weight: var(--fw-regular);
|
|
29
|
+
letter-spacing: var(--ls-base);
|
|
30
|
+
}
|
|
31
|
+
|
|
32
|
+
/* Sprint G2: reservera utrymme i botten sa sista content inte goms
|
|
33
|
+
bakom fixed bottom-nav. */
|
|
34
|
+
body {
|
|
35
|
+
padding-bottom: var(--bottom-nav-clearance);
|
|
36
|
+
}
|
|
37
|
+
|
|
38
|
+
a {
|
|
39
|
+
color: var(--accent-9);
|
|
40
|
+
text-decoration: none;
|
|
41
|
+
}
|
|
42
|
+
@media (hover: hover) and (pointer: fine) {
|
|
43
|
+
a:hover { text-decoration: underline; }
|
|
44
|
+
}
|
|
45
|
+
|
|
46
|
+
button { font-family: inherit; }
|
|
47
|
+
|
|
48
|
+
/* Tabular numerals dar siffror jamfors visuellt. */
|
|
49
|
+
.num,
|
|
50
|
+
.num-display,
|
|
51
|
+
.num-value,
|
|
52
|
+
.num-inline,
|
|
53
|
+
.stat-card__value,
|
|
54
|
+
.list-row__amount,
|
|
55
|
+
.hero__amount,
|
|
56
|
+
.hero__amount--card {
|
|
57
|
+
font-variant-numeric: tabular-nums;
|
|
58
|
+
}
|
|
@@ -0,0 +1,131 @@
|
|
|
1
|
+
<!-- ================================================================
|
|
2
|
+
klodd-icons.svg - self-hosted SVG-sprite (Atgard 2, 2026-05-22)
|
|
3
|
+
Ersatter Lucide CDN. 25 symboler: 5 produktions-ikoner + 20 kurerad
|
|
4
|
+
bas. Geometri extraherad ur lucide@1.16.0 (ISC-licens).
|
|
5
|
+
Anvandning:
|
|
6
|
+
<svg class="icon" aria-hidden="true">
|
|
7
|
+
<use href="/static/css/ds/icons/klodd-icons.svg#icon-NAMN"></use>
|
|
8
|
+
</svg>
|
|
9
|
+
================================================================ -->
|
|
10
|
+
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" style="display:none">
|
|
11
|
+
<!-- Produktions-ikoner (job_detail.html) -->
|
|
12
|
+
<symbol id="icon-chevron-down" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
|
13
|
+
<path d="m6 9 6 6 6-6"/>
|
|
14
|
+
</symbol>
|
|
15
|
+
<symbol id="icon-history" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
|
16
|
+
<path d="M3 12a9 9 0 1 0 9-9 9.75 9.75 0 0 0-6.74 2.74L3 8"/>
|
|
17
|
+
<path d="M3 3v5h5"/>
|
|
18
|
+
<path d="M12 7v5l4 2"/>
|
|
19
|
+
</symbol>
|
|
20
|
+
<symbol id="icon-file-text" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
|
21
|
+
<path d="M6 22a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h8a2.4 2.4 0 0 1 1.704.706l3.588 3.588A2.4 2.4 0 0 1 20 8v12a2 2 0 0 1-2 2z"/>
|
|
22
|
+
<path d="M14 2v5a1 1 0 0 0 1 1h5"/>
|
|
23
|
+
<path d="M10 9H8"/>
|
|
24
|
+
<path d="M16 13H8"/>
|
|
25
|
+
<path d="M16 17H8"/>
|
|
26
|
+
</symbol>
|
|
27
|
+
<symbol id="icon-building" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
|
28
|
+
<path d="M12 10h.01"/>
|
|
29
|
+
<path d="M12 14h.01"/>
|
|
30
|
+
<path d="M12 6h.01"/>
|
|
31
|
+
<path d="M16 10h.01"/>
|
|
32
|
+
<path d="M16 14h.01"/>
|
|
33
|
+
<path d="M16 6h.01"/>
|
|
34
|
+
<path d="M8 10h.01"/>
|
|
35
|
+
<path d="M8 14h.01"/>
|
|
36
|
+
<path d="M8 6h.01"/>
|
|
37
|
+
<path d="M9 22v-3a1 1 0 0 1 1-1h4a1 1 0 0 1 1 1v3"/>
|
|
38
|
+
<rect x="4" y="2" width="16" height="20" rx="2"/>
|
|
39
|
+
</symbol>
|
|
40
|
+
<symbol id="icon-briefcase-business" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
|
41
|
+
<path d="M12 12h.01"/>
|
|
42
|
+
<path d="M16 6V4a2 2 0 0 0-2-2h-4a2 2 0 0 0-2 2v2"/>
|
|
43
|
+
<path d="M22 13a18.15 18.15 0 0 1-20 0"/>
|
|
44
|
+
<rect width="20" height="14" x="2" y="6" rx="2"/>
|
|
45
|
+
</symbol>
|
|
46
|
+
<!-- Kurerad bas -->
|
|
47
|
+
<symbol id="icon-chevron-right" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
|
48
|
+
<path d="m9 18 6-6-6-6"/>
|
|
49
|
+
</symbol>
|
|
50
|
+
<symbol id="icon-chevron-left" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
|
51
|
+
<path d="m15 18-6-6 6-6"/>
|
|
52
|
+
</symbol>
|
|
53
|
+
<symbol id="icon-chevron-up" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
|
54
|
+
<path d="m18 15-6-6-6 6"/>
|
|
55
|
+
</symbol>
|
|
56
|
+
<symbol id="icon-x" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
|
57
|
+
<path d="M18 6 6 18"/>
|
|
58
|
+
<path d="m6 6 12 12"/>
|
|
59
|
+
</symbol>
|
|
60
|
+
<!-- Lucide-kalla: house (omdopt fran home i lucide 1.16.0) -->
|
|
61
|
+
<symbol id="icon-home" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
|
62
|
+
<path d="M15 21v-8a1 1 0 0 0-1-1h-4a1 1 0 0 0-1 1v8"/>
|
|
63
|
+
<path d="M3 10a2 2 0 0 1 .709-1.528l7-6a2 2 0 0 1 2.582 0l7 6A2 2 0 0 1 21 10v9a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"/>
|
|
64
|
+
</symbol>
|
|
65
|
+
<symbol id="icon-search" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
|
66
|
+
<path d="m21 21-4.34-4.34"/>
|
|
67
|
+
<circle cx="11" cy="11" r="8"/>
|
|
68
|
+
</symbol>
|
|
69
|
+
<symbol id="icon-settings" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
|
70
|
+
<path d="M9.671 4.136a2.34 2.34 0 0 1 4.659 0 2.34 2.34 0 0 0 3.319 1.915 2.34 2.34 0 0 1 2.33 4.033 2.34 2.34 0 0 0 0 3.831 2.34 2.34 0 0 1-2.33 4.033 2.34 2.34 0 0 0-3.319 1.915 2.34 2.34 0 0 1-4.659 0 2.34 2.34 0 0 0-3.32-1.915 2.34 2.34 0 0 1-2.33-4.033 2.34 2.34 0 0 0 0-3.831A2.34 2.34 0 0 1 6.35 6.051a2.34 2.34 0 0 0 3.319-1.915"/>
|
|
71
|
+
<circle cx="12" cy="12" r="3"/>
|
|
72
|
+
</symbol>
|
|
73
|
+
<symbol id="icon-user" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
|
74
|
+
<path d="M19 21v-2a4 4 0 0 0-4-4H9a4 4 0 0 0-4 4v2"/>
|
|
75
|
+
<circle cx="12" cy="7" r="4"/>
|
|
76
|
+
</symbol>
|
|
77
|
+
<symbol id="icon-plus" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
|
78
|
+
<path d="M5 12h14"/>
|
|
79
|
+
<path d="M12 5v14"/>
|
|
80
|
+
</symbol>
|
|
81
|
+
<symbol id="icon-pencil" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
|
82
|
+
<path d="M21.174 6.812a1 1 0 0 0-3.986-3.987L3.842 16.174a2 2 0 0 0-.5.83l-1.321 4.352a.5.5 0 0 0 .623.622l4.353-1.32a2 2 0 0 0 .83-.497z"/>
|
|
83
|
+
<path d="m15 5 4 4"/>
|
|
84
|
+
</symbol>
|
|
85
|
+
<symbol id="icon-trash-2" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
|
86
|
+
<path d="M10 11v6"/>
|
|
87
|
+
<path d="M14 11v6"/>
|
|
88
|
+
<path d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6"/>
|
|
89
|
+
<path d="M3 6h18"/>
|
|
90
|
+
<path d="M8 6V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2"/>
|
|
91
|
+
</symbol>
|
|
92
|
+
<symbol id="icon-check" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
|
93
|
+
<path d="M20 6 9 17l-5-5"/>
|
|
94
|
+
</symbol>
|
|
95
|
+
<symbol id="icon-copy" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
|
96
|
+
<rect width="14" height="14" x="8" y="8" rx="2" ry="2"/>
|
|
97
|
+
<path d="M4 16c-1.1 0-2-.9-2-2V4c0-1.1.9-2 2-2h10c1.1 0 2 .9 2 2"/>
|
|
98
|
+
</symbol>
|
|
99
|
+
<symbol id="icon-download" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
|
100
|
+
<path d="M12 15V3"/>
|
|
101
|
+
<path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/>
|
|
102
|
+
<path d="m7 10 5 5 5-5"/>
|
|
103
|
+
</symbol>
|
|
104
|
+
<symbol id="icon-external-link" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
|
105
|
+
<path d="M15 3h6v6"/>
|
|
106
|
+
<path d="M10 14 21 3"/>
|
|
107
|
+
<path d="M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6"/>
|
|
108
|
+
</symbol>
|
|
109
|
+
<!-- Lucide-kalla: ellipsis-vertical (omdopt fran more-vertical i lucide 1.16.0) -->
|
|
110
|
+
<symbol id="icon-more-vertical" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
|
111
|
+
<circle cx="12" cy="12" r="1"/>
|
|
112
|
+
<circle cx="12" cy="5" r="1"/>
|
|
113
|
+
<circle cx="12" cy="19" r="1"/>
|
|
114
|
+
</symbol>
|
|
115
|
+
<symbol id="icon-info" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
|
116
|
+
<circle cx="12" cy="12" r="10"/>
|
|
117
|
+
<path d="M12 16v-4"/>
|
|
118
|
+
<path d="M12 8h.01"/>
|
|
119
|
+
</symbol>
|
|
120
|
+
<symbol id="icon-bell" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
|
121
|
+
<path d="M10.268 21a2 2 0 0 0 3.464 0"/>
|
|
122
|
+
<path d="M3.262 15.326A1 1 0 0 0 4 17h16a1 1 0 0 0 .74-1.673C19.41 13.956 18 12.499 18 8A6 6 0 0 0 6 8c0 4.499-1.411 5.956-2.738 7.326"/>
|
|
123
|
+
</symbol>
|
|
124
|
+
<symbol id="icon-clock" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
|
125
|
+
<circle cx="12" cy="12" r="10"/>
|
|
126
|
+
<path d="M12 6v6l4 2"/>
|
|
127
|
+
</symbol>
|
|
128
|
+
<symbol id="icon-bookmark" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
|
129
|
+
<path d="M17 3a2 2 0 0 1 2 2v15a1 1 0 0 1-1.496.868l-4.512-2.578a2 2 0 0 0-1.984 0l-4.512 2.578A1 1 0 0 1 5 20V5a2 2 0 0 1 2-2z"/>
|
|
130
|
+
</symbol>
|
|
131
|
+
</svg>
|
package/css/index.css
CHANGED
|
@@ -1,8 +1,24 @@
|
|
|
1
1
|
/* ================================================================
|
|
2
2
|
@klodd/ds - convenience-import
|
|
3
|
-
Importerar hela designsystemet i kanonisk ordning
|
|
4
|
-
|
|
5
|
-
|
|
3
|
+
Importerar hela designsystemet i kanonisk ordning, wrappat i en
|
|
4
|
+
namngiven @layer-hierarki (Atgard 1, 2026-05-22).
|
|
5
|
+
|
|
6
|
+
Cascade-lager (lag prioritet -> hog):
|
|
7
|
+
klodd.reset - base/reset.css (nollstallning, element-defaults)
|
|
8
|
+
klodd.tokens - 00-primitives.css + 10-semantic.css
|
|
9
|
+
klodd.base - base/pwa.css, typography.css, layout.css,
|
|
10
|
+
interactions.css
|
|
11
|
+
klodd.components - components/*.css
|
|
12
|
+
klodd.utilities - utilities.css
|
|
13
|
+
|
|
14
|
+
Per-app-overrides (Jubb/Ekonom ds/<app>.css) wrappas i
|
|
15
|
+
@layer klodd.theme, som deklareras efter klodd.utilities och
|
|
16
|
+
darmed vinner over komponenter via cascade-ordning - inte via
|
|
17
|
+
hogre specificitet.
|
|
18
|
+
|
|
19
|
+
App-specifika tema-filer (apps/jubb.css, apps/ekonom.css,
|
|
20
|
+
apps/klodd.css) importeras separat via base.html eftersom bara
|
|
21
|
+
en ar aktiv per pageload - de ingar inte i denna fil.
|
|
6
22
|
|
|
7
23
|
Anvandning:
|
|
8
24
|
<link rel="stylesheet" href="@klodd/ds/css/index.css">
|
|
@@ -13,73 +29,72 @@
|
|
|
13
29
|
@import '@klodd/ds/css/apps/jubb.css';
|
|
14
30
|
================================================================ */
|
|
15
31
|
|
|
16
|
-
/*
|
|
17
|
-
@import
|
|
18
|
-
@
|
|
19
|
-
|
|
32
|
+
/* Layer-ordning deklareras forst sa cascade-prioriteten ar bestamd
|
|
33
|
+
innan nagon regel laddas. Maste sta fore alla @import. */
|
|
34
|
+
@layer klodd.reset, klodd.tokens, klodd.base,
|
|
35
|
+
klodd.components, klodd.utilities;
|
|
20
36
|
|
|
21
|
-
/*
|
|
22
|
-
@import '
|
|
23
|
-
@import './base/typography.css';
|
|
24
|
-
@import './base/layout.css';
|
|
25
|
-
@import './base/interactions.css';
|
|
37
|
+
/* Reset */
|
|
38
|
+
@import url('base/reset.css') layer(klodd.reset);
|
|
26
39
|
|
|
27
|
-
/*
|
|
28
|
-
@import '
|
|
29
|
-
@import '
|
|
30
|
-
@import './components/badge.css';
|
|
31
|
-
@import './components/card.css';
|
|
32
|
-
@import './components/nav.css';
|
|
33
|
-
@import './components/feedback.css';
|
|
34
|
-
@import './components/overlay.css';
|
|
35
|
-
@import './components/icon.css';
|
|
36
|
-
@import './components/hero-roll.css';
|
|
37
|
-
@import './components/divider.css';
|
|
38
|
-
@import './components/progress.css';
|
|
39
|
-
@import './components/progress-bar.css';
|
|
40
|
-
@import './components/async-progress.css';
|
|
41
|
-
@import './components/tooltip.css';
|
|
42
|
-
@import './components/dropdown.css';
|
|
43
|
-
|
|
44
|
-
/* v2.0.0 - flyttade fran app-repona */
|
|
45
|
-
@import './components/banner.css';
|
|
46
|
-
@import './components/panel.css';
|
|
47
|
-
@import './components/profile-panel.css';
|
|
48
|
-
@import './components/hub-card.css';
|
|
49
|
-
@import './components/stat.css';
|
|
50
|
-
@import './components/form.css';
|
|
51
|
-
@import './components/setting-row.css';
|
|
52
|
-
@import './components/collapsible.css';
|
|
53
|
-
/* hbar.css + split-bar.css RADERADE v5.0.0 (ADR 0022) - .progress
|
|
54
|
-
med composition-pattern (label utanfor + .progress) ersatter hbar.
|
|
55
|
-
split-bar ersatt av kv-list (siffror) eller flera .progress
|
|
56
|
-
side-by-side. */
|
|
57
|
-
@import './components/hero.css';
|
|
58
|
-
@import './components/chip.css';
|
|
59
|
-
@import './components/avatar.css';
|
|
60
|
-
@import './components/list-row.css';
|
|
61
|
-
@import './components/table.css';
|
|
62
|
-
@import './components/auth.css';
|
|
63
|
-
@import './components/swipe-stack.css';
|
|
64
|
-
@import './components/inline-edit.css';
|
|
65
|
-
@import './components/upload-spinner.css';
|
|
66
|
-
@import './components/tab-bar.css';
|
|
67
|
-
@import './components/pill-nav.css';
|
|
68
|
-
@import './components/pwa-avatar.css';
|
|
40
|
+
/* Tokens */
|
|
41
|
+
@import url('00-primitives.css') layer(klodd.tokens);
|
|
42
|
+
@import url('10-semantic.css') layer(klodd.tokens);
|
|
69
43
|
|
|
70
|
-
/*
|
|
71
|
-
@import '
|
|
72
|
-
|
|
73
|
-
|
|
44
|
+
/* Base */
|
|
45
|
+
@import url('base/pwa.css') layer(klodd.base);
|
|
46
|
+
@import url('base/typography.css') layer(klodd.base);
|
|
47
|
+
@import url('base/layout.css') layer(klodd.base);
|
|
48
|
+
@import url('base/interactions.css') layer(klodd.base);
|
|
74
49
|
|
|
75
|
-
/*
|
|
76
|
-
@import '
|
|
50
|
+
/* Komponenter */
|
|
51
|
+
@import url('components/button.css') layer(klodd.components);
|
|
52
|
+
@import url('components/input.css') layer(klodd.components);
|
|
53
|
+
@import url('components/badge.css') layer(klodd.components);
|
|
54
|
+
@import url('components/card.css') layer(klodd.components);
|
|
55
|
+
@import url('components/nav.css') layer(klodd.components);
|
|
56
|
+
@import url('components/feedback.css') layer(klodd.components);
|
|
57
|
+
@import url('components/overlay.css') layer(klodd.components);
|
|
58
|
+
@import url('components/icon.css') layer(klodd.components);
|
|
59
|
+
@import url('components/hero-roll.css') layer(klodd.components);
|
|
60
|
+
@import url('components/divider.css') layer(klodd.components);
|
|
61
|
+
@import url('components/progress.css') layer(klodd.components);
|
|
62
|
+
@import url('components/progress-bar.css') layer(klodd.components);
|
|
63
|
+
@import url('components/async-progress.css') layer(klodd.components);
|
|
64
|
+
@import url('components/tooltip.css') layer(klodd.components);
|
|
65
|
+
@import url('components/dropdown.css') layer(klodd.components);
|
|
66
|
+
@import url('components/banner.css') layer(klodd.components);
|
|
67
|
+
@import url('components/panel.css') layer(klodd.components);
|
|
68
|
+
@import url('components/profile-panel.css') layer(klodd.components);
|
|
69
|
+
@import url('components/hub-card.css') layer(klodd.components);
|
|
70
|
+
@import url('components/stat.css') layer(klodd.components);
|
|
71
|
+
@import url('components/form.css') layer(klodd.components);
|
|
72
|
+
@import url('components/setting-row.css') layer(klodd.components);
|
|
73
|
+
@import url('components/collapsible.css') layer(klodd.components);
|
|
74
|
+
@import url('components/hero.css') layer(klodd.components);
|
|
75
|
+
@import url('components/chip.css') layer(klodd.components);
|
|
76
|
+
@import url('components/avatar.css') layer(klodd.components);
|
|
77
|
+
@import url('components/list-row.css') layer(klodd.components);
|
|
78
|
+
@import url('components/table.css') layer(klodd.components);
|
|
79
|
+
@import url('components/auth.css') layer(klodd.components);
|
|
80
|
+
@import url('components/swipe-stack.css') layer(klodd.components);
|
|
81
|
+
@import url('components/inline-edit.css') layer(klodd.components);
|
|
82
|
+
@import url('components/upload-spinner.css') layer(klodd.components);
|
|
83
|
+
@import url('components/tab-bar.css') layer(klodd.components);
|
|
84
|
+
@import url('components/pill-nav.css') layer(klodd.components);
|
|
85
|
+
@import url('components/pwa-avatar.css') layer(klodd.components);
|
|
86
|
+
@import url('components/colored-row.css') layer(klodd.components);
|
|
87
|
+
@import url('components/sheet-content.css') layer(klodd.components);
|
|
88
|
+
@import url('components/kv-list.css') layer(klodd.components);
|
|
89
|
+
@import url('components/offline.css') layer(klodd.components);
|
|
77
90
|
|
|
78
|
-
/*
|
|
79
|
-
@import '
|
|
80
|
-
@import './components/offline.css';
|
|
91
|
+
/* Utilities */
|
|
92
|
+
@import url('utilities.css') layer(klodd.utilities);
|
|
81
93
|
|
|
82
|
-
/*
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
94
|
+
/* ----------------------------------------------------------------
|
|
95
|
+
Raderade komponenter (ater-introducera inte):
|
|
96
|
+
hbar.css, split-bar.css, colored-bar.css, column-bar.css,
|
|
97
|
+
dual-bar.css - RADERADE v5.0.0 (ADR 0022). .progress med
|
|
98
|
+
composition-pattern ersatter hbar/colored-bar; kv-list eller
|
|
99
|
+
flera .progress side-by-side ersatter split-/column-/dual-bar.
|
|
100
|
+
---------------------------------------------------------------- */
|
package/package.json
CHANGED
package/js/lucide-init.js
DELETED
|
@@ -1,27 +0,0 @@
|
|
|
1
|
-
/* Lucide-init: scannar DOM efter <i data-lucide="..."> och ersatter
|
|
2
|
-
* med <svg>-element. Kors vid DOMContentLoaded plus efter Turbo-nav-
|
|
3
|
-
* swap (om Turbo finns) sa nya element pa nyladdade pages aktiveras.
|
|
4
|
-
*
|
|
5
|
-
* Lucide CDN-script laddas separat via cdn.jsdelivr.net (allowed i
|
|
6
|
-
* Jubbs CSP). Detta init-script ar lokalt sa det forklaras inte av
|
|
7
|
-
* inline-script-restrict.
|
|
8
|
-
*/
|
|
9
|
-
(function () {
|
|
10
|
-
'use strict';
|
|
11
|
-
|
|
12
|
-
function createIcons() {
|
|
13
|
-
if (typeof window.lucide !== 'undefined' && window.lucide.createIcons) {
|
|
14
|
-
window.lucide.createIcons();
|
|
15
|
-
}
|
|
16
|
-
}
|
|
17
|
-
|
|
18
|
-
if (document.readyState === 'loading') {
|
|
19
|
-
document.addEventListener('DOMContentLoaded', createIcons);
|
|
20
|
-
} else {
|
|
21
|
-
createIcons();
|
|
22
|
-
}
|
|
23
|
-
|
|
24
|
-
// Re-init efter Turbo-swap sa nya ikoner pa swapped DOM aktiveras.
|
|
25
|
-
document.addEventListener('turbo:swap', createIcons);
|
|
26
|
-
document.addEventListener('turbo:navigated', createIcons);
|
|
27
|
-
})();
|