kotovalexarian-likes-github
/
twbs--bootstrap
mirror of https://github.com/twbs/bootstrap.git
1
0
Fork 0
Code Releases Activity

change up the z-indexing and add some popover/twipsy content to the test modal on the js docs to help avoid future bugs

This commit is contained in:
Mark Otto 2012-01-07 04:17:33 -08:00
parent 5ba7c14afe
commit e594107f37
6 changed files with 25 additions and 16 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
bootstrap.css vendored
View File

@ -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: Sat Jan 7 04:06:22 PST 2012
* Date: Sat Jan 7 04:15:19 PST 2012
*/
html, body {
margin: 0;
@ -2234,7 +2234,7 @@ i {
position: fixed;
top: 50%;
left: 50%;
z-index: 11000;
z-index: 1030;
max-height: 500px;
overflow: auto;
width: 560px;
@ -2304,7 +2304,7 @@ i {
}
.twipsy {
position: absolute;
z-index: 1000;
z-index: 1050;
display: block;
visibility: visible;
padding: 5px;
@ -2382,7 +2382,7 @@ i {
position: absolute;
top: 0;
left: 0;
z-index: 1020;
z-index: 1040;
display: none;
padding: 5px;
}

6
bootstrap.min.css vendored
View File

@ -376,7 +376,7 @@ i{background-image:url(docs/assets/img/glyphicons-halflings-sprite.png);backgrou
.pagination.centered{text-align:center;}
.modal-backdrop{position:fixed;top:0;right:0;bottom:0;left:0;z-index:1020;background-color:#000000;}.modal-backdrop.fade{opacity:0;}
.modal-backdrop,.modal-backdrop.fade.in{filter:alpha(opacity=80);-moz-opacity:0.8;opacity:0.8;}
.modal{position:fixed;top:50%;left:50%;z-index:11000;max-height:500px;overflow:auto;width:560px;margin:-250px 0 0 -250px;background-color:#ffffff;border:1px solid #999;border:1px solid rgba(0, 0, 0, 0.3);*border:1px solid #999;-webkit-border-radius:6px;-moz-border-radius:6px;border-radius:6px;-webkit-box-shadow:0 3px 7px rgba(0, 0, 0, 0.3);-moz-box-shadow:0 3px 7px rgba(0, 0, 0, 0.3);box-shadow:0 3px 7px rgba(0, 0, 0, 0.3);-webkit-background-clip:padding-box;-moz-background-clip:padding-box;background-clip:padding-box;}.modal .close{margin-top:7px;}
.modal{position:fixed;top:50%;left:50%;z-index:1030;max-height:500px;overflow:auto;width:560px;margin:-250px 0 0 -250px;background-color:#ffffff;border:1px solid #999;border:1px solid rgba(0, 0, 0, 0.3);*border:1px solid #999;-webkit-border-radius:6px;-moz-border-radius:6px;border-radius:6px;-webkit-box-shadow:0 3px 7px rgba(0, 0, 0, 0.3);-moz-box-shadow:0 3px 7px rgba(0, 0, 0, 0.3);box-shadow:0 3px 7px rgba(0, 0, 0, 0.3);-webkit-background-clip:padding-box;-moz-background-clip:padding-box;background-clip:padding-box;}.modal .close{margin-top:7px;}
.modal.fade{-webkit-transition:opacity .3s linear, top .3s ease-out;-moz-transition:opacity .3s linear, top .3s ease-out;-ms-transition:opacity .3s linear, top .3s ease-out;-o-transition:opacity .3s linear, top .3s ease-out;transition:opacity .3s linear, top .3s ease-out;top:-25%;}
.modal.fade.in{top:50%;}
.modal-header{padding:5px 15px;border-bottom:1px solid #eee;}
@ -384,7 +384,7 @@ i{background-image:url(docs/assets/img/glyphicons-halflings-sprite.png);backgrou
.modal-footer{padding:14px 15px 15px;margin-bottom:0;background-color:#f5f5f5;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;}.modal-footer:before,.modal-footer:after{display:table;*display:inline;content:"";zoom:1;}
.modal-footer:after{clear:both;}
.modal-footer .btn{float:right;margin-left:5px;}
.twipsy{position:absolute;z-index:1000;display:block;visibility:visible;padding:5px;font-size:11px;filter:alpha(opacity=0);-moz-opacity:0;opacity:0;}.twipsy.in{filter:alpha(opacity=80);-moz-opacity:0.8;opacity:0.8;}
.twipsy{position:absolute;z-index:1050;display:block;visibility:visible;padding:5px;font-size:11px;filter:alpha(opacity=0);-moz-opacity:0;opacity:0;}.twipsy.in{filter:alpha(opacity=80);-moz-opacity:0.8;opacity:0.8;}
.twipsy.top{margin-top:-2px;}
.twipsy.right{margin-left:2px;}
.twipsy.bottom{margin-top:2px;}
@ -395,7 +395,7 @@ i{background-image:url(docs/assets/img/glyphicons-halflings-sprite.png);backgrou
.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{max-width:200px;padding:3px 8px;color:white;text-align:center;text-decoration:none;background-color:#000000;-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:1020;display:none;padding:5px;}.popover.top{margin-top:-5px;}
.popover{position:absolute;top:0;left:0;z-index:1040;display:none;padding:5px;}.popover.top{margin-top:-5px;}
.popover.right{margin-left:5px;}
.popover.bottom{margin-top:5px;}
.popover.left{margin-left:-5px;}

10
docs/javascript.html
View File

@ -235,7 +235,14 @@ $('#myModal').on('hidden', function () {
<h3>Modal Heading</h3>
</div>
<div class="modal-body">
<p>One fine body…</p>
<h4>Text in a modal</h4>
<p>Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem.</p>
<h4>Popover in a modal</h4>
<p>This <a href="#" class="btn" rel="popover" title="A Title" data-content="And here's some amazing content. It's very engaging. right?">button</a> should trigger a popover on hover.</p>
<h4>Twipsy tooltips in a modal</h4>
<p><a href="#" class="twipsy-test" title="Tooltip">This link</a> and <a href="#" class="twipsy-test" title="Tooltip">that link</a> should have Twipsy tooltips on hover.</p>
</div>
<div class="modal-footer">
<a href="#" class="btn primary">Save changes</a>
@ -1144,6 +1151,7 @@ $('.myCarousel').carousel({
$('.twipsy-demo.well').twipsy({
selector: "a[rel=twipsy]"
})
$('.twipsy-test').twipsy()
// popover demo
$("a[rel=popover]")

2
lib/dropdowns.less
View File

@ -27,7 +27,7 @@
.dropdown-menu {
position: absolute;
top: 40px;
z-index: @zindexDropdowns;
z-index: @zindexDropdown;
float: left;
display: none; // none by default, but block on "open" of the menu
min-width: 160px;

4
lib/modals.less
View File

@ -7,7 +7,7 @@
right: 0;
bottom: 0;
left: 0;
z-index: @zindexPopover;
z-index: @zindexModalBackdrop;
background-color: @black;
// Fade for backdrop
&.fade { opacity: 0; }
@ -22,7 +22,7 @@
position: fixed;
top: 50%;
left: 50%;
z-index: 11000;
z-index: @zindexModal;
max-height: 500px;
overflow: auto;
width: 560px;

11
lib/variables.less
View File

@ -49,11 +49,12 @@
// Z-INDEX
// -------
@zindexDropdowns: 1000;
@zindexTwipsy: 1000;
@zindexFixedNavbar: 1010;
@zindexPopover: 1020;
@zindexModal: 1030;
@zindexDropdown: 1000;
@zindexFixedNavbar: 1010;
@zindexModalBackdrop: 1020;
@zindexModal: 1030;
@zindexPopover: 1040;
@zindexTwipsy: 1050;
// THEME VARIABLES