@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/timeline/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;
@@ -65,12 +65,15 @@
65
65
  .e-timeline [class^="e-dot "]::before,
66
66
  .e-timeline .e-dot-item,
67
67
  .e-timeline .e-dot {
68
+ display: -webkit-box;
68
69
  display: -ms-flexbox;
69
70
  display: flex;
70
- -ms-flex-align: center;
71
- align-items: center;
72
- -ms-flex-pack: center;
73
- justify-content: center;
71
+ -webkit-box-align: center;
72
+ -ms-flex-align: center;
73
+ align-items: center;
74
+ -webkit-box-pack: center;
75
+ -ms-flex-pack: center;
76
+ justify-content: center;
74
77
  }
75
78
  .e-timeline [class^="e-dot "]::before {
76
79
  min-width: 32px;
@@ -78,10 +81,13 @@
78
81
  border-radius: var(--dot-radius);
79
82
  }
80
83
  .e-timeline .e-timeline-items {
84
+ display: -webkit-inline-box;
81
85
  display: -ms-inline-flexbox;
82
86
  display: inline-flex;
83
- -ms-flex-direction: column;
84
- flex-direction: column;
87
+ -webkit-box-orient: vertical;
88
+ -webkit-box-direction: normal;
89
+ -ms-flex-direction: column;
90
+ flex-direction: column;
85
91
  list-style: none;
86
92
  -ms-flex-wrap: nowrap;
87
93
  flex-wrap: nowrap;
@@ -90,13 +96,17 @@
90
96
  height: inherit;
91
97
  }
92
98
  .e-timeline .e-timeline-item {
99
+ display: -webkit-box;
93
100
  display: -ms-flexbox;
94
101
  display: flex;
95
- -ms-flex-direction: row;
96
- flex-direction: row;
102
+ -webkit-box-orient: horizontal;
103
+ -webkit-box-direction: normal;
104
+ -ms-flex-direction: row;
105
+ flex-direction: row;
97
106
  position: relative;
98
- -ms-flex-align: start;
99
- align-items: flex-start;
107
+ -webkit-box-align: start;
108
+ -ms-flex-align: start;
109
+ align-items: flex-start;
100
110
  width: inherit;
101
111
  height: inherit;
102
112
  }
@@ -116,8 +126,9 @@
116
126
  }
117
127
  .e-timeline .e-dot-item {
118
128
  position: relative;
119
- -ms-flex: 0 1 calc(var(--dot-size) * 3);
120
- flex: 0 1 calc(var(--dot-size) * 3);
129
+ -webkit-box-flex: 0;
130
+ -ms-flex: 0 1 calc(var(--dot-size) * 3);
131
+ flex: 0 1 calc(var(--dot-size) * 3);
121
132
  z-index: 1000;
122
133
  }
123
134
  .e-timeline .e-dot {
@@ -133,12 +144,12 @@
133
144
  }
134
145
  .e-timeline .e-opposite-content,
135
146
  .e-timeline .e-content {
136
- -ms-flex: 1 1 50%;
137
- flex: 1 1 50%;
147
+ -webkit-box-flex: 1;
148
+ -ms-flex: 1 1 50%;
149
+ flex: 1 1 50%;
138
150
  }
139
151
  .e-timeline .e-opposite-content {
140
152
  font-size: 12px;
141
- text-align: right;
142
153
  }
143
154
  .e-timeline .e-content {
144
155
  text-align: left;
@@ -152,12 +163,16 @@
152
163
  bottom: calc(var(--dot-size) * 2);
153
164
  }
154
165
  .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) {
155
- -ms-flex-direction: row-reverse;
156
- flex-direction: row-reverse;
166
+ -webkit-box-orient: horizontal;
167
+ -webkit-box-direction: reverse;
168
+ -ms-flex-direction: row-reverse;
169
+ flex-direction: row-reverse;
157
170
  }
158
171
  .e-timeline.e-vertical.e-timeline-reverse .e-timeline-items {
159
- -ms-flex-direction: column-reverse;
160
- flex-direction: column-reverse;
172
+ -webkit-box-orient: vertical;
173
+ -webkit-box-direction: reverse;
174
+ -ms-flex-direction: column-reverse;
175
+ flex-direction: column-reverse;
161
176
  }
162
177
  .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 {
163
178
  text-align: left;
@@ -165,6 +180,19 @@
165
180
  .e-timeline.e-vertical .e-timeline-item.e-connector:last-child::after {
166
181
  content: unset;
167
182
  }
183
+ .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 {
184
+ left: calc(var(--dot-size) * 3 / 2 - var(--connector-size));
185
+ right: auto;
186
+ }
187
+ .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 {
188
+ right: calc(var(--dot-size) * 3 / 2 - var(--connector-size));
189
+ left: auto;
190
+ }
191
+ .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 {
192
+ -webkit-box-flex: 0;
193
+ -ms-flex: 0;
194
+ flex: 0;
195
+ }
168
196
  .e-timeline.e-vertical.e-timeline-reverse .e-timeline-item.e-connector:first-child::after {
169
197
  content: unset;
170
198
  }
@@ -182,13 +210,27 @@
182
210
  width: calc(var(--dot-size) * 2);
183
211
  }
184
212
  .e-timeline.e-horizontal .e-timeline-items {
213
+ display: -webkit-inline-box;
185
214
  display: -ms-inline-flexbox;
186
215
  display: inline-flex;
187
- -ms-flex-direction: row;
188
- flex-direction: row;
216
+ -webkit-box-orient: horizontal;
217
+ -webkit-box-direction: normal;
218
+ -ms-flex-direction: row;
219
+ flex-direction: row;
189
220
  }
190
221
  .e-timeline.e-horizontal .e-timeline-item {
191
222
  height: auto;
223
+ -webkit-box-orient: vertical;
224
+ -webkit-box-direction: normal;
225
+ -ms-flex-direction: column;
226
+ flex-direction: column;
227
+ -webkit-box-align: center;
228
+ -ms-flex-align: center;
229
+ align-items: center;
230
+ }
231
+ .e-timeline.e-horizontal.e-timeline-reverse.e-rtl .e-timeline-item.e-connector::after {
232
+ left: calc(50% - var(--connector-size));
233
+ right: auto;
192
234
  }
193
235
  .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 {
194
236
  right: calc(50% - var(--connector-size));
@@ -197,32 +239,33 @@
197
239
  .e-timeline.e-horizontal .e-dot-item {
198
240
  margin: calc(var(--dot-size) * 2 / 2) 0;
199
241
  }
200
- .e-timeline.e-horizontal .e-timeline-item {
201
- -ms-flex-direction: column;
202
- flex-direction: column;
203
- -ms-flex-align: center;
204
- align-items: center;
205
- }
206
242
  .e-timeline.e-horizontal .e-opposite-content,
207
243
  .e-timeline.e-horizontal .e-content {
244
+ display: -webkit-box;
208
245
  display: -ms-flexbox;
209
246
  display: flex;
210
247
  }
211
248
  .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 {
212
- -ms-flex-align: end;
213
- align-items: flex-end;
249
+ -webkit-box-align: end;
250
+ -ms-flex-align: end;
251
+ align-items: flex-end;
214
252
  }
215
253
  .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 {
216
- -ms-flex-align: start;
217
- align-items: flex-start;
254
+ -webkit-box-align: start;
255
+ -ms-flex-align: start;
256
+ align-items: flex-start;
218
257
  }
219
258
  .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) {
220
- -ms-flex-direction: column-reverse;
221
- flex-direction: column-reverse;
259
+ -webkit-box-orient: vertical;
260
+ -webkit-box-direction: reverse;
261
+ -ms-flex-direction: column-reverse;
262
+ flex-direction: column-reverse;
222
263
  }
223
264
  .e-timeline.e-horizontal.e-timeline-reverse .e-timeline-items {
224
- -ms-flex-direction: row-reverse;
225
- flex-direction: row-reverse;
265
+ -webkit-box-orient: horizontal;
266
+ -webkit-box-direction: reverse;
267
+ -ms-flex-direction: row-reverse;
268
+ flex-direction: row-reverse;
226
269
  }
227
270
  .e-timeline.e-horizontal .e-timeline-item::after {
228
271
  width: 100%;
@@ -230,10 +273,12 @@
230
273
  top: calc(50% - var(--connector-size));
231
274
  }
232
275
  .e-timeline.e-horizontal .e-opposite-content {
276
+ display: -webkit-box;
233
277
  display: -ms-flexbox;
234
278
  display: flex;
235
- -ms-flex-align: end;
236
- align-items: flex-end;
279
+ -webkit-box-align: end;
280
+ -ms-flex-align: end;
281
+ align-items: flex-end;
237
282
  text-align: left;
238
283
  padding: 0;
239
284
  }
@@ -252,8 +297,23 @@
252
297
  }
253
298
  .e-bigger.e-timeline .e-dot-item,
254
299
  .e-bigger .e-timeline .e-dot-item {
255
- -ms-flex: 0 1 calc(var(--dot-size) * 4);
256
- flex: 0 1 calc(var(--dot-size) * 4);
300
+ -webkit-box-flex: 0;
301
+ -ms-flex: 0 1 calc(var(--dot-size) * 4);
302
+ flex: 0 1 calc(var(--dot-size) * 4);
303
+ }
304
+ .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,
305
+ .e-bigger .e-timeline.e-vertical.e-align-before.e-opposite-content-only .e-connector::after,
306
+ .e-bigger .e-timeline.e-vertical.e-align-after.e-rtl.e-opposite-content-only .e-connector::after,
307
+ .e-bigger .e-timeline.e-vertical.e-align-before.e-rtl.e-content-only .e-connector::after,
308
+ .e-bigger .e-timeline.e-vertical.e-align-after.e-content-only .e-connector::after {
309
+ left: calc(var(--dot-size) * 4 / 2 - var(--connector-size));
310
+ }
311
+ .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,
312
+ .e-bigger .e-timeline.e-vertical.e-align-before.e-content-only .e-connector::after,
313
+ .e-bigger .e-timeline.e-vertical.e-align-before.e-rtl.e-opposite-content-only .e-connector::after,
314
+ .e-bigger .e-timeline.e-vertical.e-align-after.e-opposite-content-only .e-connector::after,
315
+ .e-bigger .e-timeline.e-vertical.e-align-after.e-rtl.e-content-only .e-connector::after {
316
+ right: calc(var(--dot-size) * 4 / 2 - var(--connector-size));
257
317
  }
258
318
  .e-bigger.e-timeline .e-dot,
259
319
  .e-bigger .e-timeline .e-dot {
package/styles/timeline/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;
@@ -121,12 +121,15 @@
121
121
  .e-timeline [class^="e-dot "]::before,
122
122
  .e-timeline .e-dot-item,
123
123
  .e-timeline .e-dot {
124
+ display: -webkit-box;
124
125
  display: -ms-flexbox;
125
126
  display: flex;
126
- -ms-flex-align: center;
127
- align-items: center;
128
- -ms-flex-pack: center;
129
- justify-content: center;
127
+ -webkit-box-align: center;
128
+ -ms-flex-align: center;
129
+ align-items: center;
130
+ -webkit-box-pack: center;
131
+ -ms-flex-pack: center;
132
+ justify-content: center;
130
133
  }
131
134
  .e-timeline [class^="e-dot "]::before {
132
135
  min-width: 32px;
@@ -134,10 +137,13 @@
134
137
  border-radius: var(--dot-radius);
135
138
  }
136
139
  .e-timeline .e-timeline-items {
140
+ display: -webkit-inline-box;
137
141
  display: -ms-inline-flexbox;
138
142
  display: inline-flex;
139
- -ms-flex-direction: column;
140
- flex-direction: column;
143
+ -webkit-box-orient: vertical;
144
+ -webkit-box-direction: normal;
145
+ -ms-flex-direction: column;
146
+ flex-direction: column;
141
147
  list-style: none;
142
148
  -ms-flex-wrap: nowrap;
143
149
  flex-wrap: nowrap;
@@ -146,13 +152,17 @@
146
152
  height: inherit;
147
153
  }
148
154
  .e-timeline .e-timeline-item {
155
+ display: -webkit-box;
149
156
  display: -ms-flexbox;
150
157
  display: flex;
151
- -ms-flex-direction: row;
152
- flex-direction: row;
158
+ -webkit-box-orient: horizontal;
159
+ -webkit-box-direction: normal;
160
+ -ms-flex-direction: row;
161
+ flex-direction: row;
153
162
  position: relative;
154
- -ms-flex-align: start;
155
- align-items: flex-start;
163
+ -webkit-box-align: start;
164
+ -ms-flex-align: start;
165
+ align-items: flex-start;
156
166
  width: inherit;
157
167
  height: inherit;
158
168
  }
@@ -172,8 +182,9 @@
172
182
  }
173
183
  .e-timeline .e-dot-item {
174
184
  position: relative;
175
- -ms-flex: 0 1 calc(var(--dot-size) * 3);
176
- flex: 0 1 calc(var(--dot-size) * 3);
185
+ -webkit-box-flex: 0;
186
+ -ms-flex: 0 1 calc(var(--dot-size) * 3);
187
+ flex: 0 1 calc(var(--dot-size) * 3);
177
188
  z-index: 1000;
178
189
  }
179
190
  .e-timeline .e-dot {
@@ -189,12 +200,12 @@
189
200
  }
190
201
  .e-timeline .e-opposite-content,
191
202
  .e-timeline .e-content {
192
- -ms-flex: 1 1 50%;
193
- flex: 1 1 50%;
203
+ -webkit-box-flex: 1;
204
+ -ms-flex: 1 1 50%;
205
+ flex: 1 1 50%;
194
206
  }
195
207
  .e-timeline .e-opposite-content {
196
208
  font-size: 12px;
197
- text-align: right;
198
209
  }
199
210
  .e-timeline .e-content {
200
211
  text-align: left;
@@ -208,12 +219,16 @@
208
219
  bottom: calc(var(--dot-size) * 2);
209
220
  }
210
221
  .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) {
211
- -ms-flex-direction: row-reverse;
212
- flex-direction: row-reverse;
222
+ -webkit-box-orient: horizontal;
223
+ -webkit-box-direction: reverse;
224
+ -ms-flex-direction: row-reverse;
225
+ flex-direction: row-reverse;
213
226
  }
214
227
  .e-timeline.e-vertical.e-timeline-reverse .e-timeline-items {
215
- -ms-flex-direction: column-reverse;
216
- flex-direction: column-reverse;
228
+ -webkit-box-orient: vertical;
229
+ -webkit-box-direction: reverse;
230
+ -ms-flex-direction: column-reverse;
231
+ flex-direction: column-reverse;
217
232
  }
218
233
  .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 {
219
234
  text-align: left;
@@ -221,6 +236,19 @@
221
236
  .e-timeline.e-vertical .e-timeline-item.e-connector:last-child::after {
222
237
  content: unset;
223
238
  }
239
+ .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 {
240
+ left: calc(var(--dot-size) * 3 / 2 - var(--connector-size));
241
+ right: auto;
242
+ }
243
+ .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 {
244
+ right: calc(var(--dot-size) * 3 / 2 - var(--connector-size));
245
+ left: auto;
246
+ }
247
+ .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 {
248
+ -webkit-box-flex: 0;
249
+ -ms-flex: 0;
250
+ flex: 0;
251
+ }
224
252
  .e-timeline.e-vertical.e-timeline-reverse .e-timeline-item.e-connector:first-child::after {
225
253
  content: unset;
226
254
  }
@@ -238,13 +266,27 @@
238
266
  width: calc(var(--dot-size) * 2);
239
267
  }
240
268
  .e-timeline.e-horizontal .e-timeline-items {
269
+ display: -webkit-inline-box;
241
270
  display: -ms-inline-flexbox;
242
271
  display: inline-flex;
243
- -ms-flex-direction: row;
244
- flex-direction: row;
272
+ -webkit-box-orient: horizontal;
273
+ -webkit-box-direction: normal;
274
+ -ms-flex-direction: row;
275
+ flex-direction: row;
245
276
  }
246
277
  .e-timeline.e-horizontal .e-timeline-item {
247
278
  height: auto;
279
+ -webkit-box-orient: vertical;
280
+ -webkit-box-direction: normal;
281
+ -ms-flex-direction: column;
282
+ flex-direction: column;
283
+ -webkit-box-align: center;
284
+ -ms-flex-align: center;
285
+ align-items: center;
286
+ }
287
+ .e-timeline.e-horizontal.e-timeline-reverse.e-rtl .e-timeline-item.e-connector::after {
288
+ left: calc(50% - var(--connector-size));
289
+ right: auto;
248
290
  }
249
291
  .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 {
250
292
  right: calc(50% - var(--connector-size));
@@ -253,32 +295,33 @@
253
295
  .e-timeline.e-horizontal .e-dot-item {
254
296
  margin: calc(var(--dot-size) * 2 / 2) 0;
255
297
  }
256
- .e-timeline.e-horizontal .e-timeline-item {
257
- -ms-flex-direction: column;
258
- flex-direction: column;
259
- -ms-flex-align: center;
260
- align-items: center;
261
- }
262
298
  .e-timeline.e-horizontal .e-opposite-content,
263
299
  .e-timeline.e-horizontal .e-content {
300
+ display: -webkit-box;
264
301
  display: -ms-flexbox;
265
302
  display: flex;
266
303
  }
267
304
  .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 {
268
- -ms-flex-align: end;
269
- align-items: flex-end;
305
+ -webkit-box-align: end;
306
+ -ms-flex-align: end;
307
+ align-items: flex-end;
270
308
  }
271
309
  .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 {
272
- -ms-flex-align: start;
273
- align-items: flex-start;
310
+ -webkit-box-align: start;
311
+ -ms-flex-align: start;
312
+ align-items: flex-start;
274
313
  }
275
314
  .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) {
276
- -ms-flex-direction: column-reverse;
277
- flex-direction: column-reverse;
315
+ -webkit-box-orient: vertical;
316
+ -webkit-box-direction: reverse;
317
+ -ms-flex-direction: column-reverse;
318
+ flex-direction: column-reverse;
278
319
  }
279
320
  .e-timeline.e-horizontal.e-timeline-reverse .e-timeline-items {
280
- -ms-flex-direction: row-reverse;
281
- flex-direction: row-reverse;
321
+ -webkit-box-orient: horizontal;
322
+ -webkit-box-direction: reverse;
323
+ -ms-flex-direction: row-reverse;
324
+ flex-direction: row-reverse;
282
325
  }
283
326
  .e-timeline.e-horizontal .e-timeline-item::after {
284
327
  width: 100%;
@@ -286,10 +329,12 @@
286
329
  top: calc(50% - var(--connector-size));
287
330
  }
288
331
  .e-timeline.e-horizontal .e-opposite-content {
332
+ display: -webkit-box;
289
333
  display: -ms-flexbox;
290
334
  display: flex;
291
- -ms-flex-align: end;
292
- align-items: flex-end;
335
+ -webkit-box-align: end;
336
+ -ms-flex-align: end;
337
+ align-items: flex-end;
293
338
  text-align: left;
294
339
  padding: 0;
295
340
  }
@@ -308,8 +353,23 @@
308
353
  }
309
354
  .e-bigger.e-timeline .e-dot-item,
310
355
  .e-bigger .e-timeline .e-dot-item {
311
- -ms-flex: 0 1 calc(var(--dot-size) * 4);
312
- flex: 0 1 calc(var(--dot-size) * 4);
356
+ -webkit-box-flex: 0;
357
+ -ms-flex: 0 1 calc(var(--dot-size) * 4);
358
+ flex: 0 1 calc(var(--dot-size) * 4);
359
+ }
360
+ .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,
361
+ .e-bigger .e-timeline.e-vertical.e-align-before.e-opposite-content-only .e-connector::after,
362
+ .e-bigger .e-timeline.e-vertical.e-align-after.e-rtl.e-opposite-content-only .e-connector::after,
363
+ .e-bigger .e-timeline.e-vertical.e-align-before.e-rtl.e-content-only .e-connector::after,
364
+ .e-bigger .e-timeline.e-vertical.e-align-after.e-content-only .e-connector::after {
365
+ left: calc(var(--dot-size) * 4 / 2 - var(--connector-size));
366
+ }
367
+ .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,
368
+ .e-bigger .e-timeline.e-vertical.e-align-before.e-content-only .e-connector::after,
369
+ .e-bigger .e-timeline.e-vertical.e-align-before.e-rtl.e-opposite-content-only .e-connector::after,
370
+ .e-bigger .e-timeline.e-vertical.e-align-after.e-opposite-content-only .e-connector::after,
371
+ .e-bigger .e-timeline.e-vertical.e-align-after.e-rtl.e-content-only .e-connector::after {
372
+ right: calc(var(--dot-size) * 4 / 2 - var(--connector-size));
313
373
  }
314
374
  .e-bigger.e-timeline .e-dot,
315
375
  .e-bigger .e-timeline .e-dot {