@syncfusion/ej2-navigations 28.1.33 → 28.1.35

package/styles/menu/tailwind3.css

@@ -291,7 +291,7 @@
 .e-menu-wrapper .e-menu-header,
 .e-menu-container .e-menu-header {
   display: none;
-  font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", arial, "Noto Sans", "Liberation Sans", sans-serif, "apple color emoji", "Segoe UI emoji", "Segoe UI Symbol", "Noto color emoji";
+  font-family: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", arial, "Noto Sans", "Liberation Sans", sans-serif, "apple color emoji", "Segoe UI emoji", "Segoe UI Symbol", "Noto color emoji";
   font-size: 16px;
   font-weight: 400;
   height: 38px;
@@ -320,6 +320,7 @@
 .e-menu-wrapper .e-menu-hscroll.e-hscroll:not(.e-scroll-device) .e-scroll-nav,
 .e-menu-container .e-menu-hscroll.e-hscroll:not(.e-scroll-device) .e-scroll-nav {
   width: 28px;
+  min-height: 38px;
 }
 .e-menu-wrapper .e-menu-hscroll.e-hscroll:not(.e-scroll-device) .e-scroll-nav:focus, .e-menu-wrapper .e-menu-hscroll.e-hscroll:not(.e-scroll-device) .e-scroll-nav:hover,
 .e-menu-container .e-menu-hscroll.e-hscroll:not(.e-scroll-device) .e-scroll-nav:focus,
@@ -792,6 +793,10 @@
 .e-menu-container.e-menu-popup.e-sfcontextmenu .e-menu-vscroll {
   background: inherit;
 }
+.e-menu-wrapper .e-menu-hscroll.e-hscroll .e-scroll-nav,
+.e-menu-container .e-menu-hscroll.e-hscroll .e-scroll-nav {
+  background: transparent;
+}
 .e-menu-wrapper .e-menu-hscroll.e-hscroll .e-scroll-nav .e-nav-arrow.e-icons,
 .e-menu-container .e-menu-hscroll.e-hscroll .e-scroll-nav .e-nav-arrow.e-icons {
   color: var(--color-sf-secondary-text-color-focus);
@@ -988,6 +993,7 @@
 .e-bigger .e-menu-container .e-menu-hscroll.e-hscroll:not(.e-scroll-device) .e-scroll-nav,
 .e-bigger.e-menu-container .e-menu-hscroll.e-hscroll:not(.e-scroll-device) .e-scroll-nav {
   width: 40px;
+  min-height: 48px;
 }
 .e-bigger .e-menu-wrapper .e-menu-vscroll.e-vscroll:not(.e-scroll-device),
 .e-bigger.e-menu-wrapper .e-menu-vscroll.e-vscroll:not(.e-scroll-device),

package/styles/pager/_bigger.scss

@@ -334,4 +334,30 @@
       }
     }
   }
+
+  .e-bigger  #{&}.sf-pager,
+  #{&}.sf-pager.e-bigger {
+    .e-pagercontainer {
+      .e-firstpage,
+      .e-prevpage,
+      .e-firstpagedisabled,
+      .e-prevpagedisabled,
+      .e-nextpage,
+      .e-lastpage,
+      .e-nextpagedisabled,
+      .e-lastpagedisabled {
+        @if $pager-skin =='tailwind3' {
+          padding: 10.3px 11.6px 12.5px;
+        }
+      }
+    }
+ 
+    .e-spacing,
+    .e-currentitem,
+    .e-numericitem:hover {
+      @if $pager-skin =='tailwind3' {
+        padding: 14.5px 15.48px 11.8px 15.1px;
+      }
+    }
+  }
 }

package/styles/pager/_layout.scss

@@ -730,6 +730,23 @@
         .e-last {
           font-size: $pager-icon-size;
         }
+        .e-firstpage,
+        .e-prevpage,
+        .e-firstpagedisabled,
+        .e-prevpagedisabled,
+        .e-nextpage,
+        .e-lastpage,
+        .e-nextpagedisabled,
+        .e-lastpagedisabled {
+          @if $pager-skin == 'tailwind3' {
+            padding: 7.1px 8.6px 8.5px;
+          }
+        }
+      }
+      .e-spacing {
+        @if $pager-skin == 'tailwind3' {
+          padding: 7.6px 11.85px 7.8px 11.8px;
+        }
       }
       
       .e-numericcontainer a {

package/styles/pager/_tailwind3-definition.scss

@@ -45,7 +45,7 @@ $pager-numeric-hover-bg-color: $content-bg-color-hover !default;
 $pager-numeric-txt-bg-color: $icon-color-disabled !default;
 $pager-padding: 7px 8px 7px 8px !default;
 $pager-numeric-font-weight: bold !default;
-$pager-messagebar-padding-top: 6px !default;
+$pager-messagebar-padding-top: 5px !default;
 $pager-number-hover-bg-color: $content-bg-color-hover !default;
 $pager-font-family: $font-family !default;
 $pager-font-weight: bold !default;
@@ -72,7 +72,7 @@ $pager-bigger-current-item-padding: 10.7px 15.48px 11.5px 15.1px !default;
 $pager-letter-spacing: 0 !default;
 $pager-bigger-icons-align: middle !default;
 $pager-bigger-messagebar-padding-right: 0 !default;
-$pager-bigger-messagebar-padding-top: 9px !default;
+$pager-bigger-messagebar-padding-top: 8px !default;
 $pager-last-content-icon: 'e235' !default;
 $pager-next-content-icon: 'e236' !default;
 $pager-prev-content-icon: 'e237' !default;

package/styles/pager/tailwind3.css

@@ -69,7 +69,7 @@
   float: right;
   padding-bottom: 0;
   padding-right: 0;
-  padding-top: 6px;
+  padding-top: 5px;
 }
 .e-pager .e-pagesizes {
   display: inline;
@@ -484,6 +484,19 @@
 .e-pager.sf-pager .e-pagercontainer .e-last {
   font-size: 14px;
 }
+.e-pager.sf-pager .e-pagercontainer .e-firstpage,
+.e-pager.sf-pager .e-pagercontainer .e-prevpage,
+.e-pager.sf-pager .e-pagercontainer .e-firstpagedisabled,
+.e-pager.sf-pager .e-pagercontainer .e-prevpagedisabled,
+.e-pager.sf-pager .e-pagercontainer .e-nextpage,
+.e-pager.sf-pager .e-pagercontainer .e-lastpage,
+.e-pager.sf-pager .e-pagercontainer .e-nextpagedisabled,
+.e-pager.sf-pager .e-pagercontainer .e-lastpagedisabled {
+  padding: 7.1px 8.6px 8.5px;
+}
+.e-pager.sf-pager .e-spacing {
+  padding: 7.6px 11.85px 7.8px 11.8px;
+}
 .e-pager.sf-pager .e-numericcontainer a {
   font-size: 14px;
 }
@@ -613,7 +626,7 @@
 .e-pager.e-bigger div.e-parentmsgbar {
   padding-bottom: 8px;
   padding-right: 0;
-  padding-top: 9px;
+  padding-top: 8px;
 }
 .e-bigger .e-pager:not(.e-adaptive) .e-pagerdropdown,
 .e-pager.e-bigger:not(.e-adaptive) .e-pagerdropdown {
@@ -832,4 +845,31 @@
 .e-bigger .e-pager.e-adaptive .e-pagerconstant,
 .e-pager.e-bigger.e-adaptive .e-pagerconstant {
   margin: 0 8px 0 10px;
+}
+
+.e-bigger .sf-pager .e-pagercontainer .e-firstpage,
+.e-bigger .sf-pager .e-pagercontainer .e-prevpage,
+.e-bigger .sf-pager .e-pagercontainer .e-firstpagedisabled,
+.e-bigger .sf-pager .e-pagercontainer .e-prevpagedisabled,
+.e-bigger .sf-pager .e-pagercontainer .e-nextpage,
+.e-bigger .sf-pager .e-pagercontainer .e-lastpage,
+.e-bigger .sf-pager .e-pagercontainer .e-nextpagedisabled,
+.e-bigger .sf-pager .e-pagercontainer .e-lastpagedisabled,
+.sf-pager.e-bigger .e-pagercontainer .e-firstpage,
+.sf-pager.e-bigger .e-pagercontainer .e-prevpage,
+.sf-pager.e-bigger .e-pagercontainer .e-firstpagedisabled,
+.sf-pager.e-bigger .e-pagercontainer .e-prevpagedisabled,
+.sf-pager.e-bigger .e-pagercontainer .e-nextpage,
+.sf-pager.e-bigger .e-pagercontainer .e-lastpage,
+.sf-pager.e-bigger .e-pagercontainer .e-nextpagedisabled,
+.sf-pager.e-bigger .e-pagercontainer .e-lastpagedisabled {
+  padding: 10.3px 11.6px 12.5px;
+}
+.e-bigger .sf-pager .e-spacing,
+.e-bigger .sf-pager .e-currentitem,
+.e-bigger .sf-pager .e-numericitem:hover,
+.sf-pager.e-bigger .e-spacing,
+.sf-pager.e-bigger .e-currentitem,
+.sf-pager.e-bigger .e-numericitem:hover {
+  padding: 14.5px 15.48px 11.8px 15.1px;
 }

package/styles/stepper/_layout.scss

@@ -400,7 +400,6 @@
     }
     &.e-vertical .e-stepper-progressbar {
       min-height: inherit;
-      height: inherit;
       width: $stepper-progress-bar-height;
       top: $stepper-ol-padding;
       left: var(--progress-position);

package/styles/stepper/bds.css

@@ -395,7 +395,6 @@
 }
 .e-stepper.e-vertical .e-stepper-progressbar {
   min-height: inherit;
-  height: inherit;
   width: 1.6px;
   top: 0;
   left: var(--progress-position);

package/styles/stepper/bootstrap-dark.css

@@ -391,7 +391,6 @@
 }
 .e-stepper.e-vertical .e-stepper-progressbar {
   min-height: inherit;
-  height: inherit;
   width: 1.6px;
   top: 0;
   left: var(--progress-position);

package/styles/stepper/bootstrap.css

@@ -391,7 +391,6 @@
 }
 .e-stepper.e-vertical .e-stepper-progressbar {
   min-height: inherit;
-  height: inherit;
   width: 1.6px;
   top: 0;
   left: var(--progress-position);

package/styles/stepper/bootstrap4.css

@@ -391,7 +391,6 @@
 }
 .e-stepper.e-vertical .e-stepper-progressbar {
   min-height: inherit;
-  height: inherit;
   width: 1.6px;
   top: 0;
   left: var(--progress-position);

package/styles/stepper/bootstrap5-dark.css

@@ -391,7 +391,6 @@
 }
 .e-stepper.e-vertical .e-stepper-progressbar {
   min-height: inherit;
-  height: inherit;
   width: 1.6px;
   top: 0;
   left: var(--progress-position);

package/styles/stepper/bootstrap5.3.css

@@ -395,7 +395,6 @@
 }
 .e-stepper.e-vertical .e-stepper-progressbar {
   min-height: inherit;
-  height: inherit;
   width: 1.6px;
   top: 0;
   left: var(--progress-position);

package/styles/stepper/bootstrap5.css

@@ -391,7 +391,6 @@
 }
 .e-stepper.e-vertical .e-stepper-progressbar {
   min-height: inherit;
-  height: inherit;
   width: 1.6px;
   top: 0;
   left: var(--progress-position);

package/styles/stepper/fabric-dark.css

@@ -391,7 +391,6 @@
 }
 .e-stepper.e-vertical .e-stepper-progressbar {
   min-height: inherit;
-  height: inherit;
   width: 1.6px;
   top: 0;
   left: var(--progress-position);

package/styles/stepper/fabric.css

@@ -391,7 +391,6 @@
 }
 .e-stepper.e-vertical .e-stepper-progressbar {
   min-height: inherit;
-  height: inherit;
   width: 1.6px;
   top: 0;
   left: var(--progress-position);

package/styles/stepper/fluent-dark.css

@@ -391,7 +391,6 @@
 }
 .e-stepper.e-vertical .e-stepper-progressbar {
   min-height: inherit;
-  height: inherit;
   width: 1.6px;
   top: 0;
   left: var(--progress-position);

package/styles/stepper/fluent.css

@@ -391,7 +391,6 @@
 }
 .e-stepper.e-vertical .e-stepper-progressbar {
   min-height: inherit;
-  height: inherit;
   width: 1.6px;
   top: 0;
   left: var(--progress-position);

package/styles/stepper/fluent2.css

@@ -397,7 +397,6 @@
 }
 .e-stepper.e-vertical .e-stepper-progressbar {
   min-height: inherit;
-  height: inherit;
   width: 2px;
   top: 0;
   left: var(--progress-position);

package/styles/stepper/highcontrast-light.css

@@ -391,7 +391,6 @@
 }
 .e-stepper.e-vertical .e-stepper-progressbar {
   min-height: inherit;
-  height: inherit;
   width: 1.6px;
   top: 0;
   left: var(--progress-position);

package/styles/stepper/highcontrast.css

@@ -391,7 +391,6 @@
 }
 .e-stepper.e-vertical .e-stepper-progressbar {
   min-height: inherit;
-  height: inherit;
   width: 1.6px;
   top: 0;
   left: var(--progress-position);

package/styles/stepper/material-dark.css

@@ -391,7 +391,6 @@
 }
 .e-stepper.e-vertical .e-stepper-progressbar {
   min-height: inherit;
-  height: inherit;
   width: 1.6px;
   top: 0;
   left: var(--progress-position);

package/styles/stepper/material.css

@@ -391,7 +391,6 @@
 }
 .e-stepper.e-vertical .e-stepper-progressbar {
   min-height: inherit;
-  height: inherit;
   width: 1.6px;
   top: 0;
   left: var(--progress-position);

package/styles/stepper/material3-dark.css

@@ -393,7 +393,6 @@
 }
 .e-stepper.e-vertical .e-stepper-progressbar {
   min-height: inherit;
-  height: inherit;
   width: 1.6px;
   top: 0;
   left: var(--progress-position);

package/styles/stepper/material3.css

@@ -395,7 +395,6 @@
 }
 .e-stepper.e-vertical .e-stepper-progressbar {
   min-height: inherit;
-  height: inherit;
   width: 1.6px;
   top: 0;
   left: var(--progress-position);

package/styles/stepper/tailwind-dark.css

@@ -391,7 +391,6 @@
 }
 .e-stepper.e-vertical .e-stepper-progressbar {
   min-height: inherit;
-  height: inherit;
   width: 1.6px;
   top: 0;
   left: var(--progress-position);

package/styles/stepper/tailwind.css

@@ -391,7 +391,6 @@
 }
 .e-stepper.e-vertical .e-stepper-progressbar {
   min-height: inherit;
-  height: inherit;
   width: 1.6px;
   top: 0;
   left: var(--progress-position);

package/styles/stepper/tailwind3.css

@@ -395,7 +395,6 @@
 }
 .e-stepper.e-vertical .e-stepper-progressbar {
   min-height: inherit;
-  height: inherit;
   width: 1.6px;
   top: 0;
   left: var(--progress-position);

package/styles/tab/tailwind3.css

@@ -213,7 +213,7 @@
 }
 .e-tab .e-tab-header .e-toolbar-item .e-tab-text {
   display: inherit;
-  font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", arial, "Noto Sans", "Liberation Sans", sans-serif, "apple color emoji", "Segoe UI emoji", "Segoe UI Symbol", "Noto color emoji";
+  font-family: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", arial, "Noto Sans", "Liberation Sans", sans-serif, "apple color emoji", "Segoe UI emoji", "Segoe UI Symbol", "Noto color emoji";
   font-size: 14px;
   font-weight: 500;
   text-transform: capitalize;
@@ -996,7 +996,7 @@
 .e-tab .e-tab-header.e-vertical .e-hor-nav .e-popup-up-icon::before,
 .e-tab .e-tab-header.e-vertical .e-hor-nav .e-popup-down-icon::before {
   float: left;
-  font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", arial, "Noto Sans", "Liberation Sans", sans-serif, "apple color emoji", "Segoe UI emoji", "Segoe UI Symbol", "Noto color emoji";
+  font-family: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", arial, "Noto Sans", "Liberation Sans", sans-serif, "apple color emoji", "Segoe UI emoji", "Segoe UI Symbol", "Noto color emoji";
   font-size: 14px;
   font-weight: 500;
   line-height: 36px;
@@ -1684,7 +1684,7 @@
 }
 .e-tab-clone-element .e-tab-text {
   display: inherit;
-  font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", arial, "Noto Sans", "Liberation Sans", sans-serif, "apple color emoji", "Segoe UI emoji", "Segoe UI Symbol", "Noto color emoji";
+  font-family: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", arial, "Noto Sans", "Liberation Sans", sans-serif, "apple color emoji", "Segoe UI emoji", "Segoe UI Symbol", "Noto color emoji";
   font-size: 14px;
   font-weight: 500;
   text-transform: capitalize;

package/styles/tailwind-dark-lite.css

@@ -8724,7 +8724,6 @@ ejs-sidebar {
 }
 .e-stepper.e-vertical .e-stepper-progressbar {
   min-height: inherit;
-  height: inherit;
   width: 1.6px;
   top: 0;
   left: var(--progress-position);

package/styles/tailwind-dark.css

@@ -11347,7 +11347,6 @@ ejs-sidebar {
 }
 .e-stepper.e-vertical .e-stepper-progressbar {
   min-height: inherit;
-  height: inherit;
   width: 1.6px;
   top: 0;
   left: var(--progress-position);

package/styles/tailwind-lite.css

@@ -8724,7 +8724,6 @@ ejs-sidebar {
 }
 .e-stepper.e-vertical .e-stepper-progressbar {
   min-height: inherit;
-  height: inherit;
   width: 1.6px;
   top: 0;
   left: var(--progress-position);

package/styles/tailwind.css

@@ -11347,7 +11347,6 @@ ejs-sidebar {
 }
 .e-stepper.e-vertical .e-stepper-progressbar {
   min-height: inherit;
-  height: inherit;
   width: 1.6px;
   top: 0;
   left: var(--progress-position);

package/styles/tailwind3-lite.css

@@ -69,7 +69,7 @@
   float: right;
   padding-bottom: 0;
   padding-right: 0;
-  padding-top: 6px;
+  padding-top: 5px;
 }
 .e-pager .e-pagesizes {
   display: inline;
@@ -484,6 +484,19 @@
 .e-pager.sf-pager .e-pagercontainer .e-last {
   font-size: 14px;
 }
+.e-pager.sf-pager .e-pagercontainer .e-firstpage,
+.e-pager.sf-pager .e-pagercontainer .e-prevpage,
+.e-pager.sf-pager .e-pagercontainer .e-firstpagedisabled,
+.e-pager.sf-pager .e-pagercontainer .e-prevpagedisabled,
+.e-pager.sf-pager .e-pagercontainer .e-nextpage,
+.e-pager.sf-pager .e-pagercontainer .e-lastpage,
+.e-pager.sf-pager .e-pagercontainer .e-nextpagedisabled,
+.e-pager.sf-pager .e-pagercontainer .e-lastpagedisabled {
+  padding: 7.1px 8.6px 8.5px;
+}
+.e-pager.sf-pager .e-spacing {
+  padding: 7.6px 11.85px 7.8px 11.8px;
+}
 .e-pager.sf-pager .e-numericcontainer a {
   font-size: 14px;
 }
@@ -2870,7 +2883,7 @@
 }
 .e-contextmenu-wrapper ul.e-ul,
 .e-contextmenu-container ul.e-ul {
-  font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", arial, "Noto Sans", "Liberation Sans", sans-serif, "apple color emoji", "Segoe UI emoji", "Segoe UI Symbol", "Noto color emoji";
+  font-family: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", arial, "Noto Sans", "Liberation Sans", sans-serif, "apple color emoji", "Segoe UI emoji", "Segoe UI Symbol", "Noto color emoji";
 }
 .e-contextmenu-wrapper ul .e-menu-item,
 .e-contextmenu-container ul .e-menu-item {
@@ -3373,7 +3386,7 @@
 }
 .e-tab .e-tab-header .e-toolbar-item .e-tab-text {
   display: inherit;
-  font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", arial, "Noto Sans", "Liberation Sans", sans-serif, "apple color emoji", "Segoe UI emoji", "Segoe UI Symbol", "Noto color emoji";
+  font-family: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", arial, "Noto Sans", "Liberation Sans", sans-serif, "apple color emoji", "Segoe UI emoji", "Segoe UI Symbol", "Noto color emoji";
   font-size: 14px;
   font-weight: 500;
   text-transform: capitalize;
@@ -4156,7 +4169,7 @@
 .e-tab .e-tab-header.e-vertical .e-hor-nav .e-popup-up-icon::before,
 .e-tab .e-tab-header.e-vertical .e-hor-nav .e-popup-down-icon::before {
   float: left;
-  font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", arial, "Noto Sans", "Liberation Sans", sans-serif, "apple color emoji", "Segoe UI emoji", "Segoe UI Symbol", "Noto color emoji";
+  font-family: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", arial, "Noto Sans", "Liberation Sans", sans-serif, "apple color emoji", "Segoe UI emoji", "Segoe UI Symbol", "Noto color emoji";
   font-size: 14px;
   font-weight: 500;
   line-height: 36px;
@@ -4844,7 +4857,7 @@
 }
 .e-tab-clone-element .e-tab-text {
   display: inherit;
-  font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", arial, "Noto Sans", "Liberation Sans", sans-serif, "apple color emoji", "Segoe UI emoji", "Segoe UI Symbol", "Noto color emoji";
+  font-family: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", arial, "Noto Sans", "Liberation Sans", sans-serif, "apple color emoji", "Segoe UI emoji", "Segoe UI Symbol", "Noto color emoji";
   font-size: 14px;
   font-weight: 500;
   text-transform: capitalize;
@@ -6708,7 +6721,7 @@
 }
 .e-treeview.e-drag-item {
   background-color: var(--color-sf-content-bg-color-alt4);
-  font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", arial, "Noto Sans", "Liberation Sans", sans-serif, "apple color emoji", "Segoe UI emoji", "Segoe UI Symbol", "Noto color emoji";
+  font-family: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", arial, "Noto Sans", "Liberation Sans", sans-serif, "apple color emoji", "Segoe UI emoji", "Segoe UI Symbol", "Noto color emoji";
 }
 .e-treeview.e-drag-item .e-icon-collapsible::before,
 .e-treeview.e-drag-item .e-icon-expandable::before {
@@ -7218,7 +7231,7 @@ ejs-sidebar {
 .e-menu-wrapper .e-menu-header,
 .e-menu-container .e-menu-header {
   display: none;
-  font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", arial, "Noto Sans", "Liberation Sans", sans-serif, "apple color emoji", "Segoe UI emoji", "Segoe UI Symbol", "Noto color emoji";
+  font-family: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", arial, "Noto Sans", "Liberation Sans", sans-serif, "apple color emoji", "Segoe UI emoji", "Segoe UI Symbol", "Noto color emoji";
   font-size: 16px;
   font-weight: 400;
   height: 38px;
@@ -7247,6 +7260,7 @@ ejs-sidebar {
 .e-menu-wrapper .e-menu-hscroll.e-hscroll:not(.e-scroll-device) .e-scroll-nav,
 .e-menu-container .e-menu-hscroll.e-hscroll:not(.e-scroll-device) .e-scroll-nav {
   width: 28px;
+  min-height: 38px;
 }
 .e-menu-wrapper .e-menu-hscroll.e-hscroll:not(.e-scroll-device) .e-scroll-nav:focus, .e-menu-wrapper .e-menu-hscroll.e-hscroll:not(.e-scroll-device) .e-scroll-nav:hover,
 .e-menu-container .e-menu-hscroll.e-hscroll:not(.e-scroll-device) .e-scroll-nav:focus,
@@ -7719,6 +7733,10 @@ ejs-sidebar {
 .e-menu-container.e-menu-popup.e-sfcontextmenu .e-menu-vscroll {
   background: inherit;
 }
+.e-menu-wrapper .e-menu-hscroll.e-hscroll .e-scroll-nav,
+.e-menu-container .e-menu-hscroll.e-hscroll .e-scroll-nav {
+  background: transparent;
+}
 .e-menu-wrapper .e-menu-hscroll.e-hscroll .e-scroll-nav .e-nav-arrow.e-icons,
 .e-menu-container .e-menu-hscroll.e-hscroll .e-scroll-nav .e-nav-arrow.e-icons {
   color: var(--color-sf-secondary-text-color-focus);
@@ -7863,7 +7881,10 @@ ejs-sidebar {
       flex-shrink: 0;
 }
 .e-breadcrumb .e-breadcrumb-item .e-breadcrumb-text {
-  padding: 0;
+  padding: 2px;
+}
+.e-breadcrumb .e-breadcrumb-item.e-icon-item .e-breadcrumb-text {
+  padding: 3px;
 }
 .e-breadcrumb .e-breadcrumb-item .e-breadcrumb-text {
   -webkit-box-align: center;
@@ -8803,7 +8824,6 @@ ejs-sidebar {
 }
 .e-stepper.e-vertical .e-stepper-progressbar {
   min-height: inherit;
-  height: inherit;
   width: 1.6px;
   top: 0;
   left: var(--progress-position);