scratch-www/src/components/forms/checkbox.scss

@import "../../colors";
@import "../../frameless";

.row {
    .checkbox {
        label {
            font-weight: 300;
        }

        input {
            &[type=checkbox] {
                display: block;
                float: left;
                margin-right: 1rem;
                border: 1px solid $active-dark-gray;
                border-radius: 3px;
                width: 1.25rem;
                height: 1.25rem;
                appearance: none;

                &:checked,
                &:focus {
                    transition: all .5s ease;
                    outline: none;
                    box-shadow: 0 0 0 .25rem $active-dark-gray;
                }

                &:checked {
                    background-color: $ui-blue;
                    text-align: center;
                    text-indent: .125rem;
                    line-height: 1.25rem;
                    font-size: .75rem;

                    &:after {
                        color: $type-white;
                        content: "\2714";
                    }
                }
            }
        }
    }
}