cronapp-framework-mobile-js/css/themes/custom/cerulean/button-cerulean.css

Javascript library for CronApp's projects

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

.button span {
    font-weight: 500;
}

.button span,
.button i {
    color: var(--textColorDefault40, #ffffff);
}

.button.button-outline span,
.button.button-outline i {
    color: var(--colorDefault40, #2fa4e7);
}

.button.button-outline {
    border: 1px solid;
}

/* Theme default */
.button.button-default {
    background: linear-gradient(var(--colorDefault10, #fcfcfc), var(--colorDefault10, #fcfcfc) 60%, var(--colorDefault40, #f5f5f5));
    border-color: var(--colorDefault40, #2fa4e7);
}

.button.button-default span,
.button.button-default i {
    color: var(--textColorDefault40, #ffffff);
}

.button.button-default:active,
.button.button-default.active,
.button.button-default.activated {
    background: var(--colorDefault60, #2278a9);
}

.button.button-default:active i,
.button.button-default:active span,
.button.button-default.activated i,
.button.button-default.activated span {
    color: var(--textColorDefault40, #ffffff);
}

/* Theme default - Outline */
.button.button-default.button-outline {
    border-color: var(--colorDefault50, #3b448e);
    background: transparent;
}

.button.button-default.button-outline span,
.button.button-default.button-outline i {
    color: var(--colorDefault50, #3b448e);
}

.button.button-default.button-outline:active,
.button.button-default.button-outline.activated {
    background: var(--colorDefault50, #3b448e);
}

.button.button-default.button-outline:active span,
.button.button-default.button-outline.activated span,
.button.button-default.button-outline:active i,
.button.button-default.button-outline.activated i {
    color: var(--textColorDefault40, #ffffff);
}

/* Positive */
.button.button-positive {
    background: linear-gradient(var(--colorPrimary30, #82bded), var(--colorPrimary40, #2fa4e7) 60%, var(--colorPrimary50, #3c6088));
    border-color: var(--colorPrimary40, #3b448e);
}

.button.button-positive span,
.button.button-positive i {
    color: var(--textColorPrimary40, #444444);
}

.button.button-positive:active,
.button.button-positive.activated {
    background: var(--colorPrimary60, #547b2a);
}

.button.button-positive:active i,
.button.button-positive:active span,
.button.button-positive.activated i,
.button.button-positive.activated span {
    color: var(--textColorPrimary30, #3c3c3c);
}

/* Positive - Outline */

.button.button-positive.button-outline {
    border-color: var(--colorPrimary40, #387ef5);
}

.button.button-positive.button-outline span,
.button.button-positive.button-outline i {
    color: var(--colorPrimary40, #387ef5);
}

.button.button-positive.button-outline:active,
.button.button-positive.button-outline.activated {
    background: var(--colorPrimary40, #387ef5);
}

.button.button-positive.button-outline:active span,
.button.button-positive.button-outline.activated span,
.button.button-positive.button-outline:active i,
.button.button-positive.button-outline.activated i {
    color: var(--textColorPrimary40, #ffffff);
}

/* Calm */
.button.button-calm {
    background: linear-gradient(var(--colorCalm30, #7b869f), var(--colorCalm40, #033c73) 60%, var(--colorCalm50, #033565));
    border-color: var(--colorCalm40, #11c1f3);
}

.button.button-calm span,
.button.button-calm i {
    color: var(--textColorCalm40, #ffffff);
}

.button.button-calm:active,
.button.button-calm.activated {
    background: var(--colorCalm60, #0c8db2);
}

.button.button-calm:active i,
.button.button-calm:active span,
.button.button-calm.activated i,
.button.button-calm.activated span {
    color: var(--textColorCalm60, #ffffff);
}

/* Calm - Outline */
.button.button-calm.button-outline {
    border-color: var(--colorCalm40, #11c1f3);
}

.button.button-calm.button-outline span,
.button.button-calm.button-outline i {
    color: var(--colorCalm40, #11c1f3);
}

.button.button-calm.button-outline:active,
.button.button-calm.button-outline.activated {
    background: var(--colorCalm40, #11c1f3);
}

.button.button-calm.button-outline:active span,
.button.button-calm.button-outline.activated span,
.button.button-calm.button-outline:active i,
.button.button-calm.button-outline.activated i {
    color: var(--textColorCalm40, #ffffff);
}

/* Assertive */
.button.button-assertive {
    background: linear-gradient(var(--colorDanger30, #d57e7f), var(--colorDanger40, #ef473a) 60%, var(--colorDanger50, #ae191e));
    border-color: var(--colorDanger50, #ae191e);
}

.button.button-assertive span,
.button.button-assertive i {
    color: var(--textColorDanger40, #ffffff);
}

.button.button-assertive:active,
.button.button-assertive.activated {
    background: var(--colorDanger60, #921519);
}

.button.button-assertive:active i,
.button.button-assertive:active span,
.button.button-assertive.activated i,
.button.button-assertive.activated span {
    color: var(--textColorDanger60, #ffffff);
}


/* Assertive - Outline */

.button.button-assertive.button-outline {
    border-color: var(--colorDanger40, #ef473a);
}

.button.button-assertive.button-outline span,
.button.button-assertive.button-outline i {
    color: var(--colorDanger40, #ef473a);
}

.button.button-assertive.button-outline:active,
.button.button-assertive.button-outline.activated {
    background: var(--colorDanger40, #ef473a);
}

.button.button-assertive.button-outline:active span,
.button.button-assertive.button-outline.activated span,
.button.button-assertive.button-outline:active i,
.button.button-assertive.button-outline.activated i {
    color: var(--textColorDanger40, #ffffff);
}

/* Energized */
.button.button-energized {
    background: linear-gradient(var(--colorWarning30, #e5907b), var(--colorWarning40, #dd5600) 60%, var(--colorWarning50, #c24b00));
    border: 1px solid var(--colorWarning40, #dd5600);
}

.button.button-energized span,
.button.button-energized i {
    color: var(--textColorWarning40, #ffffff);
}

.button.button-energized:active,
.button.button-energized.activated {
    background: var(--colorWarning60, #a23f00);
}

.button.button-energized:active i,
.button.button-energized:active span,
.button.button-energized.activated i,
.button.button-energized.activated span {
    color: var(--textColorWarning60, #ffffff);
}

/* Energized - Outline */

.button.button-energized.button-outline {
    border-color: var(--colorWarning40, #ffc900);
}

.button.button-energized.button-outline span,
.button.button-energized.button-outline i {
    color: var(--colorWarning40, #ffc900);
}

.button.button-energized.button-outline:active,
.button.button-energized.button-outline.activated {
    background: var(--colorWarning40, #ffc900);
}

.button.button-energized.button-outline:active span,
.button.button-energized.button-outline.activated span,
.button.button-energized.button-outline:active i,
.button.button-energized.button-outline.activated i {
    color: var(--textColorWarning40, #ffffff);
}

/* Balanced */
.button.button-balanced {
    background: linear-gradient(var(--colorSuccess30, #73a839), var(--colorSuccess40, #73a839) 60%, var(--colorSuccess50, #659332));
    border-color: var(--colorSuccess40, #73a839);
}

.button.button-balanced span,
.button.button-balanced i {
    color: var(--textColorSuccess40, #ffffff);
}

.button.button-balanced:active,
.button.button-balanced.activated {
    background: var(--colorSuccess60, #547b2a);
}

.button.button-balanced:active i,
.button.button-balanced:active span,
.button.button-balanced.activated i,
.button.button-balanced.activated span {
    color: var(--textColorSuccess60, #ffffff);
}

/* Balanced - Outline */

.button.button-balanced.button-outline {
    border-color: var(--colorSuccess40, #73a839);
}

.button.button-balanced.button-outline span,
.button.button-balanced.button-outline i {
    color: var(--colorSuccess40, #73a839);
}

.button.button-balanced.button-outline:active,
.button.button-balanced.button-outline.activated {
    background: var(--colorSuccess40, #73a839);
}

.button.button-balanced.button-outline:active span,
.button.button-balanced.button-outline.activated span,
.button.button-balanced.button-outline:active i,
.button.button-balanced.button-outline.activated i {
    color: var(--textColorSuccess40, #ffffff);
}

/* Royal */
.button.button-royal {
    background: linear-gradient(var(--colorRoyal30, #ab9aef), var(--colorRoyal40, #886aea) 60%, var(--colorRoyal50, #775dcd));
    border-color: var(--colorRoyal40, #886aea);
}

.button.button-royal span,
.button.button-royal i {
    color: var(--textColorRoyal40, #ffffff);
}

.button.button-royal:active,
.button.button-royal.activated {
    background: var(--colorRoyal60);
}

.button.button-royal:active i,
.button.button-royal:active span,
.button.button-royal.activated i,
.button.button-royal.activated span {
    color: var(--textColorRoyal60);
}

/* Royal - Outline */

.button.button-royal.button-outline {
    border-color: var(--colorRoyal40, #3b448e);
}

.button.button-royal.button-outline span,
.button.button-royal.button-outline i {
    color: var(--colorRoyal40, #3b448e);
}

.button.button-royal.button-outline:active,
.button.button-royal.button-outline.activated {
    background: var(--colorRoyal40, #3b448e);
}

.button.button-royal.button-outline:active span,
.button.button-royal.button-outline.activated span,
.button.button-royal.button-outline:active i,
.button.button-royal.button-outline.activated i {
    color: var(--textColorRoyal40, #ffffff);
}

/* Light */
.button.button-light {
    background: linear-gradient(var(--colorLight30, #ffffff), var(--colorLight40, #ffffff) 60%, var(--colorLight50, #dfdfdf));
    border-color: var(--colorLight40, #ffffff);
}

.button.button-light span,
.button.button-light i {
    color: var(--textColorLight40, #444444);
}

.button.button-light:active,
.button.button-light.activated {
    background: var(--colorLight60);
    color: var(--textColorLight60);
}

/* Light - Outline */

.button.button-light.button-outline {
    border-color: var(--colorLight50, #ffffff);
}

.button.button-light.button-outline span,
.button.button-light.button-outline i {
    color: var(--colorLight50, #ffffff);
}

.button.button-light.button-outline:active,
.button.button-light.button-outline.activated {
    background: var(--colorLight50, #ffffff);
}

.button.button-light.button-outline:active span,
.button.button-light.button-outline.activated span,
.button.button-light.button-outline:active i,
.button.button-light.button-outline.activated i {
    color: var(--textColorLight40, #444444);
}

/* Stable */
.button.button-stable {
    background: linear-gradient(var(--colorStable30, #fafafa), var(--colorStable40, #f8f8f8) 60%, var(--colorStable50, #d9d9d9));
    border-color: var(--colorStable40, #f8f8f8);
}

.button.button-stable span,
.button.button-stable i {
    color: var(--textColorStable40, #444444);
}

.button.button-stable:active,
.button.button-stable.activated {
    background: var(--colorStable60);
    color: var(--textColorStable60);
}

/* Stable - Outline */
.button.button-stable.button-outline {
    border-color: var(--colorStable50, #f8f8f8);
}

.button.button-stable.button-outline span,
.button.button-stable.button-outline i {
    color: var(--colorStable50, #f8f8f8);
}

.button.button-stable.button-outline:active,
.button.button-stable.button-outline.activated {
    background: var(--colorStable50, #f8f8f8);
}

.button.button-stable.button-outline:active span,
.button.button-stable.button-outline.activated span,
.button.button-stable.button-outline:active i,
.button.button-stable.button-outline.activated i {
    color: var(--textColorStable40, #444444);
}

/* Dark */
.button.button-dark {
    background: linear-gradient(var(--colorDark30, #898989), var(--colorDark40, #444444) 60%, var(--colorDark50, #3c3c3c));
    border-color: var(--colorDark40, #444444);
}

.button.button-dark i,
.button.button-dark span {
    color: var(--textColorDark40, #ffffff);
}

.button.button-dark:active,
.button.button-dark.activated {
    background: var(--colorDark70, #252525);
}

.button.button-dark:active i,
.button.button-dark:active span,
.button.button-dark.activated i,
.button.button-dark.activated span {
    color: var(--textColorDark70, #ffffff);
}

/* Dark - Outline */
.button.button-dark.button-outline {
    border-color: var(--colorDark40, #444444);
}

.button.button-dark.button-outline span,
.button.button-dark.button-outline i {
    color: var(--colorDark40, #444444);
}

.button.button-dark.button-outline:active,
.button.button-dark.button-outline.activated {
    background: var(--colorDark40, #444444);
}

.button.button-dark.button-outline:active span,
.button.button-dark.button-outline.activated span,
.button.button-dark.button-outline:active i,
.button.button-dark.button-outline.activated i {
    color: var(--textColorDark40, #ffffff);
}

/* Clear */
.button-clear {
    background: transparent;
}

/* Colors */
.button span.default,
.button i.default {
    color: var(--textColorDefault40, #ffffff);
}

.button span.light,
.button i.light {
    color: var(--textColorLight40, #444444);
}

.button span.stable,
.button i.stable {
    color: var(--textColorStable40, #f8f8f8);
}

.button span.positive,
.button i.positive {
    color: var(--textColorPrimary40, #444444);
}

.button span.calm,
.button i.calm {
    color: var(--textColorCalm40, #ffffff);
}

.button span.assertive,
.button i.assertive {
    color: var(--textColorDanger40, #ffffff);
}

.button span.balanced,
.button i.balanced {
    color: var(--textColorSuccess40, #ffffff);
}

.button span.energized,
.button i.energized {
    color: var(--textColorWarning40, #ffffff);
}

.button span.royal,
.button i.royal {
    color: var(--textColorRoyal40, #ffffff);
}

.button span.dark,
.button i.dark {
    color: var(--textColorDark40, #ffffff);
}