Skip to content

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

добавил field-radio

parent 12bb9406
Show whitespace changes
Inline Side-by-side
Showing with 173 additions and 128 deletions
package.json
View file @ de18a80f
......@@ -28,6 +28,7 @@
"to-top": [],
"field-text": [],
"field-checkbox": [],
"field-radio": [],
"field-actions": [],
"dropdown": [],
"menu": []
......
src/blocks-demo.html
View file @ de18a80f
......@@ -809,6 +809,8 @@
<h2 class="blocks-library__item-title">Флажки</h2>
<p>В стилевом файле есть закомментированные фрагменты для замены нативного элемента своим (svg).</p>
<div class="field-checkbox">
<label class="field-checkbox__name">
<input class="field-checkbox__input" type="checkbox" checked>
......@@ -882,6 +884,85 @@
</section>
<section class="blocks-library__item" id="field-radio" data-name=".field-radio">
<h2 class="blocks-library__item-title">Радиокнопки</h2>
<p>В стилевом файле есть закомментированные фрагменты для замены нативного элемента своим (svg).</p>
<div class="field-radio">
<label class="field-radio__name">
<input class="field-radio__input" type="radio" checked>
<span class="field-radio__name-text">Одинокая радиокнопка такой одинокий, но с длинным... текстом внутри label-а. Далеко-далеко за словесными горами в стране, гласных и согласных живут рыбные тексты. Жизни, свое рыбного решила. Точках семантика, решила оксмокс переписывается толку безопасную журчит рыбными, рекламных несколько осталось свой! Знаках, дороге грамматики.</span>
</label>
</div>
<div class="field-radio">
<div class="field-radio__title">Необязательный общий заголовок</div>
<div class="field-radio__input-wrap">
<label class="field-radio__name">
<input class="field-radio__input" type="radio" name="demo-radio" checked>
<span class="field-radio__name-text">Текст у радиокнопки</span>
</label>
<div class="field-radio__help-text-wrap">
<div class="field-radio__help-text">Пояснение не обязательно.</div>
</div>
</div>
<div class="field-radio__input-wrap">
<label class="field-radio__name">
<input class="field-radio__input" type="radio" name="demo-radio">
<span class="field-radio__name-text">Текст у радиокнопки</span>
</label>
</div>
<div class="field-radio__input-wrap">
<label class="field-radio__name">
<input class="field-radio__input" type="radio" name="demo-radio">
<span class="field-radio__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">
<code>&lt;div class="field-radio"></code>
<code> &lt;label class="field-radio__name"></code>
<code> &lt;input class="field-radio__input" type="radio" checked></code>
<code> &lt;span class="field-radio__name-text">Одинокая радиокнопка такой одинокий, но с длинным... текстом внутри label-а. Далеко-далеко за словесными горами в стране, гласных и согласных живут рыбные тексты. Жизни, свое рыбного решила. Точках семантика, решила оксмокс переписывается толку безопасную журчит рыбными, рекламных несколько осталось свой! Знаках, дороге грамматики.&lt;/span></code>
<code> &lt;/label></code>
<code>&lt;/div></code>
<code> </code>
<code>&lt;div class="field-radio"></code>
<code> &lt;div class="field-radio__title">Необязательный общий заголовок&lt;/div></code>
<code> &lt;div class="field-radio__input-wrap"></code>
<code> &lt;label class="field-radio__name"></code>
<code> &lt;input class="field-radio__input" type="radio" name="demo-radio" checked></code>
<code> &lt;span class="field-radio__name-text">Текст у радиокнопки&lt;/span></code>
<code> &lt;/label></code>
<code> &lt;div class="field-radio__help-text-wrap"></code>
<code> &lt;div class="field-radio__help-text">Пояснение не обязательно.&lt;/div></code>
<code> &lt;/div></code>
<code> &lt;/div></code>
<code> &lt;div class="field-radio__input-wrap"></code>
<code> &lt;label class="field-radio__name"></code>
<code> &lt;input class="field-radio__input" type="radio" name="demo-radio"></code>
<code> &lt;span class="field-radio__name-text">Текст у радиокнопки&lt;/span></code>
<code> &lt;/label></code>
<code> &lt;/div></code>
<code> &lt;div class="field-radio__input-wrap"></code>
<code> &lt;label class="field-radio__name"></code>
<code> &lt;input class="field-radio__input" type="radio" name="demo-radio"></code>
<code> &lt;span class="field-radio__name-text">Текст у радиокнопки&lt;/span></code>
<code> &lt;/label></code>
<code> &lt;/div></code>
<code>&lt;/div></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.scss
View file @ de18a80f
// В этом файле должны быть стили только для БЭМ-блока menu, его элементов,
// В этом файле должны быть стили только для БЭМ-блока field-checkbox, его элементов,
// модификаторов, псевдоселекторов, псевдоэлементов, $media-условий...
// Не пишите здесь другие селекторы.
......
src/blocks/field-radio/field-radio--custom.less deleted 100644 → 0
View file @ 12bb9406
// Для импорта в диспетчер подключений: @import './src/blocks/field-radio/field-radio--custom.less';
@import '../../less/variables.less'; // только для удобства обращения к переменным
.field-radio {
&--custom {
.field-radio__name {
padding-left: 1.6em;
}
.field-radio__help-text {
padding-left: round(1.6em * (100 / @font-size--small-percent), 2);
}
.field-radio__input {
position: absolute;
opacity: 0;
& + .field-radio__name-text:before {
width: 1.13em;
height: 1.13em;
position: absolute;
top: 0.1em;
left: 0;
content: '';
background-size: 1.125em 1.125em;
background-repeat: no-repeat;
background-image: data-uri('image/svg+xml;charset=UTF-8', './src/blocks/field-radio/img_to_bg/radiobutton.svg');
}
&:checked + .field-radio__name-text:before {
background-image: data-uri('image/svg+xml;charset=UTF-8', './src/blocks/field-radio/img_to_bg/radiobutton--checked.svg');
}
&:focus + .field-radio__name-text:before {
.focus();
}
}
}
}
src/blocks/field-radio/field-radio.html
View file @ de18a80f
<!--DEV
<div class="field-radio">
<div class="field-radio__title">Стандартная радиокнопка</div>
<div class="field-radio__input-wrap">
<label class="field-radio__name">
<input class="field-radio__input" type="radio">
<span class="field-radio__name-text">Да</span>
<input class="field-radio__input" type="radio" checked>
<span class="field-radio__name-text">Одинокий радиобаттон такой одинокий, но с длинным... текстом внутри label-а. Далеко-далеко за словесными горами в стране, гласных и согласных живут рыбные тексты. Жизни, свое рыбного решила. Точках семантика, решила оксмокс переписывается толку безопасную журчит рыбными, рекламных несколько осталось свой! Знаках, дороге грамматики.</span>
</label>
<div class="field-radio__help-text">Пояснение не обязательно.</div>
</div>
</div>
<div class="field-radio">
<div class="field-radio__title">Стандартные радиокнопки</div>
<div class="field-radio__title">Необязательный общий заголовок</div>
<div class="field-radio__input-wrap">
<label class="field-radio__name">
<input class="field-radio__input" type="radio" name="radio-demo" checked>
<span class="field-radio__name-text">Да</span>
</label>
<label class="field-radio__name">
<input class="field-radio__input" type="radio" name="radio-demo">
<span class="field-radio__name-text">Нет</span>
<input class="field-radio__input" type="radio" name="demo-radio" checked>
<span class="field-radio__name-text">Текст у радиобаттона</span>
</label>
<label class="field-radio__name">
<input class="field-radio__input" type="radio" name="radio-demo">
<span class="field-radio__name-text">Не знаю</span>
</label>
<div class="field-radio__help-text">Разметка никак не модифицируется, просто добавляются дополнительные <code>label</code>.</div>
<div class="field-radio__help-text-wrap">
<div class="field-radio__help-text">Пояснение не обязательно.</div>
</div>
</div>
</div>
<div class="field-radio field-radio--custom">
<div class="field-radio__title">Собственная радиокнопка</div>
<div class="field-radio__input-wrap">
<label class="field-radio__name">
<input class="field-radio__input" type="radio">
<span class="field-radio__name-text">Да</span>
<input class="field-radio__input" type="radio" name="demo-radio">
<span class="field-radio__name-text">Текст у радиобаттона</span>
</label>
<div class="field-radio__help-text">Есть общее название. При желании радиокнопок можно написать несколько подряд. Изображения в формате SVG, вписываются в CSS-файл функцией <code>data-uri()</code> компилятора LESS.</div>
</div>
</div>
<div class="field-radio field-radio--custom">
<div class="field-radio__title">Собственные радиокнопки</div>
<div class="field-radio__input-wrap">
<label class="field-radio__name">
<input class="field-radio__input" type="radio" name="radio-demo-2" checked>
<span class="field-radio__name-text">Да</span>
</label>
<label class="field-radio__name">
<input class="field-radio__input" type="radio" name="radio-demo-2">
<span class="field-radio__name-text">Нет</span>
</label>
<label class="field-radio__name">
<input class="field-radio__input" type="radio" name="radio-demo-2">
<span class="field-radio__name-text">Не знаю</span>
<input class="field-radio__input" type="radio" name="demo-radio">
<span class="field-radio__name-text">Текст у радиобаттона</span>
</label>
<div class="field-radio__help-text">Разметка никак не модифицируется, просто добавляются дополнительные <code>label</code>.</div>
</div>
</div>
......
src/blocks/field-radio/field-radio.less deleted 100644 → 0
View file @ 12bb9406
// Для импорта в диспетчер подключений: @import './src/blocks/field-radio/field-radio.less';
@import '../../less/variables.less'; // только для удобства обращения к переменным
.field-radio {
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-radio/field-radio.scss 0 → 100644
View file @ de18a80f
// В этом файле должны быть стили только для БЭМ-блока field-radio, его элементов,
// модификаторов, псевдоселекторов, псевдоэлементов, $media-условий...
// Не пишите здесь другие селекторы.
$line-height: 1.375em !default;
.field-radio {
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-radio/img_to_bg/radiobutton.svg');
// background-size: 100%;
// }
// @at-root input:checked ~ &:before {
// background-image: svg-load('../blocks/field-radio/img_to_bg/radiobutton--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;
}
}
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