.ui-check{
  position: relative;
  padding-left: 20px;
  cursor: pointer;
  input{
    opacity: 0;
    position: absolute;
    z-index: -1;
    &:checked + i{
      &:before{
        left: ($ui-check-size - $ui-check-sign-size)/2;
        top: ($ui-check-size - $ui-check-sign-size)/2;
        width: $ui-check-sign-size;
        height: $ui-check-sign-size;
        background-color: $ui-check-sign-color;
      }
    }
    &:checked + span .active{
      display: inherit;
    }
    &[type="radio"] + i{
      &,
      &:before{
        border-radius: 50%;
      }
    }
    &[type="checkbox"]:checked + i:before{
      
    }
    &[type="radio"]:checked + i:before{
      
    }
    &[disabled],
    fieldset[disabled] & {
      & + i{
        border-color: lighten($input-border, 5%);
        &:before{
          background-color: lighten($input-border, 5%);
        }
      }
    }
  }
  > i{
    width: $ui-check-size;
    height: $ui-check-size;
    line-height: 1;
    box-shadow: 0 0 1px rgba(120,130,140, 0.35);
    margin-left: -20px;
    margin-top: -2px;
    display: inline-block;
    vertical-align: middle;
    margin-right: 4px;
    background-clip: padding-box;
    position: relative;
    &:before{
      content:"";
      position: absolute;
      left: 50%;
      top: 50%;
      width: 0px;
      height: 0px;
      background-color: transparent;
    }
  }
  > span{
    margin-left: -20px;
    .active{
      display: none;
    }
  }
  &.ui-check-color input:checked + i:before {
    background-color: #fff;
  }
}

.ui-check-md{
  input{
    &:checked + i{
      &:before{
        left: ($ui-check-md-size - $ui-check-sign-size)/2;
        top: ($ui-check-md-size - $ui-check-sign-size)/2;
      }
    }
  }
  > i{
    width: $ui-check-md-size;
    height: $ui-check-md-size;
  }
}

.ui-check-lg{
  input{
    &:checked + i{
      &:before{
        width: $ui-check-sign-size * 2;
        height: $ui-check-sign-size * 2;
        left: ($ui-check-lg-size - $ui-check-sign-size * 2)/2;
        top: ($ui-check-lg-size - $ui-check-sign-size * 2)/2;
      }
    }
  }
  > i{
    width: $ui-check-lg-size;
    height: $ui-check-lg-size;
  }
}