Skip to content

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

form

parent a123b0ae
Hide 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 () { ...@@ -84,6 +84,17 @@ gulp.task('img', function () {
.pipe(gulp.dest('build/img')); .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-спрайта // Сборка SVG-спрайта
gulp.task('svgstore', function () { gulp.task('svgstore', function () {
console.log('---------- сборка SVG спрайта'); console.log('---------- сборка SVG спрайта');
......
src/_blocks_library.html
View file @ 270ee203
...@@ -277,28 +277,42 @@ ...@@ -277,28 +277,42 @@
<div class="field"> <div class="field">
<label class="field__name" for="field_id_001">Название поля</label> <label class="field__name" for="field_id_001">Название поля</label>
<div class="field__input-wrap"> <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 class="field__help-text">Лейбл отдельно, обёртка — <code>&lt;div&gt;</code>, связь с лейблом по <code>id</code>.</div>
</div> </div>
</div> </div>
<label class="field"> <label class="field">
<div class="field__name">Название поля</div> <div class="field__name">Название поля</div>
<div class="field__input-wrap"> <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 class="field__help-text">Обёртка — <code>&lt;label&gt;</code>.</div>
</div> </div>
</label> </label>
<label class="field field--error"> <label class="field field--error">
<div class="field__name">Ошибочное поле</div> <div class="field__name">Ошибочное поле</div>
<div class="field__input-wrap"> <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 class="field__help-text">Обёртка — <code>&lt;label&gt;</code>.</div>
</div> </div>
</label> </label>
<label class="field field--success"> <label class="field field--success">
<div class="field__name">Корректно заполненное поле</div> <div class="field__name">Корректно заполненное поле</div>
<div class="field__input-wrap"> <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 class="field__help-text">Обёртка — <code>&lt;label&gt;</code>.</div>
</div> </div>
</label> </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/chevron-down.svg
View file @ 270ee203
<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> <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/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/img/form_field_bg/radiobutton--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="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> <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>
\ No newline at end of file
src/img/form_field_bg/radiobutton.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="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> <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>
\ No newline at end of file
src/less/blocks/field.less
View file @ 270ee203
...@@ -2,6 +2,30 @@ ...@@ -2,6 +2,30 @@
display: block; display: block;
margin-bottom: (@line-height / 2); 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 { &__name {
font-weight: 700; font-weight: 700;
display: block; display: block;
...@@ -10,10 +34,15 @@ ...@@ -10,10 +34,15 @@
&__input-wrap {} &__input-wrap {}
&__input-text { &__input,
&__select {
margin-bottom: round(@line-height / 4, 2); margin-bottom: round(@line-height / 4, 2);
} }
&__select {
// appearance: none;
}
&__help-text { &__help-text {
font-size: @font-size--small; font-size: @font-size--small;
color: @text-color--muted; 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