cronapp-framework-js/css/themes/custom/theme-general/button.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,
.k-button,
.btn {
    display: inline-block;
    margin-bottom: 0;
    font-weight: normal;
    text-align: center;
    vertical-align: middle;
    touch-action: manipulation;
    cursor: pointer;
    border: 1px solid transparent;
    white-space: nowrap;
    padding: 8px 12px;
    font-size: var(--textNormalSize, 14px);
    line-height: 1.42857143;
    border-radius: var(--borderRadiusSmallest, 4px);
    -webkit-user-select: none;
    user-select: none;
    font-family: var(--fontFamily, Arial, sans-serif);
    overflow: hidden;
    text-overflow: ellipsis;
}

.btn:has(.glyphicon) {
    text-overflow: unset;
}

.btn.disabled,
.btn[disabled],
fieldset[disabled] .btn {
    cursor: not-allowed;
    opacity: 0.65;
    box-shadow: none;
}

.btn i {
    margin-right: 5px;
}

.btn {
    background: var(--colorDefault40, #3b448e);
    text-align: center;
    color: var(--textColorDefault40, #ffffff);
    border: 1px solid;
}

/* Button color */
/* Default */
.k-button,
.btn,
.k-button.k-default,
.btn.btn-default {
    background: var(--colorDefault40, #3b448e);
    border-color: transparent;
    color: var(--textColorDefault40, #ffffff);
}


.k-button.k-state-focused,
.k-button.k-state-focused.k-state-disabled,
.k-button:focus,
.k-button:focus:hover,
.k-button:focus,
.k-button:hover,
.btn:focus,
.btn:hover,
.k-button.k-default:focus,
.k-button.k-default:hover,
.btn.btn-default:focus,
.btn.btn-default:hover {
    color: var(--textColorDefault40, #ffffff);
    background: var(--colorDefault70, #343c7c);
    border-color: transparent;
    outline: none;
}

.k-button.active,
.k-button:active,
.btn.active,
.btn:active,
.k-button.k-default.active,
.k-button.k-default:active,
.btn.btn-default.active,
.btn.btn-default:active {
    background: var(--colorDefault10, #d8d9e3);
}

/* Primary */
.k-scheduler-edit-form .k-edit-field .k-button,
.k-edit-form-container .k-edit-buttons .k-primary,
.k-dialog-buttongroup .k-button.k-primary,
.k-button.k-primary,
.btn.btn-primary {
    background: var(--colorPrimary40, #5665be);
    border-color: transparent;
    color: var(--textColorPrimary40, #ffffff);
}

.k-scheduler-edit-form .k-edit-field .k-button:focus,
.k-edit-form-container .k-edit-buttons .k-primary:focus,
.k-scheduler-edit-form .k-edit-field .k-button:hover,
.k-edit-form-container .k-edit-buttons .k-primary:hover,
.k-dialog-buttongroup .k-button.k-primary:focus,
.k-dialog-buttongroup .k-button.k-primary:hover,
.k-button.k-primary:focus,
.k-button.k-primary:hover,
.btn.btn-primary:focus,
.btn.btn-primary:hover {
    color: var(--textColorPrimary40, #ffffff);
    background: var(--colorPrimary50, #37479e);
    border-color: transparent;
    outline: none;
}

.k-scheduler-edit-form .k-edit-field .k-button:active,
.k-edit-form-container .k-edit-buttons .k-primary:active,
.k-scheduler-edit-form .k-edit-field .k-button.active,
.k-edit-form-container .k-edit-buttons .k-primary.active,
.k-dialog-buttongroup .k-button.k-primary.active,
.k-dialog-buttongroup .k-button.k-primary:active,
.k-button.k-primary.active,
.k-button.k-primary:active,
.btn.btn-primary.active,
.btn.btn-primary:active {
    background: var(--colorPrimary10, #d8daeb);
}

/* Success */
.k-button.k-success,
.btn.btn-success {
    background: var(--colorSuccess40, #257d25);
    border-color: transparent;
    color: var(--textColorSuccess40, #ffffff);
}

.k-button.k-success:focus,
.k-button.k-success:hover,
.btn.btn-success:focus,
.btn.btn-success:hover {
    color: var(--textColorSuccess40, #ffffff);
    background: var(--colorSuccess50, #206d20);
    border-color: transparent;
    outline: none;
}

.k-button.k-success.active,
.k-button.k-success:active,
.btn.btn-success.active,
.btn.btn-success:active {
    background: var(--colorSuccess10, #d6e0d6);
}

/* Warning */
.k-button.k-warning,
.btn.btn-warning {
    background: var(--colorWarning40, #f0ad4e);
    border-color: transparent;
    color: var(--textColorWarning40, #ffffff);
}

.k-button.k-warning:focus,
.k-button.k-warning:hover,
.btn.btn-warning:focus,
.btn.btn-warning:hover {
    color: var(--textColorWarning40, #ffffff);
    background: var(--colorWarning50, #d29744);
    border-color: transparent;
    outline: none;
}

.k-button.k-warning.active,
.k-button.k-warning:active,
.btn.btn-warning.active,
.btn.btn-warning:active {
    background: var(--colorWarning10, #fbe9da);
}


/* Danger */
.k-edit-form-container .k-edit-buttons .k-scheduler-canceltimezone,
.k-edit-form-container .k-edit-buttons .k-scheduler-cancel,
.k-button.k-danger,
.btn.btn-danger {
    background: var(--colorDanger40, #ce3a36);
    border-color: transparent;
    color: var(--textColorDanger40, #ffffff);
}

.k-edit-form-container .k-edit-buttons .k-scheduler-canceltimezone:focus,
.k-edit-form-container .k-edit-buttons .k-scheduler-cancel:focus,
.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:focus,
.k-button.k-danger:hover,
.btn.btn-danger:focus,
.btn.btn-danger:hover {
    color: var(--textColorDanger40, #ffffff);
    background: var(--colorDanger50, #b4332f);
    border-color: transparent;
    outline: none;
}

.k-edit-form-container .k-edit-buttons .k-scheduler-canceltimezone:active,
.k-edit-form-container .k-edit-buttons .k-scheduler-cancel:active,
.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:active,
.btn.btn-danger.active,
.btn.btn-danger:active {
    background: var(--colorDanger10, #f1d8d7);
}

/* Info */
.k-button.k-info,
.btn.btn-info {
    background: var(--colorCalm40, #3b448e);
    border-color: transparent;
    color: var(--textColorCalm40, #ffffff);
}

.k-button.k-info:focus,
.k-button.k-info:hover,
.btn.btn-info:focus,
.btn.btn-info:hover {
    color: var(--textColorCalm40, #ffffff);
    background: var(--colorCalm50, #343c7c);
    border-color: transparent;
    outline: none;
}

.k-button.k-info.active,
.k-button.k-info:active,
.btn.btn-info.active,
.btn.btn-info:active {
    background: var(--colorCalm10, #d8d9e3);
}

/* Light */
.k-button.k-light,
.btn.btn-light {
    background: var(--colorLight40, #ffffff);
    border-color: transparent;
    color: var(--textColorLight40, #000000);
}

.k-button.k-light:focus,
.k-button.k-light:hover,
.btn.btn-light:focus,
.btn.btn-light:hover {
    color: var(--textColorLight40, #000000);
    background: var(--colorLight50, #dfdfdf);
    border-color: transparent;
    outline: none;
}

.k-button.k-light.active,
.k-button.k-light:active,
.btn.btn-light.active,
.btn.btn-light:active {
    background: var(--colorLight10, #ffffff);
}

/* Stable */
.k-button.k-stable,
.btn.btn-stable {
    background: var(--colorStable40, #f8f8f8);
    border-color: transparent;
    color: var(--textColorStable40, #444444);
}

.k-button.k-stable:focus,
.k-button.k-stable:hover,
.btn.btn-stable:focus,
.btn.btn-stable:hover {
    color: var(--textColorStable40, #444444);
    background: var(--colorStable50, #d9d9d9);
    border-color: transparent;
    outline: none;
}

.k-button.k-stable.active,
.k-button.k-stable:active,
.btn.btn-stable.active,
.btn.btn-stable:active {
    background: var(--colorStable10, #fdfdfd);
}

/* Royal */
.k-button.k-royal,
.btn.btn-royal {
    background: var(--colorRoyal40, #886aea);
    border-color: transparent;
    color: var(--textColorRoyal40, #ffffff);
}

.k-button.k-royal:focus,
.k-button.k-royal:hover,
.btn.btn-royal:focus,
.btn.btn-royal:hover {
    color: var(--textColorRoyal40, #ffffff);
    background: var(--colorRoyal50, #775dcd);
    border-color: transparent;
    outline: none;
}

.k-button.k-royal.active,
.k-button.k-royal:active,
.btn.btn-royal.active,
.btn.btn-royal:active {
    background: var(--colorRoyal10, #e2ddf9);
}

/* Dark */
.k-button.k-dark,
.btn.btn-dark {
    background: var(--colorDark40, #444444);
    border-color: transparent;
    color: var(--textColorDark40, #ffffff);
}

.k-button.k-dark:focus,
.k-button.k-dark:hover,
.btn.btn-dark:focus,
.btn.btn-dark:hover {
    color: var(--textColorDark40, #ffffff);
    background: var(--colorDark50, #3c3c3c);
    border-color: transparent;
    outline: none;
}

.k-button.k-dark.active,
.k-button.k-dark:active,
.btn.btn-dark.active,
.btn.btn-dark:active {
    background: var(--colorDark10, #d9d9d9);
}

/* Link */
.btn.btn-link {
    background: transparent;
    border: none;
}

.btn.btn-link i,
.btn.btn-link span {
    color: var(--colorPrimary40, #5665be);
}

.btn.btn-link.active,
.btn.btn-link:active {
    background-image: none;
    box-shadow: none;
    outline: none;
}

.btn.btn-link:focus,
.btn.btn-link:hover {
    text-decoration: underline;
    background: transparent;
}

.btn.btn-link:focus i,
.btn.btn-link:hover i {
    text-decoration: none;
}

/* Extra's button */
.k-button:focus,
.k-button:focus:hover {
    box-shadow: none;
}

.k-button-icontext .k-icon {
    margin-bottom: 1px;
}