1.1 --- /dev/null Thu Jan 01 00:00:00 1970 +0000
1.2 +++ b/static/less/tooltip.less Fri Dec 20 22:30:44 2013 +0100
1.3 @@ -0,0 +1,95 @@
1.4 +//
1.5 +// Tooltips
1.6 +// --------------------------------------------------
1.7 +
1.8 +
1.9 +// Base class
1.10 +.tooltip {
1.11 + position: absolute;
1.12 + z-index: @zindex-tooltip;
1.13 + display: block;
1.14 + visibility: visible;
1.15 + font-size: @font-size-small;
1.16 + line-height: 1.4;
1.17 + .opacity(0);
1.18 +
1.19 + &.in { .opacity(.9); }
1.20 + &.top { margin-top: -3px; padding: @tooltip-arrow-width 0; }
1.21 + &.right { margin-left: 3px; padding: 0 @tooltip-arrow-width; }
1.22 + &.bottom { margin-top: 3px; padding: @tooltip-arrow-width 0; }
1.23 + &.left { margin-left: -3px; padding: 0 @tooltip-arrow-width; }
1.24 +}
1.25 +
1.26 +// Wrapper for the tooltip content
1.27 +.tooltip-inner {
1.28 + max-width: @tooltip-max-width;
1.29 + padding: 3px 8px;
1.30 + color: @tooltip-color;
1.31 + text-align: center;
1.32 + text-decoration: none;
1.33 + background-color: @tooltip-bg;
1.34 + border-radius: @border-radius-base;
1.35 +}
1.36 +
1.37 +// Arrows
1.38 +.tooltip-arrow {
1.39 + position: absolute;
1.40 + width: 0;
1.41 + height: 0;
1.42 + border-color: transparent;
1.43 + border-style: solid;
1.44 +}
1.45 +.tooltip {
1.46 + &.top .tooltip-arrow {
1.47 + bottom: 0;
1.48 + left: 50%;
1.49 + margin-left: -@tooltip-arrow-width;
1.50 + border-width: @tooltip-arrow-width @tooltip-arrow-width 0;
1.51 + border-top-color: @tooltip-arrow-color;
1.52 + }
1.53 + &.top-left .tooltip-arrow {
1.54 + bottom: 0;
1.55 + left: @tooltip-arrow-width;
1.56 + border-width: @tooltip-arrow-width @tooltip-arrow-width 0;
1.57 + border-top-color: @tooltip-arrow-color;
1.58 + }
1.59 + &.top-right .tooltip-arrow {
1.60 + bottom: 0;
1.61 + right: @tooltip-arrow-width;
1.62 + border-width: @tooltip-arrow-width @tooltip-arrow-width 0;
1.63 + border-top-color: @tooltip-arrow-color;
1.64 + }
1.65 + &.right .tooltip-arrow {
1.66 + top: 50%;
1.67 + left: 0;
1.68 + margin-top: -@tooltip-arrow-width;
1.69 + border-width: @tooltip-arrow-width @tooltip-arrow-width @tooltip-arrow-width 0;
1.70 + border-right-color: @tooltip-arrow-color;
1.71 + }
1.72 + &.left .tooltip-arrow {
1.73 + top: 50%;
1.74 + right: 0;
1.75 + margin-top: -@tooltip-arrow-width;
1.76 + border-width: @tooltip-arrow-width 0 @tooltip-arrow-width @tooltip-arrow-width;
1.77 + border-left-color: @tooltip-arrow-color;
1.78 + }
1.79 + &.bottom .tooltip-arrow {
1.80 + top: 0;
1.81 + left: 50%;
1.82 + margin-left: -@tooltip-arrow-width;
1.83 + border-width: 0 @tooltip-arrow-width @tooltip-arrow-width;
1.84 + border-bottom-color: @tooltip-arrow-color;
1.85 + }
1.86 + &.bottom-left .tooltip-arrow {
1.87 + top: 0;
1.88 + left: @tooltip-arrow-width;
1.89 + border-width: 0 @tooltip-arrow-width @tooltip-arrow-width;
1.90 + border-bottom-color: @tooltip-arrow-color;
1.91 + }
1.92 + &.bottom-right .tooltip-arrow {
1.93 + top: 0;
1.94 + right: @tooltip-arrow-width;
1.95 + border-width: 0 @tooltip-arrow-width @tooltip-arrow-width;
1.96 + border-bottom-color: @tooltip-arrow-color;
1.97 + }
1.98 +}