cronapp-framework-js/components/css/option-color.css

Javascript library for CronApp's projects

/* default */
.k-radio-label:before,
.option-default .k-radio-label:before {
    border-color: var(--colorDefault40, #3b448e);
}

.k-radio-label:after,
.k-radio:checked+.k-radio-label:after,
.option-default .k-radio-label:after,
.option-default .k-radio:checked+.k-radio-label:after {
    background: var(--colorDefault40, #3b448e);
    border-color: var(--colorDefault40, #3b448e);
}

.k-radio:checked+.k-radio-label:before,
.option-default .k-radio:checked+.k-radio-label:before {
    border-color: var(--colorDefault40, #3b448e);
}

.k-radio:focus+.k-radio-label::before,
.k-radio:hover+.k-radio-label::before,
.option-default .k-radio:focus+.k-radio-label::before,
.option-default .k-radio:hover+.k-radio-label::before {
    box-shadow: 0 0 5px 0 var(--colorDefault40, #3b448e);
    border-color: var(--colorDefault40, #3b448e);
}

/* primary */
.option-primary .k-radio-label:before {
    border-color: var(--colorPrimary40, #5665be);
}

.option-primary .k-radio-label:after,
.option-primary .k-radio:checked+.k-radio-label:after {
    background: var(--colorPrimary40, #5665be);
    border-color: var(--colorPrimary40, #5665be);
}

.option-primary .k-radio:checked+.k-radio-label:before {
    border-color: var(--colorPrimary40, #5665be);
}

.option-primary .k-radio:focus+.k-radio-label::before,
.option-primary .k-radio:hover+.k-radio-label::before {
    box-shadow: 0 0 5px 0 var(--colorPrimary40, #5665be);
    border-color: var(--colorPrimary40, #5665be);
}

/* success */
.option-success .k-radio-label:before {
    border-color: var(--colorSuccess40, #33cd5f);
}

.option-success .k-radio-label:after,
.option-success .k-radio:checked+.k-radio-label:after {
    background: var(--colorSuccess40, #33cd5f);
    border-color: var(--colorSuccess40, #33cd5f);
}

.option-success .k-radio:checked+.k-radio-label:before {
    border-color: var(--colorSuccess40, #33cd5f);
}

.option-success .k-radio:focus+.k-radio-label::before,
.option-success .k-radio:hover+.k-radio-label::before {
    box-shadow: 0 0 5px 0 var(--colorSuccess40, #33cd5f);
    border-color: var(--colorSuccess40, #33cd5f);
}

/* info */
.option-info .k-radio-label:before {
    border-color: var(--colorCalm40, #11c1f3);
}

.option-info .k-radio-label:after,
.option-info .k-radio:checked+.k-radio-label:after {
    background: var(--colorCalm40, #11c1f3);
    border-color: var(--colorCalm40, #11c1f3);
}

.option-info .k-radio:checked+.k-radio-label:before {
    border-color: var(--colorCalm40, #11c1f3);
}

.option-info .k-radio:focus+.k-radio-label::before,
.option-info .k-radio:hover+.k-radio-label::before {
    box-shadow: 0 0 5px 0 var(--colorCalm40, #11c1f3);
    border-color: var(--colorCalm40, #11c1f3);
}

/* warning */
.option-warning .k-radio-label:before {
    border-color: var(--colorWarning40, #ffc900);
}

.option-warning .k-radio-label:after,
.option-warning .k-radio:checked+.k-radio-label:after {
    background: var(--colorWarning40, #ffc900);
    border-color: var(--colorWarning40, #ffc900);
}

.option-warning .k-radio:checked+.k-radio-label:before {
    border-color: var(--colorWarning40, #ffc900);
}

.option-warning .k-radio:focus+.k-radio-label::before,
.option-warning .k-radio:hover+.k-radio-label::before {
    box-shadow: 0 0 5px 0 var(--colorWarning40, #ffc900);
    border-color: var(--colorWarning40, #ffc900);
}

/* danger */
.option-danger .k-radio-label:before {
    border-color: var(--colorDanger40, #ef473a);
}

.option-danger .k-radio-label:after,
.option-danger .k-radio:checked+.k-radio-label:after {
    background: var(--colorDanger40, #ef473a);
    border-color: var(--colorDanger40, #ef473a);
}

.option-danger .k-radio:checked+.k-radio-label:before {
    border-color: var(--colorDanger40, #ef473a);
}

.option-danger .k-radio:focus+.k-radio-label::before,
.option-danger .k-radio:hover+.k-radio-label::before {
    box-shadow: 0 0 5px 0 var(--colorDanger40, #ef473a);
    border-color: var(--colorDanger40, #ef473a);
}

/* Stable */
.option-stable .k-radio-label:before {
    border-color: var(--colorStable40, #f8f8f8);
}

.option-stable .k-radio-label:after,
.option-stable .k-radio:checked+.k-radio-label:after {
    background: var(--colorStable40, #f8f8f8);
    border-color: var(--colorStable40, #f8f8f8);
}

.option-stable .k-radio:checked+.k-radio-label:before {
    border-color: var(--colorStable40, #f8f8f8);
}

.option-stable .k-radio:focus+.k-radio-label::before,
.option-stable .k-radio:hover+.k-radio-label::before {
    box-shadow: 0 0 5px 0 var(--colorStable40, #f8f8f8);
    border-color: var(--colorStable40, #f8f8f8);
}

/* Royal */
.option-royal .k-radio-label:before {
    border-color: var(--colorRoyal40, #886aea);
}

.option-royal .k-radio-label:after,
.option-royal .k-radio:checked+.k-radio-label:after {
    background: var(--colorRoyal40, #886aea);
    border-color: var(--colorRoyal40, #886aea);
}

.option-royal .k-radio:checked+.k-radio-label:before {
    border-color: var(--colorRoyal40, #886aea);
}

.option-royal .k-radio:focus+.k-radio-label::before,
.option-royal .k-radio:hover+.k-radio-label::before {
    box-shadow: 0 0 5px 0 var(--colorRoyal40, #886aea);
    border-color: var(--colorRoyal40, #886aea);
}

/* Dark */
.option-dark .k-radio-label:before {
    border-color: var(--colorDark40, #444444);
}

.option-dark .k-radio-label:after,
.option-dark .k-radio:checked+.k-radio-label:after {
    background: var(--colorDark40, #444444);
    border-color: var(--colorDark40, #444444);
}

.option-dark .k-radio:checked+.k-radio-label:before {
    border-color: var(--colorDark40, #444444);
}

.option-dark .k-radio:focus+.k-radio-label::before,
.option-dark .k-radio:hover+.k-radio-label::before {
    box-shadow: 0 0 5px 0 var(--colorDark40, #444444);
    border-color: var(--colorDark40, #444444);
}




























/* light */
.option-light .k-radio-label:before {
    border-color: var(--colorLight40, #ffffff);
}

.option-light .k-radio-label:after,
.option-light .k-radio:checked+.k-radio-label:after {
    background: var(--colorLight40, #ffffff);
    border-color: var(--colorLight40, #ffffff);
}

.option-light .k-radio:checked+.k-radio-label:before {
    border-color: var(--colorLight40, #ffffff);
}

.option-light .k-radio:focus+.k-radio-label::before,
.option-light .k-radio:hover+.k-radio-label::before {
    box-shadow: 0 0 5px 0 var(--colorLight40, #ffffff);
    border-color: var(--colorLight40, #ffffff);
}

/* white */

.option-white .k-radio-label:after,
.option-white .k-radio-label:before,
.option-white .k-radio:checked+.k-radio-label:after {
    background: var(--white, #ffffff);
    border-color: var(--white, #ffffff);
}

.option-white .k-radio:checked+.k-radio-label:before {
    border-color: var(--white, #ffffff);
}

.option-white .k-radio:focus+.k-radio-label::before,
.option-white .k-radio:hover+.k-radio-label::before {
    box-shadow: 0 0 5px 0 var(--white, #ffffff);
    border-color: var(--white, #ffffff);
}

/* gray */

.option-gray .k-radio-label:after,
.option-gray .k-radio-label:before,
.option-gray .k-radio:checked+.k-radio-label:after {
    background: var(--gray, #333333);
    border-color: var(--gray, #333333);
}

.option-gray .k-radio:checked+.k-radio-label:before {
    border-color: var(--gray, #333333);
}

.option-gray .k-radio:focus+.k-radio-label::before,
.option-gray .k-radio:hover+.k-radio-label::before {
    box-shadow: 0 0 5px 0 var(--gray, #333333);
    border-color: var(--gray, #333333);
}

/* black */

.option-black .k-radio-label:after,
.option-black .k-radio-label:before,
.option-black .k-radio:checked+.k-radio-label:after {
    background: var(--black, #000000);
    border-color: var(--black, #000000);
}

.option-black .k-radio:checked+.k-radio-label:before {
    border-color: var(--black, #000000);
}

.option-black .k-radio:focus+.k-radio-label::before,
.option-black .k-radio:hover+.k-radio-label::before {
    box-shadow: 0 0 5px 0 var(--black, #000000);
    border-color: var(--black, #000000);
}

/* blue */

.option-blue .k-radio-label:after,
.option-blue .k-radio-label:before,
.option-blue .k-radio:checked+.k-radio-label:after {
    background: var(--blue, #0247FE);
    border-color: var(--blue, #0247FE);
}

.option-blue .k-radio:checked+.k-radio-label:before {
    border-color: var(--blue, #0247FE);
}

.option-blue .k-radio:focus+.k-radio-label::before,
.option-blue .k-radio:hover+.k-radio-label::before {
    box-shadow: 0 0 5px 0 var(--blue, #0247FE);
    border-color: var(--blue, #0247FE);
}

/* light-blue */

.option-light-blue .k-radio-label:after,
.option-light-blue .k-radio-label:before,
.option-light-blue .k-radio:checked+.k-radio-label:after {
    background: var(--light-blue, #85A5FF);
    border-color: var(--light-blue, #85A5FF);
}

.option-light-blue .k-radio:checked+.k-radio-label:before {
    border-color: var(--light-blue, #85A5FF);
}

.option-light-blue .k-radio:focus+.k-radio-label:before,
.option-light-blue .k-radio:hover+.k-radio-label:before {
    box-shadow: 0 0 5px 0 var(--light-blue, #85A5FF);
    border-color: var(--light-blue, #85A5FF);
}

/* dark-blue */

.option-dark-blue .k-radio-label:after,
.option-dark-blue .k-radio-label:before,
.option-dark-blue .k-radio:checked+.k-radio-label:after {
    background: var(--dark-blue, #00217A);
    border-color: var(--dark-blue, #00217A);
}

.option-dark-blue .k-radio:checked+.k-radio-label:before {
    border-color: var(--dark-blue, #00217A);
}

.option-dark-blue .k-radio:focus+.k-radio-label:before,
.option-dark-blue .k-radio:hover+.k-radio-label:before {
    box-shadow: 0 0 5px 0 var(--dark-blue, #00217A);
    border-color: var(--dark-blue, #00217A);
}

/* purple */

.option-purple .k-radio-label:after,
.option-purple .k-radio-label:before,
.option-purple .k-radio:checked+.k-radio-label:after {
    background: var(--purple, #3D01A4);
    border-color: var(--purple, #3D01A4);
}

.option-purple .k-radio:checked+.k-radio-label:before {
    border-color: var(--purple, #3D01A4);
}

.option-purple .k-radio:focus+.k-radio-label::before,
.option-purple .k-radio:hover+.k-radio-label::before {
    box-shadow: 0 0 5px 0 var(--purple, #3D01A4);
    border-color: var(--purple, #3D01A4);
}

/* light-purple */

.option-light-purple .k-radio-label:after,
.option-light-purple .k-radio-label:before,
.option-light-purple .k-radio:checked+.k-radio-label:after {
    background: var(--light-purple, #B285FF);
    border-color: var(--light-purple, #B285FF);
}

.option-light-purple .k-radio:checked+.k-radio-label:before {
    border-color: var(--light-purple, #B285FF);
}

.option-light-purple .k-radio:focus+.k-radio-label:before,
.option-light-purple .k-radio:hover+.k-radio-label:before {
    box-shadow: 0 0 5px 0 var(--light-purple, #B285FF);
    border-color: var(--light-purple, #B285FF);
}

/* dark-purple */

.option-dark-purple .k-radio-label:after,
.option-dark-purple .k-radio-label:before,
.option-dark-purple .k-radio:checked+.k-radio-label:after {
    background: var(--dark-purple, #2D007A);
    border-color: var(--dark-purple, #2D007A);
}

.option-dark-purple .k-radio:checked+.k-radio-label:before {
    border-color: var(--dark-purple, #2D007A);
}

.option-dark-purple .k-radio:focus+.k-radio-label:before,
.option-dark-purple .k-radio:hover+.k-radio-label:before {
    box-shadow: 0 0 5px 0 var(--dark-purple, #2D007A);
    border-color: var(--dark-purple, #2D007A);
}

/* Red */

.option-red .k-radio-label:after,
.option-red .k-radio-label:before,
.option-red .k-radio:checked+.k-radio-label:after {
    background: var(--red, #FE2712);
    border-color: var(--red, #FE2712);
}

.option-red .k-radio:checked+.k-radio-label:before {
    border-color: var(--red, #FE2712);
}

.option-red .k-radio:focus+.k-radio-label::before,
.option-red .k-radio:hover+.k-radio-label::before {
    box-shadow: 0 0 5px 0 var(--red, #FE2712);
    border-color: var(--red, #FE2712);
}

/* light-red */

.option-light-red .k-radio-label:after,
.option-light-red .k-radio-label:before,
.option-light-red .k-radio:checked+.k-radio-label:after {
    background: var(--light-red, #FE8F84);
    border-color: var(--light-red, #FE8F84);
}

.option-light-red .k-radio:checked+.k-radio-label:before {
    border-color: var(--light-red, #FE8F84);
}

.option-light-red .k-radio:focus+.k-radio-label:before,
.option-light-red .k-radio:hover+.k-radio-label:before {
    box-shadow: 0 0 5px 0 var(--light-red, #FE8F84);
    border-color: var(--light-red, #FE8F84);
}

/* dark-red */

.option-dark-red .k-radio-label:after,
.option-dark-red .k-radio-label:before,
.option-dark-red .k-radio:checked+.k-radio-label:after {
    background: var(--dark-red, #7A0B00);
    border-color: var(--dark-red, #7A0B00);
}

.option-dark-red .k-radio:checked+.k-radio-label:before {
    border-color: var(--dark-red, #7A0B00);
}

.option-dark-red .k-radio:focus+.k-radio-label:before,
.option-dark-red .k-radio:hover+.k-radio-label:before {
    box-shadow: 0 0 5px 0 var(--dark-red, #7A0B00);
    border-color: var(--dark-red, #7A0B00);
}

/* orange */

.option-orange .k-radio-label:after,
.option-orange .k-radio-label:before,
.option-orange .k-radio:checked+.k-radio-label:after {
    background: var(--orange, #FB9B02);
    border-color: var(--orange, #FB9B02);
}

.option-orange .k-radio:checked+.k-radio-label:before {
    border-color: var(--orange, #FB9B02);
}

.option-orange .k-radio:focus+.k-radio-label::before,
.option-orange .k-radio:hover+.k-radio-label::before {
    box-shadow: 0 0 5px 0 var(--orange, #FB9B02);
    border-color: var(--orange, #FB9B02);
}

/* light-orange */

.option-light-orange .k-radio-label:after,
.option-light-orange .k-radio-label:before,
.option-light-orange .k-radio:checked+.k-radio-label:after {
    background: var(--light-orange, #FFD085);
    border-color: var(--light-orange, #FFD085);
}

.option-light-orange .k-radio:checked+.k-radio-label:before {
    border-color: var(--light-orange, #FFD085);
}

.option-light-orange .k-radio:focus+.k-radio-label:before,
.option-light-orange .k-radio:hover+.k-radio-label:before {
    box-shadow: 0 0 5px 0 var(--light-orange, #FFD085);
    border-color: var(--light-orange, #FFD085);
}

/* dark-orange */

.option-dark-orange .k-radio-label:after,
.option-dark-orange .k-radio-label:before,
.option-dark-orange .k-radio:checked+.k-radio-label:after {
    background: var(--dark-orange, #7A4B00);
    border-color: var(--dark-orange, #7A4B00);
}

.option-dark-orange .k-radio:checked+.k-radio-label:before {
    border-color: var(--dark-orange, #7A4B00);
}

.option-dark-orange .k-radio:focus+.k-radio-label:before,
.option-dark-orange .k-radio:hover+.k-radio-label:before {
    box-shadow: 0 0 5px 0 var(--dark-orange, #7A4B00);
    border-color: var(--dark-orange, #7A4B00);
}

/* yellow */

.option-yellow .k-radio-label:after,
.option-yellow .k-radio-label:before,
.option-yellow .k-radio:checked+.k-radio-label:after {
    background: var(--yellow, #FFFF33);
    border-color: var(--yellow, #FFFF33);
}

.option-yellow .k-radio:checked+.k-radio-label:before {
    border-color: var(--yellow, #FFFF33);
}

.option-yellow .k-radio:focus+.k-radio-label::before,
.option-yellow .k-radio:hover+.k-radio-label::before {
    box-shadow: 0 0 5px 0 var(--yellow, #FFFF33);
    border-color: var(--yellow, #FFFF33);
}

/* light-yellow */

.option-light-yellow .k-radio-label:after,
.option-light-yellow .k-radio-label:before,
.option-light-yellow .k-radio:checked+.k-radio-label:after {
    background: var(--light-yellow, #FFFF85);
    border-color: var(--light-yellow, #FFFF85);
}

.option-light-yellow .k-radio:checked+.k-radio-label:before {
    border-color: var(--light-yellow, #FFFF85);
}

.option-light-yellow .k-radio:focus+.k-radio-label:before,
.option-light-yellow .k-radio:hover+.k-radio-label:before {
    box-shadow: 0 0 5px 0 var(--light-yellow, #FFFF85);
    border-color: var(--light-yellow, #FFFF85);
}

/* dark-yellow */

.option-dark-yellow .k-radio-label:after,
.option-dark-yellow .k-radio-label:before,
.option-dark-yellow .k-radio:checked+.k-radio-label:after {
    background: var(--dark-yellow, #7A7A00);
    border-color: var(--dark-yellow, #7A7A00);
}

.option-dark-yellow .k-radio:checked+.k-radio-label:before {
    border-color: var(--dark-yellow, #7A7A00);
}

.option-dark-yellow .k-radio:focus+.k-radio-label:before,
.option-dark-yellow .k-radio:hover+.k-radio-label:before {
    box-shadow: 0 0 5px 0 var(--dark-yellow, #7A7A00);
    border-color: var(--dark-yellow, #7A7A00);
}

/* green */

.option-green .k-radio-label:after,
.option-green .k-radio-label:before,
.option-green .k-radio:checked+.k-radio-label:after {
    background: var(--green, #66B032);
    border-color: var(--green, #66B032);
}

.option-green .k-radio:checked+.k-radio-label:before {
    border-color: var(--green, #66B032);
}

.option-green .k-radio:focus+.k-radio-label::before,
.option-green .k-radio:hover+.k-radio-label::before {
    box-shadow: 0 0 5px 0 var(--green, #66B032);
    border-color: var(--green, #66B032);
}

/* light-green */

.option-light-green .k-radio-label:after,
.option-light-green .k-radio-label:before,
.option-light-green .k-radio:checked+.k-radio-label:after {
    background: var(--light-green, #B7FF85);
    border-color: var(--light-green, #B7FF85);
}

.option-light-green .k-radio:checked+.k-radio-label:before {
    border-color: var(--light-green, #B7FF85);
}

.option-light-green .k-radio:focus+.k-radio-label:before,
.option-light-green .k-radio:hover+.k-radio-label:before {
    box-shadow: 0 0 5px 0 var(--light-green, #B7FF85);
    border-color: var(--light-green, #B7FF85);
}

/* dark-green */

.option-dark-green .k-radio-label:after,
.option-dark-green .k-radio-label:before,
.option-dark-green .k-radio:checked+.k-radio-label:after {
    background: var(--dark-green, #337A00);
    border-color: var(--dark-green, #337A00);
}

.option-dark-green .k-radio:checked+.k-radio-label:before {
    border-color: var(--dark-green, #337A00);
}

.option-dark-green .k-radio:focus+.k-radio-label:before,
.option-dark-green .k-radio:hover+.k-radio-label:before {
    box-shadow: 0 0 5px 0 var(--dark-green, #337A00);
    border-color: var(--dark-green, #337A00);
}