@syncfusion/ej2-navigations 16.4.47 → 16.4.52-46585

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

@@ -1,8 +1,7 @@
-$skin-name: 'highcontrast' !default;
-$hscroll-dash-border: 2px solid #fff;
+$hscroll-skin: 'highcontrast' !default;
 $hscroll-border-type: solid !default;
-$hscroll-hover-font: $hover-font-color  !default;
-$hscroll-active-font-color: $active-font-color  !default;
+$hscroll-hover-font: $hover-font-color !default;
+$hscroll-active-font-color: $active-font-color !default;
 $hscroll-default-bg: $bg-base-0 !default;
 $hscroll-press-bg: $selection-bg !default;
 $hscroll-active-bg: $selection-bg !default;
@@ -18,11 +17,11 @@ $hscroll-default-border: $border-fg !default;
 $hscroll-box-shadow: none !default;
 $hscroll-hover-bg: $hover-bg !default;
 $hscroll-hover-border-color: '' !default;
-$hscroll-focus-border: '' !default;
-$hscroll-active-border: '' !default;
-$hscroll-hover-border: '' !default;
-$hscroll-active-box-shadow: '' !default;
-$hscroll-default-icon-color: $selection-bg !default;
+$hscroll-focus-border: 0 !default;
+$hscroll-active-border: 0 !default;
+$hscroll-hover-border: 0 !default;
+$hscroll-active-box-shadow: none !default;
+$hscroll-default-icon-color: $bg-base-100 !default;
 $hscroll-overlay-opacity: .5 !default;
 $hscroll-overlay-bg: $bg-base-10 !default;
 $hscroll-overlay-start: rgba($hscroll-overlay-bg, 0) !default;
@@ -33,21 +32,20 @@ $hscroll-nav-hover-border-color: $hover-border !default;
 $hscroll-nav-active-color: $selection-font !default;
 $hscroll-nav-focus-bg-color: inherit !default;
 
-$hscroll-device-arrow-box-shadow: -4px 0 8px 0 rgba($shadow , .06) !default;
-$hscroll-device-arrow-rtl-box-shadow: 4px 0 8px 0 rgba($shadow , .06) !default;
+$hscroll-device-arrow-box-shadow: -4px 0 8px 0 rgba($shadow, .06) !default;
+$hscroll-device-arrow-rtl-box-shadow: 4px 0 8px 0 rgba($shadow, .06) !default;
 $hscroll-device-arrow-bg: $bg-base-15 !default;
 $hscroll-device-arrow-border-size: 1px !default;
 $hscroll-device-arrow-border-color: $border-fg !default;
 $hscroll-device-arrow-color: $selection-bg !default;
 $hscroll-device-arrow-size: 14px !default;
+$hscroll-device-arrow-icon-size: 12px !default;
+$hscroll-device-arrow-size-bigger: 18px !default;
 $hscroll-device-arrow-width: 52px !default;
 
-
-$hscroll-left-arrow-icon: '\e830' !default;
-$hscroll-right-arrow-icon: '\e829' !default;
-
-$hscroll-device-left-arrow-icon: '\e913' !default;
-$hscroll-device-right-arrow-icon: '\e904' !default;
+$hscroll-nav-hover-press-bg: $hscroll-press-bg !default;
+$hscroll-nav-hover-icons-color: $hscroll-default-icon-color !default;
+$hscroll-nav-focus-border: 2px solid #fff;
 
 @mixin hscroll-btn-animation {
   content: '';

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

@@ -1,50 +1,52 @@
-//default 
-$skin-name: 'highcontrast';
-$hscroll-nav-hover-border-color: $hover-border;
-$hscroll-nav-focus-bg-color: inherit;
-$hscroll-dash-border: 2px solid #fff;
-$hscroll-nav-active-color: $selection-font;
-$hscroll-default-bg: $bg-base-0;
-$hscroll-press-bg: $selection-bg;
-$hscroll-active-bg: $selection-bg;
-$hscroll-nav-nrml-minheight: 40px;
-$hscroll-nav-bgr-minheight: 50px;
-$hscroll-mob-nav-nrml-width: 50px;
-$hscroll-device-arrow-width: 50px;
-$hscroll-device-arrow-size: 14px;
-$hscroll-overlay-opacity: .5;
-$hscroll-device-arrow-border-color: $default-border-color;
-$hscroll-device-arrow-rtl-box-shadow: 4px 0 8px 0 rgba($shadow , .06);
-$hscroll-device-arrow-bg: $hscroll-default-bg;
-$hscroll-device-arrow-border-size: none;
-$hscroll-device-arrow-box-shadow: -4px 0 8px 0 rgba($shadow , .6);
-$hscroll-device-arrow-color: $default-icon-color;
-$hscroll-overlay-bg: $hscroll-default-bg;
-$hscroll-overlay-start: rgba($hscroll-overlay-bg, .0001);
-$hscroll-overlay-end: rgba($hscroll-overlay-bg, $hscroll-overlay-opacity);
-$hscroll-right-bg: linear-gradient(to right, $hscroll-overlay-start 0, $hscroll-overlay-end 100%);
-$hscroll-left-bg: linear-gradient(to right, $hscroll-overlay-end 0, $hscroll-overlay-start 100%);
-$hscroll-border-size: $border-size;
-$hscroll-border-type: solid;
-$hscroll-hover-font: $hover-font-color;
-$hscroll-active-font-color: $active-font-color;
-$hscroll-nav-nrml-width: 40px;
-$hscroll-nav-bgr-width: 50px;
-$hscroll-nrml-padding: 0 $hscroll-nav-nrml-width;
-$hscroll-bgr-padding: 0 $hscroll-nav-bgr-width;
-$hscroll-border-size: 1px;
-$hscroll-default-border: $border-fg;
-$hscroll-box-shadow: none;
-$hscroll-hover-bg: $hover-bg;
-$hscroll-hover-border-color: '';
-$hscroll-focus-border: '';
-$hscroll-active-border: '';
-$hscroll-hover-border: '';
-$hscroll-active-box-shadow: '';
-$hscroll-default-icon-color: $selection-bg;
+//default
+$hscroll-skin: 'highcontrast' !default;
+$hscroll-nav-hover-border-color: $hover-border !default;
+$hscroll-nav-focus-bg-color: inherit !default;
+$hscroll-nav-active-color: $selection-font !default;
+$hscroll-default-bg: $bg-base-0 !default;
+$hscroll-press-bg: $selection-bg !default;
+$hscroll-active-bg: $selection-bg !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: 18px !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-border-size: 1px !default;
+$hscroll-default-border: $border-fg !default;
+$hscroll-box-shadow: none !default;
+$hscroll-hover-bg: $hover-bg !default;
+$hscroll-hover-border-color: '' !default;
+$hscroll-focus-border: 0 !default;
+$hscroll-active-border: 0 !default;
+$hscroll-hover-border: 0 !default;
+$hscroll-active-box-shadow: none !default;
+$hscroll-default-icon-color: $selection-bg !default;
 
-$hscroll-left-arrow-icon: '\e830';
-$hscroll-right-arrow-icon: '\e829';
+$hscroll-nav-hover-press-bg: $hscroll-press-bg !default;
+$hscroll-nav-hover-icons-color: $hscroll-default-icon-color !default;
+$hscroll-nav-focus-border: 2px solid #fff !default;
 
 @mixin hscroll-btn-animation {
   content: '';
@@ -53,4 +55,5 @@ $hscroll-right-arrow-icon: '\e829';
 @mixin hscroll-btn-animation-after {
   content: '';
 }
+
 //enddefault

package/styles/h-scroll/_layout.scss

@@ -1,4 +1,5 @@
-@include export-module('h-scroll') {
+@include export-module('h-scroll') {
+
   /*! h-scroll layout */
 
   .e-bigger #{&}.e-hscroll,
@@ -18,9 +19,9 @@
       padding-right: initial;
     }
 
-    .e-icons {
-      font-size: 18px;
-     }
+    .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;
@@ -37,7 +38,6 @@
       min-height: $hscroll-nav-bgr-minheight;
       width: $hscroll-nav-bgr-width;
     }
-
   }
 
   #{&}.e-hscroll {
@@ -69,7 +69,7 @@
           }
         }
       }
-   }
+    }
 
     &:not(.e-scroll-device) {
       padding: $hscroll-nrml-padding;
@@ -120,18 +120,18 @@
 
     > * {
       height: inherit;
-     }
+      line-height: normal;
+    }
 
     .e-hscroll-content {
       display: inline-block;
       height: inherit;
       position: relative;
-      touch-action: none;
 
       > * {
         pointer-events: auto;
       }
-  }
+    }
 
     &.e-rtl {
 
@@ -146,7 +146,7 @@
           left: auto;
           right: 0;
         }
-    }
+      }
     }
 
     .e-scroll-nav  {
@@ -154,7 +154,6 @@
       bottom: 0;
       cursor: pointer;
       display: flex;
-      height: 100%;
       min-height: $hscroll-nav-nrml-minheight;
       overflow: hidden;
       position: absolute;
@@ -171,19 +170,20 @@
 
       &.e-ie-align {
         display: table;
-        }
+      }
     }
 
     .e-nav-arrow {
       position: relative;
-  }
+    }
 
     .e-nav-arrow.e-icons {
       display: table-cell;
       text-align: center;
       vertical-align: middle;
       width: 100%;
-      }
+      font-size: $hscroll-device-arrow-icon-size;
+    }
 
     .e-hscroll-bar {
 
@@ -191,8 +191,8 @@
 
         .e-overlay {
           pointer-events: none;
-          }
         }
       }
+    }
   }
 }

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

@@ -1,59 +1,63 @@
-//default 
-$skin-name: 'material';
-$hscroll-default-bg: $grey-900;
-$hscroll-press-bg: rgba($grey-white, .18);
-$hscroll-active-bg: rgba($grey-white, .18);
-$hscroll-border-size: 1px;
-$hscroll-nav-nrml-minheight: 42px;
-$hscroll-nav-bgr-minheight: 56px;
-$hscroll-mob-nav-nrml-width: 50px;
-$hscroll-device-arrow-width: 50px;
-$hscroll-device-arrow-size: 14px;
-$hscroll-overlay-opacity: .5;
-$hscroll-device-arrow-border-color: $default-border-color;
-$hscroll-device-arrow-rtl-box-shadow: 4px 0 8px 0 rgba($shadow , .06);
-$hscroll-device-arrow-bg: $hscroll-default-bg;
-$hscroll-device-arrow-border-size: none;
-$hscroll-device-arrow-box-shadow: -4px 0 8px 0 rgba($shadow , .6);
-$hscroll-device-arrow-color: $default-icon-color;
-$hscroll-overlay-bg: $hscroll-default-bg;
-$hscroll-overlay-start: rgba($hscroll-overlay-bg, .0001);
-$hscroll-overlay-end: rgba($hscroll-overlay-bg, $hscroll-overlay-opacity);
-$hscroll-right-bg: linear-gradient(to right, $hscroll-overlay-start 0, $hscroll-overlay-end 100%);
-$hscroll-left-bg: linear-gradient(to right, $hscroll-overlay-end 0, $hscroll-overlay-start 100%);
-$hscroll-border-size: $border-size;
-$hscroll-border-type: solid;
-$hscroll-hover-font: $hover-font-color;
-$hscroll-active-font-color: $active-font-color;
-$hscroll-nav-nrml-width: 40px;
-$hscroll-nav-bgr-width: 50px;
-$hscroll-nrml-padding: 0 $hscroll-nav-nrml-width;
-$hscroll-bgr-padding: 0 $hscroll-nav-bgr-width;
-$hscroll-border-type: $border-type;
-$hscroll-box-shadow: none;
-$hscroll-hover-bg: rgba($grey-white, .1);
-$hscroll-hover-border-color: rgba($grey-white, .1);
-$hscroll-default-icon-color: rgba($grey-dark-font, .54);
-$hscroll-focus-border: '';
-$hscroll-active-border: '';
-$hscroll-hover-border: '';
-$hscroll-active-box-shadow: '';
+//default
+$hscroll-skin: 'material' !default;
+$hscroll-default-bg: $grey-900 !default;
+$hscroll-press-bg: rgba($grey-white, .18) !default;
+$hscroll-active-bg: rgba($grey-white, .18) !default;
+$hscroll-border-size: 1px !default;
+$hscroll-nav-nrml-minheight: 42px !default;
+$hscroll-nav-bgr-minheight: 56px !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 $grey-white !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 $grey-white !default;
+$hscroll-device-arrow-color: $grey-white !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-border-type: $border-type !default;
+$hscroll-box-shadow: none !default;
+$hscroll-hover-bg: rgba($grey-white, .1) !default;
+$hscroll-hover-border-color: rgba($grey-white, .1) !default;
+$hscroll-default-icon-color: rgba($grey-dark-font, .54) !default;
+$hscroll-focus-border: 0 !default;
+$hscroll-active-border: 0 !default;
+$hscroll-hover-border: 0 !default;
+$hscroll-active-box-shadow: none !default;
 
-$hscroll-default-border: $hscroll-hover-border-color;
-$hscroll-ribble-animation-border-frame: rgba(255, 255, 255, .5);
-$hscroll-ribble-animation-shadow-frame: 0 0 0 0 $hscroll-ribble-animation-border-frame;
-$hscroll-ribble-animation-shadow-frame-end: 0 0 0 200px rgba(255, 255, 255, .12);
-
-$hscroll-left-arrow-icon: '\e913';
-$hscroll-right-arrow-icon: '\e904';
+$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: '' ;
+  content: '';
   height: 1px;
   left: 50%;
   position: absolute;
@@ -71,10 +75,11 @@ $hscroll-right-arrow-icon: '\e904';
   0% {
     border-color: $hscroll-ribble-animation-border-frame;
     box-shadow: $hscroll-ribble-animation-shadow-frame;
-    }
+  }
 
   100% {
     box-shadow: $hscroll-ribble-animation-shadow-frame-end;
-    }
- }
+  }
+}
+
 //enddefault

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

@@ -1,7 +1,7 @@
 /*! component's theme wise override definitions and variables */
-$skin-name: 'material' !default;
-$hscroll-hover-font: $hover-font-color  !default;
-$hscroll-active-font-color: $active-font-color  !default;
+$hscroll-skin: 'material' !default;
+$hscroll-hover-font: $hover-font-color !default;
+$hscroll-active-font-color: $active-font-color !default;
 $hscroll-default-bg: $grey-50 !default;
 $hscroll-press-bg: $grey-400 !default;
 $hscroll-active-bg: $grey-400 !default;
@@ -18,10 +18,10 @@ $hscroll-box-shadow: none !default;
 $hscroll-hover-bg: rgba($grey-black, .12) !default;
 $hscroll-hover-border-color: rgba($grey-black, .12) !default;
 $hscroll-default-icon-color: rgba($grey-light-font, .54) !default;
-$hscroll-focus-border: '' !default;
-$hscroll-active-border: '' !default;
-$hscroll-hover-border: '' !default;
-$hscroll-active-box-shadow: '' !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: $grey-50 !default;
 $hscroll-overlay-start: rgba($hscroll-overlay-bg, 0) !default;
@@ -29,13 +29,15 @@ $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: -4px 0 8px 0 rgba($shadow , .06) !default;
-$hscroll-device-arrow-rtl-box-shadow: 4px 0 8px 0 rgba($shadow , .06) !default;
+$hscroll-device-arrow-box-shadow: -4px 0 8px 0 rgba($shadow, .06) !default;
+$hscroll-device-arrow-rtl-box-shadow: 4px 0 8px 0 rgba($shadow, .06) !default;
 $hscroll-device-arrow-bg: $grey-50 !default;
 $hscroll-device-arrow-border-size: 1px !default;
 $hscroll-device-arrow-border-color: rgba($grey-black, .12) !default;
 $hscroll-device-arrow-color: $accent !default;
 $hscroll-device-arrow-size: 14px !default;
+$hscroll-device-arrow-icon-size: 12px !default;
+$hscroll-device-arrow-size-bigger: 14px !default;
 $hscroll-device-arrow-width: 56px !default;
 
 $hscroll-default-border: $hscroll-hover-border-color !default;
@@ -43,12 +45,18 @@ $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: '' ;
+  content: '';
   height: 1px;
   left: 50%;
   position: absolute;
@@ -66,11 +74,9 @@ $hscroll-ribble-animation-shadow-frame-end: 0 0 0 200px rgba(255, 255, 255, .12)
   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/_tailwind-dark-definition.scss

@@ -0,0 +1 @@
+@import './tailwind-definition.scss';

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

@@ -0,0 +1,83 @@
+/*! component's theme wise override definitions and variables */
+$hscroll-skin: 'tailwind' !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/_theme.scss

@@ -1,8 +1,9 @@
-@include export-module('h-scroll-theme') {
+@include export-module('h-scroll-theme') {
+
   /*! h-scroll theme */
   #{&}.e-hscroll {
 
-    .e-icons {
+    .e-scroll-nav .e-icons {
       color: $hscroll-default-icon-color;
     }
 
@@ -15,7 +16,6 @@
           box-shadow: $hscroll-device-arrow-rtl-box-shadow;
         }
       }
-
     }
 
     &.e-scroll-device {
@@ -63,14 +63,10 @@
         &:hover {
           background: $hscroll-hover-bg;
           border: $hscroll-hover-border;
-          border-color: $hscroll-hover-border-color;
           color: $hscroll-hover-font;
 
-          @if $skin-name == 'highcontrast' {
-
-            &:active {
-              background: $hscroll-press-bg;
-            }
+          &:active {
+            background: $hscroll-nav-hover-press-bg;
           }
         }
       }
@@ -82,27 +78,20 @@
 
         &:hover {
           background: $hscroll-hover-bg;
-          border: $hscroll-hover-border;
           color: $hscroll-hover-font;
 
-          @if $skin-name == 'highcontrast' {
-            border: 2px solid $hscroll-nav-hover-border-color;
-
-            &:active {
-              border: 0;
-            }
+          .e-icons {
+            color: $hscroll-nav-hover-icons-color;
           }
         }
 
         &:focus {
-          background: $hscroll-hover-bg;
-          border: $hscroll-focus-border;
-          border-color: $hscroll-hover-border-color;
+          background: $hscroll-nav-focus-bg-color;
+          border: $hscroll-nav-focus-border;
           color: $hscroll-hover-font;
 
-          @if $skin-name == 'highcontrast' {
-            background: $hscroll-nav-focus-bg-color;
-            border: $hscroll-dash-border;
+          .e-icons {
+            color: $hscroll-nav-hover-icons-color;
           }
         }
 
@@ -111,14 +100,12 @@
           border: $hscroll-active-border;
           box-shadow: $hscroll-active-box-shadow;
           color: $hscroll-active-font-color;
-          @if $skin-name == 'highcontrast' {
-            .e-icons {
-              color: $hscroll-nav-active-color;
-            }
+
+          .e-icons {
+            color: $hscroll-nav-active-color;
           }
         }
       }
-
     }
 
     .e-scroll-nav  {
@@ -138,8 +125,7 @@
 
       &:active::after {
         @include hscroll-btn-animation-after;
-     }
-
+      }
     }
   }
 }