@syncfusion/ej2-navigations 19.3.53 → 19.4.38

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

@@ -1,78 +1,78 @@
-/*! 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-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;
-
-@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: '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-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;
+
+@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

@@ -2,7 +2,7 @@
   /*! h-scroll theme */
   #{&}.e-hscroll {
 
-    .e-icons {
+    .e-scroll-nav .e-icons {
       color: $hscroll-default-icon-color;
     }
 

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

@@ -212,7 +212,7 @@
 }
 
 /*! h-scroll theme */
-.e-hscroll .e-icons {
+.e-hscroll .e-scroll-nav .e-icons {
   color: #f0f0f0;
 }
 

package/styles/h-scroll/bootstrap.css

@@ -213,7 +213,7 @@
 }
 
 /*! h-scroll theme */
-.e-hscroll .e-icons {
+.e-hscroll .e-scroll-nav .e-icons {
   color: #333;
 }
 

package/styles/h-scroll/bootstrap4.css

@@ -213,7 +213,7 @@
 }
 
 /*! h-scroll theme */
-.e-hscroll .e-icons {
+.e-hscroll .e-scroll-nav .e-icons {
   color: #333;
 }
 

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

@@ -224,7 +224,7 @@
 }
 
 /*! h-scroll theme */
-.e-hscroll .e-icons {
+.e-hscroll .e-scroll-nav .e-icons {
   color: #adb5bd;
 }
 

package/styles/h-scroll/bootstrap5.css

@@ -224,7 +224,7 @@
 }
 
 /*! h-scroll theme */
-.e-hscroll .e-icons {
+.e-hscroll .e-scroll-nav .e-icons {
   color: #6c757d;
 }
 

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

@@ -212,7 +212,7 @@
 }
 
 /*! h-scroll theme */
-.e-hscroll .e-icons {
+.e-hscroll .e-scroll-nav .e-icons {
   color: #fff;
 }
 

package/styles/h-scroll/fabric.css

@@ -212,7 +212,7 @@
 }
 
 /*! h-scroll theme */
-.e-hscroll .e-icons {
+.e-hscroll .e-scroll-nav .e-icons {
   color: #333;
 }
 

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

@@ -212,7 +212,7 @@
 }
 
 /*! h-scroll theme */
-.e-hscroll .e-icons {
+.e-hscroll .e-scroll-nav .e-icons {
   color: #400074;
 }
 

package/styles/h-scroll/highcontrast.css

@@ -212,7 +212,7 @@
 }
 
 /*! h-scroll theme */
-.e-hscroll .e-icons {
+.e-hscroll .e-scroll-nav .e-icons {
   color: #fff;
 }
 

package/styles/h-scroll/icons/_fluent.scss

@@ -0,0 +1,49 @@
+@include export-module('hscroll-fluent-icons') {
+  /*! hscroll icons */
+  #{&}.e-hscroll {
+
+    &.e-rtl {
+
+      &.e-scroll-device {
+
+        .e-nav-right-arrow::before {
+          content: '\e80e';
+        }
+
+        .e-nav-left-arrow::before {
+          content: '\e80f';
+        }
+
+      }
+
+      .e-nav-left-arrow::before {
+        content: '\e7c2';
+         }
+
+      .e-nav-right-arrow::before {
+        content: '\e7c1';
+        }
+    }
+
+    &.e-scroll-device {
+
+      .e-nav-right-arrow::before {
+        content: '\e80f';
+      }
+
+      .e-nav-left-arrow::before {
+        content: '\e80e';
+      }
+    }
+
+    .e-nav-left-arrow::before {
+      content: '\e7c1';
+      line-height: normal;
+    }
+
+    .e-nav-right-arrow::before {
+      content: '\e7c2';
+      line-height: normal;
+    }
+  }
+}

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

@@ -1,49 +1,49 @@
-@include export-module('hscroll-tailwind-icons') {
-  /*! hscroll icons */
-  #{&}.e-hscroll {
-
-    &.e-rtl {
-
-      &.e-scroll-device {
-
-        .e-nav-right-arrow::before {
-          content: '\e70f';
-        }
-
-        .e-nav-left-arrow::before {
-          content: '\e7b7';
-        }
-
-      }
-
-      .e-nav-left-arrow::before {
-        content: '\e7b7';
-        }
-
-      .e-nav-right-arrow::before {
-        content: '\e70f';
-        }
-    }
-
-    &.e-scroll-device {
-
-      .e-nav-right-arrow::before {
-        content: '\e7b7';
-      }
-
-      .e-nav-left-arrow::before {
-        content: '\e70f';
-      }
-    }
-
-    .e-nav-left-arrow::before {
-      content: '\e70f';
-      line-height: normal;
-    }
-
-    .e-nav-right-arrow::before {
-      content: '\e7b7';
-      line-height: normal;
-    }
-  }
-}
+@include export-module('hscroll-tailwind-icons') {
+  /*! hscroll icons */
+  #{&}.e-hscroll {
+
+    &.e-rtl {
+
+      &.e-scroll-device {
+
+        .e-nav-right-arrow::before {
+          content: '\e70f';
+        }
+
+        .e-nav-left-arrow::before {
+          content: '\e7b7';
+        }
+
+      }
+
+      .e-nav-left-arrow::before {
+        content: '\e7b7';
+        }
+
+      .e-nav-right-arrow::before {
+        content: '\e70f';
+        }
+    }
+
+    &.e-scroll-device {
+
+      .e-nav-right-arrow::before {
+        content: '\e7b7';
+      }
+
+      .e-nav-left-arrow::before {
+        content: '\e70f';
+      }
+    }
+
+    .e-nav-left-arrow::before {
+      content: '\e70f';
+      line-height: normal;
+    }
+
+    .e-nav-right-arrow::before {
+      content: '\e7b7';
+      line-height: normal;
+    }
+  }
+}

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

@@ -223,7 +223,7 @@
 }
 
 /*! h-scroll theme */
-.e-hscroll .e-icons {
+.e-hscroll .e-scroll-nav .e-icons {
   color: rgba(255, 255, 255, 0.54);
 }
 

package/styles/h-scroll/material.css

@@ -224,7 +224,7 @@
 }
 
 /*! h-scroll theme */
-.e-hscroll .e-icons {
+.e-hscroll .e-scroll-nav .e-icons {
   color: rgba(0, 0, 0, 0.54);
 }
 

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

@@ -225,7 +225,7 @@
 }
 
 /*! h-scroll theme */
-.e-hscroll .e-icons {
+.e-hscroll .e-scroll-nav .e-icons {
   color: #d1d5db;
 }
 

package/styles/h-scroll/tailwind.css

@@ -225,7 +225,7 @@
 }
 
 /*! h-scroll theme */
-.e-hscroll .e-icons {
+.e-hscroll .e-scroll-nav .e-icons {
   color: #6b7280;
 }