@syncfusion/ej2-navigations 16.4.47 → 16.4.52-46585

package/styles/menu/_layout.scss

@@ -1,12 +1,18 @@
 @import '../context-menu/layout-mixin.scss';
 @include export-module('menu-layout') {
+  
   /*! menu layout */
-  .e-menu-wrapper {
+  .e-menu-wrapper,
+  .e-menu-container {
     border: $menu-ul-border;
     border-radius: $cmenu-ul-border-radius;
     display: inline-block;
     line-height: 0;
 
+    & .e-menu-vscroll {
+      height: inherit;
+    }
+
     @at-root {
       & ul {
         @include ul-layout;
@@ -20,10 +26,6 @@
 
           & .e-menu-item {
             display: list-item;
-
-            &.e-blankicon {
-              padding-left: $menu-blank-icon;
-            }
           }
 
           & .e-separator {
@@ -43,6 +45,10 @@
               padding: $menu-separator-padding;
             }
           }
+
+          & .e-menu-item .e-menu-icon {
+            width: $menu-icon-width;
+          }
         }
 
         & .e-menu-item  {
@@ -60,15 +66,21 @@
             line-height: $menu-li-height;
             margin-right: $menu-icon-margin-right;
             text-align: center;
-            width: $menu-icon-width;
+            margin-bottom: 4px;
           }
 
           & .e-caret {
             font-size: $menu-caret-font-size;
             height: auto;
-            line-height: $menu-li-height;
+            @if $skin-name == 'bootstrap5' or $skin-name == 'FluentUI' or $skin-name == 'Material3' {
+              line-height: $menu-icon-li-height;
+            }
+            @else {
+              line-height: $menu-li-height;
+            }
             position: absolute;
             right: $menu-caret-right;
+            top: 0;
             width: auto;
           }
 
@@ -95,16 +107,51 @@
           & .e-caret {
             font-size: $submenu-caret-font-size;
           }
-
-          & .e-menu-icon {
-            width: auto;
-          }
         }
       }
     }
 
+    &.e-menu-icon-right {
+      & .e-menu-header .e-menu-icon {
+        float: right;
+      }
+
+      & .e-menu-header .e-menu-title {
+        padding: $menu-header-icon-padding;
+      }
+    }
+
+    & .e-menu-header {
+      display: none;
+      font-family: $font-family;
+      font-size: $menu-icon-font-size;
+      font-weight: $font-weight;
+      height: $menu-li-height;
+      line-height: $menu-li-height;
+      text-align: left;
+      white-space: nowrap;
+
+      & .e-menu-title,
+      & .e-menu-icon {
+        display: inline-block;
+        line-height: inherit;
+      }
+
+      & .e-menu-icon {
+        cursor: pointer;
+        float: left;
+        outline: none;
+        padding: $menu-header-icon-padding;
+      }
+    }
+
     & .e-menu-hscroll.e-hscroll:not(.e-scroll-device) {
-      padding: 0 $menu-hscroll-nav-size;
+      @if $skin-name == 'bootstrap4' {
+        padding: 4px $menu-hscroll-nav-size;
+      }
+      @else {
+        padding: 0 $menu-hscroll-nav-size;
+      }
 
       & .e-scroll-nav {
         width: $menu-hscroll-nav-size;
@@ -195,9 +242,31 @@
         overflow: auto;
       }
     }
+
+    &.e-contextmenu-container {
+      height: 1px;
+
+      .e-menu-vscroll ul.e-ul {
+        width: inherit;
+      }
+
+      .e-menu-vscroll {
+        border: $cmenu-ul-border;
+        box-shadow: $cmenu-sub-ul-box-shadow;
+      }
+    }
   }
 
-  .e-rtl.e-menu-wrapper ul {
+  .e-menu-container:not(.e-hamburger):not(.e-rtl) .e-menu {
+    &.e-vertical {
+      & .e-blankicon {
+        padding-left: $menu-blank-icon;
+      }
+    }
+  }
+
+  .e-rtl.e-menu-wrapper ul,
+  .e-rtl.e-menu-container ul {
     & .e-menu-item {
       @include rtl-li-layout;
       text-align: right;
@@ -216,23 +285,25 @@
       }
     }
 
-    &.e-vertical {
+    &.e-ul {
       & .e-menu-item {
-        &.e-blankicon {
-          padding-right: $menu-blank-icon;
-        }
+        @include rtl-li-size;
       }
     }
+  }
 
-    &.e-ul {
-      & .e-menu-item {
-        @include rtl-li-size;
+  .e-rtl.e-menu-container:not(.e-hamburger) .e-menu {
+    &.e-vertical {
+      & .e-blankicon {
+        padding-right: $menu-blank-icon;
       }
     }
   }
 
   .e-bigger .e-menu-wrapper ul,
-  .e-bigger.e-menu-wrapper ul {
+  .e-bigger.e-menu-wrapper ul,
+  .e-bigger .e-menu-container ul,
+  .e-bigger.e-menu-container ul {
     font-size: $menu-bigger-font-size;
 
     & .e-menu-item {
@@ -244,7 +315,6 @@
         font-size: $menu-icon-bigger-font-size;
         line-height: $menu-bigger-li-height;
         margin-right: $menu-bigger-icon-margin-right;
-        width: $menu-icon-width;
       }
 
       &.e-menu-caret-icon {
@@ -253,7 +323,12 @@
 
       & .e-caret {
         font-size: $menu-bigger-caret-font-size;
-        line-height: $menu-bigger-li-height;
+        @if $skin-name == 'bootstrap5' {
+          line-height: $menu-bigger-li-icon-height;
+        }
+        @else {
+          line-height: $menu-bigger-li-height;
+        }
         right: $menu-bigger-caret-right;
       }
 
@@ -272,10 +347,6 @@
           &.e-separator {
             @include separator-bigger-size;
           }
-
-          &.e-blankicon {
-            padding-left: $menu-blank-icon-bigger;
-          }
         }
       }
     }
@@ -288,6 +359,9 @@
       & .e-menu-item  {
         @include bigger-li-size;
         padding: $cmenu-li-padding;
+        @if $skin-name == 'tailwind' or $skin-name == 'tailwind-dark' {
+          padding: $menu-bigger-li-padding;
+        }
 
         & .e-caret {
           font-size: $submenu-bigger-caret-font-size;
@@ -299,15 +373,30 @@
         }
 
         & .e-menu-icon {
-          margin-right: $cmenu-icon-margin-right;
-          width: auto;
+          @if $skin-name == 'tailwind' {
+            margin-right: $menu-icon-bigger-margin-right;
+          }
+          @else {
+            margin-right: $cmenu-icon-margin-right;
+          }
         }
       }
     }
   }
 
+  .e-bigger .e-menu-container:not(.e-hamburger):not(.e-rtl) .e-menu,
+  .e-bigger.e-menu-container:not(.e-hamburger):not(.e-rtl) .e-menu {
+    &.e-vertical {
+      & .e-blankicon {
+        padding-left: $menu-blank-icon-bigger;
+      }
+    }
+  }
+
   .e-bigger .e-menu-wrapper,
-  .e-bigger.e-menu-wrapper {
+  .e-bigger.e-menu-wrapper,
+  .e-bigger .e-menu-container,
+  .e-bigger.e-menu-container {
     & .e-menu-hscroll.e-hscroll:not(.e-scroll-device) {
       padding: 0 $menu-bigger-hscroll-nav-size;
 
@@ -336,7 +425,9 @@
   }
 
   .e-bigger .e-rtl.e-menu-wrapper ul,
-  .e-bigger.e-rtl.e-menu-wrapper ul {
+  .e-bigger.e-rtl.e-menu-wrapper ul,
+  .e-bigger .e-rtl.e-menu-container ul,
+  .e-bigger.e-rtl.e-menu-container ul {
     & .e-menu-item {
       text-align: right;
 
@@ -357,14 +448,6 @@
       }
     }
 
-    &.e-vertical {
-      & .e-menu-item {
-        &.e-blankicon {
-          padding-right: $menu-blank-icon-bigger;
-        }
-      }
-    }
-
     &.e-ul {
       & .e-menu-item {
         & .e-menu-icon {
@@ -386,4 +469,242 @@
       }
     }
   }
+
+  .e-bigger .e-rtl.e-menu-container:not(.e-hamburger) .e-menu,
+  .e-bigger.e-rtl.e-menu-container:not(.e-hamburger) .e-menu {
+    &.e-vertical {
+      & .e-blankicon {
+        padding-right: $menu-blank-icon-bigger;
+      }
+    }
+  }
+
+  .e-menu-wrapper.e-hamburger,
+  .e-menu-container.e-hamburger {
+    border: 0;
+    display: block;
+    position: relative;
+
+    & .e-menu-header:not(.e-vertical) {
+      border: $menu-ul-border;
+      display: block;
+    }
+
+    & .e-popup.e-menu-popup {
+      border: 0;
+      border-radius: 0;
+      box-shadow: none;
+      display: block;
+      position: relative;
+      width: 100%;
+    }
+
+    & ul {
+      &.e-menu {
+        border: $menu-ul-border;
+        overflow-y: auto;
+        width: 100%;
+
+        &.e-menu-parent.e-hide-menu {
+          display: none;
+        }
+
+        & .e-menu-item {
+          text-indent: $menu-li-text-indent;
+
+          &.e-blankicon {
+            text-indent: $menu-li-text-indent + $menu-icon-font-size + $menu-icon-margin-right;
+          }
+
+          & .e-menu-icon {
+            display: inline;
+            text-indent: 0;
+          }
+
+          &.e-menu-hide {
+            display: none;
+          }
+        }
+
+        /* stylelint-disable */
+
+		    & .e-menu-item[aria-expanded = "true"] .e-caret {
+			    -webkit-transition: -webkit-transform .3s ease-in-out;
+          transition: -webkit-transform .3s ease-in-out;
+          transition: transform .3s ease-in-out;
+			    -webkit-transform: rotate(-180deg);
+          transform: rotate(-180deg);
+          text-indent: 0;
+		    }
+		
+		    & .e-menu-item[aria-expanded = "false"] .e-caret {
+			    -webkit-transition: -webkit-transform .3s ease-in-out;
+          transition: -webkit-transform .3s ease-in-out;
+          transition: transform .3s ease-in-out;
+          -webkit-transform: rotate(0deg);
+          transform: rotate(0deg);
+          text-indent: 0;
+        }
+        /* stylelint-enable */
+      }
+
+      &.e-menu:not(.e-vertical) {
+        border-top: 0;
+        display: block;
+        padding: 0;
+        position: absolute;
+      }
+
+      &.e-ul {
+        font-size: $menu-font-size;
+        padding: 0;
+
+        & .e-menu-item {
+          line-height: $menu-li-height;
+          text-indent: inherit;
+
+          &.e-blankicon {
+            padding: 0;
+            text-indent: inherit;
+          }
+
+          & .e-caret {
+            font-size: $menu-caret-font-size;
+            right: $menu-caret-right;
+          }
+        }
+      }
+
+      & .e-menu-item {
+        display: list-item;
+        height: auto;
+        padding: 0;
+
+        &.e-menu-caret-icon {
+          padding: 0;
+        }
+
+        & .e-menu-url {
+          display: inline-block;
+          min-width: 120px;
+          text-indent: 0;
+          width: 100%;
+        }
+
+        &.e-blankicon {
+          padding: 0;
+        }
+
+        &.e-separator {
+          @include separator-size;
+        }
+      }
+    }
+  }
+
+  .e-rtl.e-menu-wrapper.e-hamburger ul,
+  .e-rtl.e-menu-container.e-hamburger ul {
+    & .e-menu-item {
+      & .e-menu-caret-icon {
+        padding-left: 0;
+        padding-right: 0;
+      }
+
+      & .e-menu-icon {
+        margin-left: 0;
+        text-indent: inherit;
+      }
+
+      & .e-caret {
+        left: $menu-caret-right;
+        right: auto;
+      }
+    }
+  }
+
+  .e-bigger .e-menu-wrapper.e-hamburger ul,
+  .e-bigger.e-menu-wrapper.e-hamburger ul,
+  .e-bigger .e-menu-container.e-hamburger ul,
+  .e-bigger.e-menu-container.e-hamburger ul {
+    & .e-ul {
+      max-width: 100%;
+
+      & .e-menu-item {
+        height: auto;
+        line-height: $menu-bigger-li-height;
+        padding: 0;
+      }
+    }
+  }
+
+  .e-bigger .e-menu-wrapper.e-hamburger,
+  .e-bigger.e-menu-wrapper.e-hamburger,
+  .e-bigger .e-menu-container.e-hamburger,
+  .e-bigger.e-menu-container.e-hamburger {
+    & .e-menu-header {
+      font-size: $menu-icon-bigger-font-size;
+      height: $menu-bigger-li-height;
+      line-height: $menu-bigger-li-height;
+    }
+
+    & ul.e-menu {
+      & .e-menu-item {
+        text-indent: $menu-bigger-li-text-indent;
+
+        &.e-blankicon {
+          text-indent: $menu-bigger-li-text-indent + $menu-icon-bigger-font-size + $menu-bigger-icon-margin-right;
+        }
+      }
+
+      & .e-ul {
+        font-size: $menu-bigger-font-size;
+
+        & .e-menu-item {
+          text-indent: inherit;
+
+          & .e-caret {
+            font-size: $menu-bigger-caret-font-size;
+            right: $menu-bigger-caret-right;
+          }
+        }
+      }
+    }
+  }
+
+  .e-bigger .e-rtl.e-menu-wrapper.e-hamburger,
+  .e-bigger.e-rtl.e-menu-wrapper.e-hamburger,
+  .e-bigger .e-rtl.e-menu-container.e-hamburger,
+  .e-bigger.e-rtl.e-menu-container.e-hamburger {
+    & ul.e-menu {
+      & .e-menu-item {
+        padding: 0;
+        text-indent: $menu-bigger-li-text-indent;
+
+        &.e-blankicon {
+          text-indent: $menu-bigger-li-text-indent + $menu-icon-bigger-font-size + $menu-bigger-icon-margin-right;
+        }
+
+        & .e-menu-icon {
+          margin-left: 0;
+          text-indent: inherit;
+        }
+
+        &.e-menu-caret-icon {
+          padding-left: 0;
+          padding-right: 0;
+        }
+
+        & .e-caret {
+          left: $menu-caret-right;
+          right: auto;
+        }
+      }
+
+      & .e-ul {
+        & .e-menu-item {
+          text-indent: inherit;
+        }
+      }
+    }
+  }
 }

package/styles/menu/_material-dark-definition.scss

@@ -1,45 +1,47 @@
-//default
-$menu-bigger-caret-li-padding: 36px;
-$menu-bigger-caret-right: 8px;
-$menu-bigger-li-right-padding: 16px;
-$menu-bigger-icon-margin-right: 10px;
-$menu-caret-padding-left: 10px;
-$menu-li-border-style: solid;
-$menu-li-border-width: 1px;
-$menu-ul-border: none !default;
-$menu-font-size: 14px !default;
+//default
+$menu-bigger-caret-li-padding: 36px !default;
+$menu-bigger-caret-right: 8px !default;
+$menu-bigger-li-right-padding: 16px !default;
+$menu-bigger-icon-margin-right: 10px !default;
+$menu-caret-padding-left: 10px !default;
+$menu-li-border-style: solid !default;
+$menu-li-border-width: 1px !default;
+$menu-ul-border: $menu-li-border-width $menu-li-border-style transparent !default;
+$menu-font-size: 13px !default;
 $menu-ul-padding: 0 !default;
 $menu-blank-icon: 34px !default;
 $menu-ul-header-padding: $menu-ul-padding !default;
 $menu-separator-padding: 0 !default;
-$menu-li-height: 36px !default;
-$menu-li-padding: 0 16px !default;
+$menu-li-height: 42px !default;
+$menu-li-padding: 0 12px !default;
+$menu-li-text-indent: 12px !default;
 $menu-icon-font-size: 14px !default;
-$menu-icon-margin-right: 10px !default;
-$menu-icon-width: auto !default;
-$menu-caret-font-size: 10px !default;
+$menu-icon-margin-right: 8px !default;
+$menu-icon-width: 24px !default;
+$menu-caret-font-size: 11px !default;
 $menu-caret-right: 6px !default;
 $menu-caret-icon: '\e94d' !default;
 $menu-caret-li-padding: 26px !default;
 $menu-disable-opacity: .38 !default;
 $menu-li-right-padding: 12px !default;
 $menu-bigger-font-size: 14px !default;
-$menu-bigger-li-height: 52px !default;
+$menu-bigger-li-height: 56px !default;
 $menu-bigger-li-padding: 0 16px !default;
+$menu-bigger-li-text-indent: 16px !default;
 $menu-icon-bigger-font-size: 16px !default;
 $menu-bigger-caret-font-size: $cmenu-bigger-caret-font-size !default;
 $menu-separator-bigger-padding: 0 !default;
 $menu-ul-bigger-header-padding: 0 !default;
 $menu-blank-icon-bigger: 42px !default;
-$menu-ul-bgcolor: #fff !default;
+$menu-ul-bgcolor: $grey-900 !default;
 $menu-li-border-color: $cmenu-li-border-color !default;
 $menu-color: $cmenu-color !default;
 $menu-seperator-border-color: $grey-700 !default;
-$menu-li-bgcolor: $cmenu-li-bgcolor !default;
+$menu-li-bgcolor: rgba($grey-dark-font, .1) !default;
 $menu-li-selection-font-color: $cmenu-li-selection-font-color !default;
 $menu-li-hover-outline: 0 solid $menu-li-border-color !default;
 $menu-li-hover-outline-offset: 0 !default;
-$menu-li-selection-bgcolor: #808080 !default;
+$menu-li-selection-bgcolor: rgba($grey-dark-font, .18) !default;
 $menu-selected-color: $cmenu-selected-color !default;
 $menu-li-selected-outline: 0 solid $menu-li-selection-bgcolor !default;
 $menu-li-selected-outline-offset: 0 !default;
@@ -53,4 +55,10 @@ $menu-srollbar-ul-border: none !default;
 $submenu-caret-font-size: $cmenu-caret-font-size !default;
 $submenu-bigger-caret-font-size: $cmenu-bigger-caret-font-size !default;
 $submenu-color: $cmenu-color !default;
+$menu-icon-color: $cmenu-caret-color !default;
+$menu-icon-hover-color: inherit !default;
+$menu-icon-focussed-color: $cmenu-caret-color !default;
+$menu-caret-color: $cmenu-caret-color !default;
+$menu-header-icon-padding: 0 16px !default;
+
 //enddefault

package/styles/menu/_material-definition.scss

@@ -5,6 +5,7 @@ $menu-bigger-font-size: 14px !default;
 $menu-bigger-li-right-padding: 16px !default;
 $menu-bigger-li-height: 56px !default;
 $menu-bigger-li-padding: 0 16px !default;
+$menu-bigger-li-text-indent: 16px !default;
 $menu-bigger-icon-margin-right: 10px !default;
 $menu-color: $cmenu-color !default;
 $menu-blank-icon: 44px !default;
@@ -26,6 +27,7 @@ $menu-li-border-width: 1px !default;
 $menu-li-selection-font-color: $cmenu-li-selection-font-color !default;
 $menu-li-height: 42px !default;
 $menu-li-padding: 0 12px !default;
+$menu-li-text-indent: 12px !default;
 $menu-li-right-padding: 12px !default;
 $menu-li-bgcolor: $cmenu-li-bgcolor !default;
 $menu-li-selection-bgcolor: $grey-300 !default;
@@ -55,3 +57,8 @@ $menu-srollbar-ul-border: none !default;
 $submenu-caret-font-size: $cmenu-caret-font-size !default;
 $submenu-bigger-caret-font-size: $cmenu-bigger-caret-font-size !default;
 $submenu-color: $cmenu-color !default;
+$menu-icon-color: $cmenu-caret-color !default;
+$menu-icon-hover-color: initial !default;
+$menu-icon-focussed-color: $cmenu-caret-color !default;
+$menu-caret-color: $cmenu-caret-color !default;
+$menu-header-icon-padding: 0 16px !default;

package/styles/menu/_tailwind-dark-definition.scss

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

package/styles/menu/_tailwind-definition.scss

@@ -0,0 +1,66 @@
+//layout variables
+$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;