cronapp-framework-mobile-js/css/themes/custom/theme-general/checkbox.css

Javascript library for CronApp's projects

.checkbox input:checked:before,
input:checked+.checkbox-icon:before {
    border-width: 1px;
}

/* Default */
.checkbox input:before,
.checkbox .checkbox-icon:before,
.checkbox-default input:before,
.checkbox-default .checkbox-icon:before {
    border-color: var(--colorDefault40, #2b71e8);
}

.checkbox input:checked:before,
.checkbox input:checked+.checkbox-icon:before,
.checkbox-default input:checked:before,
.checkbox-default input:checked+.checkbox-icon:before {
    background: var(--colorDefault40, #2b71e8);
    border-color: var(--colorDefault40, #2b71e8);
}

.checkbox-default input:checked:after,
.checkbox-default input:checked+.checkbox-icon:after {
    border-color: var(--textColorDefault40, #ffffff);
}

/* Light */
.checkbox-light input:before,
.checkbox-light .checkbox-icon:before {
    border-color: var(--colorLight50, #c2c2c2);
}

.checkbox-light input:checked:before,
.checkbox-light input:checked+.checkbox-icon:before {
    background: var(--colorLight50, #c2c2c2);
    border-color: var(--colorLight50, #c2c2c2);
}

.checkbox-light input:checked:after,
.checkbox-light input:checked+.checkbox-icon:after {
    border-color: var(--textColorLight40, #444444);
}

/* Stable */
.checkbox-stable input:before,
.checkbox-stable .checkbox-icon:before {
    border-color: var(--colorStable40, #b2b2b2);
}

.checkbox-stable input:checked:before,
.checkbox-stable input:checked+.checkbox-icon:before {
    background: var(--colorStable40, #b2b2b2);
    border-color: var(--colorStable40, #b2b2b2);
}

.checkbox-stable input:checked:after,
.checkbox-stable input:checked+.checkbox-icon:after {
    border-color: var(--textColorStable40, #444444);
}

/* Positive */
.checkbox-positive input:before,
.checkbox-positive .checkbox-icon:before {
    border-color: var(--colorPrimary40, #2b71e8);
}

.checkbox-positive input:checked:before,
.checkbox-positive input:checked+.checkbox-icon:before {
    background: var(--colorPrimary40, #2b71e8);
    border-color: var(--colorPrimary40, #2b71e8);
}

.checkbox-positive input:checked:after,
.checkbox-positive input:checked+.checkbox-icon:after {
    border-color: var(--textColorPositive40, #ffffff);
}

/* Calm */
.checkbox-calm input:before,
.checkbox-calm .checkbox-icon:before {
    border-color: var(--colorCalm40, #11c1f3);
}

.checkbox-calm input:checked:before,
.checkbox-calm input:checked+.checkbox-icon:before {
    background: var(--colorCalm40, #11c1f3);
    border-color: var(--colorCalm40, #11c1f3);
}

.checkbox-calm input:checked:after,
.checkbox-calm input:checked+.checkbox-icon:after {
    border-color: var(--textColorCalm40, #ffffff);
}

/* Assertive */
.checkbox-assertive input:before,
.checkbox-assertive .checkbox-icon:before {
    border-color: var(--colorDanger40, #e13023);
}

.checkbox-assertive input:checked:before,
.checkbox-assertive input:checked+.checkbox-icon:before {
    background: var(--colorDanger40, #e13023);
    border-color: var(--colorDanger40, #e13023);
}

.checkbox-assertive input:checked:after,
.checkbox-assertive input:checked+.checkbox-icon:after {
    border-color: var(--textColorAssertive40, #ffffff);
}

/* Balanced */
.checkbox-balanced input:before,
.checkbox-balanced .checkbox-icon:before {
    border-color: var(--colorSuccess40, #21873e);
}

.checkbox-balanced input:checked:before,
.checkbox-balanced input:checked+.checkbox-icon:before {
    background: var(--colorSuccess40, #21873e);
    border-color: var(--colorSuccess40, #21873e);
}

.checkbox-balanced input:checked:after,
.checkbox-balanced input:checked+.checkbox-icon:after {
    border-color: var(--textColorSuccess40, #ffffff);
}

/* Energized */
.checkbox-energized input:before,
.checkbox-energized .checkbox-icon:before {
    border-color: var(--colorWarning40, #ffc900);
}

.checkbox-energized input:checked:before,
.checkbox-energized input:checked+.checkbox-icon:before {
    background: var(--colorWarning40, #ffc900);
    border-color: var(--colorWarning40, #ffc900);
}

.checkbox-energized input:checked:after,
.checkbox-energized input:checked+.checkbox-icon:after {
    border-color: var(--textColorWarning40, #ffffff);
}

/* Royal */
.checkbox-royal input:before,
.checkbox-royal .checkbox-icon:before {
    border-color: var(--colorRoyal40, #7e5ee8);
}

.checkbox-royal input:checked:before,
.checkbox-royal input:checked+.checkbox-icon:before {
    background: var(--colorRoyal40, #7e5ee8);
    border-color: var(--colorRoyal40, #7e5ee8);
}

.checkbox-royal input:checked:after,
.checkbox-royal input:checked+.checkbox-icon:after {
    border-color: var(--textColorRoyal40, #ffffff);
}

/* Dark */
.checkbox-dark input:before,
.checkbox-dark .checkbox-icon:before {
    border-color: var(--colorDark40, #444444);
}

.checkbox-dark input:checked:before,
.checkbox-dark input:checked+.checkbox-icon:before {
    background: var(--colorDark40, #444444);
    border-color: var(--colorDark40, #444444);
}

.checkbox-dark input:checked:after,
.checkbox-dark input:checked+.checkbox-icon:after {
    border-color: var(--textColorDark40, #ffffff);
}

/* Disabled */
.checkbox input:disabled:before,
.checkbox input:disabled+.checkbox-icon:before {
    border-color: #ddd;
}

.checkbox input:disabled:checked:before,
.checkbox input:disabled:checked+.checkbox-icon:before {
    background: #ddd;
}

/* white */
.checkbox-white input:before,
.checkbox-white .checkbox-icon:before {
    border-color: var(--black, #000000);
}

.checkbox-white input:checked:before,
.checkbox-white input:checked+.checkbox-icon:before {
    background: var(--white, #ffffff);
    border-color: var(--black, #000000);
}

.checkbox-white input:checked:after,
.checkbox-white input:checked+.checkbox-icon:after {
    border-color: var(--black, #000000);
}

/* gray */
.checkbox-gray input:before,
.checkbox-gray .checkbox-icon:before {
    border-color: var(--gray, #333333);
}

.checkbox-gray input:checked:before,
.checkbox-gray input:checked+.checkbox-icon:before {
    background: var(--gray, #333333);
    border-color: var(--gray, #333333);
}

.checkbox-gray input:checked:after,
.checkbox-gray input:checked+.checkbox-icon:after {
    border-color: var(--white, #ffffff);
}

/* black */
.checkbox-black input:before,
.checkbox-black .checkbox-icon:before {
    border-color: var(--black, #000000);
}

.checkbox-black input:checked:before,
.checkbox-black input:checked+.checkbox-icon:before {
    background: var(--black, #000000);
    border-color: var(--black, #000000);
}

.checkbox-black input:checked:after,
.checkbox-black input:checked+.checkbox-icon:after {
    border-color: var(--white, #ffffff);
}

/* blue */
.checkbox-blue input:before,
.checkbox-blue .checkbox-icon:before {
    border-color: var(--blue, #0247FE);
}

.checkbox-blue input:checked:before,
.checkbox-blue input:checked+.checkbox-icon:before {
    background: var(--blue, #0247FE);
    border-color: var(--blue, #0247FE);
}

.checkbox-blue input:checked:after,
.checkbox-blue input:checked+.checkbox-icon:after {
    border-color: var(--white, #ffffff);
}

/* light-blue */
.checkbox-light-blue input:before,
.checkbox-light-blue .checkbox-icon:before {
    border-color: var(--light-blue, #85A5FF);
}

.checkbox-light-blue input:checked:before,
.checkbox-light-blue input:checked+.checkbox-icon:before {
    background: var(--light-blue, #85A5FF);
    border-color: var(--light-blue, #85A5FF);
}

.checkbox-light-blue input:checked:after,
.checkbox-light-blue input:checked+.checkbox-icon:after {
    border-color: var(--white, #ffffff);
}

/* dark-blue */
.checkbox-dark-blue input:before,
.checkbox-dark-blue .checkbox-icon:before {
    border-color: var(--dark-blue, #00217A);
}

.checkbox-dark-blue input:checked:before,
.checkbox-dark-blue input:checked+.checkbox-icon:before {
    background: var(--dark-blue, #00217A);
    border-color: var(--dark-blue, #00217A);
}

.checkbox-dark-blue input:checked:after,
.checkbox-dark-blue input:checked+.checkbox-icon:after {
    border-color: var(--white, #ffffff);
}

/* purple */
.checkbox-purple input:before,
.checkbox-purple .checkbox-icon:before {
    border-color: var(--purple, #3D01A4);
}

.checkbox-purple input:checked:before,
.checkbox-purple input:checked+.checkbox-icon:before {
    background: var(--purple, #3D01A4);
    border-color: var(--purple, #3D01A4);
}

.checkbox-purple input:checked:after,
.checkbox-purple input:checked+.checkbox-icon:after {
    border-color: var(--white, #ffffff);
}

/* light-purple */
.checkbox-light-purple input:before,
.checkbox-light-purple .checkbox-icon:before {
    border-color: var(--light-purple, #B285FF);
}

.checkbox-light-purple input:checked:before,
.checkbox-light-purple input:checked+.checkbox-icon:before {
    background: var(--light-purple, #B285FF);
    border-color: var(--light-purple, #B285FF);
}

.checkbox-light-purple input:checked:after,
.checkbox-light-purple input:checked+.checkbox-icon:after {
    border-color: var(--white, #ffffff);
}

/* dark-purple */
.checkbox-dark-purple input:before,
.checkbox-dark-purple .checkbox-icon:before {
    border-color: var(--dark-purple, #2D007A);
}

.checkbox-dark-purple input:checked:before,
.checkbox-dark-purple input:checked+.checkbox-icon:before {
    background: var(--dark-purple, #2D007A);
    border-color: var(--dark-purple, #2D007A);
}

.checkbox-dark-purple input:checked:after,
.checkbox-dark-purple input:checked+.checkbox-icon:after {
    border-color: var(--white, #ffffff);
}

/* red */
.checkbox-red input:before,
.checkbox-red .checkbox-icon:before {
    border-color: var(--red, #FE2712);
}

.checkbox-red input:checked:before,
.checkbox-red input:checked+.checkbox-icon:before {
    background: var(--red, #FE2712);
    border-color: var(--red, #FE2712);
}

.checkbox-red input:checked:after,
.checkbox-red input:checked+.checkbox-icon:after {
    border-color: var(--white, #ffffff);
}

/* light-red */
.checkbox-light-red input:before,
.checkbox-light-red .checkbox-icon:before {
    border-color: var(--light-red, #FE8F84);
}

.checkbox-light-red input:checked:before,
.checkbox-light-red input:checked+.checkbox-icon:before {
    background: var(--light-red, #FE8F84);
    border-color: var(--light-red, #FE8F84);
}

.checkbox-light-red input:checked:after,
.checkbox-light-red input:checked+.checkbox-icon:after {
    border-color: var(--white, #ffffff);
}

/* dark-red */
.checkbox-dark-red input:before,
.checkbox-dark-red .checkbox-icon:before {
    border-color: var(--dark-red, #7A0B00);
}

.checkbox-dark-red input:checked:before,
.checkbox-dark-red input:checked+.checkbox-icon:before {
    background: var(--dark-red, #7A0B00);
    border-color: var(--dark-red, #7A0B00);
}

.checkbox-dark-red input:checked:after,
.checkbox-dark-red input:checked+.checkbox-icon:after {
    border-color: var(--white, #ffffff);
}

/* orange */
.checkbox-orange input:before,
.checkbox-orange .checkbox-icon:before {
    border-color: var(--orange, #FB9B02);
}

.checkbox-orange input:checked:before,
.checkbox-orange input:checked+.checkbox-icon:before {
    background: var(--orange, #FB9B02);
    border-color: var(--orange, #FB9B02);
}

.checkbox-orange input:checked:after,
.checkbox-orange input:checked+.checkbox-icon:after {
    border-color: var(--white, #ffffff);
}

/* light-orange */
.checkbox-light-orange input:before,
.checkbox-light-orange .checkbox-icon:before {
    border-color: var(--light-orange, #FFD085);
}

.checkbox-light-orange input:checked:before,
.checkbox-light-orange input:checked+.checkbox-icon:before {
    background: var(--light-orange, #FFD085);
    border-color: var(--light-orange, #FFD085);
}

.checkbox-light-orange input:checked:after,
.checkbox-light-orange input:checked+.checkbox-icon:after {
    border-color: var(--gray, #333333);
}

/* dark-orange */
.checkbox-dark-orange input:before,
.checkbox-dark-orange .checkbox-icon:before {
    border-color: var(--dark-orange, #7A4B00);
}

.checkbox-dark-orange input:checked:before,
.checkbox-dark-orange input:checked+.checkbox-icon:before {
    background: var(--dark-orange, #7A4B00);
    border-color: var(--dark-orange, #7A4B00);
}

.checkbox-dark-orange input:checked:after,
.checkbox-dark-orange input:checked+.checkbox-icon:after {
    border-color: var(--white, #ffffff);
}

/* yellow */
.checkbox-yellow input:before,
.checkbox-yellow .checkbox-icon:before {
    border-color: var(--yellow, #FFFF33);
}

.checkbox-yellow input:checked:before,
.checkbox-yellow input:checked+.checkbox-icon:before {
    background: var(--yellow, #FFFF33);
    border-color: var(--yellow, #FFFF33);
}

.checkbox-yellow input:checked:after,
.checkbox-yellow input:checked+.checkbox-icon:after {
    border-color: var(--white, #ffffff);
}

/* light-yellow */
.checkbox-light-yellow input:before,
.checkbox-light-yellow .checkbox-icon:before {
    border-color: var(--light-yellow, #FFFF85);
}

.checkbox-light-yellow input:checked:before,
.checkbox-light-yellow input:checked+.checkbox-icon:before {
    background: var(--light-yellow, #FFFF85);
    border-color: var(--light-yellow, #FFFF85);
}

.checkbox-light-yellow input:checked:after,
.checkbox-light-yellow input:checked+.checkbox-icon:after {
    border-color: var(--white, #ffffff);
}

/* dark-yellow */
.checkbox-dark-yellow input:before,
.checkbox-dark-yellow .checkbox-icon:before {
    border-color: var(--dark-yellow, #7A7A00);
}

.checkbox-dark-yellow input:checked:before,
.checkbox-dark-yellow input:checked+.checkbox-icon:before {
    background: var(--dark-yellow, #7A7A00);
    border-color: var(--dark-yellow, #7A7A00);
}

.checkbox-dark-yellow input:checked:after,
.checkbox-dark-yellow input:checked+.checkbox-icon:after {
    border-color: var(--white, #ffffff);
}

/* green */
.checkbox-green input:before,
.checkbox-green .checkbox-icon:before {
    border-color: var(--green, #66B032);
}

.checkbox-green input:checked:before,
.checkbox-green input:checked+.checkbox-icon:before {
    background: var(--green, #66B032);
    border-color: var(--green, #66B032);
}

.checkbox-green input:checked:after,
.checkbox-green input:checked+.checkbox-icon:after {
    border-color: var(--white, #ffffff);
}

/* light-green */
.checkbox-light-green input:before,
.checkbox-light-green .checkbox-icon:before {
    border-color: var(--light-green, #B7FF85);
}

.checkbox-light-green input:checked:before,
.checkbox-light-green input:checked+.checkbox-icon:before {
    background: var(--light-green, #B7FF85);
    border-color: var(--light-green, #B7FF85);
}

.checkbox-light-green input:checked:after,
.checkbox-light-green input:checked+.checkbox-icon:after {
    border-color: var(--white, #ffffff);
}

/* dark-green */
.checkbox-dark-green input:before,
.checkbox-dark-green .checkbox-icon:before {
    border-color: var(--dark-green, #337A00);
}

.checkbox-dark-green input:checked:before,
.checkbox-dark-green input:checked+.checkbox-icon:before {
    background: var(--dark-green, #337A00);
    border-color: var(--dark-green, #337A00);
}

.checkbox-dark-green input:checked:after,
.checkbox-dark-green input:checked+.checkbox-icon:after {
    border-color: var(--white, #ffffff);
}