@broberg/app-shell 0.3.0 → 0.3.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/app-shell.css +12 -3
- package/package.json +1 -1
package/css/app-shell.css
CHANGED
|
@@ -30,11 +30,21 @@
|
|
|
30
30
|
:where(.bas-root button) { font: inherit; }
|
|
31
31
|
|
|
32
32
|
/* ── top bar ── */
|
|
33
|
+
/* F092.12 — the blur lives on ::before, NOT on the bar. backdrop-filter (like
|
|
34
|
+
* filter, transform, perspective, contain) makes an element the containing block
|
|
35
|
+
* for its position:fixed descendants, so the bell's bottom sheet anchored to the
|
|
36
|
+
* bottom of this 56px bar and opened off-screen on a phone (appkit, Lens
|
|
37
|
+
* 71f2466e: top=-608 bottom=56). The bell's full-screen overlay was trapped in
|
|
38
|
+
* the bar the same way. */
|
|
33
39
|
.bas-topbar {
|
|
34
40
|
position: sticky; top: 0; z-index: 50;
|
|
41
|
+
border-bottom: 1px solid var(--border);
|
|
42
|
+
}
|
|
43
|
+
.bas-topbar::before,
|
|
44
|
+
.bas-root[data-layout="inset"] .bas-contenthead::before {
|
|
45
|
+
content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
|
|
35
46
|
background: color-mix(in srgb, var(--surface-header, var(--bg)) 85%, transparent);
|
|
36
47
|
backdrop-filter: blur(8px);
|
|
37
|
-
border-bottom: 1px solid var(--border);
|
|
38
48
|
}
|
|
39
49
|
.bas-topbar__inner { display: flex; align-items: center; gap: 12px; height: var(--bas-top); padding: 0 16px; }
|
|
40
50
|
.bas-topbar__brand, .bas-topbar__actions { display: flex; align-items: center; gap: 8px; min-width: 0; }
|
|
@@ -157,8 +167,7 @@
|
|
|
157
167
|
.bas-root[data-layout="inset"] { --bas-top: 0px; }
|
|
158
168
|
.bas-root[data-layout="inset"] .bas-contenthead {
|
|
159
169
|
position: sticky; top: 0; z-index: 30; height: 56px; gap: 8px;
|
|
160
|
-
|
|
161
|
-
backdrop-filter: blur(8px);
|
|
170
|
+
/* blur on ::before (see .bas-topbar, F092.12) */
|
|
162
171
|
}
|
|
163
172
|
.bas-root[data-layout="inset"] .bas-sidebar__head { min-height: 56px; padding: 8px 12px; }
|
|
164
173
|
.bas-contenthead__actions { display: flex; align-items: center; gap: 8px; min-width: 0; }
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@broberg/app-shell",
|
|
3
|
-
"version": "0.3.
|
|
3
|
+
"version": "0.3.1",
|
|
4
4
|
"description": "The fleet's app shell: collapsible sidebar (phone: rail or drawer), top bar with the notification bell and user menu as standard, page header and tabs. Framework-free core + Preact (Stack B). Styled on @broberg/theme tokens. Avatar from Broberg ID, initials otherwise — no Gravatar.",
|
|
5
5
|
"type": "module",
|
|
6
6
|
"license": "MIT",
|