1//
2// Popovers
3// --------------------------------------------------
4
5
6.popover {
7  position: absolute;
8  top: 0;
9  left: 0;
10  z-index: @zindexPopover;
11  display: none;
12  max-width: 276px;
13  padding: 1px;
14  text-align: left; // Reset given new insertion method
15  background-color: @popoverBackground;
16  -webkit-background-clip: padding-box;
17     -moz-background-clip: padding;
18          background-clip: padding-box;
19  border: 1px solid #ccc;
20  border: 1px solid rgba(0,0,0,.2);
21  .border-radius(6px);
22  .box-shadow(0 5px 10px rgba(0,0,0,.2));
23
24  // Overrides for proper insertion
25  white-space: normal;
26
27  // Offset the popover to account for the popover arrow
28  &.top     { margin-top: -10px; }
29  &.right   { margin-left: 10px; }
30  &.bottom  { margin-top: 10px; }
31  &.left    { margin-left: -10px; }
32}
33
34.popover-title {
35  margin: 0; // reset heading margin
36  padding: 8px 14px;
37  font-size: 14px;
38  font-weight: normal;
39  line-height: 18px;
40  background-color: @popoverTitleBackground;
41  border-bottom: 1px solid darken(@popoverTitleBackground, 5%);
42  .border-radius(5px 5px 0 0);
43
44  &:empty {
45    display: none;
46  }
47}
48
49.popover-content {
50  padding: 9px 14px;
51}
52
53// Arrows
54//
55// .arrow is outer, .arrow:after is inner
56
57.popover .arrow,
58.popover .arrow:after {
59  position: absolute;
60  display: block;
61  width: 0;
62  height: 0;
63  border-color: transparent;
64  border-style: solid;
65}
66.popover .arrow {
67  border-width: @popoverArrowOuterWidth;
68}
69.popover .arrow:after {
70  border-width: @popoverArrowWidth;
71  content: "";
72}
73
74.popover {
75  &.top .arrow {
76    left: 50%;
77    margin-left: -@popoverArrowOuterWidth;
78    border-bottom-width: 0;
79    border-top-color: #999; // IE8 fallback
80    border-top-color: @popoverArrowOuterColor;
81    bottom: -@popoverArrowOuterWidth;
82    &:after {
83      bottom: 1px;
84      margin-left: -@popoverArrowWidth;
85      border-bottom-width: 0;
86      border-top-color: @popoverArrowColor;
87    }
88  }
89  &.right .arrow {
90    top: 50%;
91    left: -@popoverArrowOuterWidth;
92    margin-top: -@popoverArrowOuterWidth;
93    border-left-width: 0;
94    border-right-color: #999; // IE8 fallback
95    border-right-color: @popoverArrowOuterColor;
96    &:after {
97      left: 1px;
98      bottom: -@popoverArrowWidth;
99      border-left-width: 0;
100      border-right-color: @popoverArrowColor;
101    }
102  }
103  &.bottom .arrow {
104    left: 50%;
105    margin-left: -@popoverArrowOuterWidth;
106    border-top-width: 0;
107    border-bottom-color: #999; // IE8 fallback
108    border-bottom-color: @popoverArrowOuterColor;
109    top: -@popoverArrowOuterWidth;
110    &:after {
111      top: 1px;
112      margin-left: -@popoverArrowWidth;
113      border-top-width: 0;
114      border-bottom-color: @popoverArrowColor;
115    }
116  }
117
118  &.left .arrow {
119    top: 50%;
120    right: -@popoverArrowOuterWidth;
121    margin-top: -@popoverArrowOuterWidth;
122    border-right-width: 0;
123    border-left-color: #999; // IE8 fallback
124    border-left-color: @popoverArrowOuterColor;
125    &:after {
126      right: 1px;
127      border-right-width: 0;
128      border-left-color: @popoverArrowColor;
129      bottom: -@popoverArrowWidth;
130    }
131  }
132
133}
134