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