@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
@@ -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;
@@ -129,6 +129,7 @@
129
129
 
130
130
  .e-splitter.e-splitter-horizontal, .e-splitter.e-splitter-vertical {
131
131
  border-width: 1px;
132
+ display: -webkit-box;
132
133
  display: -ms-flexbox;
133
134
  display: flex;
134
135
  overflow: hidden;
@@ -138,8 +139,9 @@
138
139
  width: 100%;
139
140
  }
140
141
  .e-splitter.e-splitter-horizontal .e-pane, .e-splitter.e-splitter-vertical .e-pane {
141
- -ms-flex: 1 1 auto;
142
- flex: 1 1 auto;
142
+ -webkit-box-flex: 1;
143
+ -ms-flex: 1 1 auto;
144
+ flex: 1 1 auto;
143
145
  font-family: "Roboto", -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", sans-serif;
144
146
  font-size: 14px;
145
147
  font-weight: 400;
@@ -148,8 +150,9 @@
148
150
  overflow: auto;
149
151
  }
150
152
  .e-splitter.e-splitter-horizontal .e-pane.e-static-pane, .e-splitter.e-splitter-vertical .e-pane.e-static-pane {
151
- -ms-flex-positive: 0;
152
- flex-grow: 0;
153
+ -webkit-box-flex: 0;
154
+ -ms-flex-positive: 0;
155
+ flex-grow: 0;
153
156
  -ms-flex-negative: 0;
154
157
  flex-shrink: 0;
155
158
  }
@@ -162,27 +165,35 @@
162
165
  overflow: hidden !important; /* stylelint-disable-line declaration-no-important */
163
166
  }
164
167
  .e-splitter.e-splitter-horizontal {
165
- -ms-flex-direction: row;
166
- flex-direction: row;
168
+ -webkit-box-orient: horizontal;
169
+ -webkit-box-direction: normal;
170
+ -ms-flex-direction: row;
171
+ flex-direction: row;
167
172
  }
168
173
  .e-splitter.e-splitter-horizontal.e-pane.e-scrollable {
169
174
  overflow: hidden;
170
175
  }
171
176
  .e-splitter.e-splitter-horizontal.e-rtl {
172
- -ms-flex-direction: row-reverse;
173
- flex-direction: row-reverse;
177
+ -webkit-box-orient: horizontal;
178
+ -webkit-box-direction: reverse;
179
+ -ms-flex-direction: row-reverse;
180
+ flex-direction: row-reverse;
174
181
  }
175
182
  .e-splitter.e-splitter-horizontal.e-rtl .e-split-bar.e-split-bar-horizontal {
176
- -ms-flex-direction: row-reverse;
177
- flex-direction: row-reverse;
183
+ -webkit-box-orient: horizontal;
184
+ -webkit-box-direction: reverse;
185
+ -ms-flex-direction: row-reverse;
186
+ flex-direction: row-reverse;
178
187
  }
179
188
  .e-splitter.e-splitter-horizontal.e-rtl .e-split-bar.e-split-bar-horizontal .e-navigate-arrow:not(.e-arrow-right)::before,
180
189
  .e-splitter.e-splitter-horizontal.e-rtl .e-split-bar.e-split-bar-horizontal .e-navigate-arrow:not(.e-arrow-right)::after {
181
190
  right: auto;
182
191
  }
183
192
  .e-splitter.e-splitter-vertical {
184
- -ms-flex-direction: column;
185
- flex-direction: column;
193
+ -webkit-box-orient: vertical;
194
+ -webkit-box-direction: normal;
195
+ -ms-flex-direction: column;
196
+ flex-direction: column;
186
197
  }
187
198
  .e-splitter.e-splitter-vertical.e-pane.e-scrollable {
188
199
  overflow: hidden;
@@ -214,14 +225,18 @@
214
225
  right: auto;
215
226
  }
216
227
  .e-splitter .e-split-bar.e-split-bar-horizontal {
217
- -ms-flex-align: center;
218
- align-items: center;
228
+ -webkit-box-align: center;
229
+ -ms-flex-align: center;
230
+ align-items: center;
231
+ display: -webkit-box;
219
232
  display: -ms-flexbox;
220
233
  display: flex;
221
- -ms-flex: 0 0 auto;
222
- flex: 0 0 auto;
223
- -ms-flex-pack: center;
224
- justify-content: center;
234
+ -webkit-box-flex: 0;
235
+ -ms-flex: 0 0 auto;
236
+ flex: 0 0 auto;
237
+ -webkit-box-pack: center;
238
+ -ms-flex-pack: center;
239
+ justify-content: center;
225
240
  min-width: 1px;
226
241
  z-index: 15;
227
242
  }
@@ -241,13 +256,16 @@
241
256
  z-index: 10;
242
257
  }
243
258
  .e-splitter .e-split-bar.e-split-bar-horizontal .e-resize-handler {
244
- -ms-flex-align: center;
245
- align-items: center;
259
+ -webkit-box-align: center;
260
+ -ms-flex-align: center;
261
+ align-items: center;
262
+ display: -webkit-box;
246
263
  display: -ms-flexbox;
247
264
  display: flex;
248
265
  height: 18px;
249
- -ms-flex-pack: center;
250
- justify-content: center;
266
+ -webkit-box-pack: center;
267
+ -ms-flex-pack: center;
268
+ justify-content: center;
251
269
  position: relative;
252
270
  width: 1px;
253
271
  }
@@ -260,9 +278,11 @@
260
278
  right: 3px;
261
279
  }
262
280
  .e-splitter .e-split-bar.e-split-bar-horizontal .e-navigate-arrow {
263
- border-image: none;
281
+ -o-border-image: none;
282
+ border-image: none;
264
283
  border-width: 1px;
265
284
  cursor: pointer;
285
+ display: -webkit-box;
266
286
  display: -ms-flexbox;
267
287
  display: flex;
268
288
  height: 26px;
@@ -274,16 +294,19 @@
274
294
  content: "";
275
295
  height: 8px;
276
296
  position: absolute;
277
- transform: rotate(0deg);
297
+ -webkit-transform: rotate(0deg);
298
+ transform: rotate(0deg);
278
299
  width: 2px;
279
300
  }
280
301
  .e-splitter .e-split-bar.e-split-bar-horizontal .e-navigate-arrow::before {
281
302
  top: 5px;
282
- transform-origin: 1px 7px 0;
303
+ -webkit-transform-origin: 1px 7px 0;
304
+ transform-origin: 1px 7px 0;
283
305
  }
284
306
  .e-splitter .e-split-bar.e-split-bar-horizontal .e-navigate-arrow::after {
285
307
  top: 11px;
286
- transform-origin: 1px 1px 0;
308
+ -webkit-transform-origin: 1px 1px 0;
309
+ transform-origin: 1px 1px 0;
287
310
  }
288
311
  .e-splitter .e-split-bar.e-split-bar-horizontal .e-navigate-arrow:not(.e-arrow-right) {
289
312
  border-radius: 50%;
@@ -303,16 +326,20 @@
303
326
  margin: 0 0 0 3px;
304
327
  }
305
328
  .e-splitter .e-split-bar.e-split-bar-vertical {
306
- -ms-flex-align: center;
307
- align-items: center;
329
+ -webkit-box-align: center;
330
+ -ms-flex-align: center;
331
+ align-items: center;
308
332
  border-left: none;
309
333
  border-right: none;
334
+ display: -webkit-box;
310
335
  display: -ms-flexbox;
311
336
  display: flex;
312
- -ms-flex: 0 0 auto;
313
- flex: 0 0 auto;
314
- -ms-flex-pack: center;
315
- justify-content: center;
337
+ -webkit-box-flex: 0;
338
+ -ms-flex: 0 0 auto;
339
+ flex: 0 0 auto;
340
+ -webkit-box-pack: center;
341
+ -ms-flex-pack: center;
342
+ justify-content: center;
316
343
  min-height: 1px;
317
344
  }
318
345
  .e-splitter .e-split-bar.e-split-bar-vertical .e-icon-hidden {
@@ -331,13 +358,16 @@
331
358
  z-index: 12;
332
359
  }
333
360
  .e-splitter .e-split-bar.e-split-bar-vertical .e-resize-handler {
334
- -ms-flex-align: center;
335
- align-items: center;
361
+ -webkit-box-align: center;
362
+ -ms-flex-align: center;
363
+ align-items: center;
364
+ display: -webkit-box;
336
365
  display: -ms-flexbox;
337
366
  display: flex;
338
367
  height: 1px;
339
- -ms-flex-pack: center;
340
- justify-content: center;
368
+ -webkit-box-pack: center;
369
+ -ms-flex-pack: center;
370
+ justify-content: center;
341
371
  width: 18px;
342
372
  }
343
373
  .e-splitter .e-split-bar.e-split-bar-vertical .e-resize-handler.e-hide-handler {
@@ -348,9 +378,11 @@
348
378
  left: 10px;
349
379
  }
350
380
  .e-splitter .e-split-bar.e-split-bar-vertical .e-navigate-arrow {
351
- border-image: none;
381
+ -o-border-image: none;
382
+ border-image: none;
352
383
  border-width: 0;
353
384
  cursor: pointer;
385
+ display: -webkit-box;
354
386
  display: -ms-flexbox;
355
387
  display: flex;
356
388
  height: 26px;
@@ -363,27 +395,32 @@
363
395
  content: "";
364
396
  height: 8px;
365
397
  position: absolute;
366
- transform: rotate(90deg);
398
+ -webkit-transform: rotate(90deg);
399
+ transform: rotate(90deg);
367
400
  width: 2px;
368
401
  }
369
402
  .e-splitter .e-split-bar.e-split-bar-vertical .e-navigate-arrow:not(.e-arrow-down)::before {
370
403
  top: 3px;
371
- transform-origin: 2px 7px 0;
404
+ -webkit-transform-origin: 2px 7px 0;
405
+ transform-origin: 2px 7px 0;
372
406
  }
373
407
  .e-splitter .e-split-bar.e-split-bar-vertical .e-navigate-arrow:not(.e-arrow-down)::after {
374
408
  left: 11px;
375
409
  top: 8px;
376
- transform-origin: 1px 1px 0;
410
+ -webkit-transform-origin: 1px 1px 0;
411
+ transform-origin: 1px 1px 0;
377
412
  }
378
413
  .e-splitter .e-split-bar.e-split-bar-vertical .e-navigate-arrow.e-arrow-down::before {
379
414
  left: 12px;
380
415
  top: 8px;
381
- transform-origin: 1px 6px 0;
416
+ -webkit-transform-origin: 1px 6px 0;
417
+ transform-origin: 1px 6px 0;
382
418
  }
383
419
  .e-splitter .e-split-bar.e-split-bar-vertical .e-navigate-arrow.e-arrow-down::after {
384
420
  left: 10px;
385
421
  top: 12px;
386
- transform-origin: 1px 2px 0;
422
+ -webkit-transform-origin: 1px 2px 0;
423
+ transform-origin: 1px 2px 0;
387
424
  }
388
425
  .e-splitter .e-split-bar.e-split-bar-vertical .e-navigate-arrow:not(.e-arrow-down) {
389
426
  border-radius: 50%;
@@ -423,8 +460,10 @@
423
460
  }
424
461
 
425
462
  .e-rtl .e-splitter.e-splitter-horizontal {
426
- -ms-flex-direction: row-reverse;
427
- flex-direction: row-reverse;
463
+ -webkit-box-orient: horizontal;
464
+ -webkit-box-direction: reverse;
465
+ -ms-flex-direction: row-reverse;
466
+ flex-direction: row-reverse;
428
467
  }
429
468
 
430
469
  .e-bigger .e-splitter .e-pane {
@@ -453,8 +492,10 @@
453
492
  }
454
493
 
455
494
  .e-splitter.e-ie .e-split-bar-horizontal .e-resize-handler {
456
- -ms-flex-direction: column;
457
- flex-direction: column;
495
+ -webkit-box-orient: vertical;
496
+ -webkit-box-direction: normal;
497
+ -ms-flex-direction: column;
498
+ flex-direction: column;
458
499
  }
459
500
 
460
501
  .e-splitter.e-splitter-horizontal, .e-splitter.e-splitter-vertical {
@@ -480,13 +521,16 @@
480
521
  background-color: transparent;
481
522
  border-color: transparent;
482
523
  color: transparent;
524
+ -webkit-transition: background-color 500ms ease-out;
483
525
  transition: background-color 500ms ease-out;
484
526
  }
485
527
  .e-splitter .e-split-bar.e-split-bar-horizontal .e-navigate-arrow:not(.e-icon-hidden)::before, .e-splitter .e-split-bar.e-split-bar-horizontal .e-navigate-arrow:not(.e-icon-hidden)::after {
486
528
  background-color: rgba(var(--color-sf-primary));
487
529
  opacity: 0;
488
- transition-duration: 0.3s;
489
- transition-timing-function: cubic-bezier(0.25, 0.1, 0.25, 1);
530
+ -webkit-transition-duration: 0.3s;
531
+ transition-duration: 0.3s;
532
+ -webkit-transition-timing-function: cubic-bezier(0.25, 0.1, 0.25, 1);
533
+ transition-timing-function: cubic-bezier(0.25, 0.1, 0.25, 1);
490
534
  }
491
535
  .e-splitter .e-split-bar.e-split-bar-horizontal.e-split-bar-hover, .e-splitter .e-split-bar.e-split-bar-horizontal.e-split-bar-active {
492
536
  background: rgba(var(--color-sf-primary));
@@ -506,22 +550,26 @@
506
550
  .e-splitter .e-split-bar.e-split-bar-horizontal.e-split-bar-hover.e-split-bar-hover .e-navigate-arrow::before, .e-splitter .e-split-bar.e-split-bar-horizontal.e-split-bar-hover.e-split-bar-active .e-navigate-arrow::before, .e-splitter .e-split-bar.e-split-bar-horizontal.e-split-bar-active.e-split-bar-hover .e-navigate-arrow::before, .e-splitter .e-split-bar.e-split-bar-horizontal.e-split-bar-active.e-split-bar-active .e-navigate-arrow::before {
507
551
  background-color: rgba(var(--color-sf-primary));
508
552
  opacity: 1;
509
- transform: rotate(40deg);
553
+ -webkit-transform: rotate(40deg);
554
+ transform: rotate(40deg);
510
555
  }
511
556
  .e-splitter .e-split-bar.e-split-bar-horizontal.e-split-bar-hover.e-split-bar-hover .e-navigate-arrow::after, .e-splitter .e-split-bar.e-split-bar-horizontal.e-split-bar-hover.e-split-bar-active .e-navigate-arrow::after, .e-splitter .e-split-bar.e-split-bar-horizontal.e-split-bar-active.e-split-bar-hover .e-navigate-arrow::after, .e-splitter .e-split-bar.e-split-bar-horizontal.e-split-bar-active.e-split-bar-active .e-navigate-arrow::after {
512
557
  background-color: rgba(var(--color-sf-primary));
513
558
  opacity: 1;
514
- transform: rotate(-40deg);
559
+ -webkit-transform: rotate(-40deg);
560
+ transform: rotate(-40deg);
515
561
  }
516
562
  .e-splitter .e-split-bar.e-split-bar-horizontal.e-split-bar-hover .e-navigate-arrow.e-arrow-right::before, .e-splitter .e-split-bar.e-split-bar-horizontal.e-split-bar-active .e-navigate-arrow.e-arrow-right::before {
517
563
  background-color: rgba(var(--color-sf-primary));
518
564
  opacity: 1;
519
- transform: rotate(-40deg);
565
+ -webkit-transform: rotate(-40deg);
566
+ transform: rotate(-40deg);
520
567
  }
521
568
  .e-splitter .e-split-bar.e-split-bar-horizontal.e-split-bar-hover .e-navigate-arrow.e-arrow-right::after, .e-splitter .e-split-bar.e-split-bar-horizontal.e-split-bar-active .e-navigate-arrow.e-arrow-right::after {
522
569
  background-color: rgba(var(--color-sf-primary));
523
570
  opacity: 1;
524
- transform: rotate(40deg);
571
+ -webkit-transform: rotate(40deg);
572
+ transform: rotate(40deg);
525
573
  }
526
574
  .e-splitter .e-split-bar.e-split-bar-horizontal.e-split-bar-active {
527
575
  background: rgba(var(--color-sf-primary));
@@ -556,34 +604,41 @@
556
604
  .e-splitter .e-split-bar.e-split-bar-vertical.e-split-bar-hover .e-navigate-arrow.e-arrow-up::before, .e-splitter .e-split-bar.e-split-bar-vertical.e-split-bar-active .e-navigate-arrow.e-arrow-up::before {
557
605
  background-color: rgba(var(--color-sf-primary));
558
606
  opacity: 1;
559
- transform: rotate(125deg);
607
+ -webkit-transform: rotate(125deg);
608
+ transform: rotate(125deg);
560
609
  }
561
610
  .e-splitter .e-split-bar.e-split-bar-vertical.e-split-bar-hover .e-navigate-arrow.e-arrow-up::after, .e-splitter .e-split-bar.e-split-bar-vertical.e-split-bar-active .e-navigate-arrow.e-arrow-up::after {
562
611
  background-color: rgba(var(--color-sf-primary));
563
612
  opacity: 1;
564
- transform: rotate(50deg);
613
+ -webkit-transform: rotate(50deg);
614
+ transform: rotate(50deg);
565
615
  }
566
616
  .e-splitter .e-split-bar.e-split-bar-vertical.e-split-bar-hover .e-navigate-arrow.e-arrow-down::before, .e-splitter .e-split-bar.e-split-bar-vertical.e-split-bar-active .e-navigate-arrow.e-arrow-down::before {
567
617
  background-color: rgba(var(--color-sf-primary));
568
618
  opacity: 1;
569
- transform: rotate(55deg);
619
+ -webkit-transform: rotate(55deg);
620
+ transform: rotate(55deg);
570
621
  }
571
622
  .e-splitter .e-split-bar.e-split-bar-vertical.e-split-bar-hover .e-navigate-arrow.e-arrow-down::after, .e-splitter .e-split-bar.e-split-bar-vertical.e-split-bar-active .e-navigate-arrow.e-arrow-down::after {
572
623
  background-color: rgba(var(--color-sf-primary));
573
624
  opacity: 1;
574
- transform: rotate(125deg);
625
+ -webkit-transform: rotate(125deg);
626
+ transform: rotate(125deg);
575
627
  }
576
628
  .e-splitter .e-split-bar.e-split-bar-vertical .e-navigate-arrow {
577
629
  background-color: transparent;
578
630
  border-color: transparent;
579
631
  color: transparent;
632
+ -webkit-transition: background-color 300ms ease-out;
580
633
  transition: background-color 300ms ease-out;
581
634
  }
582
635
  .e-splitter .e-split-bar.e-split-bar-vertical .e-navigate-arrow::before, .e-splitter .e-split-bar.e-split-bar-vertical .e-navigate-arrow::after {
583
636
  background-color: rgba(var(--color-sf-primary));
584
637
  opacity: 0;
585
- transition-duration: 0.3s;
586
- transition-timing-function: cubic-bezier(0.25, 0.1, 0.25, 1);
638
+ -webkit-transition-duration: 0.3s;
639
+ transition-duration: 0.3s;
640
+ -webkit-transition-timing-function: cubic-bezier(0.25, 0.1, 0.25, 1);
641
+ transition-timing-function: cubic-bezier(0.25, 0.1, 0.25, 1);
587
642
  }
588
643
  .e-splitter .e-split-bar.e-split-bar-vertical.e-split-bar-active {
589
644
  background: rgba(var(--color-sf-primary));