@syncfusion/ej2-dropdowns 19.4.56 → 20.1.51

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 (197) hide show
  1. package/CHANGELOG.md +4 -20
  2. package/dist/ej2-dropdowns.umd.min.js +2 -2
  3. package/dist/ej2-dropdowns.umd.min.js.map +1 -1
  4. package/dist/es6/ej2-dropdowns.es2015.js +32 -6
  5. package/dist/es6/ej2-dropdowns.es2015.js.map +1 -1
  6. package/dist/es6/ej2-dropdowns.es5.js +31 -5
  7. package/dist/es6/ej2-dropdowns.es5.js.map +1 -1
  8. package/dist/global/ej2-dropdowns.min.js +2 -2
  9. package/dist/global/ej2-dropdowns.min.js.map +1 -1
  10. package/dist/global/index.d.ts +1 -1
  11. package/package.json +11 -11
  12. package/src/common/incremental-search.d.ts +1 -0
  13. package/src/common/incremental-search.js +4 -0
  14. package/src/drop-down-base/drop-down-base.js +1 -0
  15. package/src/drop-down-tree/drop-down-tree.js +4 -0
  16. package/src/list-box/list-box.js +20 -3
  17. package/src/multi-select/multi-select.js +1 -1
  18. package/styles/auto-complete/_fluent-dark-definition.scss +1 -0
  19. package/styles/auto-complete/bootstrap5-dark.css +7 -0
  20. package/styles/auto-complete/bootstrap5.css +7 -0
  21. package/styles/auto-complete/fluent-dark.css +132 -0
  22. package/styles/auto-complete/fluent-dark.scss +4 -0
  23. package/styles/auto-complete/fluent.css +132 -0
  24. package/styles/auto-complete/fluent.scss +4 -0
  25. package/styles/auto-complete/tailwind-dark.css +1 -57
  26. package/styles/auto-complete/tailwind.css +1 -57
  27. package/styles/bootstrap-dark.css +56 -30
  28. package/styles/bootstrap.css +56 -30
  29. package/styles/bootstrap4.css +56 -30
  30. package/styles/bootstrap5-dark.css +116 -40
  31. package/styles/bootstrap5.css +116 -40
  32. package/styles/combo-box/_fluent-dark-definition.scss +1 -0
  33. package/styles/combo-box/bootstrap5-dark.css +7 -0
  34. package/styles/combo-box/bootstrap5.css +7 -0
  35. package/styles/combo-box/fluent-dark.css +132 -0
  36. package/styles/combo-box/fluent-dark.scss +4 -0
  37. package/styles/combo-box/fluent.css +132 -0
  38. package/styles/combo-box/fluent.scss +4 -0
  39. package/styles/combo-box/tailwind-dark.css +1 -57
  40. package/styles/combo-box/tailwind.css +1 -57
  41. package/styles/drop-down-base/_bootstrap-dark-definition.scss +2 -0
  42. package/styles/drop-down-base/_bootstrap-definition.scss +2 -0
  43. package/styles/drop-down-base/_bootstrap4-definition.scss +2 -0
  44. package/styles/drop-down-base/_bootstrap5-definition.scss +2 -0
  45. package/styles/drop-down-base/_fabric-dark-definition.scss +2 -0
  46. package/styles/drop-down-base/_fabric-definition.scss +2 -0
  47. package/styles/drop-down-base/_fluent-dark-definition.scss +1 -0
  48. package/styles/drop-down-base/_fluent-definition.scss +12 -7
  49. package/styles/drop-down-base/_highcontrast-definition.scss +2 -0
  50. package/styles/drop-down-base/_highcontrast-light-definition.scss +2 -0
  51. package/styles/drop-down-base/_layout.scss +40 -4
  52. package/styles/drop-down-base/_material-dark-definition.scss +2 -0
  53. package/styles/drop-down-base/_material-definition.scss +2 -0
  54. package/styles/drop-down-base/_tailwind-definition.scss +17 -8
  55. package/styles/drop-down-base/_theme.scss +82 -3
  56. package/styles/drop-down-base/bootstrap-dark.css +7 -2
  57. package/styles/drop-down-base/bootstrap.css +7 -2
  58. package/styles/drop-down-base/bootstrap4.css +7 -2
  59. package/styles/drop-down-base/bootstrap5-dark.css +12 -3
  60. package/styles/drop-down-base/bootstrap5.css +12 -3
  61. package/styles/drop-down-base/fabric-dark.css +7 -2
  62. package/styles/drop-down-base/fabric.css +7 -2
  63. package/styles/drop-down-base/fluent-dark.css +397 -0
  64. package/styles/drop-down-base/fluent-dark.scss +3 -0
  65. package/styles/drop-down-base/fluent.css +397 -0
  66. package/styles/drop-down-base/fluent.scss +3 -0
  67. package/styles/drop-down-base/highcontrast-light.css +7 -2
  68. package/styles/drop-down-base/highcontrast.css +7 -2
  69. package/styles/drop-down-base/material-dark.css +7 -2
  70. package/styles/drop-down-base/material.css +7 -2
  71. package/styles/drop-down-base/tailwind-dark.css +103 -14
  72. package/styles/drop-down-base/tailwind.css +103 -14
  73. package/styles/drop-down-list/_bootstrap-dark-definition.scss +1 -1
  74. package/styles/drop-down-list/_bootstrap-definition.scss +1 -1
  75. package/styles/drop-down-list/_bootstrap4-definition.scss +1 -1
  76. package/styles/drop-down-list/_bootstrap5-definition.scss +10 -2
  77. package/styles/drop-down-list/_fabric-dark-definition.scss +1 -1
  78. package/styles/drop-down-list/_fabric-definition.scss +1 -1
  79. package/styles/drop-down-list/_fluent-dark-definition.scss +1 -0
  80. package/styles/drop-down-list/_fluent-definition.scss +10 -19
  81. package/styles/drop-down-list/_highcontrast-definition.scss +1 -1
  82. package/styles/drop-down-list/_highcontrast-light-definition.scss +1 -1
  83. package/styles/drop-down-list/_layout.scss +52 -15
  84. package/styles/drop-down-list/_material-dark-definition.scss +1 -1
  85. package/styles/drop-down-list/_material-definition.scss +1 -1
  86. package/styles/drop-down-list/_tailwind-definition.scss +6 -61
  87. package/styles/drop-down-list/bootstrap-dark.css +28 -6
  88. package/styles/drop-down-list/bootstrap.css +28 -6
  89. package/styles/drop-down-list/bootstrap4.css +28 -6
  90. package/styles/drop-down-list/bootstrap5-dark.css +35 -6
  91. package/styles/drop-down-list/bootstrap5.css +35 -6
  92. package/styles/drop-down-list/fabric-dark.css +28 -6
  93. package/styles/drop-down-list/fabric.css +28 -6
  94. package/styles/drop-down-list/fluent-dark.css +447 -0
  95. package/styles/drop-down-list/fluent-dark.scss +8 -0
  96. package/styles/drop-down-list/fluent.css +447 -0
  97. package/styles/drop-down-list/fluent.scss +8 -0
  98. package/styles/drop-down-list/highcontrast-light.css +28 -6
  99. package/styles/drop-down-list/highcontrast.css +28 -6
  100. package/styles/drop-down-list/icons/_fluent-dark.scss +1 -0
  101. package/styles/drop-down-list/icons/_fluent.scss +1 -1
  102. package/styles/drop-down-list/icons/_tailwind.scss +3 -4
  103. package/styles/drop-down-list/material-dark.css +28 -6
  104. package/styles/drop-down-list/material.css +28 -6
  105. package/styles/drop-down-list/tailwind-dark.css +20 -95
  106. package/styles/drop-down-list/tailwind.css +20 -95
  107. package/styles/drop-down-tree/_bootstrap5-definition.scss +1 -1
  108. package/styles/drop-down-tree/_fluent-dark-definition.scss +1 -0
  109. package/styles/drop-down-tree/_fluent-definition.scss +25 -30
  110. package/styles/drop-down-tree/_layout.scss +94 -27
  111. package/styles/drop-down-tree/_tailwind-definition.scss +2 -1
  112. package/styles/drop-down-tree/_theme.scss +9 -4
  113. package/styles/drop-down-tree/bootstrap5-dark.css +6 -2
  114. package/styles/drop-down-tree/bootstrap5.css +6 -2
  115. package/styles/drop-down-tree/fluent-dark.css +599 -0
  116. package/styles/drop-down-tree/fluent-dark.scss +9 -0
  117. package/styles/drop-down-tree/fluent.css +599 -0
  118. package/styles/drop-down-tree/fluent.scss +9 -0
  119. package/styles/drop-down-tree/icons/_fluent-dark.scss +1 -0
  120. package/styles/drop-down-tree/icons/_fluent.scss +1 -1
  121. package/styles/drop-down-tree/icons/_tailwind-dark.scss +2 -2
  122. package/styles/drop-down-tree/icons/_tailwind.scss +2 -2
  123. package/styles/drop-down-tree/tailwind-dark.css +15 -6
  124. package/styles/drop-down-tree/tailwind.css +15 -6
  125. package/styles/fabric-dark.css +56 -30
  126. package/styles/fabric.css +56 -30
  127. package/styles/fluent-dark.css +3602 -0
  128. package/styles/fluent-dark.scss +7 -0
  129. package/styles/fluent.css +3602 -0
  130. package/styles/fluent.scss +7 -0
  131. package/styles/highcontrast-light.css +58 -31
  132. package/styles/highcontrast.css +58 -31
  133. package/styles/list-box/_bootstrap-dark-definition.scss +98 -102
  134. package/styles/list-box/_bootstrap-definition.scss +94 -98
  135. package/styles/list-box/_bootstrap4-definition.scss +98 -102
  136. package/styles/list-box/_bootstrap5-definition.scss +94 -99
  137. package/styles/list-box/_fabric-dark-definition.scss +98 -102
  138. package/styles/list-box/_fabric-definition.scss +94 -98
  139. package/styles/list-box/_fluent-dark-definition.scss +1 -0
  140. package/styles/list-box/_fluent-definition.scss +95 -100
  141. package/styles/list-box/_highcontrast-definition.scss +94 -98
  142. package/styles/list-box/_highcontrast-light-definition.scss +98 -102
  143. package/styles/list-box/_layout.scss +37 -37
  144. package/styles/list-box/_material-dark-definition.scss +98 -102
  145. package/styles/list-box/_material-definition.scss +94 -98
  146. package/styles/list-box/_tailwind-definition.scss +95 -99
  147. package/styles/list-box/_theme.scss +77 -85
  148. package/styles/list-box/bootstrap-dark.css +2 -12
  149. package/styles/list-box/bootstrap.css +2 -12
  150. package/styles/list-box/bootstrap4.css +2 -12
  151. package/styles/list-box/bootstrap5-dark.css +5 -15
  152. package/styles/list-box/bootstrap5.css +5 -15
  153. package/styles/list-box/fabric-dark.css +2 -12
  154. package/styles/list-box/fabric.css +2 -12
  155. package/styles/list-box/fluent-dark.css +895 -0
  156. package/styles/list-box/fluent-dark.scss +5 -0
  157. package/styles/list-box/fluent.css +895 -0
  158. package/styles/list-box/fluent.scss +5 -0
  159. package/styles/list-box/highcontrast-light.css +2 -12
  160. package/styles/list-box/highcontrast.css +2 -12
  161. package/styles/list-box/icons/_fluent-dark.scss +1 -0
  162. package/styles/list-box/icons/_tailwind-dark.scss +7 -7
  163. package/styles/list-box/icons/_tailwind.scss +7 -7
  164. package/styles/list-box/material-dark.css +4 -14
  165. package/styles/list-box/material.css +4 -14
  166. package/styles/list-box/tailwind-dark.css +17 -24
  167. package/styles/list-box/tailwind.css +17 -24
  168. package/styles/material-dark.css +58 -32
  169. package/styles/material.css +58 -32
  170. package/styles/multi-select/_bootstrap5-definition.scss +8 -4
  171. package/styles/multi-select/_fluent-dark-definition.scss +1 -0
  172. package/styles/multi-select/_fluent-definition.scss +30 -16
  173. package/styles/multi-select/_layout.scss +276 -25
  174. package/styles/multi-select/_tailwind-definition.scss +61 -43
  175. package/styles/multi-select/_theme.scss +79 -15
  176. package/styles/multi-select/bootstrap-dark.css +19 -10
  177. package/styles/multi-select/bootstrap.css +19 -10
  178. package/styles/multi-select/bootstrap4.css +19 -10
  179. package/styles/multi-select/bootstrap5-dark.css +58 -14
  180. package/styles/multi-select/bootstrap5.css +58 -14
  181. package/styles/multi-select/fabric-dark.css +19 -10
  182. package/styles/multi-select/fabric.css +19 -10
  183. package/styles/multi-select/fluent-dark.css +1416 -0
  184. package/styles/multi-select/fluent-dark.scss +9 -0
  185. package/styles/multi-select/fluent.css +1416 -0
  186. package/styles/multi-select/fluent.scss +9 -0
  187. package/styles/multi-select/highcontrast-light.css +21 -11
  188. package/styles/multi-select/highcontrast.css +21 -11
  189. package/styles/multi-select/icons/_fluent-dark.scss +1 -0
  190. package/styles/multi-select/icons/_fluent.scss +32 -3
  191. package/styles/multi-select/icons/_tailwind.scss +3 -3
  192. package/styles/multi-select/material-dark.css +19 -10
  193. package/styles/multi-select/material.css +19 -10
  194. package/styles/multi-select/tailwind-dark.css +166 -126
  195. package/styles/multi-select/tailwind.css +166 -126
  196. package/styles/tailwind-dark.css +297 -253
  197. package/styles/tailwind.css +297 -253
@@ -43,9 +43,13 @@
43
43
  }
44
44
 
45
45
  .e-bigger .e-dropdownbase .e-list-item,
46
+ .e-dropdownbase.e-bigger .e-list-item {
47
+ line-height: 32px;
48
+ text-indent: 16px;
49
+ }
50
+
46
51
  .e-bigger .e-dropdownbase .e-list-group-item,
47
52
  .e-bigger .e-dropdownbase .e-fixed-head,
48
- .e-dropdownbase.e-bigger .e-list-item,
49
53
  .e-dropdownbase.e-bigger .e-list-group-item,
50
54
  .e-dropdownbase.e-bigger .e-fixed-head {
51
55
  line-height: 32px;
@@ -180,6 +184,7 @@
180
184
  }
181
185
 
182
186
  .e-dropdownbase .e-list-item {
187
+ -webkit-tap-highlight-color: transparent;
183
188
  background-color: #fff;
184
189
  border-bottom: 0;
185
190
  border-color: #dee2e6;
@@ -227,6 +232,10 @@
227
232
  background-color: #e9ecef;
228
233
  }
229
234
 
235
+ .e-dropdownbase .e-list-item.e-active:last-child {
236
+ border-radius: 2px;
237
+ }
238
+
230
239
  .e-bigger .e-dropdownbase .e-list-group-item,
231
240
  .e-bigger .e-dropdownbase .e-fixed-head {
232
241
  font-size: 16px;
@@ -348,10 +357,10 @@
348
357
  border-color: #dee2e6;
349
358
  color: #212529;
350
359
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
351
- font-size: 14px;
352
- padding-right: 16px;
353
360
  text-indent: 12px;
354
361
  color: #6c757d;
362
+ font-size: 14px;
363
+ padding-right: 16px;
355
364
  }
356
365
 
357
366
  .e-ddl.e-popup.e-multiselect-group .e-list-group-item.e-item-focus {
@@ -480,6 +489,13 @@
480
489
  color: #6c757d;
481
490
  }
482
491
 
492
+ .e-input-group.e-ddl.e-readonly .e-input[readonly] ~ span.e-input-group-icon.e-ddl-icon.e-search-icon,
493
+ .e-input-group.e-control-wrapper.e-readonly .e-input[readonly] ~ span.e-input-group-icon.e-ddl-icon.e-search-icon,
494
+ .e-float-input.e-ddl.e-readonly .e-input[readonly] ~ span.e-input-group-icon.e-ddl-icon.e-search-icon,
495
+ .e-float-input.e-control-wrapper.e-ddl.e-readonly .e-input[readonly] ~ span.e-input-group-icon.e-ddl-icon.e-search-icon {
496
+ background: #e9ecef;
497
+ }
498
+
483
499
  .e-input-group:not(.e-disabled) .e-control.e-dropdownlist ~ .e-ddl-icon,
484
500
  .e-input-group.e-disabled.e-ddl .e-control.e-dropdownlist ~ .e-input-group-icon,
485
501
  .e-control.e-dropdownlist .e-input-group.e-disabled.e-ddl .e-input-group-icon,
@@ -554,12 +570,18 @@
554
570
  margin-left: -20px;
555
571
  }
556
572
 
557
- .e-bigger .e-ddl.e-popup .e-list-item,
573
+ .e-bigger .e-ddl.e-popup .e-list-item {
574
+ font-size: 16px;
575
+ }
576
+
558
577
  .e-bigger .e-ddl.e-popup .e-list-group-item {
559
578
  font-size: 16px;
560
579
  }
561
580
 
562
- .e-bigger.e-ddl.e-popup .e-list-item,
581
+ .e-bigger.e-ddl.e-popup .e-list-item {
582
+ font-size: 16px;
583
+ }
584
+
563
585
  .e-bigger.e-ddl.e-popup .e-list-group-item {
564
586
  font-size: 16px;
565
587
  }
@@ -574,6 +596,10 @@
574
596
  top: 0;
575
597
  }
576
598
 
599
+ .e-popup-full-page .e-popup-full-page.e-ddl.e-popup.e-ddl-device-filter {
600
+ margin: 0;
601
+ }
602
+
577
603
  .e-ddl.e-control-wrapper .e-ddl-disable-icon {
578
604
  position: relative;
579
605
  }
@@ -718,29 +744,41 @@ ejs-dropdownlist {
718
744
  }
719
745
 
720
746
  .e-small .e-ddl.e-popup .e-list-item,
747
+ .e-input-group.e-ddl.e-small .e-list-item {
748
+ font-size: 12px;
749
+ }
750
+
721
751
  .e-small .e-ddl.e-popup .e-list-group-item,
722
- .e-input-group.e-ddl.e-small .e-list-item,
723
752
  .e-input-group.e-ddl.e-small .e-list-group-item {
724
753
  font-size: 12px;
725
754
  }
726
755
 
727
756
  .e-small.e-ddl.e-popup .e-list-item,
757
+ .e-input-group.e-ddl.e-small .e-list-item {
758
+ font-size: 12px;
759
+ }
760
+
728
761
  .e-small.e-ddl.e-popup .e-list-group-item,
729
- .e-input-group.e-ddl.e-small .e-list-item,
730
762
  .e-input-group.e-ddl.e-small .e-list-group-item {
731
763
  font-size: 12px;
732
764
  }
733
765
 
734
766
  .e-bigger.e-small .e-ddl.e-popup .e-list-item,
767
+ .e-bigger .e-input-group.e-ddl.e-small .e-list-item {
768
+ font-size: 14px;
769
+ }
770
+
735
771
  .e-bigger.e-small .e-ddl.e-popup .e-list-group-item,
736
- .e-bigger .e-input-group.e-ddl.e-small .e-list-item,
737
772
  .e-bigger .e-input-group.e-ddl.e-small .e-list-group-item {
738
773
  font-size: 14px;
739
774
  }
740
775
 
741
776
  .e-bigger.e-small.e-ddl.e-popup .e-list-item,
777
+ .e-bigger .e-input-group.e-ddl.e-small .e-list-item {
778
+ font-size: 14px;
779
+ }
780
+
742
781
  .e-bigger.e-small.e-ddl.e-popup .e-list-group-item,
743
- .e-bigger .e-input-group.e-ddl.e-small .e-list-item,
744
782
  .e-bigger .e-input-group.e-ddl.e-small .e-list-group-item {
745
783
  font-size: 14px;
746
784
  }
@@ -968,6 +1006,10 @@ ejs-dropdownlist {
968
1006
  position: absolute;
969
1007
  }
970
1008
 
1009
+ .e-ddt.e-popup .e-checkbox-wrapper .e-frame {
1010
+ background-color: transparent;
1011
+ }
1012
+
971
1013
  .e-ddt.e-popup .e-selectall-parent {
972
1014
  border-bottom: 1px solid;
973
1015
  cursor: pointer;
@@ -1053,7 +1095,7 @@ ejs-dropdownlist {
1053
1095
 
1054
1096
  .e-ddt.e-popup .e-treeview > .e-ul {
1055
1097
  overflow: hidden;
1056
- padding: 0 8px;
1098
+ padding: 6px 8px;
1057
1099
  }
1058
1100
 
1059
1101
  .e-ddt.e-popup .e-ddt-footer,
@@ -1243,7 +1285,7 @@ ejs-dropdownlist {
1243
1285
 
1244
1286
  .e-bigger .e-ddt.e-popup .e-treeview > .e-ul,
1245
1287
  .e-ddt.e-bigger.e-popup .e-treeview > .e-ul {
1246
- padding: 0 16px;
1288
+ padding: 8px 16px;
1247
1289
  }
1248
1290
 
1249
1291
  .e-bigger .e-ddt.e-rtl.e-show-dd-icon .e-chips-wrapper .e-chips:last-child,
@@ -1344,7 +1386,7 @@ ejs-dropdownlist {
1344
1386
  }
1345
1387
 
1346
1388
  .e-multiselect .e-input-group-icon.e-ddl-icon {
1347
- border-radius: 0 4px 4px 0;
1389
+ border-radius: 0 2px 2px 0;
1348
1390
  border-right-width: 0;
1349
1391
  }
1350
1392
 
@@ -1411,12 +1453,14 @@ ejs-dropdownlist {
1411
1453
  width: 100%;
1412
1454
  }
1413
1455
 
1414
- .e-multi-select-wrapper.e-delimiter .e-searcher {
1456
+ .e-multi-select-wrapper.e-delimiter .e-searcher,
1457
+ .e-multi-select-wrapper.e-delimiter .e-multi-searcher {
1415
1458
  height: 27px;
1416
1459
  vertical-align: middle;
1417
1460
  }
1418
1461
 
1419
- .e-multi-select-wrapper.e-delimiter .e-searcher .e-dropdownbase {
1462
+ .e-multi-select-wrapper.e-delimiter .e-searcher .e-dropdownbase,
1463
+ .e-multi-select-wrapper.e-delimiter .e-multi-searcher .e-dropdownbase {
1420
1464
  height: 100%;
1421
1465
  min-height: 100%;
1422
1466
  }
@@ -1682,15 +1726,34 @@ ejs-dropdownlist {
1682
1726
  }
1683
1727
 
1684
1728
  .e-multiselect .e-down-icon .e-chips-close.e-close-hooker,
1729
+ .e-small.e-multiselect .e-down-icon .e-chips-close.e-close-hooker,
1685
1730
  .e-multiselect.e-input-group.e-control-container .e-multi-select-wrapper.e-down-icon .e-clear-icon {
1686
1731
  right: 40px;
1687
1732
  }
1688
1733
 
1734
+ .e-bigger.e-small .e-multiselect .e-down-icon .e-chips-close.e-close-hooker {
1735
+ right: 40px;
1736
+ }
1737
+
1689
1738
  .e-multiselect.e-input-group.e-control-container.e-rtl .e-multi-select-wrapper.e-down-icon .e-clear-icon {
1690
1739
  left: 40px;
1691
1740
  right: auto;
1692
1741
  }
1693
1742
 
1743
+ .e-bigger.e-small .e-multiselect.e-input-group.e-control-container.e-rtl .e-multi-select-wrapper.e-down-icon .e-clear-icon,
1744
+ .e-bigger.e-small.e-multiselect.e-input-group.e-control-container.e-rtl .e-multi-select-wrapper.e-down-icon .e-clear-icon {
1745
+ left: 45px;
1746
+ right: auto;
1747
+ }
1748
+
1749
+ .e-small .e-multiselect.e-rtl .e-multi-select-wrapper .e-chips-close.e-close-hooker,
1750
+ .e-small.e-multiselect.e-rtl .e-multi-select-wrapper .e-chips-close.e-close-hooker,
1751
+ .e-small.e-bigger .e-multiselect.e-rtl .e-multi-select-wrapper .e-chips-close.e-close-hooker,
1752
+ .e-small.e-bigger.e-multiselect.e-rtl .e-multi-select-wrapper .e-chips-close.e-close-hooker {
1753
+ left: 12px;
1754
+ right: auto;
1755
+ }
1756
+
1694
1757
  .e-bigger .e-multi-select-wrapper .e-chips-close.e-close-hooker {
1695
1758
  margin-top: -2.25em;
1696
1759
  }
@@ -1802,7 +1865,7 @@ ejs-dropdownlist {
1802
1865
  cursor: pointer;
1803
1866
  display: inline-block;
1804
1867
  font-size: 14px;
1805
- padding-left: 0;
1868
+ padding-left: 8px;
1806
1869
  }
1807
1870
 
1808
1871
  .e-multiselect.e-disabled .e-multi-select-wrapper,
@@ -1897,6 +1960,7 @@ ejs-dropdownlist {
1897
1960
  left: 40px;
1898
1961
  position: absolute;
1899
1962
  right: auto;
1963
+ left: 0;
1900
1964
  }
1901
1965
 
1902
1966
  .e-multiselect.e-rtl .e-multi-select-wrapper .e-close-hooker::before {
@@ -1904,15 +1968,30 @@ ejs-dropdownlist {
1904
1968
  }
1905
1969
 
1906
1970
  .e-multiselect.e-rtl .e-multi-select-wrapper .e-delim-values .e-remain {
1907
- padding-right: 0;
1971
+ padding-right: 8px;
1908
1972
  }
1909
1973
 
1910
- .e-multiselect.e-rtl .e-down-icon .e-chips-close.e-icon.e-close-hooker {
1974
+ .e-multiselect.e-rtl .e-down-icon .e-chips-close.e-close-hooker {
1911
1975
  left: 19px;
1912
1976
  }
1913
1977
 
1914
1978
  .e-multiselect.e-rtl .e-multi-select-wrapper.e-down-icon .e-close-hooker::before {
1915
- left: -7px;
1979
+ left: 25px;
1980
+ }
1981
+
1982
+ .e-small.e-multiselect.e-rtl .e-multi-select-wrapper.e-down-icon .e-close-hooker::before,
1983
+ .e-small .e-multiselect.e-rtl .e-multi-select-wrapper.e-down-icon .e-close-hooker::before {
1984
+ left: 20px;
1985
+ }
1986
+
1987
+ .e-bigger.e-multiselect.e-rtl .e-multi-select-wrapper.e-down-icon .e-close-hooker::before,
1988
+ .e-bigger .e-multiselect.e-rtl .e-multi-select-wrapper.e-down-icon .e-close-hooker::before {
1989
+ left: 32px;
1990
+ }
1991
+
1992
+ .e-bigger.e-small.e-multiselect.e-rtl .e-multi-select-wrapper.e-down-icon .e-close-hooker::before,
1993
+ .e-bigger.e-small .e-multiselect.e-rtl .e-multi-select-wrapper.e-down-icon .e-close-hooker::before {
1994
+ left: 25px;
1916
1995
  }
1917
1996
 
1918
1997
  .e-popup.e-multi-select-list-wrapper .e-list-item .e-checkbox-wrapper {
@@ -1944,13 +2023,15 @@ ejs-dropdownlist {
1944
2023
  vertical-align: middle;
1945
2024
  }
1946
2025
 
1947
- .e-bigger .e-popup.e-multi-select-list-wrapper .e-list-item .e-checkbox-wrapper {
2026
+ .e-bigger .e-popup.e-multi-select-list-wrapper .e-list-item .e-checkbox-wrapper,
2027
+ .e-bigger.e-popup.e-multi-select-list-wrapper .e-list-item .e-checkbox-wrapper {
1948
2028
  bottom: 1px;
1949
2029
  bottom: 2px;
1950
2030
  margin-right: 12px;
1951
2031
  }
1952
2032
 
1953
- .e-bigger .e-popup.e-multi-select-list-wrapper.e-mulltiselect-group .e-list-group-item .e-checkbox-wrapper {
2033
+ .e-bigger .e-popup.e-multi-select-list-wrapper.e-multiselect-group .e-list-group-item .e-checkbox-wrapper,
2034
+ .e-bigger.e-popup.e-multi-select-list-wrapper.e-multiselect-group .e-list-group-item .e-checkbox-wrapper {
1954
2035
  bottom: 1px;
1955
2036
  bottom: 2px;
1956
2037
  margin-right: 12px;
@@ -2006,10 +2087,12 @@ ejs-dropdownlist {
2006
2087
  font-size: 14px;
2007
2088
  }
2008
2089
 
2090
+ .e-bigger.e-multi-select-list-wrapper .e-selectall-parent .e-all-text,
2009
2091
  .e-bigger .e-multi-select-list-wrapper .e-selectall-parent .e-all-text {
2010
2092
  font-size: 16px;
2011
2093
  }
2012
2094
 
2095
+ .e-bigger.e-multi-select-list-wrapper .e-selectall-parent,
2013
2096
  .e-bigger .e-multi-select-list-wrapper .e-selectall-parent {
2014
2097
  font-size: 14px;
2015
2098
  line-height: 48px;
@@ -2024,6 +2107,7 @@ ejs-dropdownlist {
2024
2107
  vertical-align: middle;
2025
2108
  }
2026
2109
 
2110
+ .e-bigger.e-multi-select-list-wrapper .e-selectall-parent .e-checkbox-wrapper,
2027
2111
  .e-bigger .e-multi-select-list-wrapper .e-selectall-parent .e-checkbox-wrapper {
2028
2112
  bottom: 1px;
2029
2113
  bottom: 2px;
@@ -2090,6 +2174,7 @@ ejs-multiselect {
2090
2174
  display: block;
2091
2175
  }
2092
2176
 
2177
+ .e-small.e-multi-select-list-wrapper .e-selectall-parent,
2093
2178
  .e-small .e-multi-select-list-wrapper .e-selectall-parent {
2094
2179
  line-height: 26px;
2095
2180
  }
@@ -2118,6 +2203,7 @@ ejs-multiselect {
2118
2203
  margin-top: -2em;
2119
2204
  }
2120
2205
 
2206
+ .e-bigger.e-small.e-multi-select-list-wrapper .e-selectall-parent,
2121
2207
  .e-bigger.e-small .e-multi-select-list-wrapper .e-selectall-parent {
2122
2208
  line-height: 40px;
2123
2209
  }
@@ -2144,7 +2230,6 @@ ejs-multiselect {
2144
2230
  .e-bigger.e-small .e-multi-select-wrapper .e-chips-close.e-close-hooker,
2145
2231
  .e-bigger.e-small .e-multiselect.e-control-container .e-multi-select-wrapper .e-clear-icon {
2146
2232
  margin-top: -2em;
2147
- right: 5px;
2148
2233
  }
2149
2234
 
2150
2235
  .e-content-placeholder.e-multiselect.e-placeholder-multiselect {
@@ -2386,7 +2471,7 @@ ejs-multiselect {
2386
2471
  background-color: #adb5bd;
2387
2472
  }
2388
2473
 
2389
- .e-multi-select-wrapper .e-chips.e-chip-selected:hover {
2474
+ .e-multiselect:not(.e-disabled) .e-multi-select-wrapper .e-chips.e-chip-selected:hover {
2390
2475
  background-color: #565e64;
2391
2476
  }
2392
2477
 
@@ -2415,7 +2500,7 @@ ejs-multiselect {
2415
2500
  height: 24px;
2416
2501
  }
2417
2502
 
2418
- .e-multi-select-wrapper .e-chips:hover {
2503
+ .e-multiselect:not(.e-disabled) .e-multi-select-wrapper .e-chips:hover {
2419
2504
  background-color: #5c636a;
2420
2505
  }
2421
2506
 
@@ -2500,16 +2585,16 @@ ejs-multiselect {
2500
2585
 
2501
2586
  .e-popup.e-multi-select-list-wrapper .e-list-item.e-active.e-item-focus {
2502
2587
  background-color: #0d6efd;
2503
- border: 0 solid transparent;
2504
2588
  box-shadow: none;
2505
2589
  color: #fff;
2590
+ border: 0 solid transparent;
2506
2591
  }
2507
2592
 
2508
2593
  .e-popup.e-multi-select-list-wrapper.e-multiselect-group .e-list-group-item.e-active.e-item-focus {
2509
2594
  background-color: #0d6efd;
2510
- border: 0 solid transparent;
2511
2595
  box-shadow: none;
2512
2596
  color: #fff;
2597
+ border: 0 solid transparent;
2513
2598
  }
2514
2599
 
2515
2600
  .e-popup.e-multi-select-list-wrapper .e-list-item {
@@ -2556,6 +2641,7 @@ ejs-multiselect {
2556
2641
  }
2557
2642
 
2558
2643
  .e-small .e-multi-select-wrapper .e-chips {
2644
+ border-radius: 2px;
2559
2645
  height: 20px;
2560
2646
  }
2561
2647
 
@@ -2654,7 +2740,7 @@ ejs-multiselect {
2654
2740
  .e-listbox-container .e-selectall-parent {
2655
2741
  height: 36px;
2656
2742
  line-height: 1;
2657
- padding: 10px 16px;
2743
+ padding: 10px 12px;
2658
2744
  position: relative;
2659
2745
  }
2660
2746
 
@@ -2666,7 +2752,7 @@ ejs-multiselect {
2666
2752
  .e-listbox-wrapper .e-list-parent,
2667
2753
  .e-listbox-container .e-list-parent {
2668
2754
  height: 100%;
2669
- min-height: 0;
2755
+ min-height: 36px;
2670
2756
  }
2671
2757
 
2672
2758
  .e-listbox-wrapper .e-list-item,
@@ -2741,8 +2827,8 @@ ejs-multiselect {
2741
2827
  border-top: 1px solid;
2742
2828
  font-weight: 600;
2743
2829
  height: 30px;
2744
- line-height: 30px;
2745
- padding: 0 12px;
2830
+ line-height: 10px;
2831
+ padding: 10px 12px;
2746
2832
  }
2747
2833
 
2748
2834
  .e-listbox-wrapper .e-icon-collapsible,
@@ -2949,7 +3035,7 @@ ejs-listbox {
2949
3035
  overflow: inherit;
2950
3036
  }
2951
3037
 
2952
- .e-listbox-wrapper.e-filter-list.e-list-parent {
3038
+ .e-listbox-wrapper.e-filter-list .e-list-parent {
2953
3039
  overflow: auto;
2954
3040
  }
2955
3041
 
@@ -3189,16 +3275,6 @@ ejs-listbox {
3189
3275
  height: calc(100% - 47px);
3190
3276
  }
3191
3277
 
3192
- .e-listbox-wrapper.e-select-all .e-list-parent,
3193
- .e-listbox-container.e-select-all .e-list-parent {
3194
- height: calc(100% - 36px);
3195
- }
3196
-
3197
- .e-listbox-wrapper.e-filter-list.e-select-all .e-list-parent,
3198
- .e-listbox-container.e-filter-list.e-select-all .e-list-parent {
3199
- height: calc(100% - 86px);
3200
- }
3201
-
3202
3278
  .e-listbox-wrapper .e-list-item,
3203
3279
  .e-listbox-container .e-list-item {
3204
3280
  background-color: transparent;
@@ -0,0 +1 @@
1
+ @import './fluent-definition.scss';
@@ -89,6 +89,13 @@
89
89
  color: #adb5bd;
90
90
  }
91
91
 
92
+ .e-input-group.e-ddl.e-readonly .e-input[readonly] ~ span.e-input-group-icon.e-ddl-icon.e-search-icon,
93
+ .e-input-group.e-control-wrapper.e-readonly .e-input[readonly] ~ span.e-input-group-icon.e-ddl-icon.e-search-icon,
94
+ .e-float-input.e-ddl.e-readonly .e-input[readonly] ~ span.e-input-group-icon.e-ddl-icon.e-search-icon,
95
+ .e-float-input.e-control-wrapper.e-ddl.e-readonly .e-input[readonly] ~ span.e-input-group-icon.e-ddl-icon.e-search-icon {
96
+ background: #343a40;
97
+ }
98
+
92
99
  .e-input-group:not(.e-disabled) .e-control.e-dropdownlist ~ .e-ddl-icon,
93
100
  .e-input-group.e-disabled.e-ddl .e-control.e-dropdownlist ~ .e-input-group-icon,
94
101
  .e-control.e-dropdownlist .e-input-group.e-disabled.e-ddl .e-input-group-icon,
@@ -89,6 +89,13 @@
89
89
  color: #6c757d;
90
90
  }
91
91
 
92
+ .e-input-group.e-ddl.e-readonly .e-input[readonly] ~ span.e-input-group-icon.e-ddl-icon.e-search-icon,
93
+ .e-input-group.e-control-wrapper.e-readonly .e-input[readonly] ~ span.e-input-group-icon.e-ddl-icon.e-search-icon,
94
+ .e-float-input.e-ddl.e-readonly .e-input[readonly] ~ span.e-input-group-icon.e-ddl-icon.e-search-icon,
95
+ .e-float-input.e-control-wrapper.e-ddl.e-readonly .e-input[readonly] ~ span.e-input-group-icon.e-ddl-icon.e-search-icon {
96
+ background: #e9ecef;
97
+ }
98
+
92
99
  .e-input-group:not(.e-disabled) .e-control.e-dropdownlist ~ .e-ddl-icon,
93
100
  .e-input-group.e-disabled.e-ddl .e-control.e-dropdownlist ~ .e-input-group-icon,
94
101
  .e-control.e-dropdownlist .e-input-group.e-disabled.e-ddl .e-input-group-icon,
@@ -0,0 +1,132 @@
1
+ .e-popup.e-ddl {
2
+ border-radius: 4px;
3
+ box-shadow: none;
4
+ margin-top: 1px;
5
+ }
6
+
7
+ .e-popup.e-ddl .e-input-group {
8
+ width: auto;
9
+ }
10
+
11
+ .e-popup.e-ddl .e-input-group input {
12
+ line-height: 15px;
13
+ }
14
+
15
+ .e-popup.e-ddl .e-dropdownbase {
16
+ min-height: 26px;
17
+ }
18
+
19
+ .e-popup.e-ddl .e-filter-parent .e-input-group {
20
+ display: -ms-flexbox;
21
+ display: flex;
22
+ width: auto;
23
+ }
24
+
25
+ .e-popup.e-ddl .e-filter-parent .e-input-group .e-back-icon {
26
+ border: 0;
27
+ }
28
+
29
+ .e-bigger .e-popup.e-ddl-device-filter {
30
+ margin-top: 0;
31
+ }
32
+
33
+ .e-bigger .e-popup.e-ddl .e-list-item {
34
+ font-size: 16px;
35
+ line-height: 32px;
36
+ padding-left: 0;
37
+ text-indent: 16px;
38
+ }
39
+
40
+ .e-bigger .e-popup.e-ddl .e-list-group-item,
41
+ .e-bigger .e-popup.e-ddl .e-fixed-head {
42
+ font-size: 14px;
43
+ line-height: 32px;
44
+ padding-left: 0;
45
+ text-indent: 16px;
46
+ }
47
+
48
+ .e-bigger .e-popup.e-ddl .e-dropdownbase {
49
+ min-height: 40px;
50
+ }
51
+
52
+ .e-input-group.e-control-wrapper.e-ddl .e-input[readonly],
53
+ .e-float-input.e-control-wrapper.e-ddl input[readonly] {
54
+ background: transparent;
55
+ }
56
+
57
+ .e-input-group.e-control-wrapper.e-ddl.e-readonly .e-input[readonly],
58
+ .e-float-input.e-control-wrapper.e-ddl.e-readonly input[readonly] {
59
+ background: #1b1a19;
60
+ }
61
+
62
+ .e-input-group:not(.e-disabled) .e-control.e-dropdownlist ~ .e-ddl-icon:active,
63
+ .e-input-group:not(.e-disabled) .e-control.e-dropdownlist ~ .e-ddl-icon:hover,
64
+ .e-control.e-dropdownlist .e-input-group:not(.e-disabled) .e-ddl-icon:active,
65
+ .e-control.e-dropdownlist .e-input-group:not(.e-disabled) .e-ddl-icon:hover,
66
+ .e-ddl.e-popup .e-input-group:not(.e-disabled) .e-clear-icon:active,
67
+ .e-ddl.e-popup .e-input-group:not(.e-disabled) .e-clear-icon:hover,
68
+ .e-ddl.e-popup .e-input-group:not(.e-disabled) .e-back-icon:active,
69
+ .e-ddl.e-popup .e-input-group:not(.e-disabled) .e-back-icon:hover {
70
+ background: none;
71
+ color: #a19f9d;
72
+ }
73
+
74
+ .e-input-group.e-ddl .e-input[readonly] ~ span.e-input-group-icon.e-ddl-icon,
75
+ .e-input-group.e-control-wrapper.e-ddl .e-input[readonly] ~ span.e-input-group-icon.e-ddl-icon,
76
+ .e-float-input.e-ddl input[readonly] ~ span.e-input-group-icon.e-ddl-icon,
77
+ .e-float-input.e-control-wrapper.e-ddl input[readonly] ~ span.e-input-group-icon.e-ddl-icon {
78
+ background: transparent;
79
+ color: #a19f9d;
80
+ }
81
+
82
+ .e-input-group:not(.e-disabled) .e-control.e-dropdownlist ~ .e-ddl-icon,
83
+ .e-input-group.e-disabled.e-ddl .e-control.e-dropdownlist ~ .e-input-group-icon,
84
+ .e-control.e-dropdownlist .e-input-group.e-disabled.e-ddl .e-input-group-icon,
85
+ .e-control.e-dropdownlist .e-input-group.e-ddl .e-input-group-icon {
86
+ border: 0;
87
+ }
88
+
89
+ .e-input-group:not(.e-disabled) .e-control.e-dropdownlist ~ .e-input-group-icon:active,
90
+ .e-control.e-dropdownlist .e-input-group:not(.e-disabled) .e-input-group-icon:active,
91
+ .e-ddl.e-popup .e-input-group:not(.e-disabled) .e-back-icon:active,
92
+ .e-ddl.e-popup .e-input-group:not(.e-disabled) .e-clear-icon:active {
93
+ box-shadow: none;
94
+ }
95
+
96
+ .e-ddl.e-popup .e-input-group:not(.e-disabled) .e-clear-icon {
97
+ background: none;
98
+ display: -ms-flexbox;
99
+ display: flex;
100
+ position: relative;
101
+ }
102
+
103
+ .e-ddl.e-popup .e-filter-parent .e-input-group,
104
+ .e-ddl.e-popup .e-filter-parent {
105
+ background: #252423;
106
+ }
107
+
108
+ .e-input-group .e-control.e-dropdownlist ~ .e-ddl-icon {
109
+ font-size: 14px;
110
+ }
111
+
112
+ .e-bigger .e-input-group .e-control.e-dropdownlist ~ .e-ddl-icon {
113
+ font-size: 16px;
114
+ }
115
+
116
+ .e-bigger.e-small .e-ddl.e-popup .e-list-item,
117
+ .e-bigger.e-small .e-ddl.e-popup .e-list-group-item,
118
+ .e-bigger.e-small .e-ddl.e-popup .e-fixed-head {
119
+ font-size: 14px;
120
+ line-height: 34px;
121
+ padding-left: 0;
122
+ text-indent: 16px;
123
+ }
124
+
125
+ .e-bigger.e-small .e-ddl.e-popup .e-input-group input,
126
+ .e-bigger.e-small .e-ddl.e-popup .e-input-group input.e-input {
127
+ height: 30px;
128
+ }
129
+
130
+ .e-bigger.e-small .e-popup.e-ddl .e-dropdownbase {
131
+ min-height: 34px;
132
+ }
@@ -0,0 +1,4 @@
1
+ @import 'ej2-base/styles/fluent-dark-definition.scss';
2
+ @import '../drop-down-list/fluent-dark-definition.scss';
3
+ @import 'fluent-dark-definition.scss';
4
+ @import 'all.scss';