@syncfusion/ej2-dropdowns 33.2.15 → 34.1.29

package/styles/drop-down-list/_bigger.scss

@@ -1,25 +1,25 @@
-@use 'ej2-base/styles/common/mixin' as *;
+@use 'variables' as *;
 @include export-module('dropdownlist-bigger') {
 
   .e-bigger .e-input-group.e-ddl {
-    #{if(&, '&', '*')} .e-input-filter,
-    #{if(&, '&', '*')} .e-input-filter:focus {
+    & .e-input-filter,
+    & .e-input-filter:focus {
       margin-left: $ddl-bgr-input-filter-margin-left;
     }
   }
 
   .e-bigger .e-ddl#{&}.e-popup {
-    #{if(&, '&', '*')} .e-list-item {
+    & .e-list-item {
       font-size: $ddl-bigger-list-font-size;
     }
 
-    #{if(&, '&', '*')} .e-list-group-item {
+    & .e-list-group-item {
       @if $skin-name != 'tailwind' {
         font-size: $ddl-bigger-list-font-size;
       }
     }
 
-    #{if(&, '&', '*')} .e-input-group {
+    & .e-input-group {
       @if ($skin-name != 'bootstrap5' and $skin-name != 'bootstrap5.3' and $skin-name != 'tailwind' and $skin-name != 'FluentUI' and $skin-name != 'bootstrap4' and $skin-name != 'bootstrap4-dark' and $skin-name != 'Material3') {
         padding: $ddl-input-popup-padding;
       }
@@ -30,17 +30,17 @@
   }
 
   .e-bigger.e-ddl#{&}.e-popup {
-    #{if(&, '&', '*')} .e-list-item {
+    & .e-list-item {
       font-size: $ddl-bigger-list-font-size;
     }
 
-    #{if(&, '&', '*')} .e-list-group-item {
+    & .e-list-group-item {
       @if $skin-name != 'tailwind' {
         font-size: $ddl-bigger-list-font-size;
       }
     }
 
-    #{if(&, '&', '*')} .e-input-group {
+    & .e-input-group {
       @if ($skin-name != 'bootstrap5' and $skin-name != 'bootstrap5.3' and $skin-name != 'tailwind' and $skin-name != 'FluentUI' and $skin-name != 'bootstrap4' and $skin-name != 'bootstrap4-dark') {
         padding: $ddl-input-popup-padding;
       }
@@ -49,11 +49,11 @@
 
   .e-bigger.e-small .e-ddl#{&}.e-popup,
   .e-bigger .e-input-group.e-ddl.e-small {
-    #{if(&, '&', '*')} .e-list-item {
+    & .e-list-item {
       font-size: $ddl-bigger-small-list-font-size;
     }
 
-    #{if(&, '&', '*')} .e-list-group-item {
+    & .e-list-group-item {
       @if $skin-name != 'tailwind' {
         font-size: $ddl-bigger-small-list-font-size;
       }
@@ -62,11 +62,11 @@
 
   .e-bigger.e-small.e-ddl#{&}.e-popup,
   .e-bigger .e-input-group.e-ddl.e-small {
-    #{if(&, '&', '*')} .e-list-item {
+    & .e-list-item {
       font-size: $ddl-bigger-small-list-font-size;
     }
 
-    #{if(&, '&', '*')} .e-list-group-item {
+    & .e-list-group-item {
       @if $skin-name != 'tailwind' {
         font-size: $ddl-bigger-small-list-font-size;
       }
@@ -136,25 +136,25 @@
   
     .e-bigger #{&}.e-popup.e-ddl {
       @at-root {
-        #{if(&, '&', '*')} .e-list-item,
-        #{if(&, '&', '*')} .e-list-group-item,
-        #{if(&, '&', '*')} .e-fixed-head {
+        & .e-list-item,
+        & .e-list-group-item,
+        & .e-fixed-head {
           font-size: 15px;
           line-height: 40px;
           padding-left: 0;
           text-indent: 24px;
         }
   
-        #{if(&, '&', '*')} .e-dd-group .e-list-item {
+        & .e-dd-group .e-list-item {
           padding-left: 4px;
         }
   
-        #{if(&, '&', '*')} .e-input-group {
+        & .e-input-group {
           padding: $ddl-input-popup-padding;
         }
   
-        #{if(&, '&', '*')} .e-input-group input,
-        #{if(&, '&', '*')} .e-input-group input.e-input {
+        & .e-input-group input,
+        & .e-input-group input.e-input {
           height: 38px;
         }
       }
@@ -168,25 +168,25 @@
 
     .e-bigger.e-small .e-ddl#{&}.e-popup {
       @at-root {
-        #{if(&, '&', '*')} .e-list-item,
-        #{if(&, '&', '*')} .e-list-group-item,
-        #{if(&, '&', '*')} .e-fixed-head {
+        & .e-list-item,
+        & .e-list-group-item,
+        & .e-fixed-head {
           font-size: 14px;
           line-height: 34px;
           padding-left: 0;
           text-indent: 16px;
         }
   
-        #{if(&, '&', '*')} .e-dd-group .e-list-item {
+        & .e-dd-group .e-list-item {
           padding-left: 4px;
         }
   
-        #{if(&, '&', '*')} .e-input-group {
+        & .e-input-group {
           padding: $ddl-input-popup-padding;
         }
   
-        #{if(&, '&', '*')} .e-input-group input,
-        #{if(&, '&', '*')} .e-input-group input.e-input {
+        & .e-input-group input,
+        & .e-input-group input.e-input {
           height: 30px;
         }
       }
@@ -218,31 +218,31 @@
   
     .e-bigger #{&}.e-popup.e-ddl {
       @at-root {
-        #{if(&, '&', '*')} .e-list-item {
+        & .e-list-item {
           font-size: 16px;
           line-height: 32px;
           padding-left: 0;
           text-indent: 24px;
         }
   
-        #{if(&, '&', '*')} .e-list-group-item,
-        #{if(&, '&', '*')} .e-fixed-head {
+        & .e-list-group-item,
+        & .e-fixed-head {
           font-size: 14px;
           line-height: 32px;
           padding-left: 0;
           text-indent: 24px;
         }
   
-        #{if(&, '&', '*')} .e-dd-group .e-list-item {
+        & .e-dd-group .e-list-item {
           padding-left: 4px;
         }
   
-        #{if(&, '&', '*')} .e-input-group {
+        & .e-input-group {
           padding: $ddl-input-popup-padding;
         }
   
-        #{if(&, '&', '*')} .e-input-group input,
-        #{if(&, '&', '*')} .e-input-group input.e-input {
+        & .e-input-group input,
+        & .e-input-group input.e-input {
           font-size: 16px;
           height: 36px;
         }
@@ -261,21 +261,21 @@
   
     .e-bigger.e-small .e-ddl#{&}.e-popup {
       @at-root {
-        #{if(&, '&', '*')} .e-list-item,
-        #{if(&, '&', '*')} .e-list-group-item,
-        #{if(&, '&', '*')} .e-fixed-head {
+        & .e-list-item,
+        & .e-list-group-item,
+        & .e-fixed-head {
           font-size: $text-sm;
           line-height: $ddl-bgr-small-popup-line-height;
           padding-left: $ddl-zero-margin-padding;
           text-indent: $ddl-bgr-small-popup-text-indent;
         }
   
-        #{if(&, '&', '*')} .e-dd-group .e-list-item {
+        & .e-dd-group .e-list-item {
           padding-left: $ddl-bgr-group-list-item-padding-left;
         }
   
-        #{if(&, '&', '*')} .e-input-group input,
-        #{if(&, '&', '*')} .e-input-group input.e-input {
+        & .e-input-group input,
+        & .e-input-group input.e-input {
           height: $ddl-input-group-height;
         }
       }
@@ -291,27 +291,27 @@
   
     .e-bigger #{&}.e-popup.e-ddl {
       @at-root {
-        #{if(&, '&', '*')} .e-list-item {
+        & .e-list-item {
           font-size: $text-base;
           line-height: $ddl-bigger-popup-ddl-line-height;
           padding-left: $ddl-zero-margin-padding;
           text-indent: $ddl-bgr-small-popup-text-indent;
         }
   
-        #{if(&, '&', '*')} .e-list-group-item,
-        #{if(&, '&', '*')} .e-fixed-head {
+        & .e-list-group-item,
+        & .e-fixed-head {
           font-size: $text-sm;
           line-height: $ddl-bigger-popup-ddl-line-height;
           padding-left: $ddl-zero-margin-padding;
           text-indent: $ddl-bgr-small-popup-text-indent;
         }
   
-        #{if(&, '&', '*')} .e-dd-group .e-list-item {
+        & .e-dd-group .e-list-item {
           padding-left: $ddl-zero-margin-padding;
         }
   
-        #{if(&, '&', '*')} .e-input-group input,
-        #{if(&, '&', '*')} .e-input-group input.e-input {
+        & .e-input-group input,
+        & .e-input-group input.e-input {
           font-size: $text-base;
           height: $ddl-bigger-popup-ddl-boot-height;
         }
@@ -329,25 +329,25 @@
     }
     .e-bigger .e-ddl#{&}.e-popup {
       @at-root {
-        #{if(&, '&', '*')} .e-list-item,
-        #{if(&, '&', '*')} .e-list-group-item,
-        #{if(&, '&', '*')} .e-fixed-head {
+        & .e-list-item,
+        & .e-list-group-item,
+        & .e-fixed-head {
           font-size: 15px;
           line-height: 45px;
           padding-left: 0;
           text-indent: 16px;
         }
   
-        #{if(&, '&', '*')} .e-dd-group .e-list-item {
+        & .e-dd-group .e-list-item {
           padding-left: 4px;
         }
   
-        #{if(&, '&', '*')} .e-input-group {
+        & .e-input-group {
           padding: $ddl-input-popup-padding;
         }
   
-        #{if(&, '&', '*')} .e-input-group input,
-        #{if(&, '&', '*')} .e-input-group input.e-input {
+        & .e-input-group input,
+        & .e-input-group input.e-input {
           height: 38px;
         }
       }
@@ -355,25 +355,25 @@
     .e-bigger.e-small .e-ddl#{&}.e-popup,
     .e-ddl#{&}.e-popup .e-bigger.e-small {
       @at-root {
-        #{if(&, '&', '*')} .e-list-item,
-        #{if(&, '&', '*')} .e-list-group-item,
-        #{if(&, '&', '*')} .e-fixed-head {
+        & .e-list-item,
+        & .e-list-group-item,
+        & .e-fixed-head {
           font-size: 14px;
           line-height: 40px;
           padding-left: 0;
           text-indent: 16px;
         }
   
-        #{if(&, '&', '*')} .e-dd-group .e-list-item {
+        & .e-dd-group .e-list-item {
           padding-left: 4px;
         }
   
-        #{if(&, '&', '*')} .e-input-group {
+        & .e-input-group {
           padding: $ddl-input-zero-padding;
         }
   
-        #{if(&, '&', '*')} .e-input-group input,
-        #{if(&, '&', '*')} .e-input-group input.e-input {
+        & .e-input-group input,
+        & .e-input-group input.e-input {
           height: 34px;
         }
       }
@@ -386,15 +386,15 @@
   
     .e-bigger #{&}.e-popup.e-ddl {
       @at-root {
-        #{if(&, '&', '*')} .e-list-item {
+        & .e-list-item {
           font-size: $text-base;
           line-height: 32px;
           padding-left: 0;
           text-indent: 16px;
         }
   
-        #{if(&, '&', '*')} .e-list-group-item,
-        #{if(&, '&', '*')} .e-fixed-head {
+        & .e-list-group-item,
+        & .e-fixed-head {
           font-size: $text-sm;
           line-height: 32px;
           padding-left: 0;
@@ -412,21 +412,21 @@
   
     .e-bigger.e-small .e-ddl#{&}.e-popup {
       @at-root {
-        #{if(&, '&', '*')} .e-list-item,
-        #{if(&, '&', '*')} .e-list-group-item,
-        #{if(&, '&', '*')} .e-fixed-head {
+        & .e-list-item,
+        & .e-list-group-item,
+        & .e-fixed-head {
           font-size: $text-sm;
           line-height: 34px;
           padding-left: 0;
           text-indent: 16px;
         }
   
-        // #{if(&, '&', '*')} .e-dd-group .e-list-item {
+        // & .e-dd-group .e-list-item {
         //   padding-left: 4px;
         // }
   
-        #{if(&, '&', '*')} .e-input-group input,
-        #{if(&, '&', '*')} .e-input-group input.e-input {
+        & .e-input-group input,
+        & .e-input-group input.e-input {
           height: 30px;
         }
       }
@@ -441,59 +441,59 @@
       height: 36px;
     }
     .e-ddl#{&} {
-      #{if(&, '&', '*')}.e-popup {
-        .e-bigger #{if(&, '&', '*')} {
-          #{if(&, '&', '*')}.e-ddl-device.e-ddl-device-filter {
+      &.e-popup {
+        .e-bigger & {
+          &.e-ddl-device.e-ddl-device-filter {
             margin-top: 0;
           }
-          #{if(&, '&', '*')} .e-list-item,
-          #{if(&, '&', '*')} .e-list-group-item,
-          #{if(&, '&', '*')} .e-fixed-head {
+          & .e-list-item,
+          & .e-list-group-item,
+          & .e-fixed-head {
             font-size: 15px;
             line-height: 45px;
             padding-left: 0;
             text-indent: 16px;
           }
   
-          #{if(&, '&', '*')} .e-dd-group {
-            #{if(&, '&', '*')} .e-list-item {
+          & .e-dd-group {
+            & .e-list-item {
               padding-left: 4px;
             }
           }
   
-          #{if(&, '&', '*')} .e-input-group {
+          & .e-input-group {
             padding: $ddl-input-popup-padding;
           }
   
-          #{if(&, '&', '*')} .e-input-group {
-            #{if(&, '&', '*')} input {
+          & .e-input-group {
+            & input {
               height: 46px;
             }
           }
         }
   
-        .e-bigger.e-small #{if(&, '&', '*')} {
-          #{if(&, '&', '*')} .e-list-item,
-          #{if(&, '&', '*')} .e-list-group-item,
-          #{if(&, '&', '*')} .e-fixed-head {
+        .e-bigger.e-small & {
+          & .e-list-item,
+          & .e-list-group-item,
+          & .e-fixed-head {
             font-size: 14px;
             line-height: 40px;
             padding-left: 0;
             text-indent: 16px;
           }
   
-          #{if(&, '&', '*')} .e-dd-group {
-            #{if(&, '&', '*')} .e-list-item {
+          & .e-dd-group {
+            & .e-list-item {
               padding-left: 4px;
             }
           }
   
-          #{if(&, '&', '*')} .e-input-group {
+          & .e-input-group {
             padding: $ddl-input-zero-padding;
           }
   
-          #{if(&, '&', '*')} .e-input-group {
-            #{if(&, '&', '*')} input {
+          & .e-input-group {
+            & input {
               height: 34px;
             }
           }

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

@@ -1,6 +1,4 @@
-@use 'ej2-base/styles/common/mixin' as *;
-@use 'ej2-base/styles/definition/bootstrap-dark' as *;
-@forward 'ej2-base/styles/definition/bootstrap-dark';
+@use '@syncfusion/ej2-base/styles/common/base-variables' as *;
 
 //default
 $ddl-input-font-size: 14px !default;
@@ -64,10 +62,10 @@ $ddl-bigger-small-list-font-size: 14px !default;
     box-shadow: 0 6px 12px $ddl-list-box-shadow-color;
     margin-top: 3px;
     @at-root {
-      #{if(&, '&', '*')} .e-input-group {
+      & .e-input-group {
         width: auto;
 
-        #{if(&, '&', '*')} input {
+        & input {
           line-height: 15px;
         }
       }
@@ -82,7 +80,7 @@ $ddl-bigger-small-list-font-size: 14px !default;
     display: flex;
     width: auto;
     @at-root {
-      #{if(&, '&', '*')} .e-back-icon {
+      & .e-back-icon {
         border: 0;
       }
     }

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

@@ -1,6 +1,5 @@
-@use 'ej2-base/styles/common/mixin' as *;
-@use 'ej2-base/styles/definition/bootstrap' as *;
-@forward 'ej2-base/styles/definition/bootstrap';
+@use '@syncfusion/ej2-base/styles/common/base-variables' as *;
+
 $ddl-input-font-size: 14px !default;
 $ddl-input-border: $border-size $border-type !default;
 $ddl-input-font-family: inherit !default;
@@ -62,10 +61,10 @@ $ddl-bigger-small-list-font-size: 14px !default;
     box-shadow: 0 6px 12px $ddl-list-box-shadow-color;
     margin-top: 3px;
     @at-root {
-      #{if(&, '&', '*')} .e-input-group {
+      & .e-input-group {
         width: auto;
 
-        #{if(&, '&', '*')} input {
+        & input {
           line-height: 15px;
         }
       }
@@ -80,7 +79,7 @@ $ddl-bigger-small-list-font-size: 14px !default;
     display: flex;
     width: auto;
     @at-root {
-      #{if(&, '&', '*')} .e-back-icon {
+      & .e-back-icon {
         border: 0;
       }
     }

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

@@ -1,6 +1,5 @@
-@use 'ej2-base/styles/common/mixin' as *;
-@use 'ej2-base/styles/definition/bootstrap4' as *;
-@forward 'ej2-base/styles/definition/bootstrap4';
+@use '@syncfusion/ej2-base/styles/common/base-variables' as *;
+
 $ddl-input-font-size: 14px !default;
 $border-type: solid !default;
 
@@ -66,10 +65,10 @@ $ddl-bigger-small-list-font-size: 14px !default;
     box-shadow: none;
     margin-top: 3px;
     @at-root {
-      #{if(&, '&', '*')} .e-input-group {
+      & .e-input-group {
         width: auto;
 
-        #{if(&, '&', '*')} input {
+        & input {
           line-height: 15px;
         }
       }
@@ -84,7 +83,7 @@ $ddl-bigger-small-list-font-size: 14px !default;
     display: flex;
     width: auto;
     @at-root {
-      #{if(&, '&', '*')} .e-back-icon {
+      & .e-back-icon {
         border: 0;
       }
     }

package/styles/drop-down-list/_bootstrap5-dark-definition.scss

@@ -1,6 +1,5 @@
-@use 'ej2-base/styles/common/mixin' as *;
-@use 'ej2-base/styles/definition/bootstrap5-dark' as *;
-@forward 'ej2-base/styles/definition/bootstrap5-dark';
+@use '@syncfusion/ej2-base/styles/common/base-variables' as *;
+
 $ddl-input-font-size: $text-sm !default;
 $ddl-zero-value: 0 !default;
 $ddl-input-border: 1px $border-light !default;
@@ -75,10 +74,10 @@ $ddl-full-width: 100%;
     box-shadow: none;
     margin-top: 3px;
     @at-root {
-      #{if(&, '&', '*')} .e-input-group {
+      & .e-input-group {
         width: auto;
 
-        #{if(&, '&', '*')} input {
+        & input {
           line-height: 15px;
         }
       }
@@ -93,7 +92,7 @@ $ddl-full-width: 100%;
     display: flex;
     width: auto;
     @at-root {
-      #{if(&, '&', '*')} .e-back-icon {
+      & .e-back-icon {
         border: 0;
       }
     }

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

@@ -1,6 +1,5 @@
-@use 'ej2-base/styles/common/mixin' as *;
-@use 'ej2-base/styles/definition/bootstrap5' as *;
-@forward 'ej2-base/styles/definition/bootstrap5';
+@use '@syncfusion/ej2-base/styles/common/base-variables' as *;
+
 $ddl-input-font-size: $text-sm !default;
 $ddl-zero-value: 0 !default;
 $ddl-input-border: 1px $border-light !default;
@@ -75,10 +74,10 @@ $ddl-full-width: 100%;
     box-shadow: none;
     margin-top: 3px;
     @at-root {
-      #{if(&, '&', '*')} .e-input-group {
+      & .e-input-group {
         width: auto;
 
-        #{if(&, '&', '*')} input {
+        & input {
           line-height: 15px;
         }
       }
@@ -93,7 +92,7 @@ $ddl-full-width: 100%;
     display: flex;
     width: auto;
     @at-root {
-      #{if(&, '&', '*')} .e-back-icon {
+      & .e-back-icon {
         border: 0;
       }
     }

package/styles/drop-down-list/_bootstrap5.3-definition.scss

@@ -1,6 +1,5 @@
-@use 'ej2-base/styles/common/mixin' as *;
-@use 'ej2-base/styles/definition/bootstrap5.3' as *;
-@forward 'ej2-base/styles/definition/bootstrap5.3';
+@use '@syncfusion/ej2-base/styles/common/base-variables' as *;
+
 $ddl-input-font-size: $text-sm !default;
 $ddl-zero-value: 0 !default;
 $ddl-input-border: 1px $border-light !default;
@@ -75,10 +74,10 @@ $ddl-full-width: 100%;
     box-shadow: none;
     margin-top: 3px;
     @at-root {
-      #{if(&, '&', '*')} .e-input-group {
+      & .e-input-group {
         width: auto;
 
-        #{if(&, '&', '*')} input {
+        & input {
           line-height: 15px;
         }
       }
@@ -93,7 +92,7 @@ $ddl-full-width: 100%;
     display: flex;
     width: auto;
     @at-root {
-      #{if(&, '&', '*')} .e-back-icon {
+      & .e-back-icon {
         border: 0;
       }
     }

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

@@ -1,6 +1,4 @@
-@use 'ej2-base/styles/common/mixin' as *;
-@use 'ej2-base/styles/definition/fabric-dark' as *;
-@forward 'ej2-base/styles/definition/fabric-dark';
+@use '@syncfusion/ej2-base/styles/common/base-variables' as *;
 
 //default
 $ddl-input-font-size: 14px !default;
@@ -66,8 +64,8 @@ $ddl-bigger-small-list-font-size: 14px !default;
     box-shadow: 0 0 5px 0 $ddl-list-box-shadow-color;
     margin-top: 1px;
     @at-root {
-      #{if(&, '&', '*')} .e-input-group {
-        #{if(&, '&', '*')} input {
+      & .e-input-group {
+        & input {
           line-height: 15px;
         }
       }

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

@@ -1,6 +1,5 @@
-@use 'ej2-base/styles/common/mixin' as *;
-@use 'ej2-base/styles/definition/fabric' as *;
-@forward 'ej2-base/styles/definition/fabric';
+@use '@syncfusion/ej2-base/styles/common/base-variables' as *;
+
 $ddl-input-font-size: 14px !default;
 $ddl-input-border: $border-size $border-type !default;
 $ddl-input-font-family: inherit !default;
@@ -62,8 +61,8 @@ $ddl-bigger-small-list-font-size: 14px !default;
     box-shadow: 0 0 5px 0 $ddl-list-box-shadow-color;
     margin-top: 1px;
     @at-root {
-      #{if(&, '&', '*')} .e-input-group {
-        #{if(&, '&', '*')} input {
+      & .e-input-group {
+        & input {
           line-height: 15px;
         }
       }