@syncfusion/ej2-navigations 27.2.4 → 28.1.33-686179

package/styles/fluent2.css

@@ -109,6 +109,9 @@
   padding: 13px 12px 10px;
   text-align: center;
 }
+.e-pager.e-mac-safari .e-numericitem {
+  vertical-align: top;
+}
 .e-pager div.e-pagermsgdiv {
   padding-right: 6px;
   padding-top: 4px;
@@ -775,6 +778,13 @@
     margin-top: 10px;
   }
 }
+@media (max-width: 769px) {
+  .e-bigger .e-pager.e-rtl div.e-parentmsgbar,
+  .e-pager.e-bigger.e-rtl div.e-parentmsgbar {
+    margin-left: 0;
+    margin-top: 10px;
+  }
+}
 .e-bigger .e-pager.e-rtl .e-pp.e-spacing.e-numericitem, .e-bigger .e-pager.e-rtl .e-np.e-spacing.e-numericitem, .e-bigger .e-pager.e-rtl .e-pp.e-spacing.e-numericitem:hover, .e-bigger .e-pager.e-rtl .e-np.e-spacing.e-numericitem:hover,
 .e-pager.e-bigger.e-rtl .e-pp.e-spacing.e-numericitem,
 .e-pager.e-bigger.e-rtl .e-np.e-spacing.e-numericitem,
@@ -1707,7 +1717,6 @@
 }
 .e-toolbar .e-popup-down-icon.e-icons,
 .e-toolbar .e-popup-up-icon.e-icons {
-  color: var(--color-sf-icon-color);
   display: -webkit-box;
   display: -ms-flexbox;
   display: flex;
@@ -1721,6 +1730,7 @@
           justify-content: center;
   width: 100%;
   font-size: 16px;
+  color: var(--color-sf-icon-color);
 }
 .e-toolbar.e-toolpop {
   overflow: visible;
@@ -3437,6 +3447,11 @@
 }
 .e-carousel .e-carousel-navigators .e-previous .e-btn:not(:disabled):focus-visible .e-btn-icon,
 .e-carousel .e-carousel-navigators .e-next .e-btn:not(:disabled):focus-visible .e-btn-icon,
+.e-carousel .e-carousel-navigators .e-play-pause .e-btn:not(:disabled):focus-visible .e-btn-icon {
+  color: var(--color-sf-icon-color);
+}
+.e-carousel .e-carousel-navigators .e-previous .e-btn:not(:disabled):focus-visible .e-btn-icon,
+.e-carousel .e-carousel-navigators .e-next .e-btn:not(:disabled):focus-visible .e-btn-icon,
 .e-carousel .e-carousel-navigators .e-play-pause .e-btn:not(:disabled):focus-visible .e-btn-icon {
   color: var(--color-sf-icon-color-hover);
 }
@@ -3546,7 +3561,7 @@
 }
 .e-contextmenu-wrapper ul.e-ul,
 .e-contextmenu-container ul.e-ul {
-  font-family: "Segoe UI", -apple-system, blinkMacSystemfont, "Roboto", "Helvetica Neue", sans-serif;
+  font-family: "Segoe UI", -apple-system, BlinkMacSystemFont, "Roboto", "Helvetica Neue", sans-serif;
 }
 .e-contextmenu-wrapper ul .e-menu-item,
 .e-contextmenu-container ul .e-menu-item {
@@ -4195,7 +4210,7 @@
 }
 .e-tab .e-tab-header .e-toolbar-item .e-tab-text {
   display: inherit;
-  font-family: "Segoe UI", -apple-system, blinkMacSystemfont, "Roboto", "Helvetica Neue", sans-serif;
+  font-family: "Segoe UI", -apple-system, BlinkMacSystemFont, "Roboto", "Helvetica Neue", sans-serif;
   font-size: 14px;
   font-weight: 600;
   text-transform: capitalize;
@@ -4984,7 +4999,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: "Segoe UI", -apple-system, blinkMacSystemfont, "Roboto", "Helvetica Neue", sans-serif;
+  font-family: "Segoe UI", -apple-system, BlinkMacSystemFont, "Roboto", "Helvetica Neue", sans-serif;
   font-size: 14px;
   font-weight: 600;
   line-height: 35px;
@@ -5687,7 +5702,7 @@
 }
 .e-tab-clone-element .e-tab-text {
   display: inherit;
-  font-family: "Segoe UI", -apple-system, blinkMacSystemfont, "Roboto", "Helvetica Neue", sans-serif;
+  font-family: "Segoe UI", -apple-system, BlinkMacSystemFont, "Roboto", "Helvetica Neue", sans-serif;
   font-size: 14px;
   font-weight: 600;
   text-transform: capitalize;
@@ -5911,17 +5926,6 @@
 .e-tab .e-tab-header .e-toolbar-item .e-tab-wrap .e-tab-icon {
   color: var(--color-sf-content-text-color-alt2);
 }
-@media screen and (max-width: 480px) {
-  .e-tab .e-tab-header .e-toolbar-item .e-tab-wrap {
-    color: var(--color-sf-content-text-color-alt3);
-  }
-  .e-tab .e-tab-header .e-toolbar-item .e-tab-wrap .e-tab-icon {
-    color: var(--color-sf-content-text-color-alt3);
-  }
-  .e-tab .e-tab-header .e-toolbar-item .e-tab-wrap .e-close-icon {
-    color: rgba(var(--color-sf-icon-color), 0.87);
-  }
-}
 .e-tab .e-tab-header .e-toolbar-item .e-tab-wrap:hover {
   background: inherit;
   border: 0;
@@ -7332,6 +7336,13 @@
   top: 0;
   vertical-align: initial;
 }
+.e-bigger .e-tab .e-tab-header.e-vertical .e-hor-nav .e-popup-up-icon,
+.e-bigger .e-tab .e-tab-header.e-vertical .e-hor-nav .e-popup-down-icon,
+.e-tab.e-bigger .e-tab-header.e-vertical .e-hor-nav .e-popup-up-icon,
+.e-tab.e-bigger .e-tab-header.e-vertical .e-hor-nav .e-popup-down-icon {
+  height: 100%;
+  width: 100%;
+}
 .e-bigger .e-tab .e-tab-header .e-hor-nav,
 .e-tab.e-bigger .e-tab-header .e-hor-nav {
   height: 46px;
@@ -8440,6 +8451,9 @@
 .e-treeview.e-text-wrap .e-list-icon + .e-list-img + .e-list-text {
   max-width: calc(100% - 60px);
 }
+.e-treeview .e-checkbox-wrapper .e-frame {
+  margin-right: 0;
+}
 .e-treeview .e-ul {
   margin: 0;
   padding: 0 0 0 12px;
@@ -8526,7 +8540,7 @@
   margin: 0 0 0 4px;
 }
 .e-treeview .e-checkbox-wrapper + .e-list-text {
-  padding: 0 4px;
+  padding: 0 12px;
 }
 .e-treeview .e-checkbox-wrapper .e-ripple-container {
   bottom: -7px;
@@ -8561,6 +8575,9 @@
   border-color: var(--color-sf-border-focus);
   border-bottom-color: var(--color-sf-border-focus);
 }
+.e-treeview .e-navigable-text {
+  padding: 0 12px;
+}
 .e-treeview .e-list-icon,
 .e-treeview .e-list-img {
   display: inline-block;
@@ -8578,6 +8595,10 @@
 .e-treeview .e-list-img + .e-list-text {
   padding: 0 12px;
 }
+.e-treeview .e-list-icon + .e-navigable-text,
+.e-treeview .e-list-img + .e-navigable-text {
+  padding: 0 12px;
+}
 .e-treeview .e-icon-collapsible,
 .e-treeview .e-icon-expandable {
   display: inline-block;
@@ -8674,7 +8695,7 @@
 }
 .e-treeview .e-navigable .e-checkbox-wrapper + .e-list-url .e-anchor-wrap .e-list-icon,
 .e-treeview .e-navigable .e-checkbox-wrapper + .e-list-url .e-anchor-wrap .e-list-img {
-  margin: 0 10px 0 2px;
+  margin: 0 12px 0 0;
 }
 .e-treeview .e-navigable .e-checkbox-wrapper + .e-list-url .e-anchor-wrap .e-list-icon + .e-list-img {
   margin: 0 12px 0 0;
@@ -8682,6 +8703,12 @@
 .e-treeview .e-navigable .e-anchor-wrap {
   padding: 0 0 0 4px;
 }
+.e-treeview .e-navigable .e-nav-wrapper {
+  padding: 0;
+}
+.e-treeview .e-navigable .e-checkbox-wrapper + .e-list-text .e-nav-wrapper:not(:has(.e-list-icon)) {
+  padding: 0;
+}
 .e-treeview .e-navigable .e-list-icon,
 .e-treeview .e-navigable .e-list-img {
   margin: 0 12px 0 0;
@@ -8737,6 +8764,9 @@
 .e-treeview.e-rtl .e-navigable .e-anchor-wrap {
   padding: 0 4px 0 0;
 }
+.e-treeview.e-rtl .e-navigable .e-nav-wrapper {
+  padding: 0;
+}
 .e-treeview.e-rtl .e-navigable .e-list-icon,
 .e-treeview.e-rtl .e-navigable .e-list-img,
 .e-treeview.e-rtl .e-navigable .e-list-icon + .e-list-img {
@@ -8957,7 +8987,7 @@
 }
 .e-treeview.e-drag-item {
   background-color: var(--color-sf-content-bg-color-alt3);
-  font-family: "Segoe UI", -apple-system, blinkMacSystemfont, "Roboto", "Helvetica Neue", sans-serif;
+  font-family: "Segoe UI", -apple-system, BlinkMacSystemFont, "Roboto", "Helvetica Neue", sans-serif;
 }
 .e-treeview.e-drag-item .e-icon-collapsible::before,
 .e-treeview.e-drag-item .e-icon-expandable::before {
@@ -9087,7 +9117,6 @@
 .e-treeview.e-bigger .e-list-text {
   line-height: 38px;
   min-height: 38px;
-  padding: 0 16px;
 }
 .e-bigger .e-treeview .e-list-text .e-input-group,
 .e-treeview.e-bigger .e-list-text .e-input-group {
@@ -9696,7 +9725,7 @@ ejs-sidebar {
 .e-menu-wrapper .e-menu-header,
 .e-menu-container .e-menu-header {
   display: none;
-  font-family: "Segoe UI", -apple-system, blinkMacSystemfont, "Roboto", "Helvetica Neue", sans-serif;
+  font-family: "Segoe UI", -apple-system, BlinkMacSystemFont, "Roboto", "Helvetica Neue", sans-serif;
   font-size: 16px;
   font-weight: 400;
   height: 40px;
@@ -10078,6 +10107,15 @@ ejs-sidebar {
 .e-menu-container .e-menu .e-menu-item.e-focused .e-menu-icon {
   color: var(--color-sf-icon-color-pressed);
 }
+.e-menu-wrapper .e-menu .e-menu-item.e-focused:focus-visible,
+.e-menu-container .e-menu .e-menu-item.e-focused:focus-visible {
+  color: var(--color-sf-content-text-color);
+}
+.e-menu-wrapper .e-menu .e-menu-item.e-focused:focus-visible .e-caret, .e-menu-wrapper .e-menu .e-menu-item.e-focused:focus-visible .e-menu-icon,
+.e-menu-container .e-menu .e-menu-item.e-focused:focus-visible .e-caret,
+.e-menu-container .e-menu .e-menu-item.e-focused:focus-visible .e-menu-icon {
+  color: var(--color-sf-icon-color);
+}
 .e-menu-wrapper .e-menu .e-menu-item.e-selected, .e-menu-wrapper .e-menu .e-menu-item.e-active-item,
 .e-menu-container .e-menu .e-menu-item.e-selected,
 .e-menu-container .e-menu .e-menu-item.e-active-item {
@@ -10101,8 +10139,8 @@ ejs-sidebar {
 .e-menu-container .e-menu .e-menu-item.e-separator {
   border-bottom-color: var(--color-sf-border-light);
 }
-.e-menu-wrapper .e-menu .e-menu-item:focus-visible,
-.e-menu-container .e-menu .e-menu-item:focus-visible {
+.e-menu-wrapper .e-menu .e-menu-item:focus-visible:not(.e-selected),
+.e-menu-container .e-menu .e-menu-item:focus-visible:not(.e-selected) {
   border-radius: 4px;
   background-color: var(--color-sf-content-bg-color);
   -webkit-box-shadow: inset 0 0 0 1px var(--color-sf-shadow-color), inset 0 0 0 2px var(--color-sf-shadow-color1);
@@ -10170,7 +10208,7 @@ ejs-sidebar {
 }
 .e-menu-wrapper .e-ul .e-menu-item:focus-visible,
 .e-menu-container .e-ul .e-menu-item:focus-visible {
-  background-color: var(--color-sf-content-bg-color);
+  background-color: var(--color-sf-flyout-bg-color-focus);
   -webkit-box-shadow: inset 0 0 0 1px var(--color-sf-shadow-color), inset 0 0 0 2px var(--color-sf-shadow-color1);
           box-shadow: inset 0 0 0 1px var(--color-sf-shadow-color), inset 0 0 0 2px var(--color-sf-shadow-color1);
   border-radius: 4px;
@@ -11641,6 +11679,7 @@ ejs-sidebar {
 }
 .e-stepper.e-vertical {
   min-height: inherit;
+  height: inherit;
   display: inline-block;
 }
 .e-stepper.e-vertical .e-step-label.e-step-label-only,
@@ -11664,6 +11703,7 @@ ejs-sidebar {
       -ms-flex-direction: column;
           flex-direction: column;
   min-height: inherit;
+  height: inherit;
   float: left;
   -webkit-box-align: start;
       -ms-flex-align: start;
@@ -11915,7 +11955,8 @@ ejs-sidebar {
   background-color: var(--color-sf-content-bg-color);
   border-color: transparent;
 }
-.e-stepper .e-step-disabled .e-indicator {
+.e-stepper .e-step-disabled .e-indicator,
+.e-stepper .e-step-disabled .e-step {
   background: var(--color-sf-content-bg-color-disabled);
   color: var(--color-sf-secondary-text-color-disabled);
 }

package/styles/h-scroll/_all.scss

@@ -1,2 +1,2 @@
-@import 'layout.scss';
-@import 'theme.scss';
+@import 'layout.scss';
+@import 'theme.scss';

package/styles/h-scroll/_bds-definition.scss

@@ -1,83 +1,83 @@
-/*! component's theme wise override definitions and variables */
-$hscroll-skin: $skin-name !default;
-$border-type: solid;
-$hscroll-hover-font: $content-text-color-alt2 !default;
-$hscroll-active-font-color: $content-text-color-alt2 !default;
-$hscroll-default-bg: $content-bg-color-alt2 !default;
-$hscroll-press-bg: $content-bg-color-alt2 !default;
-$hscroll-active-bg: $content-bg-color-alt2 !default;
-$hscroll-border-size: 1px !default;
-$hscroll-nav-nrml-minheight: 38px !default;
-$hscroll-nav-bgr-minheight: 48px !default;
-$hscroll-mob-nav-nrml-width: 40px !default;
-$hscroll-nav-nrml-width: 28px !default;
-$hscroll-nav-bgr-width: 48px !default;
-$hscroll-nrml-padding: 0 $hscroll-nav-nrml-width !default;
-$hscroll-bgr-padding: 0 $hscroll-nav-bgr-width !default;
-$hscroll-border-type: $border-type !default;
-$hscroll-box-shadow: none !default;
-$hscroll-hover-bg: $content-bg-color-alt3 !default;
-$hscroll-hover-border-color: $border-light !default;
-$hscroll-default-icon-color: $icon-color !default;
-$hscroll-focus-border: 0 !default;
-$hscroll-active-border: 0 !default;
-$hscroll-hover-border: 0 !default;
-$hscroll-active-box-shadow: none !default;
-$hscroll-overlay-opacity: .5 !default;
-$hscroll-overlay-bg: $content-bg-color-alt2 !default;
-$hscroll-overlay-start: rgba($hscroll-overlay-bg, 0) !default;
-$hscroll-overlay-end: rgba($hscroll-overlay-bg, 1) !default;
-$hscroll-right-bg: linear-gradient(-270deg, $hscroll-overlay-start 0%, $hscroll-overlay-end 100%) !default;
-$hscroll-left-bg:  linear-gradient(-270deg, $hscroll-overlay-end 0%, $hscroll-overlay-start 100%) !default;
-
-$hscroll-device-arrow-box-shadow: $shadow !default;
-$hscroll-device-arrow-rtl-box-shadow: $shadow !default;
-$hscroll-device-arrow-bg: $content-bg-color-alt2 !default;
-$hscroll-device-arrow-border-size: 1px !default;
-$hscroll-device-arrow-border-color: $border-light !default;
-$hscroll-device-arrow-color: $icon-color !default;
-$hscroll-device-arrow-size: 18px !default;
-$hscroll-device-arrow-icon-size: 18px !default;
-$hscroll-device-arrow-size-bigger: 22px !default;
-$hscroll-device-arrow-width: 48px !default;
-
-$hscroll-default-border: $hscroll-hover-border-color !default;
-$hscroll-ribble-animation-border-frame: rgba(255, 255, 255, .5) !default;
-$hscroll-ribble-animation-shadow-frame: 0 0 0 0 $hscroll-ribble-animation-border-frame !default;
-$hscroll-ribble-animation-shadow-frame-end: 0 0 0 200px rgba(255, 255, 255, .12) !default;
-
-$hscroll-nav-hover-press-bg: $hscroll-hover-bg !default;
-$hscroll-nav-hover-icons-color: $hscroll-default-icon-color !default;
-$hscroll-nav-focus-bg-color: $hscroll-hover-bg !default;
-$hscroll-nav-focus-border: $hscroll-focus-border !default;
-$hscroll-nav-active-color: $hscroll-default-icon-color !default;
-
-@mixin hscroll-btn-animation {
-  background-color: transparent;
-  border-radius: 50%;
-  border-width: 1px;
-  box-sizing: border-box;
-  content: '';
-  height: 1px;
-  left: 50%;
-  position: absolute;
-  top: 50%;
-  visibility: hidden;
-  width: 1px;
-}
-
-@mixin hscroll-btn-animation-after {
-  animation: hscroll-popup-shadow .6s ease-out 0ms;
-  visibility: visible;
-}
-
-@keyframes hscroll-popup-shadow {
-  0% {
-    border-color: $hscroll-ribble-animation-border-frame;
-    box-shadow: $hscroll-ribble-animation-shadow-frame;
-  }
-
-  100% {
-    box-shadow: $hscroll-ribble-animation-shadow-frame-end;
-  }
-}
+/*! component's theme wise override definitions and variables */
+$hscroll-skin: $skin-name !default;
+$border-type: solid;
+$hscroll-hover-font: $content-text-color-alt2 !default;
+$hscroll-active-font-color: $content-text-color-alt2 !default;
+$hscroll-default-bg: $content-bg-color-alt2 !default;
+$hscroll-press-bg: $content-bg-color-alt2 !default;
+$hscroll-active-bg: $content-bg-color-alt2 !default;
+$hscroll-border-size: 1px !default;
+$hscroll-nav-nrml-minheight: 38px !default;
+$hscroll-nav-bgr-minheight: 48px !default;
+$hscroll-mob-nav-nrml-width: 40px !default;
+$hscroll-nav-nrml-width: 28px !default;
+$hscroll-nav-bgr-width: 48px !default;
+$hscroll-nrml-padding: 0 $hscroll-nav-nrml-width !default;
+$hscroll-bgr-padding: 0 $hscroll-nav-bgr-width !default;
+$hscroll-border-type: $border-type !default;
+$hscroll-box-shadow: none !default;
+$hscroll-hover-bg: $content-bg-color-alt3 !default;
+$hscroll-hover-border-color: $border-light !default;
+$hscroll-default-icon-color: $icon-color !default;
+$hscroll-focus-border: 0 !default;
+$hscroll-active-border: 0 !default;
+$hscroll-hover-border: 0 !default;
+$hscroll-active-box-shadow: none !default;
+$hscroll-overlay-opacity: .5 !default;
+$hscroll-overlay-bg: $content-bg-color-alt2 !default;
+$hscroll-overlay-start: rgba($hscroll-overlay-bg, 0) !default;
+$hscroll-overlay-end: rgba($hscroll-overlay-bg, 1) !default;
+$hscroll-right-bg: linear-gradient(-270deg, $hscroll-overlay-start 0%, $hscroll-overlay-end 100%) !default;
+$hscroll-left-bg:  linear-gradient(-270deg, $hscroll-overlay-end 0%, $hscroll-overlay-start 100%) !default;
+
+$hscroll-device-arrow-box-shadow: $shadow !default;
+$hscroll-device-arrow-rtl-box-shadow: $shadow !default;
+$hscroll-device-arrow-bg: $content-bg-color-alt2 !default;
+$hscroll-device-arrow-border-size: 1px !default;
+$hscroll-device-arrow-border-color: $border-light !default;
+$hscroll-device-arrow-color: $icon-color !default;
+$hscroll-device-arrow-size: 18px !default;
+$hscroll-device-arrow-icon-size: 18px !default;
+$hscroll-device-arrow-size-bigger: 22px !default;
+$hscroll-device-arrow-width: 48px !default;
+
+$hscroll-default-border: $hscroll-hover-border-color !default;
+$hscroll-ribble-animation-border-frame: rgba(255, 255, 255, .5) !default;
+$hscroll-ribble-animation-shadow-frame: 0 0 0 0 $hscroll-ribble-animation-border-frame !default;
+$hscroll-ribble-animation-shadow-frame-end: 0 0 0 200px rgba(255, 255, 255, .12) !default;
+
+$hscroll-nav-hover-press-bg: $hscroll-hover-bg !default;
+$hscroll-nav-hover-icons-color: $hscroll-default-icon-color !default;
+$hscroll-nav-focus-bg-color: $hscroll-hover-bg !default;
+$hscroll-nav-focus-border: $hscroll-focus-border !default;
+$hscroll-nav-active-color: $hscroll-default-icon-color !default;
+
+@mixin hscroll-btn-animation {
+  background-color: transparent;
+  border-radius: 50%;
+  border-width: 1px;
+  box-sizing: border-box;
+  content: '';
+  height: 1px;
+  left: 50%;
+  position: absolute;
+  top: 50%;
+  visibility: hidden;
+  width: 1px;
+}
+
+@mixin hscroll-btn-animation-after {
+  animation: hscroll-popup-shadow .6s ease-out 0ms;
+  visibility: visible;
+}
+
+@keyframes hscroll-popup-shadow {
+  0% {
+    border-color: $hscroll-ribble-animation-border-frame;
+    box-shadow: $hscroll-ribble-animation-shadow-frame;
+  }
+
+  100% {
+    box-shadow: $hscroll-ribble-animation-shadow-frame-end;
+  }
+}

package/styles/h-scroll/_bigger.scss

@@ -1,39 +1,39 @@
-@include export-module('h-scroll-bigger') {
-  .e-bigger #{&}.e-hscroll,
-  #{&}.e-hscroll.e-bigger {
-    min-height: $hscroll-nav-bgr-minheight;
-
-    &:not(.e-scroll-device) {
-      padding: $hscroll-bgr-padding;
-    }
-
-    &.e-scroll-device {
-      padding-right: $hscroll-nav-bgr-width;
-    }
-
-    &.e-rtl.e-scroll-device {
-      padding-left: $hscroll-nav-bgr-width;
-      padding-right: initial;
-    }
-
-    .e-nav-arrow.e-icons {
-      font-size: $hscroll-device-arrow-size-bigger;
-    }
-
-    &.e-rtl .e-scroll-overlay.e-scroll-right-overlay {
-      left: $hscroll-nav-bgr-width;
-    }
-
-    .e-scroll-overlay {
-
-      &.e-scroll-right-overlay {
-        right: $hscroll-nav-bgr-width;
-      }
-    }
-
-    .e-scroll-nav {
-      min-height: $hscroll-nav-bgr-minheight;
-      width: $hscroll-nav-bgr-width;
-    }
-  }
-}
+@include export-module('h-scroll-bigger') {
+  .e-bigger #{&}.e-hscroll,
+  #{&}.e-hscroll.e-bigger {
+    min-height: $hscroll-nav-bgr-minheight;
+
+    &:not(.e-scroll-device) {
+      padding: $hscroll-bgr-padding;
+    }
+
+    &.e-scroll-device {
+      padding-right: $hscroll-nav-bgr-width;
+    }
+
+    &.e-rtl.e-scroll-device {
+      padding-left: $hscroll-nav-bgr-width;
+      padding-right: initial;
+    }
+
+    .e-nav-arrow.e-icons {
+      font-size: $hscroll-device-arrow-size-bigger;
+    }
+
+    &.e-rtl .e-scroll-overlay.e-scroll-right-overlay {
+      left: $hscroll-nav-bgr-width;
+    }
+
+    .e-scroll-overlay {
+
+      &.e-scroll-right-overlay {
+        right: $hscroll-nav-bgr-width;
+      }
+    }
+
+    .e-scroll-nav {
+      min-height: $hscroll-nav-bgr-minheight;
+      width: $hscroll-nav-bgr-width;
+    }
+  }
+}

package/styles/h-scroll/_bootstrap-dark-definition.scss

@@ -1,57 +1,57 @@
-//default
-$hscroll-skin: 'bootstrap' !default;
-$hscroll-default-bg: $grey-darker !default;
-$hscroll-nav-nrml-minheight: 40px !default;
-$hscroll-nav-bgr-minheight: 50px !default;
-$hscroll-mob-nav-nrml-width: 50px !default;
-$hscroll-device-arrow-width: 50px !default;
-$hscroll-device-arrow-size: 14px !default;
-$hscroll-device-arrow-icon-size: 12px !default;
-$hscroll-device-arrow-size-bigger: 14px !default;
-$hscroll-overlay-opacity: .5 !default;
-$hscroll-device-arrow-border-color: $default-border-color !default;
-$hscroll-device-arrow-rtl-box-shadow: 4px 0 8px 0 rgba($shadow, .06) !default;
-$hscroll-device-arrow-bg: $hscroll-default-bg !default;
-$hscroll-device-arrow-border-size: 0 !default;
-$hscroll-device-arrow-box-shadow: -4px 0 8px 0 rgba($shadow, .6) !default;
-$hscroll-device-arrow-color: $default-icon-color !default;
-$hscroll-overlay-bg: $hscroll-default-bg !default;
-$hscroll-overlay-start: rgba($hscroll-overlay-bg, .0001) !default;
-$hscroll-overlay-end: rgba($hscroll-overlay-bg, $hscroll-overlay-opacity) !default;
-$hscroll-right-bg: linear-gradient(to right, $hscroll-overlay-start 0, $hscroll-overlay-end 100%) !default;
-$hscroll-left-bg: linear-gradient(to right, $hscroll-overlay-end 0, $hscroll-overlay-start 100%) !default;
-$hscroll-border-size: $border-size !default;
-$hscroll-border-type: solid !default;
-$hscroll-hover-font: $hover-font-color !default;
-$hscroll-active-font-color: $active-font-color !default;
-$hscroll-nav-nrml-width: 40px !default;
-$hscroll-nav-bgr-width: 50px !default;
-$hscroll-nrml-padding: 0 $hscroll-nav-nrml-width !default;
-$hscroll-bgr-padding: 0 $hscroll-nav-bgr-width !default;
-$hscroll-box-shadow: none !default;
-
-$hscroll-default-icon-color: $grey-dark-font !default;
-$hscroll-hover-bg: $grey-light !default;
-$hscroll-press-bg: $grey-dark !default;
-$hscroll-default-border: $grey-99 !default;
-$hscroll-focus-border: 0 !default;
-$hscroll-active-border: 0 !default;
-$hscroll-hover-border: 0 !default;
-$hscroll-hover-border-color: '' !default;
-$hscroll-active-box-shadow: inset 0 3px 5px rgba(0, 0, 0, .125) !default;
-
-$hscroll-nav-hover-press-bg: $hscroll-hover-bg !default;
-$hscroll-nav-hover-icons-color: $hscroll-default-icon-color !default;
-$hscroll-nav-focus-bg-color: $hscroll-hover-bg !default;
-$hscroll-nav-focus-border: $hscroll-focus-border !default;
-$hscroll-nav-active-color: $hscroll-default-icon-color !default;
-
-@mixin hscroll-btn-animation {
-  content: '';
-}
-
-@mixin hscroll-btn-animation-after {
-  content: '';
-}
-
-//enddefault
+//default
+$hscroll-skin: 'bootstrap' !default;
+$hscroll-default-bg: $grey-darker !default;
+$hscroll-nav-nrml-minheight: 40px !default;
+$hscroll-nav-bgr-minheight: 50px !default;
+$hscroll-mob-nav-nrml-width: 50px !default;
+$hscroll-device-arrow-width: 50px !default;
+$hscroll-device-arrow-size: 14px !default;
+$hscroll-device-arrow-icon-size: 12px !default;
+$hscroll-device-arrow-size-bigger: 14px !default;
+$hscroll-overlay-opacity: .5 !default;
+$hscroll-device-arrow-border-color: $default-border-color !default;
+$hscroll-device-arrow-rtl-box-shadow: 4px 0 8px 0 rgba($shadow, .06) !default;
+$hscroll-device-arrow-bg: $hscroll-default-bg !default;
+$hscroll-device-arrow-border-size: 0 !default;
+$hscroll-device-arrow-box-shadow: -4px 0 8px 0 rgba($shadow, .6) !default;
+$hscroll-device-arrow-color: $default-icon-color !default;
+$hscroll-overlay-bg: $hscroll-default-bg !default;
+$hscroll-overlay-start: rgba($hscroll-overlay-bg, .0001) !default;
+$hscroll-overlay-end: rgba($hscroll-overlay-bg, $hscroll-overlay-opacity) !default;
+$hscroll-right-bg: linear-gradient(to right, $hscroll-overlay-start 0, $hscroll-overlay-end 100%) !default;
+$hscroll-left-bg: linear-gradient(to right, $hscroll-overlay-end 0, $hscroll-overlay-start 100%) !default;
+$hscroll-border-size: $border-size !default;
+$hscroll-border-type: solid !default;
+$hscroll-hover-font: $hover-font-color !default;
+$hscroll-active-font-color: $active-font-color !default;
+$hscroll-nav-nrml-width: 40px !default;
+$hscroll-nav-bgr-width: 50px !default;
+$hscroll-nrml-padding: 0 $hscroll-nav-nrml-width !default;
+$hscroll-bgr-padding: 0 $hscroll-nav-bgr-width !default;
+$hscroll-box-shadow: none !default;
+
+$hscroll-default-icon-color: $grey-dark-font !default;
+$hscroll-hover-bg: $grey-light !default;
+$hscroll-press-bg: $grey-dark !default;
+$hscroll-default-border: $grey-99 !default;
+$hscroll-focus-border: 0 !default;
+$hscroll-active-border: 0 !default;
+$hscroll-hover-border: 0 !default;
+$hscroll-hover-border-color: '' !default;
+$hscroll-active-box-shadow: inset 0 3px 5px rgba(0, 0, 0, .125) !default;
+
+$hscroll-nav-hover-press-bg: $hscroll-hover-bg !default;
+$hscroll-nav-hover-icons-color: $hscroll-default-icon-color !default;
+$hscroll-nav-focus-bg-color: $hscroll-hover-bg !default;
+$hscroll-nav-focus-border: $hscroll-focus-border !default;
+$hscroll-nav-active-color: $hscroll-default-icon-color !default;
+
+@mixin hscroll-btn-animation {
+  content: '';
+}
+
+@mixin hscroll-btn-animation-after {
+  content: '';
+}
+
+//enddefault