Mercurial > wikked

comparison static/bootstrap/less/tooltip.less @ 149:d29e2f337b00

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
Updated to Bootstrap 3.0.
author Ludovic Chabant <ludovic@chabant.com>
date Thu, 12 Dec 2013 21:54:04 -0800
parents a5a3d454eac9
children
comparison
equal deleted inserted replaced
148:f02e049d6546 149:d29e2f337b00
4 4
5 5
6 // Base class 6 // Base class
7 .tooltip { 7 .tooltip {
8 position: absolute; 8 position: absolute;
9 z-index: @zindexTooltip; 9 z-index: @zindex-tooltip;
10 display: block; 10 display: block;
11 visibility: visible; 11 visibility: visible;
12 font-size: 11px; 12 font-size: @font-size-small;
13 line-height: 1.4; 13 line-height: 1.4;
14 .opacity(0); 14 .opacity(0);
15 &.in { .opacity(80); } 15
16 &.top { margin-top: -3px; padding: 5px 0; } 16 &.in { .opacity(.9); }
17 &.right { margin-left: 3px; padding: 0 5px; } 17 &.top { margin-top: -3px; padding: @tooltip-arrow-width 0; }
18 &.bottom { margin-top: 3px; padding: 5px 0; } 18 &.right { margin-left: 3px; padding: 0 @tooltip-arrow-width; }
19 &.left { margin-left: -3px; padding: 0 5px; } 19 &.bottom { margin-top: 3px; padding: @tooltip-arrow-width 0; }
20 &.left { margin-left: -3px; padding: 0 @tooltip-arrow-width; }
20 } 21 }
21 22
22 // Wrapper for the tooltip content 23 // Wrapper for the tooltip content
23 .tooltip-inner { 24 .tooltip-inner {
24 max-width: 200px; 25 max-width: @tooltip-max-width;
25 padding: 8px; 26 padding: 3px 8px;
26 color: @tooltipColor; 27 color: @tooltip-color;
27 text-align: center; 28 text-align: center;
28 text-decoration: none; 29 text-decoration: none;
29 background-color: @tooltipBackground; 30 background-color: @tooltip-bg;
30 .border-radius(@baseBorderRadius); 31 border-radius: @border-radius-base;
31 } 32 }
32 33
33 // Arrows 34 // Arrows
34 .tooltip-arrow { 35 .tooltip-arrow {
35 position: absolute; 36 position: absolute;
40 } 41 }
41 .tooltip { 42 .tooltip {
42 &.top .tooltip-arrow { 43 &.top .tooltip-arrow {
43 bottom: 0; 44 bottom: 0;
44 left: 50%; 45 left: 50%;
45 margin-left: -@tooltipArrowWidth; 46 margin-left: -@tooltip-arrow-width;
46 border-width: @tooltipArrowWidth @tooltipArrowWidth 0; 47 border-width: @tooltip-arrow-width @tooltip-arrow-width 0;
47 border-top-color: @tooltipArrowColor; 48 border-top-color: @tooltip-arrow-color;
49 }
50 &.top-left .tooltip-arrow {
51 bottom: 0;
52 left: @tooltip-arrow-width;
53 border-width: @tooltip-arrow-width @tooltip-arrow-width 0;
54 border-top-color: @tooltip-arrow-color;
55 }
56 &.top-right .tooltip-arrow {
57 bottom: 0;
58 right: @tooltip-arrow-width;
59 border-width: @tooltip-arrow-width @tooltip-arrow-width 0;
60 border-top-color: @tooltip-arrow-color;
48 } 61 }
49 &.right .tooltip-arrow { 62 &.right .tooltip-arrow {
50 top: 50%; 63 top: 50%;
51 left: 0; 64 left: 0;
52 margin-top: -@tooltipArrowWidth; 65 margin-top: -@tooltip-arrow-width;
53 border-width: @tooltipArrowWidth @tooltipArrowWidth @tooltipArrowWidth 0; 66 border-width: @tooltip-arrow-width @tooltip-arrow-width @tooltip-arrow-width 0;
54 border-right-color: @tooltipArrowColor; 67 border-right-color: @tooltip-arrow-color;
55 } 68 }
56 &.left .tooltip-arrow { 69 &.left .tooltip-arrow {
57 top: 50%; 70 top: 50%;
58 right: 0; 71 right: 0;
59 margin-top: -@tooltipArrowWidth; 72 margin-top: -@tooltip-arrow-width;
60 border-width: @tooltipArrowWidth 0 @tooltipArrowWidth @tooltipArrowWidth; 73 border-width: @tooltip-arrow-width 0 @tooltip-arrow-width @tooltip-arrow-width;
61 border-left-color: @tooltipArrowColor; 74 border-left-color: @tooltip-arrow-color;
62 } 75 }
63 &.bottom .tooltip-arrow { 76 &.bottom .tooltip-arrow {
64 top: 0; 77 top: 0;
65 left: 50%; 78 left: 50%;
66 margin-left: -@tooltipArrowWidth; 79 margin-left: -@tooltip-arrow-width;
67 border-width: 0 @tooltipArrowWidth @tooltipArrowWidth; 80 border-width: 0 @tooltip-arrow-width @tooltip-arrow-width;
68 border-bottom-color: @tooltipArrowColor; 81 border-bottom-color: @tooltip-arrow-color;
82 }
83 &.bottom-left .tooltip-arrow {
84 top: 0;
85 left: @tooltip-arrow-width;
86 border-width: 0 @tooltip-arrow-width @tooltip-arrow-width;
87 border-bottom-color: @tooltip-arrow-color;
88 }
89 &.bottom-right .tooltip-arrow {
90 top: 0;
91 right: @tooltip-arrow-width;
92 border-width: 0 @tooltip-arrow-width @tooltip-arrow-width;
93 border-bottom-color: @tooltip-arrow-color;
69 } 94 }
70 } 95 }