mirrors/bootstrap
2
0
Fork 0
mirror of https://github.com/tenrok/bootstrap.git synced 2026-06-08 17:22:31 +03:00
Code Activity

remove popoverarrows mixin, relegate code to tooltips and popvers since we only used them once each; this fixes the problem of broken tooltips in 2.1

Browse Source
This commit is contained in:
Mark Otto
2012-07-09 22:14:30 -07:00
parent f4877c2369
commit 64e87a85f5
8 changed files with 275 additions and 263 deletions
Download Patch File Download Diff File Expand all files Collapse all files
less/mixins.less
+1 -69
View File
@@ -508,75 +508,7 @@
margin-top: (@navbarHeight - @elementHeight) / 2;
}
// Popover arrows
// -------------------------
// For tipsies and popovers
#popoverArrow {
.top(@arrowWidth: 10px, @color: rgba(0,0,0,.2)) {
bottom: -@arrowWidth;
left: 50%;
margin-left: -@arrowWidth;
border-left: @arrowWidth solid transparent;
border-right: @arrowWidth solid transparent;
border-top: @arrowWidth solid #ccc;
border-top: @arrowWidth solid @color;
&:after {
border-left: @arrowWidth - 1 solid transparent;
border-right: @arrowWidth - 1 solid transparent;
border-top: @arrowWidth - 1 solid #fff;
bottom: 1px;
left: -@arrowWidth + 1;
}
}
.right(@arrowWidth: 10px, @color: rgba(0,0,0,.2)) {
top: 50%;
left: -@arrowWidth;
margin-top: -@arrowWidth;
border-top: @arrowWidth solid transparent;
border-bottom: @arrowWidth solid transparent;
border-right: @arrowWidth solid #ccc;
border-right: @arrowWidth solid @color;
&:after {
border-top: @arrowWidth - 1 solid transparent;
border-bottom: @arrowWidth - 1 solid transparent;
border-right: @arrowWidth - 1 solid #fff;
bottom: -@arrowWidth + 1;
left: 1px;
}
}
.bottom(@arrowWidth: 10px, @color: rgba(0,0,0,.2)) {
top: -@arrowWidth;
left: 50%;
margin-left: -@arrowWidth;
border-left: @arrowWidth solid transparent;
border-right: @arrowWidth solid transparent;
border-bottom: @arrowWidth solid #ccc;
border-bottom: @arrowWidth solid @color;
&:after {
border-left: @arrowWidth - 1 solid transparent;
border-right: @arrowWidth - 1 solid transparent;
border-bottom: @arrowWidth - 1 solid #f5f5f5;
top: 1px;
left: -@arrowWidth + 1;
}
}
.left(@arrowWidth: 10px, @color: rgba(0,0,0,.2)) {
top: 50%;
right: -@arrowWidth;
margin-top: -@arrowWidth;
border-top: @arrowWidth solid transparent;
border-bottom: @arrowWidth solid transparent;
border-left: @arrowWidth solid #ccc;
border-left: @arrowWidth solid @color;
&:after {
border-top: @arrowWidth - 1 solid transparent;
border-bottom: @arrowWidth - 1 solid transparent;
border-left: @arrowWidth - 1 solid #fff;
bottom: -@arrowWidth + 1;
right: 1px;
}
}
}
// Grid System
// -----------
less/popovers.less
+72 -21
View File
@@ -25,25 +25,6 @@
&.bottom { margin-top: 10px; }
&.left { margin-right: 10px; }
// Call the mixin for the arrows
&.top .arrow { #popoverArrow > .top(); }
&.right .arrow { #popoverArrow > .right(); }
&.bottom .arrow { #popoverArrow > .bottom(); }
&.left .arrow { #popoverArrow > .left(); }
// Common arrow styles
.arrow {
position: absolute;
width: 0;
height: 0;
&:after {
position: absolute;
display: inline-block;
width: 0;
height: 0;
content: "";
}
}
}
.popover-title {
@@ -52,8 +33,8 @@
font-size: 14px;
font-weight: normal;
line-height: 18px;
background-color: #f5f5f5;
border-bottom: 1px solid #e5e5e5;
background-color: @popoverTitleBackground;
border-bottom: 1px solid darken(@popoverTitleBackground, 10%);
.border-radius(5px 5px 0 0);
}
@@ -63,3 +44,73 @@
margin-bottom: 0;
}
}
// Arrows
.popover .arrow,
.popover .arrow:after {
position: absolute;
display: inline-block;
width: 0;
height: 0;
border-color: transparent;
border-style: solid;
}
.popover .arrow:after {
content: "";
z-index: -1;
}
.popover {
&.top .arrow {
bottom: -@popoverArrowWidth;
left: 50%;
margin-left: -@popoverArrowWidth;
border-width: @popoverArrowWidth @popoverArrowWidth 0;
border-top-color: @popoverArrowColor;
&:after {
border-width: @popoverArrowOuterWidth @popoverArrowOuterWidth 0;
border-top-color: @popoverArrowOuterColor;
bottom: -1px;
left: -@popoverArrowOuterWidth;
}
}
&.right .arrow {
top: 50%;
left: -@popoverArrowWidth;
margin-top: -@popoverArrowWidth;
border-width: @popoverArrowWidth @popoverArrowWidth @popoverArrowWidth 0;
border-right-color: @popoverArrowColor;
&:after {
border-width: @popoverArrowOuterWidth @popoverArrowOuterWidth @popoverArrowOuterWidth 0;
border-right-color: @popoverArrowOuterColor;
bottom: -@popoverArrowOuterWidth;
left: -1px;
}
}
&.bottom .arrow {
top: -@popoverArrowWidth;
left: 50%;
margin-left: -@popoverArrowWidth;
border-width: 0 @popoverArrowWidth @popoverArrowWidth;
border-bottom-color: @popoverTitleBackground;
&:after {
border-width: 0 @popoverArrowOuterWidth @popoverArrowOuterWidth;
border-bottom-color: @popoverArrowOuterColor;
top: -1px;
left: -@popoverArrowOuterWidth;
}
}
&.left .arrow {
top: 50%;
right: -@popoverArrowWidth;
margin-top: -@popoverArrowWidth;
border-width: @popoverArrowWidth 0 @popoverArrowWidth @popoverArrowWidth;
border-left-color: @popoverArrowColor;
&:after {
border-width: @popoverArrowOuterWidth 0 @popoverArrowOuterWidth @popoverArrowOuterWidth;
border-left-color: @popoverArrowOuterColor;
bottom: -@popoverArrowOuterWidth;
right: -1px;
}
}
}
less/tooltip.less
+41 -8
View File
@@ -3,6 +3,7 @@
// --------------------------------------------------
// Base class
.tooltip {
position: absolute;
z-index: @zindexTooltip;
@@ -12,15 +13,13 @@
font-size: 11px;
.opacity(0);
&.in { .opacity(80); }
&.top { margin-top: -2px; }
&.right { margin-left: 2px; }
&.bottom { margin-top: 2px; }
&.left { margin-left: -2px; }
&.top .tooltip-arrow { #popoverArrow > .top(); }
&.left .tooltip-arrow { #popoverArrow > .left(); }
&.bottom .tooltip-arrow { #popoverArrow > .bottom(); }
&.right .tooltip-arrow { #popoverArrow > .right(); }
&.top { margin-top: -3px; }
&.right { margin-left: 3px; }
&.bottom { margin-top: 3px; }
&.left { margin-left: -3px; }
}
// Wrapper for the tooltip content
.tooltip-inner {
max-width: 200px;
padding: 3px 8px;
@@ -30,8 +29,42 @@
background-color: @black;
.border-radius(4px);
}
// Arrows
.tooltip-arrow {
position: absolute;
width: 0;
height: 0;
border-color: transparent;
border-style: solid;
}
.tooltip {
&.top .tooltip-arrow {
bottom: 0;
left: 50%;
margin-left: -@tooltipArrowWidth;
border-width: @tooltipArrowWidth @tooltipArrowWidth 0;
border-top-color: @tooltipArrowColor;
}
&.right .tooltip-arrow {
top: 50%;
left: 0;
margin-top: -@tooltipArrowWidth;
border-width: @tooltipArrowWidth @tooltipArrowWidth @tooltipArrowWidth 0;
border-right-color: @tooltipArrowColor;
}
&.left .tooltip-arrow {
top: 50%;
right: 0;
margin-top: -@tooltipArrowWidth;
border-width: @tooltipArrowWidth 0 @tooltipArrowWidth @tooltipArrowWidth;
border-left-color: @tooltipArrowColor;
}
&.bottom .tooltip-arrow {
top: 0;
left: 50%;
margin-left: -@tooltipArrowWidth;
border-width: 0 @tooltipArrowWidth @tooltipArrowWidth;
border-bottom-color: @tooltipArrowColor;
}
}
less/variables.less
+14
View File
@@ -198,6 +198,20 @@
@infoBorder: darken(spin(@infoBackground, -10), 7%);
// Tooltips and popovers
// -------------------------
@tooltipArrowWidth: 5px;
@tooltipArrowColor: #000;
@popoverArrowWidth: 10px;
@popoverArrowColor: #fff;
@popoverTitleBackground: #f5f5f5;
// Special enhancement for popovers
@popoverArrowOuterWidth: @popoverArrowWidth + 1;
@popoverArrowOuterColor: rgba(0,0,0,.2);
// GRID
// --------------------------------------------------