85 lines
1.8 KiB
SCSS
85 lines
1.8 KiB
SCSS
@import "variables";
|
|
|
|
@mixin range($thumb-selector, $track-selector) {
|
|
&::#{$thumb-selector} {
|
|
-webkit-appearance: none;
|
|
margin-top: -5px;
|
|
border-radius: 50%;
|
|
background: $color-button;
|
|
border: none;
|
|
height: 12px;
|
|
width: 12px;
|
|
border-radius: 50%;
|
|
transition-property: transform, box-shadow;
|
|
transition-duration: 250ms;
|
|
transition-timing-function: ease-out;
|
|
}
|
|
&:focus::#{$thumb-selector} {
|
|
box-shadow: 0 0 0 10px rgba($color-button, .2);
|
|
}
|
|
&:active::#{$thumb-selector} {
|
|
transform: scale(1.5);
|
|
box-shadow: none;
|
|
}
|
|
&:disabled::#{$thumb-selector} {
|
|
transform: none;
|
|
cursor: initial;
|
|
}
|
|
&::#{$track-selector} {
|
|
width: 100%;
|
|
height: 3px;
|
|
cursor: inherit;
|
|
background: $color-marginal;
|
|
border-radius: 2px;
|
|
border: none;
|
|
}
|
|
}
|
|
|
|
.vn-range {
|
|
& > label {
|
|
font-size: 12px;
|
|
|
|
&.main {
|
|
color: $color-button;
|
|
}
|
|
&.min-label {
|
|
float: left;
|
|
}
|
|
&.max-label {
|
|
float: right;
|
|
}
|
|
}
|
|
& > input {
|
|
cursor: pointer;
|
|
height: 30px;
|
|
display: block;
|
|
width: 100%;
|
|
background: transparent;
|
|
border-color: transparent;
|
|
-webkit-appearance: none;
|
|
margin: .2em 0;
|
|
|
|
&:focus {
|
|
outline: none;
|
|
}
|
|
&::-moz-focus-outer {
|
|
border: 0;
|
|
}
|
|
@include range(
|
|
"-moz-range-thumb",
|
|
"-moz-range-track"
|
|
);
|
|
@include range(
|
|
"-webkit-slider-thumb",
|
|
"-webkit-slider-runnable-track"
|
|
);
|
|
@include range(
|
|
"-ms-thumb",
|
|
"-ms-track"
|
|
);
|
|
&:disabled {
|
|
cursor: initial;
|
|
}
|
|
}
|
|
}
|