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