naive-ui/styles/Form.scss

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

@include b(form) {
  width: 100%;
  font-size: 14px;
  line-height: 1.5;
  @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;
      }
    }
  }
}

$form-item-label-height: (
  'small': 20px,
  'medium': 22px,
  'large': 24px
) !global;

@mixin form-item-size-mixin ($size) {
  $form-item-feedback-font-size: (
    'small': 13px,
    'medium': 14px,
    'large': 14px
  ) !global;
  @include m($size + '-size') {
    @include m(top-labelled) {
      @include m(no-label) {
        padding-top: map-get($form-item-label-height, $size);
      }
      @include b(form-item-label) {
        font-size: map-get($--n-font-size, $size) - 1px;
        height: map-get($form-item-label-height, $size);
      }
    }
    @include m(left-labelled) {
      @include b(form-item-label) {
        font-size: map-get($--n-font-size, $size);
        height: map-get($--n-height, $size) + 6px;
        line-height: map-get($--n-height, $size) + 6px;
      }
    }
    @include b(form-item-blank) {
      min-height: map-get($--n-height, $size);
    }
    @include b(form-item-feedback-wrapper) {
      font-size: map-get($--n-font-size, $size) - 1px;
    }
  }
}

@include themes-mixin {
  @include b(form-item) {
    @include once {
      width: 100%;
      @include form-item-size-mixin('small');
      @include form-item-size-mixin('medium');
      @include form-item-size-mixin('large');
      @include m(top-labelled) {
        margin-right: 18px;
        @include m(no-label) {
          padding-top: map-get($form-item-label-height, 'medium');
        }
        @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) {
          box-sizing: border-box;
          padding-right: 12px;
          white-space: nowrap;
          flex-shrink: 0;
          flex-grow: 0;
        }
        @include b(form-item-control) {
          flex-grow: 1;
        }
      }
      @include m(right-label-aligned) {
        @include b(form-item-label) {
          text-align: right;
          &::after {
            display: none;
          }
        }
      }
      @include m(left-label-aligned) {
        @include b(form-item-label) {
          text-align: left;
          &::before {
            display: none;
          }
        }
      }
      @include m(has-feedback) {
        padding-bottom: 0px;
      }
      @include b(form-item-blank) {
        padding-top: 3px;
        padding-bottom: 3px;
        min-height: map-get($--n-height, 'medium');
        display: flex;
        align-items: center;
        position: relative;
      }
    }
    @include m(required) {
      @include b(form-item-label) {
        &::after, &::before {
          @include once {
            content: ' *';
          }
          color: $--form-item-required-asterisk;
        }
      }
    }
    @include b(form-item-label) {
      @include once {
        display: inline-block;
        height: map-get($form-item-label-height, 'medium');
        box-sizing: border-box;
        font-size: 14px;
        transition: color .3s $--n-ease-in-out-cubic-bezier;
        &::after {
          transition: color .3s $--n-ease-in-out-cubic-bezier;
        }
      }
      color: $--form-item-label-text-color;
    }
    @include b(form-item-feedback-wrapper) {
      @include once {
        padding-left: 2px;
        padding-top: 0px;
        box-sizing: border-box;
        min-height: 1.5em;
        font-size: 14px;
        transform-origin: top left;
        line-height: 1.5;
        transition: color .3s $--n-ease-in-out-cubic-bezier;
        @include b(form-item-feedback) {
          @include fade-down-transition($name: form-item-feedback, $from-offset: -3px);
        }
      }
      color: map-get($--form-item-feedback-text-color, 'default');
    } 
  }
}