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

tdesign-mobile-vue

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

@import "./_var.less";

.@{prefix}-textarea {
  display: flex;
  box-sizing: border-box;
  padding: @textarea-padding;
  background-color: @textarea-background-color;

  &--layout-vertical {
    flex-direction: column;
  }

  &__label:not(:empty) {
    font-size: @font-size-m;
    color: @textarea-label-color;
    flex-shrink: 0;
    line-height: 24px;
    margin-right: @spacer-2;
    width: @textarea-label-width;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;

    .@{prefix}-textarea--layout-vertical & {
      line-height: 22px;
      font-size: @font-size-base;
      padding-bottom: @spacer;
    }
  }

  &__wrapper {
    display: flex;
    flex-direction: column;
    width: 100%;
    flex: 1 1 auto;
    overflow: hidden;

    &-inner {
      flex: 1 1 auto;
      box-sizing: border-box;
      width: inherit;
      min-width: 0;
      height: 100%;
      min-height: 20px;
      margin: 0;
      padding: 0;
      text-align: left;
      background-color: transparent;
      border: 0;
      outline: none;
      resize: none;
      font-size: @textarea-text-font-size;
      color: @textarea-text-color;
      line-height: @textarea-text-line-height;
    }
  }

  &__placeholder {
    color: @textarea-placeholder-color;
    font-size: @textarea-placeholder-font-size;
  }

  &__indicator:not(:empty) {
    color: @textarea-indicator-text-color;
    font-size: @textarea-indicator-text-font-size;
    text-align: @textarea-indicator-text-align;
    line-height: @textarea-indicator-text-line-height;
    padding-top: @textarea-indicator-text-padding-top;
  }

  &--border {
    border-radius: @textarea-border-radius;
    border: @textarea-border-width solid @textarea-border-color;
  }

  &--disabled {
    color: @textarea-disabled-text-color;
    cursor: not-allowed;
  }

  &--readonly {
    cursor: pointer;
  }
}