npm - @syncfusion/blazor-themes - Versions diffs - 22.2.11 → 23.1.36 - Mend

@syncfusion/blazor-themes 22.2.11 → 23.1.36

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (365) hide show

package/SCSS-Themes/navigations/menu/material.scss CHANGED Viewed

@@ -858,7 +858,8 @@ $menu-header-icon-padding: 0 16px !default;
             }
           }
-          &.e-selected {
+          &.e-selected,
+          &.e-active-item {
             color: $menu-selected-color;
             outline: $menu-li-selected-outline;
             outline-offset: $menu-li-selected-outline-offset;
@@ -938,7 +939,8 @@ $menu-header-icon-padding: 0 16px !default;
             }
           }
-          &.e-selected {
+          &.e-selected,
+          &.e-active-item {
             @if $skin-name == 'bootstrap4' {
               & .e-caret {
                 color: $menu-icon-focussed-color;
@@ -958,7 +960,8 @@ $menu-header-icon-padding: 0 16px !default;
             @include focused-color;
           }
-          &.e-selected {
+          &.e-selected,
+          &.e-active-item {
             @include selected-color;
           }
@@ -1058,6 +1061,7 @@ $menu-header-icon-padding: 0 16px !default;
       }
       & .e-menu .e-menu-item.e-selected,
+      & .e-menu .e-menu-item.e-active-item,
       & .e-menu .e-menu-item.e-focused {
         background: rgba(transparent, .056);
         color: inherit;
@@ -1080,6 +1084,7 @@ $menu-header-icon-padding: 0 16px !default;
       @if $skin-name == 'bootstrap4' {
         & .e-selected .e-caret,
+        & .e-active-item .e-caret,
         & .e-caret {
           color: $submenu-color;
         }

package/SCSS-Themes/navigations/menu/material3-dark.scss CHANGED Viewed

@@ -861,7 +861,8 @@ $menu-caret-color: $cmenu-caret-color !default;
             }
           }
-          &.e-selected {
+          &.e-selected,
+          &.e-active-item {
             color: $menu-selected-color;
             outline: $menu-li-selected-outline;
             outline-offset: $menu-li-selected-outline-offset;
@@ -941,7 +942,8 @@ $menu-caret-color: $cmenu-caret-color !default;
             }
           }
-          &.e-selected {
+          &.e-selected,
+          &.e-active-item {
             @if $skin-name == 'bootstrap4' {
               & .e-caret {
                 color: $menu-icon-focussed-color;
@@ -961,7 +963,8 @@ $menu-caret-color: $cmenu-caret-color !default;
             @include focused-color;
           }
-          &.e-selected {
+          &.e-selected,
+          &.e-active-item {
             @include selected-color;
           }
@@ -1061,6 +1064,7 @@ $menu-caret-color: $cmenu-caret-color !default;
       }
       & .e-menu .e-menu-item.e-selected,
+      & .e-menu .e-menu-item.e-active-item,
       & .e-menu .e-menu-item.e-focused {
         background: rgba(transparent, .056);
         color: inherit;
@@ -1083,6 +1087,7 @@ $menu-caret-color: $cmenu-caret-color !default;
       @if $skin-name == 'bootstrap4' {
         & .e-selected .e-caret,
+        & .e-active-item .e-caret,
         & .e-caret {
           color: $submenu-color;
         }

package/SCSS-Themes/navigations/menu/material3.scss CHANGED Viewed

@@ -861,7 +861,8 @@ $menu-caret-color: $cmenu-caret-color !default;
             }
           }
-          &.e-selected {
+          &.e-selected,
+          &.e-active-item {
             color: $menu-selected-color;
             outline: $menu-li-selected-outline;
             outline-offset: $menu-li-selected-outline-offset;
@@ -941,7 +942,8 @@ $menu-caret-color: $cmenu-caret-color !default;
             }
           }
-          &.e-selected {
+          &.e-selected,
+          &.e-active-item {
             @if $skin-name == 'bootstrap4' {
               & .e-caret {
                 color: $menu-icon-focussed-color;
@@ -961,7 +963,8 @@ $menu-caret-color: $cmenu-caret-color !default;
             @include focused-color;
           }
-          &.e-selected {
+          &.e-selected,
+          &.e-active-item {
             @include selected-color;
           }
@@ -1061,6 +1064,7 @@ $menu-caret-color: $cmenu-caret-color !default;
       }
       & .e-menu .e-menu-item.e-selected,
+      & .e-menu .e-menu-item.e-active-item,
       & .e-menu .e-menu-item.e-focused {
         background: rgba(transparent, .056);
         color: inherit;
@@ -1083,6 +1087,7 @@ $menu-caret-color: $cmenu-caret-color !default;
       @if $skin-name == 'bootstrap4' {
         & .e-selected .e-caret,
+        & .e-active-item .e-caret,
         & .e-caret {
           color: $submenu-color;
         }

package/SCSS-Themes/navigations/menu/tailwind-dark.scss CHANGED Viewed

@@ -860,7 +860,8 @@ $menu-caret-color: $cmenu-caret-color !default;
             }
           }
-          &.e-selected {
+          &.e-selected,
+          &.e-active-item {
             color: $menu-selected-color;
             outline: $menu-li-selected-outline;
             outline-offset: $menu-li-selected-outline-offset;
@@ -940,7 +941,8 @@ $menu-caret-color: $cmenu-caret-color !default;
             }
           }
-          &.e-selected {
+          &.e-selected,
+          &.e-active-item {
             @if $skin-name == 'bootstrap4' {
               & .e-caret {
                 color: $menu-icon-focussed-color;
@@ -960,7 +962,8 @@ $menu-caret-color: $cmenu-caret-color !default;
             @include focused-color;
           }
-          &.e-selected {
+          &.e-selected,
+          &.e-active-item {
             @include selected-color;
           }
@@ -1060,6 +1063,7 @@ $menu-caret-color: $cmenu-caret-color !default;
       }
       & .e-menu .e-menu-item.e-selected,
+      & .e-menu .e-menu-item.e-active-item,
       & .e-menu .e-menu-item.e-focused {
         background: rgba(transparent, .056);
         color: inherit;
@@ -1082,6 +1086,7 @@ $menu-caret-color: $cmenu-caret-color !default;
       @if $skin-name == 'bootstrap4' {
         & .e-selected .e-caret,
+        & .e-active-item .e-caret,
         & .e-caret {
           color: $submenu-color;
         }

package/SCSS-Themes/navigations/menu/tailwind.scss CHANGED Viewed

@@ -860,7 +860,8 @@ $menu-caret-color: $cmenu-caret-color !default;
             }
           }
-          &.e-selected {
+          &.e-selected,
+          &.e-active-item {
             color: $menu-selected-color;
             outline: $menu-li-selected-outline;
             outline-offset: $menu-li-selected-outline-offset;
@@ -940,7 +941,8 @@ $menu-caret-color: $cmenu-caret-color !default;
             }
           }
-          &.e-selected {
+          &.e-selected,
+          &.e-active-item {
             @if $skin-name == 'bootstrap4' {
               & .e-caret {
                 color: $menu-icon-focussed-color;
@@ -960,7 +962,8 @@ $menu-caret-color: $cmenu-caret-color !default;
             @include focused-color;
           }
-          &.e-selected {
+          &.e-selected,
+          &.e-active-item {
             @include selected-color;
           }
@@ -1060,6 +1063,7 @@ $menu-caret-color: $cmenu-caret-color !default;
       }
       & .e-menu .e-menu-item.e-selected,
+      & .e-menu .e-menu-item.e-active-item,
       & .e-menu .e-menu-item.e-focused {
         background: rgba(transparent, .056);
         color: inherit;
@@ -1082,6 +1086,7 @@ $menu-caret-color: $cmenu-caret-color !default;
       @if $skin-name == 'bootstrap4' {
         & .e-selected .e-caret,
+        & .e-active-item .e-caret,
         & .e-caret {
           color: $submenu-color;
         }

package/SCSS-Themes/navigations/tab/tailwind-dark.scss CHANGED Viewed

@@ -392,7 +392,7 @@ $tab-bgr-fill-focused-wrap-height: $tab-focus-big-fill-height !default;
 $tab-bgr-rtl-icon-right-margin: 0 !default;
 $tab-bgr-background-active-padding: 0 9px !default;
 $tab-bgr-fill-active-item-padding: 0 10px !default;
-$tab-bgr-item-text-margin-bottom: 6px !default;
+$tab-bgr-item-text-margin-bottom: 0 !default;
 $tab-nrml-hscroll-items-nav-width: 24px !default;
 $tab-nrml-hscroll-items-bdr-radius: 0 !default;
@@ -450,7 +450,7 @@ $tab-nrml-vertical-indicator-width: 2px !default;
 $tab-nrml-bottom-wrap-before-top: unset !default;
 $tab-nrml-background-vertical-indicator-display: block !default;
 $tab-nrml-background-active-padding: 0 7px !default;
-$tab-nrml-item-text-margin-bottom: 5px !default;
+$tab-nrml-item-text-margin-bottom: 0 !default;
 @mixin tbar-alt-btn-animation-after {
   animation: tbar-alt-popup-shadow 1s ease-out 0ms;

package/SCSS-Themes/navigations/tab/tailwind.scss CHANGED Viewed

@@ -392,7 +392,7 @@ $tab-bgr-fill-focused-wrap-height: $tab-focus-big-fill-height !default;
 $tab-bgr-rtl-icon-right-margin: 0 !default;
 $tab-bgr-background-active-padding: 0 9px !default;
 $tab-bgr-fill-active-item-padding: 0 10px !default;
-$tab-bgr-item-text-margin-bottom: 6px !default;
+$tab-bgr-item-text-margin-bottom: 0 !default;
 $tab-nrml-hscroll-items-nav-width: 24px !default;
 $tab-nrml-hscroll-items-bdr-radius: 0 !default;
@@ -450,7 +450,7 @@ $tab-nrml-vertical-indicator-width: 2px !default;
 $tab-nrml-bottom-wrap-before-top: unset !default;
 $tab-nrml-background-vertical-indicator-display: block !default;
 $tab-nrml-background-active-padding: 0 7px !default;
-$tab-nrml-item-text-margin-bottom: 5px !default;
+$tab-nrml-item-text-margin-bottom: 0 !default;
 @mixin tbar-alt-btn-animation-after {
   animation: tbar-alt-popup-shadow 1s ease-out 0ms;

package/SCSS-Themes/navigations/toolbar/bootstrap5-dark.scss CHANGED Viewed

@@ -50,10 +50,10 @@ $tbar-popup-padding: 0 !default;
 // dimension definitions
 $tbar-btn-nrml-minheight: 32px !default;
 $tbar-btn-nrml-line-height: 22px !default;
-$tbar-btn-icon-nrml-line-height: 18px !default;
+$tbar-btn-icon-nrml-line-height: 14px !default;
 $tbar-btn-bgr-minheight: 38px !default;
 $tbar-btn-bgr-line-height: 24px !default;
-$tbar-btn-icon-bgr-line-height: 18px !default;
+$tbar-btn-icon-bgr-line-height: 14px !default;
 $tbar-btn-nrml-minwidth: 32px !default;
 $tbar-btn-weight: $font-weight-normal !default;
 $tbar-btn-bgr-minwidth: 38px !default;
@@ -159,8 +159,8 @@ $tbar-btn-icons-focus-color: $primary-text-color !default;
 $tbar-btn-text-focus-color: $primary-text-color !default;
 $tbar-btn-focus-border-color: $tbar-focus-border-color !default;
 $tbar-btn-hover-border-size: $tbar-border-size !default;
-$tbar-btn-hover-active-icons-color: $primary-text-color !default;
-$tbar-btn-hover-active-text-color: $primary-text-color !default;
+$tbar-btn-hover-active-icons-color: $tbar-default-icon-color !default;
+$tbar-btn-hover-active-text-color: $content-text-color-alt2 !default;
 $tbar-btn-overlay-opacity: .5 !default;
 $tbar-btn-active-bg: $tbar-active-bg !default;
 $tbar-btn-active-icons-color: $tbar-default-icon-color !default;

package/SCSS-Themes/navigations/toolbar/bootstrap5.scss CHANGED Viewed

@@ -50,10 +50,10 @@ $tbar-popup-padding: 0 !default;
 // dimension definitions
 $tbar-btn-nrml-minheight: 32px !default;
 $tbar-btn-nrml-line-height: 22px !default;
-$tbar-btn-icon-nrml-line-height: 18px !default;
+$tbar-btn-icon-nrml-line-height: 14px !default;
 $tbar-btn-bgr-minheight: 38px !default;
 $tbar-btn-bgr-line-height: 24px !default;
-$tbar-btn-icon-bgr-line-height: 18px !default;
+$tbar-btn-icon-bgr-line-height: 14px !default;
 $tbar-btn-nrml-minwidth: 32px !default;
 $tbar-btn-weight: $font-weight-normal !default;
 $tbar-btn-bgr-minwidth: 38px !default;
@@ -159,8 +159,8 @@ $tbar-btn-icons-focus-color: $primary-text-color !default;
 $tbar-btn-text-focus-color: $primary-text-color !default;
 $tbar-btn-focus-border-color: $tbar-focus-border-color !default;
 $tbar-btn-hover-border-size: $tbar-border-size !default;
-$tbar-btn-hover-active-icons-color: $primary-text-color !default;
-$tbar-btn-hover-active-text-color: $primary-text-color !default;
+$tbar-btn-hover-active-icons-color: $tbar-default-icon-color !default;
+$tbar-btn-hover-active-text-color: $content-text-color-alt2 !default;
 $tbar-btn-overlay-opacity: .5 !default;
 $tbar-btn-active-bg: $tbar-active-bg !default;
 $tbar-btn-active-icons-color: $tbar-default-icon-color !default;

package/SCSS-Themes/navigations/toolbar/material3-dark.scss CHANGED Viewed

@@ -50,7 +50,7 @@ $tbar-popup-padding: 0 !default;
 // dimension definitions
 $tbar-btn-nrml-minheight: 32px !default;
 $tbar-btn-nrml-line-height: 22px !default;
-$tbar-btn-icon-nrml-line-height: 18px !default;
+$tbar-btn-icon-nrml-line-height: 16px !default;
 $tbar-btn-bgr-minheight: 40px !default;
 $tbar-btn-bgr-line-height: 24px !default;
 $tbar-btn-icon-bgr-line-height: 24px !default;

package/SCSS-Themes/navigations/toolbar/material3.scss CHANGED Viewed

@@ -50,7 +50,7 @@ $tbar-popup-padding: 0 !default;
 // dimension definitions
 $tbar-btn-nrml-minheight: 32px !default;
 $tbar-btn-nrml-line-height: 22px !default;
-$tbar-btn-icon-nrml-line-height: 18px !default;
+$tbar-btn-icon-nrml-line-height: 16px !default;
 $tbar-btn-bgr-minheight: 40px !default;
 $tbar-btn-bgr-line-height: 24px !default;
 $tbar-btn-icon-bgr-line-height: 24px !default;

package/SCSS-Themes/navigations/toolbar/tailwind-dark.scss CHANGED Viewed

@@ -111,10 +111,10 @@ $tbar-btn-nrml-mrgn: 0 !default;
 $tbar-popup-padding: 0 !default;
 $tbar-btn-nrml-minheight: 30px !default;
 $tbar-btn-nrml-line-height: 22px !default;
-$tbar-btn-icon-nrml-line-height: 16px !default;
+$tbar-btn-icon-nrml-line-height: 14px !default;
 $tbar-btn-bgr-minheight: 38px !default;
 $tbar-btn-bgr-line-height: 24px !default;
-$tbar-btn-icon-bgr-line-height: 18px !default;
+$tbar-btn-icon-bgr-line-height: 17px !default;
 $tbar-btn-nrml-minwidth: 30px !default;
 $tbar-btn-weight: $font-weight-normal !default;
 $tbar-btn-bgr-minwidth: 38px !default;

package/SCSS-Themes/navigations/toolbar/tailwind.scss CHANGED Viewed

@@ -111,10 +111,10 @@ $tbar-btn-nrml-mrgn: 0 !default;
 $tbar-popup-padding: 0 !default;
 $tbar-btn-nrml-minheight: 30px !default;
 $tbar-btn-nrml-line-height: 22px !default;
-$tbar-btn-icon-nrml-line-height: 16px !default;
+$tbar-btn-icon-nrml-line-height: 14px !default;
 $tbar-btn-bgr-minheight: 38px !default;
 $tbar-btn-bgr-line-height: 24px !default;
-$tbar-btn-icon-bgr-line-height: 18px !default;
+$tbar-btn-icon-bgr-line-height: 17px !default;
 $tbar-btn-nrml-minwidth: 30px !default;
 $tbar-btn-weight: $font-weight-normal !default;
 $tbar-btn-bgr-minwidth: 38px !default;

package/SCSS-Themes/notifications/message/bootstrap-dark.scss CHANGED Viewed

@@ -164,7 +164,9 @@ $msg-filled-error-close-icon-color: $msg-danger-close-icon-color-alt2 !default;
       justify-content: flex-end;
     }
-    &.e-content-center {
+    &.e-content-center .e-msg-content-wrap {
+      display: flex;
+      flex: 1;
       justify-content: center;
     }

package/SCSS-Themes/notifications/message/bootstrap.scss CHANGED Viewed

@@ -164,7 +164,9 @@ $msg-filled-error-close-icon-color: $msg-danger-close-icon-color-alt2 !default;
       justify-content: flex-end;
     }
-    &.e-content-center {
+    &.e-content-center .e-msg-content-wrap {
+      display: flex;
+      flex: 1;
       justify-content: center;
     }

package/SCSS-Themes/notifications/message/bootstrap4.scss CHANGED Viewed

@@ -164,7 +164,9 @@ $msg-filled-error-close-icon-color: $msg-danger-close-icon-color-alt2 !default;
       justify-content: flex-end;
     }
-    &.e-content-center {
+    &.e-content-center .e-msg-content-wrap {
+      display: flex;
+      flex: 1;
       justify-content: center;
     }

package/SCSS-Themes/notifications/message/bootstrap5-dark.scss CHANGED Viewed

@@ -164,7 +164,9 @@ $msg-filled-error-close-icon-color: $msg-danger-close-icon-color-alt2 !default;
       justify-content: flex-end;
     }
-    &.e-content-center {
+    &.e-content-center .e-msg-content-wrap {
+      display: flex;
+      flex: 1;
       justify-content: center;
     }

package/SCSS-Themes/notifications/message/bootstrap5.scss CHANGED Viewed

@@ -164,7 +164,9 @@ $msg-filled-error-close-icon-color: $msg-danger-close-icon-color-alt2 !default;
       justify-content: flex-end;
     }
-    &.e-content-center {
+    &.e-content-center .e-msg-content-wrap {
+      display: flex;
+      flex: 1;
       justify-content: center;
     }

package/SCSS-Themes/notifications/message/fabric-dark.scss CHANGED Viewed

@@ -164,7 +164,9 @@ $msg-filled-error-close-icon-color: $msg-danger-close-icon-color-alt2 !default;
       justify-content: flex-end;
     }
-    &.e-content-center {
+    &.e-content-center .e-msg-content-wrap {
+      display: flex;
+      flex: 1;
       justify-content: center;
     }

package/SCSS-Themes/notifications/message/fabric.scss CHANGED Viewed

@@ -164,7 +164,9 @@ $msg-filled-error-close-icon-color: $msg-danger-close-icon-color-alt2 !default;
       justify-content: flex-end;
     }
-    &.e-content-center {
+    &.e-content-center .e-msg-content-wrap {
+      display: flex;
+      flex: 1;
       justify-content: center;
     }

package/SCSS-Themes/notifications/message/fluent-dark.scss CHANGED Viewed

@@ -164,7 +164,9 @@ $msg-filled-error-close-icon-color: $msg-danger-close-icon-color-alt2 !default;
       justify-content: flex-end;
     }
-    &.e-content-center {
+    &.e-content-center .e-msg-content-wrap {
+      display: flex;
+      flex: 1;
       justify-content: center;
     }

package/SCSS-Themes/notifications/message/fluent.scss CHANGED Viewed

@@ -164,7 +164,9 @@ $msg-filled-error-close-icon-color: $msg-danger-close-icon-color-alt2 !default;
       justify-content: flex-end;
     }
-    &.e-content-center {
+    &.e-content-center .e-msg-content-wrap {
+      display: flex;
+      flex: 1;
       justify-content: center;
     }

package/SCSS-Themes/notifications/message/highcontrast.scss CHANGED Viewed

@@ -164,7 +164,9 @@ $msg-filled-error-close-icon-color: $msg-danger-close-icon-color-alt2 !default;
       justify-content: flex-end;
     }
-    &.e-content-center {
+    &.e-content-center .e-msg-content-wrap {
+      display: flex;
+      flex: 1;
       justify-content: center;
     }

package/SCSS-Themes/notifications/message/material-dark.scss CHANGED Viewed

@@ -164,7 +164,9 @@ $msg-filled-error-close-icon-color: $msg-danger-close-icon-color-alt2 !default;
       justify-content: flex-end;
     }
-    &.e-content-center {
+    &.e-content-center .e-msg-content-wrap {
+      display: flex;
+      flex: 1;
       justify-content: center;
     }

package/SCSS-Themes/notifications/message/material.scss CHANGED Viewed

@@ -164,7 +164,9 @@ $msg-filled-error-close-icon-color: $msg-danger-close-icon-color-alt2 !default;
       justify-content: flex-end;
     }
-    &.e-content-center {
+    &.e-content-center .e-msg-content-wrap {
+      display: flex;
+      flex: 1;
       justify-content: center;
     }

package/SCSS-Themes/notifications/message/material3-dark.scss CHANGED Viewed

@@ -164,7 +164,9 @@ $msg-filled-error-close-icon-color: $msg-danger-close-icon-color-alt2 !default;
       justify-content: flex-end;
     }
-    &.e-content-center {
+    &.e-content-center .e-msg-content-wrap {
+      display: flex;
+      flex: 1;
       justify-content: center;
     }

package/SCSS-Themes/notifications/message/material3.scss CHANGED Viewed

@@ -164,7 +164,9 @@ $msg-filled-error-close-icon-color: $msg-danger-close-icon-color-alt2 !default;
       justify-content: flex-end;
     }
-    &.e-content-center {
+    &.e-content-center .e-msg-content-wrap {
+      display: flex;
+      flex: 1;
       justify-content: center;
     }

package/SCSS-Themes/notifications/message/tailwind-dark.scss CHANGED Viewed

@@ -164,7 +164,9 @@ $msg-filled-error-close-icon-color: $msg-danger-close-icon-color-alt2 !default;
       justify-content: flex-end;
     }
-    &.e-content-center {
+    &.e-content-center .e-msg-content-wrap {
+      display: flex;
+      flex: 1;
       justify-content: center;
     }

package/SCSS-Themes/notifications/message/tailwind.scss CHANGED Viewed

@@ -164,7 +164,9 @@ $msg-filled-error-close-icon-color: $msg-danger-close-icon-color-alt2 !default;
       justify-content: flex-end;
     }
-    &.e-content-center {
+    &.e-content-center .e-msg-content-wrap {
+      display: flex;
+      flex: 1;
       justify-content: center;
     }

package/SCSS-Themes/notifications/toast/bootstrap-dark.scss CHANGED Viewed

@@ -578,7 +578,12 @@ $toast-danger-hover-box-shadow: 0 6px 12px rgba($base-font, .5) !default;
       &.e-blazor-toast-close-icon,
       &.e-blazor-toast-close-icon:focus,
       &.e-blazor-toast-close-icon:active {
-        background-color: transparent;
+        @if $skin-name == 'Material3' {
+          background: transparent;
+        }
+        @else {
+          background-color: transparent;
+        }
         border: 0;
         box-shadow: none;
         outline: 0;

package/SCSS-Themes/notifications/toast/bootstrap.scss CHANGED Viewed

@@ -576,7 +576,12 @@ $toast-title-font-weight: bold !default;
       &.e-blazor-toast-close-icon,
       &.e-blazor-toast-close-icon:focus,
       &.e-blazor-toast-close-icon:active {
-        background-color: transparent;
+        @if $skin-name == 'Material3' {
+          background: transparent;
+        }
+        @else {
+          background-color: transparent;
+        }
         border: 0;
         box-shadow: none;
         outline: 0;

package/SCSS-Themes/notifications/toast/bootstrap4.scss CHANGED Viewed

@@ -577,7 +577,12 @@ $toast-title-font-weight: bold !default;
       &.e-blazor-toast-close-icon,
       &.e-blazor-toast-close-icon:focus,
       &.e-blazor-toast-close-icon:active {
-        background-color: transparent;
+        @if $skin-name == 'Material3' {
+          background: transparent;
+        }
+        @else {
+          background-color: transparent;
+        }
         border: 0;
         box-shadow: none;
         outline: 0;

package/SCSS-Themes/notifications/toast/bootstrap5-dark.scss CHANGED Viewed

@@ -575,7 +575,12 @@ $toast-danger-hover-box-shadow: $shadow !default;
       &.e-blazor-toast-close-icon,
       &.e-blazor-toast-close-icon:focus,
       &.e-blazor-toast-close-icon:active {
-        background-color: transparent;
+        @if $skin-name == 'Material3' {
+          background: transparent;
+        }
+        @else {
+          background-color: transparent;
+        }
         border: 0;
         box-shadow: none;
         outline: 0;

package/SCSS-Themes/notifications/toast/bootstrap5.scss CHANGED Viewed

@@ -575,7 +575,12 @@ $toast-danger-hover-box-shadow: $shadow !default;
       &.e-blazor-toast-close-icon,
       &.e-blazor-toast-close-icon:focus,
       &.e-blazor-toast-close-icon:active {
-        background-color: transparent;
+        @if $skin-name == 'Material3' {
+          background: transparent;
+        }
+        @else {
+          background-color: transparent;
+        }
         border: 0;
         box-shadow: none;
         outline: 0;

package/SCSS-Themes/notifications/toast/fabric-dark.scss CHANGED Viewed

@@ -565,7 +565,12 @@ $toast-danger-hover-box-shadow: 0 3px 6px 0 rgba($neutral-black, .26) !default;
       &.e-blazor-toast-close-icon,
       &.e-blazor-toast-close-icon:focus,
       &.e-blazor-toast-close-icon:active {
-        background-color: transparent;
+        @if $skin-name == 'Material3' {
+          background: transparent;
+        }
+        @else {
+          background-color: transparent;
+        }
         border: 0;
         box-shadow: none;
         outline: 0;

package/SCSS-Themes/notifications/toast/fabric.scss CHANGED Viewed

@@ -566,7 +566,12 @@ $toast-title-font-weight: bold !default;
       &.e-blazor-toast-close-icon,
       &.e-blazor-toast-close-icon:focus,
       &.e-blazor-toast-close-icon:active {
-        background-color: transparent;
+        @if $skin-name == 'Material3' {
+          background: transparent;
+        }
+        @else {
+          background-color: transparent;
+        }
         border: 0;
         box-shadow: none;
         outline: 0;