@syncfusion/ej2-navigations 19.3.57 → 19.4.47

package/styles/treeview/material-dark.css

@@ -89,6 +89,35 @@
   height: 40px;
 }
 
+.e-bigger .e-treeview.e-text-wrap .e-checkbox-wrapper + .e-list-text,
+.e-treeview.e-bigger.e-text-wrap .e-checkbox-wrapper + .e-list-text {
+  max-width: calc(100% - 29px);
+}
+
+.e-bigger .e-treeview.e-text-wrap .e-checkbox-wrapper + .e-list-icon + .e-list-text,
+.e-bigger .e-treeview.e-text-wrap .e-checkbox-wrapper + .e-list-img + .e-list-text,
+.e-treeview.e-bigger.e-text-wrap .e-checkbox-wrapper + .e-list-icon + .e-list-text,
+.e-treeview.e-bigger.e-text-wrap .e-checkbox-wrapper + .e-list-img + .e-list-text {
+  max-width: calc(100% - 70px);
+}
+
+.e-bigger .e-treeview.e-text-wrap .e-checkbox-wrapper + .e-list-icon + .e-list-img + .e-list-text,
+.e-treeview.e-bigger.e-text-wrap .e-checkbox-wrapper + .e-list-icon + .e-list-img + .e-list-text {
+  max-width: calc(100% - 98px);
+}
+
+.e-bigger .e-treeview.e-text-wrap .e-list-icon + .e-list-text,
+.e-bigger .e-treeview.e-text-wrap .e-list-img + .e-list-text,
+.e-treeview.e-bigger.e-text-wrap .e-list-icon + .e-list-text,
+.e-treeview.e-bigger.e-text-wrap .e-list-img + .e-list-text {
+  max-width: calc(100% - 34px);
+}
+
+.e-bigger .e-treeview.e-text-wrap .e-list-icon + .e-list-img + .e-list-text,
+.e-treeview.e-bigger.e-text-wrap .e-list-icon + .e-list-img + .e-list-text {
+  max-width: calc(100% - 62px);
+}
+
 .e-bigger .e-treeview .e-list-text,
 .e-treeview.e-bigger .e-list-text {
   line-height: 38px;
@@ -208,9 +237,40 @@
 
 .e-treeview.e-text-wrap .e-list-text {
   white-space: normal;
+  word-break: break-word;
+}
+
+.e-treeview.e-text-wrap.e-ie-wrap .e-list-text {
   word-break: break-all;
 }
 
+.e-treeview.e-text-wrap .e-editing .e-list-text,
+.e-treeview.e-text-wrap .e-editing .e-list-text .e-input-group {
+  max-width: calc(100% - 2px);
+}
+
+.e-treeview.e-text-wrap .e-checkbox-wrapper + .e-list-text {
+  max-width: calc(100% - 22px);
+}
+
+.e-treeview.e-text-wrap .e-checkbox-wrapper + .e-list-icon + .e-list-text,
+.e-treeview.e-text-wrap .e-checkbox-wrapper + .e-list-img + .e-list-text {
+  max-width: calc(100% - 59px);
+}
+
+.e-treeview.e-text-wrap .e-checkbox-wrapper + .e-list-icon + .e-list-img + .e-list-text {
+  max-width: calc(100% - 87px);
+}
+
+.e-treeview.e-text-wrap .e-list-icon + .e-list-text,
+.e-treeview.e-text-wrap .e-list-img + .e-list-text {
+  max-width: calc(100% - 29px);
+}
+
+.e-treeview.e-text-wrap .e-list-icon + .e-list-img + .e-list-text {
+  max-width: calc(100% - 57px);
+}
+
 .e-treeview .e-ul {
   margin: 0;
   padding: 0 0 0 24px;

package/styles/treeview/material.css

@@ -99,6 +99,35 @@
   height: 40px;
 }
 
+.e-bigger .e-treeview.e-text-wrap .e-checkbox-wrapper + .e-list-text,
+.e-treeview.e-bigger.e-text-wrap .e-checkbox-wrapper + .e-list-text {
+  max-width: calc(100% - 29px);
+}
+
+.e-bigger .e-treeview.e-text-wrap .e-checkbox-wrapper + .e-list-icon + .e-list-text,
+.e-bigger .e-treeview.e-text-wrap .e-checkbox-wrapper + .e-list-img + .e-list-text,
+.e-treeview.e-bigger.e-text-wrap .e-checkbox-wrapper + .e-list-icon + .e-list-text,
+.e-treeview.e-bigger.e-text-wrap .e-checkbox-wrapper + .e-list-img + .e-list-text {
+  max-width: calc(100% - 70px);
+}
+
+.e-bigger .e-treeview.e-text-wrap .e-checkbox-wrapper + .e-list-icon + .e-list-img + .e-list-text,
+.e-treeview.e-bigger.e-text-wrap .e-checkbox-wrapper + .e-list-icon + .e-list-img + .e-list-text {
+  max-width: calc(100% - 98px);
+}
+
+.e-bigger .e-treeview.e-text-wrap .e-list-icon + .e-list-text,
+.e-bigger .e-treeview.e-text-wrap .e-list-img + .e-list-text,
+.e-treeview.e-bigger.e-text-wrap .e-list-icon + .e-list-text,
+.e-treeview.e-bigger.e-text-wrap .e-list-img + .e-list-text {
+  max-width: calc(100% - 34px);
+}
+
+.e-bigger .e-treeview.e-text-wrap .e-list-icon + .e-list-img + .e-list-text,
+.e-treeview.e-bigger.e-text-wrap .e-list-icon + .e-list-img + .e-list-text {
+  max-width: calc(100% - 62px);
+}
+
 .e-bigger .e-treeview .e-list-text,
 .e-treeview.e-bigger .e-list-text {
   line-height: 38px;
@@ -213,9 +242,40 @@
 
 .e-treeview.e-text-wrap .e-list-text {
   white-space: normal;
+  word-break: break-word;
+}
+
+.e-treeview.e-text-wrap.e-ie-wrap .e-list-text {
   word-break: break-all;
 }
 
+.e-treeview.e-text-wrap .e-editing .e-list-text,
+.e-treeview.e-text-wrap .e-editing .e-list-text .e-input-group {
+  max-width: calc(100% - 2px);
+}
+
+.e-treeview.e-text-wrap .e-checkbox-wrapper + .e-list-text {
+  max-width: calc(100% - 22px);
+}
+
+.e-treeview.e-text-wrap .e-checkbox-wrapper + .e-list-icon + .e-list-text,
+.e-treeview.e-text-wrap .e-checkbox-wrapper + .e-list-img + .e-list-text {
+  max-width: calc(100% - 59px);
+}
+
+.e-treeview.e-text-wrap .e-checkbox-wrapper + .e-list-icon + .e-list-img + .e-list-text {
+  max-width: calc(100% - 87px);
+}
+
+.e-treeview.e-text-wrap .e-list-icon + .e-list-text,
+.e-treeview.e-text-wrap .e-list-img + .e-list-text {
+  max-width: calc(100% - 29px);
+}
+
+.e-treeview.e-text-wrap .e-list-icon + .e-list-img + .e-list-text {
+  max-width: calc(100% - 57px);
+}
+
 .e-treeview .e-ul {
   margin: 0;
   padding: 0 0 0 24px;

package/styles/treeview/tailwind-dark.css

@@ -143,6 +143,35 @@
   height: 48px;
 }
 
+.e-bigger .e-treeview.e-text-wrap .e-checkbox-wrapper + .e-list-text,
+.e-treeview.e-bigger.e-text-wrap .e-checkbox-wrapper + .e-list-text {
+  max-width: calc(100% - 29px);
+}
+
+.e-bigger .e-treeview.e-text-wrap .e-checkbox-wrapper + .e-list-icon + .e-list-text,
+.e-bigger .e-treeview.e-text-wrap .e-checkbox-wrapper + .e-list-img + .e-list-text,
+.e-treeview.e-bigger.e-text-wrap .e-checkbox-wrapper + .e-list-icon + .e-list-text,
+.e-treeview.e-bigger.e-text-wrap .e-checkbox-wrapper + .e-list-img + .e-list-text {
+  max-width: calc(100% - 65px);
+}
+
+.e-bigger .e-treeview.e-text-wrap .e-checkbox-wrapper + .e-list-icon + .e-list-img + .e-list-text,
+.e-treeview.e-bigger.e-text-wrap .e-checkbox-wrapper + .e-list-icon + .e-list-img + .e-list-text {
+  max-width: calc(100% - 101px);
+}
+
+.e-bigger .e-treeview.e-text-wrap .e-list-icon + .e-list-text,
+.e-bigger .e-treeview.e-text-wrap .e-list-img + .e-list-text,
+.e-treeview.e-bigger.e-text-wrap .e-list-icon + .e-list-text,
+.e-treeview.e-bigger.e-text-wrap .e-list-img + .e-list-text {
+  max-width: calc(100% - 35px);
+}
+
+.e-bigger .e-treeview.e-text-wrap .e-list-icon + .e-list-img + .e-list-text,
+.e-treeview.e-bigger.e-text-wrap .e-list-icon + .e-list-img + .e-list-text {
+  max-width: calc(100% - 71px);
+}
+
 .e-bigger .e-treeview .e-list-text,
 .e-treeview.e-bigger .e-list-text {
   line-height: 46px;
@@ -316,9 +345,40 @@
 
 .e-treeview.e-text-wrap .e-list-text {
   white-space: normal;
+  word-break: break-word;
+}
+
+.e-treeview.e-text-wrap.e-ie-wrap .e-list-text {
   word-break: break-all;
 }
 
+.e-treeview.e-text-wrap .e-editing .e-list-text,
+.e-treeview.e-text-wrap .e-editing .e-list-text .e-input-group {
+  max-width: calc(100% - 2px);
+}
+
+.e-treeview.e-text-wrap .e-checkbox-wrapper + .e-list-text {
+  max-width: calc(100% - 23px);
+}
+
+.e-treeview.e-text-wrap .e-checkbox-wrapper + .e-list-icon + .e-list-text,
+.e-treeview.e-text-wrap .e-checkbox-wrapper + .e-list-img + .e-list-text {
+  max-width: calc(100% - 56px);
+}
+
+.e-treeview.e-text-wrap .e-checkbox-wrapper + .e-list-icon + .e-list-img + .e-list-text {
+  max-width: calc(100% - 84px);
+}
+
+.e-treeview.e-text-wrap .e-list-icon + .e-list-text,
+.e-treeview.e-text-wrap .e-list-img + .e-list-text {
+  max-width: calc(100% - 32px);
+}
+
+.e-treeview.e-text-wrap .e-list-icon + .e-list-img + .e-list-text {
+  max-width: calc(100% - 60px);
+}
+
 .e-treeview .e-ul {
   margin: 0;
   padding: 0 0 0 12px;
@@ -332,6 +392,10 @@
   display: none;
 }
 
+.e-treeview .e-list-item.e-active {
+  font-weight: 500;
+}
+
 .e-treeview .e-list-item div.e-icons.interaction {
   -webkit-transition: -webkit-transform .3s ease-in-out;
   border-radius: 15px;
@@ -496,7 +560,7 @@
 }
 
 .e-treeview .e-sibling {
-  width: 100%;
+  width: 144px;
   position: absolute;
   z-index: 2;
 }

package/styles/treeview/tailwind.css

@@ -143,6 +143,35 @@
   height: 48px;
 }
 
+.e-bigger .e-treeview.e-text-wrap .e-checkbox-wrapper + .e-list-text,
+.e-treeview.e-bigger.e-text-wrap .e-checkbox-wrapper + .e-list-text {
+  max-width: calc(100% - 29px);
+}
+
+.e-bigger .e-treeview.e-text-wrap .e-checkbox-wrapper + .e-list-icon + .e-list-text,
+.e-bigger .e-treeview.e-text-wrap .e-checkbox-wrapper + .e-list-img + .e-list-text,
+.e-treeview.e-bigger.e-text-wrap .e-checkbox-wrapper + .e-list-icon + .e-list-text,
+.e-treeview.e-bigger.e-text-wrap .e-checkbox-wrapper + .e-list-img + .e-list-text {
+  max-width: calc(100% - 65px);
+}
+
+.e-bigger .e-treeview.e-text-wrap .e-checkbox-wrapper + .e-list-icon + .e-list-img + .e-list-text,
+.e-treeview.e-bigger.e-text-wrap .e-checkbox-wrapper + .e-list-icon + .e-list-img + .e-list-text {
+  max-width: calc(100% - 101px);
+}
+
+.e-bigger .e-treeview.e-text-wrap .e-list-icon + .e-list-text,
+.e-bigger .e-treeview.e-text-wrap .e-list-img + .e-list-text,
+.e-treeview.e-bigger.e-text-wrap .e-list-icon + .e-list-text,
+.e-treeview.e-bigger.e-text-wrap .e-list-img + .e-list-text {
+  max-width: calc(100% - 35px);
+}
+
+.e-bigger .e-treeview.e-text-wrap .e-list-icon + .e-list-img + .e-list-text,
+.e-treeview.e-bigger.e-text-wrap .e-list-icon + .e-list-img + .e-list-text {
+  max-width: calc(100% - 71px);
+}
+
 .e-bigger .e-treeview .e-list-text,
 .e-treeview.e-bigger .e-list-text {
   line-height: 46px;
@@ -316,9 +345,40 @@
 
 .e-treeview.e-text-wrap .e-list-text {
   white-space: normal;
+  word-break: break-word;
+}
+
+.e-treeview.e-text-wrap.e-ie-wrap .e-list-text {
   word-break: break-all;
 }
 
+.e-treeview.e-text-wrap .e-editing .e-list-text,
+.e-treeview.e-text-wrap .e-editing .e-list-text .e-input-group {
+  max-width: calc(100% - 2px);
+}
+
+.e-treeview.e-text-wrap .e-checkbox-wrapper + .e-list-text {
+  max-width: calc(100% - 23px);
+}
+
+.e-treeview.e-text-wrap .e-checkbox-wrapper + .e-list-icon + .e-list-text,
+.e-treeview.e-text-wrap .e-checkbox-wrapper + .e-list-img + .e-list-text {
+  max-width: calc(100% - 56px);
+}
+
+.e-treeview.e-text-wrap .e-checkbox-wrapper + .e-list-icon + .e-list-img + .e-list-text {
+  max-width: calc(100% - 84px);
+}
+
+.e-treeview.e-text-wrap .e-list-icon + .e-list-text,
+.e-treeview.e-text-wrap .e-list-img + .e-list-text {
+  max-width: calc(100% - 32px);
+}
+
+.e-treeview.e-text-wrap .e-list-icon + .e-list-img + .e-list-text {
+  max-width: calc(100% - 60px);
+}
+
 .e-treeview .e-ul {
   margin: 0;
   padding: 0 0 0 12px;
@@ -332,6 +392,10 @@
   display: none;
 }
 
+.e-treeview .e-list-item.e-active {
+  font-weight: 500;
+}
+
 .e-treeview .e-list-item div.e-icons.interaction {
   -webkit-transition: -webkit-transform .3s ease-in-out;
   border-radius: 15px;
@@ -496,7 +560,7 @@
 }
 
 .e-treeview .e-sibling {
-  width: 100%;
+  width: 144px;
   position: absolute;
   z-index: 2;
 }

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

@@ -0,0 +1,49 @@
+/*! 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-border-size: 1px !default;
+$vscroll-border-type: solid !default;
+
+$vscroll-default-bg: $content-bg-color-alt2 !default;
+$vscroll-nav-nrml-minheight: 38px !default;
+$vscroll-nav-bgr-minheight: 48px !default;
+$vscroll-nav-nrml-width: 28px !default;
+$vscroll-nav-bgr-width: 48px !default;
+$vscroll-nrml-padding: 0 $vscroll-nav-nrml-width !default;
+$vscroll-bgr-padding: $vscroll-nav-bgr-width 0 !default;
+$vscroll-box-shadow: none !default;
+$vscroll-overlay-opacity: .5 !default;
+$vscroll-overlay-bg: $content-bg-color-alt2 !default;
+$vscroll-overlay-start: rgba($vscroll-overlay-bg, 0) !default;
+$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: $shadow !default;
+$vscroll-device-arrow-rtl-box-shadow: $shadow !default;
+$vscroll-device-arrow-bg: $content-bg-color-alt2 !default;
+$vscroll-device-arrow-border-size: 1px !default;
+$vscroll-device-arrow-border-color: $icon-color !default;
+$vscroll-device-arrow-color: $icon-color !default;
+$vscroll-device-arrow-size: 14px !default;
+$vscroll-device-arrow-width: 48px !default;
+
+$vscroll-default-icon-color: $icon-color !default;
+$vscroll-hover-bg: $content-bg-color-alt3 !default;
+$vscroll-press-bg: $content-bg-color-alt3 !default;
+$vscroll-default-border: $icon-color !default;
+$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;
+
+@mixin vscroll-btn-animation {
+  content: '';
+}
+
+@mixin vscroll-btn-animation-after {
+  content: '';
+}

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

@@ -1,49 +1,49 @@
-/*! 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-border-size: 1px !default;
-$vscroll-border-type: solid !default;
-
-$vscroll-default-bg: $content-bg-color-alt2 !default;
-$vscroll-nav-nrml-minheight: 38px !default;
-$vscroll-nav-bgr-minheight: 48px !default;
-$vscroll-nav-nrml-width: 28px !default;
-$vscroll-nav-bgr-width: 48px !default;
-$vscroll-nrml-padding: 0 $vscroll-nav-nrml-width !default;
-$vscroll-bgr-padding: $vscroll-nav-bgr-width 0 !default;
-$vscroll-box-shadow: none !default;
-$vscroll-overlay-opacity: .5 !default;
-$vscroll-overlay-bg: $content-bg-color-alt2 !default;
-$vscroll-overlay-start: rgba($vscroll-overlay-bg, 0) !default;
-$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: $shadow !default;
-$vscroll-device-arrow-rtl-box-shadow: $shadow !default;
-$vscroll-device-arrow-bg: $content-bg-color-alt2 !default;
-$vscroll-device-arrow-border-size: 1px !default;
-$vscroll-device-arrow-border-color: $icon-color !default;
-$vscroll-device-arrow-color: $icon-color !default;
-$vscroll-device-arrow-size: 14px !default;
-$vscroll-device-arrow-width: 48px !default;
-
-$vscroll-default-icon-color: $icon-color !default;
-$vscroll-hover-bg: $content-bg-color-alt3 !default;
-$vscroll-press-bg: $content-bg-color-alt3 !default;
-$vscroll-default-border: $icon-color !default;
-$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;
-
-@mixin vscroll-btn-animation {
-  content: '';
-}
-
-@mixin vscroll-btn-animation-after {
-  content: '';
-}
+/*! 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-border-size: 1px !default;
+$vscroll-border-type: solid !default;
+
+$vscroll-default-bg: $content-bg-color-alt2 !default;
+$vscroll-nav-nrml-minheight: 38px !default;
+$vscroll-nav-bgr-minheight: 48px !default;
+$vscroll-nav-nrml-width: 28px !default;
+$vscroll-nav-bgr-width: 48px !default;
+$vscroll-nrml-padding: 0 $vscroll-nav-nrml-width !default;
+$vscroll-bgr-padding: $vscroll-nav-bgr-width 0 !default;
+$vscroll-box-shadow: none !default;
+$vscroll-overlay-opacity: .5 !default;
+$vscroll-overlay-bg: $content-bg-color-alt2 !default;
+$vscroll-overlay-start: rgba($vscroll-overlay-bg, 0) !default;
+$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: $shadow !default;
+$vscroll-device-arrow-rtl-box-shadow: $shadow !default;
+$vscroll-device-arrow-bg: $content-bg-color-alt2 !default;
+$vscroll-device-arrow-border-size: 1px !default;
+$vscroll-device-arrow-border-color: $icon-color !default;
+$vscroll-device-arrow-color: $icon-color !default;
+$vscroll-device-arrow-size: 14px !default;
+$vscroll-device-arrow-width: 48px !default;
+
+$vscroll-default-icon-color: $icon-color !default;
+$vscroll-hover-bg: $content-bg-color-alt3 !default;
+$vscroll-press-bg: $content-bg-color-alt3 !default;
+$vscroll-default-border: $icon-color !default;
+$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;
+
+@mixin vscroll-btn-animation {
+  content: '';
+}
+
+@mixin vscroll-btn-animation-after {
+  content: '';
+}

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

@@ -0,0 +1,26 @@
+@include export-module('vscroll-fluent-icons') {
+  /*! vscroll icons */
+  #{&}.e-vscroll {
+
+    &.e-scroll-device {
+
+      .e-nav-up-arrow::before {
+        content: '\e810';
+      }
+
+      .e-nav-down-arrow::before {
+        content: '\e811';
+      }
+    }
+
+    .e-nav-up-arrow::before {
+      content: '\e7c4';
+      line-height: normal;
+    }
+
+    .e-nav-down-arrow::before {
+      content: '\e7c3';
+      line-height: normal;
+    }
+  }
+}

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

@@ -1,26 +1,26 @@
-@include export-module('vscroll-tailwind-icons') {
-  /*! vscroll icons */
-  #{&}.e-vscroll {
-
-    &.e-scroll-device {
-
-      .e-nav-up-arrow::before {
-        content: '\e7a0';
-      }
-
-      .e-nav-down-arrow::before {
-        content: '\e7b3';
-      }
-    }
-
-    .e-nav-up-arrow::before {
-      content: '\e7a0';
-      line-height: normal;
-    }
-
-    .e-nav-down-arrow::before {
-      content: '\e7b3';
-      line-height: normal;
-    }
-  }
-}
+@include export-module('vscroll-tailwind-icons') {
+  /*! vscroll icons */
+  #{&}.e-vscroll {
+
+    &.e-scroll-device {
+
+      .e-nav-up-arrow::before {
+        content: '\e7a0';
+      }
+
+      .e-nav-down-arrow::before {
+        content: '\e7b3';
+      }
+    }
+
+    .e-nav-up-arrow::before {
+      content: '\e7a0';
+      line-height: normal;
+    }
+
+    .e-nav-down-arrow::before {
+      content: '\e7b3';
+      line-height: normal;
+    }
+  }
+}