react-jam-ui/components/Checkbox/styles.styl

React JAM UI components

.checkbox {
    font-weight: 400;
    position: relative;
    
    input {
        position: absolute;
        visibility: hidden;

        &:checked + label {
            &:before {
                background-color: rgba(27, 113, 241, 1);
                border-color: rgba(27, 113, 241, 1);
                background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB3aWR0aD0iMTBweCIgaGVpZ2h0PSI4cHgiIHZpZXdCb3g9IjAgMCAxMCA4IiA+PHBhdGggZmlsbC1ydWxlPSJldmVub2RkIiAgZmlsbD0icmdiKDI1NSwgMjU1LCAyNTUpIiBkPSJNMy45OTgsNS40NTkgTDguODY2LC0wLjAwMSBMOS45OTYsMS4yNjggTDMuOTk4LDcuOTk3IEwtMC4wMDEsNC4yNjggTDEuMTMxLDIuOTk4IEwzLjk5OCw1LjQ1OSBaIi8+PC9zdmc+");
                background-position: 50% 50%;
                background-repeat: no-repeat;
            }
        }
    }
    label {
        padding: 0 0 0 28px;
        margin: 0;
        min-height: 28px;
        font-weight: 400;

        &:before {
            height: 28px;
            width: 28px;
            background-color: #FFFFFF;
            border: 2px solid rgba(183, 185, 188, 1);
            border-radius: 28px;
            content: "";
            display: block;
            position: absolute;
            left: 0;
            top: 0;
            cursor: pointer;
            transition: background-color 0.15s, box-shadow 0.15s, border 0.15s;
        }
    }
}