acud/lib/radio/style/index.less

acg react 组件库

/* stylelint-disable selector-pseudo-element-colon-notation */
/* stylelint-disable rule-empty-line-before */
@import '../../style/themes/index';
@import '../../style/mixins/index';
@import './mixin.less';

@radio-prefix-cls: ~'@{acud-prefix}-radio';
@radio-button-prefix-cls: ~'@{acud-prefix}-radio-button';
@radio-group-prefix-cls: ~'@{acud-prefix}-radio-group';
@outline-cls: ~'@{acud-prefix}-radio-outline';
@inner-cls: ~'@{acud-prefix}-radio-inner';

.@{radio-prefix-cls} {
    color: @radio-font-color;
    font-size: @radio-btn-font-size;
    font-weight: @radio-font-weight;
    margin-right: @margin-lg;

    .@{outline-cls} {
        margin-right: @margin-xs;
        border: @border-width-base @radio-border-style-base @radio-default-border-color;
        background-color: ~'@{@{radio-default-p}-default-background-color}';
        .circle(@radio-outline-circle);
        position: relative;
        vertical-align: middle;
        top: -1px;
    }
    .@{inner-cls} {
        .circle(@radio-inner-circle);
        .center();
    }
    &:hover {
        .@{outline-cls} {
            border-color: ~'@{@{radio-default-p}-hover-border-color}';
        }
    }
    &-content{
        display: inline-block;
        cursor: pointer;
        .@{radio-prefix-cls}-label{
            display: inline-block;
            vertical-align: top;
        }
    }
    // 选中
    &-checked {
        .@{outline-cls} {
            border-color: ~'@{@{radio-checked-p}-default-border-color}';
        }
        .@{inner-cls} {
            background-color: ~'@{@{radio-checked-tp}-default-color}';
        }
    }
    &-disabled,
    &-disabled:hover {
        cursor: not-allowed;
        .@{radio-prefix-cls}-content{
            cursor: not-allowed;
        }
        .@{outline-cls} {
            border-color: ~'@{@{radio-default-p}-disabled-border-color}';
            background-color: ~'@{@{radio-default-p}-disabled-background-color}';
        }
        .@{radio-prefix-cls}-label {
            color: @G6;
        }
    }
    &&-disabled&-checked {
        .@{outline-cls} {
            border-color: @radio-readonly-color;
            background-color: @G11;
        }
        .@{inner-cls} {
            background-color: @radio-readonly-color;
        }
        .@{radio-prefix-cls}-label {
            color: @G4;
        }
    }
    &:last-child {
        margin-right: 0;
    }
}

// radio-button
.@{radio-button-prefix-cls} {
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    text-align: center;
    font-size: @radio-btn-font-size;
    line-height: @radio-btn-height;
    height: @radio-btn-height;
    min-width: @radio-btn-width;
    padding: @radio-btn-padding;
    border: @border-width-base @radio-border-style-base;
    position: relative;

    .basic-config(@radio-button-default-tp, @radio-button-default-p);
    &[disabled] {
        cursor: not-allowed;
    }
    &-checked {
        .basic-config(@radio-button-checked-tp, @radio-button-checked-p);
    }
    span& {
        border-color: ~'@{@{radio-button-default-p}-default-border-color}';
    }
}

// radio-group
.@{radio-group-prefix-cls} {
    .@{radio-button-prefix-cls} {
        border-width: 1px 0;
        &:before {
            content: '';
            position: absolute;
            top: -1px;
            left: -1px;
            display: block;
            width: 1px;
            height: @height;
            background-color: ~'@{@{radio-button-default-p}-default-border-color}';
            z-index: 0;
        }
        &:after {
            content: '';
            position: absolute;
            top: -1px;
            right: 0;
            display: block;
            width: 1px;
            height: @height;
            background-color: ~'@{@{radio-button-default-p}-default-border-color}';
            z-index: 0;
        }
        &:first-child {
            border-left-width: 1px;
            border-top-left-radius: @radio-btn-border-radius;
            border-bottom-left-radius: @radio-btn-border-radius;
            &::before {
                display: none;
            }
        }
        &:last-child {
            border-right-width: 1px;
            border-top-right-radius: @radio-btn-border-radius;
            border-bottom-right-radius: @radio-btn-border-radius;
            &::after {
                display: none;
            }
        }
        &.@{radio-button-prefix-cls}-checked {
            border-color: ~'@{@{radio-button-checked-p}-default-border-color}';
            // background-color: @p37-click-background-color;
            &::before,
            &::after {
                background-color: ~'@{@{radio-button-checked-p}-default-border-color}';
                z-index: 3;
            }
            &:hover {
                border-color: @B5;
                &::before,
                &::after {
                    background-color: @B5;
                }
            }
            &:active {
                border-color: @B7;
                &::before,
                &::after {
                    background-color: @B7;
                }
            }
            &.@{radio-button-prefix-cls}-disabled {
                &,
                &:hover {
                    color: @radio-readonly-color;
                    border-color: @radio-readonly-color;
                    background-color: @G11;
                    &::before,
                    &::after {
                        background-color: @radio-readonly-color;
                        z-index: 2;
                    }
                }
            }
        }
        &:hover {
            border-color: ~'@{@{radio-button-default-p}-hover-border-color}';
            &::before,
            &::after {
                background-color: ~'@{@{radio-button-default-p}-hover-border-color}';
                z-index: 4;
            }
        }
        &.@{radio-button-prefix-cls}-disabled {
            border-color: ~'@{@{radio-button-default-p}-disabled-border-color}';
            background-color: ~'@{@{radio-button-default-p}-disabled-background-color}';
            &::before,
            &::after {
                background-color: ~'@{@{radio-button-default-p}-disabled-border-color}';
                z-index: 1;
            }
            &:hover {
                border-color: ~'@{@{radio-button-default-p}-disabled-border-color}';
                &::before,
                &::after {
                    background-color: ~'@{@{radio-button-default-p}-disabled-border-color}';
                    z-index: 1;
                }
            }
        }
    }
    // 加强版单选有背景色，默认无背景色
    &.@{radio-group-prefix-cls}-enhance{
        .@{radio-button-prefix-cls} {
            &:hover {
                background-color: @p37-click-background-color;
            }

            &.@{radio-button-prefix-cls}-disabled:hover {
                background-color: ~'@{@{radio-button-default-p}-disabled-background-color}';
            }

            &.@{radio-button-prefix-cls}-checked {
                background-color: @p37-click-background-color;
                &.@{radio-button-prefix-cls}-disabled {
                    &,
                    &:hover {
                        background-color: @G11;
                    }
                }
            }
        }
    }
}

@media (-webkit-device-pixel-ratio: 1.5) {
    .@{radio-group-prefix-cls} {
        .@{radio-button-prefix-cls} {
            &::before {
                width: 0.5px;
                top: -0.5px;
                left: -0.5px;
            }
            &::after {
                width: 0.5px;
                top: -0.5px;
                right: 0;
            }
        }
    }
}