@syncfusion/ej2-dropdowns 19.4.56 → 20.1.51

package/styles/combo-box/fluent.css

@@ -0,0 +1,132 @@
+.e-popup.e-ddl {
+  border-radius: 4px;
+  box-shadow: none;
+  margin-top: 1px;
+}
+
+.e-popup.e-ddl .e-input-group {
+  width: auto;
+}
+
+.e-popup.e-ddl .e-input-group input {
+  line-height: 15px;
+}
+
+.e-popup.e-ddl .e-dropdownbase {
+  min-height: 26px;
+}
+
+.e-popup.e-ddl .e-filter-parent .e-input-group {
+  display: -ms-flexbox;
+  display: flex;
+  width: auto;
+}
+
+.e-popup.e-ddl .e-filter-parent .e-input-group .e-back-icon {
+  border: 0;
+}
+
+.e-bigger .e-popup.e-ddl-device-filter {
+  margin-top: 0;
+}
+
+.e-bigger .e-popup.e-ddl .e-list-item {
+  font-size: 16px;
+  line-height: 32px;
+  padding-left: 0;
+  text-indent: 16px;
+}
+
+.e-bigger .e-popup.e-ddl .e-list-group-item,
+.e-bigger .e-popup.e-ddl .e-fixed-head {
+  font-size: 14px;
+  line-height: 32px;
+  padding-left: 0;
+  text-indent: 16px;
+}
+
+.e-bigger .e-popup.e-ddl .e-dropdownbase {
+  min-height: 40px;
+}
+
+.e-input-group.e-control-wrapper.e-ddl .e-input[readonly],
+.e-float-input.e-control-wrapper.e-ddl input[readonly] {
+  background: transparent;
+}
+
+.e-input-group.e-control-wrapper.e-ddl.e-readonly .e-input[readonly],
+.e-float-input.e-control-wrapper.e-ddl.e-readonly input[readonly] {
+  background: #fff;
+}
+
+.e-input-group:not(.e-disabled) .e-control.e-dropdownlist ~ .e-ddl-icon:active,
+.e-input-group:not(.e-disabled) .e-control.e-dropdownlist ~ .e-ddl-icon:hover,
+.e-control.e-dropdownlist .e-input-group:not(.e-disabled) .e-ddl-icon:active,
+.e-control.e-dropdownlist .e-input-group:not(.e-disabled) .e-ddl-icon:hover,
+.e-ddl.e-popup .e-input-group:not(.e-disabled) .e-clear-icon:active,
+.e-ddl.e-popup .e-input-group:not(.e-disabled) .e-clear-icon:hover,
+.e-ddl.e-popup .e-input-group:not(.e-disabled) .e-back-icon:active,
+.e-ddl.e-popup .e-input-group:not(.e-disabled) .e-back-icon:hover {
+  background: none;
+  color: #605e5c;
+}
+
+.e-input-group.e-ddl .e-input[readonly] ~ span.e-input-group-icon.e-ddl-icon,
+.e-input-group.e-control-wrapper.e-ddl .e-input[readonly] ~ span.e-input-group-icon.e-ddl-icon,
+.e-float-input.e-ddl input[readonly] ~ span.e-input-group-icon.e-ddl-icon,
+.e-float-input.e-control-wrapper.e-ddl input[readonly] ~ span.e-input-group-icon.e-ddl-icon {
+  background: transparent;
+  color: #605e5c;
+}
+
+.e-input-group:not(.e-disabled) .e-control.e-dropdownlist ~ .e-ddl-icon,
+.e-input-group.e-disabled.e-ddl .e-control.e-dropdownlist ~ .e-input-group-icon,
+.e-control.e-dropdownlist .e-input-group.e-disabled.e-ddl .e-input-group-icon,
+.e-control.e-dropdownlist .e-input-group.e-ddl .e-input-group-icon {
+  border: 0;
+}
+
+.e-input-group:not(.e-disabled) .e-control.e-dropdownlist ~ .e-input-group-icon:active,
+.e-control.e-dropdownlist .e-input-group:not(.e-disabled) .e-input-group-icon:active,
+.e-ddl.e-popup .e-input-group:not(.e-disabled) .e-back-icon:active,
+.e-ddl.e-popup .e-input-group:not(.e-disabled) .e-clear-icon:active {
+  box-shadow: none;
+}
+
+.e-ddl.e-popup .e-input-group:not(.e-disabled) .e-clear-icon {
+  background: none;
+  display: -ms-flexbox;
+  display: flex;
+  position: relative;
+}
+
+.e-ddl.e-popup .e-filter-parent .e-input-group,
+.e-ddl.e-popup .e-filter-parent {
+  background: #fff;
+}
+
+.e-input-group .e-control.e-dropdownlist ~ .e-ddl-icon {
+  font-size: 14px;
+}
+
+.e-bigger .e-input-group .e-control.e-dropdownlist ~ .e-ddl-icon {
+  font-size: 16px;
+}
+
+.e-bigger.e-small .e-ddl.e-popup .e-list-item,
+.e-bigger.e-small .e-ddl.e-popup .e-list-group-item,
+.e-bigger.e-small .e-ddl.e-popup .e-fixed-head {
+  font-size: 14px;
+  line-height: 34px;
+  padding-left: 0;
+  text-indent: 16px;
+}
+
+.e-bigger.e-small .e-ddl.e-popup .e-input-group input,
+.e-bigger.e-small .e-ddl.e-popup .e-input-group input.e-input {
+  height: 30px;
+}
+
+.e-bigger.e-small .e-popup.e-ddl .e-dropdownbase {
+  min-height: 34px;
+}

package/styles/combo-box/fluent.scss

@@ -0,0 +1,4 @@
+@import 'ej2-base/styles/fluent-definition.scss';
+@import '../drop-down-list/fluent-definition.scss';
+@import 'fluent-definition.scss';
+@import 'all.scss';

package/styles/combo-box/tailwind-dark.css

@@ -53,6 +53,7 @@
 
 .e-popup.e-ddl .e-dropdownbase {
   min-height: 26px;
+  padding: 4px 0;
 }
 
 .e-bigger .e-popup.e-ddl-device-filter .e-input-group.e-input-focus:not(.e-success):not(.e-warning):not(.e-error) {
@@ -77,24 +78,6 @@
   background-color: #374151;
 }
 
-.e-popup.e-ddl:not(.e-ddl-device) .e-input-group .e-clear-icon {
-  margin: 0;
-  min-height: 12px;
-  min-width: 12px;
-  padding: 6px;
-}
-
-.e-bigger .e-popup.e-ddl:not(.e-ddl-device) .e-input-group .e-clear-icon,
-.e-bigger.e-popup.e-ddl:not(.e-ddl-device) .e-input-group .e-clear-icon {
-  min-height: 16px;
-  min-width: 16px;
-}
-
-.e-bigger .e-popup.e-ddl:not(.e-ddl-device) .e-filter-parent .e-input-filter,
-.e-bigger.e-popup.e-ddl:not(.e-ddl-device) .e-filter-parent .e-input-filter {
-  padding: 8px 16px 8px 0;
-}
-
 .e-input-group.e-ddl,
 .e-input-group.e-ddl .e-input,
 .e-input-group.e-ddl .e-ddl-icon {
@@ -106,45 +89,6 @@
   border-bottom-width: 0;
 }
 
-.e-popup.e-ddl:not(.e-ddl-device) .e-input-group.e-small .e-clear-icon,
-.e-small .e-popup.e-ddl:not(.e-ddl-device) .e-input-group .e-clear-icon,
-.e-small.e-popup.e-ddl:not(.e-ddl-device) .e-input-group .e-clear-icon,
-.e-popup.e-ddl:not(.e-ddl-device) .e-input-group.e-input-focus.e-small .e-clear-icon,
-.e-small .e-popup.e-ddl:not(.e-ddl-device) .e-input-group.e-input-focus .e-clear-icon,
-.e-small.e-popup.e-ddl:not(.e-ddl-device) .e-input-group.e-input-focus .e-clear-icon {
-  margin: 0;
-}
-
-.e-small .e-popup.e-ddl:not(.e-ddl-device) .e-filter-parent .e-input-group .e-input-filter,
-.e-small.e-popup.e-ddl:not(.e-ddl-device) .e-filter-parent .e-input-group .e-input-filter,
-.e-popup.e-ddl:not(.e-ddl-device) .e-filter-parent .e-input-group.e-small .e-input-filter,
-.e-small .e-popup.e-ddl:not(.e-ddl-device) .e-filter-parent .e-input-group.e-input-focus .e-input-filter,
-.e-small.e-popup.e-ddl:not(.e-ddl-device) .e-filter-parent .e-input-group.e-input-focus .e-input-filter,
-.e-popup.e-ddl:not(.e-ddl-device) .e-filter-parent .e-input-group.e-small.e-input-focus .e-input-filter {
-  padding: 5px 5px 5px 12px;
-}
-
-.e-bigger.e-small .e-popup.e-ddl:not(.e-ddl-device) .e-input-group .e-clear-icon,
-.e-bigger.e-small.e-popup.e-ddl:not(.e-ddl-device) .e-input-group .e-clear-icon,
-.e-bigger .e-popup.e-ddl:not(.e-ddl-device) .e-input-group.e-small .e-clear-icon,
-.e-bigger.e-popup.e-ddl:not(.e-ddl-device) .e-input-group.e-small .e-clear-icon,
-.e-small .e-popup.e-ddl:not(.e-ddl-device) .e-input-group.e-bigger .e-clear-icon,
-.e-small.e-popup.e-ddl:not(.e-ddl-device) .e-input-group.e-bigger .e-clear-icon,
-.e-popup.e-ddl:not(.e-ddl-device) .e-input-group.e-bigger.e-small .e-clear-icon {
-  min-height: 18px;
-  min-width: 18px;
-}
-
-.e-bigger.e-small .e-popup.e-ddl:not(.e-ddl-device) .e-filter-parent .e-input-group .e-input-filter,
-.e-bigger.e-small.e-popup.e-ddl:not(.e-ddl-device) .e-filter-parent .e-input-group .e-input-filter,
-.e-bigger .e-popup.e-ddl:not(.e-ddl-device) .e-filter-parent .e-input-group.e-small .e-input-filter,
-.e-bigger.e-popup.e-ddl:not(.e-ddl-device) .e-filter-parent .e-input-group.e-small .e-input-filter,
-.e-small .e-popup.e-ddl:not(.e-ddl-device) .e-filter-parent .e-input-group.e-bigger .e-input-filter,
-.e-small.e-popup.e-ddl:not(.e-ddl-device) .e-filter-parent .e-input-group.e-bigger .e-input-filter,
-.e-popup.e-ddl:not(.e-ddl-device) .e-filter-parent .e-input-group.e-bigger.e-small .e-input-filter {
-  padding: 8px 16px;
-}
-
 .e-ddl.e-popup.e-outline .e-filter-parent {
   padding: 4px 8px;
 }

package/styles/combo-box/tailwind.css

@@ -53,6 +53,7 @@
 
 .e-popup.e-ddl .e-dropdownbase {
   min-height: 26px;
+  padding: 4px 0;
 }
 
 .e-bigger .e-popup.e-ddl-device-filter .e-input-group.e-input-focus:not(.e-success):not(.e-warning):not(.e-error) {
@@ -77,24 +78,6 @@
   background-color: #fff;
 }
 
-.e-popup.e-ddl:not(.e-ddl-device) .e-input-group .e-clear-icon {
-  margin: 0;
-  min-height: 12px;
-  min-width: 12px;
-  padding: 6px;
-}
-
-.e-bigger .e-popup.e-ddl:not(.e-ddl-device) .e-input-group .e-clear-icon,
-.e-bigger.e-popup.e-ddl:not(.e-ddl-device) .e-input-group .e-clear-icon {
-  min-height: 16px;
-  min-width: 16px;
-}
-
-.e-bigger .e-popup.e-ddl:not(.e-ddl-device) .e-filter-parent .e-input-filter,
-.e-bigger.e-popup.e-ddl:not(.e-ddl-device) .e-filter-parent .e-input-filter {
-  padding: 8px 16px 8px 0;
-}
-
 .e-input-group.e-ddl,
 .e-input-group.e-ddl .e-input,
 .e-input-group.e-ddl .e-ddl-icon {
@@ -106,45 +89,6 @@
   border-bottom-width: 0;
 }
 
-.e-popup.e-ddl:not(.e-ddl-device) .e-input-group.e-small .e-clear-icon,
-.e-small .e-popup.e-ddl:not(.e-ddl-device) .e-input-group .e-clear-icon,
-.e-small.e-popup.e-ddl:not(.e-ddl-device) .e-input-group .e-clear-icon,
-.e-popup.e-ddl:not(.e-ddl-device) .e-input-group.e-input-focus.e-small .e-clear-icon,
-.e-small .e-popup.e-ddl:not(.e-ddl-device) .e-input-group.e-input-focus .e-clear-icon,
-.e-small.e-popup.e-ddl:not(.e-ddl-device) .e-input-group.e-input-focus .e-clear-icon {
-  margin: 0;
-}
-
-.e-small .e-popup.e-ddl:not(.e-ddl-device) .e-filter-parent .e-input-group .e-input-filter,
-.e-small.e-popup.e-ddl:not(.e-ddl-device) .e-filter-parent .e-input-group .e-input-filter,
-.e-popup.e-ddl:not(.e-ddl-device) .e-filter-parent .e-input-group.e-small .e-input-filter,
-.e-small .e-popup.e-ddl:not(.e-ddl-device) .e-filter-parent .e-input-group.e-input-focus .e-input-filter,
-.e-small.e-popup.e-ddl:not(.e-ddl-device) .e-filter-parent .e-input-group.e-input-focus .e-input-filter,
-.e-popup.e-ddl:not(.e-ddl-device) .e-filter-parent .e-input-group.e-small.e-input-focus .e-input-filter {
-  padding: 5px 5px 5px 12px;
-}
-
-.e-bigger.e-small .e-popup.e-ddl:not(.e-ddl-device) .e-input-group .e-clear-icon,
-.e-bigger.e-small.e-popup.e-ddl:not(.e-ddl-device) .e-input-group .e-clear-icon,
-.e-bigger .e-popup.e-ddl:not(.e-ddl-device) .e-input-group.e-small .e-clear-icon,
-.e-bigger.e-popup.e-ddl:not(.e-ddl-device) .e-input-group.e-small .e-clear-icon,
-.e-small .e-popup.e-ddl:not(.e-ddl-device) .e-input-group.e-bigger .e-clear-icon,
-.e-small.e-popup.e-ddl:not(.e-ddl-device) .e-input-group.e-bigger .e-clear-icon,
-.e-popup.e-ddl:not(.e-ddl-device) .e-input-group.e-bigger.e-small .e-clear-icon {
-  min-height: 18px;
-  min-width: 18px;
-}
-
-.e-bigger.e-small .e-popup.e-ddl:not(.e-ddl-device) .e-filter-parent .e-input-group .e-input-filter,
-.e-bigger.e-small.e-popup.e-ddl:not(.e-ddl-device) .e-filter-parent .e-input-group .e-input-filter,
-.e-bigger .e-popup.e-ddl:not(.e-ddl-device) .e-filter-parent .e-input-group.e-small .e-input-filter,
-.e-bigger.e-popup.e-ddl:not(.e-ddl-device) .e-filter-parent .e-input-group.e-small .e-input-filter,
-.e-small .e-popup.e-ddl:not(.e-ddl-device) .e-filter-parent .e-input-group.e-bigger .e-input-filter,
-.e-small.e-popup.e-ddl:not(.e-ddl-device) .e-filter-parent .e-input-group.e-bigger .e-input-filter,
-.e-popup.e-ddl:not(.e-ddl-device) .e-filter-parent .e-input-group.e-bigger.e-small .e-input-filter {
-  padding: 8px 16px;
-}
-
 .e-ddl.e-popup.e-outline .e-filter-parent {
   padding: 4px 8px;
 }

package/styles/drop-down-base/_bootstrap-dark-definition.scss

@@ -11,6 +11,7 @@ $ddl-list-font-family: inherit !default;
 $ddl-list-gradient-color: $grey-white !default;
 $ddl-list-bg-color: $grey-dark !default;
 $ddl-list-header-bg-color: $grey-white !default;
+$ddl-list-tap-color: transparent  !default;
 $ddl-list-header-border-color: 1px $grey-base !default;
 $ddl-list-default-font-color: $grey-dark-font !default;
 $ddl-list-active-border-color: $grey-white !default;
@@ -43,6 +44,7 @@ $ddl-multi-column-border-width: 0 0 1px 0 !default;
 $ddl-multi-column-border-color: $grey-88 !default;
 $ddl-list-header-font-size: $ddl-group-list-font-size !default;
 $ddl-small-list-header-font-size: $ddl-group-list-font-size !default;
+$ddl-group-list-item-text-intent: 0 !default;
 
 // small size
 $ddl-small-icon-font-size: 14px !default;

package/styles/drop-down-base/_bootstrap-definition.scss

@@ -10,6 +10,7 @@ $ddl-list-font-family: inherit !default;
 $ddl-list-gradient-color: $grey-white !default;
 $ddl-list-bg-color: $grey-white !default;
 $ddl-list-header-bg-color: $grey-white !default;
+$ddl-list-tap-color: transparent !default;
 $ddl-list-header-border-color: 1px $grey-base !default;
 $ddl-list-default-font-color: $grey-light-font !default;
 $ddl-list-active-border-color: $grey-white !default;
@@ -57,6 +58,7 @@ $ddl-bigger-small-line-height: 34px !default;
 $ddl-bigger-small-list-font-color: $grey-light-font !default;
 $ddl-bigger-small-list-text-indent: 16px !default;
 $ddl-bigger-small-list-header-font-size: 14px !default;
+$ddl-group-list-item-text-intent: 0 !default;
 
 @include export-module('dropdownbase-bootstrap') {
   .e-dropdownbase .e-list-item .e-list-icon {

package/styles/drop-down-base/_bootstrap4-definition.scss

@@ -8,6 +8,7 @@ $ddl-list-font-family: inherit !default;
 $ddl-list-gradient-color: $white !default;
 $ddl-list-bg-color: $white !default;
 $ddl-list-header-bg-color: $white !default;
+$ddl-list-tap-color: transparent !default;
 $ddl-list-default-font-color: $gray-900 !default;
 $ddl-list-active-border-color: $white !default;
 $ddl-list-active-font-color: $primary-font !default;
@@ -54,6 +55,7 @@ $ddl-bigger-small-line-height: 34px !default;
 $ddl-bigger-small-list-font-color: $gray-900 !default;
 $ddl-bigger-small-list-text-indent: 16px !default;
 $ddl-bigger-small-list-header-font-size: 14px !default;
+$ddl-group-list-item-text-intent: 0 !default;
 
 @include export-module('dropdownbase-bootstrap4') {
   .e-dropdownbase .e-list-item .e-list-icon {

package/styles/drop-down-base/_bootstrap5-definition.scss

@@ -40,6 +40,7 @@ $ddl-bigger-small-line-height: 30px !default;
 $ddl-bigger-small-list-text-indent: 16px !default;
 $ddl-bigger-text-indent: 16px !default;
 $ddl-bigger-small-list-header-font-size: $text-xs !default;
+$ddl-group-list-item-text-intent: 0 !default;
 
 //
 
@@ -47,6 +48,7 @@ $ddl-list-border-color: $border-light !default;
 $ddl-list-gradient-color: $border-light !default;
 $ddl-list-bg-color: $flyout-bg-color !default;
 $ddl-list-header-bg-color: $transparent !default;
+$ddl-list-tap-color: transparent !default;
 $ddl-list-header-border-color: $border-light !default;
 $ddl-nodata-font-color: $content-text-color !default;
 $ddl-list-default-font-color: $content-text-color !default;

package/styles/drop-down-base/_fabric-dark-definition.scss

@@ -13,6 +13,7 @@ $ddl-list-font-family: inherit !default;
 $ddl-list-gradient-color: transparent !default;
 $ddl-list-bg-color: $neutral-lighter-alt !default;
 $ddl-list-header-bg-color: $neutral-lighter-alt !default;
+$ddl-list-tap-color: transparent !default;
 $ddl-list-header-border-color: 1px $neutral-light !default;
 $ddl-list-default-font-color: $neutral-light-font !default;
 $ddl-list-active-border-color: $neutral-quintenary !default;
@@ -42,6 +43,7 @@ $ddl-multi-column-border-width: 0 0 1px 0 !default;
 $ddl-multi-column-border-color: $neutral-light !default;
 $ddl-list-header-font-size: $ddl-group-list-font-size !default;
 $ddl-small-list-header-font-size: $ddl-group-list-font-size !default;
+$ddl-group-list-item-text-intent: 0 !default;
 
 // Small Size
 

package/styles/drop-down-base/_fabric-definition.scss

@@ -12,6 +12,7 @@ $ddl-list-font-family: inherit !default;
 $ddl-list-gradient-color: transparent !default;
 $ddl-list-bg-color: $neutral-white !default;
 $ddl-list-header-bg-color: $neutral-white !default;
+$ddl-list-tap-color: transparent !default;
 $ddl-list-header-border-color: 1px $neutral-light !default;
 $ddl-list-default-font-color: rgba($neutral-light-font, .87) !default;
 $ddl-list-active-border-color: $neutral-white !default;
@@ -41,6 +42,7 @@ $ddl-multi-column-border-width: 0 0 1px 0 !default;
 $ddl-multi-column-border-color: $neutral-light !default;
 $ddl-list-header-font-size: $ddl-group-list-font-size !default;
 $ddl-small-list-header-font-size: $ddl-group-list-font-size !default;
+$ddl-group-list-item-text-intent: 0 !default;
 
 // Small Size
 

package/styles/drop-down-base/_fluent-dark-definition.scss

@@ -0,0 +1 @@
+@import './fluent-definition.scss';

package/styles/drop-down-base/_fluent-definition.scss

@@ -17,7 +17,7 @@ $ddl-list-header-padding-left: 12px !default;
 $ddl-list-header-small-padding-left: 8px !default;
 $ddl-list-header-bigger-small-padding-left: 14px !default;
 $ddl-list-header-bigger-padding-left: 16px !default;
-$ddl-list-text-indent: 12px !default;
+$ddl-list-text-indent: 8px !default;
 $ddl-list-rtl-padding-right: 0 !default;
 $ddl-list-padding-right: 16px !default;
 $ddl-list-rtl-padding-left: 16px !default;
@@ -25,6 +25,9 @@ $ddl-multi-column-border-width: 0 0 1px 0 !default;
 $ddl-bigger-list-header-font-size: $text-base !default;
 $ddl-group-list-font-size: $text-sm !default;
 $ddl-list-header-font-size: $text-sm !default;
+$ddl-small-list-nodata-font-size: $text-xs;
+$ddl-bigger-list-nodata-font-size: $text-base;
+$ddl-bigger-small-list-nodata-font-size: $text-sm;
 
 // Small Size
 
@@ -37,8 +40,8 @@ $ddl-small-list-header-font-size: $text-xxs !default;
 
 $ddl-bigger-small-icon-font-size: 18px !default;
 $ddl-bigger-small-line-height: 30px !default;
-$ddl-bigger-small-list-text-indent: 16px !default;
-$ddl-bigger-text-indent: 16px !default;
+$ddl-bigger-small-list-text-indent: 8px !default;
+$ddl-bigger-text-indent: 8px !default;
 $ddl-bigger-small-list-header-font-size: $text-xs !default;
 
 //
@@ -46,12 +49,13 @@ $ddl-bigger-small-list-header-font-size: $text-xs !default;
 $ddl-list-border-color: $border-light !default;
 $ddl-list-gradient-color: $border-light !default;
 $ddl-list-bg-color: $flyout-bg-color !default;
-$ddl-list-header-bg-color: $transparent !default;
+$ddl-list-header-bg-color: transparent !default;
+$ddl-list-tap-color: transparent !default;
 $ddl-list-header-border-color: $border-light !default;
 $ddl-nodata-font-color: $flyout-text-color !default;
 $ddl-list-default-font-color: $flyout-text-color !default;
 $ddl-list-active-border-color: $flyout-bg-color !default;
-$ddl-list-active-font-color: $primary-outline !default;
+$ddl-list-active-font-color: $content-text-color !default;
 $ddl-list-active-bg-color: $flyout-bg-color-selected !default;
 $ddl-list-hover-border-color: $flyout-bg-color !default;
 $ddl-list-hover-bg-color: $flyout-bg-color-hover !default;
@@ -64,7 +68,8 @@ $ddl-multi-column-border-color: $flyout-border !default;
 $ddl-small-list-font-color: $flyout-text-color !default;
 // Touch Small color
 $ddl-bigger-small-list-font-color: $flyout-text-color !default;
-
+$ddl-list-icon-color: $icon-color !default;
+$ddl-group-list-item-text-intent: 0 !default;
 
 @include export-module('dropdownbase-bootstrap5') {
 
@@ -104,6 +109,6 @@ $ddl-bigger-small-list-font-color: $flyout-text-color !default;
   }
 
   .e-small .e-dropdownbase .e-list-item .e-list-icon {
-    padding: 0 6px 0 0;
+    padding: 0 8px 0 0;
   }
 }

package/styles/drop-down-base/_highcontrast-definition.scss

@@ -11,6 +11,7 @@ $ddl-list-font-family: inherit !default;
 $ddl-list-gradient-color: transparent !default;
 $ddl-list-bg-color: $bg-base-0 !default;
 $ddl-list-header-bg-color: $bg-base-0 !default;
+$ddl-list-tap-color: transparent !default;
 $ddl-list-header-border-color: 1px $border-default !default;
 $ddl-list-default-font-color: $content-font !default;
 $ddl-list-active-border-color: $selection-border !default;
@@ -41,6 +42,7 @@ $ddl-multi-column-border-width: 0 0 1px 0 !default;
 $ddl-multi-column-border-color: $border-default !default;
 $ddl-list-header-font-size: $ddl-group-list-font-size !default;
 $ddl-small-list-header-font-size: $ddl-group-list-font-size !default;
+$ddl-group-list-item-text-intent: 0 !default;
 
 // small size
 $ddl-small-icon-font-size: 14px !default;

package/styles/drop-down-base/_highcontrast-light-definition.scss

@@ -12,6 +12,7 @@ $ddl-list-font-family: inherit !default;
 $ddl-list-gradient-color: transparent !default;
 $ddl-list-bg-color: $bg-base-0 !default;
 $ddl-list-header-bg-color: $bg-base-0 !default;
+$ddl-list-tap-color: transparent !default;
 $ddl-list-header-border-color: 1px $border-default !default;
 $ddl-list-default-font-color: $content-font !default;
 $ddl-list-active-border-color: $selection-border !default;
@@ -48,6 +49,7 @@ $ddl-small-icon-font-size: 14px !default;
 $ddl-small-line-height: 26px !default;
 $ddl-small-list-font-color: $content-font !default;
 $ddl-small-list-text-indent: 10px !default;
+$ddl-group-list-item-text-intent: 0 !default;
 
 // Touch Small
 $ddl-bigger-small-icon-font-size: 18px !default;

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

@@ -3,11 +3,17 @@
   .e-dropdownbase.e-bigger {
     min-height: 45px;
     @at-root {
-      #{if(&, '&', '*')} .e-list-item,
+      #{if(&, '&', '*')} .e-list-item {
+        line-height: $ddl-line-height;
+        text-indent: $ddl-bigger-text-indent;
+      }
+
       #{if(&, '&', '*')} .e-list-group-item,
       #{if(&, '&', '*')} .e-fixed-head {
         line-height: $ddl-line-height;
-        text-indent: $ddl-bigger-text-indent;
+        @if $skin-name != 'tailwind' {
+          text-indent: $ddl-bigger-text-indent;
+        }
       }
 
       #{if(&, '&', '*')} .e-list-item .e-list-icon {
@@ -71,6 +77,27 @@
     text-align: center;
   }
 
+  .e-bigger.e-ddl .e-dropdownbase.e-nodata,
+  .e-bigger .e-ddl .e-dropdownbase.e-nodata {
+    @if ($skin-name == 'FluentUI' or $skin-name == 'tailwind') {
+      font-size: $ddl-bigger-list-nodata-font-size;
+    }
+  }
+
+  .e-small.e-ddl .e-dropdownbase.e-nodata,
+  .e-small .e-ddl .e-dropdownbase.e-nodata {
+    @if ($skin-name == 'FluentUI' or $skin-name == 'tailwind') {
+      font-size: $ddl-small-list-nodata-font-size;
+    }
+  }
+
+  .e-bigger.e-small.e-ddl .e-dropdownbase.e-nodata,
+  .e-bigger.e-small .e-ddl .e-dropdownbase.e-nodata {
+    @if ($skin-name == 'FluentUI' or $skin-name == 'tailwind') {
+      font-size: $ddl-bigger-small-list-nodata-font-size;
+    }
+  }
+
   .e-rtl .e-dropdownbase.e-dd-group .e-list-item {
     padding-right: $ddl-group-list-padding-left;
   }
@@ -82,18 +109,27 @@
 
   .e-small .e-dropdownbase.e-dd-group .e-list-item {
     padding-left: $ddl-group-list-small-padding-left;
+    @if $skin-name == 'tailwind' or $skin-name == 'FluentUI' {
+      text-indent: 0;
+    }
   }
 
   .e-bigger .e-dropdownbase.e-dd-group .e-list-item {
     padding-left: $ddl-group-list-bigger-padding-left;
+    @if $skin-name == 'tailwind' or $skin-name == 'FluentUI' {
+      text-indent: 0;
+    }
   }
 
   .e-small.e-bigger .e-dropdownbase.e-dd-group .e-list-item {
     padding-left: $ddl-group-list-bigger-small-padding-left;
+    @if $skin-name == 'tailwind' or $skin-name == 'FluentUI' {
+      text-indent: 0;
+    }
   }
 
   .e-popup.e-multi-select-list-wrapper.e-multiselect-group .e-dropdownbase.e-dd-group .e-list-group-item {
-    text-indent: 0;
+    text-indent: $ddl-group-list-item-text-intent;
   }
 
   .e-popup.e-multi-select-list-wrapper.e-multiselect-group .e-dropdownbase.e-dd-group .e-list-group-item {
@@ -105,7 +141,7 @@
     vertical-align: middle;
     white-space: nowrap;
     width: 100%;
-    @if $skin-name == 'bootstrap5' {
+    @if $skin-name == 'bootstrap5' or $skin-name == 'tailwind' {
       font-weight: 500;
     }
   }

package/styles/drop-down-base/_material-dark-definition.scss

@@ -10,6 +10,7 @@ $ddl-list-border-color: transparent !default;
 $ddl-list-gradient-color: transparent !default;
 $ddl-list-bg-color: $grey-800 !default;
 $ddl-list-header-bg-color: $grey-800 !default;
+$ddl-list-tap-color: transparent !default;
 $ddl-list-header-border-color: $grey-700 !default;
 $ddl-nodata-font-color: rgba($grey-dark-font, .7) !default;
 $ddl-list-default-font-color: $grey-dark-font !default;
@@ -44,6 +45,7 @@ $ddl-multi-column-border-width: 0 0 1px 0 !default;
 $ddl-multi-column-border-color: $grey-700 !default;
 $ddl-list-header-font-size: $ddl-group-list-font-size !default;
 $ddl-small-list-header-font-size: $ddl-group-list-font-size !default;
+$ddl-group-list-item-text-intent: 0 !default;
 
 // Small Size
 

package/styles/drop-down-base/_material-definition.scss

@@ -10,6 +10,7 @@ $ddl-list-border-color: $grey-300 !default;
 $ddl-list-gradient-color: $grey-white !default;
 $ddl-list-bg-color: $grey-white !default;
 $ddl-list-header-bg-color: $grey-50 !default;
+$ddl-list-tap-color: transparent !default;
 $ddl-list-header-border-color: $grey-black !default;
 $ddl-nodata-font-color: $grey-black !default;
 $ddl-list-default-font-color: rgba($grey-light-font, .87) !default;
@@ -42,6 +43,7 @@ $ddl-list-rtl-padding-left: 16px !default;
 $ddl-bigger-list-header-font-size: 14px !default;
 $ddl-multi-column-border-width: 0 0 1px 0 !default;
 $ddl-multi-column-border-color: $grey-300 !default;
+$ddl-group-list-item-text-intent: 0 !default;
 
 // Small Size