Files
vue-flow/package/src/style.css
2022-04-04 21:42:48 +02:00

172 lines
2.2 KiB
CSS

.vue-flow {
position: relative;
width: 100%;
height: 100%;
overflow: hidden;
}
.vue-flow__container {
position: absolute;
height: 100%;
width: 100%;
left: 0;
top: 0;
}
.vue-flow__transformation-pane {
pointer-events: none;
transform-origin: 0 0;
z-index: 2;
}
.vue-flow__pane {
z-index: 1;
}
.vue-flow__renderer {
z-index: 4;
}
.vue-flow__selectionpane {
z-index: 5;
}
.vue-flow__selection {
position: absolute;
top: 0;
left: 0;
}
.vue-flow__edges {
overflow: visible;
pointer-events: none;
}
.vue-flow__edge {
pointer-events: visibleStroke;
&.inactive {
pointer-events: none;
}
}
@keyframes dashdraw {
from {
stroke-dashoffset: 10;
}
}
.vue-flow__edge-path {
fill: none;
}
.vue-flow__edge-textwrapper {
pointer-events: all;
}
.vue-flow__edge-text {
pointer-events: none;
user-select: none;
}
.vue-flow__connection {
pointer-events: none;
.animated {
stroke-dasharray: 5;
animation: dashdraw 0.5s linear infinite;
}
}
.vue-flow__connection-path {
fill: none;
}
.vue-flow__nodes {
pointer-events: none;
transform-origin: 0 0;
}
.vue-flow__node {
position: absolute;
user-select: none;
pointer-events: all;
transform-origin: 0 0;
box-sizing: border-box;
}
.vue-flow__nodesselection {
z-index: 3;
transform-origin: left top;
pointer-events: none;
&-rect {
position: absolute;
pointer-events: all;
cursor: grab;
}
}
.vue-flow__handle {
pointer-events: none;
&.connectable {
pointer-events: all;
}
}
.vue-flow__handle-bottom {
top: auto;
left: 50%;
bottom: -4px;
transform: translate(-50%, 0);
}
.vue-flow__handle-top {
left: 50%;
top: -4px;
transform: translate(-50%, 0);
}
.vue-flow__handle-left {
top: 50%;
left: -4px;
transform: translate(0, -50%);
}
.vue-flow__handle-right {
right: -4px;
top: 50%;
transform: translate(0, -50%);
}
.vue-flow__edgeupdater {
cursor: move;
pointer-events: all;
}
/* additional components */
.vue-flow__controls {
position: absolute;
z-index: 5;
bottom: 10px;
left: 10px;
&-button {
width: 24px;
height: 24px;
border: none;
svg {
width: 100%;
}
}
}
.vue-flow__minimap {
position: absolute;
z-index: 5;
bottom: 10px;
right: 10px;
}