Skip to content

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

Упорядочил описание Селектов

parent 74be79a5
Hide whitespace changes
Inline Side-by-side
Showing with 146 additions and 105 deletions
src/blocks_library.html
View file @ ae8885d4
...@@ -2334,80 +2334,13 @@ ...@@ -2334,80 +2334,13 @@
<section class="blocks-library__item" id="field-select" data-name=".field-select"> <section class="blocks-library__item" id="field-select" data-name=".field-select">
<div class="row">
<div class="col-md-6"> <h1 class="blocks-library__item-title">Выпадающий список, множественный выбор</h1>
<label class="field-select">
<div class="field-select__name">Селект</div> <div class="js-font-resizer">
<div class="field-select__select-wrap">
<select class="field-select__select">
<optgroup label="Группа">
<option>Значение 1</option>
<option>Значение 2</option>
<option>Значение 3</option>
</optgroup>
<option>Значение 10</option>
</select>
<small class="field-select__help-text">Обёртка — <code>&lt;label&gt;</code>.</small>
</div>
</label>
</div>
<div class="col-md-6">
<label class="field-select">
<div class="field-select__name">Множественный селект</div>
<div class="field-select__select-wrap">
<select class="field-select__select" multiple>
<optgroup label="Группа">
<option>Значение 1</option>
<option>Значение 2</option>
<option>Значение 3</option>
</optgroup>
<option>Значение 10</option>
</select>
<small class="field-select__help-text">Обёртка — <code>&lt;label&gt;</code>.</small>
</div>
</label>
</div>
</div>
<div class="row" style="font-size:1.5em">
<div class="col-md-6">
<label class="field-select">
<div class="field-select__name">Увеличен font-size родителя</div>
<div class="field-select__select-wrap">
<select class="field-select__select">
<optgroup label="Группа">
<option>Значение 1</option>
<option>Значение 2</option>
<option>Значение 3</option>
</optgroup>
<option>Значение 10</option>
</select>
<small class="field-select__help-text">Обёртка — <code>&lt;label&gt;</code>.</small>
</div>
</label>
</div>
<div class="col-md-6">
<label class="field-select">
<div class="field-select__name">Увеличен font-size родителя</div>
<div class="field-select__select-wrap">
<select class="field-select__select" multiple>
<optgroup label="Группа">
<option>Значение 1</option>
<option>Значение 2</option>
<option>Значение 3</option>
</optgroup>
<option>Значение 10</option>
</select>
<small class="field-select__help-text">Обёртка — <code>&lt;label&gt;</code>.</small>
</div>
</label>
</div>
</div>
<div class="blocks-library__sub-item">
<b class="blocks-library__sub-item-title"><code>.field-select.field-select--lg</code> (отдельный less-файл)</b>
<p>Размер изменён благодаря модификатору. Модификатор меняет <code>font-size</code> блока в <code>em</code>-ах (реальный размер блока продолжает зависеть от размера шрифта родителя).</p>
<div class="row"> <div class="row">
<div class="col-md-6"> <div class="col-md-6">
<label class="field-select field-select--lg"> <label class="field-select">
<div class="field-select__name">Селект</div> <div class="field-select__name">Селект</div>
<div class="field-select__select-wrap"> <div class="field-select__select-wrap">
<select class="field-select__select"> <select class="field-select__select">
...@@ -2423,7 +2356,7 @@ ...@@ -2423,7 +2356,7 @@
</label> </label>
</div> </div>
<div class="col-md-6"> <div class="col-md-6">
<label class="field-select field-select--lg"> <label class="field-select">
<div class="field-select__name">Множественный селект</div> <div class="field-select__name">Множественный селект</div>
<div class="field-select__select-wrap"> <div class="field-select__select-wrap">
<select class="field-select__select" multiple> <select class="field-select__select" multiple>
...@@ -2440,44 +2373,152 @@ ...@@ -2440,44 +2373,152 @@
</div> </div>
</div> </div>
</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;label class=&quot;field-select&quot;&gt;</code>
<code class="html"> &lt;div class=&quot;field-select__name&quot;&gt;&#x421;&#x435;&#x43b;&#x435;&#x43a;&#x442;&lt;/div&gt;</code>
<code class="html"> &lt;div class=&quot;field-select__select-wrap&quot;&gt;</code>
<code class="html"> &lt;select class=&quot;field-select__select&quot;&gt;</code>
<code class="html"> &lt;optgroup label=&quot;&#x413;&#x440;&#x443;&#x43f;&#x43f;&#x430;&quot;&gt;</code>
<code class="html"> &lt;option&gt;&#x417;&#x43d;&#x430;&#x447;&#x435;&#x43d;&#x438;&#x435; 1&lt;/option&gt;</code>
<code class="html"> &lt;option&gt;&#x417;&#x43d;&#x430;&#x447;&#x435;&#x43d;&#x438;&#x435; 2&lt;/option&gt;</code>
<code class="html"> &lt;option&gt;&#x417;&#x43d;&#x430;&#x447;&#x435;&#x43d;&#x438;&#x435; 3&lt;/option&gt;</code>
<code class="html"> &lt;/optgroup&gt;</code>
<code class="html"> &lt;option&gt;&#x417;&#x43d;&#x430;&#x447;&#x435;&#x43d;&#x438;&#x435; 10&lt;/option&gt;</code>
<code class="html"> &lt;/select&gt;</code>
<code class="html"> &lt;small class=&quot;field-select__help-text&quot;&gt;Пояснение не обязательно.&lt;/small&gt;</code>
<code class="html"> &lt;/div&gt;</code>
<code class="html">&lt;/label&gt;</code>
</pre>
</div>
</div>
<div class="blocks-library__sub-item">
<h2 class="blocks-library__sub-item-title">Увеличение размера</h2>
<p>Размер изменён благодаря модификатору. Модификатор меняет <code>font-size</code> блока в <code>em</code>-ах (реальный размер блока продолжает зависеть от размера шрифта родителя).</p>
<div class="js-font-resizer">
<div class="row">
<div class="col-md-6">
<label class="field-select field-select--lg">
<div class="field-select__name">Селект</div>
<div class="field-select__select-wrap">
<select class="field-select__select">
<optgroup label="Группа">
<option>Значение 1</option>
<option>Значение 2</option>
<option>Значение 3</option>
</optgroup>
<option>Значение 10</option>
</select>
<small class="field-select__help-text">Обёртка — <code>&lt;label&gt;</code>.</small>
</div>
</label>
</div>
<div class="col-md-6">
<label class="field-select field-select--lg">
<div class="field-select__name">Множественный селект</div>
<div class="field-select__select-wrap">
<select class="field-select__select" multiple>
<optgroup label="Группа">
<option>Значение 1</option>
<option>Значение 2</option>
<option>Значение 3</option>
</optgroup>
<option>Значение 10</option>
</select>
<small class="field-select__help-text">Обёртка — <code>&lt;label&gt;</code>.</small>
</div>
</label>
</div>
</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;label class=&quot;field-select field-select--lg&quot;&gt;</code>
<code class="html"> &lt;div class=&quot;field-select__name&quot;&gt;&#x421;&#x435;&#x43b;&#x435;&#x43a;&#x442;&lt;/div&gt;</code>
<code class="html"> &lt;div class=&quot;field-select__select-wrap&quot;&gt;</code>
<code class="html"> &lt;select class=&quot;field-select__select&quot;&gt;</code>
<code class="html"> &lt;optgroup label=&quot;&#x413;&#x440;&#x443;&#x43f;&#x43f;&#x430;&quot;&gt;</code>
<code class="html"> &lt;option&gt;&#x417;&#x43d;&#x430;&#x447;&#x435;&#x43d;&#x438;&#x435; 1&lt;/option&gt;</code>
<code class="html"> &lt;option&gt;&#x417;&#x43d;&#x430;&#x447;&#x435;&#x43d;&#x438;&#x435; 2&lt;/option&gt;</code>
<code class="html"> &lt;option&gt;&#x417;&#x43d;&#x430;&#x447;&#x435;&#x43d;&#x438;&#x435; 3&lt;/option&gt;</code>
<code class="html"> &lt;/optgroup&gt;</code>
<code class="html"> &lt;option&gt;&#x417;&#x43d;&#x430;&#x447;&#x435;&#x43d;&#x438;&#x435; 10&lt;/option&gt;</code>
<code class="html"> &lt;/select&gt;</code>
<code class="html"> &lt;small class=&quot;field-select__help-text&quot;&gt;Пояснение не обязательно.&lt;/small&gt;</code>
<code class="html"> &lt;/div&gt;</code>
<code class="html">&lt;/label&gt;</code>
</pre>
</div>
</div>
</div>
<div class="blocks-library__sub-item"> <div class="blocks-library__sub-item">
<b class="blocks-library__sub-item-title"><code>.field-select.field-select--sm</code> (отдельный less-файл)</b> <h2 class="blocks-library__sub-item-title">Уменьшение размера</h2>
<p>Размер изменён благодаря модификатору. Модификатор меняет <code>font-size</code> блока в <code>em</code>-ах (реальный размер блока продолжает зависеть от размера шрифта родителя).</p> <p>Размер изменён благодаря модификатору. Модификатор меняет <code>font-size</code> блока в <code>em</code>-ах (реальный размер блока продолжает зависеть от размера шрифта родителя).</p>
<div class="row"> <div class="js-font-resizer">
<div class="col-md-6"> <div class="row">
<label class="field-select field-select--sm"> <div class="col-md-6">
<div class="field-select__name">Селект</div> <label class="field-select field-select--sm">
<div class="field-select__select-wrap"> <div class="field-select__name">Селект</div>
<select class="field-select__select"> <div class="field-select__select-wrap">
<optgroup label="Группа"> <select class="field-select__select">
<option>Значение 1</option> <optgroup label="Группа">
<option>Значение 2</option> <option>Значение 1</option>
<option>Значение 3</option> <option>Значение 2</option>
</optgroup> <option>Значение 3</option>
<option>Значение 10</option> </optgroup>
</select> <option>Значение 10</option>
<small class="field-select__help-text">Обёртка — <code>&lt;label&gt;</code>.</small> </select>
</div> <small class="field-select__help-text">Обёртка — <code>&lt;label&gt;</code>.</small>
</label> </div>
</label>
</div>
<div class="col-md-6">
<label class="field-select field-select--sm">
<div class="field-select__name">Множественный селект</div>
<div class="field-select__select-wrap">
<select class="field-select__select" multiple>
<optgroup label="Группа">
<option>Значение 1</option>
<option>Значение 2</option>
<option>Значение 3</option>
</optgroup>
<option>Значение 10</option>
</select>
<small class="field-select__help-text">Обёртка — <code>&lt;label&gt;</code>.</small>
</div>
</label>
</div>
</div> </div>
<div class="col-md-6"> </div>
<label class="field-select field-select--sm"> <div class="blocks-library__code-wrapper">
<div class="field-select__name">Множественный селект</div> <span class="blocks-library__code-show-trigger" title="Показать код"><i class="blocks-library__code-icon"></i></span>
<div class="field-select__select-wrap"> <div class="blocks-library__code">
<select class="field-select__select" multiple> <pre>
<optgroup label="Группа"> <code class="html">&lt;label class=&quot;field-select field-select--sm&quot;&gt;</code>
<option>Значение 1</option> <code class="html"> &lt;div class=&quot;field-select__name&quot;&gt;&#x421;&#x435;&#x43b;&#x435;&#x43a;&#x442;&lt;/div&gt;</code>
<option>Значение 2</option> <code class="html"> &lt;div class=&quot;field-select__select-wrap&quot;&gt;</code>
<option>Значение 3</option> <code class="html"> &lt;select class=&quot;field-select__select&quot;&gt;</code>
</optgroup> <code class="html"> &lt;optgroup label=&quot;&#x413;&#x440;&#x443;&#x43f;&#x43f;&#x430;&quot;&gt;</code>
<option>Значение 10</option> <code class="html"> &lt;option&gt;&#x417;&#x43d;&#x430;&#x447;&#x435;&#x43d;&#x438;&#x435; 1&lt;/option&gt;</code>
</select> <code class="html"> &lt;option&gt;&#x417;&#x43d;&#x430;&#x447;&#x435;&#x43d;&#x438;&#x435; 2&lt;/option&gt;</code>
<small class="field-select__help-text">Обёртка — <code>&lt;label&gt;</code>.</small> <code class="html"> &lt;option&gt;&#x417;&#x43d;&#x430;&#x447;&#x435;&#x43d;&#x438;&#x435; 3&lt;/option&gt;</code>
</div> <code class="html"> &lt;/optgroup&gt;</code>
</label> <code class="html"> &lt;option&gt;&#x417;&#x43d;&#x430;&#x447;&#x435;&#x43d;&#x438;&#x435; 10&lt;/option&gt;</code>
<code class="html"> &lt;/select&gt;</code>
<code class="html"> &lt;small class=&quot;field-select__help-text&quot;&gt;Пояснение не обязательно.&lt;/small&gt;</code>
<code class="html"> &lt;/div&gt;</code>
<code class="html">&lt;/label&gt;</code>
</pre>
</div> </div>
</div> </div>
</div> </div>
</section> </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