summaryrefslogtreecommitdiffstats
path: root/css/bootstrap/popovers.less
diff options
context:
space:
mode:
Diffstat (limited to 'css/bootstrap/popovers.less')
-rw-r--r--css/bootstrap/popovers.less150
1 files changed, 83 insertions, 67 deletions
diff --git a/css/bootstrap/popovers.less b/css/bootstrap/popovers.less
index 2b3f1b0..696d74c 100644
--- a/css/bootstrap/popovers.less
+++ b/css/bootstrap/popovers.less
@@ -7,111 +7,127 @@
position: absolute;
top: 0;
left: 0;
- z-index: @zindexPopover;
+ z-index: @zindex-popover;
display: none;
- width: 236px;
+ max-width: @popover-max-width;
padding: 1px;
- background-color: @popoverBackground;
- -webkit-background-clip: padding-box;
- -moz-background-clip: padding;
- background-clip: padding-box;
- border: 1px solid #ccc;
- border: 1px solid rgba(0,0,0,.2);
- .border-radius(6px);
+ text-align: left; // Reset given new insertion method
+ background-color: @popover-bg;
+ background-clip: padding-box;
+ border: 1px solid @popover-fallback-border-color;
+ border: 1px solid @popover-border-color;
+ border-radius: @border-radius-large;
.box-shadow(0 5px 10px rgba(0,0,0,.2));
- // Offset the popover to account for the popover arrow
- &.top { margin-bottom: 10px; }
- &.right { margin-left: 10px; }
- &.bottom { margin-top: 10px; }
- &.left { margin-right: 10px; }
+ // Overrides for proper insertion
+ white-space: normal;
+ // Offset the popover to account for the popover arrow
+ &.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: 14px;
+ font-size: @font-size-base;
font-weight: normal;
line-height: 18px;
- background-color: @popoverTitleBackground;
- border-bottom: 1px solid darken(@popoverTitleBackground, 5%);
- .border-radius(5px 5px 0 0);
+ background-color: @popover-title-bg;
+ border-bottom: 1px solid darken(@popover-title-bg, 5%);
+ border-radius: 5px 5px 0 0;
}
.popover-content {
padding: 9px 14px;
- p, ul, ol {
- margin-bottom: 0;
- }
}
// Arrows
-.popover .arrow,
-.popover .arrow:after {
- position: absolute;
- display: inline-block;
- width: 0;
- height: 0;
- border-color: transparent;
- border-style: solid;
+//
+// .arrow is outer, .arrow:after is inner
+
+.popover > .arrow {
+ &,
+ &:after {
+ position: absolute;
+ display: block;
+ width: 0;
+ height: 0;
+ border-color: transparent;
+ border-style: solid;
+ }
+}
+.popover > .arrow {
+ border-width: @popover-arrow-outer-width;
}
-.popover .arrow:after {
+.popover > .arrow:after {
+ border-width: @popover-arrow-width;
content: "";
- z-index: -1;
}
.popover {
- &.top .arrow {
- bottom: -@popoverArrowWidth;
+ &.top > .arrow {
left: 50%;
- margin-left: -@popoverArrowWidth;
- border-width: @popoverArrowWidth @popoverArrowWidth 0;
- border-top-color: @popoverArrowColor;
+ margin-left: -@popover-arrow-outer-width;
+ border-bottom-width: 0;
+ border-top-color: @popover-arrow-outer-fallback-color; // IE8 fallback
+ border-top-color: @popover-arrow-outer-color;
+ bottom: -@popover-arrow-outer-width;
&:after {
- border-width: @popoverArrowOuterWidth @popoverArrowOuterWidth 0;
- border-top-color: @popoverArrowOuterColor;
- bottom: -1px;
- left: -@popoverArrowOuterWidth;
+ content: " ";
+ bottom: 1px;
+ margin-left: -@popover-arrow-width;
+ border-bottom-width: 0;
+ border-top-color: @popover-arrow-color;
}
}
- &.right .arrow {
+ &.right > .arrow {
top: 50%;
- left: -@popoverArrowWidth;
- margin-top: -@popoverArrowWidth;
- border-width: @popoverArrowWidth @popoverArrowWidth @popoverArrowWidth 0;
- border-right-color: @popoverArrowColor;
+ left: -@popover-arrow-outer-width;
+ margin-top: -@popover-arrow-outer-width;
+ border-left-width: 0;
+ border-right-color: @popover-arrow-outer-fallback-color; // IE8 fallback
+ border-right-color: @popover-arrow-outer-color;
&:after {
- border-width: @popoverArrowOuterWidth @popoverArrowOuterWidth @popoverArrowOuterWidth 0;
- border-right-color: @popoverArrowOuterColor;
- bottom: -@popoverArrowOuterWidth;
- left: -1px;
+ content: " ";
+ left: 1px;
+ bottom: -@popover-arrow-width;
+ border-left-width: 0;
+ border-right-color: @popover-arrow-color;
}
}
- &.bottom .arrow {
- top: -@popoverArrowWidth;
+ &.bottom > .arrow {
left: 50%;
- margin-left: -@popoverArrowWidth;
- border-width: 0 @popoverArrowWidth @popoverArrowWidth;
- border-bottom-color: @popoverArrowColor;
+ margin-left: -@popover-arrow-outer-width;
+ border-top-width: 0;
+ border-bottom-color: @popover-arrow-outer-fallback-color; // IE8 fallback
+ border-bottom-color: @popover-arrow-outer-color;
+ top: -@popover-arrow-outer-width;
&:after {
- border-width: 0 @popoverArrowOuterWidth @popoverArrowOuterWidth;
- border-bottom-color: @popoverArrowOuterColor;
- top: -1px;
- left: -@popoverArrowOuterWidth;
+ content: " ";
+ top: 1px;
+ margin-left: -@popover-arrow-width;
+ border-top-width: 0;
+ border-bottom-color: @popover-arrow-color;
}
}
- &.left .arrow {
+
+ &.left > .arrow {
top: 50%;
- right: -@popoverArrowWidth;
- margin-top: -@popoverArrowWidth;
- border-width: @popoverArrowWidth 0 @popoverArrowWidth @popoverArrowWidth;
- border-left-color: @popoverArrowColor;
+ right: -@popover-arrow-outer-width;
+ margin-top: -@popover-arrow-outer-width;
+ border-right-width: 0;
+ border-left-color: @popover-arrow-outer-fallback-color; // IE8 fallback
+ border-left-color: @popover-arrow-outer-color;
&:after {
- border-width: @popoverArrowOuterWidth 0 @popoverArrowOuterWidth @popoverArrowOuterWidth;
- border-left-color: @popoverArrowOuterColor;
- bottom: -@popoverArrowOuterWidth;
- right: -1px;
+ content: " ";
+ right: 1px;
+ border-right-width: 0;
+ border-left-color: @popover-arrow-color;
+ bottom: -@popover-arrow-width;
}
}
+
}