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

Javascript library for CronApp's projects

/* 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: linear-gradient(var(--colorDefault40, #3a3f44), var(--colorDefault40, #3a3f44), var(--colorDefault50, #33373c));
    border-color: var(--colorDefault40, #3a3f44);
}

div.crn-ion-segment-classic ul.active-background-assertive li.active,
div.crn-ion-segment-modern ul.active-background-assertive li.active {
    background: linear-gradient(var(--colorDanger40, #9b479f), var(--colorDanger50, #883e8b));
    border-color: var(--colorDanger50, #883e8b);
}

div.crn-ion-segment-classic ul.active-background-balanced li.active,
div.crn-ion-segment-modern ul.active-background-balanced li.active {
    background: linear-gradient(var(--colorSuccess30, #8ab37b), var(--colorSuccess40, #469408));
    border-color: var(--colorSuccess40, #469408);
}

div.crn-ion-segment-classic ul.active-background-energized li.active,
div.crn-ion-segment-modern ul.active-background-energized li.active {
    background: linear-gradient(var(--colorWarning30, #e2a87e), var(--colorWarning40, #d9831f));
    border: 1px solid var(--colorWarning40, #d9831f);
}

div.crn-ion-segment-classic ul.active-background-light li.active,
div.crn-ion-segment-modern ul.active-background-light li.active {
    background: linear-gradient(var(--colorLight30, #ffffff), var(--colorLight50, #dfdfdf));
    border-color: var(--colorLight50, #dfdfdf);
}

div.crn-ion-segment-classic ul.active-background-stable li.active,
div.crn-ion-segment-modern ul.active-background-stable li.active {
    background: linear-gradient(var(--colorStable30, #fafafa), var(--colorStable40, #f8f8f8));
    border-color: 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: linear-gradient(var(--colorCalm30, #7bb7db), var(--colorCalm40, #029acf));
    border-color: var(--colorCalm40, #029acf);
}

div.crn-ion-segment-classic ul.active-background-positive li.active,
div.crn-ion-segment-modern ul.active-background-positive li.active {
    background: linear-gradient(var(--colorPrimary50, #6b7277), var(--colorPrimary50, #6b7277), var(--colorPrimary60, #595f64));
    border-color: var(--colorPrimary60, #595f64);
}

div.crn-ion-segment-classic ul.active-background-royal li.active,
div.crn-ion-segment-modern ul.active-background-royal li.active {
    background: linear-gradient(var(--colorRoyal40, #ffffff), var(--colorRoyal50, #dfdfdf));
    border-color: var(--colorRoyal50, #dfdfdf);
}

div.crn-ion-segment-classic ul.active-background-dark li.active,
div.crn-ion-segment-modern ul.active-background-dark li.active {
    background: linear-gradient(var(--colorDark30, #848586), var(--colorDark40, #373a3c));
    border-color: var(--colorDark40, #373a3c);
}

/* background-color */

.bg-default {
    background: #d8d8d978;
}

.bg-assertive {
    background: #fadcdb78;
}

.bg-balanced {
    background: #dcefdc78;
}

.bg-energized {
    background: #fde4d578;
}

.bg-light {
    background: #f9f9fa78;
}

.bg-stable {
    background: #fdfdfd78;
}

.bg-calm {
    background: #dbeef678;
}

.bg-positive {
    background: #e0e1e278;
}

.bg-royal {
    background: #e2ddf978;
}

.bg-dark {
    background: #d6d7d778;
}