@syncfusion/ej2-navigations 28.1.41 → 28.2.3-1479479

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

@@ -1,83 +1,83 @@
-/*! component's theme wise override definitions and variables */
-$hscroll-skin: 'bootstrap5.3' !default;
-$border-type: solid;
-$hscroll-hover-font: $secondary-text-color-hover !default;
-$hscroll-active-font-color: $content-text-color-alt2 !default;
-$hscroll-default-bg: $content-bg-color-alt1 !default;
-$hscroll-press-bg: $secondary-bg-color-pressed !default;
-$hscroll-active-bg: $content-bg-color-alt2 !default;
-$hscroll-border-size: 1px !default;
-$hscroll-nav-nrml-minheight: 48px !default;
-$hscroll-nav-bgr-minheight: 56px !default;
-$hscroll-mob-nav-nrml-width: 40px !default;
-$hscroll-nav-nrml-width: 30px !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: $secondary-bg-color-hover !default;
-$hscroll-hover-border-color: $border-light !default;
-$hscroll-default-icon-color: $secondary-text-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: $secondary-bg-color-disabled !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-press-bg !default;
-$hscroll-nav-hover-icons-color: $secondary-text-color-focus !default;
-$hscroll-nav-focus-bg-color: $secondary-bg-color-focus !default;
-$hscroll-nav-focus-border: $hscroll-focus-border !default;
-$hscroll-nav-active-color: $secondary-text-color-pressed !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: 'bootstrap5.3' !default;
+$border-type: solid;
+$hscroll-hover-font: $secondary-text-color-hover !default;
+$hscroll-active-font-color: $content-text-color-alt2 !default;
+$hscroll-default-bg: $content-bg-color-alt1 !default;
+$hscroll-press-bg: $secondary-bg-color-pressed !default;
+$hscroll-active-bg: $content-bg-color-alt2 !default;
+$hscroll-border-size: 1px !default;
+$hscroll-nav-nrml-minheight: 48px !default;
+$hscroll-nav-bgr-minheight: 56px !default;
+$hscroll-mob-nav-nrml-width: 40px !default;
+$hscroll-nav-nrml-width: 30px !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: $secondary-bg-color-hover !default;
+$hscroll-hover-border-color: $border-light !default;
+$hscroll-default-icon-color: $secondary-text-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: $secondary-bg-color-disabled !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-press-bg !default;
+$hscroll-nav-hover-icons-color: $secondary-text-color-focus !default;
+$hscroll-nav-focus-bg-color: $secondary-bg-color-focus !default;
+$hscroll-nav-focus-border: $hscroll-focus-border !default;
+$hscroll-nav-active-color: $secondary-text-color-pressed !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,146 +1,146 @@
-@include export-module('h-scroll-theme') {
-
-  /*! h-scroll theme */
-  #{&}.e-hscroll {
-
-    .e-scroll-nav .e-icons {
-      color: $hscroll-default-icon-color;
-    }
-
-    &.e-rtl {
-
-      &.e-scroll-device {
-
-        .e-scroll-nav.e-scroll-right-nav {
-          border-color: $hscroll-device-arrow-border-color;
-          box-shadow: $hscroll-device-arrow-rtl-box-shadow;
-        }
-      }
-    }
-
-    &.e-scroll-device {
-
-      .e-scroll-nav.e-scroll-right-nav {
-        background-color: $hscroll-device-arrow-bg;
-        border-color: $hscroll-device-arrow-border-color;
-        border-width: $hscroll-device-arrow-border-size;
-        box-shadow: $hscroll-device-arrow-box-shadow;
-
-        .e-nav-arrow {
-          color: $hscroll-device-arrow-color;
-        }
-      }
-    }
-
-    .e-scroll-overlay {
-      background-color: transparent;
-      background-repeat: repeat-x;
-
-      &.e-scroll-left-overlay {
-        background-image: $hscroll-left-bg;
-      }
-
-      &.e-scroll-right-overlay {
-        background-image: $hscroll-right-bg;
-      }
-    }
-
-    &.e-rtl {
-
-      .e-scroll-nav  {
-        background: $hscroll-default-bg;
-
-        &.e-scroll-left-nav {
-          border-left: $hscroll-border-size $hscroll-border-type $hscroll-default-border;
-          border-right: 0;
-        }
-
-        &.e-scroll-right-nav {
-          border-left: 0;
-          border-right: $hscroll-border-size $hscroll-border-type $hscroll-default-border;
-        }
-
-        &:hover {
-          background: $hscroll-hover-bg;
-          border: $hscroll-hover-border;
-          color: $hscroll-hover-font;
-
-          &:active {
-            background: $hscroll-nav-hover-press-bg;
-          }
-        }
-      }
-    }
-
-    &:not(.e-scroll-device) {
-
-      .e-scroll-nav  {
-
-        &:hover {
-          background: $hscroll-hover-bg;
-          color: $hscroll-hover-font;
-
-          .e-icons {
-            color: $hscroll-nav-hover-icons-color;
-          }
-        }
-
-        &:focus {
-          background: $hscroll-nav-focus-bg-color;
-          border: $hscroll-nav-focus-border;
-          color: $hscroll-hover-font;
-
-          .e-icons {
-            color: $hscroll-nav-hover-icons-color;
-          }
-        }
-
-        &:active {
-          background: $hscroll-press-bg;
-          border: $hscroll-active-border;
-          box-shadow: $hscroll-active-box-shadow;
-          color: $hscroll-active-font-color;
-
-          .e-icons {
-            color: $hscroll-nav-active-color;
-          }
-        }
-      }
-    }
-
-    .e-scroll-nav  {
-      background: $hscroll-default-bg;
-      @if $skin-name == 'fluent2' {
-        &.e-overlay {
-          &.e-scroll-left-nav,
-          &.e-scroll-right-nav {
-            opacity: inherit;
-            border-right: 0;
-            border-left: 0;
-            .e-nav-arrow {
-              &.e-icons {
-                color: $icon-color-disabled !important; /* stylelint-disable-line declaration-no-important */
-              }
-            }
-          }
-        }
-      }
-
-      &.e-scroll-left-nav {
-        border-right: $hscroll-border-size $hscroll-border-type $hscroll-default-border;
-      }
-
-      &.e-scroll-right-nav {
-        border-left: $hscroll-border-size $hscroll-border-type $hscroll-default-border;
-      }
-
-      &::after {
-        @include hscroll-btn-animation;
-      }
-
-      &:active::after {
-        @include hscroll-btn-animation-after;
-      }
-    }
-  }
-}
+@include export-module('h-scroll-theme') {
+
+  /*! h-scroll theme */
+  #{&}.e-hscroll {
+
+    .e-scroll-nav .e-icons {
+      color: $hscroll-default-icon-color;
+    }
+
+    &.e-rtl {
+
+      &.e-scroll-device {
+
+        .e-scroll-nav.e-scroll-right-nav {
+          border-color: $hscroll-device-arrow-border-color;
+          box-shadow: $hscroll-device-arrow-rtl-box-shadow;
+        }
+      }
+    }
+
+    &.e-scroll-device {
+
+      .e-scroll-nav.e-scroll-right-nav {
+        background-color: $hscroll-device-arrow-bg;
+        border-color: $hscroll-device-arrow-border-color;
+        border-width: $hscroll-device-arrow-border-size;
+        box-shadow: $hscroll-device-arrow-box-shadow;
+
+        .e-nav-arrow {
+          color: $hscroll-device-arrow-color;
+        }
+      }
+    }
+
+    .e-scroll-overlay {
+      background-color: transparent;
+      background-repeat: repeat-x;
+
+      &.e-scroll-left-overlay {
+        background-image: $hscroll-left-bg;
+      }
+
+      &.e-scroll-right-overlay {
+        background-image: $hscroll-right-bg;
+      }
+    }
+
+    &.e-rtl {
+
+      .e-scroll-nav  {
+        background: $hscroll-default-bg;
+
+        &.e-scroll-left-nav {
+          border-left: $hscroll-border-size $hscroll-border-type $hscroll-default-border;
+          border-right: 0;
+        }
+
+        &.e-scroll-right-nav {
+          border-left: 0;
+          border-right: $hscroll-border-size $hscroll-border-type $hscroll-default-border;
+        }
+
+        &:hover {
+          background: $hscroll-hover-bg;
+          border: $hscroll-hover-border;
+          color: $hscroll-hover-font;
+
+          &:active {
+            background: $hscroll-nav-hover-press-bg;
+          }
+        }
+      }
+    }
+
+    &:not(.e-scroll-device) {
+
+      .e-scroll-nav  {
+
+        &:hover {
+          background: $hscroll-hover-bg;
+          color: $hscroll-hover-font;
+
+          .e-icons {
+            color: $hscroll-nav-hover-icons-color;
+          }
+        }
+
+        &:focus {
+          background: $hscroll-nav-focus-bg-color;
+          border: $hscroll-nav-focus-border;
+          color: $hscroll-hover-font;
+
+          .e-icons {
+            color: $hscroll-nav-hover-icons-color;
+          }
+        }
+
+        &:active {
+          background: $hscroll-press-bg;
+          border: $hscroll-active-border;
+          box-shadow: $hscroll-active-box-shadow;
+          color: $hscroll-active-font-color;
+
+          .e-icons {
+            color: $hscroll-nav-active-color;
+          }
+        }
+      }
+    }
+
+    .e-scroll-nav  {
+      background: $hscroll-default-bg;
+      @if $skin-name == 'fluent2' {
+        &.e-overlay {
+          &.e-scroll-left-nav,
+          &.e-scroll-right-nav {
+            opacity: inherit;
+            border-right: 0;
+            border-left: 0;
+            .e-nav-arrow {
+              &.e-icons {
+                color: $icon-color-disabled !important; /* stylelint-disable-line declaration-no-important */
+              }
+            }
+          }
+        }
+      }
+
+      &.e-scroll-left-nav {
+        border-right: $hscroll-border-size $hscroll-border-type $hscroll-default-border;
+      }
+
+      &.e-scroll-right-nav {
+        border-left: $hscroll-border-size $hscroll-border-type $hscroll-default-border;
+      }
+
+      &::after {
+        @include hscroll-btn-animation;
+      }
+
+      &:active::after {
+        @include hscroll-btn-animation-after;
+      }
+    }
+  }
+}

package/styles/h-scroll/bds.css

@@ -57,7 +57,7 @@
 .e-hscroll {
   display: block;
   position: relative;
-  width: inherit;
+  width: 100%;
 }
 .e-hscroll.e-rtl.e-scroll-device {
   padding-left: 40px;

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

@@ -30,7 +30,7 @@
 .e-hscroll {
   display: block;
   position: relative;
-  width: inherit;
+  width: 100%;
 }
 .e-hscroll.e-rtl.e-scroll-device {
   padding-left: 50px;

package/styles/h-scroll/bootstrap.css

@@ -31,7 +31,7 @@
 .e-hscroll {
   display: block;
   position: relative;
-  width: inherit;
+  width: 100%;
 }
 .e-hscroll.e-rtl.e-scroll-device {
   padding-left: 50px;

package/styles/h-scroll/bootstrap4.css

@@ -31,7 +31,7 @@
 .e-hscroll {
   display: block;
   position: relative;
-  width: inherit;
+  width: 100%;
 }
 .e-hscroll.e-rtl.e-scroll-device {
   padding-left: 50px;
@@ -188,22 +188,22 @@
   border-right: 1px solid #ccc;
 }
 .e-hscroll.e-rtl .e-scroll-nav:hover {
-  background: #5a6268;
-  border: 1px #545b62;
+  background: rgb(90.2703862661, 97.7929184549, 104.4796137339);
+  border: 1px rgb(84.3605150215, 91.3905579399, 97.6394849785);
   color: #fff;
 }
 .e-hscroll.e-rtl .e-scroll-nav:hover:active {
-  background: #5a6268;
+  background: rgb(90.2703862661, 97.7929184549, 104.4796137339);
 }
 .e-hscroll:not(.e-scroll-device) .e-scroll-nav:hover {
-  background: #5a6268;
+  background: rgb(90.2703862661, 97.7929184549, 104.4796137339);
   color: #fff;
 }
 .e-hscroll:not(.e-scroll-device) .e-scroll-nav:hover .e-icons {
   color: inherit;
 }
 .e-hscroll:not(.e-scroll-device) .e-scroll-nav:focus {
-  background: #5a6268;
+  background: rgb(90.2703862661, 97.7929184549, 104.4796137339);
   border: 1px #6c757d;
   color: #fff;
 }

package/styles/h-scroll/bootstrap5-dark.css

@@ -53,7 +53,7 @@
 .e-hscroll {
   display: block;
   position: relative;
-  width: inherit;
+  width: 100%;
 }
 .e-hscroll.e-rtl.e-scroll-device {
   padding-left: 40px;
@@ -172,13 +172,13 @@
   color: #adb5bd;
 }
 .e-hscroll.e-rtl.e-scroll-device .e-scroll-nav.e-scroll-right-nav {
-  border-color: #444c54;
+  border-color: rgb(68.0034482759, 75.85, 83.6965517241);
   -webkit-box-shadow: 0 0.8px 16px rgba(0, 0, 0, 0.15);
           box-shadow: 0 0.8px 16px rgba(0, 0, 0, 0.15);
 }
 .e-hscroll.e-scroll-device .e-scroll-nav.e-scroll-right-nav {
   background-color: #343a40;
-  border-color: #444c54;
+  border-color: rgb(68.0034482759, 75.85, 83.6965517241);
   border-width: 1px;
   -webkit-box-shadow: 0 0.8px 16px rgba(0, 0, 0, 0.15);
           box-shadow: 0 0.8px 16px rgba(0, 0, 0, 0.15);
@@ -202,12 +202,12 @@
   background: #343a40;
 }
 .e-hscroll.e-rtl .e-scroll-nav.e-scroll-left-nav {
-  border-left: 1px solid #444c54;
+  border-left: 1px solid rgb(68.0034482759, 75.85, 83.6965517241);
   border-right: 0;
 }
 .e-hscroll.e-rtl .e-scroll-nav.e-scroll-right-nav {
   border-left: 0;
-  border-right: 1px solid #444c54;
+  border-right: 1px solid rgb(68.0034482759, 75.85, 83.6965517241);
 }
 .e-hscroll.e-rtl .e-scroll-nav:hover {
   background: #495057;
@@ -246,10 +246,10 @@
   background: #343a40;
 }
 .e-hscroll .e-scroll-nav.e-scroll-left-nav {
-  border-right: 1px solid #444c54;
+  border-right: 1px solid rgb(68.0034482759, 75.85, 83.6965517241);
 }
 .e-hscroll .e-scroll-nav.e-scroll-right-nav {
-  border-left: 1px solid #444c54;
+  border-left: 1px solid rgb(68.0034482759, 75.85, 83.6965517241);
 }
 .e-hscroll .e-scroll-nav::after {
   background-color: transparent;

package/styles/h-scroll/bootstrap5.3.css

@@ -57,7 +57,7 @@
 .e-hscroll {
   display: block;
   position: relative;
-  width: inherit;
+  width: 100%;
 }
 .e-hscroll.e-rtl.e-scroll-device {
   padding-left: 40px;

package/styles/h-scroll/bootstrap5.css

@@ -53,7 +53,7 @@
 .e-hscroll {
   display: block;
   position: relative;
-  width: inherit;
+  width: 100%;
 }
 .e-hscroll.e-rtl.e-scroll-device {
   padding-left: 40px;

package/styles/h-scroll/fabric-dark.css

@@ -30,7 +30,7 @@
 .e-hscroll {
   display: block;
   position: relative;
-  width: inherit;
+  width: 100%;
 }
 .e-hscroll.e-rtl.e-scroll-device {
   padding-left: 50px;

package/styles/h-scroll/fabric.css

@@ -30,7 +30,7 @@
 .e-hscroll {
   display: block;
   position: relative;
-  width: inherit;
+  width: 100%;
 }
 .e-hscroll.e-rtl.e-scroll-device {
   padding-left: 50px;
@@ -210,7 +210,7 @@
   color: #333;
 }
 .e-hscroll:not(.e-scroll-device) .e-scroll-nav:active {
-  background: #d1ebff;
+  background: rgb(208.9, 234.7504672897, 255);
   border: 0;
   -webkit-box-shadow: none;
           box-shadow: none;

package/styles/h-scroll/fluent-dark.css

@@ -53,7 +53,7 @@
 .e-hscroll {
   display: block;
   position: relative;
-  width: inherit;
+  width: 100%;
 }
 .e-hscroll.e-rtl.e-scroll-device {
   padding-left: 40px;

package/styles/h-scroll/fluent.css

@@ -53,7 +53,7 @@
 .e-hscroll {
   display: block;
   position: relative;
-  width: inherit;
+  width: 100%;
 }
 .e-hscroll.e-rtl.e-scroll-device {
   padding-left: 40px;

package/styles/h-scroll/fluent2.css

@@ -59,7 +59,7 @@
 .e-hscroll {
   display: block;
   position: relative;
-  width: inherit;
+  width: 100%;
 }
 .e-hscroll.e-rtl.e-scroll-device {
   padding-left: 40px;

package/styles/h-scroll/highcontrast-light.css

@@ -30,7 +30,7 @@
 .e-hscroll {
   display: block;
   position: relative;
-  width: inherit;
+  width: 100%;
 }
 .e-hscroll.e-rtl.e-scroll-device {
   padding-left: 50px;

package/styles/h-scroll/highcontrast.css

@@ -30,7 +30,7 @@
 .e-hscroll {
   display: block;
   position: relative;
-  width: inherit;
+  width: 100%;
 }
 .e-hscroll.e-rtl.e-scroll-device {
   padding-left: 50px;