fix: prevent clashing styles

alchemyplatform · Sep 27, 2024 · 385e539 · 385e539
1 parent 80850bd
commit 385e539
Show file tree

Hide file tree

Showing 2 changed files with 9 additions and 8 deletions.
diff --git a/examples/ui-demo/src/app/globals.css b/examples/ui-demo/src/app/globals.css
@@ -96,8 +96,8 @@
 }
 
 /* Radix Toast Animations */
-@keyframes slideIn {
-  from {
+@keyframes slideInToast {
+  from { 
     transform: translateY(100%);
     opacity: 0;
   }
@@ -107,7 +107,7 @@
   }
 }
 
-@keyframes hide {
+@keyframes hideToast {
   from {
     transform: translateY(0%);
     opacity: 1;
@@ -118,10 +118,10 @@
   }
 }
 
-[data-state="open"] {
-  animation: slideIn 200ms cubic-bezier(0.16, 1, 0.3, 1);
+#toast[data-state="open"] {
+  animation: slideInToast 200ms cubic-bezier(0.16, 1, 0.3, 1);
 }
 
-[data-state="closed"] {
-  animation: hide 100ms ease-in forwards;
+#toast[data-state="closed"] {
+  animation: hideToast 100ms ease-in forwards;
 }
diff --git a/examples/ui-demo/src/components/shared/Toast.tsx b/examples/ui-demo/src/components/shared/Toast.tsx
@@ -49,7 +49,8 @@ export const Toast = ({ text, open, setOpen, type }: ToastProps) => {
 
   return (
     <>
-      <Root
+      <Root 
+        id="toast"
         open={open}
         onOpenChange={setOpen}
         className={`${getBGColor()} align-middle rounded-lg shadow-lg px-3 py-2 flex justify-center items-center`}