fix: Flashbar shadow z-index issue and pages background (#2885)

cloudscape-design · Nov 18, 2024 · 1b7803e · 1b7803e
1 parent 239a345
commit 1b7803e
Show file tree

Hide file tree

Showing 3 changed files with 11 additions and 14 deletions.
diff --git a/pages/app/styles.scss b/pages/app/styles.scss
@@ -30,3 +30,11 @@ body {
     }
   }
 }
+
+/*
+ This sets a background color to the page's container
+ to reveal the effects of negative z-index.
+*/
+:global(#app) {
+  background-color: tokens.$color-background-container-content;
+}
diff --git a/src/flashbar/collapsible.scss b/src/flashbar/collapsible.scss
@@ -90,8 +90,8 @@ the grid layout will be:
     );
   }
 
-  > .item:not(:last-child) > .flash::before,
-  > .item.flash::before {
+  > .item:not(:last-child) > .flash,
+  > .item.flash {
     box-shadow: awsui.$shadow-flash-collapsed;
   }
 }

diff --git a/src/flashbar/styles.scss b/src/flashbar/styles.scss
@@ -38,18 +38,7 @@
   color: awsui.$color-text-notification-default;
   overflow-wrap: break-word;
   word-wrap: break-word;
-
-  &::before {
-    @include styles.base-pseudo-element;
-    border-start-start-radius: awsui.$border-radius-flashbar;
-    border-start-end-radius: awsui.$border-radius-flashbar;
-    border-end-start-radius: awsui.$border-radius-flashbar;
-    border-end-end-radius: awsui.$border-radius-flashbar;
-    box-shadow: awsui.$shadow-flash-sticky;
-  }
-  &-refresh::before {
-    z-index: -1;
-  }
+  box-shadow: awsui.$shadow-flash-sticky;
 }
 
 .initial-hidden {