Skip to content

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

Merge pull request #1 from nicothin/form 

Form
parents aff64001 77e3bf4c
Show whitespace changes
Inline Side-by-side
Showing with 437 additions and 280 deletions
README.md
View file @ 55d549d4
...@@ -2,6 +2,6 @@ ...@@ -2,6 +2,6 @@
Установка: выполнить в папке проекта: `npm i`. Установка: выполнить в папке проекта: `npm i`.
Использование: `npm run gulp` (дабы не ставить глобально 4-ю версию, которая сейчас в альфе). После слова `gulp` можно через пробел указать другие команды (см. `gulpfile.js`). Использование: `npm start` (дабы не ставить глобально 4-ю версию gulp, которая сейчас в альфе). После `npm start` можно через пробел указать задачу. К примеру `npm start less` выполнит только задачу `less` из `gulpfile.js` (полный список задач смотри в `gulpfile.js`).
`port=3004 npm run gulp` — для запуска сервера автообновлений на указанном порту. `port=3004 npm start` — для запуска сервера автообновлений на указанном порту.
\ No newline at end of file
package.json
View file @ 55d549d4
...@@ -4,7 +4,7 @@ ...@@ -4,7 +4,7 @@
"description": "", "description": "",
"scripts": { "scripts": {
"test": "echo \"Error: no test specified\" && exit 1", "test": "echo \"Error: no test specified\" && exit 1",
"gulp": "./node_modules/.bin/gulp" "start": "./node_modules/.bin/gulp"
}, },
"author": "Nikolay Gromov", "author": "Nikolay Gromov",
"license": "MIT", "license": "MIT",
......
src/_blocks_library.html
View file @ 55d549d4
...@@ -143,6 +143,8 @@ ...@@ -143,6 +143,8 @@
</div> </div>
</section> </section>
<section class="blocks-library__item"> <section class="blocks-library__item">
<h2 class="blocks-library__title" id="tables">Таблицы</h2> <h2 class="blocks-library__title" id="tables">Таблицы</h2>
<p>Стилизация: теги (см. глобальные стили)</p> <p>Стилизация: теги (см. глобальные стили)</p>
...@@ -199,7 +201,7 @@ ...@@ -199,7 +201,7 @@
</tr> </tr>
<tr> <tr>
<td data-label="Имя и фамилия">Джакомо Казанова</td> <td data-label="Имя и фамилия">Джакомо Казанова</td>
<td data-label="Тип мироощущения">Небольшая распущенность с лёгкоё примесью леденящих душу извращений, чудовищной лжи и имитатора известного органа, обитого телячьей кожей.</td> <td data-label="Тип мироощущения">Небольшая распущенность с лёгкой примесью леденящих душу извращений, чудовищной лжи и имитатора известного органа, обитого телячьей кожей.</td>
</tr> </tr>
</tbody> </tbody>
</table> </table>
...@@ -209,8 +211,11 @@ ...@@ -209,8 +211,11 @@
<section class="blocks-library__item"> <section class="blocks-library__item">
<h2 id="form">Формы по умолчанию</h2> <h2 id="form">Формы по умолчанию</h2>
<p>Стилизация: теги (см. глобальные стили)</p> <p>Стилизация: теги (см. глобальные стили)</p>
<form action=""> <form action="">
<fieldset> <fieldset>
<legend>Это <code>legend</code> <code>fieldset</code>-а</legend> <legend>Это <code>legend</code> <code>fieldset</code>-а</legend>
...@@ -270,109 +275,92 @@ ...@@ -270,109 +275,92 @@
<h2 id="form-style">Стилизованные формы</h2> <h2 id="form-style">Стилизованные формы</h2>
<p>Стилизация: БЭМ-блоки <code>.field</code>, <code>.form</code> и модификаторы. Опирается на стилизацию форм по умолчанию.</p> <p>Стилизация: БЭМ-блоки <code>.field-text</code>, <code>.field-checkbox</code>, <code>.field-radio</code>, <code>.field-select</code>, <code>.field-file</code>, <code>.field-actions</code>, <code>.form</code> и модификаторы. Опирается на стилизацию форм по умолчанию.</p>
<div class="row"> <div class="row">
<div class="col-md-6"> <div class="col-md-6">
<form action="" class="form"> <form action="" class="form">
<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" 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" 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>
<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">
<textarea class="field__input" rows="3" placeholder="textarea"></textarea> <textarea class="field-text__input" rows="3" placeholder="textarea"></textarea>
<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"> <div class="field-checkbox">
<div class="field__input-wrap"> <div class="field-checkbox__title">Общее название этих двух флажков</div>
<label class="field__name"> <div class="field-checkbox__input-wrap">
<input class="field__input" type="checkbox"> <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">
</div> <input class="field-checkbox__input" type="checkbox">
</div> <span class="field-checkbox__name-text">Флажок</span>
<div class="field field--radio">
<div class="field__input-wrap">
<label class="field__name">
<input class="field__input" type="radio">
Радиобатон
</label>
<label class="field__name">
<input class="field__input" type="radio">
Радиобатон 2
</label> </label>
<div class="field__help-text">Пояснительный тест.</div> <div class="field-checkbox__help-text">Есть общее название.</div>
</div>
</div> </div>
<label class="field">
<div class="field__name">Название поля</div>
<div class="field__input-wrap">
<select class="field__select">
<optgroup label="optgroup">
<option>Значение 1</option>
<option>Значение 2</option>
<option>Значение 3</option>
</optgroup>
<option>Значение 10</option>
</select>
<div class="field__help-text">Обёртка — <code>&lt;label&gt;</code>.</div>
</div> </div>
<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-radio__name-text">Радиокнопка</span>
</label> </label>
<label class="field"> <label class="field-radio__name">
<div class="field__name">Название поля</div> <input class="field-radio__input" type="radio" name="one">
<div class="field__input-wrap"> <span class="field-radio__name-text">Радиокнопка</span>
<input class="field__input" type="file">
<div class="field__help-text">Обёртка — <code>&lt;label&gt;</code>.</div>
</div>
</label> </label>
<label class="field field--error"> <div class="field-radio__help-text">Нет общего названия.</div>
<div class="field__name">Ошибочное поле</div>
<div class="field__input-wrap">
<input class="field__input" type="text" placeholder="input[type=text]">
<div class="field__help-text">Обёртка — <code>&lt;label&gt;</code>.</div>
</div> </div>
</div>
<div class="field-checkbox 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>
<div class="field field--checkbox field--error"> <label class="field-checkbox__name">
<div class="field__input-wrap"> <input class="field-checkbox__input" type="checkbox">
<label class="field__name"> <span class="field-checkbox__name-text">Флажок</span>
<input class="field__input" type="checkbox">
Чекбокс, более известный как флажок
</label> </label>
<div class="field__help-text">Пояснительный тест.</div> <div class="field-checkbox__help-text">Изображения в формате SVG, вписываются в CSS-файл функцией <code>data-uri()</code> компилятора LESS.</div>
</div> </div>
</div> </div>
<div class="field field--radio field--error"> <div class="field-radio field-radio--custom">
<div class="field__input-wrap"> <div class="field-radio__title">Собственные радиокнопки</div>
<label class="field__name"> <div class="field-radio__input-wrap">
<input class="field__input" type="radio"> <label class="field-radio__name">
Радиобатон <input class="field-radio__input" type="radio" name="two" checked>
<span class="field-radio__name-text">Радиокнопка</span>
</label> </label>
<label class="field__name"> <label class="field-radio__name">
<input class="field__input" type="radio"> <input class="field-radio__input" type="radio" name="two">
Радиобатон 2 <span class="field-radio__name-text">Радиокнопка</span>
</label> </label>
<div class="field__help-text">Пояснительный тест.</div> <div class="field-radio__help-text">Изображения в формате SVG, вписываются в CSS-файл функцией <code>data-uri()</code> компилятора LESS.</div>
</div> </div>
</div> </div>
<label class="field field--error"> <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">
<select class="field__select"> <select class="field-select__select">
<optgroup label="optgroup"> <optgroup label="optgroup">
<option>Значение 1</option> <option>Значение 1</option>
<option>Значение 2</option> <option>Значение 2</option>
...@@ -380,10 +368,18 @@ ...@@ -380,10 +368,18 @@
</optgroup> </optgroup>
<option>Значение 10</option> <option>Значение 10</option>
</select> </select>
<div class="field__help-text">Обёртка — <code>&lt;label&gt;</code>.</div> <small class="field-select__help-text">Обёртка — <code>&lt;label&gt;</code>.</small>
</div>
</label>
<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> </div>
</label> </label>
<div class="field field--actions">
<div class="field-actions">
<button class="btn">Отправить</button> <button class="btn">Отправить</button>
</div> </div>
</fieldset> </fieldset>
...@@ -393,59 +389,83 @@ ...@@ -393,59 +389,83 @@
<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> </label>
<div class="field__help-text">Пояснительный тест.</div> <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 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 class="field-radio__input-wrap">
<label class="field-radio__name">
<input class="field-radio__input" type="radio" name="one1">
<span class="field-radio__name-text">Радиокнопка</span>
</label>
<label class="field-radio__name">
<input class="field-radio__input" type="radio" name="one1">
<span class="field-radio__name-text">Радиокнопка</span>
</label>
<div class="field-radio__help-text">Нет общего названия, но оставлен пустой <code>div</code> для него.</div>
</div> </div>
</fieldset> </div>
</form> <div class="field-radio">
<form action="" class="form form--inline"> <div class="field-radio__input-wrap">
<fieldset> <label class="field-radio__name">
<legend>Инлайн форма</legend> <input class="field-radio__input" type="radio" name="two1">
<div class="field"> <span class="field-radio__name-text">Радиокнопка</span>
<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>
</div>
<div class="field field--checkbox">
<div class="field__input-wrap">
<label class="field__name">
<input class="field__input" type="checkbox">
Чекбокс
</label> </label>
<label class="field-radio__name">
<input class="field-radio__input" type="radio" name="two1">
<span class="field-radio__name-text">Радиокнопка</span>
</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"> <div class="field-actions">
<button class="btn">Отправить</button> <button class="btn">Отправить</button>
</div> </div>
</fieldset> </fieldset>
...@@ -454,10 +474,12 @@ ...@@ -454,10 +474,12 @@
</div> </div>
</section> </section>
<section class="blocks-library__item"> <section class="blocks-library__item">
<h2 id="btn">Кнопки</h2> <h2 id="btn">Кнопки</h2>
<p>Стилизация: БЭМ-блок <code>.btn</code> и модификаторы.</p> <p>Стилизация: БЭМ-блок <code>.btn</code> и модификаторы.</p>
<p class="alert alert--success">Приоритетным является подход, в котором используются LESS-примеси <code>.btn()</code> и <code>.btn-color-variant(цвет_текста; цвет_фона; цвет_бордюра)</code>.</p> <p class="alert alert--success">Приоритетным является подход, в котором используются LESS-примеси <code>.btn()</code> и <code>.btn-color-variant(цвет_текста; цвет_фона; цвет_бордюра)</code>. Это не всегда удобно (бывает сложно получить цвета состояний кнопки преобразованием цветов по умолчанию).</p>
<p> <p>
<!-- <input type="text" value="Текстово поле" style="width:80px"> --> <!-- <input type="text" value="Текстово поле" style="width:80px"> -->
<a href="" class="btn">Cсылка</a> <a href="" class="btn">Cсылка</a>
...@@ -475,6 +497,8 @@ ...@@ -475,6 +497,8 @@
</p> </p>
</section> </section>
<section class="blocks-library__item"> <section class="blocks-library__item">
<h2 id="grid">Модульная сетка на flexbox</h2> <h2 id="grid">Модульная сетка на flexbox</h2>
<p>Стилизация: БЭМ-блоки <code>.row</code>, <code>.col-[ID]-[COL]</code>, <code>.col-[ID]-offset-[COL]</code></p> <p>Стилизация: БЭМ-блоки <code>.row</code>, <code>.col-[ID]-[COL]</code>, <code>.col-[ID]-offset-[COL]</code></p>
......
src/img/form_field_bg/checkbox--checked.svg
View file @ 55d549d4
<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.017 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.983V5.014q0-.796.585-1.405T5.015 3h13.97z"/></svg> <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 18 18"><path d="M6.984 14.017l9-9-1.406-1.454-7.594 7.595L3.42 7.594 2.018 9zm9-14.017q.844 0 1.43.61T18 2.014v13.97q0 .797-.586 1.406-.586.61-1.43.61H2.014q-.843 0-1.43-.61T0 15.984V2.014Q0 1.218.585.61 1.17 0 2.015 0h13.97z" fill="#2d2d2d"/></svg>
\ No newline at end of file \ No newline at end of file
src/img/form_field_bg/checkbox.svg
View file @ 55d549d4
<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.983V5.014q0-.796.61-1.405T5.014 3h13.97zm0 2.016H5.014v13.97h13.97V5.016z"/></svg> <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 18 18"><path d="M15.984 0q.797 0 1.406.61.61.61.61 1.404v13.97q0 .797-.61 1.406-.61.61-1.406.61H2.014q-.796 0-1.405-.61Q0 16.78 0 15.984V2.014Q0 1.218.61.61 1.22 0 2.014 0h13.97zm0 2.016H2.014v13.97h13.97V2.017z" fill="#2d2d2d"/></svg>
\ No newline at end of file \ No newline at end of file
src/img/form_field_bg/chevron-down--error.svg deleted 100644 → 0
View file @ aff64001
<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 deleted 100644 → 0
View file @ aff64001
<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 deleted 100644 → 0
View file @ aff64001
<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>
\ No newline at end of file
src/less/blocks/field-actions.less 0 → 100644
View file @ 55d549d4
.field-actions {
display: block;
margin-top: @line-height;
margin-bottom: (@line-height / 2);
}
src/less/blocks/field-checkbox--custom.less 0 → 100644
View file @ 55d549d4
.field-checkbox {
&--custom {
.field-checkbox__name {
padding-left: 1.6em;
}
.field-checkbox__help-text {
padding-left: 1.9em; // 1.6 + 0.3
}
.field-checkbox__input {
position: absolute;
opacity: 0;
& + .field-checkbox__name-text:before {
width: 1.13em;
height: 1.13em;
position: absolute;
top: .1em;
left: 0;
content: '';
background-size: 100%;
background-repeat: no-repeat;
background-image: data-uri('image/svg+xml;charset=UTF-8', '../img/form_field_bg/checkbox.svg');
}
&:checked + .field-checkbox__name-text:before {
background-image: data-uri('image/svg+xml;charset=UTF-8', '../img/form_field_bg/checkbox--checked.svg');
}
&:focus + .field-checkbox__name-text:before {
.focus();
}
}
}
}
src/less/blocks/field-checkbox.less 0 → 100644
View file @ 55d549d4
.field-checkbox {
display: block;
margin-bottom: (@line-height / 2);
&__title {
font-weight: 700;
line-height: 1.2em;
display: block;
margin-bottom: round(@line-height / 4, 2);
min-height: 1px;
}
&__input-wrap {}
&__name {
position: relative;
padding-left: 1.3em;
font-weight: 400;
display: inline-block;
margin-right: .6em;
line-height: @line-height;
}
&__input {
position: absolute;
top: 50%;
left: 0;
transform: translate(0, -50%);
}
&__help-text {
display: block;
font-size: @font-size--small;
line-height: 1.2em;
color: @text-color--muted;
padding-left: 1.6em; // 1.3 + 0.3
}
}
src/less/blocks/field-file.less 0 → 100644
View file @ 55d549d4
.field-file {
display: block;
margin-bottom: (@line-height / 2);
&__name {
font-weight: 700;
display: block;
margin-bottom: round(@line-height / 4, 2);
}
&__input-wrap {}
&__input {
margin-bottom: round(@line-height / 3, 2);
}
&__help-text {
display: block;
font-size: @font-size--small;
line-height: 1.2em;
color: @text-color--muted;
}
}
src/less/blocks/field-radio--custom.less 0 → 100644
View file @ 55d549d4
.field-radio {
&--custom {
.field-radio__name {
padding-left: 1.6em;
}
.field-radio__help-text {
padding-left: 1.9em; // 1.6 + 0.3
}
.field-radio__input {
position: absolute;
opacity: 0;
& + .field-radio__name-text:before {
width: 1.125em;
height: 1.125em;
position: absolute;
top: .1em;
left: 0;
content: '';
background-size: 100%;
background-repeat: no-repeat;
background-image: data-uri('image/svg+xml;charset=UTF-8', '../img/form_field_bg/radiobutton.svg');
}
&:checked + .field-radio__name-text:before {
background-image: data-uri('image/svg+xml;charset=UTF-8', '../img/form_field_bg/radiobutton--checked.svg');
}
&:focus + .field-radio__name-text:before {
.focus();
}
}
}
}
src/less/blocks/field-radio.less 0 → 100644
View file @ 55d549d4
.field-radio {
display: block;
margin-bottom: (@line-height / 2);
&__title {
font-weight: 700;
line-height: 1.2em;
display: block;
margin-bottom: round(@line-height / 4, 2);
min-height: 1px;
}
&__input-wrap {}
&__name {
position: relative;
padding-left: 1.3em;
font-weight: 400;
display: inline-block;
margin-right: .6em;
}
&__input {
position: absolute;
top: 50%;
left: 0;
transform: translate(0, -50%);
}
&__help-text {
display: block;
font-size: @font-size--small;
line-height: 1.2em;
color: @text-color--muted;
padding-left: 1.6em; // 1.3 + 0.3
}
}
src/less/blocks/field-select.less 0 → 100644
View file @ 55d549d4
.field-select {
display: block;
margin-bottom: (@line-height / 2);
&__name {
font-weight: 700;
display: block;
margin-bottom: round(@line-height / 4, 2);
}
&__input-wrap {}
&__select {
margin-bottom: round(@line-height / 3, 2);
}
&__help-text {
display: block;
font-size: @font-size--small;
line-height: 1.2em;
color: @text-color--muted;
}
}
src/less/blocks/field-text.less 0 → 100644
View file @ 55d549d4
.field-text {
display: block;
margin-bottom: (@line-height / 2);
&__name {
font-weight: 700;
display: block;
margin-bottom: round(@line-height / 4, 2);
}
&__input-wrap {}
&__input {
margin-bottom: round(@line-height / 3, 2);
}
&__help-text {
display: block;
font-size: @font-size--small;
line-height: 1.2em;
color: @text-color--muted;
}
}
src/less/blocks/field.less deleted 100644 → 0
View file @ aff64001
.field {
display: block;
margin-bottom: (@line-height / 2);
&--error {
color: @color-danger;
.field__help-text {
color: @color-danger;
}
.field__input {
color: @color-danger;
border-color: @color-danger;
background-image: data-uri('image/svg+xml;charset=UTF-8', '../img/form_field_bg/close.svg');
background-repeat: no-repeat;
background-position: right .3em center;
&::placeholder {
color: @color-danger;
}
&:focus {
outline-color: @color-danger;
}
}
.field__select {
color: @color-danger;
border-color: @color-danger;
&:focus {
outline-color: @color-danger;
}
}
}
// Закомментировал, в связи с редкой надобностью
// &--success {
// color: @color-success;
// .field__help-text {
// color: @color-success;
// }
// .field__input {
// color: @color-success;
// border-color: @color-success;
// background-image: data-uri('image/svg+xml;charset=UTF-8', '../img/form_field_bg/check.svg');
// background-repeat: no-repeat;
// background-position: right .3em center;
// &::placeholder {
// color: @color-success;
// }
// &:focus {
// outline-color: @color-success;
// }
// }
// .field__select {
// color: @color-success;
// border-color: @color-success;
// &:focus {
// outline-color: @color-success;
// }
// }
// }
&--checkbox,
&--radio {
.field__name {
display: inline-block;
vertical-align: top;
font-weight: inherit;
font-family: inherit;
margin-bottom: 0;
margin-right: .6em;
}
.field__input {
margin-top: .25em;
margin-bottom: 0;
display: inline-block;
vertical-align: top;
}
}
&__name {
font-weight: 700;
display: block;
margin-bottom: round(@line-height / 4, 2);
}
&__input-wrap {}
&__input,
&__select {
margin-bottom: round(@line-height / 4, 2);
}
&__select {
// appearance: none;
}
&__help-text {
font-size: @font-size--small;
color: @text-color--muted;
}
}
src/less/blocks/form.less
View file @ 55d549d4
...@@ -4,50 +4,52 @@ ...@@ -4,50 +4,52 @@
} }
&--horizontal { &--horizontal {
.field {
@media (min-width: @screen-sm) {
.field-text,
.field-checkbox,
.field-radio,
.field-select,
.field-file {
display: flex; display: flex;
} }
.field__name { .field-text__name,
.field-select__name {
width: 15rem; width: 15rem;
min-width: 15rem;
padding-top: .42em; padding-top: .42em;
padding-right: .3em; padding-right: .6em;
margin-bottom: 0;
} }
.field__input-wrap { .field-checkbox__title,
flex-grow: 10; .field-radio__title,
.field-file__name {
width: 15rem;
min-width: 15rem;
padding-right: .6em;
margin-bottom: 0;
} }
.field--actions { .field-text__input-wrap,
padding-left: 15rem; .field-select__select-wrap,
.field-file__input-wrap {
flex-grow: 1;
} }
.field--checkbox { .field-actions {
& > .field__name { padding-left: 15rem;
margin-right: 0;
}
.field__input-wrap .field__name {
width: auto;
padding-top: 0;
}
}
} }
&--inline {
.field {
display: inline-block;
vertical-align: top;
} }
.field__name { .field-checkbox__title,
display: inline-block; .field-radio__title {
vertical-align: top; &:empty {
padding-top: .42em; margin-bottom: 0;
} }
.field__input-wrap {
display: inline-block;
vertical-align: top;
} }
} }
} }
src/less/global_scaffolding.less
View file @ 55d549d4
...@@ -427,3 +427,11 @@ input[disabled], ...@@ -427,3 +427,11 @@ input[disabled],
input[readonly] { input[readonly] {
background-color: @gray-lighter; background-color: @gray-lighter;
} }
select,
textarea,
input {
&:focus {
.focus();
}
}
src/less/mixins/btn-mixins.less
View file @ 55d549d4
...@@ -38,6 +38,8 @@ ...@@ -38,6 +38,8 @@
&:active, &:active,
&:focus { &:focus {
text-decoration: none; text-decoration: none;
outline: 0;
box-shadow: none;
} }
// &--disabled, // &--disabled,
......
src/less/mixins/focus-mixin.less 0 → 100644
View file @ 55d549d4
.focus() {
outline: 0;
box-shadow: 0 0 0 2px fade(@color-main, 30%);
}
src/less/mixins/mixins.less
View file @ 55d549d4
...@@ -2,3 +2,4 @@ ...@@ -2,3 +2,4 @@
@import 'btn-mixins.less'; @import 'btn-mixins.less';
@import 'table-responsive-mixins.less'; @import 'table-responsive-mixins.less';
@import 'responsive-mixins.less'; @import 'responsive-mixins.less';
@import 'focus-mixin.less';
src/less/style.less
View file @ 55d549d4
...@@ -7,4 +7,11 @@ ...@@ -7,4 +7,11 @@
@import "blocks/table-responsive.less"; @import "blocks/table-responsive.less";
@import "blocks/btn.less"; @import "blocks/btn.less";
@import "blocks/form.less"; @import "blocks/form.less";
@import "blocks/field.less"; @import "blocks/field-text.less";
@import "blocks/field-checkbox.less";
@import "blocks/field-checkbox--custom.less";
@import "blocks/field-radio.less";
@import "blocks/field-radio--custom.less";
@import "blocks/field-select.less";
@import "blocks/field-file.less";
@import "blocks/field-actions.less";
src/less/variables.less
View file @ 55d549d4
...@@ -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