vue-easytable/packages/style/ve-radio.less

Vue table component

.ve-radio *,
.ve-radio *:before,
.ve-radio *:after {
    box-sizing: border-box;
}

.ve-radio {
    margin: 0 8px 0 0;

    &,
    .ve-radio-container {
        padding: 0;
        color: #000000d9;
        font-size: 14px;
        line-height: 22px;
        list-style: none;
        position: relative;
        display: inline-block;
        white-space: nowrap;
        cursor: pointer;
    }

    // container
    .ve-radio-container {
        margin: 0;
        top: -1px;
        line-height: 1;
        vertical-align: sub;
        outline: none;

        // radio input
        .ve-radio-input {
            position: absolute;
            top: 0;
            right: 0;
            bottom: 0;
            left: 0;
            z-index: 1;
            cursor: pointer;
            opacity: 0;
        }

        // radio inner
        .ve-radio-inner {
            position: relative;
            top: 0;
            left: 0;
            display: block;
            width: 16px;
            height: 16px;
            background-color: #fff;
            border: 1px solid #d9d9d9;
            border-radius: 100px;
            transition: all 0.3s;

            &:after {
                position: absolute;
                top: 3px;
                left: 3px;
                display: table;
                width: 8px;
                height: 8px;
                background-color: @ve-radio-checked-background-color;
                border-top: 0;
                border-left: 0;
                border-radius: 8px;
                transform: scale(0);
                opacity: 0;
                transition: all 0.3s cubic-bezier(0.78, 0.14, 0.15, 0.86);
                content: " ";
            }
        }

        // 选中效果
        &.ve-radio-checked {
            &:after {
                position: absolute;
                top: 0;
                left: 0;
                width: 100%;
                height: 100%;
                border: 1px solid @ve-radio-checked-border-color;
                border-radius: 50%;
                visibility: hidden;
                animation-fill-mode: both;
                content: "";
            }

            .ve-radio-inner {
                border-color: @ve-radio-checked-border-color;
            }

            .ve-radio-inner:after {
                transform: scale(1);
                opacity: 1;
                transition: all 0.3s cubic-bezier(0.78, 0.14, 0.15, 0.86);
            }
        }

        // 禁用效果
        &.ve-radio-disabled {
            .ve-radio-input {
                cursor: not-allowed;
            }
            .ve-radio-inner {
                background-color: #f5f5f5;
                border-color: #d9d9d9 !important;
                cursor: not-allowed;

                &:after {
                    background-color: #00000033;
                }
            }
            & + span {
                color: rgba(0, 0, 0, 0.25);
                cursor: not-allowed;
            }
        }
    }

    // label
    &-label {
        padding: 0 4px;
        color: @ve-radio-label-text-color;
    }
}