Skip to content

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

Добавил формы в линию, поправил существующие

parent bc87f98c
Hide whitespace changes
Inline Side-by-side
Showing with 292 additions and 5 deletions
src/blocks/field-checkbox/field-checkbox.less
View file @ 1501d681
......@@ -7,7 +7,7 @@
&__title {
font-weight: 700;
line-height: 1.2em;
line-height: @line-height;
display: block;
margin-bottom: round(@line-height / 4, 2);
min-height: 1px;
......
src/blocks/field-radio/field-radio.less
View file @ 1501d681
......@@ -7,7 +7,7 @@
&__title {
font-weight: 700;
line-height: 1.2em;
line-height: @line-height;
display: block;
margin-bottom: round(@line-height / 4, 2);
min-height: 1px;
......
src/blocks/field-range/field-range.less
View file @ 1501d681
......@@ -9,6 +9,7 @@
font-weight: 700;
display: block;
margin-bottom: round(@line-height / 4, 2);
line-height: @line-height;
}
&__input-wrap {
......
src/blocks/field-select/field-select.less
View file @ 1501d681
......@@ -19,6 +19,7 @@
background-repeat: no-repeat;
background-position: right 0.3em center;
background-size: 1.063em 0.688em;
padding-right: 1.8em;
&[multiple] {
background-image: none;
......
src/blocks/field-text/field-text.less
View file @ 1501d681
......@@ -9,6 +9,7 @@
font-weight: 700;
display: block;
margin-bottom: round(@line-height / 4, 2);
line-height: @line-height;
}
&__input-wrap {}
......
src/blocks/field-toggler/field-toggler.less
View file @ 1501d681
......@@ -7,7 +7,7 @@
&__title {
font-weight: 700;
line-height: 1.2em;
line-height: @line-height;
display: block;
margin-bottom: round(@line-height / 4, 2);
min-height: 1px;
......
src/blocks/form/form--line.less 0 → 100644
View file @ 1501d681
@import '../../less/variables.less'; // только для удобства обращения к переменным
.form {
&--line {
&:not(:last-child) {
margin-bottom: 0;
}
@media (min-width: @screen-sm) {
.field-text,
.field-checkbox,
.field-radio,
.field-select,
.field-file,
.field-range,
.field-toggler,
.field-actions {
display: inline-block;
vertical-align: top;
margin-top: 0;
margin-right: 0.3em;
}
.field-text__input-wrap,
.field-checkbox__input-wrap,
.field-radio__input-wrap,
.field-select__select-wrap,
.field-toggler__input-wrap,
.field-file__input-wrap {
display: inline-block;
vertical-align: top;
}
.field-file__input-wrap {
max-width: 35rem;
}
.field-text__name,
.field-checkbox__title,
.field-radio__title,
.field-select__name,
.field-file__name,
.field-range__name,
.field-toggler__title {
display: inline-block;
vertical-align: top;
margin: 0;
max-width: 20rem;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
padding-top: e("calc(@{field-padding-top} + 1px)"); // 1px — бордюр инпута
}
.field-checkbox__title,
.field-radio__title,
.field-toggler__title {
margin-right: 0.3em;
}
.field-checkbox__name,
.field-radio__name,
.field-toggler__name {
margin-right: 0.6em;
margin-top: e("calc(@{field-padding-top} + 1px)");
margin-bottom: e("calc(@{field-padding-top} + 1px)");
}
}
}
}
src/blocks/form/form.less
View file @ 1501d681
......@@ -12,4 +12,5 @@
margin-bottom: @line-height;
}
}
}
src/blocks_library.html
View file @ 1501d681
......@@ -3025,7 +3025,6 @@
<div class="blocks-library__sub-item">
<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">
......@@ -3069,7 +3068,7 @@
</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="one1">
......@@ -3200,8 +3199,197 @@
</pre>
</div>
</div>
</div>
<div class="blocks-library__sub-item">
<h1 class="blocks-library__sub-item-title">Форма в строку</h1>
<p>Только начиная с SM ширины. Модификатор. Отдельный less-файл.</p>
<p class="alert alert--danger">ВНИМАНИЕ! Поскольку все отступы сделаны в em, при наличии названий полей на некоторых больших размерах шрифта возможно несоответствие (1-2px) базовой линии названия и базовой линии текста в поле.</p>
<div class="js-font-resizer">
<form action="" class="form form--line">
<label class="field-text">
<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">Произвольное слово.</div>
</div>
</label>
<label class="field-text">
<div class="field-text__name">Пароль</div>
<div class="field-text__input-wrap">
<input class="field-text__input" type="password" placeholder="input[type=password]">
<div class="field-text__help-text">Не менее 1 символа!</div>
</div>
</label>
<div class="field-checkbox">
<div class="field-checkbox__input-wrap">
<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">Входить автоматически.</div>
</div>
</div>
<div class="field-actions">
<button class="btn">Войти</button>
</div>
</form>
<hr>
<form action="" class="form form--line">
<label class="field-text">
<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">Вменяемое имя.</div>
</div>
</label>
<label class="field-select">
<div class="field-select__name">Пол</div>
<div class="field-select__select-wrap">
<select class="field-select__select">
<option>Мужской</option>
<option>Женский</option>
<option>Феминистка/Шовенист</option>
</select>
<small class="field-select__help-text">Придётся выбрать.</small>
</div>
</label>
<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="inline-4">
<span class="field-radio__name-text">Правша</span>
</label>
<label class="field-radio__name">
<input class="field-radio__input" type="radio" name="inline-4">
<span class="field-radio__name-text">Левша</span>
</label>
<div class="field-radio__help-text">Амбидекстеров не держим.</div>
</div>
</div>
<div class="field-actions">
<button class="btn">Найти</button>
</div>
</form>
<hr>
<form action="" class="form form--line">
<label class="field-text">
<div class="field-text__name">Мыльце</div>
<div class="field-text__input-wrap">
<input class="field-text__input" type="email" placeholder="input[type=email]">
<div class="field-text__help-text">Корретный адрес электропочты.</div>
</div>
</label>
<div class="field-checkbox">
<div class="field-checkbox__title">Обязательно</div>
<div class="field-checkbox__input-wrap">
<label class="field-checkbox__name">
<input class="field-checkbox__input" type="checkbox">
<span class="field-checkbox__name-text">Я принимаю <a href="">Условия</a></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">Необходимо отметить оба флажка для регистрации.</div>
</div>
</div>
<div class="field-actions">
<button class="btn">Зарегистрироваться</button>
</div>
</form>
<hr>
<form action="" class="form form--line">
<label class="field-text">
<div class="field-text__name">Мыльце</div>
<div class="field-text__input-wrap">
<input class="field-text__input" type="email" placeholder="input[type=email]">
<div class="field-text__help-text">Корретный адрес электропочты.</div>
</div>
</label>
<div class="field-toggler">
<div class="field-toggler__title">Уровень</div>
<div class="field-toggler__input-wrap">
<label class="field-toggler__name">
<input class="field-toggler__input" type="radio" name="light" checked>
<span class="field-toggler__name-text">Просветлённый</span>
</label>
<label class="field-toggler__name">
<input class="field-toggler__input" type="radio" name="light">
<span class="field-toggler__name-text">Бодхисаттва</span>
</label>
<div class="field-toggler__help-text">Буддисты поймут.</div>
</div>
</div>
<div class="field-actions">
<button class="btn">Взять света</button>
</div>
</form>
<hr>
<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 class="field-text__help-text">Произвольное слово.</div>
</div>
</label>
<label class="field-text">
<div class="field-text__input-wrap">
<input class="field-text__input" type="password" placeholder="input[type=password]">
<div class="field-text__help-text">Не менее 1 символа!</div>
</div>
</label>
<div class="field-checkbox">
<div class="field-checkbox__input-wrap">
<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">Входить автоматически.</div>
</div>
</div>
<div class="field-actions">
<button class="btn">Отправить</button>
</div>
</form>
<hr>
<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 class="field-text__help-text">Произвольное слово.</div>
</div>
</label>
<div class="field-file">
<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-actions">
<button class="btn">Отправить</button>
</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--line&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-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>
......@@ -3306,6 +3494,24 @@
<section class="blocks-library__item" id="form-mariage">
<h1 class="blocks-library__item-title">TODO: Комбинации элементов форм</h1>
<p>Сравнение и тестирование комбинаций элементов форм по умолчанию и с модификаторами.</p>
<div class="js-font-resizer">
111
</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">111</code>
</pre>
</div>
</div>
</section>
<hr>
......
src/less/style.less
View file @ 1501d681
......@@ -46,6 +46,7 @@
@import './src/blocks/field-actions/field-actions.less';
@import './src/blocks/form/form.less';
@import './src/blocks/form/form--horizontal.less';
@import './src/blocks/form/form--line.less';
@import './src/blocks/thumb/thumb.less';
@import './src/blocks/sprite-svg--localstorage/sprite-svg--localstorage.less';
@import './src/blocks/field-toggler/field-toggler.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