mozaik-ext-time
Version:
Mozaik time widgets
89 lines (54 loc) • 1.3 kB
text/stylus
$time-clock-radius = 12vmin
$time-clock-inner-radius = 0.6vmin
.time__clock
&__outer-circle
position absolute
top 50%
left 50%
background-color transparent
border 0.5vmin solid #000
border-radius $time-clock-radius
width ($time-clock-radius * 2)
height ($time-clock-radius * 2)
margin-top ($time-clock-radius * -1)
margin-left ($time-clock-radius * -1)
&__inner-circle
position absolute
top 50%
left 50%
width ($time-clock-inner-radius * 2)
height ($time-clock-inner-radius * 2)
border-radius $time-clock-inner-radius
margin-top ($time-clock-inner-radius * -1)
margin-left ($time-clock-inner-radius * -1)
background #000
&__indicator
display block
position relative
top 20%
left 0
width 100%
text-align center
font-size 3vmin
opacity 0.4
&__info
display block
position relative
top 55%
left 0
width 100%
text-align center
font-size 2vmin
&__hand
width $time-clock-radius * .87
height 2px
margin-top -1px
background-color #000
position absolute
top 50%
left 50%
transform-origin left center
&--hours
width $time-clock-radius * .55
&--seconds
height 1px