openecomp-ui/resources/scss/onboarding.scss

.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-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: $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;
        }
    }
    // 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;
    }
}

.onboarding-loader {
    .onboarding-loader-backdrop {
        @import 'common/variables';
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        position: absolute;
        background-color: $transparent-black;
    }
}