fix: margin transition

sbb-design-systems · Jan 3, 2024 · af0907b · af0907b
1 parent 91ac9d2
commit af0907b
Show file tree

Hide file tree

Showing 2 changed files with 2 additions and 3 deletions.
diff --git a/src/components/notification/notification.scss b/src/components/notification/notification.scss
@@ -37,7 +37,7 @@
   // 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: 0;
+  margin: var(--sbb-notification-margin);
   transition: margin var(--sbb-notification-animation-duration)
     var(--sbb-notification-timing-function);
   animation: {
@@ -61,8 +61,6 @@
       var(--sbb-notification-timing-function),
     opacity var(--sbb-notification-animation-duration) var(--sbb-notification-animation-duration)
       var(--sbb-notification-timing-function);
-
-  margin: var(--sbb-notification-margin);
 }
 
 :host(:is([data-resize-disable-animation], [disable-animation])) {

diff --git a/src/components/notification/notification.ts b/src/components/notification/notification.ts
@@ -125,6 +125,7 @@ export class SbbNotificationElement extends LitElement {
   public close(): void {
     if (this._state === 'opened') {
       this._state = 'closing';
+      this.style.setProperty('--sbb-notification-margin', '0');
       this._willClose.emit();
       this.disableAnimation && this._handleClosing();
     }