Skip to content

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

Добавил field-range

parent 9e19c93b
Show whitespace changes
Inline Side-by-side
Showing with 67 additions and 66 deletions
package.json
View file @ 0ff0748e
...@@ -30,6 +30,7 @@ ...@@ -30,6 +30,7 @@
"field-checkbox": [], "field-checkbox": [],
"field-radio": [], "field-radio": [],
"field-file": [], "field-file": [],
"field-range": [],
"field-actions": [], "field-actions": [],
"dropdown": [], "dropdown": [],
"menu": [] "menu": []
......
src/blocks-demo.html
View file @ 0ff0748e
...@@ -990,6 +990,35 @@ ...@@ -990,6 +990,35 @@
</section> </section>
<section class="blocks-library__item" id="field-range" data-name=".field-range">
<h2 class="blocks-library__item-title">Range</h2>
<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>, стилизован без JS.</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 class="code">
<code>&lt;div class="field-range"></code>
<code> &lt;div class="field-range__name">Range&lt;/div></code>
<code> &lt;div class="field-range__input-wrap"></code>
<code> &lt;input class="field-range__input" type="range" min="1" max="100" step="1" value="70"></code>
<code> &lt;div class="field-range__help-text">&lt;code>min="1" max="100" step="1" value="70"&lt;/code>&lt;/div></code>
<code> &lt;/div></code>
<code>&lt;/div></code>
</pre>
</div>
</div>
</section>
<section class="blocks-library__item" id="field-actions" data-name=".field-actions"> <section class="blocks-library__item" id="field-actions" data-name=".field-actions">
<h2 class="blocks-library__item-title">Блок отправки формы</h2> <h2 class="blocks-library__item-title">Блок отправки формы</h2>
......
src/blocks/field-checkbox/field-checkbox.scss
View file @ 0ff0748e
...@@ -57,6 +57,11 @@ $line-height: 1.375em !default; ...@@ -57,6 +57,11 @@ $line-height: 1.375em !default;
margin: 0; margin: 0;
transform: translateY(-50%); transform: translateY(-50%);
&:focus,
&:active {
@include field-focus;
}
// сокрытие инпута в случае использования своего чекбокса // сокрытие инпута в случае использования своего чекбокса
// top: 0; // top: 0;
// left: 0; // left: 0;
......
src/blocks/field-radio/field-radio.scss
View file @ 0ff0748e
...@@ -57,6 +57,11 @@ $line-height: 1.375em !default; ...@@ -57,6 +57,11 @@ $line-height: 1.375em !default;
margin: 0; margin: 0;
transform: translateY(-50%); transform: translateY(-50%);
&:focus,
&:active {
@include field-focus;
}
// сокрытие инпута в случае использования своего чекбокса // сокрытие инпута в случае использования своего чекбокса
// top: 0; // top: 0;
// left: 0; // left: 0;
......
src/blocks/field-range/field-range.less → src/blocks/field-range/field-range.scss
View file @ 0ff0748e
@import '../../less/variables.less'; // только для удобства обращения к переменным // В этом файле должны быть стили только для БЭМ-блока field-range, его элементов,
// модификаторов, псевдоселекторов, псевдоэлементов, $media-условий...
// Не пишите здесь другие селекторы.
$gray-lightest: hsl(0, 0%, 90%);
$border-color: hsl(0, 0%, 60%) !default;
$line-height: 1.375em !default;
$border-radius: 3px !default;
.field-range { .field-range {
display: block; display: block;
margin-bottom: (@line-height / 2); margin-bottom: ($line-height / 2);
&__name { &__name {
font-weight: 700; font-weight: 700;
display: block; display: block;
margin-bottom: round(@line-height / 4, 2); margin-bottom: 0.4em;
line-height: @line-height; line-height: $line-height;
} }
&__input-wrap { &__input-wrap {
...@@ -34,8 +42,7 @@ ...@@ -34,8 +42,7 @@
} }
&:focus { &:focus {
outline: 0; @include field-focus;
box-shadow: 0 0 0 2px rgba(2, 117, 216, 0.3);
} }
...@@ -43,26 +50,26 @@ ...@@ -43,26 +50,26 @@
// Фоновая линия ползунка // Фоновая линия ползунка
// Да, да, и это — локальная примесь. // Да, да, и это — локальная примесь.
.field-range-runnable-track() { @mixin field-range-runnable-track {
box-sizing: border-box; box-sizing: border-box;
width: 100%; width: 100%;
height: 0.75em; height: 0.75em;
border-radius: @border-radius; border-radius: $border-radius;
background: @gray-lighter; background: #fff;
border: 1px solid @border-color; border: 1px solid $border-color;
} }
// Увы, тут похожие наборы свойств приходится писать порознь. // Увы, тут похожие наборы свойств приходится писать порознь.
&::-webkit-slider-runnable-track { &::-webkit-slider-runnable-track {
.field-range-runnable-track(); // локальная примесь! @include field-range-runnable-track;
} }
&::-moz-range-track { &::-moz-range-track {
.field-range-runnable-track(); // локальная примесь! @include field-range-runnable-track;
} }
&::-ms-track { &::-ms-track {
.field-range-runnable-track(); // локальная примесь! @include field-range-runnable-track;
color: transparent; color: transparent;
} }
...@@ -70,7 +77,7 @@ ...@@ -70,7 +77,7 @@
// Смещающийся элемент ползунка // Смещающийся элемент ползунка
// Да, да, и это — локальная примесь. // Да, да, и это — локальная примесь.
.field-range-slider-thumb() { @mixin field-range-slider-thumb {
box-sizing: border-box; box-sizing: border-box;
padding: 0; padding: 0;
width: 2em; width: 2em;
...@@ -78,21 +85,21 @@ ...@@ -78,21 +85,21 @@
border-radius: 1em; border-radius: 1em;
box-shadow: none; box-shadow: none;
cursor: ew-resize; cursor: ew-resize;
background: @gray-lightest; background: $gray-lightest;
border: 1px solid @border-color; border: 1px solid $border-color;
} }
&::-webkit-slider-thumb { &::-webkit-slider-thumb {
margin-top: -0.68em; margin-top: -0.68em;
.field-range-slider-thumb(); // локальная примесь! @include field-range-slider-thumb; // локальная примесь!
} }
&::-moz-range-thumb { &::-moz-range-thumb {
.field-range-slider-thumb(); // локальная примесь! @include field-range-slider-thumb; // локальная примесь!
} }
&::-ms-thumb { &::-ms-thumb {
.field-range-slider-thumb(); // локальная примесь! @include field-range-slider-thumb; // локальная примесь!
} }
&::-ms-fill-lower, &::-ms-fill-lower,
...@@ -102,7 +109,7 @@ ...@@ -102,7 +109,7 @@
} }
&__help-text { &__help-text {
.help-text(); @include field-help-text;
padding-top: 0; padding-top: 0;
} }
} }
......
src/blocks/field-range/field-range__line.less deleted 100644 → 0
View file @ 9e19c93b
// Для импорта в диспетчер подключений: @import './src/blocks/field-range/field-range.less';range
@import '../../less/variables.less'; // только для удобства обращения к переменным
.field-range {
&__line {
position: relative;
margin-left: e('calc(1em + 1px)');
margin-right: e('calc(1em + 1px)');
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;
}
}
}
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