0
0
mirror of https://github.com/twbs/bootstrap.git synced 2024-11-29 11:24:18 +01:00

adding dropdowns to tabs by refactoring the shizzzz out of them

This commit is contained in:
Mark Otto 2011-08-26 20:38:23 -07:00
parent b9c9f1d8d6
commit 4f67e135dc
5 changed files with 400 additions and 384 deletions

303
bootstrap-1.1.1.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: Fri Aug 26 15:21:30 PDT 2011
* Date: Fri Aug 26 20:37: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).
@ -1205,8 +1205,8 @@ table .headerSortUp.purple, table .headerSortDown.purple {
z-index: 10000;
overflow: visible;
}
.topbar .fill {
background: #222;
.topbar .wrapper {
background-color: #222;
background-color: #222222;
background-repeat: repeat-x;
background-image: -khtml-gradient(linear, left top, left bottom, from(#333333), to(#222222));
@ -1296,49 +1296,47 @@ table .headerSortUp.purple, table .headerSortDown.purple {
-moz-box-shadow: 0 0 3px rgba(0, 0, 0, 0.15);
box-shadow: 0 0 3px rgba(0, 0, 0, 0.15);
}
.topbar ul {
.nav {
display: block;
float: left;
margin: 0 10px 0 0;
position: relative;
left: 0;
}
.topbar ul.secondary-nav {
.nav.secondary-nav {
float: right;
margin-left: 10px;
margin-right: 0;
}
.topbar ul li {
.nav li {
display: block;
float: left;
font-size: 13px;
}
.topbar ul li a {
.nav li a {
display: block;
float: none;
padding: 10px 10px 11px;
line-height: 19px;
text-decoration: none;
}
.topbar ul li a:hover {
.nav li a:hover {
color: #fff;
text-decoration: none;
}
.topbar ul li.active a {
.nav li.active a {
background-color: #222;
background-color: rgba(0, 0, 0, 0.5);
}
.topbar ul.primary-nav li ul {
left: 0;
}
.topbar ul.secondary-nav li ul {
.nav.secondary-nav li .dropdown-menu {
right: 0;
}
.topbar ul li.menu {
.dropdown {
position: relative;
}
.topbar ul li.menu a.menu:after {
width: 0px;
height: 0px;
.dropdown-toggle:after {
width: 0;
height: 0;
display: inline-block;
content: "↓";
text-indent: -99999px;
@ -1353,34 +1351,8 @@ table .headerSortUp.purple, table .headerSortDown.purple {
-moz-opacity: 0.5;
opacity: 0.5;
}
.topbar ul li.menu.open a.menu, .topbar ul li.menu.open a:hover {
background-color: #444;
background-color: rgba(255, 255, 255, 0.1);
*background-color: #444;
/* IE6-7 */
color: #fff;
}
.topbar ul li.menu.open ul {
display: block;
}
.topbar ul li.menu.open ul li a {
background-color: transparent;
font-weight: normal;
}
.topbar ul li.menu.open ul li a:hover {
background-color: rgba(255, 255, 255, 0.1);
*background-color: #444;
/* IE6-7 */
color: #fff;
}
.topbar ul li.menu.open ul li.active a {
background-color: rgba(255, 255, 255, 0.1);
font-weight: bold;
}
.topbar ul li ul {
background-color: #333;
.dropdown-menu {
background-color: #fff;
float: left;
display: none;
position: absolute;
@ -1390,53 +1362,151 @@ table .headerSortUp.purple, table .headerSortDown.purple {
_width: 160px;
margin-left: 0;
margin-right: 0;
padding: 0;
text-align: left;
border: 0;
padding: 6px 0;
zoom: 1;
-webkit-border-radius: 0 0 5px 5px;
-moz-border-radius: 0 0 5px 5px;
border-radius: 0 0 5px 5px;
-webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.6);
-moz-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.6);
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.6);
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;
}
.topbar ul li ul li {
.dropdown-menu li {
float: none;
clear: both;
display: block;
background: none;
font-size: 12px;
background-color: none;
}
.topbar ul li ul li a {
.dropdown-menu li a {
display: block;
padding: 6px 15px;
padding: 4px 15px;
clear: both;
font-weight: normal;
line-height: 19px;
color: #bbb;
}
.topbar ul li ul li a:hover {
background-color: #333;
background-color: rgba(255, 255, 255, 0.25);
color: #fff;
}
.topbar ul li ul li.divider {
height: 1px;
overflow: hidden;
background: #222;
background: rgba(0, 0, 0, 0.2);
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
margin: 5px 0;
}
.topbar ul li ul li span {
clear: both;
display: block;
background: rgba(0, 0, 0, 0.2);
padding: 6px 15px;
cursor: default;
line-height: 18px;
color: #808080;
border-top: 1px solid rgba(0, 0, 0, 0.2);
text-shadow: 0 1px 0 #fff;
}
.dropdown-menu li 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 li.divider {
height: 1px;
margin: 5px 0;
overflow: hidden;
background-color: #eee;
border-bottom: 1px solid #fff;
}
.dropdown.open .dropdown-toggle {
color: #fff;
background-color: rgba(0, 0, 0, 0.3);
}
.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;
}
.tabs {
width: 100%;
border-bottom: 1px solid #ddd;
}
.tabs > li {
position: relative;
}
.tabs > li > a {
margin-bottom: -1px;
margin-right: 2px;
padding: 0 15px;
line-height: 35px;
-webkit-border-radius: 4px 4px 0 0;
-moz-border-radius: 4px 4px 0 0;
border-radius: 4px 4px 0 0;
}
.tabs > li > a:hover {
background-color: #eee;
border-bottom: 1px solid #ddd;
text-decoration: none;
}
.tabs > li.active > a {
background-color: #fff;
padding: 0 14px;
border: 1px solid #ddd;
border-bottom: 0;
color: #808080;
}
.tabs .dropdown-menu {
top: 35px;
border-width: 1px;
-webkit-border-radius: 0 6px 6px 6px;
-moz-border-radius: 0 6px 6px 6px;
border-radius: 0 6px 6px 6px;
}
.tabs .dropdown-toggle:after {
border-top-color: #999;
margin-top: 15px;
margin-left: 5px;
}
.tabs .dropdown.open .dropdown-toggle:after {
border-top-color: #555;
}
.pills li a {
margin: 5px 3px 5px 0;
padding: 0 15px;
text-shadow: 0 1px 1px #fff;
line-height: 30px;
-webkit-border-radius: 15px;
-moz-border-radius: 15px;
border-radius: 15px;
}
.pills li a:hover {
background: #0050a3;
color: #fff;
text-decoration: none;
text-shadow: 0 1px 1px rgba(0, 0, 0, 0.25);
}
.pills li.active a {
background: #0069d6;
color: #fff;
text-shadow: 0 1px 1px rgba(0, 0, 0, 0.25);
}
.hero-unit {
background-color: #f5f5f5;
@ -1651,73 +1721,6 @@ button.btn::-moz-focus-inner, input[type=submit].btn::-moz-focus-inner {
background-color: #ddf4fb;
border-color: #c6edf9;
}
.tabs, .pills {
margin: 0 0 20px;
padding: 0;
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 {
display: inline;
}
.tabs li a, .pills li a {
float: left;
width: auto;
}
.tabs {
width: 100%;
border-bottom: 1px solid #bfbfbf;
}
.tabs li a {
margin-bottom: -1px;
margin-right: 2px;
padding: 0 15px;
line-height: 35px;
-webkit-border-radius: 3px 3px 0 0;
-moz-border-radius: 3px 3px 0 0;
border-radius: 3px 3px 0 0;
}
.tabs li a:hover {
background-color: #e6e6e6;
border-bottom: 1px solid #bfbfbf;
}
.tabs li.active a {
background-color: #fff;
padding: 0 14px;
border: 1px solid #ccc;
border-bottom: 0;
color: #808080;
}
.pills li a {
margin: 5px 3px 5px 0;
padding: 0 15px;
text-shadow: 0 1px 1px #fff;
line-height: 30px;
-webkit-border-radius: 15px;
-moz-border-radius: 15px;
border-radius: 15px;
}
.pills li a:hover {
background: #0050a3;
color: #fff;
text-decoration: none;
text-shadow: 0 1px 1px rgba(0, 0, 0, 0.25);
}
.pills li.active a {
background: #0069d6;
color: #fff;
text-shadow: 0 1px 1px rgba(0, 0, 0, 0.25);
}
.pagination {
height: 36px;
margin: 18px 0;

View File

@ -178,7 +178,7 @@ table .orange{color:#f89406;border-bottom-color:#f89406;}
table .headerSortUp.orange,table .headerSortDown.orange{background-color:#fee9cc;}
table .purple{color:#7a43b6;border-bottom-color:#7a43b6;}
table .headerSortUp.purple,table .headerSortDown.purple{background-color:#e2d5f0;}
.topbar{height:40px;position:fixed;top:0;left:0;right:0;z-index:10000;overflow:visible;}.topbar .fill{background:#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{height:40px;position:fixed;top:0;left:0;right:0;z-index:10000;overflow:visible;}.topbar .wrapper{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 a{color:#bfbfbf;text-shadow:0 -1px 0 rgba(0, 0, 0, 0.25);}
.topbar a:hover,.topbar ul li.active a{background-color:#333;background-color:rgba(255, 255, 255, 0.05);color:#ffffff;text-decoration:none;}
.topbar h3{position:relative;}.topbar h3 a{float:left;display:block;padding:8px 20px 12px;margin-left:-20px;color:#ffffff;font-size:20px;font-weight:200;line-height:1;}
@ -186,18 +186,26 @@ table .headerSortUp.purple,table .headerSortDown.purple{background-color:#e2d5f0
.topbar form input::-webkit-input-placeholder{color:#e6e6e6;}
.topbar form input:hover{background-color:#bfbfbf;background-color:rgba(255, 255, 255, 0.5);color:#fff;}
.topbar form input:focus,.topbar form 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 ul{display:block;float:left;margin:0 10px 0 0;position:relative;}.topbar ul.secondary-nav{float:right;margin-left:10px;margin-right:0;}
.topbar ul li{display:block;float:left;font-size:13px;}.topbar ul li a{display:block;float:none;padding:10px 10px 11px;line-height:19px;text-decoration:none;}.topbar ul li a:hover{color:#fff;text-decoration:none;}
.topbar ul li.active a{background-color:#222;background-color:rgba(0, 0, 0, 0.5);}
.topbar ul.primary-nav li ul{left:0;}
.topbar ul.secondary-nav li ul{right:0;}
.topbar ul li.menu{position:relative;}.topbar ul li.menu a.menu:after{width:0px;height:0px;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;}
.topbar ul li.menu.open a.menu,.topbar ul li.menu.open a:hover{background-color:#444;background-color:rgba(255, 255, 255, 0.1);*background-color:#444;color:#fff;}
.topbar ul li.menu.open ul{display:block;}.topbar ul li.menu.open ul li a{background-color:transparent;font-weight:normal;}.topbar ul li.menu.open ul li a:hover{background-color:rgba(255, 255, 255, 0.1);*background-color:#444;color:#fff;}
.topbar ul li.menu.open ul li.active a{background-color:rgba(255, 255, 255, 0.1);font-weight:bold;}
.topbar ul li ul{background-color:#333;float:left;display:none;position:absolute;top:40px;min-width:160px;max-width:220px;_width:160px;margin-left:0;margin-right:0;padding:0;text-align:left;border:0;zoom:1;-webkit-border-radius:0 0 5px 5px;-moz-border-radius:0 0 5px 5px;border-radius:0 0 5px 5px;-webkit-box-shadow:0 1px 2px rgba(0, 0, 0, 0.6);-moz-box-shadow:0 1px 2px rgba(0, 0, 0, 0.6);box-shadow:0 1px 2px rgba(0, 0, 0, 0.6);}.topbar ul li ul li{float:none;clear:both;display:block;background:none;font-size:12px;}.topbar ul li ul li a{display:block;padding:6px 15px;clear:both;font-weight:normal;line-height:19px;color:#bbb;}.topbar ul li ul li a:hover{background-color:#333;background-color:rgba(255, 255, 255, 0.25);color:#fff;}
.topbar ul li ul li.divider{height:1px;overflow:hidden;background:#222;background:rgba(0, 0, 0, 0.2);border-bottom:1px solid rgba(255, 255, 255, 0.1);margin:5px 0;}
.topbar ul li ul li span{clear:both;display:block;background:rgba(0, 0, 0, 0.2);padding:6px 15px;cursor:default;color:#808080;border-top:1px solid rgba(0, 0, 0, 0.2);}
.nav{display:block;float:left;margin:0 10px 0 0;position:relative;left:0;}.nav.secondary-nav{float:right;margin-left:10px;margin-right:0;}
.nav li{display:block;float:left;font-size:13px;}.nav li a{display:block;float:none;padding:10px 10px 11px;line-height:19px;text-decoration:none;}.nav li a:hover{color:#fff;text-decoration:none;}
.nav li.active a{background-color:#222;background-color:rgba(0, 0, 0, 0.5);}
.nav.secondary-nav li .dropdown-menu{right:0;}
.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 li a{display:block;padding:4px 15px;clear:both;font-weight:normal;line-height:18px;color:#808080;text-shadow:0 1px 0 #fff;}.dropdown-menu li 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 li.divider{height:1px;margin:5px 0;overflow:hidden;background-color:#eee;border-bottom:1px solid #fff;}
.dropdown.open .dropdown-toggle{color:#fff;background-color:rgba(0, 0, 0, 0.3);}
.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;}
.tabs{width:100%;border-bottom:1px solid #ddd;}.tabs>li{position:relative;}.tabs>li>a{margin-bottom:-1px;margin-right:2px;padding:0 15px;line-height:35px;-webkit-border-radius:4px 4px 0 0;-moz-border-radius:4px 4px 0 0;border-radius:4px 4px 0 0;}.tabs>li>a:hover{background-color:#eee;border-bottom:1px solid #ddd;text-decoration:none;}
.tabs>li.active>a{background-color:#fff;padding:0 14px;border:1px solid #ddd;border-bottom:0;color:#808080;}
.tabs .dropdown-menu{top:35px;border-width:1px;-webkit-border-radius:0 6px 6px 6px;-moz-border-radius:0 6px 6px 6px;border-radius:0 6px 6px 6px;}
.tabs .dropdown-toggle:after{border-top-color:#999;margin-top:15px;margin-left:5px;}
.tabs .dropdown.open .dropdown-toggle:after{border-top-color:#555;}
.pills li a{margin:5px 3px 5px 0;padding:0 15px;text-shadow:0 1px 1px #fff;line-height:30px;-webkit-border-radius:15px;-moz-border-radius:15px;border-radius:15px;}.pills li a:hover{background:#0050a3;color:#fff;text-decoration:none;text-shadow:0 1px 1px rgba(0, 0, 0, 0.25);}
.pills li.active a{background:#0069d6;color:#fff;text-shadow:0 1px 1px rgba(0, 0, 0, 0.25);}
.hero-unit{background-color:#f5f5f5;margin-top:60px;margin-bottom:30px;padding:60px;-webkit-border-radius:6px;-moz-border-radius:6px;border-radius:6px;}.hero-unit h1{margin-bottom:0;font-size:60px;line-height:1;letter-spacing:-1px;}
.hero-unit p{font-size:18px;font-weight:200;line-height:27px;}
footer{margin-top:17px;padding-top:17px;border-top:1px solid #eee;}
@ -221,13 +229,6 @@ button.btn::-moz-focus-inner,input[type=submit].btn::-moz-focus-inner{padding:0;
.alert-message.block-message.error{background-color:#fddfde;border-color:#fbc7c6;}
.alert-message.block-message.success{background-color:#d1eed1;border-color:#bfe7bf;}
.alert-message.block-message.info{background-color:#ddf4fb;border-color:#c6edf9;}
.tabs,.pills{margin:0 0 20px;padding:0;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{display:inline;}.tabs li a,.pills li a{float:left;width:auto;}
.tabs{width:100%;border-bottom:1px solid #bfbfbf;}.tabs li a{margin-bottom:-1px;margin-right:2px;padding:0 15px;line-height:35px;-webkit-border-radius:3px 3px 0 0;-moz-border-radius:3px 3px 0 0;border-radius:3px 3px 0 0;}.tabs li a:hover{background-color:#e6e6e6;border-bottom:1px solid #bfbfbf;}
.tabs li.active a{background-color:#fff;padding:0 14px;border:1px solid #ccc;border-bottom:0;color:#808080;}
.pills li a{margin:5px 3px 5px 0;padding:0 15px;text-shadow:0 1px 1px #fff;line-height:30px;-webkit-border-radius:15px;-moz-border-radius:15px;border-radius:15px;}.pills li a:hover{background:#0050a3;color:#fff;text-decoration:none;text-shadow:0 1px 1px rgba(0, 0, 0, 0.25);}
.pills li.active a{background:#0069d6;color:#fff;text-shadow:0 1px 1px rgba(0, 0, 0, 0.25);}
.pagination{height:36px;margin:18px 0;}.pagination ul{float:left;margin:0;border:1px solid #ddd;border:1px solid rgba(0, 0, 0, 0.15);-webkit-border-radius:3px;-moz-border-radius:3px;border-radius:3px;-webkit-box-shadow:0 1px 2px rgba(0, 0, 0, 0.05);-moz-box-shadow:0 1px 2px rgba(0, 0, 0, 0.05);box-shadow:0 1px 2px rgba(0, 0, 0, 0.05);}.pagination ul li{display:inline;}.pagination ul li a{float:left;padding:0 14px;line-height:34px;border-right:1px solid;border-right-color:#ddd;border-right-color:rgba(0, 0, 0, 0.15);*border-right-color:#ddd;text-decoration:none;}
.pagination ul li a:hover,.pagination ul li.active a{background-color:#c7eefe;}
.pagination ul li.disabled a,.pagination ul li.disabled a:hover{background-color:transparent;color:#bfbfbf;}

View File

@ -5,6 +5,7 @@ $(document).ready(function(){
prettyPrint();
// scroll spy logic
// ================
@ -19,7 +20,6 @@ $(document).ready(function(){
return $(id).offset().top;
});
function setButton(id) {
nav.parent("li").removeClass('active');
$(nav[$.inArray(id, targets)]).parent("li").addClass('active');
@ -48,10 +48,10 @@ $(document).ready(function(){
// ===============================
$("body").bind("click", function (e) {
$('a.menu').parent("li").removeClass("open");
$('.dropdown-toggle').parent("li").removeClass("open");
});
$("a.menu").click(function (e) {
$(".dropdown-toggle").click(function (e) {
var $li = $(this).parent("li").toggleClass('open');
return false;
});

View File

@ -34,10 +34,10 @@
<!-- Topbar
================================================== -->
<div class="topbar">
<div class="fill">
<div class="wrapper">
<div class="container">
<h3><a href="#">Bootstrap</a></h3>
<ul>
<ul class="nav">
<li class="active"><a href="#masthead">Overview</a></li>
<li><a href="#about">About</a></li>
<li><a href="#grid-system">Grid</a></li>
@ -901,22 +901,31 @@
<h2>Fixed topbar</h2>
<div class="topbar-wrapper" style="z-index: 5;">
<div class="topbar">
<div class="fill">
<div class="wrapper">
<div class="container">
<h3><a href="#">Project Name</a></h3>
<ul>
<ul class="nav">
<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="dropdown">
<a href="#" class="dropdown-toggle">Dropdown</a>
<ul class="dropdown-menu">
<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="nav secondary-nav">
<li class="menu">
<a href="#" class="menu">Dropdown</a>
<ul class="menu-dropdown">
<li class="dropdown">
<a href="#" class="dropdown-toggle">Dropdown</a>
<ul class="dropdown-menu">
<li><a href="#">Secondary link</a></li>
<li><a href="#">Something else here</a></li>
<li class="divider"></li>
@ -960,6 +969,15 @@
<li><a href="#">Messages</a></li>
<li><a href="#">Settings</a></li>
<li><a href="#">Contact</a></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle">Dropdown</a>
<ul class="dropdown-menu">
<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>
<pre class="prettyprint linenums">
&lt;ul class="tabs"&gt;

View File

@ -17,8 +17,8 @@
overflow: visible;
// gradient is applied to it's own element because overflow visible is not honored by ie when filter is present
.fill {
background:#222;
.wrapper {
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);
.box-shadow(@shadow);
@ -100,151 +100,213 @@
}
}
}
}
// Navigation
ul {
// NAVIGATION
// ----------
// ul.nav for all topbar based navigation to avoid inheritance issues and over-specificity
.nav {
display: block;
float: left;
margin: 0 10px 0 0;
position: relative;
left: 0;
&.secondary-nav {
float: right;
margin-left: 10px;
margin-right: 0;
}
li {
display: block;
float: left;
margin: 0 10px 0 0;
position: relative;
&.secondary-nav {
float: right;
margin-left: 10px;
margin-right: 0;
}
li {
font-size: 13px;
a {
display: block;
float: left;
font-size: 13px;
a {
display: block;
float: none;
padding: 10px 10px 11px;
line-height: 19px;
float: none;
padding: 10px 10px 11px;
line-height: 19px;
text-decoration: none;
&:hover {
color: #fff;
text-decoration: none;
&:hover {
color: #fff;
text-decoration: none;
}
}
&.active a {
background-color: #222;
background-color: rgba(0,0,0,.5);
}
}
&.active a {
background-color: #222;
background-color: rgba(0,0,0,.5);
}
}
// Dropdowns
&.primary-nav li ul {
left: 0;
}
&.secondary-nav li ul {
right: 0;
}
li.menu {
position: relative;
a.menu {
&:after {
width: 0px;
height: 0px;
display: inline-block;
content: "&darr;";
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;
.opacity(50);
}
}
&.open {
a.menu,
a:hover {
background-color: #444;
background-color: rgba(255,255,255,.1);
*background-color: #444; /* IE6-7 */
color: #fff;
}
ul {
display: block;
li {
a {
background-color: transparent;
font-weight: normal;
&:hover {
background-color: rgba(255,255,255,.1);
*background-color: #444; /* IE6-7 */
color: #fff;
}
}
&.active a {
background-color: rgba(255,255,255,.1);
font-weight: bold;
}
}
}
}
}
li ul {
background-color: #333;
float: left;
display: none;
position: absolute;
top: 40px;
min-width: 160px;
max-width: 220px;
_width: 160px;
margin-left: 0;
margin-right: 0;
padding: 0;
text-align: left;
border: 0;
zoom: 1;
.border-radius(0 0 5px 5px);
.box-shadow(0 1px 2px rgba(0,0,0,0.6));
li {
float: none;
clear: both;
display: block;
background: none;
font-size: 12px;
a {
display: block;
padding: 6px 15px;
clear: both;
font-weight: normal;
line-height: 19px;
color: #bbb;
&:hover {
background-color: #333;
background-color: rgba(255,255,255,.25);
color: #fff;
}
}
// Dropdowns within the .nav
&.secondary-nav li .dropdown-menu {
right: 0;
}
}
// Dividers (basically an hr)
&.divider {
height: 1px;
overflow: hidden;
background: #222;
background: rgba(0,0,0,.2);
border-bottom: 1px solid rgba(255,255,255,.1);
margin: 5px 0;
}
// Dropdown Menus
// Use the .menu class on any <li> element within the topbar or ul.tabs and you'll get some superfancy dropdowns
.dropdown {
position: relative;
}
// The link that is clicked to toggle the dropdown
.dropdown-toggle:after {
width: 0;
height: 0;
display: inline-block;
content: "&darr;";
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;
.opacity(50);
}
// The dropdown menu (ul)
.dropdown-menu {
background-color: #fff;
float: left;
display: none; // None by default, but block on "open" of the menu
position: absolute;
top: 40px;
min-width: 160px;
max-width: 220px;
_width: 160px;
margin-left: 0; // override default ul styles
margin-right: 0;
padding: 6px 0;
zoom: 1; // do we need this?
border-color: #999;
border-color: rgba(0,0,0,.2);
border-style: solid;
border-width: 0 1px 1px;
.border-radius(0 0 6px 6px);
.box-shadow(0 2px 4px rgba(0,0,0,.2));
.background-clip(padding-box);
// Section separaters
span {
clear: both;
display: block;
background: rgba(0,0,0,.2);
padding: 6px 15px;
cursor: default;
color: @gray;
border-top: 1px solid rgba(0,0,0,.2);
}
// Unfloat any li's to make them stack
li {
float: none;
display: block;
background-color: none;
// Links within the dropdown menu
a {
display: block;
padding: 4px 15px;
clear: both;
font-weight: normal;
line-height: 18px;
color: @gray;
text-shadow: 0 1px 0 #fff;
// Hover state
&:hover {
#gradient > .vertical(#eeeeee, #dddddd);
color: @grayDark;
text-decoration: none;
@shadow: inset 0 1px 0 rgba(0,0,0,.025), inset 0 -1px rgba(0,0,0,.025);
.box-shadow(@shadow);
}
}
// Dividers (basically an hr) within the dropdown
&.divider {
height: 1px;
margin: 5px 0;
overflow: hidden;
background-color: #eee;
border-bottom: 1px solid #fff;
}
}
}
// Open state for the dropdown
.dropdown.open {
.dropdown-toggle {
color: #fff;
background-color: rgba(0,0,0,.3);
}
.dropdown-menu {
display: block;
}
}
// Tabs and Pills
.tabs,
.pills {
margin: 0 0 20px;
padding: 0;
list-style: none;
.clearfix();
> li {
float: left;
> a {
display: block;
}
}
}
// Basic Tabs
.tabs {
width: 100%;
border-bottom: 1px solid #ddd;
> li {
position: relative; // For the dropdowns mostly
> a {
margin-bottom: -1px;
margin-right: 2px;
padding: 0 15px;
line-height: (@baseline * 2) - 1;
.border-radius(4px 4px 0 0);
&:hover {
background-color: #eee;
border-bottom: 1px solid #ddd;
text-decoration: none;
}
}
&.active > a {
background-color: #fff;
padding: 0 14px;
border: 1px solid #ddd;
border-bottom: 0;
color: @gray;
}
}
.dropdown-menu {
top: 35px;
border-width: 1px;
.border-radius(0 6px 6px 6px);
}
.dropdown-toggle:after {
border-top-color: #999;
margin-top: 15px;
margin-left: 5px;
}
.dropdown.open .dropdown-toggle:after {
border-top-color: #555;
}
}
// Basic pill nav
.pills {
li {
a {
margin: 5px 3px 5px 0;
padding: 0 15px;
text-shadow: 0 1px 1px #fff;
line-height: 30px;
.border-radius(15px);
&:hover {
background: @linkColorHover;
color: #fff;
text-decoration: none;
text-shadow: 0 1px 1px rgba(0,0,0,.25);
}
}
&.active a {
background: @linkColor;
color: #fff;
text-shadow: 0 1px 1px rgba(0,0,0,.25);
}
}
}
@ -450,74 +512,6 @@ input[type=submit].btn {
}
}
// NAVIGATION
// ----------
// Common tab and pill styles
.tabs,
.pills {
margin: 0 0 20px;
padding: 0;
.clearfix();
li {
display: inline;
a {
float: left;
width: auto;
}
}
}
// Basic Tabs
.tabs {
width: 100%;
border-bottom: 1px solid @grayLight;
li {
a {
margin-bottom: -1px;
margin-right: 2px;
padding: 0 15px;
line-height: (@baseline * 2) - 1;
.border-radius(3px 3px 0 0);
&:hover {
background-color: @grayLighter;
border-bottom: 1px solid @grayLight;
}
}
&.active a {
background-color: #fff;
padding: 0 14px;
border: 1px solid #ccc;
border-bottom: 0;
color: @gray;
}
}
}
// Basic pill nav
.pills {
li {
a {
margin: 5px 3px 5px 0;
padding: 0 15px;
text-shadow: 0 1px 1px #fff;
line-height: 30px;
.border-radius(15px);
&:hover {
background: @linkColorHover;
color: #fff;
text-decoration: none;
text-shadow: 0 1px 1px rgba(0,0,0,.25);
}
}
&.active a {
background: @linkColor;
color: #fff;
text-shadow: 0 1px 1px rgba(0,0,0,.25);
}
}
}
// PAGINATION
// ----------
@ -748,4 +742,4 @@ input[type=submit].btn {
margin-bottom: 0;
}
}
}
}