xframelib 0.6.9 → 0.7.2

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,32 @@
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;
1
+ .vcpg {
2
+ border: 1px solid var(--border-color);
3
+ border-radius: 4px;
4
+ width: 100%;
14
5
  }
15
- .vcp__header-icon {
16
- display: flex;
17
- align-items: center;
18
- transition: transform 0.3s cubic-bezier(0.5, 0.25, 0, 1);
6
+ .vcpg ::v-deep(.vcp) * {
7
+ box-sizing: border-box;
19
8
  }
20
- .vcp--expanded .vcp__header-icon {
21
- transform-origin: center;
22
- transform: rotate(180deg);
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;
23
14
  }
24
- .vcp__header-icon > span {
25
- display: flex;
26
- height: 24px;
27
- width: 24px;
15
+ .vcpg ::v-deep(.vcp) .vcp__header .vcp__header:hover {
16
+ background-color: var(--bg-color-header-hover);
28
17
  }
29
- .vcp__header-icon ::v-deep(svg) {
30
- height: 100%;
31
- width: 100%;
18
+ .vcpg ::v-deep(.vcp) .vcp__header .vcp__header:active {
19
+ background-color: var(--bg-color-header-active);
32
20
  }
33
- .vcp__body {
34
- overflow: hidden;
35
- transition: all 0.3s cubic-bezier(0.5, 0.25, 0, 1);
21
+ .vcpg ::v-deep(.vcp) .vcp:not(:first-of-type) .vcp__header {
22
+ border-top: 2px solid var(--border-color);
36
23
  }
37
- .vcp__body-content {
38
- padding: 12px;
24
+ .vcpg ::v-deep(.vcp) .vcp__header-title {
25
+ font-weight: 500;
39
26
  }
40
-
41
- .slide-enter-from,
42
- .slide-leave-to {
43
- opacity: 0.25;
27
+ .vcpg ::v-deep(.vcp) .vcp__body {
28
+ border-top: 1px solid var(--border-color);
29
+ background-color: var(--bg-color-body);
44
30
  }
45
31
 
46
32
  .splitpanes {
@@ -153,35 +139,92 @@
153
139
  margin-top: 1px;
154
140
  }
155
141
 
156
- .vcpg {
157
- border: 1px solid var(--border-color);
158
- border-radius: 4px;
142
+ .vcp__header {
143
+ display: flex;
144
+ padding: 12px;
145
+ pointer-events: none;
146
+ }
147
+ .vcp--expandable .vcp__header {
148
+ pointer-events: auto;
149
+ cursor: pointer;
150
+ }
151
+ .vcp__header-title {
152
+ display: flex;
153
+ align-items: center;
154
+ flex: 1;
155
+ }
156
+ .vcp__header-icon {
157
+ display: flex;
158
+ align-items: center;
159
+ transition: transform 0.3s cubic-bezier(0.5, 0.25, 0, 1);
160
+ }
161
+ .vcp--expanded .vcp__header-icon {
162
+ transform-origin: center;
163
+ transform: rotate(180deg);
164
+ }
165
+ .vcp__header-icon > span {
166
+ display: flex;
167
+ height: 24px;
168
+ width: 24px;
169
+ }
170
+ .vcp__header-icon ::v-deep(svg) {
171
+ height: 100%;
159
172
  width: 100%;
160
173
  }
161
- .vcpg ::v-deep(.vcp) * {
162
- box-sizing: border-box;
174
+ .vcp__body {
175
+ overflow: hidden;
176
+ transition: all 0.3s cubic-bezier(0.5, 0.25, 0, 1);
163
177
  }
164
- .vcpg ::v-deep(.vcp) .vcp__header {
165
- background-color: var(--bg-color-header);
166
- height: 30px;
167
- border-bottom: 2px solid #c6bebd;
168
- transition: background-color 0.3s ease;
178
+ .vcp__body-content {
179
+ padding: 12px;
169
180
  }
170
- .vcpg ::v-deep(.vcp) .vcp__header .vcp__header:hover {
171
- background-color: var(--bg-color-header-hover);
181
+
182
+ .slide-enter-from,
183
+ .slide-leave-to {
184
+ opacity: 0.25;
172
185
  }
173
- .vcpg ::v-deep(.vcp) .vcp__header .vcp__header:active {
174
- background-color: var(--bg-color-header-active);
186
+
187
+ .window {
188
+ display: flex;
189
+ flex-flow: column;
190
+ position: absolute;
191
+ border-radius: 4pt 4pt 0 0;
175
192
  }
176
- .vcpg ::v-deep(.vcp) .vcp:not(:first-of-type) .vcp__header {
177
- border-top: 2px solid var(--border-color);
193
+
194
+ .titlebar {
195
+ display: flex;
196
+ flex-flow: row nowrap;
197
+ border-radius: 4pt 4pt 0 0;
198
+ font-family: sans-serif;
199
+ padding: 0.5em;
200
+ flex: 0 0 auto;
178
201
  }
179
- .vcpg ::v-deep(.vcp) .vcp__header-title {
180
- font-weight: 500;
202
+
203
+ .title {
204
+ flex-grow: 1;
205
+ white-space: nowrap;
206
+ overflow: hidden;
207
+ text-overflow: ellipsis;
181
208
  }
182
- .vcpg ::v-deep(.vcp) .vcp__body {
183
- border-top: 1px solid var(--border-color);
184
- background-color: var(--bg-color-body);
209
+
210
+ .content {
211
+ flex-grow: 1;
212
+ padding: 0.5em;
213
+ }
214
+
215
+ .draggable-handle {
216
+ cursor: move;
217
+ }
218
+
219
+ .fade-enter,
220
+ .fade-leave-to {
221
+ opacity: 0;
222
+ transform: scale(0.9);
223
+ }
224
+
225
+ .fade-enter-active,
226
+ .fade-leave-active {
227
+ transition: 0.2s;
185
228
  }
186
229
 
187
230
  .layoutContainer {
@@ -252,49 +295,6 @@
252
295
  pointer-events: none;
253
296
  }
254
297
 
255
- .window {
256
- display: flex;
257
- flex-flow: column;
258
- position: absolute;
259
- border-radius: 4pt 4pt 0 0;
260
- }
261
-
262
- .titlebar {
263
- display: flex;
264
- flex-flow: row nowrap;
265
- border-radius: 4pt 4pt 0 0;
266
- font-family: sans-serif;
267
- padding: 0.5em;
268
- flex: 0 0 auto;
269
- }
270
-
271
- .title {
272
- flex-grow: 1;
273
- white-space: nowrap;
274
- overflow: hidden;
275
- text-overflow: ellipsis;
276
- }
277
-
278
- .content {
279
- flex-grow: 1;
280
- padding: 0.5em;
281
- }
282
-
283
- .draggable-handle {
284
- cursor: move;
285
- }
286
-
287
- .fade-enter,
288
- .fade-leave-to {
289
- opacity: 0;
290
- transform: scale(0.9);
291
- }
292
-
293
- .fade-enter-active,
294
- .fade-leave-active {
295
- transition: 0.2s;
296
- }
297
-
298
298
  .btn {
299
299
  background-color: transparent;
300
300
  border: none;