diff --git a/bootstrap.css b/bootstrap.css index 69c53f484d55..69baba4e0044 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: Sun Sep 18 14:19:52 PDT 2011 + * Date: Fri Oct 21 14:51:54 CEST 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). @@ -173,7 +173,7 @@ textarea { /* Variables.less * Variables to customize the look and feel of Bootstrap * ----------------------------------------------------- */ -/* Variables.less +/* Mixins.less * Snippets of reusable CSS to develop faster and keep code readable * ----------------------------------------------------------------- */ /* @@ -747,45 +747,24 @@ form div.clearfix.error .input-prepend span.add-on, form div.clearfix.error .inp border-color: #c87872; color: #b9554d; } -.input-mini, -input.mini, -textarea.mini, -select.mini { +.input-mini { width: 60px; } -.input-small, -input.small, -textarea.small, -select.small { +.input-small { width: 90px; } -.input-medium, -input.medium, -textarea.medium, -select.medium { +.input-medium { width: 150px; } -.input-large, -input.large, -textarea.large, -select.large { +.input-large { width: 210px; } -.input-xlarge, -input.xlarge, -textarea.xlarge, -select.xlarge { +.input-xlarge { width: 270px; } -.input-xxlarge, -input.xxlarge, -textarea.xxlarge, -select.xxlarge { +.input-xxlarge { width: 530px; } -textarea.xxlarge { - overflow-y: auto; -} input.span1, textarea.span1, select.span1 { display: inline-block; float: none; @@ -1238,16 +1217,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 +1298,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 +1314,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 +1380,21 @@ 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; + display: inline-block; } -a.menu:after, .dropdown-toggle:after { +.dropdown-toggle:after { width: 0; height: 0; display: inline-block; @@ -1473,7 +1411,43 @@ a.menu:after, .dropdown-toggle:after { -moz-opacity: 0.5; opacity: 0.5; } -.menu-dropdown, .dropdown-menu { +.btn.dropdown-toggle, .btn.large.dropdown-toggle, .btn.small.dropdown-toggle { + padding-right: 11px; +} +.btn.dropdown-toggle:after { + filter: alpha(opacity=80); + -khtml-opacity: 0.8; + -moz-opacity: 0.8; + opacity: 0.8; + margin-top: 6px; + margin-left: 10px; +} +.btn.small.dropdown-toggle:after { + margin-top: 4px; +} +.btn.danger.dropdown-toggle:after, +.btn.info.dropdown-toggle:after, +.btn.primary.dropdown-toggle:after, +.btn.success.dropdown-toggle:after { + border-top-color: #ffffff; +} +.btn.dropdown-toggle:after { + border-top-color: #999; +} +.btn.dropdown-toggle { + overflow: hidden; +} +.btn.dropdown-toggle + .dropdown-menu { + top: 29px; + border-width: 1px; + -webkit-border-radius: 6px 6px 6px 6px; + -moz-border-radius: 6px 6px 6px 6px; + border-radius: 6px 6px 6px 6px; +} +.btn.dropdown-toggle.large + .dropdown-menu { + top: 39px; +} +.dropdown-menu { background-color: #ffffff; float: left; display: none; @@ -1501,12 +1475,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 +1513,20 @@ 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 { +li.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, +div.dropdown.open .dropdown-toggle { + -webkit-box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.25), 0 1px 2px rgba(0, 0, 0, 0.05); + -moz-box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.25), 0 1px 2px rgba(0, 0, 0, 0.05); + box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.25), 0 1px 2px rgba(0, 0, 0, 0.05); + background-position: 0 -15px; +} +.dropdown.open { + z-index: 100; +} .dropdown.open .dropdown-menu { display: block; } @@ -1606,22 +1583,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 { @@ -1688,23 +1665,6 @@ a.menu:after, .dropdown-toggle:after { .hero-unit { background-color: #f5f5f5; 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; diff --git a/bootstrap.min.css b/bootstrap.min.css index aabdf2428b30..0007c3a3d66c 100644 --- a/bootstrap.min.css +++ b/bootstrap.min.css @@ -128,13 +128,12 @@ input[type=file]:focus,input[type=checkbox]:focus,select:focus{-webkit-box-shado form div.clearfix.error{background:#fae5e3;padding:10px 0;margin:-10px 0 10px;-webkit-border-radius:4px;-moz-border-radius:4px;border-radius:4px;}form div.clearfix.error>label,form div.clearfix.error span.help-inline,form div.clearfix.error span.help-block{color:#9d261d;} form div.clearfix.error input,form div.clearfix.error textarea{border-color:#c87872;-webkit-box-shadow:0 0 3px rgba(171, 41, 32, 0.25);-moz-box-shadow:0 0 3px rgba(171, 41, 32, 0.25);box-shadow:0 0 3px rgba(171, 41, 32, 0.25);}form div.clearfix.error input:focus,form div.clearfix.error textarea:focus{border-color:#b9554d;-webkit-box-shadow:0 0 6px rgba(171, 41, 32, 0.5);-moz-box-shadow:0 0 6px rgba(171, 41, 32, 0.5);box-shadow:0 0 6px rgba(171, 41, 32, 0.5);} form div.clearfix.error .input-prepend span.add-on,form div.clearfix.error .input-append span.add-on{background:#f4c8c5;border-color:#c87872;color:#b9554d;} -.input-mini,input.mini,textarea.mini,select.mini{width:60px;} -.input-small,input.small,textarea.small,select.small{width:90px;} -.input-medium,input.medium,textarea.medium,select.medium{width:150px;} -.input-large,input.large,textarea.large,select.large{width:210px;} -.input-xlarge,input.xlarge,textarea.xlarge,select.xlarge{width:270px;} -.input-xxlarge,input.xxlarge,textarea.xxlarge,select.xxlarge{width:530px;} -textarea.xxlarge{overflow-y:auto;} +.input-mini{width:60px;} +.input-small{width:90px;} +.input-medium{width:150px;} +.input-large{width:210px;} +.input-xlarge{width:270px;} +.input-xxlarge{width:530px;} input.span1,textarea.span1,select.span1{display:inline-block;float:none;width:30px;margin-left:0;} input.span2,textarea.span2,select.span2{display:inline-block;float:none;width:90px;margin-left:0;} input.span3,textarea.span3,select.span3{display:inline-block;float:none;width:150px;margin-left:0;} @@ -209,9 +208,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 +217,41 @@ 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;display:inline-block;} +.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;} +.btn.dropdown-toggle,.btn.large.dropdown-toggle,.btn.small.dropdown-toggle{padding-right:11px;} +.btn.dropdown-toggle:after{filter:alpha(opacity=80);-khtml-opacity:0.8;-moz-opacity:0.8;opacity:0.8;margin-top:6px;margin-left:10px;} +.btn.small.dropdown-toggle:after{margin-top:4px;} +.btn.danger.dropdown-toggle:after,.btn.info.dropdown-toggle:after,.btn.primary.dropdown-toggle:after,.btn.success.dropdown-toggle:after{border-top-color:#ffffff;} +.btn.dropdown-toggle:after{border-top-color:#999;} +.btn.dropdown-toggle{overflow:hidden;}.btn.dropdown-toggle+.dropdown-menu{top:29px;border-width:1px;-webkit-border-radius:6px 6px 6px 6px;-moz-border-radius:6px 6px 6px 6px;border-radius:6px 6px 6px 6px;} +.btn.dropdown-toggle.large+.dropdown-menu{top:39px;} +.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;} +li.dropdown.open .dropdown-toggle{color:#ffffff;background:#ccc;background:rgba(0, 0, 0, 0.3);} +div.dropdown.open .dropdown-toggle{-webkit-box-shadow:inset 0 2px 4px rgba(0, 0, 0, 0.25),0 1px 2px rgba(0, 0, 0, 0.05);-moz-box-shadow:inset 0 2px 4px rgba(0, 0, 0, 0.25),0 1px 2px rgba(0, 0, 0, 0.05);box-shadow:inset 0 2px 4px rgba(0, 0, 0, 0.25),0 1px 2px rgba(0, 0, 0, 0.05);background-position:0 -15px;} +.dropdown.open{z-index:100;}.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);} @@ -254,9 +260,7 @@ a.menu:after,.dropdown-toggle:after{width:0;height:0;display:inline-block;conten .breadcrumb{margin:0 0 18px;padding:7px 14px;background-color:#f5f5f5;background-repeat:repeat-x;background-image:-khtml-gradient(linear, left top, left bottom, from(#ffffff), to(#f5f5f5));background-image:-moz-linear-gradient(top, #ffffff, #f5f5f5);background-image:-ms-linear-gradient(top, #ffffff, #f5f5f5);background-image:-webkit-gradient(linear, left top, left bottom, color-stop(0%, #ffffff), color-stop(100%, #f5f5f5));background-image:-webkit-linear-gradient(top, #ffffff, #f5f5f5);background-image:-o-linear-gradient(top, #ffffff, #f5f5f5);background-image:linear-gradient(top, #ffffff, #f5f5f5);filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#f5f5f5', GradientType=0);border:1px solid #ddd;-webkit-border-radius:3px;-moz-border-radius:3px;border-radius:3px;-webkit-box-shadow:inset 0 1px 0 #ffffff;-moz-box-shadow:inset 0 1px 0 #ffffff;box-shadow:inset 0 1px 0 #ffffff;}.breadcrumb li{display:inline;text-shadow:0 1px 0 #ffffff;} .breadcrumb .divider{padding:0 5px;color:#bfbfbf;} .breadcrumb .active a{color:#404040;} -.hero-unit{background-color:#f5f5f5;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;} +.hero-unit{background-color:#f5f5f5;margin-bottom:30px;margin-top:17px;padding-top:17px;border-top:1px solid #eee;} .page-header{margin-bottom:17px;border-bottom:1px solid #ddd;-webkit-box-shadow:0 1px 0 rgba(255, 255, 255, 0.5);-moz-box-shadow:0 1px 0 rgba(255, 255, 255, 0.5);box-shadow:0 1px 0 rgba(255, 255, 255, 0.5);}.page-header h1{margin-bottom:8px;} .btn.danger,.alert-message.danger,.btn.danger:hover,.alert-message.danger:hover,.btn.error,.alert-message.error,.btn.error:hover,.alert-message.error:hover,.btn.success,.alert-message.success,.btn.success:hover,.alert-message.success:hover,.btn.info,.alert-message.info,.btn.info:hover,.alert-message.info:hover{color:#ffffff;} .btn.danger,.alert-message.danger,.btn.error,.alert-message.error{background-color:#c43c35;background-repeat:repeat-x;background-image:-khtml-gradient(linear, left top, left bottom, from(#ee5f5b), to(#c43c35));background-image:-moz-linear-gradient(top, #ee5f5b, #c43c35);background-image:-ms-linear-gradient(top, #ee5f5b, #c43c35);background-image:-webkit-gradient(linear, left top, left bottom, color-stop(0%, #ee5f5b), color-stop(100%, #c43c35));background-image:-webkit-linear-gradient(top, #ee5f5b, #c43c35);background-image:-o-linear-gradient(top, #ee5f5b, #c43c35);background-image:linear-gradient(top, #ee5f5b, #c43c35);filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ee5f5b', endColorstr='#c43c35', GradientType=0);text-shadow:0 -1px 0 rgba(0, 0, 0, 0.25);border-color:#c43c35 #c43c35 #882a25;border-color:rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);} diff --git a/docs/index.html b/docs/index.html index 9fcc5c368f31..1c111fe2d42b 100644 --- a/docs/index.html +++ b/docs/index.html @@ -6,7 +6,7 @@ - + @@ -37,22 +37,42 @@ -
+
Bootstrap @@ -64,14 +84,12 @@ ================================================== -->
-
-

Bootstrap, from Twitter

-

- Bootstrap is a toolkit from Twitter designed to kickstart development of webapps and sites.
- It includes base CSS and HTML for typography, forms, buttons, tables, grids, navigation, and more.
-

-

Nerd alert: Bootstrap is built with Less and was designed to work out of the gate with modern browsers in mind.

-
+

Bootstrap, from Twitter

+

+ Bootstrap is a toolkit from Twitter designed to kickstart development of webapps and sites.
+ It includes base CSS and HTML for typography, forms, buttons, tables, grids, navigation, and more.
+

+

Nerd alert: Bootstrap is built with Less and was designed to work out of the gate with modern browsers in mind.

@@ -120,10 +138,6 @@

About Bootstrap Brief history, browser support, and more

History

Engineers at Twitter have historically used almost any library they were familiar with to meet front-end requirements. Bootstrap began as an answer to the challenges that presented. With the help of many awesome folks, Bootstrap has grown significantly.

Read more on dev.twitter.com ›

-

- - -

Browser support

@@ -718,102 +732,6 @@

Label anything

- -
-
-

Media Displaying images and videos

-
- -
-
-

Media grid

-

Display thumbnails of varying sizes on pages with a low HTML footprint and minimal styles.

-
-
-

Example thumbnails

-

Thumbnails in the .media-grid 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 .span2, .span4, and .span6 column sizes.

-

Large

- -

Medium

- -

Small

- -

Coding them

-

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.

-
-<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>
-
-
-
-
- - -
@@ -1289,6 +1207,197 @@

Buttons

 
+

Dropdown buttons

+
+
+ Primary + +
+ +
+ Default + +
+ +
+ Info + +
+ +
+ Success + +
+ +
+ Danger + +
+
+ +

Alternate sizes

+
+
+ Primary action + +
+
+ Action + +
+
+
+
+ Primary action + +
+
+ Action + +
+
+
+
+
+ + + + + +
+
+

Media Displaying images and videos

+
+ +
+
+

Media grid

+

Display thumbnails of varying sizes on pages with a low HTML footprint and minimal styles.

+
+
+

Example thumbnails

+

Thumbnails in the .media-grid 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 .span2, .span4, and .span6 column sizes.

+

Large

+ +

Medium

+ +

Small

+ +

Coding them

+

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.

+
+<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>
+
@@ -1306,7 +1415,7 @@

Fixed topbar

-

Project Name

+ Project Name
diff --git a/docs/javascript.html b/docs/javascript.html index 9f153c0bf60f..9ea90933581f 100644 --- a/docs/javascript.html +++ b/docs/javascript.html @@ -39,11 +39,11 @@ -
-
+
+
-

Bootstrap JS

-
    + Bootstrap JS +
    • Overview
    • Modals
    • Dropdown
      • @@ -182,15 +182,15 @@

      Demo

      @@ -242,8 +242,8 @@

      Demo

      -

      Project Name

      -
        + Project Name + @@ -251,18 +251,18 @@

        Project Name

          -
        • - Dropdown 1 -
            +
          • + Dropdown 1 +
            • -
          • - Dropdown 2 -
              +
            • + Dropdown 2 +
              • Secondary link
              • Something else here
              • diff --git a/js/bootstrap-dropdown.js b/js/bootstrap-dropdown.js index 6c2f703015dc..b3ed85262303 100644 --- a/js/bootstrap-dropdown.js +++ b/js/bootstrap-dropdown.js @@ -20,15 +20,15 @@ !function( $ ){ - var d = 'a.menu, .dropdown-toggle' + var d = '.dropdown-toggle' function clearMenus() { - $(d).parent('li').removeClass('open') + $(d).parent('li,.dropdown').removeClass('open') } $(function () { $('html').bind("click", clearMenus) - $('body').dropdown( '[data-dropdown] a.menu, [data-dropdown] .dropdown-toggle' ) + $('body').dropdown( '[data-dropdown] .dropdown-toggle' ) }) /* DROPDOWN PLUGIN DEFINITION @@ -37,14 +37,17 @@ $.fn.dropdown = function ( selector ) { return this.each(function () { $(this).delegate(selector || d, 'click', function (e) { - var li = $(this).parent('li') - , isActive = li.hasClass('open') + if ($(this).hasClass('disabled')) { + return false; + } + var p = $(this).parent('li,.dropdown') + , isActive = p.hasClass('open') clearMenus() - !isActive && li.toggleClass('open') + !isActive && p.toggleClass('open') return false }) }) } -}( window.jQuery || window.ender ) \ No newline at end of file +}( window.jQuery || window.ender ) diff --git a/js/bootstrap-modal.js b/js/bootstrap-modal.js index e0b77bf251f7..50d29f62534d 100644 --- a/js/bootstrap-modal.js +++ b/js/bootstrap-modal.js @@ -55,7 +55,7 @@ var Modal = function ( content, options ) { this.settings = $.extend({}, $.fn.modal.defaults) this.$element = $(content) - .delegate('.close', 'click.modal', $.proxy(this.hide, this)) + .delegate('.js-dismiss', 'click.modal', $.proxy(this.hide, this)) if ( options ) { $.extend( this.settings, options ) @@ -235,4 +235,4 @@ }) }) -}( window.jQuery || window.ender ) \ No newline at end of file +}( window.jQuery || window.ender ) diff --git a/lib/forms.less b/lib/forms.less index 0da4037df7cf..91aca77fe7ed 100644 --- a/lib/forms.less +++ b/lib/forms.less @@ -3,8 +3,8 @@ * ------------------------------------------------------------- */ -// FORM STYLES -// ----------- +// GENERAL STYLES +// -------------- form { margin-bottom: @baseline; @@ -189,47 +189,17 @@ form div.clearfix.error { } } -// Form element sizes -// TODO v2: remove duplication here and just stick to .input-[size] in light of adding .spanN sizes -.input-mini, -input.mini, -textarea.mini, -select.mini { - width: 60px; -} -.input-small, -input.small, -textarea.small, -select.small { - width: 90px; -} -.input-medium, -input.medium, -textarea.medium, -select.medium { - width: 150px; -} -.input-large, -input.large, -textarea.large, -select.large { - width: 210px; -} -.input-xlarge, -input.xlarge, -textarea.xlarge, -select.xlarge { - width: 270px; -} -.input-xxlarge, -input.xxlarge, -textarea.xxlarge, -select.xxlarge { - width: 530px; -} -textarea.xxlarge { - overflow-y: auto; -} + +// INPUT SIZES +// ----------- + +// General classes for quick sizes +.input-mini { width: 60px; } +.input-small { width: 90px; } +.input-medium { width: 150px; } +.input-large { width: 210px; } +.input-xlarge { width: 270px; } +.input-xxlarge { width: 530px; } // Grid style input sizes // This is a duplication of the main grid .columns() mixin, but subtracts 10px to account for input padding and border @@ -261,6 +231,10 @@ select { &.span16 { .formColumns(16); } } + +// INPUT STATES +// ------------ + // Disabled and read-only inputs input[disabled], select[disabled], @@ -292,7 +266,10 @@ textarea[readonly] { } } -// Help Text + +// HELP TEXT +// --------- + .help-inline, .help-block { font-size: @basefont - 2; @@ -311,7 +288,10 @@ textarea[readonly] { max-width: 600px; } -// Inline Fields (input fields that appear as inline objects + +// INLINE FIELDS +// --------- + .inline-inputs { color: @gray; span, input { @@ -328,6 +308,10 @@ textarea[readonly] { } } + +// INPUTS GROUPS +// ------------- + // Allow us to put symbols and text within the input field for a cleaner look .input-prepend, .input-append { @@ -375,6 +359,10 @@ textarea[readonly] { } } + +// LISTS OF CONTROLS +// ----------------- + // Stacked options for forms (radio buttons or checkboxes) .inputs-list { margin: 0 0 5px; @@ -417,7 +405,10 @@ textarea[readonly] { } } -// Stacked forms + +// STACKED FORMS +// ------------- + .form-stacked { padding-left: 20px; fieldset { @@ -462,4 +453,4 @@ textarea[readonly] { margin-left: -20px; padding-left: 20px; } -} +} \ No newline at end of file diff --git a/lib/mixins.less b/lib/mixins.less index ca7893dafea0..4bb16050a777 100644 --- a/lib/mixins.less +++ b/lib/mixins.less @@ -1,4 +1,4 @@ -/* Variables.less +/* Mixins.less * Snippets of reusable CSS to develop faster and keep code readable * ----------------------------------------------------------------- */ @@ -147,7 +147,7 @@ } } -// Gradient Bar Colors for buttons and allerts +// Gradient Bar Colors for buttons and alerts .gradientBar(@primaryColor, @secondaryColor) { #gradient > .vertical(@primaryColor, @secondaryColor); text-shadow: 0 -1px 0 rgba(0,0,0,.25); diff --git a/lib/patterns.less b/lib/patterns.less index ce387614e9a1..b1169de9e503 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,18 @@ } } -// 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
              • element within the topbar or ul.tabs and you'll get some superfancy dropdowns -// li.menu for backwards compatibility -li.menu, .dropdown { position: relative; + display: inline-block; } // The link that is clicked to toggle the dropdown -// a.menu for backwards compatibility -a.menu:after, .dropdown-toggle:after { width: 0; height: 0; @@ -237,9 +213,50 @@ a.menu:after, border-top: 4px solid @white; .opacity(50); } + +// Define different toggle styles (colors, borders, margin and padding) for dropdown buttons +.btn.dropdown-toggle, +.btn.large.dropdown-toggle, +.btn.small.dropdown-toggle { + padding-right: 11px; +} + +.btn.dropdown-toggle:after { + .opacity(80); + margin-top: 6px; + margin-left: 10px; +} + +.btn.small.dropdown-toggle:after { + margin-top: 4px; +} + +.btn.danger.dropdown-toggle:after, +.btn.info.dropdown-toggle:after, +.btn.primary.dropdown-toggle:after, +.btn.success.dropdown-toggle:after, { + border-top-color: @white; +} + +.btn.dropdown-toggle:after { + border-top-color: #999; +} + +.btn.dropdown-toggle { + overflow: hidden; + + + .dropdown-menu { + top: 29px; + border-width: 1px; + .border-radius(6px 6px 6px 6px); + } + + &.large + .dropdown-menu { + top: 39px; + } +} + // The dropdown menu (ul) -// .menu-dropdown for backwards compatibility -.menu-dropdown, .dropdown-menu { background-color: @white; float: left; @@ -299,25 +316,30 @@ a.menu:after, } } -// Open state for the dropdown -// .open for backwards compatibility -.open, -.dropdown.open { - // .menu for backwards compatibility - .menu, +// Open state for the dropdown, inside an li (in tabs or topbars) +li.dropdown.open { .dropdown-toggle { color: @white; background: #ccc; background: rgba(0,0,0,.3); } - // .menu-dropdown for backwards compatibility - .menu-dropdown, +} +// Open state for dropdown buttons, inside an div. +div.dropdown.open { + .dropdown-toggle { + @shadow: inset 0 2px 4px rgba(0,0,0,.25), 0 1px 2px rgba(0,0,0,.05); + .box-shadow(@shadow); + background-position: 0 -15px; + } +} +// Common Open state styles +.dropdown.open { .dropdown-menu { display: block; } + z-index: 100; } - // Tabs and Pills .tabs, .pills { @@ -360,27 +382,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; } @@ -392,7 +406,7 @@ a.menu:after, // Basic pill nav .pills { a { - margin: 5px 3px 5px 0; + margin: 5px 3px 5px 0; padding: 0 15px; text-shadow: 0 1px 1px @white; line-height: 30px; @@ -418,7 +432,7 @@ a.menu:after, .tab-content > .active, .pill-content > .active { - display:block; + display: block; } @@ -440,8 +454,6 @@ a.menu:after, padding: 0 5px; color: @grayLight; } - a { - } .active a { color: @grayDark; } @@ -454,21 +466,6 @@ a.menu:after, .hero-unit { background-color: #f5f5f5; margin-bottom: 30px; - padding: 60px; - .border-radius(6px); - h1 { - margin-bottom: 0; - font-size: 60px; - line-height: 1; - letter-spacing: -1px; - } - p { - font-size: 18px; - font-weight: 200; - line-height: @baseline * 1.5; - } -} -footer { margin-top: @baseline - 1; padding-top: @baseline - 1; border-top: 1px solid #eee;