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

UI Component for chief editor

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

@normalCircleColor: @color-neutral6;
@disableCircleColor: @color-neutral4;
@disableSelectCircleColor: @color-primary3;
@CommonTextColor: @color-text-grey1;
@disableTextColor: @color-text-grey4;
.@{prefixCls}-radio {
    display: inline-flex;
    align-items: center;
    white-space: nowrap;
    color: @CommonTextColor;
    cursor: pointer;
    vertical-align: middle;
    font-size: 12px;
    height: @component-height;

    &-circle {
        display: inline-block;
        border-radius: 50%;
        border: 1px solid @normalCircleColor;
        margin-right: 8px;
        width: 16px;
        height: 16px;
        .transition();

        &::after {
            content: '';
            display: block;
            width: 8px;
            height: 8px;
            margin: 3px;
            border-radius: 50%;
            .transition();
            .transform(scale(0));
        }
    }

    &-checked {
        .@{prefixCls}-radio-circle {
            .motion-active-border();

            &::after {
                .motion-active-bg();
                .transform(scale(1));
            }
        }
    }

    &:hover {
        .@{prefixCls}-radio-circle {
            .motion-ready-border();

            &::after {
                .motion-ready-bg();
            }
        }
    }

    &:active {
        .@{prefixCls}-radio-circle {
            .motion-processing-border();
            .motion-stroked-hint();

            &::after {
                .motion-processing-bg();
            }
        }
    }

    &:not(:last-child) {
        margin-right: 16px;
    }

    &:focus {
        .@{prefixCls}-radio-circle {
            .motion-ready-border();
            .motion-stroked-hint();
        }
    }

    &-disabled {
        color: @disableTextColor;
        cursor: not-allowed;

        &:hover {
            .@{prefixCls}-radio-circle {
                border-color: @disableCircleColor;
            }
        }

        .@{prefixCls}-radio-circle {
            border-color: @disableCircleColor;
        }

        &.@{prefixCls}-radio-checked {
            .@{prefixCls}-radio-circle {
                border-color: @disableSelectCircleColor;

                &::after {
                    background: @disableSelectCircleColor;
                }
            }
        }
    }
}