@syncfusion/ej2-vue-layouts 25.2.3 → 26.1.35

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 (123) 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 +8 -14
  4. package/dist/es6/ej2-vue-layouts.es2015.js.map +1 -1
  5. package/dist/es6/ej2-vue-layouts.es5.js +8 -14
  6. package/dist/es6/ej2-vue-layouts.es5.js.map +1 -1
  7. package/package.json +9 -9
  8. package/styles/avatar/bootstrap-dark.css +48 -1
  9. package/styles/avatar/bootstrap.css +48 -1
  10. package/styles/avatar/bootstrap4.css +48 -1
  11. package/styles/avatar/bootstrap5-dark.css +63 -1
  12. package/styles/avatar/bootstrap5.css +63 -1
  13. package/styles/avatar/fabric-dark.css +48 -1
  14. package/styles/avatar/fabric.css +48 -1
  15. package/styles/avatar/fluent-dark.css +61 -1
  16. package/styles/avatar/fluent.css +61 -1
  17. package/styles/avatar/fluent2.css +1094 -0
  18. package/styles/avatar/fluent2.scss +1 -0
  19. package/styles/avatar/highcontrast-light.css +48 -1
  20. package/styles/avatar/highcontrast.css +48 -1
  21. package/styles/avatar/material-dark.css +48 -1
  22. package/styles/avatar/material.css +48 -1
  23. package/styles/avatar/material3-dark.css +171 -1
  24. package/styles/avatar/material3.css +283 -1
  25. package/styles/avatar/tailwind-dark.css +61 -1
  26. package/styles/avatar/tailwind.css +61 -1
  27. package/styles/bootstrap-dark.css +1752 -1
  28. package/styles/bootstrap.css +1753 -1
  29. package/styles/bootstrap4.css +1757 -1
  30. package/styles/bootstrap5-dark.css +1770 -1
  31. package/styles/bootstrap5.css +1770 -1
  32. package/styles/card/bootstrap-dark.css +556 -1
  33. package/styles/card/bootstrap.css +557 -1
  34. package/styles/card/bootstrap4.css +563 -1
  35. package/styles/card/bootstrap5-dark.css +556 -1
  36. package/styles/card/bootstrap5.css +556 -1
  37. package/styles/card/fabric-dark.css +556 -1
  38. package/styles/card/fabric.css +567 -1
  39. package/styles/card/fluent-dark.css +579 -1
  40. package/styles/card/fluent.css +579 -1
  41. package/styles/card/fluent2.css +1588 -0
  42. package/styles/card/fluent2.scss +1 -0
  43. package/styles/card/highcontrast-light.css +556 -1
  44. package/styles/card/highcontrast.css +568 -1
  45. package/styles/card/material-dark.css +556 -1
  46. package/styles/card/material.css +557 -1
  47. package/styles/card/material3-dark.css +667 -1
  48. package/styles/card/material3.css +779 -1
  49. package/styles/card/tailwind-dark.css +557 -1
  50. package/styles/card/tailwind.css +557 -1
  51. package/styles/dashboard-layout/bootstrap-dark.css +295 -1
  52. package/styles/dashboard-layout/bootstrap.css +295 -1
  53. package/styles/dashboard-layout/bootstrap4.css +295 -1
  54. package/styles/dashboard-layout/bootstrap5-dark.css +306 -1
  55. package/styles/dashboard-layout/bootstrap5.css +306 -1
  56. package/styles/dashboard-layout/fabric-dark.css +295 -1
  57. package/styles/dashboard-layout/fabric.css +295 -1
  58. package/styles/dashboard-layout/fluent-dark.css +300 -1
  59. package/styles/dashboard-layout/fluent.css +300 -1
  60. package/styles/dashboard-layout/fluent2.css +1336 -0
  61. package/styles/dashboard-layout/fluent2.scss +1 -0
  62. package/styles/dashboard-layout/highcontrast-light.css +232 -1
  63. package/styles/dashboard-layout/highcontrast.css +293 -1
  64. package/styles/dashboard-layout/material-dark.css +295 -1
  65. package/styles/dashboard-layout/material.css +295 -1
  66. package/styles/dashboard-layout/material3-dark.css +412 -1
  67. package/styles/dashboard-layout/material3.css +524 -1
  68. package/styles/dashboard-layout/tailwind-dark.css +319 -1
  69. package/styles/dashboard-layout/tailwind.css +319 -1
  70. package/styles/fabric-dark.css +1752 -1
  71. package/styles/fabric.css +1763 -1
  72. package/styles/fluent-dark.css +1785 -1
  73. package/styles/fluent.css +1785 -1
  74. package/styles/fluent2.css +6931 -0
  75. package/styles/fluent2.scss +5 -0
  76. package/styles/highcontrast-light.css +1689 -1
  77. package/styles/highcontrast.css +1762 -1
  78. package/styles/material-dark.css +1750 -1
  79. package/styles/material.css +1752 -1
  80. package/styles/material3-dark.css +2315 -1
  81. package/styles/material3.css +2875 -1
  82. package/styles/splitter/bootstrap-dark.css +552 -1
  83. package/styles/splitter/bootstrap.css +552 -1
  84. package/styles/splitter/bootstrap4.css +550 -1
  85. package/styles/splitter/bootstrap5-dark.css +544 -1
  86. package/styles/splitter/bootstrap5.css +544 -1
  87. package/styles/splitter/fabric-dark.css +552 -1
  88. package/styles/splitter/fabric.css +552 -1
  89. package/styles/splitter/fluent-dark.css +544 -1
  90. package/styles/splitter/fluent.css +544 -1
  91. package/styles/splitter/fluent2.css +1578 -0
  92. package/styles/splitter/fluent2.scss +1 -0
  93. package/styles/splitter/highcontrast-light.css +552 -1
  94. package/styles/splitter/highcontrast.css +552 -1
  95. package/styles/splitter/material-dark.css +550 -1
  96. package/styles/splitter/material.css +551 -1
  97. package/styles/splitter/material3-dark.css +654 -1
  98. package/styles/splitter/material3.css +766 -1
  99. package/styles/splitter/tailwind-dark.css +544 -1
  100. package/styles/splitter/tailwind.css +544 -1
  101. package/styles/tailwind-dark.css +1782 -1
  102. package/styles/tailwind.css +1782 -1
  103. package/styles/timeline/bootstrap-dark.css +298 -1
  104. package/styles/timeline/bootstrap.css +298 -1
  105. package/styles/timeline/bootstrap4.css +298 -1
  106. package/styles/timeline/bootstrap5-dark.css +298 -1
  107. package/styles/timeline/bootstrap5.css +298 -1
  108. package/styles/timeline/fabric-dark.css +298 -1
  109. package/styles/timeline/fabric.css +298 -1
  110. package/styles/timeline/fluent-dark.css +298 -1
  111. package/styles/timeline/fluent.css +298 -1
  112. package/styles/timeline/fluent2.css +1332 -0
  113. package/styles/timeline/fluent2.scss +1 -0
  114. package/styles/timeline/highcontrast-light.css +298 -1
  115. package/styles/timeline/highcontrast.css +298 -1
  116. package/styles/timeline/material-dark.css +298 -1
  117. package/styles/timeline/material.css +298 -1
  118. package/styles/timeline/material3-dark.css +408 -1
  119. package/styles/timeline/material3.css +520 -1
  120. package/styles/timeline/tailwind-dark.css +298 -1
  121. package/styles/timeline/tailwind.css +298 -1
  122. package/CHANGELOG.md +0 -591
  123. package/dist/global/ej2-vue-layouts.min.js +0 -10
package/styles/timeline/fabric.css CHANGED
@@ -1 +1,298 @@
1
- @import '@syncfusion/ej2-layouts/styles/timeline/fabric.css';
1
+ .e-timeline {
2
+ --dot-size: 16px;
3
+ --dot-outer-space: 0;
4
+ --dot-border: 1px;
5
+ --connector-size: 1px;
6
+ --dot-radius: 50%;
7
+ height: inherit;
8
+ width: 100%;
9
+ }
10
+ .e-timeline [class^="e-dot "]::before,
11
+ .e-timeline .e-dot-item,
12
+ .e-timeline .e-dot {
13
+ display: -webkit-box;
14
+ display: -ms-flexbox;
15
+ display: flex;
16
+ -webkit-box-align: center;
17
+ -ms-flex-align: center;
18
+ align-items: center;
19
+ -webkit-box-pack: center;
20
+ -ms-flex-pack: center;
21
+ justify-content: center;
22
+ }
23
+ .e-timeline [class^="e-dot "]::before {
24
+ min-width: 32px;
25
+ min-height: 32px;
26
+ border-radius: var(--dot-radius);
27
+ }
28
+ .e-timeline .e-timeline-items {
29
+ display: -webkit-inline-box;
30
+ display: -ms-inline-flexbox;
31
+ display: inline-flex;
32
+ -webkit-box-orient: vertical;
33
+ -webkit-box-direction: normal;
34
+ -ms-flex-direction: column;
35
+ flex-direction: column;
36
+ list-style: none;
37
+ -ms-flex-wrap: nowrap;
38
+ flex-wrap: nowrap;
39
+ padding: 0;
40
+ width: inherit;
41
+ height: inherit;
42
+ }
43
+ .e-timeline .e-timeline-item {
44
+ display: -webkit-box;
45
+ display: -ms-flexbox;
46
+ display: flex;
47
+ -webkit-box-orient: horizontal;
48
+ -webkit-box-direction: normal;
49
+ -ms-flex-direction: row;
50
+ flex-direction: row;
51
+ position: relative;
52
+ -webkit-box-align: start;
53
+ -ms-flex-align: start;
54
+ align-items: flex-start;
55
+ width: inherit;
56
+ height: inherit;
57
+ }
58
+ .e-timeline .e-timeline-item.e-connector::after {
59
+ top: 0;
60
+ bottom: 0;
61
+ left: calc(50% - var(--connector-size));
62
+ right: auto;
63
+ content: "";
64
+ position: absolute;
65
+ z-index: 999;
66
+ border-width: var(--connector-size);
67
+ border-style: solid;
68
+ }
69
+ .e-timeline .e-timeline-item.e-connector.e-item-template::after {
70
+ content: unset;
71
+ }
72
+ .e-timeline .e-dot-item {
73
+ position: relative;
74
+ -webkit-box-flex: 0;
75
+ -ms-flex: 0 1 calc(var(--dot-size) * 3);
76
+ flex: 0 1 calc(var(--dot-size) * 3);
77
+ z-index: 1000;
78
+ }
79
+ .e-timeline .e-dot {
80
+ min-width: var(--dot-size);
81
+ min-height: var(--dot-size);
82
+ border-radius: var(--dot-radius);
83
+ outline: var(--dot-outer-space) solid;
84
+ border: var(--dot-border) solid;
85
+ font-size: 16px;
86
+ background-size: cover;
87
+ background-position: center;
88
+ background-repeat: no-repeat;
89
+ }
90
+ .e-timeline .e-opposite-content,
91
+ .e-timeline .e-content {
92
+ -webkit-box-flex: 1;
93
+ -ms-flex: 1 1 50%;
94
+ flex: 1 1 50%;
95
+ }
96
+ .e-timeline .e-opposite-content {
97
+ font-size: 12px;
98
+ }
99
+ .e-timeline .e-content {
100
+ text-align: left;
101
+ font-size: 14px;
102
+ font-weight: 500;
103
+ }
104
+ .e-timeline .e-timeline-item:first-child::after {
105
+ top: 0;
106
+ }
107
+ .e-timeline .e-timeline-item:last-child::after {
108
+ bottom: calc(var(--dot-size) * 2);
109
+ }
110
+ .e-timeline.e-vertical.e-align-before .e-timeline-item, .e-timeline.e-vertical.e-align-alternate .e-timeline-item:nth-of-type(even), .e-timeline.e-vertical.e-align-alternatereverse .e-timeline-item:nth-of-type(odd) {
111
+ -webkit-box-orient: horizontal;
112
+ -webkit-box-direction: reverse;
113
+ -ms-flex-direction: row-reverse;
114
+ flex-direction: row-reverse;
115
+ }
116
+ .e-timeline.e-vertical.e-timeline-reverse .e-timeline-items {
117
+ -webkit-box-orient: vertical;
118
+ -webkit-box-direction: reverse;
119
+ -ms-flex-direction: column-reverse;
120
+ flex-direction: column-reverse;
121
+ }
122
+ .e-timeline.e-vertical.e-align-before .e-timeline-items .e-opposite-content, .e-timeline.e-vertical.e-align-after .e-timeline-items .e-content {
123
+ text-align: left;
124
+ }
125
+ .e-timeline.e-vertical .e-timeline-item.e-connector:last-child::after {
126
+ content: unset;
127
+ }
128
+ .e-timeline.e-vertical.e-align-before.e-opposite-content-only .e-connector::after, .e-timeline.e-vertical.e-align-after.e-rtl.e-opposite-content-only .e-connector::after, .e-timeline.e-vertical.e-align-before.e-rtl.e-content-only .e-connector::after, .e-timeline.e-vertical.e-align-after.e-content-only .e-connector::after {
129
+ left: calc(var(--dot-size) * 3 / 2 - var(--connector-size));
130
+ right: auto;
131
+ }
132
+ .e-timeline.e-vertical.e-align-before.e-content-only .e-connector::after, .e-timeline.e-vertical.e-align-before.e-rtl.e-opposite-content-only .e-connector::after, .e-timeline.e-vertical.e-align-after.e-opposite-content-only .e-connector::after, .e-timeline.e-vertical.e-align-after.e-rtl.e-content-only .e-connector::after {
133
+ right: calc(var(--dot-size) * 3 / 2 - var(--connector-size));
134
+ left: auto;
135
+ }
136
+ .e-timeline.e-vertical.e-align-after.e-opposite-content-only .e-content, .e-timeline.e-vertical.e-align-after.e-content-only .e-opposite-content, .e-timeline.e-vertical.e-align-before.e-opposite-content-only .e-content, .e-timeline.e-vertical.e-align-before.e-content-only .e-opposite-content {
137
+ -webkit-box-flex: 0;
138
+ -ms-flex: 0;
139
+ flex: 0;
140
+ }
141
+ .e-timeline.e-vertical.e-timeline-reverse .e-timeline-item.e-connector:first-child::after {
142
+ content: unset;
143
+ }
144
+ .e-timeline.e-vertical.e-timeline-reverse .e-timeline-item.e-connector:last-child::after {
145
+ content: "";
146
+ bottom: 0;
147
+ }
148
+ .e-timeline.e-vertical.e-align-after .e-opposite-content, .e-timeline.e-vertical.e-align-before .e-content, .e-timeline.e-vertical.e-rtl.e-align-after .e-content, .e-timeline.e-vertical.e-rtl.e-align-alternate .e-timeline-item:nth-of-type(odd) .e-content, .e-timeline.e-vertical.e-rtl.e-align-alternatereverse .e-timeline-item:nth-of-type(even) .e-content, .e-timeline.e-vertical.e-align-alternate .e-timeline-item:nth-of-type(even) .e-content, .e-timeline.e-vertical.e-align-alternatereverse .e-timeline-item:nth-of-type(odd) .e-content, .e-timeline.e-vertical.e-rtl.e-align-alternate .e-timeline-item:nth-of-type(even) .e-opposite-content, .e-timeline.e-vertical.e-rtl.e-align-alternatereverse .e-timeline-item:nth-of-type(odd) .e-opposite-content, .e-timeline.e-vertical.e-rtl.e-align-before .e-opposite-content, .e-timeline.e-vertical.e-align-alternate .e-opposite-content, .e-timeline.e-vertical.e-align-alternatereverse .e-opposite-content {
149
+ text-align: right;
150
+ }
151
+ .e-timeline.e-vertical.e-align-before .e-opposite-content, .e-timeline.e-vertical.e-align-after .e-content, .e-timeline.e-vertical.e-rtl.e-align-after .e-opposite-content, .e-timeline.e-vertical.e-align-alternate .e-timeline-item:nth-of-type(odd) .e-content, .e-timeline.e-vertical.e-align-alternatereverse .e-timeline-item:nth-of-type(even) .e-content, .e-timeline.e-vertical.e-align-alternate .e-timeline-item:nth-of-type(even) .e-opposite-content, .e-timeline.e-vertical.e-align-alternatereverse .e-timeline-item:nth-of-type(odd) .e-opposite-content, .e-timeline.e-vertical.e-rtl.e-align-alternate .e-timeline-item:nth-of-type(even) .e-content, .e-timeline.e-vertical.e-rtl.e-align-alternatereverse .e-timeline-item:nth-of-type(odd) .e-content, .e-timeline.e-vertical.e-rtl.e-align-before .e-content, .e-timeline.e-vertical.e-rtl.e-align-alternate .e-opposite-content, .e-timeline.e-vertical.e-rtl.e-align-alternatereverse .e-opposite-content {
152
+ text-align: left;
153
+ }
154
+ .e-timeline.e-vertical .e-dot-item {
155
+ width: calc(var(--dot-size) * 2);
156
+ }
157
+ .e-timeline.e-horizontal .e-timeline-items {
158
+ display: -webkit-inline-box;
159
+ display: -ms-inline-flexbox;
160
+ display: inline-flex;
161
+ -webkit-box-orient: horizontal;
162
+ -webkit-box-direction: normal;
163
+ -ms-flex-direction: row;
164
+ flex-direction: row;
165
+ }
166
+ .e-timeline.e-horizontal .e-timeline-item {
167
+ height: auto;
168
+ -webkit-box-orient: vertical;
169
+ -webkit-box-direction: normal;
170
+ -ms-flex-direction: column;
171
+ flex-direction: column;
172
+ -webkit-box-align: center;
173
+ -ms-flex-align: center;
174
+ align-items: center;
175
+ }
176
+ .e-timeline.e-horizontal.e-timeline-reverse.e-rtl .e-timeline-item.e-connector::after {
177
+ left: calc(50% - var(--connector-size));
178
+ right: auto;
179
+ }
180
+ .e-timeline.e-horizontal.e-rtl .e-timeline-item.e-connector::after, .e-timeline.e-horizontal.e-timeline-reverse .e-timeline-item.e-connector::after {
181
+ right: calc(50% - var(--connector-size));
182
+ left: auto;
183
+ }
184
+ .e-timeline.e-horizontal .e-dot-item {
185
+ margin: calc(var(--dot-size) * 2 / 2) 0;
186
+ }
187
+ .e-timeline.e-horizontal .e-opposite-content,
188
+ .e-timeline.e-horizontal .e-content {
189
+ display: -webkit-box;
190
+ display: -ms-flexbox;
191
+ display: flex;
192
+ }
193
+ .e-timeline.e-horizontal.e-align-alternate .e-timeline-item:nth-of-type(even) .e-content, .e-timeline.e-horizontal.e-align-alternate .e-timeline-item:nth-of-type(odd) .e-opposite-content, .e-timeline.e-horizontal.e-align-alternatereverse .e-timeline-item:nth-of-type(odd) .e-content, .e-timeline.e-horizontal.e-align-alternatereverse .e-timeline-item:nth-of-type(even) .e-opposite-content, .e-timeline.e-horizontal.e-align-before .e-content {
194
+ -webkit-box-align: end;
195
+ -ms-flex-align: end;
196
+ align-items: flex-end;
197
+ }
198
+ .e-timeline.e-horizontal.e-align-alternate .e-timeline-item:nth-of-type(odd) .e-content, .e-timeline.e-horizontal.e-align-alternate .e-timeline-item:nth-of-type(even) .e-opposite-content, .e-timeline.e-horizontal.e-align-alternatereverse .e-timeline-item:nth-of-type(even) .e-content, .e-timeline.e-horizontal.e-align-alternatereverse .e-timeline-item:nth-of-type(odd) .e-opposite-content, .e-timeline.e-horizontal.e-align-before .e-opposite-content {
199
+ -webkit-box-align: start;
200
+ -ms-flex-align: start;
201
+ align-items: flex-start;
202
+ }
203
+ .e-timeline.e-horizontal.e-align-before .e-timeline-item, .e-timeline.e-horizontal.e-align-alternate .e-timeline-item:nth-of-type(even), .e-timeline.e-horizontal.e-align-alternatereverse .e-timeline-item:nth-of-type(odd) {
204
+ -webkit-box-orient: vertical;
205
+ -webkit-box-direction: reverse;
206
+ -ms-flex-direction: column-reverse;
207
+ flex-direction: column-reverse;
208
+ }
209
+ .e-timeline.e-horizontal.e-timeline-reverse .e-timeline-items {
210
+ -webkit-box-orient: horizontal;
211
+ -webkit-box-direction: reverse;
212
+ -ms-flex-direction: row-reverse;
213
+ flex-direction: row-reverse;
214
+ }
215
+ .e-timeline.e-horizontal .e-timeline-item::after {
216
+ width: 100%;
217
+ height: 0;
218
+ top: calc(50% - var(--connector-size));
219
+ }
220
+ .e-timeline.e-horizontal .e-opposite-content {
221
+ display: -webkit-box;
222
+ display: -ms-flexbox;
223
+ display: flex;
224
+ -webkit-box-align: end;
225
+ -ms-flex-align: end;
226
+ align-items: flex-end;
227
+ text-align: left;
228
+ padding: 0;
229
+ }
230
+ .e-timeline.e-horizontal .e-content {
231
+ padding: 0;
232
+ }
233
+ .e-timeline.e-horizontal .e-timeline-item:last-child::after {
234
+ width: auto;
235
+ }
236
+
237
+ .e-bigger.e-timeline [class^="e-dot "]::before,
238
+ .e-bigger .e-timeline [class^="e-dot "]::before {
239
+ min-width: 40px;
240
+ min-height: 40px;
241
+ font-size: 18px;
242
+ }
243
+ .e-bigger.e-timeline .e-dot-item,
244
+ .e-bigger .e-timeline .e-dot-item {
245
+ -webkit-box-flex: 0;
246
+ -ms-flex: 0 1 calc(var(--dot-size) * 4);
247
+ flex: 0 1 calc(var(--dot-size) * 4);
248
+ }
249
+ .e-bigger.e-timeline.e-vertical.e-align-before.e-opposite-content-only .e-connector::after, .e-bigger.e-timeline.e-vertical.e-align-after.e-rtl.e-opposite-content-only .e-connector::after, .e-bigger.e-timeline.e-vertical.e-align-before.e-rtl.e-content-only .e-connector::after, .e-bigger.e-timeline.e-vertical.e-align-after.e-content-only .e-connector::after,
250
+ .e-bigger .e-timeline.e-vertical.e-align-before.e-opposite-content-only .e-connector::after,
251
+ .e-bigger .e-timeline.e-vertical.e-align-after.e-rtl.e-opposite-content-only .e-connector::after,
252
+ .e-bigger .e-timeline.e-vertical.e-align-before.e-rtl.e-content-only .e-connector::after,
253
+ .e-bigger .e-timeline.e-vertical.e-align-after.e-content-only .e-connector::after {
254
+ left: calc(var(--dot-size) * 4 / 2 - var(--connector-size));
255
+ }
256
+ .e-bigger.e-timeline.e-vertical.e-align-before.e-content-only .e-connector::after, .e-bigger.e-timeline.e-vertical.e-align-before.e-rtl.e-opposite-content-only .e-connector::after, .e-bigger.e-timeline.e-vertical.e-align-after.e-opposite-content-only .e-connector::after, .e-bigger.e-timeline.e-vertical.e-align-after.e-rtl.e-content-only .e-connector::after,
257
+ .e-bigger .e-timeline.e-vertical.e-align-before.e-content-only .e-connector::after,
258
+ .e-bigger .e-timeline.e-vertical.e-align-before.e-rtl.e-opposite-content-only .e-connector::after,
259
+ .e-bigger .e-timeline.e-vertical.e-align-after.e-opposite-content-only .e-connector::after,
260
+ .e-bigger .e-timeline.e-vertical.e-align-after.e-rtl.e-content-only .e-connector::after {
261
+ right: calc(var(--dot-size) * 4 / 2 - var(--connector-size));
262
+ }
263
+ .e-bigger.e-timeline .e-dot,
264
+ .e-bigger .e-timeline .e-dot {
265
+ min-width: 20px;
266
+ min-height: 20px;
267
+ }
268
+ .e-bigger.e-timeline .e-opposite-content,
269
+ .e-bigger .e-timeline .e-opposite-content {
270
+ font-size: 14px;
271
+ }
272
+ .e-bigger.e-timeline .e-content,
273
+ .e-bigger .e-timeline .e-content {
274
+ font-size: 16px;
275
+ }
276
+
277
+ .e-timeline .e-dot {
278
+ background-color: #dadada;
279
+ border-color: #dadada;
280
+ color: #333;
281
+ outline-color: #fff;
282
+ }
283
+ .e-timeline.e-outline .e-dot {
284
+ background-color: #fff;
285
+ }
286
+ .e-timeline .e-timeline-item.e-connector::after {
287
+ border-color: #dadada;
288
+ }
289
+ .e-timeline .e-content {
290
+ color: #333;
291
+ }
292
+ .e-timeline .e-opposite-content {
293
+ color: #333;
294
+ }
295
+ .e-timeline .e-item-disabled .e-content,
296
+ .e-timeline .e-item-disabled .e-opposite-content {
297
+ color: #a6a6a6;
298
+ }
package/styles/timeline/fluent-dark.css CHANGED
@@ -1 +1,298 @@
1
- @import '@syncfusion/ej2-layouts/styles/timeline/fluent-dark.css';
1
+ .e-timeline {
2
+ --dot-size: 16px;
3
+ --dot-outer-space: 0;
4
+ --dot-border: 1px;
5
+ --connector-size: 1px;
6
+ --dot-radius: 50%;
7
+ height: inherit;
8
+ width: 100%;
9
+ }
10
+ .e-timeline [class^="e-dot "]::before,
11
+ .e-timeline .e-dot-item,
12
+ .e-timeline .e-dot {
13
+ display: -webkit-box;
14
+ display: -ms-flexbox;
15
+ display: flex;
16
+ -webkit-box-align: center;
17
+ -ms-flex-align: center;
18
+ align-items: center;
19
+ -webkit-box-pack: center;
20
+ -ms-flex-pack: center;
21
+ justify-content: center;
22
+ }
23
+ .e-timeline [class^="e-dot "]::before {
24
+ min-width: 32px;
25
+ min-height: 32px;
26
+ border-radius: var(--dot-radius);
27
+ }
28
+ .e-timeline .e-timeline-items {
29
+ display: -webkit-inline-box;
30
+ display: -ms-inline-flexbox;
31
+ display: inline-flex;
32
+ -webkit-box-orient: vertical;
33
+ -webkit-box-direction: normal;
34
+ -ms-flex-direction: column;
35
+ flex-direction: column;
36
+ list-style: none;
37
+ -ms-flex-wrap: nowrap;
38
+ flex-wrap: nowrap;
39
+ padding: 0;
40
+ width: inherit;
41
+ height: inherit;
42
+ }
43
+ .e-timeline .e-timeline-item {
44
+ display: -webkit-box;
45
+ display: -ms-flexbox;
46
+ display: flex;
47
+ -webkit-box-orient: horizontal;
48
+ -webkit-box-direction: normal;
49
+ -ms-flex-direction: row;
50
+ flex-direction: row;
51
+ position: relative;
52
+ -webkit-box-align: start;
53
+ -ms-flex-align: start;
54
+ align-items: flex-start;
55
+ width: inherit;
56
+ height: inherit;
57
+ }
58
+ .e-timeline .e-timeline-item.e-connector::after {
59
+ top: 0;
60
+ bottom: 0;
61
+ left: calc(50% - var(--connector-size));
62
+ right: auto;
63
+ content: "";
64
+ position: absolute;
65
+ z-index: 999;
66
+ border-width: var(--connector-size);
67
+ border-style: solid;
68
+ }
69
+ .e-timeline .e-timeline-item.e-connector.e-item-template::after {
70
+ content: unset;
71
+ }
72
+ .e-timeline .e-dot-item {
73
+ position: relative;
74
+ -webkit-box-flex: 0;
75
+ -ms-flex: 0 1 calc(var(--dot-size) * 3);
76
+ flex: 0 1 calc(var(--dot-size) * 3);
77
+ z-index: 1000;
78
+ }
79
+ .e-timeline .e-dot {
80
+ min-width: var(--dot-size);
81
+ min-height: var(--dot-size);
82
+ border-radius: var(--dot-radius);
83
+ outline: var(--dot-outer-space) solid;
84
+ border: var(--dot-border) solid;
85
+ font-size: 16px;
86
+ background-size: cover;
87
+ background-position: center;
88
+ background-repeat: no-repeat;
89
+ }
90
+ .e-timeline .e-opposite-content,
91
+ .e-timeline .e-content {
92
+ -webkit-box-flex: 1;
93
+ -ms-flex: 1 1 50%;
94
+ flex: 1 1 50%;
95
+ }
96
+ .e-timeline .e-opposite-content {
97
+ font-size: 12px;
98
+ }
99
+ .e-timeline .e-content {
100
+ text-align: left;
101
+ font-size: 14px;
102
+ font-weight: 500;
103
+ }
104
+ .e-timeline .e-timeline-item:first-child::after {
105
+ top: 0;
106
+ }
107
+ .e-timeline .e-timeline-item:last-child::after {
108
+ bottom: calc(var(--dot-size) * 2);
109
+ }
110
+ .e-timeline.e-vertical.e-align-before .e-timeline-item, .e-timeline.e-vertical.e-align-alternate .e-timeline-item:nth-of-type(even), .e-timeline.e-vertical.e-align-alternatereverse .e-timeline-item:nth-of-type(odd) {
111
+ -webkit-box-orient: horizontal;
112
+ -webkit-box-direction: reverse;
113
+ -ms-flex-direction: row-reverse;
114
+ flex-direction: row-reverse;
115
+ }
116
+ .e-timeline.e-vertical.e-timeline-reverse .e-timeline-items {
117
+ -webkit-box-orient: vertical;
118
+ -webkit-box-direction: reverse;
119
+ -ms-flex-direction: column-reverse;
120
+ flex-direction: column-reverse;
121
+ }
122
+ .e-timeline.e-vertical.e-align-before .e-timeline-items .e-opposite-content, .e-timeline.e-vertical.e-align-after .e-timeline-items .e-content {
123
+ text-align: left;
124
+ }
125
+ .e-timeline.e-vertical .e-timeline-item.e-connector:last-child::after {
126
+ content: unset;
127
+ }
128
+ .e-timeline.e-vertical.e-align-before.e-opposite-content-only .e-connector::after, .e-timeline.e-vertical.e-align-after.e-rtl.e-opposite-content-only .e-connector::after, .e-timeline.e-vertical.e-align-before.e-rtl.e-content-only .e-connector::after, .e-timeline.e-vertical.e-align-after.e-content-only .e-connector::after {
129
+ left: calc(var(--dot-size) * 3 / 2 - var(--connector-size));
130
+ right: auto;
131
+ }
132
+ .e-timeline.e-vertical.e-align-before.e-content-only .e-connector::after, .e-timeline.e-vertical.e-align-before.e-rtl.e-opposite-content-only .e-connector::after, .e-timeline.e-vertical.e-align-after.e-opposite-content-only .e-connector::after, .e-timeline.e-vertical.e-align-after.e-rtl.e-content-only .e-connector::after {
133
+ right: calc(var(--dot-size) * 3 / 2 - var(--connector-size));
134
+ left: auto;
135
+ }
136
+ .e-timeline.e-vertical.e-align-after.e-opposite-content-only .e-content, .e-timeline.e-vertical.e-align-after.e-content-only .e-opposite-content, .e-timeline.e-vertical.e-align-before.e-opposite-content-only .e-content, .e-timeline.e-vertical.e-align-before.e-content-only .e-opposite-content {
137
+ -webkit-box-flex: 0;
138
+ -ms-flex: 0;
139
+ flex: 0;
140
+ }
141
+ .e-timeline.e-vertical.e-timeline-reverse .e-timeline-item.e-connector:first-child::after {
142
+ content: unset;
143
+ }
144
+ .e-timeline.e-vertical.e-timeline-reverse .e-timeline-item.e-connector:last-child::after {
145
+ content: "";
146
+ bottom: 0;
147
+ }
148
+ .e-timeline.e-vertical.e-align-after .e-opposite-content, .e-timeline.e-vertical.e-align-before .e-content, .e-timeline.e-vertical.e-rtl.e-align-after .e-content, .e-timeline.e-vertical.e-rtl.e-align-alternate .e-timeline-item:nth-of-type(odd) .e-content, .e-timeline.e-vertical.e-rtl.e-align-alternatereverse .e-timeline-item:nth-of-type(even) .e-content, .e-timeline.e-vertical.e-align-alternate .e-timeline-item:nth-of-type(even) .e-content, .e-timeline.e-vertical.e-align-alternatereverse .e-timeline-item:nth-of-type(odd) .e-content, .e-timeline.e-vertical.e-rtl.e-align-alternate .e-timeline-item:nth-of-type(even) .e-opposite-content, .e-timeline.e-vertical.e-rtl.e-align-alternatereverse .e-timeline-item:nth-of-type(odd) .e-opposite-content, .e-timeline.e-vertical.e-rtl.e-align-before .e-opposite-content, .e-timeline.e-vertical.e-align-alternate .e-opposite-content, .e-timeline.e-vertical.e-align-alternatereverse .e-opposite-content {
149
+ text-align: right;
150
+ }
151
+ .e-timeline.e-vertical.e-align-before .e-opposite-content, .e-timeline.e-vertical.e-align-after .e-content, .e-timeline.e-vertical.e-rtl.e-align-after .e-opposite-content, .e-timeline.e-vertical.e-align-alternate .e-timeline-item:nth-of-type(odd) .e-content, .e-timeline.e-vertical.e-align-alternatereverse .e-timeline-item:nth-of-type(even) .e-content, .e-timeline.e-vertical.e-align-alternate .e-timeline-item:nth-of-type(even) .e-opposite-content, .e-timeline.e-vertical.e-align-alternatereverse .e-timeline-item:nth-of-type(odd) .e-opposite-content, .e-timeline.e-vertical.e-rtl.e-align-alternate .e-timeline-item:nth-of-type(even) .e-content, .e-timeline.e-vertical.e-rtl.e-align-alternatereverse .e-timeline-item:nth-of-type(odd) .e-content, .e-timeline.e-vertical.e-rtl.e-align-before .e-content, .e-timeline.e-vertical.e-rtl.e-align-alternate .e-opposite-content, .e-timeline.e-vertical.e-rtl.e-align-alternatereverse .e-opposite-content {
152
+ text-align: left;
153
+ }
154
+ .e-timeline.e-vertical .e-dot-item {
155
+ width: calc(var(--dot-size) * 2);
156
+ }
157
+ .e-timeline.e-horizontal .e-timeline-items {
158
+ display: -webkit-inline-box;
159
+ display: -ms-inline-flexbox;
160
+ display: inline-flex;
161
+ -webkit-box-orient: horizontal;
162
+ -webkit-box-direction: normal;
163
+ -ms-flex-direction: row;
164
+ flex-direction: row;
165
+ }
166
+ .e-timeline.e-horizontal .e-timeline-item {
167
+ height: auto;
168
+ -webkit-box-orient: vertical;
169
+ -webkit-box-direction: normal;
170
+ -ms-flex-direction: column;
171
+ flex-direction: column;
172
+ -webkit-box-align: center;
173
+ -ms-flex-align: center;
174
+ align-items: center;
175
+ }
176
+ .e-timeline.e-horizontal.e-timeline-reverse.e-rtl .e-timeline-item.e-connector::after {
177
+ left: calc(50% - var(--connector-size));
178
+ right: auto;
179
+ }
180
+ .e-timeline.e-horizontal.e-rtl .e-timeline-item.e-connector::after, .e-timeline.e-horizontal.e-timeline-reverse .e-timeline-item.e-connector::after {
181
+ right: calc(50% - var(--connector-size));
182
+ left: auto;
183
+ }
184
+ .e-timeline.e-horizontal .e-dot-item {
185
+ margin: calc(var(--dot-size) * 2 / 2) 0;
186
+ }
187
+ .e-timeline.e-horizontal .e-opposite-content,
188
+ .e-timeline.e-horizontal .e-content {
189
+ display: -webkit-box;
190
+ display: -ms-flexbox;
191
+ display: flex;
192
+ }
193
+ .e-timeline.e-horizontal.e-align-alternate .e-timeline-item:nth-of-type(even) .e-content, .e-timeline.e-horizontal.e-align-alternate .e-timeline-item:nth-of-type(odd) .e-opposite-content, .e-timeline.e-horizontal.e-align-alternatereverse .e-timeline-item:nth-of-type(odd) .e-content, .e-timeline.e-horizontal.e-align-alternatereverse .e-timeline-item:nth-of-type(even) .e-opposite-content, .e-timeline.e-horizontal.e-align-before .e-content {
194
+ -webkit-box-align: end;
195
+ -ms-flex-align: end;
196
+ align-items: flex-end;
197
+ }
198
+ .e-timeline.e-horizontal.e-align-alternate .e-timeline-item:nth-of-type(odd) .e-content, .e-timeline.e-horizontal.e-align-alternate .e-timeline-item:nth-of-type(even) .e-opposite-content, .e-timeline.e-horizontal.e-align-alternatereverse .e-timeline-item:nth-of-type(even) .e-content, .e-timeline.e-horizontal.e-align-alternatereverse .e-timeline-item:nth-of-type(odd) .e-opposite-content, .e-timeline.e-horizontal.e-align-before .e-opposite-content {
199
+ -webkit-box-align: start;
200
+ -ms-flex-align: start;
201
+ align-items: flex-start;
202
+ }
203
+ .e-timeline.e-horizontal.e-align-before .e-timeline-item, .e-timeline.e-horizontal.e-align-alternate .e-timeline-item:nth-of-type(even), .e-timeline.e-horizontal.e-align-alternatereverse .e-timeline-item:nth-of-type(odd) {
204
+ -webkit-box-orient: vertical;
205
+ -webkit-box-direction: reverse;
206
+ -ms-flex-direction: column-reverse;
207
+ flex-direction: column-reverse;
208
+ }
209
+ .e-timeline.e-horizontal.e-timeline-reverse .e-timeline-items {
210
+ -webkit-box-orient: horizontal;
211
+ -webkit-box-direction: reverse;
212
+ -ms-flex-direction: row-reverse;
213
+ flex-direction: row-reverse;
214
+ }
215
+ .e-timeline.e-horizontal .e-timeline-item::after {
216
+ width: 100%;
217
+ height: 0;
218
+ top: calc(50% - var(--connector-size));
219
+ }
220
+ .e-timeline.e-horizontal .e-opposite-content {
221
+ display: -webkit-box;
222
+ display: -ms-flexbox;
223
+ display: flex;
224
+ -webkit-box-align: end;
225
+ -ms-flex-align: end;
226
+ align-items: flex-end;
227
+ text-align: left;
228
+ padding: 0;
229
+ }
230
+ .e-timeline.e-horizontal .e-content {
231
+ padding: 0;
232
+ }
233
+ .e-timeline.e-horizontal .e-timeline-item:last-child::after {
234
+ width: auto;
235
+ }
236
+
237
+ .e-bigger.e-timeline [class^="e-dot "]::before,
238
+ .e-bigger .e-timeline [class^="e-dot "]::before {
239
+ min-width: 40px;
240
+ min-height: 40px;
241
+ font-size: 18px;
242
+ }
243
+ .e-bigger.e-timeline .e-dot-item,
244
+ .e-bigger .e-timeline .e-dot-item {
245
+ -webkit-box-flex: 0;
246
+ -ms-flex: 0 1 calc(var(--dot-size) * 4);
247
+ flex: 0 1 calc(var(--dot-size) * 4);
248
+ }
249
+ .e-bigger.e-timeline.e-vertical.e-align-before.e-opposite-content-only .e-connector::after, .e-bigger.e-timeline.e-vertical.e-align-after.e-rtl.e-opposite-content-only .e-connector::after, .e-bigger.e-timeline.e-vertical.e-align-before.e-rtl.e-content-only .e-connector::after, .e-bigger.e-timeline.e-vertical.e-align-after.e-content-only .e-connector::after,
250
+ .e-bigger .e-timeline.e-vertical.e-align-before.e-opposite-content-only .e-connector::after,
251
+ .e-bigger .e-timeline.e-vertical.e-align-after.e-rtl.e-opposite-content-only .e-connector::after,
252
+ .e-bigger .e-timeline.e-vertical.e-align-before.e-rtl.e-content-only .e-connector::after,
253
+ .e-bigger .e-timeline.e-vertical.e-align-after.e-content-only .e-connector::after {
254
+ left: calc(var(--dot-size) * 4 / 2 - var(--connector-size));
255
+ }
256
+ .e-bigger.e-timeline.e-vertical.e-align-before.e-content-only .e-connector::after, .e-bigger.e-timeline.e-vertical.e-align-before.e-rtl.e-opposite-content-only .e-connector::after, .e-bigger.e-timeline.e-vertical.e-align-after.e-opposite-content-only .e-connector::after, .e-bigger.e-timeline.e-vertical.e-align-after.e-rtl.e-content-only .e-connector::after,
257
+ .e-bigger .e-timeline.e-vertical.e-align-before.e-content-only .e-connector::after,
258
+ .e-bigger .e-timeline.e-vertical.e-align-before.e-rtl.e-opposite-content-only .e-connector::after,
259
+ .e-bigger .e-timeline.e-vertical.e-align-after.e-opposite-content-only .e-connector::after,
260
+ .e-bigger .e-timeline.e-vertical.e-align-after.e-rtl.e-content-only .e-connector::after {
261
+ right: calc(var(--dot-size) * 4 / 2 - var(--connector-size));
262
+ }
263
+ .e-bigger.e-timeline .e-dot,
264
+ .e-bigger .e-timeline .e-dot {
265
+ min-width: 20px;
266
+ min-height: 20px;
267
+ }
268
+ .e-bigger.e-timeline .e-opposite-content,
269
+ .e-bigger .e-timeline .e-opposite-content {
270
+ font-size: 14px;
271
+ }
272
+ .e-bigger.e-timeline .e-content,
273
+ .e-bigger .e-timeline .e-content {
274
+ font-size: 16px;
275
+ }
276
+
277
+ .e-timeline .e-dot {
278
+ background-color: #292827;
279
+ border-color: #292827;
280
+ color: #f3f2f1;
281
+ outline-color: #1b1a19;
282
+ }
283
+ .e-timeline.e-outline .e-dot {
284
+ background-color: #1b1a19;
285
+ }
286
+ .e-timeline .e-timeline-item.e-connector::after {
287
+ border-color: #292827;
288
+ }
289
+ .e-timeline .e-content {
290
+ color: #d2d0ce;
291
+ }
292
+ .e-timeline .e-opposite-content {
293
+ color: #d2d0ce;
294
+ }
295
+ .e-timeline .e-item-disabled .e-content,
296
+ .e-timeline .e-item-disabled .e-opposite-content {
297
+ color: #484644;
298
+ }