@syncfusion/ej2-react-layouts 23.2.4 → 24.1.41

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