Skip to content

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

form horizontal

parent 7394fd48
Hide whitespace changes
Inline Side-by-side
Showing with 128 additions and 93 deletions
src/_blocks_library.html
View file @ d50d5fa5
......@@ -303,6 +303,7 @@
</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">
......@@ -312,7 +313,7 @@
<input class="field-checkbox__input" type="checkbox">
<span class="field-checkbox__name-text">Флажок</span>
</label>
<div class="field-checkbox__help-text">Пояснительный тест.</div>
<div class="field-checkbox__help-text">Есть общее название.</div>
</div>
</div>
<div class="field-radio">
......@@ -325,12 +326,12 @@
<input class="field-radio__input" type="radio" name="one">
<span class="field-checkbox__name-text">Радиокнопка</span>
</label>
<div class="field-radio__help-text">Пояснительный тест.</div>
<div class="field-radio__help-text">Нет общего названия.</div>
</div>
</div>
<label class="field-select">
<div class="field-select__name">Название поля</div>
<div class="field-select__input-wrap">
<div class="field-select__select-wrap">
<select class="field-select__select">
<optgroup label="optgroup">
<option>Значение 1</option>
......@@ -357,62 +358,93 @@
</form>
</div>
<div class="col-md-6">
<form action="" class="form form--horizontal">
<form action="" class="form form--horizontal">
<fieldset>
<legend>Горизонтальная форма</legend>
<div class="field">
<label class="field__name" for="field_id_001">Название поля</label>
<div class="field__input-wrap">
<input class="field__input-text" id="field_id_001" type="text" placeholder="input[type=text]">
<div class="field__help-text">Лейбл отдельно, обёртка — <code>&lt;div&gt;</code>, связь с лейблом по <code>id</code>.</div>
<div class="field-text">
<label class="field-text__name" for="field-text_id_001">Название поля какое-то длинное</label>
<div class="field-text__input-wrap">
<input class="field-text__input" id="field-text_id_001" type="text" placeholder="input[type=text]">
<div class="field-text__help-text">Лейбл отдельно, обёртка — <code>&lt;div&gt;</code>, связь с лейблом по <code>id</code>.</div>
</div>
</div>
<label class="field">
<div class="field__name">Название поля</div>
<div class="field__input-wrap">
<input class="field__input-text" type="text" placeholder="input[type=text]">
<div class="field__help-text">Обёртка — <code>&lt;label&gt;</code>.</div>
<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">Обёртка — <code>&lt;label&gt;</code>.</div>
</div>
</label>
<div class="field field--checkbox">
<div class="field__name"></div>
<div class="field__input-wrap">
<label class="field__name">
<input class="field__input" type="checkbox">
Чекбокс, более известный как флажок
<label class="field-text">
<div class="field-text__name">Название поля</div>
<div class="field-text__input-wrap">
<textarea class="field-text__input" rows="3" placeholder="textarea"></textarea>
<div class="field-text__help-text">Обёртка — <code>&lt;label&gt;</code>.</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">Флажок</span>
</label>
<div class="field__help-text">Пояснительный тест.</div>
<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 field--actions">
<button class="btn">Отправить</button>
</div>
</fieldset>
</form>
<form action="" class="form form--inline">
<fieldset>
<legend>Инлайн форма</legend>
<div class="field">
<label class="field__name" for="field_id_001">Логин</label>
<div class="field__input-wrap">
<input class="field__input-text" id="field_id_001" type="text" placeholder="input[type=text]">
<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="one">
<span class="field-checkbox__name-text">Радиокнопка</span>
</label>
<label class="field-radio__name">
<input class="field-radio__input" type="radio" name="one">
<span class="field-checkbox__name-text">Радиокнопка</span>
</label>
<div class="field-radio__help-text">Нет общего названия, но оставлен пустой <code>div</code> для него.</div>
</div>
</div>
<div class="field field--checkbox">
<div class="field__input-wrap">
<label class="field__name">
<input class="field__input" type="checkbox">
Чекбокс
<div class="field-radio">
<div class="field-radio__input-wrap">
<label class="field-radio__name">
<input class="field-radio__input" type="radio" name="one">
<span class="field-checkbox__name-text">Радиокнопка</span>
</label>
<label class="field-radio__name">
<input class="field-radio__input" type="radio" name="one">
<span class="field-checkbox__name-text">Радиокнопка</span>
</label>
<div class="field-radio__help-text">Нет общего названия и отсутствует пустой <code>div</code> для него.</div>
</div>
</div>
<label class="field">
<div class="field__name">Пароль</div>
<div class="field__input-wrap">
<input class="field__input-text" type="password" placeholder="input[type=password]">
<label class="field-select">
<div class="field-select__name">Название поля</div>
<div class="field-select__select-wrap">
<select class="field-select__select">
<optgroup label="optgroup">
<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 class="field field--actions">
<label class="field-file">
<div class="field-file__name">Название поля</div>
<div class="field-file__input-wrap">
<input class="field-file__input" type="file">
<div class="field-file__help-text">Обёртка — <code>&lt;label&gt;</code>.</div>
</div>
</label>
<div class="field-actions">
<button class="btn">Отправить</button>
</div>
</fieldset>
......
src/less/blocks/field-checkbox.less
View file @ d50d5fa5
......@@ -2,6 +2,13 @@
display: block;
margin-bottom: (@line-height / 2);
&__title {
font-weight: 700;
display: block;
margin-bottom: round(@line-height / 4, 2);
min-height: 1px;
}
&__input-wrap {}
&__name {
......
src/less/blocks/field-radio.less
View file @ d50d5fa5
......@@ -2,6 +2,13 @@
display: block;
margin-bottom: (@line-height / 2);
&__title {
font-weight: 700;
display: block;
margin-bottom: round(@line-height / 4, 2);
min-height: 1px;
}
&__input-wrap {}
&__name {
......
src/less/blocks/form.less
View file @ d50d5fa5
......@@ -3,51 +3,40 @@
margin-bottom: @line-height;
}
// &--horizontal {
// .field {
// display: flex;
// }
// .field__name {
// width: 15rem;
// padding-top: .42em;
// padding-right: .3em;
// }
// .field__input-wrap {
// flex-grow: 10;
// }
// .field--actions {
// padding-left: 15rem;
// }
// .field--checkbox {
// & > .field__name {
// margin-right: 0;
// }
// .field__input-wrap .field__name {
// width: auto;
// padding-top: 0;
// }
// }
// }
// &--inline {
// .field {
// display: inline-block;
// vertical-align: top;
// }
// .field__name {
// display: inline-block;
// vertical-align: top;
// padding-top: .42em;
// }
// .field__input-wrap {
// display: inline-block;
// vertical-align: top;
// }
// }
&--horizontal {
.field-text,
.field-checkbox,
.field-radio,
.field-select,
.field-file {
display: flex;
}
.field-text__name,
.field-select__name {
width: 15rem;
padding-top: .42em;
padding-right: .6em;
margin-bottom: 0;
}
.field-checkbox__title,
.field-radio__title,
.field-file__name {
width: 15rem;
padding-right: .6em;
margin-bottom: 0;
}
.field-text__input-wrap,
.field-select__select-wrap,
.field-file__input-wrap {
flex-grow: 1;
}
.field-actions {
padding-left: 15rem;
}
}
}
src/less/style.less
View file @ d50d5fa5
......@@ -6,6 +6,7 @@
@import "blocks/table-responsive.less";
@import "blocks/btn.less";
@import "blocks/form.less";
@import "blocks/field-text.less";
@import "blocks/field-checkbox.less";
@import "blocks/field-radio.less";
......
src/less/variables.less
View file @ d50d5fa5
......@@ -81,6 +81,5 @@
// Разное
@border-radius: .3rem;
@opacity: .7;
@border-radius: .3rem; // универсальное сглаживание углов бордюра
@opacity: .7; // универсальная прозрачность
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