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

Javascript library for CronApp's projects

.btn,
button,
.button {
    border-radius: var(--borderRadiusMedium, 20px);
    padding: 7px 35px;
    border: 0;
    min-height: 56px;
    outline: 0;
}

.btn span,
.btn i,
.button span,
.button i {
    font-size: var(--textNormalSize, 16px);
    color: var(--colorNeutral00, #ffffff);
}

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

.button-outline {
    min-height: auto;
    padding: 2px 15px;
}

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

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

.button.button-default.active,
.button.button-default:active,
.button.button-default:focus,
.button.button-default:hover {
    color: var(--colorDefault40, #2ca4a8);
    box-shadow: none;
    background: var(--colorDefault20, #b1d3d5);
}

/* Primary */
.button.button-positive {
    background: linear-gradient(90deg, var(--colorPrimary40, #2c72a8) 40%, var(--colorPrimary30, #819fc0) 100%);
}

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

.button.button-positive.active,
.button.button-positive:active,
.button.button-positive:focus,
.button.button-positive:hover {
    color: var(--colorPrimary40, #2c72a8);
    box-shadow: none;
    background: var(--colorPrimary20, #b1c1d5);
}

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

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

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

/* Warning */
.button.button-energized {
    background: linear-gradient(90deg, var(--colorWarning40, #daa31f) 40%, var(--colorWarning30, #e3bd7e) 100%);
}

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

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

/* Danger */
.button.button-assertive {
    background: linear-gradient(90deg, var(--colorDanger40, #a82c2c) 40%, var(--colorDanger30, #c08181) 100%);
}

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

.button.button-assertive.active,
.button.button-assertive:active,
.button.button-assertive:focus,
.button.button-assertive:hover {
    color: var(--colorDanger40, #a82c2c);
    box-shadow: none;
    background: var(--colorDanger20, #d5b1b1);
}

/* Calm */
.button.button-calm {
    background: transparent;
    border: 2px solid var(--colorCalm40, #11c1f3);
}

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

.button.button-calm.active,
.button.button-calm:active,
.button.button-calm:focus,
.button.button-calm:hover {
    border: 2px solid var(--colorCalm20, #aee0f9);
    color: var(--colorCalm40, #11c1f3);
    background: transparent;
}

/* Stable */
.button.button-stable {
    background: linear-gradient(90deg, var(--colorStable40, #a82c2c) 40%, var(--colorStable30, #c08181) 100%);
}

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

.button.button-stable.active,
.button.button-stable:active,
.button.button-stable:focus,
.button.button-stable:hover {
    color: var(--colorStable40, #a82c2c);
    box-shadow: none;
    background: var(--colorStable20, #d5b1b1);
}

/* Royal */
.button.button-royal {
    background: linear-gradient(90deg, var(--colorRoyal40, #a82c2c) 40%, var(--colorRoyal30, #c08181) 100%);
}

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

.button.button-royal.active,
.button.button-royal:active,
.button.button-royal:focus,
.button.button-royal:hover {
    color: var(--colorRoyal40, #a82c2c);
    box-shadow: none;
    background: var(--colorRoyal20, #d5b1b1);
}

/* Dark */
.button.button-dark {
    background: linear-gradient(90deg, var(--colorDark40, #a82c2c) 40%, var(--colorDark30, #c08181) 100%);
}

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

.button.button-dark.active,
.button.button-dark:active,
.button.button-dark:focus,
.button.button-dark:hover {
    color: var(--colorDark40, #a82c2c);
    box-shadow: none;
    background: var(--colorDark20, #d5b1b1);
}

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

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

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


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

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

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

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

/* btn-fab */
.button.btn-fab,
.btn-fab {
    min-height: auto;
}

/* Outline */
.button.button-outline {
    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, #ffffff);
}

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

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