field-toggler

TODO

 ☐ Добавить сексуальную стилизацию страницы библиотеки компонентов
 ☐ Сделать: таблицы — адаптивные таблицы — добавлять дата-атрибуты JS-ом
-☐ Сделать: Селект с идентичными везде уголками
+☐ Сделать: Селект с идентичными везде уголками и одинаковой высотой на win и osx
 ☐ Сделать: Флажок-свитчер, радиокнопку-свитчер
 ☐ Сделать: Кнопки: группа, в т.ч. с выпадающими элементами
 ☐ Сделать: Флажки и радиокнопки, выглядящеи как обычные кнопки

src/blocks/field-toggler/field-toggler.html

+<!--DEV
+
+Нужно убрать пробел между @-ами:
+
+@ @include('blocks/field-toggler/field-toggler.html',{
+  "name": "Переключатель",
+  "type": "checkbox",
+  "text": "Флажок",
+  "checked": "",
+  "helpText": "Какое-то описание"
+})
+
+-->
+<div class="field-toggler">
+  <div class="field-toggler__title">@@name</div>
+  <div class="field-toggler__input-wrap">
+    <label class="field-toggler__name">
+      <input class="field-toggler__input" type="@@type" @@checked>
+      <span class="field-toggler__name-text">@@text</span>
+    </label>
+    <div class="field-toggler__help-text">@@helpText</div>
+  </div>
+</div>

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

+@import "../../less/variables.less";     // только для удобства обращения к переменным
+@import "../../less/mixins/mixins.less"; // только для удобства обращения к примесям
+
+
+.field-toggler {
+  display: block;
+  margin-bottom: (@line-height / 2);
+
+  &__title {
+    font-weight: 700;
+    line-height: 1.2em;
+    display: block;
+    margin-bottom: round(@line-height / 4, 2);
+    min-height: 1px;
+  }
+
+  &__input-wrap {}
+
+  &__name {
+    position: relative;
+    padding-left: 2.7em;
+    font-weight: 400;
+    display: inline-block;
+    margin-right: .6em;
+    margin-bottom: .2em;
+    line-height: @line-height;
+  }
+
+  &__input {
+    position: absolute;
+    opacity: 0;
+
+    & + .field-toggler__name-text:before {
+      content: '';
+      width: 2.2em;
+      height: 1.25em;
+      position: absolute;
+      top: .1em;
+      left: 0;
+      background-color: @gray-lighter;
+      border: 1px solid @border-color;
+      transition: background-color .3s;
+    }
+
+    & + .field-toggler__name-text:after {
+      content: '';
+      position: absolute;
+      top: .2em;
+      left: .15em;
+      height: 1em;
+      width: 1em;
+      background: #fff;
+      transition: left .3s;
+    }
+
+    &:checked + .field-toggler__name-text:before {
+      background-color: @gray-light;
+      border: 1px solid @gray;
+    }
+
+    &:checked + .field-toggler__name-text:after {
+      left: 1.1em;
+    }
+
+    &:focus + .field-toggler__name-text:before {
+      .focus();
+    }
+  }
+
+  &__help-text {
+    .help-text();
+    // Задача: здесь левый padding должен совпадать с левым padding .field-toggler__name-text и должен быть
+    // в относительных единицах.
+    // Левый padding у .field-toggler__name-text = 2.7em от размера шрифта родителя (указано выше в этом файле).
+    // Нужно получить 2.7em от размера шрифта родителя, отталкиваясь от здешнего (уменьшенного) размера шрифта.
+    // Фактор увеличения: 100 / @font-size--small-percent
+    padding-left: round(2.7em * (100 / @font-size--small-percent), 2);
+  }
+}
+

src/blocks_library.html

@@ -320,6 +320,13 @@
               "mod": "custom",
               "helpText": "Есть общее название. При желании радиокнопок можно написать несколько подряд. Изображения в формате SVG, вписываются в CSS-файл функцией <code>data-uri()</code> компилятора LESS."
             })
+            @@include('blocks/field-toggler/field-toggler.html',{
+              "name": "Переключатель",
+              "type": "checkbox",
+              "text": "Флажок",
+              "checked": "",
+              "helpText": "Какое-то описание"
+            })
             @@include('blocks/field-select/field-select.html',{
               "name": "Селект",
               "options": "<optgroup label=\"Группа\"><option>Значение 1</option><option>Значение 2</option><option>Значение 3</option></optgroup><option>Значение 10</option>",

src/less/style.less

@@ -20,3 +20,4 @@
 @import "./src/blocks/form/form--horizontal.less";
 @import "./src/blocks/thumb/thumb.less";
 @import "./src/blocks/sprite-svg--localstorage/sprite-svg--localstorage.less";
+@import "./src/blocks/field-toggler/field-toggler.less";