<commit_before>/*!
 * FORMS
 * =====
 *
 * This file contains all needs for forms, inputs, labels...
 */

input[type=text]
input[type=password]
    background-color grey-01
<commit_msg>Add checkbox/radio styles<commit_after>/*!
 * FORMS
 * =====
 *
 * This file contains all needs for forms, inputs, labels...
 */

checkbox-size = em(20px)

$checkbox

    input[type=radio]
    input[type=checkbox]
        hide()

    label
        position    relative
        left-padded checkbox-size
        cursor      pointer

        &::before
        &::after
            content    ''
            position   absolute
            left       0
            top        0
            box-sizing border-box
            width      checkbox-size
            height     checkbox-size

        &::before
            transition box-shadow 350ms cubic-bezier(0, 0.89, 0.44, 1)

        &::after
            transition-duration .2s
            transition-property opacity, transform


input[type=text]
input[type=password]
    background-color grey-01


[data-input=radio]
    @extend $checkbox

    label::before
        border-radius 50%
        border        2px solid grey-04
        box-shadow    inset 0 0 0 checkbox-size transparent

    input[type=radio]:checked + label::before
        box-shadow inset 0 0 0 3px grey-01, inset 0 0 0 checkbox-size blue


[data-input=checkbox]
    @extend $checkbox

    label
        &::before
        &::after
            border-radius 2px

        &::before
            box-shadow inset 0 0 0 2px grey-02

            &:hover
                box-shadow inset 0 0 0 2px blue

        &::after
            background-image: url("data:image/svg+xml;charset=utf8,%3Csvg width='20' height='20' viewBox='0 0 20 20' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M3 10.019l4.523 4.523 9.541-9.541' stroke='%23fff' stroke-width='2' fill='none'/%3E%3C/svg%3E");

    input[type=checkbox]
        &:checked
            & + label::before
                box-shadow inset 0 0 0 checkbox-size blue

            & + label::after
                opacity   1
                transform scale(1)

        &:not(:checked) + label::after
            opacity   0
            transform scale(0)

{'fraction_non_alphanumeric': 0.110050022737608, 'fraction_numerical': 0.04638472032742155, 'mean_word_length': 1.75, 'pattern_counts': {'":': 0, '<': 3, '<?xml version=': 0, '>': 3, 'https://': 0, 'lorem ipsum': 0, 'www.': 1, 'xml': 2}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '2867046', 'n_tokens_mistral': 736, 'n_tokens_neox': 636, 'n_words': 168}