@syncfusion/ej2-dropdowns 31.2.18 → 32.1.19

package/styles/list-box/_bds-definition.scss

@@ -1,3 +1,6 @@
+@use 'ej2-base/styles/definition/bds' as *;
+@forward 'ej2-base/styles/definition/bds';
+
 //layout variables
 $listbox-font-family: $font-family !default;
 $listbox-icon-margin-right: 16px !default;
@@ -8,7 +11,7 @@ $listbox-item-height: 38px !default;
 $listbox-item-line-height: 1 !default;
 $listbox-item-padding: 12px 12px !default;
 $listbox-bigger-item-padding: 12px 16px !default;
-$listbox-header-text-padding: 12px !default;
+$listbox-header-text-padding: 0 12px !default;
 $listbox-header-font-size: $text-xs !default;
 $listbox-header-height: 18px !default;
 $listbox-header-font-weight: $font-weight-medium !default;
@@ -43,6 +46,13 @@ $listbox-checkbox-left-margin: -2px 8px 0 0 !default;
 $listbox-rtl-checkbox-left-margin: -2px 0 0 8px !default;
 $listbox-rtl-checkbox-right-margin: -2px 8px 0 0 !default;
 
+$listbox-bigger-wrapper-padding: 12px !default;
+$listbox-zero-margin-padding: 0 !default;
+$listbox-input-grp-padding: 4px 8px !default;
+$listbox-input-focus-padding: 4px 4px 4px 8px !default;
+$listbox-tool-padding: 8px !default;
+$listbox-template-multiline-header-font-weight: 500 !default;
+
 //ListView In-built template variables
 $listbox-template-padding: 8px 16px !default;
 $listbox-template-avatar-padding-right: 16px !default;
@@ -121,6 +131,50 @@ $listbox-ej2-filterselect-height: calc(100% - 87.5px) !default;
 $listbox-ej2-filterselect-bigger-height: calc(100% - 106px) !default;
 $listbox-icon-padding: 1px !default;
 
+$listbox-group-item-font-weight: 600 !default;
+$listbox-icon-collapsible-font-size: 12px !default;
+$listbox-zero-padding-margin: 0 !default;
+$listbox-list-icon-margin-left: 16px !default;
+$listbox-list-badge-border-radius: 50% !default;
+$listbox-list-badge-font-size: 12px !default;
+$listbox-wrapper-right-left-margin: 15px !default;
+$listbox-tool-btn-margin-bottom: 10px !default;
+
+$listbox-full-height: 100% !default;
+$listbox-list-icon-height: 30px !default;
+$listbox-hidden-select-height: 1px !default;
+$listbox-placeholder-height: 1px !default;
+$list-border-width: 1px !default;
+$list-badge-height: 22px !default;
+
+$list-icon-width: auto !default;
+$list-icon-height: auto !default;
+$list-badge-width: 22px !default;
+$listbox-list-icon-width: 30px !default;
+
+$listbox-full-width: 100% !default;
+$list-box-header-view-top: 45px !default;
+$list-box-half-width: 50% !default;
+$checkbox-wrapper-top: 30% !default;
+$list-box-list-item-height: 38px !default;
+$list-box-list-badge-right: -10px !default;
+$list-box-list-badge-top: -10px !default;
+$list-text-checkbox-width: calc(100% - 40px);
+$list-box-checkbox-icon-width: calc(100% - 90px);
+$list-checkbox-right-icon-width: calc(100% - 80px);
+$list-box-icon-child-width: calc(100% - 92px);
+$list-box-text-width: calc(100% - 60px);
+$list-box-bgr-border-radius: 6px !default;
+$list-box-bgr-list-item-font-size: 16px !default;
+$list-tool-box-wrap-width: calc(100% - 17%);
+$list-box-nrml-border-radius: 4px;
+$list-tool-nrml-box-wrap-width: calc(100% - 16%);
+
+$list-box-full-height: 100% !default;
+$list-border: 1px !default;
+$zero-border: 0 !default;
+$zero-width: 0% !default;
+
 /* stylelint-disable */
 .e-listbox-wrapper{
   padding: 0 12px !important;

package/styles/list-box/_bigger.scss

@@ -1,3 +1,5 @@
+@use 'ej2-base/styles/common/mixin' as *;
+@use './theme-variables' as *;
 @include export-module('listbox-bigger') {
   .e-bigger .e-listbox-wrapper,
   .e-listbox-wrapper.e-bigger,
@@ -6,22 +8,19 @@
     @if ($skin-name == 'bootstrap4') {
       font-size: 16px;
     }
-    @if ($theme-name == 'bootstrap5.3' or $theme-name == 'bootstrap5.3-dark') {
-      border-radius: 6px;
-    }
-    @if $skin-name == 'tailwind3' {
-      border-radius: 8px;
+    @if ($theme-name == 'bootstrap5.3' or $theme-name == 'bootstrap5.3-dark' or $skin-name == 'tailwind3') {
+      border-radius: $list-box-bgr-border-radius;
     }
 
     &.e-listboxtool-container .e-list-wrap {
       @if $skin-name == 'FluentUI' or $skin-name == 'bootstrap5' or $skin-name == 'bootstrap5.3' or $skin-name == 'tailwind' {
-        width: calc(100% - 20%) !important; /* stylelint-disable-line declaration-no-important */
+        width: $list-tool-box-wrap-width !important; /* stylelint-disable-line declaration-no-important */
       }
       @else if $skin-name == 'material' or $skin-name == 'bootstrap4' or $skin-name == 'bootstrap' {
-        width: calc(100% - 15%) !important; /* stylelint-disable-line declaration-no-important */
+        width: $list-tool-box-wrap-width !important; /* stylelint-disable-line declaration-no-important */
       }
       @else if $skin-name == 'fabric' or $skin-name == 'highcontrast' {
-        width: calc(100% - 17%) !important; /* stylelint-disable-line declaration-no-important */
+        width: $list-tool-box-wrap-width !important; /* stylelint-disable-line declaration-no-important */
       }
     }
 
@@ -48,7 +47,7 @@
         padding: 12px 20px;
       }
       @if ($theme-name == 'bootstrap5.3' or $theme-name == 'bootstrap5.3-dark' or $skin-name == 'tailwind3') {
-        font-size: 16px;
+        font-size: $list-box-bgr-list-item-font-size;
       }
     }
 
@@ -63,16 +62,12 @@
     .e-list-group-item {
       height: $listbox-touch-groupheader-height;
       line-height: $listbox-touch-groupheader-line-height;
-      @if ($skin-name == 'bootstrap4') {
-        font-size: 16px;
-        padding: 12px 20px;
+      @if ($skin-name == 'bootstrap4' or $skin-name == 'tailwind3') {
+        font-size: $list-item-grup-font-size;
+        padding: $list-item-grp-padding;
       }
       @if $theme-name == 'bootstrap5.3' or $theme-name == 'bootstrap5.3-dark' {
-        padding: 9px 16px;
-      }
-      @if ($skin-name == 'tailwind3') {
-        font-size: 14px;
-        padding: 10px 16px;
+        padding: $list-item-grp-padding;
       }
     }
 
@@ -142,7 +137,7 @@
   .e-bigger .e-listbox-container .e-selectall-parent + .e-list-parent,
   .e-small.e-bigger .e-listbox-container.e-filter-list .e-list-parent,
   .e-bigger .e-listbox-container.e-filter-list .e-selectall-parent + .e-list-parent {
-    height: 100%;
+    height: $list-box-full-height;
   }
 
   .e-bigger .e-listbox-wrapper.e-filter-list .e-selectall-parent + .e-list-parent,
@@ -180,11 +175,11 @@
 
   @if $skin-name == 'tailwind3' {
     .e-bigger .e-listboxtool-wrapper .e-listbox-tool .e-btn-icon {
-      font-size: 18px;
+      font-size: $text-lg;
     }
 
     .e-bigger .e-listbox-wrapper .e-filter-parent {
-      padding: 12px;
+      padding: $listbox-bigger-filter-parent-padding;
     }
   }
 }

package/styles/list-box/_bootstrap-dark-definition.scss

@@ -1,4 +1,6 @@
 @use 'sass:color';
+@use 'ej2-base/styles/definition/bootstrap-dark' as *;
+@forward 'ej2-base/styles/definition/bootstrap-dark';
 
 //default
 $listbox-font-family: $font-family !default;
@@ -41,7 +43,7 @@ $listbox-item-active-bg: $grey-44 !default;
 $listbox-text-active-color: rgba($grey-light-font, .87) !default;
 $listbox-header-text-color: rgba($grey-light-font, .95) !default;
 $listbox-header-text-disabled: $grey-light-font !default;
-$listbox-header-text-padding: 20px !default;
+$listbox-header-text-padding: 0 20px !default;
 $listbox-header-bg: $grey-white !default;
 $listbox-header-icon-color: $grey-light-font !default;
 $listbox-header-icon-disabled: $grey-light-font !default;
@@ -77,6 +79,13 @@ $listbox-checkbox-right-margin: -4px 0 0 10px !default;
 $listbox-rtl-checkbox-left-margin: -4px 0 0 10px !default;
 $listbox-rtl-checkbox-right-margin: -4px 10px 0 0 !default;
 
+$listbox-bigger-wrapper-padding: 12px !default;
+$listbox-zero-margin-padding: 0 !default;
+$listbox-input-grp-padding: 4px 8px !default;
+$listbox-input-focus-padding: 4px 4px 4px 8px !default;
+$listbox-tool-padding: 8px !default;
+$listbox-template-multiline-header-font-weight: 500 !default;
+
 //ListView In-built template variables
 $listbox-template-padding: .7142em 1.0714em !default;
 $listbox-template-avatar-padding-right: 1.0714em !default;
@@ -125,3 +134,40 @@ $listbox-filter-bigger-height: calc(100% - 58px) !default;
 $listbox-ej2-filterselect-height: calc(100% - 91.5px) !default;
 $listbox-ej2-filterselect-bigger-height: calc(100% - 106px) !default;
 $listbox-icon-padding: 0 !default;
+$listbox-group-item-font-weight: 600 !default;
+$listbox-icon-collapsible-font-size: 12px !default;
+$listbox-zero-padding-margin: 0 !default;
+$listbox-list-icon-margin-left: 16px !default;
+$listbox-list-badge-border-radius: 50% !default;
+$listbox-list-badge-font-size: 12px !default;
+$listbox-wrapper-right-left-margin: 15px !default;
+$listbox-tool-btn-margin-bottom: 10px !default;
+
+$listbox-full-height: 100% !default;
+$listbox-list-icon-height: 30px !default;
+$listbox-hidden-select-height: 1px !default;
+$listbox-placeholder-height: 1px !default;
+$list-border-width: 1px !default;
+$list-badge-height: 22px !default;
+$list-icon-width: auto !default;
+$list-icon-height: auto !default;
+$list-badge-width: 22px !default;
+$listbox-list-icon-width: 30px !default;
+$listbox-full-width: 100% !default;
+$list-box-header-view-top: 45px !default;
+$list-box-half-width: 50% !default;
+$checkbox-wrapper-top: 30% !default;
+$list-box-list-item-height: 38px !default;
+$list-box-list-badge-right: -10px !default;
+$list-box-list-badge-top: -10px !default;
+$list-text-checkbox-width: calc(100% - 40px);
+$list-box-checkbox-icon-width: calc(100% - 90px);
+$list-checkbox-right-icon-width: calc(100% - 80px);
+$list-box-icon-child-width: calc(100% - 92px);
+$list-box-text-width: calc(100% - 60px);
+$list-tool-box-wrap-width: calc(100% - 17%);
+$list-tool-nrml-box-wrap-width: calc(100% - 14%);
+$list-box-full-height: 100% !default;
+$list-border: 1px !default;
+$zero-border: 0 !default;
+$zero-width: 0% !default;

package/styles/list-box/_bootstrap-definition.scss

@@ -1,3 +1,5 @@
+@use 'ej2-base/styles/definition/bootstrap' as *;
+@forward 'ej2-base/styles/definition/bootstrap';
 $listbox-font-family: $font-family !default;
 $listbox-text-color: rgba($grey-light-font, 1) !default;
 $listbox-text-disabled: $grey-light-font !default;
@@ -34,7 +36,7 @@ $listbox-item-active-bg: $grey-e6 !default;
 $listbox-text-active-color: rgba($grey-light-font, .87) !default;
 $listbox-header-text-color: rgba($grey-light-font, .95) !default;
 $listbox-header-text-disabled: $grey-light-font !default;
-$listbox-header-text-padding: 20px !default;
+$listbox-header-text-padding: 0 20px !default;
 $listbox-header-bg: $grey-white !default;
 $listbox-header-icon-color: $grey-light-font !default;
 $listbox-header-icon-disabled: $grey-light-font !default;
@@ -70,6 +72,13 @@ $listbox-checkbox-right-margin: -4px 0 0 10px !default;
 $listbox-rtl-checkbox-left-margin: -4px 0 0 10px !default;
 $listbox-rtl-checkbox-right-margin: -4px 10px 0 0 !default;
 
+$listbox-bigger-wrapper-padding: 12px !default;
+$listbox-zero-margin-padding: 0 !default;
+$listbox-input-grp-padding: 4px 8px !default;
+$listbox-input-focus-padding: 4px 4px 4px 8px !default;
+$listbox-tool-padding: 8px !default;
+$listbox-template-multiline-header-font-weight: 500 !default;
+
 //ListView In-built template variables
 $listbox-template-padding: .7142em 1.0714em !default;
 $listbox-template-avatar-padding-right: 1.0714em !default;
@@ -118,3 +127,40 @@ $listbox-filter-bigger-height: calc(100% - 58px) !default;
 $listbox-ej2-filterselect-height: calc(100% - 91.5px) !default;
 $listbox-ej2-filterselect-bigger-height: calc(100% - 106px) !default;
 $listbox-icon-padding: 0 !default;
+$listbox-group-item-font-weight: 600 !default;
+$listbox-icon-collapsible-font-size: 12px !default;
+$listbox-zero-padding-margin: 0 !default;
+$listbox-list-icon-margin-left: 16px !default;
+$listbox-list-badge-border-radius: 50% !default;
+$listbox-list-badge-font-size: 12px !default;
+$listbox-wrapper-right-left-margin: 15px !default;
+$listbox-tool-btn-margin-bottom: 10px !default;
+
+$listbox-full-height: 100% !default;
+$listbox-list-icon-height: 30px !default;
+$listbox-hidden-select-height: 1px !default;
+$listbox-placeholder-height: 1px !default;
+$list-border-width: 1px !default;
+$list-badge-height: 22px !default;
+$list-icon-width: auto !default;
+$list-icon-height: auto !default;
+$list-badge-width: 22px !default;
+$listbox-list-icon-width: 30px !default;
+$listbox-full-width: 100% !default;
+$list-box-header-view-top: 45px !default;
+$list-box-half-width: 50% !default;
+$checkbox-wrapper-top: 30% !default;
+$list-box-list-item-height: 38px !default;
+$list-box-list-badge-right: -10px !default;
+$list-box-list-badge-top: -10px !default;
+$list-text-checkbox-width: calc(100% - 40px);
+$list-box-checkbox-icon-width: calc(100% - 90px);
+$list-checkbox-right-icon-width: calc(100% - 80px);
+$list-box-icon-child-width: calc(100% - 92px);
+$list-box-text-width: calc(100% - 60px);
+$list-tool-box-wrap-width: calc(100% - 17%);
+$list-tool-nrml-box-wrap-width: calc(100% - 14%);
+$list-box-full-height: 100% !default;
+$list-border: 1px !default;
+$zero-border: 0 !default;
+$zero-width: 0% !default;

package/styles/list-box/_bootstrap4-definition.scss

@@ -1,4 +1,6 @@
 @use 'sass:color';
+@use 'ej2-base/styles/definition/bootstrap4' as *;
+@forward 'ej2-base/styles/definition/bootstrap4';
 
 $listbox-font-family: $font-family !default;
 $listbox-text-color: rgba($gray-900, 1) !default;
@@ -20,6 +22,15 @@ $listbox-root-border-color: rgba($black, .13);
 $listbox-root-border-radius: 4px;
 $listbox-nested-icon-collapsible: 10px;
 $listbox-focused-collapsible-color: $white !default;
+$list-item-grp-padding: 12px 20px !default;
+$list-item-grup-font-size: 16px !default;
+
+$listbox-bigger-wrapper-padding: 12px !default;
+$listbox-zero-margin-padding: 0 !default;
+$listbox-input-grp-padding: 4px 8px !default;
+$listbox-input-focus-padding: 4px 4px 4px 8px !default;
+$listbox-tool-padding: 8px !default;
+$listbox-template-multiline-header-font-weight: 500 !default;
 
 $checkmark-bgcolor: $content-bg !default;
 $checkmark-border-color: $content-bg !default;
@@ -41,7 +52,7 @@ $listbox-item-active-bg: $primary !default;
 $listbox-text-active-color: $primary-font !default;
 $listbox-header-text-color: $gray-900 !default;
 $listbox-header-text-disabled: $gray-600 !default;
-$listbox-header-text-padding: 16px !default;
+$listbox-header-text-padding: 0 16px !default;
 $listbox-header-bg: $content-bg !default;
 $listbox-header-icon-color: $black !default;
 $listbox-header-icon-disabled: $gray-600 !default;
@@ -125,3 +136,40 @@ $listbox-filter-bigger-height: calc(100% - 59px) !default;
 $listbox-ej2-filterselect-height: calc(100% - 90.5px) !default;
 $listbox-ej2-filterselect-bigger-height: calc(100% - 108px) !default;
 $listbox-icon-padding: 1px !default;
+$listbox-group-item-font-weight: 600 !default;
+$listbox-icon-collapsible-font-size: 12px !default;
+$listbox-zero-padding-margin: 0 !default;
+$listbox-list-icon-margin-left: 16px !default;
+$listbox-list-badge-border-radius: 50% !default;
+$listbox-list-badge-font-size: 12px !default;
+$listbox-wrapper-right-left-margin: 15px !default;
+$listbox-tool-btn-margin-bottom: 10px !default;
+
+$listbox-full-height: 100% !default;
+$listbox-list-icon-height: 30px !default;
+$listbox-hidden-select-height: 1px !default;
+$listbox-placeholder-height: 1px !default;
+$list-border-width: 1px !default;
+$list-badge-height: 22px !default;
+$list-icon-width: auto !default;
+$list-icon-height: auto !default;
+$list-badge-width: 22px !default;
+$listbox-list-icon-width: 30px !default;
+$listbox-full-width: 100% !default;
+$list-box-header-view-top: 45px !default;
+$list-box-half-width: 50% !default;
+$checkbox-wrapper-top: 30% !default;
+$list-box-list-item-height: 38px !default;
+$list-box-list-badge-right: -10px !default;
+$list-box-list-badge-top: -10px !default;
+$list-text-checkbox-width: calc(100% - 40px);
+$list-box-checkbox-icon-width: calc(100% - 90px);
+$list-checkbox-right-icon-width: calc(100% - 80px);
+$list-box-icon-child-width: calc(100% - 92px);
+$list-box-text-width: calc(100% - 60px);
+$list-tool-box-wrap-width: calc(100% - 15%);
+$list-tool-nrml-box-wrap-width: calc(100% - 14%);
+$list-box-full-height: 100% !default;
+$list-border: 1px !default;
+$zero-border: 0 !default;
+$zero-width: 0% !default;

package/styles/list-box/_bootstrap5-dark-definition.scss

@@ -1 +1,169 @@
-@import './bootstrap5-definition.scss';
+@use 'ej2-base/styles/definition/bootstrap5-dark' as *;
+@forward 'ej2-base/styles/definition/bootstrap5-dark';
+
+//layout variables
+$listbox-font-family: $font-family !default;
+$listbox-icon-margin-right: 16px !default;
+$listbox-icon-line-height: 34px !default;
+$listbox-icon-back-margin: 2px !default;
+$listbox-rtl-icon-back-margin: -2px !default;
+$listbox-item-line-height: 1 !default;
+$listbox-item-padding: 10px 12px !default;
+$listbox-bigger-item-padding: 8px 16px !default;
+$listbox-header-text-padding: 0 12px !default;
+$listbox-header-font-size: $text-xs !default;
+$listbox-header-height: 18px !default;
+$listbox-header-font-weight: $font-weight-medium !default;
+$listbox-header-line-height: 18px !default;
+$listbox-header-padding-bottom: 0 !default;
+$listbox-touch-back-icon-padding: 0 !default;
+$listbox-border-bottom: 0 !default;
+$listbox-border-top: 0 !default;
+$listbox-border-left: 0 !default;
+$listbox-border-right: 0 !default;
+$listbox-group-first-border-bottom: 0 !default;
+$listbox-group-border-top: 1px !default;
+$listbox-group-border-bottom: 0 !default;
+$listbox-groupheader-item-height: 30px !default;
+$listbox-groupheader-item-line-height: 10px !default;
+$listbox-groupheader-font-size: $text-xs !default;
+$listbox-border-size: 0 !default;
+$listbox-font-size: $text-sm !default;
+$listbox-back-padding-right: 8px !default;
+$listbox-touch-item-height: 48px !default;
+$listbox-touch-item-line-height: 1.6 !default;
+$listbox-touch-item-font-size: $text-base !default;
+$listbox-touch-groupheader-height: 40px !default;
+$listbox-touch-groupheader-line-height: 25px !default;
+$listbox-touch-header-height: 22px !default;
+$listbox-touch-header-font-weight: $font-weight-medium !default;
+$listbox-touch-header-font-size: $text-sm !default;
+$listbox-touch-header-line-height: 22px !default;
+$listbox-touch-header-icon-margin-top: 2px !default;
+$listbox-checkbox-right-margin: -2px 0 0 8px !default;
+$listbox-checkbox-left-margin: -2px 8px 0 0 !default;
+$listbox-rtl-checkbox-left-margin: -2px 0 0 8px !default;
+$listbox-rtl-checkbox-right-margin: -2px 8px 0 0 !default;
+
+$listbox-bigger-wrapper-padding: 12px !default;
+$listbox-zero-margin-padding: 0 !default;
+$listbox-input-grp-padding: 4px 8px !default;
+$listbox-input-focus-padding: 4px 4px 4px 8px !default;
+$listbox-tool-padding: 8px !default;
+$listbox-template-multiline-header-font-weight: 500 !default;
+
+//ListView In-built template variables
+$listbox-template-padding: 8px 16px !default;
+$listbox-template-avatar-padding-right: 16px !default;
+$listbox-template-avatar-padding-left: 68px !default;
+$listbox-template-avatar-rightposition-padding-right: 68px !default;
+$listbox-template-avatar-rightposition-padding-left: 16px !default;
+$listbox-template-avatar-size: 40px !default;
+$listbox-template-avatar-top: 0 !default;
+$listbox-template-avatar-left: 0 !default;
+$listbox-template-avatar-rightposition-right: 0 !default;
+$listbox-template-badge-height: 18px !default;
+$listbox-template-badge-width: 32px !default;
+$listbox-template-badge-line-height: 16px !default;
+$listbox-template-badge-font-size: $text-xxs !default;
+$listbox-template-badge-right: 12px !default;
+$listbox-template-avatar-badge-padding-right: 10px !default;
+$listbox-template-avatar-badge-padding-left: 68px !default;
+$listbox-template-badgewithoutavatar-padding-right: 10px !default;
+$listbox-template-badgewithoutavatar-padding-left: 16px !default;
+$listbox-template-item-padding: 8px 0 !default;
+$listbox-template-multiline-header-padding: 0 !default;
+$listbox-template-multiline-content-padding: 2px 0 0 0 !default;
+$listbox-template-multiline-header-font-size: $text-sm !default;
+$listbox-template-multiline-padding: 4px !default;
+$listbox-template-multiline-content-font-size: $text-sm !default;
+$listbox-template-multiline-avatar-top: 0 !default;
+$listbox-filter-small-height: calc(100% - 45px) !default;
+$listbox-filter-bigger-small-height: calc(100% - 45px) !default;
+$listbox-item-height: 36px !default;
+
+$listbox-border-color: $border-light;
+$badge-color: $primary-text-color !default;
+$badge-bgcolor: $primary !default;
+
+$select-all-border-color: $border-light !default;
+$listbox-text-color: $content-text-color !default;
+$listbox-text-disabled: $content-text-color-disabled !default;
+$listbox-icon-color: $icon-color !default;
+$listbox-icon-disabled: $icon-color-disabled !default;
+$listbox-item-hover-bg: $content-bg-color-alt2 !default;
+$listbox-background: $transparent !default;
+$listbox-line-color: $border-light !default;
+$listbox-hover-border-color: transparent !default;
+$listbox-border-bottom-color: transparent !default;
+$listbox-border-top-color: transparent !default;
+$listbox-border-right-color: transparent !default;
+$listbox-border-left-color: transparent !default;
+$listbox-text-hover-color: $content-text-color !default;
+$listbox-item-active-bg: $content-bg-color-alt2 !default;
+$listbox-text-active-color: rgba($content-text-color, .87) !default;
+$listbox-text-selected-color: rgba($content-text-color, .87) !default;
+$listbox-header-text-color: $content-text-color-alt2 !default;
+$listbox-header-text-disabled: $content-text-color-disabled !default;
+$listbox-header-bg: $content-bg-color-alt2 !default;
+$listbox-header-icon-color: $icon-color !default;
+$listbox-header-icon-disabled: $icon-color-disabled !default;
+$listbox-header-border: rgba($black, .12) !default;
+$checkmark-bgcolor: $primary !default;
+$checkmark-border-color: transparent !default;
+$checkmark-color: $primary-text-color !default;
+$listbox-groupheader-text-color: $black !default;
+$listbox-groupheader-bg: $content-bg-color-alt2 !default;
+$listbox-groupheader-border: $black !default;
+$listbox-groupheader-icon: $icon-color !default;
+$listbox-template-multiline-header-color: $content-text-color !default;
+$listbox-template-multiline-content-color: $content-text-color-alt2 !default;
+
+$listbox-select-height: calc(100% - 36px) !default;
+$listbox-select-bigger-height: calc(100% - 40px) !default;
+$listbox-filterselect-height: calc(100% - 36px) !default;
+$listbox-filterselect-bigger-height: calc(100% - 48px) !default;
+$listbox-mat-filter-height: calc(100% - 50px) !default;
+$listbox-mat-filter-bigger-height: calc(100% - 55px) !default;
+$listbox-filter-height: calc(100% - 50px) !default;
+$listbox-filter-bigger-height: calc(100% - 56px) !default;
+$listbox-ej2-filterselect-height: calc(100% - 86px) !default;
+$listbox-ej2-filterselect-bigger-height: calc(100% - 104px) !default;
+$listbox-icon-padding: 2px !default;
+$listbox-group-item-font-weight: 600 !default;
+$listbox-icon-collapsible-font-size: 12px !default;
+$listbox-zero-padding-margin: 0 !default;
+$listbox-list-icon-margin-left: 16px !default;
+$listbox-list-badge-border-radius: 50% !default;
+$listbox-list-badge-font-size: 12px !default;
+$listbox-wrapper-right-left-margin: 15px !default;
+$listbox-tool-btn-margin-bottom: 10px !default;
+
+$listbox-full-height: 100% !default;
+$listbox-list-icon-height: 30px !default;
+$listbox-hidden-select-height: 1px !default;
+$listbox-placeholder-height: 1px !default;
+$list-border-width: 1px !default;
+$list-badge-height: 22px !default;
+$list-icon-width: auto !default;
+$list-icon-height: auto !default;
+$list-badge-width: 22px !default;
+$listbox-list-icon-width: 30px !default;
+$listbox-full-width: 100% !default;
+$list-box-header-view-top: 45px !default;
+$list-box-half-width: 50% !default;
+$checkbox-wrapper-top: 30% !default;
+$list-box-list-item-height: 38px !default;
+$list-box-list-badge-right: -10px !default;
+$list-box-list-badge-top: -10px !default;
+$list-text-checkbox-width: calc(100% - 40px);
+$list-box-checkbox-icon-width: calc(100% - 90px);
+$list-checkbox-right-icon-width: calc(100% - 80px);
+$list-box-icon-child-width: calc(100% - 92px);
+$list-box-text-width: calc(100% - 60px);
+$list-tool-box-wrap-width: calc(100% - 20%);
+$list-tool-nrml-box-wrap-width: calc(100% - 16%);
+$list-box-full-height: 100% !default;
+$list-border: 1px !default;
+$zero-border: 0 !default;
+$zero-width: 0% !default;

package/styles/list-box/_bootstrap5-definition.scss

@@ -1,3 +1,6 @@
+@use 'ej2-base/styles/definition/bootstrap5' as *;
+@forward 'ej2-base/styles/definition/bootstrap5';
+
 //layout variables
 $listbox-font-family: $font-family !default;
 $listbox-icon-margin-right: 16px !default;
@@ -7,7 +10,7 @@ $listbox-rtl-icon-back-margin: -2px !default;
 $listbox-item-line-height: 1 !default;
 $listbox-item-padding: 10px 12px !default;
 $listbox-bigger-item-padding: 8px 16px !default;
-$listbox-header-text-padding: 12px !default;
+$listbox-header-text-padding: 0 12px !default;
 $listbox-header-font-size: $text-xs !default;
 $listbox-header-height: 18px !default;
 $listbox-header-font-weight: $font-weight-medium !default;
@@ -42,6 +45,13 @@ $listbox-checkbox-left-margin: -2px 8px 0 0 !default;
 $listbox-rtl-checkbox-left-margin: -2px 0 0 8px !default;
 $listbox-rtl-checkbox-right-margin: -2px 8px 0 0 !default;
 
+$listbox-bigger-wrapper-padding: 12px !default;
+$listbox-zero-margin-padding: 0 !default;
+$listbox-input-grp-padding: 4px 8px !default;
+$listbox-input-focus-padding: 4px 4px 4px 8px !default;
+$listbox-tool-padding: 8px !default;
+$listbox-template-multiline-header-font-weight: 500 !default;
+
 //ListView In-built template variables
 $listbox-template-padding: 8px 16px !default;
 $listbox-template-avatar-padding-right: 16px !default;
@@ -120,3 +130,40 @@ $listbox-filter-bigger-height: calc(100% - 56px) !default;
 $listbox-ej2-filterselect-height: calc(100% - 86px) !default;
 $listbox-ej2-filterselect-bigger-height: calc(100% - 104px) !default;
 $listbox-icon-padding: 2px !default;
+$listbox-group-item-font-weight: 600 !default;
+$listbox-icon-collapsible-font-size: 12px !default;
+$listbox-zero-padding-margin: 0 !default;
+$listbox-list-icon-margin-left: 16px !default;
+$listbox-list-badge-border-radius: 50% !default;
+$listbox-list-badge-font-size: 12px !default;
+$listbox-wrapper-right-left-margin: 15px !default;
+$listbox-tool-btn-margin-bottom: 10px !default;
+
+$listbox-full-height: 100% !default;
+$listbox-list-icon-height: 30px !default;
+$listbox-hidden-select-height: 1px !default;
+$listbox-placeholder-height: 1px !default;
+$list-border-width: 1px !default;
+$list-badge-height: 22px !default;
+$list-icon-width: auto !default;
+$list-icon-height: auto !default;
+$list-badge-width: 22px !default;
+$listbox-list-icon-width: 30px !default;
+$listbox-full-width: 100% !default;
+$list-box-header-view-top: 45px !default;
+$list-box-half-width: 50% !default;
+$checkbox-wrapper-top: 30% !default;
+$list-box-list-item-height: 38px !default;
+$list-box-list-badge-right: -10px !default;
+$list-box-list-badge-top: -10px !default;
+$list-text-checkbox-width: calc(100% - 40px);
+$list-box-checkbox-icon-width: calc(100% - 90px);
+$list-checkbox-right-icon-width: calc(100% - 80px);
+$list-box-icon-child-width: calc(100% - 92px);
+$list-box-text-width: calc(100% - 60px);
+$list-tool-box-wrap-width: calc(100% - 20%);
+$list-tool-nrml-box-wrap-width: calc(100% - 16%);
+$list-box-full-height: 100% !default;
+$list-border: 1px !default;
+$zero-border: 0 !default;
+$zero-width: 0% !default;

package/styles/list-box/_bootstrap5.3-definition.scss

@@ -1,3 +1,6 @@
+@use 'ej2-base/styles/definition/bootstrap5.3' as *;
+@forward 'ej2-base/styles/definition/bootstrap5.3';
+
 //layout variables
 $listbox-font-family: $font-family !default;
 $listbox-icon-margin-right: 16px !default;
@@ -41,6 +44,14 @@ $listbox-checkbox-right-margin: -2px 0 0 8px !default;
 $listbox-checkbox-left-margin: -2px 8px 0 0 !default;
 $listbox-rtl-checkbox-left-margin: -2px 0 0 8px !default;
 $listbox-rtl-checkbox-right-margin: -2px 8px 0 0 !default;
+$list-item-grp-padding: 9px 16px !default;
+
+$listbox-bigger-wrapper-padding: 12px !default;
+$listbox-zero-margin-padding: 0 !default;
+$listbox-input-grp-padding: 4px 8px !default;
+$listbox-input-focus-padding: 4px 4px 4px 8px !default;
+$listbox-tool-padding: 8px !default;
+$listbox-template-multiline-header-font-weight: 500 !default;
 
 //ListView In-built template variables
 $listbox-template-padding: 8px 16px !default;
@@ -122,3 +133,44 @@ $listbox-ej2-filterselect-bigger-height: calc(100% - 104px) !default;
 $listbox-dragged-item-bg-color: $content-bg-color-dragged !default;
 $listbox-dragged-item-text-color: $content-text-color-dragged !default;
 $listbox-icon-padding: 1px !default;
+$listbox-group-item-font-weight: 600 !default;
+$listbox-icon-collapsible-font-size: 12px !default;
+$listbox-zero-padding-margin: 0 !default;
+$listbox-list-icon-margin-left: 16px !default;
+$listbox-list-badge-border-radius: $radius-full !default;
+$listbox-list-badge-font-size: 12px !default;
+$listbox-wrapper-right-left-margin: 15px !default;
+$listbox-tool-btn-margin-bottom: 10px !default;
+
+$listbox-full-height: 100% !default;
+$listbox-list-icon-height: 30px !default;
+$listbox-hidden-select-height: 1px !default;
+$listbox-placeholder-height: 2px !default;
+$list-border-width: 1px !default;
+$list-badge-height: 22px !default;
+$list-icon-width: auto !default;
+$list-icon-height: auto !default;
+$list-badge-width: 22px !default;
+$listbox-list-icon-width: 30px !default;
+$listbox-full-width: 100% !default;
+$list-box-header-view-top: 45px !default;
+$list-box-half-width: 50% !default;
+$checkbox-wrapper-top: 30% !default;
+$list-box-list-item-height: 38px !default;
+$list-box-list-badge-right: -10px !default;
+$list-box-list-badge-top: -10px !default;
+$list-text-checkbox-width: calc(100% - 40px);
+$list-box-checkbox-icon-width: calc(100% - 90px);
+$list-checkbox-right-icon-width: calc(100% - 80px);
+$list-box-icon-child-width: calc(100% - 92px);
+$list-box-text-width: calc(100% - 60px);
+$list-box-bgr-border-radius: $radius-6 !default;
+$list-box-bgr-list-item-font-size: 16px !default;
+$list-tool-box-wrap-width: calc(100% - 20px);
+$list-box-nrml-border-radius: $radius-4 !default;
+$list-group-item-padding: 7px 12px !default;
+$list-tool-nrml-box-wrap-width: calc(100% - 16%);
+$list-box-full-height: 100% !default;
+$list-border: 1px !default;
+$zero-border: 0 !default;
+$zero-width: 0% !default;