Добавил в библиотеку блок сравнения полей и кнопок

src/blocks_library.html

@@ -3497,16 +3497,50 @@
 
 
   <section class="blocks-library__item" id="form-mariage">
-    <h1 class="blocks-library__item-title">TODO: Комбинации элементов форм</h1>
+    <h1 class="blocks-library__item-title">Комбинации элементов форм</h1>
     <p>Сравнение и тестирование комбинаций элементов форм по умолчанию и с модификаторами.</p>
     <div class="js-font-resizer">
-      111
+      <form action="" class="form  form--line">
+        <label class="field-text">
+          <div class="field-text__input-wrap">
+            <input class="field-text__input" type="text" placeholder="input[type=text]">
+          </div>
+        </label>
+        <button class="btn">Отправить</button>
+      </form>
+      <form action="" class="form  form--line">
+        <label class="field-text  field-text--lg">
+          <div class="field-text__input-wrap">
+            <input class="field-text__input" type="text" placeholder="input[type=text]">
+          </div>
+        </label>
+        <button class="btn  btn--lg">Отправить</button>
+      </form>
+      <form action="" class="form  form--line">
+        <label class="field-text  field-text--sm">
+          <div class="field-text__input-wrap">
+            <input class="field-text__input" type="text" placeholder="input[type=text]">
+          </div>
+        </label>
+        <button class="btn  btn--sm">Отправить</button>
+      </form>
     </div>
     <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">
         <pre>
-          <code class="html">111</code>
+          <code class="html">&lt;form action=&quot;&quot; class=&quot;form  form--line&quot;&gt;</code>
+          <code class="html">  &lt;label class=&quot;field-text&quot;&gt;...&lt;/label&gt;</code>
+          <code class="html">  &lt;button class=&quot;btn&quot;&gt;&#x41e;&#x442;&#x43f;&#x440;&#x430;&#x432;&#x438;&#x442;&#x44c;&lt;/button&gt;</code>
+          <code class="html">&lt;/form&gt;</code>
+          <code class="html">&lt;form action=&quot;&quot; class=&quot;form  form--line&quot;&gt;</code>
+          <code class="html">  &lt;label class=&quot;field-text  field-text--lg&quot;&gt;...&lt;/label&gt;</code>
+          <code class="html">  &lt;button class=&quot;btn  btn--lg&quot;&gt;&#x41e;&#x442;&#x43f;&#x440;&#x430;&#x432;&#x438;&#x442;&#x44c;&lt;/button&gt;</code>
+          <code class="html">&lt;/form&gt;</code>
+          <code class="html">&lt;form action=&quot;&quot; class=&quot;form  form--line&quot;&gt;</code>
+          <code class="html">  &lt;label class=&quot;field-text  field-text--sm&quot;&gt;...&lt;/label&gt;</code>
+          <code class="html">  &lt;button class=&quot;btn  btn--sm&quot;&gt;&#x41e;&#x442;&#x43f;&#x440;&#x430;&#x432;&#x438;&#x442;&#x44c;&lt;/button&gt;</code>
+          <code class="html">&lt;/form&gt;</code>
         </pre>
       </div>
     </div>

src/less/mixins/btn-mixins.less

@@ -8,7 +8,8 @@
 //------------------------------------------------------------------------------
 
 .btn() {
-  display: inline-block;
+  display: inline-flex;
+  align-items: center;
   position: relative;
   padding: @field-padding-top @field-padding-horizontal @field-padding-bottom;
   text-align: center;
@@ -22,6 +23,7 @@
   border: 1px solid;
   box-sizing: border-box;
   border-radius: @border-radius;
+  min-height: 2.125em;
 
   &--hover,
   &:hover {