@dorsk/tsumikit 0.18.5 → 0.18.6
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.
|
@@ -1,7 +1,10 @@
|
|
|
1
1
|
<script lang="ts">
|
|
2
2
|
// Application frame: sticky header, optional sidebar, main content, optional
|
|
3
3
|
// footer — all supplied as snippets. Responsive by default:
|
|
4
|
-
// • desktop (≥
|
|
4
|
+
// • desktop (≥ 64rem): the sidebar is a persistent grid column.
|
|
5
|
+
// • tablet (48–64rem): the column narrows to an icon rail
|
|
6
|
+
// (--shell-rail-w, default 4.5rem); the `sidebar` container query lets
|
|
7
|
+
// nav content collapse to icons.
|
|
5
8
|
// • mobile: the sidebar becomes an off-canvas drawer that slides in over a
|
|
6
9
|
// scrim; AppShell renders the hamburger toggle for you (shown only on
|
|
7
10
|
// mobile), locks body scroll while open, closes on Escape / scrim click,
|
|
@@ -172,7 +175,7 @@
|
|
|
172
175
|
.shell {
|
|
173
176
|
min-height: 100dvh;
|
|
174
177
|
display: grid;
|
|
175
|
-
grid-template-columns: 1fr;
|
|
178
|
+
grid-template-columns: minmax(0, 1fr);
|
|
176
179
|
grid-template-rows: auto 1fr auto;
|
|
177
180
|
grid-template-areas:
|
|
178
181
|
'header'
|
|
@@ -264,7 +267,7 @@
|
|
|
264
267
|
/* Desktop: persistent sidebar column; hide drawer chrome. */
|
|
265
268
|
@media (min-width: 48rem) {
|
|
266
269
|
.shell {
|
|
267
|
-
grid-template-columns: var(--shell-sidebar-w) 1fr;
|
|
270
|
+
grid-template-columns: var(--shell-sidebar-w) minmax(0, 1fr);
|
|
268
271
|
grid-template-areas:
|
|
269
272
|
'header header'
|
|
270
273
|
'sidebar main'
|
|
@@ -312,4 +315,18 @@
|
|
|
312
315
|
background: var(--accent);
|
|
313
316
|
}
|
|
314
317
|
}
|
|
318
|
+
|
|
319
|
+
/* Tablet: the persistent column narrows to an icon rail so the content and
|
|
320
|
+
header keep room; the `sidebar` container query collapses nav content. */
|
|
321
|
+
@media (min-width: 48rem) and (max-width: 63.999rem) {
|
|
322
|
+
.shell {
|
|
323
|
+
grid-template-columns: var(--shell-rail-w, 4.5rem) minmax(0, 1fr);
|
|
324
|
+
}
|
|
325
|
+
.shell-sidebar {
|
|
326
|
+
width: auto;
|
|
327
|
+
}
|
|
328
|
+
.shell-sidebar-resize {
|
|
329
|
+
display: none;
|
|
330
|
+
}
|
|
331
|
+
}
|
|
315
332
|
</style>
|
package/package.json
CHANGED