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