Initial OpenECOMP Portal commit

Change-Id: I804b80e0830c092e307da1599bd9fbb5c3e2da77
Signed-off-by: talasila <talasila@research.att.com>

13 files changed, 1440 insertions, 0 deletions

diff --git a/ecomp-portal-FE/client/app/styles/att-abs.less b/ecomp-portal-FE/client/app/styles/att-abs.less
new file mode 100644
index 00000000..45fab85d
--- /dev/null
+++ b/ecomp-portal-FE/client/app/styles/att-abs.less
@@ -0,0 +1,86 @@
+/*-
+ * ================================================================================
+ * eCOMP Portal
+ * ================================================================================
+ * Copyright (C) 2017 AT&T Intellectual Property
+ * ================================================================================
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ * 
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ * 
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ * ================================================================================
+ */
+ .c-ecomp-att-abs-table{
+    width: 100%;
+    height: 600px;
+    overflow-x: auto;
+    overflow-y: auto;
+
+    .tablesorter-default {
+        border: 1px solid @q;
+
+        th,
+        thead td {
+            .n16m;
+            color: @n;
+            background-color: @r;
+            border-collapse: collapse;
+            //border-top-style: none;
+            //border: 1px solid @q;
+            padding: 0;
+            font-weight: 700;
+            height: 38px;
+        }
+
+        tbody tr td {
+            .o16m;
+            background-color: @u;
+            border-left: 1px solid @q;
+            background-color: @u;
+            border-bottom: 1px solid @q;
+            height: 32px;
+            div {
+                line-height: 32px;
+            }
+        }
+
+        tbody tr.alt-row td {
+            background: @t;
+            padding: 12px 16px;
+        }
+        .tablesorter-search-highlight {
+            font-weight: bold;
+        }
+    }
+}
+
+.c-ecomp-att-abs-select{
+    width: @select-width;
+    display: inline-block;
+    margin-right: 10px;
+    .select2-chosen{
+        width: @select-width;
+        line-height: 20px;
+    }
+    .select2-container .select2-choice {
+        width: @select-width;
+        border-radius: 6px;
+        border-color: @q;
+    }
+
+  .select2-results {
+    width: @select-width;
+    background-color: @u;
+  }
+
+    .form-field, .form-field-input-container {
+        width: @select-width;
+    }
+}
\ No newline at end of file
diff --git a/ecomp-portal-FE/client/app/styles/buttons.less b/ecomp-portal-FE/client/app/styles/buttons.less
new file mode 100644
index 00000000..5edf9385
--- /dev/null
+++ b/ecomp-portal-FE/client/app/styles/buttons.less
@@ -0,0 +1,72 @@
+/*-
+ * ================================================================================
+ * eCOMP Portal
+ * ================================================================================
+ * Copyright (C) 2017 AT&T Intellectual Property
+ * ================================================================================
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ * 
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ * 
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ * ================================================================================
+ */
+ .ecomp-btn {
+    .u14m;
+    border-style: solid;
+    border-width: 1px;
+    border-radius: 6px;
+    box-shadow: 0px 1px 0.99px 0.01px rgba(2, 60, 89, 0.004);
+    height: 29px;
+    line-height: 29px;
+    cursor: pointer;
+    text-align: center;
+
+    &:disabled {
+        opacity: .5;
+        cursor: default;
+    }
+    &:focus {
+        outline: 0;
+        border: 1px solid @k;
+    }
+}
+.btn-green {
+    .ecomp-btn;
+    border-color: @green-border;
+    background: @green-active;
+    &:hover {
+        &:disabled {
+            background: @green-active;
+        }
+        background: @green-hover;
+    }
+}
+.btn-blue {
+    .ecomp-btn;
+    background: @blue-active;
+
+    &:hover {
+        -webkit-transition: background-color .3s ease-out;
+        -moz-transition: background-color .3s ease-out;
+        transition: background-color .3s ease-out;
+        background: @blue-hover;
+        color : #f2f2f2;
+        &.disabled {
+            background: @blue-active;
+            opacity: 0.5;
+            cursor: default;
+        }
+    }
+
+    &.disabled {
+        opacity: 0.5;
+        cursor: default;
+    }
+}
diff --git a/ecomp-portal-FE/client/app/styles/ecomp-general.less b/ecomp-portal-FE/client/app/styles/ecomp-general.less
new file mode 100644
index 00000000..6de494ce
--- /dev/null
+++ b/ecomp-portal-FE/client/app/styles/ecomp-general.less
@@ -0,0 +1,76 @@
+/*-
+ * ================================================================================
+ * eCOMP Portal
+ * ================================================================================
+ * Copyright (C) 2017 AT&T Intellectual Property
+ * ================================================================================
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ * 
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ * 
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ * ================================================================================
+ */
+ .w-ecomp-main-view-title {
+  .a24r;
+  margin: auto;
+  .content_justify;
+  margin-bottom: 15px;
+}
+
+input.table-search {
+  font-style: italic;
+  padding: 7px 10px;
+  width: 440px;
+  display: inline-block;
+  position: relative;
+  margin-bottom: 10px;
+  border-radius: 6px;
+  border: 1px solid @q;
+  height: 32px;
+  .form-field, .form-field-input-container {
+    width: 440px;
+  }
+  &:focus{
+    border-color: @blue-hover;
+  }
+  &:active{
+    border-color: @q;
+  }
+}
+
+.add-button {
+  cursor: pointer;
+  width: 120px;
+  float: right;
+
+  .btn-blue;
+
+  line-height: 32px;
+  height: 32px;
+
+  &::before {
+    .ico_add_user;
+    content: '\f211';
+    font-family: "Ionicons";
+    vertical-align: middle;
+    display: inline-block;
+    margin-right: 10px;
+    height:35px;
+  }
+}
+
+.errors-text {
+  .o14r;
+}
+
+.general-errors-text {
+  .o14r;
+  color: @err;
+}
\ No newline at end of file
diff --git a/ecomp-portal-FE/client/app/styles/fonts.less b/ecomp-portal-FE/client/app/styles/fonts.less
new file mode 100644
index 00000000..40bb6ab1
--- /dev/null
+++ b/ecomp-portal-FE/client/app/styles/fonts.less
@@ -0,0 +1,81 @@
+/*-
+ * ================================================================================
+ * eCOMP Portal
+ * ================================================================================
+ * Copyright (C) 2017 AT&T Intellectual Property
+ * ================================================================================
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ * 
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ * 
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ * ================================================================================
+ */
+ @font-face {
+    font-family: OmnesATT2-Regular;
+    src: url('../assets/fonts/omnesatt2-regular-webfont.eot');
+    src: url('../assets/fonts/omnesatt2-regular-webfont.eot?#iefix') format('embedded-opentype'),
+    url('../assets/fonts/omnesatt2-regular-webfont.ttf');
+}
+
+@font-face {
+	font-family: OmnesATT2-Medium;
+	src: url('../assets/fonts/omnesatt2-medium-webfont.eot');
+	src: url('../assets/fonts/omnesatt2-medium-webfont.eot?#iefix') format('embedded-opentype'),
+		url('../assets/fonts/omnesatt2-medium-webfont.ttf');
+}
+
+@font-face {
+    font-family: OmnesATT2-Light;
+    src: url('../assets/fonts/omnesatt2-light-webfont.eot');
+    src: url('../assets/fonts/omnesatt2-light-webfont.eot?#iefix') format('embedded-opentype'),
+    url('../assets/fonts/omnesatt2-light-webfont.ttf');
+}
+
+@font-face {
+    font-family: OmnesATT2-RegularItalic;
+    src: url('../assets/fonts/omnesatt2-regularitalic-webfont.eot');
+    src: url('../assets/fonts/omnesatt2-regularitalic-webfont.eot?#iefix') format('embedded-opentype'),
+    url('../assets/fonts/omnesatt2-regularitalic-webfont.ttf');
+}
+
+@font-face {
+	font-family: OmnesATT2-Bold;
+	src: url('../assets/fonts/omnesatt2-bold-webfont.eot');
+	src: url('../assets/fonts/omnesatt2-bold-webfont.eot?#iefix') format('embedded-opentype'),
+		url('../assets/fonts/omnesatt2-bold-webfont.ttf');
+}
+
+@font-face {
+  font-family: ClearviewATT-Bold;
+  src: url('../assets/fonts/ClearviewATT-Bd.eot');
+  src: url('../assets/fonts/ClearviewATT-Bd?#iefix') format('embedded-opentype'),
+  url('../assets/fonts/ClearviewATT-Bd.ttf');
+}
+
+@font-face {
+  font-family:  ;
+  src: url('../assets/fonts/ClearviewATT-Bk.eot');
+  src: url('../assets/fonts/ClearviewATT-Bk.eot?#iefix') format('embedded-opentype'),
+  url('../assets/fonts/ClearviewATT-Bk.ttf');
+}
+
+@font-face {
+  font-family: ClearviewATT-Light;
+  src: url('../assets/fonts/ClearviewATT-Lt.eot');
+  src: url('../assets/fonts/ClearviewATT-Lt.eot?#iefix') format('embedded-opentype'),
+  url('../assets/fonts/ClearviewATT-Lt.ttf');
+}
+
+@font-face {
+  font-family: ClearviewATT-RegularItalic;
+  src: url('../assets/fonts/ClearviewATT-BkIt.eot');
+  src: url('../assets/fonts/ClearviewATT-BkIt.eot?#iefix') format('embedded-opentype'),
+  url('../assets/fonts/ClearviewATT-BkIt.ttf');
+}
diff --git a/ecomp-portal-FE/client/app/styles/form.less b/ecomp-portal-FE/client/app/styles/form.less
new file mode 100644
index 00000000..4c4e8c3f
--- /dev/null
+++ b/ecomp-portal-FE/client/app/styles/form.less
@@ -0,0 +1,189 @@
+/*-
+ * ================================================================================
+ * eCOMP Portal
+ * ================================================================================
+ * Copyright (C) 2017 AT&T Intellectual Property
+ * ================================================================================
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ * 
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ * 
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ * ================================================================================
+ */
+ .form {
+    input, textarea, label , .multiple {
+        .a14r;
+    }
+    input, textarea , .multiple {
+        &:focus {
+            outline: none;
+            border: 1px solid @a;
+        }
+        border: 1px solid @a;
+        padding: 8px;
+        &:disabled {
+            border: 1px solid @s;
+            .bg_l;
+        }
+        &.ng-invalid.ng-touched {
+            border: 1px solid @err;
+            box-shadow: 0 0 2.55px 0.45px rgba(218,31,61,.5);
+            &:focus {
+                border: 1px solid @a;
+            }
+        }
+    }
+    input[type=number] {
+        -moz-appearance:textfield;
+    }
+    textarea {
+        min-height: 148px;
+        max-width: @input-max-width;
+    }
+    .flex-group {
+        display: flex;
+        justify-content: space-between;
+    }
+    .form-group {
+        margin: 0 0 18px;
+        position: relative;
+    }
+    .checkbox {
+        label {
+            cursor: pointer;
+        }
+    }
+    label {
+        margin: 0 0 3px;
+        display: block;
+    }
+    .text {
+        width: 100%;
+        display: block;
+    }
+    .short {
+        width: 104px;
+    }
+    .multiple{
+        padding: 0;
+    }
+    .error {
+        color: @f;
+        background: @err;
+        border-radius: 0 5px 5px 0;
+        font-size: 12px;
+        line-height: 20px;
+        text-align: center;
+        width: 100%;
+        position: absolute;
+        top: 18px;
+        margin-left: 75%;
+        z-index: 100;
+        height: 33px;
+        padding: 8px;
+        box-shadow: 0 0 2.55px 0.45px rgba(218,31,61,.5);
+        &:before {
+            content: '';
+            width: 0;
+            height: 0;
+            position: absolute;
+            left: -9px;
+            top: 7px;
+            border-top: 9px solid transparent;
+            border-bottom: 9px solid transparent;
+            border-right: 9px solid @err;
+        }
+    }
+}
+
+.required:before {
+    color: red;
+    margin-right: 2px;
+    content:  "* ";
+    position: absolute;
+    top: 28px;
+    left: -10px;
+}
+
+.custom-input-field{
+    padding-left: 6px;
+    padding-top: 0;
+
+    height: 30px;
+    line-height: 30px;
+    width: 100%;
+    border: 1px solid #ccc;
+    border-radius: 0;
+    position: relative;
+    padding-bottom: 0px;
+
+}
+.custom-select-field{
+    padding-left: 6px;
+    padding-top: 0;
+
+    height: 30px;
+    line-height: 30px;
+    width: 100%;
+    border: 1px solid #ccc;
+    border-radius: 0;
+    position: relative;
+}
+
+.dropdown-container{
+    height:40px;
+    // float:left;
+    position:relative;
+}
+
+.select-input,
+.multiple-select,
+.right_arrow_down{
+    position:absolute;
+    height: 100%;
+    width:100%;
+    top: 0px;
+}
+
+.right_arrow_down{
+    pointer-events:none;
+    top: -1px;
+    left:432px;
+    float:right;
+    width:16px;
+    background: url('../assets/images/sprite.png') bottom right no-repeat;
+    height:30px;
+    background-size: 100% 90%;
+    z-index:10;
+}
+
+.custom-select-wrap{
+    width: 100%;
+    position: relative;
+    display: inline-block;
+    vertical-align: middle;
+}
+.custom-select-wrap::after{
+    content: '';
+    .arrow_down;
+    display: block;
+    position: absolute;
+    top: 12px;
+    right: 10px;
+    z-index: 999;
+}
+
+select{
+    -webkit-appearance:none;
+    -moz-appearance:none;
+    appearance:none;
+    text-indent: 0.01px;
+    text-overflow: '';
+}
\ No newline at end of file
diff --git a/ecomp-portal-FE/client/app/styles/kpi-dashboard.less b/ecomp-portal-FE/client/app/styles/kpi-dashboard.less
new file mode 100644
index 00000000..2295e744
--- /dev/null
+++ b/ecomp-portal-FE/client/app/styles/kpi-dashboard.less
@@ -0,0 +1,111 @@
+/*-
+ * ================================================================================
+ * eCOMP Portal
+ * ================================================================================
+ * Copyright (C) 2017 AT&T Intellectual Property
+ * ================================================================================
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ * 
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ * 
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ * ================================================================================
+ */
+ .kpi-page-main {
+  
+  .bg_w;
+
+  position: fixed;
+  top: 100px;
+  left: 0;
+  right: 0;
+  bottom: @footer-height;
+  padding-top: 0px;
+  overflow-y: scroll;
+  padding-left: 50px;
+  padding-bottom:30px;
+}
+
+.DCAE_KPI_class {
+    .bg_w;
+  	
+    font-size:16px;
+
+    hr {
+      border:none;
+      border-top:1px dotted #f00;
+      color:#D3D3D3;
+      background-color:#fff;
+      height:1px;
+      width:100%;
+    }
+
+    table{
+      padding: 10px;
+    }
+
+    table thead{
+        border:none;
+      border-bottom: 1px dashed #cccccc;
+    }
+
+    table tr {
+      border: 1px dashed #cccccc;
+    }
+
+    table th {
+      font-weight: bold;
+    }
+
+    .content {
+      margin-left:100px;
+    }
+
+    h3{
+      margin-top: 20px;
+      padding: 25px;
+      font-size:24px;
+    }
+
+    h4{
+      padding: 15px;
+      font-size:20px;
+    }
+
+    th{
+      padding: 15px;
+    }
+
+    td{
+      padding: 15px;
+    }
+}
+
+.top-level-tabs-class {
+  margin-top: -80px;
+	padding-left:50px;
+	width: 90%;
+	float:right;
+	padding-bottom:10px;	
+}
+
+.sec-level-tabs-class {
+	padding-left:50px;
+	width: 90%;
+	float:right;	
+}
+
+.KPI_dash_text_class {
+	margin-left: 300px;
+	float:left;		
+}
+
+.KPI_dash_text_class h3{
+	font-size:24px;
+}
\ No newline at end of file
diff --git a/ecomp-portal-FE/client/app/styles/mixins.less b/ecomp-portal-FE/client/app/styles/mixins.less
new file mode 100644
index 00000000..a03d6ab7
--- /dev/null
+++ b/ecomp-portal-FE/client/app/styles/mixins.less
@@ -0,0 +1,296 @@
+/*-
+ * ================================================================================
+ * eCOMP Portal
+ * ================================================================================
+ * Copyright (C) 2017 AT&T Intellectual Property
+ * ================================================================================
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ * 
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ * 
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ * ================================================================================
+ */
+ /*------------------------------- Backgrounds -------------------------------*/
+.bg_a  {background-color:  @a;}
+.bg_b  {background-color:  @b;}
+.bg_c  {background-color:  @c;}
+.bg_d  {background-color:  @d;}
+.bg_e  {background-color:  @e;}
+.bg_f  {background-color:  @f;}
+.bg_g  {background-color:  @g;}
+.bg_h  {background-color:  @h;}
+.bg_i  {background-color:  @i;}
+.bg_j  {background-color:  @j;}
+.bg_k  {background-color:  @k;}
+.bg_l  {background-color:  @l;}
+.bg_m  {background-color:  @m;}
+.bg_n  {background-color:  @n;}
+.bg_o  {background-color:  @o;}
+.bg_p  {background-color:  @p;}
+.bg_q  {background-color:  @q;}
+.bg_r  {background-color:  @r;}
+.bg_s  {background-color:  @s;}
+.bg_t  {background-color:  @t;}
+.bg_u  {background-color:  @u;}
+.bg_v  {background-color:  @v;}
+.bg_w  {background-color:  @bg;}
+
+/*------------------------------- Fonts -------------------------------*/
+
+/* font family */
+.omnes {
+    .regular {
+        font-family: @font-clearview-regular;
+    }
+    .medium {
+      font-family: @font-omnes-medium;
+    }
+    .light {
+        font-family: @font-clearview-light;
+    }
+    .regular-italic {
+        font-family: @font-omnes-regular-italic;
+    }
+    .bold {
+        font-family: @font-clearview-bold;
+    }
+}
+.clearview {
+  .regular {
+    font-family: @font-omnes-regular;
+  }
+  .medium {
+    font-family: @font-omnes-medium;
+  }
+  .light {
+    font-family: @font-omnes-light;
+  }
+  .regular-italic {
+    font-family: @font-omnes-regular-italic;
+  }
+  .bold {
+    font-family: @font-omnes-bold;
+  }
+}
+
+.a {color:  @a;}
+.b {color:  @b;}
+.c {color:  @c;}
+.d {color:  @d;}
+.e {color:  @e;}
+.f {color:  @f;}
+.g {color:  @g;}
+.h {color:  @h;}
+.i {color:  @i;}
+.j {color:  @j;}
+.k {color:  @k;}
+.l {color:  @l;}
+.m {color:  @m;}
+.n {color:  @n;}
+.o {color:  @o;}
+.p {color:  @p;}
+.q {color: @q;}
+.r {color: @r;}
+.s {color: @s;}
+.t {color: @t;}
+.u {color: @u;}
+.v {color: @v;}
+.z {color: @z;}
+
+._14rc {
+  .clearview > .regular;
+  font-size: 14px;
+}
+._12ic {
+  .clearview > .regular-italic;
+  font-size: 12px;
+}
+._16rc {
+  .clearview > .regular;
+  font-size: 16px;
+}
+._18rc {
+  .clearview > .regular;
+  font-size: 18px;
+}
+._18bc {
+  .clearview > .bold;
+  font-size: 18px;
+}
+._12r{
+    .omnes > .regular;
+    font-size: 12px;
+}
+._12r{
+    .omnes > .regular;
+    font-size: 12px;
+}
+._14m {
+    .omnes > .medium;
+    font-size: 14px;
+}
+._14r{
+    .omnes > .regular;
+    font-size: 14px;
+}
+._16r{
+    .omnes > .regular;
+    font-size: 16px;
+}
+._21r{
+    .omnes > .regular;
+    font-size: 21px;
+}
+._24r{
+    .omnes > .regular;
+    font-size: 24px;
+}
+._40r{
+    .omnes > .regular;
+    font-size: 40px;
+}
+._16m{
+    .omnes > .medium;
+    font-size: 16px;
+}
+._18r{
+    .omnes > .regular;
+    font-size: 18px;
+}
+._13r{
+    .omnes > .regular;
+    font-size: 13px;
+}
+
+.a14m{
+    .a;
+    ._14m;
+}
+.b14r{
+    .b;
+    ._14r;
+}
+.d14m{
+    .d;
+    ._14m;
+}
+.a14r{
+    .a;
+    ._14r;
+}
+.b14m{
+    .b;
+    ._14m;
+}
+.c16r{
+    .c;
+    ._16r;
+}
+.c18b{
+  .c;
+  ._18bc;
+}
+.a24r{
+    .a;
+    ._24r;
+}
+.d40r{
+    .d;
+    ._40r;
+}
+.d16r{
+    .d;
+    ._16r;
+}
+.b16r{
+    .b;
+    ._16m;
+}
+.u21r{
+    .u;
+    ._21r;
+}
+.u40r{
+    .u;
+    ._40r;
+}
+.u16r{
+    .u;
+    ._16r;
+}
+.u16m{
+    .u;
+    ._16m;
+}
+.u18r{
+    .u;
+    ._18r;
+}
+.o12r{
+    .o;
+    ._12r;
+}
+.o14r{
+    .o;
+    ._14r;
+}
+.o16m{
+  .o;
+  ._16m;
+}
+.o12i{
+  .o;
+  ._12ic
+}
+.u14m{
+    .u;
+    ._14m;
+}
+.u13r{
+    .u;
+    ._13r;
+}
+.n18r{
+    .n;
+    ._18r;
+}
+.n14r{
+    .n;
+    ._14r;
+}
+.n16r{
+    .n;
+    ._16r;
+}
+.n16m{
+    .n;
+    ._16m;
+}
+.n14r{
+    .n;
+    ._14r;
+}
+.n14m{
+    .n;
+    ._14m;
+}
+.n16m{
+  .n;
+  ._16m;
+}
+.p13r{
+    .p;
+    ._13r;
+}
+
+.content_justify {
+    margin: 0 auto;
+    width: 1170px;
+}
diff --git a/ecomp-portal-FE/client/app/styles/ng-dialog.less b/ecomp-portal-FE/client/app/styles/ng-dialog.less
new file mode 100644
index 00000000..f0be7df0
--- /dev/null
+++ b/ecomp-portal-FE/client/app/styles/ng-dialog.less
@@ -0,0 +1,88 @@
+/*-
+ * ================================================================================
+ * eCOMP Portal
+ * ================================================================================
+ * Copyright (C) 2017 AT&T Intellectual Property
+ * ================================================================================
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ * 
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ * 
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ * ================================================================================
+ */
+ .ngdialog.ngdialog-theme-default.ng-scope {
+.ngdialog-content {
+        background-color: @u;
+        padding: 0;
+        box-shadow: 0px 0px 6px 0px rgba(0, 0, 0, 0.5);
+        border-radius: 4px;
+        top: -100px;
+    .title {
+            margin: 0 16px;
+            height: 48px;
+            line-height: 48px;
+        }
+
+    .ngdialog-close {
+            top: 6px;
+            right: 6px;
+        }
+    .app-roles-main {
+            margin: 20px 16px 0;
+        }
+    }
+}
+
+.ngdialog.ngdialog-theme-default .ngdialog-content {
+    width: 532px;
+    padding: 16px;
+}
+
+.ngdialog.ngdialog-theme-default.confirm-box .ngdialog-content{
+  @height: 160px;
+  @width: 400px;
+
+  width: @width;
+  height: @height;
+  padding: 20px;
+  position: absolute;
+  top: 300px;
+  left: ~"calc(50% - @{width}/2)";
+}
+
+
+.dialog-control {
+  position: absolute;
+  bottom: 16px;
+  right: 16px;
+  .next-button {
+    display: inline-block;
+    .btn-blue;
+    width: 90px;
+    margin-right: 10px;
+  }
+  .cancel-button {
+    display: inline-block;
+    .btn-blue;
+    width: 90px;
+  }
+  .save-button {
+    display: inline-block;
+    .btn-blue;
+    width: 90px;
+  }
+  .back-button {
+    display: inline-block;
+    .btn-blue;
+    width: 90px;
+    margin-right: 10px;
+  }
+
+}
\ No newline at end of file
diff --git a/ecomp-portal-FE/client/app/styles/reset.less b/ecomp-portal-FE/client/app/styles/reset.less
new file mode 100644
index 00000000..74b546da
--- /dev/null
+++ b/ecomp-portal-FE/client/app/styles/reset.less
@@ -0,0 +1,79 @@
+/*-
+ * ================================================================================
+ * eCOMP Portal
+ * ================================================================================
+ * Copyright (C) 2017 AT&T Intellectual Property
+ * ================================================================================
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ * 
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ * 
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ * ================================================================================
+ */
+ html, body, div, span, applet, object, iframe,
+h1, h2, h3, h4, h5, h6, p, blockquote, pre,
+a, abbr, acronym, address, big, cite, code,
+del, dfn, em, img, ins, kbd, q, s, samp,
+small, strike, strong, sub, sup, tt, var,
+b, u, i, center,
+dl, dt, dd, ol, ul, li,
+fieldset, form, label, legend,
+table, caption, tbody, tfoot, thead, tr, th, td,
+article, aside, canvas, details, embed,
+figure, figcaption, footer, header, hgroup,
+menu, nav, output, ruby, section, summary,
+time, mark, audio, video {
+	margin: 0;
+	padding: 0;
+	border: 0;
+	font-size: 100%;
+	font: inherit;
+	vertical-align: baseline;
+}
+/* HTML5 display-role reset for older browsers */
+article, aside, details, figcaption, figure,
+footer, header, hgroup, menu, nav, section {
+	display: block;
+}
+body {
+	line-height: 1;
+}
+ol, ul {
+	list-style: none;
+}
+blockquote, q {
+	quotes: none;
+}
+blockquote:before, blockquote:after,
+q:before, q:after {
+	content: '';
+	content: none;
+}
+table {
+	border-collapse: collapse;
+	border-spacing: 0;
+}
+.clearfix:before,
+.clearfix:after { content: ""; display: table; }
+.clearfix:after { clear: both; }
+.clearfix { zoom: 1;}
+
+* {
+    box-sizing: border-box;
+}
+
+input[type=number]::-webkit-inner-spin-button,
+input[type=number]::-webkit-outer-spin-button {
+	-webkit-appearance: none;
+	margin: 0;
+}
+input[type=number] {
+	-moz-appearance:textfield;
+}
diff --git a/ecomp-portal-FE/client/app/styles/select2.less b/ecomp-portal-FE/client/app/styles/select2.less
new file mode 100644
index 00000000..80d1b369
--- /dev/null
+++ b/ecomp-portal-FE/client/app/styles/select2.less
@@ -0,0 +1,102 @@
+/*-
+ * ================================================================================
+ * eCOMP Portal
+ * ================================================================================
+ * Copyright (C) 2017 AT&T Intellectual Property
+ * ================================================================================
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ * 
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ * 
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ * ================================================================================
+ */
+ .select2-drop {
+    border-radius: 0 0 2px 2px;
+    outline: none;
+}
+
+.select2-container {
+    margin-right: 8px;
+
+    .select2-choice {
+        border-color: #d8d8d8;
+        border-radius: 2px;
+        background-image: none;
+        height: 32px;
+        width: 100%;
+    }
+
+    &.select2-dropdown-open {
+        .select2-choice {
+            border-color: @a;
+        }
+        .select2-choice .select2-arrow b:after,
+        &.select2-container-disabled .select2-choice .select2-arrow b:after,
+        .select2-choice .select2-arrow b:after {
+            .arrow_up;
+        }
+    }
+
+    .select2-choice .select2-arrow b:after,
+    &.select2-container-disabled .select2-choice .select2-arrow b:after,
+    .select2-choice .select2-arrow b:after {
+        .arrow_down;
+        height: 10px;
+        width: 10px;
+        top: -2px;
+        right: 10px;
+      
+    }
+    .select2-chosen, .select2-container input {
+        line-height: 32px;
+    }
+}
+
+.select2-results {
+    border-radius: 0 0 2px 2px;
+    margin: -13px 0 0 0;
+    .select2-result {
+        &:first-child {
+            margin-top: 14px;
+        }
+        &:hover {
+            background-color: @t;
+        }
+    }
+
+    .select2-result-label {
+        outline: none;
+    }
+}
+
+.select2-drop-above {
+    &.select2-drop {
+        border-radius: 2px 2px 0 0;
+    }
+
+    &.select2-dropdown-open .select2-choice {
+        border-radius: 0 0 2px 2px !important;
+        background: #fff;
+    }
+}
+
+.select2-dropdown-open {
+    .select2-choice {
+        border-color: @q;
+
+        .select2-arrow b:after {
+
+        }
+    }
+}
+
+.select2-drop-active {
+    border-color: @a;
+}
\ No newline at end of file
diff --git a/ecomp-portal-FE/client/app/styles/spinner.less b/ecomp-portal-FE/client/app/styles/spinner.less
new file mode 100644
index 00000000..1ceb7d1e
--- /dev/null
+++ b/ecomp-portal-FE/client/app/styles/spinner.less
@@ -0,0 +1,56 @@
+/*-
+ * ================================================================================
+ * eCOMP Portal
+ * ================================================================================
+ * Copyright (C) 2017 AT&T Intellectual Property
+ * ================================================================================
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ * 
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ * 
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ * ================================================================================
+ */
+ .ecomp-spinner{
+  background: url('../assets/images/spinner.gif') top left no-repeat;
+  @height: 32px;
+  @width: 32px;
+
+  width: @width;
+  height: @height;
+  position: absolute;
+  top: 35%;
+  left: ~"calc(50% - @{width}/2)";
+}
+
+.ecomp-save-spinner{
+  background: url('../assets/images/spinner.gif') top left no-repeat;
+  @resize: 25px;
+  width: @resize;
+  height: @resize;
+  background-size: @resize;
+  position: absolute;
+  left: -50px;
+  top: 2px;
+}
+
+.ecomp-small-spinner{
+  background: url('../assets/images/spinner.gif') top left no-repeat;
+  @resize: 25px;
+  width: @resize;
+  height: @resize;
+  background-size: @resize;
+  position: relative;
+  display: inline-block;
+  vertical-align: 2px;
+  cursor: pointer;
+  top: 6px;
+  color: transparent;
+  margin-left: 8px;
+}
diff --git a/ecomp-portal-FE/client/app/styles/sprites.less b/ecomp-portal-FE/client/app/styles/sprites.less
new file mode 100644
index 00000000..d08e4ac0
--- /dev/null
+++ b/ecomp-portal-FE/client/app/styles/sprites.less
@@ -0,0 +1,118 @@
+/*-
+ * ================================================================================
+ * eCOMP Portal
+ * ================================================================================
+ * Copyright (C) 2017 AT&T Intellectual Property
+ * ================================================================================
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ * 
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ * 
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ * ================================================================================
+ */
+ .sprite-base {
+  background: url('../assets/images/sprite.png') top left no-repeat;
+}
+
+.ecomp-logo {
+  background: url('../assets/images/ecomp_logo.png');
+  width: 58px;
+  height: 28px;
+}
+
+.ico_user {
+  .sprite-base;
+  width: 16px;
+  height: 19px;
+  background-position: -10px -48px;
+}
+
+.ico_add_user {
+  .sprite-base;
+  width: 19px;
+  height: 19px;
+  background-position: -10px -78px;
+}
+
+.ico_dropdown {
+  .sprite-base;
+  width: 12px;
+  height: 7px;
+  background-position: -10px -107px;
+}
+
+.ico_search {
+  .sprite-base;
+  width: 14px;
+  height: 14px;
+  background-position: -10px -124px;
+}
+
+.ico_trash_default {
+  background: url('../assets/images/deleteicon.png') no-repeat;
+  width: 15px;
+  height: 20px;
+}
+
+.ico_trash_disabled {
+  .sprite-base;
+  width: 12px;
+  height: 15px;
+  background-position: -10px -173px;
+}
+
+.arrow_down {
+  .sprite-base;
+  width: 12px;
+  height: 5px;
+  background-position: -10px -198px;
+}
+
+.arrow_up {
+  .sprite-base;
+  width: 12px;
+  height: 5px;
+  background-position: -10px -213px;
+}
+
+.checkbox_checked {
+  .sprite-base;
+  width: 14px;
+  height: 14px;
+  background-position: -10px -228px;
+}
+
+.checkbox_disabled {
+  .sprite-base;
+  width: 14px;
+  height: 14px;
+  background-position: -10px -252px;
+}
+
+.checkbox_unchecked {
+  .sprite-base;
+  width: 14px;
+  height: 14px;
+  background-position: -10px -276px;
+}
+
+.checkbox_unchecked_hover {
+  .sprite-base;
+  width: 14px;
+  height: 14px;
+  background-position: -10px -300px;
+}
+
+.default_upload_image{
+  .sprite-base;
+  width:150px;
+  height:100px;
+  background-position:-10px -324px;
+}
\ No newline at end of file
diff --git a/ecomp-portal-FE/client/app/styles/variables.less b/ecomp-portal-FE/client/app/styles/variables.less
new file mode 100644
index 00000000..afc35a0b
--- /dev/null
+++ b/ecomp-portal-FE/client/app/styles/variables.less
@@ -0,0 +1,86 @@
+/*-
+ * ================================================================================
+ * eCOMP Portal
+ * ================================================================================
+ * Copyright (C) 2017 AT&T Intellectual Property
+ * ================================================================================
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ * 
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ * 
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ * ================================================================================
+ */
+ /*----------------------------------    General    ----------------------------------------------------------------*/
+@font-omnes-regular: arial;
+@font-omnes-medium: arial;
+@font-omnes-light: arial;
+@font-omnes-regular-italic: arial;
+@font-omnes-bold: arial;
+@font-clearview-regular: arial;
+@font-clearview-bold: arial;
+@font-clearview-light: arial;
+@font-clearview-regular-italic: arial;
+
+@select-width: 440px;
+@header-height: 55px;
+@padding-left-side: 70px;
+@footer-height: 75px;
+
+/* Top of Pages */
+@padding-top: 10px;
+@page-main-top: 105px;
+@page-main-left: 0;
+@page-main-right: 0;
+@page-main-bottom: @footer-height;
+@page-main-position: fixed;
+@page-main-overflow-y: scroll;
+
+/* tables */
+@table-width: 1170px;
+@table-margin: auto;
+@table-dropdown-filter-width: 460px;
+@table-dropdown-filter-display: inline-block;
+
+@second-level-top: 57px;
+@err: #da1f3d;
+@input-max-width: 234px;
+/*------------------------------- Colors -------------------------------*/
+@a : #067ab4;
+@b : #156b97;
+@c : #0c2577;
+@d : #44c8f5;
+@e : #4ca90c;
+@f : #27a337;
+@g : #c4d82d;
+@h : #ef6f00;
+@i : #fbb313;
+@j : #b30a3c;
+@k : #e00000;
+@l : #81017e;
+@m : #da0081;
+@n : #333333;
+@o : #666666;
+@p : #999999;
+@q : #d8d8d8;
+@r : #eaeaea;
+@s : #f2f2f2;
+@t : #f8f8f8;
+@u : #ffffff;
+@v : #e6f6fb;
+@z : #199ddf;
+@bg : #F2F2F2;
+
+/*------------------------------- Buttons colors -------------------------------*/
+@green-active: #4CA90C;
+@green-hover: #209657;
+@green-border: #45a006;
+@blue-active: #067ab4;
+@blue-hover: #39b1ec;
+@blue-border: #036698;