@nxgt/material 3.7.4 → 3.7.5
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/CHANGELOG.md +6 -0
- package/dist/components/ui/layout/app-shell/activity-backdrop.css +36 -1
- package/dist/{components-DD7_NI6U.js → components-CDrQCOsU.js} +9210 -9202
- package/dist/components.js +1 -1
- package/dist/main.js +1 -1
- package/dist/material.css +1 -1
- package/docs/guides/app-shell.md +5 -1
- package/lib/components/ui/layout/app-shell/activity-backdrop.css +36 -1
- package/package.json +1 -1
package/CHANGELOG.md
CHANGED
|
@@ -1,5 +1,11 @@
|
|
|
1
1
|
# @nxgt/material
|
|
2
2
|
|
|
3
|
+
## 3.7.5
|
|
4
|
+
|
|
5
|
+
### Patch Changes
|
|
6
|
+
|
|
7
|
+
- [#1389](https://github.com/softistx/nxgt-material/pull/1389) [`75789b7`](https://github.com/softistx/nxgt-material/commit/75789b79c2a3c90c0febbde8c6ed17a52b376695) Thanks [@SteveGT96](https://github.com/SteveGT96)! - fix(app-shell): `ActivityLayout` with `scroll="document"` no longer lets the page scroll into the 8px gutter above the sticky app bar. A fixed gutter mask with the app bar's own fill (the chrome fill under a `backdrop`, the usual translucent background without one) covers the strip; at scroll top the layout looks as before.
|
|
8
|
+
|
|
3
9
|
## 3.7.4
|
|
4
10
|
|
|
5
11
|
### Patch Changes
|
|
@@ -25,10 +25,45 @@
|
|
|
25
25
|
* fallback is their usual surface, through `--nxgt-backdrop-fill-*`: a utility
|
|
26
26
|
* class outranks any rule in a layer, so a rule here could not set them. */
|
|
27
27
|
@layer components {
|
|
28
|
+
/* The gutter mask without a backdrop (activity-layout.tsx) has the app bar's
|
|
29
|
+
* translucent fill, which the page's top gutter never had: it fades in over
|
|
30
|
+
* the first 8px of scroll, so at scroll top nothing changed. A browser
|
|
31
|
+
* without scroll-driven animations shows it from the start. */
|
|
32
|
+
@keyframes nxgt-gutter-in {
|
|
33
|
+
from {
|
|
34
|
+
opacity: 0;
|
|
35
|
+
}
|
|
36
|
+
to {
|
|
37
|
+
opacity: 1;
|
|
38
|
+
}
|
|
39
|
+
}
|
|
40
|
+
@supports (animation-timeline: scroll()) {
|
|
41
|
+
[data-slot="activity-layout"]:not([data-backdrop])
|
|
42
|
+
[data-slot="activity-layout-gutter"] {
|
|
43
|
+
animation: nxgt-gutter-in linear both;
|
|
44
|
+
animation-timeline: scroll(root block);
|
|
45
|
+
animation-range: 0px 8px;
|
|
46
|
+
}
|
|
47
|
+
}
|
|
48
|
+
|
|
28
49
|
/* The gradient's own tint and blobs give way to the backdrop. */
|
|
29
50
|
[data-slot="activity-layout"][data-backdrop] {
|
|
30
51
|
background-image: none;
|
|
31
52
|
}
|
|
53
|
+
|
|
54
|
+
/* scroll="document": the frame's chrome fill leaves its top gutter to the
|
|
55
|
+
* gutter mask (activity-layout.tsx), a fixed strip with the same fill that
|
|
56
|
+
* hides the scrolled page above the sticky app bar. Painting both would
|
|
57
|
+
* stack two translucent fills there. */
|
|
58
|
+
[data-slot="activity-layout"][data-backdrop][data-scroll="document"]
|
|
59
|
+
[data-slot="activity-layout-frame"] {
|
|
60
|
+
background:
|
|
61
|
+
linear-gradient(
|
|
62
|
+
var(--nxgt-backdrop-fill-chrome),
|
|
63
|
+
var(--nxgt-backdrop-fill-chrome)
|
|
64
|
+
)
|
|
65
|
+
bottom / 100% calc(100% - var(--nxgt-backdrop-top)) no-repeat;
|
|
66
|
+
}
|
|
32
67
|
[data-slot="activity-layout"][data-backdrop] > [data-layer] {
|
|
33
68
|
display: none;
|
|
34
69
|
}
|
|
@@ -48,7 +83,6 @@
|
|
|
48
83
|
* it out of the flow: the app bar keeps its place. The offsets are the
|
|
49
84
|
* frame's own padding and the app bar's sticky top. */
|
|
50
85
|
[data-slot="activity-layout-backdrop"] {
|
|
51
|
-
--nxgt-backdrop-top: max(0.5rem, env(safe-area-inset-top));
|
|
52
86
|
--nxgt-backdrop-height: calc(
|
|
53
87
|
100dvh -
|
|
54
88
|
var(--nxgt-backdrop-top) -
|
|
@@ -62,6 +96,7 @@
|
|
|
62
96
|
}
|
|
63
97
|
|
|
64
98
|
[data-slot="activity-layout"][data-backdrop] {
|
|
99
|
+
--nxgt-backdrop-top: max(0.5rem, env(safe-area-inset-top));
|
|
65
100
|
--nxgt-backdrop-chrome-alpha: 80%;
|
|
66
101
|
--nxgt-backdrop-nav-alpha: 87%;
|
|
67
102
|
--nxgt-backdrop-blur: 6px;
|