Skip to content

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

Упорядочил описание блока форм

parent 04d8026d
Show whitespace changes
Inline Side-by-side
Showing with 316 additions and 196 deletions
src/blocks/field-actions/field-actions.less
View file @ 5b1f2268
......@@ -5,4 +5,17 @@
display: block;
margin-top: @line-height;
margin-bottom: (@line-height / 2);
.btn {
margin-bottom: (@line-height / 2);
}
&__text {
display: block;
margin-top: (@line-height / 2);
margin-bottom: (@line-height / 2);
font-size: @font-size--small;
color: @text-color--muted;
line-height: 1.2em;
}
}
src/blocks/form/form.less
View file @ 5b1f2268
......@@ -2,7 +2,14 @@
.form {
&:not(:last-child) {
margin-bottom: @line-height;
}
fieldset {
&:not(:last-child) {
margin-bottom: @line-height;
}
}
}
src/blocks_library.html
View file @ 5b1f2268
......@@ -2886,10 +2886,46 @@
<section class="blocks-library__item" id="field-actions" data-name=".field-actions">
<h1 class="blocks-library__item-title">Блок кнопок формы</h1>
<div class="js-font-resizer">
<div class="field-actions">
<div class="field-actions__text">Поля отмеченные * обязательны для заполнения.</div>
<button class="btn">Отправить</button>
<br>
<button class="btn">Отменить</button>
</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>
<code class="html">&lt;div class=&quot;field-actions&quot;&gt;</code>
<code class="html"> &lt;div class=&quot;field-actions__text&quot;&gt;&#x41f;&#x43e;&#x43b;&#x44f; &#x43e;&#x442;&#x43c;&#x435;&#x447;&#x435;&#x43d;&#x43d;&#x44b;&#x435; * &#x43e;&#x431;&#x44f;&#x437;&#x430;&#x442;&#x435;&#x43b;&#x44c;&#x43d;&#x44b; &#x434;&#x43b;&#x44f; &#x437;&#x430;&#x43f;&#x43e;&#x43b;&#x43d;&#x435;&#x43d;&#x438;&#x44f;.&lt;/div&gt;</code>
<code class="html"> &lt;button class=&quot;btn&quot;&gt;&#x41e;&#x442;&#x43f;&#x440;&#x430;&#x432;&#x438;&#x442;&#x44c;&lt;/button&gt;</code>
<code class="html"> &lt;br&gt;</code>
<code class="html"> &lt;button class=&quot;btn&quot;&gt;&#x41e;&#x442;&#x43c;&#x435;&#x43d;&#x438;&#x442;&#x44c;&lt;/button&gt;</code>
<code class="html">&lt;/div&gt;</code>
</pre>
</div>
</div>
</section>
<section class="blocks-library__item" id="form" data-name=".form">
<h1 class="blocks-library__item-title">Форма</h1>
<p>Форма как БЭМ-блок. Добавляется стилизация <code>fieldset</code>, появляется возможность использовать модификаторы (см. ниже).</p>
<div class="js-font-resizer">
<form action="" class="form">
<fieldset>
<legend>Форма</legend>
<legend>Файлдсет первый</legend>
<label class="field-text">
<div class="field-text__name">Название поля</div>
<div class="field-text__input-wrap">
......@@ -2923,6 +2959,9 @@
<div class="field-checkbox__help-text">Есть общее название.</div>
</div>
</div>
</fieldset>
<fieldset>
<legend>Файлдсет второй</legend>
<label class="field-select">
<div class="field-select__name">Название поля</div>
<div class="field-select__select-wrap">
......@@ -2952,13 +2991,42 @@
<div class="field-range__help-text"><code>min="1" max="100" step="1" value="70"</code></div>
</div>
</div>
</fieldset>
<div class="field-actions">
<div class="field-actions__text">Поля отмеченные * обязательны для заполнения.</div>
<button class="btn">Отправить</button>
</div>
</fieldset>
</form>
</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>
<code class="html">&lt;form action=&quot;&quot; class=&quot;form&quot;&gt;</code>
<code class="html"> &lt;fieldset&gt;</code>
<code class="html"> &lt;legend&gt;&#x424;&#x430;&#x439;&#x43b;&#x434;&#x441;&#x435;&#x442; &#x43f;&#x435;&#x440;&#x432;&#x44b;&#x439;&lt;/legend&gt;</code>
<code class="html"> &lt;label class=&quot;field-text&quot;&gt;...&lt;/label&gt;</code>
<code class="html"> &lt;div class=&quot;field-checkbox&quot;&gt;...&lt;/div&gt;</code>
<code class="html"> &lt;/fieldset&gt;</code>
<code class="html"> &lt;fieldset&gt;</code>
<code class="html"> &lt;legend&gt;&#x424;&#x430;&#x439;&#x43b;&#x434;&#x441;&#x435;&#x442; &#x432;&#x442;&#x43e;&#x440;&#x43e;&#x439;&lt;/legend&gt;</code>
<code class="html"> &lt;label class=&quot;field-select&quot;&gt;...&lt;/label&gt;</code>
<code class="html"> &lt;div class=&quot;field-file&quot;&gt;...&lt;/div&gt;</code>
<code class="html"> &lt;div class=&quot;field-range&quot;&gt;...&lt;/div&gt;</code>
<code class="html"> &lt;/fieldset&gt;</code>
<code class="html"> &lt;div class=&quot;field-actions&quot;&gt;</code>
<code class="html"> &lt;button class=&quot;btn&quot;&gt;&#x41e;&#x442;&#x43f;&#x440;&#x430;&#x432;&#x438;&#x442;&#x44c;&lt;/button&gt;</code>
<code class="html"> &lt;/div&gt;</code>
<code class="html">&lt;/form&gt;</code>
</pre>
</div>
</div>
<div class="blocks-library__sub-item">
<b class="blocks-library__sub-item-title"><code>.form.form--horizontal</code> (отдельный less-файл)</b>
<h1 class="blocks-library__sub-item-title">Горизонтальное расположение названий и полей</h1>
<p>Только начиная с SM ширины. Модификатор. Отдельный less-файл.</p>
<div class="js-font-resizer">
<form action="" class="form form--horizontal">
<label class="field-text">
<div class="field-text__name">Название поля</div>
......@@ -2995,7 +3063,7 @@
</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">Есть общее название.</div>
</div>
......@@ -3091,9 +3159,9 @@
</label>
</div>
<div class="field-range">
<div class="field-range__name">Range</div>
<div class="field-range__name">Длинное название поля, которое, будучи многострочным, гарантировано выше чем.</div>
<div class="field-range__input-wrap">
<input class="field-range__input" type="range" min="1" max="100" step="1" value="70">
<input class="field-range__input" type="range" min="1" max="100" step="1" value="70" multiple>
<div class="field-range__help-text"><code>min="1" max="100" step="1" value="70"</code></div>
</div>
</div>
......@@ -3102,6 +3170,38 @@
</div>
</form>
</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>
<code class="html">&lt;form class=&quot;form form--horizontal&quot;&gt;</code>
<code class="html"> &lt;label class=&quot;field-text&quot;&gt;...&lt;/label&gt;</code>
<code class="html"> &lt;label class=&quot;field-text&quot;&gt;...&lt;/label&gt;</code>
<code class="html"> &lt;div class=&quot;field-checkbox&quot;&gt;</code>
<code class="html"> &lt;div class=&quot;field-checkbox__title&quot;&gt;&#x41e;&#x431;&#x449;&#x435;&#x435; &#x43d;&#x430;&#x437;&#x432;&#x430;&#x43d;&#x438;&#x435;&lt;/div&gt;</code>
<code class="html"> &lt;div class=&quot;field-checkbox__input-wrap&quot;&gt;...&lt;/div&gt;</code>
<code class="html"> &lt;/div&gt;</code>
<code class="html"> &lt;div class=&quot;field-radio&quot;&gt;</code>
<code class="html"> &lt;div class=&quot;field-radio__title&quot;&gt;&lt;/div&gt; &lt;!-- &larr; &#x412;&#x41d;&#x418;&#x41c;&#x410;&#x41d;&#x418;&#x415;, &#x43f;&#x443;&#x441;&#x442;&#x43e;&#x439; div &#x434;&#x43b;&#x44f; &#x43e;&#x442;&#x441;&#x442;&#x443;&#x43f;&#x430; --&gt;</code>
<code class="html"> &lt;div class=&quot;field-radio__input-wrap&quot;&gt;...&lt;/div&gt;</code>
<code class="html"> &lt;/div&gt;</code>
<code class="html"> &lt;div class=&quot;field-radio&quot;&gt;</code>
<code class="html"> &lt;!-- Нет пустого div (title) &mdash; &#x43d;&#x435;&#x442; &#x438; &#x43e;&#x442;&#x441;&#x442;&#x443;&#x43f;&#x430; --&gt;</code>
<code class="html"> &lt;div class=&quot;field-radio__input-wrap&quot;&gt;...&lt;/div&gt;</code>
<code class="html"> &lt;/div&gt;</code>
<code class="html"> &lt;div class=&quot;field-toggler&quot;&gt;...&lt;/div&gt;</code>
<code class="html"> &lt;label class=&quot;field-select&quot;&gt;...&lt;/label&gt;</code>
<code class="html"> &lt;div class=&quot;field-file&quot;&gt;...&lt;/div&gt;</code>
<code class="html"> &lt;div class=&quot;field-range&quot;&gt;...&lt;/div&gt;</code>
<code class="html"> &lt;div class=&quot;field-actions&quot;&gt;</code>
<code class="html"> &lt;button class=&quot;btn&quot;&gt;&#x41e;&#x442;&#x43f;&#x440;&#x430;&#x432;&#x438;&#x442;&#x44c;&lt;/button&gt;</code>
<code class="html"> &lt;/div&gt;</code>
<code class="html">&lt;/form&gt;</code>
</pre>
</div>
</div>
</div>
</section>
......
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