@react-spectrum/toast 3.1.6 → 3.2.0

package/src/toastContainer.css

@@ -1,154 +0,0 @@
-/*
- * Copyright 2020 Adobe. All rights reserved.
- * This file is licensed to you under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License. You may obtain a copy
- * of the License at http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software distributed under
- * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
- * OF ANY KIND, either express or implied. See the License for the specific language
- * governing permissions and limitations under the License.
- */
-
-@import "../../../@adobe/spectrum-css-temp/components/commons/focus-ring.css";
-
-.react-spectrum-ToastContainer {
-  composes: spectrum-FocusRing;
-  --spectrum-focus-ring-border-radius: var(--spectrum-toast-border-radius);
-  --spectrum-focus-ring-gap: var(--spectrum-alias-focus-ring-gap);
-  --spectrum-focus-ring-size: var(--spectrum-alias-focus-ring-size);
-
-  position: fixed;
-  inset-inline-start: 0;
-  inset-inline-end: 0;
-  z-index: 100050; /* above modals */
-  display: flex;
-  pointer-events: none;
-  outline: none;
-  /* keep focus ring inside the viewport */
-  margin-block-end: 8px;
-  margin-inline: 8px;
-
-  .spectrum-Toast {
-    margin: 8px;
-    pointer-events: all;
-  }
-
-  &[data-position=top] {
-    top: 0;
-    flex-direction: column;
-    --slide-from: translateY(-100%);
-  }
-
-  &[data-position=bottom] {
-    bottom: 0;
-    flex-direction: column-reverse;
-    --slide-from: translateY(100%);
-  }
-
-  &[data-placement=start] {
-    align-items: flex-start;
-    --slide-from: translateX(-100%);
-
-    &:dir(rtl) {
-      --slide-from: translateX(100%);
-    }
-  }
-
-  &[data-placement=center] {
-    align-items: center;
-  }
-
-  &[data-placement=end] {
-    align-items: flex-end;
-    --slide-from: translateX(100%);
-
-    &:dir(rtl) {
-      --slide-from: translateX(-100%);
-    }
-  }
-}
-
-.spectrum-Toast {
-  composes: spectrum-FocusRing;
-  --spectrum-focus-ring-border-radius: var(--spectrum-toast-border-radius);
-  --spectrum-focus-ring-gap: var(--spectrum-alias-focus-ring-gap);
-  --spectrum-focus-ring-size: var(--spectrum-alias-focus-ring-size);
-
-  position: relative;
-  outline: none;
-
-  .spectrum-Toast-contentWrapper {
-    display: inline-flex;
-  }
-}
-
-.spectrum-ToastContainer-list {
-  display: inherit;
-  flex-direction: inherit;
-  align-items: inherit;
-  list-style-type: none;
-  margin: 0;
-  padding-inline-start: 0;
-}
-
-.spectrum-ToastContainer-listitem {
-  display: inline-block;
-  view-transition-class: toast;
-}
-
-@keyframes slide-in {
-  from {
-    translate: var(--slideX) var(--slideY);
-    opacity: 0;
-  }
-}
-
-@keyframes slide-out {
-  to {
-    translate: var(--slideX) var(--slideY);
-    opacity: 0;
-  }
-}
-
-@keyframes fade-out {
-  to {
-    opacity: 0;
-  }
-}
-
-::view-transition-group(.toast) {
-  animation-duration: 300ms;
-}
-
-::view-transition-group(.toast.bottom) {
-  --slideX: 0;
-  --slideY: calc(100% + 12px);
-}
-
-::view-transition-group(.toast.top) {
-  --slideX: 0;
-  --slideY: calc(-100% - 12px);
-}
-
-::view-transition-group(.toast.start) {
-  --slideX: calc(-100% - 12px);
-  --slideY: 0;
-}
-
-::view-transition-group(.toast.end) {
-  --slideX: calc(100% + 12px);
-  --slideY: 0;
-}
-
-::view-transition-new(.toast):only-child {
-  animation-name: slide-in;
-}
-
-::view-transition-old(.toast):only-child {
-  animation-name: slide-out;
-}
-
-::view-transition-old(.toast.fadeOnly):only-child {
-  animation-name: fade-out;
-}