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