fix tipsies, modals, and popovers from overlaying topbar

diff --git a/bootstrap.css b/bootstrap.css
index 1d4627ceb135248a9e155eb3d52f8fdb795d6e8f..56feacf9c32cd871e11b0c03a5da5fb027d8629f 100644 (file)
--- a/bootstrap.css
+++ b/bootstrap.css
@@ -6,7 +6,7 @@
  * http://www.apache.org/licenses/LICENSE-2.0
  *
  * Designed and built with all the love in the world @twitter by @mdo and @fat.
- * Date: Mon Oct 31 23:27:57 PDT 2011
+ * Date: Wed Nov  2 00:03:55 PDT 2011
  */
 /* Reset.less
  * Props to Eric Meyer (meyerweb.com) for his CSS reset file. We're using an adapted version here      that cuts out some of the reset HTML elements we will never need here (i.e., dfn, samp, etc).
@@ -2241,13 +2241,16 @@ button.btn::-moz-focus-inner, input[type=submit].btn::-moz-focus-inner {
   float: right;
   margin-left: 5px;
 }
+.modal .popover, .modal .twipsy {
+  z-index: 12000;
+}
 .twipsy {
   display: block;
   position: absolute;
   visibility: visible;
   padding: 5px;
   font-size: 11px;
-  z-index: 12000;
+  z-index: 1000;
   filter: alpha(opacity=80);
   -khtml-opacity: 0.8;
   -moz-opacity: 0.8;
@@ -2311,7 +2314,7 @@ button.btn::-moz-focus-inner, input[type=submit].btn::-moz-focus-inner {
   position: absolute;
   top: 0;
   left: 0;
-  z-index: 12000;
+  z-index: 1000;
   padding: 5px;
   display: none;
 }

diff --git a/bootstrap.min.css b/bootstrap.min.css
index f1b2fb663b221e66b77ab8c758a73ebe0e6c9b63..28f1e25f473539f6ffbf58bf4f9cb36bb8a83573 100644 (file)
--- a/bootstrap.min.css
+++ b/bootstrap.min.css
@@ -328,14 +328,15 @@ button.btn::-moz-focus-inner,input[type=submit].btn::-moz-focus-inner{padding:0;
 .modal-footer{background-color:#f5f5f5;padding:14px 15px 15px;border-top:1px solid #ddd;-webkit-border-radius:0 0 6px 6px;-moz-border-radius:0 0 6px 6px;border-radius:0 0 6px 6px;-webkit-box-shadow:inset 0 1px 0 #ffffff;-moz-box-shadow:inset 0 1px 0 #ffffff;box-shadow:inset 0 1px 0 #ffffff;zoom:1;margin-bottom:0;}.modal-footer:before,.modal-footer:after{display:table;content:"";zoom:1;}
 .modal-footer:after{clear:both;}
 .modal-footer .btn{float:right;margin-left:5px;}
-.twipsy{display:block;position:absolute;visibility:visible;padding:5px;font-size:11px;z-index:12000;filter:alpha(opacity=80);-khtml-opacity:0.8;-moz-opacity:0.8;opacity:0.8;}.twipsy.fade.in{filter:alpha(opacity=80);-khtml-opacity:0.8;-moz-opacity:0.8;opacity:0.8;}
+.modal .popover,.modal .twipsy{z-index:12000;}
+.twipsy{display:block;position:absolute;visibility:visible;padding:5px;font-size:11px;z-index:1000;filter:alpha(opacity=80);-khtml-opacity:0.8;-moz-opacity:0.8;opacity:0.8;}.twipsy.fade.in{filter:alpha(opacity=80);-khtml-opacity:0.8;-moz-opacity:0.8;opacity:0.8;}
 .twipsy.above .twipsy-arrow{bottom:0;left:50%;margin-left:-5px;border-left:5px solid transparent;border-right:5px solid transparent;border-top:5px solid #000000;}
 .twipsy.left .twipsy-arrow{top:50%;right:0;margin-top:-5px;border-top:5px solid transparent;border-bottom:5px solid transparent;border-left:5px solid #000000;}
 .twipsy.below .twipsy-arrow{top:0;left:50%;margin-left:-5px;border-left:5px solid transparent;border-right:5px solid transparent;border-bottom:5px solid #000000;}
 .twipsy.right .twipsy-arrow{top:50%;left:0;margin-top:-5px;border-top:5px solid transparent;border-bottom:5px solid transparent;border-right:5px solid #000000;}
 .twipsy-inner{padding:3px 8px;background-color:#000000;color:white;text-align:center;max-width:200px;text-decoration:none;-webkit-border-radius:4px;-moz-border-radius:4px;border-radius:4px;}
 .twipsy-arrow{position:absolute;width:0;height:0;}
-.popover{position:absolute;top:0;left:0;z-index:12000;padding:5px;display:none;}.popover.above .arrow{bottom:0;left:50%;margin-left:-5px;border-left:5px solid transparent;border-right:5px solid transparent;border-top:5px solid #000000;}
+.popover{position:absolute;top:0;left:0;z-index:1000;padding:5px;display:none;}.popover.above .arrow{bottom:0;left:50%;margin-left:-5px;border-left:5px solid transparent;border-right:5px solid transparent;border-top:5px solid #000000;}
 .popover.right .arrow{top:50%;left:0;margin-top:-5px;border-top:5px solid transparent;border-bottom:5px solid transparent;border-right:5px solid #000000;}
 .popover.below .arrow{top:0;left:50%;margin-left:-5px;border-left:5px solid transparent;border-right:5px solid transparent;border-bottom:5px solid #000000;}
 .popover.left .arrow{top:50%;right:0;margin-top:-5px;border-top:5px solid transparent;border-bottom:5px solid transparent;border-left:5px solid #000000;}

diff --git a/lib/patterns.less b/lib/patterns.less
index edbaf625dbfcfb7c571a2a6906fb0d3b42d9478a..1ba7fa3fdb1ae26ad9f506e1758b4552a8540fe9 100644 (file)
--- a/lib/patterns.less
+++ b/lib/patterns.less
@@ -872,6 +872,12 @@ input[type=submit].btn {
   }
 }
 
+// Fix the stacking of these components when in modals
+.modal .popover,
+.modal .twipsy {
+  z-index: 12000;
+}
+
 
 // POPOVER ARROWS
 // --------------
@@ -920,7 +926,7 @@ input[type=submit].btn {
   visibility: visible;
   padding: 5px;
   font-size: 11px;
-  z-index: 12000;
+  z-index: 1000;
   .opacity(80);
   &.fade.in {
     .opacity(80);
@@ -953,7 +959,7 @@ input[type=submit].btn {
   position: absolute;
   top: 0;
   left: 0;
-  z-index: 12000;
+  z-index: 1000;
   padding: 5px;
   display: none;
   &.above .arrow { #popoverArrow > .above(); }