@syncfusion/ej2-navigations 31.2.12 → 32.1.19

package/styles/carousel/material3.css

@@ -2,6 +2,86 @@
 
 
 
+
+
+
+
+/* Font Family */
+/* Font Sizes */
+/* Radius */
+/* 1px */
+/* 2px */
+/* 3px */
+/* 4px */
+/* 5px */
+/* 6px */
+/* 7px */
+/* 8px */
+/* 9px */
+/* 10px */
+/* 11px */
+/* 12px */
+/* 13px */
+/* 14px */
+/* 15px */
+/* 16px */
+/* 17px */
+/* 18px */
+/* 19px */
+/* 20px */
+/* 21px */
+/* 22px */
+/* 23px */
+/* 24px */
+/* 25px */
+/* 26px */
+/* 27px */
+/* 28px */
+/* 29px */
+/* 30px */
+/* 31px */
+/* 32px */
+/* 33px */
+/* 34px */
+/* 35px */
+/* 36px */
+/* 37px */
+/* 38px */
+/* 39px */
+/* 40px */
+/* 41px */
+/* 42px */
+/* 43px */
+/* 44px */
+/* 45px */
+/* 46px */
+/* 47px */
+/* 48px */
+/* 49px */
+/* 50px */
+/* 5em */
+/* 65% */
+/* border */
+/* 0px */
+/* 1px */
+/* 1.5px */
+/* 2px */
+/* 3px */
+/* 4px */
+/* 5px */
+/* 6px */
+/* 7px */
+/* 8px */
+/* 9px */
+/* 10px */
+/* 11px */
+/* 12px */
+/* 13px */
+/* 14px */
+/* 15px */
+/* 16px */
+
+
 .e-carousel .e-previous-icon::before {
   content: "\e765";
 }

package/styles/carousel/material3.scss

@@ -1,6 +1,5 @@
-
-
-@import 'ej2-buttons/styles/button/material3-definition.scss';
-@import 'material3-definition.scss';
-@import 'icons/material3.scss';
-@import 'all.scss';
+@use 'ej2-base/styles/definition/material3' as *;
+@use 'ej2-buttons/styles/button/material3-definition' as *;
+@use 'material3-definition' as *;
+@use 'icons/material3' as *;
+@use 'all' as *;

package/styles/carousel/tailwind-dark.scss

@@ -1,5 +1,5 @@
-@import 'ej2-base/styles/definition/tailwind-dark.scss';
-@import 'ej2-buttons/styles/button/tailwind-dark-definition.scss';
-@import 'tailwind-dark-definition.scss';
-@import 'icons/tailwind-dark.scss';
-@import 'all.scss';
+@use 'ej2-base/styles/definition/tailwind-dark' as *;
+@use 'ej2-buttons/styles/button/tailwind-dark-definition' as *;
+@use 'tailwind-dark-definition' as *;
+@use 'icons/tailwind-dark' as *;
+@use 'all' as *;

package/styles/carousel/tailwind.scss

@@ -1,5 +1,5 @@
-@import 'ej2-base/styles/definition/tailwind.scss';
-@import 'ej2-buttons/styles/button/tailwind-definition.scss';
-@import 'tailwind-definition.scss';
-@import 'icons/tailwind.scss';
-@import 'all.scss';
+@use 'ej2-base/styles/definition/tailwind' as *;
+@use 'ej2-buttons/styles/button/tailwind-definition' as *;
+@use 'tailwind-definition' as *;
+@use 'icons/tailwind' as *;
+@use 'all' as *;

package/styles/carousel/tailwind3.css

@@ -2,6 +2,76 @@
 
 
 
+
+
+
+
+/* Font Family */
+/* border */
+/* 0px */
+/* 1px */
+/* 1.5px */
+/* 2px */
+/* 3px */
+/* 4px */
+/* 5px */
+/* 6px */
+/* 7px */
+/* 8px */
+/* Radius */
+/* 1px */
+/* 2px */
+/* 3px */
+/* 4px */
+/* 5px */
+/* 6px */
+/* 7px */
+/* 8px */
+/* 9px */
+/* 10px */
+/* 11px */
+/* 12px */
+/* 13px */
+/* 14px */
+/* 15px */
+/* 16px */
+/* 17px */
+/* 18px */
+/* 19px */
+/* 20px */
+/* 21px */
+/* 22px */
+/* 23px */
+/* 24px */
+/* 25px */
+/* 26px */
+/* 27px */
+/* 28px */
+/* 29px */
+/* 30px */
+/* 31px */
+/* 32px */
+/* 33px */
+/* 34px */
+/* 35px */
+/* 36px */
+/* 37px */
+/* 38px */
+/* 39px */
+/* 40px */
+/* 41px */
+/* 42px */
+/* 43px */
+/* 44px */
+/* 45px */
+/* 46px */
+/* 47px */
+/* 48px */
+/* 49px */
+/* 50px */
+/* 5em */
+
+
 .e-carousel .e-previous-icon::before {
   content: "\e765";
 }

package/styles/carousel/tailwind3.scss

@@ -1,5 +1,5 @@
-@import 'ej2-base/styles/definition/tailwind3.scss';
-@import 'ej2-buttons/styles/button/tailwind3-definition.scss';
-@import 'tailwind3-definition.scss';
-@import 'icons/tailwind3.scss';
-@import 'all.scss';
+@use 'ej2-base/styles/definition/tailwind3' as *;
+@use 'ej2-buttons/styles/button/tailwind3-definition' as *;
+@use 'tailwind3-definition' as *;
+@use 'icons/tailwind3' as *;
+@use 'all' as *;

package/styles/context-menu/_all.scss

@@ -1,2 +1,2 @@
-@import 'layout.scss';
-@import 'theme.scss';
+@use 'layout' as *;
+@use 'theme' as *;

package/styles/context-menu/_bds-definition.scss

@@ -1,8 +1,11 @@
+@use 'ej2-base/styles/definition/bds' as *;
+@forward 'ej2-base/styles/definition/bds';
 $cmenu-back-icon: '\e977' !default;
 $cmenu-back-icon-margin: 8px !default;
 $cmenu-bigger-caret-font-size: $text-base !default;
 $cmenu-bigger-font-size: $text-base !default;
 $cmenu-bigger-li-height: 40px !default;
+$cmenu-bigger-li-line-height: 40px !default;
 $cmenu-bigger-li-padding: 0 16px !default;
 $cmenu-bigger-max-width: 280px !default;
 $cmenu-bigger-min-width: 112px !default;
@@ -50,6 +53,19 @@ $cmenu-ul-bgcolor: $flyout-bg-color !default;
 $cmenu-li-hover-outline: 0 solid $cmenu-li-border-color !default;
 $cmenu-caret-hover-color: $cmenu-caret-color !default;
 $cmenu-hover-icon-color: $cmenu-icon-color !default;
+$cmenu-border-none: 0 !default;
+$cmenu-padding-none: 0 !default;
+$cmenu-margin-none: 0 !default;
+$cmenu-scroll-margin-top: -12px !default;
+$cmanu-scroll-padding: 16px 0 !default;
+$cmenu-container-ul-font-family: $font-family !default;
+$cmenu-ul-height: 1px !default;
+$cmenu-height-none: 0 !default;
+$cmenu-vscroll-bar-height: 100% !default;
+$cmenu-scroll-nav-height: 16px !default;
+$cmenu-auto-height: auto !default;
+$cmenu-normal-line-height: normal !default;
+$cmenu-nrml-ul-padding: 4px 0 !default;
 
 /* stylelint-disable */
 .e-contextmenu-wrapper,

package/styles/context-menu/_bigger.scss

@@ -1,3 +1,5 @@
+@use 'ej2-base/styles/common/mixin' as *;
+@use './theme-variables' as *;
 @mixin bigger-rtl-blank-icon {
   padding-left: $cmenu-caret-blank-icon;
 
@@ -14,37 +16,36 @@
 
 @mixin bigger-li-size {
   height: $cmenu-bigger-li-height;
-  line-height: $cmenu-bigger-li-height;
+  line-height: $cmenu-bigger-li-line-height;
   @if $skin-name == 'fluent2' {
-    height: 40px;
-    line-height: 21px;
-    padding: 9px;
+    height: $cmenu-bigger-li-size-height;
+    line-height: $cmenu-bigger-li-size-line-height;
+    padding: $cmenu-bigger-li-size-padding;
   }
-
   &.e-menu-caret-icon {
     @if $skin-name == 'fluent2' {
-      padding: 9px 36px 9px 9px;
+      padding: $cmenu-caret-icon-padding;
     }
   }
 
   & .e-menu-icon {
     font-size: $cmenu-icon-bigger-font-size;
-    line-height: $cmenu-bigger-li-height;
+    line-height: $cmenu-bigger-li-line-height;
     @if $skin-name == 'tailwind' {
       margin-right: $cmenu-icon-bigger-margin-right;
     }
   }
 
   & .e-caret {
-    line-height: $cmenu-bigger-li-height;
+    line-height: $cmenu-bigger-li-line-height;
     @if $skin-name == 'fluent2' {
-      margin: 3px 0;
+      margin: $cmenu-bigger-caret-icon-margin;
     }
   }
 
   &.e-separator {
-    height: auto;
-    line-height: normal;
+    height: $cmenu-auto-height;
+    line-height: $cmenu-normal-line-height;
   }
 }
 
@@ -58,7 +59,7 @@
     max-width: $cmenu-bigger-max-width;
     min-width: $cmenu-bigger-min-width;
     @if $skin-name == 'bootstrap5' or $skin-name == 'bootstrap5.3' or  $skin-name == 'Material3' {
-      padding: 8px 0;
+      padding: $cmenu-bigger-ul-padding;
     }
 
     & .e-menu-item  {
@@ -66,14 +67,14 @@
 
       & .e-menu-icon {
         @if $skin-name == 'fluent2' {
-          margin-bottom: 2px;
+          margin-bottom: $cmenu-item-icon-margin-top;
         }
       }
 
       & .e-caret {
         font-size: $cmenu-bigger-caret-font-size;
         @if $skin-name == 'fluent2' {
-          padding: 0;
+          padding: $cmenu-padding-none;
         }
       }
     }
@@ -90,7 +91,7 @@
 
   .e-bigger .e-contextmenu-wrapper.e-rtl ul .e-menu-item.e-menu-caret-icon {
     @if $skin-name == 'fluent2' {
-      padding: 9px 9px 9px 36px;
+      padding: $cmenu-bigger-rtl-caret-icon-padding;
     }
   }
 
@@ -99,12 +100,12 @@
     @if $skin-name == 'tailwind3' {
       height: $cmenu-bigger-small-li-height;
       font-size: $cmenu-bigger-font-size;
-      line-height: $cmenu-bigger-small-li-height;
+      line-height: $cmenu-bigger-small-li-line-height;
       &.e-separator {
-        height: auto;
+        height: $cmenu-auto-height;
       }
       .e-menu-icon {
-        line-height: $cmenu-bigger-small-li-height;
+        line-height: $cmenu-bigger-small-li-line-height;
       }
     }
   }

package/styles/context-menu/_bootstrap-dark-definition.scss

@@ -1,8 +1,11 @@
+@use 'ej2-base/styles/definition/bootstrap-dark' as *;
+@forward 'ej2-base/styles/definition/bootstrap-dark';
 $cmenu-back-icon: '\e94b' !default;
 $cmenu-back-icon-margin: 12px !default;
 $cmenu-bigger-caret-font-size: 12px !default;
 $cmenu-bigger-font-size: 15px !default;
 $cmenu-bigger-li-height: 40px !default;
+$cmenu-bigger-li-line-height: 40px !default;
 $cmenu-bigger-max-width: 280px !default;
 $cmenu-bigger-min-width: 112px !default;
 $cmenu-caret-blank-icon: 14px !default;
@@ -48,3 +51,15 @@ $cmenu-hover-icon-color: $cmenu-icon-color !default;
 $cmenu-li-hover-outline-offset: 0 !default;
 $cmenu-li-selected-outline: 0 solid $cmenu-li-selection-bgcolor !default;
 $cmenu-li-selected-outline-offset: 0 !default;
+$cmenu-border-none: 0 !default;
+$cmenu-padding-none: 0 !default;
+$cmenu-margin-none: 0 !default;
+$cmenu-scroll-margin-top: -12px !default;
+$cmanu-scroll-padding: 16px 0 !default;
+$cmenu-container-ul-font-family: $font-family !default;
+$cmenu-ul-height: 1px !default;
+$cmenu-height-none: 0 !default;
+$cmenu-vscroll-bar-height: 100% !default;
+$cmenu-scroll-nav-height: 16px !default;
+$cmenu-auto-height: auto !default;
+$cmenu-normal-line-height: normal !default;

package/styles/context-menu/_bootstrap-definition.scss

@@ -1,8 +1,11 @@
+@use 'ej2-base/styles/definition/bootstrap' as *;
+@forward 'ej2-base/styles/definition/bootstrap';
 $cmenu-back-icon: '\e94b' !default;
 $cmenu-back-icon-margin: 12px !default;
 $cmenu-bigger-caret-font-size: 12px !default;
 $cmenu-bigger-font-size: 15px !default;
 $cmenu-bigger-li-height: 40px !default;
+$cmenu-bigger-li-line-height: 40px !default;
 $cmenu-bigger-max-width: 280px !default;
 $cmenu-bigger-min-width: 112px !default;
 $cmenu-caret-blank-icon: 14px !default;
@@ -48,3 +51,15 @@ $cmenu-ul-bigger-padding: 5px 0 !default;
 $cmenu-li-hover-outline: 0 solid $cmenu-li-border-color !default;
 $cmenu-caret-hover-color: $cmenu-caret-color !default;
 $cmenu-hover-icon-color: $cmenu-icon-color !default;
+$cmenu-border-none: 0 !default;
+$cmenu-padding-none: 0 !default;
+$cmenu-margin-none: 0 !default;
+$cmenu-scroll-margin-top: -12px !default;
+$cmanu-scroll-padding: 16px 0 !default;
+$cmenu-container-ul-font-family: $font-family !default;
+$cmenu-ul-height: 1px !default;
+$cmenu-height-none: 0 !default;
+$cmenu-vscroll-bar-height: 100% !default;
+$cmenu-scroll-nav-height: 16px !default;
+$cmenu-auto-height: auto !default;
+$cmenu-normal-line-height: normal !default;

package/styles/context-menu/_bootstrap4-definition.scss

@@ -1,10 +1,13 @@
 @use 'sass:color';
+@use 'ej2-base/styles/definition/bootstrap4' as *;
+@forward 'ej2-base/styles/definition/bootstrap4';
 
 $cmenu-back-icon: '\e728' !default;
 $cmenu-back-icon-margin: 12px !default;
 $cmenu-bigger-caret-font-size: 12px !default;
 $cmenu-bigger-font-size: 16px !default;
 $cmenu-bigger-li-height: 32px !default;
+$cmenu-bigger-li-line-height: 32px !default;
 $cmenu-bigger-max-width: 280px !default;
 $cmenu-bigger-min-width: 112px !default;
 $cmenu-caret-blank-icon: 14px !default;
@@ -50,3 +53,15 @@ $cmenu-ul-bigger-padding: 8px 0 !default;
 $cmenu-li-hover-outline: 0 solid $cmenu-li-border-color !default;
 $cmenu-caret-hover-color: $cmenu-caret-color !default;
 $cmenu-hover-icon-color: $cmenu-icon-color !default;
+$cmenu-border-none: 0 !default;
+$cmenu-padding-none: 0 !default;
+$cmenu-margin-none: 0 !default;
+$cmenu-scroll-margin-top: -12px !default;
+$cmanu-scroll-padding: 16px 0 !default;
+$cmenu-container-ul-font-family: $font-family !default;
+$cmenu-ul-height: 1px !default;
+$cmenu-height-none: 0 !default;
+$cmenu-vscroll-bar-height: 100% !default;
+$cmenu-scroll-nav-height: 16px !default;
+$cmenu-auto-height: auto !default;
+$cmenu-normal-line-height: normal !default;

package/styles/context-menu/_bootstrap5-dark-definition.scss

@@ -1 +1,69 @@
-@import './bootstrap5-definition.scss';
+@use 'ej2-base/styles/definition/bootstrap5-dark' as *;
+@forward 'ej2-base/styles/definition/bootstrap5-dark';
+$cmenu-back-icon: '\e977' !default;
+$cmenu-back-icon-margin: 8px !default;
+$cmenu-bigger-caret-font-size: $text-base !default;
+$cmenu-bigger-font-size: $text-base !default;
+$cmenu-bigger-li-height: 36px !default;
+$cmenu-bigger-li-line-height: 36px !default;
+$cmenu-bigger-li-padding: 0 16px !default;
+$cmenu-bigger-max-width: 280px !default;
+$cmenu-bigger-min-width: 112px !default;
+$cmenu-caret-blank-icon: 14px !default;
+$cmenu-caret-font-size: $text-base !default;
+$cmenu-caret-icon: '\e956' !default;
+$cmenu-caret-icon-rtl: '\e937' !default;
+$cmenu-caret-li-padding: 36px !default;
+$cmenu-caret-right: 7px !default;
+$cmenu-icon-margin-right: 8px !default;
+$cmenu-li-height: 30px !default;
+$cmenu-li-padding: 0 12px !default;
+$cmenu-li-right-padding: 12px !default;
+$cmenu-li-border-width: 1px !default;
+$cmenu-max-width: 240px !default;
+$cmenu-icon-font-size: $text-lg !default;
+$cmenu-icon-bigger-font-size: 22px !default;
+$cmenu-min-width: 120px !default;
+$cmenu-parent-ul-box-shadow: $shadow-lg !default;
+$cmenu-seperator-bigger-padding: 4px 0 !default;
+$cmenu-seperator-padding: 4px 0 !default;
+$cmenu-ul-border: 1px solid $border-light !default;
+$cmenu-ul-border-radius: 4px !default;
+$cmenu-ul-padding: 0 !default;
+$cmenu-ul-bigger-padding: 4px 0 !default;
+$cmenu-caret-color: $icon-color !default;
+$cmenu-color: $content-text-color !default;
+$cmenu-disable-text: rgba($content-text-color, .65) !default;
+$cmenu-font-size: $text-sm !default;
+$cmenu-font-weight: $font-weight-normal !default;
+$cmenu-li-bgcolor: $flyout-bg-color-hover !default;
+$cmenu-li-border-color: $border-light !default;
+$cmenu-li-border-style: solid !default;
+$cmenu-li-selection-bgcolor: $flyout-bg-color-pressed !default;
+$cmenu-li-selection-font-color: $content-text-color-focus !default;
+$cmenu-li-hover-outline-offset: 0 !default;
+$cmenu-li-selected-outline: 0 solid $cmenu-li-selection-bgcolor !default;
+$cmenu-li-selected-outline-offset: 0 !default;
+$cmenu-icon-color: $icon-color !default;
+$cmenu-icon-disabled-color: rgba($icon-color, .65) !default;
+$cmenu-selected-color: $flyout-text-color-pressed !default;
+$cmenu-sub-ul-box-shadow: $shadow-lg !default;
+$cmenu-ul-bgcolor: $flyout-bg-color !default;
+$cmenu-li-hover-outline: 0 solid $cmenu-li-border-color !default;
+$cmenu-caret-hover-color: $cmenu-caret-color !default;
+$cmenu-hover-icon-color: $cmenu-icon-color !default;
+$cmenu-disabled-item-opacity: .5 !default;
+$cmenu-border-none: 0 !default;
+$cmenu-padding-none: 0 !default;
+$cmenu-margin-none: 0 !default;
+$cmenu-scroll-margin-top: -12px !default;
+$cmanu-scroll-padding: 16px 0 !default;
+$cmenu-container-ul-font-family: $font-family !default;
+$cmenu-ul-height: 1px !default;
+$cmenu-height-none: 0 !default;
+$cmenu-vscroll-bar-height: 100% !default;
+$cmenu-scroll-nav-height: 16px !default;
+$cmenu-auto-height: auto !default;
+$cmenu-normal-line-height: normal !default;
+$cmenu-bigger-ul-padding: 8px 0 !default;
+$cmenu-nrml-ul-padding: 4px 0 !default;

package/styles/context-menu/_bootstrap5-definition.scss

@@ -1,8 +1,11 @@
+@use 'ej2-base/styles/definition/bootstrap5' as *;
+@forward 'ej2-base/styles/definition/bootstrap5';
 $cmenu-back-icon: '\e977' !default;
 $cmenu-back-icon-margin: 8px !default;
 $cmenu-bigger-caret-font-size: $text-base !default;
 $cmenu-bigger-font-size: $text-base !default;
 $cmenu-bigger-li-height: 36px !default;
+$cmenu-bigger-li-line-height: 36px !default;
 $cmenu-bigger-li-padding: 0 16px !default;
 $cmenu-bigger-max-width: 280px !default;
 $cmenu-bigger-min-width: 112px !default;
@@ -50,3 +53,17 @@ $cmenu-li-hover-outline: 0 solid $cmenu-li-border-color !default;
 $cmenu-caret-hover-color: $cmenu-caret-color !default;
 $cmenu-hover-icon-color: $cmenu-icon-color !default;
 $cmenu-disabled-item-opacity: .5 !default;
+$cmenu-border-none: 0 !default;
+$cmenu-padding-none: 0 !default;
+$cmenu-margin-none: 0 !default;
+$cmenu-scroll-margin-top: -12px !default;
+$cmanu-scroll-padding: 16px 0 !default;
+$cmenu-container-ul-font-family: $font-family !default;
+$cmenu-ul-height: 1px !default;
+$cmenu-height-none: 0 !default;
+$cmenu-vscroll-bar-height: 100% !default;
+$cmenu-scroll-nav-height: 16px !default;
+$cmenu-auto-height: auto !default;
+$cmenu-normal-line-height: normal !default;
+$cmenu-bigger-ul-padding: 8px 0 !default;
+$cmenu-nrml-ul-padding: 4px 0 !default;

package/styles/context-menu/_bootstrap5.3-definition.scss

@@ -1,8 +1,11 @@
+@use 'ej2-base/styles/definition/bootstrap5.3' as *;
+@forward 'ej2-base/styles/definition/bootstrap5.3';
 $cmenu-back-icon: '\e977' !default;
 $cmenu-back-icon-margin: 8px !default;
 $cmenu-bigger-caret-font-size: $text-sm !default;
 $cmenu-bigger-font-size: $text-base !default;
 $cmenu-bigger-li-height: 32px !default;
+$cmenu-bigger-li-line-height: 32px !default;
 $cmenu-bigger-li-padding: 0 16px !default;
 $cmenu-bigger-max-width: 280px !default;
 $cmenu-bigger-min-width: 112px !default;
@@ -25,7 +28,7 @@ $cmenu-parent-ul-box-shadow: $shadow-lg !default;
 $cmenu-seperator-bigger-padding: 4px 0 !default;
 $cmenu-seperator-padding: 4px 0 !default;
 $cmenu-ul-border: 1px solid $border-light !default;
-$cmenu-ul-border-radius: 4px !default;
+$cmenu-ul-border-radius: $radius-4 !default;
 $cmenu-ul-padding: 0 !default;
 $cmenu-ul-bigger-padding: 4px 0 !default;
 $cmenu-caret-color: $icon-color !default;
@@ -50,3 +53,17 @@ $cmenu-li-hover-outline: 0 solid $cmenu-li-border-color !default;
 $cmenu-caret-hover-color: $flyout-text-color-pressed !default;
 $cmenu-hover-icon-color: $icon-color-hover !default;
 $cmenu-disabled-item-opacity: .5 !default;
+$cmenu-border-none: 0 !default;
+$cmenu-padding-none: 0 !default;
+$cmenu-margin-none: 0 !default;
+$cmenu-scroll-margin-top: -12px !default;
+$cmanu-scroll-padding: 16px 0 !default;
+$cmenu-container-ul-font-family: $font-family !default;
+$cmenu-ul-height: 1px !default;
+$cmenu-height-none: 0 !default;
+$cmenu-vscroll-bar-height: 100% !default;
+$cmenu-scroll-nav-height: 16px !default;
+$cmenu-auto-height: auto !default;
+$cmenu-normal-line-height: normal !default;
+$cmenu-bigger-ul-padding: 8px 0 !default;
+$cmenu-nrml-ul-padding: 4px 0 !default;

package/styles/context-menu/_fabric-dark-definition.scss

@@ -1,8 +1,11 @@
+@use 'ej2-base/styles/definition/fabric-dark' as *;
+@forward 'ej2-base/styles/definition/fabric-dark';
 $cmenu-back-icon: '\e962' !default;
 $cmenu-back-icon-margin: 12px !default;
 $cmenu-bigger-caret-font-size: 12px !default;
 $cmenu-bigger-font-size: 15px !default;
 $cmenu-bigger-li-height: 48px !default;
+$cmenu-bigger-li-line-height: 48px !default;
 $cmenu-bigger-max-width: 280px !default;
 $cmenu-bigger-min-width: 112px !default;
 $cmenu-caret-blank-icon: 10px !default;
@@ -48,3 +51,15 @@ $cmenu-hover-icon-color: $cmenu-icon-color !default;
 $cmenu-li-hover-outline-offset: 0 !default;
 $cmenu-li-selected-outline: 0 solid $cmenu-li-selection-bgcolor !default;
 $cmenu-li-selected-outline-offset: 0 !default;
+$cmenu-border-none: 0 !default;
+$cmenu-padding-none: 0 !default;
+$cmenu-margin-none: 0 !default;
+$cmenu-scroll-margin-top: -12px !default;
+$cmanu-scroll-padding: 16px 0 !default;
+$cmenu-container-ul-font-family: $font-family !default;
+$cmenu-ul-height: 1px !default;
+$cmenu-height-none: 0 !default;
+$cmenu-vscroll-bar-height: 100% !default;
+$cmenu-scroll-nav-height: 16px !default;
+$cmenu-auto-height: auto !default;
+$cmenu-normal-line-height: normal !default;

package/styles/context-menu/_fabric-definition.scss

@@ -1,8 +1,11 @@
+@use 'ej2-base/styles/definition/fabric' as *;
+@forward 'ej2-base/styles/definition/fabric';
 $cmenu-back-icon: '\e962' !default;
 $cmenu-back-icon-margin: 12px !default;
 $cmenu-bigger-caret-font-size: 12px !default;
 $cmenu-bigger-font-size: 15px !default;
 $cmenu-bigger-li-height: 48px !default;
+$cmenu-bigger-li-line-height: 48px !default;
 $cmenu-bigger-max-width: 280px !default;
 $cmenu-bigger-min-width: 112px !default;
 $cmenu-caret-blank-icon: 10px !default;
@@ -48,3 +51,15 @@ $cmenu-ul-bigger-padding: 0 !default;
 $cmenu-li-hover-outline: 0 solid $cmenu-li-border-color !default;
 $cmenu-caret-hover-color: $cmenu-caret-color !default;
 $cmenu-hover-icon-color: $cmenu-icon-color !default;
+$cmenu-border-none: 0 !default;
+$cmenu-padding-none: 0 !default;
+$cmenu-margin-none: 0 !default;
+$cmenu-scroll-margin-top: -12px !default;
+$cmanu-scroll-padding: 16px 0 !default;
+$cmenu-container-ul-font-family: $font-family !default;
+$cmenu-ul-height: 1px !default;
+$cmenu-height-none: 0 !default;
+$cmenu-vscroll-bar-height: 100% !default;
+$cmenu-scroll-nav-height: 16px !default;
+$cmenu-auto-height: auto !default;
+$cmenu-normal-line-height: normal !default;