Add radix cwl graph visualization

[arvados-workbench2.git] / src / lib / cwl-svg / plugins / port-drag / style.scss

diff --git a/src/lib/cwl-svg/plugins/port-drag/style.scss b/src/lib/cwl-svg/plugins/port-drag/style.scss
new file mode 100644 (file)
index 0000000..5670125
--- /dev/null
+++ b/src/lib/cwl-svg/plugins/port-drag/style.scss
@@ -0,0 +1,56 @@
+@import "variables";
+
+// Expectations:
+//
+.cwl-workflow.__plugin-port-drag {
+
+  // Ports that are marked as suggested should be coloured differently and have visible labels
+  .port.__port-drag-suggestion {
+    fill: $port-suggested-fill;
+
+    .label {
+      opacity: 1;
+    }
+
+  }
+
+  // Port that is marked as a snap choice should have a stroke around it
+  .port.__port-drag-snap {
+    stroke: $port-snap-highlight-stroke;
+    stroke-width: $port-snap-stroke-width;
+  }
+
+  .node.__port-drag-snap {
+
+    // Nodes that are parents of snap choice ports should make all port labels on that side visible
+    &.__port-drag-snap-input .input-port,
+    &.__port-drag-snap-output .output-port {
+
+      .label {
+        opacity: 1;
+      }
+
+    }
+  }
+
+  // While dragging from a port, hover effects over other elements should not be triggered
+  // This also prevents zooming in and out using mouse scroll while dragging
+  &.__port-drag-dragging {
+    pointer-events: none;
+  }
+
+  .edge.__port-drag-dragging .inner {
+    stroke: $edge-dragged-stroke !important;
+    stroke-dasharray: $edge-dragged-dasharray;
+
+  }
+
+  .ghost {
+    stroke: $ghost-node-stroke-color;
+    stroke-width: 2px;
+
+    stroke-dasharray: 5 3;
+    fill: $ghost-node-fill-color;
+  }
+
+}
\ No newline at end of file