summaryrefslogtreecommitdiffstats
path: root/openecomp-ui/resources/scss/modules
diff options
context:
space:
mode:
Diffstat (limited to 'openecomp-ui/resources/scss/modules')
-rw-r--r--openecomp-ui/resources/scss/modules/_entitlementPools.scss65
-rw-r--r--openecomp-ui/resources/scss/modules/_featureGroup.scss77
-rw-r--r--openecomp-ui/resources/scss/modules/_licenseAgreement.scss92
-rw-r--r--openecomp-ui/resources/scss/modules/_licenseKeyGroup.scss54
-rw-r--r--openecomp-ui/resources/scss/modules/_licenseModel.scss20
-rw-r--r--openecomp-ui/resources/scss/modules/_onboardingCatalog.scss164
-rw-r--r--openecomp-ui/resources/scss/modules/_softwareProductAttachmentPage.scss153
-rw-r--r--openecomp-ui/resources/scss/modules/_softwareProductComponentGeneral.scss10
-rw-r--r--openecomp-ui/resources/scss/modules/_softwareProductComponentNetwork.scss46
-rw-r--r--openecomp-ui/resources/scss/modules/_softwareProductCreatePage.scss39
-rw-r--r--openecomp-ui/resources/scss/modules/_softwareProductLandingPage.scss229
-rw-r--r--openecomp-ui/resources/scss/modules/_softwareProductNetworksPage.scss24
-rw-r--r--openecomp-ui/resources/scss/modules/_softwareProductProcessesPage.scss84
-rw-r--r--openecomp-ui/resources/scss/modules/_softwareproductComponentLoadBalancing.scss43
-rw-r--r--openecomp-ui/resources/scss/modules/_uploadScreen.scss46
-rw-r--r--openecomp-ui/resources/scss/modules/_vspComponentMonitoring.scss40
-rw-r--r--openecomp-ui/resources/scss/modules/_vspComponentQuestionnaire.scss54
-rw-r--r--openecomp-ui/resources/scss/modules/_workflows.scss43
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;
+ }
+ }
+}