benivo-ui-library/notifications.less

Benivo UI library

.badge {
    position: relative;
    display: flex;
    align-items: center;
    min-height: 86px;
    height: min-content;
    width: 100%;
    padding: 12px;
    .border-radius(4px);
    .box-shadow(0 1px 4px 0 rgba(79, 90, 101, 0.3));
    background: var(--bg-50);

    .icon {
        font-size: 40px;
        flex-shrink: 0;
    }

    .info-box {
        flex-grow: 1;
        padding: 0 30px;

        >span {
            display: block;
        }
    }

    .action-button {
        flex-shrink: 0;
    }

    &.badge-success {
        border: 1px solid rgba(79, 90, 101, 0.27);

        .icon::before,
        .text-small {
            color: var(--success-main);
        }
    }

    &.badge-danger {
        border: 1px solid var(--error-main);

        .icon::before,
        .text-small {
            color: var(--error-main);
        }
    }
}