@syncfusion/ej2-dropdowns 26.2.11 → 27.1.48

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

@@ -45,51 +45,6 @@
     }
   }
 
-  .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;
-        }
-      }
-    }
-  }
-
-  .e-small.e-bigger.e-rtl,
-  .e-small.e-bigger .e-rtl,
-  .e-rtl .e-small.e-bigger,
-  .e-small .e-rtl.e-bigger,
-  .e-bigger .e-rtl.e-small {
-    #{if(&, '&', '*')} .e-dropdownbase {
-      #{if(&, '&', '*')} .e-list-item {
-        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;
-        }
-      }
-    }
-  }
-
   .e-dropdownbase {
     border-color: $ddl-list-border-color;
     @if $skin-name == 'Material3' {
@@ -114,6 +69,9 @@
         @if $skin-name != 'Material3' {
           background-color: $ddl-list-bg-color;
         }
+        @if $skin-name == 'fluent2' {
+          margin-bottom: 2px;
+        }
       }
 
       #{if(&, '&', '*')} .e-list-group-item,
@@ -174,29 +132,23 @@
         @if $skin-name == 'Material3' {
           background: $ddl-list-focus-bg-color;
         }
-        @if $skin-name != 'Material3' {
+        @if $skin-name != 'Material3' and $skin-name != 'fluent2' {
           background-color: $ddl-list-hover-bg-color;
         }
+        @if $skin-name == 'fluent2' {
+          color: $ddl-list-hover-font-color;
+          background: $ddl-list-focus-bg-color;
+        }
       }
 
       #{if(&, '&', '*')} .e-list-item.e-active:last-child {
-        @if ($skin-name == 'bootstrap5') {
+        @if ($skin-name == 'bootstrap5' or $skin-name == 'bootstrap5.3') {
           border-radius: 2px;
         }
       }
     }
   }
 
-  .e-bigger .e-dropdownbase {
-    @at-root {
-      #{if(&, '&', '*')} .e-list-group-item,
-      #{if(&, '&', '*')} .e-fixed-head {
-        font-size: $ddl-bigger-list-header-font-size;
-        padding-left: $ddl-list-header-bigger-padding-left;
-      }
-    }
-  }
-
   .e-multi-column#{&}.e-ddl#{&}.e-popup#{&}.e-popup-open table {
     border-collapse: collapse;
     table-layout: fixed;
@@ -283,39 +235,6 @@
     }
   }
 
-  .e-bigger.e-small .e-dropdownbase,
-  .e-dropdownbase.e-small.e-bigger {
-    @at-root {
-      #{if(&, '&', '*')} .e-list-item {
-        color: $ddl-bigger-small-list-font-color;
-        line-height: $ddl-bigger-small-line-height;
-        min-height: $ddl-bigger-small-line-height;
-        text-indent: $ddl-bigger-small-list-text-indent;
-      }
-
-      #{if(&, '&', '*')} .e-list-group-item,
-      #{if(&, '&', '*')} .e-fixed-head {
-        line-height: $ddl-bigger-small-line-height;
-        min-height: $ddl-bigger-small-line-height;
-        padding-left: $ddl-list-header-bigger-small-padding-left;
-      }
-
-      #{if(&, '&', '*')} .e-list-item .e-list-icon {
-        font-size: $ddl-bigger-small-icon-font-size;
-      }
-    }
-  }
-
-  .e-bigger.e-small .e-dropdownbase,
-  .e-dropdownbase.e-bigger.e-small  {
-    @at-root {
-      #{if(&, '&', '*')} .e-list-group-item,
-      #{if(&, '&', '*')} .e-fixed-head {
-        font-size: $ddl-bigger-small-list-header-font-size;
-      }
-    }
-  }
-
   .e-ddl.e-popup.e-multiselect-group .e-list-group-item {
     @if $skin-name == 'Material3' {
       background: $ddl-list-bg-color;
@@ -328,7 +247,7 @@
     color: $ddl-list-default-font-color;
     font-family: $ddl-list-font-family;
     text-indent: $ddl-list-text-indent;
-    @if ($skin-name == 'bootstrap5' or $skin-name == 'tailwind' or $skin-name == 'FluentUI') {
+    @if ($skin-name == 'bootstrap5' or $skin-name == 'bootstrap5.3' or $skin-name == 'tailwind' or $skin-name == 'FluentUI') {
       color: $ddl-list-header-font-color;
     }
     @if $skin-name != 'tailwind' and $skin-name != 'FluentUI' {

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

@@ -2,37 +2,10 @@
   padding: 0 10px 0 0;
 }
 
-.e-bigger .e-dropdownbase .e-list-item .e-list-icon,
-.e-bigger.e-small .e-dropdownbase .e-list-item .e-list-icon {
-  padding: 0 12px 0 0;
-}
-
 .e-small .e-dropdownbase .e-list-item .e-list-icon {
   padding: 0 8px 0 0;
 }
 
-.e-bigger .e-dropdownbase,
-.e-dropdownbase.e-bigger {
-  min-height: 45px;
-}
-.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-group-item,
-.e-dropdownbase.e-bigger .e-fixed-head {
-  line-height: 48px;
-  text-indent: 20px;
-}
-
-.e-bigger .e-dropdownbase .e-list-item .e-list-icon,
-.e-dropdownbase.e-bigger .e-list-item .e-list-icon {
-  font-size: 20px;
-}
-
 .e-dropdownbase {
   display: block;
   height: 100%;
@@ -132,14 +105,6 @@
   padding-left: 30px;
 }
 
-.e-bigger .e-dropdownbase.e-dd-group .e-list-item {
-  padding-left: 30px;
-}
-
-.e-small.e-bigger .e-dropdownbase.e-dd-group .e-list-item {
-  padding-left: 30px;
-}
-
 .e-popup.e-multi-select-list-wrapper.e-multiselect-group .e-dropdownbase.e-dd-group .e-list-group-item {
   text-indent: 0;
 }
@@ -169,14 +134,6 @@
   padding-left: 20px;
   padding-right: 0;
 }
-.e-small.e-bigger.e-rtl .e-dropdownbase .e-list-item,
-.e-small.e-bigger .e-rtl .e-dropdownbase .e-list-item,
-.e-rtl .e-small.e-bigger .e-dropdownbase .e-list-item,
-.e-small .e-rtl.e-bigger .e-dropdownbase .e-list-item,
-.e-bigger .e-rtl.e-small .e-dropdownbase .e-list-item {
-  padding-left: 20px;
-  padding-right: 0;
-}
 .e-dropdownbase {
   border-color: #414141;
 }
@@ -231,11 +188,6 @@
   background-color: #414141;
 }
 
-.e-bigger .e-dropdownbase .e-list-group-item, .e-bigger .e-dropdownbase .e-fixed-head {
-  font-size: 14px;
-  padding-left: 20px;
-}
-
 .e-multi-column.e-ddl.e-popup.e-popup-open table {
   border-collapse: collapse;
   table-layout: fixed;
@@ -315,33 +267,6 @@
   font-size: 14px;
 }
 
-.e-bigger.e-small .e-dropdownbase .e-list-item,
-.e-dropdownbase.e-small.e-bigger .e-list-item {
-  color: #f0f0f0;
-  line-height: 34px;
-  min-height: 34px;
-  text-indent: 16px;
-}
-
-.e-bigger.e-small .e-dropdownbase .e-list-group-item, .e-bigger.e-small .e-dropdownbase .e-fixed-head,
-.e-dropdownbase.e-small.e-bigger .e-list-group-item,
-.e-dropdownbase.e-small.e-bigger .e-fixed-head {
-  line-height: 34px;
-  min-height: 34px;
-  padding-left: 20px;
-}
-
-.e-bigger.e-small .e-dropdownbase .e-list-item .e-list-icon,
-.e-dropdownbase.e-small.e-bigger .e-list-item .e-list-icon {
-  font-size: 18px;
-}
-
-.e-bigger.e-small .e-dropdownbase .e-list-group-item, .e-bigger.e-small .e-dropdownbase .e-fixed-head,
-.e-dropdownbase.e-bigger.e-small .e-list-group-item,
-.e-dropdownbase.e-bigger.e-small .e-fixed-head {
-  font-size: 14px;
-}
-
 .e-ddl.e-popup.e-multiselect-group .e-list-group-item {
   background-color: #2a2a2a;
   border-bottom: 1px;
@@ -372,4 +297,79 @@
 
 .e-selectall-parent.e-item-focus {
   background-color: #414141;
+}
+
+.e-bigger .e-dropdownbase,
+.e-dropdownbase.e-bigger {
+  min-height: 45px;
+}
+.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-group-item,
+.e-dropdownbase.e-bigger .e-fixed-head {
+  line-height: 48px;
+  text-indent: 20px;
+}
+
+.e-bigger .e-dropdownbase .e-list-item .e-list-icon,
+.e-dropdownbase.e-bigger .e-list-item .e-list-icon {
+  font-size: 20px;
+}
+
+.e-bigger .e-dropdownbase.e-dd-group .e-list-item {
+  padding-left: 30px;
+}
+
+.e-small.e-bigger .e-dropdownbase.e-dd-group .e-list-item {
+  padding-left: 30px;
+}
+
+.e-small.e-bigger.e-rtl .e-dropdownbase .e-list-item,
+.e-small.e-bigger .e-rtl .e-dropdownbase .e-list-item,
+.e-rtl .e-small.e-bigger .e-dropdownbase .e-list-item,
+.e-small .e-rtl.e-bigger .e-dropdownbase .e-list-item,
+.e-bigger .e-rtl.e-small .e-dropdownbase .e-list-item {
+  padding-left: 20px;
+  padding-right: 0;
+}
+.e-bigger .e-dropdownbase .e-list-group-item, .e-bigger .e-dropdownbase .e-fixed-head {
+  font-size: 14px;
+  padding-left: 20px;
+}
+
+.e-bigger.e-small .e-dropdownbase .e-list-group-item, .e-bigger.e-small .e-dropdownbase .e-fixed-head,
+.e-dropdownbase.e-bigger.e-small .e-list-group-item,
+.e-dropdownbase.e-bigger.e-small .e-fixed-head {
+  font-size: 14px;
+}
+
+.e-bigger.e-small .e-dropdownbase .e-list-item,
+.e-dropdownbase.e-small.e-bigger .e-list-item {
+  color: #f0f0f0;
+  line-height: 34px;
+  min-height: 34px;
+  text-indent: 16px;
+}
+
+.e-bigger.e-small .e-dropdownbase .e-list-group-item, .e-bigger.e-small .e-dropdownbase .e-fixed-head,
+.e-dropdownbase.e-small.e-bigger .e-list-group-item,
+.e-dropdownbase.e-small.e-bigger .e-fixed-head {
+  line-height: 34px;
+  min-height: 34px;
+  padding-left: 20px;
+}
+
+.e-bigger.e-small .e-dropdownbase .e-list-item .e-list-icon,
+.e-dropdownbase.e-small.e-bigger .e-list-item .e-list-icon {
+  font-size: 18px;
+}
+
+.e-bigger .e-dropdownbase .e-list-item .e-list-icon,
+.e-bigger.e-small .e-dropdownbase .e-list-item .e-list-icon {
+  padding: 0 12px 0 0;
 }

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

@@ -1,3 +1,4 @@
 @import 'ej2-base/styles/definition/bootstrap-dark.scss';
 @import 'bootstrap-dark-definition.scss';
 @import 'all.scss';
+@import 'bigger.scss';

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

@@ -2,37 +2,10 @@
   padding: 0 10px 0 0;
 }
 
-.e-bigger .e-dropdownbase .e-list-item .e-list-icon,
-.e-bigger.e-small .e-dropdownbase .e-list-item .e-list-icon {
-  padding: 0 12px 0 0;
-}
-
 .e-small .e-dropdownbase .e-list-item .e-list-icon {
   padding: 0 8px 0 0;
 }
 
-.e-bigger .e-dropdownbase,
-.e-dropdownbase.e-bigger {
-  min-height: 45px;
-}
-.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-group-item,
-.e-dropdownbase.e-bigger .e-fixed-head {
-  line-height: 48px;
-  text-indent: 20px;
-}
-
-.e-bigger .e-dropdownbase .e-list-item .e-list-icon,
-.e-dropdownbase.e-bigger .e-list-item .e-list-icon {
-  font-size: 20px;
-}
-
 .e-dropdownbase {
   display: block;
   height: 100%;
@@ -132,14 +105,6 @@
   padding-left: 30px;
 }
 
-.e-bigger .e-dropdownbase.e-dd-group .e-list-item {
-  padding-left: 30px;
-}
-
-.e-small.e-bigger .e-dropdownbase.e-dd-group .e-list-item {
-  padding-left: 30px;
-}
-
 .e-popup.e-multi-select-list-wrapper.e-multiselect-group .e-dropdownbase.e-dd-group .e-list-group-item {
   text-indent: 0;
 }
@@ -169,14 +134,6 @@
   padding-left: 20px;
   padding-right: 0;
 }
-.e-small.e-bigger.e-rtl .e-dropdownbase .e-list-item,
-.e-small.e-bigger .e-rtl .e-dropdownbase .e-list-item,
-.e-rtl .e-small.e-bigger .e-dropdownbase .e-list-item,
-.e-small .e-rtl.e-bigger .e-dropdownbase .e-list-item,
-.e-bigger .e-rtl.e-small .e-dropdownbase .e-list-item {
-  padding-left: 20px;
-  padding-right: 0;
-}
 .e-dropdownbase {
   border-color: rgba(119, 119, 119, 0.25);
 }
@@ -231,11 +188,6 @@
   background-color: #f5f5f5;
 }
 
-.e-bigger .e-dropdownbase .e-list-group-item, .e-bigger .e-dropdownbase .e-fixed-head {
-  font-size: 14px;
-  padding-left: 20px;
-}
-
 .e-multi-column.e-ddl.e-popup.e-popup-open table {
   border-collapse: collapse;
   table-layout: fixed;
@@ -315,33 +267,6 @@
   font-size: 14px;
 }
 
-.e-bigger.e-small .e-dropdownbase .e-list-item,
-.e-dropdownbase.e-small.e-bigger .e-list-item {
-  color: #333;
-  line-height: 34px;
-  min-height: 34px;
-  text-indent: 16px;
-}
-
-.e-bigger.e-small .e-dropdownbase .e-list-group-item, .e-bigger.e-small .e-dropdownbase .e-fixed-head,
-.e-dropdownbase.e-small.e-bigger .e-list-group-item,
-.e-dropdownbase.e-small.e-bigger .e-fixed-head {
-  line-height: 34px;
-  min-height: 34px;
-  padding-left: 20px;
-}
-
-.e-bigger.e-small .e-dropdownbase .e-list-item .e-list-icon,
-.e-dropdownbase.e-small.e-bigger .e-list-item .e-list-icon {
-  font-size: 18px;
-}
-
-.e-bigger.e-small .e-dropdownbase .e-list-group-item, .e-bigger.e-small .e-dropdownbase .e-fixed-head,
-.e-dropdownbase.e-bigger.e-small .e-list-group-item,
-.e-dropdownbase.e-bigger.e-small .e-fixed-head {
-  font-size: 14px;
-}
-
 .e-ddl.e-popup.e-multiselect-group .e-list-group-item {
   background-color: #fff;
   border-bottom: 1px;
@@ -372,4 +297,79 @@
 
 .e-selectall-parent.e-item-focus {
   background-color: #f5f5f5;
+}
+
+.e-bigger .e-dropdownbase,
+.e-dropdownbase.e-bigger {
+  min-height: 45px;
+}
+.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-group-item,
+.e-dropdownbase.e-bigger .e-fixed-head {
+  line-height: 48px;
+  text-indent: 20px;
+}
+
+.e-bigger .e-dropdownbase .e-list-item .e-list-icon,
+.e-dropdownbase.e-bigger .e-list-item .e-list-icon {
+  font-size: 20px;
+}
+
+.e-bigger .e-dropdownbase.e-dd-group .e-list-item {
+  padding-left: 30px;
+}
+
+.e-small.e-bigger .e-dropdownbase.e-dd-group .e-list-item {
+  padding-left: 30px;
+}
+
+.e-small.e-bigger.e-rtl .e-dropdownbase .e-list-item,
+.e-small.e-bigger .e-rtl .e-dropdownbase .e-list-item,
+.e-rtl .e-small.e-bigger .e-dropdownbase .e-list-item,
+.e-small .e-rtl.e-bigger .e-dropdownbase .e-list-item,
+.e-bigger .e-rtl.e-small .e-dropdownbase .e-list-item {
+  padding-left: 20px;
+  padding-right: 0;
+}
+.e-bigger .e-dropdownbase .e-list-group-item, .e-bigger .e-dropdownbase .e-fixed-head {
+  font-size: 14px;
+  padding-left: 20px;
+}
+
+.e-bigger.e-small .e-dropdownbase .e-list-group-item, .e-bigger.e-small .e-dropdownbase .e-fixed-head,
+.e-dropdownbase.e-bigger.e-small .e-list-group-item,
+.e-dropdownbase.e-bigger.e-small .e-fixed-head {
+  font-size: 14px;
+}
+
+.e-bigger.e-small .e-dropdownbase .e-list-item,
+.e-dropdownbase.e-small.e-bigger .e-list-item {
+  color: #333;
+  line-height: 34px;
+  min-height: 34px;
+  text-indent: 16px;
+}
+
+.e-bigger.e-small .e-dropdownbase .e-list-group-item, .e-bigger.e-small .e-dropdownbase .e-fixed-head,
+.e-dropdownbase.e-small.e-bigger .e-list-group-item,
+.e-dropdownbase.e-small.e-bigger .e-fixed-head {
+  line-height: 34px;
+  min-height: 34px;
+  padding-left: 20px;
+}
+
+.e-bigger.e-small .e-dropdownbase .e-list-item .e-list-icon,
+.e-dropdownbase.e-small.e-bigger .e-list-item .e-list-icon {
+  font-size: 18px;
+}
+
+.e-bigger .e-dropdownbase .e-list-item .e-list-icon,
+.e-bigger.e-small .e-dropdownbase .e-list-item .e-list-icon {
+  padding: 0 12px 0 0;
 }

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

@@ -1,3 +1,4 @@
 @import 'ej2-base/styles/definition/bootstrap.scss';
 @import 'bootstrap-definition.scss';
 @import 'all.scss';
+@import 'bigger.scss';