@syncfusion/ej2-dropdowns 31.2.18 → 32.1.19

package/styles/multi-select/highcontrast.css

@@ -183,7 +183,6 @@
 }
 
 .e-multi-select-wrapper .e-close-hooker::before {
-  font-size: 12px;
   content: "\e7a7";
   cursor: pointer;
   left: 0;
@@ -695,7 +694,7 @@
 }
 
 .e-popup.e-multi-select-list-wrapper.e-rtl .e-dropdownbase.e-rtl.e-dd-group .e-list-item {
-  padding-right: 0;
+  padding-right: 15px;
 }
 
 .e-popup.e-multi-select-list-wrapper.e-multiselect-group.e-rtl .e-dropdownbase.e-rtl.e-dd-group .e-list-group-item {
@@ -718,7 +717,7 @@
 .e-rtl .e-multi-select-list-wrapper .e-selectall-parent,
 .e-multi-select-list-wrapper.e-rtl .e-selectall-parent {
   padding-left: 16px;
-  padding-right: 0;
+  padding-right: 15px;
 }
 
 .e-multi-select-list-wrapper .e-selectall-parent .e-all-text {
@@ -896,7 +895,7 @@ ejs-multiselect {
 
 .e-small .e-filled .e-multi-select-wrapper .e-chips,
 .e-small.e-filled .e-multi-select-wrapper .e-chips {
-  height: 16px;
+  height: 16px 16px;
   margin: 4px 4px 0 0;
   padding-right: 8px;
 }
@@ -1224,12 +1223,13 @@ e-ddl.e-popup.e-multi-select-list-wrapper.e-multiselct-group.e-checkbox .e-list-
 }
 
 .e-bigger .e-multi-select-wrapper .e-chips-close.e-close-hooker {
-  margin-top: -34px;
+  margin-top: -3.5em;
 }
 
 .e-bigger .e-multiselect.e-control-container .e-multi-select-wrapper .e-clear-icon,
 .e-bigger.e-multiselect.e-control-container .e-multi-select-wrapper .e-clear-icon {
-  margin-top: -34px;
+  margin-top: -3.5em;
+  margin-top: -3.2em;
 }
 
 .e-bigger .e-multi-select-wrapper input[type=text],
@@ -1417,7 +1417,7 @@ e-ddl.e-popup.e-multi-select-list-wrapper.e-multiselct-group.e-checkbox .e-list-
 .e-bigger .e-small.e-filled:not(.e-float-input) .e-multi-select-wrapper .e-chips,
 .e-small .e-bigger.e-filled:not(.e-float-input) .e-multi-select-wrapper .e-chips {
   margin: 8px 8px 0 0;
-  padding: 0 8px;
+  padding: 0 8px 0 0;
 }
 
 .e-rtl.e-bigger.e-small.e-filled.e-float-input .e-multi-select-wrapper .e-chips,

package/styles/multi-select/highcontrast.scss

@@ -1,10 +1,10 @@
-@import 'ej2-base/styles/definition/highcontrast.scss';
-@import 'ej2-inputs/styles/input/highcontrast-definition.scss';
-@import 'ej2-popups/styles/popup/highcontrast-definition.scss';
-@import 'ej2-popups/styles/spinner/highcontrast-definition.scss';
-@import 'ej2-buttons/styles/check-box/highcontrast-definition.scss';
-@import '../drop-down-base/highcontrast-definition.scss';
-@import 'highcontrast-definition.scss';
-@import 'icons/highcontrast.scss';
-@import 'all.scss';
-@import 'bigger.scss';
+@use 'ej2-base/styles/definition/highcontrast' as *;
+@use 'ej2-inputs/styles/input/highcontrast-definition' as *;
+@use 'ej2-popups/styles/popup/highcontrast-definition' as *;
+@use 'ej2-popups/styles/spinner/highcontrast-definition' as *;
+@use 'ej2-buttons/styles/check-box/highcontrast-definition' as *;
+@use '../drop-down-base/highcontrast-definition' as *;
+@use 'highcontrast-definition' as *;
+@use 'icons/highcontrast' as *;
+@use 'all' as *;
+@use 'bigger' as *;

package/styles/multi-select/icons/_bds.scss

@@ -1,3 +1,5 @@
+@use 'ej2-base/styles/common/mixin' as *;
+@use '../bds-definition' as *;
 @include export-module('multiselect-bds-icons') {
   .e-multiselect.e-input-group .e-ddl-icon::before {
     content: '\e729';

package/styles/multi-select/icons/_bootstrap-dark.scss

@@ -1,3 +1,5 @@
+@use 'ej2-base/styles/common/mixin' as *;
+@use '../bootstrap-dark-definition' as *;
 @include export-module('multiselect-bootstrap-icons') {
   .e-multiselect.e-input-group .e-ddl-icon::before {
     content: '\e969';

package/styles/multi-select/icons/_bootstrap.scss

@@ -1,3 +1,5 @@
+@use 'ej2-base/styles/common/mixin' as *;
+@use '../bootstrap-definition' as *;
 @include export-module('multiselect-bootstrap-icons') {
   .e-multiselect.e-input-group .e-ddl-icon::before {
     content: '\e969';

package/styles/multi-select/icons/_bootstrap4.scss

@@ -1,3 +1,5 @@
+@use 'ej2-base/styles/common/mixin' as *;
+@use '../bootstrap4-definition' as *;
 @include export-module('multiselect-bootstrap4-icons') {
   .e-multiselect.e-input-group .e-ddl-icon::before {
     content: '\e744';
@@ -14,7 +16,6 @@
   }
 
   .e-multi-select-wrapper .e-close-hooker::before {
-    font-size: 16px;
     content: '\e745';
     cursor: pointer;
     height: $ddl-overall-close-top;

package/styles/multi-select/icons/_bootstrap5-dark.scss

@@ -1 +1 @@
-@import './bootstrap5.scss';
+@use './bootstrap5' as *;

package/styles/multi-select/icons/_bootstrap5.3.scss

@@ -1,3 +1,5 @@
+@use 'ej2-base/styles/common/mixin' as *;
+@use '../bootstrap5.3-definition' as *;
 @include export-module('multiselect-bootstrap5-icons') {
   .e-multiselect.e-input-group .e-ddl-icon::before {
     content: '\e729';
@@ -13,8 +15,6 @@
   }
 
   .e-multi-select-wrapper .e-close-hooker::before {
-    height: 16px;
-    font-size: 16px;
     content: '\e7e7';
     cursor: pointer;
     left: $ddl-overall-close-left;

package/styles/multi-select/icons/_bootstrap5.scss

@@ -1,3 +1,5 @@
+@use 'ej2-base/styles/common/mixin' as *;
+@use '../bootstrap5-definition' as *;
 @include export-module('multiselect-bootstrap5-icons') {
   .e-multiselect.e-input-group .e-ddl-icon::before {
     content: '\e729';

package/styles/multi-select/icons/_fabric-dark.scss

@@ -1,3 +1,5 @@
+@use 'ej2-base/styles/common/mixin' as *;
+@use '../fabric-dark-definition' as *;
 @include export-module('multiselect-fabric-icons') {
   .e-multiselect.e-input-group .e-ddl-icon::before {
     content: '\e966';

package/styles/multi-select/icons/_fabric.scss

@@ -1,3 +1,5 @@
+@use 'ej2-base/styles/common/mixin' as *;
+@use '../fabric-definition' as *;
 @include export-module('multiselect-fabric-icons') {
   .e-multiselect.e-input-group .e-ddl-icon::before {
     content: '\e966';

package/styles/multi-select/icons/_fluent-dark.scss

@@ -1 +1 @@
-@import './fluent.scss';
+@use './fluent' as *;

package/styles/multi-select/icons/_fluent.scss

@@ -1,3 +1,5 @@
+@use 'ej2-base/styles/common/mixin' as *;
+@use '../fluent-definition' as *;
 @include export-module('multiselect-fluent-icons') {
   .e-multiselect.e-input-group .e-ddl-icon::before {
     content: '\e729';

package/styles/multi-select/icons/_fluent2.scss

@@ -1,3 +1,5 @@
+@use 'ej2-base/styles/common/mixin' as *;
+@use '../fluent2-definition' as *;
 @include export-module('multiselect-fluent2-icons') {
   .e-multiselect.e-input-group .e-ddl-icon::before {
     content: '\e729';
@@ -13,8 +15,6 @@
   }
   
   .e-multi-select-wrapper .e-close-hooker::before {
-    height: 18px;
-    font-size: 18px;
     content: '\e7e7';
     cursor: pointer;
     margin: auto;

package/styles/multi-select/icons/_fusionnew.scss

@@ -1,3 +1,5 @@
+@use 'ej2-base/styles/common/mixin' as *;
+@use '../fusionnew-definition' as *;
 @include export-module('multiselect-fusionnew-icons') {
   .e-multiselect.e-input-group .e-ddl-icon::before {
     content: '\e729';

package/styles/multi-select/icons/_highcontrast-light.scss

@@ -1,3 +1,5 @@
+@use 'ej2-base/styles/common/mixin' as *;
+@use '../highcontrast-light-definition' as *;
 @include export-module('multiselect-highcontrast-icons') {
   .e-multiselect.e-input-group .e-ddl-icon::before {
     content: '\e966';

package/styles/multi-select/icons/_highcontrast.scss

@@ -1,3 +1,5 @@
+@use 'ej2-base/styles/common/mixin' as *;
+@use '../highcontrast-definition' as *;
 @include export-module('multiselect-highcontrast-icons') {
   .e-multiselect.e-input-group .e-ddl-icon::before {
     content: '\e966';
@@ -13,7 +15,6 @@
   }
 
   .e-multi-select-wrapper .e-close-hooker::before {
-    font-size: 12px;
     content: '\e7a7';
     cursor: pointer;
     left: $ddl-overall-close-left;

package/styles/multi-select/icons/_material-dark.scss

@@ -1,3 +1,5 @@
+@use 'ej2-base/styles/common/mixin' as *;
+@use '../material-dark-definition' as *;
 @include export-module('multiselect-material-icons') {
   .e-multiselect.e-input-group .e-ddl-icon::before {
     content: '\e969';

package/styles/multi-select/icons/_material.scss

@@ -1,3 +1,5 @@
+@use 'ej2-base/styles/common/mixin' as *;
+@use '../material-definition' as *;
 @include export-module('multiselect-material-icons') {
   .e-multiselect.e-input-group .e-ddl-icon::before {
     content: '\e969';

package/styles/multi-select/icons/_material3-dark.scss

@@ -1 +1 @@
-@import './material3.scss';
+@use './material3' as *;

package/styles/multi-select/icons/_material3.scss

@@ -1,3 +1,5 @@
+@use 'ej2-base/styles/common/mixin' as *;
+@use '../material3-definition' as *;
 @include export-module('multiselect-Material3-icons') {
   .e-multiselect.e-input-group .e-ddl-icon::before {
     content: '\e70d';

package/styles/multi-select/icons/_tailwind-dark.scss

@@ -1 +1 @@
-@import './tailwind.scss';
+@use './tailwind' as *;

package/styles/multi-select/icons/_tailwind.scss

@@ -1,3 +1,5 @@
+@use 'ej2-base/styles/common/mixin' as *;
+@use '../tailwind-definition' as *;
 @include export-module('multiselect-tailwind-icons') {
   .e-multiselect.e-input-group .e-ddl-icon::before {
     content: '\e729';

package/styles/multi-select/icons/_tailwind3.scss

@@ -1,3 +1,5 @@
+@use 'ej2-base/styles/common/mixin' as *;
+@use '../tailwind3-definition' as *;
 @include export-module('multiselect-tailwind3-icons') {
   .e-multiselect.e-input-group .e-ddl-icon::before {
     content: '\e729';
@@ -13,8 +15,6 @@
   }
 
   .e-multi-select-wrapper .e-close-hooker::before {
-    height: 16px;
-    font-size: 16px;
     content: '\e7e7';
     cursor: pointer;
     left: $ddl-overall-close-left;

package/styles/multi-select/material-dark.css

@@ -854,7 +854,7 @@
 }
 
 .e-popup.e-multi-select-list-wrapper.e-rtl .e-dropdownbase.e-rtl.e-dd-group .e-list-item {
-  padding-right: 0;
+  padding-right: 15px;
 }
 
 .e-multi-select-list-wrapper .e-selectall-parent {
@@ -873,7 +873,7 @@
 .e-rtl .e-multi-select-list-wrapper .e-selectall-parent,
 .e-multi-select-list-wrapper.e-rtl .e-selectall-parent {
   padding-left: 16px;
-  padding-right: 0;
+  padding-right: 15px;
 }
 
 .e-multi-select-list-wrapper .e-selectall-parent .e-all-text {
@@ -1279,7 +1279,7 @@ ejs-multiselect {
 
 .e-small .e-filled .e-multi-select-wrapper .e-chips,
 .e-small.e-filled .e-multi-select-wrapper .e-chips {
-  height: 16px;
+  height: 16px 16px;
   margin: 4px 4px 0 0;
   padding-right: 8px;
 }
@@ -2170,7 +2170,7 @@ ejs-multiselect {
 .e-bigger .e-small.e-filled:not(.e-float-input) .e-multi-select-wrapper .e-chips,
 .e-small .e-bigger.e-filled:not(.e-float-input) .e-multi-select-wrapper .e-chips {
   margin: 8px 8px 0 0;
-  padding: 0 8px;
+  padding: 0 8px 0 0;
 }
 
 .e-rtl.e-bigger.e-small.e-filled.e-float-input .e-multi-select-wrapper .e-chips,

package/styles/multi-select/material-dark.scss

@@ -1,10 +1,10 @@
-@import 'ej2-base/styles/definition/material-dark.scss';
-@import 'ej2-inputs/styles/input/material-dark-definition.scss';
-@import 'ej2-popups/styles/popup/material-dark-definition.scss';
-@import 'ej2-popups/styles/spinner/material-dark-definition.scss';
-@import 'ej2-buttons/styles/check-box/material-dark-definition.scss';
-@import '../drop-down-base/material-dark-definition.scss';
-@import 'material-dark-definition.scss';
-@import 'icons/material-dark.scss';
-@import 'all.scss';
-@import 'bigger.scss';
+@use 'ej2-base/styles/definition/material-dark' as *;
+@use 'ej2-inputs/styles/input/material-dark-definition' as *;
+@use 'ej2-popups/styles/popup/material-dark-definition' as *;
+@use 'ej2-popups/styles/spinner/material-dark-definition' as *;
+@use 'ej2-buttons/styles/check-box/material-dark-definition' as *;
+@use '../drop-down-base/material-dark-definition' as *;
+@use 'material-dark-definition' as *;
+@use 'icons/material-dark' as *;
+@use 'all' as *;
+@use 'bigger' as *;

package/styles/multi-select/material.css

@@ -883,7 +883,7 @@
 }
 
 .e-popup.e-multi-select-list-wrapper.e-rtl .e-dropdownbase.e-rtl.e-dd-group .e-list-item {
-  padding-right: 0;
+  padding-right: 15px;
 }
 
 .e-multi-select-list-wrapper .e-selectall-parent {
@@ -902,7 +902,7 @@
 .e-rtl .e-multi-select-list-wrapper .e-selectall-parent,
 .e-multi-select-list-wrapper.e-rtl .e-selectall-parent {
   padding-left: 16px;
-  padding-right: 0;
+  padding-right: 15px;
 }
 
 .e-multi-select-list-wrapper .e-selectall-parent .e-all-text {
@@ -1308,7 +1308,7 @@ ejs-multiselect {
 
 .e-small .e-filled .e-multi-select-wrapper .e-chips,
 .e-small.e-filled .e-multi-select-wrapper .e-chips {
-  height: 16px;
+  height: 16px 16px;
   margin: 4px 4px 0 0;
   padding-right: 8px;
 }
@@ -1719,12 +1719,12 @@ ejs-multiselect {
 }
 
 .e-bigger .e-multi-select-wrapper .e-chips-close.e-close-hooker {
-  margin-top: -32px;
+  margin-top: -3em;
 }
 
 .e-bigger .e-multiselect.e-control-container .e-multi-select-wrapper .e-clear-icon,
 .e-bigger.e-multiselect.e-control-container .e-multi-select-wrapper .e-clear-icon {
-  margin-top: -32px;
+  margin-top: -3em;
 }
 
 .e-bigger .e-multi-select-wrapper input[type=text],
@@ -2194,7 +2194,7 @@ ejs-multiselect {
 .e-bigger .e-small.e-filled:not(.e-float-input) .e-multi-select-wrapper .e-chips,
 .e-small .e-bigger.e-filled:not(.e-float-input) .e-multi-select-wrapper .e-chips {
   margin: 8px 8px 0 0;
-  padding: 0 8px;
+  padding: 0 8px 0 0;
 }
 
 .e-rtl.e-bigger.e-small.e-filled.e-float-input .e-multi-select-wrapper .e-chips,

package/styles/multi-select/material.scss

@@ -1,10 +1,10 @@
-@import 'ej2-base/styles/definition/material.scss';
-@import 'ej2-inputs/styles/input/material-definition.scss';
-@import 'ej2-popups/styles/popup/material-definition.scss';
-@import 'ej2-popups/styles/spinner/material-definition.scss';
-@import 'ej2-buttons/styles/check-box/material-definition.scss';
-@import '../drop-down-base/material-definition.scss';
-@import 'material-definition.scss';
-@import 'icons/material.scss';
-@import 'all.scss';
-@import 'bigger.scss';
+@use 'ej2-base/styles/definition/material' as *;
+@use 'ej2-inputs/styles/input/material-definition' as *;
+@use 'ej2-popups/styles/popup/material-definition' as *;
+@use 'ej2-popups/styles/spinner/material-definition' as *;
+@use 'ej2-buttons/styles/check-box/material-definition' as *;
+@use '../drop-down-base/material-definition' as *;
+@use 'material-definition' as *;
+@use 'icons/material' as *;
+@use 'all' as *;
+@use 'bigger' as *;