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

Javascript library for CronApp's projects

.btn,
.k-button {
    border-radius: var(--borderRadiusFull, 99999px);
    border: 0;
    font-weight: 500;
    font-size: var(--textNormalSize, 16px);
    padding: 8px 24px;
}

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

.k-button:focus,
.k-button:hover,
.btn:hover,
.btn:hover,
.k-button.k-default:focus,
.k-button.k-default:hover,
.btn.btn-default:hover,
.btn.btn-default:hover {
    background: var(--colorDefault30, #7c8ec8);
    color: var(--textColorDefault40, #ffffff);
}

.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(--colorDefault20, #7c8ec8);
    color: var(--textColorDefault40, #ffffff);
}

/* Primary */
.k-edit-form-container .k-edit-buttons .k-scheduler-canceltimezone,
.k-edit-form-container .k-edit-buttons .k-scheduler-cancel,
.k-dialog-buttongroup .k-button.k-primary,
.k-button.k-primary,
.btn.btn-primary {
    background: transparent;
    color: var(--colorPrimary40, #1351b4);
    border: 1px solid var(--colorPrimary40, #1351b4);
}

.k-edit-form-container .k-edit-buttons .k-scheduler-canceltimezone:hover,
.k-edit-form-container .k-edit-buttons .k-scheduler-cancel:hover,
.k-edit-form-container .k-edit-buttons .k-scheduler-canceltimezone:focus,
.k-edit-form-container .k-edit-buttons .k-scheduler-cancel:focus,
.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 {
    background: var(--colorPrimary10, #d6daeb);
    color: var(--colorPrimary40, #1351b4);
    border: 1px solid var(--colorPrimary40, #1351b4);
}

.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-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(--colorPrimary20, #aeb7da);
    color: var(--colorPrimary40, #1351b4);
    border: 1px solid var(--colorPrimary40, #1351b4);
}

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

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

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

/* Danger */
.k-button.k-danger.active,
.k-button.k-danger:active,
.btn.btn-danger.active,
.btn.btn-danger:active {
    background: var(--colorDanger30, #168821);
    border-color: transparent;
    color: var(--textColorDanger40, #ffffff);
}

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

/* Link */
.btn.btn-link.disabled:focus,
.btn.btn-link.disabled:hover {
    text-decoration: none;
}

.btn.btn-link:focus,
.btn.btn-link:hover {
    color: var(--colorPrimary40, #1351b4);
}

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

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

/* dark */
.k-button.k-dark.active,
.k-button.k-dark:active,
.btn.btn-dark.active,
.btn.btn-dark:active {
    background: var(--colorDark30, #898989);
    border-color: transparent;
    color: var(--textColorDark40, #ffffff);
}