react-toolbox/components/clock/style.styl

@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