@txdfe/at/lib/form/main.scss

@charset "UTF-8";

@import "../core/index-noreset.scss";
@import "scss/mixin";
@import "scss/variable";

#{$form-prefix} {
  @include box-sizing;

  &-item {
    & + &:last-child {
      // 相邻的最后一个表单项无底边距
      margin-bottom: 0;
    }
    &.has-help {
      margin-bottom: 0;
    }
    &.has-error {
      margin-bottom: 0;
      #{$form-prefix}-item-help {
        color: $form-error-color;
      }
    }

    /* medium */
    // TODO: REMOVE the lastchild's margin-bottom in 2.x version
    margin-bottom: $S20;
    font-size: $font-size-body;
    // label在上面的底部间距12px
    &.#{$css-prefix}top {
      margin-bottom: $S12;
    }
    position: relative;
    #{$form-prefix}-item-label, #{$form-prefix}-text-align, p {
      line-height: $S20 - (14px - $font-size-body)*2;
      height: $S36 - (14px - $font-size-body)*3;
      padding-top: $S8;
      padding-bottom: $S8;
      font-size: $font-size-body;
    }
    #{$form-prefix}-text-align, p {
      margin: 0;
    }

    @include form-enhance($form-element-medium-height);

    // 使 switch 垂直居中
    .#{$css-prefix}switch {
      margin-top: 7px - (14px - $font-size-body)/2;
    }

    #{$form-prefix}-item-label {
      font-size: $form-element-medium-font-size;
    }
    &.#{$css-prefix}small {
      margin-bottom: $form-item-s-margin-b;

      #{$form-prefix}-item-label, #{$form-prefix}-text-align, p {
        line-height: $S16 - (14px - $font-size-body)*2;
        height: $S32 - (14px - $font-size-body)*2;
        padding-top: $S8;
        padding-bottom: $S8;
        font-size: $font-size-body;
      }

      @include form-enhance($form-element-small-height);

      // 使 switch 垂直居中
      .#{$css-prefix}switch {
        margin-top: 7px;
      }

      #{$form-prefix}-item-label {
        font-size: $form-element-small-font-size;
      }
    }
    @if ($AT_THEME != 'teambition') {
      &.#{$css-prefix}inset #{$form-prefix}-item-label {
        padding-right: 0;
        padding-left: 0;
        line-height: $font-size-body + 1px;
      }
      &.#{$css-prefix}inset .#{$css-prefix}input.#{$css-prefix}small input {
        height: $S28;
      }
      &.#{$css-prefix}inset.#{$css-prefix}small #{$form-prefix}-item-label {
        line-height: $font-size-body;
      }
    } @else {
      &.#{$css-prefix}inset #{$form-prefix}-item-label {
        padding-right: 0;
        padding-left: 0;
      }
      .#{$css-prefix}inset .#{$css-prefix}input.#{$css-prefix}medium input {
        height: $S36;
      }
      &.#{$css-prefix}inset.#{$css-prefix}small .#{$css-prefix}select #{$form-prefix}-item-label {
        line-height: 16px;
      }
      &.#{$css-prefix}inset.#{$css-prefix}small #{$form-prefix}-item-label {
        line-height: $font-size-body;
      }
    }
  }
  &-item-control {
    #{$form-prefix}-text-align {
      margin: 0;
    }
    > .#{$css-prefix}input-group, > .#{$css-prefix}input {
      width: 100%;
    }
    // 去掉form中垂直checkbox group中的下边距，因有formItem的行高影响，否则垂直距离太大
    .#{$css-prefix}checkbox-group-ver .#{$css-prefix}checkbox-wrapper {
      margin-bottom: 0;
    }
  }
  &-item-label {
    display: inline-block;
    vertical-align: top;
    color: $form-label-color;
    text-align: right;
    padding-right: $form-label-padding-r;

    label[required]::after {
      margin-left: $S4;
      content: "*";
      vertical-align: middle;
      color: $form-error-color;
      font-family: sans-serif;
    }

    &.#{$css-prefix}left {
      text-align: left;
    }
  }

  &-item-extra {
    margin: $S4 0;
  }

  &-item-help {
    margin: $S4 0;
    font-size: $form-help-font-size;
    line-height: $line-height-body;
    color: $form-help-color;
    display: flex;
    &-text {
      display: inline-block;
      margin-left: $S4;
    }
  }

  &.#{$css-prefix}inline {
    #{$form-prefix}-item {
      display: inline-block;
      vertical-align: top;

      /* label on left */
      &.#{$css-prefix}left #{$form-prefix}-item-control {
        display: inline-block;
        vertical-align: top;
        line-height: 0;
      }

      &:not(:last-child) {
        margin-right: $form-inline-m-item-margin-r;
      }
      &.#{$css-prefix}small:not(:last-child) {
        margin-right: $form-inline-s-item-margin-r;
      }
    }
  }
}

@media screen and (min-width: 0\0) and (min-resolution: .001dpcm) {
  #{$form-prefix}-item.#{$css-prefix}left > #{$form-prefix}-item-label {
    display: table-cell;
  }
  #{$form-prefix}.#{$css-prefix}inline #{$form-prefix}-item.#{$css-prefix}left #{$form-prefix}-item-control {
    display: table-cell;
  }
}

#{$form-prefix}[dir="rtl"] {
  #{$form-prefix}-item-label {
    text-align: left;
    padding-left: $form-label-padding-r;
    padding-right: 0;
  }
  &.#{$css-prefix}inline {
    #{$form-prefix}-item {
      &:not(:last-child) {
        margin-left: $form-inline-m-item-margin-r;
        margin-right: 0;
      }
      &.#{$css-prefix}small:not(:last-child) {
        margin-left: $form-inline-s-item-margin-r;
        margin-right: 0;
      }
    }
  }
}