refactor(styling): use css for default styles (#259)

* refactor(minimap): use css for default styles

* refactor(controls): use css for default styles

* refactor(background): use css for default styles

* refactor(edges): add edge type class name

* refactor(nodes): use css for default styles

* refactor(outputnode): add display name

* refactor(wrapnode): cleanup

* refactor(rollup): minimize css for prod build

* refactor(additional-comps): extract css

* test(graphs): adjust for new markup

src/style.css

@@ -60,6 +60,12 @@
   }
 }
 
+@keyframes dashdraw {
+  from {
+    stroke-dashoffset: 10;
+  }
+}
+
 .react-flow__connection {
   pointer-events: none;
 }
@@ -85,12 +91,6 @@
   fill: white;
 }
 
-@keyframes dashdraw {
-  from {
-    stroke-dashoffset: 10;
-  }
-}
-
 .react-flow__nodes {
   width: 100%;
   height: 100%;
@@ -110,13 +110,17 @@
   pointer-events: all;
   transform-origin: 0 0;
   cursor: grab;
+  padding: 10px;
+  border-radius: 5px;
+  width: 150px;
+  background: #eee;
 
-  &.selected > *,
-  &.selected:hover > * {
+  &.selected,
+  &.selected:hover {
     box-shadow: 0 0 0 2px #555;
   }
 
-  &:hover > * {
+  &:hover {
     box-shadow: 0 1px 5px 2px rgba(0, 0, 0, 0.08);
   }
 
@@ -125,6 +129,18 @@
   }
 }
 
+.react-flow__node-default {
+  background: #ff6060;
+}
+
+.react-flow__node-input {
+  background: #9999ff;
+}
+
+.react-flow__node-output {
+  background: #55dd99;
+}
+
 .react-flow__handle {
   position: absolute;
   width: 10px;
@@ -173,29 +189,4 @@
     border: 1px dotted rgba(0, 89, 220, 0.8);
     pointer-events: all;
   }
-}
-
-.react-flow__controls {
-  box-shadow: 0 0 2px 1px rgba(0, 0, 0, 0.08);
-
-  &-button {
-    background: #fefefe;
-    border-bottom: 1px solid #eee;
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    width: 16px;
-    height: 16px;
-    cursor: pointer;
-    user-select: none;
-    padding: 5px;
-
-    svg {
-      width: 100%;
-    }
-
-    &:hover {
-      background: #f4f4f4;
-    }
-  }
-}
+}