Added black-white template.

Author: MrCoder

src/templateList.js

@@ -4,6 +4,11 @@ export default [
 		title: 'Basic',
 		img: 'assets/basic-icon.png'
 	},
+	{
+		id: 'black-white',
+		title: 'Black & White',
+		img: 'assets/advanced-icon.png'
+	},
 	{
 		id: 'blue',
 		title: 'Blue',

src/templates/template-black-white.json

@@ -0,0 +1,11 @@
+{
+	"title": "Advanced",
+	"mainSizes": [30, 70],
+	"htmlMode": "html",
+	"cssMode": "less",
+	"jsMode": "js",
+	"layoutMode": 1,
+	"js": "Client->SGW.\"Get order by id\" {\n  svc.Get(id) {\n    new X()\n    rep.\"load order\" {\n      ==\"Start Here\"==\n      MF.\"load order from mainframe\"\n      ==\"End Here\"==\n      if(order == null) {\n        @return \n        SGW->Client:404\n      } else {\n        return order\n      }\n      \n      while(true) {\n        svc.refresh(data)\n      }\n      processOrder()\n    }\n    return order\n  }\n  return response\n}",
+	"css": "@fragmentBorderColor: rgba(0, 0, 0, 0.30);\n@nameBackgroundColor: rgba(0, 0, 0, 0.07);\n@messageLineColor: #000;\n@occuranceBorderColor: #000;\n@occuranceBackgroundColor: #F5F5F5;\n@participantLineColor: rgba(0, 0, 0, 0.40);\n@participantBorderColor: #000;\n@participantBackgroundColor: #fff;\n@dividerBackgroundColor: #000;\n@dividerBorderColor: #000;\n\n#diagram {\n  .sequence-diagram {\n    .divider {\n      .name {\n        padding: 2px 6px 2px 6px;\n        border-radius: 0px;\n        margin: 0px;\n        border-color: @dividerBorderColor;\n        box-shadow: 2px 2px 0px @dividerBorderColor;\n      }\n      .left {\n        background: @dividerBackgroundColor;\n      }\n      .right {\n        background: @dividerBackgroundColor;\n      }\n    }\n    .lifeline {\n      .participant {\n        font-weight: 400;\n        border: 2px solid @participantBorderColor;\n        background: @participantBackgroundColor;  \n        box-shadow: 2px 2px 0px @participantBorderColor;\n        label {\n          text-decoration: underline;\n        }\n      }\n      .line {\n        border-left-color: @participantLineColor;\n      }\n    }\n    .message {\n      .name {\n        padding-bottom: 1px;\n      }\n      border-bottom-color: @messageLineColor;\n      svg {\n        polyline {\n          fill: @messageLineColor;\n          stroke: @messageLineColor;\n        }\n      }\n    }\n    .message.self {\n      svg>polyline:not(.head) {\n        fill: none;\n      }\n    }\n    .occurrence {\n      background-color: white;\n      border: 2px solid @occuranceBorderColor;\n      background-color: @occuranceBackgroundColor;\n    }\n    .fragment {\n      margin-top: 8px;\n      margin-bottom: 8px;\n      border-radius: 0px;\n      border: 1px solid @fragmentBorderColor;\n      .fragment.par>.block>.statement-container:not(:first-child), .segment:not(:first-child) {\n        border-top: 1px solid @fragmentBorderColor;\n      }\n      .header {\n        .name {\n          padding: 4px 4px 4px 6px;\n          background: @nameBackgroundColor;\n          label { /* name label */\n            background: transparent;\n            padding: 0px;\n          }\n        }\n      }\n      label { /* other labels e.g. condition */\n        display: inline-block; \n        padding: 4px 4px 4px 6px;\n      }\n    }\n    .statement-container {\n      margin-bottom: 8px;\n    }\n  }\n}",
+    "html": ""
+}