diff --git a/css/hopscotch.css b/css/hopscotch.css new file mode 100644 index 00000000..cc0f37b0 --- /dev/null +++ b/css/hopscotch.css @@ -0,0 +1,16 @@ +.animated{-webkit-animation-fill-mode:both;-moz-animation-fill-mode:both;-ms-animation-fill-mode:both;-o-animation-fill-mode:both;animation-fill-mode:both;-webkit-animation-duration:1s;-moz-animation-duration:1s;-ms-animation-duration:1s;-o-animation-duration:1s;animation-duration:1s;} +.animated.hinge{-webkit-animation-duration:2s;-moz-animation-duration:2s;-ms-animation-duration:2s;-o-animation-duration:2s;animation-duration:2s;} +@-moz-keyframes bounce-down{0%,20%,50%,80%,100%{-moz-transform:translatey(0);} 40%{-moz-transform:translatey(-30px);} 60%{-moz-transform:translatey(-15px);}}@-o-keyframes bounce-down{0%,20%,50%,80%,100%{-o-transform:translatey(0);} 40%{-o-transform:translatey(-30px);} 60%{-o-transform:translatey(-15px);}}@-webkit-keyframes bounce-down{0%,20%,50%,80%,100%{-webkit-transform:translatey(0);} 40%{-webkit-transform:translatey(-30px);} 60%{-webkit-transform:translatey(-15px);}}@keyframes bounce-down{0%,20%,50%,80%,100%{transform:translatey(0);} 40%{transform:translatey(-30px);} 60%{transform:translatey(-15px);}}@-moz-keyframes bounce-up{0%,20%,50%,80%,100%{-moz-transform:translatey(0);} 40%{-moz-transform:translatey(30px);} 60%{-moz-transform:translatey(15px);}}@-o-keyframes bounce-up{0%,20%,50%,80%,100%{-o-transform:translatey(0);} 40%{-o-transform:translatey(30px);} 60%{-o-transform:translatey(15px);}}@-webkit-keyframes bounce-up{0%,20%,50%,80%,100%{-webkit-transform:translatey(0);} 40%{-webkit-transform:translatey(30px);} 60%{-webkit-transform:translatey(15px);}}@keyframes bounce-up{0%,20%,50%,80%,100%{transform:translatey(0);} 40%{transform:translatey(30px);} 60%{transform:translatey(15px);}}@-moz-keyframes bounce-left{0%,20%,50%,80%,100%{-moz-transform:translatex(0);} 40%{-moz-transform:translatex(30px);} 60%{-moz-transform:translatex(15px);}}@-o-keyframes bounce-left{0%,20%,50%,80%,100%{-o-transform:translatex(0);} 40%{-o-transform:translatex(30px);} 60%{-o-transform:translatex(15px);}}@-webkit-keyframes bounce-left{0%,20%,50%,80%,100%{-webkit-transform:translatex(0);} 40%{-webkit-transform:translatex(30px);} 60%{-webkit-transform:translatex(15px);}}@keyframes bounce-left{0%,20%,50%,80%,100%{transform:translatex(0);} 40%{transform:translatex(30px);} 60%{transform:translatex(15px);}}@-moz-keyframes bounce-right{0%,20%,50%,80%,100%{-moz-transform:translatex(0);} 40%{-moz-transform:translatex(-30px);} 60%{-moz-transform:translatex(-15px);}}@-o-keyframes bounce-right{0%,20%,50%,80%,100%{-o-transform:translatex(0);} 40%{-o-transform:translatex(30px);} 60%{-o-transform:translatex(-15px);}}@-webkit-keyframes bounce-right{0%,20%,50%,80%,100%{-webkit-transform:translatex(0);} 40%{-webkit-transform:translatex(30px);} 60%{-webkit-transform:translatex(-15px);}}@keyframes bounce-right{0%,20%,50%,80%,100%{transform:translatex(0);} 40%{transform:translatex(30px);} 60%{transform:translatex(-15px);}}.bounce-down{-webkit-animation-name:bounce-down;-moz-animation-name:bounce-down;-o-animation-name:bounce-down;animation-name:bounce-down;} +.bounce-up{-webkit-animation-name:bounce-up;-moz-animation-name:bounce-up;-o-animation-name:bounce-up;animation-name:bounce-up;} +.bounce-left{-webkit-animation-name:bounce-left;-moz-animation-name:bounce-left;-o-animation-name:bounce-left;animation-name:bounce-left;} +.bounce-right{-webkit-animation-name:bounce-right;-moz-animation-name:bounce-right;-o-animation-name:bounce-right;animation-name:bounce-right;} +div#hopscotch-bubble{background-color:#fff;border:1px solid #000;font-family:Helvetica, Arial;position:absolute;z-index:999999;-moz-border-radius:10px;-ms-border-radius:10px;-o-border-radius:10px;-webkit-border-radius:10px;border-radius:10px;}div#hopscotch-bubble.animate{-moz-transition-property:'top, left';-moz-transition-duration:0.5s;-moz-transition-timing-function:ease-in-out;-ms-transition-property:'top, left';-ms-transition-duration:0.5s;-ms-transition-timing-function:ease-in-out;-o-transition-property:'top, left';-o-transition-duration:0.5s;-o-transition-timing-function:ease-in-out;-webkit-transition-property:'top, left';-webkit-transition-duration:0.5s;-webkit-transition-timing-function:ease-in-out;transition-property:'top, left';transition-duration:0.5s;transition-timing-function:ease-in-out;} +div#hopscotch-bubble.hide,div#hopscotch-bubble .hide,div#hopscotch-bubble .hide-all{display:none;} +div#hopscotch-bubble #hopscotch-bubble-container{padding:20px;position:relative;} +div#hopscotch-bubble #hopscotch-bubble-close{position:absolute;top:0;right:0;} +div#hopscotch-bubble #hopscotch-bubble-number{float:left;font-size:48px;padding:25px;} +div#hopscotch-bubble #hopscotch-bubble-arrow{position:absolute;width:0;height:0;}div#hopscotch-bubble #hopscotch-bubble-arrow.up{border-bottom:20px solid #44dd44;border-left:20px solid transparent;border-right:20px solid transparent;top:-20px;left:10px;} +div#hopscotch-bubble #hopscotch-bubble-arrow.down{border-top:20px solid #44dd44;border-left:20px solid transparent;border-right:20px solid transparent;bottom:-20px;left:10px;} +div#hopscotch-bubble #hopscotch-bubble-arrow.left{border-right:20px solid #44dd44;border-top:20px solid transparent;border-bottom:20px solid transparent;top:10px;left:-20px;} +div#hopscotch-bubble #hopscotch-bubble-arrow.right{border-left:20px solid #44dd44;border-top:20px solid transparent;border-bottom:20px solid transparent;top:10px;right:-20px;} +div#hopscotch-bubble .hopscotch-nav-button.hide-all{display:none;} diff --git a/css/hopscotch.less b/css/hopscotch.less index 746cfd39..6fc9fe99 100644 --- a/css/hopscotch.less +++ b/css/hopscotch.less @@ -1,4 +1,5 @@ @import "util.less"; +@import "bounce.less"; @anim-duration: .5s; @bubble-corner-radius: 10px; diff --git a/index.html b/index.html index 0478fa99..be25a783 100644 --- a/index.html +++ b/index.html @@ -2,9 +2,12 @@ + +