checkbox

全局变量 --indent-checkbox 改变label文字左内边距
这原本是用 text-indent 属性实现。但在Safari中使用 ::before 的元素不支持 text-indent，遂改用 padding-left 来实现。默认值是1.4em 

span.na-checkbox(style="--indent-checkbox: 2em; line-height: 2")
    input#hello.na-input(type="checkbox" title="world")
    label.na-checkbox-label(for="hello") world

## disabled 

div
    span.na-checkbox
        input#HTTP.na-input(type="checkbox" title="HTTP" disabled)
        label.na-checkbox-label(for="HTTP") HTTP
    span.na-checkbox(data-primary="success")
        input#HTTPS.na-input(type="checkbox" title="HTTPS" checked disabled)
        label.na-checkbox-label(for="HTTPS") HTTPS

## data-indeterminate

这个样式设计来自于 ui5 check-box 

span.na-checkbox(data-indeterminate)
    input#Superposition.na-input(
        type="checkbox"
        onchange=function(){
            this.parentElement.removeAttribute('data-indeterminate')
        }
        title="Superposition"
    )
    label.na-checkbox-label(for="Superposition") 半信半疑

注意：[data-indeterminate] 在 checked与否 的不同状态下 观感并不相同。

在这个示例里，初始没有选择，选择后清除了 [data-indeterminate]，但你可以不

## data-marker="-"

预设了另一个checked符号，使用 data-marker="-" 启用，代替原先的✔

它一般放在列表表头，用来描述只选中了一部分 

span.na-checkbox(data-marker="-")
    input#DashAsMark.na-input(
        type="checkbox"
        title="DashAsMark"
        checked
    )
    label.na-checkbox-label(for="DashAsMark") 部分选择

## custom style

marker钩号或破折号由 label::after 实现，可以自定义添加你需要的✔图形 

span.na-checkbox(
    data-marker="*"
    style={
    '--color-checkbox': 'var(--blue-6)',
    '--color-checkbox:disabled': 'var(--blue-2)',
    color: 'rgb(var(--blue-6))'
})
    input#BlueTIMBox.na-input(
        type="checkbox"
        title="BlueTIMBox"
        checked
        disabled
    )
    label.na-checkbox-label(for="BlueTIMBox") Tim

style(lang="stylus").
    .na-checkbox
        &[data-marker="*"]
            &>input:checked+^[0]-label::after
                content '*'
                font-size 18px
                color rgb(var(--white))

### hide label

label为空即可不显示，甚至李代桃僵 

label.na-form-item
    span 是否完成
    .na-input-wrapper
        span.na-checkbox(data-indeterminate)
            input.na-input(type="checkbox")
            span.na-checkbox-label

如果你只是需要label无法点击，只有单选框能被点击，可以不传入 [for]