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

Javascript library for CronApp's projects

.button {
    border-radius: 9999px;
    background: var(--colorDefault40, #1e293b);
    color: var(--textColorDefault40, #ffffff);
    border: 0;
    text-shadow: 0 1px 0 rgb(0 0 0 / 10%);
}

.button.active,
.button:active,
.button:focus,
.button:hover,
.button:focus:hover,
.k-button:focus:hover {
    box-shadow: none;
    border-color: transparent;
}

.button.button-outline {
    padding: 8px 15px;
}

/* Default */
.button.button-default.active,
.button.button-default:active,
.button.button-default:focus,
.button.button-default:hover {
    color: var(--textColorDefault40, #ffffff);
    background: var(--colorDefault30, #7e8086);
}


/* assertive */
.button.button-assertive {
    background: var(--colorDanger40, #ef473a);
    border-color: transparent;
    color: var(--textColorDanger40, #ffffff);
}

.button.button-assertive.active,
.button.button-assertive:active,
.button.button-assertive:focus,
.button.button-assertive:hover {
    color: var(--textColorDanger40, #ffffff);
    background: var(--colorDanger30, #f38989);
}

.button.button-stable span,
.button.button-stable i,
.button.button-stable.active span,
.button.button-stable:active span,
.button.button-stable:focus span,
.button.button-stable:hover span,
.button.button-stable.active i,
.button.button-stable:active i,
.button.button-stable:focus i,
.button.button-stable:hover i {
    color: var(--textColorDanger40, #ffffff);
}

/* balanced */
.button.button-balanced {
    background: var(--colorSuccess40, #33cd5f);
    border-color: transparent;
    color: var(--textColorSuccess40, #ffffff);
}

.button.button-balanced.active,
.button.button-balanced:active,
.button.button-balanced:focus,
.button.button-balanced:hover {
    color: var(--textColorSuccess40, #ffffff);
    background: var(--colorSuccess30, #7fd494);
}

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

/* energized */
.button.button-energized {
    background: var(--colorWarning40, #ffc900);
    border-color: transparent;
    color: var(--textColorWarning40, #ffffff);
}

.button.button-energized.active,
.button.button-energized:active,
.button.button-energized:focus,
.button.button-energized:hover {
    color: var(--textColorWarning40, #ffffff);
    background: var(--colorWarning30, #f7b97c);
}

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

/* Light */
.button.button-light {
    background: var(--colorLight50, #dfdfdf);
    color: var(--textColor40, #383838);
    border-color: transparent;
}

.button.button-light.active,
.button.button-light:active,
.button.button-light:focus,
.button.button-light:hover {
    color: var(--textColor40, #383838);
    background: var(--colorLight60, #bbbbbb);
}

.button.button-light span,
.button.button-light i,
.button.button-light.active span,
.button.button-light:active span,
.button.button-light:focus span,
.button.button-light:hover span,
.button.button-light.active i,
.button.button-light:active i,
.button.button-light:focus i,
.button.button-light:hover i {
    color: var(--textColor40, #383838);
}

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

.button.button-stable.active,
.button.button-stable:active,
.button.button-stable:focus,
.button.button-stable:hover {
    background: var(--colorStable50, #d9d9d9);
    border-color: transparent;
}

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

/* calm */
.button.button-calm {
    background: var(--colorLight40, #ffffff);
    border: 1px solid var(--textColor20, #b2b2b2);
}

.button.button-calm.active,
.button.button-calm:active,
.button.button-calm:focus,
.button.button-calm:hover {
    color: var(--textColor40, #383838);
    background: var(--textColor20, #b2b2b2);
}

.button.button-calm span,
.button.button-calm i,
.button.button-calm.active span,
.button.button-calm:active span,
.button.button-calm:focus span,
.button.button-calm:hover span,
.button.button-calm.active i,
.button.button-calm:active i,
.button.button-calm:focus i,
.button.button-calm:hover i {
    color: var(--textColor40, #383838);
}

/* positive */
.button.button-positive {
    background: var(--colorPrimary40, #5665be);
    border-color: transparent;
    color: var(--textColorPrimary40, #ffffff);
}

.button.button-positive.active,
.button.button-positive:active,
.button.button-positive:focus,
.button.button-positive:hover {
    color: var(--textColorPrimary40, #ffffff);
    background: var(--colorPrimary30, #8d8aeb);
}

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

/* royal */
.button.button-royal {
    background: var(--colorRoyal40, #5665be);
    border-color: transparent;
    color: var(--textColorRoyal40, #ffffff);
}

.button.button-royal.active,
.button.button-royal:active,
.button.button-royal:focus,
.button.button-royal:hover {
    color: var(--textColorRoyal40, #ffffff);
    background: var(--colorRoyal30, #f38989);
}

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

/* dark */
.button.button-dark {
    background: var(--colorDark40, #adafae);
    border-color: transparent;
    color: var(--textColorDark40, #000000);
}

.button.button-dark.active,
.button.button-dark:active,
.button.button-dark:focus,
.button.button-dark:hover {
    color: var(--textColorDark40, #000000);
    background: var(--colorDark30, #c3c5c4);
}

.button.button-dark span,
.button.button-dark i,
.button.button-dark.active span,
.button.button-dark:active span,
.button.button-dark:focus span,
.button.button-dark:hover span,
.button.button-dark.active i,
.button.button-dark:active i,
.button.button-dark:focus i,
.button.button-dark:hover i {
    color: var(--textColorDark40, #000000);
}

/* Light - Outline */
.button.button-light.button-outline {
    border-color: var(--colorLight50, #dfdfdf);
}

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

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

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

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

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

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

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

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

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

.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);
}