@syncfusion/ej2-react-layouts 23.2.4 → 24.1.41

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 (88) hide show
  1. package/dist/ej2-react-layouts.min.js +1 -1
  2. package/dist/ej2-react-layouts.umd.min.js +1 -1
  3. package/package.json +9 -9
  4. package/styles/avatar/bootstrap-dark.css +1 -45
  5. package/styles/avatar/bootstrap.css +1 -45
  6. package/styles/avatar/bootstrap4.css +1 -45
  7. package/styles/avatar/bootstrap5-dark.css +1 -60
  8. package/styles/avatar/bootstrap5.css +1 -60
  9. package/styles/avatar/fabric-dark.css +1 -45
  10. package/styles/avatar/fabric.css +1 -45
  11. package/styles/avatar/fluent-dark.css +1 -58
  12. package/styles/avatar/fluent.css +1 -58
  13. package/styles/avatar/highcontrast-light.css +1 -45
  14. package/styles/avatar/highcontrast.css +1 -45
  15. package/styles/avatar/material-dark.css +1 -45
  16. package/styles/avatar/material.css +1 -45
  17. package/styles/avatar/material3-dark.css +1 -113
  18. package/styles/avatar/material3.css +1 -169
  19. package/styles/avatar/tailwind-dark.css +1 -58
  20. package/styles/avatar/tailwind.css +1 -58
  21. package/styles/bootstrap-dark.css +1 -1351
  22. package/styles/bootstrap.css +1 -1352
  23. package/styles/bootstrap4.css +1 -1357
  24. package/styles/bootstrap5-dark.css +1 -1368
  25. package/styles/bootstrap5.css +1 -1368
  26. package/styles/card/bootstrap-dark.css +1 -513
  27. package/styles/card/bootstrap.css +1 -514
  28. package/styles/card/bootstrap4.css +1 -520
  29. package/styles/card/bootstrap5-dark.css +1 -513
  30. package/styles/card/bootstrap5.css +1 -513
  31. package/styles/card/fabric-dark.css +1 -513
  32. package/styles/card/fabric.css +1 -524
  33. package/styles/card/fluent-dark.css +1 -534
  34. package/styles/card/fluent.css +1 -534
  35. package/styles/card/highcontrast-light.css +1 -513
  36. package/styles/card/highcontrast.css +1 -525
  37. package/styles/card/material-dark.css +1 -513
  38. package/styles/card/material.css +1 -513
  39. package/styles/card/material3-dark.css +1 -566
  40. package/styles/card/material3.css +1 -622
  41. package/styles/card/tailwind-dark.css +1 -514
  42. package/styles/card/tailwind.css +1 -514
  43. package/styles/dashboard-layout/bootstrap-dark.css +1 -296
  44. package/styles/dashboard-layout/bootstrap.css +1 -296
  45. package/styles/dashboard-layout/bootstrap4.css +1 -296
  46. package/styles/dashboard-layout/bootstrap5-dark.css +1 -305
  47. package/styles/dashboard-layout/bootstrap5.css +1 -305
  48. package/styles/dashboard-layout/fabric-dark.css +1 -296
  49. package/styles/dashboard-layout/fabric.css +1 -296
  50. package/styles/dashboard-layout/fluent-dark.css +1 -300
  51. package/styles/dashboard-layout/fluent.css +1 -300
  52. package/styles/dashboard-layout/highcontrast-light.css +1 -234
  53. package/styles/dashboard-layout/highcontrast.css +1 -292
  54. package/styles/dashboard-layout/material-dark.css +1 -296
  55. package/styles/dashboard-layout/material.css +1 -296
  56. package/styles/dashboard-layout/material3-dark.css +1 -356
  57. package/styles/dashboard-layout/material3.css +1 -412
  58. package/styles/dashboard-layout/tailwind-dark.css +1 -317
  59. package/styles/dashboard-layout/tailwind.css +1 -317
  60. package/styles/fabric-dark.css +1 -1351
  61. package/styles/fabric.css +1 -1362
  62. package/styles/fluent-dark.css +1 -1382
  63. package/styles/fluent.css +1 -1382
  64. package/styles/highcontrast-light.css +1 -1289
  65. package/styles/highcontrast.css +1 -1359
  66. package/styles/material-dark.css +1 -1350
  67. package/styles/material.css +1 -1351
  68. package/styles/material3-dark.css +1 -1581
  69. package/styles/material3.css +1 -1805
  70. package/styles/splitter/bootstrap-dark.css +1 -496
  71. package/styles/splitter/bootstrap.css +1 -496
  72. package/styles/splitter/bootstrap4.css +1 -495
  73. package/styles/splitter/bootstrap5-dark.css +1 -489
  74. package/styles/splitter/bootstrap5.css +1 -489
  75. package/styles/splitter/fabric-dark.css +1 -496
  76. package/styles/splitter/fabric.css +1 -496
  77. package/styles/splitter/fluent-dark.css +1 -489
  78. package/styles/splitter/fluent.css +1 -489
  79. package/styles/splitter/highcontrast-light.css +1 -496
  80. package/styles/splitter/highcontrast.css +1 -496
  81. package/styles/splitter/material-dark.css +1 -495
  82. package/styles/splitter/material.css +1 -496
  83. package/styles/splitter/material3-dark.css +1 -544
  84. package/styles/splitter/material3.css +1 -600
  85. package/styles/splitter/tailwind-dark.css +1 -489
  86. package/styles/splitter/tailwind.css +1 -489
  87. package/styles/tailwind-dark.css +1 -1379
  88. package/styles/tailwind.css +1 -1379
@@ -1,544 +1 @@
1
- :root {
2
- --color-sf-black: 0, 0, 0;
3
- --color-sf-white: 255, 255, 255;
4
- --color-sf-primary: 208, 188, 255;
5
- --color-sf-primary-container: 79, 55, 139;
6
- --color-sf-secondary: 204, 194, 220;
7
- --color-sf-secondary-container: 74, 68, 88;
8
- --color-sf-tertiary: 239, 184, 200;
9
- --color-sf-tertiary-container: 99, 59, 72;
10
- --color-sf-surface: 28, 27, 31;
11
- --color-sf-surface-variant: 73, 69, 79;
12
- --color-sf-background: var(--color-sf-surface);
13
- --color-sf-on-primary: 55, 30, 115;
14
- --color-sf-on-primary-container: 234, 221, 255;
15
- --color-sf-on-secondary: 51, 45, 65;
16
- --color-sf-on-secondary-container: 232, 222, 248;
17
- --color-sf-on-tertiary: 73, 37, 50;
18
- --color-sf-on-tertiary-containe: 255, 216, 228;
19
- --color-sf-on-surface: 230, 225, 229;
20
- --color-sf-on-surface-variant: 202, 196, 208;
21
- --color-sf-on-background: 230, 225, 229;
22
- --color-sf-outline: 147, 143, 153;
23
- --color-sf-outline-variant: 68, 71, 70;
24
- --color-sf-shadow: 0, 0, 0;
25
- --color-sf-surface-tint-color: 208, 188, 255;
26
- --color-sf-inverse-surface: 230, 225, 229;
27
- --color-sf-inverse-on-surface: 49, 48, 51;
28
- --color-sf-inverse-primary: 103, 80, 164;
29
- --color-sf-scrim: 0, 0, 0;
30
- --color-sf-error: 242, 184, 181;
31
- --color-sf-error-container: 140, 29, 24;
32
- --color-sf-on-error: 96, 20, 16;
33
- --color-sf-on-error-container: 249, 222, 220;
34
- --color-sf-success: 83, 202, 23;
35
- --color-sf-success-container: 22, 62, 2;
36
- --color-sf-on-success: 13, 39, 0;
37
- --color-sf-on-success-container: 183, 250, 150;
38
- --color-sf-info: 71, 172, 251;
39
- --color-sf-info-container: 0, 67, 120;
40
- --color-sf-on-info: 0, 51, 91;
41
- --color-sf-on-info-container: 173, 219, 255;
42
- --color-sf-warning: 245, 180, 130;
43
- --color-sf-warning-container: 123, 65, 0;
44
- --color-sf-on-warning: 99, 52, 0;
45
- --color-sf-on-warning-container: 255, 220, 193;
46
- --color-sf-spreadsheet-gridline: 231, 224, 236;
47
- --color-sf-shadow-focus-ring1: 0 0 0 1px #000000, 0 0 0 3px #ffffff;
48
- --color-sf-success-text: 0, 0, 0;
49
- --color-sf-warning-text: 0, 0, 0;
50
- --color-sf-info-text: 0, 0, 0;
51
- --color-sf-danger-text: 0, 0, 0;
52
- --color-sf-diagram-palette-background: var(--color-sf-inverse-surface);
53
- --color-sf-content-text-color-alt2: var(--color-sf-on-secondary);
54
- }
55
-
56
- .e-splitter .e-split-bar.e-split-bar-horizontal .e-resize-handler::before {
57
- content: "\e7e3";
58
- font-family: "e-icons";
59
- font-size: 14px;
60
- }
61
- .e-splitter .e-split-bar.e-split-bar-vertical .e-resize-handler::before {
62
- content: "\e7fd";
63
- font-family: "e-icons";
64
- font-size: 14px;
65
- }
66
-
67
- .e-bigger .e-splitter .e-split-bar .e-resize-handler::before {
68
- font-size: 16px;
69
- }
70
- .e-bigger.e-splitter .e-split-bar .e-resize-handler::before {
71
- font-size: 16px;
72
- }
73
-
74
- .e-splitter.e-splitter-horizontal, .e-splitter.e-splitter-vertical {
75
- border-width: 1px;
76
- display: -ms-flexbox;
77
- display: flex;
78
- overflow: hidden;
79
- position: relative;
80
- -ms-touch-action: none;
81
- touch-action: none;
82
- width: 100%;
83
- }
84
- .e-splitter.e-splitter-horizontal .e-pane, .e-splitter.e-splitter-vertical .e-pane {
85
- -ms-flex: 1 1 auto;
86
- flex: 1 1 auto;
87
- font-family: "Roboto", -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", sans-serif;
88
- font-size: 14px;
89
- font-weight: 400;
90
- }
91
- .e-splitter.e-splitter-horizontal .e-pane.e-scrollable, .e-splitter.e-splitter-vertical .e-pane.e-scrollable {
92
- overflow: auto;
93
- }
94
- .e-splitter.e-splitter-horizontal .e-pane.e-static-pane, .e-splitter.e-splitter-vertical .e-pane.e-static-pane {
95
- -ms-flex-positive: 0;
96
- flex-grow: 0;
97
- -ms-flex-negative: 0;
98
- flex-shrink: 0;
99
- }
100
- .e-splitter.e-splitter-horizontal .e-pane.e-pane-horizontal, .e-splitter.e-splitter-vertical .e-pane.e-pane-horizontal {
101
- overflow: auto;
102
- }
103
- .e-splitter.e-splitter-horizontal .e-pane.e-pane-horizontal.e-pane-hidden, .e-splitter.e-splitter-vertical .e-pane.e-pane-horizontal.e-pane-hidden {
104
- -ms-flex-preferred-size: 0 !important;
105
- flex-basis: 0 !important; /* stylelint-disable-line declaration-no-important */
106
- overflow: hidden !important; /* stylelint-disable-line declaration-no-important */
107
- }
108
- .e-splitter.e-splitter-horizontal {
109
- -ms-flex-direction: row;
110
- flex-direction: row;
111
- }
112
- .e-splitter.e-splitter-horizontal.e-pane.e-scrollable {
113
- overflow: hidden;
114
- }
115
- .e-splitter.e-splitter-horizontal.e-rtl {
116
- -ms-flex-direction: row-reverse;
117
- flex-direction: row-reverse;
118
- }
119
- .e-splitter.e-splitter-horizontal.e-rtl .e-split-bar.e-split-bar-horizontal {
120
- -ms-flex-direction: row-reverse;
121
- flex-direction: row-reverse;
122
- }
123
- .e-splitter.e-splitter-horizontal.e-rtl .e-split-bar.e-split-bar-horizontal .e-navigate-arrow:not(.e-arrow-right)::before,
124
- .e-splitter.e-splitter-horizontal.e-rtl .e-split-bar.e-split-bar-horizontal .e-navigate-arrow:not(.e-arrow-right)::after {
125
- right: auto;
126
- }
127
- .e-splitter.e-splitter-vertical {
128
- -ms-flex-direction: column;
129
- flex-direction: column;
130
- }
131
- .e-splitter.e-splitter-vertical.e-pane.e-scrollable {
132
- overflow: hidden;
133
- }
134
- .e-splitter.e-splitter-vertical .e-pane-vertical {
135
- overflow: auto;
136
- }
137
- .e-splitter.e-splitter-vertical .e-pane-vertical.e-pane-hidden {
138
- -ms-flex-preferred-size: 0 !important;
139
- flex-basis: 0 !important; /* stylelint-disable-line declaration-no-important */
140
- overflow: hidden !important; /* stylelint-disable-line declaration-no-important */
141
- }
142
- .e-splitter.e-splitter-vertical.e-rtl .e-split-bar.e-split-bar-vertical .e-navigate-arrow:not(.e-arrow-down)::before,
143
- .e-splitter.e-splitter-vertical.e-rtl .e-split-bar.e-split-bar-vertical .e-navigate-arrow:not(.e-arrow-down)::after {
144
- right: auto;
145
- }
146
- .e-splitter.e-splitter-vertical.e-rtl .e-split-bar.e-split-bar-vertical .e-navigate-arrow:not(.e-arrow-down) {
147
- border-radius: 50%;
148
- bottom: 20px;
149
- right: 22px;
150
- }
151
- .e-splitter.e-splitter-vertical.e-rtl .e-split-bar.e-split-bar-vertical .e-navigate-arrow.e-arrow-down {
152
- border-radius: 50%;
153
- left: 22px;
154
- right: auto;
155
- top: 20px;
156
- }
157
- .e-splitter.e-splitter-vertical.e-rtl .e-split-bar.e-split-bar-vertical .e-navigate-arrow.e-arrow-down::after {
158
- right: auto;
159
- }
160
- .e-splitter .e-split-bar.e-split-bar-horizontal {
161
- -ms-flex-align: center;
162
- align-items: center;
163
- display: -ms-flexbox;
164
- display: flex;
165
- -ms-flex: 0 0 auto;
166
- flex: 0 0 auto;
167
- -ms-flex-pack: center;
168
- justify-content: center;
169
- min-width: 1px;
170
- z-index: 15;
171
- }
172
- .e-splitter .e-split-bar.e-split-bar-horizontal .e-icon-hidden {
173
- visibility: hidden;
174
- }
175
- .e-splitter .e-split-bar.e-split-bar-horizontal.e-resizable-split-bar {
176
- cursor: col-resize;
177
- }
178
- .e-splitter .e-split-bar.e-split-bar-horizontal.e-resizable-split-bar::after {
179
- content: "";
180
- cursor: col-resize;
181
- display: block;
182
- height: 100%;
183
- position: absolute;
184
- width: 16px;
185
- z-index: 10;
186
- }
187
- .e-splitter .e-split-bar.e-split-bar-horizontal .e-resize-handler {
188
- -ms-flex-align: center;
189
- align-items: center;
190
- display: -ms-flexbox;
191
- display: flex;
192
- height: 18px;
193
- -ms-flex-pack: center;
194
- justify-content: center;
195
- position: relative;
196
- width: 1px;
197
- }
198
- .e-splitter .e-split-bar.e-split-bar-horizontal .e-resize-handler.e-hide-handler {
199
- visibility: hidden;
200
- }
201
- .e-splitter .e-split-bar.e-split-bar-horizontal .e-navigate-arrow:not(.e-arrow-right)::before,
202
- .e-splitter .e-split-bar.e-split-bar-horizontal .e-navigate-arrow:not(.e-arrow-right)::after {
203
- left: 8px;
204
- right: 3px;
205
- }
206
- .e-splitter .e-split-bar.e-split-bar-horizontal .e-navigate-arrow {
207
- border-image: none;
208
- border-width: 1px;
209
- cursor: pointer;
210
- display: -ms-flexbox;
211
- display: flex;
212
- height: 26px;
213
- padding: 1px 12px;
214
- position: relative;
215
- }
216
- .e-splitter .e-split-bar.e-split-bar-horizontal .e-navigate-arrow::before, .e-splitter .e-split-bar.e-split-bar-horizontal .e-navigate-arrow::after {
217
- border-radius: 16px;
218
- content: "";
219
- height: 8px;
220
- position: absolute;
221
- transform: rotate(0deg);
222
- width: 2px;
223
- }
224
- .e-splitter .e-split-bar.e-split-bar-horizontal .e-navigate-arrow::before {
225
- top: 5px;
226
- transform-origin: 1px 7px 0;
227
- }
228
- .e-splitter .e-split-bar.e-split-bar-horizontal .e-navigate-arrow::after {
229
- top: 11px;
230
- transform-origin: 1px 1px 0;
231
- }
232
- .e-splitter .e-split-bar.e-split-bar-horizontal .e-navigate-arrow:not(.e-arrow-right) {
233
- border-radius: 50%;
234
- right: 5px;
235
- }
236
- .e-splitter .e-split-bar.e-split-bar-horizontal .e-navigate-arrow.e-arrow-right {
237
- border-radius: 50%;
238
- left: 5px;
239
- }
240
- .e-splitter .e-split-bar.e-split-bar-horizontal .e-navigate-arrow.e-arrow-right::before, .e-splitter .e-split-bar.e-split-bar-horizontal .e-navigate-arrow.e-arrow-right::after {
241
- right: 8px;
242
- }
243
- .e-splitter .e-split-bar.e-split-bar-horizontal.e-last-bar:not(.e-resizable-split-bar) {
244
- margin: 0 3px;
245
- }
246
- .e-splitter .e-split-bar.e-split-bar-horizontal:not(.e-resizable-split-bar) {
247
- margin: 0 0 0 3px;
248
- }
249
- .e-splitter .e-split-bar.e-split-bar-vertical {
250
- -ms-flex-align: center;
251
- align-items: center;
252
- border-left: none;
253
- border-right: none;
254
- display: -ms-flexbox;
255
- display: flex;
256
- -ms-flex: 0 0 auto;
257
- flex: 0 0 auto;
258
- -ms-flex-pack: center;
259
- justify-content: center;
260
- min-height: 1px;
261
- }
262
- .e-splitter .e-split-bar.e-split-bar-vertical .e-icon-hidden {
263
- visibility: hidden;
264
- }
265
- .e-splitter .e-split-bar.e-split-bar-vertical.e-resizable-split-bar {
266
- cursor: row-resize;
267
- }
268
- .e-splitter .e-split-bar.e-split-bar-vertical.e-resizable-split-bar::after {
269
- content: "";
270
- cursor: row-resize;
271
- display: block;
272
- height: 16px;
273
- position: absolute;
274
- width: 100%;
275
- z-index: 12;
276
- }
277
- .e-splitter .e-split-bar.e-split-bar-vertical .e-resize-handler {
278
- -ms-flex-align: center;
279
- align-items: center;
280
- display: -ms-flexbox;
281
- display: flex;
282
- height: 1px;
283
- -ms-flex-pack: center;
284
- justify-content: center;
285
- width: 18px;
286
- }
287
- .e-splitter .e-split-bar.e-split-bar-vertical .e-resize-handler.e-hide-handler {
288
- visibility: hidden;
289
- }
290
- .e-splitter .e-split-bar.e-split-bar-vertical .e-navigate-arrow:not(.e-arrow-down)::before,
291
- .e-splitter .e-split-bar.e-split-bar-vertical .e-navigate-arrow:not(.e-arrow-down)::after {
292
- left: 10px;
293
- }
294
- .e-splitter .e-split-bar.e-split-bar-vertical .e-navigate-arrow {
295
- border-image: none;
296
- border-width: 0;
297
- cursor: pointer;
298
- display: -ms-flexbox;
299
- display: flex;
300
- height: 26px;
301
- padding: 10px 3px 10px 18px;
302
- position: relative;
303
- width: 26px;
304
- }
305
- .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 {
306
- border-radius: 16px;
307
- content: "";
308
- height: 8px;
309
- position: absolute;
310
- transform: rotate(90deg);
311
- width: 2px;
312
- }
313
- .e-splitter .e-split-bar.e-split-bar-vertical .e-navigate-arrow:not(.e-arrow-down)::before {
314
- top: 3px;
315
- transform-origin: 2px 7px 0;
316
- }
317
- .e-splitter .e-split-bar.e-split-bar-vertical .e-navigate-arrow:not(.e-arrow-down)::after {
318
- left: 11px;
319
- top: 8px;
320
- transform-origin: 1px 1px 0;
321
- }
322
- .e-splitter .e-split-bar.e-split-bar-vertical .e-navigate-arrow.e-arrow-down::before {
323
- left: 12px;
324
- top: 8px;
325
- transform-origin: 1px 6px 0;
326
- }
327
- .e-splitter .e-split-bar.e-split-bar-vertical .e-navigate-arrow.e-arrow-down::after {
328
- left: 10px;
329
- top: 12px;
330
- transform-origin: 1px 2px 0;
331
- }
332
- .e-splitter .e-split-bar.e-split-bar-vertical .e-navigate-arrow:not(.e-arrow-down) {
333
- border-radius: 50%;
334
- bottom: 20px;
335
- left: 22px;
336
- }
337
- .e-splitter .e-split-bar.e-split-bar-vertical .e-navigate-arrow.e-arrow-down {
338
- border-radius: 50%;
339
- right: 22px;
340
- top: 20px;
341
- }
342
- .e-splitter .e-split-bar.e-split-bar-vertical .e-navigate-arrow.e-arrow-down::before, .e-splitter .e-split-bar.e-split-bar-vertical .e-navigate-arrow.e-arrow-down::after {
343
- right: 10px;
344
- }
345
- .e-splitter .e-split-bar.e-split-bar-vertical.e-last-bar:not(.e-resizable-split-bar) {
346
- margin: 3px 0;
347
- }
348
- .e-splitter .e-split-bar.e-split-bar-vertical:not(.e-resizable-split-bar) {
349
- margin: 3px 0 0;
350
- }
351
-
352
- .e-bigger.e-splitter .e-pane {
353
- font-size: 16px;
354
- }
355
- .e-bigger.e-splitter .e-split-bar.e-split-bar-horizontal .e-resize-handler {
356
- height: 20px;
357
- }
358
- .e-bigger.e-splitter .e-split-bar.e-split-bar-vertical .e-resize-handler {
359
- width: 20px;
360
- }
361
- .e-bigger.e-splitter .e-split-bar.e-split-bar-vertical .e-navigate-arrow:not(.e-arrow-down)::before,
362
- .e-bigger.e-splitter .e-split-bar.e-split-bar-vertical .e-navigate-arrow:not(.e-arrow-down)::after {
363
- margin-top: -2px;
364
- }
365
- .e-bigger.e-splitter .e-split-bar.e-split-bar-vertical .e-navigate-arrow.e-arrow-down::after {
366
- margin-top: 2px;
367
- }
368
-
369
- .e-rtl .e-splitter.e-splitter-horizontal {
370
- -ms-flex-direction: row-reverse;
371
- flex-direction: row-reverse;
372
- }
373
-
374
- .e-bigger .e-splitter .e-pane {
375
- font-size: 16px;
376
- }
377
- .e-bigger .e-splitter .e-split-bar.e-split-bar-horizontal .e-resize-handler {
378
- height: 20px;
379
- }
380
- .e-bigger .e-splitter .e-split-bar.e-split-bar-vertical .e-resize-handler {
381
- width: 20px;
382
- }
383
-
384
- .e-content-placeholder.e-splitter.e-placeholder-splitter {
385
- background-size: 100px 110px;
386
- min-height: 110px;
387
- }
388
-
389
- .e-bigger .e-content-placeholder.e-splitter.e-placeholder-splitter,
390
- .e-bigger.e-content-placeholder.e-splitter.e-placeholder-splitter {
391
- background-size: 100px 110px;
392
- min-height: 110px;
393
- }
394
-
395
- .e-splitter.e-ie .e-navigate-arrow.e-arrow-left {
396
- margin-left: -26px;
397
- }
398
-
399
- .e-splitter.e-ie .e-split-bar-horizontal .e-resize-handler {
400
- -ms-flex-direction: column;
401
- flex-direction: column;
402
- }
403
-
404
- .e-splitter.e-splitter-horizontal, .e-splitter.e-splitter-vertical {
405
- border: solid 1px rgba(var(--color-sf-outline-variant));
406
- }
407
- .e-splitter.e-splitter-horizontal .e-pane, .e-splitter.e-splitter-vertical .e-pane {
408
- color: rgba(var(--color-sf-on-surface));
409
- }
410
- .e-splitter.e-splitter-horizontal .e-pane.e-splitter.e-splitter-horizontal, .e-splitter.e-splitter-horizontal .e-pane.e-splitter.e-splitter-vertical, .e-splitter.e-splitter-vertical .e-pane.e-splitter.e-splitter-horizontal, .e-splitter.e-splitter-vertical .e-pane.e-splitter.e-splitter-vertical {
411
- border: transparent;
412
- }
413
- .e-splitter .e-split-bar.e-split-bar-horizontal {
414
- background: rgba(var(--color-sf-outline-variant));
415
- border-left: none;
416
- border-right: none;
417
- }
418
- .e-splitter .e-split-bar.e-split-bar-horizontal .e-resize-handler {
419
- background: rgba(var(--color-sf-surface));
420
- color: rgba(var(--color-sf-on-surface-variant));
421
- z-index: 10;
422
- }
423
- .e-splitter .e-split-bar.e-split-bar-horizontal .e-navigate-arrow:not(.e-icon-hidden) {
424
- background-color: transparent;
425
- border-color: transparent;
426
- color: transparent;
427
- transition: background-color 500ms ease-out;
428
- }
429
- .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 {
430
- background-color: rgba(var(--color-sf-primary));
431
- opacity: 0;
432
- transition-duration: 0.3s;
433
- transition-timing-function: cubic-bezier(0.25, 0.1, 0.25, 1);
434
- }
435
- .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 {
436
- background: rgba(var(--color-sf-primary));
437
- border-left: none;
438
- border-right: none;
439
- }
440
- .e-splitter .e-split-bar.e-split-bar-horizontal.e-split-bar-hover .e-resize-handler, .e-splitter .e-split-bar.e-split-bar-horizontal.e-split-bar-active .e-resize-handler {
441
- background: rgba(var(--color-sf-surface));
442
- color: rgba(var(--color-sf-primary));
443
- }
444
- .e-splitter .e-split-bar.e-split-bar-horizontal.e-split-bar-hover .e-navigate-arrow.e-arrow-left, .e-splitter .e-split-bar.e-split-bar-horizontal.e-split-bar-hover .e-navigate-arrow.e-arrow-right, .e-splitter .e-split-bar.e-split-bar-horizontal.e-split-bar-active .e-navigate-arrow.e-arrow-left, .e-splitter .e-split-bar.e-split-bar-horizontal.e-split-bar-active .e-navigate-arrow.e-arrow-right {
445
- background-color: transparent;
446
- border-color: rgba(var(--color-sf-primary));
447
- border-width: 1px;
448
- opacity: 0.9;
449
- }
450
- .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 {
451
- background-color: rgba(var(--color-sf-primary));
452
- opacity: 1;
453
- transform: rotate(40deg);
454
- }
455
- .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 {
456
- background-color: rgba(var(--color-sf-primary));
457
- opacity: 1;
458
- transform: rotate(-40deg);
459
- }
460
- .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 {
461
- background-color: rgba(var(--color-sf-primary));
462
- opacity: 1;
463
- transform: rotate(-40deg);
464
- }
465
- .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 {
466
- background-color: rgba(var(--color-sf-primary));
467
- opacity: 1;
468
- transform: rotate(40deg);
469
- }
470
- .e-splitter .e-split-bar.e-split-bar-horizontal.e-split-bar-active {
471
- background: rgba(var(--color-sf-primary));
472
- }
473
- .e-splitter .e-split-bar.e-split-bar-horizontal.e-split-bar-active .e-resize-handler {
474
- background: rgba(var(--color-sf-surface));
475
- color: rgba(var(--color-sf-primary));
476
- }
477
- .e-splitter .e-split-bar.e-split-bar-vertical {
478
- background: rgba(var(--color-sf-outline-variant));
479
- }
480
- .e-splitter .e-split-bar.e-split-bar-vertical .e-resize-handler {
481
- background: rgba(var(--color-sf-surface));
482
- color: rgba(var(--color-sf-on-surface-variant));
483
- z-index: 12;
484
- }
485
- .e-splitter .e-split-bar.e-split-bar-vertical.e-split-bar-hover, .e-splitter .e-split-bar.e-split-bar-vertical.e-split-bar-active {
486
- background: rgba(var(--color-sf-primary));
487
- border-left: none;
488
- border-right: none;
489
- }
490
- .e-splitter .e-split-bar.e-split-bar-vertical.e-split-bar-hover .e-navigate-arrow.e-arrow-up, .e-splitter .e-split-bar.e-split-bar-vertical.e-split-bar-hover .e-navigate-arrow.e-arrow-down, .e-splitter .e-split-bar.e-split-bar-vertical.e-split-bar-active .e-navigate-arrow.e-arrow-up, .e-splitter .e-split-bar.e-split-bar-vertical.e-split-bar-active .e-navigate-arrow.e-arrow-down {
491
- background-color: transparent;
492
- border-color: rgba(var(--color-sf-primary));
493
- border-width: 1px;
494
- opacity: 0.9;
495
- }
496
- .e-splitter .e-split-bar.e-split-bar-vertical.e-split-bar-hover .e-resize-handler, .e-splitter .e-split-bar.e-split-bar-vertical.e-split-bar-active .e-resize-handler {
497
- background: rgba(var(--color-sf-surface));
498
- color: rgba(var(--color-sf-primary));
499
- }
500
- .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 {
501
- background-color: rgba(var(--color-sf-primary));
502
- opacity: 1;
503
- transform: rotate(125deg);
504
- }
505
- .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 {
506
- background-color: rgba(var(--color-sf-primary));
507
- opacity: 1;
508
- transform: rotate(50deg);
509
- }
510
- .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 {
511
- background-color: rgba(var(--color-sf-primary));
512
- opacity: 1;
513
- transform: rotate(55deg);
514
- }
515
- .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 {
516
- background-color: rgba(var(--color-sf-primary));
517
- opacity: 1;
518
- transform: rotate(125deg);
519
- }
520
- .e-splitter .e-split-bar.e-split-bar-vertical .e-navigate-arrow {
521
- background-color: transparent;
522
- border-color: transparent;
523
- color: transparent;
524
- transition: background-color 300ms ease-out;
525
- }
526
- .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 {
527
- background-color: rgba(var(--color-sf-primary));
528
- opacity: 0;
529
- transition-duration: 0.3s;
530
- transition-timing-function: cubic-bezier(0.25, 0.1, 0.25, 1);
531
- }
532
- .e-splitter .e-split-bar.e-split-bar-vertical.e-split-bar-active {
533
- background: rgba(var(--color-sf-primary));
534
- }
535
- .e-splitter .e-split-bar.e-split-bar-vertical.e-split-bar-active .e-resize-handler {
536
- background: rgba(var(--color-sf-surface));
537
- color: rgba(var(--color-sf-primary));
538
- }
539
- .e-splitter.e-disabled {
540
- opacity: 0.4;
541
- pointer-events: none;
542
- }
543
-
544
- /* stylelint-disable-line no-empty-source */
1
+ @import '@syncfusion/ej2-layouts/styles/splitter/material3-dark.css';