acud/es/checkbox/style/mixin.less

acg react 组件库

@import '../../style/mixins/index';

.acudCheckboxFn(@checkbox-prefix-cls: ~'@{acud-prefix}-checkbox') {
    @checkbox-inner-prefix-cls: ~'@{checkbox-prefix-cls}-inner';
    // 一般状态
    .@{checkbox-prefix-cls} {
        .reset-component();
        display: flex;
        position: relative;
        line-height: 1;
        top: 0;
        white-space: nowrap;
        outline: none;
        cursor: pointer;

        .@{checkbox-prefix-cls}-wrapper:hover &-inner,
        &:hover &-inner {
        // &-input:focus + &-inner {
            border-color: @blue-base;
        }
        &:active &-inner {
            border-color: ~'@{@{checkbox-default-p}-click-border-color}';
        }

        &:hover::after,
        .@{checkbox-prefix-cls}-wrapper:hover &::after {
            visibility: visible;
        }

        &-inner {
            position: relative;
            display: inline-flex;
            width: @checkbox-size;
            height: @checkbox-size;
            direction: ltr;
            background-color: ~'@{@{checkbox-default-p}-default-background-color}';
            border: @checkbox-border-width @border-style-base ~'@{@{checkbox-default-p}-default-border-color}';
            border-radius: @border-radius-base;
            border-collapse: separate;
            border-radius: @R2;
            // background-color: #fff;
        }

        &-input {
            position: absolute;
            top: 0;
            right: 0;
            bottom: 0;
            left: 0;
            z-index: 1;
            width: @P * 4;
            height: @P * 4;
            cursor: pointer;
            opacity: 0;
        }
    }

    .@{checkbox-prefix-cls}-checked {
        .@{checkbox-inner-prefix-cls} {
            background-color: ~'@{@{checkbox-selected-p}-default-background-color}';
            border-color: ~'@{@{checkbox-selected-p}-default-border-color}';
            .checkbox-check-icon {
                color: ~'@{@{checkbox-selected-tp}-default-color}';
                width: 14px;
                height: 14px;
            }
        }
        &:hover {
            .@{checkbox-inner-prefix-cls} {
                background-color: ~'@{@{checkbox-selected-p}-hover-background-color}';
                border-color: ~'@{@{checkbox-selected-p}-hover-border-color}';
                .checkbox-check-icon {
                    color: ~'@{@{checkbox-selected-tp}-hover-color}';
                    width: 14px;
                    height: 14px;
                }
            }
        }
        &:active {
            .@{checkbox-inner-prefix-cls} {
                background-color: ~'@{@{checkbox-selected-p}-click-background-color}';
                border-color: ~'@{@{checkbox-selected-p}-click-border-color}';
                .checkbox-check-icon {
                    color: ~'@{@{checkbox-selected-tp}-click-color}';
                    width: 14px;
                    height: 14px;
                }
            }
        }
    }

    .@{checkbox-prefix-cls}.@{checkbox-prefix-cls}-checked {
        & + span {
            color: ~'@{@{checkbox-text-default-tp}-click-color}';
            &:hover {
                color: ~'@{@{checkbox-text-default-tp}-hover-color}';
            }
        }
    }

    .@{checkbox-prefix-cls}.@{checkbox-prefix-cls}-disabled {
        cursor: not-allowed;

        &.@{checkbox-prefix-cls}-checked {
            .@{checkbox-inner-prefix-cls} {
                background-color:  @checkbox-checked-disabled-color;
                border-color: @checkbox-checked-disabled-color;
                .checkbox-check-icon {
                    color: @G11;
                }
            }
            .@{checkbox-inner-prefix-cls}::after {
                border-color: @checkbox-checked-disabled-color;
                animation-name: none;
            }
        }

        .@{checkbox-prefix-cls}-input {
            cursor: not-allowed;
        }

        .@{checkbox-inner-prefix-cls} {
            background-color: ~'@{@{checkbox-default-p}-disabled-background-color}';
            border-color: ~'@{@{checkbox-default-p}-disabled-border-color}';
            .checkbox-check-icon {
                color: ~'@{@{checkbox-text-default-tp}-disabled-color}';
            }
        }

        & + span {
            color: ~'@{@{checkbox-text-default-tp}-disabled-color}';
            cursor: not-allowed;
            &:hover {
                color: ~'@{@{checkbox-text-default-tp}-disabled-color}';
            }
        }

        // Not show highlight border of checkbox when disabled
        &:hover::after,
        .@{checkbox-prefix-cls}-wrapper:hover &::after {
            visibility: hidden;
        }
    }

    .@{checkbox-prefix-cls}-wrapper {
        .reset-component();
        display: flex;
        align-items: center;
        line-height: unset;
        cursor: pointer;

        &::after {
            display: inline-block;
            width: 0;
            overflow: hidden;
            content: "\a0";
        }

        &.@{checkbox-prefix-cls}-wrapper-disabled {
            cursor: not-allowed;
        }

        & + & {
            margin-left: 8px;
        }
    }

    .@{checkbox-prefix-cls} + span {
        padding-right: 8px;
        padding-left: 8px;
        color:  ~'@{@{checkbox-text-default-tp}-default-color}';
        &:hover {
            color:  ~'@{@{checkbox-text-default-tp}-default-color}';
        }
    }

    .@{checkbox-prefix-cls}-group {
        .reset-component();
        display: inline-flex;
        vertical-align: middle;

        &-item {
            margin-right: @P * 4;
            &:last-child {
              margin-right: 0;
            }
        }
        &-item + &-item {
            margin-left: 0;
        }
    }

    // 半选状态
    .@{checkbox-prefix-cls}-indeterminate {
        .@{checkbox-inner-prefix-cls} {
            background-color: ~'@{@{checkbox-indeter-p}-default-background-color}';
            border-color: ~'@{@{checkbox-indeter-p}-default-border-color}';
        }
        .@{checkbox-inner-prefix-cls}::after {
            @indeterminate-width: @checkbox-size - 8px;
            @indeterminate-height: @checkbox-size - 8px;
            position: absolute;
            display: table;
            top: 50%;
            left: 50%;
            width: @indeterminate-width;
            height: @indeterminate-height;
            background-color: ~'@{@{checkbox-indeter-tp}-default-color}';
            border: 0;
            transform: translate(-50%, -50%) scale(1);
            opacity: 1;
            content: ' ';
        }

        &.@{checkbox-prefix-cls}-disabled .@{checkbox-inner-prefix-cls} {
            background-color: @G11;
            border-color: @checkbox-checked-disabled-color;
        }

        &.@{checkbox-prefix-cls}-disabled .@{checkbox-inner-prefix-cls}::after {
            background-color: @checkbox-checked-disabled-color;
        }
        &:active {
            .@{checkbox-inner-prefix-cls} {
                background-color: @G11;
                border-color: ~'@{@{checkbox-selected-p}-click-border-color}';
            }
        }
        &:hover {
            .@{checkbox-inner-prefix-cls} {
                background-color:  @G11;
                border-color: @checkbox-checked-disabled-color;
            }
            .@{checkbox-inner-prefix-cls}::after {
                background-color: @checkbox-checked-disabled-color;
            }
        }
    }
}

@keyframes acudCheckboxEffect {
    0% {
        transform: scale(1);
        opacity: 0.5;
    }
    100% {
        transform: scale(1.6);
        opacity: 0;
    }
}

.acudCheckboxButtonFn(@checkbox-button-prefix-cls: ~'@{acud-prefix}-checkbox-button') {
    .@{checkbox-button-prefix-cls} {
        min-width: 80px;
        text-align: center;
        height: 8 * @P;
        line-height: 8 * @P - 2;
        padding-left: 3 * @P;
        padding-right: 3 * @P;
        font-size: @T2;
        border: 1px solid;
        border-radius: @R3;
        cursor: pointer;
        position: relative;
        display: inline-block;
        .@{checkbox-button-prefix-cls}-checked-flag {
            border-top-left-radius: 2px;
        }
        .basic-config(@checkbox-button-default-tp, @checkbox-button-default-p);
        &-checked {
            .basic-config(@checkbox-button-click-tp, @checkbox-button-click-p);
            background-color: @B0;
            .@{checkbox-button-prefix-cls}-checked-flag {
                position: absolute;
                top: 0;
                left: 0;
                width: 0;
                height: 0;
                border-top: 7px solid ~'@{@{checkbox-flag-click-p}-default-background-color}';
                border-left: 7px solid ~'@{@{checkbox-flag-click-p}-default-background-color}';
                border-right: 7px solid transparent;
                border-bottom: 7px solid transparent;
            }
            &:hover {
                border-color: @B5;
                background-color: @B0;
                .@{checkbox-button-prefix-cls}-checked-flag {
                    border-top: 7px solid ~'@{@{checkbox-flag-click-p}-hover-background-color}';
                    border-left: 7px solid ~'@{@{checkbox-flag-click-p}-hover-background-color}';
                }
            }
            &:active {
                background-color: @B0;
                border-color: @B7;
                .@{checkbox-button-prefix-cls}-checked-flag {
                    border-top: 7px solid ~'@{@{checkbox-flag-click-p}-click-background-color}';
                    border-left: 7px solid ~'@{@{checkbox-flag-click-p}-click-background-color}';
                }
            }
            .@{checkbox-button-prefix-cls}-checked-icon {
                position: absolute;
                top: 0;
                left: 0;
                line-height: 14px;
                font-size: @T2;
                color: ~'@{@{checkbox-flag-click-tp}-default-color}';
                transform: translate(-1px, -2px) scale(.6);
            }
        }
        &-checked.@{checkbox-button-prefix-cls}-disabled {
            background-color: @G11;
            border-color: @checkbox-checked-disabled-color;
            color: @checkbox-checked-disabled-color;
            .@{checkbox-button-prefix-cls}-checked-flag {
                border-top: 7px solid @checkbox-checked-disabled-color;
                border-left: 7px solid @checkbox-checked-disabled-color;
            }
            &:hover {
                background-color: @G11;
                border-color:  @checkbox-checked-disabled-color;
                color:  @checkbox-checked-disabled-color;
                .@{checkbox-button-prefix-cls}-checked-flag {
                    border-top: 7px solid @checkbox-checked-disabled-color;
                    border-left: 7px solid @checkbox-checked-disabled-color;
                }
            }
        }
        &-disabled {
            cursor: not-allowed;
            .@{checkbox-button-prefix-cls}-checked-flag {
                border-top: 7px solid ~'@{@{checkbox-flag-click-p}-disabled-background-color}';
                border-left: 7px solid ~'@{@{checkbox-flag-click-p}-disabled-background-color}';
            }
            &:hover {
                .@{checkbox-button-prefix-cls}-checked-flag {
                    border-top: 7px solid ~'@{@{checkbox-flag-click-p}-disabled-background-color}';
                    border-left: 7px solid ~'@{@{checkbox-flag-click-p}-disabled-background-color}';
                }
            }
            .@{checkbox-button-prefix-cls}-checked-icon {
                color: ~'@{@{checkbox-flag-click-tp}-disabled-color}';
            }
        }
        &-group-item {
            border-radius: 0;
            border-width: 1px 0;
            .@{checkbox-button-prefix-cls}-checked-flag {
                border-top-left-radius: 0;
            }
            &::before {
                box-sizing: content-box;
                content: "";
                display: block;
                height: @P * 8;
                left: -1px;
                position: absolute;
                top: -1px;
                width: 1px;
                background-color: ~'@{@{checkbox-button-default-p}-default-border-color}';
                z-index: 0;
            }
            &::after {
                box-sizing: content-box;
                content: "";
                display: block;
                height: @P * 8;
                right: 0;
                position: absolute;
                top: -1px;
                width: 1px;
                background-color: ~'@{@{checkbox-button-default-p}-default-border-color}';
                z-index: 0;
            }
            &:first-child {
                border-left-width: 1px;
                border-top-left-radius: @R3;
                border-bottom-left-radius: @R3;
                &&::before {
                    display: none;
                }
                .@{checkbox-button-prefix-cls}-checked-flag {
                    border-top-left-radius: 2px;
                }
            }
            &:last-child {
                border-right-width: 1px;
                border-top-right-radius: @R3;
                border-bottom-right-radius: @R3;
                &&::after {
                    display: none;
                }
            }
            &:hover::before {
                background-color: ~'@{@{checkbox-button-default-p}-hover-border-color}';
                z-index: 4;
            }
            &:hover::after {
                background-color: ~'@{@{checkbox-button-default-p}-hover-border-color}';
                z-index: 4;
            }
            &.@{checkbox-button-prefix-cls}-checked {
                &::before {
                    background-color: ~'@{@{checkbox-button-click-p}-default-border-color}';
                    z-index: 3;
                }
                &::after {
                    background-color: ~'@{@{checkbox-button-click-p}-default-border-color}';
                    z-index: 3;
                }
                &:hover::before {
                    background-color: @B5;
                    z-index: 5;
                }
                &:hover::after {
                    background-color: @B5;
                    z-index: 5;
                }
                &:active::before {
                    background-color: @B7;
                    z-index: 5;
                }
                &:active::after {
                    background-color: @B7;
                    z-index: 5;
                }
                &.@{checkbox-button-prefix-cls}-disabled {
                    &::before {
                        background-color: @checkbox-checked-disabled-color;
                        z-index: 2;
                    }
                    &::after {
                        background-color: @checkbox-checked-disabled-color;
                        z-index: 2;
                    }
                }
            }
            &.@{checkbox-button-prefix-cls}-disabled {
                &::before {
                    background-color: ~'@{@{checkbox-button-default-p}-disabled-border-color}';
                    z-index: 1;
                }
                &::after {
                    background-color: ~'@{@{checkbox-button-default-p}-disabled-border-color}';
                    z-index: 1;
                }
            }
        }
    }
    @media (-webkit-device-pixel-ratio: 1.5) {
        .@{checkbox-button-prefix-cls} {
            &-group-item {
                &::before {
                    width: 0.5px;
                    top: -0.5px;
                    left: -0.5px;
                }
                &::after {
                    width: 0.5px;
                    top: -0.5px;
                    right: 0;
                }
            }
        }
    }
}