Initial OpenECOMP SDC commit

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

3 files changed, 365 insertions, 0 deletions

diff --git a/catalog-ui/app/styles/layout/header.less b/catalog-ui/app/styles/layout/header.less
new file mode 100644
index 0000000000..f8e95e8b41
--- /dev/null
+++ b/catalog-ui/app/styles/layout/header.less
@@ -0,0 +1,78 @@
+.w-sdc-header {
+    .bg_j;
+    border-bottom: 1px solid @border_color_c;
+    height: 94px;
+    width: 100%;
+    display: flex;
+    align-items: center;
+}
+
+.w-sdc-header-logo {
+    .bg_i;
+    .hand;
+    border-bottom: 1px solid @border_color_a;
+    height: 94px;
+    width: 240px;
+    padding: 28px;
+    .flex-fixed(240px);
+    z-index: 1020;
+}
+
+.w-sdc-header-logo-icon {
+    display: inline-block;
+    margin-right: 8px;
+    vertical-align: -6px;
+}
+
+a.w-sdc-header-logo-link {
+    .c_5;
+    text-decoration: none;
+}
+
+.w-sdc-header-version{
+    .c_16;
+    .opacity(0.6);
+}
+
+.i-sdc-header-caption {
+    min-width: 175px;
+    text-align: left;
+    cursor: default;
+    text-overflow: ellipsis;
+    overflow: hidden;
+    flex-grow: 10;
+    padding-left: 27px;
+    white-space: nowrap;
+
+    .i-sdc-header-caption-text {
+        .i_11;
+        text-overflow: ellipsis;
+        overflow: hidden;
+
+    }
+
+    .i-sdc-header-help {
+        .i_1;
+        .hand;
+        margin-left: 26px;
+        position: relative;
+        display: inline-block;
+
+        &::before {
+            .bg_a;
+            border-radius: 50%;
+            color: @color_c;
+            content: '?';
+            display: block;
+            height: 20px;
+            position: absolute;
+            left: -26px;
+            text-align: center;
+            width: 20px;
+        }
+    }
+}
+
+.sdc-error-403-container-title {
+    .b_11;
+}
diff --git a/catalog-ui/app/styles/layout/main.less b/catalog-ui/app/styles/layout/main.less
new file mode 100644
index 0000000000..925da09431
--- /dev/null
+++ b/catalog-ui/app/styles/layout/main.less
@@ -0,0 +1,124 @@
+.full-height {
+    height: 100%;
+    background-color: @main_color_l
+}
+
+.w-sdc-main-container {
+    position: absolute;
+    top: @header_height + @top_nav_height;
+    left: 0;
+    right: 0;
+    bottom: 0;
+
+    .w-sdc-main-right-container {
+        .bg_n;
+        bottom: 0;
+        padding: 22px 12px;
+        position: absolute;
+        left: 240px;
+        right: 0;
+        top: 0;
+        overflow: hidden;
+
+
+        & > div:first-child { /* scroll fix */
+            padding-bottom: 80px;
+        }
+    }
+}
+
+.sdc-loading-page {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    flex-direction: column;
+    position: absolute;
+    height: 100%;
+    width: 100%;
+
+    .caption1 {
+        .p_24;
+        text-align: center;
+    }
+
+    .caption2 {
+        .p_16_m;
+        display: block;
+    }
+}
+
+.main-loader {
+    @green: #cccccc;
+    @blue: #dddddd;
+    @red: #eeeeee;
+    @yellow: #bbbbbb;
+    @white: #ffffff;
+
+    @width: 80px;
+
+    .loader {
+        position: relative;
+        margin: 0px auto;
+        width: @width;
+        &:before {
+            content:'';
+            display: block;
+            padding-top: 100%;
+        }
+    }
+
+    .circular {
+        animation: rotate 2s linear infinite;
+        height: 100%;
+        transform-origin: center center;
+        width: 100%;
+        position: absolute;
+        top: 0; bottom: 0; left: 0; right: 0;
+        margin: auto;
+    }
+
+
+    .path {
+        stroke-dasharray: 1,200;
+        stroke-dashoffset: 0;
+        animation:
+        dash 1.5s ease-in-out infinite,
+        color 6s ease-in-out infinite;
+        stroke-linecap: round;
+    }
+
+    @keyframes rotate{
+        100%{
+            transform: rotate(360deg);
+        }
+    }
+    @keyframes dash{
+        0%{
+            stroke-dasharray: 1,200;
+            stroke-dashoffset: 0;
+        }
+        50%{
+            stroke-dasharray: 89,200;
+            stroke-dashoffset: -35px;
+        }
+        100%{
+            stroke-dasharray: 89,200;
+            stroke-dashoffset: -124px;
+        }
+    }
+    @keyframes color{
+        100%, 0%{
+            stroke: @red;
+        }
+        40%{
+            stroke: @blue;
+        }
+        66%{
+            stroke: @green;
+        }
+        80%, 90%{
+            stroke: @yellow;
+        }
+    }
+
+}
diff --git a/catalog-ui/app/styles/layout/sidebar.less b/catalog-ui/app/styles/layout/sidebar.less
new file mode 100644
index 0000000000..9b8dc240c7
--- /dev/null
+++ b/catalog-ui/app/styles/layout/sidebar.less
@@ -0,0 +1,163 @@
+.w-sdc-left-sidebar {
+    width: 242px;
+    overflow: hidden;
+    background-color: @main_color_p;
+    .box-shadow(1px 0px 4px 0px rgba(24, 24, 25, 0.17));
+    position: absolute;
+    left: 0;
+    top: 0;
+    bottom: 0;
+    padding: 12px 18px;
+    z-index: 1;
+}
+
+.w-sdc-left-sidebar-menu {
+    margin: 0;
+    padding: 0;
+
+    ul {
+        margin: 0;
+        padding: 0;
+    }
+}
+
+/* Catalog */
+.i-sdc-left-sidebar-nav-item {
+    .c_6;
+    .hand;
+    .border-radius(4px);
+    width: 220px;
+    height: 60px;
+    line-height: 19px;
+    margin: 0 auto 10px;
+    padding: 20px 10px 20px 60px;
+    box-shadow: 0 0 2px 0 rgba(0, 0, 0, .3);
+    text-align: left;
+
+    &::before {
+        .sprite;
+        content: '';
+        position: absolute;
+        left: 50px;
+        top: 18px;
+    }
+
+    &.catalog {
+        .c_4;
+        .bg_a;
+        .uppercase;
+        position: relative;
+        text-indent: 20px;
+
+        &:hover     { .bg_a_hover; }
+        &::before   {.sprite.catalog;}
+    }
+
+    &.distribution {
+        .bg_o;
+        display: none;
+        position: relative;
+    }
+    &.distribution::before {
+        .sprite.distribution;
+    }
+
+    &.support {
+        .bg_a;
+        position: relative;
+    }
+
+    &.support::before {
+        .sprite.support;
+
+    }
+}
+
+
+/*  */
+.i-sdc-left-sidebar-nav-item-hierachy {
+     .c_6;
+    .hand;
+    .border-radius(4px);
+    width: 220px;
+    height: 60px;
+    line-height: 19px;
+    margin: 0 auto 10px;
+    padding: 20px 10px 20px 60px;
+    box-shadow: 0 0 2px 0 rgba(0, 0, 0, .3);
+    text-align: left;
+
+    &::before {
+        .sprite;
+        content: '';
+        position: absolute;
+        left: 50px;
+        top: 18px;
+    }
+
+    &.catalog {
+        .c_4;
+        .bg_a;
+        .uppercase;
+        position: relative;
+        text-indent: 20px;
+
+        &:hover     { .bg_a_hover; }
+        &::before   {.sprite.catalog;}
+    }
+
+    &.distribution {
+        .bg_o;
+        display: none;
+        position: relative;
+    }
+    &.distribution::before {
+        .sprite.distribution;
+    }
+
+    &.support {
+        .bg_a;
+        position: relative;
+    }
+
+    &.support::before {
+        .sprite.support;
+
+    }
+}
+
+/* Dashboard (Non Catalog) */
+.i-sdc-left-sidebar-item {
+    list-style: none;
+    .m_14_r;
+    line-height: 24px;
+
+    &.category-title {
+        text-transform: uppercase;
+        .l_14_m;
+        line-height: 30px;
+    }
+
+    input[type="checkbox"] {
+        margin-right: 10px;
+        vertical-align: sub;
+    }
+
+    /*&.selectedLink {
+        .c_7;
+    }*/
+
+    .i-sdc-left-sidebar-item-state-count {
+        float: right;
+    }
+
+    .sdc-element-checkbox {
+        display: inline-flex;
+    }
+
+}
+
+.i-sdc-left-sidebar-item-seperator {
+    border-bottom: solid 1px @func_color_r;
+    width: 208px;
+}