From 04d1fd7a2f631f822f0930d196c89788cce506b0 Mon Sep 17 00:00:00 2001
From: Timofey Alyakin <Timofey_Alyakin@epam.com>
Date: Wed, 27 Dec 2017 16:36:07 +0300
Subject: [PATCH] updated docs with graph customizing

---
 docs/tutorials/customize-graph.md | 115 ++++++++++++++++++++++++++++++
 docs/tutorials/tutorials.json     |   3 +
 2 files changed, 118 insertions(+)
 create mode 100644 docs/tutorials/customize-graph.md

diff --git a/docs/tutorials/customize-graph.md b/docs/tutorials/customize-graph.md
new file mode 100644
index 0000000..fc3dee7
--- /dev/null
+++ b/docs/tutorials/customize-graph.md
@@ -0,0 +1,115 @@
+# Customizing the graph appearance
+
+In order to customize graph styling you can [include your own](docs/tutorials/link-library.md) styles file instead of [included in the library](src/pipeline.scss) or override the specific styles you want to change.
+
+Following styles are responsible for task/workflow representation appearance:
+```scss
+.joint-type-visualstep {
+  /* task/workflow representation styling */
+  text {
+    font-weight: 500;
+    font-family: "Source Sans Pro", sans-serif;
+  }
+
+  rect {
+    rx: 5px;
+    ry: 5px;
+  }
+
+  .body {
+    fill: $white;
+    stroke: $step-color;
+    stroke-width: 2px;
+  }
+
+  // task/workflow representation heading text
+  .label {
+    fill: $step-color;
+    font-size: 16px;
+  }
+  /* /task/workflow representation */
+
+  /* task's/workflow's ports (inputs & outputs) styling */
+  .port-body {
+    stroke: $white;
+    stroke-width: 3px;
+    fill: $port-color;
+  }
+
+  .port-body.empty {
+    stroke: $port-color-empty;
+    stroke-width: 1.5px;
+    fill: $white;
+  }
+
+  .port-body.available-magnet {
+    fill: $port-color-available;
+  }
+
+  .port-body.disabled {
+    opacity: 0.5;
+  }
+
+  .port-body:hover {
+    opacity: 1;
+    fill: $step-color;
+  }
+
+  .port-label {
+    fill: $port-color;
+    text-decoration: none;
+    text-transform: none;
+  }
+  /* /port (inputs & outputs) styling */
+}
+
+// selected task/workflow representation styling
+.joint-type-visualstep.selected {
+  .body {
+    stroke: $graphite;
+    stroke-width: 3px;
+  }
+}
+
+// target port highlighting when making new connection
+.joint-highlight-stroke {
+  stroke: $port-color-empty;
+}
+
+```
+
+Following styles are responsible for connections between tasks/workflows:
+```scss
+// task's/workflow's connections styling
+.joint-type-visuallink {
+  .connection {
+    stroke: $port-color;
+    stroke-width: 2px;
+  }
+}
+
+// task's/workflow's merged connections styling
+.joint-type-visualmergedlink {
+  .connection {
+    stroke: $mergedLinkColor;
+    stroke-width: 4px;
+  }
+}
+
+// common connection styles
+.joint-link {
+  .marker-arrowheads .marker-arrowhead,
+  .marker-vertex-group .marker-vertex,
+  .marker-vertex-group .marker-vertex:hover {
+    fill: $port-color;
+  }
+
+  .marker-arrowheads .marker-arrowhead:hover {
+    fill: $step-color;
+  }
+
+  .link-tools .link-tool .tool-remove circle {
+    fill: $raspberry;
+  }
+}
+```
diff --git a/docs/tutorials/tutorials.json b/docs/tutorials/tutorials.json
index b17254e..174bb79 100644
--- a/docs/tutorials/tutorials.json
+++ b/docs/tutorials/tutorials.json
@@ -12,5 +12,8 @@
 
   "link-library": {
     "title": "Linking the Library"
+  },
+  "customize-graph": {
+    "title": "Customizing the graph appearance"
   }
 }