cronapp-framework-js/css/themes/custom/theme-general/notification.css

Javascript library for CronApp's projects

.ui-notification {
    border-radius: var(--borderRadiusExtraSmall);
    padding: var(--distanceMedium);
    box-shadow: none;
    background: var(--colorDefault40, #3b448e);
    font-family: var(--fontFamily, Arial, sans-serif);
    z-index: 99999;
}

.ui-notification.success {
    background: var(--colorSuccess40, #257d25);
}

.ui-notification.warning {
    background: var(--colorWarning40, #f0ad4e);
}

.ui-notification.error {
    background: var(--colorDanger40, #ce3a36);
}

.ui-notification.info {
    background: var(--colorCalm40, #3b448e);
}

.ui-notification .message {
    margin: 0;
}

/* Kendo notification */
.k-notification {
    border-radius: var(--borderRadiusSmallest, 5px);
}

.k-notification .k-notification-wrap {
    font-size: var(--textNormalSize, 14px);
    font-family: var(--fontFamily, Arial, sans-serif);
    display: flex;
    align-items: center;
    gap: 7px;
}

.k-notification .k-notification-wrap .k-icon {
    font-size: calc(var(--iconSizeSmall, 25px) - 6px);
}

.k-notification.k-notification-error {
    background: var(--colorDanger10, #f1d8d7);
    color: var(--colorDanger70, #71201e);
    border-color: var(--colorDanger20, #e6b3b2);
}

.k-notification.k-notification-success {
    background: var(--colorSuccess10, #d6e0d6);
    color: var(--colorSuccess70, #144414);
    border-color: var(--colorSuccess20, #b0c4b0);
}

.k-notification.k-notification-warning {
    background: var(--colorWarning10, #fbe9da);
    color: var(--colorWarning70, #835f2b);
    border-color: var(--colorWarning20, #f7d7b7);
}

.k-notification.k-notification-info {
    background: var(--colorCalm10, #d8d9e3);
    color: var(--colorCalm70, #20254e);
    border-color: var(--colorCalm20, #b3b5ca);
}

.k-notification.k-notification-error .k-i-error:before {
    color: var(--colorDanger70, #71201e);
}

.k-notification.k-notification-success .k-i-success:before {
    color: var(--colorSuccess70, #144414);
}

.k-notification.k-notification-warning .k-i-warning:before {
    color: var(--colorWarning70, #835f2b);
}

.k-notification.k-notification-info .k-i-info:before {
    color: var(--colorCalm70, #20254e);
}