w-ui/packages/radio/src/radio.less

A Vue.js 2.0 UI Toolkit for mobile

.wui-radio {
  display: inline-block;
  padding-right: 10px;

  &-icon {
    border: 1px solid #CCC;
    border-radius: 50%;
    display: inline-block;
    position: relative;
    z-index: 10;
    vertical-align: bottom;
    pointer-events: none; 
    > i {
      content: '';
      position: absolute;
      left: 50%;
      top: 50%;
      border-radius: 50%;
      background-color: #fff;
      opacity: 0;
      transform: translate(-50%, -50%) scale(.1);
    }
  }

  &-text {
    margin-left: 1px;
    font-size: 15px;
    color: #666;
    pointer-events: none;
  }

  > input[type="radio"] {
    position: absolute;
    left: -9999em;
    &:checked + .wui-radio-icon {
      border-color: #20a0ff;
      > i {
        opacity: 1;
        background-color: #20a0ff;
        transform: translate(-50%, -50%) scale(1);
        transition: all .2s ease-in-out;
      }
    }
    &:disabled ~ .wui-radio-text {
      color: #CCC;
    }
    &:disabled + .wui-radio-icon {
      border-color: #CCC;
      background-color: #F3F3F3;
      > i {
        background-color: #CCC;
      }
    }
  }
}