react-candlestick/src/candlestick.css

This is a switch and stylish React component that create checkbox into toggle switch button.

/* ========================================================================
 * @author Edouard Tack <edouard@tackacoder.fr>
 * React Candlestick latest version
 * Licensed under MIT (https://github.com/EdouardTack/react-candlestick/blob/master/LICENSE)
 * ======================================================================== */
:root {
    --candlestick-bg-color: #F5F5F5;
    --candlestick-border-color: #E8E8E8;
    --candlestick-on-bg-color: #5CB85C;
    --candlestick-on-border-color: #B8E0B8;
    --candlestick-off-bg-color: #D9534F;
    --candlestick-off-border-color: #EDAEAB;
}

.candlestick-wrapper {
    position: relative;
    display: inline-block;
    width: 60px;
    height: auto;
}

.candlestick-wrapper .candlestick-bg.candlestick-disabled {
    cursor: not-allowed;
    opacity: 0.4;
}

.candlestick-wrapper .candlestick-bg.candlestick-readonly {
    cursor: not-allowed;
    opacity: 0.7;
}

/* !!! */
/* ! DEFAULT MODE ! */
/* !!! */
.candlestick-wrapper .candlestick-bg,
.candlestick-wrapper .candlestick-bg .candlestick-off:before,
.candlestick-wrapper .candlestick-bg .candlestick-on:after {
    background-color: var(--candlestick-bg-color);
    border: 2px solid var(--candlestick-border-color);
    height: 16px;
    border-radius: 15px;
}

.candlestick-wrapper .candlestick-bg.candlestick-bg-on,
.candlestick-wrapper .candlestick-bg.candlestick-bg-on .candlestick-off:before,
.candlestick-wrapper .candlestick-bg.candlestick-bg-on .candlestick-on:after {
    background-color: var(--candlestick-on-bg-color);
    border-color: var(--candlestick-on-border-color);
}

.candlestick-wrapper .candlestick-bg.candlestick-bg-off,
.candlestick-wrapper .candlestick-bg.candlestick-bg-off .candlestick-off:before,
.candlestick-wrapper .candlestick-bg.candlestick-bg-off .candlestick-on:after {
    background-color: var(--candlestick-off-bg-color);
    border-color: var(--candlestick-off-border-color);

}

.candlestick-wrapper .candlestick-bg .candlestick-toggle {
    position: absolute;
    z-index: 10;
    top: 50%;
    transform: translateX(-50%) translateY(-50%);
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background-color: var(--candlestick-bg-color);
    border: 1px solid var(--candlestick-border-color);
    box-shadow: 2px 2px 4px rgba(60, 60, 60, 0.75);
    transition: left 0.75s;
}

.candlestick-wrapper .candlestick-bg .candlestick-toggle.candlestick-position-neutral {
    left: 50%;
}

.candlestick-wrapper .candlestick-bg .candlestick-toggle.candlestick-position-on {
    left: 80%;
}

.candlestick-wrapper .candlestick-bg .candlestick-toggle.candlestick-position-off {
    left: 20%;
}

.candlestick-wrapper .candlestick-bg .candlestick-off,
.candlestick-wrapper .candlestick-bg .candlestick-neutral,
.candlestick-wrapper .candlestick-bg .candlestick-on {
    display: inline-block;
    vertical-align: middle;
    height: 16px;
    width: 18px;
}

.candlestick-wrapper .candlestick-bg:not(.candlestick-readonly):not(.candlestick-disabled) .candlestick-off,
.candlestick-wrapper .candlestick-bg:not(.candlestick-readonly):not(.candlestick-disabled) .candlestick-neutral,
.candlestick-wrapper .candlestick-bg:not(.candlestick-readonly):not(.candlestick-disabled) .candlestick-on {
    cursor: pointer;
}