diff options
Diffstat (limited to 'openecomp-ui/resources/scss')
47 files changed, 679 insertions, 390 deletions
diff --git a/openecomp-ui/resources/scss/_components.scss b/openecomp-ui/resources/scss/_components.scss index bd85f547c9..c70b914187 100644 --- a/openecomp-ui/resources/scss/_components.scss +++ b/openecomp-ui/resources/scss/_components.scss @@ -17,9 +17,9 @@ @import "components/expandableInput"; @import "components/grid"; @import "components/icon"; -@import "components/svgIcon"; @import "components/activityLog"; @import "components/selectActionTable"; +@import "components/datepicker"; %noselect { -webkit-touch-callout: none; diff --git a/openecomp-ui/resources/scss/_modules.scss b/openecomp-ui/resources/scss/_modules.scss index 578895dfe0..317f90800f 100644 --- a/openecomp-ui/resources/scss/_modules.scss +++ b/openecomp-ui/resources/scss/_modules.scss @@ -12,7 +12,9 @@ @import "modules/_softwareProductComponentGeneral"; @import "modules/_softwareproductComponentLoadBalancing"; @import "modules/_softwareProductComponentProcessesPage"; +@import "modules/_softwareProductComponentImage"; @import "modules/softwareProductComponentCompute"; +@import "modules/vspComponentCompute"; @import "modules/vspComponentMonitoring"; @import "modules/licenseModel"; @import "modules/onboardingCatalog"; @@ -20,3 +22,4 @@ @import "modules/uploadScreen"; @import "modules/vspHeatSetup"; @import "modules/softwareProductDependencies"; +@import "modules/softwareProductDeployment"; diff --git a/openecomp-ui/resources/scss/bootstrap-cust/_forms.scss b/openecomp-ui/resources/scss/bootstrap-cust/_forms.scss index 8085274cac..60fd7ab07d 100644 --- a/openecomp-ui/resources/scss/bootstrap-cust/_forms.scss +++ b/openecomp-ui/resources/scss/bootstrap-cust/_forms.scss @@ -1,6 +1,6 @@ .form-group { .control-label { - @extend .body-2-medium; + @extend .body-2-semibold; } &.required { label:before { diff --git a/openecomp-ui/resources/scss/bootstrap-cust/_modals.scss b/openecomp-ui/resources/scss/bootstrap-cust/_modals.scss index 6a825b811e..9301f1ed39 100644 --- a/openecomp-ui/resources/scss/bootstrap-cust/_modals.scss +++ b/openecomp-ui/resources/scss/bootstrap-cust/_modals.scss @@ -19,5 +19,11 @@ padding: 15px; border-top: 0; background-color: $tlv-gray; + .sdc-modal-footer { + .sdc-button + .sdc-button { + margin-left: 5px; + } + } + } } diff --git a/openecomp-ui/resources/scss/bootstrap-cust/_navs.scss b/openecomp-ui/resources/scss/bootstrap-cust/_navs.scss index 7b9cff963d..914a7794f1 100644 --- a/openecomp-ui/resources/scss/bootstrap-cust/_navs.scss +++ b/openecomp-ui/resources/scss/bootstrap-cust/_navs.scss @@ -22,7 +22,7 @@ &, &:hover, &:focus { - @extend .body-1-medium; + @extend .body-1-semibold; border-bottom: 3px solid $blue; } } diff --git a/openecomp-ui/resources/scss/bootstrap-cust/_variables.scss b/openecomp-ui/resources/scss/bootstrap-cust/_variables.scss index 1af39d5b39..1c053e500b 100644 --- a/openecomp-ui/resources/scss/bootstrap-cust/_variables.scss +++ b/openecomp-ui/resources/scss/bootstrap-cust/_variables.scss @@ -28,7 +28,7 @@ $link-hover-color: $blue; //== Typography // //## Font, line-height, and color for body text, headings, and more. -$font-family-sans-serif: omnes-regular, "Omnes-Regular", "Helvetica Neue", Helvetica, Arial, sans-serif; +$font-family-sans-serif: "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif; //$font-family-base: $font-family-sans-serif !default; $font-size-base: $body-font-2; $font-size-large: $body-font-1; diff --git a/openecomp-ui/resources/scss/bootstrap.scss b/openecomp-ui/resources/scss/bootstrap.scss index a8c470216d..777f490a89 100644 --- a/openecomp-ui/resources/scss/bootstrap.scss +++ b/openecomp-ui/resources/scss/bootstrap.scss @@ -7,12 +7,12 @@ @import "bootstrap/variables"; @import "bootstrap/mixins"; // Reset and dependencies -@import "bootstrap/normalize"; +//@import "bootstrap/normalize"; //@import "bootstrap/print"; //@import "bootstrap/glyphicons"; // Core CSS -@import "bootstrap/scaffolding"; +//@import "bootstrap/scaffolding"; @import "bootstrap/type"; @import "bootstrap/code"; @import "bootstrap/grid"; @@ -20,8 +20,8 @@ @import "bootstrap-cust/tables"; @import "bootstrap/forms"; @import "bootstrap-cust/forms"; -@import "bootstrap/buttons"; -@import "bootstrap-cust/buttons"; +//@import "bootstrap/buttons"; +//@import "bootstrap-cust/buttons"; // Components @import "bootstrap/component-animations"; @import "bootstrap/dropdowns"; diff --git a/openecomp-ui/resources/scss/bootstrap/_mixins.scss b/openecomp-ui/resources/scss/bootstrap/_mixins.scss index 62dfda69dc..3d08c9b390 100644 --- a/openecomp-ui/resources/scss/bootstrap/_mixins.scss +++ b/openecomp-ui/resources/scss/bootstrap/_mixins.scss @@ -16,7 +16,7 @@ @import "mixins/vendor-prefixes"; // Components @import "mixins/alerts"; -@import "mixins/buttons"; +//@import "mixins/buttons"; @import "mixins/panels"; @import "mixins/pagination"; @import "mixins/list-group"; diff --git a/openecomp-ui/resources/scss/common/_typography.scss b/openecomp-ui/resources/scss/common/_typography.scss index 1543f0adcd..94e1ba4d61 100644 --- a/openecomp-ui/resources/scss/common/_typography.scss +++ b/openecomp-ui/resources/scss/common/_typography.scss @@ -1,22 +1,26 @@ /* Fonts */ @mixin base-font-regular() { - font-family: omnes-regular, Arial, sans-serif; + font-family: OpenSans, OpenSans-Regular, 'Open Sans',omnes-regular, Arial, sans-serif; } @mixin base-font-light() { - font-family: omnes-light, Arial, sans-serif; + font-family: OpenSans-Light, 'Open Sans', omnes-light, Arial, sans-serif; } -@mixin base-font-medium() { - font-family: omnes-medium, Arial, sans-serif; +@mixin base-font-italic(){ + font-family: OpenSans-Italic, 'Open Sans', omnes-italic, Arial, sans-serif; +} + +@mixin base-font-semibold() { + font-family: OpenSans-Semibold, 'Open Sans', omnes-medium, Arial, sans-serif; } @mixin base-font-bold() { - font-family: omnes-bold, Arial, sans-serif; + font-family: OpenSans-Bold, 'Open Sans', omnes-bold, Arial, sans-serif; } -$heading-font-1: 36px; +$heading-font-1: 28px; $heading-font-2: 24px; $heading-font-3: 20px; $heading-font-4: 18px; @@ -25,6 +29,7 @@ $heading-font-5: 16px; $body-font-1: 14px; $body-font-2: 13px; $body-font-3: 12px; +$body-font-4: 10px; $icon-font-size: 11px; $icon-font-family: Arial; @@ -52,8 +57,8 @@ $radio-font-family: Arial; @extend .text-uppercase !optional; } -.heading-3-medium { - @include base-font-medium; +.heading-3-semibold { + @include base-font-semibold; font-size: $heading-font-3; @extend .text-uppercase !optional; } @@ -63,8 +68,8 @@ $radio-font-family: Arial; font-size: $heading-font-4; } -.heading-4-medium { - @include base-font-medium; +.heading-4-semibold { + @include base-font-semibold; font-size: $heading-font-4; } @@ -73,8 +78,8 @@ $radio-font-family: Arial; font-size: $heading-font-5; } -.heading-5-medium { - @include base-font-medium; +.heading-5-semibold { + @include base-font-semibold; font-size: $heading-font-5; } @@ -83,8 +88,8 @@ $radio-font-family: Arial; font-size: $body-font-1; } -.body-1-medium { - @include base-font-medium; +.body-1-semibold { + @include base-font-semibold; font-size: $body-font-1; } @@ -98,8 +103,8 @@ $radio-font-family: Arial; font-size: $body-font-2; } -.body-2-medium { - @include base-font-medium; +.body-2-semibold { + @include base-font-semibold; font-size: $body-font-2; } @@ -108,18 +113,28 @@ $radio-font-family: Arial; font-size: $body-font-3; } -.body-3-medium { - @include base-font-medium; +.body-3-semibold { + @include base-font-semibold; font-size: $body-font-3; } +.body-4 { + @include base-font-regular; + font-size: $body-font-4; +} + +.body-4-semibold { + @include base-font-semibold; + font-size: $body-font-4; +} + .body-3-light { @include base-font-light; font-size: $body-font-3; } .circle-icon-text { - @include base-font-medium; + @include base-font-semibold; font-size: $body-font-1; } diff --git a/openecomp-ui/resources/scss/components/_activityLog.scss b/openecomp-ui/resources/scss/components/_activityLog.scss index 1e31e06814..9ada804934 100644 --- a/openecomp-ui/resources/scss/components/_activityLog.scss +++ b/openecomp-ui/resources/scss/components/_activityLog.scss @@ -29,7 +29,7 @@ $message-info-icon-size: 16px; height: 36px; @extend .body-1; &.header { - @extend .body-1-medium; + @extend .body-1-semibold; background-color: $tlv-light-gray; color: $text-black; } @@ -39,7 +39,7 @@ $message-info-icon-size: 16px; .svg-icon-wrapper { float: right; } - .check-circle { + .checkCircle { fill: $green; width: 16px; height: 16px; diff --git a/openecomp-ui/resources/scss/components/_buttons.scss b/openecomp-ui/resources/scss/components/_buttons.scss index fbf2c3e728..357a799e93 100644 --- a/openecomp-ui/resources/scss/components/_buttons.scss +++ b/openecomp-ui/resources/scss/components/_buttons.scss @@ -2,8 +2,7 @@ border: 1px solid; border-color: $blue; color: $blue; - font-weight: bolder; - @extend .body-1; + @extend .body-1-semibold; text-align: center; padding: 7px; border-radius: 5px; diff --git a/openecomp-ui/resources/scss/components/_datepicker.scss b/openecomp-ui/resources/scss/components/_datepicker.scss new file mode 100644 index 0000000000..593bb09d7d --- /dev/null +++ b/openecomp-ui/resources/scss/components/_datepicker.scss @@ -0,0 +1,51 @@ +.customized-date-picker { + margin-bottom: 24px; + .date-picker-label { + &.required { + &:before { + content: "*"; + color: $red; + margin: 0 4px 0 0; + } + } + + @extend .body-2-semibold; + color: $dark-gray; + margin-bottom: 8px; + } + .datepicker-custom-input { + display: flex; + justify-content: space-between; + width: 243px; + height: 30px; + border-radius: 2px; + color: $dark-gray; + border: 1px solid $light-gray; + padding: 6px 12px; + &:hover { + border-color: $gray; + .clear-input { + &:before { + cursor: pointer; + content: 'x'; + } + } + } + .datepicker-text { + cursor: pointer; + width: 170px; + @extend .body-1; + &.placeholder { + color: $light-gray; + } + + } + .calendar-input { + fill: $light-gray; + } + } + + + +} + diff --git a/openecomp-ui/resources/scss/components/_forms.scss b/openecomp-ui/resources/scss/components/_forms.scss index 23c58ea4ac..b662ce873c 100644 --- a/openecomp-ui/resources/scss/components/_forms.scss +++ b/openecomp-ui/resources/scss/components/_forms.scss @@ -1,5 +1,5 @@ .section-title { - @extend .heading-3-medium; + @extend .heading-3-semibold; padding: 50px 0 30px 0; &:first-child { padding: 0 0 30px 0; diff --git a/openecomp-ui/resources/scss/components/_grid.scss b/openecomp-ui/resources/scss/components/_grid.scss index d4d1fa7ccd..9a76f97546 100644 --- a/openecomp-ui/resources/scss/components/_grid.scss +++ b/openecomp-ui/resources/scss/components/_grid.scss @@ -1,7 +1,9 @@ $gridItemSpace: 15%; .grid-section { - padding-bottom: 30px; + &:not(:last-of-type) { + padding-bottom: 30px; + } .grid-items { display: flex; flex-direction: row; diff --git a/openecomp-ui/resources/scss/components/_listEditorView.scss b/openecomp-ui/resources/scss/components/_listEditorView.scss index 18d5426eb7..1c837ca4c2 100644 --- a/openecomp-ui/resources/scss/components/_listEditorView.scss +++ b/openecomp-ui/resources/scss/components/_listEditorView.scss @@ -15,16 +15,16 @@ border-bottom: 1px solid $light-gray; padding-bottom: 5px; .list-editor-view-title { - @extend .heading-3-medium; + @extend .heading-3-semibold; } .list-editor-view-add-controller { - @extend .heading-4-medium; + @extend .body-1-semibold; color: $blue; display: table; cursor: pointer; position: relative; - padding-top: 0px; - padding-bottom: 0px; + padding-top: 0; + padding-bottom: 0; margin-left: auto; .list-editor-view-add-title { display: flex; @@ -151,6 +151,13 @@ } } + .details-col{ + flex-direction: column; + .title { + padding-bottom: 0; + } + } + .description { @extend .body-1; @include multiline-ellipsis(1.3em, 3); diff --git a/openecomp-ui/resources/scss/components/_navigationSideBar.scss b/openecomp-ui/resources/scss/components/_navigationSideBar.scss index 36c14a2785..daf5025bee 100644 --- a/openecomp-ui/resources/scss/components/_navigationSideBar.scss +++ b/openecomp-ui/resources/scss/components/_navigationSideBar.scss @@ -16,7 +16,7 @@ flex-direction: column; background-color: $tlv-gray; .group-name { - @extend .heading-4-medium; + @extend .heading-4-semibold; @include ellipsis; min-height: 56px; display: block; @@ -47,13 +47,13 @@ @include ellipsis; white-space: normal; &.selected { - @extend .body-1-medium; + @extend .body-1-semibold; border-left: 4px solid $blue; padding-left: 18px; color: $blue; } &.bold-name { - @extend .body-1-medium; + @extend .body-1-semibold; } } } diff --git a/openecomp-ui/resources/scss/components/_notifications.scss b/openecomp-ui/resources/scss/components/_notifications.scss index 426f05cd89..7165e57ef9 100644 --- a/openecomp-ui/resources/scss/components/_notifications.scss +++ b/openecomp-ui/resources/scss/components/_notifications.scss @@ -5,12 +5,12 @@ .modal-header { padding: 15px 10px 10px; .modal-title { - @extend .heading-5-medium; + @extend .heading-5-semibold; } } .modal-body { padding: 30px 15px; - @extend .body-1-medium; + @extend .body-1-semibold; } } diff --git a/openecomp-ui/resources/scss/components/_selectActionTable.scss b/openecomp-ui/resources/scss/components/_selectActionTable.scss index fa17733374..4e42b6ce5b 100644 --- a/openecomp-ui/resources/scss/components/_selectActionTable.scss +++ b/openecomp-ui/resources/scss/components/_selectActionTable.scss @@ -1,16 +1,16 @@ .select-action-table-view { .svg-icon-wrapper { flex-direction: row; - + &::before { - content:""; + content:""; } .svg-icon { margin-left: 5px; margin-right: 5px; width:16px; height:16px; - } + } } .dummy-icon { background-color: $white; @@ -39,34 +39,39 @@ .select-action-table-headers { display: flex; background-color: $tlv-light-gray; - border-color: inherit; + border-color: inherit; .select-action-table-header { - @extend .body-1-medium; + @extend .body-1-semibold; flex: 1; border-top: 1px solid; - border-right: 1px solid; + border-right: 1px solid; border-color: inherit; padding: 8px 0 7px 20px; &:first-child { border-left: 1px solid; border-color: inherit; } - } + } } .select-action-table-row-wrapper { display: flex; - flex-direction: row; + flex-direction: row; margin-bottom: 14px; - .svg-icon.trash-o { - - fill: $dark-gray; + .svg-icon-wrapper.trashO { + .svg-icon { + fill: $dark-gray; + } + } + .svg-icon-wrapper.errorCircle { + .svg-icon { + fill: $red; + } } - .svg-icon.error-circle { - fill: $red; + .svg-icon-wrapper.checkCircle { + .svg-icon { + fill: $green; + } } - .svg-icon.check-circle { - fill: $green; - } .select-action-table-row { display: flex; flex: 1; @@ -90,7 +95,7 @@ } } .form-group { - margin: 0; + margin: 0; .Select-control { height:36px; border: none; @@ -102,7 +107,7 @@ padding-left: 20px; padding-right: 50px; padding-top: 4px; - + } .Select-placeholder { color: $dark-gray; @@ -110,23 +115,23 @@ .Select-arrow-zone { padding-right: 15px; } - } + } } &:last-child { border-right: none; - } + } } .Select-menu-outer { border-left: 1px solid $blue; border-right: 1px solid $blue; border-bottom: 1px solid $blue; overflow: auto; - .Select-menu { + .Select-menu { display: inline-block; - .Select-option { + .Select-option { width: 100%; display: inline-block; - border-bottom: 1px solid $light-gray; + border-bottom: 1px solid $light-gray; &:hover { background-color: $blue; color: $white; @@ -142,9 +147,9 @@ } &.is-focused { background-color: transparent; - } + } } - } + } } } } diff --git a/openecomp-ui/resources/scss/components/_submitErrorResponse.scss b/openecomp-ui/resources/scss/components/_submitErrorResponse.scss index e34be01af2..b917dfefeb 100644 --- a/openecomp-ui/resources/scss/components/_submitErrorResponse.scss +++ b/openecomp-ui/resources/scss/components/_submitErrorResponse.scss @@ -26,7 +26,7 @@ background-color: $tlv-gray; padding: 5px; cursor: pointer; - .chevron-down { + .chevronDown { width:10px; height:10px; margin-right: 10px; @@ -54,7 +54,7 @@ .component-name-header { margin-left: 45px; margin-top: 10px; - @extend .heading-5-medium; + @extend .heading-5-semibold; } } } diff --git a/openecomp-ui/resources/scss/components/_svgIcon.scss b/openecomp-ui/resources/scss/components/_svgIcon.scss deleted file mode 100644 index fc02f81fd4..0000000000 --- a/openecomp-ui/resources/scss/components/_svgIcon.scss +++ /dev/null @@ -1,51 +0,0 @@ -@mixin overrideBootstrapClose(){ - opacity: 1; - float: none; - &:hover { - opacity: 1; - } -} - -.svg-icon-wrapper { - display: inline-flex; - justify-content: center; - align-items: center; - &.bottom { - flex-direction: column; - .svg-icon-label { - margin-bottom: 5px; - } - } - &.right { - float: none; - .svg-icon-label { - margin-left: 5px; - } - } - &.top { - flex-direction: column-reverse;; - .svg-icon-label { - margin-top: 5px; - } - } - &.left { - flex-direction: row-reverse;; - .svg-icon-label { - margin-right: 5px; - } - } - // bootstrap override - &.close { - @include overrideBootstrapClose(); - } - .close { - @include overrideBootstrapClose(); - } - .svg-icon { - width: 20px; - height: 20px; - } - .svg-icon-label { - @extend .body-1; - } -} diff --git a/openecomp-ui/resources/scss/components/_validationForm.scss b/openecomp-ui/resources/scss/components/_validationForm.scss index 9404f2841a..46269ad699 100644 --- a/openecomp-ui/resources/scss/components/_validationForm.scss +++ b/openecomp-ui/resources/scss/components/_validationForm.scss @@ -4,6 +4,9 @@ form { position: relative; flex: 1; } + .validation-radio-wrapper { + position: relative; + } .nav-tabs { position: relative; .invalid-tab:not(.active) { diff --git a/openecomp-ui/resources/scss/components/_versionController.scss b/openecomp-ui/resources/scss/components/_versionController.scss index 3c30cdcc37..b454d3496b 100644 --- a/openecomp-ui/resources/scss/components/_versionController.scss +++ b/openecomp-ui/resources/scss/components/_versionController.scss @@ -20,7 +20,7 @@ padding-right: 10px; margin-right: 15px; margin-left: 10px; - @extend .body-1; + @extend .body-1; } .version-section { .form-group { @@ -59,7 +59,7 @@ margin-right: 20px; padding-bottom: 5px; - .version-controller-lock-closed { + .versionControllerLockClosed { fill: $dark-gray; width: 21px; height: 23px; @@ -71,7 +71,7 @@ fill: $black; } } - .version-controller-lock-open { + .versionControllerLockOpen { fill: $dark-gray; width: 24px; height: 28px; @@ -80,7 +80,7 @@ fill: $black; } } - .version-controller-submit { + .versionControllerSubmit { fill: $blue; &.disabled { fill: $light-gray; @@ -90,7 +90,7 @@ } } - .version-controller-revert { + .versionControllerRevert { fill: $dark-gray; &.disabled { fill: $light-gray; @@ -99,7 +99,7 @@ fill: $black; } } - .version-controller-save { + .versionControllerSave { fill: $dark-gray; &.disabled { fill: $light-gray; 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; diff --git a/openecomp-ui/resources/scss/onboarding.scss b/openecomp-ui/resources/scss/onboarding.scss index 6b892ac0a4..d7d4586354 100644 --- a/openecomp-ui/resources/scss/onboarding.scss +++ b/openecomp-ui/resources/scss/onboarding.scss @@ -1,12 +1,68 @@ .dox-ui { @import "bootstrap"; @import "~react-select/dist/react-select.min.css"; + @import "~react-datepicker/dist/react-datepicker.min.css"; @import "common"; @import "components"; @import "modules"; } +/* Out of namespace context for datepicker */ +div[data-reactroot].customized-date-picker-calendar { + @import "common/variables"; + @import "common/typography"; + border-radius: 2px; + border-color: $light-gray; + margin-top: -8px; + .react-datepicker__triangle { + margin-top: 0px; + } + .react-datepicker__navigation--previous { + border: none; + width: 15px; + height: 15px; + margin-top: 2px; + content: url(../images/angle-left.svg); + } + .react-datepicker__navigation--next { + border: none; + width: 15px; + height: 15px; + margin-top: 2px; + content: url(../images/angle-right.svg); + } + .react-datepicker__month-container { + .react-datepicker__header { + background-color: $background-gray; + border-bottom: none; + .react-datepicker__current-month { + @extend .heading-5; + background-color: $background-gray; + margin-bottom: 10px; + } + .react-datepicker__day-names { + @extend .heading-5; + background-color: $white; + } + } + .react-datepicker__day--selected { + @extend .heading-5; + border-radius: 20px; + background-color: $blue; + &:hover { + background-color: $dark-blue; + } + } + .react-datepicker__day { + @extend .heading-5; + &:hover { + border-radius: 20px; + } + } + } +} + /* Out of namespace context for tooltips */ div[data-reactroot].tooltip { @import "common/variables"; @@ -16,11 +72,26 @@ div[data-reactroot].tooltip { opacity: 1; } &.validation-error-message { - &.bottom { - .tooltip-arrow { - border-bottom-color: $red !important; - } - } + &.bottom { + .tooltip-arrow { + border-bottom-color: $red !important; + } + } + &.left { + .tooltip-arrow { + border-left-color: $red !important; + } + } + &.right { + .tooltip-arrow { + border-right-color: $red !important; + } + } + &.top { + .tooltip-arrow { + border-top-color: $red !important; + } + } } &.bottom { .tooltip-arrow { |