corrade-nucleus-nucleons – Blame information for rev
?pathlinks?
Rev | Author | Line No. | Line |
---|---|---|---|
1 | office | 1 | // |
2 | // Tooltips |
||
3 | // -------------------------------------------------- |
||
4 | |||
5 | |||
6 | // Base class |
||
7 | .tooltip { |
||
8 | position: absolute; |
||
9 | z-index: @zindex-tooltip; |
||
10 | display: block; |
||
11 | // Our parent element can be arbitrary since tooltips are by default inserted as a sibling of their target element. |
||
12 | // So reset our font and text properties to avoid inheriting weird values. |
||
13 | .reset-text(); |
||
14 | font-size: @font-size-small; |
||
15 | |||
16 | .opacity(0); |
||
17 | |||
18 | &.in { .opacity(@tooltip-opacity); } |
||
19 | &.top { margin-top: -3px; padding: @tooltip-arrow-width 0; } |
||
20 | &.right { margin-left: 3px; padding: 0 @tooltip-arrow-width; } |
||
21 | &.bottom { margin-top: 3px; padding: @tooltip-arrow-width 0; } |
||
22 | &.left { margin-left: -3px; padding: 0 @tooltip-arrow-width; } |
||
23 | } |
||
24 | |||
25 | // Wrapper for the tooltip content |
||
26 | .tooltip-inner { |
||
27 | max-width: @tooltip-max-width; |
||
28 | padding: 3px 8px; |
||
29 | color: @tooltip-color; |
||
30 | text-align: center; |
||
31 | background-color: @tooltip-bg; |
||
32 | border-radius: @border-radius-base; |
||
33 | } |
||
34 | |||
35 | // Arrows |
||
36 | .tooltip-arrow { |
||
37 | position: absolute; |
||
38 | width: 0; |
||
39 | height: 0; |
||
40 | border-color: transparent; |
||
41 | border-style: solid; |
||
42 | } |
||
43 | // Note: Deprecated .top-left, .top-right, .bottom-left, and .bottom-right as of v3.3.1 |
||
44 | .tooltip { |
||
45 | &.top .tooltip-arrow { |
||
46 | bottom: 0; |
||
47 | left: 50%; |
||
48 | margin-left: -@tooltip-arrow-width; |
||
49 | border-width: @tooltip-arrow-width @tooltip-arrow-width 0; |
||
50 | border-top-color: @tooltip-arrow-color; |
||
51 | } |
||
52 | &.top-left .tooltip-arrow { |
||
53 | bottom: 0; |
||
54 | right: @tooltip-arrow-width; |
||
55 | margin-bottom: -@tooltip-arrow-width; |
||
56 | border-width: @tooltip-arrow-width @tooltip-arrow-width 0; |
||
57 | border-top-color: @tooltip-arrow-color; |
||
58 | } |
||
59 | &.top-right .tooltip-arrow { |
||
60 | bottom: 0; |
||
61 | left: @tooltip-arrow-width; |
||
62 | margin-bottom: -@tooltip-arrow-width; |
||
63 | border-width: @tooltip-arrow-width @tooltip-arrow-width 0; |
||
64 | border-top-color: @tooltip-arrow-color; |
||
65 | } |
||
66 | &.right .tooltip-arrow { |
||
67 | top: 50%; |
||
68 | left: 0; |
||
69 | margin-top: -@tooltip-arrow-width; |
||
70 | border-width: @tooltip-arrow-width @tooltip-arrow-width @tooltip-arrow-width 0; |
||
71 | border-right-color: @tooltip-arrow-color; |
||
72 | } |
||
73 | &.left .tooltip-arrow { |
||
74 | top: 50%; |
||
75 | right: 0; |
||
76 | margin-top: -@tooltip-arrow-width; |
||
77 | border-width: @tooltip-arrow-width 0 @tooltip-arrow-width @tooltip-arrow-width; |
||
78 | border-left-color: @tooltip-arrow-color; |
||
79 | } |
||
80 | &.bottom .tooltip-arrow { |
||
81 | top: 0; |
||
82 | left: 50%; |
||
83 | margin-left: -@tooltip-arrow-width; |
||
84 | border-width: 0 @tooltip-arrow-width @tooltip-arrow-width; |
||
85 | border-bottom-color: @tooltip-arrow-color; |
||
86 | } |
||
87 | &.bottom-left .tooltip-arrow { |
||
88 | top: 0; |
||
89 | right: @tooltip-arrow-width; |
||
90 | margin-top: -@tooltip-arrow-width; |
||
91 | border-width: 0 @tooltip-arrow-width @tooltip-arrow-width; |
||
92 | border-bottom-color: @tooltip-arrow-color; |
||
93 | } |
||
94 | &.bottom-right .tooltip-arrow { |
||
95 | top: 0; |
||
96 | left: @tooltip-arrow-width; |
||
97 | margin-top: -@tooltip-arrow-width; |
||
98 | border-width: 0 @tooltip-arrow-width @tooltip-arrow-width; |
||
99 | border-bottom-color: @tooltip-arrow-color; |
||
100 | } |
||
101 | } |