Update notification width and out animation (#346)

Update notification styles
hashicorp-forge · Sep 26, 2023 · 4898d63 · 4898d63
1 parent d0d6c51
commit 4898d63
Showing 1 changed file with 19 additions and 2 deletions.
diff --git a/web/app/styles/components/notification.scss b/web/app/styles/components/notification.scss
@@ -13,12 +13,29 @@
   }
 }
 
+@keyframes notificationOut {
+  from {
+    opacity: 1;
+    transform: translateX(0);
+  }
+  to {
+    opacity: 0;
+    transform: translateX(8px);
+  }
+}
+
 .notification {
   animation: notificationIn 700ms cubic-bezier(0.68, -0.55, 0.265, 1.55)
     forwards;
 
   &.exiting {
-    animation: notificationIn 300ms cubic-bezier(0.68, -0.55, 0.265, 1.55)
-      reverse forwards;
+    animation: notificationOut 300ms cubic-bezier(0.68, -0.55, 0.265, 1.55)
+      forwards;
+  }
+}
+
+.flash-message {
+  .hds-toast {
+    @apply w-[400px];
   }
 }