@syncfusion/ej2-vue-layouts 26.1.35 → 26.2.4

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