@syncfusion/ej2-angular-navigations 21.2.9 → 22.1.34-ngcc

package/styles/pager/material3.scss

@@ -0,0 +1,2 @@
+@import 'ej2-base/styles/material3-definition.scss';
+@import 'ej2-navigations/styles/pager/material3.scss';

package/styles/pager/tailwind-dark.css

@@ -101,7 +101,7 @@
 }
 .e-bigger .e-pager .e-pagerconstant,
 .e-pager.e-bigger .e-pagerconstant {
-  margin-bottom: 2px;
+  margin-bottom: 1px;
   margin-left: 16px;
   line-height: 22px;
 }
@@ -195,33 +195,11 @@
   border-radius: 0;
   padding: 7px 14px 6.5px;
 }
-.e-bigger .e-pager.e-rtl .e-spacing, .e-bigger .e-pager.e-rtl .e-numericitem:hover, .e-bigger .e-pager.e-rtl .e-currentitem,
-.e-pager.e-bigger.e-rtl .e-spacing,
-.e-pager.e-bigger.e-rtl .e-numericitem:hover,
-.e-pager.e-bigger.e-rtl .e-currentitem {
-  margin: 0;
-  padding: 7px 14px;
-}
-.e-bigger .e-pager .e-numericitem:hover:not(.e-np):not(.e-pp):not(.e-active),
-.e-pager.e-bigger .e-numericitem:hover:not(.e-np):not(.e-pp):not(.e-active) {
-  padding: 7px 14px 6.5px;
-}
-.e-bigger .e-pager.e-rtl, .e-bigger .e-pager.e-rtl .e-numericitem:hover, .e-bigger .e-pager.e-rtl .e-currentitem,
-.e-pager.e-bigger.e-rtl,
-.e-pager.e-bigger.e-rtl .e-numericitem:hover,
-.e-pager.e-bigger.e-rtl .e-currentitem {
-  margin: 0;
-  padding: 7px 14px 7px 14px;
-}
-.e-bigger .e-pager.e-rtl .e-numericitem:hover:not(.e-np):not(.e-pp):not(.e-active),
-.e-pager.e-bigger.e-rtl .e-numericitem:hover:not(.e-np):not(.e-pp):not(.e-active) {
-  padding: 7px 14px 7px 14px;
-}
-.e-bigger .e-pager.e-rtl .e-pp, .e-bigger .e-pager.e-rtl .e-np, .e-bigger .e-pager.e-rtl .e-pp:hover, .e-bigger .e-pager.e-rtl .e-np:hover,
-.e-pager.e-bigger.e-rtl .e-pp,
-.e-pager.e-bigger.e-rtl .e-np,
-.e-pager.e-bigger.e-rtl .e-pp:hover,
-.e-pager.e-bigger.e-rtl .e-np:hover {
+.e-bigger .e-pager.e-rtl .e-pp.e-spacing.e-numericitem, .e-bigger .e-pager.e-rtl .e-np.e-spacing.e-numericitem, .e-bigger .e-pager.e-rtl .e-pp.e-spacing.e-numericitem:hover, .e-bigger .e-pager.e-rtl .e-np.e-spacing.e-numericitem:hover,
+.e-pager.e-bigger.e-rtl .e-pp.e-spacing.e-numericitem,
+.e-pager.e-bigger.e-rtl .e-np.e-spacing.e-numericitem,
+.e-pager.e-bigger.e-rtl .e-pp.e-spacing.e-numericitem:hover,
+.e-pager.e-bigger.e-rtl .e-np.e-spacing.e-numericitem:hover {
   font-size: 12px;
   margin-top: 0;
   padding: 7px 12.6px;
@@ -295,6 +273,9 @@
 .e-pager [class^=e-] {
   box-sizing: border-box;
 }
+.e-pager .e-pager-default.e-hide {
+  display: none;
+}
 .e-pager div.e-parentmsgbar {
   float: right;
   padding-bottom: 0;
@@ -310,7 +291,7 @@
   height: 30px;
   margin-left: 10px;
   margin-right: 8px;
-  margin-top: -16px;
+  margin-top: -18px;
   overflow: unset;
   vertical-align: middle;
   width: 90px;
@@ -318,7 +299,7 @@
 .e-pager .e-pagerconstant {
   display: inline-block;
   line-height: 18px;
-  margin: 6px 0 2px 8px;
+  margin: 6px 0 4px 8px;
   overflow: hidden;
   width: auto;
 }
@@ -370,9 +351,6 @@
   padding: 4.5px 11px 7px 11px;
   text-decoration: none;
 }
-.e-pager .e-numericitem:hover:not(.e-np):not(.e-pp):not(.e-active) {
-  padding: 4.5px 11px 7px 11px;
-}
 .e-pager .e-currentitem {
   font-style: normal;
   font-variant: normal;
@@ -516,7 +494,6 @@
     padding-right: 0;
     padding-top: 0;
     text-align: center;
-    vertical-align: top;
     width: calc(60% - 48px);
   }
   .e-pager .e-pagesizes {
@@ -579,12 +556,13 @@
 .e-pager.e-rtl .e-parentmsgbar {
   float: left;
   margin-left: 6px;
+  padding-top: 6px;
 }
 .e-pager.e-rtl .e-pagerdropdown {
-  margin: -16px 16px 0 0;
+  margin: -18px 16px 0 0;
 }
 .e-pager.e-rtl .e-pagerconstant {
-  margin: 6px 8px 2px 8px;
+  margin: 6px 8px 3px 8px;
 }
 .e-pager.e-rtl .e-pagerexternalmsg {
   float: none;
@@ -637,7 +615,7 @@
   border-radius: 0 4px 4px 0;
 }
 .e-pager.e-rtl .e-lastpage:hover {
-  border-radius: 4px 0 0 4px;
+  border-radius: 0 4px 4px 0;
 }
 .e-pager.e-rtl .e-numericcontainer {
   float: none;
@@ -657,9 +635,6 @@
   margin: 0;
   padding: 4.5px 11px 7px 11px;
 }
-.e-pager.e-rtl .e-numericitem:hover:not(.e-np):not(.e-pp):not(.e-active) {
-  padding: 4.5px 11px 7px 11px;
-}
 .e-pager.e-rtl .e-pp, .e-pager.e-rtl .e-np, .e-pager.e-rtl .e-pp:hover, .e-pager.e-rtl .e-np:hover {
   margin-top: 0;
   padding: 4.5px 8.7px 5px 8.7px;
@@ -732,9 +707,6 @@
   color: #fff;
   opacity: 1;
 }
-.e-pager .e-numericitem:hover:not(.e-np):not(.e-pp):not(.e-active) {
-  border-left: 0 solid #4b5563;
-}
 .e-pager .e-numericitem:not(.e-active):not(.e-np):not(.e-pp):hover {
   background-color: #4b5563;
   opacity: 1;

package/styles/pager/tailwind-dark.scss

@@ -1,4 +1 @@
-@import 'ej2-base/styles/tailwind-dark-definition.scss';
-@import 'tailwind-dark-definition.scss';
-@import 'icons/tailwind-dark.scss';
-@import 'all.scss';
+@import 'ej2-navigations/styles/pager/tailwind-dark.scss';

package/styles/pager/tailwind.css

@@ -101,7 +101,7 @@
 }
 .e-bigger .e-pager .e-pagerconstant,
 .e-pager.e-bigger .e-pagerconstant {
-  margin-bottom: 2px;
+  margin-bottom: 1px;
   margin-left: 16px;
   line-height: 22px;
 }
@@ -195,33 +195,11 @@
   border-radius: 0;
   padding: 7px 14px 6.5px;
 }
-.e-bigger .e-pager.e-rtl .e-spacing, .e-bigger .e-pager.e-rtl .e-numericitem:hover, .e-bigger .e-pager.e-rtl .e-currentitem,
-.e-pager.e-bigger.e-rtl .e-spacing,
-.e-pager.e-bigger.e-rtl .e-numericitem:hover,
-.e-pager.e-bigger.e-rtl .e-currentitem {
-  margin: 0;
-  padding: 7px 14px;
-}
-.e-bigger .e-pager .e-numericitem:hover:not(.e-np):not(.e-pp):not(.e-active),
-.e-pager.e-bigger .e-numericitem:hover:not(.e-np):not(.e-pp):not(.e-active) {
-  padding: 7px 14px 6.5px;
-}
-.e-bigger .e-pager.e-rtl, .e-bigger .e-pager.e-rtl .e-numericitem:hover, .e-bigger .e-pager.e-rtl .e-currentitem,
-.e-pager.e-bigger.e-rtl,
-.e-pager.e-bigger.e-rtl .e-numericitem:hover,
-.e-pager.e-bigger.e-rtl .e-currentitem {
-  margin: 0;
-  padding: 7px 14px 7px 14px;
-}
-.e-bigger .e-pager.e-rtl .e-numericitem:hover:not(.e-np):not(.e-pp):not(.e-active),
-.e-pager.e-bigger.e-rtl .e-numericitem:hover:not(.e-np):not(.e-pp):not(.e-active) {
-  padding: 7px 14px 7px 14px;
-}
-.e-bigger .e-pager.e-rtl .e-pp, .e-bigger .e-pager.e-rtl .e-np, .e-bigger .e-pager.e-rtl .e-pp:hover, .e-bigger .e-pager.e-rtl .e-np:hover,
-.e-pager.e-bigger.e-rtl .e-pp,
-.e-pager.e-bigger.e-rtl .e-np,
-.e-pager.e-bigger.e-rtl .e-pp:hover,
-.e-pager.e-bigger.e-rtl .e-np:hover {
+.e-bigger .e-pager.e-rtl .e-pp.e-spacing.e-numericitem, .e-bigger .e-pager.e-rtl .e-np.e-spacing.e-numericitem, .e-bigger .e-pager.e-rtl .e-pp.e-spacing.e-numericitem:hover, .e-bigger .e-pager.e-rtl .e-np.e-spacing.e-numericitem:hover,
+.e-pager.e-bigger.e-rtl .e-pp.e-spacing.e-numericitem,
+.e-pager.e-bigger.e-rtl .e-np.e-spacing.e-numericitem,
+.e-pager.e-bigger.e-rtl .e-pp.e-spacing.e-numericitem:hover,
+.e-pager.e-bigger.e-rtl .e-np.e-spacing.e-numericitem:hover {
   font-size: 12px;
   margin-top: 0;
   padding: 7px 12.6px;
@@ -295,6 +273,9 @@
 .e-pager [class^=e-] {
   box-sizing: border-box;
 }
+.e-pager .e-pager-default.e-hide {
+  display: none;
+}
 .e-pager div.e-parentmsgbar {
   float: right;
   padding-bottom: 0;
@@ -310,7 +291,7 @@
   height: 30px;
   margin-left: 10px;
   margin-right: 8px;
-  margin-top: -16px;
+  margin-top: -18px;
   overflow: unset;
   vertical-align: middle;
   width: 90px;
@@ -318,7 +299,7 @@
 .e-pager .e-pagerconstant {
   display: inline-block;
   line-height: 18px;
-  margin: 6px 0 2px 8px;
+  margin: 6px 0 4px 8px;
   overflow: hidden;
   width: auto;
 }
@@ -370,9 +351,6 @@
   padding: 4.5px 11px 7px 11px;
   text-decoration: none;
 }
-.e-pager .e-numericitem:hover:not(.e-np):not(.e-pp):not(.e-active) {
-  padding: 4.5px 11px 7px 11px;
-}
 .e-pager .e-currentitem {
   font-style: normal;
   font-variant: normal;
@@ -516,7 +494,6 @@
     padding-right: 0;
     padding-top: 0;
     text-align: center;
-    vertical-align: top;
     width: calc(60% - 48px);
   }
   .e-pager .e-pagesizes {
@@ -579,12 +556,13 @@
 .e-pager.e-rtl .e-parentmsgbar {
   float: left;
   margin-left: 6px;
+  padding-top: 6px;
 }
 .e-pager.e-rtl .e-pagerdropdown {
-  margin: -16px 16px 0 0;
+  margin: -18px 16px 0 0;
 }
 .e-pager.e-rtl .e-pagerconstant {
-  margin: 6px 8px 2px 8px;
+  margin: 6px 8px 3px 8px;
 }
 .e-pager.e-rtl .e-pagerexternalmsg {
   float: none;
@@ -637,7 +615,7 @@
   border-radius: 0 4px 4px 0;
 }
 .e-pager.e-rtl .e-lastpage:hover {
-  border-radius: 4px 0 0 4px;
+  border-radius: 0 4px 4px 0;
 }
 .e-pager.e-rtl .e-numericcontainer {
   float: none;
@@ -657,9 +635,6 @@
   margin: 0;
   padding: 4.5px 11px 7px 11px;
 }
-.e-pager.e-rtl .e-numericitem:hover:not(.e-np):not(.e-pp):not(.e-active) {
-  padding: 4.5px 11px 7px 11px;
-}
 .e-pager.e-rtl .e-pp, .e-pager.e-rtl .e-np, .e-pager.e-rtl .e-pp:hover, .e-pager.e-rtl .e-np:hover {
   margin-top: 0;
   padding: 4.5px 8.7px 5px 8.7px;
@@ -732,9 +707,6 @@
   color: #111827;
   opacity: 1;
 }
-.e-pager .e-numericitem:hover:not(.e-np):not(.e-pp):not(.e-active) {
-  border-left: 0 solid #e5e7eb;
-}
 .e-pager .e-numericitem:not(.e-active):not(.e-np):not(.e-pp):hover {
   background-color: #f3f4f6;
   opacity: 1;

package/styles/pager/tailwind.scss

@@ -1,4 +1 @@
-@import 'ej2-base/styles/tailwind-definition.scss';
-@import 'tailwind-definition.scss';
-@import 'icons/tailwind.scss';
-@import 'all.scss';
+@import 'ej2-navigations/styles/pager/tailwind.scss';

package/styles/sidebar/bootstrap-dark.scss

@@ -1,3 +1 @@
-@import 'ej2-base/styles/bootstrap-dark-definition.scss';
-@import 'bootstrap-dark-definition.scss';
-@import 'all.scss';
+@import 'ej2-navigations/styles/sidebar/bootstrap-dark.scss';

package/styles/sidebar/bootstrap.scss

@@ -1,3 +1 @@
-@import 'ej2-base/styles/bootstrap-definition.scss';
-@import 'bootstrap-definition.scss';
-@import 'all.scss';
+@import 'ej2-navigations/styles/sidebar/bootstrap.scss';

package/styles/sidebar/bootstrap4.scss

@@ -1,3 +1 @@
-@import 'ej2-base/styles/bootstrap4-definition.scss';
-@import 'bootstrap4-definition.scss';
-@import 'all.scss';
+@import 'ej2-navigations/styles/sidebar/bootstrap4.scss';

package/styles/sidebar/bootstrap5-dark.scss

@@ -1,3 +1 @@
-@import 'ej2-base/styles/bootstrap5-dark-definition.scss';
-@import 'bootstrap5-dark-definition.scss';
-@import 'all.scss';
+@import 'ej2-navigations/styles/sidebar/bootstrap5-dark.scss';

package/styles/sidebar/bootstrap5.scss

@@ -1,3 +1 @@
-@import 'ej2-base/styles/bootstrap5-definition.scss';
-@import 'bootstrap5-definition.scss';
-@import 'all.scss';
+@import 'ej2-navigations/styles/sidebar/bootstrap5.scss';

package/styles/sidebar/fabric-dark.scss

@@ -1,3 +1 @@
-@import 'ej2-base/styles/fabric-dark-definition.scss';
-@import 'fabric-dark-definition.scss';
-@import 'all.scss';
+@import 'ej2-navigations/styles/sidebar/fabric-dark.scss';

package/styles/sidebar/fabric.scss

@@ -1,3 +1 @@
-@import 'ej2-base/styles/fabric-definition.scss';
-@import 'fabric-definition.scss';
-@import 'all.scss';
+@import 'ej2-navigations/styles/sidebar/fabric.scss';

package/styles/sidebar/fluent-dark.scss

@@ -1,3 +1 @@
-@import 'ej2-base/styles/fluent-dark-definition.scss';
-@import 'fluent-dark-definition.scss';
-@import 'all.scss';
+@import 'ej2-navigations/styles/sidebar/fluent-dark.scss';

package/styles/sidebar/fluent.scss

@@ -1,3 +1 @@
-@import 'ej2-base/styles/fluent-definition.scss';
-@import 'fluent-definition.scss';
-@import 'all.scss';
+@import 'ej2-navigations/styles/sidebar/fluent.scss';

package/styles/sidebar/highcontrast-light.scss

@@ -1,3 +1 @@
-@import 'ej2-base/styles/highcontrast-light-definition.scss';
-@import 'highcontrast-light-definition.scss';
-@import 'all.scss';
+@import 'ej2-navigations/styles/sidebar/highcontrast-light.scss';

package/styles/sidebar/highcontrast.scss

@@ -1,3 +1 @@
-@import 'ej2-base/styles/highcontrast-definition.scss';
-@import 'highcontrast-definition.scss';
-@import 'all.scss';
+@import 'ej2-navigations/styles/sidebar/highcontrast.scss';

package/styles/sidebar/material-dark.scss

@@ -1,3 +1 @@
-@import 'ej2-base/styles/material-dark-definition.scss';
-@import 'material-dark-definition.scss';
-@import 'all.scss';
+@import 'ej2-navigations/styles/sidebar/material-dark.scss';

package/styles/sidebar/material.scss

@@ -1,3 +1 @@
-@import 'ej2-base/styles/material-definition.scss';
-@import 'material-definition.scss';
-@import 'all.scss';
+@import 'ej2-navigations/styles/sidebar/material.scss';

package/styles/sidebar/material3-dark.css

@@ -0,0 +1,204 @@
+@import url("https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,900&display=swap");
+:root {
+  --color-sf-black: 0, 0, 0;
+  --color-sf-white: 255, 255, 255;
+  --color-sf-primary: 208, 188, 255;
+  --color-sf-primary-container: 79, 55, 139;
+  --color-sf-secondary: 204, 194, 220;
+  --color-sf-secondary-container: 74, 68, 88;
+  --color-sf-tertiary: 239, 184, 200;
+  --color-sf-tertiary-container: 99, 59, 72;
+  --color-sf-surface: 28, 27, 31;
+  --color-sf-surface-variant: 73, 69, 79;
+  --color-sf-background: var(--color-sf-surface);
+  --color-sf-on-primary: 55, 30, 115;
+  --color-sf-on-primary-container: 234, 221, 255;
+  --color-sf-on-secondary: 51, 45, 65;
+  --color-sf-on-secondary-container: 232, 222, 248;
+  --color-sf-on-tertiary: 73, 37, 50;
+  --color-sf-on-tertiary-containe: 255, 216, 228;
+  --color-sf-on-surface: 230, 225, 229;
+  --color-sf-on-surface-variant: 202, 196, 208;
+  --color-sf-on-background: 230, 225, 229;
+  --color-sf-outline: 147, 143, 153;
+  --color-sf-outline-variant: 68, 71, 70;
+  --color-sf-shadow: 0, 0, 0;
+  --color-sf-surface-tint-color: 208, 188, 255;
+  --color-sf-inverse-surface: 230, 225, 229;
+  --color-sf-inverse-on-surface: 49, 48, 51;
+  --color-sf-inverse-primary: 103, 80, 164;
+  --color-sf-scrim: 0, 0, 0;
+  --color-sf-error: 242, 184, 181;
+  --color-sf-error-container: 140, 29, 24;
+  --color-sf-on-error: 96, 20, 16;
+  --color-sf-on-error-container: 249, 222, 220;
+  --color-sf-success: 83, 202, 23;
+  --color-sf-success-container: 22, 62, 2;
+  --color-sf-on-success: 13, 39, 0;
+  --color-sf-on-success-container: 183, 250, 150;
+  --color-sf-info: 71, 172, 251;
+  --color-sf-info-container: 0, 67, 120;
+  --color-sf-on-info: 0, 51, 91;
+  --color-sf-on-info-container: 173, 219, 255;
+  --color-sf-warning: 245, 180, 130;
+  --color-sf-warning-container: 123, 65, 0;
+  --color-sf-on-warning: 99, 52, 0;
+  --color-sf-on-warning-container: 255, 220, 193;
+  --color-sf-spreadsheet-gridline: 231, 224, 236;
+  --color-sf-shadow-focus-ring1: 0 0 0 1px #000000, 0 0 0 3px #ffffff;
+  --color-sf-success-text: 0, 0, 0;
+  --color-sf-warning-text: 0, 0, 0;
+  --color-sf-info-text: 0, 0, 0;
+  --color-sf-danger-text: 0, 0, 0;
+  --color-sf-diagram-palette-background: var(--color-sf-inverse-surface);
+  --color-sf-content-text-color-alt2: var(--color-sf-on-secondary);
+}
+
+/*! component's theme wise override material 3 definitions and variables */ /* stylelint-disable-line no-empty-source */ /* stylelint-disable-line no-empty-source */
+ejs-sidebar {
+  display: none;
+}
+
+.e-sidebar-display {
+  display: block;
+}
+
+.e-sidebar {
+  /* stylelint-disable property-no-vendor-prefix */
+  -webkit-tap-highlight-color: transparent;
+  background: linear-gradient(0deg, rgba(var(--color-sf-primary), 0.08), rgba(var(--color-sf-primary), 0.08)), rgba(var(--color-sf-surface));
+  height: 100%;
+  overflow: auto;
+  position: fixed;
+  top: 0;
+  transition: none;
+  vertical-align: middle;
+  visibility: hidden;
+  will-change: transform;
+}
+.e-sidebar.e-right.e-open {
+  transform: translateX(0%);
+  transition: transform 0.5s ease;
+  visibility: visible;
+}
+.e-sidebar.e-right.e-close {
+  box-shadow: none;
+  transform: translateX(100%);
+  transition: transform 0.5s ease, visibility 500ms;
+  visibility: hidden;
+}
+.e-sidebar.e-left.e-open {
+  transform: translateX(0%);
+  transition: transform 0.5s ease;
+  visibility: visible;
+}
+.e-sidebar.e-left.e-transition.e-close, .e-sidebar.e-right.e-transition.e-close {
+  transition: transform 0.5s ease, visibility 500ms;
+}
+.e-sidebar.e-left.e-close {
+  box-shadow: none;
+  transform: translateX(-100%);
+  visibility: hidden;
+}
+.e-sidebar.e-right.e-close {
+  box-shadow: none;
+  transform: translateX(100%);
+  transition: transform 0.5s ease, visibility 500ms;
+  visibility: hidden;
+}
+.e-sidebar.e-right {
+  border-left: 1px solid transparent;
+  left: auto;
+  right: 0;
+  top: 0;
+}
+.e-sidebar.e-left {
+  border-right: 1px solid transparent;
+  left: 0;
+  right: auto;
+  top: 0;
+}
+.e-sidebar.e-left.e-close.e-dock {
+  transform: translateX(0%);
+  transition: width 0.5s ease, visibility 500ms;
+  visibility: visible;
+}
+.e-sidebar.e-right.e-close.e-dock {
+  transform: translateX(0%);
+  transition: width 0.5s ease, visibility 500ms;
+  visibility: visible;
+}
+.e-sidebar.e-left.e-open.e-dock.e-blazor-dock, .e-sidebar.e-right.e-open.e-dock.e-blazor-dock {
+  transition: width 0.5s ease, visibility 500ms;
+}
+.e-sidebar.e-left.e-open.e-disable-animation, .e-sidebar.e-right.e-open.e-disable-animation, .e-sidebar.e-right.e-close.e-disable-animation, .e-sidebar.e-left.e-close.e-disable-animation {
+  transition: none;
+}
+.e-sidebar.e-visibility {
+  visibility: hidden;
+}
+.e-sidebar.e-over {
+  box-shadow: rgba(var(--color-sf-shadow));
+}
+
+.e-sidebar-absolute {
+  position: absolute;
+}
+
+.e-sidebar-context {
+  overflow-x: hidden;
+  position: relative;
+}
+
+.e-backdrop {
+  background-color: rgba(var(--color-sf-scrim), 0.5);
+  height: 100%;
+  left: 0;
+  pointer-events: auto;
+  top: 0;
+  width: auto;
+  z-index: 999;
+}
+
+.e-content-animation {
+  transition: margin 0.5s ease, transform 0.5s ease;
+}
+.e-content-animation.e-overlay {
+  box-sizing: border-box;
+  overflow: auto;
+  -webkit-user-select: none;
+      -ms-user-select: none;
+          user-select: none;
+}
+
+.e-disable-interaction {
+  pointer-events: none;
+  -ms-touch-action: none;
+      touch-action: none;
+}
+
+/* stylelint-disable */
+.e-sidebar-overflow {
+  overflow-x: hidden !important;
+}
+
+/* stylelint-enable */
+.e-sidebar-overlay {
+  background-color: rgba(var(--color-sf-scrim), 0.5);
+  height: 100%;
+  left: 0;
+  opacity: 0.5;
+  pointer-events: auto;
+  position: fixed;
+  top: 0;
+  width: 100%;
+  z-index: 999;
+}
+
+.e-content-placeholder.e-sidebar.e-placeholder-sidebar {
+  left: 0;
+  position: fixed;
+  right: auto;
+  top: 0;
+  visibility: visible;
+}

package/styles/sidebar/material3-dark.scss

@@ -0,0 +1,2 @@
+@import 'ej2-base/styles/material3-dark-definition.scss';
+@import 'ej2-navigations/styles/sidebar/material3-dark.scss';