@syncfusion/ej2-lists 19.3.53 → 19.4.38

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.
@@ -41,9 +41,12 @@
41
41
  font-size: 16px;
42
42
  padding: 12px 20px;
43
43
  }
44
- @if ($skin-name == 'tailwind') {
44
+ @if ($skin-name == 'tailwind' or $skin-name == 'FluentUI') {
45
45
  padding: $listview-template-padding;
46
46
  }
47
+ @if ($skin-name == 'FluentUI') {
48
+ font-size: 16px;
49
+ }
47
50
 
48
51
  .e-text-content {
49
52
  @if ($skin-name == 'tailwind') {
@@ -63,7 +66,7 @@
63
66
  line-height: 1.2;
64
67
  padding: 0 0 0 20px;
65
68
  }
66
- @if ($skin-name == 'tailwind') {
69
+ @if ($skin-name == 'tailwind' or $skin-name == 'FluentUI') {
67
70
  font-size: $text-sm;
68
71
  line-height: $listview-item-line-height;
69
72
  padding: $listview-template-padding;
@@ -135,6 +138,17 @@
135
138
  }
136
139
 
137
140
  &.e-rtl {
141
+ @if ($skin-name == 'FluentUI') {
142
+ &.e-list-template {
143
+ .e-list-wrapper {
144
+ &.e-list-avatar {
145
+ .e-avatar {
146
+ margin: $listview-template-avatar-rtl-margin;
147
+ }
148
+ }
149
+ }
150
+ }
151
+ }
138
152
  @if ($skin-name == 'tailwind') {
139
153
  &:not(.e-list-template) .e-list-item {
140
154
  padding: $listview-rtl-touch-item-padding;
@@ -244,6 +258,44 @@
244
258
  }
245
259
  }
246
260
  }
261
+
262
+ @if ($skin-name == 'FluentUI') {
263
+ &.e-list-template {
264
+ .e-list-wrapper {
265
+ &:not(.e-list-multi-line) {
266
+ padding: $listview-template-touch-padding;
267
+ }
268
+
269
+ &.e-list-multi-line {
270
+ padding: $listview-template-multiline-touch-padding;
271
+
272
+ .e-list-item-header {
273
+ font-size: $listview-template-touch-font-size;
274
+ line-height: 24px;
275
+ }
276
+
277
+ .e-list-content {
278
+ font-size: $listview-template-multiline-header-font-size;
279
+ line-height: 22px;
280
+ }
281
+ }
282
+
283
+ &.e-list-avatar {
284
+ .e-avatar {
285
+ height: $listview-template-avatar-touch-size;
286
+ width: $listview-template-avatar-touch-size;
287
+ }
288
+ }
289
+
290
+ &:not(.e-list-multi-line) {
291
+ .e-list-content {
292
+ font-size: $listview-template-touch-font-size;
293
+ line-height: 24px;
294
+ }
295
+ }
296
+ }
297
+ }
298
+ }
247
299
  }
248
300
 
249
301
  .e-listview {
@@ -309,7 +361,9 @@
309
361
  }
310
362
  }
311
363
  @else {
312
- border-bottom: 1px solid;
364
+ @if ($skin-name != 'FluentUI') {
365
+ border-bottom: 1px solid;
366
+ }
313
367
  padding: 0 $listview-header-text-padding;
314
368
  }
315
369
  }
@@ -320,12 +374,15 @@
320
374
 
321
375
  & .e-but-back {
322
376
  cursor: pointer;
323
- @if ($skin-name == 'tailwind') {
377
+ @if ($skin-name == 'tailwind' or $skin-name == 'FluentUI') {
324
378
  margin-right: $listview-back-padding-right;
325
379
  }
326
380
  @else {
327
381
  padding-right: $listview-back-padding-right;
328
382
  }
383
+ @if ($skin-name == 'FluentUI') {
384
+ font-size: 12px;
385
+ }
329
386
  }
330
387
 
331
388
  & .e-list-group-item:first-child {
@@ -429,7 +486,7 @@
429
486
 
430
487
  & .e-list-icon {
431
488
  margin-right: $listview-icon-margin-right;
432
- @if ($skin-name == 'tailwind') {
489
+ @if ($skin-name == 'tailwind' or $skin-name == 'FluentUI') {
433
490
  height: $listview-icon-size;
434
491
  width: $listview-icon-size;
435
492
  }
@@ -457,6 +514,13 @@
457
514
  &.e-rtl {
458
515
  direction: rtl;
459
516
 
517
+ @if ($skin-name == 'FluentUI') {
518
+ & .e-but-back {
519
+ margin-left: 12px;
520
+ margin-right: 0;
521
+ }
522
+ }
523
+
460
524
  &:not(.e-list-template) .e-list-item {
461
525
  @if ($skin-name == 'tailwind') {
462
526
  padding: $listview-rtl-item-padding;
@@ -99,6 +99,11 @@
99
99
  padding: 0 10px 0 16px;
100
100
  }
101
101
  }
102
+ @if ($skin-name == 'FluentUI') {
103
+ &.e-list-badge:not(.e-list-avatar) {
104
+ padding: 2px 10px 2px 16px;
105
+ }
106
+ }
102
107
  }
103
108
 
104
109
  &.e-list-multi-line {
@@ -108,7 +113,7 @@
108
113
  color: $listview-template-multiline-header-color;
109
114
  display: block;
110
115
  font-size: $listview-template-multiline-header-font-size;
111
- @if ($skin-name == 'tailwind' or $skin-name == 'bootstrap5') {
116
+ @if ($skin-name == 'tailwind' or $skin-name == 'FluentUI' or $skin-name == 'bootstrap5') {
112
117
  font-weight: $font-weight-normal;
113
118
  line-height: 22px;
114
119
  }
@@ -126,9 +131,14 @@
126
131
  color: $listview-template-multiline-content-color;
127
132
  display: block;
128
133
  font-size: $listview-template-multiline-content-font-size;
129
- @if ($skin-name == 'tailwind' or $skin-name == 'bootstrap5') {
134
+ @if ($skin-name == 'tailwind' or $skin-name == 'FluentUI' or $skin-name == 'bootstrap5') {
130
135
  font-weight: $font-weight-normal;
131
- line-height: 22px;
136
+ @if ($skin-name == 'FluentUI') {
137
+ line-height: 18px;
138
+ }
139
+ @else {
140
+ line-height: 22px;
141
+ }
132
142
  }
133
143
  margin: 0;
134
144
  padding: $listview-template-multiline-content-padding;
@@ -149,7 +159,7 @@
149
159
  position: absolute;
150
160
  top: $listview-template-avatar-top;
151
161
  width: $listview-template-avatar-size;
152
- @if ($skin-name == 'tailwind' or $skin-name == 'bootstrap5') {
162
+ @if ($skin-name == 'tailwind' or $skin-name == 'FluentUI' or $skin-name == 'bootstrap5') {
153
163
  margin: $listview-template-avatar-margin;
154
164
  }
155
165
  }
@@ -196,7 +206,7 @@
196
206
  top: 50%;
197
207
  transform: translateY(-50%);
198
208
  width: $listview-template-badge-width;
199
- @if ($skin-name == 'tailwind' or $skin-name == 'bootstrap5') {
209
+ @if ($skin-name == 'tailwind' or $skin-name == 'FluentUI' or $skin-name == 'bootstrap5') {
200
210
  border-radius: 10px;
201
211
  }
202
212
  }
@@ -0,0 +1,8 @@
1
+ .e-icon-collapsible::before {
2
+ content: '\e7c2';
3
+ }
4
+
5
+ .e-icon-back::before {
6
+ content: '\e7e4';
7
+ font-size: $listview-back-icon-font-size;
8
+ }