Commit 5ba7c14a authored by Mark Otto's avatar Mark Otto
Browse files

another quick pass at ranking all zindexes and listing them in variables for...

another quick pass at ranking all zindexes and listing them in variables for quick overview and editing later
parent 8bdaf1f3
Showing with 24 additions and 15 deletions
+24 -15
...@@ -6,7 +6,7 @@ ...@@ -6,7 +6,7 @@
* http://www.apache.org/licenses/LICENSE-2.0 * http://www.apache.org/licenses/LICENSE-2.0
* *
* Designed and built with all the love in the world @twitter by @mdo and @fat. * 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 { html, body {
margin: 0; margin: 0;
...@@ -1714,7 +1714,7 @@ i { ...@@ -1714,7 +1714,7 @@ i {
top: 0; top: 0;
right: 0; right: 0;
left: 0; left: 0;
z-index: 999; z-index: 1010;
} }
.nav { .nav {
position: relative; position: relative;
...@@ -2219,7 +2219,7 @@ i { ...@@ -2219,7 +2219,7 @@ i {
right: 0; right: 0;
bottom: 0; bottom: 0;
left: 0; left: 0;
z-index: 10000; z-index: 1020;
background-color: #000000; background-color: #000000;
} }
.modal-backdrop.fade { .modal-backdrop.fade {
...@@ -2304,7 +2304,7 @@ i { ...@@ -2304,7 +2304,7 @@ i {
} }
.twipsy { .twipsy {
position: absolute; position: absolute;
z-index: 1005; z-index: 1000;
display: block; display: block;
visibility: visible; visibility: visible;
padding: 5px; padding: 5px;
...@@ -2382,7 +2382,7 @@ i { ...@@ -2382,7 +2382,7 @@ i {
position: absolute; position: absolute;
top: 0; top: 0;
left: 0; left: 0;
z-index: 1005; z-index: 1020;
display: none; display: none;
padding: 5px; padding: 5px;
} }
......
...@@ -306,7 +306,7 @@ i{background-image:url(docs/assets/img/glyphicons-halflings-sprite.png);backgrou ...@@ -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-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{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-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{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 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);} .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 ...@@ -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 .disabled a,.pagination .disabled a:hover{color:#999999;background-color:transparent;cursor:default;}
.pagination .next a{border:0;} .pagination .next a{border:0;}
.pagination.centered{text-align:center;} .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-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: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%;} .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 ...@@ -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{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:after{clear:both;}
.modal-footer .btn{float:right;margin-left:5px;} .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.top{margin-top:-2px;}
.twipsy.right{margin-left:2px;} .twipsy.right{margin-left:2px;}
.twipsy.bottom{margin-top:2px;} .twipsy.bottom{margin-top:2px;}
...@@ -395,7 +395,7 @@ i{background-image:url(docs/assets/img/glyphicons-halflings-sprite.png);backgrou ...@@ -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.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-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;} .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.right{margin-left:5px;}
.popover.bottom{margin-top:5px;} .popover.bottom{margin-top:5px;}
.popover.left{margin-left:-5px;} .popover.left{margin-left:-5px;}
......
...@@ -27,7 +27,7 @@ ...@@ -27,7 +27,7 @@
.dropdown-menu { .dropdown-menu {
position: absolute; position: absolute;
top: 40px; top: 40px;
z-index: 1000; z-index: @zindexDropdowns;
float: left; float: left;
display: none; // none by default, but block on "open" of the menu display: none; // none by default, but block on "open" of the menu
min-width: 160px; min-width: 160px;
......
...@@ -7,7 +7,7 @@ ...@@ -7,7 +7,7 @@
right: 0; right: 0;
bottom: 0; bottom: 0;
left: 0; left: 0;
z-index: 10000; z-index: @zindexPopover;
background-color: @black; background-color: @black;
// Fade for backdrop // Fade for backdrop
&.fade { opacity: 0; } &.fade { opacity: 0; }
......
...@@ -125,7 +125,7 @@ ...@@ -125,7 +125,7 @@
top: 0; top: 0;
right: 0; right: 0;
left: 0; left: 0;
z-index: 999; z-index: @zindexFixedNavbar;
} }
......
...@@ -5,7 +5,7 @@ ...@@ -5,7 +5,7 @@
position: absolute; position: absolute;
top: 0; top: 0;
left: 0; left: 0;
z-index: 1005; z-index: @zindexPopover;
display: none; display: none;
padding: 5px; padding: 5px;
&.top { margin-top: -5px; } &.top { margin-top: -5px; }
......
...@@ -3,7 +3,7 @@ ...@@ -3,7 +3,7 @@
.twipsy { .twipsy {
position: absolute; position: absolute;
z-index: 1005; z-index: @zindexTwipsy;
display: block; display: block;
visibility: visible; visibility: visible;
padding: 5px; padding: 5px;
......
...@@ -44,7 +44,16 @@ ...@@ -44,7 +44,16 @@
@siteWidth: (@gridColumns * @gridColumnWidth) + (@gridGutterWidth * (@gridColumns - 1)); @siteWidth: (@gridColumns * @gridColumnWidth) + (@gridGutterWidth * (@gridColumns - 1));
// Fluid width sidebar // Fluid width sidebar
@fluidSidebarWidth: 220px; @fluidSidebarWidth: 220px;
// Z-INDEX
// -------
@zindexDropdowns: 1000;
@zindexTwipsy: 1000;
@zindexFixedNavbar: 1010;
@zindexPopover: 1020;
@zindexModal: 1030;
// THEME VARIABLES // THEME VARIABLES
......
Supports Markdown
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment