Skip to content

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

Добавил form

parent 19fc7db0
Show whitespace changes
Inline Side-by-side
Showing with 91 additions and 352 deletions
package.json
View file @ 004f3e6d
......@@ -34,6 +34,7 @@
"field-range": [],
"field-select": [],
"field-actions": [],
"form": [],
"dropdown": [],
"menu": []
},
......
src/blocks-demo.html
View file @ 004f3e6d
......@@ -1120,6 +1120,57 @@
</section>
<section class="blocks-library__item" id="form" data-name=".form">
<h2 class="blocks-library__item-title">Форма</h2>
<form action="https://httpbin.org/post" class="form" method="post">
<fieldset>
<legend>Название формы</legend>
<label class="field-text">
<span class="field-text__name">Текстовое поле</span>
<span class="field-text__input-wrap">
<input class="field-text__input" type="text" placeholder="input[type=text]">
<span class="field-text__help-text">Обёртка — <code>label</code>. Можно сделать обёртку <code>div</code>, но тогда, возможно, захочется элемент <code>.field-text__name</code> делать <code>label</code> и связывать его с полем по <code>id</code> поля.</span>
</span>
</label>
<div class="field-checkbox">
<label class="field-checkbox__name">
<input class="field-checkbox__input" type="checkbox" checked>
<span class="field-checkbox__name-text">Одинокий чекбокс</span>
</label>
</div>
<label class="field-text">
<span class="field-text__name">Текстовое поле</span>
<span class="field-text__input-wrap">
<input class="field-text__input" type="text" placeholder="input[type=text]">
<span class="field-text__help-text">Обёртка — <code>label</code>. Можно сделать обёртку <code>div</code>, но тогда, возможно, захочется элемент <code>.field-text__name</code> делать <code>label</code> и связывать его с полем по <code>id</code> поля.</span>
</span>
</label>
<div class="field-actions">
<div class="field-actions__text">* — обязательные поля</div>
<button class="btn">Отправить</button>
</div>
</fieldset>
</form>
<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 class="code">
<code>&lt;form action="https://httpbin.org/post" class="form" method="post"></code>
<code> &lt;fieldset></code>
<code> &lt;legend>Название формы&lt;/legend></code>
<code> &lt;label class="field-text">...&lt;/label></code>
<code> &lt;div class="field-actions">...&lt;/div></code>
<code> &lt;/fieldset></code>
<code>&lt;/form></code>
</pre>
</div>
</div>
</section>
</div>
<style>
......
src/blocks/fields-group/fields-group.html deleted 100644 → 0
View file @ 19fc7db0
<!--DEV
<div class="fields-group">
<label class="field-text fields-group__item">
<input class="field-text__input" type="text" placeholder="input[type=text]">
</label>
<label class="field-text fields-group__item">
<input class="field-text__input" type="text" placeholder="input[type=text]">
</label>
<label class="field-text fields-group__item">
<input class="field-text__input" type="text" placeholder="input[type=text]">
</label>
</div>
<div class="fields-group">
<label class="field-text fields-group__item">
<input class="field-text__input" type="text" placeholder="input[type=text]">
<small class="field-select__help-text">Пояснение отдельного поля, если длинное, распирает блок? Нет.</small>
</label>
<label class="field-text fields-group__item">
<input class="field-text__input" type="text" placeholder="input[type=text]">
<small class="field-select__help-text">Пояснение.</small>
</label>
<label class="field-text fields-group__item">
<input class="field-text__input" type="text" placeholder="input[type=text]">
<small class="field-select__help-text">Пояснение еще.</small>
</label>
</div>
<div class="fields-group">
<span class="fields-group__item fields-group__item--addon fields-group__item--text">
$
</span>
<label class="field-text fields-group__item">
<input class="field-text__input" type="text" placeholder="input[type=text]">
</label>
<span class="fields-group__item fields-group__item--addon fields-group__item--text">
какой-то текст
</span>
</div>
<div class="fields-group">
<span class="fields-group__item fields-group__item--addon fields-group__item--text">
$
</span>
<label class="field-text fields-group__item">
<input class="field-text__input" type="text" placeholder="input[type=text]">
</label>
<button class="btn fields-group__item fields-group__item--addon">Отправить</button>
<button class="btn fields-group__item fields-group__item--addon">Отменить</button>
</div>
-->
src/blocks/fields-group/fields-group.less deleted 100644 → 0
View file @ 19fc7db0
// Для импорта в диспетчер подключений: @import './src/blocks/field-group/field-group.less';
@import '../../less/variables.less'; // только для удобства обращения к переменным
.fields-group {
display: flex;
margin-bottom: (@line-height / 2);
&--inline {
display: inline-flex;
}
&__item {
margin-bottom: 0;
flex-basis: 100%;
&--text {
white-space: nowrap;
background-color: @gray-lighter;
color: @gray;
border: 1px solid @border-color;
border-radius: @border-radius;
display: inline-block;
vertical-align: middle;
line-height: @line-height;
min-height: 2.125em;
padding: @field-padding-top @field-padding-horizontal @field-padding-bottom;
}
&--addon {
flex-basis: 1%;
&:not(:last-child) {
border-top-right-radius: 0;
border-bottom-right-radius: 0;
}
&:not(:first-child) {
border-top-left-radius: 0;
border-bottom-left-radius: 0;
}
}
// &--dropdown {} // Вынесено в отдельный файл, т.к. ситуация специфическая, редкая
&:not(:last-child) {
.field-text__input,
.field-select__select {
border-top-right-radius: 0;
border-bottom-right-radius: 0;
}
}
&:not(:first-child) {
margin-left: -1px;
.field-text__input,
.field-select__select {
border-top-left-radius: 0;
border-bottom-left-radius: 0;
}
}
}
.field-text__input,
.field-select__select,
.btn {
position: relative;
z-index: 0;
&:hover,
&:focus {
z-index: 1;
}
}
}
src/blocks/fields-group/fields-group__item--dropdown.less deleted 100644 → 0
View file @ 19fc7db0
// Для импорта в диспетчер подключений: @import './src/blocks/field-group/field-group__item--dropdown.less';
@import '../../less/variables.less'; // только для удобства обращения к переменным
.fields-group {
&__item {
&--dropdown {
&:not(:last-child) {
.btn {
border-top-right-radius: 0;
border-bottom-right-radius: 0;
}
}
&:not(:first-child) {
margin-left: -1px;
.btn {
border-top-left-radius: 0;
border-bottom-left-radius: 0;
}
}
}
}
}
src/blocks/form/form--horizontal.html deleted 100644 → 0
View file @ 19fc7db0
<!--DEV
<form action="" class="form form--horizontal">
<fieldset>
<legend>Название формы</legend>
<label class="field-text">...</label>
<div class="field-actions">...</div>
</fieldset>
</form>
-->
src/blocks/form/form--horizontal.less deleted 100644 → 0
View file @ 19fc7db0
// Для импорта в диспетчер подключений: @import './src/blocks/form/form--horizontal.less';
@import '../../less/variables.less'; // только для удобства обращения к переменным
.form {
&--horizontal {
@media (min-width: @screen-sm) {
.field-text,
.field-checkbox,
.field-radio,
.field-select,
.field-file,
.field-range,
.field-toggler {
display: flex;
}
.field-text__name,
.field-select__name,
.field-file__name,
.field-range__name {
width: 9.375em;
min-width: 9.375em;
padding-top: 0.4em;
padding-right: 0.6em;
margin-bottom: 0;
}
.field-checkbox__title,
.field-toggler__title,
.field-radio__title {
width: 9.375em;
min-width: 9.375em;
padding-right: 0.6em;
margin-bottom: 0;
}
.field-text__input-wrap,
.field-select__select-wrap,
.field-range__input-wrap,
.field-file__input-wrap,
.field-toggler__input-wrap {
flex-grow: 1;
}
.field-actions {
padding-left: 9.375em;
}
.field-select__select[multiple] {
padding-top: 0.45em;
padding-bottom: 0.45em;
min-height: 7.1em;
}
}
.field-checkbox__title,
.field-radio__title {
&:empty {
margin-bottom: 0;
}
}
}
}
src/blocks/form/form--line.less deleted 100644 → 0
View file @ 19fc7db0
// Для импорта в диспетчер подключений: @import './src/blocks/form/form--line.less';
@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 deleted 100644 → 0
View file @ 19fc7db0
// Для импорта в диспетчер подключений: @import './src/blocks/form/form.less';
@import '../../less/variables.less'; // только для удобства обращения к переменным
.form {
&:not(:last-child) {
margin-bottom: @line-height;
}
fieldset {
min-width: 0;
padding: 0;
margin: 0;
border: 0;
&:not(:last-child) {
margin-bottom: @line-height;
}
}
legend {
display: block;
width: 100%;
font-size: @font-size--h3;
font-family: @font-family--headings;
font-weight: 700;
line-height: 1.4;
color: currentColor;
margin-top: @line-height;
margin-bottom: (@line-height / 2);
}
}
src/blocks/form/form.scss 0 → 100644
View file @ 004f3e6d
// В этом файле должны быть стили только для БЭМ-блока form, его элементов,
// модификаторов, псевдоселекторов, псевдоэлементов, $media-условий...
// Не пишите здесь другие селекторы.
$font-family--headings: -apple-system, BlinkMacSystemFont, 'Roboto', 'Ubuntu', 'Droid Sans', 'Helvetica Neue', 'Arial', sans-serif !default;
$font-size--h3: 1.5em !default;
$line-height: 1.375em !default;
.form {
&:not(:last-child) {
margin-bottom: $line-height;
}
fieldset {
min-width: 0;
padding: 0;
margin: 0;
border: 0;
&:not(:last-child) {
margin-bottom: $line-height;
}
}
legend {
display: block;
width: 100%;
font-size: $font-size--h3;
font-family: $font-family--headings;
font-weight: 700;
line-height: $line-height;
color: currentColor;
margin-top: $line-height;
margin-bottom: ($line-height / 2);
}
}
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