diff options
| author |   Einav Weiss Keidar <einavw@amdocs.com> | 2018-08-13 16:19:46 +0300 |
|---|---|---|
| committer |   Avi Gaffa <avi.gaffa@amdocs.com> | 2019-02-11 13:50:22 +0000 |
| commit | 1801b24389baa8e3f7298ff2c41e2512b19c1290 (patch) | |
| tree | d3d2a15f53aa28698280d609548298d177f9280d /openecomp-ui/resources/scss/modules | |
| parent | af8e36eb7f43803bd9cf40e9b46a0c0c8f47c781 (diff) | |
react 16 upgrade
Issue-ID: SDC-1762
Change-Id: I7701f12fc63bb09f8c985c7c893b984701dcbfab
Signed-off-by: Einav Keidar <einavw@amdocs.com>
Diffstat (limited to 'openecomp-ui/resources/scss/modules')
41 files changed, 3013 insertions, 3169 deletions
diff --git a/openecomp-ui/resources/scss/modules/_entitlementPools.scss b/openecomp-ui/resources/scss/modules/_entitlementPools.scss index 06ef4d21fd..736927fb51 100644 --- a/openecomp-ui/resources/scss/modules/_entitlementPools.scss +++ b/openecomp-ui/resources/scss/modules/_entitlementPools.scss @@ -1,37 +1,37 @@ - -.entitlement-pools-list-editor { +.entitlement-pools-list-editor { .list-editor-item-view-field { - - .entitlement-pools-count { - @extend .heading-1; - color: $purple; + .entitlement-pools-count { + @extend .heading-1; + color: $purple; + } } - } } .entitlement-pools-modal { - .entitlement-pools-form { - .threshold-section, .date-section { - display: flex; - justify-content: space-between; - .validation-input-wrapper { - flex: 0 0 46%; - } - } - .uuid-row-wrapper { - display: flex; - .separator{ - margin-left: 30px; - margin-right: 30px; - height: 35px; - border: 1px solid $tlv-light-gray; - } - .uuid-container { - .uuid-value { - @extend .body-3; - user-select: text; + .entitlement-pools-form { + .threshold-section, + .date-section { + display: flex; + justify-content: space-between; + .validation-input-wrapper { + flex: 0 0 46%; + } + } + .uuid-row-wrapper { + display: flex; + margin-top: 20px; + .separator { + margin-left: 30px; + margin-right: 30px; + height: 35px; + border: 1px solid $tlv-light-gray; + } + .uuid-container { + .uuid-value { + @extend .body-3; + user-select: text; + } + } } - } } - } } diff --git a/openecomp-ui/resources/scss/modules/_featureGroup.scss b/openecomp-ui/resources/scss/modules/_featureGroup.scss index cf681b8758..375bb2c08e 100644 --- a/openecomp-ui/resources/scss/modules/_featureGroup.scss +++ b/openecomp-ui/resources/scss/modules/_featureGroup.scss @@ -1,41 +1,38 @@ .feature-groups-list-editor { - .list-editor-view{ - .list-editor-view-list { - .list-editor-item-view { - min-height: 110px; - height: 110px; - } - .list-editor-item-view-content { - .list-editor-item-view-field { - &.smaller-field { - flex: 0.35; - } - .feature-groups-count-field { - display: inline-block; - &:first-child { - margin-right: 95px; + .list-editor-view { + .list-editor-view-list { + .list-editor-item-view { + min-height: 110px; + height: 110px; + } + .list-editor-item-view-content { + .list-editor-item-view-field { + &.smaller-field { + flex: 0.35; + } + .feature-groups-count-field { + display: inline-block; + &:first-child { + margin-right: 95px; + } + } + .feature-groups-count-ep { + @extend .heading-1; + color: $light-blue; + } + .feature-groups-mrn-ep { + @extend .body-1; + color: $light-blue; + } + .feature-groups-count-lk { + @extend .heading-1; + color: $light-green; + } + .title-no-wrap { + white-space: nowrap; + } + } } - } - .feature-groups-count-ep { - @extend .heading-1; - color: $light-blue; - } - .feature-groups-mrn-ep { - @extend .body-1; - color: $light-blue; - } - .feature-groups-count-lk { - @extend .heading-1; - color: $light-green; - } - .title-no-wrap { - white-space: nowrap; - } } - } } - } } - - - diff --git a/openecomp-ui/resources/scss/modules/_licenseAgreement.scss b/openecomp-ui/resources/scss/modules/_licenseAgreement.scss index 579e9bab2b..acde2edcb8 100644 --- a/openecomp-ui/resources/scss/modules/_licenseAgreement.scss +++ b/openecomp-ui/resources/scss/modules/_licenseAgreement.scss @@ -1,26 +1,24 @@ - .license-agreement-list-editor { - - .list-editor-view-list { - .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; + .list-editor-view-list { + .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, + .type { + color: $light-green; + } + .feature-groups-count { + @extend .heading-1; + padding-top: 2px; + } } - } - .feature-groups-count, .type { - color: $light-green; - } - .feature-groups-count { - @extend .heading-1; - padding-top: 2px; - } - } - } } diff --git a/openecomp-ui/resources/scss/modules/_licenseKeyGroup.scss b/openecomp-ui/resources/scss/modules/_licenseKeyGroup.scss index b7681fef9d..d873c3998c 100644 --- a/openecomp-ui/resources/scss/modules/_licenseKeyGroup.scss +++ b/openecomp-ui/resources/scss/modules/_licenseKeyGroup.scss @@ -1,31 +1,32 @@ .license-key-groups-list-editor { - .list-editor-view-list { - .list-editor-item-view-field { - - .operational-scope, .type { - color: $orange; - } - .operational-scope { - @include ellipsis; - } + .list-editor-view-list { + .list-editor-item-view-field { + .operational-scope, + .type { + color: $orange; + } + .operational-scope { + @include ellipsis; + } + } } - } } .license-keygroup-editor { - .uuid-row-wrapper { - display: flex; - .separator{ - margin-left: 30px; - margin-right: 30px; - height: 35px; - border: 1px solid $tlv-light-gray; - } - .uuid-container { - .uuid-value { - @extend .body-3; - user-select: text; - } + .uuid-row-wrapper { + display: flex; + margin-top: 20px; + .separator { + margin-left: 30px; + margin-right: 30px; + height: 35px; + border: 1px solid $tlv-light-gray; + } + .uuid-container { + .uuid-value { + @extend .body-3; + user-select: text; + } + } } - } } diff --git a/openecomp-ui/resources/scss/modules/_licenseModel.scss b/openecomp-ui/resources/scss/modules/_licenseModel.scss index e93ea989fd..da43e3e3cf 100644 --- a/openecomp-ui/resources/scss/modules/_licenseModel.scss +++ b/openecomp-ui/resources/scss/modules/_licenseModel.scss @@ -1,55 +1,42 @@ .license-model-modal { - .modal-body { - padding: 0; - } - .modal-header { - border-bottom: none; - padding-bottom: 30px; - } - .sdc-tabs-list { - padding-left: 50px; - border-bottom: 1px solid $tlv-light-gray; - display: flex; - align-items: baseline; - } - .sdc-tab-content { - margin-top: 0; - } - .add-limit-button { - margin-left: auto; - margin-right: 50px; - padding-right: 0; - text-align: end; - } - .license-model-form { - .validation-form-content, .validation-buttons { - padding: 20px 50px; + .sdc-tabs { + margin-top: 20px; } - &.license-agreement-form, &.feature-group-form { - .validation-form-content { - padding: 0; - } - .sdc-tab-content { - padding: 20px 50px; - } - } - } - .license-model-modal-buttons { - padding: 21px 50px; - display: flex; - justify-content: flex-end; - background-color: $tlv-gray; - margin-top: 2px; - .sdc-button { - margin-left: 20px; + .sdc-tabs-list { + padding-left: 40px; + border-bottom: 1px solid $tlv-light-gray; + display: flex; + align-items: baseline; + } + .sdc-tab-content { + margin-top: 0; + } + .add-limit-button { + margin-left: auto; + margin-right: 50px; + padding-right: 0; + text-align: end; + } + .license-model-form { + &.license-agreement-form, + &.feature-group-form { + .validation-form-content { + padding: 0; + } + .sdc-tab-content { + padding: 20px 40px; + .dual-list-box { + margin: 0; + } + } + } } - } } .license-model-list-editor { - .list-editor-view-list { - .list-editor-item-view { - min-height: 110px; - height: 110px; - } - } + .list-editor-view-list { + .list-editor-item-view { + min-height: 110px; + height: 110px; + } + } } diff --git a/openecomp-ui/resources/scss/modules/_licenseModelLimits.scss b/openecomp-ui/resources/scss/modules/_licenseModelLimits.scss index 16b6af7cf9..794ed388e4 100644 --- a/openecomp-ui/resources/scss/modules/_licenseModelLimits.scss +++ b/openecomp-ui/resources/scss/modules/_licenseModelLimits.scss @@ -1,133 +1,132 @@ .license-model-limits-view { - max-height: 490px; - overflow: auto; - - .limit-editor-title { - padding: 10px 50px; - background-color: $blue; - color: $white; - - } - .list-editor-view-add-title { - margin-right: 20px; - } - - .no-limits-text { - padding-left: 50px; - } - - .list-editor-view { - .list-editor-view-header { - border-bottom: none; - padding-top: 30px; - padding-bottom: 0; - } - - .list-editor-view-list-scroller { - margin-top: 0; - margin-bottom: 30px; - } - .list-editor-view-list { - width: 100%; - .list-editor-item-view { - min-height: 50px; - height: 50px; - background-color: $tlv-light-gray; - border-color: transparent; - margin: 1px 0; - .list-editor-item-view-content { - padding-left: 0; - } - - .svg-icon { - margin-top: 10px; - margin-right: 50px; - fill: $gray; - &:hover { - fill: $dark-gray; - } - } - - &.selectable { - &:hover { - .list-editor-item-view-field { - .text.description, .text-name { - &:after { - background-color: darken($tlv-light-gray, 4%); - } - } - - } - background-color: darken($tlv-light-gray, 4%); - cursor: pointer; - } - - } - &:hover { - border-color: transparent; - cursor: default; - } - .list-editor-item-view-content { - .list-editor-item-view-field { - display: flex; - align-items: center; - white-space: nowrap; - - &.limit-name { - .text.name { - @extend .body-1-semibold; - color: $blue; - text-transform: uppercase; - margin-left : 45px; - } - - border-right: 1px solid $light-gray; - margin-right: 22px; - flex: 0.4; - display: flex; - justify-content: left; - } - - &.limit-description { - max-width: 300px; - margin-right: 22px; - } - - &.limit-metric-details { - max-width: 300px; - } - - - .text.description, .text.name { - overflow: hidden; - text-overflow: ellipsis; - white-space: nowrap; - &:after { - background: $tlv-light-gray; - } - - } - } - - } - } - } - } - .limit-editor{ - .limit-editor-form { - .limit-editor-form-grid-section { - padding-bottom: 0; - } - .validation-form-content { - padding: 21px 45px; - } - .limit-editor-buttons { - display: flex; - justify-content: flex-end; - .sdc-button { - margin-left: 20px; - } - } - } - } -}
\ No newline at end of file + max-height: 490px; + overflow: auto; + + .limit-editor-title { + padding: 10px 50px; + background-color: $blue; + color: $white; + } + .list-editor-view-add-title { + margin-right: 20px; + } + + .no-limits-text { + padding-left: 50px; + } + + .list-editor-view { + .list-editor-view-header { + border-bottom: none; + padding-top: 30px; + padding-bottom: 0; + } + + .list-editor-view-list-scroller { + margin-top: 0; + margin-bottom: 30px; + } + .list-editor-view-list { + width: 100%; + .list-editor-item-view { + min-height: 50px; + height: 50px; + background-color: $tlv-light-gray; + border-color: transparent; + margin: 1px 0; + .list-editor-item-view-content { + padding-left: 0; + } + + .svg-icon { + margin-top: 10px; + margin-right: 50px; + fill: $gray; + &:hover { + fill: $dark-gray; + } + } + + &.selectable { + &:hover { + .list-editor-item-view-field { + .text.description, + .text-name { + &:after { + background-color: darken( + $tlv-light-gray, + 4% + ); + } + } + } + background-color: darken($tlv-light-gray, 4%); + cursor: pointer; + } + } + &:hover { + border-color: transparent; + cursor: default; + } + .list-editor-item-view-content { + .list-editor-item-view-field { + display: flex; + align-items: center; + white-space: nowrap; + + &.limit-name { + .text.name { + @extend .body-1-semibold; + color: $blue; + text-transform: uppercase; + margin-left: 45px; + } + + border-right: 1px solid $light-gray; + margin-right: 22px; + flex: 0.4; + display: flex; + justify-content: left; + } + + &.limit-description { + max-width: 300px; + margin-right: 22px; + } + + &.limit-metric-details { + max-width: 300px; + } + + .text.description, + .text.name { + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; + &:after { + background: $tlv-light-gray; + } + } + } + } + } + } + } + .limit-editor { + .limit-editor-form { + .limit-editor-form-grid-section { + padding-bottom: 0; + } + .validation-form-content { + padding: 21px 45px; + } + .limit-editor-buttons { + display: flex; + justify-content: flex-end; + .sdc-button { + margin-left: 20px; + } + } + } + } +} diff --git a/openecomp-ui/resources/scss/modules/_licenseModelOverview.scss b/openecomp-ui/resources/scss/modules/_licenseModelOverview.scss index 21c5bd8007..eca87b6962 100644 --- a/openecomp-ui/resources/scss/modules/_licenseModelOverview.scss +++ b/openecomp-ui/resources/scss/modules/_licenseModelOverview.scss @@ -4,236 +4,233 @@ $icon-margin: 30px; $arrow-element-width: 30px; $list-item-padding: 15px; - - $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)); + @include box-shadow(0.5px 0.8px 4px 0 rgba(24, 24, 25, 0.05)); } .license-model-overview { - .overview-top-section { - .overview-title{ - @extend .heading-1; - @extend .text-uppercase !optional; - margin-bottom: 20px; - color: $blue; - } - .license-model-overview-top { - display: flex; - justify-content: flex-start; - flex-direction: row; - padding-bottom: 10px; - min-height: 155px; - .separator { - width: 1px; - border-right: 1px solid $tlv-light-gray; - margin-left: 20px; - } - .vendor-data-view { - @extend .flex-column; - background-color: $tlv-gray; - padding: 13px 30px; - border: 1px solid $tlv-light-gray; - @include overview-tile-shadow(); - .vendor-title { - margin-top:5px; + .overview-top-section { + .overview-title { + @extend .heading-1; + @extend .text-uppercase !optional; + margin-bottom: 20px; + color: $blue; } - .vendor-name { - @extend .heading-4-semibold; - text-transform: none; - padding-bottom: 10px; - border-bottom: 1px solid $tlv-light-gray; - } - .vendor-description, .vendor-description-readonly { - @extend .flex; - @extend .body-1; - justify-content: space-between; - overflow: hidden; - position: relative; - flex: initial; - } - - &:not(.read-only) .vendor-description { - border: 1px solid transparent; - width: 100%; - padding: 2px 0 2px 6px; - margin-top: 10px; - position: relative; - .svg-icon-wrapper { - position: absolute;; - right:0; - top:0; - opacity: 0; - } - $hover-padding-right: 16px; - @include percent-plus-value($property: width, $percent: 100%, $value: -$hover-padding-right); // compensate for padding added on hover - &:hover { - padding-right: $hover-padding-right; - border: 1px solid $light-gray; - cursor: pointer; - - background-color: $white; - .svg-icon-wrapper { - opacity: 1; - z-index: 10; - } - .description-data:after { - background: white; - } - .description-data { - width: 100%; + .license-model-overview-top { + display: flex; + justify-content: flex-start; + flex-direction: row; + padding-bottom: 10px; + min-height: 155px; + .separator { + width: 1px; + border-right: 1px solid $tlv-light-gray; + margin-left: 20px; } - } - } + .vendor-data-view { + @extend .flex-column; + background-color: $tlv-gray; + padding: 13px 30px; + border: 1px solid $tlv-light-gray; + @include overview-tile-shadow(); + .vendor-title { + margin-top: 5px; + } + .vendor-name { + @extend .heading-4-semibold; + text-transform: none; + padding-bottom: 10px; + border-bottom: 1px solid $tlv-light-gray; + } + .vendor-description, + .vendor-description-readonly { + @extend .flex; + @extend .body-1; + justify-content: space-between; + overflow: hidden; + position: relative; + flex: initial; + } - .vendor-description-readonly { - margin-top: 16px; - } + &:not(.read-only) .vendor-description { + border: 1px solid transparent; + width: 100%; + padding: 2px 0 2px 6px; + margin-top: 10px; + position: relative; + .svg-icon-wrapper { + position: absolute; + right: 0; + top: 0; + opacity: 0; + } + $hover-padding-right: 16px; + @include percent-plus-value($property: width, $percent: 100%, $value: -$hover-padding-right); // compensate for padding added on hover + &:hover { + padding-right: $hover-padding-right; + border: 1px solid $light-gray; + cursor: pointer; - .description-data { - @include multiline-ellipsis($lineCount: 3, $bgColor: $tlv-gray); - flex: initial; - } + background-color: $white; + .svg-icon-wrapper { + opacity: 1; + z-index: 10; + } + .description-data:after { + background: white; + } + .description-data { + width: 100%; + } + } + } - .vendor-description-edit { - @extend .flex; - flex-direction: column; - border: none; - margin-top: 10px; - position: relative; - left: -6px; - width: 101%; - textarea { - padding-left: 6px; - resize: vertical; - } - .buttons-row { - @extend .flex; - justify-content: flex-end; - flex-direction: row; - margin-top: -25px; - .buttons-wrapper { - @extend .flex; - @extend .body-3; - border: 1px solid $light-gray; - width: 95px; - height: 19px; - background-color: $tlv-light-gray; - border-radius: 2px; - position: relative; - flex: 0 1 auto; - text-align: center; - .description-button { - cursor: pointer; - flex: 1; - &:hover { - background-color: $white; + .vendor-description-readonly { + margin-top: 16px; } - } - .description-save { - cursor: pointer; - flex: 1; - color:$blue; - &:hover { - background-color: $white; + + .description-data { + @include multiline-ellipsis($lineCount: 3, $bgColor: $tlv-gray); + flex: initial; } - } - } - } - .description-edit-textarea { - height:67px; - border: 1px solid $tlv-light-gray; - resize: none; - position: relative; - left: -12px; - } - .validation-error-message.tooltip { - z-index: 1000; - .tooltip-inner { - background-color: $red; - } - } - } - } - .summary-count-list { - @extend .flex-column; - flex: 0.6; - margin-left: 20px; - justify-content: space-between; - border: 1px solid $tlv-light-gray; - @include overview-tile-shadow(); - background-color: $tlv-gray; - .summary-count-item { - @extend .flex; - @extend .heading-5-semibold; - align-items: center; - padding-left: 45px; - padding-right: 45px; - border-bottom: 1px solid $tlv-light-gray; - &:last-child { border-bottom: none; } - .item-count { - flex-grow: 2; - margin-left: 5px; - } - .summary-name-and-count { - width: 100%; - } - .svg-icon-wrapper { - .svg-icon { - &.__plusCircle { - margin-top: 3px; - margin-left: auto; - fill: $dark-gray; - &:hover { - fill: $blue; + + .vendor-description-edit { + @extend .flex; + flex-direction: column; + border: none; + margin-top: 10px; + position: relative; + left: -6px; + width: 101%; + textarea { + padding-left: 6px; + resize: vertical; + } + .buttons-row { + @extend .flex; + justify-content: flex-end; + flex-direction: row; + margin-top: -25px; + .buttons-wrapper { + @extend .flex; + @extend .body-3; + border: 1px solid $light-gray; + width: 95px; + height: 19px; + background-color: $tlv-light-gray; + border-radius: 2px; + position: relative; + flex: 0 1 auto; + text-align: center; + .description-button { + cursor: pointer; + flex: 1; + &:hover { + background-color: $white; + } + } + .description-save { + cursor: pointer; + flex: 1; + color: $blue; + &:hover { + background-color: $white; + } + } + } + } + .description-edit-textarea { + height: 67px; + border: 1px solid $tlv-light-gray; + resize: none; + position: relative; + left: -12px; + } + .validation-error-message.tooltip { + z-index: 1000; + .tooltip-inner { + background-color: $red; + } + } } - } } + .summary-count-list { + @extend .flex-column; + flex: 0.6; + margin-left: 20px; + justify-content: space-between; + border: 1px solid $tlv-light-gray; + @include overview-tile-shadow(); + background-color: $tlv-gray; + .summary-count-item { + @extend .flex; + @extend .heading-5-semibold; + align-items: center; + padding-left: 45px; + padding-right: 45px; + border-bottom: 1px solid $tlv-light-gray; + &:last-child { + border-bottom: none; + } + .item-count { + flex-grow: 2; + margin-left: 5px; + } + .summary-name-and-count { + width: 100%; + } + .svg-icon-wrapper { + .svg-icon { + &.__plusCircle { + margin-top: 3px; + margin-left: auto; + fill: $dark-gray; + &:hover { + fill: $blue; + } + } + } + } - } - - .summary-name-and-count { - &:hover { - cursor: pointer; - color: $blue; + .summary-name-and-count { + &:hover { + cursor: pointer; + color: $blue; + } + } + } + } + .plus-icon { + font-size: $icon-font-size; + border-radius: 50%; + border: 1px solid $black; + color: $black; + height: 16px; + width: 16px; + padding: 2px 2px 2px 3px; } - } - - } - } - .plus-icon { - font-size: $icon-font-size; - border-radius: 50%; - border: 1px solid $black; - color: $black; - height: 16px; - width: 16px; - padding: 2px 2px 2px 3px; - } - } - } - .vlm-list-tab-panel { - - @extend .flex; - margin-bottom: 7px; - .section-title { - flex: 1; } - .overview-buttons-section { - margin-top: 20px; - display: flex; - justify-content: flex-start; - .button-vlm-list-view { - height: 32px; - width: 34px; - margin-left:10px; - cursor: pointer; - } - /** + .vlm-list-tab-panel { + @extend .flex; + margin-bottom: 7px; + .section-title { + flex: 1; + } + .overview-buttons-section { + margin-top: 20px; + display: flex; + justify-content: flex-start; + .button-vlm-list-view { + height: 32px; + width: 34px; + margin-left: 10px; + cursor: pointer; + } + /** .vlm-list-icon { background-size: 32px; background-repeat: no-repeat; @@ -251,262 +248,253 @@ $lkg-ep-color: $light-blue; } } **/ - } - } - - .overview-list-section { - @extend .flex-column; - margin-top: 35px; - .section-title { - @extend .heading-2; - padding-top: 20px; - margin-bottom: 15px; - padding-bottom: 0px; - } - &.overview-list-orphans { - .chevron::before - { - display: none; - } - .vlm-list-view { - .vlm-list { - .vlm-list-item.orphan-list-item { - @include overview-tile-shadow(); - margin-left: 0; - - .vlm-list-item-title { - - .item-name { - color: $dark-gray; - } - } - .list-item-icon-col { - .overview-list-icon { - background-color: $gray; - border-color: $gray; - } - } - .list-item-section { - &:first-child { - display: flex; - color: $white; - min-width: $arrow-element-width; - } - &.list-item-icon-col { - margin-left: 65px; - margin-right: 65px - $list-item-padding; - } - } - } } - } } - .vlm-list-view { - flex: 1; - .vlm-list { - @extend .flex; - flex-direction: column; - .vlm-list-item { - @include border-shadow(); - min-height: 90px; - height: 90px; - background-color: $tlv-gray; - @extend .flex; - border: 1px solid $tlv-light-gray; - margin-bottom: 0px; - .clickable { - cursor: pointer; - } - .list-item-section { - .count-value { - @extend .body-3; - } - &.list-item-icon-col { - display: flex; - flex-direction: column; - justify-content: center; - align-items: center; - padding: 0; - margin-right: 40px - $list-item-padding; - margin-left: $icon-margin; - .overview-list-icon { - @extend .body-2; - } - } - padding: 15px; - &.list-item-arrow-col { - padding: 0; - } - .children-count { - @extend .body-1; - color: $gray; - padding-left: 5px; - .count-value { - padding: 0 5px; - } - } - .additional-data { - padding-left: 60px; - display: flex; - flex-direction: column; - justify-content: space-between; - *:last-child { - margin-top: 20px; - } - *:only-child { - margin-top: 0; - } - .additional-data-name { - @extend .body-2-semibold; - } - } - .additional-data-col-border { - border-left: 1px solid $tlv-light-gray; - min-height: 100%; - height: 100%; - } - } - .list-item-additional-data-col { - @extend .body-2; - @extend .flex; - align-items: stretch; - flex: 0.8; - margin-left: 30px; - padding-top: 17px; - padding-bottom: 11px; - } - .arrow-icon { - align-self: center; - - } - .vlm-item-info { - flex: 1; - } - .vlm-list-item-title { - @extend .flex; - align-items: baseline; - .item-name { - @extend .heading-5-semibold; - flex: 0 1 auto; - margin-bottom: 4px; - text-transform: uppercase; - } - } - .vlm-list-item-description { - @extend .body-1; - @include multiline-ellipsis($lineCount: 3, $bgColor: $tlv-gray); - max-height: 38px; - } - &.vlm-list-item-la { - margin-top: 10px; - .la-icon { - @include create-circle($circle-icon-size, $la-color); - color: $white; - } - .vlm-list-item-title { - .item-name { - color: $la-color; - } - } - .list-item-section { - - &:first-child { - display: flex; - color: $la-color; - min-width: $arrow-element-width; - } - } - .list-item-arrow-col { - flex: 0.01; - margin-left: $arrow-margin; - justify-content: center; + .overview-list-section { + @extend .flex-column; + margin-top: 35px; + .section-title { + @extend .heading-2; + padding-top: 20px; + margin-bottom: 15px; + padding-bottom: 0px; + } + &.overview-list-orphans { + .chevron::before { + display: none; } - } - &.vlm-list-item-fg { - margin-left: $list-indentation; - margin-top: 10px; - .fg-pipeline-separator { - color: $dark-gray; - padding: 0 5px; - } - .list-item-icon-col { - margin-left: 29px; - } - .fg-icon { - @include create-circle($circle-icon-size, $fg-color); - color: $white; - } - - .vlm-list-item-title { - .item-name { - color: $fg-color; - } - } - .list-item-section { - &:first-child { - display: flex; - color: $fg-color; - min-width: $arrow-element-width; + .vlm-list-view { + .vlm-list { + .vlm-list-item.orphan-list-item { + @include overview-tile-shadow(); + margin-left: 0; - } - } - .list-item-arrow-col { - flex: 0.01; - margin-left: $arrow-margin - $list-indentation; - padding-left: $list-indentation; - } - } - &.vlm-list-item-ep { - margin-left: $list-indentation * 2; - margin-top: 10px; - cursor: default; - .ep-icon { - @include create-circle($circle-icon-size, $lkg-ep-color); - color: $white; - } - .vlm-list-item-title { - .item-name { - color: $lkg-ep-color; - } - } - .list-item-section { - &:first-child { - display: none; - } - &.list-item-icon-col { - margin-left: 52px; - } + .vlm-list-item-title { + .item-name { + color: $dark-gray; + } + } + .list-item-icon-col { + .overview-list-icon { + background-color: $gray; + border-color: $gray; + } + } + .list-item-section { + &:first-child { + display: flex; + color: $white; + min-width: $arrow-element-width; + } + &.list-item-icon-col { + margin-left: 65px; + margin-right: 65px - $list-item-padding; + } + } + } + } } + } + .vlm-list-view { + flex: 1; + .vlm-list { + @extend .flex; + flex-direction: column; + .vlm-list-item { + @include border-shadow(); + min-height: 90px; + height: 90px; + background-color: $tlv-gray; + @extend .flex; + border: 1px solid $tlv-light-gray; + margin-bottom: 0px; + .clickable { + cursor: pointer; + } - } - &.vlm-list-item-lkg { - margin-top: 10px; - margin-left: $list-indentation * 2; - cursor: default; - .lkg-icon { - @include create-circle($circle-icon-size, $lkg-ep-color); - color: $white; - } - .vlm-list-item-title { - .item-name { - color: $lkg-ep-color; - } - } - .list-item-section { - &:first-child { - display: none; - } - &.list-item-icon-col { - margin-left: 52px; - } + .list-item-section { + .count-value { + @extend .body-3; + } + &.list-item-icon-col { + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; + padding: 0; + margin-right: 40px - $list-item-padding; + margin-left: $icon-margin; + .overview-list-icon { + @extend .body-2; + } + } + padding: 15px; + &.list-item-arrow-col { + padding: 0; + } + .children-count { + @extend .body-1; + color: $gray; + padding-left: 5px; + .count-value { + padding: 0 5px; + } + } + .additional-data { + padding-left: 60px; + display: flex; + flex-direction: column; + justify-content: space-between; + *:last-child { + margin-top: 20px; + } + *:only-child { + margin-top: 0; + } + .additional-data-name { + @extend .body-2-semibold; + } + } + .additional-data-col-border { + border-left: 1px solid $tlv-light-gray; + min-height: 100%; + height: 100%; + } + } + .list-item-additional-data-col { + @extend .body-2; + @extend .flex; + align-items: stretch; + flex: 0.8; + margin-left: 30px; + padding-top: 17px; + padding-bottom: 11px; + } + .arrow-icon { + align-self: center; + } + .vlm-item-info { + flex: 1; + } + .vlm-list-item-title { + @extend .flex; + align-items: baseline; + .item-name { + @extend .heading-5-semibold; + flex: 0 1 auto; + margin-bottom: 4px; + text-transform: uppercase; + } + } + .vlm-list-item-description { + @extend .body-1; + @include multiline-ellipsis($lineCount: 3, $bgColor: $tlv-gray); + max-height: 38px; + } + &.vlm-list-item-la { + margin-top: 10px; + .la-icon { + @include create-circle($circle-icon-size, $la-color); + color: $white; + } + .vlm-list-item-title { + .item-name { + color: $la-color; + } + } + .list-item-section { + &:first-child { + display: flex; + color: $la-color; + min-width: $arrow-element-width; + } + } + .list-item-arrow-col { + flex: 0.01; + margin-left: $arrow-margin; + justify-content: center; + } + } + &.vlm-list-item-fg { + margin-left: $list-indentation; + margin-top: 10px; + .fg-pipeline-separator { + color: $dark-gray; + padding: 0 5px; + } + .list-item-icon-col { + margin-left: 29px; + } + .fg-icon { + @include create-circle($circle-icon-size, $fg-color); + color: $white; + } + .vlm-list-item-title { + .item-name { + color: $fg-color; + } + } + .list-item-section { + &:first-child { + display: flex; + color: $fg-color; + min-width: $arrow-element-width; + } + } + .list-item-arrow-col { + flex: 0.01; + margin-left: $arrow-margin - $list-indentation; + padding-left: $list-indentation; + } + } + &.vlm-list-item-ep { + margin-left: $list-indentation * 2; + margin-top: 10px; + cursor: default; + .ep-icon { + @include create-circle($circle-icon-size, $lkg-ep-color); + color: $white; + } + .vlm-list-item-title { + .item-name { + color: $lkg-ep-color; + } + } + .list-item-section { + &:first-child { + display: none; + } + &.list-item-icon-col { + margin-left: 52px; + } + } + } + &.vlm-list-item-lkg { + margin-top: 10px; + margin-left: $list-indentation * 2; + cursor: default; + .lkg-icon { + @include create-circle($circle-icon-size, $lkg-ep-color); + color: $white; + } + .vlm-list-item-title { + .item-name { + color: $lkg-ep-color; + } + } + .list-item-section { + &:first-child { + display: none; + } + &.list-item-icon-col { + margin-left: 52px; + } + } + } + } } - } } - - } } - } - } diff --git a/openecomp-ui/resources/scss/modules/_mergeEditor.scss b/openecomp-ui/resources/scss/modules/_mergeEditor.scss index 96648dd20f..000e42d5b4 100644 --- a/openecomp-ui/resources/scss/modules/_mergeEditor.scss +++ b/openecomp-ui/resources/scss/modules/_mergeEditor.scss @@ -5,203 +5,201 @@ $selected-width: 1px; $selected-color: $blue; @mixin levels { - @for $i from 1 to 6 { - .level-#{$i} { - padding-left: 18px + 10 * $i; - } - } + @for $i from 1 to 6 { + .level-#{$i} { + padding-left: 18px + 10 * $i; + } + } } .merge-editor-modal { - .modal-lg { - width: 1300px; - } + .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; - } - } - } + 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; + + .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 39f7636e79..bf0c14649e 100644 --- a/openecomp-ui/resources/scss/modules/_onboardingCatalog.scss +++ b/openecomp-ui/resources/scss/modules/_onboardingCatalog.scss @@ -1,63 +1,63 @@ $transitionLength: 0.6s; .catalog-view { - background-color: $background-gray; - overflow: hidden; - height: 100%; - display: flex; - @import "onboardingCatalog/catalogFilter.scss"; - .catalog-parts { - width: 100%; - @import "onboardingCatalog/onboardHeader"; - @import "onboardingCatalog/catalogHeader"; - } - @import "onboardingCatalog/vendorPageHeader"; - @import "onboardingCatalog/catalogList"; - @import "onboardingCatalog/vspOverlay"; - .catalog-wrapper { - height: 100%; - overflow: auto; - .tab-separator { - content: ''; - height: 25px; - border-right: 1px solid $dark-gray; - } - .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; - text-transform: none; - } - } - } - } + background-color: $background-gray; + overflow: hidden; + height: 100%; + display: flex; + @import 'onboardingCatalog/catalogFilter.scss'; + .catalog-parts { + width: 100%; + @import 'onboardingCatalog/onboardHeader'; + @import 'onboardingCatalog/catalogHeader'; + } + @import 'onboardingCatalog/vendorPageHeader'; + @import 'onboardingCatalog/catalogList'; + @import 'onboardingCatalog/vspOverlay'; + .catalog-wrapper { + height: 100%; + overflow: auto; + .tab-separator { + content: ''; + height: 25px; + border-right: 1px solid $dark-gray; + } + .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; + text-transform: none; + } + } + } + } } diff --git a/openecomp-ui/resources/scss/modules/_permissions.scss b/openecomp-ui/resources/scss/modules/_permissions.scss index e652d9d82f..5f83dc2fe9 100644 --- a/openecomp-ui/resources/scss/modules/_permissions.scss +++ b/openecomp-ui/resources/scss/modules/_permissions.scss @@ -1,55 +1,50 @@ -.modal-content { - .modal-body { - .manage-permissions-page { - .validation-form-content { - overflow-y: visible; - } +.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 - } - } - } - } + .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 index 2b196c132c..619fe7e53e 100644 --- a/openecomp-ui/resources/scss/modules/_revisions.scss +++ b/openecomp-ui/resources/scss/modules/_revisions.scss @@ -1,86 +1,68 @@ .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 { + .revision-list-item { &.selected { - .selectable, .selectable:hover { - border-width: 2px; - border-color: $light-blue; - } + .selectable, + .selectable:hover { + border-width: 2px; + border-color: $light-blue; + } } - .selectable:hover{ - border-color: $gray; + .selectable:hover { + border-color: $gray; } .selectable:active { - border-color: $light-blue; + border-color: $light-blue; } - } + } - .list-editor-view-list-scroller { - margin-top : 0px; - } + .list-editor-view-list-scroller { + margin-top: 0px; + } - .list-editor-view-header { + .list-editor-view-header { border-bottom: none; .list-editor-view-title { - @extend .heading-5; - text-transform: none; - color: $blue; + @extend .heading-5; + text-transform: none; + color: $blue; } - } + } - .list-editor-item-view-content { + .list-editor-item-view-content { background-color: $background-gray; - } - .revision-list-item-fields { + } + .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; - } + 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; - } + 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; - } + 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 81a109c97f..f24198cf59 100644 --- a/openecomp-ui/resources/scss/modules/_softwareProductAttachmentPage.scss +++ b/openecomp-ui/resources/scss/modules/_softwareProductAttachmentPage.scss @@ -1,267 +1,262 @@ - .vsp-attachments-view { - position: relative; - .attachments-tabs { - .sdc-tabs-list { - padding-left: 28px; - background-color: $tlv-gray; - box-shadow: none; - border-bottom: 1px solid $light-gray; - .sdc-tab { - @extend .heading-2; - padding-top: 10px; - margin-top: 0; - &.sdc-tab-active { - color: $blue; - font-weight: bold; + position: relative; + .attachments-tabs { + .sdc-tabs-list { + padding-left: 28px; + background-color: $tlv-gray; + box-shadow: none; + border-bottom: 1px solid $light-gray; + .sdc-tab { + @extend .heading-2; + padding-top: 10px; + margin-top: 0; + &.sdc-tab-active { + color: $blue; + font-weight: bold; + } + } + } + .sdc-tab-content { + margin-top: 0; } - } - } - .sdc-tab-content { - margin-top: 0; } - } - .attachments-view-controllers { - position: absolute; - right: 40px; - top: 10px; - display: flex; + .attachments-view-controllers { + position: absolute; + right: 40px; + top: 10px; + display: flex; - - .icon-component { - margin-right: 30px; - } + .icon-component { + margin-right: 30px; + } - input[type="file"] { - visibility: hidden; - width: 1px; - padding: 0; - margin-left: -1px; - } + input[type='file'] { + visibility: hidden; + width: 1px; + padding: 0; + margin-left: -1px; + } - .proceed-to-validation-btn { - margin-right: 30px; - } - .go-to-overview-btn { - width: 191px; - margin-right: 36px; - height: 36px; - } - .separator { - height: 27px; - border: 1px solid $light-gray; - margin-right: 31px; - margin-left: 0px; - margin-top: 3px; + .proceed-to-validation-btn { + margin-right: 30px; + } + .go-to-overview-btn { + width: 191px; + margin-right: 36px; + height: 36px; + } + .separator { + height: 27px; + border: 1px solid $light-gray; + margin-right: 31px; + margin-left: 0px; + margin-top: 3px; + } + .abort-btn { + fill: $blue; + color: $blue; + &:hover { + color: $light-blue; + fill: $light-blue; + } + } } - .abort-btn { - fill: $blue; - color: $blue; - &:hover { - color: $light-blue; - fill: $light-blue; - } - } - } } .vsp-attachments-heat-validation { - @extend .body-1; - display: flex; - .svg-icon.exclamationTriangleFull { - fill: $orange; - width: 15px; - height: 15px; - &.large { - width: 20px; - height: 20px; - } - } - .validation-tree-section { + @extend .body-1; display: flex; - width: 400px; - justify-content: space-between; - } - .vsp-attachments-heat-validation-tree { - @extend .flex-column; - margin: 0; - overflow: auto; - height: 100%; - .attachments-tree-header { - display: flex; - justify-content: space-between; - height: 55px; - align-items: center; - &.header-selected { - background: $tlv-gray; - } - .header-icon { - top: -3px; - position: relative; - margin-left: 20px; - } - .tree-header-title-text { - @extend .heading-4-semibold; - padding-left: 32px; - cursor: pointer; - &.tree-header-title-selected{ - color: $blue; + .svg-icon.exclamationTriangleFull { + fill: $orange; + width: 15px; + height: 15px; + &.large { + width: 20px; + height: 20px; } - } - .tree-header-title { - display: flex; - } } - .counters { - display: flex; - justify-content: space-between; - z-index: 1; - padding-right: 20px; - .counter { - .svg-icon { - &.__exclamationTriangleLine { - fill: $orange; - } - } + .validation-tree-section { display: flex; - &:first-child { - margin-right: 20px; - } - &:only-child { - margin-right: 0; - } - .svg-icon-wrapper { - margin-right: 5px; - } - .counter-icon { - margin-right: 5px; - } - .error-text, .warning-text { - @extend .body-3; - &.large { - @extend .heading-4-semibold; - } - } - } + width: 400px; + justify-content: space-between; } - .tree-wrapper { - flex: 1 1; - position: relative; - padding-bottom: 10px; - - @-moz-document url-prefix() { - .tree-block-inside { - top: 0; - position: relative; + .vsp-attachments-heat-validation-tree { + @extend .flex-column; + margin: 0; + overflow: auto; + height: 100%; + .attachments-tree-header { + display: flex; + justify-content: space-between; + height: 55px; + align-items: center; + &.header-selected { + background: $tlv-gray; + } + .header-icon { + top: -3px; + position: relative; + margin-left: 20px; + } + .tree-header-title-text { + @extend .heading-4-semibold; + padding-left: 32px; + cursor: pointer; + &.tree-header-title-selected { + color: $blue; + } + } + .tree-header-title { + display: flex; + } } - } - .tree-block-inside { - padding-left: 20px; - .tree-node-row { - cursor: default; - white-space: nowrap; - display: flex; - justify-content: space-between; - height: 40px; - align-items: center; - .svg-icon { - &.__chevronUp, &.__chevronDown { - height: 10px; - width: 10px; + .counters { + display: flex; + justify-content: space-between; + z-index: 1; + padding-right: 20px; + .counter { + .svg-icon { + &.__exclamationTriangleLine { + fill: $orange; + } + } + display: flex; + &:first-child { + margin-right: 20px; + } + &:only-child { + margin-right: 0; + } + .svg-icon-wrapper { + margin-right: 5px; + } + .counter-icon { + margin-right: 5px; + } + .error-text, + .warning-text { + @extend .body-3; + &.large { + @extend .heading-4-semibold; + } + } } - } + } + .tree-wrapper { + flex: 1 1; + position: relative; + padding-bottom: 10px; - &:after { - border-top: 1px solid $tlv-gray; - height: 40px; - position: absolute; - left: 0; - right: 0; - content: ' '; - } - @-moz-document url-prefix() { - &:after { - top: 0; + @-moz-document url-prefix() { + .tree-block-inside { + top: 0; + position: relative; + } } - } - &.tree-node-selected::before { - position: absolute; - left: 0; - right: 0; - height: 20px; - display: inline-block; - content: ' '; - background-color: $tlv-gray; - color: $blue; - } + .tree-block-inside { + padding-left: 20px; + .tree-node-row { + cursor: default; + white-space: nowrap; + display: flex; + justify-content: space-between; + height: 40px; + align-items: center; + .svg-icon { + &.__chevronUp, + &.__chevronDown { + height: 10px; + width: 10px; + } + } - &.tree-node-clicked { - color: $blue; - &:after { - background: $tlv-gray; - height: 40px; - position: absolute; - left: 0; - right: 0; - content: ' '; + &:after { + border-top: 1px solid $tlv-gray; + height: 40px; + position: absolute; + left: 0; + right: 0; + content: ' '; + } + @-moz-document url-prefix() { + &:after { + top: 0; + } + } + &.tree-node-selected::before { + position: absolute; + left: 0; + right: 0; + height: 20px; + display: inline-block; + content: ' '; + background-color: $tlv-gray; + color: $blue; + } + + &.tree-node-clicked { + color: $blue; + &:after { + background: $tlv-gray; + height: 40px; + position: absolute; + left: 0; + right: 0; + content: ' '; + } + } + .tree-node-name { + cursor: pointer; + } + .name-section { + z-index: 1; + flex: 1; + @include ellipsis(auto); + } + .tree-node-expander { + position: relative; + display: inline-block; + cursor: pointer; + } + .tree-node-icon { + margin: 0 7px; + } + } } - } - .tree-node-name { - cursor: pointer; - } - .name-section { - z-index: 1; - flex: 1; - @include ellipsis(auto); - } - .tree-node-expander { - position: relative; - display: inline-block; - cursor: pointer; - } - .tree-node-icon { - margin: 0 7px; - } } - } } - } - .vsp-attachments-heat-validation-separator { - border-left: 1px solid $tlv-light-gray; - height: 100%; - width: 5px; - cursor: e-resize; - } + .vsp-attachments-heat-validation-separator { + border-left: 1px solid $tlv-light-gray; + height: 100%; + width: 5px; + cursor: e-resize; + } - .message-board-section { - @extend .flex-column; - padding-left: 25px; - padding-top: 10px; - padding-right: 60px; - overflow: auto; - margin-bottom: 70px; - .error-item { - display: flex; - margin: 10px 0; - .large { - .svg-icon { - width: 20px; - height: 20px; - fill: $orange; + .message-board-section { + @extend .flex-column; + padding-left: 25px; + padding-top: 10px; + padding-right: 60px; + overflow: auto; + margin-bottom: 70px; + .error-item { + display: flex; + margin: 10px 0; + .large { + .svg-icon { + width: 20px; + height: 20px; + fill: $orange; + } + } + .error-item-file-type { + margin-left: 15px; + } + .error-file-name { + @extend .body-1-semibold; + margin-right: 5px; + } } - } - .error-item-file-type { - margin-left: 15px; - } - .error-file-name { - @extend .body-1-semibold; - margin-right: 5px; - } - - - } - - } - } diff --git a/openecomp-ui/resources/scss/modules/_softwareProductComponentCompute.scss b/openecomp-ui/resources/scss/modules/_softwareProductComponentCompute.scss index 164e3bc261..83941c002a 100644 --- a/openecomp-ui/resources/scss/modules/_softwareProductComponentCompute.scss +++ b/openecomp-ui/resources/scss/modules/_softwareProductComponentCompute.scss @@ -1,3 +1,3 @@ -.section-title.software-product-compute-number-of-vms{ - text-transform: initial; -}
\ No newline at end of file +.section-title.software-product-compute-number-of-vms { + text-transform: initial; +} diff --git a/openecomp-ui/resources/scss/modules/_softwareProductComponentGeneral.scss b/openecomp-ui/resources/scss/modules/_softwareProductComponentGeneral.scss index d31c7f0b92..f50e342304 100644 --- a/openecomp-ui/resources/scss/modules/_softwareProductComponentGeneral.scss +++ b/openecomp-ui/resources/scss/modules/_softwareProductComponentGeneral.scss @@ -1,13 +1,13 @@ .vsp-components-general { - .general-data { - .one-line-textarea { - height: 30px; + .general-data { + .one-line-textarea { + height: 30px; + } + .multi-line-textarea { + height: calc(100% - 25px); + textarea { + height: inherit; + } + } } - .multi-line-textarea { - height: calc(100% - 25px); - textarea { - height: inherit; - } - } - } } diff --git a/openecomp-ui/resources/scss/modules/_softwareProductComponentImage.scss b/openecomp-ui/resources/scss/modules/_softwareProductComponentImage.scss index b67c448b54..409b686814 100644 --- a/openecomp-ui/resources/scss/modules/_softwareProductComponentImage.scss +++ b/openecomp-ui/resources/scss/modules/_softwareProductComponentImage.scss @@ -1,67 +1,51 @@ -.image-modal-new { - .modal-dialog { - width: 600px; - } - .image-filename { - width: 480px; - } -} - -.image-modal-edit { - .modal-dialog { - width: 910px; - } - .image-filename { - width: 550px; - } -} - .vsp-components-image-editor { - .note-text { - color: $red; - } + .note-text { + color: $red; + } } -.image-modal-edit, .image-modal-new { - .vsp-components-image-editor { - - .image-format, .image-md5, .image-version { - width: 200px; - } - .image-version { - padding-left: 30px; - } - .section-title { - text-transform: uppercase; - font-size: 18px; +.image-modal-edit, +.image-modal-new { + .vsp-components-image-editor { + .image-format, + .image-md5, + .image-version { + width: 200px; + } + .image-version { + padding-left: 30px; + } + .section-title { + text-transform: uppercase; + font-size: 18px; + } } - } } .vsp-components-image { - .list-editor-view { - margin-top: 50px; - .manual-title { - @extend .body-1-semibold; + .list-editor-view { + margin-top: 50px; + .manual-title { + @extend .body-1-semibold; + } + } + .list-editor-item-view-content { + flex: 1; + min-width: 0; + } + .list-editor-item-view-controller { + padding-top: 5px; } - } - .list-editor-item-view-content { - flex:1; - min-width: 0; - } - .list-editor-item-view-controller { - padding-top: 5px; - } - .image-filename-cell { - display: flex; - .image-filename { - white-space: nowrap; - overflow: hidden; - display: inline-block; - text-overflow: ellipsis; - Â span { - @include ellipsis(100%); - } + .image-filename-cell { + display: flex; + .image-filename { + white-space: nowrap; + overflow: hidden; + display: inline-block; + text-overflow: ellipsis; + Â span { + @include ellipsis(100%); + } + } } - } } diff --git a/openecomp-ui/resources/scss/modules/_softwareProductComponentNetwork.scss b/openecomp-ui/resources/scss/modules/_softwareProductComponentNetwork.scss index eaba47acb4..464ef98d11 100644 --- a/openecomp-ui/resources/scss/modules/_softwareProductComponentNetwork.scss +++ b/openecomp-ui/resources/scss/modules/_softwareProductComponentNetwork.scss @@ -1,87 +1,85 @@ .vsp-components-network { - .network-data { - .single-col { - .validation-input-wrapper { - label { - max-width: 230px; + .network-data { + .single-col { + .validation-input-wrapper { + label { + max-width: 230px; + } + } } - } } - } - .list-editor-view { - margin-top: 50px; - .manual-title { - @extend .body-1-semibold; + .list-editor-view { + margin-top: 50px; + .manual-title { + @extend .body-1-semibold; + } } - } } .network-nic-modal-create { - .network-type-radio { - display: flex; - } + .network-type-radio { + display: flex; + .validation-radio-wrapper:first-child { + padding-right: 20px; + } + } } -.network-nic-modal-edit { - .modal-dialog { - width: 900px; - } - .vsp-components-network-editor { +.vsp-components-network-editor { .editor-data { - height: 500px; - .grid-section { - padding-bottom: 15px; - .section-title { - @extend .heading-5; - padding-bottom: 10px; - padding-left: 0; + height: 500px; + .grid-section { + padding-bottom: 15px; + .section-title { + @extend .heading-5; + padding-bottom: 10px; + padding-left: 0; + } } - } - .part-title { - @extend .heading-5; - padding-bottom: 10px; - padding-left: 14px; - } - .part-title-small { - @extend .heading-3; - padding-bottom: 10px; - padding-left: 0; - } - .network-radio label { - font-size: 15px; - } - - .packets-bytes-gen { - display: flex; - justify-content: space-between; - flex-direction: column; - .top-row { - display: flex; - .part-title-small { + .part-title { + @extend .heading-5; + padding-bottom: 10px; + padding-left: 14px; + } + .part-title-small { + @extend .heading-3; + padding-bottom: 10px; padding-left: 0; - &.packets { - flex: 0 0 52%; - } - &.bytes { - flex: 0 0 48%; - } - } } - .bottom-row { - display: flex; - justify-content: space-between; - flex-direction: row; - flex: 1; - .inputs-wrapper { + .network-radio label { + font-size: 15px; + } + + .packets-bytes-gen { display: flex; - flex-direction: row; justify-content: space-between; - flex: 1; - .validation-input-wrapper { - flex: 0 0 22%; + flex-direction: column; + .top-row { + display: flex; + .part-title-small { + padding-left: 0; + &.packets { + flex: 0 0 52%; + } + &.bytes { + flex: 0 0 48%; + } + } + } + .bottom-row { + display: flex; + justify-content: space-between; + flex-direction: row; + flex: 1; + .inputs-wrapper { + display: flex; + flex-direction: row; + justify-content: space-between; + flex: 1; + .validation-input-wrapper { + flex: 0 0 22%; + } + } } - } } - } } - } } diff --git a/openecomp-ui/resources/scss/modules/_softwareProductComponentProcessesPage.scss b/openecomp-ui/resources/scss/modules/_softwareProductComponentProcessesPage.scss index 9476d7043d..b3c4800492 100644 --- a/openecomp-ui/resources/scss/modules/_softwareProductComponentProcessesPage.scss +++ b/openecomp-ui/resources/scss/modules/_softwareProductComponentProcessesPage.scss @@ -1,9 +1,9 @@ .edit-process-modal { - .component-process-description > textarea { - height: 113px; - } + .component-process-description > textarea { + height: 113px; + } } .software-product-landing-view-right-side.vsp-components-processes-page { - overflow-y: initial; -}
\ No newline at end of file + overflow-y: initial; +} diff --git a/openecomp-ui/resources/scss/modules/_softwareProductCreatePage.scss b/openecomp-ui/resources/scss/modules/_softwareProductCreatePage.scss index b788a86e44..8b13789179 100644 --- a/openecomp-ui/resources/scss/modules/_softwareProductCreatePage.scss +++ b/openecomp-ui/resources/scss/modules/_softwareProductCreatePage.scss @@ -1,39 +1 @@ -.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-semibold; - 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/_softwareProductDependencies.scss b/openecomp-ui/resources/scss/modules/_softwareProductDependencies.scss index 65c558fa0e..5358e7c51b 100644 --- a/openecomp-ui/resources/scss/modules/_softwareProductDependencies.scss +++ b/openecomp-ui/resources/scss/modules/_softwareProductDependencies.scss @@ -2,22 +2,22 @@ .software-product-dependencies-title { @extend .heading-1; @extend .text-uppercase !optional; - position: sticky; - top: -30px; - z-index: 1; - background: $white; + 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; + position: sticky; + top: 4px; + z-index: 1; + background: $white; justify-content: flex-end; cursor: pointer; color: $blue; - padding-right: 27px; + padding-right: 27px; margin-bottom: 3px; &:hover { color: $dark-blue; @@ -26,23 +26,24 @@ .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; + .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 b5f9a546d9..85eea9c742 100644 --- a/openecomp-ui/resources/scss/modules/_softwareProductDeployment.scss +++ b/openecomp-ui/resources/scss/modules/_softwareProductDeployment.scss @@ -1,46 +1,38 @@ .deployment-flavor-editor { - .modal-dialog { - width: 780px; - } - .deployment-feature-groups-section.no-feature-groups { - padding-bottom: 0; - .form-group { - margin-bottom: 5px; - } - } - .deployment-feature-group-warning-section { - padding-bottom: 30px; - span { - @extend .body-2; - color: $red; - } - } - .grid-section.vfc-table { - .section-title { - padding-bottom: 10px; - } - } - .modal-content { - .modal-body { - .validation-form-content { - overflow-y: visible; - .grid-col-1 { - flex-basis: 30%; - } + .deployment-feature-groups-section.no-feature-groups { + padding-bottom: 0; + .form-group { + margin-bottom: 5px; + } + } + .deployment-feature-group-warning-section { + padding-bottom: 30px; + span { + @extend .body-2; + color: $red; + } + } + .grid-section.vfc-table { + .section-title { + padding-bottom: 10px; + } + } + &.sdc-modal__content { + .validation-form-content { + .grid-col-1 { + flex-basis: 30%; + } + .grid-section.vfc-table { + padding-bottom: 50px; + .Select-menu { + max-height: 100px; + } + } - .grid-section.vfc-table { - padding-bottom: 50px; - .Select-menu { - max-height: 100px; - } - - } - - .grid-col-3 { - flex-basis: 65%; - } - } - } - } + .grid-col-3 { + flex-basis: 65%; + } + } + } } diff --git a/openecomp-ui/resources/scss/modules/_softwareProductLandingPage.scss b/openecomp-ui/resources/scss/modules/_softwareProductLandingPage.scss index 8d124c3b40..8f0803f6d0 100644 --- a/openecomp-ui/resources/scss/modules/_softwareProductLandingPage.scss +++ b/openecomp-ui/resources/scss/modules/_softwareProductLandingPage.scss @@ -1,276 +1,273 @@ .upload-modal-body-content { - padding-left: 30px; - padding-right: 30px; - padding-bottom: 10px; - .title { - @extend .body-1-semibold; - } - .file-name { - padding-left: 5px; - @extend .body-1-semibold; - } + padding-left: 30px; + padding-right: 30px; + padding-bottom: 10px; + .title { + @extend .body-1-semibold; + } + .file-name { + padding-left: 5px; + @extend .body-1-semibold; + } } - .software-product-view { - display: flex; - height:100%; + display: flex; + height: 100%; - .description { - @extend .body-1; - padding-right: 20px; + .description { + @extend .body-1; + padding-right: 20px; - .missing-license { - display: flex; - align-items: baseline; - .svg-icon{ - margin-right: 7px; - margin-left: 3px; - &.__exclamationTriangleFull { - fill: $orange; - width: 17px; - height: 17px; + .missing-license { + display: flex; + align-items: baseline; + .svg-icon { + margin-right: 7px; + margin-left: 3px; + &.__exclamationTriangleFull { + fill: $orange; + width: 17px; + height: 17px; + } + } + .warning-text { + position: relative; + top: -2px; + } } - } - .warning-text { - position: relative; - top: -2px; - } } - } - .name { - @extend .body-1-semibold; - } - .software-product-landing-view-right-side { - @extend .flex; - overflow-y: hidden; - .list-editor-view { - .list-editor-view-title { - margin-bottom: 0; - } + .name { + @extend .body-1-semibold; } - } - .software-product-landing-view { - padding-bottom: 50px; - - - .software-product-landing-view-top { - .details-container { - @extend .flex-column; - - .single-detail-section { - - @extend .flex-column; - &.title-section { - flex: 0.8; - @extend .heading-5-semibold; - } - &.title-text { - margin-bottom: 24px; - } - .description { - @include multiline-ellipsis(); - } - } - .title { - @extend .body-3; - color: $gray; - &.extra-large { - min-width: 130px; - } - } - .details-section { - display: flex; - } - .multiple-details-section { - @extend .flex-column; - justify-content: space-between; - .detail-col { - padding-bottom: 10px; - } - } - } - .row { - margin: 0; - display: flex; - .details-panel { - flex: 1; - margin-right: 50px; - &:last-child { - margin-right: 0; - } - .software-product-landing-view-top-block-col-upl { - height: 215px; - width: initial; - } + .software-product-landing-view-right-side { + @extend .flex; + overflow-y: hidden; + .list-editor-view { + .list-editor-view-title { + margin-bottom: 0; + } } - .col-md-6 { - padding: 0; + } + .software-product-landing-view { + padding-bottom: 50px; - overflow-wrap: break-word; - &:first-child { - padding-right: 25px; - } - &:last-child { - padding-left: 25px; - } - } - .title { - @extend .body-1-semibold; - } - .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 { - &.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; + .software-product-landing-view-top { + .details-container { + @extend .flex-column; - .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; + .single-detail-section { + @extend .flex-column; + &.title-section { + flex: 0.8; + @extend .heading-5-semibold; + } + &.title-text { + margin-bottom: 24px; + } + .description { + @include multiline-ellipsis(); + } + } + .title { + @extend .body-3; + color: $gray; + &.extra-large { + min-width: 130px; + } + } + .details-section { + display: flex; + } + .multiple-details-section { + @extend .flex-column; + justify-content: space-between; + .detail-col { + padding-bottom: 10px; + } + } } - } - } + .row { + margin: 0; + display: flex; + .details-panel { + flex: 1; + margin-right: 50px; + &:last-child { + margin-right: 0; + } + .software-product-landing-view-top-block-col-upl { + height: 215px; + width: initial; + } + } + .col-md-6 { + padding: 0; - .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; + overflow-wrap: break-word; + &:first-child { + padding-right: 25px; + } + &:last-child { + padding-left: 25px; + } + } + .title { + @extend .body-1-semibold; + } + .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 { + &.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; - } - .drag-text { - color: $blue; - @extend .body-1-semibold; - } - .or-text { - margin-top: 10px; - margin-bottom: 10px; - color: $light-gray; - } - .upload { - width: 50%; - border : 0px !important; - } - .vnfRepo { - width: 50%; - cursor: pointer; - .searchRepo-text { - color: $blue; - @extend .body-1-semibold; - width: 72px; - line-height: 24px; - margin-left: auto; - margin-right: auto; - } - .svg-icon-wrapper { - .svg-icon.__search { - width: 34px; - height: 34px; - margin-top: 10px; - } - &.__positive { - fill: $blue; - color: $blue; - } + .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; + 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; + color: $light-gray; + } + .upload { + width: 50%; + border: 0px !important; + } + .vnfRepo { + width: 50%; + cursor: pointer; + .searchRepo-text { + color: $blue; + @extend .body-1-semibold; + width: 72px; + line-height: 24px; + margin-left: auto; + margin-right: auto; + } + .svg-icon-wrapper { + .svg-icon.__search { + width: 34px; + height: 34px; + margin-top: 10px; + } + &.__positive { + fill: $blue; + color: $blue; + } + } + } + .verticalLine { + height: 90%; + border-left: 1px solid $light-gray; + } + } + .showVnf { + flex-direction: row; + } } - } - .verticalLine { - height: 90%; - border-left: 1px solid $light-gray; - } - } - .showVnf { - flex-direction: row; } - } } - } } .vsp-details-page { - .grid-section-general { - padding-bottom: 30px; - } - .vsp-general-tab { - .validation-form-content { - margin: 0; + .grid-section-general { + padding-bottom: 30px; } - .validation-buttons { - margin: 43px 0; - padding: 0 52px; - } - .validation-form-content { - .vsp-general-tab-inline-section { - display: flex; - - .vsp-general-tab-sub-section:not(:last-of-type) { - margin-right: 40px; + .vsp-general-tab { + .validation-form-content { + margin: 0; } - .field-section { - width: 440px; + .validation-buttons { + margin: 43px 0; + padding: 0 52px; } - .form-group textarea { - height: 192px; - } - select optgroup[label] { - color: $dark-blue; + .validation-form-content { + .vsp-general-tab-inline-section { + display: flex; + + .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; + } + } } - option { - color: $dark-gray; + .validation-buttons { + position: fixed; + display: block; + bottom: 0; + width: 66%; } - .Select, .input-options { - width: 440px; + .validation-input-wrapper { + select.form-control { + width: 100%; + } } - } - } - .validation-buttons { - position: fixed; - display: block; - bottom: 0; - width: 66%; - } - .validation-input-wrapper { - select.form-control { - width: 100%; - } } - } } diff --git a/openecomp-ui/resources/scss/modules/_softwareProductProcessesPage.scss b/openecomp-ui/resources/scss/modules/_softwareProductProcessesPage.scss index 3f2a2f9a69..9ec074f09f 100644 --- a/openecomp-ui/resources/scss/modules/_softwareProductProcessesPage.scss +++ b/openecomp-ui/resources/scss/modules/_softwareProductProcessesPage.scss @@ -1,60 +1,60 @@ .edit-process-modal { - height: 100%; - .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; + height: 100%; + .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; - .process-type { - width: 100%; - } - } - .vsp-processes-editor-data { - .validation-input-wrapper { - .form-group.vsp-process-description > textarea { - height: 113px; + .process-type { + width: 100%; + } + } + .vsp-processes-editor-data { + .validation-input-wrapper { + .form-group.vsp-process-description > textarea { + height: 113px; + } + } + .process-type { + width: 100%; + } + .process-editor-file-box { + width: 380px; + } } - } - .process-type { - width: 100%; - } - .process-editor-file-box { - width: 380px; - } } - } } .software-product-landing-view-right-side.vsp-processes-page { - overflow-y: initial; - .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; + overflow-y: initial; + .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 index 440b2424df..00f3ae4567 100644 --- a/openecomp-ui/resources/scss/modules/_softwareproductComponentLoadBalancing.scss +++ b/openecomp-ui/resources/scss/modules/_softwareproductComponentLoadBalancing.scss @@ -1,35 +1,35 @@ .vsp-components-load-balancing { - .svg-icon-wrapper { - position: relative; - top: -4px; - } + .svg-icon-wrapper { + position: relative; + top: -4px; + } - .halb-data { - .question { - padding-top: 10px; - &:first-child { - padding-top: 0; - } - } - .title { - @extend .body-1-semibold; - margin-bottom: 8px; - cursor: pointer; - .svg-icon { - @include transition(transform 0.3s); - margin-right: 5px; - position: relative; - top: 4px; - } - } - .add-padding { - padding-bottom: 20px; - } - .new-line { - margin-left: 16px; - } - textarea.form-control { - height: 90px; - } - } + .halb-data { + .question { + padding-top: 10px; + &:first-child { + padding-top: 0; + } + } + .title { + @extend .body-1-semibold; + margin-bottom: 8px; + cursor: pointer; + .svg-icon { + @include transition(transform 0.3s); + margin-right: 5px; + position: relative; + top: 4px; + } + } + .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 index 23f41c8816..1c3ed2ada1 100644 --- a/openecomp-ui/resources/scss/modules/_uploadScreen.scss +++ b/openecomp-ui/resources/scss/modules/_uploadScreen.scss @@ -1,32 +1,32 @@ .heat-validation-stand-alone { - .upload-screen { - margin-top: 100px; - .title { - text-align: center; - margin-bottom: 50px; + .upload-screen { + margin-top: 100px; + .title { + text-align: center; + margin-bottom: 50px; + } } - } - .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; - } + .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/_versionsPage.scss b/openecomp-ui/resources/scss/modules/_versionsPage.scss index 5651c89032..c29230198a 100644 --- a/openecomp-ui/resources/scss/modules/_versionsPage.scss +++ b/openecomp-ui/resources/scss/modules/_versionsPage.scss @@ -1,360 +1,361 @@ .dox-ui-punch-out { - background-color: $content-background-color; + 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; + 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); + 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; +@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; - } + .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; - } - .version-page-header { - display: flex; - justify-content: space-between; - .versions-page-title { - @extend .heading-1; - text-transform: uppercase; - margin-bottom: 29px; - color: $blue; - display: flex; - .archived-title { - @extend .body-3; - color: $white; - background-color: $dark-purple; - margin-left: 20px; - border-radius: 3px; - padding: 1px 10px; - align-self: center; - text-transform: none; - } - } - .deprecate-btn-wrapper { - display: flex; - justify-content: flex-end; - margin-bottom: 10px; - align-self: center; - .svg-icon-wrapper { - &:hover { - fill: $light-blue; - } - .svg-icon { - width: 24px; - height: 24px; - } - } - } - } - .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; - - .node:not(.selectedNode):hover { - .outer-circle, .inner-circle { - transform: scale(1.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 { - 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); - width: initial; - } - - &.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; - } + height: 100%; + background-color: $background-gray; + overflow: auto; + padding: 35px 50px 20px 50px; + + .svg-icon-wrapper { + justify-content: flex-start; + } + .version-page-header { + display: flex; + justify-content: space-between; + .versions-page-title { + @extend .heading-1; + text-transform: uppercase; + margin-bottom: 29px; + color: $blue; + display: flex; + .archived-title { + @extend .body-3; + color: $white; + background-color: $dark-purple; + margin-left: 20px; + border-radius: 3px; + padding: 1px 10px; + align-self: center; + text-transform: none; + } + } + .deprecate-btn-wrapper { + display: flex; + justify-content: flex-end; + margin-bottom: 10px; + align-self: center; + .svg-icon-wrapper { + &:hover { + fill: $light-blue; + } + .svg-icon { + width: 24px; + height: 24px; + } + } + } + } + .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; + + .node:not(.selectedNode):hover { + .outer-circle, + .inner-circle { + transform: scale(1.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 { + 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); + width: initial; + } + + &.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 deleted file mode 100644 index 9f88e94393..0000000000 --- a/openecomp-ui/resources/scss/modules/_vspComponentCompute.scss +++ /dev/null @@ -1,6 +0,0 @@ - -.compute-flavor-editor-modal-edit { - .modal-lg { - width: 1182px; - } -}
\ No newline at end of file diff --git a/openecomp-ui/resources/scss/modules/_vspComponentMonitoring.scss b/openecomp-ui/resources/scss/modules/_vspComponentMonitoring.scss index 14bad18179..867749d8e9 100644 --- a/openecomp-ui/resources/scss/modules/_vspComponentMonitoring.scss +++ b/openecomp-ui/resources/scss/modules/_vspComponentMonitoring.scss @@ -1,24 +1,22 @@ - .vsp-component-monitoring { - .dropzone { - &:not(:last-child) { - padding-bottom: 50px; - } + .dropzone { + &:not(:last-child) { + padding-bottom: 50px; + } - .monitoring-file { - display: flex; - .filename { - opacity: 1; - width: auto; - border-right-style: none; - } - .delete { - display: flex; - width: 30px; - justify-content: center; - align-items: center; - } + .monitoring-file { + display: flex; + .filename { + opacity: 1; + width: auto; + border-right-style: none; + } + .delete { + display: flex; + width: 30px; + justify-content: center; + align-items: center; + } + } } - } - } diff --git a/openecomp-ui/resources/scss/modules/_vspComponentQuestionnaire.scss b/openecomp-ui/resources/scss/modules/_vspComponentQuestionnaire.scss index 2a99263285..8a7575fd97 100644 --- a/openecomp-ui/resources/scss/modules/_vspComponentQuestionnaire.scss +++ b/openecomp-ui/resources/scss/modules/_vspComponentQuestionnaire.scss @@ -1,48 +1,47 @@ - .vsp-component-questionnaire-view { - input[type='checkbox'] { - &:before { - border: 1px solid $dark-gray; - cursor: pointer; - } - &:checked:before { - border: 1px solid $blue; - } - } - .component-questionnaire-validation-form { - - .section-field { - textarea { - height: 80px; - } + input[type='checkbox'] { + &:before { + border: 1px solid $dark-gray; + cursor: pointer; + } + &:checked:before { + border: 1px solid $blue; + } } - - .rows-section, .grid-items { - .row-flex-components { - display: flex; - } - - .vertical-flex { - flex-direction: column; - .control-label { - @extend .body-2-semibold; + .component-questionnaire-validation-form { + .section-field { + textarea { + height: 80px; + } } - .radio-options-content-row { - display: flex; - margin-top: -4px; - .validation-radio-wrapper { - margin-right: 20px; - & > .form-group { - display: flex; + .rows-section, + .grid-items { + .row-flex-components { + display: flex; } - .form-group .sdc-radio { - width: auto; - margin-right: 0; + + .vertical-flex { + flex-direction: column; + .control-label { + @extend .body-2-semibold; + } + .radio-options-content-row { + display: flex; + margin-top: -4px; + .validation-radio-wrapper { + margin-right: 20px; + + & > .form-group { + display: flex; + } + .form-group .sdc-radio { + width: auto; + margin-right: 0; + } + } + } } - } } - } } - } } diff --git a/openecomp-ui/resources/scss/modules/_vspHeatSetup.scss b/openecomp-ui/resources/scss/modules/_vspHeatSetup.scss index bd216c794b..e50ad2ddd7 100644 --- a/openecomp-ui/resources/scss/modules/_vspHeatSetup.scss +++ b/openecomp-ui/resources/scss/modules/_vspHeatSetup.scss @@ -1,282 +1,278 @@ @mixin modules-and-artifacts-list-items { - background-color: $tlv-gray; - margin-bottom: 12px; - border: 1px solid $light-gray; - border-left-width: 18px; - border-left-color: $blue; - display: flex; - flex-direction: column; - justify-content: space-between; - padding: 10px 20px 0 20px; + background-color: $tlv-gray; + margin-bottom: 12px; + border: 1px solid $light-gray; + border-left-width: 18px; + border-left-color: $blue; + display: flex; + flex-direction: column; + justify-content: space-between; + padding: 10px 20px 0 20px; } .heat-setup-view { - margin-top: 20px; - display: flex; - justify-content: space-between; - padding: 0 60px 0 36px; - - .heat-setup-view-modules-and-artifacts { - margin-right: 20px; - flex: 1; - .heat-setup-module-icon { - margin: 0 6px 0 0; - position: relative; - top: -2px; - } - - .modules-list-wrapper { - &.modules-list-wrapper-divider { - border-bottom: 1px solid $tlv-light-gray; - } - - ul { - .undefined-dragging { - opacity: 0.5; - } - .modules-list-item-selectors { - display: flex; - justify-content: space-between; - flex-wrap: wrap; - padding-bottom: 3px; - .Select-value-label { - @include ellipsis(85%); - } - - .validation-input-wrapper { - flex-basis: 48%; - } - - .control-label { - margin-bottom: 4px; - } - - .form-group { - margin-bottom: 12px; - } - } - } - - .modules-list-item-controllers { - display: flex; - justify-content: space-between; - margin-bottom: 7px; - - .btn { - min-width: 0; - } - - .svg-icon { - &.__trashO { - fill: $dark-gray; - &:hover { - fill: $black; - } - } - } - - .module-title-by-type { - @extend .heading-5-semibold; - margin-right: 3px; - } - .modules-list-item-filename { - display: flex; - align-items: center; - - .svg-icon { - &.__pencil { - margin-left: 3px; - opacity: 0; - } - } - - - - .filename-text { - @extend .heading-5-semibold; - - } - - .text-and-icon { - padding: 5px; - border: 1px solid transparent; - display: flex; - align-items: center; - height: 35px; - &.in-edit { - padding: 0; - .name-edit { - padding: 4px; - @extend .heading-5-semibold; - height: 100%; - border: 1px solid $light-gray; - width: 400px; - } - } - } - - input[disabled] { - border: none; - } - &:hover { - .text-and-icon { - border-color: $light-gray; - background-color: $white; - - &.in-edit { - border-color: transparent; - } - } - .svg-icon { - &.__pencil { - margin-left: 10px; - opacity: 1; - .svg-icon { - stroke: $dark-gray; - &:hover { - stroke: $black; - } - } - } - } - } - } - } - - .modules-list-item { - @include modules-and-artifacts-list-items; - position: relative; - .Select-option { - @extend .body-1; - &.is-selected { - @extend .body-1-semibold; - background-color: $white; - } - &.is-focused { - background-color: $blue; - color: $white; - } - } - .add-or-delete-volumes { - margin-right: 8px; - margin-bottom: 11px; - } - &:before { - content: "\00B7\00B7\00B7\00B7\00B7\00B7"; - color: $white; - position: absolute; - left: -27px; - top: 56%; - font-size: 27px; - width: 75px; - @include transform-rotate(90); - height: 0; - letter-spacing: 1px; - } - } - } - - .artifact-files { - @include modules-and-artifacts-list-items; - &.with-list-items { - margin-top: 10px; - } - - &.nested { - .nested-list { - display: flex; - flex-wrap: wrap; - margin-bottom: 18px; - } - - .nested-list-item { - border-radius: 15px; - background-color: $tlv-light-gray; - padding: 4px 15px; - margin: 2px 10px 2px 0; - } - } - - .artifact-files-header { - @extend .heading-5-semibold; - display: flex; - margin-bottom: 10px; - justify-content: space-between; - .image-icon.artifacts { - margin-right: 10px; - } - - span { - display: flex; - } - - } - } - } - - .modules-list-header { - height: 30px; - display: flex; - flex-direction: row; - flex-wrap: nowrap; - justify-content: flex-end; - align-items: baseline; - } - - .unassigned-files { - border: 1px solid $light-gray; - background-color: $white; - height: 250px; - width: 250px; - - // Will work in chrome from chrome 56 - position: sticky; - top: 10px; - - .unassigned-files-title { - @extend .heading-5-semibold; - background-color: $tlv-gray; - padding: 11px 0 9px 15px; - } - - .unassigned-files-list { - height: 207px; - overflow-y: auto; - padding-bottom: 5px; - - .go-to-validation-button-wrapper { - display: flex; - flex-direction: column; - justify-content: center; - align-items: center; - margin-top: 70px; - .all-files-assigned { - @extend .heading-4; - margin-bottom: 10px; - } - .svg-icon-wrapper { - margin-bottom: 10px; - .svg-icon { - &.__angleRight { - width: 10px; - height: 10px; - } - } - } - } - - .unassigned-files-list-item { - @include ellipsis(); - border-bottom: 1px solid $tlv-light-gray; - padding: 0 5px 5px 15px; - &:first-child { - padding-top: 5px; - } - &:last-child { - border-bottom: none; - padding-bottom: 0; - } - } - } - } + margin-top: 20px; + display: flex; + justify-content: space-between; + padding: 0 60px 0 36px; + + .heat-setup-view-modules-and-artifacts { + margin-right: 20px; + flex: 1; + .heat-setup-module-icon { + margin: 0 6px 0 0; + position: relative; + top: -2px; + } + + .modules-list-wrapper { + &.modules-list-wrapper-divider { + border-bottom: 1px solid $tlv-light-gray; + } + + ul { + .undefined-dragging { + opacity: 0.5; + } + .modules-list-item-selectors { + display: flex; + justify-content: space-between; + flex-wrap: wrap; + padding-bottom: 3px; + .Select-value-label { + @include ellipsis(85%); + } + + .validation-input-wrapper { + flex-basis: 48%; + } + + .control-label { + margin-bottom: 4px; + } + + .form-group { + margin-bottom: 12px; + } + } + } + + .modules-list-item-controllers { + display: flex; + justify-content: space-between; + margin-bottom: 7px; + + .btn { + min-width: 0; + } + + .svg-icon { + &.__trashO { + fill: $dark-gray; + &:hover { + fill: $black; + } + } + } + + .module-title-by-type { + @extend .heading-5-semibold; + margin-right: 3px; + } + .modules-list-item-filename { + display: flex; + align-items: center; + + .svg-icon { + &.__pencil { + margin-left: 3px; + opacity: 0; + } + } + + .filename-text { + @extend .heading-5-semibold; + } + + .text-and-icon { + padding: 5px; + border: 1px solid transparent; + display: flex; + align-items: center; + height: 35px; + &.in-edit { + padding: 0; + .name-edit { + padding: 4px; + @extend .heading-5-semibold; + height: 100%; + border: 1px solid $light-gray; + width: 400px; + } + } + } + + input[disabled] { + border: none; + } + &:hover { + .text-and-icon { + border-color: $light-gray; + background-color: $white; + + &.in-edit { + border-color: transparent; + } + } + .svg-icon { + &.__pencil { + margin-left: 10px; + opacity: 1; + .svg-icon { + stroke: $dark-gray; + &:hover { + stroke: $black; + } + } + } + } + } + } + } + + .modules-list-item { + @include modules-and-artifacts-list-items; + position: relative; + .Select-option { + @extend .body-1; + &.is-selected { + @extend .body-1-semibold; + background-color: $white; + } + &.is-focused { + background-color: $blue; + color: $white; + } + } + .add-or-delete-volumes { + margin-right: 8px; + margin-bottom: 11px; + } + &:before { + content: '\00B7\00B7\00B7\00B7\00B7\00B7'; + color: $white; + position: absolute; + left: -27px; + top: 56%; + font-size: 27px; + width: 75px; + @include transform-rotate(90); + height: 0; + letter-spacing: 1px; + } + } + } + + .artifact-files { + @include modules-and-artifacts-list-items; + &.with-list-items { + margin-top: 10px; + } + + &.nested { + .nested-list { + display: flex; + flex-wrap: wrap; + margin-bottom: 18px; + } + + .nested-list-item { + border-radius: 15px; + background-color: $tlv-light-gray; + padding: 4px 15px; + margin: 2px 10px 2px 0; + } + } + + .artifact-files-header { + @extend .heading-5-semibold; + display: flex; + margin-bottom: 10px; + justify-content: space-between; + .image-icon.artifacts { + margin-right: 10px; + } + + span { + display: flex; + } + } + } + } + + .modules-list-header { + height: 30px; + display: flex; + flex-direction: row; + flex-wrap: nowrap; + justify-content: flex-end; + align-items: baseline; + } + + .unassigned-files { + border: 1px solid $light-gray; + background-color: $white; + height: 250px; + width: 250px; + + // Will work in chrome from chrome 56 + position: sticky; + top: 10px; + + .unassigned-files-title { + @extend .heading-5-semibold; + background-color: $tlv-gray; + padding: 11px 0 9px 15px; + } + + .unassigned-files-list { + height: 207px; + overflow-y: auto; + padding-bottom: 5px; + + .go-to-validation-button-wrapper { + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; + margin-top: 70px; + .all-files-assigned { + @extend .heading-4; + margin-bottom: 10px; + } + .svg-icon-wrapper { + margin-bottom: 10px; + .svg-icon { + &.__angleRight { + width: 10px; + height: 10px; + } + } + } + } + + .unassigned-files-list-item { + @include ellipsis(); + border-bottom: 1px solid $tlv-light-gray; + padding: 0 5px 5px 15px; + &:first-child { + padding-top: 5px; + } + &:last-child { + border-bottom: none; + padding-bottom: 0; + } + } + } + } } diff --git a/openecomp-ui/resources/scss/modules/_workflows.scss b/openecomp-ui/resources/scss/modules/_workflows.scss index 894b6e7973..c7ce4521f5 100644 --- a/openecomp-ui/resources/scss/modules/_workflows.scss +++ b/openecomp-ui/resources/scss/modules/_workflows.scss @@ -1,27 +1,19 @@ - .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; - } + position: absolute; + bottom: 0; + right: 0; + left: 0; + top: 0; - .list-editor-view { - padding: 30px 50px; - } - -} + 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; + } -.workflows-editor-modal { - .modal-body { - padding: 0; - } - .validation-form-content { - padding: 15px; - } + .list-editor-view { + padding: 30px 50px; + } } diff --git a/openecomp-ui/resources/scss/modules/onboardingCatalog/_catalogFilter.scss b/openecomp-ui/resources/scss/modules/onboardingCatalog/_catalogFilter.scss index e3fc6a9143..1b6459a429 100644 --- a/openecomp-ui/resources/scss/modules/onboardingCatalog/_catalogFilter.scss +++ b/openecomp-ui/resources/scss/modules/onboardingCatalog/_catalogFilter.scss @@ -13,7 +13,7 @@ height: 34px; color: $blue; font-weight: bolder; - text-transform: uppercase; + text-transform: uppercase; } .sdc-accordion { padding-left: 18px; diff --git a/openecomp-ui/resources/scss/modules/onboardingCatalog/_catalogHeader.scss b/openecomp-ui/resources/scss/modules/onboardingCatalog/_catalogHeader.scss index 0a234a5a96..429d6cc3d3 100644 --- a/openecomp-ui/resources/scss/modules/onboardingCatalog/_catalogHeader.scss +++ b/openecomp-ui/resources/scss/modules/onboardingCatalog/_catalogHeader.scss @@ -1,33 +1,33 @@ .catalog-header { - margin: 34px 0 29px 50px; - display: flex; - flex-direction: row; - .expandable-input-top { - margin-right: 60px; - } - &.workspace-header { - @extend .heading-1; - color: $blue; - } - .catalog-header-tabs { - display: flex; - flex-direction: row; - .tab-separator { - position: relative; - top: 8px; - } - .catalog-header-tab { - @extend .heading-1; - cursor: pointer; - padding: 0 15px 0 15px; - display: flex; - align-items: center; - &.active { - color: $blue; - } - &:first-child { - padding-left: 0; - } - } - } + margin: 34px 0 29px 50px; + display: flex; + flex-direction: row; + .expandable-input-top { + margin-right: 60px; + } + &.workspace-header { + @extend .heading-1; + color: $blue; + } + .catalog-header-tabs { + display: flex; + flex-direction: row; + .tab-separator { + position: relative; + top: 8px; + } + .catalog-header-tab { + @extend .heading-1; + cursor: pointer; + padding: 0 15px 0 15px; + display: flex; + align-items: center; + &.active { + color: $blue; + } + &:first-child { + padding-left: 0; + } + } + } } diff --git a/openecomp-ui/resources/scss/modules/onboardingCatalog/_catalogList.scss b/openecomp-ui/resources/scss/modules/onboardingCatalog/_catalogList.scss index 11a739d004..c632beb382 100644 --- a/openecomp-ui/resources/scss/modules/onboardingCatalog/_catalogList.scss +++ b/openecomp-ui/resources/scss/modules/onboardingCatalog/_catalogList.scss @@ -1,39 +1,37 @@ .catalog-list { - height: 100%; - overflow: auto; - display: flex; - flex-direction: column; - padding: 0 10px 0 42px; - .catalog-title { - @extend .heading-1; - color: $blue; - margin:0 0 12px 18px; - } + height: 100%; + overflow: auto; + display: flex; + flex-direction: column; + padding: 0 10px 0 42px; + .catalog-title { + @extend .heading-1; + color: $blue; + margin: 0 0 12px 18px; + } - .catalog-items { - display: flex; - flex-wrap: wrap; - @import "tile"; - @import "createItemTile"; - @import "catalogTile"; - @import "vendorTile"; - @import "vlmTile"; - &:after { - content: " "; - height: 250px; - display: block; - width: 100%; - } - .venodor-tile-btn { - border: 1px solid $light-gray; - color: $black; - line-height: 20px; - &:hover { - background-color: $light-gray; - } - } - } - - // Bottom spacing - cross browser solution + .catalog-items { + display: flex; + flex-wrap: wrap; + @import 'tile'; + @import 'createItemTile'; + @import 'catalogTile'; + @import 'vendorTile'; + &:after { + content: ' '; + height: 250px; + display: block; + width: 100%; + } + .venodor-tile-btn { + border: 1px solid $light-gray; + color: $black; + line-height: 20px; + &:hover { + background-color: $light-gray; + } + } + } + // Bottom spacing - cross browser solution } diff --git a/openecomp-ui/resources/scss/modules/onboardingCatalog/_catalogTile.scss b/openecomp-ui/resources/scss/modules/onboardingCatalog/_catalogTile.scss index 612ec495cd..a2c7997266 100644 --- a/openecomp-ui/resources/scss/modules/onboardingCatalog/_catalogTile.scss +++ b/openecomp-ui/resources/scss/modules/onboardingCatalog/_catalogTile.scss @@ -1,147 +1,144 @@ .catalog-tile { - &:hover { - box-shadow: 0.3px 5px 12.8px 1.3px rgba(24, 24, 25, 0.15); - border: 1px solid $light-gray; - } - .catalog-tile-top { - position: relative; - flex: 1; - display: flex; - padding-top: 29px; - padding-left: 10px; - align-items: flex-start; - flex-direction: column; - .catalog-tile-content { - margin-top: auto; - width: 180px; - } - - .catalog-tile-type { - display: block; - margin-top: -25px; - font-size: $heading-font-5; - &.license-model-type { - color: $purple; - } - &.software-product-type { - color: $blue; - } - } - .catalog-tile-entity-details { - margin-top: 20px; - display: flex; - flex-direction: column; - justify-content: space-between; - flex: 0.8; - .catalog-tile-version-info { - display: flex; - justify-content: space-between; - - .catalog-tile-item-version { - @extend .body-2; - line-height: 6px; - } - } - .catalog-tile-vendor-name { - @extend .body-3; - flex: 0.4; - align-self: baseline; - color: $gray; - line-height: 10px; - &:first-letter { - text-transform: capitalize; + &:hover { + box-shadow: 0.3px 5px 12.8px 1.3px rgba(24, 24, 25, 0.15); + border: 1px solid $light-gray; } - @include ellipsis(auto, inline-block, 178px); - } - - } - .catalog-tile-item-name { - @extend .heading-5-semibold; - color: $black; - @include ellipsis(auto, inline-block, 175px); - line-height: inherit; - &:first-letter { - text-transform: capitalize; - } - } - } - .catalog-tile-icon { + .catalog-tile-top { + position: relative; + flex: 1; + display: flex; + padding-top: 29px; + padding-left: 10px; + align-items: flex-start; + flex-direction: column; + .catalog-tile-content { + margin-top: auto; + width: 180px; + } - width: 58px; - height: 58px; - text-align: center; - justify-content: center; - display: flex; + .catalog-tile-type { + display: block; + margin-top: -25px; + font-size: $heading-font-5; + &.license-model-type { + color: $purple; + } + &.software-product-type { + color: $blue; + } + } + .catalog-tile-entity-details { + margin-top: 20px; + display: flex; + flex-direction: column; + justify-content: space-between; + flex: 0.8; + .catalog-tile-version-info { + display: flex; + justify-content: space-between; - .icon { - align-self: center; - height: 58px; - width: 58px; - margin-left: 122px; - background-repeat: no-repeat; - .svg-icon { - &.__vendor { - fill: $dark-gray; - &:hover { - fill: $dark-gray; - } - margin-top: 22px; - } - &.__vsp { - fill: $light-blue; - } - margin-top: 18px; - margin-left: 3px; - &.__vlm { - margin-top: 18px; - fill: $purple; - } - } - } - } - .catalog-tile-content { - border-top: 1px solid $background-gray; - padding-top: 5px; - display: flex; - justify-content: space-between; - margin-top: 2px; - padding-bottom: 3px; - @extend .body-2-semibold; - .svg-icon { - &.__plus { - width: 20px; - height: 20px; - fill: $blue; - } - } - .catalog-tile-item-details { - overflow: hidden; - } + .catalog-tile-item-version { + @extend .body-2; + line-height: 6px; + } + } + .catalog-tile-vendor-name { + @extend .body-3; + flex: 0.4; + align-self: baseline; + color: $gray; + line-height: 10px; + &:first-letter { + text-transform: capitalize; + } + @include ellipsis(auto, inline-block, 178px); + } + } + .catalog-tile-item-name { + @extend .heading-5-semibold; + color: $black; + @include ellipsis(auto, inline-block, 175px); + line-height: inherit; + &:first-letter { + text-transform: capitalize; + } + } + } + .catalog-tile-icon { + width: 58px; + height: 58px; + text-align: center; + justify-content: center; + display: flex; - .catalog-tile-add-new-vsp { - color: $blue; - .svg-icon { - &.__plus { - width: 20px; - height: 20px; + .icon { + align-self: center; + height: 58px; + width: 58px; + margin-left: 122px; + background-repeat: no-repeat; + .svg-icon { + &.__vendor { + fill: $dark-gray; + &:hover { + fill: $dark-gray; + } + margin-top: 22px; + } + &.__vsp { + fill: $light-blue; + } + margin-top: 18px; + margin-left: 3px; + &.__vlm { + margin-top: 18px; + fill: $purple; + } + } + } + } + .catalog-tile-content { + border-top: 1px solid $background-gray; + padding-top: 5px; + display: flex; + justify-content: space-between; + margin-top: 2px; + padding-bottom: 3px; + @extend .body-2-semibold; + .svg-icon { + &.__plus { + width: 20px; + height: 20px; + fill: $blue; + } + } + .catalog-tile-item-details { + overflow: hidden; + } - } - } - margin-left: 40px; - } - .catalog-tile-locking-user-name { - @extend .body-2; - @include ellipsis(auto, inline-block, 180px); - } - .catalog-tile-check-in-status { - .svg-icon { - &.__locked { - fill: $gray; - } - &.__unlocked { - fill: $gray; - } - } - } - } + .catalog-tile-add-new-vsp { + color: $blue; + .svg-icon { + &.__plus { + width: 20px; + height: 20px; + } + } + margin-left: 40px; + } + .catalog-tile-locking-user-name { + @extend .body-2; + @include ellipsis(auto, inline-block, 180px); + } + .catalog-tile-check-in-status { + .svg-icon { + &.__locked { + fill: $gray; + } + &.__unlocked { + fill: $gray; + } + } + } + } } diff --git a/openecomp-ui/resources/scss/modules/onboardingCatalog/_createItemTile.scss b/openecomp-ui/resources/scss/modules/onboardingCatalog/_createItemTile.scss index d17dcdd685..9838e65b10 100644 --- a/openecomp-ui/resources/scss/modules/onboardingCatalog/_createItemTile.scss +++ b/openecomp-ui/resources/scss/modules/onboardingCatalog/_createItemTile.scss @@ -1,73 +1,77 @@ .create-catalog-item-wrapper { - width: 204px; - height: 200px; - display: flex; - flex-direction: column; - margin: 9px; + width: 204px; + height: 200px; + display: flex; + flex-direction: column; + margin: 9px; - .tile.create-catalog-item { - margin: 9px 0 9px 0; - display: flex; - background-color: $white; - &:first-child{margin-top: 0;} - &:last-child{margin-bottom: 0;} - flex-direction: row; - align-items: center; - justify-content: center; - &.disabled { - color: $gray; - .create-item-plus-icon { - fill: $gray; - } - } - &:hover { - box-shadow: 0.3px 5px 12.8px 1.3px rgba(24, 24, 25, 0.15); + .tile.create-catalog-item { + margin: 9px 0 9px 0; + display: flex; + background-color: $white; + &:first-child { + margin-top: 0; + } + &:last-child { + margin-bottom: 0; + } + flex-direction: row; + align-items: center; + justify-content: center; + &.disabled { + color: $gray; + .create-item-plus-icon { + fill: $gray; + } + } + &:hover { + box-shadow: 0.3px 5px 12.8px 1.3px rgba(24, 24, 25, 0.15); - border: 1px solid $light-gray; - } - &:only-child { - text-align: center; - flex-direction: column; - justify-content: center; - .create-item-plus-icon { - margin: 0 0 15px 0; - } - .create-item-text { - @extend .heading-4-semibold; - } - } - .create-item-plus-icon{ - margin: -5px 12px 0 0; - height: 19px; - width: 19px; - .svg-icon { - &.__plus { - width: 19px; - height: 19px; - } - } - } - &.vlm-type { - .create-item-text { - color: $purple; - } + border: 1px solid $light-gray; + } + &:only-child { + text-align: center; + flex-direction: column; + justify-content: center; + .create-item-plus-icon { + margin: 0 0 15px 0; + } + .create-item-text { + @extend .heading-4-semibold; + } + } + .create-item-plus-icon { + margin: -5px 12px 0 0; + height: 19px; + width: 19px; + .svg-icon { + &.__plus { + width: 19px; + height: 19px; + } + } + } + &.vlm-type { + .create-item-text { + color: $purple; + } - .create-item-plus-icon { - fill: $purple; - } - } - &.vsp-type { - .create-item-text { - color: $blue; - } + .create-item-plus-icon { + fill: $purple; + } + } + &.vsp-type { + .create-item-text { + color: $blue; + } - .create-item-plus-icon { - fill: $blue; - } - } - .create-item-text { - width: 140px; - @extend .heading-5-semibold; - } - } + .create-item-plus-icon { + fill: $blue; + } + } + .create-item-text { + width: 140px; + @extend .heading-5-semibold; + } + } } diff --git a/openecomp-ui/resources/scss/modules/onboardingCatalog/_onboardHeader.scss b/openecomp-ui/resources/scss/modules/onboardingCatalog/_onboardHeader.scss index f97641cbe3..5f8446b9ff 100644 --- a/openecomp-ui/resources/scss/modules/onboardingCatalog/_onboardHeader.scss +++ b/openecomp-ui/resources/scss/modules/onboardingCatalog/_onboardHeader.scss @@ -1,32 +1,32 @@ .onboard-header { - padding-top: 8px; - display: flex; - flex-direction: row; - 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: 20px; - margin-left: auto; - } - .onboard-header-tabs { - display: flex; - flex-direction: row; - .onboard-header-tab { - @extend .body-1-semibold; - margin-right: 40px; - cursor: pointer; - display: flex; - padding-bottom: 5px; - align-items: flex-end; - &.active { - color: $blue; - padding-bottom: 2px; - border-bottom: 3px solid $blue; - } - } - } + padding-top: 8px; + display: flex; + flex-direction: row; + 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: 20px; + margin-left: auto; + } + .onboard-header-tabs { + display: flex; + flex-direction: row; + .onboard-header-tab { + @extend .body-1-semibold; + margin-right: 40px; + cursor: pointer; + display: flex; + padding-bottom: 5px; + align-items: flex-end; + &.active { + color: $blue; + padding-bottom: 2px; + border-bottom: 3px solid $blue; + } + } + } } diff --git a/openecomp-ui/resources/scss/modules/onboardingCatalog/_tile.scss b/openecomp-ui/resources/scss/modules/onboardingCatalog/_tile.scss index 217098fb97..fa513fb44d 100644 --- a/openecomp-ui/resources/scss/modules/onboardingCatalog/_tile.scss +++ b/openecomp-ui/resources/scss/modules/onboardingCatalog/_tile.scss @@ -1,14 +1,14 @@ .tile { - background-color: $white; - margin: 9px; - width: 204px; - height: 200px; - display: flex; - flex-direction: column; - cursor: pointer; - border: 1px solid $tlv-light-gray; - @include box-shadow(0.5px 0.8px 4px 0 rgba(24, 24, 25, 0.05)); - &:active { - border: 1px solid $light-blue; - } + background-color: $white; + margin: 9px; + width: 204px; + height: 200px; + display: flex; + flex-direction: column; + cursor: pointer; + border: 1px solid $tlv-light-gray; + @include box-shadow(0.5px 0.8px 4px 0 rgba(24, 24, 25, 0.05)); + &:active { + border: 1px solid $light-blue; + } } diff --git a/openecomp-ui/resources/scss/modules/onboardingCatalog/_vendorPageHeader.scss b/openecomp-ui/resources/scss/modules/onboardingCatalog/_vendorPageHeader.scss index f1af28a0a0..a741764727 100644 --- a/openecomp-ui/resources/scss/modules/onboardingCatalog/_vendorPageHeader.scss +++ b/openecomp-ui/resources/scss/modules/onboardingCatalog/_vendorPageHeader.scss @@ -1,21 +1,21 @@ .vendor-page-header { - display: flex; - align-items: center; - margin-top: 34px; - margin-left: 9px; - margin-bottom: 29px; - .vendor-name { - @extend .heading-1; - color: $blue; - margin-left: 20px; - text-transform: uppercase; - } - .svg-icon-wrapper { - padding: 5px 18px 5px 0; - .svg-icon.back { - height: 25px; - width: 25px; - fill: $blue; - } - } + display: flex; + align-items: center; + margin-top: 34px; + margin-left: 9px; + margin-bottom: 29px; + .vendor-name { + @extend .heading-1; + color: $blue; + margin-left: 20px; + text-transform: uppercase; + } + .svg-icon-wrapper { + padding: 5px 18px 5px 0; + .svg-icon.back { + height: 25px; + width: 25px; + fill: $blue; + } + } } diff --git a/openecomp-ui/resources/scss/modules/onboardingCatalog/_vendorTile.scss b/openecomp-ui/resources/scss/modules/onboardingCatalog/_vendorTile.scss index d490fd6e1c..63fb236ec3 100644 --- a/openecomp-ui/resources/scss/modules/onboardingCatalog/_vendorTile.scss +++ b/openecomp-ui/resources/scss/modules/onboardingCatalog/_vendorTile.scss @@ -1,91 +1,91 @@ @mixin flipOverlayDirection($itemsInRow) { - &:nth-child(#{$itemsInRow}n) { - .vsp-overlay-wrapper { - right: 74%; - left: inherit; - .vsp-overlay-arrow { - border-right-color: transparent; - border-left-color: $tlv-light-gray; - border-right-width: 2px; - border-left-width: 6px; - left: 100%; - &:after { - border-left-color: $white; - border-right-color: transparent; - left: -11px; - } - } - } - } + &:nth-child(#{$itemsInRow}n) { + .vsp-overlay-wrapper { + right: 74%; + left: inherit; + .vsp-overlay-arrow { + border-right-color: transparent; + border-left-color: $tlv-light-gray; + border-right-width: 2px; + border-left-width: 6px; + left: 100%; + &:after { + border-left-color: $white; + border-right-color: transparent; + left: -11px; + } + } + } + } } .catalog-tile.vendor-type { - position: relative; - .catalog-tile-top { - .catalog-tile-item-name { - margin-top: 21px; - line-height: inherit; - &:first-letter { - text-transform: capitalize; - } - } - .catalog-tile-vsp-count { - @extend .body-3-semibold; - margin-top: 8px; - margin-left: 54px; - margin-bottom: 9px; - color: $dark-gray; - border: 1px solid $dark-gray; - padding: 0 15px 0 15px; - border-radius: 15px; + position: relative; + .catalog-tile-top { + .catalog-tile-item-name { + margin-top: 21px; + line-height: inherit; + &:first-letter { + text-transform: capitalize; + } + } + .catalog-tile-vsp-count { + @extend .body-3-semibold; + margin-top: 8px; + margin-left: 54px; + margin-bottom: 9px; + color: $dark-gray; + border: 1px solid $dark-gray; + padding: 0 15px 0 15px; + border-radius: 15px; - &.clickable { - &:hover { - background-color: #eceff3; - color: $dark-gray; - } - } - &.active { - background-color: $white; - color: $dark-gray; - } - } - } + &.clickable { + &:hover { + background-color: #eceff3; + color: $dark-gray; + } + } + &.active { + background-color: $white; + color: $dark-gray; + } + } + } - .catalog-tile-content { - flex-basis: auto; - max-height: 31px; - height: 31px; - text-align: center; - color: $blue; - display: block; - background-color: $white; - margin-bottom: 7px; - padding-bottom: 0px; - .create-new-vsp-button { - margin-top: 1px; - } - &:hover { - color: $dark-blue; - .svg-icon.plus { - fill: $dark-blue; - } - } - &.disabled { - cursor: default; - } - } - @media (min-width: 1900px) { - @include flipOverlayDirection($itemsInRow: 8); - } - @media (min-width: 1586px) and (max-width: 1899px) { - @include flipOverlayDirection($itemsInRow: 7); - } - @media (min-width: 1368px) and (max-width: 1585px) { - @include flipOverlayDirection($itemsInRow: 6); - } - @media (max-width: 1367px) { - @include flipOverlayDirection($itemsInRow: 5); - } - @import "vspOverlay"; + .catalog-tile-content { + flex-basis: auto; + max-height: 31px; + height: 31px; + text-align: center; + color: $blue; + display: block; + background-color: $white; + margin-bottom: 7px; + padding-bottom: 0px; + .create-new-vsp-button { + margin-top: 1px; + } + &:hover { + color: $dark-blue; + .svg-icon.plus { + fill: $dark-blue; + } + } + &.disabled { + cursor: default; + } + } + @media (min-width: 1900px) { + @include flipOverlayDirection($itemsInRow: 8); + } + @media (min-width: 1586px) and (max-width: 1899px) { + @include flipOverlayDirection($itemsInRow: 7); + } + @media (min-width: 1368px) and (max-width: 1585px) { + @include flipOverlayDirection($itemsInRow: 6); + } + @media (max-width: 1367px) { + @include flipOverlayDirection($itemsInRow: 5); + } + @import 'vspOverlay'; } diff --git a/openecomp-ui/resources/scss/modules/onboardingCatalog/_vlmTile.scss b/openecomp-ui/resources/scss/modules/onboardingCatalog/_vlmTile.scss deleted file mode 100644 index 721a4f3f22..0000000000 --- a/openecomp-ui/resources/scss/modules/onboardingCatalog/_vlmTile.scss +++ /dev/null @@ -1,8 +0,0 @@ -.catalog-tile.license-model-type { - .catalog-tile-top { - &:hover { - //background-color: $purple; - //color: $white; - } - } -} diff --git a/openecomp-ui/resources/scss/modules/onboardingCatalog/_vspOverlay.scss b/openecomp-ui/resources/scss/modules/onboardingCatalog/_vspOverlay.scss index e0b72bf9ff..e2617b8b04 100644 --- a/openecomp-ui/resources/scss/modules/onboardingCatalog/_vspOverlay.scss +++ b/openecomp-ui/resources/scss/modules/onboardingCatalog/_vspOverlay.scss @@ -1,74 +1,73 @@ -.vsp-overlay-wrapper{ - display:flex; - align-items: center; - position:absolute; - left: 68%; - top: 14%; - height: 100%; - pointer-events: none; - z-index: 100; - .vsp-overlay-list { - padding: 0 20px; - } - .vsp-overlay-arrow { - border-style: solid; - position: relative; - bottom: -18px; - border-width: 6px; - border-left-width: 2px; - border-color: transparent; - border-right-color: $light-gray; - &:after { - position: absolute; - border-style: solid; - bottom: -10px; - left: -9px; - border-width: 10px; - border-color: transparent; - border-right-color: $white; - content:' '; - } - } - .vsp-overlay { - pointer-events: all; - width: 205px; - cursor: default; - background-color: $white; - @include box-shadow(0px 2px 9.2px 0.8px rgba(24, 24, 25, 0.25)); - border-radius: 6px; - padding: 0 0 10px 0; - display: flex; - flex-direction: column; - margin: 10px 0 10px 0; - .vsp-overlay-title { - @extend .heading-5-semibold; - margin-bottom: 15px; - padding: 10px 20px 10px 20px; - background: $highlight-gray; - color: $text-black; - text-transform: uppercase; - border-radius: 6px 6px 0 0; - } - .vsp-overlay-detail{ - @extend .body-2; - &:hover { - color: $blue; - } - text-transform: none; - @include ellipsis(auto, block); - border-bottom: 1px solid $tlv-light-gray; - cursor: pointer; - padding: 5px 0 5px 0; - &:last-child { - border-bottom: none; - } - } - .vsp-overlay-see-more{ - color: $blue; - cursor: pointer; - margin-top: 12px; - align-self:center; - } - - } +.vsp-overlay-wrapper { + display: flex; + align-items: center; + position: absolute; + left: 68%; + top: 14%; + height: 100%; + pointer-events: none; + z-index: 100; + .vsp-overlay-list { + padding: 0 20px; + } + .vsp-overlay-arrow { + border-style: solid; + position: relative; + bottom: -18px; + border-width: 6px; + border-left-width: 2px; + border-color: transparent; + border-right-color: $light-gray; + &:after { + position: absolute; + border-style: solid; + bottom: -10px; + left: -9px; + border-width: 10px; + border-color: transparent; + border-right-color: $white; + content: ' '; + } + } + .vsp-overlay { + pointer-events: all; + width: 205px; + cursor: default; + background-color: $white; + @include box-shadow(0px 2px 9.2px 0.8px rgba(24, 24, 25, 0.25)); + border-radius: 6px; + padding: 0 0 10px 0; + display: flex; + flex-direction: column; + margin: 10px 0 10px 0; + .vsp-overlay-title { + @extend .heading-5-semibold; + margin-bottom: 15px; + padding: 10px 20px 10px 20px; + background: $highlight-gray; + color: $text-black; + text-transform: uppercase; + border-radius: 6px 6px 0 0; + } + .vsp-overlay-detail { + @extend .body-2; + &:hover { + color: $blue; + } + text-transform: none; + @include ellipsis(auto, block); + border-bottom: 1px solid $tlv-light-gray; + cursor: pointer; + padding: 5px 0 5px 0; + &:last-child { + border-bottom: none; + } + } + .vsp-overlay-see-more { + color: $blue; + cursor: pointer; + margin-top: 12px; + align-self: center; + } + } } |