Skip to content

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

forms: begin

parent 9104ecf1
Hide whitespace changes
Inline Side-by-side
Showing with 141 additions and 6 deletions
src/_blocks_library.html
View file @ cc1eb178
......@@ -267,6 +267,94 @@
<input type="file">
</fieldset>
</form>
<h2 id="form-style">Стилизованные формы</h2>
<p>Стилизация: БЭМ-блоки <code>.field</code>, <code>.form</code> и модификаторы. Опирается на стилизацию форм по умолчанию.</p>
<div class="row">
<div class="col-md-6">
<form action="" class="form">
<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>
</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>
</div>
</label>
<label class="field field--error">
<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>
</div>
</label>
<label class="field field--success">
<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>
</div>
</label>
<div class="field field--actions">
<button class="btn">Отправить</button>
</div>
</fieldset>
</form>
</div>
<div class="col-md-6">
<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>
</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>
</div>
</label>
<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__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>
</div>
</label>
<div class="field field--actions">
<button class="btn">Отправить</button>
</div>
</fieldset>
</form>
</div>
</div>
</section>
<section class="blocks-library__item">
......
src/img/form_field_bg/check.svg 0 → 100644
View file @ cc1eb178
<svg xmlns="http://www.w3.org/2000/svg" width="28" height="28" viewBox="0 0 28 28"><path fill="#5cb85c" d="M26.11 8.844q0 .625-.44 1.062L12.234 23.344q-.438.438-1.062.438t-1.06-.438l-7.782-7.78q-.438-.44-.438-1.063t.438-1.06l2.125-2.126q.438-.438 1.062-.438t1.062.438l4.594 4.61L21.42 5.656q.44-.438 1.063-.438t1.062.437l2.125 2.125q.438.437.438 1.062z"/></svg>
src/img/form_field_bg/checkbox--checked.svg 0 → 100644
View file @ cc1eb178
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path fill="#2D2D2D" d="M9.984 17.016l9-9-1.406-1.453-7.594 7.594-3.563-3.563L5.016 12zm9-14.016q.844 0 1.43.61T21 5.014v13.97q0 .796-.586 1.405t-1.43.61H5.014q-.843 0-1.43-.61T3 18.984V5.014q0-.796.585-1.405T5.015 3h13.97z"/></svg>
src/img/form_field_bg/checkbox.svg 0 → 100644
View file @ cc1eb178
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path fill="#2D2D2D" d="M18.984 3q.797 0 1.406.61T21 5.014v13.97q0 .796-.61 1.405t-1.406.61H5.014q-.796 0-1.405-.61T3 18.984V5.014q0-.796.61-1.405T5.014 3h13.97zm0 2.016H5.014v13.97h13.97V5.015z"/></svg>
src/img/form_field_bg/chevron-down--error.svg 0 → 100644
View file @ cc1eb178
<svg xmlns="http://www.w3.org/2000/svg" width="28" height="28" viewBox="0 0 28 28"><path fill="#d9534f" d="M26.297 12.625L14.703 24.203q-.297.297-.703.297t-.703-.297L1.703 12.625q-.297-.297-.297-.71t.297-.712l2.594-2.578q.297-.297.703-.297t.703.297L14 16.922l8.297-8.297q.297-.297.703-.297t.703.297l2.594 2.578q.297.297.297.71t-.297.712z"/></svg>
\ No newline at end of file
src/img/form_field_bg/chevron-down--success.svg 0 → 100644
View file @ cc1eb178
<svg xmlns="http://www.w3.org/2000/svg" width="28" height="28" viewBox="0 0 28 28"><path fill="#5cb85c" d="M26.297 12.625L14.703 24.203q-.297.297-.703.297t-.703-.297L1.703 12.625q-.297-.297-.297-.71t.297-.712l2.594-2.578q.297-.297.703-.297t.703.297L14 16.922l8.297-8.297q.297-.297.703-.297t.703.297l2.594 2.578q.297.297.297.71t-.297.712z"/></svg>
\ No newline at end of file
src/img/form_field_bg/chevron-down.svg 0 → 100644
View file @ cc1eb178
<svg xmlns="http://www.w3.org/2000/svg" width="28" height="28" viewBox="0 0 28 28"><path fill="#2D2D2D" d="M26.297 12.625L14.703 24.203q-.297.297-.703.297t-.703-.297L1.703 12.625q-.297-.297-.297-.71t.297-.712l2.594-2.578q.297-.297.703-.297t.703.297L14 16.922l8.297-8.297q.297-.297.703-.297t.703.297l2.594 2.578q.297.297.297.71t-.297.712z"/></svg>
src/img/form_field_bg/close.svg 0 → 100644
View file @ cc1eb178
<svg xmlns="http://www.w3.org/2000/svg" width="22" height="28" viewBox="0 0 22 28"><path fill="#d9534f" d="M20.28 20.656q0 .625-.437 1.062l-2.125 2.125q-.438.438-1.062.438t-1.062-.437L11 19.25l-4.594 4.593q-.438.438-1.062.438t-1.062-.437l-2.125-2.125q-.438-.438-.438-1.062t.437-1.062L6.75 15l-4.593-4.594q-.438-.438-.438-1.062t.437-1.062l2.125-2.125q.438-.438 1.062-.438t1.062.437L11 10.75l4.594-4.593q.438-.438 1.062-.438t1.062.437l2.125 2.125q.438.438.438 1.062t-.437 1.062L15.25 15l4.593 4.594q.438.438.438 1.062z"/></svg>
src/img/form_field_bg/radiobutton--checked.svg 0 → 100644
View file @ cc1eb178
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path fill="#2D2D2D" d="M12 20.016q3.28 0 5.648-2.367T20.015 12t-2.367-5.647T12 3.986 6.352 6.353 3.985 12t2.367 5.65T12 20.015zm0-18q4.125 0 7.055 2.93T21.985 12t-2.93 7.056T12 21.986t-7.055-2.93T2.015 12t2.93-7.054T12 2.016zm0 4.968q2.063 0 3.54 1.477T17.015 12t-1.477 3.54T12 17.015 8.46 15.54 6.985 12 8.46 8.46 12 6.985z"/></svg>
src/img/form_field_bg/radiobutton.svg 0 → 100644
View file @ cc1eb178
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path fill="#2D2D2D" d="M12 20.016q3.28 0 5.648-2.367T20.015 12t-2.367-5.647T12 3.986 6.352 6.353 3.985 12t2.367 5.65T12 20.015zm0-18q4.125 0 7.055 2.93T21.985 12t-2.93 7.056T12 21.986t-7.055-2.93T2.015 12t2.93-7.054T12 2.016z"/></svg>
src/less/blocks/field.less 0 → 100644
View file @ cc1eb178
.field {
display: block;
margin-bottom: (@line-height / 2);
&__name {
font-weight: 700;
display: block;
margin-bottom: round(@line-height / 4, 2);
}
&__input-wrap {}
&__input-text {
margin-bottom: round(@line-height / 4, 2);
}
&__help-text {
font-size: @font-size--small;
color: @text-color--muted;
}
}
src/less/blocks/form.less 0 → 100644
View file @ cc1eb178
.form {
&:not(:last-child) {
margin-bottom: @line-height;
}
}
src/less/global_scaffolding.less
View file @ cc1eb178
......@@ -62,6 +62,7 @@ html {
-ms-overflow-style: scrollbar;
-ms-text-size-adjust: 100%;
min-width: 320px;
site: be cool; // :)
}
body {
......@@ -350,6 +351,11 @@ input[type="number"]::-webkit-outer-spin-button {
height: auto;
}
::placeholder {
color: @text-color--muted;
opacity: 1;
}
textarea {
resize: vertical;
}
......@@ -366,9 +372,13 @@ legend {
width: 100%;
padding: 0;
border: 0;
margin-bottom: .5em;
font-size: 1em;
line-height: inherit;
margin-top: (@line-height / 2);
margin-bottom: (@line-height / 2);
font-size: @font-size--h4;
font-family: @font-family--headings;
font-weight: 700;
line-height: 1.4;
color: currentColor;
}
// Добавочная стилизация по умолчанию
......@@ -405,7 +415,7 @@ select[multiple] {
}
input[type="color"] {
width: auto;
max-width: 100px;
}
input[type="range"] {
......
src/less/style.less
View file @ cc1eb178
......@@ -6,3 +6,5 @@
@import "blocks/table-responsive.less";
@import "blocks/btn.less";
@import "blocks/form.less";
@import "blocks/field.less";
src/less/variables.less
View file @ cc1eb178
......@@ -33,10 +33,10 @@
@font-size--h1: 3.6rem;
@font-size--h2: 3rem;
@font-size--h3: 2.4rem;
@font-size--h4: 1.6rem;
@font-size--h4: 2.0rem;
@font-size--h5: 1.6rem;
@font-size--h6: 1.6rem;
@font-size--small: 1.1rem;
@font-size--small: 80%;
@line-height: 1.375em;
......
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