@syncfusion/ej2-navigations 33.2.10 → 34.1.29

package/styles/tailwind3.scss

@@ -1,59 +1,53 @@
-@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 'pager/all' as *;
+@use 'pager/bigger' 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 'h-scroll/all' as *;
+@use 'h-scroll/bigger' 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 'v-scroll/all' as *;
+@use 'v-scroll/bigger' as *;
 @use 'toolbar/tailwind3-definition' as *;
 @use 'toolbar/icons/tailwind3' as *;
-@use 'toolbar/all.tailwind3' as *;
-@use 'toolbar/bigger.tailwind3' as *;
+@use 'toolbar/all' as *;
+@use 'toolbar/bigger' as *;
 @use 'accordion/tailwind3-definition' as *;
 @use 'accordion/icons/tailwind3' as *;
-@use 'accordion/all.tailwind3' as *;
-@use 'accordion/bigger.tailwind3' as *;
+@use 'accordion/all' as *;
+@use 'accordion/bigger' as *;
 @use 'carousel/tailwind3-definition' as *;
 @use 'carousel/icons/tailwind3' as *;
-@use 'carousel/all.tailwind3' as *;
+@use 'carousel/all' as *;
 
 @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 'context-menu/all' as *;
+@use 'context-menu/bigger' 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 'tab/all' as *;
+@use 'tab/bigger' as *;
 @use 'treeview/tailwind3-definition' as *;
 @use 'treeview/icons/tailwind3' as *;
-@use 'treeview/all.tailwind3' as *;
-@use 'treeview/bigger.tailwind3' as *;
+@use 'treeview/all' as *;
+@use 'treeview/bigger' as *;
 @use 'sidebar/tailwind3-definition' as *;
-@use 'sidebar/all.tailwind3' as *;
+@use 'sidebar/all' as *;
 @use 'menu/tailwind3-definition' as *;
 @use 'menu/icons/tailwind3' as *;
-@use 'menu/all.tailwind3' as *;
-@use 'menu/bigger.tailwind3' as *;
+@use 'menu/all' as *;
+@use 'menu/bigger' as *;
 @use 'breadcrumb/tailwind3-definition' as *;
 @use 'breadcrumb/icons/tailwind3' as *;
-@use 'breadcrumb/all.tailwind3' as *;
-@use 'breadcrumb/bigger.tailwind3' as *;
+@use 'breadcrumb/all' as *;
+@use 'breadcrumb/bigger' 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 'appbar/all' as *;
+@use 'appbar/bigger' as *;
 @use 'stepper/tailwind3-definition' as *;
 @use 'stepper/icons/tailwind3' as *;
-@use 'stepper/all.tailwind3' as *;
-@use 'stepper/bigger.tailwind3' as *;
+@use 'stepper/all' as *;
+@use 'stepper/bigger' as *;

package/styles/toolbar/_all.scss

@@ -1,2 +1,2 @@
-@use 'layout' as *;
-@use 'theme' as *;
+@forward 'layout';
+@forward 'theme';

package/styles/toolbar/_bds-definition.scss

@@ -1,5 +1,5 @@
-@use 'ej2-base/styles/definition/bds' as *;
-@forward 'ej2-base/styles/definition/bds';
+@use '@syncfusion/ej2-base/styles/common/base-variables' as *;
+
 $tbar-skin: $skin-name !default;
 $border-size: 0;
 $border-type: solid;

package/styles/toolbar/_bigger.scss

@@ -1,4 +1,4 @@
-@use 'ej2-base/styles/common/mixin' as *;
+@use 'variables' as *;
 @include export-module('toolbar-bigger') {
   .e-bigger .e-toolbar,
   .e-toolbar.e-bigger {

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

@@ -1,5 +1,5 @@
-@use 'ej2-base/styles/definition/bootstrap-dark' as *;
-@forward 'ej2-base/styles/definition/bootstrap-dark';
+@use '@syncfusion/ej2-base/styles/common/base-variables' as *;
+
 $tbar-skin: 'bootstrap' !default;
 $tbar-default-bg: $grey-darker !default;
 $tbar-items-default-bg: $tbar-default-bg !default;
@@ -9,6 +9,7 @@ $tbar-pop-btn-bgr-padding: $tbar-zero-value 4px !default;
 $tbar-pop-btn-nrml-padding: $tbar-zero-value 4px !default;
 $tbar-separator-bgr-minheight: 36px !default;
 $tbar-btn-bgr-minwidth: 0 !default;
+$tbar-active-icon-color: $brand-primary-font !default;
 $tbar-separator-vertical-bgr-mrgn: 5px 10px !default;
 $tbar-btn-nrml-minwidth: 0 !default;
 $tbar-btn-weight: 400 !default;

package/styles/toolbar/_bootstrap-definition.scss

@@ -1,5 +1,5 @@
-@use 'ej2-base/styles/definition/bootstrap' as *;
-@forward 'ej2-base/styles/definition/bootstrap';
+@use '@syncfusion/ej2-base/styles/common/base-variables' as *;
+
 $tbar-skin: 'bootstrap' !default;
 $tbar-zero-value: 0 !default;
 $tbar-separator-bgr-minheight: 36px !default;
@@ -21,6 +21,7 @@ $tbar-default-font-overlay: $default-font-color !default;
 $tbar-default-icon-overlay: $default-icon-color !default;
 $tbar-select-font: $tbar-hover-font !default;
 $tbar-pressed-font: $tbar-hover-font !default;
+$tbar-active-icon-color: $brand-primary-font !default;
 
 $tbar-default-bg: $grey-f8 !default;
 $tbar-pop-bg: $tbar-default-bg !default;

package/styles/toolbar/_bootstrap4-definition.scss

@@ -1,6 +1,5 @@
 @use 'sass:color';
-@use 'ej2-base/styles/definition/bootstrap4' as *;
-@forward 'ej2-base/styles/definition/bootstrap4';
+@use '@syncfusion/ej2-base/styles/common/base-variables' as *;
 
 $border-type: solid !default;
 $border-size: 1px !default;
@@ -27,6 +26,7 @@ $tbar-default-font-overlay: $gray-700 !default;
 $tbar-default-icon-overlay: $gray-700 !default;
 $tbar-select-font: $tbar-hover-font !default;
 $tbar-pressed-font: $tbar-hover-font !default;
+$tbar-active-icon-color: $white !default;
 $tbar-default-bg: $gray-100 !default;
 $tbar-hor-active-bg: $gray-600 !default;
 $tbar-pop-bg: $tbar-default-bg !default;

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

@@ -1,5 +1,4 @@
-@use 'ej2-base/styles/definition/bootstrap5-dark' as *;
-@forward 'ej2-base/styles/definition/bootstrap5-dark';
+@use '@syncfusion/ej2-base/styles/common/base-variables' as *;
 
 /* stylelint-disable */
 $tbar-skin: 'bootstrap5' !default;

package/styles/toolbar/_bootstrap5-definition.scss

@@ -1,5 +1,4 @@
-@use 'ej2-base/styles/definition/bootstrap5' as *;
-@forward 'ej2-base/styles/definition/bootstrap5';
+@use '@syncfusion/ej2-base/styles/common/base-variables' as *;
 
 /* stylelint-disable */
 $tbar-skin: 'bootstrap5' !default;

package/styles/toolbar/_bootstrap5.3-definition.scss

@@ -1,5 +1,4 @@
-@use 'ej2-base/styles/definition/bootstrap5.3' as *;
-@forward 'ej2-base/styles/definition/bootstrap5.3';
+@use '@syncfusion/ej2-base/styles/common/base-variables' as *;
 
 /* stylelint-disable */
 $tbar-skin: 'bootstrap5.3' !default;

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

@@ -1,5 +1,5 @@
-@use 'ej2-base/styles/definition/fabric-dark' as *;
-@forward 'ej2-base/styles/definition/fabric-dark';
+@use '@syncfusion/ej2-base/styles/common/base-variables' as *;
+
 $tbar-skin: 'fabric' !default;
 $tbar-zero-value: 0 !default;
 $tbar-icons-bgr-font-size: 14px !default;

package/styles/toolbar/_fabric-definition.scss

@@ -1,5 +1,5 @@
-@use 'ej2-base/styles/definition/fabric' as *;
-@forward 'ej2-base/styles/definition/fabric';
+@use '@syncfusion/ej2-base/styles/common/base-variables' as *;
+
 $tbar-skin: 'fabric' !default;
 $tbar-icons-bgr-font-size: 18px;
 $tbar-separator-bgr-mrgn: 10px 5px;

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

@@ -1,5 +1,5 @@
-@use 'ej2-base/styles/definition/fluent-dark' as *;
-@forward 'ej2-base/styles/definition/fluent-dark';
+@use '@syncfusion/ej2-base/styles/common/base-variables' as *;
+
 $tbar-skin: 'FluentUI' !default;
 $border-size: 0;
 $border-type: solid;

package/styles/toolbar/_fluent-definition.scss

@@ -1,5 +1,5 @@
-@use 'ej2-base/styles/definition/fluent' as *;
-@forward 'ej2-base/styles/definition/fluent';
+@use '@syncfusion/ej2-base/styles/common/base-variables' as *;
+
 $tbar-skin: 'FluentUI' !default;
 $border-size: 0;
 $border-type: solid;

package/styles/toolbar/_fluent2-definition.scss

@@ -1,5 +1,5 @@
-@use 'ej2-base/styles/definition/fluent2' as *;
-@forward 'ej2-base/styles/definition/fluent2';
+@use '@syncfusion/ej2-base/styles/common/base-variables' as *;
+
 $tbar-skin: $skin-name !default;
 $border-size: 0;
 $border-type: solid;

package/styles/toolbar/_fusionnew-definition.scss

@@ -1,5 +1,4 @@
-@use 'ej2-base/styles/definition/fusionnew' as *;
-@forward 'ej2-base/styles/definition/fusionnew';
+@use '@syncfusion/ej2-base/styles/common/base-variables' as *;
 
 /* stylelint-disable */
 $tbar-skin: 'bootstrap5' !default;

package/styles/toolbar/_highcontrast-definition.scss

@@ -1,5 +1,5 @@
-@use 'ej2-base/styles/definition/highcontrast' as *;
-@forward 'ej2-base/styles/definition/highcontrast';
+@use '@syncfusion/ej2-base/styles/common/base-variables' as *;
+
 $tbar-skin: 'highcontrast' !default;
 $tbar-icons-bgr-font-size: 18px;
 $tbar-separator-bgr-mrgn: 10px 5px;

package/styles/toolbar/_highcontrast-light-definition.scss

@@ -1,5 +1,5 @@
-@use 'ej2-base/styles/definition/highcontrast-light' as *;
-@forward 'ej2-base/styles/definition/highcontrast-light';
+@use '@syncfusion/ej2-base/styles/common/base-variables' as *;
+
 $tbar-skin: 'highcontrast' !default;
 $tbar-zero-value: 0 !default;
 $tbar-icons-bgr-font-size: 14px !default;

package/styles/toolbar/_layout.scss

@@ -1,4 +1,4 @@
-@use 'ej2-base/styles/common/mixin' as *;
+@use 'variables' as *;
 @include export-module('toolbar-layout') {
   .e-toolbar {
     border-radius: $tbar-radius;

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

@@ -1,6 +1,5 @@
 @use 'sass:color';
-@use 'ej2-base/styles/definition/material-dark' as *;
-@forward 'ej2-base/styles/definition/material-dark';
+@use '@syncfusion/ej2-base/styles/common/base-variables' as *;
 
 $tbar-skin: 'material' !default;
 $tbar-zero-value: 0 !default;
@@ -131,6 +130,7 @@ $tbar-hover-font: $tbar-default-font !default;
 $tbar-default-font-overlay: rgba($grey-dark-font, .3) !default;
 $tbar-active-font-color: $tbar-default-font !default;
 $tbar-press-font: $tbar-default-font !default;
+$tbar-active-icon-color: $tbar-default-font !default;
 $tbar-pressed-bg: $tbar-hover-bg !default;
 $tbar-pressed-border: $tbar-hover-border-color !default;
 $tbar-pressed-font: $tbar-hover-font !default;

package/styles/toolbar/_material-definition.scss

@@ -1,6 +1,5 @@
 @use 'sass:color';
-@use 'ej2-base/styles/definition/material' as *;
-@forward 'ej2-base/styles/definition/material';
+@use '@syncfusion/ej2-base/styles/common/base-variables' as *;
 
 $tbar-skin: 'material' !default;
 $tbar-pop-icon-bgr-padding: 0;
@@ -120,6 +119,7 @@ $tbar-hover-font: $tbar-default-font !default;
 $tbar-default-font-overlay: rgba($grey-light-font, .38) !default;
 $tbar-active-font-color: $tbar-default-font !default;
 $tbar-press-font: $tbar-default-font !default;
+$tbar-active-icon-color: $tbar-default-font !default;
 $tbar-pressed-bg: $tbar-hover-bg !default;
 $tbar-pressed-border: $tbar-hover-border-color !default;
 $tbar-pressed-font: $tbar-hover-font !default;

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

@@ -1,5 +1,4 @@
-@use 'ej2-base/styles/definition/material3-dark' as *;
-@forward 'ej2-base/styles/definition/material3-dark';
+@use '@syncfusion/ej2-base/styles/common/base-variables' as *;
 
 /* stylelint-disable */
 $tbar-skin: 'material3' !default;

package/styles/toolbar/_material3-definition.scss

@@ -1,5 +1,4 @@
-@use 'ej2-base/styles/definition/material3' as *;
-@forward 'ej2-base/styles/definition/material3';
+@use '@syncfusion/ej2-base/styles/common/base-variables' as *;
 
 /* stylelint-disable */
 $tbar-skin: 'material3' !default;

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

@@ -1,5 +1,5 @@
-@use 'ej2-base/styles/definition/tailwind-dark' as *;
-@forward 'ej2-base/styles/definition/tailwind-dark';
+@use '@syncfusion/ej2-base/styles/common/base-variables' as *;
+
 $tbar-skin: 'tailwind' !default;
 $border-size: 0;
 $border-type: solid;

package/styles/toolbar/_tailwind-definition.scss

@@ -1,5 +1,5 @@
-@use 'ej2-base/styles/definition/tailwind' as *;
-@forward 'ej2-base/styles/definition/tailwind';
+@use '@syncfusion/ej2-base/styles/common/base-variables' as *;
+
 $tbar-skin: 'tailwind' !default;
 $border-size: 0;
 $border-type: solid;

package/styles/toolbar/_tailwind3-definition.scss

@@ -1,5 +1,5 @@
-@use 'ej2-base/styles/definition/tailwind3' as *;
-@forward 'ej2-base/styles/definition/tailwind3';
+@use '@syncfusion/ej2-base/styles/common/base-variables' as *;
+
 /* stylelint-disable */
 $tbar-skin: $skin-name !default;
 $tbar-icons-bgr-font-size: $text-lg;

package/styles/toolbar/_theme.scss

@@ -1,4 +1,4 @@
-@use 'ej2-base/styles/common/mixin' as *;
+@use 'variables' as *;
 @include export-module('toolbar-theme') {
   /* stylelint-disable property-no-vendor-prefix */
   .e-toolbar {
@@ -139,6 +139,18 @@
             color: $tbar-default-icon-overlay;
           }
         }
+
+        &.e-template{
+          @if ($skin-name == 'fluent2'){
+            .e-tbar-btn-text {
+              color: $tbar-default-font-overlay;
+            }
+          
+            .e-icons {
+              color: $tbar-default-icon-overlay;
+            }
+          }
+        }
       }
     }
 

package/styles/toolbar/_variables.scss

@@ -0,0 +1,2 @@
+@forward '@syncfusion/ej2-base/styles/common/_base-variables';
+@forward '_material3-definition';

package/styles/toolbar/bds.css

@@ -2,90 +2,6 @@
 
 
 
-/*! component's theme wise override definitions and variables */
-@-webkit-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);
-  }
-}
-@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);
-  }
-}
-/*! component's theme wise override definitions and variables */
-/* stylelint-disable */
-.e-btn.e-primary:focus {
-  -webkit-box-shadow: 0 1px 2px 0 rgba(16, 24, 40, 0.05), 0 0 0 4px var(--color-sf-brand-solid-shadow) !important;
-          box-shadow: 0 1px 2px 0 rgba(16, 24, 40, 0.05), 0 0 0 4px var(--color-sf-brand-solid-shadow) !important;
-}
-
-.e-btn.e-success:focus {
-  -webkit-box-shadow: 0 1px 2px 0 rgba(16, 24, 40, 0.05), 0 0 0 4px rgba(23, 177, 105, 0.24) !important;
-          box-shadow: 0 1px 2px 0 rgba(16, 24, 40, 0.05), 0 0 0 4px rgba(23, 177, 105, 0.24) !important;
-}
-
-.e-btn.e-info:focus {
-  -webkit-box-shadow: 0 1px 2px 0 rgba(16, 24, 40, 0.05), 0 0 0 4px var(--color-sf-brand-solid-shadow) !important;
-          box-shadow: 0 1px 2px 0 rgba(16, 24, 40, 0.05), 0 0 0 4px var(--color-sf-brand-solid-shadow) !important;
-}
-
-.e-btn.e-warning:focus {
-  -webkit-box-shadow: 0 1px 2px 0 rgba(16, 24, 40, 0.05), 0 0 0 4px rgba(247, 143, 8, 0.24) !important;
-          box-shadow: 0 1px 2px 0 rgba(16, 24, 40, 0.05), 0 0 0 4px rgba(247, 143, 8, 0.24) !important;
-}
-
-.e-btn.e-danger:focus {
-  -webkit-box-shadow: 0 1px 2px 0 rgba(16, 24, 40, 0.05), 0 0 0 4px rgba(240, 68, 55, 0.24) !important;
-          box-shadow: 0 1px 2px 0 rgba(16, 24, 40, 0.05), 0 0 0 4px rgba(240, 68, 55, 0.24) !important;
-}
-
-.e-btn.e-outline.e-info {
-  background: transparent !important;
-  border-color: var(--color-sf-utility-info-border-color) !important;
-  color: var(--color-sf-utility-info-text) !important;
-}
-
-.e-btn.e-outline.e-info:hover {
-  background: var(--color-sf-utility-info-bg-color-hover) !important;
-  border-color: var(--color-sf-utility-info-border-color) !important;
-  color: var(--color-sf-utility-info-text-hover) !important;
-}
-
-.e-btn.e-outline.e-info:active {
-  background: var(--color-sf-utility-info-bg-color-pressed) !important;
-  border-color: var(--color-sf-utility-info-border-color) !important;
-  color: var(--color-sf-utility-info-text-hover) !important;
-}
-
-.e-btn.e-flat.e-info {
-  color: var(--color-sf-utility-info-text) !important;
-}
-
-.e-bigger .e-btn,
-.e-bigger .e-btn,
-.e-bigger .e-css.e-btn,
-.e-bigger.e-css.e-btn {
-  font-size: 14px;
-  line-height: 1.572em;
-  padding: 8px 15px;
-  border-radius: 8px !important;
-  font-weight: 600;
-}
-
-/* stylelint-disable-line no-empty-source */
 .e-toolbar .e-popup-down-icon::before {
   content: "\e729";
   line-height: normal;
@@ -95,10 +11,6 @@
   line-height: normal;
 }
 
-
-
-
-
 .e-toolbar {
   border-radius: 0;
   display: block;
@@ -705,10 +617,6 @@
   padding-left: 0;
 }
 
-
-
-
-
 /* stylelint-disable property-no-vendor-prefix */
 .e-toolbar {
   -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
@@ -997,10 +905,6 @@
   border-width: 0 1px 0 0;
 }
 
-
-
-
-
 .e-bigger .e-toolbar,
 .e-toolbar.e-bigger {
   height: 56px;

package/styles/toolbar/bds.scss

@@ -1,9 +1,4 @@
-@use 'ej2-base/styles/definition/bds' as *;
-@use '../h-scroll/bds-definition' as *;
-@use '../v-scroll/bds-definition' as *;
-@use 'ej2-buttons/styles/button/bds-definition' as *;
-@use 'ej2-popups/styles/popup/bds-definition' as *;
 @use 'bds-definition' as *;
 @use 'icons/bds' as *;
-@use 'all.bds' as *;
-@use 'bigger.bds' as *;
+@use 'all' as *;
+@use 'bigger' as *;

package/styles/toolbar/bootstrap-dark.scss

@@ -1,9 +1,4 @@
-@use 'ej2-base/styles/definition/bootstrap-dark' as *;
-@use '../h-scroll/bootstrap-dark-definition' as *;
-@use '../v-scroll/bootstrap-dark-definition' as *;
-@use 'ej2-buttons/styles/button/bootstrap-dark-definition' as *;
-@use 'ej2-popups/styles/popup/bootstrap-dark-definition' as *;
 @use 'bootstrap-dark-definition' as *;
 @use 'icons/bootstrap-dark' as *;
-@use 'all.bootstrap-dark' as *;
-@use 'bigger.bootstrap-dark' as *;
+@use 'all' as *;
+@use 'bigger' as *;

package/styles/toolbar/bootstrap.css

@@ -1,5 +1,3 @@
-/*! component's theme wise override definitions and variables */
-/*! component's theme wise override definitions and variables */
 .e-toolbar .e-popup-down-icon::before {
   content: "\e83d";
   line-height: normal;

package/styles/toolbar/bootstrap.scss

@@ -1,9 +1,4 @@
-@use 'ej2-base/styles/definition/bootstrap' as *;
-@use '../h-scroll/bootstrap-definition' as *;
-@use '../v-scroll/bootstrap-definition' as *;
-@use 'ej2-buttons/styles/button/bootstrap-definition' as *;
-@use 'ej2-popups/styles/popup/bootstrap-definition' as *;
 @use 'bootstrap-definition' as *;
 @use 'icons/bootstrap' as *;
-@use 'all.bootstrap' as *;
-@use 'bigger.bootstrap' as *;
+@use 'all' as *;
+@use 'bigger' as *;

package/styles/toolbar/bootstrap4.css

@@ -1,5 +1,3 @@
-/*! component's theme wise override definitions and variables */
-/*! component's theme wise override definitions and variables */
 .e-toolbar .e-popup-down-icon::before {
   content: "\e744";
   line-height: normal;

package/styles/toolbar/bootstrap4.scss

@@ -1,9 +1,4 @@
-@use 'ej2-base/styles/definition/bootstrap4' as *;
-@use '../h-scroll/bootstrap4-definition' as *;
-@use '../v-scroll/bootstrap4-definition' as *;
-@use 'ej2-buttons/styles/button/bootstrap4-definition' as *;
-@use 'ej2-popups/styles/popup/bootstrap4-definition' as *;
 @use 'bootstrap4-definition' as *;
 @use 'icons/bootstrap4' as *;
-@use 'all.bootstrap4' as *;
-@use 'bigger.bootstrap4' as *;
+@use 'all' as *;
+@use 'bigger' as *;

package/styles/toolbar/bootstrap5-dark.css

@@ -1,28 +1,3 @@
-/*! component's theme wise override definitions and variables */
-@-webkit-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);
-  }
-}
-@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);
-  }
-}
-/*! component's theme wise override definitions and variables */
-/* stylelint-disable-line no-empty-source */
 /* stylelint-disable */
 .e-toolbar .e-popup-down-icon::before {
   content: "\e729";
@@ -33,7 +8,6 @@
   line-height: normal;
 }
 
-/* stylelint-disable */
 .e-toolbar {
   border-radius: 0;
   display: block;
@@ -640,7 +614,6 @@
   padding-left: 0;
 }
 
-/* stylelint-disable */
 /* stylelint-disable property-no-vendor-prefix */
 .e-toolbar {
   -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
@@ -931,7 +904,6 @@
   border-width: 0 0 0 0;
 }
 
-/* stylelint-disable */
 .e-bigger .e-toolbar,
 .e-toolbar.e-bigger {
   height: 46px;

package/styles/toolbar/bootstrap5-dark.scss

@@ -1,9 +1,4 @@
-@use 'ej2-base/styles/definition/bootstrap5-dark' as *;
-@use '../h-scroll/bootstrap5-dark-definition' as *;
-@use '../v-scroll/bootstrap5-dark-definition' as *;
-@use 'ej2-buttons/styles/button/bootstrap5-dark-definition' as *;
-@use 'ej2-popups/styles/popup/bootstrap5-dark-definition' as *;
 @use 'bootstrap5-dark-definition' as *;
 @use 'icons/bootstrap5-dark' as *;
-@use 'all.bootstrap5-dark' as *;
-@use 'bigger.bootstrap5-dark' as *;
+@use 'all' as *;
+@use 'bigger' as *;