[PORTAL-7] Rebase

This rebasing includes common libraries and common overlays projects
abstraction of components

Change-Id: I9a24a338665c7cd058978e8636bc412d9e2fdce8
Signed-off-by: st782s <statta@research.att.com>

10 files changed, 1257 insertions, 0 deletions

diff --git a/ecomp-portal-FE-common/client/app/styles/buttons.less b/ecomp-portal-FE-common/client/app/styles/buttons.less
new file mode 100644
index 00000000..dd11101c
--- /dev/null
+++ b/ecomp-portal-FE-common/client/app/styles/buttons.less
@@ -0,0 +1,54 @@
+.ecomp-btn {
+    .white14m;
+    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 @funcRed;
+    }
+}
+.btn-green {
+    .ecomp-btn;
+    border-color: @green-border;
+    background: @green-active;
+    &:hover {
+        &:disabled {
+            background: @green-active;
+        }
+        background: @green-hover;
+    }
+}
+.btn-blue {
+    .ecomp-btn;
+    //border-color: @blue-border;
+    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 : @funcBkgGray;
+        &.disabled {
+            background: @blue-active;
+            opacity: 0.5;
+            cursor: default;
+        }
+    }
+
+    &.disabled {
+        opacity: 0.5;
+        cursor: default;
+    }
+}
\ No newline at end of file
diff --git a/ecomp-portal-FE-common/client/app/styles/ecomp-general.less b/ecomp-portal-FE-common/client/app/styles/ecomp-general.less
new file mode 100644
index 00000000..79003c0b
--- /dev/null
+++ b/ecomp-portal-FE-common/client/app/styles/ecomp-general.less
@@ -0,0 +1,98 @@
+.w-ecomp-main-view-title {
+    //.a24r;
+    .blackText24m;
+    //margin-left: @table-margin-left;
+    width: @table-width;
+    padding-bottom: 15px;
+    //.content_justify;
+    //padding-left: 20px;
+    margin:auto;
+}
+
+.override_background {
+    .bg_portalGray; // 1610
+}
+
+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 @portalLGray;
+  height: 32px;
+  .form-field, .form-field-input-container {
+    width: 440px;
+  }
+  &:focus{
+    border-color: @blue-hover;
+  }
+  &:active{
+    border-color: @portalLGray;
+  }
+}
+
+.add-button {
+  cursor: pointer;
+  width: 120px;
+  float: right;
+
+  .btn-blue;
+
+  line-height: 32px;
+  height: 32px;
+
+  &::before {
+    .ico_add_user;
+    content: '';
+    vertical-align: middle;
+    display: inline-block;
+    margin-right: 10px;
+  }
+}
+
+.edit-button {
+  cursor: pointer;
+  width: 132px;
+  float:right;
+  .btn-blue;
+
+  line-height: 32px;
+  height: 32px;
+
+  &::before {
+  font-family: portalicons;
+    content: '\e6bc';
+    vertical-align: middle;
+    display: inline-block;
+    margin-right: 10px;
+  }
+}
+
+.errors-text {
+  .dGray14r;
+}
+
+.general-errors-text {
+  .dGray14r;
+  color: @err;
+}
+
+.ecomp-table-repeat{
+	margin-bottom:5px;
+}
+
+.table-control-fields{
+	display:inline-flex
+}
+
+.table-control-buttons{
+	float:right;
+}
+
+.table-control-fields input, .table-dropdown{
+	width:400px;
+	margin-right:10px;
+}
\ No newline at end of file
diff --git a/ecomp-portal-FE-common/client/app/styles/form.less b/ecomp-portal-FE-common/client/app/styles/form.less
new file mode 100644
index 00000000..0caaf484
--- /dev/null
+++ b/ecomp-portal-FE-common/client/app/styles/form.less
@@ -0,0 +1,143 @@
+.form {
+    input, textarea, label , .multiple {
+        .blue14r;
+    }
+    input, textarea , .multiple {
+        &:focus {
+            outline: none;
+            border: 1px solid @portalDBlue;
+        }
+        border: 1px solid @portalDBlue;
+        padding: 8px;
+        &:disabled {
+            border: 1px solid @funcBkgGray;
+            .bg_portalDarkPurple;
+        }
+        &.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 @portalDBlue;
+            }
+        }
+    }
+    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: @portalGreen;
+        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: @funcRed;
+    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 @portalLGray;
+    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 @portalLGray;
+    border-radius: 0;
+    position: relative;
+}
+
+.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-common/client/app/styles/mixins.less b/ecomp-portal-FE-common/client/app/styles/mixins.less
new file mode 100644
index 00000000..9c598c05
--- /dev/null
+++ b/ecomp-portal-FE-common/client/app/styles/mixins.less
@@ -0,0 +1,366 @@
+/*------------------------------- 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;}
+.bg_portalGray {background-color: @funcBkgGray;}
+.bg_portalWhite {background-color: @portalWhite;}
+.bg_portalDarkPurple {background-color: @portalDPurple;}
+.bg_portalDBlue {background-color: @portalDBlue;}
+
+
+/*------------------------------- Fonts -------------------------------*/
+
+/* font family */
+.clearview {
+    .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;
+    }
+}
+.omnes {
+  .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;}
+.portalBlue {color:  @portalBlue;}
+//.b {color:  @b;}
+//.c {color:  @c;}
+.portalDBlue {color:  @portalDBlue;}
+.portalTxtBlack {color:  @funcTextBlack;}
+//.d {color:  @d;}
+//.e {color:  @e;}
+.portalGreen {color:  @portalGreen;}
+//.f {color:  @f;}
+//.g {color:  @g;}
+//.h {color:  @h;}
+//.i {color:  @i;}
+//.j {color:  @j;}
+//.k {color:  @k;}
+.portalRed {color:  @funcRed;}
+//.l {color:  @l;}
+//.m {color:  @m;}
+//.n {color:  @n;}
+.portalDGray {color:  @portalDGray;}
+//.o {color:  @o;}    //  @portalDGray
+//.p {color:  @p;}
+//.q {color: @q;}
+//.r {color: @r;}
+//.s {color: @s;}
+//.t {color: @t;}
+//.u {color: @u;}
+.portalWhite {color:  @portalWhite;}
+//.v {color: @v;}
+//.z {color: @z;}
+
+
+
+/* font type and size */
+//._14rc {
+//  .omnes > .regular;
+//  font-size: 14px;
+//}
+._12ic {
+  .omnes > .regular-italic;
+  font-size: 12px;
+}
+._16rc {
+  .omnes > .regular;
+  font-size: 16px;
+}
+._18rc {
+  .omnes > .regular;
+  font-size: 18px;
+}
+._18bc {
+  .omnes > .bold;
+  font-size: 18px;
+}
+._12r {
+    .omnes > .regular;
+    font-size: 12px;
+}
+._14m {
+    .omnes > .medium;
+    font-size: 14px;
+}
+._14r{
+    .omnes > .regular;
+    font-size: 14px;
+}
+._16m {
+    .omnes > .medium;
+    font-size: 16px;
+}
+._16r{
+    .omnes > .regular;
+    font-size: 16px;
+}
+._21r{
+    .omnes > .regular;
+    font-size: 21px;
+}
+._21m{
+    .omnes > .medium;
+    font-size: 21px;
+}
+._24r{
+    .omnes > .regular;
+    font-size: 24px;
+}
+._24m{
+    .omnes > .medium;
+    font-size: 24px;
+}
+._24b{
+    .omnes > .bold;
+    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;
+}
+
+/* font mixins */
+//.a14m{
+//    .a;
+//    ._14m;
+//}
+//.b14r{
+//    .b;
+//    ._14r;
+//}
+//.d14m{
+//    .d;
+//    ._14m;
+//}
+//.a14r{
+//    .a;
+//    ._14r;
+//}
+.blue14r{
+    .portalBlue;
+    ._14r;
+}
+//.b14m{
+//    .b;
+//    ._14m;
+//}
+//.c16r{
+//    .c;
+//    ._16r;
+//}
+.portalDBlue16r{
+    .portalBlue;
+    ._16r;
+}
+//.c18b{
+//  .c;
+//  ._18bc;
+//}
+.portalBlue24r{
+    .portalBlue;
+    ._24r;
+}
+.dBlue24r{
+    .portalDBlue;
+    ._24r;
+}
+.blackText21m{
+    .portalTxtBlack;
+    ._21m;
+}
+.blackText24m{
+    .portalTxtBlack;
+    ._24m;
+}
+//.a24b{
+//  .a;
+//  ._24b;
+//}
+//.d40r{
+//    .d;
+//    ._40r;
+//}
+//.d16r{
+//    .d;
+//    ._16r;
+//}
+//.b16r{
+//    .b;
+//    ._16m;
+//}
+//.u21r{
+//    .u;
+//    ._21r;
+//}
+//.u40r{
+//    .u;
+//    ._40r;
+//}
+//.u16r{
+//    .u;
+//    ._16r;
+//}
+.portalWhite16r {
+    .portalWhite;
+    ._16r;
+}
+//.u16m{
+//    .u;
+//    ._16m;
+//}
+//.u18r{
+//    .u;
+//    ._18r;
+//}
+//.o14r{
+//    .o;
+//    ._14r;
+//}
+.dGray14r{
+    .portalDGray;
+    ._14r;
+}
+//.o16m{
+//  .o;
+//  ._16m;
+//}
+//.o12i{
+//  .o;
+//  ._12ic
+//}
+.portalDGray12i{
+    .portalDGray;
+    ._12ic
+}
+//.u14m{
+//    .u;
+//    ._14m;
+//}
+.white14m{
+    .portalWhite;
+    ._14m;
+}
+.white12r{
+    .portalWhite;
+    ._12r;
+}
+//.u13r{
+//    .u;
+//    ._13r;
+//}
+//.n18r{
+//    .n;
+//    ._18r;
+//}
+.dGray18r {
+    .portalDGray;
+    ._18r;
+}
+//.n14r{
+//    .n;
+//    ._14r;
+//}
+.dGray14r {
+    .portalDGray;
+    ._14r;
+}
+//.n16r{
+//    .n;
+//    ._16r;
+//}
+//.n16m{
+//    .n;
+//    ._16m;
+//}
+//.n14r{
+//    .n;
+//    ._14r;
+//}
+//.n14m{
+//    .n;
+//    ._14m;
+//}
+//.n16m{
+//  .n;
+//  ._16m;
+//}
+.dGray16m {
+    .portalDGray;
+    ._16m;
+}
+//.p13r{
+//    .p;
+//    ._13r;
+//}
+.gray13r {
+    .portalDGray;
+    ._13r;
+}
+
+/* Content justify */
+
+.content_justify {
+    margin-top: 0;
+    margin-right: 0;
+    margin-left: @page-main-left;
+    margin-bottom: 0;
+    width: @table-width;
+}
diff --git a/ecomp-portal-FE-common/client/app/styles/ng-dialog.less b/ecomp-portal-FE-common/client/app/styles/ng-dialog.less
new file mode 100644
index 00000000..d5ecff67
--- /dev/null
+++ b/ecomp-portal-FE-common/client/app/styles/ng-dialog.less
@@ -0,0 +1,71 @@
+.ngdialog.ngdialog-theme-default.ng-scope {
+.ngdialog-content {
+        background-color: @portalWhite;
+        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;
+        }
+    }
+}
+
+//#need fix!!!
+.ngdialog.ngdialog-theme-default .ngdialog-content {
+    width: 580px;
+    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;
+  }
+
+}
+
diff --git a/ecomp-portal-FE-common/client/app/styles/reset.less b/ecomp-portal-FE-common/client/app/styles/reset.less
new file mode 100644
index 00000000..2c5fbd56
--- /dev/null
+++ b/ecomp-portal-FE-common/client/app/styles/reset.less
@@ -0,0 +1,60 @@
+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-common/client/app/styles/select2.less b/ecomp-portal-FE-common/client/app/styles/select2.less
new file mode 100644
index 00000000..835b3366
--- /dev/null
+++ b/ecomp-portal-FE-common/client/app/styles/select2.less
@@ -0,0 +1,230 @@
+.select2-drop {
+    //position: absolute;
+    border-radius: 0 0 2px 2px;
+
+    outline: none;
+}
+
+.select2-container {
+    margin-right: 8px;
+
+
+    .select2-choice {
+        border-color: @portalLGray;
+        border-radius: 2px;
+        background-image: none;
+        height: 32px;
+        width: 100%;
+    }
+
+    &.select2-dropdown-open {
+        .select2-choice {
+            border-color: @portalBlue;
+        }
+        .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: 12px;
+        right: 10px;
+        content: '';
+    }
+    .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: @funcBkgGray;
+        }
+    }
+
+    .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: @portalWhite;
+    }
+}
+
+.select2-dropdown-open {
+    .select2-choice {
+        border-color: @portalLGray;
+
+        .select2-arrow b:after {
+
+        }
+    }
+}
+
+.select2-drop-active {
+    border-color: @portalBlue;
+}
+//.select2-container {
+//    margin: 0;
+//    position: relative;
+//    display: block;
+//    .a14r;
+//
+//    &.ng-invalid.ng-touched {
+//        .select2-choice {
+//            border: 1px solid @err;
+//        }
+//    }
+//
+//    &.select2-container-active.ng-invalid.ng-touched {
+//        .select2-choice {
+//            border: 1px solid @c;
+//        }
+//    }
+//
+//    .select2-choice {
+//        display: block;
+//        padding: 10px 0 6px 8px;
+//        overflow: hidden;
+//        position: relative;
+//        border: 1px solid @o;
+//        text-decoration: none;
+//        cursor: pointer;
+//
+//        & > .select2-chosen {
+//            margin-right: 33px;
+//            display: block;
+//            overflow: hidden;
+//            white-space: nowrap;
+//            text-overflow: ellipsis;
+//        }
+//
+//        .select2-arrow {
+//            display: inline-block;
+//            width: 33px;
+//            height: 100%;
+//            position: absolute;
+//            right: 0;
+//            top: 0;
+//            //border-left: 1px solid @s;;
+//            //border-radius: 0 4px 4px 0;
+//            display: flex;
+//            align-items: center;
+//            justify-content: center;
+//
+//            b {
+//                display: block;
+//                //.spr_dropdown_arrow; //fix this
+//            }
+//        }
+//    }
+//
+//    .select2-drop-active {
+//        border: 1px solid @c;
+//        border-top: none;
+//        position: absolute;
+//        top: 32px;
+//        left: 0;
+//        width: 100%;
+//        .bg_f;
+//        z-index: 100;
+//    }
+//
+//    .select2-search {
+//        display: inline-block;
+//        width: 100%;
+//        min-height: 30px;
+//        margin: 0;
+//        padding-left: 4px;
+//        padding-right: 4px;
+//        position: relative;
+//        z-index: 10000;
+//        white-space: nowrap;
+//
+//        input {
+//            width: 100%;
+//            height: auto !important;
+//            min-height: 26px;
+//            padding: 4px 20px 4px 5px;
+//            margin: 0;
+//            outline: 0;
+//            border: 1px solid @o;
+//            &:focus {
+//                border: 1px solid @o;
+//            }
+//            border-radius: 2px;
+//            box-shadow: none;
+//        }
+//    }
+//
+//}
+/////
+//
+//.select2-container-active .select2-choice,
+//.select2-container-active .select2-choices {
+//    border: 1px solid @c;
+//    outline: none;
+//    box-shadow: 0 0 5px rgba(0, 0, 0, .3);
+//}
+//
+//.select2-dropdown-open {
+//    .select2-choice {
+//        border-bottom-color: transparent;
+//        box-shadow: 0 1px 0 #fff inset;
+//        border-bottom-left-radius: 0;
+//        border-bottom-right-radius: 0;
+//
+//        .select2-arrow {
+//            background: transparent;
+//            border-left: none;
+//            filter: none;
+//        }
+//    }
+//    .select2-results {
+//        max-height: 200px;
+//        padding: 0 0 0 4px;
+//        margin: 4px 4px 4px 0;
+//        position: relative;
+//        overflow-x: hidden;
+//        overflow-y: auto;
+//        -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
+//
+//        li.select2-result-with-children > .select2-result-label {
+//            font-weight: bold;
+//        }
+//
+//        .select2-result-label {
+//            padding: 3px 7px 4px;
+//            margin: 0;
+//            cursor: pointer;
+//        }
+//
+//        .select2-highlighted {
+//            background: @c;
+//            color: @f;
+//        }
+//    }
+//}
+//.select2-display-none {
+//    display: none;
+//}
diff --git a/ecomp-portal-FE-common/client/app/styles/spinner.less b/ecomp-portal-FE-common/client/app/styles/spinner.less
new file mode 100644
index 00000000..b1bf6a18
--- /dev/null
+++ b/ecomp-portal-FE-common/client/app/styles/spinner.less
@@ -0,0 +1,37 @@
+.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-common/client/app/styles/sprites.less b/ecomp-portal-FE-common/client/app/styles/sprites.less
new file mode 100644
index 00000000..a241851f
--- /dev/null
+++ b/ecomp-portal-FE-common/client/app/styles/sprites.less
@@ -0,0 +1,101 @@
+.sprite-base {
+  background: url('../assets/images/sprite.png') top left no-repeat;
+}
+
+.portal-logo {
+  .sprite-base;
+  width: 28px;
+  height: 28px;
+  background-position: -10px -10px;
+}
+
+.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 {
+  .sprite-base;
+  width: 12px;
+  height: 15px;
+  background-position: -10px -148px;
+}
+
+.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-common/client/app/styles/variables.less b/ecomp-portal-FE-common/client/app/styles/variables.less
new file mode 100644
index 00000000..7a0a75ea
--- /dev/null
+++ b/ecomp-portal-FE-common/client/app/styles/variables.less
@@ -0,0 +1,97 @@
+/*----------------------------------    General    ----------------------------------------------------------------*/
+@font-omnes-regular: Omnes-ECOMP-W02,Arial;
+@font-omnes-medium: Omnes-ECOMP-W02-Medium,Arial;
+@font-omnes-light: Omnes-ECOMP-W02-Light,Arial;
+@font-omnes-regular-italic: Omnes-ECOMP-W02-Italic,Arial;
+@font-omnes-bold: Omnes-ECOMP-W02-Bold,Arial;
+@font-clearview-regular: Omnes-ECOMP-W02,Arial;
+@font-clearview-bold: Omnes-ECOMP-W02-Bold,Arial;
+@font-clearview-light: Omnes-ECOMP-W02-Light,Arial;
+@font-clearview-regular-italic: Omnes-ECOMP-W02-Italic,Arial;
+
+@select-width: 440px;
+@header-height: 55px;
+@padding-left-side: 0px;
+@footer-height: 75px;
+
+@container-bottom:  32px;
+/* 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;
+@table-margin-left: 230px;
+
+@second-level-top: 62px;
+@err: @funcRed;
+@input-max-width: 234px;
+/*------------------------------- Colors -------------------------------*/
+@a : #067ab4;   // @portalBlue
+@b : #156b97;
+@c : #0c2577;   // @portalDBlue
+@d : #44c8f5;
+@e : #4ca90c;   // @portalGreen
+@f : #27a337;
+@g : #c4d82d;
+@h : #ef6f00;
+@i : #fbb313;
+@j : #b30a3c;
+@k : #e00000;
+@l : #81017e;
+@m : #da0081;
+@n : #333333;   //@funcTextBlack
+@o : #666666;   // @portalDGray
+@p : #999999;   //@portalGray
+@q : #d8d8d8;   //@portalLGray
+@r : #eaeaea;
+//@s : #f2f2f2;
+@t : #f8f8f8;   // @funcBkgGray
+@u : #ffffff;   //  @portalWhite
+@v : #e6f6fb;   // @funcBkgGray
+@z : #199ddf;
+@bg : #F2F2F2;
+
+// Signature color
+@portalBlue    :   #009FDB;
+//  Secondary Colors
+@portalBlack   :   #000000;
+@portalWhite   :   #ffffff;
+@portalOrange   :   #EA7400;
+//  Functional Colors
+@funcBlueLink :   #0568AE;
+@funcRed  :   #CF2A2A;
+@funcYellow  :   #FFB81C;
+@funcGreen  :   #007A3E;
+@funcTextBlack  :   #191919;
+@funcBkgGray   :   #F2F2F2;
+//  Accent Colors
+@portalLBlue   :   #71C5E8;
+@portalDBlue   :   #0568AE;
+@portalLGray   :   #D2D2D2;
+@portalLightGray:   #eaeaea;
+@portalGray   :   #959595;
+@portalDGray   :   #5A5A5A;
+@portalYellow   :   #FFB81C;
+@portalLGreen   :   #B5BD00;
+@portalGreen   :   #4CA90C;
+@portalDGreen   :   #007A3E;
+@portalLPurple   :   #CAA2DD;
+@portalPurple   :   #9063CD;
+@portalDPurple   :   #702F8A;
+
+/*------------------------------- Buttons colors -------------------------------*/
+@green-active: #4CA90C;
+@green-hover: #209657;
+@green-border: #45a006;
+@blue-active: #067ab4;
+@blue-hover: #39b1ec;
+@blue-border: #036698;