Skip to content

K
kpp
Commit 77e3bf4c authored by Nikolay Gromov's avatar Nikolay Gromov
Browse files
Options

forms

parent db708fd0
Show whitespace changes
Inline Side-by-side
Showing with 134 additions and 115 deletions
src/_blocks_library.html
View file @ 77e3bf4c
......@@ -333,7 +333,7 @@
<div class="field-checkbox__title">Собственные флажки</div>
<div class="field-checkbox__input-wrap">
<label class="field-checkbox__name">
<input class="field-checkbox__input" type="checkbox">
<input class="field-checkbox__input" type="checkbox" checked>
<span class="field-checkbox__name-text">Флажок</span>
</label>
<label class="field-checkbox__name">
......@@ -347,11 +347,11 @@
<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="one">
<input class="field-radio__input" type="radio" name="two" checked>
<span class="field-radio__name-text">Радиокнопка</span>
</label>
<label class="field-radio__name">
<input class="field-radio__input" type="radio" name="one">
<input class="field-radio__input" type="radio" name="two">
<span class="field-radio__name-text">Радиокнопка</span>
</label>
<div class="field-radio__help-text">Изображения в формате SVG, вписываются в CSS-файл функцией <code>data-uri()</code> компилятора LESS.</div>
......@@ -428,11 +428,11 @@
<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="one">
<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="one">
<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>
......@@ -441,11 +441,11 @@
<div class="field-radio">
<div class="field-radio__input-wrap">
<label class="field-radio__name">
<input class="field-radio__input" type="radio" name="one">
<input class="field-radio__input" type="radio" name="two1">
<span class="field-radio__name-text">Радиокнопка</span>
</label>
<label class="field-radio__name">
<input class="field-radio__input" type="radio" name="one">
<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>
......@@ -465,13 +465,6 @@
<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>
</label>
<div class="field-actions">
<button class="btn">Отправить</button>
</div>
......
src/img/form_field_bg/chevron-down--error.svg deleted 100644 → 0
View file @ db708fd0
<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 @ db708fd0
<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 @ db708fd0
<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-checkbox--custom.less 0 → 100644
View file @ 77e3bf4c
.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
View file @ 77e3bf4c
......@@ -2,40 +2,6 @@
display: block;
margin-bottom: (@line-height / 2);
&--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.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/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');
}
}
}
&__title {
font-weight: 700;
line-height: 1.2em;
......
src/less/blocks/field-radio--custom.less 0 → 100644
View file @ 77e3bf4c
.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
View file @ 77e3bf4c
......@@ -2,38 +2,6 @@
display: block;
margin-bottom: (@line-height / 2);
&--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');
}
}
}
&__title {
font-weight: 700;
line-height: 1.2em;
......
src/less/blocks/form.less
View file @ 77e3bf4c
......@@ -5,6 +5,8 @@
&--horizontal {
@media (min-width: @screen-sm) {
.field-text,
.field-checkbox,
.field-radio,
......@@ -16,6 +18,7 @@
.field-text__name,
.field-select__name {
width: 15rem;
min-width: 15rem;
padding-top: .42em;
padding-right: .6em;
margin-bottom: 0;
......@@ -25,6 +28,7 @@
.field-radio__title,
.field-file__name {
width: 15rem;
min-width: 15rem;
padding-right: .6em;
margin-bottom: 0;
}
......@@ -38,5 +42,14 @@
.field-actions {
padding-left: 15rem;
}
}
.field-checkbox__title,
.field-radio__title {
&:empty {
margin-bottom: 0;
}
}
}
}
src/less/global_scaffolding.less
View file @ 77e3bf4c
......@@ -430,11 +430,8 @@ input[readonly] {
select,
textarea,
input:not([type="submit"]),
input:not([type="button"]),
input:not([type="reset"]) {
input {
&:focus {
outline: fade(@color-main, 30%) solid 2px;
outline-offset: -1px;
.focus();
}
}
src/less/mixins/btn-mixins.less
View file @ 77e3bf4c
......@@ -38,6 +38,8 @@
&:active,
&:focus {
text-decoration: none;
outline: 0;
box-shadow: none;
}
// &--disabled,
......
src/less/mixins/focus-mixin.less 0 → 100644
View file @ 77e3bf4c
.focus() {
outline: 0;
box-shadow: 0 0 0 2px fade(@color-main, 30%);
}
src/less/mixins/mixins.less
View file @ 77e3bf4c
......@@ -2,3 +2,4 @@
@import 'btn-mixins.less';
@import 'table-responsive-mixins.less';
@import 'responsive-mixins.less';
@import 'focus-mixin.less';
src/less/style.less
View file @ 77e3bf4c
......@@ -9,7 +9,9 @@
@import "blocks/form.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";
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