@syncfusion/ej2-navigations 27.2.4 → 28.1.33

package/styles/material3-lite.css

@@ -1407,7 +1407,6 @@
 }
 .e-toolbar .e-popup-down-icon.e-icons,
 .e-toolbar .e-popup-up-icon.e-icons {
-  color: rgba(var(--color-sf-on-surface-variant));
   display: -webkit-box;
   display: -ms-flexbox;
   display: flex;
@@ -1421,6 +1420,7 @@
           justify-content: center;
   width: 100%;
   font-size: 14px;
+  color: rgba(var(--color-sf-on-surface-variant));
 }
 .e-toolbar.e-toolpop {
   overflow: visible;
@@ -5015,17 +5015,6 @@
 .e-tab .e-tab-header .e-toolbar-item .e-tab-wrap .e-tab-icon {
   color: rgba(var(--color-sf-on-surface-variant));
 }
-@media screen and (max-width: 480px) {
-  .e-tab .e-tab-header .e-toolbar-item .e-tab-wrap {
-    color: rgba(var(--color-sf-on-surface-variant));
-  }
-  .e-tab .e-tab-header .e-toolbar-item .e-tab-wrap .e-tab-icon {
-    color: rgba(var(--color-sf-on-surface-variant));
-  }
-  .e-tab .e-tab-header .e-toolbar-item .e-tab-wrap .e-close-icon {
-    color: rgba(var(--color-sf-on-surface-variant));
-  }
-}
 .e-tab .e-tab-header .e-toolbar-item .e-tab-wrap:hover {
   background: transparent;
   border: 0;
@@ -6293,6 +6282,9 @@
 .e-treeview .e-list-text .e-input-group .e-input {
   height: 28px;
 }
+.e-treeview .e-navigable-text {
+  padding: 0;
+}
 .e-treeview .e-list-icon,
 .e-treeview .e-list-img {
   display: inline-block;
@@ -6310,6 +6302,10 @@
 .e-treeview .e-list-img + .e-list-text {
   padding: 10px 12px;
 }
+.e-treeview .e-list-icon + .e-navigable-text,
+.e-treeview .e-list-img + .e-navigable-text {
+  padding: 10px 12px;
+}
 .e-treeview .e-icon-collapsible,
 .e-treeview .e-icon-expandable {
   display: inline-block;
@@ -6413,6 +6409,12 @@
 .e-treeview .e-navigable .e-anchor-wrap {
   padding: 0 0 0 12px;
 }
+.e-treeview .e-navigable .e-nav-wrapper {
+  padding: 0;
+}
+.e-treeview .e-navigable .e-checkbox-wrapper + .e-list-text .e-nav-wrapper:not(:has(.e-list-icon)) {
+  padding: 0;
+}
 .e-treeview .e-navigable .e-list-icon,
 .e-treeview .e-navigable .e-list-img {
   margin: 0 8px 0 0;
@@ -6463,6 +6465,9 @@
 .e-treeview.e-rtl .e-navigable .e-anchor-wrap {
   padding: 0 12px 0 0;
 }
+.e-treeview.e-rtl .e-navigable .e-nav-wrapper {
+  padding: 0;
+}
 .e-treeview.e-rtl .e-navigable .e-list-icon,
 .e-treeview.e-rtl .e-navigable .e-list-img,
 .e-treeview.e-rtl .e-navigable .e-list-icon + .e-list-img {
@@ -8543,6 +8548,7 @@ ejs-sidebar {
 }
 .e-stepper.e-vertical {
   min-height: inherit;
+  height: inherit;
   display: inline-block;
 }
 .e-stepper.e-vertical .e-step-label.e-step-label-only,
@@ -8566,6 +8572,7 @@ ejs-sidebar {
       -ms-flex-direction: column;
           flex-direction: column;
   min-height: inherit;
+  height: inherit;
   float: left;
   -webkit-box-align: start;
       -ms-flex-align: start;
@@ -8683,6 +8690,7 @@ ejs-sidebar {
 }
 .e-stepper.e-vertical .e-stepper-progressbar {
   min-height: inherit;
+  height: inherit;
   width: 1.6px;
   top: 0;
   left: var(--progress-position);
@@ -8818,7 +8826,8 @@ ejs-sidebar {
   background-color: rgba(var(--color-sf-surface));
   border-color: transparent;
 }
-.e-stepper .e-step-disabled .e-indicator {
+.e-stepper .e-step-disabled .e-indicator,
+.e-stepper .e-step-disabled .e-step {
   background: -webkit-gradient(linear, left bottom, left top, from(rgba(var(--color-sf-primary), 0.11)), to(rgba(var(--color-sf-primary), 0.11))), rgba(var(--color-sf-surface));
   background: linear-gradient(0deg, rgba(var(--color-sf-primary), 0.11), rgba(var(--color-sf-primary), 0.11)), rgba(var(--color-sf-surface));
   color: rgba(var(--color-sf-on-surface), 0.38);

package/styles/material3.css

@@ -719,6 +719,7 @@
 .e-pager.e-bigger.e-rtl .e-currentitem {
   margin: 0;
   padding: 10px 15.5px;
+  padding: 10px 12px;
 }
 .e-bigger .e-pager.e-rtl .e-pagerdropdown,
 .e-pager.e-bigger.e-rtl .e-pagerdropdown {
@@ -751,6 +752,13 @@
     margin-top: 10px;
   }
 }
+@media (max-width: 769px) {
+  .e-bigger .e-pager.e-rtl div.e-parentmsgbar,
+  .e-pager.e-bigger.e-rtl div.e-parentmsgbar {
+    margin-left: 0;
+    margin-top: 10px;
+  }
+}
 .e-bigger .e-pager.e-rtl .e-numericitem.e-currentitem,
 .e-bigger .e-pager.e-rtl .e-numericitem.e-currentitem:hover,
 .e-pager.e-bigger.e-rtl .e-numericitem.e-currentitem,
@@ -1683,7 +1691,6 @@
 }
 .e-toolbar .e-popup-down-icon.e-icons,
 .e-toolbar .e-popup-up-icon.e-icons {
-  color: rgba(var(--color-sf-on-surface-variant));
   display: -webkit-box;
   display: -ms-flexbox;
   display: flex;
@@ -1697,6 +1704,7 @@
           justify-content: center;
   width: 100%;
   font-size: 14px;
+  color: rgba(var(--color-sf-on-surface-variant));
 }
 .e-toolbar.e-toolpop {
   overflow: visible;
@@ -5710,17 +5718,6 @@
 .e-tab .e-tab-header .e-toolbar-item .e-tab-wrap .e-tab-icon {
   color: rgba(var(--color-sf-on-surface-variant));
 }
-@media screen and (max-width: 480px) {
-  .e-tab .e-tab-header .e-toolbar-item .e-tab-wrap {
-    color: rgba(var(--color-sf-on-surface-variant));
-  }
-  .e-tab .e-tab-header .e-toolbar-item .e-tab-wrap .e-tab-icon {
-    color: rgba(var(--color-sf-on-surface-variant));
-  }
-  .e-tab .e-tab-header .e-toolbar-item .e-tab-wrap .e-close-icon {
-    color: rgba(var(--color-sf-on-surface-variant));
-  }
-}
 .e-tab .e-tab-header .e-toolbar-item .e-tab-wrap:hover {
   background: transparent;
   border: 0;
@@ -7110,6 +7107,13 @@
   top: 0;
   vertical-align: initial;
 }
+.e-bigger .e-tab .e-tab-header.e-vertical .e-hor-nav .e-popup-up-icon,
+.e-bigger .e-tab .e-tab-header.e-vertical .e-hor-nav .e-popup-down-icon,
+.e-tab.e-bigger .e-tab-header.e-vertical .e-hor-nav .e-popup-up-icon,
+.e-tab.e-bigger .e-tab-header.e-vertical .e-hor-nav .e-popup-down-icon {
+  height: 100%;
+  width: 100%;
+}
 .e-bigger .e-tab .e-tab-header .e-hor-nav,
 .e-tab.e-bigger .e-tab-header .e-hor-nav {
   height: 48px;
@@ -7346,12 +7350,14 @@
 .e-tab.e-bigger .e-tab-header.e-vertical .e-hor-nav .e-popup-up-icon::before,
 .e-tab.e-bigger .e-tab-header.e-vertical .e-hor-nav .e-popup-down-icon::before {
   line-height: 48px;
+  font-size: 14px;
 }
 .e-bigger .e-tab .e-tab-header.e-vertical .e-hor-nav .e-popup-up-icon::after,
 .e-bigger .e-tab .e-tab-header.e-vertical .e-hor-nav .e-popup-down-icon::after,
 .e-tab.e-bigger .e-tab-header.e-vertical .e-hor-nav .e-popup-up-icon::after,
 .e-tab.e-bigger .e-tab-header.e-vertical .e-hor-nav .e-popup-down-icon::after {
   font-size: 14px;
+  font-size: 24px;
   line-height: 48px;
   margin: 0 0 0 8px;
 }
@@ -8182,6 +8188,9 @@
 .e-treeview .e-list-text .e-input-group .e-input {
   height: 28px;
 }
+.e-treeview .e-navigable-text {
+  padding: 0;
+}
 .e-treeview .e-list-icon,
 .e-treeview .e-list-img {
   display: inline-block;
@@ -8199,6 +8208,10 @@
 .e-treeview .e-list-img + .e-list-text {
   padding: 10px 12px;
 }
+.e-treeview .e-list-icon + .e-navigable-text,
+.e-treeview .e-list-img + .e-navigable-text {
+  padding: 10px 12px;
+}
 .e-treeview .e-icon-collapsible,
 .e-treeview .e-icon-expandable {
   display: inline-block;
@@ -8302,6 +8315,12 @@
 .e-treeview .e-navigable .e-anchor-wrap {
   padding: 0 0 0 12px;
 }
+.e-treeview .e-navigable .e-nav-wrapper {
+  padding: 0;
+}
+.e-treeview .e-navigable .e-checkbox-wrapper + .e-list-text .e-nav-wrapper:not(:has(.e-list-icon)) {
+  padding: 0;
+}
 .e-treeview .e-navigable .e-list-icon,
 .e-treeview .e-navigable .e-list-img {
   margin: 0 8px 0 0;
@@ -8352,6 +8371,9 @@
 .e-treeview.e-rtl .e-navigable .e-anchor-wrap {
   padding: 0 12px 0 0;
 }
+.e-treeview.e-rtl .e-navigable .e-nav-wrapper {
+  padding: 0;
+}
 .e-treeview.e-rtl .e-navigable .e-list-icon,
 .e-treeview.e-rtl .e-navigable .e-list-img,
 .e-treeview.e-rtl .e-navigable .e-list-icon + .e-list-img {
@@ -8699,7 +8721,6 @@
 .e-treeview.e-bigger .e-list-text {
   line-height: 24px;
   min-height: 24px;
-  padding: 12px 18px;
 }
 .e-bigger .e-treeview .e-list-text .e-input-group,
 .e-treeview.e-bigger .e-list-text .e-input-group {
@@ -11083,6 +11104,7 @@ ejs-sidebar {
 }
 .e-stepper.e-vertical {
   min-height: inherit;
+  height: inherit;
   display: inline-block;
 }
 .e-stepper.e-vertical .e-step-label.e-step-label-only,
@@ -11106,6 +11128,7 @@ ejs-sidebar {
       -ms-flex-direction: column;
           flex-direction: column;
   min-height: inherit;
+  height: inherit;
   float: left;
   -webkit-box-align: start;
       -ms-flex-align: start;
@@ -11223,6 +11246,7 @@ ejs-sidebar {
 }
 .e-stepper.e-vertical .e-stepper-progressbar {
   min-height: inherit;
+  height: inherit;
   width: 1.6px;
   top: 0;
   left: var(--progress-position);
@@ -11358,7 +11382,8 @@ ejs-sidebar {
   background-color: rgba(var(--color-sf-surface));
   border-color: transparent;
 }
-.e-stepper .e-step-disabled .e-indicator {
+.e-stepper .e-step-disabled .e-indicator,
+.e-stepper .e-step-disabled .e-step {
   background: -webkit-gradient(linear, left bottom, left top, from(rgba(var(--color-sf-primary), 0.11)), to(rgba(var(--color-sf-primary), 0.11))), rgba(var(--color-sf-surface));
   background: linear-gradient(0deg, rgba(var(--color-sf-primary), 0.11), rgba(var(--color-sf-primary), 0.11)), rgba(var(--color-sf-surface));
   color: rgba(var(--color-sf-on-surface), 0.38);

package/styles/menu/_bigger.scss

@@ -103,6 +103,9 @@
     &.e-ul {
       @include bigger-ul-size;
       min-width: $cmenu-bigger-min-width;
+      @if $skin-name == 'tailwind3' {
+        font-weight: $font-weight-normal;
+      }
 
       & .e-menu-item  {
         @include bigger-li-size;
@@ -285,6 +288,26 @@
         }
       }
     }
+    @if $skin-name == 'tailwind3' {
+      .e-menu-header {
+        background: $content-bg-color-alt1;
+        .e-menu-icon {
+          font-size: $menu-bigger-scroll-nav-icon-size;
+        }
+      }
+      ul {
+        background: $content-bg-color;
+        .e-menu-item {
+          & .e-menu-icon,
+          & .e-caret {
+            font-size: $menu-bigger-scroll-nav-icon-size;
+          }
+        }
+      }
+      .e-ul {
+        font-weight: $font-weight-medium;
+      }
+    }
   }
 
   .e-bigger .e-rtl.e-menu-wrapper.e-hamburger,

package/styles/menu/_layout.scss

@@ -14,6 +14,9 @@
     @at-root {
       & ul {
         @include ul-layout;
+        @if $skin-name == 'tailwind3' {
+          font-weight: $font-weight-medium;
+        }
         font-size: $menu-font-size;
         padding: $menu-ul-padding;
         text-align: left;
@@ -101,6 +104,9 @@
             cursor: auto;
             opacity: $menu-disable-opacity;
             pointer-events: none;
+            @if $skin-name == 'tailwind3' {
+              color: $flyout-text-color-disabled;
+            }
           }
         }
       }
@@ -108,6 +114,9 @@
       & .e-ul {
         @include ul-size;
         min-width: $cmenu-min-width;
+        @if $skin-name == 'tailwind3' {
+          font-weight: $font-weight-normal;
+        }
 
         & .e-menu-item {
           @include li-size;
@@ -142,6 +151,9 @@
       line-height: $menu-li-height;
       text-align: left;
       white-space: nowrap;
+      @if $skin-name == 'tailwind3' {
+        font-weight: $font-weight-medium;
+      }
 
       & .e-menu-title,
       & .e-menu-icon {
@@ -438,6 +450,26 @@
         }
       }
     }
+    @if $skin-name == 'tailwind3' {
+      .e-menu-header {
+        background: $content-bg-color-alt1;
+        .e-menu-icon {
+          font-size: $menu-bigger-scroll-nav-icon-size;
+        }
+      }
+      ul {
+        background: $content-bg-color;
+        .e-menu-item {
+          & .e-menu-icon,
+          & .e-caret {
+            font-size: $menu-bigger-scroll-nav-icon-size;
+          }
+        }
+      }
+      .e-ul {
+        font-weight: $font-weight-medium;
+      }
+    }
   }
 
   .e-rtl.e-menu-wrapper.e-hamburger ul,

package/styles/menu/_tailwind3-definition.scss

@@ -0,0 +1,66 @@
+$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-icon-height: 40px !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: 16px !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-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-base !default;
+$menu-icon-bigger-font-size: 18px !default;
+$menu-li-selected-outline-offset: 0 !default;
+$menu-hscroll-nav-size: 28px !default;
+$menu-vscroll-nav-size: 32px !default;
+$menu-scroll-nav-icon-size: 16px !default;
+$menu-bigger-hscroll-nav-size: 40px !default;
+$menu-bigger-vscroll-nav-size: 40px !default;
+$menu-bigger-scroll-nav-icon-size: 20px !default;
+$menu-header-icon-padding: 0 16px !default;
+$menu-icon-li-height: 35px !default;
+$menu-li-bgcolor: $content-bg-color-hover !default;
+$menu-li-border-color: $border-light !default;
+$menu-li-selection-bgcolor: $content-bg-color-selected !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-selected !default;
+$menu-sub-ul-bgcolor: $content-bg-color-alt2 !default;
+$menu-sub-li-border-color: $border-light !default;
+$menu-ul-bgcolor: transparent !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: $text-sm !default;
+$submenu-bigger-caret-font-size: $text-base !default;
+$submenu-color: $content-text-color !default;
+$menu-icon-color: $icon-color !default;
+$menu-icon-hover-color: $content-text-color-hover !default;
+$menu-icon-focussed-color: $cmenu-caret-color !default;
+$menu-caret-color: $icon-color-pressed !default;

package/styles/menu/_theme.scss

@@ -127,6 +127,11 @@
               background-color: $content-bg-color;
               box-shadow: $shadow-focus-ring1;
             }
+            @if $skin-name == 'tailwind3' {
+              box-shadow: $shadow-focus-ring2;
+              background: transparent;
+              border-radius: 4px;
+            }
           }
         }
 
@@ -144,7 +149,7 @@
               color: $submenu-color;
             }
           }
-          @else if $skin-name == 'FluentUI' {
+          @else if $skin-name == 'FluentUI' or $skin-name == 'tailwind3' {
             & .e-caret,
             & .e-menu-icon {
               color: $menu-icon-color;
@@ -165,6 +170,12 @@
               background-color: $flyout-bg-color-hover;
               border-radius: 4px;
             }
+            @if $skin-name == 'tailwind3' {
+              & .e-caret,
+              & .e-menu-icon {
+                color: $icon-color-hover;
+              }
+            }
           }
 
           &.e-selected,
@@ -178,6 +189,12 @@
             @if $skin-name == 'fluent2' {
               background-color: $flyout-bg-color-selected;
             }
+            @if $skin-name == 'tailwind3' {
+              & .e-caret,
+              & .e-menu-icon {
+                color: $menu-icon-color;
+              }
+            }
           }
 
           & .e-menu-url {
@@ -203,6 +220,10 @@
               box-shadow: $shadow-focus-ring1;
               border-radius: 4px;
             }
+            @if $skin-name == 'tailwind3' {
+              box-shadow: $shadow-focus-ring2;
+              background: $flyout-bg-color;
+            }
           }
 
           &:active {
@@ -232,12 +253,17 @@
     }
 
     & .e-menu-hscroll.e-hscroll .e-scroll-nav {
-      background: $menu-ul-bgcolor;
+      @if $skin-name != 'tailwind3' {
+        background: $menu-ul-bgcolor;
+      }
 
       & .e-nav-arrow.e-icons {
         @if $skin-name == 'fluent2' {
           color: $icon-color;
         }
+        @else if $skin-name == 'tailwind3' {
+          color: $secondary-text-color-focus;
+        }
         @else {
           color: $cmenu-caret-color;
         }
@@ -291,6 +317,9 @@
           background: darken($gray-600, 7.5%);
           border: 1px inset darken($gray-600, 10%);
         }
+        @else if $skin-name == 'tailwind3' {
+          background: $secondary-bg-color-pressed;
+        }
         @else {
           background: $menu-li-bgcolor;
         }
@@ -384,3 +413,8 @@
     color: $icon-color !important; /* stylelint-disable-line declaration-no-important */
   }
 }
+@if $skin-name == 'tailwind3' {
+  .e-menu-wrapper.e-hamburger .e-menu .e-menu-item.e-selected {
+    color: $primary;
+  }
+}