Поле выбора файла, правки для других полей

package.json

@@ -29,6 +29,7 @@
       "field-text": [],
       "field-checkbox": [],
       "field-radio": [],
+      "field-file": [],
       "field-actions": [],
       "dropdown": [],
       "menu": []

src/blocks-demo.html

@@ -963,6 +963,33 @@
 
     </section>
 
+    <section class="blocks-library__item" id="field-file" data-name=".field-file">
+
+      <h2 class="blocks-library__item-title">Файл</h2>
+
+      <div class="field-file">
+        <div class="field-file__name">Выбор файлов</div>
+        <label class="field-file__input-wrap">
+          <input class="field-file__input" type="file" data-multiple-caption="файлов выбрано: {count}" multiple>
+          <div class="field-file__name-text" data-button-text="Выбрать файл(ы)">Ничего не выбрано</div>
+          <div class="field-file__help-text">Отображение выбранного файла(ов) требует Javascript-а. Стилизация — не требует.</div>
+        </label>
+      </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 class="code">
+            <code>&lt;div class="field-actions"></code>
+            <code>  &lt;div class="field-actions__text">* — обязательные поля&lt;/div></code>
+            <code>  &lt;button class="btn">Отправить&lt;/button></code>
+            <code>&lt;/div></code>
+          </pre>
+        </div>
+      </div>
+
+    </section>
+
     <section class="blocks-library__item" id="field-actions" data-name=".field-actions">
 
       <h2 class="blocks-library__item-title">Блок отправки формы</h2>

src/blocks/field-checkbox/field-checkbox.scss

@@ -12,7 +12,7 @@ $line-height:                 1.375em !default;
     display: block;
     font-weight: 700;
     line-height: $line-height;
-    margin-bottom: round($line-height / 2);
+    margin-bottom: 0.4em;
   }
 
   &__input-wrap {

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

-// Для импорта в диспетчер подключений: @import './src/blocks/field-file/field-file.less';
+// В этом файле должны быть стили только для БЭМ-блока field-file, его элементов,
+// модификаторов, псевдоселекторов, псевдоэлементов, $media-условий...
+// Не пишите здесь другие селекторы.
 
-@import '../../less/variables.less';     // только для удобства обращения к переменным
+$gray-lightest:               hsl(0, 0%, 90%);
+$border-color:                hsl(0, 0%, 60%) !default;
 
+$line-height:                 1.375em !default;
+
+$field-padding-vertical:      0.3em !default;
+$field-padding-horizontal:    0.7em !default;
+
+$border-radius:               3px !default;
 
 .field-file {
   display: block;
-  margin-bottom: (@line-height / 2);
+  margin-bottom: ($line-height / 2);
 
   &__name {
     font-weight: 700;
     display: block;
-    margin-bottom: round(@line-height / 4, 2);
+    margin-bottom: 0.4em;
   }
 
   &__input-wrap {
@@ -24,22 +33,20 @@
     height: 1px;
     opacity: 0;
 
+    &:active ~ .field-file__name-text,
     &:focus ~ .field-file__name-text {
-      .focus();
+      @include field-focus;
     }
   }
 
   &__name-text {
     position: relative;
-    background-color: #fff;
-    border: 1px solid @border-color;
-    border-radius: @border-radius;
-    display: inline-block;
-    vertical-align: middle;
+    display: flex;
+    align-items: baseline;
     width: 100%;
-    height: 2.125em; // 16 × 2.125 = 34
-    line-height: @line-height;
-    padding-right: @field-padding-horizontal;
+    background-color: #fff;
+    border: 1px solid $border-color;
+    border-radius: $border-radius;
     white-space: nowrap;
     overflow: hidden;
     text-overflow: ellipsis;
@@ -47,29 +54,26 @@
 
     &:before {
       content: attr(data-button-text);
-      display: inline-block;
-      vertical-align: middle;
-      background-color: @gray-lighter;
-      border: 1px solid @border-color;
-      margin-right: @field-padding-horizontal;
-      height: 2.125em;
-      line-height: @line-height;
-      padding: @field-padding-top @field-padding-horizontal @field-padding-bottom;
-      transform: translateX(-1px) translateY(-1px);
-      border-top-left-radius: @border-radius;
-      border-bottom-left-radius: @border-radius;
+      display: block;
+      background-color: $gray-lightest;
+      border-right: 1px solid $border-color;
+      margin-right: $field-padding-horizontal;
+      line-height: $line-height;
+      padding: $field-padding-vertical  $field-padding-horizontal;
+      border-top-left-radius: $border-radius;
+      border-bottom-left-radius: $border-radius;
     }
 
     &:hover,
     &:focus {
 
       &:before {
-        background-color: darken(@gray-lighter, 10%); // как у обычных кнопок
+        background-color: darken($gray-lightest, 10%); // как у обычных кнопок
       }
     }
   }
 
   &__help-text {
-    .help-text();
+    @include field-help-text;
   }
 }

src/blocks/field-radio/field-radio.scss

@@ -12,7 +12,7 @@ $line-height:                 1.375em !default;
     display: block;
     font-weight: 700;
     line-height: $line-height;
-    margin-bottom: round($line-height / 2);
+    margin-bottom: 0.4em;
   }
 
   &__input-wrap {

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

@@ -2,8 +2,8 @@
 // модификаторов, псевдоселекторов, псевдоэлементов, $media-условий...
 // Не пишите здесь другие селекторы.
 
-$border-color:                hsl(0, 0%, 60%) !default;
 $gray-lighter:                hsl(0, 0%, 80%) !default;
+$border-color:                hsl(0, 0%, 60%) !default;
 
 $text-color--muted:           hsl(0, 0%, 50%) !default;