@syncfusion/ej2-navigations 31.2.16 → 32.1.24

package/styles/tailwind3.scss

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

package/styles/toolbar/_all.bds.scss

@@ -0,0 +1,2 @@
+@use 'layout.bds' as *;
+@use 'theme.bds' as *;

package/styles/toolbar/_all.bootstrap-dark.scss

@@ -0,0 +1,2 @@
+@use 'layout.bootstrap-dark' as *;
+@use 'theme.bootstrap-dark' as *;

package/styles/toolbar/_all.bootstrap.scss

@@ -0,0 +1,2 @@
+@use 'layout.bootstrap' as *;
+@use 'theme.bootstrap' as *;

package/styles/toolbar/_all.bootstrap4.scss

@@ -0,0 +1,2 @@
+@use 'layout.bootstrap4' as *;
+@use 'theme.bootstrap4' as *;

package/styles/toolbar/_all.bootstrap5-dark.scss

@@ -0,0 +1,2 @@
+@use 'layout.bootstrap5-dark' as *;
+@use 'theme.bootstrap5-dark' as *;

package/styles/toolbar/_all.bootstrap5.3.scss

@@ -0,0 +1,2 @@
+@use 'layout.bootstrap5.3' as *;
+@use 'theme.bootstrap5.3' as *;

package/styles/toolbar/_all.bootstrap5.scss

@@ -0,0 +1,2 @@
+@use 'layout.bootstrap5' as *;
+@use 'theme.bootstrap5' as *;

package/styles/toolbar/_all.fabric-dark.scss

@@ -0,0 +1,2 @@
+@use 'layout.fabric-dark' as *;
+@use 'theme.fabric-dark' as *;

package/styles/toolbar/_all.fabric.scss

@@ -0,0 +1,2 @@
+@use 'layout.fabric' as *;
+@use 'theme.fabric' as *;

package/styles/toolbar/_all.fluent-dark.scss

@@ -0,0 +1,2 @@
+@use 'layout.fluent-dark' as *;
+@use 'theme.fluent-dark' as *;

package/styles/toolbar/_all.fluent.scss

@@ -0,0 +1,2 @@
+@use 'layout.fluent' as *;
+@use 'theme.fluent' as *;

package/styles/toolbar/_all.fluent2.scss

@@ -0,0 +1,2 @@
+@use 'layout.fluent2' as *;
+@use 'theme.fluent2' as *;

package/styles/toolbar/_all.highcontrast-light.scss

@@ -0,0 +1,2 @@
+@use 'layout.highcontrast-light' as *;
+@use 'theme.highcontrast-light' as *;

package/styles/toolbar/_all.highcontrast.scss

@@ -0,0 +1,2 @@
+@use 'layout.highcontrast' as *;
+@use 'theme.highcontrast' as *;

package/styles/toolbar/_all.material-dark.scss

@@ -0,0 +1,2 @@
+@use 'layout.material-dark' as *;
+@use 'theme.material-dark' as *;

package/styles/toolbar/_all.material.scss

@@ -0,0 +1,2 @@
+@use 'layout.material' as *;
+@use 'theme.material' as *;

package/styles/toolbar/_all.material3-dark.scss

@@ -0,0 +1,2 @@
+@use 'layout.material3-dark' as *;
+@use 'theme.material3-dark' as *;

package/styles/toolbar/_all.material3.scss

@@ -0,0 +1,2 @@
+@use 'layout.material3' as *;
+@use 'theme.material3' as *;

package/styles/toolbar/_all.scss

@@ -1,2 +1,2 @@
-@import 'layout.scss';
-@import 'theme.scss';
+@use 'layout' as *;
+@use 'theme' as *;

package/styles/toolbar/_all.tailwind-dark.scss

@@ -0,0 +1,2 @@
+@use 'layout.tailwind-dark' as *;
+@use 'theme.tailwind-dark' as *;

package/styles/toolbar/_all.tailwind.scss

@@ -0,0 +1,2 @@
+@use 'layout.tailwind' as *;
+@use 'theme.tailwind' as *;

package/styles/toolbar/_all.tailwind3.scss

@@ -0,0 +1,2 @@
+@use 'layout.tailwind3' as *;
+@use 'theme.tailwind3' as *;

package/styles/toolbar/_bds-definition.scss

@@ -1,3 +1,5 @@
+@use 'ej2-base/styles/definition/bds' as *;
+@forward 'ej2-base/styles/definition/bds';
 $tbar-skin: $skin-name !default;
 $border-size: 0;
 $border-type: solid;
@@ -54,7 +56,9 @@ $tbar-popup-rtl-border-width: 0 1px 0 0 !default;
 $tbar-popup-vertical-border-width: $border-size 0 0 0 !default;
 $tbar-popup-vertical-rtl-border-width: 0 0 $border-size 0 !default;
 $tbar-nrml-size: 48px !default;
+$tbar-nrml-height: 48px !default;
 $tbar-bgr-size: 56px !default;
+$tbar-bgr-height: 56px !default;
 $tbar-nrml-items-size: 32px !default;
 $tbar-bgr-items-size: 40px !default;
 $tbar-nrml-item-size: 32px !default;
@@ -62,6 +66,7 @@ $tbar-item-height: 32px !default;
 $tbar-item-nrml-minwidth: 28px !default;
 $tbar-bgr-item-size: 49px !default;
 $tbar-btn-font-size: $text-lg !default;
+$tbar-btn-icon-font-size: $text-lg !default;
 $tbar-btn-txt-font-size: $text-sm !default;
 $tbar-item-pop-bg-color: $transparent !default;
 $tbar-item-bgr-padding: 8px 4px !default;
@@ -189,6 +194,17 @@ $tbar-popup-nav-pressed-border-size: 0 !default;
 $tbar-popup-nav-pressed-focus-border-color: $tbar-pressed-bg !default;
 $tbar-popup-nav-pressed-focus-border-size: 0 !default;
 $tbar-popup-btn-hover-border-size: $tbar-zero-value !default;
+$tbar-popup-btn-icon-font-size: 14px !default;
+$tbar-margin-zero: 0 !default;
+$tbar-padding-zero: 0 !default;
+$tbar-border-zero: 0 !default;
+$tbar-radius-zero: 0 !default;
+$tbar-multirow-items-btm-mrgn-small: 1px !default;
+$tbar-extended-left-mrgn: -1px !default;
+$tbar-auto-height: auto !default;
+$tbar-inherit-height: inherit !default;
+$tbar-items-height: 100% !default;
+$tbar-margin-auto: auto !default;
 @mixin tbar-btn-animation {
   content: '';
 }

package/styles/toolbar/_bigger.bds.scss

@@ -0,0 +1,3 @@
+@use 'ej2-base/styles/common/mixin' as *;
+@import './theme-variables.bds';
+@import './_bigger';

package/styles/toolbar/_bigger.bootstrap-dark.scss

@@ -0,0 +1,3 @@
+@use 'ej2-base/styles/common/mixin' as *;
+@import './theme-variables.bootstrap-dark';
+@import './_bigger';

package/styles/toolbar/_bigger.bootstrap.scss

@@ -0,0 +1,3 @@
+@use 'ej2-base/styles/common/mixin' as *;
+@import './theme-variables.bootstrap';
+@import './_bigger';

package/styles/toolbar/_bigger.bootstrap4.scss

@@ -0,0 +1,3 @@
+@use 'ej2-base/styles/common/mixin' as *;
+@import './theme-variables.bootstrap4';
+@import './_bigger';

package/styles/toolbar/_bigger.bootstrap5-dark.scss

@@ -0,0 +1,3 @@
+@use 'ej2-base/styles/common/mixin' as *;
+@import './theme-variables.bootstrap5-dark';
+@import './_bigger';

package/styles/toolbar/_bigger.bootstrap5.3.scss

@@ -0,0 +1,3 @@
+@use 'ej2-base/styles/common/mixin' as *;
+@import './theme-variables.bootstrap5.3';
+@import './_bigger';

package/styles/toolbar/_bigger.bootstrap5.scss

@@ -0,0 +1,3 @@
+@use 'ej2-base/styles/common/mixin' as *;
+@import './theme-variables.bootstrap5';
+@import './_bigger';

package/styles/toolbar/_bigger.fabric-dark.scss

@@ -0,0 +1,3 @@
+@use 'ej2-base/styles/common/mixin' as *;
+@import './theme-variables.fabric-dark';
+@import './_bigger';

package/styles/toolbar/_bigger.fabric.scss

@@ -0,0 +1,3 @@
+@use 'ej2-base/styles/common/mixin' as *;
+@import './theme-variables.fabric';
+@import './_bigger';

package/styles/toolbar/_bigger.fluent-dark.scss

@@ -0,0 +1,3 @@
+@use 'ej2-base/styles/common/mixin' as *;
+@import './theme-variables.fluent-dark';
+@import './_bigger';

package/styles/toolbar/_bigger.fluent.scss

@@ -0,0 +1,3 @@
+@use 'ej2-base/styles/common/mixin' as *;
+@import './theme-variables.fluent';
+@import './_bigger';

package/styles/toolbar/_bigger.fluent2.scss

@@ -0,0 +1,3 @@
+@use 'ej2-base/styles/common/mixin' as *;
+@import './theme-variables.fluent2';
+@import './_bigger';

package/styles/toolbar/_bigger.highcontrast-light.scss

@@ -0,0 +1,3 @@
+@use 'ej2-base/styles/common/mixin' as *;
+@import './theme-variables.highcontrast-light';
+@import './_bigger';

package/styles/toolbar/_bigger.highcontrast.scss

@@ -0,0 +1,3 @@
+@use 'ej2-base/styles/common/mixin' as *;
+@import './theme-variables.highcontrast';
+@import './_bigger';

package/styles/toolbar/_bigger.material-dark.scss

@@ -0,0 +1,3 @@
+@use 'ej2-base/styles/common/mixin' as *;
+@import './theme-variables.material-dark';
+@import './_bigger';

package/styles/toolbar/_bigger.material.scss

@@ -0,0 +1,3 @@
+@use 'ej2-base/styles/common/mixin' as *;
+@import './theme-variables.material';
+@import './_bigger';

package/styles/toolbar/_bigger.material3-dark.scss

@@ -0,0 +1,3 @@
+@use 'ej2-base/styles/common/mixin' as *;
+@import './theme-variables.material3-dark';
+@import './_bigger';

package/styles/toolbar/_bigger.material3.scss

@@ -0,0 +1,3 @@
+@use 'ej2-base/styles/common/mixin' as *;
+@import './theme-variables.material3';
+@import './_bigger';

package/styles/toolbar/_bigger.scss

@@ -1,7 +1,8 @@
+@use 'ej2-base/styles/common/mixin' as *;
 @include export-module('toolbar-bigger') {
   .e-bigger .e-toolbar,
   .e-toolbar.e-bigger {
-    height: $tbar-bgr-size;
+    height: $tbar-bgr-height;
     min-height: $tbar-bgr-size;
 
     .e-toolbar-items {
@@ -59,6 +60,14 @@
       }
     }
 
+    &.e-spacer-toolbar {
+      &.e-pop-mode {
+        .e-toolbar-items {
+          width: calc(100% - $tbar-nav-bgr-width);
+        }
+      }
+    }
+
     .e-toolbar-item {
       min-height: $tbar-bgr-items-size;
 
@@ -133,11 +142,11 @@
         &:not(.e-tbar-pos) .e-toolbar-item {
 
           &:first-child {
-            margin-left: 0;
+            margin-left: $tbar-margin-zero;
           }
 
           &:last-child {
-            margin-right: 0;
+            margin-right: $tbar-margin-zero;
           }
         }
       }
@@ -149,7 +158,7 @@
         }
 
         &.e-separator {
-          height: auto;
+          height: $tbar-auto-height;
           margin: $tbar-separator-vertical-bgr-mrgn;
           min-height: auto;
         }
@@ -195,10 +204,10 @@
 
       .e-toolbar-extended {
         min-height: $tbar-bgr-size;
-        padding-bottom: 0;
+        padding-bottom: $tbar-padding-zero;
         padding-left: $tbar-item-bgr-mrgn;
         padding-right: $tbar-item-bgr-mrgn;
-        padding-top: 0;
+        padding-top: $tbar-padding-zero;
 
         .e-toolbar-item {
           min-height: $tbar-bgr-items-size;
@@ -248,14 +257,14 @@
       }
 
       &.e-tbar-extended {
-        border-bottom: 0;
-        border-bottom-left-radius: 0;
-        border-bottom-right-radius: 0;
+        border-bottom: $tbar-border-zero;
+        border-bottom-left-radius: $tbar-radius-zero;
+        border-bottom-right-radius: $tbar-radius-zero;
   
         .e-toolbar-extended {
-          border-top: 0;
-          border-top-left-radius: 0;
-          border-top-right-radius: 0;
+          border-top: $tbar-border-zero;
+          border-top-left-radius: $tbar-radius-zero;
+          border-top-right-radius: $tbar-radius-zero;
         }
       }
     }
@@ -294,19 +303,19 @@
 
           .e-toolbar-center .e-toolbar-item,
           .e-toolbar-right .e-toolbar-item {
-            margin: 0;
+            margin: $tbar-margin-zero;
           }
 
           .e-toolbar-right .e-toolbar-item:last-child {
             margin-left: $tbar-item-bgr-mrgn;
-            margin-right: 0;
+            margin-right: $tbar-margin-zero;
           }
         }
 
         &:not(.e-tbar-pos) {
 
           .e-toolbar-item:first-child {
-            margin-left: 0;
+            margin-left: $tbar-margin-zero;
             margin-right: $tbar-item-bgr-mrgn;
           }
         }

package/styles/toolbar/_bigger.tailwind-dark.scss

@@ -0,0 +1,3 @@
+@use 'ej2-base/styles/common/mixin' as *;
+@import './theme-variables.tailwind-dark';
+@import './_bigger';

package/styles/toolbar/_bigger.tailwind.scss

@@ -0,0 +1,3 @@
+@use 'ej2-base/styles/common/mixin' as *;
+@import './theme-variables.tailwind';
+@import './_bigger';

package/styles/toolbar/_bigger.tailwind3.scss

@@ -0,0 +1,3 @@
+@use 'ej2-base/styles/common/mixin' as *;
+@import './theme-variables.tailwind3';
+@import './_bigger';

package/styles/toolbar/_bootstrap-dark-definition.scss

@@ -1,3 +1,5 @@
+@use 'ej2-base/styles/definition/bootstrap-dark' as *;
+@forward 'ej2-base/styles/definition/bootstrap-dark';
 $tbar-skin: 'bootstrap' !default;
 $tbar-default-bg: $grey-darker !default;
 $tbar-items-default-bg: $tbar-default-bg !default;
@@ -41,7 +43,9 @@ $tbar-press-bg: $grey-dark !default;
 $tbar-btn-press-bg: $tbar-press-bg !default;
 $tbar-press-border-color: $tbar-hover-border-color !default;
 $tbar-nrml-size: 40px !default;
+$tbar-nrml-height: 40px !default;
 $tbar-bgr-size: 50px !default;
+$tbar-bgr-height: 50px !default;
 $tbar-nrml-items-size: 39px !default;
 $tbar-bgr-items-size: 49px !default;
 $tbar-border-type: solid !default;
@@ -97,6 +101,7 @@ $tbar-btn-bgr-minheight: 34px !default;
 $tbar-btn-bgr-line-height: 34px !default;
 $tbar-btn-icon-bgr-line-height: 34px !default;
 $tbar-btn-font-size: 16px !default;
+$tbar-btn-icon-font-size: 16px !default;
 $tbar-btn-border-radius: 4px !default;
 $tbar-btn-pressed-box-shadow: inset 0 4px 5px rgba($grey-base, .35) !default;
 $tbar-btn-icon-bgr-width: 24px !default;
@@ -185,6 +190,17 @@ $tbar-popup-nav-pressed-border-size: 0 !default;
 $tbar-popup-nav-pressed-focus-border-color: $tbar-pressed-bg !default;
 $tbar-popup-nav-pressed-focus-border-size: 0 !default;
 $tbar-popup-btn-hover-border-size: $tbar-zero-value !default;
+$tbar-popup-btn-icon-font-size: 14px !default;
+$tbar-margin-zero: 0 !default;
+$tbar-padding-zero: 0 !default;
+$tbar-border-zero: 0 !default;
+$tbar-radius-zero: 0 !default;
+$tbar-multirow-items-btm-mrgn-small: 1px !default;
+$tbar-extended-left-mrgn: -1px !default;
+$tbar-auto-height: auto !default;
+$tbar-inherit-height: inherit !default;
+$tbar-items-height: 100% !default;
+$tbar-margin-auto: auto !default;
 @mixin tbar-btn-animation {
   content: '';
 }

package/styles/toolbar/_bootstrap-definition.scss

@@ -1,3 +1,5 @@
+@use 'ej2-base/styles/definition/bootstrap' as *;
+@forward 'ej2-base/styles/definition/bootstrap';
 $tbar-skin: 'bootstrap' !default;
 $tbar-zero-value: 0 !default;
 $tbar-separator-bgr-minheight: 36px !default;
@@ -33,7 +35,9 @@ $tbar-press-bg: $tbar-hover-bg !default;
 $tbar-btn-press-bg: $tbar-press-bg !default;
 $tbar-press-border-color: $tbar-hover-border-color !default;
 $tbar-nrml-size: 40px !default;
+$tbar-nrml-height: 40px !default;
 $tbar-bgr-size: 50px !default;
+$tbar-bgr-height: 50px !default;
 $tbar-nrml-items-size: 39px !default;
 $tbar-bgr-items-size: 49px !default;
 $tbar-border-type: solid !default;
@@ -99,6 +103,7 @@ $tbar-btn-bgr-minheight: 34px !default;
 $tbar-btn-bgr-line-height: 34px !default;
 $tbar-btn-icon-bgr-line-height: 34px !default;
 $tbar-btn-font-size: 16px !default;
+$tbar-btn-icon-font-size: 16px !default;
 $tbar-btn-border-radius: 4px !default;
 $tbar-btn-pressed-box-shadow: inset  0 3px 5px rgba(0, 0, 0, .125) !default;
 $tbar-btn-icon-bgr-width: 24px !default;
@@ -195,6 +200,17 @@ $tbar-popup-nav-pressed-border-size: 0 !default;
 $tbar-popup-nav-pressed-focus-border-color: $tbar-pressed-bg !default;
 $tbar-popup-nav-pressed-focus-border-size: 0 !default;
 $tbar-popup-btn-hover-border-size: $tbar-zero-value !default;
+$tbar-popup-btn-icon-font-size: 14px !default;
+$tbar-margin-zero: 0 !default;
+$tbar-padding-zero: 0 !default;
+$tbar-border-zero: 0 !default;
+$tbar-radius-zero: 0 !default;
+$tbar-multirow-items-btm-mrgn-small: 1px !default;
+$tbar-extended-left-mrgn: -1px !default;
+$tbar-auto-height: auto !default;
+$tbar-inherit-height: inherit !default;
+$tbar-items-height: 100% !default;
+$tbar-margin-auto: auto !default;
 @mixin tbar-btn-animation {
   content: '';
 }

package/styles/toolbar/_bootstrap4-definition.scss

@@ -1,4 +1,6 @@
 @use 'sass:color';
+@use 'ej2-base/styles/definition/bootstrap4' as *;
+@forward 'ej2-base/styles/definition/bootstrap4';
 
 $border-type: solid !default;
 $border-size: 1px !default;
@@ -42,7 +44,9 @@ $tbar-btn-press-bg: $tbar-press-bg !default;
 $tbar-press-border-color: $tbar-hover-border-color !default;
 $tbar-active-border-color: color.adjust($gray-600, $lightness: -12.5%) !default;
 $tbar-nrml-size: 38px !default;
+$tbar-nrml-height: 38px !default;
 $tbar-bgr-size: 54px !default;
+$tbar-bgr-height: 54px !default;
 $tbar-nrml-items-size: 38px !default;
 $tbar-bgr-items-size: 54px !default;
 $tbar-border-type: solid !default;
@@ -103,6 +107,7 @@ $tbar-btn-bgr-minheight: 38px !default;
 $tbar-btn-bgr-line-height: 34px !default;
 $tbar-btn-icon-bgr-line-height: 32px !default;
 $tbar-btn-font-size: 14px !default;
+$tbar-btn-icon-font-size: 14px !default;
 $tbar-btn-border-radius: 4px !default;
 $tbar-btn-pressed-box-shadow: inset  0 3px 5px rgba(0, 0, 0, .125) !default;
 $tbar-btn-icon-bgr-width: 24px !default;
@@ -192,6 +197,17 @@ $tbar-popup-nav-pressed-border-size: 3px !default;
 $tbar-popup-nav-pressed-focus-border-color: $gray-500 !default;
 $tbar-popup-nav-pressed-focus-border-size: 3px !default;
 $tbar-popup-btn-hover-border-size: $tbar-zero-value !default;
+$tbar-popup-btn-icon-font-size: 14px !default;
+$tbar-margin-zero: 0 !default;
+$tbar-padding-zero: 0 !default;
+$tbar-border-zero: 0 !default;
+$tbar-radius-zero: 0 !default;
+$tbar-multirow-items-btm-mrgn-small: 1px !default;
+$tbar-extended-left-mrgn: -1px !default;
+$tbar-auto-height: auto !default;
+$tbar-inherit-height: inherit !default;
+$tbar-items-height: 100% !default;
+$tbar-margin-auto: auto !default;
 @mixin tbar-btn-animation {
   content: '';
 }