npm - @syncfusion/blazor-themes - Versions diffs - 23.2.6 → 24.1.41 - Mend

@syncfusion/blazor-themes 23.2.6 → 24.1.41

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 (450) hide show

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

@@ -91,6 +91,9 @@ $toast-danger-hover-bg-color: #c42818 !default;
 $toast-danger-hover-color: $toast-danger-color !default;
 $toast-danger-hover-box-shadow: 0 3px 6px 0 rgba($neutral-black, .26) !default;
+$toast-close-icon-hover-bg-color: transparent !default;
+$toast-close-icon-hover-color: $theme-tertiary !default;
 //enddefault
 @include export-module('toast-layout') {
@@ -575,6 +578,34 @@ $toast-danger-hover-box-shadow: 0 3px 6px 0 rgba($neutral-black, .26) !default;
         box-shadow: none;
         outline: 0;
       }
+      &.e-blazor-toast-close-icon:focus,
+      &.e-blazor-toast-close-icon:hover {
+        @if $skin-name == 'Material3' {
+          background: $toast-close-icon-hover-bg-color;
+        }
+        @else {
+          background-color: $toast-close-icon-hover-bg-color;
+        }
+        color: $toast-close-icon-hover-color;
+      }
+    }
+    .e-toast-close-icon.e-icons:hover,
+    .e-toast-close-icon.e-icons:focus{
+      @if $skin-name == 'Material3' {
+        background: $toast-close-icon-hover-bg-color;
+        border-radius: $toast-icon-hover-border-radius;
+        height: 32px;
+        margin-top: -6px;
+      }
+      @else {
+        background-color: $toast-close-icon-hover-bg-color;
+      }
+      @if $skin-name == 'material' {
+        border-radius: $toast-icon-hover-border-radius;
+      }
+      color: $toast-close-icon-hover-color;
     }
     &.e-toast-success {

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

@@ -94,6 +94,9 @@ $toast-danger-hover-box-shadow: 0 3px 6px 0 rgba($neutral-black, .26) !default;
 $toast-title-font-weight: bold !default;
+$toast-close-icon-hover-bg-color: transparent !default;
+$toast-close-icon-hover-color: $theme-primary !default;
 @include export-module('toast-layout') {
   /*! toast layout */
@@ -576,6 +579,34 @@ $toast-title-font-weight: bold !default;
         box-shadow: none;
         outline: 0;
       }
+      &.e-blazor-toast-close-icon:focus,
+      &.e-blazor-toast-close-icon:hover {
+        @if $skin-name == 'Material3' {
+          background: $toast-close-icon-hover-bg-color;
+        }
+        @else {
+          background-color: $toast-close-icon-hover-bg-color;
+        }
+        color: $toast-close-icon-hover-color;
+      }
+    }
+    .e-toast-close-icon.e-icons:hover,
+    .e-toast-close-icon.e-icons:focus{
+      @if $skin-name == 'Material3' {
+        background: $toast-close-icon-hover-bg-color;
+        border-radius: $toast-icon-hover-border-radius;
+        height: 32px;
+        margin-top: -6px;
+      }
+      @else {
+        background-color: $toast-close-icon-hover-bg-color;
+      }
+      @if $skin-name == 'material' {
+        border-radius: $toast-icon-hover-border-radius;
+      }
+      color: $toast-close-icon-hover-color;
     }
     &.e-toast-success {

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

@@ -96,6 +96,9 @@ $toast-danger-hover-bg-color: $danger-light !default;
 $toast-danger-hover-color: $danger-bg-color !default;
 $toast-danger-hover-box-shadow: $shadow !default;
+$toast-close-icon-hover-bg-color: $transparent !default;
+$toast-close-icon-hover-color: $icon-color-hover !default;
 // Toast Type Definitions End
 //Theme Variables End
@@ -581,6 +584,34 @@ $toast-danger-hover-box-shadow: $shadow !default;
         box-shadow: none;
         outline: 0;
       }
+      &.e-blazor-toast-close-icon:focus,
+      &.e-blazor-toast-close-icon:hover {
+        @if $skin-name == 'Material3' {
+          background: $toast-close-icon-hover-bg-color;
+        }
+        @else {
+          background-color: $toast-close-icon-hover-bg-color;
+        }
+        color: $toast-close-icon-hover-color;
+      }
+    }
+    .e-toast-close-icon.e-icons:hover,
+    .e-toast-close-icon.e-icons:focus{
+      @if $skin-name == 'Material3' {
+        background: $toast-close-icon-hover-bg-color;
+        border-radius: $toast-icon-hover-border-radius;
+        height: 32px;
+        margin-top: -6px;
+      }
+      @else {
+        background-color: $toast-close-icon-hover-bg-color;
+      }
+      @if $skin-name == 'material' {
+        border-radius: $toast-icon-hover-border-radius;
+      }
+      color: $toast-close-icon-hover-color;
     }
     &.e-toast-success {

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

@@ -96,6 +96,9 @@ $toast-danger-hover-bg-color: $danger-light !default;
 $toast-danger-hover-color: $danger-bg-color !default;
 $toast-danger-hover-box-shadow: $shadow !default;
+$toast-close-icon-hover-bg-color: $transparent !default;
+$toast-close-icon-hover-color: $icon-color-hover !default;
 // Toast Type Definitions End
 //Theme Variables End
@@ -581,6 +584,34 @@ $toast-danger-hover-box-shadow: $shadow !default;
         box-shadow: none;
         outline: 0;
       }
+      &.e-blazor-toast-close-icon:focus,
+      &.e-blazor-toast-close-icon:hover {
+        @if $skin-name == 'Material3' {
+          background: $toast-close-icon-hover-bg-color;
+        }
+        @else {
+          background-color: $toast-close-icon-hover-bg-color;
+        }
+        color: $toast-close-icon-hover-color;
+      }
+    }
+    .e-toast-close-icon.e-icons:hover,
+    .e-toast-close-icon.e-icons:focus{
+      @if $skin-name == 'Material3' {
+        background: $toast-close-icon-hover-bg-color;
+        border-radius: $toast-icon-hover-border-radius;
+        height: 32px;
+        margin-top: -6px;
+      }
+      @else {
+        background-color: $toast-close-icon-hover-bg-color;
+      }
+      @if $skin-name == 'material' {
+        border-radius: $toast-icon-hover-border-radius;
+      }
+      color: $toast-close-icon-hover-color;
     }
     &.e-toast-success {

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

@@ -104,6 +104,9 @@ $toast-danger-hover-box-shadow: none !default;
 $toast-title-font-weight: bold !default;
+$toast-close-icon-hover-bg-color: transparent !default;
+$toast-close-icon-hover-color: $selection-font !default;
 @include export-module('toast-layout') {
   /*! toast layout */
@@ -586,6 +589,34 @@ $toast-title-font-weight: bold !default;
         box-shadow: none;
         outline: 0;
       }
+      &.e-blazor-toast-close-icon:focus,
+      &.e-blazor-toast-close-icon:hover {
+        @if $skin-name == 'Material3' {
+          background: $toast-close-icon-hover-bg-color;
+        }
+        @else {
+          background-color: $toast-close-icon-hover-bg-color;
+        }
+        color: $toast-close-icon-hover-color;
+      }
+    }
+    .e-toast-close-icon.e-icons:hover,
+    .e-toast-close-icon.e-icons:focus{
+      @if $skin-name == 'Material3' {
+        background: $toast-close-icon-hover-bg-color;
+        border-radius: $toast-icon-hover-border-radius;
+        height: 32px;
+        margin-top: -6px;
+      }
+      @else {
+        background-color: $toast-close-icon-hover-bg-color;
+      }
+      @if $skin-name == 'material' {
+        border-radius: $toast-icon-hover-border-radius;
+      }
+      color: $toast-close-icon-hover-color;
     }
     &.e-toast-success {

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

@@ -106,6 +106,10 @@ $toast-danger-hover-bg-color: #ff5d48 !default;
 $toast-danger-hover-color: $message-font !default;
 $toast-danger-hover-box-shadow: 0 3px 5px -1px rgba($grey-black, .2), 0 6px 10px 0 rgba($grey-black, .14), 0 1px 18px 0 rgba($grey-black, .12) !default;
+$toast-close-icon-hover-bg-color: rgba($grey-white, .1) !default;
+$toast-close-icon-hover-color: $grey-dark-font !default;
+$toast-icon-hover-border-radius: 50% !default;
 //enddefault
 @include export-module('toast-layout') {
@@ -590,6 +594,34 @@ $toast-danger-hover-box-shadow: 0 3px 5px -1px rgba($grey-black, .2), 0 6px 10px
         box-shadow: none;
         outline: 0;
       }
+      &.e-blazor-toast-close-icon:focus,
+      &.e-blazor-toast-close-icon:hover {
+        @if $skin-name == 'Material3' {
+          background: $toast-close-icon-hover-bg-color;
+        }
+        @else {
+          background-color: $toast-close-icon-hover-bg-color;
+        }
+        color: $toast-close-icon-hover-color;
+      }
+    }
+    .e-toast-close-icon.e-icons:hover,
+    .e-toast-close-icon.e-icons:focus{
+      @if $skin-name == 'Material3' {
+        background: $toast-close-icon-hover-bg-color;
+        border-radius: $toast-icon-hover-border-radius;
+        height: 32px;
+        margin-top: -6px;
+      }
+      @else {
+        background-color: $toast-close-icon-hover-bg-color;
+      }
+      @if $skin-name == 'material' {
+        border-radius: $toast-icon-hover-border-radius;
+      }
+      color: $toast-close-icon-hover-color;
     }
     &.e-toast-success {

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

@@ -108,6 +108,10 @@ $toast-danger-hover-box-shadow: 0 3px 6px 0 rgba($grey-black, .26) !default;
 $toast-title-font-weight: bold !default;
+$toast-close-icon-hover-bg-color: $grey-300 !default;
+$toast-close-icon-hover-color: $grey-light-font !default;
+$toast-icon-hover-border-radius: 50% !default;
 @include export-module('toast-layout') {
   /*! toast layout */
@@ -590,6 +594,34 @@ $toast-title-font-weight: bold !default;
         box-shadow: none;
         outline: 0;
       }
+      &.e-blazor-toast-close-icon:focus,
+      &.e-blazor-toast-close-icon:hover {
+        @if $skin-name == 'Material3' {
+          background: $toast-close-icon-hover-bg-color;
+        }
+        @else {
+          background-color: $toast-close-icon-hover-bg-color;
+        }
+        color: $toast-close-icon-hover-color;
+      }
+    }
+    .e-toast-close-icon.e-icons:hover,
+    .e-toast-close-icon.e-icons:focus{
+      @if $skin-name == 'Material3' {
+        background: $toast-close-icon-hover-bg-color;
+        border-radius: $toast-icon-hover-border-radius;
+        height: 32px;
+        margin-top: -6px;
+      }
+      @else {
+        background-color: $toast-close-icon-hover-bg-color;
+      }
+      @if $skin-name == 'material' {
+        border-radius: $toast-icon-hover-border-radius;
+      }
+      color: $toast-close-icon-hover-color;
     }
     &.e-toast-success {

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

@@ -100,6 +100,10 @@ $toast-danger-hover-bg-color: rgba($danger-dark) !default;
 $toast-danger-hover-color: rgba($danger-bg-color) !default;
 $toast-danger-hover-box-shadow: rgba($shadow) !default;
+$toast-close-icon-hover-bg-color: rgba($grey-white, .18) !default;
+$toast-close-icon-hover-color: rgba($on-primary) !default;
+$toast-icon-hover-border-radius: 50% !default;
 // Toast Type Definitions End
 //icon Variable
 $toast-close-icon: '\e7e7' !default;
@@ -592,6 +596,34 @@ $toast-warning-icon: '\e88b' !default;
         box-shadow: none;
         outline: 0;
       }
+      &.e-blazor-toast-close-icon:focus,
+      &.e-blazor-toast-close-icon:hover {
+        @if $skin-name == 'Material3' {
+          background: $toast-close-icon-hover-bg-color;
+        }
+        @else {
+          background-color: $toast-close-icon-hover-bg-color;
+        }
+        color: $toast-close-icon-hover-color;
+      }
+    }
+    .e-toast-close-icon.e-icons:hover,
+    .e-toast-close-icon.e-icons:focus{
+      @if $skin-name == 'Material3' {
+        background: $toast-close-icon-hover-bg-color;
+        border-radius: $toast-icon-hover-border-radius;
+        height: 32px;
+        margin-top: -6px;
+      }
+      @else {
+        background-color: $toast-close-icon-hover-bg-color;
+      }
+      @if $skin-name == 'material' {
+        border-radius: $toast-icon-hover-border-radius;
+      }
+      color: $toast-close-icon-hover-color;
     }
     &.e-toast-success {

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

@@ -100,6 +100,10 @@ $toast-danger-hover-bg-color: rgba($danger-dark) !default;
 $toast-danger-hover-color: rgba($danger-bg-color) !default;
 $toast-danger-hover-box-shadow: rgba($shadow) !default;
+$toast-close-icon-hover-bg-color: rgba($grey-white, .18) !default;
+$toast-close-icon-hover-color: rgba($on-primary) !default;
+$toast-icon-hover-border-radius: 50% !default;
 // Toast Type Definitions End
 //icon Variable
 $toast-close-icon: '\e7e7' !default;
@@ -592,6 +596,34 @@ $toast-warning-icon: '\e88b' !default;
         box-shadow: none;
         outline: 0;
       }
+      &.e-blazor-toast-close-icon:focus,
+      &.e-blazor-toast-close-icon:hover {
+        @if $skin-name == 'Material3' {
+          background: $toast-close-icon-hover-bg-color;
+        }
+        @else {
+          background-color: $toast-close-icon-hover-bg-color;
+        }
+        color: $toast-close-icon-hover-color;
+      }
+    }
+    .e-toast-close-icon.e-icons:hover,
+    .e-toast-close-icon.e-icons:focus{
+      @if $skin-name == 'Material3' {
+        background: $toast-close-icon-hover-bg-color;
+        border-radius: $toast-icon-hover-border-radius;
+        height: 32px;
+        margin-top: -6px;
+      }
+      @else {
+        background-color: $toast-close-icon-hover-bg-color;
+      }
+      @if $skin-name == 'material' {
+        border-radius: $toast-icon-hover-border-radius;
+      }
+      color: $toast-close-icon-hover-color;
     }
     &.e-toast-success {

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

@@ -96,6 +96,9 @@ $toast-danger-hover-bg-color: $danger-light !default;
 $toast-danger-hover-color: $toast-danger-color !default;
 $toast-danger-hover-box-shadow: $shadow !default;
+$toast-close-icon-hover-bg-color: $transparent !default;
+$toast-close-icon-hover-color: $icon-color-hover !default;
 // Toast Type Definitions End
 //Theme Variables End
@@ -581,6 +584,34 @@ $toast-danger-hover-box-shadow: $shadow !default;
         box-shadow: none;
         outline: 0;
       }
+      &.e-blazor-toast-close-icon:focus,
+      &.e-blazor-toast-close-icon:hover {
+        @if $skin-name == 'Material3' {
+          background: $toast-close-icon-hover-bg-color;
+        }
+        @else {
+          background-color: $toast-close-icon-hover-bg-color;
+        }
+        color: $toast-close-icon-hover-color;
+      }
+    }
+    .e-toast-close-icon.e-icons:hover,
+    .e-toast-close-icon.e-icons:focus{
+      @if $skin-name == 'Material3' {
+        background: $toast-close-icon-hover-bg-color;
+        border-radius: $toast-icon-hover-border-radius;
+        height: 32px;
+        margin-top: -6px;
+      }
+      @else {
+        background-color: $toast-close-icon-hover-bg-color;
+      }
+      @if $skin-name == 'material' {
+        border-radius: $toast-icon-hover-border-radius;
+      }
+      color: $toast-close-icon-hover-color;
     }
     &.e-toast-success {

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

@@ -96,6 +96,9 @@ $toast-danger-hover-bg-color: $danger-light !default;
 $toast-danger-hover-color: $toast-danger-color !default;
 $toast-danger-hover-box-shadow: $shadow !default;
+$toast-close-icon-hover-bg-color: $transparent !default;
+$toast-close-icon-hover-color: $icon-color-hover !default;
 // Toast Type Definitions End
 //Theme Variables End
@@ -581,6 +584,34 @@ $toast-danger-hover-box-shadow: $shadow !default;
         box-shadow: none;
         outline: 0;
       }
+      &.e-blazor-toast-close-icon:focus,
+      &.e-blazor-toast-close-icon:hover {
+        @if $skin-name == 'Material3' {
+          background: $toast-close-icon-hover-bg-color;
+        }
+        @else {
+          background-color: $toast-close-icon-hover-bg-color;
+        }
+        color: $toast-close-icon-hover-color;
+      }
+    }
+    .e-toast-close-icon.e-icons:hover,
+    .e-toast-close-icon.e-icons:focus{
+      @if $skin-name == 'Material3' {
+        background: $toast-close-icon-hover-bg-color;
+        border-radius: $toast-icon-hover-border-radius;
+        height: 32px;
+        margin-top: -6px;
+      }
+      @else {
+        background-color: $toast-close-icon-hover-bg-color;
+      }
+      @if $skin-name == 'material' {
+        border-radius: $toast-icon-hover-border-radius;
+      }
+      color: $toast-close-icon-hover-color;
     }
     &.e-toast-success {