@syncfusion/ej2-navigations 32.2.8 → 33.1.44

package/styles/pager/_tailwind3-definition.scss

@@ -17,7 +17,7 @@ $pager-content-opacity: 1 !default;
 $pager-bigger-new-container-rtl-margin: 0 0 -5px 0 !default;
 $pager-next-icon-margin-left: 0 !default;
 $pager-container-rtl-margin: 0 .3px -4px 0 !default;
-$pager-rtl-navigation-icon-padding: 8.85px 8.6px 7px 8.6px !default;
+$pager-rtl-navigation-icon-padding: 8.85px 8.6px 8px 8.6px !default;
 $pager-rtl-numeric-margin: 0 !default;
 $pager-item-hover-borders-width: 0 !default;
 $pager-tripledot-font-size: 14px !default;
@@ -52,9 +52,9 @@ $pager-number-hover-bg-color: $content-bg-color-hover !default;
 $pager-font-family: $font-family !default;
 $pager-font-weight: bold !default;
 $pager-messagebar-padding-right: 0 !default;
-$pager-tripledot-padding: 6.1px 9.92px 9.9px 9.9px !default;
-$pager-numeric-icon-padding: 6.1px 11.85px 9.8px 11.8px !default;
-$pager-pagecontainer-icon-padding: 8.85px 8.6px 7px 8.6px !default;
+$pager-tripledot-padding: 6.2px 9.92px 9.9px 9.9px !default;
+$pager-numeric-icon-padding: 6.2px 11.85px 9.8px 11.8px !default;
+$pager-pagecontainer-icon-padding: 8.85px 8.6px 8px 8.6px !default;
 $pager-bigger-pagecontainer-icon-padding: 16px 14px 14px 14px !default;
 $pager-hover-color: $content-text-color-hover !default;
 $pager-mhover-color: $primary !default;
@@ -68,9 +68,9 @@ $pager-bigger-icon-font-size: 18px !default;
 $pager-bigger-font-size: 16px !default;
 $pager-bigger-padding: 7px 8px 7px 8px !default;
 $pager-bigger-pagercontainer-margin: 0 0 -6px .8px !default;
-$pager-bigger-pagercontainer-icons-padding: 11.7px 11.6px 8.7px 11.6px !default;
+$pager-bigger-pagercontainer-icons-padding: 11.7px 11.6px 9.2px 11.6px !default;
 $pager-bigger-pagercontainer-icons-marign-right: 0 !default;
-$pager-bigger-current-item-padding: 10.7px 15.48px 11.5px 15.1px !default;
+$pager-bigger-current-item-padding: 11.4px 15.48px 11.5px 15.1px !default;
 $pager-letter-spacing: 0 !default;
 $pager-bigger-icons-align: middle !default;
 $pager-bigger-messagebar-padding-right: 0 !default;
@@ -91,15 +91,15 @@ $pager-dropdown-height: 32px !default;
 $pager-dropdown-width: 90px !default;
 $pager-bigger-dropdown-width: 90px !default;
 $pager-constant-margin: 0 0 4px 8px !default;
-$pager-bigger-letter-spacing: 12.6px 13.92px 12px 13.9px !default;
+$pager-bigger-letter-spacing: 13.3px 13.92px 12px 13.9px !default;
 $pager-tripledot-rtl-margin-top: 0 !default;
-$pager-tripledot-rtl-padding: 6.1px 9.92px 9.9px 9.9px !default;
+$pager-tripledot-rtl-padding: 6.2px 9.92px 9.9px 9.9px !default;
 $pager-rtl-pagerconstant-margin-top: 0 8px 6px 0 !default;
 $pager-rtl-pagerdropdown-margin: -17px 16px 0 0 !default;
 $pager-tripledot-rtl-bigger-margin-top: 0 !default;
 $pager-bigger-rtl-numeric-margin: 0 !default;
 $pager-bigger-container-rtl-margin: 0 0 -4px 0 !default;
-$pager-activeitem-padding: 6.1px 11.85px 9.8px 11.8px !default;
+$pager-activeitem-padding: 6.2px 11.85px 9.8px 11.8px !default;
 $pager-bigger-activeitem-padding: 12px 15px 13px !default;
 $pager-rtl-pagerdropdown-bigger-margin: -21px 16px 0 0 !default;
 $pager-rtl-pagerconstant-bigger-margin-top: 0 16px 7px 0 !default;

package/styles/pager/bootstrap5-dark.css

@@ -103,7 +103,7 @@
   text-align: center;
 }
 .e-pager .e-numericitem.e-currentitem, .e-pager .e-numericitem.e-currentitem:hover {
-  padding: 7.4px 10.5px 8.4px 9.5px;
+  padding: 7.4px 10.5px 9.2px 9.5px;
 }
 .e-pager div.e-pagermsgdiv {
   padding-right: 6px;
@@ -121,7 +121,7 @@
 .e-pager .e-currentitem {
   border-radius: 0;
   cursor: pointer;
-  padding: 10px 12.5px 11.5px;
+  padding: 10px 12.5px 11.6px;
   text-decoration: none;
 }
 .e-pager .e-currentitem {
@@ -224,14 +224,14 @@
 .e-pager .e-pp:hover,
 .e-pager .e-np:hover {
   font-size: 14px;
-  padding: 10.4px 10.5px 11.4px;
+  padding: 10.4px 10.5px 11.6px;
   font-weight: bold;
   letter-spacing: 0;
 }
 .e-pager .e-np.e-focused,
 .e-pager .e-pp.e-focused {
   line-height: 1;
-  padding: 10.4px 10.5px 11.4px;
+  padding: 10.4px 10.5px 11.6px;
 }
 .e-pager.e-adaptive {
   display: -webkit-box;
@@ -354,7 +354,7 @@
   direction: rtl;
 }
 .e-pager.e-rtl .e-numericitem.e-currentitem, .e-pager.e-rtl .e-numericitem.e-currentitem:hover {
-  padding: 7px 10.5px 8px 9.5px;
+  padding: 8px 10.5px 8.5px 9.5px;
 }
 .e-pager.e-rtl .e-numericitem.e-currentitem {
   border-left-color: rgb(134, 182.5, 254);
@@ -655,7 +655,7 @@
 .e-pager.e-bigger .e-pagercontainer .e-lastpage,
 .e-pager.e-bigger .e-pagercontainer .e-nextpagedisabled,
 .e-pager.e-bigger .e-pagercontainer .e-lastpagedisabled {
-  padding: 16px 14px 14px;
+  padding: 16.3px 14px 14px;
 }
 .e-bigger .e-pager .e-pagerconstant,
 .e-pager.e-bigger .e-pagerconstant {
@@ -689,7 +689,7 @@
 .e-bigger .e-pager .e-numericitem.e-currentitem, .e-bigger .e-pager .e-numericitem.e-currentitem:hover,
 .e-pager.e-bigger .e-numericitem.e-currentitem,
 .e-pager.e-bigger .e-numericitem.e-currentitem:hover {
-  padding: 9px 13px 10px 12px;
+  padding: 9.7px 13px 10.4px 12px;
 }
 .e-bigger .e-pager .e-pp.e-spacing,
 .e-bigger .e-pager .e-np.e-spacing,
@@ -699,7 +699,7 @@
 .e-pager.e-bigger .e-np.e-spacing,
 .e-pager.e-bigger .e-pp.e-spacing:hover,
 .e-pager.e-bigger .e-np.e-spacing:hover {
-  padding: 14px 14px 13px;
+  padding: 14px 14px 13.2px;
 }
 .e-bigger .e-pager .e-spacing,
 .e-bigger .e-pager .e-numericitem:hover,
@@ -708,7 +708,7 @@
 .e-pager.e-bigger .e-numericitem:hover,
 .e-pager.e-bigger .e-currentitem {
   border-radius: 0;
-  padding: 12px 15px 13px;
+  padding: 12.2px 15px 13px;
 }
 .e-bigger .e-pager.e-rtl .e-spacing,
 .e-bigger .e-pager.e-rtl .e-numericitem:hover,
@@ -717,7 +717,7 @@
 .e-pager.e-bigger.e-rtl .e-numericitem:hover,
 .e-pager.e-bigger.e-rtl .e-currentitem {
   margin: 0;
-  padding: 14px 14px 13px;
+  padding: 14px 14px 13.2px;
 }
 .e-bigger .e-pager.e-rtl .e-pagerdropdown,
 .e-pager.e-bigger.e-rtl .e-pagerdropdown {
@@ -761,7 +761,7 @@
 .e-bigger .e-pager.e-rtl .e-numericitem.e-currentitem:hover,
 .e-pager.e-bigger.e-rtl .e-numericitem.e-currentitem,
 .e-pager.e-bigger.e-rtl .e-numericitem.e-currentitem:hover {
-  padding: 9px 13px 10px 12px;
+  padding: 11.3px 13px 10.4px 12px;
 }
 .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,
@@ -801,7 +801,7 @@
 .e-pager.e-bigger .e-pagercontainer .e-nextpagedisabled,
 .e-pager.e-bigger .e-pagercontainer .e-lastpagedisabled {
   margin-right: 0;
-  padding: 16px 14px 14px;
+  padding: 16.3px 14px 14px;
 }
 .e-bigger .e-pager .e-pp,
 .e-bigger .e-pager .e-np,

package/styles/pager/bootstrap5.3.css

@@ -271,7 +271,7 @@
   text-align: center;
 }
 .e-pager .e-numericitem.e-currentitem, .e-pager .e-numericitem.e-currentitem:hover {
-  padding: 7.4px 10.5px 8.4px 9.5px;
+  padding: 7.4px 10.5px 9.2px 9.5px;
 }
 .e-pager div.e-pagermsgdiv {
   padding-right: 6px;
@@ -522,7 +522,7 @@
   direction: rtl;
 }
 .e-pager.e-rtl .e-numericitem.e-currentitem, .e-pager.e-rtl .e-numericitem.e-currentitem:hover {
-  padding: 7px 10.5px 8px 9.5px;
+  padding: 8px 10.5px 8.5px 9.5px;
 }
 .e-pager.e-rtl .e-numericitem.e-currentitem {
   border-left-color: var(--color-sf-primary-light);
@@ -1025,7 +1025,7 @@
 .e-bigger .e-pager .e-numericitem.e-currentitem, .e-bigger .e-pager .e-numericitem.e-currentitem:hover,
 .e-pager.e-bigger .e-numericitem.e-currentitem,
 .e-pager.e-bigger .e-numericitem.e-currentitem:hover {
-  padding: 9px 13px 10px 12px;
+  padding: 9.7px 13px 10.4px 12px;
 }
 .e-bigger .e-pager .e-pp.e-spacing,
 .e-bigger .e-pager .e-np.e-spacing,
@@ -1097,7 +1097,7 @@
 .e-bigger .e-pager.e-rtl .e-numericitem.e-currentitem:hover,
 .e-pager.e-bigger.e-rtl .e-numericitem.e-currentitem,
 .e-pager.e-bigger.e-rtl .e-numericitem.e-currentitem:hover {
-  padding: 9px 13px 10px 12px;
+  padding: 11.3px 13px 10.4px 12px;
 }
 .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,

package/styles/pager/bootstrap5.css

@@ -103,7 +103,7 @@
   text-align: center;
 }
 .e-pager .e-numericitem.e-currentitem, .e-pager .e-numericitem.e-currentitem:hover {
-  padding: 7.4px 10.5px 8.4px 9.5px;
+  padding: 7.4px 10.5px 9.2px 9.5px;
 }
 .e-pager div.e-pagermsgdiv {
   padding-right: 6px;
@@ -121,7 +121,7 @@
 .e-pager .e-currentitem {
   border-radius: 0;
   cursor: pointer;
-  padding: 10px 12.5px 11.5px;
+  padding: 10px 12.5px 11.6px;
   text-decoration: none;
 }
 .e-pager .e-currentitem {
@@ -224,14 +224,14 @@
 .e-pager .e-pp:hover,
 .e-pager .e-np:hover {
   font-size: 14px;
-  padding: 10.4px 10.5px 11.4px;
+  padding: 10.4px 10.5px 11.6px;
   font-weight: bold;
   letter-spacing: 0;
 }
 .e-pager .e-np.e-focused,
 .e-pager .e-pp.e-focused {
   line-height: 1;
-  padding: 10.4px 10.5px 11.4px;
+  padding: 10.4px 10.5px 11.6px;
 }
 .e-pager.e-adaptive {
   display: -webkit-box;
@@ -354,7 +354,7 @@
   direction: rtl;
 }
 .e-pager.e-rtl .e-numericitem.e-currentitem, .e-pager.e-rtl .e-numericitem.e-currentitem:hover {
-  padding: 7px 10.5px 8px 9.5px;
+  padding: 8px 10.5px 8.5px 9.5px;
 }
 .e-pager.e-rtl .e-numericitem.e-currentitem {
   border-left-color: rgb(134, 182.5, 254);
@@ -655,7 +655,7 @@
 .e-pager.e-bigger .e-pagercontainer .e-lastpage,
 .e-pager.e-bigger .e-pagercontainer .e-nextpagedisabled,
 .e-pager.e-bigger .e-pagercontainer .e-lastpagedisabled {
-  padding: 16px 14px 14px;
+  padding: 16.3px 14px 14px;
 }
 .e-bigger .e-pager .e-pagerconstant,
 .e-pager.e-bigger .e-pagerconstant {
@@ -689,7 +689,7 @@
 .e-bigger .e-pager .e-numericitem.e-currentitem, .e-bigger .e-pager .e-numericitem.e-currentitem:hover,
 .e-pager.e-bigger .e-numericitem.e-currentitem,
 .e-pager.e-bigger .e-numericitem.e-currentitem:hover {
-  padding: 9px 13px 10px 12px;
+  padding: 9.7px 13px 10.4px 12px;
 }
 .e-bigger .e-pager .e-pp.e-spacing,
 .e-bigger .e-pager .e-np.e-spacing,
@@ -699,7 +699,7 @@
 .e-pager.e-bigger .e-np.e-spacing,
 .e-pager.e-bigger .e-pp.e-spacing:hover,
 .e-pager.e-bigger .e-np.e-spacing:hover {
-  padding: 14px 14px 13px;
+  padding: 14px 14px 13.2px;
 }
 .e-bigger .e-pager .e-spacing,
 .e-bigger .e-pager .e-numericitem:hover,
@@ -708,7 +708,7 @@
 .e-pager.e-bigger .e-numericitem:hover,
 .e-pager.e-bigger .e-currentitem {
   border-radius: 0;
-  padding: 12px 15px 13px;
+  padding: 12.2px 15px 13px;
 }
 .e-bigger .e-pager.e-rtl .e-spacing,
 .e-bigger .e-pager.e-rtl .e-numericitem:hover,
@@ -717,7 +717,7 @@
 .e-pager.e-bigger.e-rtl .e-numericitem:hover,
 .e-pager.e-bigger.e-rtl .e-currentitem {
   margin: 0;
-  padding: 14px 14px 13px;
+  padding: 14px 14px 13.2px;
 }
 .e-bigger .e-pager.e-rtl .e-pagerdropdown,
 .e-pager.e-bigger.e-rtl .e-pagerdropdown {
@@ -761,7 +761,7 @@
 .e-bigger .e-pager.e-rtl .e-numericitem.e-currentitem:hover,
 .e-pager.e-bigger.e-rtl .e-numericitem.e-currentitem,
 .e-pager.e-bigger.e-rtl .e-numericitem.e-currentitem:hover {
-  padding: 9px 13px 10px 12px;
+  padding: 11.3px 13px 10.4px 12px;
 }
 .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,
@@ -801,7 +801,7 @@
 .e-pager.e-bigger .e-pagercontainer .e-nextpagedisabled,
 .e-pager.e-bigger .e-pagercontainer .e-lastpagedisabled {
   margin-right: 0;
-  padding: 16px 14px 14px;
+  padding: 16.3px 14px 14px;
 }
 .e-bigger .e-pager .e-pp,
 .e-bigger .e-pager .e-np,

package/styles/pager/tailwind3.css

@@ -266,7 +266,7 @@
 .e-pager .e-currentitem {
   border-radius: calc(var(--e-radius) * 0);
   cursor: pointer;
-  padding: 6.1px 11.85px 9.8px 11.8px;
+  padding: 6.2px 11.85px 9.8px 11.8px;
   text-decoration: none;
 }
 .e-pager .e-currentitem {
@@ -299,7 +299,7 @@
   margin-right: 0;
   margin-top: 0;
   min-width: 26px;
-  padding: 8.85px 8.6px 7px 8.6px;
+  padding: 8.85px 8.6px 8px 8.6px;
   vertical-align: sub;
 }
 .e-pager .e-pagercontainer .e-lastpage,
@@ -369,14 +369,14 @@
 .e-pager .e-pp:hover,
 .e-pager .e-np:hover {
   font-size: 14px;
-  padding: 6.1px 9.92px 9.9px 9.9px;
+  padding: 6.2px 9.92px 9.9px 9.9px;
   font-weight: bold;
   letter-spacing: 0;
 }
 .e-pager .e-np.e-focused,
 .e-pager .e-pp.e-focused {
   line-height: 1;
-  padding: 6.1px 9.92px 9.9px 9.9px;
+  padding: 6.2px 9.92px 9.9px 9.9px;
 }
 .e-pager.e-adaptive {
   display: -webkit-box;
@@ -532,7 +532,7 @@
   padding: 0;
 }
 .e-pager.e-rtl .e-firstpage, .e-pager.e-rtl .e-prevpage, .e-pager.e-rtl .e-firstpagedisabled, .e-pager.e-rtl .e-prevpagedisabled, .e-pager.e-rtl .e-nextpage, .e-pager.e-rtl .e-lastpage, .e-pager.e-rtl .e-nextpagedisabled, .e-pager.e-rtl .e-lastpagedisabled {
-  padding: 8.85px 8.6px 7px 8.6px;
+  padding: 8.85px 8.6px 8px 8.6px;
 }
 .e-pager.e-rtl .e-firstpage::before, .e-pager.e-rtl .e-firstpage:hover, .e-pager.e-rtl .e-firstpagedisabled::before {
   content: "\e701";
@@ -579,11 +579,11 @@
 }
 .e-pager.e-rtl .e-spacing, .e-pager.e-rtl .e-numericitem:hover, .e-pager.e-rtl .e-currentitem {
   margin: 0;
-  padding: 6.1px 11.85px 9.8px 11.8px;
+  padding: 6.2px 11.85px 9.8px 11.8px;
 }
 .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: 6.1px 9.92px 9.9px 9.9px;
+  padding: 6.2px 9.92px 9.9px 9.9px;
 }
 .e-pager.e-rtl.e-adaptive.e-rtl div.e-parentmsgbar {
   margin: 0 5px;
@@ -996,7 +996,7 @@
 .e-pager.e-bigger .e-np.e-spacing,
 .e-pager.e-bigger .e-pp.e-spacing:hover,
 .e-pager.e-bigger .e-np.e-spacing:hover {
-  padding: 12.6px 13.92px 12px 13.9px;
+  padding: 13.3px 13.92px 12px 13.9px;
 }
 .e-bigger .e-pager .e-spacing,
 .e-bigger .e-pager .e-numericitem:hover,
@@ -1005,7 +1005,7 @@
 .e-pager.e-bigger .e-numericitem:hover,
 .e-pager.e-bigger .e-currentitem {
   border-radius: calc(var(--e-radius) * 0)/0.75;
-  padding: 10.7px 15.48px 11.5px 15.1px;
+  padding: 11.4px 15.48px 11.5px 15.1px;
 }
 .e-bigger .e-pager.e-rtl .e-spacing,
 .e-bigger .e-pager.e-rtl .e-numericitem:hover,
@@ -1014,7 +1014,7 @@
 .e-pager.e-bigger.e-rtl .e-numericitem:hover,
 .e-pager.e-bigger.e-rtl .e-currentitem {
   margin: 0;
-  padding: 10.7px 15.48px 11.5px 15.1px;
+  padding: 11.4px 15.48px 11.5px 15.1px;
 }
 .e-bigger .e-pager.e-rtl .e-pp.e-spacing,
 .e-bigger .e-pager.e-rtl .e-np.e-spacing,
@@ -1024,7 +1024,7 @@
 .e-pager.e-bigger.e-rtl .e-np.e-spacing,
 .e-pager.e-bigger.e-rtl .e-pp.e-spacing:hover,
 .e-pager.e-bigger.e-rtl .e-np.e-spacing:hover {
-  padding-top: 12.5px;
+  padding-top: 13px;
 }
 .e-bigger .e-pager.e-rtl .e-pagerdropdown,
 .e-pager.e-bigger.e-rtl .e-pagerdropdown {
@@ -1101,7 +1101,7 @@
 .e-pager.e-bigger .e-pagercontainer .e-nextpagedisabled,
 .e-pager.e-bigger .e-pagercontainer .e-lastpagedisabled {
   margin-right: 0;
-  padding: 11.7px 11.6px 8.7px 11.6px;
+  padding: 11.7px 11.6px 9.2px 11.6px;
 }
 .e-bigger .e-pager.e-rtl .e-pagercontainer .e-firstpage,
 .e-bigger .e-pager.e-rtl .e-pagercontainer .e-prevpage,

package/styles/sidebar/_theme.scss

@@ -102,7 +102,7 @@
   }
 
   .e-sidebarcontainer {
-    &.e-sidebar {
+    > .e-sidebar {
       &.e-over,
       &.e-auto,
       &.e-push,
@@ -111,71 +111,71 @@
       }
     }
 
-    &.e-left.e-open.e-auto + div {
+    > .e-sidebar.e-left.e-open.e-auto + div {
       margin-right: $sidebar-margin-none;
       transform: translateX(0);
       margin-left: var(--sidebar-width);
     }
 
-    &.e-left.e-close.e-auto + div {
+    > .e-sidebar.e-left.e-close.e-auto + div {
       margin-right: $sidebar-margin-none;
       transform: translateX(0);
       margin-left: $sidebar-margin-none;
     }
 
-    &.e-right.e-open.e-auto + div {
+    > .e-sidebar.e-right.e-open.e-auto + div {
       margin-left: $sidebar-margin-none;
       transform: translateX(0);
       margin-right: var(--sidebar-width);
     }
 
-    &.e-right.e-close.e-auto + div {
+    > .e-sidebar.e-right.e-close.e-auto + div {
       margin-right: $sidebar-margin-none;
       transform: translateX(0);
       margin-left: $sidebar-margin-none;
     }
 
-    &.e-left.e-open.e-push + div {
+    > .e-sidebar.e-left.e-open.e-push + div {
       margin-right: $sidebar-margin-none;
       transform: translateX(0);
       margin-left: var(--sidebar-width);
     }
 
-    &.e-left.e-close.e-push + div {
+    > .e-sidebar.e-left.e-close.e-push + div {
       margin-right: $sidebar-margin-none;
       transform: translateX(0);
       margin-left: $sidebar-margin-none;
     }
 
-    &.e-right.e-open.e-push + div {
+    > .e-sidebar.e-right.e-open.e-push + div {
       margin-left: $sidebar-margin-none;
       transform: translateX(0);
       margin-right: var(--sidebar-width);
     }
 
-    &.e-right.e-close.e-push + div {
+    > .e-sidebar.e-right.e-close.e-push + div {
       margin-right: $sidebar-margin-none;
       transform: translateX(0);
       margin-left: $sidebar-margin-none;
     }
 
-    &.e-left.e-open.e-slide + div {
+    > .e-sidebar.e-left.e-open.e-slide + div {
       margin-left: $sidebar-margin-none;
       transform: translate(var(--sidebar-width));
     }
 
-    &.e-left.e-close.e-slide + div {
+    > .e-sidebar.e-left.e-close.e-slide + div {
       margin-left: $sidebar-margin-none;
       transform: translate(0);
     }
 
-    &.e-right.e-open.e-slide + div {
+    > .e-sidebar.e-right.e-open.e-slide + div {
       margin-right: $sidebar-margin-none;
       margin-left: $sidebar-margin-none;
       transform: translate(calc(-1 * var(--sidebar-width)));
     }
 
-    &.e-right.e-close.e-slide + div {
+    > .e-sidebar.e-right.e-close.e-slide + div {
       margin-right: $sidebar-margin-none;
       margin-left: $sidebar-margin-none;
       transform: translate(0);

package/styles/sidebar/bds.css

@@ -168,77 +168,77 @@ ejs-sidebar {
           box-shadow: 0 0 rgba(var(--color-sf-base-black), 0);
 }
 
-.e-sidebarcontainer.e-sidebar.e-over, .e-sidebarcontainer.e-sidebar.e-auto, .e-sidebarcontainer.e-sidebar.e-push, .e-sidebarcontainer.e-sidebar.e-slide + div {
+.e-sidebarcontainer > .e-sidebar.e-over, .e-sidebarcontainer > .e-sidebar.e-auto, .e-sidebarcontainer > .e-sidebar.e-push, .e-sidebarcontainer > .e-sidebar.e-slide + div {
   -webkit-transition: margin 0.5s ease, -webkit-transform 0.5s ease;
   transition: margin 0.5s ease, -webkit-transform 0.5s ease;
   transition: margin 0.5s ease, transform 0.5s ease;
   transition: margin 0.5s ease, transform 0.5s ease, -webkit-transform 0.5s ease;
 }
-.e-sidebarcontainer.e-left.e-open.e-auto + div {
+.e-sidebarcontainer > .e-sidebar.e-left.e-open.e-auto + div {
   margin-right: 0;
   -webkit-transform: translateX(0);
           transform: translateX(0);
   margin-left: var(--sidebar-width);
 }
-.e-sidebarcontainer.e-left.e-close.e-auto + div {
+.e-sidebarcontainer > .e-sidebar.e-left.e-close.e-auto + div {
   margin-right: 0;
   -webkit-transform: translateX(0);
           transform: translateX(0);
   margin-left: 0;
 }
-.e-sidebarcontainer.e-right.e-open.e-auto + div {
+.e-sidebarcontainer > .e-sidebar.e-right.e-open.e-auto + div {
   margin-left: 0;
   -webkit-transform: translateX(0);
           transform: translateX(0);
   margin-right: var(--sidebar-width);
 }
-.e-sidebarcontainer.e-right.e-close.e-auto + div {
+.e-sidebarcontainer > .e-sidebar.e-right.e-close.e-auto + div {
   margin-right: 0;
   -webkit-transform: translateX(0);
           transform: translateX(0);
   margin-left: 0;
 }
-.e-sidebarcontainer.e-left.e-open.e-push + div {
+.e-sidebarcontainer > .e-sidebar.e-left.e-open.e-push + div {
   margin-right: 0;
   -webkit-transform: translateX(0);
           transform: translateX(0);
   margin-left: var(--sidebar-width);
 }
-.e-sidebarcontainer.e-left.e-close.e-push + div {
+.e-sidebarcontainer > .e-sidebar.e-left.e-close.e-push + div {
   margin-right: 0;
   -webkit-transform: translateX(0);
           transform: translateX(0);
   margin-left: 0;
 }
-.e-sidebarcontainer.e-right.e-open.e-push + div {
+.e-sidebarcontainer > .e-sidebar.e-right.e-open.e-push + div {
   margin-left: 0;
   -webkit-transform: translateX(0);
           transform: translateX(0);
   margin-right: var(--sidebar-width);
 }
-.e-sidebarcontainer.e-right.e-close.e-push + div {
+.e-sidebarcontainer > .e-sidebar.e-right.e-close.e-push + div {
   margin-right: 0;
   -webkit-transform: translateX(0);
           transform: translateX(0);
   margin-left: 0;
 }
-.e-sidebarcontainer.e-left.e-open.e-slide + div {
+.e-sidebarcontainer > .e-sidebar.e-left.e-open.e-slide + div {
   margin-left: 0;
   -webkit-transform: translate(var(--sidebar-width));
           transform: translate(var(--sidebar-width));
 }
-.e-sidebarcontainer.e-left.e-close.e-slide + div {
+.e-sidebarcontainer > .e-sidebar.e-left.e-close.e-slide + div {
   margin-left: 0;
   -webkit-transform: translate(0);
           transform: translate(0);
 }
-.e-sidebarcontainer.e-right.e-open.e-slide + div {
+.e-sidebarcontainer > .e-sidebar.e-right.e-open.e-slide + div {
   margin-right: 0;
   margin-left: 0;
   -webkit-transform: translate(calc(-1 * var(--sidebar-width)));
           transform: translate(calc(-1 * var(--sidebar-width)));
 }
-.e-sidebarcontainer.e-right.e-close.e-slide + div {
+.e-sidebarcontainer > .e-sidebar.e-right.e-close.e-slide + div {
   margin-right: 0;
   margin-left: 0;
   -webkit-transform: translate(0);

package/styles/sidebar/bootstrap-dark.css

@@ -84,77 +84,77 @@ ejs-sidebar {
           box-shadow: 0 0 20px rgba(0, 0, 0, 0.2);
 }
 
-.e-sidebarcontainer.e-sidebar.e-over, .e-sidebarcontainer.e-sidebar.e-auto, .e-sidebarcontainer.e-sidebar.e-push, .e-sidebarcontainer.e-sidebar.e-slide + div {
+.e-sidebarcontainer > .e-sidebar.e-over, .e-sidebarcontainer > .e-sidebar.e-auto, .e-sidebarcontainer > .e-sidebar.e-push, .e-sidebarcontainer > .e-sidebar.e-slide + div {
   -webkit-transition: margin 0.5s ease, -webkit-transform 0.5s ease;
   transition: margin 0.5s ease, -webkit-transform 0.5s ease;
   transition: margin 0.5s ease, transform 0.5s ease;
   transition: margin 0.5s ease, transform 0.5s ease, -webkit-transform 0.5s ease;
 }
-.e-sidebarcontainer.e-left.e-open.e-auto + div {
+.e-sidebarcontainer > .e-sidebar.e-left.e-open.e-auto + div {
   margin-right: 0;
   -webkit-transform: translateX(0);
           transform: translateX(0);
   margin-left: var(--sidebar-width);
 }
-.e-sidebarcontainer.e-left.e-close.e-auto + div {
+.e-sidebarcontainer > .e-sidebar.e-left.e-close.e-auto + div {
   margin-right: 0;
   -webkit-transform: translateX(0);
           transform: translateX(0);
   margin-left: 0;
 }
-.e-sidebarcontainer.e-right.e-open.e-auto + div {
+.e-sidebarcontainer > .e-sidebar.e-right.e-open.e-auto + div {
   margin-left: 0;
   -webkit-transform: translateX(0);
           transform: translateX(0);
   margin-right: var(--sidebar-width);
 }
-.e-sidebarcontainer.e-right.e-close.e-auto + div {
+.e-sidebarcontainer > .e-sidebar.e-right.e-close.e-auto + div {
   margin-right: 0;
   -webkit-transform: translateX(0);
           transform: translateX(0);
   margin-left: 0;
 }
-.e-sidebarcontainer.e-left.e-open.e-push + div {
+.e-sidebarcontainer > .e-sidebar.e-left.e-open.e-push + div {
   margin-right: 0;
   -webkit-transform: translateX(0);
           transform: translateX(0);
   margin-left: var(--sidebar-width);
 }
-.e-sidebarcontainer.e-left.e-close.e-push + div {
+.e-sidebarcontainer > .e-sidebar.e-left.e-close.e-push + div {
   margin-right: 0;
   -webkit-transform: translateX(0);
           transform: translateX(0);
   margin-left: 0;
 }
-.e-sidebarcontainer.e-right.e-open.e-push + div {
+.e-sidebarcontainer > .e-sidebar.e-right.e-open.e-push + div {
   margin-left: 0;
   -webkit-transform: translateX(0);
           transform: translateX(0);
   margin-right: var(--sidebar-width);
 }
-.e-sidebarcontainer.e-right.e-close.e-push + div {
+.e-sidebarcontainer > .e-sidebar.e-right.e-close.e-push + div {
   margin-right: 0;
   -webkit-transform: translateX(0);
           transform: translateX(0);
   margin-left: 0;
 }
-.e-sidebarcontainer.e-left.e-open.e-slide + div {
+.e-sidebarcontainer > .e-sidebar.e-left.e-open.e-slide + div {
   margin-left: 0;
   -webkit-transform: translate(var(--sidebar-width));
           transform: translate(var(--sidebar-width));
 }
-.e-sidebarcontainer.e-left.e-close.e-slide + div {
+.e-sidebarcontainer > .e-sidebar.e-left.e-close.e-slide + div {
   margin-left: 0;
   -webkit-transform: translate(0);
           transform: translate(0);
 }
-.e-sidebarcontainer.e-right.e-open.e-slide + div {
+.e-sidebarcontainer > .e-sidebar.e-right.e-open.e-slide + div {
   margin-right: 0;
   margin-left: 0;
   -webkit-transform: translate(calc(-1 * var(--sidebar-width)));
           transform: translate(calc(-1 * var(--sidebar-width)));
 }
-.e-sidebarcontainer.e-right.e-close.e-slide + div {
+.e-sidebarcontainer > .e-sidebar.e-right.e-close.e-slide + div {
   margin-right: 0;
   margin-left: 0;
   -webkit-transform: translate(0);