Добавил field-text (TODO: textarea)

package.json

@@ -25,7 +25,8 @@
       "thumb": [],
       "alert": [],
       "btn": [],
-      "to-top": []
+      "to-top": [],
+      "field-text": []
     },
     "addCssBefore": [
       "./src/scss/variables.scss",

src/blocks-demo.html

@@ -558,6 +558,95 @@
 
     </section>
 
+    <section class="blocks-library__item" id="field-text" data-name=".field-text">
+
+      <h2 class="blocks-library__item-title">Текстовое поле формы</h2>
+
+      <label class="field-text">
+        <span class="field-text__name">Текстовое поле</span>
+        <span class="field-text__input-wrap">
+          <input class="field-text__input" type="text" placeholder="input[type=text]">
+          <span class="field-text__help-text">Обёртка — <code>label</code>. Можно сделать обёртку <code>div</code>, но тогда, возможно, захочется элемент <code>.field-text__name</code> делать <code>label</code> и связывать его с полем по <code>id</code> поля.</span>
+        </span>
+      </label>
+
+      <div class="field-text">
+        <label class="field-text__name" for="demo-field">Текстовое поле</label>
+        <span class="field-text__input-wrap">
+          <input class="field-text__input" type="text" id="demo-field" placeholder="input[type=text]">
+          <span class="field-text__help-text">Обёртка — <code>div</code>. Внутри <code>label</code></span>
+        </span>
+      </div>
+
+      <label class="field-text">
+        <span class="field-text__name">Многострочное текстовое поле</span>
+        <span class="field-text__input-wrap">
+          <textarea class="field-text__input" placeholder="textarea"></textarea>
+          <span class="field-text__help-text">Обёртка — <code>label</code>.</span>
+        </span>
+      </label>
+
+      <div class="blocks-library__code-wrapper">
+        <span class="blocks-library__code-show-trigger" title="Показать код"><i class="blocks-library__code-icon"></i></span>
+        <div class="blocks-library__code">
+          <label class="field-text">
+            <span class="field-text__name">Число</span>
+            <span class="field-text__input-wrap">
+              <input class="field-text__input" type="number" placeholder="input[type=number]">
+              <span class="field-text__help-text"></span>
+            </span>
+          </label>
+          <label class="field-text">
+            <span class="field-text__name">Дата</span>
+            <span class="field-text__input-wrap">
+              <input class="field-text__input" type="date">
+              <span class="field-text__help-text"></span>
+            </span>
+          </label>
+          <label class="field-text">
+            <span class="field-text__name">Время</span>
+            <span class="field-text__input-wrap">
+              <input class="field-text__input" type="time">
+              <span class="field-text__help-text"></span>
+            </span>
+          </label>
+          <label class="field-text">
+            <span class="field-text__name">Поиск</span>
+            <span class="field-text__input-wrap">
+              <input class="field-text__input" type="search" placeholder="input[type=search]">
+              <span class="field-text__help-text"></span>
+            </span>
+          </label>
+          <pre class="code">
+            <code>&lt;label class="field-text"></code>
+            <code>  &lt;span class="field-text__name">...&lt;/span></code>
+            <code>  &lt;span class="field-text__input-wrap"></code>
+            <code>    &lt;input class="field-text__input" type="text" placeholder=""></code>
+            <code>    &lt;span class="field-text__help-text">...&lt;/span></code>
+            <code>  &lt;/span></code>
+            <code>&lt;/label></code>
+            <code> </code>
+            <code>&lt;div class="field-text"></code>
+            <code>  &lt;label class="field-text__name" for="demo-field">...&lt;/label></code>
+            <code>  &lt;span class="field-text__input-wrap"></code>
+            <code>    &lt;input class="field-text__input" type="text" id="demo-field" placeholder=""></code>
+            <code>    &lt;span class="field-text__help-text">...&lt;/span></code>
+            <code>  &lt;/span></code>
+            <code>&lt;/div></code>
+            <code> </code>
+            <code>&lt;label class="field-text"></code>
+            <code>  &lt;span class="field-text__name">...&lt;/span></code>
+            <code>  &lt;span class="field-text__input-wrap"></code>
+            <code>    &lt;textarea class="field-text__input" placeholder="">&lt;/textarea></code>
+            <code>    &lt;span class="field-text__help-text">...&lt;/span></code>
+            <code>  &lt;/span></code>
+            <code>&lt;/label></code>
+          </pre>
+        </div>
+      </div>
+
+    </section>
+
   </div>
 
   <style>

src/blocks/field-text/field-text.less → src/blocks/field-text/field-text.scss

-// Для импорта в диспетчер подключений: @import './src/blocks/field-text/field-text.less';
-
-@import '../../less/variables.less';     // только для удобства обращения к переменным
-
+// В этом файле должны быть стили только для БЭМ-блока alert, его элементов,
+// модификаторов, псевдоселекторов, псевдоэлементов, $media-условий...
+// Не пишите здесь другие селекторы.
 
 .field-text {
   display: block;
-  margin-bottom: (@line-height / 2);
+  margin-bottom: ($line-height / 2);
 
   &__name {
     display: block;
-    margin-bottom: round(@line-height / 4, 2);
-    line-height: @line-height;
+    margin-bottom: 0.4em;
+    line-height: $line-height;
     font-weight: 700;
   }
 
-  &__input-wrap {}
+  &__input-wrap {
+    display: block;
+  }
 
   &__input {
     display: inline-block;
     vertical-align: middle;
     width: 100%;
-    height: 2.125em;
-    padding: @field-padding-top @field-padding-horizontal @field-padding-bottom;
-    line-height: @line-height;
-    font-size: inherit;
+    // height: 2.125em;
+    padding: $field-padding-vertical  $field-padding-horizontal;
+    line-height: $line-height;
+    font-size: 1em;
     font-family: inherit;
     background-color: #fff;
-    border: 1px solid @border-color;
-    border-radius: @border-radius;
+    border: 1px solid $border-color;
+    border-radius: $border-radius;
     appearance: textfield;
 
     &:focus {
-      .focus();
+      @include field-focus;
     }
 
     &[disabled],
     &[readonly] {
       cursor: default;
-      background-color: @gray-lighter;
+      background-color: $gray-lighter;
     }
 
     &[type='search']::-webkit-search-cancel-button,
@@ -47,27 +48,27 @@
 
     &[type='number']::-webkit-inner-spin-button,
     &[type='number']::-webkit-outer-spin-button {
-      height: auto;
+      // height: auto;
     }
 
     &[type='color'] {
-      max-width: 100px;
+      // max-width: 100px;
       padding: 0;
     }
 
     &::placeholder {
-      color: @text-color--muted;
+      color: $text-color--muted;
       opacity: 1;
     }
 
-    textarea& {
-      height: auto;
-      min-height: (@line-height * 2) + @field-padding-top + @field-padding-bottom + 0.2; // 0.2 — поправка на бордюр
-      resize: vertical;
-    }
+    // textarea.& {
+    //   height: auto;
+    //   min-height: ($line-height * 2) + ($field-padding-vertical * 2);
+    //   resize: vertical;
+    // }
   }
 
   &__help-text {
-    .help-text();
+    @include field-help-text;
   }
 }

src/scss/blocks-library.scss

@@ -106,7 +106,7 @@
     }
 
     pre {
-      margin: 0;
+      // margin: 0;
       max-height: 500px;
     }
   }