@syncfusion/ej2-dropdowns 27.2.4 → 28.1.33

package/styles/fluent2.css

@@ -80,7 +80,7 @@
 .e-popup.e-mention .e-dropdownbase.e-nodata {
   color: var(--color-sf-content-text-color);
   cursor: default;
-  font-family: "Segoe UI", -apple-system, blinkMacSystemfont, "Roboto", "Helvetica Neue", sans-serif;
+  font-family: "Segoe UI", -apple-system, BlinkMacSystemFont, "Roboto", "Helvetica Neue", sans-serif;
   font-size: 14px;
   padding: 14px 16px;
   text-align: center;
@@ -95,6 +95,10 @@
   position: absolute;
 }
 
+.e-mention.e-popup .e-dropdownbase {
+  min-height: 32px;
+}
+
 .e-mention .e-dropdownbase .e-list-item .e-highlight {
   display: inline;
   font-weight: bold;
@@ -172,7 +176,7 @@
   border-bottom: 0;
   border-color: var(--color-sf-border-light);
   color: var(--color-sf-content-text-color);
-  font-family: "Segoe UI", -apple-system, blinkMacSystemfont, "Roboto", "Helvetica Neue", sans-serif;
+  font-family: "Segoe UI", -apple-system, BlinkMacSystemFont, "Roboto", "Helvetica Neue", sans-serif;
   font-size: 14px;
   line-height: 32px;
   min-height: 32px;
@@ -186,7 +190,7 @@
 .e-fixed-head {
   border-color: var(--color-sf-border-light);
   color: var(--color-sf-content-text-color-alt2);
-  font-family: "Segoe UI", -apple-system, blinkMacSystemfont, "Roboto", "Helvetica Neue", sans-serif;
+  font-family: "Segoe UI", -apple-system, BlinkMacSystemFont, "Roboto", "Helvetica Neue", sans-serif;
   font-size: 12px;
   font-weight: 600;
   line-height: 32px;
@@ -245,7 +249,7 @@
   border-style: solid;
   border-width: 0 0 1px 0;
   color: var(--color-sf-content-text-color-alt2);
-  font-family: "Segoe UI", -apple-system, blinkMacSystemfont, "Roboto", "Helvetica Neue", sans-serif;
+  font-family: "Segoe UI", -apple-system, BlinkMacSystemFont, "Roboto", "Helvetica Neue", sans-serif;
   font-size: 14px;
   font-weight: 600;
   text-indent: 10px;
@@ -303,7 +307,7 @@
   border-bottom: 0;
   border-color: var(--color-sf-border-light);
   color: var(--color-sf-content-text-color);
-  font-family: "Segoe UI", -apple-system, blinkMacSystemfont, "Roboto", "Helvetica Neue", sans-serif;
+  font-family: "Segoe UI", -apple-system, BlinkMacSystemFont, "Roboto", "Helvetica Neue", sans-serif;
   text-indent: 12px;
   font-size: 14px;
   padding-right: 16px;
@@ -727,6 +731,10 @@
   font-family: "e-icons";
 }
 
+.e-ddl.e-popup.e-resize .e-icons.e-resizer-right::before {
+  content: "\e832";
+}
+
 .e-popup.e-wide-popup.e-ddl-device.e-popup-close {
   display: block;
   visibility: hidden;
@@ -926,6 +934,15 @@ ejs-dropdownlist {
   min-height: 33px;
 }
 
+.e-ddl.e-popup.e-resize .e-resizer-right {
+  bottom: 0;
+  right: 0;
+  cursor: nwse-resize;
+  height: 15px;
+  position: absolute;
+  width: 15px;
+}
+
 .e-popup {
   border-color: var(--color-sf-border-light);
 }
@@ -937,7 +954,6 @@ ejs-dropdownlist {
 
 .e-ddl.e-popup .e-filter-parent .e-input-group input.e-input-filter {
   border-color: transparent;
-  background: none;
 }
 
 .e-bigger .e-input-group.e-ddl .e-input-filter, .e-bigger .e-input-group.e-ddl .e-input-filter:focus {
@@ -1554,6 +1570,10 @@ ejs-dropdownlist {
   width: 14px;
 }
 
+.e-popup.e-multi-select-list-wrapper.e-resize .e-icons.e-resizer-right::before {
+  content: "\e832";
+}
+
 .e-multi-select-wrapper {
   -webkit-box-sizing: border-box;
           box-sizing: border-box;
@@ -1829,7 +1849,7 @@ ejs-dropdownlist {
 .e-multi-select-wrapper input[type=text] {
   background: none;
   border: 0;
-  font-family: "Segoe UI", -apple-system, blinkMacSystemfont, "Roboto", "Helvetica Neue", sans-serif;
+  font-family: "Segoe UI", -apple-system, BlinkMacSystemFont, "Roboto", "Helvetica Neue", sans-serif;
   font-size: 14px;
   font-weight: normal;
   height: 28px;
@@ -1843,7 +1863,7 @@ ejs-dropdownlist {
   background: none;
   border: 0;
   color: inherit;
-  font-family: "Segoe UI", -apple-system, blinkMacSystemfont, "Roboto", "Helvetica Neue", sans-serif;
+  font-family: "Segoe UI", -apple-system, BlinkMacSystemFont, "Roboto", "Helvetica Neue", sans-serif;
   font-size: 14px;
   font-weight: normal;
   height: 28px;
@@ -1878,7 +1898,7 @@ ejs-dropdownlist {
 }
 
 .e-multi-select-wrapper .e-delim-values {
-  font-family: "Segoe UI", -apple-system, blinkMacSystemfont, "Roboto", "Helvetica Neue", sans-serif;
+  font-family: "Segoe UI", -apple-system, BlinkMacSystemFont, "Roboto", "Helvetica Neue", sans-serif;
   font-size: 14px;
   line-height: 28px;
   max-width: 100%;
@@ -2060,7 +2080,7 @@ ejs-dropdownlist {
 
 .e-multi-select-list-wrapper .e-selectall-parent .e-all-text {
   color: var(--color-sf-content-text-color);
-  font-family: "Segoe UI", -apple-system, blinkMacSystemfont, "Roboto", "Helvetica Neue", sans-serif;
+  font-family: "Segoe UI", -apple-system, BlinkMacSystemFont, "Roboto", "Helvetica Neue", sans-serif;
   font-size: 14px;
 }
 
@@ -2086,6 +2106,10 @@ ejs-dropdownlist {
   float: left;
 }
 
+.e-multiselect.e-control-wrapper.e-checkbox .e-multi-select-wrapper.e-down-icon {
+  padding-right: 0 48px 0 0;
+}
+
 .e-multiselect .e-multi-select-wrapper.e-down-icon {
   padding: 1px 0;
 }
@@ -2292,6 +2316,15 @@ ejs-multiselect {
   cursor: pointer;
 }
 
+.e-popup.e-multi-select-list-wrapper.e-resize .e-resizer-right {
+  bottom: 0;
+  right: 0;
+  cursor: nwse-resize;
+  height: 15px;
+  position: absolute;
+  width: 15px;
+}
+
 .e-multi-select-wrapper .e-chips.e-chip-selected .e-chips-close::before {
   color: var(--color-sf-content-text-color);
 }
@@ -2313,7 +2346,7 @@ ejs-multiselect {
 .e-multi-select-wrapper .e-chips > .e-chipcontent {
   -webkit-text-fill-color: var(--color-sf-content-text-color);
   color: var(--color-sf-content-text-color);
-  font-family: "Segoe UI", -apple-system, blinkMacSystemfont, "Roboto", "Helvetica Neue", sans-serif;
+  font-family: "Segoe UI", -apple-system, BlinkMacSystemFont, "Roboto", "Helvetica Neue", sans-serif;
   font-size: 14px;
 }
 
@@ -3416,7 +3449,7 @@ ejs-listbox {
 .e-listbox-wrapper,
 .e-listbox-container,
 .e-listboxtool-wrapper {
-  font-family: "Segoe UI", -apple-system, blinkMacSystemfont, "Roboto", "Helvetica Neue", sans-serif;
+  font-family: "Segoe UI", -apple-system, BlinkMacSystemFont, "Roboto", "Helvetica Neue", sans-serif;
   font-size: 14px;
 }
 .e-listbox-wrapper .e-list-header,

package/styles/highcontrast-light-lite.css

@@ -78,6 +78,10 @@
   position: absolute;
 }
 
+.e-mention.e-popup .e-dropdownbase {
+  min-height: 36px;
+}
+
 .e-mention .e-dropdownbase .e-list-item .e-highlight {
   display: inline;
   font-weight: bold;
@@ -607,6 +611,15 @@ ejs-dropdownlist {
   min-height: 33px;
 }
 
+.e-ddl.e-popup.e-resize .e-resizer-right {
+  bottom: 0;
+  right: 0;
+  cursor: nwse-resize;
+  height: 15px;
+  position: absolute;
+  width: 15px;
+}
+
 .e-popup {
   border-color: #757575;
 }
@@ -618,7 +631,6 @@ ejs-dropdownlist {
 
 .e-ddl.e-popup .e-filter-parent .e-input-group input.e-input-filter {
   border-color: transparent;
-  background: none;
 }
 
 /* stylelint-disable */
@@ -1855,6 +1867,15 @@ ejs-multiselect {
   cursor: pointer;
 }
 
+.e-popup.e-multi-select-list-wrapper.e-resize .e-resizer-right {
+  bottom: 0;
+  right: 0;
+  cursor: nwse-resize;
+  height: 15px;
+  position: absolute;
+  width: 15px;
+}
+
 .e-multi-select-wrapper .e-chips.e-chip-selected .e-chips-close::before {
   color: #fff;
 }

package/styles/highcontrast-light.css

@@ -78,6 +78,10 @@
   position: absolute;
 }
 
+.e-mention.e-popup .e-dropdownbase {
+  min-height: 36px;
+}
+
 .e-mention .e-dropdownbase .e-list-item .e-highlight {
   display: inline;
   font-weight: bold;
@@ -682,6 +686,15 @@ ejs-dropdownlist {
   min-height: 33px;
 }
 
+.e-ddl.e-popup.e-resize .e-resizer-right {
+  bottom: 0;
+  right: 0;
+  cursor: nwse-resize;
+  height: 15px;
+  position: absolute;
+  width: 15px;
+}
+
 .e-popup {
   border-color: #757575;
 }
@@ -693,7 +706,6 @@ ejs-dropdownlist {
 
 .e-ddl.e-popup .e-filter-parent .e-input-group input.e-input-filter {
   border-color: transparent;
-  background: none;
 }
 
 .e-bigger .e-input-group.e-ddl .e-input-filter, .e-bigger .e-input-group.e-ddl .e-input-filter:focus {
@@ -2092,6 +2104,15 @@ ejs-multiselect {
   cursor: pointer;
 }
 
+.e-popup.e-multi-select-list-wrapper.e-resize .e-resizer-right {
+  bottom: 0;
+  right: 0;
+  cursor: nwse-resize;
+  height: 15px;
+  position: absolute;
+  width: 15px;
+}
+
 .e-multi-select-wrapper .e-chips.e-chip-selected .e-chips-close::before {
   color: #fff;
 }

package/styles/highcontrast-lite.css

@@ -78,6 +78,10 @@
   position: absolute;
 }
 
+.e-mention.e-popup .e-dropdownbase {
+  min-height: 36px;
+}
+
 .e-mention .e-dropdownbase .e-list-item .e-highlight {
   display: inline;
   font-weight: bold;
@@ -366,7 +370,7 @@
 .e-ddl.e-popup .e-content.e-nodata {
   background-color: #000;
 }
-.e-ddl.e-popup .e-dropdownbase .e-list-item .e-highlight {
+.e-ddl.e-popup .e-dropdownbase .e-list-item:not(.e-active) .e-highlight {
   color: #ffd939;
 }
 .e-ddl.e-popup .e-input-group {
@@ -409,6 +413,10 @@
   font-family: "e-icons";
 }
 
+.e-ddl.e-popup.e-resize .e-icons.e-resizer-right::before {
+  content: "\eb06";
+}
+
 .e-popup.e-wide-popup.e-ddl-device.e-popup-close {
   display: block;
   visibility: hidden;
@@ -607,6 +615,20 @@ ejs-dropdownlist {
   min-height: 33px;
 }
 
+.e-ddl.e-popup.e-resize .e-resizer-right {
+  bottom: 0;
+  right: 0;
+  cursor: nwse-resize;
+  height: 15px;
+  position: absolute;
+  width: 15px;
+}
+
+.e-ddl.e-popup.e-resize .e-resizer-right {
+  background: transparent;
+  color: rgb(221, 218, 218);
+}
+
 .e-popup {
   border-color: #969696;
 }
@@ -1109,6 +1131,10 @@ ejs-dropdownlist {
   content: "";
 }
 
+.e-popup.e-multi-select-list-wrapper.e-resize .e-icons.e-resizer-right::before {
+  content: "\eb06";
+}
+
 .e-multi-select-wrapper {
   -webkit-box-sizing: border-box;
           box-sizing: border-box;
@@ -1872,6 +1898,20 @@ ejs-multiselect {
   cursor: pointer;
 }
 
+.e-popup.e-multi-select-list-wrapper.e-resize .e-resizer-right {
+  bottom: 0;
+  right: 0;
+  cursor: nwse-resize;
+  height: 15px;
+  position: absolute;
+  width: 15px;
+}
+
+.e-popup.e-multi-select-list-wrapper.e-resize .e-resizer-right {
+  background: transparent;
+  color: rgb(221, 218, 218);
+}
+
 .e-multi-select-wrapper .e-chips.e-chip-selected .e-chips-close::before {
   color: #000;
 }

package/styles/highcontrast.css

@@ -78,6 +78,10 @@
   position: absolute;
 }
 
+.e-mention.e-popup .e-dropdownbase {
+  min-height: 36px;
+}
+
 .e-mention .e-dropdownbase .e-list-item .e-highlight {
   display: inline;
   font-weight: bold;
@@ -441,7 +445,7 @@
 .e-ddl.e-popup .e-content.e-nodata {
   background-color: #000;
 }
-.e-ddl.e-popup .e-dropdownbase .e-list-item .e-highlight {
+.e-ddl.e-popup .e-dropdownbase .e-list-item:not(.e-active) .e-highlight {
   color: #ffd939;
 }
 .e-ddl.e-popup .e-input-group {
@@ -484,6 +488,10 @@
   font-family: "e-icons";
 }
 
+.e-ddl.e-popup.e-resize .e-icons.e-resizer-right::before {
+  content: "\eb06";
+}
+
 .e-popup.e-wide-popup.e-ddl-device.e-popup-close {
   display: block;
   visibility: hidden;
@@ -682,6 +690,20 @@ ejs-dropdownlist {
   min-height: 33px;
 }
 
+.e-ddl.e-popup.e-resize .e-resizer-right {
+  bottom: 0;
+  right: 0;
+  cursor: nwse-resize;
+  height: 15px;
+  position: absolute;
+  width: 15px;
+}
+
+.e-ddl.e-popup.e-resize .e-resizer-right {
+  background: transparent;
+  color: rgb(221, 218, 218);
+}
+
 .e-popup {
   border-color: #969696;
 }
@@ -1346,6 +1368,10 @@ ejs-dropdownlist {
   content: "";
 }
 
+.e-popup.e-multi-select-list-wrapper.e-resize .e-icons.e-resizer-right::before {
+  content: "\eb06";
+}
+
 .e-multi-select-wrapper {
   -webkit-box-sizing: border-box;
           box-sizing: border-box;
@@ -2109,6 +2135,20 @@ ejs-multiselect {
   cursor: pointer;
 }
 
+.e-popup.e-multi-select-list-wrapper.e-resize .e-resizer-right {
+  bottom: 0;
+  right: 0;
+  cursor: nwse-resize;
+  height: 15px;
+  position: absolute;
+  width: 15px;
+}
+
+.e-popup.e-multi-select-list-wrapper.e-resize .e-resizer-right {
+  background: transparent;
+  color: rgb(221, 218, 218);
+}
+
 .e-multi-select-wrapper .e-chips.e-chip-selected .e-chips-close::before {
   color: #000;
 }

package/styles/list-box/_bigger.scss

@@ -9,6 +9,9 @@
     @if ($theme-name == 'bootstrap5.3' or $theme-name == 'bootstrap5.3-dark') {
       border-radius: 6px;
     }
+    @if $skin-name == 'tailwind3' {
+      border-radius: 8px;
+    }
 
     &.e-listboxtool-container .e-list-wrap {
       @if $skin-name == 'FluentUI' or $skin-name == 'bootstrap5' or $skin-name == 'bootstrap5.3' or $skin-name == 'tailwind' {
@@ -44,7 +47,7 @@
       @if ($skin-name == 'bootstrap4') {
         padding: 12px 20px;
       }
-      @if ($theme-name == 'bootstrap5.3' or $theme-name == 'bootstrap5.3-dark') {
+      @if ($theme-name == 'bootstrap5.3' or $theme-name == 'bootstrap5.3-dark' or $skin-name == 'tailwind3') {
         font-size: 16px;
       }
     }
@@ -67,6 +70,10 @@
       @if $theme-name == 'bootstrap5.3' or $theme-name == 'bootstrap5.3-dark' {
         padding: 9px 16px;
       }
+      @if ($skin-name == 'tailwind3') {
+        font-size: 14px;
+        padding: 10px 16px;
+      }
     }
 
     .e-list-header {
@@ -170,4 +177,14 @@
       }
     }
   }
+
+  @if $skin-name == 'tailwind3' {
+    .e-bigger .e-listboxtool-wrapper .e-listbox-tool .e-btn-icon {
+      font-size: 18px;
+    }
+
+    .e-bigger .e-listbox-wrapper .e-filter-parent {
+      padding: 12px;
+    }
+  }
 }

package/styles/list-box/_layout.scss

@@ -18,6 +18,10 @@
     @if $skin-name == 'fluent2' or $theme-name == 'bootstrap5.3' or $theme-name == 'bootstrap5.3-dark' {
       border-radius: 4px;
     }
+    @if $skin-name == 'tailwind3' {
+      font-weight: $font-weight-medium;
+      border-radius: 6px;
+    }
 
     &.e-listboxtool-container .e-list-wrap {
       @if $skin-name == 'FluentUI' or $skin-name == 'bootstrap5' or $skin-name == 'bootstrap5.3' or $skin-name == 'tailwind' {
@@ -43,7 +47,7 @@
 
     & .e-list-item.e-disabled,
     & .e-list-item.e-disabled .e-list-icon {
-      @if $skin-name == 'fluent2' {
+      @if $skin-name == 'fluent2' or $skin-name == 'tailwind3' {
         color: $content-text-color-disabled;
         opacity: 1;
       }
@@ -68,6 +72,11 @@
           color: $content-text-color !important; /* stylelint-disable-line declaration-no-important */
           box-shadow: $secondary-shadow-focus;
         }
+        @if $skin-name == 'tailwind3' {
+          background-color: $content-bg-color !important; /* stylelint-disable-line declaration-no-important */
+          color: $content-text-color !important; /* stylelint-disable-line declaration-no-important */
+          box-shadow: $shadow-focus-ring2;
+        }
       }
 
       &.e-disabled {
@@ -295,16 +304,28 @@
       }
     }
 
+    .e-filter-parent {
+      @if $skin-name == 'tailwind3' {
+        padding: 8px 11px;
+      }
+    }
+
     .e-input-group {
       @if $skin-name != 'tailwind' {
         padding: 4px 8px;
       }
+      @if $skin-name == 'tailwind3' {
+        padding: 0;
+      }
     }
 
     .e-input-focus {
       @if $skin-name != 'tailwind' {
         padding: 4px 4px 4px 8px;
       }
+      @if $skin-name == 'tailwind3' {
+        padding: 0;
+      }
     }
 
     .e-hidden-select {
@@ -320,7 +341,7 @@
       @if $skin-name == 'fluent2' {
         border: 2px solid $badge-bgcolor;
       }
-      @else if $theme-name == 'bootstrap5.3' or $theme-name == 'bootstrap5.3-dark' {
+      @else if $theme-name == 'bootstrap5.3' or $theme-name == 'bootstrap5.3-dark' or $skin-name == 'tailwind3' {
         height: 2px;
       }
       @else {
@@ -415,7 +436,12 @@
       border: 1px solid $listbox-border-color;
       overflow: auto;
       padding: 8px;
-
+      @if $skin-name == 'tailwind3' {
+        border-radius: 8px;
+        .e-btn-icon {
+          font-size: 16px;
+        }
+      }
       .e-btn {
         display: list-item;
         list-style-type: none;

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

@@ -0,0 +1,123 @@
+//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: 12px 12px !default;
+$listbox-bigger-item-padding: 12px 16px !default;
+$listbox-header-text-padding: 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: 1px !default;
+$listbox-group-border-top: 0 !default;
+$listbox-group-border-bottom: 1px !default;
+$listbox-groupheader-item-height: 32px !default;
+$listbox-groupheader-item-line-height: 10px !default;
+$listbox-groupheader-font-size: 12px !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: 24px !default;
+$listbox-touch-item-font-size: $text-base !default;
+$listbox-touch-groupheader-height: 40px !default;
+$listbox-touch-groupheader-line-height: 22px !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;
+
+//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: 40px !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-hover !default;
+$listbox-background: $transparent !default;
+$listbox-line-color: $border-light !default;
+$listbox-hover-border-color: transparent !default;
+$listbox-border-bottom-color: $border-light !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-selected !default;
+$listbox-text-active-color: $content-text-color-selected !default;
+$listbox-text-selected-color: $content-text-color-selected !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: $content-text-color !default;
+$listbox-groupheader-bg: $content-bg-color-alt1 !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-dragged-item-bg-color: $content-bg-color-dragged !default;
+$listbox-dragged-item-text-color: $content-text-color-dragged !default;