fix(Notification): add HCM query for close icon (#12097)

* fix(ActionableNotification): add HCM query for close icon * fix(Notification): fix inline, toast variants Co-authored-by: Josefina Mancilla <[email protected]>
carbon-design-system · Sep 16, 2022 · 900a9be · 900a9be
1 parent 86f1e9c
commit 900a9be
Show file tree

Hide file tree

Showing 3 changed files with 8 additions and 5 deletions.
diff --git a/packages/styles/scss/components/notification/_actionable-notification.scss b/packages/styles/scss/components/notification/_actionable-notification.scss
@@ -444,7 +444,9 @@
   }
 
   .#{$prefix}--actionable-notification .#{$prefix}--inline-notification__icon,
-  .#{$prefix}--actionable-notification .#{$prefix}--toast-notification__icon {
+  .#{$prefix}--actionable-notification .#{$prefix}--toast-notification__icon,
+  .#{$prefix}--actionable-notification
+    .#{$prefix}--actionable-notification__close-icon {
     @include high-contrast-mode('icon-fill');
   }
   /* stylelint-enable */

diff --git a/packages/styles/scss/components/notification/_inline-notification.scss b/packages/styles/scss/components/notification/_inline-notification.scss
@@ -309,10 +309,11 @@
     @include high-contrast-mode('focus');
   }
 
-  .#{$prefix}--inline-notification__icon {
+  .#{$prefix}--inline-notification .#{$prefix}--inline-notification__icon {
     @include high-contrast-mode('icon-fill');
   }
-  .#{$prefix}--inline-notification__close-icon {
+  .#{$prefix}--inline-notification
+    .#{$prefix}--inline-notification__close-icon {
     @include high-contrast-mode('icon-fill');
   }
   /* stylelint-enable */

diff --git a/packages/styles/scss/components/notification/_toast-notification.scss b/packages/styles/scss/components/notification/_toast-notification.scss
@@ -226,10 +226,10 @@
   .#{$prefix}--toast-notification__close-button:focus {
     @include high-contrast-mode('focus');
   }
-  .#{$prefix}--toast-notification__close-icon {
+  .#{$prefix}--toast-notification .#{$prefix}--toast-notification__close-icon {
     @include high-contrast-mode('icon-fill');
   }
-  .#{$prefix}--toast-notification__icon {
+  .#{$prefix}--toast-notification .#{$prefix}--toast-notification__icon {
     @include high-contrast-mode('icon-fill');
   }
   /* stylelint-enable */