@syncfusion/ej2-navigations 25.2.6 → 26.1.35-750253

package/styles/treeview/tailwind.css

@@ -25,11 +25,23 @@
 }
 
 /* stylelint-disable property-no-vendor-prefix */
+@-webkit-keyframes rotation {
+  from {
+    -webkit-transform: rotate(0deg);
+    transform: rotate(0deg);
+  }
+  to {
+    -webkit-transform: rotate(359deg);
+    transform: rotate(359deg);
+  }
+}
 @keyframes rotation {
   from {
+    -webkit-transform: rotate(0deg);
     transform: rotate(0deg);
   }
   to {
+    -webkit-transform: rotate(359deg);
     transform: rotate(359deg);
   }
 }
@@ -58,13 +70,13 @@
   line-height: 17px;
   width: 18px;
 }
-.e-bigger .e-treeview .e-list-item .e-small.e-css.e-checkbox-wrapper .e-check,
-.e-treeview.e-bigger .e-list-item .e-small.e-css.e-checkbox-wrapper .e-check {
+.e-bigger .e-treeview .e-list-item .e-small.e-css.e-checkbox-wrapper .e-check, .e-bigger .e-treeview .e-list-item .e-small.e-css.e-checkbox-wrapper .e-stop,
+.e-treeview.e-bigger .e-list-item .e-small.e-css.e-checkbox-wrapper .e-check,
+.e-treeview.e-bigger .e-list-item .e-small.e-css.e-checkbox-wrapper .e-stop {
   font-size: 12px;
 }
 .e-bigger .e-treeview .e-list-item .e-small.e-css.e-checkbox-wrapper .e-stop,
 .e-treeview.e-bigger .e-list-item .e-small.e-css.e-checkbox-wrapper .e-stop {
-  font-size: 12px;
   line-height: 17px;
 }
 .e-bigger .e-treeview .e-list-item .e-checkbox-wrapper + .e-list-text,
@@ -76,20 +88,13 @@
 .e-treeview.e-bigger .e-icon-collapsible,
 .e-treeview.e-bigger .e-icon-expandable {
   height: 24px;
-  margin: 0 0 0 -24px;
   width: 24px;
+  margin: 0 0 0 -24px;
 }
 .e-bigger .e-treeview.e-drag-item .e-drop-count,
 .e-treeview.e-bigger.e-drag-item .e-drop-count {
   padding: 3px 5px 4px;
 }
-.e-bigger .e-treeview .e-navigable .e-text-content,
-.e-treeview.e-bigger .e-navigable .e-text-content {
-  -ms-flex-align: center;
-      align-items: center;
-  display: -ms-flexbox;
-  display: flex;
-}
 .e-bigger .e-treeview .e-navigable .e-list-text,
 .e-treeview.e-bigger .e-navigable .e-list-text {
   padding: 0;
@@ -282,6 +287,16 @@
   position: relative;
   white-space: nowrap;
 }
+.e-treeview.e-virtualization {
+  overflow: auto;
+}
+.e-treeview.e-virtualization .e-virtual-mask {
+  display: block;
+  margin-bottom: 20px;
+}
+.e-treeview.e-virtualization .e-ul {
+  overflow: unset;
+}
 .e-treeview > .e-ul {
   -webkit-overflow-scrolling: touch;
   overflow: auto;
@@ -317,29 +332,10 @@
   margin: 0;
   padding: 0 0 0 12px;
 }
-.e-treeview li.e-node-collapsed .e-list-item .e-fullrow {
-  display: none;
-}
+.e-treeview .e-node-collapsed .e-list-item .e-fullrow,
 .e-treeview .e-display-none {
   display: none;
 }
-.e-treeview .e-list-item.e-active {
-  font-weight: 600;
-}
-.e-treeview .e-list-item div.e-icons.interaction {
-  -webkit-transition: -webkit-transform 0.3s ease-in-out;
-  border-radius: 15px;
-  transition: transform 0.3s ease-in-out;
-}
-.e-treeview .e-list-item .e-icons.e-icon-collapsible {
-  transform: rotate(90deg);
-}
-.e-treeview.e-drag-item.e-rtl .e-icons.e-drop-next {
-  transform: rotate(180deg);
-}
-.e-treeview.e-rtl div.e-icons {
-  transform: rotate(180deg);
-}
 .e-treeview .e-list-item {
   list-style: none;
 }
@@ -356,6 +352,20 @@
   pointer-events: none;
   touch-action: none;
 }
+.e-treeview .e-list-item.e-active {
+  font-weight: 600;
+}
+.e-treeview .e-list-item div.e-icons.interaction {
+  -webkit-transition: -webkit-transform 0.3s ease-in-out;
+  border-radius: 15px;
+  transition: -webkit-transform 0.3s ease-in-out;
+  transition: transform 0.3s ease-in-out;
+  transition: transform 0.3s ease-in-out, -webkit-transform 0.3s ease-in-out;
+}
+.e-treeview .e-list-item .e-icons.e-icon-collapsible {
+  -webkit-transform: rotate(90deg);
+  transform: rotate(90deg);
+}
 .e-treeview .e-list-item .e-icons.e-icons-spinner::before {
   content: none;
 }
@@ -369,6 +379,7 @@
   position: relative;
 }
 .e-treeview .e-text-content {
+  -moz-user-select: none;
   -ms-user-select: none;
   -webkit-user-select: none;
   user-select: none;
@@ -377,12 +388,17 @@
   margin: 0;
   padding: 0 0 0 20px;
 }
+.e-treeview .e-text-content + .e-sibling {
+  margin-top: -2px;
+}
 .e-treeview .e-fullrow {
+  -moz-user-select: none;
   -ms-user-select: none;
   -webkit-user-select: none;
   user-select: none;
   border: 1px solid;
-  box-sizing: border-box;
+  -webkit-box-sizing: border-box;
+          box-sizing: border-box;
   cursor: pointer;
   height: 38px;
   left: 0;
@@ -410,7 +426,8 @@
   width: 32px;
 }
 .e-treeview .e-list-text {
-  box-sizing: border-box;
+  -webkit-box-sizing: border-box;
+          box-sizing: border-box;
   display: inline-block;
   line-height: 36px;
   margin: 0;
@@ -459,24 +476,24 @@
   padding: 0px;
 }
 .e-treeview .e-load {
+  -webkit-animation: rotation 0.5s infinite linear;
   animation: rotation 0.5s infinite linear;
 }
 .e-treeview .e-sibling {
   width: 144px;
-  position: absolute;
-  z-index: 2;
-}
-.e-treeview .e-text-content + .e-sibling {
-  margin-top: -2px;
 }
 .e-treeview .e-sibling::before {
   left: 0;
   height: 2px;
   top: -1.5px;
+}
+.e-treeview .e-sibling,
+.e-treeview .e-sibling::before {
   position: absolute;
   z-index: 2;
 }
 .e-treeview .e-popup {
+  -moz-user-select: none;
   -ms-user-select: none;
   -webkit-user-select: none;
   user-select: none;
@@ -500,8 +517,7 @@
   padding: 4px;
   width: 26px;
 }
-.e-treeview .e-popup .e-downtail::before,
-.e-treeview .e-popup .e-downtail::after {
+.e-treeview .e-popup .e-downtail::before, .e-treeview .e-popup .e-downtail::after {
   border: 10px solid transparent;
   content: "";
   height: 0;
@@ -523,8 +539,10 @@
   pointer-events: auto;
 }
 .e-treeview .e-navigable .e-text-content {
-  -ms-flex-align: center;
-      align-items: center;
+  -webkit-box-align: center;
+      -ms-flex-align: center;
+          align-items: center;
+  display: -webkit-box;
   display: -ms-flexbox;
   display: flex;
 }
@@ -569,7 +587,8 @@
 .e-treeview.e-drag-item .e-drop-count {
   border: 1px solid;
   border-radius: 15px;
-  box-sizing: content-box;
+  -webkit-box-sizing: content-box;
+          box-sizing: content-box;
   font-size: 12px;
   line-height: normal;
   min-width: 12px;
@@ -632,6 +651,10 @@
 .e-treeview.e-rtl .e-sibling::before {
   right: 0;
 }
+.e-treeview.e-rtl.e-drag-item .e-icons.e-drop-next {
+  -webkit-transform: rotate(180deg);
+          transform: rotate(180deg);
+}
 .e-treeview.e-rtl.e-drag-item .e-text-content {
   float: right;
 }
@@ -642,6 +665,10 @@
 .e-treeview.e-rtl.e-drag-item .e-drop-count {
   margin-right: -12px;
 }
+.e-treeview.e-rtl div.e-icons {
+  -webkit-transform: rotate(180deg);
+          transform: rotate(180deg);
+}
 .e-treeview.e-disabled .e-fullrow,
 .e-treeview.e-disabled .e-icons,
 .e-treeview.e-disabled .e-text-content,
@@ -693,25 +720,41 @@
 .e-treeview .e-icon-expandable::before {
   font-size: 20px;
 }
-.e-treeview .e-list-item.e-active,
-.e-treeview .e-list-item.e-hover,
-.e-treeview .e-list-item.e-node-focus {
+.e-treeview .e-list-item.e-hover, .e-treeview .e-list-item.e-node-focus {
   background: transparent;
 }
-.e-treeview .e-list-item.e-hover > .e-text-content,
-.e-treeview .e-list-item.e-node-focus > .e-text-content {
+.e-treeview .e-list-item.e-hover > .e-fullrow, .e-treeview .e-list-item.e-node-focus > .e-fullrow {
+  background-color: #f3f4f6;
+  border-color: #f3f4f6;
+}
+.e-treeview .e-list-item.e-hover > .e-text-content, .e-treeview .e-list-item.e-node-focus > .e-text-content {
   color: #111827;
 }
-.e-treeview .e-list-item.e-hover > .e-text-content .e-list-text,
-.e-treeview .e-list-item.e-node-focus > .e-text-content .e-list-text {
+.e-treeview .e-list-item.e-hover > .e-text-content .e-list-text, .e-treeview .e-list-item.e-node-focus > .e-text-content .e-list-text {
   color: #111827;
 }
 .e-treeview .e-list-item.e-hover > .e-text-content .e-icon-collapsible,
-.e-treeview .e-list-item.e-hover > .e-text-content .e-icon-expandable,
-.e-treeview .e-list-item.e-node-focus > .e-text-content .e-icon-collapsible,
+.e-treeview .e-list-item.e-hover > .e-text-content .e-icon-expandable, .e-treeview .e-list-item.e-node-focus > .e-text-content .e-icon-collapsible,
 .e-treeview .e-list-item.e-node-focus > .e-text-content .e-icon-expandable {
   color: #374151;
 }
+.e-treeview .e-list-item.e-active {
+  background: transparent;
+}
+.e-treeview .e-list-item.e-active > .e-fullrow {
+  background-color: #e5e7eb;
+  border-color: #e5e7eb;
+}
+.e-treeview .e-list-item.e-active.e-animation-active > .e-fullrow {
+  background-color: transparent;
+  border-color: transparent;
+}
+.e-treeview .e-list-item.e-active.e-animation-active > .e-text-content {
+  color: #111827;
+}
+.e-treeview .e-list-item.e-active.e-animation-active > .e-text-content .e-list-text {
+  color: #111827;
+}
 .e-treeview .e-list-item.e-active > .e-text-content {
   color: #111827;
 }
@@ -722,67 +765,36 @@
 .e-treeview .e-list-item.e-active > .e-text-content .e-icon-expandable {
   color: #111827;
 }
-.e-treeview .e-list-item.e-active.e-hover > .e-text-content,
-.e-treeview .e-list-item.e-active.e-node-focus > .e-text-content {
+.e-treeview .e-list-item.e-active.e-hover > .e-fullrow, .e-treeview .e-list-item.e-active.e-node-focus > .e-fullrow {
+  background-color: #d6d9e0;
+  border-color: #f3f4f6;
+}
+.e-treeview .e-list-item.e-active.e-hover > .e-text-content, .e-treeview .e-list-item.e-active.e-node-focus > .e-text-content {
   color: #111827;
 }
-.e-treeview .e-list-item.e-active.e-hover > .e-text-content .e-list-text,
-.e-treeview .e-list-item.e-active.e-node-focus > .e-text-content .e-list-text {
+.e-treeview .e-list-item.e-active.e-hover > .e-text-content .e-list-text, .e-treeview .e-list-item.e-active.e-node-focus > .e-text-content .e-list-text {
   color: #111827;
 }
 .e-treeview .e-list-item.e-active.e-hover > .e-text-content .e-icon-collapsible,
-.e-treeview .e-list-item.e-active.e-hover > .e-text-content .e-icon-expandable,
-.e-treeview .e-list-item.e-active.e-node-focus > .e-text-content .e-icon-collapsible,
+.e-treeview .e-list-item.e-active.e-hover > .e-text-content .e-icon-expandable, .e-treeview .e-list-item.e-active.e-node-focus > .e-text-content .e-icon-collapsible,
 .e-treeview .e-list-item.e-active.e-node-focus > .e-text-content .e-icon-expandable {
   color: #374151;
 }
-.e-treeview .e-list-item.e-editing.e-active > .e-text-content,
-.e-treeview .e-list-item.e-editing.e-hover > .e-text-content,
-.e-treeview .e-list-item.e-editing.e-node-focus > .e-text-content {
-  color: #111827;
-}
-.e-treeview .e-list-item.e-editing.e-active > .e-text-content .e-list-text,
-.e-treeview .e-list-item.e-editing.e-hover > .e-text-content .e-list-text,
-.e-treeview .e-list-item.e-editing.e-node-focus > .e-text-content .e-list-text {
-  color: #111827;
-}
-.e-treeview .e-list-item.e-editing.e-active > .e-text-content .e-icon-collapsible,
-.e-treeview .e-list-item.e-editing.e-active > .e-text-content .e-icon-expandable,
-.e-treeview .e-list-item.e-editing.e-hover > .e-text-content .e-icon-collapsible,
-.e-treeview .e-list-item.e-editing.e-hover > .e-text-content .e-icon-expandable,
-.e-treeview .e-list-item.e-editing.e-node-focus > .e-text-content .e-icon-collapsible,
-.e-treeview .e-list-item.e-editing.e-node-focus > .e-text-content .e-icon-expandable {
-  color: #6b7280;
-}
-.e-treeview .e-list-item.e-hover > .e-fullrow,
-.e-treeview .e-list-item.e-node-focus > .e-fullrow {
-  background-color: #f3f4f6;
-  border-color: #f3f4f6;
-}
-.e-treeview .e-list-item.e-active > .e-fullrow {
-  background-color: #e5e7eb;
-  border-color: #e5e7eb;
-}
-.e-treeview .e-list-item.e-active.e-animation-active > .e-fullrow {
+.e-treeview .e-list-item.e-editing.e-active > .e-fullrow, .e-treeview .e-list-item.e-editing.e-hover > .e-fullrow, .e-treeview .e-list-item.e-editing.e-node-focus > .e-fullrow {
   background-color: transparent;
   border-color: transparent;
 }
-.e-treeview .e-list-item.e-active.e-animation-active > .e-text-content {
+.e-treeview .e-list-item.e-editing.e-active > .e-text-content, .e-treeview .e-list-item.e-editing.e-hover > .e-text-content, .e-treeview .e-list-item.e-editing.e-node-focus > .e-text-content {
   color: #111827;
 }
-.e-treeview .e-list-item.e-active.e-animation-active > .e-text-content .e-list-text {
+.e-treeview .e-list-item.e-editing.e-active > .e-text-content .e-list-text, .e-treeview .e-list-item.e-editing.e-hover > .e-text-content .e-list-text, .e-treeview .e-list-item.e-editing.e-node-focus > .e-text-content .e-list-text {
   color: #111827;
 }
-.e-treeview .e-list-item.e-active.e-hover > .e-fullrow,
-.e-treeview .e-list-item.e-active.e-node-focus > .e-fullrow {
-  background-color: #d6d9e0;
-  border-color: #f3f4f6;
-}
-.e-treeview .e-list-item.e-editing.e-active > .e-fullrow,
-.e-treeview .e-list-item.e-editing.e-hover > .e-fullrow,
-.e-treeview .e-list-item.e-editing.e-node-focus > .e-fullrow {
-  background-color: transparent;
-  border-color: transparent;
+.e-treeview .e-list-item.e-editing.e-active > .e-text-content .e-icon-collapsible,
+.e-treeview .e-list-item.e-editing.e-active > .e-text-content .e-icon-expandable, .e-treeview .e-list-item.e-editing.e-hover > .e-text-content .e-icon-collapsible,
+.e-treeview .e-list-item.e-editing.e-hover > .e-text-content .e-icon-expandable, .e-treeview .e-list-item.e-editing.e-node-focus > .e-text-content .e-icon-collapsible,
+.e-treeview .e-list-item.e-editing.e-node-focus > .e-text-content .e-icon-expandable {
+  color: #6b7280;
 }
 .e-treeview .e-list-item.e-disable > .e-text-content,
 .e-treeview .e-list-item.e-disable > .e-fullrow {
@@ -811,8 +823,7 @@
 .e-treeview .e-popup .e-downtail::after {
   border-top-color: #f3f4f6;
 }
-.e-treeview:not(.e-fullrow-wrap) .e-list-item.e-hover > .e-text-content,
-.e-treeview:not(.e-fullrow-wrap) .e-list-item.e-node-focus > .e-text-content {
+.e-treeview:not(.e-fullrow-wrap) .e-list-item.e-hover > .e-text-content, .e-treeview:not(.e-fullrow-wrap) .e-list-item.e-node-focus > .e-text-content {
   background-color: #f3f4f6;
   border-color: #f3f4f6;
 }
@@ -820,14 +831,11 @@
   background-color: #e5e7eb;
   border-color: #e5e7eb;
 }
-.e-treeview:not(.e-fullrow-wrap) .e-list-item.e-active.e-hover > .e-text-content,
-.e-treeview:not(.e-fullrow-wrap) .e-list-item.e-active.e-node-focus > .e-text-content {
+.e-treeview:not(.e-fullrow-wrap) .e-list-item.e-active.e-hover > .e-text-content, .e-treeview:not(.e-fullrow-wrap) .e-list-item.e-active.e-node-focus > .e-text-content {
   background-color: #d6d9e0;
   border-color: #f3f4f6;
 }
-.e-treeview:not(.e-fullrow-wrap) .e-list-item.e-editing.e-active > .e-text-content,
-.e-treeview:not(.e-fullrow-wrap) .e-list-item.e-editing.e-hover > .e-text-content,
-.e-treeview:not(.e-fullrow-wrap) .e-list-item.e-editing.e-node-focus > .e-text-content {
+.e-treeview:not(.e-fullrow-wrap) .e-list-item.e-editing.e-active > .e-text-content, .e-treeview:not(.e-fullrow-wrap) .e-list-item.e-editing.e-hover > .e-text-content, .e-treeview:not(.e-fullrow-wrap) .e-list-item.e-editing.e-node-focus > .e-text-content {
   background-color: transparent;
   border-color: transparent;
 }

package/styles/v-scroll/_bootstrap5.3-definition.scss

@@ -0,0 +1,49 @@
+/*! component's theme wise override definitions and variables */
+$vscroll-skin: 'bootstrap5' !default;
+$vscroll-nav-nrml-height: 38px !default;
+$vscroll-hover-font: $content-text-color-alt2 !default;
+$vscroll-active-font-color: $content-text-color-alt2 !default;
+$vscroll-border-size: 1px !default;
+$vscroll-border-type: solid !default;
+
+$vscroll-default-bg: $content-bg-color-alt2 !default;
+$vscroll-nav-nrml-minheight: 38px !default;
+$vscroll-nav-bgr-minheight: 48px !default;
+$vscroll-nav-nrml-width: 28px !default;
+$vscroll-nav-bgr-width: 48px !default;
+$vscroll-nrml-padding: 0 $vscroll-nav-nrml-width !default;
+$vscroll-bgr-padding: $vscroll-nav-bgr-width 0 !default;
+$vscroll-box-shadow: none !default;
+$vscroll-overlay-opacity: .5 !default;
+$vscroll-overlay-bg: $content-bg-color-alt2 !default;
+$vscroll-overlay-start: rgba($vscroll-overlay-bg, 0) !default;
+$vscroll-overlay-end: rgba($vscroll-overlay-bg, 1) !default;
+$vscroll-right-bg: linear-gradient(-270deg, $vscroll-overlay-start 0%, $vscroll-overlay-end 100%) !default;
+$vscroll-left-bg:  linear-gradient(-270deg, $vscroll-overlay-end 0%, $vscroll-overlay-start 100%) !default;
+
+$vscroll-device-arrow-box-shadow: $shadow !default;
+$vscroll-device-arrow-rtl-box-shadow: $shadow !default;
+$vscroll-device-arrow-bg: $content-bg-color-alt2 !default;
+$vscroll-device-arrow-border-size: 1px !default;
+$vscroll-device-arrow-border-color: $icon-color !default;
+$vscroll-device-arrow-color: $icon-color !default;
+$vscroll-device-arrow-size: 14px !default;
+$vscroll-device-arrow-width: 48px !default;
+
+$vscroll-default-icon-color: $icon-color !default;
+$vscroll-hover-bg: $content-bg-color-alt3 !default;
+$vscroll-press-bg: $content-bg-color-alt3 !default;
+$vscroll-default-border: $icon-color !default;
+$vscroll-focus-border: 0 !default;
+$vscroll-active-border: 0 !default;
+$vscroll-hover-border: 0 !default;
+$vscroll-hover-border-color: transparent !default;
+$vscroll-active-box-shadow: inset 0 3px 5px rgba(0, 0, 0, .125) !default;
+
+@mixin vscroll-btn-animation {
+  content: '';
+}
+
+@mixin vscroll-btn-animation-after {
+  content: '';
+}

package/styles/v-scroll/_fluent2-definition.scss

@@ -0,0 +1,49 @@
+/*! component's theme wise override definitions and variables */
+$vscroll-skin: $skin-name !default;
+$vscroll-nav-nrml-height: 38px !default;
+$vscroll-hover-font: $content-text-color-alt2 !default;
+$vscroll-active-font-color: $content-text-color-alt2 !default;
+$vscroll-border-size: 1px !default;
+$vscroll-border-type: solid !default;
+
+$vscroll-default-bg: $content-bg-color-alt2 !default;
+$vscroll-nav-nrml-minheight: 38px !default;
+$vscroll-nav-bgr-minheight: 48px !default;
+$vscroll-nav-nrml-width: 28px !default;
+$vscroll-nav-bgr-width: 48px !default;
+$vscroll-nrml-padding: 0 $vscroll-nav-nrml-width !default;
+$vscroll-bgr-padding: $vscroll-nav-bgr-width 0 !default;
+$vscroll-box-shadow: none !default;
+$vscroll-overlay-opacity: .5 !default;
+$vscroll-overlay-bg: $content-bg-color-alt2 !default;
+$vscroll-overlay-start: rgba($vscroll-overlay-bg, 0) !default;
+$vscroll-overlay-end: rgba($vscroll-overlay-bg, 1) !default;
+$vscroll-right-bg: linear-gradient(-270deg, $vscroll-overlay-start 0%, $vscroll-overlay-end 100%) !default;
+$vscroll-left-bg:  linear-gradient(-270deg, $vscroll-overlay-end 0%, $vscroll-overlay-start 100%) !default;
+
+$vscroll-device-arrow-box-shadow: $shadow !default;
+$vscroll-device-arrow-rtl-box-shadow: $shadow !default;
+$vscroll-device-arrow-bg: $content-bg-color-alt1 !default;
+$vscroll-device-arrow-border-size: 0 !default;
+$vscroll-device-arrow-border-color: $icon-color !default;
+$vscroll-device-arrow-color: $icon-color !default;
+$vscroll-device-arrow-size: 14px !default;
+$vscroll-device-arrow-width: 48px !default;
+
+$vscroll-default-icon-color: $icon-color !default;
+$vscroll-hover-bg: $content-bg-color-alt3 !default;
+$vscroll-press-bg: $content-bg-color-alt3 !default;
+$vscroll-default-border: $icon-color !default;
+$vscroll-focus-border: 0 !default;
+$vscroll-active-border: 0 !default;
+$vscroll-hover-border: 0 !default;
+$vscroll-hover-border-color: transparent !default;
+$vscroll-active-box-shadow: inset 0 3px 5px rgba(0, 0, 0, .125) !default;
+
+@mixin vscroll-btn-animation {
+  content: '';
+}
+
+@mixin vscroll-btn-animation-after {
+  content: '';
+}

package/styles/v-scroll/bootstrap-dark.css

@@ -42,12 +42,14 @@
   width: inherit;
 }
 .e-vscroll.e-rtl.e-scroll-device .e-scroll-nav {
-  transform: skewX(-16deg) translateX(-6px);
+  -webkit-transform: skewX(-16deg) translateX(-6px);
+          transform: skewX(-16deg) translateX(-6px);
 }
 .e-vscroll.e-rtl.e-scroll-device .e-scroll-overlay.e-scroll-down-overlay {
   left: 52px;
   right: auto;
-  transform: skewX(-16deg) translateX(-6px);
+  -webkit-transform: skewX(-16deg) translateX(-6px);
+          transform: skewX(-16deg) translateX(-6px);
 }
 .e-vscroll.e-rtl.e-scroll-device .e-scroll-overlay.e-scroll-up-overlay {
   left: auto;
@@ -57,13 +59,15 @@
   padding: 0 40px;
 }
 .e-vscroll.e-scroll-device .e-scroll-nav {
-  transform: skewX(-16deg) translateX(6px);
+  -webkit-transform: skewX(-16deg) translateX(6px);
+          transform: skewX(-16deg) translateX(6px);
   width: 52px;
   z-index: 1001;
 }
 .e-vscroll.e-scroll-device .e-scroll-nav .e-nav-arrow {
   font-size: 14px;
-  transform: skewX(16deg);
+  -webkit-transform: skewX(16deg);
+          transform: skewX(16deg);
 }
 .e-vscroll.e-scroll-device .e-scroll-overlay {
   opacity: 0.5;
@@ -75,7 +79,8 @@
 .e-vscroll.e-scroll-device .e-scroll-overlay.e-scroll-down-overlay {
   left: auto;
   right: 52px;
-  transform: skewX(-16deg) translateX(6px);
+  -webkit-transform: skewX(-16deg) translateX(6px);
+          transform: skewX(-16deg) translateX(6px);
 }
 .e-vscroll.e-scroll-device .e-scroll-overlay.e-scroll-up-overlay {
   left: 0;
@@ -102,9 +107,11 @@
   right: auto;
 }
 .e-vscroll .e-scroll-nav {
-  -ms-flex-align: center;
-      align-items: center;
+  -webkit-box-align: center;
+      -ms-flex-align: center;
+          align-items: center;
   cursor: pointer;
+  display: -webkit-box;
   display: -ms-flexbox;
   display: flex;
   height: 40px;
@@ -137,13 +144,15 @@
 }
 .e-vscroll.e-rtl.e-scroll-device .e-scroll-nav.e-scroll-right-nav {
   border-color: #acacac;
-  box-shadow: 4px 0 8px 0 rgba(0, 0, 0, 0.06);
+  -webkit-box-shadow: 4px 0 8px 0 rgba(0, 0, 0, 0.06);
+          box-shadow: 4px 0 8px 0 rgba(0, 0, 0, 0.06);
 }
 .e-vscroll.e-scroll-device .e-scroll-nav.e-scroll-right-nav {
   background-color: #858585;
   border-color: #acacac;
   border-width: 1px;
-  box-shadow: -4px 0 8px 0 rgba(0, 0, 0, 0.06);
+  -webkit-box-shadow: -4px 0 8px 0 rgba(0, 0, 0, 0.06);
+          box-shadow: -4px 0 8px 0 rgba(0, 0, 0, 0.06);
 }
 .e-vscroll.e-scroll-device .e-scroll-nav.e-scroll-right-nav .e-nav-arrow {
   color: #0070f0;
@@ -153,9 +162,11 @@
   background-repeat: repeat-x;
 }
 .e-vscroll .e-scroll-overlay.e-scroll-up-overlay {
+  background-image: -webkit-gradient(linear, left top, right top, from(#6e6e6e), to(rgba(110, 110, 110, 0)));
   background-image: linear-gradient(-270deg, #6e6e6e 0%, rgba(110, 110, 110, 0) 100%);
 }
 .e-vscroll .e-scroll-overlay.e-scroll-down-overlay {
+  background-image: -webkit-gradient(linear, left top, right top, from(rgba(110, 110, 110, 0)), to(#6e6e6e));
   background-image: linear-gradient(-270deg, rgba(110, 110, 110, 0) 0%, #6e6e6e 100%);
 }
 .e-vscroll.e-rtl .e-scroll-nav {
@@ -181,7 +192,8 @@
 .e-vscroll:not(.e-scroll-device) .e-scroll-nav:active {
   background: #959595;
   border: 0;
-  box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
+  -webkit-box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
+          box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
   color: #fff;
 }
 .e-vscroll .e-scroll-nav {