react-text-input/src/main/input.less

Textarea and input components with custom scrollbars and aurogrow in both axes

@text-input-class: text-input;

.@{text-input-class} {
  display: inline-block;
  vertical-align: bottom;
  position: relative;
  overflow: hidden;
  cursor: text;
  text-align: left;

  &__control {
    box-sizing: border-box;
    height: 100%;
    width: 100%;
    padding: inherit;
    background: transparent none;
    border: 0 none;
    border-radius: inherit;
    font: inherit;
    resize: none;
    cursor: inherit;

    &:focus {
      // Focus should be handled with .text-input--focus
      outline: none 0;
    }
  }
  &__area,
  &__placeholder {
    box-sizing: border-box;
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    padding: inherit;
  }
  &__placeholder {
    overflow: hidden;
  }
  &__content {
    visibility: hidden;
    white-space: pre; // Specific for input[type="text"]

    &:after {
      display: inline;
      content: '\202f'; // Narrow non-breaking space is required to display cursor on input that fits line length.
    }
  }
  &--filled {
    .@{text-input-class}__placeholder {
      display: none;
    }
  }
  &--disabled {
    .@{text-input-class}__area {
      visibility: hidden;
    }
    &:not(.@{text-input-class}--password) .@{text-input-class}__content {
      visibility: visible;
    }
  }
  &--fit-line-length {
    max-width: 100%; // Prevent overflow of parent.
    clear: both;
    width: auto;
  }
}