From 5ba7c14afe0fbe1eb9ba18e6a06cc298362ec159 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Sat, 7 Jan 2012 04:07:53 -0800 Subject: [PATCH] another quick pass at ranking all zindexes and listing them in variables for quick overview and editing later --- bootstrap.css | 10 +++++----- bootstrap.min.css | 8 ++++---- lib/dropdowns.less | 2 +- lib/modals.less | 2 +- lib/navbar.less | 2 +- lib/popovers.less | 2 +- lib/twipsy.less | 2 +- lib/variables.less | 11 ++++++++++- 8 files changed, 24 insertions(+), 15 deletions(-) diff --git a/bootstrap.css b/bootstrap.css index 187c469181..273cbfa69e 100644 --- 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: Sat Jan 7 04:00:34 PST 2012 + * Date: Sat Jan 7 04:06:22 PST 2012 */ html, body { margin: 0; @@ -1714,7 +1714,7 @@ i { top: 0; right: 0; left: 0; - z-index: 999; + z-index: 1010; } .nav { position: relative; @@ -2219,7 +2219,7 @@ i { right: 0; bottom: 0; left: 0; - z-index: 10000; + z-index: 1020; background-color: #000000; } .modal-backdrop.fade { @@ -2304,7 +2304,7 @@ i { } .twipsy { position: absolute; - z-index: 1005; + z-index: 1000; display: block; visibility: visible; padding: 5px; @@ -2382,7 +2382,7 @@ i { position: absolute; top: 0; left: 0; - z-index: 1005; + z-index: 1020; display: none; padding: 5px; } diff --git a/bootstrap.min.css b/bootstrap.min.css index 89d77e783a..395f287d6b 100644 --- a/bootstrap.min.css +++ b/bootstrap.min.css @@ -306,7 +306,7 @@ i{background-image:url(docs/assets/img/glyphicons-halflings-sprite.png);backgrou .navbar-search .search-query:focus,.navbar-search .search-query.focused{padding:5px 10px;color:#333333;text-shadow:0 1px 0 #ffffff;background-color:#ffffff;border:0;-webkit-box-shadow:0 0 3px rgba(0, 0, 0, 0.15);-moz-box-shadow:0 0 3px rgba(0, 0, 0, 0.15);box-shadow:0 0 3px rgba(0, 0, 0, 0.15);outline:0;} .navbar-static{margin-bottom:18px;} .navbar-static .navbar-inner{padding-left:20px;padding-right:20px;-webkit-border-radius:4px;-moz-border-radius:4px;border-radius:4px;} -.navbar-fixed{position:fixed;top:0;right:0;left:0;z-index:999;} +.navbar-fixed{position:fixed;top:0;right:0;left:0;z-index:1010;} .nav{position:relative;left:0;display:block;float:left;margin:0 10px 0 0;}.nav>li{display:block;float:left;} .nav a{display:block;float:none;padding:10px 10px 11px;line-height:19px;color:#999999;text-decoration:none;text-shadow:0 -1px 0 rgba(0, 0, 0, 0.25);}.nav a:hover{color:#ffffff;text-decoration:none;} .nav .active>a{background-color:#222;background-color:rgba(0, 0, 0, 0.5);} @@ -374,7 +374,7 @@ i{background-image:url(docs/assets/img/glyphicons-halflings-sprite.png);backgrou .pagination .disabled a,.pagination .disabled a:hover{color:#999999;background-color:transparent;cursor:default;} .pagination .next a{border:0;} .pagination.centered{text-align:center;} -.modal-backdrop{position:fixed;top:0;right:0;bottom:0;left:0;z-index:10000;background-color:#000000;}.modal-backdrop.fade{opacity:0;} +.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.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%;} @@ -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:1005;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: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.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:1005;display:none;padding:5px;}.popover.top{margin-top:-5px;} +.popover{position:absolute;top:0;left:0;z-index:1020;display:none;padding:5px;}.popover.top{margin-top:-5px;} .popover.right{margin-left:5px;} .popover.bottom{margin-top:5px;} .popover.left{margin-left:-5px;} diff --git a/lib/dropdowns.less b/lib/dropdowns.less index a87641d64c..fc333a4cd1 100644 --- a/lib/dropdowns.less +++ b/lib/dropdowns.less @@ -27,7 +27,7 @@ .dropdown-menu { position: absolute; top: 40px; - z-index: 1000; + z-index: @zindexDropdowns; float: left; display: none; // none by default, but block on "open" of the menu min-width: 160px; diff --git a/lib/modals.less b/lib/modals.less index 96f9a488ec..8183194b74 100644 --- a/lib/modals.less +++ b/lib/modals.less @@ -7,7 +7,7 @@ right: 0; bottom: 0; left: 0; - z-index: 10000; + z-index: @zindexPopover; background-color: @black; // Fade for backdrop &.fade { opacity: 0; } diff --git a/lib/navbar.less b/lib/navbar.less index 9756ce2ca8..90ff786767 100644 --- a/lib/navbar.less +++ b/lib/navbar.less @@ -125,7 +125,7 @@ top: 0; right: 0; left: 0; - z-index: 999; + z-index: @zindexFixedNavbar; } diff --git a/lib/popovers.less b/lib/popovers.less index ec91ab9238..9ecdf5fd98 100644 --- a/lib/popovers.less +++ b/lib/popovers.less @@ -5,7 +5,7 @@ position: absolute; top: 0; left: 0; - z-index: 1005; + z-index: @zindexPopover; display: none; padding: 5px; &.top { margin-top: -5px; } diff --git a/lib/twipsy.less b/lib/twipsy.less index 9e3cf2f149..7eaa7d5bfd 100644 --- a/lib/twipsy.less +++ b/lib/twipsy.less @@ -3,7 +3,7 @@ .twipsy { position: absolute; - z-index: 1005; + z-index: @zindexTwipsy; display: block; visibility: visible; padding: 5px; diff --git a/lib/variables.less b/lib/variables.less index dfd7733048..3db5839b0e 100644 --- a/lib/variables.less +++ b/lib/variables.less @@ -44,7 +44,16 @@ @siteWidth: (@gridColumns * @gridColumnWidth) + (@gridGutterWidth * (@gridColumns - 1)); // Fluid width sidebar -@fluidSidebarWidth: 220px; +@fluidSidebarWidth: 220px; + + +// Z-INDEX +// ------- +@zindexDropdowns: 1000; +@zindexTwipsy: 1000; +@zindexFixedNavbar: 1010; +@zindexPopover: 1020; +@zindexModal: 1030; // THEME VARIABLES