refactor(bundle): create separate plugins bundle closes #15

2019-10-08 20:53:00 +02:00
parent 956f4fb978
commit 161ab7fdfd
10 changed files with 245 additions and 40 deletions
@@ -0,0 +1,189 @@
+.react-flow {
+  width: 100%;
+  height: 100%;
+  position: relative;
+  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__selectionpane {
+  width: 100%;
+  height: 100%;
+  position: absolute;
+  top: 0;
+  left: 0;
+  z-index: 2;
+}
+
+.react-flow__selection {
+  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 {
+  position: absolute;
+  top: 0;
+  left: 0;
+  pointer-events: none;
+  z-index: 2;
+}
+
+.react-flow__edge {
+  fill: none;
+  stroke: #bbb;
+  stroke-width: 2;
+  pointer-events: all;
+}
+
+.react-flow__edge.selected {
+    stroke: #555;
+  }
+
+.react-flow__edge.animated {
+    stroke-dasharray: 5;
+    -webkit-animation: dashdraw 0.5s linear infinite;
+            animation: dashdraw 0.5s linear infinite;
+  }
+
+.react-flow__edge.connection {
+    stroke: '#ddd';
+    pointer-events: none;
+  }
+
+@-webkit-keyframes dashdraw {
+  from {stroke-dashoffset: 10}
+}
+
+@keyframes dashdraw {
+  from {stroke-dashoffset: 10}
+}
+
+.react-flow__nodes {
+  width: 100%;
+  height: 100%;
+  position: absolute;
+  z-index: 3;
+  pointer-events: none;
+  transform-origin: 0 0;
+}
+
+.react-flow__node {
+  position: absolute;
+  color: #222;
+  font-family: sans-serif;
+  font-size: 12px;
+  text-align: center;
+  cursor: -webkit-grab;
+  cursor: grab;
+  -webkit-user-select: none;
+     -moz-user-select: none;
+      -ms-user-select: none;
+          user-select: none;
+  pointer-events: all;
+  transform-origin: 0 0;
+}
+
+.react-flow__node:hover > * {
+    box-shadow: 0 1px 5px 2px rgba(0, 0, 0, 0.08);
+  }
+
+.react-flow__node.selected > * {
+    box-shadow: 0 0 0 2px #555;
+  }
+
+.react-flow__handle {
+  position: absolute;
+  width: 10px;
+  height: 8px;
+  background: rgba(255, 255, 255, 0.4);
+  cursor: crosshair;
+}
+
+.react-flow__handle.bottom {
+    top: auto;
+    left: 50%;
+    bottom: 0;
+    transform: translate(-50%, 0);
+  }
+
+.react-flow__handle.top {
+    left: 50%;
+    top: 0;
+    transform: translate(-50%, 0);
+  }
+
+.react-flow__handle.left {
+    top: 50%;
+    left: 0;
+    transform: translate(0, -50%);
+
+  }
+
+.react-flow__handle.right {
+    right: 0;
+    top: 50%;
+    transform: translate(0, -50%);
+  }
+
+.react-flow__nodesselection {
+  z-index: 3;
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  top: 0;
+  left: 0;
+  transform-origin: left top;
+  pointer-events: none;
+}
+
+.react-flow__nodesselection-rect {
+    position: absolute;
+    background: rgba(0, 89, 220, 0.08);
+    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);
+}
+
+.react-flow__controls-button {
+    background: #fefefe;
+    border-bottom: 1px solid #eee;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    width: 16px;
+    height: 16px;
+    cursor: pointer;
+    -webkit-user-select: none;
+       -moz-user-select: none;
+        -ms-user-select: none;
+            user-select: none;
+    padding: 5px;
+  }
+
+.react-flow__controls-button img {
+      width: 100%;
+    }
+
+.react-flow__controls-button:hover {
+      background: #f4f4f4;
+    }