@syncfusion/ej2-navigations 20.2.49 → 20.3.47

package/styles/treeview/icons/_bootstrap5.scss

@@ -1,5 +1,5 @@
-
 @include export-module('treeview-bootstrap5-icons') {
+
   /*! TreeView icons */
   .e-treeview {
 

package/styles/treeview/icons/_fabric-dark.scss

@@ -1,5 +1,5 @@
-
 @include export-module('treeview-fabric-dark-icons') {
+
   /*! TreeView icons */
   .e-treeview {
 

package/styles/treeview/icons/_fabric.scss

@@ -1,5 +1,5 @@
-
 @include export-module('treeview-fabric-icons') {
+
   /*! TreeView icons */
   .e-treeview {
 

package/styles/treeview/icons/_fluent.scss

@@ -1,5 +1,5 @@
-
 @include export-module('treeview-fluent-icons') {
+
   /*! TreeView icons */
   .e-treeview {
 

package/styles/treeview/icons/_fusionnew.scss

@@ -1,5 +1,5 @@
-
 @include export-module('treeview-fusionnew-icons') {
+
   /*! TreeView icons */
   .e-treeview {
 

package/styles/treeview/icons/_highcontrast-light.scss

@@ -1,5 +1,5 @@
-
 @include export-module('treeview-highcontrast-light-icons') {
+
   /*! TreeView icons */
   .e-treeview {
 

package/styles/treeview/icons/_highcontrast.scss

@@ -1,5 +1,5 @@
-
 @include export-module('treeview-highcontrast-icons') {
+
   /*! TreeView icons */
   .e-treeview {
 

package/styles/treeview/icons/_material-dark.scss

@@ -1,5 +1,5 @@
-
 @include export-module('treeview-material-dark-icons') {
+
   /*! TreeView icons */
   .e-treeview {
 

package/styles/treeview/icons/_material.scss

@@ -1,5 +1,5 @@
-
 @include export-module('treeview-material-icons') {
+
   /*! TreeView icons */
   .e-treeview {
 

package/styles/treeview/icons/_material3.scss

@@ -1,5 +1,5 @@
-
 @include export-module('treeview-material3-icons') {
+
   /*! TreeView icons */
   .e-treeview {
 

package/styles/treeview/icons/_tailwind-dark.scss

@@ -1,5 +1,5 @@
-
 @include export-module('treeview-tailwind-dark-icons') {
+
   /*! TreeView icons */
   .e-treeview {
 

package/styles/treeview/icons/_tailwind.scss

@@ -1,5 +1,5 @@
-
 @include export-module('treeview-tailwind-icons') {
+
   /*! TreeView icons */
   .e-treeview {
 

package/styles/treeview/material-dark.css

@@ -1,10 +1,12 @@
 @import url("https://fonts.googleapis.com/css?family=Roboto:400,500");
+/* stylelint-disable property-no-vendor-prefix */
 @keyframes e-input-ripple {
   100% {
     opacity: 0;
     transform: scale(4);
   }
 }
+/* stylelint-disable */
 /*! TreeView icons */
 .e-treeview .e-list-item div.e-icons::before {
   content: "\e22f";
@@ -28,6 +30,7 @@
   content: "\e22a";
 }
 
+/* stylelint-disable property-no-vendor-prefix */
 @keyframes rotation {
   from {
     transform: rotate(0deg);
@@ -556,6 +559,8 @@
   pointer-events: auto;
 }
 
+/* stylelint-enable property-no-vendor-prefix */
+/* stylelint-disable property-no-vendor-prefix */
 .e-bigger .e-treeview .e-list-text,
 .e-treeview.e-bigger .e-list-text {
   font-size: 14px;
@@ -568,6 +573,7 @@
 }
 .e-treeview {
   -webkit-tap-highlight-color: transparent;
+  /* stylelint-enable property-no-vendor-prefix */
 }
 .e-treeview .e-text-content,
 .e-treeview .e-fullrow {

package/styles/treeview/material.css

@@ -1,4 +1,5 @@
 @import url("https://fonts.googleapis.com/css?family=Roboto:400,500");
+/* stylelint-disable property-no-vendor-prefix */
 @keyframes e-input-ripple {
   100% {
     opacity: 0;
@@ -14,6 +15,7 @@
   }
 }
 /*! TreeView's material theme wise override definitions and variables */
+/* stylelint-disable */
 /*! TreeView icons */
 .e-treeview .e-list-item div.e-icons::before {
   content: "\e22f";
@@ -37,6 +39,7 @@
   content: "\e22a";
 }
 
+/* stylelint-disable property-no-vendor-prefix */
 @keyframes rotation {
   from {
     transform: rotate(0deg);
@@ -560,6 +563,8 @@
   pointer-events: auto;
 }
 
+/* stylelint-enable property-no-vendor-prefix */
+/* stylelint-disable property-no-vendor-prefix */
 .e-bigger .e-treeview .e-list-text,
 .e-treeview.e-bigger .e-list-text {
   font-size: 14px;
@@ -572,6 +577,7 @@
 }
 .e-treeview {
   -webkit-tap-highlight-color: transparent;
+  /* stylelint-enable property-no-vendor-prefix */
 }
 .e-treeview .e-text-content,
 .e-treeview .e-fullrow {

package/styles/treeview/tailwind-dark.css

@@ -1,5 +1,7 @@
 @import url("https://fonts.googleapis.com/css2?family=Inter:wght@100;200;300;400;500;600;700;800;900&display=swap");
+/* stylelint-disable property-no-vendor-prefix */
 /*! TreeView's tailwind theme wise override definitions and variables */
+/* stylelint-disable */
 /*! TreeView icons */
 .e-treeview .e-list-item div.e-icons::before {
   content: "\e75c";
@@ -23,6 +25,7 @@
   content: "\e839";
 }
 
+/* stylelint-disable property-no-vendor-prefix */
 @keyframes rotation {
   from {
     transform: rotate(0deg);
@@ -344,6 +347,7 @@
 .e-treeview .e-list-item .e-ul {
   margin: 2px 0 -2px;
   padding: 0 0 0 20px;
+  margin: 2px 0 0;
 }
 .e-treeview .e-list-item.e-disable > .e-text-content,
 .e-treeview .e-list-item.e-disable > .e-fullrow {
@@ -654,6 +658,8 @@
   pointer-events: auto;
 }
 
+/* stylelint-enable property-no-vendor-prefix */
+/* stylelint-disable property-no-vendor-prefix */
 .e-bigger .e-treeview .e-list-text,
 .e-treeview.e-bigger .e-list-text {
   font-size: 16px;
@@ -666,6 +672,7 @@
 }
 .e-treeview {
   -webkit-tap-highlight-color: transparent;
+  /* stylelint-enable property-no-vendor-prefix */
 }
 .e-treeview .e-text-content,
 .e-treeview .e-fullrow {

package/styles/treeview/tailwind.css

@@ -1,5 +1,7 @@
 @import url("https://fonts.googleapis.com/css2?family=Inter:wght@100;200;300;400;500;600;700;800;900&display=swap");
+/* stylelint-disable property-no-vendor-prefix */
 /*! TreeView's tailwind theme wise override definitions and variables */
+/* stylelint-disable */
 /*! TreeView icons */
 .e-treeview .e-list-item div.e-icons::before {
   content: "\e75c";
@@ -23,6 +25,7 @@
   content: "\e839";
 }
 
+/* stylelint-disable property-no-vendor-prefix */
 @keyframes rotation {
   from {
     transform: rotate(0deg);
@@ -344,6 +347,7 @@
 .e-treeview .e-list-item .e-ul {
   margin: 2px 0 -2px;
   padding: 0 0 0 20px;
+  margin: 2px 0 0;
 }
 .e-treeview .e-list-item.e-disable > .e-text-content,
 .e-treeview .e-list-item.e-disable > .e-fullrow {
@@ -654,6 +658,8 @@
   pointer-events: auto;
 }
 
+/* stylelint-enable property-no-vendor-prefix */
+/* stylelint-disable property-no-vendor-prefix */
 .e-bigger .e-treeview .e-list-text,
 .e-treeview.e-bigger .e-list-text {
   font-size: 16px;
@@ -666,6 +672,7 @@
 }
 .e-treeview {
   -webkit-tap-highlight-color: transparent;
+  /* stylelint-enable property-no-vendor-prefix */
 }
 .e-treeview .e-text-content,
 .e-treeview .e-fullrow {

package/styles/v-scroll/_all.scss

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

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

@@ -1,8 +1,8 @@
-//default 
+//default
 $vscroll-skin: 'bootstrap' !default;
 $vscroll-nav-nrml-height: 40px !default;
-$vscroll-hover-font: $hover-font-color  !default;
-$vscroll-active-font-color: $active-font-color  !default;
+$vscroll-hover-font: $hover-font-color !default;
+$vscroll-active-font-color: $active-font-color !default;
 $vscroll-border-size: $border-size !default;
 $vscroll-border-type: solid !default;
 
@@ -38,7 +38,7 @@ $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;
+$vscroll-active-box-shadow: inset 0 3px 5px rgba(0, 0, 0, .125) !default;
 
 @mixin vscroll-btn-animation {
   content: '';
@@ -47,4 +47,5 @@ $vscroll-active-box-shadow: inset 0 3px 5px rgba(0 , 0 , 0 , .125) !default;
 @mixin vscroll-btn-animation-after {
   content: '';
 }
+
 //enddefault

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

@@ -1,8 +1,8 @@
 /*! component's theme wise override definitions and variables */
 $vscroll-skin: 'bootstrap' !default;
 $vscroll-nav-nrml-height: 40px !default;
-$vscroll-hover-font: $hover-font-color  !default;
-$vscroll-active-font-color: $active-font-color  !default;
+$vscroll-hover-font: $hover-font-color !default;
+$vscroll-active-font-color: $active-font-color !default;
 $vscroll-border-size: $border-size !default;
 $vscroll-border-type: solid !default;
 
@@ -38,7 +38,7 @@ $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;
+$vscroll-active-box-shadow: inset 0 3px 5px rgba(0, 0, 0, .125) !default;
 
 @mixin vscroll-btn-animation {
   content: '';

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

@@ -38,7 +38,7 @@ $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;
+$vscroll-active-box-shadow: inset 0 3px 5px rgba(0, 0, 0, .125) !default;
 
 @mixin vscroll-btn-animation {
   content: '';

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

@@ -1,8 +1,8 @@
 /*! 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-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;
 
@@ -38,7 +38,7 @@ $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;
+$vscroll-active-box-shadow: inset 0 3px 5px rgba(0, 0, 0, .125) !default;
 
 @mixin vscroll-btn-animation {
   content: '';

package/styles/v-scroll/_fabric-dark-definition.scss

@@ -1,8 +1,8 @@
-//default 
+//default
 $vscroll-skin: 'fabric' !default;
 $vscroll-nav-nrml-height: 40px !default;
-$vscroll-hover-font: $hover-font-color  !default;
-$vscroll-active-font-color: $active-font-color  !default;
+$vscroll-hover-font: $hover-font-color !default;
+$vscroll-active-font-color: $active-font-color !default;
 $vscroll-border-size: $border-size !default;
 $vscroll-border-type: solid !default;
 
@@ -32,8 +32,8 @@ $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: -4px 0 8px 0 rgba($shadow , .06) !default;
-$vscroll-device-arrow-rtl-box-shadow: 4px 0 8px 0 rgba($shadow , .06) !default;
+$vscroll-device-arrow-box-shadow: -4px 0 8px 0 rgba($shadow, .06) !default;
+$vscroll-device-arrow-rtl-box-shadow: 4px 0 8px 0 rgba($shadow, .06) !default;
 $vscroll-device-arrow-bg: $neutral-white !default;
 $vscroll-device-arrow-border-size: 1px !default;
 $vscroll-device-arrow-border-color: $neutral-quintenaryalt !default;
@@ -48,4 +48,5 @@ $vscroll-device-arrow-width: 52px !default;
 @mixin vscroll-btn-animation-after {
   content: '';
 }
+
 //enddefault

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

@@ -1,8 +1,8 @@
 /*! component's theme wise override definitions and variables */
 $vscroll-skin: 'fabric' !default;
 $vscroll-nav-nrml-height: 40px !default;
-$vscroll-hover-font: $hover-font-color  !default;
-$vscroll-active-font-color: $active-font-color  !default;
+$vscroll-hover-font: $hover-font-color !default;
+$vscroll-active-font-color: $active-font-color !default;
 $vscroll-border-size: $border-size !default;
 $vscroll-border-type: solid !default;
 
@@ -32,8 +32,8 @@ $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: -4px 0 8px 0 rgba($shadow , .06) !default;
-$vscroll-device-arrow-rtl-box-shadow: 4px 0 8px 0 rgba($shadow , .06) !default;
+$vscroll-device-arrow-box-shadow: -4px 0 8px 0 rgba($shadow, .06) !default;
+$vscroll-device-arrow-rtl-box-shadow: 4px 0 8px 0 rgba($shadow, .06) !default;
 $vscroll-device-arrow-bg: $neutral-white !default;
 $vscroll-device-arrow-border-size: 1px !default;
 $vscroll-device-arrow-border-color: $neutral-quintenaryalt !default;

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

@@ -1,8 +1,8 @@
 /*! component's theme wise override definitions and variables */
 $vscroll-skin: 'FluentUI' !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-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;
 
@@ -38,7 +38,7 @@ $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;
+$vscroll-active-box-shadow: inset 0 3px 5px rgba(0, 0, 0, .125) !default;
 
 @mixin vscroll-btn-animation {
   content: '';

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

@@ -1,8 +1,8 @@
 /*! 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-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;
 
@@ -38,7 +38,7 @@ $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;
+$vscroll-active-box-shadow: inset 0 3px 5px rgba(0, 0, 0, .125) !default;
 
 @mixin vscroll-btn-animation {
   content: '';

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

@@ -2,8 +2,8 @@
 $vscroll-skin: 'highcontrast' !default;
 $vscroll-dash-border: 2px solid #fff;
 $vscroll-nav-nrml-height: 40px !default;
-$vscroll-hover-font: $hover-font-color  !default;
-$vscroll-active-font-color: $active-font-color  !default;
+$vscroll-hover-font: $hover-font-color !default;
+$vscroll-active-font-color: $active-font-color !default;
 $vscroll-border-size: $border-size !default;
 $vscroll-border-type: solid !default;
 
@@ -33,8 +33,8 @@ $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: -4px 0 8px 0 rgba($shadow , .06) !default;
-$vscroll-device-arrow-rtl-box-shadow: 4px 0 8px 0 rgba($shadow , .06) !default;
+$vscroll-device-arrow-box-shadow: -4px 0 8px 0 rgba($shadow, .06) !default;
+$vscroll-device-arrow-rtl-box-shadow: 4px 0 8px 0 rgba($shadow, .06) !default;
 $vscroll-device-arrow-bg: $bg-base-15 !default;
 $vscroll-device-arrow-border-size: 1px !default;
 $vscroll-device-arrow-border-color: $border-fg !default;

package/styles/v-scroll/_highcontrast-light-definition.scss

@@ -1,9 +1,9 @@
-//default 
+//default
 $vscroll-skin: 'highcontrast' !default;
 $vscroll-dash-border: 2px solid #fff !default;
 $vscroll-nav-nrml-height: 40px !default;
-$vscroll-hover-font: $hover-font-color  !default;
-$vscroll-active-font-color: $active-font-color  !default;
+$vscroll-hover-font: $hover-font-color !default;
+$vscroll-active-font-color: $active-font-color !default;
 $vscroll-border-size: $border-size !default;
 $vscroll-border-type: solid !default;
 
@@ -33,8 +33,8 @@ $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: -4px 0 8px 0 rgba($shadow , .06) !default;
-$vscroll-device-arrow-rtl-box-shadow: 4px 0 8px 0 rgba($shadow , .06) !default;
+$vscroll-device-arrow-box-shadow: -4px 0 8px 0 rgba($shadow, .06) !default;
+$vscroll-device-arrow-rtl-box-shadow: 4px 0 8px 0 rgba($shadow, .06) !default;
 $vscroll-device-arrow-bg: $bg-base-15 !default;
 $vscroll-device-arrow-border-size: 1px !default;
 $vscroll-device-arrow-border-color: $border-fg !default;
@@ -49,4 +49,5 @@ $vscroll-device-arrow-width: 52px !default;
 @mixin vscroll-btn-animation-after {
   content: '';
 }
+
 //enddefault

package/styles/v-scroll/_layout.scss

@@ -1,4 +1,5 @@
-@include export-module('v-scroll') {
+@include export-module('v-scroll') {
+
   /*! v-scroll layout */
 
   .e-bigger #{&}.e-vscroll,
@@ -10,7 +11,7 @@
 
     .e-icons {
       font-size: 18px;
-     }
+    }
 
     &.e-rtl .e-scroll-overlay.e-scroll-down-overlay {
       left: $vscroll-nav-bgr-width;
@@ -55,7 +56,7 @@
           }
         }
       }
-   }
+    }
 
     &:not(.e-scroll-device) {
       padding: $vscroll-nrml-padding;
@@ -102,7 +103,6 @@
       display: inline-block;
       height: auto;
       position: relative;
-      touch-action: none;
       width: 100%;
 
       > * {

package/styles/v-scroll/_material-dark-definition.scss

@@ -1,8 +1,8 @@
-//default 
+//default
 $vscroll-skin: 'material' !default;
 $vscroll-nav-nrml-height: 40px !default;
-$vscroll-hover-font: $hover-font-color  !default;
-$vscroll-active-font-color: $active-font-color  !default;
+$vscroll-hover-font: $hover-font-color !default;
+$vscroll-active-font-color: $active-font-color !default;
 $vscroll-border-size: $border-size !default;
 $vscroll-border-type: solid !default;
 
@@ -32,8 +32,8 @@ $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: -4px 0 8px 0 rgba($shadow , .06) !default;
-$vscroll-device-arrow-rtl-box-shadow: 4px 0 8px 0 rgba($shadow , .06) !default;
+$vscroll-device-arrow-box-shadow: -4px 0 8px 0 rgba($shadow, .06) !default;
+$vscroll-device-arrow-rtl-box-shadow: 4px 0 8px 0 rgba($shadow, .06) !default;
 $vscroll-device-arrow-bg: $grey-50 !default;
 $vscroll-device-arrow-border-size: 1px !default;
 $vscroll-device-arrow-border-color: rgba($grey-black, .12) !default;
@@ -75,4 +75,5 @@ $vscroll-ribble-animation-shadow-frame-end: 0 0 0 200px rgba(255, 255, 255, .12)
     box-shadow: $vscroll-ribble-animation-shadow-frame-end;
   }
 }
+
 //enddefault

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

@@ -1,8 +1,8 @@
 /*! component's theme wise override definitions and variables */
 $vscroll-skin: 'material' !default;
 $vscroll-nav-nrml-height: 40px !default;
-$vscroll-hover-font: $hover-font-color  !default;
-$vscroll-active-font-color: $active-font-color  !default;
+$vscroll-hover-font: $hover-font-color !default;
+$vscroll-active-font-color: $active-font-color !default;
 $vscroll-border-size: $border-size !default;
 $vscroll-border-type: solid !default;
 
@@ -32,8 +32,8 @@ $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: -4px 0 8px 0 rgba($shadow , .06) !default;
-$vscroll-device-arrow-rtl-box-shadow: 4px 0 8px 0 rgba($shadow , .06) !default;
+$vscroll-device-arrow-box-shadow: -4px 0 8px 0 rgba($shadow, .06) !default;
+$vscroll-device-arrow-rtl-box-shadow: 4px 0 8px 0 rgba($shadow, .06) !default;
 $vscroll-device-arrow-bg: $grey-50 !default;
 $vscroll-device-arrow-border-size: 1px !default;
 $vscroll-device-arrow-border-color: rgba($grey-black, .12) !default;
@@ -51,7 +51,7 @@ $vscroll-ribble-animation-shadow-frame-end: 0 0 0 200px rgba(255, 255, 255, .12)
   border-radius: 50%;
   border-width: 1px;
   box-sizing: border-box;
-  content: '' ;
+  content: '';
   height: 1px;
   left: 50%;
   position: absolute;

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

@@ -1,8 +1,8 @@
 /*! 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-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;
 
@@ -38,7 +38,7 @@ $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;
+$vscroll-active-box-shadow: inset 0 3px 5px rgba(0, 0, 0, .125) !default;
 
 @mixin vscroll-btn-animation {
   content: '';

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

@@ -1,8 +1,8 @@
 /*! component's theme wise override definitions and variables */
 $vscroll-skin: 'tailwind' !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-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;
 
@@ -38,7 +38,7 @@ $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;
+$vscroll-active-box-shadow: inset 0 3px 5px rgba(0, 0, 0, .125) !default;
 
 @mixin vscroll-btn-animation {
   content: '';

package/styles/v-scroll/_theme.scss

@@ -1,4 +1,5 @@
-@include export-module('v-scroll-theme') {
+@include export-module('v-scroll-theme') {
+
   /*! v-scroll theme */
   #{&}.e-vscroll {
 

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

@@ -88,8 +88,6 @@
   display: inline-block;
   height: auto;
   position: relative;
-  -ms-touch-action: none;
-      touch-action: none;
   width: 100%;
 }
 .e-vscroll .e-vscroll-content > * {

package/styles/v-scroll/bootstrap.css

@@ -89,8 +89,6 @@
   display: inline-block;
   height: auto;
   position: relative;
-  -ms-touch-action: none;
-      touch-action: none;
   width: 100%;
 }
 .e-vscroll .e-vscroll-content > * {

package/styles/v-scroll/bootstrap4.css

@@ -89,8 +89,6 @@
   display: inline-block;
   height: auto;
   position: relative;
-  -ms-touch-action: none;
-      touch-action: none;
   width: 100%;
 }
 .e-vscroll .e-vscroll-content > * {