vue-easytable/packages/style/ve-checkbox.less

Vue table component

.ve-checkbox {
    cursor: pointer;
    font-size: 12px;
    display: inline-block;
    position: relative;
    vertical-align: middle;

    &:hover {
        .ve-checkbox-inner {
            border-color: @ve-checkbox-checked-border-color;
        }
    }

    &-content {
        white-space: nowrap;
        cursor: pointer;
        outline: none;
        display: inline-block;
        line-height: 1;
        position: relative;
        vertical-align: text-bottom;

        &:hover {
            .ve-checkbox-inner {
                border-color: @ve-checkbox-checked-border-color;
            }
        }

        // input
        .ve-checkbox-input {
            position: absolute;
            left: 0;
            z-index: 1;
            cursor: pointer;
            opacity: 0;
            filter: alpha(opacity=0);
            top: 0;
            bottom: 0;
            right: 0;

            &:focus {
                .ve-checkbox-inner {
                    border-color: @ve-checkbox-checked-border-color;
                }
            }
        }

        // checkbox 框
        .ve-checkbox-inner {
            position: relative;
            top: 0;
            left: 0;
            display: block;
            width: 16px;
            height: 16px;
            border: 1px solid #abbacc;
            border-radius: 2px;
            background-color: #fff;
            transition: all 0.3s;
            &:after {
                transform: rotate(45deg) scale(0);
                position: absolute;
                left: 4px;
                top: 2px;
                display: table;
                width: 6px;
                height: 9px;
                border: 2px solid #fff;
                border-top: 0;
                border-left: 0;
                content: " ";
                transition: all 0.1s cubic-bezier(0.71, -0.46, 0.88, 0.6);
            }
        }
    }

    // 选中时
    .ve-checkbox-checked {
        &:after {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            border-radius: 2px;
            border: 1px solid @ve-checkbox-checked-background-color;
            content: "";
            animation-fill-mode: both;
            visibility: hidden;
        }

        .ve-checkbox-inner {
            background-color: @ve-checkbox-checked-background-color;
            border-color: @ve-checkbox-checked-background-color;
            &:after {
                transform: rotate(45deg) scale(1);
                position: absolute;
                display: table;
                border: 2px solid #fff;
                border-top: 0;
                border-left: 0;
                content: " ";
                transition: all 0.2s cubic-bezier(0.12, 0.4, 0.29, 1.46) 0.1s;
            }
        }
    }

    // 半选状态
    .ve-checkbox-indeterminate {
        .ve-checkbox-inner {
            background-color: #fff;
            border-color: #d9d9d9;
            position: relative;
            top: 0;
            left: 0;
            direction: ltr;
            background-color: #fff;
            border: 1px solid #d9d9d9;
            border-radius: 2px;
            border-collapse: separate;
            transition: all 0.3s;
            &:after {
                top: 50%;
                left: 50%;
                width: 8px;
                height: 8px;
                background-color: @ve-checkbox-checked-border-color;
                border: 0;
                -webkit-transform: translate(-50%, -50%) scale(1);
                transform: translate(-50%, -50%) scale(1);
                opacity: 1;
                content: " ";
            }
            &:hover {
                border-color: @ve-checkbox-checked-border-color;
            }
        }

        &.ve-checkbox-disabled {
            .ve-checkbox-inner:after {
                border-color: rgba(0, 0, 0, 0.25);
            }
        }
    }

    // 禁用选择
    .ve-checkbox-disabled {
        cursor: not-allowed;
        // 禁用的选中
        &.ve-checkbox-checked {
            .ve-checkbox-inner:after {
                animation-name: none;
                border-color: rgba(0, 0, 0, 0.25);
            }
        }

        .ve-checkbox-input {
            cursor: not-allowed;
        }

        // 禁用状态的框
        .ve-checkbox-inner {
            color: rgba(0, 0, 0, 0.25);
            cursor: not-allowed;
            border-color: #d9d9d9 !important;
            background-color: #f7f7f7;
            &:after {
                animation-name: none;
                border-color: #f7f7f7;
            }
        }
    }
    // label
    &-label {
        margin: 0 6px 0 3px;
        width: 100%;
        color: @ve-checkbox-label-text-color !important;
    }
}