pyc-website
main website for pyc inc.
git clone https://9o.is/git/pyc-website.git
tooltip.less
(2576B)
1 //
2 // Tooltips
3 // --------------------------------------------------
4
5
6 // Base class
7 .tooltip {
8 position: absolute;
9 z-index: @zindex-tooltip;
10 display: block;
11 visibility: visible;
12 font-size: @font-size-small;
13 line-height: 1.4;
14 .opacity(0);
15
16 &.in { .opacity(.9); }
17 &.top { margin-top: -3px; padding: @tooltip-arrow-width 0; }
18 &.right { margin-left: 3px; padding: 0 @tooltip-arrow-width; }
19 &.bottom { margin-top: 3px; padding: @tooltip-arrow-width 0; }
20 &.left { margin-left: -3px; padding: 0 @tooltip-arrow-width; }
21 }
22
23 // Wrapper for the tooltip content
24 .tooltip-inner {
25 max-width: @tooltip-max-width;
26 padding: 3px 8px;
27 color: @tooltip-color;
28 text-align: center;
29 text-decoration: none;
30 background-color: @tooltip-bg;
31 border-radius: @border-radius-base;
32 }
33
34 // Arrows
35 .tooltip-arrow {
36 position: absolute;
37 width: 0;
38 height: 0;
39 border-color: transparent;
40 border-style: solid;
41 }
42 .tooltip {
43 &.top .tooltip-arrow {
44 bottom: 0;
45 left: 50%;
46 margin-left: -@tooltip-arrow-width;
47 border-width: @tooltip-arrow-width @tooltip-arrow-width 0;
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;
61 }
62 &.right .tooltip-arrow {
63 top: 50%;
64 left: 0;
65 margin-top: -@tooltip-arrow-width;
66 border-width: @tooltip-arrow-width @tooltip-arrow-width @tooltip-arrow-width 0;
67 border-right-color: @tooltip-arrow-color;
68 }
69 &.left .tooltip-arrow {
70 top: 50%;
71 right: 0;
72 margin-top: -@tooltip-arrow-width;
73 border-width: @tooltip-arrow-width 0 @tooltip-arrow-width @tooltip-arrow-width;
74 border-left-color: @tooltip-arrow-color;
75 }
76 &.bottom .tooltip-arrow {
77 top: 0;
78 left: 50%;
79 margin-left: -@tooltip-arrow-width;
80 border-width: 0 @tooltip-arrow-width @tooltip-arrow-width;
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;
94 }
95 }