cronapp-framework-js/css/themes/custom/lumen/button-lumen.css

Javascript library for CronApp's projects

.k-scheduler-edit-form .k-edit-field .k-button,
.k-edit-form-container .k-edit-buttons .k-primary,
.k-edit-form-container .k-edit-buttons .k-scheduler-canceltimezone,
.k-edit-form-container .k-edit-buttons .k-scheduler-cancel,
.btn,
.k-button,
.btn.btn-outline {
    border-style: solid;
    border-width: 0 1px 4px 1px;
}

/* Theme default */
.k-button,
.btn,
.k-button:hover,
.btn:hover,
.k-button:focus,
.k-button:focus:hover,
.k-button.k-default,
.k-button.k-default:hover,
.btn.btn-default,
.btn.btn-default:hover {
    background: var(--colorDefault40, #eeeeee);
    border-color: var(--colorDefault50, #d2d2d2);
}

.k-button:active,
.k-button.activated,
.k-button.active,
.btn:active,
.btn.activated,
.btn.active,
.btn.btn-default:active,
.btn.btn-default.activated,
.btn.btn-default.active {
    background: var(--colorDefault50, #eeeeee);
    border-color: var(--colorDefault60, #d2d2d2);
}

/* Primary */
.k-scheduler-edit-form .k-edit-field .k-button,
.k-edit-form-container .k-edit-buttons .k-primary,
.k-scheduler-edit-form .k-edit-field .k-button:hover,
.k-edit-form-container .k-edit-buttons .k-primary:hover,
.k-button.k-primary,
.k-button.k-primary:hover,
.btn.btn-primary,
.btn.btn-primary:hover {
    background: var(--colorPrimary40, #158cba);
    border-color: var(--colorPrimary60, #0f6788);
}

.k-scheduler-edit-form .k-edit-field .k-button:active,
.k-edit-form-container .k-edit-buttons .k-primary:active,
.k-button.k-primary:active,
.k-button.k-primary.activated,
.k-button.k-primary.active,
.btn.btn-primary:active,
.btn.btn-primary.activated,
.btn.btn-primary.active {
    background: var(--colorPrimary50, #eeeeee);
    border-color: var(--colorPrimary60, #d2d2d2);
}

/* info */
.k-button.k-info,
.k-button.k-info:hover,
.btn.btn-info,
.btn.btn-info:hover {
    background: var(--colorCalm40, #75caeb);
    border-color: var(--colorCalm50, #66b1ce);
}

.k-button.k-info:active,
.k-button.k-info.activated,
.k-button.k-info.active,
.btn.btn-info:active,
.btn.btn-info.activated,
.btn.btn-info.active {
    background: var(--colorCalm50, #eeeeee);
    border-color: var(--colorCalm60, #d2d2d2);
}

/* Danger */
.k-edit-form-container .k-edit-buttons .k-scheduler-canceltimezone,
.k-edit-form-container .k-edit-buttons .k-scheduler-cancel,
.k-edit-form-container .k-edit-buttons .k-scheduler-canceltimezone:hover,
.k-edit-form-container .k-edit-buttons .k-scheduler-cancel:hover,
.k-button.k-danger,
.k-button.k-danger:hover,
.btn.btn-danger,
.btn.btn-danger:hover {
    background: var(--colorDanger40, #ff4136);
    border-color: var(--colorDanger50, #df392f);
}

.k-edit-form-container .k-edit-buttons .k-scheduler-canceltimezone:active,
.k-edit-form-container .k-edit-buttons .k-scheduler-cancel:active,
.k-button.k-danger:active,
.k-button.k-danger.activated,
.k-button.k-danger.active,
.btn.btn-danger:active,
.btn.btn-danger.activated,
.btn.btn-danger.active {
    background: var(--colorDanger50, #eeeeee);
    border-color: var(--colorDanger60, #d2d2d2);
}

/* Warning */
.k-button.k-warning,
.k-button.k-warning:hover,
.btn.btn-warning,
.btn.btn-warning:hover {
    background: var(--colorWarning40, #ff851b);
    border-color: var(--colorWarning50, #df7418);
}

.k-button.k-warning:active,
.k-button.k-warning.activated,
.k-button.k-warning.active,
.btn.btn-warning:active,
.btn.btn-warning.activated,
.btn.btn-warning.active {
    background: var(--colorWarning50, #eeeeee);
    border-color: var(--colorWarning60, #d2d2d2);
}

/* Success */
.k-button.k-success,
.k-button.k-success:hover,
.btn.btn-success,
.btn.btn-success:hover {
    background: var(--colorSuccess40, #28b62c);
    border-color: var(--colorSuccess50, #239f27);
}

.k-button.k-success:active,
.k-button.k-success.activated,
.k-button.k-success.active,
.btn.btn-success:active,
.btn.btn-success.activated,
.btn.btn-success.active {
    background: var(--colorSuccess50, #eeeeee);
    border-color: var(--colorSuccess60, #d2d2d2);
}

/* Light */
.k-button.k-light,
.btn.btn-light,
.btn.btn-light:hover {
    background: var(--colorLight40, #f6f6f6);
    border-color: var(--colorLight50, #d7d7d7);
}

.btn.btn-light:active,
.btn.btn-light.activated,
.btn.btn-light.active {
    background: var(--colorLight50, #eeeeee);
    border-color: var(--colorLight60, #d2d2d2);
}

/* Link */
.btn.btn-link i,
.btn.btn-link span,
.btn.btn-link:focus,
.btn.btn-link:hover,
.btn.btn-link.disabled,
.btn.btn-link[disabled]:hover,
.btn.btn-link.disabled {
    color: var(--colorPrimary40, #158cba);
}

/* button - btn-fab */
.btn.btn-fab,
.btn-fab {
    display: flex;
    border-radius: var(--borderRadiusSmallest, 5px);
}

/* stable */
.k-button.k-stable,
.k-button.k-stable:hover,
.btn.btn-stable,
.btn.btn-stable:hover {
    background: var(--colorStable40, #f8f8f8);
    border-color: var(--colorStable50, #d9d9d9);
}

.btn.btn-stable.active,
.btn.btn-stable:active,
.k-button.k-stable.active,
.k-button.k-stable:active {
    background: var(--colorStable30, #fafafa);
    color: var(--textColorStable40, #444444);
}

/* royal */
.k-button.k-royal,
.k-button.k-royal:hover,
.btn.btn-royal,
.btn.btn-royal:hover {
    background: var(--colorRoyal40, #775dcd);
    border-color: var(--colorRoyal50, #775dcd);
}

.btn.btn-royal.active,
.btn.btn-royal:active,
.k-button.k-royal.active,
.k-button.k-royal:active {
    background: var(--colorRoyal30, #ab9aef);
    color: var(--textColorRoyal40, #ffffff);
}

/* Dark */
.k-button.k-dark,
.k-button.k-dark:hover,
.btn.btn-dark,
.btn.btn-dark:hover {
    background: var(--colorDark40, #4a4a4a);
    border-color: var(--colorDark60, #3e3e3e);
}

.btn.btn-dark.active,
.btn.btn-dark:active,
.k-button.k-dark.active,
.k-button.k-dark:active {
    background: var(--colorDark30, #909090);
    color: var(--textColorDark40, #ffffff);
}