@syncfusion/ej2-navigations 32.1.19 → 32.1.24

package/styles/bds.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);
@@ -663,6 +671,10 @@
   border-left-color: var(--color-sf-border-secondary);
 }
 
+
+
+
+
 /*! Pager bigger */
 .e-bigger .e-pager,
 .e-pager.e-bigger {
@@ -975,6 +987,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;
@@ -1093,6 +1121,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);
@@ -1197,6 +1241,22 @@
   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: 48px;
@@ -1249,6 +1309,11 @@
   line-height: normal;
 }
 
+
+
+
+
+/*! component's theme wise override definitions and variables */
 /*! v-scroll layout */
 .e-vscroll {
   display: block;
@@ -1352,6 +1417,11 @@
   width: 100%;
 }
 
+
+
+
+
+/*! component's theme wise override definitions and variables */
 /*! v-scroll theme */
 .e-vscroll .e-icons {
   color: var(--color-sf-fg-secondary);
@@ -1426,6 +1496,11 @@
   content: "";
 }
 
+
+
+
+
+/*! component's theme wise override definitions and variables */
 .e-bigger .e-vscroll:not(.e-scroll-device),
 .e-vscroll.e-bigger:not(.e-scroll-device) {
   padding: 48px 0;
@@ -1516,6 +1591,10 @@
   line-height: normal;
 }
 
+
+
+
+
 .e-toolbar {
   border-radius: 0;
   display: block;
@@ -1558,7 +1637,10 @@
 .e-toolbar.e-hidden {
   display: none;
 }
-.e-toolbar.e-overlay .e-toolbar-item:not(.e-separator):not(.e-spacer) .e-tbar-btn {
+.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 {
@@ -2119,6 +2201,10 @@
   padding-left: 0;
 }
 
+
+
+
+
 /* stylelint-disable property-no-vendor-prefix */
 .e-toolbar {
   -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
@@ -2401,6 +2487,10 @@
   border-width: 0 1px 0 0;
 }
 
+
+
+
+
 .e-bigger .e-toolbar,
 .e-toolbar.e-bigger {
   height: 56px;
@@ -2675,6 +2765,10 @@
           transform: rotate(-180deg);
 }
 
+
+
+
+
 .e-accordion {
   display: block;
   position: relative;
@@ -2846,6 +2940,10 @@
   padding: 0 0 0 8px;
 }
 
+
+
+
+
 .e-accordion {
   -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
   background: var(--color-sf-bg-primary-alt);
@@ -3111,6 +3209,10 @@
   font-size: 14px;
 }
 
+
+
+
+
 .e-bigger .e-accordion .e-acrdn-item .e-acrdn-header .e-acrdn-header-content,
 .e-accordion.e-bigger .e-acrdn-item .e-acrdn-header .e-acrdn-header-content {
   font-size: 16px;
@@ -3227,6 +3329,10 @@
   content: "\e765";
 }
 
+
+
+
+
 .e-carousel {
   display: block;
   margin: 0;
@@ -3512,6 +3618,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) {
@@ -3596,6 +3706,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;
@@ -3828,6 +3952,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);
@@ -3911,6 +4049,20 @@
   border-color: var(--color-sf-border-secondary);
 }
 
+
+
+
+
+/* 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-bigger .e-contextmenu-wrapper ul,
 .e-bigger.e-contextmenu-wrapper ul,
 .e-bigger .e-contextmenu-container ul,
@@ -4063,6 +4215,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;
@@ -5896,6 +6079,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;
@@ -6962,6 +7176,37 @@
   color: var(--color-sf-text-secondary);
 }
 
+
+
+
+
+@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-bigger .e-tab .e-tab-header,
 .e-tab.e-bigger .e-tab-header {
   height: 46px;
@@ -8335,6 +8580,12 @@
   content: "\e839";
 }
 
+
+
+
+
+/*! TreeView's theme wise override definitions and variables */
+/* stylelint-disable */
 /* stylelint-disable property-no-vendor-prefix */
 @-webkit-keyframes rotation {
   from {
@@ -8782,6 +9033,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;
@@ -8952,6 +9209,12 @@
   border: 1px solid var(--color-sf-brand-primary);
 }
 
+
+
+
+
+/*! TreeView's theme wise override definitions and variables */
+/* stylelint-disable */
 .e-bigger .e-treeview .e-ul,
 .e-treeview.e-bigger .e-ul {
   padding: 0 0 0 16px;
@@ -9235,7 +9498,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;
 }
@@ -9520,6 +9825,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;
@@ -10042,6 +10361,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);
@@ -10239,6 +10572,20 @@ ejs-sidebar {
   color: var(--color-sf-text-primary);
 }
 
+
+
+
+
+/* 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-bigger .e-menu-wrapper ul,
 .e-bigger.e-menu-wrapper ul,
 .e-bigger .e-menu-container ul,
@@ -10589,6 +10936,10 @@ ejs-sidebar {
   height: 21px;
 }
 
+
+
+
+
 .e-breadcrumb {
   display: block;
 }
@@ -10839,6 +11190,10 @@ ejs-sidebar {
   visibility: hidden;
 }
 
+
+
+
+
 .e-breadcrumb .e-breadcrumb-item .e-breadcrumb-text {
   color: var(--color-sf-text-secondary);
 }
@@ -10910,6 +11265,10 @@ ejs-sidebar {
   color: var(--color-sf-text-secondary-hover);
 }
 
+
+
+
+
 .e-bigger.e-breadcrumb .e-breadcrumb-item .e-breadcrumb-text,
 .e-bigger .e-breadcrumb .e-breadcrumb-item .e-breadcrumb-text {
   padding: 2px 12px;
@@ -11021,6 +11380,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;
@@ -11102,6 +11485,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);
@@ -11288,6 +11695,30 @@ ejs-sidebar {
   color: inherit;
 }
 
+
+
+
+
+/* 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-bigger .e-appbar,
 .e-appbar.e-bigger {
   height: 56px;
@@ -11306,6 +11737,10 @@ ejs-sidebar {
   content: "\e8db";
 }
 
+
+
+
+
 .e-stepper {
   position: relative;
 }
@@ -11760,6 +12195,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 {
@@ -11925,6 +12364,10 @@ ejs-sidebar {
   background: var(--color-sf-border-error);
 }
 
+
+
+
+
 .e-bigger.e-stepper.e-step-type-indicator .e-step-container:not(.e-step-item.e-step-label.e-step-text) .e-icons.e-step-indicator,
 .e-bigger .e-stepper.e-step-type-indicator .e-step-container:not(.e-step-item.e-step-label.e-step-text) .e-icons.e-step-indicator {
   font-size: 40px;