Skip to content

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

Кнопки и текстовые поля форм

parent 0e5ec524
Hide whitespace changes
Inline Side-by-side
Showing with 181 additions and 91 deletions
src/blocks-library.pug
View file @ d450a30b
......@@ -48,9 +48,6 @@ block off-canvas
ul#off-canvas-menu.menu
block header
//- -var page = 'blog';
//- p Шапка
block content
......@@ -151,14 +148,10 @@ block content
+block-lib('alert', 'Сообщения', false)
include:markdown-it(linkify html='true' typographer='true' quotes='«»') blocks/alert/readme.md
+alert('', 'success')
p Успех
+alert('Заголовok', 'danger')
p Проблема
+alert('Внимание!', 'warning, some-mod-name')
p Текст
+alert()
p Сообщение без модификаторов
p Обычное сообщение
+alert('Заголовок', 'warning, some-mod-name')
p Блок сообщения с модификаторами.
+block-lib-code()
include:show-code(first-line="//- Pug-файл этого блока:") blocks/alert/alert.pug
......@@ -184,6 +177,46 @@ block content
+block-lib-code()
include:show-code(first-line="//- Pug-файл этого блока:") blocks/menu/menu.pug
+block-lib('btn', 'Кнопка', false)
include:markdown-it(linkify html='true' typographer='true' quotes='«»') blocks/btn/readme.md
p.
#[+btn('Кнопка-ссылка')(href='/')]
#[+btn('Кнопка-input', '', true)(name='submit')]
#[+btn('Кнопка-button', 'main')]
p.
#[+btn('Кнопка-ссылка', 'disabled')(href='/')]
#[+btn('Кнопка-input', '', true)(name='submit', disabled='')]
#[+btn('Кнопка-button', 'main')(disabled='')]
+block-lib-code()
include:show-code(first-line="//- Pug-файл этого блока:") blocks/btn/btn.pug
+block-lib('field-text', 'Текстовое поле', false)
include:markdown-it(linkify html='true' typographer='true' quotes='«»') blocks/field-text/readme.md
+field-text({
type: 'text',
title: 'Текстовое поле',
placeholder: 'Как заполнять',
helpText: 'Подсказка',
})
+field-text({
title: 'Многострочное текстовое поле',
textarea: true,
placeholder: 'Как заполнять',
helpText: 'Подсказка',
})
+field-text({
type: 'number',
title: 'Текстовое поле (number), ошибочный ввод',
placeholder: 'Как заполнять',
helpText: 'Подсказка',
props: 'Подсказка',
mods: 'error',
inputAttrs: {'id': '200', 'max': '200', 'min': '2'},
})
+field-text()
+block-lib-code()
include:show-code(first-line="//- Pug-файл этого блока:") blocks/field-text/field-text.pug
.burger.blocks-library__menu-toggler(data-toggle="off-canvas")
......@@ -192,7 +225,3 @@ block content
block footer
//- p Подвал
//- block append page-bottom
//- script(src='js/SOME.js')
src/blocks/alert/alert.pug
View file @ d450a30b
......@@ -6,14 +6,14 @@ mixin alert(title, mods)
//- title {string} - заголовок
//- mods {string} - стилевые модификаторы
//- Вызов:
//- +alert('', 'success')
//- +alert()
//- p Успех
//- +alert('Заголовok', 'danger')
//- p Проблема
//- +alert('Внимание!', 'warning, some-mod-name')
//- p Текст
//- +alert()
//- p Сообщение без модификаторов
//- +alert('Заголовok', 'danger')
//- p Проблема
-
//- список модификаторов
......
src/blocks/alert/alert.scss
View file @ d450a30b
......@@ -3,7 +3,6 @@
// Очередность: http://nicothin.github.io/idiomatic-pre-CSS/#priority
$gray-lighter: hsl(0, 0%, 80%) !default;
$gray-lightest: hsl(0, 0%, 90%) !default;
$color-success: hsl(120, 39%, 54%) !default;
$color-danger: hsl(2, 64%, 58%) !default;
$color-warning: hsl(35, 84%, 62%) !default;
......@@ -22,7 +21,7 @@ $border-radius: 3px !default;
border: 1px solid $gray-lighter;
border-radius: $border-radius;
color: $text-color;
background-color: $gray-lightest;
background-color: #fff;
> * {
......@@ -45,41 +44,43 @@ $border-radius: 3px !default;
color: inherit;
}
&--danger {
background-color: $color-danger;
border: 1px solid darken($color-danger, 10%);
color: #fff;
a {
color: inherit;
text-decoration: underline;
&:hover,
&:focus {
text-decoration: none;
}
}
}
&--success {
background-color: $color-success;
border: 1px solid darken($color-success, 10%);
color: #fff;
a {
color: inherit;
text-decoration: underline;
&:hover,
&:focus {
text-decoration: none;
}
}
}
&--warning {
background-color: lighten($color-warning, 30%);
border: 1px solid lighten($color-warning, 20%);
color: $text-color;
}
// &--danger {
// background-color: $color-danger;
// border: 1px solid darken($color-danger, 10%);
// color: #fff;
// a {
// color: inherit;
// text-decoration: underline;
// &:hover,
// &:focus {
// text-decoration: none;
// }
// }
// }
// &--success {
// background-color: $color-success;
// border: 1px solid darken($color-success, 10%);
// color: #fff;
// a {
// color: inherit;
// text-decoration: underline;
// &:hover,
// &:focus {
// text-decoration: none;
// }
// }
// }
}
src/blocks/btn/btn.html deleted 100644 → 0
View file @ 0e5ec524
<!--DEV
Для использования этого файла как шаблона:
@ @include('blocks/btn/btn.html')
(Нужно убрать пробел между символами @)
Подробнее: https://www.npmjs.com/package/gulp-file-include
<a class="btn" href="">Cсылка</a>
<input class="btn" type="submit" value="Input">
<button class="btn">Button</button>
-->
src/blocks/btn/btn.pug 0 → 100644
View file @ d450a30b
//- Все примеси в этом файле должны начинаться c имени блока (btn)
mixin btn(text, mods, isInput)
//- Принимает:
//- text {string} - текст кнопки
//- mods {string} - список модификаторов
//- isInput {bool} - флаг «это тег input»
//- Вызов:
//- +btn('Кнопка-ссылка')(href='/') - есть href, это точно ссылка
//- +btn('Кнопка-input', '', true) - есть флаг isInput, это input
//- +btn('Кнопка-button', 'success') - нет href, нет isInput — это button
-
// список модификаторов
var allMods = '';
if(typeof(mods) !== 'undefined' && mods) {
var modsList = mods.split(',');
for (var i = 0; i < modsList.length; i++) {
allMods = allMods + ' btn--' + modsList[i].trim();
}
}
//- передан href — это ссылка
if (attributes.href)
a.btn(class=allMods)&attributes(attributes)!= text
block
//- иначе, если передан isInput и он true, это input
else if (typeof(isInput) !== 'undefined' && isInput)
input.btn(class=allMods, value=text, type='button')&attributes(attributes)
//- иначе это button
else
button.btn(class=allMods)&attributes(attributes)!= text
block
src/blocks/btn/btn.scss
View file @ d450a30b
......@@ -18,10 +18,10 @@ $border-radius: 3px !default;
box-sizing: border-box;
display: inline-block;
vertical-align: middle;
margin: 0;
padding: $field-padding-vertical $field-padding-horizontal;
white-space: nowrap;
vertical-align: middle;
user-select: none;
text-align: center;
font-size: 1em;
......
src/blocks/field-text/field-text.html deleted 100644 → 0
View file @ 0e5ec524
<!--DEV
Для использования этого файла как шаблона:
@ @include('blocks/field-text/field-text.html')
(Нужно убрать пробел между символами @)
Подробнее: https://www.npmjs.com/package/gulp-file-include
<label class="field-text">
<span class="field-text__name">Текст</span>
<span class="field-text__input-wrap">
<input class="field-text__input" type="text" placeholder="placeholder" id="" name="">
<span class="field-text__help-text">Пояснение</span>
</span>
</label>
-->
src/blocks/field-text/field-text.pug 0 → 100644
View file @ d450a30b
//- Все примеси в этом файле должны начинаться c имени блока (field-text)
mixin field-text(props)
//- Принимает:
//- props {
//- title: '' {string} - текст с названием (выводится над полем)
//- type: '' {string} - тип для input [text|email|number...]
//- placeholder: '' {string} - подсказка в поле
//- name: '' {string} - атрибут name у input/textarea
//- inputAttrs: {} {object} - дополнительные атрибуты для input/textarea
//- mods: '' {string} - модификаторы блока
//- textarea: false {bool} - флаг input/textarea
//- helpText: '' {string} - пояснение под полем
//- }
//- Вызов:
//- +field-text({
//- title: 'Текст',
//- type: 'text',
//- placeholder: '',
//- name: '',
//- inputAttrs: {'id': 'some-input-id', 'max': '200', 'min': '2'},
//- mods: '',
//- textarea: false,
//- helpText: '',
//- })
-
if(typeof(props) === 'undefined') {
var props = {};
}
var allMods = '';
if(typeof(props.mods) !== 'undefined' && props.mods) {
var modsList = props.mods.split(',');
for (var i = 0; i < modsList.length; i++) {
allMods = allMods + ' field-text--' + modsList[i].trim();
}
}
label.field-text(class=allMods)&attributes(attributes)
if(typeof(props.title) !== 'undefined' && props.title)
span.field-text__name!= props.title
span.field-text__input-wrap
if(typeof(props.textarea) !== 'undefined' && props.textarea)
textarea.field-text__input(
placeholder=props.placeholder ? props.placeholder : ''
name=props.name ? props.name : ''
)&attributes(props.inputAttrs)
else
input.field-text__input(
type=props.type ? props.type : 'text'
placeholder=props.placeholder ? props.placeholder : ''
name=props.name ? props.name : ''
)&attributes(props.inputAttrs)
if(typeof(props.helpText) !== 'undefined' && props.helpText)
span.field-text__help-text!= props.helpText
block
src/blocks/field-text/readme.md 0 → 100644
View file @ d450a30b
Текстовые поля любого типа. В том числе, с использованием не `input`, а `textarea`. Стилизация ошибочного состояния вынесена в отдельный файл.
src/blocks/menu/menu.pug
View file @ d450a30b
......@@ -16,10 +16,6 @@ mixin menu(menu)
//- 'url':'/',
//- 'mods': 'separator, active',
//- },
//- {
//- 'text':'Пункт2',
//- 'url':'/',
//- },
//- ];
//- +menu(myMenu)
......@@ -36,13 +32,14 @@ mixin menu(menu)
'mods': 'separator, active',
},
{
'text':'Пункт меню весьма длинный, такой, что прямо адски длинный, очень много, реально много слов! Пункт меню весьма длинный, такой, что прямо адски длинный, очень много, реально много слов!',
'text':'Пункт меню весьма длинный, такой, что прямо адски длинный, очень много, реально много слов. Пункт меню весьма длинный, такой, что прямо адски длинный, очень много, реально много слов.',
},
]
}
ul.menu&attributes(attributes)
each menuItem in menu
-
// список модификаторов
var allMods = '';
......@@ -52,8 +49,9 @@ mixin menu(menu)
allMods = allMods + ' menu__item--' + modsList[i].trim();
}
}
li.menu__item(class=allMods)
- if(typeof(menuItem.url) !== 'undefined')
if(typeof(menuItem.url) !== 'undefined')
a.menu__link(href=menuItem.url)!= menuItem.text
- else
else
span.menu__link!= menuItem.text
src/pug/mixins.pug
View file @ d450a30b
......@@ -7,3 +7,5 @@ include ../blocks/code/code.pug
include ../blocks/thumb/thumb.pug
include ../blocks/alert/alert.pug
include ../blocks/menu/menu.pug
include ../blocks/btn/btn.pug
include ../blocks/field-text/field-text.pug
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