Skip to content

K
kpp
Commit 12bb9406 authored by Nikolay Gromov's avatar Nikolay Gromov
Browse files
Options

Добавил описание field-checkbox

parent 31a08462
Hide whitespace changes
Inline Side-by-side
Showing with 45 additions and 82 deletions
src/blocks-demo.html
View file @ 12bb9406
......@@ -844,7 +844,39 @@
<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>
<pre class="code">
<code>&lt;div class="field-checkbox"></code>
<code> &lt;label class="field-checkbox__name"></code>
<code> &lt;input class="field-checkbox__input" type="checkbox" checked></code>
<code> &lt;span class="field-checkbox__name-text">Одинокий чекбокс такой одинокий, но с длинным... текстом внутри label-а. Далеко-далеко за словесными горами в стране, гласных и согласных живут рыбные тексты. Жизни, свое рыбного решила. Точках семантика, решила оксмокс переписывается толку безопасную журчит рыбными, рекламных несколько осталось свой! Знаках, дороге грамматики.&lt;/span></code>
<code> &lt;/label></code>
<code>&lt;/div></code>
<code> </code>
<code>&lt;div class="field-checkbox"></code>
<code> &lt;div class="field-checkbox__title">Необязательный общий заголовок&lt;/div></code>
<code> &lt;div class="field-checkbox__input-wrap"></code>
<code> &lt;label class="field-checkbox__name"></code>
<code> &lt;input class="field-checkbox__input" type="checkbox" checked></code>
<code> &lt;span class="field-checkbox__name-text">Текст у флажка&lt;/span></code>
<code> &lt;/label></code>
<code> &lt;div class="field-checkbox__help-text-wrap"></code>
<code> &lt;div class="field-checkbox__help-text">Пояснение не обязательно.&lt;/div></code>
<code> &lt;/div></code>
<code> &lt;/div></code>
<code> &lt;div class="field-checkbox__input-wrap"></code>
<code> &lt;label class="field-checkbox__name"></code>
<code> &lt;input class="field-checkbox__input" type="checkbox"></code>
<code> &lt;span class="field-checkbox__name-text">Текст у флажка&lt;/span></code>
<code> &lt;/label></code>
<code> &lt;/div></code>
<code> &lt;div class="field-checkbox__input-wrap"></code>
<code> &lt;label class="field-checkbox__name"></code>
<code> &lt;input class="field-checkbox__input" type="checkbox"></code>
<code> &lt;span class="field-checkbox__name-text">Текст у флажка&lt;/span></code>
<code> &lt;/label></code>
<code> &lt;/div></code>
<code>&lt;/div></code>
</pre>
</div>
</div>
......
src/blocks/field-checkbox/field-checkbox--custom.less deleted 100644 → 0
View file @ 31a08462
// Для импорта в диспетчер подключений: @import './src/blocks/field-checkbox/field-checkbox--custom.less';
@import '../../less/variables.less'; // только для удобства обращения к переменным
.field-checkbox {
&--custom {
.field-checkbox__name {
padding-left: 1.6em;
}
.field-checkbox__help-text {
padding-left: round(1.6em * (100 / @font-size--small-percent), 2);
}
.field-checkbox__input {
position: absolute;
opacity: 0;
& + .field-checkbox__name-text:before {
width: 1.25em;
height: 1.25em;
position: absolute;
top: 0;
left: 0;
content: '';
background-size: 100%;
background-repeat: no-repeat;
background-image: data-uri('image/svg+xml;charset=UTF-8', './src/blocks/field-checkbox/img_to_bg/checkbox.svg');
}
&:checked + .field-checkbox__name-text:before {
background-image: data-uri('image/svg+xml;charset=UTF-8', './src/blocks/field-checkbox/img_to_bg/checkbox--checked.svg');
}
&:focus + .field-checkbox__name-text:before {
.focus();
}
}
}
}
src/blocks/field-checkbox/field-checkbox.html
View file @ 12bb9406
<!--DEV
<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">Пояснение не обязательно.</div>
</div>
<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__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>
<label class="field-checkbox__name">
<input class="field-checkbox__input" type="checkbox">
<span class="field-checkbox__name-text">Переиспользовать</span>
</label>
<label class="field-checkbox__name">
<input class="field-checkbox__input" type="checkbox">
<span class="field-checkbox__name-text">Нет</span>
<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>
<div class="field-checkbox field-checkbox--custom">
<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>
<input class="field-checkbox__input" type="checkbox">
<span class="field-checkbox__name-text">Текст у флажка</span>
</label>
<div class="field-checkbox__help-text">Есть общее название. При желании флажков можно написать несколько подряд. Изображения в формате SVG, вписываются в CSS-файл функцией <code>data-uri()</code> компилятора LESS.</div>
</div>
</div>
<div class="field-checkbox field-checkbox--custom">
<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>
<label class="field-checkbox__name">
<input class="field-checkbox__input" type="checkbox">
<span class="field-checkbox__name-text">Нет</span>
</label>
<label class="field-checkbox__name">
<input class="field-checkbox__input" type="checkbox">
<span class="field-checkbox__name-text">Сто лет в обед</span>
<span class="field-checkbox__name-text">Текст у флажка</span>
</label>
</div>
</div>
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment