sass.n2o.components.Alert.scss Maven / Gradle / Ivy

Go to download
Show more of this group Show more artifacts with this name
Show all versions of n2o-react
The newest version!
@keyframes alertAnimationDefault {
    0% {
        transform: translate(0, -400px);
        opacity: 0;
    }

    40% {
        opacity: 0;
    }

    100% {
        transform: translate(0, 0);
        opacity: 1;
    }
}

@keyframes alertAnimationReversed {
    0% {
        transform: translate(0, 400px);
        opacity: 0;
    }

    40% {
        opacity: 0;
    }

    100% {
        transform: translate(0, 0);
        opacity: 1;
    }
}

.alert {
    padding: 10px !important;
    margin-bottom: 1.25rem;
    border: 1px solid transparent;
}

.n2o-alert--animated {
    animation-duration: 0.8s;
}

.n2o-alert--animated_default {
    animation-name: alertAnimationDefault;
}

.n2o-alert--animated_reversed {
    animation-name: alertAnimationReversed;
}

.n2o-alert.alert-light {
    border: 1px solid #dedede;
}

.n2o-alert.n2o-alert-field.alert-primary {
    color: $alert-primary-text-color;
    background-color: $alert-primary-body-color;
}

.n2o-alert-loader {
    display: block;
    width: 150px;
    margin: 0 auto;

    .n2o-alert-body-container {
        display: flex;
        align-items: center;
    }

    .spinner {
        margin-right: 10px;
    }
}

.n2o-global-alerts {
    max-width: 70%;
    max-height: 100vh;
    position: absolute;
    left: 50%;
    top: 0;
    margin: auto;
    transform: translate(-50%);
    overflow: auto;
    z-index: $zindex-tooltip;

    .n2o-alerts-container {
        width: 100%;
    }
}

.n2o-alert {
    display: flex;
    flex-flow: column;
    border-radius: 2px;
    transition: 0.3s ease;

    .n2o-alert__divider {
        margin: 10px 0 10px 0;
    }
}

.n2o-alerts {
    position: fixed;
    display: flex;
    flex-direction: column;
    width: 450px;
    z-index: 1200;
    row-gap: 10px;

    .n2o-alert__divider {
        margin: 10px 0 10px 0;
    }
}

.n2o-alerts_reversed {
    flex-direction: column-reverse;
}

.n2o-alert-segment {
    font-size: 14px;
    justify-content: space-between;

    .n2o-alert-segment__title {
        font-weight: bold;
    }

    .n2o-alert-segment__text {
        max-width: fit-content;
        word-break: break-word;
    }

    .n2o-alert-segment__timestamp {
        justify-self: flex-end;
        word-break: break-all;
        font-weight: lighter;
        opacity: 0.5;
    }

    .n2o-alert-segment__icon-container {
        justify-self: flex-end;
        width: 10%;
        min-height: 21px;

        .n2o-alert-segment__icon-close {
            margin-top: 0.35rem;
            font-size: 12px;
            cursor: pointer;
        }
    }

    .n2o-alert-segment__icon-container.text-empty {
        width: 6%;
    }

    .n2o-alert-segment__stacktrace-container {
        .n2o-alert-segment__stacktrace-details-button {
            font-weight: bold;
            cursor: pointer;

            .n2o-alert-segment__arrow {
                font-size: 12px;
            }
        }

        .n2o-alert-segment__stacktrace-area {
            max-height: 0;
            overflow-y: scroll;
            opacity: 0;
            transition: 0.2s;
            word-break: break-all;
            white-space: pre-wrap;
        }

        .n2o-alert-segment__stacktrace-area.visible {
            max-height: 200px;
            opacity: 1;
            transition: 0.2s;
        }

        .n2o-alert-segment__stacktrace-area::-webkit-scrollbar {
            width: 0.4em;
            scroll-behavior: smooth;
        }

        .n2o-alert-segment__stacktrace-area::-webkit-scrollbar-thumb {
            background-color: white;
            outline: 1px solid gainsboro;
        }

        .n2o-alert-segment__stacktrace-area::-webkit-scrollbar-track {
            -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
        }
    }
}

/* alternative behavior for line region when the alert is a field */
.rc-collapse-content-box {
    .col {
        .n2o-alert-segment {
            .n2o-alert-segment__text {
                max-width: 100%;
            }
        }
    }
}

.n2o-alerts.topLeft {
    left: 0;
    transform: translate(15px, 15px);
}

.n2o-alerts.top {
    left: 50%;
    transform: translate(-50%, 15px);
}

.n2o-alerts.topRight {
    right: 0;
    transform: translate(-15px, 15px);
}

.n2o-alerts.bottomLeft {
    bottom: 0;
    transform: translate(15px, -15px);
}

.n2o-alerts.bottom {
    bottom: 0;
    left: 50%;
    transform: translate(-50%, -15px);
}

.n2o-alerts.bottomRight {
    bottom: 0;
    right: 0;
    transform: translate(-15px, -15px);
}

.n2o-alert__with-link {
    transition: 0.3s ease;
}

.alert-primary,
.alert-primary:hover {
    color: $alert-primary-text-color;
    background-color: $alert-primary-body-color;
}

.alert-secondary,
.alert-secondary:hover {
    color: $alert-secondary-text-color;
    background-color: $alert-secondary-body-color;
}

.alert-success,
.alert-success:hover {
    color: $alert-success-text-color;
    background-color: $alert-success-body-color;
}

.alert-danger,
.alert-danger:hover {
    color: $alert-danger-text-color;
    background-color: $alert-danger-body-color;
}

.alert-warning,
.alert-warning:hover {
    color: $alert-warning-text-color;
    background-color: $alert-warning-body-color;
}

.alert-info,
.alert-info:hover {
    color: $alert-info-text-color;
    background-color: $alert-info-body-color;
}

.alert-light,
.alert-light:hover {
    color: $alert-light-text-color;
    background-color: $alert-light-body-color;
}

.alert-dark,
.alert-dark:hover {
    color: $alert-dark-text-color;
    background-color: $alert-dark-body-color;
}

.with-link:hover {
    box-shadow: rgba(0, 0, 0, 0.1) 0 1px 3px 0, rgba(0, 0, 0, 0.06) 0 1px 2px 0;
}

.alert-primary.with-link:hover {
    background-color: darken($alert-primary-body-color, $alert-hover-darken);

    .n2o-alert__with-link {
        background-color: darken($alert-primary-body-color, $alert-hover-darken);
    }
}

.alert-secondary.with-link:hover {
    background-color: darken($alert-secondary-body-color, $alert-hover-darken);

    .n2o-alert__with-link {
        background-color: darken($alert-secondary-body-color, $alert-hover-darken);
    }
}

.alert-success.with-link:hover {
    background-color: darken($alert-success-body-color, $alert-hover-darken);

    .n2o-alert__with-link {
        background-color: darken($alert-success-body-color, $alert-hover-darken);
    }
}

.alert-danger.with-link:hover {
    background-color: darken($alert-danger-body-color, $alert-hover-darken);

    .n2o-alert__with-link {
        background-color: darken($alert-danger-body-color, $alert-hover-darken);
    }
}

.alert-warning.with-link:hover {
    background-color: darken($alert-warning-body-color, $alert-hover-darken);

    .n2o-alert__with-link {
        background-color: darken($alert-warning-body-color, $alert-hover-darken);
    }
}

.alert-info.with-link:hover {
    background-color: darken($alert-info-body-color, $alert-hover-darken);

    .n2o-alert__with-link {
        background-color: darken($alert-info-body-color, $alert-hover-darken);
    }
}

.alert-light.with-link:hover {
    background-color: darken($alert-light-body-color, $alert-hover-darken);

    .n2o-alert__with-link {
        background-color: darken($alert-light-body-color, $alert-hover-darken);
    }
}

.alert-dark.with-link:hover {
    background-color: darken($alert-dark-body-color, $alert-hover-darken);

    .n2o-alert__with-link {
        background-color: darken($alert-dark-body-color, $alert-hover-darken);
    }
}