99 lines
2.5 KiB
Stylus
99 lines
2.5 KiB
Stylus
@import '../constants'
|
|
|
|
NUMBER_SIZE = 20px
|
|
HAND_WIDTH = 4px
|
|
HAND_DOT_SIZE = 10px
|
|
KNOB_SIZE = 34px
|
|
SMALL_KNOB_SIZE = 12px
|
|
|
|
:local(.root)
|
|
padding : 15px
|
|
|
|
:local(.wrapper)
|
|
background-color : DIVIDER
|
|
border-radius : 50%
|
|
position : relative
|
|
|
|
:local(.face)
|
|
border-radius : 50%
|
|
cursor : pointer
|
|
position : relative
|
|
z-index : Z_INDEX_HIGH
|
|
|
|
:local(.number)
|
|
height : NUMBER_SIZE
|
|
margin-left : -(NUMBER_SIZE/2)
|
|
margin-top : -(NUMBER_SIZE/2)
|
|
pointer-events : none
|
|
position : relative
|
|
text-align : center
|
|
user-select : none
|
|
width : NUMBER_SIZE
|
|
|
|
&.active
|
|
color : WHITE
|
|
|
|
:local(.face)
|
|
position : absolute
|
|
top : 50%
|
|
left : 50%
|
|
transform : translateX(-50%) translateY(-50%)
|
|
|
|
:local(.hand)
|
|
background-color : ACCENT
|
|
bottom : 50%
|
|
display : block
|
|
left : 50%
|
|
margin-left : -(HAND_WIDTH/2)
|
|
position : absolute
|
|
transform-origin : 50% 100%
|
|
width : HAND_WIDTH
|
|
|
|
&:before
|
|
background-color : ACCENT
|
|
border-radius : 50%
|
|
bottom : 0
|
|
content : ''
|
|
height : HAND_DOT_SIZE
|
|
left : 50%
|
|
margin-bottom : -(HAND_DOT_SIZE/2)
|
|
margin-left : -(HAND_DOT_SIZE/2)
|
|
position : absolute
|
|
width : HAND_DOT_SIZE
|
|
|
|
&.smallKnob :local(.knob)
|
|
background-color: lighten(ACCENT, 70%)
|
|
|
|
&:after
|
|
background : ACCENT
|
|
border-radius : 50%
|
|
content : ''
|
|
height : SMALL_KNOB_SIZE
|
|
left : 50%
|
|
margin-left : -(SMALL_KNOB_SIZE/2)
|
|
margin-top : -(SMALL_KNOB_SIZE/2)
|
|
position : absolute
|
|
top : 50%
|
|
width : SMALL_KNOB_SIZE
|
|
|
|
&:before
|
|
background : ACCENT
|
|
bottom : 0
|
|
content : ''
|
|
height : KNOB_SIZE - SMALL_KNOB_SIZE
|
|
left : 50%
|
|
margin-left : -(HAND_WIDTH/2)
|
|
position : absolute
|
|
width : HAND_WIDTH
|
|
|
|
:local(.knob)
|
|
background-color : ACCENT
|
|
border-radius : 50%
|
|
cursor : pointer
|
|
height : KNOB_SIZE
|
|
left : 50%
|
|
margin-left : -(KNOB_SIZE/2)
|
|
position : absolute
|
|
top : -(KNOB_SIZE)
|
|
width : KNOB_SIZE
|