@syncfusion/ej2-navigations 32.2.8 → 33.1.44

package/styles/material3.css

@@ -1576,15 +1576,12 @@
   background-repeat: repeat-x;
 }
 .e-hscroll .e-scroll-overlay.e-scroll-left-overlay {
-  background-image: -webkit-gradient(linear, left top, right top, from(rgba(var(--color-sf-surface))), to(transparent));
   background-image: linear-gradient(-270deg, rgba(var(--color-sf-surface)) 0%, transparent 100%);
 }
 .e-hscroll .e-scroll-overlay.e-scroll-right-overlay {
-  background-image: -webkit-gradient(linear, left top, right top, from(transparent), to(rgba(var(--color-sf-surface))));
   background-image: linear-gradient(-270deg, transparent 0%, rgba(var(--color-sf-surface)) 100%);
 }
 .e-hscroll.e-rtl .e-scroll-nav {
-  background: -webkit-gradient(linear, left bottom, left top, from(rgba(var(--color-sf-primary), 0.05)), to(rgba(var(--color-sf-primary), 0.05))), rgba(var(--color-sf-surface));
   background: linear-gradient(0deg, rgba(var(--color-sf-primary), 0.05), rgba(var(--color-sf-primary), 0.05)), rgba(var(--color-sf-surface));
 }
 .e-hscroll.e-rtl .e-scroll-nav.e-scroll-left-nav {
@@ -1629,7 +1626,6 @@
   color: rgba(var(--color-sf-on-surface-variant));
 }
 .e-hscroll .e-scroll-nav {
-  background: -webkit-gradient(linear, left bottom, left top, from(rgba(var(--color-sf-primary), 0.05)), to(rgba(var(--color-sf-primary), 0.05))), rgba(var(--color-sf-surface));
   background: linear-gradient(0deg, rgba(var(--color-sf-primary), 0.05), rgba(var(--color-sf-primary), 0.05)), rgba(var(--color-sf-surface));
 }
 .e-hscroll .e-scroll-nav.e-scroll-left-nav {
@@ -2103,15 +2099,12 @@
   background-repeat: repeat-x;
 }
 .e-vscroll .e-scroll-overlay.e-scroll-up-overlay {
-  background-image: -webkit-gradient(linear, left top, right top, from(rgba(var(--color-sf-surface))), to(transparent));
   background-image: linear-gradient(-270deg, rgba(var(--color-sf-surface)) 0%, transparent 100%);
 }
 .e-vscroll .e-scroll-overlay.e-scroll-down-overlay {
-  background-image: -webkit-gradient(linear, left top, right top, from(transparent), to(rgba(var(--color-sf-surface))));
   background-image: linear-gradient(-270deg, transparent 0%, rgba(var(--color-sf-surface)) 100%);
 }
 .e-vscroll.e-rtl .e-scroll-nav {
-  background: -webkit-gradient(linear, left bottom, left top, from(rgba(103, 80, 164, 0.08)), to(rgba(103, 80, 164, 0.08))), -webkit-gradient(linear, left bottom, left top, from(rgba(var(--color-sf-primary), 0.05)), to(rgba(var(--color-sf-primary), 0.05))), rgba(var(--color-sf-surface));
   background: linear-gradient(0deg, rgba(103, 80, 164, 0.08), rgba(103, 80, 164, 0.08)), linear-gradient(0deg, rgba(var(--color-sf-primary), 0.05), rgba(var(--color-sf-primary), 0.05)), rgba(var(--color-sf-surface));
 }
 .e-vscroll.e-rtl .e-scroll-nav:hover {
@@ -2139,7 +2132,6 @@
   color: rgba(var(--color-sf-primary-container));
 }
 .e-vscroll .e-scroll-nav {
-  background: -webkit-gradient(linear, left bottom, left top, from(rgba(103, 80, 164, 0.08)), to(rgba(103, 80, 164, 0.08))), -webkit-gradient(linear, left bottom, left top, from(rgba(var(--color-sf-primary), 0.05)), to(rgba(var(--color-sf-primary), 0.05))), rgba(var(--color-sf-surface));
   background: linear-gradient(0deg, rgba(103, 80, 164, 0.08), rgba(103, 80, 164, 0.08)), linear-gradient(0deg, rgba(var(--color-sf-primary), 0.05), rgba(var(--color-sf-primary), 0.05)), rgba(var(--color-sf-surface));
 }
 .e-vscroll .e-scroll-nav.e-scroll-up-nav {
@@ -3051,14 +3043,12 @@
 /* stylelint-disable property-no-vendor-prefix */
 .e-toolbar {
   -webkit-tap-highlight-color: rgba(var(--color-sf-on-surface), 0.04);
-  background: -webkit-gradient(linear, left bottom, left top, from(rgba(var(--color-sf-primary), 0.08)), to(rgba(var(--color-sf-primary), 0.08))), rgba(var(--color-sf-surface));
   background: linear-gradient(0deg, rgba(var(--color-sf-primary), 0.08), rgba(var(--color-sf-primary), 0.08)), rgba(var(--color-sf-surface));
   border: 0 solid rgba(var(--color-sf-outline-variant));
   -webkit-box-shadow: none;
           box-shadow: none;
 }
 .e-toolbar .e-toolbar-items {
-  background: -webkit-gradient(linear, left bottom, left top, from(rgba(var(--color-sf-primary), 0.08)), to(rgba(var(--color-sf-primary), 0.08))), rgba(var(--color-sf-surface));
   background: linear-gradient(0deg, rgba(var(--color-sf-primary), 0.08), rgba(var(--color-sf-primary), 0.08)), rgba(var(--color-sf-surface));
 }
 .e-toolbar .e-toolbar-item .e-tbar-btn {
@@ -3075,7 +3065,6 @@
   color: rgba(var(--color-sf-on-surface-variant));
 }
 .e-toolbar .e-toolbar-item .e-tbar-btn.e-flat.e-active {
-  background: -webkit-gradient(linear, left bottom, left top, from(rgba(var(--color-sf-on-surface), 0.12)), to(rgba(var(--color-sf-on-surface), 0.12))), rgba(var(--color-sf-surface));
   background: linear-gradient(0deg, rgba(var(--color-sf-on-surface), 0.12), rgba(var(--color-sf-on-surface), 0.12)), rgba(var(--color-sf-surface));
   -webkit-box-shadow: none;
           box-shadow: none;
@@ -3144,7 +3133,6 @@
   border-width: 0 1px 0 0;
 }
 .e-toolbar .e-toolbar-item.e-overlay {
-  background: -webkit-gradient(linear, left bottom, left top, from(rgba(var(--color-sf-primary), 0.08)), to(rgba(var(--color-sf-primary), 0.08))), rgba(var(--color-sf-surface));
   background: linear-gradient(0deg, rgba(var(--color-sf-primary), 0.08), rgba(var(--color-sf-primary), 0.08)), rgba(var(--color-sf-surface));
   opacity: 0.38;
   color: rgba(var(--color-sf-on-surface-variant));
@@ -3167,7 +3155,6 @@
   border-width: 0 0 1px 0;
 }
 .e-toolbar .e-hor-nav {
-  background: -webkit-gradient(linear, left bottom, left top, from(rgba(var(--color-sf-primary), 0.08)), to(rgba(var(--color-sf-primary), 0.08))), rgba(var(--color-sf-surface));
   background: linear-gradient(0deg, rgba(var(--color-sf-primary), 0.08), rgba(var(--color-sf-primary), 0.08)), rgba(var(--color-sf-surface));
   border: solid rgba(var(--color-sf-outline-variant));
   border-width: 0 0 0 1px;
@@ -3183,7 +3170,6 @@
   -webkit-box-shadow: none;
           box-shadow: none;
   color: rgba(var(--color-sf-on-primary-container));
-  background: -webkit-gradient(linear, left bottom, left top, from(rgba(var(--color-sf-primary), 0.08)), to(rgba(var(--color-sf-primary), 0.08))), rgba(var(--color-sf-surface));
   background: linear-gradient(0deg, rgba(var(--color-sf-primary), 0.08), rgba(var(--color-sf-primary), 0.08)), rgba(var(--color-sf-surface));
 }
 .e-toolbar .e-hor-nav:active .e-icons {
@@ -3245,7 +3231,6 @@
   color: rgba(var(--color-sf-on-primary-container));
 }
 .e-toolbar .e-toolbar-pop {
-  background: -webkit-gradient(linear, left bottom, left top, from(rgba(var(--color-sf-surface), 1)), to(rgba(var(--color-sf-surface), 1))), rgba(var(--color-sf-surface));
   background: linear-gradient(0deg, rgba(var(--color-sf-surface), 1), rgba(var(--color-sf-surface), 1)), rgba(var(--color-sf-surface));
   border: 0 solid rgba(var(--color-sf-outline-variant));
   -webkit-box-shadow: 0 2px 6px 2px rgba(0, 0, 0, 0.15), 0 1px 2px 0 rgba(0, 0, 0, 0.3);
@@ -3285,7 +3270,6 @@
   background: transparent;
 }
 .e-toolbar.e-extended-toolbar .e-toolbar-extended .e-toolbar-item .e-tbar-btn {
-  background: -webkit-gradient(linear, left bottom, left top, from(rgba(var(--color-sf-primary), 0.08)), to(rgba(var(--color-sf-primary), 0.08))), rgba(var(--color-sf-surface));
   background: linear-gradient(0deg, rgba(var(--color-sf-primary), 0.08), rgba(var(--color-sf-primary), 0.08)), rgba(var(--color-sf-surface));
   -webkit-box-shadow: none;
           box-shadow: none;
@@ -3321,15 +3305,12 @@
   border-width: 0 1px 0 0;
 }
 .e-toolbar.e-extended-toolbar .e-toolbar-extended .e-toolbar-item.e-overlay {
-  background: -webkit-gradient(linear, left bottom, left top, from(rgba(var(--color-sf-primary), 0.08)), to(rgba(var(--color-sf-primary), 0.08))), rgba(var(--color-sf-surface));
   background: linear-gradient(0deg, rgba(var(--color-sf-primary), 0.08), rgba(var(--color-sf-primary), 0.08)), rgba(var(--color-sf-surface));
 }
 .e-toolbar.e-extended-toolbar .e-toolbar-pop {
-  background: -webkit-gradient(linear, left bottom, left top, from(rgba(var(--color-sf-primary), 0.08)), to(rgba(var(--color-sf-primary), 0.08))), rgba(var(--color-sf-surface));
   background: linear-gradient(0deg, rgba(var(--color-sf-primary), 0.08), rgba(var(--color-sf-primary), 0.08)), rgba(var(--color-sf-surface));
 }
 .e-toolbar.e-rtl .e-hor-nav {
-  background: -webkit-gradient(linear, left bottom, left top, from(rgba(var(--color-sf-primary), 0.08)), to(rgba(var(--color-sf-primary), 0.08))), rgba(var(--color-sf-surface));
   background: linear-gradient(0deg, rgba(var(--color-sf-primary), 0.08), rgba(var(--color-sf-primary), 0.08)), rgba(var(--color-sf-surface));
   border: solid rgba(var(--color-sf-outline-variant));
   border-width: 0 1px 0 0;
@@ -4987,10 +4968,8 @@
           box-shadow: none;
 }
 .e-carousel .e-carousel-indicators.e-default .e-indicator-bar .e-indicator div {
-  background: -webkit-gradient(linear, left bottom, left top, from(rgba(var(--color-sf-primary), 0.14)), to(rgba(var(--color-sf-primary), 0.14))), rgba(var(--color-sf-surface));
   background: linear-gradient(0deg, rgba(var(--color-sf-primary), 0.14), rgba(var(--color-sf-primary), 0.14)), rgba(var(--color-sf-surface));
   -o-border-image: linear-gradient(0deg, rgba(var(--color-sf-primary), 0.14), rgba(var(--color-sf-primary), 0.14));
-     border-image: -webkit-gradient(linear, left bottom, left top, from(rgba(var(--color-sf-primary), 0.14)), to(rgba(var(--color-sf-primary), 0.14)));
      border-image: linear-gradient(0deg, rgba(var(--color-sf-primary), 0.14), rgba(var(--color-sf-primary), 0.14));
 }
 .e-carousel .e-carousel-indicators.e-default .e-indicator-bar .e-indicator:active, .e-carousel .e-carousel-indicators.e-default .e-indicator-bar .e-indicator:focus, .e-carousel .e-carousel-indicators.e-default .e-indicator-bar .e-indicator:hover {
@@ -5441,7 +5420,6 @@
 
 .e-contextmenu-wrapper ul,
 .e-contextmenu-container ul {
-  background: -webkit-gradient(linear, left bottom, left top, from(rgba(var(--color-sf-surface), 1)), to(rgba(var(--color-sf-surface), 1))), rgba(var(--color-sf-surface));
   background: linear-gradient(0deg, rgba(var(--color-sf-surface), 1), rgba(var(--color-sf-surface), 1)), rgba(var(--color-sf-surface));
   color: rgba(var(--color-sf-on-surface));
 }
@@ -5515,7 +5493,6 @@
 
 .e-contextmenu-wrapper:not(.e-menu-container) .e-menu-vscroll.e-vscroll,
 .e-contextmenu-container:not(.e-menu-container) .e-menu-vscroll.e-vscroll {
-  background: -webkit-gradient(linear, left bottom, left top, from(rgba(var(--color-sf-surface), 1)), to(rgba(var(--color-sf-surface), 1))), rgba(var(--color-sf-surface));
   background: linear-gradient(0deg, rgba(var(--color-sf-surface), 1), rgba(var(--color-sf-surface), 1)), rgba(var(--color-sf-surface));
   border: 1px solid rgba(var(--color-sf-outline-variant));
 }
@@ -7820,7 +7797,6 @@
   border: initial;
 }
 .e-tab .e-tab-header .e-toolbar-pop {
-  background: -webkit-gradient(linear, left bottom, left top, from(rgba(var(--color-sf-surface), 1)), to(rgba(var(--color-sf-surface), 1))), rgba(var(--color-sf-surface));
   background: linear-gradient(0deg, rgba(var(--color-sf-surface), 1), rgba(var(--color-sf-surface), 1)), rgba(var(--color-sf-surface));
   border: 1px var(--color-sf-black);
   border-radius: calc(var(--e-radius) * 0.25);
@@ -7895,7 +7871,6 @@
 }
 .e-tab .e-tab-header .e-scroll-nav:focus .e-nav-arrow,
 .e-tab .e-tab-header .e-hscroll:not(.e-scroll-device) .e-scroll-nav:focus .e-nav-arrow {
-  background: -webkit-gradient(linear, left bottom, left top, from(rgba(var(--color-sf-on-surface), 0.08)), to(rgba(var(--color-sf-on-surface), 0.08))), rgba(var(--color-sf-surface));
   background: linear-gradient(0deg, rgba(var(--color-sf-on-surface), 0.08), rgba(var(--color-sf-on-surface), 0.08)), rgba(var(--color-sf-surface));
   color: rgba(var(--color-sf-on-surface-variant));
   border: 0;
@@ -7907,7 +7882,6 @@
 }
 .e-tab .e-tab-header .e-scroll-nav:focus .e-nav-arrow:active,
 .e-tab .e-tab-header .e-hscroll:not(.e-scroll-device) .e-scroll-nav:focus .e-nav-arrow:active {
-  background: -webkit-gradient(linear, left bottom, left top, from(rgba(var(--color-sf-on-surface), 0.08)), to(rgba(var(--color-sf-on-surface), 0.08))), rgba(var(--color-sf-surface));
   background: linear-gradient(0deg, rgba(var(--color-sf-on-surface), 0.08), rgba(var(--color-sf-on-surface), 0.08)), rgba(var(--color-sf-surface));
   border-color: unset;
   color: rgba(var(--color-sf-on-surface-variant));
@@ -7961,7 +7935,6 @@
 .e-tab .e-tab-header .e-hor-nav:focus .e-popup-down-icon,
 .e-tab .e-tab-header .e-hor-nav:not(.e-expended-nav):focus .e-popup-up-icon,
 .e-tab .e-tab-header .e-hor-nav:not(.e-expended-nav):focus .e-popup-down-icon {
-  background: -webkit-gradient(linear, left bottom, left top, from(rgba(var(--color-sf-on-surface), 0.08)), to(rgba(var(--color-sf-on-surface), 0.08))), rgba(var(--color-sf-surface));
   background: linear-gradient(0deg, rgba(var(--color-sf-on-surface), 0.08), rgba(var(--color-sf-on-surface), 0.08)), rgba(var(--color-sf-surface));
   border: 0;
   border-radius: calc(var(--e-radius) * 0);
@@ -8087,12 +8060,10 @@
   background: none;
 }
 .e-tab .e-tab-header.e-vertical .e-scroll-nav:hover {
-  background: -webkit-gradient(linear, left bottom, left top, from(rgba(var(--color-sf-on-surface), 0.08)), to(rgba(var(--color-sf-on-surface), 0.08))), rgba(var(--color-sf-surface));
   background: linear-gradient(0deg, rgba(var(--color-sf-on-surface), 0.08), rgba(var(--color-sf-on-surface), 0.08)), rgba(var(--color-sf-surface));
   border-color: rgba(var(--color-sf-outline-variant), 0.12) transparent transparent;
 }
 .e-tab .e-tab-header.e-vertical .e-scroll-nav:hover:active:focus {
-  background: -webkit-gradient(linear, left bottom, left top, from(rgba(var(--color-sf-on-surface), 0.08)), to(rgba(var(--color-sf-on-surface), 0.08))), rgba(var(--color-sf-surface));
   background: linear-gradient(0deg, rgba(var(--color-sf-on-surface), 0.08), rgba(var(--color-sf-on-surface), 0.08)), rgba(var(--color-sf-surface));
 }
 .e-tab .e-tab-header.e-vertical .e-scroll-nav:hover .e-nav-arrow {
@@ -8102,7 +8073,6 @@
   background: none;
 }
 .e-tab .e-tab-header.e-vertical .e-scroll-nav:focus {
-  background: -webkit-gradient(linear, left bottom, left top, from(rgba(var(--color-sf-on-surface), 0.08)), to(rgba(var(--color-sf-on-surface), 0.08))), rgba(var(--color-sf-surface));
   background: linear-gradient(0deg, rgba(var(--color-sf-on-surface), 0.08), rgba(var(--color-sf-on-surface), 0.08)), rgba(var(--color-sf-surface));
 }
 .e-tab .e-tab-header.e-vertical .e-scroll-nav:focus:hover:active .e-nav-arrow {
@@ -8171,7 +8141,6 @@
 .e-tab.e-focused > .e-tab-header .e-hor-nav:focus .e-popup-up-icon,
 .e-tab.e-focused > .e-tab-header .e-hor-nav:focus .e-popup-down-icon {
   color: rgba(var(--color-sf-on-surface-variant));
-  background: -webkit-gradient(linear, left bottom, left top, from(rgba(var(--color-sf-on-surface), 0.08)), to(rgba(var(--color-sf-on-surface), 0.08))), rgba(var(--color-sf-surface));
   background: linear-gradient(0deg, rgba(var(--color-sf-on-surface), 0.08), rgba(var(--color-sf-on-surface), 0.08)), rgba(var(--color-sf-surface));
   border: 0;
 }
@@ -8526,7 +8495,6 @@
 .e-tab.e-background .e-tab-header .e-scroll-nav:focus .e-nav-arrow {
   color: rgba(var(--color-sf-on-primary));
   border: 0;
-  background: -webkit-gradient(linear, left bottom, left top, from(rgba(var(--color-sf-on-surface), 0.08)), to(rgba(var(--color-sf-on-surface), 0.08))), rgba(var(--color-sf-surface));
   background: linear-gradient(0deg, rgba(var(--color-sf-on-surface), 0.08), rgba(var(--color-sf-on-surface), 0.08)), rgba(var(--color-sf-surface));
 }
 .e-tab.e-background .e-tab-header .e-hscroll:not(.e-scroll-device) .e-scroll-nav:focus .e-nav-arrow:hover,
@@ -8536,7 +8504,6 @@
 }
 .e-tab.e-background .e-tab-header .e-hscroll:not(.e-scroll-device) .e-scroll-nav:focus .e-nav-arrow:active,
 .e-tab.e-background .e-tab-header .e-scroll-nav:focus .e-nav-arrow:active {
-  background: -webkit-gradient(linear, left bottom, left top, from(rgba(var(--color-sf-on-surface), 0.08)), to(rgba(var(--color-sf-on-surface), 0.08))), rgba(var(--color-sf-surface));
   background: linear-gradient(0deg, rgba(var(--color-sf-on-surface), 0.08), rgba(var(--color-sf-on-surface), 0.08)), rgba(var(--color-sf-surface));
   border-color: unset;
   color: rgba(var(--color-sf-on-primary));
@@ -8577,7 +8544,6 @@
 .e-tab.e-background .e-tab-header .e-hor-nav:focus .e-popup-up-icon,
 .e-tab.e-background .e-tab-header .e-hor-nav:focus .e-popup-down-icon {
   color: rgba(var(--color-sf-on-primary));
-  background: -webkit-gradient(linear, left bottom, left top, from(rgba(var(--color-sf-on-surface), 0.08)), to(rgba(var(--color-sf-on-surface), 0.08))), rgba(var(--color-sf-surface));
   background: linear-gradient(0deg, rgba(var(--color-sf-on-surface), 0.08), rgba(var(--color-sf-on-surface), 0.08)), rgba(var(--color-sf-surface));
   border: 0;
 }
@@ -8771,7 +8737,6 @@
 }
 
 .e-tab-clone-element {
-  background: -webkit-gradient(linear, left bottom, left top, from(rgba(var(--color-sf-primary), 0.08)), to(rgba(var(--color-sf-primary), 0.08))), rgba(var(--color-sf-surface));
   background: linear-gradient(0deg, rgba(var(--color-sf-primary), 0.08), rgba(var(--color-sf-primary), 0.08)), rgba(var(--color-sf-surface));
   color: rgba(var(--color-sf-on-surface-variant));
 }
@@ -10890,7 +10855,6 @@
 .e-treeview.e-drag-item {
   background-color: linear-gradient(0deg, rgba(var(--color-sf-primary), 0.11), rgba(var(--color-sf-primary), 0.11)), rgba(var(--color-sf-surface));
   font-family: var(--e-font-family);
-  background: -webkit-gradient(linear, left bottom, left top, from(rgba(var(--color-sf-primary), 0.11)), to(rgba(var(--color-sf-primary), 0.11))), rgba(var(--color-sf-surface));
   background: linear-gradient(0deg, rgba(var(--color-sf-primary), 0.11), rgba(var(--color-sf-primary), 0.11)), rgba(var(--color-sf-surface));
 }
 .e-treeview.e-drag-item .e-icon-collapsible::before,
@@ -11311,7 +11275,6 @@ ejs-sidebar {
 .e-sidebar {
   /* stylelint-disable property-no-vendor-prefix */
   -webkit-tap-highlight-color: transparent;
-  background: -webkit-gradient(linear, left bottom, left top, from(rgba(var(--color-sf-primary), 0.08)), to(rgba(var(--color-sf-primary), 0.08))), rgba(var(--color-sf-surface));
   background: linear-gradient(0deg, rgba(var(--color-sf-primary), 0.08), rgba(var(--color-sf-primary), 0.08)), rgba(var(--color-sf-surface));
   height: 100%;
   overflow: auto;
@@ -11386,77 +11349,77 @@ ejs-sidebar {
           box-shadow: rgba(var(--color-sf-shadow));
 }
 
-.e-sidebarcontainer.e-sidebar.e-over, .e-sidebarcontainer.e-sidebar.e-auto, .e-sidebarcontainer.e-sidebar.e-push, .e-sidebarcontainer.e-sidebar.e-slide + div {
+.e-sidebarcontainer > .e-sidebar.e-over, .e-sidebarcontainer > .e-sidebar.e-auto, .e-sidebarcontainer > .e-sidebar.e-push, .e-sidebarcontainer > .e-sidebar.e-slide + div {
   -webkit-transition: margin 0.5s ease, -webkit-transform 0.5s ease;
   transition: margin 0.5s ease, -webkit-transform 0.5s ease;
   transition: margin 0.5s ease, transform 0.5s ease;
   transition: margin 0.5s ease, transform 0.5s ease, -webkit-transform 0.5s ease;
 }
-.e-sidebarcontainer.e-left.e-open.e-auto + div {
+.e-sidebarcontainer > .e-sidebar.e-left.e-open.e-auto + div {
   margin-right: 0;
   -webkit-transform: translateX(0);
           transform: translateX(0);
   margin-left: var(--sidebar-width);
 }
-.e-sidebarcontainer.e-left.e-close.e-auto + div {
+.e-sidebarcontainer > .e-sidebar.e-left.e-close.e-auto + div {
   margin-right: 0;
   -webkit-transform: translateX(0);
           transform: translateX(0);
   margin-left: 0;
 }
-.e-sidebarcontainer.e-right.e-open.e-auto + div {
+.e-sidebarcontainer > .e-sidebar.e-right.e-open.e-auto + div {
   margin-left: 0;
   -webkit-transform: translateX(0);
           transform: translateX(0);
   margin-right: var(--sidebar-width);
 }
-.e-sidebarcontainer.e-right.e-close.e-auto + div {
+.e-sidebarcontainer > .e-sidebar.e-right.e-close.e-auto + div {
   margin-right: 0;
   -webkit-transform: translateX(0);
           transform: translateX(0);
   margin-left: 0;
 }
-.e-sidebarcontainer.e-left.e-open.e-push + div {
+.e-sidebarcontainer > .e-sidebar.e-left.e-open.e-push + div {
   margin-right: 0;
   -webkit-transform: translateX(0);
           transform: translateX(0);
   margin-left: var(--sidebar-width);
 }
-.e-sidebarcontainer.e-left.e-close.e-push + div {
+.e-sidebarcontainer > .e-sidebar.e-left.e-close.e-push + div {
   margin-right: 0;
   -webkit-transform: translateX(0);
           transform: translateX(0);
   margin-left: 0;
 }
-.e-sidebarcontainer.e-right.e-open.e-push + div {
+.e-sidebarcontainer > .e-sidebar.e-right.e-open.e-push + div {
   margin-left: 0;
   -webkit-transform: translateX(0);
           transform: translateX(0);
   margin-right: var(--sidebar-width);
 }
-.e-sidebarcontainer.e-right.e-close.e-push + div {
+.e-sidebarcontainer > .e-sidebar.e-right.e-close.e-push + div {
   margin-right: 0;
   -webkit-transform: translateX(0);
           transform: translateX(0);
   margin-left: 0;
 }
-.e-sidebarcontainer.e-left.e-open.e-slide + div {
+.e-sidebarcontainer > .e-sidebar.e-left.e-open.e-slide + div {
   margin-left: 0;
   -webkit-transform: translate(var(--sidebar-width));
           transform: translate(var(--sidebar-width));
 }
-.e-sidebarcontainer.e-left.e-close.e-slide + div {
+.e-sidebarcontainer > .e-sidebar.e-left.e-close.e-slide + div {
   margin-left: 0;
   -webkit-transform: translate(0);
           transform: translate(0);
 }
-.e-sidebarcontainer.e-right.e-open.e-slide + div {
+.e-sidebarcontainer > .e-sidebar.e-right.e-open.e-slide + div {
   margin-right: 0;
   margin-left: 0;
   -webkit-transform: translate(calc(-1 * var(--sidebar-width)));
           transform: translate(calc(-1 * var(--sidebar-width)));
 }
-.e-sidebarcontainer.e-right.e-close.e-slide + div {
+.e-sidebarcontainer > .e-sidebar.e-right.e-close.e-slide + div {
   margin-right: 0;
   margin-left: 0;
   -webkit-transform: translate(0);
@@ -12399,7 +12362,6 @@ ejs-sidebar {
 }
 .e-menu-wrapper.e-menu-popup,
 .e-menu-container.e-menu-popup {
-  background: -webkit-gradient(linear, left bottom, left top, from(rgba(var(--color-sf-surface), 1)), to(rgba(var(--color-sf-surface), 1))), rgba(var(--color-sf-surface));
   background: linear-gradient(0deg, rgba(var(--color-sf-surface), 1), rgba(var(--color-sf-surface), 1)), rgba(var(--color-sf-surface));
 }
 .e-menu-wrapper.e-menu-popup.e-sfcontextmenu .e-menu-vscroll,
@@ -12428,7 +12390,6 @@ ejs-sidebar {
 }
 .e-menu-wrapper.e-menu-popup .e-menu-vscroll.e-vscroll .e-scroll-nav,
 .e-menu-container.e-menu-popup .e-menu-vscroll.e-vscroll .e-scroll-nav {
-  background: -webkit-gradient(linear, left bottom, left top, from(rgba(var(--color-sf-surface), 1)), to(rgba(var(--color-sf-surface), 1))), rgba(var(--color-sf-surface));
   background: linear-gradient(0deg, rgba(var(--color-sf-surface), 1), rgba(var(--color-sf-surface), 1)), rgba(var(--color-sf-surface));
   border-color: rgba(var(--color-sf-outline-variant));
 }
@@ -13366,7 +13327,6 @@ ejs-sidebar {
 }
 
 .e-breadcrumb-popup {
-  background: -webkit-gradient(linear, left bottom, left top, from(rgba(var(--color-sf-surface), 1)), to(rgba(var(--color-sf-surface), 1))), rgba(var(--color-sf-surface));
   background: linear-gradient(0deg, rgba(var(--color-sf-surface), 1), rgba(var(--color-sf-surface), 1)), rgba(var(--color-sf-surface));
 }
 .e-breadcrumb-popup .e-breadcrumb-text {
@@ -13800,12 +13760,10 @@ ejs-sidebar {
           box-shadow: 0 1.6px 3.6px rgba(0, 0, 0, 0.13), 0 0.3px 0.9px rgba(0, 0, 0, 0.1);
 }
 .e-appbar.e-light {
-  background: -webkit-gradient(linear, left bottom, left top, from(rgba(var(--color-sf-primary), 0.08)), to(rgba(var(--color-sf-primary), 0.08))), rgba(var(--color-sf-surface));
   background: linear-gradient(0deg, rgba(var(--color-sf-primary), 0.08), rgba(var(--color-sf-primary), 0.08)), rgba(var(--color-sf-surface));
   color: rgba(var(--color-sf-on-surface));
   border: 1px solid;
   -o-border-image: linear-gradient(0deg, rgba(var(--color-sf-primary), 0.08), rgba(var(--color-sf-primary), 0.08));
-     border-image: -webkit-gradient(linear, left bottom, left top, from(rgba(var(--color-sf-primary), 0.08)), to(rgba(var(--color-sf-primary), 0.08)));
      border-image: linear-gradient(0deg, rgba(var(--color-sf-primary), 0.08), rgba(var(--color-sf-primary), 0.08));
 }
 .e-appbar.e-light .e-appbar-separator {
@@ -13828,13 +13786,11 @@ ejs-sidebar {
 }
 .e-appbar.e-light .e-menu-wrapper.e-inherit,
 .e-appbar.e-light .e-menu-container.e-inherit {
-  background: -webkit-gradient(linear, left bottom, left top, from(rgba(var(--color-sf-primary), 0.08)), to(rgba(var(--color-sf-primary), 0.08))), rgba(var(--color-sf-surface));
   background: linear-gradient(0deg, rgba(var(--color-sf-primary), 0.08), rgba(var(--color-sf-primary), 0.08)), rgba(var(--color-sf-surface));
   color: rgba(var(--color-sf-on-surface));
   -webkit-box-shadow: none;
           box-shadow: none;
   -o-border-image: linear-gradient(0deg, rgba(var(--color-sf-primary), 0.08), rgba(var(--color-sf-primary), 0.08));
-     border-image: -webkit-gradient(linear, left bottom, left top, from(rgba(var(--color-sf-primary), 0.08)), to(rgba(var(--color-sf-primary), 0.08)));
      border-image: linear-gradient(0deg, rgba(var(--color-sf-primary), 0.08), rgba(var(--color-sf-primary), 0.08));
 }
 .e-appbar.e-light .e-menu-wrapper.e-inherit .e-menu .e-menu-item.e-selected, .e-appbar.e-light .e-menu-wrapper.e-inherit .e-menu .e-menu-item.e-focused,
@@ -13917,7 +13873,6 @@ ejs-sidebar {
 }
 
 .e-light.e-inherit.e-input-group, .e-light.e-inherit.e-input-group.e-control-wrapper, .e-light.e-inherit.e-float-input, .e-light.e-inherit.e-float-input.e-input-group, .e-light.e-inherit.e-float-input.e-control-wrapper, .e-light.e-inherit.e-float-input.e-input-group.e-control-wrapper, .e-light.e-inherit.e-input-group:not(.e-disabled) .e-input-group-icon:hover, .e-light.e-inherit.e-input-group.e-control-wrapper:not(.e-disabled) .e-input-group-icon:hover {
-  background: -webkit-gradient(linear, left bottom, left top, from(rgba(var(--color-sf-primary), 0.08)), to(rgba(var(--color-sf-primary), 0.08))), rgba(var(--color-sf-surface));
   background: linear-gradient(0deg, rgba(var(--color-sf-primary), 0.08), rgba(var(--color-sf-primary), 0.08)), rgba(var(--color-sf-surface));
   color: rgba(var(--color-sf-on-surface));
 }
@@ -14723,7 +14678,6 @@ ejs-sidebar {
 .e-stepper .e-step,
 .e-stepper .e-indicator {
   color: rgba(var(--color-sf-on-surface));
-  background: -webkit-gradient(linear, left bottom, left top, from(rgba(var(--color-sf-primary), 0.14)), to(rgba(var(--color-sf-primary), 0.14))), rgba(var(--color-sf-surface));
   background: linear-gradient(0deg, rgba(var(--color-sf-primary), 0.14), rgba(var(--color-sf-primary), 0.14)), rgba(var(--color-sf-surface));
 }
 .e-stepper .e-step-indicator {
@@ -14784,7 +14738,6 @@ ejs-sidebar {
 }
 .e-stepper .e-step-disabled .e-indicator,
 .e-stepper .e-step-disabled .e-step {
-  background: -webkit-gradient(linear, left bottom, left top, from(rgba(var(--color-sf-primary), 0.11)), to(rgba(var(--color-sf-primary), 0.11))), rgba(var(--color-sf-surface));
   background: linear-gradient(0deg, rgba(var(--color-sf-primary), 0.11), rgba(var(--color-sf-primary), 0.11)), rgba(var(--color-sf-surface));
   color: rgba(var(--color-sf-on-surface), 0.38);
 }
@@ -14845,7 +14798,6 @@ ejs-sidebar {
 .e-stepper:not(.e-step-type-label) .e-indicator:hover,
 .e-stepper:not(.e-step-type-label) .e-step:hover {
   color: rgba(var(--color-sf-on-primary));
-  background: -webkit-gradient(linear, left bottom, left top, from(rgba(var(--color-sf-on-primary), 0.08)), to(rgba(var(--color-sf-on-primary), 0.08))), rgba(var(--color-sf-primary));
   background: linear-gradient(0deg, rgba(var(--color-sf-on-primary), 0.08), rgba(var(--color-sf-on-primary), 0.08)), rgba(var(--color-sf-primary));
 }
 .e-stepper:not(.e-step-type-label) .e-step-notstarted .e-indicator:hover, .e-stepper:not(.e-step-type-label) .e-step-notstarted .e-step:hover {
@@ -14853,7 +14805,6 @@ ejs-sidebar {
 }
 .e-stepper:not(.e-step-type-label) .e-step-selected .e-indicator:active,
 .e-stepper:not(.e-step-type-label) .e-step-selected .e-step:active {
-  background: -webkit-gradient(linear, left bottom, left top, from(rgba(var(--color-sf-on-primary), 0.12)), to(rgba(var(--color-sf-on-primary), 0.12))), rgba(var(--color-sf-primary));
   background: linear-gradient(0deg, rgba(var(--color-sf-on-primary), 0.12), rgba(var(--color-sf-on-primary), 0.12)), rgba(var(--color-sf-primary));
 }
 .e-stepper:not(.e-step-type-label) .e-step-valid.e-step-selected .e-indicator:active,

package/styles/menu/material3-dark.css

@@ -977,7 +977,6 @@
 }
 .e-menu-wrapper.e-menu-popup,
 .e-menu-container.e-menu-popup {
-  background: -webkit-gradient(linear, left bottom, left top, from(rgba(var(--color-sf-primary), 0.11)), to(rgba(var(--color-sf-primary), 0.11))), rgba(var(--color-sf-surface));
   background: linear-gradient(0deg, rgba(var(--color-sf-primary), 0.11), rgba(var(--color-sf-primary), 0.11)), rgba(var(--color-sf-surface));
 }
 .e-menu-wrapper.e-menu-popup.e-sfcontextmenu .e-menu-vscroll,
@@ -1006,7 +1005,6 @@
 }
 .e-menu-wrapper.e-menu-popup .e-menu-vscroll.e-vscroll .e-scroll-nav,
 .e-menu-container.e-menu-popup .e-menu-vscroll.e-vscroll .e-scroll-nav {
-  background: -webkit-gradient(linear, left bottom, left top, from(rgba(var(--color-sf-primary), 0.11)), to(rgba(var(--color-sf-primary), 0.11))), rgba(var(--color-sf-surface));
   background: linear-gradient(0deg, rgba(var(--color-sf-primary), 0.11), rgba(var(--color-sf-primary), 0.11)), rgba(var(--color-sf-surface));
   border-color: rgba(var(--color-sf-outline-variant));
 }

package/styles/menu/material3.css

@@ -983,7 +983,6 @@
 }
 .e-menu-wrapper.e-menu-popup,
 .e-menu-container.e-menu-popup {
-  background: -webkit-gradient(linear, left bottom, left top, from(rgba(var(--color-sf-surface), 1)), to(rgba(var(--color-sf-surface), 1))), rgba(var(--color-sf-surface));
   background: linear-gradient(0deg, rgba(var(--color-sf-surface), 1), rgba(var(--color-sf-surface), 1)), rgba(var(--color-sf-surface));
 }
 .e-menu-wrapper.e-menu-popup.e-sfcontextmenu .e-menu-vscroll,
@@ -1012,7 +1011,6 @@
 }
 .e-menu-wrapper.e-menu-popup .e-menu-vscroll.e-vscroll .e-scroll-nav,
 .e-menu-container.e-menu-popup .e-menu-vscroll.e-vscroll .e-scroll-nav {
-  background: -webkit-gradient(linear, left bottom, left top, from(rgba(var(--color-sf-surface), 1)), to(rgba(var(--color-sf-surface), 1))), rgba(var(--color-sf-surface));
   background: linear-gradient(0deg, rgba(var(--color-sf-surface), 1), rgba(var(--color-sf-surface), 1)), rgba(var(--color-sf-surface));
   border-color: rgba(var(--color-sf-outline-variant));
 }

package/styles/pager/_bigger.scss

@@ -85,7 +85,7 @@
           padding: 6px 14px 5.5px 13px;
         }
         @else if $pager-skin == 'bootstrap5' {
-          padding: 9px 13px 10px 12px;
+          padding: 9.7px 13px 10.4px 12px;
         }
       }
     }
@@ -120,7 +120,7 @@
           padding: $pager-bigger-current-item-padding;
         }
         @if $pager-skin == 'tailwind3' {
-          padding: 10.7px 15.48px 11.5px 15.1px;
+          padding: 11.4px 15.48px 11.5px 15.1px;
         }
         @else {
           padding: $pager-bigger-letter-spacing;
@@ -132,7 +132,7 @@
       .e-pp.e-spacing:hover,
       .e-np.e-spacing:hover {
         @if $pager-skin == 'tailwind3' {
-          padding-top: 12.5px;
+          padding-top: 13px;
         }
       }
  
@@ -198,7 +198,7 @@
           padding: 6px 14px 6px 13px;
         }
         @else if $pager-skin == 'bootstrap5' {
-          padding: 9px 13px 10px 12px;
+          padding: 11.3px 13px 10.4px 12px;
         }
         @else if $pager-skin == 'material3' {
           padding: 10px 15px;

package/styles/pager/_bootstrap5-dark-definition.scss

@@ -52,10 +52,10 @@ $pager-number-hover-bg-color: $content-bg-color-hover !default;
 $pager-font-family: $font-family !default;
 $pager-font-weight: bold !default;
 $pager-messagebar-padding-right: 0 !default;
-$pager-tripledot-padding: 10.4px 10.5px 11.4px !default;
-$pager-numeric-icon-padding: 10px 12.5px 11.5px !default;
+$pager-tripledot-padding: 10.4px 10.5px 11.6px !default;
+$pager-numeric-icon-padding: 10px 12.5px 11.6px !default;
 $pager-pagecontainer-icon-padding: 14.2px 12.2px 12.7px 11.5px !default;
-$pager-bigger-pagecontainer-icon-padding: 16px 14px 14px !default;
+$pager-bigger-pagecontainer-icon-padding: 16.3px 14px 14px !default;
 $pager-hover-color: $primary !default;
 $pager-mhover-color: $primary !default;
 $pager-pagermessage-weight: $font-weight-normal !default;
@@ -68,9 +68,9 @@ $pager-bigger-icon-font-size: 11px !default;
 $pager-bigger-font-size: 16px !default;
 $pager-bigger-padding: 7px 8px !default;
 $pager-bigger-pagercontainer-margin: 0 0 -6px .8px !default;
-$pager-bigger-pagercontainer-icons-padding: 16px 14px 14px !default;
+$pager-bigger-pagercontainer-icons-padding: 16.3px 14px 14px !default;
 $pager-bigger-pagercontainer-icons-marign-right: 0 !default;
-$pager-bigger-current-item-padding: 12px 15px 13px !default;
+$pager-bigger-current-item-padding: 12.2px 15px 13px !default;
 $pager-letter-spacing: 0 !default;
 $pager-bigger-icons-align: middle !default;
 $pager-bigger-messagebar-padding-right: 0 !default;
@@ -91,7 +91,7 @@ $pager-dropdown-height: 32px !default;
 $pager-dropdown-width: 90px !default;
 $pager-bigger-dropdown-width: 90px !default;
 $pager-constant-margin: 0 0 6px 8px !default;
-$pager-bigger-letter-spacing: 14px 14px 13px !default;
+$pager-bigger-letter-spacing: 14px 14px 13.2px !default;
 $pager-tripledot-rtl-margin-top: 0 !default;
 $pager-tripledot-rtl-padding: 10px 10.5px 11px !default;
 $pager-rtl-pagerconstant-margin-top: 0 8px 6px 0 !default;
@@ -100,7 +100,7 @@ $pager-tripledot-rtl-bigger-margin-top: 0 !default;
 $pager-bigger-rtl-numeric-margin: 0 !default;
 $pager-bigger-container-rtl-margin: 0 0 -4px !default;
 $pager-activeitem-padding: 10.4px 12.5px 11px !default;
-$pager-bigger-activeitem-padding: 12px 15px 13px !default;
+$pager-bigger-activeitem-padding: 12.2px 15px 13px !default;
 $pager-rtl-pagerdropdown-bigger-margin: -26px 16px 0 0 !default;
 $pager-rtl-pagerconstant-bigger-margin-top: 0 16px 7px 0 !default;
 $pager-bigger-rtl-parentmsgbar-margin-top: 0 !default;
@@ -117,7 +117,7 @@ $pager-item-hover-border-width: 0 1px 0 0 !default;
 $pager-item-hover-border-color: $pager-border-color !default;
 $pager-bigger-current-item-hover-padding: $pager-bigger-current-item-padding !default;
 $pager-numeric-icon-hover-padding: 10.4px 12.5px 11.6px !default;
-$pager-bigger-rtl-activeitem-hover-padding: 12px 15px 13px !default;
+$pager-bigger-rtl-activeitem-hover-padding: 12.2px 15px 13px !default;
 $pager-activeitem-hover-padding: $pager-activeitem-padding !default;
 $pager-bigger-dropdown-margin-top: -24px !default;
 $pager-rtl-nxtpage-margin: 0 !default;

package/styles/pager/_bootstrap5-definition.scss

@@ -52,10 +52,10 @@ $pager-number-hover-bg-color: $content-bg-color-hover !default;
 $pager-font-family: $font-family !default;
 $pager-font-weight: bold !default;
 $pager-messagebar-padding-right: 0 !default;
-$pager-tripledot-padding: 10.4px 10.5px 11.4px !default;
-$pager-numeric-icon-padding: 10px 12.5px 11.5px !default;
+$pager-tripledot-padding: 10.4px 10.5px 11.6px !default;
+$pager-numeric-icon-padding: 10px 12.5px 11.6px !default;
 $pager-pagecontainer-icon-padding: 14.2px 12.2px 12.7px 11.5px !default;
-$pager-bigger-pagecontainer-icon-padding: 16px 14px 14px !default;
+$pager-bigger-pagecontainer-icon-padding: 16.3px 14px 14px !default;
 $pager-hover-color: $primary !default;
 $pager-mhover-color: $primary !default;
 $pager-pagermessage-weight: $font-weight-normal !default;
@@ -68,9 +68,9 @@ $pager-bigger-icon-font-size: 11px !default;
 $pager-bigger-font-size: 16px !default;
 $pager-bigger-padding: 7px 8px !default;
 $pager-bigger-pagercontainer-margin: 0 0 -6px .8px !default;
-$pager-bigger-pagercontainer-icons-padding: 16px 14px 14px !default;
+$pager-bigger-pagercontainer-icons-padding: 16.3px 14px 14px !default;
 $pager-bigger-pagercontainer-icons-marign-right: 0 !default;
-$pager-bigger-current-item-padding: 12px 15px 13px !default;
+$pager-bigger-current-item-padding: 12.2px 15px 13px !default;
 $pager-letter-spacing: 0 !default;
 $pager-bigger-icons-align: middle !default;
 $pager-bigger-messagebar-padding-right: 0 !default;
@@ -91,7 +91,7 @@ $pager-dropdown-height: 32px !default;
 $pager-dropdown-width: 90px !default;
 $pager-bigger-dropdown-width: 90px !default;
 $pager-constant-margin: 0 0 6px 8px !default;
-$pager-bigger-letter-spacing: 14px 14px 13px !default;
+$pager-bigger-letter-spacing: 14px 14px 13.2px !default;
 $pager-tripledot-rtl-margin-top: 0 !default;
 $pager-tripledot-rtl-padding: 10px 10.5px 11px !default;
 $pager-rtl-pagerconstant-margin-top: 0 8px 6px 0 !default;
@@ -100,7 +100,7 @@ $pager-tripledot-rtl-bigger-margin-top: 0 !default;
 $pager-bigger-rtl-numeric-margin: 0 !default;
 $pager-bigger-container-rtl-margin: 0 0 -4px !default;
 $pager-activeitem-padding: 10.4px 12.5px 11px !default;
-$pager-bigger-activeitem-padding: 12px 15px 13px !default;
+$pager-bigger-activeitem-padding: 12.2px 15px 13px !default;
 $pager-rtl-pagerdropdown-bigger-margin: -26px 16px 0 0 !default;
 $pager-rtl-pagerconstant-bigger-margin-top: 0 16px 7px 0 !default;
 $pager-bigger-rtl-parentmsgbar-margin-top: 0 !default;
@@ -117,7 +117,7 @@ $pager-item-hover-border-width: 0 1px 0 0 !default;
 $pager-item-hover-border-color: $pager-border-color !default;
 $pager-bigger-current-item-hover-padding: $pager-bigger-current-item-padding !default;
 $pager-numeric-icon-hover-padding: 10.4px 12.5px 11.6px !default;
-$pager-bigger-rtl-activeitem-hover-padding: 12px 15px 13px !default;
+$pager-bigger-rtl-activeitem-hover-padding: 12.2px 15px 13px !default;
 $pager-activeitem-hover-padding: $pager-activeitem-padding !default;
 $pager-bigger-dropdown-margin-top: -24px !default;
 $pager-rtl-nxtpage-margin: 0 !default;

package/styles/pager/_layout.scss

@@ -130,7 +130,7 @@
           padding: 3.5px 11px 6.2px 10px;
         }
         @else if $pager-skin == 'bootstrap5' {
-          padding: 7.4px 10.5px 8.4px 9.5px;
+          padding: 7.4px 10.5px 9.2px 9.5px;
         }
       }
     }
@@ -483,7 +483,7 @@
             padding: 3.5px 11px 4px 10px;
           }
           @else if $pager-skin == 'bootstrap5' {
-            padding: 7px 10.5px 8px 9.5px;
+            padding: 8px 10.5px 8.5px 9.5px;
           }
         }
         &.e-currentitem {