Чекбоксы

gulpfile.js

@@ -11,6 +11,7 @@ const autoprefixer = require("autoprefixer");
 const mqpacker = require("css-mqpacker");
 const atImport = require("postcss-import");
 const cleanss = require('gulp-cleancss');
+const inlineSVG = require('postcss-inline-svg');
 
 const plumber = require('gulp-plumber');
 const notify = require('gulp-notify');
@@ -44,7 +45,8 @@ let postCssPlugins = [
   mqpacker({
     sort: true
   }),
-  atImport()
+  atImport(),
+  inlineSVG()
 ];
 
 // Очистка папки сборки

package.json

@@ -27,6 +27,7 @@
       "btn": [],
       "to-top": [],
       "field-text": [],
+      "field-checkbox": [],
       "field-actions": [],
       "dropdown": [],
       "menu": []
@@ -104,7 +105,8 @@
     "jquery-migrate": "^3.0.0",
     "merge-stream": "^1.0.1",
     "postcss-import": "^9.1.0",
+    "postcss-inline-svg": "^2.3.0",
     "svg4everybody": "^2.1.7",
     "vinyl-buffer": "^1.0.0"
   }
-}
\ No newline at end of file
+}

src/blocks-demo.html

@@ -805,6 +805,51 @@
 
     </section>
 
+    <section class="blocks-library__item" id="field-checkbox" data-name=".field-checkbox">
+
+      <h2 class="blocks-library__item-title">Флажки</h2>
+
+      <div class="field-checkbox">
+        <label class="field-checkbox__name">
+          <input class="field-checkbox__input" type="checkbox" checked>
+          <span class="field-checkbox__name-text">Одинокий чекбокс такой одинокий, но с длинным... текстом внутри label-а. Далеко-далеко за словесными горами в стране, гласных и согласных живут рыбные тексты. Жизни, свое рыбного решила. Точках семантика, решила оксмокс переписывается толку безопасную журчит рыбными, рекламных несколько осталось свой! Знаках, дороге грамматики.</span>
+        </label>
+      </div>
+
+      <div class="field-checkbox">
+        <div class="field-checkbox__title">Необязательный общий заголовок</div>
+        <div class="field-checkbox__input-wrap">
+          <label class="field-checkbox__name">
+            <input class="field-checkbox__input" type="checkbox" checked>
+            <span class="field-checkbox__name-text">Текст у флажка</span>
+          </label>
+          <div class="field-checkbox__help-text-wrap">
+            <div class="field-checkbox__help-text">Пояснение не обязательно.</div>
+          </div>
+        </div>
+        <div class="field-checkbox__input-wrap">
+          <label class="field-checkbox__name">
+            <input class="field-checkbox__input" type="checkbox">
+            <span class="field-checkbox__name-text">Текст у флажка</span>
+          </label>
+        </div>
+        <div class="field-checkbox__input-wrap">
+          <label class="field-checkbox__name">
+            <input class="field-checkbox__input" type="checkbox">
+            <span class="field-checkbox__name-text">Текст у флажка</span>
+          </label>
+        </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"></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.less

-// Для импорта в диспетчер подключений: @import './src/blocks/field-checkbox/field-checkbox.less';
-
-@import '../../less/variables.less';     // только для удобства обращения к переменным
-
-
-.field-checkbox {
-  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: 2rem;
-    font-weight: 400;
-    display: inline-block;
-    margin-right: 0.6em;
-    line-height: @line-height;
-  }
-
-  &__input {
-    position: absolute;
-    top: 0.8em;
-    padding: 0;
-    margin: 0;
-    transform: translateY(-50%);
-    left: 0;
-  }
-
-  &__help-text {
-    .help-text();
-    padding-left: 2rem;
-  }
-}

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

+// В этом файле должны быть стили только для БЭМ-блока menu, его элементов,
+// модификаторов, псевдоселекторов, псевдоэлементов, $media-условий...
+// Не пишите здесь другие селекторы.
+
+$line-height:                 1.375em !default;
+
+.field-checkbox {
+  display: block;
+  margin-bottom: ($line-height / 2);
+
+  &__title {
+    display: block;
+    font-weight: 700;
+    line-height: $line-height;
+    margin-bottom: round($line-height / 2);
+  }
+
+  &__input-wrap {
+
+    & + & {
+      margin-top: ($line-height / 2);
+    }
+  }
+
+  &__name {
+    position: relative;
+    display: inline-block;
+    padding-left: 1.5em;
+    margin-right: 0.6em;
+    font-weight: 400;
+    line-height: $line-height;
+  }
+
+  &__name-text {
+
+    // свой чекбокс
+    // &:before {
+    //   content: '';
+    //   position: absolute;
+    //   top: 0.1em;
+    //   left: 0;
+    //   width: 14px;
+    //   height: 14px;
+    //   background-image: svg-load('../blocks/field-checkbox/img_to_bg/checkbox.svg');
+    //   background-size: 100%;
+    // }
+    // @at-root input:checked ~ &:before {
+    //   background-image: svg-load('../blocks/field-checkbox/img_to_bg/checkbox--checked.svg');
+    // }
+  }
+
+  &__input {
+    position: absolute;
+    top: 0.8em;
+    left: 0;
+    padding: 0;
+    margin: 0;
+    transform: translateY(-50%);
+
+    // сокрытие инпута в случае использования своего чекбокса
+    // top: 0;
+    // left: 0;
+    // width: 0;
+    // height: 0;
+    // overflow: hidden;
+    // visibility: hidden;
+  }
+
+  &__help-text-wrap {
+    padding-left: 1.5em;
+  }
+
+  &__help-text {
+    @include field-help-text;
+  }
+}