display: none;
max-width: @popover-max-width;
padding: 1px;
- text-align: left; // Reset given new insertion method
+ // Our parent element can be arbitrary since popovers are by default inserted as a sibling of their target element.
+ // So reset our font and text properties to avoid inheriting weird values.
+ .reset-text();
+ font-size: @font-size-base;
+
background-color: @popover-bg;
background-clip: padding-box;
border: 1px solid @popover-fallback-border-color;
border-radius: @border-radius-large;
.box-shadow(0 5px 10px rgba(0,0,0,.2));
- // Overrides for proper insertion
- white-space: normal;
-
// Offset the popover to account for the popover arrow
- &.top { margin-top: -10px; }
- &.right { margin-left: 10px; }
- &.bottom { margin-top: 10px; }
- &.left { margin-left: -10px; }
+ &.top { margin-top: -@popover-arrow-width; }
+ &.right { margin-left: @popover-arrow-width; }
+ &.bottom { margin-top: @popover-arrow-width; }
+ &.left { margin-left: -@popover-arrow-width; }
}
.popover-title {
margin: 0; // reset heading margin
padding: 8px 14px;
font-size: @font-size-base;
- font-weight: normal;
- line-height: 18px;
background-color: @popover-title-bg;
border-bottom: 1px solid darken(@popover-title-bg, 5%);
- border-radius: 5px 5px 0 0;
+ border-radius: (@border-radius-large - 1) (@border-radius-large - 1) 0 0;
}
.popover-content {
//
// .arrow is outer, .arrow:after is inner
-.popover .arrow {
+.popover > .arrow {
&,
&:after {
position: absolute;
border-style: solid;
}
}
-.popover .arrow {
+.popover > .arrow {
border-width: @popover-arrow-outer-width;
}
-.popover .arrow:after {
+.popover > .arrow:after {
border-width: @popover-arrow-width;
content: "";
}
.popover {
- &.top .arrow {
+ &.top > .arrow {
left: 50%;
margin-left: -@popover-arrow-outer-width;
border-bottom-width: 0;
border-top-color: @popover-arrow-color;
}
}
- &.right .arrow {
+ &.right > .arrow {
top: 50%;
left: -@popover-arrow-outer-width;
margin-top: -@popover-arrow-outer-width;
border-right-color: @popover-arrow-color;
}
}
- &.bottom .arrow {
+ &.bottom > .arrow {
left: 50%;
margin-left: -@popover-arrow-outer-width;
border-top-width: 0;
}
}
- &.left .arrow {
+ &.left > .arrow {
top: 50%;
right: -@popover-arrow-outer-width;
margin-top: -@popover-arrow-outer-width;
bottom: -@popover-arrow-width;
}
}
-
}