acud/lib/switch/style/index.less

acg react 组件库

@import '../../style/themes/index';
@import '../../style/mixins/index';
@switch-prefix-cls: ~'@{acud-prefix}-switch';
@duration: 0.3s;
// switch 需要一个没有focus的auto-config
.switch-auto-config(@type, @property) {
    .property-setting(@type, 'default', @property);

    &:hover {
        .property-setting(@type, 'hover', @property);
    }

    &:active {
        .property-setting(@type, 'click', @property);
    }

    &[disabled] {
        &,
        &:hover,
        &:active {
            .property-setting(@type, 'disabled', @property);
        }
    }
}
.switch-basic-config(@tptype; @ptype) {
    .switch-auto-config(@tptype, color);
    .switch-auto-config(@ptype, background-color);
    .switch-auto-config(@ptype, border-color);
    .switch-auto-config(@ptype, box-shadow);
}
.@{switch-prefix-cls} {
    position: relative;
    display: inline-block;
    box-sizing: border-box;
    width: @switch-width;
    height: @switch-height;
    padding: 0;
    line-height: @switch-line-height;
    vertical-align: middle;
    .switch-basic-config(@switch-unchecked-tp, @switch-unchecked-p);
    border-style: solid;
    border-width: 1px;
    border-radius: (@switch-width / 2);
    cursor: pointer;
    transition: all @duration cubic-bezier(0.35, 0, 0.25, 1);

    &-inner {
        position: absolute;
        top: 0;
        left: @switch-inner-left;
        display: flex;
        align-items: center;
        height: 100%;
        font-size: @switch-font-size;
        .@{iconfont-css-prefix} {
            line-height: 0;
        }
    }

    &:after {
        position: absolute;
        top: 1px;
        left: 0.5 * @P;
        width: @switch-inner-width;
        height: @switch-inner-height;
        border-radius: (@switch-inner-width / 2) (@switch-inner-height / 2);
        background-color: @switch-handle-color;
        cursor: pointer;
        transition: left @duration cubic-bezier(0.35, 0, 0.25, 1);
        animation-name: switchOff;
        animation-duration: @duration;
        animation-timing-function: cubic-bezier(0.35, 0, 0.25, 1);
        content: " ";
    }

    &:active:after {
        width: 1.25 * @switch-inner-width;
        animation-name: switchOn;
    }
    &:focus {
        outline: none;
    }

    &-checked {
        border-style: solid;
        border-width: 1px;
        .switch-basic-config(@switch-checked-tp, @switch-checked-p);
        .@{switch-prefix-cls}-inner {
            left: @switch-inner-checked-left;
        }
        &:after {
            left: initial;
            right: 0.5 * @P;
        }
        &[disabled]{
            &:after {
                background-color: @switch-handle-color;
            }
            &.@{switch-prefix-cls}-loading {
                .@{switch-prefix-cls}-loading-icon {
                    color: @B2;
                }
            }
        }
        &.@{switch-prefix-cls}-loading {
            .@{switch-prefix-cls}-loading-icon {
                color: @B6;
                left: initial;
                right: 0.5 * @P;
            }
        }
    }
    &-loading {
        cursor: no-drop;
        &:after {
            cursor: no-drop;
            animation-name: none;
        }
        &:hover:after {
            width: @switch-inner-width;
            animation-name: none;
        }
        .@{switch-prefix-cls}-loading-icon {
            position: absolute;
            top: 1px;
            z-index: 99;
            color: @G7;
            left: 0.5 * @P;
        }
    }
    &-disabled {
        cursor: no-drop;
        &:after {
            cursor: no-drop;
            animation-name: none;
            background-color: @switch-handle-disabled-color;
        }
        &:hover:after {
            width: @switch-inner-width;
            animation-name: none;
        }
        .@{switch-prefix-cls}-loading-icon {
            color: @G9;
        }
    }

    &-label {
        display: inline-block;
        padding-left: 10px;
        font-size: 14px;
        line-height: 20px;
        white-space: normal;
        vertical-align: middle;
        user-select: text;
        pointer-events: none;
    }
}
@keyframes switchOn {
    0% {
        width: @switch-inner-width;
    }
    100% {
        width: 1.25 * @switch-inner-width;
    }
}

@keyframes switchOff {
    0% {
        transform: scale(1.1);
    }
    100% {
        transform: scale(1);
    }
}