diff options
Diffstat (limited to 'openecomp-ui/resources/scss/modules')
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; + } + } +} |