@syncfusion/ej2-react-lists 19.4.48 → 20.1.47

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 (41) hide show
  1. package/CHANGELOG.md +0 -2
  2. package/dist/ej2-react-lists.umd.min.js +1 -1
  3. package/package.json +8 -8
  4. package/styles/bootstrap-dark.css +16 -3
  5. package/styles/bootstrap.css +16 -3
  6. package/styles/bootstrap4.css +18 -5
  7. package/styles/bootstrap5-dark.css +25 -12
  8. package/styles/bootstrap5.css +25 -12
  9. package/styles/fabric-dark.css +16 -3
  10. package/styles/fabric.css +16 -3
  11. package/styles/fluent-dark.css +580 -0
  12. package/styles/fluent-dark.scss +2 -0
  13. package/styles/fluent.css +580 -0
  14. package/styles/fluent.scss +2 -0
  15. package/styles/highcontrast-light.css +16 -3
  16. package/styles/highcontrast.css +16 -3
  17. package/styles/list-view/bootstrap-dark.css +16 -3
  18. package/styles/list-view/bootstrap.css +16 -3
  19. package/styles/list-view/bootstrap4.css +18 -5
  20. package/styles/list-view/bootstrap5-dark.css +25 -12
  21. package/styles/list-view/bootstrap5.css +25 -12
  22. package/styles/list-view/fabric-dark.css +16 -3
  23. package/styles/list-view/fabric.css +16 -3
  24. package/styles/list-view/fluent-dark.css +553 -0
  25. package/styles/list-view/fluent-dark.scss +1 -0
  26. package/styles/list-view/fluent.css +553 -0
  27. package/styles/list-view/fluent.scss +1 -0
  28. package/styles/list-view/highcontrast-light.css +16 -3
  29. package/styles/list-view/highcontrast.css +16 -3
  30. package/styles/list-view/material-dark.css +16 -3
  31. package/styles/list-view/material.css +16 -3
  32. package/styles/list-view/tailwind-dark.css +31 -18
  33. package/styles/list-view/tailwind.css +31 -18
  34. package/styles/material-dark.css +16 -3
  35. package/styles/material.css +16 -3
  36. package/styles/sortable/fluent-dark.css +26 -0
  37. package/styles/sortable/fluent-dark.scss +1 -0
  38. package/styles/sortable/fluent.css +26 -0
  39. package/styles/sortable/fluent.scss +1 -0
  40. package/styles/tailwind-dark.css +31 -18
  41. package/styles/tailwind.css +31 -18
@@ -58,6 +58,11 @@
58
58
  font-size: 20px;
59
59
  }
60
60
 
61
+ .e-bigger .e-listview .e-text-content.e-checkbox .e-list-text,
62
+ .e-listview.e-bigger .e-text-content.e-checkbox .e-list-text {
63
+ width: calc(100% - 40px);
64
+ }
65
+
61
66
  .e-listview {
62
67
  -webkit-overflow-scrolling: touch;
63
68
  border: 0 solid;
@@ -112,7 +117,7 @@
112
117
  top: 45px;
113
118
  }
114
119
 
115
- .e-listview .e-but-back {
120
+ .e-listview .e-back-button {
116
121
  cursor: pointer;
117
122
  padding-right: 30px;
118
123
  }
@@ -131,6 +136,10 @@
131
136
  padding: 0 16px;
132
137
  }
133
138
 
139
+ .e-listview .e-list-group-item .e-list-text {
140
+ cursor: default;
141
+ }
142
+
134
143
  .e-listview .e-icon-collapsible {
135
144
  cursor: pointer;
136
145
  font-size: 12px;
@@ -208,8 +217,12 @@
208
217
  position: relative;
209
218
  }
210
219
 
211
- .e-listview .e-list-header .e-text {
220
+ .e-listview .e-list-header.e-list-navigation .e-text {
212
221
  cursor: pointer;
222
+ }
223
+
224
+ .e-listview .e-list-header .e-text {
225
+ cursor: default;
213
226
  text-indent: 0;
214
227
  }
215
228
 
@@ -238,7 +251,7 @@
238
251
  cursor: pointer;
239
252
  }
240
253
 
241
- .e-listview.e-rtl .e-but-back {
254
+ .e-listview.e-rtl .e-back-button {
242
255
  transform: rotate(180deg);
243
256
  }
244
257
 
@@ -1,11 +1,11 @@
1
1
  @import url("https://fonts.googleapis.com/css2?family=Inter:wght@100;200;300;400;500;600;700;800;900&display=swap");
2
- .e-listview .e-icon-collapsible::before {
3
- content: '\e7b7';
2
+ .e-icon-collapsible::before {
3
+ content: '\e748';
4
4
  }
5
5
 
6
- .e-listview .e-icon-back::before {
7
- content: '\e7a5';
8
- font-size: 20px;
6
+ .e-icon-back::before {
7
+ content: '\e773';
8
+ font-size: 16px;
9
9
  }
10
10
 
11
11
  .e-bigger .e-listview .e-list-item,
@@ -75,15 +75,15 @@
75
75
  font-size: 14px;
76
76
  }
77
77
 
78
- .e-bigger .e-listview .e-but-back,
79
- .e-listview.e-bigger .e-but-back {
80
- margin-right: 12px;
78
+ .e-bigger .e-listview .e-back-button,
79
+ .e-listview.e-bigger .e-back-button {
80
+ margin-right: 5px;
81
81
  }
82
82
 
83
83
  .e-bigger .e-listview .e-list-icon,
84
84
  .e-listview.e-bigger .e-list-icon {
85
85
  height: 24px;
86
- margin-right: 12px;
86
+ margin-right: 5px;
87
87
  width: 24px;
88
88
  }
89
89
 
@@ -114,8 +114,8 @@
114
114
  margin-left: 12px;
115
115
  }
116
116
 
117
- .e-bigger .e-listview.e-rtl .e-but-back,
118
- .e-listview.e-bigger.e-rtl .e-but-back {
117
+ .e-bigger .e-listview.e-rtl .e-back-button,
118
+ .e-listview.e-bigger.e-rtl .e-back-button {
119
119
  margin-left: 12px;
120
120
  margin-right: 0;
121
121
  }
@@ -197,6 +197,11 @@
197
197
  padding: 12px 0;
198
198
  }
199
199
 
200
+ .e-bigger .e-listview .e-text-content.e-checkbox .e-list-text,
201
+ .e-listview.e-bigger .e-text-content.e-checkbox .e-list-text {
202
+ width: calc(100% - 40px);
203
+ }
204
+
200
205
  .e-listview {
201
206
  -webkit-overflow-scrolling: touch;
202
207
  border: 1px solid;
@@ -259,7 +264,7 @@
259
264
  top: 45px;
260
265
  }
261
266
 
262
- .e-listview .e-but-back {
267
+ .e-listview .e-back-button {
263
268
  cursor: pointer;
264
269
  margin-right: 8px;
265
270
  }
@@ -283,6 +288,10 @@
283
288
  text-transform: uppercase;
284
289
  }
285
290
 
291
+ .e-listview .e-list-group-item .e-list-text {
292
+ cursor: default;
293
+ }
294
+
286
295
  .e-listview .e-icon-collapsible {
287
296
  cursor: pointer;
288
297
  font-size: 20px;
@@ -352,7 +361,7 @@
352
361
  }
353
362
 
354
363
  .e-listview .e-list-icon {
355
- margin-right: 8px;
364
+ margin-right: 2px;
356
365
  height: 20px;
357
366
  width: 20px;
358
367
  }
@@ -362,8 +371,12 @@
362
371
  position: relative;
363
372
  }
364
373
 
365
- .e-listview .e-list-header .e-text {
374
+ .e-listview .e-list-header.e-list-navigation .e-text {
366
375
  cursor: pointer;
376
+ }
377
+
378
+ .e-listview .e-list-header .e-text {
379
+ cursor: default;
367
380
  text-indent: 0;
368
381
  }
369
382
 
@@ -396,7 +409,7 @@
396
409
  cursor: pointer;
397
410
  }
398
411
 
399
- .e-listview.e-rtl .e-but-back {
412
+ .e-listview.e-rtl .e-back-button {
400
413
  transform: rotate(180deg);
401
414
  margin-left: 8px;
402
415
  margin-right: 0;
@@ -427,7 +440,7 @@
427
440
  color: #d1d5db;
428
441
  }
429
442
 
430
- .e-listview .e-icons.e-but-back:hover, .e-listview .e-icons.e-icon-collapsible:hover {
443
+ .e-listview .e-icons.e-back-button:hover, .e-listview .e-icons.e-icon-collapsible:hover {
431
444
  color: #f3f4f6;
432
445
  }
433
446
 
@@ -480,7 +493,7 @@
480
493
  }
481
494
 
482
495
  .e-listview.e-list-template .e-list-wrapper:not(.e-list-multi-line).e-list-badge:not(.e-list-avatar) {
483
- padding: 0 10px 0 16px;
496
+ padding: 0 8px 0 12px;
484
497
  }
485
498
 
486
499
  .e-listview.e-list-template .e-list-wrapper.e-list-multi-line {
@@ -555,7 +568,7 @@
555
568
  .e-listview.e-list-template .e-list-wrapper.e-list-badge .e-badge {
556
569
  font-size: 10px;
557
570
  height: 18px;
558
- line-height: 16px;
571
+ line-height: 18px;
559
572
  padding: 0;
560
573
  position: absolute;
561
574
  right: 12px;
@@ -1,11 +1,11 @@
1
1
  @import url("https://fonts.googleapis.com/css2?family=Inter:wght@100;200;300;400;500;600;700;800;900&display=swap");
2
- .e-listview .e-icon-collapsible::before {
3
- content: '\e7b7';
2
+ .e-icon-collapsible::before {
3
+ content: '\e748';
4
4
  }
5
5
 
6
- .e-listview .e-icon-back::before {
7
- content: '\e7a5';
8
- font-size: 20px;
6
+ .e-icon-back::before {
7
+ content: '\e773';
8
+ font-size: 16px;
9
9
  }
10
10
 
11
11
  .e-bigger .e-listview .e-list-item,
@@ -75,15 +75,15 @@
75
75
  font-size: 14px;
76
76
  }
77
77
 
78
- .e-bigger .e-listview .e-but-back,
79
- .e-listview.e-bigger .e-but-back {
80
- margin-right: 12px;
78
+ .e-bigger .e-listview .e-back-button,
79
+ .e-listview.e-bigger .e-back-button {
80
+ margin-right: 5px;
81
81
  }
82
82
 
83
83
  .e-bigger .e-listview .e-list-icon,
84
84
  .e-listview.e-bigger .e-list-icon {
85
85
  height: 24px;
86
- margin-right: 12px;
86
+ margin-right: 5px;
87
87
  width: 24px;
88
88
  }
89
89
 
@@ -114,8 +114,8 @@
114
114
  margin-left: 12px;
115
115
  }
116
116
 
117
- .e-bigger .e-listview.e-rtl .e-but-back,
118
- .e-listview.e-bigger.e-rtl .e-but-back {
117
+ .e-bigger .e-listview.e-rtl .e-back-button,
118
+ .e-listview.e-bigger.e-rtl .e-back-button {
119
119
  margin-left: 12px;
120
120
  margin-right: 0;
121
121
  }
@@ -197,6 +197,11 @@
197
197
  padding: 12px 0;
198
198
  }
199
199
 
200
+ .e-bigger .e-listview .e-text-content.e-checkbox .e-list-text,
201
+ .e-listview.e-bigger .e-text-content.e-checkbox .e-list-text {
202
+ width: calc(100% - 40px);
203
+ }
204
+
200
205
  .e-listview {
201
206
  -webkit-overflow-scrolling: touch;
202
207
  border: 1px solid;
@@ -259,7 +264,7 @@
259
264
  top: 45px;
260
265
  }
261
266
 
262
- .e-listview .e-but-back {
267
+ .e-listview .e-back-button {
263
268
  cursor: pointer;
264
269
  margin-right: 8px;
265
270
  }
@@ -283,6 +288,10 @@
283
288
  text-transform: uppercase;
284
289
  }
285
290
 
291
+ .e-listview .e-list-group-item .e-list-text {
292
+ cursor: default;
293
+ }
294
+
286
295
  .e-listview .e-icon-collapsible {
287
296
  cursor: pointer;
288
297
  font-size: 20px;
@@ -352,7 +361,7 @@
352
361
  }
353
362
 
354
363
  .e-listview .e-list-icon {
355
- margin-right: 8px;
364
+ margin-right: 2px;
356
365
  height: 20px;
357
366
  width: 20px;
358
367
  }
@@ -362,8 +371,12 @@
362
371
  position: relative;
363
372
  }
364
373
 
365
- .e-listview .e-list-header .e-text {
374
+ .e-listview .e-list-header.e-list-navigation .e-text {
366
375
  cursor: pointer;
376
+ }
377
+
378
+ .e-listview .e-list-header .e-text {
379
+ cursor: default;
367
380
  text-indent: 0;
368
381
  }
369
382
 
@@ -396,7 +409,7 @@
396
409
  cursor: pointer;
397
410
  }
398
411
 
399
- .e-listview.e-rtl .e-but-back {
412
+ .e-listview.e-rtl .e-back-button {
400
413
  transform: rotate(180deg);
401
414
  margin-left: 8px;
402
415
  margin-right: 0;
@@ -427,7 +440,7 @@
427
440
  color: #6b7280;
428
441
  }
429
442
 
430
- .e-listview .e-icons.e-but-back:hover, .e-listview .e-icons.e-icon-collapsible:hover {
443
+ .e-listview .e-icons.e-back-button:hover, .e-listview .e-icons.e-icon-collapsible:hover {
431
444
  color: #374151;
432
445
  }
433
446
 
@@ -480,7 +493,7 @@
480
493
  }
481
494
 
482
495
  .e-listview.e-list-template .e-list-wrapper:not(.e-list-multi-line).e-list-badge:not(.e-list-avatar) {
483
- padding: 0 10px 0 16px;
496
+ padding: 0 8px 0 12px;
484
497
  }
485
498
 
486
499
  .e-listview.e-list-template .e-list-wrapper.e-list-multi-line {
@@ -555,7 +568,7 @@
555
568
  .e-listview.e-list-template .e-list-wrapper.e-list-badge .e-badge {
556
569
  font-size: 10px;
557
570
  height: 18px;
558
- line-height: 16px;
571
+ line-height: 18px;
559
572
  padding: 0;
560
573
  position: absolute;
561
574
  right: 12px;
@@ -58,6 +58,11 @@
58
58
  font-size: 20px;
59
59
  }
60
60
 
61
+ .e-bigger .e-listview .e-text-content.e-checkbox .e-list-text,
62
+ .e-listview.e-bigger .e-text-content.e-checkbox .e-list-text {
63
+ width: calc(100% - 40px);
64
+ }
65
+
61
66
  .e-listview {
62
67
  -webkit-overflow-scrolling: touch;
63
68
  border: 0 solid;
@@ -112,7 +117,7 @@
112
117
  top: 45px;
113
118
  }
114
119
 
115
- .e-listview .e-but-back {
120
+ .e-listview .e-back-button {
116
121
  cursor: pointer;
117
122
  padding-right: 30px;
118
123
  }
@@ -131,6 +136,10 @@
131
136
  padding: 0 16px;
132
137
  }
133
138
 
139
+ .e-listview .e-list-group-item .e-list-text {
140
+ cursor: default;
141
+ }
142
+
134
143
  .e-listview .e-icon-collapsible {
135
144
  cursor: pointer;
136
145
  font-size: 12px;
@@ -208,8 +217,12 @@
208
217
  position: relative;
209
218
  }
210
219
 
211
- .e-listview .e-list-header .e-text {
220
+ .e-listview .e-list-header.e-list-navigation .e-text {
212
221
  cursor: pointer;
222
+ }
223
+
224
+ .e-listview .e-list-header .e-text {
225
+ cursor: default;
213
226
  text-indent: 0;
214
227
  }
215
228
 
@@ -238,7 +251,7 @@
238
251
  cursor: pointer;
239
252
  }
240
253
 
241
- .e-listview.e-rtl .e-but-back {
254
+ .e-listview.e-rtl .e-back-button {
242
255
  transform: rotate(180deg);
243
256
  }
244
257
 
@@ -58,6 +58,11 @@
58
58
  font-size: 20px;
59
59
  }
60
60
 
61
+ .e-bigger .e-listview .e-text-content.e-checkbox .e-list-text,
62
+ .e-listview.e-bigger .e-text-content.e-checkbox .e-list-text {
63
+ width: calc(100% - 40px);
64
+ }
65
+
61
66
  .e-listview {
62
67
  -webkit-overflow-scrolling: touch;
63
68
  border: 0 solid;
@@ -112,7 +117,7 @@
112
117
  top: 45px;
113
118
  }
114
119
 
115
- .e-listview .e-but-back {
120
+ .e-listview .e-back-button {
116
121
  cursor: pointer;
117
122
  padding-right: 30px;
118
123
  }
@@ -131,6 +136,10 @@
131
136
  padding: 0 16px;
132
137
  }
133
138
 
139
+ .e-listview .e-list-group-item .e-list-text {
140
+ cursor: default;
141
+ }
142
+
134
143
  .e-listview .e-icon-collapsible {
135
144
  cursor: pointer;
136
145
  font-size: 12px;
@@ -208,8 +217,12 @@
208
217
  position: relative;
209
218
  }
210
219
 
211
- .e-listview .e-list-header .e-text {
220
+ .e-listview .e-list-header.e-list-navigation .e-text {
212
221
  cursor: pointer;
222
+ }
223
+
224
+ .e-listview .e-list-header .e-text {
225
+ cursor: default;
213
226
  text-indent: 0;
214
227
  }
215
228
 
@@ -238,7 +251,7 @@
238
251
  cursor: pointer;
239
252
  }
240
253
 
241
- .e-listview.e-rtl .e-but-back {
254
+ .e-listview.e-rtl .e-back-button {
242
255
  transform: rotate(180deg);
243
256
  }
244
257
 
@@ -0,0 +1,26 @@
1
+ .e-sortable {
2
+ outline: none;
3
+ position: relative;
4
+ -webkit-user-select: none;
5
+ -ms-user-select: none;
6
+ user-select: none;
7
+ }
8
+
9
+ .e-sortable .e-disabled {
10
+ background-image: none;
11
+ cursor: default;
12
+ filter: alpha(Opacity=35);
13
+ opacity: .35;
14
+ }
15
+
16
+ .e-sortable * {
17
+ box-sizing: border-box;
18
+ }
19
+
20
+ .e-sortable *:focus {
21
+ outline: none;
22
+ }
23
+
24
+ .e-sortableclone {
25
+ position: fixed !important;
26
+ }
@@ -0,0 +1 @@
1
+ @import 'ej2-lists/styles/sortable/fluent-dark.scss';
@@ -0,0 +1,26 @@
1
+ .e-sortable {
2
+ outline: none;
3
+ position: relative;
4
+ -webkit-user-select: none;
5
+ -ms-user-select: none;
6
+ user-select: none;
7
+ }
8
+
9
+ .e-sortable .e-disabled {
10
+ background-image: none;
11
+ cursor: default;
12
+ filter: alpha(Opacity=35);
13
+ opacity: .35;
14
+ }
15
+
16
+ .e-sortable * {
17
+ box-sizing: border-box;
18
+ }
19
+
20
+ .e-sortable *:focus {
21
+ outline: none;
22
+ }
23
+
24
+ .e-sortableclone {
25
+ position: fixed !important;
26
+ }
@@ -0,0 +1 @@
1
+ @import 'ej2-lists/styles/sortable/fluent.scss';
@@ -1,12 +1,12 @@
1
1
  @import url("https://fonts.googleapis.com/css2?family=Inter:wght@100;200;300;400;500;600;700;800;900&display=swap");
2
2
  @import url("https://fonts.googleapis.com/css2?family=Inter:wght@100;200;300;400;500;600;700;800;900&display=swap");
3
- .e-listview .e-icon-collapsible::before {
4
- content: '\e7b7';
3
+ .e-icon-collapsible::before {
4
+ content: '\e748';
5
5
  }
6
6
 
7
- .e-listview .e-icon-back::before {
8
- content: '\e7a5';
9
- font-size: 20px;
7
+ .e-icon-back::before {
8
+ content: '\e773';
9
+ font-size: 16px;
10
10
  }
11
11
 
12
12
  .e-bigger .e-listview .e-list-item,
@@ -76,15 +76,15 @@
76
76
  font-size: 14px;
77
77
  }
78
78
 
79
- .e-bigger .e-listview .e-but-back,
80
- .e-listview.e-bigger .e-but-back {
81
- margin-right: 12px;
79
+ .e-bigger .e-listview .e-back-button,
80
+ .e-listview.e-bigger .e-back-button {
81
+ margin-right: 5px;
82
82
  }
83
83
 
84
84
  .e-bigger .e-listview .e-list-icon,
85
85
  .e-listview.e-bigger .e-list-icon {
86
86
  height: 24px;
87
- margin-right: 12px;
87
+ margin-right: 5px;
88
88
  width: 24px;
89
89
  }
90
90
 
@@ -115,8 +115,8 @@
115
115
  margin-left: 12px;
116
116
  }
117
117
 
118
- .e-bigger .e-listview.e-rtl .e-but-back,
119
- .e-listview.e-bigger.e-rtl .e-but-back {
118
+ .e-bigger .e-listview.e-rtl .e-back-button,
119
+ .e-listview.e-bigger.e-rtl .e-back-button {
120
120
  margin-left: 12px;
121
121
  margin-right: 0;
122
122
  }
@@ -198,6 +198,11 @@
198
198
  padding: 12px 0;
199
199
  }
200
200
 
201
+ .e-bigger .e-listview .e-text-content.e-checkbox .e-list-text,
202
+ .e-listview.e-bigger .e-text-content.e-checkbox .e-list-text {
203
+ width: calc(100% - 40px);
204
+ }
205
+
201
206
  .e-listview {
202
207
  -webkit-overflow-scrolling: touch;
203
208
  border: 1px solid;
@@ -260,7 +265,7 @@
260
265
  top: 45px;
261
266
  }
262
267
 
263
- .e-listview .e-but-back {
268
+ .e-listview .e-back-button {
264
269
  cursor: pointer;
265
270
  margin-right: 8px;
266
271
  }
@@ -284,6 +289,10 @@
284
289
  text-transform: uppercase;
285
290
  }
286
291
 
292
+ .e-listview .e-list-group-item .e-list-text {
293
+ cursor: default;
294
+ }
295
+
287
296
  .e-listview .e-icon-collapsible {
288
297
  cursor: pointer;
289
298
  font-size: 20px;
@@ -353,7 +362,7 @@
353
362
  }
354
363
 
355
364
  .e-listview .e-list-icon {
356
- margin-right: 8px;
365
+ margin-right: 2px;
357
366
  height: 20px;
358
367
  width: 20px;
359
368
  }
@@ -363,8 +372,12 @@
363
372
  position: relative;
364
373
  }
365
374
 
366
- .e-listview .e-list-header .e-text {
375
+ .e-listview .e-list-header.e-list-navigation .e-text {
367
376
  cursor: pointer;
377
+ }
378
+
379
+ .e-listview .e-list-header .e-text {
380
+ cursor: default;
368
381
  text-indent: 0;
369
382
  }
370
383
 
@@ -397,7 +410,7 @@
397
410
  cursor: pointer;
398
411
  }
399
412
 
400
- .e-listview.e-rtl .e-but-back {
413
+ .e-listview.e-rtl .e-back-button {
401
414
  transform: rotate(180deg);
402
415
  margin-left: 8px;
403
416
  margin-right: 0;
@@ -428,7 +441,7 @@
428
441
  color: #d1d5db;
429
442
  }
430
443
 
431
- .e-listview .e-icons.e-but-back:hover, .e-listview .e-icons.e-icon-collapsible:hover {
444
+ .e-listview .e-icons.e-back-button:hover, .e-listview .e-icons.e-icon-collapsible:hover {
432
445
  color: #f3f4f6;
433
446
  }
434
447
 
@@ -481,7 +494,7 @@
481
494
  }
482
495
 
483
496
  .e-listview.e-list-template .e-list-wrapper:not(.e-list-multi-line).e-list-badge:not(.e-list-avatar) {
484
- padding: 0 10px 0 16px;
497
+ padding: 0 8px 0 12px;
485
498
  }
486
499
 
487
500
  .e-listview.e-list-template .e-list-wrapper.e-list-multi-line {
@@ -556,7 +569,7 @@
556
569
  .e-listview.e-list-template .e-list-wrapper.e-list-badge .e-badge {
557
570
  font-size: 10px;
558
571
  height: 18px;
559
- line-height: 16px;
572
+ line-height: 18px;
560
573
  padding: 0;
561
574
  position: absolute;
562
575
  right: 12px;