diff options
Diffstat (limited to 'openecomp-ui/resources/scss/modules')
24 files changed, 436 insertions, 258 deletions
diff --git a/openecomp-ui/resources/scss/modules/_featureGroup.scss b/openecomp-ui/resources/scss/modules/_featureGroup.scss index 71e7cee575..8c45d8ec58 100644 --- a/openecomp-ui/resources/scss/modules/_featureGroup.scss +++ b/openecomp-ui/resources/scss/modules/_featureGroup.scss @@ -35,7 +35,7 @@ .tab-content { padding: 50px; .field-section { - @extend .body-2-medium; + @extend .body-2-semibold; margin-bottom: 23px; width: 400px; color: $black; diff --git a/openecomp-ui/resources/scss/modules/_licenseKeyGroup.scss b/openecomp-ui/resources/scss/modules/_licenseKeyGroup.scss index 5ea84e98c4..5de757bf64 100644 --- a/openecomp-ui/resources/scss/modules/_licenseKeyGroup.scss +++ b/openecomp-ui/resources/scss/modules/_licenseKeyGroup.scss @@ -25,7 +25,7 @@ .validation-form-content { padding: 50px; .field-section { - @extend .body-2-medium; + @extend .body-2-semibold; margin-bottom: 23px; width: 400px; color: $black; diff --git a/openecomp-ui/resources/scss/modules/_licenseModel.scss b/openecomp-ui/resources/scss/modules/_licenseModel.scss index 6912e19bcd..3d65be6274 100644 --- a/openecomp-ui/resources/scss/modules/_licenseModel.scss +++ b/openecomp-ui/resources/scss/modules/_licenseModel.scss @@ -5,7 +5,7 @@ .validation-form-content { padding: 50px; .field-section { - @extend .body-2-medium; + @extend .body-2-semibold; margin-bottom: 23px; width: 400px; color: $black; diff --git a/openecomp-ui/resources/scss/modules/_licenseModelOverview.scss b/openecomp-ui/resources/scss/modules/_licenseModelOverview.scss index 4ec7c8d3af..5c74e82d83 100644 --- a/openecomp-ui/resources/scss/modules/_licenseModelOverview.scss +++ b/openecomp-ui/resources/scss/modules/_licenseModelOverview.scss @@ -27,7 +27,7 @@ margin-top:5px; } .vendor-name { - @extend .heading-3-medium; + @extend .heading-4-semibold; text-transform: none; padding-bottom: 15px; border-bottom: 1px solid $tlv-light-gray; @@ -137,7 +137,7 @@ background-color: $tlv-gray; .summary-count-item { @extend .flex; - @extend .heading-4-medium; + @extend .heading-5-semibold; padding-top: 5px; padding-left: 45px; padding-right: 45px; @@ -349,7 +349,7 @@ .additional-data { padding-left: 50px; .additional-data-name { - @extend .body-1-medium; + @extend .body-1-semibold; } } .additional-data-col-border { @@ -373,7 +373,7 @@ .vlm-list-item-title { @extend .flex; .item-name { - @extend .heading-5-medium; + @extend .heading-5-semibold; flex: 0 1 auto; margin-bottom: 4px; } diff --git a/openecomp-ui/resources/scss/modules/_softwareProductAttachmentPage.scss b/openecomp-ui/resources/scss/modules/_softwareProductAttachmentPage.scss index 37068975a2..bab2872691 100644 --- a/openecomp-ui/resources/scss/modules/_softwareProductAttachmentPage.scss +++ b/openecomp-ui/resources/scss/modules/_softwareProductAttachmentPage.scss @@ -8,8 +8,7 @@ border-bottom: 1px solid $light-gray; & > li { & > a { - font-size: 24px; - font-weight: lighter; + @extend .heading-2; padding-left: 0; padding-right: 0; margin-right: 40px; @@ -55,7 +54,7 @@ .vsp-attachments-heat-validation { @extend .body-1; display: flex; - .svg-icon.exclamation-triangle-line { + .svg-icon.exclamationTriangleFull { fill: $orange; width: 15px; height: 15px; @@ -88,7 +87,7 @@ margin-left: 20px; } .tree-header-title-text { - @extend .heading-4-medium; + @extend .heading-4-semibold; padding-left: 32px; cursor: pointer; &.tree-header-title-selected{ @@ -121,7 +120,7 @@ .error-text, .warning-text { @extend .body-3; &.large { - @extend .heading-4-medium; + @extend .heading-4-semibold; } } } @@ -146,9 +145,11 @@ justify-content: space-between; height: 40px; align-items: center; - .svg-icon.chevron-down, .svg-icon.chevron-up { - height: 10px; - width: 10px; + .svg-icon-wrapper.chevronDown, .svg-icon-wrapper.chevronUp { + .svg-icon { + height: 10px; + width: 10px; + } } &:after { @@ -227,7 +228,7 @@ margin-left: 15px; } .error-file-name { - @extend .body-1-medium; + @extend .body-1-semibold; margin-right: 5px; } } diff --git a/openecomp-ui/resources/scss/modules/_softwareProductComponentGeneral.scss b/openecomp-ui/resources/scss/modules/_softwareProductComponentGeneral.scss index 67d76f5454..6c5bcee03c 100644 --- a/openecomp-ui/resources/scss/modules/_softwareProductComponentGeneral.scss +++ b/openecomp-ui/resources/scss/modules/_softwareProductComponentGeneral.scss @@ -3,8 +3,11 @@ .one-line-textarea { height: 30px; } - .multi-line-textarea > textarea { - height: 113px; + .multi-line-textarea { + height: calc(100% - 25px); + textarea { + height: inherit; + } } } .additional-validation-form { diff --git a/openecomp-ui/resources/scss/modules/_softwareProductComponentImage.scss b/openecomp-ui/resources/scss/modules/_softwareProductComponentImage.scss new file mode 100644 index 0000000000..068404fcb6 --- /dev/null +++ b/openecomp-ui/resources/scss/modules/_softwareProductComponentImage.scss @@ -0,0 +1,58 @@ +.image-modal-new { + .modal-dialog { + width: 600px; + } + .image-filename { + width: 480px; + } +} + +.image-modal-edit { + .modal-dialog { + width: 910px; + } + .image-filename { + width: 550px; + } +} + +.image-modal-edit, .image-modal-new { + .modal-body { + padding: 0; + } + .vsp-components-image-editor { + + .image-format, .image-md5, .image-version { + width: 200px; + } + .image-version { + padding-left: 30px; + } + .section-title { + text-transform: capitalize; + font-size: 18px; + } + } +} + +.vsp-components-image { + .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%); + } + } + } +} diff --git a/openecomp-ui/resources/scss/modules/_softwareProductComponentNetwork.scss b/openecomp-ui/resources/scss/modules/_softwareProductComponentNetwork.scss index e14ab02fcd..402918bc5e 100644 --- a/openecomp-ui/resources/scss/modules/_softwareProductComponentNetwork.scss +++ b/openecomp-ui/resources/scss/modules/_softwareProductComponentNetwork.scss @@ -10,24 +10,39 @@ } .list-editor-view { margin-top: 50px; + .manual-title { + @extend .body-1-semibold; + } } } -.network-nic-modal { - .modal-body { - padding: 0; - } +.network-nic-modal-create { + .network-type-radio { + display: flex; + } +} +.network-nic-modal-edit, .network-nic-modal-create { + .modal-body { + padding: 0; + } + .validation-form-content { + padding-left: 50px; + padding-right: 50px; + padding-top: 20px; + } +} +.network-nic-modal-edit { + .modal-dialog { + width: 900px; + } .vsp-components-network-editor { .editor-data { - padding-left: 50px; - padding-right: 50px; - padding-top: 20px; height: 500px; .grid-section { padding-bottom: 15px; .section-title { @extend .heading-5; padding-bottom: 10px; - padding-left: 0px; + padding-left: 0; } } .part-title { @@ -38,7 +53,7 @@ .part-title-small { @extend .heading-3; padding-bottom: 10px; - padding-left: 0px; + padding-left: 0; } .network-radio label { font-size: 15px; @@ -51,7 +66,7 @@ .top-row { display: flex; .part-title-small { - padding-left: 0px; + padding-left: 0; &.packets { flex: 0 0 52%; } diff --git a/openecomp-ui/resources/scss/modules/_softwareProductComponentProcessesPage.scss b/openecomp-ui/resources/scss/modules/_softwareProductComponentProcessesPage.scss index a6613190fd..be4caacfb5 100644 --- a/openecomp-ui/resources/scss/modules/_softwareProductComponentProcessesPage.scss +++ b/openecomp-ui/resources/scss/modules/_softwareProductComponentProcessesPage.scss @@ -5,4 +5,8 @@ .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 diff --git a/openecomp-ui/resources/scss/modules/_softwareProductCreatePage.scss b/openecomp-ui/resources/scss/modules/_softwareProductCreatePage.scss index deac736cfa..b788a86e44 100644 --- a/openecomp-ui/resources/scss/modules/_softwareProductCreatePage.scss +++ b/openecomp-ui/resources/scss/modules/_softwareProductCreatePage.scss @@ -15,7 +15,7 @@ flex: 45%; .validation-input-wrapper { .field-section { - @extend .body-2-medium; + @extend .body-2-semibold; margin-bottom: 23px; color: $black; } diff --git a/openecomp-ui/resources/scss/modules/_softwareProductDependencies.scss b/openecomp-ui/resources/scss/modules/_softwareProductDependencies.scss index 01a50dd741..8fb739234f 100644 --- a/openecomp-ui/resources/scss/modules/_softwareProductDependencies.scss +++ b/openecomp-ui/resources/scss/modules/_softwareProductDependencies.scss @@ -15,11 +15,11 @@ color: $dark-blue; } } - .select-action-table-view { + .select-action-table-view { min-width: 770px; } .select-action-table-header { - @extend .body-1-medium; + @extend .body-1-semibold; color: $text-black; } -}
\ No newline at end of file +} diff --git a/openecomp-ui/resources/scss/modules/_softwareProductDeployment.scss b/openecomp-ui/resources/scss/modules/_softwareProductDeployment.scss new file mode 100644 index 0000000000..e0de8fc969 --- /dev/null +++ b/openecomp-ui/resources/scss/modules/_softwareProductDeployment.scss @@ -0,0 +1,55 @@ +.deployment-flavor-editor { + .modal-dialog { + width: 780px; + } + .grid-section { + padding-bottom: 25px; + } + .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 { + padding: 0; + .validation-form-content { + .grid-col-1 { + flex-basis: 35%; + } + + .Select-value, .Select-placeholder { + font-family: omnes-regular, sans-serif; + } + + .grid-section.vfc-table { + padding-bottom: 50px; + .Select-menu { + max-height: 100px; + } + + } + + .grid-col-3 { + flex-basis: 65%; + } + padding-left: 54px; + padding-right: 33px; + overflow-y: visible; + } + } + } +} diff --git a/openecomp-ui/resources/scss/modules/_softwareProductLandingPage.scss b/openecomp-ui/resources/scss/modules/_softwareProductLandingPage.scss index e75b110425..56860101b2 100644 --- a/openecomp-ui/resources/scss/modules/_softwareProductLandingPage.scss +++ b/openecomp-ui/resources/scss/modules/_softwareProductLandingPage.scss @@ -3,11 +3,11 @@ padding-right: 30px; padding-bottom: 10px; .title { - @extend .body-1-medium; + @extend .body-1-semibold; } .file-name { padding-left: 5px; - @extend .body-1-medium; + @extend .body-1-semibold; } } @@ -28,7 +28,7 @@ .missing-license { display: flex; align-items: baseline; - .svg-icon.exclamation-triangle-full { + .svg-icon-wrapper.exclamationTriangleFull .svg-icon{ fill: $orange; } .warning-text { @@ -46,7 +46,7 @@ } } .name { - @extend .body-1-medium; + @extend .body-1-semibold; } .software-product-landing-view-right-side { @extend .flex; @@ -76,7 +76,7 @@ @extend .flex-column; &.title-section { flex: 0.8; - @extend .heading-5-medium; + @extend .heading-5-semibold; } &.title-text { margin-bottom: 24px; @@ -125,7 +125,7 @@ } } .title { - @extend .body-1-medium; + @extend .body-1-semibold; } .software-product-landing-view-heading-title { @extend .section-title; @@ -181,7 +181,7 @@ } .drag-text { color: $blue; - font-weight: bolder; + @extend .body-1-semibold; } .or-text { margin-top: 10px; diff --git a/openecomp-ui/resources/scss/modules/_softwareProductProcessesPage.scss b/openecomp-ui/resources/scss/modules/_softwareProductProcessesPage.scss index 4956616687..d75e7447ab 100644 --- a/openecomp-ui/resources/scss/modules/_softwareProductProcessesPage.scss +++ b/openecomp-ui/resources/scss/modules/_softwareProductProcessesPage.scss @@ -25,13 +25,11 @@ align-items: center; .upload-btn { - padding: 20px; - padding-top: 7px; - padding-bottom: 3px; + padding: 4px 20px; } .drag-text { color: $blue; - font-weight: bolder; + @extend .body-1-semibold; } .or-text { margin-top: 10px; @@ -39,11 +37,9 @@ } } .vsp-processes-editor-data { - padding: 28px 54px; transition: border .2s; .vsp-process-dropzone-view { background-color: transparent; - padding: 15px; &.active-dragging { border: 3px dashed $dark-blue; border-radius: 20px; @@ -53,7 +49,7 @@ } .grid-section { .section-title { - padding-bottom: 0px; + padding-bottom: 0; } } } @@ -66,7 +62,8 @@ } } -.vsp-processes-page { +.software-product-landing-view-right-side.vsp-processes-page { + overflow-y: initial; .processes-list { @extend .flex-column; } diff --git a/openecomp-ui/resources/scss/modules/_softwareproductComponentLoadBalancing.scss b/openecomp-ui/resources/scss/modules/_softwareproductComponentLoadBalancing.scss index 04cb3c2051..ceae4a00de 100644 --- a/openecomp-ui/resources/scss/modules/_softwareproductComponentLoadBalancing.scss +++ b/openecomp-ui/resources/scss/modules/_softwareproductComponentLoadBalancing.scss @@ -1,45 +1,47 @@ .vsp-components-load-balancing { - .svg-icon-wrapper { - position: relative; - top: -3px; - .svg-icon.chevron-up, .svg-icon.chevron-down { - width: 10px; - height: 10px; - } + .svg-icon-wrapper { + position: relative; + top: -3px; + &.chevronUp, &.chevronDown { + .svg-icon { + width: 10px; + height: 10px; + } } + } .halb-data { - .load-balancing-page-title { - @extend .section-title; - &:first-child { - padding: 0 0 40px 0; - } - } - .question { - padding-top: 10px; - &:first-child { - padding-top: 0; - } - } - .title { - @extend .body-1-medium; - 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; - } + .load-balancing-page-title { + @extend .section-title; + &:first-child { + padding: 0 0 40px 0; + } + } + .question { + padding-top: 10px; + &:first-child { + padding-top: 0; + } + } + .title { + @extend .body-1-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/_vspComponentCompute.scss b/openecomp-ui/resources/scss/modules/_vspComponentCompute.scss new file mode 100644 index 0000000000..ee8cfa5c7f --- /dev/null +++ b/openecomp-ui/resources/scss/modules/_vspComponentCompute.scss @@ -0,0 +1,19 @@ +.vsp-component-computeFlavor-view { + .component-questionnaire-validation-form { + .vm-sizing-section { + .section-title { + text-transform: capitalize; + font-size: 18px; + } + .duplicate-title-line label.control-label{ + height: 2.7em; + } + } + } +} + +.compute-flavor-editor-modal-edit { + .modal-lg { + 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 c49e4f551d..4bcf7940eb 100644 --- a/openecomp-ui/resources/scss/modules/_vspComponentMonitoring.scss +++ b/openecomp-ui/resources/scss/modules/_vspComponentMonitoring.scss @@ -4,7 +4,7 @@ .section-title { padding-bottom: 20px; } - &:first-child { + &:not(:last-child) { padding-bottom: 50px; } .software-product-landing-view-top-block-col-upl { @@ -18,13 +18,11 @@ padding: 25px 0; align-items: center; .upload-btn { - padding: 20px; - padding-top: 7px; - padding-bottom: 3px; + padding: 4px 20px; } .drag-text { color: $blue; - font-weight: bolder; + @extend .body-1-semibold; } .or-text { margin-top: 10px; diff --git a/openecomp-ui/resources/scss/modules/_vspComponentQuestionnaire.scss b/openecomp-ui/resources/scss/modules/_vspComponentQuestionnaire.scss index d194c678b9..5696b354a7 100644 --- a/openecomp-ui/resources/scss/modules/_vspComponentQuestionnaire.scss +++ b/openecomp-ui/resources/scss/modules/_vspComponentQuestionnaire.scss @@ -25,7 +25,7 @@ .vertical-flex { flex-direction: column; .control-label { - @extend .body-2-medium; + @extend .body-2-semibold; } .radio-options-content-row { display: flex; diff --git a/openecomp-ui/resources/scss/modules/_vspHeatSetup.scss b/openecomp-ui/resources/scss/modules/_vspHeatSetup.scss index 59e983686b..75d96b4c85 100644 --- a/openecomp-ui/resources/scss/modules/_vspHeatSetup.scss +++ b/openecomp-ui/resources/scss/modules/_vspHeatSetup.scss @@ -82,31 +82,35 @@ min-width: 0; } - .svg-icon.trash-o { + .svg-icon-wrapper.trashO { + .svg-icon { fill: $dark-gray; height: 18px; width: 18px; &:hover { - fill: $black; + fill: $black; } + } } .module-title-by-type { - @extend .heading-5-medium; + @extend .heading-5-semibold; margin-right: 3px; } .modules-list-item-filename { display: flex; align-items: center; - .svg-icon.pencil { - height: 15px; - width: 15px; + .svg-icon-wrapper.pencil { + .svg-icon { + height: 15px; + width: 15px; + } margin-left: 3px; opacity: 0; } .filename-text { - @extend .heading-5-medium; + @extend .heading-5-semibold; } @@ -120,7 +124,7 @@ padding: 0; .name-edit { padding: 4px; - @extend .heading-5-medium; + @extend .heading-5-semibold; height: 100%; border: 1px solid $light-gray; width: 400px; @@ -140,12 +144,14 @@ border-color: transparent; } } - .svg-icon.pencil { + .svg-icon-wrapper.pencil { margin-left: 10px; opacity: 1; - stroke: $dark-gray; - &:hover { - stroke: $black; + .svg-icon { + stroke: $dark-gray; + &:hover { + stroke: $black; + } } } } @@ -158,7 +164,7 @@ .Select-option { @extend .body-1; &.is-selected { - @extend .body-1-medium; + @extend .body-1-semibold; background-color: $white; } &.is-focused { @@ -220,7 +226,7 @@ } .artifact-files-header { - @extend .heading-5-medium; + @extend .heading-5-semibold; display: flex; margin-bottom: 10px; justify-content: space-between; @@ -248,7 +254,6 @@ .unassigned-files { margin-top: 30px; border: 1px solid $light-gray; - width: 25%; background-color: $white; height: 250px; width: 250px; @@ -258,7 +263,7 @@ top: 10px; .unassigned-files-title { - @extend .heading-5-medium; + @extend .heading-5-semibold; background-color: $tlv-gray; padding: 11px 0 9px 15px; } @@ -284,16 +289,20 @@ display: flex; align-items: center; margin-bottom: 10px; - .svg-icon.angle-right { + .svg-icon-wrapper.angleRight { + .svg-icon { height: 10px; width: 10px; margin-left: 7px; fill: $blue; + } } &:hover { color: $dark-blue; - .svg-icon.angle-right { + .svg-icon-wrapper.angleRight { + .svg-icon { fill: $dark-blue; + } } } } diff --git a/openecomp-ui/resources/scss/modules/onboardingCatalog/_catalogTile.scss b/openecomp-ui/resources/scss/modules/onboardingCatalog/_catalogTile.scss index 5ce8e12ec3..07f86aba2a 100644 --- a/openecomp-ui/resources/scss/modules/onboardingCatalog/_catalogTile.scss +++ b/openecomp-ui/resources/scss/modules/onboardingCatalog/_catalogTile.scss @@ -1,8 +1,8 @@ .catalog-tile { - &:hover { - box-shadow: 0.3px 5px 12.8px 1.3px rgba(24, 24, 25, 0.15); - border: 1px solid $light-gray; - } + &: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; @@ -11,48 +11,54 @@ padding-left: 10px; align-items: flex-start; flex-direction: column; - .catalog-tile-content { - margin-top: auto; - width: 180px; - } - + .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; - } + 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; + 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-medium; - color: $gray; - line-height: 12px; - @include ellipsis(auto,inline-block,178px); + .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; + @include ellipsis(auto, inline-block, 178px); + } - } - .catalog-tile-item-name { - @extend .heading-5-medium; - color: $black; - @include ellipsis(auto,inline-block,175px); - } } + .catalog-tile-item-name { + @extend .heading-5-semibold; + color: $black; + @include ellipsis(auto, inline-block, 175px); + line-height: inherit; + } + } .catalog-tile-icon { width: 58px; @@ -65,32 +71,39 @@ align-self: center; height: 58px; width: 58px; - margin-left: 122px; + margin-left: 122px; background-repeat: no-repeat; - .svg-icon { + .svg-icon-wrapper { &.vendor { - fill: $dark-gray; - margin-top: 22px; - width: 53px; - height: 47px; - &:hover { + .svg-icon { fill: $dark-gray; + width: 53px; + height: 47px; + &:hover { + fill: $dark-gray; + } } + margin-top: 22px; + } &.vsp { - fill: $light-blue; + .svg-icon { + fill: $light-blue; + width: 60px; + height: 40px; + } margin-top: 18px; margin-left: 3px; - width: 60px; - height: 40px; } &.vlm { - fill: $purple; margin-top: 18px; - width: 45px; - height: 53px; - } + .svg-icon { + fill: $purple; + width: 45px; + height: 53px; + } + } } } } @@ -99,13 +112,17 @@ padding-top: 5px; display: flex; justify-content: space-between; - margin-top:2px; + margin-top: 2px; padding-bottom: 3px; - @extend .body-2-medium; - .svg-icon.plus { - height: 9px; - width: 9px; - fill: $blue; + @extend .body-2-semibold; + .svg-icon-wrapper { + &.plus { + .svg-icon { + height: 9px; + width: 9px; + fill: $blue; + } + } } .catalog-tile-item-details { overflow: hidden; @@ -113,27 +130,27 @@ .catalog-tile-add-new-vsp { color: $blue; - margin-left:40px; + margin-left: 40px; } .catalog-tile-locking-user-name { @extend .body-2; - @include ellipsis(auto,inline-block,180px); + @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; - } - } - } + .catalog-tile-check-in-status { + .svg-icon-wrapper { + &.locked { + .svg-icon { + width: 11px; + fill: $gray; + } } + &.unlocked { + .svg-icon { + width: 11px; + fill: $gray; + } + } + } + } } } diff --git a/openecomp-ui/resources/scss/modules/onboardingCatalog/_createItemTile.scss b/openecomp-ui/resources/scss/modules/onboardingCatalog/_createItemTile.scss index b9f83fc452..aa3cf04c4f 100644 --- a/openecomp-ui/resources/scss/modules/onboardingCatalog/_createItemTile.scss +++ b/openecomp-ui/resources/scss/modules/onboardingCatalog/_createItemTile.scss @@ -22,7 +22,7 @@ } &:hover { box-shadow: 0.3px 5px 12.8px 1.3px rgba(24, 24, 25, 0.15); - + border: 1px solid $light-gray; } &:only-child { @@ -33,7 +33,7 @@ margin: 0 0 15px 0; } .create-item-text { - @extend .heading-4-medium; + @extend .heading-4-semibold; } } .create-item-plus-icon{ @@ -42,14 +42,14 @@ margin: -5px 12px 0 0; .svg-icon.plus { height: 19px; - width: 19px; + width: 19px; } } &.vlm-type { .create-item-text { color: $purple; } - + .create-item-plus-icon { fill: $purple; } @@ -58,14 +58,14 @@ .create-item-text { color: $blue; } - + .create-item-plus-icon { fill: $blue; } } .create-item-text { width: 140px; - @extend .heading-5-medium; + @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 da4c017d39..32ebac98cf 100644 --- a/openecomp-ui/resources/scss/modules/onboardingCatalog/_onboardHeader.scss +++ b/openecomp-ui/resources/scss/modules/onboardingCatalog/_onboardHeader.scss @@ -15,7 +15,7 @@ flex-direction: row; margin-left: 60px; .onboard-header-tab { - @extend .body-1-medium; + @extend .body-1-semibold; margin-right: 40px; cursor: pointer; display: flex; diff --git a/openecomp-ui/resources/scss/modules/onboardingCatalog/_vendorTile.scss b/openecomp-ui/resources/scss/modules/onboardingCatalog/_vendorTile.scss index 79a64f84ee..5972bb2d67 100644 --- a/openecomp-ui/resources/scss/modules/onboardingCatalog/_vendorTile.scss +++ b/openecomp-ui/resources/scss/modules/onboardingCatalog/_vendorTile.scss @@ -1,87 +1,87 @@ @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; - } - .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-item-name { + margin-top: 21px; + line-height: inherit; + } + .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; + } + } } .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; - } + 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){ + @media (min-width: 1900px) { @include flipOverlayDirection($itemsInRow: 8); } - @media (min-width: 1586px) and (max-width: 1899px){ + @media (min-width: 1586px) and (max-width: 1899px) { @include flipOverlayDirection($itemsInRow: 7); } - @media (min-width: 1368px) and (max-width: 1585px){ + @media (min-width: 1368px) and (max-width: 1585px) { @include flipOverlayDirection($itemsInRow: 6); } - @media (max-width: 1367px){ + @media (max-width: 1367px) { @include flipOverlayDirection($itemsInRow: 5); } @import "vspOverlay"; diff --git a/openecomp-ui/resources/scss/modules/onboardingCatalog/_vspOverlay.scss b/openecomp-ui/resources/scss/modules/onboardingCatalog/_vspOverlay.scss index 8816ca5df9..80ed7385e0 100644 --- a/openecomp-ui/resources/scss/modules/onboardingCatalog/_vspOverlay.scss +++ b/openecomp-ui/resources/scss/modules/onboardingCatalog/_vspOverlay.scss @@ -41,7 +41,7 @@ flex-direction: column; margin: 10px 0 10px 0; .vsp-overlay-title { - @extend .heading-5-medium; + @extend .heading-5-semibold; margin-bottom: 15px; padding: 10px 20px 10px 20px; background: $highlight-gray; |