@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
@@ -160,7 +160,10 @@
160
160
  margin-left: -20px;
161
161
  }
162
162
 
163
- .e-bigger .e-ddl.e-popup .e-list-item,
163
+ .e-bigger .e-ddl.e-popup .e-list-item {
164
+ font-size: 14px;
165
+ }
166
+
164
167
  .e-bigger .e-ddl.e-popup .e-list-group-item {
165
168
  font-size: 14px;
166
169
  }
@@ -169,7 +172,10 @@
169
172
  padding: 4px 0;
170
173
  }
171
174
 
172
- .e-bigger.e-ddl.e-popup .e-list-item,
175
+ .e-bigger.e-ddl.e-popup .e-list-item {
176
+ font-size: 14px;
177
+ }
178
+
173
179
  .e-bigger.e-ddl.e-popup .e-list-group-item {
174
180
  font-size: 14px;
175
181
  }
@@ -188,6 +194,10 @@
188
194
  top: 0;
189
195
  }
190
196
 
197
+ .e-popup-full-page .e-popup-full-page.e-ddl.e-popup.e-ddl-device-filter {
198
+ margin: 0;
199
+ }
200
+
191
201
  .e-ddl.e-control-wrapper .e-ddl-disable-icon {
192
202
  position: relative;
193
203
  }
@@ -339,29 +349,41 @@ ejs-dropdownlist {
339
349
  }
340
350
 
341
351
  .e-small .e-ddl.e-popup .e-list-item,
352
+ .e-input-group.e-ddl.e-small .e-list-item {
353
+ font-size: 12px;
354
+ }
355
+
342
356
  .e-small .e-ddl.e-popup .e-list-group-item,
343
- .e-input-group.e-ddl.e-small .e-list-item,
344
357
  .e-input-group.e-ddl.e-small .e-list-group-item {
345
358
  font-size: 12px;
346
359
  }
347
360
 
348
361
  .e-small.e-ddl.e-popup .e-list-item,
362
+ .e-input-group.e-ddl.e-small .e-list-item {
363
+ font-size: 12px;
364
+ }
365
+
349
366
  .e-small.e-ddl.e-popup .e-list-group-item,
350
- .e-input-group.e-ddl.e-small .e-list-item,
351
367
  .e-input-group.e-ddl.e-small .e-list-group-item {
352
368
  font-size: 12px;
353
369
  }
354
370
 
355
371
  .e-bigger.e-small .e-ddl.e-popup .e-list-item,
372
+ .e-bigger .e-input-group.e-ddl.e-small .e-list-item {
373
+ font-size: 13px;
374
+ }
375
+
356
376
  .e-bigger.e-small .e-ddl.e-popup .e-list-group-item,
357
- .e-bigger .e-input-group.e-ddl.e-small .e-list-item,
358
377
  .e-bigger .e-input-group.e-ddl.e-small .e-list-group-item {
359
378
  font-size: 13px;
360
379
  }
361
380
 
362
381
  .e-bigger.e-small.e-ddl.e-popup .e-list-item,
382
+ .e-bigger .e-input-group.e-ddl.e-small .e-list-item {
383
+ font-size: 13px;
384
+ }
385
+
363
386
  .e-bigger.e-small.e-ddl.e-popup .e-list-group-item,
364
- .e-bigger .e-input-group.e-ddl.e-small .e-list-item,
365
387
  .e-bigger .e-input-group.e-ddl.e-small .e-list-group-item {
366
388
  font-size: 13px;
367
389
  }
@@ -194,7 +194,10 @@
194
194
  margin-left: -20px;
195
195
  }
196
196
 
197
- .e-bigger .e-ddl.e-popup .e-list-item,
197
+ .e-bigger .e-ddl.e-popup .e-list-item {
198
+ font-size: 14px;
199
+ }
200
+
198
201
  .e-bigger .e-ddl.e-popup .e-list-group-item {
199
202
  font-size: 14px;
200
203
  }
@@ -203,7 +206,10 @@
203
206
  padding: 4px 0;
204
207
  }
205
208
 
206
- .e-bigger.e-ddl.e-popup .e-list-item,
209
+ .e-bigger.e-ddl.e-popup .e-list-item {
210
+ font-size: 14px;
211
+ }
212
+
207
213
  .e-bigger.e-ddl.e-popup .e-list-group-item {
208
214
  font-size: 14px;
209
215
  }
@@ -222,6 +228,10 @@
222
228
  top: 0;
223
229
  }
224
230
 
231
+ .e-popup-full-page .e-popup-full-page.e-ddl.e-popup.e-ddl-device-filter {
232
+ margin: 0;
233
+ }
234
+
225
235
  .e-ddl.e-control-wrapper .e-ddl-disable-icon {
226
236
  position: relative;
227
237
  }
@@ -373,29 +383,41 @@ ejs-dropdownlist {
373
383
  }
374
384
 
375
385
  .e-small .e-ddl.e-popup .e-list-item,
386
+ .e-input-group.e-ddl.e-small .e-list-item {
387
+ font-size: 12px;
388
+ }
389
+
376
390
  .e-small .e-ddl.e-popup .e-list-group-item,
377
- .e-input-group.e-ddl.e-small .e-list-item,
378
391
  .e-input-group.e-ddl.e-small .e-list-group-item {
379
392
  font-size: 12px;
380
393
  }
381
394
 
382
395
  .e-small.e-ddl.e-popup .e-list-item,
396
+ .e-input-group.e-ddl.e-small .e-list-item {
397
+ font-size: 12px;
398
+ }
399
+
383
400
  .e-small.e-ddl.e-popup .e-list-group-item,
384
- .e-input-group.e-ddl.e-small .e-list-item,
385
401
  .e-input-group.e-ddl.e-small .e-list-group-item {
386
402
  font-size: 12px;
387
403
  }
388
404
 
389
405
  .e-bigger.e-small .e-ddl.e-popup .e-list-item,
406
+ .e-bigger .e-input-group.e-ddl.e-small .e-list-item {
407
+ font-size: 13px;
408
+ }
409
+
390
410
  .e-bigger.e-small .e-ddl.e-popup .e-list-group-item,
391
- .e-bigger .e-input-group.e-ddl.e-small .e-list-item,
392
411
  .e-bigger .e-input-group.e-ddl.e-small .e-list-group-item {
393
412
  font-size: 13px;
394
413
  }
395
414
 
396
415
  .e-bigger.e-small.e-ddl.e-popup .e-list-item,
416
+ .e-bigger .e-input-group.e-ddl.e-small .e-list-item {
417
+ font-size: 13px;
418
+ }
419
+
397
420
  .e-bigger.e-small.e-ddl.e-popup .e-list-group-item,
398
- .e-bigger .e-input-group.e-ddl.e-small .e-list-item,
399
421
  .e-bigger .e-input-group.e-ddl.e-small .e-list-group-item {
400
422
  font-size: 13px;
401
423
  }
@@ -53,13 +53,16 @@
53
53
  padding: 0 8px 0 0;
54
54
  }
55
55
 
56
- .e-bigger .e-dropdownbase .e-list-item .e-list-icon,
57
- .e-bigger.e-small .e-dropdownbase .e-list-item .e-list-icon {
56
+ .e-bigger .e-dropdownbase .e-list-item .e-list-icon {
58
57
  padding: 0 12px 0 0;
59
58
  }
60
59
 
60
+ .e-bigger.e-small .e-dropdownbase .e-list-item .e-list-icon {
61
+ padding: 0 8px 0 0;
62
+ }
63
+
61
64
  .e-small .e-dropdownbase .e-list-item .e-list-icon {
62
- padding: 0 6px 0 0;
65
+ padding: 0 4px 0 0;
63
66
  }
64
67
 
65
68
  .e-ddl.e-control-wrapper .e-ddl-icon::before {
@@ -116,6 +119,7 @@
116
119
 
117
120
  .e-popup.e-ddl .e-dropdownbase {
118
121
  min-height: 26px;
122
+ padding: 4px 0;
119
123
  }
120
124
 
121
125
  .e-bigger .e-popup.e-ddl-device-filter .e-input-group.e-input-focus:not(.e-success):not(.e-warning):not(.e-error) {
@@ -140,24 +144,6 @@
140
144
  background-color: #374151;
141
145
  }
142
146
 
143
- .e-popup.e-ddl:not(.e-ddl-device) .e-input-group .e-clear-icon {
144
- margin: 0;
145
- min-height: 12px;
146
- min-width: 12px;
147
- padding: 6px;
148
- }
149
-
150
- .e-bigger .e-popup.e-ddl:not(.e-ddl-device) .e-input-group .e-clear-icon,
151
- .e-bigger.e-popup.e-ddl:not(.e-ddl-device) .e-input-group .e-clear-icon {
152
- min-height: 16px;
153
- min-width: 16px;
154
- }
155
-
156
- .e-bigger .e-popup.e-ddl:not(.e-ddl-device) .e-filter-parent .e-input-filter,
157
- .e-bigger.e-popup.e-ddl:not(.e-ddl-device) .e-filter-parent .e-input-filter {
158
- padding: 8px 16px 8px 0;
159
- }
160
-
161
147
  .e-input-group.e-ddl,
162
148
  .e-input-group.e-ddl .e-input,
163
149
  .e-input-group.e-ddl .e-ddl-icon {
@@ -169,59 +155,20 @@
169
155
  border-bottom-width: 0;
170
156
  }
171
157
 
172
- .e-popup.e-ddl:not(.e-ddl-device) .e-input-group.e-small .e-clear-icon,
173
- .e-small .e-popup.e-ddl:not(.e-ddl-device) .e-input-group .e-clear-icon,
174
- .e-small.e-popup.e-ddl:not(.e-ddl-device) .e-input-group .e-clear-icon,
175
- .e-popup.e-ddl:not(.e-ddl-device) .e-input-group.e-input-focus.e-small .e-clear-icon,
176
- .e-small .e-popup.e-ddl:not(.e-ddl-device) .e-input-group.e-input-focus .e-clear-icon,
177
- .e-small.e-popup.e-ddl:not(.e-ddl-device) .e-input-group.e-input-focus .e-clear-icon {
178
- margin: 0;
179
- }
180
-
181
- .e-small .e-popup.e-ddl:not(.e-ddl-device) .e-filter-parent .e-input-group .e-input-filter,
182
- .e-small.e-popup.e-ddl:not(.e-ddl-device) .e-filter-parent .e-input-group .e-input-filter,
183
- .e-popup.e-ddl:not(.e-ddl-device) .e-filter-parent .e-input-group.e-small .e-input-filter,
184
- .e-small .e-popup.e-ddl:not(.e-ddl-device) .e-filter-parent .e-input-group.e-input-focus .e-input-filter,
185
- .e-small.e-popup.e-ddl:not(.e-ddl-device) .e-filter-parent .e-input-group.e-input-focus .e-input-filter,
186
- .e-popup.e-ddl:not(.e-ddl-device) .e-filter-parent .e-input-group.e-small.e-input-focus .e-input-filter {
187
- padding: 5px 5px 5px 12px;
188
- }
189
-
190
- .e-bigger.e-small .e-popup.e-ddl:not(.e-ddl-device) .e-input-group .e-clear-icon,
191
- .e-bigger.e-small.e-popup.e-ddl:not(.e-ddl-device) .e-input-group .e-clear-icon,
192
- .e-bigger .e-popup.e-ddl:not(.e-ddl-device) .e-input-group.e-small .e-clear-icon,
193
- .e-bigger.e-popup.e-ddl:not(.e-ddl-device) .e-input-group.e-small .e-clear-icon,
194
- .e-small .e-popup.e-ddl:not(.e-ddl-device) .e-input-group.e-bigger .e-clear-icon,
195
- .e-small.e-popup.e-ddl:not(.e-ddl-device) .e-input-group.e-bigger .e-clear-icon,
196
- .e-popup.e-ddl:not(.e-ddl-device) .e-input-group.e-bigger.e-small .e-clear-icon {
197
- min-height: 18px;
198
- min-width: 18px;
199
- }
200
-
201
- .e-bigger.e-small .e-popup.e-ddl:not(.e-ddl-device) .e-filter-parent .e-input-group .e-input-filter,
202
- .e-bigger.e-small.e-popup.e-ddl:not(.e-ddl-device) .e-filter-parent .e-input-group .e-input-filter,
203
- .e-bigger .e-popup.e-ddl:not(.e-ddl-device) .e-filter-parent .e-input-group.e-small .e-input-filter,
204
- .e-bigger.e-popup.e-ddl:not(.e-ddl-device) .e-filter-parent .e-input-group.e-small .e-input-filter,
205
- .e-small .e-popup.e-ddl:not(.e-ddl-device) .e-filter-parent .e-input-group.e-bigger .e-input-filter,
206
- .e-small.e-popup.e-ddl:not(.e-ddl-device) .e-filter-parent .e-input-group.e-bigger .e-input-filter,
207
- .e-popup.e-ddl:not(.e-ddl-device) .e-filter-parent .e-input-group.e-bigger.e-small .e-input-filter {
208
- padding: 8px 16px;
209
- }
210
-
211
158
  .e-ddl.e-popup.e-outline .e-filter-parent {
212
159
  padding: 4px 8px;
213
160
  }
214
161
 
215
162
  .e-ddl .e-search-icon::before {
216
- content: '\e737';
163
+ content: '\e754';
217
164
  }
218
165
 
219
166
  .e-ddl .e-back-icon::before {
220
- content: '\e7a5';
167
+ content: '\e773';
221
168
  }
222
169
 
223
170
  .e-ddl.e-input-group.e-control-wrapper .e-ddl-icon::before {
224
- content: '\e706';
171
+ content: '\e729';
225
172
  font-family: 'e-icons';
226
173
  }
227
174
 
@@ -230,24 +177,14 @@
230
177
  margin-left: -20px;
231
178
  }
232
179
 
233
- .e-bigger .e-ddl.e-popup .e-list-item,
234
- .e-bigger .e-ddl.e-popup .e-list-group-item {
180
+ .e-bigger .e-ddl.e-popup .e-list-item {
235
181
  font-size: 16px;
236
182
  }
237
183
 
238
- .e-bigger .e-ddl.e-popup .e-input-group {
239
- padding: 4px 0;
240
- }
241
-
242
- .e-bigger.e-ddl.e-popup .e-list-item,
243
- .e-bigger.e-ddl.e-popup .e-list-group-item {
184
+ .e-bigger.e-ddl.e-popup .e-list-item {
244
185
  font-size: 16px;
245
186
  }
246
187
 
247
- .e-bigger.e-ddl.e-popup .e-input-group {
248
- padding: 4px 0;
249
- }
250
-
251
188
  .e-popup-full-page {
252
189
  bottom: 0;
253
190
  left: 0;
@@ -258,6 +195,10 @@
258
195
  top: 0;
259
196
  }
260
197
 
198
+ .e-popup-full-page .e-popup-full-page.e-ddl.e-popup.e-ddl-device-filter {
199
+ margin: 0;
200
+ }
201
+
261
202
  .e-ddl.e-control-wrapper .e-ddl-disable-icon {
262
203
  position: relative;
263
204
  }
@@ -311,14 +252,6 @@
311
252
  padding: 0 8px;
312
253
  }
313
254
 
314
- .e-ddl.e-popup.e-rtl .e-filter-parent .e-input-group.e-control-wrapper .e-input-filter,
315
- .e-ddl.e-popup .e-filter-parent .e-input-filter,
316
- .e-ddl.e-popup .e-filter-parent .e-input-filter:focus,
317
- .e-ddl.e-popup .e-filter-parent .e-input-group.e-input-focus .e-input-filter,
318
- .e-ddl.e-popup .e-filter-parent .e-input-group.e-control-wrapper.e-input-focus .e-input-filter {
319
- padding: 8px 16px 8px;
320
- }
321
-
322
255
  .e-ddl.e-popup .e-input-group {
323
256
  margin-bottom: 0;
324
257
  }
@@ -410,30 +343,22 @@ ejs-dropdownlist {
410
343
  }
411
344
 
412
345
  .e-small .e-ddl.e-popup .e-list-item,
413
- .e-small .e-ddl.e-popup .e-list-group-item,
414
- .e-input-group.e-ddl.e-small .e-list-item,
415
- .e-input-group.e-ddl.e-small .e-list-group-item {
346
+ .e-input-group.e-ddl.e-small .e-list-item {
416
347
  font-size: 12px;
417
348
  }
418
349
 
419
350
  .e-small.e-ddl.e-popup .e-list-item,
420
- .e-small.e-ddl.e-popup .e-list-group-item,
421
- .e-input-group.e-ddl.e-small .e-list-item,
422
- .e-input-group.e-ddl.e-small .e-list-group-item {
351
+ .e-input-group.e-ddl.e-small .e-list-item {
423
352
  font-size: 12px;
424
353
  }
425
354
 
426
355
  .e-bigger.e-small .e-ddl.e-popup .e-list-item,
427
- .e-bigger.e-small .e-ddl.e-popup .e-list-group-item,
428
- .e-bigger .e-input-group.e-ddl.e-small .e-list-item,
429
- .e-bigger .e-input-group.e-ddl.e-small .e-list-group-item {
356
+ .e-bigger .e-input-group.e-ddl.e-small .e-list-item {
430
357
  font-size: 14px;
431
358
  }
432
359
 
433
360
  .e-bigger.e-small.e-ddl.e-popup .e-list-item,
434
- .e-bigger.e-small.e-ddl.e-popup .e-list-group-item,
435
- .e-bigger .e-input-group.e-ddl.e-small .e-list-item,
436
- .e-bigger .e-input-group.e-ddl.e-small .e-list-group-item {
361
+ .e-bigger .e-input-group.e-ddl.e-small .e-list-item {
437
362
  font-size: 14px;
438
363
  }
439
364
 
@@ -53,13 +53,16 @@
53
53
  padding: 0 8px 0 0;
54
54
  }
55
55
 
56
- .e-bigger .e-dropdownbase .e-list-item .e-list-icon,
57
- .e-bigger.e-small .e-dropdownbase .e-list-item .e-list-icon {
56
+ .e-bigger .e-dropdownbase .e-list-item .e-list-icon {
58
57
  padding: 0 12px 0 0;
59
58
  }
60
59
 
60
+ .e-bigger.e-small .e-dropdownbase .e-list-item .e-list-icon {
61
+ padding: 0 8px 0 0;
62
+ }
63
+
61
64
  .e-small .e-dropdownbase .e-list-item .e-list-icon {
62
- padding: 0 6px 0 0;
65
+ padding: 0 4px 0 0;
63
66
  }
64
67
 
65
68
  .e-ddl.e-control-wrapper .e-ddl-icon::before {
@@ -116,6 +119,7 @@
116
119
 
117
120
  .e-popup.e-ddl .e-dropdownbase {
118
121
  min-height: 26px;
122
+ padding: 4px 0;
119
123
  }
120
124
 
121
125
  .e-bigger .e-popup.e-ddl-device-filter .e-input-group.e-input-focus:not(.e-success):not(.e-warning):not(.e-error) {
@@ -140,24 +144,6 @@
140
144
  background-color: #fff;
141
145
  }
142
146
 
143
- .e-popup.e-ddl:not(.e-ddl-device) .e-input-group .e-clear-icon {
144
- margin: 0;
145
- min-height: 12px;
146
- min-width: 12px;
147
- padding: 6px;
148
- }
149
-
150
- .e-bigger .e-popup.e-ddl:not(.e-ddl-device) .e-input-group .e-clear-icon,
151
- .e-bigger.e-popup.e-ddl:not(.e-ddl-device) .e-input-group .e-clear-icon {
152
- min-height: 16px;
153
- min-width: 16px;
154
- }
155
-
156
- .e-bigger .e-popup.e-ddl:not(.e-ddl-device) .e-filter-parent .e-input-filter,
157
- .e-bigger.e-popup.e-ddl:not(.e-ddl-device) .e-filter-parent .e-input-filter {
158
- padding: 8px 16px 8px 0;
159
- }
160
-
161
147
  .e-input-group.e-ddl,
162
148
  .e-input-group.e-ddl .e-input,
163
149
  .e-input-group.e-ddl .e-ddl-icon {
@@ -169,59 +155,20 @@
169
155
  border-bottom-width: 0;
170
156
  }
171
157
 
172
- .e-popup.e-ddl:not(.e-ddl-device) .e-input-group.e-small .e-clear-icon,
173
- .e-small .e-popup.e-ddl:not(.e-ddl-device) .e-input-group .e-clear-icon,
174
- .e-small.e-popup.e-ddl:not(.e-ddl-device) .e-input-group .e-clear-icon,
175
- .e-popup.e-ddl:not(.e-ddl-device) .e-input-group.e-input-focus.e-small .e-clear-icon,
176
- .e-small .e-popup.e-ddl:not(.e-ddl-device) .e-input-group.e-input-focus .e-clear-icon,
177
- .e-small.e-popup.e-ddl:not(.e-ddl-device) .e-input-group.e-input-focus .e-clear-icon {
178
- margin: 0;
179
- }
180
-
181
- .e-small .e-popup.e-ddl:not(.e-ddl-device) .e-filter-parent .e-input-group .e-input-filter,
182
- .e-small.e-popup.e-ddl:not(.e-ddl-device) .e-filter-parent .e-input-group .e-input-filter,
183
- .e-popup.e-ddl:not(.e-ddl-device) .e-filter-parent .e-input-group.e-small .e-input-filter,
184
- .e-small .e-popup.e-ddl:not(.e-ddl-device) .e-filter-parent .e-input-group.e-input-focus .e-input-filter,
185
- .e-small.e-popup.e-ddl:not(.e-ddl-device) .e-filter-parent .e-input-group.e-input-focus .e-input-filter,
186
- .e-popup.e-ddl:not(.e-ddl-device) .e-filter-parent .e-input-group.e-small.e-input-focus .e-input-filter {
187
- padding: 5px 5px 5px 12px;
188
- }
189
-
190
- .e-bigger.e-small .e-popup.e-ddl:not(.e-ddl-device) .e-input-group .e-clear-icon,
191
- .e-bigger.e-small.e-popup.e-ddl:not(.e-ddl-device) .e-input-group .e-clear-icon,
192
- .e-bigger .e-popup.e-ddl:not(.e-ddl-device) .e-input-group.e-small .e-clear-icon,
193
- .e-bigger.e-popup.e-ddl:not(.e-ddl-device) .e-input-group.e-small .e-clear-icon,
194
- .e-small .e-popup.e-ddl:not(.e-ddl-device) .e-input-group.e-bigger .e-clear-icon,
195
- .e-small.e-popup.e-ddl:not(.e-ddl-device) .e-input-group.e-bigger .e-clear-icon,
196
- .e-popup.e-ddl:not(.e-ddl-device) .e-input-group.e-bigger.e-small .e-clear-icon {
197
- min-height: 18px;
198
- min-width: 18px;
199
- }
200
-
201
- .e-bigger.e-small .e-popup.e-ddl:not(.e-ddl-device) .e-filter-parent .e-input-group .e-input-filter,
202
- .e-bigger.e-small.e-popup.e-ddl:not(.e-ddl-device) .e-filter-parent .e-input-group .e-input-filter,
203
- .e-bigger .e-popup.e-ddl:not(.e-ddl-device) .e-filter-parent .e-input-group.e-small .e-input-filter,
204
- .e-bigger.e-popup.e-ddl:not(.e-ddl-device) .e-filter-parent .e-input-group.e-small .e-input-filter,
205
- .e-small .e-popup.e-ddl:not(.e-ddl-device) .e-filter-parent .e-input-group.e-bigger .e-input-filter,
206
- .e-small.e-popup.e-ddl:not(.e-ddl-device) .e-filter-parent .e-input-group.e-bigger .e-input-filter,
207
- .e-popup.e-ddl:not(.e-ddl-device) .e-filter-parent .e-input-group.e-bigger.e-small .e-input-filter {
208
- padding: 8px 16px;
209
- }
210
-
211
158
  .e-ddl.e-popup.e-outline .e-filter-parent {
212
159
  padding: 4px 8px;
213
160
  }
214
161
 
215
162
  .e-ddl .e-search-icon::before {
216
- content: '\e737';
163
+ content: '\e754';
217
164
  }
218
165
 
219
166
  .e-ddl .e-back-icon::before {
220
- content: '\e7a5';
167
+ content: '\e773';
221
168
  }
222
169
 
223
170
  .e-ddl.e-input-group.e-control-wrapper .e-ddl-icon::before {
224
- content: '\e706';
171
+ content: '\e729';
225
172
  font-family: 'e-icons';
226
173
  }
227
174
 
@@ -230,24 +177,14 @@
230
177
  margin-left: -20px;
231
178
  }
232
179
 
233
- .e-bigger .e-ddl.e-popup .e-list-item,
234
- .e-bigger .e-ddl.e-popup .e-list-group-item {
180
+ .e-bigger .e-ddl.e-popup .e-list-item {
235
181
  font-size: 16px;
236
182
  }
237
183
 
238
- .e-bigger .e-ddl.e-popup .e-input-group {
239
- padding: 4px 0;
240
- }
241
-
242
- .e-bigger.e-ddl.e-popup .e-list-item,
243
- .e-bigger.e-ddl.e-popup .e-list-group-item {
184
+ .e-bigger.e-ddl.e-popup .e-list-item {
244
185
  font-size: 16px;
245
186
  }
246
187
 
247
- .e-bigger.e-ddl.e-popup .e-input-group {
248
- padding: 4px 0;
249
- }
250
-
251
188
  .e-popup-full-page {
252
189
  bottom: 0;
253
190
  left: 0;
@@ -258,6 +195,10 @@
258
195
  top: 0;
259
196
  }
260
197
 
198
+ .e-popup-full-page .e-popup-full-page.e-ddl.e-popup.e-ddl-device-filter {
199
+ margin: 0;
200
+ }
201
+
261
202
  .e-ddl.e-control-wrapper .e-ddl-disable-icon {
262
203
  position: relative;
263
204
  }
@@ -311,14 +252,6 @@
311
252
  padding: 0 8px;
312
253
  }
313
254
 
314
- .e-ddl.e-popup.e-rtl .e-filter-parent .e-input-group.e-control-wrapper .e-input-filter,
315
- .e-ddl.e-popup .e-filter-parent .e-input-filter,
316
- .e-ddl.e-popup .e-filter-parent .e-input-filter:focus,
317
- .e-ddl.e-popup .e-filter-parent .e-input-group.e-input-focus .e-input-filter,
318
- .e-ddl.e-popup .e-filter-parent .e-input-group.e-control-wrapper.e-input-focus .e-input-filter {
319
- padding: 8px 16px 8px;
320
- }
321
-
322
255
  .e-ddl.e-popup .e-input-group {
323
256
  margin-bottom: 0;
324
257
  }
@@ -410,30 +343,22 @@ ejs-dropdownlist {
410
343
  }
411
344
 
412
345
  .e-small .e-ddl.e-popup .e-list-item,
413
- .e-small .e-ddl.e-popup .e-list-group-item,
414
- .e-input-group.e-ddl.e-small .e-list-item,
415
- .e-input-group.e-ddl.e-small .e-list-group-item {
346
+ .e-input-group.e-ddl.e-small .e-list-item {
416
347
  font-size: 12px;
417
348
  }
418
349
 
419
350
  .e-small.e-ddl.e-popup .e-list-item,
420
- .e-small.e-ddl.e-popup .e-list-group-item,
421
- .e-input-group.e-ddl.e-small .e-list-item,
422
- .e-input-group.e-ddl.e-small .e-list-group-item {
351
+ .e-input-group.e-ddl.e-small .e-list-item {
423
352
  font-size: 12px;
424
353
  }
425
354
 
426
355
  .e-bigger.e-small .e-ddl.e-popup .e-list-item,
427
- .e-bigger.e-small .e-ddl.e-popup .e-list-group-item,
428
- .e-bigger .e-input-group.e-ddl.e-small .e-list-item,
429
- .e-bigger .e-input-group.e-ddl.e-small .e-list-group-item {
356
+ .e-bigger .e-input-group.e-ddl.e-small .e-list-item {
430
357
  font-size: 14px;
431
358
  }
432
359
 
433
360
  .e-bigger.e-small.e-ddl.e-popup .e-list-item,
434
- .e-bigger.e-small.e-ddl.e-popup .e-list-group-item,
435
- .e-bigger .e-input-group.e-ddl.e-small .e-list-item,
436
- .e-bigger .e-input-group.e-ddl.e-small .e-list-group-item {
361
+ .e-bigger .e-input-group.e-ddl.e-small .e-list-item {
437
362
  font-size: 14px;
438
363
  }
439
364
 
@@ -30,7 +30,7 @@ $ddt-select-all-text-indent: 0 !default;
30
30
  $ddt-select-all-bigger-text-indent: 0 !default;
31
31
  $ddt-select-all-text-font-size: $text-sm !default;
32
32
  $ddt-popup-reorder-border: $border-light !default;
33
- $ddt-treeview-padding: 0 8px !default;
33
+ $ddt-treeview-padding: 6px 8px !default;
34
34
  $ddt-chip-width: calc(100% - 2px) !default;
35
35
  $ddt-chip-ddi-width: calc(100% - 31px) !default;
36
36
  $ddt-chip-ci-width: calc(100% - 31px) !default;
@@ -0,0 +1 @@
1
+ @import './fluent-definition.scss';
@@ -1,42 +1,40 @@
1
1
  // sass-lint:disable-all
2
2
  $ddt-skin-name: $skin-name !default;
3
- $ddt-box-shadow: none !default;
3
+ $ddt-box-shadow: $shadow-md !default;
4
4
  $ddt-close-icon-bottom: 10px !default;
5
- $ddt-dd-icon-bottom: 0 !default;
6
5
  $ddt-dd-icon-width: 30px !default;
7
6
  $ddt-close-icon-width: 20px !default;
8
7
  $ddt-dd-icon-bigger-bottom: 0 !default;
9
- $ddt-filter-border: 0 solid $border-light !default;
8
+ $ddt-filter-border: 1px solid $border-light !default;
10
9
  $ddt-filter-top-border: 0 !default;
11
- $ddt-filter-padding: 4px !default;
10
+ $ddt-filter-padding: 4px 12px !default;
12
11
  $ddt-chip-margin: 3px 4px !default;
13
- $ddt-chip-padding: 0 8px 0 8px !default;
14
- $ddt-chip-radius: 4px !default;
12
+ $ddt-chip-padding: 0 4px 0 4px !default;
13
+ $ddt-chip-radius: 0 !default;
15
14
  $ddt-chip-height: 24px !default;
16
- $ddt-chip-bigger-height: 30px !default;
15
+ $ddt-chip-bigger-height: 32px !default;
17
16
  $ddt-chip-content-padding: 0 4px 0 0 !default;
18
17
  $ddt-rtl-chip-content-padding: 0 0 0 4px !default;
19
18
  $ddt-big-chip-content-padding: 0 8px 0 0 !default;
20
19
  $ddt-rtl-big-chip-content-padding: 0 0 0 8px !default;
21
20
  $ddt-chip-close-font: 10px !default;
22
- $ddt-chip-close-height: 16px !default;
23
- $ddt-chip-close-width: 16px !default;
24
- $ddt-last-chip-right-margin: 48px !default;
25
- $ddt-last-chip-bigger-right-margin: 52px !default;
26
- $ddt-select-all-height: 34px !default;
27
- $ddt-select-all-checkbox-margin: 0 8px !default;
21
+ $ddt-chip-close-height: 24px !default;
22
+ $ddt-chip-close-width: 24px !default;
23
+ $ddt-last-chip-right-margin: 54px !default;
24
+ $ddt-last-chip-bigger-right-margin: 58px !default;
25
+ $ddt-select-all-height: 36px !default;
26
+ $ddt-select-all-checkbox-margin: 0 12px !default;
28
27
  $ddt-select-all-text-indent: 0 !default;
29
28
  $ddt-select-all-bigger-text-indent: 0 !default;
30
29
  $ddt-select-all-text-font-size: $text-sm !default;
31
30
  $ddt-popup-reorder-border: $border-light !default;
32
- $ddt-treeview-padding: 0 8px !default;
33
- $ddt-chip-width: calc(100% - 2px) !default;
31
+ $ddt-chip-width: calc(100% - 8px) !default;
34
32
  $ddt-chip-ddi-width: calc(100% - 31px) !default;
35
33
  $ddt-chip-ci-width: calc(100% - 31px) !default;
36
- $ddt-chip-ddi-ci-width: calc(100% - 62px) !default;
37
- $ddt-big-chip-ddi-width: calc(100% - 37px) !default;
38
- $ddt-big-chip-ci-width: calc(100% - 37px) !default;
39
- $ddt-big-chip-ddi-ci-width: calc(100% - 73px) !default;
34
+ $ddt-chip-ddi-ci-width: calc(100% - 65px) !default;
35
+ $ddt-big-chip-ddi-width: calc(100% - 39px) !default;
36
+ $ddt-big-chip-ci-width: calc(100% - 39px) !default;
37
+ $ddt-big-chip-ddi-ci-width: calc(100% - 78px) !default;
40
38
  $ddt-remains-padding: 0 0 0 8px !default;
41
39
  $ddt-rtl-remains-padding: 0 8px 0 0 !default;
42
40
  $ddt-chip-font-size: $text-sm !default;
@@ -45,15 +43,12 @@ $ddt-delim-padding : 0 8px !default;
45
43
  $ddt-delim-bigger-padding: 0 12px !default;
46
44
  $ddt-remains-count-padding-top: 0 !default;
47
45
  $ddt-close-icon-min-height: 32px !default;
48
- $ddt-chip-icon-line-height: 24px !default;
49
- $ddt-overflow-count-padding-top: 4px !default;
46
+ $ddt-chip-icon-line-height: 20px !default;
50
47
  $ddt-list-filter-text-indent: 0 20px !default;
51
- $ddt-treeview-fullrow-height: 36px !default;
52
- $ddt-treeview-content-padding-top: 2px !default;
53
- $ddt-treeview-content-padding-bottom: 2px !default;
54
- $ddt-dd-icon-bigger-width: 32px !default;
55
- $ddt-close-icon-bigger-min-height: 36px !default;
56
- $ddt-close-icon-bigger-width: 35px !default;
48
+ $ddt-treeview-fullrow-height: 38px !default;
49
+ $ddt-dd-icon-bigger-width: 38px !default;
50
+ $ddt-close-icon-bigger-min-height: 38px !default;
51
+ $ddt-close-icon-bigger-width: 38px !default;
57
52
  $ddt-treeview-fullrow-bigger-height: 44px !default;
58
53
  $ddt-icon-bg-color: $content-bg-color !default;
59
54
 
@@ -61,11 +56,11 @@ $ddt-icon-bg-color: $content-bg-color !default;
61
56
  $ddt-chip-bg-color: $content-bg-color-alt2!default;
62
57
  $ddt-popup-background-color: $flyout-bg-color !default;
63
58
  $ddt-popup-border-color: $border-light !default;
64
- $ddt-chip-close: $secondary-text-color !default;
59
+ $ddt-chip-close: $icon-color !default;
65
60
  $ddt-chip-font-color: $content-text-color !default;
66
61
  $ddt-chip-hover-bg-color: $content-bg-color-alt3 !default;;
67
- $ddt-chip-hover-font-color: $content-text-color !default;
68
- $ddt-nodata-font-color: $content-text-color !default;
62
+ $ddt-chip-hover-font-color: $content-text-color-hover !default;
63
+ $ddt-nodata-font-color: $content-text-color-alt2 !default;
69
64
  $ddt-select-all-font-color: $content-text-color !default;
70
65
  $ddt-remains-font-color: $content-text-color-alt3 !default;
71
66
  $ddt-readonly-input-bg-color: $content-bg-color !default;