@celestia-island/hikari 0.49.4 → 0.49.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/package.json +1 -1
- package/src/components/HkModal.scss +18 -7
package/package.json
CHANGED
|
@@ -118,32 +118,43 @@
|
|
|
118
118
|
will-change: transform, opacity, clip-path;
|
|
119
119
|
}
|
|
120
120
|
|
|
121
|
+
// Close: the whole frame fades and drifts down as ONE piece — the
|
|
122
|
+
// unveil's clip does NOT re-run on close. Re-clipping first made the
|
|
123
|
+
// bottom band (usually the footer) vanish at the very first frame of
|
|
124
|
+
// the close while the rest was still on screen, which read as broken
|
|
125
|
+
// (user report 2026-09-14).
|
|
121
126
|
.hk-modal-content-leave-active {
|
|
122
127
|
transition:
|
|
123
128
|
opacity var(--hk-modal-duration, 0.25s)
|
|
124
129
|
var(--hk-modal-ease-in, cubic-bezier(0.4, 0, 1, 1)),
|
|
125
130
|
transform var(--hk-modal-duration, 0.25s)
|
|
126
|
-
var(--hk-modal-ease-in, cubic-bezier(0.4, 0, 1, 1)),
|
|
127
|
-
clip-path var(--hk-modal-duration, 0.25s)
|
|
128
131
|
var(--hk-modal-ease-in, cubic-bezier(0.4, 0, 1, 1));
|
|
129
|
-
will-change: transform, opacity
|
|
132
|
+
will-change: transform, opacity;
|
|
130
133
|
}
|
|
131
134
|
|
|
132
|
-
.hk-modal-content-enter-from
|
|
133
|
-
.hk-modal-content-leave-to {
|
|
135
|
+
.hk-modal-content-enter-from {
|
|
134
136
|
opacity: 0;
|
|
135
137
|
transform: translate(-50%, -50%) translateY(5%);
|
|
136
138
|
clip-path: inset(0 0 10% 0 round 0 0 var(--hk-modal-radius, var(--radius-lg, 12px))
|
|
137
139
|
var(--hk-modal-radius, var(--radius-lg, 12px)));
|
|
138
140
|
}
|
|
139
141
|
|
|
140
|
-
.hk-modal-content-enter-to
|
|
141
|
-
.hk-modal-content-leave-from {
|
|
142
|
+
.hk-modal-content-enter-to {
|
|
142
143
|
opacity: 1;
|
|
143
144
|
transform: translate(-50%, -50%);
|
|
144
145
|
clip-path: inset(0 0 0 0 round 0 0 var(--hk-modal-radius, var(--radius-lg, 12px))
|
|
145
146
|
var(--hk-modal-radius, var(--radius-lg, 12px)));
|
|
146
147
|
}
|
|
148
|
+
|
|
149
|
+
.hk-modal-content-leave-from {
|
|
150
|
+
opacity: 1;
|
|
151
|
+
transform: translate(-50%, -50%);
|
|
152
|
+
}
|
|
153
|
+
|
|
154
|
+
.hk-modal-content-leave-to {
|
|
155
|
+
opacity: 0;
|
|
156
|
+
transform: translate(-50%, -50%) translateY(5%);
|
|
157
|
+
}
|
|
147
158
|
}
|
|
148
159
|
|
|
149
160
|
// ------
|