1 files changed, 148 insertions, 0 deletions
diff --git a/catalog-ui/app/scripts/view-models/component-viewer/component-viewer.less b/catalog-ui/app/scripts/view-models/component-viewer/component-viewer.less
new file mode 100644
index 0000000000..2fe5676d62
--- /dev/null
+++ b/catalog-ui/app/scripts/view-models/component-viewer/component-viewer.less
@@ -0,0 +1,148 @@
+html .modal-component-viewer{
+    width: 1084px;
+}
+
+.w-sdc-resource-viewer {
+    .b_7;
+    .w-sdc-resource-viewer-modal-close{
+        z-index: 2;
+        text-indent: -100px;
+        overflow: hidden;
+        top: 19px;
+    }
+    .w-sdc-resource-viewer-content {
+        position: relative;
+        overflow: hidden;
+
+        .w-sdc-resource-viewer-left {
+
+            .bg_j;
+            display: table-cell;
+            width: 282px;
+
+            .w-sdc-resource-viewer-left-title {
+                margin: 0;
+                display: block;
+                height: 100px;
+                padding: 20px 0;
+            }
+
+            .w-sdc-resource-viewer-left-title-icon {
+                margin: 0 15px;
+                vertical-align: middle;
+                float: left;
+            }
+
+            .w-sdc-resource-viewer-left-title-name {
+                .g_7;
+                max-width: 160px;
+                overflow: hidden;
+                display: inline-block;
+                text-overflow: ellipsis;
+                vertical-align: middle;
+                line-height: 23px;
+                padding-top: 10px;
+                font-weight: bold;
+                white-space: nowrap;
+            }
+
+            .w-sdc-resource-viewer-left-title-version {
+                .g_13;
+                float: left;
+            }
+
+            .w-sdc-resource-viewer-left-title-uuid {
+                .g_14;
+                text-align: center;
+                border-top: 1px solid rgba(120, 136, 148, 0.26);
+                width: 95%;
+                margin: auto;
+                padding: 7px 0;
+            }
+
+            .w-sdc-resource-viewer-leftbar-section {
+                font-family: omnes-medium, sans-serif;
+            }
+
+            .w-sdc-resource-viewer-leftbar-section-title {
+                .bg_o;
+                color: #fff;
+                font-size: 14px;
+                padding: 12px 20px;
+                text-transform: uppercase;
+            }
+
+            .w-sdc-resource-viewer-leftbar-section-structure{
+                .perfect-scrollbar;
+                max-height: 525px;
+            }
+            .w-sdc-resource-viewer-version {
+                font-weight: bold;
+                .perfect-scrollbar;
+            }
+
+            .i-sdc-resource-viewer-version-container {
+                padding: 13px 0px 13px 13px;
+                max-height: 218px;
+
+                .i-sdc-resource-viewer-version-item {
+
+                    &.active {
+                        .a_7;
+                    }
+                    &:hover {
+                        cursor: pointer;
+                    }
+                }
+
+            }
+        }
+
+        .w-sdc-resource-viewer-right {
+            .bg_c;
+            display: table-cell;
+            vertical-align: top;
+            padding: 0; // for the scroller to be on all width
+            width: 716px;
+            padding: 25px 0px 0px 35px;
+
+            .w-sdc-resource-viewer-right-content {
+                padding: 0 52px 0 0px;
+                margin-bottom: 25px;
+                height: 700px;
+                overflow: hidden;
+                position: relative;
+
+            }
+
+            .w-sdc-resource-viewer-right-tab {
+                .b_6;
+
+                .hand;
+                background-color: transparent;
+                position: relative;
+                font-weight: 500;
+                line-height: 30px;
+                border: none;
+                border-bottom: solid 1px @color_c;
+                vertical-align: middle;
+                padding: 0px 30px 20px 0px;
+
+
+                &:focus,
+                &:active {
+                    outline: none;
+
+                }
+                &.selected {
+                    outline: none;
+                    font-weight: 700;
+                    .font-color.a;
+                }
+            }
+
+
+        }
+
+    }
+}