Skip to content

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

Убрал модификаторы размеров для форм (оставил их кнопкам)

parent a1be402f
Show whitespace changes
Inline Side-by-side
Showing with 21 additions and 968 deletions
src/blocks/field-checkbox/field-checkbox--lg.less deleted 100644 → 0
View file @ a1be402f
@import '../../less/variables.less'; // только для удобства обращения к переменным
.field-checkbox {
&--lg {
font-size: @font-size--h3;
}
}
src/blocks/field-checkbox/field-checkbox--sm.less deleted 100644 → 0
View file @ a1be402f
@import '../../less/variables.less'; // только для удобства обращения к переменным
.field-checkbox {
&--sm {
font-size: @font-size--small;
.field-checkbox__name {
padding-left: 1.6em;
}
.field-checkbox__help-text {
padding-left: round(1.6em * (100 / @font-size--small-percent), 2);
}
}
}
src/blocks/field-file/field-file--lg.less deleted 100644 → 0
View file @ a1be402f
@import '../../less/variables.less'; // только для удобства обращения к переменным
.field-file {
&--lg {
font-size: @font-size--h3;
}
}
src/blocks/field-file/field-file--sm.less deleted 100644 → 0
View file @ a1be402f
@import '../../less/variables.less'; // только для удобства обращения к переменным
.field-file {
&--sm {
font-size: @font-size--small;
}
}
src/blocks/field-radio/field-radio--lg.less deleted 100644 → 0
View file @ a1be402f
@import '../../less/variables.less'; // только для удобства обращения к переменным
.field-radio {
&--lg {
font-size: @font-size--h3;
}
}
src/blocks/field-radio/field-radio--sm.less deleted 100644 → 0
View file @ a1be402f
@import '../../less/variables.less'; // только для удобства обращения к переменным
.field-radio {
&--sm {
font-size: @font-size--small;
}
}
src/blocks/field-range/field-range--lg.less deleted 100644 → 0
View file @ a1be402f
@import '../../less/variables.less'; // только для удобства обращения к переменным
.field-range {
&--lg {
font-size: @font-size--h3;
}
}
src/blocks/field-range/field-range--sm.less deleted 100644 → 0
View file @ a1be402f
@import '../../less/variables.less'; // только для удобства обращения к переменным
.field-range {
&--sm {
font-size: @font-size--small;
}
}
src/blocks/field-select/field-select--lg.less deleted 100644 → 0
View file @ a1be402f
@import '../../less/variables.less'; // только для удобства обращения к переменным
.field-select {
&--lg {
font-size: @font-size--h3;
}
}
src/blocks/field-select/field-select--sm.less deleted 100644 → 0
View file @ a1be402f
@import '../../less/variables.less'; // только для удобства обращения к переменным
.field-select {
&--sm {
font-size: @font-size--small;
.field-select__select {
&[multiple] {
min-height: 7.5em;
}
}
}
}
src/blocks/field-text/field-text--lg.less deleted 100644 → 0
View file @ a1be402f
@import '../../less/variables.less'; // только для удобства обращения к переменным
.field-text {
&--lg {
font-size: @font-size--h3;
}
}
src/blocks/field-text/field-text--sm.less deleted 100644 → 0
View file @ a1be402f
@import '../../less/variables.less'; // только для удобства обращения к переменным
.field-text {
&--sm {
font-size: @font-size--small;
}
}
src/blocks_library.html
View file @ 9ea829ab
...@@ -1427,88 +1427,6 @@ ...@@ -1427,88 +1427,6 @@
</div> </div>
</div> </div>
<div class="blocks-library__sub-item">
<h2 class="blocks-library__sub-item-title">Увеличенный размер</h2>
<p>Модификатор <code>field-text--lg</code>, отдельный less-файл. Модификатор меняет <code>font-size</code> блока в <code>em</code>-ах (реальный размер блока продолжает зависеть от размера шрифта родителя).</p>
<div class="js-font-resizer">
<div class="row">
<div class="col-md-6">
<label class="field-text field-text--lg">
<div class="field-text__name">Многострочное текстовое поле</div>
<div class="field-text__input-wrap">
<textarea class="field-text__input" placeholder="textarea"></textarea>
<div class="field-text__help-text">Обёртка — <code>label</code>.</div>
</div>
</label>
</div>
<div class="col-md-6">
<div class="field-text field-text--lg">
<label class="field-text__name" for="text-field-1">Любое поле, выглядящее как текстовое</label>
<div class="field-text__input-wrap">
<input class="field-text__input" id="text-field-1" type="text" placeholder="input[type=text]">
<div class="field-text__help-text">Обёртка — <code>div</code>.</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="field-text field-text--lg"></code>
<code class="html"> &lt;div class="field-text__name">Любое поле, выглядящее как текстовое&lt;/div></code>
<code class="html"> &lt;div class="field-text__input-wrap"></code>
<code class="html"> &lt;input class="field-text__input" id="text-field-1" type="text" placeholder="input[type=text]"></code>
<code class="html"> &lt;div class="field-text__help-text">Необязательное пояснение&lt;/div></code>
<code class="html"> &lt;/div></code>
<code class="html">&lt;/label></code>
</pre>
</div>
</div>
</div>
<div class="blocks-library__sub-item">
<h2 class="blocks-library__sub-item-title">Уменьшенный размер</h2>
<p>Модификатор <code>field-text--sm</code>, отдельный less-файл. Модификатор меняет <code>font-size</code> блока в <code>em</code>-ах (реальный размер блока продолжает зависеть от размера шрифта родителя).</p>
<div class="js-font-resizer">
<div class="row">
<div class="col-md-6">
<label class="field-text field-text--sm">
<div class="field-text__name">Многострочное текстовое поле</div>
<div class="field-text__input-wrap">
<textarea class="field-text__input" placeholder="textarea"></textarea>
<div class="field-text__help-text">Обёртка — <code>label</code>.</div>
</div>
</label>
</div>
<div class="col-md-6">
<div class="field-text field-text--sm">
<label class="field-text__name" for="text-field-1">Любое поле, выглядящее как текстовое</label>
<div class="field-text__input-wrap">
<input class="field-text__input" id="text-field-1" type="text" placeholder="input[type=text]">
<div class="field-text__help-text">Обёртка — <code>div</code>.</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="field-text field-text--sm"></code>
<code class="html"> &lt;div class="field-text__name">Любое поле, выглядящее как текстовое&lt;/div></code>
<code class="html"> &lt;div class="field-text__input-wrap"></code>
<code class="html"> &lt;input class="field-text__input" id="text-field-1" type="text" placeholder="input[type=text]"></code>
<code class="html"> &lt;div class="field-text__help-text">Необязательное пояснение&lt;/div></code>
<code class="html"> &lt;/div></code>
<code class="html">&lt;/label></code>
</pre>
</div>
</div>
</div>
</section> </section>
...@@ -1704,180 +1622,6 @@ ...@@ -1704,180 +1622,6 @@
</div> </div>
</div> </div>
<div class="blocks-library__sub-item">
<h2 class="blocks-library__sub-item-title">Увеличенный размер</h2>
<p>Модификатор <code>field-checkbox--lg</code>, отдельный less-файл.</p>
<div class="js-font-resizer">
<div class="row">
<div class="col-md-6">
<div class="field-checkbox field-checkbox--lg">
<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>
</div>
<div class="field-checkbox field-checkbox--lg">
<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>
</label>
<div class="field-checkbox__help-text">Разметка никак не модифицируется, просто добавляются дополнительные <code>label</code>.</div>
</div>
</div>
</div>
<div class="col-md-6">
<div class="field-checkbox field-checkbox--lg 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>
<div class="field-checkbox__help-text">Пояснение не обязательно.</div>
</div>
</div>
<div class="field-checkbox field-checkbox--lg 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>
</label>
<div class="field-checkbox__help-text">Разметка никак не модифицируется, просто добавляются дополнительные <code>label</code>.</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;div class="field-checkbox field-checkbox--lg"></code>
<code class="html"> &lt;div class="field-checkbox__title">Стандартный флажок&lt;/div></code>
<code class="html"> &lt;div class="field-checkbox__input-wrap"></code>
<code class="html"> &lt;label class="field-checkbox__name"></code>
<code class="html"> &lt;input class="field-checkbox__input" type="checkbox" checked></code>
<code class="html"> &lt;span class="field-checkbox__name-text">Использовать&lt;/span></code>
<code class="html"> &lt;/label></code>
<code class="html"> &lt;div class="field-checkbox__help-text">Пояснение не обязательно.&lt;/div></code>
<code class="html"> &lt;/div></code>
<code class="html">&lt;/div></code>
</pre>
</div>
</div>
</div>
<div class="blocks-library__sub-item">
<h2 class="blocks-library__sub-item-title">Уменьшенный размер</h2>
<p>Модификатор <code>field-checkbox--sm</code>, отдельный less-файл.</p>
<div class="js-font-resizer">
<div class="row">
<div class="col-md-6">
<div class="field-checkbox field-checkbox--sm">
<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>
</div>
<div class="field-checkbox field-checkbox--sm">
<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>
</label>
<div class="field-checkbox__help-text">Разметка никак не модифицируется, просто добавляются дополнительные <code>label</code>.</div>
</div>
</div>
</div>
<div class="col-md-6">
<div class="field-checkbox field-checkbox--sm 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>
<div class="field-checkbox__help-text">Пояснение не обязательно.</div>
</div>
</div>
<div class="field-checkbox field-checkbox--sm 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>
</label>
<div class="field-checkbox__help-text">Разметка никак не модифицируется, просто добавляются дополнительные <code>label</code>.</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;div class="field-checkbox field-checkbox--sm"></code>
<code class="html"> &lt;div class="field-checkbox__title">Стандартный флажок&lt;/div></code>
<code class="html"> &lt;div class="field-checkbox__input-wrap"></code>
<code class="html"> &lt;label class="field-checkbox__name"></code>
<code class="html"> &lt;input class="field-checkbox__input" type="checkbox" checked></code>
<code class="html"> &lt;span class="field-checkbox__name-text">Использовать&lt;/span></code>
<code class="html"> &lt;/label></code>
<code class="html"> &lt;div class="field-checkbox__help-text">Пояснение не обязательно.&lt;/div></code>
<code class="html"> &lt;/div></code>
<code class="html">&lt;/div></code>
</pre>
</div>
</div>
</div>
</section> </section>
...@@ -2073,180 +1817,6 @@ ...@@ -2073,180 +1817,6 @@
</div> </div>
</div> </div>
<div class="blocks-library__sub-item">
<h2 class="blocks-library__sub-item-title">Увеличенный размер</h2>
<p>Модификатор <code>field-radio--lg</code>, отдельный less-файл.</p>
<div class="js-font-resizer">
<div class="row">
<div class="col-md-6">
<div class="field-radio field-radio--lg">
<div class="field-radio__title">Стандартная радиокнопка</div>
<div class="field-radio__input-wrap">
<label class="field-radio__name">
<input class="field-radio__input" type="radio" checked>
<span class="field-radio__name-text">Использовать</span>
</label>
<div class="field-radio__help-text">Пояснение не обязательно.</div>
</div>
</div>
<div class="field-radio field-radio--lg">
<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-5" checked>
<span class="field-radio__name-text">Использовать</span>
</label>
<label class="field-radio__name">
<input class="field-radio__input" type="radio" name="radio-5">
<span class="field-radio__name-text">Переиспользовать</span>
</label>
<label class="field-radio__name">
<input class="field-radio__input" type="radio" name="radio-5">
<span class="field-radio__name-text">Нет</span>
</label>
<div class="field-radio__help-text">Разметка никак не модифицируется, просто добавляются дополнительные <code>label</code>.</div>
</div>
</div>
</div>
<div class="col-md-6">
<div class="field-radio field-radio--lg 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" checked>
<span class="field-radio__name-text">Использовать</span>
</label>
<div class="field-radio__help-text">Пояснение не обязательно.</div>
</div>
</div>
<div class="field-radio field-radio--lg 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-6" checked>
<span class="field-radio__name-text">Использовать</span>
</label>
<label class="field-radio__name">
<input class="field-radio__input" type="radio" name="radio-6">
<span class="field-radio__name-text">Переиспользовать</span>
</label>
<label class="field-radio__name">
<input class="field-radio__input" type="radio" name="radio-6">
<span class="field-radio__name-text">Нет</span>
</label>
<div class="field-radio__help-text">Разметка никак не модифицируется, просто добавляются дополнительные <code>label</code>.</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;div class="field-radio field-radio--lg"></code>
<code class="html"> &lt;div class="field-radio__title">Стандартная радиокнопка&lt;/div></code>
<code class="html"> &lt;div class="field-radio__input-wrap"></code>
<code class="html"> &lt;label class="field-radio__name"></code>
<code class="html"> &lt;input class="field-radio__input" type="radio" checked></code>
<code class="html"> &lt;span class="field-radio__name-text">Использовать&lt;/span></code>
<code class="html"> &lt;/label></code>
<code class="html"> &lt;div class="field-radio__help-text">Пояснение не обязательно.&lt;/div></code>
<code class="html"> &lt;/div></code>
<code class="html">&lt;/div></code>
</pre>
</div>
</div>
</div>
<div class="blocks-library__sub-item">
<h2 class="blocks-library__sub-item-title">Уменьшенный размер</h2>
<p>Модификатор <code>field-radio--sm</code>, отдельный less-файл.</p>
<div class="js-font-resizer">
<div class="row">
<div class="col-md-6">
<div class="field-radio field-radio--sm">
<div class="field-radio__title">Стандартная радиокнопка</div>
<div class="field-radio__input-wrap">
<label class="field-radio__name">
<input class="field-radio__input" type="radio" checked>
<span class="field-radio__name-text">Использовать</span>
</label>
<div class="field-radio__help-text">Пояснение не обязательно.</div>
</div>
</div>
<div class="field-radio field-radio--sm">
<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-6" checked>
<span class="field-radio__name-text">Использовать</span>
</label>
<label class="field-radio__name">
<input class="field-radio__input" type="radio" name="radio-6">
<span class="field-radio__name-text">Переиспользовать</span>
</label>
<label class="field-radio__name">
<input class="field-radio__input" type="radio" name="radio-6">
<span class="field-radio__name-text">Нет</span>
</label>
<div class="field-radio__help-text">Разметка никак не модифицируется, просто добавляются дополнительные <code>label</code>.</div>
</div>
</div>
</div>
<div class="col-md-6">
<div class="field-radio field-radio--sm 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" checked>
<span class="field-radio__name-text">Использовать</span>
</label>
<div class="field-radio__help-text">Пояснение не обязательно.</div>
</div>
</div>
<div class="field-radio field-radio--sm 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-7" checked>
<span class="field-radio__name-text">Использовать</span>
</label>
<label class="field-radio__name">
<input class="field-radio__input" type="radio" name="radio-7">
<span class="field-radio__name-text">Переиспользовать</span>
</label>
<label class="field-radio__name">
<input class="field-radio__input" type="radio" name="radio-7">
<span class="field-radio__name-text">Нет</span>
</label>
<div class="field-radio__help-text">Разметка никак не модифицируется, просто добавляются дополнительные <code>label</code>.</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;div class="field-radio field-radio--sm"></code>
<code class="html"> &lt;div class="field-radio__title">Стандартный флажок&lt;/div></code>
<code class="html"> &lt;div class="field-radio__input-wrap"></code>
<code class="html"> &lt;label class="field-radio__name"></code>
<code class="html"> &lt;input class="field-radio__input" type="radio" checked></code>
<code class="html"> &lt;span class="field-radio__name-text">Использовать&lt;/span></code>
<code class="html"> &lt;/label></code>
<code class="html"> &lt;div class="field-radio__help-text">Пояснение не обязательно.&lt;/div></code>
<code class="html"> &lt;/div></code>
<code class="html">&lt;/div></code>
</pre>
</div>
</div>
</div>
</section> </section>
...@@ -2319,159 +1889,36 @@ ...@@ -2319,159 +1889,36 @@
</div> </div>
</div> </div>
</div> </div>
<div class="blocks-library__code-wrapper"> <div class="blocks-library__code-wrapper">
<span class="blocks-library__code-show-trigger" title="Показать код"><i class="blocks-library__code-icon"></i></span> <span class="blocks-library__code-show-trigger" title="Показать код"><i class="blocks-library__code-icon"></i></span>
<div class="blocks-library__code"> <div class="blocks-library__code">
<pre> <pre>
<code class="html">&lt;div class=&quot;field-toggler&quot;&gt;</code> <code class="html">&lt;div class=&quot;field-toggler&quot;&gt;</code>
<code class="html"> &lt;div class=&quot;field-toggler__title&quot;&gt;&#x41f;&#x435;&#x440;&#x435;&#x43a;&#x43b;&#x44e;&#x447;&#x430;&#x442;&#x435;&#x43b;&#x44c;-&#x444;&#x43b;&#x430;&#x436;&#x43e;&#x43a;&lt;/div&gt;</code> <code class="html"> &lt;div class=&quot;field-toggler__title&quot;&gt;&#x41f;&#x435;&#x440;&#x435;&#x43a;&#x43b;&#x44e;&#x447;&#x430;&#x442;&#x435;&#x43b;&#x44c;-&#x444;&#x43b;&#x430;&#x436;&#x43e;&#x43a;&lt;/div&gt;</code>
<code class="html"> &lt;div class=&quot;field-toggler__input-wrap&quot;&gt;</code> <code class="html"> &lt;div class=&quot;field-toggler__input-wrap&quot;&gt;</code>
<code class="html"> &lt;label class=&quot;field-toggler__name&quot;&gt;</code> <code class="html"> &lt;label class=&quot;field-toggler__name&quot;&gt;</code>
<code class="html"> &lt;input class=&quot;field-toggler__input&quot; type=&quot;checkbox&quot;&gt;</code> <code class="html"> &lt;input class=&quot;field-toggler__input&quot; type=&quot;checkbox&quot;&gt;</code>
<code class="html"> &lt;span class=&quot;field-toggler__name-text&quot;&gt;&#x418;&#x441;&#x43f;&#x43e;&#x43b;&#x44c;&#x437;&#x43e;&#x432;&#x430;&#x442;&#x44c;&lt;/span&gt;</code> <code class="html"> &lt;span class=&quot;field-toggler__name-text&quot;&gt;&#x418;&#x441;&#x43f;&#x43e;&#x43b;&#x44c;&#x437;&#x43e;&#x432;&#x430;&#x442;&#x44c;&lt;/span&gt;</code>
<code class="html"> &lt;/label&gt;</code> <code class="html"> &lt;/label&gt;</code>
<code class="html"> &lt;div class=&quot;field-toggler__help-text&quot;&gt;&#x413;&#x440;&#x430;&#x444;&#x438;&#x43a;&#x430; &#x43d;&#x435; &#x438;&#x441;&#x43f;&#x43e;&#x43b;&#x44c;&#x437;&#x443;&#x435;&#x442;&#x441;&#x44f;, &#x432;&#x441;&#x451; &#x43d;&#x430;&#x440;&#x438;&#x441;&#x43e;&#x432;&#x430;&#x43d;&#x43e; CSS-&#x43e;&#x43c;.&lt;/div&gt;</code> <code class="html"> &lt;div class=&quot;field-toggler__help-text&quot;&gt;&#x413;&#x440;&#x430;&#x444;&#x438;&#x43a;&#x430; &#x43d;&#x435; &#x438;&#x441;&#x43f;&#x43e;&#x43b;&#x44c;&#x437;&#x443;&#x435;&#x442;&#x441;&#x44f;, &#x432;&#x441;&#x451; &#x43d;&#x430;&#x440;&#x438;&#x441;&#x43e;&#x432;&#x430;&#x43d;&#x43e; CSS-&#x43e;&#x43c;.&lt;/div&gt;</code>
<code class="html"> &lt;/div&gt;</code>
<code class="html">&lt;/div&gt;</code>
</pre>
</div>
</div>
</section>
<section class="blocks-library__item" id="field-select" data-name=".field-select">
<h1 class="blocks-library__item-title">Выпадающий список, множественный выбор</h1>
<div class="js-font-resizer">
<div class="row">
<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">
<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>
<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>field-select--lg</code>, отдельный less-файл.</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;/div&gt;</code>
<code class="html">&lt;/label&gt;</code> <code class="html">&lt;/div&gt;</code>
</pre> </pre>
</div> </div>
</div> </div>
</div>
<div class="blocks-library__sub-item"> </section>
<h2 class="blocks-library__sub-item-title">Уменьшение размера</h2>
<p>Модификатор <code>field-select--sm</code>, отдельный less-файл.</p>
<section class="blocks-library__item" id="field-select" data-name=".field-select">
<h1 class="blocks-library__item-title">Выпадающий список, множественный выбор</h1>
<div class="js-font-resizer"> <div class="js-font-resizer">
<div class="row"> <div class="row">
<div class="col-md-6"> <div class="col-md-6">
<label class="field-select field-select--sm"> <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">
...@@ -2487,7 +1934,7 @@ ...@@ -2487,7 +1934,7 @@
</label> </label>
</div> </div>
<div class="col-md-6"> <div class="col-md-6">
<label class="field-select field-select--sm"> <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>
...@@ -2508,7 +1955,7 @@ ...@@ -2508,7 +1955,7 @@
<span class="blocks-library__code-show-trigger" title="Показать код"><i class="blocks-library__code-icon"></i></span> <span class="blocks-library__code-show-trigger" title="Показать код"><i class="blocks-library__code-icon"></i></span>
<div class="blocks-library__code"> <div class="blocks-library__code">
<pre> <pre>
<code class="html">&lt;label class=&quot;field-select field-select--sm&quot;&gt;</code> <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__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;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;select class=&quot;field-select__select&quot;&gt;</code>
...@@ -2525,7 +1972,6 @@ ...@@ -2525,7 +1972,6 @@
</pre> </pre>
</div> </div>
</div> </div>
</div>
</section> </section>
...@@ -2644,142 +2090,6 @@ ...@@ -2644,142 +2090,6 @@
</div> </div>
</div> </div>
<div class="blocks-library__sub-item">
<h2 class="blocks-library__sub-item-title">Увеличение размера</h2>
<p>Модификатор <code>field-range--lg</code>, отдельный less-файл.</p>
<div class="js-font-resizer">
<div class="row">
<div class="col-md-6">
<div class="field-range field-range--lg">
<div class="field-range__name">Range</div>
<div class="field-range__input-wrap">
<div class="field-range__line">
<span class="field-range__line-item" data-line-value="0%"></span>
<span class="field-range__line-item" data-line-value="25%"></span>
<span class="field-range__line-item" data-line-value="50%"></span>
<span class="field-range__line-item" data-line-value="75%"></span>
<span class="field-range__line-item" data-line-value="100%"></span>
</div>
<input class="field-range__input" type="range" min="1" max="1000" value="500" step="1">
<div class="field-range__help-text">Линейка 0 - 1000, шаг 1.</div>
</div>
</div>
</div>
<div class="col-md-6">
<div class="field-range field-range--lg">
<div class="field-range__name">Range</div>
<div class="field-range__input-wrap">
<div class="field-range__line">
<span class="field-range__line-item" data-line-value="0%"></span>
<span class="field-range__line-item" data-line-value="10%"></span>
<span class="field-range__line-item" data-line-value="20%"></span>
<span class="field-range__line-item" data-line-value="30%"></span>
<span class="field-range__line-item" data-line-value="40%"></span>
<span class="field-range__line-item" data-line-value="50%"></span>
<span class="field-range__line-item" data-line-value="60%"></span>
<span class="field-range__line-item" data-line-value="70%"></span>
<span class="field-range__line-item" data-line-value="80%"></span>
<span class="field-range__line-item" data-line-value="90%"></span>
<span class="field-range__line-item" data-line-value="100%"></span>
</div>
<input class="field-range__input" type="range" min="0" max="100" value="20" step="10">
<div class="field-range__help-text">Линейка 0 - 100, шаг 10.</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;div class=&quot;field-range field-range--lg&quot;&gt;</code>
<code class="html"> &lt;div class=&quot;field-range__name&quot;&gt;Range&lt;/div&gt;</code>
<code class="html"> &lt;div class=&quot;field-range__input-wrap&quot;&gt;</code>
<code class="html"> &lt;div class=&quot;field-range__line&quot;&gt;</code>
<code class="html"> &lt;span class=&quot;field-range__line-item&quot; data-line-value=&quot;0%&quot;&gt;&lt;/span&gt;</code>
<code class="html"> &lt;span class=&quot;field-range__line-item&quot; data-line-value=&quot;25%&quot;&gt;&lt;/span&gt;</code>
<code class="html"> &lt;span class=&quot;field-range__line-item&quot; data-line-value=&quot;50%&quot;&gt;&lt;/span&gt;</code>
<code class="html"> &lt;span class=&quot;field-range__line-item&quot; data-line-value=&quot;75%&quot;&gt;&lt;/span&gt;</code>
<code class="html"> &lt;span class=&quot;field-range__line-item&quot; data-line-value=&quot;100%&quot;&gt;&lt;/span&gt;</code>
<code class="html"> &lt;/div&gt;</code>
<code class="html"> &lt;input class=&quot;field-range__input&quot; type=&quot;range&quot; min=&quot;1&quot; max=&quot;100&quot; step=&quot;1&quot; value=&quot;70&quot; step="1"&gt;</code>
<code class="html"> &lt;div class=&quot;field-range__help-text&quot;&gt;Необязательное пояснение.&lt;/div&gt;</code>
<code class="html"> &lt;/div&gt;</code>
<code class="html">&lt;/div&gt;</code>
</pre>
</div>
</div>
</div>
<div class="blocks-library__sub-item">
<h2 class="blocks-library__sub-item-title">Уменьшение размера</h2>
<p>Модификатор <code>field-range--sm</code>, отдельный less-файл.</p>
<div class="js-font-resizer">
<div class="row">
<div class="col-md-6">
<div class="field-range field-range--sm">
<div class="field-range__name">Range</div>
<div class="field-range__input-wrap">
<div class="field-range__line">
<span class="field-range__line-item" data-line-value="0%"></span>
<span class="field-range__line-item" data-line-value="25%"></span>
<span class="field-range__line-item" data-line-value="50%"></span>
<span class="field-range__line-item" data-line-value="75%"></span>
<span class="field-range__line-item" data-line-value="100%"></span>
</div>
<input class="field-range__input" type="range" min="1" max="1000" value="500" step="1">
<div class="field-range__help-text">Линейка 0 - 1000, шаг 1.</div>
</div>
</div>
</div>
<div class="col-md-6">
<div class="field-range field-range--sm">
<div class="field-range__name">Range</div>
<div class="field-range__input-wrap">
<div class="field-range__line">
<span class="field-range__line-item" data-line-value="0%"></span>
<span class="field-range__line-item" data-line-value="10%"></span>
<span class="field-range__line-item" data-line-value="20%"></span>
<span class="field-range__line-item" data-line-value="30%"></span>
<span class="field-range__line-item" data-line-value="40%"></span>
<span class="field-range__line-item" data-line-value="50%"></span>
<span class="field-range__line-item" data-line-value="60%"></span>
<span class="field-range__line-item" data-line-value="70%"></span>
<span class="field-range__line-item" data-line-value="80%"></span>
<span class="field-range__line-item" data-line-value="90%"></span>
<span class="field-range__line-item" data-line-value="100%"></span>
</div>
<input class="field-range__input" type="range" min="0" max="100" value="20" step="10">
<div class="field-range__help-text">Линейка 0 - 100, шаг 10.</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;div class=&quot;field-range field-range--sm&quot;&gt;</code>
<code class="html"> &lt;div class=&quot;field-range__name&quot;&gt;Range&lt;/div&gt;</code>
<code class="html"> &lt;div class=&quot;field-range__input-wrap&quot;&gt;</code>
<code class="html"> &lt;div class=&quot;field-range__line&quot;&gt;</code>
<code class="html"> &lt;span class=&quot;field-range__line-item&quot; data-line-value=&quot;0%&quot;&gt;&lt;/span&gt;</code>
<code class="html"> &lt;span class=&quot;field-range__line-item&quot; data-line-value=&quot;25%&quot;&gt;&lt;/span&gt;</code>
<code class="html"> &lt;span class=&quot;field-range__line-item&quot; data-line-value=&quot;50%&quot;&gt;&lt;/span&gt;</code>
<code class="html"> &lt;span class=&quot;field-range__line-item&quot; data-line-value=&quot;75%&quot;&gt;&lt;/span&gt;</code>
<code class="html"> &lt;span class=&quot;field-range__line-item&quot; data-line-value=&quot;100%&quot;&gt;&lt;/span&gt;</code>
<code class="html"> &lt;/div&gt;</code>
<code class="html"> &lt;input class=&quot;field-range__input&quot; type=&quot;range&quot; min=&quot;1&quot; max=&quot;100&quot; step=&quot;1&quot; value=&quot;70&quot; step="1"&gt;</code>
<code class="html"> &lt;div class=&quot;field-range__help-text&quot;&gt;Необязательное пояснение.&lt;/div&gt;</code>
<code class="html"> &lt;/div&gt;</code>
<code class="html">&lt;/div&gt;</code>
</pre>
</div>
</div>
</div>
</section> </section>
...@@ -2822,74 +2132,6 @@ ...@@ -2822,74 +2132,6 @@
</div> </div>
</div> </div>
<div class="blocks-library__sub-item">
<h2 class="blocks-library__sub-item-title">Увеличение размера</h2>
<p>Модификатор <code>field-file--lg</code>, отдельный less-файл.</p>
<div class="js-font-resizer">
<div class="field-file field-file--lg">
<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>
<div class="field-file__help-text">Отображение выбранного файла(ов) требует Javascript-а. Стилизация — не требует.</div>
</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>
<code class="html">&lt;div class=&quot;field-file field-file--lg&quot;&gt;</code>
<code class="html"> &lt;div class=&quot;field-file__name&quot;&gt;&#x412;&#x44b;&#x431;&#x43e;&#x440; &#x444;&#x430;&#x439;&#x43b;&#x43e;&#x432;&lt;/div&gt;</code>
<code class="html"> &lt;label class=&quot;field-file__input-wrap&quot;&gt;</code>
<code class="html"> &lt;input class=&quot;field-file__input&quot; type=&quot;file&quot; data-multiple-caption=&quot;&#x444;&#x430;&#x439;&#x43b;&#x43e;&#x432; &#x432;&#x44b;&#x431;&#x440;&#x430;&#x43d;&#x43e;: {count}&quot; multiple&gt;</code>
<code class="html"> &lt;div class=&quot;field-file__name-text&quot; data-button-text=&quot;&#x412;&#x44b;&#x431;&#x440;&#x430;&#x442;&#x44c; &#x444;&#x430;&#x439;&#x43b;(&#x44b;)&quot;&gt;&#x41d;&#x438;&#x447;&#x435;&#x433;&#x43e; &#x43d;&#x435; &#x432;&#x44b;&#x431;&#x440;&#x430;&#x43d;&#x43e;&lt;/div&gt;</code>
<code class="html"> &lt;div class=&quot;field-file__help-text&quot;&gt;&#x41e;&#x442;&#x43e;&#x431;&#x440;&#x430;&#x436;&#x435;&#x43d;&#x438;&#x435; &#x432;&#x44b;&#x431;&#x440;&#x430;&#x43d;&#x43d;&#x43e;&#x433;&#x43e; &#x444;&#x430;&#x439;&#x43b;&#x430;(&#x43e;&#x432;) &#x442;&#x440;&#x435;&#x431;&#x443;&#x435;&#x442; Javascript-&#x430;. &#x421;&#x442;&#x438;&#x43b;&#x438;&#x437;&#x430;&#x446;&#x438;&#x44f; &mdash; &#x43d;&#x435; &#x442;&#x440;&#x435;&#x431;&#x443;&#x435;&#x442;.&lt;/div&gt;</code>
<code class="html"> &lt;/label&gt;</code>
<code class="html">&lt;/div&gt;</code>
</pre>
</div>
</div>
</div>
<div class="blocks-library__sub-item">
<h2 class="blocks-library__sub-item-title">Уменьшение размера</h2>
<p>Модификатор <code>field-file--sm</code>, отдельный less-файл.</p>
<div class="js-font-resizer">
<div class="field-file field-file--sm">
<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>
<div class="field-file__help-text">Отображение выбранного файла(ов) требует Javascript-а. Стилизация — не требует.</div>
</label>
</div>
<div class="field-file field-file--sm">
<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>
<div class="field-file__help-text">Отображение выбранного файла(ов) требует Javascript-а. Стилизация — не требует.</div>
</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>
<code class="html">&lt;div class=&quot;field-file field-file--sm&quot;&gt;</code>
<code class="html"> &lt;div class=&quot;field-file__name&quot;&gt;&#x412;&#x44b;&#x431;&#x43e;&#x440; &#x444;&#x430;&#x439;&#x43b;&#x43e;&#x432;&lt;/div&gt;</code>
<code class="html"> &lt;label class=&quot;field-file__input-wrap&quot;&gt;</code>
<code class="html"> &lt;input class=&quot;field-file__input&quot; type=&quot;file&quot; data-multiple-caption=&quot;&#x444;&#x430;&#x439;&#x43b;&#x43e;&#x432; &#x432;&#x44b;&#x431;&#x440;&#x430;&#x43d;&#x43e;: {count}&quot; multiple&gt;</code>
<code class="html"> &lt;div class=&quot;field-file__name-text&quot; data-button-text=&quot;&#x412;&#x44b;&#x431;&#x440;&#x430;&#x442;&#x44c; &#x444;&#x430;&#x439;&#x43b;(&#x44b;)&quot;&gt;&#x41d;&#x438;&#x447;&#x435;&#x433;&#x43e; &#x43d;&#x435; &#x432;&#x44b;&#x431;&#x440;&#x430;&#x43d;&#x43e;&lt;/div&gt;</code>
<code class="html"> &lt;div class=&quot;field-file__help-text&quot;&gt;&#x41e;&#x442;&#x43e;&#x431;&#x440;&#x430;&#x436;&#x435;&#x43d;&#x438;&#x435; &#x432;&#x44b;&#x431;&#x440;&#x430;&#x43d;&#x43d;&#x43e;&#x433;&#x43e; &#x444;&#x430;&#x439;&#x43b;&#x430;(&#x43e;&#x432;) &#x442;&#x440;&#x435;&#x431;&#x443;&#x435;&#x442; Javascript-&#x430;. &#x421;&#x442;&#x438;&#x43b;&#x438;&#x437;&#x430;&#x446;&#x438;&#x44f; &mdash; &#x43d;&#x435; &#x442;&#x440;&#x435;&#x431;&#x443;&#x435;&#x442;.&lt;/div&gt;</code>
<code class="html"> &lt;/label&gt;</code>
<code class="html">&lt;/div&gt;</code>
</pre>
</div>
</div>
</div>
</section> </section>
...@@ -3454,9 +2696,10 @@ ...@@ -3454,9 +2696,10 @@
</pre> </pre>
</div> </div>
</div> </div>
<div class="blocks-library__sub-item"> <div class="blocks-library__sub-item">
<h2 class="blocks-library__sub-item-title">Увеличение и уменьшение модификаторами</h2> <h2 class="blocks-library__sub-item-title">Увеличение и уменьшение модификаторами</h2>
<p>Модификатор <code>btn--lg</code>, отдельный less-файл.</p> <p>Модификаторы <code>btn--lg</code>, <code>btn--sm</code>, вписаны в less-файл стилизации кнопок.</p>
<div class="js-font-resizer"> <div class="js-font-resizer">
<p> <p>
<a href="" class="btn btn--lg">Cсылка (lg)</a> <a href="" class="btn btn--lg">Cсылка (lg)</a>
...@@ -3484,9 +2727,10 @@ ...@@ -3484,9 +2727,10 @@
</div> </div>
</div> </div>
</div> </div>
<div class="blocks-library__sub-item"> <div class="blocks-library__sub-item">
<h2 class="blocks-library__sub-item-title">Блочные кнопки</h2> <h2 class="blocks-library__sub-item-title">Блочные кнопки</h2>
<p>Модификатор <code>btn--block</code>, отдельный less-файл.</p> <p>Модификатор <code>btn--block</code>, вписан в less-файл стилизации кнопок.</p>
<p> <p>
<a href="" class="btn btn--block">Cсылка</a> <a href="" class="btn btn--block">Cсылка</a>
<input type="submit" class="btn btn--block btn--main" value="Input"> <input type="submit" class="btn btn--block btn--main" value="Input">
...@@ -3508,61 +2752,6 @@ ...@@ -3508,61 +2752,6 @@
<section class="blocks-library__item" id="form-mariage">
<h1 class="blocks-library__item-title">Комбинации элементов форм</h1>
<p>Сравнение и тестирование комбинаций элементов форм по умолчанию и с модификаторами.</p>
<div class="js-font-resizer">
<form action="" class="form form--line">
<label class="field-text">
<div class="field-text__input-wrap">
<input class="field-text__input" type="text" placeholder="input[type=text]">
</div>
</label>
<button class="btn">Отправить</button>
</form>
<form action="" class="form form--line">
<label class="field-text field-text--lg">
<div class="field-text__input-wrap">
<input class="field-text__input" type="text" placeholder="input[type=text]">
</div>
</label>
<button class="btn btn--lg">Отправить</button>
</form>
<form action="" class="form form--line">
<label class="field-text field-text--sm">
<div class="field-text__input-wrap">
<input class="field-text__input" type="text" placeholder="input[type=text]">
</div>
</label>
<button class="btn btn--sm">Отправить</button>
</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 form--line&quot;&gt;</code>
<code class="html"> &lt;label class=&quot;field-text&quot;&gt;...&lt;/label&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;/form&gt;</code>
<code class="html">&lt;form action=&quot;&quot; class=&quot;form form--line&quot;&gt;</code>
<code class="html"> &lt;label class=&quot;field-text field-text--lg&quot;&gt;...&lt;/label&gt;</code>
<code class="html"> &lt;button class=&quot;btn btn--lg&quot;&gt;&#x41e;&#x442;&#x43f;&#x440;&#x430;&#x432;&#x438;&#x442;&#x44c;&lt;/button&gt;</code>
<code class="html">&lt;/form&gt;</code>
<code class="html">&lt;form action=&quot;&quot; class=&quot;form form--line&quot;&gt;</code>
<code class="html"> &lt;label class=&quot;field-text field-text--sm&quot;&gt;...&lt;/label&gt;</code>
<code class="html"> &lt;button class=&quot;btn btn--sm&quot;&gt;&#x41e;&#x442;&#x43f;&#x440;&#x430;&#x432;&#x438;&#x442;&#x44c;&lt;/button&gt;</code>
<code class="html">&lt;/form&gt;</code>
</pre>
</div>
</div>
</section>
<section class="blocks-library__item" id="form-mariage" data-name=".fields-group"> <section class="blocks-library__item" id="form-mariage" data-name=".fields-group">
<h1 class="blocks-library__item-title">Группы текстовых полей, селектов, кнопок</h1> <h1 class="blocks-library__item-title">Группы текстовых полей, селектов, кнопок</h1>
......
src/less/style.less
View file @ 9ea829ab
...@@ -23,26 +23,14 @@ ...@@ -23,26 +23,14 @@
@import './src/blocks/table-responsive-rotate/table-responsive-rotate.less'; @import './src/blocks/table-responsive-rotate/table-responsive-rotate.less';
@import './src/blocks/table-responsive-rotate/table-responsive-rotate--thead-fix.less'; @import './src/blocks/table-responsive-rotate/table-responsive-rotate--thead-fix.less';
@import './src/blocks/field-text/field-text.less'; @import './src/blocks/field-text/field-text.less';
@import './src/blocks/field-text/field-text--lg.less';
@import './src/blocks/field-text/field-text--sm.less';
@import './src/blocks/field-checkbox/field-checkbox.less'; @import './src/blocks/field-checkbox/field-checkbox.less';
@import './src/blocks/field-checkbox/field-checkbox--custom.less'; @import './src/blocks/field-checkbox/field-checkbox--custom.less';
@import './src/blocks/field-checkbox/field-checkbox--lg.less';
@import './src/blocks/field-checkbox/field-checkbox--sm.less';
@import './src/blocks/field-radio/field-radio.less'; @import './src/blocks/field-radio/field-radio.less';
@import './src/blocks/field-radio/field-radio--custom.less'; @import './src/blocks/field-radio/field-radio--custom.less';
@import './src/blocks/field-radio/field-radio--lg.less';
@import './src/blocks/field-radio/field-radio--sm.less';
@import './src/blocks/field-select/field-select.less'; @import './src/blocks/field-select/field-select.less';
@import './src/blocks/field-select/field-select--lg.less';
@import './src/blocks/field-select/field-select--sm.less';
@import './src/blocks/field-range/field-range.less'; @import './src/blocks/field-range/field-range.less';
@import './src/blocks/field-range/field-range--lg.less';
@import './src/blocks/field-range/field-range--sm.less';
@import './src/blocks/field-range/field-range__line.less'; @import './src/blocks/field-range/field-range__line.less';
@import './src/blocks/field-file/field-file.less'; @import './src/blocks/field-file/field-file.less';
@import './src/blocks/field-file/field-file--lg.less';
@import './src/blocks/field-file/field-file--sm.less';
@import './src/blocks/field-actions/field-actions.less'; @import './src/blocks/field-actions/field-actions.less';
@import './src/blocks/form/form.less'; @import './src/blocks/form/form.less';
@import './src/blocks/form/form--horizontal.less'; @import './src/blocks/form/form--horizontal.less';
......
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