Skip to content

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

forms - more blocks

parent aff64001
Expand all Show whitespace changes
Inline Side-by-side
Showing with 238 additions and 250 deletions
README.md
View file @ 7394fd48
......@@ -2,6 +2,6 @@
Установка: выполнить в папке проекта: `npm i`.
Использование: `npm run gulp` (дабы не ставить глобально 4-ю версию, которая сейчас в альфе). После слова `gulp` можно через пробел указать другие команды (см. `gulpfile.js`).
Использование: `npm start` (дабы не ставить глобально 4-ю версию gulp, которая сейчас в альфе). После `npm start` можно через пробел указать задачу. К примеру `npm start less` выполнит только задачу `less` из `gulpfile.js` (полный список задач смотри в `gulpfile.js`).
`port=3004 npm run gulp` — для запуска сервера автообновлений на указанном порту.
\ No newline at end of file
`port=3004 npm start` — для запуска сервера автообновлений на указанном порту.
package.json
View file @ 7394fd48
......@@ -4,7 +4,7 @@
"description": "",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"gulp": "./node_modules/.bin/gulp"
"start": "./node_modules/.bin/gulp"
},
"author": "Nikolay Gromov",
"license": "MIT",
......
src/_blocks_library.html
View file @ 7394fd48
This diff is collapsed.
src/less/blocks/field-actions.less 0 → 100644
View file @ 7394fd48
.field-actions {
display: block;
margin-top: @line-height;
margin-bottom: (@line-height / 2);
}
src/less/blocks/field-checkbox.less 0 → 100644
View file @ 7394fd48
.field-checkbox {
display: block;
margin-bottom: (@line-height / 2);
&__input-wrap {}
&__name {
position: relative;
padding-left: 1.3em;
font-weight: 400;
display: inline-block;
margin-right: .6em;
}
&__input {
position: absolute;
top: .25em;
left: 0;
}
&__help-text {
display: block;
font-size: @font-size--small;
color: @text-color--muted;
padding-left: 1.6em; // 1.3 + 0.3
}
}
src/less/blocks/field-file.less 0 → 100644
View file @ 7394fd48
.field-file {
display: block;
margin-bottom: (@line-height / 2);
&__name {
font-weight: 700;
display: block;
margin-bottom: round(@line-height / 4, 2);
}
&__input-wrap {}
&__input {
margin-bottom: round(@line-height / 4, 2);
}
&__help-text {
display: block;
font-size: @font-size--small;
color: @text-color--muted;
}
}
src/less/blocks/field-radio.less 0 → 100644
View file @ 7394fd48
.field-radio {
display: block;
margin-bottom: (@line-height / 2);
&__input-wrap {}
&__name {
position: relative;
padding-left: 1.3em;
font-weight: 400;
display: inline-block;
margin-right: .6em;
}
&__input {
position: absolute;
top: .25em;
left: 0;
}
&__help-text {
display: block;
font-size: @font-size--small;
color: @text-color--muted;
padding-left: 1.6em; // 1.3 + 0.3
}
}
src/less/blocks/field-select.less 0 → 100644
View file @ 7394fd48
.field-select {
display: block;
margin-bottom: (@line-height / 2);
&__name {
font-weight: 700;
display: block;
margin-bottom: round(@line-height / 4, 2);
}
&__input-wrap {}
&__select {
margin-bottom: round(@line-height / 4, 2);
}
&__help-text {
display: block;
font-size: @font-size--small;
color: @text-color--muted;
}
}
src/less/blocks/field-text.less 0 → 100644
View file @ 7394fd48
.field-text {
display: block;
margin-bottom: (@line-height / 2);
&__name {
font-weight: 700;
display: block;
margin-bottom: round(@line-height / 4, 2);
}
&__input-wrap {}
&__input {
margin-bottom: round(@line-height / 4, 2);
}
&__help-text {
display: block;
font-size: @font-size--small;
color: @text-color--muted;
}
}
src/less/blocks/field.less deleted 100644 → 0
View file @ aff64001
.field {
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;
}
}
.field__select {
color: @color-danger;
border-color: @color-danger;
&:focus {
outline-color: @color-danger;
}
}
}
// Закомментировал, в связи с редкой надобностью
// &--success {
// color: @color-success;
// .field__help-text {
// color: @color-success;
// }
// .field__input {
// color: @color-success;
// border-color: @color-success;
// background-image: data-uri('image/svg+xml;charset=UTF-8', '../img/form_field_bg/check.svg');
// background-repeat: no-repeat;
// background-position: right .3em center;
// &::placeholder {
// color: @color-success;
// }
// &:focus {
// outline-color: @color-success;
// }
// }
// .field__select {
// color: @color-success;
// border-color: @color-success;
// &:focus {
// outline-color: @color-success;
// }
// }
// }
&--checkbox,
&--radio {
.field__name {
display: inline-block;
vertical-align: top;
font-weight: inherit;
font-family: inherit;
margin-bottom: 0;
margin-right: .6em;
}
.field__input {
margin-top: .25em;
margin-bottom: 0;
display: inline-block;
vertical-align: top;
}
}
&__name {
font-weight: 700;
display: block;
margin-bottom: round(@line-height / 4, 2);
}
&__input-wrap {}
&__input,
&__select {
margin-bottom: round(@line-height / 4, 2);
}
&__select {
// appearance: none;
}
&__help-text {
font-size: @font-size--small;
color: @text-color--muted;
}
}
src/less/blocks/form.less
View file @ 7394fd48
......@@ -3,51 +3,51 @@
margin-bottom: @line-height;
}
&--horizontal {
.field {
display: flex;
}
.field__name {
width: 15rem;
padding-top: .42em;
padding-right: .3em;
}
.field__input-wrap {
flex-grow: 10;
}
.field--actions {
padding-left: 15rem;
}
.field--checkbox {
& > .field__name {
margin-right: 0;
}
.field__input-wrap .field__name {
width: auto;
padding-top: 0;
}
}
}
&--inline {
.field {
display: inline-block;
vertical-align: top;
}
.field__name {
display: inline-block;
vertical-align: top;
padding-top: .42em;
}
.field__input-wrap {
display: inline-block;
vertical-align: top;
}
}
// &--horizontal {
// .field {
// display: flex;
// }
// .field__name {
// width: 15rem;
// padding-top: .42em;
// padding-right: .3em;
// }
// .field__input-wrap {
// flex-grow: 10;
// }
// .field--actions {
// padding-left: 15rem;
// }
// .field--checkbox {
// & > .field__name {
// margin-right: 0;
// }
// .field__input-wrap .field__name {
// width: auto;
// padding-top: 0;
// }
// }
// }
// &--inline {
// .field {
// display: inline-block;
// vertical-align: top;
// }
// .field__name {
// display: inline-block;
// vertical-align: top;
// padding-top: .42em;
// }
// .field__input-wrap {
// display: inline-block;
// vertical-align: top;
// }
// }
}
src/less/style.less
View file @ 7394fd48
......@@ -6,5 +6,9 @@
@import "blocks/table-responsive.less";
@import "blocks/btn.less";
@import "blocks/form.less";
@import "blocks/field.less";
@import "blocks/field-text.less";
@import "blocks/field-checkbox.less";
@import "blocks/field-radio.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