lolliclock.styl

@import 'nib'
primary100 = #B3E5FC
primary500 = #03A9F4
primary700 = #0288D1
darkTextColor = #212121
EASE_OUT = cubic-bezier(.4, 0, .2, 1)

//relative animation function
t(x)
  (3 * x)ms

.lolliclock-popover
  position absolute
  top 0
  left 0
  z-index 100
  display none
  width 196px
  height 324px
  border-radius 2px
  box-shadow 0 2px 5px 0 rgba(0, 0, 0, 0.26), 0 2px 10px 0 rgba(0, 0, 0, 0.16)
  font-family "Roboto", 'Helvetica Neue, Helvetica, Arial', sans-serif
  background #FFFFFF
  font-size 20px
  user-select none
.lolliclock-popover.animate
  max-height 0
  animation: open-popover t(100) forwards EASE_OUT
@keyframes open-popover
  0% {max-height: 0;}
  100% {max-height: 380px;}
.lolliclock-popover.animate-out
  animation: open-popover t(50) forwards reverse EASE_OUT

//Header
.lolliclock-header
  background primary500
  height 85px    
  width 196px
  display flex
  color white
  font-size 2.3em
  font-weight 400
  align-items center
  justify-content center
  overflow hidden
  position absolute
.lolliclock-header.animate
  height 0
  animation: slide-header t(50) t(50) forwards EASE_OUT
.lolliclock-header.animate-out
  animation: slide-header t(50) forwards reverse EASE_OUT
@keyframes slide-header
  0%   {height: 0;}
  100% {height: 85px;}
.lolliclock-time
  display flex
  align-self center
.lolliclock-primary-text
  color #ffffff
.lolliclock-hours
  width 51px
  text-align right
  opacity .6
  cursor pointer
  overflow hidden
  height 54px
.lolliclock-colon
  opacity .6
  cursor default
.lolliclock-minutes
  width 51px
  opacity .6
  cursor pointer
  overflow hidden
  height 54px
.lolliclock-am-pm
  cursor pointer
  font-size 10px
  position absolute
  top 47px
  left 157px
  opacity .6
  padding 3px
.lolliclock-primary-text
  opacity 1
.lolliclock-time-old
  opacity 1
  height 54px
.lolliclock-time-new
  opacity 0
.lolliclock-time .old-up
  animation: transition-top-up t(100) forwards EASE_OUT
.lolliclock-time .new-up
  animation: transition-bottom-up t(100) forwards EASE_OUT
.lolliclock-time .old-down
  animation: transition-top-up t(100) forwards reverse EASE_OUT
.lolliclock-time .new-down 
  animation: transition-bottom-up t(100) forwards reverse EASE_OUT
@keyframes transition-top-up
  0%   { margin-top: 0; opacity: 1; }
  100% { margin-top: -54px; opacity: 0; }
@keyframes transition-bottom-up
  0%   { opacity: 0; }
  100% { opacity: 1; } 
  
.lolliclock-minutes .lolliclock-time-old.animate
  animation: transition-top-up t(25) t(70) forwards EASE_OUT
.lolliclock-minutes .lolliclock-time-new.animate
  animation: transition-bottom-up t(25) t(70) forwards EASE_OUT
.lolliclock-hours .lolliclock-time-old.animate
  animation: transition-top-up t(25) t(75) forwards EASE_OUT 
.lolliclock-hours .lolliclock-time-new.animate
  animation: transition-bottom-up t(25) t(75) forwards EASE_OUT

.popover-content
  padding 18px 14px
  width 168px
  height 203px
  top 85px
  position absolute

.lolliclock-plate
.lolliclock-canvas
.lolliclock-dial
  width 168px
  height 168px   
.lolliclock-dial
  transition all t(100)
.lolliclock-dial-out
  transform scale(1.25, 1.25)
  opacity 0
// .lolliclock-canvas-out 
//   opacity 0.25 //temporary hand fade while the minutes hand animates in
//   transition opacity 175ms
.lolliclock-plate  
  background rgb(240,240,240)
  border-radius 100%   
  position relative
.lolliclock-plate.animate
  transform scale(0)
  animation: open-clock t(50) t(50) forwards
.lolliclock-plate.animate-out
  animation: open-clock t(50) forwards reverse EASE_OUT
@keyframes open-clock
  0% {transform: scale(0);}
  100% {transform: scale(1);}

.lolliclock-canvas
.lolliclock-dial
  position absolute
.lolliclock-dial-minutes
  visibility hidden   
.lolliclock-bearing
    fill black
    stroke-width 1
.lolliclock-canvas line
    stroke primary100
    stroke-width 1
    stroke-linecap round
.lolliclock-canvas-fg 
  stroke none
  fill primary700
.lolliclock-canvas-bg
  fill rgba(primary500, .25)
.lolliclock-tick
  border-radius 100%
  color #666
  line-height 24px
  text-align center
  width 24px
  height 24px
  font-size .55em
  font-weight 600
  position absolute
  cursor pointer
.lolliclock-tick.active
.lolliclock-tick:hover
  background primary100

//footer
.lolliclock-ampm-block
  display flex
  justify-content space-around
.lolliclock-ampm-btn
  position relative
  height 35px
  width 35px
  border-radius 100%
  font-size 10px
  font-weight 600
  cursor pointer
.lolliclock-ampm-btn.animate
  opacity 0
  animation: open-btn t(38) t(62) forwards EASE_OUT
.lolliclock-ampm-btn.animate-out
  animation: open-btn t(50) reverse forwards EASE_OUT
@keyframes open-btn
  0%   {transform: translate3d(0,-40px,0); opacity: 0;}
  100% {transform: translate3d(0,0,0); opacity: 1;} 
.lolliclock-button.animate
  opacity 0
  animation: open-btn t(25) t(75) forwards EASE_OUT
.lolliclock-button.animate-out
  animation: open-btn t(50) reverse forwards EASE_OUT
.lolliclock-btn-background
  position absolute
  height 35px
  width 35px  
  opacity 0
  transform scale(0)
  
.lolliclock-btn-text
  position absolute  
  width 100%
  text-align center
  line-height 35px
  vertical-align middle  
  color darkTextColor
        
.lolliclock-active-button-background
  background primary500
  border-radius 100%
  transition transform 175ms
  transform scale(1)
  opacity 1
.lolliclock-active-button-text
  color #FFFFFF     
    
.lolliclock-ampm-btn:focus
  outline 0

.lolliclock-clickable
  cursor pointer
  // must be above -moving
         
.lolliclock-moving
  cursor move 
  cursor -webkit-grabbing
  cursor -moz-grabbing
  
.lolliclock-export
  display hidden

//Optional close buttons
.lolliclock-buttons
  font-size 11px
  display flex
  justify-content flex-end
  margin-top 20px
  margin-bottom 8px
  margin-right 8px
  position absolute
  width 196px
  top 324px
.lolliclock-button
  font-weight 500
  color primary500
  cursor pointer
  padding 8px
  min-width 32px
  margin 0 4px
  background transparent
  text-align center
  text-transform uppercase
  border-radius 2px