[SDC-29] Amdocs OnBoard 1707 initial commit.

Change-Id: Ie4d12a3f574008b792899b368a0902a8b46b5370
Signed-off-by: AviZi <avi.ziv@amdocs.com>

1 files changed, 184 insertions, 100 deletions

diff --git a/openecomp-ui/resources/scss/modules/_softwareProductAttachmentPage.scss b/openecomp-ui/resources/scss/modules/_softwareProductAttachmentPage.scss
index 657bb544a7..37068975a2 100644
--- a/openecomp-ui/resources/scss/modules/_softwareProductAttachmentPage.scss
+++ b/openecomp-ui/resources/scss/modules/_softwareProductAttachmentPage.scss
@@ -1,153 +1,237 @@
-.software-product-attachments {
+
+.vsp-attachments-view {
+  position: relative;
+	#attachments-tabs {
+		.nav-tabs {
+			background-color: $tlv-gray;
+			box-shadow: none;
+			border-bottom: 1px solid $light-gray;
+			& > li {
+				& > a {
+					font-size: 24px;
+					font-weight: lighter;
+					padding-left: 0;
+					padding-right: 0;
+					margin-right: 40px;
+				};
+				&.active > a {color: $blue;};
+			}
+		}
+	}
+  .attachments-view-controllers {
+    position: absolute;
+    right: 40px;
+    top: 15px;
+		display: flex;
+		.icon-label {
+			color: $dark-gray;
+		}
+
+		.go-to-overview-icon {
+			.icon-label {
+				color: $blue;
+			}
+			&.disabled {
+				.icon-label {
+					color: $gray;
+				}
+			}
+		}
+
+    .icon-component {
+      margin-right: 30px;
+
+    }
+
+    input[type="file"] {
+      visibility: hidden;
+      width: 1px;
+      padding: 0;
+      margin-left: -1px;
+    }
+  }
+}
+
+.vsp-attachments-heat-validation {
   @extend .body-1;
-  width: 100%;
-  height: 100%;
   display: flex;
-
-  .software-product-attachments-tree {
+  .svg-icon.exclamation-triangle-line {
+    fill: $orange;
+    width: 15px;
+    height: 15px;
+    &.large {
+      width: 20px;
+      height: 20px;
+    }
+  }
+  .validation-tree-section {
     display: flex;
-    border-right: 1px solid $light-gray;
-    margin: 0px;
-    padding: 5px 3px 10px 3px;
+    width: 400px;
+    justify-content: space-between;
+  }
+  .vsp-attachments-heat-validation-tree {
+    @extend .flex-column;
+    margin: 0;
     overflow: auto;
     height: 100%;
-
+    .attachments-tree-header {
+      display: flex;
+      justify-content: space-between;
+      height: 55px;
+      align-items: center;
+      &.header-selected {
+        background: $tlv-gray;
+      }
+      .header-icon {
+        top: -3px;
+        position: relative;
+        margin-left: 20px;
+      }
+      .tree-header-title-text {
+        @extend .heading-4-medium;
+        padding-left: 32px;
+        cursor: pointer;
+        &.tree-header-title-selected{
+          color: $blue;
+        }
+      }
+      .tree-header-title {
+        display: flex;
+      }
+    }
+    .counters {
+      display: flex;
+      justify-content: space-between;
+      z-index: 1;
+      padding-right: 20px;
+      .counter {
+        display: flex;
+        &:first-child {
+          margin-right: 20px;
+        }
+        &:only-child {
+          margin-right: 0;
+        }
+        .svg-icon-wrapper {
+          margin-right: 5px;
+        }
+        .counter-icon {
+          margin-right: 5px;
+        }
+        .error-text, .warning-text {
+          @extend .body-3;
+          &.large {
+            @extend .heading-4-medium;
+          }
+        }
+      }
+    }
     .tree-wrapper {
       flex: 1 1;
       position: relative;
       padding-bottom: 10px;
 
+      @-moz-document url-prefix() {
+        .tree-block-inside {
+          top: 0;
+          position: relative;
+        }
+      }
       .tree-block-inside {
-        padding-left: 17px;
-        padding-top: 8px;
-        padding-bottom: 1px;
+        padding-left: 20px;
         .tree-node-row {
           cursor: default;
           white-space: nowrap;
-          &.tree-node-selected::before {
+          display: flex;
+          justify-content: space-between;
+          height: 40px;
+          align-items: center;
+          .svg-icon.chevron-down, .svg-icon.chevron-up {
+            height: 10px;
+            width: 10px;
+          }
+
+          &:after {
+            border-top: 1px solid $tlv-gray;
+            height: 40px;
             position: absolute;
             left: 0;
             right: 0;
-            height: 20px;
-            display: inline-block;
             content: ' ';
-            background-color: $light-gray;
           }
-
-          &.tree-node-clicked::before {
+          @-moz-document url-prefix() {
+            &:after {
+              top: 0;
+            }
+          }
+          &.tree-node-selected::before {
             position: absolute;
-            left: 4px;
-            right: 4px;
+            left: 0;
+            right: 0;
             height: 20px;
             display: inline-block;
             content: ' ';
-            font-weight: bold;
-            background-color: $white;
+            background-color: $tlv-gray;
+            color: $blue;
           }
 
+          &.tree-node-clicked {
+            color: $blue;
+            &:after {
+              background: $tlv-gray;
+              height: 40px;
+              position: absolute;
+              left: 0;
+              right: 0;
+              content: ' ';
+            }
+          }
+          .tree-node-name {
+            cursor: pointer;
+          }
+          .name-section {
+            z-index: 1;
+            flex: 1;
+            @include ellipsis(auto);
+          }
           .tree-node-expander {
             position: relative;
             display: inline-block;
             cursor: pointer;
-            .fa {
-              position: absolute;
-              left: -7px;
-              top: -11px;
-              @include transition(transform 0.3s);
-            }
-            &.tree-node-expander-collapsed .fa {
-              @include transform-rotate(-90);
-            }
           }
-
           .tree-node-icon {
             margin: 0 7px;
-            color: $text-black;
-            opacity: .5;
-            .tree-node-validation-error::after {
-              content: "!";
-              font-weight: bold;
-              position: absolute;
-              color: $red;
-              font-size: large;
-              left: -7px;
-              bottom: -5px;
-            }
-          }
-
-          .error-status {
-            color: $red;
-            &.error-status-selected {
-              font-weight: bold;
-            }
-            &.error-status-hovered {
-              font-weight: bold;
-              background-color: $blue;
-            }
-          }
-
-          .tree-element-text {
-            @extend %noselect;
-            position: relative;
-            padding-right: 5px;
-            &.error-status-selected {
-              font-weight: bold;
-            }
           }
         }
-
       }
     }
   }
-  .software-product-attachments-separator {
-    border: 1px solid $tlv-light-gray;
+  .vsp-attachments-heat-validation-separator {
+    border-left: 1px solid $tlv-light-gray;
     height: 100%;
     width: 5px;
     cursor: e-resize;
   }
 
-  .software-product-attachments-error-list {
-    text-align: center;
-    margin-top: 12px;
-    display: flex;
-    align-content: flex-start;
-    flex-direction: column;
-    padding-left: 70px;
-    padding-right: 50px;
+  .message-board-section {
+    @extend .flex-column;
+    padding-left: 25px;
+    padding-top: 10px;
+    padding-right: 60px;
     overflow: auto;
     margin-bottom: 70px;
     .error-item {
-      &.selected {
-        background-color: $light-gray;
-      }
-      &.clicked {
-        color: $blue;
-      }
-      &.shifted {
-        margin-top: 20px;
-      }
-      text-align: left;
-      .error-item-file-name {
-        font-weight: bold;
-      }
+      display: flex;
+      margin: 10px 0;
       .error-item-file-type {
+        margin-left: 15px;
+      }
+      .error-file-name {
+        @extend .body-1-medium;
         margin-right: 5px;
-        &.strong {
-          font-weight: bold;
-        }
-        &.ERROR {
-          color: $red;
-        }
-        &.WARNING {
-          color: $yellow;
-        }
       }
     }
 
-    .error-item:hover {
-      cursor: default;
-      background-color: $tlv-hover;
-    }
   }
 
 }