@syncfusion/ej2-navigations 28.1.39 → 28.2.3-1479479

package/styles/menu/bootstrap4.css

@@ -617,7 +617,7 @@
 }
 .e-menu-wrapper .e-menu .e-menu-item.e-focused,
 .e-menu-container .e-menu .e-menu-item.e-focused {
-  color: #0056b3;
+  color: rgb(0, 86.1, 178.5);
   outline: 0 solid #f8f9fa;
   outline-offset: 0;
   background: transparent;
@@ -628,16 +628,16 @@
 }
 .e-menu-wrapper .e-menu .e-menu-item.e-focused .e-menu-icon,
 .e-menu-container .e-menu .e-menu-item.e-focused .e-menu-icon {
-  color: #0056b3;
+  color: rgb(0, 86.1, 178.5);
 }
 .e-menu-wrapper .e-menu .e-menu-item.e-selected, .e-menu-wrapper .e-menu .e-menu-item.e-active-item,
 .e-menu-container .e-menu .e-menu-item.e-selected,
 .e-menu-container .e-menu .e-menu-item.e-active-item {
-  color: #0056b3;
-  outline: 0 solid #f2f4f6;
+  color: rgb(0, 86.1, 178.5);
+  outline: 0 solid rgb(242.05, 243.9, 245.75);
   outline-offset: 0;
   background: transparent;
-  background: #f2f4f6;
+  background: rgb(242.05, 243.9, 245.75);
 }
 .e-menu-wrapper .e-menu .e-menu-item.e-selected .e-caret, .e-menu-wrapper .e-menu .e-menu-item.e-active-item .e-caret,
 .e-menu-container .e-menu .e-menu-item.e-selected .e-caret,
@@ -702,7 +702,7 @@
 }
 .e-menu-wrapper .e-ul .e-menu-item.e-focused,
 .e-menu-container .e-ul .e-menu-item.e-focused {
-  background-color: #f2f4f6;
+  background-color: rgb(242.05, 243.9, 245.75);
   color: #212529;
   outline: 0 solid #e9ecef;
   outline-offset: 0;
@@ -737,8 +737,8 @@
 }
 .e-menu-wrapper .e-menu-hscroll.e-hscroll .e-scroll-nav:hover,
 .e-menu-container .e-menu-hscroll.e-hscroll .e-scroll-nav:hover {
-  background: #5a6268;
-  border: 1px inset #545b62;
+  background: rgb(90.2703862661, 97.7929184549, 104.4796137339);
+  border: 1px inset rgb(84.3605150215, 91.3905579399, 97.6394849785);
 }
 .e-menu-wrapper .e-menu-hscroll.e-hscroll .e-scroll-nav:hover .e-icons,
 .e-menu-container .e-menu-hscroll.e-hscroll .e-scroll-nav:hover .e-icons {
@@ -746,8 +746,8 @@
 }
 .e-menu-wrapper .e-menu-hscroll.e-hscroll .e-scroll-nav:focus,
 .e-menu-container .e-menu-hscroll.e-hscroll .e-scroll-nav:focus {
-  background: #5a6268;
-  border-color: #545b62;
+  background: rgb(90.2703862661, 97.7929184549, 104.4796137339);
+  border-color: rgb(84.3605150215, 91.3905579399, 97.6394849785);
 }
 .e-menu-wrapper .e-menu-hscroll.e-hscroll .e-scroll-nav:focus .e-icons,
 .e-menu-container .e-menu-hscroll.e-hscroll .e-scroll-nav:focus .e-icons {
@@ -755,8 +755,8 @@
 }
 .e-menu-wrapper .e-menu-hscroll.e-hscroll .e-scroll-nav:active,
 .e-menu-container .e-menu-hscroll.e-hscroll .e-scroll-nav:active {
-  background: #5a6268;
-  border: 1px inset #545b62;
+  background: rgb(90.2703862661, 97.7929184549, 104.4796137339);
+  border: 1px inset rgb(84.3605150215, 91.3905579399, 97.6394849785);
 }
 .e-menu-wrapper.e-menu-popup .e-menu-vscroll.e-vscroll .e-scroll-nav,
 .e-menu-container.e-menu-popup .e-menu-vscroll.e-vscroll .e-scroll-nav {
@@ -770,7 +770,7 @@
 .e-menu-wrapper.e-menu-popup .e-menu-vscroll.e-vscroll .e-scroll-nav:hover, .e-menu-wrapper.e-menu-popup .e-menu-vscroll.e-vscroll .e-scroll-nav:focus,
 .e-menu-container.e-menu-popup .e-menu-vscroll.e-vscroll .e-scroll-nav:hover,
 .e-menu-container.e-menu-popup .e-menu-vscroll.e-vscroll .e-scroll-nav:focus {
-  background: #f2f4f6;
+  background: rgb(242.05, 243.9, 245.75);
 }
 .e-menu-wrapper.e-menu-popup .e-menu-vscroll.e-vscroll .e-scroll-nav:active,
 .e-menu-container.e-menu-popup .e-menu-vscroll.e-vscroll .e-scroll-nav:active {

package/styles/menu/bootstrap5-dark.css

@@ -352,7 +352,7 @@
 }
 .e-menu-wrapper.e-popup.e-menu-popup,
 .e-menu-container.e-popup.e-menu-popup {
-  border: 1px solid #444c54;
+  border: 1px solid rgb(68.0034482759, 75.85, 83.6965517241);
   -webkit-box-shadow: 0 16px 48px rgba(0, 0, 0, 0.175);
           box-shadow: 0 16px 48px rgba(0, 0, 0, 0.175);
   overflow: hidden;
@@ -405,7 +405,7 @@
 }
 .e-menu-wrapper.e-contextmenu-container .e-menu-vscroll,
 .e-menu-container.e-contextmenu-container .e-menu-vscroll {
-  border: 1px solid #444c54;
+  border: 1px solid rgb(68.0034482759, 75.85, 83.6965517241);
   -webkit-box-shadow: 0 16px 48px rgba(0, 0, 0, 0.175);
           box-shadow: 0 16px 48px rgba(0, 0, 0, 0.175);
 }
@@ -611,7 +611,7 @@
 
 .e-menu-wrapper,
 .e-menu-container {
-  background: #282d31;
+  background: rgb(26.177027027, 29.35, 32.522972973);
 }
 .e-menu-wrapper .e-menu,
 .e-menu-container .e-menu {
@@ -620,15 +620,15 @@
 }
 .e-menu-wrapper .e-menu.e-menu:not(.e-vertical) .e-separator,
 .e-menu-container .e-menu.e-menu:not(.e-vertical) .e-separator {
-  border-right-color: #444c54;
+  border-right-color: rgb(68.0034482759, 75.85, 83.6965517241);
 }
 .e-menu-wrapper .e-menu .e-menu-item.e-menu-header,
 .e-menu-container .e-menu .e-menu-item.e-menu-header {
-  border-bottom-color: #444c54;
+  border-bottom-color: rgb(68.0034482759, 75.85, 83.6965517241);
 }
 .e-menu-wrapper .e-menu .e-menu-item.e-menu-header,
 .e-menu-container .e-menu .e-menu-item.e-menu-header {
-  border-bottom-color: #444c54;
+  border-bottom-color: rgb(68.0034482759, 75.85, 83.6965517241);
 }
 .e-menu-wrapper .e-menu .e-menu-item .e-menu-url,
 .e-menu-container .e-menu .e-menu-item .e-menu-url {
@@ -637,7 +637,7 @@
 .e-menu-wrapper .e-menu .e-menu-item.e-focused,
 .e-menu-container .e-menu .e-menu-item.e-focused {
   color: #fff;
-  outline: 0 solid #444c54;
+  outline: 0 solid rgb(68.0034482759, 75.85, 83.6965517241);
   outline-offset: 0;
   background: #495057;
 }
@@ -661,7 +661,7 @@
 }
 .e-menu-wrapper .e-menu .e-menu-item.e-separator,
 .e-menu-container .e-menu .e-menu-item.e-separator {
-  border-bottom-color: #444c54;
+  border-bottom-color: rgb(68.0034482759, 75.85, 83.6965517241);
 }
 .e-menu-wrapper .e-menu .e-disabled,
 .e-menu-container .e-menu .e-disabled {
@@ -692,9 +692,9 @@
 }
 .e-menu-wrapper .e-ul .e-menu-item.e-focused,
 .e-menu-container .e-ul .e-menu-item.e-focused {
-  background-color: #444c54;
+  background-color: rgb(68.0034482759, 75.85, 83.6965517241);
   color: #fff;
-  outline: 0 solid #444c54;
+  outline: 0 solid rgb(68.0034482759, 75.85, 83.6965517241);
   outline-offset: 0;
 }
 .e-menu-wrapper .e-ul .e-menu-item.e-selected, .e-menu-wrapper .e-ul .e-menu-item.e-active-item,
@@ -707,7 +707,7 @@
 }
 .e-menu-wrapper .e-ul .e-menu-item.e-separator,
 .e-menu-container .e-ul .e-menu-item.e-separator {
-  border-bottom-color: #444c54;
+  border-bottom-color: rgb(68.0034482759, 75.85, 83.6965517241);
 }
 .e-menu-wrapper.e-menu-popup,
 .e-menu-container.e-menu-popup {
@@ -719,7 +719,7 @@
 }
 .e-menu-wrapper .e-menu-hscroll.e-hscroll .e-scroll-nav,
 .e-menu-container .e-menu-hscroll.e-hscroll .e-scroll-nav {
-  background: #282d31;
+  background: rgb(26.177027027, 29.35, 32.522972973);
 }
 .e-menu-wrapper .e-menu-hscroll.e-hscroll .e-scroll-nav .e-nav-arrow.e-icons,
 .e-menu-container .e-menu-hscroll.e-hscroll .e-scroll-nav .e-nav-arrow.e-icons {
@@ -740,7 +740,7 @@
 .e-menu-wrapper.e-menu-popup .e-menu-vscroll.e-vscroll .e-scroll-nav,
 .e-menu-container.e-menu-popup .e-menu-vscroll.e-vscroll .e-scroll-nav {
   background: #343a40;
-  border-color: #444c54;
+  border-color: rgb(68.0034482759, 75.85, 83.6965517241);
 }
 .e-menu-wrapper.e-menu-popup .e-menu-vscroll.e-vscroll .e-scroll-nav .e-icons,
 .e-menu-container.e-menu-popup .e-menu-vscroll.e-vscroll .e-scroll-nav .e-icons {
@@ -749,7 +749,7 @@
 .e-menu-wrapper.e-menu-popup .e-menu-vscroll.e-vscroll .e-scroll-nav:hover, .e-menu-wrapper.e-menu-popup .e-menu-vscroll.e-vscroll .e-scroll-nav:focus,
 .e-menu-container.e-menu-popup .e-menu-vscroll.e-vscroll .e-scroll-nav:hover,
 .e-menu-container.e-menu-popup .e-menu-vscroll.e-vscroll .e-scroll-nav:focus {
-  background: #444c54;
+  background: rgb(68.0034482759, 75.85, 83.6965517241);
 }
 .e-menu-wrapper.e-menu-popup .e-menu-vscroll.e-vscroll .e-scroll-nav:active,
 .e-menu-container.e-menu-popup .e-menu-vscroll.e-vscroll .e-scroll-nav:active {

package/styles/menu/fluent2.css

@@ -680,6 +680,15 @@
 .e-menu-container .e-menu .e-menu-item.e-focused .e-menu-icon {
   color: var(--color-sf-icon-color-pressed);
 }
+.e-menu-wrapper .e-menu .e-menu-item.e-focused:focus-visible,
+.e-menu-container .e-menu .e-menu-item.e-focused:focus-visible {
+  color: var(--color-sf-content-text-color);
+}
+.e-menu-wrapper .e-menu .e-menu-item.e-focused:focus-visible .e-caret, .e-menu-wrapper .e-menu .e-menu-item.e-focused:focus-visible .e-menu-icon,
+.e-menu-container .e-menu .e-menu-item.e-focused:focus-visible .e-caret,
+.e-menu-container .e-menu .e-menu-item.e-focused:focus-visible .e-menu-icon {
+  color: var(--color-sf-icon-color);
+}
 .e-menu-wrapper .e-menu .e-menu-item.e-selected, .e-menu-wrapper .e-menu .e-menu-item.e-active-item,
 .e-menu-container .e-menu .e-menu-item.e-selected,
 .e-menu-container .e-menu .e-menu-item.e-active-item {
@@ -703,8 +712,8 @@
 .e-menu-container .e-menu .e-menu-item.e-separator {
   border-bottom-color: var(--color-sf-border-light);
 }
-.e-menu-wrapper .e-menu .e-menu-item:focus-visible,
-.e-menu-container .e-menu .e-menu-item:focus-visible {
+.e-menu-wrapper .e-menu .e-menu-item:focus-visible:not(.e-selected),
+.e-menu-container .e-menu .e-menu-item:focus-visible:not(.e-selected) {
   border-radius: 4px;
   background-color: var(--color-sf-content-bg-color);
   -webkit-box-shadow: inset 0 0 0 1px var(--color-sf-shadow-color), inset 0 0 0 2px var(--color-sf-shadow-color1);
@@ -772,7 +781,7 @@
 }
 .e-menu-wrapper .e-ul .e-menu-item:focus-visible,
 .e-menu-container .e-ul .e-menu-item:focus-visible {
-  background-color: var(--color-sf-content-bg-color);
+  background-color: var(--color-sf-flyout-bg-color-focus);
   -webkit-box-shadow: inset 0 0 0 1px var(--color-sf-shadow-color), inset 0 0 0 2px var(--color-sf-shadow-color1);
           box-shadow: inset 0 0 0 1px var(--color-sf-shadow-color), inset 0 0 0 2px var(--color-sf-shadow-color1);
   border-radius: 4px;

package/styles/menu/icons/_bds.scss

@@ -1,104 +1,104 @@
-@include export-module('menu-bds-icons') {
-  .e-menu-wrapper,
-  .e-menu-container {
-    @at-root {
-      & ul {
-        &.e-vertical .e-menu-item {
-          & .e-caret {
-            &::before {
-              content: '\e748';
-            }
-          }
-        }
-
-        & .e-menu-item  {
-          & .e-caret {
-            &::before {
-              content: '\e729';
-            }
-          }
-        }
-      }
-
-      & .e-ul .e-menu-item {
-        & .e-caret {
-          &::before {
-            content: '\e748';
-          }
-        }
-      }
-    }
-
-    &.e-hamburger {
-      & .e-menu-header {
-        & .e-menu-icon::before {
-          content: '\e799';
-        }
-      }
-
-      &.e-close-icon {
-        & .e-menu-header {
-          & .e-menu-icon::before {
-            content: '\e7e7';
-          }
-        }
-      }
-
-      & .e-vertical .e-menu-item .e-caret,
-      & .e-menu-item .e-caret {
-        &::before {
-          content: '\e729';
-        }
-      }
-    }
-
-    &.e-rtl.e-hamburger ul {
-      &.e-ul {
-        & .e-caret {
-          &::before {
-            content: '\e729';
-          }
-        }
-      }
-    }
-
-    & .e-menu-hscroll.e-hscroll .e-nav-left-arrow::before,
-    & .e-menu-hscroll.e-hscroll .e-nav-right-arrow::before {
-      content: '\e748';
-    }
-
-    & .e-menu-vscroll.e-vscroll .e-nav-up-arrow::before,
-    & .e-menu-vscroll.e-vscroll .e-nav-down-arrow::before {
-      content: '\e729';
-    }
-  }
-
-  .e-rtl.e-menu-wrapper ul,
-  .e-rtl.e-menu-container 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-vertical,
-    &.e-ul {
-      & .e-caret {
-        &::before {
-          content: '\e765';
-        }
-      }
-    }
-  }
-
-  .e-bigger .e-rtl.e-menu-wrapper.e-hamburger ul,
-  .e-bigger.e-rtl.e-menu-wrapper.e-hamburger ul,
-  .e-bigger .e-rtl.e-menu-container.e-hamburger ul,
-  .e-bigger.e-rtl.e-menu-container.e-hamburger ul {
-    &.e-ul {
-      & .e-caret {
-        &::before {
-          content: '\e729';
-        }
-      }
-    }
-  }
-}
+@include export-module('menu-bds-icons') {
+  .e-menu-wrapper,
+  .e-menu-container {
+    @at-root {
+      & ul {
+        &.e-vertical .e-menu-item {
+          & .e-caret {
+            &::before {
+              content: '\e748';
+            }
+          }
+        }
+
+        & .e-menu-item  {
+          & .e-caret {
+            &::before {
+              content: '\e729';
+            }
+          }
+        }
+      }
+
+      & .e-ul .e-menu-item {
+        & .e-caret {
+          &::before {
+            content: '\e748';
+          }
+        }
+      }
+    }
+
+    &.e-hamburger {
+      & .e-menu-header {
+        & .e-menu-icon::before {
+          content: '\e799';
+        }
+      }
+
+      &.e-close-icon {
+        & .e-menu-header {
+          & .e-menu-icon::before {
+            content: '\e7e7';
+          }
+        }
+      }
+
+      & .e-vertical .e-menu-item .e-caret,
+      & .e-menu-item .e-caret {
+        &::before {
+          content: '\e729';
+        }
+      }
+    }
+
+    &.e-rtl.e-hamburger ul {
+      &.e-ul {
+        & .e-caret {
+          &::before {
+            content: '\e729';
+          }
+        }
+      }
+    }
+
+    & .e-menu-hscroll.e-hscroll .e-nav-left-arrow::before,
+    & .e-menu-hscroll.e-hscroll .e-nav-right-arrow::before {
+      content: '\e748';
+    }
+
+    & .e-menu-vscroll.e-vscroll .e-nav-up-arrow::before,
+    & .e-menu-vscroll.e-vscroll .e-nav-down-arrow::before {
+      content: '\e729';
+    }
+  }
+
+  .e-rtl.e-menu-wrapper ul,
+  .e-rtl.e-menu-container 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-vertical,
+    &.e-ul {
+      & .e-caret {
+        &::before {
+          content: '\e765';
+        }
+      }
+    }
+  }
+
+  .e-bigger .e-rtl.e-menu-wrapper.e-hamburger ul,
+  .e-bigger.e-rtl.e-menu-wrapper.e-hamburger ul,
+  .e-bigger .e-rtl.e-menu-container.e-hamburger ul,
+  .e-bigger.e-rtl.e-menu-container.e-hamburger ul {
+    &.e-ul {
+      & .e-caret {
+        &::before {
+          content: '\e729';
+        }
+      }
+    }
+  }
+}

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

@@ -1,105 +1,105 @@
-@include export-module('menu-bootstrap-dark-icons') {
-  .e-menu-wrapper,
-  .e-menu-container {
-    @at-root {
-      & ul {
-        &.e-vertical .e-menu-item {
-          & .e-caret {
-            &::before {
-              content: '\e207';
-            }
-          }
-        }
-
-        & .e-menu-item  {
-          & .e-caret {
-            &::before {
-              content: '\e95d';
-            }
-          }
-        }
-      }
-
-      & .e-ul .e-menu-item {
-        & .e-caret {
-          &::before {
-            content: '\e207';
-          }
-        }
-      }
-    }
-
-    &.e-hamburger {
-      & .e-menu-header {
-        & .e-menu-icon::before {
-          content: '\e941';
-        }
-      }
-
-      &.e-close-icon {
-        & .e-menu-header {
-          & .e-menu-icon::before {
-            content: '\e60a';
-          }
-        }
-      }
-
-      & .e-vertical .e-menu-item .e-caret,
-      & .e-menu-item .e-caret {
-        &::before {
-          content: '\e95d';
-        }
-      }
-    }
-
-    &.e-rtl.e-hamburger ul {
-      &.e-ul {
-        & .e-caret {
-          &::before {
-            content: '\e95d';
-          }
-        }
-      }
-    }
-
-    & .e-menu-hscroll.e-hscroll .e-nav-right-arrow::before,
-    & .e-menu-hscroll.e-hscroll .e-nav-left-arrow::before {
-      content: '\e207';
-    }
-
-    & .e-menu-vscroll.e-vscroll .e-nav-up-arrow::before,
-    & .e-menu-vscroll.e-vscroll .e-nav-down-arrow::before {
-      content: '\e95d';
-    }
-  }
-
-  .e-rtl.e-menu-wrapper ul,
-  .e-rtl.e-menu-container 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-vertical,
-    &.e-ul {
-      & .e-caret {
-        &::before {
-          content: '\e937';
-        }
-      }
-    }
-  }
-
-  .e-bigger .e-rtl.e-menu-wrapper.e-hamburger ul,
-  .e-bigger.e-rtl.e-menu-wrapper.e-hamburger ul,
-  .e-bigger .e-rtl.e-menu-container.e-hamburger ul,
-  .e-bigger.e-rtl.e-menu-container.e-hamburger ul {
-
-    &.e-ul {
-      & .e-caret {
-        &::before {
-          content: '\e95d';
-        }
-      }
-    }
-  }
-}
+@include export-module('menu-bootstrap-dark-icons') {
+  .e-menu-wrapper,
+  .e-menu-container {
+    @at-root {
+      & ul {
+        &.e-vertical .e-menu-item {
+          & .e-caret {
+            &::before {
+              content: '\e207';
+            }
+          }
+        }
+
+        & .e-menu-item  {
+          & .e-caret {
+            &::before {
+              content: '\e95d';
+            }
+          }
+        }
+      }
+
+      & .e-ul .e-menu-item {
+        & .e-caret {
+          &::before {
+            content: '\e207';
+          }
+        }
+      }
+    }
+
+    &.e-hamburger {
+      & .e-menu-header {
+        & .e-menu-icon::before {
+          content: '\e941';
+        }
+      }
+
+      &.e-close-icon {
+        & .e-menu-header {
+          & .e-menu-icon::before {
+            content: '\e60a';
+          }
+        }
+      }
+
+      & .e-vertical .e-menu-item .e-caret,
+      & .e-menu-item .e-caret {
+        &::before {
+          content: '\e95d';
+        }
+      }
+    }
+
+    &.e-rtl.e-hamburger ul {
+      &.e-ul {
+        & .e-caret {
+          &::before {
+            content: '\e95d';
+          }
+        }
+      }
+    }
+
+    & .e-menu-hscroll.e-hscroll .e-nav-right-arrow::before,
+    & .e-menu-hscroll.e-hscroll .e-nav-left-arrow::before {
+      content: '\e207';
+    }
+
+    & .e-menu-vscroll.e-vscroll .e-nav-up-arrow::before,
+    & .e-menu-vscroll.e-vscroll .e-nav-down-arrow::before {
+      content: '\e95d';
+    }
+  }
+
+  .e-rtl.e-menu-wrapper ul,
+  .e-rtl.e-menu-container 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-vertical,
+    &.e-ul {
+      & .e-caret {
+        &::before {
+          content: '\e937';
+        }
+      }
+    }
+  }
+
+  .e-bigger .e-rtl.e-menu-wrapper.e-hamburger ul,
+  .e-bigger.e-rtl.e-menu-wrapper.e-hamburger ul,
+  .e-bigger .e-rtl.e-menu-container.e-hamburger ul,
+  .e-bigger.e-rtl.e-menu-container.e-hamburger ul {
+
+    &.e-ul {
+      & .e-caret {
+        &::before {
+          content: '\e95d';
+        }
+      }
+    }
+  }
+}