@syncfusion/ej2-dropdowns 33.2.15 → 34.1.29

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

@@ -1,6 +1,5 @@
-@use 'ej2-base/styles/common/mixin' as *;
-@use 'ej2-base/styles/definition/material' as *;
-@forward 'ej2-base/styles/definition/material';
+@use '@syncfusion/ej2-base/styles/common/base-variables' as *;
+
 $ddl-list-line-height: 36px !default;
 $ddl-header-font-weight: 600 !default;
 $ddl-last-child-bottom-border: 0 !default;

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

@@ -1,6 +1,4 @@
-@use 'ej2-base/styles/common/mixin' as *;
-@use 'ej2-base/styles/definition/material3-dark' as *;
-@forward 'ej2-base/styles/definition/material3-dark';
+@use '@syncfusion/ej2-base/styles/common/base-variables' as *;
 
 $ddl-list-line-height: 32px !default;
 $ddl-header-font-weight: 600 !default;

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

@@ -1,6 +1,5 @@
-@use 'ej2-base/styles/common/mixin' as *;
-@use 'ej2-base/styles/definition/material3' as *;
-@forward 'ej2-base/styles/definition/material3';
+@use '@syncfusion/ej2-base/styles/common/base-variables' as *;
+
 $ddl-list-line-height: 32px !default;
 $ddl-header-font-weight: 600 !default;
 $ddl-last-child-bottom-border: 0 !default;

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

@@ -1,6 +1,5 @@
-@use 'ej2-base/styles/common/mixin' as *;
-@use 'ej2-base/styles/definition/tailwind-dark' as *;
-@forward 'ej2-base/styles/definition/tailwind-dark';
+@use '@syncfusion/ej2-base/styles/common/base-variables' as *;
+
 $ddl-list-line-height: 30px !default;
 $ddl-header-font-weight: $font-weight-medium !default;
 $ddl-last-child-bottom-border: 0 !default;

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

@@ -1,6 +1,5 @@
-@use 'ej2-base/styles/common/mixin' as *;
-@use 'ej2-base/styles/definition/tailwind' as *;
-@forward 'ej2-base/styles/definition/tailwind';
+@use '@syncfusion/ej2-base/styles/common/base-variables' as *;
+
 $ddl-list-line-height: 30px !default;
 $ddl-header-font-weight: $font-weight-medium !default;
 $ddl-last-child-bottom-border: 0 !default;

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

@@ -1,6 +1,5 @@
-@use 'ej2-base/styles/common/mixin' as *;
-@use 'ej2-base/styles/definition/tailwind3' as *;
-@forward 'ej2-base/styles/definition/tailwind3';
+@use '@syncfusion/ej2-base/styles/common/base-variables' as *;
+
 $ddl-list-line-height: 32px !default;
 $ddl-header-font-weight: 500 !default;
 $ddl-last-child-bottom-border: 0 !default;

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

@@ -1,20 +1,20 @@
-@use 'ej2-base/styles/common/mixin' as *;
+@use 'variables' as *;
 @include export-module('dropdownbase-theme') {
   .e-rtl {
-    #{if(&, '&', '*')} .e-dropdownbase {
-      #{if(&, '&', '*')} .e-list-item {
+    & .e-dropdownbase {
+      & .e-list-item {
         padding-left: $ddl-list-rtl-padding-left;
         padding-right: $ddl-list-rtl-padding-right;
       }
 
-      #{if(&, '&', '*')}.e-dd-group .e-list-item {
+      &.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 {
+      & .e-list-group-item,
+      & .e-fixed-head {
         @if $skin-name == 'tailwind' {
           padding-right: $ddl-list-header-padding-left;
         }
@@ -25,20 +25,20 @@
   .e-small.e-rtl,
   .e-small .e-rtl,
   .e-rtl .e-small {
-    #{if(&, '&', '*')} .e-dropdownbase {
-      #{if(&, '&', '*')} .e-list-item {
+    & .e-dropdownbase {
+      & .e-list-item {
         padding-left: $ddl-list-rtl-padding-left;
         padding-right: $ddl-list-rtl-padding-right;
       }
 
-      #{if(&, '&', '*')}.e-dd-group .e-list-item {
+      &.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 {
+      & .e-list-group-item,
+      & .e-fixed-head {
         @if $skin-name == 'tailwind' {
           padding-right: $ddl-list-header-small-padding-left;
         }
@@ -52,7 +52,7 @@
       background: $ddl-list-bg-color;
     }
     @at-root {
-      #{if(&, '&', '*')} .e-list-item {
+      & .e-list-item {
         /* stylelint-disable property-no-vendor-prefix */
         -webkit-tap-highlight-color: $ddl-list-tap-color;
         border-bottom: $ddl-list-bottom-border;
@@ -75,7 +75,7 @@
         }
       }
 
-      #{if(&, '&', '*')} .e-list-group-item,
+      & .e-list-group-item,
       .e-fixed-head {
         border-color: $ddl-list-gradient-color;
         color: $ddl-list-header-font-color;
@@ -96,8 +96,8 @@
         }
       }
 
-      #{if(&, '&', '*')} .e-list-item.e-active,
-      #{if(&, '&', '*')} .e-list-item.e-active.e-hover {
+      & .e-list-item.e-active,
+      & .e-list-item.e-active.e-hover {
         @if $skin-name == 'Material3' or $skin-name == 'fluent2' {
           background: $ddl-list-active-bg-color;
         }
@@ -108,7 +108,7 @@
         color: $ddl-list-active-font-color;
       }
 
-      #{if(&, '&', '*')} .e-list-item.e-hover {
+      & .e-list-item.e-hover {
         @if $skin-name == 'Material3' {
           background: $ddl-list-hover-bg-color;
         }
@@ -119,17 +119,17 @@
         color: $ddl-list-hover-font-color;
       }
 
-      #{if(&, '&', '*')} .e-list-item:active {
+      & .e-list-item:active {
         @if $skin-name == 'Material3' {
           background: $ddl-list-pressed-bg-color;
         }
       }
 
-      #{if(&, '&', '*')} .e-list-item:last-child {
+      & .e-list-item:last-child {
         border-bottom: $ddl-last-child-bottom-border;
       }
 
-      #{if(&, '&', '*')} .e-list-item.e-item-focus {
+      & .e-list-item.e-item-focus {
         @if $skin-name == 'Material3' {
           background: $ddl-list-focus-bg-color;
         }
@@ -142,7 +142,7 @@
         }
       }
 
-      #{if(&, '&', '*')} .e-list-item.e-active:last-child {
+      & .e-list-item.e-active:last-child {
         @if ($skin-name == 'bootstrap5' or $skin-name == 'bootstrap5.3') {
           border-radius: 2px;
         }
@@ -221,22 +221,22 @@
   .e-small .e-dropdownbase,
   .e-dropdownbase.e-small {
     @at-root {
-      #{if(&, '&', '*')} .e-list-item {
+      & .e-list-item {
         color: $ddl-small-list-font-color;
         line-height: $ddl-small-line-height;
         min-height: $ddl-small-line-height;
         text-indent: $ddl-small-list-text-indent;
       }
 
-      #{if(&, '&', '*')} .e-list-group-item,
-      #{if(&, '&', '*')} .e-fixed-head {
+      & .e-list-group-item,
+      & .e-fixed-head {
         font-size: $ddl-small-list-header-font-size;
         line-height: $ddl-small-line-height;
         min-height: $ddl-small-line-height;
         padding-left: $ddl-list-header-small-padding-left;
       }
 
-      #{if(&, '&', '*')} .e-list-item .e-list-icon {
+      & .e-list-item .e-list-icon {
         font-size: $ddl-small-icon-font-size;
       }
     }

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

@@ -0,0 +1,2 @@
+@forward '@syncfusion/ej2-base/styles/common/_base-variables';
+@forward '_material3-definition';

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

@@ -2,43 +2,6 @@
 
 
 
-.e-dropdownbase .e-list-item.e-active,
-.e-dropdownbase .e-list-item.e-active.e-hover {
-  font-weight: 500;
-}
-
-.e-dropdownbase .e-list-group-item,
-.e-fixed-head {
-  font-size: 12px;
-  text-transform: uppercase;
-}
-
-.e-small .e-dropdownbase .e-list-group-item,
-.e-small .e-fixed-head,
-.e-small.e-dropdownbase .e-list-group-item,
-.e-small.e-fixed-head {
-  font-size: 10px;
-}
-
-.e-dropdownbase .e-list-item .e-list-icon {
-  -webkit-padding-end: 8px;
-          padding-inline-end: 8px;
-}
-
-.e-small .e-dropdownbase .e-list-item .e-list-icon {
-  -webkit-padding-end: 4px;
-          padding-inline-end: 4px;
-}
-
-/* stylelint-disable */
-.e-dropdownbase .e-list-item {
-  border-radius: 6px !important;
-}
-
-
-
-
-
 .e-dropdownbase .e-list-item.e-active,
 .e-dropdownbase .e-list-item.e-active.e-hover {
   font-weight: 500;
@@ -201,43 +164,6 @@
   padding-right: 12px;
 }
 
-
-
-
-
-.e-dropdownbase .e-list-item.e-active,
-.e-dropdownbase .e-list-item.e-active.e-hover {
-  font-weight: 500;
-}
-
-.e-dropdownbase .e-list-group-item,
-.e-fixed-head {
-  font-size: 12px;
-  text-transform: uppercase;
-}
-
-.e-small .e-dropdownbase .e-list-group-item,
-.e-small .e-fixed-head,
-.e-small.e-dropdownbase .e-list-group-item,
-.e-small.e-fixed-head {
-  font-size: 10px;
-}
-
-.e-dropdownbase .e-list-item .e-list-icon {
-  -webkit-padding-end: 8px;
-          padding-inline-end: 8px;
-}
-
-.e-small .e-dropdownbase .e-list-item .e-list-icon {
-  -webkit-padding-end: 4px;
-          padding-inline-end: 4px;
-}
-
-/* stylelint-disable */
-.e-dropdownbase .e-list-item {
-  border-radius: 6px !important;
-}
-
 .e-rtl .e-dropdownbase .e-list-item {
   padding-left: 16px;
   padding-right: 0;
@@ -303,7 +229,7 @@
 }
 
 .e-dropdownbase .e-list-item.e-active, .e-dropdownbase .e-list-item.e-active.e-hover {
-  background-color: var(--color-sf-bg-secondary);
+  background-color: #eaecf0;
   border-color: var(--color-sf-bg-primary);
   color: var(--color-sf-text-primary);
 }
@@ -417,7 +343,7 @@
 
 .e-ddl.e-popup.e-multiselect-group .e-list-group-item.e-active,
 .e-ddl.e-popup.e-multiselect-group .e-list-group-item.e-active.e-hover {
-  background-color: var(--color-sf-bg-secondary);
+  background-color: #eaecf0;
   border-color: var(--color-sf-bg-primary);
   color: var(--color-sf-text-primary);
 }
@@ -436,43 +362,6 @@
   background-color: var(--color-sf-bg-secondary-hover);
 }
 
-
-
-
-
-.e-dropdownbase .e-list-item.e-active,
-.e-dropdownbase .e-list-item.e-active.e-hover {
-  font-weight: 500;
-}
-
-.e-dropdownbase .e-list-group-item,
-.e-fixed-head {
-  font-size: 12px;
-  text-transform: uppercase;
-}
-
-.e-small .e-dropdownbase .e-list-group-item,
-.e-small .e-fixed-head,
-.e-small.e-dropdownbase .e-list-group-item,
-.e-small.e-fixed-head {
-  font-size: 10px;
-}
-
-.e-dropdownbase .e-list-item .e-list-icon {
-  -webkit-padding-end: 8px;
-          padding-inline-end: 8px;
-}
-
-.e-small .e-dropdownbase .e-list-item .e-list-icon {
-  -webkit-padding-end: 4px;
-          padding-inline-end: 4px;
-}
-
-/* stylelint-disable */
-.e-dropdownbase .e-list-item {
-  border-radius: 6px !important;
-}
-
 .e-bigger .e-dropdownbase,
 .e-dropdownbase.e-bigger {
   min-height: 45px;

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

@@ -1,4 +1,3 @@
-@use 'ej2-base/styles/definition/bds' as *;
 @use 'bds-definition' as *;
-@use 'all.bds' as *;
-@use 'bigger.bds' as *;
+@use 'all' as *;
+@use 'bigger' as *;

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

@@ -8,16 +8,6 @@
           padding-inline-end: 8px;
 }
 
-.e-dropdownbase .e-list-item .e-list-icon {
-  -webkit-padding-end: 10px;
-          padding-inline-end: 10px;
-}
-
-.e-small .e-dropdownbase .e-list-item .e-list-icon {
-  -webkit-padding-end: 8px;
-          padding-inline-end: 8px;
-}
-
 .e-dropdownbase {
   display: block;
   height: 100%;
@@ -140,16 +130,6 @@
   padding-right: 30px;
 }
 
-.e-dropdownbase .e-list-item .e-list-icon {
-  -webkit-padding-end: 10px;
-          padding-inline-end: 10px;
-}
-
-.e-small .e-dropdownbase .e-list-item .e-list-icon {
-  -webkit-padding-end: 8px;
-          padding-inline-end: 8px;
-}
-
 .e-rtl .e-dropdownbase .e-list-item {
   padding-left: 20px;
   padding-right: 0;
@@ -325,16 +305,6 @@
   background-color: #414141;
 }
 
-.e-dropdownbase .e-list-item .e-list-icon {
-  -webkit-padding-end: 10px;
-          padding-inline-end: 10px;
-}
-
-.e-small .e-dropdownbase .e-list-item .e-list-icon {
-  -webkit-padding-end: 8px;
-          padding-inline-end: 8px;
-}
-
 .e-bigger .e-dropdownbase,
 .e-dropdownbase.e-bigger {
   min-height: 45px;

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

@@ -1,4 +1,3 @@
-@use 'ej2-base/styles/definition/bootstrap-dark' as *;
 @use 'bootstrap-dark-definition' as *;
-@use 'all.bootstrap-dark' as *;
-@use 'bigger.bootstrap-dark' as *;
+@use 'all' as *;
+@use 'bigger' as *;

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

@@ -8,16 +8,6 @@
           padding-inline-end: 8px;
 }
 
-.e-dropdownbase .e-list-item .e-list-icon {
-  -webkit-padding-end: 10px;
-          padding-inline-end: 10px;
-}
-
-.e-small .e-dropdownbase .e-list-item .e-list-icon {
-  -webkit-padding-end: 8px;
-          padding-inline-end: 8px;
-}
-
 .e-dropdownbase {
   display: block;
   height: 100%;
@@ -140,16 +130,6 @@
   padding-right: 30px;
 }
 
-.e-dropdownbase .e-list-item .e-list-icon {
-  -webkit-padding-end: 10px;
-          padding-inline-end: 10px;
-}
-
-.e-small .e-dropdownbase .e-list-item .e-list-icon {
-  -webkit-padding-end: 8px;
-          padding-inline-end: 8px;
-}
-
 .e-rtl .e-dropdownbase .e-list-item {
   padding-left: 20px;
   padding-right: 0;
@@ -325,16 +305,6 @@
   background-color: #f5f5f5;
 }
 
-.e-dropdownbase .e-list-item .e-list-icon {
-  -webkit-padding-end: 10px;
-          padding-inline-end: 10px;
-}
-
-.e-small .e-dropdownbase .e-list-item .e-list-icon {
-  -webkit-padding-end: 8px;
-          padding-inline-end: 8px;
-}
-
 .e-bigger .e-dropdownbase,
 .e-dropdownbase.e-bigger {
   min-height: 45px;

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

@@ -1,4 +1,3 @@
-@use 'ej2-base/styles/definition/bootstrap' as *;
 @use 'bootstrap-definition' as *;
-@use 'all.bootstrap' as *;
-@use 'bigger.bootstrap' as *;
+@use 'all' as *;
+@use 'bigger' as *;

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

@@ -14,22 +14,6 @@
   stroke-width: 1px;
 }
 
-.e-dropdownbase .e-list-item .e-list-icon {
-  -webkit-padding-end: 8px;
-          padding-inline-end: 8px;
-}
-
-.e-small .e-dropdownbase .e-list-item .e-list-icon {
-  -webkit-padding-end: 8px;
-          padding-inline-end: 8px;
-}
-
-.e-input-group.e-ddl .e-spinner-pane .e-spinner-inner .e-spin-bootstrap4 .e-path-circle,
-.e-ddl.e-popup .e-filter-parent .e-spinner-pane .e-spinner-inner .e-spin-bootstrap4 .e-path-circle,
-.e-ddl.e-popup .e-spinner-pane .e-spinner-inner .e-spin-bootstrap4 .e-path-circle {
-  stroke-width: 1px;
-}
-
 .e-dropdownbase {
   display: block;
   height: 100%;
@@ -152,22 +136,6 @@
   padding-right: 30px;
 }
 
-.e-dropdownbase .e-list-item .e-list-icon {
-  -webkit-padding-end: 8px;
-          padding-inline-end: 8px;
-}
-
-.e-small .e-dropdownbase .e-list-item .e-list-icon {
-  -webkit-padding-end: 8px;
-          padding-inline-end: 8px;
-}
-
-.e-input-group.e-ddl .e-spinner-pane .e-spinner-inner .e-spin-bootstrap4 .e-path-circle,
-.e-ddl.e-popup .e-filter-parent .e-spinner-pane .e-spinner-inner .e-spin-bootstrap4 .e-path-circle,
-.e-ddl.e-popup .e-spinner-pane .e-spinner-inner .e-spin-bootstrap4 .e-path-circle {
-  stroke-width: 1px;
-}
-
 .e-rtl .e-dropdownbase .e-list-item {
   padding-left: 24px;
   padding-right: 0;
@@ -343,22 +311,6 @@
   background-color: rgb(242.05, 243.9, 245.75);
 }
 
-.e-dropdownbase .e-list-item .e-list-icon {
-  -webkit-padding-end: 8px;
-          padding-inline-end: 8px;
-}
-
-.e-small .e-dropdownbase .e-list-item .e-list-icon {
-  -webkit-padding-end: 8px;
-          padding-inline-end: 8px;
-}
-
-.e-input-group.e-ddl .e-spinner-pane .e-spinner-inner .e-spin-bootstrap4 .e-path-circle,
-.e-ddl.e-popup .e-filter-parent .e-spinner-pane .e-spinner-inner .e-spin-bootstrap4 .e-path-circle,
-.e-ddl.e-popup .e-spinner-pane .e-spinner-inner .e-spin-bootstrap4 .e-path-circle {
-  stroke-width: 1px;
-}
-
 .e-bigger .e-dropdownbase,
 .e-dropdownbase.e-bigger {
   min-height: 45px;

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

@@ -1,4 +1,3 @@
-@use 'ej2-base/styles/definition/bootstrap4' as *;
 @use 'bootstrap4-definition' as *;
-@use 'all.bootstrap4' as *;
-@use 'bigger.bootstrap4' as *;
+@use 'all' as *;
+@use 'bigger' as *;

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

@@ -20,28 +20,6 @@
           padding-inline-end: 6px;
 }
 
-.e-dropdownbase .e-list-group-item,
-.e-fixed-head {
-  font-size: 12px;
-}
-
-.e-small .e-dropdownbase .e-list-group-item,
-.e-small .e-fixed-head,
-.e-small.e-dropdownbase .e-list-group-item,
-.e-small.e-fixed-head {
-  font-size: 10px;
-}
-
-.e-dropdownbase .e-list-item .e-list-icon {
-  -webkit-padding-end: 8px;
-          padding-inline-end: 8px;
-}
-
-.e-small .e-dropdownbase .e-list-item .e-list-icon {
-  -webkit-padding-end: 6px;
-          padding-inline-end: 6px;
-}
-
 .e-dropdownbase {
   display: block;
   height: 100%;
@@ -165,28 +143,6 @@
   padding-right: 12px;
 }
 
-.e-dropdownbase .e-list-group-item,
-.e-fixed-head {
-  font-size: 12px;
-}
-
-.e-small .e-dropdownbase .e-list-group-item,
-.e-small .e-fixed-head,
-.e-small.e-dropdownbase .e-list-group-item,
-.e-small.e-fixed-head {
-  font-size: 10px;
-}
-
-.e-dropdownbase .e-list-item .e-list-icon {
-  -webkit-padding-end: 8px;
-          padding-inline-end: 8px;
-}
-
-.e-small .e-dropdownbase .e-list-item .e-list-icon {
-  -webkit-padding-end: 6px;
-          padding-inline-end: 6px;
-}
-
 .e-rtl .e-dropdownbase .e-list-item {
   padding-left: 16px;
   padding-right: 0;
@@ -367,28 +323,6 @@
   background-color: rgb(68.0034482759, 75.85, 83.6965517241);
 }
 
-.e-dropdownbase .e-list-group-item,
-.e-fixed-head {
-  font-size: 12px;
-}
-
-.e-small .e-dropdownbase .e-list-group-item,
-.e-small .e-fixed-head,
-.e-small.e-dropdownbase .e-list-group-item,
-.e-small.e-fixed-head {
-  font-size: 10px;
-}
-
-.e-dropdownbase .e-list-item .e-list-icon {
-  -webkit-padding-end: 8px;
-          padding-inline-end: 8px;
-}
-
-.e-small .e-dropdownbase .e-list-item .e-list-icon {
-  -webkit-padding-end: 6px;
-          padding-inline-end: 6px;
-}
-
 .e-bigger .e-dropdownbase,
 .e-dropdownbase.e-bigger {
   min-height: 45px;

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

@@ -1,4 +1,3 @@
-@use 'ej2-base/styles/definition/bootstrap5-dark' as *;
 @use 'bootstrap5-dark-definition' as *;
-@use 'all.bootstrap5-dark' as *;
-@use 'bigger.bootstrap5-dark' as *;
+@use 'all' as *;
+@use 'bigger' as *;