naive-ui/styles/Form.scss

@import './mixins/mixins.scss';
@import './themes/vars.scss';

@include b(form) {
  width: 100%;
  font-size: 14px;
  @include m(inline) {
    width: 100%;
    display: inline-flex;
    align-items: flex-start;
    align-content: space-around;
    @include b(form-item) {
      width: auto;
      &:last-child {
        margin-right: 0;
      }
    }
  }
}

@include themes-mixin {
  @include b(form-item) {
    width: 100%;
    @include m(right-label-aligned) {
      @include b(form-item-label) {
        text-align: right;
        &::before {
          content: '* ';
          color: $--error-6;
        }
        &::after {
          display: none;
        }
      }
    }
    @include m(top-labelled) {
      margin-right: 18px;
      @include m(no-label) {
        padding-top: 24px;
      }
      @include b(form-item-label) {
        display: block;
        width: 100%;
        padding-bottom: 8px;
        padding-left: 2px;
      }
    }
    @include m(left-labelled) {
      display: flex;
      flex-wrap: nowrap;
      @include b(form-item-label) {
        line-height: 40px;
        box-sizing: border-box;
        padding-right: 12px;
        white-space: nowrap;
        height: 40px;
        flex-shrink: 0;
        flex-grow: 0;
      }
      @include b(form-item-control) {
        flex-grow: 1;
      }
    }
    @include m(has-feedback) {
      padding-bottom: 0px;
    }
    @include m(required) {
      @include b(form-item-label) {
        &::after {
          content: '*';
          color: $--error-6;
        }
      }
    }
    @include b(form-item-label) {
      display: inline-block;
      transition: color .3s $default-cubic-bezier;
      color: $--n-text-color;
      height: 24px;
      box-sizing: border-box;
      font-size: 14px;
      &::after {
        transition: color .3s $default-cubic-bezier;
      }
    }
    @include b(form-item-blank) {
      padding-top: 3px;
      padding-bottom: 3px;
      min-height: 34px;
      display: flex;
      align-items: center;
      position: relative;
    }
    @include b(form-item-feedback-wrapper) {
      padding-left: 2px;
      padding-top: 0px;
      box-sizing: border-box;
      min-height: 20px;
      color: $--error-6;
      font-size: 14px;
      transform-origin: top left;
      line-height: 1.25;
      transition: color .3s $default-cubic-bezier;
      @include b(form-item-feedback) {
        @include fade-down-transition($from-offset: -3px);
      }
    } 
  }
}