270 lines
6.2 KiB
SCSS
270 lines
6.2 KiB
SCSS
|
$slider-background-color: rgb(200, 200, 200) !default;
|
||
|
$slider-height: 48px !default;
|
||
|
|
||
|
$slider-track-height: 2px !default;
|
||
|
$slider-thumb-width: 32px !default;
|
||
|
$slider-thumb-height: $slider-thumb-width !default;
|
||
|
|
||
|
$slider-thumb-default-scale: 0.5 !default;
|
||
|
$slider-thumb-hover-scale: 0.6 !default;
|
||
|
$slider-thumb-focus-scale: 0.85 !default;
|
||
|
$slider-thumb-disabled-scale: 0.35 !default;
|
||
|
$slider-thumb-disabled-border: 6px !default;
|
||
|
|
||
|
$slider-focus-thumb-width: 48px !default;
|
||
|
$slider-focus-thumb-height: $slider-focus-thumb-width !default;
|
||
|
$slider-focus-ring-border-width: 3px !default;
|
||
|
|
||
|
$slider-arrow-height: 16px !default;
|
||
|
$slider-arrow-width: 28px !default;
|
||
|
|
||
|
$slider-sign-height: 28px !default;
|
||
|
$slider-sign-width: 28px !default;
|
||
|
$slider-sign-top: ($slider-height / 2) - ($slider-thumb-default-scale * $slider-thumb-height / 2) - ($slider-sign-height) - ($slider-arrow-height) + 8px !default;
|
||
|
|
||
|
@keyframes sliderFocusThumb {
|
||
|
0% {
|
||
|
opacity: 0;
|
||
|
transform: scale(0.0);
|
||
|
}
|
||
|
50% {
|
||
|
transform: scale(1.0);
|
||
|
opacity: 1;
|
||
|
}
|
||
|
100% {
|
||
|
opacity: 0;
|
||
|
}
|
||
|
}
|
||
|
|
||
|
@mixin slider-thumb-position($width: $slider-thumb-width, $height: $slider-thumb-height) {
|
||
|
position: absolute;
|
||
|
left: -$width / 2;
|
||
|
top: ($slider-height / 2) - ($height / 2);
|
||
|
width: $width;
|
||
|
height: $height;
|
||
|
border-radius: max($width, $height);
|
||
|
}
|
||
|
|
||
|
md-slider {
|
||
|
|
||
|
height: $slider-height;
|
||
|
position: relative;
|
||
|
display: block;
|
||
|
margin-left: 4px;
|
||
|
margin-right: 4px;
|
||
|
|
||
|
/**
|
||
|
* Track
|
||
|
*/
|
||
|
.md-track-container {
|
||
|
width: 100%;
|
||
|
position: absolute;
|
||
|
top: ($slider-height / 2) - ($slider-track-height) / 2;
|
||
|
height: $slider-track-height;
|
||
|
}
|
||
|
.md-track {
|
||
|
position: absolute;
|
||
|
left: 0;
|
||
|
right: 0;
|
||
|
height: 100%;
|
||
|
}
|
||
|
.md-track-fill {
|
||
|
transition: width 0.05s linear;
|
||
|
}
|
||
|
.md-track-ticks {
|
||
|
position: absolute;
|
||
|
left: 0;
|
||
|
right: 0;
|
||
|
height: 100%;
|
||
|
}
|
||
|
|
||
|
/**
|
||
|
* Slider thumb
|
||
|
*/
|
||
|
.md-thumb-container {
|
||
|
position: absolute;
|
||
|
left: 0;
|
||
|
top: 0;
|
||
|
transform: translate3d(0,0,0);
|
||
|
transition: transform 0.1s linear;
|
||
|
}
|
||
|
.md-thumb {
|
||
|
z-index: 1;
|
||
|
|
||
|
// Positioning the outer area of the thumb 6px bigger than it needs to be keeps
|
||
|
// the :after area being clipped by the background of the focus-thumb animation.
|
||
|
@include slider-thumb-position($slider-thumb-width + 6, $slider-thumb-height + 6);
|
||
|
|
||
|
// We render thumb in an :after selector to fix an obscure problem with the
|
||
|
// thumb being clipped by the focus-ring and focus-thumb while running the focus
|
||
|
// animation.
|
||
|
&:after {
|
||
|
content: '';
|
||
|
position: absolute;
|
||
|
left: 3px;
|
||
|
top: 3px;
|
||
|
width: $slider-thumb-width;
|
||
|
height: $slider-thumb-height;
|
||
|
border-radius: max($slider-thumb-width, $slider-thumb-height);
|
||
|
border: 3px solid;
|
||
|
}
|
||
|
|
||
|
transform: scale($slider-thumb-default-scale);
|
||
|
transition: all 0.1s linear;
|
||
|
}
|
||
|
|
||
|
/* The sign that's focused in discrete mode */
|
||
|
.md-sign {
|
||
|
|
||
|
/* Center the children (slider-thumb-text) */
|
||
|
display: flex;
|
||
|
align-items: center;
|
||
|
justify-content: center;
|
||
|
|
||
|
position: absolute;
|
||
|
left: -($slider-sign-height / 2);
|
||
|
top: $slider-sign-top;
|
||
|
width: $slider-sign-width;
|
||
|
height: $slider-sign-height;
|
||
|
border-radius: max($slider-sign-height, $slider-sign-width);
|
||
|
|
||
|
transform: scale(0.4) translate3d(0,(-$slider-sign-top + 8) / 0.4,0);
|
||
|
transition: all 0.2s ease-in-out;
|
||
|
|
||
|
/* The arrow pointing down under the sign */
|
||
|
&:after {
|
||
|
position: absolute;
|
||
|
content: '';
|
||
|
left: -($slider-sign-width / 2 - $slider-arrow-width / 2);
|
||
|
border-radius: $slider-arrow-height;
|
||
|
top: 19px;
|
||
|
border-left: $slider-arrow-width / 2 solid transparent;
|
||
|
border-right: $slider-arrow-width / 2 solid transparent;
|
||
|
border-top: $slider-arrow-height solid;
|
||
|
|
||
|
opacity: 0;
|
||
|
transform: translate3d(0,-8px,0);
|
||
|
transition: all 0.2s ease-in-out;
|
||
|
}
|
||
|
|
||
|
.md-thumb-text {
|
||
|
z-index: 1;
|
||
|
font-size: 12px;
|
||
|
font-weight: bold;
|
||
|
}
|
||
|
}
|
||
|
|
||
|
/**
|
||
|
* The border/background that comes in when focused in non-discrete mode
|
||
|
*/
|
||
|
.md-focus-thumb {
|
||
|
@include slider-thumb-position($slider-focus-thumb-width, $slider-focus-thumb-height);
|
||
|
display: none;
|
||
|
opacity: 0;
|
||
|
background-color: #C0C0C0;
|
||
|
animation: sliderFocusThumb 0.4s linear;
|
||
|
}
|
||
|
.md-focus-ring {
|
||
|
@include slider-thumb-position($slider-focus-thumb-width, $slider-focus-thumb-height);
|
||
|
border: 2px solid #D6D6D6;
|
||
|
background-color: transparent;
|
||
|
transform: scale(0);
|
||
|
transition: all 0.2s linear;
|
||
|
}
|
||
|
.md-disabled-thumb {
|
||
|
@include slider-thumb-position(
|
||
|
$slider-thumb-width + $slider-thumb-disabled-border * 2,
|
||
|
$slider-thumb-height + $slider-thumb-disabled-border * 2
|
||
|
);
|
||
|
transform: scale($slider-thumb-disabled-scale);
|
||
|
border: $slider-thumb-disabled-border solid;
|
||
|
display: none;
|
||
|
}
|
||
|
|
||
|
&.md-min {
|
||
|
.md-thumb {
|
||
|
&:after {
|
||
|
background-color: white;
|
||
|
}
|
||
|
}
|
||
|
.md-sign {
|
||
|
opacity: 0;
|
||
|
}
|
||
|
}
|
||
|
|
||
|
&:focus {
|
||
|
outline: none;
|
||
|
}
|
||
|
|
||
|
/* Don't animate left/right while panning */
|
||
|
&.panning {
|
||
|
.md-thumb-container,
|
||
|
.md-track-fill {
|
||
|
transition: none;
|
||
|
}
|
||
|
}
|
||
|
|
||
|
&:not([md-discrete]) {
|
||
|
/* Hide the sign and ticks in non-discrete mode */
|
||
|
.md-track-ticks,
|
||
|
.md-sign {
|
||
|
display: none;
|
||
|
}
|
||
|
|
||
|
&:not([disabled]) {
|
||
|
&:hover {
|
||
|
.md-thumb {
|
||
|
transform: scale($slider-thumb-hover-scale);
|
||
|
}
|
||
|
}
|
||
|
|
||
|
&:focus,
|
||
|
&.active {
|
||
|
.md-focus-thumb {
|
||
|
display: block;
|
||
|
}
|
||
|
.md-focus-ring {
|
||
|
transform: scale(1);
|
||
|
}
|
||
|
.md-thumb {
|
||
|
transform: scale($slider-thumb-focus-scale);
|
||
|
}
|
||
|
}
|
||
|
}
|
||
|
}
|
||
|
|
||
|
&[md-discrete] {
|
||
|
/* Hide the focus thumb in discrete mode */
|
||
|
.md-focus-thumb,
|
||
|
.md-focus-ring {
|
||
|
display: none;
|
||
|
}
|
||
|
|
||
|
&:not([disabled]) {
|
||
|
&:focus,
|
||
|
&.active {
|
||
|
.md-sign,
|
||
|
.md-sign:after {
|
||
|
opacity: 1;
|
||
|
transform: translate3d(0,0,0) scale(1.0);
|
||
|
}
|
||
|
}
|
||
|
}
|
||
|
}
|
||
|
|
||
|
&[disabled] {
|
||
|
.md-track-fill {
|
||
|
display: none;
|
||
|
}
|
||
|
.md-sign {
|
||
|
display: none;
|
||
|
}
|
||
|
.md-thumb {
|
||
|
transform: scale($slider-thumb-disabled-scale);
|
||
|
}
|
||
|
.md-disabled-thumb {
|
||
|
display: block;
|
||
|
}
|
||
|
}
|
||
|
}
|