diff options
Diffstat (limited to 'openecomp-ui/resources')
30 files changed, 775 insertions, 595 deletions
diff --git a/openecomp-ui/resources/scss/_components.scss b/openecomp-ui/resources/scss/_components.scss index c70b914187..7c726aa8dd 100644 --- a/openecomp-ui/resources/scss/_components.scss +++ b/openecomp-ui/resources/scss/_components.scss @@ -16,7 +16,6 @@ @import "components/submitErrorResponse"; @import "components/expandableInput"; @import "components/grid"; -@import "components/icon"; @import "components/activityLog"; @import "components/selectActionTable"; @import "components/datepicker"; diff --git a/openecomp-ui/resources/scss/_modules.scss b/openecomp-ui/resources/scss/_modules.scss index 317f90800f..405e91a61b 100644 --- a/openecomp-ui/resources/scss/_modules.scss +++ b/openecomp-ui/resources/scss/_modules.scss @@ -1,4 +1,5 @@ @import "modules/licenseModelOverview"; +@import "modules/licenseModelLimits"; @import "modules/licenseAgreement"; @import "modules/featureGroup"; @import "modules/entitlementPools"; diff --git a/openecomp-ui/resources/scss/bootstrap-cust/_modals.scss b/openecomp-ui/resources/scss/bootstrap-cust/_modals.scss index 9301f1ed39..ad6b4f8aca 100644 --- a/openecomp-ui/resources/scss/bootstrap-cust/_modals.scss +++ b/openecomp-ui/resources/scss/bootstrap-cust/_modals.scss @@ -1,6 +1,7 @@ .modal-content { .modal-header { border-top: 3px solid $blue; + padding-left: 50px; .modal-title { @extend .heading-2; } diff --git a/openecomp-ui/resources/scss/common/_utils.scss b/openecomp-ui/resources/scss/common/_utils.scss index dce623e15d..54f8b977a3 100644 --- a/openecomp-ui/resources/scss/common/_utils.scss +++ b/openecomp-ui/resources/scss/common/_utils.scss @@ -219,14 +219,10 @@ $browserPrefixes: webkit moz o ms; width: $size; height: $size; background: $bgcolor; - border: 3px solid $bgcolor; - &:after { - content: $content; - position: relative; - left: 9px; - top: 9px; - @extend .circle-icon-text; - } + border: 3px solid $bgcolor; + display: flex; + align-items: center; + justify-content: center; } /**/ @@ -306,3 +302,12 @@ $browserPrefixes: webkit moz o ms; @mixin border-shadow($xShadow: 0.545px, $yShadow: 0.839px, $blur: 4px, $spread: 0, $color: $light-gray, $opacity: 0.2) { @include box-shadow($xShadow $yShadow $blur $spread rgba($color, $opacity)); } + +/* percent-plus-value */ +// @mixin +// Calculate length property (e.g. width, margin) by adding a value (e.g. in pixels) +// to a percentage of container height/width +@mixin percent-plus-value($property, $value, $percent: 100%) { + $string: 'calc(' + $percent + ' + ' + $value + ')'; + #{$property}: unquote($string); +} diff --git a/openecomp-ui/resources/scss/common/_variables.scss b/openecomp-ui/resources/scss/common/_variables.scss index 2162b0b1b0..3a3178c6b0 100644 --- a/openecomp-ui/resources/scss/common/_variables.scss +++ b/openecomp-ui/resources/scss/common/_variables.scss @@ -47,14 +47,23 @@ $desktop-min-width: 1824px; /* Textures */ $images-folder-name: "../images"; +/* +$plus-circle-icon: $images-folder-name + "/plus-circle-icon.svg"; +$interface-icon: $images-folder-name + "/interface.svg"; +$sdc-logo: $images-folder-name + "/logo.svg"; +$warning-icon: $images-folder-name + "/warning.svg"; +*/ /* Icons */ $icons-folder: "../images/icons"; -$artifacts-icon: $images-folder-name + "/artifacts_icon.png"; -$check-icon: $images-folder-name + "/v_icon.png"; -$base-module-icon: $images-folder-name + "/base_icon.png"; -$module-icon: $images-folder-name + "/module_icon.png"; +/* +$plus-circle-icon: $images-folder-name + "/plus-circle-icon.svg"; +$interface-icon: $images-folder-name + "/interface.svg"; +$sdc-logo: $images-folder-name + "/logo.svg"; +$warning-icon: $images-folder-name + "/warning.svg"; +*/ $pencil-icon: $images-folder-name + "/pencil_icon-01.svg"; +/* $vc-check-in-icon: $icons-folder + "/checked_in.png"; $vc-checkout-icon: $icons-folder + "/checked_out.png"; $vc-revert-icon: $icons-folder + "/reverticon.png"; @@ -66,11 +75,12 @@ $vc-submit-disabled-icon: $icons-folder + "/submit_icon_disable.png"; $trash-icon: $images-folder-name + "/trash_icon.png"; $download-icon: $images-folder-name + "/download_icon.png"; $upload-icon: $images-folder-name + "/upload_icon.png"; +*/ - -/* catalog icons */ +/***** +// catalog icons $back-icon: $icons-folder + "/back_icon.png"; -/* validation icons */ +// validation icons $artifacts-selected-icon: $icons-folder + "/artifacts_blue_icon.png"; $artifacts-regular-icon: $icons-folder + "/artifacts_grey_icon.png"; $chevron_down: $icons-folder + "/down_chevron.png"; @@ -93,7 +103,7 @@ $heat-selected-icon: $icons-folder + "/nested_HEAT_icon_blue.png"; $env-icon: $icons-folder + "/env_icon.png"; $env-selected-icon: $icons-folder + "/env_icon_blue.png"; -/* vlm summary icons */ +// vlm summary icons $vlm-summary-plus-blue: $icons-folder + "/plus_vlm_summary_icon_blue.png"; $vlm-summary-plus: $icons-folder + "/plus_vlm_summary_icon.png"; @@ -102,4 +112,5 @@ $vlm-summary-orphans: $icons-folder + "/orphans_grey_icon.png"; $vlm-summary-orphans-blue: $icons-folder + "/orphans_blue_icon-n.png"; $vlm-summary-used: $icons-folder + "/vlm_list_view_grey_icon.png"; $vlm-summary-used-blue: $icons-folder + "/vlm_list_view_blue_icon.png"; +*****/ diff --git a/openecomp-ui/resources/scss/components/_activityLog.scss b/openecomp-ui/resources/scss/components/_activityLog.scss index 9ada804934..5e9418ed7d 100644 --- a/openecomp-ui/resources/scss/components/_activityLog.scss +++ b/openecomp-ui/resources/scss/components/_activityLog.scss @@ -39,11 +39,7 @@ $message-info-icon-size: 16px; .svg-icon-wrapper { float: right; } - .checkCircle { - fill: $green; - width: 16px; - height: 16px; - } + .status-icon.false:after { @include status-icon-class; float: right; diff --git a/openecomp-ui/resources/scss/components/_datepicker.scss b/openecomp-ui/resources/scss/components/_datepicker.scss index 593bb09d7d..d51a1b690e 100644 --- a/openecomp-ui/resources/scss/components/_datepicker.scss +++ b/openecomp-ui/resources/scss/components/_datepicker.scss @@ -1,5 +1,6 @@ .customized-date-picker { margin-bottom: 24px; + display: flex; .date-picker-label { &.required { &:before { @@ -13,27 +14,38 @@ color: $dark-gray; margin-bottom: 8px; } + .react-datepicker__input-container { + flex: 1; + cursor: pointer; + } .datepicker-custom-input { display: flex; justify-content: space-between; - width: 243px; + align-items: center; height: 30px; border-radius: 2px; color: $dark-gray; border: 1px solid $light-gray; - padding: 6px 12px; + padding: 6px 8px 6px 12px; + .clear-input { + margin-left: auto; + margin-right: 8px; + .svg-icon { + fill: transparent; + height: 8px; + width: 8px; + } + } &:hover { border-color: $gray; .clear-input { - &:before { - cursor: pointer; - content: 'x'; + .svg-icon { + fill: initial; } } } .datepicker-text { cursor: pointer; - width: 170px; @extend .body-1; &.placeholder { color: $light-gray; @@ -43,9 +55,13 @@ .calendar-input { fill: $light-gray; } + .svg-icon-wrapper.calendar { + .svg-icon { + fill: $dark-gray; + width: 17px; + height: 17px; + } + } } - - - } diff --git a/openecomp-ui/resources/scss/components/_dualListBox.scss b/openecomp-ui/resources/scss/components/_dualListBox.scss index 4a1a940c34..4353ab39e8 100644 --- a/openecomp-ui/resources/scss/components/_dualListBox.scss +++ b/openecomp-ui/resources/scss/components/_dualListBox.scss @@ -7,8 +7,7 @@ } .dual-search-multi-select-section { - $multi-select-box-width: 398px; - width: $multi-select-box-width; + flex: 1; .dual-text-box-search-title, .dual-list-box-multi-select-text { @extend .body-1; color: $dark-gray; diff --git a/openecomp-ui/resources/scss/components/_expandableInput.scss b/openecomp-ui/resources/scss/components/_expandableInput.scss index 52b72d7c91..2484a73e8a 100644 --- a/openecomp-ui/resources/scss/components/_expandableInput.scss +++ b/openecomp-ui/resources/scss/components/_expandableInput.scss @@ -1,24 +1,21 @@ .expandable-input-top { display: flex; height: 22px; - .svg-icon-wrapper { - height: 17px; - width: 17px; - } .expandable-input-wrapper { display: flex; - .svg-icon.search { - height: 17px; - width: 17px; - } &.closed { - .svg-icon.search { - transition: fill 0.5s ease-in; - fill: $blue; - cursor: pointer; - &:hover { + .svg-icon + { + &.__search { + height: 17px; + width: 17px; transition: fill 0.5s ease-in; - fill: $dark-blue; + fill: $blue; + cursor: pointer; + &:hover { + transition: fill 0.5s ease-in; + fill: $dark-blue; + } } } } @@ -26,17 +23,21 @@ .svg-icon-wrapper { margin-left: 3px; } - .svg-icon.search { - fill: $dark-blue; + .svg-icon { + &.__search { + height: 17px; + width: 17px; + fill: $dark-blue; + } } - .svg-icon.close { - margin-left: 7px; - height: 10px; - width: 10px; - opacity: 0.6; - fill: $dark-gray; - &:hover { - opacity: 1; + .svg-icon { + &.__close { + margin-left: 7px; + opacity: 0.6; + fill: $dark-gray; + &:hover { + opacity: 1; + } } } } diff --git a/openecomp-ui/resources/scss/components/_notifications.scss b/openecomp-ui/resources/scss/components/_notifications.scss index 7165e57ef9..5b10dee0ee 100644 --- a/openecomp-ui/resources/scss/components/_notifications.scss +++ b/openecomp-ui/resources/scss/components/_notifications.scss @@ -18,6 +18,12 @@ .modal-content .modal-header { border-top: 3px solid $red; } + } + + &.negative { + .modal-content .modal-header { + border-top: 3px solid $red; + } } &.warning { diff --git a/openecomp-ui/resources/scss/components/_selectActionTable.scss b/openecomp-ui/resources/scss/components/_selectActionTable.scss index 4e42b6ce5b..fa8eb3110c 100644 --- a/openecomp-ui/resources/scss/components/_selectActionTable.scss +++ b/openecomp-ui/resources/scss/components/_selectActionTable.scss @@ -1,15 +1,13 @@ .select-action-table-view { .svg-icon-wrapper { flex-direction: row; - - &::before { - content:""; - } .svg-icon { - margin-left: 5px; - margin-right: 5px; - width:16px; - height:16px; + &:not(.__plus) { + margin-left: 5px; + margin-right: 5px; + width:16px; + height:16px; + } } } .dummy-icon { @@ -57,21 +55,11 @@ display: flex; flex-direction: row; margin-bottom: 14px; - .svg-icon-wrapper.trashO { + .svg-icon-wrapper.hideDelete { .svg-icon { - fill: $dark-gray; + fill: $white; } } - .svg-icon-wrapper.errorCircle { - .svg-icon { - fill: $red; - } - } - .svg-icon-wrapper.checkCircle { - .svg-icon { - fill: $green; - } - } .select-action-table-row { display: flex; flex: 1; @@ -80,6 +68,7 @@ &.has-error { border-color: $red; } + .select-action-table-cell { flex: 1; border-right: 1px solid; @@ -127,10 +116,9 @@ border-bottom: 1px solid $blue; overflow: auto; .Select-menu { - display: inline-block; .Select-option { - width: 100%; - display: inline-block; + overflow: hidden; + text-overflow: ellipsis; border-bottom: 1px solid $light-gray; &:hover { background-color: $blue; diff --git a/openecomp-ui/resources/scss/components/_submitErrorResponse.scss b/openecomp-ui/resources/scss/components/_submitErrorResponse.scss index b917dfefeb..f045038193 100644 --- a/openecomp-ui/resources/scss/components/_submitErrorResponse.scss +++ b/openecomp-ui/resources/scss/components/_submitErrorResponse.scss @@ -26,14 +26,19 @@ background-color: $tlv-gray; padding: 5px; cursor: pointer; - .chevronDown { - width:10px; - height:10px; - margin-right: 10px; - &.right { - transform: rotate(270deg); + .svg-icon { + &.__chevronDown { + margin-right: 10px; } } + .collapse-right { + .svg-icon { + &.__chevronDown { + transform: rotate(270deg); + } + } + + } } .error-code-list-item { diff --git a/openecomp-ui/resources/scss/components/_validationForm.scss b/openecomp-ui/resources/scss/components/_validationForm.scss index 46269ad699..e1adb5650f 100644 --- a/openecomp-ui/resources/scss/components/_validationForm.scss +++ b/openecomp-ui/resources/scss/components/_validationForm.scss @@ -7,12 +7,10 @@ form { .validation-radio-wrapper { position: relative; } - .nav-tabs { + .sdc-tabs { position: relative; - .invalid-tab:not(.active) { - a { + .invalid-tab:not(.sdc-tab-active) { color: $red; - } } } .validation-error-message { @@ -77,7 +75,7 @@ form { flex: 0.2; content: ' '; } - @media (min-width: 1349px) { + @media (min-width: 1389px) { &.add-line-break { .control-label { &:after { diff --git a/openecomp-ui/resources/scss/components/_versionController.scss b/openecomp-ui/resources/scss/components/_versionController.scss index b454d3496b..57610986c3 100644 --- a/openecomp-ui/resources/scss/components/_versionController.scss +++ b/openecomp-ui/resources/scss/components/_versionController.scss @@ -59,56 +59,33 @@ margin-right: 20px; padding-bottom: 5px; - .versionControllerLockClosed { + + .svg-icon { fill: $dark-gray; - width: 21px; - height: 23px; - margin-top: -3px; - &.disabled { - fill: $light-gray; - } &:hover { fill: $black; } - } - .versionControllerLockOpen { - fill: $dark-gray; - width: 24px; - height: 28px; - margin-top: -6px; - &:hover { - fill: $black; + &.__versionControllerLockClosed { + margin-top: -3px; } - } - .versionControllerSubmit { - fill: $blue; - &.disabled { - fill: $light-gray; + &.__versionControllerLockOpen { + margin-top: -6px; } - &:hover { - fill: $dark-blue; + &.__versionControllerSubmit { + fill: $blue; + &:hover { + fill: $dark-blue; + } + &.disabled { + fill: $dark-gray; + } } } - - .versionControllerRevert { - fill: $dark-gray; - &.disabled { - fill: $light-gray; - } - &:hover { - fill: $black; - } - } - .versionControllerSave { - fill: $dark-gray; - &.disabled { - fill: $light-gray; - } - &:hover { - fill: $black; - } } - } + + + + } .vc-nav-item-close { display: flex; diff --git a/openecomp-ui/resources/scss/modules/_entitlementPools.scss b/openecomp-ui/resources/scss/modules/_entitlementPools.scss index 0e0a72a387..ad0bb77e8d 100644 --- a/openecomp-ui/resources/scss/modules/_entitlementPools.scss +++ b/openecomp-ui/resources/scss/modules/_entitlementPools.scss @@ -1,6 +1,5 @@ -.entitlement-pools-list-editor { - +.entitlement-pools-list-editor { .list-editor-view-list { .list-editor-item-view { min-height: 110px; @@ -8,13 +7,9 @@ } .list-editor-item-view-field { - .entitlement-pools-count, .entitlement-parameters, .contract-number, .type{ + .entitlement-pools-count, .contract-number, .type{ color: $purple; } - .entitlement-parameters { - @include ellipsis; - margin-bottom: 2px; - } .entitlement-pools-count { @extend .heading-1; margin-top: -10px; @@ -25,22 +20,29 @@ } .entitlement-pools-modal { - .validation-form-content { - padding: 50px; - } .modal-body { padding: 0; } + .sdc-tab-content { + margin: 0; + } .entitlement-pools-form { - .tab-content { - padding: 50px; - } .threshold-section { display: flex; justify-content: space-between; .validation-input-wrapper { flex: 0 0 46%; } + } + .date-section { + display: flex; + justify-content: space-between; + .validation-input-wrapper { + flex: 0 0 46%; + } + } + .validation-form-content { + padding: 20px 50px; } } .validation-buttons { diff --git a/openecomp-ui/resources/scss/modules/_featureGroup.scss b/openecomp-ui/resources/scss/modules/_featureGroup.scss index 8c45d8ec58..5f98ed2c05 100644 --- a/openecomp-ui/resources/scss/modules/_featureGroup.scss +++ b/openecomp-ui/resources/scss/modules/_featureGroup.scss @@ -1,23 +1,37 @@ .feature-groups-list-editor { - .list-editor-view-list { - .list-editor-item-view { - min-height: 110px; - height: 110px; - } - .list-editor-item-view-field { - .feature-groups-count-field { - display: inline-block; - &:first-child { - margin-right: 95px; - } + .list-editor-view{ + .list-editor-view-list { + .list-editor-item-view { + min-height: 110px; + height: 110px; } - .feature-groups-count-ep { - @extend .heading-1; - color: $light-blue; - } - .feature-groups-count-lk { - @extend .heading-1; - color: $light-green; + .list-editor-item-view-content { + .list-editor-item-view-field { + &.smaller-field { + flex: 0.35; + } + .feature-groups-count-field { + display: inline-block; + &:first-child { + margin-right: 95px; + } + } + .feature-groups-count-ep { + @extend .heading-1; + color: $light-blue; + } + .feature-groups-mrn-ep { + @extend .body-1; + color: $light-blue; + } + .feature-groups-count-lk { + @extend .heading-1; + color: $light-green; + } + .title-no-wrap { + white-space: nowrap; + } + } } } } @@ -32,6 +46,14 @@ margin-top: 55px; color: $dark-gray; } + .validation-form-content { + padding: 0; + } + + .nav.nav-tabs { + padding-left: 50px; + } + .tab-content { padding: 50px; .field-section { diff --git a/openecomp-ui/resources/scss/modules/_licenseKeyGroup.scss b/openecomp-ui/resources/scss/modules/_licenseKeyGroup.scss index 5de757bf64..d072849c08 100644 --- a/openecomp-ui/resources/scss/modules/_licenseKeyGroup.scss +++ b/openecomp-ui/resources/scss/modules/_licenseKeyGroup.scss @@ -16,23 +16,3 @@ } } } - -.license-key-groups-modal { - .modal-body { - padding: 0; - } - .license-key-groups-form { - .validation-form-content { - padding: 50px; - .field-section { - @extend .body-2-semibold; - margin-bottom: 23px; - width: 400px; - color: $black; - } - } - .validation-buttons { - padding: 20px 50px; - } - } -} diff --git a/openecomp-ui/resources/scss/modules/_licenseModel.scss b/openecomp-ui/resources/scss/modules/_licenseModel.scss index 3d65be6274..fab091fe67 100644 --- a/openecomp-ui/resources/scss/modules/_licenseModel.scss +++ b/openecomp-ui/resources/scss/modules/_licenseModel.scss @@ -1,20 +1,53 @@ -.license-model-type-modal { +.license-model-modal { .modal-body { padding: 0; } - .validation-form-content { - padding: 50px; - .field-section { - @extend .body-2-semibold; - margin-bottom: 23px; - width: 400px; - color: $black; + .modal-header { + border-bottom: none; + padding-bottom: 30px; + } + .modal-body { + padding: 0; + } + .sdc-tabs-list { + padding-left: 50px; + border-bottom: 1px solid $tlv-light-gray; + display: flex; + align-items: baseline; + } + .sdc-tab-content { + margin-top: 0; + } + .add-limit-button { + margin-left: auto; + margin-right: 50px; + padding-right: 0; + text-align: end; + } + .license-model-form { + .validation-form-content { + padding: 20px 50px; + } + .validation-buttons { + padding: 20px 50px; } - textarea { - height: 107px; + &.license-agreement-form, &.feature-group-form { + .validation-form-content { + padding: 0; + } + .sdc-tab-content { + padding: 20px 50px; + } + } + } + .license-model-modal-buttons { + padding: 21px 50px; + display: flex; + justify-content: flex-end; + background-color: $tlv-gray; + margin-top: 2px; + .sdc-button { + margin-left: 20px; } - } - .validation-buttons { - padding: 20px 50px; - } + } } diff --git a/openecomp-ui/resources/scss/modules/_licenseModelLimits.scss b/openecomp-ui/resources/scss/modules/_licenseModelLimits.scss new file mode 100644 index 0000000000..32fd128f2e --- /dev/null +++ b/openecomp-ui/resources/scss/modules/_licenseModelLimits.scss @@ -0,0 +1,121 @@ +.license-model-limits-view { + max-height: 490px; + overflow: auto; + + .limit-editor-title { + padding: 10px 50px; + background-color: $blue; + color: $white; + + } + .list-editor-view-add-title { + margin-right: 20px; + } + + .no-limits-text { + padding-left: 50px; + } + + .list-editor-view { + .list-editor-view-header { + border-bottom: none; + padding-top: 30px; + padding-bottom: 0; + } + + .list-editor-view-list-scroller { + margin-top: 0; + margin-bottom: 30px; + } + .list-editor-view-list { + width: 100%; + .list-editor-item-view { + min-height: 50px; + height: 50px; + background-color: $tlv-light-gray; + border-color: transparent; + margin: 1px 0; + .list-editor-item-view-content { + padding-left: 0; + } + .svg-icon-wrapper.trashO { + margin-bottom: 0; + margin-right: 50px; + .svg-icon { + fill: $gray; + height: 16px; + width: 16px; + &:hover { + fill: $dark-gray; + } + } + } + &.selectable { + &:hover { + background-color: darken($tlv-light-gray, 4%); + cursor: pointer; + } + } + &:hover { + border-color: transparent; + cursor: default; + } + .list-editor-item-view-content { + .list-editor-item-view-field { + display: flex; + align-items: center; + white-space: nowrap; + + &.limit-name { + .text.name { + @extend .body-1-semibold; + color: $blue; + text-transform: uppercase; + padding: 0px 10px; + } + + border-right: 1px solid $light-gray; + margin-right: 22px; + flex: 0.4; + display: flex; + justify-content: center; + } + + &.limit-description { + max-width: 300px; + margin-right: 22px; + } + + &.limit-metric-details { + max-width: 300px; + } + + .text.description, .text.name { + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; + } + } + + } + } + } + } + .limit-editor{ + .limit-editor-form { + .limit-editor-form-grid-section { + padding-bottom: 0; + } + .validation-form-content { + padding: 21px 45px; + } + .limit-editor-buttons { + display: flex; + justify-content: flex-end; + .sdc-button { + margin-left: 20px; + } + } + } + } +}
\ No newline at end of file diff --git a/openecomp-ui/resources/scss/modules/_licenseModelOverview.scss b/openecomp-ui/resources/scss/modules/_licenseModelOverview.scss index 5c74e82d83..15bb9a7033 100644 --- a/openecomp-ui/resources/scss/modules/_licenseModelOverview.scss +++ b/openecomp-ui/resources/scss/modules/_licenseModelOverview.scss @@ -1,3 +1,21 @@ +$list-indentation: 20px; +$arrow-margin: 30px; +$icon-margin: 30px; +$arrow-element-width: 30px; +$list-item-padding: 15px; + +@mixin overview-tile-shadow() { + @include box-shadow(0.5px 0.8px 4px 0 rgba(24, 24, 25, 0.05)); +} + +// @mixin vlm-list-item-inset($color) { +// @include box-shadow(inset 6px 0 0 0 $color); +// } + +$la-color: $dark-blue; +$fg-color: $blue; +$lkg-ep-color: $light-blue; + .license-model-overview { .overview-top-section { .overview-title{ @@ -20,60 +38,69 @@ .vendor-data-view { @extend .flex-column; background-color: $tlv-gray; - padding: 20px 30px; + padding: 13px 30px; border: 1px solid $tlv-light-gray; - @include border-shadow(); + @include overview-tile-shadow(); .vendor-title { margin-top:5px; } .vendor-name { @extend .heading-4-semibold; text-transform: none; - padding-bottom: 15px; + padding-bottom: 10px; border-bottom: 1px solid $tlv-light-gray; } - .vendor-description { + .vendor-description, .vendor-description-readonly { @extend .flex; @extend .body-1; justify-content: space-between; - margin-top: 10px; overflow: hidden; + position: relative; + flex: initial; + } + + &:not(.read-only) .vendor-description { border: 1px solid transparent; + width: 100%; + padding: 2px 0 2px 6px; + margin-top: 10px; position: relative; - left: -6px; - width: 101%; - + .svg-icon-wrapper { + position: absolute;; + right:0; + top:0; + opacity: 0; + } + $hover-padding-right: 16px; + @include percent-plus-value($property: width, $percent: 100%, $value: -$hover-padding-right); // compensate for padding added on hover &:hover { - 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; + padding-right: $hover-padding-right; + border: 1px solid $light-gray; cursor: pointer; + + background-color: $white; + .svg-icon-wrapper { + opacity: 1; + z-index: 10; + } + .description-data:after { + background: white; + } + .description-data { + width: 100%; + } } - &.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; + margin-top: 16px; } + .description-data { + @include multiline-ellipsis($lineCount: 3, $bgColor: $tlv-gray); + flex: initial; + } + .vendor-description-edit { @extend .flex; flex-direction: column; @@ -84,6 +111,7 @@ width: 101%; textarea { padding-left: 6px; + resize: vertical; } .buttons-row { @extend .flex; @@ -133,12 +161,12 @@ margin-left: 20px; justify-content: space-between; border: 1px solid $tlv-light-gray; - @include border-shadow(); + @include overview-tile-shadow(); background-color: $tlv-gray; .summary-count-item { @extend .flex; - @extend .heading-5-semibold; - padding-top: 5px; + @extend .heading-5-semibold; + align-items: center; padding-left: 45px; padding-right: 45px; border-bottom: 1px solid $tlv-light-gray; @@ -147,20 +175,23 @@ 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 { + width: 100%; + } + .svg-icon-wrapper { + + .svg-icon { + &.__plusCircle { + width: 20px; + height: 20px; + margin-top: 3px; + margin-left: auto; + fill: $dark-gray; + &:hover { + fill: $blue; + } + } + } } .summary-name-and-count { @@ -184,9 +215,10 @@ } } } - .vlm-list-tab-panel - { - @extend .flex; + .vlm-list-tab-panel { + + @extend .flex; + margin-bottom: 7px; .section-title { flex: 1; } @@ -200,6 +232,7 @@ margin-left:10px; cursor: pointer; } + /** .vlm-list-icon { background-size: 32px; background-repeat: no-repeat; @@ -216,7 +249,7 @@ background-image: url($vlm-summary-orphans-blue); } } - + **/ } } @@ -236,81 +269,33 @@ } .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; + .vlm-list-item.orphan-list-item { + @include overview-tile-shadow(); + margin-left: 0; - } - .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-item-title { + + .item-name { + color: $dark-gray; + } + } + .list-item-icon-col { + .overview-list-icon { + background-color: $gray; + border-color: $gray; + } + } + .list-item-section { + &:first-child { + display: flex; + color: $white; + min-width: $arrow-element-width; + } + &.list-item-icon-col { + margin-left: 65px; + margin-right: 65px - $list-item-padding; + } + } } } } @@ -328,18 +313,32 @@ @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; + .clickable { + cursor: pointer; + } - } .list-item-section { - padding: 10px; + .count-value { + @extend .body-3; + } + &.list-item-icon-col { + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; + padding: 0; + margin-right: 40px - $list-item-padding; + margin-left: $icon-margin; + .overview-list-icon { + @extend .body-2; + } + } + padding: 15px; + &.list-item-arrow-col { + padding: 0; + } .children-count { @extend .body-1; - line-height: 20px; color: $gray; padding-left: 5px; .count-value { @@ -347,9 +346,18 @@ } } .additional-data { - padding-left: 50px; + padding-left: 60px; + display: flex; + flex-direction: column; + justify-content: space-between; + *:last-child { + margin-top: 20px; + } + *:only-child { + margin-top: 0; + } .additional-data-name { - @extend .body-1-semibold; + @extend .body-2-semibold; } } .additional-data-col-border { @@ -359,128 +367,140 @@ } } .list-item-additional-data-col { - @extend .body-1; + @extend .body-2; @extend .flex; - align-items: center; - flex: 0.8; + align-items: stretch; + flex: 0.8; + margin-left: 30px; + padding-top: 17px; + padding-bottom: 11px; } .arrow-icon { - align-self: center; + align-self: center; + } .vlm-item-info { flex: 1; } .vlm-list-item-title { - @extend .flex; + @extend .flex; + align-items: baseline; .item-name { @extend .heading-5-semibold; flex: 0 1 auto; - margin-bottom: 4px; + margin-bottom: 4px; + text-transform: uppercase; } } .vlm-list-item-description { @extend .body-1; - overflow: hidden; + @include multiline-ellipsis($lineCount: 3, $bgColor: $tlv-gray); 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'); + @include create-circle($circle-icon-size,$la-color,'LA'); color: $white; - } + } + .vlm-list-item-title { + .item-name { + color: $la-color; + } + } .list-item-section { &:first-child { display: flex; - color: $dark-blue; - min-width: 34px; + color: $la-color; + min-width: $arrow-element-width; } } .list-item-arrow-col { flex: 0.01; - margin-left: 14px; + margin-left: $arrow-margin; + justify-content: center; } - .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; + margin-left: $list-indentation; + margin-top: 10px; + .fg-pipeline-separator { + color: $dark-gray; + padding: 0 5px; + } + .list-item-icon-col { + margin-left: 29px; + } .fg-icon { - @include create-circle($circle-icon-size,$blue,'FG'); + @include create-circle($circle-icon-size,$fg-color,'FG'); color: $white; - } + } + + .vlm-list-item-title { + .item-name { + color: $fg-color; + } + } .list-item-section { &:first-child { display: flex; - color: $blue; - min-width: 34px; + color: $fg-color; + min-width: $arrow-element-width; } } .list-item-arrow-col { flex: 0.01; - margin-left: 26px; - } - .list-item-icon-col { - padding-left: 22px; - padding-right: 30px; - align-items: center; + margin-left: $arrow-margin - $list-indentation; + padding-left: $list-indentation; } } &.vlm-list-item-ep { - margin-left: 40px; + margin-left: $list-indentation * 2; margin-top: 10px; - border-left: 10px solid $light-blue; cursor: default; .ep-icon { - @include create-circle($circle-icon-size,$light-blue,'EP'); + @include create-circle($circle-icon-size,$lkg-ep-color,'EP'); color: $white; - } - .list-item-icon-col { - padding-left: 72px; - padding-right: 30px; - align-items: center; - } + } + .vlm-list-item-title { + .item-name { + color: $lkg-ep-color; + } + } .list-item-section { &:first-child { display: none; - } - } - .list-item-additional-data-col { - margin-right: 20px; + } + &.list-item-icon-col { + margin-left: 52px; + } } + } &.vlm-list-item-lkg { margin-top: 10px; - margin-left: 40px; - border-left: 10px solid $light-blue; + margin-left: $list-indentation * 2; cursor: default; .lkg-icon { - @include create-circle($circle-icon-size,$light-blue,'KG'); + @include create-circle($circle-icon-size,$lkg-ep-color,'KG'); color: $white; - } - .list-item-icon-col { - padding-left: 72px; - padding-right: 30px; - align-items: center; - } + } + .vlm-list-item-title { + .item-name { + color: $lkg-ep-color; + } + } .list-item-section { &:first-child { display: none; - } + } + &.list-item-icon-col { + margin-left: 52px; + } } - .list-item-additional-data-col { - margin-right: 20px; - } } } diff --git a/openecomp-ui/resources/scss/modules/_softwareProductAttachmentPage.scss b/openecomp-ui/resources/scss/modules/_softwareProductAttachmentPage.scss index bab2872691..0e092dd8bb 100644 --- a/openecomp-ui/resources/scss/modules/_softwareProductAttachmentPage.scss +++ b/openecomp-ui/resources/scss/modules/_softwareProductAttachmentPage.scss @@ -22,20 +22,7 @@ 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; @@ -104,6 +91,11 @@ z-index: 1; padding-right: 20px; .counter { + .svg-icon { + &.__exclamationTriangleLine { + fill :$orange; + } + } display: flex; &:first-child { margin-right: 20px; @@ -145,8 +137,8 @@ justify-content: space-between; height: 40px; align-items: center; - .svg-icon-wrapper.chevronDown, .svg-icon-wrapper.chevronUp { - .svg-icon { + .svg-icon { + &.__chevronUp, &.__chevronDown { height: 10px; width: 10px; } @@ -224,6 +216,13 @@ .error-item { display: flex; margin: 10px 0; + .large { + .svg-icon { + width: 20px; + height: 20px; + fill: $orange; + } + } .error-item-file-type { margin-left: 15px; } @@ -231,6 +230,9 @@ @extend .body-1-semibold; margin-right: 5px; } + + + } } diff --git a/openecomp-ui/resources/scss/modules/_softwareProductComponentImage.scss b/openecomp-ui/resources/scss/modules/_softwareProductComponentImage.scss index 068404fcb6..dad837f356 100644 --- a/openecomp-ui/resources/scss/modules/_softwareProductComponentImage.scss +++ b/openecomp-ui/resources/scss/modules/_softwareProductComponentImage.scss @@ -16,6 +16,12 @@ } } +.vsp-components-image-editor { + .note-text { + color: $red; + } +} + .image-modal-edit, .image-modal-new { .modal-body { padding: 0; diff --git a/openecomp-ui/resources/scss/modules/_softwareProductLandingPage.scss b/openecomp-ui/resources/scss/modules/_softwareProductLandingPage.scss index 56860101b2..9b0375d24a 100644 --- a/openecomp-ui/resources/scss/modules/_softwareProductLandingPage.scss +++ b/openecomp-ui/resources/scss/modules/_softwareProductLandingPage.scss @@ -28,21 +28,19 @@ .missing-license { display: flex; align-items: baseline; - .svg-icon-wrapper.exclamationTriangleFull .svg-icon{ - fill: $orange; + .svg-icon{ + margin-right: 7px; + margin-left: 3px; + &.__exclamationTriangleFull { + fill: $orange; + width: 17px; + height: 17px; + } } .warning-text { position: relative; top: -2px; } - .svg-icon-wrapper { - margin-right: 7px; - margin-left: 3px; - .svg-icon { - height: 17px; - width: 17px; - } - } } } .name { diff --git a/openecomp-ui/resources/scss/modules/_softwareproductComponentLoadBalancing.scss b/openecomp-ui/resources/scss/modules/_softwareproductComponentLoadBalancing.scss index ceae4a00de..d1f3f488bd 100644 --- a/openecomp-ui/resources/scss/modules/_softwareproductComponentLoadBalancing.scss +++ b/openecomp-ui/resources/scss/modules/_softwareproductComponentLoadBalancing.scss @@ -1,13 +1,7 @@ .vsp-components-load-balancing { .svg-icon-wrapper { position: relative; - top: -3px; - &.chevronUp, &.chevronDown { - .svg-icon { - width: 10px; - height: 10px; - } - } + top: -4px; } .halb-data { diff --git a/openecomp-ui/resources/scss/modules/_vspComponentMonitoring.scss b/openecomp-ui/resources/scss/modules/_vspComponentMonitoring.scss index 4bcf7940eb..bda8512f36 100644 --- a/openecomp-ui/resources/scss/modules/_vspComponentMonitoring.scss +++ b/openecomp-ui/resources/scss/modules/_vspComponentMonitoring.scss @@ -1,6 +1,6 @@ .vsp-component-monitoring { - .snmp-dropzone { + .dropzone { .section-title { padding-bottom: 20px; } @@ -22,7 +22,7 @@ } .drag-text { color: $blue; - @extend .body-1-semibold; + @extend .body-1-semibold } .or-text { margin-top: 10px; @@ -30,6 +30,20 @@ } } + .monitoring-file { + display: flex; + .filename { + opacity: 1; + width: auto; + border-right-style: none; + } + .delete { + display: flex; + width: 30px; + justify-content: center; + align-items: center; + } + } } .delete-button { diff --git a/openecomp-ui/resources/scss/modules/_vspHeatSetup.scss b/openecomp-ui/resources/scss/modules/_vspHeatSetup.scss index 75d96b4c85..bd216c794b 100644 --- a/openecomp-ui/resources/scss/modules/_vspHeatSetup.scss +++ b/openecomp-ui/resources/scss/modules/_vspHeatSetup.scss @@ -24,10 +24,12 @@ position: relative; top: -2px; } + .modules-list-wrapper { - padding-bottom: 20px; - margin-bottom: 20px; - border-bottom: 1px solid $tlv-light-gray; + &.modules-list-wrapper-divider { + border-bottom: 1px solid $tlv-light-gray; + } + ul { .undefined-dragging { opacity: 0.5; @@ -36,7 +38,7 @@ display: flex; justify-content: space-between; flex-wrap: wrap; - + padding-bottom: 3px; .Select-value-label { @include ellipsis(85%); } @@ -55,24 +57,6 @@ } } - .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; @@ -82,16 +66,15 @@ min-width: 0; } - .svg-icon-wrapper.trashO { - .svg-icon { - fill: $dark-gray; - height: 18px; - width: 18px; - &:hover { - fill: $black; + .svg-icon { + &.__trashO { + fill: $dark-gray; + &:hover { + fill: $black; + } } - } } + .module-title-by-type { @extend .heading-5-semibold; margin-right: 3px; @@ -100,15 +83,15 @@ display: flex; align-items: center; - .svg-icon-wrapper.pencil { - .svg-icon { - height: 15px; - width: 15px; + .svg-icon { + &.__pencil { + margin-left: 3px; + opacity: 0; } - margin-left: 3px; - opacity: 0; } + + .filename-text { @extend .heading-5-semibold; @@ -144,14 +127,16 @@ border-color: transparent; } } - .svg-icon-wrapper.pencil { - margin-left: 10px; - opacity: 1; - .svg-icon { - stroke: $dark-gray; - &:hover { - stroke: $black; - } + .svg-icon { + &.__pencil { + margin-left: 10px; + opacity: 1; + .svg-icon { + stroke: $dark-gray; + &:hover { + stroke: $black; + } + } } } } @@ -173,23 +158,8 @@ } } .add-or-delete-volumes { - .svg-icon-wrapper { - margin-right: 8px; - .svg-icon { - height: 10px; - width: 10px; - fill: $blue; - } - } - cursor: pointer; - color: $blue; + margin-right: 8px; margin-bottom: 11px; - &:hover { - color: $dark-blue; - .svg-icon { - fill: $dark-blue; - } - } } &:before { content: "\00B7\00B7\00B7\00B7\00B7\00B7"; @@ -208,7 +178,9 @@ .artifact-files { @include modules-and-artifacts-list-items; - margin-top: 20px; + &.with-list-items { + margin-top: 10px; + } &.nested { .nested-list { @@ -238,21 +210,20 @@ display: flex; } - .add-all-unassigned { - @extend .body-1; - margin-bottom: 0; - color: $blue; - cursor: pointer; - &:hover { - color: $dark-blue; - } - } } } } + .modules-list-header { + height: 30px; + display: flex; + flex-direction: row; + flex-wrap: nowrap; + justify-content: flex-end; + align-items: baseline; + } + .unassigned-files { - margin-top: 30px; border: 1px solid $light-gray; background-color: $white; height: 250px; @@ -283,26 +254,12 @@ @extend .heading-4; margin-bottom: 10px; } - .link { - color: $blue; - cursor: pointer; - display: flex; - align-items: center; + .svg-icon-wrapper { margin-bottom: 10px; - .svg-icon-wrapper.angleRight { - .svg-icon { - height: 10px; - width: 10px; - margin-left: 7px; - fill: $blue; - } - } - &:hover { - color: $dark-blue; - .svg-icon-wrapper.angleRight { - .svg-icon { - fill: $dark-blue; - } + .svg-icon { + &.__angleRight { + width: 10px; + height: 10px; } } } diff --git a/openecomp-ui/resources/scss/modules/onboardingCatalog/_catalogTile.scss b/openecomp-ui/resources/scss/modules/onboardingCatalog/_catalogTile.scss index 07f86aba2a..612ec495cd 100644 --- a/openecomp-ui/resources/scss/modules/onboardingCatalog/_catalogTile.scss +++ b/openecomp-ui/resources/scss/modules/onboardingCatalog/_catalogTile.scss @@ -48,6 +48,9 @@ align-self: baseline; color: $gray; line-height: 10px; + &:first-letter { + text-transform: capitalize; + } @include ellipsis(auto, inline-block, 178px); } @@ -56,7 +59,10 @@ @extend .heading-5-semibold; color: $black; @include ellipsis(auto, inline-block, 175px); - line-height: inherit; + line-height: inherit; + &:first-letter { + text-transform: capitalize; + } } } .catalog-tile-icon { @@ -73,36 +79,22 @@ width: 58px; margin-left: 122px; background-repeat: no-repeat; - .svg-icon-wrapper { - &.vendor { - .svg-icon { + .svg-icon { + &.__vendor { fill: $dark-gray; - width: 53px; - height: 47px; &:hover { fill: $dark-gray; } - } margin-top: 22px; - } - &.vsp { - .svg-icon { + &.__vsp { fill: $light-blue; - width: 60px; - height: 40px; } margin-top: 18px; margin-left: 3px; - } - &.vlm { + &.__vlm { margin-top: 18px; - .svg-icon { fill: $purple; - - width: 45px; - height: 53px; - } } } } @@ -115,13 +107,11 @@ margin-top: 2px; padding-bottom: 3px; @extend .body-2-semibold; - .svg-icon-wrapper { - &.plus { - .svg-icon { - height: 9px; - width: 9px; + .svg-icon { + &.__plus { + width: 20px; + height: 20px; fill: $blue; - } } } .catalog-tile-item-details { @@ -130,6 +120,13 @@ .catalog-tile-add-new-vsp { color: $blue; + .svg-icon { + &.__plus { + width: 20px; + height: 20px; + + } + } margin-left: 40px; } .catalog-tile-locking-user-name { @@ -137,18 +134,12 @@ @include ellipsis(auto, inline-block, 180px); } .catalog-tile-check-in-status { - .svg-icon-wrapper { - &.locked { - .svg-icon { - width: 11px; + .svg-icon { + &.__locked { fill: $gray; - } } - &.unlocked { - .svg-icon { - width: 11px; + &.__unlocked { fill: $gray; - } } } } diff --git a/openecomp-ui/resources/scss/modules/onboardingCatalog/_createItemTile.scss b/openecomp-ui/resources/scss/modules/onboardingCatalog/_createItemTile.scss index aa3cf04c4f..d17dcdd685 100644 --- a/openecomp-ui/resources/scss/modules/onboardingCatalog/_createItemTile.scss +++ b/openecomp-ui/resources/scss/modules/onboardingCatalog/_createItemTile.scss @@ -37,12 +37,14 @@ } } .create-item-plus-icon{ - width: 19px; - height: 19px; - margin: -5px 12px 0 0; - .svg-icon.plus { - height: 19px; - width: 19px; + margin: -5px 12px 0 0; + height: 19px; + width: 19px; + .svg-icon { + &.__plus { + width: 19px; + height: 19px; + } } } &.vlm-type { diff --git a/openecomp-ui/resources/scss/modules/onboardingCatalog/_vendorTile.scss b/openecomp-ui/resources/scss/modules/onboardingCatalog/_vendorTile.scss index 5972bb2d67..d490fd6e1c 100644 --- a/openecomp-ui/resources/scss/modules/onboardingCatalog/_vendorTile.scss +++ b/openecomp-ui/resources/scss/modules/onboardingCatalog/_vendorTile.scss @@ -24,7 +24,10 @@ .catalog-tile-top { .catalog-tile-item-name { margin-top: 21px; - line-height: inherit; + line-height: inherit; + &:first-letter { + text-transform: capitalize; + } } .catalog-tile-vsp-count { @extend .body-3-semibold; diff --git a/openecomp-ui/resources/scss/onboarding.scss b/openecomp-ui/resources/scss/onboarding.scss index d7d4586354..94dc223be3 100644 --- a/openecomp-ui/resources/scss/onboarding.scss +++ b/openecomp-ui/resources/scss/onboarding.scss @@ -12,53 +12,73 @@ div[data-reactroot].customized-date-picker-calendar { @import "common/variables"; @import "common/typography"; - border-radius: 2px; border-color: $light-gray; margin-top: -8px; + color: $black; .react-datepicker__triangle { margin-top: 0px; } .react-datepicker__navigation--previous { - border: none; - width: 15px; - height: 15px; + border: none; + width: 12px; + height: 12px; margin-top: 2px; - content: url(../images/angle-left.svg); + content: url(../../node_modules/sdc-ui/assets/icons/angleLeft.svg); } .react-datepicker__navigation--next { - border: none; - width: 15px; - height: 15px; - margin-top: 2px; - content: url(../images/angle-right.svg); + border: none; + width: 12px; + height: 12px; + margin-top: 2px; + content: url(../../node_modules/sdc-ui/assets/icons/angleRight.svg); } - .react-datepicker__month-container { + .react-datepicker__month-container { .react-datepicker__header { background-color: $background-gray; border-bottom: none; .react-datepicker__current-month { - @extend .heading-5; + @extend .body-1-semibold; background-color: $background-gray; - margin-bottom: 10px; + margin-bottom: 10px; } .react-datepicker__day-names { - @extend .heading-5; + @extend .body-1; background-color: $white; } } - .react-datepicker__day--selected { - @extend .heading-5; - border-radius: 20px; + .react-datepicker__day--selected, .react-datepicker__day--keyboard-selected { + @extend .body-1; background-color: $blue; - &:hover { - background-color: $dark-blue; - } + color: $white; } .react-datepicker__day { - @extend .heading-5; - &:hover { - border-radius: 20px; - } + border-radius: 0px; + margin: 0; + flex: 1; + @extend .body-1; + } + + .react-datepicker__day--in-range, .react-datepicker__day--in-selecting-range { + background-color: $tlv-hover; + color: $black; + &.react-datepicker__day--selected, &.react-datepicker__day--keyboard-selected, &.react-datepicker__day--range-start, &.react-datepicker__day--range-end { + background-color: $blue; + color: $white; + } + &.react-datepicker__day--selecting-range-start, &.react-datepicker__day--selecting-range-end { + background-color: lighten($blue, 40%); + color: $black; + } + &.react-datepicker__day--selecting-range-start.react-datepicker__day--range-start, + &.react-datepicker__day--selecting-range-end.react-datepicker__day--range-end, + &.react-datepicker__day--selecting-range-start.react-datepicker__day--keyboard-selected { + background-color: $blue; + color: $white; + } + } + + .react-datepicker__week { + display: flex; } } } @@ -69,7 +89,7 @@ div[data-reactroot].tooltip { @import "common/typography"; &.in { - opacity: 1; + opacity: 1; } &.validation-error-message { &.bottom { @@ -94,28 +114,33 @@ div[data-reactroot].tooltip { } } &.bottom { - .tooltip-arrow { - border-bottom-color: $dark-gray !important; - } + .tooltip-arrow { + border-bottom-color: $dark-gray !important; + } } &.top { - .tooltip-arrow { - border-top-color: $dark-gray !important; - } + .tooltip-arrow { + border-top-color: $dark-gray !important; + } } .tooltip-inner { - max-width: 100%; - background-color: $dark-gray; + @extend .body-1; + max-width: 100%; + background-color: $dark-gray; + padding: 6px 9px; + &:first-letter { + text-transform: capitalize; + } } // activity log tooltip &.activity-log-message-tooltip { - @include base-font-regular; - font-size: $body-font-2; - .message-block { - text-align: left; - padding: 3px 12px; - } + @include base-font-regular; + font-size: $body-font-2; + .message-block { + text-align: left; + padding: 3px 12px; + } } //dependency table error tooltip &.select-action-table-error-tooltip{ @@ -136,4 +161,11 @@ div[data-reactroot].tooltip { font-size: $body-font-2; } } + + // for read-only mode, vendor description in VLM overview + &.vendor-description-tooltip { + .tooltip-inner { + max-width: 600px; + } + } } |