@syncfusion/ej2-angular-navigations 20.1.60 → 20.2.36

package/styles/carousel/material-dark.css

@@ -34,41 +34,50 @@
   position: relative;
   width: 100%;
 }
-.e-carousel .e-carousel-items:not(.e-carousel-custom-animation) .e-carousel-item {
+.e-carousel.e-carousel-slide-animation .e-carousel-item {
   backface-visibility: hidden;
   display: none;
   float: left;
   height: 100%;
   margin-right: -100%;
   position: relative;
-  width: 100%;
-}
-.e-carousel .e-carousel-items:not(.e-carousel-custom-animation) .e-carousel-item.e-active {
-  display: block;
-}
-.e-carousel .e-carousel-items.e-carousel-slide-animation .e-carousel-item {
   transition: transform 0.6s ease-in-out;
+  width: 100%;
 }
-.e-carousel .e-carousel-items.e-carousel-slide-animation .e-carousel-item.e-prev, .e-carousel .e-carousel-items.e-carousel-slide-animation .e-carousel-item.e-next, .e-carousel .e-carousel-items.e-carousel-slide-animation .e-carousel-item.e-active {
+.e-carousel.e-carousel-slide-animation .e-carousel-item.e-prev, .e-carousel.e-carousel-slide-animation .e-carousel-item.e-next, .e-carousel.e-carousel-slide-animation .e-carousel-item.e-active {
   display: block;
 }
-.e-carousel .e-carousel-items.e-carousel-slide-animation .e-carousel-item.e-next:not(.e-transition-start), .e-carousel .e-carousel-items.e-carousel-slide-animation .e-carousel-item.e-active.e-transition-end {
+.e-carousel.e-carousel-slide-animation .e-carousel-item.e-next:not(.e-transition-start), .e-carousel.e-carousel-slide-animation .e-carousel-item.e-active.e-transition-end {
   transform: translateX(100%);
 }
-.e-carousel .e-carousel-items.e-carousel-slide-animation .e-carousel-item.e-prev:not(.e-transition-end), .e-carousel .e-carousel-items.e-carousel-slide-animation .e-carousel-item.e-active.e-transition-start {
+.e-carousel.e-carousel-slide-animation .e-carousel-item.e-prev:not(.e-transition-end), .e-carousel.e-carousel-slide-animation .e-carousel-item.e-active.e-transition-start {
   transform: translateX(-100%);
 }
-.e-carousel .e-carousel-items.e-carousel-fade-animation .e-carousel-item {
+.e-carousel.e-carousel-fade-animation .e-carousel-item {
+  backface-visibility: hidden;
   display: block;
+  float: left;
+  height: 100%;
+  margin-right: -100%;
   opacity: 0;
+  position: relative;
   transition: opacity 0.6s ease-in-out;
+  width: 100%;
   z-index: 0;
 }
-.e-carousel .e-carousel-items.e-carousel-fade-animation .e-carousel-item.e-active {
+.e-carousel.e-carousel-fade-animation .e-carousel-item.e-active {
   opacity: 1;
   z-index: 1;
 }
-.e-carousel .e-carousel-items.e-carousel-custom-animation .e-carousel-item {
+.e-carousel.e-carousel-animation-none .e-carousel-item {
+  display: none;
+  height: 100%;
+  width: 100%;
+}
+.e-carousel.e-carousel-animation-none .e-carousel-item.e-active {
+  display: block;
+}
+.e-carousel.e-carousel-custom-animation .e-carousel-item {
   display: block;
   height: 100%;
   left: 0;
@@ -78,7 +87,7 @@
   top: 0;
   width: 100%;
 }
-.e-carousel .e-carousel-items.e-carousel-custom-animation .e-carousel-item.e-active {
+.e-carousel.e-carousel-custom-animation .e-carousel-item.e-active {
   opacity: 1;
   pointer-events: visible;
 }

package/styles/carousel/material-dark.scss

@@ -1 +1,5 @@
-@import 'ej2-navigations/styles/carousel/material-dark.scss';
+@import 'ej2-base/styles/material-dark-definition.scss';
+@import 'ej2-buttons/styles/button/material-dark-definition.scss';
+@import 'material-dark-definition.scss';
+@import 'icons/material-dark.scss';
+@import 'all.scss';

package/styles/carousel/material.css

@@ -34,41 +34,50 @@
   position: relative;
   width: 100%;
 }
-.e-carousel .e-carousel-items:not(.e-carousel-custom-animation) .e-carousel-item {
+.e-carousel.e-carousel-slide-animation .e-carousel-item {
   backface-visibility: hidden;
   display: none;
   float: left;
   height: 100%;
   margin-right: -100%;
   position: relative;
-  width: 100%;
-}
-.e-carousel .e-carousel-items:not(.e-carousel-custom-animation) .e-carousel-item.e-active {
-  display: block;
-}
-.e-carousel .e-carousel-items.e-carousel-slide-animation .e-carousel-item {
   transition: transform 0.6s ease-in-out;
+  width: 100%;
 }
-.e-carousel .e-carousel-items.e-carousel-slide-animation .e-carousel-item.e-prev, .e-carousel .e-carousel-items.e-carousel-slide-animation .e-carousel-item.e-next, .e-carousel .e-carousel-items.e-carousel-slide-animation .e-carousel-item.e-active {
+.e-carousel.e-carousel-slide-animation .e-carousel-item.e-prev, .e-carousel.e-carousel-slide-animation .e-carousel-item.e-next, .e-carousel.e-carousel-slide-animation .e-carousel-item.e-active {
   display: block;
 }
-.e-carousel .e-carousel-items.e-carousel-slide-animation .e-carousel-item.e-next:not(.e-transition-start), .e-carousel .e-carousel-items.e-carousel-slide-animation .e-carousel-item.e-active.e-transition-end {
+.e-carousel.e-carousel-slide-animation .e-carousel-item.e-next:not(.e-transition-start), .e-carousel.e-carousel-slide-animation .e-carousel-item.e-active.e-transition-end {
   transform: translateX(100%);
 }
-.e-carousel .e-carousel-items.e-carousel-slide-animation .e-carousel-item.e-prev:not(.e-transition-end), .e-carousel .e-carousel-items.e-carousel-slide-animation .e-carousel-item.e-active.e-transition-start {
+.e-carousel.e-carousel-slide-animation .e-carousel-item.e-prev:not(.e-transition-end), .e-carousel.e-carousel-slide-animation .e-carousel-item.e-active.e-transition-start {
   transform: translateX(-100%);
 }
-.e-carousel .e-carousel-items.e-carousel-fade-animation .e-carousel-item {
+.e-carousel.e-carousel-fade-animation .e-carousel-item {
+  backface-visibility: hidden;
   display: block;
+  float: left;
+  height: 100%;
+  margin-right: -100%;
   opacity: 0;
+  position: relative;
   transition: opacity 0.6s ease-in-out;
+  width: 100%;
   z-index: 0;
 }
-.e-carousel .e-carousel-items.e-carousel-fade-animation .e-carousel-item.e-active {
+.e-carousel.e-carousel-fade-animation .e-carousel-item.e-active {
   opacity: 1;
   z-index: 1;
 }
-.e-carousel .e-carousel-items.e-carousel-custom-animation .e-carousel-item {
+.e-carousel.e-carousel-animation-none .e-carousel-item {
+  display: none;
+  height: 100%;
+  width: 100%;
+}
+.e-carousel.e-carousel-animation-none .e-carousel-item.e-active {
+  display: block;
+}
+.e-carousel.e-carousel-custom-animation .e-carousel-item {
   display: block;
   height: 100%;
   left: 0;
@@ -78,7 +87,7 @@
   top: 0;
   width: 100%;
 }
-.e-carousel .e-carousel-items.e-carousel-custom-animation .e-carousel-item.e-active {
+.e-carousel.e-carousel-custom-animation .e-carousel-item.e-active {
   opacity: 1;
   pointer-events: visible;
 }

package/styles/carousel/material.scss

@@ -1 +1,5 @@
-@import 'ej2-navigations/styles/carousel/material.scss';
+@import 'ej2-base/styles/material-definition.scss';
+@import 'ej2-buttons/styles/button/material-definition.scss';
+@import 'material-definition.scss';
+@import 'icons/material.scss';
+@import 'all.scss';

package/styles/carousel/tailwind-dark.css

@@ -34,41 +34,50 @@
   position: relative;
   width: 100%;
 }
-.e-carousel .e-carousel-items:not(.e-carousel-custom-animation) .e-carousel-item {
+.e-carousel.e-carousel-slide-animation .e-carousel-item {
   backface-visibility: hidden;
   display: none;
   float: left;
   height: 100%;
   margin-right: -100%;
   position: relative;
-  width: 100%;
-}
-.e-carousel .e-carousel-items:not(.e-carousel-custom-animation) .e-carousel-item.e-active {
-  display: block;
-}
-.e-carousel .e-carousel-items.e-carousel-slide-animation .e-carousel-item {
   transition: transform 0.6s ease-in-out;
+  width: 100%;
 }
-.e-carousel .e-carousel-items.e-carousel-slide-animation .e-carousel-item.e-prev, .e-carousel .e-carousel-items.e-carousel-slide-animation .e-carousel-item.e-next, .e-carousel .e-carousel-items.e-carousel-slide-animation .e-carousel-item.e-active {
+.e-carousel.e-carousel-slide-animation .e-carousel-item.e-prev, .e-carousel.e-carousel-slide-animation .e-carousel-item.e-next, .e-carousel.e-carousel-slide-animation .e-carousel-item.e-active {
   display: block;
 }
-.e-carousel .e-carousel-items.e-carousel-slide-animation .e-carousel-item.e-next:not(.e-transition-start), .e-carousel .e-carousel-items.e-carousel-slide-animation .e-carousel-item.e-active.e-transition-end {
+.e-carousel.e-carousel-slide-animation .e-carousel-item.e-next:not(.e-transition-start), .e-carousel.e-carousel-slide-animation .e-carousel-item.e-active.e-transition-end {
   transform: translateX(100%);
 }
-.e-carousel .e-carousel-items.e-carousel-slide-animation .e-carousel-item.e-prev:not(.e-transition-end), .e-carousel .e-carousel-items.e-carousel-slide-animation .e-carousel-item.e-active.e-transition-start {
+.e-carousel.e-carousel-slide-animation .e-carousel-item.e-prev:not(.e-transition-end), .e-carousel.e-carousel-slide-animation .e-carousel-item.e-active.e-transition-start {
   transform: translateX(-100%);
 }
-.e-carousel .e-carousel-items.e-carousel-fade-animation .e-carousel-item {
+.e-carousel.e-carousel-fade-animation .e-carousel-item {
+  backface-visibility: hidden;
   display: block;
+  float: left;
+  height: 100%;
+  margin-right: -100%;
   opacity: 0;
+  position: relative;
   transition: opacity 0.6s ease-in-out;
+  width: 100%;
   z-index: 0;
 }
-.e-carousel .e-carousel-items.e-carousel-fade-animation .e-carousel-item.e-active {
+.e-carousel.e-carousel-fade-animation .e-carousel-item.e-active {
   opacity: 1;
   z-index: 1;
 }
-.e-carousel .e-carousel-items.e-carousel-custom-animation .e-carousel-item {
+.e-carousel.e-carousel-animation-none .e-carousel-item {
+  display: none;
+  height: 100%;
+  width: 100%;
+}
+.e-carousel.e-carousel-animation-none .e-carousel-item.e-active {
+  display: block;
+}
+.e-carousel.e-carousel-custom-animation .e-carousel-item {
   display: block;
   height: 100%;
   left: 0;
@@ -78,7 +87,7 @@
   top: 0;
   width: 100%;
 }
-.e-carousel .e-carousel-items.e-carousel-custom-animation .e-carousel-item.e-active {
+.e-carousel.e-carousel-custom-animation .e-carousel-item.e-active {
   opacity: 1;
   pointer-events: visible;
 }

package/styles/carousel/tailwind-dark.scss

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

package/styles/carousel/tailwind.css

@@ -34,41 +34,50 @@
   position: relative;
   width: 100%;
 }
-.e-carousel .e-carousel-items:not(.e-carousel-custom-animation) .e-carousel-item {
+.e-carousel.e-carousel-slide-animation .e-carousel-item {
   backface-visibility: hidden;
   display: none;
   float: left;
   height: 100%;
   margin-right: -100%;
   position: relative;
-  width: 100%;
-}
-.e-carousel .e-carousel-items:not(.e-carousel-custom-animation) .e-carousel-item.e-active {
-  display: block;
-}
-.e-carousel .e-carousel-items.e-carousel-slide-animation .e-carousel-item {
   transition: transform 0.6s ease-in-out;
+  width: 100%;
 }
-.e-carousel .e-carousel-items.e-carousel-slide-animation .e-carousel-item.e-prev, .e-carousel .e-carousel-items.e-carousel-slide-animation .e-carousel-item.e-next, .e-carousel .e-carousel-items.e-carousel-slide-animation .e-carousel-item.e-active {
+.e-carousel.e-carousel-slide-animation .e-carousel-item.e-prev, .e-carousel.e-carousel-slide-animation .e-carousel-item.e-next, .e-carousel.e-carousel-slide-animation .e-carousel-item.e-active {
   display: block;
 }
-.e-carousel .e-carousel-items.e-carousel-slide-animation .e-carousel-item.e-next:not(.e-transition-start), .e-carousel .e-carousel-items.e-carousel-slide-animation .e-carousel-item.e-active.e-transition-end {
+.e-carousel.e-carousel-slide-animation .e-carousel-item.e-next:not(.e-transition-start), .e-carousel.e-carousel-slide-animation .e-carousel-item.e-active.e-transition-end {
   transform: translateX(100%);
 }
-.e-carousel .e-carousel-items.e-carousel-slide-animation .e-carousel-item.e-prev:not(.e-transition-end), .e-carousel .e-carousel-items.e-carousel-slide-animation .e-carousel-item.e-active.e-transition-start {
+.e-carousel.e-carousel-slide-animation .e-carousel-item.e-prev:not(.e-transition-end), .e-carousel.e-carousel-slide-animation .e-carousel-item.e-active.e-transition-start {
   transform: translateX(-100%);
 }
-.e-carousel .e-carousel-items.e-carousel-fade-animation .e-carousel-item {
+.e-carousel.e-carousel-fade-animation .e-carousel-item {
+  backface-visibility: hidden;
   display: block;
+  float: left;
+  height: 100%;
+  margin-right: -100%;
   opacity: 0;
+  position: relative;
   transition: opacity 0.6s ease-in-out;
+  width: 100%;
   z-index: 0;
 }
-.e-carousel .e-carousel-items.e-carousel-fade-animation .e-carousel-item.e-active {
+.e-carousel.e-carousel-fade-animation .e-carousel-item.e-active {
   opacity: 1;
   z-index: 1;
 }
-.e-carousel .e-carousel-items.e-carousel-custom-animation .e-carousel-item {
+.e-carousel.e-carousel-animation-none .e-carousel-item {
+  display: none;
+  height: 100%;
+  width: 100%;
+}
+.e-carousel.e-carousel-animation-none .e-carousel-item.e-active {
+  display: block;
+}
+.e-carousel.e-carousel-custom-animation .e-carousel-item {
   display: block;
   height: 100%;
   left: 0;
@@ -78,7 +87,7 @@
   top: 0;
   width: 100%;
 }
-.e-carousel .e-carousel-items.e-carousel-custom-animation .e-carousel-item.e-active {
+.e-carousel.e-carousel-custom-animation .e-carousel-item.e-active {
   opacity: 1;
   pointer-events: visible;
 }

package/styles/carousel/tailwind.scss

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

package/styles/context-menu/_all.scss

@@ -0,0 +1,2 @@
+@import 'layout.scss';
+@import 'theme.scss';

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

@@ -0,0 +1,52 @@
+//default 
+$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-max-width: 280px !default;
+$cmenu-bigger-min-width: 112px !default;
+$cmenu-caret-blank-icon: 14px !default;
+$cmenu-caret-font-size: 12px !default;
+$cmenu-caret-color: $grey-dark-font !default;
+$cmenu-caret-icon: '\e207' !default;
+$cmenu-caret-icon-rtl: '\e990' !default;
+$cmenu-caret-li-padding: 36px !default;
+$cmenu-caret-right: 7px !default;
+$cmenu-color: $grey-dark-font !default;
+$cmenu-disable-text: rgba($grey-dark-font, .65) !default;
+$cmenu-font-size: 14px !default;
+$cmenu-font-weight: normal !default;
+$cmenu-icon-margin-right: 12px !default;
+$cmenu-li-bgcolor: $grey-88 !default;
+$cmenu-li-border-color: $grey-99 !default;
+$cmenu-li-border-style: solid !default;
+$cmenu-li-border-width: 1px !default;
+$cmenu-li-height: 26px !default;
+$cmenu-li-padding: 0 14px !default;
+$cmenu-li-right-padding: 14px !default;
+$cmenu-li-selection-bgcolor: $grey-99 !default;
+$cmenu-li-selection-font-color: $grey-dark-font !default;
+$cmenu-max-width: 240px !default;
+$cmenu-icon-color: $grey-dark-font !default;
+$cmenu-icon-disabled-color: rgba($grey-dark-font, .65) !default;
+$cmenu-icon-font-size: 16px !default;
+$cmenu-icon-bigger-font-size: 16px !default;
+$cmenu-min-width: 120px !default;
+$cmenu-parent-ul-box-shadow: 0 5px 15px rgba($base-font, .5) !default;
+$cmenu-seperator-bigger-padding: 5px 0 !default;
+$cmenu-seperator-padding: 3px 0 !default;
+$cmenu-selected-color: $grey-dark-font !default;
+$cmenu-sub-ul-box-shadow: 0 5px 15px rgba($base-font, .5) !default;
+$cmenu-ul-bgcolor: $grey !default;
+$cmenu-ul-border: 1px solid $grey-99 !default;
+$cmenu-ul-border-radius: 4px !default;
+$cmenu-ul-padding: 0 !default;
+$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-li-hover-outline-offset: 0 !default;
+$cmenu-li-selected-outline: 0 solid $cmenu-li-selection-bgcolor !default;
+$cmenu-li-selected-outline-offset: 0 !default;
+//enddefault

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

@@ -0,0 +1,50 @@
+$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-max-width: 280px !default;
+$cmenu-bigger-min-width: 112px !default;
+$cmenu-caret-blank-icon: 14px !default;
+$cmenu-caret-font-size: 12px !default;
+$cmenu-caret-color: $grey-light-font !default;
+$cmenu-caret-icon: '\e207' !default;
+$cmenu-caret-icon-rtl: '\e990' !default;
+$cmenu-caret-li-padding: 36px !default;
+$cmenu-caret-right: 7px !default;
+$cmenu-color: $grey !default;
+$cmenu-disable-text: rgba($grey, .65) !default;
+$cmenu-font-size: 14px !default;
+$cmenu-font-weight: normal !default;
+$cmenu-icon-margin-right: 12px !default;
+$cmenu-li-bgcolor: $grey-f5 !default;
+$cmenu-li-border-color: $grey-e6 !default;
+$cmenu-li-border-style: solid !default;
+$cmenu-li-border-width: 1px !default;
+$cmenu-li-height: 26px !default;
+$cmenu-li-padding: 0 14px !default;
+$cmenu-li-right-padding: 14px !default;
+$cmenu-li-selection-bgcolor: $grey-e6 !default;
+$cmenu-li-selection-font-color: $grey !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-max-width: 240px !default;
+$cmenu-icon-color: $grey-light-font !default;
+$cmenu-icon-disabled-color: rgba($grey-light-font, .65) !default;
+$cmenu-icon-font-size: 16px !default;
+$cmenu-icon-bigger-font-size: 16px !default;
+$cmenu-min-width: 120px !default;
+$cmenu-parent-ul-box-shadow: 0 6px 12px rgba($grey-base, .175) !default;
+$cmenu-seperator-bigger-padding: 5px 0 !default;
+$cmenu-seperator-padding: 3px 0 !default;
+$cmenu-selected-color: $grey !default;
+$cmenu-sub-ul-box-shadow: 0 6px 12px rgba($grey-base, .175) !default;
+$cmenu-ul-bgcolor: $grey-white !default;
+$cmenu-ul-border: 1px solid $grey-cc !default;
+$cmenu-ul-border-radius: 4px !default;
+$cmenu-ul-padding: 0 !default;
+$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;

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

@@ -0,0 +1,50 @@
+$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-max-width: 280px !default;
+$cmenu-bigger-min-width: 112px !default;
+$cmenu-caret-blank-icon: 14px !default;
+$cmenu-caret-font-size: 9px !default;
+$cmenu-caret-color: $gray-900 !default;
+$cmenu-caret-icon: '\e799' !default;
+$cmenu-caret-icon-rtl: '\e78c' !default;
+$cmenu-caret-li-padding: 36px !default;
+$cmenu-caret-right: 14px !default;
+$cmenu-color: $gray-900 !default;
+$cmenu-disable-text: $gray-600 !default;
+$cmenu-font-size: 14px !default;
+$cmenu-font-weight: normal !default;
+$cmenu-icon-margin-right: 8px !default;
+$cmenu-li-bgcolor: darken($gray-100, 2%)  !default;
+$cmenu-li-border-color: $gray-200 !default;
+$cmenu-li-border-style: solid !default;
+$cmenu-li-border-width: 1px !default;
+$cmenu-li-height: 26px !default;
+$cmenu-li-padding: 0 20px !default;
+$cmenu-li-right-padding: 20px !default;
+$cmenu-li-selection-bgcolor: $primary !default;
+$cmenu-li-selection-font-color: $gray-900 !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-max-width: 240px !default;
+$cmenu-icon-color: $gray-700 !default;
+$cmenu-icon-disabled-color: $gray-600 !default;
+$cmenu-icon-font-size: 14px !default;
+$cmenu-icon-bigger-font-size: 16px !default;
+$cmenu-min-width: 120px !default;
+$cmenu-parent-ul-box-shadow: none !default;
+$cmenu-seperator-bigger-padding: 5px 0 !default;
+$cmenu-seperator-padding: 6px 0 !default;
+$cmenu-selected-color: $white !default;
+$cmenu-sub-ul-box-shadow: none !default;
+$cmenu-ul-bgcolor: $content-popup-bg !default;
+$cmenu-ul-border: 1px solid rgba($black, .15) !default;
+$cmenu-ul-border-radius: 4px !default;
+$cmenu-ul-padding: 0 !default;
+$cmenu-ul-bigger-padding: 8px 0 !default;
+$cmenu-li-hover-outline: 0 solid $cmenu-li-border-color !default;
+$cmenu-caret-hover-color: $primary-font !default;
+$cmenu-hover-icon-color: $primary-font !default;

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

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

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

@@ -0,0 +1,52 @@
+//layout variables
+$cmenu-back-icon: '\e977' !default;
+$cmenu-back-icon-margin: 8px !default;
+$cmenu-bigger-caret-font-size: 16px !default;
+$cmenu-bigger-font-size: $text-base !default;
+$cmenu-bigger-li-height: 32px !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: 16px !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: 18px !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: $flyout-text-color-pressed !default;
+$cmenu-hover-icon-color: $flyout-text-color-pressed !default;

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

@@ -0,0 +1,52 @@
+//default 
+$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-max-width: 280px !default;
+$cmenu-bigger-min-width: 112px !default;
+$cmenu-caret-blank-icon: 10px !default;
+$cmenu-caret-font-size: 12px !default;
+$cmenu-caret-color: $neutral-light-font !default;
+$cmenu-caret-icon: '\e219' !default;
+$cmenu-caret-icon-rtl: '\e98f' !default;
+$cmenu-caret-li-padding: 36px !default;
+$cmenu-caret-right: 5px !default;
+$cmenu-color: $neutral-light-font !default;
+$cmenu-disable-text: $neutral-tertiary-alt !default;
+$cmenu-font-size: 14px !default;
+$cmenu-font-weight: normal !default;
+$cmenu-icon-margin-right: 10px !default;
+$cmenu-li-bgcolor: $neutral-light !default;
+$cmenu-li-border-color:  $neutral-light !default;
+$cmenu-li-border-style: solid !default;
+$cmenu-li-border-width: 1px !default;
+$cmenu-li-height: 36px !default;
+$cmenu-li-padding: 0 10px !default;
+$cmenu-li-right-padding: 10px !default;
+$cmenu-li-selection-bgcolor: $neutral-quintenary !default;
+$cmenu-li-selection-font-color: $neutral-light-fontalt !default;
+$cmenu-max-width: 240px !default;
+$cmenu-icon-color: $neutral-light-font !default;
+$cmenu-icon-disabled-color: $neutral-tertiary-alt !default;
+$cmenu-icon-font-size: 16px !default;
+$cmenu-icon-bigger-font-size: 18px !default;
+$cmenu-min-width: 120px !default;
+$cmenu-parent-ul-box-shadow:  0 3px 8px rgba($shadow, .26) !default;
+$cmenu-selected-color: $neutral-light-fontalt !default;
+$cmenu-seperator-padding: 0 !default;
+$cmenu-seperator-bigger-padding: 0 !default;
+$cmenu-sub-ul-box-shadow: 0 3px 8px 0 rgba($shadow, .26) !default;
+$cmenu-ul-bgcolor: $neutral-lighter-alt !default;
+$cmenu-ul-border: 1px solid $neutral-light !default;
+$cmenu-ul-border-radius: 0 !default;
+$cmenu-ul-padding: 0 !default;
+$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-li-hover-outline-offset: 0 !default;
+$cmenu-li-selected-outline: 0 solid $cmenu-li-selection-bgcolor !default;
+$cmenu-li-selected-outline-offset: 0 !default;
+//enddefault

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

@@ -0,0 +1,50 @@
+$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-max-width: 280px !default;
+$cmenu-bigger-min-width: 112px !default;
+$cmenu-caret-blank-icon: 10px !default;
+$cmenu-caret-font-size: 12px !default;
+$cmenu-caret-color:  $theme-light-font !default;
+$cmenu-caret-icon: '\e219' !default;
+$cmenu-caret-icon-rtl: '\e98f' !default;
+$cmenu-caret-li-padding: 36px !default;
+$cmenu-caret-right: 5px !default;
+$cmenu-color: $neutral-light-font !default;
+$cmenu-disable-text: $neutral-tertiary-alt !default;
+$cmenu-font-size: 14px !default;
+$cmenu-font-weight: normal !default;
+$cmenu-icon-margin-right: 10px !default;
+$cmenu-li-bgcolor: $neutral-lighter !default;
+$cmenu-li-border-color:  $neutral-light !default;
+$cmenu-li-border-style: solid !default;
+$cmenu-li-border-width: 1px !default;
+$cmenu-li-height: 36px !default;
+$cmenu-li-padding: 0 10px !default;
+$cmenu-li-right-padding: 10px !default;
+$cmenu-li-selection-bgcolor:  $neutral-lighter !default;
+$cmenu-li-selection-font-color: $theme-light-font !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-max-width: 240px !default;
+$cmenu-icon-color: $neutral-light-font !default;
+$cmenu-icon-disabled-color: $neutral-tertiary-alt !default;
+$cmenu-icon-font-size: 16px !default;
+$cmenu-icon-bigger-font-size: 18px !default;
+$cmenu-min-width: 120px !default;
+$cmenu-parent-ul-box-shadow:  0 0 10px 0 rgba($neutral-black, .2) !default;
+$cmenu-selected-color: $neutral-light-fontalt !default;
+$cmenu-seperator-padding: 0 !default;
+$cmenu-seperator-bigger-padding: 0 !default;
+$cmenu-sub-ul-box-shadow: 0 0 10px 0 rgba($neutral-black, .2) !default;
+$cmenu-ul-bgcolor: $neutral-white !default;
+$cmenu-ul-border: 1px solid $neutral-light !default;
+$cmenu-ul-border-radius: 0 !default;
+$cmenu-ul-padding: 0 !default;
+$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;

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

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