diff --git a/bootstrap.css b/bootstrap.css index 8b6fe3eb42c6cf55897124d66ecdc9b95b4d64f9..6d3c15390adf8fa68d54251c3c03085f837eaa8e 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: Fri Sep 16 14:07:03 PDT 2011 + * Date: Sat Sep 17 17:21:25 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). @@ -1238,16 +1238,13 @@ table .headerSortUp.purple, table .headerSortDown.purple { color: #bfbfbf; text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25); } -.topbar h3 a:hover, .topbar .brand a:hover, .topbar ul .active > a { +.topbar .brand a:hover, .topbar ul .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, .topbar .brand { +.topbar .brand { float: left; display: block; padding: 8px 20px 12px; @@ -1322,7 +1319,7 @@ 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-inner, .topbar .fill { +.topbar-inner { background-color: #222; background-color: #222222; background-repeat: repeat-x; @@ -1338,92 +1335,59 @@ 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 div > ul, .nav { +.nav { display: block; float: left; margin: 0 10px 0 0; position: relative; left: 0; } -.topbar div > ul > li, .nav > li { +.nav > li { display: block; float: left; } -.topbar div > ul a, .nav 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 { +.nav a:hover { color: #ffffff; text-decoration: none; } -.topbar div > ul .active > a, .nav .active > a { +.nav .active > a { background-color: #222; background-color: rgba(0, 0, 0, 0.5); } -.topbar div > ul.secondary-nav, .nav.secondary-nav { +.nav.secondary-nav { float: right; margin-left: 10px; margin-right: 0; } -.topbar div > ul.secondary-nav .menu-dropdown, -.nav.secondary-nav .menu-dropdown, -.topbar div > ul.secondary-nav .dropdown-menu, .nav.secondary-nav .dropdown-menu { right: 0; border: 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 { +.nav .dropdown-toggle:hover, .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: #ffffff; } -.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; @@ -1437,26 +1401,20 @@ table .headerSortUp.purple, table .headerSortDown.purple { filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#292929', endColorstr='#191919', GradientType=0); color: #ffffff; } -.topbar div > ul .menu-dropdown .active a, -.nav .menu-dropdown .active a, -.topbar div > ul .dropdown-menu .active a, .nav .dropdown-menu .active a { color: #ffffff; } -.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 { +.topbar ul .dropdown-menu li a { padding: 4px 15px; } -li.menu, .dropdown { +.dropdown { position: relative; } -a.menu:after, .dropdown-toggle:after { +.dropdown-toggle:after { width: 0; height: 0; display: inline-block; @@ -1473,7 +1431,7 @@ a.menu:after, .dropdown-toggle:after { -moz-opacity: 0.5; opacity: 0.5; } -.menu-dropdown, .dropdown-menu { +.dropdown-menu { background-color: #ffffff; float: left; display: none; @@ -1501,12 +1459,12 @@ a.menu:after, .dropdown-toggle:after { -moz-background-clip: padding-box; background-clip: padding-box; } -.menu-dropdown li, .dropdown-menu li { +.dropdown-menu li { float: none; display: block; background-color: none; } -.menu-dropdown .divider, .dropdown-menu .divider { +.dropdown-menu .divider { height: 1px; margin: 5px 0; overflow: hidden; @@ -1539,17 +1497,11 @@ a.menu:after, .dropdown-toggle:after { -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); } -.open .menu, -.dropdown.open .menu, -.open .dropdown-toggle, .dropdown.open .dropdown-toggle { color: #ffffff; 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; } @@ -1606,22 +1558,22 @@ a.menu:after, .dropdown-toggle:after { border: 1px solid #ddd; border-bottom-color: transparent; } -.tabs .menu-dropdown, .tabs .dropdown-menu { +.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 a.menu:after, .tabs .dropdown-toggle:after { +.tabs .dropdown-toggle:after { border-top-color: #999; margin-top: 15px; margin-left: 5px; } -.tabs li.open.menu .menu, .tabs .open.dropdown .dropdown-toggle { +.tabs .open.dropdown .dropdown-toggle { border-color: #999; } -.tabs li.open a.menu:after, .tabs .dropdown.open .dropdown-toggle:after { +.tabs .dropdown.open .dropdown-toggle:after { border-top-color: #555; } .tab-content { diff --git a/bootstrap.min.css b/bootstrap.min.css index aabdf2428b30d9932a884c217d76dacef29f230e..4a3b6485bb288ed7d22f8a48c5aea6ab479345ce 100644 --- a/bootstrap.min.css +++ b/bootstrap.min.css @@ -209,9 +209,8 @@ 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 a{color:#bfbfbf;text-shadow:0 -1px 0 rgba(0, 0, 0, 0.25);} -.topbar h3 a:hover,.topbar .brand a:hover,.topbar ul .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,.topbar .brand{float:left;display:block;padding:8px 20px 12px;margin-left:-20px;color:#ffffff;font-size:20px;font-weight:200;line-height:1;} +.topbar .brand a:hover,.topbar ul .active>a{background-color:#333;background-color:rgba(255, 255, 255, 0.05);color:#ffffff;text-decoration:none;} +.topbar .brand{float:left;display:block;padding:8px 20px 12px;margin-left:-20px;color:#ffffff;font-size:20px;font-weight:200;line-height:1;} .topbar p{margin:0;line-height:40px;}.topbar p a:hover{background-color:transparent;color:#ffffff;} .topbar form{float:left;margin:5px 0 0 0;position:relative;filter:alpha(opacity=100);-khtml-opacity:1;-moz-opacity:1;opacity:1;} .topbar form.pull-right{float:right;} @@ -219,33 +218,33 @@ table .headerSortUp.purple,table .headerSortDown.purple{background-color:#e2d5f0 .topbar input::-webkit-input-placeholder{color:#e6e6e6;} .topbar input:hover{background-color:#bfbfbf;background-color:rgba(255, 255, 255, 0.5);color:#ffffff;} .topbar input:focus,.topbar input.focused{outline:0;background-color:#ffffff;color:#404040;text-shadow:0 1px 0 #ffffff;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);filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#333333', endColorstr='#222222', GradientType=0);-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 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:#ffffff;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 .menu-dropdown,.nav.secondary-nav .menu-dropdown,.topbar div>ul.secondary-nav .dropdown-menu,.nav.secondary-nav .dropdown-menu{right:0;border: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:#ffffff;}.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);filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#292929', endColorstr='#191919', GradientType=0);color:#ffffff;} -.topbar div>ul .menu-dropdown .active a,.nav .menu-dropdown .active a,.topbar div>ul .dropdown-menu .active a,.nav .dropdown-menu .active a{color:#ffffff;} -.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 #ffffff;filter:alpha(opacity=50);-khtml-opacity:0.5;-moz-opacity:0.5;opacity:0.5;} -.menu-dropdown,.dropdown-menu{background-color:#ffffff;float:left;display:none;position:absolute;top:40px;z-index:900;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 .divider,.dropdown-menu .divider{height:1px;margin:5px 0;overflow:hidden;background-color:#eee;border-bottom:1px solid #ffffff;} +.topbar-inner{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);filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#333333', endColorstr='#222222', GradientType=0);-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);} +.nav{display:block;float:left;margin:0 10px 0 0;position:relative;left:0;}.nav>li{display:block;float:left;} +.nav a{display:block;float:none;padding:10px 10px 11px;line-height:19px;text-decoration:none;}.nav a:hover{color:#ffffff;text-decoration:none;} +.nav .active>a{background-color:#222;background-color:rgba(0, 0, 0, 0.5);} +.nav.secondary-nav{float:right;margin-left:10px;margin-right:0;}.nav.secondary-nav .dropdown-menu{right:0;border:0;} +.nav .dropdown-toggle:hover,.nav .dropdown.open .dropdown-toggle{background:#444;background:rgba(255, 255, 255, 0.05);} +.nav .dropdown-menu{background-color:#333;}.nav .dropdown-menu .dropdown-toggle{color:#ffffff;}.nav .dropdown-menu .dropdown-toggle.open{background:#444;background:rgba(255, 255, 255, 0.05);} +.nav .dropdown-menu li a{color:#999;text-shadow:0 1px 0 rgba(0, 0, 0, 0.5);}.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);filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#292929', endColorstr='#191919', GradientType=0);color:#ffffff;} +.nav .dropdown-menu .active a{color:#ffffff;} +.nav .dropdown-menu .divider{background-color:#222;border-color:#444;} +.topbar ul .dropdown-menu li a{padding:4px 15px;} +.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 #ffffff;filter:alpha(opacity=50);-khtml-opacity:0.5;-moz-opacity:0.5;opacity:0.5;} +.dropdown-menu{background-color:#ffffff;float:left;display:none;position:absolute;top:40px;z-index:900;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 .divider{height:1px;margin:5px 0;overflow:hidden;background-color:#eee;border-bottom:1px solid #ffffff;} .topbar .dropdown-menu a,.dropdown-menu a{display:block;padding:4px 15px;clear:both;font-weight:normal;line-height:18px;color:#808080;text-shadow:0 1px 0 #ffffff;}.topbar .dropdown-menu 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);filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#eeeeee', endColorstr='#dddddd', GradientType=0);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);} -.open .menu,.dropdown.open .menu,.open .dropdown-toggle,.dropdown.open .dropdown-toggle{color:#ffffff;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;} +.dropdown.open .dropdown-toggle{color:#ffffff;background:#ccc;background: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;}.tabs:before,.pills:before,.tabs:after,.pills:after{display:table;content:"";zoom:1;*display:inline;} .tabs:after,.pills:after{clear:both;} .tabs>li,.pills>li{float:left;}.tabs>li>a,.pills>li>a{display:block;} .tabs{float:left;width:100%;border-bottom:1px solid #ddd;}.tabs>li{position:relative;top:1px;}.tabs>li>a{padding:0 15px;margin-right:2px;line-height:36px;border:1px solid transparent;-webkit-border-radius:4px 4px 0 0;-moz-border-radius:4px 4px 0 0;border-radius:4px 4px 0 0;}.tabs>li>a:hover{text-decoration:none;background-color:#eee;border-color:#eee #eee #ddd;} .tabs>li.active>a{color:#808080;background-color:#ffffff;border:1px solid #ddd;border-bottom-color:transparent;} -.tabs .menu-dropdown,.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 a.menu:after,.tabs .dropdown-toggle:after{border-top-color:#999;margin-top:15px;margin-left:5px;} -.tabs li.open.menu .menu,.tabs .open.dropdown .dropdown-toggle{border-color:#999;} -.tabs li.open a.menu:after,.tabs .dropdown.open .dropdown-toggle:after{border-top-color:#555;} +.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 .open.dropdown .dropdown-toggle{border-color:#999;} +.tabs .dropdown.open .dropdown-toggle:after{border-top-color:#555;} .tab-content{clear:both;} .pills a{margin:5px 3px 5px 0;padding:0 15px;text-shadow:0 1px 1px #ffffff;line-height:30px;-webkit-border-radius:15px;-moz-border-radius:15px;border-radius:15px;}.pills a:hover{background:#00438a;color:#ffffff;text-decoration:none;text-shadow:0 1px 1px rgba(0, 0, 0, 0.25);} .pills .active a{background:#0069d6;color:#ffffff;text-shadow:0 1px 1px rgba(0, 0, 0, 0.25);} diff --git a/docs/index.html b/docs/index.html index f99b756fe1fad3f7189bcec98b6f12fb66c57f37..5c5162471a2120049e29c557136f3d443f828ea0 100644 --- a/docs/index.html +++ b/docs/index.html @@ -6,7 +6,7 @@ <meta name="description" content=""> <meta name="author" content=""> - <!-- Le HTML5 shim, for IE6-8 support of HTML elements --> + <!-- Le HTML5 shim, for IE6-8 support of HTML5 elements --> <!--[if lt IE 9]> <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script> <![endif]--> @@ -37,22 +37,42 @@ <!-- Topbar ================================================== --> - <div class="topbar" data-scrollspy="scrollspy" > + <div class="topbar" data-scrollspy="scrollspy"> <div class="topbar-inner"> <div class="container"> <a class="brand" href="#">Bootstrap</a> <ul class="nav"> <li class="active"><a href="#overview">Overview</a></li> <li><a href="#about">About</a></li> - <li><a href="#grid-system">Grid</a></li> - <li><a href="#layouts">Layouts</a></li> - <li><a href="#typography">Type</a></li> - <li><a href="#media">Media</a></li> - <li><a href="#tables">Tables</a></li> - <li><a href="#forms">Forms</a></li> - <li><a href="#navigation">Navigation</a></li> - <li><a href="#alerts">Alerts</a></li> - <li><a href="#popovers">Popovers</a></li> + + <li class="dropdown" data-dropdown="dropdown"> + <a href="#" class="dropdown-toggle">Scaffolding</a> + <ul class="dropdown-menu"> + <li><a href="#grid-system">Grid</a></li> + <li><a href="#layouts">Layouts</a></li> + </ul> + </li> + + <li class="dropdown" data-dropdown="dropdown"> + <a href="#" class="dropdown-toggle">CSS</a> + <ul class="dropdown-menu"> + <li><a href="#typography">Type</a></li> + <li><a href="#tables">Tables</a></li> + <li><a href="#forms">Forms</a></li> + </ul> + </li> + + <li class="dropdown" data-dropdown="dropdown"> + <a href="#" class="dropdown-toggle">Patterns</a> + <ul class="dropdown-menu"> + <li><a href="#media">Media</a></li> + <li><a href="#navigation">Navigation</a></li> + <li><a href="#alerts">Alerts</a></li> + <li><a href="#popovers">Popovers</a></li> + </ul> + </li> + + <li><a href="#javascript">Javascript</a></li> <li><a href="#less">Less</a></li> </ul> @@ -718,102 +738,6 @@ -<!-- Media -================================================== --> -<section id="media"> - <div class="page-header"> - <h1>Media <small>Displaying images and videos</small></h1> - </div> - <!-- Table structure --> - <div class="row"> - <div class="span4"> - <h2>Media grid</h2> - <p>Display thumbnails of varying sizes on pages with a low HTML footprint and minimal styles.</p> - </div> - <div class="span12"> - <h3>Example thumbnails</h3> - <p>Thumbnails in the <code>.media-grid</code> can be any size, but they work best when mapped directly to the built-in Bootstrap grid system. Image widths like 90, 210, and 330 combine with a few pixels of padding to equal the <code>.span2</code>, <code>.span4</code>, and <code>.span6</code> column sizes.</p> - <h4>Large</h4> - <ul class="media-grid"> - <li> - <a href="#"> - <img class="thumbnail" src="http://placehold.it/330x230" alt=""> - </a> - </li> - <li> - <a href="#"> - <img class="thumbnail" src="http://placehold.it/330x230" alt=""> - </a> - </li> - </ul> - <h4>Medium</h4> - <ul class="media-grid"> - <li> - <a href="#"> - <img class="thumbnail" src="http://placehold.it/210x150" alt=""> - </a> - </li> - <li> - <a href="#"> - <img class="thumbnail" src="http://placehold.it/210x150" alt=""> - </a> - </li> - <li> - <a href="#"> - <img class="thumbnail" src="http://placehold.it/210x150" alt=""> - </a> - </li> - <li> - <a href="#"> - <img class="thumbnail" src="http://placehold.it/210x150" alt=""> - </a> - </li> - <li> - <a href="#"> - <img class="thumbnail" src="http://placehold.it/210x150" alt=""> - </a> - </li> - </ul> - <h4>Small</h4> - <ul class="media-grid"> - <li> - <a href="#"> - <img class="thumbnail" src="http://placehold.it/90x90" alt=""> - </a> - </li> - <li> - <a href="#"> - <img class="thumbnail" src="http://placehold.it/90x90" alt=""> - </a> - </li> - <li> - <a href="#"> - <img class="thumbnail" src="http://placehold.it/90x90" alt=""> - </a> - </li> - </ul> - <h4>Coding them</h4> - <p>Media grids are easy to use and rather simple on the markup side. Their dimensions are purely based on the size of the images included.</p> -<pre class="prettyprint linenums"> -<ul class="media-grid"> - <li> - <a href="#"> - <img class="thumbnail" src="http://placehold.it/330x230" alt=""> - </a> - </li> - <li> - <a href="#"> - <img class="thumbnail" src="http://placehold.it/330x230" alt=""> - </a> - </li> -</ul> -</pre> - </div> - </div><!-- /row --> -</section> - - - <!-- Tables ================================================== --> <section id="tables"> @@ -1295,6 +1219,102 @@ +<!-- Media +================================================== --> +<section id="media"> + <div class="page-header"> + <h1>Media <small>Displaying images and videos</small></h1> + </div> + <!-- Table structure --> + <div class="row"> + <div class="span4"> + <h2>Media grid</h2> + <p>Display thumbnails of varying sizes on pages with a low HTML footprint and minimal styles.</p> + </div> + <div class="span12"> + <h3>Example thumbnails</h3> + <p>Thumbnails in the <code>.media-grid</code> can be any size, but they work best when mapped directly to the built-in Bootstrap grid system. Image widths like 90, 210, and 330 combine with a few pixels of padding to equal the <code>.span2</code>, <code>.span4</code>, and <code>.span6</code> column sizes.</p> + <h4>Large</h4> + <ul class="media-grid"> + <li> + <a href="#"> + <img class="thumbnail" src="http://placehold.it/330x230" alt=""> + </a> + </li> + <li> + <a href="#"> + <img class="thumbnail" src="http://placehold.it/330x230" alt=""> + </a> + </li> + </ul> + <h4>Medium</h4> + <ul class="media-grid"> + <li> + <a href="#"> + <img class="thumbnail" src="http://placehold.it/210x150" alt=""> + </a> + </li> + <li> + <a href="#"> + <img class="thumbnail" src="http://placehold.it/210x150" alt=""> + </a> + </li> + <li> + <a href="#"> + <img class="thumbnail" src="http://placehold.it/210x150" alt=""> + </a> + </li> + <li> + <a href="#"> + <img class="thumbnail" src="http://placehold.it/210x150" alt=""> + </a> + </li> + <li> + <a href="#"> + <img class="thumbnail" src="http://placehold.it/210x150" alt=""> + </a> + </li> + </ul> + <h4>Small</h4> + <ul class="media-grid"> + <li> + <a href="#"> + <img class="thumbnail" src="http://placehold.it/90x90" alt=""> + </a> + </li> + <li> + <a href="#"> + <img class="thumbnail" src="http://placehold.it/90x90" alt=""> + </a> + </li> + <li> + <a href="#"> + <img class="thumbnail" src="http://placehold.it/90x90" alt=""> + </a> + </li> + </ul> + <h4>Coding them</h4> + <p>Media grids are easy to use and rather simple on the markup side. Their dimensions are purely based on the size of the images included.</p> +<pre class="prettyprint linenums"> +<ul class="media-grid"> + <li> + <a href="#"> + <img class="thumbnail" src="http://placehold.it/330x230" alt=""> + </a> + </li> + <li> + <a href="#"> + <img class="thumbnail" src="http://placehold.it/330x230" alt=""> + </a> + </li> +</ul> +</pre> + </div> + </div><!-- /row --> +</section> + + + <!-- Navigation ================================================== --> <section id="navigation"> @@ -1306,7 +1326,7 @@ <div class="topbar" data-dropdown="dropdown" > <div class="topbar-inner"> <div class="container"> - <h3><a href="#">Project Name</a></h3> + <a class="brand" href="#">Project Name</a> <ul class="nav"> <li class="active"><a href="#">Home</a></li> <li><a href="#">Link</a></li> diff --git a/docs/javascript.html b/docs/javascript.html index f001ad80834a2ef3de5030c7a9bf015d28f70a82..dc35e4a3747e2520b51edfddaaa866bf3b4bc151 100644 --- a/docs/javascript.html +++ b/docs/javascript.html @@ -39,11 +39,11 @@ <!-- Topbar ================================================== --> - <div class="topbar" data-scrollspy="scrollspy" > - <div class="fill"> + <div class="topbar" data-scrollspy="scrollspy"> + <div class="topbar-inner"> <div class="container"> - <h3><a href="#">Bootstrap JS</a></h3> - <ul> + <a class="brand" href="#">Bootstrap JS</a> + <ul class="nav"> <li><a href="#overview">Overview</a></li> <li><a href="#modal">Modals</a></li> <li><a href="#dropdown">Dropdown</a></li> diff --git a/js/bootstrap-dropdown.js b/js/bootstrap-dropdown.js index ca2daf1f5612c5faf71b92400f04de98196490c4..75320c0f876b59853babf944569b0af6714d9340 100644 --- a/js/bootstrap-dropdown.js +++ b/js/bootstrap-dropdown.js @@ -20,7 +20,7 @@ (function( $ ){ - var d = 'a.menu, .dropdown-toggle' + var d = '.dropdown-toggle' function clearMenus() { $(d).parent('li').removeClass('open') @@ -28,7 +28,7 @@ $(function () { $('html').bind("click", clearMenus) - $('body').dropdown( '[data-dropdown] a.menu, [data-dropdown] .dropdown-toggle' ) + $('body').dropdown( '[data-dropdown] .dropdown-toggle' ) }) /* DROPDOWN PLUGIN DEFINITION diff --git a/lib/patterns.less b/lib/patterns.less index ce387614e9a13d8f177ece609cab44efeca5b058..1ba218c36bad8c3c44eaf3708b5f6d97a074b3c8 100644 --- a/lib/patterns.less +++ b/lib/patterns.less @@ -23,8 +23,6 @@ } // Hover and active states - // h3 for backwards compatibility - h3 a:hover, .brand a:hover, ul .active > a { background-color: #333; @@ -33,12 +31,7 @@ text-decoration: none; } - // Website name - // h3 left for backwards compatibility - h3 { - position: relative; - } - h3 a, + // Website or project name .brand { float: left; display: block; @@ -112,9 +105,7 @@ } // gradient is applied to it's own element because overflow visible is not honored by ie when filter is present -// For backwards compatibility, include .topbar .fill -.topbar-inner, -.topbar .fill { +.topbar-inner { 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); @@ -127,8 +118,6 @@ // Topbar Nav // ul.nav for all topbar based navigation to avoid inheritance issues and over-specificity -// For backwards compatibility, leave in .topbar div > ul -.topbar div > ul, .nav { display: block; float: left; @@ -160,28 +149,19 @@ float: right; margin-left: 10px; margin-right: 0; - // backwards compatibility - .menu-dropdown, .dropdown-menu { right: 0; border: 0; } } // 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: @white; &.open { @@ -207,22 +187,16 @@ } } -// For backwards compatibility 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; @@ -238,8 +212,6 @@ a.menu:after, .opacity(50); } // The dropdown menu (ul) -// .menu-dropdown for backwards compatibility -.menu-dropdown, .dropdown-menu { background-color: @white; float: left; @@ -300,18 +272,12 @@ a.menu:after, } // Open state for the dropdown -// .open for backwards compatibility -.open, .dropdown.open { - // .menu for backwards compatibility - .menu, .dropdown-toggle { color: @white; background: #ccc; background: rgba(0,0,0,.3); } - // .menu-dropdown for backwards compatibility - .menu-dropdown, .dropdown-menu { display: block; } @@ -360,27 +326,19 @@ a.menu:after, border-bottom-color: transparent; } } - // first one for backwards compatibility - .menu-dropdown, .dropdown-menu { top: 35px; border-width: 1px; .border-radius(0 6px 6px 6px); } - // first one for backwards compatibility - a.menu:after, .dropdown-toggle:after { border-top-color: #999; margin-top: 15px; margin-left: 5px; } - // first one for backwards compatibility - li.open.menu .menu, .open.dropdown .dropdown-toggle { border-color: #999; } - // first one for backwards compatibility - li.open a.menu:after, .dropdown.open .dropdown-toggle:after { border-top-color: #555; }