alighasami/vue-flow
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

update(styles): add new stylings for container and transformation pane

Browse Source 
Signed-off-by: Braks <78412429+bcakmakoglu@users.noreply.github.com>
This commit is contained in:
Braks
2021-12-20 19:29:52 +01:00
parent 14fc678c31
commit 232fd30f1d
1 changed files with 17 additions and 41 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/style.css
+17 -41
View File
@@ -1,19 +1,22 @@
.vue-flow { .vue-flow {
position: relative;
width: 100%; width: 100%;
height: 100%; height: 100%;
position: relative;
overflow: hidden; overflow: hidden;
} }
.vue-flow__zoompane, .vue-flow__container {
.vue-flow__renderer,
.vue-flow__pane,
.vue-flow__selectionpane {
width: 100%;
height: 100%;
position: absolute; position: absolute;
top: 0; height: 100%;
width: 100%;
left: 0; left: 0;
top: 0;
}
.vue-flow__transformation-pane {
pointer-events: none;
transform-origin: 0 0;
z-index: 2;
} }
.vue-flow__pane { .vue-flow__pane {
@@ -35,11 +38,8 @@
} }
.vue-flow__edges { .vue-flow__edges {
position: absolute; overflow: visible;
top: 0;
left: 0;
pointer-events: none; pointer-events: none;
z-index: 2;
} }
.vue-flow__edge { .vue-flow__edge {
@@ -83,12 +83,8 @@
} }
.vue-flow__nodes { .vue-flow__nodes {
position: absolute;
width: 100%;
height: 100%;
pointer-events: none; pointer-events: none;
transform-origin: 0 0; transform-origin: 0 0;
z-index: 3;
} }
.vue-flow__node { .vue-flow__node {
@@ -96,23 +92,19 @@
user-select: none; user-select: none;
pointer-events: all; pointer-events: all;
transform-origin: 0 0; transform-origin: 0 0;
box-sizing: border-box;
} }
.vue-flow__nodesselection { .vue-flow__nodesselection {
z-index: 3; z-index: 3;
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
transform-origin: left top; transform-origin: left top;
pointer-events: none; pointer-events: none;
&-rect { &-rect {
position: absolute; position: absolute;
pointer-events: all; pointer-events: all;
cursor: grab; cursor: grab;
} }
} }
.vue-flow__handle { .vue-flow__handle {
@@ -154,15 +146,6 @@
} }
/* additional components */ /* additional components */
.vue-flow__background {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.vue-flow__controls { .vue-flow__controls {
position: absolute; position: absolute;
z-index: 5; z-index: 5;
@@ -186,10 +169,3 @@
bottom: 10px; bottom: 10px;
right: 10px; right: 10px;
} }
.vue-flow__loading-indicator {
position: absolute;
top: 50%;
left: 50%;
font-size: 16px;
}