N3-components/N3-components

View on GitHub
src/style/radio.less

Summary

Maintainability
Test Coverage
.@{prefix-cls}-radio-con{
    margin-right: 10px;
    &:hover{
        cursor:pointer;
    }
    .@{prefix-cls}-radio-span{
        white-space: nowrap;
        outline: none;
        display: inline-block;
        position: relative;
        line-height: 1;
        vertical-align: middle;
    }

    .@{prefix-cls}-radio-inner {
        position: relative;
        top: 0;
        left: 0;
        display: inline-block;
        width: @radioSize;
        height: @radioSize;
        border-width: 1px;
        border-style: solid;
        border-radius: @radioSize;
        border-color: @lightGrayColor;
        background-color: @whiteColor;
        transition: all 0.3s ease;
    }

    .@{prefix-cls}-radio-input {
        position: absolute!important;
        left: 0;
        z-index: 1;
        cursor: pointer;
        opacity: 0;
        opacity: 0;
        top: 0;
        bottom: 0;
        right: 0;
        width: 100%;
        height: 100%;
    }

    .@{prefix-cls}-radio-checked .@{prefix-cls}-radio-inner:after {
        transform: scale(1);
        opacity: 1;
    }

    .@{prefix-cls}-radio-inner:after {
        position: absolute;
        width: @radioPointerSize;
        height: @radioPointerSize;
        left: (@radioSize - @radioPointerSize)/2-1;
        top: (@radioSize - @radioPointerSize)/2-1;
        border-radius: @radioPointerSize;
        display: table;
        border-top: 0;
        border-left: 0;
        content: ' ';
        background-color: @primaryColor;
        transform: scale(0);
        opacity: 0;
        transition: all 0.3s ease;
    }

    .@{prefix-cls}-radio-disabled .@{prefix-cls}-radio-inner {
        border-color: @lightGrayColor;
        background-color: @lightColor;
    }
}

.@{prefix-cls}-radio-btn input[type=radio] {
    position: absolute;
    clip: rect(0,0,0,0);
    pointer-events: none;
}