add fields-group

src/blocks/btn/btn.less

@@ -4,7 +4,7 @@
 
 .btn {
   .btn();
-  .btn-color(@text-color; @gray-lighter; @gray-lighter);
+  .btn-color(@text-color; @gray-lighter; @gray-light);
   .btn-size();
 
   &--main {

src/blocks/field-checkbox/field-checkbox.less

@@ -22,15 +22,13 @@
     font-weight: 400;
     display: inline-block;
     margin-right: .6em;
-    margin-bottom: .2em;
     line-height: @line-height;
   }
 
   &__input {
     position: absolute;
-    top: 50%;
+    top: .25em;
     left: 0;
-    transform: translate(0, -50%);
   }
 
   &__help-text {

src/blocks/field-file/field-file.less

@@ -39,7 +39,6 @@
     height: 2.125em; // 16 × 2.125 = 34
     line-height: @line-height;
     padding-right: @field-padding-horizontal;
-    margin-bottom: round(@line-height / 3, 2);
     white-space: nowrap;
     overflow: hidden;
     text-overflow: ellipsis;
@@ -60,9 +59,12 @@
       border-bottom-left-radius: @border-radius;
     }
 
-    // .field-file__input:focus ~ & {
-    //   .focus();
-    // }
+    &:hover, &:focus {
+      &:before {
+        background-color: darken(@gray-lighter, 10%); // как у обычных кнопок
+      }
+    }
+
   }
 
   &__help-text {

src/blocks/field-radio/field-radio.less

@@ -22,14 +22,12 @@
     font-weight: 400;
     display: inline-block;
     margin-right: .6em;
-    margin-bottom: .2em;
   }
 
   &__input {
     position: absolute;
-    top: 50%;
+    top: .25em;
     left: 0;
-    transform: translate(0, -50%);
   }
 
   &__help-text {

src/blocks/field-range/field-range.less

@@ -17,7 +17,6 @@
   }
 
   &__input {
-    margin-bottom: round(@line-height / 3, 2);
     align-self: center;
     padding: 0;
     width: 100%;

src/blocks/field-select/field-select.less

@@ -15,7 +15,6 @@
   &__input-wrap {}
 
   &__select {
-    margin-bottom: round(@line-height / 3, 2);
     appearance: none;
     background-image: data-uri('image/svg+xml;charset=UTF-8', './src/blocks/field-select/img_to_bg/select-down.svg');
     background-repeat: no-repeat;

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

@@ -15,7 +15,6 @@
   &__input-wrap {}
 
   &__input {
-    margin-bottom: round(@line-height / 3, 2);
 
     textarea& {
       min-height: (@line-height * 2) + @field-padding-top + @field-padding-bottom + .2; // .2 — поправка на бордюр

src/blocks/field-toggler/field-toggler.less

@@ -22,7 +22,6 @@
     font-weight: 400;
     display: inline-block;
     margin-right: .6em;
-    margin-bottom: .2em;
     line-height: @line-height;
   }
 

src/blocks/fields-group/fields-group.html

+<!--DEV
+
+<div class="fields-group">
+  <label class="field-text  fields-group__item">
+    <input class="field-text__input" type="text" placeholder="input[type=text]">
+  </label>
+  <label class="field-text  fields-group__item">
+    <input class="field-text__input" type="text" placeholder="input[type=text]">
+  </label>
+  <label class="field-text  fields-group__item">
+    <input class="field-text__input" type="text" placeholder="input[type=text]">
+  </label>
+</div>
+
+<div class="fields-group">
+  <label class="field-text  fields-group__item">
+    <input class="field-text__input" type="text" placeholder="input[type=text]">
+    <small class="field-select__help-text">Пояснение отдельного поля, если длинное, распирает блок? Нет.</small>
+  </label>
+  <label class="field-text  fields-group__item">
+    <input class="field-text__input" type="text" placeholder="input[type=text]">
+    <small class="field-select__help-text">Пояснение.</small>
+  </label>
+  <label class="field-text  fields-group__item">
+    <input class="field-text__input" type="text" placeholder="input[type=text]">
+    <small class="field-select__help-text">Пояснение еще.</small>
+  </label>
+</div>
+
+<div class="fields-group">
+  <span class="fields-group__item  fields-group__item--addon  fields-group__item--text">
+    $
+  </span>
+  <label class="field-text  fields-group__item">
+    <input class="field-text__input" type="text" placeholder="input[type=text]">
+  </label>
+  <span class="fields-group__item  fields-group__item--addon  fields-group__item--text">
+    какой-то текст
+  </span>
+</div>
+
+<div class="fields-group">
+  <span class="fields-group__item  fields-group__item--addon  fields-group__item--text">
+    $
+  </span>
+  <label class="field-text  fields-group__item">
+    <input class="field-text__input" type="text" placeholder="input[type=text]">
+  </label>
+  <button class="btn  fields-group__item  fields-group__item--addon">Отправить</button>
+  <button class="btn  fields-group__item  fields-group__item--addon">Отменить</button>
+</div>
+
+-->

src/blocks/fields-group/fields-group.less

+@import "../../less/variables.less";     // только для удобства обращения к переменным
+@import "../../less/mixins/mixins.less"; // только для удобства обращения к примесям
+
+
+.fields-group {
+  display: flex;
+  margin-bottom: (@line-height / 2);
+
+  &__item {
+    margin-bottom: 0;
+    // flex: 0 0 auto;
+    flex-basis: 100%;
+    // flex: 1;
+
+    &--text {
+      white-space: nowrap;
+      background-color: @gray-lighter;
+      color: @gray;
+      border: @border-width solid @border-color;
+      border-radius: @border-radius;
+      display: inline-block;
+      vertical-align: middle;
+      line-height: @line-height;
+      min-height: 2.125em;
+      padding: @field-padding-top @field-padding-horizontal @field-padding-bottom;
+    }
+
+    &--addon {
+      // flex-grow: 0;
+      flex-basis: 1%;
+
+      &:not(:last-child) {
+        border-top-right-radius: 0;
+        border-bottom-right-radius: 0;
+      }
+
+      &:not(:first-child) {
+        border-top-left-radius: 0;
+        border-bottom-left-radius: 0;
+      }
+    }
+
+    &:not(:last-child) {
+      input {
+        border-top-right-radius: 0;
+        border-bottom-right-radius: 0;
+      }
+    }
+
+    &:not(:first-child) {
+
+      margin-left: (@border-width * -1);
+
+      input {
+        border-top-left-radius: 0;
+        border-bottom-left-radius: 0;
+      }
+    }
+
+    input {
+      position: relative;
+
+      &:focus {
+        z-index: 1;
+      }
+    }
+
+  }
+}

src/blocks_library.html

@@ -497,6 +497,7 @@
         </form>
       </div>
       <div class="col-md-6">
+
         <form action="" class="form  form--horizontal">
           <fieldset>
             <legend>Горизонтальная форма</legend>
@@ -586,6 +587,62 @@
             </div>
           </fieldset>
         </form>
+
+        <form action="" class="form">
+          <fieldset>
+            <legend>Группы полей</legend>
+            <div class="fields-group">
+              <label class="field-text  fields-group__item">
+                <input class="field-text__input" type="text" placeholder="input[type=text]">
+              </label>
+              <label class="field-text  fields-group__item">
+                <input class="field-text__input" type="text" placeholder="input[type=text]">
+              </label>
+              <label class="field-text  fields-group__item">
+                <input class="field-text__input" type="text" placeholder="input[type=text]">
+              </label>
+            </div>
+            <div class="fields-group">
+              <label class="field-text  fields-group__item">
+                <input class="field-text__input" type="text" placeholder="input[type=text]">
+                <small class="field-select__help-text">Пояснение отдельного поля, если длинное, распирает блок? Нет.</small>
+              </label>
+              <label class="field-text  fields-group__item">
+                <input class="field-text__input" type="text" placeholder="input[type=text]">
+                <small class="field-select__help-text">Пояснение.</small>
+              </label>
+              <label class="field-text  fields-group__item">
+                <input class="field-text__input" type="text" placeholder="input[type=text]">
+                <small class="field-select__help-text">Пояснение еще.</small>
+              </label>
+            </div>
+            <div class="fields-group">
+              <span class="fields-group__item  fields-group__item--addon  fields-group__item--text">
+                $
+              </span>
+              <label class="field-text  fields-group__item">
+                <input class="field-text__input" type="text" placeholder="input[type=text]">
+              </label>
+              <span class="fields-group__item  fields-group__item--addon  fields-group__item--text">
+                какой-то текст
+              </span>
+            </div>
+            <div class="fields-group">
+              <span class="fields-group__item  fields-group__item--addon  fields-group__item--text">
+                $
+              </span>
+              <label class="field-text  fields-group__item">
+                <input class="field-text__input" type="text" placeholder="input[type=text]">
+              </label>
+              <button class="btn  fields-group__item  fields-group__item--addon">Отправить</button>
+              <button class="btn  fields-group__item  fields-group__item--addon">Отменить</button>
+            </div>
+            <div class="field-actions">
+              <button class="btn">Отправить</button>
+            </div>
+          </fieldset>
+        </form>
+
       </div>
     </div>
   </section>

src/less/global-scaffolding.less

@@ -411,7 +411,7 @@ input[type="search"],
 input[type="color"],
 input[type="tel"] {
   background-color: #fff;
-  border: 1px solid @border-color;
+  border: @border-width solid @border-color;
   border-radius: @border-radius;
   display: inline-block;
   vertical-align: middle;

src/less/mixins/forms-mixins.less

@@ -3,6 +3,7 @@
   font-size: @font-size--small-percent;
   line-height: 1.2em;
   color: @text-color--muted;
+  padding-top: 0.417em;
 
   &:empty {
     display: none;

src/less/style.less

@@ -22,3 +22,4 @@
 @import "./src/blocks/sprite-svg--localstorage/sprite-svg--localstorage.less";
 @import "./src/blocks/field-toggler/field-toggler.less";
 @import "./src/blocks/dropdown/dropdown.less";
+@import "./src/blocks/fields-group/fields-group.less";

src/less/variables.less

@@ -89,5 +89,6 @@
 // Разное
 
 @border-radius:               .3rem;       // универсальное сглаживание углов бордюра
+@border-width:                1px;         // универсальная толщина бордюра
 @opacity:                     .7;          // универсальная прозрачность
 @transition-time:             .3s;         // время плавных переходов