95 lines
2.7 KiB
Stylus
95 lines
2.7 KiB
Stylus
|
rootSize = 266px
|
||
|
|
innerPadding = 10px
|
||
|
|
knobSize = 40px
|
||
|
|
clockSize = rootSize - knobSize - innerPadding
|
||
|
|
clockSizeInner = clockSize - knobSize - innerPadding
|
||
|
|
clockRadius = (clockSize/2)
|
||
|
|
hourSize = 30px
|
||
|
|
handWidth = 2px
|
||
|
|
|
||
|
|
:local(.root)
|
||
|
|
border-radius : 50%
|
||
|
|
border : 1px solid red
|
||
|
|
height : rootSize
|
||
|
|
margin-left : 35px
|
||
|
|
padding : (hourSize/2)
|
||
|
|
position : relative
|
||
|
|
width : rootSize
|
||
|
|
|
||
|
|
:local(.clock)
|
||
|
|
border-radius : 50%
|
||
|
|
height : clockSize
|
||
|
|
left : 50%
|
||
|
|
margin-left : -(clockSize/2)
|
||
|
|
margin-top : -(clockSize/2)
|
||
|
|
position : absolute
|
||
|
|
top : 50%
|
||
|
|
width : clockSize
|
||
|
|
|
||
|
|
:local(.clockInner)
|
||
|
|
border-radius : 50%
|
||
|
|
border: 1px solid blue
|
||
|
|
height : clockSizeInner
|
||
|
|
left : 50%
|
||
|
|
margin-left : -(clockSizeInner/2)
|
||
|
|
margin-top : -(clockSizeInner/2)
|
||
|
|
position : absolute
|
||
|
|
top : 50%
|
||
|
|
width : clockSizeInner
|
||
|
|
z-index : 2
|
||
|
|
|
||
|
|
:local(.hand)
|
||
|
|
background-color : blue
|
||
|
|
bottom : 50%
|
||
|
|
display : block
|
||
|
|
height : clockRadius - (knobSize/2)
|
||
|
|
left : 50%
|
||
|
|
margin-left : -(handWidth/2)
|
||
|
|
position : absolute
|
||
|
|
transform-origin : 0 100%
|
||
|
|
width : handWidth
|
||
|
|
|
||
|
|
&:before
|
||
|
|
background-color : blue
|
||
|
|
border-radius : 50%
|
||
|
|
bottom : 0
|
||
|
|
content : ''
|
||
|
|
height : 8px
|
||
|
|
left : 50%
|
||
|
|
margin-bottom : -4px
|
||
|
|
margin-left : -4px
|
||
|
|
position : absolute
|
||
|
|
width : 8px
|
||
|
|
|
||
|
|
:local(.knob)
|
||
|
|
cursor : pointer
|
||
|
|
border-radius : 50%
|
||
|
|
background-color : blue
|
||
|
|
height : knobSize
|
||
|
|
left : 50%
|
||
|
|
margin-left : -(knobSize/2)
|
||
|
|
position : absolute
|
||
|
|
top : -(knobSize)
|
||
|
|
width : knobSize
|
||
|
|
|
||
|
|
:local(.root).pressed :local(.knob)
|
||
|
|
background-color : pink
|
||
|
|
|
||
|
|
:local(.hour)
|
||
|
|
color : #444
|
||
|
|
border-radius : 50%
|
||
|
|
height : hourSize
|
||
|
|
line-height : hourSize
|
||
|
|
margin-left : -(hourSize/2)
|
||
|
|
pointer-events : none
|
||
|
|
margin-top : -(hourSize/2)
|
||
|
|
position : absolute
|
||
|
|
text-align : center
|
||
|
|
width : hourSize
|
||
|
|
|
||
|
|
:local(.hours)
|
||
|
|
for num in 1 2 3 4 5 6 7 8 9 10 11 12
|
||
|
|
:local(.hour):nth-child({num})
|
||
|
|
left : (clockRadius + clockRadius * sin(PI * 2 * (num/12)))px
|
||
|
|
top : (clockRadius - clockRadius * cos(PI * 2 * (num/12)))px
|