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

Javascript library for CronApp's projects

.btn,
.k-button {
    border-radius: var(--borderRadiusSmall, 15px);
    padding: 12px 35px;
    border: 0;
    color: var(--colorNeutral00, #ffffff);
    min-height: calc(var(--textNormalSize, 16px) * 3.5);
    outline: 0;
    font-size: var(--textNormalSize, 16px);
    box-shadow: none;
    display: inline-flex;
    background: var(--colorDefault40, #2ca4a8);
}

.btn:focus:hover,
.k-button:focus:hover {
    box-shadow: none;
}

/* Default */
.btn,
.k-button,
.k-button.k-default,
.btn.btn-default {
    background: linear-gradient(90deg, var(--colorDefault40, #2ca4a8) 40%, var(--colorDefault30, #81bdc0) 100%);
    color: var(--textColorDefault40, #ffffff);
}

.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(--colorDefault40, #2ca4a8);
    box-shadow: none;
    background: var(--colorDefault20, #b1d3d5);
}

.btn.active,
.btn:active,
.k-button.active,
.k-button:active,
.btn.btn-default.active,
.btn.btn-default:active,
.k-button.k-default.active,
.k-button.k-default:active {
    background: var(--colorDefault40, #2ca4a8);
    color: var(--textColorDefault40, #ffffff);
}

/* Primary */
.k-edit-form-container .k-edit-buttons .k-primary,
.k-dialog-buttongroup .k-button.k-primary,
.k-button.k-primary,
.btn.btn-primary {
    background: linear-gradient(90deg, var(--colorPrimary40, #2c72a8) 40%, var(--colorPrimary30, #819fc0) 100%);
    color: var(--textColorPrimary40, #ffffff);
}

.k-edit-form-container .k-edit-buttons .k-primary:hover,
.k-edit-form-container .k-edit-buttons .k-primary: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 {
    color: var(--colorPrimary40, #2c72a8);
    box-shadow: none;
    background: var(--colorPrimary20, #b1c1d5);
}

.k-edit-form-container .k-edit-buttons .k-primary: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,
.btn.btn-primary.active,
.btn.btn-primary:active,
.k-button.k-primary.active,
.k-button.k-primary:active {
    background: var(--colorPrimary40, #2c72a8);
    color: var(--textColorPrimary40, #ffffff);
}

/* Success */
.k-button.k-success,
.btn.btn-success {
    background: linear-gradient(90deg, var(--colorSuccess40, #38a82c) 40%, var(--colorSuccess30, #85c081) 100%);
    color: var(--textColorSuccess40, #ffffff);
}

.k-button.k-success:focus,
.k-button.k-success:hover,
.btn.btn-success:focus,
.btn.btn-success:hover {
    color: var(--colorSuccess40, #38a82c);
    box-shadow: none;
    background: var(--colorSuccess20, #b2d5b1);
}

.btn.btn-success.active,
.btn.btn-success:active,
.k-button.k-success.active,
.k-button.k-success:active {
    background: var(--colorSuccess40, #38a82c);
    color: var(--textColorSuccess40, #ffffff);
}

/* Warning */
.k-button.k-warning,
.btn.btn-warning {
    background: linear-gradient(90deg, var(--colorWarning40, #daa31f) 40%, var(--colorWarning30, #e3bd7e) 100%);
    color: var(--textColorWarning40, #ffffff);
}

.k-button.k-warning:focus,
.k-button.k-warning:hover,
.btn.btn-warning:focus,
.btn.btn-warning:hover {
    color: var(--colorWarning40, #daa31f);
    box-shadow: none;
    background: var(--colorWarning20, #ecd3af);
}

.btn.btn-warning.active,
.btn.btn-warning:active,
.k-button.k-warning.active,
.k-button.k-warning:active {
    background: var(--colorWarning40, #daa31f);
    color: var(--textColorWarning40, #ffffff);
}

/* 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: linear-gradient(90deg, var(--colorDanger40, #a82c2c) 40%, var(--colorDanger30, #c08181) 100%);
    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(--colorDanger40, #a82c2c);
    box-shadow: none;
    background: var(--colorDanger20, #d5b1b1);
}

.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,
.btn.btn-danger.active,
.btn.btn-danger:active,
.k-button.k-danger.active,
.k-button.k-danger:active {
    background: var(--colorDanger40, #a82c2c);
    color: var(--textColorDanger40, #ffffff);
}

/* Info */
.k-button.k-info,
.btn.btn-info {
    background: transparent;
    border: 2px solid var(--colorCalm40, #11c1f3);
    color: var(--colorCalm40, #11c1f3);
}

.k-button.k-info:focus,
.k-button.k-info:hover,
.btn.btn-info:focus,
.btn.btn-info:hover {
    border: 2px solid var(--colorCalm20, #aee0f9);
    color: var(--colorCalm20, #aee0f9);
    background: transparent;
}

.btn.btn-info:focus .text-color-info,
.btn.btn-info:hover .text-color-info {
    color: var(--colorCalm20, #aee0f9);
}

.btn.btn-info.active,
.btn.btn-info:active,
.k-button.k-info.active,
.k-button.k-info:active {
    background: var(--colorCalm20, #aee0f9);
    color: var(--colorCalm40, #11c1f3);
}

/* Light */
.btn.btn-light {
    background: transparent;
    border: 2px solid var(--textColorLight40, #444444);
    color: var(--textColorLight40, #444444);
}

.k-button.k-light:focus,
.k-button.k-light:hover,
.btn.btn-light:focus,
.btn.btn-light:hover {
    border: 2px solid var(--textColorLight60, #b5b5b5);
    color: var(--textColorLight60, #b5b5b5);
    background: transparent;
}

.btn.btn-light:focus .text-color-light,
.btn.btn-light:hover .text-color-light {
    color: var(--textColorLight60, #b5b5b5);
}

.btn.btn-light.active,
.btn.btn-light:active,
.k-button.k-light.active,
.k-button.k-light:active {
    background: var(--colorLight40, #dddddd);
    color: var(--textColorLight40, #444444);
}

/* Stable */
.k-button.k-stable,
.btn.btn-stable {
    background: linear-gradient(90deg, var(--colorStable40, #b2b2b2) 40%, var(--colorStable30, #c7c7c7) 100%);
    color: var(--textColorStable40, #444444);
}

.k-button.k-stable:focus,
.k-button.k-stable:hover,
.btn.btn-stable:focus,
.btn.btn-stable:hover {
    color: var(--colorStable40, #b2b2b2);
    box-shadow: none;
    background: var(--colorStable20, #d9d9d9);
}

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


/* royal */
.k-button.k-royal,
.btn.btn-royal {
    background: linear-gradient(90deg, var(--colorRoyal40, #7e5ee8) 40%, var(--colorRoyal30, #a594ee) 100%);
    color: var(--textColorRoyal40, #ffffff);
}

.k-button.k-royal:focus,
.k-button.k-royal:hover,
.btn.btn-royal:focus,
.btn.btn-royal:hover {
    color: var(--colorRoyal40, #7e5ee8);
    box-shadow: none;
    background: var(--colorRoyal20, #d5b1b1);
}

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


/* dark */
.k-button.k-dark,
.btn.btn-dark {
    background: linear-gradient(90deg, var(--colorDark40, #444444) 40%, var(--colorDark30, #898989) 100%);
    color: var(--textColorDark40, #ffffff);
}

.k-button.k-dark:focus,
.k-button.k-dark:hover,
.btn.btn-dark:focus,
.btn.btn-dark:hover {
    color: var(--colorDark40, #444444);
    box-shadow: none;
    background: var(--colorDark20, #b5b5b5);
}

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

/* Link */
.btn.btn-link {
    background: transparent;
    border: 2px solid var(--colorPrimary40, #2c72a8);
}

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

.btn.btn-link.active,
.btn.btn-link:active,
.btn.btn-link:focus,
.btn.btn-link:hover {
    border: 2px solid var(--colorPrimary20, #b1c1d5);
    color: var(--colorPrimary20, #b1c1d5);
    background: transparent;
}

.btn.btn-link:focus i,
.btn.btn-link:focus span,
.btn.btn-link:hover i,
.btn.btn-link:hover span {
    color: var(--colorPrimary20, #b1c1d5);
}

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

/* btn-fab */

.btn.btn-fab,
.btn-fab {
    padding: 3px 28px;
    display: inline-grid;
}