yyzone/src/assets/styles/components/radio.less

yyzone vue components and utils

@prefixRadioCls: ~"@{yy-css-prefix}radio";
@prefixRadioGroupCls: ~"@{prefixRadioCls}-group";
@prefixRadioInnerCls: ~"@{prefixRadioCls}-inner";
@prefixRadioGroupButtonCls: ~"@{prefixRadioGroupCls}-button";

.@{prefixRadioCls}-wrapper+span,
.@{prefixRadioCls}+span {
    vertical-align: middle;

    .@{prefixRadioCls}-group-vertical & {
        vertical-align: unset;
    }
}

.@{prefixRadioCls} {
    display: inline-block;
    white-space: nowrap;
    position: relative;
    line-height: 1;
    vertical-align: middle;
    cursor: pointer;

    &-inner {
        display: inline-block;
        box-sizing: border-box;
        .square(14px);
        position: relative;
        top: 0;
        left: 0;
        background-color: @yy-background-component;
        border: 1px solid @yy-radio-border;
        border-radius: 50%;
        transition: all @yy-transition-time @yy-ease-in-out;

        &:after {
            .square(8px);
            .center();
            border-radius: 50%;
            display: table;
            border-top: 0;
            border-left: 0;
            content: ' ';
            background-color: @yy-primary-color;
            opacity: 0;
            transition: all @yy-transition-time @yy-ease-in-out;
        }
    }

    &-input {
        position: absolute;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
        z-index: 1;
        opacity: 0;
        cursor: pointer;
    }

    .@{prefixRadioGroupCls}-vertical & {
        float: right;
        margin-top: 13px;
        margin-right: 0;
    }
}

// 选中状态 
.@{prefixRadioCls}-checked {
    .@{prefixRadioInnerCls} {
        border-color: @yy-radio-border;

        &:after {
            opacity: 1;
            transition: all @yy-transition-time @yy-ease-in-out;
        }
    }
}

// 禁止状态
.@{prefixRadioCls}-disabled {
    .cursor(not-allowed);

    .@{prefixRadioCls}-input {
        .cursor(not-allowed);
    }

    .@{prefixRadioInnerCls} {
        border-color: @yy-border-color-disabled;
        background-color: @yy-background-color-disabled;

        &:after {
            background-color: @yy-btn-disable-color;
        }
    }
}

// 按钮样式 
@yy-radio-btn-size: 32px;
.@{prefixRadioGroupButtonCls} {
    font-size: 0;

    -webkit-text-size-adjust: none;

    .@{prefixRadioCls} {
        width: 0;
        margin-right: 0;
    }

    .@{prefixRadioCls}-wrapper {
        position: relative;
        display: inline-block;
        box-sizing: border-box;
        height: @yy-input-height-base;
        line-height: @yy-input-height-base;
        background-color: @yy-btn-default-bg;
        margin: 0;
        padding: 0 16px - 1px;
        font-size: @yy-font-size-small;
        color: @yy-text-primary-color;
        transition: all @yy-transition-time ease-in-out;
        cursor: pointer;
        border-left: 0;
        margin-right: 1px;

        >span {
            margin-left: 0;
            vertical-align: unset;
        }

        &:first-child {
            border-radius: @yy-btn-border-radius 0 0 @yy-btn-border-radius;
        }

        &:last-child {
            margin-right: 0;
            border-radius: 0 @yy-btn-border-radius @yy-btn-border-radius 0;
        }

        &:first-child:last-child {
            border-radius: @yy-btn-border-radius;
        }

        &:hover {
            background-color: shade(@yy-btn-default-bg, 10%);
        }

        .@{prefixRadioCls}-inner,
        input {
            opacity: 0;
            width: 0;
            height: 0;
        }

        &-checked {
            color: @yy-primary-color;
            background-color: fade(@yy-primary-color, 10%);
            z-index: 1;

            &:hover {
                background-color: fade(@yy-primary-color, 10%);
                color: tint(@yy-primary-color, 20%);
            }

            &:active {
                color: tint(@yy-primary-color, 20%);
            }
        }

        &-disabled {
            background-color: @yy-background-color-base;
            .cursor(not-allowed);
            color: @yy-text-disabled-color ;

            &:hover {
                background-color: @yy-background-color-base;
                color: @yy-text-disabled-color ;
            }
        }

        &-disabled.@{prefixRadioCls}-wrapper-checked {
            color: @yy-text-disabled-color ;
            background-color: @yy-background-color-base;
            box-shadow: none !important;
        }
    }

    &.@{prefixRadioGroupCls}-large .@{prefixRadioCls}-wrapper {
        height: @yy-input-height-large;
        line-height: @yy-input-height-large;
    }
    &.@{prefixRadioGroupCls}-small .@{prefixRadioCls}-wrapper {
        height: @yy-input-height-small ;
        line-height: @yy-input-height-small ;
    }
}

.@{prefixRadioGroupCls} {
    font-size: 0;

    &-vertical &-item{
        display: block;
        height: 40px;
        line-height: 40px;
        padding: 0 10px;
        margin-right: 0;
        .clearfix();
        &:hover {
            background-color: @yy-select-hover-bg;
        }
    }
    

    &-large {
        & .@{prefixRadioCls}-wrapper {
            font-size: @yy-font-size-base;
        }
        & .@{prefixRadioInnerCls} {
            .square(16px);
            &:after {
                .square(10px);
            }
        }
    }
    &-small{
        & .@{prefixRadioInnerCls} {
            .square(12px);
            &:after {
                .square(6px);
            }
            
        }
    }
}

// 普通状态
.@{prefixRadioCls}-wrapper {
    font-size: @yy-font-size-small;
    vertical-align: middle;
    display: inline-block;
    position: relative;
    white-space: nowrap;
    margin-right: 10px;
    cursor: pointer;
    color: @yy-text-primary-color;

    &-disabled {
        .cursor(not-allowed);
    }

    &-large {
        font-size: @yy-font-size-base;
    }

    &-large {
        & .@{prefixRadioInnerCls} {
            .square(16px);
            &:after {
                .square(10px);
            }
        }
    }

    &-small{
        font-size: 12px;
        & .@{prefixRadioInnerCls} {
            .square(12px);
            &:after {
                .square(6px);
            }
        }
    }
}