@syncfusion/ej2-navigations 24.2.4 → 25.1.35-579988

package/styles/material3-dark.css

@@ -1471,8 +1471,8 @@
 .e-toolbar.e-bigger .e-toolbar-item .e-tbar-btn.e-btn.e-control.e-tbtn-txt .e-icons.e-icon-right.e-btn-icon {
   padding: 4px;
 }
-.e-bigger .e-toolbar .e-toolbar-item:not(.e-separator),
-.e-toolbar.e-bigger .e-toolbar-item:not(.e-separator) {
+.e-bigger .e-toolbar .e-toolbar-item:not(.e-separator):not(.e-spacer),
+.e-toolbar.e-bigger .e-toolbar-item:not(.e-separator):not(.e-spacer) {
   min-width: 40px;
   padding: 8px 4px 8px 4px;
 }
@@ -1656,6 +1656,19 @@
   white-space: nowrap;
   overflow: hidden;
 }
+.e-toolbar.e-spacer-toolbar .e-toolbar-items {
+  display: -ms-flexbox;
+  display: flex;
+  -ms-flex-wrap: nowrap;
+      flex-wrap: nowrap;
+  width: 100%;
+}
+.e-toolbar.e-spacer-toolbar .e-toolbar-items:not(.e-toolbar-multirow) {
+  position: absolute;
+}
+.e-toolbar.e-spacer-toolbar.e-pop-mode .e-toolbar-items {
+  width: calc(100% - 40px);
+}
 .e-toolbar .e-blazor-toolbar-items {
   position: absolute;
   top: -9999px;
@@ -1760,6 +1773,12 @@
   min-height: 32px;
   vertical-align: middle;
   width: auto;
+  -ms-flex: 0 0 auto;
+      flex: 0 0 auto;
+}
+.e-toolbar .e-toolbar-item.e-spacer {
+  -ms-flex-positive: 1;
+      flex-grow: 1;
 }
 .e-toolbar .e-toolbar-item .e-tbar-btn {
   display: -ms-flexbox;
@@ -1810,7 +1829,7 @@
   font-size: 14px;
   padding: 4px;
 }
-.e-toolbar .e-toolbar-item:not(.e-separator) {
+.e-toolbar .e-toolbar-item:not(.e-separator):not(.e-spacer) {
   height: inherit;
   min-width: 32px;
   padding: 8px 4px 8px 4px;
@@ -2103,6 +2122,9 @@
 .e-toolbar.e-extended-toolbar .e-hor-nav.e-ie-align {
   display: table;
 }
+.e-toolbar.e-rtl:not(.e-spacer-toolbar) .e-toolbar-items:not(.e-tbar-pos) .e-toolbar-item:first-child {
+  margin-right: 8px;
+}
 .e-toolbar.e-rtl .e-toolbar-item .e-tbar-btn.e-tbtn-txt .e-icons.e-btn-icon {
   padding: 4px;
 }
@@ -2141,7 +2163,6 @@
 }
 .e-toolbar.e-rtl .e-toolbar-items:not(.e-tbar-pos) .e-toolbar-item:first-child {
   margin-left: 0;
-  margin-right: 8px;
 }
 .e-toolbar.e-rtl .e-toolbar-items:first-child > .e-toolbar-item:last-child:last-child,
 .e-toolbar.e-rtl .e-toolbar-items:first-child > .e-toolbar-right .e-toolbar-item:last-child {
@@ -3130,6 +3151,12 @@
 .e-carousel .e-carousel-navigators .e-next .e-btn.e-rtl {
   transform: rotate(180deg);
 }
+.e-carousel .e-carousel-navigators .e-play-pause .e-btn .e-play-icon,
+.e-carousel .e-carousel-navigators .e-previous .e-btn .e-play-icon,
+.e-carousel .e-carousel-navigators .e-next .e-btn .e-play-icon {
+  line-height: 1;
+  padding-left: 3px;
+}
 .e-carousel .e-carousel-navigators .e-play-pause.e-hover-arrows,
 .e-carousel .e-carousel-navigators .e-previous.e-hover-arrows,
 .e-carousel .e-carousel-navigators .e-next.e-hover-arrows {
@@ -10546,6 +10573,9 @@ ejs-sidebar {
   -ms-flex-direction: column;
       flex-direction: column;
 }
+.e-stepper.e-horizontal {
+  display: block;
+}
 .e-stepper.e-horizontal .e-stepper-steps {
   -ms-flex-direction: row;
       flex-direction: row;

package/styles/material3.css

@@ -1527,8 +1527,8 @@
 .e-toolbar.e-bigger .e-toolbar-item .e-tbar-btn.e-btn.e-control.e-tbtn-txt .e-icons.e-icon-right.e-btn-icon {
   padding: 4px;
 }
-.e-bigger .e-toolbar .e-toolbar-item:not(.e-separator),
-.e-toolbar.e-bigger .e-toolbar-item:not(.e-separator) {
+.e-bigger .e-toolbar .e-toolbar-item:not(.e-separator):not(.e-spacer),
+.e-toolbar.e-bigger .e-toolbar-item:not(.e-separator):not(.e-spacer) {
   min-width: 40px;
   padding: 8px 4px 8px 4px;
 }
@@ -1712,6 +1712,19 @@
   white-space: nowrap;
   overflow: hidden;
 }
+.e-toolbar.e-spacer-toolbar .e-toolbar-items {
+  display: -ms-flexbox;
+  display: flex;
+  -ms-flex-wrap: nowrap;
+      flex-wrap: nowrap;
+  width: 100%;
+}
+.e-toolbar.e-spacer-toolbar .e-toolbar-items:not(.e-toolbar-multirow) {
+  position: absolute;
+}
+.e-toolbar.e-spacer-toolbar.e-pop-mode .e-toolbar-items {
+  width: calc(100% - 40px);
+}
 .e-toolbar .e-blazor-toolbar-items {
   position: absolute;
   top: -9999px;
@@ -1816,6 +1829,12 @@
   min-height: 32px;
   vertical-align: middle;
   width: auto;
+  -ms-flex: 0 0 auto;
+      flex: 0 0 auto;
+}
+.e-toolbar .e-toolbar-item.e-spacer {
+  -ms-flex-positive: 1;
+      flex-grow: 1;
 }
 .e-toolbar .e-toolbar-item .e-tbar-btn {
   display: -ms-flexbox;
@@ -1866,7 +1885,7 @@
   font-size: 14px;
   padding: 4px;
 }
-.e-toolbar .e-toolbar-item:not(.e-separator) {
+.e-toolbar .e-toolbar-item:not(.e-separator):not(.e-spacer) {
   height: inherit;
   min-width: 32px;
   padding: 8px 4px 8px 4px;
@@ -2159,6 +2178,9 @@
 .e-toolbar.e-extended-toolbar .e-hor-nav.e-ie-align {
   display: table;
 }
+.e-toolbar.e-rtl:not(.e-spacer-toolbar) .e-toolbar-items:not(.e-tbar-pos) .e-toolbar-item:first-child {
+  margin-right: 8px;
+}
 .e-toolbar.e-rtl .e-toolbar-item .e-tbar-btn.e-tbtn-txt .e-icons.e-btn-icon {
   padding: 4px;
 }
@@ -2197,7 +2219,6 @@
 }
 .e-toolbar.e-rtl .e-toolbar-items:not(.e-tbar-pos) .e-toolbar-item:first-child {
   margin-left: 0;
-  margin-right: 8px;
 }
 .e-toolbar.e-rtl .e-toolbar-items:first-child > .e-toolbar-item:last-child:last-child,
 .e-toolbar.e-rtl .e-toolbar-items:first-child > .e-toolbar-right .e-toolbar-item:last-child {
@@ -3186,6 +3207,12 @@
 .e-carousel .e-carousel-navigators .e-next .e-btn.e-rtl {
   transform: rotate(180deg);
 }
+.e-carousel .e-carousel-navigators .e-play-pause .e-btn .e-play-icon,
+.e-carousel .e-carousel-navigators .e-previous .e-btn .e-play-icon,
+.e-carousel .e-carousel-navigators .e-next .e-btn .e-play-icon {
+  line-height: 1;
+  padding-left: 3px;
+}
 .e-carousel .e-carousel-navigators .e-play-pause.e-hover-arrows,
 .e-carousel .e-carousel-navigators .e-previous.e-hover-arrows,
 .e-carousel .e-carousel-navigators .e-next.e-hover-arrows {
@@ -10602,6 +10629,9 @@ ejs-sidebar {
   -ms-flex-direction: column;
       flex-direction: column;
 }
+.e-stepper.e-horizontal {
+  display: block;
+}
 .e-stepper.e-horizontal .e-stepper-steps {
   -ms-flex-direction: row;
       flex-direction: row;

package/styles/menu/_bds-definition.scss

@@ -0,0 +1,66 @@
+//layout variables
+$menu-bigger-caret-font-size: $cmenu-bigger-caret-font-size !default;
+$menu-bigger-caret-li-padding: 32px !default;
+$menu-bigger-caret-right: 12px !default;
+$menu-bigger-font-size: $text-base !default;
+$menu-bigger-li-height: 48px !default;
+$menu-bigger-li-padding: 0 16px !default;
+$menu-bigger-li-text-indent: 15px !default;
+$menu-bigger-li-right-padding: 12px !default;
+$menu-bigger-icon-margin-right: 12px !default;
+$menu-icon-width: 1em !default;
+$menu-blank-icon: 34px !default;
+$menu-blank-icon-bigger: 41px !default;
+$menu-caret-font-size: $text-base !default;
+$menu-caret-icon: '\e706' !default;
+$menu-caret-icon-rtl: '\e70f' !default;
+$menu-caret-right: 8px !default;
+$menu-caret-li-padding: 26px !default;
+$menu-ul-padding: 0 !default;
+$menu-separator-bigger-padding: 0 !default;
+$menu-ul-bigger-header-padding: 0 !default;
+$menu-caret-padding-left: 8px !default;
+$menu-disable-opacity: .65 !default;
+$menu-font-size: $text-sm !default;
+$menu-icon-margin-right: 8px !default;
+$menu-icon-bigger-margin-right: 12px !default;
+$menu-li-hover-outline-offset: 0 !default;
+$menu-li-border-style: solid !default;
+$menu-li-border-width: 1px !default;
+$menu-li-height: 38px !default;
+$menu-li-padding: 0 12px !default;
+$menu-li-text-indent: 12px !default;
+$menu-li-right-padding: 12px !default;
+$menu-separator-padding: 0 !default;
+$menu-icon-font-size: $text-lg !default;
+$menu-icon-bigger-font-size: 22px !default;
+$menu-li-selected-outline-offset: 0 !default;
+$menu-hscroll-nav-size: 28px !default;
+$menu-vscroll-nav-size: 28px !default;
+$menu-scroll-nav-icon-size: 16px !default;
+$menu-bigger-hscroll-nav-size: 40px !default;
+$menu-bigger-vscroll-nav-size: 32px !default;
+$menu-bigger-scroll-nav-icon-size: 18px !default;
+$menu-header-icon-padding: 0 16px !default;
+$menu-li-bgcolor: $content-bg-color-alt3 !default;
+$menu-li-border-color: $border-light !default;
+$menu-li-selection-bgcolor: $content-bg-color-alt3 !default;
+$menu-li-selected-outline: 0 solid $menu-li-selection-bgcolor !default;
+$menu-li-selection-font-color: $content-text-color !default;
+$menu-ul-header-padding: $menu-ul-padding !default;
+$menu-color: $content-text-color !default;
+$menu-seperator-border-color: $border-light !default;
+$menu-selected-color: $content-text-color !default;
+$menu-sub-ul-bgcolor: $content-bg-color-alt2 !default;
+$menu-sub-li-border-color: $border-light !default;
+$menu-ul-bgcolor: $content-bg-color-alt2 !default;
+$menu-ul-border: none !default;
+$menu-li-hover-outline: 0 solid $menu-li-border-color !default;
+$menu-srollbar-ul-border: none !default;
+$submenu-caret-font-size: $menu-caret-font-size !default;
+$submenu-bigger-caret-font-size: $submenu-caret-font-size !default;
+$submenu-color: $content-text-color !default;
+$menu-icon-color: $icon-color !default;
+$menu-icon-hover-color: $content-text-color !default;
+$menu-icon-focussed-color: $cmenu-caret-color !default;
+$menu-caret-color: $cmenu-caret-color !default;

package/styles/menu/icons/_bds.scss

@@ -0,0 +1,134 @@
+@include export-module('menu-bds-icons') {
+
+  /*! menu layout */
+  .e-menu-wrapper,
+  .e-menu-container {
+    @at-root {
+      & ul {
+        &.e-vertical .e-menu-item {
+          & .e-caret {
+            &::before {
+              content: '\e748';
+            }
+          }
+        }
+
+        & .e-menu-item  {
+          & .e-caret {
+            &::before {
+              content: '\e729';
+            }
+          }
+        }
+      }
+
+      & .e-ul .e-menu-item {
+        & .e-caret {
+          &::before {
+            content: '\e748';
+          }
+        }
+      }
+    }
+
+    &.e-hamburger {
+
+      & .e-menu-header {
+
+        & .e-menu-icon::before {
+          content: '\e799';
+        }
+      }
+
+      &.e-close-icon {
+        & .e-menu-header {
+
+          & .e-menu-icon::before {
+            content: '\e7e7';
+          }
+        }
+      }
+
+      & .e-vertical .e-menu-item .e-caret,
+      & .e-menu-item .e-caret {
+        &::before {
+          content: '\e729';
+        }
+      }
+    }
+
+    &.e-rtl.e-hamburger ul {
+      &.e-ul {
+        & .e-caret {
+          &::before {
+            content: '\e729';
+          }
+        }
+      }
+    }
+
+    & .e-menu-hscroll.e-hscroll .e-nav-left-arrow::before,
+    & .e-menu-hscroll.e-hscroll .e-nav-right-arrow::before {
+      content: '\e748';
+    }
+
+    & .e-menu-vscroll.e-vscroll .e-nav-up-arrow::before,
+    & .e-menu-vscroll.e-vscroll .e-nav-down-arrow::before {
+      content: '\e729';
+    }
+  }
+
+  .e-rtl.e-menu-wrapper ul,
+  .e-rtl.e-menu-container ul {
+    &.e-vertical {
+      & .e-caret {
+        &::before {
+          content: '\e765';
+        }
+      }
+    }
+
+    &.e-ul {
+      & .e-caret {
+        &::before {
+          content: '\e765';
+        }
+      }
+    }
+  }
+
+  .e-bigger .e-rtl.e-menu-wrapper ul,
+  .e-bigger.e-rtl.e-menu-wrapper ul,
+  .e-bigger .e-rtl.e-menu-container ul,
+  .e-bigger.e-rtl.e-menu-container ul {
+    &.e-vertical {
+      & .e-caret {
+        &::before {
+          content: '\e765';
+        }
+      }
+    }
+
+    &.e-ul {
+      & .e-caret {
+        &::before {
+          content: '\e765';
+        }
+      }
+    }
+  }
+
+  .e-bigger .e-rtl.e-menu-wrapper.e-hamburger ul,
+  .e-bigger.e-rtl.e-menu-wrapper.e-hamburger ul,
+  .e-bigger .e-rtl.e-menu-container.e-hamburger ul,
+  .e-bigger.e-rtl.e-menu-container.e-hamburger ul {
+
+    &.e-ul {
+      & .e-caret {
+        &::before {
+          content: '\e729';
+        }
+      }
+    }
+  }
+}

package/styles/pager/_bds-definition.scss

@@ -0,0 +1,152 @@
+@use 'sass:math';
+
+$pager-numericitem-border-radius: 0 !default;
+$pager-border-type: solid !default;
+$pager-mobile-icon-size: 11px !default;
+$pager-icon-width: 'auto' !default;
+$pager-icon-height: 'auto' !default;
+$pager-navigationicon-padding: 11px 9px 8px !default;
+$pager-navigationicon-right: 0 !default;
+$pager-navigationicon-top: -4px !default;
+$pager-numericitem-margin-right: 0 !default;
+$pager-messagebar-padding-bottom: 0 !default;
+$pager-bigger-messagebar-padding-bottom: 8px !default;
+$pager-content-opacity: 1 !default;
+$pager-bigger-new-container-rtl-margin: 0 5px -6px 0 !default;
+$pager-next-icon-margin-left: 0 !default;
+$pager-container-rtl-margin: 0 0 -4px 0 !default;
+$pager-rtl-navigation-icon-padding: 7.5px 7px 7.5px 7px !default;
+$pager-rtl-numeric-margin: 0 !default;
+$pager-item-hover-borders-width: 0 !default;
+$pager-tripledot-font-size: 12px !default;
+$pager-last-page-hover-border-radius:  0 8px 8px 0 !default;
+$pager-first-page-hover-border-radius: 8px 0 0 8px !default;
+$pager-rtl-parentmsgbar-margin-left: 6px !default;
+$pager-rtl-parentmsgbar-padding-top: 6px !default;
+$pager-bigger-nexticon-marign-left: math.div($pager-next-icon-margin-left, .75) !default;
+$pager-bigger-current-item-border-radius: math.div($pager-numericitem-border-radius, .75) !default;
+$pager-bigger-rtl-nexticon-marign-left: 0 !default;
+$pager-bigger-rtl-nexticon-marign-right: math.div($pager-next-icon-margin-left, .75) !default;
+$pager-device-padding: 19px 0 !default;
+$pager-device-messabar-padding: 0 !default;
+$pager-bigger-rtl-parentmsgbar-margin-left: 6px !default;
+$pager-bigger-rtl-activeitem-padding: 7px 14px 7px 14px !default;
+$pager-numericitem-min-width: 26px !default;
+$pager-font-size: 14px !default;
+$pager-font-line-height: 18px !default;
+$pager-numeric-font-line-height: $pager-font-line-height !default;
+$pager-bg-color: $content-bg-color !default;
+$pager-border-color: $border-light !default;
+$pager-color: $content-text-color-alt1 !default;
+$pager-icon-size: 12px !default;
+$pager-border-size: 1px !default;
+$pager-numericitem-padding: 13px 12px 10px 12px !default;
+$pager-numeric-hover-bg-color: $content-bg-color-hover !default;
+$pager-numeric-txt-bg-color: $icon-color-disabled !default;
+$pager-padding: 8px 8px 8px 8px !default;
+$pager-numeric-font-weight: bold !default;
+$pager-messagebar-padding-top: 6px !default;
+$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: 4.5px 9.2px 7px 9.2px !default;
+$pager-numeric-icon-padding: 4.5px 11px 7px 11px !default;
+$pager-pagecontainer-icon-padding: 10px 7px 10px 7px !default;
+$pager-bigger-pagecontainer-icon-padding: 6px 10px 8px 8px !default;
+$pager-hover-color: $content-text-color-hover !default;
+$pager-mhover-color: $border !default;
+$pager-pagermessage-weight: $font-weight-normal !default;
+$pager-active-color: $content-text-color !default;
+$pager-active-bg-color: $content-bg-color-selected !default;
+$pager-last-border-size: 1px !default;
+$page-content-color: $content-text-color-alt1 !default;
+$pager-container-margin: 0 0 -4px !default;
+$pager-bigger-numeric-item-margin: 0 !default;
+$pager-bigger-icon-font-size: 16px !default;
+$pager-bigger-font-size: $text-sm !default;
+$pager-bigger-padding: 12px !default;
+$pager-bigger-pagercontainer-margin: 0 0 -6px 0 !default;
+$pager-bigger-pagercontainer-icons-padding: 10px 10px 11px !default;
+$pager-bigger-pagercontainer-icons-marign-right: 0 !default;
+$pager-bigger-current-item-padding: 7px 14px 6.5px !default;
+$pager-letter-spacing: 0 !default;
+$pager-bigger-icons-align: middle !default;
+$pager-bigger-messagebar-padding-right: 0 !default;
+$pager-bigger-messagebar-padding-top: 8px !default;
+$pager-last-content-icon: 'e235' !default;
+$pager-next-content-icon: 'e236' !default;
+$pager-prev-content-icon: 'e237' !default;
+$pager-first-content-icon: 'e238' !default;
+$pager-icon-color: $icon-color !default;
+$pager-hover-bg-color: $content-bg-color-hover !default;
+$pager-dropdown-margin-top: -18px !default;
+$pager-dropdown-margin-left: 10px !default;
+$pager-dropdown-margin-right: 8px !default;
+$pager-dropdown-overflow: unset !default;
+$pager-bigger-dropdown-constant-margin: 1px !default;
+$pager-bigger-dropdown-margin: -35px  10px 0 18px !default;
+$pager-dropdown-height: 32px !default;
+$pager-dropdown-width: 90px !default;
+$pager-bigger-dropdown-width: 90px !default;
+$pager-constant-margin: 6px 0 4px 8px !default;
+$pager-bigger-letter-spacing: 7px 11.8px 6.5px !default;
+$pager-tripledot-rtl-margin-top: 0 !default;
+$pager-tripledot-rtl-padding: 4.5px 8.7px 5px 8.7px !default;
+$pager-rtl-pagerconstant-margin-top: 6px 8px 3px 8px !default;
+$pager-rtl-pagerdropdown-margin: -18px 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: 4.5px 11px 7px 11px !default;
+$pager-bigger-activeitem-padding: 7px 14px !default;
+$pager-rtl-pagerdropdown-bigger-margin: -18.5px 16px 0 0 !default;
+$pager-rtl-pagerconstant-bigger-margin-top: 6px 16px 2px 0 !default;
+$pager-bigger-rtl-parentmsgbar-margin-top: 0 !default;
+$pager-bigger-rtl-pagercontainer-margin-top: 5px !default;
+$pager-bigger-device-rtl-parentmsgbar-margin-top: 5px !default;
+$pager-rtl-pagermsgbar-device-margin-top: 10px !default;
+$pager-bigger-constant-margin-left: 16px !default;
+$pager-rtl-last-content-icon: 'e238' !default;
+$pager-rtl-first-content-icon: 'e235' !default;
+$pager-rtl-prev-content-icon: 'e236' !default;
+$pager-rtl-next-content-icon: 'e237' !default;
+$pager-rtl-first-last-icon-hover-border-radius: 0 6px 6px 0 !default;
+$pager-item-hover-border-width: 0 1px 0 0 !default;
+$pager-item-hover-border-color: $pager-border-color !default;
+$pager-bigger-current-item-hover-padding: $pager-bigger-current-item-padding !default;
+$pager-numeric-icon-hover-padding: $pager-numeric-icon-padding !default;
+$pager-bigger-rtl-activeitem-hover-padding:  $pager-bigger-rtl-activeitem-padding !default;
+$pager-activeitem-hover-padding: $pager-activeitem-padding !default;
+$pager-bigger-dropdown-margin-top: -18.5px !default;
+$pager-rtl-nxtpage-margin: 0 !default;
+$pager-disabled-icons-opacity: 1 !default;
+$pager-current-item-font-weight: $font-weight-medium !default;
+$pager-bigger-dropdown-heigh: 38px !default;
+$pager-external-msg-padding: 6px !default;
+$pager-rtl-bigger-tripledot-font-size: $pager-tripledot-font-size !default;
+$pager-current-item-font-weight: normal !default;
+$pager-skin: $skin-name !default;
+$pager-container-border-radius: 6px !default;
+$pager-bigger-tripledot-font-size: 14px !default;
+$pager-focus-bg-color: $content-bg-color-hover !default;
+$pager-focus-tripledot-padding: 4.5px 8.7px 7px 8.7px !default;
+$pager-focus-tripledot-line-height: 18px !default;
+$pager-focus-active-box-shadow: none !default;
+$pager-focus-shadow: 0 0 0 .5px $border inset !default;
+$pager-bigger-adaptive-pagermsgbar-margin-top: -2px !default;
+$pager-bigger-adaptive-dropdown-margin: 0 2px 0 4px !default;
+$pager-bigger-adaptive-dropdown-min-width: 90px !default;
+$pager-bigger-adaptive-constant-top: 2px !default;
+$pager-rtl-adaptive-constant-top: -1px 10px 0 8px !default;
+$pager-rtl-e-bigger-adaptive-dropdown-margin: 2px 4px 0 2px !default;
+$pager-rtl-e-bigger-adaptive-pagermsgbar-margin-top: 0 !default;
+$pager-bigger-adaptive-pager-padding: 6px !default;
+$pager-adaptive-pagermsgbar-margin-top: -4px !default;
+$pager-adaptive-dropdown-margin: 2px 2px 0 4px !default;
+$pager-rtl-adaptive-pagermsgbar-margin-top: -5px !default;
+$pager-rtl-adaptive-dropdown-margin: 2px 4px 0 2px !default;
+$pager-adaptive-constant-pagesizeall-top: 10px !default;
+$pager-bigger-adaptive-constant-pagesizeall-top: 9px !default;
+$pager-rtl-adaptive-constant-pagesizeall-top: 10px !default;
+$pager-rtl-e-bigger-adaptive-constant-pagesizeall-top: 12px !default;

package/styles/pager/icons/_bds.scss

@@ -0,0 +1,50 @@
+@include export-module('pager-bds-icons') {
+
+  /* !componenticons */
+
+  #{&}.e-pager,
+  .e-grid-menu {
+
+    .e-icon-last::before {
+      content: '\e7a9';
+    }
+
+    .e-icon-first::before {
+      content: '\e744';
+    }
+
+    .e-icon-prev::before {
+      content: '\e765';
+    }
+
+    .e-icon-next::before {
+      content: '\e748';
+    }
+
+    &.e-rtl {
+      & .e-icon-last.e-lastpage::before,
+      & .e-icon-last.e-lastpage:hover,
+      & .e-icon-last.e-lastpagedisabled::before {
+        content: '\e744';
+      }
+
+      & .e-icon-first.e-firstpage::before,
+      & .e-icon-first.e-firstpage:hover,
+      & .e-icon-first.e-firstpagedisabled::before {
+        content: '\e7a9';
+      }
+
+      & .e-icon-prev.e-prevpage::before,
+      & .e-icon-prev.e-prevpage:hover,
+      & .e-icon-prev.e-prevpagedisabled::before {
+        content: '\e748';
+      }
+
+      & .e-icon-next.e-nextpage::before,
+      & .e-icon-next.e-nextpage:hover,
+      & .e-icon-next.e-nextpagedisabled::before {
+        content: '\e765';
+      }
+    }
+  }
+}

package/styles/sidebar/_bds-definition.scss

@@ -0,0 +1,45 @@
+$sidebar-box-shadow: $shadow-none !default;
+
+//color variables
+$sidebar-background: $content-bg-color !default;
+$sidebar-border: $border-light !default;
+$sidebar-overlay: $overlay-bg-color !default;
+
+.e-sidebar {
+  /* stylelint-disable property-no-vendor-prefix */
+  -webkit-tap-highlight-color: transparent;
+  background: $sidebar-background;
+  height: 100%;
+  overflow: auto;
+  position: fixed;
+  top: 0;
+  transition: none;
+  vertical-align: middle;
+  visibility: hidden;
+  will-change: transform;
+
+  /* stylelint-disable */
+  &.e-right {
+    @if ($skin-name == 'tailwind') {
+      border-left: 1px solid $sidebar-border !important;
+    }
+    @else {
+      border-left: 1px solid $sidebar-border;
+    }
+    left: auto;
+    right: 0;
+    top: 0;
+  }
+
+  &.e-left {
+    @if ($skin-name == 'tailwind') {
+      border-right: 1px solid $sidebar-border !important;
+    }
+    @else {
+      border-right: 1px solid $sidebar-border;
+    }
+    left: 0;
+    right: auto;
+    top: 0;
+  }
+}