@syncfusion/ej2-navigations 19.3.53 → 19.4.38

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

@@ -0,0 +1,52 @@
+//layout variables
+$cmenu-back-icon: '\e7e4' !default;
+$cmenu-back-icon-margin: 8px !default;
+$cmenu-bigger-caret-font-size: 18px !default;
+$cmenu-bigger-font-size: $text-base !default;
+$cmenu-bigger-li-height: 40px !default;
+$cmenu-bigger-li-padding: 0 16px !default;
+$cmenu-bigger-max-width: 280px !default;
+$cmenu-bigger-min-width: 112px !default;
+$cmenu-caret-blank-icon: $text-sm !default;
+$cmenu-caret-font-size: 16px !default;
+$cmenu-caret-icon: '\e7c2' !default;
+$cmenu-caret-icon-rtl: '\e7c1' !default;
+$cmenu-caret-li-padding: 36px !default;
+$cmenu-caret-right: 7px !default;
+$cmenu-icon-margin-right: 8px !default;
+$cmenu-li-height: 36px !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-sm !default;
+$cmenu-icon-bigger-font-size: $text-lg !default;
+$cmenu-min-width: 120px !default;
+$cmenu-parent-ul-box-shadow: $shadow-md !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: $primary-outline !default;
+$cmenu-color: $content-text-color !default;
+$cmenu-disable-text: $flyout-text-color-disabled !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-focus !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: $primary-outline !default;
+$cmenu-icon-disabled-color: $primary-outline !default;
+$cmenu-selected-color: $cmenu-li-selection-font-color !default;
+$cmenu-sub-ul-box-shadow: $shadow-md !default;
+$cmenu-ul-bgcolor: $flyout-bg-color !default;
+$cmenu-li-hover-outline: 0 solid $cmenu-li-border-color !default;
+$cmenu-caret-hover-color: $primary-outline !default;
+$cmenu-hover-icon-color: $primary-outline !default;

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

@@ -41,7 +41,7 @@ $cmenu-sub-ul-box-shadow: 0 8px 10px 0 rgba($grey-black, .24) !default;
 $cmenu-ul-bgcolor: $grey-800 !default;
 $cmenu-ul-border-radius: 0 !default;
 $cmenu-ul-border: none !default;
-$cmenu-ul-padding: 8px 0 !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: $grey-dark-font !default;

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

@@ -43,7 +43,7 @@ $cmenu-sub-ul-box-shadow: 0 5px 5px -3px rgba($grey-black, .2), 0 8px 10px 1px r
 $cmenu-ul-bgcolor: $grey-white !default;
 $cmenu-ul-border-radius: 0 !default;
 $cmenu-ul-border: none !default;
-$cmenu-ul-padding: 8px 0 !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: $cmenu-caret-color !default;

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

@@ -27,7 +27,7 @@ $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: 4px 0 !default;
+$cmenu-ul-padding: 0 !default;
 $cmenu-ul-bigger-padding: 4px 0 !default;
 $cmenu-caret-color: $content-text-color-focus !default;
 $cmenu-color: $content-text-color !default;

package/styles/context-menu/bootstrap-dark.css

@@ -27,7 +27,7 @@
       -ms-user-select: none;
           user-select: none;
   font-size: 14px;
-  padding: 3px 0;
+  padding: 0;
   border: 1px solid #505050;
   border-radius: 4px;
   box-shadow: 0 5px 15px rgba(0, 0, 0, 0.5);

package/styles/context-menu/bootstrap.css

@@ -27,7 +27,7 @@
       -ms-user-select: none;
           user-select: none;
   font-size: 14px;
-  padding: 3px 0;
+  padding: 0;
   border: 1px solid #ccc;
   border-radius: 4px;
   box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175);

package/styles/context-menu/bootstrap4.css

@@ -27,7 +27,7 @@
       -ms-user-select: none;
           user-select: none;
   font-size: 14px;
-  padding: 6px 0;
+  padding: 0;
   border: 1px solid rgba(0, 0, 0, 0.15);
   border-radius: 4px;
   box-shadow: none;

package/styles/context-menu/bootstrap5-dark.css

@@ -27,7 +27,7 @@
       -ms-user-select: none;
           user-select: none;
   font-size: 14px;
-  padding: 4px 0;
+  padding: 0;
   border: 1px solid #444c54;
   border-radius: 4px;
   box-shadow: 0 16px 48px rgba(0, 0, 0, 0.175);
@@ -339,20 +339,20 @@
 
 .e-contextmenu-wrapper ul .e-menu-item.e-selected,
 .e-contextmenu-container ul .e-menu-item.e-selected {
-  background-color: #444c54;
+  background-color: #0d6efd;
   color: #fff;
-  outline: 0 solid #444c54;
+  outline: 0 solid #0d6efd;
   outline-offset: 0;
 }
 
 .e-contextmenu-wrapper ul .e-menu-item.e-selected .e-caret,
 .e-contextmenu-container ul .e-menu-item.e-selected .e-caret {
-  color: #adb5bd;
+  color: #fff;
 }
 
 .e-contextmenu-wrapper ul .e-menu-item.e-selected .e-menu-icon,
 .e-contextmenu-container ul .e-menu-item.e-selected .e-menu-icon {
-  color: #adb5bd;
+  color: #fff;
 }
 
 .e-contextmenu-wrapper ul .e-disabled,

package/styles/context-menu/bootstrap5.css

@@ -27,7 +27,7 @@
       -ms-user-select: none;
           user-select: none;
   font-size: 14px;
-  padding: 4px 0;
+  padding: 0;
   border: 1px solid #dee2e6;
   border-radius: 4px;
   box-shadow: 0 16px 48px rgba(0, 0, 0, 0.175);
@@ -339,20 +339,20 @@
 
 .e-contextmenu-wrapper ul .e-menu-item.e-selected,
 .e-contextmenu-container ul .e-menu-item.e-selected {
-  background-color: #e9ecef;
-  color: #212529;
-  outline: 0 solid #e9ecef;
+  background-color: #0d6efd;
+  color: #fff;
+  outline: 0 solid #0d6efd;
   outline-offset: 0;
 }
 
 .e-contextmenu-wrapper ul .e-menu-item.e-selected .e-caret,
 .e-contextmenu-container ul .e-menu-item.e-selected .e-caret {
-  color: #6c757d;
+  color: #fff;
 }
 
 .e-contextmenu-wrapper ul .e-menu-item.e-selected .e-menu-icon,
 .e-contextmenu-container ul .e-menu-item.e-selected .e-menu-icon {
-  color: #6c757d;
+  color: #fff;
 }
 
 .e-contextmenu-wrapper ul .e-disabled,

package/styles/context-menu/icons/_fluent.scss

@@ -0,0 +1,32 @@
+@include export-module('context-menu-fluent-icons') {
+  /*! contextmenu layout */
+  .e-contextmenu-wrapper,
+  .e-contextmenu-container {
+    @at-root {
+      & ul {
+        & .e-menu-item  {
+          & .e-previous {
+            &::before {
+              content: '\e7e4';
+            }
+          }
+
+          & .e-caret {
+            &::before {
+              content: '\e7c2';
+            }
+          }
+        }
+      }
+    }
+  }
+
+  .e-rtl.e-contextmenu-wrapper .e-menu-item,
+  .e-rtl.e-contextmenu-container .e-menu-item {
+    & .e-caret {
+      &::before {
+        content: '\e7c1';
+      }
+    }
+  }
+}

package/styles/context-menu/material-dark.css

@@ -28,7 +28,7 @@
       -ms-user-select: none;
           user-select: none;
   font-size: 14px;
-  padding: 8px 0;
+  padding: 0;
   border: none;
   border-radius: 0;
   box-shadow: 0 8px 10px 0 rgba(0, 0, 0, 0.24);

package/styles/context-menu/material.css

@@ -28,7 +28,7 @@
       -ms-user-select: none;
           user-select: none;
   font-size: 14px;
-  padding: 8px 0;
+  padding: 0;
   border: none;
   border-radius: 0;
   box-shadow: 0 5px 5px -3px rgba(0, 0, 0, 0.2), 0 8px 10px 1px rgba(0, 0, 0, 0.14), 0 3px 14px 2px rgba(0, 0, 0, 0.12);

package/styles/context-menu/tailwind-dark.css

@@ -28,7 +28,7 @@
       -ms-user-select: none;
           user-select: none;
   font-size: 14px;
-  padding: 4px 0;
+  padding: 0;
   border: 1px solid #4b5563;
   border-radius: 4px;
   box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);

package/styles/context-menu/tailwind.css

@@ -28,7 +28,7 @@
       -ms-user-select: none;
           user-select: none;
   font-size: 14px;
-  padding: 4px 0;
+  padding: 0;
   border: 1px solid #e5e7eb;
   border-radius: 4px;
   box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);