@syncfusion/ej2-vue-lists 19.4.55 → 20.2.36

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 (61) hide show
  1. package/CHANGELOG.md +0 -2
  2. package/dist/ej2-vue-lists.umd.min.js +11 -2
  3. package/dist/es6/ej2-vue-lists.es2015.js +16 -2
  4. package/dist/es6/ej2-vue-lists.es2015.js.map +1 -1
  5. package/dist/es6/ej2-vue-lists.es5.js +10 -1
  6. package/dist/es6/ej2-vue-lists.es5.js.map +1 -1
  7. package/dist/global/ej2-vue-lists.min.js +2 -2
  8. package/package.json +8 -8
  9. package/src/list-view/listview.component.d.ts +1 -0
  10. package/src/list-view/listview.component.js +10 -1
  11. package/styles/bootstrap-dark.css +21 -60
  12. package/styles/bootstrap.css +21 -59
  13. package/styles/bootstrap4.css +23 -69
  14. package/styles/bootstrap5-dark.css +30 -73
  15. package/styles/bootstrap5.css +30 -73
  16. package/styles/fabric-dark.css +21 -60
  17. package/styles/fabric.css +21 -59
  18. package/styles/fluent-dark.css +519 -0
  19. package/styles/fluent-dark.scss +2 -0
  20. package/styles/fluent.css +519 -0
  21. package/styles/fluent.scss +2 -0
  22. package/styles/highcontrast-light.css +21 -60
  23. package/styles/highcontrast.css +21 -59
  24. package/styles/list-view/bootstrap-dark.css +20 -56
  25. package/styles/list-view/bootstrap.css +20 -55
  26. package/styles/list-view/bootstrap4.css +22 -65
  27. package/styles/list-view/bootstrap5-dark.css +29 -69
  28. package/styles/list-view/bootstrap5.css +29 -69
  29. package/styles/list-view/fabric-dark.css +20 -56
  30. package/styles/list-view/fabric.css +20 -55
  31. package/styles/list-view/fluent-dark.css +495 -0
  32. package/styles/list-view/fluent-dark.scss +1 -0
  33. package/styles/list-view/fluent.css +495 -0
  34. package/styles/list-view/fluent.scss +1 -0
  35. package/styles/list-view/highcontrast-light.css +20 -56
  36. package/styles/list-view/highcontrast.css +20 -55
  37. package/styles/list-view/material-dark.css +20 -56
  38. package/styles/list-view/material.css +20 -55
  39. package/styles/list-view/tailwind-dark.css +32 -95
  40. package/styles/list-view/tailwind.css +32 -95
  41. package/styles/material-dark.css +21 -60
  42. package/styles/material.css +21 -59
  43. package/styles/sortable/bootstrap-dark.css +2 -5
  44. package/styles/sortable/bootstrap.css +2 -5
  45. package/styles/sortable/bootstrap4.css +2 -5
  46. package/styles/sortable/bootstrap5-dark.css +2 -5
  47. package/styles/sortable/bootstrap5.css +2 -5
  48. package/styles/sortable/fabric-dark.css +2 -5
  49. package/styles/sortable/fabric.css +2 -5
  50. package/styles/sortable/fluent-dark.css +23 -0
  51. package/styles/sortable/fluent-dark.scss +1 -0
  52. package/styles/sortable/fluent.css +23 -0
  53. package/styles/sortable/fluent.scss +1 -0
  54. package/styles/sortable/highcontrast-light.css +2 -5
  55. package/styles/sortable/highcontrast.css +2 -5
  56. package/styles/sortable/material-dark.css +2 -5
  57. package/styles/sortable/material.css +2 -5
  58. package/styles/sortable/tailwind-dark.css +2 -5
  59. package/styles/sortable/tailwind.css +2 -5
  60. package/styles/tailwind-dark.css +33 -99
  61. package/styles/tailwind.css +33 -99
@@ -0,0 +1,519 @@
1
+ .e-icon-collapsible::before {
2
+ content: "\e748";
3
+ }
4
+
5
+ .e-icon-back::before {
6
+ content: "\e773";
7
+ font-size: 14px;
8
+ }
9
+
10
+ .e-bigger .e-listview .e-list-item,
11
+ .e-listview.e-bigger .e-list-item {
12
+ border-bottom: 0 solid #292827;
13
+ border-left: 0 solid transparent;
14
+ border-right: 0 solid transparent;
15
+ border-top: 0 solid transparent;
16
+ }
17
+ .e-bigger .e-listview:not(.e-list-template) .e-list-item,
18
+ .e-listview.e-bigger:not(.e-list-template) .e-list-item {
19
+ height: 44px;
20
+ line-height: 24px;
21
+ position: relative;
22
+ }
23
+ .e-bigger .e-listview .e-text-content,
24
+ .e-listview.e-bigger .e-text-content {
25
+ font-size: 16px;
26
+ }
27
+ .e-bigger .e-listview .e-list-group-item,
28
+ .e-listview.e-bigger .e-list-group-item {
29
+ height: 44px;
30
+ line-height: 24px;
31
+ padding: 10px 16px;
32
+ font-size: 16px;
33
+ }
34
+ .e-bigger .e-listview .e-list-header,
35
+ .e-listview.e-bigger .e-list-header {
36
+ -ms-flex-align: center;
37
+ align-items: center;
38
+ display: -ms-flexbox;
39
+ display: flex;
40
+ font-weight: 600;
41
+ height: 44px;
42
+ font-size: 14px;
43
+ line-height: 22px;
44
+ padding: 10px 16px;
45
+ }
46
+ .e-bigger .e-listview .e-list-header .e-text.header,
47
+ .e-listview.e-bigger .e-list-header .e-text.header {
48
+ display: none;
49
+ }
50
+ .e-bigger .e-listview .e-list-header .e-headertemplate-text.nested-header,
51
+ .e-listview.e-bigger .e-list-header .e-headertemplate-text.nested-header {
52
+ display: none;
53
+ }
54
+ .e-bigger .e-listview .e-list-header .e-text,
55
+ .e-listview.e-bigger .e-list-header .e-text {
56
+ font-size: 14px;
57
+ }
58
+ .e-bigger .e-listview .e-listview-checkbox.e-checkbox-left,
59
+ .e-listview.e-bigger .e-listview-checkbox.e-checkbox-left {
60
+ margin: 0 16px 0 0;
61
+ border: 0;
62
+ padding: 0;
63
+ }
64
+ .e-bigger .e-listview.e-rtl.e-list-template .e-list-wrapper.e-list-avatar .e-avatar,
65
+ .e-listview.e-bigger.e-rtl.e-list-template .e-list-wrapper.e-list-avatar .e-avatar {
66
+ margin: 7px 12px 7px 16px;
67
+ }
68
+ .e-bigger .e-listview .e-text-content.e-checkbox .e-list-text,
69
+ .e-listview.e-bigger .e-text-content.e-checkbox .e-list-text {
70
+ width: calc(100% - 60px);
71
+ }
72
+ .e-bigger .e-listview.e-list-template .e-list-wrapper:not(.e-list-multi-line),
73
+ .e-listview.e-bigger.e-list-template .e-list-wrapper:not(.e-list-multi-line) {
74
+ padding: 12px 16px;
75
+ }
76
+ .e-bigger .e-listview.e-list-template .e-list-wrapper.e-list-multi-line,
77
+ .e-listview.e-bigger.e-list-template .e-list-wrapper.e-list-multi-line {
78
+ padding: 8px 4px;
79
+ }
80
+ .e-bigger .e-listview.e-list-template .e-list-wrapper.e-list-multi-line .e-list-item-header,
81
+ .e-listview.e-bigger.e-list-template .e-list-wrapper.e-list-multi-line .e-list-item-header {
82
+ font-size: 16px;
83
+ line-height: 24px;
84
+ }
85
+ .e-bigger .e-listview.e-list-template .e-list-wrapper.e-list-multi-line .e-list-content,
86
+ .e-listview.e-bigger.e-list-template .e-list-wrapper.e-list-multi-line .e-list-content {
87
+ font-size: 14px;
88
+ line-height: 22px;
89
+ }
90
+ .e-bigger .e-listview.e-list-template .e-list-wrapper.e-list-avatar .e-avatar,
91
+ .e-listview.e-bigger.e-list-template .e-list-wrapper.e-list-avatar .e-avatar {
92
+ height: 48px;
93
+ width: 48px;
94
+ }
95
+ .e-bigger .e-listview.e-list-template .e-list-wrapper:not(.e-list-multi-line) .e-list-content,
96
+ .e-listview.e-bigger.e-list-template .e-list-wrapper:not(.e-list-multi-line) .e-list-content {
97
+ font-size: 16px;
98
+ line-height: 24px;
99
+ }
100
+
101
+ .e-listview {
102
+ -webkit-overflow-scrolling: touch;
103
+ border: 1px solid;
104
+ border-radius: 0;
105
+ display: block;
106
+ overflow: auto;
107
+ position: relative;
108
+ width: 100%;
109
+ }
110
+ .e-listview:not(.e-list-template) .e-list-item {
111
+ height: 38px;
112
+ line-height: 22px;
113
+ padding: 7px 12px 7px 12px;
114
+ position: relative;
115
+ }
116
+ .e-listview .e-list-item {
117
+ border-bottom: 1px solid;
118
+ cursor: pointer;
119
+ }
120
+
121
+ .e-listview .e-list-parent {
122
+ margin: 0;
123
+ padding: 0;
124
+ }
125
+
126
+ .e-listview .e-list-header .e-text.header {
127
+ display: none;
128
+ }
129
+
130
+ .e-listview .e-icon-back {
131
+ margin-top: 0;
132
+ margin-right: 12px;
133
+ }
134
+
135
+ .e-listview .e-list-header .e-headertemplate-text.nested-header {
136
+ display: none;
137
+ }
138
+
139
+ .e-listview .e-list-header {
140
+ -ms-flex-align: center;
141
+ align-items: center;
142
+ display: -ms-flexbox;
143
+ display: flex;
144
+ font-weight: 600;
145
+ height: 38px;
146
+ padding: 0 12px;
147
+ }
148
+
149
+ .e-listview .e-has-header > .e-view {
150
+ top: 45px;
151
+ }
152
+
153
+ .e-listview .e-back-button {
154
+ cursor: pointer;
155
+ margin-right: 12px;
156
+ font-size: 12px;
157
+ }
158
+
159
+ .e-listview .e-list-group-item:first-child {
160
+ border: 0;
161
+ border-bottom: 0 solid #292827;
162
+ }
163
+
164
+ .e-listview .e-list-group-item {
165
+ border-bottom: 0 solid #292827;
166
+ border-top: 1px solid;
167
+ height: 38px;
168
+ line-height: 22px;
169
+ font-weight: 600;
170
+ padding: 7px 12px 7px 12px;
171
+ }
172
+ .e-listview .e-list-group-item .e-list-text {
173
+ cursor: default;
174
+ }
175
+
176
+ .e-listview .e-icon-collapsible {
177
+ cursor: pointer;
178
+ font-size: 12px;
179
+ position: absolute;
180
+ right: 0%;
181
+ top: 50%;
182
+ transform: translateY(-50%);
183
+ }
184
+
185
+ .e-listview .e-text-content {
186
+ height: 100%;
187
+ position: relative;
188
+ vertical-align: middle;
189
+ }
190
+
191
+ .e-listview .e-text-content * {
192
+ display: inline-block;
193
+ vertical-align: middle;
194
+ }
195
+
196
+ .e-listview .e-text-content.e-checkbox .e-list-text {
197
+ width: calc(100% - 40px);
198
+ }
199
+
200
+ .e-listview .e-text-content.e-checkbox.e-checkbox-left .e-list-icon + .e-list-text {
201
+ width: calc(100% - 90px);
202
+ }
203
+
204
+ .e-listview .e-text-content.e-checkbox.e-checkbox-right .e-list-icon + .e-list-text {
205
+ width: calc(100% - 80px);
206
+ }
207
+
208
+ .e-listview .e-list-item.e-checklist.e-has-child .e-text-content.e-checkbox.e-checkbox-right .e-list-icon + .e-list-text {
209
+ width: calc(100% - 92px);
210
+ }
211
+
212
+ .e-listview .e-checkbox .e-checkbox-left {
213
+ margin: -2px 10px 0 0;
214
+ }
215
+
216
+ .e-listview .e-checkbox .e-checkbox-right {
217
+ margin: -2px 0 0 8px;
218
+ }
219
+
220
+ .e-listview .e-list-text {
221
+ cursor: pointer;
222
+ display: inline-block;
223
+ overflow: hidden;
224
+ text-overflow: ellipsis;
225
+ vertical-align: middle;
226
+ white-space: nowrap;
227
+ width: 100%;
228
+ }
229
+
230
+ .e-listview .e-list-icon + .e-list-text {
231
+ width: calc(100% - 60px);
232
+ }
233
+
234
+ .e-listview .e-icon-wrapper .e-list-text {
235
+ width: calc(100% - 60px);
236
+ }
237
+
238
+ .e-listview .e-icon-wrapper.e-text-content.e-checkbox .e-list-text {
239
+ width: calc(100% - 60px);
240
+ }
241
+
242
+ .e-listview .e-list-icon {
243
+ margin-right: 12px;
244
+ height: 20px;
245
+ width: 20px;
246
+ }
247
+
248
+ .e-listview .e-content {
249
+ overflow: hidden;
250
+ position: relative;
251
+ }
252
+
253
+ .e-listview .e-list-header.e-list-navigation .e-text {
254
+ cursor: pointer;
255
+ }
256
+
257
+ .e-listview .e-list-header .e-text {
258
+ cursor: default;
259
+ text-indent: 0;
260
+ }
261
+
262
+ .e-listview .e-text .e-headertext {
263
+ display: inline-block;
264
+ line-height: 18px;
265
+ }
266
+
267
+ .e-listview.e-rtl {
268
+ direction: rtl;
269
+ }
270
+ .e-listview.e-rtl .e-back-button {
271
+ margin-left: 12px;
272
+ margin-right: 0;
273
+ }
274
+ .e-listview.e-rtl .e-list-icon {
275
+ margin-left: 16px;
276
+ margin-right: 0;
277
+ }
278
+ .e-listview.e-rtl .e-icon-collapsible {
279
+ left: 0%;
280
+ right: initial;
281
+ top: 50%;
282
+ transform: translateY(-50%) rotate(180deg);
283
+ }
284
+ .e-listview.e-rtl .e-list-header .e-text {
285
+ cursor: pointer;
286
+ }
287
+ .e-listview.e-rtl .e-back-button {
288
+ transform: rotate(180deg);
289
+ }
290
+ .e-listview.e-rtl .e-icon-back {
291
+ margin-top: 4px;
292
+ }
293
+ .e-listview.e-rtl .e-checkbox .e-checkbox-left {
294
+ margin: 0 3px 3px 12px;
295
+ }
296
+ .e-listview.e-rtl .e-checkbox .e-checkbox-right {
297
+ margin: -2px 8px 0 0;
298
+ }
299
+
300
+ .e-listview {
301
+ border-color: #292827;
302
+ font-family: "Segoe UI", -apple-system, BlinkMacSystemFont, "Roboto", "Helvetica Neue", sans-serif;
303
+ font-size: 14px;
304
+ }
305
+ .e-listview .e-list-header {
306
+ background-color: transparent;
307
+ border-color: #292827;
308
+ color: #0078d4;
309
+ font-size: 14px;
310
+ }
311
+
312
+ .e-listview .e-icons {
313
+ color: #a19f9d;
314
+ }
315
+
316
+ .e-listview .e-list-item {
317
+ background-color: transparent;
318
+ border-bottom: 0 solid #292827;
319
+ border-left: 0 solid transparent;
320
+ border-right: 0 solid transparent;
321
+ border-top: 0 solid transparent;
322
+ color: #f3f2f1;
323
+ }
324
+
325
+ .e-listview .e-list-item.e-hover, .e-listview .e-list-item.e-hover.e-active.e-checklist {
326
+ background-color: #252423;
327
+ border-color: #292827;
328
+ color: #f3f2f1;
329
+ }
330
+
331
+ .e-listview .e-list-item.e-active {
332
+ background-color: #292827;
333
+ color: #f3f2f1;
334
+ }
335
+
336
+ .e-listview .e-list-item.e-active.e-checklist {
337
+ background-color: transparent;
338
+ color: #f3f2f1;
339
+ }
340
+
341
+ .e-listview .e-list-item.e-focused, .e-listview .e-list-item.e-focused.e-active.e-checklist {
342
+ background-color: #292827;
343
+ color: #f3f2f1;
344
+ }
345
+
346
+ .e-listview .e-list-item.e-focused .e-checkbox-wrapper .e-frame.e-check, .e-listview .e-list-item.e-focused .e-css.e-checkbox-wrapper .e-frame.e-check {
347
+ background-color: #1b1a19;
348
+ border-color: #1b1a19;
349
+ color: #0078d4;
350
+ }
351
+
352
+ .e-listview .e-list-group-item {
353
+ background-color: transparent;
354
+ border-color: #292827;
355
+ color: #0078d4;
356
+ font-size: 14px;
357
+ }
358
+
359
+ .e-listview.e-list-template .e-list-wrapper {
360
+ height: inherit;
361
+ position: relative;
362
+ }
363
+ .e-listview.e-list-template .e-list-wrapper:not(.e-list-multi-line) {
364
+ padding: 10px 16px;
365
+ }
366
+ .e-listview.e-list-template .e-list-wrapper:not(.e-list-multi-line).e-list-badge:not(.e-list-avatar) {
367
+ padding: 2px 10px 2px 16px;
368
+ }
369
+ .e-listview.e-list-template .e-list-wrapper.e-list-multi-line {
370
+ padding: 6px 4px;
371
+ }
372
+ .e-listview.e-list-template .e-list-wrapper.e-list-multi-line .e-list-item-header {
373
+ color: #f3f2f1;
374
+ display: block;
375
+ font-size: 14px;
376
+ font-weight: 400;
377
+ line-height: 22px;
378
+ margin: 0;
379
+ overflow: hidden;
380
+ padding: 0;
381
+ text-overflow: ellipsis;
382
+ white-space: nowrap;
383
+ }
384
+ .e-listview.e-list-template .e-list-wrapper.e-list-multi-line .e-list-content {
385
+ color: #a19f9d;
386
+ display: block;
387
+ font-size: 12px;
388
+ font-weight: 400;
389
+ line-height: 18px;
390
+ margin: 0;
391
+ padding: 2px 0 0 0;
392
+ word-wrap: break-word;
393
+ }
394
+ .e-listview.e-list-template .e-list-wrapper.e-list-multi-line .e-list-content:not(.e-text-overflow) {
395
+ overflow: hidden;
396
+ text-overflow: ellipsis;
397
+ white-space: nowrap;
398
+ }
399
+ .e-listview.e-list-template .e-list-wrapper.e-list-avatar .e-avatar {
400
+ height: 40px;
401
+ left: 0;
402
+ position: absolute;
403
+ top: 0;
404
+ width: 40px;
405
+ margin: 7px 16px 7px 12px;
406
+ }
407
+ .e-listview.e-list-template .e-list-wrapper.e-list-avatar:not(.e-list-badge) {
408
+ padding-left: 68px;
409
+ padding-right: 16px;
410
+ }
411
+ .e-listview.e-list-template .e-list-wrapper.e-list-avatar-right:not(.e-list-badge) {
412
+ padding-left: 16px;
413
+ padding-right: 68px;
414
+ }
415
+ .e-listview.e-list-template .e-list-wrapper.e-list-avatar-right:not(.e-list-badge) .e-avatar {
416
+ height: 40px;
417
+ position: absolute;
418
+ right: 0;
419
+ top: 0;
420
+ width: 40px;
421
+ }
422
+ .e-listview.e-list-template .e-list-wrapper.e-list-multi-line.e-list-avatar .e-avatar {
423
+ top: 0;
424
+ }
425
+ .e-listview.e-list-template .e-list-wrapper.e-list-multi-line.e-list-avatar-right:not(.e-list-badge) .e-avatar {
426
+ top: 0;
427
+ }
428
+ .e-listview.e-list-template .e-list-wrapper.e-list-badge .e-badge {
429
+ font-size: 10px;
430
+ height: 18px;
431
+ line-height: 16px;
432
+ padding: 0;
433
+ position: absolute;
434
+ right: 12px;
435
+ top: 50%;
436
+ transform: translateY(-50%);
437
+ width: 20px;
438
+ border-radius: 10px;
439
+ }
440
+ .e-listview.e-list-template .e-list-wrapper.e-list-badge.e-list-avatar {
441
+ padding-left: 68px;
442
+ padding-right: 10px;
443
+ }
444
+ .e-listview.e-list-template .e-list-wrapper.e-list-badge:not(.e-list-avatar) {
445
+ padding-left: 16px;
446
+ padding-right: 10px;
447
+ }
448
+ .e-listview.e-list-template .e-list-wrapper:not(.e-list-multi-line) .e-list-content {
449
+ display: block;
450
+ margin: 0;
451
+ overflow: hidden;
452
+ padding: 8px 0;
453
+ text-overflow: ellipsis;
454
+ white-space: nowrap;
455
+ }
456
+ .e-listview.e-list-template .e-list-item.e-hover .e-list-item-header {
457
+ color: #f3f2f1;
458
+ }
459
+ .e-listview.e-list-template .e-list-item.e-hover .e-list-content {
460
+ color: #f3f2f1;
461
+ }
462
+ .e-listview.e-list-template .e-list-item.e-active .e-list-item-header {
463
+ color: #f3f2f1;
464
+ }
465
+ .e-listview.e-list-template .e-list-item.e-active .e-list-content {
466
+ color: #f3f2f1;
467
+ }
468
+ .e-listview.e-rtl.e-list-template .e-list-wrapper.e-list-avatar .e-avatar {
469
+ left: inherit;
470
+ right: 0;
471
+ }
472
+ .e-listview.e-rtl.e-list-template .e-list-wrapper.e-list-avatar:not(.e-list-badge) {
473
+ padding-left: 16px;
474
+ padding-right: 68px;
475
+ }
476
+ .e-listview.e-rtl.e-list-template .e-list-wrapper.e-list-avatar-right:not(.e-list-badge) {
477
+ padding-left: 68px;
478
+ padding-right: 16px;
479
+ }
480
+ .e-listview.e-rtl.e-list-template .e-list-wrapper.e-list-avatar-right:not(.e-list-badge) .e-avatar {
481
+ left: 0;
482
+ right: inherit;
483
+ }
484
+ .e-listview.e-rtl.e-list-template .e-list-wrapper.e-list-badge .e-badge {
485
+ left: 12px;
486
+ right: inherit;
487
+ }
488
+ .e-listview.e-rtl.e-list-template .e-list-wrapper.e-list-badge.e-list-avatar {
489
+ padding-left: 10px;
490
+ padding-right: 68px;
491
+ }
492
+ .e-listview.e-rtl.e-list-template .e-list-wrapper.e-list-badge:not(.e-list-avatar) {
493
+ padding-left: 10px;
494
+ padding-right: 16px;
495
+ }
496
+
497
+ .e-sortable {
498
+ outline: none;
499
+ position: relative;
500
+ -webkit-user-select: none;
501
+ -ms-user-select: none;
502
+ user-select: none;
503
+ }
504
+ .e-sortable .e-disabled {
505
+ background-image: none;
506
+ cursor: default;
507
+ filter: alpha(Opacity=35);
508
+ opacity: 0.35;
509
+ }
510
+ .e-sortable * {
511
+ box-sizing: border-box;
512
+ }
513
+ .e-sortable *:focus {
514
+ outline: none;
515
+ }
516
+
517
+ .e-sortableclone {
518
+ position: fixed !important;
519
+ }
@@ -0,0 +1,2 @@
1
+ @import 'list-view/fluent-dark.scss';
2
+ @import 'sortable/fluent-dark.scss';