@syncfusion/ej2-dropdowns 20.4.54 → 21.1.35

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

@@ -137,13 +137,13 @@ $ddl-bigger-chip-close-font: $text-xl !default;
 // Small size
 $ddl-select-all-height-small: 24px !default;
 $ddl-small-chip-height: 18px !default;
-$ddl-chip-small-font-size: 12px !default;
+$ddl-chip-small-font-size: $text-xs !default;
 $ddl-small-chip-close-square: $text-sm !default;
 $ddl-small-chip-close-width: $text-sm !default;
 $ddl-small-chip-close-font: $text-sm !default;
 $ddl-control-small-height: 24px !default;
 $ddl-small-input-height: 24px !default;
-$ddl-delim-small-font-size: 12px !default;
+$ddl-delim-small-font-size: $text-xs !default;
 $ddl-small-closer-margin-top: -1.65em !default;
 $ddl-chip-close-hooker-small-left: 6px !default;
 $ddl-chip-close-hooker-small-bigger-left: 6px !default;

package/styles/multi-select/_theme.scss

@@ -3,11 +3,21 @@
 }
 
 .e-multi-select-wrapper .e-chips.e-chip-selected {
-  background-color: $ddl-sel-chip-bg-color;
+  @if $ddl-multiselect-skin-name == 'Material3' {
+    background: $ddl-sel-chip-bg-color;
+  }
+  @if $ddl-multiselect-skin-name != 'Material3' {
+    background-color: $ddl-sel-chip-bg-color;
+  }
 }
 
 .e-multiselect:not(.e-disabled) .e-multi-select-wrapper .e-chips.e-chip-selected:hover {
-  background-color: $ddl-sel-hover-chip-bg-color;
+  @if $ddl-multiselect-skin-name == 'Material3' {
+    background: $ddl-sel-hover-chip-bg-color;
+  }
+  @if $ddl-multiselect-skin-name != 'Material3' {
+    background-color: $ddl-sel-hover-chip-bg-color;
+  }
 }
 
 #{&}.e-multiselect {
@@ -31,13 +41,24 @@
 }
 
 .e-multi-select-wrapper .e-chips {
-  background-color: $ddl-chip-bg-color;
+  @if $ddl-multiselect-skin-name == 'Material3' {
+    background: $ddl-chip-bg-color;
+    border: $ddl-chip-border;
+  }
+  @if $ddl-multiselect-skin-name != 'Material3' {
+    background-color: $ddl-chip-bg-color;
+  }
   border-radius: $ddl-chip-radius;
   height: $ddl-chip-height;
 }
 
 .e-multiselect:not(.e-disabled) .e-multi-select-wrapper .e-chips:hover {
-  background-color: $ddl-chip-hover-bg-color;
+  @if $ddl-multiselect-skin-name == 'Material3' {
+    background: $ddl-chip-hover-bg-color;
+  }
+  @if $ddl-multiselect-skin-name != 'Material3' {
+    background-color: $ddl-chip-hover-bg-color;
+  }
 }
 
 .e-multi-select-wrapper .e-chips > .e-chipcontent:hover {
@@ -57,7 +78,12 @@
 }
 
 .e-multi-select-wrapper .e-chips.e-mob-chip.e-chip-selected {
-  background-color: $ddl-chip-mobile-bg;
+  @if $ddl-multiselect-skin-name == 'Material3' {
+    background: $ddl-chip-mobile-bg;
+  }
+  @if $ddl-multiselect-skin-name != 'Material3' {
+    background-color: $ddl-chip-mobile-bg;
+  }
   border-radius: $ddl-chip-mobile-radius;
   color: $ddl-chip-mobile-font;
   height: $ddl-chip-sel-mobile-height;
@@ -89,7 +115,12 @@
 }
 
 #{&}.e-popup.e-multi-select-list-wrapper.e-checkbox .e-list-item.e-active {
-  background-color: transparent;
+  @if $ddl-multiselect-skin-name == 'Material3' {
+    background: transparent;
+  }
+  @if $ddl-multiselect-skin-name != 'Material3' {
+    background-color: transparent;
+  }
   border-color: transparent;
   color: $ddl-multi-list-default-font-color;
 }
@@ -115,7 +146,12 @@
 }
 
 #{&}.e-popup.e-multi-select-list-wrapper.e-multiselect-group.e-checkbox .e-list-group-item.e-active {
-  background-color: transparent;
+  @if $ddl-multiselect-skin-name == 'Material3' {
+    background: transparent;
+  }
+  @if $ddl-multiselect-skin-name != 'Material3' {
+    background-color: transparent;
+  }
   border-color: transparent;
   color: $ddl-multi-list-default-font-color;
   @if $ddl-multiselect-skin-name == 'FluentUI' {
@@ -139,14 +175,24 @@
 }
 
 #{&}.e-popup.e-multi-select-list-wrapper.e-checkbox .e-list-item.e-active.e-hover {
-  background-color: $ddl-multi-list-hover-bg-color;
+  @if $ddl-multiselect-skin-name == 'Material3' {
+    background: $ddl-multi-list-hover-bg-color;
+  }
+  @if $ddl-multiselect-skin-name != 'Material3' {
+    background-color: $ddl-multi-list-hover-bg-color;
+  }
   @if $ddl-multiselect-skin-name == 'bootstrap5' {
     color: $ddl-multi-list-default-font-color;
   }
 }
 
 #{&}.e-popup.e-multi-select-list-wrapper.e-multiselect-group.e-checkbox .e-list-group-item.e-active.e-hover {
-  background-color: $ddl-multi-list-hover-bg-color;
+  @if $ddl-multiselect-skin-name == 'Material3' {
+    background: $ddl-multi-list-hover-bg-color;
+  }
+  @if $ddl-multiselect-skin-name != 'Material3' {
+    background-color: $ddl-multi-list-hover-bg-color;
+  }
   @if $ddl-multiselect-skin-name == 'bootstrap5' {
     color: $content-text-color-alt3;
   }
@@ -175,7 +221,12 @@
 }
 
 #{&}.e-popup.e-multi-select-list-wrapper .e-list-item.e-active.e-item-focus {
-  background-color: $ddl-popup-active-focus-bg-color;
+  @if $ddl-multiselect-skin-name == 'Material3' {
+    background: $ddl-popup-active-focus-bg-color;
+  }
+  @if $ddl-multiselect-skin-name != 'Material3' {
+    background-color: $ddl-popup-active-focus-bg-color;
+  }
   @if $ddl-multiselect-skin-name != 'FluentUI' {
     box-shadow: $ddl-popup-active-focus-shadow-item;
   }
@@ -186,7 +237,12 @@
 }
 
 #{&}.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;
+  @if $ddl-multiselect-skin-name == 'Material3' {
+    background: $ddl-popup-active-focus-bg-color;
+  }
+  @if $ddl-multiselect-skin-name != 'Material3' {
+    background-color: $ddl-popup-active-focus-bg-color;
+  }
   box-shadow: $ddl-popup-active-focus-shadow-item;
   color: $ddl-popup-active-focus-font-color;
   @if $ddl-multiselect-skin-name != 'tailwind' {
@@ -351,24 +407,36 @@ e-ddl.e-popup.e-multi-select-list-wrapper.e-multiselct-group.e-checkbox .e-list-
   @if $ddl-multiselect-skin-name == 'material' {
     background-color: $outline-multiselect-chip-bg-color;
   }
+  @if $ddl-multiselect-skin-name == 'Material3' {
+    background: $outline-multiselect-chip-bg-color;
+  }
 }
 
 .e-multiselect.e-filled .e-multi-select-wrapper .e-chips {
   @if $ddl-multiselect-skin-name == 'material' {
     background-color: $filled-multiselect-chip-bg-color;
   }
+  @if $ddl-multiselect-skin-name == 'Material3' {
+    background: $filled-multiselect-chip-bg-color;
+  }
 }
 
 .e-multiselect.e-outline .e-multi-select-wrapper .e-chips:hover {
   @if $ddl-multiselect-skin-name == 'material' {
     background-color: $outline-multiselect-chip-hover-bg-color;
   }
+  @if $ddl-multiselect-skin-name == 'Material3' {
+    background: $outline-multiselect-chip-hover-bg-color;
+  }
 }
 
 .e-multiselect.e-filled .e-multi-select-wrapper .e-chips:hover {
   @if $ddl-multiselect-skin-name == 'material' {
     background-color: $filled-multiselect-chip-hover-bg-color;
   }
+  @if $ddl-multiselect-skin-name == 'Material3' {
+    background: $filled-multiselect-chip-hover-bg-color;
+  }
 }
 
 .e-multiselect.e-outline .e-multi-select-wrapper .e-chips.e-chip-selected,
@@ -376,6 +444,9 @@ e-ddl.e-popup.e-multi-select-list-wrapper.e-multiselct-group.e-checkbox .e-list-
   @if $ddl-multiselect-skin-name == 'material' {
     background-color: $outline-multiselect-sel-chip-bg-color;
   }
+  @if $ddl-multiselect-skin-name == 'Material3' {
+    background: $outline-multiselect-sel-chip-bg-color;
+  }
 }
 
 .e-multiselect.e-outline .e-multi-select-wrapper .e-chips.e-chip-selected:hover,
@@ -383,60 +454,63 @@ e-ddl.e-popup.e-multi-select-list-wrapper.e-multiselct-group.e-checkbox .e-list-
   @if $ddl-multiselect-skin-name == 'material' {
     background-color: $outline-multiselect-sel-hover-chip-bg-color;
   }
+  @if $ddl-multiselect-skin-name == 'Material3' {
+    background: $outline-multiselect-sel-hover-chip-bg-color;
+  }
 }
 
 .e-multiselect.e-outline .e-multi-select-wrapper .e-chips.e-chip-selected > .e-chipcontent,
 .e-multiselect.e-filled .e-multi-select-wrapper .e-chips.e-chip-selected > .e-chipcontent {
-  @if $ddl-multiselect-skin-name == 'material' {
+  @if $ddl-multiselect-skin-name == 'material' or $ddl-multiselect-skin-name == 'Material3' {
     color: $ddl-chip-font-color;
   }
 }
 
 .e-multiselect.e-outline .e-multi-select-wrapper .e-chips.e-chip-selected > .e-chipcontent:hover,
 .e-multiselect.e-filled .e-multi-select-wrapper .e-chips.e-chip-selected > .e-chipcontent:hover {
-  @if $ddl-multiselect-skin-name == 'material' {
+  @if $ddl-multiselect-skin-name == 'material' or $ddl-multiselect-skin-name == 'Material3' {
     color: $ddl-chip-font-color;
   }
 }
 
 .e-multiselect.e-outline .e-multi-select-wrapper .e-chips-close.e-close-hooker,
 .e-multiselect.e-filled .e-multi-select-wrapper .e-chips-close.e-close-hooker {
-  @if $ddl-multiselect-skin-name == 'material' {
+  @if $ddl-multiselect-skin-name == 'material' or $ddl-multiselect-skin-name == 'Material3' {
     color: $outline-multiselect-close-icon-bg-color;
   }
 }
 
 .e-multiselect.e-outline .e-multi-select-wrapper .e-chips-close.e-close-hooker:hover,
 .e-multiselect.e-filled .e-multi-select-wrapper .e-chips-close.e-close-hooker:hover {
-  @if $ddl-multiselect-skin-name == 'material' {
+  @if $ddl-multiselect-skin-name == 'material' or $ddl-multiselect-skin-name == 'Material3' {
     color: $outline-multiselect-close-icon-hover-bg-color;
   }
 }
 
 .e-multiselect.e-outline .e-multi-select-wrapper .e-chips.e-chip-selected .e-chips-close::before,
 .e-multiselect.e-filled .e-multi-select-wrapper .e-chips.e-chip-selected .e-chips-close::before {
-  @if $ddl-multiselect-skin-name == 'material' {
+  @if $ddl-multiselect-skin-name == 'material' or $ddl-multiselect-skin-name == 'Material3' {
     color: $ddl-chip-close;
   }
 }
 
 .e-multiselect.e-filled .e-multi-select-wrapper .e-chips.e-mob-chip.e-chip-selected .e-chips-close::before,
 .e-multiselect.e-outline .e-multi-select-wrapper .e-chips.e-mob-chip.e-chip-selected .e-chips-close::before {
-  @if $ddl-multiselect-skin-name == 'material' {
+  @if $ddl-multiselect-skin-name == 'material' or $ddl-multiselect-skin-name == 'Material3' {
     color: $ddl-chip-mobile-font;
   }
 }
 
 .e-multiselect.e-outline:not(.e-disabled) .e-multi-select-wrapper .e-chips:not(.e-chip-selected) .e-chips-close:hover::before,
 .e-multiselect.e-filled:not(.e-disabled) .e-multi-select-wrapper .e-chips:not(.e-chip-selected) .e-chips-close:hover::before {
-  @if $ddl-multiselect-skin-name == 'material' {
+  @if $ddl-multiselect-skin-name == 'material' or $ddl-multiselect-skin-name == 'Material3' {
     color: $outline-multiselect-close-icon-hover-bg-color;
   }
 }
 
 .e-multiselect.e-outline .e-multi-select-wrapper .e-delim-values .e-remain,
 .e-multiselect.e-filled .e-multi-select-wrapper .e-delim-values .e-remain {
-  @if $ddl-multiselect-skin-name == 'material' {
+  @if $ddl-multiselect-skin-name == 'material' or $ddl-multiselect-skin-name == 'Material3' {
     color: $outline-multiselect-remains-font-color;
   }
 }
@@ -446,7 +520,7 @@ e-ddl.e-popup.e-multi-select-list-wrapper.e-multiselct-group.e-checkbox .e-list-
 .e-multiselect.e-outline.e-disabled .e-multi-select-wrapper .e-chips > .e-chipcontent,
 .e-multiselect.e-outline.e-disabled .e-multi-select-wrapper .e-chips .e-chips-close::before,
 .e-multiselect.e-outline.e-disabled .e-multi-select-wrapper .e-chips-close.e-close-hooker {
-  @if $ddl-multiselect-skin-name == 'material' {
+  @if $ddl-multiselect-skin-name == 'material' or $ddl-multiselect-skin-name == 'Material3' {
     color: $outline-multiselect-disabled-font-color;
   }
 }
@@ -460,6 +534,9 @@ e-ddl.e-popup.e-multi-select-list-wrapper.e-multiselct-group.e-checkbox .e-list-
   @if $ddl-multiselect-skin-name == 'material' {
     background-color: $outline-multiselect-disabled-chip-bg-color;
   }
+  @if $ddl-multiselect-skin-name == 'Material3' {
+    background: $outline-multiselect-disabled-chip-bg-color;
+  }
 }
 
 .e-multiselect.e-filled .e-multi-select-wrapper.e-mob-wrapper .e-chips.e-mob-chip.e-chip-selected,
@@ -475,18 +552,29 @@ e-ddl.e-popup.e-multi-select-list-wrapper.e-multiselct-group.e-checkbox .e-list-
     margin-right: 0;
     width: 100%;
   }
+  @if $ddl-multiselect-skin-name == 'Material3' {
+    background: $ddl-chip-mobile-bg;
+    border-radius: 4px;
+    box-sizing: border-box;
+    color: $ddl-chip-mobile-font;
+    height: $ddl-chip-sel-mobile-height;
+    line-height: $ddl-chip-sel-mobile-height;
+    margin-left: 0;
+    margin-right: 0;
+    width: 100%;
+  }
 }
 
 .e-multiselect.e-filled .e-multi-select-wrapper .e-chips.e-mob-chip.e-chip-selected .e-chips-close,
 .e-multiselect.e-outline .e-multi-select-wrapper .e-chips.e-mob-chip.e-chip-selected .e-chips-close {
-  @if $ddl-multiselect-skin-name == 'material' {
+  @if $ddl-multiselect-skin-name == 'material' or $ddl-multiselect-skin-name == 'Material3' {
     width: 33px;
   }
 }
 
 .e-multiselect.e-filled .e-multi-select-wrapper .e-chips.e-mob-chip.e-chip-selected .e-chipcontent,
 .e-multiselect.e-outline .e-multi-select-wrapper .e-chips.e-mob-chip.e-chip-selected .e-chipcontent {
-  @if $ddl-multiselect-skin-name == 'material' {
+  @if $ddl-multiselect-skin-name == 'material' or $ddl-multiselect-skin-name == 'Material3' {
     color: $ddl-chip-mobile-font;
   }
 }

package/styles/multi-select/bootstrap4.css

@@ -20,14 +20,6 @@
   padding: 0 8px 0 0;
 }
 
-.e-bigger .e-content.e-dropdownbase {
-  padding: 8px 0;
-}
-
-.e-content.e-dropdownbase {
-  padding: 6px 0;
-}
-
 .e-bigger .e-dropdownbase .e-list-item .e-list-icon {
   font-size: 16px;
 }

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

@@ -325,7 +325,7 @@
 .e-multi-select-wrapper .e-chips > .e-chipcontent {
   max-width: 100%;
   overflow: hidden;
-  padding: 0 6px 0 0;
+  padding: 0 6px 1px 0;
   text-indent: 0;
   text-overflow: ellipsis;
   white-space: nowrap;
@@ -866,7 +866,7 @@ ejs-multiselect {
 }
 
 .e-small.e-bigger .e-multi-select-wrapper .e-delim-values {
-  font-size: 13px;
+  font-size: 12px;
   line-height: 28px;
 }
 
@@ -1324,7 +1324,7 @@ ejs-multiselect {
 }
 
 .e-bigger.e-small .e-multi-select-wrapper .e-chips > .e-chipcontent {
-  font-size: 13px;
+  font-size: 12px;
 }
 
 .e-bigger.e-small .e-multi-select-wrapper .e-chips .e-chips-close::before {

package/styles/multi-select/bootstrap5.css

@@ -325,7 +325,7 @@
 .e-multi-select-wrapper .e-chips > .e-chipcontent {
   max-width: 100%;
   overflow: hidden;
-  padding: 0 6px 0 0;
+  padding: 0 6px 1px 0;
   text-indent: 0;
   text-overflow: ellipsis;
   white-space: nowrap;
@@ -866,7 +866,7 @@ ejs-multiselect {
 }
 
 .e-small.e-bigger .e-multi-select-wrapper .e-delim-values {
-  font-size: 13px;
+  font-size: 12px;
   line-height: 28px;
 }
 
@@ -1324,7 +1324,7 @@ ejs-multiselect {
 }
 
 .e-bigger.e-small .e-multi-select-wrapper .e-chips > .e-chipcontent {
-  font-size: 13px;
+  font-size: 12px;
 }
 
 .e-bigger.e-small .e-multi-select-wrapper .e-chips .e-chips-close::before {

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

@@ -352,7 +352,7 @@
 .e-multi-select-wrapper .e-chips > .e-chipcontent {
   max-width: 100%;
   overflow: hidden;
-  padding: 0 6px 1px 0;
+  padding: 0 6px 1.5px 0;
   text-indent: 0;
   text-overflow: ellipsis;
   white-space: nowrap;
@@ -365,7 +365,7 @@
 
 .e-multi-select-wrapper .e-mob-chip.e-chips > .e-chipcontent,
 .e-bigger .e-multi-select-wrapper .e-chips > .e-chipcontent {
-  padding: 8px 4px 8px 0;
+  padding: 8px 4px 10px 0;
 }
 
 .e-multiselect.e-rtl .e-multi-select-wrapper .e-mob-chip.e-chips > .e-chipcontent,
@@ -904,7 +904,7 @@ ejs-multiselect {
 }
 
 .e-small.e-bigger .e-multi-select-wrapper .e-delim-values {
-  font-size: 13px;
+  font-size: 14px;
   line-height: 28px;
 }
 
@@ -1386,7 +1386,7 @@ ejs-multiselect {
 }
 
 .e-bigger.e-small .e-multi-select-wrapper .e-chips > .e-chipcontent {
-  font-size: 13px;
+  font-size: 14px;
 }
 
 .e-bigger.e-small .e-multi-select-wrapper .e-chips .e-chips-close::before {

package/styles/multi-select/fluent.css

@@ -352,7 +352,7 @@
 .e-multi-select-wrapper .e-chips > .e-chipcontent {
   max-width: 100%;
   overflow: hidden;
-  padding: 0 6px 1px 0;
+  padding: 0 6px 1.5px 0;
   text-indent: 0;
   text-overflow: ellipsis;
   white-space: nowrap;
@@ -365,7 +365,7 @@
 
 .e-multi-select-wrapper .e-mob-chip.e-chips > .e-chipcontent,
 .e-bigger .e-multi-select-wrapper .e-chips > .e-chipcontent {
-  padding: 8px 4px 8px 0;
+  padding: 8px 4px 10px 0;
 }
 
 .e-multiselect.e-rtl .e-multi-select-wrapper .e-mob-chip.e-chips > .e-chipcontent,
@@ -904,7 +904,7 @@ ejs-multiselect {
 }
 
 .e-small.e-bigger .e-multi-select-wrapper .e-delim-values {
-  font-size: 13px;
+  font-size: 14px;
   line-height: 28px;
 }
 
@@ -1386,7 +1386,7 @@ ejs-multiselect {
 }
 
 .e-bigger.e-small .e-multi-select-wrapper .e-chips > .e-chipcontent {
-  font-size: 13px;
+  font-size: 14px;
 }
 
 .e-bigger.e-small .e-multi-select-wrapper .e-chips .e-chips-close::before {

package/styles/multi-select/highcontrast-light.css

@@ -382,6 +382,13 @@
   white-space: nowrap;
 }
 
+.e-small .e-multi-select-wrapper .e-chips {
+  margin: none;
+}
+.e-small .e-multi-select-wrapper .e-chips > .e-chipcontent {
+  padding: none;
+}
+
 .e-multi-select-wrapper.e-delimiter .e-searcher {
   display: inline-block;
   float: none;

package/styles/multi-select/highcontrast.css

@@ -286,7 +286,7 @@
 .e-multiselect.e-control-container .e-multi-select-wrapper .e-ddl-icon,
 .e-multiselect.e-control-container.e-input-group .e-multi-select-wrapper .e-ddl-icon {
   margin-right: 0;
-  margin-top: -2.8em;
+  margin-top: -2.5em;
   right: 0;
 }
 .e-multiselect.e-control-container .e-multi-select-wrapper.e-delimiter,
@@ -317,7 +317,7 @@
 }
 
 .e-bigger .e-multiselect.e-control-container.e-input-group .e-multi-select-wrapper .e-ddl-icon {
-  margin-top: -2.8em;
+  margin-top: -3.1em;
 }
 
 .e-popup.e-multi-select-list-wrapper .e-list-item.e-disabled,
@@ -363,7 +363,7 @@
   display: -ms-inline-flexbox;
   display: inline-flex;
   float: left;
-  margin: 1.5px 2px 2px 0;
+  margin: 2px 2px 2px 0;
   max-width: 100%;
   overflow: hidden;
   padding: 0 0 0 8px;
@@ -378,12 +378,19 @@
 .e-multi-select-wrapper .e-chips > .e-chipcontent {
   max-width: 100%;
   overflow: hidden;
-  padding: 3px 8px 4.2px 0;
+  padding: 3px 8px 5.5px 0;
   text-indent: 0;
   text-overflow: ellipsis;
   white-space: nowrap;
 }
 
+.e-small .e-multi-select-wrapper .e-chips {
+  margin: 1.5px 2px 2px 0;
+}
+.e-small .e-multi-select-wrapper .e-chips > .e-chipcontent {
+  padding: 3px 8px 4.2px 0;
+}
+
 .e-multi-select-wrapper.e-delimiter .e-searcher {
   display: inline-block;
   float: none;
@@ -391,7 +398,7 @@
 
 .e-multi-select-wrapper .e-mob-chip.e-chips > .e-chipcontent,
 .e-bigger .e-multi-select-wrapper .e-chips > .e-chipcontent {
-  padding: 6px 8px 6px 0;
+  padding: 6px 8px 7.5px 0;
 }
 
 .e-multiselect.e-rtl .e-multi-select-wrapper .e-mob-chip.e-chips > .e-chipcontent,
@@ -423,7 +430,7 @@
   cursor: default;
   font-size: 10px;
   height: 30px;
-  margin-top: -3.2em;
+  margin-top: -3em;
   position: absolute;
   right: 0;
   top: 100%;