@syncfusion/ej2-navigations 20.1.48 → 20.1.51-10460

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

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

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

@@ -0,0 +1,83 @@
+/*! component's theme wise override definitions and variables */
+$hscroll-skin: 'material3' !default;
+$border-type: solid;
+$hscroll-hover-font: rgba($icon-color) !default;
+$hscroll-active-font-color: rgba($content-text-color-alt2) !default;
+$hscroll-default-bg: $content-bg-color-alt1 !default;
+$hscroll-press-bg: $content-bg-color-pressed !default;
+$hscroll-active-bg: rgba($content-bg-color-selected) !default;
+$hscroll-border-size: 1px !default;
+$hscroll-nav-nrml-minheight: 35px !default;
+$hscroll-nav-bgr-minheight: 56px !default;
+$hscroll-mob-nav-nrml-width: 50px !default;
+$hscroll-nav-nrml-width: 40px !default;
+$hscroll-nav-bgr-width: 46px !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-hover !default;
+$hscroll-hover-border-color: $content-bg-color-hover !default;
+$hscroll-default-icon-color: rgba($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: rgba($content-bg-color) !default;
+$hscroll-overlay-start: ($hscroll-overlay-bg, 0) !default;
+$hscroll-overlay-end: ($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: rgba($shadow) !default;
+$hscroll-device-arrow-rtl-box-shadow: rgba($shadow) !default;
+$hscroll-device-arrow-bg: $content-bg-color-alt2 !default;
+$hscroll-device-arrow-border-size: 1px !default;
+$hscroll-device-arrow-border-color: rgba($border-light) !default;
+$hscroll-device-arrow-color: rgba($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: rgba($border-light) !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/fluent2.scss

@@ -0,0 +1,4 @@
+@import 'ej2-base/styles/definition/fluent2.scss';
+@import 'fluent2-definition.scss';
+@import 'icons/fluent2.scss';
+@import 'all.scss';

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

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

package/styles/h-scroll/icons/_bootstrap5.3.scss

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

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

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

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

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

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

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

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

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

package/styles/h-scroll/material3-dark.scss

@@ -0,0 +1,4 @@
+@import 'ej2-base/styles/definition/material3-dark.scss';
+@import 'material3-dark-definition.scss';
+@import 'icons/material3-dark.scss';
+@import 'all.scss';

package/styles/h-scroll/material3.scss

@@ -0,0 +1,4 @@
+@import 'ej2-base/styles/definition/material3.scss';
+@import 'material3-definition.scss';
+@import 'icons/material3.scss';
+@import 'all.scss';

package/styles/highcontrast-light.css

@@ -10293,7 +10293,7 @@ ejs-sidebar {
   -ms-flex-positive: 1;
       flex-grow: 1;
   -ms-flex-pack: end;
-      justify-content: end;
+      justify-content: flex-end;
 }
 
 .e-breadcrumb-popup.e-rtl.e-icon-right .e-breadcrumb-icon,

package/styles/highcontrast.css

@@ -10322,7 +10322,7 @@ ejs-sidebar {
   -ms-flex-positive: 1;
       flex-grow: 1;
   -ms-flex-pack: end;
-      justify-content: end;
+      justify-content: flex-end;
 }
 
 .e-breadcrumb-popup.e-rtl.e-icon-right .e-breadcrumb-icon,

package/styles/material-dark.css

@@ -9798,7 +9798,7 @@ ejs-sidebar {
   -ms-flex-positive: 1;
       flex-grow: 1;
   -ms-flex-pack: end;
-      justify-content: end;
+      justify-content: flex-end;
 }
 
 .e-breadcrumb-popup.e-rtl.e-icon-right .e-breadcrumb-icon,

package/styles/material.css

@@ -9815,7 +9815,7 @@ ejs-sidebar {
   -ms-flex-positive: 1;
       flex-grow: 1;
   -ms-flex-pack: end;
-      justify-content: end;
+      justify-content: flex-end;
 }
 
 .e-breadcrumb-popup.e-rtl.e-icon-right .e-breadcrumb-icon,

package/styles/material3-dark.scss

@@ -0,0 +1,34 @@
+@import 'ej2-base/styles/definition/material3-dark.scss';
+@import 'h-scroll/material3-dark-definition.scss';
+@import 'h-scroll/icons/material3-dark.scss';
+@import 'h-scroll/all.scss';
+
+@import 'v-scroll/material3-dark-definition.scss';
+@import 'v-scroll/icons/material3-dark.scss';
+@import 'v-scroll/all.scss';
+@import 'toolbar/material3-dark-definition.scss';
+@import 'toolbar/icons/material3-dark.scss';
+@import 'toolbar/all.scss';
+@import 'accordion/material3-dark-definition.scss';
+@import 'accordion/icons/material3-dark.scss';
+@import 'accordion/all.scss';
+@import 'carousel/material3-dark-definition.scss';
+@import 'carousel/icons/material3-dark.scss';
+@import 'carousel/all.scss';
+@import 'context-menu/material3-dark-definition.scss';
+@import 'context-menu/icons/material3-dark.scss';
+@import 'context-menu/all.scss';
+@import 'tab/material3-dark-definition.scss';
+@import 'tab/icons/material3-dark.scss';
+@import 'tab/all.scss';
+@import 'treeview/material3-dark-definition.scss';
+@import 'treeview/icons/material3-dark.scss';
+@import 'treeview/all.scss';
+@import 'sidebar/material3-dark-definition.scss';
+@import 'sidebar/all.scss';
+@import 'menu/material3-dark-definition.scss';
+@import 'menu/icons/material3-dark.scss';
+@import 'menu/all.scss';
+@import 'breadcrumb/material3-dark-definition.scss';
+@import 'breadcrumb/icons/material3-dark.scss';
+@import 'breadcrumb/all.scss';

package/styles/material3.scss

@@ -0,0 +1,34 @@
+@import 'ej2-base/styles/definition/material3.scss';
+@import 'h-scroll/material3-definition.scss';
+@import 'h-scroll/icons/material3.scss';
+@import 'h-scroll/all.scss';
+
+@import 'v-scroll/material3-definition.scss';
+@import 'v-scroll/icons/material3.scss';
+@import 'v-scroll/all.scss';
+@import 'toolbar/material3-definition.scss';
+@import 'toolbar/icons/material3.scss';
+@import 'toolbar/all.scss';
+@import 'accordion/material3-definition.scss';
+@import 'accordion/icons/material3.scss';
+@import 'accordion/all.scss';
+@import 'carousel/material3-definition.scss';
+@import 'carousel/icons/material3.scss';
+@import 'carousel/all.scss';
+@import 'context-menu/material3-definition.scss';
+@import 'context-menu/icons/material3.scss';
+@import 'context-menu/all.scss';
+@import 'tab/material3-definition.scss';
+@import 'tab/icons/material3.scss';
+@import 'tab/all.scss';
+@import 'treeview/material3-definition.scss';
+@import 'treeview/icons/material3.scss';
+@import 'treeview/all.scss';
+@import 'sidebar/material3-definition.scss';
+@import 'sidebar/all.scss';
+@import 'menu/material3-definition.scss';
+@import 'menu/icons/material3.scss';
+@import 'menu/all.scss';
+@import 'breadcrumb/material3-definition.scss';
+@import 'breadcrumb/icons/material3.scss';
+@import 'breadcrumb/all.scss';

package/styles/menu/_bds-definition.scss

@@ -0,0 +1,65 @@
+$menu-bigger-caret-font-size: $cmenu-bigger-caret-font-size !default;
+$menu-bigger-caret-li-padding: 32px !default;
+$menu-bigger-caret-right: 12px !default;
+$menu-bigger-font-size: $text-base !default;
+$menu-bigger-li-height: 48px !default;
+$menu-bigger-li-padding: 0 16px !default;
+$menu-bigger-li-text-indent: 15px !default;
+$menu-bigger-li-right-padding: 12px !default;
+$menu-bigger-icon-margin-right: 12px !default;
+$menu-icon-width: 1em !default;
+$menu-blank-icon: 34px !default;
+$menu-blank-icon-bigger: 41px !default;
+$menu-caret-font-size: $text-base !default;
+$menu-caret-icon: '\e706' !default;
+$menu-caret-icon-rtl: '\e70f' !default;
+$menu-caret-right: 8px !default;
+$menu-caret-li-padding: 26px !default;
+$menu-ul-padding: 0 !default;
+$menu-separator-bigger-padding: 0 !default;
+$menu-ul-bigger-header-padding: 0 !default;
+$menu-caret-padding-left: 8px !default;
+$menu-disable-opacity: .65 !default;
+$menu-font-size: $text-sm !default;
+$menu-icon-margin-right: 8px !default;
+$menu-icon-bigger-margin-right: 12px !default;
+$menu-li-hover-outline-offset: 0 !default;
+$menu-li-border-style: solid !default;
+$menu-li-border-width: 1px !default;
+$menu-li-height: 38px !default;
+$menu-li-padding: 0 12px !default;
+$menu-li-text-indent: 12px !default;
+$menu-li-right-padding: 12px !default;
+$menu-separator-padding: 0 !default;
+$menu-icon-font-size: $text-lg !default;
+$menu-icon-bigger-font-size: 22px !default;
+$menu-li-selected-outline-offset: 0 !default;
+$menu-hscroll-nav-size: 28px !default;
+$menu-vscroll-nav-size: 28px !default;
+$menu-scroll-nav-icon-size: 16px !default;
+$menu-bigger-hscroll-nav-size: 40px !default;
+$menu-bigger-vscroll-nav-size: 32px !default;
+$menu-bigger-scroll-nav-icon-size: 18px !default;
+$menu-header-icon-padding: 0 16px !default;
+$menu-li-bgcolor: $content-bg-color-alt3 !default;
+$menu-li-border-color: $border-light !default;
+$menu-li-selection-bgcolor: $content-bg-color-alt3 !default;
+$menu-li-selected-outline: 0 solid $menu-li-selection-bgcolor !default;
+$menu-li-selection-font-color: $content-text-color !default;
+$menu-ul-header-padding: $menu-ul-padding !default;
+$menu-color: $content-text-color !default;
+$menu-seperator-border-color: $border-light !default;
+$menu-selected-color: $content-text-color !default;
+$menu-sub-ul-bgcolor: $content-bg-color-alt2 !default;
+$menu-sub-li-border-color: $border-light !default;
+$menu-ul-bgcolor: $content-bg-color-alt2 !default;
+$menu-ul-border: none !default;
+$menu-li-hover-outline: 0 solid $menu-li-border-color !default;
+$menu-srollbar-ul-border: none !default;
+$submenu-caret-font-size: $menu-caret-font-size !default;
+$submenu-bigger-caret-font-size: $submenu-caret-font-size !default;
+$submenu-color: $content-text-color !default;
+$menu-icon-color: $icon-color !default;
+$menu-icon-hover-color: $content-text-color !default;
+$menu-icon-focussed-color: $cmenu-caret-color !default;
+$menu-caret-color: $cmenu-caret-color !default;