refactor(theming): split up styles

src/style.css

@@ -31,8 +31,6 @@
   position: absolute;
   top: 0;
   left: 0;
-  background: rgba(0, 89, 220, 0.08);
-  border: 1px dotted rgba(0, 89, 220, 0.8);
 }
 
 .react-flow__edges {
@@ -49,23 +47,6 @@
   &.inactive {
     pointer-events: none;
   }
-
-  &.selected {
-    .react-flow__edge-path {
-      stroke: #555;
-    }
-  }
-
-  &.animated path {
-    stroke-dasharray: 5;
-    animation: dashdraw 0.5s linear infinite;
-  }
-
-  &.updating {
-    .react-flow__edge-path {
-      stroke: #777;
-    }
-  }
 }
 
 @keyframes dashdraw {
@@ -76,20 +57,13 @@
 
 .react-flow__edge-path {
   fill: none;
-  stroke: #b1b1b7;
-  stroke-width: 1;
 }
 
 .react-flow__edge-text {
-  font-size: 10px;
   pointer-events: none;
   user-select: none;
 }
 
-.react-flow__edge-textbg {
-  fill: white;
-}
-
 .react-flow__connection {
   pointer-events: none;
 
@@ -101,8 +75,6 @@
 
 .react-flow__connection-path {
   fill: none;
-  stroke: #b1b1b7;
-  stroke-width: 1;
 }
 
 .react-flow__nodes {
@@ -119,70 +91,6 @@
   user-select: none;
   pointer-events: all;
   transform-origin: 0 0;
-  cursor: grab;
-}
-
-.react-flow__node-default,
-.react-flow__node-input,
-.react-flow__node-output {
-  padding: 10px;
-  border-radius: 3px;
-  width: 150px;
-  font-size: 12px;
-  color: #222;
-  text-align: center;
-  border-width: 1px;
-  border-style: solid;
-}
-
-.react-flow__node-default.selectable,
-.react-flow__node-input.selectable,
-.react-flow__node-output.selectable {
-  &:hover {
-    box-shadow: 0 1px 4px 1px rgba(0, 0, 0, 0.08);
-  }
-}
-
-.react-flow__node-input {
-  background: #fff;
-  border-color: #0041d0;
-
-  &.selected,
-  &.selected:hover {
-    box-shadow: 0 0 0 0.5px #0041d0;
-  }
-
-  .react-flow__handle {
-    background: #0041d0;
-  }
-}
-
-.react-flow__node-default {
-  background: #fff;
-  border-color: #1a192b;
-
-  &.selected,
-  &.selected:hover {
-    box-shadow: 0 0 0 0.5px #1a192b;
-  }
-
-  .react-flow__handle {
-    background: #1a192b;
-  }
-}
-
-.react-flow__node-output {
-  background: #fff;
-  border-color: #ff0072;
-
-  &.selected,
-  &.selected:hover {
-    box-shadow: 0 0 0 0.5px #ff0072;
-  }
-
-  .react-flow__handle {
-    background: #ff0072;
-  }
 }
 
 .react-flow__nodesselection {
@@ -197,25 +105,16 @@
 
   &-rect {
     position: absolute;
-    background: rgba(0, 89, 220, 0.08);
-    border: 1px dotted rgba(0, 89, 220, 0.8);
     pointer-events: all;
     cursor: grab;
   }
 }
 
 .react-flow__handle {
-  position: absolute;
-  width: 6px;
-  height: 6px;
-  background: #555;
-  border: 1px solid white;
   pointer-events: none;
-  border-radius: 100%;
 
   &.connectable {
     pointer-events: all;
-    cursor: crosshair;
   }
 }
 
@@ -247,3 +146,36 @@
 .react-flow__edgeupdater {
   cursor: move;
 }
+
+/* additional components */
+
+.react-flow__background {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+}
+
+.react-flow__controls {
+  position: absolute;
+  z-index: 5;
+  bottom: 10px;
+  left: 10px;
+
+  &-button {
+    width: 24px;
+    height: 24px;
+
+    svg {
+      width: 100%;
+    }
+  }
+}
+
+.react-flow__minimap {
+  position: absolute;
+  z-index: 5;
+  bottom: 10px;
+  right: 10px;
+}