Добавил field-range

package.json

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

src/blocks-demo.html

@@ -990,6 +990,35 @@
 
     </section>
 
+    <section class="blocks-library__item" id="field-range" data-name=".field-range">
+
+      <h2 class="blocks-library__item-title">Range</h2>
+
+      <div class="field-range">
+        <div class="field-range__name">Range</div>
+        <div class="field-range__input-wrap">
+          <input class="field-range__input" type="range" min="1" max="100" step="1" value="70">
+          <div class="field-range__help-text"><code>min="1" max="100" step="1" value="70"</code>, стилизован без JS.</div>
+        </div>
+      </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-range"></code>
+            <code>  &lt;div class="field-range__name">Range&lt;/div></code>
+            <code>  &lt;div class="field-range__input-wrap"></code>
+            <code>    &lt;input class="field-range__input" type="range" min="1" max="100" step="1" value="70"></code>
+            <code>    &lt;div class="field-range__help-text">&lt;code>min="1" max="100" step="1" value="70"&lt;/code>&lt;/div></code>
+            <code>  &lt;/div></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

@@ -57,6 +57,11 @@ $line-height:                 1.375em !default;
     margin: 0;
     transform: translateY(-50%);
 
+    &:focus,
+    &:active {
+      @include field-focus;
+    }
+
     // сокрытие инпута в случае использования своего чекбокса
     // top: 0;
     // left: 0;

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

@@ -57,6 +57,11 @@ $line-height:                 1.375em !default;
     margin: 0;
     transform: translateY(-50%);
 
+    &:focus,
+    &:active {
+      @include field-focus;
+    }
+
     // сокрытие инпута в случае использования своего чекбокса
     // top: 0;
     // left: 0;

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

-@import '../../less/variables.less';     // только для удобства обращения к переменным
+// В этом файле должны быть стили только для БЭМ-блока field-range, его элементов,
+// модификаторов, псевдоселекторов, псевдоэлементов, $media-условий...
+// Не пишите здесь другие селекторы.
 
+$gray-lightest:               hsl(0, 0%, 90%);
+$border-color:                hsl(0, 0%, 60%) !default;
+
+$line-height:                 1.375em !default;
+
+$border-radius:               3px !default;
 
 .field-range {
   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);
-    line-height: @line-height;
+    margin-bottom: 0.4em;
+    line-height: $line-height;
   }
 
   &__input-wrap {
@@ -34,8 +42,7 @@
     }
 
     &:focus {
-      outline: 0;
-      box-shadow: 0 0 0 2px rgba(2, 117, 216, 0.3);
+      @include field-focus;
     }
 
 
@@ -43,26 +50,26 @@
     // Фоновая линия ползунка
 
     // Да, да, и это — локальная примесь.
-    .field-range-runnable-track() {
+    @mixin field-range-runnable-track {
       box-sizing: border-box;
       width: 100%;
       height: 0.75em;
-      border-radius: @border-radius;
-      background: @gray-lighter;
-      border: 1px solid @border-color;
+      border-radius: $border-radius;
+      background: #fff;
+      border: 1px solid $border-color;
     }
 
     // Увы, тут похожие наборы свойств приходится писать порознь.
     &::-webkit-slider-runnable-track {
-      .field-range-runnable-track(); // локальная примесь!
+      @include field-range-runnable-track;
     }
 
     &::-moz-range-track {
-      .field-range-runnable-track(); // локальная примесь!
+      @include field-range-runnable-track;
     }
 
     &::-ms-track {
-      .field-range-runnable-track(); // локальная примесь!
+      @include field-range-runnable-track;
       color: transparent;
     }
 
@@ -70,7 +77,7 @@
     // Смещающийся элемент ползунка
 
     // Да, да, и это — локальная примесь.
-    .field-range-slider-thumb() {
+    @mixin field-range-slider-thumb {
       box-sizing: border-box;
       padding: 0;
       width: 2em;
@@ -78,21 +85,21 @@
       border-radius: 1em;
       box-shadow: none;
       cursor: ew-resize;
-      background: @gray-lightest;
-      border: 1px solid @border-color;
+      background: $gray-lightest;
+      border: 1px solid $border-color;
     }
 
     &::-webkit-slider-thumb {
       margin-top: -0.68em;
-      .field-range-slider-thumb(); // локальная примесь!
+      @include field-range-slider-thumb; // локальная примесь!
     }
 
     &::-moz-range-thumb {
-      .field-range-slider-thumb(); // локальная примесь!
+      @include field-range-slider-thumb; // локальная примесь!
     }
 
     &::-ms-thumb {
-      .field-range-slider-thumb(); // локальная примесь!
+      @include field-range-slider-thumb; // локальная примесь!
     }
 
     &::-ms-fill-lower,
@@ -102,7 +109,7 @@
   }
 
   &__help-text {
-    .help-text();
+    @include field-help-text;
     padding-top: 0;
   }
 }

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

-// Для импорта в диспетчер подключений: @import './src/blocks/field-range/field-range.less';range
-
-@import '../../less/variables.less';     // только для удобства обращения к переменным
-
-
-.field-range {
-
-  &__line {
-    position: relative;
-    margin-left: e('calc(1em + 1px)');
-    margin-right: e('calc(1em + 1px)');
-    display: flex;
-    justify-content: space-between;
-  }
-
-  &__line-item {
-    position: relative;
-    display: block;
-    border-right: 1px solid @border-color;
-    color: @border-color;
-    flex-grow: 1;
-    flex-basis: 0;
-    max-width: 100%;
-    text-align: right;
-    padding-top: 0.7em;
-    margin-top: 1em;
-
-    &:before {
-      content: attr(data-line-value);
-      position: absolute;
-      right: 0;
-      transform: translateX(50%);
-      bottom: e('calc(100% + 0.3em)');
-      font-size: @font-size--small;
-      line-height: 1;
-      white-space: nowrap;
-    }
-
-    &:first-child {
-      position: absolute;
-      left: 0;
-      bottom: 0;
-    }
-  }
-}
-