Группа полей и большая унификация стилей полей

projectConfig.json

@@ -56,7 +56,8 @@
     "tabs": [],
     "object-fit-polyfill": [],
     "embed-responsive": [],
-    "pie-chart": []
+    "pie-chart": [],
+    "fields-group": []
   },
   "addCssBefore": [
     "./src/scss/variables.scss",

src/blocks-demo.html

@@ -996,13 +996,65 @@
 
     </section>
 
+    <section class="blocks-library__item  blocks-library__item--menusep" id="fields-group" data-name=".fields-group">
+
+      <h2 class="blocks-library__item-title">Группа полей</h2>
+
+      <form action="https://httpbin.org/post" class="form" method="post">
+
+        <div class="fields-group">
+          <label class="field-text">
+            <span class="field-text__input-wrap">
+              <input class="field-text__input" type="text" placeholder="input[type=text]">
+            </span>
+          </label>
+          <div class="field-actions">
+            <button class="btn">Отправить</button>
+          </div>
+        </div>
+
+        <div class="fields-group">
+          <label class="field-text">
+            <span class="field-text__input-wrap">
+              <input class="field-text__input" type="text" placeholder="input[type=text]">
+              <span class="field-text__help-text">Помощь</span>
+            </span>
+          </label>
+          <label class="field-text">
+            <span class="field-text__input-wrap">
+              <input class="field-text__input" type="text" placeholder="input[type=text]">
+              <span class="field-text__help-text">Помощь</span>
+            </span>
+          </label>
+          <div class="field-actions">
+            <button class="btn">Отправить</button>
+          </div>
+        </div>
+
+      </form>
+
+      <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 class="code">
+            <!-- <code>&lt;form action="https://httpbin.org/post" class="form" method="post"></code>
+            <code>    &lt;legend>Название формы&lt;/legend></code>
+            <code>    &lt;label class="field-text">...&lt;/label></code>
+            <code>    &lt;div class="field-actions">...&lt;/div></code>
+            <code>&lt;/form></code> -->
+          </pre>
+        </div>
+      </div>
+
+    </section>
+
     <section class="blocks-library__item  blocks-library__item--menusep" id="form" data-name=".form">
 
       <h2 class="blocks-library__item-title">Форма</h2>
 
       <form action="https://httpbin.org/post" class="form" method="post">
-        <fieldset>
-          <legend>Название формы</legend>
+        <fieldset class="form__fieldset">
+          <legend class="form__legend">Легенда</legend>
           <label class="field-text">
             <span class="field-text__name">Текстовое поле</span>
             <span class="field-text__input-wrap">

src/blocks/field-file/field-file.scss

@@ -20,9 +20,7 @@ $border-radius:               3px !default;
   margin-bottom: ($line-height / 2);
 
   &__name {
-    font-weight: 700;
-    display: block;
-    margin-bottom: 0.4em;
+    @include field-name;
   }
 
   &__input-wrap {

src/blocks/field-range/field-range.scss

@@ -17,10 +17,7 @@ $border-radius:               3px !default;
   margin-bottom: ($line-height / 2);
 
   &__name {
-    font-weight: 700;
-    display: block;
-    margin-bottom: 0.4em;
-    line-height: $line-height;
+    @include field-name;
   }
 
   &__input-wrap {

src/blocks/field-select/field-select.scss

@@ -17,9 +17,7 @@ $border-radius:               3px !default;
   margin-bottom: ($line-height / 2);
 
   &__name {
-    font-weight: 700;
-    display: block;
-    margin-bottom: 0.4em;
+    @include field-name;
   }
 
   &__input-wrap {}

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

@@ -22,10 +22,7 @@ $border-radius:               3px !default;
   margin-bottom: ($line-height / 2);
 
   &__name {
-    display: block;
-    margin-bottom: 0.4em;
-    line-height: $line-height;
-    font-weight: 700;
+    @include field-name;
   }
 
   &__input-wrap {

src/blocks/field-toggler/field-toggler.scss

@@ -15,10 +15,7 @@ $line-height:                 1.375em !default;
   margin-bottom: ($line-height / 2);
 
   &__title {
-    display: block;
-    font-weight: 700;
-    line-height: $line-height;
-    margin-bottom: 0.4em;
+    @include field-name;
   }
 
   &__input-wrap {

src/blocks/form/form.scss

@@ -12,11 +12,7 @@ $line-height:                 1.375em !default;
 
   $block-name:                &; // #{$block-name}__element
 
-  &:not(:last-child) {
-    margin-bottom: $line-height;
-  }
-
-  fieldset {
+  &__fieldset {
     min-width: 0;
     padding: 0;
     margin: 0;
@@ -27,7 +23,7 @@ $line-height:                 1.375em !default;
     }
   }
 
-  legend {
+  &__legend {
     display: block;
     width: 100%;
     margin-top: $line-height;

src/scss/mixins/form-mixins.scss

@@ -21,3 +21,13 @@
   outline: 0;
   box-shadow: 0 0 0 2px rgba($color-main, $opacity);
 }
+
+
+@mixin field-name {
+  $line-height:                 1.375em !default;
+
+  display: block;
+  margin-bottom: 0.4em;
+  line-height: $line-height;
+  font-weight: 700;
+}