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

Javascript library for CronApp's projects

/* icon-theme */
.crn-ion-segment-modern ul.active-background-default li.active a,
.crn-ion-segment-classic ul.active-background-default li.active a {
    color: var(--textColorDefault40, #838383);
}

.crn-ion-segment-modern ul.active-background-assertive li.active a,
.crn-ion-segment-classic ul.active-background-assertive li.active a {
    color: var(--textColorDanger40, #ffffff);
}

.crn-ion-segment-modern ul.active-background-positive li.active a,
.crn-ion-segment-classic ul.active-background-positive li.active a {
    color: var(--textColorPrimary40, #ffffff);
}

.crn-ion-segment-modern ul.active-background-balanced li.active a,
.crn-ion-segment-classic ul.active-background-balanced li.active a {
    color: var(--textColorSuccess40, #ffffff);
}

.crn-ion-segment-modern ul.active-background-energized li.active a,
.crn-ion-segment-classic ul.active-background-energized li.active a {
    color: var(--textColorWarning40, #ffffff);
}

.crn-ion-segment-modern ul.active-background-royal li.active a,
.crn-ion-segment-classic ul.active-background-royal li.active a {
    color: var(--textColorRoyal40, #ffffff);
}

.crn-ion-segment-modern ul.active-background-calm li.active a,
.crn-ion-segment-classic ul.active-background-calm li.active a {
    color: var(--textColorCalm40, #ffffff);
}

.crn-ion-segment-modern ul.active-background-light li.active a,
.crn-ion-segment-classic ul.active-background-light li.active a {
    color: var(--textColorLight40, #333333);
}

.crn-ion-segment-modern ul.active-background-stable li.active a,
.crn-ion-segment-classic ul.active-background-stable li.active a {
    color: var(--textColorStable40, #ffffff);
}

.crn-ion-segment-modern ul.active-background-dark li.active a,
.crn-ion-segment-classic ul.active-background-dark li.active a {
    color: var(--textColorDark40, #ffffff);
}


/* icon-theme-light */
div.crn-ion-segment-light.icon-theme-light-default li a,
.ion-segment-default li a {
    color: var(--textColorDefault40, #3b448e);
}

div.crn-ion-segment-light.icon-theme-light-assertive li a,
.ion-segment-assertive li a {
    color: var(--textColorDanger40, #ef473a);
}

div.crn-ion-segment-light.icon-theme-light-balanced li a,
.ion-segment-balanced li a {
    color: var(--textColorSuccess40, #33cd5f);
}

div.crn-ion-segment-light.icon-theme-light-energized li a,
.ion-segment-energized li a {
    color: var(--textColorWarning40, #ffc900);
}

div.crn-ion-segment-light.icon-theme-light-light li a,
.ion-segment-light li a {
    color: var(--textColorLight40, #ffffff);
}

div.crn-ion-segment-light.icon-theme-light-stable li a,
.ion-segment-stable li a {
    color: var(--textColorStable40, #f8f8f8);
}

div.crn-ion-segment-light.icon-theme-light-calm li a,
.ion-segment-calm li a {
    color: var(--textColorCalm40, #11c1f3);
}

div.crn-ion-segment-light.icon-theme-light-positive li a,
.ion-segment-positive li a {
    color: var(--textColorPrimary40, #387ef5);
}

div.crn-ion-segment-light.icon-theme-light-royal li a,
.ion-segment-royal li a {
    color: var(--textColorRoyal40, #886aea);
}

div.crn-ion-segment-light.icon-theme-light-dark li a,
.ion-segment-dark li a {
    color: var(--textColorDark40, #444444);
}

/* background-color */

.bg-default {
    background: var(--colorDefault10, #d8d9e3);
}

.bg-assertive {
    background: var(--colorDanger10, #fad9d8);
}

.bg-balanced {
    background: var(--colorSuccess10, #d7f1dc);
}

.bg-energized {
    background: var(--colorWarning10, #fff0d5);
}

.bg-light {
    background: var(--colorLight10, #ffffff);
}

.bg-stable {
    background: var(--colorStable10, #fdfdfd);
}

.bg-calm {
    background: var(--colorCalm10, #d6eefb);
}

.bg-positive {
    background: var(--colorPrimary10, #d8e0fc);
}

.bg-royal {
    background: var(--colorRoyal10, #e2ddf9);
}

.bg-dark {
    background: var(--colorDark10, #d9d9d9);
}


/* background-color-active */
div.crn-ion-segment-classic ul.active-background-default li.active,
div.crn-ion-segment-modern ul.active-background-default li.active {
    background: var(--colorDefault40, #3b448e);
}

div.crn-ion-segment-classic ul.active-background-assertive li.active,
div.crn-ion-segment-modern ul.active-background-assertive li.active {
    background: var(--colorDanger40, #ef473a);
}

div.crn-ion-segment-classic ul.active-background-balanced li.active,
div.crn-ion-segment-modern ul.active-background-balanced li.active {
    background: var(--colorSuccess40, #33cd5f);
}

div.crn-ion-segment-classic ul.active-background-energized li.active,
div.crn-ion-segment-modern ul.active-background-energized li.active {
    background: var(--colorWarning40, #ffc900);
}

div.crn-ion-segment-classic ul.active-background-light li.active,
div.crn-ion-segment-modern ul.active-background-light li.active {
    background: var(--colorLight40, #ffffff);
}

div.crn-ion-segment-classic ul.active-background-stable li.active,
div.crn-ion-segment-modern ul.active-background-stable li.active {
    background: var(--colorStable40, #f8f8f8);
}

div.crn-ion-segment-classic ul.active-background-calm li.active,
div.crn-ion-segment-modern ul.active-background-calm li.active {
    background: var(--colorCalm40, #11c1f3);
}

div.crn-ion-segment-classic ul.active-background-positive li.active,
div.crn-ion-segment-modern ul.active-background-positive li.active {
    background: var(--colorPrimary40, #387ef5);
}

div.crn-ion-segment-classic ul.active-background-royal li.active,
div.crn-ion-segment-modern ul.active-background-royal li.active {
    background: var(--colorRoyal40, #886aea);
}

div.crn-ion-segment-classic ul.active-background-dark li.active,
div.crn-ion-segment-modern ul.active-background-dark li.active {
    background: var(--colorDark40, #444444);
}


/*  light background-color-active */
div.crn-ion-segment-light.icon-theme-light-assertive li.active {
    border-color: var(--colorDanger40, #ef473a);
}

div.crn-ion-segment-light.icon-theme-light-balanced li.active {
    border-color: var(--colorSuccess40, #33cd5f);
}

div.crn-ion-segment-light.icon-theme-light-energized li.active {
    border-color: var(--colorWarning40, #ffc900);
}

div.crn-ion-segment-light.icon-theme-light-light li.active {
    border-color: var(--colorLight40, #ffffff);
}

div.crn-ion-segment-light.icon-theme-light-stable li.active {
    border-color: var(--colorStable40, #f8f8f8);
}

div.crn-ion-segment-light.icon-theme-light-calm li.active {
    border-color: var(--colorCalm40, #11c1f3);
}

div.crn-ion-segment-light.icon-theme-light-positive li.active {
    border-color: var(--colorPrimary40, #387ef5);
}

div.crn-ion-segment-light.icon-theme-light-royal li.active {
    border-color: var(--colorRoyal40, #886aea);
}

div.crn-ion-segment-light.icon-theme-light-dark li.active {
    border-color: var(--colorDark40, #444444);
}