@klodd/ds 5.11.1 → 5.12.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/10-semantic.css +5 -0
- package/css/base/layout.css +17 -2
- package/css/base/reset.css +6 -3
- package/css/components/nav.css +98 -0
- package/package.json +1 -1
package/css/10-semantic.css
CHANGED
|
@@ -300,6 +300,11 @@
|
|
|
300
300
|
border-radius full) ska fa visuellt luftrum mot pillens border. */
|
|
301
301
|
--bottom-nav-height: 72px;
|
|
302
302
|
|
|
303
|
+
/* Desktop-nav-bredder (Fas 2). Rail = ikonbar (721-1024px),
|
|
304
|
+
drawer = sidebar med etiketter (>=1024px). */
|
|
305
|
+
--nav-rail-width: 72px;
|
|
306
|
+
--nav-drawer-width: 220px;
|
|
307
|
+
|
|
303
308
|
/* Bottom-nav-clearance: utrymme under nav for fixed-positioning +
|
|
304
309
|
safe-area pa iPhone notch-modeller. Anvands som body padding-bottom
|
|
305
310
|
i app-CSS sa scroll-content inte hamnar under nav. Pill-form-
|
package/css/base/layout.css
CHANGED
|
@@ -6,9 +6,24 @@
|
|
|
6
6
|
.main-content {
|
|
7
7
|
max-width: var(--content-max-default);
|
|
8
8
|
margin: 0 auto;
|
|
9
|
-
padding: calc(var(--safe-top) + var(--space-16)) var(--space-14)
|
|
9
|
+
padding: calc(var(--safe-top) + var(--space-16)) var(--space-14) 0;
|
|
10
10
|
position: relative;
|
|
11
|
-
min-height:
|
|
11
|
+
min-height: 100dvh;
|
|
12
|
+
}
|
|
13
|
+
|
|
14
|
+
/* Nav-clearance breakpoint-villkorad (Fas 2). Bottom-nav (bar) ligger
|
|
15
|
+
under content pa mobil; rail/drawer ligger till vanster pa desktop. */
|
|
16
|
+
@media (max-width: 720px) {
|
|
17
|
+
.main-content {
|
|
18
|
+
padding-bottom: var(--bottom-nav-clearance);
|
|
19
|
+
min-height: calc(100dvh - var(--bottom-nav-clearance));
|
|
20
|
+
}
|
|
21
|
+
}
|
|
22
|
+
@media (min-width: 721px) and (max-width: 1024px) {
|
|
23
|
+
.main-content { padding-left: var(--nav-rail-width); }
|
|
24
|
+
}
|
|
25
|
+
@media (min-width: 1024px) {
|
|
26
|
+
.main-content { padding-left: var(--nav-drawer-width); }
|
|
12
27
|
}
|
|
13
28
|
|
|
14
29
|
.main-content--narrow { max-width: var(--content-max-narrow); }
|
package/css/base/reset.css
CHANGED
|
@@ -30,9 +30,12 @@ html, body {
|
|
|
30
30
|
}
|
|
31
31
|
|
|
32
32
|
/* Sprint G2: reservera utrymme i botten sa sista content inte goms
|
|
33
|
-
bakom fixed bottom-nav.
|
|
34
|
-
|
|
35
|
-
|
|
33
|
+
bakom fixed bottom-nav. Breakpoint-villkorad i Fas 2 - galler bara
|
|
34
|
+
mobil (bar); rail/drawer hanteras via .main-content padding-left. */
|
|
35
|
+
@media (max-width: 720px) {
|
|
36
|
+
body {
|
|
37
|
+
padding-bottom: var(--bottom-nav-clearance);
|
|
38
|
+
}
|
|
36
39
|
}
|
|
37
40
|
|
|
38
41
|
a {
|
package/css/components/nav.css
CHANGED
|
@@ -110,6 +110,104 @@
|
|
|
110
110
|
}
|
|
111
111
|
|
|
112
112
|
|
|
113
|
+
/* ================================================================
|
|
114
|
+
==== NAV-VARIANTER (desktop, Fas 2)
|
|
115
|
+
.bottom-nav skalas i tre steg via breakpoints. Markup är identisk
|
|
116
|
+
i alla tre - CSS styr formen:
|
|
117
|
+
<=720px bar - flytande pill i botten (basreglerna ovan)
|
|
118
|
+
721-1024 rail - vertikal ikonbar längs vänsterkanten
|
|
119
|
+
>=1024px drawer - full sidebar med etiketter
|
|
120
|
+
================================================================ */
|
|
121
|
+
@media (min-width: 721px) and (max-width: 1024px) {
|
|
122
|
+
.bottom-nav {
|
|
123
|
+
/* Rail: vertikal ikonbar längs vänsterkanten */
|
|
124
|
+
position: fixed;
|
|
125
|
+
left: 0;
|
|
126
|
+
top: 0;
|
|
127
|
+
bottom: 0;
|
|
128
|
+
right: auto;
|
|
129
|
+
width: var(--nav-rail-width, 72px);
|
|
130
|
+
min-height: 100dvh;
|
|
131
|
+
flex-direction: column;
|
|
132
|
+
justify-content: flex-start;
|
|
133
|
+
padding: var(--space-16) 0;
|
|
134
|
+
border-radius: 0;
|
|
135
|
+
border-right: 1px solid var(--border-subtle);
|
|
136
|
+
border-bottom: none;
|
|
137
|
+
box-shadow: none;
|
|
138
|
+
}
|
|
139
|
+
|
|
140
|
+
.bottom-nav__item {
|
|
141
|
+
flex: 0 0 auto;
|
|
142
|
+
flex-direction: column;
|
|
143
|
+
width: 100%;
|
|
144
|
+
padding: var(--space-12) 0;
|
|
145
|
+
border-radius: 0;
|
|
146
|
+
/* Etikett döljs i rail */
|
|
147
|
+
font-size: 0;
|
|
148
|
+
}
|
|
149
|
+
|
|
150
|
+
.bottom-nav__item .icon,
|
|
151
|
+
.bottom-nav__item svg {
|
|
152
|
+
width: var(--space-22);
|
|
153
|
+
height: var(--space-22);
|
|
154
|
+
}
|
|
155
|
+
|
|
156
|
+
.bottom-nav__item--active {
|
|
157
|
+
position: relative;
|
|
158
|
+
}
|
|
159
|
+
|
|
160
|
+
.bottom-nav__item--active::before {
|
|
161
|
+
content: '';
|
|
162
|
+
position: absolute;
|
|
163
|
+
left: 0;
|
|
164
|
+
top: 25%;
|
|
165
|
+
height: 50%;
|
|
166
|
+
width: 3px;
|
|
167
|
+
background: var(--accent-9);
|
|
168
|
+
border-radius: 0 var(--radius-4) var(--radius-4) 0;
|
|
169
|
+
}
|
|
170
|
+
}
|
|
171
|
+
|
|
172
|
+
@media (min-width: 1024px) {
|
|
173
|
+
.bottom-nav {
|
|
174
|
+
/* Drawer: full sidebar med etiketter */
|
|
175
|
+
position: fixed;
|
|
176
|
+
left: 0;
|
|
177
|
+
top: 0;
|
|
178
|
+
bottom: 0;
|
|
179
|
+
right: auto;
|
|
180
|
+
width: var(--nav-drawer-width, 220px);
|
|
181
|
+
min-height: 100dvh;
|
|
182
|
+
flex-direction: column;
|
|
183
|
+
justify-content: flex-start;
|
|
184
|
+
padding: var(--space-24) var(--space-8);
|
|
185
|
+
border-radius: 0;
|
|
186
|
+
border-right: 1px solid var(--border-subtle);
|
|
187
|
+
border-bottom: none;
|
|
188
|
+
box-shadow: none;
|
|
189
|
+
}
|
|
190
|
+
|
|
191
|
+
.bottom-nav__item {
|
|
192
|
+
flex: 0 0 auto;
|
|
193
|
+
flex-direction: row;
|
|
194
|
+
width: 100%;
|
|
195
|
+
justify-content: flex-start;
|
|
196
|
+
gap: var(--space-12);
|
|
197
|
+
padding: var(--space-12) var(--space-16);
|
|
198
|
+
border-radius: var(--radius-4);
|
|
199
|
+
font-size: var(--fs-14);
|
|
200
|
+
}
|
|
201
|
+
|
|
202
|
+
.bottom-nav__item .icon,
|
|
203
|
+
.bottom-nav__item svg {
|
|
204
|
+
width: var(--space-20);
|
|
205
|
+
height: var(--space-20);
|
|
206
|
+
flex-shrink: 0;
|
|
207
|
+
}
|
|
208
|
+
}
|
|
209
|
+
|
|
210
|
+
|
|
113
211
|
/* ================================================================
|
|
114
212
|
==== TOPBAR (in-flow header)
|
|
115
213
|
Tre slots: pwa-avatar/back (vanster) / titel-eller-month-pill
|