npm - @syncfusion/blazor-themes - Versions diffs - 20.3.47 → 20.3.49 - Mend

@syncfusion/blazor-themes 20.3.47 → 20.3.49

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (297) hide show

package/SCSS-Themes/dropdowns/multi-select/fabric.scss CHANGED Viewed

@@ -37,11 +37,14 @@ $ddl-chip-mobile-content-padding: 4px 8px 6px 0 !default;
 $ddl-rtl-chip-mobile-content-padding: 6px 0 6px 8px !default;
 $ddl-chip-padding: 0 0 0 8px !default;
 $ddl-chip-close-top: 8px !default;
-$ddl-chip-close-left: 8px !default;
-$ddl-chip-close-margin: 0 !default;
+$ddl-chip-close-left: 0 !default;
+$ddl-chip-close-margin: 8px 8px 8px 8px !default;
+$ddl-chip-close-rtl-margin: 8px 0 8px 20px !default;
 $ddl-chip-mobile-close-margin: 3px 0 0 !default;
 $ddl-chip-close-square: 26px !default;
+$ddl-chip-close-width: auto !default;
 $ddl-chip-hooker-square: 30px !default;
+$ddl-chip-hooker-width: auto !default;
 $ddl-chip-close-font: 10px !default;
 $ddl-chip-close-mobile-top: 0 !default;
 $ddl-chip-height: 26px !default;
@@ -82,7 +85,7 @@ $ddl-rtl-hooker-left: -4px !default;
 $ddl-chip-close-mob-top: 0 !default;
 $ddl-control-placholder-padding: 0 32px 0 2px !default;
 $ddl-overall-close-top: 10px !default;
-$ddl-overall-close-left: 10px !default;
+$ddl-overall-close-left: 0 !default;
 $ddl-sel-chip-close-mobile-top: 0 !default;
 $ddl-sel-chip-close-mobile-left: 12px !default;
 $ddl-chip-sel-mobile-close-height: 26px !default;
@@ -138,12 +141,14 @@ $ddl-select-all-height-small: 26px !default;
 $ddl-small-chip-height: 20px !default;
 $ddl-chip-small-font-size: 12px !default;
 $ddl-small-chip-close-square: 22px !default;
+$ddl-small-chip-close-width: auto !default;
 $ddl-small-chip-close-font: 8px !default;
 $ddl-control-small-height: 24px !default;
 $ddl-small-input-height: 24px !default;
 $ddl-delim-small-font-size: 13px !default;
-$ddl-small-closer-margin-top: -2.8em !default;
+$ddl-small-closer-margin-top: -3em !default;
 $ddl-chip-close-hooker-small-left: 7px !default;
+$ddl-chip-close-hooker-small-bigger-left: -35px !default;
 $ddl-delimviewheight-small: 24px !default;
 // Touch Small size
@@ -151,6 +156,7 @@ $ddl-select-all-height-bigger-small: 40px !default;
 $ddl-bigger-small-chip-height: 26px !default;
 $ddl-chip-bigger-small-font-size: 12px !default;
 $ddl-bigger-small-chip-close-square: 26px !default;
+$ddl-bigger-small-chip-close-width: auto !default;
 $ddl-bigger-small-chip-close-font: 10px !default;
 $ddl-control-bigger-small-height: 26px !default;
 $ddl-bigger-small-input-height: 34px !default;
@@ -444,7 +450,11 @@ $ddl-closer-margin-top-bigger-small: -3.2em !default;
   font-family: 'e-icons';
   height: $ddl-chip-close-square;
   margin: $ddl-chip-close-margin;
-  width: $ddl-chip-close-square;
+  width: $ddl-chip-close-width;
+}
+.e-rtl .e-multi-select-wrapper .e-chips-close {
+  margin: $ddl-chip-close-rtl-margin;
 }
 .e-multi-select-wrapper .e-mob-chip.e-chips .e-chips-close {
@@ -459,7 +469,7 @@ $ddl-closer-margin-top-bigger-small: -3.2em !default;
   position: absolute;
   right: $ddl-chip-hooker-right;
   top: $ddl-closer-hooker-top;
-  width: $ddl-chip-hooker-square;
+  width: $ddl-chip-hooker-width;
 }
 .e-multiselect .e-down-icon .e-chips-close.e-close-hooker,
@@ -1175,7 +1185,7 @@ ejs-multiselect {
 .e-bigger .e-multi-select-wrapper .e-chips-close {
   @if $ddl-multiselect-skin-name == 'tailwind' {
     height: $ddl-bigger-chip-close-square;
-    width: $ddl-bigger-chip-close-square;
+    width: $ddl-bigger-chip-close-width;
   }
 }
@@ -1197,7 +1207,7 @@ ejs-multiselect {
 .e-small .e-multi-select-wrapper .e-chips-close {
   height: $ddl-small-chip-close-square;
-  width: $ddl-small-chip-close-square;
+  width: $ddl-small-chip-close-width;
 }
 .e-small .e-multi-select-wrapper {
@@ -1266,7 +1276,10 @@ ejs-multiselect {
 .e-bigger.e-small .e-multi-select-wrapper .e-chips-close {
   height: $ddl-bigger-small-chip-close-square;
-  width: $ddl-bigger-small-chip-close-square;
+  width: $ddl-bigger-small-chip-close-width;
+  @if $ddl-multiselect-skin-name == 'bootstrap4' {
+    margin: 3px 10px 10px 0;
+  }
 }
 .e-bigger.e-small .e-multi-select-wrapper {
@@ -2489,6 +2502,10 @@ e-ddl.e-popup.e-multi-select-list-wrapper.e-multiselct-group.e-checkbox .e-list-
   left: $ddl-chip-close-hooker-small-left;
 }
+.e-small.e-bigger .e-multi-select-wrapper .e-close-hooker::before {
+  left: $ddl-chip-close-hooker-small-bigger-left;
+}
 .e-small .e-multi-select-wrapper .e-down-icon .e-close-hooker::before {
   @if $ddl-multiselect-skin-name == 'FluentUI' {
     left: $ddl-small-down-icon-left;

package/SCSS-Themes/dropdowns/multi-select/fluent-dark.scss CHANGED Viewed

@@ -26,8 +26,11 @@ $ddl-chip-padding: 0 8px 0 4px !default;
 $ddl-chip-close-top: 3px !default;
 $ddl-chip-close-left: 6px !default;
 $ddl-chip-close-margin: 0 0 0 !default;
+$ddl-chip-close-rtl-margin: 0 0 0 !default;
 $ddl-chip-close-square: 14px !default;
+$ddl-chip-close-width: 14px !default;
 $ddl-chip-hooker-square: 24px !default;
+$ddl-chip-hooker-width: 24px !default;
 $ddl-chip-close-font: 10px !default;
 $ddl-chip-height: 24px !default;
 $ddl-chip-mobile-height: 30px !default;
@@ -128,18 +131,20 @@ $ddl-select-all-height-small: 26px !default;
 $ddl-small-chip-height: 20px !default;
 $ddl-chip-small-font-size: 12px !default;
 $ddl-small-chip-close-square: 12px !default;
+$ddl-small-chip-close-width: 12px !default;
 $ddl-small-chip-close-font: 8px !default;
 $ddl-control-small-height: 24px !default;
 $ddl-small-input-height: 24px !default;
 $ddl-delim-small-font-size: 12px !default;
 $ddl-small-closer-margin-top: -2em !default;
 $ddl-chip-close-hooker-small-left: 0 !default;
+$ddl-chip-close-hooker-small-bigger-left: 0 !default;
 $ddl-delimviewheight-small: 24px !default;
 $ddl-multiselect-filled-input-min-height-small: 32px !default;
 $ddl-multiselect-filled-float-input-min-height-small: 22px !default;
 $ddl-multiselect-filled-floatlabel-fontsize-small: 10px !default;
 $ddl-multiselect-filled-chip-clear-icon-size-small: 10px !default;
-$ddl-chip-close-small-left: 6px !default;
+$ddl-chip-close-small-left: 0 !default;
 $ddl-chip-close-small-top: 2px !default;
 $ddl-small-down-icon-left: -2px !default;
@@ -149,6 +154,7 @@ $ddl-multiselect-filled-float-input-min-height-bigger: 36px !default;
 $ddl-multiselect-filled-floatlabel-fontsize-bigger: 12px !default;
 $ddl-bigger-chip-close-font: 14px !default;
 $ddl-bigger-chip-close-square: 14px !default;
+$ddl-bigger-chip-close-width: 14px !default;
 $ddl-bigger-chip-down-icon-font: 14px !default;
 // Touch Small size
@@ -156,6 +162,7 @@ $ddl-select-all-height-bigger-small: 40px !default;
 $ddl-bigger-small-chip-height: 26px !default;
 $ddl-chip-bigger-small-font-size: 13px !default;
 $ddl-bigger-small-chip-close-square: 14px !default;
+$ddl-bigger-small-chip-close-width: 14px !default;
 $ddl-bigger-small-chip-close-font: 10px !default;
 $ddl-control-bigger-small-height: 28px !default;
 $ddl-bigger-small-input-height: 32px !default;
@@ -500,7 +507,11 @@ $ddl-small-clear-icon-width: 12px !default;
   font-family: 'e-icons';
   height: $ddl-chip-close-square;
   margin: $ddl-chip-close-margin;
-  width: $ddl-chip-close-square;
+  width: $ddl-chip-close-width;
+}
+.e-rtl .e-multi-select-wrapper .e-chips-close {
+  margin: $ddl-chip-close-rtl-margin;
 }
 .e-multi-select-wrapper .e-mob-chip.e-chips .e-chips-close {
@@ -515,7 +526,7 @@ $ddl-small-clear-icon-width: 12px !default;
   position: absolute;
   right: $ddl-chip-hooker-right;
   top: $ddl-closer-hooker-top;
-  width: $ddl-chip-hooker-square;
+  width: $ddl-chip-hooker-width;
 }
 .e-multiselect .e-down-icon .e-chips-close.e-close-hooker,
@@ -1231,7 +1242,7 @@ ejs-multiselect {
 .e-bigger .e-multi-select-wrapper .e-chips-close {
   @if $ddl-multiselect-skin-name == 'tailwind' {
     height: $ddl-bigger-chip-close-square;
-    width: $ddl-bigger-chip-close-square;
+    width: $ddl-bigger-chip-close-width;
   }
 }
@@ -1253,7 +1264,7 @@ ejs-multiselect {
 .e-small .e-multi-select-wrapper .e-chips-close {
   height: $ddl-small-chip-close-square;
-  width: $ddl-small-chip-close-square;
+  width: $ddl-small-chip-close-width;
 }
 .e-small .e-multi-select-wrapper {
@@ -1322,7 +1333,10 @@ ejs-multiselect {
 .e-bigger.e-small .e-multi-select-wrapper .e-chips-close {
   height: $ddl-bigger-small-chip-close-square;
-  width: $ddl-bigger-small-chip-close-square;
+  width: $ddl-bigger-small-chip-close-width;
+  @if $ddl-multiselect-skin-name == 'bootstrap4' {
+    margin: 3px 10px 10px 0;
+  }
 }
 .e-bigger.e-small .e-multi-select-wrapper {
@@ -2545,6 +2559,10 @@ e-ddl.e-popup.e-multi-select-list-wrapper.e-multiselct-group.e-checkbox .e-list-
   left: $ddl-chip-close-hooker-small-left;
 }
+.e-small.e-bigger .e-multi-select-wrapper .e-close-hooker::before {
+  left: $ddl-chip-close-hooker-small-bigger-left;
+}
 .e-small .e-multi-select-wrapper .e-down-icon .e-close-hooker::before {
   @if $ddl-multiselect-skin-name == 'FluentUI' {
     left: $ddl-small-down-icon-left;

package/SCSS-Themes/dropdowns/multi-select/fluent.scss CHANGED Viewed

@@ -26,8 +26,11 @@ $ddl-chip-padding: 0 8px 0 4px !default;
 $ddl-chip-close-top: 3px !default;
 $ddl-chip-close-left: 6px !default;
 $ddl-chip-close-margin: 0 0 0 !default;
+$ddl-chip-close-rtl-margin: 0 0 0 !default;
 $ddl-chip-close-square: 14px !default;
+$ddl-chip-close-width: 14px !default;
 $ddl-chip-hooker-square: 24px !default;
+$ddl-chip-hooker-width: 24px !default;
 $ddl-chip-close-font: 10px !default;
 $ddl-chip-height: 24px !default;
 $ddl-chip-mobile-height: 30px !default;
@@ -128,18 +131,20 @@ $ddl-select-all-height-small: 26px !default;
 $ddl-small-chip-height: 20px !default;
 $ddl-chip-small-font-size: 12px !default;
 $ddl-small-chip-close-square: 12px !default;
+$ddl-small-chip-close-width: 12px !default;
 $ddl-small-chip-close-font: 8px !default;
 $ddl-control-small-height: 24px !default;
 $ddl-small-input-height: 24px !default;
 $ddl-delim-small-font-size: 12px !default;
 $ddl-small-closer-margin-top: -2em !default;
 $ddl-chip-close-hooker-small-left: 0 !default;
+$ddl-chip-close-hooker-small-bigger-left: 0 !default;
 $ddl-delimviewheight-small: 24px !default;
 $ddl-multiselect-filled-input-min-height-small: 32px !default;
 $ddl-multiselect-filled-float-input-min-height-small: 22px !default;
 $ddl-multiselect-filled-floatlabel-fontsize-small: 10px !default;
 $ddl-multiselect-filled-chip-clear-icon-size-small: 10px !default;
-$ddl-chip-close-small-left: 6px !default;
+$ddl-chip-close-small-left: 0 !default;
 $ddl-chip-close-small-top: 2px !default;
 $ddl-small-down-icon-left: -2px !default;
@@ -149,6 +154,7 @@ $ddl-multiselect-filled-float-input-min-height-bigger: 36px !default;
 $ddl-multiselect-filled-floatlabel-fontsize-bigger: 12px !default;
 $ddl-bigger-chip-close-font: 14px !default;
 $ddl-bigger-chip-close-square: 14px !default;
+$ddl-bigger-chip-close-width: 14px !default;
 $ddl-bigger-chip-down-icon-font: 14px !default;
 // Touch Small size
@@ -156,6 +162,7 @@ $ddl-select-all-height-bigger-small: 40px !default;
 $ddl-bigger-small-chip-height: 26px !default;
 $ddl-chip-bigger-small-font-size: 13px !default;
 $ddl-bigger-small-chip-close-square: 14px !default;
+$ddl-bigger-small-chip-close-width: 14px !default;
 $ddl-bigger-small-chip-close-font: 10px !default;
 $ddl-control-bigger-small-height: 28px !default;
 $ddl-bigger-small-input-height: 32px !default;
@@ -500,7 +507,11 @@ $ddl-small-clear-icon-width: 12px !default;
   font-family: 'e-icons';
   height: $ddl-chip-close-square;
   margin: $ddl-chip-close-margin;
-  width: $ddl-chip-close-square;
+  width: $ddl-chip-close-width;
+}
+.e-rtl .e-multi-select-wrapper .e-chips-close {
+  margin: $ddl-chip-close-rtl-margin;
 }
 .e-multi-select-wrapper .e-mob-chip.e-chips .e-chips-close {
@@ -515,7 +526,7 @@ $ddl-small-clear-icon-width: 12px !default;
   position: absolute;
   right: $ddl-chip-hooker-right;
   top: $ddl-closer-hooker-top;
-  width: $ddl-chip-hooker-square;
+  width: $ddl-chip-hooker-width;
 }
 .e-multiselect .e-down-icon .e-chips-close.e-close-hooker,
@@ -1231,7 +1242,7 @@ ejs-multiselect {
 .e-bigger .e-multi-select-wrapper .e-chips-close {
   @if $ddl-multiselect-skin-name == 'tailwind' {
     height: $ddl-bigger-chip-close-square;
-    width: $ddl-bigger-chip-close-square;
+    width: $ddl-bigger-chip-close-width;
   }
 }
@@ -1253,7 +1264,7 @@ ejs-multiselect {
 .e-small .e-multi-select-wrapper .e-chips-close {
   height: $ddl-small-chip-close-square;
-  width: $ddl-small-chip-close-square;
+  width: $ddl-small-chip-close-width;
 }
 .e-small .e-multi-select-wrapper {
@@ -1322,7 +1333,10 @@ ejs-multiselect {
 .e-bigger.e-small .e-multi-select-wrapper .e-chips-close {
   height: $ddl-bigger-small-chip-close-square;
-  width: $ddl-bigger-small-chip-close-square;
+  width: $ddl-bigger-small-chip-close-width;
+  @if $ddl-multiselect-skin-name == 'bootstrap4' {
+    margin: 3px 10px 10px 0;
+  }
 }
 .e-bigger.e-small .e-multi-select-wrapper {
@@ -2545,6 +2559,10 @@ e-ddl.e-popup.e-multi-select-list-wrapper.e-multiselct-group.e-checkbox .e-list-
   left: $ddl-chip-close-hooker-small-left;
 }
+.e-small.e-bigger .e-multi-select-wrapper .e-close-hooker::before {
+  left: $ddl-chip-close-hooker-small-bigger-left;
+}
 .e-small .e-multi-select-wrapper .e-down-icon .e-close-hooker::before {
   @if $ddl-multiselect-skin-name == 'FluentUI' {
     left: $ddl-small-down-icon-left;

package/SCSS-Themes/dropdowns/multi-select/highcontrast.scss CHANGED Viewed

@@ -37,11 +37,14 @@ $ddl-chip-mobile-content-padding: 6px 8px 6px 0 !default;
 $ddl-rtl-chip-mobile-content-padding: 6px 0 6px 8px !default;
 $ddl-chip-padding: 0 0 0 8px !default;
 $ddl-chip-close-top: 8px !default;
-$ddl-chip-close-left: 8px !default;
-$ddl-chip-close-margin: 0 !default;
+$ddl-chip-close-left: 0 !default;
+$ddl-chip-close-margin: 10px 10px 10px 0 !default;
+$ddl-chip-close-rtl-margin: 8px 0 8px 20px !default;
 $ddl-chip-mobile-close-margin: 3px 0 0 !default;
 $ddl-chip-close-square: 26px !default;
+$ddl-chip-close-width: auto !default;
 $ddl-chip-hooker-square: 30px !default;
+$ddl-chip-hooker-width: auto !default;
 $ddl-chip-close-font: 10px !default;
 $ddl-chip-close-mobile-top: 0 !default;
 $ddl-chip-height: 26px !default;
@@ -82,7 +85,7 @@ $ddl-rtl-hooker-left: -4px !default;
 $ddl-chip-close-mob-top: 0 !default;
 $ddl-control-placholder-padding: 0 32px 0 2px !default;
 $ddl-overall-close-top: 10px !default;
-$ddl-overall-close-left: 10px !default;
+$ddl-overall-close-left: 0 !default;
 $ddl-sel-chip-close-mobile-top: 0 !default;
 $ddl-sel-chip-close-mobile-left: 12px !default;
 $ddl-chip-sel-mobile-close-height: 26px !default;
@@ -141,12 +144,14 @@ $ddl-select-all-height-small: 26px !default;
 $ddl-small-chip-height: 20px !default;
 $ddl-chip-small-font-size: 12px !default;
 $ddl-small-chip-close-square: 22px !default;
+$ddl-small-chip-close-width: auto !default;
 $ddl-small-chip-close-font: 8px !default;
 $ddl-control-small-height: 24px !default;
 $ddl-small-input-height: 24px !default;
 $ddl-delim-small-font-size: 13px !default;
-$ddl-small-closer-margin-top: -2.9em !default;
+$ddl-small-closer-margin-top: -3.2em !default;
 $ddl-chip-close-hooker-small-left: 7px !default;
+$ddl-chip-close-hooker-small-bigger-left: -35px !default;
 $ddl-delimviewheight-small: 24px !default;
 // Touch Small size
@@ -154,12 +159,13 @@ $ddl-select-all-height-bigger-small: 40px !default;
 $ddl-bigger-small-chip-height: 26px !default;
 $ddl-chip-bigger-small-font-size: 12px !default;
 $ddl-bigger-small-chip-close-square: 26px !default;
+$ddl-bigger-small-chip-close-width: auto !default;
 $ddl-bigger-small-chip-close-font: 10px !default;
 $ddl-control-bigger-small-height: 26px !default;
 $ddl-bigger-small-input-height: 34px !default;
 $ddl-delim-bigger-small-font-size: 14px !default;
 $ddl-delimviewheight-bigger-small: 34px !default;
-$ddl-closer-margin-top-bigger-small: -3.2em !default;
+$ddl-closer-margin-top-bigger-small: -3.4em !default;
 @include export-module('multiselect-highcontrast') {
   .e-multi-select-wrapper {
@@ -557,7 +563,11 @@ $ddl-closer-margin-top-bigger-small: -3.2em !default;
   font-family: 'e-icons';
   height: $ddl-chip-close-square;
   margin: $ddl-chip-close-margin;
-  width: $ddl-chip-close-square;
+  width: $ddl-chip-close-width;
+}
+.e-rtl .e-multi-select-wrapper .e-chips-close {
+  margin: $ddl-chip-close-rtl-margin;
 }
 .e-multi-select-wrapper .e-mob-chip.e-chips .e-chips-close {
@@ -572,7 +582,7 @@ $ddl-closer-margin-top-bigger-small: -3.2em !default;
   position: absolute;
   right: $ddl-chip-hooker-right;
   top: $ddl-closer-hooker-top;
-  width: $ddl-chip-hooker-square;
+  width: $ddl-chip-hooker-width;
 }
 .e-multiselect .e-down-icon .e-chips-close.e-close-hooker,
@@ -1288,7 +1298,7 @@ ejs-multiselect {
 .e-bigger .e-multi-select-wrapper .e-chips-close {
   @if $ddl-multiselect-skin-name == 'tailwind' {
     height: $ddl-bigger-chip-close-square;
-    width: $ddl-bigger-chip-close-square;
+    width: $ddl-bigger-chip-close-width;
   }
 }
@@ -1310,7 +1320,7 @@ ejs-multiselect {
 .e-small .e-multi-select-wrapper .e-chips-close {
   height: $ddl-small-chip-close-square;
-  width: $ddl-small-chip-close-square;
+  width: $ddl-small-chip-close-width;
 }
 .e-small .e-multi-select-wrapper {
@@ -1379,7 +1389,10 @@ ejs-multiselect {
 .e-bigger.e-small .e-multi-select-wrapper .e-chips-close {
   height: $ddl-bigger-small-chip-close-square;
-  width: $ddl-bigger-small-chip-close-square;
+  width: $ddl-bigger-small-chip-close-width;
+  @if $ddl-multiselect-skin-name == 'bootstrap4' {
+    margin: 3px 10px 10px 0;
+  }
 }
 .e-bigger.e-small .e-multi-select-wrapper {
@@ -2602,6 +2615,10 @@ e-ddl.e-popup.e-multi-select-list-wrapper.e-multiselct-group.e-checkbox .e-list-
   left: $ddl-chip-close-hooker-small-left;
 }
+.e-small.e-bigger .e-multi-select-wrapper .e-close-hooker::before {
+  left: $ddl-chip-close-hooker-small-bigger-left;
+}
 .e-small .e-multi-select-wrapper .e-down-icon .e-close-hooker::before {
   @if $ddl-multiselect-skin-name == 'FluentUI' {
     left: $ddl-small-down-icon-left;

package/SCSS-Themes/dropdowns/multi-select/material-dark.scss CHANGED Viewed

@@ -41,8 +41,11 @@ $ddl-chip-padding: 0 4px 0 8px !default;
 $ddl-chip-close-top: 0 !default;
 $ddl-chip-close-left: 0 !default;
 $ddl-chip-close-margin: 0 0 0 !default;
+$ddl-chip-close-rtl-margin: 0 0 0 !default;
 $ddl-chip-close-square: 16px !default;
+$ddl-chip-close-width: 16px !default;
 $ddl-chip-hooker-square: 24px !default;
+$ddl-chip-hooker-width: 24px !default;
 $ddl-chip-close-font: 16px !default;
 $ddl-chip-height: 24px !default;
 $ddl-chip-mobile-height: 28px !default;
@@ -141,12 +144,14 @@ $ddl-select-all-height-bigger-small: 40px !default;
 $ddl-small-chip-height: 20px !default;
 $ddl-chip-small-font-size: 12px !default;
 $ddl-small-chip-close-square: 14px !default;
+$ddl-small-chip-close-width: 14px !default;
 $ddl-small-chip-close-font: 14px !default;
 $ddl-control-small-height: 24px !default;
 $ddl-small-input-height: 26px !default;
 $ddl-delim-small-font-size: 12px !default;
 $ddl-small-closer-margin-top: -2.5em !default;
 $ddl-chip-close-hooker-small-left: 6px !default;
+$ddl-chip-close-hooker-small-bigger-left: 6px !default;
 $ddl-delimviewheight-small: 26px !default;
 // Touch Small size
@@ -154,6 +159,7 @@ $ddl-select-all-height-bigger-small: 40px !default;
 $ddl-bigger-small-chip-height: 24px !default;
 $ddl-chip-bigger-small-font-size: 13px !default;
 $ddl-bigger-small-chip-close-square: 16px !default;
+$ddl-bigger-small-chip-close-width: 16px !default;
 $ddl-bigger-small-chip-close-font: 16px !default;
 $ddl-control-bigger-small-height: 28px !default;
 $ddl-bigger-small-input-height: 34px !default;
@@ -491,7 +497,11 @@ $filled-multiselect-chip-hover-bg-color: $grey-700 !default;
   font-family: 'e-icons';
   height: $ddl-chip-close-square;
   margin: $ddl-chip-close-margin;
-  width: $ddl-chip-close-square;
+  width: $ddl-chip-close-width;
+}
+.e-rtl .e-multi-select-wrapper .e-chips-close {
+  margin: $ddl-chip-close-rtl-margin;
 }
 .e-multi-select-wrapper .e-mob-chip.e-chips .e-chips-close {
@@ -506,7 +516,7 @@ $filled-multiselect-chip-hover-bg-color: $grey-700 !default;
   position: absolute;
   right: $ddl-chip-hooker-right;
   top: $ddl-closer-hooker-top;
-  width: $ddl-chip-hooker-square;
+  width: $ddl-chip-hooker-width;
 }
 .e-multiselect .e-down-icon .e-chips-close.e-close-hooker,
@@ -1222,7 +1232,7 @@ ejs-multiselect {
 .e-bigger .e-multi-select-wrapper .e-chips-close {
   @if $ddl-multiselect-skin-name == 'tailwind' {
     height: $ddl-bigger-chip-close-square;
-    width: $ddl-bigger-chip-close-square;
+    width: $ddl-bigger-chip-close-width;
   }
 }
@@ -1244,7 +1254,7 @@ ejs-multiselect {
 .e-small .e-multi-select-wrapper .e-chips-close {
   height: $ddl-small-chip-close-square;
-  width: $ddl-small-chip-close-square;
+  width: $ddl-small-chip-close-width;
 }
 .e-small .e-multi-select-wrapper {
@@ -1313,7 +1323,10 @@ ejs-multiselect {
 .e-bigger.e-small .e-multi-select-wrapper .e-chips-close {
   height: $ddl-bigger-small-chip-close-square;
-  width: $ddl-bigger-small-chip-close-square;
+  width: $ddl-bigger-small-chip-close-width;
+  @if $ddl-multiselect-skin-name == 'bootstrap4' {
+    margin: 3px 10px 10px 0;
+  }
 }
 .e-bigger.e-small .e-multi-select-wrapper {
@@ -2536,6 +2549,10 @@ e-ddl.e-popup.e-multi-select-list-wrapper.e-multiselct-group.e-checkbox .e-list-
   left: $ddl-chip-close-hooker-small-left;
 }
+.e-small.e-bigger .e-multi-select-wrapper .e-close-hooker::before {
+  left: $ddl-chip-close-hooker-small-bigger-left;
+}
 .e-small .e-multi-select-wrapper .e-down-icon .e-close-hooker::before {
   @if $ddl-multiselect-skin-name == 'FluentUI' {
     left: $ddl-small-down-icon-left;

package/SCSS-Themes/dropdowns/multi-select/material.scss CHANGED Viewed

@@ -40,8 +40,11 @@ $ddl-chip-padding: 0 4px 0 8px !default;
 $ddl-chip-close-top: 0 !default;
 $ddl-chip-close-left: 0 !default;
 $ddl-chip-close-margin: 0 0 0 !default;
+$ddl-chip-close-rtl-margin: 0 0 0 !default;
 $ddl-chip-close-square: 16px !default;
+$ddl-chip-close-width: 16px !default;
 $ddl-chip-hooker-square: 24px !default;
+$ddl-chip-hooker-width: 24px !default;
 $ddl-chip-close-font: 16px !default;
 $ddl-chip-height: 24px !default;
 $ddl-chip-mobile-height: 28px !default;
@@ -144,12 +147,14 @@ $ddl-select-all-height-small: 26px !default;
 $ddl-small-chip-height: 20px !default;
 $ddl-chip-small-font-size: 12px !default;
 $ddl-small-chip-close-square: 14px !default;
+$ddl-small-chip-close-width: 14px !default;
 $ddl-small-chip-close-font: 14px !default;
 $ddl-control-small-height: 24px !default;
 $ddl-small-input-height: 26px !default;
 $ddl-delim-small-font-size: 12px !default;
 $ddl-small-closer-margin-top: -2.5em !default;
 $ddl-chip-close-hooker-small-left: 6px !default;
+$ddl-chip-close-hooker-small-bigger-left: 6px !default;
 $ddl-delimviewheight-small: 26px !default;
 $ddl-multiselect-filled-input-min-height-small: 32px !default;
 $ddl-multiselect-filled-float-input-min-height-small: 22px !default;
@@ -166,6 +171,7 @@ $ddl-select-all-height-bigger-small: 40px !default;
 $ddl-bigger-small-chip-height: 22px !default;
 $ddl-chip-bigger-small-font-size: 13px !default;
 $ddl-bigger-small-chip-close-square: 16px !default;
+$ddl-bigger-small-chip-close-width: 16px !default;
 $ddl-bigger-small-chip-close-font: 16px !default;
 $ddl-control-bigger-small-height: 28px !default;
 $ddl-bigger-small-input-height: 28px !default;
@@ -484,7 +490,11 @@ $filled-multiselect-chip-hover-bg-color: darken($grey-300, 7%) !default;
   font-family: 'e-icons';
   height: $ddl-chip-close-square;
   margin: $ddl-chip-close-margin;
-  width: $ddl-chip-close-square;
+  width: $ddl-chip-close-width;
+}
+.e-rtl .e-multi-select-wrapper .e-chips-close {
+  margin: $ddl-chip-close-rtl-margin;
 }
 .e-multi-select-wrapper .e-mob-chip.e-chips .e-chips-close {
@@ -499,7 +509,7 @@ $filled-multiselect-chip-hover-bg-color: darken($grey-300, 7%) !default;
   position: absolute;
   right: $ddl-chip-hooker-right;
   top: $ddl-closer-hooker-top;
-  width: $ddl-chip-hooker-square;
+  width: $ddl-chip-hooker-width;
 }
 .e-multiselect .e-down-icon .e-chips-close.e-close-hooker,
@@ -1215,7 +1225,7 @@ ejs-multiselect {
 .e-bigger .e-multi-select-wrapper .e-chips-close {
   @if $ddl-multiselect-skin-name == 'tailwind' {
     height: $ddl-bigger-chip-close-square;
-    width: $ddl-bigger-chip-close-square;
+    width: $ddl-bigger-chip-close-width;
   }
 }
@@ -1237,7 +1247,7 @@ ejs-multiselect {
 .e-small .e-multi-select-wrapper .e-chips-close {
   height: $ddl-small-chip-close-square;
-  width: $ddl-small-chip-close-square;
+  width: $ddl-small-chip-close-width;
 }
 .e-small .e-multi-select-wrapper {
@@ -1306,7 +1316,10 @@ ejs-multiselect {
 .e-bigger.e-small .e-multi-select-wrapper .e-chips-close {
   height: $ddl-bigger-small-chip-close-square;
-  width: $ddl-bigger-small-chip-close-square;
+  width: $ddl-bigger-small-chip-close-width;
+  @if $ddl-multiselect-skin-name == 'bootstrap4' {
+    margin: 3px 10px 10px 0;
+  }
 }
 .e-bigger.e-small .e-multi-select-wrapper {
@@ -2529,6 +2542,10 @@ e-ddl.e-popup.e-multi-select-list-wrapper.e-multiselct-group.e-checkbox .e-list-
   left: $ddl-chip-close-hooker-small-left;
 }
+.e-small.e-bigger .e-multi-select-wrapper .e-close-hooker::before {
+  left: $ddl-chip-close-hooker-small-bigger-left;
+}
 .e-small .e-multi-select-wrapper .e-down-icon .e-close-hooker::before {
   @if $ddl-multiselect-skin-name == 'FluentUI' {
     left: $ddl-small-down-icon-left;