@chief-editor/ui/css/components/Switch/styles.less

UI Component for chief editor

@import "./var.less";
@import "./mixin.less";

.@{prefixCls}-switch {
    display: inline-block;
    box-sizing: border-box;
    cursor: pointer;
    color: @color-text-grey1;
    user-select: none;

    &-wrapper {
        display: inline-block;
        vertical-align: bottom;
        background: @color-neutral5;
        position: relative;
        text-align: right;
        .transition(ease-in-out, @motion-duration-b);
        min-width: 34px;
        height: 16px;
        line-height: 0px;
        border-radius: 25px;
        font-size: 12px;
        padding-left: 8px;

        &.@{prefixCls}-switch-wrapper-checked {
            padding-left: 8px;

            &::after {
                left: calc(100% - 15px);
            }
        }

        &-disabled {
            opacity: .5;
            cursor: not-allowed;
        }

        &::after {
            width: 14px;
            height: 14px;
            top: 1px;
            left: 1px;
            content: '';
            position: absolute;
            background: #fff;
            border-radius: 100%;
            // todo
            box-shadow: 0 2px 4px 0 rgba(65, 65, 65, 0.19);
            .transition(ease-in-out, @motion-duration-b);
        }

        &:active &::after {
            // todo
            box-shadow: 0 1px 2px rgba(65, 65, 65, 0.19);
            .transform(scale(0.92));
        }

        &-checked {
            color: @color-neutral1;
            text-align: left;
            .motion-active-bg();
        }
    }
}