@syncfusion/ej2-navigations 21.2.9 → 22.1.34

package/styles/toolbar/material3.scss

@@ -0,0 +1,9 @@
+@import 'ej2-base/styles/material3-definition.scss';
+
+@import '../h-scroll/material3-definition.scss';
+@import '../v-scroll/material3-definition.scss';
+@import 'ej2-buttons/styles/button/material3-definition.scss';
+@import 'ej2-popups/styles/popup/material3-definition.scss';
+@import 'material3-definition.scss';
+@import 'icons/material3.scss';
+@import 'all.scss';

package/styles/toolbar/tailwind-dark.css

@@ -33,6 +33,12 @@
 .e-toolbar.e-bigger .e-toolbar-items .e-toolbar-left .e-toolbar-item:first-child {
   margin-left: 10px;
 }
+.e-bigger .e-toolbar .e-toolbar-items:first-child:not(.e-toolbar-multirow) > .e-toolbar-item:last-child,
+.e-bigger .e-toolbar .e-toolbar-items:first-child:not(.e-toolbar-multirow) > .e-toolbar-right .e-toolbar-item:last-child,
+.e-toolbar.e-bigger .e-toolbar-items:first-child:not(.e-toolbar-multirow) > .e-toolbar-item:last-child,
+.e-toolbar.e-bigger .e-toolbar-items:first-child:not(.e-toolbar-multirow) > .e-toolbar-right .e-toolbar-item:last-child {
+  margin-right: 10px;
+}
 .e-bigger .e-toolbar .e-toolbar-items .e-hscroll-bar .e-hscroll-content > .e-toolbar-item:last-child,
 .e-toolbar.e-bigger .e-toolbar-items .e-hscroll-bar .e-hscroll-content > .e-toolbar-item:last-child {
   margin-right: 10px;
@@ -948,7 +954,7 @@
 }
 .e-toolbar .e-hor-nav:hover {
   background: #4b5563;
-  border-left: 0;
+  border-left: 1px solid #4b5563;
   color: #9ca3af;
 }
 .e-toolbar .e-hor-nav:hover .e-icons {
@@ -957,7 +963,7 @@
 .e-toolbar .e-hor-nav:hover:not(.e-nav-active) {
   border-color: #4b5563;
   border-style: solid;
-  border-width: 0;
+  border-width: 0 0 0 1px;
 }
 .e-toolbar .e-hor-nav:hover:active {
   background: #4b5563;
@@ -1073,10 +1079,11 @@
 .e-toolbar.e-rtl .e-hor-nav {
   background: #374151;
   border: solid #4b5563;
-  border-left: 0;
-  border-width: 0 0 0 0;
+  border-width: 0 1px 0 0;
 }
 .e-toolbar.e-rtl .e-hor-nav:not(.e-nav-active):hover {
   background: #4b5563;
   color: #9ca3af;
+  border: solid #4b5563;
+  border-width: 0 1px 0 0;
 }

package/styles/toolbar/tailwind.css

@@ -33,6 +33,12 @@
 .e-toolbar.e-bigger .e-toolbar-items .e-toolbar-left .e-toolbar-item:first-child {
   margin-left: 10px;
 }
+.e-bigger .e-toolbar .e-toolbar-items:first-child:not(.e-toolbar-multirow) > .e-toolbar-item:last-child,
+.e-bigger .e-toolbar .e-toolbar-items:first-child:not(.e-toolbar-multirow) > .e-toolbar-right .e-toolbar-item:last-child,
+.e-toolbar.e-bigger .e-toolbar-items:first-child:not(.e-toolbar-multirow) > .e-toolbar-item:last-child,
+.e-toolbar.e-bigger .e-toolbar-items:first-child:not(.e-toolbar-multirow) > .e-toolbar-right .e-toolbar-item:last-child {
+  margin-right: 10px;
+}
 .e-bigger .e-toolbar .e-toolbar-items .e-hscroll-bar .e-hscroll-content > .e-toolbar-item:last-child,
 .e-toolbar.e-bigger .e-toolbar-items .e-hscroll-bar .e-hscroll-content > .e-toolbar-item:last-child {
   margin-right: 10px;
@@ -948,7 +954,7 @@
 }
 .e-toolbar .e-hor-nav:hover {
   background: #e5e7eb;
-  border-left: 0;
+  border-left: 1px solid #e5e7eb;
   color: #6b7280;
 }
 .e-toolbar .e-hor-nav:hover .e-icons {
@@ -957,7 +963,7 @@
 .e-toolbar .e-hor-nav:hover:not(.e-nav-active) {
   border-color: #e5e7eb;
   border-style: solid;
-  border-width: 0;
+  border-width: 0 0 0 1px;
 }
 .e-toolbar .e-hor-nav:hover:active {
   background: #e5e7eb;
@@ -1073,10 +1079,11 @@
 .e-toolbar.e-rtl .e-hor-nav {
   background: #f3f4f6;
   border: solid #e5e7eb;
-  border-left: 0;
-  border-width: 0 0 0 0;
+  border-width: 0 1px 0 0;
 }
 .e-toolbar.e-rtl .e-hor-nav:not(.e-nav-active):hover {
   background: #e5e7eb;
   color: #6b7280;
+  border: solid #e5e7eb;
+  border-width: 0 1px 0 0;
 }

package/styles/treeview/_layout.scss

@@ -327,7 +327,7 @@
 
     &.e-rtl {
 
-      @if $skin-name == 'tailwind' or $skin-name == 'bootstrap5' or $skin-name == 'FluentUI' {
+      @if $skin-name == 'tailwind' or $skin-name == 'bootstrap5' or $skin-name == 'FluentUI' or $skin-name == 'Material3' {
         .e-ul {
           padding: $treeview-big-rtl-root-ul-padding;
         }
@@ -537,7 +537,7 @@
 
     .e-list-item {
       list-style: none;
-      @if $skin-name != 'tailwind' {
+      @if $skin-name != 'tailwind' and $skin-name != 'Material3' {
         padding: 2px 0;
       }
 
@@ -547,6 +547,9 @@
         @if $skin-name == 'tailwind' {
           margin: 2px 0 0;
         }
+        @else if $skin-name == 'Material3' {
+          margin: 0;
+        }
       }
 
       &.e-disable {
@@ -584,6 +587,10 @@
       cursor: pointer;
       margin: 0;
       padding: $treeview-text-wrap-padding;
+
+      @if $skin-name == 'Material3' {
+        border: none;
+      }
     }
 
     .e-fullrow {
@@ -848,6 +855,12 @@
       .e-text-content {
         float: left;
 
+        @if ($skin-name == 'Material3') {
+          .e-list-img {
+            margin: $treeview-drag-icon-img-margin;
+          }
+        }
+
         .e-list-text {
           @if ($skin-name == 'bootstrap5' or $skin-name == 'FluentUI') {
             padding: 0 $treeview-drag-icon-padding;

package/styles/treeview/_material3-dark-definition.scss

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

package/styles/treeview/_material3-definition.scss

@@ -0,0 +1,121 @@
+/*! TreeView's Material 3 theme wise override definitions and variables */
+/* stylelint-disable */
+$treeview-font-size: $text-sm !default;
+$treeview-icon-font-size: 16px !default;
+$treeview-image-font-size: 16px !default;
+$treeview-item-height: 40px !default;
+$treeview-text-height: 20px !default;
+$treeview-input-height: 30px !default;
+$treeview-root-ul-padding: 0 0 0 16px !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: 16px !default;
+$treeview-icon-margin: 0 0 0 -16px !default;
+$treeview-rtl-icon-margin: 0 -16px 0 0 !default;
+$treeview-icon-padding: 0px !default;
+$treeview-text-padding: 10px 12px !default;
+$treeview-text-margin: 0 !default;
+$treeview-image-size: 16px !default;
+$treeview-image-margin: 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 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: 10px 12px !default;
+$treeview-icon-image-margin: 0 0 0 12px !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: 10px 12px !default;
+$treeview-check-image-margin: 0 0 0 12px !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: 20px !default;
+$treeview-big-item-height: 48px !default;
+$treeview-big-text-height: 24px !default;
+$treeview-big-input-height: 40px !default;
+$treeview-big-text-padding: 12px 18px !default;
+$treeview-big-input-padding: 0 9px !default;
+$treeview-big-icon-padding: 0 !default;
+$treeview-big-image-margin: 0 0 0 18px !default;
+$treeview-big-rtl-image-margin: 0 12px 0 0 !default;
+$treeview-big-icon-image-margin: 0 0 0 18px !default;
+$treeview-big-rtl-icon-image-margin: 0 12px 0 0 !default;
+$treeview-big-check-margin: 0 0 0 18px !default;
+$treeview-big-rtl-check-margin: 0 12px 0 0 !default;
+$treeview-big-check-image-margin: 0 0 0 18px !default;
+$treeview-big-rtl-check-image-margin: 0 12px 0 0 !default;
+$treeview-big-root-ul-padding: 0 0 0 18px !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: 12px 18px !default;
+$treeview-big-icon-margin: 0 0 0 -20px !default;
+$treeview-big-rtl-icon-margin: 0 -20px 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: 12px 18px !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: 16px !default;
+$treeview-drag-icon-padding: 0 6px !default;
+$treeview-drag-icon-img-margin: 0 0 0 18px !default;
+
+//treeview ripple effect variables
+$ripple-size: -9.5px !default;
+$ripple-height: 32px !default;
+$ripple-width: 32px !default;
+
+//color variables
+$treeview-icon-color: rgba($icon-color) !default;
+$treeview-text-color: rgba($content-text-color) !default;
+$treeview-item-border-color: $transparent !default;
+$treeview-item-active-bg: rgba($content-bg-color-selected) !default;
+$treeview-icon-active-color: rgba($content-text-color-selected) !default;
+$treeview-text-active-color: rgba($content-text-color-selected) !default;
+$treeview-item-active-border-color: rgba($content-bg-color-selected) !default;
+$treeview-item-hover-bg: $content-bg-color-hover !default;
+$treeview-icon-hover-color: rgba($icon-color-hover) !default;
+$treeview-text-hover-color: rgba($content-text-color-hover) !default;
+$treeview-item-hover-border-color: $content-bg-color-hover !default;
+$treeview-item-active-hover-bg: $treeview-item-active-bg !default;
+$treeview-icon-active-hover-color: rgba($content-text-color-selected) !default;
+$treeview-text-active-hover-color: rgba($content-text-color-selected) !default;
+$treeview-item-active-hover-border-color: rgba($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: rgba($primary) !default;
+$treeview-drag-line-color: rgba($primary) !default;
+$treeview-popup-bg-color: $content-bg-color-hover !default;
+$treeview-popup-border-color: $content-bg-color-hover !default;
+$treeview-drop-count-bg: rgba($primary) !default;
+$treeview-drop-count-border: rgba($primary-text-color) !default;
+$treeview-drop-count-color: rgba($primary-text-color) !default;
+$treeview-drag-item-bg: $content-bg-color-alt3 !default;
+$treeview-drag-item-color: rgba($content-text-color-alt1) !default;
+$treeview-drag-icon-color: rgba($content-text-color-alt1) !default;
+$treeview-item-active-check-bg: rgba($primary-text-color) !default;
+$treeview-item-active-check-border-color: rgba($primary-text-color) !default;
+$treeview-item-active-check-color: rgba($primary) !default;

package/styles/treeview/icons/_material3-dark.scss

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

package/styles/treeview/icons/_material3.scss

@@ -6,7 +6,7 @@
     .e-list-item {
 
       div.e-icons::before {
-        content: '\e75c';
+        content: '\e748';
       }
     }