1 files changed, 53 insertions, 0 deletions
diff --git a/catalog-ui/src/app/ng2/pages/composition/graph/connection-wizard/connection-wizard-header/connection-wizard-header.component.less b/catalog-ui/src/app/ng2/pages/composition/graph/connection-wizard/connection-wizard-header/connection-wizard-header.component.less
new file mode 100644
index 0000000000..d8bab288d3
--- /dev/null
+++ b/catalog-ui/src/app/ng2/pages/composition/graph/connection-wizard/connection-wizard-header/connection-wizard-header.component.less
@@ -0,0 +1,53 @@
+@import '../../../../../../../assets/styles/sprite-proxy-services-icons';
+@import '../../../../../../../assets/styles/variables';
+.header-main-container{
+  background-color: #f8f8f8;
+  width: 100%;
+  height: 100px;
+  display: flex;
+  .inner-container{
+    margin: 0 auto;
+    display: flex;
+  }
+}
+.selected {
+  color: @main_color_a;
+}
+.node{
+  display: flex;
+  &.from-node{
+       text-align: right;
+   }
+  &.to-node{
+    text-align: left;
+  }
+  &.selected{
+    .icon{
+      border: solid 3px @main_color_a;
+      padding: 4px;
+      border-radius: 50%;
+      background-color: @main_color_p;
+    }
+  }
+  .icon{
+    margin: auto 0;
+    display: flex;
+  }
+  .text{
+    font-family: @font-opensans-medium;
+    margin: auto 10px;
+    min-width: 450px;
+    .node-name{
+      font-size: 11px;
+    }
+    .selected-req-or-cap{
+      font-size: 14px;
+    }
+  }
+}
+.connection{
+  width: 67px;
+  height: 0px;
+  border-bottom: dashed 2px #979797;
+  margin: auto 0;
+}