@syncfusion/ej2-angular-dropdowns 20.4.54 → 21.1.35

package/styles/drop-down-list/tailwind.css

@@ -195,9 +195,6 @@
 .e-popup-full-page .e-popup-full-page.e-ddl.e-popup.e-ddl-device-filter {
   margin: 0;
 }
-.e-popup-full-page .e-popup-full-page.e-ios {
-  position: fixed;
-}
 
 .e-ddl.e-control-wrapper .e-ddl-disable-icon {
   position: relative;
@@ -226,7 +223,7 @@
   border-top-width: 0;
   box-shadow: 0 1.5px 5px -2px rgba(0, 0, 0, 0.3);
   display: block;
-  padding: 0;
+  padding: 6px;
 }
 
 .e-ddl.e-input-group:not(.e-disabled) {

package/styles/drop-down-tree/_layout.scss

@@ -14,6 +14,13 @@
     }
 
     &.e-icon-anim {
+      @if $ddt-skin-name == 'Material3' {
+        .e-ddt-icon {
+          background: $ddt-dd-icon-bg;
+          border-radius: $ddt-dd-icon-radius;
+        }
+      }
+
       .e-ddt-icon::before {
         @include ddt-rotate(180deg);
       }
@@ -30,9 +37,12 @@
     &.e-float-input.e-control-wrapper {
       .e-clear-icon {
         box-sizing: content-box;
-        @if $ddt-skin-name != 'tailwind' and $ddt-skin-name != 'bootstrap5' and $ddt-skin-name != 'FluentUI' {
+        @if $ddt-skin-name != 'tailwind' and $ddt-skin-name != 'bootstrap5' and $ddt-skin-name != 'FluentUI' and $ddt-skin-name != 'Material3' {
           min-height: $ddt-close-icon-min-height;
         }
+        @if $ddt-skin-name == 'Material3' {
+          padding: $ddt-close-icon-padding;
+        }
       }
 
       .e-input-group-icon.e-ddt-icon {
@@ -44,6 +54,13 @@
         @if $ddt-skin-name == 'bootstrap5' {
           font-size: 20px;
         }
+
+        @if $ddt-skin-name == 'Material3' {
+          font-size: $ddt-chip-icon-line-height;
+          padding: $ddt-dd-icon-padding;
+          margin: $ddt-dd-icon-margin;
+          line-height: $ddt-chip-icon-line-height;
+        }
       }
 
       .e-icon-hide {
@@ -90,7 +107,7 @@
     &.e-show-chip {
 
       .e-chips-close {
-        @if $ddt-skin-name != 'bootstrap5' {
+        @if $ddt-skin-name != 'bootstrap5' and $ddt-skin-name != 'Material3' {
           line-height: $ddt-chip-icon-line-height;
         }
         min-height: $ddt-chip-close-height;
@@ -358,7 +375,7 @@
             @if $ddt-skin-name == 'FluentUI' {
               line-height: 30px;
             }
-            @else {
+            @else if $ddt-skin-name != 'Material3' {
               padding-top: $ddt-overflow-count-padding-top;
             }
           }
@@ -470,6 +487,9 @@
         @else if $ddt-skin-name == 'bootstrap5' {
           padding: 0 8px;
         }
+        @else if $ddt-skin-name == 'Material3' {
+          padding: $ddt-select-all-padding;
+        }
 
         &.e-hide-selectall {
           display: none;
@@ -498,7 +518,7 @@
 
       & .e-filter-wrap .e-input,
       & .e-filter-wrap .e-input:focus {
-        @if $ddt-skin-name != 'tailwind' and $ddt-skin-name != 'bootstrap5' {
+        @if $ddt-skin-name != 'tailwind' and $ddt-skin-name != 'bootstrap5' and $ddt-skin-name != 'Material3' {
           padding: $ddt-list-filter-text-indent;
         }
       }
@@ -615,20 +635,20 @@
           @if $ddt-skin-name == 'highcontrast' or $ddt-skin-name == 'highcontrast-light' {
             border-width: 2px;
           }
-          @if $ddt-skin-name != 'tailwind' and $ddt-skin-name != 'bootstrap5' {
+          @if $ddt-skin-name != 'tailwind' and $ddt-skin-name != 'bootstrap5' and $ddt-skin-name != 'Material3' {
             height: $ddt-treeview-fullrow-height;
           }
         }
 
         & > .e-ul {
           overflow: hidden;
-          @if $ddt-skin-name != 'FluentUI'  {
+          @if $ddt-skin-name != 'FluentUI' and $ddt-skin-name != 'Material3'  {
             padding: $ddt-treeview-padding;
           }
         }
 
         &.e-fullrow-wrap .e-text-content {
-          @if $ddt-skin-name != 'tailwind' and $ddt-skin-name != 'bootstrap5' and $ddt-skin-name != 'FluentUI' {
+          @if $ddt-skin-name != 'tailwind' and $ddt-skin-name != 'bootstrap5' and $ddt-skin-name != 'FluentUI' and $ddt-skin-name != 'Material3' {
             padding-bottom: $ddt-treeview-content-padding-top;
             padding-top: $ddt-treeview-content-padding-bottom;
           }
@@ -890,7 +910,7 @@
             bottom: auto;
             right: 36px;
           }
-          @else {
+          @else if $ddt-skin-name != 'Material3' {
             right: $ddt-dd-icon-bigger-width;
           }
         }
@@ -1185,14 +1205,14 @@
     }
 
     &.e-show-dd-icon .e-chips-wrapper .e-chips:last-child {
-      @if $ddt-skin-name != 'tailwind' and $ddt-skin-name != 'bootstrap5' {
+      @if $ddt-skin-name != 'tailwind' and $ddt-skin-name != 'bootstrap5' and $ddt-skin-name != 'Material3' {
         margin-right: $ddt-dd-icon-bigger-width;
       }
       max-width: $ddt-big-chip-ddi-width;
     }
 
     &.e-show-clear .e-chips-wrapper .e-chips:last-child {
-      @if $ddt-skin-name != 'tailwind' and $ddt-skin-name != 'bootstrap5' {
+      @if $ddt-skin-name != 'tailwind' and $ddt-skin-name != 'bootstrap5' and $ddt-skin-name != 'Material3' {
         margin-right: $ddt-close-icon-bigger-width;
       }
       max-width: $ddt-big-chip-ci-width;
@@ -1265,7 +1285,7 @@
       }
 
       .e-treeview .e-fullrow {
-        @if $ddt-skin-name != 'tailwind' and $ddt-skin-name != 'bootstrap5' {
+        @if $ddt-skin-name != 'tailwind' and $ddt-skin-name != 'bootstrap5' and $ddt-skin-name != 'Material3' {
           height: $ddt-treeview-fullrow-bigger-height;
         }
       }
@@ -1346,7 +1366,7 @@
         @if $ddt-skin-name == 'tailwind' or $ddt-skin-name == 'bootstrap5' or $ddt-skin-name == 'FluentUI' {
           margin-right: 4px;
         }
-        @else {
+        @else if $ddt-skin-name != 'Material3' {
           margin-left: $ddt-dd-icon-bigger-width;
           margin-right: 1px;
         }
@@ -1356,7 +1376,7 @@
         @if $ddt-skin-name == 'tailwind' or $ddt-skin-name == 'bootstrap5' or $ddt-skin-name == 'FluentUI' {
           margin-right: 4px;
         }
-        @else {
+        @else if $ddt-skin-name != 'Material3' {
           margin-left: $ddt-close-icon-bigger-width;
           margin-right: 1px;
         }
@@ -1375,7 +1395,7 @@
       &.e-show-chip,
       &.e-show-text  {
         &.e-input-group.e-show-dd-icon .e-clear-icon {
-          @if $ddt-skin-name != 'tailwind' and $ddt-skin-name != 'bootstrap5' {
+          @if $ddt-skin-name != 'tailwind' and $ddt-skin-name != 'bootstrap5' and $ddt-skin-name != 'Material3' {
             left: $ddt-dd-icon-bigger-width;
           }
           right: auto;

package/styles/drop-down-tree/_tailwind-definition.scss

@@ -30,7 +30,7 @@ $ddt-select-all-height: 22px !default;
 $ddt-select-all-checkbox-margin: 0 12px !default;
 $ddt-select-all-text-indent: 0 !default;
 $ddt-select-all-bigger-text-indent: 0 !default;
-$ddt-select-all-text-font-size: 14px !default;
+$ddt-select-all-text-font-size: $text-sm !default;
 $ddt-popup-reorder-border: $border-light !default;
 $ddt-chip-width: calc(100% - 6px) !default;
 $ddt-chip-ddi-width: calc(100% - 26px) !default;

package/styles/drop-down-tree/_theme.scss

@@ -68,7 +68,7 @@
     &.e-input-group.e-control-wrapper,
     &.e-float-input.e-control-wrapper {
       .e-clear-icon {
-        @if $ddt-skin-name != 'tailwind' and $ddt-skin-name != 'bootstrap5' and $ddt-skin-name != 'material' and  $ddt-skin-name != 'material-dark' and $ddt-skin-name != 'FluentUI' {
+        @if $ddt-skin-name != 'tailwind' and $ddt-skin-name != 'bootstrap5' and $ddt-skin-name != 'material' and  $ddt-skin-name != 'material-dark' and $ddt-skin-name != 'FluentUI' and $ddt-skin-name != 'Material3' {
           background-color: $ddt-icon-bg-color;
         }
       }

package/styles/drop-down-tree/bootstrap4.css

@@ -21,14 +21,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/drop-down-tree/material-dark.css

@@ -283,6 +283,7 @@
   width: 0;
 }
 .e-ddt.e-popup {
+  border: 1px solid transparent;
   box-shadow: 0 5px 5px -3px rgba(0, 0, 0, 0.2), 0 8px 10px 0px rgba(0, 0, 0, 0.14), 0 3px 14px 0px rgba(0, 0, 0, 0.12);
   position: absolute;
 }

package/styles/fabric-dark.css

@@ -190,7 +190,6 @@
 .e-dropdownbase .e-list-item {
   /* stylelint-disable property-no-vendor-prefix */
   -webkit-tap-highlight-color: transparent;
-  background-color: #282727;
   border-bottom: 1px;
   border-color: transparent;
   color: #dadada;
@@ -200,11 +199,11 @@
   min-height: 36px;
   padding-right: 16px;
   text-indent: 10px;
+  background-color: #282727;
 }
 
 .e-dropdownbase .e-list-group-item,
 .e-fixed-head {
-  background-color: #282727;
   border-color: transparent;
   color: #38a9ff;
   font-family: inherit;
@@ -214,6 +213,7 @@
   min-height: 36px;
   padding-left: 10px;
   padding-right: 16px;
+  background-color: #282727;
 }
 
 .e-dropdownbase .e-list-item.e-active, .e-dropdownbase .e-list-item.e-active.e-hover {
@@ -523,9 +523,6 @@
 .e-popup-full-page .e-popup-full-page.e-ddl.e-popup.e-ddl-device-filter {
   margin: 0;
 }
-.e-popup-full-page .e-popup-full-page.e-ios {
-  position: fixed;
-}
 
 .e-ddl.e-control-wrapper .e-ddl-disable-icon {
   position: relative;
@@ -2436,10 +2433,6 @@ ejs-multiselect {
 .e-listbox-container * {
   box-sizing: border-box;
 }
-.e-listbox-wrapper.e-listboxtool-container .e-list-wrap,
-.e-listbox-container.e-listboxtool-container .e-list-wrap {
-  width: 86% !important; /* stylelint-disable-line declaration-no-important */
-}
 .e-listbox-wrapper:focus,
 .e-listbox-container:focus {
   outline: none;
@@ -2806,12 +2799,6 @@ ejs-listbox {
   margin-left: 15px;
 }
 
-.e-bigger .e-listbox-wrapper.e-listboxtool-container .e-list-wrap,
-.e-listbox-wrapper.e-bigger.e-listboxtool-container .e-list-wrap,
-.e-bigger .e-listbox-container.e-listboxtool-container .e-list-wrap,
-.e-listbox-container.e-bigger.e-listboxtool-container .e-list-wrap {
-  width: 83% !important; /* stylelint-disable-line declaration-no-important */
-}
 .e-bigger .e-listbox-wrapper .e-list-item,
 .e-listbox-wrapper.e-bigger .e-list-item,
 .e-bigger .e-listbox-container .e-list-item,

package/styles/fabric.css

@@ -190,7 +190,6 @@
 .e-dropdownbase .e-list-item {
   /* stylelint-disable property-no-vendor-prefix */
   -webkit-tap-highlight-color: transparent;
-  background-color: #fff;
   border-bottom: 1px;
   border-color: transparent;
   color: rgba(51, 51, 51, 0.87);
@@ -200,11 +199,11 @@
   min-height: 36px;
   padding-right: 16px;
   text-indent: 10px;
+  background-color: #fff;
 }
 
 .e-dropdownbase .e-list-group-item,
 .e-fixed-head {
-  background-color: #fff;
   border-color: transparent;
   color: #0078d6;
   font-family: inherit;
@@ -214,6 +213,7 @@
   min-height: 36px;
   padding-left: 10px;
   padding-right: 16px;
+  background-color: #fff;
 }
 
 .e-dropdownbase .e-list-item.e-active, .e-dropdownbase .e-list-item.e-active.e-hover {
@@ -516,9 +516,6 @@
 .e-popup-full-page .e-popup-full-page.e-ddl.e-popup.e-ddl-device-filter {
   margin: 0;
 }
-.e-popup-full-page .e-popup-full-page.e-ios {
-  position: fixed;
-}
 
 .e-ddl.e-control-wrapper .e-ddl-disable-icon {
   position: relative;

package/styles/fluent-dark.css

@@ -234,7 +234,6 @@
 .e-dropdownbase .e-list-item {
   /* stylelint-disable property-no-vendor-prefix */
   -webkit-tap-highlight-color: transparent;
-  background-color: #252423;
   border-bottom: 0;
   border-color: #292827;
   color: #f3f2f1;
@@ -244,11 +243,11 @@
   min-height: 36px;
   padding-right: 16px;
   text-indent: 8px;
+  background-color: #252423;
 }
 
 .e-dropdownbase .e-list-group-item,
 .e-fixed-head {
-  background-color: #252423;
   border-color: #292827;
   color: #0078d4;
   font-family: "Segoe UI", -apple-system, BlinkMacSystemFont, "Roboto", "Helvetica Neue", sans-serif;
@@ -258,6 +257,7 @@
   min-height: 36px;
   padding-left: 12px;
   padding-right: 16px;
+  background-color: #252423;
 }
 
 .e-dropdownbase .e-list-item.e-active, .e-dropdownbase .e-list-item.e-active.e-hover {
@@ -609,9 +609,6 @@
 .e-popup-full-page .e-popup-full-page.e-ddl.e-popup.e-ddl-device-filter {
   margin: 0;
 }
-.e-popup-full-page .e-popup-full-page.e-ios {
-  position: fixed;
-}
 
 .e-ddl.e-control-wrapper .e-ddl-disable-icon {
   position: relative;
@@ -1600,7 +1597,7 @@ ejs-dropdownlist {
 .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;
@@ -1613,7 +1610,7 @@ ejs-dropdownlist {
 
 .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,
@@ -2152,7 +2149,7 @@ ejs-multiselect {
 }
 
 .e-small.e-bigger .e-multi-select-wrapper .e-delim-values {
-  font-size: 13px;
+  font-size: 14px;
   line-height: 28px;
 }
 
@@ -2634,7 +2631,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/fluent.css

@@ -234,7 +234,6 @@
 .e-dropdownbase .e-list-item {
   /* stylelint-disable property-no-vendor-prefix */
   -webkit-tap-highlight-color: transparent;
-  background-color: #fff;
   border-bottom: 0;
   border-color: #edebe9;
   color: #201f1e;
@@ -244,11 +243,11 @@
   min-height: 36px;
   padding-right: 16px;
   text-indent: 8px;
+  background-color: #fff;
 }
 
 .e-dropdownbase .e-list-group-item,
 .e-fixed-head {
-  background-color: #fff;
   border-color: #edebe9;
   color: #0078d4;
   font-family: "Segoe UI", -apple-system, BlinkMacSystemFont, "Roboto", "Helvetica Neue", sans-serif;
@@ -258,6 +257,7 @@
   min-height: 36px;
   padding-left: 12px;
   padding-right: 16px;
+  background-color: #fff;
 }
 
 .e-dropdownbase .e-list-item.e-active, .e-dropdownbase .e-list-item.e-active.e-hover {
@@ -609,9 +609,6 @@
 .e-popup-full-page .e-popup-full-page.e-ddl.e-popup.e-ddl-device-filter {
   margin: 0;
 }
-.e-popup-full-page .e-popup-full-page.e-ios {
-  position: fixed;
-}
 
 .e-ddl.e-control-wrapper .e-ddl-disable-icon {
   position: relative;
@@ -1600,7 +1597,7 @@ ejs-dropdownlist {
 .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;
@@ -1613,7 +1610,7 @@ ejs-dropdownlist {
 
 .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,
@@ -2152,7 +2149,7 @@ ejs-multiselect {
 }
 
 .e-small.e-bigger .e-multi-select-wrapper .e-delim-values {
-  font-size: 13px;
+  font-size: 14px;
   line-height: 28px;
 }
 
@@ -2634,7 +2631,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/highcontrast-light.css

@@ -204,7 +204,6 @@
 .e-dropdownbase .e-list-item {
   /* stylelint-disable property-no-vendor-prefix */
   -webkit-tap-highlight-color: transparent;
-  background-color: #fff;
   border-bottom: 2px;
   border-color: transparent;
   color: #000;
@@ -214,11 +213,11 @@
   min-height: 36px;
   padding-right: 16px;
   text-indent: 10px;
+  background-color: #fff;
 }
 
 .e-dropdownbase .e-list-group-item,
 .e-fixed-head {
-  background-color: #fff;
   border-color: transparent;
   color: #23726c;
   font-family: inherit;
@@ -228,6 +227,7 @@
   min-height: 36px;
   padding-left: 10px;
   padding-right: 16px;
+  background-color: #fff;
 }
 
 .e-dropdownbase .e-list-item.e-active, .e-dropdownbase .e-list-item.e-active.e-hover {
@@ -534,9 +534,6 @@
 .e-popup-full-page .e-popup-full-page.e-ddl.e-popup.e-ddl-device-filter {
   margin: 0;
 }
-.e-popup-full-page .e-popup-full-page.e-ios {
-  position: fixed;
-}
 
 .e-ddl.e-control-wrapper .e-ddl-disable-icon {
   position: relative;
@@ -1518,6 +1515,13 @@ ejs-dropdownlist {
   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;
@@ -2543,10 +2547,6 @@ e-ddl.e-popup.e-multi-select-list-wrapper.e-multiselct-group.e-checkbox .e-list-
 .e-listbox-container * {
   box-sizing: border-box;
 }
-.e-listbox-wrapper.e-listboxtool-container .e-list-wrap,
-.e-listbox-container.e-listboxtool-container .e-list-wrap {
-  width: 87% !important; /* stylelint-disable-line declaration-no-important */
-}
 .e-listbox-wrapper:focus,
 .e-listbox-container:focus {
   outline: none;
@@ -2913,12 +2913,6 @@ ejs-listbox {
   margin-left: 15px;
 }
 
-.e-bigger .e-listbox-wrapper.e-listboxtool-container .e-list-wrap,
-.e-listbox-wrapper.e-bigger.e-listboxtool-container .e-list-wrap,
-.e-bigger .e-listbox-container.e-listboxtool-container .e-list-wrap,
-.e-listbox-container.e-bigger.e-listboxtool-container .e-list-wrap {
-  width: 83% !important; /* stylelint-disable-line declaration-no-important */
-}
 .e-bigger .e-listbox-wrapper .e-list-item,
 .e-listbox-wrapper.e-bigger .e-list-item,
 .e-bigger .e-listbox-container .e-list-item,

package/styles/highcontrast.css

@@ -204,7 +204,6 @@
 .e-dropdownbase .e-list-item {
   /* stylelint-disable property-no-vendor-prefix */
   -webkit-tap-highlight-color: transparent;
-  background-color: #000;
   border-bottom: 2px;
   border-color: transparent;
   color: #fff;
@@ -214,11 +213,11 @@
   min-height: 36px;
   padding-right: 16px;
   text-indent: 10px;
+  background-color: #000;
 }
 
 .e-dropdownbase .e-list-group-item,
 .e-fixed-head {
-  background-color: #000;
   border-color: transparent;
   color: #ffd939;
   font-family: inherit;
@@ -228,6 +227,7 @@
   min-height: 36px;
   padding-left: 10px;
   padding-right: 16px;
+  background-color: #000;
 }
 
 .e-dropdownbase .e-list-item.e-active, .e-dropdownbase .e-list-item.e-active.e-hover {
@@ -534,9 +534,6 @@
 .e-popup-full-page .e-popup-full-page.e-ddl.e-popup.e-ddl-device-filter {
   margin: 0;
 }
-.e-popup-full-page .e-popup-full-page.e-ios {
-  position: fixed;
-}
 
 .e-ddl.e-control-wrapper .e-ddl-disable-icon {
   position: relative;
@@ -1426,7 +1423,7 @@ ejs-dropdownlist {
 .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,
@@ -1457,7 +1454,7 @@ ejs-dropdownlist {
 }
 
 .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,
@@ -1503,7 +1500,7 @@ ejs-dropdownlist {
   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;
@@ -1518,12 +1515,19 @@ ejs-dropdownlist {
 .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;
@@ -1531,7 +1535,7 @@ ejs-dropdownlist {
 
 .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,
@@ -1563,7 +1567,7 @@ ejs-dropdownlist {
   cursor: default;
   font-size: 10px;
   height: 30px;
-  margin-top: -3.2em;
+  margin-top: -3em;
   position: absolute;
   right: 0;
   top: 100%;

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

@@ -1,5 +1,4 @@
 //default
-$skin-name: 'bootstrap' !default;
 $listbox-font-family: $font-family !default;
 $listbox-text-color: rgba($grey-dark-font, 1) !default;
 $listbox-text-disabled: $grey-light-font !default;
@@ -60,8 +59,6 @@ $listbox-groupheader-font-size: 14px !default;
 $listbox-border-size: 0 !default;
 $listbox-font-size: 14px !default;
 $listbox-back-padding-right: 10px !default;
-$listbox-back-icon-height: 0 !default;
-$listbox-back-icon-font-size: 14px !default;
 $listbox-touch-item-height: 48px !default;
 $listbox-touch-item-line-height: 1.6 !default;
 $listbox-touch-item-font-size: 15px !default;

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

@@ -1,4 +1,3 @@
-$skin-name: 'bootstrap' !default;
 $listbox-font-family: $font-family !default;
 $listbox-text-color: rgba($grey-light-font, 1) !default;
 $listbox-text-disabled: $grey-light-font !default;
@@ -55,8 +54,6 @@ $listbox-groupheader-font-size: 14px !default;
 $listbox-border-size: 0 !default;
 $listbox-font-size: 14px !default;
 $listbox-back-padding-right: 10px !default;
-$listbox-back-icon-height: 0 !default;
-$listbox-back-icon-font-size: 14px !default;
 $listbox-touch-item-height: 48px !default;
 $listbox-touch-item-line-height: 1.6 !default;
 $listbox-touch-item-font-size: 15px !default;

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

@@ -1,4 +1,3 @@
-$skin-name: 'bootstrap4' !default;
 $listbox-font-family: $font-family !default;
 $listbox-text-color: rgba($gray-900, 1) !default;
 $listbox-text-disabled: $gray-600 !default;
@@ -60,8 +59,6 @@ $listbox-groupheader-font-size: 14px !default;
 $listbox-border-size: 1px !default;
 $listbox-font-size: 14px !default;
 $listbox-back-padding-right: 10px !default;
-$listbox-back-icon-height: 0 !default;
-$listbox-back-icon-font-size: 14px !default;
 $listbox-touch-item-height: 50px !default;
 $listbox-touch-item-line-height: 1.6 !default;
 $listbox-touch-item-font-size: 15px !default;