@syncfusion/ej2-react-layouts 26.1.38 → 26.2.5

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