@react-spectrum/s2/dist/Toast_module.css.map

Spectrum 2 UI components in React

{"mappings":"AACA;;;;AAQE;;;;AAIA;;;;AAIA;;;;AAIA;;;;AASA;EACE;;;;EAIA;;;;;AAKF;;;;;AAKA;;;;;AAKA;;;;;AAKA;;;;;AAUA;;;;AAOA;;;;AAQA;EAEE;;;;EAIA;;;;EAIA;;;;EAIA;;;;EAKA;;;;EAKA;;;;;EAUA;;;;;;;AAUF;EAEE;;;;EAIA;;;;EAIA;;;;;AAMJ;;;;;;;AAOA","sources":["packages/@react-spectrum/s2/src/Toast.module.css"],"sourcesContent":["/* Safari doesn't support :active-view-transition-type() yet, so we fall back to a class on the html element */\nhtml.toast-add,\nhtml.toast-remove,\nhtml.toast-expand,\nhtml.toast-collapse,\nhtml.toast-clear,\nhtml:active-view-transition-type(toast-add, toast-remove, toast-expand, toast-collapse, toast-clear) {\n  view-transition-name: none;\n\n  .toast-controls {\n    view-transition-name: toast-controls;\n  }\n\n  .toast-background {\n    view-transition-name: toast-background;\n  }\n\n  &::view-transition-group(toast-background) {\n    z-index: -1;\n  }\n\n  &::view-transition-group(*) {\n    animation-duration: 400ms;\n  }\n}\n\nhtml.toast-add,\nhtml.toast-remove,\nhtml:active-view-transition-type(toast-add, toast-remove) {\n  /* The new toast should slide in and out. With reduce motion enabled, it fades by default. */\n  @media (prefers-reduced-motion: no-preference) {\n    &::view-transition-new(.toast):only-child {\n      animation-name: slide-in;\n    }\n\n    &::view-transition-old(.toast):only-child {\n      animation-name: slide-out;\n    }\n  }\n\n  &::view-transition-group(.toast.bottom) {\n    --slideX: 0;\n    --slideY: calc(100% + 12px);\n  }\n  \n  &::view-transition-group(.toast.top) {\n    --slideX: 0;\n    --slideY: calc(-100% - 12px);\n  }\n  \n  &::view-transition-group(.toast.start) {\n    --slideX: calc(-100% - 12px);\n    --slideY: 0;\n  }\n  \n  &::view-transition-group(.toast.end) {\n    --slideX: calc(100% + 12px);\n    --slideY: 0;\n  }  \n}\n\n/* Make the \"Show all\" button animate slightly faster/slower than other components when expanding/collapsing.\n * This prevents it from appearing to overlap the text when it fades out and the text repositions. */\nhtml.toast-expand,\nhtml:active-view-transition-type(toast-expand) {\n  &::view-transition-group(toast-expand) {\n    animation-duration: 300ms;\n  }\n}\n\nhtml.toast-collapse,\nhtml:active-view-transition-type(toast-collapse) {\n  &::view-transition-group(toast-expand) {\n    animation-duration: 600ms;\n  }\n}\n\nhtml.toast-expand,\nhtml.toast-collapse,\nhtml:active-view-transition-type(toast-expand, toast-collapse) {\n  @media (prefers-reduced-motion: no-preference) {\n    /* When expanding/collapsing, animate the components of the main toast individually. */\n    .toast-content {\n      view-transition-name: toast-content;\n    }\n\n    .toast-expand {\n      view-transition-name: toast-expand;\n    }\n\n    .toast-action {\n      view-transition-name: toast-action;\n    }\n\n    .toast-close {\n      view-transition-name: toast-close;\n    }\n\n    /* Force toast controls to be visible during the animation */\n    .toast-controls {\n      display: flex;\n    }\n\n    /* Smoothly transition the size of toasts. */\n    &::view-transition-old(.toast),\n    &::view-transition-new(.toast) {\n      /* Make the old and new images fill the size of the parent group. */\n      height: 100%;\n      width: 100%;\n    }\n\n    /* Background toasts don't have their components split apart in separate view transitions.\n     * This means we need to do some tricks to get the aspect ratio to transition smoothly.\n     * Clipping messes up the shadows a bit, but it's less noticeable on the background toasts. */\n    &::view-transition-old(.background-toast),\n    &::view-transition-new(.background-toast) {\n      /* Cover all of the available space without stretching the aspect ratio */\n      object-fit: cover;\n      object-position: top center;\n      /* Clip to retain rounded corners */\n      clip-path: inset(0px round 10px);\n    }\n  }\n\n  @media (prefers-reduced-motion) {\n    /* Do not animate individual toasts in reduced motion. The whole list cross-fades instead. */\n    .toast {\n      view-transition-name: none !important;\n    }\n\n    .toast-list-expanded {\n      view-transition-name: toast-list-expanded;\n    }\n\n    .toast-list-collapsed {\n      view-transition-name: toast-list-collapsed;\n    }\n  }\n}\n\n@keyframes slide-in {\n  from {\n    translate: var(--slideX) var(--slideY);\n    opacity: 0;\n  }\n}\n\n@keyframes slide-out {\n  to {\n    translate: var(--slideX) var(--slideY);\n    opacity: 0;\n  }\n}\n"],"names":[],"version":3,"file":"Toast_module.css.map"}