192 lines
4.3 KiB
SCSS
192 lines
4.3 KiB
SCSS
@import "../base";
|
|
@import "./config";
|
|
|
|
.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;
|
|
align-items: center;
|
|
justify-content: center;
|
|
background-color: transparent;
|
|
}
|
|
|
|
.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;
|
|
}
|
|
&.editable {
|
|
display: flex;
|
|
flex-direction: row;
|
|
align-items: center;
|
|
}
|
|
&.pinned .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);
|
|
}
|
|
}
|
|
&.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);
|
|
}
|
|
}
|
|
}
|
|
&.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 .18s ease, width .18s ease;
|
|
}
|
|
&.pinned {
|
|
.innerknob {
|
|
background-color: $color-background;
|
|
}
|
|
.progress {
|
|
left: $slider-knob-size / 2;
|
|
width: calc(100%);
|
|
}
|
|
}
|
|
}
|
|
}
|