deer-ui/lib/radio/style.less

React.js UI components for PC Web

@import "../styles/themes.less";

@prefixCls: deer-ui-radio;

.@{prefixCls} {
    font-size: @font-size;
    color: @font-color;
    outline: none;
    display: inline-block;
    line-height: 1;
    vertical-align: sub;
    white-space: nowrap;
    &-input{
        box-sizing: border-box;
        padding: 0;
        position: absolute;
        top: 0;
        left: 0;
        bottom: 0;
        right: 0;
        opacity: 0;
        z-index: 1;
    }
    &-inner {
        display: block;
        width: @default-radio-width;
        height: @default-radio-height;
        border: 1px solid @border-color;
        border-radius: 50%;
        margin-right: @default-radio-offset-right;
        transition: all @default-transition;
        position: relative;
    
        &::after {
          content: " ";
          position: absolute;
          width: @default-radio-width - 6px;
          height: @default-radio-height - 6px;
          border-radius: 50%;
          background-color: @primary-color;
          top: 3px;
          left: 3px;
          opacity: 0;
          transition: all @default-transition;
          transform: scale(0);
        }
      }

      &-disabled {
        .@{prefixCls}-inner {
          border-color: @border-color !important;
          background-color: @disabled-bg-color !important;
          &::after {
            background-color: @disabled-font-color;
          }
        }
        .@{prefixCls}-input {
          cursor: not-allowed;
        }
    
        & > span {
          cursor: not-allowed;
          color: @disabled-font-color;
        }
      }

    &-checked {
        .@{prefixCls}-inner {
          border-color: @primary-color;
          &::after {
            opacity: 1;
            transform: scale(1);
          }
        }
      }   
      &-children{
          vertical-align: middle;
      } 
}

.@{prefixCls}-wrapper {
    color: @font-color;
    font-size: @font-size;
    box-sizing: border-box;
    margin: 0px 10px 0px 0px;
    padding: 0;
    display: inline-block;
    position: relative;
    cursor: pointer;
    transition: all @default-transition;
}