forms

src/_blocks_library.html

@@ -416,17 +416,15 @@
           <fieldset>
             <legend>Инлайн форма</legend>
             <div class="field">
-              <label class="field__name" for="field_id_001">Название поля</label>
+              <label class="field__name" for="field_id_001">Логин</label>
               <div class="field__input-wrap">
                 <input class="field__input-text" id="field_id_001" type="text" placeholder="input[type=text]">
-                <div class="field__help-text">Лейбл отдельно, обёртка — <code>&lt;div&gt;</code>, связь с лейблом по <code>id</code>.</div>
               </div>
             </div>
             <label class="field">
-              <div class="field__name">Название поля</div>
+              <div class="field__name">Пароль</div>
               <div class="field__input-wrap">
-                <input class="field__input-text" type="text" placeholder="input[type=text]">
-                <div class="field__help-text">Обёртка — <code>&lt;label&gt;</code>.</div>
+                <input class="field__input-text" type="password" placeholder="input[type=password]">
               </div>
             </label>
             <div class="field  field--actions">

src/less/blocks/form.less

@@ -2,4 +2,42 @@
   &:not(:last-child) {
     margin-bottom: @line-height;
   }
+
+  &--horizontal {
+    .field {
+      display: flex;
+    }
+
+    .field__name {
+      width: 15rem;
+      padding-top: .42em;
+      padding-right: .3em;
+    }
+
+    .field__input-wrap {
+      flex-grow: 10;
+    }
+
+    .field--actions {
+      padding-left: 15rem;
+    }
+  }
+
+  &--inline {
+    .field {
+      display: inline-block;
+      vertical-align: top;
+    }
+
+    .field__name {
+      display: inline-block;
+      vertical-align: top;
+      padding-top: .42em;
+    }
+
+    .field__input-wrap {
+      display: inline-block;
+      vertical-align: top;
+    }
+  }
 }