1 files changed, 124 insertions, 0 deletions
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;
+        }
+    }
+
+}