Skip to content

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

Добавил возможность линейки для input[type='range']

parent ae8885d4
Hide whitespace changes
Inline Side-by-side
Showing with 185 additions and 57 deletions
src/blocks/field-range/field-range.less
View file @ ed3a62ee
...@@ -37,86 +37,107 @@ ...@@ -37,86 +37,107 @@
box-shadow: 0 0 0 2px rgba(2, 117, 216, 0.3); box-shadow: 0 0 0 2px rgba(2, 117, 216, 0.3);
} }
// Да, да, это — локальная примесь для трёх нижеследующих правил.
.field-range-track() {
// Фоновая линия ползунка
// Да, да, и это — локальная примесь.
.field-range-runnable-track() {
box-sizing: border-box; box-sizing: border-box;
border: 0; border: 0;
width: 100%; width: 100%;
height: 0.75em; height: 0.75em;
border-radius: @border-radius; border-radius: @border-radius;
background: @gray-lighter;
border: 1px solid @border-color;
} }
// Увы, тут похожие наборы свойств приходится писать порознь. // Увы, тут похожие наборы свойств приходится писать порознь.
&::-webkit-slider-runnable-track { &::-webkit-slider-runnable-track {
.field-range-track(); // локальная примесь! .field-range-runnable-track(); // локальная примесь!
} }
&::-moz-range-track { &::-moz-range-track {
.field-range-track(); // локальная примесь! .field-range-runnable-track(); // локальная примесь!
} }
&::-ms-track { &::-ms-track {
.field-range-track(); // локальная примесь! .field-range-runnable-track(); // локальная примесь!
color: transparent; color: transparent;
} }
// Смещающийся элемент ползунка
// Да, да, и это — локальная примесь. // Да, да, и это — локальная примесь.
.field-range-thumb() { .field-range-slider-thumb() {
box-sizing: border-box; box-sizing: border-box;
border: 0; border: 0;
padding: 0; padding: 0;
width: 2em; width: 2em;
height: 2em; height: 2em;
border-radius: @border-radius; border-radius: 1em;
box-shadow: none; box-shadow: none;
cursor: ew-resize; cursor: ew-resize;
background: @gray-lightest;
border: 1px solid @border-color;
} }
// Увы, тут похожие наборы свойств приходится писать порознь.
&::-webkit-slider-thumb { &::-webkit-slider-thumb {
margin-top: -0.68em; margin-top: -0.68em;
.field-range-thumb(); // локальная примесь! .field-range-slider-thumb(); // локальная примесь!
} }
&::-moz-range-thumb { &::-moz-range-thumb {
.field-range-thumb(); // локальная примесь! .field-range-slider-thumb(); // локальная примесь!
} }
&::-ms-thumb { &::-ms-thumb {
.field-range-thumb(); // локальная примесь! .field-range-slider-thumb(); // локальная примесь!
} }
&::-ms-fill-lower, &::-ms-fill-lower,
&::-ms-tooltip { &::-ms-tooltip {
display: none; display: none;
} }
}
// Да, да, и это — локальная примесь. &__help-text {
.field-range-runnable-track() { .help-text();
background: @gray-lighter; }
border: 1px solid @border-color;
}
// Увы, тут похожие наборы свойств приходится писать порознь. &__line {
&::-webkit-slider-runnable-track { position: relative;
.field-range-runnable-track(); // локальная примесь! margin-left: 1.1em;
} margin-right: 1.1em;
&::-moz-range-track { display: flex;
.field-range-runnable-track(); // локальная примесь! justify-content: space-between;
} }
&::-ms-track {
.field-range-runnable-track(); // локальная примесь!
}
&::-webkit-slider-thumb { &__line-item {
.field-range-runnable-track(); // локальная примесь! position: relative;
} display: block;
&::-moz-range-thumb { border-right: 1px solid @border-color;
.field-range-runnable-track(); // локальная примесь! color: @border-color;
} flex-grow: 1;
&::-ms-thumb { flex-basis: 0;
.field-range-runnable-track(); // локальная примесь! max-width: 100%;
text-align: right;
padding-top: 0.7em;
margin-top: 1em;
&:before {
content: attr(data-line-value);
position: absolute;
right: 0;
transform: translateX(50%);
bottom: e("calc(100% + 0.3em)");
font-size: @font-size--small;
line-height: 1;
white-space: nowrap;
}
&:first-child {
position: absolute;
left: 0;
bottom: 0;
} }
}
&__help-text {
.help-text();
} }
} }
src/blocks/field-range/field-range__line.less 0 → 100644
View file @ ed3a62ee
@import '../../less/variables.less'; // только для удобства обращения к переменным
.field-range {
&__line {
position: relative;
margin-left: 1.1em;
margin-right: 1.1em;
display: flex;
justify-content: space-between;
}
&__line-item {
position: relative;
display: block;
border-right: 1px solid @border-color;
color: @border-color;
flex-grow: 1;
flex-basis: 0;
max-width: 100%;
text-align: right;
padding-top: 0.7em;
margin-top: 1em;
&:before {
content: attr(data-line-value);
position: absolute;
right: 0;
transform: translateX(50%);
bottom: e("calc(100% + 0.3em)");
font-size: @font-size--small;
line-height: 1;
white-space: nowrap;
}
&:first-child {
position: absolute;
left: 0;
bottom: 0;
}
}
}
src/blocks_library.html
View file @ ed3a62ee
...@@ -2524,33 +2524,89 @@ ...@@ -2524,33 +2524,89 @@
<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"> <h1 class="blocks-library__item-title">Диапазон</h1>
<div class="field-range">
<div class="field-range__name">Range</div> <p>Стилизуется без JS. Подстраивается под размер шрифта родителя. Кроссбраузерность: Firefox 23+, Safari 4+, iOS 5+, Chrome 6+, Opera 11+, IE 10+, Android 4.2+</p>
<div class="field-range__input-wrap">
<input class="field-range__input" type="range" min="1" max="100" step="1" value="70"> <div class="js-font-resizer">
<div class="field-range__help-text"><code>min="1" max="100" step="1" value="70"</code></div> <div class="row">
<div class="col-md-6">
<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="1" max="100" step="1" value="70">
<div class="field-range__help-text"><code>min="1" max="100" step="1" value="70"</code>.</div>
</div>
</div> </div>
</div> </div>
<div class="field-range"> <div class="col-md-12">
<div class="field-range__name">Range</div> <div class="field-range">
<div class="field-range__input-wrap"> <div class="field-range__name">Range</div>
<input class="field-range__input" type="range" min="20" max="100" step="10" value="20"> <div class="field-range__input-wrap">
<div class="field-range__help-text"><code>min="20" max="100" step="10" value="20"</code></div> <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> </div>
<div class="col-md-6"> </div>
<div class="field-range" style="font-size:1.5em"> <div class="blocks-library__code-wrapper">
<div class="field-range__name">Увеличен font-size родителя</div> <span class="blocks-library__code-show-trigger" title="Показать код"><i class="blocks-library__code-icon"></i></span>
<div class="field-range__input-wrap"> <div class="blocks-library__code">
<input class="field-range__input" type="range" min="1" max="30" step="1" value="3"> <pre>
<div class="field-range__help-text"><code>min="1" max="30" step="1" value="3"</code>, стилизован без JS.</div> <code class="html">&lt;div class=&quot;field-range&quot;&gt;</code>
<code class="html"> &lt;div class=&quot;field-range__name&quot;&gt;Range&lt;/div&gt;</code>
<code class="html"> &lt;div class=&quot;field-range__input-wrap&quot;&gt;</code>
<code class="html"> &lt;input class=&quot;field-range__input&quot; type=&quot;range&quot; min=&quot;1&quot; max=&quot;100&quot; step=&quot;1&quot; value=&quot;70&quot;&gt;</code>
<code class="html"> &lt;div class=&quot;field-range__help-text&quot;&gt;Необязательное пояснение.&lt;/div&gt;</code>
<code class="html"> &lt;/div&gt;</code>
<code class="html">&lt;/div&gt;</code>
</pre>
</div>
</div>
<div class="blocks-library__sub-item">
<h2 class="blocks-library__sub-item-title">С дополнительным элементом-линейкой</h2>
<p>Стилизация дополнительного элемента-линейки — отдельный less-файл.</p>
<p class="alert alert--danger">Чтобы двигающийся элемент чётко попадал в линейку, шал элемента должен быть достаточно мелким и/или линейка должна быть достаточно частой.</p>
<div class="field-range">
<div class="field-range__name">Range</div>
<div class="field-range__input-wrap">
<div class="field-range__line">
<span class="field-range__line-item" data-line-value="0%"></span>
<span class="field-range__line-item" data-line-value="25%"></span>
<span class="field-range__line-item" data-line-value="50%"></span>
<span class="field-range__line-item" data-line-value="75%"></span>
<span class="field-range__line-item" data-line-value="100%"></span>
</div> </div>
<input class="field-range__input" type="range" min="1" max="1000" value="500">
<div class="field-range__help-text">Линейка добавляется вставкой в разметку дополнительных тегов. Текстовые значения берутся из data-атрибутов.<br>Первый элемент линейки позиционируется абсолютно (не вызывает увеличения длины шкалы). <br>Не первые элементы линейки распределяются равномерно, занимают одинаковое количество места в «строке».</div>
</div>
</div>
<div class="blocks-library__code-wrapper">
<span class="blocks-library__code-show-trigger" title="Показать код"><i class="blocks-library__code-icon"></i></span>
<div class="blocks-library__code">
<pre>
<code class="html">&lt;div class=&quot;field-range&quot;&gt;</code>
<code class="html"> &lt;div class=&quot;field-range__name&quot;&gt;Range&lt;/div&gt;</code>
<code class="html"> &lt;div class=&quot;field-range__input-wrap&quot;&gt;</code>
<code class="html"> &lt;div class=&quot;field-range__line&quot;&gt;</code>
<code class="html"> &lt;span class=&quot;field-range__line-item&quot; data-line-value=&quot;0%&quot;&gt;&lt;/span&gt;</code>
<code class="html"> &lt;span class=&quot;field-range__line-item&quot; data-line-value=&quot;25%&quot;&gt;&lt;/span&gt;</code>
<code class="html"> &lt;span class=&quot;field-range__line-item&quot; data-line-value=&quot;50%&quot;&gt;&lt;/span&gt;</code>
<code class="html"> &lt;span class=&quot;field-range__line-item&quot; data-line-value=&quot;75%&quot;&gt;&lt;/span&gt;</code>
<code class="html"> &lt;span class=&quot;field-range__line-item&quot; data-line-value=&quot;100%&quot;&gt;&lt;/span&gt;</code>
<code class="html"> &lt;/div&gt;</code>
<code class="html"> &lt;input class=&quot;field-range__input&quot; type=&quot;range&quot; min=&quot;1&quot; max=&quot;100&quot; step=&quot;1&quot; value=&quot;70&quot;&gt;</code>
<code class="html"> &lt;div class=&quot;field-range__help-text&quot;&gt;Необязательное пояснение.&lt;/div&gt;</code>
<code class="html"> &lt;/div&gt;</code>
<code class="html">&lt;/div&gt;</code>
</pre>
</div> </div>
</div> </div>
</div> </div>
<div class="blocks-library__sub-item"> <div class="blocks-library__sub-item">
<b class="blocks-library__sub-item-title"><code>.field-range.field-range--lg</code> (отдельный less-файл)</b> <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> <p>Размер изменён благодаря модификатору. Модификатор меняет <code>font-size</code> блока в <code>em</code>-ах (реальный размер блока продолжает зависеть от размера шрифта родителя).</p>
......
src/less/global/global-forms.less
View file @ ed3a62ee
...@@ -41,7 +41,12 @@ html input[disabled] { ...@@ -41,7 +41,12 @@ html input[disabled] {
} }
input[type='search'] { input[type='search'] {
appearance: none; -webkit-appearance: textfield;
}
input[type="search"]::-webkit-search-cancel-button,
input[type="search"]::-webkit-search-decoration {
-webkit-appearance: none;
} }
input[type='checkbox'], input[type='checkbox'],
......
src/less/style.less
View file @ ed3a62ee
...@@ -39,6 +39,7 @@ ...@@ -39,6 +39,7 @@
@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--lg.less';
@import './src/blocks/field-range/field-range--sm.less'; @import './src/blocks/field-range/field-range--sm.less';
@import './src/blocks/field-range/field-range__line.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--lg.less';
@import './src/blocks/field-file/field-file--sm.less'; @import './src/blocks/field-file/field-file--sm.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