@syncfusion/ej2-lists 25.2.3 → 26.1.35

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 (105) hide show
  1. package/.eslintrc.json +3 -2
  2. package/dist/ej2-lists.min.js +2 -2
  3. package/dist/ej2-lists.umd.min.js +2 -2
  4. package/dist/ej2-lists.umd.min.js.map +1 -1
  5. package/dist/es6/ej2-lists.es2015.js +255 -279
  6. package/dist/es6/ej2-lists.es2015.js.map +1 -1
  7. package/dist/es6/ej2-lists.es5.js +241 -265
  8. package/dist/es6/ej2-lists.es5.js.map +1 -1
  9. package/dist/global/ej2-lists.min.js +2 -2
  10. package/dist/global/ej2-lists.min.js.map +1 -1
  11. package/dist/global/index.d.ts +1 -1
  12. package/package.json +10 -10
  13. package/src/common/list-base.d.ts +61 -30
  14. package/src/common/list-base.js +167 -94
  15. package/src/list-view/list-view.d.ts +7 -9
  16. package/src/list-view/list-view.js +42 -75
  17. package/src/list-view/virtualization.d.ts +0 -1
  18. package/src/list-view/virtualization.js +10 -66
  19. package/src/sortable/sortable.d.ts +5 -0
  20. package/src/sortable/sortable.js +14 -7
  21. package/styles/bootstrap-dark.css +100 -122
  22. package/styles/bootstrap-dark.scss +8 -2
  23. package/styles/bootstrap.css +100 -122
  24. package/styles/bootstrap.scss +8 -2
  25. package/styles/bootstrap4.css +139 -161
  26. package/styles/bootstrap4.scss +8 -2
  27. package/styles/bootstrap5-dark.css +101 -125
  28. package/styles/bootstrap5-dark.scss +8 -2
  29. package/styles/bootstrap5.css +101 -125
  30. package/styles/bootstrap5.scss +8 -2
  31. package/styles/fabric-dark.css +100 -122
  32. package/styles/fabric-dark.scss +8 -2
  33. package/styles/fabric.css +100 -122
  34. package/styles/fabric.scss +8 -2
  35. package/styles/fluent-dark.css +143 -165
  36. package/styles/fluent-dark.scss +8 -2
  37. package/styles/fluent.css +143 -165
  38. package/styles/fluent.scss +8 -2
  39. package/styles/fluent2.css +1485 -0
  40. package/styles/fluent2.scss +8 -0
  41. package/styles/highcontrast-light.css +100 -122
  42. package/styles/highcontrast-light.scss +8 -2
  43. package/styles/highcontrast.css +100 -122
  44. package/styles/highcontrast.scss +8 -2
  45. package/styles/list-view/_bootstrap4-definition.scss +5 -0
  46. package/styles/list-view/_bootstrap5.3-definition.scss +132 -0
  47. package/styles/list-view/_fluent2-definition.scss +132 -0
  48. package/styles/list-view/_layout.scss +377 -393
  49. package/styles/list-view/_material3-definition.scss +0 -7
  50. package/styles/list-view/_theme.scss +84 -95
  51. package/styles/list-view/bootstrap-dark.css +97 -121
  52. package/styles/list-view/bootstrap.css +97 -121
  53. package/styles/list-view/bootstrap4.css +136 -160
  54. package/styles/list-view/bootstrap5-dark.css +98 -124
  55. package/styles/list-view/bootstrap5.css +98 -124
  56. package/styles/list-view/fabric-dark.css +97 -121
  57. package/styles/list-view/fabric.css +97 -121
  58. package/styles/list-view/fluent-dark.css +140 -164
  59. package/styles/list-view/fluent.css +140 -164
  60. package/styles/list-view/fluent2.css +1455 -0
  61. package/styles/list-view/fluent2.scss +5 -0
  62. package/styles/list-view/highcontrast-light.css +97 -121
  63. package/styles/list-view/highcontrast.css +97 -121
  64. package/styles/list-view/icons/_bootstrap5.3.scss +8 -0
  65. package/styles/list-view/icons/_fluent2.scss +10 -0
  66. package/styles/list-view/material-dark.css +97 -121
  67. package/styles/list-view/material.css +97 -121
  68. package/styles/list-view/material3-dark.css +112 -136
  69. package/styles/list-view/material3.css +112 -136
  70. package/styles/list-view/tailwind-dark.css +207 -235
  71. package/styles/list-view/tailwind.css +207 -235
  72. package/styles/material-dark.css +100 -122
  73. package/styles/material-dark.scss +8 -2
  74. package/styles/material.css +100 -122
  75. package/styles/material.scss +8 -2
  76. package/styles/material3-dark.css +115 -137
  77. package/styles/material3-dark.scss +8 -2
  78. package/styles/material3.css +115 -137
  79. package/styles/material3.scss +8 -2
  80. package/styles/sortable/_bootstrap5.3-definition.scss +1 -0
  81. package/styles/sortable/_fluent2-definition.scss +1 -0
  82. package/styles/sortable/bootstrap-dark.css +3 -1
  83. package/styles/sortable/bootstrap.css +3 -1
  84. package/styles/sortable/bootstrap4.css +3 -1
  85. package/styles/sortable/bootstrap5-dark.css +3 -1
  86. package/styles/sortable/bootstrap5.css +3 -1
  87. package/styles/sortable/fabric-dark.css +3 -1
  88. package/styles/sortable/fabric.css +3 -1
  89. package/styles/sortable/fluent-dark.css +3 -1
  90. package/styles/sortable/fluent.css +3 -1
  91. package/styles/sortable/fluent2.css +1063 -0
  92. package/styles/sortable/fluent2.scss +3 -0
  93. package/styles/sortable/highcontrast-light.css +3 -1
  94. package/styles/sortable/highcontrast.css +3 -1
  95. package/styles/sortable/material-dark.css +3 -1
  96. package/styles/sortable/material.css +3 -1
  97. package/styles/sortable/material3-dark.css +4 -2
  98. package/styles/sortable/material3.css +4 -2
  99. package/styles/sortable/tailwind-dark.css +3 -1
  100. package/styles/sortable/tailwind.css +3 -1
  101. package/styles/tailwind-dark.css +210 -236
  102. package/styles/tailwind-dark.scss +8 -2
  103. package/styles/tailwind.css +210 -236
  104. package/styles/tailwind.scss +8 -2
  105. package/CHANGELOG.md +0 -544
@@ -44,7 +44,7 @@
44
44
  --color-sf-on-warning: 99, 52, 0;
45
45
  --color-sf-on-warning-container: 255, 220, 193;
46
46
  --color-sf-spreadsheet-gridline: 231, 224, 236;
47
- --color-sf-shadow-focus-ring1: 0 0 0 1px #000000, 0 0 0 3px #ffffff;
47
+ --color-sf-shadow-focus-ring1: 0 0 0 1px #000, 0 0 0 3px #fff;
48
48
  --color-sf-success-text: 0, 0, 0;
49
49
  --color-sf-warning-text: 0, 0, 0;
50
50
  --color-sf-info-text: 0, 0, 0;
@@ -63,69 +63,6 @@
63
63
  }
64
64
 
65
65
  /* stylelint-disable property-no-vendor-prefix */
66
- .e-bigger .e-listview .e-list-item,
67
- .e-listview.e-bigger .e-list-item {
68
- border-bottom: 0 solid rgba(var(--color-sf-outline-variant));
69
- border-left: 0 solid transparent;
70
- border-right: 0 solid transparent;
71
- border-top: 0 solid transparent;
72
- }
73
- .e-bigger .e-listview:not(.e-list-template) .e-list-item,
74
- .e-listview.e-bigger:not(.e-list-template) .e-list-item {
75
- height: 48px;
76
- line-height: 24px;
77
- position: relative;
78
- }
79
- .e-bigger .e-listview .e-text-content,
80
- .e-listview.e-bigger .e-text-content {
81
- font-size: 16px;
82
- }
83
- .e-bigger .e-listview .e-list-group-item,
84
- .e-listview.e-bigger .e-list-group-item {
85
- height: 40px;
86
- line-height: 20px;
87
- }
88
- .e-bigger .e-listview .e-list-group-item .e-text-content,
89
- .e-listview.e-bigger .e-list-group-item .e-text-content {
90
- font-size: 14px;
91
- line-height: 20px;
92
- }
93
- .e-bigger .e-listview .e-list-header,
94
- .e-listview.e-bigger .e-list-header {
95
- -ms-flex-align: center;
96
- align-items: center;
97
- display: -ms-flexbox;
98
- display: flex;
99
- font-weight: 600;
100
- height: 40px;
101
- }
102
- .e-bigger .e-listview .e-list-header .e-text.header,
103
- .e-listview.e-bigger .e-list-header .e-text.header {
104
- display: none;
105
- }
106
- .e-bigger .e-listview .e-list-header .e-headertemplate-text.nested-header,
107
- .e-listview.e-bigger .e-list-header .e-headertemplate-text.nested-header {
108
- display: none;
109
- }
110
- .e-bigger .e-listview .e-list-header .e-text,
111
- .e-listview.e-bigger .e-list-header .e-text {
112
- font-size: 14px;
113
- }
114
- .e-bigger .e-listview.e-rtl .e-list-icon,
115
- .e-listview.e-bigger.e-rtl .e-list-icon {
116
- margin-left: 16px;
117
- margin-right: 0;
118
- }
119
- .e-bigger .e-listview.e-rtl .e-icon-back,
120
- .e-listview.e-bigger.e-rtl .e-icon-back {
121
- margin-left: 14px;
122
- margin-right: 0;
123
- }
124
- .e-bigger .e-listview .e-text-content.e-checkbox .e-list-text,
125
- .e-listview.e-bigger .e-text-content.e-checkbox .e-list-text {
126
- width: calc(100% - 40px);
127
- }
128
-
129
66
  .e-listview {
130
67
  -webkit-overflow-scrolling: touch;
131
68
  border: 1px solid;
@@ -138,8 +75,8 @@
138
75
  .e-listview:not(.e-list-template) .e-list-item {
139
76
  height: 40px;
140
77
  line-height: 22px;
141
- padding: 10px 16px;
142
78
  position: relative;
79
+ padding: 10px 16px;
143
80
  }
144
81
  .e-listview .e-list-item {
145
82
  border-bottom: 1px solid;
@@ -151,28 +88,33 @@
151
88
  padding: 0;
152
89
  }
153
90
 
154
- .e-listview .e-list-header .e-text.header {
155
- display: none;
156
- }
157
-
158
91
  .e-listview .e-icon-back {
159
92
  margin-top: 0;
160
93
  margin-right: 14px;
161
94
  }
162
95
 
163
- .e-listview .e-list-header .e-headertemplate-text.nested-header {
164
- display: none;
165
- }
166
-
167
96
  .e-listview .e-list-header {
168
- -ms-flex-align: center;
169
- align-items: center;
97
+ -webkit-box-align: center;
98
+ -ms-flex-align: center;
99
+ align-items: center;
100
+ display: -webkit-box;
170
101
  display: -ms-flexbox;
171
102
  display: flex;
172
103
  font-weight: 600;
173
104
  height: 34px;
174
105
  padding: 0 16px;
175
106
  }
107
+ .e-listview .e-list-header .e-text.header,
108
+ .e-listview .e-list-header .e-headertemplate-text.nested-header {
109
+ display: none;
110
+ }
111
+ .e-listview .e-list-header.e-list-navigation .e-text {
112
+ cursor: pointer;
113
+ }
114
+ .e-listview .e-list-header .e-text {
115
+ cursor: default;
116
+ text-indent: 0;
117
+ }
176
118
 
177
119
  .e-listview .e-has-header > .e-view {
178
120
  top: 45px;
@@ -183,11 +125,6 @@
183
125
  padding-right: 8px;
184
126
  }
185
127
 
186
- .e-listview .e-list-group-item:first-child {
187
- border: 0;
188
- border-bottom: 0 solid rgba(var(--color-sf-outline-variant));
189
- }
190
-
191
128
  .e-listview .e-list-group-item {
192
129
  border-bottom: 1px solid rgba(var(--color-sf-outline-variant));
193
130
  border-top: 0 solid;
@@ -201,6 +138,10 @@
201
138
  .e-listview .e-list-group-item .e-list-text {
202
139
  cursor: default;
203
140
  }
141
+ .e-listview .e-list-group-item:first-child {
142
+ border: 0;
143
+ border-bottom: 0 solid rgba(var(--color-sf-outline-variant));
144
+ }
204
145
 
205
146
  .e-listview .e-icon-collapsible {
206
147
  cursor: pointer;
@@ -208,7 +149,8 @@
208
149
  position: absolute;
209
150
  right: 0%;
210
151
  top: 50%;
211
- transform: translateY(-50%);
152
+ -webkit-transform: translateY(-50%);
153
+ transform: translateY(-50%);
212
154
  }
213
155
 
214
156
  .e-listview .e-text-content {
@@ -216,24 +158,21 @@
216
158
  position: relative;
217
159
  vertical-align: middle;
218
160
  }
219
-
220
- .e-listview .e-text-content * {
221
- display: inline-block;
222
- vertical-align: middle;
223
- }
224
-
225
161
  .e-listview .e-text-content.e-checkbox .e-list-text {
226
162
  width: calc(100% - 40px);
227
163
  }
228
-
229
164
  .e-listview .e-text-content.e-checkbox.e-checkbox-left .e-list-icon + .e-list-text {
230
165
  width: calc(100% - 90px);
231
166
  }
232
-
233
167
  .e-listview .e-text-content.e-checkbox.e-checkbox-right .e-list-icon + .e-list-text {
234
168
  width: calc(100% - 80px);
235
169
  }
236
170
 
171
+ .e-listview .e-text-content * {
172
+ display: inline-block;
173
+ vertical-align: middle;
174
+ }
175
+
237
176
  .e-listview .e-list-item.e-checklist.e-has-child .e-text-content.e-checkbox.e-checkbox-right .e-list-icon + .e-list-text {
238
177
  width: calc(100% - 92px);
239
178
  }
@@ -241,7 +180,6 @@
241
180
  .e-listview .e-checkbox .e-checkbox-left {
242
181
  margin: 0 8px 0 0;
243
182
  }
244
-
245
183
  .e-listview .e-checkbox .e-checkbox-right {
246
184
  margin: -2px 0 0 8px;
247
185
  }
@@ -256,15 +194,7 @@
256
194
  width: 100%;
257
195
  }
258
196
 
259
- .e-listview .e-list-icon + .e-list-text {
260
- width: calc(100% - 60px);
261
- }
262
-
263
- .e-listview .e-icon-wrapper .e-list-text {
264
- width: calc(100% - 60px);
265
- }
266
-
267
- .e-listview .e-icon-wrapper.e-text-content.e-checkbox .e-list-text {
197
+ .e-listview .e-list-icon + .e-list-text, .e-listview .e-icon-wrapper .e-list-text, .e-listview .e-icon-wrapper.e-text-content.e-checkbox .e-list-text {
268
198
  width: calc(100% - 60px);
269
199
  }
270
200
 
@@ -279,15 +209,6 @@
279
209
  position: relative;
280
210
  }
281
211
 
282
- .e-listview .e-list-header.e-list-navigation .e-text {
283
- cursor: pointer;
284
- }
285
-
286
- .e-listview .e-list-header .e-text {
287
- cursor: default;
288
- text-indent: 0;
289
- }
290
-
291
212
  .e-listview .e-text .e-headertext {
292
213
  display: inline-block;
293
214
  line-height: 18px;
@@ -304,13 +225,15 @@
304
225
  left: 0%;
305
226
  right: initial;
306
227
  top: 50%;
307
- transform: translateY(-50%) rotate(180deg);
228
+ -webkit-transform: translateY(-50%) rotate(180deg);
229
+ transform: translateY(-50%) rotate(180deg);
308
230
  }
309
231
  .e-listview.e-rtl .e-list-header .e-text {
310
232
  cursor: pointer;
311
233
  }
312
234
  .e-listview.e-rtl .e-back-button {
313
- transform: rotate(180deg);
235
+ -webkit-transform: rotate(180deg);
236
+ transform: rotate(180deg);
314
237
  }
315
238
  .e-listview.e-rtl .e-icon-back {
316
239
  margin-top: 0;
@@ -322,6 +245,69 @@
322
245
  margin: -2px 8px 0 0;
323
246
  }
324
247
 
248
+ .e-bigger .e-listview .e-list-item,
249
+ .e-listview.e-bigger .e-list-item {
250
+ border-bottom: 0 solid rgba(var(--color-sf-outline-variant));
251
+ border-left: 0 solid transparent;
252
+ border-right: 0 solid transparent;
253
+ border-top: 0 solid transparent;
254
+ }
255
+ .e-bigger .e-listview:not(.e-list-template) .e-list-item,
256
+ .e-listview.e-bigger:not(.e-list-template) .e-list-item {
257
+ height: 48px;
258
+ line-height: 24px;
259
+ position: relative;
260
+ }
261
+ .e-bigger .e-listview .e-text-content,
262
+ .e-listview.e-bigger .e-text-content {
263
+ font-size: 16px;
264
+ }
265
+ .e-bigger .e-listview .e-list-group-item,
266
+ .e-listview.e-bigger .e-list-group-item {
267
+ height: 40px;
268
+ line-height: 20px;
269
+ }
270
+ .e-bigger .e-listview .e-list-group-item .e-text-content,
271
+ .e-listview.e-bigger .e-list-group-item .e-text-content {
272
+ font-size: 14px;
273
+ line-height: 20px;
274
+ }
275
+ .e-bigger .e-listview .e-list-header,
276
+ .e-listview.e-bigger .e-list-header {
277
+ -webkit-box-align: center;
278
+ -ms-flex-align: center;
279
+ align-items: center;
280
+ display: -webkit-box;
281
+ display: -ms-flexbox;
282
+ display: flex;
283
+ font-weight: 600;
284
+ height: 40px;
285
+ }
286
+ .e-bigger .e-listview .e-list-header .e-text.header,
287
+ .e-bigger .e-listview .e-list-header .e-headertemplate-text.nested-header,
288
+ .e-listview.e-bigger .e-list-header .e-text.header,
289
+ .e-listview.e-bigger .e-list-header .e-headertemplate-text.nested-header {
290
+ display: none;
291
+ }
292
+ .e-bigger .e-listview .e-list-header .e-text,
293
+ .e-listview.e-bigger .e-list-header .e-text {
294
+ font-size: 14px;
295
+ }
296
+ .e-bigger .e-listview.e-rtl .e-list-icon,
297
+ .e-listview.e-bigger.e-rtl .e-list-icon {
298
+ margin-left: 16px;
299
+ margin-right: 0;
300
+ }
301
+ .e-bigger .e-listview.e-rtl .e-icon-back,
302
+ .e-listview.e-bigger.e-rtl .e-icon-back {
303
+ margin-left: 14px;
304
+ margin-right: 0;
305
+ }
306
+ .e-bigger .e-listview .e-text-content.e-checkbox .e-list-text,
307
+ .e-listview.e-bigger .e-text-content.e-checkbox .e-list-text {
308
+ width: calc(100% - 40px);
309
+ }
310
+
325
311
  .e-listview {
326
312
  border-color: rgba(var(--color-sf-outline-variant));
327
313
  font-family: "Roboto", -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", sans-serif;
@@ -329,8 +315,8 @@
329
315
  }
330
316
  .e-listview .e-list-header {
331
317
  background-color: transparent;
332
- border-color: rgba(var(--color-sf-outline-variant));
333
318
  color: rgba(var(--color-sf-on-surface-variant));
319
+ border-color: rgba(var(--color-sf-outline-variant));
334
320
  font-size: 12px;
335
321
  }
336
322
 
@@ -339,25 +325,22 @@
339
325
  }
340
326
 
341
327
  .e-listview .e-list-item {
342
- background-color: transparent;
343
328
  border-bottom: 0 solid rgba(var(--color-sf-outline-variant));
344
329
  border-left: 0 solid transparent;
345
330
  border-right: 0 solid transparent;
346
331
  border-top: 0 solid transparent;
332
+ background-color: transparent;
347
333
  color: rgba(var(--color-sf-on-surface));
348
334
  }
349
-
350
335
  .e-listview .e-list-item.e-hover, .e-listview .e-list-item.e-hover.e-active.e-checklist {
351
336
  background-color: rgba(var(--color-sf-on-surface), 0.05);
352
- border-color: rgba(var(--color-sf-outline-variant));
353
337
  color: rgba(var(--color-sf-on-surface));
338
+ border-color: rgba(var(--color-sf-outline-variant));
354
339
  }
355
-
356
340
  .e-listview .e-list-item.e-active {
357
341
  background-color: rgba(var(--color-sf-primary-container));
358
342
  color: rgba(var(--color-sf-on-surface));
359
343
  }
360
-
361
344
  .e-listview .e-list-item.e-active.e-checklist {
362
345
  background-color: transparent;
363
346
  color: rgba(var(--color-sf-on-surface));
@@ -365,16 +348,14 @@
365
348
  .e-listview .e-list-item.e-active.e-checklist .e-checkbox-wrapper .e-frame.e-check {
366
349
  color: rgba(var(--color-sf-on-primary));
367
350
  }
368
-
369
351
  .e-listview .e-list-item.e-focused, .e-listview .e-list-item.e-focused.e-active.e-checklist {
370
352
  background-color: rgba(var(--color-sf-primary-container));
371
353
  color: rgba(var(--color-sf-on-surface));
372
354
  }
373
-
374
355
  .e-listview .e-list-group-item {
375
356
  background-color: transparent;
376
- border-color: rgba(var(--color-sf-outline-variant));
377
357
  color: rgba(var(--color-sf-on-surface-variant));
358
+ border-color: rgba(var(--color-sf-outline-variant));
378
359
  font-size: 12px;
379
360
  }
380
361
 
@@ -417,10 +398,10 @@
417
398
  }
418
399
  .e-listview.e-list-template .e-list-wrapper.e-list-avatar .e-avatar {
419
400
  height: 40px;
401
+ width: 40px;
402
+ top: 0;
420
403
  left: 0;
421
404
  position: absolute;
422
- top: 0;
423
- width: 40px;
424
405
  margin: 7px 16px 7px 12px;
425
406
  background: rgba(var(--color-sf-primary));
426
407
  }
@@ -434,10 +415,10 @@
434
415
  }
435
416
  .e-listview.e-list-template .e-list-wrapper.e-list-avatar-right:not(.e-list-badge) .e-avatar {
436
417
  height: 40px;
437
- position: absolute;
438
- right: 0;
439
- top: 0;
440
418
  width: 40px;
419
+ top: 0;
420
+ right: 0;
421
+ position: absolute;
441
422
  }
442
423
  .e-listview.e-list-template .e-list-wrapper.e-list-multi-line.e-list-avatar .e-avatar {
443
424
  top: 0;
@@ -448,13 +429,14 @@
448
429
  .e-listview.e-list-template .e-list-wrapper.e-list-badge .e-badge {
449
430
  font-size: 12px;
450
431
  height: 20px;
432
+ width: 36px;
433
+ top: 50%;
434
+ right: 12px;
451
435
  line-height: 20px;
452
436
  padding: 0;
453
437
  position: absolute;
454
- right: 12px;
455
- top: 50%;
456
- transform: translateY(-50%);
457
- width: 36px;
438
+ -webkit-transform: translateY(-50%);
439
+ transform: translateY(-50%);
458
440
  border-radius: 10px;
459
441
  }
460
442
  .e-listview.e-list-template .e-list-wrapper.e-list-badge.e-list-avatar {
@@ -473,16 +455,10 @@
473
455
  text-overflow: ellipsis;
474
456
  white-space: nowrap;
475
457
  }
476
- .e-listview.e-list-template .e-list-item.e-hover .e-list-item-header {
477
- color: rgba(var(--color-sf-on-surface));
478
- }
479
- .e-listview.e-list-template .e-list-item.e-hover .e-list-content {
480
- color: rgba(var(--color-sf-on-surface));
481
- }
482
- .e-listview.e-list-template .e-list-item.e-active .e-list-item-header {
458
+ .e-listview.e-list-template .e-list-item.e-hover .e-list-item-header, .e-listview.e-list-template .e-list-item.e-hover .e-list-content {
483
459
  color: rgba(var(--color-sf-on-surface));
484
460
  }
485
- .e-listview.e-list-template .e-list-item.e-active .e-list-content {
461
+ .e-listview.e-list-template .e-list-item.e-active .e-list-item-header, .e-listview.e-list-template .e-list-item.e-active .e-list-content {
486
462
  color: rgba(var(--color-sf-on-surface));
487
463
  }
488
464
  .e-listview.e-rtl.e-list-template .e-list-wrapper.e-list-avatar .e-avatar {