Nokia: Putting in support for metro network services within XOS for E-CORD

Change-Id: I9277ccf808479dd593ee1b7b640a2247a5b28a39
diff --git a/views/ngXosViews/ecordTopology/src/sass/elan-map.scss b/views/ngXosViews/ecordTopology/src/sass/elan-map.scss
new file mode 100644
index 0000000..a693ab0
--- /dev/null
+++ b/views/ngXosViews/ecordTopology/src/sass/elan-map.scss
@@ -0,0 +1,67 @@
+@import '../../../../style/sass/lib/_variables.scss';
+@import './vars.scss';
+
+elan-map {
+  display: block;
+  width: 100%;
+  height: 380px;
+  position: relative;
+
+  svg{
+    position: absolute;
+    top: 0;
+    left: 0;
+  }
+
+  circle.elan,
+  rect.elan {
+    stroke: $brand-info;
+    stroke-width: 2;
+    fill: #fff;
+  }
+
+  circle.elan,
+  circle.uni {
+    cursor: pointer;
+  }
+
+  .node.uni {
+
+    circle.uni,
+    rect.uni {
+      stroke: $cord-red;
+      stroke-width: 2;
+      fill: #fff;
+    }
+    path {
+      fill: darken($cord-red, 20%);
+    }
+  }
+
+  line {
+    stroke: $cord-red;
+    stroke-width: 1;
+  }
+
+  #map {
+    background: #EFEBE2;
+  }
+
+  .subunit {
+    fill: #B7DAFF;
+    stroke: white;
+    stroke-width: 1px;
+  }
+
+  .subunit._10{
+    fill: transparent;
+    stroke: transparent;
+  }
+
+  .exterior-boundary {
+    fill: none;
+    stroke: black;
+    stroke-linejoin: round;
+    stroke-width: 1px;
+  }
+}
\ No newline at end of file
diff --git a/views/ngXosViews/ecordTopology/src/sass/eline-details.scss b/views/ngXosViews/ecordTopology/src/sass/eline-details.scss
new file mode 100644
index 0000000..2d7834b
--- /dev/null
+++ b/views/ngXosViews/ecordTopology/src/sass/eline-details.scss
@@ -0,0 +1,15 @@
+@import '../../../../style/sass/lib/_variables.scss';
+@import '../../../../style/sass/bootstrap/bootstrap/_variables.scss';
+
+.service-container{
+  .btn {
+    font-size: $font-size-small;
+  }
+}
+
+.sla {
+  input.input-sm {
+    max-width: 60px;
+    text-align: right;
+  }
+}
\ No newline at end of file
diff --git a/views/ngXosViews/ecordTopology/src/sass/main.scss b/views/ngXosViews/ecordTopology/src/sass/main.scss
new file mode 100644
index 0000000..006182c
--- /dev/null
+++ b/views/ngXosViews/ecordTopology/src/sass/main.scss
@@ -0,0 +1,13 @@
+@import '../../../../style/sass/lib/_variables.scss';
+@import '../../../../style/sass/bootstrap/_bootstrap.scss';
+
+@import "./elan-map.scss";
+@import "./eline-details.scss";
+@import "./service-map.scss";
+
+
+#xosEcordTopology {
+  .btn-primary-border {
+    @include button-variant($btn-primary-bg, $btn-primary-color, $btn-primary-border);
+  }
+}
diff --git a/views/ngXosViews/ecordTopology/src/sass/service-map.scss b/views/ngXosViews/ecordTopology/src/sass/service-map.scss
new file mode 100644
index 0000000..966901b
--- /dev/null
+++ b/views/ngXosViews/ecordTopology/src/sass/service-map.scss
@@ -0,0 +1,41 @@
+@import '../../../../style/sass/lib/_variables.scss';
+@import './vars.scss';
+
+service-map {
+  width: 100%;
+  height: 100px;
+  display: block;
+
+  .node rect {
+    fill: #fff;
+    stroke-width: 2px;
+  }
+
+  .node.uni {
+    rect {
+      stroke: $cord-red;
+    }
+    path {
+      fill: darken($cord-red, 20%);
+    }
+  }
+
+  .node.service{
+    rect {
+      stroke: $brand-primary;
+    }
+    path {
+      fill: darken($brand-primary, 20%);
+    }
+  }
+
+  .node text {
+    font: 12px sans-serif;
+  }
+
+  .link {
+    fill: none;
+    stroke: #ccc;
+    stroke-width: 1;
+  }
+}
\ No newline at end of file
diff --git a/views/ngXosViews/ecordTopology/src/sass/vars.scss b/views/ngXosViews/ecordTopology/src/sass/vars.scss
new file mode 100644
index 0000000..5cb2d36
--- /dev/null
+++ b/views/ngXosViews/ecordTopology/src/sass/vars.scss
@@ -0,0 +1,5 @@
+$cord-red: #CE5650;
+
+/*$brand-primary: $cord-red;*/
+$panel-border-radius: 0;
+$border-radius-large: 2px;
\ No newline at end of file