@syncfusion/ej2-dropdowns 19.4.56 → 20.1.51

package/styles/multi-select/_tailwind-definition.scss

@@ -10,7 +10,7 @@ $ddl-small-search-wrapper-width: calc(100% - 30px) !default;
 $ddl-popup-shadow-value: $shadow-lg !default;
 $ddl-remains-padding-left: 16px !default;
 $ddl-chip-margin: 3px !default;
-$ddl-chip-margin-bigger: 4px !default;
+$ddl-chip-margin-bigger: 3px !default;
 $ddl-chip-radius: 0 !default;
 $ddl-chip-content-padding: 0 4px 0 0 !default;
 $ddl-chip-mobile-content-padding: 8px 4px 8px 0 !default;
@@ -19,23 +19,26 @@ $ddl-chip-padding: 0 4px 0 8px !default;
 $ddl-chip-close-top: 0 !default;
 $ddl-chip-close-left: 0 !default;
 $ddl-chip-close-margin: 0 0 0 !default;
-$ddl-chip-close-square: 16px !default;
-$ddl-chip-hooker-square: 24px !default;
-$ddl-chip-close-font: 16px !default;
+$ddl-chip-close-square: $text-base !default;
+$ddl-chip-hooker-square: 28px !default;
+$ddl-chip-close-font: $text-base !default;
 $ddl-chip-height: 22px !default;
-$ddl-chip-mobile-height: 28px !default;
+$ddl-chip-mobile-height: 30px !default;
 $ddl-chip-collection-top: 0 !default;
 $ddl-input-height: 28px !default;
-$ddl-input-bigger-height: 34px !default;
+$ddl-input-bigger-height: 36px !default;
 $ddl-input-mob-height: 30px !default;
 $ddl-control-height: 28px !default;
 $ddl-control-bigger-height: 36px !default;
 $ddl-delimviewheight: 28px !default;
-$ddl-delimviewheight-bigger: 34px !default;
-$ddl-closer-hooker-font: $text-sm !default;
+$ddl-delimviewheight-bigger: 36px !default;
+$ddl-closer-hooker-font: $text-lg !default;
+$ddl-closer-hooker-font-bigger: 22px !default;
+$ddl-closer-hooker-font-small: $text-base !default;
+$ddl-closer-hooker-font-bigger-small: $text-xl !default;
 $ddl-chip-font-family: $font-family !default;
-$ddl-closer-margin-top: -2em !default;
-$ddl-closer-margin-top-bigger: -2.25em !default;
+$ddl-closer-margin-top: -1.65em !default;
+$ddl-closer-margin-top-bigger: -1.62em !default;
 $ddl-icon-margin-top: -1.3em !default;
 $ddl-clear-margin-top: -2em !default;
 $ddl-icon-margin-top-bigger: -1.3em !default;
@@ -51,10 +54,12 @@ $ddl-chip-mob-padding: 0 0 0 16px !default;
 $ddl-chip-font-size: $text-sm !default;
 $ddl-chip-bigger-font-size: $text-base !default;
 $ddl-chip-small-font-size: $text-xs !default;
+$ddl-chip-bigger-small-font-size: $text-sm !default;
+$ddl-delim-bigger-font-size: $text-base !default;
 $ddl-rtl-chip-close-left: 0 !default;
 $ddl-rtl-chip-content-padding: 5px 4px !default;
 $ddl-rtl-mob-chip-content-padding: 8px 4px !default;
-$ddl-rtl-mob-chip-content-margin: 4px !default;
+$ddl-rtl-mob-chip-content-margin: 3px !default;
 $ddl-rtl-mob-sel-chip-content-padding: 12px 4px !default;
 $ddl-rtl-chip-padding: 0 8px 0 4px !default;
 $ddl-rtl-mob-sel-chip-padding: 0 8px 0 4px !default;
@@ -69,33 +74,38 @@ $ddl-sel-chip-close-mobile-top: 0 !default;
 $ddl-sel-chip-close-mobile-left: 12px !default;
 $ddl-chip-sel-mobile-close-height: 40px !default;
 $ddl-chip-sel-mobile-close-margin: 0 0 0 0 !default;
-$ddl-input-text-indent: 6px !default;
+$ddl-input-text-indent: 10px !default;
 $ddl-rtl-chip-sel-close-left: -12px !default;
 $ddl-popup-active-focus-border-width: 1px !default;
 $ddl-popup-active-focus-shadow-item: none !default;
 $ddl-popup-active-border-width: 1px !default;
-$ddl-delim-text-indent: 12px !default;
+$ddl-delim-text-indent: 10px !default;
 $ddl-delimview-bigger-padding-left: $ddl-delim-text-indent !default;
 $ddl-popup-normal-border-width: 0 !default;
-$ddl-check-right: 17px !default;
+$ddl-check-right: 12px !default;
 $ddl-check-left: 12px !default;
-$ddl-bigger-select-all-height: 48px !default;
-$ddl-select-all-height: 36px !default;
+$ddl-bigger-select-all-height: 36px !default;
+$ddl-select-all-height: 30px !default;
 $ddl-back-icon-margin: 2.5px 10px 0 -52px !default;
 $ddl-back-icon-padding: 0 8px !default;
-$ddl-filterbar-padding: 8px !default;
-$ddl-bigger-filterbar-padding: 4px 0 !default;
-$ddl-delimviewheight-check-bigger: 34px !default;
+$ddl-filterbar-padding: 0 !default;
+$ddl-bigger-filterbar-padding: 0 !default;
+$ddl-delimviewheight-check-bigger: 36px !default;
 $ddl-popup-reorder-border: $border-light !default;
-$ddl-check-right-margin: 10px !default;
+$ddl-check-right-margin: 8px !default;
 $ddl-bigger-check-right-margin: 12px !default;
-$ddl-selectall-font-size: 14px !default;
-$ddl-close-icon-left: 22px !default;
+$ddl-selectall-font-size: $text-sm !default;
+$ddl-bigger-selectall-font-size: $text-base !default;
+$ddl-small-selectall-font-size: $text-xs !default;
+$ddl-bigger-small-selectall-font-size: $text-sm !default;
+$ddl-close-icon-left: 32px !default;
 $ddl-check-icon-top: 0 !default;
-$ddl-bigger-check-right: 17px !default;
+$ddl-bigger-check-right: 16px !default;
+$ddl-small-check-right: 8px !default;
+$ddl-bigger-small-check-right: 14px !default;
 $ddl-delim-text-padding-right: 6px !default;
 $ddl-list-rtl-padding-right: 15px !default;
-$ddl-close-rtl-icon-left: 19px !default;
+$ddl-close-rtl-icon-left: 32px !default;
 $ddl-chip-close-rtl-left: -7px !default;
 $ddl-multiselect-group-list-item-rtl-padding-right: 25px !default;
 $ddl-bigger-multiselect-group-list-item-rtl-padding-right: 25px !default;
@@ -110,18 +120,26 @@ $ddl-multiselect-filled-input-min-height: 39px !default;
 $ddl-multiselect-filled-float-input-chip-clear-icon-size: 12px !default;
 $ddl-multiselect-filled-chip-clear-icon-size: 14px !default;
 $multiselect-disable-font-color: $content-text-color-disabled !default;
+$ddl-bigger-clear-icon-height: 36px !default;
+$ddl-bigger-clear-icon-width: 40px !default;
+$ddl-small-clear-icon-height: 24px !default;
+$ddl-small-clear-icon-width: 28px !default;
+$ddl-bigger-small-clear-icon-height: 32px !default;
+$ddl-bigger-small-clear-icon-width: 32px !default;
+$ddl-bigger-chip-close-square: $text-xl !default;
+$ddl-bigger-chip-close-font: $text-xl !default;
 // Small size
-$ddl-select-all-height-small: 26px !default;
-$ddl-small-chip-height: 20px !default;
+$ddl-select-all-height-small: 24px !default;
+$ddl-small-chip-height: 18px !default;
 $ddl-chip-small-font-size: 12px !default;
-$ddl-small-chip-close-square: 14px !default;
-$ddl-small-chip-close-font: 14px !default;
+$ddl-small-chip-close-square: $text-sm !default;
+$ddl-small-chip-close-font: $text-sm !default;
 $ddl-control-small-height: 24px !default;
-$ddl-small-input-height: 26px !default;
+$ddl-small-input-height: 24px !default;
 $ddl-delim-small-font-size: 12px !default;
-$ddl-small-closer-margin-top: -2em !default;
-$ddl-chip-close-hooker-small-left: 0 !default;
-$ddl-delimviewheight-small: 26px !default;
+$ddl-small-closer-margin-top: -1.65em !default;
+$ddl-chip-close-hooker-small-left: 6px !default;
+$ddl-delimviewheight-small: 24px !default;
 $ddl-multiselect-filled-input-min-height-small: 32px !default;
 $ddl-multiselect-filled-float-input-min-height-small: 22px !default;
 $ddl-multiselect-filled-floatlabel-fontsize-small: 10px !default;
@@ -133,16 +151,15 @@ $ddl-multiselect-filled-float-input-min-height-bigger: 36px !default;
 $ddl-multiselect-filled-floatlabel-fontsize-bigger: 12px !default;
 
 // Touch Small size
-$ddl-select-all-height-bigger-small: 40px !default;
-$ddl-bigger-small-chip-height: 22px !default;
-$ddl-chip-bigger-small-font-size: 13px !default;
-$ddl-bigger-small-chip-close-square: 16px !default;
-$ddl-bigger-small-chip-close-font: 16px !default;
+$ddl-select-all-height-bigger-small: 32px !default;
+$ddl-bigger-small-chip-height: 26px !default;
+$ddl-bigger-small-chip-close-square: $text-lg !default;
+$ddl-bigger-small-chip-close-font: $text-lg !default;
 $ddl-control-bigger-small-height: 28px !default;
 $ddl-bigger-small-input-height: 32px !default;
-$ddl-delim-bigger-small-font-size: 13px !default;
-$ddl-delimviewheight-bigger-small: 28px !default;
-$ddl-closer-margin-top-bigger-small: -2em !default;
+$ddl-delim-bigger-small-font-size: $text-sm !default;
+$ddl-delimviewheight-bigger-small: 32px !default;
+$ddl-closer-margin-top-bigger-small: -1.64em !default;
 
 // color
 
@@ -152,7 +169,7 @@ $ddl-chip-mobile-font: $content-text-color !default;
 $ddl-chip-bg-color: $content-bg-color-alt3 !default;
 $ddl-chip-hover-bg-color: $content-bg-color-alt4 !default;
 $ddl-chip-hover-font-color: $content-text-color-hover !default;
-$ddl-sel-hover-chip-bg-color:  $content-bg-color-hover !default;
+$ddl-sel-hover-chip-bg-color:  $content-bg-color-alt5 !default;
 $ddl-sel-chip-hover-font-color: $content-text-color-hover !default;
 $ddl-chip-font-color:  $content-text-color !default;
 $ddl-chip-close: $icon-color !default;
@@ -169,7 +186,8 @@ $ddl-popup-active-border-color: $border-selected !default;
 $ddl-multi-list-default-font-color: $content-text-color !default;
 $ddl-multi-list-hover-bg-color: $content-bg-color-hover !default;
 $ddl-delim-font-color: $content-text-color !default;
-$ddl-close-icon-color: $content-text-color !default;
+$ddl-close-icon-color: $icon-color !default;
+$ddl-close-icon-hover-color: $icon-color-hover !default;
 
 
 @include export-module('multiselect-tailwind') {
@@ -186,7 +204,7 @@ $ddl-close-icon-color: $content-text-color !default;
   .e-multiselect.e-rtl .e-input-group-icon.e-ddl-icon {
     border-left-width: 0;
     border-radius: 4px 0 0 4px;
-    border-right-width: 1px;
+    border-right-width: 0;
   }
 
   .e-multiselect.e-control-container .e-multi-select-wrapper .e-clear-icon {

package/styles/multi-select/_theme.scss

@@ -6,7 +6,7 @@
   background-color: $ddl-sel-chip-bg-color;
 }
 
-.e-multi-select-wrapper .e-chips.e-chip-selected:hover {
+.e-multiselect:not(.e-disabled) .e-multi-select-wrapper .e-chips.e-chip-selected:hover {
   background-color: $ddl-sel-hover-chip-bg-color;
 }
 
@@ -36,7 +36,7 @@
   height: $ddl-chip-height;
 }
 
-.e-multi-select-wrapper .e-chips:hover {
+.e-multiselect:not(.e-disabled) .e-multi-select-wrapper .e-chips:hover {
   background-color: $ddl-chip-hover-bg-color;
 }
 
@@ -51,7 +51,7 @@
 }
 
 .e-bigger .e-multi-select-wrapper .e-chips .e-chips-close::before {
-  @if $ddl-multiselect-skin-name == 'bootstrap4' or $ddl-multiselect-skin-name == 'bootstrap5' {
+  @if $ddl-multiselect-skin-name == 'bootstrap4' or $ddl-multiselect-skin-name == 'bootstrap5' or $ddl-multiselect-skin-name == 'FluentUI' {
     font-size: $ddl-bigger-chip-close-font;
   }
 }
@@ -80,10 +80,12 @@
 }
 
 #{&}.e-popup.e-multi-select-list-wrapper .e-list-item.e-active {
-  border-bottom: $ddl-popup-active-border-width solid transparent;
-  border-left: $ddl-popup-active-border-width solid $ddl-popup-active-focus-bg-color;
-  border-right: $ddl-popup-active-border-width solid $ddl-popup-active-focus-bg-color;
-  border-top: $ddl-popup-active-border-width solid $ddl-popup-active-border-color;
+  @if $ddl-multiselect-skin-name != 'tailwind' {
+    border-bottom: $ddl-popup-active-border-width solid transparent;
+    border-left: $ddl-popup-active-border-width solid $ddl-popup-active-focus-bg-color;
+    border-right: $ddl-popup-active-border-width solid $ddl-popup-active-focus-bg-color;
+    border-top: $ddl-popup-active-border-width solid $ddl-popup-active-border-color;
+  }
 }
 
 #{&}.e-popup.e-multi-select-list-wrapper.e-checkbox .e-list-item.e-active {
@@ -92,10 +94,34 @@
   color: $ddl-multi-list-default-font-color;
 }
 
+
+#{&}.e-popup.e-multi-select-list-wrapper.e-checkbox .e-dropdownbase .e-list-item.e-active,
+#{&}.e-popup.e-multi-select-list-wrapper.e-checkbox .e-dropdownbase .e-list-item.e-active.e-hover {
+  @if $ddl-multiselect-skin-name == 'tailwind' {
+    font-weight: normal;
+  }
+}
+
+#{&}.e-popup.e-multi-select-list-wrapper .e-list-item.e-active:not(.e-item-focus),
+#{&}.e-popup.e-multi-select-list-wrapper.e-checkbox .e-list-item.e-active:not(.e-item-focus),
+#{&}.e-popup.e-multi-select-list-wrapper.e-checkbox .e-dropdownbase .e-list-item.e-active:not(.e-item-focus),
+#{&}.e-popup.e-multi-select-list-wrapper.e-checkbox .e-list-item.e-active.e-hover:not(.e-item-focus),
+#{&}.e-popup.e-multi-select-list-wrapper.e-multiselect-group.e-checkbox .e-list-group-item.e-active:not(.e-item-focus),
+#{&}.e-popup.e-multi-select-list-wrapper .e-list-item.e-active:first-child:not(.e-item-focus),
+#{&}.e-popup.e-multi-select-list-wrapper .e-list-item.e-active:last-child:not(.e-item-focus),
+#{&}.e-popup.e-multi-select-list-wrapper.e-checkbox .e-dropdownbase .e-list-item.e-active.e-hover:not(.e-item-focus) {
+  @if $ddl-multiselect-skin-name == 'FluentUI' {
+    box-shadow: none;
+  }
+}
+
 #{&}.e-popup.e-multi-select-list-wrapper.e-multiselect-group.e-checkbox .e-list-group-item.e-active {
   background-color: transparent;
   border-color: transparent;
   color: $ddl-multi-list-default-font-color;
+  @if $ddl-multiselect-skin-name == 'FluentUI' {
+    color: $ddl-list-header-font-color;
+  }
 }
 
 #{&}.e-popup.e-multi-select-list-wrapper.e-checkbox .e-list-item.e-active.e-item-focus {
@@ -108,6 +134,9 @@
   @if $ddl-multiselect-skin-name != 'highcontrast' and $ddl-multiselect-skin-name != 'bootstrap5' {
     color: $ddl-multi-list-default-font-color;
   }
+  @if$ddl-multiselect-skin-name == 'FluentUI' {
+    color: $ddl-list-header-font-color;
+  }
 }
 
 #{&}.e-popup.e-multi-select-list-wrapper.e-checkbox .e-list-item.e-active.e-hover {
@@ -122,35 +151,48 @@
   @if $ddl-multiselect-skin-name == 'bootstrap5' {
     color: $content-text-color-alt3;
   }
+  @if $ddl-multiselect-skin-name == 'FluentUI' {
+    box-shadow: none;
+  }
 }
 
 #{&}.e-popup.e-multi-select-list-wrapper .e-list-item.e-active:first-child {
-  border-bottom: $ddl-popup-active-border-width solid transparent;
-  border-top: $ddl-popup-active-border-width solid transparent;
+  @if $ddl-multiselect-skin-name != 'tailwind' {
+    border-bottom: $ddl-popup-active-border-width solid transparent;
+    border-top: $ddl-popup-active-border-width solid transparent;
+  }
 }
 
 #{&}.e-popup.e-multi-select-list-wrapper .e-list-item.e-active:last-child {
-  border-bottom: $ddl-popup-active-border-width solid transparent;
+  @if $ddl-multiselect-skin-name != 'tailwind' {
+    border-bottom: $ddl-popup-active-border-width solid transparent;
+  }
 }
 
 #{&}.e-popup.e-multi-select-list-wrapper .e-list-item.e-active.e-item-focus + li.e-active {
-  @if $ddl-multiselect-skin-name != 'highcontrast' {
+  @if $ddl-multiselect-skin-name != 'highcontrast' and $ddl-multiselect-skin-name != 'tailwind' {
     border-top: $ddl-popup-active-border-width solid transparent;
   }
 }
 
 #{&}.e-popup.e-multi-select-list-wrapper .e-list-item.e-active.e-item-focus {
   background-color: $ddl-popup-active-focus-bg-color;
-  border: $ddl-popup-active-focus-border-width solid $ddl-popup-active-focus-border-color;
-  box-shadow: $ddl-popup-active-focus-shadow-item;
+  @if $ddl-multiselect-skin-name != 'FluentUI' {
+    box-shadow: $ddl-popup-active-focus-shadow-item;
+  }
   color: $ddl-popup-active-focus-font-color;
+  @if $ddl-multiselect-skin-name != 'tailwind' {
+    border: $ddl-popup-active-focus-border-width solid $ddl-popup-active-focus-border-color;
+  }
 }
 
 #{&}.e-popup.e-multi-select-list-wrapper.e-multiselect-group .e-list-group-item.e-active.e-item-focus {
   background-color: $ddl-popup-active-focus-bg-color;
-  border: $ddl-popup-active-focus-border-width solid $ddl-popup-active-focus-border-color;
   box-shadow: $ddl-popup-active-focus-shadow-item;
   color: $ddl-popup-active-focus-font-color;
+  @if $ddl-multiselect-skin-name != 'tailwind' {
+    border: $ddl-popup-active-focus-border-width solid $ddl-popup-active-focus-border-color;
+  }
 }
 
 #{&}.e-popup.e-multi-select-list-wrapper .e-list-item {
@@ -244,8 +286,17 @@ e-ddl.e-popup.e-multi-select-list-wrapper.e-multiselct-group.e-checkbox .e-list-
   color: $ddl-close-icon-color;
 }
 
+.e-multiselect:not(.e-disabled) .e-multi-select-wrapper .e-chips-close.e-close-hooker:hover {
+  @if $ddl-multiselect-skin-name == 'tailwind' {
+    color: $ddl-close-icon-hover-color;
+  }
+}
+
 // Mouse Small
 .e-small .e-multi-select-wrapper .e-chips {
+  @if $ddl-multiselect-skin-name == 'bootstrap5' {
+    border-radius: $ddl-chip-mobile-radius;
+  }
   height: $ddl-small-chip-height;
 }
 
@@ -254,7 +305,7 @@ e-ddl.e-popup.e-multi-select-list-wrapper.e-multiselct-group.e-checkbox .e-list-
 }
 
 .e-small .e-multi-select-wrapper .e-chips .e-chips-close::before {
-  @if $ddl-multiselect-skin-name == 'bootstrap4' {
+  @if $ddl-multiselect-skin-name == 'bootstrap4' or $ddl-multiselect-skin-name == 'FluentUI' {
     left: $ddl-chip-close-small-left;
     top: $ddl-chip-close-small-top;
   }
@@ -265,6 +316,12 @@ e-ddl.e-popup.e-multi-select-list-wrapper.e-multiselct-group.e-checkbox .e-list-
   left: $ddl-chip-close-hooker-small-left;
 }
 
+.e-small .e-multi-select-wrapper .e-down-icon .e-close-hooker::before {
+  @if $ddl-multiselect-skin-name == 'FluentUI' {
+    left: $ddl-small-down-icon-left;
+  }
+}
+
 //Touch Small
 .e-bigger.e-small .e-multi-select-wrapper .e-chips {
   height: $ddl-bigger-small-chip-height;
@@ -282,6 +339,13 @@ e-ddl.e-popup.e-multi-select-list-wrapper.e-multiselct-group.e-checkbox .e-list-
   font-size: $ddl-bigger-small-chip-close-font;
 }
 
+.e-multiselect.e-control-container .e-multi-select-wrapper .e-clear-icon:hover,
+.e-multiselect.e-control-container.e-input-group .e-multi-select-wrapper .e-clear-icon:hover {
+  @if $ddl-multiselect-skin-name == 'FluentUI' {
+    background: transparent;
+  }
+}
+
 // Multiselect Outline textbox configuration
 
 .e-multiselect.e-outline .e-multi-select-wrapper .e-chips {

package/styles/multi-select/bootstrap-dark.css

@@ -95,12 +95,14 @@
   width: 100%;
 }
 
-.e-multi-select-wrapper.e-delimiter .e-searcher {
+.e-multi-select-wrapper.e-delimiter .e-searcher,
+.e-multi-select-wrapper.e-delimiter .e-multi-searcher {
   height: 27px;
   vertical-align: middle;
 }
 
-.e-multi-select-wrapper.e-delimiter .e-searcher .e-dropdownbase {
+.e-multi-select-wrapper.e-delimiter .e-searcher .e-dropdownbase,
+.e-multi-select-wrapper.e-delimiter .e-multi-searcher .e-dropdownbase {
   height: 100%;
   min-height: 100%;
 }
@@ -359,6 +361,7 @@
 }
 
 .e-multiselect .e-down-icon .e-chips-close.e-close-hooker,
+.e-small.e-multiselect .e-down-icon .e-chips-close.e-close-hooker,
 .e-multiselect.e-input-group.e-control-container .e-multi-select-wrapper.e-down-icon .e-clear-icon {
   right: 38px;
 }
@@ -579,7 +582,7 @@
   padding-right: 10px;
 }
 
-.e-multiselect.e-rtl .e-down-icon .e-chips-close.e-icon.e-close-hooker {
+.e-multiselect.e-rtl .e-down-icon .e-chips-close.e-close-hooker {
   left: 38px;
 }
 
@@ -615,12 +618,14 @@
   vertical-align: middle;
 }
 
-.e-bigger .e-popup.e-multi-select-list-wrapper .e-list-item .e-checkbox-wrapper {
+.e-bigger .e-popup.e-multi-select-list-wrapper .e-list-item .e-checkbox-wrapper,
+.e-bigger.e-popup.e-multi-select-list-wrapper .e-list-item .e-checkbox-wrapper {
   bottom: 1px;
   margin-right: 10px;
 }
 
-.e-bigger .e-popup.e-multi-select-list-wrapper.e-mulltiselect-group .e-list-group-item .e-checkbox-wrapper {
+.e-bigger .e-popup.e-multi-select-list-wrapper.e-multiselect-group .e-list-group-item .e-checkbox-wrapper,
+.e-bigger.e-popup.e-multi-select-list-wrapper.e-multiselect-group .e-list-group-item .e-checkbox-wrapper {
   bottom: 1px;
   margin-right: 10px;
 }
@@ -675,6 +680,7 @@
   font-size: 14px;
 }
 
+.e-bigger.e-multi-select-list-wrapper .e-selectall-parent,
 .e-bigger .e-multi-select-list-wrapper .e-selectall-parent {
   font-size: 15px;
   line-height: 40px;
@@ -689,6 +695,7 @@
   vertical-align: middle;
 }
 
+.e-bigger.e-multi-select-list-wrapper .e-selectall-parent .e-checkbox-wrapper,
 .e-bigger .e-multi-select-list-wrapper .e-selectall-parent .e-checkbox-wrapper {
   bottom: 1px;
   margin-right: 10px;
@@ -718,7 +725,7 @@
   padding: 8px;
 }
 
-.e-bigger .e-ddl.e-popup.e-multi-select-list-wrappe .e-filter-parent .e-input-filter,
+.e-bigger .e-ddl.e-popup.e-multi-select-list-wrapper .e-filter-parent .e-input-filter,
 .e-bigger .e-ddl.e-popup.e-multi-select-list-wrapper .e-filter-parent .e-input-group.e-input-focus {
   padding: 4px 0;
 }
@@ -763,6 +770,7 @@ ejs-multiselect {
   display: block;
 }
 
+.e-small.e-multi-select-list-wrapper .e-selectall-parent,
 .e-small .e-multi-select-list-wrapper .e-selectall-parent {
   line-height: 22px;
 }
@@ -791,6 +799,7 @@ ejs-multiselect {
   margin-top: -3.5em;
 }
 
+.e-bigger.e-small.e-multi-select-list-wrapper .e-selectall-parent,
 .e-bigger.e-small .e-multi-select-list-wrapper .e-selectall-parent {
   line-height: 34px;
 }
@@ -1059,7 +1068,7 @@ ejs-multiselect {
   background-color: #505050;
 }
 
-.e-multi-select-wrapper .e-chips.e-chip-selected:hover {
+.e-multiselect:not(.e-disabled) .e-multi-select-wrapper .e-chips.e-chip-selected:hover {
   background-color: #505050;
 }
 
@@ -1088,7 +1097,7 @@ ejs-multiselect {
   height: 28px;
 }
 
-.e-multi-select-wrapper .e-chips:hover {
+.e-multiselect:not(.e-disabled) .e-multi-select-wrapper .e-chips:hover {
   background-color: #484848;
 }
 
@@ -1175,16 +1184,16 @@ ejs-multiselect {
 
 .e-popup.e-multi-select-list-wrapper .e-list-item.e-active.e-item-focus {
   background-color: #0070f0;
-  border: 1px solid #104888;
   box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(102, 175, 233, 0.6);
   color: #fff;
+  border: 1px solid #104888;
 }
 
 .e-popup.e-multi-select-list-wrapper.e-multiselect-group .e-list-group-item.e-active.e-item-focus {
   background-color: #0070f0;
-  border: 1px solid #104888;
   box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(102, 175, 233, 0.6);
   color: #fff;
+  border: 1px solid #104888;
 }
 
 .e-popup.e-multi-select-list-wrapper .e-list-item {

package/styles/multi-select/bootstrap.css

@@ -93,12 +93,14 @@
   width: 100%;
 }
 
-.e-multi-select-wrapper.e-delimiter .e-searcher {
+.e-multi-select-wrapper.e-delimiter .e-searcher,
+.e-multi-select-wrapper.e-delimiter .e-multi-searcher {
   height: 27px;
   vertical-align: middle;
 }
 
-.e-multi-select-wrapper.e-delimiter .e-searcher .e-dropdownbase {
+.e-multi-select-wrapper.e-delimiter .e-searcher .e-dropdownbase,
+.e-multi-select-wrapper.e-delimiter .e-multi-searcher .e-dropdownbase {
   height: 100%;
   min-height: 100%;
 }
@@ -357,6 +359,7 @@
 }
 
 .e-multiselect .e-down-icon .e-chips-close.e-close-hooker,
+.e-small.e-multiselect .e-down-icon .e-chips-close.e-close-hooker,
 .e-multiselect.e-input-group.e-control-container .e-multi-select-wrapper.e-down-icon .e-clear-icon {
   right: 38px;
 }
@@ -577,7 +580,7 @@
   padding-right: 10px;
 }
 
-.e-multiselect.e-rtl .e-down-icon .e-chips-close.e-icon.e-close-hooker {
+.e-multiselect.e-rtl .e-down-icon .e-chips-close.e-close-hooker {
   left: 38px;
 }
 
@@ -613,12 +616,14 @@
   vertical-align: middle;
 }
 
-.e-bigger .e-popup.e-multi-select-list-wrapper .e-list-item .e-checkbox-wrapper {
+.e-bigger .e-popup.e-multi-select-list-wrapper .e-list-item .e-checkbox-wrapper,
+.e-bigger.e-popup.e-multi-select-list-wrapper .e-list-item .e-checkbox-wrapper {
   bottom: 1px;
   margin-right: 10px;
 }
 
-.e-bigger .e-popup.e-multi-select-list-wrapper.e-mulltiselect-group .e-list-group-item .e-checkbox-wrapper {
+.e-bigger .e-popup.e-multi-select-list-wrapper.e-multiselect-group .e-list-group-item .e-checkbox-wrapper,
+.e-bigger.e-popup.e-multi-select-list-wrapper.e-multiselect-group .e-list-group-item .e-checkbox-wrapper {
   bottom: 1px;
   margin-right: 10px;
 }
@@ -673,6 +678,7 @@
   font-size: 14px;
 }
 
+.e-bigger.e-multi-select-list-wrapper .e-selectall-parent,
 .e-bigger .e-multi-select-list-wrapper .e-selectall-parent {
   font-size: 15px;
   line-height: 40px;
@@ -687,6 +693,7 @@
   vertical-align: middle;
 }
 
+.e-bigger.e-multi-select-list-wrapper .e-selectall-parent .e-checkbox-wrapper,
 .e-bigger .e-multi-select-list-wrapper .e-selectall-parent .e-checkbox-wrapper {
   bottom: 1px;
   margin-right: 10px;
@@ -716,7 +723,7 @@
   padding: 8px;
 }
 
-.e-bigger .e-ddl.e-popup.e-multi-select-list-wrappe .e-filter-parent .e-input-filter,
+.e-bigger .e-ddl.e-popup.e-multi-select-list-wrapper .e-filter-parent .e-input-filter,
 .e-bigger .e-ddl.e-popup.e-multi-select-list-wrapper .e-filter-parent .e-input-group.e-input-focus {
   padding: 4px 0;
 }
@@ -761,6 +768,7 @@ ejs-multiselect {
   display: block;
 }
 
+.e-small.e-multi-select-list-wrapper .e-selectall-parent,
 .e-small .e-multi-select-list-wrapper .e-selectall-parent {
   line-height: 22px;
 }
@@ -789,6 +797,7 @@ ejs-multiselect {
   margin-top: -3.5em;
 }
 
+.e-bigger.e-small.e-multi-select-list-wrapper .e-selectall-parent,
 .e-bigger.e-small .e-multi-select-list-wrapper .e-selectall-parent {
   line-height: 34px;
 }
@@ -1057,7 +1066,7 @@ ejs-multiselect {
   background-color: #ccc;
 }
 
-.e-multi-select-wrapper .e-chips.e-chip-selected:hover {
+.e-multiselect:not(.e-disabled) .e-multi-select-wrapper .e-chips.e-chip-selected:hover {
   background-color: #ddd;
 }
 
@@ -1086,7 +1095,7 @@ ejs-multiselect {
   height: 28px;
 }
 
-.e-multi-select-wrapper .e-chips:hover {
+.e-multiselect:not(.e-disabled) .e-multi-select-wrapper .e-chips:hover {
   background-color: #d4d4d4;
 }
 
@@ -1173,16 +1182,16 @@ ejs-multiselect {
 
 .e-popup.e-multi-select-list-wrapper .e-list-item.e-active.e-item-focus {
   background-color: #317ab9;
-  border: 1px solid #66afe9;
   box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(102, 175, 233, 0.6);
   color: #fff;
+  border: 1px solid #66afe9;
 }
 
 .e-popup.e-multi-select-list-wrapper.e-multiselect-group .e-list-group-item.e-active.e-item-focus {
   background-color: #317ab9;
-  border: 1px solid #66afe9;
   box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(102, 175, 233, 0.6);
   color: #fff;
+  border: 1px solid #66afe9;
 }
 
 .e-popup.e-multi-select-list-wrapper .e-list-item {