Skip to content

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

fields range and file

parent 80c5e5b7
Show whitespace changes
Inline Side-by-side
Showing with 111 additions and 10 deletions
src/blocks/field-file/field-file--lg.less 0 → 100644
View file @ 1b4402c5
@import '../../less/variables.less'; // только для удобства обращения к переменным
.field-file {
&--lg {
font-size: @font-size--h3;
}
}
src/blocks/field-file/field-file--sm.less 0 → 100644
View file @ 1b4402c5
@import '../../less/variables.less'; // только для удобства обращения к переменным
.field-file {
&--sm {
font-size: @font-size--small;
}
}
src/blocks/field-range/field-range--lg.less 0 → 100644
View file @ 1b4402c5
@import '../../less/variables.less'; // только для удобства обращения к переменным
.field-range {
&--lg {
font-size: @font-size--h3;
}
}
src/blocks/field-range/field-range--sm.less 0 → 100644
View file @ 1b4402c5
@import '../../less/variables.less'; // только для удобства обращения к переменным
.field-range {
&--sm {
font-size: @font-size--small;
}
}
src/blocks_library.html
View file @ 1b4402c5
...@@ -1203,13 +1203,24 @@ ...@@ -1203,13 +1203,24 @@
<section class="blocks-library__item" id="field-range" data-name=".field-range"> <section class="blocks-library__item" id="field-range" data-name=".field-range">
<div class="row">
<div class="col-md-6">
<div class="field-range"> <div class="field-range">
<div class="field-range__name">Range</div> <div class="field-range__name">Range</div>
<div class="field-range__input-wrap"> <div class="field-range__input-wrap">
<input class="field-range__input" type="range" min="1" max="100" step="1" value="70"> <input class="field-range__input" type="range" min="1" max="100" step="1" value="70">
<div class="field-range__help-text"><code>min="1" max="100" step="1" value="70"</code>, стилизован без JS.</div> <div class="field-range__help-text"><code>min="1" max="100" step="1" value="70"</code></div>
</div>
</div>
<div class="field-range">
<div class="field-range__name">Range</div>
<div class="field-range__input-wrap">
<input class="field-range__input" type="range" min="20" max="100" step="10" value="20">
<div class="field-range__help-text"><code>min="20" max="100" step="10" value="20"</code></div>
</div> </div>
</div> </div>
</div>
<div class="col-md-6">
<div class="field-range" style="font-size:1.5em"> <div class="field-range" style="font-size:1.5em">
<div class="field-range__name">Увеличен font-size родителя</div> <div class="field-range__name">Увеличен font-size родителя</div>
<div class="field-range__input-wrap"> <div class="field-range__input-wrap">
...@@ -1217,6 +1228,30 @@ ...@@ -1217,6 +1228,30 @@
<div class="field-range__help-text"><code>min="1" max="30" step="1" value="3"</code>, стилизован без JS.</div> <div class="field-range__help-text"><code>min="1" max="30" step="1" value="3"</code>, стилизован без JS.</div>
</div> </div>
</div> </div>
</div>
</div>
<div class="blocks-library__sub-item">
<b class="blocks-library__sub-item-title"><code>.field-range.field-range--lg</code> (отдельный less-файл)</b>
<p>Размер изменён благодаря модификатору. Модификатор меняет <code>font-size</code> блока в <code>em</code>-ах (реальный размер блока продолжает зависеть от размера шрифта родителя).</p>
<div class="field-range field-range--lg">
<div class="field-range__name">Range</div>
<div class="field-range__input-wrap">
<input class="field-range__input" type="range" min="1" max="30" step="1" value="3">
<div class="field-range__help-text"><code>min="1" max="30" step="1" value="3"</code>, стилизован без JS.</div>
</div>
</div>
</div>
<div class="blocks-library__sub-item">
<b class="blocks-library__sub-item-title"><code>.field-range.field-range--sm</code> (отдельный less-файл)</b>
<p>Размер изменён благодаря модификатору. Модификатор меняет <code>font-size</code> блока в <code>em</code>-ах (реальный размер блока продолжает зависеть от размера шрифта родителя).</p>
<div class="field-range field-range--sm">
<div class="field-range__name">Range</div>
<div class="field-range__input-wrap">
<input class="field-range__input" type="range" min="1" max="30" step="1" value="3">
<div class="field-range__help-text"><code>min="1" max="30" step="1" value="3"</code>, стилизован без JS.</div>
</div>
</div>
</div>
</section> </section>
...@@ -1238,6 +1273,30 @@ ...@@ -1238,6 +1273,30 @@
<div class="field-file__help-text">Отображение выбранного файла(ов) требует Javascript-а. Стилизация — не требует.</div> <div class="field-file__help-text">Отображение выбранного файла(ов) требует Javascript-а. Стилизация — не требует.</div>
</label> </label>
</div> </div>
<div class="blocks-library__sub-item">
<b class="blocks-library__sub-item-title"><code>.field-file.field-file--lg</code> (отдельный less-файл)</b>
<p>Размер изменён благодаря модификатору. Модификатор меняет <code>font-size</code> блока в <code>em</code>-ах (реальный размер блока продолжает зависеть от размера шрифта родителя).</p>
<div class="field-file field-file--lg">
<div class="field-file__name">Выбор файлов</div>
<label class="field-file__input-wrap">
<input class="field-file__input" type="file" data-multiple-caption="файлов выбрано: {count}" multiple>
<div class="field-file__name-text" data-button-text="Выбрать файл(ы)">Ничего не выбрано</div>
<div class="field-file__help-text">Отображение выбранного файла(ов) требует Javascript-а. Стилизация — не требует.</div>
</label>
</div>
</div>
<div class="blocks-library__sub-item">
<b class="blocks-library__sub-item-title"><code>.field-file.field-file--sm</code> (отдельный less-файл)</b>
<p>Размер изменён благодаря модификатору. Модификатор меняет <code>font-size</code> блока в <code>em</code>-ах (реальный размер блока продолжает зависеть от размера шрифта родителя).</p>
<div class="field-file field-file--sm">
<div class="field-file__name">Выбор файлов</div>
<label class="field-file__input-wrap">
<input class="field-file__input" type="file" data-multiple-caption="файлов выбрано: {count}" multiple>
<div class="field-file__name-text" data-button-text="Выбрать файл(ы)">Ничего не выбрано</div>
<div class="field-file__help-text">Отображение выбранного файла(ов) требует Javascript-а. Стилизация — не требует.</div>
</label>
</div>
</div>
</section> </section>
......
src/less/style.less
View file @ 1b4402c5
...@@ -27,7 +27,11 @@ ...@@ -27,7 +27,11 @@
@import './src/blocks/field-select/field-select--lg.less'; @import './src/blocks/field-select/field-select--lg.less';
@import './src/blocks/field-select/field-select--sm.less'; @import './src/blocks/field-select/field-select--sm.less';
@import './src/blocks/field-range/field-range.less'; @import './src/blocks/field-range/field-range.less';
@import './src/blocks/field-range/field-range--lg.less';
@import './src/blocks/field-range/field-range--sm.less';
@import './src/blocks/field-file/field-file.less'; @import './src/blocks/field-file/field-file.less';
@import './src/blocks/field-file/field-file--lg.less';
@import './src/blocks/field-file/field-file--sm.less';
@import './src/blocks/field-actions/field-actions.less'; @import './src/blocks/field-actions/field-actions.less';
@import './src/blocks/form/form.less'; @import './src/blocks/form/form.less';
@import './src/blocks/form/form--horizontal.less'; @import './src/blocks/form/form--horizontal.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