xframelib 0.4.3 → 0.4.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.
package/dist/index.css CHANGED
@@ -1,111 +1,77 @@
1
- .splitpanes {
2
- display: flex;
1
+ .vcpg {
2
+ border: 1px solid var(--border-color);
3
+ border-radius: 4px;
3
4
  width: 100%;
4
- height: 100%;
5
- }
6
- .splitpanes--vertical {
7
- flex-direction: row;
8
5
  }
9
- .splitpanes--horizontal {
10
- flex-direction: column;
11
- }
12
- .splitpanes--dragging * {
13
- user-select: none;
14
- }
15
- .splitpanes__pane {
16
- width: 100%;
17
- height: 100%;
18
- overflow: hidden;
6
+ .vcpg ::v-deep(.vcp) * {
7
+ box-sizing: border-box;
19
8
  }
20
- .splitpanes--vertical .splitpanes__pane {
21
- transition: width 0.2s ease-out;
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;
22
14
  }
23
- .splitpanes--horizontal .splitpanes__pane {
24
- transition: height 0.2s ease-out;
15
+ .vcpg ::v-deep(.vcp) .vcp__header .vcp__header:hover {
16
+ background-color: var(--bg-color-header-hover);
25
17
  }
26
- .splitpanes--dragging .splitpanes__pane {
27
- transition: none;
18
+ .vcpg ::v-deep(.vcp) .vcp__header .vcp__header:active {
19
+ background-color: var(--bg-color-header-active);
28
20
  }
29
- .splitpanes__splitter {
30
- touch-action: none;
21
+ .vcpg ::v-deep(.vcp) .vcp:not(:first-of-type) .vcp__header {
22
+ border-top: 2px solid var(--border-color);
31
23
  }
32
- .splitpanes--vertical > .splitpanes__splitter {
33
- min-width: 1px;
34
- cursor: col-resize;
24
+ .vcpg ::v-deep(.vcp) .vcp__header-title {
25
+ font-weight: 500;
35
26
  }
36
- .splitpanes--horizontal > .splitpanes__splitter {
37
- min-height: 1px;
38
- cursor: row-resize;
27
+ .vcpg ::v-deep(.vcp) .vcp__body {
28
+ border-top: 1px solid var(--border-color);
29
+ background-color: var(--bg-color-body);
39
30
  }
40
31
 
41
- .splitpanes.default-theme .splitpanes__pane {
42
- background-color: #f2f2f2;
43
- }
44
- .splitpanes.default-theme .splitpanes__splitter {
45
- background-color: #fff;
46
- box-sizing: border-box;
47
- position: relative;
48
- flex-shrink: 0;
49
- }
50
- .splitpanes.default-theme .splitpanes__splitter:before, .splitpanes.default-theme .splitpanes__splitter:after {
51
- content: "";
52
- position: absolute;
53
- top: 50%;
54
- left: 50%;
55
- background-color: rgba(0, 0, 0, 0.15);
56
- transition: background-color 0.3s;
57
- }
58
- .splitpanes.default-theme .splitpanes__splitter:hover:before, .splitpanes.default-theme .splitpanes__splitter:hover:after {
59
- background-color: rgba(0, 0, 0, 0.25);
60
- }
61
- .splitpanes.default-theme .splitpanes__splitter:first-child {
62
- cursor: auto;
32
+ .vcp__header {
33
+ display: flex;
34
+ padding: 12px;
35
+ pointer-events: none;
63
36
  }
64
-
65
- .default-theme.splitpanes .splitpanes .splitpanes__splitter {
66
- z-index: 1;
37
+ .vcp--expandable .vcp__header {
38
+ pointer-events: auto;
39
+ cursor: pointer;
67
40
  }
68
- .default-theme.splitpanes--vertical > .splitpanes__splitter,
69
- .default-theme .splitpanes--vertical > .splitpanes__splitter {
70
- width: 7px;
71
- border-left: 1px solid #eee;
72
- margin-left: -1px;
41
+ .vcp__header-title {
42
+ display: flex;
43
+ align-items: center;
44
+ flex: 1;
73
45
  }
74
- .default-theme.splitpanes--vertical > .splitpanes__splitter:before, .default-theme.splitpanes--vertical > .splitpanes__splitter:after,
75
- .default-theme .splitpanes--vertical > .splitpanes__splitter:before,
76
- .default-theme .splitpanes--vertical > .splitpanes__splitter:after {
77
- transform: translateY(-50%);
78
- width: 1px;
79
- height: 30px;
46
+ .vcp__header-icon {
47
+ display: flex;
48
+ align-items: center;
49
+ transition: transform 0.3s cubic-bezier(0.5, 0.25, 0, 1);
80
50
  }
81
- .default-theme.splitpanes--vertical > .splitpanes__splitter:before,
82
- .default-theme .splitpanes--vertical > .splitpanes__splitter:before {
83
- margin-left: -2px;
51
+ .vcp--expanded .vcp__header-icon {
52
+ transform-origin: center;
53
+ transform: rotate(180deg);
84
54
  }
85
- .default-theme.splitpanes--vertical > .splitpanes__splitter:after,
86
- .default-theme .splitpanes--vertical > .splitpanes__splitter:after {
87
- margin-left: 1px;
55
+ .vcp__header-icon > span {
56
+ display: flex;
57
+ height: 24px;
58
+ width: 24px;
88
59
  }
89
- .default-theme.splitpanes--horizontal > .splitpanes__splitter,
90
- .default-theme .splitpanes--horizontal > .splitpanes__splitter {
91
- height: 7px;
92
- border-top: 1px solid #eee;
93
- margin-top: -1px;
60
+ .vcp__header-icon ::v-deep(svg) {
61
+ height: 100%;
62
+ width: 100%;
94
63
  }
95
- .default-theme.splitpanes--horizontal > .splitpanes__splitter:before, .default-theme.splitpanes--horizontal > .splitpanes__splitter:after,
96
- .default-theme .splitpanes--horizontal > .splitpanes__splitter:before,
97
- .default-theme .splitpanes--horizontal > .splitpanes__splitter:after {
98
- transform: translateX(-50%);
99
- width: 30px;
100
- height: 1px;
64
+ .vcp__body {
65
+ overflow: hidden;
66
+ transition: all 0.3s cubic-bezier(0.5, 0.25, 0, 1);
101
67
  }
102
- .default-theme.splitpanes--horizontal > .splitpanes__splitter:before,
103
- .default-theme .splitpanes--horizontal > .splitpanes__splitter:before {
104
- margin-top: -2px;
68
+ .vcp__body-content {
69
+ padding: 12px;
105
70
  }
106
- .default-theme.splitpanes--horizontal > .splitpanes__splitter:after,
107
- .default-theme .splitpanes--horizontal > .splitpanes__splitter:after {
108
- margin-top: 1px;
71
+
72
+ .slide-enter-from,
73
+ .slide-leave-to {
74
+ opacity: 0.25;
109
75
  }
110
76
 
111
77
  .layoutContainer {
@@ -177,80 +143,114 @@
177
143
  pointer-events: none;
178
144
  }
179
145
 
180
- .vcpg {
181
- border: 1px solid var(--border-color);
182
- border-radius: 4px;
146
+ .splitpanes {
147
+ display: flex;
183
148
  width: 100%;
149
+ height: 100%;
184
150
  }
185
- .vcpg ::v-deep(.vcp) * {
186
- box-sizing: border-box;
151
+ .splitpanes--vertical {
152
+ flex-direction: row;
187
153
  }
188
- .vcpg ::v-deep(.vcp) .vcp__header {
189
- background-color: var(--bg-color-header);
190
- height: 30px;
191
- border-bottom: 2px solid #c6bebd;
192
- transition: background-color 0.3s ease;
154
+ .splitpanes--horizontal {
155
+ flex-direction: column;
193
156
  }
194
- .vcpg ::v-deep(.vcp) .vcp__header .vcp__header:hover {
195
- background-color: var(--bg-color-header-hover);
157
+ .splitpanes--dragging * {
158
+ user-select: none;
196
159
  }
197
- .vcpg ::v-deep(.vcp) .vcp__header .vcp__header:active {
198
- background-color: var(--bg-color-header-active);
160
+ .splitpanes__pane {
161
+ width: 100%;
162
+ height: 100%;
163
+ overflow: hidden;
199
164
  }
200
- .vcpg ::v-deep(.vcp) .vcp:not(:first-of-type) .vcp__header {
201
- border-top: 2px solid var(--border-color);
165
+ .splitpanes--vertical .splitpanes__pane {
166
+ transition: width 0.2s ease-out;
202
167
  }
203
- .vcpg ::v-deep(.vcp) .vcp__header-title {
204
- font-weight: 500;
168
+ .splitpanes--horizontal .splitpanes__pane {
169
+ transition: height 0.2s ease-out;
205
170
  }
206
- .vcpg ::v-deep(.vcp) .vcp__body {
207
- border-top: 1px solid var(--border-color);
208
- background-color: var(--bg-color-body);
171
+ .splitpanes--dragging .splitpanes__pane {
172
+ transition: none;
173
+ }
174
+ .splitpanes__splitter {
175
+ touch-action: none;
176
+ }
177
+ .splitpanes--vertical > .splitpanes__splitter {
178
+ min-width: 1px;
179
+ cursor: col-resize;
180
+ }
181
+ .splitpanes--horizontal > .splitpanes__splitter {
182
+ min-height: 1px;
183
+ cursor: row-resize;
209
184
  }
210
185
 
211
- .vcp__header {
212
- display: flex;
213
- padding: 12px;
214
- pointer-events: none;
186
+ .splitpanes.default-theme .splitpanes__pane {
187
+ background-color: #f2f2f2;
215
188
  }
216
- .vcp--expandable .vcp__header {
217
- pointer-events: auto;
218
- cursor: pointer;
189
+ .splitpanes.default-theme .splitpanes__splitter {
190
+ background-color: #fff;
191
+ box-sizing: border-box;
192
+ position: relative;
193
+ flex-shrink: 0;
219
194
  }
220
- .vcp__header-title {
221
- display: flex;
222
- align-items: center;
223
- flex: 1;
195
+ .splitpanes.default-theme .splitpanes__splitter:before, .splitpanes.default-theme .splitpanes__splitter:after {
196
+ content: "";
197
+ position: absolute;
198
+ top: 50%;
199
+ left: 50%;
200
+ background-color: rgba(0, 0, 0, 0.15);
201
+ transition: background-color 0.3s;
224
202
  }
225
- .vcp__header-icon {
226
- display: flex;
227
- align-items: center;
228
- transition: transform 0.3s cubic-bezier(0.5, 0.25, 0, 1);
203
+ .splitpanes.default-theme .splitpanes__splitter:hover:before, .splitpanes.default-theme .splitpanes__splitter:hover:after {
204
+ background-color: rgba(0, 0, 0, 0.25);
229
205
  }
230
- .vcp--expanded .vcp__header-icon {
231
- transform-origin: center;
232
- transform: rotate(180deg);
206
+ .splitpanes.default-theme .splitpanes__splitter:first-child {
207
+ cursor: auto;
233
208
  }
234
- .vcp__header-icon > span {
235
- display: flex;
236
- height: 24px;
237
- width: 24px;
209
+
210
+ .default-theme.splitpanes .splitpanes .splitpanes__splitter {
211
+ z-index: 1;
238
212
  }
239
- .vcp__header-icon ::v-deep(svg) {
240
- height: 100%;
241
- width: 100%;
213
+ .default-theme.splitpanes--vertical > .splitpanes__splitter,
214
+ .default-theme .splitpanes--vertical > .splitpanes__splitter {
215
+ width: 7px;
216
+ border-left: 1px solid #eee;
217
+ margin-left: -1px;
242
218
  }
243
- .vcp__body {
244
- overflow: hidden;
245
- transition: all 0.3s cubic-bezier(0.5, 0.25, 0, 1);
219
+ .default-theme.splitpanes--vertical > .splitpanes__splitter:before, .default-theme.splitpanes--vertical > .splitpanes__splitter:after,
220
+ .default-theme .splitpanes--vertical > .splitpanes__splitter:before,
221
+ .default-theme .splitpanes--vertical > .splitpanes__splitter:after {
222
+ transform: translateY(-50%);
223
+ width: 1px;
224
+ height: 30px;
246
225
  }
247
- .vcp__body-content {
248
- padding: 12px;
226
+ .default-theme.splitpanes--vertical > .splitpanes__splitter:before,
227
+ .default-theme .splitpanes--vertical > .splitpanes__splitter:before {
228
+ margin-left: -2px;
249
229
  }
250
-
251
- .slide-enter-from,
252
- .slide-leave-to {
253
- opacity: 0.25;
230
+ .default-theme.splitpanes--vertical > .splitpanes__splitter:after,
231
+ .default-theme .splitpanes--vertical > .splitpanes__splitter:after {
232
+ margin-left: 1px;
233
+ }
234
+ .default-theme.splitpanes--horizontal > .splitpanes__splitter,
235
+ .default-theme .splitpanes--horizontal > .splitpanes__splitter {
236
+ height: 7px;
237
+ border-top: 1px solid #eee;
238
+ margin-top: -1px;
239
+ }
240
+ .default-theme.splitpanes--horizontal > .splitpanes__splitter:before, .default-theme.splitpanes--horizontal > .splitpanes__splitter:after,
241
+ .default-theme .splitpanes--horizontal > .splitpanes__splitter:before,
242
+ .default-theme .splitpanes--horizontal > .splitpanes__splitter:after {
243
+ transform: translateX(-50%);
244
+ width: 30px;
245
+ height: 1px;
246
+ }
247
+ .default-theme.splitpanes--horizontal > .splitpanes__splitter:before,
248
+ .default-theme .splitpanes--horizontal > .splitpanes__splitter:before {
249
+ margin-top: -2px;
250
+ }
251
+ .default-theme.splitpanes--horizontal > .splitpanes__splitter:after,
252
+ .default-theme .splitpanes--horizontal > .splitpanes__splitter:after {
253
+ margin-top: 1px;
254
254
  }
255
255
 
256
256
  .window {