<template> <label class="check-container noselect"> <span v-if="label" class="check-label" >{{ label }}</span> <input v-show="false" :id="`checkbox-${uid}`" :checked="checked" type="checkbox" class="check-checkbox" @change="$emit('change', $event.target.checked)" > <label :for="`checkbox-${uid}`" class="check" /> </label> </template> <script> export default { props: { checked: { type: Boolean, default: false, }, label: { type: String, default: null, }, }, emits: ['change'], }; </script> <style lang="scss" scoped> @import 'breakpoints'; .check-container { display: flex; justify-content: space-between; cursor: pointer; } .check { width: 1.25rem; height: 1.25rem; display: flex; align-items: center; justify-content: center; flex-shrink: 0; position: relative; background-color: var(--shadow-hint); cursor: pointer; transition: background .15s ease; &::after { content: ''; width: .5rem; height: .3rem; border: solid 2px var(--text-light); border-top: none; border-right: none; margin: -.2rem 0 0 0; transform: rotateZ(-45deg) scaleX(0); transition: transform .15s ease; } } .check-cross .check::before { content: ''; width: 100%; height: 100%; position: absolute; background: url('/img/icons/cross3.svg') no-repeat center/80%; opacity: .15; transition: transform .1s ease; } .check-checkbox:checked + .check { background: var(--primary); &::after { transform: rotateZ(-45deg) scaleX(1); } &::before { transform: scaleX(0); } } .check-label { overflow: hidden; text-transform: capitalize; text-overflow: ellipsis; margin: 0 .5rem 0 0; } </style>