xframelib 0.4.8 → 0.4.9

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 (5) hide show
  1. package/README.md +2 -1
  2. package/dist/index.cjs +3 -3
  3. package/dist/index.css +90 -90
  4. package/dist/index.js +3 -3
  5. package/package.json +1 -1
package/dist/index.css CHANGED
@@ -1,3 +1,34 @@
1
+ .vcpg {
2
+ border: 1px solid var(--border-color);
3
+ border-radius: 4px;
4
+ width: 100%;
5
+ }
6
+ .vcpg ::v-deep(.vcp) * {
7
+ box-sizing: border-box;
8
+ }
9
+ .vcpg ::v-deep(.vcp) .vcp__header {
10
+ background-color: var(--bg-color-header);
11
+ height: 30px;
12
+ border-bottom: 2px solid #c6bebd;
13
+ transition: background-color 0.3s ease;
14
+ }
15
+ .vcpg ::v-deep(.vcp) .vcp__header .vcp__header:hover {
16
+ background-color: var(--bg-color-header-hover);
17
+ }
18
+ .vcpg ::v-deep(.vcp) .vcp__header .vcp__header:active {
19
+ background-color: var(--bg-color-header-active);
20
+ }
21
+ .vcpg ::v-deep(.vcp) .vcp:not(:first-of-type) .vcp__header {
22
+ border-top: 2px solid var(--border-color);
23
+ }
24
+ .vcpg ::v-deep(.vcp) .vcp__header-title {
25
+ font-weight: 500;
26
+ }
27
+ .vcpg ::v-deep(.vcp) .vcp__body {
28
+ border-top: 1px solid var(--border-color);
29
+ background-color: var(--bg-color-body);
30
+ }
31
+
1
32
  .splitpanes {
2
33
  display: flex;
3
34
  width: 100%;
@@ -108,35 +139,73 @@
108
139
  margin-top: 1px;
109
140
  }
110
141
 
111
- .vcpg {
112
- border: 1px solid var(--border-color);
113
- border-radius: 4px;
142
+ .layoutContainer {
114
143
  width: 100%;
144
+ height: 100%;
145
+ padding: 0;
146
+ margin: 0;
147
+ --layout-top-height: 77px;
148
+ --layout-left-width: 200px;
149
+ --layout-right-width: 200px;
150
+ --layout-bottom-height: 60px;
151
+ --layout-centerback-backcolor: #020202;
152
+ --layout-top-zindex: 10000;
153
+ --layout-bottom-zindex: 10000;
154
+ --layout-center-zindex: 9999;
155
+ --layout-left-zindex: 10000;
115
156
  }
116
- .vcpg ::v-deep(.vcp) * {
117
- box-sizing: border-box;
157
+
158
+ .topContainer {
159
+ position: absolute;
160
+ top: 0px;
161
+ left: 0px;
162
+ width: 100%;
163
+ height: var(--layout-top-height);
164
+ z-index: 1000;
118
165
  }
119
- .vcpg ::v-deep(.vcp) .vcp__header {
120
- background-color: var(--bg-color-header);
121
- height: 30px;
122
- border-bottom: 2px solid #c6bebd;
123
- transition: background-color 0.3s ease;
166
+
167
+ .bottomContainer {
168
+ position: absolute;
169
+ bottom: 0px;
170
+ left: 0px;
171
+ width: 100%;
172
+ height: var(--layout-bottom-height);
124
173
  }
125
- .vcpg ::v-deep(.vcp) .vcp__header .vcp__header:hover {
126
- background-color: var(--bg-color-header-hover);
174
+
175
+ .leftContainer {
176
+ position: absolute;
177
+ top: 0px;
178
+ left: 0px;
179
+ width: var(--layout-left-width);
180
+ height: 100%;
181
+ pointer-events: none;
127
182
  }
128
- .vcpg ::v-deep(.vcp) .vcp__header .vcp__header:active {
129
- background-color: var(--bg-color-header-active);
183
+
184
+ .rightContainer {
185
+ position: absolute;
186
+ top: 0px;
187
+ right: 0px;
188
+ width: var(--layout-right-width);
189
+ height: 100%;
190
+ pointer-events: none;
130
191
  }
131
- .vcpg ::v-deep(.vcp) .vcp:not(:first-of-type) .vcp__header {
132
- border-top: 2px solid var(--border-color);
192
+
193
+ .centerdiv {
194
+ position: absolute;
195
+ top: 0px;
196
+ left: 0px;
197
+ bottom: 0px;
198
+ width: 100%;
199
+ background-color: transparent;
200
+ overflow: hidden;
133
201
  }
134
- .vcpg ::v-deep(.vcp) .vcp__header-title {
135
- font-weight: 500;
202
+
203
+ .centerContainer {
204
+ pointer-events: none;
136
205
  }
137
- .vcpg ::v-deep(.vcp) .vcp__body {
138
- border-top: 1px solid var(--border-color);
139
- background-color: var(--bg-color-body);
206
+
207
+ .mainContainer {
208
+ pointer-events: none;
140
209
  }
141
210
 
142
211
  .vcp__header {
@@ -227,75 +296,6 @@
227
296
  transition: 0.2s;
228
297
  }
229
298
 
230
- .layoutContainer {
231
- width: 100%;
232
- height: 100%;
233
- padding: 0;
234
- margin: 0;
235
- --layout-top-height: 77px;
236
- --layout-left-width: 200px;
237
- --layout-right-width: 200px;
238
- --layout-bottom-height: 60px;
239
- --layout-centerback-backcolor: #020202;
240
- --layout-top-zindex: 10000;
241
- --layout-bottom-zindex: 10000;
242
- --layout-center-zindex: 9999;
243
- --layout-left-zindex: 10000;
244
- }
245
-
246
- .topContainer {
247
- position: absolute;
248
- top: 0px;
249
- left: 0px;
250
- width: 100%;
251
- height: var(--layout-top-height);
252
- z-index: 1000;
253
- }
254
-
255
- .bottomContainer {
256
- position: absolute;
257
- bottom: 0px;
258
- left: 0px;
259
- width: 100%;
260
- height: var(--layout-bottom-height);
261
- }
262
-
263
- .leftContainer {
264
- position: absolute;
265
- top: 0px;
266
- left: 0px;
267
- width: var(--layout-left-width);
268
- height: 100%;
269
- pointer-events: none;
270
- }
271
-
272
- .rightContainer {
273
- position: absolute;
274
- top: 0px;
275
- right: 0px;
276
- width: var(--layout-right-width);
277
- height: 100%;
278
- pointer-events: none;
279
- }
280
-
281
- .centerdiv {
282
- position: absolute;
283
- top: 0px;
284
- left: 0px;
285
- bottom: 0px;
286
- width: 100%;
287
- background-color: transparent;
288
- overflow: hidden;
289
- }
290
-
291
- .centerContainer {
292
- pointer-events: none;
293
- }
294
-
295
- .mainContainer {
296
- pointer-events: none;
297
- }
298
-
299
299
  .btn {
300
300
  background-color: transparent;
301
301
  border: none;