Add new code new version

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

18 files changed, 1283 insertions, 0 deletions

diff --git a/openecomp-ui/resources/scss/modules/_entitlementPools.scss b/openecomp-ui/resources/scss/modules/_entitlementPools.scss
new file mode 100644
index 0000000000..df7cea4cd8
--- /dev/null
+++ b/openecomp-ui/resources/scss/modules/_entitlementPools.scss
@@ -0,0 +1,65 @@
+
+.entitlement-pools-list-editor {
+
+  .list-editor-view-list {
+    .list-editor-item-view {
+      min-height: 110px;
+      height: 110px;
+    }
+    .list-editor-item-view-field {
+
+      .entitlement-pools-count, .entitlement-parameters, .contract-number, .type{
+        color: $purple;
+      }
+      .entitlement-parameters {
+        @include ellipsis;
+        margin-bottom: 2px;
+      }
+      .entitlement-pools-count {
+        @extend .heading-1;
+        margin-top: -10px;
+
+      }
+    }
+  }
+}
+
+.entitlement-pools-modal {
+  .validation-form-content {
+    padding: 50px;
+  }
+  .modal-body {
+    padding: 0;
+  }
+  .entitlement-pools-form {
+    .tab-content {
+      padding: 50px;
+    }
+    .entitlement-pools-form-row {
+
+      display: flex;
+      justify-content: space-between;
+      & > * {
+        flex: 0 1 47%;
+      }
+      .validation-input-wrapper {
+        .form-group {
+          textarea {
+            height: 184px;
+          }
+          .entitlement-pools-form-row-threshold-value {
+            margin-top: 23px;
+            margin-left: 10px;
+            width: 189px;
+          }
+          .dropdown-multi-select .Select {
+            z-index: 1080;
+          }
+        }
+      }
+    }
+  }
+  .validation-buttons {
+    padding: 20px 50px;
+  }
+}
diff --git a/openecomp-ui/resources/scss/modules/_featureGroup.scss b/openecomp-ui/resources/scss/modules/_featureGroup.scss
new file mode 100644
index 0000000000..f66a01c290
--- /dev/null
+++ b/openecomp-ui/resources/scss/modules/_featureGroup.scss
@@ -0,0 +1,77 @@
+.feature-groups-list-editor {
+  .list-editor-view-list {
+    .list-editor-item-view {
+      min-height: 110px;
+      height: 110px;
+    }
+    .list-editor-item-view-field {
+      .feature-groups-count-field {
+        display: inline-block;
+        &:first-child {
+          margin-right: 95px;
+        }
+      }
+      .feature-groups-count-ep {
+        @extend .heading-1;
+        color: $light-blue;
+      }
+      .feature-groups-count-lk {
+        @extend .heading-1;
+        color: $light-green;
+      }
+    }
+  }
+}
+
+.feature-group-modal {
+  .modal-body {
+    padding: 0;
+  }
+  .feature-group-form {
+    .button-tab {
+      @extend .body-1-medium;
+      color: $dark-gray;
+      padding: 6px;
+      border: 0;
+      background-color: $white;
+      box-shadow: none;
+      &:first-child {
+        margin-right: 28px;
+      }
+      &.active, &:hover {
+        color: $text-black;
+        border-bottom: 2px solid $blue;
+      }
+    }
+    .no-items-msg {
+      margin-top: 55px;
+      color: $dark-gray;
+    }
+    .tab-content {
+      padding: 50px;
+      .field-section {
+        @extend .body-2-medium;
+        margin-bottom: 23px;
+        width: 400px;
+        color: $black;
+      }
+      .description-field {
+        height: 170px;
+      }
+      .list-editor-item-view-content {
+        white-space: nowrap;
+        overflow: hidden;
+        > div {
+          overflow: hidden;
+          text-overflow: ellipsis;
+          &:not(:last-of-type) {
+            margin-right: 24px;
+          }
+        }
+      }
+    }
+    .validation-buttons {
+      padding: 20px 50px;
+    }
+  }
+}
diff --git a/openecomp-ui/resources/scss/modules/_licenseAgreement.scss b/openecomp-ui/resources/scss/modules/_licenseAgreement.scss
new file mode 100644
index 0000000000..a7afd01cc5
--- /dev/null
+++ b/openecomp-ui/resources/scss/modules/_licenseAgreement.scss
@@ -0,0 +1,92 @@
+
+.license-agreement-list-editor {
+
+  .list-editor-view-list {
+    .list-editor-item-view {
+      min-height: 110px;
+      height: 110px;
+    }
+    .list-editor-item-view-field {
+      .list-editor-item-view-field-tight {
+        vertical-align: top;
+        display: inline-block;
+        &:first-child {
+          @include ellipsis;
+          margin-right: 95px;
+          width: 20%;
+          overflow-wrap: break-word;
+        }
+      }
+      .feature-groups-count, .contract-number, .type {
+        color: $light-green;
+      }
+      .feature-groups-count {
+        @extend .heading-1;
+        padding-top: 2px;
+        text-align: center;
+      }
+      .contract-number {
+        margin-bottom: 8px;
+      }
+    }
+  }
+}
+
+.license-agreement-modal {
+  .modal-body {
+    padding: 0;
+  }
+  .license-agreement-form {
+      .button-tab{
+        @extend .body-1-medium;
+        color: $dark-gray;
+        padding: 6px;
+        border: 0;
+        background-color: $white;
+        box-shadow: none;
+        &:first-child {
+          margin-right: 28px;
+        }
+        &.active, &:hover {
+          color: $text-black;
+          border-bottom: 2px solid $blue;
+        }
+      }
+    .no-items-msg {
+      margin-top: 55px;
+      color: $dark-gray;
+    }
+    .tab-content {
+      padding: 50px;
+      .list-editor-item-view-content {
+        white-space: nowrap;
+        overflow: hidden;
+        > div {
+          overflow: hidden;
+          text-overflow: ellipsis;
+          &:not(:last-of-type) {
+            margin-right: 24px;
+          }
+        }
+      }
+    }
+    .license-agreement-form-row {
+      display: flex;
+      justify-content: space-between;
+      .license-agreement-form-col {
+        flex: 0 1 45%;
+      }
+      .validation-input-wrapper {
+        flex: 0 1 45%;
+        .form-group {
+          textarea {
+            height: 100px;
+          }
+        }
+      }
+    }
+    .validation-buttons {
+      padding: 20px 50px;
+    }
+  }
+}
diff --git a/openecomp-ui/resources/scss/modules/_licenseKeyGroup.scss b/openecomp-ui/resources/scss/modules/_licenseKeyGroup.scss
new file mode 100644
index 0000000000..19b4792949
--- /dev/null
+++ b/openecomp-ui/resources/scss/modules/_licenseKeyGroup.scss
@@ -0,0 +1,54 @@
+.license-key-groups-list-editor {
+  .list-editor-view-list {
+    .list-editor-item-view {
+      min-height: 110px;
+      height: 110px;
+    }
+    .list-editor-item-view-field {
+
+      .operational-scope, .type {
+        color: $orange;
+      }
+      .operational-scope {
+        margin-bottom: 0px;
+        @include ellipsis;
+      }
+    }
+  }
+}
+
+.license-key-groups-modal {
+  .modal-body {
+    padding: 0;
+  }
+  .license-key-groups-form {
+    .validation-form-content {
+      padding: 50px;
+      .field-section {
+        @extend .body-2-medium;
+        margin-bottom: 23px;
+        width: 400px;
+        color: $black;
+      }
+      .license-key-groups-form-row {
+        display: flex;
+        justify-content: space-between;
+        .options-input-form-row {
+          width: 370px;
+        }
+        .validation-input-wrapper {
+          flex: 0 1 45%;
+          .form-group {
+            textarea {
+              height: 100px;
+            }
+
+          }
+        }
+      }
+    }
+    .validation-buttons {
+      padding: 20px 50px;
+    }
+  }
+}
diff --git a/openecomp-ui/resources/scss/modules/_licenseModel.scss b/openecomp-ui/resources/scss/modules/_licenseModel.scss
new file mode 100644
index 0000000000..6912e19bcd
--- /dev/null
+++ b/openecomp-ui/resources/scss/modules/_licenseModel.scss
@@ -0,0 +1,20 @@
+.license-model-type-modal {
+  .modal-body {
+    padding: 0;
+  }
+  .validation-form-content {
+    padding: 50px;
+    .field-section {
+      @extend .body-2-medium;
+      margin-bottom: 23px;
+      width: 400px;
+      color: $black;
+    }
+    textarea {
+      height: 107px;
+    }
+  }
+  .validation-buttons {
+    padding: 20px 50px;
+  }
+}
diff --git a/openecomp-ui/resources/scss/modules/_onboardingCatalog.scss b/openecomp-ui/resources/scss/modules/_onboardingCatalog.scss
new file mode 100644
index 0000000000..6020866d4a
--- /dev/null
+++ b/openecomp-ui/resources/scss/modules/_onboardingCatalog.scss
@@ -0,0 +1,164 @@
+$transitionLength: 0.6s;
+
+.catalog-view {
+  background-color: $background-gray;
+  height: 100%;
+  overflow: hidden;
+  height: 100%;
+  .catalog-header {
+    padding-top: 20px;
+    margin: 0 48px 0 20px;
+    border-bottom: 1px solid $light-gray;
+    display: flex;
+    flex-direction: row;
+    justify-content: space-between;
+    .catalog-header-title {
+      @extend .heading-2;
+      margin: 0 0 10px 0;
+    }
+    .expandable-input-wrapper {
+      margin: 0 0 10px 0;
+    }
+  }
+  .catalog-list {
+    max-height: 100%;
+    overflow: auto;
+    display: flex;
+    flex-wrap: wrap;
+    padding: 40px 10px 0 10px;
+    &:after {
+      content: ' ';
+      display:block;
+      width: 100%;
+      height: 85px;
+    }
+    .tile {
+      background-color: $white;
+      margin: 10px;
+      width: 214px;
+      height: 210px;
+      display: flex;
+      flex-direction: column;
+
+    }
+    .create-catalog-item {
+      border: 2px dashed $light-gray;
+      background-color: transparent;
+      &:hover {
+        .plus-section {
+          display: none;
+        }
+        .primary-btn {
+          display: inherit;
+        }
+      }
+      justify-content: center;
+      .plus-section {
+        align-self: center;
+        display: flex;
+        flex-direction: column;
+        .plus-icon-button {
+          align-self: center;
+          background-size: 23px;
+          width: 23px;
+          height: 23px;
+          margin-bottom: 4px;
+        }
+      }
+      .primary-btn {
+        display: none;
+        width: 176px;
+        &.new-license-model {
+          margin-bottom: 18px;
+        }
+        &:hover {
+          background-color: $background-alice-blue;
+        }
+      }
+    }
+    .catalog-tile {
+      cursor: pointer;
+      border: 1px solid $tlv-light-gray;
+      &:hover {
+        @include box-shadow(3px 3px 5px 0 rgba(24,24,25,.04));
+      }
+      &:active {
+        border: 1px solid $light-blue;
+      }
+      .catalog-tile-type {
+        padding-top: 7px;
+        border-radius: 50%;
+        width: 40px;
+        height: 40px;
+        background: white;
+        border: 4px solid #F2F2F2;
+        position: relative;
+        top: -12px;
+        left: -7px;
+        &:before {
+          @extend .body-1;
+          color: $light-blue;
+        }
+        &.license-model-type {
+          padding-left: 13px;
+          &:before {
+            content: "L"
+          }
+        }
+        &.software-product-type {
+          padding-left: 8px;
+          &:before {
+            content: "SP"
+          }
+        }
+      }
+      .catalog-tile-icon {
+        text-align: center;
+        flex-basis: 60%;
+        justify-content: center;
+        background-size: 60px 60px;
+        background-repeat: no-repeat;
+        background-position: center;
+        display: flex;
+        .icon {
+          align-self: center;
+          height: 65px;
+          width: 65px;
+          background-repeat: no-repeat;
+          margin-bottom: 27px;
+          &.license-model-type-icon {
+            background-image: url('../images/onboarding/vendor-license-model.svg');
+          }
+          &.software-product-type-icon {
+            background-image: url('../images/onboarding/vendor-software-product.svg');
+          }
+        }
+      }
+      .catalog-tile-content {
+        border-top: 1px solid $background-gray;
+        flex-basis: 30%;
+        padding: 8px;
+        display: flex;
+        justify-content: space-between;
+        .catalog-tile-item-details {
+          overflow: hidden;
+        }
+        .catalog-tile-item-name {
+          @extend .body-1-medium;
+          @include ellipsis();
+          width: 150px;
+          color: $dark-gray
+        }
+        .catalog-tile-item-version {
+          @extend .body-1;
+          color: $gray;
+        }
+        .catalog-tile-check-in-status {
+          width: 25px;
+          height: 19px;
+          align-self: center;
+        }
+      }
+    }
+  }
+}
diff --git a/openecomp-ui/resources/scss/modules/_softwareProductAttachmentPage.scss b/openecomp-ui/resources/scss/modules/_softwareProductAttachmentPage.scss
new file mode 100644
index 0000000000..657bb544a7
--- /dev/null
+++ b/openecomp-ui/resources/scss/modules/_softwareProductAttachmentPage.scss
@@ -0,0 +1,153 @@
+.software-product-attachments {
+  @extend .body-1;
+  width: 100%;
+  height: 100%;
+  display: flex;
+
+  .software-product-attachments-tree {
+    display: flex;
+    border-right: 1px solid $light-gray;
+    margin: 0px;
+    padding: 5px 3px 10px 3px;
+    overflow: auto;
+    height: 100%;
+
+    .tree-wrapper {
+      flex: 1 1;
+      position: relative;
+      padding-bottom: 10px;
+
+      .tree-block-inside {
+        padding-left: 17px;
+        padding-top: 8px;
+        padding-bottom: 1px;
+        .tree-node-row {
+          cursor: default;
+          white-space: nowrap;
+          &.tree-node-selected::before {
+            position: absolute;
+            left: 0;
+            right: 0;
+            height: 20px;
+            display: inline-block;
+            content: ' ';
+            background-color: $light-gray;
+          }
+
+          &.tree-node-clicked::before {
+            position: absolute;
+            left: 4px;
+            right: 4px;
+            height: 20px;
+            display: inline-block;
+            content: ' ';
+            font-weight: bold;
+            background-color: $white;
+          }
+
+          .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;
+    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;
+    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;
+      }
+      .error-item-file-type {
+        margin-right: 5px;
+        &.strong {
+          font-weight: bold;
+        }
+        &.ERROR {
+          color: $red;
+        }
+        &.WARNING {
+          color: $yellow;
+        }
+      }
+    }
+
+    .error-item:hover {
+      cursor: default;
+      background-color: $tlv-hover;
+    }
+  }
+
+}
diff --git a/openecomp-ui/resources/scss/modules/_softwareProductComponentGeneral.scss b/openecomp-ui/resources/scss/modules/_softwareProductComponentGeneral.scss
new file mode 100644
index 0000000000..4ff2d2c14a
--- /dev/null
+++ b/openecomp-ui/resources/scss/modules/_softwareProductComponentGeneral.scss
@@ -0,0 +1,10 @@
+.vsp-components-general {
+  .general-data {
+    .one-line-textarea {
+      height: 30px;
+    }
+  }
+  .additional-validation-form {
+    margin-top: 50px;
+  }
+}
diff --git a/openecomp-ui/resources/scss/modules/_softwareProductComponentNetwork.scss b/openecomp-ui/resources/scss/modules/_softwareProductComponentNetwork.scss
new file mode 100644
index 0000000000..6097f3ef52
--- /dev/null
+++ b/openecomp-ui/resources/scss/modules/_softwareProductComponentNetwork.scss
@@ -0,0 +1,46 @@
+.vsp-components-network {
+  .network-data {
+    .network-data-title {
+      @extend .body-2-medium;
+      padding-bottom: 20px;
+      padding-left: 15px;
+    }
+    .single-col {
+      .validation-input-wrapper {
+        label {
+          max-width: 230px;
+        }
+      }
+    }
+  }
+  .list-editor-view {
+    margin-top: 50px;
+  }
+}
+.network-nic-modal {
+  .modal-body {
+    padding: 0;
+  }
+  .vsp-components-network-editor {
+    .editor-data {
+      padding-left: 50px;
+      padding-right: 50px;
+      padding-top: 20px;
+      height: 500px;
+      overflow-y: auto;
+      .part-title {
+        @extend .heading-5;
+        padding-bottom: 10px;
+        padding-left: 14px;
+      }
+      .part-title-small {
+        @extend .heading-3;
+        padding-bottom: 10px;
+        padding-left: 14px;
+      }
+      .network-radio label {
+        font-size: 15px;
+      }
+    }
+  }
+}
diff --git a/openecomp-ui/resources/scss/modules/_softwareProductCreatePage.scss b/openecomp-ui/resources/scss/modules/_softwareProductCreatePage.scss
new file mode 100644
index 0000000000..deac736cfa
--- /dev/null
+++ b/openecomp-ui/resources/scss/modules/_softwareProductCreatePage.scss
@@ -0,0 +1,39 @@
+.software-product-type-modal {
+  .modal-dialog {
+    @extend .modal-lg !optional;
+    .modal-body {
+      padding: 0;
+    }
+    .validation-form-content {
+      padding: 50px;
+      .software-product-form-row {
+        display: flex;
+        justify-content: space-between;
+        margin-bottom: 20px;
+        .software-product-inline-section {
+          padding: 0 20px;
+          flex: 45%;
+          .validation-input-wrapper {
+            .field-section {
+              @extend .body-2-medium;
+              margin-bottom: 23px;
+              color: $black;
+            }
+            textarea {
+              height: 191px;
+            }
+            select optgroup[label] {
+              color: $dark-blue;
+            }
+            option {
+              color: black;
+            }
+          }
+        }
+      }
+    }
+    .validation-buttons {
+      padding: 20px 50px;
+    }
+  }
+}
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;
+    }
+  }
+}
diff --git a/openecomp-ui/resources/scss/modules/_softwareProductNetworksPage.scss b/openecomp-ui/resources/scss/modules/_softwareProductNetworksPage.scss
new file mode 100644
index 0000000000..780f348374
--- /dev/null
+++ b/openecomp-ui/resources/scss/modules/_softwareProductNetworksPage.scss
@@ -0,0 +1,24 @@
+.vsp-networks {
+  .wrapper {
+    display: flex;
+    height: 100%;
+    .left-side{
+      height:100%
+    }
+    .right-side {
+      width:100%;
+      .network-data {
+        padding-left: 60px;
+        padding-right: 60px;
+        padding-top: 18px;
+        .network-data-title {
+          @extend .body-2-medium;
+          padding-bottom: 20px;
+          padding-left: 15px;
+        }
+      }
+
+    }
+  }
+}
+
diff --git a/openecomp-ui/resources/scss/modules/_softwareProductProcessesPage.scss b/openecomp-ui/resources/scss/modules/_softwareProductProcessesPage.scss
new file mode 100644
index 0000000000..167dad92e2
--- /dev/null
+++ b/openecomp-ui/resources/scss/modules/_softwareProductProcessesPage.scss
@@ -0,0 +1,84 @@
+.edit-process-modal {
+  background-color: $white;
+  height: 100%;
+  &.modal-body {
+    padding: 0;
+    background-color: $white;
+  }
+  .vsp-processes-editor {
+    padding-left: 0;
+    padding-right: 0;
+    .editor-title {
+      @extend .heading-2;
+      color: $dark-gray;
+      padding-bottom: 50px;
+    }
+    .file-upload-box {
+      @extend .body-1;
+      display: flex;
+      text-align: center;
+      flex-direction: column;
+      justify-content: center;
+      border: 2px dashed $light-gray;
+      padding-top: 20px;
+      padding-bottom: 20px;
+
+      align-items: center;
+      .upload-btn {
+        padding: 20px;
+        padding-top: 7px;
+        padding-bottom: 3px;
+      }
+      .drag-text {
+        color: $blue;
+        font-weight: bolder;
+      }
+      .or-text {
+        margin-top: 10px;
+        margin-bottom: 10px;
+      }
+    }
+    .vsp-processes-editor-data {
+      padding: 28px 54px;
+      transition: border .2s;
+      .vsp-process-dropzone-view {
+        background-color: transparent;
+        padding: 15px;
+        &.active-dragging {
+          border: 3px dashed $dark-blue;
+          border-radius: 20px;
+          .draggable-wrapper {
+            opacity: 0.5;
+          }
+        }
+      }
+      .validation-input-wrapper {
+        .form-group {
+          .vsp-process-description {
+            height: 200px;
+          }
+        }
+      }
+    }
+  }
+}
+
+.vsp-processes-page {
+  .processes-list {
+    @extend .flex-column;
+  }
+  .list-editor-view {
+    .list-editor-view-list {
+      .list-editor-item-view {
+        .list-editor-item-view-content {
+          .list-editor-item-view-field {
+            .artifact-name {
+              @extend .body-1;
+              color: $light-green;
+            }
+          }
+        }
+      }
+    }
+  }
+}
diff --git a/openecomp-ui/resources/scss/modules/_softwareproductComponentLoadBalancing.scss b/openecomp-ui/resources/scss/modules/_softwareproductComponentLoadBalancing.scss
new file mode 100644
index 0000000000..731ab89571
--- /dev/null
+++ b/openecomp-ui/resources/scss/modules/_softwareproductComponentLoadBalancing.scss
@@ -0,0 +1,43 @@
+.vsp-components-load-balancing {
+  .halb-data {
+    .load-balancing-page-title {
+      @extend .section-title;
+      &:first-child {
+        padding: 0 0 40px 0;
+      }
+    }
+    .question {
+      padding-top: 10px;
+      &:first-child {
+        padding-top: 0;
+      }
+    }
+    .title {
+      @extend .body-1-medium;
+      cursor: pointer;
+      margin-bottom: 8px;
+      .fa {
+        @include transition(transform 0.3s);
+        margin-right: 5px;
+        font-size: $icon-font-size;
+        position: relative;
+        top: -1px;
+      }
+    }
+    .row {
+      padding-left: 24px;
+    }
+    .col-md-9 {
+      padding-left: 8px;
+    }
+    .add-padding {
+      padding-bottom: 20px;
+    }
+    .new-line {
+      margin-left: 16px;
+    }
+    textarea.form-control {
+      height: 90px;
+    }
+  }
+}
diff --git a/openecomp-ui/resources/scss/modules/_uploadScreen.scss b/openecomp-ui/resources/scss/modules/_uploadScreen.scss
new file mode 100644
index 0000000000..4aa07f1580
--- /dev/null
+++ b/openecomp-ui/resources/scss/modules/_uploadScreen.scss
@@ -0,0 +1,46 @@
+.heat-validation-stand-alone {
+  .upload-screen {
+    margin-top: 100px;
+    .title {
+      text-align: center;
+      margin-bottom: 50px;
+    }
+    .upload-screen-upload-block {
+      text-align: center;
+      padding: 50px;
+      border: 2px dashed lightgray;
+    }
+    .upload-screen-drop-zone {
+      &.active-dragging {
+        border: 3px dashed $dark-blue;
+        border-radius: 20px;
+        .draggable-wrapper {
+          opacity: 0.5;
+        }
+      }
+    }
+  }
+
+  .attachments-screen {
+    .back-button {
+      z-index: 1000;
+      position: absolute;
+      top: 20px;
+      right: 20px;
+      width: 200px;
+    }
+    .software-product-attachments {
+      display: block;
+      .software-product-view {
+        display: block;
+        .software-product-landing-view-right-side {
+          display: block;
+          .software-product-attachments-main {
+            display: flex;
+            height: 100vh;
+          }
+        }
+      }
+    }
+  }
+}
diff --git a/openecomp-ui/resources/scss/modules/_vspComponentMonitoring.scss b/openecomp-ui/resources/scss/modules/_vspComponentMonitoring.scss
new file mode 100644
index 0000000000..c49e4f551d
--- /dev/null
+++ b/openecomp-ui/resources/scss/modules/_vspComponentMonitoring.scss
@@ -0,0 +1,40 @@
+
+.vsp-component-monitoring {
+  .snmp-dropzone {
+    .section-title {
+      padding-bottom: 20px;
+    }
+    &:first-child {
+      padding-bottom: 50px;
+    }
+    .software-product-landing-view-top-block-col-upl {
+      @extend .body-1;
+      width: 400px;
+      display: flex;
+      text-align: center;
+      flex-direction: column;
+      justify-content: center;
+      border: 2px dashed $light-gray;
+      padding: 25px 0;
+      align-items: center;
+      .upload-btn {
+        padding: 20px;
+        padding-top: 7px;
+        padding-bottom: 3px;
+      }
+      .drag-text {
+        color: $blue;
+        font-weight: bolder;
+      }
+      .or-text {
+        margin-top: 10px;
+        margin-bottom: 10px;
+      }
+    }
+
+  }
+
+  .delete-button {
+    min-width: 0;
+  }
+}
diff --git a/openecomp-ui/resources/scss/modules/_vspComponentQuestionnaire.scss b/openecomp-ui/resources/scss/modules/_vspComponentQuestionnaire.scss
new file mode 100644
index 0000000000..aad628aac8
--- /dev/null
+++ b/openecomp-ui/resources/scss/modules/_vspComponentQuestionnaire.scss
@@ -0,0 +1,54 @@
+
+.vsp-component-questionnaire-view {
+  input[type='radio'], input[type='checkbox'] {
+    &:before {
+      border: 1px solid $dark-gray;
+      cursor: pointer;
+    }
+    &:checked:before {
+      border: 1px solid $blue;
+    }
+  }
+  .component-questionnaire-validation-form {
+
+
+    .section-sub-title {
+      @extend .heading-5;
+      padding-bottom: 10px;
+    }
+    .section-field {
+      textarea {
+        height: 80px;
+      }
+    }
+
+    .rows-section {
+      .row-flex-components {
+        display: flex;
+      }
+
+      .vertical-flex {
+        flex-direction: column;
+        .control-label {
+          @extend .body-2-medium;
+        }
+        .radio-options-content-row {
+          display: flex;
+          margin-top: -4px;
+          .validation-input-wrapper {
+            width: 240px;
+            margin-right: 7px;
+
+            & > .form-group {
+              display: flex;
+            }
+            .form-group .radio {
+              width: auto;
+              margin-right: 0;
+            }
+          }
+        }
+      }
+    }
+  }
+}
diff --git a/openecomp-ui/resources/scss/modules/_workflows.scss b/openecomp-ui/resources/scss/modules/_workflows.scss
new file mode 100644
index 0000000000..c1555df28c
--- /dev/null
+++ b/openecomp-ui/resources/scss/modules/_workflows.scss
@@ -0,0 +1,43 @@
+
+.workflows {
+  position: absolute;
+  bottom: 0;
+  right: 0;
+  left: 0;
+  top: 0;
+
+  background-color: $background-gray;
+  .list-editor-view-list .list-editor-item-view .list-editor-item-view-content .list-editor-item-view-field:last-child {
+    flex: 2 1;
+  }
+
+  .list-editor-view {
+    padding: 30px 50px;
+  }
+
+}
+
+.workflows-editor-modal {
+  .modal-body {
+    padding: 0;
+  }
+  .validation-form-content {
+    padding: 15px;
+  }
+}
+
+.sequence-diagram {
+  position: absolute;
+  bottom: 0;
+  right: 0;
+  left: 0;
+  top: 0;
+
+  padding-bottom: 20px;
+  .sequence-diagram-action-buttons {
+    display: flex;
+    button {
+      margin: 20px;
+    }
+  }
+}