1 files changed, 229 insertions, 0 deletions
diff --git a/openecomp-ui/resources/scss/modules/_softwareProductLandingPage.scss b/openecomp-ui/resources/scss/modules/_softwareProductLandingPage.scss
new file mode 100644
index 0000000000..e40bb38ea9
--- /dev/null
+++ b/openecomp-ui/resources/scss/modules/_softwareProductLandingPage.scss
@@ -0,0 +1,229 @@
+.upload-modal-body-content {
+  padding-left: 30px;
+  padding-right: 30px;
+  padding-bottom: 10px;
+  .title {
+    @extend .body-1-medium;
+  }
+  .file-name {
+    padding-left: 5px;
+    @extend .body-1-medium;
+  }
+}
+.software-product-view {
+  display: flex;
+  height:100%;
+
+  .description {
+    @extend .body-1;
+    overflow: hidden;
+    padding-right: 20px;
+    text-overflow: ellipsis;
+    display: -webkit-box;
+    -webkit-line-clamp: 2;
+    -webkit-box-orient: vertical;
+  }
+  .name {
+    @extend .body-1-medium;
+  }
+  .software-product-landing-view-right-side {
+    @extend .flex;
+    overflow-y: hidden;
+    .processes-page-title {
+      padding-top: 38px;
+      padding-left: 53px;
+      padding-bottom: 20px;
+    }
+    .list-editor-view {
+      .list-editor-view-title {
+        margin-bottom: 0;
+      }
+    }
+  }
+  .software-product-landing-view {
+    transition: border .2s;
+    padding-bottom: 50px;
+
+
+    .list-editor-view {
+      padding-top: 50px;
+      padding-left: 0;
+      padding-right: 0;
+    }
+    .software-product-landing-view-top {
+      .details-container {
+        @extend .flex-column;
+        .single-detail-section {
+          @extend  .flex-column;
+          &.title-section {
+            flex: 0.8;
+            @extend .heading-5-medium;
+          }
+        }
+        .multiple-details-section {
+          @extend .flex;
+          justify-content: space-between;
+          .detail-col {
+            .title {
+              &.extra-large {
+                min-width: 130px;
+              }
+            }
+          }
+        }
+      }
+      .row {
+        margin: 0;
+        display: flex;
+        .details-panel {
+          flex: 1;
+          margin-right: 50px;
+          &:last-child {
+            margin-right: 0;
+          }
+        }
+        .col-md-6 {
+          padding: 0;
+
+          overflow-wrap: break-word;
+          &:first-child {
+            padding-right: 25px;
+          }
+          &:last-child {
+            padding-left: 25px;
+          }
+        }
+        .title {
+          @extend .body-1-medium;
+        }
+        .software-product-landing-view-heading-title {
+          @extend .section-title;
+          color: $dark-gray;
+          padding-bottom: 20px;
+          &:first-child {
+            padding-bottom: 20px;
+          }
+        }
+        .software-product-landing-view-top-block {
+          cursor: pointer;
+          border: 1px solid $light-gray;
+          padding: 28px 28px;
+          height: 250px;
+          display: flex;
+          justify-content: space-between;
+          background-color: $white;
+          &:hover {
+            @extend .box-hover;
+          }
+          .col-md-6 {
+            @extend .body-1;
+          }
+          .software-product-landing-view-top-block-col {
+            @extend .body-1;
+            flex: 0.8;
+            display: flex;
+            justify-content: space-between;
+            flex-direction: column;
+            .description {
+              overflow: hidden;
+              padding-right: 20px;
+            }
+            .attachment-details {
+              padding-bottom: 10px;
+            }
+            .attachment-details-count {
+              color: $light-blue;
+            }
+          }
+          .software-product-landing-view-top-block-col-upl {
+            @extend .flex;
+            text-align: center;
+            flex-direction: column;
+            justify-content: center;
+            border: 2px dashed $light-gray;
+            @extend .body-1;
+            align-items: center;
+            .upload-btn {
+              padding: 15px 55px;
+
+            }
+            .drag-text {
+              color: $blue;
+              font-weight: bolder;
+            }
+            .or-text {
+              margin-top: 10px;
+              margin-bottom: 10px;
+            }
+          }
+        }
+      }
+    }
+  }
+}
+
+.vsp-details-page {
+  .vsp-general-tab {
+    .validation-form-content {
+      margin: 0;
+    }
+    .validation-buttons {
+      margin: 43px 0;
+      padding: 0 52px;
+    }
+    .section-title {
+      padding: 50px 0 30px 0;
+      &.general {
+        padding-top: 0;
+      }
+    }
+    .validation-form-content {
+      .vsp-general-tab-inline-section {
+        display: flex;
+        &.coupling-items {
+          justify-content: flex-start;
+          .validation-input-wrapper:not(:last-child) {
+            margin-right: 40px;
+          }
+        }
+        .vsp-general-tab-sub-section:not(:last-of-type) {
+          margin-right: 40px;
+        }
+        .field-section {
+          width: 440px;
+        }
+        .form-group textarea {
+          height: 192px;
+        }
+        select optgroup[label] {
+          color: $dark-blue;
+        }
+        option {
+          color: $dark-gray;
+        }
+        .Select, .input-options {
+          width: 440px;
+        }
+      }
+
+      .vsp-general-tab-section {
+        &.licenses {
+          >.vsp-general-tab-inline-section {
+            .validation-input-wrapper:first-child {
+              margin-right: 40px;
+            }
+          }
+        }
+      }
+    }
+    .validation-buttons {
+      position: fixed;
+      display: block;
+      bottom: 0;
+      width: 66%;
+    }
+    .validation-input-wrapper {
+      flex: none;
+    }
+  }
+}