xframelib 0.6.0 → 0.6.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.
package/dist/index.css CHANGED
@@ -1,46 +1,65 @@
1
- .vcp__header {
2
- display: flex;
3
- padding: 12px;
4
- pointer-events: none;
5
- }
6
- .vcp--expandable .vcp__header {
7
- pointer-events: auto;
8
- cursor: pointer;
9
- }
10
- .vcp__header-title {
11
- display: flex;
12
- align-items: center;
13
- flex: 1;
14
- }
15
- .vcp__header-icon {
16
- display: flex;
17
- align-items: center;
18
- transition: transform 0.3s cubic-bezier(0.5, 0.25, 0, 1);
19
- }
20
- .vcp--expanded .vcp__header-icon {
21
- transform-origin: center;
22
- transform: rotate(180deg);
1
+ .layoutContainer {
2
+ width: 100%;
3
+ height: 100%;
4
+ padding: 0;
5
+ margin: 0;
6
+ --layout-top-height: 70px;
7
+ --layout-left-width: 200px;
8
+ --layout-right-width: 200px;
9
+ --layout-bottom-height: 60px;
10
+ --layout-centerback-backcolor: #020202;
11
+ --layout-top-zindex: 10000;
12
+ --layout-bottom-zindex: 10000;
13
+ --layout-center-zindex: 9999;
14
+ --layout-left-zindex: 10000;
23
15
  }
24
- .vcp__header-icon > span {
25
- display: flex;
26
- height: 24px;
27
- width: 24px;
16
+
17
+ .topContainer {
18
+ position: absolute;
19
+ top: 0px;
20
+ left: 0px;
21
+ width: 100%;
22
+ height: var(--layout-top-height);
23
+ z-index: 1000;
24
+ pointer-events: none;
28
25
  }
29
- .vcp__header-icon ::v-deep(svg) {
30
- height: 100%;
26
+
27
+ .bottomContainer {
28
+ position: absolute;
29
+ bottom: 0px;
30
+ left: 0px;
31
31
  width: 100%;
32
+ height: var(--layout-bottom-height);
33
+ pointer-events: none;
32
34
  }
33
- .vcp__body {
34
- overflow: hidden;
35
- transition: all 0.3s cubic-bezier(0.5, 0.25, 0, 1);
35
+
36
+ .leftContainer {
37
+ position: absolute;
38
+ top: 0px;
39
+ left: 0px;
40
+ width: var(--layout-left-width);
41
+ height: 100%;
42
+ pointer-events: none;
36
43
  }
37
- .vcp__body-content {
38
- padding: 12px;
44
+
45
+ .rightContainer {
46
+ position: absolute;
47
+ top: 0px;
48
+ right: 0px;
49
+ width: var(--layout-right-width);
50
+ height: 100%;
51
+ pointer-events: none;
39
52
  }
40
53
 
41
- .slide-enter-from,
42
- .slide-leave-to {
43
- opacity: 0.25;
54
+ .centerdiv {
55
+ position: absolute;
56
+ top: 0px;
57
+ left: 0px;
58
+ bottom: 0px;
59
+ width: 100%;
60
+ background-color: transparent;
61
+ overflow: hidden;
62
+ pointer-events: none !important;
44
63
  }
45
64
 
46
65
  .splitpanes {
@@ -153,75 +172,6 @@
153
172
  margin-top: 1px;
154
173
  }
155
174
 
156
- .layoutContainer {
157
- width: 100%;
158
- height: 100%;
159
- padding: 0;
160
- margin: 0;
161
- --layout-top-height: 70px;
162
- --layout-left-width: 200px;
163
- --layout-right-width: 200px;
164
- --layout-bottom-height: 60px;
165
- --layout-centerback-backcolor: #020202;
166
- --layout-top-zindex: 10000;
167
- --layout-bottom-zindex: 10000;
168
- --layout-center-zindex: 9999;
169
- --layout-left-zindex: 10000;
170
- }
171
-
172
- .topContainer {
173
- position: absolute;
174
- top: 0px;
175
- left: 0px;
176
- width: 100%;
177
- height: var(--layout-top-height);
178
- z-index: 1000;
179
- }
180
-
181
- .bottomContainer {
182
- position: absolute;
183
- bottom: 0px;
184
- left: 0px;
185
- width: 100%;
186
- height: var(--layout-bottom-height);
187
- }
188
-
189
- .leftContainer {
190
- position: absolute;
191
- top: 0px;
192
- left: 0px;
193
- width: var(--layout-left-width);
194
- height: 100%;
195
- pointer-events: none;
196
- }
197
-
198
- .rightContainer {
199
- position: absolute;
200
- top: 0px;
201
- right: 0px;
202
- width: var(--layout-right-width);
203
- height: 100%;
204
- pointer-events: none;
205
- }
206
-
207
- .centerdiv {
208
- position: absolute;
209
- top: 0px;
210
- left: 0px;
211
- bottom: 0px;
212
- width: 100%;
213
- background-color: transparent;
214
- overflow: hidden;
215
- }
216
-
217
- .centerContainer {
218
- pointer-events: none;
219
- }
220
-
221
- .mainContainer {
222
- pointer-events: none;
223
- }
224
-
225
175
  .vcpg {
226
176
  border: 1px solid var(--border-color);
227
177
  border-radius: 4px;
@@ -253,6 +203,51 @@
253
203
  background-color: var(--bg-color-body);
254
204
  }
255
205
 
206
+ .vcp__header {
207
+ display: flex;
208
+ padding: 12px;
209
+ pointer-events: none;
210
+ }
211
+ .vcp--expandable .vcp__header {
212
+ pointer-events: auto;
213
+ cursor: pointer;
214
+ }
215
+ .vcp__header-title {
216
+ display: flex;
217
+ align-items: center;
218
+ flex: 1;
219
+ }
220
+ .vcp__header-icon {
221
+ display: flex;
222
+ align-items: center;
223
+ transition: transform 0.3s cubic-bezier(0.5, 0.25, 0, 1);
224
+ }
225
+ .vcp--expanded .vcp__header-icon {
226
+ transform-origin: center;
227
+ transform: rotate(180deg);
228
+ }
229
+ .vcp__header-icon > span {
230
+ display: flex;
231
+ height: 24px;
232
+ width: 24px;
233
+ }
234
+ .vcp__header-icon ::v-deep(svg) {
235
+ height: 100%;
236
+ width: 100%;
237
+ }
238
+ .vcp__body {
239
+ overflow: hidden;
240
+ transition: all 0.3s cubic-bezier(0.5, 0.25, 0, 1);
241
+ }
242
+ .vcp__body-content {
243
+ padding: 12px;
244
+ }
245
+
246
+ .slide-enter-from,
247
+ .slide-leave-to {
248
+ opacity: 0.25;
249
+ }
250
+
256
251
  .window {
257
252
  display: flex;
258
253
  flex-flow: column;