221 lines
4.7 KiB
SCSS
221 lines
4.7 KiB
SCSS
![]() |
@import "../variables";
|
||
|
|
||
|
$slider-main-color: unquote("rgb(#{$color-primary})") !default;
|
||
|
$slider-main-color-contrast: unquote("rgb(#{$color-primary-contrast})") !default;
|
||
|
$slider-snap-color: unquote("rgb(#{$color-black})") !default;
|
||
|
$slider-knob-size: 3.2 * $unit;
|
||
|
$slider-inner-knob-size: 1.2 * $unit;
|
||
|
$slider-snap-size: .2 * $unit;
|
||
|
$slider-input-width: 5 * $unit;
|
||
|
$slider-bar-height: .2 * $unit;
|
||
|
$slider-pin-size: 2.6 * $unit;
|
||
|
$slider-pin-elevation: 1.7 * $unit;
|
||
|
$slider-side-separation: 1 * $unit;
|
||
|
$slider-empty-knob-border: .2 * $unit;
|
||
|
|
||
|
.container {
|
||
|
position: relative;
|
||
|
width: calc(100% - #{$slider-knob-size});
|
||
|
height: $slider-knob-size;
|
||
|
margin-right: $slider-knob-size;
|
||
|
user-select: none;
|
||
|
|
||
|
&:not(:last-child) {
|
||
|
margin-right: $slider-side-separation + $slider-knob-size;
|
||
|
}
|
||
|
|
||
|
&:not(:first-child) {
|
||
|
margin-left: $slider-side-separation;
|
||
|
}
|
||
|
}
|
||
|
|
||
|
.knob {
|
||
|
position: relative;
|
||
|
top: 0;
|
||
|
left: 0;
|
||
|
z-index: $z-index-higher;
|
||
|
display: flex;
|
||
|
width: $slider-knob-size;
|
||
|
height: $slider-knob-size;
|
||
|
flex-direction: row;
|
||
|
background-color: transparent;
|
||
|
align-items: center;
|
||
|
justify-content: center;
|
||
|
}
|
||
|
|
||
|
.innerknob {
|
||
|
z-index: $z-index-high;
|
||
|
width: $slider-inner-knob-size;
|
||
|
height: $slider-inner-knob-size;
|
||
|
background-color: $slider-main-color;
|
||
|
border-radius: 50%;
|
||
|
transition-timing-function: $animation-curve-default;
|
||
|
transition-duration: .1s;
|
||
|
transition-property: height, width, background-color, border;
|
||
|
}
|
||
|
|
||
|
.snaps {
|
||
|
position: absolute;
|
||
|
top: $slider-knob-size / 2 - $slider-snap-size / 2;
|
||
|
left: 0;
|
||
|
display: flex;
|
||
|
width: calc(100% + #{$slider-snap-size});
|
||
|
height: $slider-snap-size;
|
||
|
flex-direction: row;
|
||
|
pointer-events: none;
|
||
|
|
||
|
&:after {
|
||
|
display: block;
|
||
|
width: $slider-snap-size;
|
||
|
height: $slider-snap-size;
|
||
|
content: "";
|
||
|
background-color: $slider-snap-color;
|
||
|
border-radius: 50%;
|
||
|
}
|
||
|
}
|
||
|
|
||
|
.snap {
|
||
|
flex: 1;
|
||
|
|
||
|
&:after {
|
||
|
display: block;
|
||
|
width: $slider-snap-size;
|
||
|
height: $slider-snap-size;
|
||
|
content: "";
|
||
|
background-color: $slider-snap-color;
|
||
|
border-radius: 50%;
|
||
|
}
|
||
|
}
|
||
|
|
||
|
.input {
|
||
|
width: $slider-input-width;
|
||
|
padding: 0;
|
||
|
margin-bottom: 0;
|
||
|
|
||
|
> input {
|
||
|
text-align: center;
|
||
|
}
|
||
|
}
|
||
|
|
||
|
.progress {
|
||
|
position: absolute;
|
||
|
top: 0;
|
||
|
left: $slider-knob-size / 2;
|
||
|
width: 100%;
|
||
|
height: 100%;
|
||
|
|
||
|
.innerprogress {
|
||
|
position: absolute;
|
||
|
top: $slider-knob-size / 2 - $slider-bar-height / 2;
|
||
|
height: $slider-bar-height;
|
||
|
|
||
|
[data-ref="value"] {
|
||
|
transition-duration: 0s;
|
||
|
}
|
||
|
}
|
||
|
}
|
||
|
|
||
|
.root:focus .knob:before {
|
||
|
position: absolute;
|
||
|
top: 0;
|
||
|
right: 0;
|
||
|
bottom: 0;
|
||
|
left: 0;
|
||
|
z-index: $z-index-normal;
|
||
|
content: "";
|
||
|
background-color: $slider-main-color;
|
||
|
border-radius: 50%;
|
||
|
opacity: .26;
|
||
|
}
|
||
|
|
||
|
.root.editable {
|
||
|
display: flex;
|
||
|
flex-direction: row;
|
||
|
align-items: center;
|
||
|
}
|
||
|
|
||
|
:local(.root).pinned :local(.innerknob) {
|
||
|
&:before {
|
||
|
position: absolute;
|
||
|
top: 0;
|
||
|
left: 0;
|
||
|
width: $slider-pin-size;
|
||
|
height: $slider-pin-size;
|
||
|
margin-left: ($slider-knob-size - $slider-pin-size) / 2;
|
||
|
content: "";
|
||
|
background-color: $slider-main-color;
|
||
|
border-radius: 50% 50% 50% 0;
|
||
|
transition: transform .2s ease, background-color .18s ease;
|
||
|
transform: rotate(-45deg) scale(0) translate(0);
|
||
|
}
|
||
|
|
||
|
&:after {
|
||
|
position: absolute;
|
||
|
top: 0;
|
||
|
left: 0;
|
||
|
width: $slider-knob-size;
|
||
|
height: $slider-pin-size;
|
||
|
font-size: 10px;
|
||
|
color: $color-background;
|
||
|
text-align: center;
|
||
|
content: attr(data-value);
|
||
|
transition: transform .2s ease, background-color .18s ease;
|
||
|
transform: scale(0) translate(0);
|
||
|
}
|
||
|
}
|
||
|
|
||
|
.root.pressed {
|
||
|
&.pinned .innerknob {
|
||
|
&:before {
|
||
|
transition-delay: 100ms;
|
||
|
transform: rotate(-45deg) scale(1) translate($slider-pin-elevation, - $slider-pin-elevation);
|
||
|
}
|
||
|
|
||
|
&:after {
|
||
|
transition-delay: 100ms;
|
||
|
transform: scale(1) translate(0, - $slider-pin-elevation);
|
||
|
}
|
||
|
}
|
||
|
|
||
|
&:not(.pinned) {
|
||
|
&.ring .progress {
|
||
|
left: $slider-knob-size / 2 + ($slider-knob-size - $slider-empty-knob-border * 2) / 2;
|
||
|
width: calc(100% - #{($slider-knob-size - $slider-empty-knob-border * 2) / 2});
|
||
|
}
|
||
|
|
||
|
.innerknob {
|
||
|
width: 100%;
|
||
|
height: 100%;
|
||
|
transform: translateZ(0);
|
||
|
}
|
||
|
}
|
||
|
}
|
||
|
|
||
|
.root.ring {
|
||
|
.innerknob {
|
||
|
background-color: transparent;
|
||
|
border: $slider-empty-knob-border solid $color-divider;
|
||
|
|
||
|
&:before {
|
||
|
background-color: $slider-main-color;
|
||
|
}
|
||
|
}
|
||
|
|
||
|
.progress {
|
||
|
left: $slider-knob-size / 2 + $slider-empty-knob-border * 2;
|
||
|
width: calc(100% - #{$slider-empty-knob-border * 2});
|
||
|
transition: left 0.18s ease, width 0.18s ease;
|
||
|
}
|
||
|
|
||
|
&.pinned {
|
||
|
.innerknob {
|
||
|
background-color: $color-background;
|
||
|
}
|
||
|
|
||
|
.progress {
|
||
|
left: $slider-knob-size / 2;
|
||
|
width: calc(100%);
|
||
|
}
|
||
|
}
|
||
|
}
|