tdesign-mobile-vue/esm/_common/style/mobile/components/form/_index.less

tdesign-mobile-vue

@import "../../base.less";

@import "./_var.less";

.@{prefix}-form {
  background-color: @bg-color-container;

  .@{prefix}-form__item {
    display: flex;
    box-sizing: border-box;
    padding: @form-item-vertical-padding @form-item-horizontal-padding;
    position: relative;

    &:not(:last-child)::after {
      .hairline-bottom(@form-item-border-color);

      left: @form-item-border-left-space;
      right: @form-item-border-right-space;
    }

    &-help,
    &-extra {
      display: flex;
      font-size: 12px;
      margin: 0;
      width: 100%;
      height: auto;
      min-height: 20px;
      margin-top: 4px;
    }

    &-help {
      color: @text-color-disabled;
    }

    &--error {
      color: @error-color-6;
    }

    &--warning {
      color: @warning-color-5;
    }

    &-wrap {
      width: 100%;
    }

    &--top {
      display: flex;
      flex-direction: column;
    }
  }

  &--top {
    align-items: center;
  }

  &__label {
    float: left;
    padding-right: 16px;
    vertical-align: middle;
    line-height: 24px;
    color: @text-color-primary;
    box-sizing: border-box;
    word-break: break-all;

    &--top {
      padding-bottom: 8px;
    }

    &--left {
      text-align: left;
    }

    &--right {
      text-align: right;
    }

    &--required {
      label::before {
        display: inline-block;
        margin-right: 2px;
        color: @error-color-6;
        line-height: 20px;
        content: "*";
      }
    }

    &--colon {
      label::after {
        content: ":";
        position: relative;
        margin: 0 2px;
      }
    }
  }

  &__controls {
    display: flow-root;
    position: relative;

    &-content {
      display: flex;
      align-items: center;
      min-height: 24px;
    }

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

    &--right {
      justify-content: flex-end;
    }
  }

  // 覆盖一些组件样式
  .@{prefix}-cell,
  .@{prefix}-input,
  .@{prefix}-textarea,
  .@{prefix}-upload {
    padding: 0;
  }
}