@arco-design/web-vue/es/form/style/index.less

Arco Design Vue 2.0: A Vue.js 3 UI Library

@import './token.less';
@import './status.less';

@form-prefix-cls: ~'@{prefix}-form';
@form-item-prefix-cls: ~'@{prefix}-form-item';
@form-item-label-col-prefix-cls: ~'@{prefix}-form-item-label-col';
@form-item-wrapper-col-prefix-cls: ~'@{prefix}-form-item-wrapper-col';
@form-item-label-prefix-cls: ~'@{prefix}-form-item-label';
@form-item-message-prefix-cls: ~'@{prefix}-form-item-message';

.@{form-prefix-cls} {
  display: flex;
  flex-direction: column;
  width: 100%;

  &-layout-inline {
    flex-direction: row;
    flex-wrap: wrap;
  }

  &-layout-inline &-item {
    width: auto;
    margin-bottom: @form-inline-margin-item-bottom;
  }

  &-auto-label-width &-item-label-col {
    > .@{form-item-label-prefix-cls} {
      white-space: nowrap;
    }
  }

  &-item {
    display: flex;
    align-items: flex-start;
    justify-content: flex-start;
    width: 100%;
    margin-bottom: @form-size-default-margin-item-bottom;

    &-layout-vertical {
      display: block;

      > .@{form-item-prefix-cls}-label-col {
        justify-content: flex-start;
        margin-bottom: @form-vertical-margin-label-bottom;
        padding: 0;
        line-height: @line-height-base;
        white-space: normal;
      }
    }

    &-layout-inline {
      margin-right: @form-inline-margin-item-right;
    }

    &-label-col {
      padding-right: @form-margin-label-right;
    }

    &&-error,
    &&-has-help {
      margin-bottom: 0;
    }
  }

  // 用处不明
  &-item-wrapper-flex.@{prefix}-col {
    flex: 1;
  }

  /** size style **/
  &-size-mini &-item-label-col {
    line-height: @size-mini;

    > .@{form-item-label-prefix-cls} {
      font-size: @form-size-mini-font-label-size;
    }
  }

  &-size-mini &-item-content {
    min-height: @size-mini;
  }

  &-size-mini &-item-wrapper-col {
    min-height: @size-mini;
  }

  &-size-small &-item-label-col {
    line-height: @size-small;

    > .@{form-item-label-prefix-cls} {
      font-size: @form-size-small-font-label-size;
    }
  }

  &-size-small &-item-content {
    min-height: @size-small;
  }

  &-size-small &-item-wrapper-col {
    min-height: @size-small;
  }

  &-size-large &-item-label-col {
    line-height: @size-large;

    > .@{form-item-label-prefix-cls} {
      font-size: @form-size-large-font-label-size;
    }
  }

  &-size-large &-item-content {
    min-height: @size-large;
  }

  &-size-large &-item-wrapper-col {
    min-height: @size-large;
  }

  &-item-extra {
    margin-top: @form-margin-extra-top;
    color: @form-color-extra-text;
    font-size: @form-font-extra-text-size;
  }

  &-item-message {
    min-height: @form-size-default-margin-item-bottom;
    color: @form-color-tip-text_error;
    font-size: @form-font-error-text-size;
    line-height: @form-size-default-margin-item-bottom;

    &-help {
      color: @form-color-extra-text;
    }

    + .@{form-prefix-cls}-item-extra {
      margin-top: 0;
      margin-bottom: @form-margin-extra-bottom;
    }
  }

  &-item-label-col {
    display: flex;
    flex-shrink: 0;
    justify-content: flex-end;
    line-height: @size-default;
    white-space: nowrap;

    &-left {
      justify-content: flex-start;
    }

    > .@{form-item-label-prefix-cls} {
      max-width: 100%;
      color: @form-color-text-label;
      font-size: @form-size-default-font-label-size;
      white-space: normal;
    }

    &&-flex {
      box-sizing: content-box;
    }

    // 用处不明
    //&-flex.@{prefix}-col {
    //  flex: 0;
    //
    //  > label {
    //    white-space: nowrap;
    //  }
    //}
  }

  &-item-wrapper-col {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    width: 100%;
    min-width: 0;
    min-height: @size-default;
  }

  &-item-content {
    flex: 1;
    max-width: 100%;
    min-height: @size-default;

    &-wrapper {
      display: flex;
      align-items: center;
      justify-content: flex-start;
      width: 100%;
    }

    &-flex {
      display: flex;
      align-items: center;
      justify-content: flex-start;
    }
  }

  /** slider display: block **/

  .@{prefix}-slider {
    display: block;
  }
}

.@{form-item-label-prefix-cls} {
  &-required-symbol {
    color: @color-danger-6;
    font-size: @font-size-body-1;
    line-height: 1;

    svg {
      display: inline-block;
      transform: scale(0.5);
    }
  }

  &-tooltip {
    margin-left: @form-margin-tooltip-left;
    color: @form-color-text-tooltip;
  }
}

.form-blink-enter-from,
.form-blink-appear-from {
  opacity: 0;
}

.form-blink-enter-to,
.form-blink-appear-to {
  opacity: 1;
}

.form-blink-enter-active,
.form-blink-appear-active {
  transition: opacity @transition-duration-3 @transition-timing-function-linear;
  animation: ~'@{prefix}-form-blink' @transition-duration-5 @transition-timing-function-linear;
}

.form-blink-enter-done {
}

@keyframes ~ '@{prefix}-form-blink' {
  0% {
    opacity: 1;
  }

  50% {
    opacity: 0.2;
  }

  100% {
    opacity: 1;
  }
}