| author | stetrabby <info@trabucchi.de> |
| Fri, 20 Dec 2013 22:49:16 +0100 | |
| changeset 54 | 0ded9d7748b7 |
| permissions | -rwxr-xr-x |
| info@54 | 1 |
// |
| info@54 | 2 |
// Tooltips |
| info@54 | 3 |
// -------------------------------------------------- |
| info@54 | 4 |
|
| info@54 | 5 |
|
| info@54 | 6 |
// Base class |
| info@54 | 7 |
.tooltip {
|
| info@54 | 8 |
position: absolute; |
| info@54 | 9 |
z-index: @zindex-tooltip; |
| info@54 | 10 |
display: block; |
| info@54 | 11 |
visibility: visible; |
| info@54 | 12 |
font-size: @font-size-small; |
| info@54 | 13 |
line-height: 1.4; |
| info@54 | 14 |
.opacity(0); |
| info@54 | 15 |
|
| info@54 | 16 |
&.in { .opacity(.9); }
|
| info@54 | 17 |
&.top { margin-top: -3px; padding: @tooltip-arrow-width 0; }
|
| info@54 | 18 |
&.right { margin-left: 3px; padding: 0 @tooltip-arrow-width; }
|
| info@54 | 19 |
&.bottom { margin-top: 3px; padding: @tooltip-arrow-width 0; }
|
| info@54 | 20 |
&.left { margin-left: -3px; padding: 0 @tooltip-arrow-width; }
|
| info@54 | 21 |
} |
| info@54 | 22 |
|
| info@54 | 23 |
// Wrapper for the tooltip content |
| info@54 | 24 |
.tooltip-inner {
|
| info@54 | 25 |
max-width: @tooltip-max-width; |
| info@54 | 26 |
padding: 3px 8px; |
| info@54 | 27 |
color: @tooltip-color; |
| info@54 | 28 |
text-align: center; |
| info@54 | 29 |
text-decoration: none; |
| info@54 | 30 |
background-color: @tooltip-bg; |
| info@54 | 31 |
border-radius: @border-radius-base; |
| info@54 | 32 |
} |
| info@54 | 33 |
|
| info@54 | 34 |
// Arrows |
| info@54 | 35 |
.tooltip-arrow {
|
| info@54 | 36 |
position: absolute; |
| info@54 | 37 |
width: 0; |
| info@54 | 38 |
height: 0; |
| info@54 | 39 |
border-color: transparent; |
| info@54 | 40 |
border-style: solid; |
| info@54 | 41 |
} |
| info@54 | 42 |
.tooltip {
|
| info@54 | 43 |
&.top .tooltip-arrow {
|
| info@54 | 44 |
bottom: 0; |
| info@54 | 45 |
left: 50%; |
| info@54 | 46 |
margin-left: -@tooltip-arrow-width; |
| info@54 | 47 |
border-width: @tooltip-arrow-width @tooltip-arrow-width 0; |
| info@54 | 48 |
border-top-color: @tooltip-arrow-color; |
| info@54 | 49 |
} |
| info@54 | 50 |
&.top-left .tooltip-arrow {
|
| info@54 | 51 |
bottom: 0; |
| info@54 | 52 |
left: @tooltip-arrow-width; |
| info@54 | 53 |
border-width: @tooltip-arrow-width @tooltip-arrow-width 0; |
| info@54 | 54 |
border-top-color: @tooltip-arrow-color; |
| info@54 | 55 |
} |
| info@54 | 56 |
&.top-right .tooltip-arrow {
|
| info@54 | 57 |
bottom: 0; |
| info@54 | 58 |
right: @tooltip-arrow-width; |
| info@54 | 59 |
border-width: @tooltip-arrow-width @tooltip-arrow-width 0; |
| info@54 | 60 |
border-top-color: @tooltip-arrow-color; |
| info@54 | 61 |
} |
| info@54 | 62 |
&.right .tooltip-arrow {
|
| info@54 | 63 |
top: 50%; |
| info@54 | 64 |
left: 0; |
| info@54 | 65 |
margin-top: -@tooltip-arrow-width; |
| info@54 | 66 |
border-width: @tooltip-arrow-width @tooltip-arrow-width @tooltip-arrow-width 0; |
| info@54 | 67 |
border-right-color: @tooltip-arrow-color; |
| info@54 | 68 |
} |
| info@54 | 69 |
&.left .tooltip-arrow {
|
| info@54 | 70 |
top: 50%; |
| info@54 | 71 |
right: 0; |
| info@54 | 72 |
margin-top: -@tooltip-arrow-width; |
| info@54 | 73 |
border-width: @tooltip-arrow-width 0 @tooltip-arrow-width @tooltip-arrow-width; |
| info@54 | 74 |
border-left-color: @tooltip-arrow-color; |
| info@54 | 75 |
} |
| info@54 | 76 |
&.bottom .tooltip-arrow {
|
| info@54 | 77 |
top: 0; |
| info@54 | 78 |
left: 50%; |
| info@54 | 79 |
margin-left: -@tooltip-arrow-width; |
| info@54 | 80 |
border-width: 0 @tooltip-arrow-width @tooltip-arrow-width; |
| info@54 | 81 |
border-bottom-color: @tooltip-arrow-color; |
| info@54 | 82 |
} |
| info@54 | 83 |
&.bottom-left .tooltip-arrow {
|
| info@54 | 84 |
top: 0; |
| info@54 | 85 |
left: @tooltip-arrow-width; |
| info@54 | 86 |
border-width: 0 @tooltip-arrow-width @tooltip-arrow-width; |
| info@54 | 87 |
border-bottom-color: @tooltip-arrow-color; |
| info@54 | 88 |
} |
| info@54 | 89 |
&.bottom-right .tooltip-arrow {
|
| info@54 | 90 |
top: 0; |
| info@54 | 91 |
right: @tooltip-arrow-width; |
| info@54 | 92 |
border-width: 0 @tooltip-arrow-width @tooltip-arrow-width; |
| info@54 | 93 |
border-bottom-color: @tooltip-arrow-color; |
| info@54 | 94 |
} |
| info@54 | 95 |
} |