@syncfusion/ej2-notifications - npm Package Compare versions

Comparing version 31.2.2 to 31.2.12

dist/ej2-notifications.min.js

 /*!
 *  filename: ej2-notifications.min.js
-*  version : 31.2.2
+*  version : 31.2.12
 *  Copyright Syncfusion Inc. 2001 - 2025. All rights reserved.
@@ -5,0 +5,0 @@ *  Use of this code is subject to the terms of our license.

dist/ej2-notifications.umd.min.js

 /*!
 *  filename: ej2-notifications.umd.min.js
-*  version : 31.2.2
+*  version : 31.2.12
 *  Copyright Syncfusion Inc. 2001 - 2025. All rights reserved.
@@ -5,0 +5,0 @@ *  Use of this code is subject to the terms of our license.

dist/global/ej2-notifications.min.js

 /*!
 *  filename: ej2-notifications.min.js
-*  version : 31.2.2
+*  version : 31.2.12
 *  Copyright Syncfusion Inc. 2001 - 2025. All rights reserved.
@@ -5,0 +5,0 @@ *  Use of this code is subject to the terms of our license.

dist/global/index.d.ts

 /*!
 *  filename: index.d.ts
-*  version : 31.2.2
+*  version : 31.2.12
 *  Copyright Syncfusion Inc. 2001 - 2025. All rights reserved.
@@ -5,0 +5,0 @@ *  Use of this code is subject to the terms of our license.

package.json

 {
   "name": "@syncfusion/ej2-notifications",
-  "version": "31.2.2",
+  "version": "31.2.12",
   "description": "A package of Essential JS 2 notification components such as Toast and Badge which used to notify important information to end-users.",
@@ -11,5 +11,5 @@ "author": "Syncfusion Inc.",
   "dependencies": {
-    "@syncfusion/ej2-base": "~31.2.2",
-    "@syncfusion/ej2-buttons": "~31.2.2",
-    "@syncfusion/ej2-popups": "~31.2.2"
+    "@syncfusion/ej2-base": "~31.2.12",
+    "@syncfusion/ej2-buttons": "~31.2.12",
+    "@syncfusion/ej2-popups": "~31.2.12"
   },
@@ -16,0 +16,0 @@ "devDependencies": {},

README.md

@@ -94,3 +94,3 @@ # JavaScript Notification Controls
   <a href="https://www.syncfusion.com/">
-    <img src="https://raw.githubusercontent.com/SyncfusionExamples/nuget-img/master/syncfusion/syncfusion-trusted-companies.webp" alt="Syncfusion logo">
+    <img src="https://ej2.syncfusion.com/home/images/trusted_companies.png" alt="Syncfusion logo">
   </a>
@@ -119,2 +119,10 @@ </p>
 
+## Resources
+
+* [Theme Studio](https://ej2.syncfusion.com/themestudio/)
+* [Custom Resource Generator](https://crg.syncfusion.com/)
+* [What's New](https://www.syncfusion.com/products/whatsnew/essential-js2?utm_medium=listing&utm_source=github)
+* [Road Map](https://www.syncfusion.com/products/roadmap/essential-js2?utm_medium=listing&utm_source=github)
+* [E-Books](https://www.syncfusion.com/ebooks?tag=javascript&utm_medium=listing&utm_source=github)
+
 ## Support
@@ -136,3 +144,3 @@
 
-> This is a commercial product and requires a paid license for possession or use. Syncfusion’s licensed software, including this component, is subject to the terms and conditions of Syncfusion's [EULA](https://www.syncfusion.com/eula/es/). To acquire a license for 80+ [JavaScript UI controls](https://www.syncfusion.com/javascript-ui-controls), you can [purchase](https://www.syncfusion.com/sales/products) or [start a free 30-day trial](https://www.syncfusion.com/account/manage-trials/start-trials).
+> This is a commercial product and requires a paid license for possession or use. Syncfusion<sup>®</sup> licensed software, including this component, is subject to the terms and conditions of Syncfusion<sup>®</sup> [EULA](https://www.syncfusion.com/eula/es/). To acquire a license for 140+ [JavaScript UI controls](https://www.syncfusion.com/javascript-ui-controls), you can [purchase](https://www.syncfusion.com/sales/products) or [start a free 30-day trial](https://www.syncfusion.com/account/manage-trials/start-trials).
 
@@ -139,0 +147,0 @@ > A [free community license](https://www.syncfusion.com/products/communitylicense) is also available for companies and individuals whose organizations have less than $1 million USD in annual gross revenue and five or fewer developers.

styles/bootstrap5-dark-lite.css

@@ -346,6 +346,6 @@ .e-badge {
   padding: 0;
-  padding-bottom: 12px;
+  padding-bottom: 8px;
   padding-left: 12px;
   padding-right: 12px;
-  padding-top: 12px;
+  padding-top: 8px;
 }
@@ -390,3 +390,3 @@ .e-toast-container .e-toast .e-toast-message .e-toast-title:last-child,
 .e-toast-container .e-toast.e-toast-header-icon .e-toast-message .e-toast-content:first-child {
-  padding-left: 48px;
+  padding-left: 44px;
 }
@@ -420,4 +420,4 @@ .e-toast-container .e-toast.e-toast-header-close-icon .e-toast-message .e-toast-title:first-child,
           align-items: center;
-  font-size: 14px;
-  height: 20px;
+  font-size: 18px;
+  height: 18px;
   -webkit-box-pack: center;
@@ -427,6 +427,8 @@ -ms-flex-pack: center;
   margin-right: 14px;
-  width: 20px;
-  left: 16px;
-  margin-left: 13px;
-  margin-top: 13px;
+  width: 18px;
+  left: 0;
+  margin-left: 12px;
+  margin-top: 15px;
+  padding-bottom: 6px;
+  position: absolute;
 }
@@ -433,0 +435,0 @@ .e-toast-container .e-toast .e-toast-progress {

styles/bootstrap5-dark.css

@@ -392,6 +392,6 @@ .e-badge {
   padding: 0;
-  padding-bottom: 12px;
+  padding-bottom: 8px;
   padding-left: 12px;
   padding-right: 12px;
-  padding-top: 12px;
+  padding-top: 8px;
 }
@@ -436,3 +436,3 @@ .e-toast-container .e-toast .e-toast-message .e-toast-title:last-child,
 .e-toast-container .e-toast.e-toast-header-icon .e-toast-message .e-toast-content:first-child {
-  padding-left: 48px;
+  padding-left: 44px;
 }
@@ -466,4 +466,4 @@ .e-toast-container .e-toast.e-toast-header-close-icon .e-toast-message .e-toast-title:first-child,
           align-items: center;
-  font-size: 14px;
-  height: 20px;
+  font-size: 18px;
+  height: 18px;
   -webkit-box-pack: center;
@@ -473,6 +473,8 @@ -ms-flex-pack: center;
   margin-right: 14px;
-  width: 20px;
-  left: 16px;
-  margin-left: 13px;
-  margin-top: 13px;
+  width: 18px;
+  left: 0;
+  margin-left: 12px;
+  margin-top: 15px;
+  padding-bottom: 6px;
+  position: absolute;
 }
@@ -766,8 +768,9 @@ .e-toast-container .e-toast .e-toast-progress {
 .e-toast-container.e-bigger .e-toast .e-toast-icon {
-  font-size: 18px;
-  height: 24px;
+  font-size: 20px;
+  height: 20px;
   margin-right: 16px;
-  width: 24px;
-  left: 18px;
-  margin-top: 13px;
+  width: 20px;
+  left: 0;
+  margin-top: 14px;
+  margin-left: 12px;
 }
@@ -774,0 +777,0 @@ .e-bigger .e-toast-container .e-toast .e-toast-progress,

styles/bootstrap5-lite.css

@@ -346,6 +346,6 @@ .e-badge {
   padding: 0;
-  padding-bottom: 12px;
+  padding-bottom: 8px;
   padding-left: 12px;
   padding-right: 12px;
-  padding-top: 12px;
+  padding-top: 8px;
 }
@@ -390,3 +390,3 @@ .e-toast-container .e-toast .e-toast-message .e-toast-title:last-child,
 .e-toast-container .e-toast.e-toast-header-icon .e-toast-message .e-toast-content:first-child {
-  padding-left: 48px;
+  padding-left: 44px;
 }
@@ -420,4 +420,4 @@ .e-toast-container .e-toast.e-toast-header-close-icon .e-toast-message .e-toast-title:first-child,
           align-items: center;
-  font-size: 14px;
-  height: 20px;
+  font-size: 18px;
+  height: 18px;
   -webkit-box-pack: center;
@@ -427,6 +427,8 @@ -ms-flex-pack: center;
   margin-right: 14px;
-  width: 20px;
-  left: 16px;
-  margin-left: 13px;
-  margin-top: 13px;
+  width: 18px;
+  left: 0;
+  margin-left: 12px;
+  margin-top: 15px;
+  padding-bottom: 6px;
+  position: absolute;
 }
@@ -433,0 +435,0 @@ .e-toast-container .e-toast .e-toast-progress {

styles/bootstrap5.3-lite.css

@@ -336,6 +336,6 @@
   padding: 0;
-  padding-bottom: 12px;
+  padding-bottom: 8px;
   padding-left: 12px;
   padding-right: 12px;
-  padding-top: 12px;
+  padding-top: 8px;
 }
@@ -380,3 +380,3 @@ .e-toast-container .e-toast .e-toast-message .e-toast-title:last-child,
 .e-toast-container .e-toast.e-toast-header-icon .e-toast-message .e-toast-content:first-child {
-  padding-left: 48px;
+  padding-left: 44px;
 }
@@ -410,4 +410,4 @@ .e-toast-container .e-toast.e-toast-header-close-icon .e-toast-message .e-toast-title:first-child,
           align-items: center;
-  font-size: 14px;
-  height: 20px;
+  font-size: 18px;
+  height: 18px;
   -webkit-box-pack: center;
@@ -417,6 +417,8 @@ -ms-flex-pack: center;
   margin-right: 14px;
-  width: 20px;
-  left: 16px;
-  margin-left: 13px;
-  margin-top: 13px;
+  width: 18px;
+  left: 0;
+  margin-left: 12px;
+  margin-top: 15px;
+  padding-bottom: 6px;
+  position: absolute;
 }
@@ -504,3 +506,3 @@ .e-toast-container .e-toast .e-toast-progress {
   color: var(--color-sf-info-dark);
-  border-color: var(--color-sf-info-dark);
+  border-color: var(--color-sf-info);
 }
@@ -528,3 +530,3 @@ .e-toast-container .e-toast.e-toast-info .e-toast-message .e-toast-content {
   color: var(--color-sf-warning-dark);
-  border-color: var(--color-sf-warning-dark);
+  border-color: var(--color-sf-border-warning);
 }
@@ -531,0 +533,0 @@ .e-toast-container .e-toast.e-toast-warning .e-toast-message .e-toast-content {

styles/bootstrap5.3.css

@@ -336,6 +336,6 @@
   padding: 0;
-  padding-bottom: 12px;
+  padding-bottom: 8px;
   padding-left: 12px;
   padding-right: 12px;
-  padding-top: 12px;
+  padding-top: 8px;
 }
@@ -380,3 +380,3 @@ .e-toast-container .e-toast .e-toast-message .e-toast-title:last-child,
 .e-toast-container .e-toast.e-toast-header-icon .e-toast-message .e-toast-content:first-child {
-  padding-left: 48px;
+  padding-left: 44px;
 }
@@ -410,4 +410,4 @@ .e-toast-container .e-toast.e-toast-header-close-icon .e-toast-message .e-toast-title:first-child,
           align-items: center;
-  font-size: 14px;
-  height: 20px;
+  font-size: 18px;
+  height: 18px;
   -webkit-box-pack: center;
@@ -417,6 +417,8 @@ -ms-flex-pack: center;
   margin-right: 14px;
-  width: 20px;
-  left: 16px;
-  margin-left: 13px;
-  margin-top: 13px;
+  width: 18px;
+  left: 0;
+  margin-left: 12px;
+  margin-top: 15px;
+  padding-bottom: 6px;
+  position: absolute;
 }
@@ -504,3 +506,3 @@ .e-toast-container .e-toast .e-toast-progress {
   color: var(--color-sf-info-dark);
-  border-color: var(--color-sf-info-dark);
+  border-color: var(--color-sf-info);
 }
@@ -528,3 +530,3 @@ .e-toast-container .e-toast.e-toast-info .e-toast-message .e-toast-content {
   color: var(--color-sf-warning-dark);
-  border-color: var(--color-sf-warning-dark);
+  border-color: var(--color-sf-border-warning);
 }
@@ -712,8 +714,9 @@ .e-toast-container .e-toast.e-toast-warning .e-toast-message .e-toast-content {
 .e-toast-container.e-bigger .e-toast .e-toast-icon {
-  font-size: 18px;
-  height: 24px;
+  font-size: 20px;
+  height: 20px;
   margin-right: 16px;
-  width: 24px;
-  left: 18px;
-  margin-top: 13px;
+  width: 20px;
+  left: 0;
+  margin-top: 14px;
+  margin-left: 12px;
 }
@@ -720,0 +723,0 @@ .e-bigger .e-toast-container .e-toast .e-toast-progress,

styles/bootstrap5.css

@@ -392,6 +392,6 @@ .e-badge {
   padding: 0;
-  padding-bottom: 12px;
+  padding-bottom: 8px;
   padding-left: 12px;
   padding-right: 12px;
-  padding-top: 12px;
+  padding-top: 8px;
 }
@@ -436,3 +436,3 @@ .e-toast-container .e-toast .e-toast-message .e-toast-title:last-child,
 .e-toast-container .e-toast.e-toast-header-icon .e-toast-message .e-toast-content:first-child {
-  padding-left: 48px;
+  padding-left: 44px;
 }
@@ -466,4 +466,4 @@ .e-toast-container .e-toast.e-toast-header-close-icon .e-toast-message .e-toast-title:first-child,
           align-items: center;
-  font-size: 14px;
-  height: 20px;
+  font-size: 18px;
+  height: 18px;
   -webkit-box-pack: center;
@@ -473,6 +473,8 @@ -ms-flex-pack: center;
   margin-right: 14px;
-  width: 20px;
-  left: 16px;
-  margin-left: 13px;
-  margin-top: 13px;
+  width: 18px;
+  left: 0;
+  margin-left: 12px;
+  margin-top: 15px;
+  padding-bottom: 6px;
+  position: absolute;
 }
@@ -766,8 +768,9 @@ .e-toast-container .e-toast .e-toast-progress {
 .e-toast-container.e-bigger .e-toast .e-toast-icon {
-  font-size: 18px;
-  height: 24px;
+  font-size: 20px;
+  height: 20px;
   margin-right: 16px;
-  width: 24px;
-  left: 18px;
-  margin-top: 13px;
+  width: 20px;
+  left: 0;
+  margin-top: 14px;
+  margin-left: 12px;
 }
@@ -774,0 +777,0 @@ .e-bigger .e-toast-container .e-toast .e-toast-progress,

styles/fluent2-lite.css

@@ -294,3 +294,3 @@
 .e-toast-container.e-rtl .e-toast .e-toast-icon {
-  margin-left: 12px;
+  margin-left: 10px;
   margin-right: initial;
@@ -310,3 +310,3 @@ }
   overflow: hidden;
-  padding: 18px;
+  padding: 16px;
   position: relative;
@@ -398,4 +398,5 @@ }
           justify-content: center;
-  margin-right: 12px;
+  margin-right: 10px;
   width: 20px;
+  margin-top: 2px;
 }
@@ -471,3 +472,3 @@ .e-toast-container .e-toast .e-toast-progress {
 .e-toast-container .e-toast.e-toast-success:hover {
-  background-color: var(--color-sf-msg-success-bg-color);
+  background-color: var(--color-sf-success-light-alt);
   -webkit-box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.14), 0 0 2px 0 rgba(0, 0, 0, 0.12);
@@ -494,3 +495,3 @@ box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.14), 0 0 2px 0 rgba(0, 0, 0, 0.12);
 .e-toast-container .e-toast.e-toast-info:hover {
-  background-color: var(--color-sf-msg-info-bg-color);
+  background-color: var(--color-sf-info-light-alt);
   -webkit-box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.14), 0 0 2px 0 rgba(0, 0, 0, 0.12);
@@ -517,3 +518,3 @@ box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.14), 0 0 2px 0 rgba(0, 0, 0, 0.12);
 .e-toast-container .e-toast.e-toast-warning:hover {
-  background-color: var(--color-sf-msg-warning-bg-color);
+  background-color: var(--color-sf-warning-light-alt);
   -webkit-box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.14), 0 0 2px 0 rgba(0, 0, 0, 0.12);
@@ -540,3 +541,3 @@ box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.14), 0 0 2px 0 rgba(0, 0, 0, 0.12);
 .e-toast-container .e-toast.e-toast-danger:hover {
-  background-color: var(--color-sf-msg-danger-bg-color);
+  background-color: var(--color-sf-danger-light-alt);
   -webkit-box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.14), 0 0 2px 0 rgba(0, 0, 0, 0.12);
@@ -543,0 +544,0 @@ box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.14), 0 0 2px 0 rgba(0, 0, 0, 0.12);

styles/fluent2.css

@@ -340,3 +340,3 @@
 .e-toast-container.e-rtl .e-toast .e-toast-icon {
-  margin-left: 12px;
+  margin-left: 10px;
   margin-right: initial;
@@ -356,3 +356,3 @@ }
   overflow: hidden;
-  padding: 18px;
+  padding: 16px;
   position: relative;
@@ -444,4 +444,5 @@ }
           justify-content: center;
-  margin-right: 12px;
+  margin-right: 10px;
   width: 20px;
+  margin-top: 2px;
 }
@@ -517,3 +518,3 @@ .e-toast-container .e-toast .e-toast-progress {
 .e-toast-container .e-toast.e-toast-success:hover {
-  background-color: var(--color-sf-msg-success-bg-color);
+  background-color: var(--color-sf-success-light-alt);
   -webkit-box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.14), 0 0 2px 0 rgba(0, 0, 0, 0.12);
@@ -540,3 +541,3 @@ box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.14), 0 0 2px 0 rgba(0, 0, 0, 0.12);
 .e-toast-container .e-toast.e-toast-info:hover {
-  background-color: var(--color-sf-msg-info-bg-color);
+  background-color: var(--color-sf-info-light-alt);
   -webkit-box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.14), 0 0 2px 0 rgba(0, 0, 0, 0.12);
@@ -563,3 +564,3 @@ box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.14), 0 0 2px 0 rgba(0, 0, 0, 0.12);
 .e-toast-container .e-toast.e-toast-warning:hover {
-  background-color: var(--color-sf-msg-warning-bg-color);
+  background-color: var(--color-sf-warning-light-alt);
   -webkit-box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.14), 0 0 2px 0 rgba(0, 0, 0, 0.12);
@@ -586,3 +587,3 @@ box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.14), 0 0 2px 0 rgba(0, 0, 0, 0.12);
 .e-toast-container .e-toast.e-toast-danger:hover {
-  background-color: var(--color-sf-msg-danger-bg-color);
+  background-color: var(--color-sf-danger-light-alt);
   -webkit-box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.14), 0 0 2px 0 rgba(0, 0, 0, 0.12);
@@ -719,3 +720,3 @@ box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.14), 0 0 2px 0 rgba(0, 0, 0, 0.12);
 .e-toast-container.e-bigger .e-toast .e-toast-icon {
-  font-size: 18px;
+  font-size: 12px;
   height: 24px;
@@ -722,0 +723,0 @@ margin-right: 16px;

styles/material3-dark-lite.css

@@ -354,3 +354,3 @@
   font-size: 16px;
-  font-weight: 600;
+  font-weight: 500;
   letter-spacing: 0.5px;
@@ -357,0 +357,0 @@ }

styles/material3-dark.css

@@ -400,3 +400,3 @@
   font-size: 16px;
-  font-weight: 600;
+  font-weight: 500;
   letter-spacing: 0.5px;
@@ -403,0 +403,0 @@ }

styles/material3-lite.css

@@ -356,3 +356,3 @@
   font-size: 16px;
-  font-weight: 600;
+  font-weight: 500;
   letter-spacing: 0.5px;
@@ -359,0 +359,0 @@ }

styles/material3.css

@@ -402,3 +402,3 @@
   font-size: 16px;
-  font-weight: 600;
+  font-weight: 500;
   letter-spacing: 0.5px;
@@ -405,0 +405,0 @@ }

styles/toast/_bigger.scss

@@ -150,4 +150,5 @@ @include export-module('toast-bigger') {
         @if $skin-name == 'bootstrap5' or $skin-name == 'bootstrap5.3' {
-          left: 18px;
-          margin-top: 13px;
+          left: 0;
+          margin-top: 14px;
+          margin-left: 12px;
         }
@@ -154,0 +155,0 @@ }

styles/toast/_bootstrap5-definition.scss

 //Layout Variables Start
 //Mouse Mode Start
-$toast-icon-nrml-height: 20px !default;
-$toast-icon-nrml-width: 20px !default;
-$toast-icon-nrml-size: $text-sm !default;
+$toast-icon-nrml-height: 18px !default;
+$toast-icon-nrml-width: 18px !default;
+$toast-icon-nrml-size: 18px !default;
 $toast-icon-nrml-right-margin: 14px !default;
@@ -25,5 +25,5 @@ $toast-close-icon-nrml-height: 20px !default;
 //Touch Mode Start
-$toast-icon-bgr-height: 24px !default;
-$toast-icon-bgr-width: 24px !default;
-$toast-icon-bgr-size: 18px !default;
+$toast-icon-bgr-height: 20px !default;
+$toast-icon-bgr-width: 20px !default;
+$toast-icon-bgr-size: 20px !default;
 $toast-icon-bgr-right-margin: 16px !default;
@@ -30,0 +30,0 @@ $toast-close-icon-bgr-height: 24px !default;

styles/toast/_bootstrap5.3-definition.scss

 //Layout Variables Start
 //Mouse Mode Start
-$toast-icon-nrml-height: 20px !default;
-$toast-icon-nrml-width: 20px !default;
-$toast-icon-nrml-size: $text-sm !default;
+$toast-icon-nrml-height: 18px !default;
+$toast-icon-nrml-width: 18px !default;
+$toast-icon-nrml-size: 18px !default;
 $toast-icon-nrml-right-margin: 14px !default;
@@ -25,5 +25,5 @@ $toast-close-icon-nrml-height: 20px !default;
 //Touch Mode Start
-$toast-icon-bgr-height: 24px !default;
-$toast-icon-bgr-width: 24px !default;
-$toast-icon-bgr-size: 18px !default;
+$toast-icon-bgr-height: 20px !default;
+$toast-icon-bgr-width: 20px !default;
+$toast-icon-bgr-size: 20px !default;
 $toast-icon-bgr-right-margin: 16px !default;
@@ -75,3 +75,3 @@ $toast-close-icon-bgr-height: 24px !default;
 $toast-info-title-color: $info-dark !default;
-$toast-info-title-border-color: $info-dark !default;
+$toast-info-title-border-color: $info !default;
 $toast-info-icon-color: $info-dark !default;
@@ -86,3 +86,3 @@ $toast-info-content-color: $info-dark !default;
 $toast-warning-title-color: $warning-dark !default;
-$toast-warning-title-border-color: $warning-dark !default;
+$toast-warning-title-border-color: $border-warning !default;
 $toast-warning-icon-color: $warning-dark !default;
@@ -89,0 +89,0 @@ $toast-warning-content-color: $warning-dark !default;

styles/toast/_fluent2-definition.scss

@@ -6,3 +6,3 @@ //Layout Variables Start
 $toast-icon-nrml-size: $text-base !default;
-$toast-icon-nrml-right-margin: 12px !default;
+$toast-icon-nrml-right-margin: 10px !default;
 $toast-close-icon-nrml-height: 20px !default;
@@ -14,3 +14,3 @@ $toast-close-icon-nrml-width: 20px !default;
 $toast-nrml-min-height: 48px !default;
-$toast-nrml-padding: 18px !default;
+$toast-nrml-padding: 16px !default;
 $toast-action-btn-nrml-padding: 8px 0 0 8px !default;
@@ -29,3 +29,3 @@ $toast-action-btn-nrml-margin: 10px !default;
 $toast-icon-bgr-width: 24px !default;
-$toast-icon-bgr-size: 18px !default;
+$toast-icon-bgr-size: 12px !default;
 $toast-icon-bgr-right-margin: 16px !default;
@@ -69,3 +69,3 @@ $toast-close-icon-bgr-height: 24px !default;
 $toast-success-content-color: $msg-success-color !default;
-$toast-success-hover-bg-color: $msg-success-bg-color !default;
+$toast-success-hover-bg-color: $success-light-alt !default;
 $toast-success-hover-color: $msg-success-color !default;
@@ -79,3 +79,3 @@ $toast-success-hover-box-shadow: $shadow !default;
 $toast-info-content-color: $msg-info-color !default;
-$toast-info-hover-bg-color: $msg-info-bg-color !default;
+$toast-info-hover-bg-color: $info-light-alt !default;
 $toast-info-hover-color:  $msg-info-color !default;
@@ -89,3 +89,3 @@ $toast-info-hover-box-shadow: $shadow !default;
 $toast-warning-content-color: $msg-warning-color !default;
-$toast-warning-hover-bg-color: $msg-warning-bg-color !default;
+$toast-warning-hover-bg-color: $warning-light-alt !default;
 $toast-warning-hover-color: $msg-warning-color !default;
@@ -99,3 +99,3 @@ $toast-warning-hover-box-shadow: $shadow !default;
 $toast-danger-content-color: $msg-danger-color !default;
-$toast-danger-hover-bg-color: $msg-danger-bg-color !default;
+$toast-danger-hover-bg-color: $danger-light-alt !default;
 $toast-danger-hover-color: $msg-danger-color !default;
@@ -102,0 +102,0 @@ $toast-danger-hover-box-shadow: $shadow !default;

styles/toast/_layout.scss

@@ -127,6 +127,6 @@ @include export-module('toast-layout') {
             @if $skin-name == 'bootstrap5' or $skin-name == 'bootstrap5.3' {
-              padding-bottom: 12px;
+              padding-bottom: 8px;
               padding-left: 12px;
               padding-right: 12px;
-              padding-top: 12px;
+              padding-top: 8px;
             }
@@ -199,3 +199,3 @@ }
               @if $skin-name == 'bootstrap5' or $skin-name == 'bootstrap5.3' {
-                padding-left: 48px;
+                padding-left: 44px;
               }
@@ -247,6 +247,11 @@ }
         @if $skin-name == 'bootstrap5' or $skin-name == 'bootstrap5.3' {
-          left: 16px;
-          margin-left: 13px;
-          margin-top: 13px;
+          left: 0;
+          margin-left: 12px;
+          margin-top: 15px;
+          padding-bottom: 6px;
+          position: absolute;
         }
+        @if $skin-name == 'fluent2' {
+          margin-top: 2px;
+        }
       }
@@ -253,0 +258,0 @@

styles/toast/_material3-definition.scss

@@ -41,3 +41,3 @@ //Layout Variables Start
 $toast-font-bgr-size: $text-sm !default;
-$toast-title-font-weight: $font-weight-medium !default;
+$toast-title-font-weight: 500 !default;
 
@@ -44,0 +44,0 @@ //Touch Mode End

styles/toast/bootstrap5-dark.css

@@ -136,6 +136,6 @@ .e-toast .e-toast-close-icon::before {
   padding: 0;
-  padding-bottom: 12px;
+  padding-bottom: 8px;
   padding-left: 12px;
   padding-right: 12px;
-  padding-top: 12px;
+  padding-top: 8px;
 }
@@ -180,3 +180,3 @@ .e-toast-container .e-toast .e-toast-message .e-toast-title:last-child,
 .e-toast-container .e-toast.e-toast-header-icon .e-toast-message .e-toast-content:first-child {
-  padding-left: 48px;
+  padding-left: 44px;
 }
@@ -210,4 +210,4 @@ .e-toast-container .e-toast.e-toast-header-close-icon .e-toast-message .e-toast-title:first-child,
           align-items: center;
-  font-size: 14px;
-  height: 20px;
+  font-size: 18px;
+  height: 18px;
   -webkit-box-pack: center;
@@ -217,6 +217,8 @@ -ms-flex-pack: center;
   margin-right: 14px;
-  width: 20px;
-  left: 16px;
-  margin-left: 13px;
-  margin-top: 13px;
+  width: 18px;
+  left: 0;
+  margin-left: 12px;
+  margin-top: 15px;
+  padding-bottom: 6px;
+  position: absolute;
 }
@@ -510,8 +512,9 @@ .e-toast-container .e-toast .e-toast-progress {
 .e-toast-container.e-bigger .e-toast .e-toast-icon {
-  font-size: 18px;
-  height: 24px;
+  font-size: 20px;
+  height: 20px;
   margin-right: 16px;
-  width: 24px;
-  left: 18px;
-  margin-top: 13px;
+  width: 20px;
+  left: 0;
+  margin-top: 14px;
+  margin-left: 12px;
 }
@@ -518,0 +521,0 @@ .e-bigger .e-toast-container .e-toast .e-toast-progress,

styles/toast/bootstrap5.3.css

@@ -140,6 +140,6 @@
   padding: 0;
-  padding-bottom: 12px;
+  padding-bottom: 8px;
   padding-left: 12px;
   padding-right: 12px;
-  padding-top: 12px;
+  padding-top: 8px;
 }
@@ -184,3 +184,3 @@ .e-toast-container .e-toast .e-toast-message .e-toast-title:last-child,
 .e-toast-container .e-toast.e-toast-header-icon .e-toast-message .e-toast-content:first-child {
-  padding-left: 48px;
+  padding-left: 44px;
 }
@@ -214,4 +214,4 @@ .e-toast-container .e-toast.e-toast-header-close-icon .e-toast-message .e-toast-title:first-child,
           align-items: center;
-  font-size: 14px;
-  height: 20px;
+  font-size: 18px;
+  height: 18px;
   -webkit-box-pack: center;
@@ -221,6 +221,8 @@ -ms-flex-pack: center;
   margin-right: 14px;
-  width: 20px;
-  left: 16px;
-  margin-left: 13px;
-  margin-top: 13px;
+  width: 18px;
+  left: 0;
+  margin-left: 12px;
+  margin-top: 15px;
+  padding-bottom: 6px;
+  position: absolute;
 }
@@ -308,3 +310,3 @@ .e-toast-container .e-toast .e-toast-progress {
   color: var(--color-sf-info-dark);
-  border-color: var(--color-sf-info-dark);
+  border-color: var(--color-sf-info);
 }
@@ -332,3 +334,3 @@ .e-toast-container .e-toast.e-toast-info .e-toast-message .e-toast-content {
   color: var(--color-sf-warning-dark);
-  border-color: var(--color-sf-warning-dark);
+  border-color: var(--color-sf-border-warning);
 }
@@ -516,8 +518,9 @@ .e-toast-container .e-toast.e-toast-warning .e-toast-message .e-toast-content {
 .e-toast-container.e-bigger .e-toast .e-toast-icon {
-  font-size: 18px;
-  height: 24px;
+  font-size: 20px;
+  height: 20px;
   margin-right: 16px;
-  width: 24px;
-  left: 18px;
-  margin-top: 13px;
+  width: 20px;
+  left: 0;
+  margin-top: 14px;
+  margin-left: 12px;
 }
@@ -524,0 +527,0 @@ .e-bigger .e-toast-container .e-toast .e-toast-progress,

styles/toast/bootstrap5.css

@@ -136,6 +136,6 @@ .e-toast .e-toast-close-icon::before {
   padding: 0;
-  padding-bottom: 12px;
+  padding-bottom: 8px;
   padding-left: 12px;
   padding-right: 12px;
-  padding-top: 12px;
+  padding-top: 8px;
 }
@@ -180,3 +180,3 @@ .e-toast-container .e-toast .e-toast-message .e-toast-title:last-child,
 .e-toast-container .e-toast.e-toast-header-icon .e-toast-message .e-toast-content:first-child {
-  padding-left: 48px;
+  padding-left: 44px;
 }
@@ -210,4 +210,4 @@ .e-toast-container .e-toast.e-toast-header-close-icon .e-toast-message .e-toast-title:first-child,
           align-items: center;
-  font-size: 14px;
-  height: 20px;
+  font-size: 18px;
+  height: 18px;
   -webkit-box-pack: center;
@@ -217,6 +217,8 @@ -ms-flex-pack: center;
   margin-right: 14px;
-  width: 20px;
-  left: 16px;
-  margin-left: 13px;
-  margin-top: 13px;
+  width: 18px;
+  left: 0;
+  margin-left: 12px;
+  margin-top: 15px;
+  padding-bottom: 6px;
+  position: absolute;
 }
@@ -510,8 +512,9 @@ .e-toast-container .e-toast .e-toast-progress {
 .e-toast-container.e-bigger .e-toast .e-toast-icon {
-  font-size: 18px;
-  height: 24px;
+  font-size: 20px;
+  height: 20px;
   margin-right: 16px;
-  width: 24px;
-  left: 18px;
-  margin-top: 13px;
+  width: 20px;
+  left: 0;
+  margin-top: 14px;
+  margin-left: 12px;
 }
@@ -518,0 +521,0 @@ .e-bigger .e-toast-container .e-toast .e-toast-progress,

styles/toast/fluent2.css

@@ -96,3 +96,3 @@
 .e-toast-container.e-rtl .e-toast .e-toast-icon {
-  margin-left: 12px;
+  margin-left: 10px;
   margin-right: initial;
@@ -112,3 +112,3 @@ }
   overflow: hidden;
-  padding: 18px;
+  padding: 16px;
   position: relative;
@@ -200,4 +200,5 @@ }
           justify-content: center;
-  margin-right: 12px;
+  margin-right: 10px;
   width: 20px;
+  margin-top: 2px;
 }
@@ -273,3 +274,3 @@ .e-toast-container .e-toast .e-toast-progress {
 .e-toast-container .e-toast.e-toast-success:hover {
-  background-color: var(--color-sf-msg-success-bg-color);
+  background-color: var(--color-sf-success-light-alt);
   -webkit-box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.14), 0 0 2px 0 rgba(0, 0, 0, 0.12);
@@ -296,3 +297,3 @@ box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.14), 0 0 2px 0 rgba(0, 0, 0, 0.12);
 .e-toast-container .e-toast.e-toast-info:hover {
-  background-color: var(--color-sf-msg-info-bg-color);
+  background-color: var(--color-sf-info-light-alt);
   -webkit-box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.14), 0 0 2px 0 rgba(0, 0, 0, 0.12);
@@ -319,3 +320,3 @@ box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.14), 0 0 2px 0 rgba(0, 0, 0, 0.12);
 .e-toast-container .e-toast.e-toast-warning:hover {
-  background-color: var(--color-sf-msg-warning-bg-color);
+  background-color: var(--color-sf-warning-light-alt);
   -webkit-box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.14), 0 0 2px 0 rgba(0, 0, 0, 0.12);
@@ -342,3 +343,3 @@ box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.14), 0 0 2px 0 rgba(0, 0, 0, 0.12);
 .e-toast-container .e-toast.e-toast-danger:hover {
-  background-color: var(--color-sf-msg-danger-bg-color);
+  background-color: var(--color-sf-danger-light-alt);
   -webkit-box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.14), 0 0 2px 0 rgba(0, 0, 0, 0.12);
@@ -475,3 +476,3 @@ box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.14), 0 0 2px 0 rgba(0, 0, 0, 0.12);
 .e-toast-container.e-bigger .e-toast .e-toast-icon {
-  font-size: 18px;
+  font-size: 12px;
   height: 24px;
@@ -478,0 +479,0 @@ margin-right: 16px;

styles/toast/material3-dark.css

@@ -153,3 +153,3 @@
   font-size: 16px;
-  font-weight: 600;
+  font-weight: 500;
   letter-spacing: 0.5px;
@@ -156,0 +156,0 @@ }

styles/toast/material3.css

@@ -155,3 +155,3 @@
   font-size: 16px;
-  font-weight: 600;
+  font-weight: 500;
   letter-spacing: 0.5px;
@@ -158,0 +158,0 @@ }

New alerts

Environment variable access

Supply chain risk

Package accesses environment variables, which may be a sign of credential stuffing or data theft.

Found 1 instance in 1 package

Fixed alerts

Environment variable access

Supply chain risk

Package accesses environment variables, which may be a sign of credential stuffing or data theft.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

3607315

0.03%

Lines of code

83989

0.03%

Number of lines in readme file

148

5.71%

Dependency changes

• Updated

  @syncfusion/ej2-base@~31.2.12

• Updated

  @syncfusion/ej2-buttons@~31.2.12

• Updated

  @syncfusion/ej2-popups@~31.2.12