Initial OpenECOMP SDC commit

Change-Id: I0924d5a6ae9cdc161ae17c68d3689a30d10f407b
Signed-off-by: Michael Lando <ml636r@att.com>

1 files changed, 558 insertions, 0 deletions

diff --git a/catalog-ui/app/styles/mixins_old.less b/catalog-ui/app/styles/mixins_old.less
new file mode 100644
index 0000000000..8a4f609497
--- /dev/null
+++ b/catalog-ui/app/styles/mixins_old.less
@@ -0,0 +1,558 @@
+@import "variables";
+
+.font-color {
+    .a {color:  @color_a;}
+    .b {color:  @color_b;}
+    .c {color:  @color_c;}
+    .d {color:  @color_d;}
+    .e {color:  @color_e;}
+    .f {color:  @color_f;}
+    .g {color:  @color_g;}
+    .h {color:  @color_h;}
+    .i {color:  @color_i;}
+    .j {color:  @color_j;}
+    .k {color:  @color_k;}
+    .l {color:  @color_l;}
+    .m {color:  @color_m;}
+    .n {color:  @color_n;}
+    .o {color:  @color_o;}
+    .p {color:  @color_p;}
+    .q {color:  @color_q;}
+    .r {color:  @color_r;}
+    .s {color:  @color_s;}
+    .t {color:  @color_t;}
+    .u {color:  @color_t;}
+    .v {color:  @color_t;}
+    .w {color:  @color_t;}
+    .x {color:  @color_t;}
+    .y {color:  @color_t;}
+    .z {color:  @color_z;}
+    .zz {color:  @color_zz;}
+
+    .hover {
+        .a {color: @color_a_hover;}
+        .b {color: @color_b_hover;}
+        .c {color: @color_c_hover;}
+        .d {color: @color_d_hover;}
+        .e {color: @color_e_hover;}
+        .f {color: @color_f_hover;}
+        .g {color: @color_g_hover;}
+        .h {color: @color_h_hover;}
+        .i {color: @color_i_hover;}
+        .j {color: @color_j_hover;}
+        .k {color: @color_k_hover;}
+        .l {color: @color_l_hover;}
+        .m {color: @color_m_hover;}
+        .n {color: @color_n_hover;}
+        .o {color: @color_o_hover;}
+        .p {color: @color_p_hover;}
+        .q {color: @color_q_hover;}
+        .r {color: @color_r_hover;}
+        .s {color: @color_s_hover;}
+        .t {color: @color_t_hover;}
+        .u {color: @color_u_hover;}
+        .v {color: @color_v_hover;}
+        .w {color: @color_w_hover;}
+        .x {color: @color_x_hover;}
+        .y {color: @color_y_hover;}
+        .z {color: @color_z_hover;}
+        .zz {color: @color_zz_hover;}
+    }
+}
+
+.font-type {
+    ._1 {
+        font-family: @font-omnes-regular;
+        font-size: 14px;
+    }
+    ._2 {
+        font-family: @font-omnes-regular;
+        font-size: 20px;
+    }
+    ._3 {
+        font-family: @font-omnes-regular;
+        font-size: 12px;
+    }
+    ._4 {
+        font-family: @font-omnes-regular;
+        font-size: 16px;
+    }
+    ._5 {
+        font-family: @font-omnes-medium;
+        font-size: 30px;
+    }
+    ._6 {
+        font-family: @font-omnes-medium;
+        font-size: 16px;
+    }
+    ._7 {
+        font-family: @font-omnes-medium;
+        font-size: 14px;
+    }
+    ._8 {
+        font-family: @font-omnes-regular;
+        font-size: 11px;
+    }
+    ._9 {
+        font-family: @font-omnes-regular;
+        font-size: 13px;
+    }
+    ._10 {
+        font-family: @font-omnes-regular;
+        font-size: 18px;
+    }
+    ._11 {
+        font-family: @font-omnes-medium;
+        font-size: 20px;
+    }
+    ._12 {
+        font-family: @font-omnes-medium;
+        font-size: 17px;
+    }
+    ._13 {
+        font-family: @font-omnes-medium;
+        font-size: 12px;
+    }
+    ._14 {
+        font-family: @font-omnes-medium;
+        font-size: 11px;
+    }
+    ._15 {
+        font-family: @font-omnes-medium;
+        font-size: 24px;
+    }
+    ._16 {
+        font-family: @font-omnes-regular;
+        font-size: 10px;
+    }
+    ._17 {
+        font-family:  @font-omnes-medium;
+        font-size: 15px;
+    }
+    ._18 {
+        font-family:  @font-omnes-regular;
+        font-size: 15px;
+    }
+    ._19 {
+        font-family: @font-omnes-medium;
+        font-size: 18px;
+    }
+}
+
+.a_1  {.font-color > .a; .font-type > ._1;}
+.a_2  {.font-color > .a; .font-type > ._2;}
+.a_3  {.font-color > .a; .font-type > ._3;}
+.a_4  {.font-color > .a; .font-type > ._4;}
+.a_5  {.font-color > .a; .font-type > ._5;}
+.a_6  {.font-color > .a; .font-type > ._6;}
+.a_7  {.font-color > .a; .font-type > ._7;}
+.a_8  {.font-color > .a; .font-type > ._8;}
+.a_9  {.font-color > .a; .font-type > ._9;}
+.a_10  {.font-color > .a; .font-type > ._10;}
+.a_15 {.font-color > .a; .font-type > ._15;}
+
+.b_1  {.font-color > .b; .font-type > ._1;}
+.b_3  {.font-color > .b; .font-type > ._3;}
+.b_4  {.font-color > .b; .font-type > ._4;}
+.b_5  {.font-color > .b; .font-type > ._5;}
+.b_6  {.font-color > .b; .font-type > ._6;}
+.b_7  {.font-color > .b; .font-type > ._7;}
+.b_9  {.font-color > .b; .font-type > ._9;}
+.b_10  {.font-color > .b; .font-type > ._10;}
+.b_11  {.font-color > .b; .font-type > ._11;}
+.b_13  {.font-color > .b; .font-type > ._13;}
+.b_15  {.font-color > .b; .font-type > ._15;}
+.b_17  {.font-color > .b; .font-type > ._17;}
+.b_19  {.font-color > .b; .font-type > ._19;}
+
+.c_1  {.font-color > .c; .font-type > ._1;}
+.c_2  {.font-color > .c; .font-type > ._2;}
+.c_3  {.font-color > .c; .font-type > ._3;}
+.c_4  {.font-color > .c; .font-type > ._4;}
+.c_5  {.font-color > .c; .font-type > ._5;}
+.c_6  {.font-color > .c; .font-type > ._6;}
+.c_7  {.font-color > .c; .font-type > ._7;}
+.c_8  {.font-color > .c; .font-type > ._8;}
+.c_9  {.font-color > .c; .font-type > ._9;}
+.c_10 {.font-color > .c; .font-type > ._10;}
+.c_11 {.font-color > .c; .font-type > ._11;}
+.c_15 {.font-color > .c; .font-type > ._15;}
+.c_16 {.font-color > .c; .font-type > ._16;}
+.c_17 {.font-color > .c; .font-type > ._17;}
+.c_18 {.font-color > .c; .font-type > ._18;}
+
+.d_1  {.font-color > .d; .font-type > ._1;}
+.d_2  {.font-color > .d; .font-type > ._2;}
+.d_3  {.font-color > .d; .font-type > ._3;}
+.d_4  {.font-color > .d; .font-type > ._4;}
+.d_5  {.font-color > .d; .font-type > ._5;}
+.d_6  {.font-color > .d; .font-type > ._6;}
+.d_12  {.font-color > .d; .font-type > ._12;}
+
+.e_1  {.font-color > .e; .font-type > ._1;}
+.e_2  {.font-color > .e; .font-type > ._2;}
+.e_3  {.font-color > .e; .font-type > ._3;}
+.e_4  {.font-color > .e; .font-type > ._4;}
+.e_5  {.font-color > .e; .font-type > ._5;}
+.e_6  {.font-color > .e; .font-type > ._6;}
+.e_7  {.font-color > .e; .font-type > ._7;}
+
+.f_1  {.font-color > .f; .font-type > ._1;}
+.f_2  {.font-color > .f; .font-type > ._2;}
+
+.g_1  {.font-color > .g; .font-type > ._1;}
+.g_2  {.font-color > .g; .font-type > ._2;}
+.g_3  {.font-color > .g; .font-type > ._3;}
+.g_4  {.font-color > .g; .font-type > ._4;}
+.g_5  {.font-color > .g; .font-type > ._5;}
+.g_6  {.font-color > .g; .font-type > ._6;}
+.g_7  {.font-color > .g; .font-type > ._7;}
+.g_8  {.font-color > .g; .font-type > ._8;}
+.g_9  {.font-color > .g; .font-type > ._9;}
+.g_10 {.font-color > .g; .font-type > ._10;}
+.g_13 {.font-color > .g; .font-type > ._13;}
+.g_14 {.font-color > .g; .font-type > ._14;}
+
+.h_1  {.font-color > .h; .font-type > ._1;}
+.h_7  {.font-color > .h; .font-type > ._7;}
+.h_9  {.font-color > .h; .font-type > ._9;}
+
+.i_1  {.font-color > .i; .font-type > ._1;}
+.i_6 {.font-color > .i; .font-type > ._6;}
+.i_11 {.font-color > .i; .font-type > ._11;}
+.i_17 {.font-color > .i; .font-type > ._17;}
+
+.l_1  {.font-color > .l; .font-type > ._1;}
+.l_9  {.font-color > .l; .font-type > ._9;}
+
+.m_4  {.font-color > .m; .font-type > ._4;}
+.m_7  {.font-color > .m; .font-type > ._7;}
+
+.p_1  {.font-color > .p; .font-type > ._1;}
+.p_3  {.font-color > .p; .font-type > ._3;}
+.p_9  {.font-color > .p; .font-type > ._9;}
+
+.q_7  {.font-color > .q; .font-type > ._7;}
+.q_9  {.font-color > .q; .font-type > ._9;}
+.q_11 {.font-color > .q; .font-type > ._11;}
+
+.r_12 {.font-color > .r; .font-type > ._12;}
+
+.t_1  {.font-color > .t; .font-type > ._1;}
+.t_7  {.font-color > .t; .font-type > ._7;}
+.t_15 {.font-color > .t; .font-type > ._15;}
+
+/* Added by ikram - */
+.s_12 {.font-color > .s; .font-type > ._12;}
+
+.z_9  {.font-color > .z; .font-type > ._9;}
+.backgroundColor {
+    .a {background-color:  @color_a;}
+    .b {background-color:  @color_b;}
+    .c {background-color:  @color_c;}
+    .d {background-color:  @color_d;}
+    .e {background-color:  @color_e;}
+    .f {background-color:  @color_f;}
+    .g {background-color:  @color_g;}
+    .h {background-color:  @color_h;}
+    .i {background-color:  @color_i;}
+    .j {background-color:  @color_j;}
+    .k {background-color:  @color_k;}
+    .l {background-color:  @color_l;}
+    .m {background-color:  @color_m;}
+    .n {background-color:  @color_n;}
+    .o {background-color:  @color_o;}
+    .p {background-color:  @color_p;}
+    .q {background-color:  @color_q;}
+    .r {background-color:  @color_r;}
+    .s {background-color:  @color_s;}
+    .t {background-color:  @color_t;}
+    .u {background-color:  @color_u;}
+    .v {background-color:  @color_v;}
+    .w {background-color:  @color_w;}
+    .x {background-color:  @color_x;}
+    .y {background-color:  @color_y;}
+    .z {background-color:  @color_z;}
+    .zz {background-color:  @color_zz;}
+
+    .hover {
+        .a {background-color: @color_a_hover;}
+        .b {background-color: @color_b_hover;}
+        .c {background-color: @color_c_hover;}
+        .d {background-color: @color_d_hover;}
+        .e {background-color: @color_e_hover;}
+        .f {background-color: @color_f_hover;}
+        .g {background-color: @color_g_hover;}
+        .h {background-color: @color_h_hover;}
+        .i {background-color: @color_i_hover;}
+        .j {background-color: @color_j_hover;}
+        .k {background-color: @color_k_hover;}
+        .l {background-color: @color_l_hover;}
+        .m {background-color: @color_m_hover;}
+        .n {background-color: @color_n_hover;}
+        .o {background-color: @color_o_hover;}
+        .p {background-color: @color_p_hover;}
+        .q {background-color: @color_q_hover;}
+        .r {background-color: @color_r_hover;}
+        .s {background-color: @color_s_hover;}
+        .t {background-color: @color_t_hover;}
+        .u {background-color: @color_u_hover;}
+        .v {background-color: @color_v_hover;}
+        .w {background-color: @color_w_hover;}
+        .x {background-color: @color_x_hover;}
+        .y {background-color: @color_y_hover;}
+        .z {background-color: @color_z_hover;}
+        .zz {background-color: @color_zz_hover;}
+    }
+}
+
+.bg_a {.backgroundColor > .a;}
+.bg_b {.backgroundColor > .b;}
+.bg_c {.backgroundColor > .c;}
+.bg_d {.backgroundColor > .d;}
+.bg_e {.backgroundColor > .e;}
+.bg_f {.backgroundColor > .f;}
+.bg_g {.backgroundColor > .g;}
+.bg_h {.backgroundColor > .h;}
+.bg_i {.backgroundColor > .i;}
+.bg_j {.backgroundColor > .j;}
+.bg_k {.backgroundColor > .k;}
+.bg_l {.backgroundColor > .l;}
+.bg_m {.backgroundColor > .m;}
+.bg_n {.backgroundColor > .n;}
+.bg_o {.backgroundColor > .o;}
+.bg_p {.backgroundColor > .p;}
+.bg_q {.backgroundColor > .q;}
+.bg_r {.backgroundColor > .r;}
+.bg_s {.backgroundColor > .s;}
+.bg_t {.backgroundColor > .t;}
+.bg_u {.backgroundColor > .u;}
+.bg_v {.backgroundColor > .v;}
+.bg_w {.backgroundColor > .w;}
+.bg_x {.backgroundColor > .x;}
+.bg_y {.backgroundColor > .y;}
+.bg_z {.backgroundColor > .z;}
+.bg_zz {.backgroundColor > .zz;}
+
+.bg_a_hover {.backgroundColor > .hover > .a;}
+.bg_b_hover {.backgroundColor > .hover > .b;}
+.bg_c_hover {.backgroundColor > .hover > .c;}
+.bg_d_hover {.backgroundColor > .hover > .d;}
+.bg_e_hover {.backgroundColor > .hover > .e;}
+.bg_f_hover {.backgroundColor > .hover > .f;}
+.bg_g_hover {.backgroundColor > .hover > .g;}
+.bg_h_hover {.backgroundColor > .hover > .h;}
+.bg_i_hover {.backgroundColor > .hover > .i;}
+.bg_j_hover {.backgroundColor > .hover > .j;}
+.bg_l_hover {.backgroundColor > .hover > .l;}
+.bg_m_hover {.backgroundColor > .hover > .m;}
+.bg_n_hover {.backgroundColor > .hover > .n;}
+.bg_o_hover {.backgroundColor > .hover > .o;}
+.bg_p_hover {.backgroundColor > .hover > .p;}
+.bg_q_hover {.backgroundColor > .hover > .q;}
+.bg_r_hover {.backgroundColor > .hover > .r;}
+.bg_s_hover {.backgroundColor > .hover > .s;}
+.bg_t_hover {.backgroundColor > .hover > .t;}
+.bg_u_hover {.backgroundColor > .hover > .u;}
+.bg_v_hover {.backgroundColor > .hover > .v;}
+.bg_w_hover {.backgroundColor > .hover > .w;}
+.bg_x_hover {.backgroundColor > .hover > .x;}
+.bg_y_hover {.backgroundColor > .hover > .y;}
+.bg_z_hover {.backgroundColor > .hover > .z;}
+.bg_zz_hover {.backgroundColor > .hover > .zz;}
+
+.center         {margin: 0 auto;}
+.vcenter        {display: table-cell;vertical-align: middle;}
+.left           {float: left;}
+.right          {float: right;}
+.hand           {cursor: pointer;}
+.default-pointer {cursor: default;}
+.text-center    {text-align: center;}
+.display-none   {display: none;}
+.nowrap         {white-space: nowrap;}
+.bold           {font-weight: bold;}
+.full-height    {height: 100%;}
+.uppercase      {text-transform: uppercase;}
+.capitalize     {text-transform: capitalize;}
+.disabled       {
+    //background-color: #f2f2f2;
+    //border-color: #d8d8d8;
+    //background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAQAAAAECAYAAACp8Z5+AAAAIklEQVQIW2NkQAKrVq36zwjjgzhhYWGMYAEYB8RmROaABADeOQ8CXl/xfgAAAABJRU5ErkJggg==) repeat;
+    //color: @color_m;
+}
+
+.border-radius(@radius) {
+    -webkit-border-radius: @radius;
+    -moz-border-radius: @radius;
+    border-radius: @radius;
+}
+
+.border-radius-top-left(@radius) {
+    -webkit-border-top-left-radius: @radius;
+    -moz-border-radius-topleft: @radius;
+    -khtml-border-top-left-radius: @radius;
+    border-top-left-radius: @radius;
+}
+
+.border-radius-top-right(@radius) {
+    -webkit-border-top-right-radius: @radius;
+    -moz-border-radius-topright: @radius;
+    -khtml-border-top-right-radius: @radius;
+    border-top-right-radius: @radius;
+}
+
+.border-radius-bottom-left(@radius) {
+    -webkit-border-bottom-left-radius: @radius;
+    -moz-border-radius-bottomleft: @radius;
+    -khtml-border-bottom-left-radius: @radius;
+    border-bottom-left-radius: @radius;
+}
+
+.border-radius-bottom-right(@radius) {
+    -webkit-border-bottom-right-radius: @radius;
+    -moz-border-radius-bottomright: @radius;
+    -khtml-border-bottom-right-radius: @radius;
+    border-bottom-right-radius: @radius;
+}
+
+.opacity(@opacity: 0.5) {
+    -moz-opacity: @opacity;
+    -khtml-opacity: @opacity;
+    -webkit-opacity: @opacity;
+    opacity: @opacity;
+}
+
+.box-shadow(@arguments) {
+    -webkit-box-shadow: @arguments;
+    -moz-box-shadow: @arguments;
+    box-shadow: @arguments;
+}
+
+.square(@size) {
+    width: @size;
+    height: @size;
+}
+
+.selfClear:after {
+    content: ".";
+    display: block;
+    height: 0px;
+    clear: both;
+    visibility: hidden;
+}
+.selfClear {
+    display: inline-block;
+}
+
+.clearfix:after {
+    content: ".";
+    display: block;
+    clear: both;
+    visibility: hidden;
+    line-height: 0;
+    height: 0;
+}
+
+.clearfix {
+    display: inline-block;
+    clear: both;
+}
+
+.gradient(@d; @st; @st_o; @ec; @ec_0;){
+    background: -webkit-linear-gradient(@d, @st @st_o, @ec @ec_0);
+    background: -moz-linear-gradient(@d, @st @st_o, @ec @ec_0);
+    background: -o-linear-gradient(@d, @st @st_o, @ec @ec_0);
+    background: -ms-linear-gradient(@d, @st @st_o, @ec @ec_0);
+    background: linear-gradient(@d, @st @st_o, @ec @ec_0);
+}
+
+.hyphenate {
+    -ms-word-break: break-all;
+    word-break: break-all;
+
+    // Non standard for webkit
+    word-break: break-word;
+
+    -webkit-hyphens: auto;
+    -moz-hyphens: auto;
+    hyphens: auto;
+}
+
+.user-select (@val;) {
+    -webkit-touch-callout: none;
+    -webkit-user-select: @val;
+    -khtml-user-select: @val;
+    -moz-user-select: @val;
+    -ms-user-select: @val;
+    user-select: @val;
+}
+
+.flex-fixed (@width) {
+    flex-basis: @width;
+    flex-grow: 0;
+    flex-shrink: 0;
+}
+
+.perfect-scrollbar {
+    position: relative;
+    overflow: hidden;
+}
+
+.noselect {
+    -webkit-touch-callout: none;
+    -webkit-user-select: none;
+    -khtml-user-select: none;
+    -moz-user-select: none;
+    -ms-user-select: none;
+    user-select: none;
+}
+
+.arrow(@size, @color){
+    content: '';
+    position: absolute;
+    top: 50%;
+    right: 100%;
+    margin-top: -@size;
+    width: 0;
+    height: 0;
+    border-right: @size solid @color;
+    border-top: @size solid transparent;
+    border-bottom: @size solid transparent;
+}
+
+.circle(@size, @color){
+    background-color: @color;
+    .border-radius(50%);
+    color: @color_c;
+    content: '';
+    height: @size;
+    width: @size;
+    text-align: center;
+    display: block;
+}
+
+.sdc-ellipsis{
+     text-overflow: ellipsis;
+     overflow: hidden;
+     display: inline-block;
+     white-space: nowrap;
+ }
+
+// Works with animate.css
+.animation-duration(@seconds) {
+    animation-duration: @seconds; //3s
+    -webkit-animation-duration: @seconds;
+    -moz-animation-duration: @seconds;
+}
+
+.animation-delay(@seconds) {
+    animation-delay: @seconds; //3s
+    -webkit-animation-delay: @seconds;
+    -moz-animation-delay: @seconds;
+}
+
+.animation-iterations(@iterations) {
+    animation-iteration-count: @iterations;     // infinite;
+    -webkit-animation-iteration-count: @iterations;
+    -moz-animation-iteration-count: @iterations;
+}