@syncfusion/ej2-navigations 31.2.16 → 32.1.24

package/styles/bds-lite.css

@@ -44,6 +44,10 @@
   content: "\e765";
 }
 
+
+
+
+
 /*! Pager layout */
 .e-pager {
   border-style: solid;
@@ -556,6 +560,10 @@
   margin-left: 0;
 }
 
+
+
+
+
 /*! Pager theme */
 .e-pager {
   border-color: var(--color-sf-border-secondary);
@@ -714,6 +722,22 @@
   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;
@@ -832,6 +856,22 @@
   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: var(--color-sf-fg-secondary);
@@ -953,6 +993,11 @@
   line-height: normal;
 }
 
+
+
+
+
+/*! component's theme wise override definitions and variables */
 /*! v-scroll layout */
 .e-vscroll {
   display: block;
@@ -1056,6 +1101,11 @@
   width: 100%;
 }
 
+
+
+
+
+/*! component's theme wise override definitions and variables */
 /*! v-scroll theme */
 .e-vscroll .e-icons {
   color: var(--color-sf-fg-secondary);
@@ -1199,6 +1249,10 @@
   line-height: normal;
 }
 
+
+
+
+
 .e-toolbar {
   border-radius: 0;
   display: block;
@@ -1241,6 +1295,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;
@@ -1799,6 +1859,10 @@
   padding-left: 0;
 }
 
+
+
+
+
 /* stylelint-disable property-no-vendor-prefix */
 .e-toolbar {
   -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
@@ -2089,6 +2153,10 @@
           transform: rotate(-180deg);
 }
 
+
+
+
+
 .e-accordion {
   display: block;
   position: relative;
@@ -2260,6 +2328,10 @@
   padding: 0 0 0 8px;
 }
 
+
+
+
+
 .e-accordion {
   -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
   background: var(--color-sf-bg-primary-alt);
@@ -2544,6 +2616,10 @@
   content: "\e765";
 }
 
+
+
+
+
 .e-carousel {
   display: block;
   margin: 0;
@@ -2829,6 +2905,10 @@
   width: 100%;
 }
 
+
+
+
+
 .e-carousel .e-carousel-navigators .e-previous .e-btn:not(:disabled),
 .e-carousel .e-carousel-navigators .e-next .e-btn:not(:disabled),
 .e-carousel .e-carousel-navigators .e-play-pause .e-btn:not(:disabled) {
@@ -2913,6 +2993,20 @@
   content: "\e765";
 }
 
+
+
+
+
+/* stylelint-disable */
+.e-contextmenu-wrapper ul.e-contextmenu,
+.e-contextmenu-container ul.e-contextmenu {
+  padding: 4px 6px !important;
+}
+
+.e-contextmenu-wrapper ul .e-menu-item {
+  border-radius: 6px !important;
+}
+
 .e-contextmenu-wrapper ul,
 .e-contextmenu-container ul {
   font-weight: 400;
@@ -3145,6 +3239,20 @@
   text-overflow: ellipsis;
 }
 
+
+
+
+
+/* stylelint-disable */
+.e-contextmenu-wrapper ul.e-contextmenu,
+.e-contextmenu-container ul.e-contextmenu {
+  padding: 4px 6px !important;
+}
+
+.e-contextmenu-wrapper ul .e-menu-item {
+  border-radius: 6px !important;
+}
+
 .e-contextmenu-wrapper ul,
 .e-contextmenu-container ul {
   background-color: var(--color-sf-bg-primary-alt);
@@ -3320,6 +3428,37 @@
   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);
+  }
+}
+/* stylelint-disable */
+.e-toolbar-item.e-active {
+  background: none !important;
+}
+
 .e-tab {
   display: block;
   position: relative;
@@ -5153,6 +5292,37 @@
   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);
+  }
+}
+/* stylelint-disable */
+.e-toolbar-item.e-active {
+  background: none !important;
+}
+
 .e-tab {
   background: var(--color-sf-base-transparent);
   border: none;
@@ -6391,6 +6561,12 @@
   content: "\e839";
 }
 
+
+
+
+
+/*! TreeView's theme wise override definitions and variables */
+/* stylelint-disable */
 /* stylelint-disable property-no-vendor-prefix */
 @-webkit-keyframes rotation {
   from {
@@ -6629,7 +6805,7 @@
 }
 .e-treeview .e-sibling::before {
   left: 0;
-  height: 2px;
+  height: 1px;
   top: -1.5px;
 }
 .e-treeview .e-sibling,
@@ -6742,7 +6918,7 @@
   font-size: 12px;
   line-height: normal;
   min-width: 12px;
-  padding: 1px 3px 2px;
+  padding: 3px 5px 4px;
   margin-left: -12px;
   position: absolute;
   text-align: center;
@@ -6838,6 +7014,12 @@
 }
 
 /* stylelint-enable property-no-vendor-prefix */
+
+
+
+
+/*! TreeView's theme wise override definitions and variables */
+/* stylelint-disable */
 /* stylelint-disable property-no-vendor-prefix */
 .e-treeview {
   -webkit-tap-highlight-color: transparent;
@@ -7046,7 +7228,49 @@
 }
 
 /* stylelint-disable-line no-empty-source */
-/* stylelint-disable-line no-empty-source */
+
+
+
+
+.e-sidebar {
+  /* stylelint-disable property-no-vendor-prefix */
+  -webkit-tap-highlight-color: transparent;
+  background: var(--color-sf-bg-primary);
+  height: 100%;
+  overflow: auto;
+  position: fixed;
+  top: 0;
+  -webkit-transition: none;
+  transition: none;
+  vertical-align: middle;
+  visibility: hidden;
+  will-change: transform;
+  /* stylelint-disable */
+}
+
+.e-sidebar.e-right {
+  border-left: 1px solid var(--color-sf-border-secondary) !important;
+  left: auto;
+  right: 0;
+  top: 0;
+}
+
+.e-sidebar.e-left {
+  border-right: 1px solid var(--color-sf-border-secondary) !important;
+  left: 0;
+  right: auto;
+  top: 0;
+}
+
+.e-backdrop {
+  -webkit-filter: blur(2px) !important;
+          filter: blur(2px) !important;
+}
+
+.e-sidebar-overlay {
+  backdrop-filter: blur(2px) !important;
+}
+
 ejs-sidebar {
   display: none;
 }
@@ -7098,13 +7322,13 @@ ejs-sidebar {
   transition: transform 0.5s ease, visibility 500ms, -webkit-transform 0.5s ease;
 }
 .e-sidebar.e-right {
-  border-left: 0 solid var(--color-sf-border-secondary);
+  border-left: 1px solid var(--color-sf-border-secondary);
   left: auto;
   right: 0;
   top: 0;
 }
 .e-sidebar.e-left {
-  border-right: 0 solid var(--color-sf-border-secondary);
+  border-right: 1px solid var(--color-sf-border-secondary);
   left: 0;
   right: auto;
   top: 0;
@@ -7331,6 +7555,20 @@ ejs-sidebar {
   content: "\e729";
 }
 
+
+
+
+
+/* stylelint-disable */
+.e-contextmenu-wrapper ul.e-contextmenu,
+.e-contextmenu-container ul.e-contextmenu {
+  padding: 4px 6px !important;
+}
+
+.e-contextmenu-wrapper ul .e-menu-item {
+  border-radius: 6px !important;
+}
+
 .e-menu-wrapper,
 .e-menu-container {
   border: none;
@@ -7531,7 +7769,6 @@ ejs-sidebar {
   display: none;
   font-family: "Inter";
   font-size: 18px;
-  font-weight: normal;
   height: 38px;
   line-height: 38px;
   text-align: left;
@@ -7854,6 +8091,20 @@ ejs-sidebar {
   position: relative;
 }
 
+
+
+
+
+/* stylelint-disable */
+.e-contextmenu-wrapper ul.e-contextmenu,
+.e-contextmenu-container ul.e-contextmenu {
+  padding: 4px 6px !important;
+}
+
+.e-contextmenu-wrapper ul .e-menu-item {
+  border-radius: 6px !important;
+}
+
 .e-menu-wrapper,
 .e-menu-container {
   background: var(--color-sf-bg-secondary);
@@ -8067,6 +8318,10 @@ ejs-sidebar {
   height: 21px;
 }
 
+
+
+
+
 .e-breadcrumb {
   display: block;
 }
@@ -8317,6 +8572,10 @@ ejs-sidebar {
   visibility: hidden;
 }
 
+
+
+
+
 .e-breadcrumb .e-breadcrumb-item .e-breadcrumb-text {
   color: var(--color-sf-text-secondary);
 }
@@ -8406,6 +8665,30 @@ ejs-sidebar {
   height: 132px;
 }
 
+
+
+
+
+/* stylelint-disable */
+.e-appbar.e-light {
+  border-bottom: 1px solid var(--color-sf-utility-appbar-border-color-alt1) !important;
+}
+
+.e-appbar.e-horizontal-bottom {
+  border-top: 1px solid var(--color-sf-utility-appbar-border-color-alt1) !important;
+}
+
+.e-bigger .e-appbar,
+.e-appbar.e-bigger {
+  padding: 16px !important;
+  height: 72px !important;
+}
+
+.e-bigger .e-appbar.e-prominent,
+.e-appbar.e-bigger.e-prominent {
+  height: 132px;
+}
+
 .e-appbar {
   display: -webkit-box;
   display: -ms-flexbox;
@@ -8487,6 +8770,30 @@ ejs-sidebar {
   overflow: hidden;
 }
 
+
+
+
+
+/* stylelint-disable */
+.e-appbar.e-light {
+  border-bottom: 1px solid var(--color-sf-utility-appbar-border-color-alt1) !important;
+}
+
+.e-appbar.e-horizontal-bottom {
+  border-top: 1px solid var(--color-sf-utility-appbar-border-color-alt1) !important;
+}
+
+.e-bigger .e-appbar,
+.e-appbar.e-bigger {
+  padding: 16px !important;
+  height: 72px !important;
+}
+
+.e-bigger .e-appbar.e-prominent,
+.e-appbar.e-bigger.e-prominent {
+  height: 132px;
+}
+
 .e-appbar {
   -webkit-box-shadow: 0 0 rgba(var(--color-sf-base-black), 0);
           box-shadow: 0 0 rgba(var(--color-sf-base-black), 0);
@@ -8677,6 +8984,10 @@ ejs-sidebar {
   content: "\e8db";
 }
 
+
+
+
+
 .e-stepper {
   position: relative;
 }
@@ -9131,6 +9442,10 @@ ejs-sidebar {
   font-size: 10px;
 }
 
+
+
+
+
 .e-stepper .e-step-notstarted:not(.e-step-disabled) .e-step,
 .e-stepper .e-step-notstarted:not(.e-step-disabled) .e-indicator,
 .e-stepper .e-step-notstarted .e-icons.e-step-indicator {

package/styles/bds-lite.scss

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