refactor(core): update base styles

packages/vue-flow/src/style.css

@@ -13,14 +13,19 @@
   top: 0;
 }
 
-.vue-flow__transformationpane {
-  pointer-events: none;
-  transform-origin: 0 0;
-  z-index: 2;
-}
-
 .vue-flow__pane {
   z-index: 1;
+  cursor: grab;
+
+  &.dragging {
+     cursor: grabbing;
+   }
+}
+
+.vue-flow__transformationpane {
+  transform-origin: 0 0;
+  z-index: 2;
+  pointer-events: none;
 }
 
 .vue-flow__viewport {
@@ -31,59 +36,73 @@
   z-index: 5;
 }
 
-.vue-flow__selection {
+.vue-flow__nodesselection-rect:focus,
-  position: absolute;
+.vue-flow__nodesselection-rect:focus-visible {
-  top: 0;
+  outline: none;
-  left: 0;
 }
 
-.vue-flow__edges {
+.vue-flow .vue-flow__edges {
-  overflow: visible;
   pointer-events: none;
+  overflow: visible;
+}
+
+.vue-flow__edge-path,
+.vue-flow__connection-path {
+  stroke: #b1b1b7;
+  stroke-width: 1;
+  fill: none;
 }
 
 .vue-flow__edge {
   pointer-events: visibleStroke;
+  cursor: pointer;
+
+  &.animated path {
+     stroke-dasharray: 5;
+     animation: dashdraw 0.5s linear infinite;
+   }
 
   &.inactive {
+     pointer-events: none;
+   }
+
+  &.selected,
+  &:focus,
+  &:focus-visible {
+     outline: none;
+   }
+
+  &.selected .vue-flow__edge-path,
+  &:focus .vue-flow__edge-path,
+  &:focus-visible .vue-flow__edge-path {
+     stroke: #555;
+   }
+
+  &-textwrapper {
+     pointer-events: all;
+   }
+
+  &-textbg {
+     fill: white;
+   }
+
+  .vue-flow__edge-text {
     pointer-events: none;
+    user-select: 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 .vue-flow__connectionline {
-  z-index: 1001;
-}
-
 .vue-flow__connection {
   pointer-events: none;
 
-  .animated {
+  &.animated {
-    stroke-dasharray: 5;
+     stroke-dasharray: 5;
-    animation: dashdraw 0.5s linear infinite;
+     animation: dashdraw 0.5s linear infinite;
-  }
+   }
 }
 
-.vue-flow__connection-path {
+.vue-flow__connectionline {
-  fill: none;
+  z-index: 1001;
 }
 
 .vue-flow__nodes {
@@ -97,6 +116,11 @@
   pointer-events: all;
   transform-origin: 0 0;
   box-sizing: border-box;
+  cursor: grab;
+
+  &.dragging {
+     cursor: grabbing;
+   }
 }
 
 .vue-flow__nodesselection {
@@ -114,35 +138,38 @@
 .vue-flow__handle {
   position: absolute;
   pointer-events: none;
+  min-width: 5px;
+  min-height: 5px;
 
   &.connectable {
-    pointer-events: all;
+     pointer-events: all;
-  }
+     cursor: crosshair;
-}
+   }
 
-.vue-flow__handle-bottom {
+  &-bottom {
-  top: auto;
+     top: auto;
-  left: 50%;
+     left: 50%;
-  bottom: -4px;
+     bottom: -4px;
-  transform: translate(-50%, 0);
+     transform: translate(-50%, 0);
-}
+   }
 
-.vue-flow__handle-top {
+  &-top {
-  left: 50%;
+     left: 50%;
-  top: -4px;
+     top: -4px;
-  transform: translate(-50%, 0);
+     transform: translate(-50%, 0);
-}
+   }
 
-.vue-flow__handle-left {
+  &-left {
-  top: 50%;
+     top: 50%;
-  left: -4px;
+     left: -4px;
-  transform: translate(0, -50%);
+     transform: translate(0, -50%);
-}
+   }
 
-.vue-flow__handle-right {
+  &-right {
-  right: -4px;
+     right: -4px;
-  top: 50%;
+     top: 50%;
-  transform: translate(0, -50%);
+     transform: translate(0, -50%);
+   }
 }
 
 .vue-flow__edgeupdater {
@@ -150,27 +177,47 @@
   pointer-events: all;
 }
 
-/* additional components */
+.vue-flow__panel {
-.vue-flow__controls {
   position: absolute;
   z-index: 5;
-  bottom: 10px;
+  margin: 15px;
-  left: 10px;
 
-  &-button {
+  &.top {
-    width: 24px;
+     top: 0;
-    height: 24px;
+   }
-    border: none;
 
-    svg {
+  &.bottom {
-      width: 100%;
+     bottom: 0;
-    }
+   }
+
+  &.left {
+     left: 0;
+   }
+
+  &.right {
+     right: 0;
+   }
+
+  &.center {
+     left: 50%;
+     transform: translateX(-50%);
+   }
+}
+
+.vue-flow__attribution {
+  font-size: 10px;
+  background: rgba(255, 255, 255, 0.5);
+  padding: 2px 3px;
+  margin: 0;
+
+a {
+  text-decoration: none;
+  color: #999;
+}
+}
+
+@keyframes dashdraw {
+  from {
+    stroke-dashoffset: 10;
   }
 }
-
-.vue-flow__minimap {
-  position: absolute;
-  z-index: 5;
-  bottom: 10px;
-  right: 10px;
-}