refactor(handle): use weaker selectors so its easier to overwrite

src/style.css

@@ -5,27 +5,21 @@
   overflow: hidden;
 }
 
-.react-flow__renderer {
-  width: 100%;
-  height: 100%;
-  position: absolute;
-}
-
-.react-flow__zoompane {
-  width: 100%;
-  height: 100%;
-  position: absolute;
-  top: 0;
-  left: 0;
-  z-index: 1;
-}
-
+.react-flow__renderer,
+.react-flow__zoompane,
 .react-flow__selectionpane {
   width: 100%;
   height: 100%;
   position: absolute;
   top: 0;
   left: 0;
+}
+
+.react-flow__zoompane {
+  z-index: 1;
+}
+
+.react-flow__selectionpane {
   z-index: 2;
 }
 
@@ -92,12 +86,12 @@
 }
 
 .react-flow__nodes {
+  position: absolute;
   width: 100%;
   height: 100%;
-  position: absolute;
-  z-index: 3;
   pointer-events: none;
   transform-origin: 0 0;
+  z-index: 3;
 }
 
 .react-flow__node {
@@ -106,19 +100,6 @@
   pointer-events: all;
   transform-origin: 0 0;
   cursor: grab;
-
-  &.selected,
-  &.selected:hover {
-    box-shadow: 0 0 0 2px #555;
-  }
-
-  &:hover {
-    box-shadow: 0 1px 5px 2px rgba(0, 0, 0, 0.08);
-  }
-
-  .react-flow__handle {
-    cursor: crosshair;
-  }
 }
 
 .react-flow__node-default,
@@ -130,6 +111,15 @@
   font-size: 12px;
   color: #222;
   text-align: center;
+
+  &.selected,
+  &.selected:hover {
+    box-shadow: 0 0 0 2px #555;
+  }
+
+  &:hover {
+    box-shadow: 0 1px 5px 2px rgba(0, 0, 0, 0.08);
+  }
 }
 
 .react-flow__node-default {
@@ -168,29 +158,30 @@
   width: 10px;
   height: 8px;
   background: rgba(255, 255, 255, 0.4);
+  cursor: crosshair;
+}
 
-  &.bottom {
-    top: auto;
-    left: 50%;
-    bottom: 0;
-    transform: translate(-50%, 0);
-  }
+.react-flow__handle-bottom {
+  top: auto;
+  left: 50%;
+  bottom: 0;
+  transform: translate(-50%, 0);
+}
 
-  &.top {
-    left: 50%;
-    top: 0;
-    transform: translate(-50%, 0);
-  }
+.react-flow__handle-top {
+  left: 50%;
+  top: 0;
+  transform: translate(-50%, 0);
+}
 
-  &.left {
-    top: 50%;
-    left: 0;
-    transform: translate(0, -50%);
-  }
+.react-flow__handle-left {
+  top: 50%;
+  left: 0;
+  transform: translate(0, -50%);
+}
 
-  &.right {
-    right: 0;
-    top: 50%;
-    transform: translate(0, -50%);
-  }
+.react-flow__handle-right {
+  right: 0;
+  top: 50%;
+  transform: translate(0, -50%);
 }