Mercurial > wikked
diff static/bootstrap/less/tooltip.less @ 149:d29e2f337b00
Updated to Bootstrap 3.0.
author | Ludovic Chabant <ludovic@chabant.com> |
---|---|
date | Thu, 12 Dec 2013 21:54:04 -0800 |
parents | a5a3d454eac9 |
children |
line wrap: on
line diff
--- a/static/bootstrap/less/tooltip.less Wed Dec 11 21:51:51 2013 -0800 +++ b/static/bootstrap/less/tooltip.less Thu Dec 12 21:54:04 2013 -0800 @@ -6,28 +6,29 @@ // Base class .tooltip { position: absolute; - z-index: @zindexTooltip; + z-index: @zindex-tooltip; display: block; visibility: visible; - font-size: 11px; + font-size: @font-size-small; line-height: 1.4; .opacity(0); - &.in { .opacity(80); } - &.top { margin-top: -3px; padding: 5px 0; } - &.right { margin-left: 3px; padding: 0 5px; } - &.bottom { margin-top: 3px; padding: 5px 0; } - &.left { margin-left: -3px; padding: 0 5px; } + + &.in { .opacity(.9); } + &.top { margin-top: -3px; padding: @tooltip-arrow-width 0; } + &.right { margin-left: 3px; padding: 0 @tooltip-arrow-width; } + &.bottom { margin-top: 3px; padding: @tooltip-arrow-width 0; } + &.left { margin-left: -3px; padding: 0 @tooltip-arrow-width; } } // Wrapper for the tooltip content .tooltip-inner { - max-width: 200px; - padding: 8px; - color: @tooltipColor; + max-width: @tooltip-max-width; + padding: 3px 8px; + color: @tooltip-color; text-align: center; text-decoration: none; - background-color: @tooltipBackground; - .border-radius(@baseBorderRadius); + background-color: @tooltip-bg; + border-radius: @border-radius-base; } // Arrows @@ -42,29 +43,53 @@ &.top .tooltip-arrow { bottom: 0; left: 50%; - margin-left: -@tooltipArrowWidth; - border-width: @tooltipArrowWidth @tooltipArrowWidth 0; - border-top-color: @tooltipArrowColor; + margin-left: -@tooltip-arrow-width; + border-width: @tooltip-arrow-width @tooltip-arrow-width 0; + border-top-color: @tooltip-arrow-color; + } + &.top-left .tooltip-arrow { + bottom: 0; + left: @tooltip-arrow-width; + border-width: @tooltip-arrow-width @tooltip-arrow-width 0; + border-top-color: @tooltip-arrow-color; + } + &.top-right .tooltip-arrow { + bottom: 0; + right: @tooltip-arrow-width; + border-width: @tooltip-arrow-width @tooltip-arrow-width 0; + border-top-color: @tooltip-arrow-color; } &.right .tooltip-arrow { top: 50%; left: 0; - margin-top: -@tooltipArrowWidth; - border-width: @tooltipArrowWidth @tooltipArrowWidth @tooltipArrowWidth 0; - border-right-color: @tooltipArrowColor; + margin-top: -@tooltip-arrow-width; + border-width: @tooltip-arrow-width @tooltip-arrow-width @tooltip-arrow-width 0; + border-right-color: @tooltip-arrow-color; } &.left .tooltip-arrow { top: 50%; right: 0; - margin-top: -@tooltipArrowWidth; - border-width: @tooltipArrowWidth 0 @tooltipArrowWidth @tooltipArrowWidth; - border-left-color: @tooltipArrowColor; + margin-top: -@tooltip-arrow-width; + border-width: @tooltip-arrow-width 0 @tooltip-arrow-width @tooltip-arrow-width; + border-left-color: @tooltip-arrow-color; } &.bottom .tooltip-arrow { top: 0; left: 50%; - margin-left: -@tooltipArrowWidth; - border-width: 0 @tooltipArrowWidth @tooltipArrowWidth; - border-bottom-color: @tooltipArrowColor; + margin-left: -@tooltip-arrow-width; + border-width: 0 @tooltip-arrow-width @tooltip-arrow-width; + border-bottom-color: @tooltip-arrow-color; + } + &.bottom-left .tooltip-arrow { + top: 0; + left: @tooltip-arrow-width; + border-width: 0 @tooltip-arrow-width @tooltip-arrow-width; + border-bottom-color: @tooltip-arrow-color; + } + &.bottom-right .tooltip-arrow { + top: 0; + right: @tooltip-arrow-width; + border-width: 0 @tooltip-arrow-width @tooltip-arrow-width; + border-bottom-color: @tooltip-arrow-color; } }