fix(overlays): hide overlays before hydration

sbb-design-systems · Nov 23, 2023 · 448811a · 448811a
1 parent 6ff8255
commit 448811a
Show file tree

Hide file tree

Showing 5 changed files with 26 additions and 26 deletions.
diff --git a/src/components/dialog/dialog.scss b/src/components/dialog/dialog.scss
@@ -136,11 +136,6 @@
     border-radius: 0;
   }
 
-  :host([data-state='closing']) & {
-    pointer-events: none;
-    animation-name: close;
-  }
-
   :host([data-state]:not([data-state='closed'])) & {
     display: block;
 
@@ -151,6 +146,11 @@
     }
   }
 
+  :host([data-state][data-state='closing']) & {
+    pointer-events: none;
+    animation-name: close;
+  }
+
   @include sbb.if-forced-colors {
     outline: var(--sbb-border-width-1x) solid CanvasText;
   }

diff --git a/src/components/menu/menu/menu.scss b/src/components/menu/menu/menu.scss
@@ -111,11 +111,6 @@
   padding: 0;
   overflow: hidden;
 
-  :host([data-state='closing']) & {
-    pointer-events: none;
-    animation-name: close;
-  }
-
   :host([data-state]:not([data-state='closed'])) & {
     display: block;
     opacity: 1;
@@ -127,6 +122,11 @@
     }
   }
 
+  :host([data-state][data-state='closing']) & {
+    pointer-events: none;
+    animation-name: close;
+  }
+
   @include sbb.if-forced-colors {
     outline: var(--sbb-border-width-1x) solid CanvasText;
   }

diff --git a/src/components/navigation/navigation-section/navigation-section.scss b/src/components/navigation/navigation-section/navigation-section.scss
@@ -113,10 +113,6 @@
   padding: 0;
   overflow: hidden;
 
-  :host([data-state='closing']) & {
-    animation-name: close;
-  }
-
   :host([data-state]:not([data-state='closed'])) & {
     display: block;
 
@@ -127,6 +123,10 @@
     }
   }
 
+  :host([data-state][data-state='closing']) & {
+    animation-name: close;
+  }
+
   @include sbb.if-forced-colors {
     outline: var(--sbb-border-width-1x) solid CanvasText;
   }

diff --git a/src/components/navigation/navigation/navigation.scss b/src/components/navigation/navigation/navigation.scss
@@ -149,11 +149,6 @@
     background: var(--sbb-color-midnight-default);
   }
 
-  :host([data-state='closing']) & {
-    pointer-events: none;
-    animation-name: close;
-  }
-
   :host([data-state]:not([data-state='closed'])) & {
     display: block;
     pointer-events: all;
@@ -165,6 +160,11 @@
     }
   }
 
+  :host([data-state][data-state='closing']) & {
+    pointer-events: none;
+    animation-name: close;
+  }
+
   @include sbb.if-forced-colors {
     outline: var(--sbb-border-width-1x) solid CanvasText;
   }

diff --git a/src/components/tooltip/tooltip/tooltip.scss b/src/components/tooltip/tooltip/tooltip.scss
@@ -80,20 +80,20 @@
   width: max-content;
   background-color: var(--sbb-tooltip-background);
 
-  :host([data-state='closing']) & {
-    pointer-events: none;
+  :host([data-state]:not([data-state='closed'])) & {
+    display: block;
+
     animation: {
-      name: close;
+      name: open;
       duration: var(--sbb-tooltip-animation-duration);
       timing-function: var(--sbb-tooltip-animation-easing);
     }
   }
 
-  :host([data-state]:not([data-state='closed'])) & {
-    display: block;
-
+  :host([data-state][data-state='closing']) & {
+    pointer-events: none;
     animation: {
-      name: open;
+      name: close;
       duration: var(--sbb-tooltip-animation-duration);
       timing-function: var(--sbb-tooltip-animation-easing);
     }