@syncfusion/ej2-navigations 31.2.16 → 32.1.24

package/styles/material.css

@@ -862,6 +862,18 @@
   line-height: normal;
 }
 
+/*! component's theme wise override definitions and variables */
+@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);
+  }
+}
 /*! h-scroll layout */
 .e-hscroll {
   display: block;
@@ -980,6 +992,18 @@
   pointer-events: none;
 }
 
+/*! component's theme wise override definitions and variables */
+@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);
+  }
+}
 /*! h-scroll theme */
 .e-hscroll .e-scroll-nav .e-icons {
   color: rgba(0, 0, 0, 0.54);
@@ -1084,6 +1108,18 @@
   visibility: visible;
 }
 
+/*! component's theme wise override definitions and variables */
+@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);
+  }
+}
 .e-bigger .e-hscroll,
 .e-hscroll.e-bigger {
   min-height: 56px;
@@ -1158,6 +1194,18 @@
   line-height: normal;
 }
 
+/*! component's theme wise override definitions and variables */
+@keyframes vscroll-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);
+  }
+}
 /*! v-scroll layout */
 .e-vscroll {
   display: block;
@@ -1261,6 +1309,18 @@
   width: 100%;
 }
 
+/*! component's theme wise override definitions and variables */
+@keyframes vscroll-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);
+  }
+}
 /*! v-scroll theme */
 .e-vscroll .e-icons {
   color: rgba(0, 0, 0, 0.54);
@@ -1348,6 +1408,18 @@
   visibility: visible;
 }
 
+/*! component's theme wise override definitions and variables */
+@keyframes vscroll-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);
+  }
+}
 .e-bigger .e-vscroll:not(.e-scroll-device),
 .e-vscroll.e-bigger:not(.e-scroll-device) {
   padding: 24px 0;
@@ -1401,6 +1473,17 @@
   line-height: normal;
 }
 
+@keyframes tbar-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);
+  }
+}
 .e-toolbar {
   border-radius: 0;
   display: block;
@@ -1443,6 +1526,12 @@
 .e-toolbar.e-hidden {
   display: none;
 }
+.e-toolbar.e-overlay .e-toolbar-item:not(.e-separator):not(.e-spacer) > * {
+  pointer-events: none;
+}
+.e-toolbar.e-overlay.e-extended-toolbar .e-toolbar-items .e-toolbar-item.e-toolbar-item > * {
+  pointer-events: none;
+}
 .e-toolbar .e-toolbar-items {
   border-radius: 0 0 0 0;
   display: -webkit-inline-box;
@@ -2001,6 +2090,17 @@
   padding-left: 0;
 }
 
+@keyframes tbar-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);
+  }
+}
 /* stylelint-disable property-no-vendor-prefix */
 .e-toolbar {
   -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
@@ -2296,6 +2396,17 @@
   border-width: 0 1px 0 0;
 }
 
+@keyframes tbar-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);
+  }
+}
 .e-bigger .e-toolbar,
 .e-toolbar.e-bigger {
   height: 56px;
@@ -2342,6 +2453,10 @@
 .e-toolbar.e-bigger .e-toolbar-items .e-toolbar-item .e-tbar-btn.e-btn.e-control:active {
   padding: 0 6px;
 }
+.e-bigger .e-toolbar.e-spacer-toolbar.e-pop-mode .e-toolbar-items,
+.e-toolbar.e-bigger.e-spacer-toolbar.e-pop-mode .e-toolbar-items {
+  width: calc(100% - 40px);
+}
 .e-bigger .e-toolbar .e-toolbar-item,
 .e-toolbar.e-bigger .e-toolbar-item {
   min-height: 56px;
@@ -3937,6 +4052,28 @@
   position: relative;
 }
 
+@keyframes tbar-alt-popup-shadow {
+  0% {
+    border-color: rgba(0, 0, 0, 0.12);
+    -webkit-box-shadow: 0 0 0 0 rgba(0, 0, 0, 0.12);
+            box-shadow: 0 0 0 0 rgba(0, 0, 0, 0.12);
+  }
+  100% {
+    -webkit-box-shadow: 0 0 0 200px rgba(0, 0, 0, 0.12);
+            box-shadow: 0 0 0 200px rgba(0, 0, 0, 0.12);
+  }
+}
+@keyframes hscroll-alt-popup-shadow {
+  0% {
+    border-color: rgba(0, 0, 0, 0.12);
+    -webkit-box-shadow: 0 0 0 0 rgba(0, 0, 0, 0.12);
+            box-shadow: 0 0 0 0 rgba(0, 0, 0, 0.12);
+  }
+  100% {
+    -webkit-box-shadow: 0 0 0 200px rgba(0, 0, 0, 0.12);
+            box-shadow: 0 0 0 200px rgba(0, 0, 0, 0.12);
+  }
+}
 .e-tab {
   display: block;
   position: relative;
@@ -5770,6 +5907,28 @@
   margin-right: 20px;
 }
 
+@keyframes tbar-alt-popup-shadow {
+  0% {
+    border-color: rgba(0, 0, 0, 0.12);
+    -webkit-box-shadow: 0 0 0 0 rgba(0, 0, 0, 0.12);
+            box-shadow: 0 0 0 0 rgba(0, 0, 0, 0.12);
+  }
+  100% {
+    -webkit-box-shadow: 0 0 0 200px rgba(0, 0, 0, 0.12);
+            box-shadow: 0 0 0 200px rgba(0, 0, 0, 0.12);
+  }
+}
+@keyframes hscroll-alt-popup-shadow {
+  0% {
+    border-color: rgba(0, 0, 0, 0.12);
+    -webkit-box-shadow: 0 0 0 0 rgba(0, 0, 0, 0.12);
+            box-shadow: 0 0 0 0 rgba(0, 0, 0, 0.12);
+  }
+  100% {
+    -webkit-box-shadow: 0 0 0 200px rgba(0, 0, 0, 0.12);
+            box-shadow: 0 0 0 200px rgba(0, 0, 0, 0.12);
+  }
+}
 .e-tab {
   background: transparent;
   border: none;
@@ -6836,6 +6995,28 @@
   color: rgba(0, 0, 0, 0.54);
 }
 
+@keyframes tbar-alt-popup-shadow {
+  0% {
+    border-color: rgba(0, 0, 0, 0.12);
+    -webkit-box-shadow: 0 0 0 0 rgba(0, 0, 0, 0.12);
+            box-shadow: 0 0 0 0 rgba(0, 0, 0, 0.12);
+  }
+  100% {
+    -webkit-box-shadow: 0 0 0 200px rgba(0, 0, 0, 0.12);
+            box-shadow: 0 0 0 200px rgba(0, 0, 0, 0.12);
+  }
+}
+@keyframes hscroll-alt-popup-shadow {
+  0% {
+    border-color: rgba(0, 0, 0, 0.12);
+    -webkit-box-shadow: 0 0 0 0 rgba(0, 0, 0, 0.12);
+            box-shadow: 0 0 0 0 rgba(0, 0, 0, 0.12);
+  }
+  100% {
+    -webkit-box-shadow: 0 0 0 200px rgba(0, 0, 0, 0.12);
+            box-shadow: 0 0 0 200px rgba(0, 0, 0, 0.12);
+  }
+}
 .e-bigger .e-tab .e-tab-header,
 .e-tab.e-bigger .e-tab-header {
   height: 48px;
@@ -8098,6 +8279,8 @@
   content: "\e22a";
 }
 
+/*! TreeView's material theme wise override definitions and variables */
+/* stylelint-disable */
 /* stylelint-disable property-no-vendor-prefix */
 @-webkit-keyframes rotation {
   from {
@@ -8288,7 +8471,7 @@
 }
 .e-treeview .e-list-text .e-input-group {
   height: 30px;
-  margin-bottom: 0;
+  margin-bottom: 0px;
   min-width: 150px;
   vertical-align: bottom;
 }
@@ -8543,6 +8726,8 @@
 }
 
 /* stylelint-enable property-no-vendor-prefix */
+/*! TreeView's material theme wise override definitions and variables */
+/* stylelint-disable */
 /* stylelint-disable property-no-vendor-prefix */
 .e-treeview {
   -webkit-tap-highlight-color: transparent;
@@ -8713,6 +8898,8 @@
   background: #e3165b;
 }
 
+/*! TreeView's material theme wise override definitions and variables */
+/* stylelint-disable */
 .e-bigger .e-treeview .e-navigable .e-list-text,
 .e-treeview.e-bigger .e-navigable .e-list-text {
   padding: 0;
@@ -8876,7 +9063,8 @@
 /*! Material theme definition's */
 /*! component's theme wise override definitions and variables */
 /* stylelint-disable-line no-empty-source */
-/* stylelint-disable-line no-empty-source */
+/*! Material theme definition's */
+/*! component's theme wise override definitions and variables */
 ejs-sidebar {
   display: none;
 }
@@ -9363,7 +9551,6 @@ ejs-sidebar {
   display: none;
   font-family: "Roboto", "Segoe UI", "GeezaPro", "DejaVu Serif", "sans-serif", "-apple-system", "BlinkMacSystemFont";
   font-size: 14px;
-  font-weight: normal;
   height: 42px;
   line-height: 42px;
   text-align: left;

package/styles/material.scss

@@ -1,59 +1,58 @@
-@import 'ej2-base/styles/definition/material.scss';
-@import 'pager/material-definition.scss';
-@import 'pager/icons/material.scss';
-@import 'pager/all.scss';
-@import 'pager/bigger.scss';
-@import 'h-scroll/material-definition.scss';
-@import 'h-scroll/icons/material.scss';
-@import 'h-scroll/all.scss';
-@import 'h-scroll/bigger.scss';
-@import 'v-scroll/material-definition.scss';
-@import 'v-scroll/icons/material.scss';
-@import 'v-scroll/all.scss';
-@import 'v-scroll/bigger.scss';
-@import 'ej2-buttons/styles/button/material-definition.scss';
-@import 'ej2-popups/styles/popup/material-definition.scss';
-@import 'toolbar/material-definition.scss';
-@import 'toolbar/icons/material.scss';
-@import 'toolbar/all.scss';
-@import 'toolbar/bigger.scss';
-@import 'accordion/material-definition.scss';
-@import 'accordion/icons/material.scss';
-@import 'accordion/all.scss';
-@import 'accordion/bigger.scss';
-@import 'carousel/material-definition.scss';
-@import 'carousel/icons/material.scss';
-@import 'carousel/all.scss';
+@use 'pager/material-definition' as *;
+@use 'pager/icons/material' as *;
+@use 'pager/all.material' as *;
+@use 'pager/bigger.material' as *;
+@use 'h-scroll/material-definition' as *;
+@use 'h-scroll/icons/material' as *;
+@use 'h-scroll/all.material' as *;
+@use 'h-scroll/bigger.material' as *;
+@use 'v-scroll/material-definition' as *;
+@use 'v-scroll/icons/material' as *;
+@use 'v-scroll/all.material' as *;
+@use 'v-scroll/bigger.material' as *;
+@use 'ej2-buttons/styles/button/material-definition' as *;
+@use 'ej2-popups/styles/popup/material-definition' as *;
+@use 'toolbar/material-definition' as *;
+@use 'toolbar/icons/material' as *;
+@use 'toolbar/all.material' as *;
+@use 'toolbar/bigger.material' as *;
+@use 'accordion/material-definition' as *;
+@use 'accordion/icons/material' as *;
+@use 'accordion/all.material' as *;
+@use 'accordion/bigger.material' as *;
+@use 'carousel/material-definition' as *;
+@use 'carousel/icons/material' as *;
+@use 'carousel/all.material' as *;
 
-@import 'context-menu/material-definition.scss';
-@import 'context-menu/icons/material.scss';
-@import 'context-menu/all.scss';
-@import 'context-menu/bigger.scss';
-@import 'tab/material-definition.scss';
-@import 'tab/icons/material.scss';
-@import 'tab/all.scss';
-@import 'tab/bigger.scss';
-@import 'ej2-inputs/styles/input/material-definition.scss';
-@import 'ej2-buttons/styles/check-box/material-definition.scss';
-@import 'treeview/material-definition.scss';
-@import 'treeview/icons/material.scss';
-@import 'treeview/all.scss';
-@import 'treeview/bigger.scss';
-@import 'sidebar/material-definition.scss';
-@import 'sidebar/all.scss';
-@import 'menu/material-definition.scss';
-@import 'menu/icons/material.scss';
-@import 'menu/all.scss';
-@import 'menu/bigger.scss';
-@import 'breadcrumb/material-definition.scss';
-@import 'breadcrumb/icons/material.scss';
-@import 'breadcrumb/all.scss';
-@import 'breadcrumb/bigger.scss';
-@import 'appbar/material-definition.scss';
-@import 'appbar/all.scss';
-@import 'appbar/bigger.scss';
-@import 'ej2-popups/styles/tooltip/material-definition.scss';
-@import 'stepper/material-definition.scss';
-@import 'stepper/icons/material.scss';
-@import 'stepper/all.scss';
-@import 'stepper/bigger.scss';
+@use 'context-menu/material-definition' as *;
+@use 'context-menu/icons/material' as *;
+@use 'context-menu/all.material' as *;
+@use 'context-menu/bigger.material' as *;
+@use 'tab/material-definition' as *;
+@use 'tab/icons/material' as *;
+@use 'tab/all.material' as *;
+@use 'tab/bigger.material' as *;
+@use 'ej2-inputs/styles/input/material-definition' as *;
+@use 'ej2-buttons/styles/check-box/material-definition' as *;
+@use 'treeview/material-definition' as *;
+@use 'treeview/icons/material' as *;
+@use 'treeview/all.material' as *;
+@use 'treeview/bigger.material' as *;
+@use 'sidebar/material-definition' as *;
+@use 'sidebar/all.material' as *;
+@use 'menu/material-definition' as *;
+@use 'menu/icons/material' as *;
+@use 'menu/all.material' as *;
+@use 'menu/bigger.material' as *;
+@use 'breadcrumb/material-definition' as *;
+@use 'breadcrumb/icons/material' as *;
+@use 'breadcrumb/all.material' as *;
+@use 'breadcrumb/bigger.material' as *;
+@use 'appbar/material-definition' as *;
+@use 'appbar/all.material' as *;
+@use 'appbar/bigger.material' as *;
+@use 'ej2-popups/styles/tooltip/material-definition' as *;
+@use 'stepper/material-definition' as *;
+@use 'stepper/icons/material' as *;
+@use 'stepper/all.material' as *;
+@use 'stepper/bigger.material' as *;