diff options
Diffstat (limited to 'openecomp-ui/resources/scss/modules')
28 files changed, 1683 insertions, 436 deletions
diff --git a/openecomp-ui/resources/scss/modules/_entitlementPools.scss b/openecomp-ui/resources/scss/modules/_entitlementPools.scss index df7cea4cd8..0e0a72a387 100644 --- a/openecomp-ui/resources/scss/modules/_entitlementPools.scss +++ b/openecomp-ui/resources/scss/modules/_entitlementPools.scss @@ -35,29 +35,13 @@ .tab-content { padding: 50px; } - .entitlement-pools-form-row { - - display: flex; - justify-content: space-between; - & > * { - flex: 0 1 47%; - } - .validation-input-wrapper { - .form-group { - textarea { - height: 184px; - } - .entitlement-pools-form-row-threshold-value { - margin-top: 23px; - margin-left: 10px; - width: 189px; - } - .dropdown-multi-select .Select { - z-index: 1080; - } - } - } - } + .threshold-section { + display: flex; + justify-content: space-between; + .validation-input-wrapper { + flex: 0 0 46%; + } + } } .validation-buttons { padding: 20px 50px; diff --git a/openecomp-ui/resources/scss/modules/_featureGroup.scss b/openecomp-ui/resources/scss/modules/_featureGroup.scss index f66a01c290..71e7cee575 100644 --- a/openecomp-ui/resources/scss/modules/_featureGroup.scss +++ b/openecomp-ui/resources/scss/modules/_featureGroup.scss @@ -28,21 +28,6 @@ padding: 0; } .feature-group-form { - .button-tab { - @extend .body-1-medium; - color: $dark-gray; - padding: 6px; - border: 0; - background-color: $white; - box-shadow: none; - &:first-child { - margin-right: 28px; - } - &.active, &:hover { - color: $text-black; - border-bottom: 2px solid $blue; - } - } .no-items-msg { margin-top: 55px; color: $dark-gray; diff --git a/openecomp-ui/resources/scss/modules/_licenseAgreement.scss b/openecomp-ui/resources/scss/modules/_licenseAgreement.scss index a7afd01cc5..7a7b87677e 100644 --- a/openecomp-ui/resources/scss/modules/_licenseAgreement.scss +++ b/openecomp-ui/resources/scss/modules/_licenseAgreement.scss @@ -37,21 +37,6 @@ padding: 0; } .license-agreement-form { - .button-tab{ - @extend .body-1-medium; - color: $dark-gray; - padding: 6px; - border: 0; - background-color: $white; - box-shadow: none; - &:first-child { - margin-right: 28px; - } - &.active, &:hover { - color: $text-black; - border-bottom: 2px solid $blue; - } - } .no-items-msg { margin-top: 55px; color: $dark-gray; @@ -70,21 +55,6 @@ } } } - .license-agreement-form-row { - display: flex; - justify-content: space-between; - .license-agreement-form-col { - flex: 0 1 45%; - } - .validation-input-wrapper { - flex: 0 1 45%; - .form-group { - textarea { - height: 100px; - } - } - } - } .validation-buttons { padding: 20px 50px; } diff --git a/openecomp-ui/resources/scss/modules/_licenseKeyGroup.scss b/openecomp-ui/resources/scss/modules/_licenseKeyGroup.scss index 19b4792949..5ea84e98c4 100644 --- a/openecomp-ui/resources/scss/modules/_licenseKeyGroup.scss +++ b/openecomp-ui/resources/scss/modules/_licenseKeyGroup.scss @@ -30,22 +30,6 @@ width: 400px; color: $black; } - .license-key-groups-form-row { - display: flex; - justify-content: space-between; - .options-input-form-row { - width: 370px; - } - .validation-input-wrapper { - flex: 0 1 45%; - .form-group { - textarea { - height: 100px; - } - - } - } - } } .validation-buttons { padding: 20px 50px; diff --git a/openecomp-ui/resources/scss/modules/_licenseModelOverview.scss b/openecomp-ui/resources/scss/modules/_licenseModelOverview.scss new file mode 100644 index 0000000000..4ec7c8d3af --- /dev/null +++ b/openecomp-ui/resources/scss/modules/_licenseModelOverview.scss @@ -0,0 +1,491 @@ +.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: 20px 30px; + border: 1px solid $tlv-light-gray; + @include border-shadow(); + .vendor-title { + margin-top:5px; + } + .vendor-name { + @extend .heading-3-medium; + text-transform: none; + padding-bottom: 15px; + border-bottom: 1px solid $tlv-light-gray; + } + .vendor-description { + @extend .flex; + @extend .body-1; + justify-content: space-between; + margin-top: 10px; + overflow: hidden; + border: 1px solid transparent; + position: relative; + left: -6px; + width: 101%; + + &:hover { + border: 1px solid $tlv-light-gray; + background-position: 99% 12%; + background-size: 15px; + padding-right: 20px; + background-image: url($pencil-icon); + background-repeat: no-repeat; + cursor: pointer; + } + &.read-only { + border: none; + } + .description-data { + @include multiline-ellipsis($lineCount: 3, $bgColor: $tlv-gray); + } + } + + .vendor-description-readonly { + @extend .flex; + @extend .body-1; + justify-content: space-between; + margin-top: 10px; + overflow: hidden; + border: none; + height: 49px; + margin-bottom: 15px; + padding: 6px; + position: relative; + left:-6px; + } + + .vendor-description-edit { + @extend .flex; + flex-direction: column; + border: none; + margin-top: 10px; + position: relative; + left: -6px; + width: 101%; + textarea { + padding-left: 6px; + } + .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; + } + } + } + .summary-count-list { + @extend .flex-column; + flex: 0.6; + margin-left: 20px; + justify-content: space-between; + border: 1px solid $tlv-light-gray; + @include border-shadow(); + background-color: $tlv-gray; + .summary-count-item { + @extend .flex; + @extend .heading-4-medium; + padding-top: 5px; + 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; + } + .add-button { + cursor: pointer; + font-size: larger; + background-image: url($vlm-summary-plus); + background-size: 20px; + background-repeat: no-repeat; + width:20px; + height:20px; + margin-top: 3px; + margin-left: auto; + &:hover { + cursor: pointer; + background-image: url($vlm-summary-plus-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; + } + } + } + .vlm-list-tab-panel + { + @extend .flex; + .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; + background-image: url($vlm-summary-used); + &.selected { + background-image: url($vlm-summary-used-blue); + } + } + .entities-list-icon { + background-size: 32px; + background-repeat: no-repeat; + background-image: url($vlm-summary-orphans); + &.selected { + background-image: url($vlm-summary-orphans-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 { + @include border-shadow(); + .list-item-icon-col { + display: flex; + flex-direction: column; + justify-content: center; + margin-left: 5px; + } + &.vlm-list-item-la { + margin-left: 0; + .list-item-icon-col { + padding-left: 22px; + + } + .la-icon { + background-color: $gray; + border-color: $gray; + } + .list-item-section { + &:first-child { + background-color: gray; + } + } + } + &.vlm-list-item-fg { + cursor: default; + margin-left: 0; + border-left: 10px solid $gray; + .list-item-arrow-col { + margin-left: 0px; + } + .list-item-icon-col { + padding-left: 22px; + } + .fg-icon { + background-color: $gray; + border-color: $gray; + } + } + &.vlm-list-item-ep { + margin-left: 0; + border-left: 10px solid $gray; + .list-item-icon-col { + padding-left: 22px; + } + .ep-icon { + background-color: $gray; + border-color: $gray; + } + .list-item-section { + &:first-child { + display: flex; + color: $white; + min-width: 34px; + } + } + } + &.vlm-list-item-lkg { + margin-left: 0; + border-left: 10px solid $gray; + .list-item-icon-col { + padding-left: 22px; + } + .lkg-icon { + background-color: $gray; + border-color: $gray; + } + .list-item-section { + &:first-child { + display: flex; + color: $white; + min-width: 34px; + } + } + } + } + } + } + } + .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; + cursor: pointer; + .list-item-icon-col { + display: flex; + flex-direction: column; + justify-content: center; + + } + .list-item-section { + padding: 10px; + .children-count { + @extend .body-1; + line-height: 20px; + color: $gray; + padding-left: 5px; + .count-value { + padding: 0 5px; + } + } + .additional-data { + padding-left: 50px; + .additional-data-name { + @extend .body-1-medium; + } + } + .additional-data-col-border { + border-left: 1px solid $tlv-light-gray; + min-height: 100%; + height: 100%; + } + } + .list-item-additional-data-col { + @extend .body-1; + @extend .flex; + align-items: center; + flex: 0.8; + } + .arrow-icon { + align-self: center; + } + .vlm-item-info { + flex: 1; + } + .vlm-list-item-title { + @extend .flex; + .item-name { + @extend .heading-5-medium; + flex: 0 1 auto; + margin-bottom: 4px; + } + } + .vlm-list-item-description { + @extend .body-1; + overflow: hidden; + max-height: 38px; + } + &.vlm-list-item-la { + margin-top: 10px; + border-left: 10px solid $dark-blue; + .la-icon { + @include create-circle($circle-icon-size,$dark-blue,'LA'); + color: $white; + } + .list-item-section { + + &:first-child { + display: flex; + color: $dark-blue; + min-width: 34px; + } + } + .list-item-arrow-col { + flex: 0.01; + margin-left: 14px; + } + .list-item-icon-col { + padding-left: 14px; + padding-right: 30px; + align-items: center; + } + + } + &.vlm-list-item-fg { + border-left: 10px solid $blue; + margin-left: 20px; + margin-top: 10px; + .fg-icon { + @include create-circle($circle-icon-size,$blue,'FG'); + color: $white; + } + .list-item-section { + &:first-child { + display: flex; + color: $blue; + min-width: 34px; + + } + } + .list-item-arrow-col { + flex: 0.01; + margin-left: 26px; + } + .list-item-icon-col { + padding-left: 22px; + padding-right: 30px; + align-items: center; + } + } + &.vlm-list-item-ep { + margin-left: 40px; + margin-top: 10px; + border-left: 10px solid $light-blue; + cursor: default; + .ep-icon { + @include create-circle($circle-icon-size,$light-blue,'EP'); + color: $white; + } + .list-item-icon-col { + padding-left: 72px; + padding-right: 30px; + align-items: center; + } + .list-item-section { + &:first-child { + display: none; + } + } + .list-item-additional-data-col { + margin-right: 20px; + } + } + &.vlm-list-item-lkg { + margin-top: 10px; + margin-left: 40px; + border-left: 10px solid $light-blue; + cursor: default; + .lkg-icon { + @include create-circle($circle-icon-size,$light-blue,'KG'); + color: $white; + } + .list-item-icon-col { + padding-left: 72px; + padding-right: 30px; + align-items: center; + } + .list-item-section { + &:first-child { + display: none; + } + + } + .list-item-additional-data-col { + margin-right: 20px; + } + } + } + + } + } + } + +} diff --git a/openecomp-ui/resources/scss/modules/_onboardingCatalog.scss b/openecomp-ui/resources/scss/modules/_onboardingCatalog.scss index 6020866d4a..6c56d11049 100644 --- a/openecomp-ui/resources/scss/modules/_onboardingCatalog.scss +++ b/openecomp-ui/resources/scss/modules/_onboardingCatalog.scss @@ -1,164 +1,24 @@ $transitionLength: 0.6s; .catalog-view { - background-color: $background-gray; - height: 100%; - overflow: hidden; - height: 100%; - .catalog-header { - padding-top: 20px; - margin: 0 48px 0 20px; - border-bottom: 1px solid $light-gray; - display: flex; - flex-direction: row; - justify-content: space-between; - .catalog-header-title { - @extend .heading-2; - margin: 0 0 10px 0; - } - .expandable-input-wrapper { - margin: 0 0 10px 0; - } - } - .catalog-list { - max-height: 100%; - overflow: auto; - display: flex; - flex-wrap: wrap; - padding: 40px 10px 0 10px; - &:after { - content: ' '; - display:block; - width: 100%; - height: 85px; - } - .tile { - background-color: $white; - margin: 10px; - width: 214px; - height: 210px; - display: flex; - flex-direction: column; - - } - .create-catalog-item { - border: 2px dashed $light-gray; - background-color: transparent; - &:hover { - .plus-section { - display: none; - } - .primary-btn { - display: inherit; - } - } - justify-content: center; - .plus-section { - align-self: center; - display: flex; - flex-direction: column; - .plus-icon-button { - align-self: center; - background-size: 23px; - width: 23px; - height: 23px; - margin-bottom: 4px; - } - } - .primary-btn { - display: none; - width: 176px; - &.new-license-model { - margin-bottom: 18px; - } - &:hover { - background-color: $background-alice-blue; - } - } - } - .catalog-tile { - cursor: pointer; - border: 1px solid $tlv-light-gray; - &:hover { - @include box-shadow(3px 3px 5px 0 rgba(24,24,25,.04)); - } - &:active { - border: 1px solid $light-blue; - } - .catalog-tile-type { - padding-top: 7px; - border-radius: 50%; - width: 40px; - height: 40px; - background: white; - border: 4px solid #F2F2F2; - position: relative; - top: -12px; - left: -7px; - &:before { - @extend .body-1; - color: $light-blue; - } - &.license-model-type { - padding-left: 13px; - &:before { - content: "L" - } - } - &.software-product-type { - padding-left: 8px; - &:before { - content: "SP" - } - } - } - .catalog-tile-icon { - text-align: center; - flex-basis: 60%; - justify-content: center; - background-size: 60px 60px; - background-repeat: no-repeat; - background-position: center; - display: flex; - .icon { - align-self: center; - height: 65px; - width: 65px; - background-repeat: no-repeat; - margin-bottom: 27px; - &.license-model-type-icon { - background-image: url('../images/onboarding/vendor-license-model.svg'); - } - &.software-product-type-icon { - background-image: url('../images/onboarding/vendor-software-product.svg'); - } - } - } - .catalog-tile-content { - border-top: 1px solid $background-gray; - flex-basis: 30%; - padding: 8px; - display: flex; - justify-content: space-between; - .catalog-tile-item-details { - overflow: hidden; - } - .catalog-tile-item-name { - @extend .body-1-medium; - @include ellipsis(); - width: 150px; - color: $dark-gray - } - .catalog-tile-item-version { - @extend .body-1; - color: $gray; - } - .catalog-tile-check-in-status { - width: 25px; - height: 19px; - align-self: center; - } - } - } - } + background-color: $background-gray; + overflow: hidden; + height: 100%; + @import "onboardingCatalog/onboardHeader"; + @import "onboardingCatalog/catalogHeader"; + @import "onboardingCatalog/vendorPageHeader"; + @import "onboardingCatalog/catalogList"; + .catalog-wrapper { + height: 100%; + overflow: auto; + .tab-separator { + content: ''; + height: 25px; + border-right: 1px solid $dark-gray; + } + .catalog-list { + overflow: hidden; + height: auto; + } + } } diff --git a/openecomp-ui/resources/scss/modules/_softwareProductAttachmentPage.scss b/openecomp-ui/resources/scss/modules/_softwareProductAttachmentPage.scss index 657bb544a7..37068975a2 100644 --- a/openecomp-ui/resources/scss/modules/_softwareProductAttachmentPage.scss +++ b/openecomp-ui/resources/scss/modules/_softwareProductAttachmentPage.scss @@ -1,153 +1,237 @@ -.software-product-attachments { + +.vsp-attachments-view { + position: relative; + #attachments-tabs { + .nav-tabs { + background-color: $tlv-gray; + box-shadow: none; + border-bottom: 1px solid $light-gray; + & > li { + & > a { + font-size: 24px; + font-weight: lighter; + padding-left: 0; + padding-right: 0; + margin-right: 40px; + }; + &.active > a {color: $blue;}; + } + } + } + .attachments-view-controllers { + position: absolute; + right: 40px; + top: 15px; + display: flex; + .icon-label { + color: $dark-gray; + } + + .go-to-overview-icon { + .icon-label { + color: $blue; + } + &.disabled { + .icon-label { + color: $gray; + } + } + } + + .icon-component { + margin-right: 30px; + + } + + input[type="file"] { + visibility: hidden; + width: 1px; + padding: 0; + margin-left: -1px; + } + } +} + +.vsp-attachments-heat-validation { @extend .body-1; - width: 100%; - height: 100%; display: flex; - - .software-product-attachments-tree { + .svg-icon.exclamation-triangle-line { + fill: $orange; + width: 15px; + height: 15px; + &.large { + width: 20px; + height: 20px; + } + } + .validation-tree-section { display: flex; - border-right: 1px solid $light-gray; - margin: 0px; - padding: 5px 3px 10px 3px; + 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-medium; + padding-left: 32px; + cursor: pointer; + &.tree-header-title-selected{ + color: $blue; + } + } + .tree-header-title { + display: flex; + } + } + .counters { + display: flex; + justify-content: space-between; + z-index: 1; + padding-right: 20px; + .counter { + 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-medium; + } + } + } + } .tree-wrapper { flex: 1 1; position: relative; padding-bottom: 10px; + @-moz-document url-prefix() { + .tree-block-inside { + top: 0; + position: relative; + } + } .tree-block-inside { - padding-left: 17px; - padding-top: 8px; - padding-bottom: 1px; + padding-left: 20px; .tree-node-row { cursor: default; white-space: nowrap; - &.tree-node-selected::before { + display: flex; + justify-content: space-between; + height: 40px; + align-items: center; + .svg-icon.chevron-down, .svg-icon.chevron-up { + height: 10px; + width: 10px; + } + + &:after { + border-top: 1px solid $tlv-gray; + height: 40px; position: absolute; left: 0; right: 0; - height: 20px; - display: inline-block; content: ' '; - background-color: $light-gray; } - - &.tree-node-clicked::before { + @-moz-document url-prefix() { + &:after { + top: 0; + } + } + &.tree-node-selected::before { position: absolute; - left: 4px; - right: 4px; + left: 0; + right: 0; height: 20px; display: inline-block; content: ' '; - font-weight: bold; - background-color: $white; + 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; - .fa { - position: absolute; - left: -7px; - top: -11px; - @include transition(transform 0.3s); - } - &.tree-node-expander-collapsed .fa { - @include transform-rotate(-90); - } } - .tree-node-icon { margin: 0 7px; - color: $text-black; - opacity: .5; - .tree-node-validation-error::after { - content: "!"; - font-weight: bold; - position: absolute; - color: $red; - font-size: large; - left: -7px; - bottom: -5px; - } - } - - .error-status { - color: $red; - &.error-status-selected { - font-weight: bold; - } - &.error-status-hovered { - font-weight: bold; - background-color: $blue; - } - } - - .tree-element-text { - @extend %noselect; - position: relative; - padding-right: 5px; - &.error-status-selected { - font-weight: bold; - } } } - } } } - .software-product-attachments-separator { - border: 1px solid $tlv-light-gray; + .vsp-attachments-heat-validation-separator { + border-left: 1px solid $tlv-light-gray; height: 100%; width: 5px; cursor: e-resize; } - .software-product-attachments-error-list { - text-align: center; - margin-top: 12px; - display: flex; - align-content: flex-start; - flex-direction: column; - padding-left: 70px; - padding-right: 50px; + .message-board-section { + @extend .flex-column; + padding-left: 25px; + padding-top: 10px; + padding-right: 60px; overflow: auto; margin-bottom: 70px; .error-item { - &.selected { - background-color: $light-gray; - } - &.clicked { - color: $blue; - } - &.shifted { - margin-top: 20px; - } - text-align: left; - .error-item-file-name { - font-weight: bold; - } + display: flex; + margin: 10px 0; .error-item-file-type { + margin-left: 15px; + } + .error-file-name { + @extend .body-1-medium; margin-right: 5px; - &.strong { - font-weight: bold; - } - &.ERROR { - color: $red; - } - &.WARNING { - color: $yellow; - } } } - .error-item:hover { - cursor: default; - background-color: $tlv-hover; - } } } diff --git a/openecomp-ui/resources/scss/modules/_softwareProductComponentCompute.scss b/openecomp-ui/resources/scss/modules/_softwareProductComponentCompute.scss new file mode 100644 index 0000000000..164e3bc261 --- /dev/null +++ b/openecomp-ui/resources/scss/modules/_softwareProductComponentCompute.scss @@ -0,0 +1,3 @@ +.section-title.software-product-compute-number-of-vms{ + text-transform: initial; +}
\ No newline at end of file diff --git a/openecomp-ui/resources/scss/modules/_softwareProductComponentGeneral.scss b/openecomp-ui/resources/scss/modules/_softwareProductComponentGeneral.scss index 4ff2d2c14a..67d76f5454 100644 --- a/openecomp-ui/resources/scss/modules/_softwareProductComponentGeneral.scss +++ b/openecomp-ui/resources/scss/modules/_softwareProductComponentGeneral.scss @@ -3,6 +3,9 @@ .one-line-textarea { height: 30px; } + .multi-line-textarea > textarea { + height: 113px; + } } .additional-validation-form { margin-top: 50px; diff --git a/openecomp-ui/resources/scss/modules/_softwareProductComponentNetwork.scss b/openecomp-ui/resources/scss/modules/_softwareProductComponentNetwork.scss index 6097f3ef52..e14ab02fcd 100644 --- a/openecomp-ui/resources/scss/modules/_softwareProductComponentNetwork.scss +++ b/openecomp-ui/resources/scss/modules/_softwareProductComponentNetwork.scss @@ -1,10 +1,5 @@ .vsp-components-network { .network-data { - .network-data-title { - @extend .body-2-medium; - padding-bottom: 20px; - padding-left: 15px; - } .single-col { .validation-input-wrapper { label { @@ -27,7 +22,14 @@ padding-right: 50px; padding-top: 20px; height: 500px; - overflow-y: auto; + .grid-section { + padding-bottom: 15px; + .section-title { + @extend .heading-5; + padding-bottom: 10px; + padding-left: 0px; + } + } .part-title { @extend .heading-5; padding-bottom: 10px; @@ -36,11 +38,44 @@ .part-title-small { @extend .heading-3; padding-bottom: 10px; - padding-left: 14px; + padding-left: 0px; } .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 { + padding-left: 0px; + &.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 new file mode 100644 index 0000000000..a6613190fd --- /dev/null +++ b/openecomp-ui/resources/scss/modules/_softwareProductComponentProcessesPage.scss @@ -0,0 +1,8 @@ +.edit-process-modal { + .vsp-process-dropzone-view .grid-section { + padding-bottom: 30px !important; + } + .component-process-description > textarea { + height: 113px; + } +}
\ No newline at end of file diff --git a/openecomp-ui/resources/scss/modules/_softwareProductDependencies.scss b/openecomp-ui/resources/scss/modules/_softwareProductDependencies.scss new file mode 100644 index 0000000000..01a50dd741 --- /dev/null +++ b/openecomp-ui/resources/scss/modules/_softwareProductDependencies.scss @@ -0,0 +1,25 @@ +.software-product-dependencies { + .software-product-dependencies-title { + @extend .heading-1; + @extend .text-uppercase !optional; + margin-bottom: 20px; + color: $blue; + } + .select-action-table-controllers { + justify-content: flex-end; + cursor: pointer; + color: $blue; + padding-right: 33px; + margin-bottom: 3px; + &:hover { + color: $dark-blue; + } + } + .select-action-table-view { + min-width: 770px; + } + .select-action-table-header { + @extend .body-1-medium; + color: $text-black; + } +}
\ No newline at end of file diff --git a/openecomp-ui/resources/scss/modules/_softwareProductLandingPage.scss b/openecomp-ui/resources/scss/modules/_softwareProductLandingPage.scss index e40bb38ea9..e75b110425 100644 --- a/openecomp-ui/resources/scss/modules/_softwareProductLandingPage.scss +++ b/openecomp-ui/resources/scss/modules/_softwareProductLandingPage.scss @@ -10,18 +10,40 @@ @extend .body-1-medium; } } + + .software-product-view { display: flex; height:100%; .description { @extend .body-1; - overflow: hidden; + // overflow: hidden; padding-right: 20px; - text-overflow: ellipsis; - display: -webkit-box; - -webkit-line-clamp: 2; - -webkit-box-orient: vertical; + // text-overflow: ellipsis; + // display: -webkit-box; + // -webkit-line-clamp: 2; + // -webkit-box-orient: vertical; + + .missing-license { + display: flex; + align-items: baseline; + .svg-icon.exclamation-triangle-full { + fill: $orange; + } + .warning-text { + position: relative; + top: -2px; + } + .svg-icon-wrapper { + margin-right: 7px; + margin-left: 3px; + .svg-icon { + height: 17px; + width: 17px; + } + } + } } .name { @extend .body-1-medium; @@ -29,11 +51,6 @@ .software-product-landing-view-right-side { @extend .flex; overflow-y: hidden; - .processes-page-title { - padding-top: 38px; - padding-left: 53px; - padding-bottom: 20px; - } .list-editor-view { .list-editor-view-title { margin-bottom: 0; @@ -53,22 +70,36 @@ .software-product-landing-view-top { .details-container { @extend .flex-column; + .single-detail-section { + @extend .flex-column; &.title-section { flex: 0.8; @extend .heading-5-medium; } + &.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; + @extend .flex-column; justify-content: space-between; .detail-col { - .title { - &.extra-large { - min-width: 130px; - } - } + padding-bottom: 10px; } } } @@ -107,8 +138,8 @@ .software-product-landing-view-top-block { cursor: pointer; border: 1px solid $light-gray; - padding: 28px 28px; - height: 250px; + padding: 20px 18px 0 18px; + height: 215px; display: flex; justify-content: space-between; background-color: $white; @@ -141,6 +172,7 @@ flex-direction: column; justify-content: center; border: 2px dashed $light-gray; + margin-bottom: 20px; @extend .body-1; align-items: center; .upload-btn { @@ -171,21 +203,10 @@ margin: 43px 0; padding: 0 52px; } - .section-title { - padding: 50px 0 30px 0; - &.general { - padding-top: 0; - } - } .validation-form-content { .vsp-general-tab-inline-section { display: flex; - &.coupling-items { - justify-content: flex-start; - .validation-input-wrapper:not(:last-child) { - margin-right: 40px; - } - } + .vsp-general-tab-sub-section:not(:last-of-type) { margin-right: 40px; } @@ -205,16 +226,6 @@ width: 440px; } } - - .vsp-general-tab-section { - &.licenses { - >.vsp-general-tab-inline-section { - .validation-input-wrapper:first-child { - margin-right: 40px; - } - } - } - } } .validation-buttons { position: fixed; @@ -223,7 +234,9 @@ width: 66%; } .validation-input-wrapper { - flex: none; + select.form-control { + width: 100%; + } } } } diff --git a/openecomp-ui/resources/scss/modules/_softwareProductNetworksPage.scss b/openecomp-ui/resources/scss/modules/_softwareProductNetworksPage.scss deleted file mode 100644 index 780f348374..0000000000 --- a/openecomp-ui/resources/scss/modules/_softwareProductNetworksPage.scss +++ /dev/null @@ -1,24 +0,0 @@ -.vsp-networks { - .wrapper { - display: flex; - height: 100%; - .left-side{ - height:100% - } - .right-side { - width:100%; - .network-data { - padding-left: 60px; - padding-right: 60px; - padding-top: 18px; - .network-data-title { - @extend .body-2-medium; - padding-bottom: 20px; - padding-left: 15px; - } - } - - } - } -} - diff --git a/openecomp-ui/resources/scss/modules/_softwareProductProcessesPage.scss b/openecomp-ui/resources/scss/modules/_softwareProductProcessesPage.scss index 167dad92e2..4956616687 100644 --- a/openecomp-ui/resources/scss/modules/_softwareProductProcessesPage.scss +++ b/openecomp-ui/resources/scss/modules/_softwareProductProcessesPage.scss @@ -51,12 +51,15 @@ opacity: 0.5; } } + .grid-section { + .section-title { + padding-bottom: 0px; + } + } } .validation-input-wrapper { - .form-group { - .vsp-process-description { - height: 200px; - } + .form-group.vsp-process-description > textarea { + height: 113px; } } } diff --git a/openecomp-ui/resources/scss/modules/_softwareproductComponentLoadBalancing.scss b/openecomp-ui/resources/scss/modules/_softwareproductComponentLoadBalancing.scss index 731ab89571..04cb3c2051 100644 --- a/openecomp-ui/resources/scss/modules/_softwareproductComponentLoadBalancing.scss +++ b/openecomp-ui/resources/scss/modules/_softwareproductComponentLoadBalancing.scss @@ -1,4 +1,13 @@ .vsp-components-load-balancing { + .svg-icon-wrapper { + position: relative; + top: -3px; + .svg-icon.chevron-up, .svg-icon.chevron-down { + width: 10px; + height: 10px; + } + } + .halb-data { .load-balancing-page-title { @extend .section-title; @@ -14,22 +23,15 @@ } .title { @extend .body-1-medium; - cursor: pointer; margin-bottom: 8px; - .fa { + cursor: pointer; + .svg-icon { @include transition(transform 0.3s); margin-right: 5px; - font-size: $icon-font-size; position: relative; - top: -1px; + top: 4px; } } - .row { - padding-left: 24px; - } - .col-md-9 { - padding-left: 8px; - } .add-padding { padding-bottom: 20px; } diff --git a/openecomp-ui/resources/scss/modules/_vspComponentQuestionnaire.scss b/openecomp-ui/resources/scss/modules/_vspComponentQuestionnaire.scss index aad628aac8..d194c678b9 100644 --- a/openecomp-ui/resources/scss/modules/_vspComponentQuestionnaire.scss +++ b/openecomp-ui/resources/scss/modules/_vspComponentQuestionnaire.scss @@ -11,18 +11,13 @@ } .component-questionnaire-validation-form { - - .section-sub-title { - @extend .heading-5; - padding-bottom: 10px; - } .section-field { textarea { height: 80px; } } - .rows-section { + .rows-section, .grid-items { .row-flex-components { display: flex; } diff --git a/openecomp-ui/resources/scss/modules/_vspHeatSetup.scss b/openecomp-ui/resources/scss/modules/_vspHeatSetup.scss new file mode 100644 index 0000000000..59e983686b --- /dev/null +++ b/openecomp-ui/resources/scss/modules/_vspHeatSetup.scss @@ -0,0 +1,316 @@ +@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; +} + +.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 { + padding-bottom: 20px; + margin-bottom: 20px; + 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; + + .Select-value-label { + @include ellipsis(85%); + } + + .validation-input-wrapper { + flex-basis: 48%; + } + + .control-label { + margin-bottom: 4px; + } + + .form-group { + margin-bottom: 12px; + } + } + } + + .modules-list-controllers { + text-align: right; + .btn-link { + &[disabled] { + color: $gray; + } + @extend .body-1; + color: $blue; + &:last-child { + padding-right: 0; + } + &:hover { + color: $dark-blue; + text-decoration: none; + } + } + } + + .modules-list-item-controllers { + display: flex; + justify-content: space-between; + margin-bottom: 7px; + + .btn { + min-width: 0; + } + + .svg-icon.trash-o { + fill: $dark-gray; + height: 18px; + width: 18px; + &:hover { + fill: $black; + } + } + .module-title-by-type { + @extend .heading-5-medium; + margin-right: 3px; + } + .modules-list-item-filename { + display: flex; + align-items: center; + + .svg-icon.pencil { + height: 15px; + width: 15px; + margin-left: 3px; + opacity: 0; + } + + .filename-text { + @extend .heading-5-medium; + + } + + .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-medium; + 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; + 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-medium; + background-color: $white; + } + &.is-focused { + background-color: $blue; + color: $white; + } + } + .add-or-delete-volumes { + .svg-icon-wrapper { + margin-right: 8px; + .svg-icon { + height: 10px; + width: 10px; + fill: $blue; + } + } + cursor: pointer; + color: $blue; + margin-bottom: 11px; + &:hover { + color: $dark-blue; + .svg-icon { + fill: $dark-blue; + } + } + } + &: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; + margin-top: 20px; + + &.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-medium; + display: flex; + margin-bottom: 10px; + justify-content: space-between; + .image-icon.artifacts { + margin-right: 10px; + } + + span { + display: flex; + } + + .add-all-unassigned { + @extend .body-1; + margin-bottom: 0; + color: $blue; + cursor: pointer; + &:hover { + color: $dark-blue; + } + } + } + } + } + + .unassigned-files { + margin-top: 30px; + border: 1px solid $light-gray; + width: 25%; + background-color: $white; + height: 250px; + width: 250px; + + // Will work in chrome from chrome 56 + position: sticky; + top: 10px; + + .unassigned-files-title { + @extend .heading-5-medium; + 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; + } + .link { + color: $blue; + cursor: pointer; + display: flex; + align-items: center; + margin-bottom: 10px; + .svg-icon.angle-right { + height: 10px; + width: 10px; + margin-left: 7px; + fill: $blue; + } + &:hover { + color: $dark-blue; + .svg-icon.angle-right { + fill: $dark-blue; + } + } + } + } + + .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/onboardingCatalog/_catalogHeader.scss b/openecomp-ui/resources/scss/modules/onboardingCatalog/_catalogHeader.scss new file mode 100644 index 0000000000..d29a95d3d6 --- /dev/null +++ b/openecomp-ui/resources/scss/modules/onboardingCatalog/_catalogHeader.scss @@ -0,0 +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: 13px; + } + .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 new file mode 100644 index 0000000000..071268c50d --- /dev/null +++ b/openecomp-ui/resources/scss/modules/onboardingCatalog/_catalogList.scss @@ -0,0 +1,31 @@ +.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; + } + + .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%; + } + } + + // 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 new file mode 100644 index 0000000000..5ce8e12ec3 --- /dev/null +++ b/openecomp-ui/resources/scss/modules/onboardingCatalog/_catalogTile.scss @@ -0,0 +1,139 @@ +.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:23px; + .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-medium; + color: $gray; + line-height: 12px; + @include ellipsis(auto,inline-block,178px); + } + + } + .catalog-tile-item-name { + @extend .heading-5-medium; + color: $black; + @include ellipsis(auto,inline-block,175px); + } + } + .catalog-tile-icon { + + width: 58px; + height: 58px; + text-align: center; + justify-content: center; + display: flex; + + .icon { + align-self: center; + height: 58px; + width: 58px; + margin-left: 122px; + background-repeat: no-repeat; + .svg-icon { + &.vendor { + fill: $dark-gray; + margin-top: 22px; + width: 53px; + height: 47px; + &:hover { + fill: $dark-gray; + } + } + &.vsp { + fill: $light-blue; + margin-top: 18px; + margin-left: 3px; + width: 60px; + height: 40px; + } + &.vlm { + fill: $purple; + margin-top: 18px; + width: 45px; + height: 53px; + } + + } + } + } + .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-medium; + .svg-icon.plus { + height: 9px; + width: 9px; + fill: $blue; + } + .catalog-tile-item-details { + overflow: hidden; + } + + .catalog-tile-add-new-vsp { + color: $blue; + margin-left:40px; + } + .catalog-tile-locking-user-name { + @extend .body-2; + @include ellipsis(auto,inline-block,180px); + } + .catalog-tile-check-in-status { + .svg-icon-wrapper { + .svg-icon { + &.locked { + margin-left: 7px; + width: 11px; + fill: $gray; + } + &.unlocked { + margin-left: 7px; + width: 11px; + fill: $gray; + } + } + } + } + } +} diff --git a/openecomp-ui/resources/scss/modules/onboardingCatalog/_createItemTile.scss b/openecomp-ui/resources/scss/modules/onboardingCatalog/_createItemTile.scss new file mode 100644 index 0000000000..b9f83fc452 --- /dev/null +++ b/openecomp-ui/resources/scss/modules/onboardingCatalog/_createItemTile.scss @@ -0,0 +1,71 @@ +.create-catalog-item-wrapper { + 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); + + 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-medium; + } + } + .create-item-plus-icon{ + width: 19px; + height: 19px; + margin: -5px 12px 0 0; + .svg-icon.plus { + height: 19px; + width: 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: $blue; + } + } + .create-item-text { + width: 140px; + @extend .heading-5-medium; + } + } +} diff --git a/openecomp-ui/resources/scss/modules/onboardingCatalog/_onboardHeader.scss b/openecomp-ui/resources/scss/modules/onboardingCatalog/_onboardHeader.scss new file mode 100644 index 0000000000..da4c017d39 --- /dev/null +++ b/openecomp-ui/resources/scss/modules/onboardingCatalog/_onboardHeader.scss @@ -0,0 +1,31 @@ +.onboard-header { + padding-top: 8px; + display: flex; + flex-direction: row; + justify-content: flex-end; + background-color: $tlv-light-gray; + margin-bottom: 2px; + @include box-shadow(0px 1px 3px 0 rgba(0, 0, 0, 0.2)); + .expandable-input-top { + margin-right: 60px; + margin-left: auto; + } + .onboard-header-tabs { + display: flex; + flex-direction: row; + margin-left: 60px; + .onboard-header-tab { + @extend .body-1-medium; + 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 new file mode 100644 index 0000000000..217098fb97 --- /dev/null +++ b/openecomp-ui/resources/scss/modules/onboardingCatalog/_tile.scss @@ -0,0 +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; + } +} diff --git a/openecomp-ui/resources/scss/modules/onboardingCatalog/_vendorPageHeader.scss b/openecomp-ui/resources/scss/modules/onboardingCatalog/_vendorPageHeader.scss new file mode 100644 index 0000000000..f1af28a0a0 --- /dev/null +++ b/openecomp-ui/resources/scss/modules/onboardingCatalog/_vendorPageHeader.scss @@ -0,0 +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; + } + } +} diff --git a/openecomp-ui/resources/scss/modules/onboardingCatalog/_vendorTile.scss b/openecomp-ui/resources/scss/modules/onboardingCatalog/_vendorTile.scss new file mode 100644 index 0000000000..79a64f84ee --- /dev/null +++ b/openecomp-ui/resources/scss/modules/onboardingCatalog/_vendorTile.scss @@ -0,0 +1,88 @@ +@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; + } + } + } + } +} + + +.catalog-tile.vendor-type { + position: relative; + .catalog-tile-top { + .catalog-tile-item-name { + margin-top:21px; + } + .catalog-tile-vsp-count { + @extend .body-3-medium; + 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 ; + } + } + } + + .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 new file mode 100644 index 0000000000..721a4f3f22 --- /dev/null +++ b/openecomp-ui/resources/scss/modules/onboardingCatalog/_vlmTile.scss @@ -0,0 +1,8 @@ +.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 new file mode 100644 index 0000000000..8816ca5df9 --- /dev/null +++ b/openecomp-ui/resources/scss/modules/onboardingCatalog/_vspOverlay.scss @@ -0,0 +1,74 @@ +.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-medium; + 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: uppercase; + @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; + } + + } +} |