@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/material-dark.css CHANGED
@@ -10,12 +10,15 @@
10
10
  .e-timeline [class^="e-dot "]::before,
11
11
  .e-timeline .e-dot-item,
12
12
  .e-timeline .e-dot {
13
+ display: -webkit-box;
13
14
  display: -ms-flexbox;
14
15
  display: flex;
15
- -ms-flex-align: center;
16
- align-items: center;
17
- -ms-flex-pack: center;
18
- justify-content: center;
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;
19
22
  }
20
23
  .e-timeline [class^="e-dot "]::before {
21
24
  min-width: 32px;
@@ -23,10 +26,13 @@
23
26
  border-radius: var(--dot-radius);
24
27
  }
25
28
  .e-timeline .e-timeline-items {
29
+ display: -webkit-inline-box;
26
30
  display: -ms-inline-flexbox;
27
31
  display: inline-flex;
28
- -ms-flex-direction: column;
29
- flex-direction: column;
32
+ -webkit-box-orient: vertical;
33
+ -webkit-box-direction: normal;
34
+ -ms-flex-direction: column;
35
+ flex-direction: column;
30
36
  list-style: none;
31
37
  -ms-flex-wrap: nowrap;
32
38
  flex-wrap: nowrap;
@@ -35,13 +41,17 @@
35
41
  height: inherit;
36
42
  }
37
43
  .e-timeline .e-timeline-item {
44
+ display: -webkit-box;
38
45
  display: -ms-flexbox;
39
46
  display: flex;
40
- -ms-flex-direction: row;
41
- flex-direction: row;
47
+ -webkit-box-orient: horizontal;
48
+ -webkit-box-direction: normal;
49
+ -ms-flex-direction: row;
50
+ flex-direction: row;
42
51
  position: relative;
43
- -ms-flex-align: start;
44
- align-items: flex-start;
52
+ -webkit-box-align: start;
53
+ -ms-flex-align: start;
54
+ align-items: flex-start;
45
55
  width: inherit;
46
56
  height: inherit;
47
57
  }
@@ -61,8 +71,9 @@
61
71
  }
62
72
  .e-timeline .e-dot-item {
63
73
  position: relative;
64
- -ms-flex: 0 1 calc(var(--dot-size) * 3);
65
- flex: 0 1 calc(var(--dot-size) * 3);
74
+ -webkit-box-flex: 0;
75
+ -ms-flex: 0 1 calc(var(--dot-size) * 3);
76
+ flex: 0 1 calc(var(--dot-size) * 3);
66
77
  z-index: 1000;
67
78
  }
68
79
  .e-timeline .e-dot {
@@ -78,12 +89,12 @@
78
89
  }
79
90
  .e-timeline .e-opposite-content,
80
91
  .e-timeline .e-content {
81
- -ms-flex: 1 1 50%;
82
- flex: 1 1 50%;
92
+ -webkit-box-flex: 1;
93
+ -ms-flex: 1 1 50%;
94
+ flex: 1 1 50%;
83
95
  }
84
96
  .e-timeline .e-opposite-content {
85
97
  font-size: 12px;
86
- text-align: right;
87
98
  }
88
99
  .e-timeline .e-content {
89
100
  text-align: left;
@@ -97,12 +108,16 @@
97
108
  bottom: calc(var(--dot-size) * 2);
98
109
  }
99
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) {
100
- -ms-flex-direction: row-reverse;
101
- flex-direction: row-reverse;
111
+ -webkit-box-orient: horizontal;
112
+ -webkit-box-direction: reverse;
113
+ -ms-flex-direction: row-reverse;
114
+ flex-direction: row-reverse;
102
115
  }
103
116
  .e-timeline.e-vertical.e-timeline-reverse .e-timeline-items {
104
- -ms-flex-direction: column-reverse;
105
- flex-direction: column-reverse;
117
+ -webkit-box-orient: vertical;
118
+ -webkit-box-direction: reverse;
119
+ -ms-flex-direction: column-reverse;
120
+ flex-direction: column-reverse;
106
121
  }
107
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 {
108
123
  text-align: left;
@@ -110,6 +125,19 @@
110
125
  .e-timeline.e-vertical .e-timeline-item.e-connector:last-child::after {
111
126
  content: unset;
112
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
+ }
113
141
  .e-timeline.e-vertical.e-timeline-reverse .e-timeline-item.e-connector:first-child::after {
114
142
  content: unset;
115
143
  }
@@ -127,13 +155,27 @@
127
155
  width: calc(var(--dot-size) * 2);
128
156
  }
129
157
  .e-timeline.e-horizontal .e-timeline-items {
158
+ display: -webkit-inline-box;
130
159
  display: -ms-inline-flexbox;
131
160
  display: inline-flex;
132
- -ms-flex-direction: row;
133
- flex-direction: row;
161
+ -webkit-box-orient: horizontal;
162
+ -webkit-box-direction: normal;
163
+ -ms-flex-direction: row;
164
+ flex-direction: row;
134
165
  }
135
166
  .e-timeline.e-horizontal .e-timeline-item {
136
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;
137
179
  }
138
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 {
139
181
  right: calc(50% - var(--connector-size));
@@ -142,32 +184,33 @@
142
184
  .e-timeline.e-horizontal .e-dot-item {
143
185
  margin: calc(var(--dot-size) * 2 / 2) 0;
144
186
  }
145
- .e-timeline.e-horizontal .e-timeline-item {
146
- -ms-flex-direction: column;
147
- flex-direction: column;
148
- -ms-flex-align: center;
149
- align-items: center;
150
- }
151
187
  .e-timeline.e-horizontal .e-opposite-content,
152
188
  .e-timeline.e-horizontal .e-content {
189
+ display: -webkit-box;
153
190
  display: -ms-flexbox;
154
191
  display: flex;
155
192
  }
156
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 {
157
- -ms-flex-align: end;
158
- align-items: flex-end;
194
+ -webkit-box-align: end;
195
+ -ms-flex-align: end;
196
+ align-items: flex-end;
159
197
  }
160
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 {
161
- -ms-flex-align: start;
162
- align-items: flex-start;
199
+ -webkit-box-align: start;
200
+ -ms-flex-align: start;
201
+ align-items: flex-start;
163
202
  }
164
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) {
165
- -ms-flex-direction: column-reverse;
166
- flex-direction: column-reverse;
204
+ -webkit-box-orient: vertical;
205
+ -webkit-box-direction: reverse;
206
+ -ms-flex-direction: column-reverse;
207
+ flex-direction: column-reverse;
167
208
  }
168
209
  .e-timeline.e-horizontal.e-timeline-reverse .e-timeline-items {
169
- -ms-flex-direction: row-reverse;
170
- flex-direction: row-reverse;
210
+ -webkit-box-orient: horizontal;
211
+ -webkit-box-direction: reverse;
212
+ -ms-flex-direction: row-reverse;
213
+ flex-direction: row-reverse;
171
214
  }
172
215
  .e-timeline.e-horizontal .e-timeline-item::after {
173
216
  width: 100%;
@@ -175,10 +218,12 @@
175
218
  top: calc(50% - var(--connector-size));
176
219
  }
177
220
  .e-timeline.e-horizontal .e-opposite-content {
221
+ display: -webkit-box;
178
222
  display: -ms-flexbox;
179
223
  display: flex;
180
- -ms-flex-align: end;
181
- align-items: flex-end;
224
+ -webkit-box-align: end;
225
+ -ms-flex-align: end;
226
+ align-items: flex-end;
182
227
  text-align: left;
183
228
  padding: 0;
184
229
  }
@@ -197,8 +242,23 @@
197
242
  }
198
243
  .e-bigger.e-timeline .e-dot-item,
199
244
  .e-bigger .e-timeline .e-dot-item {
200
- -ms-flex: 0 1 calc(var(--dot-size) * 4);
201
- flex: 0 1 calc(var(--dot-size) * 4);
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));
202
262
  }
203
263
  .e-bigger.e-timeline .e-dot,
204
264
  .e-bigger .e-timeline .e-dot {
package/styles/timeline/material.css CHANGED
@@ -10,12 +10,15 @@
10
10
  .e-timeline [class^="e-dot "]::before,
11
11
  .e-timeline .e-dot-item,
12
12
  .e-timeline .e-dot {
13
+ display: -webkit-box;
13
14
  display: -ms-flexbox;
14
15
  display: flex;
15
- -ms-flex-align: center;
16
- align-items: center;
17
- -ms-flex-pack: center;
18
- justify-content: center;
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;
19
22
  }
20
23
  .e-timeline [class^="e-dot "]::before {
21
24
  min-width: 32px;
@@ -23,10 +26,13 @@
23
26
  border-radius: var(--dot-radius);
24
27
  }
25
28
  .e-timeline .e-timeline-items {
29
+ display: -webkit-inline-box;
26
30
  display: -ms-inline-flexbox;
27
31
  display: inline-flex;
28
- -ms-flex-direction: column;
29
- flex-direction: column;
32
+ -webkit-box-orient: vertical;
33
+ -webkit-box-direction: normal;
34
+ -ms-flex-direction: column;
35
+ flex-direction: column;
30
36
  list-style: none;
31
37
  -ms-flex-wrap: nowrap;
32
38
  flex-wrap: nowrap;
@@ -35,13 +41,17 @@
35
41
  height: inherit;
36
42
  }
37
43
  .e-timeline .e-timeline-item {
44
+ display: -webkit-box;
38
45
  display: -ms-flexbox;
39
46
  display: flex;
40
- -ms-flex-direction: row;
41
- flex-direction: row;
47
+ -webkit-box-orient: horizontal;
48
+ -webkit-box-direction: normal;
49
+ -ms-flex-direction: row;
50
+ flex-direction: row;
42
51
  position: relative;
43
- -ms-flex-align: start;
44
- align-items: flex-start;
52
+ -webkit-box-align: start;
53
+ -ms-flex-align: start;
54
+ align-items: flex-start;
45
55
  width: inherit;
46
56
  height: inherit;
47
57
  }
@@ -61,8 +71,9 @@
61
71
  }
62
72
  .e-timeline .e-dot-item {
63
73
  position: relative;
64
- -ms-flex: 0 1 calc(var(--dot-size) * 3);
65
- flex: 0 1 calc(var(--dot-size) * 3);
74
+ -webkit-box-flex: 0;
75
+ -ms-flex: 0 1 calc(var(--dot-size) * 3);
76
+ flex: 0 1 calc(var(--dot-size) * 3);
66
77
  z-index: 1000;
67
78
  }
68
79
  .e-timeline .e-dot {
@@ -78,12 +89,12 @@
78
89
  }
79
90
  .e-timeline .e-opposite-content,
80
91
  .e-timeline .e-content {
81
- -ms-flex: 1 1 50%;
82
- flex: 1 1 50%;
92
+ -webkit-box-flex: 1;
93
+ -ms-flex: 1 1 50%;
94
+ flex: 1 1 50%;
83
95
  }
84
96
  .e-timeline .e-opposite-content {
85
97
  font-size: 12px;
86
- text-align: right;
87
98
  }
88
99
  .e-timeline .e-content {
89
100
  text-align: left;
@@ -97,12 +108,16 @@
97
108
  bottom: calc(var(--dot-size) * 2);
98
109
  }
99
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) {
100
- -ms-flex-direction: row-reverse;
101
- flex-direction: row-reverse;
111
+ -webkit-box-orient: horizontal;
112
+ -webkit-box-direction: reverse;
113
+ -ms-flex-direction: row-reverse;
114
+ flex-direction: row-reverse;
102
115
  }
103
116
  .e-timeline.e-vertical.e-timeline-reverse .e-timeline-items {
104
- -ms-flex-direction: column-reverse;
105
- flex-direction: column-reverse;
117
+ -webkit-box-orient: vertical;
118
+ -webkit-box-direction: reverse;
119
+ -ms-flex-direction: column-reverse;
120
+ flex-direction: column-reverse;
106
121
  }
107
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 {
108
123
  text-align: left;
@@ -110,6 +125,19 @@
110
125
  .e-timeline.e-vertical .e-timeline-item.e-connector:last-child::after {
111
126
  content: unset;
112
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
+ }
113
141
  .e-timeline.e-vertical.e-timeline-reverse .e-timeline-item.e-connector:first-child::after {
114
142
  content: unset;
115
143
  }
@@ -127,13 +155,27 @@
127
155
  width: calc(var(--dot-size) * 2);
128
156
  }
129
157
  .e-timeline.e-horizontal .e-timeline-items {
158
+ display: -webkit-inline-box;
130
159
  display: -ms-inline-flexbox;
131
160
  display: inline-flex;
132
- -ms-flex-direction: row;
133
- flex-direction: row;
161
+ -webkit-box-orient: horizontal;
162
+ -webkit-box-direction: normal;
163
+ -ms-flex-direction: row;
164
+ flex-direction: row;
134
165
  }
135
166
  .e-timeline.e-horizontal .e-timeline-item {
136
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;
137
179
  }
138
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 {
139
181
  right: calc(50% - var(--connector-size));
@@ -142,32 +184,33 @@
142
184
  .e-timeline.e-horizontal .e-dot-item {
143
185
  margin: calc(var(--dot-size) * 2 / 2) 0;
144
186
  }
145
- .e-timeline.e-horizontal .e-timeline-item {
146
- -ms-flex-direction: column;
147
- flex-direction: column;
148
- -ms-flex-align: center;
149
- align-items: center;
150
- }
151
187
  .e-timeline.e-horizontal .e-opposite-content,
152
188
  .e-timeline.e-horizontal .e-content {
189
+ display: -webkit-box;
153
190
  display: -ms-flexbox;
154
191
  display: flex;
155
192
  }
156
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 {
157
- -ms-flex-align: end;
158
- align-items: flex-end;
194
+ -webkit-box-align: end;
195
+ -ms-flex-align: end;
196
+ align-items: flex-end;
159
197
  }
160
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 {
161
- -ms-flex-align: start;
162
- align-items: flex-start;
199
+ -webkit-box-align: start;
200
+ -ms-flex-align: start;
201
+ align-items: flex-start;
163
202
  }
164
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) {
165
- -ms-flex-direction: column-reverse;
166
- flex-direction: column-reverse;
204
+ -webkit-box-orient: vertical;
205
+ -webkit-box-direction: reverse;
206
+ -ms-flex-direction: column-reverse;
207
+ flex-direction: column-reverse;
167
208
  }
168
209
  .e-timeline.e-horizontal.e-timeline-reverse .e-timeline-items {
169
- -ms-flex-direction: row-reverse;
170
- flex-direction: row-reverse;
210
+ -webkit-box-orient: horizontal;
211
+ -webkit-box-direction: reverse;
212
+ -ms-flex-direction: row-reverse;
213
+ flex-direction: row-reverse;
171
214
  }
172
215
  .e-timeline.e-horizontal .e-timeline-item::after {
173
216
  width: 100%;
@@ -175,10 +218,12 @@
175
218
  top: calc(50% - var(--connector-size));
176
219
  }
177
220
  .e-timeline.e-horizontal .e-opposite-content {
221
+ display: -webkit-box;
178
222
  display: -ms-flexbox;
179
223
  display: flex;
180
- -ms-flex-align: end;
181
- align-items: flex-end;
224
+ -webkit-box-align: end;
225
+ -ms-flex-align: end;
226
+ align-items: flex-end;
182
227
  text-align: left;
183
228
  padding: 0;
184
229
  }
@@ -197,8 +242,23 @@
197
242
  }
198
243
  .e-bigger.e-timeline .e-dot-item,
199
244
  .e-bigger .e-timeline .e-dot-item {
200
- -ms-flex: 0 1 calc(var(--dot-size) * 4);
201
- flex: 0 1 calc(var(--dot-size) * 4);
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));
202
262
  }
203
263
  .e-bigger.e-timeline .e-dot,
204
264
  .e-bigger .e-timeline .e-dot {