@syncfusion/ej2-navigations 20.3.58 → 20.4.38

package/styles/h-scroll/fabric.css

@@ -18,11 +18,11 @@
   content: "\e904";
 }
 .e-hscroll .e-nav-left-arrow::before {
-  content: "\e829";
+  content: "\e98f";
   line-height: normal;
 }
 .e-hscroll .e-nav-right-arrow::before {
-  content: "\e830";
+  content: "\e219";
   line-height: normal;
 }
 
@@ -165,6 +165,7 @@
   text-align: center;
   vertical-align: middle;
   width: 100%;
+  font-size: 14px;
 }
 .e-hscroll .e-hscroll-bar .e-hscroll-content .e-overlay {
   pointer-events: none;
@@ -213,22 +214,34 @@
   border: 0;
   color: #333;
 }
+.e-hscroll.e-rtl .e-scroll-nav:hover:active {
+  background: #f4f4f4;
+}
 .e-hscroll:not(.e-scroll-device) .e-scroll-nav:hover {
   background: #f4f4f4;
   border: 0;
   color: #333;
 }
+.e-hscroll:not(.e-scroll-device) .e-scroll-nav:hover .e-icons {
+  color: #333;
+}
 .e-hscroll:not(.e-scroll-device) .e-scroll-nav:focus {
   background: #f4f4f4;
   border: 0;
   color: #333;
 }
+.e-hscroll:not(.e-scroll-device) .e-scroll-nav:focus .e-icons {
+  color: #333;
+}
 .e-hscroll:not(.e-scroll-device) .e-scroll-nav:active {
   background: #d1ebff;
   border: 0;
   box-shadow: none;
   color: #333;
 }
+.e-hscroll:not(.e-scroll-device) .e-scroll-nav:active .e-icons {
+  color: #333;
+}
 .e-hscroll .e-scroll-nav {
   background: #fff;
 }

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

@@ -175,6 +175,7 @@
   text-align: center;
   vertical-align: middle;
   width: 100%;
+  font-size: 12px;
 }
 .e-hscroll .e-hscroll-bar .e-hscroll-content .e-overlay {
   pointer-events: none;
@@ -223,22 +224,34 @@
   border: 0;
   color: #a19f9d;
 }
+.e-hscroll.e-rtl .e-scroll-nav:hover:active {
+  background: #292827;
+}
 .e-hscroll:not(.e-scroll-device) .e-scroll-nav:hover {
   background: #292827;
   border: 0;
   color: #a19f9d;
 }
+.e-hscroll:not(.e-scroll-device) .e-scroll-nav:hover .e-icons {
+  color: #a19f9d;
+}
 .e-hscroll:not(.e-scroll-device) .e-scroll-nav:focus {
   background: #292827;
   border: 0;
   color: #a19f9d;
 }
+.e-hscroll:not(.e-scroll-device) .e-scroll-nav:focus .e-icons {
+  color: #a19f9d;
+}
 .e-hscroll:not(.e-scroll-device) .e-scroll-nav:active {
   background: #252423;
   border: 0;
   box-shadow: none;
   color: #c8c6c4;
 }
+.e-hscroll:not(.e-scroll-device) .e-scroll-nav:active .e-icons {
+  color: #a19f9d;
+}
 .e-hscroll .e-scroll-nav {
   background: #252423;
 }

package/styles/h-scroll/fluent.css

@@ -175,6 +175,7 @@
   text-align: center;
   vertical-align: middle;
   width: 100%;
+  font-size: 12px;
 }
 .e-hscroll .e-hscroll-bar .e-hscroll-content .e-overlay {
   pointer-events: none;
@@ -223,22 +224,34 @@
   border: 0;
   color: #605e5c;
 }
+.e-hscroll.e-rtl .e-scroll-nav:hover:active {
+  background: #edebe9;
+}
 .e-hscroll:not(.e-scroll-device) .e-scroll-nav:hover {
   background: #edebe9;
   border: 0;
   color: #605e5c;
 }
+.e-hscroll:not(.e-scroll-device) .e-scroll-nav:hover .e-icons {
+  color: #605e5c;
+}
 .e-hscroll:not(.e-scroll-device) .e-scroll-nav:focus {
   background: #edebe9;
   border: 0;
   color: #605e5c;
 }
+.e-hscroll:not(.e-scroll-device) .e-scroll-nav:focus .e-icons {
+  color: #605e5c;
+}
 .e-hscroll:not(.e-scroll-device) .e-scroll-nav:active {
   background: #f3f2f1;
   border: 0;
   box-shadow: none;
   color: #3b3a39;
 }
+.e-hscroll:not(.e-scroll-device) .e-scroll-nav:active .e-icons {
+  color: #605e5c;
+}
 .e-hscroll .e-scroll-nav {
   background: #f3f2f1;
 }

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

@@ -165,6 +165,7 @@
   text-align: center;
   vertical-align: middle;
   width: 100%;
+  font-size: 12px;
 }
 .e-hscroll .e-hscroll-bar .e-hscroll-content .e-overlay {
   pointer-events: none;
@@ -218,19 +219,19 @@
 }
 .e-hscroll:not(.e-scroll-device) .e-scroll-nav:hover {
   background: #ecf;
-  border: 0;
-  color: #000;
   border: 2px solid #000;
+  color: #000;
 }
-.e-hscroll:not(.e-scroll-device) .e-scroll-nav:hover:active {
-  border: 0;
+.e-hscroll:not(.e-scroll-device) .e-scroll-nav:hover .e-icons {
+  color: #400074;
 }
 .e-hscroll:not(.e-scroll-device) .e-scroll-nav:focus {
-  background: #ecf;
-  border: 0;
-  color: #000;
   background: inherit;
   border: 2px solid #fff;
+  color: #000;
+}
+.e-hscroll:not(.e-scroll-device) .e-scroll-nav:focus .e-icons {
+  color: #400074;
 }
 .e-hscroll:not(.e-scroll-device) .e-scroll-nav:active {
   background: #400074;

package/styles/h-scroll/highcontrast.css

@@ -6,10 +6,10 @@
   content: "\e913";
 }
 .e-hscroll.e-rtl .e-nav-left-arrow::before {
-  content: "\e830";
+  content: "\e98f";
 }
 .e-hscroll.e-rtl .e-nav-right-arrow::before {
-  content: "\e829";
+  content: "\e219";
 }
 .e-hscroll.e-scroll-device .e-nav-right-arrow::before {
   content: "\e913";
@@ -165,6 +165,7 @@
   text-align: center;
   vertical-align: middle;
   width: 100%;
+  font-size: 12px;
 }
 .e-hscroll .e-hscroll-bar .e-hscroll-content .e-overlay {
   pointer-events: none;
@@ -218,19 +219,19 @@
 }
 .e-hscroll:not(.e-scroll-device) .e-scroll-nav:hover {
   background: #685708;
-  border: 0;
-  color: #fff;
   border: 2px solid #fff;
+  color: #fff;
 }
-.e-hscroll:not(.e-scroll-device) .e-scroll-nav:hover:active {
-  border: 0;
+.e-hscroll:not(.e-scroll-device) .e-scroll-nav:hover .e-icons {
+  color: #fff;
 }
 .e-hscroll:not(.e-scroll-device) .e-scroll-nav:focus {
-  background: #685708;
-  border: 0;
-  color: #fff;
   background: inherit;
   border: 2px solid #fff;
+  color: #fff;
+}
+.e-hscroll:not(.e-scroll-device) .e-scroll-nav:focus .e-icons {
+  color: #fff;
 }
 .e-hscroll:not(.e-scroll-device) .e-scroll-nav:active {
   background: #ffd939;

package/styles/h-scroll/icons/_fabric-dark.scss

@@ -37,12 +37,12 @@
     }
 
     .e-nav-left-arrow::before {
-      content: '\e829';
+      content: '\e98f';
       line-height: normal;
     }
 
     .e-nav-right-arrow::before {
-      content: '\e830';
+      content: '\e219';
       line-height: normal;
     }
   }

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

@@ -37,12 +37,12 @@
     }
 
     .e-nav-left-arrow::before {
-      content: '\e829';
+      content: '\e98f';
       line-height: normal;
     }
 
     .e-nav-right-arrow::before {
-      content: '\e830';
+      content: '\e219';
       line-height: normal;
     }
   }

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

@@ -17,11 +17,11 @@
       }
 
       .e-nav-left-arrow::before {
-        content: '\e830';
+        content: '\e98f';
       }
 
       .e-nav-right-arrow::before {
-        content: '\e829';
+        content: '\e219';
       }
     }
 

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

@@ -175,6 +175,7 @@
   text-align: center;
   vertical-align: middle;
   width: 100%;
+  font-size: 12px;
 }
 .e-hscroll .e-hscroll-bar .e-hscroll-content .e-overlay {
   pointer-events: none;
@@ -222,18 +223,25 @@
   background: rgba(255, 255, 255, 0.1);
   border: 0;
   color: #000;
-  border-color: rgba(255, 255, 255, 0.1);
+}
+.e-hscroll.e-rtl .e-scroll-nav:hover:active {
+  background: rgba(255, 255, 255, 0.1);
 }
 .e-hscroll:not(.e-scroll-device) .e-scroll-nav:hover {
   background: rgba(255, 255, 255, 0.1);
   border: 0;
   color: #000;
 }
+.e-hscroll:not(.e-scroll-device) .e-scroll-nav:hover .e-icons {
+  color: rgba(255, 255, 255, 0.54);
+}
 .e-hscroll:not(.e-scroll-device) .e-scroll-nav:focus {
   background: rgba(255, 255, 255, 0.1);
   border: 0;
   color: #000;
-  border-color: rgba(255, 255, 255, 0.1);
+}
+.e-hscroll:not(.e-scroll-device) .e-scroll-nav:focus .e-icons {
+  color: rgba(255, 255, 255, 0.54);
 }
 .e-hscroll:not(.e-scroll-device) .e-scroll-nav:active {
   background: rgba(255, 255, 255, 0.18);
@@ -241,6 +249,9 @@
   box-shadow: none;
   color: #000;
 }
+.e-hscroll:not(.e-scroll-device) .e-scroll-nav:active .e-icons {
+  color: rgba(255, 255, 255, 0.54);
+}
 .e-hscroll .e-scroll-nav {
   background: #212121;
 }

package/styles/h-scroll/material.css

@@ -176,6 +176,7 @@
   text-align: center;
   vertical-align: middle;
   width: 100%;
+  font-size: 12px;
 }
 .e-hscroll .e-hscroll-bar .e-hscroll-content .e-overlay {
   pointer-events: none;
@@ -223,18 +224,25 @@
   background: rgba(0, 0, 0, 0.12);
   border: 0;
   color: #000;
-  border-color: rgba(0, 0, 0, 0.12);
+}
+.e-hscroll.e-rtl .e-scroll-nav:hover:active {
+  background: rgba(0, 0, 0, 0.12);
 }
 .e-hscroll:not(.e-scroll-device) .e-scroll-nav:hover {
   background: rgba(0, 0, 0, 0.12);
   border: 0;
   color: #000;
 }
+.e-hscroll:not(.e-scroll-device) .e-scroll-nav:hover .e-icons {
+  color: rgba(0, 0, 0, 0.54);
+}
 .e-hscroll:not(.e-scroll-device) .e-scroll-nav:focus {
   background: rgba(0, 0, 0, 0.12);
   border: 0;
   color: #000;
-  border-color: rgba(0, 0, 0, 0.12);
+}
+.e-hscroll:not(.e-scroll-device) .e-scroll-nav:focus .e-icons {
+  color: rgba(0, 0, 0, 0.54);
 }
 .e-hscroll:not(.e-scroll-device) .e-scroll-nav:active {
   background: #bdbdbd;
@@ -242,6 +250,9 @@
   box-shadow: none;
   color: #000;
 }
+.e-hscroll:not(.e-scroll-device) .e-scroll-nav:active .e-icons {
+  color: rgba(0, 0, 0, 0.54);
+}
 .e-hscroll .e-scroll-nav {
   background: #fafafa;
 }

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

@@ -225,22 +225,34 @@
   border: 0;
   color: #9ca3af;
 }
+.e-hscroll.e-rtl .e-scroll-nav:hover:active {
+  background: #4b5563;
+}
 .e-hscroll:not(.e-scroll-device) .e-scroll-nav:hover {
   background: #4b5563;
   border: 0;
   color: #9ca3af;
 }
+.e-hscroll:not(.e-scroll-device) .e-scroll-nav:hover .e-icons {
+  color: #d1d5db;
+}
 .e-hscroll:not(.e-scroll-device) .e-scroll-nav:focus {
   background: #4b5563;
   border: 0;
   color: #9ca3af;
 }
+.e-hscroll:not(.e-scroll-device) .e-scroll-nav:focus .e-icons {
+  color: #d1d5db;
+}
 .e-hscroll:not(.e-scroll-device) .e-scroll-nav:active {
   background: #374151;
   border: 0;
   box-shadow: none;
   color: #9ca3af;
 }
+.e-hscroll:not(.e-scroll-device) .e-scroll-nav:active .e-icons {
+  color: #d1d5db;
+}
 .e-hscroll .e-scroll-nav {
   background: #374151;
 }

package/styles/h-scroll/tailwind.css

@@ -225,22 +225,34 @@
   border: 0;
   color: #6b7280;
 }
+.e-hscroll.e-rtl .e-scroll-nav:hover:active {
+  background: #e5e7eb;
+}
 .e-hscroll:not(.e-scroll-device) .e-scroll-nav:hover {
   background: #e5e7eb;
   border: 0;
   color: #6b7280;
 }
+.e-hscroll:not(.e-scroll-device) .e-scroll-nav:hover .e-icons {
+  color: #6b7280;
+}
 .e-hscroll:not(.e-scroll-device) .e-scroll-nav:focus {
   background: #e5e7eb;
   border: 0;
   color: #6b7280;
 }
+.e-hscroll:not(.e-scroll-device) .e-scroll-nav:focus .e-icons {
+  color: #6b7280;
+}
 .e-hscroll:not(.e-scroll-device) .e-scroll-nav:active {
   background: #f3f4f6;
   border: 0;
   box-shadow: none;
   color: #6b7280;
 }
+.e-hscroll:not(.e-scroll-device) .e-scroll-nav:active .e-icons {
+  color: #6b7280;
+}
 .e-hscroll .e-scroll-nav {
   background: #f3f4f6;
 }