mdb-ui-kit/less/_checkboxes.less

// main: material.less

// Sizes
@checkbox-size: 20px;

.checkbox {
    min-height: 24px; // clear the floating input if there is no label text
    position: relative;
    cursor: pointer;

    label {
        position: relative;
        padding-left: 30px;
    }

    input[type=checkbox] {
        opacity: 0;

        // Here are our placeholder
        // The Material Design skin occours right here ;-)
        &+ .check {
            left: 0;
            width: @checkbox-size;
            height: @checkbox-size;
            border-radius: 2px;
            border-width: 2px;
            border-style: solid;
            animation: checkbox-bg-off .25s linear forwards;

            &, &:after, &:before {
              position: absolute;
              content: " ";
            }

            &:after, &:before {
                top: 50%;
                left: 50%;
            }

            // Marker
            // The Checked Marker (✓);
            // I`ve used the after selector to prevent bloated code
            &:after {
                margin-left: -7px;
                margin-top: -6px;
                width: 14px;
                height: 8px;
                border-color: transparent;
                border-width: 0 0 2px 2px;
                border-style: solid;
                animation: checkbox-marker-off .2s linear forwards;
                transform: rotate(-45deg);
            }

            // Accessibility check
            // This is visible when you focus/click the input element
            &:before {
                margin-left: -1px;
                margin-top: -1px;
                width: 2px;
                height: 2px;
                border-radius: 50%;
                opacity: 0;
                transition: all .1s;
            }
        }
        // Disabled Status
        &:disabled + .check {
            cursor: not-allowed;
        }
        // Focus Status
        &:focus + .check {
            // Remember, this is the accessibility check
            &:before {
                height: 50px;
                margin-left: -25px;
                margin-top: -25px;
                width: 50px;
                opacity: .08;
            }
        }
        // Checked Status
        &:checked + .check {
            border-width: 10px;
            animation: checkbox-bg-on .1s linear forwards;
            // The ✓
            &:after {
                animation: checkbox-marker-on .15s linear forwards;
            }
        }
        // Checked & Focus Status
        &:checked:focus + .check {
            &:before {
                opacity: .2;
            }
        }
    }

    & + .check {
        margin-top: -5px; // Move up sibling radios or checkboxes for tighter spacing
    }

    // Make animate quickly when not hover
    &:not(:hover) input[type=checkbox] ~ .check {
        &, &:after {
            animation-duration: 1ms;
        }
    }

    // Variations
    .variations(~" .check", color, @success);

    &.checkbox-inline {
        margin-top: 0;
    }
}

.input-group-addon {
    .checkbox {
        margin: 0;
        padding: 0;
    }
}

// Default Theme
.checkbox {
    input[type="checkbox"] {
        & + .check {
            border-color: @lightbg-text;
            &:before {
                background-color: @lightbg-text;
            }
        }
        &:checked + .check {
            &:hover {
                border-color: @success;
            }
            &:after {
                border-color: @darkbg-text;
            }
        }
        &:disabled + .check {
            &, &:hover {
                border-color: lighten(@lightbg-text, 60%);
            }
        }
        &:checked:focus + .check {
            border-color: @success;
            &:before {
                background-color: lighten(@success, 35%);
            }
        }
    }
}

// Checkbox: Background OFF
@keyframes checkbox-bg-off {
    0% { border-width: 10px; }
    50% { border-width: 10px; }
    100% { border-width: 2px; }
}
// Checkbox: Background ON
@keyframes checkbox-bg-on {
    from { border-width: 2px; }
    to { border-width: 10px; }
}

/* Checkbox: Marker default/out */
@keyframes checkbox-marker-off {
    0% {
        border-width: 0 0 2px 2px;
        height: 8px;
        margin-left: -7px;
        margin-top: -6px;
        width: 14px;
    }
    40% {
        border-color: #fff;
        border-width: 0 0 2px 0;
        height: 0;
        margin-left: -4px;
        margin-top: -1px;
        width: 14px;
    }
    70% {
        border-color: #fff;
        border-width: 0 0 2px 0;
        height: 0;
        margin-left: 6px;
        margin-top: -5px;
        width: 0;
    }
    100% {
        border-color: #fff;
        border-width: 0;
        height: 0;
        width: 0;
    }
}

/* Checkbox: Marker in */
@keyframes checkbox-marker-on {
    0% {
        border-width: 0;
        height: 0;
        width: 0;
    }
    40% {
        border-width: 0;
        height: 0;
        width: 0;
    }
    70% {
        border-width: 0 0 0 2px;
        height: 8px;
        margin-left: -6px;
        margin-top: -2px;
        width: 0;
    }
    100% {
        border-width: 0 0 2px 2px;
        height: 8px;
        margin-left: -7px;
        margin-top: -6px;
        width: 14px;
    }
}