iot-ui/ISwitch/switch.less

基于快应用的IoT组件库

.root-box {
    width: @SwitchWidth + 0px;
    height: @SwitchHeight + 0px;
}

stack {
    align-items: center;
}

.box {
    width: 100%;
    height: 100%;
    border-radius: @SwitchHeight + 0px;
}

.switch-on {
    background-color: @SwitchOnColor;
}

.switch-off {
    background-color: @SwitchOffColor;
}

.switch-disabled-on {
    background-color: @SwitchDisabledOnColor;
}

.switch-disabled-off {
    background-color: @SwitchDisabledOffColor;
}

.circle-box {
    padding-left: @SwitchPadding + 0px;
    padding-right: @SwitchPadding + 0px;
    width: 100%;
}

.circel-checked {
    animation-name: checked;
    animation-duration: 100ms;
    animation-iteration-count: 1;
    transform: translateX(@SwitchCircleTranslateX);
}

.circel-dischecked {
    animation-name: dischecked;
    animation-duration: 100ms;
    animation-iteration-count: 1;
    transform: translateX(0);
}

.circle {
    width: @SwitchCircleSize + 0px;
    height: @SwitchCircleSize + 0px;
    border-radius: @SwitchCircleSize + 0px;
    background-color: @SwitchCircleColor;
}

@keyframes checked {
    0% {
        transform: translateX(0);
    }
    100% {
        transform: translateX(@SwitchCircleTranslateX);
    }
}

@keyframes dischecked {
    0% {
        transform: translateX(@SwitchCircleTranslateX);
    }
    100% {
        transform: translateX(0);
    }
}