diff options
Diffstat (limited to 'openecomp-ui/resources/scss/modules')
28 files changed, 810 insertions, 312 deletions
diff --git a/openecomp-ui/resources/scss/modules/_entitlementPools.scss b/openecomp-ui/resources/scss/modules/_entitlementPools.scss index ad0bb77e8d..d9919c27e3 100644 --- a/openecomp-ui/resources/scss/modules/_entitlementPools.scss +++ b/openecomp-ui/resources/scss/modules/_entitlementPools.scss @@ -1,51 +1,22 @@ .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, .contract-number, .type{ - color: $purple; - } .entitlement-pools-count { @extend .heading-1; - margin-top: -10px; - - } + color: $purple; } } } .entitlement-pools-modal { - .modal-body { - padding: 0; - } - .sdc-tab-content { - margin: 0; - } .entitlement-pools-form { - .threshold-section { + .threshold-section, .date-section { display: flex; justify-content: space-between; .validation-input-wrapper { flex: 0 0 46%; } } - .date-section { - display: flex; - justify-content: space-between; - .validation-input-wrapper { - flex: 0 0 46%; - } - } - .validation-form-content { - padding: 20px 50px; } - } - .validation-buttons { - padding: 20px 50px; - } } diff --git a/openecomp-ui/resources/scss/modules/_featureGroup.scss b/openecomp-ui/resources/scss/modules/_featureGroup.scss index 5f98ed2c05..cf681b8758 100644 --- a/openecomp-ui/resources/scss/modules/_featureGroup.scss +++ b/openecomp-ui/resources/scss/modules/_featureGroup.scss @@ -37,48 +37,5 @@ } } -.feature-group-modal { - .modal-body { - padding: 0; - } - .feature-group-form { - .no-items-msg { - margin-top: 55px; - color: $dark-gray; - } - .validation-form-content { - padding: 0; - } - .nav.nav-tabs { - padding-left: 50px; - } - .tab-content { - padding: 50px; - .field-section { - @extend .body-2-semibold; - 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 index 7a7b87677e..579e9bab2b 100644 --- a/openecomp-ui/resources/scss/modules/_licenseAgreement.scss +++ b/openecomp-ui/resources/scss/modules/_licenseAgreement.scss @@ -2,10 +2,6 @@ .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; @@ -17,46 +13,14 @@ overflow-wrap: break-word; } } - .feature-groups-count, .contract-number, .type { + .feature-groups-count, .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 { - .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; - } - } - } - } - .validation-buttons { - padding: 20px 50px; } } } diff --git a/openecomp-ui/resources/scss/modules/_licenseKeyGroup.scss b/openecomp-ui/resources/scss/modules/_licenseKeyGroup.scss index d072849c08..bcb6abc83d 100644 --- a/openecomp-ui/resources/scss/modules/_licenseKeyGroup.scss +++ b/openecomp-ui/resources/scss/modules/_licenseKeyGroup.scss @@ -1,16 +1,11 @@ .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; } } diff --git a/openecomp-ui/resources/scss/modules/_licenseModel.scss b/openecomp-ui/resources/scss/modules/_licenseModel.scss index fab091fe67..e93ea989fd 100644 --- a/openecomp-ui/resources/scss/modules/_licenseModel.scss +++ b/openecomp-ui/resources/scss/modules/_licenseModel.scss @@ -6,9 +6,6 @@ border-bottom: none; padding-bottom: 30px; } - .modal-body { - padding: 0; - } .sdc-tabs-list { padding-left: 50px; border-bottom: 1px solid $tlv-light-gray; @@ -25,10 +22,7 @@ text-align: end; } .license-model-form { - .validation-form-content { - padding: 20px 50px; - } - .validation-buttons { + .validation-form-content, .validation-buttons { padding: 20px 50px; } &.license-agreement-form, &.feature-group-form { @@ -51,3 +45,11 @@ } } } +.license-model-list-editor { + .list-editor-view-list { + .list-editor-item-view { + min-height: 110px; + height: 110px; + } + } +} diff --git a/openecomp-ui/resources/scss/modules/_licenseModelOverview.scss b/openecomp-ui/resources/scss/modules/_licenseModelOverview.scss index 9246b5fcbf..21c5bd8007 100644 --- a/openecomp-ui/resources/scss/modules/_licenseModelOverview.scss +++ b/openecomp-ui/resources/scss/modules/_licenseModelOverview.scss @@ -4,17 +4,14 @@ $icon-margin: 30px; $arrow-element-width: 30px; $list-item-padding: 15px; -@mixin overview-tile-shadow() { - @include box-shadow(0.5px 0.8px 4px 0 rgba(24, 24, 25, 0.05)); -} -// @mixin vlm-list-item-inset($color) { -// @include box-shadow(inset 6px 0 0 0 $color); -// } $la-color: $dark-blue; $fg-color: $blue; $lkg-ep-color: $light-blue; +@mixin overview-tile-shadow() { + @include box-shadow(0.5px 0.8px 4px 0 rgba(24, 24, 25, 0.05)); +} .license-model-overview { .overview-top-section { @@ -185,11 +182,8 @@ $lkg-ep-color: $light-blue; width: 100%; } .svg-icon-wrapper { - .svg-icon { &.__plusCircle { - width: 20px; - height: 20px; margin-top: 3px; margin-left: auto; fill: $dark-gray; @@ -197,7 +191,8 @@ $lkg-ep-color: $light-blue; fill: $blue; } } - } + } + } .summary-name-and-count { @@ -406,7 +401,7 @@ $lkg-ep-color: $light-blue; &.vlm-list-item-la { margin-top: 10px; .la-icon { - @include create-circle($circle-icon-size,$la-color,'LA'); + @include create-circle($circle-icon-size, $la-color); color: $white; } .vlm-list-item-title { @@ -439,7 +434,7 @@ $lkg-ep-color: $light-blue; margin-left: 29px; } .fg-icon { - @include create-circle($circle-icon-size,$fg-color,'FG'); + @include create-circle($circle-icon-size, $fg-color); color: $white; } @@ -467,7 +462,7 @@ $lkg-ep-color: $light-blue; margin-top: 10px; cursor: default; .ep-icon { - @include create-circle($circle-icon-size,$lkg-ep-color,'EP'); + @include create-circle($circle-icon-size, $lkg-ep-color); color: $white; } .vlm-list-item-title { @@ -490,7 +485,7 @@ $lkg-ep-color: $light-blue; margin-left: $list-indentation * 2; cursor: default; .lkg-icon { - @include create-circle($circle-icon-size,$lkg-ep-color,'KG'); + @include create-circle($circle-icon-size, $lkg-ep-color); color: $white; } .vlm-list-item-title { diff --git a/openecomp-ui/resources/scss/modules/_mergeEditor.scss b/openecomp-ui/resources/scss/modules/_mergeEditor.scss new file mode 100644 index 0000000000..96648dd20f --- /dev/null +++ b/openecomp-ui/resources/scss/modules/_mergeEditor.scss @@ -0,0 +1,207 @@ +$yours-bg-color: $tlv-gray; +$theirs-bg-color: $tlv-light-gray; +$error-text-color: $red; +$selected-width: 1px; +$selected-color: $blue; + +@mixin levels { + @for $i from 1 to 6 { + .level-#{$i} { + padding-left: 18px + 10 * $i; + } + } +} + +.merge-editor-modal { + .modal-lg { + width: 1300px; + } +} + +.merge-editor { + margin: 30px 40px; + max-height: 600px; + border: 1px solid $light-gray; + .grid-section { + &.conflict-titles-section { + @extend .body-1; + background-color: $blue; + height: 33px; + padding-top: 6px; + padding-bottom: 3px; + color: $white; + position: sticky; + top: 0; + z-index: 2; + border-bottom: 1px solid $tlv-light-gray; + .grid-item { + padding-left: 10px; + } + .form-group { + margin-bottom: 0; + .checkbox { + label { + margin-right: 0; + } + + text-align: right; + + input[type="checkbox"] { + cursor: pointer; + margin-top: 1px; + } + } + } + } + } + .merge-editor-body { + max-height: 500px; + overflow-y: scroll; + padding: 10px; + .conflict-section { + margin-bottom: 0; + border-left: 0; + border-right: 0; + padding: 5px 0; + + .conflict-resolve-btn { + align-self: flex-end; + } + + .grid-items { + align-items: center; + + input[type="radio"]:not(:checked) { + cursor: pointer; + } + } + } + + .collapsible-section { + display: flex; + cursor: pointer; + + .conflict-title { + @extend .heading-5-semibold; + text-transform: uppercase; + } + } + + .merge-chevron { + margin-right: 7px; + &.right { + transform: rotate(90deg); + } + } + + .grid-section .grid-items .field-col:not(.grid-col-title) { + &.grid-col-yours { + border-top: $selected-width solid $yours-bg-color; + border-bottom: $selected-width solid $yours-bg-color; + } + + &.theirs-color { + border-top: $selected-width solid $theirs-bg-color; + border-bottom: $selected-width solid $theirs-bg-color; + } + } + + .merge-editor-text-field { + display: flex; + justify-content: space-between; + // margin: 0 0 10px 0; + margin: 0; + + .field { + color: $text-black; + + &.field-name:not(.field-object-name) { + color: $gray; + } + } + + &.diff { + .field { + color: $red; + } + } + + &.grid-section { + padding-bottom: 0; + + .grid-items { + flex: 1; + + + .field-col { + padding: 7px 0; + height: 100%; + + &:not(:first-child) { + padding-left: 8px; + } + + &.grid-col-yours { + background-color: $yours-bg-color; + } + + &.grid-col-theirs { + background-color: $theirs-bg-color; + } + + @include levels; + + + .field { + @extend .body-1; + flex: 2; + min-width: 0; + + &.field-name { + @include multiline-ellipsis($bgColor: white); + &.diff { + color: $red; + } + text-transform: uppercase; + &.field-object-name { + @extend .body-1-semibold; + margin-bottom: 5px; + margin-top: 10px; + + } + } + + &.field-yours { + @include multiline-ellipsis($bgColor: $yours-bg-color); + } + + &.field-theirs { + @include multiline-ellipsis($bgColor: $theirs-bg-color); + } + &.field-name, &.field.field-yours, &.field.field-theirs { + word-break: break-word; + text-align: initial; + } + &.empty-field { + padding-top: 2px; + } + } + + *::after { + bottom: 0; + } + } + } + } + + &.field-error { + @extend .body-1; + color: $error-text-color; + min-width: 0; + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + } + } + } +} diff --git a/openecomp-ui/resources/scss/modules/_onboardingCatalog.scss b/openecomp-ui/resources/scss/modules/_onboardingCatalog.scss index 6c56d11049..4fb0f7c99e 100644 --- a/openecomp-ui/resources/scss/modules/_onboardingCatalog.scss +++ b/openecomp-ui/resources/scss/modules/_onboardingCatalog.scss @@ -8,6 +8,7 @@ $transitionLength: 0.6s; @import "onboardingCatalog/catalogHeader"; @import "onboardingCatalog/vendorPageHeader"; @import "onboardingCatalog/catalogList"; + @import "onboardingCatalog/vspOverlay"; .catalog-wrapper { height: 100%; overflow: auto; @@ -19,6 +20,38 @@ $transitionLength: 0.6s; .catalog-list { overflow: hidden; height: auto; + .sdc-tile { + margin: 9px; + .sdc-tile-header { + position: initial; + display: block; + flex-shrink: initial; + align-items: initial; + flex-direction: initial; + } + .sdc-tile-content { + position: initial; + flex: initial; + display: flex; + align-items: initial; + flex-direction: column; + justify-content: space-between; + overflow: initial; + .sdc-tile-info-line { + .with-overlay { + line-height: 1.2em; + @include ellipsis($width: initial, $max-width: 100%); + } + } + } + .sdc-tile-footer { + position: initial; + flex-shrink: initial; + display: flex; + align-items: center; + flex-direction: row; + } + } } } } diff --git a/openecomp-ui/resources/scss/modules/_permissions.scss b/openecomp-ui/resources/scss/modules/_permissions.scss new file mode 100644 index 0000000000..e652d9d82f --- /dev/null +++ b/openecomp-ui/resources/scss/modules/_permissions.scss @@ -0,0 +1,55 @@ +.modal-content { + .modal-body { + .manage-permissions-page { + .validation-form-content { + overflow-y: visible; + } + + .manage-permissions-title { + @extend .body-1-semibold; + margin-bottom: 10px; + } + .owner-details { + @extend .body-2; + display: flex; + margin-bottom: 30px; + .change-owner { + margin-left: auto; + color: $blue; + cursor: pointer; + &:hover { + color: $dark-blue; + } + } + } + .change-owner-wrapper { + .form-group { + margin-bottom: 30px; + } + + } + .change-owner-title { + display: flex; + align-items: center; + margin-bottom: 10px; + .manage-permissions-title { + margin-bottom: 0; + } + .svg-icon-wrapper { + margin-left: 5px; + .svg-icon { + width: 13px; + height: 13px; + fill: $dark-gray; + } + } + } + .contributors-select { + .Select-menu { + max-height: 150px; + overflow-y: auto + } + } + } + } +} diff --git a/openecomp-ui/resources/scss/modules/_revisions.scss b/openecomp-ui/resources/scss/modules/_revisions.scss new file mode 100644 index 0000000000..2b196c132c --- /dev/null +++ b/openecomp-ui/resources/scss/modules/_revisions.scss @@ -0,0 +1,86 @@ +.manage-revisions-modal { + .modal-dialog { + width: 700px; + } + .modal-content { + .modal-body { + .validation-form-content { + padding-top: 30px; + } + //.selected { + // .selectable { + // border-color: $light-blue; + // } + // .selectable:hover{ + // border-color: hotpink; + // } + //} + + .revision-list-item { + &.selected { + .selectable, .selectable:hover { + border-width: 2px; + border-color: $light-blue; + } + } + .selectable:hover{ + border-color: $gray; + } + .selectable:active { + border-color: $light-blue; + } + } + + .list-editor-view-list-scroller { + margin-top : 0px; + } + + .list-editor-view-header { + border-bottom: none; + .list-editor-view-title { + @extend .heading-5; + text-transform: none; + color: $blue; + } + } + + .list-editor-item-view-content { + background-color: $background-gray; + } + .revision-list-item-fields { + width: 100%; + display: flex; + flex-wrap: wrap; + .revision-user { + flex-basis: 50%; + fill: transparent; + stroke: $blue; + .svg-icon-label { + margin-left: 13px; + } + } + + .revision-date { + flex-basis: 50%; + text-align: right; + @extend .body-3; + color: $gray; + .revision-time { + margin-left: 5px; + } + } + + .revision-message { + flex-basis: 100%; + margin-top: 5px; + @extend .body-2; + .more-less { + @extend .body-3; + color: $blue; + margin-left: 5px; + } + } + } + } + } +} diff --git a/openecomp-ui/resources/scss/modules/_softwareProductAttachmentPage.scss b/openecomp-ui/resources/scss/modules/_softwareProductAttachmentPage.scss index c8d8cf4e0b..0ae3f00a29 100644 --- a/openecomp-ui/resources/scss/modules/_softwareProductAttachmentPage.scss +++ b/openecomp-ui/resources/scss/modules/_softwareProductAttachmentPage.scss @@ -1,21 +1,25 @@ .vsp-attachments-view { position: relative; - #attachments-tabs { - .nav-tabs { + .attachments-tabs { + .sdc-tabs-list { + padding-left: 28px; background-color: $tlv-gray; box-shadow: none; border-bottom: 1px solid $light-gray; - & > li { - & > a { + .sdc-tab { @extend .heading-2; - padding-left: 0; - padding-right: 0; - margin-right: 40px; - }; - &.active > a {color: $blue;}; + padding-top: 10px; + margin-top: 0; + &.sdc-tab-active { + color: $blue; + font-weight: bold; + } } } + .sdc-tab-content { + margin-top: 0; + } } .attachments-view-controllers { position: absolute; @@ -91,6 +95,11 @@ z-index: 1; padding-right: 20px; .counter { + .svg-icon { + &.__exclamationTriangleLine { + fill: $orange; + } + } display: flex; &:first-child { margin-right: 20px; @@ -215,6 +224,7 @@ .svg-icon { width: 20px; height: 20px; + fill: $orange; } } .error-item-file-type { diff --git a/openecomp-ui/resources/scss/modules/_softwareProductComponentGeneral.scss b/openecomp-ui/resources/scss/modules/_softwareProductComponentGeneral.scss index 6c5bcee03c..d31c7f0b92 100644 --- a/openecomp-ui/resources/scss/modules/_softwareProductComponentGeneral.scss +++ b/openecomp-ui/resources/scss/modules/_softwareProductComponentGeneral.scss @@ -10,7 +10,4 @@ } } } - .additional-validation-form { - margin-top: 50px; - } } diff --git a/openecomp-ui/resources/scss/modules/_softwareProductComponentImage.scss b/openecomp-ui/resources/scss/modules/_softwareProductComponentImage.scss index dad837f356..b67c448b54 100644 --- a/openecomp-ui/resources/scss/modules/_softwareProductComponentImage.scss +++ b/openecomp-ui/resources/scss/modules/_softwareProductComponentImage.scss @@ -23,9 +23,6 @@ } .image-modal-edit, .image-modal-new { - .modal-body { - padding: 0; - } .vsp-components-image-editor { .image-format, .image-md5, .image-version { @@ -35,13 +32,19 @@ padding-left: 30px; } .section-title { - text-transform: capitalize; + text-transform: uppercase; font-size: 18px; } } } .vsp-components-image { + .list-editor-view { + margin-top: 50px; + .manual-title { + @extend .body-1-semibold; + } + } .list-editor-item-view-content { flex:1; min-width: 0; diff --git a/openecomp-ui/resources/scss/modules/_softwareProductComponentNetwork.scss b/openecomp-ui/resources/scss/modules/_softwareProductComponentNetwork.scss index 402918bc5e..eaba47acb4 100644 --- a/openecomp-ui/resources/scss/modules/_softwareProductComponentNetwork.scss +++ b/openecomp-ui/resources/scss/modules/_softwareProductComponentNetwork.scss @@ -20,16 +20,7 @@ display: flex; } } -.network-nic-modal-edit, .network-nic-modal-create { - .modal-body { - padding: 0; - } - .validation-form-content { - padding-left: 50px; - padding-right: 50px; - padding-top: 20px; - } -} + .network-nic-modal-edit { .modal-dialog { width: 900px; diff --git a/openecomp-ui/resources/scss/modules/_softwareProductComponentProcessesPage.scss b/openecomp-ui/resources/scss/modules/_softwareProductComponentProcessesPage.scss index be4caacfb5..9476d7043d 100644 --- a/openecomp-ui/resources/scss/modules/_softwareProductComponentProcessesPage.scss +++ b/openecomp-ui/resources/scss/modules/_softwareProductComponentProcessesPage.scss @@ -1,7 +1,4 @@ .edit-process-modal { - .vsp-process-dropzone-view .grid-section { - padding-bottom: 30px !important; - } .component-process-description > textarea { height: 113px; } diff --git a/openecomp-ui/resources/scss/modules/_softwareProductDependencies.scss b/openecomp-ui/resources/scss/modules/_softwareProductDependencies.scss index 8fb739234f..65c558fa0e 100644 --- a/openecomp-ui/resources/scss/modules/_softwareProductDependencies.scss +++ b/openecomp-ui/resources/scss/modules/_softwareProductDependencies.scss @@ -2,14 +2,22 @@ .software-product-dependencies-title { @extend .heading-1; @extend .text-uppercase !optional; + position: sticky; + top: -30px; + z-index: 1; + background: $white; margin-bottom: 20px; color: $blue; } .select-action-table-controllers { + position: sticky; + top: 4px; + z-index: 1; + background: $white; justify-content: flex-end; cursor: pointer; color: $blue; - padding-right: 33px; + padding-right: 27px; margin-bottom: 3px; &:hover { color: $dark-blue; @@ -18,8 +26,23 @@ .select-action-table-view { min-width: 770px; } + .select-action-table-headers { + position: sticky; + top: 27px; + z-index: 1; .select-action-table-header { @extend .body-1-semibold; color: $text-black; + } + } + .select-action-table-row-wrapper { + .svg-icon { + &.__trashO, &.__plusCircle { + fill: $dark-gray; + &:hover { + fill: $black; } + } + } + } } diff --git a/openecomp-ui/resources/scss/modules/_softwareProductDeployment.scss b/openecomp-ui/resources/scss/modules/_softwareProductDeployment.scss index e0de8fc969..b5f9a546d9 100644 --- a/openecomp-ui/resources/scss/modules/_softwareProductDeployment.scss +++ b/openecomp-ui/resources/scss/modules/_softwareProductDeployment.scss @@ -2,9 +2,6 @@ .modal-dialog { width: 780px; } - .grid-section { - padding-bottom: 25px; - } .deployment-feature-groups-section.no-feature-groups { padding-bottom: 0; .form-group { @@ -25,15 +22,12 @@ } .modal-content { .modal-body { - padding: 0; .validation-form-content { + overflow-y: visible; .grid-col-1 { - flex-basis: 35%; + flex-basis: 30%; } - .Select-value, .Select-placeholder { - font-family: omnes-regular, sans-serif; - } .grid-section.vfc-table { padding-bottom: 50px; @@ -46,9 +40,6 @@ .grid-col-3 { flex-basis: 65%; } - padding-left: 54px; - padding-right: 33px; - overflow-y: visible; } } } diff --git a/openecomp-ui/resources/scss/modules/_softwareProductLandingPage.scss b/openecomp-ui/resources/scss/modules/_softwareProductLandingPage.scss index 28b54cc78f..99027d66ed 100644 --- a/openecomp-ui/resources/scss/modules/_softwareProductLandingPage.scss +++ b/openecomp-ui/resources/scss/modules/_softwareProductLandingPage.scss @@ -18,12 +18,7 @@ .description { @extend .body-1; - // overflow: hidden; padding-right: 20px; - // text-overflow: ellipsis; - // display: -webkit-box; - // -webkit-line-clamp: 2; - // -webkit-box-orient: vertical; .missing-license { display: flex; @@ -56,15 +51,9 @@ } } .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; @@ -110,6 +99,10 @@ &:last-child { margin-right: 0; } + .software-product-landing-view-top-block-col-upl { + height: 215px; + width: initial; + } } .col-md-6 { padding: 0; @@ -134,16 +127,19 @@ } } .software-product-landing-view-top-block { + &.clickable { cursor: pointer; + &:hover { + @extend .box-hover; + } + } border: 1px solid $light-gray; padding: 20px 18px 0 18px; height: 215px; display: flex; justify-content: space-between; background-color: $white; - &:hover { - @extend .box-hover; - } + .col-md-6 { @extend .body-1; } @@ -164,30 +160,12 @@ color: $light-blue; } } - } .software-product-landing-view-top-block-col-upl { @extend .flex; - height: 215px; - text-align: center; - flex-direction: column; - justify-content: center; - border: 2px dashed $light-gray; margin-bottom: 20px; - @extend .body-1; - align-items: center; - .upload-btn { - padding: 15px 55px; } - .drag-text { - color: $blue; - @extend .body-1-semibold; - } - .or-text { - margin-top: 10px; - margin-bottom: 10px; - } } } } @@ -195,6 +173,9 @@ } .vsp-details-page { + .grid-section-general { + padding-bottom: 30px; + } .vsp-general-tab { .validation-form-content { margin: 0; diff --git a/openecomp-ui/resources/scss/modules/_softwareProductProcessesPage.scss b/openecomp-ui/resources/scss/modules/_softwareProductProcessesPage.scss index d75e7447ab..3f2a2f9a69 100644 --- a/openecomp-ui/resources/scss/modules/_softwareProductProcessesPage.scss +++ b/openecomp-ui/resources/scss/modules/_softwareProductProcessesPage.scss @@ -1,10 +1,5 @@ .edit-process-modal { - background-color: $white; height: 100%; - &.modal-body { - padding: 0; - background-color: $white; - } .vsp-processes-editor { padding-left: 0; padding-right: 0; @@ -23,41 +18,22 @@ padding-top: 20px; padding-bottom: 20px; - align-items: center; - .upload-btn { - padding: 4px 20px; - } - .drag-text { - color: $blue; - @extend .body-1-semibold; - } - .or-text { - margin-top: 10px; - margin-bottom: 10px; + .process-type { + width: 100%; } } .vsp-processes-editor-data { - transition: border .2s; - .vsp-process-dropzone-view { - background-color: transparent; - &.active-dragging { - border: 3px dashed $dark-blue; - border-radius: 20px; - .draggable-wrapper { - opacity: 0.5; - } - } - .grid-section { - .section-title { - padding-bottom: 0; - } - } - } .validation-input-wrapper { .form-group.vsp-process-description > textarea { height: 113px; } } + .process-type { + width: 100%; + } + .process-editor-file-box { + width: 380px; + } } } } diff --git a/openecomp-ui/resources/scss/modules/_softwareproductComponentLoadBalancing.scss b/openecomp-ui/resources/scss/modules/_softwareproductComponentLoadBalancing.scss index d1f3f488bd..440b2424df 100644 --- a/openecomp-ui/resources/scss/modules/_softwareproductComponentLoadBalancing.scss +++ b/openecomp-ui/resources/scss/modules/_softwareproductComponentLoadBalancing.scss @@ -5,12 +5,6 @@ } .halb-data { - .load-balancing-page-title { - @extend .section-title; - &:first-child { - padding: 0 0 40px 0; - } - } .question { padding-top: 10px; &:first-child { diff --git a/openecomp-ui/resources/scss/modules/_uploadScreen.scss b/openecomp-ui/resources/scss/modules/_uploadScreen.scss index 4aa07f1580..23f41c8816 100644 --- a/openecomp-ui/resources/scss/modules/_uploadScreen.scss +++ b/openecomp-ui/resources/scss/modules/_uploadScreen.scss @@ -5,20 +5,6 @@ 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 { diff --git a/openecomp-ui/resources/scss/modules/_versionsPage.scss b/openecomp-ui/resources/scss/modules/_versionsPage.scss new file mode 100644 index 0000000000..fa1dc11ec6 --- /dev/null +++ b/openecomp-ui/resources/scss/modules/_versionsPage.scss @@ -0,0 +1,325 @@ +.dox-ui-punch-out { + background-color: $content-background-color; +} + +.dox-ui-punch-out.dox-ui-punch-out-full-page { + position: absolute; + top: 0; + bottom: 0; + left: 0; + right: 0; + overflow-y: auto; +} + +@mixin version-page-box-shadow() { + box-shadow: 0 1px 4px 0 rgba(24, 24, 24, 0.06); +} + +@mixin version-page-sub-title(){ + color: $text-black; + text-transform: uppercase; + background-color: $white; + border-bottom: 1px solid $light-gray; + padding: 12px 0 10px 23px; +} + +.versions-tree-modal { + .modal-dialog { + width: 800px; + } + + .tree-view { + display: flex; + align-items: center; + } +} + +.versions-page-view { + height: 100%; + background-color: $background-gray; + overflow: auto; + padding: 35px 50px 20px 50px; + + .svg-icon-wrapper { + justify-content: flex-start; + } + + .versions-page-title { + @extend .heading-1; + text-transform: uppercase; + margin-bottom: 29px; + color: $blue; + } + + .versions-page-permissions-view-wrapper { + @extend .body-1-semibold; + @include version-page-box-shadow(); + + .permissions-view-wrapper-title { + @include version-page-sub-title(); + } + + .svg-icon-wrapper.user-view { + fill: transparent; + stroke: $blue; + .svg-icon { + height: 18px; + width: 16px; + margin: 0 7px; + } + &.current-user { + .svg-icon { + background-color: $blue; + stroke: $white; + padding-top: 5px; + padding-bottom: 3px; + height: 29px; + width: 29px; + border-radius: 20px; + border: 1px solid $blue; + box-shadow: inset 0px 0px 0px 2px $white; + margin: 0; + } + .svg-icon-label { + margin-left: 7px; + } + } + .svg-icon-label { + @extend .body-2; + color: $dark-gray; + margin-left: 6px; + } + } + + .permissions-view-content { + padding: 20px 40px 20px 25px; + background-color: $white; + + height: 120px; + display: flex; + } + + .permissions-view { + display: flex; + flex: 1; + flex-direction: column; + justify-content: space-around; + + .permissions-view-title { + text-transform: uppercase; + color: $dark-gray; + } + + .contributors-view, .owner-view { + display: flex; + height: 16px; + @extend .body-1-semibold; + + .permissions-view-title { + width: 130px; + line-height: 16px; + } + + .extra-contributors { + border-radius: 30px; + background-color: $gray; + width: 26px; + height: 26px; + padding-right: 2px; + display: flex; + align-items: center; + justify-content: center; + color: $white; + cursor: default; + &:hover { + background-color: $dark-gray; + } + } + + .user-view { + margin-right: 38px; + } + + .manage-permissions { + color: $blue; + margin-left: auto; + cursor: pointer; + + &:hover { + color: $dark-blue; + } + } + } + } + } + + .versions-page-list-and-tree { + display: flex; + margin-top: 20px; + + .version-tree-wrapper { + display: flex; + flex-direction: column; + margin-right:10px; + transition: all 1s ease; + @include version-page-box-shadow(); + + .version-tree-title-container { + display: flex; + align-items: center; + height: 40px; + @include version-page-sub-title(); + padding-right: 10px; + + .version-tree-full-screen { + margin-left: auto; + } + } + + .tree-view { + background-color: $white; + flex: 1; + } + } + } + + .version-list { + flex: 1; + @extend .body-1-semibold; + color: $text-black; + display: flex; + flex-direction: column; + + .version-list-items { + flex: 1; + display: flex; + flex-direction: column; + + .version-item-row { + border-bottom: 1px solid $tlv-light-gray; + + &:last-child { + border-bottom: none; + } + } + } + + .version-item-row { + $row-hover-color: lighten($blue, 54%); + $row-active-color: lighten($blue, 51%); + + display: flex; + align-items: center; + padding: 15px 30px; + @include version-page-box-shadow(); + background-color: $white; + height: 70px; + + &:hover { + background-color: $row-hover-color; + } + + &.selected { + box-shadow: 0 1px 4px 0 rgba(24, 24, 24, 0.06), inset 5px 0 0 0 $blue; + background-color: $row-active-color; + &:hover { + background-color: $row-hover-color; + box-shadow: 0 1px 4px 0 rgba(24, 24, 24, 0.06), inset 5px 0 0 0 lighten($blue, 35%); + } + } + + &.header-row { + height: 40px; + + @extend .body-1-semibold; + @include version-page-sub-title(); + padding: 15px 27px; + + &:hover { + background-color: $white; + pointer-events: none; + &:active { + background-color: $white; + @include version-page-box-shadow(); + } + } + .header-field.actions { + margin-right: 57px; + } + } + + .version-item-field { + flex: 1; + display: flex; + margin-right: 10px; + + &.item-version, &.item-status { + flex: 0 1 10%; + @extend .body-1-semibold; + color: $text-black; + } + + &.item-description, &.item-last-edited { + @extend .body-1; + color: $dark-gray; + } + + &.item-description, &.header-description { + flex: 2 1 0; + } + + &.item-description > .description-text { + margin-right: 10px; + @include ellipsis($max-width: 300px); + } + + &.item-actions { + display: flex; + flex: 1 1 3%; + justify-content: space-between; + } + + &.item-select, &.item-create { + @extend .body-1; + flex: 0 1 auto; + margin-right: 0; + + .svg-icon-wrapper { + fill: $blue; + color: $blue; + + &[disabled] { + cursor: default; + } + + .svg-icon { + width: 16px; + height: 16px; + } + + &:hover:not([disabled]) { + fill: $dark-blue; + color: $dark-blue; + } + } + } + + } + + /* To keep ellipsis hider's background the same color as row background */ + &:not(.selected):hover .item-description > .description-text:after { + background: $row-hover-color + } + + &:hover:active .item-description > .description-text:after { + background: $row-active-color; + } + + } + + } + + &.clickable { + cursor: pointer; + } +} diff --git a/openecomp-ui/resources/scss/modules/_vspComponentCompute.scss b/openecomp-ui/resources/scss/modules/_vspComponentCompute.scss index ee8cfa5c7f..9f88e94393 100644 --- a/openecomp-ui/resources/scss/modules/_vspComponentCompute.scss +++ b/openecomp-ui/resources/scss/modules/_vspComponentCompute.scss @@ -1,16 +1,3 @@ -.vsp-component-computeFlavor-view { - .component-questionnaire-validation-form { - .vm-sizing-section { - .section-title { - text-transform: capitalize; - font-size: 18px; - } - .duplicate-title-line label.control-label{ - height: 2.7em; - } - } - } -} .compute-flavor-editor-modal-edit { .modal-lg { diff --git a/openecomp-ui/resources/scss/modules/_vspComponentMonitoring.scss b/openecomp-ui/resources/scss/modules/_vspComponentMonitoring.scss index bda8512f36..14bad18179 100644 --- a/openecomp-ui/resources/scss/modules/_vspComponentMonitoring.scss +++ b/openecomp-ui/resources/scss/modules/_vspComponentMonitoring.scss @@ -1,34 +1,9 @@ .vsp-component-monitoring { .dropzone { - .section-title { - padding-bottom: 20px; - } &:not(:last-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: 4px 20px; - } - .drag-text { - color: $blue; - @extend .body-1-semibold - } - .or-text { - margin-top: 10px; - margin-bottom: 10px; - } - } .monitoring-file { display: flex; @@ -46,7 +21,4 @@ } } - .delete-button { - min-width: 0; - } } diff --git a/openecomp-ui/resources/scss/modules/_vspComponentQuestionnaire.scss b/openecomp-ui/resources/scss/modules/_vspComponentQuestionnaire.scss index 5696b354a7..2a99263285 100644 --- a/openecomp-ui/resources/scss/modules/_vspComponentQuestionnaire.scss +++ b/openecomp-ui/resources/scss/modules/_vspComponentQuestionnaire.scss @@ -1,6 +1,6 @@ .vsp-component-questionnaire-view { - input[type='radio'], input[type='checkbox'] { + input[type='checkbox'] { &:before { border: 1px solid $dark-gray; cursor: pointer; @@ -30,14 +30,13 @@ .radio-options-content-row { display: flex; margin-top: -4px; - .validation-input-wrapper { - width: 240px; - margin-right: 7px; + .validation-radio-wrapper { + margin-right: 20px; & > .form-group { display: flex; } - .form-group .radio { + .form-group .sdc-radio { width: auto; margin-right: 0; } diff --git a/openecomp-ui/resources/scss/modules/onboardingCatalog/_catalogHeader.scss b/openecomp-ui/resources/scss/modules/onboardingCatalog/_catalogHeader.scss index d29a95d3d6..0a234a5a96 100644 --- a/openecomp-ui/resources/scss/modules/onboardingCatalog/_catalogHeader.scss +++ b/openecomp-ui/resources/scss/modules/onboardingCatalog/_catalogHeader.scss @@ -14,7 +14,7 @@ flex-direction: row; .tab-separator { position: relative; - top: 13px; + top: 8px; } .catalog-header-tab { @extend .heading-1; diff --git a/openecomp-ui/resources/scss/modules/onboardingCatalog/_onboardHeader.scss b/openecomp-ui/resources/scss/modules/onboardingCatalog/_onboardHeader.scss index 32ebac98cf..f97641cbe3 100644 --- a/openecomp-ui/resources/scss/modules/onboardingCatalog/_onboardHeader.scss +++ b/openecomp-ui/resources/scss/modules/onboardingCatalog/_onboardHeader.scss @@ -5,15 +5,16 @@ justify-content: flex-end; background-color: $tlv-light-gray; margin-bottom: 2px; + padding-left: 60px; + padding-right: 40px; @include box-shadow(0px 1px 3px 0 rgba(0, 0, 0, 0.2)); .expandable-input-top { - margin-right: 60px; + margin-right: 20px; margin-left: auto; } .onboard-header-tabs { display: flex; flex-direction: row; - margin-left: 60px; .onboard-header-tab { @extend .body-1-semibold; margin-right: 40px; diff --git a/openecomp-ui/resources/scss/modules/onboardingCatalog/_vspOverlay.scss b/openecomp-ui/resources/scss/modules/onboardingCatalog/_vspOverlay.scss index 80ed7385e0..e0b72bf9ff 100644 --- a/openecomp-ui/resources/scss/modules/onboardingCatalog/_vspOverlay.scss +++ b/openecomp-ui/resources/scss/modules/onboardingCatalog/_vspOverlay.scss @@ -54,7 +54,7 @@ &:hover { color: $blue; } - text-transform: uppercase; + text-transform: none; @include ellipsis(auto, block); border-bottom: 1px solid $tlv-light-gray; cursor: pointer; |