traxxx-web/components/form/checkbox.vue

<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 setup>
const uid = String(Math.random()).slice(2);

defineProps({
	checked: {
		type: Boolean,
		default: false,
	},
	label: {
		type: String,
		default: null,
	},
});

defineEmits(['change']);
</script>

<style scoped>
.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(--glass-weak-30);
	border-radius: .25rem;
    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-container.minus .check::after {
	border-left: none;
	transform: scaleX(0);
}

.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-container.minus .check-checkbox:checked + .check {
    background: var(--error);

	&::after {
		transform: scaleX(1);
	}
}

.check-label {
	overflow: hidden;
	text-transform: capitalize;
	text-overflow: ellipsis;
	margin: 0 .5rem 0 0;
}
</style>