From 232fd30f1dec3b94ccad88d52fdaab8659e21023 Mon Sep 17 00:00:00 2001
From: Braks <78412429+bcakmakoglu@users.noreply.github.com>
Date: Sat, 11 Dec 2021 23:55:34 +0100
Subject: [PATCH] update(styles): add new stylings for container and
 transformation pane

Signed-off-by: Braks <78412429+bcakmakoglu@users.noreply.github.com>
---
 src/style.css | 58 +++++++++++++++------------------------------------
 1 file changed, 17 insertions(+), 41 deletions(-)

diff --git a/src/style.css b/src/style.css
index 4bc6571d..ce7b68e8 100644
--- a/src/style.css
+++ b/src/style.css
@@ -1,19 +1,22 @@
 .vue-flow {
+  position: relative;
   width: 100%;
   height: 100%;
-  position: relative;
   overflow: hidden;
 }
 
-.vue-flow__zoompane,
-.vue-flow__renderer,
-.vue-flow__pane,
-.vue-flow__selectionpane {
-  width: 100%;
-  height: 100%;
+.vue-flow__container {
   position: absolute;
-  top: 0;
+  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 {
@@ -35,11 +38,8 @@
 }
 
 .vue-flow__edges {
-  position: absolute;
-  top: 0;
-  left: 0;
+  overflow: visible;
   pointer-events: none;
-  z-index: 2;
 }
 
 .vue-flow__edge {
@@ -83,12 +83,8 @@
 }
 
 .vue-flow__nodes {
-  position: absolute;
-  width: 100%;
-  height: 100%;
   pointer-events: none;
   transform-origin: 0 0;
-  z-index: 3;
 }
 
 .vue-flow__node {
@@ -96,23 +92,19 @@
   user-select: none;
   pointer-events: all;
   transform-origin: 0 0;
+  box-sizing: border-box;
 }
 
 .vue-flow__nodesselection {
   z-index: 3;
-  position: absolute;
-  width: 100%;
-  height: 100%;
-  top: 0;
-  left: 0;
   transform-origin: left top;
   pointer-events: none;
 
   &-rect {
-    position: absolute;
-    pointer-events: all;
-    cursor: grab;
-  }
+     position: absolute;
+     pointer-events: all;
+     cursor: grab;
+   }
 }
 
 .vue-flow__handle {
@@ -154,15 +146,6 @@
 }
 
 /* additional components */
-
-.vue-flow__background {
-  position: absolute;
-  top: 0;
-  left: 0;
-  width: 100%;
-  height: 100%;
-}
-
 .vue-flow__controls {
   position: absolute;
   z-index: 5;
@@ -186,10 +169,3 @@
   bottom: 10px;
   right: 10px;
 }
-
-.vue-flow__loading-indicator {
-  position: absolute;
-  top: 50%;
-  left: 50%;
-  font-size: 16px;
-}