jb-checkbox/lib/jb-checkbox.css

checkbox web component

:host {
    cursor: pointer;
}
:host(:state(disabled)){
    cursor: not-allowed;
}

.jb-checkbox-web-component {
    display: grid;
    grid-template-columns: 2rem max-content;
    grid-template-rows: max-content max-content;
    grid-template-areas: "check label" "check message";
    justify-content: center;
    gap: 0 0.5rem;
    align-items: center;
    justify-content: start;


    .label-wrapper {
        grid-area: label;
        display: inline-block;
        font-weight: 400;
        color: var(--label-color);
    }

    &:has(.message-box:empty) {
        grid-template-areas: "check label" "check label";
    }

    .message-box {
        grid-area: message;
        font-size: var(--jb-checkbox-message-font-size, 0.7rem);
        color: var(--message-color);
        display: var(--jb-checkbox-message-box-display, block);

        &:empty {
            padding: 0;
            display: none;
        }
    }

    .svg-wrapper {
        width: 2rem;
        height: 2rem;
        grid-area: check;

        .check-box-svg {
            width: 100%;
            height: 100%;
            &.--active {
                .checkmark__cube {
                    transition: all 0.3s ease-in-out;
                    rx: 58px;
                    ry: 58px;
                    stroke: transparent;

                }

                .checkmark__check {
                    animation: stroke .3s cubic-bezier(0.650, 0.000, 0.450, 1.000) .1s forwards;
                }
            }

            .checkmark__cube {
                fill: var(--check-bg-color);
                transition: all 0.3s ease-in-out;
                stroke: var(--check-border-color);
                stroke-width: 1px;
            }

            .checkmark__check {
                stroke-width: 5;
                stroke: var(--check-mark-color);
                transform-origin: 50% 50%;
                stroke-dasharray: 48;
                stroke-dashoffset: 48;

            }
        }
    }
}

@keyframes stroke {
    100% {
        stroke-dashoffset: 0;
    }
}