summaryrefslogtreecommitdiffstats
path: root/ecomp-portal-FE-common/client/app/styles
diff options
context:
space:
mode:
authorst782s <statta@research.att.com>2017-05-04 07:48:42 -0400
committerst782s <statta@research.att.com>2017-05-04 12:28:17 -0400
commitb54df0ddd0c6a0372327c5aa3668e5a6458fcd64 (patch)
treee69cfa9b314a801bd187cf0145d1d4306436229c /ecomp-portal-FE-common/client/app/styles
parent39d1e62c84041831bfc52cca73b5ed5efaf57d27 (diff)
[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>
Diffstat (limited to 'ecomp-portal-FE-common/client/app/styles')
-rw-r--r--ecomp-portal-FE-common/client/app/styles/buttons.less54
-rw-r--r--ecomp-portal-FE-common/client/app/styles/ecomp-general.less98
-rw-r--r--ecomp-portal-FE-common/client/app/styles/form.less143
-rw-r--r--ecomp-portal-FE-common/client/app/styles/mixins.less366
-rw-r--r--ecomp-portal-FE-common/client/app/styles/ng-dialog.less71
-rw-r--r--ecomp-portal-FE-common/client/app/styles/reset.less60
-rw-r--r--ecomp-portal-FE-common/client/app/styles/select2.less230
-rw-r--r--ecomp-portal-FE-common/client/app/styles/spinner.less37
-rw-r--r--ecomp-portal-FE-common/client/app/styles/sprites.less101
-rw-r--r--ecomp-portal-FE-common/client/app/styles/variables.less97
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;