Skip to content

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

library fix, add

parent 7aca5a23
Show whitespace changes
Inline Side-by-side
Showing with 255 additions and 46 deletions
src/blocks/blocks-library/blocks-library.less
View file @ 1cafad9a
......@@ -6,11 +6,12 @@
position: relative;
padding: 1rem;
border: 2px dashed @gray-lighter;
margin-bottom: 2rem;
margin-bottom: 2.5em;
@media (min-width: @screen-md) {
padding: 1.5rem 2rem 1.5rem 5rem;
min-height: 18rem;
margin-bottom: 5rem;
}
&:before {
......@@ -43,7 +44,7 @@
&__sub-item {
&:not(:first-child) {
margin-top: 2.5em;
margin-top: 2em;
}
}
......
src/blocks/field-checkbox/field-checkbox--lg.less 0 → 100644
View file @ 1cafad9a
@import '../../less/variables.less'; // только для удобства обращения к переменным
.field-checkbox {
&--lg {
font-size: @font-size--h3;
.field-checkbox__input {
top: 0.5em;
}
}
}
src/blocks/field-checkbox/field-checkbox--sm.less 0 → 100644
View file @ 1cafad9a
@import '../../less/variables.less'; // только для удобства обращения к переменным
.field-checkbox {
&--sm {
font-size: @font-size--small;
.field-checkbox__input {
top: 0.1em;
}
}
}
src/blocks/field-text/field-text--lg.less 0 → 100644
View file @ 1cafad9a
@import '../../less/variables.less'; // только для удобства обращения к переменным
.field-text {
&--lg {
font-size: @font-size--h3;
}
}
src/blocks/field-text/field-text--sm.less 0 → 100644
View file @ 1cafad9a
@import '../../less/variables.less'; // только для удобства обращения к переменным
.field-text {
&--sm {
font-size: @font-size--small;
}
}
src/blocks_library.html
View file @ 1cafad9a
......@@ -282,7 +282,7 @@
</div>
</div>
<div class="blocks-library__sub-item">
<b class="blocks-library__sub-item-title">Элемент с модификатором <code>list-nums__item &nbsp;list-nums__item--main</code> (отдельный LESS-файл)</b>
<b class="blocks-library__sub-item-title">Отдельный элемент с модификатором <code>.list-nums__item.list-nums__item--main</code> (отдельный LESS-файл)</b>
<div class="row">
<div class="col-md-6">
<ol class="list-nums">
......@@ -304,7 +304,7 @@
</div>
</div>
<div class="blocks-library__sub-item">
<b class="blocks-library__sub-item-title">Модификатор <code>list-nums--main</code> (отдельный LESS-файл)</b>
<b class="blocks-library__sub-item-title"><code>.list-nums.list-nums--main</code> (отдельный LESS-файл)</b>
<div class="row">
<div class="col-md-6">
<ol class="list-nums list-nums--main">
......@@ -528,6 +528,7 @@
<section class="blocks-library__item" id="field-text" data-name=".field-text">
<p>Размеры задаются в <code>em</code> — зависят от размера шрифта родительского элемента.</p>
<div class="row">
<div class="col-md-6">
<label class="field-text">
......@@ -548,7 +549,7 @@
</div>
</div>
</div>
<div class="row" style="font-size: 24px">
<div class="row" style="font-size:1.5em">
<div class="col-md-6">
<label class="field-text">
<div class="field-text__name">Увеличен font-size родителя</div>
......@@ -568,11 +569,59 @@
</div>
</div>
</div>
<div class="blocks-library__sub-item">
<b class="blocks-library__sub-item-title"><code>.field-text.field-text--lg</code> (отдельный less-файл)</b>
<p>Размер изменён благодаря модификатору. Модификатор меняет <code>font-size</code> блока в <code>em</code>-ах (реальный размер блока продолжает зависеть от размера шрифта родителя).</p>
<div class="row">
<div class="col-md-6">
<label class="field-text field-text--lg">
<div class="field-text__name">Многострочное текстовое поле</div>
<div class="field-text__input-wrap">
<textarea class="field-text__input" placeholder="textarea"></textarea>
<div class="field-text__help-text">Обёртка — <code>label</code>.</div>
</div>
</label>
</div>
<div class="col-md-6">
<div class="field-text field-text--lg">
<label class="field-text__name" for="text-field-1">Любое поле, выглядящее как текстовое</label>
<div class="field-text__input-wrap">
<input class="field-text__input" id="text-field-1" type="text" placeholder="input[type=text]">
<div class="field-text__help-text">Обёртка — <code>div</code>.</div>
</div>
</div>
</div>
</div>
</div>
<div class="blocks-library__sub-item">
<b class="blocks-library__sub-item-title"><code>.field-text.field-text--sm</code> (отдельный less-файл)</b>
<div class="row">
<div class="col-md-6">
<label class="field-text field-text--sm">
<div class="field-text__name">Многострочное текстовое поле</div>
<div class="field-text__input-wrap">
<textarea class="field-text__input" placeholder="textarea"></textarea>
<div class="field-text__help-text">Обёртка — <code>label</code>.</div>
</div>
</label>
</div>
<div class="col-md-6">
<div class="field-text field-text--sm">
<label class="field-text__name" for="text-field-1">Любое поле, выглядящее как текстовое</label>
<div class="field-text__input-wrap">
<input class="field-text__input" id="text-field-1" type="text" placeholder="input[type=text]">
<div class="field-text__help-text">Обёртка — <code>div</code>.</div>
</div>
</div>
</div>
</div>
</div>
</section>
<section class="blocks-library__item" id="field-checkbox" data-name=".field-checkbox">
<p>Размеры задаются в <code>em</code> — зависят от размера шрифта родительского элемента.</p>
<div class="row">
<div class="col-md-6">
<div class="field-checkbox">
......@@ -607,8 +656,41 @@
</div>
</div>
</div>
<div class="row" style="font-size:1.5em;">
<div class="col-md-6">
<div class="field-checkbox">
<div class="field-checkbox__title">Увеличен font-size родителя</div>
<div class="field-checkbox__input-wrap">
<label class="field-checkbox__name">
<input class="field-checkbox__input" type="checkbox" checked>
<span class="field-checkbox__name-text">Использовать</span>
</label>
<div class="field-checkbox__help-text">Пояснение не обязательно.</div>
</div>
</div>
</div>
<div class="col-md-6">
<div class="field-checkbox field-checkbox--custom">
<div class="field-checkbox__title">Увеличен font-size родителя</div>
<div class="field-checkbox__input-wrap">
<label class="field-checkbox__name">
<input class="field-checkbox__input" type="checkbox" checked>
<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>
<label class="field-checkbox__name">
<input class="field-checkbox__input" type="checkbox">
<span class="field-checkbox__name-text">Сто лет в обед</span>
</label>
</div>
</div>
</div>
</div>
<div class="blocks-library__sub-item">
<b class="blocks-library__sub-item-title"><code>.field-checkbox.field-checkbox--custom</code></b>
<b class="blocks-library__sub-item-title"><code>.field-checkbox.field-checkbox--custom</code> (отдельный less-файл)</b>
<div class="row">
<div class="col-md-6">
<div class="field-checkbox field-checkbox--custom">
......@@ -643,8 +725,63 @@
</div>
</div>
</div>
<div class="field-checkbox field-checkbox--custom" style="font-size: 24px;">
<div class="field-checkbox__title">Увеличен font-size родителя</div>
</div>
<div class="blocks-library__sub-item">
<b class="blocks-library__sub-item-title"><code>.field-checkbox.field-checkbox--lg</code> (отдельный less-файл)</b>
<p>Размер изменён благодаря модификатору. Модификатор меняет <code>font-size</code> блока в <code>em</code>-ах (реальный размер блока продолжает зависеть от размера шрифта родителя).</p>
<div class="row">
<div class="col-md-6">
<div class="field-checkbox field-checkbox--lg">
<div class="field-checkbox__title">Стандартный флажок</div>
<div class="field-checkbox__input-wrap">
<label class="field-checkbox__name">
<input class="field-checkbox__input" type="checkbox" checked>
<span class="field-checkbox__name-text">Использовать</span>
</label>
<div class="field-checkbox__help-text">Пояснение не обязательно.</div>
</div>
</div>
</div>
<div class="col-md-6">
<div class="field-checkbox field-checkbox--lg 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" checked>
<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>
<label class="field-checkbox__name">
<input class="field-checkbox__input" type="checkbox">
<span class="field-checkbox__name-text">Сто лет в обед</span>
</label>
</div>
</div>
</div>
</div>
</div>
<div class="blocks-library__sub-item">
<b class="blocks-library__sub-item-title"><code>.field-checkbox.field-checkbox--sm</code> (отдельный less-файл)</b>
<p>Размер изменён благодаря модификатору. Модификатор меняет <code>font-size</code> блока в <code>em</code>-ах (реальный размер блока продолжает зависеть от размера шрифта родителя).</p>
<div class="row">
<div class="col-md-6">
<div class="field-checkbox field-checkbox--sm">
<div class="field-checkbox__title">Стандартный флажок</div>
<div class="field-checkbox__input-wrap">
<label class="field-checkbox__name">
<input class="field-checkbox__input" type="checkbox" checked>
<span class="field-checkbox__name-text">Использовать</span>
</label>
<div class="field-checkbox__help-text">Пояснение не обязательно.</div>
</div>
</div>
</div>
<div class="col-md-6">
<div class="field-checkbox field-checkbox--sm 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" checked>
......@@ -652,11 +789,17 @@
</label>
<label class="field-checkbox__name">
<input class="field-checkbox__input" type="checkbox">
<span class="field-checkbox__name-text">Неть</span>
<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>
</div>
</div>
</div>
</div>
</section>
......@@ -696,57 +839,73 @@
</div>
</div>
</div>
<div class="blocks-library__sub-item">
<b class="blocks-library__sub-item-title"><code>.field-radio.field-radio--custom</code></b>
<div class="row">
<div class="row" style="font-size:1.5em;">
<div class="col-md-6">
<div class="field-radio field-radio--custom">
<div class="field-radio__title">Собственная радиокнопка</div>
<div class="field-radio">
<div class="field-radio__title">Увеличен font-size родителя</div>
<div class="field-radio__input-wrap">
<label class="field-radio__name">
<input class="field-radio__input" type="radio">
<span class="field-radio__name-text">Да</span>
</label>
<div class="field-radio__help-text">Есть общее название. При желании радиокнопок можно написать несколько подряд. Изображения в формате SVG, вписываются в CSS-файл функцией <code>data-uri()</code> компилятора LESS.</div>
<div class="field-radio__help-text">Пояснение не обязательно.</div>
</div>
</div>
</div>
<div class="col-md-6">
<div class="field-radio field-radio--custom">
<div class="field-radio__title">Собственные радиокнопки</div>
<div class="field-radio__title">Увеличен font-size родителя</div>
<div class="field-radio__input-wrap">
<label class="field-radio__name">
<input class="field-radio__input" type="radio" name="radio-demo-2" checked>
<input class="field-radio__input" type="radio" name="radio-demo-3" checked>
<span class="field-radio__name-text">Да</span>
</label>
<label class="field-radio__name">
<input class="field-radio__input" type="radio" name="radio-demo-2">
<input class="field-radio__input" type="radio" name="radio-demo-3">
<span class="field-radio__name-text">Нет</span>
</label>
<label class="field-radio__name">
<input class="field-radio__input" type="radio" name="radio-demo-2">
<input class="field-radio__input" type="radio" name="radio-demo-3">
<span class="field-radio__name-text">Не знаю</span>
</label>
<div class="field-radio__help-text">Разметка никак не модифицируется, просто добавляются дополнительные <code>label</code>.</div>
</div>
</div>
</div>
</div>
<div class="field-radio field-radio--custom" style="font-size: 24px;">
<div class="field-radio__title">Увеличен font-size родителя</div>
<div class="blocks-library__sub-item">
<b class="blocks-library__sub-item-title"><code>.field-radio.field-radio--custom</code></b>
<div class="row">
<div class="col-md-6">
<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="radio-demo-3" checked>
<input class="field-radio__input" type="radio">
<span class="field-radio__name-text">Да</span>
</label>
<div class="field-radio__help-text">Есть общее название. При желании радиокнопок можно написать несколько подряд. Изображения в формате SVG, вписываются в CSS-файл функцией <code>data-uri()</code> компилятора LESS.</div>
</div>
</div>
</div>
<div class="col-md-6">
<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="radio-demo-3">
<input class="field-radio__input" type="radio" name="radio-demo-2" checked>
<span class="field-radio__name-text">Да</span>
</label>
<label class="field-radio__name">
<input class="field-radio__input" type="radio" name="radio-demo-2">
<span class="field-radio__name-text">Нет</span>
</label>
<label class="field-radio__name">
<input class="field-radio__input" type="radio" name="radio-demo-3">
<input class="field-radio__input" type="radio" name="radio-demo-2">
<span class="field-radio__name-text">Не знаю</span>
</label>
<div class="field-radio__help-text">Разметка никак не модифицируется, просто добавляются дополнительные <code>label</code>.</div>
</div>
</div>
</div>
</div>
</div>
......@@ -815,7 +974,7 @@
</div>
</div>
</div>
<div class="row" style="font-size: 24px">
<div class="row" style="font-size:1.5em">
<div class="col-md-6">
<div class="field-toggler">
<div class="field-toggler__title">Увеличен font-size родителя</div>
......@@ -884,7 +1043,7 @@
</label>
</div>
</div>
<div class="row" style="font-size: 24px">
<div class="row" style="font-size:1.5em">
<div class="col-md-6">
<label class="field-select">
<div class="field-select__name">Увеличен font-size родителя</div>
......@@ -930,7 +1089,7 @@
<div class="field-range__help-text"><code>min="1" max="100" step="1" value="70"</code>, стилизован без JS.</div>
</div>
</div>
<div class="field-range" style="font-size: 24px">
<div class="field-range" style="font-size:1.5em">
<div class="field-range__name">Увеличен font-size родителя</div>
<div class="field-range__input-wrap">
<input class="field-range__input" type="range" min="1" max="30" step="1" value="3">
......@@ -950,7 +1109,7 @@
<div class="field-file__help-text">Отображение выбранного файла(ов) требует Javascript-а. Стилизация — не требует.</div>
</label>
</div>
<div class="field-file" style="font-size: 24px">
<div class="field-file" style="font-size:1.5em">
<div class="field-file__name">Увеличен font-size родителя</div>
<label class="field-file__input-wrap">
<input class="field-file__input" type="file" data-multiple-caption="файлов выбрано: {count}" multiple>
......
src/less/style.less
View file @ 1cafad9a
......@@ -13,8 +13,12 @@
@import './src/blocks/btn/btn.less';
@import './src/blocks/table-responsive/table-responsive.less';
@import './src/blocks/field-text/field-text.less';
@import './src/blocks/field-text/field-text--lg.less';
@import './src/blocks/field-text/field-text--sm.less';
@import './src/blocks/field-checkbox/field-checkbox.less';
@import './src/blocks/field-checkbox/field-checkbox--custom.less';
@import './src/blocks/field-checkbox/field-checkbox--lg.less';
@import './src/blocks/field-checkbox/field-checkbox--sm.less';
@import './src/blocks/field-radio/field-radio.less';
@import './src/blocks/field-radio/field-radio--custom.less';
@import './src/blocks/field-select/field-select.less';
......
src/less/variables.less
View file @ 1cafad9a
......@@ -27,16 +27,17 @@
// Базовая типографика (Mobile: 1 rem = 10px)
// Базовая типографика (<=479: 1 rem = 8px, >=480: 1rem = 10px)
// Для лёгкого пересчёта: http://pxtoem.com/
@font-size: 1.6rem;
@font-size--h1: 3.6rem;
@font-size--h2: 3rem;
@font-size--h3: 2.4rem;
@font-size--h4: 2.0rem;
@font-size--h5: 1.6rem;
@font-size--h6: 1.6rem;
@font-size--small: round((@font-size / 100 * @font-size--small-percent), 2);
@font-size--h1: 2.250em; // 3.6rem;
@font-size--h2: 1.875em; // 3rem;
@font-size--h3: 1.500em; // 2.4rem;
@font-size--h4: 1.250em; // 2.0rem;
@font-size--h5: 1em; // 1.6rem
@font-size--h6: 1em; // 1.6rem
@font-size--small: 0.75em;
@font-size--small-percent: 75%;
@line-height: 1.375em;
......
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