fix: chromatic

sbb-design-systems · Jan 15, 2024 · fa62270 · fa62270
1 parent 71e845b
commit fa62270
Showing 1 changed file with 4 additions and 18 deletions.
diff --git a/src/components/notification/notification.scss b/src/components/notification/notification.scss
@@ -26,6 +26,7 @@
   --sbb-notification-timing-function: ease-in;
   --sbb-notification-transition: max-height var(--sbb-notification-animation-duration)
       var(--sbb-animation-duration-2x) var(--sbb-notification-timing-function),
+    margin var(--sbb-notification-animation-duration) var(--sbb-notification-timing-function),
     padding var(--sbb-notification-animation-duration) var(--sbb-animation-duration-2x)
       var(--sbb-notification-timing-function),
     border var(--sbb-notification-animation-duration) var(--sbb-animation-duration-2x)
@@ -36,15 +37,6 @@
   // As the notification has always a light background, we have to fix the focus outline color
   // to default color for cases where the notification is used in a negative context.
   --sbb-focus-outline-color: var(--sbb-focus-outline-color-default);
-
-  margin: var(--sbb-notification-margin);
-  transition: margin var(--sbb-notification-animation-duration)
-    var(--sbb-notification-timing-function);
-  animation: {
-    name: animate-margin;
-    duration: var(--sbb-notification-animation-duration);
-    timing-function: var(--sbb-notification-timing-function);
-  }
 }
 
 :host(:is([data-state='opened'], [data-state='opening'])) {
@@ -55,6 +47,7 @@
   );
   --sbb-notification-transition: max-height var(--sbb-notification-animation-duration)
       var(--sbb-notification-timing-function),
+    margin var(--sbb-notification-animation-duration) var(--sbb-notification-timing-function),
     padding var(--sbb-notification-animation-duration) var(--sbb-notification-timing-function),
     border var(--sbb-notification-animation-duration) var(--sbb-notification-timing-function),
     visibility var(--sbb-notification-animation-duration) var(--sbb-notification-animation-duration)
@@ -93,6 +86,7 @@
 
 .sbb-notification__wrapper {
   position: relative;
+  margin: var(--sbb-notification-margin);
   inset-inline-start: calc(
     var(--sbb-notification-base-radius) - var(--sbb-notification-border-width)
   );
@@ -214,22 +208,14 @@
     opacity: 0;
     max-height: 0;
     border-block: none;
+    margin: 0;
   }
 
   to {
     visibility: visible;
     opacity: 1;
     max-height: var(--sbb-notification-max-height);
     border-block: var(--sbb-notification-border);
-  }
-}
-
-@keyframes animate-margin {
-  from {
-    margin: 0;
-  }
-
-  to {
     margin: var(--sbb-notification-margin);
   }
 }