hexaflip.styl

@import 'nib'

.hexaflip-cube
  font-family: 'Helvetica Neue', Arial, Helvetica, sans-serif
  text-rendering: optimizeLegibility
  font-smoothing: antialiased
  cursor: move
  cursor: -webkit-grab
  cursor: -moz-grab
  cursor: grab
  display: inline-block
  position: relative
  transform-style: preserve-3d

  &:active
    cursor: move
    cursor: -webkit-grabbing
    cursor: -moz-grabbing
    cursor: grabbing

  > div
    transition: transform .4s
    transform-style: preserve-3d

    &.no-tween
      transition-duration: 0s

  .hexaflip-side
    width: 100%
    overflow: hidden
    height: 100.5%
    position: absolute
    user-select: none
    background-size: cover
    text-align: center
    background-color: #333
    color: #fff
    font-weight: 100
    line-height: 1.5


.hexaflip-side-left, .hexaflip-side-right
  background-color: #555 !important


.hexaflip-timepicker
  .hexaflip-cube:last-child
    .hexaflip-side:nth-child(odd)
      background-color: #ff575b