////////表单样式////////
.d-form {
  padding: @sys-layout-sm;
  background: @sys-color-snow;
}
////文本域与下拉////
.d-form-input,.d-form-select,
.d-form-textarea,.d-form-box {
  box-sizing: border-box;
  display: block;
  padding: @base-padding-vertical @base-padding-horizontal / 2;
  width: 100%;
  height: @base-height;
  font-size: @base-font-size;
  line-height: @base-line-height;
  color: @sys-color-gray;
  background-color: transparent;
  background-image: none;
  border: 1px solid @color-border;//#ccc
  border-radius: 4px;
  transition-property: border-color, box-shadow;
  transition-duration: @sys-duration-sm;
  // -webkit-appearance:none; //去除移动端默认的样式
  &:focus,&.d-focus {
    @color-rgba: rgba(red(@color-theme), green(@color-theme), blue(@color-theme), .6);
    border-color: @color-theme;//#66afe9
    outline: 0;
    .sys-box-shadow(~"inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px @{color-rgba}");
  }
  &:disabled,&.d-disabled {
    .sys-disabled();
    &:focus,&.d-focus {
      border-color: @color-border;
    }
  }
  &[readonly],&.d-readonly {
    background-color: lighten(@color-border, 10%);
    border-color: @color-border;
    box-shadow: none;
  }
  @color:#bbb;
  &::-webkit-input-placeholder, textarea::-webkit-input-placeholder {// Safari and Chrome
    color: @color;
  }
  input:-moz-placeholder, textarea:-moz-placeholder {// Firefox 4-18
    color: @color;
  }
  input::-moz-placeholder, textarea::-moz-placeholder {// Firefox 19+
    color: @color;
  }
  input:-ms-input-placeholder, textarea:-ms-input-placeholder {// Internet Explorer 10+
    color: @color;
  }
}
// 下拉菜单
.d-form-select {
  padding-left: @base-padding-horizontal / 2 - 3;
}
// 多行文本域
.d-form-textarea {
  height: auto;
  max-width: 100%;
  min-height: 120px;
  resize: vertical;
}
// 单行文本域
.d-form-textarea-neat {
  height: @base-height;
  min-height: auto; // 34px
}

////单选与多选////
.d-form-radio,.d-form-checkbox {
  @unit: 24px;
  font-size: @base-font-size;
  line-height: @base-height;
  cursor: pointer;
  .d-form-input-check {
    display: inline-block;
    margin: 0;
    height: @unit - 6;
    width: @unit - 6;
    user-select: none;
    vertical-align: middle;
    cursor: pointer;
    &:disabled {
      &, & ~ .d-form-check-label {
        .sys-disabled();
      }
    }
    & + .d-form-check-label:not(:empty) {
      margin-left: 4px;
    }
    & + .d-form-check-label:empty {
      display: none;
    }
  }
  .d-form-check-label {
    display: inline-block;
    margin-bottom: 0;
    font-weight: 400;
    line-height: @unit;
    color: @sys-color-gray;
    vertical-align: middle;
  }
  & + & {
    margin-left: 4px;
  }
}
// .d-form-checkbox input[type=checkbox],
// .d-form-radio input[type=radio]{
//   position: relative;
//   margin-right: 3px;
//   top: 2px;
//   cursor: pointer;
// }
// .form-checkbox.disabled input[type=checkbox],
// .form-radio.disabled input[type=radio]{
//   .sys-disabled();
// }

////表单项组合////
.d-form-group {
  box-sizing: border-box;
  margin: 0 0 @sys-layout-md;
  padding: 0;
  font-size: @sys-font-size-sm;
  font-variant: tabular-nums;
  line-height: @sys-line-height;
  list-style: none;
  font-feature-settings: "tnum";
  vertical-align: top;
  // .d-form-radio,.d-form-checkbox {
  //   padding: @base-padding-vertical + 2 0 0;
  // }
}
.d-form-label {
  overflow: hidden;
  display: block;
  padding-right: @sys-layout-sm;
  white-space: nowrap;
  color: @sys-color-gray;
  line-height: @base-height;
}
.d-form-text {
  color: @sys-color-gray;
  text-align: left;
  padding-top: @base-padding-vertical;
  padding-bottom: @base-padding-vertical;
  line-height: @base-height - @base-padding-vertical * 2;
  word-break: break-all;
}
.d-form-el {

}
// 垂直居中
.d-form-el-vertical {
  display: flex;
  align-items: center;
}

// 表单点缀
.d-form-board-adorn {
  position: relative;
  .d-form-adorn-item {
    position: absolute;
    overflow: visible;
    display: flex;
    align-items: center;
    justify-content: center;
    width: @base-height;
    height: @base-height;
    font-size: @base-font-size;
    & + .d-form-input {
      padding-left: @base-height;
    }
  }
  .d-form-adorn-item {
    &:first-child {
      left: 0;
      top: 0;
    }
  }
  .d-form-adorn-item {
    &:last-child {
      right: 0;
      top: 0;
    }
  }
}

//表单规则帮助
.d-form-help {
  color: @sys-color-lightgray;
}
//警告提示
.d-form-tip {
    color:@sys-color-error;
}
.d-form-require {
  display: inline;
  font-style: normal;
  color: @sys-color-error;
}
//表单警告样式
.d-form-warn{
  &,&:hover,&:focus{
    border-color: @sys-color-caution;
  }
}
.d-form-danger{
  &,&:hover,&:focus{
    border-color: @sys-color-error;
  }
}
// 验证样式
.has-success{
    .form-input,.form-select{
        border-color:@sys-color-success;
    }
    .form-radio,.form-checkbox,
    .help-block{
        color:@sys-color-success;
    }
}
.has-danger{
    .form-input,.form-select{
        border-color:@sys-color-error;
    }
    .form-radio,.form-checkbox,
    .help-block{
        color:@sys-color-error;
    }
}
// 配合验证验证码表单
.form-short {
  display: inline-block;
  width: 35%;
  vertical-align: middle;
}
// 验证码
.form-verify{
    .sys-inline-block();
    overflow:hidden;
    padding-left:@sys-layout-sm;
    height:@base-height;
    line-height:@base-height;
    vertical-align: middle;
    img,a{
        .sys-inline-block();
        margin-right:3px;
        vertical-align: middle;
        cursor:pointer;
    }
}
// 内联
.form-inblock {
  width: auto;
  .sys-inline-block();
}

////尺寸////
.d-form-group-xxs {
  @line-height: ceil(@sys-font-size-xs * @base-line-height + @sys-padding-vertical-xs + 2);
  font-size: @sys-font-size-xs;
  .d-form-input,.d-form-select,.d-form-textarea{
    padding: @sys-padding-vertical-xs / 2 @sys-padding-horizontal-xs / 2;
    height: @line-height;
    font-size: @sys-font-size-xs;
  }
  .d-form-radio,.d-form-checkbox{
    padding:@sys-padding-vertical-xs + 2 0;
    font-size:@sys-font-size-xs;
  }
  .d-form-label,.d-form-verify{
    height:@line-height;
    line-height:@line-height;
    font-size: @sys-font-size-xs;
  }
  .d-form-text {
    padding-top: @sys-padding-vertical-xs / 2;
    padding-bottom: @sys-padding-vertical-xs / 2;
    line-height: @line-height - @sys-padding-vertical-xs;
    font-size: @sys-font-size-xs;
  }
}
.d-form-group-xs {
  @line-height: ceil(@sys-font-size-xs * @base-line-height + @sys-padding-vertical-xs * 2 + 2);
  font-size: @sys-font-size-xs;
  .d-form-input,.d-form-select,.d-form-textarea{
    padding: @sys-padding-vertical-xs @sys-padding-horizontal-xs;
    height:@line-height;
    font-size: @sys-font-size-xs;
  }
  .d-form-radio,.d-form-checkbox{
    padding:@sys-padding-vertical-xs + 2 0;
    font-size:@sys-font-size-xs;
  }
  .d-form-label,.d-form-verify{
    height:@line-height;
    line-height:@line-height;
    font-size: @sys-font-size-xs;
  }
  .d-form-text {
    padding-top: @sys-padding-vertical-xs;
    padding-bottom: @sys-padding-vertical-xs;
    line-height: @line-height - @sys-padding-vertical-xs * 2;
    font-size: @sys-font-size-xs;
  }
}
//.form-group-sm{
//    @line-height: ceil(@sys-font-size-sm * @base-line-height + @sys-padding-vertical-sm * 2 + 2);
//    font-size: @sys-font-size-sm;
//    .form-input,.form-select,.form-textarea{
//        padding: @sys-padding-vertical-sm @sys-padding-horizontal-sm;
//        height:@line-height;
//        font-size: @sys-font-size-sm;
//    }
//    .form-radio,.form-checkbox{
//        padding:@sys-padding-vertical-sm + 2 0;
//        font-size:@sys-font-size-sm;
//    }
//    .form-label,.form-text,.form-verify{
//        height:@line-height;
//        line-height:@line-height;
//        font-size: @sys-font-size-sm;
//    }
//}
.d-form-group-md {
  @line-height:ceil(@sys-font-size-md * @base-line-height + @sys-padding-vertical-md * 2 + 2);
  font-size: @sys-font-size-md;
  .d-form-input,.d-form-select,.d-form-textarea{
    padding-top: @sys-padding-vertical-md;
    padding-bottom:@sys-padding-vertical-md;
    height:@line-height;
    font-size: @sys-font-size-md;
  }
  .d-form-radio,.d-form-checkbox{
    padding:@sys-padding-vertical-md + 2 0;
    font-size:@sys-font-size-md;
  }
  .d-form-checkbox input[type=checkbox],
  .d-form-radio input[type=radio]{
    top:0;
  }
  .d-form-label,.d-form-verify {
    height:@line-height;
    line-height:@line-height;
    font-size: @sys-font-size-md;
  }
  .d-form-text {
    padding-top: @sys-padding-vertical-md;
    padding-bottom: @sys-padding-vertical-md;
    line-height: @line-height - @sys-padding-vertical-md * 2;
    font-size: @sys-font-size-md;
  }
}
.d-form-group-lg{
  @line-height:ceil(@sys-font-size-lg * @base-line-height + @sys-padding-vertical-lg * 2 + 2);
  font-size: @sys-font-size-lg;
  .d-form-input,.d-form-select,.d-form-textarea{
    padding-top: @sys-padding-vertical-lg;
    padding-bottom:@sys-padding-vertical-lg;
    height:@line-height;
    font-size: @sys-font-size-lg;
  }
  .d-form-radio,.d-form-checkbox{
    padding:@sys-padding-vertical-lg + 2 0;
    font-size:@sys-font-size-lg;
  }
  .d-form-checkbox input[type=checkbox],
  .d-form-radio input[type=radio]{
    top:-2px;
  }
  .d-form-label,.d-form-verify{
    height:@line-height;
    line-height:@line-height;
    font-size: @sys-font-size-lg;
  }
  .d-form-text {
    padding-top: @sys-padding-vertical-lg;
    padding-bottom: @sys-padding-vertical-lg;
    line-height: @line-height - @sys-padding-vertical-lg * 2;
    font-size: @sys-font-size-lg;
  }
}

////内联布局////
.d-form-inline {
  .d-form-group {
    .sys-inline-block();
    vertical-align:top;
  }
}
.d-form-group-inline {
  .d-form-label, .d-form-el {
    .sys-inline-block();
    vertical-align: middle;
  }
  .d-form-el {
    width: auto;
  }
}

////Flex布局////
.d-form-group-flex {
  display: flex;
}
.d-form-group-flex {
  .d-form-el {
    flex: 1;
    align-items: center;
  }
}

// 表单集
.d-group-items {
  &.hidden {
    overflow: hidden;
    height: 0;
  }
}
// 按钮集
.d-group-btns {
  font-size: 0;
  .d-btn {
    margin: 0 4px;
  }
}


////兼容IE8及以下表格式布局////
.form-table{
    display: table;
    width:100%;
    .form-group{
        display: table-row;
    }
    .form-label{
        width:@base-label-width;
        vertical-align: top;
    }
    .form-label,.form-wall{
        display: table-cell;
        padding:@base-padding;
    }
}

////浮动布局////
.form-float{
    .form-group{
        clear:both;
    }
    .form-label{
        float:left;
        padding:0 @base-padding;
        width:@base-label-width;
    }
    .form-wall{
        margin-left:@base-label-width + @base-padding * 2;
        padding:0 @base-padding;
    }
    //.form-group{
    //
    //}
}

////简洁布局////
.form-pithy{
    .form-group{
        clear:both;
        position:relative;
        .sys-border-horizon-before();
        &:first-child{
            &:before{
                display:none;
            }
        }
    }
    .form-label{
        float:left;
        padding:0 @base-padding;
        width:@base-label-width;
    }
    .form-wall{
        margin-left:@base-label-width + @base-padding * 2;
        padding:0 @base-padding;
    }
    .form-input,.form-textarea{
        padding-left:0;
        border:none;
    }
    .btn-container{
        padding-top:@sys-layout-lg;
    }
}