fix(styles): Alerts: avoid flash of default icon when using post-icon (…

…#2244) Co-authored-by: Alizé Debray <[email protected]>
swisspost · Nov 9, 2023 · 04932ce · 04932ce
1 parent f8204bf
commit 04932ce
Show file tree

Hide file tree

Showing 2 changed files with 11 additions and 1 deletion.
diff --git a/.changeset/plenty-pianos-check.md b/.changeset/plenty-pianos-check.md
@@ -0,0 +1,5 @@
+---
+'@swisspost/design-system-styles': patch
+---
+
+Fixed default icon flashing when using a `post-icon` on alerts.
diff --git a/packages/styles/src/mixins/_notification.scss b/packages/styles/src/mixins/_notification.scss
@@ -111,7 +111,12 @@
     @include icons-mx.icon($icon);
   }
 
-  // icon override (post-icon)
+  // Prevent flashing when using post-icon
+  &:has(> post-icon)::before {
+    content: none;
+  }
+
+  // icon override (post-icon), needed when :has is not supported
   > post-icon {
     background-color: $color;
   }