cronapp-framework-mobile-js/css/themes/custom/theme-general/crn-ion-header-bar.css

Javascript library for CronApp's projects

.button .icon {
    font-size: var(--textBigSize, 18px);
}

.bar .button-bar .button,
.bar .buttons .button {
    line-height: 1;
    padding: 0 6px;
}

/* Default */
.bar.bar-default.bar-footer,
.bar.bar-default {
    border-color: var(--colorDefault40, #3b448e);
    background: var(--colorDefault40, #3b448e);
    color: var(--textColorDefault40, #ffffff);
}

.bar.bar-default .button .icon,
.bar.bar-default .title {
    color: var(--textColorDefault40, #ffffff);
}

/* Light */
.bar.bar-light.bar-footer,
.bar.bar-light {
    border-color: var(--colorLight40, #ffffff);
    background: var(--colorLight40, #ffffff);
    color: var(--textColorLight40, #444444);
}

.bar.bar-light .button .icon,
.bar.bar-light .title {
    color: var(--textColorLight40, #444444);
}

/* Stable */
.bar.bar-stable.bar-footer,
.bar.bar-stable {
    border-color: var(--colorStable40, #f8f8f8);
    background: var(--colorStable40, #f8f8f8);
    color: var(--textColorStable40, #444444);
}

.bar.bar-stable .button .icon,
.bar.bar-stable .title {
    color: var(--textColorStable40, #444444);
}

/* Positive */
.bar.bar-positive.bar-footer,
.bar.bar-positive {
    border-color: var(--colorPrimary40, #387ef5);
    background: var(--colorPrimary40, #387ef5);
    color: var(--textColorPrimary40, #ffffff);
}

.bar.bar-positive .button .icon,
.bar.bar-positive .title {
    color: var(--textColorPrimary40, #ffffff);
}

/* Calm */
.bar.bar-calm.bar-footer,
.bar.bar-calm {
    border-color: var(--colorCalm40, #11c1f3);
    background: var(--colorCalm40, #11c1f3);
    color: var(--textColorCalm40, #ffffff);
}

.bar.bar-calm .button .icon,
.bar.bar-calm .title {
    color: var(--textColorCalm40, #ffffff);
}

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

.bar.bar-assertive .button .icon,
.bar.bar-assertive .title {
    color: var(--textColorDanger40, #ffffff);
}

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

.bar.bar-balanced .button .icon,
.bar.bar-balanced .title {
    color: var(--textColorSuccess40, #ffffff);
}

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

.bar.bar-energized .button .icon,
.bar.bar-energized .title {
    color: var(--textColorWarning40, #ffffff);
}

/* Royal */
.bar.bar-royal.bar-footer,
.bar.bar-royal {
    border-color: var(--colorRoyal40, #886aea);
    background: var(--colorRoyal40, #886aea);
    color: var(--textColorRoyal40, #ffffff);
}

.bar.bar-royal .button .icon,
.bar.bar-royal .title {
    color: var(--textColorRoyal40, #ffffff);
}

/* Dark */
.bar.bar-dark.bar-footer,
.bar.bar-dark {
    border-color: var(--colorDark40, #444444);
    background: var(--colorDark40, #444444);
    color: var(--textColorDark40, #ffffff);
}

.bar.bar-dark .button .icon,
.bar.bar-dark .title {
    color: var(--textColorDark40, #ffffff);
}

.bar .title,
.platform-android .bar .title {
    font-size: var(--textMediumSize, 18px);
    font-weight: 400;
}

/* white */
.bar.bar-white.bar-footer,
.bar.bar-white {
    border-color: var(--white, #ffffff);
    background: var(--white, #ffffff);
    color: var(--textColor40, #393939);
}

.bar.bar-white .button .icon,
.bar.bar-white .title {
    color: var(--textColor40, #393939);
}

/* gray */
.bar.bar-gray.bar-footer,
.bar.bar-gray {
    border-color: var(--gray, #333);
    background: var(--gray, #333);
    color: var(--white, #fff);
}

.bar.bar-gray .button .icon,
.bar.bar-gray .title {
    color: var(--white, #fff);
}

/* black */
.bar.bar-black.bar-footer,
.bar.bar-black {
    border-color: var(--black, #000);
    background: var(--black, #000);
    color: var(--white, #fff);
}

.bar.bar-black .button .icon,
.bar.bar-black .title {
    color: var(--white, #fff);
}

/* blue */
.bar.bar-blue.bar-footer,
.bar.bar-blue {
    border-color: var(--blue, #0247FE);
    background: var(--blue, #0247FE);
    color: var(--white, #fff);
}

.bar.bar-blue .button .icon,
.bar.bar-blue .title {
    color: var(--white, #fff);
}

/* light-blue */
.bar.bar-light-blue.bar-footer,
.bar.bar-light-blue {
    border-color: var(--light-blue, #85A5FF);
    background: var(--light-blue, #85A5FF);
    color: var(--white, #fff);
}

.bar.bar-light-blue .button .icon,
.bar.bar-light-blue .title {
    color: var(--white, #fff);
}

/* dark-blue */
.bar.bar-dark-blue.bar-footer,
.bar.bar-dark-blue {
    border-color: var(--dark-blue, #00217A);
    background: var(--dark-blue, #00217A);
    color: var(--white, #fff);
}

.bar.bar-dark-blue .button .icon,
.bar.bar-dark-blue .title {
    color: var(--white, #fff);
}

/* purple */
.bar.bar-purple.bar-footer,
.bar.bar-purple {
    border-color: var(--purple, #3D01A4);
    background: var(--purple, #3D01A4);
    color: var(--white, #fff);
}

.bar.bar-purple .button .icon,
.bar.bar-purple .title {
    color: var(--white, #fff);
}

/* light-purple */
.bar.bar-blight-purple.bar-footer,
.bar.bar-light-purple {
    border-color: var(--light-purple, #B285FF);
    background: var(--light-purple, #B285FF);
    color: var(--white, #fff);
}

.bar.bar-light-purple .button .icon,
.bar.bar-light-purple .title {
    color: var(--white, #fff);
}

/* dark-purple */
.bar.bar-dark-purple.bar-footer,
.bar.bar-dark-purple {
    border-color: var(--dark-purple, #2D007A);
    background: var(--dark-purple, #2D007A);
    color: var(--white, #fff);
}

.bar.bar-dark-purple .button .icon,
.bar.bar-dark-purple .title {
    color: var(--white, #fff);
}

/* red */
.bar.bar-red.bar-footer,
.bar.bar-red {
    border-color: var(--red, #FE2712);
    background: var(--red, #FE2712);
    color: var(--white, #fff);
}

.bar.bar-red .button .icon,
.bar.bar-red .title {
    color: var(--white, #fff);
}

/* light-red */
.bar.bar-light-red.bar-footer,
.bar.bar-light-red {
    border-color: var(--light-red, #FE8F84);
    background: var(--light-red, #FE8F84);
    color: var(--white, #fff);
}

.bar.bar-light-red .button .icon,
.bar.bar-light-red .title {
    color: var(--white, #fff);
}

/* dark-red */
.bar.bar-dark-red.bar-footer,
.bar.bar-dark-red {
    border-color: var(--dark-red, #7A0B00);
    background: var(--dark-red, #7A0B00);
    color: var(--white, #fff);
}

.bar.bar-dark-red .button .icon,
.bar.bar-dark-red .title {
    color: var(--white, #fff);
}

/* orange */
.bar.bar-orange.bar-footer,
.bar.bar-orange {
    border-color: var(--orange, #FB9B02);
    background: var(--orange, #FB9B02);
    color: var(--white, #fff);
}

.bar.bar-orange .button .icon,
.bar.bar-orange .title {
    color: var(--white, #fff);
}

/* light-orange */
.bar.bar-light-orange.bar-footer,
.bar.bar-light-orange {
    border-color: var(--light-orange, #FFD085);
    background: var(--light-orange, #FFD085);
    color: var(--textColor40, #393939);
}

.bar.bar-light-orange .button .icon,
.bar.bar-light-orange .title {
    color: var(--textColor40, #393939);
}

/* dark-orange */
.bar.bar-dark-orange.bar-footer,
.bar.bar-dark-orange {
    border-color: var(--dark-orange, #7A4B00);
    background: var(--dark-orange, #7A4B00);
    color: var(--white, #fff);
}

.bar.bar-dark-orange .button .icon,
.bar.bar-dark-orange .title {
    color: var(--white, #fff);
}

/* yellow */
.bar.bar-yellow.bar-footer,
.bar.bar-yellow {
    border-color: var(--yellow, #FFFF33);
    background: var(--yellow, #FFFF33);
    color: var(--textColor40, #393939);
}

.bar.bar-yellow .button .icon,
.bar.bar-yellow .title {
    color: var(--textColor40, #393939);
}

/* light-yellow */
.bar.bar-light-yellow.bar-footer,
.bar.bar-light-yellow {
    border-color: var(--light-yellow, #FFFF85);
    background: var(--light-yellow, #FFFF85);
    color: var(--textColor40, #393939);
}

.bar.bar-light-yellow .button .icon,
.bar.bar-light-yellow .title {
    color: var(--textColor40, #393939);
}

/* dark-yellow */
.bar.bar-dark-yellow.bar-footer,
.bar.bar-dark-yellow {
    border-color: var(--dark-yellow, #7A7A00);
    background: var(--dark-yellow, #7A7A00);
    color: var(--white, #fff);
}

.bar.bar-dark-yellow .button .icon,
.bar.bar-dark-yellow .title {
    color: var(--white, #fff);
}

/* green */
.bar.bar-green.bar-footer,
.bar.bar-green {
    border-color: var(--green, #66B032);
    background: var(--green, #66B032);
    color: var(--white, #fff);
}

.bar.bar-green .button .icon,
.bar.bar-green .title {
    color: var(--white, #fff);
}

/* light-green */
.bar.bar-light-green.bar-footer,
.bar.bar-light-green {
    border-color: var(--light-green, #B7FF85);
    background: var(--light-green, #B7FF85);
    color: var(--textColor40, #393939);
}

.bar.bar-light-green .button .icon,
.bar.bar-light-green .title {
    color: var(--textColor40, #393939);
}

/* dark-green */
.bar.bar-dark-green.bar-footer,
.bar.bar-dark-green {
    border-color: var(--dark-green, #337A00);
    background: var(--dark-green, #337A00);
    color: var(--white, #fff);
}

.bar.bar-dark-green .button .icon,
.bar.bar-dark-green .title {
    color: var(--white, #fff);
}