@syncfusion/ej2-navigations 20.1.47 → 20.1.51-10460

package/styles/toolbar/icons/_material3.scss

@@ -0,0 +1,14 @@
+@include export-module('toolbar-material3-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/material3-dark.scss

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

package/styles/toolbar/material3.scss

@@ -0,0 +1,6 @@
+@import 'ej2-base/styles/definition/material3.scss';
+@import '../h-scroll/material3-definition.scss';
+@import '../v-scroll/material3-definition.scss';
+@import 'material3-definition.scss';
+@import 'icons/material3.scss';
+@import 'all.scss';

package/styles/treeview/_bds-definition.scss

@@ -0,0 +1,132 @@
+/*! TreeView's theme wise override definitions and variables */
+/* stylelint-disable */
+$treeview-font-size: $text-sm !default;
+$treeview-icon-font-size: $text-xl !default;
+$treeview-image-font-size: $text-xl !default;
+$treeview-big-font-size: $text-base !default;
+$treeview-big-icon-font-size: $text-2xl !default;
+$treeview-item-height: 40px !default;
+$treeview-text-height: 38px !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-margin: 0 8px 0 0 !default;
+$treeview-navigable-icon-image-margin-reverse: 0 0 0 8px !default;
+$treeview-navigable-check-margin-bigger: 0 0 0 12px !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 10px 0 2px !default;
+$treeview-navigable-icon-image-anchor-margin-reverse: 0 2px 0 10px !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 6px !default;
+$treeview-rtl-check-margin: 0 6px 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-active-font-weight: 600 !default;
+$treeview-edit-wrap-width: calc(100% - 2px) !default;
+$treeview-check-wrap-width: calc(100% - 23px) !default;
+$treeview-check-icon-wrap-width: calc(100% - 56px) !default;
+$treeview-check-icon-img-wrap-width: calc(100% - 84px) !default;
+$treeview-icon-wrap-width: calc(100% - 32px) !default;
+$treeview-icon-img-wrap-width: calc(100% - 60px) !default;
+
+$treeview-big-item-height: 48px !default;
+$treeview-big-text-height: 46px !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 8px !default;
+$treeview-big-rtl-check-margin: 0 8px 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 24px !default;
+$treeview-big-rtl-child-ul-padding: 0 24px 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: $text-2xl !default;
+$treeview-big-drag-item-text-padding-left: 12px !default;
+$treeview-big-drag-icon-margin: -6px 0px 5px -9px !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: $text-xl !default;
+$treeview-drag-icon-padding: 6px !default;
+$treeview-drag-icon-margin: 0 8px 10px -20px;
+$treeview-drag-icon-padding-right: 4px !default;
+$treeview-rtl-drag-margin: 10px -13px -1px 0;
+
+$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: $content-bg-color-hover !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: $treeview-item-hover-border-color !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: $treeview-icon-color !default;
+
+$treeview-item-active-hover-bg:$content-bg-color-hover !default;
+
+@mixin active-hover-theme {
+    @if $skin-name =='tailwind' {
+      background-color: $treeview-item-active-hover-bg !important;
+    }
+}

package/styles/treeview/_bigger.scss

@@ -0,0 +1,393 @@
+@mixin big-icon-style($size) {
+  height: $size;
+  width: $size;
+}
+
+@include export-module('treeview-bigger') {
+  .e-bigger .e-treeview,
+  .e-treeview.e-bigger {
+
+    @if $skin-name == 'bootstrap4' {
+      .e-ul,
+      .e-list-item .e-ul {
+        padding-left: 16px;
+      }
+    }
+
+    @if $skin-name == 'tailwind' or $skin-name == 'bootstrap5' or $skin-name == 'FluentUI' or $skin-name == 'Material3' or $skin-name == 'fluent2' {
+      .e-ul {
+        padding: $treeview-big-root-ul-padding;
+      }
+
+      .e-list-item {
+        .e-ul {
+          padding: $treeview-big-child-ul-padding;
+        }
+
+        .e-text-content {
+          padding: $treeview-big-text-wrap-padding;
+        }
+
+        .e-list-icon,
+        .e-list-img {
+          @if $skin-name == 'fluent2' {
+            @include big-icon-style($treeview-big-img-size);
+          }
+          @else {
+            @include big-icon-style($treeview-big-icon-font-size);
+          }
+        }
+
+        .e-small.e-css.e-checkbox-wrapper {
+          & .e-frame {
+            height: 20px;
+            line-height: 17px;
+            width: 20px;
+          }
+
+          & .e-check,
+          & .e-stop {
+            font-size: 12px;
+          }
+
+          & .e-stop {
+            line-height: 17px;
+          }
+        }
+
+        .e-checkbox-wrapper + .e-list-text {
+          padding: $treeview-big-check-text-padding;
+        }
+      }
+
+      .e-icon-collapsible,
+      .e-icon-expandable {
+        @include big-icon-style($treeview-big-icon-font-size);
+        margin: $treeview-big-icon-margin;
+      }
+
+      &.e-drag-item {
+
+        @if $skin-name == 'FluentUI' {
+          .e-icon-expandable,
+          .e-icon-collapsible {
+            padding-left: 24px;
+            padding-top: 10px;
+          }
+        }
+
+        .e-drop-count {
+          padding: 3px 5px 4px;
+        }
+      }
+    }
+
+    .e-navigable {
+
+      .e-list-text {
+        @if ($skin-name != 'Material3') {
+          padding: 0;
+        }
+        width: 100%;
+      }
+
+      .e-checkbox-wrapper {
+        + .e-list-text {
+          padding: 0;
+        }
+
+        + .e-list-url .e-anchor-wrap {
+          @if $skin-name == 'bootstrap4' {
+            padding: $treeview-check-image-margin;
+          }
+  
+          .e-list-icon,
+          .e-list-img {
+            margin: $treeview-navigable-icon-image-anchor-margin-bigger;
+          }
+        }
+      }
+
+      .e-anchor-wrap {
+        @if $skin-name == 'bootstrap4' {
+          padding: $treeview-navigable-check-margin-bigger;
+        }
+        @else {
+          padding: $treeview-icon-image-margin;
+        }
+      }
+
+      .e-list-icon,
+      .e-list-img,
+      .e-list-icon + .e-list-img {
+
+        @if $skin-name == 'bootstrap4' {
+          margin: $treeview-rtl-check-image-margin;
+        }
+        @else {
+          margin: $treeview-rtl-icon-image-margin;
+        }
+      }
+    }
+
+    .e-fullrow {
+      height: $treeview-big-item-height;
+    }
+
+    &.e-text-wrap {
+      .e-checkbox-wrapper {
+        & + .e-list-text {
+          max-width: $treeview-big-check-wrap-width;
+        }
+
+        & + .e-list-icon,
+        & + .e-list-img {
+          & + .e-list-text {
+            max-width: $treeview-big-check-icon-wrap-width;
+          }
+        }
+
+        & + .e-list-icon + .e-list-img {
+          & + .e-list-text {
+            max-width: $treeview-big-check-icon-img-wrap-width;
+          }
+        }
+      }
+
+      .e-list-icon,
+      .e-list-img {
+        & + .e-list-text {
+          max-width: $treeview-big-icon-wrap-width;
+        }
+      }
+
+      .e-list-icon + .e-list-img {
+        & + .e-list-text {
+          max-width: $treeview-big-icon-img-wrap-width;
+        }
+      }
+    }
+
+    .e-list-text {
+      line-height: $treeview-big-text-height;
+      @if $skin-name != 'bootstrap4' {
+        min-height: $treeview-big-text-height;
+      }
+      @else if $skin-name == 'bootstrap4' {
+        min-height: 38px;
+      }
+      padding: $treeview-big-text-padding;
+
+      .e-input-group {
+        height: $treeview-big-input-height;
+
+        @if $skin-name != 'material' {
+          .e-input {
+            height: 36px;
+          }
+        }
+      }
+    }
+
+    .e-checkbox-wrapper {
+      margin: $treeview-big-check-margin;
+      @if ($skin-name == 'bootstrap4' or $skin-name == 'tailwind') {
+        & + .e-list-text {
+          padding: $treeview-big-check-text-padding;
+        }
+      }
+
+      & + .e-list-icon,
+      & + .e-list-img {
+        margin: $treeview-big-check-image-margin;
+      }
+    }
+
+    .e-list-icon,
+    .e-list-img {
+      margin: $treeview-big-image-margin;
+      @if $skin-name == 'bootstrap4' {
+        font-size: $treeview-big-image-font-size;
+      }
+      @if ($skin-name == 'bootstrap4' or $skin-name == 'tailwind' or $skin-name == 'bootstrap5' or $skin-name == 'FluentUI' or $skin-name == 'Material3' or $skin-name == 'fluent2') {
+        & + .e-list-text {
+          padding: $treeview-big-image-text-padding;
+        }
+      }
+
+      & + .e-list-icon,
+      & + .e-list-img {
+        margin: $treeview-big-icon-image-margin;
+      }
+    }
+
+    .e-icon-collapsible,
+    .e-icon-expandable {
+      @if $skin-name == 'bootstrap4' {
+        height: $treeview-big-icon-size;
+        margin: $treeview-big-icon-margin;
+        width: $treeview-big-icon-size;
+      }
+
+      &::before {
+        padding: $treeview-big-icon-padding;
+      }
+    }
+
+    &.e-drag-item {
+
+      @if ($skin-name == 'bootstrap4' or $skin-name == 'tailwind' or $skin-name == 'bootstrap5' or $skin-name == 'FluentUI') {
+
+        .e-text-content {
+          padding-left: $treeview-big-drag-item-text-padding-left;
+        }
+
+        .e-icon-collapsible,
+        .e-icon-expandable {
+          font-size: $treeview-big-drag-icon-font-size;
+          @if ($skin-name != 'bootstrap5' and $skin-name != 'FluentUI') {
+            margin: $treeview-big-drag-icon-margin;
+          }
+
+          &::before {
+            @if ($skin-name != 'bootstrap5' and $skin-name != 'FluentUI') {
+              padding: $treeview-big-drag-before-icon-padding;
+            }
+            @if ($skin-name == 'bootstrap5' or $skin-name == 'FluentUI') {
+              font-size: $treeview-big-drag-icon-font-size;
+            }
+          }
+        }
+
+        @if $skin-name == 'bootstrap4' {
+          .e-drop-count {
+            border: $treeview-big-drop-count-border-size solid;
+          }
+        }
+      }
+    }
+
+    &.e-rtl {
+
+      @if $skin-name == 'tailwind' or $skin-name == 'bootstrap5' or $skin-name == 'FluentUI' or $skin-name == 'Material3' or $skin-name == 'fluent2' {
+        .e-ul {
+          padding: $treeview-big-rtl-root-ul-padding;
+        }
+
+        .e-list-item {
+          .e-ul {
+            padding: $treeview-big-rtl-child-ul-padding;
+          }
+
+          .e-text-content {
+            padding: $treeview-big-rtl-text-wrap-padding;
+          }
+        }
+      }
+
+      @if $skin-name == 'tailwind' or $skin-name == 'bootstrap5' or $skin-name == 'FluentUI' or $skin-name == 'Material3' or $skin-name == 'bootstrap4' {
+        .e-icon-collapsible,
+        .e-icon-expandable {
+          margin: $treeview-big-rtl-icon-margin;
+        }
+      }
+
+      &.e-drag-item {
+
+        @if ($skin-name == 'bootstrap5' or $skin-name == 'FluentUI') {
+
+          .e-text-content {
+            padding-left: 0;
+            padding-right: $treeview-big-drag-item-text-padding-left;
+          }
+        }
+      }
+
+      .e-navigable {
+
+        .e-checkbox-wrapper + .e-list-url .e-anchor-wrap {
+
+          @if $skin-name == 'bootstrap4' {
+            padding: $treeview-navigable-rtl-margin-reverse;
+          }
+
+          .e-list-icon,
+          .e-list-img {
+            margin: $treeview-navigable-icon-image-anchor-margin-reverse-bigger;
+          }
+        }
+
+        .e-anchor-wrap {
+          @if $skin-name == 'bootstrap4' {
+            padding: $treeview-navigable-check-margin-bigger-reverse;
+          }
+          @else {
+            padding: $treeview-rtl-icon-image-margin;
+          }
+        }
+
+        .e-list-icon,
+        .e-list-img,
+        .e-list-icon + .e-list-img {
+          @if $skin-name == 'bootstrap4' {
+            margin: $treeview-check-image-margin;
+          }
+          @else {
+            margin: $treeview-icon-image-margin;
+          }
+        }
+      }
+
+      .e-checkbox-wrapper {
+        margin: $treeview-big-rtl-check-margin;
+
+        & + .e-list-icon,
+        & + .e-list-img {
+          margin: $treeview-big-rtl-check-image-margin;
+        }
+      }
+
+      .e-list-icon,
+      .e-list-img {
+        margin: $treeview-big-rtl-image-margin;
+
+        & + .e-list-icon,
+        & + .e-list-img {
+          margin: $treeview-big-rtl-icon-image-margin;
+        }
+      }
+    }
+  }
+
+  .e-bigger .e-treeview,
+  .e-treeview.e-bigger {
+    .e-list-text {
+      font-size: $treeview-big-font-size;
+      @if $skin-name == 'bootstrap4' {
+        color: $treeview-big-text-color;
+      }
+    }
+
+    .e-icon-collapsible,
+    .e-icon-expandable {
+      &::before {
+        font-size: $treeview-big-icon-font-size;
+      }
+    }
+
+    &.e-drag-item {
+      .e-icon-collapsible,
+      .e-icon-expandable {
+        @if $skin-name == 'bootstrap4' {
+          padding: $treeview-big-drag-icon-padding;
+        }
+      }
+
+      .e-list-text {
+        @if $skin-name == 'bootstrap4' {
+          padding: $treeview-big-drag-text-padding;
+        }
+      }
+    }
+  }
+}

package/styles/treeview/_bootstrap5.3-definition.scss

@@ -0,0 +1,119 @@
+/*! TreeView's bootstrap5 theme wise override definitions and variables */
+/* stylelint-disable */
+$treeview-font-size: $text-sm !default;
+$treeview-icon-font-size: $text-xl !default;
+$treeview-image-font-size: $text-xl !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 4px 0 -25px !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: 18px !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 12px !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 8px !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: $text-2xl !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: $text-2xl !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: $text-sm !default;
+$treeview-drag-icon-padding: 4px 8px 10px 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-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-alt4 !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;