mirror of
https://github.com/twbs/bootstrap.git
synced 2025-01-30 22:52:24 +01:00
add temp second topbar to nav section, fix it's compatibility issues
This commit is contained in:
Mark Otto
parent
5ef4519ca8
commit
fa94b264fa
85
bootstrap-1.2.0.css
vendored
85
bootstrap-1.2.0.css
vendored
@ -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: Fri Sep 2 00:29:45 PDT 2011
|
||||
* Date: Fri Sep 2 00:49:39 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).
|
||||
@ -1193,62 +1193,89 @@ table .headerSortUp.purple, table .headerSortDown.purple {
|
||||
-moz-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25), inset 0 -1px 0 rgba(0, 0, 0, 0.1);
|
||||
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25), inset 0 -1px 0 rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
.topbar > ul, .nav {
|
||||
.topbar div > ul, .nav {
|
||||
display: block;
|
||||
float: left;
|
||||
margin: 0 10px 0 0;
|
||||
position: relative;
|
||||
left: 0;
|
||||
}
|
||||
.topbar > ul > li, .nav > li {
|
||||
.topbar div > ul > li, .nav > li {
|
||||
display: block;
|
||||
float: left;
|
||||
}
|
||||
.topbar > ul a, .nav a {
|
||||
.topbar div > ul a, .nav a {
|
||||
display: block;
|
||||
float: none;
|
||||
padding: 10px 10px 11px;
|
||||
line-height: 19px;
|
||||
text-decoration: none;
|
||||
}
|
||||
.topbar > ul a:hover, .nav a:hover {
|
||||
.topbar div > ul a:hover, .nav a:hover {
|
||||
color: #fff;
|
||||
text-decoration: none;
|
||||
}
|
||||
.topbar > ul .active a, .nav .active a {
|
||||
.topbar div > ul .active a, .nav .active a {
|
||||
background-color: #222;
|
||||
background-color: rgba(0, 0, 0, 0.5);
|
||||
}
|
||||
.topbar > ul.secondary-nav, .nav.secondary-nav {
|
||||
.topbar div > ul.secondary-nav, .nav.secondary-nav {
|
||||
float: right;
|
||||
margin-left: 10px;
|
||||
margin-right: 0;
|
||||
}
|
||||
.topbar > ul.secondary-nav .dropdown-menu, .nav.secondary-nav .dropdown-menu {
|
||||
.topbar div > ul.secondary-nav .dropdown-menu, .nav.secondary-nav .dropdown-menu {
|
||||
right: 0;
|
||||
}
|
||||
.topbar > ul .dropdown-toggle:hover,
|
||||
.topbar div > ul a.menu:hover,
|
||||
.nav a.menu:hover,
|
||||
.topbar div > ul li.open .menu,
|
||||
.nav li.open .menu,
|
||||
.topbar div > ul .dropdown-toggle:hover,
|
||||
.nav .dropdown-toggle:hover,
|
||||
.topbar > ul .dropdown.open .dropdown-toggle,
|
||||
.topbar div > ul .dropdown.open .dropdown-toggle,
|
||||
.nav .dropdown.open .dropdown-toggle {
|
||||
background: #444;
|
||||
background: rgba(255, 255, 255, 0.05);
|
||||
}
|
||||
.topbar > ul .dropdown-menu, .nav .dropdown-menu {
|
||||
.topbar div > ul .menu-dropdown,
|
||||
.nav .menu-dropdown,
|
||||
.topbar div > ul .dropdown-menu,
|
||||
.nav .dropdown-menu {
|
||||
background-color: #333;
|
||||
}
|
||||
.topbar > ul .dropdown-menu .dropdown-toggle, .nav .dropdown-menu .dropdown-toggle {
|
||||
.topbar div > ul .menu-dropdown a.menu,
|
||||
.nav .menu-dropdown a.menu,
|
||||
.topbar div > ul .dropdown-menu a.menu,
|
||||
.nav .dropdown-menu a.menu,
|
||||
.topbar div > ul .menu-dropdown .dropdown-toggle,
|
||||
.nav .menu-dropdown .dropdown-toggle,
|
||||
.topbar div > ul .dropdown-menu .dropdown-toggle,
|
||||
.nav .dropdown-menu .dropdown-toggle {
|
||||
color: #fff;
|
||||
}
|
||||
.topbar > ul .dropdown-menu .dropdown-toggle.open, .nav .dropdown-menu .dropdown-toggle.open {
|
||||
.topbar div > ul .menu-dropdown a.menu.open,
|
||||
.nav .menu-dropdown a.menu.open,
|
||||
.topbar div > ul .dropdown-menu a.menu.open,
|
||||
.nav .dropdown-menu a.menu.open,
|
||||
.topbar div > ul .menu-dropdown .dropdown-toggle.open,
|
||||
.nav .menu-dropdown .dropdown-toggle.open,
|
||||
.topbar div > ul .dropdown-menu .dropdown-toggle.open,
|
||||
.nav .dropdown-menu .dropdown-toggle.open {
|
||||
background: #444;
|
||||
background: rgba(255, 255, 255, 0.05);
|
||||
}
|
||||
.topbar > ul .dropdown-menu li a, .nav .dropdown-menu li a {
|
||||
.topbar div > ul .menu-dropdown li a,
|
||||
.nav .menu-dropdown li a,
|
||||
.topbar div > ul .dropdown-menu li a,
|
||||
.nav .dropdown-menu li a {
|
||||
color: #999;
|
||||
text-shadow: 0 1px 0 rgba(0, 0, 0, 0.5);
|
||||
}
|
||||
.topbar > ul .dropdown-menu li a:hover, .nav .dropdown-menu li a:hover {
|
||||
.topbar div > ul .menu-dropdown li a:hover,
|
||||
.nav .menu-dropdown li a:hover,
|
||||
.topbar div > ul .dropdown-menu li a:hover,
|
||||
.nav .dropdown-menu li a:hover {
|
||||
background-color: #191919;
|
||||
background-repeat: repeat-x;
|
||||
background-image: -khtml-gradient(linear, left top, left bottom, from(#292929), to(#191919));
|
||||
@ -1260,14 +1287,20 @@ table .headerSortUp.purple, table .headerSortDown.purple {
|
||||
background-image: linear-gradient(top, #292929, #191919);
|
||||
color: #fff;
|
||||
}
|
||||
.topbar > ul .dropdown-menu .divider, .nav .dropdown-menu .divider {
|
||||
.topbar div > ul .menu-dropdown .divider,
|
||||
.nav .menu-dropdown .divider,
|
||||
.topbar div > ul .dropdown-menu .divider,
|
||||
.nav .dropdown-menu .divider {
|
||||
background-color: #222;
|
||||
border-color: #444;
|
||||
}
|
||||
.dropdown {
|
||||
.topbar ul .menu-dropdown li a, .topbar ul .dropdown-menu li a {
|
||||
padding: 4px 15px;
|
||||
}
|
||||
li.menu, .dropdown {
|
||||
position: relative;
|
||||
}
|
||||
.dropdown-toggle:after {
|
||||
a.menu:after, .dropdown-toggle:after {
|
||||
width: 0;
|
||||
height: 0;
|
||||
display: inline-block;
|
||||
@ -1284,7 +1317,7 @@ table .headerSortUp.purple, table .headerSortDown.purple {
|
||||
-moz-opacity: 0.5;
|
||||
opacity: 0.5;
|
||||
}
|
||||
.dropdown-menu {
|
||||
.menu-dropdown, .dropdown-menu {
|
||||
background-color: #fff;
|
||||
float: left;
|
||||
display: none;
|
||||
@ -1311,12 +1344,12 @@ table .headerSortUp.purple, table .headerSortDown.purple {
|
||||
-moz-background-clip: padding-box;
|
||||
background-clip: padding-box;
|
||||
}
|
||||
.dropdown-menu li {
|
||||
.menu-dropdown li, .dropdown-menu li {
|
||||
float: none;
|
||||
display: block;
|
||||
background-color: none;
|
||||
}
|
||||
.dropdown-menu a {
|
||||
.menu-dropdown a, .dropdown-menu a {
|
||||
display: block;
|
||||
padding: 4px 15px;
|
||||
clear: both;
|
||||
@ -1325,7 +1358,7 @@ table .headerSortUp.purple, table .headerSortDown.purple {
|
||||
color: #808080;
|
||||
text-shadow: 0 1px 0 #fff;
|
||||
}
|
||||
.dropdown-menu a:hover {
|
||||
.menu-dropdown a:hover, .dropdown-menu a:hover {
|
||||
background-color: #dddddd;
|
||||
background-repeat: repeat-x;
|
||||
background-image: -khtml-gradient(linear, left top, left bottom, from(#eeeeee), to(#dddddd));
|
||||
@ -1341,18 +1374,24 @@ table .headerSortUp.purple, table .headerSortDown.purple {
|
||||
-moz-box-shadow: inset 0 1px 0 rgba(0, 0, 0, 0.025), inset 0 -1px rgba(0, 0, 0, 0.025);
|
||||
box-shadow: inset 0 1px 0 rgba(0, 0, 0, 0.025), inset 0 -1px rgba(0, 0, 0, 0.025);
|
||||
}
|
||||
.dropdown-menu .divider {
|
||||
.menu-dropdown .divider, .dropdown-menu .divider {
|
||||
height: 1px;
|
||||
margin: 5px 0;
|
||||
overflow: hidden;
|
||||
background-color: #eee;
|
||||
border-bottom: 1px solid #fff;
|
||||
}
|
||||
.open .menu,
|
||||
.dropdown.open .menu,
|
||||
.open .dropdown-toggle,
|
||||
.dropdown.open .dropdown-toggle {
|
||||
color: #fff;
|
||||
background: #ccc;
|
||||
background: rgba(0, 0, 0, 0.3);
|
||||
}
|
||||
.open .menu-dropdown,
|
||||
.dropdown.open .menu-dropdown,
|
||||
.open .dropdown-menu,
|
||||
.dropdown.open .dropdown-menu {
|
||||
display: block;
|
||||
}
|
||||
|
||||
31
bootstrap-1.2.0.min.css
vendored
31
bootstrap-1.2.0.min.css
vendored
@ -184,21 +184,22 @@ table .headerSortUp.purple,table .headerSortDown.purple{background-color:#e2d5f0
|
||||
.topbar input:hover{background-color:#bfbfbf;background-color:rgba(255, 255, 255, 0.5);color:#fff;}
|
||||
.topbar input:focus,.topbar input.focused{outline:none;background-color:#fff;color:#404040;text-shadow:0 1px 0 #fff;border:0;padding:5px 10px;-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);}
|
||||
.topbar-inner,.topbar .fill{background-color:#222;background-color:#222222;background-repeat:repeat-x;background-image:-khtml-gradient(linear, left top, left bottom, from(#333333), to(#222222));background-image:-moz-linear-gradient(top, #333333, #222222);background-image:-ms-linear-gradient(top, #333333, #222222);background-image:-webkit-gradient(linear, left top, left bottom, color-stop(0%, #333333), color-stop(100%, #222222));background-image:-webkit-linear-gradient(top, #333333, #222222);background-image:-o-linear-gradient(top, #333333, #222222);background-image:linear-gradient(top, #333333, #222222);-webkit-box-shadow:0 1px 3px rgba(0, 0, 0, 0.25),inset 0 -1px 0 rgba(0, 0, 0, 0.1);-moz-box-shadow:0 1px 3px rgba(0, 0, 0, 0.25),inset 0 -1px 0 rgba(0, 0, 0, 0.1);box-shadow:0 1px 3px rgba(0, 0, 0, 0.25),inset 0 -1px 0 rgba(0, 0, 0, 0.1);}
|
||||
.topbar>ul,.nav{display:block;float:left;margin:0 10px 0 0;position:relative;left:0;}.topbar>ul>li,.nav>li{display:block;float:left;}
|
||||
.topbar>ul a,.nav a{display:block;float:none;padding:10px 10px 11px;line-height:19px;text-decoration:none;}.topbar>ul a:hover,.nav a:hover{color:#fff;text-decoration:none;}
|
||||
.topbar>ul .active a,.nav .active a{background-color:#222;background-color:rgba(0, 0, 0, 0.5);}
|
||||
.topbar>ul.secondary-nav,.nav.secondary-nav{float:right;margin-left:10px;margin-right:0;}.topbar>ul.secondary-nav .dropdown-menu,.nav.secondary-nav .dropdown-menu{right:0;}
|
||||
.topbar>ul .dropdown-toggle:hover,.nav .dropdown-toggle:hover,.topbar>ul .dropdown.open .dropdown-toggle,.nav .dropdown.open .dropdown-toggle{background:#444;background:rgba(255, 255, 255, 0.05);}
|
||||
.topbar>ul .dropdown-menu,.nav .dropdown-menu{background-color:#333;}.topbar>ul .dropdown-menu .dropdown-toggle,.nav .dropdown-menu .dropdown-toggle{color:#fff;}.topbar>ul .dropdown-menu .dropdown-toggle.open,.nav .dropdown-menu .dropdown-toggle.open{background:#444;background:rgba(255, 255, 255, 0.05);}
|
||||
.topbar>ul .dropdown-menu li a,.nav .dropdown-menu li a{color:#999;text-shadow:0 1px 0 rgba(0, 0, 0, 0.5);}.topbar>ul .dropdown-menu li a:hover,.nav .dropdown-menu li a:hover{background-color:#191919;background-repeat:repeat-x;background-image:-khtml-gradient(linear, left top, left bottom, from(#292929), to(#191919));background-image:-moz-linear-gradient(top, #292929, #191919);background-image:-ms-linear-gradient(top, #292929, #191919);background-image:-webkit-gradient(linear, left top, left bottom, color-stop(0%, #292929), color-stop(100%, #191919));background-image:-webkit-linear-gradient(top, #292929, #191919);background-image:-o-linear-gradient(top, #292929, #191919);background-image:linear-gradient(top, #292929, #191919);color:#fff;}
|
||||
.topbar>ul .dropdown-menu .divider,.nav .dropdown-menu .divider{background-color:#222;border-color:#444;}
|
||||
.dropdown{position:relative;}
|
||||
.dropdown-toggle:after{width:0;height:0;display:inline-block;content:"↓";text-indent:-99999px;vertical-align:top;margin-top:8px;margin-left:4px;border-left:4px solid transparent;border-right:4px solid transparent;border-top:4px solid #fff;filter:alpha(opacity=50);-khtml-opacity:0.5;-moz-opacity:0.5;opacity:0.5;}
|
||||
.dropdown-menu{background-color:#fff;float:left;display:none;position:absolute;top:40px;min-width:160px;max-width:220px;_width:160px;margin-left:0;margin-right:0;padding:6px 0;zoom:1;border-color:#999;border-color:rgba(0, 0, 0, 0.2);border-style:solid;border-width:0 1px 1px;-webkit-border-radius:0 0 6px 6px;-moz-border-radius:0 0 6px 6px;border-radius:0 0 6px 6px;-webkit-box-shadow:0 2px 4px rgba(0, 0, 0, 0.2);-moz-box-shadow:0 2px 4px rgba(0, 0, 0, 0.2);box-shadow:0 2px 4px rgba(0, 0, 0, 0.2);-webkit-background-clip:padding-box;-moz-background-clip:padding-box;background-clip:padding-box;}.dropdown-menu li{float:none;display:block;background-color:none;}
|
||||
.dropdown-menu a{display:block;padding:4px 15px;clear:both;font-weight:normal;line-height:18px;color:#808080;text-shadow:0 1px 0 #fff;}.dropdown-menu a:hover{background-color:#dddddd;background-repeat:repeat-x;background-image:-khtml-gradient(linear, left top, left bottom, from(#eeeeee), to(#dddddd));background-image:-moz-linear-gradient(top, #eeeeee, #dddddd);background-image:-ms-linear-gradient(top, #eeeeee, #dddddd);background-image:-webkit-gradient(linear, left top, left bottom, color-stop(0%, #eeeeee), color-stop(100%, #dddddd));background-image:-webkit-linear-gradient(top, #eeeeee, #dddddd);background-image:-o-linear-gradient(top, #eeeeee, #dddddd);background-image:linear-gradient(top, #eeeeee, #dddddd);color:#404040;text-decoration:none;-webkit-box-shadow:inset 0 1px 0 rgba(0, 0, 0, 0.025),inset 0 -1px rgba(0, 0, 0, 0.025);-moz-box-shadow:inset 0 1px 0 rgba(0, 0, 0, 0.025),inset 0 -1px rgba(0, 0, 0, 0.025);box-shadow:inset 0 1px 0 rgba(0, 0, 0, 0.025),inset 0 -1px rgba(0, 0, 0, 0.025);}
|
||||
.dropdown-menu .divider{height:1px;margin:5px 0;overflow:hidden;background-color:#eee;border-bottom:1px solid #fff;}
|
||||
.dropdown.open .dropdown-toggle{color:#fff;background:#ccc;background:rgba(0, 0, 0, 0.3);}
|
||||
.dropdown.open .dropdown-menu{display:block;}
|
||||
.topbar div>ul,.nav{display:block;float:left;margin:0 10px 0 0;position:relative;left:0;}.topbar div>ul>li,.nav>li{display:block;float:left;}
|
||||
.topbar div>ul a,.nav a{display:block;float:none;padding:10px 10px 11px;line-height:19px;text-decoration:none;}.topbar div>ul a:hover,.nav a:hover{color:#fff;text-decoration:none;}
|
||||
.topbar div>ul .active a,.nav .active a{background-color:#222;background-color:rgba(0, 0, 0, 0.5);}
|
||||
.topbar div>ul.secondary-nav,.nav.secondary-nav{float:right;margin-left:10px;margin-right:0;}.topbar div>ul.secondary-nav .dropdown-menu,.nav.secondary-nav .dropdown-menu{right:0;}
|
||||
.topbar div>ul a.menu:hover,.nav a.menu:hover,.topbar div>ul li.open .menu,.nav li.open .menu,.topbar div>ul .dropdown-toggle:hover,.nav .dropdown-toggle:hover,.topbar div>ul .dropdown.open .dropdown-toggle,.nav .dropdown.open .dropdown-toggle{background:#444;background:rgba(255, 255, 255, 0.05);}
|
||||
.topbar div>ul .menu-dropdown,.nav .menu-dropdown,.topbar div>ul .dropdown-menu,.nav .dropdown-menu{background-color:#333;}.topbar div>ul .menu-dropdown a.menu,.nav .menu-dropdown a.menu,.topbar div>ul .dropdown-menu a.menu,.nav .dropdown-menu a.menu,.topbar div>ul .menu-dropdown .dropdown-toggle,.nav .menu-dropdown .dropdown-toggle,.topbar div>ul .dropdown-menu .dropdown-toggle,.nav .dropdown-menu .dropdown-toggle{color:#fff;}.topbar div>ul .menu-dropdown a.menu.open,.nav .menu-dropdown a.menu.open,.topbar div>ul .dropdown-menu a.menu.open,.nav .dropdown-menu a.menu.open,.topbar div>ul .menu-dropdown .dropdown-toggle.open,.nav .menu-dropdown .dropdown-toggle.open,.topbar div>ul .dropdown-menu .dropdown-toggle.open,.nav .dropdown-menu .dropdown-toggle.open{background:#444;background:rgba(255, 255, 255, 0.05);}
|
||||
.topbar div>ul .menu-dropdown li a,.nav .menu-dropdown li a,.topbar div>ul .dropdown-menu li a,.nav .dropdown-menu li a{color:#999;text-shadow:0 1px 0 rgba(0, 0, 0, 0.5);}.topbar div>ul .menu-dropdown li a:hover,.nav .menu-dropdown li a:hover,.topbar div>ul .dropdown-menu li a:hover,.nav .dropdown-menu li a:hover{background-color:#191919;background-repeat:repeat-x;background-image:-khtml-gradient(linear, left top, left bottom, from(#292929), to(#191919));background-image:-moz-linear-gradient(top, #292929, #191919);background-image:-ms-linear-gradient(top, #292929, #191919);background-image:-webkit-gradient(linear, left top, left bottom, color-stop(0%, #292929), color-stop(100%, #191919));background-image:-webkit-linear-gradient(top, #292929, #191919);background-image:-o-linear-gradient(top, #292929, #191919);background-image:linear-gradient(top, #292929, #191919);color:#fff;}
|
||||
.topbar div>ul .menu-dropdown .divider,.nav .menu-dropdown .divider,.topbar div>ul .dropdown-menu .divider,.nav .dropdown-menu .divider{background-color:#222;border-color:#444;}
|
||||
.topbar ul .menu-dropdown li a,.topbar ul .dropdown-menu li a{padding:4px 15px;}
|
||||
li.menu,.dropdown{position:relative;}
|
||||
a.menu:after,.dropdown-toggle:after{width:0;height:0;display:inline-block;content:"↓";text-indent:-99999px;vertical-align:top;margin-top:8px;margin-left:4px;border-left:4px solid transparent;border-right:4px solid transparent;border-top:4px solid #fff;filter:alpha(opacity=50);-khtml-opacity:0.5;-moz-opacity:0.5;opacity:0.5;}
|
||||
.menu-dropdown,.dropdown-menu{background-color:#fff;float:left;display:none;position:absolute;top:40px;min-width:160px;max-width:220px;_width:160px;margin-left:0;margin-right:0;padding:6px 0;zoom:1;border-color:#999;border-color:rgba(0, 0, 0, 0.2);border-style:solid;border-width:0 1px 1px;-webkit-border-radius:0 0 6px 6px;-moz-border-radius:0 0 6px 6px;border-radius:0 0 6px 6px;-webkit-box-shadow:0 2px 4px rgba(0, 0, 0, 0.2);-moz-box-shadow:0 2px 4px rgba(0, 0, 0, 0.2);box-shadow:0 2px 4px rgba(0, 0, 0, 0.2);-webkit-background-clip:padding-box;-moz-background-clip:padding-box;background-clip:padding-box;}.menu-dropdown li,.dropdown-menu li{float:none;display:block;background-color:none;}
|
||||
.menu-dropdown a,.dropdown-menu a{display:block;padding:4px 15px;clear:both;font-weight:normal;line-height:18px;color:#808080;text-shadow:0 1px 0 #fff;}.menu-dropdown a:hover,.dropdown-menu a:hover{background-color:#dddddd;background-repeat:repeat-x;background-image:-khtml-gradient(linear, left top, left bottom, from(#eeeeee), to(#dddddd));background-image:-moz-linear-gradient(top, #eeeeee, #dddddd);background-image:-ms-linear-gradient(top, #eeeeee, #dddddd);background-image:-webkit-gradient(linear, left top, left bottom, color-stop(0%, #eeeeee), color-stop(100%, #dddddd));background-image:-webkit-linear-gradient(top, #eeeeee, #dddddd);background-image:-o-linear-gradient(top, #eeeeee, #dddddd);background-image:linear-gradient(top, #eeeeee, #dddddd);color:#404040;text-decoration:none;-webkit-box-shadow:inset 0 1px 0 rgba(0, 0, 0, 0.025),inset 0 -1px rgba(0, 0, 0, 0.025);-moz-box-shadow:inset 0 1px 0 rgba(0, 0, 0, 0.025),inset 0 -1px rgba(0, 0, 0, 0.025);box-shadow:inset 0 1px 0 rgba(0, 0, 0, 0.025),inset 0 -1px rgba(0, 0, 0, 0.025);}
|
||||
.menu-dropdown .divider,.dropdown-menu .divider{height:1px;margin:5px 0;overflow:hidden;background-color:#eee;border-bottom:1px solid #fff;}
|
||||
.open .menu,.dropdown.open .menu,.open .dropdown-toggle,.dropdown.open .dropdown-toggle{color:#fff;background:#ccc;background:rgba(0, 0, 0, 0.3);}
|
||||
.open .menu-dropdown,.dropdown.open .menu-dropdown,.open .dropdown-menu,.dropdown.open .dropdown-menu{display:block;}
|
||||
.tabs,.pills{margin:0 0 20px;padding:0;list-style:none;zoom:1;margin-bottom:18px;}.tabs:before,.pills:before,.tabs:after,.pills:after{display:table;content:"";}
|
||||
.tabs:after,.pills:after{clear:both;}
|
||||
.tabs>li,.pills>li{float:left;}.tabs>li>a,.pills>li>a{display:block;}
|
||||
|
||||
@ -48,10 +48,9 @@ $(document).ready(function(){
|
||||
// ===============================
|
||||
|
||||
$("body").bind("click", function (e) {
|
||||
$('.dropdown-toggle').parent("li").removeClass("open");
|
||||
$('.dropdown-toggle, .menu').parent("li").removeClass("open");
|
||||
});
|
||||
|
||||
$(".dropdown-toggle").click(function (e) {
|
||||
$(".dropdown-toggle, .menu").click(function (e) {
|
||||
var $li = $(this).parent("li").toggleClass('open');
|
||||
return false;
|
||||
});
|
||||
|
||||
@ -946,6 +946,47 @@
|
||||
</div><!-- /topbar -->
|
||||
</div><!-- /topbar-wrapper -->
|
||||
|
||||
|
||||
<div class="topbar-wrapper" style="z-index: 4;">
|
||||
<div class="topbar">
|
||||
<div class="fill">
|
||||
<div class="container">
|
||||
<h3><a href="#">Project Name</a></h3>
|
||||
<ul class="">
|
||||
<li class="active"><a href="#">Home</a></li>
|
||||
<li><a href="#">Link</a></li>
|
||||
<li><a href="#">Link</a></li>
|
||||
<li><a href="#">Link</a></li>
|
||||
<li class="menu">
|
||||
<a href="#" class="menu">Dropdown</a>
|
||||
<ul class="menu-dropdown">
|
||||
<li><a href="#">Secondary link</a></li>
|
||||
<li><a href="#">Something else here</a></li>
|
||||
<li class="divider"></li>
|
||||
<li><a href="#">Another link</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
<form action="">
|
||||
<input type="text" placeholder="Search" />
|
||||
</form>
|
||||
<ul class="secondary-nav">
|
||||
<li class="menu">
|
||||
<a href="#" class="menu">Dropdown</a>
|
||||
<ul class="menu-dropdown">
|
||||
<li><a href="#">Secondary link</a></li>
|
||||
<li><a href="#">Something else here</a></li>
|
||||
<li class="divider"></li>
|
||||
<li><a href="#">Another link</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div><!-- /topbar-inner -->
|
||||
</div><!-- /topbar -->
|
||||
</div><!-- /topbar-wrapper -->
|
||||
|
||||
|
||||
<div class="row">
|
||||
<div class="span5 columns">
|
||||
<h4>What is it</h4>
|
||||
|
||||
@ -96,7 +96,7 @@
|
||||
|
||||
// gradient is applied to it's own element because overflow visible is not honored by ie when filter is present
|
||||
.topbar-inner,
|
||||
.topbar .fill { // For backwards compatability
|
||||
.topbar .fill { // For backwards compatibility
|
||||
background-color: #222;
|
||||
#gradient > .vertical(#333, #222);
|
||||
@shadow: 0 1px 3px rgba(0,0,0,.25), inset 0 -1px 0 rgba(0,0,0,.1);
|
||||
@ -109,8 +109,8 @@
|
||||
|
||||
// Topbar Nav
|
||||
// ul.nav for all topbar based navigation to avoid inheritance issues and over-specificity
|
||||
// For backwards compatability, leave in .topbar > .ul
|
||||
.topbar > ul,
|
||||
// For backwards compatibility, leave in .topbar div > ul
|
||||
.topbar div > ul,
|
||||
.nav {
|
||||
display: block;
|
||||
float: left;
|
||||
@ -147,13 +147,20 @@
|
||||
}
|
||||
}
|
||||
// Dropdowns within the .nav
|
||||
// a.menu:hover and li.open .menu for backwards compatibility
|
||||
a.menu:hover,
|
||||
li.open .menu,
|
||||
.dropdown-toggle:hover,
|
||||
.dropdown.open .dropdown-toggle {
|
||||
background: #444;
|
||||
background: rgba(255,255,255,.05);
|
||||
}
|
||||
// .menu-dropdown for backwards compatibility
|
||||
.menu-dropdown,
|
||||
.dropdown-menu {
|
||||
background-color: #333;
|
||||
// a.menu for backwards compatibility
|
||||
a.menu,
|
||||
.dropdown-toggle {
|
||||
color: #fff;
|
||||
&.open {
|
||||
@ -176,12 +183,22 @@
|
||||
}
|
||||
}
|
||||
|
||||
// For backwards compatability with new dropdowns, redeclare dropdown link padding
|
||||
.topbar ul .menu-dropdown li a,
|
||||
.topbar ul .dropdown-menu li a {
|
||||
padding: 4px 15px;
|
||||
}
|
||||
|
||||
// Dropdown Menus
|
||||
// Use the .menu class on any <li> element within the topbar or ul.tabs and you'll get some superfancy dropdowns
|
||||
// li.menu for backwards compatibility
|
||||
li.menu,
|
||||
.dropdown {
|
||||
position: relative;
|
||||
}
|
||||
// The link that is clicked to toggle the dropdown
|
||||
// a.menu for backwards compatibility
|
||||
a.menu:after,
|
||||
.dropdown-toggle:after {
|
||||
width: 0;
|
||||
height: 0;
|
||||
@ -197,6 +214,8 @@
|
||||
.opacity(50);
|
||||
}
|
||||
// The dropdown menu (ul)
|
||||
// .menu-dropdown for backwards compatibility
|
||||
.menu-dropdown,
|
||||
.dropdown-menu {
|
||||
background-color: #fff;
|
||||
float: left;
|
||||
@ -252,12 +271,18 @@
|
||||
}
|
||||
}
|
||||
// Open state for the dropdown
|
||||
// .open for backwards compatibility
|
||||
.open,
|
||||
.dropdown.open {
|
||||
// .menu for backwards compatibility
|
||||
.menu,
|
||||
.dropdown-toggle {
|
||||
color: #fff;
|
||||
background: #ccc;
|
||||
background: rgba(0,0,0,.3);
|
||||
}
|
||||
// .menu-dropdown for backwards compatibility
|
||||
.menu-dropdown,
|
||||
.dropdown-menu {
|
||||
display: block;
|
||||
}
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user