Добавил field-toggler

package.json

@@ -29,8 +29,10 @@
       "field-text": [],
       "field-checkbox": [],
       "field-radio": [],
+      "field-toggler": [],
       "field-file": [],
       "field-range": [],
+      "field-select": [],
       "field-actions": [],
       "dropdown": [],
       "menu": []

src/blocks-demo.html

@@ -963,6 +963,41 @@
 
     </section>
 
+    <section class="blocks-library__item" id="field-toggler" data-name=".field-toggler">
+
+      <h2 class="blocks-library__item-title">Переключатели</h2>
+
+      <div class="field-toggler">
+        <div class="field-toggler__title">Переключатели-флажки</div>
+        <div class="field-toggler__input-wrap">
+          <label class="field-toggler__name">
+            <input class="field-toggler__input" type="checkbox">
+            <span class="field-toggler__name-text">Использовать</span>
+          </label>
+          <div class="field-toggler__help-text">Графика не используется, всё нарисовано CSS-ом.</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-toggler"></code>
+            <code>  &lt;div class="field-toggler__title">Переключатели-флажки&lt;/div></code>
+            <code>  &lt;div class="field-toggler__input-wrap"></code>
+            <code>    &lt;label class="field-toggler__name"></code>
+            <code>      &lt;input class="field-toggler__input" type="checkbox"></code>
+            <code>      &lt;span class="field-toggler__name-text">Использовать&lt;/span></code>
+            <code>    &lt;/label></code>
+            <code>    &lt;div class="field-toggler__help-text">Графика не используется, всё нарисовано CSS-ом.&lt;/div></code>
+            <code>  &lt;/div></code>
+            <code>&lt;/div></code>
+          </pre>
+        </div>
+      </div>
+
+    </section>
+
     <section class="blocks-library__item" id="field-file" data-name=".field-file">
 
       <h2 class="blocks-library__item-title">Файл</h2>
@@ -1019,6 +1054,49 @@
 
     </section>
 
+    <section class="blocks-library__item" id="field-select" data-name=".field-select">
+
+      <h2 class="blocks-library__item-title">Селект</h2>
+
+      <label class="field-select">
+        <div class="field-select__name">Селект</div>
+        <div class="field-select__select-wrap">
+          <select class="field-select__select">
+            <optgroup label="Группа">
+              <option>Значение 1</option>
+              <option>Значение 2</option>
+              <option>Значение 3</option>
+            </optgroup>
+            <option>Значение 10</option>
+          </select>
+          <div class="field-select__help-text">Обёртка — <code>&lt;label&gt;</code>.</div>
+        </div>
+      </label>
+
+      <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;label class="field-select"></code>
+            <code>  &lt;div class="field-select__name">Селект&lt;/div></code>
+            <code>  &lt;div class="field-select__select-wrap"></code>
+            <code>    &lt;select class="field-select__select"></code>
+            <code>      &lt;optgroup label="Группа"></code>
+            <code>        &lt;option>Значение 1&lt;/option></code>
+            <code>        &lt;option>Значение 2&lt;/option></code>
+            <code>        &lt;option>Значение 3&lt;/option></code>
+            <code>      &lt;/optgroup></code>
+            <code>      &lt;option>Значение 10&lt;/option></code>
+            <code>    &lt;/select></code>
+            <code>    &lt;div class="field-select__help-text">Обёртка — &lt;code>&lt;label&gt;&lt;/code>.&lt;/div></code>
+            <code>  &lt;/div></code>
+            <code>&lt;/label></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-select/field-select.less → src/blocks/field-select/field-select.scss

-// Для импорта в диспетчер подключений: @import './src/blocks/field-select/field-select.less';
+// В этом файле должны быть стили только для БЭМ-блока field-select, его элементов,
+// модификаторов, псевдоселекторов, псевдоэлементов, $media-условий...
+// Не пишите здесь другие селекторы.
 
-@import '../../less/variables.less';     // только для удобства обращения к переменным
+$gray-lightest:               hsl(0, 0%, 90%);
+$border-color:                hsl(0, 0%, 60%) !default;
 
+$line-height:                 1.375em !default;
+
+$border-radius:               3px !default;
 
 .field-select {
   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 {}
@@ -19,23 +25,21 @@
     display: inline-block;
     vertical-align: middle;
     width: 100%;
-    height: 2.125em;
-    line-height: @line-height;
-    padding: @field-padding-top 1.8em @field-padding-bottom @field-padding-horizontal;
+    line-height: $line-height;
+    padding: $field-padding-vertical $field-padding-horizontal;
     font-size: inherit;
     font-family: inherit;
-    border: 1px solid @border-color;
-    border-radius: @border-radius;
+    border: 1px solid $border-color;
+    border-radius: $border-radius;
     appearance: none;
     background-color: #fff;
-    background-image: data-uri('image/svg+xml;charset=UTF-8', './src/blocks/field-select/img_to_bg/select-down.svg');
+    background-image: svg-load('../blocks/field-select/img_to_bg/select-down.svg');
     background-repeat: no-repeat;
     background-position: right 0.3em center;
     background-size: 1.063em 0.688em;
 
     &[multiple] {
       background-image: none;
-      height: auto;
       min-height: 6.8em;
     }
 
@@ -43,18 +47,19 @@
       display: none;
     }
 
+    &:active,
     &:focus {
-      .focus();
+      @include field-focus;
     }
 
     &[disabled],
     &[readonly] {
       cursor: default;
-      background-color: @gray-lighter;
+      background-color: $gray-lightest;
     }
   }
 
   &__help-text {
-    .help-text();
+    @include field-help-text;
   }
 }

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

-// Для импорта в диспетчер подключений: @import './src/blocks/field-toggler/field-toggler.less';
-
-@import '../../less/variables.less';     // только для удобства обращения к переменным
-
-
-.field-toggler {
-  display: block;
-  margin-bottom: (@line-height / 2);
-
-  &__title {
-    font-weight: 700;
-    line-height: @line-height;
-    display: block;
-    margin-bottom: round(@line-height / 4, 2);
-    min-height: 1px;
-  }
-
-  &__input-wrap {}
-
-  &__name {
-    position: relative;
-    padding-left: 43px;
-    font-weight: 400;
-    display: inline-block;
-    margin-right: 0.6em;
-    line-height: @line-height;
-    min-height: 20px;
-  }
-
-  &__input {
-    position: absolute;
-    opacity: 0;
-
-    // Оболочка, в которой двигается контрол
-    & + .field-toggler__name-text:before {
-      content: '';
-      width: 34px;
-      height: 20px;
-      // border-radius: 10px; // возможность выбтро скруглить
-      position: absolute;
-      top: 0.7em;
-      transform: translateY(-50%);
-      left: 0;
-      background-color: @gray-lighter;
-      border: 1px solid @border-color;
-      transition: background-color 0.3s;
-    }
-
-    // Двигающийся контрол
-    & + .field-toggler__name-text:after {
-      content: '';
-      position: absolute;
-      top: 0.7em;
-      transform: translateY(-50%);
-      left: 2px;
-      width: 16px;
-      height: 16px;
-      // border-radius: 8px; // возможность выбтро скруглить
-      background: #fff;
-      border: 1px solid @border-color;
-      transition: left 0.3s;
-    }
-
-    // Состояние оболочки, когда переключатель включён
-    &:checked + .field-toggler__name-text:before {
-      background-color: @gray-light;
-      border: 1px solid @gray;
-    }
-
-    // Состояние контрола, когда переключатель включён
-    &:checked + .field-toggler__name-text:after {
-      left: 16px;
-      border: 1px solid @gray;
-    }
-
-    &:focus + .field-toggler__name-text:before {
-      .focus();
-    }
-  }
-
-  &__help-text {
-    .help-text();
-    padding-left: 43px;
-  }
-}
-

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

+// В этом файле должны быть стили только для БЭМ-блока field-select, его элементов,
+// модификаторов, псевдоселекторов, псевдоэлементов, $media-условий...
+// Не пишите здесь другие селекторы.
+
+$gray-lightest:               hsl(0, 0%, 90%);
+$border-color:                hsl(0, 0%, 60%) !default;
+
+$line-height:                 1.375em !default;
+
+.field-toggler {
+  display: block;
+  margin-bottom: ($line-height / 2);
+
+  &__title {
+    display: block;
+    font-weight: 700;
+    line-height: $line-height;
+    margin-bottom: 0.4em;
+  }
+
+  &__input-wrap {
+
+    & + & {
+      margin-top: ($line-height / 2);
+    }
+  }
+
+  &__name {
+    position: relative;
+    display: inline-block;
+    padding-left: 3.2em;
+    margin-right: 0.6em;
+    font-weight: 400;
+    line-height: $line-height;
+  }
+
+  &__name-text {
+
+    &:before {
+      content: '';
+      position: absolute;
+      top: 0.6em;
+      left: 0;
+      width: 2.6em;
+      height: 1.2em;
+      transform: translateY(-50%);
+      background-color: #fff;
+      border: 1px solid $border-color;
+    }
+
+    &:after {
+      content: '';
+      position: absolute;
+      top: 0.6em;
+      left: 0;
+      width: 1.2em;
+      height: 1.2em;
+      transform: translateY(-50%);
+      background-color: $gray-lightest;
+      border: 1px solid $border-color;
+      transition: all 0.3s;
+    }
+
+    @at-root input:checked ~ &:after {
+      transform: translate(1.4em, -50%);
+    }
+  }
+
+  &__input {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 0;
+    height: 0;
+    visibility: hidden;
+
+    &:focus,
+    &:active {
+      @include field-focus;
+    }
+  }
+
+  &__help-text-wrap {
+    padding-left: 1.5em;
+  }
+
+  &__help-text {
+    @include field-help-text;
+  }
+}