@syncfusion/ej2-dropdowns 19.4.56 → 20.1.51

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

@@ -18,27 +18,30 @@ $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-bigger-text-indent: $ddl-list-text-indent !default;
+$ddl-bigger-text-indent: 16px !default;
 $ddl-list-rtl-padding-right: 0 !default;
 $ddl-list-padding-right: 16px !default;
 $ddl-list-rtl-padding-left: 16px !default;
 $ddl-multi-column-border-width: 0 0 1px 0 !default;
-$ddl-bigger-list-header-font-size: $text-base !default;
+$ddl-bigger-list-header-font-size: $text-sm !default;
 $ddl-group-list-font-size: $text-sm !default;
 $ddl-list-header-font-size: $text-xs !default;
+$ddl-small-list-nodata-font-size: $text-xs !default;
+$ddl-bigger-list-nodata-font-size: $text-base !default;
+$ddl-bigger-small-list-nodata-font-size: $text-sm !default;
 
 // Small Size
 
 $ddl-small-icon-font-size: 14px !default;
 $ddl-small-line-height: 24px !default;
-$ddl-small-list-text-indent: 12px !default;
+$ddl-small-list-text-indent: 8px !default;
 $ddl-small-list-header-font-size: $text-xxs !default;
 
 // Touch Small
 
 $ddl-bigger-small-icon-font-size: 18px !default;
-$ddl-bigger-small-line-height: 40px !default;
-$ddl-bigger-small-list-text-indent: 16px !default;
+$ddl-bigger-small-line-height: 32px !default;
+$ddl-bigger-small-list-text-indent: 14px !default;
 $ddl-bigger-small-list-header-font-size: $text-xs !default;
 
 //
@@ -47,6 +50,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: $content-bg-color-focus !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;
@@ -60,10 +64,12 @@ $ddl-list-header-font-color: $content-text-color-alt2 !default;
 $ddl-default-header-font-color: $content-text-color !default;
 $ddl-list-focus-color: $content-bg-color-focus !default;
 $ddl-multi-column-border-color: $border-light !default;
+$ddl-list-icon-color: $icon-color !default;
 // Small Size color
 $ddl-small-list-font-color: $content-text-color !default;
 // Touch Small color
 $ddl-bigger-small-list-font-color: $content-text-color !default;
+$ddl-group-list-item-text-intent: 0 !default;
 
 
 @include export-module('dropdownbase-tailwind') {
@@ -103,12 +109,15 @@ $ddl-bigger-small-list-font-color: $content-text-color !default;
     padding: 0 8px 0 0;
   }
 
-  .e-bigger .e-dropdownbase .e-list-item .e-list-icon,
-  .e-bigger.e-small .e-dropdownbase .e-list-item .e-list-icon {
+  .e-bigger .e-dropdownbase .e-list-item .e-list-icon {
     padding: 0 12px 0 0;
   }
 
+  .e-bigger.e-small .e-dropdownbase .e-list-item .e-list-icon {
+    padding: 0 8px 0 0;
+  }
+
   .e-small .e-dropdownbase .e-list-item .e-list-icon {
-    padding: 0 6px 0 0;
+    padding: 0 4px 0 0;
   }
 }

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

@@ -5,6 +5,19 @@
         padding-left: $ddl-list-rtl-padding-left;
         padding-right: $ddl-list-rtl-padding-right;
       }
+
+      #{if(&, '&', '*')}.e-dd-group .e-list-item {
+        @if $skin-name == 'tailwind' {
+          padding-right: $ddl-group-list-padding-left;
+        }
+      }
+
+      #{if(&, '&', '*')} .e-list-group-item,
+      #{if(&, '&', '*')} .e-fixed-head {
+        @if $skin-name == 'tailwind' {
+          padding-right: $ddl-list-header-padding-left;
+        }
+      }
     }
   }
 
@@ -18,6 +31,40 @@
         padding-left: $ddl-list-rtl-padding-left;
         padding-right: $ddl-list-rtl-padding-right;
       }
+
+      #{if(&, '&', '*')}.e-dd-group .e-list-item {
+        @if $skin-name == 'tailwind' {
+          padding-right: $ddl-group-list-small-padding-left;
+        }
+      }
+
+      #{if(&, '&', '*')} .e-list-group-item,
+      #{if(&, '&', '*')} .e-fixed-head {
+        @if $skin-name == 'tailwind' {
+          padding-right: $ddl-list-header-small-padding-left;
+        }
+      }
+    }
+  }
+
+  // Rtl bigger size
+
+  .e-bigger.e-rtl,
+  .e-bigger .e-rtl,
+  .e-rtl .e-bigger {
+    #{if(&, '&', '*')} .e-dropdownbase {
+      #{if(&, '&', '*')} .e-list-group-item,
+      #{if(&, '&', '*')} .e-fixed-head {
+        @if $skin-name == 'tailwind' {
+          padding-right: $ddl-list-header-bigger-padding-left;
+        }
+      }
+
+      #{if(&, '&', '*')}.e-dd-group .e-list-item {
+        @if $skin-name == 'tailwind' {
+          padding-right: $ddl-group-list-bigger-padding-left;
+        }
+      }
     }
   }
 
@@ -33,6 +80,19 @@
         padding-left: $ddl-list-rtl-padding-left;
         padding-right: $ddl-list-rtl-padding-right;
       }
+
+      #{if(&, '&', '*')}.e-dd-group .e-list-item {
+        @if $skin-name == 'tailwind' {
+          padding-right: $ddl-group-list-bigger-small-padding-left;
+        }
+      }
+
+      #{if(&, '&', '*')} .e-list-group-item,
+      #{if(&, '&', '*')} .e-fixed-head {
+        @if $skin-name == 'tailwind' {
+          padding-right: $ddl-list-header-bigger-small-padding-left;
+        }
+      }
     }
   }
 
@@ -40,6 +100,8 @@
     border-color: $ddl-list-border-color;
     @at-root {
       #{if(&, '&', '*')} .e-list-item {
+        // sass-lint:disable no-vendor-prefixes
+        -webkit-tap-highlight-color: $ddl-list-tap-color;
         background-color: $ddl-list-bg-color;
         border-bottom: $ddl-list-bottom-border;
         border-color: $ddl-list-gradient-color;
@@ -86,6 +148,12 @@
       #{if(&, '&', '*')} .e-list-item.e-item-focus {
         background-color: $ddl-list-hover-bg-color;
       }
+
+      #{if(&, '&', '*')} .e-list-item.e-active:last-child {
+        @if ($skin-name == 'bootstrap5') {
+          border-radius: 2px;
+        }
+      }
     }
   }
 
@@ -222,12 +290,14 @@
     border-color: $ddl-list-gradient-color;
     color: $ddl-list-default-font-color;
     font-family: $ddl-list-font-family;
-    font-size: $ddl-list-font-size;
-    padding-right: $ddl-list-padding-right;
     text-indent: $ddl-list-text-indent;
-    @if ($skin-name == 'bootstrap5') {
+    @if ($skin-name == 'bootstrap5' or $skin-name == 'tailwind' or $skin-name == 'FluentUI') {
       color: $ddl-list-header-font-color;
     }
+    @if $skin-name != 'tailwind' and $skin-name != 'FluentUI' {
+      font-size: $ddl-list-font-size;
+      padding-right: $ddl-list-padding-right;
+    }
   }
 
   .e-ddl.e-popup.e-multiselect-group .e-list-group-item.e-item-focus {
@@ -245,5 +315,14 @@
     background-color: $ddl-list-hover-bg-color;
     border-color: $ddl-list-hover-border-color;
     color: $ddl-list-hover-font-color;
+    @if $skin-name == 'FluentUI' {
+      color: $ddl-list-header-font-color;
+    }
+  }
+
+  .e-dropdownbase .e-list-item .e-list-icon {
+    @if $skin-name == 'tailwind' or $skin-name == 'FluentUI' {
+      color: $ddl-list-icon-color;
+    }
   }
 }

package/styles/drop-down-base/bootstrap-dark.css

@@ -17,9 +17,13 @@
 }
 
 .e-bigger .e-dropdownbase .e-list-item,
+.e-dropdownbase.e-bigger .e-list-item {
+  line-height: 48px;
+  text-indent: 20px;
+}
+
 .e-bigger .e-dropdownbase .e-list-group-item,
 .e-bigger .e-dropdownbase .e-fixed-head,
-.e-dropdownbase.e-bigger .e-list-item,
 .e-dropdownbase.e-bigger .e-list-group-item,
 .e-dropdownbase.e-bigger .e-fixed-head {
   line-height: 48px;
@@ -153,6 +157,7 @@
 }
 
 .e-dropdownbase .e-list-item {
+  -webkit-tap-highlight-color: transparent;
   background-color: #2a2a2a;
   border-bottom: 1px;
   border-color: #6e6e6e;
@@ -321,9 +326,9 @@
   border-color: #6e6e6e;
   color: #f0f0f0;
   font-family: inherit;
+  text-indent: 20px;
   font-size: 14px;
   padding-right: 20px;
-  text-indent: 20px;
 }
 
 .e-ddl.e-popup.e-multiselect-group .e-list-group-item.e-item-focus {

package/styles/drop-down-base/bootstrap.css

@@ -17,9 +17,13 @@
 }
 
 .e-bigger .e-dropdownbase .e-list-item,
+.e-dropdownbase.e-bigger .e-list-item {
+  line-height: 48px;
+  text-indent: 20px;
+}
+
 .e-bigger .e-dropdownbase .e-list-group-item,
 .e-bigger .e-dropdownbase .e-fixed-head,
-.e-dropdownbase.e-bigger .e-list-item,
 .e-dropdownbase.e-bigger .e-list-group-item,
 .e-dropdownbase.e-bigger .e-fixed-head {
   line-height: 48px;
@@ -153,6 +157,7 @@
 }
 
 .e-dropdownbase .e-list-item {
+  -webkit-tap-highlight-color: transparent;
   background-color: #fff;
   border-bottom: 1px;
   border-color: #fff;
@@ -321,9 +326,9 @@
   border-color: #fff;
   color: #333;
   font-family: inherit;
+  text-indent: 20px;
   font-size: 14px;
   padding-right: 20px;
-  text-indent: 20px;
 }
 
 .e-ddl.e-popup.e-multiselect-group .e-list-group-item.e-item-focus {

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

@@ -35,9 +35,13 @@
 }
 
 .e-bigger .e-dropdownbase .e-list-item,
+.e-dropdownbase.e-bigger .e-list-item {
+  line-height: 48px;
+  text-indent: 20px;
+}
+
 .e-bigger .e-dropdownbase .e-list-group-item,
 .e-bigger .e-dropdownbase .e-fixed-head,
-.e-dropdownbase.e-bigger .e-list-item,
 .e-dropdownbase.e-bigger .e-list-group-item,
 .e-dropdownbase.e-bigger .e-fixed-head {
   line-height: 48px;
@@ -171,6 +175,7 @@
 }
 
 .e-dropdownbase .e-list-item {
+  -webkit-tap-highlight-color: transparent;
   background-color: #fff;
   border-bottom: 1px;
   border-color: #fff;
@@ -339,9 +344,9 @@
   border-color: #fff;
   color: #212529;
   font-family: inherit;
+  text-indent: 20px;
   font-size: 14px;
   padding-right: 24px;
-  text-indent: 20px;
 }
 
 .e-ddl.e-popup.e-multiselect-group .e-list-group-item.e-item-focus {

package/styles/drop-down-base/bootstrap5-dark.css

@@ -43,9 +43,13 @@
 }
 
 .e-bigger .e-dropdownbase .e-list-item,
+.e-dropdownbase.e-bigger .e-list-item {
+  line-height: 32px;
+  text-indent: 16px;
+}
+
 .e-bigger .e-dropdownbase .e-list-group-item,
 .e-bigger .e-dropdownbase .e-fixed-head,
-.e-dropdownbase.e-bigger .e-list-item,
 .e-dropdownbase.e-bigger .e-list-group-item,
 .e-dropdownbase.e-bigger .e-fixed-head {
   line-height: 32px;
@@ -180,6 +184,7 @@
 }
 
 .e-dropdownbase .e-list-item {
+  -webkit-tap-highlight-color: transparent;
   background-color: #343a40;
   border-bottom: 0;
   border-color: #444c54;
@@ -227,6 +232,10 @@
   background-color: #444c54;
 }
 
+.e-dropdownbase .e-list-item.e-active:last-child {
+  border-radius: 2px;
+}
+
 .e-bigger .e-dropdownbase .e-list-group-item,
 .e-bigger .e-dropdownbase .e-fixed-head {
   font-size: 16px;
@@ -348,10 +357,10 @@
   border-color: #444c54;
   color: #fff;
   font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
-  font-size: 14px;
-  padding-right: 16px;
   text-indent: 12px;
   color: #7b848d;
+  font-size: 14px;
+  padding-right: 16px;
 }
 
 .e-ddl.e-popup.e-multiselect-group .e-list-group-item.e-item-focus {

package/styles/drop-down-base/bootstrap5.css

@@ -43,9 +43,13 @@
 }
 
 .e-bigger .e-dropdownbase .e-list-item,
+.e-dropdownbase.e-bigger .e-list-item {
+  line-height: 32px;
+  text-indent: 16px;
+}
+
 .e-bigger .e-dropdownbase .e-list-group-item,
 .e-bigger .e-dropdownbase .e-fixed-head,
-.e-dropdownbase.e-bigger .e-list-item,
 .e-dropdownbase.e-bigger .e-list-group-item,
 .e-dropdownbase.e-bigger .e-fixed-head {
   line-height: 32px;
@@ -180,6 +184,7 @@
 }
 
 .e-dropdownbase .e-list-item {
+  -webkit-tap-highlight-color: transparent;
   background-color: #fff;
   border-bottom: 0;
   border-color: #dee2e6;
@@ -227,6 +232,10 @@
   background-color: #e9ecef;
 }
 
+.e-dropdownbase .e-list-item.e-active:last-child {
+  border-radius: 2px;
+}
+
 .e-bigger .e-dropdownbase .e-list-group-item,
 .e-bigger .e-dropdownbase .e-fixed-head {
   font-size: 16px;
@@ -348,10 +357,10 @@
   border-color: #dee2e6;
   color: #212529;
   font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
-  font-size: 14px;
-  padding-right: 16px;
   text-indent: 12px;
   color: #6c757d;
+  font-size: 14px;
+  padding-right: 16px;
 }
 
 .e-ddl.e-popup.e-multiselect-group .e-list-group-item.e-item-focus {

package/styles/drop-down-base/fabric-dark.css

@@ -17,9 +17,13 @@
 }
 
 .e-bigger .e-dropdownbase .e-list-item,
+.e-dropdownbase.e-bigger .e-list-item {
+  line-height: 48px;
+  text-indent: 10px;
+}
+
 .e-bigger .e-dropdownbase .e-list-group-item,
 .e-bigger .e-dropdownbase .e-fixed-head,
-.e-dropdownbase.e-bigger .e-list-item,
 .e-dropdownbase.e-bigger .e-list-group-item,
 .e-dropdownbase.e-bigger .e-fixed-head {
   line-height: 48px;
@@ -153,6 +157,7 @@
 }
 
 .e-dropdownbase .e-list-item {
+  -webkit-tap-highlight-color: transparent;
   background-color: #282727;
   border-bottom: 1px;
   border-color: transparent;
@@ -321,9 +326,9 @@
   border-color: transparent;
   color: #dadada;
   font-family: inherit;
+  text-indent: 10px;
   font-size: 14px;
   padding-right: 16px;
-  text-indent: 10px;
 }
 
 .e-ddl.e-popup.e-multiselect-group .e-list-group-item.e-item-focus {

package/styles/drop-down-base/fabric.css

@@ -17,9 +17,13 @@
 }
 
 .e-bigger .e-dropdownbase .e-list-item,
+.e-dropdownbase.e-bigger .e-list-item {
+  line-height: 48px;
+  text-indent: 10px;
+}
+
 .e-bigger .e-dropdownbase .e-list-group-item,
 .e-bigger .e-dropdownbase .e-fixed-head,
-.e-dropdownbase.e-bigger .e-list-item,
 .e-dropdownbase.e-bigger .e-list-group-item,
 .e-dropdownbase.e-bigger .e-fixed-head {
   line-height: 48px;
@@ -153,6 +157,7 @@
 }
 
 .e-dropdownbase .e-list-item {
+  -webkit-tap-highlight-color: transparent;
   background-color: #fff;
   border-bottom: 1px;
   border-color: transparent;
@@ -321,9 +326,9 @@
   border-color: transparent;
   color: rgba(51, 51, 51, 0.87);
   font-family: inherit;
+  text-indent: 10px;
   font-size: 14px;
   padding-right: 16px;
-  text-indent: 10px;
 }
 
 .e-ddl.e-popup.e-multiselect-group .e-list-group-item.e-item-focus {