@syncfusion/ej2-vue-layouts 23.2.4 → 24.2.3

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