source: trip-planner-front/node_modules/bootstrap/less/tooltip.less@ 6c1585f

Last change on this file since 6c1585f was fa375fe, checked in by Ema <ema_spirova@…>, 3 years ago

adding new components

  • Property mode set to 100644
File size: 2.9 KB
Line 
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 {
20 padding: @tooltip-arrow-width 0;
21 margin-top: -3px;
22 }
23 &.right {
24 padding: 0 @tooltip-arrow-width;
25 margin-left: 3px;
26 }
27 &.bottom {
28 padding: @tooltip-arrow-width 0;
29 margin-top: 3px;
30 }
31 &.left {
32 padding: 0 @tooltip-arrow-width;
33 margin-left: -3px;
34 }
35
36 // Note: Deprecated .top-left, .top-right, .bottom-left, and .bottom-right as of v3.3.1
37 &.top .tooltip-arrow {
38 bottom: 0;
39 left: 50%;
40 margin-left: -@tooltip-arrow-width;
41 border-width: @tooltip-arrow-width @tooltip-arrow-width 0;
42 border-top-color: @tooltip-arrow-color;
43 }
44 &.top-left .tooltip-arrow {
45 right: @tooltip-arrow-width;
46 bottom: 0;
47 margin-bottom: -@tooltip-arrow-width;
48 border-width: @tooltip-arrow-width @tooltip-arrow-width 0;
49 border-top-color: @tooltip-arrow-color;
50 }
51 &.top-right .tooltip-arrow {
52 bottom: 0;
53 left: @tooltip-arrow-width;
54 margin-bottom: -@tooltip-arrow-width;
55 border-width: @tooltip-arrow-width @tooltip-arrow-width 0;
56 border-top-color: @tooltip-arrow-color;
57 }
58 &.right .tooltip-arrow {
59 top: 50%;
60 left: 0;
61 margin-top: -@tooltip-arrow-width;
62 border-width: @tooltip-arrow-width @tooltip-arrow-width @tooltip-arrow-width 0;
63 border-right-color: @tooltip-arrow-color;
64 }
65 &.left .tooltip-arrow {
66 top: 50%;
67 right: 0;
68 margin-top: -@tooltip-arrow-width;
69 border-width: @tooltip-arrow-width 0 @tooltip-arrow-width @tooltip-arrow-width;
70 border-left-color: @tooltip-arrow-color;
71 }
72 &.bottom .tooltip-arrow {
73 top: 0;
74 left: 50%;
75 margin-left: -@tooltip-arrow-width;
76 border-width: 0 @tooltip-arrow-width @tooltip-arrow-width;
77 border-bottom-color: @tooltip-arrow-color;
78 }
79 &.bottom-left .tooltip-arrow {
80 top: 0;
81 right: @tooltip-arrow-width;
82 margin-top: -@tooltip-arrow-width;
83 border-width: 0 @tooltip-arrow-width @tooltip-arrow-width;
84 border-bottom-color: @tooltip-arrow-color;
85 }
86 &.bottom-right .tooltip-arrow {
87 top: 0;
88 left: @tooltip-arrow-width;
89 margin-top: -@tooltip-arrow-width;
90 border-width: 0 @tooltip-arrow-width @tooltip-arrow-width;
91 border-bottom-color: @tooltip-arrow-color;
92 }
93}
94
95// Wrapper for the tooltip content
96.tooltip-inner {
97 max-width: @tooltip-max-width;
98 padding: 3px 8px;
99 color: @tooltip-color;
100 text-align: center;
101 background-color: @tooltip-bg;
102 border-radius: @border-radius-base;
103}
104
105// Arrows
106.tooltip-arrow {
107 position: absolute;
108 width: 0;
109 height: 0;
110 border-color: transparent;
111 border-style: solid;
112}
Note: See TracBrowser for help on using the repository browser.