From 1fa2c3d90755dfb553bcf3427b9e6c86efb574b8 Mon Sep 17 00:00:00 2001 From: Gordon Koo Date: Sun, 19 Aug 2012 14:47:19 -0700 Subject: [PATCH] fix arrow width --- css/hopscotch.css | 8 ++++---- css/hopscotch.less | 9 ++++----- 2 files changed, 8 insertions(+), 9 deletions(-) diff --git a/css/hopscotch.css b/css/hopscotch.css index 456b1d99..ae4e4c42 100644 --- a/css/hopscotch.css +++ b/css/hopscotch.css @@ -13,13 +13,13 @@ div#hopscotch-bubble #hopscotch-bubble-content{margin-left:40px;} div#hopscotch-bubble #hopscotch-bubble-close{color:#000;background:transparent url(../img/sprite.png) -200px -100px no-repeat;display:block;margin:15px 10px 0 0;position:absolute;text-decoration:none;text-indent:-9999px;width:10px;height:10px;top:0;right:0;} div#hopscotch-bubble #hopscotch-bubble-number{background:transparent url(../img/sprite.png) 0 0 no-repeat;color:#fff;display:block;float:left;line-height:33px;margin:0 10px 0 0;text-align:center;width:30px;height:30px;} div#hopscotch-bubble #hopscotch-bubble-arrow-container{position:absolute;width:40px;height:40px;}div#hopscotch-bubble #hopscotch-bubble-arrow-container .hopscotch-bubble-arrow,div#hopscotch-bubble #hopscotch-bubble-arrow-container .hopscotch-bubble-arrow-border{width:0;height:0;} -div#hopscotch-bubble #hopscotch-bubble-arrow-container.up{top:-26px;left:10px;}div#hopscotch-bubble #hopscotch-bubble-arrow-container.up .hopscotch-bubble-arrow{border-bottom:20px solid #ffffff;border-left:20px solid transparent;border-right:20px solid transparent;position:relative;top:-11.516px;} +div#hopscotch-bubble #hopscotch-bubble-arrow-container.up{top:-26px;left:10px;}div#hopscotch-bubble #hopscotch-bubble-arrow-container.up .hopscotch-bubble-arrow{border-bottom:20px solid #ffffff;border-left:20px solid transparent;border-right:20px solid transparent;position:relative;top:-10px;} div#hopscotch-bubble #hopscotch-bubble-arrow-container.up .hopscotch-bubble-arrow-border{border-bottom:20px solid #000000;border-bottom:20px solid rgba(0, 0, 0, 0.5);border-left:20px solid transparent;border-right:20px solid transparent;} -div#hopscotch-bubble #hopscotch-bubble-arrow-container.down{bottom:-46px;left:10px;}div#hopscotch-bubble #hopscotch-bubble-arrow-container.down .hopscotch-bubble-arrow{border-top:20px solid #ffffff;border-left:20px solid transparent;border-right:20px solid transparent;position:relative;top:-28.484px;} +div#hopscotch-bubble #hopscotch-bubble-arrow-container.down{bottom:-46px;left:10px;}div#hopscotch-bubble #hopscotch-bubble-arrow-container.down .hopscotch-bubble-arrow{border-top:20px solid #ffffff;border-left:20px solid transparent;border-right:20px solid transparent;position:relative;top:-30px;} div#hopscotch-bubble #hopscotch-bubble-arrow-container.down .hopscotch-bubble-arrow-border{border-top:20px solid #000000;border-top:20px solid rgba(0, 0, 0, 0.5);border-left:20px solid transparent;border-right:20px solid transparent;} -div#hopscotch-bubble #hopscotch-bubble-arrow-container.left{top:10px;left:-26px;}div#hopscotch-bubble #hopscotch-bubble-arrow-container.left .hopscotch-bubble-arrow{border-bottom:20px solid transparent;border-right:20px solid #ffffff;border-top:20px solid transparent;position:relative;left:8.484px;top:-40px;} +div#hopscotch-bubble #hopscotch-bubble-arrow-container.left{top:10px;left:-26px;}div#hopscotch-bubble #hopscotch-bubble-arrow-container.left .hopscotch-bubble-arrow{border-bottom:20px solid transparent;border-right:20px solid #ffffff;border-top:20px solid transparent;position:relative;left:9px;top:-40px;} div#hopscotch-bubble #hopscotch-bubble-arrow-container.left .hopscotch-bubble-arrow-border{border-right:20px solid #000000;border-right:20px solid rgba(0, 0, 0, 0.5);border-bottom:20px solid transparent;border-top:20px solid transparent;} -div#hopscotch-bubble #hopscotch-bubble-arrow-container.right{top:10px;right:-46px;}div#hopscotch-bubble #hopscotch-bubble-arrow-container.right .hopscotch-bubble-arrow{border-bottom:20px solid transparent;border-left:20px solid #ffffff;border-top:20px solid transparent;position:relative;left:-11.516px;top:-40px;} +div#hopscotch-bubble #hopscotch-bubble-arrow-container.right{top:10px;right:-46px;}div#hopscotch-bubble #hopscotch-bubble-arrow-container.right .hopscotch-bubble-arrow{border-bottom:20px solid transparent;border-left:20px solid #ffffff;border-top:20px solid transparent;position:relative;left:-9px;top:-40px;} div#hopscotch-bubble #hopscotch-bubble-arrow-container.right .hopscotch-bubble-arrow-border{border-left:20px solid #000000;border-left:20px solid rgba(0, 0, 0, 0.5);border-bottom:20px solid transparent;border-top:20px solid transparent;} div#hopscotch-bubble #hopscotch-actions{text-align:right;} div#hopscotch-bubble input.hopscotch-nav-button{border-width:1px;border-style:solid;cursor:pointer;font-size:12px;line-height:1.35;margin:0;overflow:visible;padding:3px 10px 2px;*padding:2px 10px 1px;text-decoration:none !important;vertical-align:top;width:auto;-moz-border-radius:3px;-ms-border-radius:3px;-o-border-radius:3px;-webkit-border-radius:3px;border-radius:3px;*padding:3px 10px;}div#hopscotch-bubble input.hopscotch-nav-button.next{background:#FFCF0B;background:-moz-linear-gradient(top, #fff5bd 0, #fff5bd 1px, #ffe976 1px, #ffcf0b 100%);background:-o-linear-gradient(top, #fff5bd 0, #fff5bd 1px, #ffe976 1px, #ffcf0b 100%);background:-webkit-gradient(linear, left top, left bottom, color-stop(0, #fff5bd), color-stop(5%, #fff5bd), color-stop(5%, #ffe976), color-stop(100%, #ffcf0b));background:linear-gradient(top, #fff5bd 0, #fff5bd 1px, #ffe976 1px, #ffcf0b 100%);filter:progid:dximagetransform.microsoft.gradient(startColorstr='#FFE976', endColorstr='#FFCF0B', GradientType=0);border-color:#e8b463;color:#333;font-weight:bold;margin:0 0 0 10px;overflow:visible;}div#hopscotch-bubble input.hopscotch-nav-button.next.hide-all{display:none;} diff --git a/css/hopscotch.less b/css/hopscotch.less index 4ddf9f87..fb8d7bef 100644 --- a/css/hopscotch.less +++ b/css/hopscotch.less @@ -82,7 +82,6 @@ div#hopscotch-bubble { #hopscotch-bubble-arrow-container { @arrowWidth: 20px; - @borderAngledWidth: @bubbleBorderWidth*1.414; // 1.414 == sqrt(2) position: absolute; width: @arrowWidth*2; @@ -103,7 +102,7 @@ div#hopscotch-bubble { border-left: @arrowWidth solid transparent; border-right: @arrowWidth solid transparent; position: relative; - top: 0 - @arrowWidth + (@borderAngledWidth); + top: 0 - @arrowWidth + 10px; } .hopscotch-bubble-arrow-border { border-bottom: @arrowWidth solid #000; @@ -121,7 +120,7 @@ div#hopscotch-bubble { border-left: @arrowWidth solid transparent; border-right: @arrowWidth solid transparent; position: relative; - top: 0 - @arrowWidth - (@borderAngledWidth); + top: 0 - @arrowWidth - 10px; } .hopscotch-bubble-arrow-border { border-top: @arrowWidth solid #000; @@ -139,7 +138,7 @@ div#hopscotch-bubble { border-right: @arrowWidth solid @bubbleColor; border-top: @arrowWidth solid transparent; position: relative; - left: @borderAngledWidth; + left: 9px; top: 0 - (2*@arrowWidth); } .hopscotch-bubble-arrow-border { @@ -158,7 +157,7 @@ div#hopscotch-bubble { border-left: @arrowWidth solid @bubbleColor; border-top: @arrowWidth solid transparent; position: relative; - left: 0 - @arrowWidth + (@borderAngledWidth); + left: 0 - @arrowWidth + 11px; top: 0 - (2*@arrowWidth); } .hopscotch-bubble-arrow-border {