164 lines
5.2 KiB
Stylus
164 lines
5.2 KiB
Stylus
@import "../constants"
|
|
|
|
RANGE_SIDE_SEPARATION = 20px
|
|
|
|
:local(.container)
|
|
height : 32px
|
|
margin-right : 32px
|
|
position : relative
|
|
user-select : none
|
|
width : calc(100% - 32px)
|
|
&:not(:last-child)
|
|
margin-right : RANGE_SIDE_SEPARATION + 32px
|
|
&:not(:first-child)
|
|
margin-left : RANGE_SIDE_SEPARATION
|
|
|
|
:local(.knob)
|
|
align-items : center
|
|
background-color : transparent
|
|
display : flex
|
|
flex-direction : row
|
|
height : 32px
|
|
justify-content : center
|
|
left : 0
|
|
position : relative
|
|
top : 0
|
|
width : 32px
|
|
z-index : 5
|
|
|
|
:local(.knobInner)
|
|
background-color : ACCENT
|
|
border-radius : 50%
|
|
height : 12px
|
|
transition-duration : 0.1s
|
|
transition-property : height, width, background-color, border
|
|
transition-timing-function : ease
|
|
width : 12px
|
|
z-index : 4
|
|
|
|
:local(.snaps)
|
|
display : flex
|
|
flex-direction : row
|
|
height : 2px
|
|
left : 0
|
|
pointer-events : none
|
|
position : absolute
|
|
top : 15px
|
|
width : calc(100% + 2px)
|
|
&:after
|
|
background-color : black
|
|
border-radius : 50%
|
|
content : ""
|
|
display : block
|
|
height : 2px
|
|
width : 2px
|
|
|
|
:local(.snap)
|
|
flex : 1
|
|
&:after
|
|
background-color : black
|
|
border-radius : 50%
|
|
content : ""
|
|
display : block
|
|
height : 2px
|
|
width : 2px
|
|
|
|
:local(.input)
|
|
margin-bottom : 0
|
|
text-align : center
|
|
width : 40px
|
|
|
|
:local(.progress)
|
|
height : 100%
|
|
left : 16px
|
|
position : absolute
|
|
top : 0
|
|
width : 100%
|
|
|
|
:local(.progressInner)
|
|
height : 2px
|
|
position : absolute
|
|
top : 15px
|
|
|
|
[data-ref="value"]
|
|
transition-duration : 0s
|
|
|
|
// When its focused
|
|
:local(.root):focus :local(.knob):before
|
|
background-color : ACCENT
|
|
border-radius : 50%
|
|
bottom : 0
|
|
content : ""
|
|
left : 0
|
|
position : absolute
|
|
right : 0
|
|
top : 0
|
|
opacity : .26
|
|
z-index : 2
|
|
|
|
:local(.root).editable
|
|
display : flex
|
|
align-items : center
|
|
flex-direction : row
|
|
|
|
// When its pinned
|
|
:local(.root).pinned :local(.knobInner)
|
|
&:before
|
|
content : ""
|
|
position : absolute
|
|
top : 0
|
|
background-color : ACCENT
|
|
left : 0
|
|
width : 26px
|
|
height : 26px
|
|
margin-left : 3px
|
|
border-radius : 50% 50% 50% 0
|
|
transition-delay : 1s
|
|
transform : rotate(-45deg) scale(0) translate(0)
|
|
transition : transform .2s ease, background-color .18s ease
|
|
|
|
&:after
|
|
color : white
|
|
content : attr(data-value)
|
|
font-size : 10px
|
|
height : 26px
|
|
left : 0
|
|
position : absolute
|
|
text-align : center
|
|
top : 0
|
|
transform : scale(0) translate(0)
|
|
transition : transform .2s ease, background-color .18s ease
|
|
width : 32px
|
|
|
|
// When the knob is pressed
|
|
:local(.root).pressed.pinned :local(.knobInner)
|
|
&:before
|
|
transition-delay : 100ms
|
|
transform : rotate(-45deg) scale(1) translate(17px, -17px)
|
|
|
|
&:after
|
|
transition-delay : 100ms
|
|
transform : scale(1) translate(0, -17px)
|
|
|
|
:local(.root).pressed:not(.pinned) :local(.knobInner)
|
|
height : 100%
|
|
transform : translateZ(0)
|
|
width : 100%
|
|
|
|
:local(.root).pressed:not(.pinned).ring :local(.progress)
|
|
left : 30px
|
|
width : calc(100% - 14px)
|
|
|
|
// When there is no current value
|
|
:local(.root).ring :local(.knobInner)
|
|
background-color : transparent
|
|
border : 2px solid #c8c8c8
|
|
|
|
:local(.root).ring :local(.knobInner):before
|
|
background-color : #c8c8c8
|
|
|
|
:local(.root).ring :local(.progress)
|
|
left : 20px
|
|
transition : left 0.18s ease, width 0.18s ease
|
|
width : calc(100% - 4px)
|