diff options
Diffstat (limited to 'openecomp-ui/resources/scss/onboarding.scss')
| -rw-r--r-- | openecomp-ui/resources/scss/onboarding.scss | 351 |
1 files changed, 137 insertions, 214 deletions
diff --git a/openecomp-ui/resources/scss/onboarding.scss b/openecomp-ui/resources/scss/onboarding.scss index c38809cd07..da0c8b704f 100644 --- a/openecomp-ui/resources/scss/onboarding.scss +++ b/openecomp-ui/resources/scss/onboarding.scss @@ -1,234 +1,157 @@ -.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"; - - &.dox-ui-punch-out { - background-color: $content-background-color; - &.dox-ui-punch-out-full-page { - position: absolute; - top: 0; - bottom: 0; - left: 0; - right: 0; - overflow-y: auto; - } - } -} - -/* Out of namespace context for datepicker */ -div[data-reactroot].customized-date-picker-calendar { - @import "common/variables"; - @import "common/typography"; - border-color: $light-gray; - margin-top: -8px; - color: $black; - .react-datepicker__triangle { - margin-top: 0px; - } - .react-datepicker__navigation--previous::before, .react-datepicker__navigation--next::before { - width: 8px; - height: 8px; - display: inline-block; - position: absolute; - top: -4px; - } - .react-datepicker__navigation--previous::before { - left: 0; - content: url(../../node_modules/sdc-ui/assets/icons/angleLeft.svg); - } - .react-datepicker__navigation--next::before { - right: 0; - content: url(../../node_modules/sdc-ui/assets/icons/angleRight.svg); - } - - .react-datepicker__navigation--previous, .react-datepicker__navigation--next { - border: none; - } - - - .react-datepicker__month-container { - .react-datepicker__header { - background-color: $background-gray; - border-bottom: none; - .react-datepicker__current-month { - @extend .body-1-semibold; - background-color: $background-gray; - margin-bottom: 10px; - } - .react-datepicker__day-names { - @extend .body-1; - background-color: $white; - } - } - .react-datepicker__day--selected, .react-datepicker__day--keyboard-selected { - @extend .body-1; - background-color: $blue; - color: $white; - } - .react-datepicker__day { - 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; +.dox-ui, +.onap-sdc-portal { + @import 'bootstrap'; + @import '~react-select/dist/react-select.min.css'; + @import '~react-datepicker/dist/react-datepicker.min.css'; + + @import 'common'; + @import 'components'; + @import 'modules'; + + .sdc-alert__header, + .sdc-error__header, + .sdc-info__header { + box-sizing: content-box; + } + &.dox-ui-punch-out { + background-color: $content-background-color; + &.dox-ui-punch-out-full-page { + position: absolute; + top: 0; + bottom: 0; + left: 0; + right: 0; + overflow-y: auto; + } } - } } /* Out of namespace context for tooltips */ -div[data-reactroot].tooltip { - @import "common/variables"; - @import "common/typography"; - - &.in { - opacity: 1; - } - &.validation-error-message { +div[data-onboardingroot].tooltip { + @import 'common/variables'; + @import 'common/typography'; + + &.in { + opacity: 1; + } + &.validation-error-message { + &.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 { - border-bottom-color: $red !important; - } + .tooltip-arrow { + border-bottom-color: $dark-gray !important; + } } - &.left { - .tooltip-arrow { - border-left-color: $red !important; - } + &.top { + .tooltip-arrow { + border-top-color: $dark-gray !important; + } } &.right { - .tooltip-arrow { - border-right-color: $red !important; - } + .tooltip-arrow { + border-right-color: $dark-gray !important; + } } - &.top { - .tooltip-arrow { - border-top-color: $red !important; - } - } - } - &.bottom { - .tooltip-arrow { - border-bottom-color: $dark-gray !important; - } - } - &.top { - .tooltip-arrow { - border-top-color: $dark-gray !important; - } - } - &.right { - .tooltip-arrow { - border-right-color: $dark-gray !important; - } - } - &.left { - .tooltip-arrow { - border-left-color: $dark-gray !important; - } - } - .tooltip-inner { - @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; - } - } - // manage permisions modal - &.manage-permissions-owner-tooltip { - .tooltip-inner { - width: 400px; + &.left { + .tooltip-arrow { + border-left-color: $dark-gray !important; + } } - } - // WS/Catalog Tile - &.tile-super-info { .tooltip-inner { - font-size: $body-font-3; - } - } - //dependency table error tooltip - &.select-action-table-error-tooltip{ - @include base-font-regular; - margin-right: 5px; - font-size: $body-font-2; - .message-block { - text-align: left; - padding: 3px 12px; - } - .tooltip-arrow { - border-bottom-color: $red !important; - } - - .tooltip-inner { - background-color: $red; - padding: 6px 8px; - font-size: $body-font-2; - } - } - - // for read-only mode, vendor description in VLM overview - &.vendor-description-tooltip { - .tooltip-inner { - max-width: 600px; + @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; + } + } + // manage permisions modal + &.manage-permissions-owner-tooltip { + .tooltip-inner { + width: 400px; + } + } + // WS/Catalog Tile + &.tile-super-info { + .tooltip-inner { + font-size: $body-font-3; + } + } + //dependency table error tooltip + &.select-action-table-error-tooltip { + @include base-font-regular; + margin-right: 5px; + font-size: $body-font-2; + .message-block { + text-align: left; + padding: 3px 12px; + } + .tooltip-arrow { + border-bottom-color: $red !important; + } + + .tooltip-inner { + background-color: $red; + padding: 6px 8px; + font-size: $body-font-2; + } + } + + // for read-only mode, vendor description in VLM overview + &.vendor-description-tooltip { + .tooltip-inner { + max-width: 600px; + } } - } } /* Out of namespace context for notifications */ .onboarding-notifications-container { - position: absolute; - &.position-top-right { - right: 30px; - top: 50px; - } + position: absolute; + &.position-top-right { + right: 30px; + top: 50px; + } } - .onboarding-loader { - .onboarding-loader-backdrop { - @import "common/variables"; - top: 0; - right: 0; - bottom: 0; - left: 0; - position: absolute; - background-color: $transparent-black; - } + .onboarding-loader-backdrop { + @import 'common/variables'; + top: 0; + right: 0; + bottom: 0; + left: 0; + position: absolute; + background-color: $transparent-black; + } } |