Skip to content

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

Добавил field-text (TODO: textarea)

parent cc290ed6
Hide whitespace changes
Inline Side-by-side
Showing with 166 additions and 2 deletions
package.json
View file @ 8c3981b4
...@@ -25,7 +25,8 @@ ...@@ -25,7 +25,8 @@
"thumb": [], "thumb": [],
"alert": [], "alert": [],
"btn": [], "btn": [],
"to-top": [] "to-top": [],
"field-text": []
}, },
"addCssBefore": [ "addCssBefore": [
"./src/scss/variables.scss", "./src/scss/variables.scss",
......
src/blocks-demo.html
View file @ 8c3981b4
...@@ -558,6 +558,95 @@ ...@@ -558,6 +558,95 @@
</section> </section>
<section class="blocks-library__item" id="field-text" data-name=".field-text">
<h2 class="blocks-library__item-title">Текстовое поле формы</h2>
<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-text">
<label class="field-text__name" for="demo-field">Текстовое поле</label>
<span class="field-text__input-wrap">
<input class="field-text__input" type="text" id="demo-field" placeholder="input[type=text]">
<span class="field-text__help-text">Обёртка — <code>div</code>. Внутри <code>label</code></span>
</span>
</div>
<label class="field-text">
<span class="field-text__name">Многострочное текстовое поле</span>
<span class="field-text__input-wrap">
<textarea class="field-text__input" placeholder="textarea"></textarea>
<span class="field-text__help-text">Обёртка — <code>label</code>.</span>
</span>
</label>
<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">
<label class="field-text">
<span class="field-text__name">Число</span>
<span class="field-text__input-wrap">
<input class="field-text__input" type="number" placeholder="input[type=number]">
<span class="field-text__help-text"></span>
</span>
</label>
<label class="field-text">
<span class="field-text__name">Дата</span>
<span class="field-text__input-wrap">
<input class="field-text__input" type="date">
<span class="field-text__help-text"></span>
</span>
</label>
<label class="field-text">
<span class="field-text__name">Время</span>
<span class="field-text__input-wrap">
<input class="field-text__input" type="time">
<span class="field-text__help-text"></span>
</span>
</label>
<label class="field-text">
<span class="field-text__name">Поиск</span>
<span class="field-text__input-wrap">
<input class="field-text__input" type="search" placeholder="input[type=search]">
<span class="field-text__help-text"></span>
</span>
</label>
<pre class="code">
<code>&lt;label class="field-text"></code>
<code> &lt;span class="field-text__name">...&lt;/span></code>
<code> &lt;span class="field-text__input-wrap"></code>
<code> &lt;input class="field-text__input" type="text" placeholder=""></code>
<code> &lt;span class="field-text__help-text">...&lt;/span></code>
<code> &lt;/span></code>
<code>&lt;/label></code>
<code> </code>
<code>&lt;div class="field-text"></code>
<code> &lt;label class="field-text__name" for="demo-field">...&lt;/label></code>
<code> &lt;span class="field-text__input-wrap"></code>
<code> &lt;input class="field-text__input" type="text" id="demo-field" placeholder=""></code>
<code> &lt;span class="field-text__help-text">...&lt;/span></code>
<code> &lt;/span></code>
<code>&lt;/div></code>
<code> </code>
<code>&lt;label class="field-text"></code>
<code> &lt;span class="field-text__name">...&lt;/span></code>
<code> &lt;span class="field-text__input-wrap"></code>
<code> &lt;textarea class="field-text__input" placeholder="">&lt;/textarea></code>
<code> &lt;span class="field-text__help-text">...&lt;/span></code>
<code> &lt;/span></code>
<code>&lt;/label></code>
</pre>
</div>
</div>
</section>
</div> </div>
<style> <style>
......
src/blocks/field-text/field-text.less → src/blocks/field-text/field-text.scss
View file @ 8c3981b4
// Для импорта в диспетчер подключений: @import './src/blocks/field-text/field-text.less'; // В этом файле должны быть стили только для БЭМ-блока alert, его элементов,
// модификаторов, псевдоселекторов, псевдоэлементов, $media-условий...
@import '../../less/variables.less'; // только для удобства обращения к переменным // Не пишите здесь другие селекторы.
.field-text { .field-text {
display: block; display: block;
margin-bottom: (@line-height / 2); margin-bottom: ($line-height / 2);
&__name { &__name {
display: block; display: block;
margin-bottom: round(@line-height / 4, 2); margin-bottom: 0.4em;
line-height: @line-height; line-height: $line-height;
font-weight: 700; font-weight: 700;
} }
&__input-wrap {} &__input-wrap {
display: block;
}
&__input { &__input {
display: inline-block; display: inline-block;
vertical-align: middle; vertical-align: middle;
width: 100%; width: 100%;
height: 2.125em; // height: 2.125em;
padding: @field-padding-top @field-padding-horizontal @field-padding-bottom; padding: $field-padding-vertical $field-padding-horizontal;
line-height: @line-height; line-height: $line-height;
font-size: inherit; font-size: 1em;
font-family: inherit; font-family: inherit;
background-color: #fff; background-color: #fff;
border: 1px solid @border-color; border: 1px solid $border-color;
border-radius: @border-radius; border-radius: $border-radius;
appearance: textfield; appearance: textfield;
&:focus { &:focus {
.focus(); @include field-focus;
} }
&[disabled], &[disabled],
&[readonly] { &[readonly] {
cursor: default; cursor: default;
background-color: @gray-lighter; background-color: $gray-lighter;
} }
&[type='search']::-webkit-search-cancel-button, &[type='search']::-webkit-search-cancel-button,
...@@ -47,27 +48,27 @@ ...@@ -47,27 +48,27 @@
&[type='number']::-webkit-inner-spin-button, &[type='number']::-webkit-inner-spin-button,
&[type='number']::-webkit-outer-spin-button { &[type='number']::-webkit-outer-spin-button {
height: auto; // height: auto;
} }
&[type='color'] { &[type='color'] {
max-width: 100px; // max-width: 100px;
padding: 0; padding: 0;
} }
&::placeholder { &::placeholder {
color: @text-color--muted; color: $text-color--muted;
opacity: 1; opacity: 1;
} }
textarea& { // textarea.& {
height: auto; // height: auto;
min-height: (@line-height * 2) + @field-padding-top + @field-padding-bottom + 0.2; // 0.2 — поправка на бордюр // min-height: ($line-height * 2) + ($field-padding-vertical * 2);
resize: vertical; // resize: vertical;
} // }
} }
&__help-text { &__help-text {
.help-text(); @include field-help-text;
} }
} }
src/scss/blocks-library.scss
View file @ 8c3981b4
...@@ -106,7 +106,7 @@ ...@@ -106,7 +106,7 @@
} }
pre { pre {
margin: 0; // margin: 0;
max-height: 500px; max-height: 500px;
} }
} }
......
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