@syncfusion/ej2-navigations 25.2.4 → 26.1.35-750253

package/styles/menu/fluent.css

@@ -1,15 +1,28 @@
 /*! component's theme wise override definitions and variables */
+@-webkit-keyframes hscroll-popup-shadow {
+  0% {
+    border-color: rgba(255, 255, 255, 0.5);
+    -webkit-box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.5);
+            box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.5);
+  }
+  100% {
+    -webkit-box-shadow: 0 0 0 200px rgba(255, 255, 255, 0.12);
+            box-shadow: 0 0 0 200px rgba(255, 255, 255, 0.12);
+  }
+}
 @keyframes hscroll-popup-shadow {
   0% {
     border-color: rgba(255, 255, 255, 0.5);
-    box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.5);
+    -webkit-box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.5);
+            box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.5);
   }
   100% {
-    box-shadow: 0 0 0 200px rgba(255, 255, 255, 0.12);
+    -webkit-box-shadow: 0 0 0 200px rgba(255, 255, 255, 0.12);
+            box-shadow: 0 0 0 200px rgba(255, 255, 255, 0.12);
   }
 }
-/*! component's theme wise override definitions and variables */ /* stylelint-disable-line no-empty-source */
-/*! menu layout */
+/*! component's theme wise override definitions and variables */
+/* stylelint-disable-line no-empty-source */
 .e-menu-wrapper ul.e-vertical .e-menu-item .e-caret::before,
 .e-menu-container ul.e-vertical .e-menu-item .e-caret::before {
   content: "\e748";
@@ -52,24 +65,16 @@
   content: "\e729";
 }
 
-.e-rtl.e-menu-wrapper ul.e-vertical .e-caret::before,
-.e-rtl.e-menu-container ul.e-vertical .e-caret::before {
-  content: "\e765";
-}
-.e-rtl.e-menu-wrapper ul.e-ul .e-caret::before,
-.e-rtl.e-menu-container ul.e-ul .e-caret::before {
-  content: "\e765";
-}
-
+.e-rtl.e-menu-wrapper ul.e-vertical .e-caret::before, .e-rtl.e-menu-wrapper ul.e-ul .e-caret::before,
+.e-rtl.e-menu-container ul.e-vertical .e-caret::before,
+.e-rtl.e-menu-container ul.e-ul .e-caret::before,
 .e-bigger .e-rtl.e-menu-wrapper ul.e-vertical .e-caret::before,
-.e-bigger.e-rtl.e-menu-wrapper ul.e-vertical .e-caret::before,
-.e-bigger .e-rtl.e-menu-container ul.e-vertical .e-caret::before,
-.e-bigger.e-rtl.e-menu-container ul.e-vertical .e-caret::before {
-  content: "\e765";
-}
 .e-bigger .e-rtl.e-menu-wrapper ul.e-ul .e-caret::before,
+.e-bigger.e-rtl.e-menu-wrapper ul.e-vertical .e-caret::before,
 .e-bigger.e-rtl.e-menu-wrapper ul.e-ul .e-caret::before,
+.e-bigger .e-rtl.e-menu-container ul.e-vertical .e-caret::before,
 .e-bigger .e-rtl.e-menu-container ul.e-ul .e-caret::before,
+.e-bigger.e-rtl.e-menu-container ul.e-vertical .e-caret::before,
 .e-bigger.e-rtl.e-menu-container ul.e-ul .e-caret::before {
   content: "\e765";
 }
@@ -81,7 +86,6 @@
   content: "\e729";
 }
 
-/*! menu layout */
 .e-menu-wrapper,
 .e-menu-container {
   border: none;
@@ -102,6 +106,7 @@
   margin: 0;
   overflow: hidden;
   -webkit-user-select: none;
+     -moz-user-select: none;
       -ms-user-select: none;
           user-select: none;
   font-size: 14px;
@@ -112,7 +117,8 @@
 .e-menu-wrapper ul.e-ul, .e-menu-wrapper ul.e-ul *,
 .e-menu-container ul.e-ul,
 .e-menu-container ul.e-ul * {
-  box-sizing: border-box;
+  -webkit-box-sizing: border-box;
+          box-sizing: border-box;
 }
 .e-menu-wrapper ul.e-ul:focus, .e-menu-wrapper ul.e-ul *:focus,
 .e-menu-container ul.e-ul:focus,
@@ -155,6 +161,7 @@
 .e-menu-container ul .e-menu-item {
   cursor: pointer;
   position: relative;
+  display: -webkit-inline-box;
   display: -ms-inline-flexbox;
   display: inline-flex;
   height: 40px;
@@ -327,26 +334,27 @@
 .e-menu-container .e-scroll-nav .e-nav-arrow {
   font-size: 16px;
 }
-.e-menu-wrapper .e-scroll-nav .e-nav-arrow.e-nav-left-arrow,
-.e-menu-container .e-scroll-nav .e-nav-arrow.e-nav-left-arrow {
-  transform: rotate(180deg);
-}
-.e-menu-wrapper .e-scroll-nav .e-nav-arrow.e-nav-up-arrow,
+.e-menu-wrapper .e-scroll-nav .e-nav-arrow.e-nav-left-arrow, .e-menu-wrapper .e-scroll-nav .e-nav-arrow.e-nav-up-arrow,
+.e-menu-container .e-scroll-nav .e-nav-arrow.e-nav-left-arrow,
 .e-menu-container .e-scroll-nav .e-nav-arrow.e-nav-up-arrow {
-  transform: rotate(180deg);
+  -webkit-transform: rotate(180deg);
+          transform: rotate(180deg);
 }
 .e-menu-wrapper.e-rtl .e-scroll-nav .e-nav-arrow.e-nav-left-arrow,
 .e-menu-container.e-rtl .e-scroll-nav .e-nav-arrow.e-nav-left-arrow {
-  transform: rotate(0deg);
+  -webkit-transform: rotate(0deg);
+          transform: rotate(0deg);
 }
 .e-menu-wrapper.e-rtl .e-scroll-nav .e-nav-arrow.e-nav-right-arrow,
 .e-menu-container.e-rtl .e-scroll-nav .e-nav-arrow.e-nav-right-arrow {
-  transform: rotate(180deg);
+  -webkit-transform: rotate(180deg);
+          transform: rotate(180deg);
 }
 .e-menu-wrapper.e-popup.e-menu-popup,
 .e-menu-container.e-popup.e-menu-popup {
   border: 1px solid #edebe9;
-  box-shadow: 0 3.2px 7.2px 0 rgba(0, 0, 0, 0.132), 0 0.6px 1.8px 0 rgba(0, 0, 0, 0.108);
+  -webkit-box-shadow: 0 3.2px 7.2px 0 rgba(0, 0, 0, 0.132), 0 0.6px 1.8px 0 rgba(0, 0, 0, 0.108);
+          box-shadow: 0 3.2px 7.2px 0 rgba(0, 0, 0, 0.132), 0 0.6px 1.8px 0 rgba(0, 0, 0, 0.108);
   overflow: hidden;
   position: absolute;
 }
@@ -356,12 +364,14 @@
 }
 .e-menu-wrapper .e-menu-vscroll.e-vscroll.e-scroll-device .e-scroll-nav.e-scroll-down-nav,
 .e-menu-container .e-menu-vscroll.e-vscroll.e-scroll-device .e-scroll-nav.e-scroll-down-nav {
-  transform: none;
+  -webkit-transform: none;
+          transform: none;
   width: 100%;
 }
 .e-menu-wrapper .e-menu-vscroll.e-vscroll.e-scroll-device .e-scroll-nav.e-scroll-down-nav .e-nav-down-arrow,
 .e-menu-container .e-menu-vscroll.e-vscroll.e-scroll-device .e-scroll-nav.e-scroll-down-nav .e-nav-down-arrow {
-  transform: none;
+  -webkit-transform: none;
+          transform: none;
 }
 .e-menu-wrapper .e-menu-vscroll.e-vscroll .e-vscroll-bar,
 .e-menu-container .e-menu-vscroll.e-vscroll .e-vscroll-bar {
@@ -396,7 +406,8 @@
 .e-menu-wrapper.e-contextmenu-container .e-menu-vscroll,
 .e-menu-container.e-contextmenu-container .e-menu-vscroll {
   border: 1px solid #edebe9;
-  box-shadow: 0 3.2px 7.2px 0 rgba(0, 0, 0, 0.132), 0 0.6px 1.8px 0 rgba(0, 0, 0, 0.108);
+  -webkit-box-shadow: 0 3.2px 7.2px 0 rgba(0, 0, 0, 0.132), 0 0.6px 1.8px 0 rgba(0, 0, 0, 0.108);
+          box-shadow: 0 3.2px 7.2px 0 rgba(0, 0, 0, 0.132), 0 0.6px 1.8px 0 rgba(0, 0, 0, 0.108);
 }
 
 .e-menu-container:not(.e-hamburger):not(.e-rtl) .e-menu.e-vertical .e-blankicon {
@@ -600,7 +611,8 @@
 .e-bigger.e-menu-wrapper.e-menu-popup,
 .e-bigger .e-menu-container.e-menu-popup,
 .e-bigger.e-menu-container.e-menu-popup {
-  box-shadow: 0 3.2px 7.2px 0 rgba(0, 0, 0, 0.132), 0 0.6px 1.8px 0 rgba(0, 0, 0, 0.108);
+  -webkit-box-shadow: 0 3.2px 7.2px 0 rgba(0, 0, 0, 0.132), 0 0.6px 1.8px 0 rgba(0, 0, 0, 0.108);
+          box-shadow: 0 3.2px 7.2px 0 rgba(0, 0, 0, 0.132), 0 0.6px 1.8px 0 rgba(0, 0, 0, 0.108);
 }
 .e-bigger .e-menu-wrapper .e-scroll-nav .e-icons,
 .e-bigger.e-menu-wrapper .e-scroll-nav .e-icons,
@@ -689,7 +701,8 @@
 .e-menu-container.e-hamburger .e-popup.e-menu-popup {
   border: 0;
   border-radius: 0;
-  box-shadow: none;
+  -webkit-box-shadow: none;
+          box-shadow: none;
   display: block;
   position: relative;
   width: 100%;
@@ -725,13 +738,21 @@
 }
 .e-menu-wrapper.e-hamburger ul.e-menu .e-menu-item[aria-expanded=true] .e-caret,
 .e-menu-container.e-hamburger ul.e-menu .e-menu-item[aria-expanded=true] .e-caret {
+  -webkit-transition: -webkit-transform 0.3s ease-in-out;
+  transition: -webkit-transform 0.3s ease-in-out;
   transition: transform 0.3s ease-in-out;
+  transition: transform 0.3s ease-in-out, -webkit-transform 0.3s ease-in-out;
+  -webkit-transform: rotate(-180deg);
   transform: rotate(-180deg);
   text-indent: 0;
 }
 .e-menu-wrapper.e-hamburger ul.e-menu .e-menu-item[aria-expanded=false] .e-caret,
 .e-menu-container.e-hamburger ul.e-menu .e-menu-item[aria-expanded=false] .e-caret {
+  -webkit-transition: -webkit-transform 0.3s ease-in-out;
+  transition: -webkit-transform 0.3s ease-in-out;
   transition: transform 0.3s ease-in-out;
+  transition: transform 0.3s ease-in-out, -webkit-transform 0.3s ease-in-out;
+  -webkit-transform: rotate(0deg);
   transform: rotate(0deg);
   text-indent: 0;
 }
@@ -768,8 +789,9 @@
   height: auto;
   padding: 0;
 }
-.e-menu-wrapper.e-hamburger ul .e-menu-item.e-menu-caret-icon,
-.e-menu-container.e-hamburger ul .e-menu-item.e-menu-caret-icon {
+.e-menu-wrapper.e-hamburger ul .e-menu-item.e-menu-caret-icon, .e-menu-wrapper.e-hamburger ul .e-menu-item.e-blankicon,
+.e-menu-container.e-hamburger ul .e-menu-item.e-menu-caret-icon,
+.e-menu-container.e-hamburger ul .e-menu-item.e-blankicon {
   padding: 0;
 }
 .e-menu-wrapper.e-hamburger ul .e-menu-item .e-menu-url,
@@ -779,10 +801,6 @@
   text-indent: 0;
   width: 100%;
 }
-.e-menu-wrapper.e-hamburger ul .e-menu-item.e-blankicon,
-.e-menu-container.e-hamburger ul .e-menu-item.e-blankicon {
-  padding: 0;
-}
 .e-menu-wrapper.e-hamburger ul .e-menu-item.e-separator,
 .e-menu-container.e-hamburger ul .e-menu-item.e-separator {
   border-bottom-style: solid;
@@ -906,7 +924,6 @@
   position: relative;
 }
 
-/*! menu theme */
 .e-menu-wrapper,
 .e-menu-container {
   background: transparent;
@@ -1000,11 +1017,8 @@
   background: inherit;
   color: #201f1e;
 }
-.e-menu-wrapper .e-ul .e-menu-item .e-caret,
-.e-menu-container .e-ul .e-menu-item .e-caret {
-  color: #605e5c;
-}
-.e-menu-wrapper .e-ul .e-menu-item .e-menu-icon,
+.e-menu-wrapper .e-ul .e-menu-item .e-caret, .e-menu-wrapper .e-ul .e-menu-item .e-menu-icon,
+.e-menu-container .e-ul .e-menu-item .e-caret,
 .e-menu-container .e-ul .e-menu-item .e-menu-icon {
   color: #605e5c;
 }
@@ -1031,7 +1045,6 @@
 .e-menu-container .e-ul .e-menu-item.e-separator {
   border-bottom-color: #edebe9;
 }
-
 .e-menu-wrapper.e-menu-popup,
 .e-menu-container.e-menu-popup {
   background: #fff;