amis2/scss/components/form/_form.scss

@use 'sass:math';

.#{$ns}Form {
  font-size: var(--Form-fontSize);
  position: relative;

  // 一般是快速编辑里的最后一个输入框
  &--quickEdit > div:last-of-type {
    margin-bottom: 0;
  }

  &--inline {
    > .#{$ns}Button {
      margin-bottom: calc(var(--Form-item-gap) / 2);
      margin-right: calc(var(--Form-item-gap) / 2);
    }

    > .#{$ns}PlainField {
      display: inline-block;
      padding-top: var(--Form-input-paddingY);
      // padding-bottom: var(--Form-input-paddingY);
    }
  }
}

.#{$ns}Form-static {
  min-height: var(--Form-input-height);
  padding-top: var(--Form-label-paddingTop);
  padding-bottom: var(--Form-label-paddingTop);
  margin-bottom: 0;

  .#{$ns}Form-item--inline > .#{$ns}Form-value > & {
    display: inline-block;
    vertical-align: top;
  }

  &--borderFull {
    border: var(--Form-input-borderWidth) solid var(--Form-input-borderColor);
    border-radius: var(--Form-input-borderRadius);
    padding: var(--Form-input-paddingY) var(--Form-input-paddingX);
  }

  &--borderHalf {
    border-bottom: var(--Form-input-borderWidth) solid
      var(--Form-input-borderColor);
    border-radius: var(--Form-input-borderRadius);
    padding: var(--Form-input-paddingY) var(--Form-input-paddingX);
  }
}

.#{$ns}Form-label {
  font-weight: var(--fontWeightNormal);
  margin-bottom: var(--gap-xs);
  position: relative;

  > span {
    position: relative;
  }
}

.#{$ns}Form-star {
  color: var(--danger);
  font-size: var(--fontSizeXs);
  line-height: 1;
}

.#{$ns}Form-feedback {
  color: var(--danger);
  margin: var(--Form-input-marginBottom) 0 0;
  padding-left: var(--gap-base);
  font-size: var(--fontSizeSm);
}

.#{$ns}Form-description {
  display: block;
  color: var(--Form-description-color);
  margin: var(--Form-input-marginBottom) 0 0;
  font-size: var(--Form-description-fontSize);
}

.#{$ns}Form-hint {
  display: inline-block;
  margin-left: var(--gap-sm);
  padding-top: var(--Form-input-paddingY);
  vertical-align: top;
}

.#{$ns}Form-item {
  margin-bottom: var(--Form-item-gap);

  &:last-child {
    margin-bottom: 0;
  }

  .#{$ns}Grid-form > &:last-child {
    margin-bottom: 0;
  }

  .#{$ns}Form--inline > &--inline {
    &:last-child {
      margin-right: 0;
      margin-bottom: 0;
    }
  }

  .#{$ns}Form-remark {
    padding-top: var(--Form-label-paddingTop);
    vertical-align: top;
  }

  &--inline {
    margin-bottom: calc(var(--Form-item-gap) / 2);
    margin-right: calc(var(--Form-item-gap) / 2);
  }

  &--horizontal {
    > .#{$ns}Form-label {
      text-align: var(--Form--horizontal-label-align);
      white-space: var(--Form--horizontal-label-whiteSpace);
    }
  }

  &--normal {
    > .#{$ns}Form-label {
      display: block;

      .#{$ns}Form-star {
        position: absolute;
        left: px2rem(-6px);
        top: px2rem(3px);
      }
    }
  }

  &.is-error > .#{$ns}Form-label {
    color: var(--danger);
  }
}

.#{$ns}Form-placeholder {
  color: var(--Form-input-placeholderColor);
}

.#{$ns}Form-caption {
  display: inline-block;
  line-height: var(--Form-input-height);
  height: var(--Form-input-height);
  margin-left: px2rem(10px);
}

@include media-breakpoint-up(sm) {
  .#{$ns}Form-label {
    display: inline-block;
    max-width: 100%;
  }

  .#{$ns}Form-control--sizeXs {
    // min-width: var(--Form-control-widthXs);
    // width: auto;
    width: var(--Form-control-widthXs);
    max-width: 100%;
    display: inline-block;
    vertical-align: top;

    // 非常难受，number 类型的 input 不能设置size
    &.#{$ns}NumberControl {
      width: var(--Form-control-widthXs);
    }
  }

  .#{$ns}Form-control--sizeSm {
    width: var(--Form-control-widthSm);
    max-width: 100%;
    display: inline-block;
    vertical-align: top;

    // 非常难受，number 类型的 input 不能设置size
    &.#{$ns}NumberControl {
      width: var(--Form-control-widthSm);
    }
  }

  .#{$ns}Form-control--sizeMd {
    width: var(--Form-control-widthMd);
    max-width: 100%;
    display: inline-block;
    vertical-align: top;
  }

  .#{$ns}Form-control--sizeLg {
    width: var(--Form-control-widthLg);
    max-width: 100%;
    display: inline-block;
    vertical-align: top;

    // 非常难受，number 类型的 input 不能设置size
    &.#{$ns}NumberControl {
      width: var(--Form-control-widthLg);
    }
  }

  .#{$ns}Form-item {
    &--horizontal {
      display: flex;
      flex-wrap: nowrap;
      margin-left: calc(var(--Form--horizontal-gutterWidth) / 2 * -1);
      margin-right: calc(var(--Form--horizontal-gutterWidth) / 2 * -1);

      > * {
        padding-left: calc(var(--Form--horizontal-gutterWidth) / 2);
        padding-right: calc(var(--Form--horizontal-gutterWidth) / 2);
      }

      > .#{$ns}Form-value {
        flex-basis: 0;
        flex-grow: 1;
        max-width: 100%;
        min-width: 0;
      }

      .#{$ns}Form-itemColumn--xs,
      .#{$ns}Form-itemColumn--sm,
      .#{$ns}Form-itemColumn--normal,
      .#{$ns}Form-itemColumn--auto,
      .#{$ns}Form-itemColumn--md,
      .#{$ns}Form-itemColumn--lg {
        flex-grow: unset;
        flex-basis: unset;
      }

      > .#{$ns}Form-label {
        padding-top: var(--Form-label-paddingTop);
        margin-bottom: 0;
        flex-shrink: 0;

        .#{$ns}Form-star {
          position: absolute;
          left: px2rem(-6px);
          top: px2rem(3px);
        }
      }

      .#{$ns}Form-itemColumn--xs {
        width: var(--Form--horizontal-label-widthXs);
      }

      .#{$ns}Form-itemColumn--sm {
        width: var(--Form--horizontal-label-widthSm);
      }

      .#{$ns}Form-itemColumn--normal {
        width: var(--Form--horizontal-label-widthBase);
      }

      .#{$ns}Form-itemColumn--md {
        width: var(--Form--horizontal-label-widthMd);
      }

      .#{$ns}Form-itemColumn--lg {
        width: var(--Form--horizontal-label-widthLg);
      }

      .#{$ns}Form-itemColumn--auto {
        width: auto;
      }

      @for $i from (1) through $Form--horizontal-columns {
        .#{$ns}Form-itemColumn--#{$i} {
          flex: 0 0 percentage(math.div($i, $Form--horizontal-columns));
          max-width: percentage(math.div($i, $Form--horizontal-columns));
          min-height: 1px;
        }
      }
    }

    &--inline {
      display: inline-block;
      vertical-align: top;

      > .#{$ns}Form-label {
        padding-top: var(--Form-label-paddingTop);
        margin-bottom: 0;
        margin-right: calc(var(--Form-item-gap) / 2);

        .#{$ns}Form-star {
          position: static;
        }
      }

      > .#{$ns}Form-value {
        display: inline-block;
        vertical-align: top;

        > .#{$ns}Button--link {
          padding-top: var(--Form-label-paddingTop);
        }

        > .#{$ns}Form-control {
          vertical-align: top;
          display: inline-block;
        }

        > .#{$ns}Form-control.#{$ns}InputGroup {
          display: inline-flex;
        }

        > .#{$ns}TextControl--withAddOn {
          display: inline-flex;
        }
      }
    }
  }

  .#{$ns}Form-row {
    display: flex;
    flex-wrap: wrap;

    margin-left: calc(var(--Form-row-gutterWidth) / -2);
    margin-right: calc(var(--Form-row-gutterWidth) / -2);
    align-items: flex-start;

    > * {
      padding-left: calc(var(--Form-row-gutterWidth) / 2);
      padding-right: calc(var(--Form-row-gutterWidth) / 2);
    }
  }

  .#{$ns}Form-col {
    flex-basis: 0;
    flex-grow: 1;
    flex-shrink: 1;
  }

  .#{$ns}Form-rowInner {
    display: flex;
    flex-wrap: nowrap;

    > .#{$ns}Form-label {
      display: inline-block;
      vertical-align: top;
      padding-top: var(--Form-label-paddingTop);
      padding-right: var(--Form-row-gutterWidth);
    }

    > .#{$ns}Form-control {
      flex-basis: 0;
      flex-grow: 1;

      // &:not(.#{$ns}Form-control--withSize) {
      //   width: var(--Form-control-widthBase);
      // }
    }
  }
}

.#{$ns}Form--quickEdit {
  min-width: var(--Form-control-widthSm);
}