Mercurial

comparison design_system/src/styles/components.css @ 253:fdf3816959cb

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
[ui] Add Sonner-like notification stack Co-authored-by: Copilot <[email protected]>
author MrJuneJune <me@mrjunejune.com>
date Tue, 04 Aug 2026 12:21:19 -0700
parents 7a7581f040e8
children 2b6e732087ff
comparison
equal deleted inserted replaced
252:7a7581f040e8 253:fdf3816959cb
211 inset-inline-end: var(--zen-notification-inset, var(--zen-space-4)); 211 inset-inline-end: var(--zen-notification-inset, var(--zen-space-4));
212 inset-block-end: var( 212 inset-block-end: var(
213 --zen-notification-bottom-inset, 213 --zen-notification-bottom-inset,
214 var(--zen-space-4) 214 var(--zen-space-4)
215 ); 215 );
216 display: grid;
217 inline-size: min(24rem, calc(100vi - 2rem)); 216 inline-size: min(24rem, calc(100vi - 2rem));
218 gap: var(--zen-space-3); 217 height: var(--zen-notification-collapsed-height, 0);
219 pointer-events: none; 218 --zen-notification-gap: 12px;
219 pointer-events: auto;
220 isolation: isolate;
221 transition: height 220ms cubic-bezier(0.2, 0.8, 0.2, 1);
222 }
223
224 zen-notifications > [data-zen-notification-stack]:is(
225 :hover,
226 :focus-within
227 ) {
228 height: var(--zen-notification-expanded-height, 0);
220 } 229 }
221 230
222 zen-notifications > [data-zen-notification-stack] > article { 231 zen-notifications > [data-zen-notification-stack] > article {
232 position: absolute;
233 inset-inline: 0;
234 inset-block-end: 0;
223 display: grid; 235 display: grid;
224 grid-template-columns: 1.75rem minmax(0, 1fr) 2rem; 236 grid-template-columns: 1.75rem minmax(0, 1fr) 2rem;
225 align-items: start; 237 align-items: start;
226 gap: var(--zen-space-3); 238 gap: var(--zen-space-3);
227 padding: var(--zen-space-4); 239 padding: var(--zen-space-4);
228 border: var(--zen-border-width) solid var(--zen-color-border); 240 border: var(--zen-border-width) solid var(--zen-color-border);
229 border-radius: var(--zen-radius-lg); 241 border-radius: var(--zen-radius-lg);
230 box-shadow: var(--zen-shadow-md); 242 box-shadow: var(--zen-shadow-md);
231 background: var(--zen-color-surface-raised); 243 background: var(--zen-color-surface-raised);
232 color: var(--zen-color-text); 244 color: var(--zen-color-text);
245 opacity: var(--zen-notification-collapsed-opacity, 1);
246 pointer-events: none;
247 transform:
248 translate3d(
249 0,
250 var(--zen-notification-collapsed-offset, 0),
251 0
252 )
253 scale(var(--zen-notification-scale, 1));
254 transform-origin: center bottom;
255 transition:
256 opacity 180ms ease,
257 transform 220ms cubic-bezier(0.2, 0.8, 0.2, 1);
258 will-change: transform;
259 animation: zen-notification-enter 160ms ease-out;
260 }
261
262 zen-notifications > [data-zen-notification-stack] > article[data-depth="0"] {
233 pointer-events: auto; 263 pointer-events: auto;
234 animation: zen-notification-enter 160ms ease-out; 264 }
265
266 zen-notifications > [data-zen-notification-stack]:is(
267 :hover,
268 :focus-within
269 ) > article {
270 opacity: 1;
271 pointer-events: auto;
272 transform:
273 translate3d(
274 0,
275 var(--zen-notification-offset, 0px),
276 0
277 )
278 scale(1);
279 }
280
281 zen-notifications > [data-zen-notification-stack] > article[data-removing] {
282 opacity: 0;
283 pointer-events: none;
284 transform: translate3d(110%, 0, 0) scale(0.96);
235 } 285 }
236 286
237 .zen-notification-tone { 287 .zen-notification-tone {
238 display: grid; 288 display: grid;
239 width: 1.75rem; 289 width: 1.75rem;
322 } 372 }
323 373
324 @keyframes zen-notification-enter { 374 @keyframes zen-notification-enter {
325 from { 375 from {
326 opacity: 0; 376 opacity: 0;
327 transform: translateY(0.75rem);
328 } 377 }
329 } 378 }
330 379
331 @media (forced-colors: active) { 380 @media (forced-colors: active) {
332 zen-notifications > [data-zen-notification-stack] > article, 381 zen-notifications > [data-zen-notification-stack] > article,
345 animation-duration: 1400ms; 394 animation-duration: 1400ms;
346 } 395 }
347 396
348 zen-notifications > [data-zen-notification-stack] > article { 397 zen-notifications > [data-zen-notification-stack] > article {
349 animation: none; 398 animation: none;
350 } 399 transition: none;
351 } 400 }
401
402 zen-notifications > [data-zen-notification-stack] {
403 transition: none;
404 }
405 }