mn-angular-lib 1.0.147 → 1.0.149
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/package.json
CHANGED
|
@@ -0,0 +1,58 @@
|
|
|
1
|
+
/* Each alert is wrapped in a grid so its row can collapse from 1fr → 0fr, letting the
|
|
2
|
+
siblings glide up smoothly instead of jumping when one leaves. The card's transform and
|
|
3
|
+
opacity are driven from the component (swipe drag, fling, drag-fade); the exit fade and
|
|
4
|
+
height-collapse are owned here so every dismissal path — swipe, close button, auto-timeout
|
|
5
|
+
— animates out rather than vanishing instantly. */
|
|
6
|
+
|
|
7
|
+
:host {
|
|
8
|
+
--mn-alert-exit: 320ms;
|
|
9
|
+
}
|
|
10
|
+
|
|
11
|
+
.mn-alert-item {
|
|
12
|
+
display: grid;
|
|
13
|
+
grid-template-rows: 1fr;
|
|
14
|
+
margin-bottom: 0.75rem;
|
|
15
|
+
/* `touch-action` is set from the component per platform (pan-y for the horizontal swipe
|
|
16
|
+
axis, pan-x for the vertical one); this is only the pre-hydration fallback. */
|
|
17
|
+
touch-action: pan-y;
|
|
18
|
+
cursor: grab;
|
|
19
|
+
transition:
|
|
20
|
+
transform 280ms cubic-bezier(0.22, 1, 0.36, 1),
|
|
21
|
+
opacity var(--mn-alert-exit) ease,
|
|
22
|
+
grid-template-rows var(--mn-alert-exit) cubic-bezier(0.4, 0, 0.2, 1),
|
|
23
|
+
margin-bottom var(--mn-alert-exit) cubic-bezier(0.4, 0, 0.2, 1);
|
|
24
|
+
}
|
|
25
|
+
|
|
26
|
+
.mn-alert-item:last-child {
|
|
27
|
+
margin-bottom: 0;
|
|
28
|
+
}
|
|
29
|
+
|
|
30
|
+
.mn-alert-item.dragging {
|
|
31
|
+
/* Track the finger 1:1 — no easing while a drag is live. */
|
|
32
|
+
transition: none;
|
|
33
|
+
cursor: grabbing;
|
|
34
|
+
user-select: none;
|
|
35
|
+
}
|
|
36
|
+
|
|
37
|
+
.mn-alert-inner {
|
|
38
|
+
/* Required for the grid row to actually shrink its content on collapse. */
|
|
39
|
+
min-height: 0;
|
|
40
|
+
}
|
|
41
|
+
|
|
42
|
+
.mn-alert-item.leaving {
|
|
43
|
+
grid-template-rows: 0fr;
|
|
44
|
+
opacity: 0;
|
|
45
|
+
margin-bottom: 0;
|
|
46
|
+
pointer-events: none;
|
|
47
|
+
}
|
|
48
|
+
|
|
49
|
+
.mn-alert-item.leaving .mn-alert-inner {
|
|
50
|
+
/* Clip the card as its row collapses; kept visible otherwise so the card's shadow shows. */
|
|
51
|
+
overflow: hidden;
|
|
52
|
+
}
|
|
53
|
+
|
|
54
|
+
@media (prefers-reduced-motion: reduce) {
|
|
55
|
+
.mn-alert-item {
|
|
56
|
+
transition: none;
|
|
57
|
+
}
|
|
58
|
+
}
|