Form

Общий контенйнер

Контейнер для формы, содержит в себе основной элемент <form> с классом form.

<form class="form" action="#">

Контейнер для input

<form class="form" action="#">
  <div class="form__row">
    <label>Заголовок для input</label>
  </div>
</form>

Демонстрация

Вывод ошибки

Вешаем модификатор --error на элемент <div class="form__row">

<form class="form" action="#">
  <div class="form__row form__row--error">
    <label>Заголовок для input</label>
    <div class="error-text">Текст ошибки</div>
  </div>
</form>

Демонстрация

field-sizing

Автоматически изменяет размер textarea в соответствии с ее содержимым.

@mixin field-sizing($line-height: null, $min-height: null) {
  line-height: if($line-height != null, $line-height, 1.5);
  field-sizing: content;
  min-height: if($min-height != null, $min-height * 1lh, 3lh);
}

Настройки

$line-height - интервал между строк; $min-height - минимальная высота

Вызов

  .textarea {
    @include field-sizing(2,8);
  }