horarios-v2/src/components/v-checkbox.vue

<template lang="pug">
    label.container {{ txt }}
        input(type="checkbox" :checked="checked" @input="$emit('change', $event.target.checked)")
        span.checkmark
    
    //
</template>

<script lang="coffee">

    export default
        name: "v-checkbox"
        model:
            prop: "checked"
            event: "change"
        props:
            txt:
                type: String
                required: true
            checked:
                type: Boolean
                required: true
    
#
</script>

<style scoped lang="sass">


    /* Customize the label (the container) */
    .container
        display: block
        position: relative
        padding-left: 35px
        cursor: pointer
        font-size: 1rem
        -webkit-user-select: none
        -moz-user-select: none
        -ms-user-select: none
        user-select: none
        color: var(--colorTexto)


    /* Hide the browser's default checkbox */
    .container input
        position: absolute
        opacity: 0
        cursor: pointer
        height: 0
        width: 0


    /* Create a custom checkbox */
    .checkmark
        position: absolute
        top: 0
        left: 0
        height: 25px
        width: 25px
        background-color: var(--colorTexto)
        transition: background-color 150ms
        border-radius: 50%


    /* On mouse-over, add a grey background color */
    // .container:hover input ~ .checkmark
        background-color: #ccc


    /* When the checkbox is checked, add a blue background */
    .container input:checked ~ .checkmark
        background-color: #64001d


    /* Create the checkmark/indicator (hidden when not checked) */
    .checkmark:after
        content: ""
        position: absolute
        display: none


    /* Show the checkmark when checked */
    .container input:checked ~ .checkmark:after
        display: block


    /* Style the checkmark/indicator */
    .container .checkmark:after
        left: 9px
        top: 5px
        width: 5px
        height: 10px
        border: solid white
        border-width: 0 3px 3px 0
        -webkit-transform: rotate(45deg)
        -ms-transform: rotate(45deg)
        transform: rotate(45deg)



    //
</style>