@syncfusion/ej2-navigations 20.1.61 → 20.2.36

package/styles/context-menu/material.css

@@ -1,4 +1,24 @@
 @import url("https://fonts.googleapis.com/css?family=Roboto:400,500");
+/*! component's theme wise override definitions and variables */
+@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);
+  }
+  100% {
+    box-shadow: 0 0 0 200px rgba(255, 255, 255, 0.12);
+  }
+}
+/*! component's theme wise override definitions and variables */
+@keyframes vscroll-popup-shadow {
+  0% {
+    border-color: 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);
+  }
+}
 /*! contextmenu layout */
 .e-contextmenu-wrapper ul .e-menu-item .e-previous::before,
 .e-contextmenu-container ul .e-menu-item .e-previous::before {
@@ -168,6 +188,29 @@
   border: 0;
   margin: 0;
 }
+.e-contextmenu-wrapper:not(.e-menu-container) .e-menu-vscroll.e-vscroll,
+.e-contextmenu-container:not(.e-menu-container) .e-menu-vscroll.e-vscroll {
+  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);
+}
+.e-contextmenu-wrapper:not(.e-menu-container) .e-menu-vscroll.e-vscroll .e-vscroll-bar,
+.e-contextmenu-container:not(.e-menu-container) .e-menu-vscroll.e-vscroll .e-vscroll-bar {
+  height: 100%;
+  width: inherit;
+}
+.e-contextmenu-wrapper:not(.e-menu-container) .e-menu-vscroll.e-vscroll .e-scroll-nav,
+.e-contextmenu-container:not(.e-menu-container) .e-menu-vscroll.e-vscroll .e-scroll-nav {
+  height: 16px;
+}
+.e-contextmenu-wrapper:not(.e-menu-container) .e-menu-vscroll.e-vscroll:not(.e-scroll-device),
+.e-contextmenu-container:not(.e-menu-container) .e-menu-vscroll.e-vscroll:not(.e-scroll-device) {
+  padding: 16px 0;
+}
+.e-contextmenu-wrapper:not(.e-menu-container) .e-menu-vscroll.e-vscroll ul,
+.e-contextmenu-container:not(.e-menu-container) .e-menu-vscroll.e-vscroll ul {
+  box-shadow: none;
+  margin-top: -12px;
+  width: inherit;
+}
 
 .e-rtl.e-contextmenu-wrapper .e-menu-item .e-menu-icon,
 .e-rtl.e-contextmenu-container .e-menu-item .e-menu-icon {
@@ -331,4 +374,14 @@
 .e-contextmenu-wrapper ul .e-separator,
 .e-contextmenu-container ul .e-separator {
   border-bottom-color: rgba(0, 0, 0, 0.12);
+}
+
+.e-contextmenu-wrapper:not(.e-menu-container) .e-menu-vscroll.e-vscroll,
+.e-contextmenu-container:not(.e-menu-container) .e-menu-vscroll.e-vscroll {
+  background-color: inherit;
+  border: none;
+}
+.e-contextmenu-wrapper:not(.e-menu-container) .e-menu-vscroll.e-vscroll .e-scroll-nav,
+.e-contextmenu-container:not(.e-menu-container) .e-menu-vscroll.e-vscroll .e-scroll-nav {
+  border-color: rgba(0, 0, 0, 0.12);
 }

package/styles/context-menu/material.scss

@@ -1,4 +1,7 @@
 @import 'ej2-base/styles/material-definition.scss';
+@import '../h-scroll/material-definition.scss';
+@import '../v-scroll/material-definition.scss';
+@import 'ej2-popups/styles/popup/material-definition.scss';
 @import 'material-definition.scss';
 @import 'icons/material.scss';
 @import 'all.scss';

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

@@ -1,4 +1,15 @@
 @import url("https://fonts.googleapis.com/css2?family=Inter:wght@100;200;300;400;500;600;700;800;900&display=swap");
+/*! component's theme wise override definitions and variables */
+@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);
+  }
+  100% {
+    box-shadow: 0 0 0 200px rgba(255, 255, 255, 0.12);
+  }
+}
+/*! component's theme wise override definitions and variables */
 /*! contextmenu layout */
 .e-contextmenu-wrapper ul .e-menu-item .e-previous::before,
 .e-contextmenu-container ul .e-menu-item .e-previous::before {
@@ -169,6 +180,29 @@
   border: 0;
   margin: 0;
 }
+.e-contextmenu-wrapper:not(.e-menu-container) .e-menu-vscroll.e-vscroll,
+.e-contextmenu-container:not(.e-menu-container) .e-menu-vscroll.e-vscroll {
+  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
+}
+.e-contextmenu-wrapper:not(.e-menu-container) .e-menu-vscroll.e-vscroll .e-vscroll-bar,
+.e-contextmenu-container:not(.e-menu-container) .e-menu-vscroll.e-vscroll .e-vscroll-bar {
+  height: 100%;
+  width: inherit;
+}
+.e-contextmenu-wrapper:not(.e-menu-container) .e-menu-vscroll.e-vscroll .e-scroll-nav,
+.e-contextmenu-container:not(.e-menu-container) .e-menu-vscroll.e-vscroll .e-scroll-nav {
+  height: 16px;
+}
+.e-contextmenu-wrapper:not(.e-menu-container) .e-menu-vscroll.e-vscroll:not(.e-scroll-device),
+.e-contextmenu-container:not(.e-menu-container) .e-menu-vscroll.e-vscroll:not(.e-scroll-device) {
+  padding: 16px 0;
+}
+.e-contextmenu-wrapper:not(.e-menu-container) .e-menu-vscroll.e-vscroll ul,
+.e-contextmenu-container:not(.e-menu-container) .e-menu-vscroll.e-vscroll ul {
+  box-shadow: none;
+  margin-top: -12px;
+  width: inherit;
+}
 
 .e-rtl.e-contextmenu-wrapper .e-menu-item .e-menu-icon,
 .e-rtl.e-contextmenu-container .e-menu-item .e-menu-icon {
@@ -334,4 +368,14 @@
 .e-contextmenu-wrapper ul .e-separator,
 .e-contextmenu-container ul .e-separator {
   border-bottom-color: #4b5563;
+}
+
+.e-contextmenu-wrapper:not(.e-menu-container) .e-menu-vscroll.e-vscroll,
+.e-contextmenu-container:not(.e-menu-container) .e-menu-vscroll.e-vscroll {
+  background-color: inherit;
+  border: 1px solid #4b5563;
+}
+.e-contextmenu-wrapper:not(.e-menu-container) .e-menu-vscroll.e-vscroll .e-scroll-nav,
+.e-contextmenu-container:not(.e-menu-container) .e-menu-vscroll.e-vscroll .e-scroll-nav {
+  border-color: #4b5563;
 }

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

@@ -1,4 +1,7 @@
 @import 'ej2-base/styles/tailwind-dark-definition.scss';
+@import '../h-scroll/tailwind-dark-definition.scss';
+@import '../v-scroll/tailwind-dark-definition.scss';
+@import 'ej2-popups/styles/popup/tailwind-dark-definition.scss';
 @import 'tailwind-dark-definition.scss';
 @import 'icons/tailwind-dark.scss';
 @import 'all.scss';

package/styles/context-menu/tailwind.css

@@ -1,4 +1,15 @@
 @import url("https://fonts.googleapis.com/css2?family=Inter:wght@100;200;300;400;500;600;700;800;900&display=swap");
+/*! component's theme wise override definitions and variables */
+@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);
+  }
+  100% {
+    box-shadow: 0 0 0 200px rgba(255, 255, 255, 0.12);
+  }
+}
+/*! component's theme wise override definitions and variables */
 /*! contextmenu layout */
 .e-contextmenu-wrapper ul .e-menu-item .e-previous::before,
 .e-contextmenu-container ul .e-menu-item .e-previous::before {
@@ -169,6 +180,29 @@
   border: 0;
   margin: 0;
 }
+.e-contextmenu-wrapper:not(.e-menu-container) .e-menu-vscroll.e-vscroll,
+.e-contextmenu-container:not(.e-menu-container) .e-menu-vscroll.e-vscroll {
+  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
+}
+.e-contextmenu-wrapper:not(.e-menu-container) .e-menu-vscroll.e-vscroll .e-vscroll-bar,
+.e-contextmenu-container:not(.e-menu-container) .e-menu-vscroll.e-vscroll .e-vscroll-bar {
+  height: 100%;
+  width: inherit;
+}
+.e-contextmenu-wrapper:not(.e-menu-container) .e-menu-vscroll.e-vscroll .e-scroll-nav,
+.e-contextmenu-container:not(.e-menu-container) .e-menu-vscroll.e-vscroll .e-scroll-nav {
+  height: 16px;
+}
+.e-contextmenu-wrapper:not(.e-menu-container) .e-menu-vscroll.e-vscroll:not(.e-scroll-device),
+.e-contextmenu-container:not(.e-menu-container) .e-menu-vscroll.e-vscroll:not(.e-scroll-device) {
+  padding: 16px 0;
+}
+.e-contextmenu-wrapper:not(.e-menu-container) .e-menu-vscroll.e-vscroll ul,
+.e-contextmenu-container:not(.e-menu-container) .e-menu-vscroll.e-vscroll ul {
+  box-shadow: none;
+  margin-top: -12px;
+  width: inherit;
+}
 
 .e-rtl.e-contextmenu-wrapper .e-menu-item .e-menu-icon,
 .e-rtl.e-contextmenu-container .e-menu-item .e-menu-icon {
@@ -334,4 +368,14 @@
 .e-contextmenu-wrapper ul .e-separator,
 .e-contextmenu-container ul .e-separator {
   border-bottom-color: #e5e7eb;
+}
+
+.e-contextmenu-wrapper:not(.e-menu-container) .e-menu-vscroll.e-vscroll,
+.e-contextmenu-container:not(.e-menu-container) .e-menu-vscroll.e-vscroll {
+  background-color: inherit;
+  border: 1px solid #e5e7eb;
+}
+.e-contextmenu-wrapper:not(.e-menu-container) .e-menu-vscroll.e-vscroll .e-scroll-nav,
+.e-contextmenu-container:not(.e-menu-container) .e-menu-vscroll.e-vscroll .e-scroll-nav {
+  border-color: #e5e7eb;
 }

package/styles/context-menu/tailwind.scss

@@ -1,4 +1,7 @@
 @import 'ej2-base/styles/tailwind-definition.scss';
+@import '../h-scroll/tailwind-definition.scss';
+@import '../v-scroll/tailwind-definition.scss';
+@import 'ej2-popups/styles/popup/tailwind-definition.scss';
 @import 'tailwind-definition.scss';
 @import 'icons/tailwind.scss';
 @import 'all.scss';