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

A Vue.js 2.0 UI Toolkit for mobile

.wui-checkbox {
  display: inline-block;
  padding-right: 10px;
  > input[type="checkbox"] {
    position: absolute;
    left: -9999em;
    &:checked + .wui-checkbox-icon {
      background-color: #20a0ff;
      border-color: #20a0ff;
      > i {
        transform: translate(-50%, -50%) rotate(45deg) scale(1);
        transition: all .2s ease-in-out;
      }
    }
    &:disabled ~ .wui-checkbox-text {
      color: #CCC;
    }
    &:disabled + .wui-checkbox-icon {
      border-color: #CCC;
      background-color: #F3F3F3;
      > i {
        border-color: #CCC;
      }
    }
  }
}

.wui-checkbox-icon {
  border: 1px solid #CCC;
  border-radius: 2px;
  display: inline-block;
  position: relative;
  z-index: 10;
  vertical-align: bottom;
  pointer-events: none;
  > i {
    content: '';
    position: absolute;
    top: 45%;
    left: 50%;
    border: 2px solid #FFF;
    border-top: 0;
    border-left: 0;
    transform: translate(-50%, -50%) rotate(45deg) scale(0);
  }
}

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

.wui-checkbox-circle {
  .wui-checkbox-icon {
    border-radius: 50%;
  }
}