@syncfusion/blazor-themes 20.3.48 → 20.3.50

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 (59) hide show
  1. package/SCSS-Themes/bootstrap-dark.scss +24 -12
  2. package/SCSS-Themes/bootstrap.scss +24 -12
  3. package/SCSS-Themes/bootstrap4.scss +32 -19
  4. package/SCSS-Themes/bootstrap5-dark.scss +27 -14
  5. package/SCSS-Themes/bootstrap5.scss +27 -14
  6. package/SCSS-Themes/dropdowns/multi-select/bootstrap-dark.scss +22 -5
  7. package/SCSS-Themes/dropdowns/multi-select/bootstrap.scss +22 -5
  8. package/SCSS-Themes/dropdowns/multi-select/bootstrap4.scss +30 -12
  9. package/SCSS-Themes/dropdowns/multi-select/bootstrap5-dark.scss +23 -5
  10. package/SCSS-Themes/dropdowns/multi-select/bootstrap5.scss +23 -5
  11. package/SCSS-Themes/dropdowns/multi-select/fabric-dark.scss +26 -9
  12. package/SCSS-Themes/dropdowns/multi-select/fabric.scss +26 -9
  13. package/SCSS-Themes/dropdowns/multi-select/fluent-dark.scss +24 -6
  14. package/SCSS-Themes/dropdowns/multi-select/fluent.scss +24 -6
  15. package/SCSS-Themes/dropdowns/multi-select/highcontrast.scss +27 -10
  16. package/SCSS-Themes/dropdowns/multi-select/material-dark.scss +22 -5
  17. package/SCSS-Themes/dropdowns/multi-select/material.scss +22 -5
  18. package/SCSS-Themes/dropdowns/multi-select/tailwind-dark.scss +23 -5
  19. package/SCSS-Themes/dropdowns/multi-select/tailwind.scss +23 -5
  20. package/SCSS-Themes/fabric-dark.scss +28 -16
  21. package/SCSS-Themes/fabric.scss +28 -16
  22. package/SCSS-Themes/fluent-dark.scss +26 -13
  23. package/SCSS-Themes/fluent.scss +26 -13
  24. package/SCSS-Themes/grids/grid/bootstrap-dark.scss +2 -2
  25. package/SCSS-Themes/grids/grid/bootstrap.scss +2 -2
  26. package/SCSS-Themes/grids/grid/bootstrap4.scss +2 -2
  27. package/SCSS-Themes/grids/grid/bootstrap5-dark.scss +2 -2
  28. package/SCSS-Themes/grids/grid/bootstrap5.scss +2 -2
  29. package/SCSS-Themes/grids/grid/fabric-dark.scss +2 -2
  30. package/SCSS-Themes/grids/grid/fabric.scss +2 -2
  31. package/SCSS-Themes/grids/grid/fluent-dark.scss +2 -2
  32. package/SCSS-Themes/grids/grid/fluent.scss +2 -2
  33. package/SCSS-Themes/grids/grid/highcontrast.scss +2 -2
  34. package/SCSS-Themes/grids/grid/material-dark.scss +2 -2
  35. package/SCSS-Themes/grids/grid/material.scss +2 -2
  36. package/SCSS-Themes/grids/grid/tailwind-dark.scss +2 -2
  37. package/SCSS-Themes/grids/grid/tailwind.scss +2 -2
  38. package/SCSS-Themes/highcontrast.scss +29 -17
  39. package/SCSS-Themes/material-dark.scss +24 -12
  40. package/SCSS-Themes/material.scss +24 -12
  41. package/SCSS-Themes/pivotview/pivotview/bootstrap-dark.scss +0 -5
  42. package/SCSS-Themes/pivotview/pivotview/bootstrap.scss +0 -5
  43. package/SCSS-Themes/pivotview/pivotview/bootstrap4.scss +0 -5
  44. package/SCSS-Themes/pivotview/pivotview/bootstrap5-dark.scss +0 -5
  45. package/SCSS-Themes/pivotview/pivotview/bootstrap5.scss +0 -5
  46. package/SCSS-Themes/pivotview/pivotview/fabric-dark.scss +0 -5
  47. package/SCSS-Themes/pivotview/pivotview/fabric.scss +0 -5
  48. package/SCSS-Themes/pivotview/pivotview/fluent-dark.scss +0 -5
  49. package/SCSS-Themes/pivotview/pivotview/fluent.scss +0 -5
  50. package/SCSS-Themes/pivotview/pivotview/highcontrast.scss +0 -5
  51. package/SCSS-Themes/pivotview/pivotview/material-dark.scss +0 -5
  52. package/SCSS-Themes/pivotview/pivotview/material.scss +0 -5
  53. package/SCSS-Themes/pivotview/pivotview/tailwind-dark.scss +0 -5
  54. package/SCSS-Themes/pivotview/pivotview/tailwind.scss +0 -5
  55. package/SCSS-Themes/popups/dialog/bootstrap5-dark.scss +2 -2
  56. package/SCSS-Themes/popups/dialog/bootstrap5.scss +2 -2
  57. package/SCSS-Themes/tailwind-dark.scss +25 -12
  58. package/SCSS-Themes/tailwind.scss +25 -12
  59. package/package.json +1 -1
package/SCSS-Themes/dropdowns/multi-select/bootstrap5.scss CHANGED
@@ -26,8 +26,11 @@ $ddl-chip-padding: 0 6px 0 8px !default;
26
26
  $ddl-chip-close-top: 0 !default;
27
27
  $ddl-chip-close-left: 0 !default;
28
28
  $ddl-chip-close-margin: 0 0 0 !default;
29
+ $ddl-chip-close-rtl-margin: 0 0 0 !default;
29
30
  $ddl-chip-close-square: 14px !default;
31
+ $ddl-chip-close-width: 14px !default;
30
32
  $ddl-chip-hooker-square: 24px !default;
33
+ $ddl-chip-hooker-width: 24px !default;
31
34
  $ddl-chip-close-font: 14px !default;
32
35
  $ddl-chip-height: 24px !default;
33
36
  $ddl-chip-mobile-height: 30px !default;
@@ -128,12 +131,14 @@ $ddl-select-all-height-small: 26px !default;
128
131
  $ddl-small-chip-height: 20px !default;
129
132
  $ddl-chip-small-font-size: 12px !default;
130
133
  $ddl-small-chip-close-square: 12px !default;
134
+ $ddl-small-chip-close-width: 12px !default;
131
135
  $ddl-small-chip-close-font: 12px !default;
132
136
  $ddl-control-small-height: 24px !default;
133
137
  $ddl-small-input-height: 24px !default;
134
138
  $ddl-delim-small-font-size: 12px !default;
135
139
  $ddl-small-closer-margin-top: -2em !default;
136
140
  $ddl-chip-close-hooker-small-left: 0 !default;
141
+ $ddl-chip-close-hooker-small-bigger-left: 0 !default;
137
142
  $ddl-delimviewheight-small: 24px !default;
138
143
  $ddl-multiselect-filled-input-min-height-small: 32px !default;
139
144
  $ddl-multiselect-filled-float-input-min-height-small: 22px !default;
@@ -146,12 +151,14 @@ $ddl-multiselect-filled-float-input-min-height-bigger: 36px !default;
146
151
  $ddl-multiselect-filled-floatlabel-fontsize-bigger: 12px !default;
147
152
  $ddl-bigger-chip-close-font: 14px !default;
148
153
  $ddl-bigger-chip-close-square: 14px !default;
154
+ $ddl-bigger-chip-close-width: 14px !default;
149
155
 
150
156
  // Touch Small size
151
157
  $ddl-select-all-height-bigger-small: 40px !default;
152
158
  $ddl-bigger-small-chip-height: 26px !default;
153
159
  $ddl-chip-bigger-small-font-size: 13px !default;
154
160
  $ddl-bigger-small-chip-close-square: 14px !default;
161
+ $ddl-bigger-small-chip-close-width: 14px !default;
155
162
  $ddl-bigger-small-chip-close-font: 14px !default;
156
163
  $ddl-control-bigger-small-height: 28px !default;
157
164
  $ddl-bigger-small-input-height: 32px !default;
@@ -489,7 +496,11 @@ $ddl-close-down-icon-left: 35px !default;
489
496
  font-family: 'e-icons';
490
497
  height: $ddl-chip-close-square;
491
498
  margin: $ddl-chip-close-margin;
492
- width: $ddl-chip-close-square;
499
+ width: $ddl-chip-close-width;
500
+ }
501
+
502
+ .e-rtl .e-multi-select-wrapper .e-chips-close {
503
+ margin: $ddl-chip-close-rtl-margin;
493
504
  }
494
505
 
495
506
  .e-multi-select-wrapper .e-mob-chip.e-chips .e-chips-close {
@@ -504,7 +515,7 @@ $ddl-close-down-icon-left: 35px !default;
504
515
  position: absolute;
505
516
  right: $ddl-chip-hooker-right;
506
517
  top: $ddl-closer-hooker-top;
507
- width: $ddl-chip-hooker-square;
518
+ width: $ddl-chip-hooker-width;
508
519
  }
509
520
 
510
521
  .e-multiselect .e-down-icon .e-chips-close.e-close-hooker,
@@ -1220,7 +1231,7 @@ ejs-multiselect {
1220
1231
  .e-bigger .e-multi-select-wrapper .e-chips-close {
1221
1232
  @if $ddl-multiselect-skin-name == 'tailwind' {
1222
1233
  height: $ddl-bigger-chip-close-square;
1223
- width: $ddl-bigger-chip-close-square;
1234
+ width: $ddl-bigger-chip-close-width;
1224
1235
  }
1225
1236
  }
1226
1237
 
@@ -1242,7 +1253,7 @@ ejs-multiselect {
1242
1253
 
1243
1254
  .e-small .e-multi-select-wrapper .e-chips-close {
1244
1255
  height: $ddl-small-chip-close-square;
1245
- width: $ddl-small-chip-close-square;
1256
+ width: $ddl-small-chip-close-width;
1246
1257
  }
1247
1258
 
1248
1259
  .e-small .e-multi-select-wrapper {
@@ -1311,7 +1322,10 @@ ejs-multiselect {
1311
1322
 
1312
1323
  .e-bigger.e-small .e-multi-select-wrapper .e-chips-close {
1313
1324
  height: $ddl-bigger-small-chip-close-square;
1314
- width: $ddl-bigger-small-chip-close-square;
1325
+ width: $ddl-bigger-small-chip-close-width;
1326
+ @if $ddl-multiselect-skin-name == 'bootstrap4' {
1327
+ margin: 3px 10px 10px 0;
1328
+ }
1315
1329
  }
1316
1330
 
1317
1331
  .e-bigger.e-small .e-multi-select-wrapper {
@@ -2534,6 +2548,10 @@ e-ddl.e-popup.e-multi-select-list-wrapper.e-multiselct-group.e-checkbox .e-list-
2534
2548
  left: $ddl-chip-close-hooker-small-left;
2535
2549
  }
2536
2550
 
2551
+ .e-small.e-bigger .e-multi-select-wrapper .e-close-hooker::before {
2552
+ left: $ddl-chip-close-hooker-small-bigger-left;
2553
+ }
2554
+
2537
2555
  .e-small .e-multi-select-wrapper .e-down-icon .e-close-hooker::before {
2538
2556
  @if $ddl-multiselect-skin-name == 'FluentUI' {
2539
2557
  left: $ddl-small-down-icon-left;
package/SCSS-Themes/dropdowns/multi-select/fabric-dark.scss CHANGED
@@ -38,11 +38,14 @@ $ddl-chip-mobile-content-padding: 4px 8px 6px 0 !default;
38
38
  $ddl-rtl-chip-mobile-content-padding: 6px 0 6px 8px !default;
39
39
  $ddl-chip-padding: 0 0 0 8px !default;
40
40
  $ddl-chip-close-top: 8px !default;
41
- $ddl-chip-close-left: 8px !default;
42
- $ddl-chip-close-margin: 0 !default;
41
+ $ddl-chip-close-left: 0 !default;
42
+ $ddl-chip-close-margin: 8px 8px 8px 8px !default;
43
+ $ddl-chip-close-rtl-margin: 8px 0 8px 20px !default;
43
44
  $ddl-chip-mobile-close-margin: 3px 0 0 !default;
44
45
  $ddl-chip-close-square: 26px !default;
46
+ $ddl-chip-close-width: auto !default;
45
47
  $ddl-chip-hooker-square: 30px !default;
48
+ $ddl-chip-hooker-width: auto !default;
46
49
  $ddl-chip-close-font: 10px !default;
47
50
  $ddl-chip-close-mobile-top: 0 !default;
48
51
  $ddl-chip-height: 26px !default;
@@ -83,7 +86,7 @@ $ddl-rtl-hooker-left: -4px !default;
83
86
  $ddl-chip-close-mob-top: 0 !default;
84
87
  $ddl-control-placholder-padding: 0 32px 0 2px !default;
85
88
  $ddl-overall-close-top: 10px !default;
86
- $ddl-overall-close-left: 10px !default;
89
+ $ddl-overall-close-left: 0 !default;
87
90
  $ddl-sel-chip-close-mobile-top: 0 !default;
88
91
  $ddl-sel-chip-close-mobile-left: 12px !default;
89
92
  $ddl-chip-sel-mobile-close-height: 26px !default;
@@ -139,12 +142,14 @@ $ddl-select-all-height-small: 26px !default;
139
142
  $ddl-small-chip-height: 20px !default;
140
143
  $ddl-chip-small-font-size: 12px !default;
141
144
  $ddl-small-chip-close-square: 22px !default;
145
+ $ddl-small-chip-close-width: auto !default;
142
146
  $ddl-small-chip-close-font: 8px !default;
143
147
  $ddl-control-small-height: 24px !default;
144
148
  $ddl-small-input-height: 24px !default;
145
149
  $ddl-delim-small-font-size: 13px !default;
146
- $ddl-small-closer-margin-top: -2.8em !default;
150
+ $ddl-small-closer-margin-top: -3em !default;
147
151
  $ddl-chip-close-hooker-small-left: 7px !default;
152
+ $ddl-chip-close-hooker-small-bigger-left: -35px !default;
148
153
  $ddl-delimviewheight-small: 24px !default;
149
154
 
150
155
  // Touch Small size
@@ -152,6 +157,7 @@ $ddl-select-all-height-bigger-small: 40px !default;
152
157
  $ddl-bigger-small-chip-height: 26px !default;
153
158
  $ddl-chip-bigger-small-font-size: 12px !default;
154
159
  $ddl-bigger-small-chip-close-square: 26px !default;
160
+ $ddl-bigger-small-chip-close-width: auto !default;
155
161
  $ddl-bigger-small-chip-close-font: 10px !default;
156
162
  $ddl-control-bigger-small-height: 26px !default;
157
163
  $ddl-bigger-small-input-height: 34px !default;
@@ -448,7 +454,11 @@ $ddl-closer-margin-top-bigger-small: -3.2em !default;
448
454
  font-family: 'e-icons';
449
455
  height: $ddl-chip-close-square;
450
456
  margin: $ddl-chip-close-margin;
451
- width: $ddl-chip-close-square;
457
+ width: $ddl-chip-close-width;
458
+ }
459
+
460
+ .e-rtl .e-multi-select-wrapper .e-chips-close {
461
+ margin: $ddl-chip-close-rtl-margin;
452
462
  }
453
463
 
454
464
  .e-multi-select-wrapper .e-mob-chip.e-chips .e-chips-close {
@@ -463,7 +473,7 @@ $ddl-closer-margin-top-bigger-small: -3.2em !default;
463
473
  position: absolute;
464
474
  right: $ddl-chip-hooker-right;
465
475
  top: $ddl-closer-hooker-top;
466
- width: $ddl-chip-hooker-square;
476
+ width: $ddl-chip-hooker-width;
467
477
  }
468
478
 
469
479
  .e-multiselect .e-down-icon .e-chips-close.e-close-hooker,
@@ -1179,7 +1189,7 @@ ejs-multiselect {
1179
1189
  .e-bigger .e-multi-select-wrapper .e-chips-close {
1180
1190
  @if $ddl-multiselect-skin-name == 'tailwind' {
1181
1191
  height: $ddl-bigger-chip-close-square;
1182
- width: $ddl-bigger-chip-close-square;
1192
+ width: $ddl-bigger-chip-close-width;
1183
1193
  }
1184
1194
  }
1185
1195
 
@@ -1201,7 +1211,7 @@ ejs-multiselect {
1201
1211
 
1202
1212
  .e-small .e-multi-select-wrapper .e-chips-close {
1203
1213
  height: $ddl-small-chip-close-square;
1204
- width: $ddl-small-chip-close-square;
1214
+ width: $ddl-small-chip-close-width;
1205
1215
  }
1206
1216
 
1207
1217
  .e-small .e-multi-select-wrapper {
@@ -1270,7 +1280,10 @@ ejs-multiselect {
1270
1280
 
1271
1281
  .e-bigger.e-small .e-multi-select-wrapper .e-chips-close {
1272
1282
  height: $ddl-bigger-small-chip-close-square;
1273
- width: $ddl-bigger-small-chip-close-square;
1283
+ width: $ddl-bigger-small-chip-close-width;
1284
+ @if $ddl-multiselect-skin-name == 'bootstrap4' {
1285
+ margin: 3px 10px 10px 0;
1286
+ }
1274
1287
  }
1275
1288
 
1276
1289
  .e-bigger.e-small .e-multi-select-wrapper {
@@ -2493,6 +2506,10 @@ e-ddl.e-popup.e-multi-select-list-wrapper.e-multiselct-group.e-checkbox .e-list-
2493
2506
  left: $ddl-chip-close-hooker-small-left;
2494
2507
  }
2495
2508
 
2509
+ .e-small.e-bigger .e-multi-select-wrapper .e-close-hooker::before {
2510
+ left: $ddl-chip-close-hooker-small-bigger-left;
2511
+ }
2512
+
2496
2513
  .e-small .e-multi-select-wrapper .e-down-icon .e-close-hooker::before {
2497
2514
  @if $ddl-multiselect-skin-name == 'FluentUI' {
2498
2515
  left: $ddl-small-down-icon-left;
package/SCSS-Themes/dropdowns/multi-select/fabric.scss CHANGED
@@ -37,11 +37,14 @@ $ddl-chip-mobile-content-padding: 4px 8px 6px 0 !default;
37
37
  $ddl-rtl-chip-mobile-content-padding: 6px 0 6px 8px !default;
38
38
  $ddl-chip-padding: 0 0 0 8px !default;
39
39
  $ddl-chip-close-top: 8px !default;
40
- $ddl-chip-close-left: 8px !default;
41
- $ddl-chip-close-margin: 0 !default;
40
+ $ddl-chip-close-left: 0 !default;
41
+ $ddl-chip-close-margin: 8px 8px 8px 8px !default;
42
+ $ddl-chip-close-rtl-margin: 8px 0 8px 20px !default;
42
43
  $ddl-chip-mobile-close-margin: 3px 0 0 !default;
43
44
  $ddl-chip-close-square: 26px !default;
45
+ $ddl-chip-close-width: auto !default;
44
46
  $ddl-chip-hooker-square: 30px !default;
47
+ $ddl-chip-hooker-width: auto !default;
45
48
  $ddl-chip-close-font: 10px !default;
46
49
  $ddl-chip-close-mobile-top: 0 !default;
47
50
  $ddl-chip-height: 26px !default;
@@ -82,7 +85,7 @@ $ddl-rtl-hooker-left: -4px !default;
82
85
  $ddl-chip-close-mob-top: 0 !default;
83
86
  $ddl-control-placholder-padding: 0 32px 0 2px !default;
84
87
  $ddl-overall-close-top: 10px !default;
85
- $ddl-overall-close-left: 10px !default;
88
+ $ddl-overall-close-left: 0 !default;
86
89
  $ddl-sel-chip-close-mobile-top: 0 !default;
87
90
  $ddl-sel-chip-close-mobile-left: 12px !default;
88
91
  $ddl-chip-sel-mobile-close-height: 26px !default;
@@ -138,12 +141,14 @@ $ddl-select-all-height-small: 26px !default;
138
141
  $ddl-small-chip-height: 20px !default;
139
142
  $ddl-chip-small-font-size: 12px !default;
140
143
  $ddl-small-chip-close-square: 22px !default;
144
+ $ddl-small-chip-close-width: auto !default;
141
145
  $ddl-small-chip-close-font: 8px !default;
142
146
  $ddl-control-small-height: 24px !default;
143
147
  $ddl-small-input-height: 24px !default;
144
148
  $ddl-delim-small-font-size: 13px !default;
145
- $ddl-small-closer-margin-top: -2.8em !default;
149
+ $ddl-small-closer-margin-top: -3em !default;
146
150
  $ddl-chip-close-hooker-small-left: 7px !default;
151
+ $ddl-chip-close-hooker-small-bigger-left: -35px !default;
147
152
  $ddl-delimviewheight-small: 24px !default;
148
153
 
149
154
  // Touch Small size
@@ -151,6 +156,7 @@ $ddl-select-all-height-bigger-small: 40px !default;
151
156
  $ddl-bigger-small-chip-height: 26px !default;
152
157
  $ddl-chip-bigger-small-font-size: 12px !default;
153
158
  $ddl-bigger-small-chip-close-square: 26px !default;
159
+ $ddl-bigger-small-chip-close-width: auto !default;
154
160
  $ddl-bigger-small-chip-close-font: 10px !default;
155
161
  $ddl-control-bigger-small-height: 26px !default;
156
162
  $ddl-bigger-small-input-height: 34px !default;
@@ -444,7 +450,11 @@ $ddl-closer-margin-top-bigger-small: -3.2em !default;
444
450
  font-family: 'e-icons';
445
451
  height: $ddl-chip-close-square;
446
452
  margin: $ddl-chip-close-margin;
447
- width: $ddl-chip-close-square;
453
+ width: $ddl-chip-close-width;
454
+ }
455
+
456
+ .e-rtl .e-multi-select-wrapper .e-chips-close {
457
+ margin: $ddl-chip-close-rtl-margin;
448
458
  }
449
459
 
450
460
  .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;
459
469
  position: absolute;
460
470
  right: $ddl-chip-hooker-right;
461
471
  top: $ddl-closer-hooker-top;
462
- width: $ddl-chip-hooker-square;
472
+ width: $ddl-chip-hooker-width;
463
473
  }
464
474
 
465
475
  .e-multiselect .e-down-icon .e-chips-close.e-close-hooker,
@@ -1175,7 +1185,7 @@ ejs-multiselect {
1175
1185
  .e-bigger .e-multi-select-wrapper .e-chips-close {
1176
1186
  @if $ddl-multiselect-skin-name == 'tailwind' {
1177
1187
  height: $ddl-bigger-chip-close-square;
1178
- width: $ddl-bigger-chip-close-square;
1188
+ width: $ddl-bigger-chip-close-width;
1179
1189
  }
1180
1190
  }
1181
1191
 
@@ -1197,7 +1207,7 @@ ejs-multiselect {
1197
1207
 
1198
1208
  .e-small .e-multi-select-wrapper .e-chips-close {
1199
1209
  height: $ddl-small-chip-close-square;
1200
- width: $ddl-small-chip-close-square;
1210
+ width: $ddl-small-chip-close-width;
1201
1211
  }
1202
1212
 
1203
1213
  .e-small .e-multi-select-wrapper {
@@ -1266,7 +1276,10 @@ ejs-multiselect {
1266
1276
 
1267
1277
  .e-bigger.e-small .e-multi-select-wrapper .e-chips-close {
1268
1278
  height: $ddl-bigger-small-chip-close-square;
1269
- width: $ddl-bigger-small-chip-close-square;
1279
+ width: $ddl-bigger-small-chip-close-width;
1280
+ @if $ddl-multiselect-skin-name == 'bootstrap4' {
1281
+ margin: 3px 10px 10px 0;
1282
+ }
1270
1283
  }
1271
1284
 
1272
1285
  .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-
2489
2502
  left: $ddl-chip-close-hooker-small-left;
2490
2503
  }
2491
2504
 
2505
+ .e-small.e-bigger .e-multi-select-wrapper .e-close-hooker::before {
2506
+ left: $ddl-chip-close-hooker-small-bigger-left;
2507
+ }
2508
+
2492
2509
  .e-small .e-multi-select-wrapper .e-down-icon .e-close-hooker::before {
2493
2510
  @if $ddl-multiselect-skin-name == 'FluentUI' {
2494
2511
  left: $ddl-small-down-icon-left;
package/SCSS-Themes/dropdowns/multi-select/fluent-dark.scss CHANGED
@@ -26,8 +26,11 @@ $ddl-chip-padding: 0 8px 0 4px !default;
26
26
  $ddl-chip-close-top: 3px !default;
27
27
  $ddl-chip-close-left: 6px !default;
28
28
  $ddl-chip-close-margin: 0 0 0 !default;
29
+ $ddl-chip-close-rtl-margin: 0 0 0 !default;
29
30
  $ddl-chip-close-square: 14px !default;
31
+ $ddl-chip-close-width: 14px !default;
30
32
  $ddl-chip-hooker-square: 24px !default;
33
+ $ddl-chip-hooker-width: 24px !default;
31
34
  $ddl-chip-close-font: 10px !default;
32
35
  $ddl-chip-height: 24px !default;
33
36
  $ddl-chip-mobile-height: 30px !default;
@@ -128,18 +131,20 @@ $ddl-select-all-height-small: 26px !default;
128
131
  $ddl-small-chip-height: 20px !default;
129
132
  $ddl-chip-small-font-size: 12px !default;
130
133
  $ddl-small-chip-close-square: 12px !default;
134
+ $ddl-small-chip-close-width: 12px !default;
131
135
  $ddl-small-chip-close-font: 8px !default;
132
136
  $ddl-control-small-height: 24px !default;
133
137
  $ddl-small-input-height: 24px !default;
134
138
  $ddl-delim-small-font-size: 12px !default;
135
139
  $ddl-small-closer-margin-top: -2em !default;
136
140
  $ddl-chip-close-hooker-small-left: 0 !default;
141
+ $ddl-chip-close-hooker-small-bigger-left: 0 !default;
137
142
  $ddl-delimviewheight-small: 24px !default;
138
143
  $ddl-multiselect-filled-input-min-height-small: 32px !default;
139
144
  $ddl-multiselect-filled-float-input-min-height-small: 22px !default;
140
145
  $ddl-multiselect-filled-floatlabel-fontsize-small: 10px !default;
141
146
  $ddl-multiselect-filled-chip-clear-icon-size-small: 10px !default;
142
- $ddl-chip-close-small-left: 6px !default;
147
+ $ddl-chip-close-small-left: 0 !default;
143
148
  $ddl-chip-close-small-top: 2px !default;
144
149
  $ddl-small-down-icon-left: -2px !default;
145
150
 
@@ -149,6 +154,7 @@ $ddl-multiselect-filled-float-input-min-height-bigger: 36px !default;
149
154
  $ddl-multiselect-filled-floatlabel-fontsize-bigger: 12px !default;
150
155
  $ddl-bigger-chip-close-font: 14px !default;
151
156
  $ddl-bigger-chip-close-square: 14px !default;
157
+ $ddl-bigger-chip-close-width: 14px !default;
152
158
  $ddl-bigger-chip-down-icon-font: 14px !default;
153
159
 
154
160
  // Touch Small size
@@ -156,6 +162,7 @@ $ddl-select-all-height-bigger-small: 40px !default;
156
162
  $ddl-bigger-small-chip-height: 26px !default;
157
163
  $ddl-chip-bigger-small-font-size: 13px !default;
158
164
  $ddl-bigger-small-chip-close-square: 14px !default;
165
+ $ddl-bigger-small-chip-close-width: 14px !default;
159
166
  $ddl-bigger-small-chip-close-font: 10px !default;
160
167
  $ddl-control-bigger-small-height: 28px !default;
161
168
  $ddl-bigger-small-input-height: 32px !default;
@@ -500,7 +507,11 @@ $ddl-small-clear-icon-width: 12px !default;
500
507
  font-family: 'e-icons';
501
508
  height: $ddl-chip-close-square;
502
509
  margin: $ddl-chip-close-margin;
503
- width: $ddl-chip-close-square;
510
+ width: $ddl-chip-close-width;
511
+ }
512
+
513
+ .e-rtl .e-multi-select-wrapper .e-chips-close {
514
+ margin: $ddl-chip-close-rtl-margin;
504
515
  }
505
516
 
506
517
  .e-multi-select-wrapper .e-mob-chip.e-chips .e-chips-close {
@@ -515,7 +526,7 @@ $ddl-small-clear-icon-width: 12px !default;
515
526
  position: absolute;
516
527
  right: $ddl-chip-hooker-right;
517
528
  top: $ddl-closer-hooker-top;
518
- width: $ddl-chip-hooker-square;
529
+ width: $ddl-chip-hooker-width;
519
530
  }
520
531
 
521
532
  .e-multiselect .e-down-icon .e-chips-close.e-close-hooker,
@@ -1231,7 +1242,7 @@ ejs-multiselect {
1231
1242
  .e-bigger .e-multi-select-wrapper .e-chips-close {
1232
1243
  @if $ddl-multiselect-skin-name == 'tailwind' {
1233
1244
  height: $ddl-bigger-chip-close-square;
1234
- width: $ddl-bigger-chip-close-square;
1245
+ width: $ddl-bigger-chip-close-width;
1235
1246
  }
1236
1247
  }
1237
1248
 
@@ -1253,7 +1264,7 @@ ejs-multiselect {
1253
1264
 
1254
1265
  .e-small .e-multi-select-wrapper .e-chips-close {
1255
1266
  height: $ddl-small-chip-close-square;
1256
- width: $ddl-small-chip-close-square;
1267
+ width: $ddl-small-chip-close-width;
1257
1268
  }
1258
1269
 
1259
1270
  .e-small .e-multi-select-wrapper {
@@ -1322,7 +1333,10 @@ ejs-multiselect {
1322
1333
 
1323
1334
  .e-bigger.e-small .e-multi-select-wrapper .e-chips-close {
1324
1335
  height: $ddl-bigger-small-chip-close-square;
1325
- width: $ddl-bigger-small-chip-close-square;
1336
+ width: $ddl-bigger-small-chip-close-width;
1337
+ @if $ddl-multiselect-skin-name == 'bootstrap4' {
1338
+ margin: 3px 10px 10px 0;
1339
+ }
1326
1340
  }
1327
1341
 
1328
1342
  .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-
2545
2559
  left: $ddl-chip-close-hooker-small-left;
2546
2560
  }
2547
2561
 
2562
+ .e-small.e-bigger .e-multi-select-wrapper .e-close-hooker::before {
2563
+ left: $ddl-chip-close-hooker-small-bigger-left;
2564
+ }
2565
+
2548
2566
  .e-small .e-multi-select-wrapper .e-down-icon .e-close-hooker::before {
2549
2567
  @if $ddl-multiselect-skin-name == 'FluentUI' {
2550
2568
  left: $ddl-small-down-icon-left;
package/SCSS-Themes/dropdowns/multi-select/fluent.scss CHANGED
@@ -26,8 +26,11 @@ $ddl-chip-padding: 0 8px 0 4px !default;
26
26
  $ddl-chip-close-top: 3px !default;
27
27
  $ddl-chip-close-left: 6px !default;
28
28
  $ddl-chip-close-margin: 0 0 0 !default;
29
+ $ddl-chip-close-rtl-margin: 0 0 0 !default;
29
30
  $ddl-chip-close-square: 14px !default;
31
+ $ddl-chip-close-width: 14px !default;
30
32
  $ddl-chip-hooker-square: 24px !default;
33
+ $ddl-chip-hooker-width: 24px !default;
31
34
  $ddl-chip-close-font: 10px !default;
32
35
  $ddl-chip-height: 24px !default;
33
36
  $ddl-chip-mobile-height: 30px !default;
@@ -128,18 +131,20 @@ $ddl-select-all-height-small: 26px !default;
128
131
  $ddl-small-chip-height: 20px !default;
129
132
  $ddl-chip-small-font-size: 12px !default;
130
133
  $ddl-small-chip-close-square: 12px !default;
134
+ $ddl-small-chip-close-width: 12px !default;
131
135
  $ddl-small-chip-close-font: 8px !default;
132
136
  $ddl-control-small-height: 24px !default;
133
137
  $ddl-small-input-height: 24px !default;
134
138
  $ddl-delim-small-font-size: 12px !default;
135
139
  $ddl-small-closer-margin-top: -2em !default;
136
140
  $ddl-chip-close-hooker-small-left: 0 !default;
141
+ $ddl-chip-close-hooker-small-bigger-left: 0 !default;
137
142
  $ddl-delimviewheight-small: 24px !default;
138
143
  $ddl-multiselect-filled-input-min-height-small: 32px !default;
139
144
  $ddl-multiselect-filled-float-input-min-height-small: 22px !default;
140
145
  $ddl-multiselect-filled-floatlabel-fontsize-small: 10px !default;
141
146
  $ddl-multiselect-filled-chip-clear-icon-size-small: 10px !default;
142
- $ddl-chip-close-small-left: 6px !default;
147
+ $ddl-chip-close-small-left: 0 !default;
143
148
  $ddl-chip-close-small-top: 2px !default;
144
149
  $ddl-small-down-icon-left: -2px !default;
145
150
 
@@ -149,6 +154,7 @@ $ddl-multiselect-filled-float-input-min-height-bigger: 36px !default;
149
154
  $ddl-multiselect-filled-floatlabel-fontsize-bigger: 12px !default;
150
155
  $ddl-bigger-chip-close-font: 14px !default;
151
156
  $ddl-bigger-chip-close-square: 14px !default;
157
+ $ddl-bigger-chip-close-width: 14px !default;
152
158
  $ddl-bigger-chip-down-icon-font: 14px !default;
153
159
 
154
160
  // Touch Small size
@@ -156,6 +162,7 @@ $ddl-select-all-height-bigger-small: 40px !default;
156
162
  $ddl-bigger-small-chip-height: 26px !default;
157
163
  $ddl-chip-bigger-small-font-size: 13px !default;
158
164
  $ddl-bigger-small-chip-close-square: 14px !default;
165
+ $ddl-bigger-small-chip-close-width: 14px !default;
159
166
  $ddl-bigger-small-chip-close-font: 10px !default;
160
167
  $ddl-control-bigger-small-height: 28px !default;
161
168
  $ddl-bigger-small-input-height: 32px !default;
@@ -500,7 +507,11 @@ $ddl-small-clear-icon-width: 12px !default;
500
507
  font-family: 'e-icons';
501
508
  height: $ddl-chip-close-square;
502
509
  margin: $ddl-chip-close-margin;
503
- width: $ddl-chip-close-square;
510
+ width: $ddl-chip-close-width;
511
+ }
512
+
513
+ .e-rtl .e-multi-select-wrapper .e-chips-close {
514
+ margin: $ddl-chip-close-rtl-margin;
504
515
  }
505
516
 
506
517
  .e-multi-select-wrapper .e-mob-chip.e-chips .e-chips-close {
@@ -515,7 +526,7 @@ $ddl-small-clear-icon-width: 12px !default;
515
526
  position: absolute;
516
527
  right: $ddl-chip-hooker-right;
517
528
  top: $ddl-closer-hooker-top;
518
- width: $ddl-chip-hooker-square;
529
+ width: $ddl-chip-hooker-width;
519
530
  }
520
531
 
521
532
  .e-multiselect .e-down-icon .e-chips-close.e-close-hooker,
@@ -1231,7 +1242,7 @@ ejs-multiselect {
1231
1242
  .e-bigger .e-multi-select-wrapper .e-chips-close {
1232
1243
  @if $ddl-multiselect-skin-name == 'tailwind' {
1233
1244
  height: $ddl-bigger-chip-close-square;
1234
- width: $ddl-bigger-chip-close-square;
1245
+ width: $ddl-bigger-chip-close-width;
1235
1246
  }
1236
1247
  }
1237
1248
 
@@ -1253,7 +1264,7 @@ ejs-multiselect {
1253
1264
 
1254
1265
  .e-small .e-multi-select-wrapper .e-chips-close {
1255
1266
  height: $ddl-small-chip-close-square;
1256
- width: $ddl-small-chip-close-square;
1267
+ width: $ddl-small-chip-close-width;
1257
1268
  }
1258
1269
 
1259
1270
  .e-small .e-multi-select-wrapper {
@@ -1322,7 +1333,10 @@ ejs-multiselect {
1322
1333
 
1323
1334
  .e-bigger.e-small .e-multi-select-wrapper .e-chips-close {
1324
1335
  height: $ddl-bigger-small-chip-close-square;
1325
- width: $ddl-bigger-small-chip-close-square;
1336
+ width: $ddl-bigger-small-chip-close-width;
1337
+ @if $ddl-multiselect-skin-name == 'bootstrap4' {
1338
+ margin: 3px 10px 10px 0;
1339
+ }
1326
1340
  }
1327
1341
 
1328
1342
  .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-
2545
2559
  left: $ddl-chip-close-hooker-small-left;
2546
2560
  }
2547
2561
 
2562
+ .e-small.e-bigger .e-multi-select-wrapper .e-close-hooker::before {
2563
+ left: $ddl-chip-close-hooker-small-bigger-left;
2564
+ }
2565
+
2548
2566
  .e-small .e-multi-select-wrapper .e-down-icon .e-close-hooker::before {
2549
2567
  @if $ddl-multiselect-skin-name == 'FluentUI' {
2550
2568
  left: $ddl-small-down-icon-left;
package/SCSS-Themes/dropdowns/multi-select/highcontrast.scss CHANGED
@@ -37,11 +37,14 @@ $ddl-chip-mobile-content-padding: 6px 8px 6px 0 !default;
37
37
  $ddl-rtl-chip-mobile-content-padding: 6px 0 6px 8px !default;
38
38
  $ddl-chip-padding: 0 0 0 8px !default;
39
39
  $ddl-chip-close-top: 8px !default;
40
- $ddl-chip-close-left: 8px !default;
41
- $ddl-chip-close-margin: 0 !default;
40
+ $ddl-chip-close-left: 0 !default;
41
+ $ddl-chip-close-margin: 10px 10px 10px 0 !default;
42
+ $ddl-chip-close-rtl-margin: 8px 0 8px 20px !default;
42
43
  $ddl-chip-mobile-close-margin: 3px 0 0 !default;
43
44
  $ddl-chip-close-square: 26px !default;
45
+ $ddl-chip-close-width: auto !default;
44
46
  $ddl-chip-hooker-square: 30px !default;
47
+ $ddl-chip-hooker-width: auto !default;
45
48
  $ddl-chip-close-font: 10px !default;
46
49
  $ddl-chip-close-mobile-top: 0 !default;
47
50
  $ddl-chip-height: 26px !default;
@@ -82,7 +85,7 @@ $ddl-rtl-hooker-left: -4px !default;
82
85
  $ddl-chip-close-mob-top: 0 !default;
83
86
  $ddl-control-placholder-padding: 0 32px 0 2px !default;
84
87
  $ddl-overall-close-top: 10px !default;
85
- $ddl-overall-close-left: 10px !default;
88
+ $ddl-overall-close-left: 0 !default;
86
89
  $ddl-sel-chip-close-mobile-top: 0 !default;
87
90
  $ddl-sel-chip-close-mobile-left: 12px !default;
88
91
  $ddl-chip-sel-mobile-close-height: 26px !default;
@@ -141,12 +144,14 @@ $ddl-select-all-height-small: 26px !default;
141
144
  $ddl-small-chip-height: 20px !default;
142
145
  $ddl-chip-small-font-size: 12px !default;
143
146
  $ddl-small-chip-close-square: 22px !default;
147
+ $ddl-small-chip-close-width: auto !default;
144
148
  $ddl-small-chip-close-font: 8px !default;
145
149
  $ddl-control-small-height: 24px !default;
146
150
  $ddl-small-input-height: 24px !default;
147
151
  $ddl-delim-small-font-size: 13px !default;
148
- $ddl-small-closer-margin-top: -2.9em !default;
152
+ $ddl-small-closer-margin-top: -3.2em !default;
149
153
  $ddl-chip-close-hooker-small-left: 7px !default;
154
+ $ddl-chip-close-hooker-small-bigger-left: -35px !default;
150
155
  $ddl-delimviewheight-small: 24px !default;
151
156
 
152
157
  // Touch Small size
@@ -154,12 +159,13 @@ $ddl-select-all-height-bigger-small: 40px !default;
154
159
  $ddl-bigger-small-chip-height: 26px !default;
155
160
  $ddl-chip-bigger-small-font-size: 12px !default;
156
161
  $ddl-bigger-small-chip-close-square: 26px !default;
162
+ $ddl-bigger-small-chip-close-width: auto !default;
157
163
  $ddl-bigger-small-chip-close-font: 10px !default;
158
164
  $ddl-control-bigger-small-height: 26px !default;
159
165
  $ddl-bigger-small-input-height: 34px !default;
160
166
  $ddl-delim-bigger-small-font-size: 14px !default;
161
167
  $ddl-delimviewheight-bigger-small: 34px !default;
162
- $ddl-closer-margin-top-bigger-small: -3.2em !default;
168
+ $ddl-closer-margin-top-bigger-small: -3.4em !default;
163
169
 
164
170
  @include export-module('multiselect-highcontrast') {
165
171
  .e-multi-select-wrapper {
@@ -557,7 +563,11 @@ $ddl-closer-margin-top-bigger-small: -3.2em !default;
557
563
  font-family: 'e-icons';
558
564
  height: $ddl-chip-close-square;
559
565
  margin: $ddl-chip-close-margin;
560
- width: $ddl-chip-close-square;
566
+ width: $ddl-chip-close-width;
567
+ }
568
+
569
+ .e-rtl .e-multi-select-wrapper .e-chips-close {
570
+ margin: $ddl-chip-close-rtl-margin;
561
571
  }
562
572
 
563
573
  .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;
572
582
  position: absolute;
573
583
  right: $ddl-chip-hooker-right;
574
584
  top: $ddl-closer-hooker-top;
575
- width: $ddl-chip-hooker-square;
585
+ width: $ddl-chip-hooker-width;
576
586
  }
577
587
 
578
588
  .e-multiselect .e-down-icon .e-chips-close.e-close-hooker,
@@ -1288,7 +1298,7 @@ ejs-multiselect {
1288
1298
  .e-bigger .e-multi-select-wrapper .e-chips-close {
1289
1299
  @if $ddl-multiselect-skin-name == 'tailwind' {
1290
1300
  height: $ddl-bigger-chip-close-square;
1291
- width: $ddl-bigger-chip-close-square;
1301
+ width: $ddl-bigger-chip-close-width;
1292
1302
  }
1293
1303
  }
1294
1304
 
@@ -1310,7 +1320,7 @@ ejs-multiselect {
1310
1320
 
1311
1321
  .e-small .e-multi-select-wrapper .e-chips-close {
1312
1322
  height: $ddl-small-chip-close-square;
1313
- width: $ddl-small-chip-close-square;
1323
+ width: $ddl-small-chip-close-width;
1314
1324
  }
1315
1325
 
1316
1326
  .e-small .e-multi-select-wrapper {
@@ -1379,7 +1389,10 @@ ejs-multiselect {
1379
1389
 
1380
1390
  .e-bigger.e-small .e-multi-select-wrapper .e-chips-close {
1381
1391
  height: $ddl-bigger-small-chip-close-square;
1382
- width: $ddl-bigger-small-chip-close-square;
1392
+ width: $ddl-bigger-small-chip-close-width;
1393
+ @if $ddl-multiselect-skin-name == 'bootstrap4' {
1394
+ margin: 3px 10px 10px 0;
1395
+ }
1383
1396
  }
1384
1397
 
1385
1398
  .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-
2602
2615
  left: $ddl-chip-close-hooker-small-left;
2603
2616
  }
2604
2617
 
2618
+ .e-small.e-bigger .e-multi-select-wrapper .e-close-hooker::before {
2619
+ left: $ddl-chip-close-hooker-small-bigger-left;
2620
+ }
2621
+
2605
2622
  .e-small .e-multi-select-wrapper .e-down-icon .e-close-hooker::before {
2606
2623
  @if $ddl-multiselect-skin-name == 'FluentUI' {
2607
2624
  left: $ddl-small-down-icon-left;