@syncfusion/ej2-multicolumn-combobox 31.2.4 → 32.1.19

package/styles/multicolumn-combobox/_fusionnew-definition.scss

@@ -1,3 +1,5 @@
+@use 'ej2-base/styles/definition/fusionnew' as *;
+@forward 'ej2-base/styles/definition/fusionnew';
 $header-font-weight: 600 !default;
 $multicolumn-grid-height: 32px !default;
 $multicolumn-margin-top-value: 2px !default;
@@ -30,3 +32,18 @@ $altrow-bg-color: $content-bg-color-alt1 !default;
 $popup-box-shadow: $shadow-md !default;
 $nodata-bg-color: $content-text-color-alt3 !default;
 $nodata-border-color: $border-light !default;
+
+$padding-zero: 0;
+$multicolumn-nodata-padding: 14px 16px;
+$multicolumn-bigger-spin-pane-height: 26px !default;
+$multicolumn-bgr-small-font-size: 14px !default;
+$multicolumn-spin-pane-height: 20px !default;
+$multicolumn-grid-cation-font-weight: 600 !default;
+$multicolumn-font-size: 14px !default;
+$multicolumn-zero-height: 0 !default;
+$multicolumn-zero-border-radius: 0 !default;
+$multicolumn-small-grid-footer-font-size: 12px !default;
+$multicolumn-bigger-spinner-width: 26px !default;
+$multicolumn-spinner-width: 20px !default;
+$multicolumn-zero-width: 0 !default;
+$multicolumn-bigger-popup-footer-font-size: 16px !default;

package/styles/multicolumn-combobox/_highcontrast-definition.scss

@@ -1,3 +1,5 @@
+@use 'ej2-base/styles/definition/highcontrast' as *;
+@forward 'ej2-base/styles/definition/highcontrast';
 $header-font-weight: 600 !default;
 $multicolumn-grid-height: 36px !default;
 $multicolumn-margin-top-value: unset !default;
@@ -30,3 +32,18 @@ $altrow-bg-color: $bg-base-10 !default;
 $popup-box-shadow: none !default;
 $nodata-bg-color: $bg-base-0 !default;
 $nodata-border-color: $content-font-alt !default;
+
+$padding-zero: 0;
+$multicolumn-nodata-padding: 14px 16px;
+$multicolumn-bigger-spin-pane-height: 26px !default;
+$multicolumn-bgr-small-font-size: 14px !default;
+$multicolumn-spin-pane-height: 20px !default;
+$multicolumn-grid-cation-font-weight: 600 !default;
+$multicolumn-font-size: 14px !default;
+$multicolumn-zero-height: 0 !default;
+$multicolumn-zero-border-radius: 0 !default;
+$multicolumn-small-grid-footer-font-size: 12px !default;
+$multicolumn-bigger-spinner-width: 26px !default;
+$multicolumn-spinner-width: 20px !default;
+$multicolumn-zero-width: 0 !default;
+$multicolumn-bigger-popup-footer-font-size: 16px !default;

package/styles/multicolumn-combobox/_highcontrast-light-definition.scss

@@ -1,3 +1,5 @@
+@use 'ej2-base/styles/definition/highcontrast-light' as *;
+@forward 'ej2-base/styles/definition/highcontrast-light';
 $header-font-weight: 600 !default;
 $multicolumn-grid-height: 36px !default;
 $multicolumn-margin-top-value: unset !default;
@@ -30,3 +32,18 @@ $altrow-bg-color: $bg-base-10 !default;
 $popup-box-shadow: none !default;
 $nodata-bg-color: $selection-border !default;
 $nodata-border-color: $selection-border !default;
+
+$padding-zero: 0;
+$multicolumn-nodata-padding: 14px 16px;
+$multicolumn-bigger-spin-pane-height: 26px !default;
+$multicolumn-bgr-small-font-size: 14px !default;
+$multicolumn-spin-pane-height: 20px !default;
+$multicolumn-grid-cation-font-weight: 600 !default;
+$multicolumn-font-size: 14px !default;
+$multicolumn-zero-height: 0 !default;
+$multicolumn-zero-border-radius: 0 !default;
+$multicolumn-small-grid-footer-font-size: 12px !default;
+$multicolumn-bigger-spinner-width: 26px !default;
+$multicolumn-spinner-width: 20px !default;
+$multicolumn-zero-width: 0 !default;
+$multicolumn-bigger-popup-footer-font-size: 16px !default;

package/styles/multicolumn-combobox/_layout.scss

@@ -1,3 +1,5 @@
+@use 'ej2-base/styles/common/mixin' as *;
+@use './theme-variables' as *;
 @mixin multicolumn-combobox-styles($margin-top-value) {
   &.e-multicolumn-list {
     margin-top: $margin-top-value;
@@ -7,14 +9,14 @@
 @include export-module('multicolumn-combobox-layout') {
   .e-multicolumn-list-icon .e-spinner-pane .e-spinner-inner svg {
     /* stylelint-disable declaration-no-important */
-    height: 20px !important;
-    width: 20px !important;
+    height: $multicolumn-spin-pane-height !important;
+    width: $multicolumn-spinner-width !important;
     transform-origin: 10px 10px 10px !important;
     /* stylelint-enable declaration-no-important */
   }
   .e-multicolumn-grid tr.e-groupcaptionrow {
     position: sticky;
-    top: 0;
+    top: $padding-zero;
     .e-groupcaption {
       font-weight: 600;
     }
@@ -34,7 +36,7 @@
   .e-multicolumn-grid.e-rtl .e-gridheader {
     @if ($skin-name == 'highcontrast') {
       .e-headercelldiv {
-        margin: 0;
+        margin: $padding-zero;
       }
     }
   }
@@ -46,24 +48,24 @@
     vertical-align: middle;
     border-style: solid;
     border-width: $footer-border-width;
-    font-size: 14px;
+    font-size: $multicolumn-font-size;
     height: $multicolumn-grid-height;
     display: flex;
     align-items: center;
-    border-radius: 0 0 $multicolumn-popup-border-radius $multicolumn-popup-border-radius;
+    border-radius: $multicolumn-zero-border-radius $multicolumn-zero-border-radius $multicolumn-popup-border-radius $multicolumn-popup-border-radius;
   }
   .e-multicolumn-list .e-multicolumn-list-hidden {
     border: 0;
-    height: 0;
-    padding: 0;
+    height: $multicolumn-zero-height;
+    padding: $padding-zero;
     visibility: hidden;
-    width: 0;
+    width: $multicolumn-zero-width;
   }
   .e-multicolumn-grid.e-grid {
     border-width: $grid-border-width;
     border-radius: $multicolumn-popup-border-radius;
     .e-gridcontent {
-      border-radius: 0 0 $multicolumn-popup-border-radius $multicolumn-popup-border-radius;
+      border-radius: $multicolumn-zero-border-radius $multicolumn-zero-border-radius $multicolumn-popup-border-radius $multicolumn-popup-border-radius;
     }
   }
   .e-input-group.e-multicolumn-list {
@@ -74,9 +76,9 @@
   .e-multicolumn-list {
     &:has(.e-popup-footer) {
       .e-multicolumn-grid.e-grid {
-        border-radius: $multicolumn-popup-border-radius $multicolumn-popup-border-radius 0 0;
+        border-radius: $multicolumn-popup-border-radius $multicolumn-popup-border-radius $multicolumn-zero-border-radius $multicolumn-zero-border-radius;
         .e-gridcontent {
-          border-radius: 0;
+          border-radius: $multicolumn-zero-border-radius;
         }
       }
     }
@@ -107,8 +109,8 @@
     .e-nodata {
       cursor: default;
       font-family: inherit;
-      font-size: 14px;
-      padding: 14px 16px;
+      font-size: $multicolumn-font-size;
+      padding: $multicolumn-nodata-padding;
       text-align: center;
       border-radius: inherit;
     }
@@ -117,7 +119,7 @@
     }
     .e-gridheader {
       position: sticky;
-      top: 0;
+      top: $padding-zero;
       z-index: 1;
       border-radius: $multicolumn-popup-border-radius $multicolumn-popup-border-radius 0 0;
     }
@@ -145,7 +147,7 @@
     .e-multicolumn-grid .e-headercelldiv,
     .e-multicolumn-grid .e-rowcell,
     &.e-multicolumn-list .e-popup-footer {
-      font-size: 12px;
+      font-size: $multicolumn-small-grid-footer-font-size;
     }
     &.e-multicolumn-list .e-popup-footer,
     .e-multicolumn-grid .e-row,

package/styles/multicolumn-combobox/_material-dark-definition.scss

@@ -1,3 +1,5 @@
+@use 'ej2-base/styles/definition/material-dark' as *;
+@forward 'ej2-base/styles/definition/material-dark';
 $header-font-weight: 500 !default;
 $multicolumn-grid-height: 36px !default;
 $multicolumn-margin-top-value: 1px !default;
@@ -30,3 +32,18 @@ $altrow-bg-color: $grey-700 !default;
 $popup-box-shadow: 0 .6px 1.8px 0 rgba($grey-black, .1), 0 3.2px 7.2px 0 rgba($grey-black, .13) !default;
 $nodata-bg-color: $grey-800 !default;
 $nodata-border-color: $grey-800 !default;
+
+$padding-zero: 0;
+$multicolumn-nodata-padding: 14px 16px;
+$multicolumn-bigger-spin-pane-height: 26px !default;
+$multicolumn-bgr-small-font-size: 14px !default;
+$multicolumn-spin-pane-height: 20px !default;
+$multicolumn-grid-cation-font-weight: 600 !default;
+$multicolumn-font-size: 14px !default;
+$multicolumn-zero-height: 0 !default;
+$multicolumn-zero-border-radius: 0 !default;
+$multicolumn-small-grid-footer-font-size: 12px !default;
+$multicolumn-bigger-spinner-width: 26px !default;
+$multicolumn-spinner-width: 20px !default;
+$multicolumn-zero-width: 0 !default;
+$multicolumn-bigger-popup-footer-font-size: 16px !default;

package/styles/multicolumn-combobox/_material-definition.scss

@@ -1,3 +1,5 @@
+@use 'ej2-base/styles/definition/material' as *;
+@forward 'ej2-base/styles/definition/material';
 $header-font-weight: 500 !default;
 $multicolumn-grid-height: 36px !default;
 $multicolumn-margin-top-value: 1px !default;
@@ -30,3 +32,18 @@ $altrow-bg-color: $grey-100 !default;
 $popup-box-shadow: 0 .6px 1.8px 0 rgba($grey-black, .1), 0 3.2px 7.2px 0 rgba($grey-black, .13) !default;
 $nodata-bg-color: $grey-white !default;
 $nodata-border-color: $grey-white !default;
+
+$padding-zero: 0;
+$multicolumn-nodata-padding: 14px 16px;
+$multicolumn-bigger-spin-pane-height: 26px !default;
+$multicolumn-bgr-small-font-size: 14px !default;
+$multicolumn-spin-pane-height: 20px !default;
+$multicolumn-grid-cation-font-weight: 600 !default;
+$multicolumn-font-size: 14px !default;
+$multicolumn-zero-height: 0 !default;
+$multicolumn-zero-border-radius: 0 !default;
+$multicolumn-small-grid-footer-font-size: 12px !default;
+$multicolumn-bigger-spinner-width: 26px !default;
+$multicolumn-spinner-width: 20px !default;
+$multicolumn-zero-width: 0 !default;
+$multicolumn-bigger-popup-footer-font-size: 16px !default;

package/styles/multicolumn-combobox/_material3-dark-definition.scss

@@ -1 +1,49 @@
-@import './material3-definition.scss';
+@use 'ej2-base/styles/definition/material3-dark' as *;
+@forward 'ej2-base/styles/definition/material3-dark';
+$header-font-weight: 500 !default;
+$multicolumn-grid-height: 32px !default;
+$multicolumn-margin-top-value: 1px !default;
+$footer-border-width: 0 1px 0 1px !default;
+$grid-border-width: 1px !default;
+$multicolumn-popup-border-radius: $radius-4 !default;
+
+$multicolumn-grid-small-height: 26px !default;
+$multicolumn-margin-top-small-value: 1px !default;
+
+$multicolumn-grid-bigger-height: 40px !default;
+$multicolumn-margin-top-bigger-value: 1px !default;
+
+$multicolumn-grid-bigger-small-height: 36px !default;
+$multicolumn-margin-top-bigger-small-value: 1px !default;
+
+$footer-border-color: rgba($border-light) !default;
+$popup-text-color: $content-text-color-alt1 !default;
+$grid-content-color: $content-text-color !default;
+$grid-content-hover-bg-color: $flyout-bg-color-hover !default;
+$grid-content-active-bg-color: $flyout-bg-color-selected !default;
+$grid-content-active-color: $flyout-text-color-selected !default;
+$grid-footer-bg-color: rgba($content-bg-color) !default;
+$grid-footer-color: $content-text-color-alt1 !default;
+$grid-group-content-header-color: $content-text-color-alt1 !default;
+$grid-group-content-header-bg-color: rgba($content-bg-color) !default;
+$grid-header-content-bg-color: $transparent !default;
+$grid-header-content-color: $content-text-color-alt1 !default;
+$altrow-bg-color: $content-bg-color-alt1 !default;
+$popup-box-shadow: $shadow-md !default;
+$nodata-bg-color: $flyout-bg-color !default;
+$nodata-border-color: $flyout-bg-color !default;
+
+$padding-zero: 0;
+$multicolumn-nodata-padding: 14px 16px;
+$multicolumn-bigger-spin-pane-height: 26px !default;
+$multicolumn-bgr-small-font-size: 14px !default;
+$multicolumn-spin-pane-height: 20px !default;
+$multicolumn-grid-cation-font-weight: 600 !default;
+$multicolumn-font-size: 14px !default;
+$multicolumn-zero-height: 0 !default;
+$multicolumn-zero-border-radius: $radius-0 !default;
+$multicolumn-small-grid-footer-font-size: 12px !default;
+$multicolumn-bigger-spinner-width: 26px !default;
+$multicolumn-spinner-width: 20px !default;
+$multicolumn-zero-width: 0 !default;
+$multicolumn-bigger-popup-footer-font-size: 16px !default;

package/styles/multicolumn-combobox/_material3-definition.scss

@@ -1,9 +1,11 @@
+@use 'ej2-base/styles/definition/material3' as *;
+@forward 'ej2-base/styles/definition/material3';
 $header-font-weight: 500 !default;
 $multicolumn-grid-height: 32px !default;
 $multicolumn-margin-top-value: 1px !default;
 $footer-border-width: 0 1px 0 1px !default;
 $grid-border-width: 1px !default;
-$multicolumn-popup-border-radius: 4px !default;
+$multicolumn-popup-border-radius: $radius-4 !default;
 
 $multicolumn-grid-small-height: 26px !default;
 $multicolumn-margin-top-small-value: 1px !default;
@@ -30,3 +32,18 @@ $altrow-bg-color: $content-bg-color-alt1 !default;
 $popup-box-shadow: $shadow-md !default;
 $nodata-bg-color: $flyout-bg-color !default;
 $nodata-border-color: $flyout-bg-color !default;
+
+$padding-zero: 0;
+$multicolumn-nodata-padding: 14px 16px;
+$multicolumn-bigger-spin-pane-height: 26px !default;
+$multicolumn-bgr-small-font-size: 14px !default;
+$multicolumn-spin-pane-height: 20px !default;
+$multicolumn-grid-cation-font-weight: 600 !default;
+$multicolumn-font-size: 14px !default;
+$multicolumn-zero-height: 0 !default;
+$multicolumn-zero-border-radius: $radius-0 !default;
+$multicolumn-small-grid-footer-font-size: 12px !default;
+$multicolumn-bigger-spinner-width: 26px !default;
+$multicolumn-spinner-width: 20px !default;
+$multicolumn-zero-width: 0 !default;
+$multicolumn-bigger-popup-footer-font-size: 16px !default;

package/styles/multicolumn-combobox/_tailwind-dark-definition.scss

@@ -1 +1,49 @@
-@import './tailwind-definition.scss';
+@use 'ej2-base/styles/definition/tailwind-dark' as *;
+@forward 'ej2-base/styles/definition/tailwind-dark';
+$header-font-weight: 500 !default;
+$multicolumn-grid-height: 30px !default;
+$multicolumn-margin-top-value: 2px !default;
+$footer-border-width: 0 1px 0 1px !default;
+$grid-border-width: 1px !default;
+$multicolumn-popup-border-radius: 2px !default;
+
+$multicolumn-grid-small-height: 24px !default;
+$multicolumn-margin-top-small-value: 2px !default;
+
+$multicolumn-grid-bigger-height: 36px !default;
+$multicolumn-margin-top-bigger-value: 2px !default;
+
+$multicolumn-grid-bigger-small-height: 32px !default;
+$multicolumn-margin-top-bigger-small-value: 2px !default;
+
+$footer-border-color: $border-light !default;
+$popup-text-color: $content-text-color !default;
+$grid-content-color: $content-text-color !default;
+$grid-content-hover-bg-color: $content-bg-color-hover !default;
+$grid-content-active-bg-color: $content-bg-color-selected !default;
+$grid-content-active-color: $content-text-color-selected !default;
+$grid-footer-bg-color: $flyout-bg-color !default;
+$grid-footer-color: $content-text-color-alt2 !default;
+$grid-group-content-header-color: $content-text-color-alt2 !default;
+$grid-group-content-header-bg-color: $flyout-bg-color !default;
+$grid-header-content-bg-color: $content-bg-color-alt1 !default;
+$grid-header-content-color: $content-text-color-alt2 !default;
+$altrow-bg-color: $content-bg-color-alt1 !default;
+$popup-box-shadow: $shadow-lg !default;
+$nodata-bg-color: $flyout-bg-color !default;
+$nodata-border-color: $border-light !default;
+
+$padding-zero: 0;
+$multicolumn-nodata-padding: 14px 16px;
+$multicolumn-bigger-spin-pane-height: 26px !default;
+$multicolumn-bgr-small-font-size: 14px !default;
+$multicolumn-spin-pane-height: 20px !default;
+$multicolumn-grid-cation-font-weight: 600 !default;
+$multicolumn-font-size: 14px !default;
+$multicolumn-zero-height: 0 !default;
+$multicolumn-zero-border-radius: 0 !default;
+$multicolumn-small-grid-footer-font-size: 12px !default;
+$multicolumn-bigger-spinner-width: 26px !default;
+$multicolumn-spinner-width: 20px !default;
+$multicolumn-zero-width: 0 !default;
+$multicolumn-bigger-popup-footer-font-size: 16px !default;

package/styles/multicolumn-combobox/_tailwind-definition.scss

@@ -1,3 +1,5 @@
+@use 'ej2-base/styles/definition/tailwind' as *;
+@forward 'ej2-base/styles/definition/tailwind';
 $header-font-weight: 500 !default;
 $multicolumn-grid-height: 30px !default;
 $multicolumn-margin-top-value: 2px !default;
@@ -30,3 +32,18 @@ $altrow-bg-color: $content-bg-color-alt1 !default;
 $popup-box-shadow: $shadow-lg !default;
 $nodata-bg-color: $flyout-bg-color !default;
 $nodata-border-color: $border-light !default;
+
+$padding-zero: 0;
+$multicolumn-nodata-padding: 14px 16px;
+$multicolumn-bigger-spin-pane-height: 26px !default;
+$multicolumn-bgr-small-font-size: 14px !default;
+$multicolumn-spin-pane-height: 20px !default;
+$multicolumn-grid-cation-font-weight: 600 !default;
+$multicolumn-font-size: 14px !default;
+$multicolumn-zero-height: 0 !default;
+$multicolumn-zero-border-radius: 0 !default;
+$multicolumn-small-grid-footer-font-size: 12px !default;
+$multicolumn-bigger-spinner-width: 26px !default;
+$multicolumn-spinner-width: 20px !default;
+$multicolumn-zero-width: 0 !default;
+$multicolumn-bigger-popup-footer-font-size: 16px !default;

package/styles/multicolumn-combobox/_tailwind3-definition.scss

@@ -1,9 +1,11 @@
+@use 'ej2-base/styles/definition/tailwind3' as *;
+@forward 'ej2-base/styles/definition/tailwind3';
 $header-font-weight: 600 !default;
 $multicolumn-grid-height: 32px !default;
 $multicolumn-margin-top-value: 2px !default;
 $footer-border-width: 1px !default;
 $grid-border-width: 1px !default;
-$multicolumn-popup-border-radius: 6px !default;
+$multicolumn-popup-border-radius: $radius-6 !default;
 
 $multicolumn-grid-small-height: 24px !default;
 $multicolumn-margin-top-small-value: 2px !default;
@@ -30,3 +32,18 @@ $altrow-bg-color: $content-bg-color-alt1 !default;
 $popup-box-shadow: none !default;
 $nodata-bg-color: $flyout-bg-color !default;
 $nodata-border-color: $flyout-border !default;
+
+$padding-zero: 0;
+$multicolumn-nodata-padding: 14px 16px;
+$multicolumn-bigger-spin-pane-height: 26px !default;
+$multicolumn-bgr-small-font-size: 14px !default;
+$multicolumn-spin-pane-height: 20px !default;
+$multicolumn-grid-cation-font-weight: 600 !default;
+$multicolumn-font-size: 14px !default;
+$multicolumn-zero-height: 0 !default;
+$multicolumn-zero-border-radius: $radius-0 !default;
+$multicolumn-small-grid-footer-font-size: 12px !default;
+$multicolumn-bigger-spinner-width: 26px !default;
+$multicolumn-spinner-width: 20px !default;
+$multicolumn-zero-width: 0 !default;
+$multicolumn-bigger-popup-footer-font-size: 16px !default;

package/styles/multicolumn-combobox/_theme-variables.scss

@@ -0,0 +1 @@
+@forward './_tailwind3-definition';

package/styles/multicolumn-combobox/_theme.scss

@@ -1,3 +1,5 @@
+@use 'ej2-base/styles/common/mixin' as *;
+@use './theme-variables' as *;
 @include export-module('multicolumn-combobox-theme') {
   .e-multicolumn-list .e-popup-footer {
     background: $grid-footer-bg-color;

package/styles/multicolumn-combobox/bds.scss

@@ -1,12 +1,12 @@
-@import 'ej2-base/styles/definition/bds.scss';
-@import 'ej2-buttons/styles/button/bds-definition.scss';
-@import 'ej2-splitbuttons/styles/drop-down-button/bds-definition.scss';
-@import 'ej2-dropdowns/styles/drop-down-base/bds-definition.scss';
-@import 'ej2-dropdowns/styles/drop-down-list/bds-definition.scss';
-@import 'ej2-dropdowns/styles/combo-box/bds-definition.scss';
-@import 'ej2-grids/styles/grid/bds-definition.scss';
-@import 'ej2-popups/styles/spinner/bds-definition.scss';
-@import 'bds-definition.scss';
-@import 'icons/bds.scss';
-@import 'all.scss';
-@import 'bigger.scss';
+@use 'ej2-base/styles/definition/bds' as *;
+@use 'ej2-buttons/styles/button/bds-definition' as *;
+@use 'ej2-splitbuttons/styles/drop-down-button/bds-definition' as *;
+@use 'ej2-dropdowns/styles/drop-down-base/bds-definition' as *;
+@use 'ej2-dropdowns/styles/drop-down-list/bds-definition' as *;
+@use 'ej2-dropdowns/styles/combo-box/bds-definition' as *;
+@use 'ej2-grids/styles/grid/bds-definition' as *;
+@use 'ej2-popups/styles/spinner/bds-definition' as *;
+@use 'bds-definition' as *;
+@use 'icons/bds' as *;
+@use 'all' as *;
+@use 'bigger' as *;

package/styles/multicolumn-combobox/bootstrap-dark.scss

@@ -1,12 +1,12 @@
-@import 'ej2-base/styles/definition/bootstrap-dark.scss';
-@import 'ej2-buttons/styles/button/bootstrap-dark-definition.scss';
-@import 'ej2-splitbuttons/styles/drop-down-button/bootstrap-dark-definition.scss';
-@import 'ej2-dropdowns/styles/drop-down-base/bootstrap-dark-definition.scss';
-@import 'ej2-dropdowns/styles/drop-down-list/bootstrap-dark-definition.scss';
-@import 'ej2-dropdowns/styles/combo-box/bootstrap-dark-definition.scss';
-@import 'ej2-grids/styles/grid/bootstrap-dark-definition.scss';
-@import 'ej2-popups/styles/spinner/bootstrap-dark-definition.scss';
-@import 'bootstrap-dark-definition.scss';
-@import 'icons/bootstrap-dark.scss';
-@import 'all.scss';
-@import 'bigger.scss';
+@use 'ej2-base/styles/definition/bootstrap-dark' as *;
+@use 'ej2-buttons/styles/button/bootstrap-dark-definition' as *;
+@use 'ej2-splitbuttons/styles/drop-down-button/bootstrap-dark-definition' as *;
+@use 'ej2-dropdowns/styles/drop-down-base/bootstrap-dark-definition' as *;
+@use 'ej2-dropdowns/styles/drop-down-list/bootstrap-dark-definition' as *;
+@use 'ej2-dropdowns/styles/combo-box/bootstrap-dark-definition' as *;
+@use 'ej2-grids/styles/grid/bootstrap-dark-definition' as *;
+@use 'ej2-popups/styles/spinner/bootstrap-dark-definition' as *;
+@use 'bootstrap-dark-definition' as *;
+@use 'icons/bootstrap-dark' as *;
+@use 'all' as *;
+@use 'bigger' as *;

package/styles/multicolumn-combobox/bootstrap.scss

@@ -1,12 +1,12 @@
-@import 'ej2-base/styles/definition/bootstrap.scss';
-@import 'ej2-buttons/styles/button/bootstrap-definition.scss';
-@import 'ej2-splitbuttons/styles/drop-down-button/bootstrap-definition.scss';
-@import 'ej2-dropdowns/styles/drop-down-base/bootstrap-definition.scss';
-@import 'ej2-dropdowns/styles/drop-down-list/bootstrap-definition.scss';
-@import 'ej2-dropdowns/styles/combo-box/bootstrap-definition.scss';
-@import 'ej2-grids/styles/grid/bootstrap-definition.scss';
-@import 'ej2-popups/styles/spinner/bootstrap-definition.scss';
-@import 'bootstrap-definition.scss';
-@import 'icons/bootstrap.scss';
-@import 'all.scss';
-@import 'bigger.scss';
+@use 'ej2-base/styles/definition/bootstrap' as *;
+@use 'ej2-buttons/styles/button/bootstrap-definition' as *;
+@use 'ej2-splitbuttons/styles/drop-down-button/bootstrap-definition' as *;
+@use 'ej2-dropdowns/styles/drop-down-base/bootstrap-definition' as *;
+@use 'ej2-dropdowns/styles/drop-down-list/bootstrap-definition' as *;
+@use 'ej2-dropdowns/styles/combo-box/bootstrap-definition' as *;
+@use 'ej2-grids/styles/grid/bootstrap-definition' as *;
+@use 'ej2-popups/styles/spinner/bootstrap-definition' as *;
+@use 'bootstrap-definition' as *;
+@use 'icons/bootstrap' as *;
+@use 'all' as *;
+@use 'bigger' as *;

package/styles/multicolumn-combobox/bootstrap4.scss

@@ -1,12 +1,12 @@
-@import 'ej2-base/styles/definition/bootstrap4.scss';
-@import 'ej2-buttons/styles/button/bootstrap4-definition.scss';
-@import 'ej2-splitbuttons/styles/drop-down-button/bootstrap4-definition.scss';
-@import 'ej2-dropdowns/styles/drop-down-base/bootstrap4-definition.scss';
-@import 'ej2-dropdowns/styles/drop-down-list/bootstrap4-definition.scss';
-@import 'ej2-dropdowns/styles/combo-box/bootstrap4-definition.scss';
-@import 'ej2-grids/styles/grid/bootstrap4-definition.scss';
-@import 'ej2-popups/styles/spinner/bootstrap4-definition.scss';
-@import 'bootstrap4-definition.scss';
-@import 'icons/bootstrap4.scss';
-@import 'all.scss';
-@import 'bigger.scss';
+@use 'ej2-base/styles/definition/bootstrap4' as *;
+@use 'ej2-buttons/styles/button/bootstrap4-definition' as *;
+@use 'ej2-splitbuttons/styles/drop-down-button/bootstrap4-definition' as *;
+@use 'ej2-dropdowns/styles/drop-down-base/bootstrap4-definition' as *;
+@use 'ej2-dropdowns/styles/drop-down-list/bootstrap4-definition' as *;
+@use 'ej2-dropdowns/styles/combo-box/bootstrap4-definition' as *;
+@use 'ej2-grids/styles/grid/bootstrap4-definition' as *;
+@use 'ej2-popups/styles/spinner/bootstrap4-definition' as *;
+@use 'bootstrap4-definition' as *;
+@use 'icons/bootstrap4' as *;
+@use 'all' as *;
+@use 'bigger' as *;

package/styles/multicolumn-combobox/bootstrap5-dark.scss

@@ -1,12 +1,12 @@
-@import 'ej2-base/styles/definition/bootstrap5-dark.scss';
-@import 'ej2-buttons/styles/button/bootstrap5-dark-definition.scss';
-@import 'ej2-splitbuttons/styles/drop-down-button/bootstrap5-dark-definition.scss';
-@import 'ej2-dropdowns/styles/drop-down-base/bootstrap5-dark-definition.scss';
-@import 'ej2-dropdowns/styles/drop-down-list/bootstrap5-dark-definition.scss';
-@import 'ej2-dropdowns/styles/combo-box/bootstrap5-dark-definition.scss';
-@import 'ej2-grids/styles/grid/bootstrap5-dark-definition.scss';
-@import 'ej2-popups/styles/spinner/bootstrap5-dark-definition.scss';
-@import 'bootstrap5-dark-definition.scss';
-@import 'icons/bootstrap5-dark.scss';
-@import 'all.scss';
-@import 'bigger.scss';
+@use 'ej2-base/styles/definition/bootstrap5-dark' as *;
+@use 'ej2-buttons/styles/button/bootstrap5-dark-definition' as *;
+@use 'ej2-splitbuttons/styles/drop-down-button/bootstrap5-dark-definition' as *;
+@use 'ej2-dropdowns/styles/drop-down-base/bootstrap5-dark-definition' as *;
+@use 'ej2-dropdowns/styles/drop-down-list/bootstrap5-dark-definition' as *;
+@use 'ej2-dropdowns/styles/combo-box/bootstrap5-dark-definition' as *;
+@use 'ej2-grids/styles/grid/bootstrap5-dark-definition' as *;
+@use 'ej2-popups/styles/spinner/bootstrap5-dark-definition' as *;
+@use 'bootstrap5-dark-definition' as *;
+@use 'icons/bootstrap5-dark' as *;
+@use 'all' as *;
+@use 'bigger' as *;