@syncfusion/ej2-navigations 20.1.60 → 20.2.38

package/styles/tailwind.scss

@@ -1,3 +1,4 @@
+@import 'pager/tailwind.scss';
 @import 'h-scroll/tailwind.scss';
 @import 'v-scroll/tailwind.scss';
 @import 'toolbar/tailwind.scss';

package/styles/toolbar/_fusionnew-definition.scss

@@ -0,0 +1,162 @@
+/*! Toolbar's bootstrap5 theme wise override definitions and variables */
+// sass-lint:disable-all
+$tbar-skin: 'bootstrap5' !default;
+
+//font definitions
+$tbar-btn-family: $font-family !default;
+$tbar-btn-weight: $font-weight-normal !default;
+$tbar-icons-bgr-font-size: $text-xl;
+$tbar-btn-font-size: $text-lg !default;
+$tbar-btn-txt-font-size: $text-sm !default;
+
+// box shadow definitions
+$tbar-pop-box-shadow: $shadow-lg;
+$tbar-btn-box-shadow: none !default;
+$tbar-box-shadow: none !default;
+$tbar-nav-pressed-box-shadow: none !default;
+$tbar-btn-pressed-box-shadow: none !default;
+
+// padding definitions
+$tbar-item-bgr-padding: 4px !default;
+$tbar-item-nrml-padding: 4px !default;
+$tbar-btn-nrml-padding: 0 4px !default;
+$tbar-btn-bgr-padding: 0 8px !default;
+$tbar-btn-bgr-focus-padding: 0 6px !default;
+$tbar-btn-icn-nrml-padding: 4px !default;
+$tbar-btn-icn-bgr-padding: 4px 6px !default;
+$tbar-btn-icn-right-bgr-padding: 4px 6px !default;
+$tbar-btn-icn-right-nrml-padding: 4px !default;
+$btn-txt-nrml-padding: 4px !default;
+$btn-txt-bgr-padding: 4px !default;
+$tbar-item-pop-nrml-padding: 0 !default;
+$tbar-item-pop-bgr-padding: 0 !default;
+$tbar-pop-btn-bgr-padding: 8px 18px !default;
+$tbar-pop-btn-nrml-padding: 6px 12px !default;
+$tbar-pop-icon-bgr-padding: 0 6px 0 0 !default;
+$tbar-pop-icon-nrml-padding: 0 4px 0 0 !default;
+$tbar-pop-btn-txt-nrml-pad: 0 0 0 4px !default;
+$tbar-pop-btn-txt-bgr-pad: 0 0 0 6px !default;
+$tbar-popup-padding: 0 !default;
+$tbar-item-bgr-padding-bigger: 1.5px 0 !default;
+$tbar-item-nrml-padding-small: 1px 0 !default;
+
+// dimension definitions
+$tbar-btn-bgr-line-height: 24px !default;
+$tbar-btn-nrml-line-height: 22px !default;
+$tbar-btn-nrml-minheight: 32px !default;
+$tbar-btn-bgr-minheight: 38px !default;
+$tbar-btn-nrml-minwidth: 32px !default;
+$tbar-btn-bgr-minwidth: 38px !default;
+$tbar-btn-bgr-height: calc(100% - 11px) !default;
+$tbar-btn-nrml-height: calc(100% - 10px) !default;
+$tbar-nrml-size: 38px !default;
+$tbar-bgr-size: 46px !default;
+$tbar-nrml-items-size: 38px !default;
+$tbar-bgr-items-size: 46px !default;
+$tbar-nrml-item-size: 38px !default;
+$tbar-item-height: 38px !default;
+$tbar-item-nrml-minwidth: 28px !default;
+$tbar-bgr-item-size: 49px !default;
+$tbar-btn-icon-nrml-width: 12px !default;
+$tbar-btn-icon-nrml-height: 16px !default;
+$tbar-btn-icon-nrml-line-height: 16px !default;
+$tbar-left-item-line-height: 35px !default;
+$tbar-right-item-line-height: 24px !default;
+$tbar-btn-icon-bgr-width: 13px !default;
+$tbar-btn-icon-bgr-height: 18px !default;
+$tbar-btn-icon-bgr-line-height: 18px !default;
+$tbar-btn-txt-line-height: inherit !default;
+$tbar-nav-nrml-width: 28px !default;
+$tbar-nav-bgr-width: 36px !default;
+$tbar-btn-pop-nrml-minheight: 38px !default;
+$tbar-btn-pop-bgr-minheight: 46px !default;
+$tbar-radius: 0;
+$tbar-pop-radius: 4px;
+$tbar-pop-padding-bottom: 5px !default;
+$tbar-big-pop-padding-bottom: 3px !default;
+$tbar-zero-value: 0 !default;
+$tbar-separator-nrml-height: 24px !default;
+$tbar-separator-bgr-height: 30px !default;
+$tbar-separator-nrml-minheight: $tbar-separator-nrml-height !default;
+$tbar-separator-bgr-minheight: $tbar-separator-bgr-height !default;
+$tbar-separator-size: 1px !default;
+$tba-horizontal-separator: 0 $tbar-separator-size 0 0 !default;
+$tba-vertical-separator: 0 0 $tbar-separator-size 0 !default;
+
+// margin definitions
+$tbar-item-nrml-mrgn: 8px !default;
+$tbar-item-bgr-mrgn: 12px !default;
+$tbar-multirow-items-mrgn-bigger: 12.5px !default;
+$tbar-multirow-items-mrgn-small: 10px !default;
+$tbar-multirow-item-top-btm-mrgn-bigger: 1.5px 0 !default;
+$tbar-multirow-item-top-btm-mrgn-small: 1px 0 !default;
+$tbar-multirow-item-mrgn: 0 !default;
+$tbar-btn-bgr-mrgn: 0 !default;
+$tbar-btn-nrml-mrgn: 0 !default;
+$tbar-v-btn-bgr-mrgn: 0 !default;
+$tbar-v-btn-nrml-mrgn: 0 !default;
+$tbar-separator-vertical-nrml-mrgn: 3px 7px;
+$tbar-separator-bgr-mrgn: 8px;
+$tbar-separator-vertical-bgr-mrgn: 5px 10px;
+$tbar-separator-nrml-mrgn: 5px 10px;
+
+// border definitions
+$border-size: 0;
+$border-type: solid;
+$tbar-border-radius: 4px !default;
+$tbar-border-nav-type: solid !default;
+$tbar-border-size: $border-size;
+$tbar-separator-border-type: $border-type;
+$tbar-hover-border-color: $icon-color;
+$tbar-pressed-border: $tbar-hover-border-color;
+$tbar-separator-border: $border-light !default;
+$tbar-default-border: $border-light !default;
+$tbar-hover-border-color: $icon-color !default;
+$tbar-focus-border-color: $tbar-hover-border-color !default;
+$tbar-press-border-color: $border-light !default;
+$tbar-border-nav-type: $border-light !default;
+$tbar-border-nav-active-type: $border-light !default;
+$tbar-btn-border: none !default;
+$tbar-item-pop-bg-color: $transparent !default;
+$tbar-popup-border-width: 0 0 0 $border-size !default;
+$tbar-popup-rtl-border-width: 0 $border-size 0 0 !default;
+$tbar-popup-vertical-border-width: $border-size 0 0 0 !default;
+$tbar-popup-vertical-rtl-border-width: 0 0 $border-size 0 !default;
+$tbar-border-type: $border-type !default;
+$tbar-nav-press-border: 0 !default;
+$tbar-nav-hover-border: 0 !default;
+$tbar-nav-focus-border: 0 !default;
+$tbar-btn-border-radius: 0 !default;
+
+// color definitions
+$tbar-default-bg: $content-bg-color-alt1 !default;
+$tbar-items-default-bg: $tbar-default-bg !default;
+$tbar-default-font: $content-text-color !default;
+$tbar-active-bg: $secondary-bg-color-pressed !default;
+$tbar-active-icon-color: $primary-text-color !default;
+$tbar-tab-highlight-color:  rgba(0, 0, 0, 0) !default;
+$tbar-press-bg: $content-bg-color-alt2 !default;
+$tbar-btn-press-bg: $tbar-active-bg !default;
+$tbar-hover-bg:  $secondary-bg-color-hover !default;
+$tbar-hover-font: $icon-color !default;
+$tbar-hover-font-color: $tbar-hover-font !default;
+$tbar-default-icon-color: $icon-color !default;
+$tbar-pressed-bg: $secondary-bg-color-focus !default;
+$tbar-pressed-font: $content-text-color-alt2 !default;
+$tbar-select-font: $content-text-color-alt2 !default;
+$tbar-default-font-overlay: $content-text-color-alt2 !default;
+$tbar-default-icon-overlay: $content-text-color-alt2 !default;
+$tbar-focus-bg: $tbar-hover-bg !default;
+$tbar-press-font: $content-text-color-alt2 !default;
+$tbar-active-font-color: $primary-text-color !default;
+$tbar-btn-active-font-color: $tbar-press-font !default;
+$tbar-popup-btn-bg-color: transparent !default;
+$tbar-pop-bg: $flyout-bg-color !default;
+
+@mixin tbar-btn-animation {
+  content: '';
+}
+
+@mixin tbar-btn-animation-after {
+  content: '';
+}

package/styles/toolbar/_material3-definition.scss

@@ -0,0 +1,162 @@
+/*! Toolbar's bootstrap5 theme wise override definitions and variables */
+// sass-lint:disable-all
+$tbar-skin: 'bootstrap5' !default;
+
+//font definitions
+$tbar-btn-family: $font-family !default;
+$tbar-btn-weight: $font-weight-normal !default;
+$tbar-icons-bgr-font-size: $text-xl;
+$tbar-btn-font-size: $text-lg !default;
+$tbar-btn-txt-font-size: $text-sm !default;
+
+// box shadow definitions
+$tbar-pop-box-shadow: $shadow-lg;
+$tbar-btn-box-shadow: none !default;
+$tbar-box-shadow: none !default;
+$tbar-nav-pressed-box-shadow: none !default;
+$tbar-btn-pressed-box-shadow: none !default;
+
+// padding definitions
+$tbar-item-bgr-padding: 4px !default;
+$tbar-item-nrml-padding: 4px !default;
+$tbar-btn-nrml-padding: 0 4px !default;
+$tbar-btn-bgr-padding: 0 8px !default;
+$tbar-btn-bgr-focus-padding: 0 6px !default;
+$tbar-btn-icn-nrml-padding: 4px !default;
+$tbar-btn-icn-bgr-padding: 4px 6px !default;
+$tbar-btn-icn-right-bgr-padding: 4px 6px !default;
+$tbar-btn-icn-right-nrml-padding: 4px !default;
+$btn-txt-nrml-padding: 4px !default;
+$btn-txt-bgr-padding: 4px !default;
+$tbar-item-pop-nrml-padding: 0 !default;
+$tbar-item-pop-bgr-padding: 0 !default;
+$tbar-pop-btn-bgr-padding: 8px 18px !default;
+$tbar-pop-btn-nrml-padding: 6px 12px !default;
+$tbar-pop-icon-bgr-padding: 0 6px 0 0 !default;
+$tbar-pop-icon-nrml-padding: 0 4px 0 0 !default;
+$tbar-pop-btn-txt-nrml-pad: 0 0 0 4px !default;
+$tbar-pop-btn-txt-bgr-pad: 0 0 0 6px !default;
+$tbar-popup-padding: 0 !default;
+$tbar-item-bgr-padding-bigger: 1.5px 0 !default;
+$tbar-item-nrml-padding-small: 1px 0 !default;
+
+// dimension definitions
+$tbar-btn-bgr-line-height: 24px !default;
+$tbar-btn-nrml-line-height: 22px !default;
+$tbar-btn-nrml-minheight: 32px !default;
+$tbar-btn-bgr-minheight: 38px !default;
+$tbar-btn-nrml-minwidth: 32px !default;
+$tbar-btn-bgr-minwidth: 38px !default;
+$tbar-btn-bgr-height: calc(100% - 11px) !default;
+$tbar-btn-nrml-height: calc(100% - 10px) !default;
+$tbar-nrml-size: 38px !default;
+$tbar-bgr-size: 46px !default;
+$tbar-nrml-items-size: 38px !default;
+$tbar-bgr-items-size: 46px !default;
+$tbar-nrml-item-size: 38px !default;
+$tbar-item-height: 38px !default;
+$tbar-item-nrml-minwidth: 28px !default;
+$tbar-bgr-item-size: 49px !default;
+$tbar-btn-icon-nrml-width: 12px !default;
+$tbar-btn-icon-nrml-height: 16px !default;
+$tbar-btn-icon-nrml-line-height: 16px !default;
+$tbar-left-item-line-height: 35px !default;
+$tbar-right-item-line-height: 24px !default;
+$tbar-btn-icon-bgr-width: 13px !default;
+$tbar-btn-icon-bgr-height: 18px !default;
+$tbar-btn-icon-bgr-line-height: 18px !default;
+$tbar-btn-txt-line-height: inherit !default;
+$tbar-nav-nrml-width: 28px !default;
+$tbar-nav-bgr-width: 36px !default;
+$tbar-btn-pop-nrml-minheight: 38px !default;
+$tbar-btn-pop-bgr-minheight: 46px !default;
+$tbar-radius: 0;
+$tbar-pop-radius: 4px;
+$tbar-pop-padding-bottom: 5px !default;
+$tbar-big-pop-padding-bottom: 3px !default;
+$tbar-zero-value: 0 !default;
+$tbar-separator-nrml-height: 24px !default;
+$tbar-separator-bgr-height: 30px !default;
+$tbar-separator-nrml-minheight: $tbar-separator-nrml-height !default;
+$tbar-separator-bgr-minheight: $tbar-separator-bgr-height !default;
+$tbar-separator-size: 1px !default;
+$tba-horizontal-separator: 0 $tbar-separator-size 0 0 !default;
+$tba-vertical-separator: 0 0 $tbar-separator-size 0 !default;
+
+// margin definitions
+$tbar-item-nrml-mrgn: 8px !default;
+$tbar-item-bgr-mrgn: 12px !default;
+$tbar-multirow-items-mrgn-bigger: 12.5px !default;
+$tbar-multirow-items-mrgn-small: 10px !default;
+$tbar-multirow-item-top-btm-mrgn-bigger: 1.5px 0 !default;
+$tbar-multirow-item-top-btm-mrgn-small: 1px 0 !default;
+$tbar-multirow-item-mrgn: 0 !default;
+$tbar-btn-bgr-mrgn: 0 !default;
+$tbar-btn-nrml-mrgn: 0 !default;
+$tbar-v-btn-bgr-mrgn: 0 !default;
+$tbar-v-btn-nrml-mrgn: 0 !default;
+$tbar-separator-vertical-nrml-mrgn: 3px 7px;
+$tbar-separator-bgr-mrgn: 8px;
+$tbar-separator-vertical-bgr-mrgn: 5px 10px;
+$tbar-separator-nrml-mrgn: 5px 10px;
+
+// border definitions
+$border-size: 0;
+$border-type: solid;
+$tbar-border-radius: 4px !default;
+$tbar-border-nav-type: solid !default;
+$tbar-border-size: $border-size;
+$tbar-separator-border-type: $border-type;
+$tbar-hover-border-color: $icon-color;
+$tbar-pressed-border: $tbar-hover-border-color;
+$tbar-separator-border: $border-light !default;
+$tbar-default-border: $border-light !default;
+$tbar-hover-border-color: $icon-color !default;
+$tbar-focus-border-color: $tbar-hover-border-color !default;
+$tbar-press-border-color: $border-light !default;
+$tbar-border-nav-type: $border-light !default;
+$tbar-border-nav-active-type: $border-light !default;
+$tbar-btn-border: none !default;
+$tbar-item-pop-bg-color: $transparent !default;
+$tbar-popup-border-width: 0 0 0 $border-size !default;
+$tbar-popup-rtl-border-width: 0 $border-size 0 0 !default;
+$tbar-popup-vertical-border-width: $border-size 0 0 0 !default;
+$tbar-popup-vertical-rtl-border-width: 0 0 $border-size 0 !default;
+$tbar-border-type: $border-type !default;
+$tbar-nav-press-border: 0 !default;
+$tbar-nav-hover-border: 0 !default;
+$tbar-nav-focus-border: 0 !default;
+$tbar-btn-border-radius: 0 !default;
+
+// color definitions
+$tbar-default-bg: $content-bg-color-alt1 !default;
+$tbar-items-default-bg: $tbar-default-bg !default;
+$tbar-default-font: $content-text-color !default;
+$tbar-active-bg: $secondary-bg-color-pressed !default;
+$tbar-active-icon-color: $primary-text-color !default;
+$tbar-tab-highlight-color:  rgba(0, 0, 0, 0) !default;
+$tbar-press-bg: $content-bg-color-alt2 !default;
+$tbar-btn-press-bg: $tbar-active-bg !default;
+$tbar-hover-bg:  $secondary-bg-color-hover !default;
+$tbar-hover-font: $icon-color !default;
+$tbar-hover-font-color: $tbar-hover-font !default;
+$tbar-default-icon-color: $icon-color !default;
+$tbar-pressed-bg: $secondary-bg-color-focus !default;
+$tbar-pressed-font: $content-text-color-alt2 !default;
+$tbar-select-font: $content-text-color-alt2 !default;
+$tbar-default-font-overlay: $content-text-color-alt2 !default;
+$tbar-default-icon-overlay: $content-text-color-alt2 !default;
+$tbar-focus-bg: $tbar-hover-bg !default;
+$tbar-press-font: $content-text-color-alt2 !default;
+$tbar-active-font-color: $primary-text-color !default;
+$tbar-btn-active-font-color: $tbar-press-font !default;
+$tbar-popup-btn-bg-color: transparent !default;
+$tbar-pop-bg: $flyout-bg-color !default;
+
+@mixin tbar-btn-animation {
+  content: '';
+}
+
+@mixin tbar-btn-animation-after {
+  content: '';
+}

package/styles/toolbar/icons/_fusionnew.scss

@@ -0,0 +1,17 @@
+
+@include export-module('toolbar-fusionnew-icons') {
+  /*! toolbar icons */
+  #{&}.e-toolbar {
+
+    .e-popup-down-icon::before {
+      content: '\e729';
+      line-height: normal;
+    }
+
+    .e-popup-up-icon::before {
+      content: '\e776';
+      line-height: normal;
+    }
+  }
+}
+  

package/styles/toolbar/icons/_material3.scss

@@ -0,0 +1,17 @@
+
+@include export-module('toolbar-material3-icons') {
+  /*! toolbar icons */
+  #{&}.e-toolbar {
+
+    .e-popup-down-icon::before {
+      content: '\e729';
+      line-height: normal;
+    }
+
+    .e-popup-up-icon::before {
+      content: '\e776';
+      line-height: normal;
+    }
+  }
+}
+  

package/styles/treeview/_fusionnew-definition.scss

@@ -0,0 +1,120 @@
+/*! TreeView's bootstrap5 theme wise override definitions and variables */
+// sass-lint:disable-all
+$treeview-font-size: $text-sm !default;
+$treeview-icon-font-size: 20px !default;
+$treeview-image-font-size: 20px !default;
+$treeview-item-height: 36px !default;
+$treeview-text-height: 34px !default;
+$treeview-input-height: 30px !default;
+$treeview-root-ul-padding: 0 0 0 12px !default;
+$treeview-rtl-root-ul-padding: 0 12px 0 0 !default;
+$treeview-child-ul-padding: 0 0 0 20px !default;
+$treeview-rtl-child-ul-padding: 0 20px 0 0 !default;
+$treeview-text-wrap-padding: 0 0 0 20px !default;
+$treeview-rtl-text-wrap-padding: 0 20px 0 0 !default;
+$treeview-icon-size: 20px !default;
+$treeview-icon-margin: 0 0 0 -20px !default;
+$treeview-rtl-icon-margin: 0 -20px 0 0 !default;
+$treeview-icon-padding: 0px !default;
+$treeview-text-padding: 0 8px !default;
+$treeview-text-margin: 0 !default;
+$treeview-image-size: 20px !default;
+$treeview-image-margin: 0 0 0 8px !default;
+$treeview-navigable-icon-image-anchor-margin-bigger: 0 12px 0 8px !default;
+$treeview-navigable-icon-image-anchor-margin-reverse-bigger: 0 6px 0 10px !default;
+$treeview-navigable-icon-image-anchor-margin: 0 8px 0 0 !default;
+$treeview-navigable-icon-image-anchor-margin-reverse: 0 0 0 8px !default;
+$treeview-navigable-rtl-margin-reverse: 0 12px 0 0 !default;
+$treeview-rtl-image-margin: 0 8px 0 0 !default;
+$treeview-image-text-padding: 0 8px !default;
+$treeview-icon-image-margin: 0 0 0 8px !default;
+$treeview-rtl-icon-image-margin: 0 8px 0 0 !default;
+$treeview-check-margin: 0 0 0 12px !default;
+$treeview-rtl-check-margin: 0 12px 0 0 !default;
+$treeview-check-text-padding: 0 8px !default;
+$treeview-check-image-margin: 0 0 0 8px !default;
+$treeview-rtl-check-image-margin: 0 8px 0 0 !default;
+$treeview-drop-count-border-size: 1px !default;
+$treeview-drop-count-font-size: $text-xs !default;
+$treeview-edit-wrap-width: calc(100% - 2px) !default;
+$treeview-check-wrap-width: calc(100% - 21px) !default;
+$treeview-check-icon-wrap-width: calc(100% - 54px) !default;
+$treeview-check-icon-img-wrap-width: calc(100% - 82px) !default;
+$treeview-icon-wrap-width: calc(100% - 32px) !default;
+$treeview-icon-img-wrap-width: calc(100% - 60px) !default;
+
+$treeview-big-font-size: $text-base !default;
+$treeview-big-icon-font-size: 24px !default;
+$treeview-big-item-height: 42px !default;
+$treeview-big-text-height: 40px !default;
+$treeview-big-input-height: 40px !default;
+$treeview-big-text-padding: 0 12px !default;
+$treeview-big-input-padding: 0 9px !default;
+$treeview-big-icon-padding: 0px !default;
+$treeview-big-image-margin: 0 0 0 12px !default;
+$treeview-big-rtl-image-margin: 0 12px 0 0 !default;
+$treeview-big-icon-image-margin: 0 0 0 12px !default;
+$treeview-big-rtl-icon-image-margin: 0 12px 0 0 !default;
+$treeview-big-check-margin: 0 0 0 12px !default;
+$treeview-big-rtl-check-margin: 0 12px 0 0 !default;
+$treeview-big-check-image-margin: 0 0 0 12px !default;
+$treeview-big-rtl-check-image-margin: 0 12px 0 0 !default;
+$treeview-big-root-ul-padding: 0 0 0 16px !default;
+$treeview-big-rtl-root-ul-padding: 0 16px 0 0 !default;
+$treeview-big-child-ul-padding: 0 0 0 20px !default;
+$treeview-big-rtl-child-ul-padding: 0 20px 0 0 !default;
+$treeview-big-image-text-padding: 0 12px !default;
+$treeview-big-icon-margin: 0 0 0 -24px !default;
+$treeview-big-rtl-icon-margin: 0 -24px 0 0 !default;
+$treeview-big-text-wrap-padding: 0 0 0 24px !default;
+$treeview-big-rtl-text-wrap-padding: 0 24px 0 0 !default;
+$treeview-big-drag-icon-font-size: 24px !default;
+$treeview-big-drag-item-text-padding-left: 24px !default;
+$treeview-big-drag-before-icon-padding: 6px !default;
+$treeview-big-check-text-padding: 0 12px !default;
+$treeview-big-check-wrap-width: calc(100% - 29px) !default;
+$treeview-big-check-icon-wrap-width: calc(100% - 65px) !default;
+$treeview-big-check-icon-img-wrap-width: calc(100% - 101px) !default;
+$treeview-big-icon-wrap-width: calc(100% - 35px) !default;
+$treeview-big-icon-img-wrap-width: calc(100% - 71px) !default;
+
+$treeview-font-family: $font-family !default;
+$treeview-drag-icon-font-size: 20px !default;
+$treeview-drag-icon-padding: 12px !default;
+
+//treeview ripple effect variables
+$ripple-size: -7px !default;
+$ripple-height: 32px !default;
+$ripple-width: 32px !default;
+
+//color variables
+$treeview-icon-color: $icon-color !default;
+$treeview-text-color: $content-text-color !default;
+$treeview-item-border-color: $transparent !default;
+$treeview-item-active-bg: $content-bg-color-selected !default;
+$treeview-icon-active-color: $content-text-color-selected !default;
+$treeview-text-active-color: $content-text-color-selected !default;
+$treeview-item-active-border-color: $content-bg-color-selected !default;
+$treeview-item-hover-bg: $content-bg-color-hover !default;
+$treeview-icon-hover-color: $icon-color-hover !default;
+$treeview-text-hover-color: $content-text-color-hover !default;
+$treeview-item-hover-border-color: $content-bg-color-hover !default;
+$treeview-item-active-hover-bg: darken($treeview-item-active-bg, 5%) !default;
+$treeview-icon-active-hover-color: $content-text-color-selected !default;
+$treeview-text-active-hover-color: $content-text-color-selected !default;
+$treeview-item-active-hover-border-color: $content-bg-color-selected !default;
+$treeview-text-disable-color: $content-text-color-disabled !default;
+$treeview-icon-disable-color: $icon-color-disabled !default;
+$treeview-drag-line-bg: $primary !default;
+$treeview-drag-line-color: $primary !default;
+$treeview-popup-bg-color: $content-bg-color-hover !default;
+$treeview-popup-border-color: $content-bg-color-hover !default;
+$treeview-drop-count-bg: $primary !default;
+$treeview-drop-count-border: $primary-text-color !default;
+$treeview-drop-count-color: $primary-text-color !default;
+$treeview-drag-item-bg: $content-bg-color-alt3 !default;
+$treeview-drag-item-color: $content-text-color-alt1 !default;
+$treeview-drag-icon-color: $content-text-color-alt1 !default;
+$treeview-item-active-check-bg: $primary-text-color !default;
+$treeview-item-active-check-border-color: $primary-text-color !default;
+$treeview-item-active-check-color: $primary !default;

package/styles/treeview/_material3-definition.scss

@@ -0,0 +1,120 @@
+/*! TreeView's bootstrap5 theme wise override definitions and variables */
+// sass-lint:disable-all
+$treeview-font-size: $text-sm !default;
+$treeview-icon-font-size: 20px !default;
+$treeview-image-font-size: 20px !default;
+$treeview-item-height: 36px !default;
+$treeview-text-height: 34px !default;
+$treeview-input-height: 30px !default;
+$treeview-root-ul-padding: 0 0 0 12px !default;
+$treeview-rtl-root-ul-padding: 0 12px 0 0 !default;
+$treeview-child-ul-padding: 0 0 0 20px !default;
+$treeview-rtl-child-ul-padding: 0 20px 0 0 !default;
+$treeview-text-wrap-padding: 0 0 0 20px !default;
+$treeview-rtl-text-wrap-padding: 0 20px 0 0 !default;
+$treeview-icon-size: 20px !default;
+$treeview-icon-margin: 0 0 0 -20px !default;
+$treeview-rtl-icon-margin: 0 -20px 0 0 !default;
+$treeview-icon-padding: 0px !default;
+$treeview-text-padding: 0 8px !default;
+$treeview-text-margin: 0 !default;
+$treeview-image-size: 20px !default;
+$treeview-image-margin: 0 0 0 8px !default;
+$treeview-navigable-icon-image-anchor-margin-bigger: 0 12px 0 8px !default;
+$treeview-navigable-icon-image-anchor-margin-reverse-bigger: 0 6px 0 10px !default;
+$treeview-navigable-icon-image-anchor-margin: 0 8px 0 0 !default;
+$treeview-navigable-icon-image-anchor-margin-reverse: 0 0 0 8px !default;
+$treeview-navigable-rtl-margin-reverse: 0 12px 0 0 !default;
+$treeview-rtl-image-margin: 0 8px 0 0 !default;
+$treeview-image-text-padding: 0 8px !default;
+$treeview-icon-image-margin: 0 0 0 8px !default;
+$treeview-rtl-icon-image-margin: 0 8px 0 0 !default;
+$treeview-check-margin: 0 0 0 12px !default;
+$treeview-rtl-check-margin: 0 12px 0 0 !default;
+$treeview-check-text-padding: 0 8px !default;
+$treeview-check-image-margin: 0 0 0 8px !default;
+$treeview-rtl-check-image-margin: 0 8px 0 0 !default;
+$treeview-drop-count-border-size: 1px !default;
+$treeview-drop-count-font-size: $text-xs !default;
+$treeview-edit-wrap-width: calc(100% - 2px) !default;
+$treeview-check-wrap-width: calc(100% - 21px) !default;
+$treeview-check-icon-wrap-width: calc(100% - 54px) !default;
+$treeview-check-icon-img-wrap-width: calc(100% - 82px) !default;
+$treeview-icon-wrap-width: calc(100% - 32px) !default;
+$treeview-icon-img-wrap-width: calc(100% - 60px) !default;
+
+$treeview-big-font-size: $text-base !default;
+$treeview-big-icon-font-size: 24px !default;
+$treeview-big-item-height: 42px !default;
+$treeview-big-text-height: 40px !default;
+$treeview-big-input-height: 40px !default;
+$treeview-big-text-padding: 0 12px !default;
+$treeview-big-input-padding: 0 9px !default;
+$treeview-big-icon-padding: 0px !default;
+$treeview-big-image-margin: 0 0 0 12px !default;
+$treeview-big-rtl-image-margin: 0 12px 0 0 !default;
+$treeview-big-icon-image-margin: 0 0 0 12px !default;
+$treeview-big-rtl-icon-image-margin: 0 12px 0 0 !default;
+$treeview-big-check-margin: 0 0 0 12px !default;
+$treeview-big-rtl-check-margin: 0 12px 0 0 !default;
+$treeview-big-check-image-margin: 0 0 0 12px !default;
+$treeview-big-rtl-check-image-margin: 0 12px 0 0 !default;
+$treeview-big-root-ul-padding: 0 0 0 16px !default;
+$treeview-big-rtl-root-ul-padding: 0 16px 0 0 !default;
+$treeview-big-child-ul-padding: 0 0 0 20px !default;
+$treeview-big-rtl-child-ul-padding: 0 20px 0 0 !default;
+$treeview-big-image-text-padding: 0 12px !default;
+$treeview-big-icon-margin: 0 0 0 -24px !default;
+$treeview-big-rtl-icon-margin: 0 -24px 0 0 !default;
+$treeview-big-text-wrap-padding: 0 0 0 24px !default;
+$treeview-big-rtl-text-wrap-padding: 0 24px 0 0 !default;
+$treeview-big-drag-icon-font-size: 24px !default;
+$treeview-big-drag-item-text-padding-left: 24px !default;
+$treeview-big-drag-before-icon-padding: 6px !default;
+$treeview-big-check-text-padding: 0 12px !default;
+$treeview-big-check-wrap-width: calc(100% - 29px) !default;
+$treeview-big-check-icon-wrap-width: calc(100% - 65px) !default;
+$treeview-big-check-icon-img-wrap-width: calc(100% - 101px) !default;
+$treeview-big-icon-wrap-width: calc(100% - 35px) !default;
+$treeview-big-icon-img-wrap-width: calc(100% - 71px) !default;
+
+$treeview-font-family: $font-family !default;
+$treeview-drag-icon-font-size: 20px !default;
+$treeview-drag-icon-padding: 12px !default;
+
+//treeview ripple effect variables
+$ripple-size: -7px !default;
+$ripple-height: 32px !default;
+$ripple-width: 32px !default;
+
+//color variables
+$treeview-icon-color: $icon-color !default;
+$treeview-text-color: $content-text-color !default;
+$treeview-item-border-color: $transparent !default;
+$treeview-item-active-bg: $content-bg-color-selected !default;
+$treeview-icon-active-color: $content-text-color-selected !default;
+$treeview-text-active-color: $content-text-color-selected !default;
+$treeview-item-active-border-color: $content-bg-color-selected !default;
+$treeview-item-hover-bg: $content-bg-color-hover !default;
+$treeview-icon-hover-color: $icon-color-hover !default;
+$treeview-text-hover-color: $content-text-color-hover !default;
+$treeview-item-hover-border-color: $content-bg-color-hover !default;
+$treeview-item-active-hover-bg: darken($treeview-item-active-bg, 5%) !default;
+$treeview-icon-active-hover-color: $content-text-color-selected !default;
+$treeview-text-active-hover-color: $content-text-color-selected !default;
+$treeview-item-active-hover-border-color: $content-bg-color-selected !default;
+$treeview-text-disable-color: $content-text-color-disabled !default;
+$treeview-icon-disable-color: $icon-color-disabled !default;
+$treeview-drag-line-bg: $primary !default;
+$treeview-drag-line-color: $primary !default;
+$treeview-popup-bg-color: $content-bg-color-hover !default;
+$treeview-popup-border-color: $content-bg-color-hover !default;
+$treeview-drop-count-bg: $primary !default;
+$treeview-drop-count-border: $primary-text-color !default;
+$treeview-drop-count-color: $primary-text-color !default;
+$treeview-drag-item-bg: $content-bg-color-alt3 !default;
+$treeview-drag-item-color: $content-text-color-alt1 !default;
+$treeview-drag-icon-color: $content-text-color-alt1 !default;
+$treeview-item-active-check-bg: $primary-text-color !default;
+$treeview-item-active-check-border-color: $primary-text-color !default;
+$treeview-item-active-check-color: $primary !default;

package/styles/treeview/fluent-dark.css

@@ -838,8 +838,8 @@
 }
 .e-treeview.e-drag-item .e-drop-count {
   background-color: #0078d4;
-  border-color: #fff;
-  color: #fff;
+  border-color: #1b1a19;
+  color: #1b1a19;
 }
 .e-treeview.e-drag-item.e-rtl .e-sibling {
   border: 1px solid #0078d4;

package/styles/treeview/icons/_fusionnew.scss

@@ -0,0 +1,43 @@
+
+@include export-module('treeview-fusionnew-icons') {
+  /*! TreeView icons */
+  .e-treeview {
+
+    .e-list-item {
+
+      div.e-icons::before {
+        content: '\e75c';
+      }
+    }
+
+    .e-sibling::before {
+      content: '';
+    }
+
+    .e-popup {
+
+      .e-icons::before {
+        content: '\e76a';
+      }
+    }
+
+    &.e-drag-item {
+
+      .e-icons.e-drop-in::before {
+        content: '\e768';
+      }
+
+      .e-icons.e-drop-out::before {
+        content: '\e839';
+      }
+
+      .e-icons.e-drop-next::before {
+        content: '\e736';
+      }
+
+      .e-icons.e-no-drop::before {
+        content: '\e839';
+      }
+    }
+  }
+}