ten-design-vue/lib/theme/components/form.less

ten-vue

/* dependencies icon,tooltip */
@import "../vars.less";

.ten-form {

  &-item {
    display: flex;
    margin-bottom: @form-item-bottom;
    position: relative;

    &-label {
      width: 6em;
      margin-right: 16px;
      line-height: @input-height-default;
      color: @text-color;
      font-size: 14px;
    }

    &-control {
      flex: 1;
      position: relative;
      line-height: @input-height-default;
    }

    &-err {
      display: none;
      position: absolute;
      top: 100%;
      font-size: 12px;
      line-height: @form-item-err-line-height;
      color: #FF3E00;
    }

    &-icon {
      position: absolute;
      top: (@input-height-default - 16px) / 2 + 1px;
      left: calc(100% + 5px);
      width: 32px;
      font-size: 16px;
      line-height: 16px;
    }

    .ten-form-item-icon {
      display: none;
    }

    .ten-form-item-icon .ten-icon {

      &--line_circle_help {
        color: #FFA700;
        cursor: pointer;
      }

      &--circle_clear {
        color: #ff3e00;
      }

      &--circle_tick {
        color: #3ecc36;
      }

      &--circle_error {
        color: #FFA700;
      }

      &--loading_gradient {
        color: @primary-color;
      }
    }

    &--required {
      .ten-form-item-label {
        &:after {
          content: '*';
          display: inline;
          color: @error-color;
          margin-left: 5px;
          vertical-align: middle
        }
      }
    }

    &--error {
      .ten-form-item-err {
        display: block;
      }

      .ten-input__input,
      .ten-picker__input {
        border-color: #FF3E00;
      }
    }

    &--warning {
      .ten-input__input,
      .ten-picker__input {
        border-color: #FFA700;
      }
    }

    &--icon {
      .ten-form-item-icon {
        display: inline-block;
      }
    }
  }

  &--inline {
    .ten-form-item {
      display: inline-flex;

      &-label {
        width: auto;
      }
    }

    .ten-form-item+.ten-form-item {
      margin-left: @form-item-next-left;
    }
  }
  &--labelalign-right {
    .ten-form-item {
      &-label {
        text-align: right;
      }
    }
  }
}