Skip to content

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

form

parent d50d5fa5
Show whitespace changes
Inline Side-by-side
Showing with 130 additions and 15 deletions
src/_blocks_library.html
View file @ db708fd0
...@@ -201,7 +201,7 @@ ...@@ -201,7 +201,7 @@
</tr> </tr>
<tr> <tr>
<td data-label="Имя и фамилия">Джакомо Казанова</td> <td data-label="Имя и фамилия">Джакомо Казанова</td>
<td data-label="Тип мироощущения">Небольшая распущенность с лёгкоё примесью леденящих душу извращений, чудовищной лжи и имитатора известного органа, обитого телячьей кожей.</td> <td data-label="Тип мироощущения">Небольшая распущенность с лёгкой примесью леденящих душу извращений, чудовищной лжи и имитатора известного органа, обитого телячьей кожей.</td>
</tr> </tr>
</tbody> </tbody>
</table> </table>
...@@ -303,7 +303,7 @@ ...@@ -303,7 +303,7 @@
</div> </div>
</label> </label>
<div class="field-checkbox"> <div class="field-checkbox">
<div class="field-checkbox__title">Общее название</div> <div class="field-checkbox__title">Общее название этих двух флажков</div>
<div class="field-checkbox__input-wrap"> <div class="field-checkbox__input-wrap">
<label class="field-checkbox__name"> <label class="field-checkbox__name">
<input class="field-checkbox__input" type="checkbox"> <input class="field-checkbox__input" type="checkbox">
...@@ -320,15 +320,43 @@ ...@@ -320,15 +320,43 @@
<div class="field-radio__input-wrap"> <div class="field-radio__input-wrap">
<label class="field-radio__name"> <label class="field-radio__name">
<input class="field-radio__input" type="radio" name="one"> <input class="field-radio__input" type="radio" name="one">
<span class="field-checkbox__name-text">Радиокнопка</span> <span class="field-radio__name-text">Радиокнопка</span>
</label> </label>
<label class="field-radio__name"> <label class="field-radio__name">
<input class="field-radio__input" type="radio" name="one"> <input class="field-radio__input" type="radio" name="one">
<span class="field-checkbox__name-text">Радиокнопка</span> <span class="field-radio__name-text">Радиокнопка</span>
</label> </label>
<div class="field-radio__help-text">Нет общего названия.</div> <div class="field-radio__help-text">Нет общего названия.</div>
</div> </div>
</div> </div>
<div class="field-checkbox field-checkbox--custom">
<div class="field-checkbox__title">Собственные флажки</div>
<div class="field-checkbox__input-wrap">
<label class="field-checkbox__name">
<input class="field-checkbox__input" type="checkbox">
<span class="field-checkbox__name-text">Флажок</span>
</label>
<label class="field-checkbox__name">
<input class="field-checkbox__input" type="checkbox">
<span class="field-checkbox__name-text">Флажок</span>
</label>
<div class="field-checkbox__help-text">Изображения в формате SVG, вписываются в CSS-файл функцией <code>data-uri()</code> компилятора LESS.</div>
</div>
</div>
<div class="field-radio field-radio--custom">
<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">
<span class="field-radio__name-text">Радиокнопка</span>
</label>
<label class="field-radio__name">
<input class="field-radio__input" type="radio" name="one">
<span class="field-radio__name-text">Радиокнопка</span>
</label>
<div class="field-radio__help-text">Изображения в формате SVG, вписываются в CSS-файл функцией <code>data-uri()</code> компилятора LESS.</div>
</div>
</div>
<label class="field-select"> <label class="field-select">
<div class="field-select__name">Название поля</div> <div class="field-select__name">Название поля</div>
<div class="field-select__select-wrap"> <div class="field-select__select-wrap">
...@@ -401,11 +429,11 @@ ...@@ -401,11 +429,11 @@
<div class="field-radio__input-wrap"> <div class="field-radio__input-wrap">
<label class="field-radio__name"> <label class="field-radio__name">
<input class="field-radio__input" type="radio" name="one"> <input class="field-radio__input" type="radio" name="one">
<span class="field-checkbox__name-text">Радиокнопка</span> <span class="field-radio__name-text">Радиокнопка</span>
</label> </label>
<label class="field-radio__name"> <label class="field-radio__name">
<input class="field-radio__input" type="radio" name="one"> <input class="field-radio__input" type="radio" name="one">
<span class="field-checkbox__name-text">Радиокнопка</span> <span class="field-radio__name-text">Радиокнопка</span>
</label> </label>
<div class="field-radio__help-text">Нет общего названия, но оставлен пустой <code>div</code> для него.</div> <div class="field-radio__help-text">Нет общего названия, но оставлен пустой <code>div</code> для него.</div>
</div> </div>
...@@ -414,11 +442,11 @@ ...@@ -414,11 +442,11 @@
<div class="field-radio__input-wrap"> <div class="field-radio__input-wrap">
<label class="field-radio__name"> <label class="field-radio__name">
<input class="field-radio__input" type="radio" name="one"> <input class="field-radio__input" type="radio" name="one">
<span class="field-checkbox__name-text">Радиокнопка</span> <span class="field-radio__name-text">Радиокнопка</span>
</label> </label>
<label class="field-radio__name"> <label class="field-radio__name">
<input class="field-radio__input" type="radio" name="one"> <input class="field-radio__input" type="radio" name="one">
<span class="field-checkbox__name-text">Радиокнопка</span> <span class="field-radio__name-text">Радиокнопка</span>
</label> </label>
<div class="field-radio__help-text">Нет общего названия и отсутствует пустой <code>div</code> для него.</div> <div class="field-radio__help-text">Нет общего названия и отсутствует пустой <code>div</code> для него.</div>
</div> </div>
......
src/img/form_field_bg/checkbox--checked.svg
View file @ db708fd0
<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> <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 18 18"><path d="M6.984 14.017l9-9-1.406-1.454-7.594 7.595L3.42 7.594 2.018 9zm9-14.017q.844 0 1.43.61T18 2.014v13.97q0 .797-.586 1.406-.586.61-1.43.61H2.014q-.843 0-1.43-.61T0 15.984V2.014Q0 1.218.585.61 1.17 0 2.015 0h13.97z" fill="#2d2d2d"/></svg>
\ No newline at end of file \ No newline at end of file
src/img/form_field_bg/checkbox.svg
View file @ db708fd0
<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> <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 18 18"><path d="M15.984 0q.797 0 1.406.61.61.61.61 1.404v13.97q0 .797-.61 1.406-.61.61-1.406.61H2.014q-.796 0-1.405-.61Q0 16.78 0 15.984V2.014Q0 1.218.61.61 1.22 0 2.014 0h13.97zm0 2.016H2.014v13.97h13.97V2.017z" fill="#2d2d2d"/></svg>
\ No newline at end of file \ No newline at end of file
src/less/blocks/field-checkbox.less
View file @ db708fd0
...@@ -2,8 +2,43 @@ ...@@ -2,8 +2,43 @@
display: block; display: block;
margin-bottom: (@line-height / 2); 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 { &__title {
font-weight: 700; font-weight: 700;
line-height: 1.2em;
display: block; display: block;
margin-bottom: round(@line-height / 4, 2); margin-bottom: round(@line-height / 4, 2);
min-height: 1px; min-height: 1px;
...@@ -17,17 +52,20 @@ ...@@ -17,17 +52,20 @@
font-weight: 400; font-weight: 400;
display: inline-block; display: inline-block;
margin-right: .6em; margin-right: .6em;
line-height: @line-height;
} }
&__input { &__input {
position: absolute; position: absolute;
top: .25em; top: 50%;
left: 0; left: 0;
transform: translate(0, -50%);
} }
&__help-text { &__help-text {
display: block; display: block;
font-size: @font-size--small; font-size: @font-size--small;
line-height: 1.2em;
color: @text-color--muted; color: @text-color--muted;
padding-left: 1.6em; // 1.3 + 0.3 padding-left: 1.6em; // 1.3 + 0.3
} }
......
src/less/blocks/field-file.less
View file @ db708fd0
...@@ -11,12 +11,13 @@ ...@@ -11,12 +11,13 @@
&__input-wrap {} &__input-wrap {}
&__input { &__input {
margin-bottom: round(@line-height / 4, 2); margin-bottom: round(@line-height / 3, 2);
} }
&__help-text { &__help-text {
display: block; display: block;
font-size: @font-size--small; font-size: @font-size--small;
line-height: 1.2em;
color: @text-color--muted; color: @text-color--muted;
} }
} }
src/less/blocks/field-radio.less
View file @ db708fd0
...@@ -2,8 +2,41 @@ ...@@ -2,8 +2,41 @@
display: block; display: block;
margin-bottom: (@line-height / 2); 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 { &__title {
font-weight: 700; font-weight: 700;
line-height: 1.2em;
display: block; display: block;
margin-bottom: round(@line-height / 4, 2); margin-bottom: round(@line-height / 4, 2);
min-height: 1px; min-height: 1px;
...@@ -21,13 +54,15 @@ ...@@ -21,13 +54,15 @@
&__input { &__input {
position: absolute; position: absolute;
top: .25em; top: 50%;
left: 0; left: 0;
transform: translate(0, -50%);
} }
&__help-text { &__help-text {
display: block; display: block;
font-size: @font-size--small; font-size: @font-size--small;
line-height: 1.2em;
color: @text-color--muted; color: @text-color--muted;
padding-left: 1.6em; // 1.3 + 0.3 padding-left: 1.6em; // 1.3 + 0.3
} }
......
src/less/blocks/field-select.less
View file @ db708fd0
...@@ -11,12 +11,13 @@ ...@@ -11,12 +11,13 @@
&__input-wrap {} &__input-wrap {}
&__select { &__select {
margin-bottom: round(@line-height / 4, 2); margin-bottom: round(@line-height / 3, 2);
} }
&__help-text { &__help-text {
display: block; display: block;
font-size: @font-size--small; font-size: @font-size--small;
line-height: 1.2em;
color: @text-color--muted; color: @text-color--muted;
} }
} }
src/less/blocks/field-text.less
View file @ db708fd0
...@@ -11,12 +11,13 @@ ...@@ -11,12 +11,13 @@
&__input-wrap {} &__input-wrap {}
&__input { &__input {
margin-bottom: round(@line-height / 4, 2); margin-bottom: round(@line-height / 3, 2);
} }
&__help-text { &__help-text {
display: block; display: block;
font-size: @font-size--small; font-size: @font-size--small;
line-height: 1.2em;
color: @text-color--muted; color: @text-color--muted;
} }
} }
src/less/global_scaffolding.less
View file @ db708fd0
...@@ -427,3 +427,14 @@ input[disabled], ...@@ -427,3 +427,14 @@ input[disabled],
input[readonly] { input[readonly] {
background-color: @gray-lighter; background-color: @gray-lighter;
} }
select,
textarea,
input:not([type="submit"]),
input:not([type="button"]),
input:not([type="reset"]) {
&:focus {
outline: fade(@color-main, 30%) solid 2px;
outline-offset: -1px;
}
}
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