amis/scss/components/form/_form.scss

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

  &--quickEdit .#{$ns}Form-item:last-child {
    margin-bottom: 0;
  }

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

.#{$ns}Form-label {
  font-weight: $fontWeightNormal;
  margin-bottom: px2rem(5px);
  display: inline-block;
  max-width: 100%;
  position: relative;

  > span {
    position: relative;
  }
}

.#{$ns}Form-star {
  color: $red;
  font-size: $fontSizeXs;
  position: absolute;
  left: px2rem(-6px);
  top: px2rem(3px);
  line-height: 1;
}

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

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

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

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

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

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

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

  .#{$ns}Form-remark {
    margin-top: ($Form-input-height - $fontSizeBase) / 2;
    vertical-align: top;
  }

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

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

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

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

@include media-breakpoint-up(sm) {
  .#{$ns}Form-control--sizeXs {
    min-width: $Form-control-widthXs;
    width: auto;
    display: inline-block;
    vertical-align: top;
  }

  .#{$ns}Form-control--sizeSm {
    min-width: $Form-control-widthSm;
    width: auto;
    display: inline-block;
    vertical-align: top;
  }

  .#{$ns}Form-control--sizeMd {
    min-width: $Form-control-widthMd;
    width: auto;
    display: inline-block;
    vertical-align: top;
  }

  .#{$ns}Form-control--sizeLg {
    min-width: $Form-control-widthLg;
    width: auto;
    display: inline-block;
    vertical-align: top;
  }

  .#{$ns}Form-item {
    &--horizontal {
      display: flex;
      flex-wrap: nowrap;
      margin-left: -$Form--horizontal-gutterWidth / 2;
      margin-right: -$Form--horizontal-gutterWidth / 2;

      > * {
        padding-left: $Form--horizontal-gutterWidth / 2;
        padding-right: $Form--horizontal-gutterWidth / 2;
      }

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

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

      > .#{$ns}Form-label {
        padding-top: $Form-label-paddingTop;
        margin-bottom: 0;
      }

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

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

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

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

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

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

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

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

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

      > .#{$ns}Form-value {
        display: inline;

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

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

        > .#{$ns}TextControl--withAddOn {
          display: inline-flex;
          min-width: $Form-control-widthMd;
        }
      }
    }
  }

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

    margin-left: -$Form-row-gutterWidth / 2;
    margin-right: -$Form-row-gutterWidth / 2;
    align-items: flex-start;

    > * {
      padding-left: $Form-row-gutterWidth / 2;
      padding-right: $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: $Form-label-paddingTop;
      padding-right: $Form-row-gutterWidth;
    }

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