@syncfusion/ej2-navigations 21.2.8 → 22.1.34

package/styles/material3.scss

@@ -0,0 +1,15 @@
+
+@import 'ej2-base/styles/material3-definition.scss';
+@import 'pager/material3.scss';
+@import 'h-scroll/material3.scss';
+@import 'v-scroll/material3.scss';
+@import 'toolbar/material3.scss';
+@import 'accordion/material3.scss';
+@import 'carousel/material3.scss';
+@import 'context-menu/material3.scss';
+@import 'tab/material3.scss';
+@import 'treeview/material3.scss';
+@import 'sidebar/material3.scss';
+@import 'menu/material3.scss';
+@import 'breadcrumb/material3.scss';
+@import 'appbar/material3.scss';

package/styles/menu/_layout.scss

@@ -511,6 +511,9 @@
 
         & .e-menu-item {
           text-indent: $menu-li-text-indent;
+          @if $skin-name == 'Material3' {
+            border-radius: 0;
+          }
 
           &.e-blankicon {
             text-indent: $menu-li-text-indent + $menu-icon-font-size + $menu-icon-margin-right;
@@ -707,4 +710,8 @@
       }
     }
   }
+
+  .e-menu-container .e-vscroll ul {
+    position: relative;
+  }
 }

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

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

package/styles/menu/_material3-definition.scss

@@ -0,0 +1,67 @@
+//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: 40px !default;
+$menu-bigger-li-icon-height: 40px !default;
+$menu-bigger-li-padding: 0 20px !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: 14px !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: 32px !default;
+$menu-li-padding: 0 16px !default;
+$menu-li-text-indent: 12px !default;
+$menu-li-right-padding: 12px !default;
+$menu-separator-padding: 0 !default;
+$menu-icon-font-size: 16px !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: 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-icon-li-height: 32px !default;
+$menu-li-bgcolor: rgba($content-text-color, .08) !default;
+$menu-li-border-color: rgba($flyout-border) !default;
+$menu-li-selection-bgcolor: rgba($primary, .08) !default;
+$menu-li-selected-outline: 0 solid $menu-li-selection-bgcolor !default;
+$menu-li-selection-font-color: rgba($content-text-color) !default;
+$menu-ul-header-padding: $menu-ul-padding !default;
+$menu-color: rgba($content-text-color) !default;
+$menu-seperator-border-color: rgba($flyout-border) !default;
+$menu-selected-color: rgba($primary) !default;
+$menu-sub-ul-bgcolor: $content-bg-color-alt2 !default;
+$menu-sub-li-border-color: rgba($flyout-border) !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: $menu-caret-font-size !default;
+$submenu-bigger-caret-font-size: $submenu-caret-font-size !default;
+$submenu-color: rgba($content-text-color) !default;
+$menu-icon-color: rgba($icon-color) !default;
+$menu-icon-hover-color: rgba($content-text-color) !default;
+$menu-icon-focussed-color: rgba($primary) !default;
+$menu-caret-color: $cmenu-caret-color !default;

package/styles/menu/_theme.scss

@@ -65,7 +65,7 @@
               @include focused-icon-color;
               background: $menu-li-bgcolor;
               @if $skin-name == 'Material3' {
-                border-radius: 20px;
+                border-radius: 2px;
               }
             }
           }
@@ -84,7 +84,7 @@
               background: $menu-li-selection-bgcolor;
             }
             @if $skin-name == 'Material3' {
-              border-radius: 20px;
+              border-radius: 2px;
             }
 
             & .e-caret {
@@ -205,6 +205,9 @@
             color: $menu-icon-focussed-color;
           }
         }
+        @else if $skin-name == 'Material3' {
+          border-radius: 2px;
+        }
         @else {
           background: $menu-li-bgcolor;
         }

package/styles/menu/bootstrap-dark.css

@@ -893,6 +893,10 @@
   text-indent: inherit;
 }
 
+.e-menu-container .e-vscroll ul {
+  position: relative;
+}
+
 /*! menu theme */
 .e-menu-wrapper,
 .e-menu-container {

package/styles/menu/bootstrap.css

@@ -894,6 +894,10 @@
   text-indent: inherit;
 }
 
+.e-menu-container .e-vscroll ul {
+  position: relative;
+}
+
 /*! menu theme */
 .e-menu-wrapper,
 .e-menu-container {

package/styles/menu/bootstrap4.css

@@ -894,6 +894,10 @@
   text-indent: inherit;
 }
 
+.e-menu-container .e-vscroll ul {
+  position: relative;
+}
+
 /*! menu theme */
 .e-menu-wrapper,
 .e-menu-container {

package/styles/menu/bootstrap5-dark.css

@@ -904,6 +904,10 @@
   text-indent: inherit;
 }
 
+.e-menu-container .e-vscroll ul {
+  position: relative;
+}
+
 /*! menu theme */
 .e-menu-wrapper,
 .e-menu-container {

package/styles/menu/bootstrap5.css

@@ -904,6 +904,10 @@
   text-indent: inherit;
 }
 
+.e-menu-container .e-vscroll ul {
+  position: relative;
+}
+
 /*! menu theme */
 .e-menu-wrapper,
 .e-menu-container {

package/styles/menu/fabric-dark.css

@@ -893,6 +893,10 @@
   text-indent: inherit;
 }
 
+.e-menu-container .e-vscroll ul {
+  position: relative;
+}
+
 /*! menu theme */
 .e-menu-wrapper,
 .e-menu-container {

package/styles/menu/fabric.css

@@ -894,6 +894,10 @@
   text-indent: inherit;
 }
 
+.e-menu-container .e-vscroll ul {
+  position: relative;
+}
+
 /*! menu theme */
 .e-menu-wrapper,
 .e-menu-container {

package/styles/menu/fluent-dark.css

@@ -903,6 +903,10 @@
   text-indent: inherit;
 }
 
+.e-menu-container .e-vscroll ul {
+  position: relative;
+}
+
 /*! menu theme */
 .e-menu-wrapper,
 .e-menu-container {

package/styles/menu/fluent.css

@@ -903,6 +903,10 @@
   text-indent: inherit;
 }
 
+.e-menu-container .e-vscroll ul {
+  position: relative;
+}
+
 /*! menu theme */
 .e-menu-wrapper,
 .e-menu-container {

package/styles/menu/highcontrast-light.css

@@ -893,6 +893,10 @@
   text-indent: inherit;
 }
 
+.e-menu-container .e-vscroll ul {
+  position: relative;
+}
+
 /*! menu theme */
 .e-menu-wrapper,
 .e-menu-container {

package/styles/menu/highcontrast.css

@@ -894,6 +894,10 @@
   text-indent: inherit;
 }
 
+.e-menu-container .e-vscroll ul {
+  position: relative;
+}
+
 /*! menu theme */
 .e-menu-wrapper,
 .e-menu-container {

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

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

package/styles/menu/material-dark.css

@@ -912,6 +912,10 @@
   text-indent: inherit;
 }
 
+.e-menu-container .e-vscroll ul {
+  position: relative;
+}
+
 /*! menu theme */
 .e-menu-wrapper,
 .e-menu-container {

package/styles/menu/material.css

@@ -914,6 +914,10 @@
   text-indent: inherit;
 }
 
+.e-menu-container .e-vscroll ul {
+  position: relative;
+}
+
 /*! menu theme */
 .e-menu-wrapper,
 .e-menu-container {