Skip to content

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

form

parent a123b0ae
Show whitespace changes
Inline Side-by-side
Showing with 66 additions and 12 deletions
gulpfile.js
View file @ 270ee203
......@@ -84,6 +84,17 @@ gulp.task('img', function () {
.pipe(gulp.dest('build/img'));
});
// Оптимизация изображений для форм
gulp.task('img:form', function () {
console.log('---------- Оптимизация картинок для компонента форм');
return gulp.src('src/img/form_field_bg/*.svg')
.pipe(imagemin({
progressive: true,
svgoPlugins: [{removeViewBox: false}],
}))
.pipe(gulp.dest('src/img/form_field_bg'));
});
// Сборка SVG-спрайта
gulp.task('svgstore', function () {
console.log('---------- сборка SVG спрайта');
......
src/_blocks_library.html
View file @ 270ee203
......@@ -277,28 +277,42 @@
<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]">
<input class="field__input" 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]">
<input class="field__input" type="text" placeholder="input[type=text]">
<div class="field__help-text">Обёртка — <code>&lt;label&gt;</code>.</div>
</div>
</label>
<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>
</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]">
<input class="field__input" 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]">
<input class="field__input" type="text" placeholder="input[type=text]">
<div class="field__help-text">Обёртка — <code>&lt;label&gt;</code>.</div>
</div>
</label>
......
src/img/form_field_bg/check.svg
View file @ 270ee203
<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>
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="18" viewBox="0 0 24 18"><path d="M24 3.516q0 .606-.436 1.03L10.25 17.576Q9.814 18 9.195 18q-.618 0-1.05-.425L.434 10.032Q0 9.605 0 9.002q0-.605.434-1.03l2.106-2.06q.434-.424 1.052-.424.62 0 1.053.425l4.55 4.47L19.353.423Q19.788 0 20.406 0q.617 0 1.052.424l2.106 2.06q.434.424.434 1.03z" fill="#5cb85c"/></svg>
\ No newline at end of file
src/img/form_field_bg/checkbox--checked.svg
View file @ 270ee203
<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>
<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>
\ No newline at end of file
src/img/form_field_bg/checkbox.svg
View file @ 270ee203
<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>
<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>
\ No newline at end of file
src/img/form_field_bg/close.svg
View file @ 270ee203
<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>
<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 18 18"><path d="M18 14.485q0 .606-.425 1.03l-2.06 2.06q-.425.425-1.03.425t-1.03-.423L9 13.12l-4.455 4.455Q4.12 18 3.515 18t-1.03-.423l-2.06-2.06Q0 15.09 0 14.487q0-.605.423-1.03L4.88 9 .424 4.545Q0 4.12 0 3.515t.423-1.03l2.06-2.06Q2.91 0 3.513 0q.605 0 1.03.423L9 4.88 13.455.424Q13.88 0 14.485 0t1.03.423l2.06 2.06Q18 2.91 18 3.513q0 .605-.423 1.03L13.12 9l4.455 4.455q.425.425.425 1.03z" fill="#d9534f"/></svg>
\ No newline at end of file
src/less/blocks/field.less
View file @ 270ee203
......@@ -2,6 +2,30 @@
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;
}
}
}
&__name {
font-weight: 700;
display: block;
......@@ -10,10 +34,15 @@
&__input-wrap {}
&__input-text {
&__input,
&__select {
margin-bottom: round(@line-height / 4, 2);
}
&__select {
// appearance: none;
}
&__help-text {
font-size: @font-size--small;
color: @text-color--muted;
......
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