Skip to content

K
kpp
Commit 3fa7d22b authored by Nikolay Gromov's avatar Nikolay Gromov
Browse files
Options

custom checkbox fix

parent 14a373c2
Hide whitespace changes
Inline Side-by-side
Showing with 16 additions and 15 deletions
src/_blocks_library.html
View file @ 3fa7d22b
......@@ -282,28 +282,28 @@
<fieldset>
<legend>Варианты разметки и модификаторы</legend>
<div class="field-text">
<label class="field-text__name" for="field-text_id_001">Название поля</label>
<label class="field-text__name" for="field-text_id_001">Любое поле, выглядящее как текстовое</label>
<div class="field-text__input-wrap">
<input class="field-text__input" id="field-text_id_001" type="text" placeholder="input[type=text]">
<div class="field-text__help-text">Лейбл отдельно, обёртка — <code>&lt;div&gt;</code>, связь с лейблом по <code>id</code>.</div>
</div>
</div>
<label class="field-text">
<div class="field-text__name">Название поля</div>
<div class="field-text__name">Любое поле, выглядящее как текстовое</div>
<div class="field-text__input-wrap">
<input class="field-text__input" type="text" placeholder="input[type=text]">
<div class="field-text__help-text">Обёртка — <code>&lt;label&gt;</code>.</div>
</div>
</label>
<label class="field-text">
<div class="field-text__name">Название поля</div>
<div class="field-text__name">Многострочное текстовое поле</div>
<div class="field-text__input-wrap">
<textarea class="field-text__input" rows="3" placeholder="textarea"></textarea>
<div class="field-text__help-text">Обёртка — <code>&lt;label&gt;</code>.</div>
</div>
</label>
<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">
......@@ -317,6 +317,7 @@
</div>
</div>
<div class="field-radio">
<div class="field-checkbox__title">Стандартные радиокнопки</div>
<div class="field-radio__input-wrap">
<label class="field-radio__name">
<input class="field-radio__input" type="radio" name="one">
......@@ -344,7 +345,7 @@
</div>
</div>
<div class="field-checkbox field-checkbox--custom" style="font-size: 24px">
<div class="field-checkbox__title">Собственные флажки</div>
<div class="field-checkbox__title">Собственные флажки, <code>font-size: 24px</code> на родительском элементе</div>
<div class="field-checkbox__input-wrap">
<label class="field-checkbox__name">
<input class="field-checkbox__input" type="checkbox" checked>
......@@ -372,7 +373,7 @@
</div>
</div>
<label class="field-select">
<div class="field-select__name">Название поля</div>
<div class="field-select__name">Селект</div>
<div class="field-select__select-wrap">
<select class="field-select__select">
<optgroup label="optgroup">
......@@ -386,14 +387,14 @@
</div>
</label>
<div class="field-range">
<div class="field-range__name">Название поля</div>
<div class="field-range__name">Range</div>
<div class="field-range__input-wrap">
<input class="field-range__input" type="range">
<div class="field-range__help-text">Пояснительный текст.</div>
<div class="field-range__help-text">Нативный, без JS.</div>
</div>
</div>
<div class="field-file">
<div class="field-file__name">Название поля</div>
<div class="field-file__name">Выбор файлов</div>
<label class="field-file__input-wrap">
<input class="field-file__input" type="file" data-multiple-caption="файлов выбрано: {count}" multiple>
<div class="field-file__name-text" data-button-text="Выбрать файл">Файлы не выбраны</div>
......
src/img/form_field_bg/checkbox--checked.svg
View file @ 3fa7d22b
<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 18 18"><path d="M6.984 14.017l9-9-1.406-1.454-7.594 7.595L3.42 7.594 2.018 9zm9-14.017q.844 0 1.43.61T18 2.014v13.97q0 .797-.586 1.406-.586.61-1.43.61H2.014q-.843 0-1.43-.61T0 15.984V2.014Q0 1.218.585.61 1.17 0 2.015 0h13.97z" fill="#2d2d2d"/></svg>
\ No newline at end of file
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20"><path d="M7.984 15.017l9-9-1.406-1.454-7.594 7.595L4.42 8.594 3.018 10zm9-14.017q.844 0 1.43.61T19 3.014v13.97q0 .797-.586 1.406-.586.61-1.43.61H3.014q-.843 0-1.43-.61T1 16.984V3.014q0-.796.585-1.404Q2.17 1 3.015 1h13.97z" fill="#2d2d2d"/></svg>
\ No newline at end of file
src/img/form_field_bg/checkbox.svg
View file @ 3fa7d22b
<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 18 18"><path d="M15.984 0q.797 0 1.406.61.61.61.61 1.404v13.97q0 .797-.61 1.406-.61.61-1.406.61H2.014q-.796 0-1.405-.61Q0 16.78 0 15.984V2.014Q0 1.218.61.61 1.22 0 2.014 0h13.97zm0 2.016H2.014v13.97h13.97V2.017z" fill="#2d2d2d"/></svg>
\ No newline at end of file
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20"><path d="M16.984 1q.797 0 1.406.61.61.61.61 1.404v13.97q0 .797-.61 1.406-.61.61-1.406.61H3.014q-.796 0-1.405-.61Q1 17.78 1 16.984V3.014q0-.796.61-1.404Q2.22 1 3.014 1h13.97zm0 2.016H3.014v13.97h13.97V3.016z" fill="#2d2d2d"/></svg>
\ No newline at end of file
src/less/blocks/field-checkbox--custom.less
View file @ 3fa7d22b
......@@ -15,13 +15,13 @@
opacity: 0;
& + .field-checkbox__name-text:before {
width: 1.13em;
height: 1.13em;
width: 1.25em;
height: 1.25em;
position: absolute;
top: .1em;
top: 0;
left: 0;
content: '';
background-size: 1.125em 1.125em;
background-size: 100%;
background-repeat: no-repeat;
background-image: data-uri('image/svg+xml;charset=UTF-8', '../img/form_field_bg/checkbox.svg');
}
......
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