initial seed code commit VVP-9

Change-Id: I4d48180db7eba7cb7c299ab618f04d2092868085
Signed-off-by: Paul McGoldrick <paul.mcgoldrick@att.com>

1 files changed, 381 insertions, 0 deletions

diff --git a/d2ice.att.io/app/styles/mixins.less b/d2ice.att.io/app/styles/mixins.less
new file mode 100755
index 00000000..e34c4344
--- /dev/null
+++ b/d2ice.att.io/app/styles/mixins.less
@@ -0,0 +1,381 @@
+//
+// ============LICENSE_START========================================== 
+// org.onap.vvp/portal
+// ===================================================================
+// Copyright © 2017 AT&T Intellectual Property. All rights reserved.
+// ===================================================================
+//
+// Unless otherwise specified, all software contained herein is licensed
+// under the Apache License, Version 2.0 (the “License”);
+// you may not use this software 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.
+//
+//
+//
+// Unless otherwise specified, all documentation contained herein is licensed
+// under the Creative Commons License, Attribution 4.0 Intl. (the “License”);
+// you may not use this documentation except in compliance with the License.
+// You may obtain a copy of the License at
+// 
+//          https:creativecommons.org/licenses/by/4.0/
+//
+// Unless required by applicable law or agreed to in writing, documentation
+// 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.
+//
+// ============LICENSE_END============================================
+// 
+// ECOMP is a trademark and service mark of AT&T Intellectual Property.
+@import "variables";
+
+.f-color {
+    .a {color:  @main_color_a;}
+    .b {color:  @main_color_b;}
+    .c {color:  @main_color_c;}
+    .d {color:  @main_color_d;}
+    .e {color:  @main_color_e;}
+    .f {color:  @main_color_f;}
+    .g {color:  @main_color_g;}
+    .h {color:  @main_color_h;}
+    .i {color:  @main_color_i;}
+    .j {color:  @main_color_j;}
+    .k {color:  @main_color_k;}
+    .l {color:  @main_color_l;}
+    .m {color:  @main_color_m;}
+    .n {color:  @main_color_n;}
+    .o {color:  @main_color_o;}
+    .p {color:  @main_color_p;}
+
+    .q {color:  @func_color_q;}
+    .r {color:  @func_color_r;}
+    .s {color:  @func_color_s;}
+    .x {color:  @func_color_x;}
+
+
+    .t {color:  @tlv_color_t;}
+    .u {color:  @tlv_color_u;}
+    .v {color:  @tlv_color_v;}
+
+    .w {color:  @bg_color_a;}
+
+
+}
+
+.f-type {
+    ._36 {
+        font-family: @font-omnes-light;
+        font-size: 36px;
+    }
+    ._36_m {
+        font-family: @font-omnes-medium;
+        font-size: 36px;
+    }
+    ._26 {
+        font-family: @font-omnes-light;
+        font-size: 26px;
+    }
+    ._26_m {
+        font-family: @font-omnes-medium;
+        font-size: 26px;
+    }
+    ._24 {
+        font-family: @font-omnes-light;
+        font-size: 24px;
+    }
+    ._24_m {
+        font-family: @font-omnes-medium;
+        font-size: 24px;
+    }
+    ._24_r {
+        font-family: @font-omnes-regular;
+        font-size: 24px;
+    }
+    ._22 {
+        font-family: @font-omnes-light;
+        font-size: 22px;
+    }
+    ._22_m {
+        font-family: @font-omnes-medium;
+        font-size: 22px;
+    }
+    ._20 {
+        font-family: @font-omnes-light;
+        font-size: 20px;
+    }
+    ._20_m {
+        font-family: @font-omnes-medium;
+        font-size: 20px;
+    }
+    ._18 {
+        font-family: @font-omnes-light;
+        font-size: 18px;
+    }
+    ._18_r {
+        font-family: @font-omnes-regular;
+        font-size: 18px;
+    }
+    ._18_m {
+        font-family: @font-omnes-medium;
+        font-size: 18px;
+    }
+    ._16_i {
+        font-family: @font-omnes-medium-italic;
+        font-size: 16px;
+    }
+    ._16_r {
+        font-family: @font-omnes-regular;
+        font-size: 16px;
+    }
+    ._16_m {
+        font-family: @font-omnes-medium;
+        font-size: 16px;
+    }
+    ._14_r {
+        font-family: @font-omnes-regular;
+        font-size: 14px;
+    }
+    ._14_m {
+        font-family: @font-omnes-medium;
+        font-size: 14px;
+    }
+    ._14_i {
+        font-family: @font-omnes-medium-italic;
+        font-size: 14px;
+    }
+    ._13_r {
+        font-family: @font-omnes-regular;
+        font-size: 13px;
+    }
+    ._13_m {
+        font-family: @font-omnes-medium;
+        font-size: 13px;
+    }
+    ._13_i {
+        font-family: @font-omnes-medium-italic;
+        font-size: 13px;
+    }
+    ._12_r {
+        font-family: @font-omnes-regular;
+        font-size: 12px;
+    }
+    ._12_m {
+        font-family: @font-omnes-medium;
+        font-size: 12px;
+    }
+    ._12_i {
+        font-family: @font-omnes-medium-italic;
+        font-size: 12px;
+    }
+    ._10_r {
+        font-family: @font-omnes-regular;
+        font-size: 10px;
+    }
+    ._10_m {
+        font-family: @font-omnes-medium;
+        font-size: 10px;
+    }
+}
+
+.buildForColor(a);
+.buildForColor(b);
+.buildForColor(c);
+.buildForColor(d);
+.buildForColor(e);
+.buildForColor(f);
+.buildForColor(g);
+.buildForColor(h);
+.buildForColor(i);
+.buildForColor(j);
+.buildForColor(k);
+.buildForColor(l);
+.buildForColor(m);
+.buildForColor(n);
+.buildForColor(o);
+.buildForColor(p);
+
+.buildForFuncColor(q);
+.buildForFuncColor(r);
+.buildForFuncColor(s);
+.buildForFuncColor(x);
+
+.buildForTlvColor(t);
+.buildForTlvColor(u);
+.buildForTlvColor(v);
+
+
+.buildForColor(@c){
+    .@{c}_36    { color:  ~"@{main_color_@{c}}"; .f-type > ._36;}
+    .@{c}_36_m  { color:  ~"@{main_color_@{c}}"; .f-type > ._36_m;}
+    .@{c}_26    { color:  ~"@{main_color_@{c}}"; .f-type > ._26;}
+    .@{c}_26_m  { color:  ~"@{main_color_@{c}}"; .f-type > ._26_m;}
+    .@{c}_24    { color:  ~"@{main_color_@{c}}"; .f-type > ._24;}
+    .@{c}_24_m  { color:  ~"@{main_color_@{c}}"; .f-type > ._24_m;}
+    .@{c}_24_r  { color:  ~"@{main_color_@{c}}"; .f-type > ._24_r;}
+    .@{c}_22    { color:  ~"@{main_color_@{c}}"; .f-type > ._22;}
+    .@{c}_22_m  { color:  ~"@{main_color_@{c}}"; .f-type > ._22_m;}
+    .@{c}_20    { color:  ~"@{main_color_@{c}}"; .f-type > ._20;}
+    .@{c}_20_m  { color:  ~"@{main_color_@{c}}"; .f-type > ._20_m;}
+    .@{c}_18    { color:  ~"@{main_color_@{c}}"; .f-type > ._18;}
+    .@{c}_18_r  { color:  ~"@{main_color_@{c}}"; .f-type > ._18_r;}
+    .@{c}_18_m  { color:  ~"@{main_color_@{c}}"; .f-type > ._18_m;}
+    .@{c}_16_i  { color:  ~"@{main_color_@{c}}"; .f-type > ._16_i;}
+    .@{c}_16_r  { color:  ~"@{main_color_@{c}}"; .f-type > ._16_r;}
+    .@{c}_16_m  { color:  ~"@{main_color_@{c}}"; .f-type > ._16_m;}
+    .@{c}_14_r  { color:  ~"@{main_color_@{c}}"; .f-type > ._14_r;}
+    .@{c}_14_m  { color:  ~"@{main_color_@{c}}"; .f-type > ._14_m;}
+    .@{c}_14_i  { color:  ~"@{main_color_@{c}}"; .f-type > ._14_i;}
+    .@{c}_13_r  { color:  ~"@{main_color_@{c}}"; .f-type > ._13_r;}
+    .@{c}_13_m  { color:  ~"@{main_color_@{c}}"; .f-type > ._13_m;}
+    .@{c}_13_i  { color:  ~"@{main_color_@{c}}"; .f-type > ._13_i;}
+    .@{c}_12_r  { color:  ~"@{main_color_@{c}}"; .f-type > ._12_r;}
+    .@{c}_12_m  { color:  ~"@{main_color_@{c}}"; .f-type > ._12_m;}
+    .@{c}_12_i  { color:  ~"@{main_color_@{c}}"; .f-type > ._12_i;}
+    .@{c}_10_r  { color:  ~"@{main_color_@{c}}"; .f-type > ._10_r;}
+    .@{c}_10_m  { color:  ~"@{main_color_@{c}}"; .f-type > ._10_m;}
+
+}
+
+.buildForFuncColor(@c){
+    .@{c}_36    { color:  ~"@{func_color_@{c}}"; .f-type > ._36;}
+    .@{c}_36_m  { color:  ~"@{func_color_@{c}}"; .f-type > ._36_m;}
+    .@{c}_26    { color:  ~"@{func_color_@{c}}"; .f-type > ._26;}
+    .@{c}_26_m  { color:  ~"@{func_color_@{c}}"; .f-type > ._26_m;}
+    .@{c}_24    { color:  ~"@{func_color_@{c}}"; .f-type > ._24;}
+    .@{c}_24_m  { color:  ~"@{func_color_@{c}}"; .f-type > ._24_m;}
+    .@{c}_24_r  { color:  ~"@{func_color_@{c}}"; .f-type > ._24_r;}
+    .@{c}_22    { color:  ~"@{func_color_@{c}}"; .f-type > ._22;}
+    .@{c}_22_m  { color:  ~"@{func_color_@{c}}"; .f-type > ._22_m;}
+    .@{c}_20    { color:  ~"@{func_color_@{c}}"; .f-type > ._20;}
+    .@{c}_20_m  { color:  ~"@{func_color_@{c}}"; .f-type > ._20_m;}
+    .@{c}_18    { color:  ~"@{func_color_@{c}}"; .f-type > ._18;}
+    .@{c}_18_r  { color:  ~"@{func_color_@{c}}"; .f-type > ._18_r;}
+    .@{c}_18_m  { color:  ~"@{func_color_@{c}}"; .f-type > ._18_m;}
+    .@{c}_16_r  { color:  ~"@{func_color_@{c}}"; .f-type > ._16_r;}
+    .@{c}_16_m  { color:  ~"@{func_color_@{c}}"; .f-type > ._16_m;}
+    .@{c}_14_r  { color:  ~"@{func_color_@{c}}"; .f-type > ._14_r;}
+    .@{c}_14_m  { color:  ~"@{func_color_@{c}}"; .f-type > ._14_m;}
+    .@{c}_14_i  { color:  ~"@{func_color_@{c}}"; .f-type > ._14_i;}
+    .@{c}_13_r  { color:  ~"@{func_color_@{c}}"; .f-type > ._13_r;}
+    .@{c}_13_m  { color:  ~"@{func_color_@{c}}"; .f-type > ._13_m;}
+    .@{c}_13_i  { color:  ~"@{func_color_@{c}}"; .f-type > ._13_i;}
+    .@{c}_12_r  { color:  ~"@{func_color_@{c}}"; .f-type > ._12_r;}
+    .@{c}_12_m  { color:  ~"@{func_color_@{c}}"; .f-type > ._12_m;}
+    .@{c}_12_i  { color:  ~"@{func_color_@{c}}"; .f-type > ._12_i;}
+}
+
+
+.buildForTlvColor(@c){
+    .@{c}_36    { color:  ~"@{tlv_color_@{c}}"; .f-type > ._36;}
+    .@{c}_36_m  { color:  ~"@{tlv_color_@{c}}"; .f-type > ._36_m;}
+    .@{c}_26    { color:  ~"@{tlv_color_@{c}}"; .f-type > ._26;}
+    .@{c}_26_m  { color:  ~"@{tlv_color_@{c}}"; .f-type > ._26_m;}
+    .@{c}_24    { color:  ~"@{tlv_color_@{c}}"; .f-type > ._24;}
+    .@{c}_24_m  { color:  ~"@{tlv_color_@{c}}"; .f-type > ._24_m;}
+    .@{c}_24_r  { color:  ~"@{tlv_color_@{c}}"; .f-type > ._24_r;}
+    .@{c}_22    { color:  ~"@{tlv_color_@{c}}"; .f-type > ._22;}
+    .@{c}_22_m  { color:  ~"@{tlv_color_@{c}}"; .f-type > ._22_m;}
+    .@{c}_20    { color:  ~"@{tlv_color_@{c}}"; .f-type > ._20;}
+    .@{c}_20_m  { color:  ~"@{tlv_color_@{c}}"; .f-type > ._20_m;}
+    .@{c}_18    { color:  ~"@{tlv_color_@{c}}"; .f-type > ._18;}
+    .@{c}_18_r  { color:  ~"@{tlv_color_@{c}}"; .f-type > ._18_r;}
+    .@{c}_18_m  { color:  ~"@{tlv_color_@{c}}"; .f-type > ._18_m;}
+    .@{c}_16_r  { color:  ~"@{tlv_color_@{c}}"; .f-type > ._16_r;}
+    .@{c}_16_m  { color:  ~"@{tlv_color_@{c}}"; .f-type > ._16_m;}
+    .@{c}_14_r  { color:  ~"@{tlv_color_@{c}}"; .f-type > ._14_r;}
+    .@{c}_14_m  { color:  ~"@{tlv_color_@{c}}"; .f-type > ._14_m;}
+    .@{c}_14_i  { color:  ~"@{tlv_color_@{c}}"; .f-type > ._14_i;}
+    .@{c}_13_r  { color:  ~"@{tlv_color_@{c}}"; .f-type > ._13_r;}
+    .@{c}_13_m  { color:  ~"@{tlv_color_@{c}}"; .f-type > ._13_m;}
+    .@{c}_13_i  { color:  ~"@{tlv_color_@{c}}"; .f-type > ._13_i;}
+    .@{c}_12_r  { color:  ~"@{tlv_color_@{c}}"; .f-type > ._12_r;}
+    .@{c}_12_m  { color:  ~"@{tlv_color_@{c}}"; .f-type > ._12_m;}
+    .@{c}_12_i  { color:  ~"@{tlv_color_@{c}}"; .f-type > ._12_i;}
+}
+
+.disabled {
+    opacity: 0.4 !important;
+    cursor: auto;
+    background-color: transparent;
+    pointer-events: none;
+}
+
+.circle(@size) {
+    border-radius: 50%;
+    width: @size;
+    height: @size;
+}
+
+.step-progress(@size, @color, @width) {
+    position: relative;
+    .circle {
+        .circle(@size);
+        display: inline-block;
+        background-color: @color;
+    }
+    .line {
+        border-bottom: solid 2px @color;
+        position: absolute;
+        top: @size/2-1;
+        width: @width;
+    }
+    .text {
+        position: absolute;
+        top: -5px;
+        margin-left: 10px;
+        .a_16_m;
+    }
+}
+
+.step-progress-dashed(@size, @color, @width) {
+    position: relative;
+    .circle {
+        .circle(@size);
+        display: inline-block;
+        background-color: #ffffff;
+        border: dashed 1px @color;
+    }
+    .line {
+        border-bottom: dashed 1px @color;
+        position: absolute;
+        top: @size/2-1;
+        width: @width;
+    }
+    .text {
+        position: absolute;
+        top: -5px;
+        margin-left: 10px;
+        .a_16_m;
+    }
+}
+
+.step-progress-solid(@size, @color, @width) {
+    position: relative;
+    .circle {
+        .circle(@size);
+        display: inline-block;
+        background-color: #ffffff;
+        border: solid 1px @color;
+    }
+    .line {
+        border-bottom: solid 1px @color;
+        position: absolute;
+        top: @size/2-1;
+        width: @width;
+    }
+    .text {
+        position: absolute;
+        top: -5px;
+        margin-left: 10px;
+        .a_16_m;
+    }
+}