@klodd/ds 5.12.0 → 5.13.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/layout.css +5 -0
- package/css/components/stat.css +9 -1
- package/package.json +1 -1
package/css/base/layout.css
CHANGED
|
@@ -9,6 +9,11 @@
|
|
|
9
9
|
padding: calc(var(--safe-top) + var(--space-16)) var(--space-14) 0;
|
|
10
10
|
position: relative;
|
|
11
11
|
min-height: 100dvh;
|
|
12
|
+
/* Query-container "layout" sa komponenter (.stat-grid) kan adaptera
|
|
13
|
+
mot content-bredden istallet for viewport. Apparnas max-width-
|
|
14
|
+
override pa .main-content avgor darmed per-app vad queryn ser. */
|
|
15
|
+
container-type: inline-size;
|
|
16
|
+
container-name: layout;
|
|
12
17
|
}
|
|
13
18
|
|
|
14
19
|
/* Nav-clearance breakpoint-villkorad (Fas 2). Bottom-nav (bar) ligger
|
package/css/components/stat.css
CHANGED
|
@@ -3,7 +3,7 @@
|
|
|
3
3
|
Små kort med stor siffra + label. Används för read-only metric-display.
|
|
4
4
|
|
|
5
5
|
Blocks:
|
|
6
|
-
.stat-grid - grid-container (2 kol
|
|
6
|
+
.stat-grid - grid-container (2 kol default, 4 vid container >=700px)
|
|
7
7
|
.stat-card - kort med siffra + label (huvud-block med BEM-element)
|
|
8
8
|
|
|
9
9
|
HTML-relationer:
|
|
@@ -23,6 +23,14 @@
|
|
|
23
23
|
}
|
|
24
24
|
.stat-grid--single { grid-template-columns: 1fr; }
|
|
25
25
|
|
|
26
|
+
/* 4 kolumner nar query-containern "layout" (.main-content) ar bred nog.
|
|
27
|
+
Triggar bara i app-layouter med bred desktop-main (Jubb
|
|
28
|
+
--max-w-desktop). Smala main-layouter (Ekonom 600px) star kvar pa
|
|
29
|
+
2 kolumner eftersom deras content-box aldrig nar 700px. */
|
|
30
|
+
@container layout (min-width: 700px) {
|
|
31
|
+
.stat-grid { grid-template-columns: repeat(4, 1fr); }
|
|
32
|
+
}
|
|
33
|
+
|
|
26
34
|
.stat-card {
|
|
27
35
|
display: flex;
|
|
28
36
|
flex-direction: column;
|