From ec8619a9808b9b6e721334af8e6b5248ccbea8b5 Mon Sep 17 00:00:00 2001 From: Mark Otto <mark.otto@twitter.com> Date: Sat, 17 Sep 2011 17:21:43 -0700 Subject: [PATCH 001/318] update docs to remove old stuff, update to all new classes; no more backwards compatibility --- bootstrap.css | 90 ++++----------- bootstrap.min.css | 47 ++++---- docs/index.html | 236 +++++++++++++++++++++------------------ docs/javascript.html | 8 +- js/bootstrap-dropdown.js | 4 +- lib/patterns.less | 46 +------- 6 files changed, 180 insertions(+), 251 deletions(-) diff --git a/bootstrap.css b/bootstrap.css index 8b6fe3eb42..6d3c15390a 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 aabdf2428b..4a3b6485bb 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 f99b756fe1..5c5162471a 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 f001ad8083..dc35e4a374 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 ca2daf1f56..75320c0f87 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 ce387614e9..1ba218c36b 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; } -- GitLab From b5acabe4fd7dd2bb14424a88944152bbebd2e07d Mon Sep 17 00:00:00 2001 From: Mark Otto <mark.otto@twitter.com> Date: Sat, 17 Sep 2011 22:55:29 -0700 Subject: [PATCH 002/318] fix broken topbars in javascript --- docs/javascript.html | 16 ++++++++-------- 1 file changed, 8 insertions(+), 8 deletions(-) diff --git a/docs/javascript.html b/docs/javascript.html index dc35e4a374..d16926186e 100644 --- a/docs/javascript.html +++ b/docs/javascript.html @@ -242,8 +242,8 @@ $('#my-modal').bind('hidden', function () { <div id="topbar-example" class="topbar" data-dropdown="dropdown"> <div class="topbar-inner"> <div class="container"> - <h3><a href="#">Project Name</a></h3> - <ul> + <a class="brand" href="#">Project Name</a> + <ul class="nav"> <li><a href="#">Link</a></li> <li><a href="#">Link</a></li> </ul> @@ -251,18 +251,18 @@ $('#my-modal').bind('hidden', function () { <input type="text" placeholder="Search" /> </form> <ul class="nav secondary-nav"> - <li class="menu"> - <a href="#" class="menu">Dropdown 1</a> - <ul class="menu-dropdown"> + <li class="dropdown"> + <a href="#" class="dropdown-toggle">Dropdown 1</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> - <li class="menu"> - <a href="#" class="menu">Dropdown 2</a> - <ul class="menu-dropdown"> + <li class="dropdown"> + <a href="#" class="dropdown-toggle">Dropdown 2</a> + <ul class="dropdown-menu"> <li><a href="#">Secondary link</a></li> <li><a href="#">Something else here</a></li> <li class="divider"></li> -- GitLab From 6d541a6066d46bff19833707deeca8f41279b180 Mon Sep 17 00:00:00 2001 From: Mark Otto <mark.otto@twitter.com> Date: Wed, 28 Sep 2011 19:06:10 -0700 Subject: [PATCH 003/318] pulling out more stuff and fixing file name at top of file --- bootstrap.css | 4 ++-- docs/index.html | 18 ++++++------------ lib/mixins.less | 2 +- lib/patterns.less | 6 ++---- 4 files changed, 11 insertions(+), 19 deletions(-) diff --git a/bootstrap.css b/bootstrap.css index 6d3c15390a..babe50a210 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: Sat Sep 17 17:21:25 PDT 2011 + * Date: Wed Sep 28 19:05:53 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). @@ -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 * ----------------------------------------------------------------- */ /* diff --git a/docs/index.html b/docs/index.html index 5c5162471a..857af24486 100644 --- a/docs/index.html +++ b/docs/index.html @@ -84,14 +84,12 @@ ================================================== --> <header class="jumbotron masthead" id="overview"> <div class="inner"> - <div class="container"> - <h1>Bootstrap, from Twitter</h1> - <p class="lead"> - Bootstrap is a toolkit from Twitter designed to kickstart development of webapps and sites.<br /> - It includes base CSS and HTML for typography, forms, buttons, tables, grids, navigation, and more.<br /> - </p> - <p><strong>Nerd alert:</strong> Bootstrap is <a href="#less" title="Read about using Bootstrap with Less">built with Less</a> and was designed to work out of the gate with modern browsers in mind.</p> - </div><!-- /container --> + <h1>Bootstrap, from Twitter</h1> + <p class="lead"> + Bootstrap is a toolkit from Twitter designed to kickstart development of webapps and sites.<br /> + It includes base CSS and HTML for typography, forms, buttons, tables, grids, navigation, and more.<br /> + </p> + <p><strong>Nerd alert:</strong> Bootstrap is <a href="#less" title="Read about using Bootstrap with Less">built with Less</a> and was designed to work out of the gate with modern browsers in mind.</p> </div> </header> @@ -140,10 +138,6 @@ <h3>History</h3> <p>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.</p> <p>Read more on <a href="https://dev.twitter.com/blog/bootstrap-twitter">dev.twitter.com ›</a></p> - <p> - <a href="http://twitter.com/twbootstrap" class="twitter-follow-button">Follow @twbootstrap</a> - <script src="http://platform.twitter.com/widgets.js" type="text/javascript"></script> - </p> </div> <div class="span-one-third"> <h3>Browser support</h3> diff --git a/lib/mixins.less b/lib/mixins.less index ca7893dafe..929618a409 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 * ----------------------------------------------------------------- */ diff --git a/lib/patterns.less b/lib/patterns.less index 1ba218c36b..eae09a5963 100644 --- a/lib/patterns.less +++ b/lib/patterns.less @@ -350,7 +350,7 @@ // 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; @@ -376,7 +376,7 @@ .tab-content > .active, .pill-content > .active { - display:block; + display: block; } @@ -398,8 +398,6 @@ padding: 0 5px; color: @grayLight; } - a { - } .active a { color: @grayDark; } -- GitLab From 1b21d5e321ec77c6381becae2e2d7d1c4ab14d9a Mon Sep 17 00:00:00 2001 From: Mark Otto <mark.otto@twitter.com> Date: Wed, 28 Sep 2011 19:15:31 -0700 Subject: [PATCH 004/318] updated forms.less to have better comments while pulling out all the old classes for input elements --- bootstrap.css | 35 ++++--------------- bootstrap.min.css | 13 ++++---- lib/forms.less | 85 +++++++++++++++++++++-------------------------- 3 files changed, 51 insertions(+), 82 deletions(-) diff --git a/bootstrap.css b/bootstrap.css index babe50a210..993533e110 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: Wed Sep 28 19:05:53 PDT 2011 + * Date: Wed Sep 28 19:14:58 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). @@ -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; diff --git a/bootstrap.min.css b/bootstrap.min.css index 4a3b6485bb..f290fbd325 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;} diff --git a/lib/forms.less b/lib/forms.less index 0da4037df7..91aca77fe7 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 -- GitLab From 2d81d65533ded88c76712e787edbd745d38e403e Mon Sep 17 00:00:00 2001 From: Mark Otto <mark.otto@twitter.com> Date: Wed, 28 Sep 2011 20:21:09 -0700 Subject: [PATCH 005/318] initial idea for handling closing of modals from whatever element you want with .js-dismiss class --- docs/index.html | 4 ++-- docs/javascript.html | 6 +++--- js/bootstrap-modal.js | 2 +- 3 files changed, 6 insertions(+), 6 deletions(-) diff --git a/docs/index.html b/docs/index.html index 857af24486..b24999c623 100644 --- a/docs/index.html +++ b/docs/index.html @@ -1644,7 +1644,7 @@ <!-- Modal --> <div class="modal" style="position: relative; top: auto; left: auto; margin: 0 auto; z-index: 1"> <div class="modal-header"> - <a href="#" class="close">×</a> + <a href="#" class="close js-dismiss">×</a> <h3>Modal Heading</h3> </div> <div class="modal-body"> @@ -1652,7 +1652,7 @@ </div> <div class="modal-footer"> <a href="#" class="btn primary">Primary</a> - <a href="#" class="btn secondary">Secondary</a> + <a href="#" class="btn">Secondary</a> </div> </div> </div> diff --git a/docs/javascript.html b/docs/javascript.html index d16926186e..d5eb987392 100644 --- a/docs/javascript.html +++ b/docs/javascript.html @@ -182,15 +182,15 @@ $('#my-modal').bind('hidden', function () { <!-- sample modal content --> <div id="modal-from-dom" class="modal hide fade"> <div class="modal-header"> - <a href="#" class="close">×</a> + <a href="#" class="close js-dismiss">×</a> <h3>Modal Heading</h3> </div> <div class="modal-body"> <p>One fine body…</p> </div> <div class="modal-footer"> - <a href="#" class="btn primary">Primary</a> - <a href="#" class="btn secondary">Secondary</a> + <a href="#" class="btn primary">Save changes</a> + <a href="#" class="btn js-dismiss">Close</a> </div> </div> diff --git a/js/bootstrap-modal.js b/js/bootstrap-modal.js index da67060731..5c38a7477b 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 ) -- GitLab From f919f6f94f3e8405d7653a5f16f8b3d587c47f4c Mon Sep 17 00:00:00 2001 From: Mark Otto <mark.otto@twitter.com> Date: Thu, 29 Sep 2011 01:40:27 -0700 Subject: [PATCH 006/318] huge update to forms, docs for the new forms, added a new link for js example to tabs/pills, add some new mixins --- bootstrap.css | 342 ++++++++++------------------ bootstrap.min.css | 116 +++++----- docs/assets/css/docs.css | 10 +- docs/index.html | 475 ++++++++++++++------------------------- lib/forms.less | 325 +++++++++++---------------- lib/mixins.less | 92 +++++--- lib/reset.less | 2 +- lib/type.less | 7 +- lib/variables.less | 8 +- 9 files changed, 560 insertions(+), 817 deletions(-) diff --git a/bootstrap.css b/bootstrap.css index 993533e110..d3bb942cda 100644 --- a/bootstrap.css +++ b/bootstrap.css @@ -6,10 +6,10 @@ * http://www.apache.org/licenses/LICENSE-2.0 * * Designed and built with all the love in the world @twitter by @mdo and @fat. - * Date: Wed Sep 28 19:14:58 PDT 2011 + * Date: Thu Sep 29 01:39:48 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). + * 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). * ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */ html, body { margin: 0; @@ -189,7 +189,7 @@ body { font-size: 13px; font-weight: normal; line-height: 18px; - color: #404040; + color: #333333; } .container { width: 940px; @@ -400,7 +400,7 @@ p { } p small { font-size: 11px; - color: #bfbfbf; + color: #777777; } h1, h2, @@ -409,7 +409,7 @@ h4, h5, h6 { font-weight: bold; - color: #404040; + color: #333333; } h1 small, h2 small, @@ -417,7 +417,7 @@ h3 small, h4 small, h5 small, h6 small { - color: #bfbfbf; + color: #777777; } h1 { margin-bottom: 18px; @@ -434,18 +434,16 @@ h2 { h2 small { font-size: 14px; } -h3, -h4, -h5, -h6 { - line-height: 36px; -} h3 { + line-height: 36px; font-size: 18px; } h3 small { font-size: 14px; } +h4, h5, h6 { + line-height: 18px; +} h4 { font-size: 16px; } @@ -457,7 +455,7 @@ h5 { } h6 { font-size: 13px; - color: #bfbfbf; + color: #777777; text-transform: uppercase; } ul, ol { @@ -477,7 +475,7 @@ ol { } li { line-height: 18px; - color: #808080; + color: #555555; } ul.unstyled { list-style: none; @@ -510,7 +508,7 @@ em { line-height: inherit; } .muted { - color: #bfbfbf; + color: #777777; } blockquote { margin-bottom: 18px; @@ -528,7 +526,7 @@ blockquote small { font-size: 12px; font-weight: 300; line-height: 18px; - color: #bfbfbf; + color: #777777; } blockquote small:before { content: '\2014 \00A0'; @@ -573,35 +571,14 @@ pre { form { margin-bottom: 18px; } -fieldset { - margin-bottom: 18px; - padding-top: 18px; -} -fieldset legend { +legend { display: block; - padding-left: 150px; + width: 100%; + margin-bottom: 27px; font-size: 19.5px; - line-height: 1; - color: #404040; - *padding: 0 0 5px 145px; - /* IE6-7 */ - - *line-height: 1.5; - /* IE6-7 */ - -} -form .clearfix { - margin-bottom: 18px; - zoom: 1; -} -form .clearfix:before, form .clearfix:after { - display: table; - content: ""; - zoom: 1; - *display: inline; -} -form .clearfix:after { - clear: both; + line-height: 36px; + color: #333333; + border-bottom: 1px solid #eee; } label, input, @@ -610,19 +587,12 @@ textarea { font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; font-size: 13px; font-weight: normal; - line-height: normal; -} -label { - padding-top: 6px; - font-size: 13px; line-height: 18px; - float: left; - width: 130px; - text-align: right; - color: #404040; } -form .input { - margin-left: 150px; +label { + display: block; + margin-bottom: 5px; + color: #333333; } input[type=checkbox], input[type=radio] { cursor: pointer; @@ -637,13 +607,13 @@ select, padding: 4px; font-size: 13px; line-height: 18px; - color: #808080; + color: #555555; border: 1px solid #ccc; -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px; } -/* mini reset for non-html5 file types */ +/* Mini reset for unique input types */ input[type=checkbox], input[type=radio] { width: auto; height: auto; @@ -681,21 +651,6 @@ select[multiple] { textarea { height: auto; } -.uneditable-input { - background-color: #ffffff; - display: block; - border-color: #eee; - -webkit-box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.025); - -moz-box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.025); - box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.025); - cursor: not-allowed; -} -:-moz-placeholder { - color: #bfbfbf; -} -::-webkit-input-placeholder { - color: #bfbfbf; -} input, textarea { -webkit-transition: border linear 0.2s, box-shadow linear 0.2s; -moz-transition: border linear 0.2s, box-shadow linear 0.2s; @@ -719,34 +674,6 @@ input[type=file]:focus, input[type=checkbox]:focus, select:focus { box-shadow: none; outline: 1px dotted #666; } -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 { width: 60px; } @@ -871,31 +798,63 @@ textarea[readonly] { border-color: #ddd; cursor: not-allowed; } -.actions { - background: #f5f5f5; +.has-error { + background: #f8dcda; + padding: 9px 0; + margin: -10px 0 10px; + -webkit-border-radius: 4px; + -moz-border-radius: 4px; + border-radius: 4px; +} +.has-error > label, .has-error span.help-inline, .has-error span.help-block { + color: #9d261d; +} +.has-error input, .has-error textarea, .has-error select { + 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); +} +.has-error input:focus, .has-error textarea:focus, .has-error select: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); +} +.has-error .input-prepend span.add-on, .has-error .input-append span.add-on { + background: #f4c8c5; + border-color: #c87872; + color: #b9554d; +} +.form-actions { + padding: 17px 20px 18px; margin-top: 18px; margin-bottom: 18px; - padding: 17px 20px 18px 150px; + background-color: #f5f5f5; border-top: 1px solid #ddd; - -webkit-border-radius: 0 0 3px 3px; - -moz-border-radius: 0 0 3px 3px; - border-radius: 0 0 3px 3px; } -.actions .secondary-action { - float: right; +.uneditable-input { + background-color: #ffffff; + display: block; + border-color: #eee; + -webkit-box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.025); + -moz-box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.025); + box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.025); + cursor: not-allowed; } -.actions .secondary-action a { - line-height: 30px; +:-moz-placeholder { + color: #777777; } -.actions .secondary-action a:hover { - text-decoration: underline; +::-webkit-input-placeholder { + color: #777777; } -.help-inline, .help-block { - font-size: 11px; - line-height: 18px; - color: #bfbfbf; +.help-text { + margin-top: 5px; + margin-bottom: 0; + color: #777777; } .help-inline { + display: inline; padding-left: 5px; *position: relative; /* IE6-7 */ @@ -909,7 +868,7 @@ textarea[readonly] { max-width: 600px; } .inline-inputs { - color: #808080; + color: #555555; } .inline-inputs span, .inline-inputs input { display: inline-block; @@ -942,7 +901,7 @@ textarea[readonly] { margin-right: -1px; font-weight: normal; line-height: 18px; - color: #bfbfbf; + color: #777777; text-align: center; text-shadow: 0 1px 0 #ffffff; -webkit-border-radius: 3px 0 0 3px; @@ -971,89 +930,36 @@ textarea[readonly] { margin-right: 0; margin-left: -1px; } -.inputs-list { - margin: 0 0 5px; - width: 100%; -} -.inputs-list li { - display: block; - padding: 0; - width: 100%; -} -.inputs-list label { - display: block; - float: none; - width: auto; - padding: 0; - line-height: 18px; - text-align: left; - white-space: normal; -} -.inputs-list label strong { - color: #808080; -} -.inputs-list label small { - font-size: 11px; - font-weight: normal; -} -.inputs-list .inputs-list { - margin-left: 25px; - margin-bottom: 10px; - padding-top: 0; -} -.inputs-list:first-child { - padding-top: 6px; -} -.inputs-list li + li { - padding-top: 2px; -} -.inputs-list input[type=radio], .inputs-list input[type=checkbox] { - margin-bottom: 0; -} -.form-stacked { - padding-left: 20px; -} -.form-stacked fieldset { - padding-top: 9px; -} -.form-stacked legend { - padding-left: 0; +.control-group { + margin-bottom: 18px; } -.form-stacked label { - display: block; - float: none; - width: auto; +.control-group > label { font-weight: bold; - text-align: left; - line-height: 20px; - padding-top: 0; -} -.form-stacked .clearfix { - margin-bottom: 9px; } -.form-stacked .clearfix div.input { - margin-left: 0; -} -.form-stacked .inputs-list { - margin-bottom: 0; +.form-horizontal .control-group > label { + float: left; + width: 130px; + padding-top: 5px; + text-align: right; } -.form-stacked .inputs-list li { - padding-top: 0; +.form-horizontal .controls { + margin-left: 150px; } -.form-stacked .inputs-list li label { - font-weight: normal; - padding-top: 0; +.form-horizontal .control-list { + padding-top: 6px; } -.form-stacked div.clearfix.error { - padding-top: 10px; - padding-bottom: 10px; - padding-left: 10px; - margin-top: 0; - margin-left: -10px; +.form-horizontal .form-actions { + padding-left: 150px; } -.form-stacked .actions { - margin-left: -20px; - padding-left: 20px; +.radial-test { + background-color: #009900; + background-image: -webkit-gradient(radial, center center, 0, center center, 460, from(#990000), to(#009900)); + background-image: -webkit-radial-gradient(circle, #990000, #009900); + background-image: -moz-radial-gradient(circle, #990000, #009900); + background-image: -ms-radial-gradient(circle, #990000, #009900); + background-repeat: no-repeat; + width: 100%; + height: 940px; } /* * Tables.less @@ -1214,7 +1120,7 @@ table .headerSortUp.purple, table .headerSortDown.purple { overflow: visible; } .topbar a { - color: #bfbfbf; + color: #777777; text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25); } .topbar .brand a:hover, .topbar ul .active > a { @@ -1277,20 +1183,20 @@ table .headerSortUp.purple, table .headerSortDown.purple { transition: none; } .topbar input:-moz-placeholder { - color: #e6e6e6; + color: #cccccc; } .topbar input::-webkit-input-placeholder { - color: #e6e6e6; + color: #cccccc; } .topbar input:hover { - background-color: #bfbfbf; + background-color: #777777; background-color: rgba(255, 255, 255, 0.5); color: #ffffff; } .topbar input:focus, .topbar input.focused { outline: 0; background-color: #ffffff; - color: #404040; + color: #333333; text-shadow: 0 1px 0 #ffffff; border: 0; padding: 5px 10px; @@ -1301,7 +1207,6 @@ table .headerSortUp.purple, table .headerSortDown.purple { .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); @@ -1309,6 +1214,7 @@ table .headerSortUp.purple, table .headerSortDown.purple { background-image: -webkit-linear-gradient(top, #333333, #222222); background-image: -o-linear-gradient(top, #333333, #222222); background-image: linear-gradient(top, #333333, #222222); + background-repeat: repeat-x; 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); @@ -1369,7 +1275,6 @@ table .headerSortUp.purple, table .headerSortDown.purple { } .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); @@ -1377,6 +1282,7 @@ table .headerSortUp.purple, table .headerSortDown.purple { background-image: -webkit-linear-gradient(top, #292929, #191919); background-image: -o-linear-gradient(top, #292929, #191919); background-image: linear-gradient(top, #292929, #191919); + background-repeat: repeat-x; filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#292929', endColorstr='#191919', GradientType=0); color: #ffffff; } @@ -1456,12 +1362,11 @@ table .headerSortUp.purple, table .headerSortDown.purple { clear: both; font-weight: normal; line-height: 18px; - color: #808080; + color: #555555; 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); @@ -1469,8 +1374,9 @@ table .headerSortUp.purple, table .headerSortDown.purple { background-image: -webkit-linear-gradient(top, #eeeeee, #dddddd); background-image: -o-linear-gradient(top, #eeeeee, #dddddd); background-image: linear-gradient(top, #eeeeee, #dddddd); + background-repeat: repeat-x; filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#eeeeee', endColorstr='#dddddd', GradientType=0); - color: #404040; + color: #333333; 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); @@ -1532,7 +1438,7 @@ table .headerSortUp.purple, table .headerSortDown.purple { border-color: #eee #eee #ddd; } .tabs > li.active > a { - color: #808080; + color: #555555; background-color: #ffffff; border: 1px solid #ddd; border-bottom-color: transparent; @@ -1588,7 +1494,6 @@ table .headerSortUp.purple, table .headerSortDown.purple { 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); @@ -1596,6 +1501,7 @@ table .headerSortUp.purple, table .headerSortDown.purple { background-image: -webkit-linear-gradient(top, #ffffff, #f5f5f5); background-image: -o-linear-gradient(top, #ffffff, #f5f5f5); background-image: linear-gradient(top, #ffffff, #f5f5f5); + background-repeat: repeat-x; filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#f5f5f5', GradientType=0); border: 1px solid #ddd; -webkit-border-radius: 3px; @@ -1611,10 +1517,10 @@ table .headerSortUp.purple, table .headerSortDown.purple { } .breadcrumb .divider { padding: 0 5px; - color: #bfbfbf; + color: #777777; } .breadcrumb .active a { - color: #404040; + color: #333333; } .hero-unit { background-color: #f5f5f5; @@ -1673,7 +1579,6 @@ footer { .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); @@ -1681,6 +1586,7 @@ footer { background-image: -webkit-linear-gradient(top, #ee5f5b, #c43c35); background-image: -o-linear-gradient(top, #ee5f5b, #c43c35); background-image: linear-gradient(top, #ee5f5b, #c43c35); + background-repeat: repeat-x; 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; @@ -1688,7 +1594,6 @@ footer { } .btn.success, .alert-message.success { background-color: #57a957; - background-repeat: repeat-x; background-image: -khtml-gradient(linear, left top, left bottom, from(#62c462), to(#57a957)); background-image: -moz-linear-gradient(top, #62c462, #57a957); background-image: -ms-linear-gradient(top, #62c462, #57a957); @@ -1696,6 +1601,7 @@ footer { background-image: -webkit-linear-gradient(top, #62c462, #57a957); background-image: -o-linear-gradient(top, #62c462, #57a957); background-image: linear-gradient(top, #62c462, #57a957); + background-repeat: repeat-x; filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#62c462', endColorstr='#57a957', GradientType=0); text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25); border-color: #57a957 #57a957 #3d773d; @@ -1703,7 +1609,6 @@ footer { } .btn.info, .alert-message.info { background-color: #339bb9; - background-repeat: repeat-x; background-image: -khtml-gradient(linear, left top, left bottom, from(#5bc0de), to(#339bb9)); background-image: -moz-linear-gradient(top, #5bc0de, #339bb9); background-image: -ms-linear-gradient(top, #5bc0de, #339bb9); @@ -1711,6 +1616,7 @@ footer { background-image: -webkit-linear-gradient(top, #5bc0de, #339bb9); background-image: -o-linear-gradient(top, #5bc0de, #339bb9); background-image: linear-gradient(top, #5bc0de, #339bb9); + background-repeat: repeat-x; filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#5bc0de', endColorstr='#339bb9', GradientType=0); text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25); border-color: #339bb9 #339bb9 #22697d; @@ -1720,13 +1626,13 @@ footer { cursor: pointer; display: inline-block; background-color: #e6e6e6; - background-repeat: no-repeat; background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#ffffff), color-stop(25%, #ffffff), to(#e6e6e6)); background-image: -webkit-linear-gradient(#ffffff, #ffffff 25%, #e6e6e6); background-image: -moz-linear-gradient(top, #ffffff, #ffffff 25%, #e6e6e6); background-image: -ms-linear-gradient(#ffffff, #ffffff 25%, #e6e6e6); background-image: -o-linear-gradient(#ffffff, #ffffff 25%, #e6e6e6); background-image: linear-gradient(#ffffff, #ffffff 25%, #e6e6e6); + background-repeat: no-repeat; filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#e6e6e6', GradientType=0); padding: 5px 14px 6px; text-shadow: 0 1px 1px rgba(255, 255, 255, 0.75); @@ -1758,7 +1664,6 @@ footer { .btn.primary { color: #ffffff; background-color: #0064cd; - background-repeat: repeat-x; background-image: -khtml-gradient(linear, left top, left bottom, from(#049cdb), to(#0064cd)); background-image: -moz-linear-gradient(top, #049cdb, #0064cd); background-image: -ms-linear-gradient(top, #049cdb, #0064cd); @@ -1766,6 +1671,7 @@ footer { background-image: -webkit-linear-gradient(top, #049cdb, #0064cd); background-image: -o-linear-gradient(top, #049cdb, #0064cd); background-image: linear-gradient(top, #049cdb, #0064cd); + background-repeat: repeat-x; filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#049cdb', endColorstr='#0064cd', GradientType=0); text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25); border-color: #0064cd #0064cd #003f81; @@ -1843,9 +1749,8 @@ button.btn::-moz-focus-inner, input[type=submit].btn::-moz-focus-inner { position: relative; padding: 7px 15px; margin-bottom: 18px; - color: #404040; + color: #333333; background-color: #eedc94; - background-repeat: repeat-x; background-image: -khtml-gradient(linear, left top, left bottom, from(#fceec1), to(#eedc94)); background-image: -moz-linear-gradient(top, #fceec1, #eedc94); background-image: -ms-linear-gradient(top, #fceec1, #eedc94); @@ -1853,6 +1758,7 @@ button.btn::-moz-focus-inner, input[type=submit].btn::-moz-focus-inner { background-image: -webkit-linear-gradient(top, #fceec1, #eedc94); background-image: -o-linear-gradient(top, #fceec1, #eedc94); background-image: linear-gradient(top, #fceec1, #eedc94); + background-repeat: repeat-x; filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#fceec1', endColorstr='#eedc94', GradientType=0); text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25); border-color: #eedc94 #eedc94 #e4c652; @@ -1905,13 +1811,13 @@ button.btn::-moz-focus-inner, input[type=submit].btn::-moz-focus-inner { margin-bottom: 0; } .alert-message.block-message li { - color: #404040; + color: #333333; } .alert-message.block-message .alert-actions { margin-top: 5px; } .alert-message.block-message.error, .alert-message.block-message.success, .alert-message.block-message.info { - color: #404040; + color: #333333; text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5); } .alert-message.block-message.error { @@ -1962,7 +1868,7 @@ button.btn::-moz-focus-inner, input[type=submit].btn::-moz-focus-inner { } .pagination .disabled a, .pagination .disabled a:hover { background-color: transparent; - color: #bfbfbf; + color: #777777; } .pagination .next a { border: 0; @@ -2232,7 +2138,7 @@ button.btn::-moz-focus-inner, input[type=submit].btn::-moz-focus-inner { } .label { padding: 1px 3px 2px; - background-color: #bfbfbf; + background-color: #777777; font-size: 9.75px; font-weight: bold; color: #ffffff; diff --git a/bootstrap.min.css b/bootstrap.min.css index f290fbd325..bb31375dd1 100644 --- a/bootstrap.min.css +++ b/bootstrap.min.css @@ -21,7 +21,7 @@ input[type="search"]{-webkit-appearance:textfield;-webkit-box-sizing:content-box input[type="search"]::-webkit-search-decoration{-webkit-appearance:none;} textarea{overflow:auto;vertical-align:top;} html,body{background-color:#ffffff;} -body{margin:0;font-family:"Helvetica Neue",Helvetica,Arial,sans-serif;font-size:13px;font-weight:normal;line-height:18px;color:#404040;} +body{margin:0;font-family:"Helvetica Neue",Helvetica,Arial,sans-serif;font-size:13px;font-weight:normal;line-height:18px;color:#333333;} .container{width:940px;margin-left:auto;margin-right:auto;zoom:1;}.container:before,.container:after{display:table;content:"";zoom:1;*display:inline;} .container:after{clear:both;} .container-fluid{position:relative;min-width:940px;padding-left:20px;padding-right:20px;zoom:1;}.container-fluid:before,.container-fluid:after{display:table;content:"";zoom:1;*display:inline;} @@ -76,20 +76,20 @@ a{color:#0069d6;text-decoration:none;line-height:inherit;font-weight:inherit;}a: .span-two-thirds{width:620px;} .offset-one-third{margin-left:340px;} .offset-two-thirds{margin-left:660px;} -p{font-size:13px;font-weight:normal;line-height:18px;margin-bottom:9px;}p small{font-size:11px;color:#bfbfbf;} -h1,h2,h3,h4,h5,h6{font-weight:bold;color:#404040;}h1 small,h2 small,h3 small,h4 small,h5 small,h6 small{color:#bfbfbf;} +p{font-size:13px;font-weight:normal;line-height:18px;margin-bottom:9px;}p small{font-size:11px;color:#777777;} +h1,h2,h3,h4,h5,h6{font-weight:bold;color:#333333;}h1 small,h2 small,h3 small,h4 small,h5 small,h6 small{color:#777777;} h1{margin-bottom:18px;font-size:30px;line-height:36px;}h1 small{font-size:18px;} h2{font-size:24px;line-height:36px;}h2 small{font-size:14px;} -h3,h4,h5,h6{line-height:36px;} -h3{font-size:18px;}h3 small{font-size:14px;} +h3{line-height:36px;font-size:18px;}h3 small{font-size:14px;} +h4,h5,h6{line-height:18px;} h4{font-size:16px;}h4 small{font-size:12px;} h5{font-size:14px;} -h6{font-size:13px;color:#bfbfbf;text-transform:uppercase;} +h6{font-size:13px;color:#777777;text-transform:uppercase;} ul,ol{margin:0 0 18px 25px;} ul ul,ul ol,ol ol,ol ul{margin-bottom:0;} ul{list-style:disc;} ol{list-style:decimal;} -li{line-height:18px;color:#808080;} +li{line-height:18px;color:#555555;} ul.unstyled{list-style:none;margin-left:0;} dl{margin-bottom:18px;}dl dt,dl dd{line-height:18px;} dl dt{font-weight:bold;} @@ -97,37 +97,28 @@ dl dd{margin-left:9px;} hr{margin:20px 0 19px;border:0;border-bottom:1px solid #eee;} strong{font-style:inherit;font-weight:bold;} em{font-style:italic;font-weight:inherit;line-height:inherit;} -.muted{color:#bfbfbf;} +.muted{color:#777777;} blockquote{margin-bottom:18px;border-left:5px solid #eee;padding-left:15px;}blockquote p{font-size:14px;font-weight:300;line-height:18px;margin-bottom:0;} -blockquote small{display:block;font-size:12px;font-weight:300;line-height:18px;color:#bfbfbf;}blockquote small:before{content:'\2014 \00A0';} +blockquote small{display:block;font-size:12px;font-weight:300;line-height:18px;color:#777777;}blockquote small:before{content:'\2014 \00A0';} address{display:block;line-height:18px;margin-bottom:18px;} code,pre{padding:0 3px 2px;font-family:Monaco, Andale Mono, Courier New, monospace;font-size:12px;-webkit-border-radius:3px;-moz-border-radius:3px;border-radius:3px;} code{background-color:#fee9cc;color:rgba(0, 0, 0, 0.75);padding:1px 3px;} pre{background-color:#f5f5f5;display:block;padding:8.5px;margin:0 0 18px;line-height:18px;font-size:12px;border:1px solid #ccc;border:1px solid rgba(0, 0, 0, 0.15);-webkit-border-radius:3px;-moz-border-radius:3px;border-radius:3px;white-space:pre;white-space:pre-wrap;word-wrap:break-word;} form{margin-bottom:18px;} -fieldset{margin-bottom:18px;padding-top:18px;}fieldset legend{display:block;padding-left:150px;font-size:19.5px;line-height:1;color:#404040;*padding:0 0 5px 145px;*line-height:1.5;} -form .clearfix{margin-bottom:18px;zoom:1;}form .clearfix:before,form .clearfix:after{display:table;content:"";zoom:1;*display:inline;} -form .clearfix:after{clear:both;} -label,input,select,textarea{font-family:"Helvetica Neue",Helvetica,Arial,sans-serif;font-size:13px;font-weight:normal;line-height:normal;} -label{padding-top:6px;font-size:13px;line-height:18px;float:left;width:130px;text-align:right;color:#404040;} -form .input{margin-left:150px;} +legend{display:block;width:100%;margin-bottom:27px;font-size:19.5px;line-height:36px;color:#333333;border-bottom:1px solid #eee;} +label,input,select,textarea{font-family:"Helvetica Neue",Helvetica,Arial,sans-serif;font-size:13px;font-weight:normal;line-height:18px;} +label{display:block;margin-bottom:5px;color:#333333;} input[type=checkbox],input[type=radio]{cursor:pointer;} -input,textarea,select,.uneditable-input{display:inline-block;width:210px;height:18px;padding:4px;font-size:13px;line-height:18px;color:#808080;border:1px solid #ccc;-webkit-border-radius:3px;-moz-border-radius:3px;border-radius:3px;} +input,textarea,select,.uneditable-input{display:inline-block;width:210px;height:18px;padding:4px;font-size:13px;line-height:18px;color:#555555;border:1px solid #ccc;-webkit-border-radius:3px;-moz-border-radius:3px;border-radius:3px;} input[type=checkbox],input[type=radio]{width:auto;height:auto;padding:0;margin:3px 0;*margin-top:0;line-height:normal;border:none;} input[type=file]{background-color:#ffffff;padding:initial;border:initial;line-height:initial;-webkit-box-shadow:none;-moz-box-shadow:none;box-shadow:none;} input[type=button],input[type=reset],input[type=submit]{width:auto;height:auto;} select,input[type=file]{height:27px;line-height:27px;*margin-top:4px;} select[multiple]{height:inherit;} textarea{height:auto;} -.uneditable-input{background-color:#ffffff;display:block;border-color:#eee;-webkit-box-shadow:inset 0 1px 2px rgba(0, 0, 0, 0.025);-moz-box-shadow:inset 0 1px 2px rgba(0, 0, 0, 0.025);box-shadow:inset 0 1px 2px rgba(0, 0, 0, 0.025);cursor:not-allowed;} -:-moz-placeholder{color:#bfbfbf;} -::-webkit-input-placeholder{color:#bfbfbf;} input,textarea{-webkit-transition:border linear 0.2s,box-shadow linear 0.2s;-moz-transition:border linear 0.2s,box-shadow linear 0.2s;-ms-transition:border linear 0.2s,box-shadow linear 0.2s;-o-transition:border linear 0.2s,box-shadow linear 0.2s;transition:border linear 0.2s,box-shadow linear 0.2s;-webkit-box-shadow:inset 0 1px 3px rgba(0, 0, 0, 0.1);-moz-box-shadow:inset 0 1px 3px rgba(0, 0, 0, 0.1);box-shadow:inset 0 1px 3px rgba(0, 0, 0, 0.1);} input:focus,textarea:focus{outline:0;border-color:rgba(82, 168, 236, 0.8);-webkit-box-shadow:inset 0 1px 3px rgba(0, 0, 0, 0.1),0 0 8px rgba(82, 168, 236, 0.6);-moz-box-shadow:inset 0 1px 3px rgba(0, 0, 0, 0.1),0 0 8px rgba(82, 168, 236, 0.6);box-shadow:inset 0 1px 3px rgba(0, 0, 0, 0.1),0 0 8px rgba(82, 168, 236, 0.6);} input[type=file]:focus,input[type=checkbox]:focus,select:focus{-webkit-box-shadow:none;-moz-box-shadow:none;box-shadow:none;outline:1px dotted #666;} -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{width:60px;} .input-small{width:90px;} .input-medium{width:150px;} @@ -151,34 +142,33 @@ input.span14,textarea.span14,select.span14{display:inline-block;float:none;width input.span15,textarea.span15,select.span15{display:inline-block;float:none;width:870px;margin-left:0;} input.span16,textarea.span16,select.span16{display:inline-block;float:none;width:930px;margin-left:0;} input[disabled],select[disabled],textarea[disabled],input[readonly],select[readonly],textarea[readonly]{background-color:#f5f5f5;border-color:#ddd;cursor:not-allowed;} -.actions{background:#f5f5f5;margin-top:18px;margin-bottom:18px;padding:17px 20px 18px 150px;border-top:1px solid #ddd;-webkit-border-radius:0 0 3px 3px;-moz-border-radius:0 0 3px 3px;border-radius:0 0 3px 3px;}.actions .secondary-action{float:right;}.actions .secondary-action a{line-height:30px;}.actions .secondary-action a:hover{text-decoration:underline;} -.help-inline,.help-block{font-size:11px;line-height:18px;color:#bfbfbf;} -.help-inline{padding-left:5px;*position:relative;*top:-5px;} +.has-error{background:#f8dcda;padding:9px 0;margin:-10px 0 10px;-webkit-border-radius:4px;-moz-border-radius:4px;border-radius:4px;}.has-error>label,.has-error span.help-inline,.has-error span.help-block{color:#9d261d;} +.has-error input,.has-error textarea,.has-error select{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);}.has-error input:focus,.has-error textarea:focus,.has-error select: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);} +.has-error .input-prepend span.add-on,.has-error .input-append span.add-on{background:#f4c8c5;border-color:#c87872;color:#b9554d;} +.form-actions{padding:17px 20px 18px;margin-top:18px;margin-bottom:18px;background-color:#f5f5f5;border-top:1px solid #ddd;} +.uneditable-input{background-color:#ffffff;display:block;border-color:#eee;-webkit-box-shadow:inset 0 1px 2px rgba(0, 0, 0, 0.025);-moz-box-shadow:inset 0 1px 2px rgba(0, 0, 0, 0.025);box-shadow:inset 0 1px 2px rgba(0, 0, 0, 0.025);cursor:not-allowed;} +:-moz-placeholder{color:#777777;} +::-webkit-input-placeholder{color:#777777;} +.help-text{margin-top:5px;margin-bottom:0;color:#777777;} +.help-inline{display:inline;padding-left:5px;*position:relative;*top:-5px;} .help-block{display:block;max-width:600px;} -.inline-inputs{color:#808080;}.inline-inputs span,.inline-inputs input{display:inline-block;} +.inline-inputs{color:#555555;}.inline-inputs span,.inline-inputs input{display:inline-block;} .inline-inputs input.mini{width:60px;} .inline-inputs input.small{width:90px;} .inline-inputs span{padding:0 2px 0 1px;} .input-prepend input,.input-append input{-webkit-border-radius:0 3px 3px 0;-moz-border-radius:0 3px 3px 0;border-radius:0 3px 3px 0;} -.input-prepend .add-on,.input-append .add-on{position:relative;background:#f5f5f5;border:1px solid #ccc;z-index:2;float:left;display:block;width:auto;min-width:16px;height:18px;padding:4px 4px 4px 5px;margin-right:-1px;font-weight:normal;line-height:18px;color:#bfbfbf;text-align:center;text-shadow:0 1px 0 #ffffff;-webkit-border-radius:3px 0 0 3px;-moz-border-radius:3px 0 0 3px;border-radius:3px 0 0 3px;} +.input-prepend .add-on,.input-append .add-on{position:relative;background:#f5f5f5;border:1px solid #ccc;z-index:2;float:left;display:block;width:auto;min-width:16px;height:18px;padding:4px 4px 4px 5px;margin-right:-1px;font-weight:normal;line-height:18px;color:#777777;text-align:center;text-shadow:0 1px 0 #ffffff;-webkit-border-radius:3px 0 0 3px;-moz-border-radius:3px 0 0 3px;border-radius:3px 0 0 3px;} .input-prepend .active,.input-append .active{background:#a9dba9;border-color:#46a546;} .input-prepend .add-on{*margin-top:1px;} .input-append input{float:left;-webkit-border-radius:3px 0 0 3px;-moz-border-radius:3px 0 0 3px;border-radius:3px 0 0 3px;} .input-append .add-on{-webkit-border-radius:0 3px 3px 0;-moz-border-radius:0 3px 3px 0;border-radius:0 3px 3px 0;margin-right:0;margin-left:-1px;} -.inputs-list{margin:0 0 5px;width:100%;}.inputs-list li{display:block;padding:0;width:100%;} -.inputs-list label{display:block;float:none;width:auto;padding:0;line-height:18px;text-align:left;white-space:normal;}.inputs-list label strong{color:#808080;} -.inputs-list label small{font-size:11px;font-weight:normal;} -.inputs-list .inputs-list{margin-left:25px;margin-bottom:10px;padding-top:0;} -.inputs-list:first-child{padding-top:6px;} -.inputs-list li+li{padding-top:2px;} -.inputs-list input[type=radio],.inputs-list input[type=checkbox]{margin-bottom:0;} -.form-stacked{padding-left:20px;}.form-stacked fieldset{padding-top:9px;} -.form-stacked legend{padding-left:0;} -.form-stacked label{display:block;float:none;width:auto;font-weight:bold;text-align:left;line-height:20px;padding-top:0;} -.form-stacked .clearfix{margin-bottom:9px;}.form-stacked .clearfix div.input{margin-left:0;} -.form-stacked .inputs-list{margin-bottom:0;}.form-stacked .inputs-list li{padding-top:0;}.form-stacked .inputs-list li label{font-weight:normal;padding-top:0;} -.form-stacked div.clearfix.error{padding-top:10px;padding-bottom:10px;padding-left:10px;margin-top:0;margin-left:-10px;} -.form-stacked .actions{margin-left:-20px;padding-left:20px;} +.control-group{margin-bottom:18px;} +.control-group>label{font-weight:bold;} +.form-horizontal .control-group>label{float:left;width:130px;padding-top:5px;text-align:right;} +.form-horizontal .controls{margin-left:150px;} +.form-horizontal .control-list{padding-top:6px;} +.form-horizontal .form-actions{padding-left:150px;} +.radial-test{background-color:#009900;background-image:-webkit-gradient(radial, center center, 0, center center, 460, from(#990000), to(#009900));background-image:-webkit-radial-gradient(circle, #990000, #009900);background-image:-moz-radial-gradient(circle, #990000, #009900);background-image:-ms-radial-gradient(circle, #990000, #009900);background-repeat:no-repeat;width:100%;height:940px;} table{width:100%;margin-bottom:18px;padding:0;border-collapse:separate;*border-collapse:collapse;font-size:13px;border:1px solid #ddd;-webkit-border-radius:4px;-moz-border-radius:4px;border-radius:4px;}table th,table td{padding:10px 10px 9px;line-height:18px;text-align:left;} table th{padding-top:9px;font-weight:bold;vertical-align:middle;border-bottom:1px solid #ddd;} table td{vertical-align:top;} @@ -207,24 +197,24 @@ 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 a{color:#bfbfbf;text-shadow:0 -1px 0 rgba(0, 0, 0, 0.25);} +.topbar{height:40px;position:fixed;top:0;left:0;right:0;z-index:10000;overflow:visible;}.topbar a{color:#777777;text-shadow:0 -1px 0 rgba(0, 0, 0, 0.25);} .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;} -.topbar input{background-color:#444;background-color:rgba(255, 255, 255, 0.3);font-family:"Helvetica Neue",Helvetica,Arial,sans-serif;font-size:normal;font-weight:13px;line-height:1;padding:4px 9px;color:#ffffff;color:rgba(255, 255, 255, 0.75);border:1px solid #111;-webkit-border-radius:4px;-moz-border-radius:4px;border-radius:4px;-webkit-box-shadow:inset 0 1px 2px rgba(0, 0, 0, 0.1),0 1px 0px rgba(255, 255, 255, 0.25);-moz-box-shadow:inset 0 1px 2px rgba(0, 0, 0, 0.1),0 1px 0px rgba(255, 255, 255, 0.25);box-shadow:inset 0 1px 2px rgba(0, 0, 0, 0.1),0 1px 0px rgba(255, 255, 255, 0.25);-webkit-transition:none;-moz-transition:none;-ms-transition:none;-o-transition:none;transition:none;}.topbar input:-moz-placeholder{color:#e6e6e6;} -.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{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 input{background-color:#444;background-color:rgba(255, 255, 255, 0.3);font-family:"Helvetica Neue",Helvetica,Arial,sans-serif;font-size:normal;font-weight:13px;line-height:1;padding:4px 9px;color:#ffffff;color:rgba(255, 255, 255, 0.75);border:1px solid #111;-webkit-border-radius:4px;-moz-border-radius:4px;border-radius:4px;-webkit-box-shadow:inset 0 1px 2px rgba(0, 0, 0, 0.1),0 1px 0px rgba(255, 255, 255, 0.25);-moz-box-shadow:inset 0 1px 2px rgba(0, 0, 0, 0.1),0 1px 0px rgba(255, 255, 255, 0.25);box-shadow:inset 0 1px 2px rgba(0, 0, 0, 0.1),0 1px 0px rgba(255, 255, 255, 0.25);-webkit-transition:none;-moz-transition:none;-ms-transition:none;-o-transition:none;transition:none;}.topbar input:-moz-placeholder{color:#cccccc;} +.topbar input::-webkit-input-placeholder{color:#cccccc;} +.topbar input:hover{background-color:#777777;background-color:rgba(255, 255, 255, 0.5);color:#ffffff;} +.topbar input:focus,.topbar input.focused{outline:0;background-color:#ffffff;color:#333333;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{background-color:#222;background-color:#222222;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);background-repeat:repeat-x;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 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-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);background-repeat:repeat-x;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;} @@ -232,14 +222,14 @@ table .headerSortUp.purple,table .headerSortDown.purple{background-color:#e2d5f0 .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);} +.topbar .dropdown-menu a,.dropdown-menu a{display:block;padding:4px 15px;clear:both;font-weight:normal;line-height:18px;color:#555555;text-shadow:0 1px 0 #ffffff;}.topbar .dropdown-menu a:hover,.dropdown-menu a:hover{background-color:#dddddd;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);background-repeat:repeat-x;filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#eeeeee', endColorstr='#dddddd', GradientType=0);color:#333333;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.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>li.active>a{color:#555555;background-color:#ffffff;border:1px solid #ddd;border-bottom-color:transparent;} .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;} @@ -249,20 +239,20 @@ table .headerSortUp.purple,table .headerSortDown.purple{background-color:#e2d5f0 .pills .active a{background:#0069d6;color:#ffffff;text-shadow:0 1px 1px rgba(0, 0, 0, 0.25);} .tab-content>*,.pill-content>*{display:none;} .tab-content>.active,.pill-content>.active{display:block;} -.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;} +.breadcrumb{margin:0 0 18px;padding:7px 14px;background-color:#f5f5f5;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);background-repeat:repeat-x;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:#777777;} +.breadcrumb .active a{color:#333333;} .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;} .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);} -.btn.success,.alert-message.success{background-color:#57a957;background-repeat:repeat-x;background-image:-khtml-gradient(linear, left top, left bottom, from(#62c462), to(#57a957));background-image:-moz-linear-gradient(top, #62c462, #57a957);background-image:-ms-linear-gradient(top, #62c462, #57a957);background-image:-webkit-gradient(linear, left top, left bottom, color-stop(0%, #62c462), color-stop(100%, #57a957));background-image:-webkit-linear-gradient(top, #62c462, #57a957);background-image:-o-linear-gradient(top, #62c462, #57a957);background-image:linear-gradient(top, #62c462, #57a957);filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#62c462', endColorstr='#57a957', GradientType=0);text-shadow:0 -1px 0 rgba(0, 0, 0, 0.25);border-color:#57a957 #57a957 #3d773d;border-color:rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);} -.btn.info,.alert-message.info{background-color:#339bb9;background-repeat:repeat-x;background-image:-khtml-gradient(linear, left top, left bottom, from(#5bc0de), to(#339bb9));background-image:-moz-linear-gradient(top, #5bc0de, #339bb9);background-image:-ms-linear-gradient(top, #5bc0de, #339bb9);background-image:-webkit-gradient(linear, left top, left bottom, color-stop(0%, #5bc0de), color-stop(100%, #339bb9));background-image:-webkit-linear-gradient(top, #5bc0de, #339bb9);background-image:-o-linear-gradient(top, #5bc0de, #339bb9);background-image:linear-gradient(top, #5bc0de, #339bb9);filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#5bc0de', endColorstr='#339bb9', GradientType=0);text-shadow:0 -1px 0 rgba(0, 0, 0, 0.25);border-color:#339bb9 #339bb9 #22697d;border-color:rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);} -.btn{cursor:pointer;display:inline-block;background-color:#e6e6e6;background-repeat:no-repeat;background-image:-webkit-gradient(linear, 0 0, 0 100%, from(#ffffff), color-stop(25%, #ffffff), to(#e6e6e6));background-image:-webkit-linear-gradient(#ffffff, #ffffff 25%, #e6e6e6);background-image:-moz-linear-gradient(top, #ffffff, #ffffff 25%, #e6e6e6);background-image:-ms-linear-gradient(#ffffff, #ffffff 25%, #e6e6e6);background-image:-o-linear-gradient(#ffffff, #ffffff 25%, #e6e6e6);background-image:linear-gradient(#ffffff, #ffffff 25%, #e6e6e6);filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#e6e6e6', GradientType=0);padding:5px 14px 6px;text-shadow:0 1px 1px rgba(255, 255, 255, 0.75);color:#333;font-size:13px;line-height:normal;border:1px solid #ccc;border-bottom-color:#bbb;-webkit-border-radius:4px;-moz-border-radius:4px;border-radius:4px;-webkit-box-shadow:inset 0 1px 0 rgba(255, 255, 255, 0.2),0 1px 2px rgba(0, 0, 0, 0.05);-moz-box-shadow:inset 0 1px 0 rgba(255, 255, 255, 0.2),0 1px 2px rgba(0, 0, 0, 0.05);box-shadow:inset 0 1px 0 rgba(255, 255, 255, 0.2),0 1px 2px rgba(0, 0, 0, 0.05);-webkit-transition:0.1s linear all;-moz-transition:0.1s linear all;-ms-transition:0.1s linear all;-o-transition:0.1s linear all;transition:0.1s linear all;}.btn:hover{background-position:0 -15px;color:#333;text-decoration:none;} +.btn.danger,.alert-message.danger,.btn.error,.alert-message.error{background-color:#c43c35;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);background-repeat:repeat-x;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);} +.btn.success,.alert-message.success{background-color:#57a957;background-image:-khtml-gradient(linear, left top, left bottom, from(#62c462), to(#57a957));background-image:-moz-linear-gradient(top, #62c462, #57a957);background-image:-ms-linear-gradient(top, #62c462, #57a957);background-image:-webkit-gradient(linear, left top, left bottom, color-stop(0%, #62c462), color-stop(100%, #57a957));background-image:-webkit-linear-gradient(top, #62c462, #57a957);background-image:-o-linear-gradient(top, #62c462, #57a957);background-image:linear-gradient(top, #62c462, #57a957);background-repeat:repeat-x;filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#62c462', endColorstr='#57a957', GradientType=0);text-shadow:0 -1px 0 rgba(0, 0, 0, 0.25);border-color:#57a957 #57a957 #3d773d;border-color:rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);} +.btn.info,.alert-message.info{background-color:#339bb9;background-image:-khtml-gradient(linear, left top, left bottom, from(#5bc0de), to(#339bb9));background-image:-moz-linear-gradient(top, #5bc0de, #339bb9);background-image:-ms-linear-gradient(top, #5bc0de, #339bb9);background-image:-webkit-gradient(linear, left top, left bottom, color-stop(0%, #5bc0de), color-stop(100%, #339bb9));background-image:-webkit-linear-gradient(top, #5bc0de, #339bb9);background-image:-o-linear-gradient(top, #5bc0de, #339bb9);background-image:linear-gradient(top, #5bc0de, #339bb9);background-repeat:repeat-x;filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#5bc0de', endColorstr='#339bb9', GradientType=0);text-shadow:0 -1px 0 rgba(0, 0, 0, 0.25);border-color:#339bb9 #339bb9 #22697d;border-color:rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);} +.btn{cursor:pointer;display:inline-block;background-color:#e6e6e6;background-image:-webkit-gradient(linear, 0 0, 0 100%, from(#ffffff), color-stop(25%, #ffffff), to(#e6e6e6));background-image:-webkit-linear-gradient(#ffffff, #ffffff 25%, #e6e6e6);background-image:-moz-linear-gradient(top, #ffffff, #ffffff 25%, #e6e6e6);background-image:-ms-linear-gradient(#ffffff, #ffffff 25%, #e6e6e6);background-image:-o-linear-gradient(#ffffff, #ffffff 25%, #e6e6e6);background-image:linear-gradient(#ffffff, #ffffff 25%, #e6e6e6);background-repeat:no-repeat;filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#e6e6e6', GradientType=0);padding:5px 14px 6px;text-shadow:0 1px 1px rgba(255, 255, 255, 0.75);color:#333;font-size:13px;line-height:normal;border:1px solid #ccc;border-bottom-color:#bbb;-webkit-border-radius:4px;-moz-border-radius:4px;border-radius:4px;-webkit-box-shadow:inset 0 1px 0 rgba(255, 255, 255, 0.2),0 1px 2px rgba(0, 0, 0, 0.05);-moz-box-shadow:inset 0 1px 0 rgba(255, 255, 255, 0.2),0 1px 2px rgba(0, 0, 0, 0.05);box-shadow:inset 0 1px 0 rgba(255, 255, 255, 0.2),0 1px 2px rgba(0, 0, 0, 0.05);-webkit-transition:0.1s linear all;-moz-transition:0.1s linear all;-ms-transition:0.1s linear all;-o-transition:0.1s linear all;transition:0.1s linear all;}.btn:hover{background-position:0 -15px;color:#333;text-decoration:none;} .btn:focus{outline:1px dotted #666;} -.btn.primary{color:#ffffff;background-color:#0064cd;background-repeat:repeat-x;background-image:-khtml-gradient(linear, left top, left bottom, from(#049cdb), to(#0064cd));background-image:-moz-linear-gradient(top, #049cdb, #0064cd);background-image:-ms-linear-gradient(top, #049cdb, #0064cd);background-image:-webkit-gradient(linear, left top, left bottom, color-stop(0%, #049cdb), color-stop(100%, #0064cd));background-image:-webkit-linear-gradient(top, #049cdb, #0064cd);background-image:-o-linear-gradient(top, #049cdb, #0064cd);background-image:linear-gradient(top, #049cdb, #0064cd);filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#049cdb', endColorstr='#0064cd', GradientType=0);text-shadow:0 -1px 0 rgba(0, 0, 0, 0.25);border-color:#0064cd #0064cd #003f81;border-color:rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);} +.btn.primary{color:#ffffff;background-color:#0064cd;background-image:-khtml-gradient(linear, left top, left bottom, from(#049cdb), to(#0064cd));background-image:-moz-linear-gradient(top, #049cdb, #0064cd);background-image:-ms-linear-gradient(top, #049cdb, #0064cd);background-image:-webkit-gradient(linear, left top, left bottom, color-stop(0%, #049cdb), color-stop(100%, #0064cd));background-image:-webkit-linear-gradient(top, #049cdb, #0064cd);background-image:-o-linear-gradient(top, #049cdb, #0064cd);background-image:linear-gradient(top, #049cdb, #0064cd);background-repeat:repeat-x;filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#049cdb', endColorstr='#0064cd', GradientType=0);text-shadow:0 -1px 0 rgba(0, 0, 0, 0.25);border-color:#0064cd #0064cd #003f81;border-color:rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);} .btn:active{-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);} .btn.disabled{cursor:default;background-image:none;filter:progid:DXImageTransform.Microsoft.gradient(enabled = false);filter:alpha(opacity=65);-khtml-opacity:0.65;-moz-opacity:0.65;opacity:0.65;-webkit-box-shadow:none;-moz-box-shadow:none;box-shadow:none;} .btn[disabled]{cursor:default;background-image:none;filter:progid:DXImageTransform.Microsoft.gradient(enabled = false);filter:alpha(opacity=65);-khtml-opacity:0.65;-moz-opacity:0.65;opacity:0.65;-webkit-box-shadow:none;-moz-box-shadow:none;box-shadow:none;} @@ -271,16 +261,16 @@ footer{margin-top:17px;padding-top:17px;border-top:1px solid #eee;} :root .alert-message,:root .btn{border-radius:0 \0;} button.btn::-moz-focus-inner,input[type=submit].btn::-moz-focus-inner{padding:0;border:0;} .close{float:right;color:#000000;font-size:20px;font-weight:bold;line-height:13.5px;text-shadow:0 1px 0 #ffffff;filter:alpha(opacity=20);-khtml-opacity:0.2;-moz-opacity:0.2;opacity:0.2;}.close:hover{color:#000000;text-decoration:none;filter:alpha(opacity=40);-khtml-opacity:0.4;-moz-opacity:0.4;opacity:0.4;} -.alert-message{position:relative;padding:7px 15px;margin-bottom:18px;color:#404040;background-color:#eedc94;background-repeat:repeat-x;background-image:-khtml-gradient(linear, left top, left bottom, from(#fceec1), to(#eedc94));background-image:-moz-linear-gradient(top, #fceec1, #eedc94);background-image:-ms-linear-gradient(top, #fceec1, #eedc94);background-image:-webkit-gradient(linear, left top, left bottom, color-stop(0%, #fceec1), color-stop(100%, #eedc94));background-image:-webkit-linear-gradient(top, #fceec1, #eedc94);background-image:-o-linear-gradient(top, #fceec1, #eedc94);background-image:linear-gradient(top, #fceec1, #eedc94);filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#fceec1', endColorstr='#eedc94', GradientType=0);text-shadow:0 -1px 0 rgba(0, 0, 0, 0.25);border-color:#eedc94 #eedc94 #e4c652;border-color:rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);text-shadow:0 1px 0 rgba(255, 255, 255, 0.5);border-width:1px;border-style:solid;-webkit-border-radius:4px;-moz-border-radius:4px;border-radius:4px;-webkit-box-shadow:inset 0 1px 0 rgba(255, 255, 255, 0.25);-moz-box-shadow:inset 0 1px 0 rgba(255, 255, 255, 0.25);box-shadow:inset 0 1px 0 rgba(255, 255, 255, 0.25);}.alert-message .close{*margin-top:3px;} +.alert-message{position:relative;padding:7px 15px;margin-bottom:18px;color:#333333;background-color:#eedc94;background-image:-khtml-gradient(linear, left top, left bottom, from(#fceec1), to(#eedc94));background-image:-moz-linear-gradient(top, #fceec1, #eedc94);background-image:-ms-linear-gradient(top, #fceec1, #eedc94);background-image:-webkit-gradient(linear, left top, left bottom, color-stop(0%, #fceec1), color-stop(100%, #eedc94));background-image:-webkit-linear-gradient(top, #fceec1, #eedc94);background-image:-o-linear-gradient(top, #fceec1, #eedc94);background-image:linear-gradient(top, #fceec1, #eedc94);background-repeat:repeat-x;filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#fceec1', endColorstr='#eedc94', GradientType=0);text-shadow:0 -1px 0 rgba(0, 0, 0, 0.25);border-color:#eedc94 #eedc94 #e4c652;border-color:rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);text-shadow:0 1px 0 rgba(255, 255, 255, 0.5);border-width:1px;border-style:solid;-webkit-border-radius:4px;-moz-border-radius:4px;border-radius:4px;-webkit-box-shadow:inset 0 1px 0 rgba(255, 255, 255, 0.25);-moz-box-shadow:inset 0 1px 0 rgba(255, 255, 255, 0.25);box-shadow:inset 0 1px 0 rgba(255, 255, 255, 0.25);}.alert-message .close{*margin-top:3px;} .alert-message h5{line-height:18px;} .alert-message p{margin-bottom:0;} .alert-message div{margin-top:5px;margin-bottom:2px;line-height:28px;} .alert-message .btn{-webkit-box-shadow:0 1px 0 rgba(255, 255, 255, 0.25);-moz-box-shadow:0 1px 0 rgba(255, 255, 255, 0.25);box-shadow:0 1px 0 rgba(255, 255, 255, 0.25);} .alert-message.block-message{background-image:none;background-color:#fdf5d9;filter:progid:DXImageTransform.Microsoft.gradient(enabled = false);padding:14px;border-color:#fceec1;-webkit-box-shadow:none;-moz-box-shadow:none;box-shadow:none;}.alert-message.block-message ul,.alert-message.block-message p{margin-right:30px;} .alert-message.block-message ul{margin-bottom:0;} -.alert-message.block-message li{color:#404040;} +.alert-message.block-message li{color:#333333;} .alert-message.block-message .alert-actions{margin-top:5px;} -.alert-message.block-message.error,.alert-message.block-message.success,.alert-message.block-message.info{color:#404040;text-shadow:0 1px 0 rgba(255, 255, 255, 0.5);} +.alert-message.block-message.error,.alert-message.block-message.success,.alert-message.block-message.info{color:#333333;text-shadow:0 1px 0 rgba(255, 255, 255, 0.5);} .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;} @@ -288,7 +278,7 @@ button.btn::-moz-focus-inner,input[type=submit].btn::-moz-focus-inner{padding:0; .pagination li{display:inline;} .pagination 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 a:hover,.pagination .active a{background-color:#c7eefe;} -.pagination .disabled a,.pagination .disabled a:hover{background-color:transparent;color:#bfbfbf;} +.pagination .disabled a,.pagination .disabled a:hover{background-color:transparent;color:#777777;} .pagination .next a{border:0;} .well{background-color:#f5f5f5;margin-bottom:20px;padding:19px;min-height:20px;border:1px solid #eee;border:1px solid rgba(0, 0, 0, 0.05);-webkit-border-radius:4px;-moz-border-radius:4px;border-radius:4px;-webkit-box-shadow:inset 0 1px 1px rgba(0, 0, 0, 0.05);-moz-box-shadow:inset 0 1px 1px rgba(0, 0, 0, 0.05);box-shadow:inset 0 1px 1px rgba(0, 0, 0, 0.05);}.well blockquote{border-color:#ddd;border-color:rgba(0, 0, 0, 0.15);} .modal-backdrop{background-color:#000000;position:fixed;top:0;left:0;right:0;bottom:0;z-index:10000;}.modal-backdrop.fade{opacity:0;} @@ -317,7 +307,7 @@ button.btn::-moz-focus-inner,input[type=submit].btn::-moz-focus-inner{padding:0; .popover .title{background-color:#f5f5f5;padding:9px 15px;line-height:1;-webkit-border-radius:3px 3px 0 0;-moz-border-radius:3px 3px 0 0;border-radius:3px 3px 0 0;border-bottom:1px solid #eee;} .popover .content{background-color:#ffffff;padding:14px;-webkit-border-radius:0 0 3px 3px;-moz-border-radius:0 0 3px 3px;border-radius:0 0 3px 3px;-webkit-background-clip:padding-box;-moz-background-clip:padding-box;background-clip:padding-box;}.popover .content p,.popover .content ul,.popover .content ol{margin-bottom:0;} .fade{-webkit-transition:opacity 0.15s linear;-moz-transition:opacity 0.15s linear;-ms-transition:opacity 0.15s linear;-o-transition:opacity 0.15s linear;transition:opacity 0.15s linear;opacity:0;}.fade.in{opacity:1;} -.label{padding:1px 3px 2px;background-color:#bfbfbf;font-size:9.75px;font-weight:bold;color:#ffffff;text-transform:uppercase;-webkit-border-radius:3px;-moz-border-radius:3px;border-radius:3px;}.label.important{background-color:#c43c35;} +.label{padding:1px 3px 2px;background-color:#777777;font-size:9.75px;font-weight:bold;color:#ffffff;text-transform:uppercase;-webkit-border-radius:3px;-moz-border-radius:3px;border-radius:3px;}.label.important{background-color:#c43c35;} .label.warning{background-color:#f89406;} .label.success{background-color:#46a546;} .label.notice{background-color:#62cffc;} diff --git a/docs/assets/css/docs.css b/docs/assets/css/docs.css index fb727a900a..a17fd5692b 100644 --- a/docs/assets/css/docs.css +++ b/docs/assets/css/docs.css @@ -310,8 +310,16 @@ img.large-bird { opacity: .1; } + /* Pretty Print -------------------------------------------------- */ pre.prettyprint { overflow: hidden; -} \ No newline at end of file +} + + +/* Wells +-------------------------------------------------- */ +.well form { + margin-bottom: 0; +} diff --git a/docs/index.html b/docs/index.html index b24999c623..75a18ea409 100644 --- a/docs/index.html +++ b/docs/index.html @@ -884,331 +884,198 @@ <div class="page-header"> <h1>Forms</h1> </div> + <div class="row"> + <div class="span-one-third"> + <h3>Four types of forms</h3> + <p>With 2.0, we now have four types of forms to choose from:</p> + <ul> + <li>Search form for a super-rounded input and optional button</li> + <li>Inline form for a series of elements on one line</li> + <li>Horizontal form for left-aligned labels</li> + <li>Vertical form for stacked labels and inputs</li> + </ul> + </div> + <div class="span-one-third"> + <h3></h3> + </div> + </div> <div class="row"> <div class="span4"> - <h2>Default styles</h2> - <p>All forms are given default styles to present them in a readable and scalable way. Styles are provided for text inputs, select lists, textareas, radio buttons and checkboxes, and buttons.</p> + <h2>Search form</h2> </div> <div class="span12"> - <form> - <fieldset> - <legend>Example form legend</legend> - <div class="clearfix"> - <label for="xlInput">X-Large input</label> - <div class="input"> - <input class="xlarge" id="xlInput" name="xlInput" size="30" type="text" /> - </div> - </div><!-- /clearfix --> - <div class="clearfix"> - <label for="normalSelect">Select</label> - <div class="input"> - <select name="normalSelect" id="normalSelect"> - <option>1</option> - <option>2</option> - <option>3</option> - <option>4</option> - <option>5</option> - </select> - </div> - </div><!-- /clearfix --> - <div class="clearfix"> - <label for="mediumSelect">Select</label> - <div class="input"> - <select class="medium" name="mediumSelect" id="mediumSelect"> - <option>1</option> - <option>2</option> - <option>3</option> - <option>4</option> - <option>5</option> - </select> - </div> - </div><!-- /clearfix --> - <div class="clearfix"> - <label for="multiSelect">Multiple select</label> - <div class="input"> - <select class="medium" multiple="multiple" name="multiSelect" id="multiSelect"> - <option>1</option> - <option>2</option> - <option>3</option> - <option>4</option> - <option>5</option> - </select> - </div> - </div><!-- /clearfix --> - <div class="clearfix"> - <label>Uneditable input</label> - <div class="input"> - <span class="uneditable-input">Some value here</span> - </div> - </div><!-- /clearfix --> - <div class="clearfix"> - <label for="disabledInput">Disabled input</label> - <div class="input"> - <input class="xlarge disabled" id="disabledInput" name="disabledInput" size="30" type="text" placeholder="Disabled input here… carry on." disabled /> - </div> - </div><!-- /clearfix --> - <div class="clearfix"> - <label for="disabledInput">Disabled textarea</label> - <div class="input"> - <textarea class="xxlarge" name="textarea" id="textarea" rows="3" disabled></textarea> - </div> - </div><!-- /clearfix --> - <div class="clearfix error"> - <label for="xlInput2">X-Large input</label> - <div class="input"> - <input class="xlarge error" id="xlInput2" name="xlInput2" size="30" type="text" /> - <span class="help-inline">Small snippet of help text</span> - </div> - </div><!-- /clearfix --> - </fieldset> - <fieldset> - <legend>Example form legend</legend> - <div class="clearfix"> - <label for="prependedInput">Prepended text</label> - <div class="input"> - <div class="input-prepend"> - <span class="add-on">@</span> - <input class="medium" id="prependedInput" name="prependedInput" size="16" type="text" /> - </div> - </div> - </div><!-- /clearfix --> - <div class="clearfix"> - <label for="prependedInput2">Prepended checkbox</label> - <div class="input"> - <div class="input-prepend"> - <label class="add-on"><input type="checkbox" name="" id="" value="" /></label> - <input class="mini" id="prependedInput2" name="prependedInput2" size="16" type="text" /> - </div> - </div> - </div><!-- /clearfix --> - <div class="clearfix"> - <label for="appendedInput">Appended checkbox</label> - <div class="input"> - <div class="input-append"> - <input class="mini" id="appendedInput" name="appendedInput" size="16" type="text" /> - <label class="add-on active"><input type="checkbox" name="" id="" value="" checked="checked" /></label> - </div> - </div> - </div><!-- /clearfix --> - <div class="clearfix"> - <label for="fileInput">File input</label> - <div class="input"> - <input class="input-file" id="fileInput" name="fileInput" type="file" /> - </div> - </div><!-- /clearfix --> - </fieldset> - <fieldset> - <legend>Example form legend</legend> - <div class="clearfix"> - <label id="optionsCheckboxes">List of options</label> - <div class="input"> - <ul class="inputs-list"> - <li> - <label> - <input type="checkbox" name="optionsCheckboxes" value="option1" /> - <span>Option one is this and that—be sure to include why it’s great</span> - </label> - </li> - <li> - <label> - <input type="checkbox" name="optionsCheckboxes" value="option2" /> - <span>Option two can also be checked and included in form results</span> - </label> - </li> - <li> - <label> - <input type="checkbox" name="optionsCheckboxes" value="option2" /> - <span>Option three can—yes, you guessed it—also be checked and included in form results</span> - </label> - </li> - <li> - <label class="disabled"> - <input type="checkbox" name="optionsCheckboxes" value="option2" disabled /> - <span>Option four cannot be checked as it is disabled.</span> - </label> - </li> - </ul> - <span class="help-block"> - <strong>Note:</strong> Labels surround all the options for much larger click areas and a more usable form. - </span> - </div> - </div><!-- /clearfix --> - <div class="clearfix"> - <label>Date range</label> - <div class="input"> - <div class="inline-inputs"> - <input class="small" type="text" value="May 1, 2011" /> - <input class="mini" type="text" value="12:00am" /> - to - <input class="small" type="text" value="May 8, 2011" /> - <input class="mini" type="text" value="11:59pm" /> - <span class="help-inline">All times are shown as Pacific Standard Time (GMT -08:00).</span> - </div> - </div> - </div><!-- /clearfix --> - <div class="clearfix"> - <label for="textarea">Textarea</label> - <div class="input"> - <textarea class="xxlarge" id="textarea2" name="textarea2" rows="3"></textarea> - <span class="help-block"> - Block of help text to describe the field above if need be. - </span> - </div> - </div><!-- /clearfix --> - <div class="clearfix"> - <label id="optionsRadio">List of options</label> - <div class="input"> - <ul class="inputs-list"> - <li> - <label> - <input type="radio" checked name="optionsRadios" value="option1" /> - <span>Option one is this and that—be sure to include why it’s great</span> - </label> - </li> - <li> - <label> - <input type="radio" name="optionsRadios" value="option2" /> - <span>Option two can is something else and selecting it will deselect options 1</span> - </label> - </li> - </ul> - </div> - </div><!-- /clearfix --> - <div class="actions"> - <input type="submit" class="btn primary" value="Save changes"> <button type="reset" class="btn">Cancel</button> - </div> - </fieldset> - </form> + <div class="well"> + <form class="form-search"> + <input type="text" class="search-query"> + <button type="submit" class="btn">Search</button> + </form> + </div><!--/well--> </div> - </div><!-- /row --> - - <br /> - + </div> <div class="row"> <div class="span4"> - <h2>Stacked forms</h2> - <p>Add <code>.form-stacked</code> to your form’s HTML and you’ll have labels on top of their fields instead of to their left. This works great if your forms are short or you have two columns of inputs for heavier forms.</p> + <h2>Inline form</h2> </div> <div class="span12"> - <form action="" class="form-stacked"> - <fieldset> - <legend>Example form legend</legend> - <div class="clearfix"> - <label for="xlInput3">X-Large input</label> - <div class="input"> - <input class="xlarge" id="xlInput3" name="xlInput3" size="30" type="text" /> - </div> - </div><!-- /clearfix --> - <div class="clearfix"> - <label for="stackedSelect">Select</label> - <div class="input"> - <select name="stackedSelect" id="stackedSelect"> - <option>1</option> - <option>2</option> - <option>3</option> - <option>4</option> - <option>5</option> - </select> - </div> - </div><!-- /clearfix --> - </fieldset> - <fieldset> - <legend>Example form legend</legend> - <div class="clearfix error"> - <label for="xlInput4">X-Large input</label> - <div class="input"> - <input class="xlarge error" id="xlInput4" name="xlInput4" size="30" type="text" /> - <span class="help-inline">Small snippet of help text</span> - </div> - </div><!-- /clearfix --> - <div class="clearfix"> - <label id="optionsCheckboxes">List of options</label> - <div class="input"> - <ul class="inputs-list"> - <li> - <label> - <input type="checkbox" name="optionsCheckboxes" value="option1" /> - <span>Option one is this and that—be sure to include why it’s great</span> - </label> - </li> - <li> - <label> - <input type="checkbox" name="optionsCheckboxes" value="option2" /> - <span>Option two can also be checked and included in form results</span> - </label> - </li> - </ul> - <span class="help-block"> - <strong>Note:</strong> Labels surround all the options for much larger click areas and a more usable form. - </span> - </div> - </div><!-- /clearfix --> - </fieldset> - <div class="actions"> - <button type="submit" class="btn primary">Save changes</button> <button type="reset" class="btn">Cancel</button> - </div> - </form> + <div class="well"> + <form class="form-inline"> + <h4>Some directional text</h4> + <p>And maybe some kind of optional supporting text right here.</p> + <input type="text" class="input-medium"> + <input type="text" class="input-medium"> + <input type="text" class="input-medium"> + <button type="submit" class="btn">Search</button> + </form> + </div><!--/well--> </div> - </div><!-- /row --> - + </div> <div class="row"> <div class="span4"> - <h2>Form field sizes</h2> - <p>Customize any form <code>input</code>, <code>select</code>, or <code>textarea</code> width by adding just a few classes to your markup.</p> - <p>As of v1.3.0, we have added the grid-based sizing classes for form elements. <strong>Please use the these over the existing <code>.mini</code>, <code>.small</code>, etc classes.</strong></p> + <h2>Horizontal form</h2> </div> <div class="span12"> - <form action=""> - <div class="clearfix"><input class="span2" id="" name="" type="text" placeholder=".span2" /></div> - <div class="clearfix"><input class="span3" id="" name="" type="text" placeholder=".span3" /></div> - <div class="clearfix"><input class="span4" id="" name="" type="text" placeholder=".span4" /></div> - <div class="clearfix"><input class="span5" id="" name="" type="text" placeholder=".span5" /></div> - <div class="clearfix"><input class="span6" id="" name="" type="text" placeholder=".span6" /></div> - <div class="clearfix"><input class="span7" id="" name="" type="text" placeholder=".span7" /></div> - <div class="clearfix"><input class="span8" id="" name="" type="text" placeholder=".span8" /></div> - <div class="clearfix"><input class="span9" id="" name="" type="text" placeholder=".span9" /></div> - <div class="clearfix"><input class="span10" id="" name="" type="text" placeholder=".span10" /></div> - <div class="clearfix"><input class="span11" id="" name="" type="text" placeholder=".span11" /></div> - <div class="clearfix"><input class="span12" id="" name="" type="text" placeholder=".span12" /></div> + <form class="form-horizontal"> + <legend>Example form</legend> + <fieldset class="control-group"> + <label class="control-label" for="input01">Text input</label> + <div class="controls"> + <input type="text" class="xlarge" name="input01"> + <p class="help-text">Help text here. Be sure to fill this out like so, or else!</p> + </div> + </fieldset> + <fieldset class="control-group"> + <label class="control-label" for="select01">Select list</label> + <div class="controls"> + <select name="select01"> + <option>1</option> + <option>2</option> + <option>3</option> + <option>4</option> + <option>5</option> + </select> + </div> + </fieldset> + <fieldset class="control-group"> + <label class="control-label" for="multiSelect">Multi-select</label> + <div class="controls"> + <select multiple="multiple" name="multiSelect"> + <option>1</option> + <option>2</option> + <option>3</option> + <option>4</option> + <option>5</option> + </select> + </div> + </fieldset> + <legend>Example form</legend> + <fieldset class="control-group"> + <label class="control-label" for="fileInput">File input</label> + <div class="controls"> + <input class="input-file" id="fileInput" name="fileInput" type="file" /> + </div> + </fieldset> + <fieldset class="control-group has-error"> + <label class="control-label" for="inputError">Input with error</label> + <div class="controls"> + <input type="text" name="inputError"> + </div> + </fieldset> + <fieldset class="control-group has-error"> + <label class="control-label" for="textareaError">Textarea with error</label> + <div class="controls"> + <textarea class="input-xxlarge" rows="3"></textarea> + </div> + </fieldset> + <fieldset class="control-group"> + <label class="control-label" for="optionsCheckboxes">Checkboxes</label> + <div class="controls"> + <div class="control-list"> + <label class="checkbox"> + <input type="checkbox" name="optionsCheckboxes" value="option1"> + Option one is this and that—be sure to include why it’s great + </label> + <label class="checkbox"> + <input type="checkbox" name="optionsCheckboxes" value="option2"> + Option two can also be checked and included in form results + </label> + <label class="checkbox"> + <input type="checkbox" name="optionsCheckboxes" value="option3"> + Option three can—yes, you guessed it—also be checked and included in form results + </label> + <label class="checkbox"> + <input type="checkbox" name="optionsCheckboxes" value="option4"> + Option four cannot be checked as it is disabled + </label> + </div> + <p class="help-text"><strong>Note:</strong> Labels surround all the options for much larger click areas and a more usable form.</p> + </div> + </fieldset> + <fieldset class="control-group"> + <label class="control-label" for="optionsRadios">Radio buttons</label> + <div class="controls"> + <div class="control-list"> + <label> + <input type="radio" checked name="optionsRadios" value="option1" /> + <span>Option one is this and that—be sure to include why it’s great</span> + </label> + <label> + <input type="radio" name="optionsRadios" value="option2" /> + <span>Option two can is something else and selecting it will deselect options 1</span> + </label> + </div> + <p class="help-text"><strong>Note:</strong> Labels surround all the options for much larger click areas and a more usable form.</p> + </div> + </fieldset> + <fieldset class="form-actions"> + <button type="submit" class="btn primary">Save changes</button> + <button type="reset" class="btn">Cancel</button> + </fieldset> </form> </div> </div> - <div class="row"> <div class="span4"> - <h2>Buttons</h2> - <p>As a convention, buttons are used for actions while links are used for objects. For instance, "Download" could be a button and "recent activity" could be a link.</p> - <p>All buttons default to a light gray style, but a number of functional classes can be applied for different color styles. These classes include a blue <code>.primary</code> class, a light-blue <code>.info</code> class, a green <code>.success</code> class, and a red <code>.danger</code> class.</p> + <h2>Vertical form</h2> </div> <div class="span12"> - <h3>Example buttons</h3> - <p>Button styles can be applied to anything with the <code>.btn</code> applied. Typically you’ll want to apply these to only <code><a></code>, <code><button></code>, and select <code><input></code> elements. Here’s how it looks:</p> - <div class="well" style="padding: 14px 19px;"> - <button class="btn primary">Primary</button> <button class="btn">Default</button> <button class="btn info">Info</button> <button class="btn success">Success</button> <button class="btn danger">Danger</button> - </div> - <h3>Alternate sizes</h3> - <p>Fancy larger or smaller buttons? Have at it!</p> - <div class="well"> - <a href="#" class="btn large primary">Primary action</a> - <a href="#" class="btn large">Action</a> - </div> - <div class="well" style="padding: 16px 19px;"> - <a href="#" class="btn small primary">Primary action</a> - <a href="#" class="btn small">Action</a> - </div> - <h3>Disabled state</h3> - <p>For buttons that are not active or are disabled by the app for one reason or another, use the disabled state. That’s <code>.disabled</code> for links and <code>:disabled</code> for <code><button></code> elements.</p> - <h4>Links</h4> - <div class="well"> - <a href="#" class="btn large primary disabled">Primary action</a> - <a href="#" class="btn large disabled">Action</a> - </div> - <h4>Buttons</h4> - <div class="well"> - <button class="btn large primary disabled" disabled="disabled">Primary action</button> <button class="btn large" disabled>Action</button> - </div> + <form class="form-vertical"> + <legend>Example form</legend> + <fieldset class="control-group"> + <label class="control-label" for="input01">Label</label> + <div class="controls"> + <input type="text" class="xlarge" name="input01"> + <p class="help-text">Be sure to fill this out like so, or else!</p> + </div> + </fieldset> + <fieldset class="control-group"> + <label class="control-label" for="select01">Label</label> + <div class="controls"> + <select name="select01"></select> + </div> + </fieldset> + <fieldset class="control-group"> + <label class="control-label" for="input02">Label</label> + <div class="controls"> + <div class="control-list"> + <label class="checkbox"> + <input type="checkbox"> Something something something something something + </label> + <label class="checkbox"> + <input type="checkbox"> Something something something something + </label> + <label class="checkbox"> + <input type="checkbox"> Something something something + </label> + </div> + </div> + </fieldset> + <fieldset class="form-actions"> + <button type="submit" class="btn primary">Save changes</button> + <button type="reset" class="btn">Cancel</button> + </fieldset> + </form> </div> - </div><!-- /row --> + </div> </section> @@ -1378,6 +1245,7 @@ <h2>Tabs and pills</h2> <p>Create simple secondary navigation with a <code><ul></code>. Swap between tabs or pills by adding the appropriate class.</p> <p>Great for sub-sections of content like our account settings pages and user timelines for toggling between pages of like content. Available in tabbed or pill styles.</p> + <p><a class="btn js-btn" href="./javascript.html#tabs">Get the javascript »</a></p> </div> <div class="span12"> <ul class="tabs"> @@ -1929,6 +1797,7 @@ Lorem ipsum dolar sit amet illo error <a href="#" title="below">ipsum</a> verita </section> +<div class="radial-test"></div> </div><!-- /container --> diff --git a/lib/forms.less b/lib/forms.less index 91aca77fe7..fd46fc71e8 100644 --- a/lib/forms.less +++ b/lib/forms.less @@ -6,29 +6,20 @@ // GENERAL STYLES // -------------- +// Make all forms have space below them form { margin-bottom: @baseline; } // Groups of fields with labels on top (legends) -fieldset { - margin-bottom: @baseline; - padding-top: @baseline; - legend { - display: block; - padding-left: 150px; - font-size: @basefont * 1.5; - line-height: 1; - color: @grayDark; - *padding: 0 0 5px 145px; /* IE6-7 */ - *line-height: 1.5; /* IE6-7 */ - } -} - -// Parent element that clears floats and wraps labels and fields together -form .clearfix { - margin-bottom: @baseline; - .clearfix() +legend { + display: block; + width: 100%; + margin-bottom: @baseline * 1.5; + font-size: @basefont * 1.5; + line-height: @baseline * 2; + color: @grayDark; + border-bottom: 1px solid #eee; } // Set font for forms @@ -36,25 +27,16 @@ label, input, select, textarea { - #font > .sans-serif(normal,13px,normal); + #font > .sans-serif(normal,@basefont,@baseline); } -// Float labels left +// Identify controls by their labels label { - padding-top: 6px; - font-size: @basefont; - line-height: @baseline; - float: left; - width: 130px; - text-align: right; + display: block; + margin-bottom: 5px; color: @grayDark; } -// Shift over the inside div to align all label's relevant content -form .input { - margin-left: 150px; -} - // Checkboxs and radio buttons input[type=checkbox], input[type=radio] { @@ -77,7 +59,7 @@ select, .border-radius(3px); } -/* mini reset for non-html5 file types */ +/* Mini reset for unique input types */ input[type=checkbox], input[type=radio] { width: auto; @@ -89,6 +71,7 @@ input[type=radio] { border: none; } +// Reset the file input to browser defaults input[type=file] { background-color: @white; padding: initial; @@ -97,6 +80,7 @@ input[type=file] { .box-shadow(none); } +// Help out input buttons input[type=button], input[type=reset], input[type=submit] { @@ -120,24 +104,11 @@ textarea { height: auto; } -// For text that needs to appear as an input but should not be an input -.uneditable-input { - background-color: @white; - display: block; - border-color: #eee; - .box-shadow(inset 0 1px 2px rgba(0,0,0,.025)); - cursor: not-allowed; -} -// Placeholder text gets special styles; can't be bundled together though for some reason -:-moz-placeholder { - color: @grayLight; -} -::-webkit-input-placeholder { - color: @grayLight; -} -// Focus states +// FOCUS STATE +// ----------- + input, textarea { @transition: border linear .2s, box-shadow linear .2s; @@ -158,36 +129,6 @@ select:focus { outline: 1px dotted #666; // Selet elements don't get box-shadow styles, so instead we do outline } -// Error styles -form div.clearfix.error { - background: lighten(@red, 57%); - padding: 10px 0; - margin: -10px 0 10px; - .border-radius(4px); - @error-text: desaturate(lighten(@red, 25%), 25%); - > label, - span.help-inline, - span.help-block { - color: @red; - } - input, - textarea { - border-color: @error-text; - .box-shadow(0 0 3px rgba(171,41,32,.25)); - &:focus { - border-color: darken(@error-text, 10%); - .box-shadow(0 0 6px rgba(171,41,32,.5)); - } - } - .input-prepend, - .input-append { - span.add-on { - background: lighten(@red, 50%); - border-color: @error-text; - color: darken(@error-text, 10%); - } - } -} // INPUT SIZES @@ -232,8 +173,9 @@ select { } -// INPUT STATES -// ------------ + +// DISABLED STATE +// -------------- // Disabled and read-only inputs input[disabled], @@ -247,36 +189,89 @@ textarea[readonly] { cursor: not-allowed; } -// Actions (the buttons) -.actions { - background: #f5f5f5; + + +// ERROR STATE +// ----------- + +// Set color of error text +@error-text: desaturate(lighten(@red, 25%), 25%); + +// Style the background of control-groups with errors +.has-error { + background: lighten(@red, 55%); + padding: (@baseline / 2) 0; + margin: -10px 0 10px; + .border-radius(4px); + > label, + span.help-inline, + span.help-block { + color: @red; + } + input, + textarea, + select { + border-color: @error-text; + .box-shadow(0 0 3px rgba(171,41,32,.25)); + &:focus { + border-color: darken(@error-text, 10%); + .box-shadow(0 0 6px rgba(171,41,32,.5)); + } + } + .input-prepend, + .input-append { + span.add-on { + background: lighten(@red, 50%); + border-color: @error-text; + color: darken(@error-text, 10%); + } + } +} + + + +// FORM ACTIONS +// ------------ + +.form-actions { + padding: (@baseline - 1) 20px @baseline; margin-top: @baseline; margin-bottom: @baseline; - padding: (@baseline - 1) 20px @baseline 150px; + background-color: #f5f5f5; border-top: 1px solid #ddd; - .border-radius(0 0 3px 3px); - .secondary-action { - float: right; - a { - line-height: 30px; - &:hover { - text-decoration: underline; - } - } - } } +// For text that needs to appear as an input but should not be an input +.uneditable-input { + background-color: @white; + display: block; + border-color: #eee; + .box-shadow(inset 0 1px 2px rgba(0,0,0,.025)); + cursor: not-allowed; +} + +// Placeholder text gets special styles; can't be bundled together though for some reason +:-moz-placeholder { + color: @grayLight; +} +::-webkit-input-placeholder { + color: @grayLight; +} + + + // HELP TEXT // --------- -.help-inline, -.help-block { - font-size: @basefont - 2; - line-height: @baseline; +.help-text { + margin-top: 5px; + margin-bottom: 0; color: @grayLight; } + .help-inline { + display: inline; padding-left: 5px; *position: relative; /* IE6-7 */ *top: -5px; /* IE6-7 */ @@ -290,7 +285,7 @@ textarea[readonly] { // INLINE FIELDS -// --------- +// ------------- .inline-inputs { color: @gray; @@ -309,8 +304,8 @@ textarea[readonly] { } -// INPUTS GROUPS -// ------------- +// INPUT GROUPS +// ------------ // Allow us to put symbols and text within the input field for a cleaner look .input-prepend, @@ -360,97 +355,49 @@ textarea[readonly] { } -// LISTS OF CONTROLS + + +// HORIZONTAL & VERTICAL FORMS +// --------------------------- + + +// Common properties // ----------------- -// Stacked options for forms (radio buttons or checkboxes) -.inputs-list { - margin: 0 0 5px; - width: 100%; - li { - display: block; - padding: 0; - width: 100%; - } - label { - display: block; - float: none; - width: auto; - padding: 0; - line-height: @baseline; - text-align: left; - white-space: normal; - strong { - color: @gray; - } - small { - font-size: @basefont - 2; - font-weight: normal; - } - } - .inputs-list { - margin-left: 25px; - margin-bottom: 10px; - padding-top: 0; - } - &:first-child { - padding-top: 6px; - } - li + li { - padding-top: 2px; - } - input[type=radio], - input[type=checkbox] { - margin-bottom: 0; - } +// Margin to space out fieldsets +.control-group { + margin-bottom: @baseline; } +// Bold the labels so they stand out +.control-group > label { + font-weight: bold; +} -// STACKED FORMS -// ------------- +// Lists of controls (checkboxes and radios) +.control-list { +} -.form-stacked { - padding-left: 20px; - fieldset { - padding-top: @baseline / 2; - } - legend { - padding-left: 0; - } - label { - display: block; - float: none; - width: auto; - font-weight: bold; - text-align: left; - line-height: 20px; - padding-top: 0; - } - .clearfix { - margin-bottom: @baseline / 2; - div.input { - margin-left: 0; - } - } - .inputs-list { - margin-bottom: 0; - li { - padding-top: 0; - label { - font-weight: normal; - padding-top: 0; - } - } - } - div.clearfix.error { - padding-top: 10px; - padding-bottom: 10px; - padding-left: 10px; - margin-top: 0; - margin-left: -10px; - } - .actions { - margin-left: -20px; - padding-left: 20px; - } -} \ No newline at end of file + +// Horizontal-specific styles +// -------------------------- + +// Float the labels left +.form-horizontal .control-group > label { + float: left; + width: 130px; + padding-top: 5px; + text-align: right; +} +// Move over all input controls and content +.form-horizontal .controls { + margin-left: 150px; +} +// Move the options list down to align with labels +.form-horizontal .control-list { + padding-top: 6px; // has to be padding because margin collaspes +} +// Move over buttons in .form-actions to align with .controls +.form-horizontal .form-actions { + padding-left: 150px; +} diff --git a/lib/mixins.less b/lib/mixins.less index 929618a409..b0ecf03d37 100644 --- a/lib/mixins.less +++ b/lib/mixins.less @@ -6,32 +6,32 @@ // Clearfix for clearing floats like a boss h5bp.com/q .clearfix() { zoom: 1; - &:before, + &:before, &:after { display: table; content: ""; zoom: 1; *display: inline; - } - &:after { + } + &:after { clear: both; - } + } } // Center-align a block level element .center-block() { - display: block; + display: block; margin-left: auto; margin-right: auto; } // Sizing shortcuts .size(@height: 5px, @width: 5px) { - height: @height; - width: @width; + height: @height; + width: @width; } .square(@size: 5px) { - .size(@size, @size); + .size(@size, @size); } // Input placeholder text @@ -112,27 +112,40 @@ // Transitions .transition(@transition) { - -webkit-transition: @transition; - -moz-transition: @transition; - -ms-transition: @transition; - -o-transition: @transition; - transition: @transition; + -webkit-transition: @transition; + -moz-transition: @transition; + -ms-transition: @transition; + -o-transition: @transition; + transition: @transition; +} + +// Transform for scale and rotate +// translate, rotate, scale -- need to finalize +.rotation(@degrees: 5deg) { + -webkit-transform: rotate(@degrees); + -moz-transform: rotate(@degrees); + transform: rotate(@degrees); +} +.scale(@value: 1.5) { + -webkit-transform: scale(@value); + -moz-transform: scale(@value); + transform: scale(@value); } // Background clipping .background-clip(@clip) { - -webkit-background-clip: @clip; - -moz-background-clip: @clip; - background-clip: @clip; + -webkit-background-clip: @clip; + -moz-background-clip: @clip; + background-clip: @clip; } // CSS3 Content Columns .content-columns(@columnCount, @columnGap: 20px) { - -webkit-column-count: @columnCount; - -moz-column-count: @columnCount; + -webkit-column-count: @columnCount; + -moz-column-count: @columnCount; column-count: @columnCount; -webkit-column-gap: @columnGap; - -moz-column-gap: @columnGap; + -moz-column-gap: @columnGap; column-gap: @columnGap; } @@ -140,11 +153,11 @@ #translucent { .background(@color: @white, @alpha: 1) { background-color: hsla(hue(@color), saturation(@color), lightness(@color), @alpha); - } - .border(@color: @white, @alpha: 1) { - border-color: hsla(hue(@color), saturation(@color), lightness(@color), @alpha); - background-clip: padding-box; - } + } + .border(@color: @white, @alpha: 1) { + border-color: hsla(hue(@color), saturation(@color), lightness(@color), @alpha); + background-clip: padding-box; + } } // Gradient Bar Colors for buttons and allerts @@ -157,9 +170,8 @@ // Gradients #gradient { - .horizontal (@startColor: #555, @endColor: #333) { + .horizontal(@startColor: #555, @endColor: #333) { background-color: @endColor; - background-repeat: repeat-x; background-image: -khtml-gradient(linear, left top, right top, from(@startColor), to(@endColor)); // Konqueror background-image: -moz-linear-gradient(left, @startColor, @endColor); // FF 3.6+ background-image: -ms-linear-gradient(left, @startColor, @endColor); // IE10 @@ -167,11 +179,11 @@ background-image: -webkit-linear-gradient(left, @startColor, @endColor); // Safari 5.1+, Chrome 10+ background-image: -o-linear-gradient(left, @startColor, @endColor); // Opera 11.10 background-image: linear-gradient(left, @startColor, @endColor); // Le standard + background-repeat: repeat-x; filter: e(%("progid:DXImageTransform.Microsoft.gradient(startColorstr='%d', endColorstr='%d', GradientType=1)",@startColor,@endColor)); // IE9 and down } - .vertical (@startColor: #555, @endColor: #333) { + .vertical(@startColor: #555, @endColor: #333) { background-color: @endColor; - background-repeat: repeat-x; background-image: -khtml-gradient(linear, left top, left bottom, from(@startColor), to(@endColor)); // Konqueror background-image: -moz-linear-gradient(top, @startColor, @endColor); // FF 3.6+ background-image: -ms-linear-gradient(top, @startColor, @endColor); // IE10 @@ -179,9 +191,10 @@ background-image: -webkit-linear-gradient(top, @startColor, @endColor); // Safari 5.1+, Chrome 10+ background-image: -o-linear-gradient(top, @startColor, @endColor); // Opera 11.10 background-image: linear-gradient(top, @startColor, @endColor); // The standard - filter: e(%("progid:DXImageTransform.Microsoft.gradient(startColorstr='%d', endColorstr='%d', GradientType=0)",@startColor,@endColor)); // IE9 and down + background-repeat: repeat-x; + filter: e(%("progid:DXImageTransform.Microsoft.gradient(startColorstr='%d', endColorstr='%d', GradientType=0)",@startColor,@endColor)); // IE9 and down } - .directional (@startColor: #555, @endColor: #333, @deg: 45deg) { + .directional(@startColor: #555, @endColor: #333, @deg: 45deg) { background-color: @endColor; background-repeat: repeat-x; background-image: -moz-linear-gradient(@deg, @startColor, @endColor); // FF 3.6+ @@ -192,15 +205,24 @@ } .vertical-three-colors(@startColor: #00b3ee, @midColor: #7a43b6, @colorStop: 50%, @endColor: #c3325f) { background-color: @endColor; - background-repeat: no-repeat; background-image: -webkit-gradient(linear, 0 0, 0 100%, from(@startColor), color-stop(@colorStop, @midColor), to(@endColor)); background-image: -webkit-linear-gradient(@startColor, @midColor @colorStop, @endColor); background-image: -moz-linear-gradient(top, @startColor, @midColor @colorStop, @endColor); background-image: -ms-linear-gradient(@startColor, @midColor @colorStop, @endColor); background-image: -o-linear-gradient(@startColor, @midColor @colorStop, @endColor); background-image: linear-gradient(@startColor, @midColor @colorStop, @endColor); + background-repeat: no-repeat; filter: e(%("progid:DXImageTransform.Microsoft.gradient(startColorstr='%d', endColorstr='%d', GradientType=0)",@startColor,@endColor)); // IE9 and down, gets no color-stop at all for proper fallback } + .radial(@centerColor: #555, @outsideColor: #333) { + background-color: @outsideColor; + background-image: -webkit-gradient(radial, center center, 0, center center, 460, from(@centerColor), to(@outsideColor)); + background-image: -webkit-radial-gradient(circle, @centerColor, @outsideColor); + background-image: -moz-radial-gradient(circle, @centerColor, @outsideColor); + background-image: -ms-radial-gradient(circle, @centerColor, @outsideColor); + background-repeat: no-repeat; + // Opera cannot do radial gradients yet + } } // Reset filters for IE @@ -210,8 +232,8 @@ // Opacity .opacity(@opacity: 100) { - filter: e(%("alpha(opacity=%d)", @opacity)); - -khtml-opacity: @opacity / 100; - -moz-opacity: @opacity / 100; - opacity: @opacity / 100; + filter: e(%("alpha(opacity=%d)", @opacity)); + -khtml-opacity: @opacity / 100; + -moz-opacity: @opacity / 100; + opacity: @opacity / 100; } \ No newline at end of file diff --git a/lib/reset.less b/lib/reset.less index 6be76fdba6..983f14f3dc 100644 --- a/lib/reset.less +++ b/lib/reset.less @@ -1,5 +1,5 @@ /* 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). + * 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). * ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */ diff --git a/lib/type.less b/lib/type.less index 077ae9d8f7..88b320459f 100644 --- a/lib/type.less +++ b/lib/type.less @@ -41,15 +41,16 @@ h2 { font-size: 14px; } } -h3, h4, h5, h6 { - line-height: @baseline * 2; -} h3 { + line-height: @baseline * 2; font-size: 18px; small { font-size: 14px; } } +h4, h5, h6 { + line-height: @baseline; +} h4 { font-size: 16px; small { diff --git a/lib/variables.less b/lib/variables.less index 34000d0669..dcb0a8ebf0 100644 --- a/lib/variables.less +++ b/lib/variables.less @@ -9,10 +9,10 @@ // Grays @black: #000; -@grayDark: lighten(@black, 25%); -@gray: lighten(@black, 50%); -@grayLight: lighten(@black, 75%); -@grayLighter: lighten(@black, 90%); +@grayDark: #333; +@gray: #555; +@grayLight: #777; +@grayLighter: #ccc; @white: #fff; // Accent Colors -- GitLab From ecdba931ec4a6eced099026c1aeab503567a4e0a Mon Sep 17 00:00:00 2001 From: Mark Otto <mark.otto@twitter.com> Date: Thu, 29 Sep 2011 01:41:03 -0700 Subject: [PATCH 007/318] remove that test gradient --- docs/index.html | 3 --- 1 file changed, 3 deletions(-) diff --git a/docs/index.html b/docs/index.html index 75a18ea409..d24bb1afda 100644 --- a/docs/index.html +++ b/docs/index.html @@ -1796,9 +1796,6 @@ Lorem ipsum dolar sit amet illo error <a href="#" title="below">ipsum</a> verita </section> - -<div class="radial-test"></div> - </div><!-- /container --> <footer class="footer"> -- GitLab From 4e9849966d0f7b18cd4b8a22f6ef98c6900a2099 Mon Sep 17 00:00:00 2001 From: Mark Otto <mark.otto@twitter.com> Date: Thu, 29 Sep 2011 01:43:14 -0700 Subject: [PATCH 008/318] update topbar dropdown arrow to match link and hover colors --- bootstrap.css | 28 ++++++++++++---------------- bootstrap.min.css | 4 ++-- lib/patterns.less | 7 +++++-- 3 files changed, 19 insertions(+), 20 deletions(-) diff --git a/bootstrap.css b/bootstrap.css index d3bb942cda..33cc011f94 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: Thu Sep 29 01:39:48 PDT 2011 + * Date: Thu Sep 29 01:42:34 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). @@ -951,16 +951,6 @@ textarea[readonly] { .form-horizontal .form-actions { padding-left: 150px; } -.radial-test { - background-color: #009900; - background-image: -webkit-gradient(radial, center center, 0, center center, 460, from(#990000), to(#009900)); - background-image: -webkit-radial-gradient(circle, #990000, #009900); - background-image: -moz-radial-gradient(circle, #990000, #009900); - background-image: -ms-radial-gradient(circle, #990000, #009900); - background-repeat: no-repeat; - width: 100%; - height: 940px; -} /* * Tables.less * Tables for, you guessed it, tabular data @@ -1307,14 +1297,20 @@ table .headerSortUp.purple, table .headerSortDown.purple { text-indent: -99999px; vertical-align: top; margin-top: 8px; - margin-left: 4px; + margin-left: 6px; 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; + filter: alpha(opacity=30); + -khtml-opacity: 0.3; + -moz-opacity: 0.3; + opacity: 0.3; +} +.dropdown:hover .dropdown-toggle:after { + filter: alpha(opacity=100); + -khtml-opacity: 1; + -moz-opacity: 1; + opacity: 1; } .dropdown-menu { background-color: #ffffff; diff --git a/bootstrap.min.css b/bootstrap.min.css index bb31375dd1..ef0f69f1f0 100644 --- a/bootstrap.min.css +++ b/bootstrap.min.css @@ -168,7 +168,6 @@ input[disabled],select[disabled],textarea[disabled],input[readonly],select[reado .form-horizontal .controls{margin-left:150px;} .form-horizontal .control-list{padding-top:6px;} .form-horizontal .form-actions{padding-left:150px;} -.radial-test{background-color:#009900;background-image:-webkit-gradient(radial, center center, 0, center center, 460, from(#990000), to(#009900));background-image:-webkit-radial-gradient(circle, #990000, #009900);background-image:-moz-radial-gradient(circle, #990000, #009900);background-image:-ms-radial-gradient(circle, #990000, #009900);background-repeat:no-repeat;width:100%;height:940px;} table{width:100%;margin-bottom:18px;padding:0;border-collapse:separate;*border-collapse:collapse;font-size:13px;border:1px solid #ddd;-webkit-border-radius:4px;-moz-border-radius:4px;border-radius:4px;}table th,table td{padding:10px 10px 9px;line-height:18px;text-align:left;} table th{padding-top:9px;font-weight:bold;vertical-align:middle;border-bottom:1px solid #ddd;} table td{vertical-align:top;} @@ -219,7 +218,8 @@ table .headerSortUp.purple,table .headerSortDown.purple{background-color:#e2d5f0 .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-toggle:after{width:0;height:0;display:inline-block;content:"↓";text-indent:-99999px;vertical-align:top;margin-top:8px;margin-left:6px;border-left:4px solid transparent;border-right:4px solid transparent;border-top:4px solid #ffffff;filter:alpha(opacity=30);-khtml-opacity:0.3;-moz-opacity:0.3;opacity:0.3;} +.dropdown:hover .dropdown-toggle:after{filter:alpha(opacity=100);-khtml-opacity:1;-moz-opacity:1;opacity:1;} .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:#555555;text-shadow:0 1px 0 #ffffff;}.topbar .dropdown-menu a:hover,.dropdown-menu a:hover{background-color:#dddddd;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);background-repeat:repeat-x;filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#eeeeee', endColorstr='#dddddd', GradientType=0);color:#333333;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);} diff --git a/lib/patterns.less b/lib/patterns.less index eae09a5963..ec40641d39 100644 --- a/lib/patterns.less +++ b/lib/patterns.less @@ -205,11 +205,14 @@ text-indent: -99999px; vertical-align: top; margin-top: 8px; - margin-left: 4px; + margin-left: 6px; border-left: 4px solid transparent; border-right: 4px solid transparent; border-top: 4px solid @white; - .opacity(50); + .opacity(30); +} +.dropdown:hover .dropdown-toggle:after { + .opacity(100); } // The dropdown menu (ul) .dropdown-menu { -- GitLab From 00204a80cf1c45cb9d7d80986756401d304a3944 Mon Sep 17 00:00:00 2001 From: Mark Otto <mark.otto@twitter.com> Date: Thu, 29 Sep 2011 01:44:51 -0700 Subject: [PATCH 009/318] change h4 back to lineheight * 2 --- bootstrap.css | 8 ++++---- bootstrap.min.css | 7 +++---- lib/type.less | 6 +++--- 3 files changed, 10 insertions(+), 11 deletions(-) diff --git a/bootstrap.css b/bootstrap.css index 33cc011f94..acc05c7174 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: Thu Sep 29 01:42:34 PDT 2011 + * Date: Thu Sep 29 01:44:42 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). @@ -441,20 +441,20 @@ h3 { h3 small { font-size: 14px; } -h4, h5, h6 { - line-height: 18px; -} h4 { font-size: 16px; + line-height: 36px; } h4 small { font-size: 12px; } h5 { font-size: 14px; + line-height: 18px; } h6 { font-size: 13px; + line-height: 18px; color: #777777; text-transform: uppercase; } diff --git a/bootstrap.min.css b/bootstrap.min.css index ef0f69f1f0..5be71dd4a4 100644 --- a/bootstrap.min.css +++ b/bootstrap.min.css @@ -81,10 +81,9 @@ h1,h2,h3,h4,h5,h6{font-weight:bold;color:#333333;}h1 small,h2 small,h3 small,h4 h1{margin-bottom:18px;font-size:30px;line-height:36px;}h1 small{font-size:18px;} h2{font-size:24px;line-height:36px;}h2 small{font-size:14px;} h3{line-height:36px;font-size:18px;}h3 small{font-size:14px;} -h4,h5,h6{line-height:18px;} -h4{font-size:16px;}h4 small{font-size:12px;} -h5{font-size:14px;} -h6{font-size:13px;color:#777777;text-transform:uppercase;} +h4{font-size:16px;line-height:36px;}h4 small{font-size:12px;} +h5{font-size:14px;line-height:18px;} +h6{font-size:13px;line-height:18px;color:#777777;text-transform:uppercase;} ul,ol{margin:0 0 18px 25px;} ul ul,ul ol,ol ol,ol ul{margin-bottom:0;} ul{list-style:disc;} diff --git a/lib/type.less b/lib/type.less index 88b320459f..ea1f289e72 100644 --- a/lib/type.less +++ b/lib/type.less @@ -48,20 +48,20 @@ h3 { font-size: 14px; } } -h4, h5, h6 { - line-height: @baseline; -} h4 { font-size: 16px; + line-height: @baseline * 2; small { font-size: 12px; } } h5 { font-size: 14px; + line-height: @baseline; } h6 { font-size: 13px; + line-height: @baseline; color: @grayLight; text-transform: uppercase; } -- GitLab From f54568fa31396556a0df7bf8e2b180885e2b1c3f Mon Sep 17 00:00:00 2001 From: Mark Otto <mark.otto@twitter.com> Date: Thu, 29 Sep 2011 01:47:55 -0700 Subject: [PATCH 010/318] round the corners on the search form inputs like a boss --- bootstrap.css | 7 ++++++- bootstrap.min.css | 1 + lib/forms.less | 9 +++++++++ 3 files changed, 16 insertions(+), 1 deletion(-) diff --git a/bootstrap.css b/bootstrap.css index acc05c7174..6758ea7eb9 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: Thu Sep 29 01:44:42 PDT 2011 + * Date: Thu Sep 29 01:47:26 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). @@ -930,6 +930,11 @@ textarea[readonly] { margin-right: 0; margin-left: -1px; } +.form-search .search-query { + -webkit-border-radius: 14px; + -moz-border-radius: 14px; + border-radius: 14px; +} .control-group { margin-bottom: 18px; } diff --git a/bootstrap.min.css b/bootstrap.min.css index 5be71dd4a4..cf290c8e1e 100644 --- a/bootstrap.min.css +++ b/bootstrap.min.css @@ -161,6 +161,7 @@ input[disabled],select[disabled],textarea[disabled],input[readonly],select[reado .input-prepend .add-on{*margin-top:1px;} .input-append input{float:left;-webkit-border-radius:3px 0 0 3px;-moz-border-radius:3px 0 0 3px;border-radius:3px 0 0 3px;} .input-append .add-on{-webkit-border-radius:0 3px 3px 0;-moz-border-radius:0 3px 3px 0;border-radius:0 3px 3px 0;margin-right:0;margin-left:-1px;} +.form-search .search-query{-webkit-border-radius:14px;-moz-border-radius:14px;border-radius:14px;} .control-group{margin-bottom:18px;} .control-group>label{font-weight:bold;} .form-horizontal .control-group>label{float:left;width:130px;padding-top:5px;text-align:right;} diff --git a/lib/forms.less b/lib/forms.less index fd46fc71e8..56325daa9c 100644 --- a/lib/forms.less +++ b/lib/forms.less @@ -357,6 +357,15 @@ textarea[readonly] { +// SEARCH FORM +// ----------- + +.form-search .search-query { + .border-radius(14px); +} + + + // HORIZONTAL & VERTICAL FORMS // --------------------------- -- GitLab From 0a6d8c30db0600ab8d33e14ead0ff120cd03ac9d Mon Sep 17 00:00:00 2001 From: Mark Otto <mark.otto@twitter.com> Date: Thu, 29 Sep 2011 02:21:02 -0700 Subject: [PATCH 011/318] adding button groups and toolbars like a boss --- bootstrap.css | 58 +++++++++++++++++++++++++++++++- bootstrap.min.css | 8 +++++ docs/index.html | 85 ++++++++++++++++++++++++++++++++++++++++++++--- lib/mixins.less | 17 ++++++++++ lib/patterns.less | 48 ++++++++++++++++++++++++++ 5 files changed, 210 insertions(+), 6 deletions(-) diff --git a/bootstrap.css b/bootstrap.css index 6758ea7eb9..92da336f65 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: Thu Sep 29 01:47:26 PDT 2011 + * Date: Thu Sep 29 02:20:34 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). @@ -1726,6 +1726,62 @@ button.btn::-moz-focus-inner, input[type=submit].btn::-moz-focus-inner { padding: 0; border: 0; } +.btn-toolbar { + zoom: 1; +} +.btn-toolbar:before, .btn-toolbar:after { + display: table; + content: ""; + zoom: 1; + *display: inline; +} +.btn-toolbar:after { + clear: both; +} +.btn-toolbar .btn-group { + float: left; + margin-right: 10px; +} +.btn-group { + zoom: 1; +} +.btn-group:before, .btn-group:after { + display: table; + content: ""; + zoom: 1; + *display: inline; +} +.btn-group:after { + clear: both; +} +.btn-group .btn { + position: relative; + float: left; + margin-left: -1px; + -webkit-border-radius: 0; + -moz-border-radius: 0; + border-radius: 0; +} +.btn-group .btn:first-child { + margin-left: 0; + -webkit-border-top-left-radius: 4px; + -moz-border-radius-topleft: 4px; + border-top-left-radius: 4px; + -webkit-border-bottom-left-radius: 4px; + -moz-border-radius-bottomleft: 4px; + border-bottom-left-radius: 4px; +} +.btn-group .btn:last-child { + -webkit-border-top-right-radius: 4px; + -moz-border-radius-topright: 4px; + border-top-right-radius: 4px; + -webkit-border-bottom-right-radius: 4px; + -moz-border-radius-bottomright: 4px; + border-bottom-right-radius: 4px; +} +.btn-group .btn:hover, .btn-group .btn:focus, .btn-group .btn:active { + z-index: 2; +} .close { float: right; color: #000000; diff --git a/bootstrap.min.css b/bootstrap.min.css index cf290c8e1e..a6052c7666 100644 --- a/bootstrap.min.css +++ b/bootstrap.min.css @@ -260,6 +260,14 @@ footer{margin-top:17px;padding-top:17px;border-top:1px solid #eee;} .btn.small{padding:7px 9px 7px;font-size:11px;} :root .alert-message,:root .btn{border-radius:0 \0;} button.btn::-moz-focus-inner,input[type=submit].btn::-moz-focus-inner{padding:0;border:0;} +.btn-toolbar{zoom:1;}.btn-toolbar:before,.btn-toolbar:after{display:table;content:"";zoom:1;*display:inline;} +.btn-toolbar:after{clear:both;} +.btn-toolbar .btn-group{float:left;margin-right:10px;} +.btn-group{zoom:1;}.btn-group:before,.btn-group:after{display:table;content:"";zoom:1;*display:inline;} +.btn-group:after{clear:both;} +.btn-group .btn{position:relative;float:left;margin-left:-1px;-webkit-border-radius:0;-moz-border-radius:0;border-radius:0;}.btn-group .btn:first-child{margin-left:0;-webkit-border-top-left-radius:4px;-moz-border-radius-topleft:4px;border-top-left-radius:4px;-webkit-border-bottom-left-radius:4px;-moz-border-radius-bottomleft:4px;border-bottom-left-radius:4px;} +.btn-group .btn:last-child{-webkit-border-top-right-radius:4px;-moz-border-radius-topright:4px;border-top-right-radius:4px;-webkit-border-bottom-right-radius:4px;-moz-border-radius-bottomright:4px;border-bottom-right-radius:4px;} +.btn-group .btn:hover,.btn-group .btn:focus,.btn-group .btn:active{z-index:2;} .close{float:right;color:#000000;font-size:20px;font-weight:bold;line-height:13.5px;text-shadow:0 1px 0 #ffffff;filter:alpha(opacity=20);-khtml-opacity:0.2;-moz-opacity:0.2;opacity:0.2;}.close:hover{color:#000000;text-decoration:none;filter:alpha(opacity=40);-khtml-opacity:0.4;-moz-opacity:0.4;opacity:0.4;} .alert-message{position:relative;padding:7px 15px;margin-bottom:18px;color:#333333;background-color:#eedc94;background-image:-khtml-gradient(linear, left top, left bottom, from(#fceec1), to(#eedc94));background-image:-moz-linear-gradient(top, #fceec1, #eedc94);background-image:-ms-linear-gradient(top, #fceec1, #eedc94);background-image:-webkit-gradient(linear, left top, left bottom, color-stop(0%, #fceec1), color-stop(100%, #eedc94));background-image:-webkit-linear-gradient(top, #fceec1, #eedc94);background-image:-o-linear-gradient(top, #fceec1, #eedc94);background-image:linear-gradient(top, #fceec1, #eedc94);background-repeat:repeat-x;filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#fceec1', endColorstr='#eedc94', GradientType=0);text-shadow:0 -1px 0 rgba(0, 0, 0, 0.25);border-color:#eedc94 #eedc94 #e4c652;border-color:rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);text-shadow:0 1px 0 rgba(255, 255, 255, 0.5);border-width:1px;border-style:solid;-webkit-border-radius:4px;-moz-border-radius:4px;border-radius:4px;-webkit-box-shadow:inset 0 1px 0 rgba(255, 255, 255, 0.25);-moz-box-shadow:inset 0 1px 0 rgba(255, 255, 255, 0.25);box-shadow:inset 0 1px 0 rgba(255, 255, 255, 0.25);}.alert-message .close{*margin-top:3px;} .alert-message h5{line-height:18px;} diff --git a/docs/index.html b/docs/index.html index d24bb1afda..137144991f 100644 --- a/docs/index.html +++ b/docs/index.html @@ -898,7 +898,7 @@ <div class="span-one-third"> <h3></h3> </div> - </div> + </div><!-- /row --> <div class="row"> <div class="span4"> <h2>Search form</h2> @@ -911,7 +911,7 @@ </form> </div><!--/well--> </div> - </div> + </div><!-- /row --> <div class="row"> <div class="span4"> <h2>Inline form</h2> @@ -928,7 +928,7 @@ </form> </div><!--/well--> </div> - </div> + </div><!-- /row --> <div class="row"> <div class="span4"> <h2>Horizontal form</h2> @@ -1032,7 +1032,7 @@ </fieldset> </form> </div> - </div> + </div><!-- /row --> <div class="row"> <div class="span4"> <h2>Vertical form</h2> @@ -1075,7 +1075,82 @@ </fieldset> </form> </div> - </div> + </div><!-- /row --> + + <div class="row"> + <div class="span4"> + <h2>Buttons</h2> + <p>As a convention, buttons are used for actions while links are used for objects. For instance, "Download" could be a button and "recent activity" could be a link.</p> + <p>All buttons default to a light gray style, but a number of functional classes can be applied for different color styles. These classes include a blue <code>.primary</code> class, a light-blue <code>.info</code> class, a green <code>.success</code> class, and a red <code>.danger</code> class.</p> + </div> + <div class="span12"> + <h3>Example buttons</h3> + <p>Button styles can be applied to anything with the <code>.btn</code> applied. Typically you’ll want to apply these to only <code><a></code>, <code><button></code>, and select <code><input></code> elements. Here’s how it looks:</p> + <div class="well" style="padding: 14px 19px;"> + <button class="btn primary">Primary</button> <button class="btn">Default</button> <button class="btn info">Info</button> <button class="btn success">Success</button> <button class="btn danger">Danger</button> + </div> + <h3>Alternate sizes</h3> + <p>Fancy larger or smaller buttons? Have at it!</p> + <div class="well"> + <a href="#" class="btn large primary">Primary action</a> + <a href="#" class="btn large">Action</a> + </div> + <div class="well" style="padding: 16px 19px;"> + <a href="#" class="btn small primary">Primary action</a> + <a href="#" class="btn small">Action</a> + </div> + <h3>Disabled state</h3> + <p>For buttons that are not active or are disabled by the app for one reason or another, use the disabled state. That’s <code>.disabled</code> for links and <code>:disabled</code> for <code><button></code> elements.</p> + <h4>Links</h4> + <div class="well"> + <a href="#" class="btn large primary disabled">Primary action</a> + <a href="#" class="btn large disabled">Action</a> + </div> + <h4>Buttons</h4> + <div class="well"> + <button class="btn large primary disabled" disabled="disabled">Primary action</button> <button class="btn large" disabled>Action</button> + </div> + </div> + </div><!-- /row --> + + <div class="row"> + <div class="span4"> + <h2>Button groups</h2> + </div> + <div class="span12"> + <h3>Example</h3> + <div class="well"> + <div class="btn-group"> + <a class="btn" href="#">Left</a> + <a class="btn" href="#">Middle</a> + <a class="btn" href="#">Right</a> + </div> + </div> + <div class="well"> + <div class="btn-toolbar"> + <div class="btn-group"> + <a class="btn" href="#">1</a> + <a class="btn" href="#">2</a> + <a class="btn" href="#">3</a> + <a class="btn" href="#">4</a> + <a class="btn" href="#">5</a> + </div> + <div class="btn-group"> + <a class="btn" href="#">6</a> + <a class="btn" href="#">7</a> + <a class="btn" href="#">8</a> + </div> + <div class="btn-group"> + <a class="btn" href="#">9</a> + </div> + <div class="btn-group"> + <a class="btn" href="#">10</a> + </div> + </div> + </div> + </div> + </div><!-- /row --> + </section> diff --git a/lib/mixins.less b/lib/mixins.less index b0ecf03d37..131d142783 100644 --- a/lib/mixins.less +++ b/lib/mixins.less @@ -102,6 +102,23 @@ -moz-border-radius: @radius; border-radius: @radius; } +.border-radius-custom(@topLeft, @topRight, @bottomRight, @bottomLeft) { + -webkit-border-top-left-radius: @topLeft; + -moz-border-radius-topleft: @topLeft; + border-top-left-radius: @topLeft; + -webkit-border-top-right-radius: @topRight; + -moz-border-radius-topright: @topRight; + border-top-right-radius: @topRight; + -webkit-border-bottom-right-radius: @bottomRight; + -moz-border-radius-bottomright: @bottomRight; + border-bottom-right-radius: @bottomRight; + -webkit-border-bottom-left-radius: @bottomLeft; + -moz-border-radius-bottomleft: @bottomLeft; + border-bottom-left-radius: @bottomLeft; + -webkit-background-clip: padding-box; + -moz-background-clip: padding; + background-clip: padding-box; +} // Drop shadows .box-shadow(@shadow: 0 1px 3px rgba(0,0,0,.25)) { diff --git a/lib/patterns.less b/lib/patterns.less index ec40641d39..8add82c166 100644 --- a/lib/patterns.less +++ b/lib/patterns.less @@ -565,6 +565,54 @@ input[type=submit].btn { } } +// Button groups +// ------------- + +// Group multiple button groups together for a toolbar +.btn-toolbar { + .clearfix(); + .btn-group { + float: left; + margin-right: 10px; + } +} + +// Clear the float +.btn-group { + .clearfix(); +} +// Float them, remove border radius, then re-add to first and last elements +.btn-group .btn { + position: relative; + float: left; + margin-left: -1px; + .border-radius(0); + &:first-child { + margin-left: 0; + -webkit-border-top-left-radius: 4px; + -moz-border-radius-topleft: 4px; + border-top-left-radius: 4px; + -webkit-border-bottom-left-radius: 4px; + -moz-border-radius-bottomleft: 4px; + border-bottom-left-radius: 4px; + } + &:last-child { + -webkit-border-top-right-radius: 4px; + -moz-border-radius-topright: 4px; + border-top-right-radius: 4px; + -webkit-border-bottom-right-radius: 4px; + -moz-border-radius-bottomright: 4px; + border-bottom-right-radius: 4px; + } +} +// On hover/focus/active, bring the proper btn to front +.btn-group .btn:hover, +.btn-group .btn:focus, +.btn-group .btn:active { + z-index: 2; +} + + // CLOSE ICONS // ----------- -- GitLab From 96dd7a2903aa5213ddb364b385660e26396dc670 Mon Sep 17 00:00:00 2001 From: Mark Otto <mark.otto@twitter.com> Date: Tue, 4 Oct 2011 00:20:38 -0700 Subject: [PATCH 012/318] update variables to inlude @baseFontSize, @baseFontFamily, @baseLineHeight for easier customization; added placeholder for @primaryButtonColor, but didn't implement --- bootstrap.css | 69 ++++++++++++++++++++++---------------------- bootstrap.min.css | 60 +++++++++++++++++++------------------- lib/forms.less | 30 +++++++++---------- lib/mixins.less | 10 +++---- lib/patterns.less | 34 +++++++++++----------- lib/scaffolding.less | 4 ++- lib/tables.less | 6 ++-- lib/type.less | 50 +++++++++++++++++--------------- lib/variables.less | 49 +++++++++++++++++++------------ 9 files changed, 164 insertions(+), 148 deletions(-) diff --git a/bootstrap.css b/bootstrap.css index 92da336f65..75928c7490 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: Thu Sep 29 02:20:34 PDT 2011 + * Date: Tue Oct 4 00:16:55 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). @@ -187,9 +187,8 @@ body { margin: 0; font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; font-size: 13px; - font-weight: normal; line-height: 18px; - color: #333333; + color: #404040; } .container { width: 940px; @@ -393,14 +392,14 @@ a:hover { * Headings, body text, lists, code, and more for a versatile and durable typography system * ---------------------------------------------------------------------------------------- */ p { + font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; font-size: 13px; - font-weight: normal; line-height: 18px; margin-bottom: 9px; } p small { font-size: 11px; - color: #777777; + color: #bfbfbf; } h1, h2, @@ -409,7 +408,7 @@ h4, h5, h6 { font-weight: bold; - color: #333333; + color: #404040; } h1 small, h2 small, @@ -417,7 +416,7 @@ h3 small, h4 small, h5 small, h6 small { - color: #777777; + color: #bfbfbf; } h1 { margin-bottom: 18px; @@ -455,7 +454,7 @@ h5 { h6 { font-size: 13px; line-height: 18px; - color: #777777; + color: #bfbfbf; text-transform: uppercase; } ul, ol { @@ -475,7 +474,7 @@ ol { } li { line-height: 18px; - color: #555555; + color: #808080; } ul.unstyled { list-style: none; @@ -508,7 +507,7 @@ em { line-height: inherit; } .muted { - color: #777777; + color: #bfbfbf; } blockquote { margin-bottom: 18px; @@ -526,7 +525,7 @@ blockquote small { font-size: 12px; font-weight: 300; line-height: 18px; - color: #777777; + color: #bfbfbf; } blockquote small:before { content: '\2014 \00A0'; @@ -538,7 +537,7 @@ address { } code, pre { padding: 0 3px 2px; - font-family: Monaco, Andale Mono, Courier New, monospace; + font-family: Menlo, Monaco, Andale Mono, Courier New, monospace; font-size: 12px; -webkit-border-radius: 3px; -moz-border-radius: 3px; @@ -577,7 +576,7 @@ legend { margin-bottom: 27px; font-size: 19.5px; line-height: 36px; - color: #333333; + color: #404040; border-bottom: 1px solid #eee; } label, @@ -592,7 +591,7 @@ textarea { label { display: block; margin-bottom: 5px; - color: #333333; + color: #404040; } input[type=checkbox], input[type=radio] { cursor: pointer; @@ -607,7 +606,7 @@ select, padding: 4px; font-size: 13px; line-height: 18px; - color: #555555; + color: #808080; border: 1px solid #ccc; -webkit-border-radius: 3px; -moz-border-radius: 3px; @@ -843,15 +842,15 @@ textarea[readonly] { cursor: not-allowed; } :-moz-placeholder { - color: #777777; + color: #bfbfbf; } ::-webkit-input-placeholder { - color: #777777; + color: #bfbfbf; } .help-text { margin-top: 5px; margin-bottom: 0; - color: #777777; + color: #bfbfbf; } .help-inline { display: inline; @@ -868,7 +867,7 @@ textarea[readonly] { max-width: 600px; } .inline-inputs { - color: #555555; + color: #808080; } .inline-inputs span, .inline-inputs input { display: inline-block; @@ -901,7 +900,7 @@ textarea[readonly] { margin-right: -1px; font-weight: normal; line-height: 18px; - color: #777777; + color: #bfbfbf; text-align: center; text-shadow: 0 1px 0 #ffffff; -webkit-border-radius: 3px 0 0 3px; @@ -1115,7 +1114,7 @@ table .headerSortUp.purple, table .headerSortDown.purple { overflow: visible; } .topbar a { - color: #777777; + color: #bfbfbf; text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25); } .topbar .brand a:hover, .topbar ul .active > a { @@ -1178,20 +1177,20 @@ table .headerSortUp.purple, table .headerSortDown.purple { transition: none; } .topbar input:-moz-placeholder { - color: #cccccc; + color: #e6e6e6; } .topbar input::-webkit-input-placeholder { - color: #cccccc; + color: #e6e6e6; } .topbar input:hover { - background-color: #777777; + 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: #333333; + color: #404040; text-shadow: 0 1px 0 #ffffff; border: 0; padding: 5px 10px; @@ -1363,7 +1362,7 @@ table .headerSortUp.purple, table .headerSortDown.purple { clear: both; font-weight: normal; line-height: 18px; - color: #555555; + color: #808080; text-shadow: 0 1px 0 #ffffff; } .topbar .dropdown-menu a:hover, .dropdown-menu a:hover { @@ -1377,7 +1376,7 @@ table .headerSortUp.purple, table .headerSortDown.purple { background-image: linear-gradient(top, #eeeeee, #dddddd); background-repeat: repeat-x; filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#eeeeee', endColorstr='#dddddd', GradientType=0); - color: #333333; + 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); @@ -1439,7 +1438,7 @@ table .headerSortUp.purple, table .headerSortDown.purple { border-color: #eee #eee #ddd; } .tabs > li.active > a { - color: #555555; + color: #808080; background-color: #ffffff; border: 1px solid #ddd; border-bottom-color: transparent; @@ -1518,10 +1517,10 @@ table .headerSortUp.purple, table .headerSortDown.purple { } .breadcrumb .divider { padding: 0 5px; - color: #777777; + color: #bfbfbf; } .breadcrumb .active a { - color: #333333; + color: #404040; } .hero-unit { background-color: #f5f5f5; @@ -1806,7 +1805,7 @@ button.btn::-moz-focus-inner, input[type=submit].btn::-moz-focus-inner { position: relative; padding: 7px 15px; margin-bottom: 18px; - color: #333333; + color: #404040; background-color: #eedc94; background-image: -khtml-gradient(linear, left top, left bottom, from(#fceec1), to(#eedc94)); background-image: -moz-linear-gradient(top, #fceec1, #eedc94); @@ -1868,13 +1867,13 @@ button.btn::-moz-focus-inner, input[type=submit].btn::-moz-focus-inner { margin-bottom: 0; } .alert-message.block-message li { - color: #333333; + color: #404040; } .alert-message.block-message .alert-actions { margin-top: 5px; } .alert-message.block-message.error, .alert-message.block-message.success, .alert-message.block-message.info { - color: #333333; + color: #404040; text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5); } .alert-message.block-message.error { @@ -1925,7 +1924,7 @@ button.btn::-moz-focus-inner, input[type=submit].btn::-moz-focus-inner { } .pagination .disabled a, .pagination .disabled a:hover { background-color: transparent; - color: #777777; + color: #bfbfbf; } .pagination .next a { border: 0; @@ -2195,7 +2194,7 @@ button.btn::-moz-focus-inner, input[type=submit].btn::-moz-focus-inner { } .label { padding: 1px 3px 2px; - background-color: #777777; + background-color: #bfbfbf; font-size: 9.75px; font-weight: bold; color: #ffffff; diff --git a/bootstrap.min.css b/bootstrap.min.css index a6052c7666..4ba50158e6 100644 --- a/bootstrap.min.css +++ b/bootstrap.min.css @@ -21,7 +21,7 @@ input[type="search"]{-webkit-appearance:textfield;-webkit-box-sizing:content-box input[type="search"]::-webkit-search-decoration{-webkit-appearance:none;} textarea{overflow:auto;vertical-align:top;} html,body{background-color:#ffffff;} -body{margin:0;font-family:"Helvetica Neue",Helvetica,Arial,sans-serif;font-size:13px;font-weight:normal;line-height:18px;color:#333333;} +body{margin:0;font-family:"Helvetica Neue",Helvetica,Arial,sans-serif;font-size:13px;line-height:18px;color:#404040;} .container{width:940px;margin-left:auto;margin-right:auto;zoom:1;}.container:before,.container:after{display:table;content:"";zoom:1;*display:inline;} .container:after{clear:both;} .container-fluid{position:relative;min-width:940px;padding-left:20px;padding-right:20px;zoom:1;}.container-fluid:before,.container-fluid:after{display:table;content:"";zoom:1;*display:inline;} @@ -76,19 +76,19 @@ a{color:#0069d6;text-decoration:none;line-height:inherit;font-weight:inherit;}a: .span-two-thirds{width:620px;} .offset-one-third{margin-left:340px;} .offset-two-thirds{margin-left:660px;} -p{font-size:13px;font-weight:normal;line-height:18px;margin-bottom:9px;}p small{font-size:11px;color:#777777;} -h1,h2,h3,h4,h5,h6{font-weight:bold;color:#333333;}h1 small,h2 small,h3 small,h4 small,h5 small,h6 small{color:#777777;} +p{font-family:"Helvetica Neue",Helvetica,Arial,sans-serif;font-size:13px;line-height:18px;margin-bottom:9px;}p small{font-size:11px;color:#bfbfbf;} +h1,h2,h3,h4,h5,h6{font-weight:bold;color:#404040;}h1 small,h2 small,h3 small,h4 small,h5 small,h6 small{color:#bfbfbf;} h1{margin-bottom:18px;font-size:30px;line-height:36px;}h1 small{font-size:18px;} h2{font-size:24px;line-height:36px;}h2 small{font-size:14px;} h3{line-height:36px;font-size:18px;}h3 small{font-size:14px;} h4{font-size:16px;line-height:36px;}h4 small{font-size:12px;} h5{font-size:14px;line-height:18px;} -h6{font-size:13px;line-height:18px;color:#777777;text-transform:uppercase;} +h6{font-size:13px;line-height:18px;color:#bfbfbf;text-transform:uppercase;} ul,ol{margin:0 0 18px 25px;} ul ul,ul ol,ol ol,ol ul{margin-bottom:0;} ul{list-style:disc;} ol{list-style:decimal;} -li{line-height:18px;color:#555555;} +li{line-height:18px;color:#808080;} ul.unstyled{list-style:none;margin-left:0;} dl{margin-bottom:18px;}dl dt,dl dd{line-height:18px;} dl dt{font-weight:bold;} @@ -96,19 +96,19 @@ dl dd{margin-left:9px;} hr{margin:20px 0 19px;border:0;border-bottom:1px solid #eee;} strong{font-style:inherit;font-weight:bold;} em{font-style:italic;font-weight:inherit;line-height:inherit;} -.muted{color:#777777;} +.muted{color:#bfbfbf;} blockquote{margin-bottom:18px;border-left:5px solid #eee;padding-left:15px;}blockquote p{font-size:14px;font-weight:300;line-height:18px;margin-bottom:0;} -blockquote small{display:block;font-size:12px;font-weight:300;line-height:18px;color:#777777;}blockquote small:before{content:'\2014 \00A0';} +blockquote small{display:block;font-size:12px;font-weight:300;line-height:18px;color:#bfbfbf;}blockquote small:before{content:'\2014 \00A0';} address{display:block;line-height:18px;margin-bottom:18px;} -code,pre{padding:0 3px 2px;font-family:Monaco, Andale Mono, Courier New, monospace;font-size:12px;-webkit-border-radius:3px;-moz-border-radius:3px;border-radius:3px;} +code,pre{padding:0 3px 2px;font-family:Menlo, Monaco, Andale Mono, Courier New, monospace;font-size:12px;-webkit-border-radius:3px;-moz-border-radius:3px;border-radius:3px;} code{background-color:#fee9cc;color:rgba(0, 0, 0, 0.75);padding:1px 3px;} pre{background-color:#f5f5f5;display:block;padding:8.5px;margin:0 0 18px;line-height:18px;font-size:12px;border:1px solid #ccc;border:1px solid rgba(0, 0, 0, 0.15);-webkit-border-radius:3px;-moz-border-radius:3px;border-radius:3px;white-space:pre;white-space:pre-wrap;word-wrap:break-word;} form{margin-bottom:18px;} -legend{display:block;width:100%;margin-bottom:27px;font-size:19.5px;line-height:36px;color:#333333;border-bottom:1px solid #eee;} +legend{display:block;width:100%;margin-bottom:27px;font-size:19.5px;line-height:36px;color:#404040;border-bottom:1px solid #eee;} label,input,select,textarea{font-family:"Helvetica Neue",Helvetica,Arial,sans-serif;font-size:13px;font-weight:normal;line-height:18px;} -label{display:block;margin-bottom:5px;color:#333333;} +label{display:block;margin-bottom:5px;color:#404040;} input[type=checkbox],input[type=radio]{cursor:pointer;} -input,textarea,select,.uneditable-input{display:inline-block;width:210px;height:18px;padding:4px;font-size:13px;line-height:18px;color:#555555;border:1px solid #ccc;-webkit-border-radius:3px;-moz-border-radius:3px;border-radius:3px;} +input,textarea,select,.uneditable-input{display:inline-block;width:210px;height:18px;padding:4px;font-size:13px;line-height:18px;color:#808080;border:1px solid #ccc;-webkit-border-radius:3px;-moz-border-radius:3px;border-radius:3px;} input[type=checkbox],input[type=radio]{width:auto;height:auto;padding:0;margin:3px 0;*margin-top:0;line-height:normal;border:none;} input[type=file]{background-color:#ffffff;padding:initial;border:initial;line-height:initial;-webkit-box-shadow:none;-moz-box-shadow:none;box-shadow:none;} input[type=button],input[type=reset],input[type=submit]{width:auto;height:auto;} @@ -146,17 +146,17 @@ input[disabled],select[disabled],textarea[disabled],input[readonly],select[reado .has-error .input-prepend span.add-on,.has-error .input-append span.add-on{background:#f4c8c5;border-color:#c87872;color:#b9554d;} .form-actions{padding:17px 20px 18px;margin-top:18px;margin-bottom:18px;background-color:#f5f5f5;border-top:1px solid #ddd;} .uneditable-input{background-color:#ffffff;display:block;border-color:#eee;-webkit-box-shadow:inset 0 1px 2px rgba(0, 0, 0, 0.025);-moz-box-shadow:inset 0 1px 2px rgba(0, 0, 0, 0.025);box-shadow:inset 0 1px 2px rgba(0, 0, 0, 0.025);cursor:not-allowed;} -:-moz-placeholder{color:#777777;} -::-webkit-input-placeholder{color:#777777;} -.help-text{margin-top:5px;margin-bottom:0;color:#777777;} +:-moz-placeholder{color:#bfbfbf;} +::-webkit-input-placeholder{color:#bfbfbf;} +.help-text{margin-top:5px;margin-bottom:0;color:#bfbfbf;} .help-inline{display:inline;padding-left:5px;*position:relative;*top:-5px;} .help-block{display:block;max-width:600px;} -.inline-inputs{color:#555555;}.inline-inputs span,.inline-inputs input{display:inline-block;} +.inline-inputs{color:#808080;}.inline-inputs span,.inline-inputs input{display:inline-block;} .inline-inputs input.mini{width:60px;} .inline-inputs input.small{width:90px;} .inline-inputs span{padding:0 2px 0 1px;} .input-prepend input,.input-append input{-webkit-border-radius:0 3px 3px 0;-moz-border-radius:0 3px 3px 0;border-radius:0 3px 3px 0;} -.input-prepend .add-on,.input-append .add-on{position:relative;background:#f5f5f5;border:1px solid #ccc;z-index:2;float:left;display:block;width:auto;min-width:16px;height:18px;padding:4px 4px 4px 5px;margin-right:-1px;font-weight:normal;line-height:18px;color:#777777;text-align:center;text-shadow:0 1px 0 #ffffff;-webkit-border-radius:3px 0 0 3px;-moz-border-radius:3px 0 0 3px;border-radius:3px 0 0 3px;} +.input-prepend .add-on,.input-append .add-on{position:relative;background:#f5f5f5;border:1px solid #ccc;z-index:2;float:left;display:block;width:auto;min-width:16px;height:18px;padding:4px 4px 4px 5px;margin-right:-1px;font-weight:normal;line-height:18px;color:#bfbfbf;text-align:center;text-shadow:0 1px 0 #ffffff;-webkit-border-radius:3px 0 0 3px;-moz-border-radius:3px 0 0 3px;border-radius:3px 0 0 3px;} .input-prepend .active,.input-append .active{background:#a9dba9;border-color:#46a546;} .input-prepend .add-on{*margin-top:1px;} .input-append input{float:left;-webkit-border-radius:3px 0 0 3px;-moz-border-radius:3px 0 0 3px;border-radius:3px 0 0 3px;} @@ -196,16 +196,16 @@ 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 a{color:#777777;text-shadow:0 -1px 0 rgba(0, 0, 0, 0.25);} +.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 .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;} -.topbar input{background-color:#444;background-color:rgba(255, 255, 255, 0.3);font-family:"Helvetica Neue",Helvetica,Arial,sans-serif;font-size:normal;font-weight:13px;line-height:1;padding:4px 9px;color:#ffffff;color:rgba(255, 255, 255, 0.75);border:1px solid #111;-webkit-border-radius:4px;-moz-border-radius:4px;border-radius:4px;-webkit-box-shadow:inset 0 1px 2px rgba(0, 0, 0, 0.1),0 1px 0px rgba(255, 255, 255, 0.25);-moz-box-shadow:inset 0 1px 2px rgba(0, 0, 0, 0.1),0 1px 0px rgba(255, 255, 255, 0.25);box-shadow:inset 0 1px 2px rgba(0, 0, 0, 0.1),0 1px 0px rgba(255, 255, 255, 0.25);-webkit-transition:none;-moz-transition:none;-ms-transition:none;-o-transition:none;transition:none;}.topbar input:-moz-placeholder{color:#cccccc;} -.topbar input::-webkit-input-placeholder{color:#cccccc;} -.topbar input:hover{background-color:#777777;background-color:rgba(255, 255, 255, 0.5);color:#ffffff;} -.topbar input:focus,.topbar input.focused{outline:0;background-color:#ffffff;color:#333333;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 input{background-color:#444;background-color:rgba(255, 255, 255, 0.3);font-family:"Helvetica Neue",Helvetica,Arial,sans-serif;font-size:normal;font-weight:13px;line-height:1;padding:4px 9px;color:#ffffff;color:rgba(255, 255, 255, 0.75);border:1px solid #111;-webkit-border-radius:4px;-moz-border-radius:4px;border-radius:4px;-webkit-box-shadow:inset 0 1px 2px rgba(0, 0, 0, 0.1),0 1px 0px rgba(255, 255, 255, 0.25);-moz-box-shadow:inset 0 1px 2px rgba(0, 0, 0, 0.1),0 1px 0px rgba(255, 255, 255, 0.25);box-shadow:inset 0 1px 2px rgba(0, 0, 0, 0.1),0 1px 0px rgba(255, 255, 255, 0.25);-webkit-transition:none;-moz-transition:none;-ms-transition:none;-o-transition:none;transition:none;}.topbar input:-moz-placeholder{color:#e6e6e6;} +.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{background-color:#222;background-color:#222222;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);background-repeat:repeat-x;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;} @@ -222,14 +222,14 @@ table .headerSortUp.purple,table .headerSortDown.purple{background-color:#e2d5f0 .dropdown:hover .dropdown-toggle:after{filter:alpha(opacity=100);-khtml-opacity:1;-moz-opacity:1;opacity:1;} .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:#555555;text-shadow:0 1px 0 #ffffff;}.topbar .dropdown-menu a:hover,.dropdown-menu a:hover{background-color:#dddddd;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);background-repeat:repeat-x;filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#eeeeee', endColorstr='#dddddd', GradientType=0);color:#333333;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);} +.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-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);background-repeat:repeat-x;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);} .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:#555555;background-color:#ffffff;border:1px solid #ddd;border-bottom-color:transparent;} +.tabs>li.active>a{color:#808080;background-color:#ffffff;border:1px solid #ddd;border-bottom-color:transparent;} .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;} @@ -240,8 +240,8 @@ table .headerSortUp.purple,table .headerSortDown.purple{background-color:#e2d5f0 .tab-content>*,.pill-content>*{display:none;} .tab-content>.active,.pill-content>.active{display:block;} .breadcrumb{margin:0 0 18px;padding:7px 14px;background-color:#f5f5f5;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);background-repeat:repeat-x;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:#777777;} -.breadcrumb .active a{color:#333333;} +.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;} @@ -269,16 +269,16 @@ button.btn::-moz-focus-inner,input[type=submit].btn::-moz-focus-inner{padding:0; .btn-group .btn:last-child{-webkit-border-top-right-radius:4px;-moz-border-radius-topright:4px;border-top-right-radius:4px;-webkit-border-bottom-right-radius:4px;-moz-border-radius-bottomright:4px;border-bottom-right-radius:4px;} .btn-group .btn:hover,.btn-group .btn:focus,.btn-group .btn:active{z-index:2;} .close{float:right;color:#000000;font-size:20px;font-weight:bold;line-height:13.5px;text-shadow:0 1px 0 #ffffff;filter:alpha(opacity=20);-khtml-opacity:0.2;-moz-opacity:0.2;opacity:0.2;}.close:hover{color:#000000;text-decoration:none;filter:alpha(opacity=40);-khtml-opacity:0.4;-moz-opacity:0.4;opacity:0.4;} -.alert-message{position:relative;padding:7px 15px;margin-bottom:18px;color:#333333;background-color:#eedc94;background-image:-khtml-gradient(linear, left top, left bottom, from(#fceec1), to(#eedc94));background-image:-moz-linear-gradient(top, #fceec1, #eedc94);background-image:-ms-linear-gradient(top, #fceec1, #eedc94);background-image:-webkit-gradient(linear, left top, left bottom, color-stop(0%, #fceec1), color-stop(100%, #eedc94));background-image:-webkit-linear-gradient(top, #fceec1, #eedc94);background-image:-o-linear-gradient(top, #fceec1, #eedc94);background-image:linear-gradient(top, #fceec1, #eedc94);background-repeat:repeat-x;filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#fceec1', endColorstr='#eedc94', GradientType=0);text-shadow:0 -1px 0 rgba(0, 0, 0, 0.25);border-color:#eedc94 #eedc94 #e4c652;border-color:rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);text-shadow:0 1px 0 rgba(255, 255, 255, 0.5);border-width:1px;border-style:solid;-webkit-border-radius:4px;-moz-border-radius:4px;border-radius:4px;-webkit-box-shadow:inset 0 1px 0 rgba(255, 255, 255, 0.25);-moz-box-shadow:inset 0 1px 0 rgba(255, 255, 255, 0.25);box-shadow:inset 0 1px 0 rgba(255, 255, 255, 0.25);}.alert-message .close{*margin-top:3px;} +.alert-message{position:relative;padding:7px 15px;margin-bottom:18px;color:#404040;background-color:#eedc94;background-image:-khtml-gradient(linear, left top, left bottom, from(#fceec1), to(#eedc94));background-image:-moz-linear-gradient(top, #fceec1, #eedc94);background-image:-ms-linear-gradient(top, #fceec1, #eedc94);background-image:-webkit-gradient(linear, left top, left bottom, color-stop(0%, #fceec1), color-stop(100%, #eedc94));background-image:-webkit-linear-gradient(top, #fceec1, #eedc94);background-image:-o-linear-gradient(top, #fceec1, #eedc94);background-image:linear-gradient(top, #fceec1, #eedc94);background-repeat:repeat-x;filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#fceec1', endColorstr='#eedc94', GradientType=0);text-shadow:0 -1px 0 rgba(0, 0, 0, 0.25);border-color:#eedc94 #eedc94 #e4c652;border-color:rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);text-shadow:0 1px 0 rgba(255, 255, 255, 0.5);border-width:1px;border-style:solid;-webkit-border-radius:4px;-moz-border-radius:4px;border-radius:4px;-webkit-box-shadow:inset 0 1px 0 rgba(255, 255, 255, 0.25);-moz-box-shadow:inset 0 1px 0 rgba(255, 255, 255, 0.25);box-shadow:inset 0 1px 0 rgba(255, 255, 255, 0.25);}.alert-message .close{*margin-top:3px;} .alert-message h5{line-height:18px;} .alert-message p{margin-bottom:0;} .alert-message div{margin-top:5px;margin-bottom:2px;line-height:28px;} .alert-message .btn{-webkit-box-shadow:0 1px 0 rgba(255, 255, 255, 0.25);-moz-box-shadow:0 1px 0 rgba(255, 255, 255, 0.25);box-shadow:0 1px 0 rgba(255, 255, 255, 0.25);} .alert-message.block-message{background-image:none;background-color:#fdf5d9;filter:progid:DXImageTransform.Microsoft.gradient(enabled = false);padding:14px;border-color:#fceec1;-webkit-box-shadow:none;-moz-box-shadow:none;box-shadow:none;}.alert-message.block-message ul,.alert-message.block-message p{margin-right:30px;} .alert-message.block-message ul{margin-bottom:0;} -.alert-message.block-message li{color:#333333;} +.alert-message.block-message li{color:#404040;} .alert-message.block-message .alert-actions{margin-top:5px;} -.alert-message.block-message.error,.alert-message.block-message.success,.alert-message.block-message.info{color:#333333;text-shadow:0 1px 0 rgba(255, 255, 255, 0.5);} +.alert-message.block-message.error,.alert-message.block-message.success,.alert-message.block-message.info{color:#404040;text-shadow:0 1px 0 rgba(255, 255, 255, 0.5);} .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;} @@ -286,7 +286,7 @@ button.btn::-moz-focus-inner,input[type=submit].btn::-moz-focus-inner{padding:0; .pagination li{display:inline;} .pagination 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 a:hover,.pagination .active a{background-color:#c7eefe;} -.pagination .disabled a,.pagination .disabled a:hover{background-color:transparent;color:#777777;} +.pagination .disabled a,.pagination .disabled a:hover{background-color:transparent;color:#bfbfbf;} .pagination .next a{border:0;} .well{background-color:#f5f5f5;margin-bottom:20px;padding:19px;min-height:20px;border:1px solid #eee;border:1px solid rgba(0, 0, 0, 0.05);-webkit-border-radius:4px;-moz-border-radius:4px;border-radius:4px;-webkit-box-shadow:inset 0 1px 1px rgba(0, 0, 0, 0.05);-moz-box-shadow:inset 0 1px 1px rgba(0, 0, 0, 0.05);box-shadow:inset 0 1px 1px rgba(0, 0, 0, 0.05);}.well blockquote{border-color:#ddd;border-color:rgba(0, 0, 0, 0.15);} .modal-backdrop{background-color:#000000;position:fixed;top:0;left:0;right:0;bottom:0;z-index:10000;}.modal-backdrop.fade{opacity:0;} @@ -315,7 +315,7 @@ button.btn::-moz-focus-inner,input[type=submit].btn::-moz-focus-inner{padding:0; .popover .title{background-color:#f5f5f5;padding:9px 15px;line-height:1;-webkit-border-radius:3px 3px 0 0;-moz-border-radius:3px 3px 0 0;border-radius:3px 3px 0 0;border-bottom:1px solid #eee;} .popover .content{background-color:#ffffff;padding:14px;-webkit-border-radius:0 0 3px 3px;-moz-border-radius:0 0 3px 3px;border-radius:0 0 3px 3px;-webkit-background-clip:padding-box;-moz-background-clip:padding-box;background-clip:padding-box;}.popover .content p,.popover .content ul,.popover .content ol{margin-bottom:0;} .fade{-webkit-transition:opacity 0.15s linear;-moz-transition:opacity 0.15s linear;-ms-transition:opacity 0.15s linear;-o-transition:opacity 0.15s linear;transition:opacity 0.15s linear;opacity:0;}.fade.in{opacity:1;} -.label{padding:1px 3px 2px;background-color:#777777;font-size:9.75px;font-weight:bold;color:#ffffff;text-transform:uppercase;-webkit-border-radius:3px;-moz-border-radius:3px;border-radius:3px;}.label.important{background-color:#c43c35;} +.label{padding:1px 3px 2px;background-color:#bfbfbf;font-size:9.75px;font-weight:bold;color:#ffffff;text-transform:uppercase;-webkit-border-radius:3px;-moz-border-radius:3px;border-radius:3px;}.label.important{background-color:#c43c35;} .label.warning{background-color:#f89406;} .label.success{background-color:#46a546;} .label.notice{background-color:#62cffc;} diff --git a/lib/forms.less b/lib/forms.less index 56325daa9c..b657e53d65 100644 --- a/lib/forms.less +++ b/lib/forms.less @@ -8,16 +8,16 @@ // Make all forms have space below them form { - margin-bottom: @baseline; + margin-bottom: @baseLineHeight; } // Groups of fields with labels on top (legends) legend { display: block; width: 100%; - margin-bottom: @baseline * 1.5; - font-size: @basefont * 1.5; - line-height: @baseline * 2; + margin-bottom: @baseLineHeight * 1.5; + font-size: @baseFontSize * 1.5; + line-height: @baseLineHeight * 2; color: @grayDark; border-bottom: 1px solid #eee; } @@ -27,7 +27,7 @@ label, input, select, textarea { - #font > .sans-serif(normal,@basefont,@baseline); + #font > .sans-serif(normal,@baseFontSize,@baseLineHeight); } // Identify controls by their labels @@ -50,10 +50,10 @@ select, .uneditable-input { display: inline-block; width: 210px; - height: @baseline; + height: @baseLineHeight; padding: 4px; - font-size: @basefont; - line-height: @baseline; + font-size: @baseFontSize; + line-height: @baseLineHeight; color: @gray; border: 1px solid #ccc; .border-radius(3px); @@ -90,8 +90,8 @@ input[type=submit] { select, input[type=file] { - height: @baseline * 1.5; // In IE7, the height of the select element cannot be changed by height, only font-size - line-height: @baseline * 1.5; + height: @baseLineHeight * 1.5; // In IE7, the height of the select element cannot be changed by height, only font-size + line-height: @baseLineHeight * 1.5; *margin-top: 4px; /* For IE7, add top margin to align select with labels */ } @@ -200,7 +200,7 @@ textarea[readonly] { // Style the background of control-groups with errors .has-error { background: lighten(@red, 55%); - padding: (@baseline / 2) 0; + padding: (@baseLineHeight / 2) 0; margin: -10px 0 10px; .border-radius(4px); > label, @@ -234,9 +234,9 @@ textarea[readonly] { // ------------ .form-actions { - padding: (@baseline - 1) 20px @baseline; - margin-top: @baseline; - margin-bottom: @baseline; + padding: (@baseLineHeight - 1) 20px @baseLineHeight; + margin-top: @baseLineHeight; + margin-bottom: @baseLineHeight; background-color: #f5f5f5; border-top: 1px solid #ddd; } @@ -375,7 +375,7 @@ textarea[readonly] { // Margin to space out fieldsets .control-group { - margin-bottom: @baseline; + margin-bottom: @baseLineHeight; } // Bold the labels so they stand out diff --git a/lib/mixins.less b/lib/mixins.less index 131d142783..c43f166328 100644 --- a/lib/mixins.less +++ b/lib/mixins.less @@ -46,25 +46,25 @@ // Font Stacks #font { - .shorthand(@weight: normal, @size: 14px, @lineHeight: 20px) { + .shorthand(@weight: normal, @size: @baseFontSize, @lineHeight: @baseLineHeight) { font-size: @size; font-weight: @weight; line-height: @lineHeight; } - .sans-serif(@weight: normal, @size: 14px, @lineHeight: 20px) { + .sans-serif(@weight: normal, @size: @baseFontSize, @lineHeight: @baseLineHeight) { font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; font-size: @size; font-weight: @weight; line-height: @lineHeight; } - .serif(@weight: normal, @size: 14px, @lineHeight: 20px) { + .serif(@weight: normal, @size: @baseFontSize, @lineHeight: @baseLineHeight) { font-family: "Georgia", Times New Roman, Times, serif; font-size: @size; font-weight: @weight; line-height: @lineHeight; } - .monospace(@weight: normal, @size: 12px, @lineHeight: 20px) { - font-family: "Monaco", Courier New, monospace; + .monospace(@weight: normal, @size: @baseFontSize, @lineHeight: @baseLineHeight) { + font-family: Menlo, Monaco, Andale Mono, Courier New, monospace; font-size: @size; font-weight: @weight; line-height: @lineHeight; diff --git a/lib/patterns.less b/lib/patterns.less index 8add82c166..1b27b71847 100644 --- a/lib/patterns.less +++ b/lib/patterns.less @@ -313,7 +313,7 @@ > a { padding: 0 15px; margin-right: 2px; - line-height: @baseline * 2; + line-height: @baseLineHeight * 2; border: 1px solid transparent; .border-radius(4px 4px 0 0); &:hover { @@ -387,7 +387,7 @@ // ----------- .breadcrumb { - margin: 0 0 @baseline; + margin: 0 0 @baseLineHeight; padding: 7px 14px; #gradient > .vertical(#ffffff, #f5f5f5); border: 1px solid #ddd; @@ -424,12 +424,12 @@ p { font-size: 18px; font-weight: 200; - line-height: @baseline * 1.5; + line-height: @baseLineHeight * 1.5; } } footer { - margin-top: @baseline - 1; - padding-top: @baseline - 1; + margin-top: @baseLineHeight - 1; + padding-top: @baseLineHeight - 1; border-top: 1px solid #eee; } @@ -438,11 +438,11 @@ footer { // ------------ .page-header { - margin-bottom: @baseline - 1; + margin-bottom: @baseLineHeight - 1; border-bottom: 1px solid #ddd; .box-shadow(0 1px 0 rgba(255,255,255,.5)); h1 { - margin-bottom: (@baseline / 2) - 1px; + margin-bottom: (@baseLineHeight / 2) - 1px; } } @@ -488,7 +488,7 @@ footer { padding: 5px 14px 6px; text-shadow: 0 1px 1px rgba(255,255,255,.75); color: #333; - font-size: @basefont; + font-size: @baseFontSize; line-height: normal; border: 1px solid #ccc; border-bottom-color: #bbb; @@ -540,14 +540,14 @@ footer { // Button Sizes &.large { - font-size: @basefont + 2px; + font-size: @baseFontSize + 2px; line-height: normal; padding: 9px 14px 9px; .border-radius(6px); } &.small { padding: 7px 9px 7px; - font-size: @basefont - 2px; + font-size: @baseFontSize - 2px; } } // Super jank hack for removing border-radius from IE9 so we can keep filter gradients on alerts and buttons @@ -621,7 +621,7 @@ input[type=submit].btn { color: @black; font-size: 20px; font-weight: bold; - line-height: @baseline * .75; + line-height: @baseLineHeight * .75; text-shadow: 0 1px 0 rgba(255,255,255,1); .opacity(20); &:hover { @@ -639,7 +639,7 @@ input[type=submit].btn { .alert-message { position: relative; padding: 7px 15px; - margin-bottom: @baseline; + margin-bottom: @baseLineHeight; color: @grayDark; .gradientBar(#fceec1, #eedc94); // warning by default text-shadow: 0 1px 0 rgba(255,255,255,.5); @@ -655,7 +655,7 @@ input[type=submit].btn { // Remove extra margin from content h5 { - line-height: @baseline; + line-height: @baseLineHeight; } p { margin-bottom: 0; @@ -715,8 +715,8 @@ input[type=submit].btn { // ---------- .pagination { - height: @baseline * 2; - margin: @baseline 0; + height: @baseLineHeight * 2; + margin: @baseLineHeight 0; ul { float: left; margin: 0; @@ -731,7 +731,7 @@ input[type=submit].btn { a { float: left; padding: 0 14px; - line-height: (@baseline * 2) - 2; + line-height: (@baseLineHeight * 2) - 2; border-right: 1px solid; border-right-color: #ddd; border-right-color: rgba(0,0,0,.15); @@ -972,7 +972,7 @@ input[type=submit].btn { .label { padding: 1px 3px 2px; background-color: @grayLight; - font-size: @basefont * .75; + font-size: @baseFontSize * .75; font-weight: bold; color: @white; text-transform: uppercase; diff --git a/lib/scaffolding.less b/lib/scaffolding.less index 26bb0cc059..b6852535c9 100644 --- a/lib/scaffolding.less +++ b/lib/scaffolding.less @@ -12,7 +12,9 @@ html, body { } body { margin: 0; - #font > .sans-serif(normal,@basefont,@baseline); + font-family: @baseFontFamily; + font-size: @baseFontSize; + line-height: @baseLineHeight; color: @grayDark; } diff --git a/lib/tables.less b/lib/tables.less index 988483f0ef..8a786ffd2a 100644 --- a/lib/tables.less +++ b/lib/tables.less @@ -9,16 +9,16 @@ table { width: 100%; - margin-bottom: @baseline; + margin-bottom: @baseLineHeight; padding: 0; border-collapse: separate; // Done so we can round those corners! *border-collapse: collapse; /* IE7, collapse table to remove spacing */ - font-size: @basefont; + font-size: @baseFontSize; border: 1px solid #ddd; .border-radius(4px); th, td { padding: 10px 10px 9px; - line-height: @baseline; + line-height: @baseLineHeight; text-align: left; } th { diff --git a/lib/type.less b/lib/type.less index ea1f289e72..4232a24dff 100644 --- a/lib/type.less +++ b/lib/type.less @@ -7,10 +7,12 @@ // --------- p { - #font > .shorthand(normal,@basefont,@baseline); - margin-bottom: @baseline / 2; + font-family: @baseFontFamily; + font-size: @baseFontSize; + line-height: @baseLineHeight; + margin-bottom: @baseLineHeight / 2; small { - font-size: @basefont - 2; + font-size: @baseFontSize - 2; color: @grayLight; } } @@ -27,22 +29,22 @@ h1, h2, h3, h4, h5, h6 { } } h1 { - margin-bottom: @baseline; + margin-bottom: @baseLineHeight; font-size: 30px; - line-height: @baseline * 2; + line-height: @baseLineHeight * 2; small { font-size: 18px; } } h2 { font-size: 24px; - line-height: @baseline * 2; + line-height: @baseLineHeight * 2; small { font-size: 14px; } } h3 { - line-height: @baseline * 2; + line-height: @baseLineHeight * 2; font-size: 18px; small { font-size: 14px; @@ -50,18 +52,18 @@ h3 { } h4 { font-size: 16px; - line-height: @baseline * 2; + line-height: @baseLineHeight * 2; small { font-size: 12px; } } h5 { font-size: 14px; - line-height: @baseline; + line-height: @baseLineHeight; } h6 { font-size: 13px; - line-height: @baseline; + line-height: @baseLineHeight; color: @grayLight; text-transform: uppercase; } @@ -72,7 +74,7 @@ h6 { // Unordered and Ordered lists ul, ol { - margin: 0 0 @baseline 25px; + margin: 0 0 @baseLineHeight 25px; } ul ul, ul ol, @@ -87,7 +89,7 @@ ol { list-style: decimal; } li { - line-height: @baseline; + line-height: @baseLineHeight; color: @gray; } ul.unstyled { @@ -97,15 +99,15 @@ ul.unstyled { // Description Lists dl { - margin-bottom: @baseline; + margin-bottom: @baseLineHeight; dt, dd { - line-height: @baseline; + line-height: @baseLineHeight; } dt { font-weight: bold; } dd { - margin-left: @baseline / 2; + margin-left: @baseLineHeight / 2; } } @@ -135,16 +137,16 @@ em { // Blockquotes blockquote { - margin-bottom: @baseline; + margin-bottom: @baseLineHeight; border-left: 5px solid #eee; padding-left: 15px; p { - #font > .shorthand(300,14px,@baseline); + #font > .shorthand(300,14px,@baseLineHeight); margin-bottom: 0; } small { display: block; - #font > .shorthand(300,12px,@baseline); + #font > .shorthand(300,12px,@baseLineHeight); color: @grayLight; &:before { content: '\2014 \00A0'; @@ -155,14 +157,14 @@ blockquote { // Addresses address { display: block; - line-height: @baseline; - margin-bottom: @baseline; + line-height: @baseLineHeight; + margin-bottom: @baseLineHeight; } // Inline and block code styles code, pre { padding: 0 3px 2px; - font-family: Monaco, Andale Mono, Courier New, monospace; + font-family: Menlo, Monaco, Andale Mono, Courier New, monospace; font-size: 12px; .border-radius(3px); } @@ -174,9 +176,9 @@ code { pre { background-color: #f5f5f5; display: block; - padding: (@baseline - 1) / 2; - margin: 0 0 @baseline; - line-height: @baseline; + padding: (@baseLineHeight - 1) / 2; + margin: 0 0 @baseLineHeight; + line-height: @baseLineHeight; font-size: 12px; border: 1px solid #ccc; border: 1px solid rgba(0,0,0,.15); diff --git a/lib/variables.less b/lib/variables.less index dcb0a8ebf0..864dbe8c03 100644 --- a/lib/variables.less +++ b/lib/variables.less @@ -3,19 +3,27 @@ * ----------------------------------------------------- */ -// Links +// LINK COLORS +// ----------- + @linkColor: #0069d6; @linkColorHover: darken(@linkColor, 15); -// Grays + +// GRAYS +// ----- + @black: #000; -@grayDark: #333; -@gray: #555; -@grayLight: #777; -@grayLighter: #ccc; +@grayDark: lighten(@black, 25%); +@gray: lighten(@black, 50%); +@grayLight: lighten(@black, 75%); +@grayLighter: lighten(@black, 90%); @white: #fff; -// Accent Colors + +// ACCENT COLORS +// ------------- + @blue: #049CDB; @blueDark: #0064CD; @green: #46a546; @@ -25,11 +33,10 @@ @pink: #c3325f; @purple: #7a43b6; -// Baseline grid -@basefont: 13px; -@baseline: 18px; -// Griditude +// GRID +// ---- + // Modify the grid styles in mixins.less @gridColumns: 16; @gridColumnWidth: 40px; @@ -37,7 +44,10 @@ @extraSpace: (@gridGutterWidth * 2); // For our grid calculations @siteWidth: (@gridColumns * @gridColumnWidth) + (@gridGutterWidth * (@gridColumns - 1)); -// Color Scheme + +// COLOR SCHEME +// ------------ + // Use this to roll your own color schemes if you like (unused by Bootstrap by default) @baseColor: @blue; // Set a base color @complement: spin(@baseColor, 180); // Determine a complementary color @@ -51,10 +61,13 @@ @analog2: spin(@baseColor, -22); +// THEME VARIABLES +// --------------- + +// Typography +@baseFontSize: 13px; +@baseFontFamily: "Helvetica Neue", Helvetica, Arial, sans-serif; +@baseLineHeight: 18px; -// More variables coming soon: -// - @basefont to @baseFontSize -// - @baseline to @baseLineHeight -// - @baseFontFamily -// - @primaryButtonColor -// - anything else? File an issue on GitHub \ No newline at end of file +// Visuals +@primaryButtonColor: @blue; -- GitLab From cde17c94919ef26093145e5412c6d425d3199d9f Mon Sep 17 00:00:00 2001 From: Mark Otto <mark.otto@twitter.com> Date: Tue, 4 Oct 2011 00:48:31 -0700 Subject: [PATCH 013/318] adding placeholder font-face mixin which doesn't work yet --- bootstrap.css | 2 +- lib/mixins.less | 14 ++++++++++++++ 2 files changed, 15 insertions(+), 1 deletion(-) diff --git a/bootstrap.css b/bootstrap.css index 75928c7490..2b0e88c86d 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: Tue Oct 4 00:16:55 PDT 2011 + * Date: Tue Oct 4 00:48:20 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). diff --git a/lib/mixins.less b/lib/mixins.less index c43f166328..47eb1a1c38 100644 --- a/lib/mixins.less +++ b/lib/mixins.less @@ -71,6 +71,20 @@ } } +// Font face generator +.font-face(@fontFamily, @fileName, @style, @weight) { + @font-face { + font-family: @fontFamily; + font-style: @style; + font-weight: @weight; + src: url('@{fileName}.eot'); + src: url('@{fileName}.eot?#iefix') format('embedded-opentype'), + url('@{fileName}.woff') format('woff'), + url('@{fileName}.ttf') format('truetype'), + url('@{fileName}.svg#@{fontFamily}') format('svg'); + } +} + // Grid System .fixed-container() { width: @siteWidth; -- GitLab From bdbc35206630645e6cc6655ec9e50aa70081a2fb Mon Sep 17 00:00:00 2001 From: Mark Otto <mark.otto@twitter.com> Date: Tue, 4 Oct 2011 00:55:35 -0700 Subject: [PATCH 014/318] adding new mixins --- lib/mixins.less | 11 +++++++++++ 1 file changed, 11 insertions(+) diff --git a/lib/mixins.less b/lib/mixins.less index 47eb1a1c38..9c27346c2a 100644 --- a/lib/mixins.less +++ b/lib/mixins.less @@ -155,13 +155,24 @@ .rotation(@degrees: 5deg) { -webkit-transform: rotate(@degrees); -moz-transform: rotate(@degrees); + -ms-transform: rotate(@degrees); + -o-transform: rotate(@degrees); transform: rotate(@degrees); } .scale(@value: 1.5) { -webkit-transform: scale(@value); -moz-transform: scale(@value); + -ms-transform: scale(@value); + -o-transform: scale(@value); transform: scale(@value); } +.translate(@x: 0, @y: 0) { + -webkit-transform: translate(@x, @y); + -moz-transform: translate(@x, @y); + -ms-transform: translate(@x, @y); + -o-transform: translate(@x, @y); + transform: translate(@x, @y); +} // Background clipping .background-clip(@clip) { -- GitLab From 913338f930736a1b186178469c6eafb55c1dbea8 Mon Sep 17 00:00:00 2001 From: Mark Otto <mark.otto@twitter.com> Date: Tue, 4 Oct 2011 01:15:31 -0700 Subject: [PATCH 015/318] fixing multi select on chromium ubuntu by setting background color explicitly --- bootstrap.css | 3 ++- bootstrap.min.css | 2 +- lib/forms.less | 1 + 3 files changed, 4 insertions(+), 2 deletions(-) diff --git a/bootstrap.css b/bootstrap.css index 2b0e88c86d..ab96f6c7c6 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: Tue Oct 4 00:48:20 PDT 2011 + * Date: Tue Oct 4 01:15:08 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). @@ -645,6 +645,7 @@ select, input[type=file] { } select[multiple] { + background-color: #ffffff; height: inherit; } textarea { diff --git a/bootstrap.min.css b/bootstrap.min.css index 4ba50158e6..9a241d80d0 100644 --- a/bootstrap.min.css +++ b/bootstrap.min.css @@ -113,7 +113,7 @@ input[type=checkbox],input[type=radio]{width:auto;height:auto;padding:0;margin:3 input[type=file]{background-color:#ffffff;padding:initial;border:initial;line-height:initial;-webkit-box-shadow:none;-moz-box-shadow:none;box-shadow:none;} input[type=button],input[type=reset],input[type=submit]{width:auto;height:auto;} select,input[type=file]{height:27px;line-height:27px;*margin-top:4px;} -select[multiple]{height:inherit;} +select[multiple]{background-color:#ffffff;height:inherit;} textarea{height:auto;} input,textarea{-webkit-transition:border linear 0.2s,box-shadow linear 0.2s;-moz-transition:border linear 0.2s,box-shadow linear 0.2s;-ms-transition:border linear 0.2s,box-shadow linear 0.2s;-o-transition:border linear 0.2s,box-shadow linear 0.2s;transition:border linear 0.2s,box-shadow linear 0.2s;-webkit-box-shadow:inset 0 1px 3px rgba(0, 0, 0, 0.1);-moz-box-shadow:inset 0 1px 3px rgba(0, 0, 0, 0.1);box-shadow:inset 0 1px 3px rgba(0, 0, 0, 0.1);} input:focus,textarea:focus{outline:0;border-color:rgba(82, 168, 236, 0.8);-webkit-box-shadow:inset 0 1px 3px rgba(0, 0, 0, 0.1),0 0 8px rgba(82, 168, 236, 0.6);-moz-box-shadow:inset 0 1px 3px rgba(0, 0, 0, 0.1),0 0 8px rgba(82, 168, 236, 0.6);box-shadow:inset 0 1px 3px rgba(0, 0, 0, 0.1),0 0 8px rgba(82, 168, 236, 0.6);} diff --git a/lib/forms.less b/lib/forms.less index b657e53d65..4bdddc3a2e 100644 --- a/lib/forms.less +++ b/lib/forms.less @@ -97,6 +97,7 @@ input[type=file] { // Make multiple select elements height not fixed select[multiple] { + background-color: @white; // Fixes Chromium bug? height: inherit; } -- GitLab From a91a407bd60a266f928b5fea70d3c4332394b3c8 Mon Sep 17 00:00:00 2001 From: Jacob Thornton <jacobthornton@gmail.com> Date: Tue, 4 Oct 2011 21:48:53 -0700 Subject: [PATCH 016/318] start updating to data- driven js --- js/bootstrap-alerts.js | 6 ++-- js/bootstrap-dropdown.js | 27 ++++++++------- js/bootstrap-modal.js | 71 +++++++++++++++++++++++++--------------- js/bootstrap-popover.js | 6 ++-- js/bootstrap-tabs.js | 18 ++++++---- js/bootstrap-twipsy.js | 4 +-- 6 files changed, 80 insertions(+), 52 deletions(-) diff --git a/js/bootstrap-alerts.js b/js/bootstrap-alerts.js index 82bcac5246..4498270cb9 100644 --- a/js/bootstrap-alerts.js +++ b/js/bootstrap-alerts.js @@ -53,7 +53,7 @@ var Alert = function ( content, selector ) { this.$element = $(content) - .delegate(selector || '.close', 'click', this.close) + .delegate('[data-alert-dismiss]', 'click', this.close) } Alert.prototype = { @@ -62,6 +62,8 @@ var $element = $(this).parent('.alert-message') e && e.preventDefault() + e && e.stopPropagation() + $element.removeClass('in') function removeElement () { @@ -98,7 +100,7 @@ } $(document).ready(function () { - new Alert($('body'), '.alert-message[data-alert] .close') + new Alert($('body')) }) })( window.jQuery || window.ender ) \ No newline at end of file diff --git a/js/bootstrap-dropdown.js b/js/bootstrap-dropdown.js index 75320c0f87..6379653c56 100644 --- a/js/bootstrap-dropdown.js +++ b/js/bootstrap-dropdown.js @@ -20,23 +20,14 @@ (function( $ ){ - var d = '.dropdown-toggle' - - function clearMenus() { - $(d).parent('li').removeClass('open') - } - - $(function () { - $('html').bind("click", clearMenus) - $('body').dropdown( '[data-dropdown] .dropdown-toggle' ) - }) + var d = '[data-dropdown]' /* DROPDOWN PLUGIN DEFINITION * ========================== */ - $.fn.dropdown = function ( selector ) { + $.fn.dropdown = function () { return this.each(function () { - $(this).delegate(selector || d, 'click', function (e) { + $(this).delegate(d, 'click', function (e) { var li = $(this).parent('li') , isActive = li.hasClass('open') @@ -47,4 +38,16 @@ }) } + /* APPLY TO STANDARD DROPDOWN ELEMENTS + * =================================== */ + + function clearMenus() { + $(d).parent('li').removeClass('open') + } + + $(function () { + $('html').bind("click", clearMenus) + $('body').dropdown() + }) + })( window.jQuery || window.ender ) \ No newline at end of file diff --git a/js/bootstrap-modal.js b/js/bootstrap-modal.js index 5c38a7477b..c8d41a50b2 100644 --- a/js/bootstrap-modal.js +++ b/js/bootstrap-modal.js @@ -18,7 +18,7 @@ * ========================================================= */ -(function( $ ){ +!function( $ ){ /* CSS TRANSITION SUPPORT (https://gist.github.com/373874) * ======================================================= */ @@ -53,16 +53,12 @@ * ============================= */ var Modal = function ( content, options ) { - this.settings = $.extend({}, $.fn.modal.defaults) + this.settings = $.extend({}, $.fn.modal.defaults, options) this.$element = $(content) - .delegate('.js-dismiss', 'click.modal', $.proxy(this.hide, this)) + .delegate('[data-modal-dismiss]', $.proxy(this.hide, this)) - if ( options ) { - $.extend( this.settings, options ) - - if ( options.show ) { - this.show() - } + if ( this.settings.show ) { + this.show() } return this @@ -81,15 +77,23 @@ escape.call(this) backdrop.call(this, function () { + var transition = $.support.transition && that.$element.hasClass('fade') + that.$element .appendTo(document.body) .show() - setTimeout(function () { - that.$element - .addClass('in') - .trigger('shown') - }, 1) + if (transition) { + that.$element[0].offsetWidth // force reflow + } + + that.$element + .addClass('in') + + transition ? + that.$element.one(transitionEnd, function () { that.$element.trigger('shown') }) : + that.$element.trigger('shown') + }) return this @@ -98,6 +102,10 @@ , hide: function (e) { e && e.preventDefault() + if ( !this.isShown ) { + return this + } + var that = this this.isShown = false @@ -132,16 +140,25 @@ var that = this , animate = this.$element.hasClass('fade') ? 'fade' : '' if ( this.isShown && this.settings.backdrop ) { + var doAnimate = $.support.transition && animate + this.$backdrop = $('<div class="modal-backdrop ' + animate + '" />') - .click($.proxy(this.hide, this)) .appendTo(document.body) - setTimeout(function () { - that.$backdrop && that.$backdrop.addClass('in') - $.support.transition && that.$backdrop.hasClass('fade') ? - that.$backdrop.one(transitionEnd, callback) : - callback() - }) + if ( this.settings.backdrop != 'static' ) { + this.$backdrop.click($.proxy(this.hide, this)) + } + + if ( doAnimate ) { + this.$backdrop[0].offsetWidth // force reflow + } + + this.$backdrop.addClass('in') + + doAnimate ? + this.$backdrop.one(transitionEnd, callback) : + callback() + } else if ( !this.isShown && this.$backdrop ) { this.$backdrop.removeClass('in') @@ -161,13 +178,13 @@ function escape() { var that = this if ( this.isShown && this.settings.keyboard ) { - $('body').bind('keyup.modal', function ( e ) { + $(document).bind('keyup.modal', function ( e ) { if ( e.which == 27 ) { that.hide() } }) } else if ( !this.isShown ) { - $('body').unbind('keyup.modal') + $(document).unbind('keyup.modal') } } @@ -209,12 +226,12 @@ $.fn.modal.defaults = { backdrop: false , keyboard: false - , show: true + , show: false } - /* MODAL DATA- IMPLEMENTATION - * ========================== */ + /* MODAL DATA-IMPLEMENTATION + * ========================= */ $(document).ready(function () { $('body').delegate('[data-controls-modal]', 'click', function (e) { @@ -224,4 +241,4 @@ }) }) -})( window.jQuery || window.ender ) \ No newline at end of file +}( window.jQuery || window.ender ); \ No newline at end of file diff --git a/js/bootstrap-popover.js b/js/bootstrap-popover.js index e41090a3b3..1cf4b8917a 100644 --- a/js/bootstrap-popover.js +++ b/js/bootstrap-popover.js @@ -18,7 +18,7 @@ * =========================================================== */ -(function( $ ) { +!function( $ ) { var Popover = function ( element, options ) { this.$element = $(element) @@ -40,7 +40,7 @@ } , getContent: function () { - var contentvar + var content , $e = this.$element , o = this.options @@ -74,4 +74,4 @@ $.fn.popover.defaults = $.extend({} , $.fn.twipsy.defaults, { content: 'data-content', placement: 'right'}) -})( window.jQuery || window.ender ) \ No newline at end of file +}( window.jQuery || window.ender ); \ No newline at end of file diff --git a/js/bootstrap-tabs.js b/js/bootstrap-tabs.js index 807b366a35..b94adfc25d 100644 --- a/js/bootstrap-tabs.js +++ b/js/bootstrap-tabs.js @@ -18,30 +18,36 @@ * ======================================================== */ -(function( $ ){ +!function( $ ){ function activate ( element, container ) { - container.find('.active').removeClass('active') + container.find('> .active').removeClass('active') element.addClass('active') } function tab( e ) { var $this = $(this) + , $ul = $this.closest('ul') , href = $this.attr('href') - , $ul = $(e.liveFired) - , $controlled + , previous if (/^#\w+/.test(href)) { e.preventDefault() - if ($this.hasClass('active')) { + if ($this.parent('li').hasClass('active')) { return } + previous = $ul.find('.active a')[0] $href = $(href) activate($this.parent('li'), $ul) activate($href, $href.parent()) + + $this.trigger({ + type: 'change' + , relatedTarget: previous + }) } } @@ -59,4 +65,4 @@ $('body').tabs('ul[data-tabs] li > a, ul[data-pills] > li > a') }) -})( window.jQuery || window.ender ) \ No newline at end of file +}( window.jQuery || window.ender ); \ No newline at end of file diff --git a/js/bootstrap-twipsy.js b/js/bootstrap-twipsy.js index bc92f97fe1..0144c48158 100644 --- a/js/bootstrap-twipsy.js +++ b/js/bootstrap-twipsy.js @@ -19,7 +19,7 @@ * ========================================================== */ -(function( $ ) { +!function( $ ) { /* CSS TRANSITION SUPPORT (https://gist.github.com/373874) * ======================================================= */ @@ -304,4 +304,4 @@ return $.metadata ? $.extend({}, options, $(ele).metadata()) : options } -})( window.jQuery || window.ender ) \ No newline at end of file +}( window.jQuery || window.ender ); \ No newline at end of file -- GitLab From c9669be1ec2862b88ffdb296191e82fed79f56a4 Mon Sep 17 00:00:00 2001 From: Jacob Thornton <jacobthornton@gmail.com> Date: Wed, 5 Oct 2011 00:14:55 -0700 Subject: [PATCH 017/318] get modal working with new data-attrs --- docs/javascript.html | 21 +++++++++------------ js/bootstrap-modal.js | 2 +- 2 files changed, 10 insertions(+), 13 deletions(-) diff --git a/docs/javascript.html b/docs/javascript.html index d5eb987392..9f2b138763 100644 --- a/docs/javascript.html +++ b/docs/javascript.html @@ -12,7 +12,7 @@ <![endif]--> <!-- Le javascript --> - <script src="http://code.jquery.com/jquery-1.5.2.min.js"></script> + <script src="http://code.jquery.com/jquery-1.6.4.min.js"></script> <script src="assets/js/google-code-prettify/prettify.js"></script> <script>$(function () { prettyPrint() })</script> <script src="../js/bootstrap-modal.js"></script> @@ -182,7 +182,7 @@ $('#my-modal').bind('hidden', function () { <!-- sample modal content --> <div id="modal-from-dom" class="modal hide fade"> <div class="modal-header"> - <a href="#" class="close js-dismiss">×</a> + <a href="#" class="close" data-modal-dismiss="true" >×</a> <h3>Modal Heading</h3> </div> <div class="modal-body"> @@ -190,12 +190,10 @@ $('#my-modal').bind('hidden', function () { </div> <div class="modal-footer"> <a href="#" class="btn primary">Save changes</a> - <a href="#" class="btn js-dismiss">Close</a> + <a href="#" class="btn" data-modal-dismiss="true" >Close</a> </div> </div> - <button data-controls-modal="modal-from-dom" data-backdrop="true" data-keyboard="true" class="btn danger">Launch Modal</button> - </div> </div> </section> @@ -221,7 +219,7 @@ $('#my-modal').bind('hidden', function () { <pre class="prettyprint linenums"> <ul class="tabs"> <li class="active"><a href="#">Home</a></li> - <li class="dropdown" data-dropdown="dropdown" > + <li class="dropdown" data-dropdown="true" > <a href="#" class="dropdown-toggle">Dropdown</a> <ul class="dropdown-menu"> <li><a href="#">Secondary link</a></li> @@ -231,7 +229,6 @@ $('#my-modal').bind('hidden', function () { </ul> </li> </ul></pre> - <p><span class="label notice">Notice</span> If your ui has several dropdowns, consider adding the <code>data-dropdown</code> attribute to a more significant container element like <code>.tabs</code> or <code>.topbar</code>. <h3>Methods</h3> <h4>$().dropdown()</h4> <p> @@ -239,7 +236,7 @@ $('#my-modal').bind('hidden', function () { </p> <h3>Demo</h3> <div class="topbar-wrapper"> - <div id="topbar-example" class="topbar" data-dropdown="dropdown"> + <div id="topbar-example" class="topbar"> <div class="topbar-inner"> <div class="container"> <a class="brand" href="#">Project Name</a> @@ -252,7 +249,7 @@ $('#my-modal').bind('hidden', function () { </form> <ul class="nav secondary-nav"> <li class="dropdown"> - <a href="#" class="dropdown-toggle">Dropdown 1</a> + <a href="#" class="dropdown-toggle" data-dropdown="true">Dropdown 1</a> <ul class="dropdown-menu"> <li><a href="#">Secondary link</a></li> <li><a href="#">Something else here</a></li> @@ -261,7 +258,7 @@ $('#my-modal').bind('hidden', function () { </ul> </li> <li class="dropdown"> - <a href="#" class="dropdown-toggle">Dropdown 2</a> + <a href="#" class="dropdown-toggle" data-dropdown="true">Dropdown 2</a> <ul class="dropdown-menu"> <li><a href="#">Secondary link</a></li> <li><a href="#">Something else here</a></li> @@ -645,11 +642,11 @@ $('#my-modal').bind('hidden', function () { <pre class="prettyprint linenums">$(".alert-message").alert('close')</pre> <h3>Demo</h3> <div class="alert-message warning fade in" data-alert="alert" > - <a class="close" href="#">×</a> + <a class="close" data-alert-dismiss="true" href="#">×</a> <p><strong>Holy guacamole!</strong> Best check yo self, you’re not looking too good.</p> </div> <div class="alert-message block-message error fade in" data-alert="alert" > - <a class="close" href="#">×</a> + <a class="close" data-alert-dismiss="true" href="#">×</a> <p><strong>Oh snap! You got an error!</strong> Change this and that and try again. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Cras mattis consectetur purus sit amet fermentum.</p> <div class="alert-actions"> <a class="btn small" href="#">Take this action</a> <a class="btn small" href="#">Or do this</a> diff --git a/js/bootstrap-modal.js b/js/bootstrap-modal.js index c8d41a50b2..60b83d58fd 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, options) this.$element = $(content) - .delegate('[data-modal-dismiss]', $.proxy(this.hide, this)) + .delegate('[data-modal-dismiss]', 'click', $.proxy(this.hide, this)) if ( this.settings.show ) { this.show() -- GitLab From f61fe3c4746ec09ff64756797fe6314be5f53b30 Mon Sep 17 00:00:00 2001 From: Mark Otto <mark.otto@twitter.com> Date: Sun, 9 Oct 2011 21:13:26 -0700 Subject: [PATCH 018/318] refactor fluid layout to be more specific to not interfere with modal content while adding right sidebar option --- bootstrap.css | 49 +++++++------- bootstrap.min.css | 22 ++++--- docs/index.html | 2 +- examples/fluid-reverse.html | 126 ++++++++++++++++++++++++++++++++++++ examples/fluid.html | 8 +-- lib/patterns.less | 85 ++++++++++++------------ lib/scaffolding.less | 26 +++++--- 7 files changed, 229 insertions(+), 89 deletions(-) create mode 100644 examples/fluid-reverse.html diff --git a/bootstrap.css b/bootstrap.css index ab96f6c7c6..8022cf2a00 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: Tue Oct 4 01:15:08 PDT 2011 + * Date: Sun Oct 9 21:12:03 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). @@ -205,29 +205,38 @@ body { .container:after { clear: both; } -.container-fluid { +.fluid-container { position: relative; min-width: 940px; padding-left: 20px; padding-right: 20px; zoom: 1; } -.container-fluid:before, .container-fluid:after { +.fluid-container:before, .fluid-container:after { display: table; content: ""; zoom: 1; *display: inline; } -.container-fluid:after { +.fluid-container:after { clear: both; } -.container-fluid > .sidebar { - float: left; +.fluid-sidebar-left, .fluid-sidebar-right { width: 220px; } -.container-fluid > .content { +.fluid-sidebar-left { + float: left; +} +.fluid-sidebar-right { + float: right; +} +.fluid-content { margin-left: 240px; } +.fluid-container.reverse .fluid-content { + margin-left: 0; + margin-right: 240px; +} a { color: #0069d6; text-decoration: none; @@ -1142,19 +1151,12 @@ table .headerSortUp.purple, table .headerSortDown.purple { background-color: transparent; color: #ffffff; } -.topbar form { - float: left; - margin: 5px 0 0 0; +.topbar .form-search { position: relative; - filter: alpha(opacity=100); - -khtml-opacity: 1; - -moz-opacity: 1; - opacity: 1; -} -.topbar form.pull-right { - float: right; + margin-top: 5px; + margin-bottom: 0; } -.topbar input { +.topbar .form-search input { background-color: #444; background-color: rgba(255, 255, 255, 0.3); font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; @@ -1177,18 +1179,18 @@ table .headerSortUp.purple, table .headerSortDown.purple { -o-transition: none; transition: none; } -.topbar input:-moz-placeholder { +.topbar .form-search input:-moz-placeholder { color: #e6e6e6; } -.topbar input::-webkit-input-placeholder { +.topbar .form-search input::-webkit-input-placeholder { color: #e6e6e6; } -.topbar input:hover { +.topbar .form-search input:hover { background-color: #bfbfbf; background-color: rgba(255, 255, 255, 0.5); color: #ffffff; } -.topbar input:focus, .topbar input.focused { +.topbar .form-search input:focus, .topbar .form-search input.focused { outline: 0; background-color: #ffffff; color: #404040; @@ -1199,6 +1201,9 @@ 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 .pull-right { + float: right; +} .topbar-inner { background-color: #222; background-color: #222222; diff --git a/bootstrap.min.css b/bootstrap.min.css index 9a241d80d0..325c50e92b 100644 --- a/bootstrap.min.css +++ b/bootstrap.min.css @@ -24,10 +24,13 @@ html,body{background-color:#ffffff;} body{margin:0;font-family:"Helvetica Neue",Helvetica,Arial,sans-serif;font-size:13px;line-height:18px;color:#404040;} .container{width:940px;margin-left:auto;margin-right:auto;zoom:1;}.container:before,.container:after{display:table;content:"";zoom:1;*display:inline;} .container:after{clear:both;} -.container-fluid{position:relative;min-width:940px;padding-left:20px;padding-right:20px;zoom:1;}.container-fluid:before,.container-fluid:after{display:table;content:"";zoom:1;*display:inline;} -.container-fluid:after{clear:both;} -.container-fluid>.sidebar{float:left;width:220px;} -.container-fluid>.content{margin-left:240px;} +.fluid-container{position:relative;min-width:940px;padding-left:20px;padding-right:20px;zoom:1;}.fluid-container:before,.fluid-container:after{display:table;content:"";zoom:1;*display:inline;} +.fluid-container:after{clear:both;} +.fluid-sidebar-left,.fluid-sidebar-right{width:220px;} +.fluid-sidebar-left{float:left;} +.fluid-sidebar-right{float:right;} +.fluid-content{margin-left:240px;} +.fluid-container.reverse .fluid-content{margin-left:0;margin-right:240px;} a{color:#0069d6;text-decoration:none;line-height:inherit;font-weight:inherit;}a:hover{color:#00438a;text-decoration:underline;} .pull-right{float:right;} .pull-left{float:left;} @@ -200,12 +203,11 @@ table .headerSortUp.purple,table .headerSortDown.purple{background-color:#e2d5f0 .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;} -.topbar input{background-color:#444;background-color:rgba(255, 255, 255, 0.3);font-family:"Helvetica Neue",Helvetica,Arial,sans-serif;font-size:normal;font-weight:13px;line-height:1;padding:4px 9px;color:#ffffff;color:rgba(255, 255, 255, 0.75);border:1px solid #111;-webkit-border-radius:4px;-moz-border-radius:4px;border-radius:4px;-webkit-box-shadow:inset 0 1px 2px rgba(0, 0, 0, 0.1),0 1px 0px rgba(255, 255, 255, 0.25);-moz-box-shadow:inset 0 1px 2px rgba(0, 0, 0, 0.1),0 1px 0px rgba(255, 255, 255, 0.25);box-shadow:inset 0 1px 2px rgba(0, 0, 0, 0.1),0 1px 0px rgba(255, 255, 255, 0.25);-webkit-transition:none;-moz-transition:none;-ms-transition:none;-o-transition:none;transition:none;}.topbar input:-moz-placeholder{color:#e6e6e6;} -.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 .form-search{position:relative;margin-top:5px;margin-bottom:0;}.topbar .form-search input{background-color:#444;background-color:rgba(255, 255, 255, 0.3);font-family:"Helvetica Neue",Helvetica,Arial,sans-serif;font-size:normal;font-weight:13px;line-height:1;padding:4px 9px;color:#ffffff;color:rgba(255, 255, 255, 0.75);border:1px solid #111;-webkit-border-radius:4px;-moz-border-radius:4px;border-radius:4px;-webkit-box-shadow:inset 0 1px 2px rgba(0, 0, 0, 0.1),0 1px 0px rgba(255, 255, 255, 0.25);-moz-box-shadow:inset 0 1px 2px rgba(0, 0, 0, 0.1),0 1px 0px rgba(255, 255, 255, 0.25);box-shadow:inset 0 1px 2px rgba(0, 0, 0, 0.1),0 1px 0px rgba(255, 255, 255, 0.25);-webkit-transition:none;-moz-transition:none;-ms-transition:none;-o-transition:none;transition:none;}.topbar .form-search input:-moz-placeholder{color:#e6e6e6;} +.topbar .form-search input::-webkit-input-placeholder{color:#e6e6e6;} +.topbar .form-search input:hover{background-color:#bfbfbf;background-color:rgba(255, 255, 255, 0.5);color:#ffffff;} +.topbar .form-search input:focus,.topbar .form-search 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 .pull-right{float:right;} .topbar-inner{background-color:#222;background-color:#222222;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);background-repeat:repeat-x;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;} diff --git a/docs/index.html b/docs/index.html index 137144991f..194111b780 100644 --- a/docs/index.html +++ b/docs/index.html @@ -1278,7 +1278,7 @@ </ul> </li> </ul> - <form class="pull-left" action=""> + <form class="form-search pull-left" action=""> <input type="text" placeholder="Search" /> </form> <ul class="nav secondary-nav"> diff --git a/examples/fluid-reverse.html b/examples/fluid-reverse.html new file mode 100644 index 0000000000..7c13a44530 --- /dev/null +++ b/examples/fluid-reverse.html @@ -0,0 +1,126 @@ +<!DOCTYPE html> +<html lang="en"> + <head> + <meta charset="utf-8"> + <title>Bootstrap, from Twitter</title> + <meta name="description" content=""> + <meta name="author" content=""> + + <!-- Le HTML5 shim, for IE6-8 support of HTML elements --> + <!--[if lt IE 9]> + <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script> + <![endif]--> + + <!-- Le styles --> + <link href="../bootstrap.css" rel="stylesheet"> + <style type="text/css"> + body { + padding-top: 60px; + } + </style> + + <!-- Le fav and touch icons --> + <link rel="shortcut icon" href="images/favicon.ico"> + <link rel="apple-touch-icon" href="images/apple-touch-icon.png"> + <link rel="apple-touch-icon" sizes="72x72" href="images/apple-touch-icon-72x72.png"> + <link rel="apple-touch-icon" sizes="114x114" href="images/apple-touch-icon-114x114.png"> + </head> + + <body> + + <div class="topbar"> + <div class="topbar-inner"> + <div class="fluid-container"> + <a class="brand" href="#">Project name</a> + <ul class="nav"> + <li class="active"><a href="#">Home</a></li> + <li><a href="#about">About</a></li> + <li><a href="#contact">Contact</a></li> + </ul> + <p class="pull-right">Logged in as <a href="#">username</a></p> + </div> + </div> + </div> + + <div class="fluid-container reverse"> + <div class="fluid-sidebar-right"> + <div class="well"> + <h5>Sidebar</h5> + <ul> + <li><a href="#">Link</a></li> + <li><a href="#">Link</a></li> + <li><a href="#">Link</a></li> + <li><a href="#">Link</a></li> + </ul> + <h5>Sidebar</h5> + <ul> + <li><a href="#">Link</a></li> + <li><a href="#">Link</a></li> + <li><a href="#">Link</a></li> + <li><a href="#">Link</a></li> + <li><a href="#">Link</a></li> + <li><a href="#">Link</a></li> + </ul> + <h5>Sidebar</h5> + <ul> + <li><a href="#">Link</a></li> + <li><a href="#">Link</a></li> + </ul> + </div> + </div> + <div class="fluid-content"> + <!-- Main hero unit for a primary marketing message or call to action --> + <div class="hero-unit"> + <h1>Hello, world!</h1> + <p>Vestibulum id ligula porta felis euismod semper. Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit.</p> + <p><a class="btn primary large">Learn more »</a></p> + </div> + + <!-- Example row of columns --> + <div class="row"> + <div class="span6"> + <h2>Heading</h2> + <p>Etiam porta sem malesuada magna mollis euismod. Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit.</p> + <p><a class="btn" href="#">View details »</a></p> + </div> + <div class="span5"> + <h2>Heading</h2> + <p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. </p> + <p><a class="btn" href="#">View details »</a></p> + </div> + <div class="span5"> + <h2>Heading</h2> + <p>Donec sed odio dui. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Vestibulum id ligula porta felis euismod semper. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.</p> + <p><a class="btn" href="#">View details »</a></p> + </div> + </div> + + <hr> + + <!-- Example row of columns --> + <div class="row"> + <div class="span6"> + <h2>Heading</h2> + <p>Etiam porta sem malesuada magna mollis euismod. Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit.</p> + <p><a class="btn" href="#">View details »</a></p> + </div> + <div class="span5"> + <h2>Heading</h2> + <p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. </p> + <p><a class="btn" href="#">View details »</a></p> + </div> + <div class="span5"> + <h2>Heading</h2> + <p>Donec sed odio dui. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Vestibulum id ligula porta felis euismod semper. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.</p> + <p><a class="btn" href="#">View details »</a></p> + </div> + </div> + + <footer> + <p>© Company 2011</p> + </footer> + </div> + </div> + + </body> +</html> \ No newline at end of file diff --git a/examples/fluid.html b/examples/fluid.html index eacb5c3d2d..c6387846b6 100644 --- a/examples/fluid.html +++ b/examples/fluid.html @@ -30,7 +30,7 @@ <div class="topbar"> <div class="topbar-inner"> - <div class="container-fluid"> + <div class="fluid-container"> <a class="brand" href="#">Project name</a> <ul class="nav"> <li class="active"><a href="#">Home</a></li> @@ -42,8 +42,8 @@ </div> </div> - <div class="container-fluid"> - <div class="sidebar"> + <div class="fluid-container"> + <div class="fluid-sidebar-left"> <div class="well"> <h5>Sidebar</h5> <ul> @@ -68,7 +68,7 @@ </ul> </div> </div> - <div class="content"> + <div class="fluid-content"> <!-- Main hero unit for a primary marketing message or call to action --> <div class="hero-unit"> <h1>Hello, world!</h1> diff --git a/lib/patterns.less b/lib/patterns.less index 1b27b71847..8ceffaa996 100644 --- a/lib/patterns.less +++ b/lib/patterns.less @@ -54,54 +54,53 @@ } // Search Form - form { - float: left; - margin: 5px 0 0 0; + .form-search { position: relative; - .opacity(100); + margin-top: 5px; + margin-bottom: 0; + input { + background-color: #444; + background-color: rgba(255,255,255,.3); + #font > .sans-serif(13px, normal, 1); + padding: 4px 9px; + color: @white; + color: rgba(255,255,255,.75); + border: 1px solid #111; + .border-radius(4px); + @shadow: inset 0 1px 2px rgba(0,0,0,.1), 0 1px 0px rgba(255,255,255,.25); + .box-shadow(@shadow); + .transition(none); + + // Placeholder text gets special styles; can't be bundled together though for some reason + &:-moz-placeholder { + color: @grayLighter; + } + &::-webkit-input-placeholder { + color: @grayLighter; + } + // Hover states + &:hover { + background-color: @grayLight; + background-color: rgba(255,255,255,.5); + color: @white; + } + // Focus states (we use .focused since IE8 and down doesn't support :focus) + &:focus, + &.focused { + outline: 0; + background-color: @white; + color: @grayDark; + text-shadow: 0 1px 0 @white; + border: 0; + padding: 5px 10px; + .box-shadow(0 0 3px rgba(0,0,0,.15)); + } + } } // Todo: remove from v2.0 when ready, added for legacy - form.pull-right { + .pull-right { float: right; } - input { - background-color: #444; - background-color: rgba(255,255,255,.3); - #font > .sans-serif(13px, normal, 1); - padding: 4px 9px; - color: @white; - color: rgba(255,255,255,.75); - border: 1px solid #111; - .border-radius(4px); - @shadow: inset 0 1px 2px rgba(0,0,0,.1), 0 1px 0px rgba(255,255,255,.25); - .box-shadow(@shadow); - .transition(none); - - // Placeholder text gets special styles; can't be bundled together though for some reason - &:-moz-placeholder { - color: @grayLighter; - } - &::-webkit-input-placeholder { - color: @grayLighter; - } - // Hover states - &:hover { - background-color: @grayLight; - background-color: rgba(255,255,255,.5); - color: @white; - } - // Focus states (we use .focused since IE8 and down doesn't support :focus) - &:focus, - &.focused { - outline: 0; - background-color: @white; - color: @grayDark; - text-shadow: 0 1px 0 @white; - border: 0; - padding: 5px 10px; - .box-shadow(0 0 3px rgba(0,0,0,.15)); - } - } } // gradient is applied to it's own element because overflow visible is not honored by ie when filter is present diff --git a/lib/scaffolding.less b/lib/scaffolding.less index b6852535c9..00a8ee3b35 100644 --- a/lib/scaffolding.less +++ b/lib/scaffolding.less @@ -24,20 +24,28 @@ body { } // Fluid layouts (left aligned, with sidebar, min- & max-width content) -.container-fluid { +.fluid-container { position: relative; min-width: 940px; padding-left: 20px; padding-right: 20px; .clearfix(); - > .sidebar { - float: left; - width: 220px; - } - // TODO in v2: rename this and .popover .content to be more specific - > .content { - margin-left: 240px; - } +} +// Sidebars (left and right options) +.fluid-sidebar-left, +.fluid-sidebar-right { + width: 220px; +} +.fluid-sidebar-left { float: left; } +.fluid-sidebar-right { float: right; } +// The main content area +.fluid-content { + margin-left: 240px; +} +// Reverse layout for sidebar on right +.fluid-container.reverse .fluid-content { + margin-left: 0; + margin-right: 240px; } -- GitLab From dd1efdf0d5ec2469978a65c845cc5dfd16b74899 Mon Sep 17 00:00:00 2001 From: Mark Otto <mark.otto@twitter.com> Date: Sun, 9 Oct 2011 21:25:28 -0700 Subject: [PATCH 019/318] update input prepend and append to use baseline variable --- bootstrap.css | 2 +- lib/forms.less | 4 ++-- 2 files changed, 3 insertions(+), 3 deletions(-) diff --git a/bootstrap.css b/bootstrap.css index 8022cf2a00..cd74091985 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 Oct 9 21:12:03 PDT 2011 + * Date: Sun Oct 9 21:24:37 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). diff --git a/lib/forms.less b/lib/forms.less index 4bdddc3a2e..4b2bb80166 100644 --- a/lib/forms.less +++ b/lib/forms.less @@ -323,11 +323,11 @@ textarea[readonly] { display: block; width: auto; min-width: 16px; - height: 18px; + height: @baseLineHeight; padding: 4px 4px 4px 5px; margin-right: -1px; font-weight: normal; - line-height: 18px; + line-height: @baseLineHeight; color: @grayLight; text-align: center; text-shadow: 0 1px 0 @white; -- GitLab From 8ba005d38dd7a79ea3e90efb6efc7ac9ebcadc26 Mon Sep 17 00:00:00 2001 From: Mark Otto <mark.otto@twitter.com> Date: Tue, 11 Oct 2011 09:44:51 -0700 Subject: [PATCH 020/318] new navbar introduced to replace topbar --- bootstrap.css | 84 +++++++++++++---------- bootstrap.min.css | 23 ++++--- docs/index.html | 90 +++++++++++++------------ docs/javascript.html | 68 ++++++++++--------- lib/patterns.less | 154 ++++++++++++++++++++++++------------------- 5 files changed, 224 insertions(+), 195 deletions(-) diff --git a/bootstrap.css b/bootstrap.css index cd74091985..728590ba26 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 Oct 9 21:24:37 PDT 2011 + * Date: Tue Oct 11 09:43:00 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). @@ -1114,26 +1114,37 @@ table .headerSortUp.purple, table .headerSortDown.purple { /* Patterns.less * Repeatable UI elements outside the base styles provided from the scaffolding * ---------------------------------------------------------------------------- */ -.topbar { +.navbar { height: 40px; - position: fixed; - top: 0; - left: 0; - right: 0; - z-index: 10000; overflow: visible; } -.topbar a { +.navbar-inner { + background-color: #222222; + background-color: #222222; + 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); + background-repeat: repeat-x; + 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); +} +.navbar a { color: #bfbfbf; text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25); } -.topbar .brand a:hover, .topbar ul .active > a { - background-color: #333; +.navbar .brand a:hover, .navbar ul .active > a { + background-color: #333333; background-color: rgba(255, 255, 255, 0.05); color: #ffffff; text-decoration: none; } -.topbar .brand { +.navbar .brand { float: left; display: block; padding: 8px 20px 12px; @@ -1143,20 +1154,21 @@ table .headerSortUp.purple, table .headerSortDown.purple { font-weight: 200; line-height: 1; } -.topbar p { +.navbar p { margin: 0; line-height: 40px; } -.topbar p a:hover { +.navbar p a:hover { background-color: transparent; color: #ffffff; } -.topbar .form-search { +.navbar-search { position: relative; margin-top: 5px; margin-bottom: 0; + float: left; } -.topbar .form-search input { +.navbar-search input { background-color: #444; background-color: rgba(255, 255, 255, 0.3); font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; @@ -1179,18 +1191,18 @@ table .headerSortUp.purple, table .headerSortDown.purple { -o-transition: none; transition: none; } -.topbar .form-search input:-moz-placeholder { +.navbar-search input:-moz-placeholder { color: #e6e6e6; } -.topbar .form-search input::-webkit-input-placeholder { +.navbar-search input::-webkit-input-placeholder { color: #e6e6e6; } -.topbar .form-search input:hover { +.navbar-search input:hover { background-color: #bfbfbf; background-color: rgba(255, 255, 255, 0.5); color: #ffffff; } -.topbar .form-search input:focus, .topbar .form-search input.focused { +.navbar-search input:focus, .navbar-search input.focused { outline: 0; background-color: #ffffff; color: #404040; @@ -1201,24 +1213,24 @@ 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 .pull-right { - float: right; +.navbar-static { + margin-bottom: 18px; } -.topbar-inner { - background-color: #222; - background-color: #222222; - 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); - background-repeat: repeat-x; - 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); +.navbar-static .navbar-inner { + margin-left: -20px; + margin-right: -20px; + padding-left: 20px; + padding-right: 20px; + -webkit-border-radius: 4px; + -moz-border-radius: 4px; + border-radius: 4px; +} +.navbar-fixed { + position: fixed; + top: 0; + left: 0; + right: 0; + z-index: 10000; } .nav { display: block; diff --git a/bootstrap.min.css b/bootstrap.min.css index 325c50e92b..0e949c6038 100644 --- a/bootstrap.min.css +++ b/bootstrap.min.css @@ -199,16 +199,19 @@ 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 a{color:#bfbfbf;text-shadow:0 -1px 0 rgba(0, 0, 0, 0.25);} -.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-search{position:relative;margin-top:5px;margin-bottom:0;}.topbar .form-search input{background-color:#444;background-color:rgba(255, 255, 255, 0.3);font-family:"Helvetica Neue",Helvetica,Arial,sans-serif;font-size:normal;font-weight:13px;line-height:1;padding:4px 9px;color:#ffffff;color:rgba(255, 255, 255, 0.75);border:1px solid #111;-webkit-border-radius:4px;-moz-border-radius:4px;border-radius:4px;-webkit-box-shadow:inset 0 1px 2px rgba(0, 0, 0, 0.1),0 1px 0px rgba(255, 255, 255, 0.25);-moz-box-shadow:inset 0 1px 2px rgba(0, 0, 0, 0.1),0 1px 0px rgba(255, 255, 255, 0.25);box-shadow:inset 0 1px 2px rgba(0, 0, 0, 0.1),0 1px 0px rgba(255, 255, 255, 0.25);-webkit-transition:none;-moz-transition:none;-ms-transition:none;-o-transition:none;transition:none;}.topbar .form-search input:-moz-placeholder{color:#e6e6e6;} -.topbar .form-search input::-webkit-input-placeholder{color:#e6e6e6;} -.topbar .form-search input:hover{background-color:#bfbfbf;background-color:rgba(255, 255, 255, 0.5);color:#ffffff;} -.topbar .form-search input:focus,.topbar .form-search 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 .pull-right{float:right;} -.topbar-inner{background-color:#222;background-color:#222222;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);background-repeat:repeat-x;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);} +.navbar{height:40px;overflow:visible;} +.navbar-inner{background-color:#222222;background-color:#222222;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);background-repeat:repeat-x;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);} +.navbar a{color:#bfbfbf;text-shadow:0 -1px 0 rgba(0, 0, 0, 0.25);} +.navbar .brand a:hover,.navbar ul .active>a{background-color:#333333;background-color:rgba(255, 255, 255, 0.05);color:#ffffff;text-decoration:none;} +.navbar .brand{float:left;display:block;padding:8px 20px 12px;margin-left:-20px;color:#ffffff;font-size:20px;font-weight:200;line-height:1;} +.navbar p{margin:0;line-height:40px;}.navbar p a:hover{background-color:transparent;color:#ffffff;} +.navbar-search{position:relative;margin-top:5px;margin-bottom:0;float:left;}.navbar-search input{background-color:#444;background-color:rgba(255, 255, 255, 0.3);font-family:"Helvetica Neue",Helvetica,Arial,sans-serif;font-size:normal;font-weight:13px;line-height:1;padding:4px 9px;color:#ffffff;color:rgba(255, 255, 255, 0.75);border:1px solid #111;-webkit-border-radius:4px;-moz-border-radius:4px;border-radius:4px;-webkit-box-shadow:inset 0 1px 2px rgba(0, 0, 0, 0.1),0 1px 0px rgba(255, 255, 255, 0.25);-moz-box-shadow:inset 0 1px 2px rgba(0, 0, 0, 0.1),0 1px 0px rgba(255, 255, 255, 0.25);box-shadow:inset 0 1px 2px rgba(0, 0, 0, 0.1),0 1px 0px rgba(255, 255, 255, 0.25);-webkit-transition:none;-moz-transition:none;-ms-transition:none;-o-transition:none;transition:none;}.navbar-search input:-moz-placeholder{color:#e6e6e6;} +.navbar-search input::-webkit-input-placeholder{color:#e6e6e6;} +.navbar-search input:hover{background-color:#bfbfbf;background-color:rgba(255, 255, 255, 0.5);color:#ffffff;} +.navbar-search input:focus,.navbar-search 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);} +.navbar-static{margin-bottom:18px;} +.navbar-static .navbar-inner{margin-left:-20px;margin-right:-20px;padding-left:20px;padding-right:20px;-webkit-border-radius:4px;-moz-border-radius:4px;border-radius:4px;} +.navbar-fixed{position:fixed;top:0;left:0;right:0;z-index:10000;} .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);} diff --git a/docs/index.html b/docs/index.html index 194111b780..7e9d6c1d06 100644 --- a/docs/index.html +++ b/docs/index.html @@ -37,24 +37,24 @@ <!-- Topbar ================================================== --> - <div class="topbar" data-scrollspy="scrollspy"> - <div class="topbar-inner"> + <div class="navbar navbar-fixed" data-scrollspy="scrollspy"> + <div class="navbar-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 class="dropdown" data-dropdown="dropdown"> - <a href="#" class="dropdown-toggle">Scaffolding</a> + <li class="dropdown"> + <a href="#" class="dropdown-toggle" data-dropdown="true">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> + <li class="dropdown"> + <a href="#" class="dropdown-toggle" data-dropdown="true">CSS</a> <ul class="dropdown-menu"> <li><a href="#typography">Type</a></li> <li><a href="#tables">Tables</a></li> @@ -62,8 +62,8 @@ </ul> </li> - <li class="dropdown" data-dropdown="dropdown"> - <a href="#" class="dropdown-toggle">Patterns</a> + <li class="dropdown"> + <a href="#" class="dropdown-toggle" data-dropdown="true">Patterns</a> <ul class="dropdown-menu"> <li><a href="#media">Media</a></li> <li><a href="#navigation">Navigation</a></li> @@ -1258,44 +1258,42 @@ <h1>Navigation</h1> </div> <h2>Fixed topbar</h2> - <div class="topbar-wrapper" style="z-index: 5;"> - <div class="topbar" data-dropdown="dropdown" > - <div class="topbar-inner"> - <div class="container"> - <a class="brand" href="#">Project Name</a> - <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 class="form-search pull-left" action=""> - <input type="text" placeholder="Search" /> - </form> - <ul class="nav secondary-nav"> - <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> - </div> - </div><!-- /topbar-inner --> - </div><!-- /topbar --> - </div><!-- /topbar-wrapper --> + <div class="navbar navbar-static" data-dropdown="dropdown"> + <div class="navbar-inner"> + <div class="container"> + <a class="brand" href="#">Project Name</a> + <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 class="form-search navbar-search pull-left" action=""> + <input type="text" placeholder="Search"> + </form> + <ul class="nav secondary-nav"> + <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> + </div> + </div><!-- /topbar-inner --> + </div><!-- /topbar --> <div class="row"> <div class="span5"> diff --git a/docs/javascript.html b/docs/javascript.html index 9f2b138763..dd4c2d03a3 100644 --- a/docs/javascript.html +++ b/docs/javascript.html @@ -39,8 +39,8 @@ <!-- Topbar ================================================== --> - <div class="topbar" data-scrollspy="scrollspy"> - <div class="topbar-inner"> + <div class="navbar navbar-fixed" data-scrollspy="scrollspy"> + <div class="navbar-inner"> <div class="container"> <a class="brand" href="#">Bootstrap JS</a> <ul class="nav"> @@ -235,39 +235,37 @@ $('#my-modal').bind('hidden', function () { A programatic api for activating menus for a given topbar or tabbed navigation. </p> <h3>Demo</h3> - <div class="topbar-wrapper"> - <div id="topbar-example" class="topbar"> - <div class="topbar-inner"> - <div class="container"> - <a class="brand" href="#">Project Name</a> - <ul class="nav"> - <li><a href="#">Link</a></li> - <li><a href="#">Link</a></li> - </ul> - <form action=""> - <input type="text" placeholder="Search" /> - </form> - <ul class="nav secondary-nav"> - <li class="dropdown"> - <a href="#" class="dropdown-toggle" data-dropdown="true">Dropdown 1</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> - <li class="dropdown"> - <a href="#" class="dropdown-toggle" data-dropdown="true">Dropdown 2</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> - </div> + <div id="topbar-example" class="navbar navbar-static"> + <div class="navbar-inner"> + <div class="container" style="width: auto;"> + <a class="brand" href="#">Project Name</a> + <ul class="nav"> + <li><a href="#">Link</a></li> + <li><a href="#">Link</a></li> + </ul> + <form action="" class="search-form navbar-search"> + <input type="text" placeholder="Search"> + </form> + <ul class="nav secondary-nav"> + <li class="dropdown"> + <a href="#" class="dropdown-toggle" data-dropdown="true">Dropdown 1</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> + <li class="dropdown"> + <a href="#" class="dropdown-toggle" data-dropdown="true">Dropdown 2</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> </div> </div> </div> diff --git a/lib/patterns.less b/lib/patterns.less index 8ceffaa996..a82e2856d5 100644 --- a/lib/patterns.less +++ b/lib/patterns.less @@ -3,34 +3,41 @@ * ---------------------------------------------------------------------------- */ -// TOPBAR -// ------ +// NAVBAR (FIXED AND STATIC) +// ------------------------- -// Topbar for Branding and Nav -.topbar { - height: 40px; - position: fixed; - top: 0; - left: 0; - right: 0; - z-index: 10000; - overflow: visible; +// Navbar variables +@navBarHeight: 40px; +@navBarBgStart: #333; +@navBarBgEnd: #222; - // Links get text shadow +// Common styles +.navbar { + height: @navBarHeight; + overflow: visible; +} +// gradient is applied to it's own element because overflow visible is not honored by ie when filter is present +.navbar-inner { + background-color: @navBarBgEnd; + #gradient > .vertical(@navBarBgStart, @navBarBgEnd); + @shadow: 0 1px 3px rgba(0,0,0,.25), inset 0 -1px 0 rgba(0,0,0,.1); + .box-shadow(@shadow); +} +// Text and links +.navbar { + // Links get text-shadow a { color: @grayLight; text-shadow: 0 -1px 0 rgba(0,0,0,.25); } - // Hover and active states .brand a:hover, ul .active > a { - background-color: #333; + background-color: @navBarBgStart; background-color: rgba(255,255,255,.05); color: @white; text-decoration: none; } - // Website or project name .brand { float: left; @@ -42,7 +49,6 @@ font-weight: 200; line-height: 1; } - // Plain text in topbar p { margin: 0; @@ -52,70 +58,82 @@ color: @white; } } +} - // Search Form - .form-search { - position: relative; - margin-top: 5px; - margin-bottom: 0; - input { - background-color: #444; - background-color: rgba(255,255,255,.3); - #font > .sans-serif(13px, normal, 1); - padding: 4px 9px; - color: @white; - color: rgba(255,255,255,.75); - border: 1px solid #111; - .border-radius(4px); - @shadow: inset 0 1px 2px rgba(0,0,0,.1), 0 1px 0px rgba(255,255,255,.25); - .box-shadow(@shadow); - .transition(none); +// Navbar search +.navbar-search { + position: relative; + margin-top: 5px; + margin-bottom: 0; + float: left; + input { + background-color: #444; + background-color: rgba(255,255,255,.3); + #font > .sans-serif(13px, normal, 1); + padding: 4px 9px; + color: @white; + color: rgba(255,255,255,.75); + border: 1px solid #111; + .border-radius(4px); + @shadow: inset 0 1px 2px rgba(0,0,0,.1), 0 1px 0px rgba(255,255,255,.25); + .box-shadow(@shadow); + .transition(none); - // Placeholder text gets special styles; can't be bundled together though for some reason - &:-moz-placeholder { - color: @grayLighter; - } - &::-webkit-input-placeholder { - color: @grayLighter; - } - // Hover states - &:hover { - background-color: @grayLight; - background-color: rgba(255,255,255,.5); - color: @white; - } - // Focus states (we use .focused since IE8 and down doesn't support :focus) - &:focus, - &.focused { - outline: 0; - background-color: @white; - color: @grayDark; - text-shadow: 0 1px 0 @white; - border: 0; - padding: 5px 10px; - .box-shadow(0 0 3px rgba(0,0,0,.15)); - } + // Placeholder text gets special styles; can't be bundled together though for some reason + &:-moz-placeholder { + color: @grayLighter; + } + &::-webkit-input-placeholder { + color: @grayLighter; + } + // Hover states + &:hover { + background-color: @grayLight; + background-color: rgba(255,255,255,.5); + color: @white; + } + // Focus states (we use .focused since IE8 and down doesn't support :focus) + &:focus, + &.focused { + outline: 0; + background-color: @white; + color: @grayDark; + text-shadow: 0 1px 0 @white; + border: 0; + padding: 5px 10px; + .box-shadow(0 0 3px rgba(0,0,0,.15)); } - } - // Todo: remove from v2.0 when ready, added for legacy - .pull-right { - float: right; } } -// gradient is applied to it's own element because overflow visible is not honored by ie when filter is present -.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); - .box-shadow(@shadow); + +// Static navbar +.navbar-static { + margin-bottom: @baseLineHeight; +} +.navbar-static .navbar-inner { + margin-left: -20px; + margin-right: -20px; + padding-left: 20px; + padding-right: 20px; + .border-radius(4px); +} + +// Fixed navbar +.navbar-fixed { + position: fixed; + top: 0; + left: 0; + right: 0; + z-index: 10000; } + // NAVIGATION // ---------- -// Topbar Nav +// Nav for navbar and topbar // ul.nav for all topbar based navigation to avoid inheritance issues and over-specificity .nav { display: block; -- GitLab From 8c2bb99085816617704b5d537b9c901e26e03569 Mon Sep 17 00:00:00 2001 From: Mark Otto <mark.otto@twitter.com> Date: Tue, 11 Oct 2011 09:46:02 -0700 Subject: [PATCH 021/318] share new navbar in examples --- examples/container-app.html | 6 +++--- examples/fluid-reverse.html | 4 ++-- examples/fluid.html | 4 ++-- examples/hero.html | 4 ++-- 4 files changed, 9 insertions(+), 9 deletions(-) diff --git a/examples/container-app.html b/examples/container-app.html index 75328e645f..28807bb05e 100644 --- a/examples/container-app.html +++ b/examples/container-app.html @@ -75,8 +75,8 @@ <body> - <div class="topbar"> - <div class="fill"> + <div class="navbar"> + <div class="navbar-inner"> <div class="container"> <a class="brand" href="#">Project name</a> <ul class="nav"> @@ -84,7 +84,7 @@ <li><a href="#about">About</a></li> <li><a href="#contact">Contact</a></li> </ul> - <form action="" class="pull-right"> + <form action="" class="form-search navbar-form pull-right"> <input class="input-small" type="text" placeholder="Username"> <input class="input-small" type="password" placeholder="Password"> <button class="btn" type="submit">Sign in</button> diff --git a/examples/fluid-reverse.html b/examples/fluid-reverse.html index 7c13a44530..a32291d46c 100644 --- a/examples/fluid-reverse.html +++ b/examples/fluid-reverse.html @@ -28,8 +28,8 @@ <body> - <div class="topbar"> - <div class="topbar-inner"> + <div class="navbar"> + <div class="navbar-inner"> <div class="fluid-container"> <a class="brand" href="#">Project name</a> <ul class="nav"> diff --git a/examples/fluid.html b/examples/fluid.html index c6387846b6..3b8bb46a8d 100644 --- a/examples/fluid.html +++ b/examples/fluid.html @@ -28,8 +28,8 @@ <body> - <div class="topbar"> - <div class="topbar-inner"> + <div class="navbar"> + <div class="navbar-inner"> <div class="fluid-container"> <a class="brand" href="#">Project name</a> <ul class="nav"> diff --git a/examples/hero.html b/examples/hero.html index 6ded6e1e95..d84eb88434 100644 --- a/examples/hero.html +++ b/examples/hero.html @@ -28,8 +28,8 @@ <body> - <div class="topbar"> - <div class="fill"> + <div class="navbar"> + <div class="navbar-inner"> <div class="container"> <a class="brand" href="#">Project name</a> <ul class="nav"> -- GitLab From b6443905411dcdcec54d7eaad2f998a582271728 Mon Sep 17 00:00:00 2001 From: Mark Otto <mark.otto@twitter.com> Date: Tue, 11 Oct 2011 09:52:50 -0700 Subject: [PATCH 022/318] update navbar search form --- bootstrap.css | 23 ++++++++++------------- bootstrap.min.css | 8 ++++---- docs/index.html | 7 +------ docs/javascript.html | 4 ++-- lib/patterns.less | 7 +++---- 5 files changed, 20 insertions(+), 29 deletions(-) diff --git a/bootstrap.css b/bootstrap.css index 728590ba26..0da6a96ec8 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: Tue Oct 11 09:43:00 PDT 2011 + * Date: Tue Oct 11 09:52:07 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). @@ -1164,11 +1164,11 @@ table .headerSortUp.purple, table .headerSortDown.purple { } .navbar-search { position: relative; - margin-top: 5px; + margin-top: 6px; margin-bottom: 0; float: left; } -.navbar-search input { +.navbar-search .search-query { background-color: #444; background-color: rgba(255, 255, 255, 0.3); font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; @@ -1179,30 +1179,27 @@ table .headerSortUp.purple, table .headerSortDown.purple { color: #ffffff; color: rgba(255, 255, 255, 0.75); border: 1px solid #111; - -webkit-border-radius: 4px; - -moz-border-radius: 4px; - border-radius: 4px; - -webkit-box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1), 0 1px 0px rgba(255, 255, 255, 0.25); - -moz-box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1), 0 1px 0px rgba(255, 255, 255, 0.25); - box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1), 0 1px 0px rgba(255, 255, 255, 0.25); + -webkit-box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1), 0 1px 0px rgba(255, 255, 255, 0.15); + -moz-box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1), 0 1px 0px rgba(255, 255, 255, 0.15); + box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1), 0 1px 0px rgba(255, 255, 255, 0.15); -webkit-transition: none; -moz-transition: none; -ms-transition: none; -o-transition: none; transition: none; } -.navbar-search input:-moz-placeholder { +.navbar-search .search-query:-moz-placeholder { color: #e6e6e6; } -.navbar-search input::-webkit-input-placeholder { +.navbar-search .search-query::-webkit-input-placeholder { color: #e6e6e6; } -.navbar-search input:hover { +.navbar-search .search-query:hover { background-color: #bfbfbf; background-color: rgba(255, 255, 255, 0.5); color: #ffffff; } -.navbar-search input:focus, .navbar-search input.focused { +.navbar-search .search-query:focus, .navbar-search .search-query.focused { outline: 0; background-color: #ffffff; color: #404040; diff --git a/bootstrap.min.css b/bootstrap.min.css index 0e949c6038..45277ae40f 100644 --- a/bootstrap.min.css +++ b/bootstrap.min.css @@ -205,10 +205,10 @@ table .headerSortUp.purple,table .headerSortDown.purple{background-color:#e2d5f0 .navbar .brand a:hover,.navbar ul .active>a{background-color:#333333;background-color:rgba(255, 255, 255, 0.05);color:#ffffff;text-decoration:none;} .navbar .brand{float:left;display:block;padding:8px 20px 12px;margin-left:-20px;color:#ffffff;font-size:20px;font-weight:200;line-height:1;} .navbar p{margin:0;line-height:40px;}.navbar p a:hover{background-color:transparent;color:#ffffff;} -.navbar-search{position:relative;margin-top:5px;margin-bottom:0;float:left;}.navbar-search input{background-color:#444;background-color:rgba(255, 255, 255, 0.3);font-family:"Helvetica Neue",Helvetica,Arial,sans-serif;font-size:normal;font-weight:13px;line-height:1;padding:4px 9px;color:#ffffff;color:rgba(255, 255, 255, 0.75);border:1px solid #111;-webkit-border-radius:4px;-moz-border-radius:4px;border-radius:4px;-webkit-box-shadow:inset 0 1px 2px rgba(0, 0, 0, 0.1),0 1px 0px rgba(255, 255, 255, 0.25);-moz-box-shadow:inset 0 1px 2px rgba(0, 0, 0, 0.1),0 1px 0px rgba(255, 255, 255, 0.25);box-shadow:inset 0 1px 2px rgba(0, 0, 0, 0.1),0 1px 0px rgba(255, 255, 255, 0.25);-webkit-transition:none;-moz-transition:none;-ms-transition:none;-o-transition:none;transition:none;}.navbar-search input:-moz-placeholder{color:#e6e6e6;} -.navbar-search input::-webkit-input-placeholder{color:#e6e6e6;} -.navbar-search input:hover{background-color:#bfbfbf;background-color:rgba(255, 255, 255, 0.5);color:#ffffff;} -.navbar-search input:focus,.navbar-search 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);} +.navbar-search{position:relative;margin-top:6px;margin-bottom:0;float:left;}.navbar-search .search-query{background-color:#444;background-color:rgba(255, 255, 255, 0.3);font-family:"Helvetica Neue",Helvetica,Arial,sans-serif;font-size:normal;font-weight:13px;line-height:1;padding:4px 9px;color:#ffffff;color:rgba(255, 255, 255, 0.75);border:1px solid #111;-webkit-box-shadow:inset 0 1px 2px rgba(0, 0, 0, 0.1),0 1px 0px rgba(255, 255, 255, 0.15);-moz-box-shadow:inset 0 1px 2px rgba(0, 0, 0, 0.1),0 1px 0px rgba(255, 255, 255, 0.15);box-shadow:inset 0 1px 2px rgba(0, 0, 0, 0.1),0 1px 0px rgba(255, 255, 255, 0.15);-webkit-transition:none;-moz-transition:none;-ms-transition:none;-o-transition:none;transition:none;}.navbar-search .search-query:-moz-placeholder{color:#e6e6e6;} +.navbar-search .search-query::-webkit-input-placeholder{color:#e6e6e6;} +.navbar-search .search-query:hover{background-color:#bfbfbf;background-color:rgba(255, 255, 255, 0.5);color:#ffffff;} +.navbar-search .search-query:focus,.navbar-search .search-query.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);} .navbar-static{margin-bottom:18px;} .navbar-static .navbar-inner{margin-left:-20px;margin-right:-20px;padding-left:20px;padding-right:20px;-webkit-border-radius:4px;-moz-border-radius:4px;border-radius:4px;} .navbar-fixed{position:fixed;top:0;left:0;right:0;z-index:10000;} diff --git a/docs/index.html b/docs/index.html index 7e9d6c1d06..ced0c658fb 100644 --- a/docs/index.html +++ b/docs/index.html @@ -44,7 +44,6 @@ <ul class="nav"> <li class="active"><a href="#overview">Overview</a></li> <li><a href="#about">About</a></li> - <li class="dropdown"> <a href="#" class="dropdown-toggle" data-dropdown="true">Scaffolding</a> <ul class="dropdown-menu"> @@ -52,7 +51,6 @@ <li><a href="#layouts">Layouts</a></li> </ul> </li> - <li class="dropdown"> <a href="#" class="dropdown-toggle" data-dropdown="true">CSS</a> <ul class="dropdown-menu"> @@ -61,7 +59,6 @@ <li><a href="#forms">Forms</a></li> </ul> </li> - <li class="dropdown"> <a href="#" class="dropdown-toggle" data-dropdown="true">Patterns</a> <ul class="dropdown-menu"> @@ -71,8 +68,6 @@ <li><a href="#popovers">Popovers</a></li> </ul> </li> - - <li><a href="#javascript">Javascript</a></li> <li><a href="#less">Less</a></li> </ul> @@ -1278,7 +1273,7 @@ </li> </ul> <form class="form-search navbar-search pull-left" action=""> - <input type="text" placeholder="Search"> + <input type="text" class="search-query" placeholder="Search"> </form> <ul class="nav secondary-nav"> <li class="dropdown"> diff --git a/docs/javascript.html b/docs/javascript.html index dd4c2d03a3..66caad10b4 100644 --- a/docs/javascript.html +++ b/docs/javascript.html @@ -243,8 +243,8 @@ $('#my-modal').bind('hidden', function () { <li><a href="#">Link</a></li> <li><a href="#">Link</a></li> </ul> - <form action="" class="search-form navbar-search"> - <input type="text" placeholder="Search"> + <form class="form-search navbar-search pull-left" action=""> + <input type="text" class="search-query" placeholder="Search"> </form> <ul class="nav secondary-nav"> <li class="dropdown"> diff --git a/lib/patterns.less b/lib/patterns.less index a82e2856d5..f2a0b7f0e5 100644 --- a/lib/patterns.less +++ b/lib/patterns.less @@ -63,10 +63,10 @@ // Navbar search .navbar-search { position: relative; - margin-top: 5px; + margin-top: 6px; margin-bottom: 0; float: left; - input { + .search-query { background-color: #444; background-color: rgba(255,255,255,.3); #font > .sans-serif(13px, normal, 1); @@ -74,8 +74,7 @@ color: @white; color: rgba(255,255,255,.75); border: 1px solid #111; - .border-radius(4px); - @shadow: inset 0 1px 2px rgba(0,0,0,.1), 0 1px 0px rgba(255,255,255,.25); + @shadow: inset 0 1px 2px rgba(0,0,0,.1), 0 1px 0px rgba(255,255,255,.15); .box-shadow(@shadow); .transition(none); -- GitLab From fa8b1dc12dcfe993f1e4185f95ebe0981fbeb0f0 Mon Sep 17 00:00:00 2001 From: Mark Otto <mark.otto@twitter.com> Date: Tue, 11 Oct 2011 19:31:25 -0700 Subject: [PATCH 023/318] remove color scheme variables, remove font-face mixin --- bootstrap.css | 107 ++++++++++++++++++++++++++++++++++++++++++++- bootstrap.min.css | 70 ++++++++++++++--------------- lib/mixins.less | 17 ++----- lib/variables.less | 16 ------- 4 files changed, 144 insertions(+), 66 deletions(-) diff --git a/bootstrap.css b/bootstrap.css index 0da6a96ec8..d40c50c841 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: Tue Oct 11 09:52:07 PDT 2011 + * Date: Tue Oct 11 19:31:11 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). @@ -551,6 +551,9 @@ code, pre { -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px; + -webkit-background-clip: padding-box; + -moz-background-clip: padding; + background-clip: padding-box; } code { background-color: #fee9cc; @@ -569,6 +572,9 @@ pre { -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px; + -webkit-background-clip: padding-box; + -moz-background-clip: padding; + background-clip: padding-box; white-space: pre; white-space: pre-wrap; word-wrap: break-word; @@ -620,6 +626,9 @@ select, -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px; + -webkit-background-clip: padding-box; + -moz-background-clip: padding; + background-clip: padding-box; } /* Mini reset for unique input types */ input[type=checkbox], input[type=radio] { @@ -814,6 +823,9 @@ textarea[readonly] { -webkit-border-radius: 4px; -moz-border-radius: 4px; border-radius: 4px; + -webkit-background-clip: padding-box; + -moz-background-clip: padding; + background-clip: padding-box; } .has-error > label, .has-error span.help-inline, .has-error span.help-block { color: #9d261d; @@ -895,6 +907,9 @@ textarea[readonly] { -webkit-border-radius: 0 3px 3px 0; -moz-border-radius: 0 3px 3px 0; border-radius: 0 3px 3px 0; + -webkit-background-clip: padding-box; + -moz-background-clip: padding; + background-clip: padding-box; } .input-prepend .add-on, .input-append .add-on { position: relative; @@ -916,6 +931,9 @@ textarea[readonly] { -webkit-border-radius: 3px 0 0 3px; -moz-border-radius: 3px 0 0 3px; border-radius: 3px 0 0 3px; + -webkit-background-clip: padding-box; + -moz-background-clip: padding; + background-clip: padding-box; } .input-prepend .active, .input-append .active { background: #a9dba9; @@ -931,11 +949,17 @@ textarea[readonly] { -webkit-border-radius: 3px 0 0 3px; -moz-border-radius: 3px 0 0 3px; border-radius: 3px 0 0 3px; + -webkit-background-clip: padding-box; + -moz-background-clip: padding; + background-clip: padding-box; } .input-append .add-on { -webkit-border-radius: 0 3px 3px 0; -moz-border-radius: 0 3px 3px 0; border-radius: 0 3px 3px 0; + -webkit-background-clip: padding-box; + -moz-background-clip: padding; + background-clip: padding-box; margin-right: 0; margin-left: -1px; } @@ -943,6 +967,9 @@ textarea[readonly] { -webkit-border-radius: 14px; -moz-border-radius: 14px; border-radius: 14px; + -webkit-background-clip: padding-box; + -moz-background-clip: padding; + background-clip: padding-box; } .control-group { margin-bottom: 18px; @@ -982,6 +1009,9 @@ table { -webkit-border-radius: 4px; -moz-border-radius: 4px; border-radius: 4px; + -webkit-background-clip: padding-box; + -moz-background-clip: padding; + background-clip: padding-box; } table th, table td { padding: 10px 10px 9px; @@ -1007,21 +1037,33 @@ table tbody tr:first-child td:first-child { -webkit-border-radius: 4px 0 0 0; -moz-border-radius: 4px 0 0 0; border-radius: 4px 0 0 0; + -webkit-background-clip: padding-box; + -moz-background-clip: padding; + background-clip: padding-box; } table tbody tr:first-child td:last-child { -webkit-border-radius: 0 4px 0 0; -moz-border-radius: 0 4px 0 0; border-radius: 0 4px 0 0; + -webkit-background-clip: padding-box; + -moz-background-clip: padding; + background-clip: padding-box; } table tbody tr:last-child td:first-child { -webkit-border-radius: 0 0 0 4px; -moz-border-radius: 0 0 0 4px; border-radius: 0 0 0 4px; + -webkit-background-clip: padding-box; + -moz-background-clip: padding; + background-clip: padding-box; } table tbody tr:last-child td:last-child { -webkit-border-radius: 0 0 4px 0; -moz-border-radius: 0 0 4px 0; border-radius: 0 0 4px 0; + -webkit-background-clip: padding-box; + -moz-background-clip: padding; + background-clip: padding-box; } .zebra-striped tbody tr:nth-child(odd) td { background-color: #f9f9f9; @@ -1221,6 +1263,9 @@ table .headerSortUp.purple, table .headerSortDown.purple { -webkit-border-radius: 4px; -moz-border-radius: 4px; border-radius: 4px; + -webkit-background-clip: padding-box; + -moz-background-clip: padding; + background-clip: padding-box; } .navbar-fixed { position: fixed; @@ -1352,6 +1397,9 @@ table .headerSortUp.purple, table .headerSortDown.purple { -webkit-border-radius: 0 0 6px 6px; -moz-border-radius: 0 0 6px 6px; border-radius: 0 0 6px 6px; + -webkit-background-clip: padding-box; + -moz-background-clip: padding; + background-clip: padding-box; -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); @@ -1446,6 +1494,9 @@ table .headerSortUp.purple, table .headerSortDown.purple { -webkit-border-radius: 4px 4px 0 0; -moz-border-radius: 4px 4px 0 0; border-radius: 4px 4px 0 0; + -webkit-background-clip: padding-box; + -moz-background-clip: padding; + background-clip: padding-box; } .tabs > li > a:hover { text-decoration: none; @@ -1464,6 +1515,9 @@ table .headerSortUp.purple, table .headerSortDown.purple { -webkit-border-radius: 0 6px 6px 6px; -moz-border-radius: 0 6px 6px 6px; border-radius: 0 6px 6px 6px; + -webkit-background-clip: padding-box; + -moz-background-clip: padding; + background-clip: padding-box; } .tabs .dropdown-toggle:after { border-top-color: #999; @@ -1487,6 +1541,9 @@ table .headerSortUp.purple, table .headerSortDown.purple { -webkit-border-radius: 15px; -moz-border-radius: 15px; border-radius: 15px; + -webkit-background-clip: padding-box; + -moz-background-clip: padding; + background-clip: padding-box; } .pills a:hover { background: #00438a; @@ -1522,6 +1579,9 @@ table .headerSortUp.purple, table .headerSortDown.purple { -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px; + -webkit-background-clip: padding-box; + -moz-background-clip: padding; + background-clip: padding-box; -webkit-box-shadow: inset 0 1px 0 #ffffff; -moz-box-shadow: inset 0 1px 0 #ffffff; box-shadow: inset 0 1px 0 #ffffff; @@ -1544,6 +1604,9 @@ table .headerSortUp.purple, table .headerSortDown.purple { -webkit-border-radius: 6px; -moz-border-radius: 6px; border-radius: 6px; + -webkit-background-clip: padding-box; + -moz-background-clip: padding; + background-clip: padding-box; } .hero-unit h1 { margin-bottom: 0; @@ -1659,6 +1722,9 @@ footer { -webkit-border-radius: 4px; -moz-border-radius: 4px; border-radius: 4px; + -webkit-background-clip: padding-box; + -moz-background-clip: padding; + background-clip: padding-box; -webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05); -moz-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05); @@ -1728,6 +1794,9 @@ footer { -webkit-border-radius: 6px; -moz-border-radius: 6px; border-radius: 6px; + -webkit-background-clip: padding-box; + -moz-background-clip: padding; + background-clip: padding-box; } .btn.small { padding: 7px 9px 7px; @@ -1775,6 +1844,9 @@ button.btn::-moz-focus-inner, input[type=submit].btn::-moz-focus-inner { -webkit-border-radius: 0; -moz-border-radius: 0; border-radius: 0; + -webkit-background-clip: padding-box; + -moz-background-clip: padding; + background-clip: padding-box; } .btn-group .btn:first-child { margin-left: 0; @@ -1840,6 +1912,9 @@ button.btn::-moz-focus-inner, input[type=submit].btn::-moz-focus-inner { -webkit-border-radius: 4px; -moz-border-radius: 4px; border-radius: 4px; + -webkit-background-clip: padding-box; + -moz-background-clip: padding; + background-clip: padding-box; -webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.25); -moz-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.25); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.25); @@ -1915,6 +1990,9 @@ button.btn::-moz-focus-inner, input[type=submit].btn::-moz-focus-inner { -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px; + -webkit-background-clip: padding-box; + -moz-background-clip: padding; + background-clip: padding-box; -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); @@ -1954,6 +2032,9 @@ button.btn::-moz-focus-inner, input[type=submit].btn::-moz-focus-inner { -webkit-border-radius: 4px; -moz-border-radius: 4px; border-radius: 4px; + -webkit-background-clip: padding-box; + -moz-background-clip: padding; + background-clip: padding-box; -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.05); -moz-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.05); box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.05); @@ -1996,6 +2077,9 @@ button.btn::-moz-focus-inner, input[type=submit].btn::-moz-focus-inner { -webkit-border-radius: 6px; -moz-border-radius: 6px; border-radius: 6px; + -webkit-background-clip: padding-box; + -moz-background-clip: padding; + background-clip: padding-box; -webkit-box-shadow: 0 3px 7px rgba(0, 0, 0, 0.3); -moz-box-shadow: 0 3px 7px rgba(0, 0, 0, 0.3); box-shadow: 0 3px 7px rgba(0, 0, 0, 0.3); @@ -2031,6 +2115,9 @@ button.btn::-moz-focus-inner, input[type=submit].btn::-moz-focus-inner { -webkit-border-radius: 0 0 6px 6px; -moz-border-radius: 0 0 6px 6px; border-radius: 0 0 6px 6px; + -webkit-background-clip: padding-box; + -moz-background-clip: padding; + background-clip: padding-box; -webkit-box-shadow: inset 0 1px 0 #ffffff; -moz-box-shadow: inset 0 1px 0 #ffffff; box-shadow: inset 0 1px 0 #ffffff; @@ -2110,6 +2197,9 @@ button.btn::-moz-focus-inner, input[type=submit].btn::-moz-focus-inner { -webkit-border-radius: 4px; -moz-border-radius: 4px; border-radius: 4px; + -webkit-background-clip: padding-box; + -moz-background-clip: padding; + background-clip: padding-box; } .twipsy-arrow { position: absolute; @@ -2170,6 +2260,9 @@ button.btn::-moz-focus-inner, input[type=submit].btn::-moz-focus-inner { -webkit-border-radius: 6px; -moz-border-radius: 6px; border-radius: 6px; + -webkit-background-clip: padding-box; + -moz-background-clip: padding; + background-clip: padding-box; -webkit-box-shadow: 0 3px 7px rgba(0, 0, 0, 0.3); -moz-box-shadow: 0 3px 7px rgba(0, 0, 0, 0.3); box-shadow: 0 3px 7px rgba(0, 0, 0, 0.3); @@ -2181,6 +2274,9 @@ button.btn::-moz-focus-inner, input[type=submit].btn::-moz-focus-inner { -webkit-border-radius: 3px 3px 0 0; -moz-border-radius: 3px 3px 0 0; border-radius: 3px 3px 0 0; + -webkit-background-clip: padding-box; + -moz-background-clip: padding; + background-clip: padding-box; border-bottom: 1px solid #eee; } .popover .content { @@ -2190,6 +2286,9 @@ button.btn::-moz-focus-inner, input[type=submit].btn::-moz-focus-inner { -moz-border-radius: 0 0 3px 3px; border-radius: 0 0 3px 3px; -webkit-background-clip: padding-box; + -moz-background-clip: padding; + background-clip: padding-box; + -webkit-background-clip: padding-box; -moz-background-clip: padding-box; background-clip: padding-box; } @@ -2217,6 +2316,9 @@ button.btn::-moz-focus-inner, input[type=submit].btn::-moz-focus-inner { -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px; + -webkit-background-clip: padding-box; + -moz-background-clip: padding; + background-clip: padding-box; } .label.important { background-color: #c43c35; @@ -2255,6 +2357,9 @@ button.btn::-moz-focus-inner, input[type=submit].btn::-moz-focus-inner { -webkit-border-radius: 4px; -moz-border-radius: 4px; border-radius: 4px; + -webkit-background-clip: padding-box; + -moz-background-clip: padding; + background-clip: padding-box; -webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.075); -moz-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.075); box-shadow: 0 1px 1px rgba(0, 0, 0, 0.075); diff --git a/bootstrap.min.css b/bootstrap.min.css index 45277ae40f..d0662829a3 100644 --- a/bootstrap.min.css +++ b/bootstrap.min.css @@ -103,15 +103,15 @@ em{font-style:italic;font-weight:inherit;line-height:inherit;} blockquote{margin-bottom:18px;border-left:5px solid #eee;padding-left:15px;}blockquote p{font-size:14px;font-weight:300;line-height:18px;margin-bottom:0;} blockquote small{display:block;font-size:12px;font-weight:300;line-height:18px;color:#bfbfbf;}blockquote small:before{content:'\2014 \00A0';} address{display:block;line-height:18px;margin-bottom:18px;} -code,pre{padding:0 3px 2px;font-family:Menlo, Monaco, Andale Mono, Courier New, monospace;font-size:12px;-webkit-border-radius:3px;-moz-border-radius:3px;border-radius:3px;} +code,pre{padding:0 3px 2px;font-family:Menlo, Monaco, Andale Mono, Courier New, monospace;font-size:12px;-webkit-border-radius:3px;-moz-border-radius:3px;border-radius:3px;-webkit-background-clip:padding-box;-moz-background-clip:padding;background-clip:padding-box;} code{background-color:#fee9cc;color:rgba(0, 0, 0, 0.75);padding:1px 3px;} -pre{background-color:#f5f5f5;display:block;padding:8.5px;margin:0 0 18px;line-height:18px;font-size:12px;border:1px solid #ccc;border:1px solid rgba(0, 0, 0, 0.15);-webkit-border-radius:3px;-moz-border-radius:3px;border-radius:3px;white-space:pre;white-space:pre-wrap;word-wrap:break-word;} +pre{background-color:#f5f5f5;display:block;padding:8.5px;margin:0 0 18px;line-height:18px;font-size:12px;border:1px solid #ccc;border:1px solid rgba(0, 0, 0, 0.15);-webkit-border-radius:3px;-moz-border-radius:3px;border-radius:3px;-webkit-background-clip:padding-box;-moz-background-clip:padding;background-clip:padding-box;white-space:pre;white-space:pre-wrap;word-wrap:break-word;} form{margin-bottom:18px;} legend{display:block;width:100%;margin-bottom:27px;font-size:19.5px;line-height:36px;color:#404040;border-bottom:1px solid #eee;} label,input,select,textarea{font-family:"Helvetica Neue",Helvetica,Arial,sans-serif;font-size:13px;font-weight:normal;line-height:18px;} label{display:block;margin-bottom:5px;color:#404040;} input[type=checkbox],input[type=radio]{cursor:pointer;} -input,textarea,select,.uneditable-input{display:inline-block;width:210px;height:18px;padding:4px;font-size:13px;line-height:18px;color:#808080;border:1px solid #ccc;-webkit-border-radius:3px;-moz-border-radius:3px;border-radius:3px;} +input,textarea,select,.uneditable-input{display:inline-block;width:210px;height:18px;padding:4px;font-size:13px;line-height:18px;color:#808080;border:1px solid #ccc;-webkit-border-radius:3px;-moz-border-radius:3px;border-radius:3px;-webkit-background-clip:padding-box;-moz-background-clip:padding;background-clip:padding-box;} input[type=checkbox],input[type=radio]{width:auto;height:auto;padding:0;margin:3px 0;*margin-top:0;line-height:normal;border:none;} input[type=file]{background-color:#ffffff;padding:initial;border:initial;line-height:initial;-webkit-box-shadow:none;-moz-box-shadow:none;box-shadow:none;} input[type=button],input[type=reset],input[type=submit]{width:auto;height:auto;} @@ -144,7 +144,7 @@ input.span14,textarea.span14,select.span14{display:inline-block;float:none;width input.span15,textarea.span15,select.span15{display:inline-block;float:none;width:870px;margin-left:0;} input.span16,textarea.span16,select.span16{display:inline-block;float:none;width:930px;margin-left:0;} input[disabled],select[disabled],textarea[disabled],input[readonly],select[readonly],textarea[readonly]{background-color:#f5f5f5;border-color:#ddd;cursor:not-allowed;} -.has-error{background:#f8dcda;padding:9px 0;margin:-10px 0 10px;-webkit-border-radius:4px;-moz-border-radius:4px;border-radius:4px;}.has-error>label,.has-error span.help-inline,.has-error span.help-block{color:#9d261d;} +.has-error{background:#f8dcda;padding:9px 0;margin:-10px 0 10px;-webkit-border-radius:4px;-moz-border-radius:4px;border-radius:4px;-webkit-background-clip:padding-box;-moz-background-clip:padding;background-clip:padding-box;}.has-error>label,.has-error span.help-inline,.has-error span.help-block{color:#9d261d;} .has-error input,.has-error textarea,.has-error select{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);}.has-error input:focus,.has-error textarea:focus,.has-error select: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);} .has-error .input-prepend span.add-on,.has-error .input-append span.add-on{background:#f4c8c5;border-color:#c87872;color:#b9554d;} .form-actions{padding:17px 20px 18px;margin-top:18px;margin-bottom:18px;background-color:#f5f5f5;border-top:1px solid #ddd;} @@ -158,28 +158,28 @@ input[disabled],select[disabled],textarea[disabled],input[readonly],select[reado .inline-inputs input.mini{width:60px;} .inline-inputs input.small{width:90px;} .inline-inputs span{padding:0 2px 0 1px;} -.input-prepend input,.input-append input{-webkit-border-radius:0 3px 3px 0;-moz-border-radius:0 3px 3px 0;border-radius:0 3px 3px 0;} -.input-prepend .add-on,.input-append .add-on{position:relative;background:#f5f5f5;border:1px solid #ccc;z-index:2;float:left;display:block;width:auto;min-width:16px;height:18px;padding:4px 4px 4px 5px;margin-right:-1px;font-weight:normal;line-height:18px;color:#bfbfbf;text-align:center;text-shadow:0 1px 0 #ffffff;-webkit-border-radius:3px 0 0 3px;-moz-border-radius:3px 0 0 3px;border-radius:3px 0 0 3px;} +.input-prepend input,.input-append input{-webkit-border-radius:0 3px 3px 0;-moz-border-radius:0 3px 3px 0;border-radius:0 3px 3px 0;-webkit-background-clip:padding-box;-moz-background-clip:padding;background-clip:padding-box;} +.input-prepend .add-on,.input-append .add-on{position:relative;background:#f5f5f5;border:1px solid #ccc;z-index:2;float:left;display:block;width:auto;min-width:16px;height:18px;padding:4px 4px 4px 5px;margin-right:-1px;font-weight:normal;line-height:18px;color:#bfbfbf;text-align:center;text-shadow:0 1px 0 #ffffff;-webkit-border-radius:3px 0 0 3px;-moz-border-radius:3px 0 0 3px;border-radius:3px 0 0 3px;-webkit-background-clip:padding-box;-moz-background-clip:padding;background-clip:padding-box;} .input-prepend .active,.input-append .active{background:#a9dba9;border-color:#46a546;} .input-prepend .add-on{*margin-top:1px;} -.input-append input{float:left;-webkit-border-radius:3px 0 0 3px;-moz-border-radius:3px 0 0 3px;border-radius:3px 0 0 3px;} -.input-append .add-on{-webkit-border-radius:0 3px 3px 0;-moz-border-radius:0 3px 3px 0;border-radius:0 3px 3px 0;margin-right:0;margin-left:-1px;} -.form-search .search-query{-webkit-border-radius:14px;-moz-border-radius:14px;border-radius:14px;} +.input-append input{float:left;-webkit-border-radius:3px 0 0 3px;-moz-border-radius:3px 0 0 3px;border-radius:3px 0 0 3px;-webkit-background-clip:padding-box;-moz-background-clip:padding;background-clip:padding-box;} +.input-append .add-on{-webkit-border-radius:0 3px 3px 0;-moz-border-radius:0 3px 3px 0;border-radius:0 3px 3px 0;-webkit-background-clip:padding-box;-moz-background-clip:padding;background-clip:padding-box;margin-right:0;margin-left:-1px;} +.form-search .search-query{-webkit-border-radius:14px;-moz-border-radius:14px;border-radius:14px;-webkit-background-clip:padding-box;-moz-background-clip:padding;background-clip:padding-box;} .control-group{margin-bottom:18px;} .control-group>label{font-weight:bold;} .form-horizontal .control-group>label{float:left;width:130px;padding-top:5px;text-align:right;} .form-horizontal .controls{margin-left:150px;} .form-horizontal .control-list{padding-top:6px;} .form-horizontal .form-actions{padding-left:150px;} -table{width:100%;margin-bottom:18px;padding:0;border-collapse:separate;*border-collapse:collapse;font-size:13px;border:1px solid #ddd;-webkit-border-radius:4px;-moz-border-radius:4px;border-radius:4px;}table th,table td{padding:10px 10px 9px;line-height:18px;text-align:left;} +table{width:100%;margin-bottom:18px;padding:0;border-collapse:separate;*border-collapse:collapse;font-size:13px;border:1px solid #ddd;-webkit-border-radius:4px;-moz-border-radius:4px;border-radius:4px;-webkit-background-clip:padding-box;-moz-background-clip:padding;background-clip:padding-box;}table th,table td{padding:10px 10px 9px;line-height:18px;text-align:left;} table th{padding-top:9px;font-weight:bold;vertical-align:middle;border-bottom:1px solid #ddd;} table td{vertical-align:top;} table th+th,table td+td{border-left:1px solid #ddd;} table tr+tr td{border-top:1px solid #ddd;} -table tbody tr:first-child td:first-child{-webkit-border-radius:4px 0 0 0;-moz-border-radius:4px 0 0 0;border-radius:4px 0 0 0;} -table tbody tr:first-child td:last-child{-webkit-border-radius:0 4px 0 0;-moz-border-radius:0 4px 0 0;border-radius:0 4px 0 0;} -table tbody tr:last-child td:first-child{-webkit-border-radius:0 0 0 4px;-moz-border-radius:0 0 0 4px;border-radius:0 0 0 4px;} -table tbody tr:last-child td:last-child{-webkit-border-radius:0 0 4px 0;-moz-border-radius:0 0 4px 0;border-radius:0 0 4px 0;} +table tbody tr:first-child td:first-child{-webkit-border-radius:4px 0 0 0;-moz-border-radius:4px 0 0 0;border-radius:4px 0 0 0;-webkit-background-clip:padding-box;-moz-background-clip:padding;background-clip:padding-box;} +table tbody tr:first-child td:last-child{-webkit-border-radius:0 4px 0 0;-moz-border-radius:0 4px 0 0;border-radius:0 4px 0 0;-webkit-background-clip:padding-box;-moz-background-clip:padding;background-clip:padding-box;} +table tbody tr:last-child td:first-child{-webkit-border-radius:0 0 0 4px;-moz-border-radius:0 0 0 4px;border-radius:0 0 0 4px;-webkit-background-clip:padding-box;-moz-background-clip:padding;background-clip:padding-box;} +table tbody tr:last-child td:last-child{-webkit-border-radius:0 0 4px 0;-moz-border-radius:0 0 4px 0;border-radius:0 0 4px 0;-webkit-background-clip:padding-box;-moz-background-clip:padding;background-clip:padding-box;} .zebra-striped tbody tr:nth-child(odd) td{background-color:#f9f9f9;} .zebra-striped tbody tr:hover td{background-color:#f5f5f5;} .zebra-striped .header{cursor:pointer;}.zebra-striped .header:after{content:"";float:right;margin-top:7px;border-width:0 4px 4px;border-style:solid;border-color:#000 transparent;visibility:hidden;} @@ -210,7 +210,7 @@ table .headerSortUp.purple,table .headerSortDown.purple{background-color:#e2d5f0 .navbar-search .search-query:hover{background-color:#bfbfbf;background-color:rgba(255, 255, 255, 0.5);color:#ffffff;} .navbar-search .search-query:focus,.navbar-search .search-query.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);} .navbar-static{margin-bottom:18px;} -.navbar-static .navbar-inner{margin-left:-20px;margin-right:-20px;padding-left:20px;padding-right:20px;-webkit-border-radius:4px;-moz-border-radius:4px;border-radius:4px;} +.navbar-static .navbar-inner{margin-left:-20px;margin-right:-20px;padding-left:20px;padding-right:20px;-webkit-border-radius:4px;-moz-border-radius:4px;border-radius:4px;-webkit-background-clip:padding-box;-moz-background-clip:padding;background-clip:padding-box;} .navbar-fixed{position:fixed;top:0;left:0;right:0;z-index:10000;} .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;} @@ -225,7 +225,7 @@ table .headerSortUp.purple,table .headerSortDown.purple{background-color:#e2d5f0 .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:6px;border-left:4px solid transparent;border-right:4px solid transparent;border-top:4px solid #ffffff;filter:alpha(opacity=30);-khtml-opacity:0.3;-moz-opacity:0.3;opacity:0.3;} .dropdown:hover .dropdown-toggle:after{filter:alpha(opacity=100);-khtml-opacity:1;-moz-opacity:1;opacity:1;} -.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{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-background-clip:padding-box;-moz-background-clip:padding;background-clip:padding-box;-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-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);background-repeat:repeat-x;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);} .dropdown.open .dropdown-toggle{color:#ffffff;background:#ccc;background:rgba(0, 0, 0, 0.3);} @@ -233,21 +233,21 @@ table .headerSortUp.purple,table .headerSortDown.purple{background-color:#e2d5f0 .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{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;-webkit-background-clip:padding-box;-moz-background-clip:padding;background-clip:padding-box;}.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 .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-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;-webkit-background-clip:padding-box;-moz-background-clip:padding;background-clip:padding-box;} .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 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;-webkit-background-clip:padding-box;-moz-background-clip:padding;background-clip:padding-box;}.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);} .tab-content>*,.pill-content>*{display:none;} .tab-content>.active,.pill-content>.active{display:block;} -.breadcrumb{margin:0 0 18px;padding:7px 14px;background-color:#f5f5f5;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);background-repeat:repeat-x;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{margin:0 0 18px;padding:7px 14px;background-color:#f5f5f5;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);background-repeat:repeat-x;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-background-clip:padding-box;-moz-background-clip:padding;background-clip:padding-box;-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{background-color:#f5f5f5;margin-bottom:30px;padding:60px;-webkit-border-radius:6px;-moz-border-radius:6px;border-radius:6px;-webkit-background-clip:padding-box;-moz-background-clip:padding;background-clip:padding-box;}.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;} .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;} @@ -255,13 +255,13 @@ footer{margin-top:17px;padding-top:17px;border-top:1px solid #eee;} .btn.danger,.alert-message.danger,.btn.error,.alert-message.error{background-color:#c43c35;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);background-repeat:repeat-x;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);} .btn.success,.alert-message.success{background-color:#57a957;background-image:-khtml-gradient(linear, left top, left bottom, from(#62c462), to(#57a957));background-image:-moz-linear-gradient(top, #62c462, #57a957);background-image:-ms-linear-gradient(top, #62c462, #57a957);background-image:-webkit-gradient(linear, left top, left bottom, color-stop(0%, #62c462), color-stop(100%, #57a957));background-image:-webkit-linear-gradient(top, #62c462, #57a957);background-image:-o-linear-gradient(top, #62c462, #57a957);background-image:linear-gradient(top, #62c462, #57a957);background-repeat:repeat-x;filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#62c462', endColorstr='#57a957', GradientType=0);text-shadow:0 -1px 0 rgba(0, 0, 0, 0.25);border-color:#57a957 #57a957 #3d773d;border-color:rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);} .btn.info,.alert-message.info{background-color:#339bb9;background-image:-khtml-gradient(linear, left top, left bottom, from(#5bc0de), to(#339bb9));background-image:-moz-linear-gradient(top, #5bc0de, #339bb9);background-image:-ms-linear-gradient(top, #5bc0de, #339bb9);background-image:-webkit-gradient(linear, left top, left bottom, color-stop(0%, #5bc0de), color-stop(100%, #339bb9));background-image:-webkit-linear-gradient(top, #5bc0de, #339bb9);background-image:-o-linear-gradient(top, #5bc0de, #339bb9);background-image:linear-gradient(top, #5bc0de, #339bb9);background-repeat:repeat-x;filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#5bc0de', endColorstr='#339bb9', GradientType=0);text-shadow:0 -1px 0 rgba(0, 0, 0, 0.25);border-color:#339bb9 #339bb9 #22697d;border-color:rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);} -.btn{cursor:pointer;display:inline-block;background-color:#e6e6e6;background-image:-webkit-gradient(linear, 0 0, 0 100%, from(#ffffff), color-stop(25%, #ffffff), to(#e6e6e6));background-image:-webkit-linear-gradient(#ffffff, #ffffff 25%, #e6e6e6);background-image:-moz-linear-gradient(top, #ffffff, #ffffff 25%, #e6e6e6);background-image:-ms-linear-gradient(#ffffff, #ffffff 25%, #e6e6e6);background-image:-o-linear-gradient(#ffffff, #ffffff 25%, #e6e6e6);background-image:linear-gradient(#ffffff, #ffffff 25%, #e6e6e6);background-repeat:no-repeat;filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#e6e6e6', GradientType=0);padding:5px 14px 6px;text-shadow:0 1px 1px rgba(255, 255, 255, 0.75);color:#333;font-size:13px;line-height:normal;border:1px solid #ccc;border-bottom-color:#bbb;-webkit-border-radius:4px;-moz-border-radius:4px;border-radius:4px;-webkit-box-shadow:inset 0 1px 0 rgba(255, 255, 255, 0.2),0 1px 2px rgba(0, 0, 0, 0.05);-moz-box-shadow:inset 0 1px 0 rgba(255, 255, 255, 0.2),0 1px 2px rgba(0, 0, 0, 0.05);box-shadow:inset 0 1px 0 rgba(255, 255, 255, 0.2),0 1px 2px rgba(0, 0, 0, 0.05);-webkit-transition:0.1s linear all;-moz-transition:0.1s linear all;-ms-transition:0.1s linear all;-o-transition:0.1s linear all;transition:0.1s linear all;}.btn:hover{background-position:0 -15px;color:#333;text-decoration:none;} +.btn{cursor:pointer;display:inline-block;background-color:#e6e6e6;background-image:-webkit-gradient(linear, 0 0, 0 100%, from(#ffffff), color-stop(25%, #ffffff), to(#e6e6e6));background-image:-webkit-linear-gradient(#ffffff, #ffffff 25%, #e6e6e6);background-image:-moz-linear-gradient(top, #ffffff, #ffffff 25%, #e6e6e6);background-image:-ms-linear-gradient(#ffffff, #ffffff 25%, #e6e6e6);background-image:-o-linear-gradient(#ffffff, #ffffff 25%, #e6e6e6);background-image:linear-gradient(#ffffff, #ffffff 25%, #e6e6e6);background-repeat:no-repeat;filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#e6e6e6', GradientType=0);padding:5px 14px 6px;text-shadow:0 1px 1px rgba(255, 255, 255, 0.75);color:#333;font-size:13px;line-height:normal;border:1px solid #ccc;border-bottom-color:#bbb;-webkit-border-radius:4px;-moz-border-radius:4px;border-radius:4px;-webkit-background-clip:padding-box;-moz-background-clip:padding;background-clip:padding-box;-webkit-box-shadow:inset 0 1px 0 rgba(255, 255, 255, 0.2),0 1px 2px rgba(0, 0, 0, 0.05);-moz-box-shadow:inset 0 1px 0 rgba(255, 255, 255, 0.2),0 1px 2px rgba(0, 0, 0, 0.05);box-shadow:inset 0 1px 0 rgba(255, 255, 255, 0.2),0 1px 2px rgba(0, 0, 0, 0.05);-webkit-transition:0.1s linear all;-moz-transition:0.1s linear all;-ms-transition:0.1s linear all;-o-transition:0.1s linear all;transition:0.1s linear all;}.btn:hover{background-position:0 -15px;color:#333;text-decoration:none;} .btn:focus{outline:1px dotted #666;} .btn.primary{color:#ffffff;background-color:#0064cd;background-image:-khtml-gradient(linear, left top, left bottom, from(#049cdb), to(#0064cd));background-image:-moz-linear-gradient(top, #049cdb, #0064cd);background-image:-ms-linear-gradient(top, #049cdb, #0064cd);background-image:-webkit-gradient(linear, left top, left bottom, color-stop(0%, #049cdb), color-stop(100%, #0064cd));background-image:-webkit-linear-gradient(top, #049cdb, #0064cd);background-image:-o-linear-gradient(top, #049cdb, #0064cd);background-image:linear-gradient(top, #049cdb, #0064cd);background-repeat:repeat-x;filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#049cdb', endColorstr='#0064cd', GradientType=0);text-shadow:0 -1px 0 rgba(0, 0, 0, 0.25);border-color:#0064cd #0064cd #003f81;border-color:rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);} .btn:active{-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);} .btn.disabled{cursor:default;background-image:none;filter:progid:DXImageTransform.Microsoft.gradient(enabled = false);filter:alpha(opacity=65);-khtml-opacity:0.65;-moz-opacity:0.65;opacity:0.65;-webkit-box-shadow:none;-moz-box-shadow:none;box-shadow:none;} .btn[disabled]{cursor:default;background-image:none;filter:progid:DXImageTransform.Microsoft.gradient(enabled = false);filter:alpha(opacity=65);-khtml-opacity:0.65;-moz-opacity:0.65;opacity:0.65;-webkit-box-shadow:none;-moz-box-shadow:none;box-shadow:none;} -.btn.large{font-size:15px;line-height:normal;padding:9px 14px 9px;-webkit-border-radius:6px;-moz-border-radius:6px;border-radius:6px;} +.btn.large{font-size:15px;line-height:normal;padding:9px 14px 9px;-webkit-border-radius:6px;-moz-border-radius:6px;border-radius:6px;-webkit-background-clip:padding-box;-moz-background-clip:padding;background-clip:padding-box;} .btn.small{padding:7px 9px 7px;font-size:11px;} :root .alert-message,:root .btn{border-radius:0 \0;} button.btn::-moz-focus-inner,input[type=submit].btn::-moz-focus-inner{padding:0;border:0;} @@ -270,11 +270,11 @@ button.btn::-moz-focus-inner,input[type=submit].btn::-moz-focus-inner{padding:0; .btn-toolbar .btn-group{float:left;margin-right:10px;} .btn-group{zoom:1;}.btn-group:before,.btn-group:after{display:table;content:"";zoom:1;*display:inline;} .btn-group:after{clear:both;} -.btn-group .btn{position:relative;float:left;margin-left:-1px;-webkit-border-radius:0;-moz-border-radius:0;border-radius:0;}.btn-group .btn:first-child{margin-left:0;-webkit-border-top-left-radius:4px;-moz-border-radius-topleft:4px;border-top-left-radius:4px;-webkit-border-bottom-left-radius:4px;-moz-border-radius-bottomleft:4px;border-bottom-left-radius:4px;} +.btn-group .btn{position:relative;float:left;margin-left:-1px;-webkit-border-radius:0;-moz-border-radius:0;border-radius:0;-webkit-background-clip:padding-box;-moz-background-clip:padding;background-clip:padding-box;}.btn-group .btn:first-child{margin-left:0;-webkit-border-top-left-radius:4px;-moz-border-radius-topleft:4px;border-top-left-radius:4px;-webkit-border-bottom-left-radius:4px;-moz-border-radius-bottomleft:4px;border-bottom-left-radius:4px;} .btn-group .btn:last-child{-webkit-border-top-right-radius:4px;-moz-border-radius-topright:4px;border-top-right-radius:4px;-webkit-border-bottom-right-radius:4px;-moz-border-radius-bottomright:4px;border-bottom-right-radius:4px;} .btn-group .btn:hover,.btn-group .btn:focus,.btn-group .btn:active{z-index:2;} .close{float:right;color:#000000;font-size:20px;font-weight:bold;line-height:13.5px;text-shadow:0 1px 0 #ffffff;filter:alpha(opacity=20);-khtml-opacity:0.2;-moz-opacity:0.2;opacity:0.2;}.close:hover{color:#000000;text-decoration:none;filter:alpha(opacity=40);-khtml-opacity:0.4;-moz-opacity:0.4;opacity:0.4;} -.alert-message{position:relative;padding:7px 15px;margin-bottom:18px;color:#404040;background-color:#eedc94;background-image:-khtml-gradient(linear, left top, left bottom, from(#fceec1), to(#eedc94));background-image:-moz-linear-gradient(top, #fceec1, #eedc94);background-image:-ms-linear-gradient(top, #fceec1, #eedc94);background-image:-webkit-gradient(linear, left top, left bottom, color-stop(0%, #fceec1), color-stop(100%, #eedc94));background-image:-webkit-linear-gradient(top, #fceec1, #eedc94);background-image:-o-linear-gradient(top, #fceec1, #eedc94);background-image:linear-gradient(top, #fceec1, #eedc94);background-repeat:repeat-x;filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#fceec1', endColorstr='#eedc94', GradientType=0);text-shadow:0 -1px 0 rgba(0, 0, 0, 0.25);border-color:#eedc94 #eedc94 #e4c652;border-color:rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);text-shadow:0 1px 0 rgba(255, 255, 255, 0.5);border-width:1px;border-style:solid;-webkit-border-radius:4px;-moz-border-radius:4px;border-radius:4px;-webkit-box-shadow:inset 0 1px 0 rgba(255, 255, 255, 0.25);-moz-box-shadow:inset 0 1px 0 rgba(255, 255, 255, 0.25);box-shadow:inset 0 1px 0 rgba(255, 255, 255, 0.25);}.alert-message .close{*margin-top:3px;} +.alert-message{position:relative;padding:7px 15px;margin-bottom:18px;color:#404040;background-color:#eedc94;background-image:-khtml-gradient(linear, left top, left bottom, from(#fceec1), to(#eedc94));background-image:-moz-linear-gradient(top, #fceec1, #eedc94);background-image:-ms-linear-gradient(top, #fceec1, #eedc94);background-image:-webkit-gradient(linear, left top, left bottom, color-stop(0%, #fceec1), color-stop(100%, #eedc94));background-image:-webkit-linear-gradient(top, #fceec1, #eedc94);background-image:-o-linear-gradient(top, #fceec1, #eedc94);background-image:linear-gradient(top, #fceec1, #eedc94);background-repeat:repeat-x;filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#fceec1', endColorstr='#eedc94', GradientType=0);text-shadow:0 -1px 0 rgba(0, 0, 0, 0.25);border-color:#eedc94 #eedc94 #e4c652;border-color:rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);text-shadow:0 1px 0 rgba(255, 255, 255, 0.5);border-width:1px;border-style:solid;-webkit-border-radius:4px;-moz-border-radius:4px;border-radius:4px;-webkit-background-clip:padding-box;-moz-background-clip:padding;background-clip:padding-box;-webkit-box-shadow:inset 0 1px 0 rgba(255, 255, 255, 0.25);-moz-box-shadow:inset 0 1px 0 rgba(255, 255, 255, 0.25);box-shadow:inset 0 1px 0 rgba(255, 255, 255, 0.25);}.alert-message .close{*margin-top:3px;} .alert-message h5{line-height:18px;} .alert-message p{margin-bottom:0;} .alert-message div{margin-top:5px;margin-bottom:2px;line-height:28px;} @@ -287,21 +287,21 @@ 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;} -.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{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-background-clip:padding-box;-moz-background-clip:padding;background-clip:padding-box;-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 li{display:inline;} .pagination 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 a:hover,.pagination .active a{background-color:#c7eefe;} .pagination .disabled a,.pagination .disabled a:hover{background-color:transparent;color:#bfbfbf;} .pagination .next a{border:0;} -.well{background-color:#f5f5f5;margin-bottom:20px;padding:19px;min-height:20px;border:1px solid #eee;border:1px solid rgba(0, 0, 0, 0.05);-webkit-border-radius:4px;-moz-border-radius:4px;border-radius:4px;-webkit-box-shadow:inset 0 1px 1px rgba(0, 0, 0, 0.05);-moz-box-shadow:inset 0 1px 1px rgba(0, 0, 0, 0.05);box-shadow:inset 0 1px 1px rgba(0, 0, 0, 0.05);}.well blockquote{border-color:#ddd;border-color:rgba(0, 0, 0, 0.15);} +.well{background-color:#f5f5f5;margin-bottom:20px;padding:19px;min-height:20px;border:1px solid #eee;border:1px solid rgba(0, 0, 0, 0.05);-webkit-border-radius:4px;-moz-border-radius:4px;border-radius:4px;-webkit-background-clip:padding-box;-moz-background-clip:padding;background-clip:padding-box;-webkit-box-shadow:inset 0 1px 1px rgba(0, 0, 0, 0.05);-moz-box-shadow:inset 0 1px 1px rgba(0, 0, 0, 0.05);box-shadow:inset 0 1px 1px rgba(0, 0, 0, 0.05);}.well blockquote{border-color:#ddd;border-color:rgba(0, 0, 0, 0.15);} .modal-backdrop{background-color:#000000;position:fixed;top:0;left:0;right:0;bottom:0;z-index:10000;}.modal-backdrop.fade{opacity:0;} .modal-backdrop,.modal-backdrop.fade.in{filter:alpha(opacity=80);-khtml-opacity:0.8;-moz-opacity:0.8;opacity:0.8;} -.modal{position:fixed;top:50%;left:50%;z-index:11000;width:560px;margin:-250px 0 0 -250px;background-color:#ffffff;border:1px solid #999;border:1px solid rgba(0, 0, 0, 0.3);*border:1px solid #999;-webkit-border-radius:6px;-moz-border-radius:6px;border-radius:6px;-webkit-box-shadow:0 3px 7px rgba(0, 0, 0, 0.3);-moz-box-shadow:0 3px 7px rgba(0, 0, 0, 0.3);box-shadow:0 3px 7px rgba(0, 0, 0, 0.3);-webkit-background-clip:padding-box;-moz-background-clip:padding-box;background-clip:padding-box;}.modal .close{margin-top:7px;} +.modal{position:fixed;top:50%;left:50%;z-index:11000;width:560px;margin:-250px 0 0 -250px;background-color:#ffffff;border:1px solid #999;border:1px solid rgba(0, 0, 0, 0.3);*border:1px solid #999;-webkit-border-radius:6px;-moz-border-radius:6px;border-radius:6px;-webkit-background-clip:padding-box;-moz-background-clip:padding;background-clip:padding-box;-webkit-box-shadow:0 3px 7px rgba(0, 0, 0, 0.3);-moz-box-shadow:0 3px 7px rgba(0, 0, 0, 0.3);box-shadow:0 3px 7px rgba(0, 0, 0, 0.3);-webkit-background-clip:padding-box;-moz-background-clip:padding-box;background-clip:padding-box;}.modal .close{margin-top:7px;} .modal.fade{-webkit-transition:opacity .3s linear, top .3s ease-out;-moz-transition:opacity .3s linear, top .3s ease-out;-ms-transition:opacity .3s linear, top .3s ease-out;-o-transition:opacity .3s linear, top .3s ease-out;transition:opacity .3s linear, top .3s ease-out;top:-25%;} .modal.fade.in{top:50%;} .modal-header{border-bottom:1px solid #eee;padding:5px 15px;} .modal-body{padding:15px;} -.modal-footer{background-color:#f5f5f5;padding:14px 15px 15px;border-top:1px solid #ddd;-webkit-border-radius:0 0 6px 6px;-moz-border-radius:0 0 6px 6px;border-radius:0 0 6px 6px;-webkit-box-shadow:inset 0 1px 0 #ffffff;-moz-box-shadow:inset 0 1px 0 #ffffff;box-shadow:inset 0 1px 0 #ffffff;zoom:1;margin-bottom:0;}.modal-footer:before,.modal-footer:after{display:table;content:"";zoom:1;*display:inline;} +.modal-footer{background-color:#f5f5f5;padding:14px 15px 15px;border-top:1px solid #ddd;-webkit-border-radius:0 0 6px 6px;-moz-border-radius:0 0 6px 6px;border-radius:0 0 6px 6px;-webkit-background-clip:padding-box;-moz-background-clip:padding;background-clip:padding-box;-webkit-box-shadow:inset 0 1px 0 #ffffff;-moz-box-shadow:inset 0 1px 0 #ffffff;box-shadow:inset 0 1px 0 #ffffff;zoom:1;margin-bottom:0;}.modal-footer:before,.modal-footer:after{display:table;content:"";zoom:1;*display:inline;} .modal-footer:after{clear:both;} .modal-footer .btn{float:right;margin-left:5px;} .twipsy{display:block;position:absolute;visibility:visible;padding:5px;font-size:11px;z-index:1000;filter:alpha(opacity=80);-khtml-opacity:0.8;-moz-opacity:0.8;opacity:0.8;}.twipsy.fade.in{filter:alpha(opacity=80);-khtml-opacity:0.8;-moz-opacity:0.8;opacity:0.8;} @@ -309,23 +309,23 @@ button.btn::-moz-focus-inner,input[type=submit].btn::-moz-focus-inner{padding:0; .twipsy.left .twipsy-arrow{top:50%;right:0;margin-top:-5px;border-top:5px solid transparent;border-bottom:5px solid transparent;border-left:5px solid #000000;} .twipsy.below .twipsy-arrow{top:0;left:50%;margin-left:-5px;border-left:5px solid transparent;border-right:5px solid transparent;border-bottom:5px solid #000000;} .twipsy.right .twipsy-arrow{top:50%;left:0;margin-top:-5px;border-top:5px solid transparent;border-bottom:5px solid transparent;border-right:5px solid #000000;} -.twipsy-inner{padding:3px 8px;background-color:#000000;color:white;text-align:center;max-width:200px;text-decoration:none;-webkit-border-radius:4px;-moz-border-radius:4px;border-radius:4px;} +.twipsy-inner{padding:3px 8px;background-color:#000000;color:white;text-align:center;max-width:200px;text-decoration:none;-webkit-border-radius:4px;-moz-border-radius:4px;border-radius:4px;-webkit-background-clip:padding-box;-moz-background-clip:padding;background-clip:padding-box;} .twipsy-arrow{position:absolute;width:0;height:0;} .popover{position:absolute;top:0;left:0;z-index:1000;padding:5px;display:none;}.popover.above .arrow{bottom:0;left:50%;margin-left:-5px;border-left:5px solid transparent;border-right:5px solid transparent;border-top:5px solid #000000;} .popover.right .arrow{top:50%;left:0;margin-top:-5px;border-top:5px solid transparent;border-bottom:5px solid transparent;border-right:5px solid #000000;} .popover.below .arrow{top:0;left:50%;margin-left:-5px;border-left:5px solid transparent;border-right:5px solid transparent;border-bottom:5px solid #000000;} .popover.left .arrow{top:50%;right:0;margin-top:-5px;border-top:5px solid transparent;border-bottom:5px solid transparent;border-left:5px solid #000000;} .popover .arrow{position:absolute;width:0;height:0;} -.popover .inner{background-color:#000000;background-color:rgba(0, 0, 0, 0.8);padding:3px;overflow:hidden;width:280px;-webkit-border-radius:6px;-moz-border-radius:6px;border-radius:6px;-webkit-box-shadow:0 3px 7px rgba(0, 0, 0, 0.3);-moz-box-shadow:0 3px 7px rgba(0, 0, 0, 0.3);box-shadow:0 3px 7px rgba(0, 0, 0, 0.3);} -.popover .title{background-color:#f5f5f5;padding:9px 15px;line-height:1;-webkit-border-radius:3px 3px 0 0;-moz-border-radius:3px 3px 0 0;border-radius:3px 3px 0 0;border-bottom:1px solid #eee;} -.popover .content{background-color:#ffffff;padding:14px;-webkit-border-radius:0 0 3px 3px;-moz-border-radius:0 0 3px 3px;border-radius:0 0 3px 3px;-webkit-background-clip:padding-box;-moz-background-clip:padding-box;background-clip:padding-box;}.popover .content p,.popover .content ul,.popover .content ol{margin-bottom:0;} +.popover .inner{background-color:#000000;background-color:rgba(0, 0, 0, 0.8);padding:3px;overflow:hidden;width:280px;-webkit-border-radius:6px;-moz-border-radius:6px;border-radius:6px;-webkit-background-clip:padding-box;-moz-background-clip:padding;background-clip:padding-box;-webkit-box-shadow:0 3px 7px rgba(0, 0, 0, 0.3);-moz-box-shadow:0 3px 7px rgba(0, 0, 0, 0.3);box-shadow:0 3px 7px rgba(0, 0, 0, 0.3);} +.popover .title{background-color:#f5f5f5;padding:9px 15px;line-height:1;-webkit-border-radius:3px 3px 0 0;-moz-border-radius:3px 3px 0 0;border-radius:3px 3px 0 0;-webkit-background-clip:padding-box;-moz-background-clip:padding;background-clip:padding-box;border-bottom:1px solid #eee;} +.popover .content{background-color:#ffffff;padding:14px;-webkit-border-radius:0 0 3px 3px;-moz-border-radius:0 0 3px 3px;border-radius:0 0 3px 3px;-webkit-background-clip:padding-box;-moz-background-clip:padding;background-clip:padding-box;-webkit-background-clip:padding-box;-moz-background-clip:padding-box;background-clip:padding-box;}.popover .content p,.popover .content ul,.popover .content ol{margin-bottom:0;} .fade{-webkit-transition:opacity 0.15s linear;-moz-transition:opacity 0.15s linear;-ms-transition:opacity 0.15s linear;-o-transition:opacity 0.15s linear;transition:opacity 0.15s linear;opacity:0;}.fade.in{opacity:1;} -.label{padding:1px 3px 2px;background-color:#bfbfbf;font-size:9.75px;font-weight:bold;color:#ffffff;text-transform:uppercase;-webkit-border-radius:3px;-moz-border-radius:3px;border-radius:3px;}.label.important{background-color:#c43c35;} +.label{padding:1px 3px 2px;background-color:#bfbfbf;font-size:9.75px;font-weight:bold;color:#ffffff;text-transform:uppercase;-webkit-border-radius:3px;-moz-border-radius:3px;border-radius:3px;-webkit-background-clip:padding-box;-moz-background-clip:padding;background-clip:padding-box;}.label.important{background-color:#c43c35;} .label.warning{background-color:#f89406;} .label.success{background-color:#46a546;} .label.notice{background-color:#62cffc;} .media-grid{margin-left:-20px;margin-bottom:0;zoom:1;}.media-grid:before,.media-grid:after{display:table;content:"";zoom:1;*display:inline;} .media-grid:after{clear:both;} .media-grid li{display:inline;} -.media-grid a{float:left;padding:4px;margin:0 0 20px 20px;border:1px solid #ddd;-webkit-border-radius:4px;-moz-border-radius:4px;border-radius:4px;-webkit-box-shadow:0 1px 1px rgba(0, 0, 0, 0.075);-moz-box-shadow:0 1px 1px rgba(0, 0, 0, 0.075);box-shadow:0 1px 1px rgba(0, 0, 0, 0.075);}.media-grid a img{display:block;} +.media-grid a{float:left;padding:4px;margin:0 0 20px 20px;border:1px solid #ddd;-webkit-border-radius:4px;-moz-border-radius:4px;border-radius:4px;-webkit-background-clip:padding-box;-moz-background-clip:padding;background-clip:padding-box;-webkit-box-shadow:0 1px 1px rgba(0, 0, 0, 0.075);-moz-box-shadow:0 1px 1px rgba(0, 0, 0, 0.075);box-shadow:0 1px 1px rgba(0, 0, 0, 0.075);}.media-grid a img{display:block;} .media-grid a:hover{border-color:#0069d6;-webkit-box-shadow:0 1px 4px rgba(0, 105, 214, 0.25);-moz-box-shadow:0 1px 4px rgba(0, 105, 214, 0.25);box-shadow:0 1px 4px rgba(0, 105, 214, 0.25);} diff --git a/lib/mixins.less b/lib/mixins.less index 9c27346c2a..22a30a1c86 100644 --- a/lib/mixins.less +++ b/lib/mixins.less @@ -71,20 +71,6 @@ } } -// Font face generator -.font-face(@fontFamily, @fileName, @style, @weight) { - @font-face { - font-family: @fontFamily; - font-style: @style; - font-weight: @weight; - src: url('@{fileName}.eot'); - src: url('@{fileName}.eot?#iefix') format('embedded-opentype'), - url('@{fileName}.woff') format('woff'), - url('@{fileName}.ttf') format('truetype'), - url('@{fileName}.svg#@{fontFamily}') format('svg'); - } -} - // Grid System .fixed-container() { width: @siteWidth; @@ -115,6 +101,9 @@ -webkit-border-radius: @radius; -moz-border-radius: @radius; border-radius: @radius; + -webkit-background-clip: padding-box; + -moz-background-clip: padding; + background-clip: padding-box; } .border-radius-custom(@topLeft, @topRight, @bottomRight, @bottomLeft) { -webkit-border-top-left-radius: @topLeft; diff --git a/lib/variables.less b/lib/variables.less index 864dbe8c03..f85e0ec859 100644 --- a/lib/variables.less +++ b/lib/variables.less @@ -45,22 +45,6 @@ @siteWidth: (@gridColumns * @gridColumnWidth) + (@gridGutterWidth * (@gridColumns - 1)); -// COLOR SCHEME -// ------------ - -// Use this to roll your own color schemes if you like (unused by Bootstrap by default) -@baseColor: @blue; // Set a base color -@complement: spin(@baseColor, 180); // Determine a complementary color -@split1: spin(@baseColor, 158); // Split complements -@split2: spin(@baseColor, -158); -@triad1: spin(@baseColor, 135); // Triads colors -@triad2: spin(@baseColor, -135); -@tetra1: spin(@baseColor, 90); // Tetra colors -@tetra2: spin(@baseColor, -90); -@analog1: spin(@baseColor, 22); // Analogs colors -@analog2: spin(@baseColor, -22); - - // THEME VARIABLES // --------------- -- GitLab From f4fc56b1b3827254dd771536dcb2b711919f3867 Mon Sep 17 00:00:00 2001 From: Mark Otto <mark.otto@twitter.com> Date: Wed, 12 Oct 2011 08:31:16 -0700 Subject: [PATCH 024/318] first pass at moving over the new tabs stuff to 2.0 --- bootstrap.css | 77 ++++++++++++++++++----- bootstrap.min.css | 29 ++++++--- docs/index.html | 147 ++++++++++++++++++++++++++++++++++++++++++- docs/javascript.html | 38 +++++------ lib/patterns.less | 106 +++++++++++++++++++++++++------ 5 files changed, 332 insertions(+), 65 deletions(-) diff --git a/bootstrap.css b/bootstrap.css index d40c50c841..abf43ed3d8 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: Tue Oct 11 19:31:11 PDT 2011 + * Date: Tue Oct 11 23:51:38 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). @@ -1478,13 +1478,13 @@ table .headerSortUp.purple, table .headerSortDown.purple { display: block; } .tabs { - float: left; - width: 100%; - border-bottom: 1px solid #ddd; + border-color: #ddd; + border-style: solid; + border-width: 0 0 1px; } .tabs > li { position: relative; - top: 1px; + margin-bottom: -1px; } .tabs > li > a { padding: 0 15px; @@ -1503,13 +1503,56 @@ table .headerSortUp.purple, table .headerSortDown.purple { background-color: #eee; border-color: #eee #eee #ddd; } -.tabs > li.active > a { +.tabs .active > a, .tabs .active > a:hover { color: #808080; background-color: #ffffff; border: 1px solid #ddd; border-bottom-color: transparent; + cursor: default; +} +.tabbable { + margin-bottom: 18px; +} +.tabbable .tabs { + margin-bottom: 0; + border-bottom: 0; +} +.tabbable .tab-content { + padding: 19px; + border: 1px solid #ddd; +} +.tabbable.tabs-bottom .tabs > li { + margin-top: -1px; + margin-bottom: 0; +} +.tabbable.tabs-bottom .tabs > li > a { + -webkit-border-radius: 0 0 4px 4px; + -moz-border-radius: 0 0 4px 4px; + border-radius: 0 0 4px 4px; + -webkit-background-clip: padding-box; + -moz-background-clip: padding; + background-clip: padding-box; +} +.tabbable.tabs-bottom .tabs > li > a:hover { + border-bottom-color: transparent; + border-top-color: #ddd; +} +.tabbable.tabs-bottom .tabs > .active > a, .tabbable.tabs-bottom .tabs > .active > a:hover { + border-color: transparent #ddd #ddd #ddd; +} +.tabbable.tabs-left .tabs { + float: left; +} +.tabbable.tabs-left .tabs > li { + float: none; +} +.tabbable.tabs-right .tabs { + float: right; +} +.tabbable.tabs-right .tabs > li { + float: none; } -.tabs .dropdown-menu { +.tabs .menu-dropdown, .tabs .dropdown-menu { top: 35px; border-width: 1px; -webkit-border-radius: 0 6px 6px 6px; @@ -1519,25 +1562,22 @@ table .headerSortUp.purple, table .headerSortDown.purple { -moz-background-clip: padding; background-clip: padding-box; } -.tabs .dropdown-toggle:after { +.tabs a.menu:after, .tabs .dropdown-toggle:after { border-top-color: #999; margin-top: 15px; margin-left: 5px; } -.tabs .open.dropdown .dropdown-toggle { +.tabs li.open.menu .menu, .tabs .open.dropdown .dropdown-toggle { border-color: #999; } -.tabs .dropdown.open .dropdown-toggle:after { +.tabs li.open a.menu:after, .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; + text-shadow: 0 1px 1px #ffffff; -webkit-border-radius: 15px; -moz-border-radius: 15px; border-radius: 15px; @@ -1546,17 +1586,20 @@ table .headerSortUp.purple, table .headerSortDown.purple { background-clip: padding-box; } .pills a:hover { - background: #00438a; color: #ffffff; text-decoration: none; text-shadow: 0 1px 1px rgba(0, 0, 0, 0.25); + background-color: #00438a; } .pills .active a { - background: #0069d6; color: #ffffff; text-shadow: 0 1px 1px rgba(0, 0, 0, 0.25); + background-color: #0069d6; +} +.pills-vertical > li { + float: none; } -.tab-content > *, .pill-content > * { +.tab-content > .tab-pane, .pill-content > .pill-pane { display: none; } .tab-content > .active, .pill-content > .active { diff --git a/bootstrap.min.css b/bootstrap.min.css index d0662829a3..62be2279a3 100644 --- a/bootstrap.min.css +++ b/bootstrap.min.css @@ -233,16 +233,25 @@ table .headerSortUp.purple,table .headerSortDown.purple{background-color:#e2d5f0 .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;-webkit-background-clip:padding-box;-moz-background-clip:padding;background-clip:padding-box;}.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 .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;-webkit-background-clip:padding-box;-moz-background-clip:padding;background-clip:padding-box;} -.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;-webkit-background-clip:padding-box;-moz-background-clip:padding;background-clip:padding-box;}.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);} -.tab-content>*,.pill-content>*{display:none;} +.tabs{border-color:#ddd;border-style:solid;border-width:0 0 1px;}.tabs>li{position:relative;margin-bottom:-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;-webkit-background-clip:padding-box;-moz-background-clip:padding;background-clip:padding-box;}.tabs>li>a:hover{text-decoration:none;background-color:#eee;border-color:#eee #eee #ddd;} +.tabs .active>a,.tabs .active>a:hover{color:#808080;background-color:#ffffff;border:1px solid #ddd;border-bottom-color:transparent;cursor:default;} +.tabbable{margin-bottom:18px;}.tabbable .tabs{margin-bottom:0;border-bottom:0;} +.tabbable .tab-content{padding:19px;border:1px solid #ddd;} +.tabbable.tabs-bottom .tabs>li{margin-top:-1px;margin-bottom:0;} +.tabbable.tabs-bottom .tabs>li>a{-webkit-border-radius:0 0 4px 4px;-moz-border-radius:0 0 4px 4px;border-radius:0 0 4px 4px;-webkit-background-clip:padding-box;-moz-background-clip:padding;background-clip:padding-box;}.tabbable.tabs-bottom .tabs>li>a:hover{border-bottom-color:transparent;border-top-color:#ddd;} +.tabbable.tabs-bottom .tabs>.active>a,.tabbable.tabs-bottom .tabs>.active>a:hover{border-color:transparent #ddd #ddd #ddd;} +.tabbable.tabs-left .tabs{float:left;} +.tabbable.tabs-left .tabs>li{float:none;} +.tabbable.tabs-right .tabs{float:right;} +.tabbable.tabs-right .tabs>li{float:none;} +.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;-webkit-background-clip:padding-box;-moz-background-clip:padding;background-clip:padding-box;} +.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;} +.pills a{margin:5px 3px 5px 0;padding:0 15px;line-height:30px;text-shadow:0 1px 1px #ffffff;-webkit-border-radius:15px;-moz-border-radius:15px;border-radius:15px;-webkit-background-clip:padding-box;-moz-background-clip:padding;background-clip:padding-box;}.pills a:hover{color:#ffffff;text-decoration:none;text-shadow:0 1px 1px rgba(0, 0, 0, 0.25);background-color:#00438a;} +.pills .active a{color:#ffffff;text-shadow:0 1px 1px rgba(0, 0, 0, 0.25);background-color:#0069d6;} +.pills-vertical>li{float:none;} +.tab-content>.tab-pane,.pill-content>.pill-pane{display:none;} .tab-content>.active,.pill-content>.active{display:block;} .breadcrumb{margin:0 0 18px;padding:7px 14px;background-color:#f5f5f5;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);background-repeat:repeat-x;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-background-clip:padding-box;-moz-background-clip:padding;background-clip:padding-box;-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;} diff --git a/docs/index.html b/docs/index.html index ced0c658fb..0d46084c18 100644 --- a/docs/index.html +++ b/docs/index.html @@ -1313,9 +1313,10 @@ <h2>Tabs and pills</h2> <p>Create simple secondary navigation with a <code><ul></code>. Swap between tabs or pills by adding the appropriate class.</p> <p>Great for sub-sections of content like our account settings pages and user timelines for toggling between pages of like content. Available in tabbed or pill styles.</p> - <p><a class="btn js-btn" href="./javascript.html#tabs">Get the javascript »</a></p> </div> <div class="span12"> + <h3>Basic tabs example</h3> + <p>Tabs can be used as regular navigation (loading external pages in the same tab) or as tabbable content areas for swapping out panes of content. We have a <a href="./javascript.html#tabs">tabs plugin</a> that can be used to integrate the latter.</p> <ul class="tabs"> <li class="active"><a href="#">Home</a></li> <li><a href="#">Profile</a></li> @@ -1341,6 +1342,141 @@ <li><a href="#">Contact</a></li> </ul> </pre> + <h3>Alternate tabs</h3> + <p>You can also use tabs that are stacked on either side of an element, or on the bottom.</p> + <div class="row"> + <div class="span3"> + <div class="clearfix"> + <ul class="tabs tabs-left"> + <li class="active"><a href="#">Active link</a></li> + <li><a href="#">Link</a></li> + <li><a href="#">Linky link</a></li> + <li><a href="#">What up link</a></li> + </ul> + </div> + </div> + <div class="span3"> + <div class="clearfix"> + <ul class="tabs tabs-right"> + <li class="active"><a href="#">Active link</a></li> + <li><a href="#">Link</a></li> + <li><a href="#">Linky link</a></li> + <li><a href="#">What up link</a></li> + </ul> + </div> + </div> + <div class="span6"> + <div class="clearfix"> + <ul class="tabs tabs-bottom"> + <li class="active"><a href="#">Active link</a></li> + <li><a href="#">Link</a></li> + <li><a href="#">Linky link</a></li> + </ul> + </div> + </div> + </div> + <h3>Tabbable tabs</h3> + <p>As mentioned above, you can bring your tabs to life with a simple plugin. Here we have integrated all four variations of the tabs—default (top), right, bottom, left—with example tab areas.</p> + + <div class="tabbable"> + <ul class="tabs" data-tabs="tabs"> + <li class="active"><a href="#1">Section 1</a></li> + <li><a href="#2">Section 2</a></li> + <li><a href="#3">Section 3</a></li> + <li><a href="#4">Section 4</a></li> + </ul> + <div class="tab-content"> + <div class="tab-pane active" id="1"> + <p>Oh hai #1!</p> + </div> + <div class="tab-pane" id="2"> + <p>Oh hai #2!</p> + </div> + <div class="tab-pane" id="3"> + <p>Oh hai #3!</p> + </div> + <div class="tab-pane" id="4"> + <p>Oh hai #4!</p> + </div> + </div> + </div> + + <div class="row"> + <div class="span6"> + <div class="tabbable tabs-left"> + <ul class="tabs" data-tabs="tabs"> + <li class="active"><a href="#1">Section 1</a></li> + <li><a href="#2">Section 2</a></li> + <li><a href="#3">Section 3</a></li> + </ul> + <div class="tab-content" id="myTabContent2"> + <div class="tab-pane active" id="1"> + <h4>Section 1</h4> + <p>Oh hai!</p> + </div> + <div class="tab-pane" id="2"> + <h4>Section 2</h4> + <p>Oh hai!</p> + </div> + <div class="tab-pane" id="3"> + <h4>Section 3</h4> + <p>Oh hai!</p> + </div> + </div> + </div> + </div> + <div class="span6"> + <div class="tabbable tabs-right"> + <ul class="tabs" data-tabs="tabs"> + <li class="active"><a href="#1">Section 1</a></li> + <li><a href="#2">Section 2</a></li> + <li><a href="#3">Section 3</a></li> + </ul> + <div class="tab-content" id="myTabContent3"> + <div class="tab-pane active" id="1"> + <h4>Section 1</h4> + <p>Oh hai!</p> + </div> + <div class="tab-pane" id="2"> + <h4>Section 2</h4> + <p>Oh hai!</p> + </div> + <div class="tab-pane" id="3"> + <h4>Section 3</h4> + <p>Oh hai!</p> + </div> + </div> + </div> + </div> + </div> + + <div class="tabbable tabs-bottom"> + <div class="tab-content"> + <div class="tab-pane active" id="1"> + <p>Oh hai #1!</p> + </div> + <div class="tab-pane" id="2"> + <p>Oh hai #2!</p> + </div> + <div class="tab-pane" id="3"> + <p>Oh hai #3!</p> + </div> + <div class="tab-pane" id="4"> + <p>Oh hai #4!</p> + </div> + </div> + <ul class="tabs" data-tabs="tabs"> + <li class="active"><a href="#1">Section 1</a></li> + <li><a href="#2">Section 2</a></li> + <li><a href="#3">Section 3</a></li> + <li><a href="#4">Section 4</a></li> + </ul> + </div> + + + <p>In addition to tabs, we have pills! Though a bit more limited in functionality, they share much of the same markup.</p> + <hr> + <h3>Basic pills example</h3> <ul class="pills"> <li class="active"><a href="#">Home</a></li> <li><a href="#">Profile</a></li> @@ -1357,6 +1493,15 @@ <li><a href="#">Contact</a></li> </ul> </pre> + <h3>Vertical pill nav</h3> + <p>With a pill-style nav, you can also stack the list items to have a simple sidebar. We don't offer left or right aligned versions here because that's easy enough to customize based on your own needs</p> + <ul class="pills pills-vertical span4"> + <li class="active"><a href="#">Home</a></li> + <li><a href="#">Profile</a></li> + <li><a href="#">Messages</a></li> + <li><a href="#">Settings</a></li> + <li><a href="#">Contact</a></li> + </ul> </div> </div><!-- /row --> diff --git a/docs/javascript.html b/docs/javascript.html index 66caad10b4..b130511c3d 100644 --- a/docs/javascript.html +++ b/docs/javascript.html @@ -353,24 +353,26 @@ $('#my-modal').bind('hidden', function () { </script></pre> </p> <h3>Demo</h3> - <ul class="tabs" data-tabs="tabs" > - <li class="active"><a href="#home">Home</a></li> - <li><a href="#profile">Profile</a></li> - <li><a href="#messages">Messages</a></li> - <li><a href="#settings">Settings</a></li> - </ul> - <div id="my-tab-content" class="tab-content"> - <div class="active" id="home"> - <p>Raw denim you probably haven't heard of them jean shorts Austin. Nesciunt tofu stumptown aliqua, retro synth master cleanse. Mustache cliche tempor, williamsburg carles vegan helvetica. Reprehenderit butcher retro keffiyeh dreamcatcher synth. Cosby sweater eu banh mi, qui irure terry richardson ex squid. Aliquip placeat salvia cillum iphone. Seitan aliquip quis cardigan american apparel, butcher voluptate nisi qui.</p> - </div> - <div id="profile"> - <p>Food truck fixie locavore, accusamus mcsweeney's marfa nulla single-origin coffee squid. Exercitation +1 labore velit, blog sartorial PBR leggings next level wes anderson artisan four loko farm-to-table craft beer twee. Qui photo booth letterpress, commodo enim craft beer mlkshk aliquip jean shorts ullamco ad vinyl cillum PBR. Homo nostrud organic, assumenda labore aesthetic magna delectus mollit. Keytar helvetica VHS salvia yr, vero magna velit sapiente labore stumptown. Vegan fanny pack odio cillum wes anderson 8-bit, sustainable jean shorts beard ut DIY ethical culpa terry richardson biodiesel. Art party scenester stumptown, tumblr butcher vero sint qui sapiente accusamus tattooed echo park.</p> - </div> - <div id="messages"> - <p>Banksy do proident, brooklyn photo booth delectus sunt artisan sed organic exercitation eiusmod four loko. Quis tattooed iphone esse aliqua. Master cleanse vero fixie mcsweeney's. Ethical portland aute, irony food truck pitchfork lomo eu anim. Aesthetic blog DIY, ethical beard leggings tofu consequat whatever cardigan nostrud. Helvetica you probably haven't heard of them carles, marfa veniam occaecat lomo before they sold out in shoreditch scenester sustainable thundercats. Consectetur tofu craft beer, mollit brunch fap echo park pitchfork mustache dolor.</p> - </div> - <div id="settings"> - <p>Sunt qui biodiesel mollit officia, fanny pack put a bird on it thundercats seitan squid ad wolf bicycle rights blog. Et aute readymade farm-to-table carles 8-bit, nesciunt nulla etsy adipisicing organic ea. Master cleanse mollit high life, next level Austin nesciunt american apparel twee mustache adipisicing reprehenderit hoodie portland irony. Aliqua tofu quinoa +1 commodo eiusmod. High life williamsburg cupidatat twee homo leggings. Four loko vinyl DIY consectetur nisi, marfa retro keffiyeh vegan. Fanny pack viral retro consectetur gentrify fap.</p> + <div class="tabbable"> + <ul class="tabs" data-tabs="tabs"> + <li class="active"><a href="#home">Home</a></li> + <li><a href="#profile">Profile</a></li> + <li><a href="#messages">Messages</a></li> + <li><a href="#settings">Settings</a></li> + </ul> + <div class="tab-content" id="myTabContent"> + <div class="tab-pane active" id="home"> + <p>Raw denim you probably haven't heard of them jean shorts Austin. Nesciunt tofu stumptown aliqua, retro synth master cleanse. Mustache cliche tempor, williamsburg carles vegan helvetica. Reprehenderit butcher retro keffiyeh dreamcatcher synth. Cosby sweater eu banh mi, qui irure terry richardson ex squid. Aliquip placeat salvia cillum iphone. Seitan aliquip quis cardigan american apparel, butcher voluptate nisi qui.</p> + </div> + <div class="tab-pane" id="profile"> + <p>Food truck fixie locavore, accusamus mcsweeney's marfa nulla single-origin coffee squid. Exercitation +1 labore velit, blog sartorial PBR leggings next level wes anderson artisan four loko farm-to-table craft beer twee. Qui photo booth letterpress, commodo enim craft beer mlkshk aliquip jean shorts ullamco ad vinyl cillum PBR. Homo nostrud organic, assumenda labore aesthetic magna delectus mollit. Keytar helvetica VHS salvia yr, vero magna velit sapiente labore stumptown. Vegan fanny pack odio cillum wes anderson 8-bit, sustainable jean shorts beard ut DIY ethical culpa terry richardson biodiesel. Art party scenester stumptown, tumblr butcher vero sint qui sapiente accusamus tattooed echo park.</p> + </div> + <div class="tab-pane" id="messages"> + <p>Banksy do proident, brooklyn photo booth delectus sunt artisan sed organic exercitation eiusmod four loko. Quis tattooed iphone esse aliqua. Master cleanse vero fixie mcsweeney's. Ethical portland aute, irony food truck pitchfork lomo eu anim. Aesthetic blog DIY, ethical beard leggings tofu consequat whatever cardigan nostrud. Helvetica you probably haven't heard of them carles, marfa veniam occaecat lomo before they sold out in shoreditch scenester sustainable thundercats. Consectetur tofu craft beer, mollit brunch fap echo park pitchfork mustache dolor.</p> + </div> + <div class="tab-pane" id="settings"> + <p>Sunt qui biodiesel mollit officia, fanny pack put a bird on it thundercats seitan squid ad wolf bicycle rights blog. Et aute readymade farm-to-table carles 8-bit, nesciunt nulla etsy adipisicing organic ea. Master cleanse mollit high life, next level Austin nesciunt american apparel twee mustache adipisicing reprehenderit hoodie portland irony. Aliqua tofu quinoa +1 commodo eiusmod. High life williamsburg cupidatat twee homo leggings. Four loko vinyl DIY consectetur nisi, marfa retro keffiyeh vegan. Fanny pack viral retro consectetur gentrify fap.</p> + </div> </div> </div> </div> diff --git a/lib/patterns.less b/lib/patterns.less index f2a0b7f0e5..af898a5614 100644 --- a/lib/patterns.less +++ b/lib/patterns.less @@ -318,14 +318,14 @@ } } -// Basic Tabs +// Tabs .tabs { - float: left; - width: 100%; - border-bottom: 1px solid #ddd; + border-color: #ddd; + border-style: solid; + border-width: 0 0 1px; > li { position: relative; // For the dropdowns mostly - top: 1px; + margin-bottom: -1px; > a { padding: 0 15px; margin-right: 2px; @@ -338,61 +338,129 @@ border-color: #eee #eee #ddd; } } - &.active > a { - color: @gray; - background-color: @white; - border: 1px solid #ddd; + } + // Active state, and it's :hover to override normal :hover + .active > a, + .active > a:hover { + color: @gray; + background-color: @white; + border: 1px solid #ddd; + border-bottom-color: transparent; + cursor: default; + } +} + +.tabbable { + margin-bottom: @baseLineHeight; + + // Tabs on top + .tabs { + margin-bottom: 0; + border-bottom: 0; + } + .tab-content { + padding: 19px; + border: 1px solid #ddd; + } + + // Tabs on bottom + &.tabs-bottom .tabs > li { + margin-top: -1px; + margin-bottom: 0; + } + &.tabs-bottom .tabs > li > a { + .border-radius(0 0 4px 4px); + &:hover { border-bottom-color: transparent; + border-top-color: #ddd; } } + &.tabs-bottom .tabs > .active > a, + &.tabs-bottom .tabs > .active > a:hover { + border-color: transparent #ddd #ddd #ddd; + } + + // Tabs on left + &.tabs-left .tabs { + float: left; + } + &.tabs-left .tabs > li { + float: none; + } + + // Tabs on right + &.tabs-right .tabs { + float: right; + } + &.tabs-right .tabs > li { + float: none; + } +} + + +// Dropdowns in tabs +.tabs { + // 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; } } -.tab-content { - clear: both; -} -// Basic pill nav +// Pills .pills { a { margin: 5px 3px 5px 0; padding: 0 15px; - text-shadow: 0 1px 1px @white; line-height: 30px; + text-shadow: 0 1px 1px @white; .border-radius(15px); &:hover { - background: @linkColorHover; color: @white; text-decoration: none; text-shadow: 0 1px 1px rgba(0,0,0,.25); + background-color: @linkColorHover; } } .active a { - background: @linkColor; color: @white; text-shadow: 0 1px 1px rgba(0,0,0,.25); + background-color: @linkColor; } } -.tab-content > *, -.pill-content > * { - display: none; +// Stacked pills +.pills-vertical > li { + float: none; } +// Tabbable areas +.tab-content, +.pill-content { +} +.tab-content > .tab-pane, +.pill-content > .pill-pane { + display: none; +} .tab-content > .active, .pill-content > .active { display: block; -- GitLab From fbe22f05800a3ce4ae3a880914d8e03cb1e01d1b Mon Sep 17 00:00:00 2001 From: Mark Otto <mark.otto@twitter.com> Date: Sat, 15 Oct 2011 17:21:39 -0700 Subject: [PATCH 025/318] updated index of docs to use html5 self closing tags, add responsive shell to bootstrap file --- bootstrap.css | 8 +++++++- bootstrap.min.css | 1 + docs/index.html | 22 +++++++++++----------- lib/bootstrap.less | 5 ++++- 4 files changed, 23 insertions(+), 13 deletions(-) diff --git a/bootstrap.css b/bootstrap.css index abf43ed3d8..60cc8213f3 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: Tue Oct 11 23:51:38 PDT 2011 + * Date: Sat Oct 15 17:19:53 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). @@ -2416,3 +2416,9 @@ button.btn::-moz-focus-inner, input[type=submit].btn::-moz-focus-inner { -moz-box-shadow: 0 1px 4px rgba(0, 105, 214, 0.25); box-shadow: 0 1px 4px rgba(0, 105, 214, 0.25); } +/* Responsive.less + * For phone and tablet devices + * ------------------------------------------------------------- */ +@media (max-width: 480px) { + +} diff --git a/bootstrap.min.css b/bootstrap.min.css index 62be2279a3..770bd1dc66 100644 --- a/bootstrap.min.css +++ b/bootstrap.min.css @@ -338,3 +338,4 @@ button.btn::-moz-focus-inner,input[type=submit].btn::-moz-focus-inner{padding:0; .media-grid li{display:inline;} .media-grid a{float:left;padding:4px;margin:0 0 20px 20px;border:1px solid #ddd;-webkit-border-radius:4px;-moz-border-radius:4px;border-radius:4px;-webkit-background-clip:padding-box;-moz-background-clip:padding;background-clip:padding-box;-webkit-box-shadow:0 1px 1px rgba(0, 0, 0, 0.075);-moz-box-shadow:0 1px 1px rgba(0, 0, 0, 0.075);box-shadow:0 1px 1px rgba(0, 0, 0, 0.075);}.media-grid a img{display:block;} .media-grid a:hover{border-color:#0069d6;-webkit-box-shadow:0 1px 4px rgba(0, 105, 214, 0.25);-moz-box-shadow:0 1px 4px rgba(0, 105, 214, 0.25);box-shadow:0 1px 4px rgba(0, 105, 214, 0.25);} +@media (max-width: 480px){} diff --git a/docs/index.html b/docs/index.html index 0d46084c18..4dd45f5f96 100644 --- a/docs/index.html +++ b/docs/index.html @@ -81,8 +81,8 @@ <div class="inner"> <h1>Bootstrap, from Twitter</h1> <p class="lead"> - Bootstrap is a toolkit from Twitter designed to kickstart development of webapps and sites.<br /> - It includes base CSS and HTML for typography, forms, buttons, tables, grids, navigation, and more.<br /> + Bootstrap is a toolkit from Twitter designed to kickstart development of webapps and sites.<br> + It includes base CSS and HTML for typography, forms, buttons, tables, grids, navigation, and more.<br> </p> <p><strong>Nerd alert:</strong> Bootstrap is <a href="#less" title="Read about using Bootstrap with Less">built with Less</a> and was designed to work out of the gate with modern browsers in mind.</p> </div> @@ -491,15 +491,15 @@ <div class="row"> <div class="span4"> <address> - <strong>Twitter, Inc.</strong><br /> - 795 Folsom Ave, Suite 600<br /> - San Francisco, CA 94107<br /> + <strong>Twitter, Inc.</strong><br> + 795 Folsom Ave, Suite 600<br> + San Francisco, CA 94107<br> <abbr title="Phone">P:</abbr> (123) 456-7890 </address> </div> <div class="span4"> <address> - <strong>Full Name</strong><br /> + <strong>Full Name</strong><br> <a mailto="">first.last@gmail.com</a> </address> </div> @@ -966,7 +966,7 @@ <fieldset class="control-group"> <label class="control-label" for="fileInput">File input</label> <div class="controls"> - <input class="input-file" id="fileInput" name="fileInput" type="file" /> + <input class="input-file" id="fileInput" name="fileInput" type="file"> </div> </fieldset> <fieldset class="control-group has-error"> @@ -1010,11 +1010,11 @@ <div class="controls"> <div class="control-list"> <label> - <input type="radio" checked name="optionsRadios" value="option1" /> + <input type="radio" checked name="optionsRadios" value="option1"> <span>Option one is this and that—be sure to include why it’s great</span> </label> <label> - <input type="radio" name="optionsRadios" value="option2" /> + <input type="radio" name="optionsRadios" value="option2"> <span>Option two can is something else and selecting it will deselect options 1</span> </label> </div> @@ -1306,7 +1306,7 @@ </div> <p><strong>Note:</strong> When using the topbar on any page, be sure to account for the overlap it causes by adding <code>padding-top: 40px;</code> to your <code>body</code>.</p> - <br /> + <br> <div class="row"> <div class="span4"> @@ -2015,7 +2015,7 @@ Lorem ipsum dolar sit amet illo error <a href="#" title="below">ipsum</a> verita <div class="container"> <p class="pull-right"><a href="#">Back to top</a></p> <p> - Designed and built with all the love in the world <a href="http://twitter.com/twitter" target="_blank">@twitter</a> by <a href="http://twitter.com/mdo" target="_blank">@mdo</a> and <a href="http://twitter.com/fat" target="_blank">@fat</a>.<br /> + Designed and built with all the love in the world <a href="http://twitter.com/twitter" target="_blank">@twitter</a> by <a href="http://twitter.com/mdo" target="_blank">@mdo</a> and <a href="http://twitter.com/fat" target="_blank">@fat</a>.<br> Code licensed under the <a href="http://www.apache.org/licenses/LICENSE-2.0" target="_blank">Apache License v2.0</a>. Documentation licensed under <a href="http://creativecommons.org/licenses/by/3.0/">CC BY 3.0</a>. </p> </div> diff --git a/lib/bootstrap.less b/lib/bootstrap.less index 62f2ce916d..9665306fd5 100644 --- a/lib/bootstrap.less +++ b/lib/bootstrap.less @@ -23,4 +23,7 @@ @import "type.less"; @import "forms.less"; @import "tables.less"; -@import "patterns.less"; \ No newline at end of file +@import "patterns.less"; + +// Responsive +@import "responsive.less"; \ No newline at end of file -- GitLab From 9e9109469e5c86c4232cc744639b286bcd9ef0ba Mon Sep 17 00:00:00 2001 From: Mark Otto <mark.otto@twitter.com> Date: Sun, 16 Oct 2011 03:00:58 -0700 Subject: [PATCH 026/318] biiiiiig update coming for responsiveness --- bootstrap.css | 422 ++++++++++++++++++++------------------- bootstrap.min.css | 172 ++++++++-------- docs/assets/css/docs.css | 71 ++++--- docs/index.html | 215 ++++++++------------ lib/mixins.less | 3 - lib/scaffolding.less | 27 +-- lib/variables.less | 4 +- 7 files changed, 433 insertions(+), 481 deletions(-) diff --git a/bootstrap.css b/bootstrap.css index 60cc8213f3..482d2878c8 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: Sat Oct 15 17:19:53 PDT 2011 + * Date: Sun Oct 16 02:59:54 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). @@ -261,7 +261,6 @@ a:hover { } .row { zoom: 1; - margin-left: -20px; } .row:before, .row:after { display: table; @@ -277,125 +276,77 @@ a:hover { float: left; margin-left: 20px; } +.row > [class*="span"]:first-child { + margin-left: 0; +} .span1 { - width: 40px; + width: 60px; } .span2 { - width: 100px; + width: 140px; } .span3 { - width: 160px; + width: 220px; } .span4 { - width: 220px; + width: 300px; } .span5 { - width: 280px; + width: 380px; } .span6 { - width: 340px; + width: 460px; } .span7 { - width: 400px; + width: 540px; } .span8 { - width: 460px; + width: 620px; } .span9 { - width: 520px; + width: 700px; } .span10 { - width: 580px; + width: 780px; } .span11 { - width: 640px; + width: 860px; } .span12 { - width: 700px; -} -.span13 { - width: 760px; -} -.span14 { - width: 820px; -} -.span15 { - width: 880px; -} -.span16 { width: 940px; } -.span17 { - width: 1000px; -} -.span18 { - width: 1060px; -} -.span19 { - width: 1120px; -} -.span20 { - width: 1180px; -} -.span21 { - width: 1240px; -} -.span22 { - width: 1300px; -} -.span23 { - width: 1360px; -} -.span24 { - width: 1420px; -} .offset1 { - margin-left: 80px; + margin-left: 100px; } .offset2 { - margin-left: 140px; + margin-left: 180px; } .offset3 { - margin-left: 200px; + margin-left: 260px; } .offset4 { - margin-left: 260px; + margin-left: 340px; } .offset5 { - margin-left: 320px; + margin-left: 420px; } .offset6 { - margin-left: 380px; + margin-left: 500px; } .offset7 { - margin-left: 440px; + margin-left: 580px; } .offset8 { - margin-left: 500px; + margin-left: 660px; } .offset9 { - margin-left: 560px; + margin-left: 740px; } .offset10 { - margin-left: 620px; + margin-left: 820px; } .offset11 { - margin-left: 680px; -} -.offset12 { - margin-left: 740px; -} -.span-one-third { - width: 300px; -} -.span-two-thirds { - width: 620px; -} -.offset-one-third { - margin-left: 340px; -} -.offset-two-thirds { - margin-left: 660px; + margin-left: 900px; } /* Typography.less * Headings, body text, lists, code, and more for a versatile and durable typography system @@ -551,9 +502,6 @@ code, pre { -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px; - -webkit-background-clip: padding-box; - -moz-background-clip: padding; - background-clip: padding-box; } code { background-color: #fee9cc; @@ -572,9 +520,6 @@ pre { -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px; - -webkit-background-clip: padding-box; - -moz-background-clip: padding; - background-clip: padding-box; white-space: pre; white-space: pre-wrap; word-wrap: break-word; @@ -626,9 +571,6 @@ select, -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px; - -webkit-background-clip: padding-box; - -moz-background-clip: padding; - background-clip: padding-box; } /* Mini reset for unique input types */ input[type=checkbox], input[type=radio] { @@ -713,97 +655,97 @@ input[type=file]:focus, input[type=checkbox]:focus, select:focus { input.span1, textarea.span1, select.span1 { display: inline-block; float: none; - width: 30px; + width: 50px; margin-left: 0; } input.span2, textarea.span2, select.span2 { display: inline-block; float: none; - width: 90px; + width: 150px; margin-left: 0; } input.span3, textarea.span3, select.span3 { display: inline-block; float: none; - width: 150px; + width: 250px; margin-left: 0; } input.span4, textarea.span4, select.span4 { display: inline-block; float: none; - width: 210px; + width: 350px; margin-left: 0; } input.span5, textarea.span5, select.span5 { display: inline-block; float: none; - width: 270px; + width: 450px; margin-left: 0; } input.span6, textarea.span6, select.span6 { display: inline-block; float: none; - width: 330px; + width: 550px; margin-left: 0; } input.span7, textarea.span7, select.span7 { display: inline-block; float: none; - width: 390px; + width: 650px; margin-left: 0; } input.span8, textarea.span8, select.span8 { display: inline-block; float: none; - width: 450px; + width: 750px; margin-left: 0; } input.span9, textarea.span9, select.span9 { display: inline-block; float: none; - width: 510px; + width: 850px; margin-left: 0; } input.span10, textarea.span10, select.span10 { display: inline-block; float: none; - width: 570px; + width: 950px; margin-left: 0; } input.span11, textarea.span11, select.span11 { display: inline-block; float: none; - width: 630px; + width: 1050px; margin-left: 0; } input.span12, textarea.span12, select.span12 { display: inline-block; float: none; - width: 690px; + width: 1150px; margin-left: 0; } input.span13, textarea.span13, select.span13 { display: inline-block; float: none; - width: 750px; + width: 1250px; margin-left: 0; } input.span14, textarea.span14, select.span14 { display: inline-block; float: none; - width: 810px; + width: 1350px; margin-left: 0; } input.span15, textarea.span15, select.span15 { display: inline-block; float: none; - width: 870px; + width: 1450px; margin-left: 0; } input.span16, textarea.span16, select.span16 { display: inline-block; float: none; - width: 930px; + width: 1550px; margin-left: 0; } input[disabled], @@ -823,9 +765,6 @@ textarea[readonly] { -webkit-border-radius: 4px; -moz-border-radius: 4px; border-radius: 4px; - -webkit-background-clip: padding-box; - -moz-background-clip: padding; - background-clip: padding-box; } .has-error > label, .has-error span.help-inline, .has-error span.help-block { color: #9d261d; @@ -907,9 +846,6 @@ textarea[readonly] { -webkit-border-radius: 0 3px 3px 0; -moz-border-radius: 0 3px 3px 0; border-radius: 0 3px 3px 0; - -webkit-background-clip: padding-box; - -moz-background-clip: padding; - background-clip: padding-box; } .input-prepend .add-on, .input-append .add-on { position: relative; @@ -931,9 +867,6 @@ textarea[readonly] { -webkit-border-radius: 3px 0 0 3px; -moz-border-radius: 3px 0 0 3px; border-radius: 3px 0 0 3px; - -webkit-background-clip: padding-box; - -moz-background-clip: padding; - background-clip: padding-box; } .input-prepend .active, .input-append .active { background: #a9dba9; @@ -949,17 +882,11 @@ textarea[readonly] { -webkit-border-radius: 3px 0 0 3px; -moz-border-radius: 3px 0 0 3px; border-radius: 3px 0 0 3px; - -webkit-background-clip: padding-box; - -moz-background-clip: padding; - background-clip: padding-box; } .input-append .add-on { -webkit-border-radius: 0 3px 3px 0; -moz-border-radius: 0 3px 3px 0; border-radius: 0 3px 3px 0; - -webkit-background-clip: padding-box; - -moz-background-clip: padding; - background-clip: padding-box; margin-right: 0; margin-left: -1px; } @@ -967,9 +894,6 @@ textarea[readonly] { -webkit-border-radius: 14px; -moz-border-radius: 14px; border-radius: 14px; - -webkit-background-clip: padding-box; - -moz-background-clip: padding; - background-clip: padding-box; } .control-group { margin-bottom: 18px; @@ -1009,9 +933,6 @@ table { -webkit-border-radius: 4px; -moz-border-radius: 4px; border-radius: 4px; - -webkit-background-clip: padding-box; - -moz-background-clip: padding; - background-clip: padding-box; } table th, table td { padding: 10px 10px 9px; @@ -1037,33 +958,21 @@ table tbody tr:first-child td:first-child { -webkit-border-radius: 4px 0 0 0; -moz-border-radius: 4px 0 0 0; border-radius: 4px 0 0 0; - -webkit-background-clip: padding-box; - -moz-background-clip: padding; - background-clip: padding-box; } table tbody tr:first-child td:last-child { -webkit-border-radius: 0 4px 0 0; -moz-border-radius: 0 4px 0 0; border-radius: 0 4px 0 0; - -webkit-background-clip: padding-box; - -moz-background-clip: padding; - background-clip: padding-box; } table tbody tr:last-child td:first-child { -webkit-border-radius: 0 0 0 4px; -moz-border-radius: 0 0 0 4px; border-radius: 0 0 0 4px; - -webkit-background-clip: padding-box; - -moz-background-clip: padding; - background-clip: padding-box; } table tbody tr:last-child td:last-child { -webkit-border-radius: 0 0 4px 0; -moz-border-radius: 0 0 4px 0; border-radius: 0 0 4px 0; - -webkit-background-clip: padding-box; - -moz-background-clip: padding; - background-clip: padding-box; } .zebra-striped tbody tr:nth-child(odd) td { background-color: #f9f9f9; @@ -1263,9 +1172,6 @@ table .headerSortUp.purple, table .headerSortDown.purple { -webkit-border-radius: 4px; -moz-border-radius: 4px; border-radius: 4px; - -webkit-background-clip: padding-box; - -moz-background-clip: padding; - background-clip: padding-box; } .navbar-fixed { position: fixed; @@ -1397,9 +1303,6 @@ table .headerSortUp.purple, table .headerSortDown.purple { -webkit-border-radius: 0 0 6px 6px; -moz-border-radius: 0 0 6px 6px; border-radius: 0 0 6px 6px; - -webkit-background-clip: padding-box; - -moz-background-clip: padding; - background-clip: padding-box; -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); @@ -1494,9 +1397,6 @@ table .headerSortUp.purple, table .headerSortDown.purple { -webkit-border-radius: 4px 4px 0 0; -moz-border-radius: 4px 4px 0 0; border-radius: 4px 4px 0 0; - -webkit-background-clip: padding-box; - -moz-background-clip: padding; - background-clip: padding-box; } .tabs > li > a:hover { text-decoration: none; @@ -1529,9 +1429,6 @@ table .headerSortUp.purple, table .headerSortDown.purple { -webkit-border-radius: 0 0 4px 4px; -moz-border-radius: 0 0 4px 4px; border-radius: 0 0 4px 4px; - -webkit-background-clip: padding-box; - -moz-background-clip: padding; - background-clip: padding-box; } .tabbable.tabs-bottom .tabs > li > a:hover { border-bottom-color: transparent; @@ -1558,9 +1455,6 @@ table .headerSortUp.purple, table .headerSortDown.purple { -webkit-border-radius: 0 6px 6px 6px; -moz-border-radius: 0 6px 6px 6px; border-radius: 0 6px 6px 6px; - -webkit-background-clip: padding-box; - -moz-background-clip: padding; - background-clip: padding-box; } .tabs a.menu:after, .tabs .dropdown-toggle:after { border-top-color: #999; @@ -1581,9 +1475,6 @@ table .headerSortUp.purple, table .headerSortDown.purple { -webkit-border-radius: 15px; -moz-border-radius: 15px; border-radius: 15px; - -webkit-background-clip: padding-box; - -moz-background-clip: padding; - background-clip: padding-box; } .pills a:hover { color: #ffffff; @@ -1622,9 +1513,6 @@ table .headerSortUp.purple, table .headerSortDown.purple { -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px; - -webkit-background-clip: padding-box; - -moz-background-clip: padding; - background-clip: padding-box; -webkit-box-shadow: inset 0 1px 0 #ffffff; -moz-box-shadow: inset 0 1px 0 #ffffff; box-shadow: inset 0 1px 0 #ffffff; @@ -1647,9 +1535,6 @@ table .headerSortUp.purple, table .headerSortDown.purple { -webkit-border-radius: 6px; -moz-border-radius: 6px; border-radius: 6px; - -webkit-background-clip: padding-box; - -moz-background-clip: padding; - background-clip: padding-box; } .hero-unit h1 { margin-bottom: 0; @@ -1765,9 +1650,6 @@ footer { -webkit-border-radius: 4px; -moz-border-radius: 4px; border-radius: 4px; - -webkit-background-clip: padding-box; - -moz-background-clip: padding; - background-clip: padding-box; -webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05); -moz-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05); @@ -1837,9 +1719,6 @@ footer { -webkit-border-radius: 6px; -moz-border-radius: 6px; border-radius: 6px; - -webkit-background-clip: padding-box; - -moz-background-clip: padding; - background-clip: padding-box; } .btn.small { padding: 7px 9px 7px; @@ -1887,9 +1766,6 @@ button.btn::-moz-focus-inner, input[type=submit].btn::-moz-focus-inner { -webkit-border-radius: 0; -moz-border-radius: 0; border-radius: 0; - -webkit-background-clip: padding-box; - -moz-background-clip: padding; - background-clip: padding-box; } .btn-group .btn:first-child { margin-left: 0; @@ -1955,9 +1831,6 @@ button.btn::-moz-focus-inner, input[type=submit].btn::-moz-focus-inner { -webkit-border-radius: 4px; -moz-border-radius: 4px; border-radius: 4px; - -webkit-background-clip: padding-box; - -moz-background-clip: padding; - background-clip: padding-box; -webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.25); -moz-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.25); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.25); @@ -2033,9 +1906,6 @@ button.btn::-moz-focus-inner, input[type=submit].btn::-moz-focus-inner { -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px; - -webkit-background-clip: padding-box; - -moz-background-clip: padding; - background-clip: padding-box; -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); @@ -2075,9 +1945,6 @@ button.btn::-moz-focus-inner, input[type=submit].btn::-moz-focus-inner { -webkit-border-radius: 4px; -moz-border-radius: 4px; border-radius: 4px; - -webkit-background-clip: padding-box; - -moz-background-clip: padding; - background-clip: padding-box; -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.05); -moz-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.05); box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.05); @@ -2120,9 +1987,6 @@ button.btn::-moz-focus-inner, input[type=submit].btn::-moz-focus-inner { -webkit-border-radius: 6px; -moz-border-radius: 6px; border-radius: 6px; - -webkit-background-clip: padding-box; - -moz-background-clip: padding; - background-clip: padding-box; -webkit-box-shadow: 0 3px 7px rgba(0, 0, 0, 0.3); -moz-box-shadow: 0 3px 7px rgba(0, 0, 0, 0.3); box-shadow: 0 3px 7px rgba(0, 0, 0, 0.3); @@ -2158,9 +2022,6 @@ button.btn::-moz-focus-inner, input[type=submit].btn::-moz-focus-inner { -webkit-border-radius: 0 0 6px 6px; -moz-border-radius: 0 0 6px 6px; border-radius: 0 0 6px 6px; - -webkit-background-clip: padding-box; - -moz-background-clip: padding; - background-clip: padding-box; -webkit-box-shadow: inset 0 1px 0 #ffffff; -moz-box-shadow: inset 0 1px 0 #ffffff; box-shadow: inset 0 1px 0 #ffffff; @@ -2240,9 +2101,6 @@ button.btn::-moz-focus-inner, input[type=submit].btn::-moz-focus-inner { -webkit-border-radius: 4px; -moz-border-radius: 4px; border-radius: 4px; - -webkit-background-clip: padding-box; - -moz-background-clip: padding; - background-clip: padding-box; } .twipsy-arrow { position: absolute; @@ -2303,9 +2161,6 @@ button.btn::-moz-focus-inner, input[type=submit].btn::-moz-focus-inner { -webkit-border-radius: 6px; -moz-border-radius: 6px; border-radius: 6px; - -webkit-background-clip: padding-box; - -moz-background-clip: padding; - background-clip: padding-box; -webkit-box-shadow: 0 3px 7px rgba(0, 0, 0, 0.3); -moz-box-shadow: 0 3px 7px rgba(0, 0, 0, 0.3); box-shadow: 0 3px 7px rgba(0, 0, 0, 0.3); @@ -2317,9 +2172,6 @@ button.btn::-moz-focus-inner, input[type=submit].btn::-moz-focus-inner { -webkit-border-radius: 3px 3px 0 0; -moz-border-radius: 3px 3px 0 0; border-radius: 3px 3px 0 0; - -webkit-background-clip: padding-box; - -moz-background-clip: padding; - background-clip: padding-box; border-bottom: 1px solid #eee; } .popover .content { @@ -2329,9 +2181,6 @@ button.btn::-moz-focus-inner, input[type=submit].btn::-moz-focus-inner { -moz-border-radius: 0 0 3px 3px; border-radius: 0 0 3px 3px; -webkit-background-clip: padding-box; - -moz-background-clip: padding; - background-clip: padding-box; - -webkit-background-clip: padding-box; -moz-background-clip: padding-box; background-clip: padding-box; } @@ -2359,9 +2208,6 @@ button.btn::-moz-focus-inner, input[type=submit].btn::-moz-focus-inner { -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px; - -webkit-background-clip: padding-box; - -moz-background-clip: padding; - background-clip: padding-box; } .label.important { background-color: #c43c35; @@ -2400,9 +2246,6 @@ button.btn::-moz-focus-inner, input[type=submit].btn::-moz-focus-inner { -webkit-border-radius: 4px; -moz-border-radius: 4px; border-radius: 4px; - -webkit-background-clip: padding-box; - -moz-background-clip: padding; - background-clip: padding-box; -webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.075); -moz-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.075); box-shadow: 0 1px 1px rgba(0, 0, 0, 0.075); @@ -2420,5 +2263,184 @@ button.btn::-moz-focus-inner, input[type=submit].btn::-moz-focus-inner { * For phone and tablet devices * ------------------------------------------------------------- */ @media (max-width: 480px) { - + .container { + width: auto; + padding: 0 10px; + } + [class*="span"] { + float: none; + display: block; + width: auto; + } +} +@media (min-width: 480px) and (max-width: 768px) { + .container { + width: auto; + padding: 0 10px; + } + [class*="span"] { + float: none; + display: block; + width: auto; + margin: 0; + } +} +@media (min-width: 768px) and (max-width: 940px) { + .container { + width: 748px; + } + .span1 { + width: 28px; + } + .span2 { + width: 76px; + } + .span3 { + width: 124px; + } + .span4 { + width: 172px; + } + .span5 { + width: 220px; + } + .span6 { + width: 268px; + } + .span7 { + width: 316px; + } + .span8 { + width: 364px; + } + .span9 { + width: 412px; + } + .span10 { + width: 460px; + } + .span11 { + width: 508px; + } + .span12 { + width: 556px; + } + .offset1 { + margin-left: 68px; + } + .offset2 { + margin-left: 116px; + } + .offset3 { + margin-left: 164px; + } + .offset4 { + margin-left: 212px; + } + .offset5 { + margin-left: 260px; + } + .offset6 { + margin-left: 308px; + } + .offset7 { + margin-left: 356px; + } + .offset8 { + margin-left: 404px; + } + .offset9 { + margin-left: 452px; + } + .offset10 { + margin-left: 500px; + } + .offset11 { + margin-left: 548px; + } + .offset12 { + margin-left: 596px; + } +} +@media (min-width: 1170px) { + .container { + width: 1170px; + } + [class*="span"] { + display: inline; + float: left; + margin-left: 20px; + } + .span1 { + width: 70px; + } + .span2 { + width: 170px; + } + .span3 { + width: 270px; + } + .span4 { + width: 370px; + } + .span5 { + width: 470px; + } + .span6 { + width: 570px; + } + .span7 { + width: 670px; + } + .span8 { + width: 770px; + } + .span9 { + width: 870px; + } + .span10 { + width: 970px; + } + .span11 { + width: 1070px; + } + .span12 { + width: 1170px; + } + .offset1 { + margin-left: 130px; + } + .offset2 { + margin-left: 230px; + } + .offset3 { + margin-left: 330px; + } + .offset4 { + margin-left: 430px; + } + .offset5 { + margin-left: 530px; + } + .offset6 { + margin-left: 630px; + } + .offset7 { + margin-left: 730px; + } + .offset8 { + margin-left: 830px; + } + .offset9 { + margin-left: 930px; + } + .offset10 { + margin-left: 1030px; + } + .offset11 { + margin-left: 1130px; + } + .offset12 { + margin-left: 1230px; + } } diff --git a/bootstrap.min.css b/bootstrap.min.css index 770bd1dc66..04a992e322 100644 --- a/bootstrap.min.css +++ b/bootstrap.min.css @@ -36,49 +36,33 @@ a{color:#0069d6;text-decoration:none;line-height:inherit;font-weight:inherit;}a: .pull-left{float:left;} .hide{display:none;} .show{display:block;} -.row{zoom:1;margin-left:-20px;}.row:before,.row:after{display:table;content:"";zoom:1;*display:inline;} +.row{zoom:1;}.row:before,.row:after{display:table;content:"";zoom:1;*display:inline;} .row:after{clear:both;} [class*="span"]{display:inline;float:left;margin-left:20px;} -.span1{width:40px;} -.span2{width:100px;} -.span3{width:160px;} -.span4{width:220px;} -.span5{width:280px;} -.span6{width:340px;} -.span7{width:400px;} -.span8{width:460px;} -.span9{width:520px;} -.span10{width:580px;} -.span11{width:640px;} -.span12{width:700px;} -.span13{width:760px;} -.span14{width:820px;} -.span15{width:880px;} -.span16{width:940px;} -.span17{width:1000px;} -.span18{width:1060px;} -.span19{width:1120px;} -.span20{width:1180px;} -.span21{width:1240px;} -.span22{width:1300px;} -.span23{width:1360px;} -.span24{width:1420px;} -.offset1{margin-left:80px;} -.offset2{margin-left:140px;} -.offset3{margin-left:200px;} -.offset4{margin-left:260px;} -.offset5{margin-left:320px;} -.offset6{margin-left:380px;} -.offset7{margin-left:440px;} -.offset8{margin-left:500px;} -.offset9{margin-left:560px;} -.offset10{margin-left:620px;} -.offset11{margin-left:680px;} -.offset12{margin-left:740px;} -.span-one-third{width:300px;} -.span-two-thirds{width:620px;} -.offset-one-third{margin-left:340px;} -.offset-two-thirds{margin-left:660px;} +.row>[class*="span"]:first-child{margin-left:0;} +.span1{width:60px;} +.span2{width:140px;} +.span3{width:220px;} +.span4{width:300px;} +.span5{width:380px;} +.span6{width:460px;} +.span7{width:540px;} +.span8{width:620px;} +.span9{width:700px;} +.span10{width:780px;} +.span11{width:860px;} +.span12{width:940px;} +.offset1{margin-left:100px;} +.offset2{margin-left:180px;} +.offset3{margin-left:260px;} +.offset4{margin-left:340px;} +.offset5{margin-left:420px;} +.offset6{margin-left:500px;} +.offset7{margin-left:580px;} +.offset8{margin-left:660px;} +.offset9{margin-left:740px;} +.offset10{margin-left:820px;} +.offset11{margin-left:900px;} p{font-family:"Helvetica Neue",Helvetica,Arial,sans-serif;font-size:13px;line-height:18px;margin-bottom:9px;}p small{font-size:11px;color:#bfbfbf;} h1,h2,h3,h4,h5,h6{font-weight:bold;color:#404040;}h1 small,h2 small,h3 small,h4 small,h5 small,h6 small{color:#bfbfbf;} h1{margin-bottom:18px;font-size:30px;line-height:36px;}h1 small{font-size:18px;} @@ -103,15 +87,15 @@ em{font-style:italic;font-weight:inherit;line-height:inherit;} blockquote{margin-bottom:18px;border-left:5px solid #eee;padding-left:15px;}blockquote p{font-size:14px;font-weight:300;line-height:18px;margin-bottom:0;} blockquote small{display:block;font-size:12px;font-weight:300;line-height:18px;color:#bfbfbf;}blockquote small:before{content:'\2014 \00A0';} address{display:block;line-height:18px;margin-bottom:18px;} -code,pre{padding:0 3px 2px;font-family:Menlo, Monaco, Andale Mono, Courier New, monospace;font-size:12px;-webkit-border-radius:3px;-moz-border-radius:3px;border-radius:3px;-webkit-background-clip:padding-box;-moz-background-clip:padding;background-clip:padding-box;} +code,pre{padding:0 3px 2px;font-family:Menlo, Monaco, Andale Mono, Courier New, monospace;font-size:12px;-webkit-border-radius:3px;-moz-border-radius:3px;border-radius:3px;} code{background-color:#fee9cc;color:rgba(0, 0, 0, 0.75);padding:1px 3px;} -pre{background-color:#f5f5f5;display:block;padding:8.5px;margin:0 0 18px;line-height:18px;font-size:12px;border:1px solid #ccc;border:1px solid rgba(0, 0, 0, 0.15);-webkit-border-radius:3px;-moz-border-radius:3px;border-radius:3px;-webkit-background-clip:padding-box;-moz-background-clip:padding;background-clip:padding-box;white-space:pre;white-space:pre-wrap;word-wrap:break-word;} +pre{background-color:#f5f5f5;display:block;padding:8.5px;margin:0 0 18px;line-height:18px;font-size:12px;border:1px solid #ccc;border:1px solid rgba(0, 0, 0, 0.15);-webkit-border-radius:3px;-moz-border-radius:3px;border-radius:3px;white-space:pre;white-space:pre-wrap;word-wrap:break-word;} form{margin-bottom:18px;} legend{display:block;width:100%;margin-bottom:27px;font-size:19.5px;line-height:36px;color:#404040;border-bottom:1px solid #eee;} label,input,select,textarea{font-family:"Helvetica Neue",Helvetica,Arial,sans-serif;font-size:13px;font-weight:normal;line-height:18px;} label{display:block;margin-bottom:5px;color:#404040;} input[type=checkbox],input[type=radio]{cursor:pointer;} -input,textarea,select,.uneditable-input{display:inline-block;width:210px;height:18px;padding:4px;font-size:13px;line-height:18px;color:#808080;border:1px solid #ccc;-webkit-border-radius:3px;-moz-border-radius:3px;border-radius:3px;-webkit-background-clip:padding-box;-moz-background-clip:padding;background-clip:padding-box;} +input,textarea,select,.uneditable-input{display:inline-block;width:210px;height:18px;padding:4px;font-size:13px;line-height:18px;color:#808080;border:1px solid #ccc;-webkit-border-radius:3px;-moz-border-radius:3px;border-radius:3px;} input[type=checkbox],input[type=radio]{width:auto;height:auto;padding:0;margin:3px 0;*margin-top:0;line-height:normal;border:none;} input[type=file]{background-color:#ffffff;padding:initial;border:initial;line-height:initial;-webkit-box-shadow:none;-moz-box-shadow:none;box-shadow:none;} input[type=button],input[type=reset],input[type=submit]{width:auto;height:auto;} @@ -127,24 +111,24 @@ input[type=file]:focus,input[type=checkbox]:focus,select:focus{-webkit-box-shado .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;} -input.span4,textarea.span4,select.span4{display:inline-block;float:none;width:210px;margin-left:0;} -input.span5,textarea.span5,select.span5{display:inline-block;float:none;width:270px;margin-left:0;} -input.span6,textarea.span6,select.span6{display:inline-block;float:none;width:330px;margin-left:0;} -input.span7,textarea.span7,select.span7{display:inline-block;float:none;width:390px;margin-left:0;} -input.span8,textarea.span8,select.span8{display:inline-block;float:none;width:450px;margin-left:0;} -input.span9,textarea.span9,select.span9{display:inline-block;float:none;width:510px;margin-left:0;} -input.span10,textarea.span10,select.span10{display:inline-block;float:none;width:570px;margin-left:0;} -input.span11,textarea.span11,select.span11{display:inline-block;float:none;width:630px;margin-left:0;} -input.span12,textarea.span12,select.span12{display:inline-block;float:none;width:690px;margin-left:0;} -input.span13,textarea.span13,select.span13{display:inline-block;float:none;width:750px;margin-left:0;} -input.span14,textarea.span14,select.span14{display:inline-block;float:none;width:810px;margin-left:0;} -input.span15,textarea.span15,select.span15{display:inline-block;float:none;width:870px;margin-left:0;} -input.span16,textarea.span16,select.span16{display:inline-block;float:none;width:930px;margin-left:0;} +input.span1,textarea.span1,select.span1{display:inline-block;float:none;width:50px;margin-left:0;} +input.span2,textarea.span2,select.span2{display:inline-block;float:none;width:150px;margin-left:0;} +input.span3,textarea.span3,select.span3{display:inline-block;float:none;width:250px;margin-left:0;} +input.span4,textarea.span4,select.span4{display:inline-block;float:none;width:350px;margin-left:0;} +input.span5,textarea.span5,select.span5{display:inline-block;float:none;width:450px;margin-left:0;} +input.span6,textarea.span6,select.span6{display:inline-block;float:none;width:550px;margin-left:0;} +input.span7,textarea.span7,select.span7{display:inline-block;float:none;width:650px;margin-left:0;} +input.span8,textarea.span8,select.span8{display:inline-block;float:none;width:750px;margin-left:0;} +input.span9,textarea.span9,select.span9{display:inline-block;float:none;width:850px;margin-left:0;} +input.span10,textarea.span10,select.span10{display:inline-block;float:none;width:950px;margin-left:0;} +input.span11,textarea.span11,select.span11{display:inline-block;float:none;width:1050px;margin-left:0;} +input.span12,textarea.span12,select.span12{display:inline-block;float:none;width:1150px;margin-left:0;} +input.span13,textarea.span13,select.span13{display:inline-block;float:none;width:1250px;margin-left:0;} +input.span14,textarea.span14,select.span14{display:inline-block;float:none;width:1350px;margin-left:0;} +input.span15,textarea.span15,select.span15{display:inline-block;float:none;width:1450px;margin-left:0;} +input.span16,textarea.span16,select.span16{display:inline-block;float:none;width:1550px;margin-left:0;} input[disabled],select[disabled],textarea[disabled],input[readonly],select[readonly],textarea[readonly]{background-color:#f5f5f5;border-color:#ddd;cursor:not-allowed;} -.has-error{background:#f8dcda;padding:9px 0;margin:-10px 0 10px;-webkit-border-radius:4px;-moz-border-radius:4px;border-radius:4px;-webkit-background-clip:padding-box;-moz-background-clip:padding;background-clip:padding-box;}.has-error>label,.has-error span.help-inline,.has-error span.help-block{color:#9d261d;} +.has-error{background:#f8dcda;padding:9px 0;margin:-10px 0 10px;-webkit-border-radius:4px;-moz-border-radius:4px;border-radius:4px;}.has-error>label,.has-error span.help-inline,.has-error span.help-block{color:#9d261d;} .has-error input,.has-error textarea,.has-error select{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);}.has-error input:focus,.has-error textarea:focus,.has-error select: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);} .has-error .input-prepend span.add-on,.has-error .input-append span.add-on{background:#f4c8c5;border-color:#c87872;color:#b9554d;} .form-actions{padding:17px 20px 18px;margin-top:18px;margin-bottom:18px;background-color:#f5f5f5;border-top:1px solid #ddd;} @@ -158,28 +142,28 @@ input[disabled],select[disabled],textarea[disabled],input[readonly],select[reado .inline-inputs input.mini{width:60px;} .inline-inputs input.small{width:90px;} .inline-inputs span{padding:0 2px 0 1px;} -.input-prepend input,.input-append input{-webkit-border-radius:0 3px 3px 0;-moz-border-radius:0 3px 3px 0;border-radius:0 3px 3px 0;-webkit-background-clip:padding-box;-moz-background-clip:padding;background-clip:padding-box;} -.input-prepend .add-on,.input-append .add-on{position:relative;background:#f5f5f5;border:1px solid #ccc;z-index:2;float:left;display:block;width:auto;min-width:16px;height:18px;padding:4px 4px 4px 5px;margin-right:-1px;font-weight:normal;line-height:18px;color:#bfbfbf;text-align:center;text-shadow:0 1px 0 #ffffff;-webkit-border-radius:3px 0 0 3px;-moz-border-radius:3px 0 0 3px;border-radius:3px 0 0 3px;-webkit-background-clip:padding-box;-moz-background-clip:padding;background-clip:padding-box;} +.input-prepend input,.input-append input{-webkit-border-radius:0 3px 3px 0;-moz-border-radius:0 3px 3px 0;border-radius:0 3px 3px 0;} +.input-prepend .add-on,.input-append .add-on{position:relative;background:#f5f5f5;border:1px solid #ccc;z-index:2;float:left;display:block;width:auto;min-width:16px;height:18px;padding:4px 4px 4px 5px;margin-right:-1px;font-weight:normal;line-height:18px;color:#bfbfbf;text-align:center;text-shadow:0 1px 0 #ffffff;-webkit-border-radius:3px 0 0 3px;-moz-border-radius:3px 0 0 3px;border-radius:3px 0 0 3px;} .input-prepend .active,.input-append .active{background:#a9dba9;border-color:#46a546;} .input-prepend .add-on{*margin-top:1px;} -.input-append input{float:left;-webkit-border-radius:3px 0 0 3px;-moz-border-radius:3px 0 0 3px;border-radius:3px 0 0 3px;-webkit-background-clip:padding-box;-moz-background-clip:padding;background-clip:padding-box;} -.input-append .add-on{-webkit-border-radius:0 3px 3px 0;-moz-border-radius:0 3px 3px 0;border-radius:0 3px 3px 0;-webkit-background-clip:padding-box;-moz-background-clip:padding;background-clip:padding-box;margin-right:0;margin-left:-1px;} -.form-search .search-query{-webkit-border-radius:14px;-moz-border-radius:14px;border-radius:14px;-webkit-background-clip:padding-box;-moz-background-clip:padding;background-clip:padding-box;} +.input-append input{float:left;-webkit-border-radius:3px 0 0 3px;-moz-border-radius:3px 0 0 3px;border-radius:3px 0 0 3px;} +.input-append .add-on{-webkit-border-radius:0 3px 3px 0;-moz-border-radius:0 3px 3px 0;border-radius:0 3px 3px 0;margin-right:0;margin-left:-1px;} +.form-search .search-query{-webkit-border-radius:14px;-moz-border-radius:14px;border-radius:14px;} .control-group{margin-bottom:18px;} .control-group>label{font-weight:bold;} .form-horizontal .control-group>label{float:left;width:130px;padding-top:5px;text-align:right;} .form-horizontal .controls{margin-left:150px;} .form-horizontal .control-list{padding-top:6px;} .form-horizontal .form-actions{padding-left:150px;} -table{width:100%;margin-bottom:18px;padding:0;border-collapse:separate;*border-collapse:collapse;font-size:13px;border:1px solid #ddd;-webkit-border-radius:4px;-moz-border-radius:4px;border-radius:4px;-webkit-background-clip:padding-box;-moz-background-clip:padding;background-clip:padding-box;}table th,table td{padding:10px 10px 9px;line-height:18px;text-align:left;} +table{width:100%;margin-bottom:18px;padding:0;border-collapse:separate;*border-collapse:collapse;font-size:13px;border:1px solid #ddd;-webkit-border-radius:4px;-moz-border-radius:4px;border-radius:4px;}table th,table td{padding:10px 10px 9px;line-height:18px;text-align:left;} table th{padding-top:9px;font-weight:bold;vertical-align:middle;border-bottom:1px solid #ddd;} table td{vertical-align:top;} table th+th,table td+td{border-left:1px solid #ddd;} table tr+tr td{border-top:1px solid #ddd;} -table tbody tr:first-child td:first-child{-webkit-border-radius:4px 0 0 0;-moz-border-radius:4px 0 0 0;border-radius:4px 0 0 0;-webkit-background-clip:padding-box;-moz-background-clip:padding;background-clip:padding-box;} -table tbody tr:first-child td:last-child{-webkit-border-radius:0 4px 0 0;-moz-border-radius:0 4px 0 0;border-radius:0 4px 0 0;-webkit-background-clip:padding-box;-moz-background-clip:padding;background-clip:padding-box;} -table tbody tr:last-child td:first-child{-webkit-border-radius:0 0 0 4px;-moz-border-radius:0 0 0 4px;border-radius:0 0 0 4px;-webkit-background-clip:padding-box;-moz-background-clip:padding;background-clip:padding-box;} -table tbody tr:last-child td:last-child{-webkit-border-radius:0 0 4px 0;-moz-border-radius:0 0 4px 0;border-radius:0 0 4px 0;-webkit-background-clip:padding-box;-moz-background-clip:padding;background-clip:padding-box;} +table tbody tr:first-child td:first-child{-webkit-border-radius:4px 0 0 0;-moz-border-radius:4px 0 0 0;border-radius:4px 0 0 0;} +table tbody tr:first-child td:last-child{-webkit-border-radius:0 4px 0 0;-moz-border-radius:0 4px 0 0;border-radius:0 4px 0 0;} +table tbody tr:last-child td:first-child{-webkit-border-radius:0 0 0 4px;-moz-border-radius:0 0 0 4px;border-radius:0 0 0 4px;} +table tbody tr:last-child td:last-child{-webkit-border-radius:0 0 4px 0;-moz-border-radius:0 0 4px 0;border-radius:0 0 4px 0;} .zebra-striped tbody tr:nth-child(odd) td{background-color:#f9f9f9;} .zebra-striped tbody tr:hover td{background-color:#f5f5f5;} .zebra-striped .header{cursor:pointer;}.zebra-striped .header:after{content:"";float:right;margin-top:7px;border-width:0 4px 4px;border-style:solid;border-color:#000 transparent;visibility:hidden;} @@ -210,7 +194,7 @@ table .headerSortUp.purple,table .headerSortDown.purple{background-color:#e2d5f0 .navbar-search .search-query:hover{background-color:#bfbfbf;background-color:rgba(255, 255, 255, 0.5);color:#ffffff;} .navbar-search .search-query:focus,.navbar-search .search-query.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);} .navbar-static{margin-bottom:18px;} -.navbar-static .navbar-inner{margin-left:-20px;margin-right:-20px;padding-left:20px;padding-right:20px;-webkit-border-radius:4px;-moz-border-radius:4px;border-radius:4px;-webkit-background-clip:padding-box;-moz-background-clip:padding;background-clip:padding-box;} +.navbar-static .navbar-inner{margin-left:-20px;margin-right:-20px;padding-left:20px;padding-right:20px;-webkit-border-radius:4px;-moz-border-radius:4px;border-radius:4px;} .navbar-fixed{position:fixed;top:0;left:0;right:0;z-index:10000;} .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;} @@ -225,7 +209,7 @@ table .headerSortUp.purple,table .headerSortDown.purple{background-color:#e2d5f0 .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:6px;border-left:4px solid transparent;border-right:4px solid transparent;border-top:4px solid #ffffff;filter:alpha(opacity=30);-khtml-opacity:0.3;-moz-opacity:0.3;opacity:0.3;} .dropdown:hover .dropdown-toggle:after{filter:alpha(opacity=100);-khtml-opacity:1;-moz-opacity:1;opacity:1;} -.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-background-clip:padding-box;-moz-background-clip:padding;background-clip:padding-box;-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{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-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);background-repeat:repeat-x;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);} .dropdown.open .dropdown-toggle{color:#ffffff;background:#ccc;background:rgba(0, 0, 0, 0.3);} @@ -233,30 +217,30 @@ table .headerSortUp.purple,table .headerSortDown.purple{background-color:#e2d5f0 .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{border-color:#ddd;border-style:solid;border-width:0 0 1px;}.tabs>li{position:relative;margin-bottom:-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;-webkit-background-clip:padding-box;-moz-background-clip:padding;background-clip:padding-box;}.tabs>li>a:hover{text-decoration:none;background-color:#eee;border-color:#eee #eee #ddd;} +.tabs{border-color:#ddd;border-style:solid;border-width:0 0 1px;}.tabs>li{position:relative;margin-bottom:-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 .active>a,.tabs .active>a:hover{color:#808080;background-color:#ffffff;border:1px solid #ddd;border-bottom-color:transparent;cursor:default;} .tabbable{margin-bottom:18px;}.tabbable .tabs{margin-bottom:0;border-bottom:0;} .tabbable .tab-content{padding:19px;border:1px solid #ddd;} .tabbable.tabs-bottom .tabs>li{margin-top:-1px;margin-bottom:0;} -.tabbable.tabs-bottom .tabs>li>a{-webkit-border-radius:0 0 4px 4px;-moz-border-radius:0 0 4px 4px;border-radius:0 0 4px 4px;-webkit-background-clip:padding-box;-moz-background-clip:padding;background-clip:padding-box;}.tabbable.tabs-bottom .tabs>li>a:hover{border-bottom-color:transparent;border-top-color:#ddd;} +.tabbable.tabs-bottom .tabs>li>a{-webkit-border-radius:0 0 4px 4px;-moz-border-radius:0 0 4px 4px;border-radius:0 0 4px 4px;}.tabbable.tabs-bottom .tabs>li>a:hover{border-bottom-color:transparent;border-top-color:#ddd;} .tabbable.tabs-bottom .tabs>.active>a,.tabbable.tabs-bottom .tabs>.active>a:hover{border-color:transparent #ddd #ddd #ddd;} .tabbable.tabs-left .tabs{float:left;} .tabbable.tabs-left .tabs>li{float:none;} .tabbable.tabs-right .tabs{float:right;} .tabbable.tabs-right .tabs>li{float:none;} -.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;-webkit-background-clip:padding-box;-moz-background-clip:padding;background-clip:padding-box;} +.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;} -.pills a{margin:5px 3px 5px 0;padding:0 15px;line-height:30px;text-shadow:0 1px 1px #ffffff;-webkit-border-radius:15px;-moz-border-radius:15px;border-radius:15px;-webkit-background-clip:padding-box;-moz-background-clip:padding;background-clip:padding-box;}.pills a:hover{color:#ffffff;text-decoration:none;text-shadow:0 1px 1px rgba(0, 0, 0, 0.25);background-color:#00438a;} +.pills a{margin:5px 3px 5px 0;padding:0 15px;line-height:30px;text-shadow:0 1px 1px #ffffff;-webkit-border-radius:15px;-moz-border-radius:15px;border-radius:15px;}.pills a:hover{color:#ffffff;text-decoration:none;text-shadow:0 1px 1px rgba(0, 0, 0, 0.25);background-color:#00438a;} .pills .active a{color:#ffffff;text-shadow:0 1px 1px rgba(0, 0, 0, 0.25);background-color:#0069d6;} .pills-vertical>li{float:none;} .tab-content>.tab-pane,.pill-content>.pill-pane{display:none;} .tab-content>.active,.pill-content>.active{display:block;} -.breadcrumb{margin:0 0 18px;padding:7px 14px;background-color:#f5f5f5;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);background-repeat:repeat-x;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-background-clip:padding-box;-moz-background-clip:padding;background-clip:padding-box;-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{margin:0 0 18px;padding:7px 14px;background-color:#f5f5f5;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);background-repeat:repeat-x;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;-webkit-background-clip:padding-box;-moz-background-clip:padding;background-clip:padding-box;}.hero-unit h1{margin-bottom:0;font-size:60px;line-height:1;letter-spacing:-1px;} +.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;} .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;} @@ -264,13 +248,13 @@ footer{margin-top:17px;padding-top:17px;border-top:1px solid #eee;} .btn.danger,.alert-message.danger,.btn.error,.alert-message.error{background-color:#c43c35;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);background-repeat:repeat-x;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);} .btn.success,.alert-message.success{background-color:#57a957;background-image:-khtml-gradient(linear, left top, left bottom, from(#62c462), to(#57a957));background-image:-moz-linear-gradient(top, #62c462, #57a957);background-image:-ms-linear-gradient(top, #62c462, #57a957);background-image:-webkit-gradient(linear, left top, left bottom, color-stop(0%, #62c462), color-stop(100%, #57a957));background-image:-webkit-linear-gradient(top, #62c462, #57a957);background-image:-o-linear-gradient(top, #62c462, #57a957);background-image:linear-gradient(top, #62c462, #57a957);background-repeat:repeat-x;filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#62c462', endColorstr='#57a957', GradientType=0);text-shadow:0 -1px 0 rgba(0, 0, 0, 0.25);border-color:#57a957 #57a957 #3d773d;border-color:rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);} .btn.info,.alert-message.info{background-color:#339bb9;background-image:-khtml-gradient(linear, left top, left bottom, from(#5bc0de), to(#339bb9));background-image:-moz-linear-gradient(top, #5bc0de, #339bb9);background-image:-ms-linear-gradient(top, #5bc0de, #339bb9);background-image:-webkit-gradient(linear, left top, left bottom, color-stop(0%, #5bc0de), color-stop(100%, #339bb9));background-image:-webkit-linear-gradient(top, #5bc0de, #339bb9);background-image:-o-linear-gradient(top, #5bc0de, #339bb9);background-image:linear-gradient(top, #5bc0de, #339bb9);background-repeat:repeat-x;filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#5bc0de', endColorstr='#339bb9', GradientType=0);text-shadow:0 -1px 0 rgba(0, 0, 0, 0.25);border-color:#339bb9 #339bb9 #22697d;border-color:rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);} -.btn{cursor:pointer;display:inline-block;background-color:#e6e6e6;background-image:-webkit-gradient(linear, 0 0, 0 100%, from(#ffffff), color-stop(25%, #ffffff), to(#e6e6e6));background-image:-webkit-linear-gradient(#ffffff, #ffffff 25%, #e6e6e6);background-image:-moz-linear-gradient(top, #ffffff, #ffffff 25%, #e6e6e6);background-image:-ms-linear-gradient(#ffffff, #ffffff 25%, #e6e6e6);background-image:-o-linear-gradient(#ffffff, #ffffff 25%, #e6e6e6);background-image:linear-gradient(#ffffff, #ffffff 25%, #e6e6e6);background-repeat:no-repeat;filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#e6e6e6', GradientType=0);padding:5px 14px 6px;text-shadow:0 1px 1px rgba(255, 255, 255, 0.75);color:#333;font-size:13px;line-height:normal;border:1px solid #ccc;border-bottom-color:#bbb;-webkit-border-radius:4px;-moz-border-radius:4px;border-radius:4px;-webkit-background-clip:padding-box;-moz-background-clip:padding;background-clip:padding-box;-webkit-box-shadow:inset 0 1px 0 rgba(255, 255, 255, 0.2),0 1px 2px rgba(0, 0, 0, 0.05);-moz-box-shadow:inset 0 1px 0 rgba(255, 255, 255, 0.2),0 1px 2px rgba(0, 0, 0, 0.05);box-shadow:inset 0 1px 0 rgba(255, 255, 255, 0.2),0 1px 2px rgba(0, 0, 0, 0.05);-webkit-transition:0.1s linear all;-moz-transition:0.1s linear all;-ms-transition:0.1s linear all;-o-transition:0.1s linear all;transition:0.1s linear all;}.btn:hover{background-position:0 -15px;color:#333;text-decoration:none;} +.btn{cursor:pointer;display:inline-block;background-color:#e6e6e6;background-image:-webkit-gradient(linear, 0 0, 0 100%, from(#ffffff), color-stop(25%, #ffffff), to(#e6e6e6));background-image:-webkit-linear-gradient(#ffffff, #ffffff 25%, #e6e6e6);background-image:-moz-linear-gradient(top, #ffffff, #ffffff 25%, #e6e6e6);background-image:-ms-linear-gradient(#ffffff, #ffffff 25%, #e6e6e6);background-image:-o-linear-gradient(#ffffff, #ffffff 25%, #e6e6e6);background-image:linear-gradient(#ffffff, #ffffff 25%, #e6e6e6);background-repeat:no-repeat;filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#e6e6e6', GradientType=0);padding:5px 14px 6px;text-shadow:0 1px 1px rgba(255, 255, 255, 0.75);color:#333;font-size:13px;line-height:normal;border:1px solid #ccc;border-bottom-color:#bbb;-webkit-border-radius:4px;-moz-border-radius:4px;border-radius:4px;-webkit-box-shadow:inset 0 1px 0 rgba(255, 255, 255, 0.2),0 1px 2px rgba(0, 0, 0, 0.05);-moz-box-shadow:inset 0 1px 0 rgba(255, 255, 255, 0.2),0 1px 2px rgba(0, 0, 0, 0.05);box-shadow:inset 0 1px 0 rgba(255, 255, 255, 0.2),0 1px 2px rgba(0, 0, 0, 0.05);-webkit-transition:0.1s linear all;-moz-transition:0.1s linear all;-ms-transition:0.1s linear all;-o-transition:0.1s linear all;transition:0.1s linear all;}.btn:hover{background-position:0 -15px;color:#333;text-decoration:none;} .btn:focus{outline:1px dotted #666;} .btn.primary{color:#ffffff;background-color:#0064cd;background-image:-khtml-gradient(linear, left top, left bottom, from(#049cdb), to(#0064cd));background-image:-moz-linear-gradient(top, #049cdb, #0064cd);background-image:-ms-linear-gradient(top, #049cdb, #0064cd);background-image:-webkit-gradient(linear, left top, left bottom, color-stop(0%, #049cdb), color-stop(100%, #0064cd));background-image:-webkit-linear-gradient(top, #049cdb, #0064cd);background-image:-o-linear-gradient(top, #049cdb, #0064cd);background-image:linear-gradient(top, #049cdb, #0064cd);background-repeat:repeat-x;filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#049cdb', endColorstr='#0064cd', GradientType=0);text-shadow:0 -1px 0 rgba(0, 0, 0, 0.25);border-color:#0064cd #0064cd #003f81;border-color:rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);} .btn:active{-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);} .btn.disabled{cursor:default;background-image:none;filter:progid:DXImageTransform.Microsoft.gradient(enabled = false);filter:alpha(opacity=65);-khtml-opacity:0.65;-moz-opacity:0.65;opacity:0.65;-webkit-box-shadow:none;-moz-box-shadow:none;box-shadow:none;} .btn[disabled]{cursor:default;background-image:none;filter:progid:DXImageTransform.Microsoft.gradient(enabled = false);filter:alpha(opacity=65);-khtml-opacity:0.65;-moz-opacity:0.65;opacity:0.65;-webkit-box-shadow:none;-moz-box-shadow:none;box-shadow:none;} -.btn.large{font-size:15px;line-height:normal;padding:9px 14px 9px;-webkit-border-radius:6px;-moz-border-radius:6px;border-radius:6px;-webkit-background-clip:padding-box;-moz-background-clip:padding;background-clip:padding-box;} +.btn.large{font-size:15px;line-height:normal;padding:9px 14px 9px;-webkit-border-radius:6px;-moz-border-radius:6px;border-radius:6px;} .btn.small{padding:7px 9px 7px;font-size:11px;} :root .alert-message,:root .btn{border-radius:0 \0;} button.btn::-moz-focus-inner,input[type=submit].btn::-moz-focus-inner{padding:0;border:0;} @@ -279,11 +263,11 @@ button.btn::-moz-focus-inner,input[type=submit].btn::-moz-focus-inner{padding:0; .btn-toolbar .btn-group{float:left;margin-right:10px;} .btn-group{zoom:1;}.btn-group:before,.btn-group:after{display:table;content:"";zoom:1;*display:inline;} .btn-group:after{clear:both;} -.btn-group .btn{position:relative;float:left;margin-left:-1px;-webkit-border-radius:0;-moz-border-radius:0;border-radius:0;-webkit-background-clip:padding-box;-moz-background-clip:padding;background-clip:padding-box;}.btn-group .btn:first-child{margin-left:0;-webkit-border-top-left-radius:4px;-moz-border-radius-topleft:4px;border-top-left-radius:4px;-webkit-border-bottom-left-radius:4px;-moz-border-radius-bottomleft:4px;border-bottom-left-radius:4px;} +.btn-group .btn{position:relative;float:left;margin-left:-1px;-webkit-border-radius:0;-moz-border-radius:0;border-radius:0;}.btn-group .btn:first-child{margin-left:0;-webkit-border-top-left-radius:4px;-moz-border-radius-topleft:4px;border-top-left-radius:4px;-webkit-border-bottom-left-radius:4px;-moz-border-radius-bottomleft:4px;border-bottom-left-radius:4px;} .btn-group .btn:last-child{-webkit-border-top-right-radius:4px;-moz-border-radius-topright:4px;border-top-right-radius:4px;-webkit-border-bottom-right-radius:4px;-moz-border-radius-bottomright:4px;border-bottom-right-radius:4px;} .btn-group .btn:hover,.btn-group .btn:focus,.btn-group .btn:active{z-index:2;} .close{float:right;color:#000000;font-size:20px;font-weight:bold;line-height:13.5px;text-shadow:0 1px 0 #ffffff;filter:alpha(opacity=20);-khtml-opacity:0.2;-moz-opacity:0.2;opacity:0.2;}.close:hover{color:#000000;text-decoration:none;filter:alpha(opacity=40);-khtml-opacity:0.4;-moz-opacity:0.4;opacity:0.4;} -.alert-message{position:relative;padding:7px 15px;margin-bottom:18px;color:#404040;background-color:#eedc94;background-image:-khtml-gradient(linear, left top, left bottom, from(#fceec1), to(#eedc94));background-image:-moz-linear-gradient(top, #fceec1, #eedc94);background-image:-ms-linear-gradient(top, #fceec1, #eedc94);background-image:-webkit-gradient(linear, left top, left bottom, color-stop(0%, #fceec1), color-stop(100%, #eedc94));background-image:-webkit-linear-gradient(top, #fceec1, #eedc94);background-image:-o-linear-gradient(top, #fceec1, #eedc94);background-image:linear-gradient(top, #fceec1, #eedc94);background-repeat:repeat-x;filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#fceec1', endColorstr='#eedc94', GradientType=0);text-shadow:0 -1px 0 rgba(0, 0, 0, 0.25);border-color:#eedc94 #eedc94 #e4c652;border-color:rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);text-shadow:0 1px 0 rgba(255, 255, 255, 0.5);border-width:1px;border-style:solid;-webkit-border-radius:4px;-moz-border-radius:4px;border-radius:4px;-webkit-background-clip:padding-box;-moz-background-clip:padding;background-clip:padding-box;-webkit-box-shadow:inset 0 1px 0 rgba(255, 255, 255, 0.25);-moz-box-shadow:inset 0 1px 0 rgba(255, 255, 255, 0.25);box-shadow:inset 0 1px 0 rgba(255, 255, 255, 0.25);}.alert-message .close{*margin-top:3px;} +.alert-message{position:relative;padding:7px 15px;margin-bottom:18px;color:#404040;background-color:#eedc94;background-image:-khtml-gradient(linear, left top, left bottom, from(#fceec1), to(#eedc94));background-image:-moz-linear-gradient(top, #fceec1, #eedc94);background-image:-ms-linear-gradient(top, #fceec1, #eedc94);background-image:-webkit-gradient(linear, left top, left bottom, color-stop(0%, #fceec1), color-stop(100%, #eedc94));background-image:-webkit-linear-gradient(top, #fceec1, #eedc94);background-image:-o-linear-gradient(top, #fceec1, #eedc94);background-image:linear-gradient(top, #fceec1, #eedc94);background-repeat:repeat-x;filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#fceec1', endColorstr='#eedc94', GradientType=0);text-shadow:0 -1px 0 rgba(0, 0, 0, 0.25);border-color:#eedc94 #eedc94 #e4c652;border-color:rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);text-shadow:0 1px 0 rgba(255, 255, 255, 0.5);border-width:1px;border-style:solid;-webkit-border-radius:4px;-moz-border-radius:4px;border-radius:4px;-webkit-box-shadow:inset 0 1px 0 rgba(255, 255, 255, 0.25);-moz-box-shadow:inset 0 1px 0 rgba(255, 255, 255, 0.25);box-shadow:inset 0 1px 0 rgba(255, 255, 255, 0.25);}.alert-message .close{*margin-top:3px;} .alert-message h5{line-height:18px;} .alert-message p{margin-bottom:0;} .alert-message div{margin-top:5px;margin-bottom:2px;line-height:28px;} @@ -296,21 +280,21 @@ 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;} -.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-background-clip:padding-box;-moz-background-clip:padding;background-clip:padding-box;-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{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 li{display:inline;} .pagination 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 a:hover,.pagination .active a{background-color:#c7eefe;} .pagination .disabled a,.pagination .disabled a:hover{background-color:transparent;color:#bfbfbf;} .pagination .next a{border:0;} -.well{background-color:#f5f5f5;margin-bottom:20px;padding:19px;min-height:20px;border:1px solid #eee;border:1px solid rgba(0, 0, 0, 0.05);-webkit-border-radius:4px;-moz-border-radius:4px;border-radius:4px;-webkit-background-clip:padding-box;-moz-background-clip:padding;background-clip:padding-box;-webkit-box-shadow:inset 0 1px 1px rgba(0, 0, 0, 0.05);-moz-box-shadow:inset 0 1px 1px rgba(0, 0, 0, 0.05);box-shadow:inset 0 1px 1px rgba(0, 0, 0, 0.05);}.well blockquote{border-color:#ddd;border-color:rgba(0, 0, 0, 0.15);} +.well{background-color:#f5f5f5;margin-bottom:20px;padding:19px;min-height:20px;border:1px solid #eee;border:1px solid rgba(0, 0, 0, 0.05);-webkit-border-radius:4px;-moz-border-radius:4px;border-radius:4px;-webkit-box-shadow:inset 0 1px 1px rgba(0, 0, 0, 0.05);-moz-box-shadow:inset 0 1px 1px rgba(0, 0, 0, 0.05);box-shadow:inset 0 1px 1px rgba(0, 0, 0, 0.05);}.well blockquote{border-color:#ddd;border-color:rgba(0, 0, 0, 0.15);} .modal-backdrop{background-color:#000000;position:fixed;top:0;left:0;right:0;bottom:0;z-index:10000;}.modal-backdrop.fade{opacity:0;} .modal-backdrop,.modal-backdrop.fade.in{filter:alpha(opacity=80);-khtml-opacity:0.8;-moz-opacity:0.8;opacity:0.8;} -.modal{position:fixed;top:50%;left:50%;z-index:11000;width:560px;margin:-250px 0 0 -250px;background-color:#ffffff;border:1px solid #999;border:1px solid rgba(0, 0, 0, 0.3);*border:1px solid #999;-webkit-border-radius:6px;-moz-border-radius:6px;border-radius:6px;-webkit-background-clip:padding-box;-moz-background-clip:padding;background-clip:padding-box;-webkit-box-shadow:0 3px 7px rgba(0, 0, 0, 0.3);-moz-box-shadow:0 3px 7px rgba(0, 0, 0, 0.3);box-shadow:0 3px 7px rgba(0, 0, 0, 0.3);-webkit-background-clip:padding-box;-moz-background-clip:padding-box;background-clip:padding-box;}.modal .close{margin-top:7px;} +.modal{position:fixed;top:50%;left:50%;z-index:11000;width:560px;margin:-250px 0 0 -250px;background-color:#ffffff;border:1px solid #999;border:1px solid rgba(0, 0, 0, 0.3);*border:1px solid #999;-webkit-border-radius:6px;-moz-border-radius:6px;border-radius:6px;-webkit-box-shadow:0 3px 7px rgba(0, 0, 0, 0.3);-moz-box-shadow:0 3px 7px rgba(0, 0, 0, 0.3);box-shadow:0 3px 7px rgba(0, 0, 0, 0.3);-webkit-background-clip:padding-box;-moz-background-clip:padding-box;background-clip:padding-box;}.modal .close{margin-top:7px;} .modal.fade{-webkit-transition:opacity .3s linear, top .3s ease-out;-moz-transition:opacity .3s linear, top .3s ease-out;-ms-transition:opacity .3s linear, top .3s ease-out;-o-transition:opacity .3s linear, top .3s ease-out;transition:opacity .3s linear, top .3s ease-out;top:-25%;} .modal.fade.in{top:50%;} .modal-header{border-bottom:1px solid #eee;padding:5px 15px;} .modal-body{padding:15px;} -.modal-footer{background-color:#f5f5f5;padding:14px 15px 15px;border-top:1px solid #ddd;-webkit-border-radius:0 0 6px 6px;-moz-border-radius:0 0 6px 6px;border-radius:0 0 6px 6px;-webkit-background-clip:padding-box;-moz-background-clip:padding;background-clip:padding-box;-webkit-box-shadow:inset 0 1px 0 #ffffff;-moz-box-shadow:inset 0 1px 0 #ffffff;box-shadow:inset 0 1px 0 #ffffff;zoom:1;margin-bottom:0;}.modal-footer:before,.modal-footer:after{display:table;content:"";zoom:1;*display:inline;} +.modal-footer{background-color:#f5f5f5;padding:14px 15px 15px;border-top:1px solid #ddd;-webkit-border-radius:0 0 6px 6px;-moz-border-radius:0 0 6px 6px;border-radius:0 0 6px 6px;-webkit-box-shadow:inset 0 1px 0 #ffffff;-moz-box-shadow:inset 0 1px 0 #ffffff;box-shadow:inset 0 1px 0 #ffffff;zoom:1;margin-bottom:0;}.modal-footer:before,.modal-footer:after{display:table;content:"";zoom:1;*display:inline;} .modal-footer:after{clear:both;} .modal-footer .btn{float:right;margin-left:5px;} .twipsy{display:block;position:absolute;visibility:visible;padding:5px;font-size:11px;z-index:1000;filter:alpha(opacity=80);-khtml-opacity:0.8;-moz-opacity:0.8;opacity:0.8;}.twipsy.fade.in{filter:alpha(opacity=80);-khtml-opacity:0.8;-moz-opacity:0.8;opacity:0.8;} @@ -318,24 +302,24 @@ button.btn::-moz-focus-inner,input[type=submit].btn::-moz-focus-inner{padding:0; .twipsy.left .twipsy-arrow{top:50%;right:0;margin-top:-5px;border-top:5px solid transparent;border-bottom:5px solid transparent;border-left:5px solid #000000;} .twipsy.below .twipsy-arrow{top:0;left:50%;margin-left:-5px;border-left:5px solid transparent;border-right:5px solid transparent;border-bottom:5px solid #000000;} .twipsy.right .twipsy-arrow{top:50%;left:0;margin-top:-5px;border-top:5px solid transparent;border-bottom:5px solid transparent;border-right:5px solid #000000;} -.twipsy-inner{padding:3px 8px;background-color:#000000;color:white;text-align:center;max-width:200px;text-decoration:none;-webkit-border-radius:4px;-moz-border-radius:4px;border-radius:4px;-webkit-background-clip:padding-box;-moz-background-clip:padding;background-clip:padding-box;} +.twipsy-inner{padding:3px 8px;background-color:#000000;color:white;text-align:center;max-width:200px;text-decoration:none;-webkit-border-radius:4px;-moz-border-radius:4px;border-radius:4px;} .twipsy-arrow{position:absolute;width:0;height:0;} .popover{position:absolute;top:0;left:0;z-index:1000;padding:5px;display:none;}.popover.above .arrow{bottom:0;left:50%;margin-left:-5px;border-left:5px solid transparent;border-right:5px solid transparent;border-top:5px solid #000000;} .popover.right .arrow{top:50%;left:0;margin-top:-5px;border-top:5px solid transparent;border-bottom:5px solid transparent;border-right:5px solid #000000;} .popover.below .arrow{top:0;left:50%;margin-left:-5px;border-left:5px solid transparent;border-right:5px solid transparent;border-bottom:5px solid #000000;} .popover.left .arrow{top:50%;right:0;margin-top:-5px;border-top:5px solid transparent;border-bottom:5px solid transparent;border-left:5px solid #000000;} .popover .arrow{position:absolute;width:0;height:0;} -.popover .inner{background-color:#000000;background-color:rgba(0, 0, 0, 0.8);padding:3px;overflow:hidden;width:280px;-webkit-border-radius:6px;-moz-border-radius:6px;border-radius:6px;-webkit-background-clip:padding-box;-moz-background-clip:padding;background-clip:padding-box;-webkit-box-shadow:0 3px 7px rgba(0, 0, 0, 0.3);-moz-box-shadow:0 3px 7px rgba(0, 0, 0, 0.3);box-shadow:0 3px 7px rgba(0, 0, 0, 0.3);} -.popover .title{background-color:#f5f5f5;padding:9px 15px;line-height:1;-webkit-border-radius:3px 3px 0 0;-moz-border-radius:3px 3px 0 0;border-radius:3px 3px 0 0;-webkit-background-clip:padding-box;-moz-background-clip:padding;background-clip:padding-box;border-bottom:1px solid #eee;} -.popover .content{background-color:#ffffff;padding:14px;-webkit-border-radius:0 0 3px 3px;-moz-border-radius:0 0 3px 3px;border-radius:0 0 3px 3px;-webkit-background-clip:padding-box;-moz-background-clip:padding;background-clip:padding-box;-webkit-background-clip:padding-box;-moz-background-clip:padding-box;background-clip:padding-box;}.popover .content p,.popover .content ul,.popover .content ol{margin-bottom:0;} +.popover .inner{background-color:#000000;background-color:rgba(0, 0, 0, 0.8);padding:3px;overflow:hidden;width:280px;-webkit-border-radius:6px;-moz-border-radius:6px;border-radius:6px;-webkit-box-shadow:0 3px 7px rgba(0, 0, 0, 0.3);-moz-box-shadow:0 3px 7px rgba(0, 0, 0, 0.3);box-shadow:0 3px 7px rgba(0, 0, 0, 0.3);} +.popover .title{background-color:#f5f5f5;padding:9px 15px;line-height:1;-webkit-border-radius:3px 3px 0 0;-moz-border-radius:3px 3px 0 0;border-radius:3px 3px 0 0;border-bottom:1px solid #eee;} +.popover .content{background-color:#ffffff;padding:14px;-webkit-border-radius:0 0 3px 3px;-moz-border-radius:0 0 3px 3px;border-radius:0 0 3px 3px;-webkit-background-clip:padding-box;-moz-background-clip:padding-box;background-clip:padding-box;}.popover .content p,.popover .content ul,.popover .content ol{margin-bottom:0;} .fade{-webkit-transition:opacity 0.15s linear;-moz-transition:opacity 0.15s linear;-ms-transition:opacity 0.15s linear;-o-transition:opacity 0.15s linear;transition:opacity 0.15s linear;opacity:0;}.fade.in{opacity:1;} -.label{padding:1px 3px 2px;background-color:#bfbfbf;font-size:9.75px;font-weight:bold;color:#ffffff;text-transform:uppercase;-webkit-border-radius:3px;-moz-border-radius:3px;border-radius:3px;-webkit-background-clip:padding-box;-moz-background-clip:padding;background-clip:padding-box;}.label.important{background-color:#c43c35;} +.label{padding:1px 3px 2px;background-color:#bfbfbf;font-size:9.75px;font-weight:bold;color:#ffffff;text-transform:uppercase;-webkit-border-radius:3px;-moz-border-radius:3px;border-radius:3px;}.label.important{background-color:#c43c35;} .label.warning{background-color:#f89406;} .label.success{background-color:#46a546;} .label.notice{background-color:#62cffc;} .media-grid{margin-left:-20px;margin-bottom:0;zoom:1;}.media-grid:before,.media-grid:after{display:table;content:"";zoom:1;*display:inline;} .media-grid:after{clear:both;} .media-grid li{display:inline;} -.media-grid a{float:left;padding:4px;margin:0 0 20px 20px;border:1px solid #ddd;-webkit-border-radius:4px;-moz-border-radius:4px;border-radius:4px;-webkit-background-clip:padding-box;-moz-background-clip:padding;background-clip:padding-box;-webkit-box-shadow:0 1px 1px rgba(0, 0, 0, 0.075);-moz-box-shadow:0 1px 1px rgba(0, 0, 0, 0.075);box-shadow:0 1px 1px rgba(0, 0, 0, 0.075);}.media-grid a img{display:block;} +.media-grid a{float:left;padding:4px;margin:0 0 20px 20px;border:1px solid #ddd;-webkit-border-radius:4px;-moz-border-radius:4px;border-radius:4px;-webkit-box-shadow:0 1px 1px rgba(0, 0, 0, 0.075);-moz-box-shadow:0 1px 1px rgba(0, 0, 0, 0.075);box-shadow:0 1px 1px rgba(0, 0, 0, 0.075);}.media-grid a img{display:block;} .media-grid a:hover{border-color:#0069d6;-webkit-box-shadow:0 1px 4px rgba(0, 105, 214, 0.25);-moz-box-shadow:0 1px 4px rgba(0, 105, 214, 0.25);box-shadow:0 1px 4px rgba(0, 105, 214, 0.25);} -@media (max-width: 480px){} +@media (max-width: 480px){.container{width:auto;padding:0 10px;} [class*="span"]{float:none;display:block;width:auto;}}@media (min-width: 480px) and (max-width: 768px){.container{width:auto;padding:0 10px;} [class*="span"]{float:none;display:block;width:auto;margin:0;}}@media (min-width: 768px) and (max-width: 940px){.container{width:748px;} .span1{width:28px;} .span2{width:76px;} .span3{width:124px;} .span4{width:172px;} .span5{width:220px;} .span6{width:268px;} .span7{width:316px;} .span8{width:364px;} .span9{width:412px;} .span10{width:460px;} .span11{width:508px;} .span12{width:556px;} .offset1{margin-left:68px;} .offset2{margin-left:116px;} .offset3{margin-left:164px;} .offset4{margin-left:212px;} .offset5{margin-left:260px;} .offset6{margin-left:308px;} .offset7{margin-left:356px;} .offset8{margin-left:404px;} .offset9{margin-left:452px;} .offset10{margin-left:500px;} .offset11{margin-left:548px;} .offset12{margin-left:596px;}}@media (min-width: 1170px){.container{width:1170px;} [class*="span"]{display:inline;float:left;margin-left:20px;} .span1{width:70px;} .span2{width:170px;} .span3{width:270px;} .span4{width:370px;} .span5{width:470px;} .span6{width:570px;} .span7{width:670px;} .span8{width:770px;} .span9{width:870px;} .span10{width:970px;} .span11{width:1070px;} .span12{width:1170px;} .offset1{margin-left:130px;} .offset2{margin-left:230px;} .offset3{margin-left:330px;} .offset4{margin-left:430px;} .offset5{margin-left:530px;} .offset6{margin-left:630px;} .offset7{margin-left:730px;} .offset8{margin-left:830px;} .offset9{margin-left:930px;} .offset10{margin-left:1030px;} .offset11{margin-left:1130px;} .offset12{margin-left:1230px;}} diff --git a/docs/assets/css/docs.css b/docs/assets/css/docs.css index a17fd5692b..52714d1991 100644 --- a/docs/assets/css/docs.css +++ b/docs/assets/css/docs.css @@ -8,8 +8,9 @@ /* Body and structure -------------------------------------------------- */ body { - background-color: #fff; position: relative; + padding-top: 40px; + background-color: #fff; } section { padding-top: 60px; @@ -21,22 +22,29 @@ section > .row { /* Jumbotrons -------------------------------------------------- */ +.jumbotron, +.jumbotron .inner { + -webkit-border-radius: 0 0 6px 6px; + -moz-border-radius: 0 0 6px 6px; + border-radius: 0 0 6px 6px; +} .jumbotron { - min-width: 940px; - padding-top: 40px; + margin-bottom: 40px; + -webkit-box-shadow: inset 0 -1px 0 rgba(0,0,0,.15), 0 1px 3px rgba(0,0,0,.25); + -moz-box-shadow: inset 0 -1px 0 rgba(0,0,0,.15), 0 1px 3px rgba(0,0,0,.25); + box-shadow: inset 0 -1px 0 rgba(0,0,0,.15), 0 1px 3px rgba(0,0,0,.25); } .jumbotron .inner { background: transparent url(../img/grid-18px.png) top center; - padding: 45px 0; - -webkit-box-shadow: inset 0 10px 30px rgba(0,0,0,.3); - -moz-box-shadow: inset 0 10px 30px rgba(0,0,0,.3); -/* box-shadow: inset 0 10px 30px rgba(0,0,0,.3); -*/} + padding: 36px 60px; + -webkit-box-shadow: inset 0 -15px 30px rgba(0,0,0,.1); + -moz-box-shadow: inset 0 -15px 30px rgba(0,0,0,.1); + box-shadow: inset 0 -15px 30px rgba(0,0,0,.1); +} .jumbotron h1, .jumbotron p { margin-bottom: 9px; color: #fff; - text-align: center; text-shadow: 0 1px 1px rgba(0,0,0,.3); } .jumbotron h1 { @@ -46,6 +54,7 @@ section > .row { } .jumbotron p { font-weight: 300; + margin-right: 25%; } .jumbotron .lead { font-size: 20px; @@ -60,14 +69,14 @@ section > .row { ------------------------- */ /* main docs page */ .masthead { - background-color: #049cd9; + background-color: #004d9f; background-repeat: no-repeat; - background-image: -webkit-gradient(linear, left top, left bottom, from(#004D9F), to(#049cd9)); - background-image: -webkit-linear-gradient(#004D9F, #049cd9); - background-image: -moz-linear-gradient(#004D9F, #049cd9); - background-image: -o-linear-gradient(top, #004D9F, #049cd9); - background-image: -khtml-gradient(linear, left top, left bottom, from(#004D9F), to(#049cd9)); - filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#004D9F', endColorstr='#049cd9', GradientType=0); /* IE8 and down */ + background-image: -webkit-gradient(linear, left top, left bottom, from(#048ccd), to(#004d9f)); + background-image: -webkit-linear-gradient(#048ccd, #004d9f); + background-image: -moz-linear-gradient(#048ccd, #004d9f); + background-image: -o-linear-gradient(top, #048ccd, #004d9f); + background-image: -khtml-gradient(linear, left top, left bottom, from(#048ccd), to(#004d9f)); + filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#048ccd', endColorstr='#004d9f', GradientType=0); /* IE8 and down */ } /* supporting docs pages */ .subhead { @@ -98,15 +107,9 @@ section > .row { /* Footer -------------------------------------------------- */ .footer { - background-color: #eee; - min-width: 940px; padding: 30px 0; - text-shadow: 0 1px 0 #fff; border-top: 1px solid #e5e5e5; - -webkit-box-shadow: inset 0 5px 15px rgba(0,0,0,.025); - -moz-box-shadow: inset 0 5px 15px rgba(0,0,0,.025); -/* box-shadow: inset 0 5px 15px rgba(0,0,0,.025); -*/} +} .footer p { color: #555; } @@ -323,3 +326,25 @@ pre.prettyprint { .well form { margin-bottom: 0; } + + +/* Responsive Docs +-------------------------------------------------- */ + +/* Tablet to Medium Desktop +------------------------- */ + +@media (min-width: 768px) and (max-width: 900px) { + + .footer, + .jumbotron { + min-width: 748px; + } + .jumbotron .inner h1, + .jumbotron .inner p { + margin-left: 40px; + margin-right: 40px; + } + +} + diff --git a/docs/index.html b/docs/index.html index 4dd45f5f96..2db9719d1a 100644 --- a/docs/index.html +++ b/docs/index.html @@ -75,40 +75,40 @@ </div> </div> - <!-- Masthead (blueprinty thing) - ================================================== --> - <header class="jumbotron masthead" id="overview"> - <div class="inner"> - <h1>Bootstrap, from Twitter</h1> - <p class="lead"> - Bootstrap is a toolkit from Twitter designed to kickstart development of webapps and sites.<br> - It includes base CSS and HTML for typography, forms, buttons, tables, grids, navigation, and more.<br> - </p> - <p><strong>Nerd alert:</strong> Bootstrap is <a href="#less" title="Read about using Bootstrap with Less">built with Less</a> and was designed to work out of the gate with modern browsers in mind.</p> - </div> - </header> + <div class="container"> + + <div id="overview"> + <!-- Masthead (blueprinty thing) + ================================================== --> + <header class="jumbotron masthead"> + <div class="inner"> + <h1>Bootstrap, from Twitter</h1> + <a href="#" class="btn btn-large pull-right">Download on GitHub</a> + <p class="lead">Bootstrap is a frontend toolkit from Twitter designed to kickstart web development, complete with core HTML, CSS, and JS for grids, type, forms, navigation, and many more components.</p> + <p><strong>Nerd alert:</strong> Bootstrap is <a href="#less" title="Read about using Bootstrap with Less">built with Less</a> and was designed with modern browsers in mind.</p> + </div> + </header> - <!-- Quickstart options - ================================================== --> - <div class="quickstart"> - <div class="container"> + <!-- Quickstart options + ================================================== --> + <div class="quickstart" style="display: none;"> <div class="row"> - <div class="span5"> + <div class="span4"> <h6>Hotlink the CSS</h6> <p>For the quickest and easiest start, just copy this snippet into your webpage.</p> <form> <textarea class="copy-code" rows="1"><link rel="stylesheet" href="http://twitter.github.com/bootstrap/assets/css/bootstrap.min.css"></textarea> </form> </div> - <div class="span5"> + <div class="span4"> <h6>Use it with Less</h6> <p>A fan of using Less? No problem, just clone the repo and add these lines:</p> <form> <textarea class="copy-code" rows="2"><link rel="stylesheet/less" href="/path/to/bootstrap.less"> -<script src="/path/to/less.js"></script></textarea> + <script src="/path/to/less.js"></script></textarea> </form> </div> - <div class="span5"> + <div class="span4"> <h6>Fork on GitHub</h6> <p>Download, fork, pull, file issues, and more with the official Bootstrap repo on Github.</p> <p><a target="_blank" href="https://github.com/twitter/bootstrap" class="btn primary">Bootstrap on GitHub »</a></p> @@ -116,51 +116,40 @@ </div> </div><!-- /row --> </div> - </div> - <div class="container"> - - - -<!-- About Bootstrap -================================================== --> -<section id="about"> - <div class="page-header"> - <h1>About Bootstrap <small>Brief history, browser support, and more</small></h1> - </div> - <div class="row"> - <div class="span-one-third"> - <h3>History</h3> - <p>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.</p> - <p>Read more on <a href="https://dev.twitter.com/blog/bootstrap-twitter">dev.twitter.com ›</a></p> - </div> - <div class="span-one-third"> - <h3>Browser support</h3> - <p>Bootstrap is tested and supported in major modern browsers like Chrome, Safari, Internet Explorer, and Firefox.</p> - <img src="assets/img/browsers.png" alt="Tested and supported in Chrome, Safari, Internet Explorer, and Firefox"> - <ul> - <li>Latest Safari</li> - <li>Latest Google Chrome</li> - <li>Firefox 4+</li> - <li>Internet Explorer 7+</li> - <li>Opera 11</li> - </ul> - </div> - <div class="span-one-third"> - <h3>What's included</h3> - <p>Bootstrap comes complete with compiled CSS, uncompiled, and example templates.</p> - <ul> - <li><span class="label">New in 1.3</span> <a href="./javascript.html">Javascript plugins</a></li> - <li>All original .less files</li> - <li>Fully <a href="../bootstrap.css">compiled</a> and <a href="../bootstrap.min.css">minified</a> CSS</li> - <li>Complete styleguide documentation</li> - <li>Three example pages with different layouts</li> - </ul> - </div> - </div><!-- /row --> + <!-- About Bootstrap + ================================================== --> + <div class="row"> + <div class="span4"> + <h2>Built for and by nerds</h2> + <p>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.</p> + <p>Read more on <a href="https://dev.twitter.com/blog/bootstrap-twitter">dev.twitter.com ›</a></p> + </div> + <div class="span4"> + <h2>Cross-everything</h2> + <p>Bootstrap is tested and supported in major modern browsers like Chrome, Safari, Internet Explorer, and Firefox.</p> + <img src="assets/img/browsers.png" alt="Tested and supported in Chrome, Safari, Internet Explorer, and Firefox"> + <ul> + <li>Latest Safari</li> + <li>Latest Google Chrome</li> + <li>Firefox 4+</li> + <li>Internet Explorer 7+</li> + <li>Opera 11</li> + </ul> + </div> + <div class="span4"> + <h2>What's included</h2> + <p>Bootstrap comes complete with compiled CSS, uncompiled, and example templates.</p> + <ul> + <li><span class="label">New in 1.3</span> <a href="./javascript.html">Javascript plugins</a></li> + <li>All original .less files</li> + <li>Fully <a href="../bootstrap.css">compiled</a> and <a href="../bootstrap.min.css">minified</a> CSS</li> + <li>Complete styleguide documentation</li> + <li>Three example pages with different layouts</li> + </ul> + </div> + </div><!-- /row --> - <div class="row"> - <div class="span12"> <h3>Quick-start examples</h3> <p>Need some quick templates? Check out these basic examples we've put together:</p> <ul class="media-grid"> @@ -174,10 +163,8 @@ <a href="../examples/container-app.html"><img src="assets/img/example-diagram-03.png" alt="Simple hanging container for apps"></a> </li> </ul> - </div> - </div><!-- /row --> -</section> + </div><!-- /#overview --> <!-- Grid system @@ -187,11 +174,11 @@ <h1>Grid system <small>Rock the standard 940px or roll your own</small></h1> </div> <div class="row"> - <div class="span4"> + <div class="span3"> <h2>Default grid</h2> <p>The default grid system provided as part of Bootstrap is a 940px wide 16-column grid. It’s a flavor of the popular 960 grid system, but without the additional margin/padding on the left and right sides.</p> </div> - <div class="span12"> + <div class="span9"> <h3>Example grid markup</h3> <p>As shown here, a basic layout can be created with two "columns," each spanning a number of the 16 foundational columns we defined as part of our grid system. See the examples below for more variations.</p> <pre class="prettyprint linenums"> @@ -206,11 +193,7 @@ </pre> </div> </div><!-- /row --> - <div class="row show-grid" title="16 column layout"> - <div class="span1">1</div> - <div class="span1">1</div> - <div class="span1">1</div> - <div class="span1">1</div> + <div class="row show-grid"> <div class="span1">1</div> <div class="span1">1</div> <div class="span1">1</div> @@ -223,56 +206,23 @@ <div class="span1">1</div> <div class="span1">1</div> <div class="span1">1</div> - </div><!-- /row --> - <div class="row show-grid" title="8 column layout"> - <div class="span2">2</div> - <div class="span2">2</div> - <div class="span2">2</div> - <div class="span2">2</div> - <div class="span2">2</div> - <div class="span2">2</div> - <div class="span2">2</div> - <div class="span2">2</div> - </div><!-- /row --> - <div class="row show-grid" title="Example uncommon layout"> - <div class="span3">3</div> - <div class="span3">3</div> - <div class="span3">3</div> - <div class="span3">3</div> - <div class="span3">3</div> - <div class="span1 column">1</div> - </div><!-- /row --> - <div class="row show-grid" title="Four column layout"> - <div class="span4">4</div> + </div> + <div class="row show-grid"> <div class="span4">4</div> <div class="span4">4</div> <div class="span4">4</div> - </div><!-- /row --> - <div class="row show-grid" title="Default three column layout"> - <div class="span-one-third">1/3</div> - <div class="span-one-third">1/3</div> - <div class="span-one-third">1/3</div> - </div><!-- /row --> - <div class="row show-grid" title="One-third and two-thirds layout"> - <div class="span-one-third">1/3</div> - <div class="span-two-thirds">2/3</div> - </div><!-- /row --> - <div class="row show-grid" title="Irregular three column layout"> + </div> + <div class="row show-grid"> <div class="span4">4</div> + <div class="span8">8</div> + </div> + <div class="row show-grid"> <div class="span6">6</div> <div class="span6">6</div> - </div><!-- /row --> - <div class="row show-grid" title="Half and half"> - <div class="span8">8</div> - <div class="span8">8</div> - </div><!-- /row --> - <div class="row show-grid" title="Example uncommon two-column layout"> - <div class="span5">5</div> - <div class="span11">11</div> - </div><!-- /row --> - <div class="row show-grid" title="Unnecessary single column layout"> - <div class="span16">16</div> - </div><!-- /row --> + </div> + <div class="row show-grid"> + <div class="span12">12</div> + </div> <br> @@ -282,18 +232,11 @@ <div class="span8 offset4">8 offset 4</div> </div><!-- /row --> <div class="row show-grid"> - <div class="span-one-third offset-two-thirds">1/3 offset 2/3s</div> + <div class="span3 offset3">3 offset 3</div> + <div class="span3 offset3">3 offset 3</div> </div><!-- /row --> <div class="row show-grid"> - <div class="span4 offset4">4 offset 4</div> - <div class="span4 offset4">4 offset 4</div> - </div><!-- /row --> - <div class="row show-grid"> - <div class="span5 offset3">5 offset 3</div> - <div class="span5 offset3">5 offset 3</div> - </div><!-- /row --> - <div class="row show-grid"> - <div class="span10 offset6">10 offset 6</div> + <div class="span8 offset4">8 offset 4</div> </div><!-- /row --> <br> @@ -978,7 +921,7 @@ <fieldset class="control-group has-error"> <label class="control-label" for="textareaError">Textarea with error</label> <div class="controls"> - <textarea class="input-xxlarge" rows="3"></textarea> + <textarea class="input-xlarge" rows="3"></textarea> </div> </fieldset> <fieldset class="control-group"> @@ -2009,17 +1952,17 @@ Lorem ipsum dolar sit amet illo error <a href="#" title="below">ipsum</a> verita </section> - </div><!-- /container --> <footer class="footer"> - <div class="container"> - <p class="pull-right"><a href="#">Back to top</a></p> - <p> - Designed and built with all the love in the world <a href="http://twitter.com/twitter" target="_blank">@twitter</a> by <a href="http://twitter.com/mdo" target="_blank">@mdo</a> and <a href="http://twitter.com/fat" target="_blank">@fat</a>.<br> - Code licensed under the <a href="http://www.apache.org/licenses/LICENSE-2.0" target="_blank">Apache License v2.0</a>. Documentation licensed under <a href="http://creativecommons.org/licenses/by/3.0/">CC BY 3.0</a>. - </p> - </div> + <p class="pull-right"><a href="#">Back to top</a></p> + <p> + Designed and built with all the love in the world <a href="http://twitter.com/twitter" target="_blank">@twitter</a> by <a href="http://twitter.com/mdo" target="_blank">@mdo</a> and <a href="http://twitter.com/fat" target="_blank">@fat</a>.<br> + Code licensed under the <a href="http://www.apache.org/licenses/LICENSE-2.0" target="_blank">Apache License v2.0</a>. Documentation licensed under <a href="http://creativecommons.org/licenses/by/3.0/">CC BY 3.0</a>. + </p> </footer> + </div><!-- /container --> + + </body> </html> diff --git a/lib/mixins.less b/lib/mixins.less index 22a30a1c86..16ea91ba41 100644 --- a/lib/mixins.less +++ b/lib/mixins.less @@ -101,9 +101,6 @@ -webkit-border-radius: @radius; -moz-border-radius: @radius; border-radius: @radius; - -webkit-background-clip: padding-box; - -moz-background-clip: padding; - background-clip: padding-box; } .border-radius-custom(@topLeft, @topRight, @bottomRight, @bottomLeft) { -webkit-border-top-left-radius: @topLeft; diff --git a/lib/scaffolding.less b/lib/scaffolding.less index 00a8ee3b35..01fcd9e772 100644 --- a/lib/scaffolding.less +++ b/lib/scaffolding.less @@ -84,10 +84,8 @@ a { // GRID SYSTEM // ----------- // To customize the grid system, bring up the variables.less file and change the column count, size, and gutter there - .row { .clearfix(); - margin-left: -1 * @gridGutterWidth; } // Find all .span# classes within .row and give them the necessary properties for grid columns (supported by all browsers back to IE7) @@ -95,6 +93,10 @@ a { [class*="span"] { .gridColumn(); } +// Kill the margin on the first column +.row > [class*="span"]:first-child { + margin-left: 0; +} // Default columns .span1 { .columns(1); } @@ -109,20 +111,6 @@ a { .span10 { .columns(10); } .span11 { .columns(11); } .span12 { .columns(12); } -.span13 { .columns(13); } -.span14 { .columns(14); } -.span15 { .columns(15); } -.span16 { .columns(16); } - -// For optional 24-column grid -.span17 { .columns(17); } -.span18 { .columns(18); } -.span19 { .columns(19); } -.span20 { .columns(20); } -.span21 { .columns(21); } -.span22 { .columns(22); } -.span23 { .columns(23); } -.span24 { .columns(24); } // Offset column options .offset1 { .offset(1); } @@ -136,10 +124,3 @@ a { .offset9 { .offset(9); } .offset10 { .offset(10); } .offset11 { .offset(11); } -.offset12 { .offset(12); } - -// Unique column sizes for 16-column grid -.span-one-third { width: 300px; } -.span-two-thirds { width: 620px; } -.offset-one-third { margin-left: 340px; } -.offset-two-thirds { margin-left: 660px; } diff --git a/lib/variables.less b/lib/variables.less index f85e0ec859..24eb8b45a3 100644 --- a/lib/variables.less +++ b/lib/variables.less @@ -38,8 +38,8 @@ // ---- // Modify the grid styles in mixins.less -@gridColumns: 16; -@gridColumnWidth: 40px; +@gridColumns: 12; +@gridColumnWidth: 60px; @gridGutterWidth: 20px; @extraSpace: (@gridGutterWidth * 2); // For our grid calculations @siteWidth: (@gridColumns * @gridColumnWidth) + (@gridGutterWidth * (@gridColumns - 1)); -- GitLab From be926a04bc7d1fec228b9cbd4c6d0bb0c75c30cd Mon Sep 17 00:00:00 2001 From: Mark Otto <mark.otto@twitter.com> Date: Sun, 16 Oct 2011 03:08:14 -0700 Subject: [PATCH 027/318] fix uber size in responsive; remove @extraspace variable by changing grid to use :first-child over negative margin --- bootstrap.css | 52 ++++++++++++++++++++++------------------------ bootstrap.min.css | 24 ++++++++++----------- lib/mixins.less | 2 +- lib/variables.less | 1 - 4 files changed, 38 insertions(+), 41 deletions(-) diff --git a/bootstrap.css b/bootstrap.css index 482d2878c8..887dbdd011 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 Oct 16 02:59:54 PDT 2011 + * Date: Sun Oct 16 03:07:49 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). @@ -316,37 +316,37 @@ a:hover { width: 940px; } .offset1 { - margin-left: 100px; + margin-left: 80px; } .offset2 { - margin-left: 180px; + margin-left: 160px; } .offset3 { - margin-left: 260px; + margin-left: 240px; } .offset4 { - margin-left: 340px; + margin-left: 320px; } .offset5 { - margin-left: 420px; + margin-left: 400px; } .offset6 { - margin-left: 500px; + margin-left: 480px; } .offset7 { - margin-left: 580px; + margin-left: 560px; } .offset8 { - margin-left: 660px; + margin-left: 640px; } .offset9 { - margin-left: 740px; + margin-left: 720px; } .offset10 { - margin-left: 820px; + margin-left: 800px; } .offset11 { - margin-left: 900px; + margin-left: 880px; } /* Typography.less * Headings, body text, lists, code, and more for a versatile and durable typography system @@ -2367,9 +2367,7 @@ button.btn::-moz-focus-inner, input[type=submit].btn::-moz-focus-inner { width: 1170px; } [class*="span"] { - display: inline; - float: left; - margin-left: 20px; + margin-left: 30px; } .span1 { width: 70px; @@ -2408,39 +2406,39 @@ button.btn::-moz-focus-inner, input[type=submit].btn::-moz-focus-inner { width: 1170px; } .offset1 { - margin-left: 130px; + margin-left: 100px; } .offset2 { - margin-left: 230px; + margin-left: 200px; } .offset3 { - margin-left: 330px; + margin-left: 300px; } .offset4 { - margin-left: 430px; + margin-left: 400px; } .offset5 { - margin-left: 530px; + margin-left: 500px; } .offset6 { - margin-left: 630px; + margin-left: 600px; } .offset7 { - margin-left: 730px; + margin-left: 700px; } .offset8 { - margin-left: 830px; + margin-left: 800px; } .offset9 { - margin-left: 930px; + margin-left: 900px; } .offset10 { - margin-left: 1030px; + margin-left: 1000px; } .offset11 { - margin-left: 1130px; + margin-left: 1100px; } .offset12 { - margin-left: 1230px; + margin-left: 1200px; } } diff --git a/bootstrap.min.css b/bootstrap.min.css index 04a992e322..9c59687997 100644 --- a/bootstrap.min.css +++ b/bootstrap.min.css @@ -52,17 +52,17 @@ a{color:#0069d6;text-decoration:none;line-height:inherit;font-weight:inherit;}a: .span10{width:780px;} .span11{width:860px;} .span12{width:940px;} -.offset1{margin-left:100px;} -.offset2{margin-left:180px;} -.offset3{margin-left:260px;} -.offset4{margin-left:340px;} -.offset5{margin-left:420px;} -.offset6{margin-left:500px;} -.offset7{margin-left:580px;} -.offset8{margin-left:660px;} -.offset9{margin-left:740px;} -.offset10{margin-left:820px;} -.offset11{margin-left:900px;} +.offset1{margin-left:80px;} +.offset2{margin-left:160px;} +.offset3{margin-left:240px;} +.offset4{margin-left:320px;} +.offset5{margin-left:400px;} +.offset6{margin-left:480px;} +.offset7{margin-left:560px;} +.offset8{margin-left:640px;} +.offset9{margin-left:720px;} +.offset10{margin-left:800px;} +.offset11{margin-left:880px;} p{font-family:"Helvetica Neue",Helvetica,Arial,sans-serif;font-size:13px;line-height:18px;margin-bottom:9px;}p small{font-size:11px;color:#bfbfbf;} h1,h2,h3,h4,h5,h6{font-weight:bold;color:#404040;}h1 small,h2 small,h3 small,h4 small,h5 small,h6 small{color:#bfbfbf;} h1{margin-bottom:18px;font-size:30px;line-height:36px;}h1 small{font-size:18px;} @@ -322,4 +322,4 @@ button.btn::-moz-focus-inner,input[type=submit].btn::-moz-focus-inner{padding:0; .media-grid li{display:inline;} .media-grid a{float:left;padding:4px;margin:0 0 20px 20px;border:1px solid #ddd;-webkit-border-radius:4px;-moz-border-radius:4px;border-radius:4px;-webkit-box-shadow:0 1px 1px rgba(0, 0, 0, 0.075);-moz-box-shadow:0 1px 1px rgba(0, 0, 0, 0.075);box-shadow:0 1px 1px rgba(0, 0, 0, 0.075);}.media-grid a img{display:block;} .media-grid a:hover{border-color:#0069d6;-webkit-box-shadow:0 1px 4px rgba(0, 105, 214, 0.25);-moz-box-shadow:0 1px 4px rgba(0, 105, 214, 0.25);box-shadow:0 1px 4px rgba(0, 105, 214, 0.25);} -@media (max-width: 480px){.container{width:auto;padding:0 10px;} [class*="span"]{float:none;display:block;width:auto;}}@media (min-width: 480px) and (max-width: 768px){.container{width:auto;padding:0 10px;} [class*="span"]{float:none;display:block;width:auto;margin:0;}}@media (min-width: 768px) and (max-width: 940px){.container{width:748px;} .span1{width:28px;} .span2{width:76px;} .span3{width:124px;} .span4{width:172px;} .span5{width:220px;} .span6{width:268px;} .span7{width:316px;} .span8{width:364px;} .span9{width:412px;} .span10{width:460px;} .span11{width:508px;} .span12{width:556px;} .offset1{margin-left:68px;} .offset2{margin-left:116px;} .offset3{margin-left:164px;} .offset4{margin-left:212px;} .offset5{margin-left:260px;} .offset6{margin-left:308px;} .offset7{margin-left:356px;} .offset8{margin-left:404px;} .offset9{margin-left:452px;} .offset10{margin-left:500px;} .offset11{margin-left:548px;} .offset12{margin-left:596px;}}@media (min-width: 1170px){.container{width:1170px;} [class*="span"]{display:inline;float:left;margin-left:20px;} .span1{width:70px;} .span2{width:170px;} .span3{width:270px;} .span4{width:370px;} .span5{width:470px;} .span6{width:570px;} .span7{width:670px;} .span8{width:770px;} .span9{width:870px;} .span10{width:970px;} .span11{width:1070px;} .span12{width:1170px;} .offset1{margin-left:130px;} .offset2{margin-left:230px;} .offset3{margin-left:330px;} .offset4{margin-left:430px;} .offset5{margin-left:530px;} .offset6{margin-left:630px;} .offset7{margin-left:730px;} .offset8{margin-left:830px;} .offset9{margin-left:930px;} .offset10{margin-left:1030px;} .offset11{margin-left:1130px;} .offset12{margin-left:1230px;}} +@media (max-width: 480px){.container{width:auto;padding:0 10px;} [class*="span"]{float:none;display:block;width:auto;}}@media (min-width: 480px) and (max-width: 768px){.container{width:auto;padding:0 10px;} [class*="span"]{float:none;display:block;width:auto;margin:0;}}@media (min-width: 768px) and (max-width: 940px){.container{width:748px;} .span1{width:28px;} .span2{width:76px;} .span3{width:124px;} .span4{width:172px;} .span5{width:220px;} .span6{width:268px;} .span7{width:316px;} .span8{width:364px;} .span9{width:412px;} .span10{width:460px;} .span11{width:508px;} .span12{width:556px;} .offset1{margin-left:68px;} .offset2{margin-left:116px;} .offset3{margin-left:164px;} .offset4{margin-left:212px;} .offset5{margin-left:260px;} .offset6{margin-left:308px;} .offset7{margin-left:356px;} .offset8{margin-left:404px;} .offset9{margin-left:452px;} .offset10{margin-left:500px;} .offset11{margin-left:548px;} .offset12{margin-left:596px;}}@media (min-width: 1170px){.container{width:1170px;} [class*="span"]{margin-left:30px;} .span1{width:70px;} .span2{width:170px;} .span3{width:270px;} .span4{width:370px;} .span5{width:470px;} .span6{width:570px;} .span7{width:670px;} .span8{width:770px;} .span9{width:870px;} .span10{width:970px;} .span11{width:1070px;} .span12{width:1170px;} .offset1{margin-left:100px;} .offset2{margin-left:200px;} .offset3{margin-left:300px;} .offset4{margin-left:400px;} .offset5{margin-left:500px;} .offset6{margin-left:600px;} .offset7{margin-left:700px;} .offset8{margin-left:800px;} .offset9{margin-left:900px;} .offset10{margin-left:1000px;} .offset11{margin-left:1100px;} .offset12{margin-left:1200px;}} diff --git a/lib/mixins.less b/lib/mixins.less index 16ea91ba41..47857f1faf 100644 --- a/lib/mixins.less +++ b/lib/mixins.less @@ -82,7 +82,7 @@ width: (@gridColumnWidth * @columnSpan) + (@gridGutterWidth * (@columnSpan - 1)); } .offset(@columnOffset: 1) { - margin-left: (@gridColumnWidth * @columnOffset) + (@gridGutterWidth * (@columnOffset - 1)) + @extraSpace; + margin-left: (@gridColumnWidth * @columnOffset) + (@gridGutterWidth * (@columnOffset - 1)) + @gridGutterWidth; } // Necessary grid styles for every column to make them appear next to each other horizontally .gridColumn() { diff --git a/lib/variables.less b/lib/variables.less index 24eb8b45a3..92d09de709 100644 --- a/lib/variables.less +++ b/lib/variables.less @@ -41,7 +41,6 @@ @gridColumns: 12; @gridColumnWidth: 60px; @gridGutterWidth: 20px; -@extraSpace: (@gridGutterWidth * 2); // For our grid calculations @siteWidth: (@gridColumns * @gridColumnWidth) + (@gridGutterWidth * (@gridColumns - 1)); -- GitLab From 3a4760637f3acca9cbd8af2819d163848852a23a Mon Sep 17 00:00:00 2001 From: Mark Otto <mark.otto@twitter.com> Date: Sun, 16 Oct 2011 03:15:17 -0700 Subject: [PATCH 028/318] tweak navbar styles for static version to not cause problems on responsive layouts --- bootstrap.css | 4 +- bootstrap.min.css | 2 +- docs/index.html | 136 +++++++++++++++++++++++----------------------- lib/patterns.less | 2 - 4 files changed, 70 insertions(+), 74 deletions(-) diff --git a/bootstrap.css b/bootstrap.css index 887dbdd011..8b487fb7e3 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 Oct 16 03:07:49 PDT 2011 + * Date: Sun Oct 16 03:14:23 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). @@ -1165,8 +1165,6 @@ table .headerSortUp.purple, table .headerSortDown.purple { margin-bottom: 18px; } .navbar-static .navbar-inner { - margin-left: -20px; - margin-right: -20px; padding-left: 20px; padding-right: 20px; -webkit-border-radius: 4px; diff --git a/bootstrap.min.css b/bootstrap.min.css index 9c59687997..cfec72ec12 100644 --- a/bootstrap.min.css +++ b/bootstrap.min.css @@ -194,7 +194,7 @@ table .headerSortUp.purple,table .headerSortDown.purple{background-color:#e2d5f0 .navbar-search .search-query:hover{background-color:#bfbfbf;background-color:rgba(255, 255, 255, 0.5);color:#ffffff;} .navbar-search .search-query:focus,.navbar-search .search-query.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);} .navbar-static{margin-bottom:18px;} -.navbar-static .navbar-inner{margin-left:-20px;margin-right:-20px;padding-left:20px;padding-right:20px;-webkit-border-radius:4px;-moz-border-radius:4px;border-radius:4px;} +.navbar-static .navbar-inner{padding-left:20px;padding-right:20px;-webkit-border-radius:4px;-moz-border-radius:4px;border-radius:4px;} .navbar-fixed{position:fixed;top:0;left:0;right:0;z-index:10000;} .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;} diff --git a/docs/index.html b/docs/index.html index 2db9719d1a..0e49e9cbd2 100644 --- a/docs/index.html +++ b/docs/index.html @@ -242,20 +242,20 @@ <br> <div class="row"> - <div class="span4"> + <div class="span3"> <h2>Nesting columns</h2> <p>Nest your content if you must by creating a <code>.row</code> within an existing column.</p> </div> - <div class="span12"> + <div class="span9"> <h4>Example of nested columns</h4> <div class="row show-grid"> - <div class="span12"> + <div class="span9"> Level 1 of column <div class="row show-grid"> - <div class="span6"> + <div class="span4"> Level 2 </div> - <div class="span6"> + <div class="span5"> Level 2 </div> </div> @@ -282,11 +282,11 @@ <br> <div class="row"> - <div class="span4"> + <div class="span3"> <h2>Roll your own grid</h2> <p>Built into Bootstrap are a handful of variables for customizing the default 940px grid system. With a bit of customization, you can modify the size of columns, their gutters, and the container they reside in.</p> </div> - <div class="span12"> + <div class="span9"> <h3>Inside the grid</h3> <p>The variables needed to modify the grid system currently all reside in <code>preboot.less</code>.</p> <table class="zebra-striped"> @@ -341,7 +341,7 @@ </div> <div class="row"> - <div class="span8"> + <div class="span6"> <h2>Fixed layout</h2> <p>The default and simple 940px-wide, centered layout for just about any website or page provided by a single <code><div.container></code>.</p> <div class="mini-layout"> @@ -355,7 +355,7 @@ </body> </pre> </div><!-- /col --> - <div class="span8"> + <div class="span6"> <h2>Fluid layout</h2> <p>An alternative, flexible fluid page structure with min- and max-widths and a left-hand sidebar. Great for apps and docs.</p> <div class="mini-layout fluid"> @@ -403,7 +403,7 @@ <h5>h5. Heading 5</h5> <h6>h6. Heading 6</h6> </div> - <div class="span8"> + <div class="span4"> <h3>Example paragraph</h3> <p>Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p> <h1>Example heading <small>Has sub-heading…</small></h1> @@ -412,7 +412,7 @@ <!-- Misc Elements --> <div class="row"> - <div class="span4"> + <div class="span3"> <h2>Misc. elements</h2> <p>Using emphasis, addresses, & abbreviations</p> <p> @@ -422,7 +422,7 @@ <code><abbr></code> </p> </div> - <div class="span12"> + <div class="span9"> <h3>When to use</h3> <p>Emphasis tags (<code><strong></code> and <code><em></code>) should be used to indicate additional importance or emphasis of a word or phrase relative to its surrounding copy. Use <code><strong></code> for importance and <code><em></code> for <em>stress</em> emphasis.</p> <h3>Emphasis in a paragraph</h3> @@ -456,7 +456,7 @@ <!-- Blockquotes --> <div class="row"> - <div class="span4"> + <div class="span3"> <h2>Blockquotes</h2> <p> <code><blockquote></code> @@ -464,7 +464,7 @@ <code><small></code> </p> </div> - <div class="span12"> + <div class="span9"> <h3>How to quote</h3> <p>To include a blockquote, wrap <code><blockquote></code> around <code><p></code> and <code><small></code> tags. Use the <code><small></code> element to cite your source and you'll get an em dash <code>&mdash;</code> before it.</p> <blockquote> @@ -482,7 +482,7 @@ <h2>Lists</h2> <div class="row"> - <div class="span4"> + <div class="span3"> <h4>Unordered <code><ul></code></h4> <ul> <li>Lorem ipsum dolor sit amet</li> @@ -502,7 +502,7 @@ <li>Eget porttitor lorem</li> </ul> </div> - <div class="span4"> + <div class="span3"> <h4>Unstyled <code><ul.unstyled></code></h4> <ul class="unstyled"> <li>Lorem ipsum dolor sit amet</li> @@ -522,7 +522,7 @@ <li>Eget porttitor lorem</li> </ul> </div> - <div class="span4"> + <div class="span3"> <h4>Ordered <code><ol></code></h4> <ol> <li>Lorem ipsum dolor sit amet</li> @@ -535,7 +535,7 @@ <li>Eget porttitor lorem</li> </ol> </div> - <div class="span4"> + <div class="span3"> <h4>Description <code>dl</code></h4> <dl> <dt>Description lists</dt> @@ -552,7 +552,7 @@ <!-- Code --> <div class="row"> - <div class="span4"> + <div class="span3"> <h2>Code</h2> <p> <code><code></code> @@ -560,7 +560,7 @@ </p> <p>Pimp your code in style with two simple tags. For even more awesomeness through javascript, drop in Google's code prettify library and you're set.</p> </div> - <div class="span12"> + <div class="span9"> <h3>Presenting code</h3> <p>Code, blocks of or just snippets inline, can be displayed with style just by wrapping in the right tag. For blocks of code spanning multiple lines, use the <code><pre></code> element. For inline code, use the <code><code></code> element.</p> <table class="zebra-striped"> @@ -603,14 +603,14 @@ <!-- Labels --> <div class="row"> - <div class="span4"> + <div class="span3"> <h2>Inline labels</h2> <p> <code><span class="label"></code> </p> <p>Call attention to or flag any phrase in your body text.</p> </div> - <div class="span12"> + <div class="span9"> <h3>Label anything</h3> <p>Ever needed one of those fancy <span class="label success">New!</span> or <span class="label important">Important</span> flags when writing code? Well, now you have them. Here's what's included by default:</p> <table class="zebra-striped"> @@ -678,7 +678,7 @@ </div> <!-- Table structure --> <div class="row"> - <div class="span4"> + <div class="span3"> <h2>Building tables</h2> <p> <code><table></code> @@ -694,7 +694,7 @@ <p>Always wrap your column headers in a <code><thead></code> such that hierarchy is <code><thead></code> > <code><tr></code> > <code><th></code>.</p> <p>Similar to the column headers, all your table’s body content should be wrapped in a <code><tbody></code> so your hierarchy is <code><tbody></code> > <code><tr></code> > <code><td></code>.</p> </div> - <div class="span12"> + <div class="span9"> <h3>Example: Default table styles</h3> <p>All tables will be automatically styled with only the essential borders to ensure readability and maintain structure. No need to add extra classes or attributes.</p> <table> @@ -823,7 +823,7 @@ <h1>Forms</h1> </div> <div class="row"> - <div class="span-one-third"> + <div class="span4"> <h3>Four types of forms</h3> <p>With 2.0, we now have four types of forms to choose from:</p> <ul> @@ -833,15 +833,15 @@ <li>Vertical form for stacked labels and inputs</li> </ul> </div> - <div class="span-one-third"> + <div class="span4"> <h3></h3> </div> </div><!-- /row --> <div class="row"> - <div class="span4"> + <div class="span3"> <h2>Search form</h2> </div> - <div class="span12"> + <div class="span9"> <div class="well"> <form class="form-search"> <input type="text" class="search-query"> @@ -851,10 +851,10 @@ </div> </div><!-- /row --> <div class="row"> - <div class="span4"> + <div class="span3"> <h2>Inline form</h2> </div> - <div class="span12"> + <div class="span9"> <div class="well"> <form class="form-inline"> <h4>Some directional text</h4> @@ -868,10 +868,10 @@ </div> </div><!-- /row --> <div class="row"> - <div class="span4"> + <div class="span3"> <h2>Horizontal form</h2> </div> - <div class="span12"> + <div class="span9"> <form class="form-horizontal"> <legend>Example form</legend> <fieldset class="control-group"> @@ -972,10 +972,10 @@ </div> </div><!-- /row --> <div class="row"> - <div class="span4"> + <div class="span3"> <h2>Vertical form</h2> </div> - <div class="span12"> + <div class="span9"> <form class="form-vertical"> <legend>Example form</legend> <fieldset class="control-group"> @@ -1016,12 +1016,12 @@ </div><!-- /row --> <div class="row"> - <div class="span4"> + <div class="span3"> <h2>Buttons</h2> <p>As a convention, buttons are used for actions while links are used for objects. For instance, "Download" could be a button and "recent activity" could be a link.</p> <p>All buttons default to a light gray style, but a number of functional classes can be applied for different color styles. These classes include a blue <code>.primary</code> class, a light-blue <code>.info</code> class, a green <code>.success</code> class, and a red <code>.danger</code> class.</p> </div> - <div class="span12"> + <div class="span9"> <h3>Example buttons</h3> <p>Button styles can be applied to anything with the <code>.btn</code> applied. Typically you’ll want to apply these to only <code><a></code>, <code><button></code>, and select <code><input></code> elements. Here’s how it looks:</p> <div class="well" style="padding: 14px 19px;"> @@ -1052,10 +1052,10 @@ </div><!-- /row --> <div class="row"> - <div class="span4"> + <div class="span3"> <h2>Button groups</h2> </div> - <div class="span12"> + <div class="span9"> <h3>Example</h3> <div class="well"> <div class="btn-group"> @@ -1101,11 +1101,11 @@ </div> <!-- Table structure --> <div class="row"> - <div class="span4"> + <div class="span3"> <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"> + <div class="span9"> <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> @@ -1234,15 +1234,15 @@ </div><!-- /topbar --> <div class="row"> - <div class="span5"> + <div class="span4"> <h4>What is it</h4> <p>Our topbar is a fixed bar that houses a website’s logo or name, primary navigation, and search form.</p> </div> - <div class="span5"> + <div class="span4"> <h4>Customizable</h4> <p>All elements within, and the entire topbar as well, are optional. You can choose to include a logo/name, nav, search, and a secondary nav—or any combination of that.</p> </div> - <div class="span6"> + <div class="span4"> <h4>Dropdowns included</h4> <p>As part of the main navigation, we’ve included the ability for you to add dropdowns to your nav. Check out the secondary nav above (right aligned) to see how it’s done. Dropdowns <code>li</code> tags also support <code>.active</code> for showing current page selection.</p> </div> @@ -1252,12 +1252,12 @@ <br> <div class="row"> - <div class="span4"> + <div class="span3"> <h2>Tabs and pills</h2> <p>Create simple secondary navigation with a <code><ul></code>. Swap between tabs or pills by adding the appropriate class.</p> <p>Great for sub-sections of content like our account settings pages and user timelines for toggling between pages of like content. Available in tabbed or pill styles.</p> </div> - <div class="span12"> + <div class="span9"> <h3>Basic tabs example</h3> <p>Tabs can be used as regular navigation (loading external pages in the same tab) or as tabbable content areas for swapping out panes of content. We have a <a href="./javascript.html#tabs">tabs plugin</a> that can be used to integrate the latter.</p> <ul class="tabs"> @@ -1288,7 +1288,7 @@ <h3>Alternate tabs</h3> <p>You can also use tabs that are stacked on either side of an element, or on the bottom.</p> <div class="row"> - <div class="span3"> + <div class="span2"> <div class="clearfix"> <ul class="tabs tabs-left"> <li class="active"><a href="#">Active link</a></li> @@ -1298,7 +1298,7 @@ </ul> </div> </div> - <div class="span3"> + <div class="span2"> <div class="clearfix"> <ul class="tabs tabs-right"> <li class="active"><a href="#">Active link</a></li> @@ -1308,7 +1308,7 @@ </ul> </div> </div> - <div class="span6"> + <div class="span5"> <div class="clearfix"> <ul class="tabs tabs-bottom"> <li class="active"><a href="#">Active link</a></li> @@ -1345,7 +1345,7 @@ </div> <div class="row"> - <div class="span6"> + <div class="span4"> <div class="tabbable tabs-left"> <ul class="tabs" data-tabs="tabs"> <li class="active"><a href="#1">Section 1</a></li> @@ -1368,7 +1368,7 @@ </div> </div> </div> - <div class="span6"> + <div class="span5"> <div class="tabbable tabs-right"> <ul class="tabs" data-tabs="tabs"> <li class="active"><a href="#1">Section 1</a></li> @@ -1450,11 +1450,11 @@ <!-- Breadcrumbs --> <div class="row"> - <div class="span4"> + <div class="span3"> <h2>Breadcrumbs</h2> <p>Breadcrumb navigation is used as a way to show users where they are within an app or a site, but not for primary navigation.</p> </div> - <div class="span12"> + <div class="span9"> <ul class="breadcrumb"> <li class="active">Home</li> </ul> @@ -1486,11 +1486,11 @@ <!-- Pagination --> <div class="row"> - <div class="span4"> + <div class="span3"> <h2>Pagination</h2> <p>Ultra simplistic and minimally styled pagination inspired by Rdio. The large block is hard to miss, easily scalable, and provides large click areas.</p> </div> - <div class="span12"> + <div class="span9"> <div class="pagination"> <ul> <li class="prev disabled"><a href="#">← Previous</a></li> @@ -1560,13 +1560,13 @@ </div> <!-- Basic alert messages --> <div class="row"> - <div class="span4"> + <div class="span3"> <h2>Basic alerts</h2> <p><code>.alert-message</code></p> <p>One-line messages for highlighting the failure, possible failure, or success of an action. Particularly useful for forms.</p> <p><a class="btn js-btn" href="./javascript.html#alerts">Get the javascript »</a></p> </div> - <div class="span12"> + <div class="span9"> <div class="alert-message warning"> <a class="close" href="#">×</a> <p><strong>Holy guacamole!</strong> Best check yo self, you’re not looking too good.</p> @@ -1595,13 +1595,13 @@ </div><!-- /row --> <!-- Block messages --> <div class="row"> - <div class="span4"> + <div class="span3"> <h2>Block messages</h2> <p><code>.alert-message.block-message</code></p> <p>For messages that require a bit of explanation, we have paragraph style alerts. These are perfect for bubbling up longer error messages, warning a user of a pending action, or just presenting information for more emphasis on the page.</p> <p><a class="btn js-btn" href="./javascript.html#alerts">Get the javascript »</a></p> </div> - <div class="span12"> + <div class="span9"> <div class="alert-message block-message warning"> <a class="close" href="#">×</a> <p><strong>Holy guacamole! This is a warning!</strong> Best check yo self, you’re not looking too good. Nulla vitae elit libero, a pharetra augue. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.</p> @@ -1658,12 +1658,12 @@ <h1>Popovers <small>Components for displaying content in modals, tooltips, and popovers</small></h1> </div> <div class="row"> - <div class="span4"> + <div class="span3"> <h2>Modals</h2> <p>Modals—dialogs or lightboxes—are great for contextual actions in situations where it’s important that the background context be maintained.</p> <p><a class="btn js-btn" href="./javascript.html#modal">Get the javascript »</a></p> </div> - <div class="span12"> + <div class="span9"> <div class="well" style="background-color: #888; border: none; padding: 40px;"> <!-- Modal --> <div class="modal" style="position: relative; top: auto; left: auto; margin: 0 auto; z-index: 1"> @@ -1685,12 +1685,12 @@ <!-- Tooltips --> <div class="row"> - <div class="span4"> + <div class="span3"> <h2>Tooltips</h2> <p>Twipsies are super useful for aiding a confused user and pointing them in the right direction.</p> <p><a class="btn js-btn" href="./javascript.html#twipsy">Get the javascript »</a></p> </div> - <div class="span12"> + <div class="span9"> <div class="twipsies well"> <div style="position: relative"> <p class="muted" style="margin-bottom: 0"> @@ -1703,12 +1703,12 @@ Lorem ipsum dolar sit amet illo error <a href="#" title="below">ipsum</a> verita <!-- Popovers --> <div class="row"> - <div class="span4"> + <div class="span3"> <h2>Popovers</h2> <p>Use popovers to provide subtextual information to a page without affecting layout.</p> <p><a class="btn js-btn" href="./javascript.html#popover">Get the javascript »</a></p> </div> - <div class="span12"> + <div class="span9"> <div class="well popover-well"> <div class="popover-wrapper"> <div class="popover left"> @@ -1736,12 +1736,12 @@ Lorem ipsum dolar sit amet illo error <a href="#" title="below">ipsum</a> verita <h1>Using javascript with Bootstrap <small>An index of plugins to get you started</small></h1> </div> <div class="row"> - <div class="span4"> + <div class="span3"> <h2>Getting started</h2> <p>Integrating javascript with the Bootstrap library is super easy. Below we go over the basics and provide you with some awesome plugins to get you started!</p> <p><a class="btn primary" href="./javascript.html">View javascript docs »</a></p> </div> - <div class="span12"> + <div class="span9"> <h3>What's included</h3> <p>Bring some of Bootstrap's primary components to life with new custom plugins that work with <a href="http://jquery.com/" target="_blank">jQuery</a> and <a href="http://ender.no.de" target="_blank">Ender</a>. We encourage you to extend and modify them to fit your specific development needs.</p> <table class="zebra-striped"> @@ -1797,11 +1797,11 @@ Lorem ipsum dolar sit amet illo error <a href="#" title="below">ipsum</a> verita <h1>Using Bootstrap with Less <small>Supercharge your CSS with variables, mixins, and functions</small></h1> </div> <div class="row"> - <div class="span4"> + <div class="span3"> <p>Bootstrap was built with <a href="http://markdotto.com/bootstrap/">Preboot</a>, an open-source pack of mixins and variables to be used in conjunction with <a href="http://lesscss.org" target="_blank">Less</a>, a CSS preprocessor for faster and easier web development.</p> <p>Check out how we used Preboot in Bootstrap and how you can make use of it should you choose to run Less on your next project.</p> </div> - <div class="span12"> + <div class="span9"> <h2>How to use it</h2> <p>Use this option to make full use of Bootstrap’s Less variables, mixins, and nesting in CSS via javascript in your browser.</p> <pre class="prettyprint linenums"> diff --git a/lib/patterns.less b/lib/patterns.less index af898a5614..950ac2feb9 100644 --- a/lib/patterns.less +++ b/lib/patterns.less @@ -111,8 +111,6 @@ margin-bottom: @baseLineHeight; } .navbar-static .navbar-inner { - margin-left: -20px; - margin-right: -20px; padding-left: 20px; padding-right: 20px; .border-radius(4px); -- GitLab From d1d38079589f2cda2b28cc9f5a3da86cbfabbf25 Mon Sep 17 00:00:00 2001 From: Mark Otto <mark.otto@twitter.com> Date: Sun, 16 Oct 2011 03:15:36 -0700 Subject: [PATCH 029/318] add responsive.less file --- lib/responsive.less | 147 ++++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 147 insertions(+) create mode 100644 lib/responsive.less diff --git a/lib/responsive.less b/lib/responsive.less new file mode 100644 index 0000000000..ee974d3e18 --- /dev/null +++ b/lib/responsive.less @@ -0,0 +1,147 @@ +/* Responsive.less + * For phone and tablet devices + * ------------------------------------------------------------- */ + + +@media (max-width: 480px) { + // Remove width from containers + .container { + width: auto; + padding: 0 10px; + } + // Make all columns even + [class*="span"] { + float: none; + display: block; + width: auto; + } +} + + +@media (min-width: 480px) and (max-width: 768px) { + // Remove width from containers + .container { + width: auto; + padding: 0 10px; + } + // Make all columns even + [class*="span"] { + float: none; + display: block; + width: auto; + margin: 0; + } +} + + +// TABLET TO MEDIUM DESKTOP +// ------------------------ + +@media (min-width: 768px) and (max-width: 940px) { + + // Reset grid variables + @gridColumns: 16; + @gridColumnWidth: 28px; + @gridGutterWidth: 20px; + @siteWidth: 748px; + @extraSpace: (@gridGutterWidth * 2); + + // Bring grid mixins to recalculate widths + .columns(@columnSpan: 1) { + width: (@gridColumnWidth * @columnSpan) + (@gridGutterWidth * (@columnSpan - 1)); + } + .offset(@columnOffset: 1) { + margin-left: (@gridColumnWidth * @columnOffset) + (@gridGutterWidth * (@columnOffset - 1)) + @extraSpace; + } + + // 16cols at 30px wide with 16px gutters + .container { + width: @siteWidth; + } + + // Default columns + .span1 { .columns(1); } + .span2 { .columns(2); } + .span3 { .columns(3); } + .span4 { .columns(4); } + .span5 { .columns(5); } + .span6 { .columns(6); } + .span7 { .columns(7); } + .span8 { .columns(8); } + .span9 { .columns(9); } + .span10 { .columns(10); } + .span11 { .columns(11); } + .span12 { .columns(12); } + + // Offset column options + .offset1 { .offset(1); } + .offset2 { .offset(2); } + .offset3 { .offset(3); } + .offset4 { .offset(4); } + .offset5 { .offset(5); } + .offset6 { .offset(6); } + .offset7 { .offset(7); } + .offset8 { .offset(8); } + .offset9 { .offset(9); } + .offset10 { .offset(10); } + .offset11 { .offset(11); } + .offset12 { .offset(12); } + +} + + +// LARGE DESKTOP +// ------------- + +@media (min-width: 1170px) { + + // Reset grid variables + @gridColumns: 12; + @gridColumnWidth: 70px; + @gridGutterWidth: 30px; + @siteWidth: 1170px; + + // Bring grid mixins to recalculate widths + .columns(@columnSpan: 1) { + width: (@gridColumnWidth * @columnSpan) + (@gridGutterWidth * (@columnSpan - 1)); + } + .offset(@columnOffset: 1) { + margin-left: (@gridColumnWidth * @columnOffset) + (@gridGutterWidth * (@columnOffset - 1)) + @gridGutterWidth; + } + + .container { + width: @siteWidth; + } + [class*="span"] { + margin-left: @gridGutterWidth; + } + + // Default columns + .span1 { .columns(1); } + .span2 { .columns(2); } + .span3 { .columns(3); } + .span4 { .columns(4); } + .span5 { .columns(5); } + .span6 { .columns(6); } + .span7 { .columns(7); } + .span8 { .columns(8); } + .span9 { .columns(9); } + .span10 { .columns(10); } + .span11 { .columns(11); } + .span12 { .columns(12); } + + // Offset column options + .offset1 { .offset(1); } + .offset2 { .offset(2); } + .offset3 { .offset(3); } + .offset4 { .offset(4); } + .offset5 { .offset(5); } + .offset6 { .offset(6); } + .offset7 { .offset(7); } + .offset8 { .offset(8); } + .offset9 { .offset(9); } + .offset10 { .offset(10); } + .offset11 { .offset(11); } + .offset12 { .offset(12); } + +} \ No newline at end of file -- GitLab From 6f44a90edbfc897082dd69630983391bf6e57ba7 Mon Sep 17 00:00:00 2001 From: Mark Otto <mark.otto@twitter.com> Date: Sun, 16 Oct 2011 11:35:24 -0700 Subject: [PATCH 030/318] tweak line-height of h2 and h3 to not be gihugeous, updated responsive to improve tablet grid and phone styles --- bootstrap.css | 74 +++++++++++++++++++++++++--------------- bootstrap.min.css | 6 ++-- docs/assets/css/docs.css | 25 +++++++------- docs/index.html | 2 +- lib/responsive.less | 46 +++++++++++++++++++++---- lib/type.less | 4 +-- 6 files changed, 104 insertions(+), 53 deletions(-) diff --git a/bootstrap.css b/bootstrap.css index 8b487fb7e3..dffa6a8249 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 Oct 16 03:14:23 PDT 2011 + * Date: Sun Oct 16 11:34:52 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). @@ -388,13 +388,13 @@ h1 small { } h2 { font-size: 24px; - line-height: 36px; + line-height: 27px; } h2 small { font-size: 14px; } h3 { - line-height: 36px; + line-height: 27px; font-size: 18px; } h3 small { @@ -2269,6 +2269,26 @@ button.btn::-moz-focus-inner, input[type=submit].btn::-moz-focus-inner { float: none; display: block; width: auto; + margin: 0; + } + .modal { + width: auto; + margin: 0; + } + .form-horizontal .control-group > label { + float: none; + width: auto; + padding-top: 0; + text-align: left; + } + .form-horizontal .controls { + margin-left: 0; + } + .form-horizontal .control-list { + padding-top: 0; + } + .form-horizontal .form-actions { + padding-left: 0; } } @media (min-width: 480px) and (max-width: 768px) { @@ -2288,76 +2308,76 @@ button.btn::-moz-focus-inner, input[type=submit].btn::-moz-focus-inner { width: 748px; } .span1 { - width: 28px; + width: 44px; } .span2 { - width: 76px; + width: 108px; } .span3 { - width: 124px; + width: 172px; } .span4 { - width: 172px; + width: 236px; } .span5 { - width: 220px; + width: 300px; } .span6 { - width: 268px; + width: 364px; } .span7 { - width: 316px; + width: 428px; } .span8 { - width: 364px; + width: 492px; } .span9 { - width: 412px; + width: 556px; } .span10 { - width: 460px; + width: 620px; } .span11 { - width: 508px; + width: 684px; } .span12 { - width: 556px; + width: 748px; } .offset1 { - margin-left: 68px; + margin-left: 64px; } .offset2 { - margin-left: 116px; + margin-left: 128px; } .offset3 { - margin-left: 164px; + margin-left: 192px; } .offset4 { - margin-left: 212px; + margin-left: 256px; } .offset5 { - margin-left: 260px; + margin-left: 320px; } .offset6 { - margin-left: 308px; + margin-left: 384px; } .offset7 { - margin-left: 356px; + margin-left: 448px; } .offset8 { - margin-left: 404px; + margin-left: 512px; } .offset9 { - margin-left: 452px; + margin-left: 576px; } .offset10 { - margin-left: 500px; + margin-left: 640px; } .offset11 { - margin-left: 548px; + margin-left: 704px; } .offset12 { - margin-left: 596px; + margin-left: 768px; } } @media (min-width: 1170px) { diff --git a/bootstrap.min.css b/bootstrap.min.css index cfec72ec12..a6ef9baf53 100644 --- a/bootstrap.min.css +++ b/bootstrap.min.css @@ -66,8 +66,8 @@ a{color:#0069d6;text-decoration:none;line-height:inherit;font-weight:inherit;}a: p{font-family:"Helvetica Neue",Helvetica,Arial,sans-serif;font-size:13px;line-height:18px;margin-bottom:9px;}p small{font-size:11px;color:#bfbfbf;} h1,h2,h3,h4,h5,h6{font-weight:bold;color:#404040;}h1 small,h2 small,h3 small,h4 small,h5 small,h6 small{color:#bfbfbf;} h1{margin-bottom:18px;font-size:30px;line-height:36px;}h1 small{font-size:18px;} -h2{font-size:24px;line-height:36px;}h2 small{font-size:14px;} -h3{line-height:36px;font-size:18px;}h3 small{font-size:14px;} +h2{font-size:24px;line-height:27px;}h2 small{font-size:14px;} +h3{line-height:27px;font-size:18px;}h3 small{font-size:14px;} h4{font-size:16px;line-height:36px;}h4 small{font-size:12px;} h5{font-size:14px;line-height:18px;} h6{font-size:13px;line-height:18px;color:#bfbfbf;text-transform:uppercase;} @@ -322,4 +322,4 @@ button.btn::-moz-focus-inner,input[type=submit].btn::-moz-focus-inner{padding:0; .media-grid li{display:inline;} .media-grid a{float:left;padding:4px;margin:0 0 20px 20px;border:1px solid #ddd;-webkit-border-radius:4px;-moz-border-radius:4px;border-radius:4px;-webkit-box-shadow:0 1px 1px rgba(0, 0, 0, 0.075);-moz-box-shadow:0 1px 1px rgba(0, 0, 0, 0.075);box-shadow:0 1px 1px rgba(0, 0, 0, 0.075);}.media-grid a img{display:block;} .media-grid a:hover{border-color:#0069d6;-webkit-box-shadow:0 1px 4px rgba(0, 105, 214, 0.25);-moz-box-shadow:0 1px 4px rgba(0, 105, 214, 0.25);box-shadow:0 1px 4px rgba(0, 105, 214, 0.25);} -@media (max-width: 480px){.container{width:auto;padding:0 10px;} [class*="span"]{float:none;display:block;width:auto;}}@media (min-width: 480px) and (max-width: 768px){.container{width:auto;padding:0 10px;} [class*="span"]{float:none;display:block;width:auto;margin:0;}}@media (min-width: 768px) and (max-width: 940px){.container{width:748px;} .span1{width:28px;} .span2{width:76px;} .span3{width:124px;} .span4{width:172px;} .span5{width:220px;} .span6{width:268px;} .span7{width:316px;} .span8{width:364px;} .span9{width:412px;} .span10{width:460px;} .span11{width:508px;} .span12{width:556px;} .offset1{margin-left:68px;} .offset2{margin-left:116px;} .offset3{margin-left:164px;} .offset4{margin-left:212px;} .offset5{margin-left:260px;} .offset6{margin-left:308px;} .offset7{margin-left:356px;} .offset8{margin-left:404px;} .offset9{margin-left:452px;} .offset10{margin-left:500px;} .offset11{margin-left:548px;} .offset12{margin-left:596px;}}@media (min-width: 1170px){.container{width:1170px;} [class*="span"]{margin-left:30px;} .span1{width:70px;} .span2{width:170px;} .span3{width:270px;} .span4{width:370px;} .span5{width:470px;} .span6{width:570px;} .span7{width:670px;} .span8{width:770px;} .span9{width:870px;} .span10{width:970px;} .span11{width:1070px;} .span12{width:1170px;} .offset1{margin-left:100px;} .offset2{margin-left:200px;} .offset3{margin-left:300px;} .offset4{margin-left:400px;} .offset5{margin-left:500px;} .offset6{margin-left:600px;} .offset7{margin-left:700px;} .offset8{margin-left:800px;} .offset9{margin-left:900px;} .offset10{margin-left:1000px;} .offset11{margin-left:1100px;} .offset12{margin-left:1200px;}} +@media (max-width: 480px){.container{width:auto;padding:0 10px;} [class*="span"]{float:none;display:block;width:auto;margin:0;} .modal{width:auto;margin:0;} .form-horizontal .control-group>label{float:none;width:auto;padding-top:0;text-align:left;} .form-horizontal .controls{margin-left:0;} .form-horizontal .control-list{padding-top:0;} .form-horizontal .form-actions{padding-left:0;}}@media (min-width: 480px) and (max-width: 768px){.container{width:auto;padding:0 10px;} [class*="span"]{float:none;display:block;width:auto;margin:0;}}@media (min-width: 768px) and (max-width: 940px){.container{width:748px;} .span1{width:44px;} .span2{width:108px;} .span3{width:172px;} .span4{width:236px;} .span5{width:300px;} .span6{width:364px;} .span7{width:428px;} .span8{width:492px;} .span9{width:556px;} .span10{width:620px;} .span11{width:684px;} .span12{width:748px;} .offset1{margin-left:64px;} .offset2{margin-left:128px;} .offset3{margin-left:192px;} .offset4{margin-left:256px;} .offset5{margin-left:320px;} .offset6{margin-left:384px;} .offset7{margin-left:448px;} .offset8{margin-left:512px;} .offset9{margin-left:576px;} .offset10{margin-left:640px;} .offset11{margin-left:704px;} .offset12{margin-left:768px;}}@media (min-width: 1170px){.container{width:1170px;} [class*="span"]{margin-left:30px;} .span1{width:70px;} .span2{width:170px;} .span3{width:270px;} .span4{width:370px;} .span5{width:470px;} .span6{width:570px;} .span7{width:670px;} .span8{width:770px;} .span9{width:870px;} .span10{width:970px;} .span11{width:1070px;} .span12{width:1170px;} .offset1{margin-left:100px;} .offset2{margin-left:200px;} .offset3{margin-left:300px;} .offset4{margin-left:400px;} .offset5{margin-left:500px;} .offset6{margin-left:600px;} .offset7{margin-left:700px;} .offset8{margin-left:800px;} .offset9{margin-left:900px;} .offset10{margin-left:1000px;} .offset11{margin-left:1100px;} .offset12{margin-left:1200px;}} diff --git a/docs/assets/css/docs.css b/docs/assets/css/docs.css index 52714d1991..fb7482edc7 100644 --- a/docs/assets/css/docs.css +++ b/docs/assets/css/docs.css @@ -231,7 +231,7 @@ section > .row { .mini-layout .mini-layout-body { background-color: #dceaf4; margin: 0 auto; - width: 240px; + width: 70%; height: 240px; } .mini-layout.fluid .mini-layout-sidebar, @@ -241,11 +241,11 @@ section > .row { } .mini-layout.fluid .mini-layout-sidebar { background-color: #bbd8e9; - width: 90px; + width: 20%; height: 240px; } .mini-layout.fluid .mini-layout-body { - width: 300px; + width: 60%; margin-left: 10px; } @@ -328,23 +328,22 @@ pre.prettyprint { } +.browser-support { + max-width: 100%; +} + /* Responsive Docs -------------------------------------------------- */ - -/* Tablet to Medium Desktop -------------------------- */ +@media (max-width: 480px) { + .large-bird { + display: none; + } +} @media (min-width: 768px) and (max-width: 900px) { - .footer, .jumbotron { min-width: 748px; } - .jumbotron .inner h1, - .jumbotron .inner p { - margin-left: 40px; - margin-right: 40px; - } - } diff --git a/docs/index.html b/docs/index.html index 0e49e9cbd2..b9004e6bfd 100644 --- a/docs/index.html +++ b/docs/index.html @@ -128,7 +128,7 @@ <div class="span4"> <h2>Cross-everything</h2> <p>Bootstrap is tested and supported in major modern browsers like Chrome, Safari, Internet Explorer, and Firefox.</p> - <img src="assets/img/browsers.png" alt="Tested and supported in Chrome, Safari, Internet Explorer, and Firefox"> + <img class="browser-support" src="assets/img/browsers.png" alt="Tested and supported in Chrome, Safari, Internet Explorer, and Firefox"> <ul> <li>Latest Safari</li> <li>Latest Google Chrome</li> diff --git a/lib/responsive.less b/lib/responsive.less index ee974d3e18..5c8e0539e8 100644 --- a/lib/responsive.less +++ b/lib/responsive.less @@ -3,6 +3,9 @@ * ------------------------------------------------------------- */ +// UP TO LANDSCAPE PHONE +// --------------------- + @media (max-width: 480px) { // Remove width from containers .container { @@ -14,10 +17,40 @@ float: none; display: block; width: auto; + margin: 0; + } + // Resize modals + .modal { + width: auto; + margin: 0; } + + // Remove the horizontal form styles + .form-horizontal .control-group > label { + float: none; + width: auto; + padding-top: 0; + text-align: left; + } + // Move over all input controls and content + .form-horizontal .controls { + margin-left: 0; + } + // Move the options list down to align with labels + .form-horizontal .control-list { + padding-top: 0; // has to be padding because margin collaspes + } + // Move over buttons in .form-actions to align with .controls + .form-horizontal .form-actions { + padding-left: 0; + } + } +// LANDSCAPE PHONE TO SMALL DESKTOP & PORTRAIT TABLET +// -------------------------------------------------- + @media (min-width: 480px) and (max-width: 768px) { // Remove width from containers .container { @@ -34,24 +67,23 @@ } -// TABLET TO MEDIUM DESKTOP -// ------------------------ +// PORTRAIT TABLET TO DEFAULT DESKTOP +// ---------------------------------- @media (min-width: 768px) and (max-width: 940px) { // Reset grid variables @gridColumns: 16; - @gridColumnWidth: 28px; + @gridColumnWidth: 44px; @gridGutterWidth: 20px; @siteWidth: 748px; - @extraSpace: (@gridGutterWidth * 2); // Bring grid mixins to recalculate widths .columns(@columnSpan: 1) { width: (@gridColumnWidth * @columnSpan) + (@gridGutterWidth * (@columnSpan - 1)); } .offset(@columnOffset: 1) { - margin-left: (@gridColumnWidth * @columnOffset) + (@gridGutterWidth * (@columnOffset - 1)) + @extraSpace; + margin-left: (@gridColumnWidth * @columnOffset) + (@gridGutterWidth * (@columnOffset - 1)) + @gridGutterWidth; } // 16cols at 30px wide with 16px gutters @@ -90,8 +122,8 @@ } -// LARGE DESKTOP -// ------------- +// LARGE DESKTOP & UP +// ------------------ @media (min-width: 1170px) { diff --git a/lib/type.less b/lib/type.less index 4232a24dff..7cf9e6ccd9 100644 --- a/lib/type.less +++ b/lib/type.less @@ -38,13 +38,13 @@ h1 { } h2 { font-size: 24px; - line-height: @baseLineHeight * 2; + line-height: @baseLineHeight * 1.5; small { font-size: 14px; } } h3 { - line-height: @baseLineHeight * 2; + line-height: @baseLineHeight * 1.5; font-size: 18px; small { font-size: 14px; -- GitLab From 756e7c8739266ec8594d545e7eec2a50ea06ce08 Mon Sep 17 00:00:00 2001 From: Mark Otto <mark.otto@twitter.com> Date: Sun, 16 Oct 2011 12:11:48 -0700 Subject: [PATCH 031/318] more tweaks to responsive --- bootstrap.css | 127 ++++++++++++++++++-------------------------- bootstrap.min.css | 2 +- lib/responsive.less | 5 +- 3 files changed, 56 insertions(+), 78 deletions(-) diff --git a/bootstrap.css b/bootstrap.css index dffa6a8249..3c344e98b7 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 Oct 16 11:34:52 PDT 2011 + * Date: Sun Oct 16 12:11:34 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). @@ -2380,83 +2380,60 @@ button.btn::-moz-focus-inner, input[type=submit].btn::-moz-focus-inner { margin-left: 768px; } } +/* +// LARGE DESKTOP & UP +// ------------------ + @media (min-width: 1170px) { - .container { - width: 1170px; - } - [class*="span"] { - margin-left: 30px; - } - .span1 { - width: 70px; - } - .span2 { - width: 170px; - } - .span3 { - width: 270px; - } - .span4 { - width: 370px; - } - .span5 { - width: 470px; - } - .span6 { - width: 570px; - } - .span7 { - width: 670px; - } - .span8 { - width: 770px; - } - .span9 { - width: 870px; - } - .span10 { - width: 970px; - } - .span11 { - width: 1070px; - } - .span12 { - width: 1170px; - } - .offset1 { - margin-left: 100px; - } - .offset2 { - margin-left: 200px; - } - .offset3 { - margin-left: 300px; - } - .offset4 { - margin-left: 400px; - } - .offset5 { - margin-left: 500px; - } - .offset6 { - margin-left: 600px; - } - .offset7 { - margin-left: 700px; - } - .offset8 { - margin-left: 800px; - } - .offset9 { - margin-left: 900px; + + // Reset grid variables + @gridColumns: 12; + @gridColumnWidth: 70px; + @gridGutterWidth: 30px; + @siteWidth: 1170px; + + // Bring grid mixins to recalculate widths + .columns(@columnSpan: 1) { + width: (@gridColumnWidth * @columnSpan) + (@gridGutterWidth * (@columnSpan - 1)); } - .offset10 { - margin-left: 1000px; + .offset(@columnOffset: 1) { + margin-left: (@gridColumnWidth * @columnOffset) + (@gridGutterWidth * (@columnOffset - 1)) + @gridGutterWidth; } - .offset11 { - margin-left: 1100px; + + .container { + width: @siteWidth; } - .offset12 { - margin-left: 1200px; + [class*="span"] { + margin-left: @gridGutterWidth; } + + // Default columns + .span1 { .columns(1); } + .span2 { .columns(2); } + .span3 { .columns(3); } + .span4 { .columns(4); } + .span5 { .columns(5); } + .span6 { .columns(6); } + .span7 { .columns(7); } + .span8 { .columns(8); } + .span9 { .columns(9); } + .span10 { .columns(10); } + .span11 { .columns(11); } + .span12 { .columns(12); } + + // Offset column options + .offset1 { .offset(1); } + .offset2 { .offset(2); } + .offset3 { .offset(3); } + .offset4 { .offset(4); } + .offset5 { .offset(5); } + .offset6 { .offset(6); } + .offset7 { .offset(7); } + .offset8 { .offset(8); } + .offset9 { .offset(9); } + .offset10 { .offset(10); } + .offset11 { .offset(11); } + .offset12 { .offset(12); } + } +*/ \ No newline at end of file diff --git a/bootstrap.min.css b/bootstrap.min.css index a6ef9baf53..e4dccdef93 100644 --- a/bootstrap.min.css +++ b/bootstrap.min.css @@ -322,4 +322,4 @@ button.btn::-moz-focus-inner,input[type=submit].btn::-moz-focus-inner{padding:0; .media-grid li{display:inline;} .media-grid a{float:left;padding:4px;margin:0 0 20px 20px;border:1px solid #ddd;-webkit-border-radius:4px;-moz-border-radius:4px;border-radius:4px;-webkit-box-shadow:0 1px 1px rgba(0, 0, 0, 0.075);-moz-box-shadow:0 1px 1px rgba(0, 0, 0, 0.075);box-shadow:0 1px 1px rgba(0, 0, 0, 0.075);}.media-grid a img{display:block;} .media-grid a:hover{border-color:#0069d6;-webkit-box-shadow:0 1px 4px rgba(0, 105, 214, 0.25);-moz-box-shadow:0 1px 4px rgba(0, 105, 214, 0.25);box-shadow:0 1px 4px rgba(0, 105, 214, 0.25);} -@media (max-width: 480px){.container{width:auto;padding:0 10px;} [class*="span"]{float:none;display:block;width:auto;margin:0;} .modal{width:auto;margin:0;} .form-horizontal .control-group>label{float:none;width:auto;padding-top:0;text-align:left;} .form-horizontal .controls{margin-left:0;} .form-horizontal .control-list{padding-top:0;} .form-horizontal .form-actions{padding-left:0;}}@media (min-width: 480px) and (max-width: 768px){.container{width:auto;padding:0 10px;} [class*="span"]{float:none;display:block;width:auto;margin:0;}}@media (min-width: 768px) and (max-width: 940px){.container{width:748px;} .span1{width:44px;} .span2{width:108px;} .span3{width:172px;} .span4{width:236px;} .span5{width:300px;} .span6{width:364px;} .span7{width:428px;} .span8{width:492px;} .span9{width:556px;} .span10{width:620px;} .span11{width:684px;} .span12{width:748px;} .offset1{margin-left:64px;} .offset2{margin-left:128px;} .offset3{margin-left:192px;} .offset4{margin-left:256px;} .offset5{margin-left:320px;} .offset6{margin-left:384px;} .offset7{margin-left:448px;} .offset8{margin-left:512px;} .offset9{margin-left:576px;} .offset10{margin-left:640px;} .offset11{margin-left:704px;} .offset12{margin-left:768px;}}@media (min-width: 1170px){.container{width:1170px;} [class*="span"]{margin-left:30px;} .span1{width:70px;} .span2{width:170px;} .span3{width:270px;} .span4{width:370px;} .span5{width:470px;} .span6{width:570px;} .span7{width:670px;} .span8{width:770px;} .span9{width:870px;} .span10{width:970px;} .span11{width:1070px;} .span12{width:1170px;} .offset1{margin-left:100px;} .offset2{margin-left:200px;} .offset3{margin-left:300px;} .offset4{margin-left:400px;} .offset5{margin-left:500px;} .offset6{margin-left:600px;} .offset7{margin-left:700px;} .offset8{margin-left:800px;} .offset9{margin-left:900px;} .offset10{margin-left:1000px;} .offset11{margin-left:1100px;} .offset12{margin-left:1200px;}} +@media (max-width: 480px){.container{width:auto;padding:0 10px;} [class*="span"]{float:none;display:block;width:auto;margin:0;} .modal{width:auto;margin:0;} .form-horizontal .control-group>label{float:none;width:auto;padding-top:0;text-align:left;} .form-horizontal .controls{margin-left:0;} .form-horizontal .control-list{padding-top:0;} .form-horizontal .form-actions{padding-left:0;}}@media (min-width: 480px) and (max-width: 768px){.container{width:auto;padding:0 10px;} [class*="span"]{float:none;display:block;width:auto;margin:0;}}@media (min-width: 768px) and (max-width: 940px){.container{width:748px;} .span1{width:44px;} .span2{width:108px;} .span3{width:172px;} .span4{width:236px;} .span5{width:300px;} .span6{width:364px;} .span7{width:428px;} .span8{width:492px;} .span9{width:556px;} .span10{width:620px;} .span11{width:684px;} .span12{width:748px;} .offset1{margin-left:64px;} .offset2{margin-left:128px;} .offset3{margin-left:192px;} .offset4{margin-left:256px;} .offset5{margin-left:320px;} .offset6{margin-left:384px;} .offset7{margin-left:448px;} .offset8{margin-left:512px;} .offset9{margin-left:576px;} .offset10{margin-left:640px;} .offset11{margin-left:704px;} .offset12{margin-left:768px;}} diff --git a/lib/responsive.less b/lib/responsive.less index 5c8e0539e8..afd30f279e 100644 --- a/lib/responsive.less +++ b/lib/responsive.less @@ -121,7 +121,7 @@ } - +/* // LARGE DESKTOP & UP // ------------------ @@ -176,4 +176,5 @@ .offset11 { .offset(11); } .offset12 { .offset(12); } -} \ No newline at end of file +} +*/ \ No newline at end of file -- GitLab From 2a82b38cff142ec86a6e1dc4f9366205260d262d Mon Sep 17 00:00:00 2001 From: Mark Otto <mark.otto@twitter.com> Date: Sun, 16 Oct 2011 18:01:05 -0700 Subject: [PATCH 032/318] tweak the h2s again for better spacing, adjust docs, remove white bg if possible on file input, few other tweaks --- bootstrap.css | 11 ++--- bootstrap.min.css | 9 ++-- docs/assets/css/docs.css | 99 +++++++++++++++++++++++++--------------- docs/index.html | 57 +++++++++++++++++------ lib/forms.less | 8 +--- lib/type.less | 4 +- 6 files changed, 117 insertions(+), 71 deletions(-) diff --git a/bootstrap.css b/bootstrap.css index 3c344e98b7..3af3c1be78 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 Oct 16 12:11:34 PDT 2011 + * Date: Sun Oct 16 18:00:58 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). @@ -388,7 +388,7 @@ h1 small { } h2 { font-size: 24px; - line-height: 27px; + line-height: 36px; } h2 small { font-size: 14px; @@ -434,7 +434,7 @@ ol { } li { line-height: 18px; - color: #808080; + color: #404040; } ul.unstyled { list-style: none; @@ -553,9 +553,6 @@ label { margin-bottom: 5px; color: #404040; } -input[type=checkbox], input[type=radio] { - cursor: pointer; -} input, textarea, select, @@ -583,9 +580,11 @@ input[type=checkbox], input[type=radio] { line-height: normal; border: none; + cursor: pointer; } input[type=file] { background-color: #ffffff; + background-color: initial; padding: initial; border: initial; line-height: initial; diff --git a/bootstrap.min.css b/bootstrap.min.css index e4dccdef93..39bb7b8194 100644 --- a/bootstrap.min.css +++ b/bootstrap.min.css @@ -66,7 +66,7 @@ a{color:#0069d6;text-decoration:none;line-height:inherit;font-weight:inherit;}a: p{font-family:"Helvetica Neue",Helvetica,Arial,sans-serif;font-size:13px;line-height:18px;margin-bottom:9px;}p small{font-size:11px;color:#bfbfbf;} h1,h2,h3,h4,h5,h6{font-weight:bold;color:#404040;}h1 small,h2 small,h3 small,h4 small,h5 small,h6 small{color:#bfbfbf;} h1{margin-bottom:18px;font-size:30px;line-height:36px;}h1 small{font-size:18px;} -h2{font-size:24px;line-height:27px;}h2 small{font-size:14px;} +h2{font-size:24px;line-height:36px;}h2 small{font-size:14px;} h3{line-height:27px;font-size:18px;}h3 small{font-size:14px;} h4{font-size:16px;line-height:36px;}h4 small{font-size:12px;} h5{font-size:14px;line-height:18px;} @@ -75,7 +75,7 @@ ul,ol{margin:0 0 18px 25px;} ul ul,ul ol,ol ol,ol ul{margin-bottom:0;} ul{list-style:disc;} ol{list-style:decimal;} -li{line-height:18px;color:#808080;} +li{line-height:18px;color:#404040;} ul.unstyled{list-style:none;margin-left:0;} dl{margin-bottom:18px;}dl dt,dl dd{line-height:18px;} dl dt{font-weight:bold;} @@ -94,10 +94,9 @@ form{margin-bottom:18px;} legend{display:block;width:100%;margin-bottom:27px;font-size:19.5px;line-height:36px;color:#404040;border-bottom:1px solid #eee;} label,input,select,textarea{font-family:"Helvetica Neue",Helvetica,Arial,sans-serif;font-size:13px;font-weight:normal;line-height:18px;} label{display:block;margin-bottom:5px;color:#404040;} -input[type=checkbox],input[type=radio]{cursor:pointer;} input,textarea,select,.uneditable-input{display:inline-block;width:210px;height:18px;padding:4px;font-size:13px;line-height:18px;color:#808080;border:1px solid #ccc;-webkit-border-radius:3px;-moz-border-radius:3px;border-radius:3px;} -input[type=checkbox],input[type=radio]{width:auto;height:auto;padding:0;margin:3px 0;*margin-top:0;line-height:normal;border:none;} -input[type=file]{background-color:#ffffff;padding:initial;border:initial;line-height:initial;-webkit-box-shadow:none;-moz-box-shadow:none;box-shadow:none;} +input[type=checkbox],input[type=radio]{width:auto;height:auto;padding:0;margin:3px 0;*margin-top:0;line-height:normal;border:none;cursor:pointer;} +input[type=file]{background-color:#ffffff;background-color:initial;padding:initial;border:initial;line-height:initial;-webkit-box-shadow:none;-moz-box-shadow:none;box-shadow:none;} input[type=button],input[type=reset],input[type=submit]{width:auto;height:auto;} select,input[type=file]{height:27px;line-height:27px;*margin-top:4px;} select[multiple]{background-color:#ffffff;height:inherit;} diff --git a/docs/assets/css/docs.css b/docs/assets/css/docs.css index fb7482edc7..01b6f3cd7e 100644 --- a/docs/assets/css/docs.css +++ b/docs/assets/css/docs.css @@ -9,7 +9,7 @@ -------------------------------------------------- */ body { position: relative; - padding-top: 40px; + padding-top: 100px; background-color: #fff; } section { @@ -19,65 +19,88 @@ section > .row { margin-bottom: 10px; } +/* Tweak topbar brand link to be super sleek +-------------------------------------------------- */ +.navbar .brand { + float: right; + font-weight: bold; + color: #000; + text-shadow: 0 1px 0 rgba(255,255,255,.1); +} +.navbar .brand:hover { + text-decoration: none; +} /* Jumbotrons -------------------------------------------------- */ -.jumbotron, -.jumbotron .inner { - -webkit-border-radius: 0 0 6px 6px; - -moz-border-radius: 0 0 6px 6px; - border-radius: 0 0 6px 6px; -} .jumbotron { - margin-bottom: 40px; - -webkit-box-shadow: inset 0 -1px 0 rgba(0,0,0,.15), 0 1px 3px rgba(0,0,0,.25); - -moz-box-shadow: inset 0 -1px 0 rgba(0,0,0,.15), 0 1px 3px rgba(0,0,0,.25); - box-shadow: inset 0 -1px 0 rgba(0,0,0,.15), 0 1px 3px rgba(0,0,0,.25); -} -.jumbotron .inner { - background: transparent url(../img/grid-18px.png) top center; - padding: 36px 60px; - -webkit-box-shadow: inset 0 -15px 30px rgba(0,0,0,.1); - -moz-box-shadow: inset 0 -15px 30px rgba(0,0,0,.1); - box-shadow: inset 0 -15px 30px rgba(0,0,0,.1); + position: relative; + padding-bottom: 58px; + margin-bottom: 50px; + border-bottom: 2px solid #eee; } .jumbotron h1, .jumbotron p { - margin-bottom: 9px; - color: #fff; - text-shadow: 0 1px 1px rgba(0,0,0,.3); + margin-bottom: 10px; + text-shadow: 0 1px 0 #fff; } .jumbotron h1 { - font-size: 54px; + font-size: 90px; line-height: 1; - text-shadow: 0 1px 2px rgba(0,0,0,.5); + margin-right: 40%; + letter-spacing: -1px; } .jumbotron p { font-weight: 300; - margin-right: 25%; + margin-right: 32%; } .jumbotron .lead { - font-size: 20px; - line-height: 27px; + margin-bottom: 20px; + font-size: 25px; + line-height: 35px; } .jumbotron p a { - color: #fff; font-weight: bold; } +.jumbotron .btn { + font-size: 20px; + padding: 12px 24px; + -webkit-border-radius: 6px; + -moz-border-radius: 6px; + border-radius: 6px; +} +.benefits { + width: 250px; + position: absolute; + right: 0; + bottom: 60px; +} +.benefits ul { + list-style: none; + margin: 0; +} +.benefits li { + font-size: 16px; + font-weight: 300; + line-height: 40px; + color: #555; +} +.benefits li + li { + border-top: 1px solid #f5f5f5; +} +.benefits h4 { + color: #555; +} +.benefits span { + position: relative; + top: -2px; + padding-right: 5px; + color: #999; +} + /* Specific jumbotrons ------------------------- */ -/* main docs page */ -.masthead { - background-color: #004d9f; - background-repeat: no-repeat; - background-image: -webkit-gradient(linear, left top, left bottom, from(#048ccd), to(#004d9f)); - background-image: -webkit-linear-gradient(#048ccd, #004d9f); - background-image: -moz-linear-gradient(#048ccd, #004d9f); - background-image: -o-linear-gradient(top, #048ccd, #004d9f); - background-image: -khtml-gradient(linear, left top, left bottom, from(#048ccd), to(#004d9f)); - filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#048ccd', endColorstr='#004d9f', GradientType=0); /* IE8 and down */ -} /* supporting docs pages */ .subhead { background-color: #767d80; diff --git a/docs/index.html b/docs/index.html index b9004e6bfd..f7818d7f55 100644 --- a/docs/index.html +++ b/docs/index.html @@ -16,16 +16,6 @@ <link href="assets/css/docs.css" rel="stylesheet"> <link href="assets/js/google-code-prettify/prettify.css" rel="stylesheet"> - <!-- Le javascript --> - <script src="http://code.jquery.com/jquery-1.5.2.min.js"></script> - <script src="http://autobahn.tablesorter.com/jquery.tablesorter.min.js"></script> - <script src="assets/js/google-code-prettify/prettify.js"></script> - <script>$(function () { prettyPrint() })</script> - <script src="../js/bootstrap-dropdown.js"></script> - <script src="../js/bootstrap-twipsy.js"></script> - <script src="../js/bootstrap-scrollspy.js"></script> - <script src="assets/js/application.js"></script> - <!-- Le fav and touch icons --> <link rel="shortcut icon" type="image/x-icon" href="assets/ico/favicon.ico"> <link rel="apple-touch-icon" href="assets/ico/bootstrap-apple-57x57.png"> @@ -49,6 +39,7 @@ <ul class="dropdown-menu"> <li><a href="#grid-system">Grid</a></li> <li><a href="#layouts">Layouts</a></li> + <li><a href="#responsive">Resposive</a></li> </ul> </li> <li class="dropdown"> @@ -62,14 +53,17 @@ <li class="dropdown"> <a href="#" class="dropdown-toggle" data-dropdown="true">Patterns</a> <ul class="dropdown-menu"> - <li><a href="#media">Media</a></li> <li><a href="#navigation">Navigation</a></li> + <li><a href="#media">Media</a></li> <li><a href="#alerts">Alerts</a></li> <li><a href="#popovers">Popovers</a></li> + <li><a href="#autocomplete">Autocomplete</a></li> + <li><a href="#accordion">Accordion</a></li> + <li><a href="#datepicker">Datepicker</a></li> </ul> </li> <li><a href="#javascript">Javascript</a></li> - <li><a href="#less">Less</a></li> + <li><a href="#less">Using Less</a></li> </ul> </div> </div> @@ -82,10 +76,21 @@ ================================================== --> <header class="jumbotron masthead"> <div class="inner"> + <div class="benefits pull-right"> + <h4>Feature highlights</h4> + <ul> + <li><span>×</span> Built on LESS</li> + <li><span>×</span> Complete styleguide</li> + <li><span>×</span> Fully responsive design</li> + <li><span>×</span> Small footprint (7kb gzipped)</li> + <li><span>×</span> Support for IE7 and up</li> + <li><span>×</span> Custom jQuery plugins</li> + <li><span>×</span> Dozens of components</li> + </ul> + </div> <h1>Bootstrap, from Twitter</h1> - <a href="#" class="btn btn-large pull-right">Download on GitHub</a> <p class="lead">Bootstrap is a frontend toolkit from Twitter designed to kickstart web development, complete with core HTML, CSS, and JS for grids, type, forms, navigation, and many more components.</p> - <p><strong>Nerd alert:</strong> Bootstrap is <a href="#less" title="Read about using Bootstrap with Less">built with Less</a> and was designed with modern browsers in mind.</p> + <a href="#" class="btn primary btn-large">Download on GitHub</a> </div> </header> @@ -164,6 +169,19 @@ </li> </ul> +<!-- + Quick links: + GitHub + Twitter + Roadmap + Changelog + + Authors: + @mdo + @fat + + --> + </div><!-- /#overview --> @@ -1964,5 +1982,16 @@ Lorem ipsum dolar sit amet illo error <a href="#" title="below">ipsum</a> verita </div><!-- /container --> + + <!-- Le javascript --> + <script src="http://code.jquery.com/jquery-1.5.2.min.js"></script> + <script src="http://autobahn.tablesorter.com/jquery.tablesorter.min.js"></script> + <script src="assets/js/google-code-prettify/prettify.js"></script> + <script>$(function () { prettyPrint() })</script> + <script src="../js/bootstrap-dropdown.js"></script> + <script src="../js/bootstrap-twipsy.js"></script> + <script src="../js/bootstrap-scrollspy.js"></script> + <script src="assets/js/application.js"></script> + </body> </html> diff --git a/lib/forms.less b/lib/forms.less index 4b2bb80166..6edf29e536 100644 --- a/lib/forms.less +++ b/lib/forms.less @@ -37,12 +37,6 @@ label { color: @grayDark; } -// Checkboxs and radio buttons -input[type=checkbox], -input[type=radio] { - cursor: pointer; -} - // Inputs, Textareas, Selects input, textarea, @@ -69,11 +63,13 @@ input[type=radio] { *margin-top: 0; /* IE6-7 */ line-height: normal; border: none; + cursor: pointer; } // Reset the file input to browser defaults input[type=file] { background-color: @white; + background-color: initial; padding: initial; border: initial; line-height: initial; diff --git a/lib/type.less b/lib/type.less index 7cf9e6ccd9..c746a58af8 100644 --- a/lib/type.less +++ b/lib/type.less @@ -38,7 +38,7 @@ h1 { } h2 { font-size: 24px; - line-height: @baseLineHeight * 1.5; + line-height: @baseLineHeight * 2; small { font-size: 14px; } @@ -90,7 +90,7 @@ ol { } li { line-height: @baseLineHeight; - color: @gray; + color: @grayDark; } ul.unstyled { list-style: none; -- GitLab From 1888511d676ced8f30743cc5b540f02257314bde Mon Sep 17 00:00:00 2001 From: Mark Otto <mark.otto@twitter.com> Date: Sun, 16 Oct 2011 18:45:11 -0700 Subject: [PATCH 033/318] updated docs to include quick links and twitter buttons, added updated blueprint pattern to background --- docs/assets/css/docs.css | 51 ++++++++++++++++++++------ docs/assets/img/grid-18px-masked.png | Bin 0 -> 1621 bytes docs/index.html | 53 ++++++++++++++++----------- 3 files changed, 71 insertions(+), 33 deletions(-) create mode 100644 docs/assets/img/grid-18px-masked.png diff --git a/docs/assets/css/docs.css b/docs/assets/css/docs.css index 01b6f3cd7e..ee0b9c8a33 100644 --- a/docs/assets/css/docs.css +++ b/docs/assets/css/docs.css @@ -9,8 +9,10 @@ -------------------------------------------------- */ body { position: relative; - padding-top: 100px; + padding-top: 90px; background-color: #fff; + background-image: url(../img/grid-18px-masked.png); + background-repeat: repeat-x; } section { padding-top: 60px; @@ -35,9 +37,6 @@ section > .row { -------------------------------------------------- */ .jumbotron { position: relative; - padding-bottom: 58px; - margin-bottom: 50px; - border-bottom: 2px solid #eee; } .jumbotron h1, .jumbotron p { @@ -57,23 +56,22 @@ section > .row { .jumbotron .lead { margin-bottom: 20px; font-size: 25px; - line-height: 35px; -} -.jumbotron p a { - font-weight: bold; + line-height: 36px; } .jumbotron .btn { font-size: 20px; - padding: 12px 24px; + padding: 14px 24px; -webkit-border-radius: 6px; -moz-border-radius: 6px; border-radius: 6px; } + +/* Benefits list in masthead */ .benefits { width: 250px; position: absolute; right: 0; - bottom: 60px; + bottom: 0; } .benefits ul { list-style: none; @@ -82,7 +80,7 @@ section > .row { .benefits li { font-size: 16px; font-weight: 300; - line-height: 40px; + line-height: 35px; color: #555; } .benefits li + li { @@ -127,6 +125,37 @@ section > .row { } +/* Quick links +-------------------------------------------------- */ +.quick-links { + padding: 5px 20px; + margin: 60px 0; + list-style: none; + text-align: center; + background-color: #eee; + -webkit-border-radius: 4px; + -moz-border-radius: 4px; + border-radius: 4px; +} +.quick-links li { + display: inline; + margin: 0 5px; + line-height: 30px; +} +.quick-links .divider { + color: #999; +} +.quick-links strong { + font-weight: normal; + color: #999; +} +.quick-links .tweet-btn, +.quick-links .follow-btn { + position: relative; + top: 5px; +} + + /* Footer -------------------------------------------------- */ .footer { diff --git a/docs/assets/img/grid-18px-masked.png b/docs/assets/img/grid-18px-masked.png new file mode 100644 index 0000000000000000000000000000000000000000..e531d5bc47b957b0ec8618482b27c1df0563188c GIT binary patch literal 1621 zcmcIkZA=?=96kzTIPKz$!2#KJ=|mHty}Q2OjWSAKpg;+MCU(_0kM?LgxEJpZT8bbq z5wZlf5Orb8GSQhB!)8#L=!CH?WI-asHX6-f0w#+?l;MYk8E2gTD=#w<_Rah9e|w(i z_xxUR$15v}<-0O>K@cQ&lvu04>Vcpnby_OeMZy#9V95||Zn2uJ6+<LXL1rIYL%|N3 z^ix$7>1%p@lFEmm<mZDfx9E136JC~9krGA~ra8cdp!~yOj`Y@1B3wiHgN#YBGIB)$ z2Yn{ROFAd&<SbMmSQ6o>>PUsl8>#c+KE>ezI6q7P0h$s?I84_w0ueST61oJ~OV@}3 zPC&#ulVZ)3+gS-)Se}A)Dpcu3^%$(zsxU2zYw<i-jbbQ*sS(tm#85(KAW#fm{}dn^ z@2e%MtoHR-;ABz+M3Ey9Boqp%LK+pz`w<MsaRgN(YPAv|ltL3Dl3^ty9NbW_Qi7Kc za$=BWU`dgzVH-q~0yteuf#x=48DYIlpkPRt<Pc1SN-1psozBNYX?hbah*i`hzgr3m zt|pE`swjbN;Ju)6wFjk89AV)pQe=4-%hqpHu`<AltPo&1*ix-iVX%|*1{vul!EibW z2P23i<E0!{lLBa{f<Yf)G2#}DUZ=LBMjeLPP_q_CZAGZYhNDGA8ogzMYh}F+G{uM; zT;C(EW?QZ_3^WHKTPZ%+NcrqMOT&qziQpDqbUL%$XtiP6>aBBqTX<RLZl4DN%pg*0 z|JCY^D=<IOc5`sSVRQ5;2FyDT2D^WRazl`8!eKSL!ZW}97%$Dmp6!bFeD5iJ@b^m2 zlF>Xm_*Tu&hPRI#2xpOdLbErEzj2jbQXOS&gCSa+9u!(vCQV<bWNHKLsq)OEKujjj zj23pL2V#fV9DUxW^={dnz58na`#kXOqJR8@LVaGl(6d`3aZ-Ds1k5vFeo`BVmEI1y zJ8ll8Ok>1ULRKq_4eUq+QpN_%xqb37H0#t=+}@ob2b4}bln?=L5-9sK@`>8<XN(hz z==p?PTEY}~lOkQT>hrEW#@bg8#RF4a+1!aZX_s;t*wdCO1qHr9nx5l-?fxHQcV+j> z%NEY|6;Irn?K!t|$C=T+ckkKjys_c;o-)iVLhBi}14j>EX?Z8?XqlVu`{jnJckEgm zw--OBnQ{MKlO~nq?uARk!mWV8Gg$QCPAU_PCxP2v3!)!|+L!bTqi<YJK6*tsFT8qo z_+rNLk#10-#l;Kv?@jlvPF6CY1qB&j#u-qr)yde4<0TE_e9nAU`WGi>P2YVSH?%gM z$XLGqbo7j+`SS&P=iH5*y?yWd4N~`__v6W9#^&;4Vq5xR>)^{Be@>h(nEL63Q=vnR ztKVX`@%=f=f3!rqOJ#}9&H2yG(aZK^HBl%vUS=w9$mQH)1(%DNW0B$Unfa@D!BBtv z&DQ-xDG^H{a3(cjZAxVF$cG+NbJD)0vbH3M_t}0JIemRZ`q4XV71mFRUhDV={me)y literal 0 HcmV?d00001 diff --git a/docs/index.html b/docs/index.html index f7818d7f55..5002d9d46e 100644 --- a/docs/index.html +++ b/docs/index.html @@ -90,10 +90,33 @@ </div> <h1>Bootstrap, from Twitter</h1> <p class="lead">Bootstrap is a frontend toolkit from Twitter designed to kickstart web development, complete with core HTML, CSS, and JS for grids, type, forms, navigation, and many more components.</p> - <a href="#" class="btn primary btn-large">Download on GitHub</a> + <p class="download-info"> + <a href="#" class="btn primary btn-large">Download on GitHub</a> + Currently v2.0.0 + </p> </div> </header> + <ul class="quick-links"> + <li><strong>Quick links</strong></li> + <li><a href="https://github.com/twitter/bootstrap/">GitHub</a></li> + <li><a href="https://github.com/twitter/bootstrap/issues?state=open">Issues</a></li> + <li><a href="https://github.com/twitter/bootstrap/wiki/Roadmap">Roadmap</a></li> + <li><a href="https://github.com/twitter/bootstrap/wiki/Changelog">Changelog</a></li> + <li class="divider">·</li> + <li><strong>Authors</strong></li> + <li><a href="http://twitter.com/mdo">@mdo</a></li> + <li><a href="http://twitter.com/fat">@fat</a></li> + <li class="divider">·</li> + <li class="follow-btn"> + <a href="https://twitter.com/twbootstrap" class="twitter-follow-button" data-width="145px" data-link-color="#0069D6" data-show-count="false">Follow @twbootstrap</a><script src="http://platform.twitter.com/widgets.js" type="text/javascript"></script> + </li> + <li class="tweet-btn"> + <a href="https://twitter.com/share" class="twitter-share-button" data-url="http://twitter.github.com/bootstrap/" data-count="horizontal" data-via="twbootstrap" data-related="mdo:Creator of Twitter Bootstrap">Tweet</a><script type="text/javascript" src="http://platform.twitter.com/widgets.js"></script> + </li> + </ul> + + <!-- Quickstart options ================================================== --> <div class="quickstart" style="display: none;"> @@ -169,19 +192,6 @@ </li> </ul> -<!-- - Quick links: - GitHub - Twitter - Roadmap - Changelog - - Authors: - @mdo - @fat - - --> - </div><!-- /#overview --> @@ -1971,18 +1981,17 @@ Lorem ipsum dolar sit amet illo error <a href="#" title="below">ipsum</a> verita </section> - <footer class="footer"> - <p class="pull-right"><a href="#">Back to top</a></p> - <p> - Designed and built with all the love in the world <a href="http://twitter.com/twitter" target="_blank">@twitter</a> by <a href="http://twitter.com/mdo" target="_blank">@mdo</a> and <a href="http://twitter.com/fat" target="_blank">@fat</a>.<br> - Code licensed under the <a href="http://www.apache.org/licenses/LICENSE-2.0" target="_blank">Apache License v2.0</a>. Documentation licensed under <a href="http://creativecommons.org/licenses/by/3.0/">CC BY 3.0</a>. - </p> - </footer> + <footer class="footer"> + <p class="pull-right"><a href="#">Back to top</a></p> + <p> + Designed and built with all the love in the world <a href="http://twitter.com/twitter" target="_blank">@twitter</a> by <a href="http://twitter.com/mdo" target="_blank">@mdo</a> and <a href="http://twitter.com/fat" target="_blank">@fat</a>.<br> + Code licensed under the <a href="http://www.apache.org/licenses/LICENSE-2.0" target="_blank">Apache License v2.0</a>. Documentation licensed under <a href="http://creativecommons.org/licenses/by/3.0/">CC BY 3.0</a>. + </p> + </footer> </div><!-- /container --> - <!-- Le javascript --> <script src="http://code.jquery.com/jquery-1.5.2.min.js"></script> <script src="http://autobahn.tablesorter.com/jquery.tablesorter.min.js"></script> -- GitLab From c62a0239bd30a12e9f0d8c1e45f5818460e9df90 Mon Sep 17 00:00:00 2001 From: Mark Otto <mark.otto@twitter.com> Date: Sun, 16 Oct 2011 19:12:33 -0700 Subject: [PATCH 034/318] update to responsive to fix new masthead --- bootstrap.css | 129 +++++++++++++++++++++++---------------- bootstrap.min.css | 2 +- docs/assets/css/docs.css | 109 ++++++++++----------------------- docs/index.html | 14 ++--- lib/responsive.less | 4 +- 5 files changed, 117 insertions(+), 141 deletions(-) diff --git a/bootstrap.css b/bootstrap.css index 3af3c1be78..32ffc61205 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 Oct 16 18:00:58 PDT 2011 + * Date: Sun Oct 16 19:08:43 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). @@ -2379,60 +2379,83 @@ button.btn::-moz-focus-inner, input[type=submit].btn::-moz-focus-inner { margin-left: 768px; } } -/* -// LARGE DESKTOP & UP -// ------------------ - -@media (min-width: 1170px) { - - // Reset grid variables - @gridColumns: 12; - @gridColumnWidth: 70px; - @gridGutterWidth: 30px; - @siteWidth: 1170px; - - // Bring grid mixins to recalculate widths - .columns(@columnSpan: 1) { - width: (@gridColumnWidth * @columnSpan) + (@gridGutterWidth * (@columnSpan - 1)); - } - .offset(@columnOffset: 1) { - margin-left: (@gridColumnWidth * @columnOffset) + (@gridGutterWidth * (@columnOffset - 1)) + @gridGutterWidth; - } - +@media (min-width: 1210px) { .container { - width: @siteWidth; + width: 1170px; } [class*="span"] { - margin-left: @gridGutterWidth; + margin-left: 30px; + } + .span1 { + width: 70px; + } + .span2 { + width: 170px; + } + .span3 { + width: 270px; + } + .span4 { + width: 370px; + } + .span5 { + width: 470px; + } + .span6 { + width: 570px; + } + .span7 { + width: 670px; + } + .span8 { + width: 770px; + } + .span9 { + width: 870px; + } + .span10 { + width: 970px; + } + .span11 { + width: 1070px; + } + .span12 { + width: 1170px; + } + .offset1 { + margin-left: 100px; + } + .offset2 { + margin-left: 200px; + } + .offset3 { + margin-left: 300px; + } + .offset4 { + margin-left: 400px; + } + .offset5 { + margin-left: 500px; + } + .offset6 { + margin-left: 600px; + } + .offset7 { + margin-left: 700px; + } + .offset8 { + margin-left: 800px; + } + .offset9 { + margin-left: 900px; + } + .offset10 { + margin-left: 1000px; + } + .offset11 { + margin-left: 1100px; + } + .offset12 { + margin-left: 1200px; } - - // Default columns - .span1 { .columns(1); } - .span2 { .columns(2); } - .span3 { .columns(3); } - .span4 { .columns(4); } - .span5 { .columns(5); } - .span6 { .columns(6); } - .span7 { .columns(7); } - .span8 { .columns(8); } - .span9 { .columns(9); } - .span10 { .columns(10); } - .span11 { .columns(11); } - .span12 { .columns(12); } - - // Offset column options - .offset1 { .offset(1); } - .offset2 { .offset(2); } - .offset3 { .offset(3); } - .offset4 { .offset(4); } - .offset5 { .offset(5); } - .offset6 { .offset(6); } - .offset7 { .offset(7); } - .offset8 { .offset(8); } - .offset9 { .offset(9); } - .offset10 { .offset(10); } - .offset11 { .offset(11); } - .offset12 { .offset(12); } - } -*/ \ No newline at end of file diff --git a/bootstrap.min.css b/bootstrap.min.css index 39bb7b8194..6851a6cc2b 100644 --- a/bootstrap.min.css +++ b/bootstrap.min.css @@ -321,4 +321,4 @@ button.btn::-moz-focus-inner,input[type=submit].btn::-moz-focus-inner{padding:0; .media-grid li{display:inline;} .media-grid a{float:left;padding:4px;margin:0 0 20px 20px;border:1px solid #ddd;-webkit-border-radius:4px;-moz-border-radius:4px;border-radius:4px;-webkit-box-shadow:0 1px 1px rgba(0, 0, 0, 0.075);-moz-box-shadow:0 1px 1px rgba(0, 0, 0, 0.075);box-shadow:0 1px 1px rgba(0, 0, 0, 0.075);}.media-grid a img{display:block;} .media-grid a:hover{border-color:#0069d6;-webkit-box-shadow:0 1px 4px rgba(0, 105, 214, 0.25);-moz-box-shadow:0 1px 4px rgba(0, 105, 214, 0.25);box-shadow:0 1px 4px rgba(0, 105, 214, 0.25);} -@media (max-width: 480px){.container{width:auto;padding:0 10px;} [class*="span"]{float:none;display:block;width:auto;margin:0;} .modal{width:auto;margin:0;} .form-horizontal .control-group>label{float:none;width:auto;padding-top:0;text-align:left;} .form-horizontal .controls{margin-left:0;} .form-horizontal .control-list{padding-top:0;} .form-horizontal .form-actions{padding-left:0;}}@media (min-width: 480px) and (max-width: 768px){.container{width:auto;padding:0 10px;} [class*="span"]{float:none;display:block;width:auto;margin:0;}}@media (min-width: 768px) and (max-width: 940px){.container{width:748px;} .span1{width:44px;} .span2{width:108px;} .span3{width:172px;} .span4{width:236px;} .span5{width:300px;} .span6{width:364px;} .span7{width:428px;} .span8{width:492px;} .span9{width:556px;} .span10{width:620px;} .span11{width:684px;} .span12{width:748px;} .offset1{margin-left:64px;} .offset2{margin-left:128px;} .offset3{margin-left:192px;} .offset4{margin-left:256px;} .offset5{margin-left:320px;} .offset6{margin-left:384px;} .offset7{margin-left:448px;} .offset8{margin-left:512px;} .offset9{margin-left:576px;} .offset10{margin-left:640px;} .offset11{margin-left:704px;} .offset12{margin-left:768px;}} +@media (max-width: 480px){.container{width:auto;padding:0 10px;} [class*="span"]{float:none;display:block;width:auto;margin:0;} .modal{width:auto;margin:0;} .form-horizontal .control-group>label{float:none;width:auto;padding-top:0;text-align:left;} .form-horizontal .controls{margin-left:0;} .form-horizontal .control-list{padding-top:0;} .form-horizontal .form-actions{padding-left:0;}}@media (min-width: 480px) and (max-width: 768px){.container{width:auto;padding:0 10px;} [class*="span"]{float:none;display:block;width:auto;margin:0;}}@media (min-width: 768px) and (max-width: 940px){.container{width:748px;} .span1{width:44px;} .span2{width:108px;} .span3{width:172px;} .span4{width:236px;} .span5{width:300px;} .span6{width:364px;} .span7{width:428px;} .span8{width:492px;} .span9{width:556px;} .span10{width:620px;} .span11{width:684px;} .span12{width:748px;} .offset1{margin-left:64px;} .offset2{margin-left:128px;} .offset3{margin-left:192px;} .offset4{margin-left:256px;} .offset5{margin-left:320px;} .offset6{margin-left:384px;} .offset7{margin-left:448px;} .offset8{margin-left:512px;} .offset9{margin-left:576px;} .offset10{margin-left:640px;} .offset11{margin-left:704px;} .offset12{margin-left:768px;}}@media (min-width: 1210px){.container{width:1170px;} [class*="span"]{margin-left:30px;} .span1{width:70px;} .span2{width:170px;} .span3{width:270px;} .span4{width:370px;} .span5{width:470px;} .span6{width:570px;} .span7{width:670px;} .span8{width:770px;} .span9{width:870px;} .span10{width:970px;} .span11{width:1070px;} .span12{width:1170px;} .offset1{margin-left:100px;} .offset2{margin-left:200px;} .offset3{margin-left:300px;} .offset4{margin-left:400px;} .offset5{margin-left:500px;} .offset6{margin-left:600px;} .offset7{margin-left:700px;} .offset8{margin-left:800px;} .offset9{margin-left:900px;} .offset10{margin-left:1000px;} .offset11{margin-left:1100px;} .offset12{margin-left:1200px;}} diff --git a/docs/assets/css/docs.css b/docs/assets/css/docs.css index ee0b9c8a33..7d36946dbb 100644 --- a/docs/assets/css/docs.css +++ b/docs/assets/css/docs.css @@ -37,34 +37,34 @@ section > .row { -------------------------------------------------- */ .jumbotron { position: relative; -} -.jumbotron h1, -.jumbotron p { - margin-bottom: 10px; text-shadow: 0 1px 0 #fff; } .jumbotron h1 { - font-size: 90px; - line-height: 1; margin-right: 40%; + margin-bottom: 10px; + font-size: 90px; letter-spacing: -1px; + line-height: 1; } .jumbotron p { - font-weight: 300; margin-right: 32%; -} -.jumbotron .lead { margin-bottom: 20px; font-size: 25px; + font-weight: 300; line-height: 36px; } .jumbotron .btn { font-size: 20px; padding: 14px 24px; + margin-right: 5px; -webkit-border-radius: 6px; -moz-border-radius: 6px; border-radius: 6px; } +.jumbotron .download-info { + font-size: 16px; + color: #999; +} /* Benefits list in masthead */ .benefits { @@ -133,9 +133,9 @@ section > .row { list-style: none; text-align: center; background-color: #eee; - -webkit-border-radius: 4px; - -moz-border-radius: 4px; - border-radius: 4px; + -webkit-border-radius: 3px; + -moz-border-radius: 3px; + border-radius: 3px; } .quick-links li { display: inline; @@ -167,71 +167,6 @@ section > .row { } -/* Quickstart section for getting le code --------------------------------------------------- */ -.quickstart { - background-color: #f5f5f5; - background-repeat: repeat-x; - background-image: -khtml-gradient(linear, left top, left bottom, from(#f9f9f9), to(#f5f5f5)); - background-image: -moz-linear-gradient(#f9f9f9, #f5f5f5); - background-image: -ms-linear-gradient(#f9f9f9, #f5f5f5); - background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #f9f9f9), color-stop(100%, #f5f5f5)); - background-image: -webkit-linear-gradient(#f9f9f9, #f5f5f5); - background-image: -o-linear-gradient(#f9f9f9, #f5f5f5); - -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr='#f9f9f9', endColorstr='#f5f5f5', GradientType=0)"; - filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#f9f9f9', endColorstr='#f5f5f5', GradientType=0); - background-image: linear-gradient(#f9f9f9, #f5f5f5); - border-top: 1px solid #fff; - border-bottom: 1px solid #eee; -} -.quickstart .container { - margin-bottom: 0; -} -.quickstart .row { - margin: 0 -20px; - -webkit-box-shadow: 1px 0 0 #f9f9f9; - -moz-box-shadow: 1px 0 0 #f9f9f9; - box-shadow: 1px 0 0 #f9f9f9; -} -.quickstart [class*="span"] { - width: 285px; - height: 117px; - margin-left: 0; - padding: 17px 20px 26px; - border-left: 1px solid #eee; - -webkit-box-shadow: inset 1px 0 0 #f9f9f9; - -moz-box-shadow: inset 1px 0 0 #f9f9f9; - box-shadow: inset 1px 0 0 #f9f9f9; -} -.quickstart [class*="span"]:last-child { - border-right: 1px solid #eee; - width: 286px; -} -.quickstart h6, -.quickstart p { - line-height: 18px; - text-align: center; - margin-bottom: 9px; - color: #333; -} -.quickstart .current-version, -.quickstart .current-version a { - color: #999; -} -.quickstart h6 { - color: #999; -} -.quickstart textarea { - display: block; - width: 275px; - height: auto; - margin: 0 0 9px; - line-height: 21px; - white-space: nowrap; - overflow: hidden; -} - - /* Special grid styles -------------------------------------------------- */ .show-grid { @@ -387,9 +322,29 @@ pre.prettyprint { /* Responsive Docs -------------------------------------------------- */ @media (max-width: 480px) { + + body > .navbar-fixed .nav { + display: none; + } + .large-bird { display: none; } + + .jumbotron h1 { + font-size: 36px; + margin-right: 0; + } + .jumbotron p { + margin-right: 0; + font-size: 18px; + line-height: 24px; + } + .jumbotron .benefits { + position: relative; + width: auto; + margin: 36px 0; + } } @media (min-width: 768px) and (max-width: 900px) { diff --git a/docs/index.html b/docs/index.html index 5002d9d46e..3bc72751e6 100644 --- a/docs/index.html +++ b/docs/index.html @@ -76,7 +76,13 @@ ================================================== --> <header class="jumbotron masthead"> <div class="inner"> - <div class="benefits pull-right"> + <h1>Bootstrap,<br> from Twitter</h1> + <p class="lead">Bootstrap is a responsive frontend toolkit from Twitter designed to kickstart web development, complete with core HTML, CSS, and JS for grids, type, forms, navigation, and many more components.</p> + <p class="download-info"> + <a href="#" class="btn primary btn-large">Download on GitHub</a> + Currently v2.0.0 + </p> + <div class="benefits"> <h4>Feature highlights</h4> <ul> <li><span>×</span> Built on LESS</li> @@ -88,12 +94,6 @@ <li><span>×</span> Dozens of components</li> </ul> </div> - <h1>Bootstrap, from Twitter</h1> - <p class="lead">Bootstrap is a frontend toolkit from Twitter designed to kickstart web development, complete with core HTML, CSS, and JS for grids, type, forms, navigation, and many more components.</p> - <p class="download-info"> - <a href="#" class="btn primary btn-large">Download on GitHub</a> - Currently v2.0.0 - </p> </div> </header> diff --git a/lib/responsive.less b/lib/responsive.less index afd30f279e..900df4c751 100644 --- a/lib/responsive.less +++ b/lib/responsive.less @@ -121,11 +121,10 @@ } -/* // LARGE DESKTOP & UP // ------------------ -@media (min-width: 1170px) { +@media (min-width: 1210px) { // Reset grid variables @gridColumns: 12; @@ -177,4 +176,3 @@ .offset12 { .offset(12); } } -*/ \ No newline at end of file -- GitLab From e7d2218b2043742f21c368d074d97a4bde275730 Mon Sep 17 00:00:00 2001 From: Mark Otto <mark.otto@twitter.com> Date: Sun, 16 Oct 2011 23:04:31 -0700 Subject: [PATCH 035/318] few tweaks to responsive stuff, updated docs for grid system (still needs copy editing) --- bootstrap.css | 159 ++++++++++++++++--------------------- bootstrap.min.css | 29 ++++--- docs/assets/css/docs.css | 14 ++-- docs/index.html | 165 ++++++++++++++++++--------------------- lib/mixins.less | 9 ++- lib/patterns.less | 6 +- lib/responsive.less | 2 + lib/scaffolding.less | 5 +- 8 files changed, 177 insertions(+), 212 deletions(-) diff --git a/bootstrap.css b/bootstrap.css index 32ffc61205..89d55199e5 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 Oct 16 19:08:43 PDT 2011 + * Date: Sun Oct 16 23:04:03 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). @@ -260,6 +260,7 @@ a:hover { display: block; } .row { + margin-left: -20px; zoom: 1; } .row:before, .row:after { @@ -276,9 +277,6 @@ a:hover { float: left; margin-left: 20px; } -.row > [class*="span"]:first-child { - margin-left: 0; -} .span1 { width: 60px; } @@ -316,37 +314,37 @@ a:hover { width: 940px; } .offset1 { - margin-left: 80px; + margin-left: 100px; } .offset2 { - margin-left: 160px; + margin-left: 180px; } .offset3 { - margin-left: 240px; + margin-left: 260px; } .offset4 { - margin-left: 320px; + margin-left: 340px; } .offset5 { - margin-left: 400px; + margin-left: 420px; } .offset6 { - margin-left: 480px; + margin-left: 500px; } .offset7 { - margin-left: 560px; + margin-left: 580px; } .offset8 { - margin-left: 640px; + margin-left: 660px; } .offset9 { - margin-left: 720px; + margin-left: 740px; } .offset10 { - margin-left: 800px; + margin-left: 820px; } .offset11 { - margin-left: 880px; + margin-left: 900px; } /* Typography.less * Headings, body text, lists, code, and more for a versatile and durable typography system @@ -1550,14 +1548,14 @@ footer { border-top: 1px solid #eee; } .page-header { - margin-bottom: 17px; - border-bottom: 1px solid #ddd; + margin-bottom: 27px; + border-bottom: 1px solid #eee; -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; + margin-bottom: 13.5px; } .btn.danger, .alert-message.danger, @@ -2379,83 +2377,60 @@ button.btn::-moz-focus-inner, input[type=submit].btn::-moz-focus-inner { margin-left: 768px; } } +/* +// LARGE DESKTOP & UP +// ------------------ + @media (min-width: 1210px) { - .container { - width: 1170px; - } - [class*="span"] { - margin-left: 30px; - } - .span1 { - width: 70px; - } - .span2 { - width: 170px; - } - .span3 { - width: 270px; - } - .span4 { - width: 370px; - } - .span5 { - width: 470px; - } - .span6 { - width: 570px; - } - .span7 { - width: 670px; - } - .span8 { - width: 770px; - } - .span9 { - width: 870px; - } - .span10 { - width: 970px; - } - .span11 { - width: 1070px; - } - .span12 { - width: 1170px; - } - .offset1 { - margin-left: 100px; - } - .offset2 { - margin-left: 200px; - } - .offset3 { - margin-left: 300px; - } - .offset4 { - margin-left: 400px; - } - .offset5 { - margin-left: 500px; - } - .offset6 { - margin-left: 600px; - } - .offset7 { - margin-left: 700px; - } - .offset8 { - margin-left: 800px; - } - .offset9 { - margin-left: 900px; + + // Reset grid variables + @gridColumns: 12; + @gridColumnWidth: 70px; + @gridGutterWidth: 30px; + @siteWidth: 1170px; + + // Bring grid mixins to recalculate widths + .columns(@columnSpan: 1) { + width: (@gridColumnWidth * @columnSpan) + (@gridGutterWidth * (@columnSpan - 1)); } - .offset10 { - margin-left: 1000px; + .offset(@columnOffset: 1) { + margin-left: (@gridColumnWidth * @columnOffset) + (@gridGutterWidth * (@columnOffset - 1)) + @gridGutterWidth; } - .offset11 { - margin-left: 1100px; + + .container { + width: @siteWidth; } - .offset12 { - margin-left: 1200px; + [class*="span"] { + margin-left: @gridGutterWidth; } + + // Default columns + .span1 { .columns(1); } + .span2 { .columns(2); } + .span3 { .columns(3); } + .span4 { .columns(4); } + .span5 { .columns(5); } + .span6 { .columns(6); } + .span7 { .columns(7); } + .span8 { .columns(8); } + .span9 { .columns(9); } + .span10 { .columns(10); } + .span11 { .columns(11); } + .span12 { .columns(12); } + + // Offset column options + .offset1 { .offset(1); } + .offset2 { .offset(2); } + .offset3 { .offset(3); } + .offset4 { .offset(4); } + .offset5 { .offset(5); } + .offset6 { .offset(6); } + .offset7 { .offset(7); } + .offset8 { .offset(8); } + .offset9 { .offset(9); } + .offset10 { .offset(10); } + .offset11 { .offset(11); } + .offset12 { .offset(12); } + } +*/ \ No newline at end of file diff --git a/bootstrap.min.css b/bootstrap.min.css index 6851a6cc2b..31d1699bed 100644 --- a/bootstrap.min.css +++ b/bootstrap.min.css @@ -36,10 +36,9 @@ a{color:#0069d6;text-decoration:none;line-height:inherit;font-weight:inherit;}a: .pull-left{float:left;} .hide{display:none;} .show{display:block;} -.row{zoom:1;}.row:before,.row:after{display:table;content:"";zoom:1;*display:inline;} +.row{margin-left:-20px;zoom:1;}.row:before,.row:after{display:table;content:"";zoom:1;*display:inline;} .row:after{clear:both;} [class*="span"]{display:inline;float:left;margin-left:20px;} -.row>[class*="span"]:first-child{margin-left:0;} .span1{width:60px;} .span2{width:140px;} .span3{width:220px;} @@ -52,17 +51,17 @@ a{color:#0069d6;text-decoration:none;line-height:inherit;font-weight:inherit;}a: .span10{width:780px;} .span11{width:860px;} .span12{width:940px;} -.offset1{margin-left:80px;} -.offset2{margin-left:160px;} -.offset3{margin-left:240px;} -.offset4{margin-left:320px;} -.offset5{margin-left:400px;} -.offset6{margin-left:480px;} -.offset7{margin-left:560px;} -.offset8{margin-left:640px;} -.offset9{margin-left:720px;} -.offset10{margin-left:800px;} -.offset11{margin-left:880px;} +.offset1{margin-left:100px;} +.offset2{margin-left:180px;} +.offset3{margin-left:260px;} +.offset4{margin-left:340px;} +.offset5{margin-left:420px;} +.offset6{margin-left:500px;} +.offset7{margin-left:580px;} +.offset8{margin-left:660px;} +.offset9{margin-left:740px;} +.offset10{margin-left:820px;} +.offset11{margin-left:900px;} p{font-family:"Helvetica Neue",Helvetica,Arial,sans-serif;font-size:13px;line-height:18px;margin-bottom:9px;}p small{font-size:11px;color:#bfbfbf;} h1,h2,h3,h4,h5,h6{font-weight:bold;color:#404040;}h1 small,h2 small,h3 small,h4 small,h5 small,h6 small{color:#bfbfbf;} h1{margin-bottom:18px;font-size:30px;line-height:36px;}h1 small{font-size:18px;} @@ -242,7 +241,7 @@ table .headerSortUp.purple,table .headerSortDown.purple{background-color:#e2d5f0 .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;} -.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;} +.page-header{margin-bottom:27px;border-bottom:1px solid #eee;-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:13.5px;} .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-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);background-repeat:repeat-x;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);} .btn.success,.alert-message.success{background-color:#57a957;background-image:-khtml-gradient(linear, left top, left bottom, from(#62c462), to(#57a957));background-image:-moz-linear-gradient(top, #62c462, #57a957);background-image:-ms-linear-gradient(top, #62c462, #57a957);background-image:-webkit-gradient(linear, left top, left bottom, color-stop(0%, #62c462), color-stop(100%, #57a957));background-image:-webkit-linear-gradient(top, #62c462, #57a957);background-image:-o-linear-gradient(top, #62c462, #57a957);background-image:linear-gradient(top, #62c462, #57a957);background-repeat:repeat-x;filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#62c462', endColorstr='#57a957', GradientType=0);text-shadow:0 -1px 0 rgba(0, 0, 0, 0.25);border-color:#57a957 #57a957 #3d773d;border-color:rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);} @@ -321,4 +320,4 @@ button.btn::-moz-focus-inner,input[type=submit].btn::-moz-focus-inner{padding:0; .media-grid li{display:inline;} .media-grid a{float:left;padding:4px;margin:0 0 20px 20px;border:1px solid #ddd;-webkit-border-radius:4px;-moz-border-radius:4px;border-radius:4px;-webkit-box-shadow:0 1px 1px rgba(0, 0, 0, 0.075);-moz-box-shadow:0 1px 1px rgba(0, 0, 0, 0.075);box-shadow:0 1px 1px rgba(0, 0, 0, 0.075);}.media-grid a img{display:block;} .media-grid a:hover{border-color:#0069d6;-webkit-box-shadow:0 1px 4px rgba(0, 105, 214, 0.25);-moz-box-shadow:0 1px 4px rgba(0, 105, 214, 0.25);box-shadow:0 1px 4px rgba(0, 105, 214, 0.25);} -@media (max-width: 480px){.container{width:auto;padding:0 10px;} [class*="span"]{float:none;display:block;width:auto;margin:0;} .modal{width:auto;margin:0;} .form-horizontal .control-group>label{float:none;width:auto;padding-top:0;text-align:left;} .form-horizontal .controls{margin-left:0;} .form-horizontal .control-list{padding-top:0;} .form-horizontal .form-actions{padding-left:0;}}@media (min-width: 480px) and (max-width: 768px){.container{width:auto;padding:0 10px;} [class*="span"]{float:none;display:block;width:auto;margin:0;}}@media (min-width: 768px) and (max-width: 940px){.container{width:748px;} .span1{width:44px;} .span2{width:108px;} .span3{width:172px;} .span4{width:236px;} .span5{width:300px;} .span6{width:364px;} .span7{width:428px;} .span8{width:492px;} .span9{width:556px;} .span10{width:620px;} .span11{width:684px;} .span12{width:748px;} .offset1{margin-left:64px;} .offset2{margin-left:128px;} .offset3{margin-left:192px;} .offset4{margin-left:256px;} .offset5{margin-left:320px;} .offset6{margin-left:384px;} .offset7{margin-left:448px;} .offset8{margin-left:512px;} .offset9{margin-left:576px;} .offset10{margin-left:640px;} .offset11{margin-left:704px;} .offset12{margin-left:768px;}}@media (min-width: 1210px){.container{width:1170px;} [class*="span"]{margin-left:30px;} .span1{width:70px;} .span2{width:170px;} .span3{width:270px;} .span4{width:370px;} .span5{width:470px;} .span6{width:570px;} .span7{width:670px;} .span8{width:770px;} .span9{width:870px;} .span10{width:970px;} .span11{width:1070px;} .span12{width:1170px;} .offset1{margin-left:100px;} .offset2{margin-left:200px;} .offset3{margin-left:300px;} .offset4{margin-left:400px;} .offset5{margin-left:500px;} .offset6{margin-left:600px;} .offset7{margin-left:700px;} .offset8{margin-left:800px;} .offset9{margin-left:900px;} .offset10{margin-left:1000px;} .offset11{margin-left:1100px;} .offset12{margin-left:1200px;}} +@media (max-width: 480px){.container{width:auto;padding:0 10px;} [class*="span"]{float:none;display:block;width:auto;margin:0;} .modal{width:auto;margin:0;} .form-horizontal .control-group>label{float:none;width:auto;padding-top:0;text-align:left;} .form-horizontal .controls{margin-left:0;} .form-horizontal .control-list{padding-top:0;} .form-horizontal .form-actions{padding-left:0;}}@media (min-width: 480px) and (max-width: 768px){.container{width:auto;padding:0 10px;} [class*="span"]{float:none;display:block;width:auto;margin:0;}}@media (min-width: 768px) and (max-width: 940px){.container{width:748px;} .span1{width:44px;} .span2{width:108px;} .span3{width:172px;} .span4{width:236px;} .span5{width:300px;} .span6{width:364px;} .span7{width:428px;} .span8{width:492px;} .span9{width:556px;} .span10{width:620px;} .span11{width:684px;} .span12{width:748px;} .offset1{margin-left:64px;} .offset2{margin-left:128px;} .offset3{margin-left:192px;} .offset4{margin-left:256px;} .offset5{margin-left:320px;} .offset6{margin-left:384px;} .offset7{margin-left:448px;} .offset8{margin-left:512px;} .offset9{margin-left:576px;} .offset10{margin-left:640px;} .offset11{margin-left:704px;} .offset12{margin-left:768px;}} diff --git a/docs/assets/css/docs.css b/docs/assets/css/docs.css index 7d36946dbb..300eb38f55 100644 --- a/docs/assets/css/docs.css +++ b/docs/assets/css/docs.css @@ -17,19 +17,16 @@ body { section { padding-top: 60px; } -section > .row { - margin-bottom: 10px; -} /* Tweak topbar brand link to be super sleek -------------------------------------------------- */ -.navbar .brand { +body > .navbar-fixed .brand { float: right; font-weight: bold; color: #000; text-shadow: 0 1px 0 rgba(255,255,255,.1); } -.navbar .brand:hover { +body > .navbar-fixed .brand:hover { text-decoration: none; } @@ -136,6 +133,9 @@ section > .row { -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px; + -webkit-box-shadow: inset 0 1px 0 rgba(0,0,0,.03); + -moz-box-shadow: inset 0 1px 0 rgba(0,0,0,.03); + box-shadow: inset 0 1px 0 rgba(0,0,0,.03); } .quick-links li { display: inline; @@ -171,10 +171,10 @@ section > .row { -------------------------------------------------- */ .show-grid { margin-top: 10px; - margin-bottom: 10px; + margin-bottom: 20px; } .show-grid [class*="span"] { - background: #eee; + background-color: #eee; text-align: center; -webkit-border-radius: 3px; -moz-border-radius: 3px; diff --git a/docs/index.html b/docs/index.html index 3bc72751e6..eeb0f4f0df 100644 --- a/docs/index.html +++ b/docs/index.html @@ -86,7 +86,7 @@ <h4>Feature highlights</h4> <ul> <li><span>×</span> Built on LESS</li> - <li><span>×</span> Complete styleguide</li> + <li><span>×</span> Complete styleguide docs</li> <li><span>×</span> Fully responsive design</li> <li><span>×</span> Small footprint (7kb gzipped)</li> <li><span>×</span> Support for IE7 and up</li> @@ -199,28 +199,10 @@ ================================================== --> <section id="grid-system"> <div class="page-header"> - <h1>Grid system <small>Rock the standard 940px or roll your own</small></h1> + <h1>Grid system <small>12 columns with a responsive twist</small></h1> </div> - <div class="row"> - <div class="span3"> - <h2>Default grid</h2> - <p>The default grid system provided as part of Bootstrap is a 940px wide 16-column grid. It’s a flavor of the popular 960 grid system, but without the additional margin/padding on the left and right sides.</p> - </div> - <div class="span9"> - <h3>Example grid markup</h3> - <p>As shown here, a basic layout can be created with two "columns," each spanning a number of the 16 foundational columns we defined as part of our grid system. See the examples below for more variations.</p> -<pre class="prettyprint linenums"> -<div class="row"> - <div class="span6"> - ... - </div> - <div class="span10"> - ... - </div> -</div> -</pre> - </div> - </div><!-- /row --> + + <h2>Default 940px grid</h2> <div class="row show-grid"> <div class="span1">1</div> <div class="span1">1</div> @@ -252,12 +234,28 @@ <div class="span12">12</div> </div> - <br> + <div class="row"> + <div class="span4"> + <p>The default grid system provided as part of Bootstrap is a <strong>940px-wide, 12-column grid</strong>.</p> + <p>It also has three responsive variations for various devices and resolutions: phone, tablet, and large widescreen desktops.</p> + </div> + <div class="span4"> +<pre class="prettyprint linenums"> +<div class="row"> + <div class="span4">...</div> + <div class="span8">...</div> +</div> +</pre> + </div> + <div class="span4"> + <p>As shown here, a basic layout can be created with two "columns," each spanning a number of the 12 foundational columns we defined as part of our grid system.</p> + </div> + </div><!-- /row --> <h2>Offsetting columns</h2> <div class="row show-grid"> <div class="span4">4</div> - <div class="span8 offset4">8 offset 4</div> + <div class="span4 offset4">4 offset 4</div> </div><!-- /row --> <div class="row show-grid"> <div class="span3 offset3">3 offset 3</div> @@ -269,37 +267,33 @@ <br> + <h2>Nesting columns</h2> <div class="row"> - <div class="span3"> - <h2>Nesting columns</h2> - <p>Nest your content if you must by creating a <code>.row</code> within an existing column.</p> - </div> - <div class="span9"> - <h4>Example of nested columns</h4> + <div class="span6"> + <p>With the static (non-fluid) grid system in Bootstrap, nesting is easy. To nest your content, just add a new <code>.row</code> and set of <code>.span*</code> columns within an existing <code>.span*</code> column.</p> + <h4>Example</h4> <div class="row show-grid"> - <div class="span9"> + <div class="span6"> Level 1 of column <div class="row show-grid"> - <div class="span4"> + <div class="span3"> Level 2 </div> - <div class="span5"> + <div class="span3"> Level 2 </div> </div> </div> </div> + </div> + <div class="span6"> <pre class="prettyprint linenums"> <div class="row"> <div class="span12"> Level 1 of column <div class="row"> - <div class="span6"> - Level 2 - </div> - <div class="span6"> - Level 2 - </div> + <div class="span6">Level 2</div> + <div class="span6">Level 2</div> </div> </div> </div> @@ -307,56 +301,53 @@ </div> </div> - <br> - + <h2>Grid customization</h2> + <table class="zebra-striped"> + <thead> + <tr> + <th>Variable</th> + <th>Default value</th> + <th>Description</th> + </tr> + </thead> + <tbody> + <tr> + <td><code>@gridColumns</code></td> + <td>16</td> + <td>The number of columns within the grid</td> + </tr> + <tr> + <td><code>@gridColumnWidth</code></td> + <td>40px</td> + <td>The width of each column within the grid</td> + </tr> + <tr> + <td><code>@gridGutterWidth</code></td> + <td>20px</td> + <td>The negative space between each column</td> + </tr> + <tr> + <td><code>@siteWidth</code></td> + <td><em>Computed sum of all columns and gutters</em></td> + <td>We use some basic match to count the number of columns and gutters and set the width of the <code>.fixed-container()</code> mixin.</td> + </tr> + </tbody> + </table> <div class="row"> - <div class="span3"> - <h2>Roll your own grid</h2> - <p>Built into Bootstrap are a handful of variables for customizing the default 940px grid system. With a bit of customization, you can modify the size of columns, their gutters, and the container they reside in.</p> + <div class="span4"> + <h3>Variables in LESS</h3> + <p>Built into Bootstrap are a handful of variables for customizing the default 940px grid system, documented above. All variables for the grid are stored in mixins.less.</p> </div> - <div class="span9"> - <h3>Inside the grid</h3> - <p>The variables needed to modify the grid system currently all reside in <code>preboot.less</code>.</p> - <table class="zebra-striped"> - <thead> - <tr> - <th>Variable</th> - <th>Default value</th> - <th>Description</th> - </tr> - </thead> - <tbody> - <tr> - <td><code>@gridColumns</code></td> - <td>16</td> - <td>The number of columns within the grid</td> - </tr> - <tr> - <td><code>@gridColumnWidth</code></td> - <td>40px</td> - <td>The width of each column within the grid</td> - </tr> - <tr> - <td><code>@gridGutterWidth</code></td> - <td>20px</td> - <td>The negative space between each column</td> - </tr> - <tr> - <td><code>@siteWidth</code></td> - <td><em>Computed sum of all columns and gutters</em></td> - <td>We use some basic match to count the number of columns and gutters and set the width of the <code>.fixed-container()</code> mixin.</td> - </tr> - </tbody> - </table> - <h3>Now to customize</h3> - <p>Modifying the grid means changing the three <code>@grid-*</code> variables and recompiling the Less files.</p> - <p>Bootstrap comes equipped to handle a grid system with up to 24 columns; the default is just 16. Here's how your grid variables would look customized to a 24-column grid.</p> - <pre class="prettyprint linenums">@gridColumns: 24; -@gridColumnWidth: 20px; -@gridGutterWidth: 20px;</pre> - <p>Once recompiled, you'll be set!</p> + <div class="span4"> + <h3>How to customize</h3> + <p>Modifying the grid means changing the three <code>@grid*</code> variables and recompiling Bootstrap. Change the grids in the preboot.less file and use one of the <a href="#compiling">four ways documented to recompile</a>.</p> </div> - </div> + <div class="span4"> + <h3>Staying responsive</h3> + <p>Customization of the grid only works at the default level, the 940px grid. To maintain the responsive aspects of Bootstrap, you'll also have to customize the grids in responsive.less.</p> + </div> + </div><!-- /row --> + </section> @@ -1928,7 +1919,7 @@ Lorem ipsum dolar sit amet illo error <a href="#" title="below">ipsum</a> verita } </pre> - <h2>Compiling Less</h2> + <h2 id="compiling">Compiling Less</h2> <p>After modifying the <code>.less</code> files in /lib/, you'll need to recompile them in order to regenerate the bootstrap-*.*.*.css and bootstrap-*.*.*.min.css files. If you're submitting a pull request to GitHub, you must always recompile.</p> <h3>Ways to compile</h3> <table class="zebra-striped"> diff --git a/lib/mixins.less b/lib/mixins.less index 47857f1faf..5b05654d50 100644 --- a/lib/mixins.less +++ b/lib/mixins.less @@ -78,12 +78,13 @@ margin-right: auto; .clearfix(); } -.columns(@columnSpan: 1) { - width: (@gridColumnWidth * @columnSpan) + (@gridGutterWidth * (@columnSpan - 1)); +.columns(@columns: 1) { + width: (@gridColumnWidth * @columns) + (@gridGutterWidth * (@columns - 1)); } -.offset(@columnOffset: 1) { - margin-left: (@gridColumnWidth * @columnOffset) + (@gridGutterWidth * (@columnOffset - 1)) + @gridGutterWidth; +.offset(@columns: 1) { + margin-left: (@gridColumnWidth * @columns) + (@gridGutterWidth * (@columns - 1)) + (@gridGutterWidth * 2); } + // Necessary grid styles for every column to make them appear next to each other horizontally .gridColumn() { display: inline; diff --git a/lib/patterns.less b/lib/patterns.less index 950ac2feb9..f1badc46d4 100644 --- a/lib/patterns.less +++ b/lib/patterns.less @@ -520,11 +520,11 @@ footer { // ------------ .page-header { - margin-bottom: @baseLineHeight - 1; - border-bottom: 1px solid #ddd; + margin-bottom: @baseLineHeight * 1.5; + border-bottom: 1px solid #eee; .box-shadow(0 1px 0 rgba(255,255,255,.5)); h1 { - margin-bottom: (@baseLineHeight / 2) - 1px; + margin-bottom: @baseLineHeight * .75; } } diff --git a/lib/responsive.less b/lib/responsive.less index 900df4c751..a1a33164fe 100644 --- a/lib/responsive.less +++ b/lib/responsive.less @@ -121,6 +121,7 @@ } +/* // LARGE DESKTOP & UP // ------------------ @@ -176,3 +177,4 @@ .offset12 { .offset(12); } } +*/ \ No newline at end of file diff --git a/lib/scaffolding.less b/lib/scaffolding.less index 01fcd9e772..f15f6853cf 100644 --- a/lib/scaffolding.less +++ b/lib/scaffolding.less @@ -85,6 +85,7 @@ a { // ----------- // To customize the grid system, bring up the variables.less file and change the column count, size, and gutter there .row { + margin-left: -@gridGutterWidth; .clearfix(); } @@ -93,10 +94,6 @@ a { [class*="span"] { .gridColumn(); } -// Kill the margin on the first column -.row > [class*="span"]:first-child { - margin-left: 0; -} // Default columns .span1 { .columns(1); } -- GitLab From 6d2e39950d98dafbb82e94f00b3c99b82d0ba1c1 Mon Sep 17 00:00:00 2001 From: Mark Otto <mark.otto@twitter.com> Date: Mon, 17 Oct 2011 00:03:52 -0700 Subject: [PATCH 036/318] updated js docs page to new 12 column layout, fix subhead jumbotron styles to match new front page --- bootstrap.css | 2 +- docs/assets/css/docs.css | 18 ++------- docs/index.html | 4 +- docs/javascript.html | 80 ++++++++++++++++++---------------------- 4 files changed, 42 insertions(+), 62 deletions(-) diff --git a/bootstrap.css b/bootstrap.css index 89d55199e5..ac242d3b81 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 Oct 16 23:04:03 PDT 2011 + * Date: Mon Oct 17 00:03:30 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). diff --git a/docs/assets/css/docs.css b/docs/assets/css/docs.css index 300eb38f55..2af7764e65 100644 --- a/docs/assets/css/docs.css +++ b/docs/assets/css/docs.css @@ -98,28 +98,16 @@ body > .navbar-fixed .brand:hover { ------------------------- */ /* supporting docs pages */ .subhead { - background-color: #767d80; - background-repeat: no-repeat; - background-image: -webkit-gradient(linear, left top, left bottom, from(#565d60), to(#767d80)); - background-image: -webkit-linear-gradient(#565d60, #767d80); - background-image: -moz-linear-gradient(#565d60, #767d80); - background-image: -o-linear-gradient(top, #565d60, #767d80); - background-image: -khtml-gradient(linear, left top, left bottom, from(#565d60), to(#767d80)); - filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#565d60', endColorstr='#767d80', GradientType=0); /* IE8 and down */ -} -.subhead .inner { - padding: 36px 0 27px; + padding-bottom: 18px; + border-bottom: 3px solid #eee; } .subhead h1, .subhead p { - text-align: left; + margin-right: 0; } .subhead h1 { font-size: 40px; } -.subhead p a { - font-weight: normal; -} /* Quick links diff --git a/docs/index.html b/docs/index.html index eeb0f4f0df..f3ef344637 100644 --- a/docs/index.html +++ b/docs/index.html @@ -30,7 +30,7 @@ <div class="navbar navbar-fixed" data-scrollspy="scrollspy"> <div class="navbar-inner"> <div class="container"> - <a class="brand" href="#">Bootstrap</a> + <a class="brand" href="./index.html">Bootstrap</a> <ul class="nav"> <li class="active"><a href="#overview">Overview</a></li> <li><a href="#about">About</a></li> @@ -1235,7 +1235,7 @@ </li> </ul> <form class="form-search navbar-search pull-left" action=""> - <input type="text" class="search-query" placeholder="Search"> + <input type="text" class="search-query span2" placeholder="Search"> </form> <ul class="nav secondary-nav"> <li class="dropdown"> diff --git a/docs/javascript.html b/docs/javascript.html index b130511c3d..da623c2f8f 100644 --- a/docs/javascript.html +++ b/docs/javascript.html @@ -11,18 +11,6 @@ <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script> <![endif]--> - <!-- Le javascript --> - <script src="http://code.jquery.com/jquery-1.6.4.min.js"></script> - <script src="assets/js/google-code-prettify/prettify.js"></script> - <script>$(function () { prettyPrint() })</script> - <script src="../js/bootstrap-modal.js"></script> - <script src="../js/bootstrap-alerts.js"></script> - <script src="../js/bootstrap-twipsy.js"></script> - <script src="../js/bootstrap-popover.js"></script> - <script src="../js/bootstrap-dropdown.js"></script> - <script src="../js/bootstrap-scrollspy.js"></script> - <script src="../js/bootstrap-tabs.js"></script> - <!-- Le styles --> <link href="../bootstrap.css" rel="stylesheet"> <link href="assets/css/docs.css" rel="stylesheet"> @@ -42,7 +30,7 @@ <div class="navbar navbar-fixed" data-scrollspy="scrollspy"> <div class="navbar-inner"> <div class="container"> - <a class="brand" href="#">Bootstrap JS</a> + <a class="brand" href="./index.html">Bootstrap</a> <ul class="nav"> <li><a href="#overview">Overview</a></li> <li><a href="#modal">Modals</a></li> @@ -57,21 +45,14 @@ </div> </div> + <div class="container"> <!-- Masthead (blueprinty thing) ================================================== --> <header class="jumbotron subhead" id="overview"> - <div class="inner"> - <div class="container"> - <h1>Javascript for Bootstrap</h1> - <p class="lead"> - Bring Bootstrap's components to life with new, custom plugins that work with <a href="http://jquery.com/" target="_blank">jQuery</a> and <a href="http://ender.no.de" target="_blank">Ender</a>. - </p> - <p><a href="./index.html">← Back to Bootstrap home</a></p> - </div><!-- /container --> - </div> + <h1>Javascript for Bootstrap</h1> + <p class="lead">Bring Bootstrap's components to life with custom plugins for <a href="http://jquery.com/" target="_blank">jQuery</a> and <a href="http://ender.no.de" target="_blank">Ender</a>.</p> </header> - <div class="container"> <!-- Modal ================================================== --> @@ -81,11 +62,11 @@ <h1>Modals <small>bootstrap-modal.js</small></h1> </div> <div class="row"> - <div class="span4 columns"> + <div class="span3 columns"> <p>Our Modal plugin is a super slim take on the traditional modal js plugin, taking special care to include only the bare functionality that we require here at twitter.</p> <a href="../js/bootstrap-modal.js" target="_blank" class="btn primary">Download</a> </div> - <div class="span12 columns"> + <div class="span9 columns"> <h3>Using bootstrap-modal</h3> <pre class="prettyprint linenums">$('#my-modal').modal(options)</pre> <h3>Options</h3> @@ -207,11 +188,11 @@ $('#my-modal').bind('hidden', function () { <h1>Dropdown <small>bootstrap-dropdown.js</small></h1> </div> <div class="row"> - <div class="span4 columns"> + <div class="span3 columns"> <p>This plugin is for adding dropdown interaction to the bootstrap topbar or tabbed navigations.</p> <a href="../js/bootstrap-dropdown.js" target="_blank" class="btn primary">Download</a> </div> - <div class="span12 columns"> + <div class="span9 columns"> <h3>Using boostrap-dropdown.js</h3> <pre class="prettyprint linenums">$('#topbar').dropdown()</pre> <h3>Markup</h3> @@ -244,7 +225,7 @@ $('#my-modal').bind('hidden', function () { <li><a href="#">Link</a></li> </ul> <form class="form-search navbar-search pull-left" action=""> - <input type="text" class="search-query" placeholder="Search"> + <input type="text" class="search-query span2" placeholder="Search"> </form> <ul class="nav secondary-nav"> <li class="dropdown"> @@ -281,11 +262,11 @@ $('#my-modal').bind('hidden', function () { <h1>ScrollSpy <small>bootstrap-scrollspy.js</small></h1> </div> <div class="row"> - <div class="span4 columns"> + <div class="span3 columns"> <p>This plugin is for adding the scrollspy (auto updating nav) interaction to the bootstrap topbar.</p> <a href="../js/bootstrap-scrollspy.js" target="_blank" class="btn primary">Download</a> </div> - <div class="span12 columns"> + <div class="span9 columns"> <h2>Using boostrap-scrollspy.js</h2> <pre class="prettyprint linenums">$('#topbar').dropdown()</pre> <h3>Markup</h3> @@ -316,11 +297,11 @@ $('#my-modal').bind('hidden', function () { <h1>Tabs <small>bootstrap-tabs.js</small></h1> </div> <div class="row"> - <div class="span4 columns"> + <div class="span3 columns"> <p>This plugin adds quick, dynamic tab and pill functionality.</p> <a href="../js/bootstrap-tabs.js" target="_blank" class="btn primary">Download</a> </div> - <div class="span12 columns"> + <div class="span9 columns"> <h3>Using boostrap-tabs.js</h3> <pre class="prettyprint linenums">$('.tabs').tabs()</pre> <h3>Markup</h3> @@ -387,11 +368,11 @@ $('#my-modal').bind('hidden', function () { <h1>Twipsy <small>bootstrap-twipsy.js</small></h1> </div> <div class="row"> - <div class="span4 columns"> + <div class="span3 columns"> <p>Based on the excellent jQuery.tipsy plugin written by Jason Frame; twipsy is an updated version, which doesn't rely on images, uses css3 for animations, and data-attributes for title storage!</p> <a href="../js/bootstrap-twipsy.js" target="_blank" class="btn primary">Download</a> </div> - <div class="span12 columns"> + <div class="span9 columns"> <h3>Using bootstrap-twipsy.js</h3> <pre class="prettyprint linenums">$('#example').twipsy(options)</pre> <h3>Options</h3> @@ -504,11 +485,11 @@ $('#my-modal').bind('hidden', function () { <h1>Popovers <small>bootstrap-popover.js</small></h1> </div> <div class="row"> - <div class="span4 columns"> + <div class="span3 columns"> <p>The popover plugin provides a simple interface for adding popovers to your application. It extends the <a href="#twipsy">boostrap-twipsy.js</a> plugin, so be sure to grab that file as well when including popovers in your project!</p> <a href="../js/bootstrap-popover.js" target="_blank" class="btn primary">Download</a> </div> - <div class="span12 columns"> + <div class="span9 columns"> <h3>Using boostrap-popover.js</h3> <pre class="prettyprint linenums">$('#example').popover(options)</pre> <h3>Options</h3> @@ -625,11 +606,11 @@ $('#my-modal').bind('hidden', function () { <h1>Alerts <small>bootstrap-alerts.js</small></h1> </div> <div class="row"> - <div class="span4 columns"> + <div class="span3 columns"> <p>The alert plugin is a super tiny class for adding close functionality to alerts.</p> <a href="../js/bootstrap-alerts.js" target="_blank" class="btn primary">Download</a> </div> - <div class="span12 columns"> + <div class="span9 columns"> <h3>Using bootstrap-alerts.js</h3> <pre class="prettyprint linenums">$(".alert-message").alert()</pre> <h3>Markup</h3> @@ -657,17 +638,28 @@ $('#my-modal').bind('hidden', function () { </section> - </div><!-- /container --> - - <footer class="footer"> - <div class="container"> + <footer class="footer"> <p class="pull-right"><a href="#">Back to top</a></p> <p> Designed and built with all the love in the world <a href="http://twitter.com/twitter" target="_blank">@twitter</a> by <a href="http://twitter.com/mdo" target="_blank">@mdo</a> and <a href="http://twitter.com/fat" target="_blank">@fat</a>.<br /> Licensed under the <a href="http://www.apache.org/licenses/LICENSE-2.0" target="_blank">Apache License v2.0</a>. </p> - </div> - </footer> + </footer> + + </div><!-- /container --> + + + <!-- Le javascript --> + <script src="http://code.jquery.com/jquery-1.6.4.min.js"></script> + <script src="assets/js/google-code-prettify/prettify.js"></script> + <script>$(function () { prettyPrint() })</script> + <script src="../js/bootstrap-modal.js"></script> + <script src="../js/bootstrap-alerts.js"></script> + <script src="../js/bootstrap-twipsy.js"></script> + <script src="../js/bootstrap-popover.js"></script> + <script src="../js/bootstrap-dropdown.js"></script> + <script src="../js/bootstrap-scrollspy.js"></script> + <script src="../js/bootstrap-tabs.js"></script> </body> </html> -- GitLab From f48baceeda7dc18e1fdf78f89c55b3de40a3357e Mon Sep 17 00:00:00 2001 From: Mark Otto <mark.otto@twitter.com> Date: Mon, 17 Oct 2011 12:45:09 -0700 Subject: [PATCH 037/318] remove bottom margin from h1 --- bootstrap.css | 3 +-- bootstrap.min.css | 2 +- lib/type.less | 1 - 3 files changed, 2 insertions(+), 4 deletions(-) diff --git a/bootstrap.css b/bootstrap.css index ac242d3b81..3731eaf0ba 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: Mon Oct 17 00:03:30 PDT 2011 + * Date: Mon Oct 17 12:44:52 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). @@ -377,7 +377,6 @@ h6 small { color: #bfbfbf; } h1 { - margin-bottom: 18px; font-size: 30px; line-height: 36px; } diff --git a/bootstrap.min.css b/bootstrap.min.css index 31d1699bed..4fca75703e 100644 --- a/bootstrap.min.css +++ b/bootstrap.min.css @@ -64,7 +64,7 @@ a{color:#0069d6;text-decoration:none;line-height:inherit;font-weight:inherit;}a: .offset11{margin-left:900px;} p{font-family:"Helvetica Neue",Helvetica,Arial,sans-serif;font-size:13px;line-height:18px;margin-bottom:9px;}p small{font-size:11px;color:#bfbfbf;} h1,h2,h3,h4,h5,h6{font-weight:bold;color:#404040;}h1 small,h2 small,h3 small,h4 small,h5 small,h6 small{color:#bfbfbf;} -h1{margin-bottom:18px;font-size:30px;line-height:36px;}h1 small{font-size:18px;} +h1{font-size:30px;line-height:36px;}h1 small{font-size:18px;} h2{font-size:24px;line-height:36px;}h2 small{font-size:14px;} h3{line-height:27px;font-size:18px;}h3 small{font-size:14px;} h4{font-size:16px;line-height:36px;}h4 small{font-size:12px;} diff --git a/lib/type.less b/lib/type.less index c746a58af8..28d893fb9e 100644 --- a/lib/type.less +++ b/lib/type.less @@ -29,7 +29,6 @@ h1, h2, h3, h4, h5, h6 { } } h1 { - margin-bottom: @baseLineHeight; font-size: 30px; line-height: @baseLineHeight * 2; small { -- GitLab From d035fa731ab6b846c98b2f2b6f5e82c1b11c6791 Mon Sep 17 00:00:00 2001 From: Mark Otto <mark.otto@twitter.com> Date: Mon, 17 Oct 2011 12:59:03 -0700 Subject: [PATCH 038/318] update all code elements in docs --- docs/index.html | 14 +++++++------- 1 file changed, 7 insertions(+), 7 deletions(-) diff --git a/docs/index.html b/docs/index.html index f3ef344637..ab33ea23cf 100644 --- a/docs/index.html +++ b/docs/index.html @@ -411,7 +411,7 @@ <div class="span4"> <h2>Headings & copy</h2> <p>A standard typographic hierarchy for structuring your webpages.</p> - <p>The entire typographic grid is based on two Less variables in our preboot.less file: <code>@basefont</code> and <code>@baseline</code>. The first is the base font-size used throughout and the second is the base line-height.</p> + <p>The entire typographic grid is based on two Less variables in our preboot.less file: <code>@baseFontSize</code> and <code>@baseLineHeight</code>. The first is the base font-size used throughout and the second is the base line-height.</p> <p>We use those variables, and some math, to create the margins, paddings, and line-heights of all our type and more.</p> </div> <div class="span4"> @@ -467,7 +467,7 @@ </div> </div> - <p><strong>Note:</strong> Each line in an <code><address></code> must end with a line-break (<code><br /></code>) or be wrapped in a block-level tag (e.g., <code><p></code>) to properly structure the content.</p> + <p><strong>Note:</strong> Each line in an <code><address></code> must end with a line-break (<code><br></code>) or be wrapped in a block-level tag (e.g., <code><p></code>) to properly structure the content.</p> <h3>Abbreviations</h3> <p>For abbreviations and acronyms, use the <code><abbr></code> tag (<code><acronym></code> is deprecated in <abbr title="HyperText Markup Langugage 5">HTML5</abbr>). Put the shorthand form within the tag and set a title for the complete name.</p> </div> @@ -522,7 +522,7 @@ </ul> </div> <div class="span3"> - <h4>Unstyled <code><ul.unstyled></code></h4> + <h4>Unstyled <code><.unstyled></code></h4> <ul class="unstyled"> <li>Lorem ipsum dolor sit amet</li> <li>Consectetur adipiscing elit</li> @@ -555,7 +555,7 @@ </ol> </div> <div class="span3"> - <h4>Description <code>dl</code></h4> + <h4>Description <code><dl></code></h4> <dl> <dt>Description lists</dt> <dd>A description list is perfect for defining terms.</dd> @@ -592,7 +592,7 @@ <tbody> <tr> <td><code><code></code></td> - <td>In a line of text like this, your wrapped code will look like this <code>>html<</code> element.</td> + <td>In a line of text like this, your wrapped code will look like this <code><html></code> element.</td> </tr> <tr> <td><code><pre></code></td> @@ -1263,10 +1263,10 @@ </div> <div class="span4"> <h4>Dropdowns included</h4> - <p>As part of the main navigation, we’ve included the ability for you to add dropdowns to your nav. Check out the secondary nav above (right aligned) to see how it’s done. Dropdowns <code>li</code> tags also support <code>.active</code> for showing current page selection.</p> + <p>As part of the main navigation, we’ve included the ability for you to add dropdowns to your nav. Check out the secondary nav above (right aligned) to see how it’s done. Dropdowns <code><li></code> tags also support <code>.active</code> for showing current page selection.</p> </div> </div> - <p><strong>Note:</strong> When using the topbar on any page, be sure to account for the overlap it causes by adding <code>padding-top: 40px;</code> to your <code>body</code>.</p> + <p><strong>Note:</strong> When using the topbar on any page, be sure to account for the overlap it causes by adding <code>padding-top: 40px;</code> to your <code><body></code>.</p> <br> -- GitLab From 27cbe7f63a13fad987dc2547ef5b6f526ceb268c Mon Sep 17 00:00:00 2001 From: Mark Otto <mark.otto@twitter.com> Date: Mon, 17 Oct 2011 14:17:29 -0700 Subject: [PATCH 039/318] add abbr styles, overhaul type docs section to remove lots of verbose text and put emphasis on tables and more scannable content --- bootstrap.css | 11 +- bootstrap.min.css | 5 +- docs/assets/css/docs.css | 5 + docs/index.html | 349 ++++++++++++++++++++------------------- lib/type.less | 11 +- 5 files changed, 210 insertions(+), 171 deletions(-) diff --git a/bootstrap.css b/bootstrap.css index 3731eaf0ba..f3ff894d1a 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: Mon Oct 17 12:44:52 PDT 2011 + * Date: Mon Oct 17 14:16:58 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). @@ -367,6 +367,7 @@ h5, h6 { font-weight: bold; color: #404040; + text-rendering: optimizelegibility; } h1 small, h2 small, @@ -388,7 +389,7 @@ h2 { line-height: 36px; } h2 small { - font-size: 14px; + font-size: 18px; } h3 { line-height: 27px; @@ -466,6 +467,12 @@ em { .muted { color: #bfbfbf; } +abbr { + font-size: 90%; + text-transform: uppercase; + border-bottom: 1px dotted #ddd; + cursor: help; +} blockquote { margin-bottom: 18px; border-left: 5px solid #eee; diff --git a/bootstrap.min.css b/bootstrap.min.css index 4fca75703e..86b68e44a7 100644 --- a/bootstrap.min.css +++ b/bootstrap.min.css @@ -63,9 +63,9 @@ a{color:#0069d6;text-decoration:none;line-height:inherit;font-weight:inherit;}a: .offset10{margin-left:820px;} .offset11{margin-left:900px;} p{font-family:"Helvetica Neue",Helvetica,Arial,sans-serif;font-size:13px;line-height:18px;margin-bottom:9px;}p small{font-size:11px;color:#bfbfbf;} -h1,h2,h3,h4,h5,h6{font-weight:bold;color:#404040;}h1 small,h2 small,h3 small,h4 small,h5 small,h6 small{color:#bfbfbf;} +h1,h2,h3,h4,h5,h6{font-weight:bold;color:#404040;text-rendering:optimizelegibility;}h1 small,h2 small,h3 small,h4 small,h5 small,h6 small{color:#bfbfbf;} h1{font-size:30px;line-height:36px;}h1 small{font-size:18px;} -h2{font-size:24px;line-height:36px;}h2 small{font-size:14px;} +h2{font-size:24px;line-height:36px;}h2 small{font-size:18px;} h3{line-height:27px;font-size:18px;}h3 small{font-size:14px;} h4{font-size:16px;line-height:36px;}h4 small{font-size:12px;} h5{font-size:14px;line-height:18px;} @@ -83,6 +83,7 @@ hr{margin:20px 0 19px;border:0;border-bottom:1px solid #eee;} strong{font-style:inherit;font-weight:bold;} em{font-style:italic;font-weight:inherit;line-height:inherit;} .muted{color:#bfbfbf;} +abbr{font-size:90%;text-transform:uppercase;border-bottom:1px dotted #ddd;cursor:help;} blockquote{margin-bottom:18px;border-left:5px solid #eee;padding-left:15px;}blockquote p{font-size:14px;font-weight:300;line-height:18px;margin-bottom:0;} blockquote small{display:block;font-size:12px;font-weight:300;line-height:18px;color:#bfbfbf;}blockquote small:before{content:'\2014 \00A0';} address{display:block;line-height:18px;margin-bottom:18px;} diff --git a/docs/assets/css/docs.css b/docs/assets/css/docs.css index 2af7764e65..bbf71ab778 100644 --- a/docs/assets/css/docs.css +++ b/docs/assets/css/docs.css @@ -307,6 +307,11 @@ pre.prettyprint { max-width: 100%; } +/* Make tables spaced out a bit more */ +h2 + table { + margin-top: 10px; +} + /* Responsive Docs -------------------------------------------------- */ @media (max-width: 480px) { diff --git a/docs/index.html b/docs/index.html index ab33ea23cf..2e0036bb09 100644 --- a/docs/index.html +++ b/docs/index.html @@ -406,90 +406,130 @@ <h1>Typography <small>Headings, paragraphs, lists, and other inline type elements</small></h1> </div> + <h2>Headings & body copy</h2> + <!-- Headings & Paragraph Copy --> <div class="row"> <div class="span4"> - <h2>Headings & copy</h2> - <p>A standard typographic hierarchy for structuring your webpages.</p> + <h3>Typographic scale</h3> <p>The entire typographic grid is based on two Less variables in our preboot.less file: <code>@baseFontSize</code> and <code>@baseLineHeight</code>. The first is the base font-size used throughout and the second is the base line-height.</p> <p>We use those variables, and some math, to create the margins, paddings, and line-heights of all our type and more.</p> </div> <div class="span4"> - <h1>h1. Heading 1</h1> - <h2>h2. Heading 2</h2> - <h3>h3. Heading 3</h3> - <h4>h4. Heading 4</h4> - <h5>h5. Heading 5</h5> - <h6>h6. Heading 6</h6> + <h3>Example body text</h3> + <p>Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p> + <p>Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Donec sed odio dui.</p> </div> <div class="span4"> - <h3>Example paragraph</h3> - <p>Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p> - <h1>Example heading <small>Has sub-heading…</small></h1> + <div class="well"> + <h1>h1. Heading 1</h1> + <h2>h2. Heading 2</h2> + <h3>h3. Heading 3</h3> + <h4>h4. Heading 4</h4> + <h5>h5. Heading 5</h5> + <h6>h6. Heading 6</h6> + </div> </div> </div> <!-- Misc Elements --> + <h2>Emphasis, address, and abbreviation</h2> + <table class="zebra-striped"> + <thead> + <tr> + <th>Element</th> + <th>Description</th> + <th>Usage</th> + </tr> + </thead> + <tbody> + <tr> + <td> + <code><strong></code> + </td> + <td> + For emphasizing a snippet of text with <strong>important</strong> + </td> + <td> + <span class="muted">None</span> + </td> + </tr> + <tr> + <td> + <code><em></code> + </td> + <td> + For emphasizing a snippet of text with <em>stress</em> + </td> + <td> + <span class="muted">None</span> + </td> + </tr> + <tr> + <td> + <code><abbr></code> + </td> + <td> + Wraps abbreviations and acronyms to show the expanded version on hover + </td> + <td> + Include optional <code>title</code> for expanded text + </td> + </tr> + <tr> + <td> + <code><address></code> + </td> + <td> + For contact information for its nearest ancestor or the entire body of work + </td> + <td> + Preserve formatting by ending all lines with <code><br></code> + </td> + </tr> + </tbody> + </table> + <div class="row"> - <div class="span3"> - <h2>Misc. elements</h2> - <p>Using emphasis, addresses, & abbreviations</p> - <p> - <code><strong></code> - <code><em></code> - <code><address></code> - <code><abbr></code> - </p> - </div> - <div class="span9"> - <h3>When to use</h3> - <p>Emphasis tags (<code><strong></code> and <code><em></code>) should be used to indicate additional importance or emphasis of a word or phrase relative to its surrounding copy. Use <code><strong></code> for importance and <code><em></code> for <em>stress</em> emphasis.</p> - <h3>Emphasis in a paragraph</h3> + <div class="span4"> + <h3>Using emphasis</h3> <p><a href="#">Fusce dapibus</a>, <strong>tellus ac cursus commodo</strong>, <em>tortor mauris condimentum nibh</em>, ut fermentum massa justo sit amet risus. Maecenas faucibus mollis interdum. Nulla vitae elit libero, a pharetra augue.</p> - <p><strong>Note:</strong> It's still okay to use <code><b></code> and <code><i></code> tags in HTML5 and they don't have to be styled bold and italic, respectively (although if there is a more semantic element, use it). <code><b></code> is meant to highlight words or phrases without conveying additional importance, while <code><i></code> is mostly for voice, technical terms, etc.</p> - <h3>Addresses</h3> - <p>The <code><address></code> element is used for contact information for its nearest ancestor, or the entire body of work. Here are two examples of how it could be used:</p> - - <div class="row"> - <div class="span4"> - <address> - <strong>Twitter, Inc.</strong><br> - 795 Folsom Ave, Suite 600<br> - San Francisco, CA 94107<br> - <abbr title="Phone">P:</abbr> (123) 456-7890 - </address> - </div> - <div class="span4"> - <address> - <strong>Full Name</strong><br> - <a mailto="">first.last@gmail.com</a> - </address> - </div> - </div> - - <p><strong>Note:</strong> Each line in an <code><address></code> must end with a line-break (<code><br></code>) or be wrapped in a block-level tag (e.g., <code><p></code>) to properly structure the content.</p> - <h3>Abbreviations</h3> - <p>For abbreviations and acronyms, use the <code><abbr></code> tag (<code><acronym></code> is deprecated in <abbr title="HyperText Markup Langugage 5">HTML5</abbr>). Put the shorthand form within the tag and set a title for the complete name.</p> + <p><strong>Note:</strong> Feel free to use <code><b></code> and <code><i></code> in HTML5, but their usage has changed a bit. <code><b></code> is meant to highlight words or phrases without conveying additional importance while <code><i></code> is mostly for voice, technical terms, etc.</p> </div> - </div><!-- /row --> + <div class="span4"> + <h3>Example addresses</h3> + <p>Here are two examples of how the <code><address></code> tag can be used:</p> + <address> + <strong>Twitter, Inc.</strong><br> + 795 Folsom Ave, Suite 600<br> + San Francisco, CA 94107<br> + <abbr title="Phone">P:</abbr> (123) 456-7890 + </address> + <address> + <strong>Full Name</strong><br> + <a mailto="#">first.last@gmail.com</a> + </address> + </div> + <div class="span4"> + <h3>Example abbreviations</h3> + <p>Abbreviations are styled with uppercase text and a light dotted bottom border. They also have a help cursor on hover so users have extra indication something will be shown on hover.</p> + <p><abbr title="HyperText Markup Language">HTML</abbr> is the best thing since sliced bread.</p> + <p>An abbreviation of the word attribute is <abbr title="attribute">attr</abbr>.</p> + </div> + </div> + <!-- Blockquotes --> + <h2>Blockquotes</h2> <div class="row"> - <div class="span3"> - <h2>Blockquotes</h2> - <p> - <code><blockquote></code> - <code><p></code> - <code><small></code> - </p> - </div> - <div class="span9"> - <h3>How to quote</h3> + <div class="span5"> <p>To include a blockquote, wrap <code><blockquote></code> around <code><p></code> and <code><small></code> tags. Use the <code><small></code> element to cite your source and you'll get an em dash <code>&mdash;</code> before it.</p> <blockquote> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante venenatis dapibus posuere velit aliquet.</p> <small>Dr. Julius Hibbert</small> </blockquote> + </div> + <div class="span7"> <pre class="prettyprint linenums"> <blockquote> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante venenatis dapibus posuere velit aliquet.</p> @@ -497,8 +537,9 @@ </blockquote> </pre> </div> - </div><!-- /row --> + </div> + <!-- Lists --> <h2>Lists</h2> <div class="row"> <div class="span3"> @@ -522,7 +563,7 @@ </ul> </div> <div class="span3"> - <h4>Unstyled <code><.unstyled></code></h4> + <h4>Unstyled <code><ul.unstyled></code></h4> <ul class="unstyled"> <li>Lorem ipsum dolor sit amet</li> <li>Consectetur adipiscing elit</li> @@ -570,120 +611,96 @@ <!-- Code --> - <div class="row"> - <div class="span3"> - <h2>Code</h2> - <p> - <code><code></code> - <code><pre></code> - </p> - <p>Pimp your code in style with two simple tags. For even more awesomeness through javascript, drop in Google's code prettify library and you're set.</p> - </div> - <div class="span9"> - <h3>Presenting code</h3> - <p>Code, blocks of or just snippets inline, can be displayed with style just by wrapping in the right tag. For blocks of code spanning multiple lines, use the <code><pre></code> element. For inline code, use the <code><code></code> element.</p> - <table class="zebra-striped"> - <thead> - <tr> - <th style="width: 190px;">Element</th> - <th>Result</th> - </tr> - </thead> - <tbody> - <tr> - <td><code><code></code></td> - <td>In a line of text like this, your wrapped code will look like this <code><html></code> element.</td> - </tr> - <tr> - <td><code><pre></code></td> - <td> + + <h2>Code <small>Inline and block</small></h2> + <table class="zebra-striped"> + <thead> + <tr> + <th style="width: 190px;">Element</th> + <th>Result</th> + </tr> + </thead> + <tbody> + <tr> + <td><code><code></code></td> + <td>In a line of text like this, your wrapped code will look like this <code><html></code> element.</td> + </tr> + <tr> + <td><code><pre></code></td> + <td> <pre><div> <h1>Heading</h1> <p>Something right here...</p> </div></pre> - <p><strong>Note:</strong> Be sure to keep code within <code>pre</code> tags as close to the left as possible; it will render all tabs.</p> - </td> - </tr> - <tr> - <td><code><pre class="prettyprint"></code></td> - <td> - <p>Using the google-code-prettify library, you're blocks of code get a slightly different visual style and automatic syntax highlighting.</p> + <p><strong>Note:</strong> Be sure to keep code within <code>pre</code> tags as close to the left as possible; it will render all tabs.</p> + </td> + </tr> + <tr> + <td><code><pre class="prettyprint"></code></td> + <td> + <p>Using the google-code-prettify library, you're blocks of code get a slightly different visual style and automatic syntax highlighting.</p> <pre class="prettyprint"><div> <h1>Heading</h1> <p>Something right here...</p> </div></pre> - <p><a href="http://code.google.com/p/google-code-prettify/">Download google-code-prettify</a> and view the readme for <a href="http://google-code-prettify.googlecode.com/svn/trunk/README.html">how to use</a>.</p> - </td> - </tr> - </tbody> - </table> - </div> - </div><!-- /row --> + <p><a href="http://code.google.com/p/google-code-prettify/">Download google-code-prettify</a> and view the readme for <a href="http://google-code-prettify.googlecode.com/svn/trunk/README.html">how to use</a>.</p> + </td> + </tr> + </tbody> + </table> <!-- Labels --> - <div class="row"> - <div class="span3"> - <h2>Inline labels</h2> - <p> - <code><span class="label"></code> - </p> - <p>Call attention to or flag any phrase in your body text.</p> - </div> - <div class="span9"> - <h3>Label anything</h3> - <p>Ever needed one of those fancy <span class="label success">New!</span> or <span class="label important">Important</span> flags when writing code? Well, now you have them. Here's what's included by default:</p> - <table class="zebra-striped"> - <thead> - <tr> - <th style="width: 50%;">Label</th> - <th>Result</th> - </tr> - </thead> - <tbody> - <tr> - <td> - <code><span class="label">Default</span></code> - </td> - <td> - <span class="label">Default</span> - </td> - </tr> - <tr> - <td> - <code><span class="label success">New</span></code> - </td> - <td> - <span class="label success">New</span> - </td> - </tr> - <tr> - <td> - <code><span class="label warning">Warning</span></code> - </td> - <td> - <span class="label warning">Warning</span> - </td> - </tr> - <tr> - <td> - <code><span class="label important">Important</span></code> - </td> - <td> - <span class="label important">Important</span> - </td> - </tr> - <tr> - <td> - <code><span class="label notice">Notice</span></code> - </td> - <td> - <span class="label notice">Notice</span> - </td> - </tr> - </tbody> - </table> - </div> - </div><!-- /row --> + <h2>Inline labels <small>for special attention</small></h2> + <table class="zebra-striped"> + <thead> + <tr> + <th style="width: 190px;">Labels</th> + <th>Markup</th> + </tr> + </thead> + <tbody> + <tr> + <td> + <span class="label">Default</span> + </td> + <td> + <code><span class="label">Default</span></code> + </td> + </tr> + <tr> + <td> + <span class="label success">New</span> + </td> + <td> + <code><span class="label success">New</span></code> + </td> + </tr> + <tr> + <td> + <span class="label warning">Warning</span> + </td> + <td> + <code><span class="label warning">Warning</span></code> + </td> + </tr> + <tr> + <td> + <span class="label important">Important</span> + </td> + <td> + <code><span class="label important">Important</span></code> + </td> + </tr> + <tr> + <td> + <span class="label notice">Notice</span> + </td> + <td> + <code><span class="label notice">Notice</span></code> + </td> + </tr> + </tbody> + </table> </section> diff --git a/lib/type.less b/lib/type.less index 28d893fb9e..4978dd7869 100644 --- a/lib/type.less +++ b/lib/type.less @@ -24,6 +24,7 @@ p { h1, h2, h3, h4, h5, h6 { font-weight: bold; color: @grayDark; + text-rendering: optimizelegibility; small { color: @grayLight; } @@ -39,7 +40,7 @@ h2 { font-size: 24px; line-height: @baseLineHeight * 2; small { - font-size: 14px; + font-size: 18px; } } h3 { @@ -134,6 +135,14 @@ em { color: @grayLight; } +// Abbreviations and acronyms +abbr { + font-size: 90%; + text-transform: uppercase; + border-bottom: 1px dotted #ddd; + cursor: help; +} + // Blockquotes blockquote { margin-bottom: @baseLineHeight; -- GitLab From b91d210a3cdb29d022f20646ed61e663ceea18dd Mon Sep 17 00:00:00 2001 From: Mark Otto <mark.otto@twitter.com> Date: Mon, 17 Oct 2011 14:43:43 -0700 Subject: [PATCH 040/318] overhauled tables section of docs to minize copy and emphasize code --- docs/index.html | 279 ++++++++++++++++++++++++++++++------------------ 1 file changed, 178 insertions(+), 101 deletions(-) diff --git a/docs/index.html b/docs/index.html index 2e0036bb09..68cdd4a2cf 100644 --- a/docs/index.html +++ b/docs/index.html @@ -638,10 +638,14 @@ <tr> <td><code><pre class="prettyprint"></code></td> <td> - <p>Using the google-code-prettify library, you're blocks of code get a slightly different visual style and automatic syntax highlighting.</p> + <p>Using the google-code-prettify library, you're blocks of code get a slightly different visual style and automatic syntax highlighting. You can also add an additional class to add line numbers.</p> <pre class="prettyprint"><div> <h1>Heading</h1> <p>Something right here...</p> +</div></pre> +<pre class="prettyprint linenums"><div> + <h1>Heading</h1> + <p>Something right here...</p> </div></pre> <p><a href="http://code.google.com/p/google-code-prettify/">Download google-code-prettify</a> and view the readme for <a href="http://google-code-prettify.googlecode.com/svn/trunk/README.html">how to use</a>.</p> </td> @@ -712,130 +716,204 @@ <div class="page-header"> <h1>Tables <small>For, you guessed it, tabular data</small></h1> </div> - <!-- Table structure --> + + <h2>Table markup</h2> <div class="row"> - <div class="span3"> - <h2>Building tables</h2> - <p> - <code><table></code> - <code><thead></code> - <code><tbody></code> - <code><tr></code> - <code><th></code> - <code><td></code> - <code><colspan></code> - <code><caption></code> - </p> - <p>Tables are great—for a lot of things. Great tables, however, need a bit of markup love to be useful, scalable, and readable (at the code level). Here are a few tips to help.</p> - <p>Always wrap your column headers in a <code><thead></code> such that hierarchy is <code><thead></code> > <code><tr></code> > <code><th></code>.</p> - <p>Similar to the column headers, all your table’s body content should be wrapped in a <code><tbody></code> so your hierarchy is <code><tbody></code> > <code><tr></code> > <code><td></code>.</p> - </div> - <div class="span9"> - <h3>Example: Default table styles</h3> - <p>All tables will be automatically styled with only the essential borders to ensure readability and maintain structure. No need to add extra classes or attributes.</p> - <table> + <div class="span8"> + <table class="zebra-striped"> <thead> <tr> - <th>#</th> - <th>First Name</th> - <th>Last Name</th> - <th>Language</th> + <th>Tag</th> + <th>Description</th> </tr> </thead> <tbody> <tr> - <td>1</td> - <td>Some</td> - <td>One</td> - <td>English</td> + <td> + <code><table></code> + </td> + <td> + Wrapping element for displaying data in a tabular format + </td> </tr> <tr> - <td>2</td> - <td>Joe</td> - <td>Sixpack</td> - <td>English</td> + <td> + <code><thead></code> + </td> + <td> + Container element for table header rows (<code><tr></code>) to label table columns + </td> </tr> <tr> - <td>3</td> - <td>Stu</td> - <td>Dent</td> - <td>Code</td> + <td> + <code><tbody></code> + </td> + <td> + Container element for table rows (<code><tr></code>) in the body of the table + </td> </tr> - </tbody> - </table> -<pre class="prettyprint linenums"> -<table> - ... -</table></pre> - <h3>Example: Zebra-striped</h3> - <p>Get a little fancy with your tables by adding zebra-striping—just add the <code>.zebra-striped</code> class.</p> - <table class="zebra-striped"> - <thead> <tr> - <th>#</th> - <th>First Name</th> - <th>Last Name</th> - <th>Language</th> + <td> + <code><tr></code> + </td> + <td> + Container element for a set of table cells (<code><td></code> or <code><th></code>) that appears on a single row + </td> </tr> - </thead> - <tbody> <tr> - <td>1</td> - <td>Some</td> - <td>One</td> - <td>English</td> + <td> + <code><td></code> + </td> + <td> + Default table cell + </td> </tr> <tr> - <td>2</td> - <td>Joe</td> - <td>Sixpack</td> - <td>English</td> + <td> + <code><th></code> + </td> + <td> + Special table cell for column (or row, depending on scope and placement) labels<br> + Must be used within a <code><thead></code> + </td> </tr> <tr> - <td>3</td> - <td>Stu</td> - <td>Dent</td> - <td>Code</td> + <td> + <code><caption></code> + </td> + <td> + Description or summary of what the table holds, especially useful for screen readers + </td> </tr> </tbody> </table> - <p><strong>Note:</strong> Zebra-striping is a progressive enhancement not available for older browsers like IE8 and below.</p> + </div> + <div class="span4"> +<pre class="prettyprint linenums"> +<table> + <thead> + <tr> + <th>...</th> + <th>...</th> + </tr> + </thead> + <tbody> + <tr> + <td>...</td> + <td>...</td> + </tr> + </tbody> +</table> +</pre> + </div> + </div> + + <h2>Example tables</h2> + <h3>1. Default table styles</h3> + <p>All tables will be automatically styled with only the essential borders to ensure readability and maintain structure. No need to add extra classes or attributes.</p> + <table> + <thead> + <tr> + <th>#</th> + <th>First Name</th> + <th>Last Name</th> + <th>Language</th> + </tr> + </thead> + <tbody> + <tr> + <td>1</td> + <td>Some</td> + <td>One</td> + <td>English</td> + </tr> + <tr> + <td>2</td> + <td>Joe</td> + <td>Sixpack</td> + <td>English</td> + </tr> + <tr> + <td>3</td> + <td>Stu</td> + <td>Dent</td> + <td>Code</td> + </tr> + </tbody> + </table> +<pre class="prettyprint linenums"> +<table> + ... +</table></pre> + <h3>2. Zebra-striped</h3> + <p>Get a little fancy with your tables by adding zebra-striping—just add the <code>.zebra-striped</code> class.</p> + <table class="zebra-striped"> + <thead> + <tr> + <th>#</th> + <th>First Name</th> + <th>Last Name</th> + <th>Language</th> + </tr> + </thead> + <tbody> + <tr> + <td>1</td> + <td>Some</td> + <td>One</td> + <td>English</td> + </tr> + <tr> + <td>2</td> + <td>Joe</td> + <td>Sixpack</td> + <td>English</td> + </tr> + <tr> + <td>3</td> + <td>Stu</td> + <td>Dent</td> + <td>Code</td> + </tr> + </tbody> + </table> + <p><strong>Note:</strong> Zebra-striping is a progressive enhancement not available for older browsers like IE8 and below.</p> <pre class="prettyprint linenums"> <table class="zebra-striped"> ... </table></pre> - <h3>Example: Zebra-striped w/ TableSorter.js</h3> - <p>Taking the previous example, we improve the usefulness of our tables by providing sorting functionality via <a href="http://jquery.com">jQuery</a> and the <a href="http://tablesorter.com/docs/">Tablesorter</a> plugin. <strong>Click any column’s header to change the sort.</strong></p> - <table class="zebra-striped" id="sortTableExample"> - <thead> - <tr> - <th>#</th> - <th class="yellow">First Name</th> - <th class="blue">Last Name</th> - <th class="green">Language</th> - </tr> - </thead> - <tbody> - <tr> - <td>1</td> - <td>Your</td> - <td>One</td> - <td>English</td> - </tr> - <tr> - <td>2</td> - <td>Joe</td> - <td>Sixpack</td> - <td>English</td> - </tr> - <tr> - <td>3</td> - <td>Stu</td> - <td>Dent</td> - <td>Code</td> - </tr> - </tbody> - </table> + <h3>3. Zebra-striped w/ TableSorter.js</h3> + <p>Taking the previous example, we improve the usefulness of our tables by providing sorting functionality via <a href="http://jquery.com">jQuery</a> and the <a href="http://tablesorter.com/docs/">Tablesorter</a> plugin. <strong>Click any column’s header to change the sort.</strong></p> + <table class="zebra-striped" id="sortTableExample"> + <thead> + <tr> + <th>#</th> + <th class="yellow">First Name</th> + <th class="blue">Last Name</th> + <th class="green">Language</th> + </tr> + </thead> + <tbody> + <tr> + <td>1</td> + <td>Your</td> + <td>One</td> + <td>English</td> + </tr> + <tr> + <td>2</td> + <td>Joe</td> + <td>Sixpack</td> + <td>English</td> + </tr> + <tr> + <td>3</td> + <td>Stu</td> + <td>Dent</td> + <td>Code</td> + </tr> + </tbody> + </table> <pre class="prettyprint linenums"> <script src="js/jquery/jquery.tablesorter.min.js"></script> <script > @@ -846,8 +924,7 @@ <table class="zebra-striped"> ... </table></pre> - </div> - </div><!-- /row --> + </section> -- GitLab From ae5c5e10635049c65d73454ca9486539bdf324d4 Mon Sep 17 00:00:00 2001 From: Mark Otto <mark.otto@twitter.com> Date: Mon, 17 Oct 2011 20:44:52 -0700 Subject: [PATCH 041/318] update docs to change topbar to navbar --- docs/index.html | 18 +++++++++--------- docs/javascript.html | 24 ++++++++++++------------ 2 files changed, 21 insertions(+), 21 deletions(-) diff --git a/docs/index.html b/docs/index.html index 68cdd4a2cf..7fe5ce1ca7 100644 --- a/docs/index.html +++ b/docs/index.html @@ -25,7 +25,7 @@ <body> - <!-- Topbar + <!-- Navbar ================================================== --> <div class="navbar navbar-fixed" data-scrollspy="scrollspy"> <div class="navbar-inner"> @@ -1308,7 +1308,7 @@ <div class="page-header"> <h1>Navigation</h1> </div> - <h2>Fixed topbar</h2> + <h2>Fixed navbar</h2> <div class="navbar navbar-static" data-dropdown="dropdown"> <div class="navbar-inner"> <div class="container"> @@ -1343,24 +1343,24 @@ </li> </ul> </div> - </div><!-- /topbar-inner --> - </div><!-- /topbar --> + </div><!-- /navbar-inner --> + </div><!-- /navbar --> <div class="row"> <div class="span4"> <h4>What is it</h4> - <p>Our topbar is a fixed bar that houses a website’s logo or name, primary navigation, and search form.</p> + <p>Our navbar is a fixed bar that houses a website’s logo or name, primary navigation, and search form.</p> </div> <div class="span4"> <h4>Customizable</h4> - <p>All elements within, and the entire topbar as well, are optional. You can choose to include a logo/name, nav, search, and a secondary nav—or any combination of that.</p> + <p>All elements within, and the entire navbar as well, are optional. You can choose to include a logo/name, nav, search, and a secondary nav—or any combination of that.</p> </div> <div class="span4"> <h4>Dropdowns included</h4> <p>As part of the main navigation, we’ve included the ability for you to add dropdowns to your nav. Check out the secondary nav above (right aligned) to see how it’s done. Dropdowns <code><li></code> tags also support <code>.active</code> for showing current page selection.</p> </div> </div> - <p><strong>Note:</strong> When using the topbar on any page, be sure to account for the overlap it causes by adding <code>padding-top: 40px;</code> to your <code><body></code>.</p> + <p><strong>Note:</strong> When using the navbar on any page, be sure to account for the overlap it causes by adding <code>padding-top: 40px;</code> to your <code><body></code>.</p> <br> @@ -1875,11 +1875,11 @@ Lorem ipsum dolar sit amet illo error <a href="#" title="below">ipsum</a> verita </tr> <tr> <td><a href="./javascript.html#dropdowns">bootstrap-dropdown.js</a></td> - <td>This plugin is for adding dropdown interaction to the bootstrap topbar or tabbed navigations.</td> + <td>This plugin is for adding dropdown interaction to the bootstrap navbar or tabbed navigations.</td> </tr> <tr> <td><a href="./javascript.html#scrollspy">bootstrap-scrollspy.js</a></td> - <td>The ScrollSpy plugin is for adding an auto updating nav based on scroll position to the bootstrap topbar.</td> + <td>The ScrollSpy plugin is for adding an auto updating nav based on scroll position to the bootstrap navbar.</td> </tr> <tr> <td><a href="./javascript.html#tabs">bootstrap-tabs.js</a></td> diff --git a/docs/javascript.html b/docs/javascript.html index da623c2f8f..68a3d0cd46 100644 --- a/docs/javascript.html +++ b/docs/javascript.html @@ -25,7 +25,7 @@ <body id="bootstrap-js"> - <!-- Topbar + <!-- Navbar ================================================== --> <div class="navbar navbar-fixed" data-scrollspy="scrollspy"> <div class="navbar-inner"> @@ -189,12 +189,12 @@ $('#my-modal').bind('hidden', function () { </div> <div class="row"> <div class="span3 columns"> - <p>This plugin is for adding dropdown interaction to the bootstrap topbar or tabbed navigations.</p> + <p>This plugin is for adding dropdown interaction to the Bootstrap navbar or tabbed navigations.</p> <a href="../js/bootstrap-dropdown.js" target="_blank" class="btn primary">Download</a> </div> <div class="span9 columns"> <h3>Using boostrap-dropdown.js</h3> - <pre class="prettyprint linenums">$('#topbar').dropdown()</pre> + <pre class="prettyprint linenums">$('#navbar').dropdown()</pre> <h3>Markup</h3> <p>To quickly add dropdown functionality to any nav element, use the <code>data-dropdown</code> attribute. Any valid bootstrap dropdown will automatically be activated.</p> <pre class="prettyprint linenums"> @@ -213,10 +213,10 @@ $('#my-modal').bind('hidden', function () { <h3>Methods</h3> <h4>$().dropdown()</h4> <p> - A programatic api for activating menus for a given topbar or tabbed navigation. + A programatic api for activating menus for a given navbar or tabbed navigation. </p> <h3>Demo</h3> - <div id="topbar-example" class="navbar navbar-static"> + <div id="navbar-example" class="navbar navbar-static"> <div class="navbar-inner"> <div class="container" style="width: auto;"> <a class="brand" href="#">Project Name</a> @@ -263,28 +263,28 @@ $('#my-modal').bind('hidden', function () { </div> <div class="row"> <div class="span3 columns"> - <p>This plugin is for adding the scrollspy (auto updating nav) interaction to the bootstrap topbar.</p> + <p>This plugin is for adding the scrollspy (auto updating nav) interaction to the bootstrap navbar.</p> <a href="../js/bootstrap-scrollspy.js" target="_blank" class="btn primary">Download</a> </div> <div class="span9 columns"> <h2>Using boostrap-scrollspy.js</h2> - <pre class="prettyprint linenums">$('#topbar').dropdown()</pre> + <pre class="prettyprint linenums">$('#navbar').dropdown()</pre> <h3>Markup</h3> - <p>To easily add scrollspy behavior to your nav, just add the <code>data-scrollspy</code> attribute to the <code>.topbar</code>. - <pre class="prettyprint linenums"><div class="topbar" data-scrollspy="scrollspy" >...</div></pre> + <p>To easily add scrollspy behavior to your nav, just add the <code>data-scrollspy</code> attribute to the <code>.navbar</code>. + <pre class="prettyprint linenums"><div class="navbar" data-scrollspy="scrollspy" >...</div></pre> <h3>Methods</h3> <h4>$().scrollspy()</h4> <p> Auto activates navigation buttons by users scroll position. </p> - <pre class="prettyprint linenums">$('body > .topbar').scrollSpy()</pre> - <p><span class="label notice">Notice</span> Topbar anchor tags must have resolvable id targets. For example, a <code><a href="#home">home</a></code> must correspond to something in the dom like <code><div id="home"></div></code>. + <pre class="prettyprint linenums">$('body > .navbar').scrollSpy()</pre> + <p><span class="label notice">Notice</span> Navbar anchor tags must have resolvable id targets. For example, a <code><a href="#home">home</a></code> must correspond to something in the dom like <code><div id="home"></div></code>. </p> <h4>.scrollspy('refresh')</h4> <p>The scrollspy caches nav buttons and section coordinates for performance. If you need to update this cache (likely if you have dynamic content) just call this refresh method. If you used the data attribute to define your scrollspy, just call refresh on the body.</p> <pre class="prettyprint linenums">$('body').scrollspy('refresh')</pre> <h3>Demo</h3> - <p>Checkout the the topbar navigation on this page.</p> + <p>Checkout the the navbar navigation on this page.</p> </div> </div> </section> -- GitLab From 369b9720c6090985c678076eebb59c080c0ed27c Mon Sep 17 00:00:00 2001 From: Mark Otto <mark.otto@twitter.com> Date: Mon, 17 Oct 2011 23:45:35 -0700 Subject: [PATCH 042/318] adding responsive stuff to docs to stub that out, updated type to make ul and ol margins match p tags --- bootstrap.css | 4 +- bootstrap.min.css | 2 +- docs/assets/css/docs.css | 17 +++- docs/assets/img/responsive-illustrations.png | Bin 0 -> 2249 bytes docs/index.html | 80 +++++++++++++++++++ lib/type.less | 2 +- 6 files changed, 100 insertions(+), 5 deletions(-) create mode 100644 docs/assets/img/responsive-illustrations.png diff --git a/bootstrap.css b/bootstrap.css index f3ff894d1a..0f6d58ae06 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: Mon Oct 17 14:16:58 PDT 2011 + * Date: Mon Oct 17 23:44:56 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). @@ -416,7 +416,7 @@ h6 { text-transform: uppercase; } ul, ol { - margin: 0 0 18px 25px; + margin: 0 0 9px 25px; } ul ul, ul ol, diff --git a/bootstrap.min.css b/bootstrap.min.css index 86b68e44a7..31912f2933 100644 --- a/bootstrap.min.css +++ b/bootstrap.min.css @@ -70,7 +70,7 @@ h3{line-height:27px;font-size:18px;}h3 small{font-size:14px;} h4{font-size:16px;line-height:36px;}h4 small{font-size:12px;} h5{font-size:14px;line-height:18px;} h6{font-size:13px;line-height:18px;color:#bfbfbf;text-transform:uppercase;} -ul,ol{margin:0 0 18px 25px;} +ul,ol{margin:0 0 9px 25px;} ul ul,ul ol,ol ol,ol ul{margin-bottom:0;} ul{list-style:disc;} ol{list-style:decimal;} diff --git a/docs/assets/css/docs.css b/docs/assets/css/docs.css index bbf71ab778..2d0b87fe21 100644 --- a/docs/assets/css/docs.css +++ b/docs/assets/css/docs.css @@ -309,7 +309,7 @@ pre.prettyprint { /* Make tables spaced out a bit more */ h2 + table { - margin-top: 10px; + margin-top: 5px; } /* Responsive Docs @@ -347,3 +347,18 @@ h2 + table { } } + + +.supported-devices { + margin-bottom: 9px; + color: #777; +} +.supported-devices strong { + display: block; + font-size: 14px; + line-height: 18px; +} +.supported-devices small { + font-size: 12px; +} + diff --git a/docs/assets/img/responsive-illustrations.png b/docs/assets/img/responsive-illustrations.png new file mode 100644 index 0000000000000000000000000000000000000000..c980da77addecefd57a8294a828fdae2370d1d2e GIT binary patch literal 2249 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 Ud-sVBh4JSif)PbO6UNW~H==`gcmMzZ literal 0 HcmV?d00001 diff --git a/docs/index.html b/docs/index.html index 7fe5ce1ca7..aafea76621 100644 --- a/docs/index.html +++ b/docs/index.html @@ -399,6 +399,86 @@ + +<!-- Responsive design +================================================== --> +<section id="responsive"> + <div class="page-header"> + <h1>Responsive design <small>Media queries for various devices and resolutions</small></h1> + </div> + <!-- Supported devices --> + <div class="row"> + <div class="span4"> + <img src="assets/img/responsive-illustrations.png" alt="Responsive devices"> + </div> + <div class="span8"> + <h2>Supported devices</h2> + <table class="supported-devices"> + <tbody> + <tr> + <td> + <strong>Under 480px</strong> + <small>Smartphones</small> + </td> + <td> + <strong>480px to 768px</strong> + <small>Portrait tablet</small> + </td> + <td> + <strong>768px to 940px</strong> + <small>Landscape tablet</small> + </td> + <td> + <strong>940px and up</strong> + <small>Default</small> + </td> + <td> + <strong>1170px and up</strong> + <small>Large screens</small> + </td> + </tr> + </tbody> + </table> + <p>With these media queries, Bootstrap provides developers with the core tools necessary to develop responsively on the web for the world's most common devices and resolutions.</p> + </div> + </div> + + <br> + + <!-- Media query code --> + <h2>Using the media queries</h2> + <div class="row"> + <div class="span4"> + <p>Bootstrap doesn't automatically include these media queries, but understanding and adding them is very easy and requires minimal setup. You have a few options for including the responsive features of Bootstrap:</p> + <ol> + <li>Use the compiled responsive version, bootstrap.reponsive.css</li> + <li>Add @import "responsive.less" and recompile Bootstrap</li> + <li>Compile responsive.less as a separate file and include that</li> + </ol> + <p><strong>Why not just include it?</strong> Truth be told, not everything needs to be responsive. Instead of encouraging developers to remove this feature, we figure it best to enable it.</p> + </div> + <div class="span8"> +<pre class="prettyprint linenums"> + // Landscape phones and down + @media (max-width: 480px) { ... } + + // Landscape phone to portrait tablet + @media (min-width: 480px) and (max-width: 768px) { ... } + + // Portrait tablet to landscape and desktop + @media (min-width: 768px) and (max-width: 940px) { ... } + + // Large desktop + @media (min-width: 1210px) { .. } +</pre> + </div> + </div> + +</section> + + + + <!-- Typography ================================================== --> <section id="typography"> diff --git a/lib/type.less b/lib/type.less index 4978dd7869..a490bf5fa1 100644 --- a/lib/type.less +++ b/lib/type.less @@ -74,7 +74,7 @@ h6 { // Unordered and Ordered lists ul, ol { - margin: 0 0 @baseLineHeight 25px; + margin: 0 0 @baseLineHeight / 2 25px; } ul ul, ul ol, -- GitLab From a5d2450e88693de5e96d9a9f3f4e82853723f764 Mon Sep 17 00:00:00 2001 From: Mark Otto <mark.otto@twitter.com> Date: Tue, 18 Oct 2011 08:11:18 -0700 Subject: [PATCH 043/318] refinement to the responsive section --- docs/assets/css/docs.css | 16 --------- docs/index.html | 70 ++++++++++++++++++++++++++-------------- 2 files changed, 46 insertions(+), 40 deletions(-) diff --git a/docs/assets/css/docs.css b/docs/assets/css/docs.css index 2d0b87fe21..c1c43b1d88 100644 --- a/docs/assets/css/docs.css +++ b/docs/assets/css/docs.css @@ -346,19 +346,3 @@ h2 + table { min-width: 748px; } } - - - -.supported-devices { - margin-bottom: 9px; - color: #777; -} -.supported-devices strong { - display: block; - font-size: 14px; - line-height: 18px; -} -.supported-devices small { - font-size: 12px; -} - diff --git a/docs/index.html b/docs/index.html index aafea76621..3908552bd0 100644 --- a/docs/index.html +++ b/docs/index.html @@ -413,33 +413,55 @@ </div> <div class="span8"> <h2>Supported devices</h2> - <table class="supported-devices"> + <p>Bootstrap supports a handful of media queries to help make your projects more appropriate on different devices and screen resolutions. Here's what's included:</p> + <table class="zebra-striped"> + <thead> + <tr> + <th>Label</th> + <th>Layout width</th> + <th>Column width</th> + <th>Gutter width</th> + </tr> + </thead> <tbody> <tr> - <td> - <strong>Under 480px</strong> - <small>Smartphones</small> - </td> - <td> - <strong>480px to 768px</strong> - <small>Portrait tablet</small> - </td> - <td> - <strong>768px to 940px</strong> - <small>Landscape tablet</small> - </td> - <td> - <strong>940px and up</strong> - <small>Default</small> - </td> - <td> - <strong>1170px and up</strong> - <small>Large screens</small> - </td> + <td>Smartphones</td> + <td>480px and below</td> + <td class="muted" colspan="2">Fluid columns, no fixed widths</td> + </tr> + <tr> + <td>Portrait tablets</td> + <td>480px to 768px</td> + <td class="muted" colspan="2">Fluid columns, no fixed widths</td> + </tr> + <tr> + <td>Landscape tablets</td> + <td>768px to 940px</td> + <td>44px</td> + <td>20px</td> + </tr> + <tr> + <td>Default</td> + <td>940px and up</td> + <td>60px</td> + <td>20px</td> + </tr> + <tr> + <td>Large display</td> + <td>1210px and up</td> + <td>70px</td> + <td>30px</td> </tr> </tbody> </table> - <p>With these media queries, Bootstrap provides developers with the core tools necessary to develop responsively on the web for the world's most common devices and resolutions.</p> + + <h3>What they do</h3> + <p>Media queries allow for custom CSS based on a number of conditions—ratios, widths, display type, etc—but usually focuses around <code>min-width</code> and <code>max-width</code>.</p> + <ul> + <li>Modify the width of column in our grid</li> + <li>Stack elements instead of float wherever necessary</li> + <li>Resize headings and text to be more appropriate for devices</li> + </ul> </div> </div> @@ -448,7 +470,7 @@ <!-- Media query code --> <h2>Using the media queries</h2> <div class="row"> - <div class="span4"> + <div class="span5"> <p>Bootstrap doesn't automatically include these media queries, but understanding and adding them is very easy and requires minimal setup. You have a few options for including the responsive features of Bootstrap:</p> <ol> <li>Use the compiled responsive version, bootstrap.reponsive.css</li> @@ -457,7 +479,7 @@ </ol> <p><strong>Why not just include it?</strong> Truth be told, not everything needs to be responsive. Instead of encouraging developers to remove this feature, we figure it best to enable it.</p> </div> - <div class="span8"> + <div class="span7"> <pre class="prettyprint linenums"> // Landscape phones and down @media (max-width: 480px) { ... } -- GitLab From 8545fe97877dc275df40ab98d408f21ce9a362cf Mon Sep 17 00:00:00 2001 From: Jacob Thornton <jacobthornton@gmail.com> Date: Wed, 19 Oct 2011 21:56:06 -0700 Subject: [PATCH 044/318] greatly simply js plugins - remove js api where reasonable --- docs/assets/js/application.js | 2 +- js/bootstrap-accordion.js | 41 ++++++++++++++++++ js/bootstrap-alerts.js | 80 +++++----------------------------- js/bootstrap-dropdown.js | 28 ++++-------- js/bootstrap-modal.js | 81 ++++++++++++----------------------- js/bootstrap-popover.js | 1 - js/bootstrap-scrollspy.js | 25 +---------- js/bootstrap-tabs.js | 10 +---- js/bootstrap-transitions.js | 45 +++++++++++++++++++ js/bootstrap-twipsy.js | 31 +------------- 10 files changed, 138 insertions(+), 206 deletions(-) create mode 100644 js/bootstrap-accordion.js create mode 100644 js/bootstrap-transitions.js diff --git a/docs/assets/js/application.js b/docs/assets/js/application.js index 16a20e068e..74024caa1d 100644 --- a/docs/assets/js/application.js +++ b/docs/assets/js/application.js @@ -1,4 +1,4 @@ -$(document).ready(function(){ +$(function(){ // table sort example // ================== diff --git a/js/bootstrap-accordion.js b/js/bootstrap-accordion.js new file mode 100644 index 0000000000..b88057691d --- /dev/null +++ b/js/bootstrap-accordion.js @@ -0,0 +1,41 @@ +/* ============================================================= + * bootstrap-accordion.js v1.3.0 + * http://twitter.github.com/bootstrap/javascript.html#accordion + * ============================================================= + * Copyright 2011 Twitter, Inc. + * + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + * ============================================================ */ + +(function( $ ){ + + var Accordion = function ( element, options ) {} + + Accordion.prototype = {} + + /* ALERT PLUGIN DEFINITION + * ======================= */ + + $.fn.accordion = function ( options ) { + + if ( options === true ) { + return this.data('accordion') + } + + return this.each(function () { + new Accordion(this, options) + }) + } + + +})( window.jQuery || window.ender ) \ No newline at end of file diff --git a/js/bootstrap-alerts.js b/js/bootstrap-alerts.js index 4498270cb9..bac92deb8a 100644 --- a/js/bootstrap-alerts.js +++ b/js/bootstrap-alerts.js @@ -17,90 +17,32 @@ * limitations under the License. * ========================================================== */ - (function( $ ){ - /* CSS TRANSITION SUPPORT (https://gist.github.com/373874) - * ======================================================= */ - - var transitionEnd - - $(document).ready(function () { - - $.support.transition = (function () { - var thisBody = document.body || document.documentElement - , thisStyle = thisBody.style - , support = thisStyle.transition !== undefined || thisStyle.WebkitTransition !== undefined || thisStyle.MozTransition !== undefined || thisStyle.MsTransition !== undefined || thisStyle.OTransition !== undefined - return support - })() - - // set CSS transition event type - if ( $.support.transition ) { - transitionEnd = "TransitionEnd" - if ( $.browser.webkit ) { - transitionEnd = "webkitTransitionEnd" - } else if ( $.browser.mozilla ) { - transitionEnd = "transitionend" - } else if ( $.browser.opera ) { - transitionEnd = "oTransitionEnd" - } - } - - }) - /* ALERT CLASS DEFINITION * ====================== */ - var Alert = function ( content, selector ) { - this.$element = $(content) - .delegate('[data-alert-dismiss]', 'click', this.close) - } - - Alert.prototype = { - - close: function (e) { - var $element = $(this).parent('.alert-message') + function close(e) { + var $element = $(this).parent('.alert-message') - e && e.preventDefault() - e && e.stopPropagation() + e && e.preventDefault() + $element.removeClass('in') - $element.removeClass('in') - - function removeElement () { - $element.remove() - } - - $.support.transition && $element.hasClass('fade') ? - $element.bind(transitionEnd, removeElement) : - removeElement() + function removeElement () { + $element.remove() } + $.support.transition && $element.hasClass('fade') ? + $element.bind($.support.transition.end, removeElement) : + removeElement() } /* ALERT PLUGIN DEFINITION * ======================= */ - $.fn.alert = function ( options ) { - - if ( options === true ) { - return this.data('alert') - } - - return this.each(function () { - var $this = $(this) - - if ( typeof options == 'string' ) { - return $this.data('alert')[options]() - } - - $(this).data('alert', new Alert( this )) - - }) - } - - $(document).ready(function () { - new Alert($('body')) + $(function () { + $('body').delegate('[data-alert-dismiss]', 'click', close) }) })( window.jQuery || window.ender ) \ No newline at end of file diff --git a/js/bootstrap-dropdown.js b/js/bootstrap-dropdown.js index 6379653c56..6d9430b391 100644 --- a/js/bootstrap-dropdown.js +++ b/js/bootstrap-dropdown.js @@ -20,34 +20,22 @@ (function( $ ){ - var d = '[data-dropdown]' - - /* DROPDOWN PLUGIN DEFINITION - * ========================== */ - - $.fn.dropdown = function () { - return this.each(function () { - $(this).delegate(d, 'click', function (e) { - var li = $(this).parent('li') - , isActive = li.hasClass('open') - - clearMenus() - !isActive && li.toggleClass('open') - return false - }) - }) - } - /* APPLY TO STANDARD DROPDOWN ELEMENTS * =================================== */ function clearMenus() { - $(d).parent('li').removeClass('open') + $(selector).parent('li').removeClass('open') } $(function () { $('html').bind("click", clearMenus) - $('body').dropdown() + $('body').delegate('[data-dropdown]', 'click', function (e) { + var li = $(this).parent('li') + , isActive = li.hasClass('open') + clearMenus() + !isActive && li.toggleClass('open') + return false + }) }) })( window.jQuery || window.ender ) \ No newline at end of file diff --git a/js/bootstrap-modal.js b/js/bootstrap-modal.js index 60b83d58fd..02f8b23827 100644 --- a/js/bootstrap-modal.js +++ b/js/bootstrap-modal.js @@ -20,35 +20,6 @@ !function( $ ){ - /* CSS TRANSITION SUPPORT (https://gist.github.com/373874) - * ======================================================= */ - - var transitionEnd - - $(document).ready(function () { - - $.support.transition = (function () { - var thisBody = document.body || document.documentElement - , thisStyle = thisBody.style - , support = thisStyle.transition !== undefined || thisStyle.WebkitTransition !== undefined || thisStyle.MozTransition !== undefined || thisStyle.MsTransition !== undefined || thisStyle.OTransition !== undefined - return support - })() - - // set CSS transition event type - if ( $.support.transition ) { - transitionEnd = "TransitionEnd" - if ( $.browser.webkit ) { - transitionEnd = "webkitTransitionEnd" - } else if ( $.browser.mozilla ) { - transitionEnd = "transitionend" - } else if ( $.browser.opera ) { - transitionEnd = "oTransitionEnd" - } - } - - }) - - /* MODAL PUBLIC CLASS DEFINITION * ============================= */ @@ -76,25 +47,7 @@ this.$element.trigger('show') escape.call(this) - backdrop.call(this, function () { - var transition = $.support.transition && that.$element.hasClass('fade') - - that.$element - .appendTo(document.body) - .show() - - if (transition) { - that.$element[0].offsetWidth // force reflow - } - - that.$element - .addClass('in') - - transition ? - that.$element.one(transitionEnd, function () { that.$element.trigger('shown') }) : - that.$element.trigger('shown') - - }) + backdrop.call(this) return this } @@ -124,7 +77,7 @@ } $.support.transition && this.$element.hasClass('fade') ? - this.$element.one(transitionEnd, removeElement) : + this.$element.one($.support.transition.end, removeElement) : removeElement() return this @@ -136,9 +89,11 @@ /* MODAL PRIVATE METHODS * ===================== */ - function backdrop ( callback ) { + function backdrop () { var that = this , animate = this.$element.hasClass('fade') ? 'fade' : '' + , callback = $.proxy(show, this) + if ( this.isShown && this.settings.backdrop ) { var doAnimate = $.support.transition && animate @@ -156,7 +111,7 @@ this.$backdrop.addClass('in') doAnimate ? - this.$backdrop.one(transitionEnd, callback) : + this.$backdrop.one($.support.transition.end, callback) : callback() } else if ( !this.isShown && this.$backdrop ) { @@ -168,13 +123,33 @@ } $.support.transition && this.$element.hasClass('fade')? - this.$backdrop.one(transitionEnd, removeElement) : + this.$backdrop.one($.support.transition.end, removeElement) : removeElement() } else if ( callback ) { callback() } } + function show() { + var transition = $.support.transition && that.$element.hasClass('fade') + , that = this + + this.$element + .appendTo(document.body) + .show() + + if (transition) { + this.$element[0].offsetWidth // force reflow + } + + this.$element + .addClass('in') + + transition ? + this.$element.one($.support.transition.end, function () { that.$element.trigger('shown') }) : + this.$element.trigger('shown') + } + function escape() { var that = this if ( this.isShown && this.settings.keyboard ) { @@ -233,7 +208,7 @@ /* MODAL DATA-IMPLEMENTATION * ========================= */ - $(document).ready(function () { + $(function () { $('body').delegate('[data-controls-modal]', 'click', function (e) { e.preventDefault() var $this = $(this).data('show', true) diff --git a/js/bootstrap-popover.js b/js/bootstrap-popover.js index 1cf4b8917a..22db98fd9b 100644 --- a/js/bootstrap-popover.js +++ b/js/bootstrap-popover.js @@ -62,7 +62,6 @@ }) - /* POPOVER PLUGIN DEFINITION * ======================= */ diff --git a/js/bootstrap-scrollspy.js b/js/bootstrap-scrollspy.js index 4b146e5809..23bdf59e9c 100644 --- a/js/bootstrap-scrollspy.js +++ b/js/bootstrap-scrollspy.js @@ -75,30 +75,7 @@ } - /* SCROLLSPY PLUGIN DEFINITION - * =========================== */ - - $.fn.scrollSpy = function( options ) { - var scrollspy = this.data('scrollspy') - - if (!scrollspy) { - return this.each(function () { - $(this).data('scrollspy', new ScrollSpy( this, options )) - }) - } - - if ( options === true ) { - return scrollspy - } - - if ( typeof options == 'string' ) { - scrollspy[options]() - } - - return this - } - - $(document).ready(function () { + $(function () { $('body').scrollSpy('[data-scrollspy] li > a') }) diff --git a/js/bootstrap-tabs.js b/js/bootstrap-tabs.js index b94adfc25d..6ee80429c7 100644 --- a/js/bootstrap-tabs.js +++ b/js/bootstrap-tabs.js @@ -55,14 +55,8 @@ /* TABS/PILLS PLUGIN DEFINITION * ============================ */ - $.fn.tabs = $.fn.pills = function ( selector ) { - return this.each(function () { - $(this).delegate(selector || '.tabs li > a, .pills > li > a', 'click', tab) - }) - } - - $(document).ready(function () { - $('body').tabs('ul[data-tabs] li > a, ul[data-pills] > li > a') + $(function () { + $('body').delegate('ul[data-tabs] > li > a, ul[data-pills] > li > a', 'click', tab) }) }( window.jQuery || window.ender ); \ No newline at end of file diff --git a/js/bootstrap-transitions.js b/js/bootstrap-transitions.js new file mode 100644 index 0000000000..49b5338a8f --- /dev/null +++ b/js/bootstrap-transitions.js @@ -0,0 +1,45 @@ +/* =================================================== + * bootstrap-transitions.js v2.0.0 + * http://twitter.github.com/bootstrap/javascript.html + * =================================================== + * Copyright 2011 Twitter, Inc. + * + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + * ========================================================== */ + +$(function () { + + /* CSS TRANSITION SUPPORT (https://gist.github.com/373874) + * ======================================================= */ + + $.support.transition = (function () { + var thisBody = document.body || document.documentElement + , thisStyle = thisBody.style + , support = thisStyle.transition !== undefined || thisStyle.WebkitTransition !== undefined || thisStyle.MozTransition !== undefined || thisStyle.MsTransition !== undefined || thisStyle.OTransition !== undefined + + return support && { + end: (function () { + var transitionEnd = "TransitionEnd" + if ( $.browser.webkit ) { + transitionEnd = "webkitTransitionEnd" + } else if ( $.browser.mozilla ) { + transitionEnd = "transitionend" + } else if ( $.browser.opera ) { + transitionEnd = "oTransitionEnd" + } + return transitionEnd + })() + } + })() + +}) \ No newline at end of file diff --git a/js/bootstrap-twipsy.js b/js/bootstrap-twipsy.js index 0144c48158..c44395e08e 100644 --- a/js/bootstrap-twipsy.js +++ b/js/bootstrap-twipsy.js @@ -21,35 +21,6 @@ !function( $ ) { - /* CSS TRANSITION SUPPORT (https://gist.github.com/373874) - * ======================================================= */ - - var transitionEnd - - $(document).ready(function () { - - $.support.transition = (function () { - var thisBody = document.body || document.documentElement - , thisStyle = thisBody.style - , support = thisStyle.transition !== undefined || thisStyle.WebkitTransition !== undefined || thisStyle.MozTransition !== undefined || thisStyle.MsTransition !== undefined || thisStyle.OTransition !== undefined - return support - })() - - // set CSS transition event type - if ( $.support.transition ) { - transitionEnd = "TransitionEnd" - if ( $.browser.webkit ) { - transitionEnd = "webkitTransitionEnd" - } else if ( $.browser.mozilla ) { - transitionEnd = "transitionend" - } else if ( $.browser.opera ) { - transitionEnd = "oTransitionEnd" - } - } - - }) - - /* TWIPSY PUBLIC CLASS DEFINITION * ============================== */ @@ -131,7 +102,7 @@ } $.support.transition && this.$tip.hasClass('fade') ? - $tip.bind(transitionEnd, removeElement) : + $tip.bind($.support.transition.end, removeElement) : removeElement() } -- GitLab From 523e02f7df3bb706654b43cf604e61c9396212e1 Mon Sep 17 00:00:00 2001 From: Jacob Thornton <jacobthornton@gmail.com> Date: Wed, 19 Oct 2011 23:12:50 -0700 Subject: [PATCH 045/318] fix scrollspy simplify stuff more - break everything. --- docs/index.html | 65 ++++++++++++++++++++------------------- js/bootstrap-accordion.js | 2 +- js/bootstrap-alerts.js | 2 +- js/bootstrap-dropdown.js | 5 +-- js/bootstrap-modal.js | 2 +- js/bootstrap-popover.js | 2 +- js/bootstrap-scrollspy.js | 33 ++++++++++++-------- js/bootstrap-tabs.js | 21 +++++++++---- js/bootstrap-twipsy.js | 2 +- js/tests/index.html | 1 + 10 files changed, 78 insertions(+), 57 deletions(-) diff --git a/docs/index.html b/docs/index.html index aafea76621..255d1684fb 100644 --- a/docs/index.html +++ b/docs/index.html @@ -53,8 +53,8 @@ <li class="dropdown"> <a href="#" class="dropdown-toggle" data-dropdown="true">Patterns</a> <ul class="dropdown-menu"> - <li><a href="#navigation">Navigation</a></li> <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> <li><a href="#autocomplete">Autocomplete</a></li> @@ -147,36 +147,38 @@ <!-- About Bootstrap ================================================== --> - <div class="row"> - <div class="span4"> - <h2>Built for and by nerds</h2> - <p>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.</p> - <p>Read more on <a href="https://dev.twitter.com/blog/bootstrap-twitter">dev.twitter.com ›</a></p> - </div> - <div class="span4"> - <h2>Cross-everything</h2> - <p>Bootstrap is tested and supported in major modern browsers like Chrome, Safari, Internet Explorer, and Firefox.</p> - <img class="browser-support" src="assets/img/browsers.png" alt="Tested and supported in Chrome, Safari, Internet Explorer, and Firefox"> - <ul> - <li>Latest Safari</li> - <li>Latest Google Chrome</li> - <li>Firefox 4+</li> - <li>Internet Explorer 7+</li> - <li>Opera 11</li> - </ul> - </div> - <div class="span4"> - <h2>What's included</h2> - <p>Bootstrap comes complete with compiled CSS, uncompiled, and example templates.</p> - <ul> - <li><span class="label">New in 1.3</span> <a href="./javascript.html">Javascript plugins</a></li> - <li>All original .less files</li> - <li>Fully <a href="../bootstrap.css">compiled</a> and <a href="../bootstrap.min.css">minified</a> CSS</li> - <li>Complete styleguide documentation</li> - <li>Three example pages with different layouts</li> - </ul> - </div> - </div><!-- /row --> + <section id="about"> + <div class="row"> + <div class="span4"> + <h2>Built for and by nerds</h2> + <p>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.</p> + <p>Read more on <a href="https://dev.twitter.com/blog/bootstrap-twitter">dev.twitter.com ›</a></p> + </div> + <div class="span4"> + <h2>Cross-everything</h2> + <p>Bootstrap is tested and supported in major modern browsers like Chrome, Safari, Internet Explorer, and Firefox.</p> + <img class="browser-support" src="assets/img/browsers.png" alt="Tested and supported in Chrome, Safari, Internet Explorer, and Firefox"> + <ul> + <li>Latest Safari</li> + <li>Latest Google Chrome</li> + <li>Firefox 4+</li> + <li>Internet Explorer 7+</li> + <li>Opera 11</li> + </ul> + </div> + <div class="span4"> + <h2>What's included</h2> + <p>Bootstrap comes complete with compiled CSS, uncompiled, and example templates.</p> + <ul> + <li><span class="label">New in 1.3</span> <a href="./javascript.html">Javascript plugins</a></li> + <li>All original .less files</li> + <li>Fully <a href="../bootstrap.css">compiled</a> and <a href="../bootstrap.min.css">minified</a> CSS</li> + <li>Complete styleguide documentation</li> + <li>Three example pages with different layouts</li> + </ul> + </div> + </div><!-- /row --> + </section> <h3>Quick-start examples</h3> <p>Need some quick templates? Check out these basic examples we've put together:</p> @@ -2162,6 +2164,7 @@ Lorem ipsum dolar sit amet illo error <a href="#" title="below">ipsum</a> verita <script src="http://autobahn.tablesorter.com/jquery.tablesorter.min.js"></script> <script src="assets/js/google-code-prettify/prettify.js"></script> <script>$(function () { prettyPrint() })</script> + <script src="../js/bootstrap-transitions.js"></script> <script src="../js/bootstrap-dropdown.js"></script> <script src="../js/bootstrap-twipsy.js"></script> <script src="../js/bootstrap-scrollspy.js"></script> diff --git a/js/bootstrap-accordion.js b/js/bootstrap-accordion.js index b88057691d..9a24b5ddfc 100644 --- a/js/bootstrap-accordion.js +++ b/js/bootstrap-accordion.js @@ -1,5 +1,5 @@ /* ============================================================= - * bootstrap-accordion.js v1.3.0 + * bootstrap-accordion.js v2.0.0 * http://twitter.github.com/bootstrap/javascript.html#accordion * ============================================================= * Copyright 2011 Twitter, Inc. diff --git a/js/bootstrap-alerts.js b/js/bootstrap-alerts.js index bac92deb8a..4f1acfa3d0 100644 --- a/js/bootstrap-alerts.js +++ b/js/bootstrap-alerts.js @@ -1,5 +1,5 @@ /* ========================================================== - * bootstrap-alerts.js v1.3.0 + * bootstrap-alerts.js v2.0.0 * http://twitter.github.com/bootstrap/javascript.html#alerts * ========================================================== * Copyright 2011 Twitter, Inc. diff --git a/js/bootstrap-dropdown.js b/js/bootstrap-dropdown.js index 6d9430b391..d12fe48cb6 100644 --- a/js/bootstrap-dropdown.js +++ b/js/bootstrap-dropdown.js @@ -1,5 +1,5 @@ /* ============================================================ - * bootstrap-dropdown.js v1.3.0 + * bootstrap-dropdown.js v2.0.0 * http://twitter.github.com/bootstrap/javascript.html#dropdown * ============================================================ * Copyright 2011 Twitter, Inc. @@ -22,6 +22,7 @@ /* APPLY TO STANDARD DROPDOWN ELEMENTS * =================================== */ + var selector = '[data-dropdown]' function clearMenus() { $(selector).parent('li').removeClass('open') @@ -29,7 +30,7 @@ $(function () { $('html').bind("click", clearMenus) - $('body').delegate('[data-dropdown]', 'click', function (e) { + $('body').delegate(selector, 'click', function (e) { var li = $(this).parent('li') , isActive = li.hasClass('open') clearMenus() diff --git a/js/bootstrap-modal.js b/js/bootstrap-modal.js index 02f8b23827..984b091d61 100644 --- a/js/bootstrap-modal.js +++ b/js/bootstrap-modal.js @@ -1,5 +1,5 @@ /* ========================================================= - * bootstrap-modal.js v1.3.0 + * bootstrap-modal.js v2.0.0 * http://twitter.github.com/bootstrap/javascript.html#modal * ========================================================= * Copyright 2011 Twitter, Inc. diff --git a/js/bootstrap-popover.js b/js/bootstrap-popover.js index 22db98fd9b..3fdde19b51 100644 --- a/js/bootstrap-popover.js +++ b/js/bootstrap-popover.js @@ -1,5 +1,5 @@ /* =========================================================== - * bootstrap-popover.js v1.3.0 + * bootstrap-popover.js v2.0.0 * http://twitter.github.com/bootstrap/javascript.html#popover * =========================================================== * Copyright 2011 Twitter, Inc. diff --git a/js/bootstrap-scrollspy.js b/js/bootstrap-scrollspy.js index 23bdf59e9c..1269d91ecb 100644 --- a/js/bootstrap-scrollspy.js +++ b/js/bootstrap-scrollspy.js @@ -1,5 +1,5 @@ /* ============================================================= - * bootstrap-scrollspy.js v1.3.0 + * bootstrap-scrollspy.js v2.0.0 * http://twitter.github.com/bootstrap/javascript.html#scrollspy * ============================================================= * Copyright 2011 Twitter, Inc. @@ -22,14 +22,14 @@ var $window = $(window) - function ScrollSpy( topbar, selector ) { - var processScroll = $.proxy(this.processScroll, this) - this.$topbar = $(topbar) - this.selector = selector || 'li > a' + function ScrollSpy() { + var process = $.proxy(this.process, this) + this.$topbar = $('body') + this.selector = '[data-scrollspy] li > a' this.refresh() - this.$topbar.delegate(this.selector, 'click', processScroll) - $window.scroll(processScroll) - this.processScroll() + this.$topbar.delegate(this.selector, 'click', process) + $window.scroll(process) + this.process() } ScrollSpy.prototype = { @@ -45,7 +45,7 @@ }) } - , processScroll: function () { + , process: function () { var scrollTop = $window.scrollTop() + 10 , offsets = this.offsets , targets = this.targets @@ -56,27 +56,34 @@ activeTarget != targets[i] && scrollTop >= offsets[i] && (!offsets[i + 1] || scrollTop <= offsets[i + 1]) - && this.activateButton( targets[i] ) + && this.activate( targets[i] ) } } - , activateButton: function (target) { + , activate: function (target) { + var active + this.activeTarget = target this.$topbar .find(this.selector).parent('.active') .removeClass('active') - this.$topbar + active = this.$topbar .find(this.selector + '[href="' + target + '"]') .parent('li') .addClass('active') + + if ( active.parent('.dropdown-menu') ) { + active.closest('li.dropdown').addClass('active') + } + } } $(function () { - $('body').scrollSpy('[data-scrollspy] li > a') + new ScrollSpy() }) }( window.jQuery || window.ender ) \ No newline at end of file diff --git a/js/bootstrap-tabs.js b/js/bootstrap-tabs.js index 6ee80429c7..86bd4784f3 100644 --- a/js/bootstrap-tabs.js +++ b/js/bootstrap-tabs.js @@ -1,5 +1,5 @@ /* ======================================================== - * bootstrap-tabs.js v1.3.0 + * bootstrap-tabs.js v2.0.0 * http://twitter.github.com/bootstrap/javascript.html#tabs * ======================================================== * Copyright 2011 Twitter, Inc. @@ -21,24 +21,33 @@ !function( $ ){ function activate ( element, container ) { - container.find('> .active').removeClass('active') + container + .find('> .active') + .removeClass('active') + .find('> .dropdown-menu > .active') + .removeClass('active') + element.addClass('active') + + if ( element.parent('.dropdown-menu') ) { + element.closest('li.dropdown').addClass('active') + } } function tab( e ) { var $this = $(this) - , $ul = $this.closest('ul') + , $ul = $this.closest('ul:not(.dropdown-menu)') , href = $this.attr('href') , previous - if (/^#\w+/.test(href)) { + if ( /^#\w+/.test(href) ) { e.preventDefault() - if ($this.parent('li').hasClass('active')) { + if ( $this.parent('li').hasClass('active') ) { return } - previous = $ul.find('.active a')[0] + previous = $ul.find('.active a').last()[0] $href = $(href) activate($this.parent('li'), $ul) diff --git a/js/bootstrap-twipsy.js b/js/bootstrap-twipsy.js index c44395e08e..7c195fbc78 100644 --- a/js/bootstrap-twipsy.js +++ b/js/bootstrap-twipsy.js @@ -1,5 +1,5 @@ /* ========================================================== - * bootstrap-twipsy.js v1.3.0 + * bootstrap-twipsy.js v2.0.0 * http://twitter.github.com/bootstrap/javascript.html#twipsy * Adapted from the original jQuery.tipsy by Jason Frame * ========================================================== diff --git a/js/tests/index.html b/js/tests/index.html index 2ca94102ad..617fcd92ab 100644 --- a/js/tests/index.html +++ b/js/tests/index.html @@ -11,6 +11,7 @@ <script src="vendor/qunit.js"></script> <!-- plugin sources --> + <script src="../../js/bootstrap-transitions.js"></script> <script src="../../js/bootstrap-alerts.js"></script> <script src="../../js/bootstrap-dropdown.js"></script> <script src="../../js/bootstrap-modal.js"></script> -- GitLab From 2c0a60a777d85c9223abf245be56308b8c62804c Mon Sep 17 00:00:00 2001 From: Jeff Adams <jeff@tinyfly.com> Date: Fri, 21 Oct 2011 11:56:13 -0500 Subject: [PATCH 046/318] remove negative margin on .row so we don't hang off the left edge of the screen --- bootstrap.css | 8 +++++++- bootstrap.min.css | 2 +- lib/responsive.less | 12 ++++++++++++ 3 files changed, 20 insertions(+), 2 deletions(-) diff --git a/bootstrap.css b/bootstrap.css index 0f6d58ae06..7eef72feef 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: Mon Oct 17 23:44:56 PDT 2011 + * Date: Fri Oct 21 11:54:44 CDT 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). @@ -2268,6 +2268,9 @@ button.btn::-moz-focus-inner, input[type=submit].btn::-moz-focus-inner { width: auto; padding: 0 10px; } + .row { + margin-left: 0; + } [class*="span"] { float: none; display: block; @@ -2299,6 +2302,9 @@ button.btn::-moz-focus-inner, input[type=submit].btn::-moz-focus-inner { width: auto; padding: 0 10px; } + .row { + margin-left: 0; + } [class*="span"] { float: none; display: block; diff --git a/bootstrap.min.css b/bootstrap.min.css index 31912f2933..e35f0d2234 100644 --- a/bootstrap.min.css +++ b/bootstrap.min.css @@ -321,4 +321,4 @@ button.btn::-moz-focus-inner,input[type=submit].btn::-moz-focus-inner{padding:0; .media-grid li{display:inline;} .media-grid a{float:left;padding:4px;margin:0 0 20px 20px;border:1px solid #ddd;-webkit-border-radius:4px;-moz-border-radius:4px;border-radius:4px;-webkit-box-shadow:0 1px 1px rgba(0, 0, 0, 0.075);-moz-box-shadow:0 1px 1px rgba(0, 0, 0, 0.075);box-shadow:0 1px 1px rgba(0, 0, 0, 0.075);}.media-grid a img{display:block;} .media-grid a:hover{border-color:#0069d6;-webkit-box-shadow:0 1px 4px rgba(0, 105, 214, 0.25);-moz-box-shadow:0 1px 4px rgba(0, 105, 214, 0.25);box-shadow:0 1px 4px rgba(0, 105, 214, 0.25);} -@media (max-width: 480px){.container{width:auto;padding:0 10px;} [class*="span"]{float:none;display:block;width:auto;margin:0;} .modal{width:auto;margin:0;} .form-horizontal .control-group>label{float:none;width:auto;padding-top:0;text-align:left;} .form-horizontal .controls{margin-left:0;} .form-horizontal .control-list{padding-top:0;} .form-horizontal .form-actions{padding-left:0;}}@media (min-width: 480px) and (max-width: 768px){.container{width:auto;padding:0 10px;} [class*="span"]{float:none;display:block;width:auto;margin:0;}}@media (min-width: 768px) and (max-width: 940px){.container{width:748px;} .span1{width:44px;} .span2{width:108px;} .span3{width:172px;} .span4{width:236px;} .span5{width:300px;} .span6{width:364px;} .span7{width:428px;} .span8{width:492px;} .span9{width:556px;} .span10{width:620px;} .span11{width:684px;} .span12{width:748px;} .offset1{margin-left:64px;} .offset2{margin-left:128px;} .offset3{margin-left:192px;} .offset4{margin-left:256px;} .offset5{margin-left:320px;} .offset6{margin-left:384px;} .offset7{margin-left:448px;} .offset8{margin-left:512px;} .offset9{margin-left:576px;} .offset10{margin-left:640px;} .offset11{margin-left:704px;} .offset12{margin-left:768px;}} +@media (max-width: 480px){.container{width:auto;padding:0 10px;} .row{margin-left:0;} [class*="span"]{float:none;display:block;width:auto;margin:0;} .modal{width:auto;margin:0;} .form-horizontal .control-group>label{float:none;width:auto;padding-top:0;text-align:left;} .form-horizontal .controls{margin-left:0;} .form-horizontal .control-list{padding-top:0;} .form-horizontal .form-actions{padding-left:0;}}@media (min-width: 480px) and (max-width: 768px){.container{width:auto;padding:0 10px;} .row{margin-left:0;} [class*="span"]{float:none;display:block;width:auto;margin:0;}}@media (min-width: 768px) and (max-width: 940px){.container{width:748px;} .span1{width:44px;} .span2{width:108px;} .span3{width:172px;} .span4{width:236px;} .span5{width:300px;} .span6{width:364px;} .span7{width:428px;} .span8{width:492px;} .span9{width:556px;} .span10{width:620px;} .span11{width:684px;} .span12{width:748px;} .offset1{margin-left:64px;} .offset2{margin-left:128px;} .offset3{margin-left:192px;} .offset4{margin-left:256px;} .offset5{margin-left:320px;} .offset6{margin-left:384px;} .offset7{margin-left:448px;} .offset8{margin-left:512px;} .offset9{margin-left:576px;} .offset10{margin-left:640px;} .offset11{margin-left:704px;} .offset12{margin-left:768px;}} diff --git a/lib/responsive.less b/lib/responsive.less index a1a33164fe..1a84245a1d 100644 --- a/lib/responsive.less +++ b/lib/responsive.less @@ -12,6 +12,12 @@ width: auto; padding: 0 10px; } + + // remove negative margin so we don't hang off the screen + .row { + margin-left: 0; + } + // Make all columns even [class*="span"] { float: none; @@ -57,6 +63,12 @@ width: auto; padding: 0 10px; } + + // remove negative margin so we don't hang off the screen + .row { + margin-left: 0; + } + // Make all columns even [class*="span"] { float: none; -- GitLab From d4675bf4ef8019fc80e3b6816d3597c07cde81df Mon Sep 17 00:00:00 2001 From: Mark Otto <mark.otto@twitter.com> Date: Sat, 22 Oct 2011 15:49:42 -0700 Subject: [PATCH 047/318] updating the docs to include more responsive fixes, adding rows to the responsive changes as well to undo negative margin --- bootstrap.css | 8 +++++++- bootstrap.min.css | 2 +- docs/assets/css/docs.css | 16 ++++++++++++---- lib/responsive.less | 8 ++++++++ 4 files changed, 28 insertions(+), 6 deletions(-) diff --git a/bootstrap.css b/bootstrap.css index 0f6d58ae06..256ab096bb 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: Mon Oct 17 23:44:56 PDT 2011 + * Date: Sat Oct 22 15:49:12 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). @@ -2268,6 +2268,9 @@ button.btn::-moz-focus-inner, input[type=submit].btn::-moz-focus-inner { width: auto; padding: 0 10px; } + .row { + margin-left: 0; + } [class*="span"] { float: none; display: block; @@ -2299,6 +2302,9 @@ button.btn::-moz-focus-inner, input[type=submit].btn::-moz-focus-inner { width: auto; padding: 0 10px; } + .row { + margin-left: 0; + } [class*="span"] { float: none; display: block; diff --git a/bootstrap.min.css b/bootstrap.min.css index 31912f2933..e35f0d2234 100644 --- a/bootstrap.min.css +++ b/bootstrap.min.css @@ -321,4 +321,4 @@ button.btn::-moz-focus-inner,input[type=submit].btn::-moz-focus-inner{padding:0; .media-grid li{display:inline;} .media-grid a{float:left;padding:4px;margin:0 0 20px 20px;border:1px solid #ddd;-webkit-border-radius:4px;-moz-border-radius:4px;border-radius:4px;-webkit-box-shadow:0 1px 1px rgba(0, 0, 0, 0.075);-moz-box-shadow:0 1px 1px rgba(0, 0, 0, 0.075);box-shadow:0 1px 1px rgba(0, 0, 0, 0.075);}.media-grid a img{display:block;} .media-grid a:hover{border-color:#0069d6;-webkit-box-shadow:0 1px 4px rgba(0, 105, 214, 0.25);-moz-box-shadow:0 1px 4px rgba(0, 105, 214, 0.25);box-shadow:0 1px 4px rgba(0, 105, 214, 0.25);} -@media (max-width: 480px){.container{width:auto;padding:0 10px;} [class*="span"]{float:none;display:block;width:auto;margin:0;} .modal{width:auto;margin:0;} .form-horizontal .control-group>label{float:none;width:auto;padding-top:0;text-align:left;} .form-horizontal .controls{margin-left:0;} .form-horizontal .control-list{padding-top:0;} .form-horizontal .form-actions{padding-left:0;}}@media (min-width: 480px) and (max-width: 768px){.container{width:auto;padding:0 10px;} [class*="span"]{float:none;display:block;width:auto;margin:0;}}@media (min-width: 768px) and (max-width: 940px){.container{width:748px;} .span1{width:44px;} .span2{width:108px;} .span3{width:172px;} .span4{width:236px;} .span5{width:300px;} .span6{width:364px;} .span7{width:428px;} .span8{width:492px;} .span9{width:556px;} .span10{width:620px;} .span11{width:684px;} .span12{width:748px;} .offset1{margin-left:64px;} .offset2{margin-left:128px;} .offset3{margin-left:192px;} .offset4{margin-left:256px;} .offset5{margin-left:320px;} .offset6{margin-left:384px;} .offset7{margin-left:448px;} .offset8{margin-left:512px;} .offset9{margin-left:576px;} .offset10{margin-left:640px;} .offset11{margin-left:704px;} .offset12{margin-left:768px;}} +@media (max-width: 480px){.container{width:auto;padding:0 10px;} .row{margin-left:0;} [class*="span"]{float:none;display:block;width:auto;margin:0;} .modal{width:auto;margin:0;} .form-horizontal .control-group>label{float:none;width:auto;padding-top:0;text-align:left;} .form-horizontal .controls{margin-left:0;} .form-horizontal .control-list{padding-top:0;} .form-horizontal .form-actions{padding-left:0;}}@media (min-width: 480px) and (max-width: 768px){.container{width:auto;padding:0 10px;} .row{margin-left:0;} [class*="span"]{float:none;display:block;width:auto;margin:0;}}@media (min-width: 768px) and (max-width: 940px){.container{width:748px;} .span1{width:44px;} .span2{width:108px;} .span3{width:172px;} .span4{width:236px;} .span5{width:300px;} .span6{width:364px;} .span7{width:428px;} .span8{width:492px;} .span9{width:556px;} .span10{width:620px;} .span11{width:684px;} .span12{width:748px;} .offset1{margin-left:64px;} .offset2{margin-left:128px;} .offset3{margin-left:192px;} .offset4{margin-left:256px;} .offset5{margin-left:320px;} .offset6{margin-left:384px;} .offset7{margin-left:448px;} .offset8{margin-left:512px;} .offset9{margin-left:576px;} .offset10{margin-left:640px;} .offset11{margin-left:704px;} .offset12{margin-left:768px;}} diff --git a/docs/assets/css/docs.css b/docs/assets/css/docs.css index c1c43b1d88..b618c44b87 100644 --- a/docs/assets/css/docs.css +++ b/docs/assets/css/docs.css @@ -340,9 +340,17 @@ h2 + table { } } -@media (min-width: 768px) and (max-width: 900px) { - .footer, - .jumbotron { - min-width: 748px; +@media (min-width: 768px) and (max-width: 940px) { + + /* Scale down the jumbotron content */ + .jumbotron h1 { + font-size: 72px; + } + + /* Provide enough space on right-hand side for benefits list */ + .jumbotron h1, + .jumbotron p { + margin-right: 40%; } } + diff --git a/lib/responsive.less b/lib/responsive.less index a1a33164fe..6cacccad99 100644 --- a/lib/responsive.less +++ b/lib/responsive.less @@ -12,6 +12,10 @@ width: auto; padding: 0 10px; } + // Undo negative margin on rows + .row { + margin-left: 0; + } // Make all columns even [class*="span"] { float: none; @@ -57,6 +61,10 @@ width: auto; padding: 0 10px; } + // Undo negative margin on rows + .row { + margin-left: 0; + } // Make all columns even [class*="span"] { float: none; -- GitLab From b4c0d2a6b2fe1bc92c3635cda71b63ee08a05be4 Mon Sep 17 00:00:00 2001 From: Mark Otto <mark.otto@twitter.com> Date: Sat, 22 Oct 2011 22:49:37 -0700 Subject: [PATCH 048/318] tweaks to the responsive layout to improve type --- bootstrap.css | 12 ++++-------- bootstrap.min.css | 4 ++-- docs/assets/css/docs.css | 30 +++++++++++++++++++++++++++--- docs/index.html | 6 +++--- lib/responsive.less | 2 +- lib/type.less | 7 +++---- 6 files changed, 40 insertions(+), 21 deletions(-) diff --git a/bootstrap.css b/bootstrap.css index aebabeecca..c055a79c93 100644 --- a/bootstrap.css +++ b/bootstrap.css @@ -6,11 +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. -<<<<<<< HEAD - * Date: Sat Oct 22 15:49:12 PDT 2011 -======= - * Date: Fri Oct 21 11:54:44 CDT 2011 ->>>>>>> 2e09ffe3832106fab60dc01cc3159c13029bdf68 + * Date: Sat Oct 22 22:49:01 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). @@ -520,7 +516,7 @@ pre { background-color: #f5f5f5; display: block; padding: 8.5px; - margin: 0 0 18px; + margin: 0 0 9px; line-height: 18px; font-size: 12px; border: 1px solid #ccc; @@ -530,7 +526,7 @@ pre { border-radius: 3px; white-space: pre; white-space: pre-wrap; - word-wrap: break-word; + word-break: break-all; } /* Forms.less * Base styles for various input types, form layouts, and states @@ -2270,7 +2266,7 @@ button.btn::-moz-focus-inner, input[type=submit].btn::-moz-focus-inner { @media (max-width: 480px) { .container { width: auto; - padding: 0 10px; + padding: 0 15px; } .row { margin-left: 0; diff --git a/bootstrap.min.css b/bootstrap.min.css index e35f0d2234..0aa8892072 100644 --- a/bootstrap.min.css +++ b/bootstrap.min.css @@ -89,7 +89,7 @@ blockquote small{display:block;font-size:12px;font-weight:300;line-height:18px;c address{display:block;line-height:18px;margin-bottom:18px;} code,pre{padding:0 3px 2px;font-family:Menlo, Monaco, Andale Mono, Courier New, monospace;font-size:12px;-webkit-border-radius:3px;-moz-border-radius:3px;border-radius:3px;} code{background-color:#fee9cc;color:rgba(0, 0, 0, 0.75);padding:1px 3px;} -pre{background-color:#f5f5f5;display:block;padding:8.5px;margin:0 0 18px;line-height:18px;font-size:12px;border:1px solid #ccc;border:1px solid rgba(0, 0, 0, 0.15);-webkit-border-radius:3px;-moz-border-radius:3px;border-radius:3px;white-space:pre;white-space:pre-wrap;word-wrap:break-word;} +pre{background-color:#f5f5f5;display:block;padding:8.5px;margin:0 0 9px;line-height:18px;font-size:12px;border:1px solid #ccc;border:1px solid rgba(0, 0, 0, 0.15);-webkit-border-radius:3px;-moz-border-radius:3px;border-radius:3px;white-space:pre;white-space:pre-wrap;word-break:break-all;} form{margin-bottom:18px;} legend{display:block;width:100%;margin-bottom:27px;font-size:19.5px;line-height:36px;color:#404040;border-bottom:1px solid #eee;} label,input,select,textarea{font-family:"Helvetica Neue",Helvetica,Arial,sans-serif;font-size:13px;font-weight:normal;line-height:18px;} @@ -321,4 +321,4 @@ button.btn::-moz-focus-inner,input[type=submit].btn::-moz-focus-inner{padding:0; .media-grid li{display:inline;} .media-grid a{float:left;padding:4px;margin:0 0 20px 20px;border:1px solid #ddd;-webkit-border-radius:4px;-moz-border-radius:4px;border-radius:4px;-webkit-box-shadow:0 1px 1px rgba(0, 0, 0, 0.075);-moz-box-shadow:0 1px 1px rgba(0, 0, 0, 0.075);box-shadow:0 1px 1px rgba(0, 0, 0, 0.075);}.media-grid a img{display:block;} .media-grid a:hover{border-color:#0069d6;-webkit-box-shadow:0 1px 4px rgba(0, 105, 214, 0.25);-moz-box-shadow:0 1px 4px rgba(0, 105, 214, 0.25);box-shadow:0 1px 4px rgba(0, 105, 214, 0.25);} -@media (max-width: 480px){.container{width:auto;padding:0 10px;} .row{margin-left:0;} [class*="span"]{float:none;display:block;width:auto;margin:0;} .modal{width:auto;margin:0;} .form-horizontal .control-group>label{float:none;width:auto;padding-top:0;text-align:left;} .form-horizontal .controls{margin-left:0;} .form-horizontal .control-list{padding-top:0;} .form-horizontal .form-actions{padding-left:0;}}@media (min-width: 480px) and (max-width: 768px){.container{width:auto;padding:0 10px;} .row{margin-left:0;} [class*="span"]{float:none;display:block;width:auto;margin:0;}}@media (min-width: 768px) and (max-width: 940px){.container{width:748px;} .span1{width:44px;} .span2{width:108px;} .span3{width:172px;} .span4{width:236px;} .span5{width:300px;} .span6{width:364px;} .span7{width:428px;} .span8{width:492px;} .span9{width:556px;} .span10{width:620px;} .span11{width:684px;} .span12{width:748px;} .offset1{margin-left:64px;} .offset2{margin-left:128px;} .offset3{margin-left:192px;} .offset4{margin-left:256px;} .offset5{margin-left:320px;} .offset6{margin-left:384px;} .offset7{margin-left:448px;} .offset8{margin-left:512px;} .offset9{margin-left:576px;} .offset10{margin-left:640px;} .offset11{margin-left:704px;} .offset12{margin-left:768px;}} +@media (max-width: 480px){.container{width:auto;padding:0 15px;} .row{margin-left:0;} [class*="span"]{float:none;display:block;width:auto;margin:0;} .modal{width:auto;margin:0;} .form-horizontal .control-group>label{float:none;width:auto;padding-top:0;text-align:left;} .form-horizontal .controls{margin-left:0;} .form-horizontal .control-list{padding-top:0;} .form-horizontal .form-actions{padding-left:0;}}@media (min-width: 480px) and (max-width: 768px){.container{width:auto;padding:0 10px;} .row{margin-left:0;} [class*="span"]{float:none;display:block;width:auto;margin:0;}}@media (min-width: 768px) and (max-width: 940px){.container{width:748px;} .span1{width:44px;} .span2{width:108px;} .span3{width:172px;} .span4{width:236px;} .span5{width:300px;} .span6{width:364px;} .span7{width:428px;} .span8{width:492px;} .span9{width:556px;} .span10{width:620px;} .span11{width:684px;} .span12{width:748px;} .offset1{margin-left:64px;} .offset2{margin-left:128px;} .offset3{margin-left:192px;} .offset4{margin-left:256px;} .offset5{margin-left:320px;} .offset6{margin-left:384px;} .offset7{margin-left:448px;} .offset8{margin-left:512px;} .offset9{margin-left:576px;} .offset10{margin-left:640px;} .offset11{margin-left:704px;} .offset12{margin-left:768px;}} diff --git a/docs/assets/css/docs.css b/docs/assets/css/docs.css index b618c44b87..0a31ac9984 100644 --- a/docs/assets/css/docs.css +++ b/docs/assets/css/docs.css @@ -21,6 +21,8 @@ section { /* Tweak topbar brand link to be super sleek -------------------------------------------------- */ body > .navbar-fixed .brand { + padding-right: 0; + padding-left: 0; float: right; font-weight: bold; color: #000; @@ -316,16 +318,24 @@ h2 + table { -------------------------------------------------- */ @media (max-width: 480px) { + /* Hide the nav for now */ body > .navbar-fixed .nav { display: none; } - .large-bird { - display: none; + /* Change up some type stuff */ + h1 small { + display: block; + line-height: 20px; } + /* Adjust the jumbotron */ + .jumbotron h1, + .jumbotron p { + margin-right: 0; + } .jumbotron h1 { - font-size: 36px; + font-size: 45px; margin-right: 0; } .jumbotron p { @@ -338,6 +348,20 @@ h2 + table { width: auto; margin: 36px 0; } + .jumbotron .btn { + font-size: 18px; + padding: 10px 14px; + } + + /* Popovers */ + .large-bird { + display: none; + } + .popover-well .popover-wrapper { + margin-left: 0; + } + + } @media (min-width: 768px) and (max-width: 940px) { diff --git a/docs/index.html b/docs/index.html index 49e6d04310..2cb5eb8e40 100644 --- a/docs/index.html +++ b/docs/index.html @@ -630,7 +630,7 @@ <p>To include a blockquote, wrap <code><blockquote></code> around <code><p></code> and <code><small></code> tags. Use the <code><small></code> element to cite your source and you'll get an em dash <code>&mdash;</code> before it.</p> <blockquote> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante venenatis dapibus posuere velit aliquet.</p> - <small>Dr. Julius Hibbert</small> + <small>Someone famous</small> </blockquote> </div> <div class="span7"> @@ -2140,7 +2140,7 @@ Lorem ipsum dolar sit amet illo error <a href="#" title="below">ipsum</a> verita <td>Javascript</td> <td> <p><a href="http://lesscss.org/">Download the latest Less.js</a> and include the path to it (and Bootstrap) in the <code>head</code>.</p> -<pre class="prettyprint linenums"> +<pre class="prettyprint"> <link rel="stylesheet/less" href="/path/to/bootstrap.less"> <script src="/path/to/less.js"></script> </pre> @@ -2156,7 +2156,7 @@ Lorem ipsum dolar sit amet illo error <a href="#" title="below">ipsum</a> verita </td> </tr> <tr> - <td>Less Mac app</td> + <td>Mac app</td> <td> <p><a href="http://incident57.com/less/">The unofficial Mac app</a> watches directories of .less files and compiles the code to local files after every save of a watched .less file.</p> <p>If you like, you can toggle preferences in the app for automatic minifying and which directory the compiled files end up in.</p> diff --git a/lib/responsive.less b/lib/responsive.less index 6cacccad99..75c33b1a8e 100644 --- a/lib/responsive.less +++ b/lib/responsive.less @@ -10,7 +10,7 @@ // Remove width from containers .container { width: auto; - padding: 0 10px; + padding: 0 15px; } // Undo negative margin on rows .row { diff --git a/lib/type.less b/lib/type.less index a490bf5fa1..d092b203da 100644 --- a/lib/type.less +++ b/lib/type.less @@ -24,7 +24,7 @@ p { h1, h2, h3, h4, h5, h6 { font-weight: bold; color: @grayDark; - text-rendering: optimizelegibility; + text-rendering: optimizelegibility; // Fix the character spacing for headings small { color: @grayLight; } @@ -185,7 +185,7 @@ pre { background-color: #f5f5f5; display: block; padding: (@baseLineHeight - 1) / 2; - margin: 0 0 @baseLineHeight; + margin: 0 0 @baseLineHeight / 2; line-height: @baseLineHeight; font-size: 12px; border: 1px solid #ccc; @@ -193,6 +193,5 @@ pre { .border-radius(3px); white-space: pre; white-space: pre-wrap; - word-wrap: break-word; - + word-break: break-all; } \ No newline at end of file -- GitLab From e616026d678239104b93cafca9a77ea74a4c0ddf Mon Sep 17 00:00:00 2001 From: Mark Otto <mark.otto@twitter.com> Date: Wed, 26 Oct 2011 21:04:14 -0700 Subject: [PATCH 049/318] update to docs to cleanup pagination for smartphones, fix some pagination inconsistencies --- bootstrap.css | 8 +++----- bootstrap.min.css | 4 ++-- docs/assets/css/docs.css | 24 ++++++++++++++++++++++++ docs/index.html | 21 ++++++--------------- lib/type.less | 4 ++-- 5 files changed, 37 insertions(+), 24 deletions(-) diff --git a/bootstrap.css b/bootstrap.css index c055a79c93..0baa88d110 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: Sat Oct 22 22:49:01 PDT 2011 + * Date: Wed Oct 26 21:03:54 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). @@ -479,15 +479,13 @@ blockquote { padding-left: 15px; } blockquote p { - font-size: 14px; + font-size: 16px; font-weight: 300; - line-height: 18px; + line-height: 22.5px; margin-bottom: 0; } blockquote small { display: block; - font-size: 12px; - font-weight: 300; line-height: 18px; color: #bfbfbf; } diff --git a/bootstrap.min.css b/bootstrap.min.css index 0aa8892072..b443f02e39 100644 --- a/bootstrap.min.css +++ b/bootstrap.min.css @@ -84,8 +84,8 @@ strong{font-style:inherit;font-weight:bold;} em{font-style:italic;font-weight:inherit;line-height:inherit;} .muted{color:#bfbfbf;} abbr{font-size:90%;text-transform:uppercase;border-bottom:1px dotted #ddd;cursor:help;} -blockquote{margin-bottom:18px;border-left:5px solid #eee;padding-left:15px;}blockquote p{font-size:14px;font-weight:300;line-height:18px;margin-bottom:0;} -blockquote small{display:block;font-size:12px;font-weight:300;line-height:18px;color:#bfbfbf;}blockquote small:before{content:'\2014 \00A0';} +blockquote{margin-bottom:18px;border-left:5px solid #eee;padding-left:15px;}blockquote p{font-size:16px;font-weight:300;line-height:22.5px;margin-bottom:0;} +blockquote small{display:block;line-height:18px;color:#bfbfbf;}blockquote small:before{content:'\2014 \00A0';} address{display:block;line-height:18px;margin-bottom:18px;} code,pre{padding:0 3px 2px;font-family:Menlo, Monaco, Andale Mono, Courier New, monospace;font-size:12px;-webkit-border-radius:3px;-moz-border-radius:3px;border-radius:3px;} code{background-color:#fee9cc;color:rgba(0, 0, 0, 0.75);padding:1px 3px;} diff --git a/docs/assets/css/docs.css b/docs/assets/css/docs.css index 0a31ac9984..59c64e4a7b 100644 --- a/docs/assets/css/docs.css +++ b/docs/assets/css/docs.css @@ -328,10 +328,18 @@ h2 + table { display: block; line-height: 20px; } + /* More space between sections */ + h2 { + margin-top: 27px; + } + h3 { + margin-top: 18px; + } /* Adjust the jumbotron */ .jumbotron h1, .jumbotron p { + text-align: center; margin-right: 0; } .jumbotron h1 { @@ -349,8 +357,15 @@ h2 + table { margin: 36px 0; } .jumbotron .btn { + display: block; font-size: 18px; padding: 10px 14px; + margin: 0 auto 10px; + } + + /* Don't space out quick links so much */ + .quick-links { + margin: 40px 0 0; } /* Popovers */ @@ -361,6 +376,15 @@ h2 + table { margin-left: 0; } + /* Space out the show-grid examples */ + .show-grid [class*="span"] { + margin-bottom: 5px; + } + + /* Unfloat the back to top link in footer */ + .footer .pull-right { + float: none; + } } diff --git a/docs/index.html b/docs/index.html index 2cb5eb8e40..cf3b8b8052 100644 --- a/docs/index.html +++ b/docs/index.html @@ -1715,38 +1715,29 @@ <li><a href="#">2</a></li> <li><a href="#">3</a></li> <li><a href="#">4</a></li> - <li><a href="#">5</a></li> - <li class="next"><a href="#">Next »</a></li> + <li class="next"><a href="#">Next →</a></li> </ul> </div> <div class="pagination"> <ul> - <li class="prev"><a href="#">← Previous</a></li> + <li class="prev"><a href="#">←</a></li> <li class="active"><a href="#">10</a></li> <li><a href="#">11</a></li> - <li><a href="#">12</a></li> <li class="disabled"><a href="#">…</a></li> - <li><a href="#">19</a></li> <li><a href="#">20</a></li> <li><a href="#">21</a></li> - <li class="next"><a href="#">Next »</a></li> + <li class="next"><a href="#">→</a></li> </ul> </div> <div class="pagination"> <ul> - <li class="prev"><a href="#">← Previous</a></li> + <li class="prev"><a href="#">←</a></li> <li><a href="#">10</a></li> <li><a href="#">11</a></li> - <li><a href="#">12</a></li> + <li class="active"><a href="#">12</a></li> <li><a href="#">13</a></li> <li><a href="#">14</a></li> - <li class="active"><a href="#">15</a></li> - <li><a href="#">16</a></li> - <li><a href="#">17</a></li> - <li><a href="#">18</a></li> - <li><a href="#">19</a></li> - <li><a href="#">20</a></li> - <li class="next"><a href="#">Next »</a></li> + <li class="next"><a href="#">→</a></li> </ul> </div> <pre class="prettyprint linenums"> diff --git a/lib/type.less b/lib/type.less index d092b203da..7f8044cd81 100644 --- a/lib/type.less +++ b/lib/type.less @@ -149,12 +149,12 @@ blockquote { border-left: 5px solid #eee; padding-left: 15px; p { - #font > .shorthand(300,14px,@baseLineHeight); + #font > .shorthand(300,16px,@baseLineHeight * 1.25); margin-bottom: 0; } small { display: block; - #font > .shorthand(300,12px,@baseLineHeight); + line-height: @baseLineHeight; color: @grayLight; &:before { content: '\2014 \00A0'; -- GitLab From 648c4689273647c321dd6e3979d910282e9a9339 Mon Sep 17 00:00:00 2001 From: Mark Otto <mark.otto@twitter.com> Date: Wed, 26 Oct 2011 23:11:56 -0700 Subject: [PATCH 050/318] breaking down the main page into subpages for easier, more comprehensive documentation --- docs/assets/css/docs.css | 11 +- docs/base-css.html | 885 ++++++++++++++++ docs/components.html | 705 ++++++++++++ docs/index.html | 2181 ++------------------------------------ docs/javascript.html | 120 ++- docs/less.html | 242 +++++ docs/scaffolding.html | 383 +++++++ lib/mixins.less | 7 + 8 files changed, 2426 insertions(+), 2108 deletions(-) create mode 100644 docs/base-css.html create mode 100644 docs/components.html create mode 100644 docs/less.html create mode 100644 docs/scaffolding.html diff --git a/docs/assets/css/docs.css b/docs/assets/css/docs.css index 59c64e4a7b..8ed81e713a 100644 --- a/docs/assets/css/docs.css +++ b/docs/assets/css/docs.css @@ -14,9 +14,6 @@ body { background-image: url(../img/grid-18px-masked.png); background-repeat: repeat-x; } -section { - padding-top: 60px; -} /* Tweak topbar brand link to be super sleek -------------------------------------------------- */ @@ -40,7 +37,7 @@ body > .navbar-fixed .brand:hover { } .jumbotron h1 { margin-right: 40%; - margin-bottom: 10px; + margin-bottom: 9px; font-size: 90px; letter-spacing: -1px; line-height: 1; @@ -100,15 +97,15 @@ body > .navbar-fixed .brand:hover { ------------------------- */ /* supporting docs pages */ .subhead { - padding-bottom: 18px; - border-bottom: 3px solid #eee; + padding-bottom: 14px; + border-bottom: 3px solid #e5e5e5; } .subhead h1, .subhead p { margin-right: 0; } .subhead h1 { - font-size: 40px; + font-size: 45px; } diff --git a/docs/base-css.html b/docs/base-css.html new file mode 100644 index 0000000000..e3b3782c0a --- /dev/null +++ b/docs/base-css.html @@ -0,0 +1,885 @@ +<!DOCTYPE html> +<html lang="en"> + <head> + <meta charset="utf-8"> + <title>Bootstrap, from Twitter</title> + <meta name="description" content=""> + <meta name="author" content=""> + + <!-- 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]--> + + <!-- Le styles --> + <link href="../bootstrap.css" rel="stylesheet"> + <link href="assets/css/docs.css" rel="stylesheet"> + <link href="assets/js/google-code-prettify/prettify.css" rel="stylesheet"> + + <!-- Le fav and touch icons --> + <link rel="shortcut icon" type="image/x-icon" href="assets/ico/favicon.ico"> + <link rel="apple-touch-icon" href="assets/ico/bootstrap-apple-57x57.png"> + <link rel="apple-touch-icon" sizes="72x72" href="assets/ico/bootstrap-apple-72x72.png"> + <link rel="apple-touch-icon" sizes="114x114" href="assets/ico/bootstrap-apple-114x114.png"> + </head> + + <body> + + <!-- Navbar + ================================================== --> + <div class="navbar navbar-fixed"> + <div class="navbar-inner"> + <div class="container"> + <a class="brand" href="./index.html">Bootstrap</a> + <ul class="nav"> + <li><a href="./index.html">Overview</a></li> + <li><a href="./scaffolding.html">Scaffolding</a></li> + <li class="active"><a href="./base-css.html">Base CSS</a></li> + <li><a href="./components.html">Components</a></li> + <li><a href="./javascript.html">Javascript</a></li> + <li><a href="./less.html">Using LESS</a></li> + </ul> + </div> + </div> + </div> + + <div class="container"> + + <!-- Masthead + ================================================== --> + <header class="jumbotron subhead" id="overview"> + <h1>Base CSS</h1> + <p class="lead">The core typography, form, and table styles of Bootstrap</p> + </header> + + +<!-- Typography +================================================== --> +<section id="typography"> + <div class="page-header"> + <h1>Typography <small>Headings, paragraphs, lists, and other inline type elements</small></h1> + </div> + + <h2>Headings & body copy</h2> + + <!-- Headings & Paragraph Copy --> + <div class="row"> + <div class="span4"> + <h3>Typographic scale</h3> + <p>The entire typographic grid is based on two Less variables in our preboot.less file: <code>@baseFontSize</code> and <code>@baseLineHeight</code>. The first is the base font-size used throughout and the second is the base line-height.</p> + <p>We use those variables, and some math, to create the margins, paddings, and line-heights of all our type and more.</p> + </div> + <div class="span4"> + <h3>Example body text</h3> + <p>Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p> + <p>Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Donec sed odio dui.</p> + </div> + <div class="span4"> + <div class="well"> + <h1>h1. Heading 1</h1> + <h2>h2. Heading 2</h2> + <h3>h3. Heading 3</h3> + <h4>h4. Heading 4</h4> + <h5>h5. Heading 5</h5> + <h6>h6. Heading 6</h6> + </div> + </div> + </div> + + <!-- Misc Elements --> + <h2>Emphasis, address, and abbreviation</h2> + <table class="zebra-striped"> + <thead> + <tr> + <th>Element</th> + <th>Description</th> + <th>Usage</th> + </tr> + </thead> + <tbody> + <tr> + <td> + <code><strong></code> + </td> + <td> + For emphasizing a snippet of text with <strong>important</strong> + </td> + <td> + <span class="muted">None</span> + </td> + </tr> + <tr> + <td> + <code><em></code> + </td> + <td> + For emphasizing a snippet of text with <em>stress</em> + </td> + <td> + <span class="muted">None</span> + </td> + </tr> + <tr> + <td> + <code><abbr></code> + </td> + <td> + Wraps abbreviations and acronyms to show the expanded version on hover + </td> + <td> + Include optional <code>title</code> for expanded text + </td> + </tr> + <tr> + <td> + <code><address></code> + </td> + <td> + For contact information for its nearest ancestor or the entire body of work + </td> + <td> + Preserve formatting by ending all lines with <code><br></code> + </td> + </tr> + </tbody> + </table> + + <div class="row"> + <div class="span4"> + <h3>Using emphasis</h3> + <p><a href="#">Fusce dapibus</a>, <strong>tellus ac cursus commodo</strong>, <em>tortor mauris condimentum nibh</em>, ut fermentum massa justo sit amet risus. Maecenas faucibus mollis interdum. Nulla vitae elit libero, a pharetra augue.</p> + <p><strong>Note:</strong> Feel free to use <code><b></code> and <code><i></code> in HTML5, but their usage has changed a bit. <code><b></code> is meant to highlight words or phrases without conveying additional importance while <code><i></code> is mostly for voice, technical terms, etc.</p> + </div> + <div class="span4"> + <h3>Example addresses</h3> + <p>Here are two examples of how the <code><address></code> tag can be used:</p> + <address> + <strong>Twitter, Inc.</strong><br> + 795 Folsom Ave, Suite 600<br> + San Francisco, CA 94107<br> + <abbr title="Phone">P:</abbr> (123) 456-7890 + </address> + <address> + <strong>Full Name</strong><br> + <a mailto="#">first.last@gmail.com</a> + </address> + </div> + <div class="span4"> + <h3>Example abbreviations</h3> + <p>Abbreviations are styled with uppercase text and a light dotted bottom border. They also have a help cursor on hover so users have extra indication something will be shown on hover.</p> + <p><abbr title="HyperText Markup Language">HTML</abbr> is the best thing since sliced bread.</p> + <p>An abbreviation of the word attribute is <abbr title="attribute">attr</abbr>.</p> + </div> + </div> + + + <!-- Blockquotes --> + <h2>Blockquotes</h2> + <div class="row"> + <div class="span5"> + <p>To include a blockquote, wrap <code><blockquote></code> around <code><p></code> and <code><small></code> tags. Use the <code><small></code> element to cite your source and you'll get an em dash <code>&mdash;</code> before it.</p> + <blockquote> + <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante venenatis dapibus posuere velit aliquet.</p> + <small>Someone famous</small> + </blockquote> + </div> + <div class="span7"> +<pre class="prettyprint linenums"> +<blockquote> + <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante venenatis dapibus posuere velit aliquet.</p> + <small>Dr. Julius Hibbert</small> +</blockquote> +</pre> + </div> + </div> + + <!-- Lists --> + <h2>Lists</h2> + <div class="row"> + <div class="span3"> + <h4>Unordered <code><ul></code></h4> + <ul> + <li>Lorem ipsum dolor sit amet</li> + <li>Consectetur adipiscing elit</li> + <li>Integer molestie lorem at massa</li> + <li>Facilisis in pretium nisl aliquet</li> + <li>Nulla volutpat aliquam velit + <ul> + <li>Phasellus iaculis neque</li> + <li>Purus sodales ultricies</li> + <li>Vestibulum laoreet porttitor sem</li> + <li>Ac tristique libero volutpat at</li> + </ul> + </li> + <li>Faucibus porta lacus fringilla vel</li> + <li>Aenean sit amet erat nunc</li> + <li>Eget porttitor lorem</li> + </ul> + </div> + <div class="span3"> + <h4>Unstyled <code><ul.unstyled></code></h4> + <ul class="unstyled"> + <li>Lorem ipsum dolor sit amet</li> + <li>Consectetur adipiscing elit</li> + <li>Integer molestie lorem at massa</li> + <li>Facilisis in pretium nisl aliquet</li> + <li>Nulla volutpat aliquam velit + <ul> + <li>Phasellus iaculis neque</li> + <li>Purus sodales ultricies</li> + <li>Vestibulum laoreet porttitor sem</li> + <li>Ac tristique libero volutpat at</li> + </ul> + </li> + <li>Faucibus porta lacus fringilla vel</li> + <li>Aenean sit amet erat nunc</li> + <li>Eget porttitor lorem</li> + </ul> + </div> + <div class="span3"> + <h4>Ordered <code><ol></code></h4> + <ol> + <li>Lorem ipsum dolor sit amet</li> + <li>Consectetur adipiscing elit</li> + <li>Integer molestie lorem at massa</li> + <li>Facilisis in pretium nisl aliquet</li> + <li>Nulla volutpat aliquam velit</li> + <li>Faucibus porta lacus fringilla vel</li> + <li>Aenean sit amet erat nunc</li> + <li>Eget porttitor lorem</li> + </ol> + </div> + <div class="span3"> + <h4>Description <code><dl></code></h4> + <dl> + <dt>Description lists</dt> + <dd>A description list is perfect for defining terms.</dd> + <dt>Euismod</dt> + <dd>Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit.</dd> + <dd>Donec id elit non mi porta gravida at eget metus.</dd> + <dt>Malesuada porta</dt> + <dd>Etiam porta sem malesuada magna mollis euismod.</dd> + </dl> + </div> + </div><!-- /row --> + + + <!-- Code --> + + <h2>Code <small>Inline and block</small></h2> + <table class="zebra-striped"> + <thead> + <tr> + <th style="width: 190px;">Element</th> + <th>Result</th> + </tr> + </thead> + <tbody> + <tr> + <td><code><code></code></td> + <td>In a line of text like this, your wrapped code will look like this <code><html></code> element.</td> + </tr> + <tr> + <td><code><pre></code></td> + <td> +<pre><div> + <h1>Heading</h1> + <p>Something right here...</p> +</div></pre> + <p><strong>Note:</strong> Be sure to keep code within <code>pre</code> tags as close to the left as possible; it will render all tabs.</p> + </td> + </tr> + <tr> + <td><code><pre class="prettyprint"></code></td> + <td> + <p>Using the google-code-prettify library, you're blocks of code get a slightly different visual style and automatic syntax highlighting. You can also add an additional class to add line numbers.</p> +<pre class="prettyprint"><div> + <h1>Heading</h1> + <p>Something right here...</p> +</div></pre> +<pre class="prettyprint linenums"><div> + <h1>Heading</h1> + <p>Something right here...</p> +</div></pre> + <p><a href="http://code.google.com/p/google-code-prettify/">Download google-code-prettify</a> and view the readme for <a href="http://google-code-prettify.googlecode.com/svn/trunk/README.html">how to use</a>.</p> + </td> + </tr> + </tbody> + </table> + + <!-- Labels --> + <h2>Inline labels <small>for special attention</small></h2> + <table class="zebra-striped"> + <thead> + <tr> + <th style="width: 190px;">Labels</th> + <th>Markup</th> + </tr> + </thead> + <tbody> + <tr> + <td> + <span class="label">Default</span> + </td> + <td> + <code><span class="label">Default</span></code> + </td> + </tr> + <tr> + <td> + <span class="label success">New</span> + </td> + <td> + <code><span class="label success">New</span></code> + </td> + </tr> + <tr> + <td> + <span class="label warning">Warning</span> + </td> + <td> + <code><span class="label warning">Warning</span></code> + </td> + </tr> + <tr> + <td> + <span class="label important">Important</span> + </td> + <td> + <code><span class="label important">Important</span></code> + </td> + </tr> + <tr> + <td> + <span class="label notice">Notice</span> + </td> + <td> + <code><span class="label notice">Notice</span></code> + </td> + </tr> + </tbody> + </table> + +</section> + + + +<!-- Tables +================================================== --> +<section id="tables"> + <div class="page-header"> + <h1>Tables <small>For, you guessed it, tabular data</small></h1> + </div> + + <h2>Table markup</h2> + <div class="row"> + <div class="span8"> + <table class="zebra-striped"> + <thead> + <tr> + <th>Tag</th> + <th>Description</th> + </tr> + </thead> + <tbody> + <tr> + <td> + <code><table></code> + </td> + <td> + Wrapping element for displaying data in a tabular format + </td> + </tr> + <tr> + <td> + <code><thead></code> + </td> + <td> + Container element for table header rows (<code><tr></code>) to label table columns + </td> + </tr> + <tr> + <td> + <code><tbody></code> + </td> + <td> + Container element for table rows (<code><tr></code>) in the body of the table + </td> + </tr> + <tr> + <td> + <code><tr></code> + </td> + <td> + Container element for a set of table cells (<code><td></code> or <code><th></code>) that appears on a single row + </td> + </tr> + <tr> + <td> + <code><td></code> + </td> + <td> + Default table cell + </td> + </tr> + <tr> + <td> + <code><th></code> + </td> + <td> + Special table cell for column (or row, depending on scope and placement) labels<br> + Must be used within a <code><thead></code> + </td> + </tr> + <tr> + <td> + <code><caption></code> + </td> + <td> + Description or summary of what the table holds, especially useful for screen readers + </td> + </tr> + </tbody> + </table> + </div> + <div class="span4"> +<pre class="prettyprint linenums"> +<table> + <thead> + <tr> + <th>...</th> + <th>...</th> + </tr> + </thead> + <tbody> + <tr> + <td>...</td> + <td>...</td> + </tr> + </tbody> +</table> +</pre> + </div> + </div> + + <h2>Example tables</h2> + <h3>1. Default table styles</h3> + <p>All tables will be automatically styled with only the essential borders to ensure readability and maintain structure. No need to add extra classes or attributes.</p> + <table> + <thead> + <tr> + <th>#</th> + <th>First Name</th> + <th>Last Name</th> + <th>Language</th> + </tr> + </thead> + <tbody> + <tr> + <td>1</td> + <td>Some</td> + <td>One</td> + <td>English</td> + </tr> + <tr> + <td>2</td> + <td>Joe</td> + <td>Sixpack</td> + <td>English</td> + </tr> + <tr> + <td>3</td> + <td>Stu</td> + <td>Dent</td> + <td>Code</td> + </tr> + </tbody> + </table> +<pre class="prettyprint linenums"> +<table> + ... +</table></pre> + <h3>2. Zebra-striped</h3> + <p>Get a little fancy with your tables by adding zebra-striping—just add the <code>.zebra-striped</code> class.</p> + <table class="zebra-striped"> + <thead> + <tr> + <th>#</th> + <th>First Name</th> + <th>Last Name</th> + <th>Language</th> + </tr> + </thead> + <tbody> + <tr> + <td>1</td> + <td>Some</td> + <td>One</td> + <td>English</td> + </tr> + <tr> + <td>2</td> + <td>Joe</td> + <td>Sixpack</td> + <td>English</td> + </tr> + <tr> + <td>3</td> + <td>Stu</td> + <td>Dent</td> + <td>Code</td> + </tr> + </tbody> + </table> + <p><strong>Note:</strong> Zebra-striping is a progressive enhancement not available for older browsers like IE8 and below.</p> +<pre class="prettyprint linenums"> +<table class="zebra-striped"> +... +</table></pre> + <h3>3. Zebra-striped w/ TableSorter.js</h3> + <p>Taking the previous example, we improve the usefulness of our tables by providing sorting functionality via <a href="http://jquery.com">jQuery</a> and the <a href="http://tablesorter.com/docs/">Tablesorter</a> plugin. <strong>Click any column’s header to change the sort.</strong></p> + <table class="zebra-striped" id="sortTableExample"> + <thead> + <tr> + <th>#</th> + <th class="yellow">First Name</th> + <th class="blue">Last Name</th> + <th class="green">Language</th> + </tr> + </thead> + <tbody> + <tr> + <td>1</td> + <td>Your</td> + <td>One</td> + <td>English</td> + </tr> + <tr> + <td>2</td> + <td>Joe</td> + <td>Sixpack</td> + <td>English</td> + </tr> + <tr> + <td>3</td> + <td>Stu</td> + <td>Dent</td> + <td>Code</td> + </tr> + </tbody> + </table> +<pre class="prettyprint linenums"> +<script src="js/jquery/jquery.tablesorter.min.js"></script> +<script > + $(function() { + $("table#sortTableExample").tablesorter({ sortList: [[1,0]] }); + }); +</script> +<table class="zebra-striped"> + ... +</table></pre> + +</section> + + + +<!-- Forms +================================================== --> +<section id="forms"> + <div class="page-header"> + <h1>Forms</h1> + </div> + <div class="row"> + <div class="span4"> + <h3>Four types of forms</h3> + <p>With 2.0, we now have four types of forms to choose from:</p> + <ul> + <li>Search form for a super-rounded input and optional button</li> + <li>Inline form for a series of elements on one line</li> + <li>Horizontal form for left-aligned labels</li> + <li>Vertical form for stacked labels and inputs</li> + </ul> + </div> + <div class="span4"> + <h3></h3> + </div> + </div><!-- /row --> + <div class="row"> + <div class="span3"> + <h2>Search form</h2> + </div> + <div class="span9"> + <div class="well"> + <form class="form-search"> + <input type="text" class="search-query"> + <button type="submit" class="btn">Search</button> + </form> + </div><!--/well--> + </div> + </div><!-- /row --> + <div class="row"> + <div class="span3"> + <h2>Inline form</h2> + </div> + <div class="span9"> + <div class="well"> + <form class="form-inline"> + <h4>Some directional text</h4> + <p>And maybe some kind of optional supporting text right here.</p> + <input type="text" class="input-medium"> + <input type="text" class="input-medium"> + <input type="text" class="input-medium"> + <button type="submit" class="btn">Search</button> + </form> + </div><!--/well--> + </div> + </div><!-- /row --> + <div class="row"> + <div class="span3"> + <h2>Horizontal form</h2> + </div> + <div class="span9"> + <form class="form-horizontal"> + <legend>Example form</legend> + <fieldset class="control-group"> + <label class="control-label" for="input01">Text input</label> + <div class="controls"> + <input type="text" class="xlarge" name="input01"> + <p class="help-text">Help text here. Be sure to fill this out like so, or else!</p> + </div> + </fieldset> + <fieldset class="control-group"> + <label class="control-label" for="select01">Select list</label> + <div class="controls"> + <select name="select01"> + <option>1</option> + <option>2</option> + <option>3</option> + <option>4</option> + <option>5</option> + </select> + </div> + </fieldset> + <fieldset class="control-group"> + <label class="control-label" for="multiSelect">Multi-select</label> + <div class="controls"> + <select multiple="multiple" name="multiSelect"> + <option>1</option> + <option>2</option> + <option>3</option> + <option>4</option> + <option>5</option> + </select> + </div> + </fieldset> + <legend>Example form</legend> + <fieldset class="control-group"> + <label class="control-label" for="fileInput">File input</label> + <div class="controls"> + <input class="input-file" id="fileInput" name="fileInput" type="file"> + </div> + </fieldset> + <fieldset class="control-group has-error"> + <label class="control-label" for="inputError">Input with error</label> + <div class="controls"> + <input type="text" name="inputError"> + </div> + </fieldset> + <fieldset class="control-group has-error"> + <label class="control-label" for="textareaError">Textarea with error</label> + <div class="controls"> + <textarea class="input-xlarge" rows="3"></textarea> + </div> + </fieldset> + <fieldset class="control-group"> + <label class="control-label" for="optionsCheckboxes">Checkboxes</label> + <div class="controls"> + <div class="control-list"> + <label class="checkbox"> + <input type="checkbox" name="optionsCheckboxes" value="option1"> + Option one is this and that—be sure to include why it’s great + </label> + <label class="checkbox"> + <input type="checkbox" name="optionsCheckboxes" value="option2"> + Option two can also be checked and included in form results + </label> + <label class="checkbox"> + <input type="checkbox" name="optionsCheckboxes" value="option3"> + Option three can—yes, you guessed it—also be checked and included in form results + </label> + <label class="checkbox"> + <input type="checkbox" name="optionsCheckboxes" value="option4"> + Option four cannot be checked as it is disabled + </label> + </div> + <p class="help-text"><strong>Note:</strong> Labels surround all the options for much larger click areas and a more usable form.</p> + </div> + </fieldset> + <fieldset class="control-group"> + <label class="control-label" for="optionsRadios">Radio buttons</label> + <div class="controls"> + <div class="control-list"> + <label> + <input type="radio" checked name="optionsRadios" value="option1"> + <span>Option one is this and that—be sure to include why it’s great</span> + </label> + <label> + <input type="radio" name="optionsRadios" value="option2"> + <span>Option two can is something else and selecting it will deselect options 1</span> + </label> + </div> + <p class="help-text"><strong>Note:</strong> Labels surround all the options for much larger click areas and a more usable form.</p> + </div> + </fieldset> + <fieldset class="form-actions"> + <button type="submit" class="btn primary">Save changes</button> + <button type="reset" class="btn">Cancel</button> + </fieldset> + </form> + </div> + </div><!-- /row --> + <div class="row"> + <div class="span3"> + <h2>Vertical form</h2> + </div> + <div class="span9"> + <form class="form-vertical"> + <legend>Example form</legend> + <fieldset class="control-group"> + <label class="control-label" for="input01">Label</label> + <div class="controls"> + <input type="text" class="xlarge" name="input01"> + <p class="help-text">Be sure to fill this out like so, or else!</p> + </div> + </fieldset> + <fieldset class="control-group"> + <label class="control-label" for="select01">Label</label> + <div class="controls"> + <select name="select01"></select> + </div> + </fieldset> + <fieldset class="control-group"> + <label class="control-label" for="input02">Label</label> + <div class="controls"> + <div class="control-list"> + <label class="checkbox"> + <input type="checkbox"> Something something something something something + </label> + <label class="checkbox"> + <input type="checkbox"> Something something something something + </label> + <label class="checkbox"> + <input type="checkbox"> Something something something + </label> + </div> + </div> + </fieldset> + <fieldset class="form-actions"> + <button type="submit" class="btn primary">Save changes</button> + <button type="reset" class="btn">Cancel</button> + </fieldset> + </form> + </div> + </div><!-- /row --> + + <div class="row"> + <div class="span3"> + <h2>Buttons</h2> + <p>As a convention, buttons are used for actions while links are used for objects. For instance, "Download" could be a button and "recent activity" could be a link.</p> + <p>All buttons default to a light gray style, but a number of functional classes can be applied for different color styles. These classes include a blue <code>.primary</code> class, a light-blue <code>.info</code> class, a green <code>.success</code> class, and a red <code>.danger</code> class.</p> + </div> + <div class="span9"> + <h3>Example buttons</h3> + <p>Button styles can be applied to anything with the <code>.btn</code> applied. Typically you’ll want to apply these to only <code><a></code>, <code><button></code>, and select <code><input></code> elements. Here’s how it looks:</p> + <div class="well" style="padding: 14px 19px;"> + <button class="btn primary">Primary</button> <button class="btn">Default</button> <button class="btn info">Info</button> <button class="btn success">Success</button> <button class="btn danger">Danger</button> + </div> + <h3>Alternate sizes</h3> + <p>Fancy larger or smaller buttons? Have at it!</p> + <div class="well"> + <a href="#" class="btn large primary">Primary action</a> + <a href="#" class="btn large">Action</a> + </div> + <div class="well" style="padding: 16px 19px;"> + <a href="#" class="btn small primary">Primary action</a> + <a href="#" class="btn small">Action</a> + </div> + <h3>Disabled state</h3> + <p>For buttons that are not active or are disabled by the app for one reason or another, use the disabled state. That’s <code>.disabled</code> for links and <code>:disabled</code> for <code><button></code> elements.</p> + <h4>Links</h4> + <div class="well"> + <a href="#" class="btn large primary disabled">Primary action</a> + <a href="#" class="btn large disabled">Action</a> + </div> + <h4>Buttons</h4> + <div class="well"> + <button class="btn large primary disabled" disabled="disabled">Primary action</button> <button class="btn large" disabled>Action</button> + </div> + </div> + </div><!-- /row --> + + <div class="row"> + <div class="span3"> + <h2>Button groups</h2> + </div> + <div class="span9"> + <h3>Example</h3> + <div class="well"> + <div class="btn-group"> + <a class="btn" href="#">Left</a> + <a class="btn" href="#">Middle</a> + <a class="btn" href="#">Right</a> + </div> + </div> + <div class="well"> + <div class="btn-toolbar"> + <div class="btn-group"> + <a class="btn" href="#">1</a> + <a class="btn" href="#">2</a> + <a class="btn" href="#">3</a> + <a class="btn" href="#">4</a> + <a class="btn" href="#">5</a> + </div> + <div class="btn-group"> + <a class="btn" href="#">6</a> + <a class="btn" href="#">7</a> + <a class="btn" href="#">8</a> + </div> + <div class="btn-group"> + <a class="btn" href="#">9</a> + </div> + <div class="btn-group"> + <a class="btn" href="#">10</a> + </div> + </div> + </div> + </div> + </div><!-- /row --> + +</section> + + + <!-- Footer + ================================================== --> + <footer class="footer"> + <p class="pull-right"><a href="#">Back to top</a></p> + <p> + Designed and built with all the love in the world <a href="http://twitter.com/twitter" target="_blank">@twitter</a> by <a href="http://twitter.com/mdo" target="_blank">@mdo</a> and <a href="http://twitter.com/fat" target="_blank">@fat</a>.<br> + Code licensed under the <a href="http://www.apache.org/licenses/LICENSE-2.0" target="_blank">Apache License v2.0</a>. Documentation licensed under <a href="http://creativecommons.org/licenses/by/3.0/">CC BY 3.0</a>. + </p> + </footer> + </div><!-- /container --> + + <!-- Le javascript --> + <!-- Placed at the end of the document so the pages load faster --> + <script src="http://code.jquery.com/jquery-1.5.2.min.js"></script> + <script src="http://autobahn.tablesorter.com/jquery.tablesorter.min.js"></script> + <script src="assets/js/google-code-prettify/prettify.js"></script> + <script>$(function () { prettyPrint() })</script> + <script src="../js/bootstrap-transitions.js"></script> + <script src="../js/bootstrap-dropdown.js"></script> + <script src="../js/bootstrap-twipsy.js"></script> + <script src="../js/bootstrap-scrollspy.js"></script> + <script src="assets/js/application.js"></script> + </body> +</html> diff --git a/docs/components.html b/docs/components.html new file mode 100644 index 0000000000..0e3f0a223f --- /dev/null +++ b/docs/components.html @@ -0,0 +1,705 @@ +<!DOCTYPE html> +<html lang="en"> + <head> + <meta charset="utf-8"> + <title>Bootstrap, from Twitter</title> + <meta name="description" content=""> + <meta name="author" content=""> + + <!-- 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]--> + + <!-- Le styles --> + <link href="../bootstrap.css" rel="stylesheet"> + <link href="assets/css/docs.css" rel="stylesheet"> + <link href="assets/js/google-code-prettify/prettify.css" rel="stylesheet"> + + <!-- Le fav and touch icons --> + <link rel="shortcut icon" type="image/x-icon" href="assets/ico/favicon.ico"> + <link rel="apple-touch-icon" href="assets/ico/bootstrap-apple-57x57.png"> + <link rel="apple-touch-icon" sizes="72x72" href="assets/ico/bootstrap-apple-72x72.png"> + <link rel="apple-touch-icon" sizes="114x114" href="assets/ico/bootstrap-apple-114x114.png"> + </head> + + <body> + + <!-- Navbar + ================================================== --> + <div class="navbar navbar-fixed"> + <div class="navbar-inner"> + <div class="container"> + <a class="brand" href="./index.html">Bootstrap</a> + <ul class="nav"> + <li><a href="./index.html">Overview</a></li> + <li><a href="./scaffolding.html">Scaffolding</a></li> + <li><a href="./base-css.html">Base CSS</a></li> + <li class="active"><a href="./components.html">Components</a></li> + <li><a href="./javascript.html">Javascript plugins</a></li> + <li><a href="./less.html">Using LESS</a></li> + </ul> + </div> + </div> + </div> + + <div class="container"> + + <!-- Masthead + ================================================== --> + <header class="jumbotron subhead" id="overview"> + <h1>Components</h1> + <p class="lead">Reusable patterns for navigation, alerts, popovers, and much more</p> + </header> + + +<!-- 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="span3"> + <h2>Media grid</h2> + <p>Display thumbnails of varying sizes on pages with a low HTML footprint and minimal styles.</p> + </div> + <div class="span9"> + <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"> + <div class="page-header"> + <h1>Navigation</h1> + </div> + <h2>Fixed navbar</h2> + <div class="navbar navbar-static" data-dropdown="dropdown"> + <div class="navbar-inner"> + <div class="container"> + <a class="brand" href="#">Project Name</a> + <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 class="form-search navbar-search pull-left" action=""> + <input type="text" class="search-query span2" placeholder="Search"> + </form> + <ul class="nav secondary-nav"> + <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> + </div> + </div><!-- /navbar-inner --> + </div><!-- /navbar --> + + <div class="row"> + <div class="span4"> + <h4>What is it</h4> + <p>Our navbar is a fixed bar that houses a website’s logo or name, primary navigation, and search form.</p> + </div> + <div class="span4"> + <h4>Customizable</h4> + <p>All elements within, and the entire navbar as well, are optional. You can choose to include a logo/name, nav, search, and a secondary nav—or any combination of that.</p> + </div> + <div class="span4"> + <h4>Dropdowns included</h4> + <p>As part of the main navigation, we’ve included the ability for you to add dropdowns to your nav. Check out the secondary nav above (right aligned) to see how it’s done. Dropdowns <code><li></code> tags also support <code>.active</code> for showing current page selection.</p> + </div> + </div> + <p><strong>Note:</strong> When using the navbar on any page, be sure to account for the overlap it causes by adding <code>padding-top: 40px;</code> to your <code><body></code>.</p> + + <br> + + <div class="row"> + <div class="span3"> + <h2>Tabs and pills</h2> + <p>Create simple secondary navigation with a <code><ul></code>. Swap between tabs or pills by adding the appropriate class.</p> + <p>Great for sub-sections of content like our account settings pages and user timelines for toggling between pages of like content. Available in tabbed or pill styles.</p> + </div> + <div class="span9"> + <h3>Basic tabs example</h3> + <p>Tabs can be used as regular navigation (loading external pages in the same tab) or as tabbable content areas for swapping out panes of content. We have a <a href="./javascript.html#tabs">tabs plugin</a> that can be used to integrate the latter.</p> + <ul class="tabs"> + <li class="active"><a href="#">Home</a></li> + <li><a href="#">Profile</a></li> + <li><a href="#">Messages</a></li> + <li><a href="#">Settings</a></li> + <li><a href="#">Contact</a></li> + <li class="dropdown" data-dropdown="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"> +<ul class="tabs"> + <li class="active"><a href="#">Home</a></li> + <li><a href="#">Profile</a></li> + <li><a href="#">Messages</a></li> + <li><a href="#">Settings</a></li> + <li><a href="#">Contact</a></li> +</ul> +</pre> + <h3>Alternate tabs</h3> + <p>You can also use tabs that are stacked on either side of an element, or on the bottom.</p> + <div class="row"> + <div class="span2"> + <div class="clearfix"> + <ul class="tabs tabs-left"> + <li class="active"><a href="#">Active link</a></li> + <li><a href="#">Link</a></li> + <li><a href="#">Linky link</a></li> + <li><a href="#">What up link</a></li> + </ul> + </div> + </div> + <div class="span2"> + <div class="clearfix"> + <ul class="tabs tabs-right"> + <li class="active"><a href="#">Active link</a></li> + <li><a href="#">Link</a></li> + <li><a href="#">Linky link</a></li> + <li><a href="#">What up link</a></li> + </ul> + </div> + </div> + <div class="span5"> + <div class="clearfix"> + <ul class="tabs tabs-bottom"> + <li class="active"><a href="#">Active link</a></li> + <li><a href="#">Link</a></li> + <li><a href="#">Linky link</a></li> + </ul> + </div> + </div> + </div> + <h3>Tabbable tabs</h3> + <p>As mentioned above, you can bring your tabs to life with a simple plugin. Here we have integrated all four variations of the tabs—default (top), right, bottom, left—with example tab areas.</p> + + <div class="tabbable"> + <ul class="tabs" data-tabs="tabs"> + <li class="active"><a href="#1">Section 1</a></li> + <li><a href="#2">Section 2</a></li> + <li><a href="#3">Section 3</a></li> + <li><a href="#4">Section 4</a></li> + </ul> + <div class="tab-content"> + <div class="tab-pane active" id="1"> + <p>Oh hai #1!</p> + </div> + <div class="tab-pane" id="2"> + <p>Oh hai #2!</p> + </div> + <div class="tab-pane" id="3"> + <p>Oh hai #3!</p> + </div> + <div class="tab-pane" id="4"> + <p>Oh hai #4!</p> + </div> + </div> + </div> + + <div class="row"> + <div class="span4"> + <div class="tabbable tabs-left"> + <ul class="tabs" data-tabs="tabs"> + <li class="active"><a href="#1">Section 1</a></li> + <li><a href="#2">Section 2</a></li> + <li><a href="#3">Section 3</a></li> + </ul> + <div class="tab-content" id="myTabContent2"> + <div class="tab-pane active" id="1"> + <h4>Section 1</h4> + <p>Oh hai!</p> + </div> + <div class="tab-pane" id="2"> + <h4>Section 2</h4> + <p>Oh hai!</p> + </div> + <div class="tab-pane" id="3"> + <h4>Section 3</h4> + <p>Oh hai!</p> + </div> + </div> + </div> + </div> + <div class="span5"> + <div class="tabbable tabs-right"> + <ul class="tabs" data-tabs="tabs"> + <li class="active"><a href="#1">Section 1</a></li> + <li><a href="#2">Section 2</a></li> + <li><a href="#3">Section 3</a></li> + </ul> + <div class="tab-content" id="myTabContent3"> + <div class="tab-pane active" id="1"> + <h4>Section 1</h4> + <p>Oh hai!</p> + </div> + <div class="tab-pane" id="2"> + <h4>Section 2</h4> + <p>Oh hai!</p> + </div> + <div class="tab-pane" id="3"> + <h4>Section 3</h4> + <p>Oh hai!</p> + </div> + </div> + </div> + </div> + </div> + + <div class="tabbable tabs-bottom"> + <div class="tab-content"> + <div class="tab-pane active" id="1"> + <p>Oh hai #1!</p> + </div> + <div class="tab-pane" id="2"> + <p>Oh hai #2!</p> + </div> + <div class="tab-pane" id="3"> + <p>Oh hai #3!</p> + </div> + <div class="tab-pane" id="4"> + <p>Oh hai #4!</p> + </div> + </div> + <ul class="tabs" data-tabs="tabs"> + <li class="active"><a href="#1">Section 1</a></li> + <li><a href="#2">Section 2</a></li> + <li><a href="#3">Section 3</a></li> + <li><a href="#4">Section 4</a></li> + </ul> + </div> + + + <p>In addition to tabs, we have pills! Though a bit more limited in functionality, they share much of the same markup.</p> + <hr> + <h3>Basic pills example</h3> + <ul class="pills"> + <li class="active"><a href="#">Home</a></li> + <li><a href="#">Profile</a></li> + <li><a href="#">Messages</a></li> + <li><a href="#">Settings</a></li> + <li><a href="#">Contact</a></li> + </ul> +<pre class="prettyprint linenums"> +<ul class="pills"> + <li class="active"><a href="#">Home</a></li> + <li><a href="#">Profile</a></li> + <li><a href="#">Messages</a></li> + <li><a href="#">Settings</a></li> + <li><a href="#">Contact</a></li> +</ul> +</pre> + <h3>Vertical pill nav</h3> + <p>With a pill-style nav, you can also stack the list items to have a simple sidebar. We don't offer left or right aligned versions here because that's easy enough to customize based on your own needs</p> + <ul class="pills pills-vertical span4"> + <li class="active"><a href="#">Home</a></li> + <li><a href="#">Profile</a></li> + <li><a href="#">Messages</a></li> + <li><a href="#">Settings</a></li> + <li><a href="#">Contact</a></li> + </ul> + </div> + </div><!-- /row --> + + <!-- Breadcrumbs --> + <div class="row"> + <div class="span3"> + <h2>Breadcrumbs</h2> + <p>Breadcrumb navigation is used as a way to show users where they are within an app or a site, but not for primary navigation.</p> + </div> + <div class="span9"> + <ul class="breadcrumb"> + <li class="active">Home</li> + </ul> + <ul class="breadcrumb"> + <li><a href="#">Home</a> <span class="divider">/</span></li> + <li class="active">Middle page</li> + </ul> + <ul class="breadcrumb"> + <li><a href="#">Home</a> <span class="divider">/</span></li> + <li><a href="#">Middle page</a> <span class="divider">/</span></li> + <li class="active">Another one</li> + </ul> + <ul class="breadcrumb"> + <li><a href="#">Home</a> <span class="divider">/</span></li> + <li><a href="#">Middle page</a> <span class="divider">/</span></li> + <li><a href="#">Another one</a> <span class="divider">/</span></li> + <li class="active">You are here</li> + </ul> +<pre class="prettyprint linenums"> +<ul class="breadcrumb"> + <li><a href="#">Home</a> <span class="divider">/</span></li> + <li><a href="#">Middle page</a> <span class="divider">/</span></li> + <li><a href="#">Another one</a> <span class="divider">/</span></li> + <li class="active">You are here</li> +</ul> +</pre> + </div> + </div> + + <!-- Pagination --> + <div class="row"> + <div class="span3"> + <h2>Pagination</h2> + <p>Ultra simplistic and minimally styled pagination inspired by Rdio. The large block is hard to miss, easily scalable, and provides large click areas.</p> + </div> + <div class="span9"> + <div class="pagination"> + <ul> + <li class="prev disabled"><a href="#">← Previous</a></li> + <li class="active"><a href="#">1</a></li> + <li><a href="#">2</a></li> + <li><a href="#">3</a></li> + <li><a href="#">4</a></li> + <li class="next"><a href="#">Next →</a></li> + </ul> + </div> + <div class="pagination"> + <ul> + <li class="prev"><a href="#">←</a></li> + <li class="active"><a href="#">10</a></li> + <li><a href="#">11</a></li> + <li class="disabled"><a href="#">…</a></li> + <li><a href="#">20</a></li> + <li><a href="#">21</a></li> + <li class="next"><a href="#">→</a></li> + </ul> + </div> + <div class="pagination"> + <ul> + <li class="prev"><a href="#">←</a></li> + <li><a href="#">10</a></li> + <li><a href="#">11</a></li> + <li class="active"><a href="#">12</a></li> + <li><a href="#">13</a></li> + <li><a href="#">14</a></li> + <li class="next"><a href="#">→</a></li> + </ul> + </div> +<pre class="prettyprint linenums"> +<div class="pagination"> + <ul> + <li class="prev disabled"><a href="#">&larr; Previous</a></li> + <li class="active"><a href="#">1</a></li> + <li><a href="#">2</a></li> + <li><a href="#">3</a></li> + <li><a href="#">4</a></li> + <li><a href="#">5</a></li> + <li class="next"><a href="#">Next &rarr;</a></li> + </ul> +</div> +</pre> + </div> + </div><!-- /row --> + +</section> + + + +<!-- Alerts & Messages +================================================== --> +<section id="alerts"> + <div class="page-header"> + <h1>Alerts & Errors <small>Styles for success, warning, and error messages or alerts</small></h1> + </div> + <!-- Basic alert messages --> + <div class="row"> + <div class="span3"> + <h2>Basic alerts</h2> + <p><code>.alert-message</code></p> + <p>One-line messages for highlighting the failure, possible failure, or success of an action. Particularly useful for forms.</p> + <p><a class="btn js-btn" href="./javascript.html#alerts">Get the javascript »</a></p> + </div> + <div class="span9"> + <div class="alert-message warning"> + <a class="close" href="#">×</a> + <p><strong>Holy guacamole!</strong> Best check yo self, you’re not looking too good.</p> + </div> + <div class="alert-message error"> + <a class="close" href="#">×</a> + <p><strong>Oh snap!</strong> Change this and that and try again.</p> + </div> + <div class="alert-message success"> + <a class="close" href="#">×</a> + <p><strong>Well done!</strong> You successfully read this alert message.</p> + </div> + <div class="alert-message info"> + <a class="close" href="#">×</a> + <p><strong>Heads up!</strong> This is an alert that needs your attention, but it’s not a huge priority just yet.</p> + </div> + + <h4>Example code</h4> +<pre class="prettyprint linenums"> +<div class="alert-message warning"> + <a class="close" href="#">×</a> + <p><strong>Holy guacamole!</strong> Best check yo self, you’re not looking too good.</p> +</div> +</pre> + </div> + </div><!-- /row --> + <!-- Block messages --> + <div class="row"> + <div class="span3"> + <h2>Block messages</h2> + <p><code>.alert-message.block-message</code></p> + <p>For messages that require a bit of explanation, we have paragraph style alerts. These are perfect for bubbling up longer error messages, warning a user of a pending action, or just presenting information for more emphasis on the page.</p> + <p><a class="btn js-btn" href="./javascript.html#alerts">Get the javascript »</a></p> + </div> + <div class="span9"> + <div class="alert-message block-message warning"> + <a class="close" href="#">×</a> + <p><strong>Holy guacamole! This is a warning!</strong> Best check yo self, you’re not looking too good. Nulla vitae elit libero, a pharetra augue. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.</p> + <div class="alert-actions"> + <a class="btn small" href="#">Take this action</a> <a class="btn small" href="#">Or do this</a> + </div> + </div> + <div class="alert-message block-message error"> + <a class="close" href="#">×</a> + <p><strong>Oh snap! You got an error!</strong> Change this and that and try again.</p> + <ul> + <li>Duis mollis est non commodo luctus</li> + <li>Nisi erat porttitor ligula</li> + <li>Eget lacinia odio sem nec elit</li> + </ul> + <div class="alert-actions"> + <a class="btn small" href="#">Take this action</a> <a class="btn small" href="#">Or do this</a> + </div> + </div> + <div class="alert-message block-message success"> + <a class="close" href="#">×</a> + <p><strong>Well done!</strong> You successfully read this alert message. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Maecenas faucibus mollis interdum.</p> + <div class="alert-actions"> + <a class="btn small" href="#">Take this action</a> <a class="btn small" href="#">Or do this</a> + </div> + </div> + <div class="alert-message block-message info"> + <a class="close" href="#">×</a> + <p><strong>Heads up!</strong> This is an alert that needs your attention, but it’s not a huge priority just yet.</p> + <div class="alert-actions"> + <a class="btn small" href="#">Take this action</a> <a class="btn small" href="#">Or do this</a> + </div> + </div> + + <h4>Example code</h4> +<pre class="prettyprint linenums"> +<div class="alert-message block-message warning"> + <a class="close" href="#">×</a> + <p><strong>Holy guacamole! This is a warning!</strong> Best check yo self, you’re not looking too good. Nulla vitae elit libero, a pharetra augue. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.</p> + <div class="alert-actions"> + <a class="btn small" href="#">Take this action</a> <a class="btn small" href="#">Or do this</a> + </div> +</div> +</pre> + </div> + </div><!-- /row --> +</section> + + +<!-- Popovers +================================================== --> +<section id="popovers"> + <div class="page-header"> + <h1>Popovers <small>Components for displaying content in modals, tooltips, and popovers</small></h1> + </div> + <div class="row"> + <div class="span3"> + <h2>Modals</h2> + <p>Modals—dialogs or lightboxes—are great for contextual actions in situations where it’s important that the background context be maintained.</p> + <p><a class="btn js-btn" href="./javascript.html#modal">Get the javascript »</a></p> + </div> + <div class="span9"> + <div class="well" style="background-color: #888; border: none; padding: 40px;"> + <!-- Modal --> + <div class="modal" style="position: relative; top: auto; left: auto; margin: 0 auto; z-index: 1"> + <div class="modal-header"> + <a href="#" class="close js-dismiss">×</a> + <h3>Modal Heading</h3> + </div> + <div class="modal-body"> + <p>One fine body…</p> + </div> + <div class="modal-footer"> + <a href="#" class="btn primary">Primary</a> + <a href="#" class="btn">Secondary</a> + </div> + </div> + </div> + </div> + </div><!-- /row --> + + <!-- Tooltips --> + <div class="row"> + <div class="span3"> + <h2>Tooltips</h2> + <p>Twipsies are super useful for aiding a confused user and pointing them in the right direction.</p> + <p><a class="btn js-btn" href="./javascript.html#twipsy">Get the javascript »</a></p> + </div> + <div class="span9"> + <div class="twipsies well"> + <div style="position: relative"> + <p class="muted" style="margin-bottom: 0"> +Lorem ipsum dolar sit amet illo error <a href="#" title="below">ipsum</a> veritatis aut iste perspiciatis iste voluptas natus illo quasi odit aut natus consequuntur consequuntur, aut natus illo voluptatem odit perspiciatis laudantium rem doloremque totam voluptas. <a href="#" title="right">Voluptasdicta</a> eaque beatae aperiam ut enim voluptatem explicabo explicabo, voluptas quia odit fugit accusantium totam totam architecto explicabo sit quasi fugit fugit, totam doloremque unde sunt <a href="#" title="left">sed</a> dicta quae accusantium fugit voluptas nemo voluptas voluptatem <a href="#" title="above">rem</a> quae aut veritatis quasi quae. + </p> + </div> + </div> + </div> + </div><!-- /row --> + + <!-- Popovers --> + <div class="row"> + <div class="span3"> + <h2>Popovers</h2> + <p>Use popovers to provide subtextual information to a page without affecting layout.</p> + <p><a class="btn js-btn" href="./javascript.html#popover">Get the javascript »</a></p> + </div> + <div class="span9"> + <div class="well popover-well"> + <div class="popover-wrapper"> + <div class="popover left"> + <div class="arrow"></div> + <div class="inner"> + <h3 class="title">Popover Title</h3> + <div class="content"> + <p>Etiam porta sem malesuada magna mollis euismod. Maecenas faucibus mollis interdum. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.</p> + </div> + </div> + </div> + <img class="large-bird" src="assets/img/bird.png" > + </div> + </div> + </div> + </div><!-- /row --> +</section> + + + <!-- Footer + ================================================== --> + <footer class="footer"> + <p class="pull-right"><a href="#">Back to top</a></p> + <p> + Designed and built with all the love in the world <a href="http://twitter.com/twitter" target="_blank">@twitter</a> by <a href="http://twitter.com/mdo" target="_blank">@mdo</a> and <a href="http://twitter.com/fat" target="_blank">@fat</a>.<br> + Code licensed under the <a href="http://www.apache.org/licenses/LICENSE-2.0" target="_blank">Apache License v2.0</a>. Documentation licensed under <a href="http://creativecommons.org/licenses/by/3.0/">CC BY 3.0</a>. + </p> + </footer> + </div><!-- /container --> + + <!-- Le javascript --> + <!-- Placed at the end of the document so the pages load faster --> + <script src="http://code.jquery.com/jquery-1.5.2.min.js"></script> + <script src="http://autobahn.tablesorter.com/jquery.tablesorter.min.js"></script> + <script src="assets/js/google-code-prettify/prettify.js"></script> + <script>$(function () { prettyPrint() })</script> + <script src="../js/bootstrap-transitions.js"></script> + <script src="../js/bootstrap-dropdown.js"></script> + <script src="../js/bootstrap-twipsy.js"></script> + <script src="../js/bootstrap-scrollspy.js"></script> + <script src="assets/js/application.js"></script> + </body> +</html> diff --git a/docs/index.html b/docs/index.html index cf3b8b8052..64947dc15e 100644 --- a/docs/index.html +++ b/docs/index.html @@ -32,6 +32,14 @@ <div class="container"> <a class="brand" href="./index.html">Bootstrap</a> <ul class="nav"> + <li class="active"><a href="./index.html">Overview</a></li> + <li><a href="./scaffolding.html">Scaffolding</a></li> + <li><a href="./base-css.html">Base CSS</a></li> + <li><a href="./components.html">Components</a></li> + <li><a href="./javascript.html">Javascript plugins</a></li> + <li><a href="./less.html">Using LESS</a></li> + +<!-- <li class="active"><a href="#overview">Overview</a></li> <li><a href="#about">About</a></li> <li class="dropdown"> @@ -64,2103 +72,116 @@ </li> <li><a href="#javascript">Javascript</a></li> <li><a href="#less">Using Less</a></li> +--> </ul> </div> </div> </div> - <div class="container"> - - <div id="overview"> - <!-- Masthead (blueprinty thing) - ================================================== --> - <header class="jumbotron masthead"> - <div class="inner"> - <h1>Bootstrap,<br> from Twitter</h1> - <p class="lead">Bootstrap is a responsive frontend toolkit from Twitter designed to kickstart web development, complete with core HTML, CSS, and JS for grids, type, forms, navigation, and many more components.</p> - <p class="download-info"> - <a href="#" class="btn primary btn-large">Download on GitHub</a> - Currently v2.0.0 - </p> - <div class="benefits"> - <h4>Feature highlights</h4> - <ul> - <li><span>×</span> Built on LESS</li> - <li><span>×</span> Complete styleguide docs</li> - <li><span>×</span> Fully responsive design</li> - <li><span>×</span> Small footprint (7kb gzipped)</li> - <li><span>×</span> Support for IE7 and up</li> - <li><span>×</span> Custom jQuery plugins</li> - <li><span>×</span> Dozens of components</li> - </ul> - </div> - </div> - </header> - - <ul class="quick-links"> - <li><strong>Quick links</strong></li> - <li><a href="https://github.com/twitter/bootstrap/">GitHub</a></li> - <li><a href="https://github.com/twitter/bootstrap/issues?state=open">Issues</a></li> - <li><a href="https://github.com/twitter/bootstrap/wiki/Roadmap">Roadmap</a></li> - <li><a href="https://github.com/twitter/bootstrap/wiki/Changelog">Changelog</a></li> - <li class="divider">·</li> - <li><strong>Authors</strong></li> - <li><a href="http://twitter.com/mdo">@mdo</a></li> - <li><a href="http://twitter.com/fat">@fat</a></li> - <li class="divider">·</li> - <li class="follow-btn"> - <a href="https://twitter.com/twbootstrap" class="twitter-follow-button" data-width="145px" data-link-color="#0069D6" data-show-count="false">Follow @twbootstrap</a><script src="http://platform.twitter.com/widgets.js" type="text/javascript"></script> - </li> - <li class="tweet-btn"> - <a href="https://twitter.com/share" class="twitter-share-button" data-url="http://twitter.github.com/bootstrap/" data-count="horizontal" data-via="twbootstrap" data-related="mdo:Creator of Twitter Bootstrap">Tweet</a><script type="text/javascript" src="http://platform.twitter.com/widgets.js"></script> - </li> - </ul> - - - <!-- Quickstart options - ================================================== --> - <div class="quickstart" style="display: none;"> - <div class="row"> - <div class="span4"> - <h6>Hotlink the CSS</h6> - <p>For the quickest and easiest start, just copy this snippet into your webpage.</p> - <form> - <textarea class="copy-code" rows="1"><link rel="stylesheet" href="http://twitter.github.com/bootstrap/assets/css/bootstrap.min.css"></textarea> - </form> - </div> - <div class="span4"> - <h6>Use it with Less</h6> - <p>A fan of using Less? No problem, just clone the repo and add these lines:</p> - <form> - <textarea class="copy-code" rows="2"><link rel="stylesheet/less" href="/path/to/bootstrap.less"> - <script src="/path/to/less.js"></script></textarea> - </form> - </div> - <div class="span4"> - <h6>Fork on GitHub</h6> - <p>Download, fork, pull, file issues, and more with the official Bootstrap repo on Github.</p> - <p><a target="_blank" href="https://github.com/twitter/bootstrap" class="btn primary">Bootstrap on GitHub »</a></p> - <p class="current-version">Currently <a href="https://github.com/twitter/bootstrap/wiki/Changelog">v1.3.0</a></p> - </div> - </div><!-- /row --> - </div> - - <!-- About Bootstrap - ================================================== --> - <section id="about"> - <div class="row"> - <div class="span4"> - <h2>Built for and by nerds</h2> - <p>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.</p> - <p>Read more on <a href="https://dev.twitter.com/blog/bootstrap-twitter">dev.twitter.com ›</a></p> - </div> - <div class="span4"> - <h2>Cross-everything</h2> - <p>Bootstrap is tested and supported in major modern browsers like Chrome, Safari, Internet Explorer, and Firefox.</p> - <img class="browser-support" src="assets/img/browsers.png" alt="Tested and supported in Chrome, Safari, Internet Explorer, and Firefox"> - <ul> - <li>Latest Safari</li> - <li>Latest Google Chrome</li> - <li>Firefox 4+</li> - <li>Internet Explorer 7+</li> - <li>Opera 11</li> - </ul> - </div> - <div class="span4"> - <h2>What's included</h2> - <p>Bootstrap comes complete with compiled CSS, uncompiled, and example templates.</p> - <ul> - <li><span class="label">New in 1.3</span> <a href="./javascript.html">Javascript plugins</a></li> - <li>All original .less files</li> - <li>Fully <a href="../bootstrap.css">compiled</a> and <a href="../bootstrap.min.css">minified</a> CSS</li> - <li>Complete styleguide documentation</li> - <li>Three example pages with different layouts</li> - </ul> - </div> - </div><!-- /row --> - </section> - - <h3>Quick-start examples</h3> - <p>Need some quick templates? Check out these basic examples we've put together:</p> - <ul class="media-grid"> - <li> - <a href="../examples/hero.html"><img src="assets/img/example-diagram-01.png" alt="Simple three-column layout with hero unit"></a> - </li> - <li> - <a href="../examples/fluid.html"><img src="assets/img/example-diagram-02.png" alt="Fluid layout with static sidebar"></a> - </li> - <li> - <a href="../examples/container-app.html"><img src="assets/img/example-diagram-03.png" alt="Simple hanging container for apps"></a> - </li> - </ul> - - </div><!-- /#overview --> - - -<!-- Grid system -================================================== --> -<section id="grid-system"> - <div class="page-header"> - <h1>Grid system <small>12 columns with a responsive twist</small></h1> - </div> - - <h2>Default 940px grid</h2> - <div class="row show-grid"> - <div class="span1">1</div> - <div class="span1">1</div> - <div class="span1">1</div> - <div class="span1">1</div> - <div class="span1">1</div> - <div class="span1">1</div> - <div class="span1">1</div> - <div class="span1">1</div> - <div class="span1">1</div> - <div class="span1">1</div> - <div class="span1">1</div> - <div class="span1">1</div> - </div> - <div class="row show-grid"> - <div class="span4">4</div> - <div class="span4">4</div> - <div class="span4">4</div> - </div> - <div class="row show-grid"> - <div class="span4">4</div> - <div class="span8">8</div> - </div> - <div class="row show-grid"> - <div class="span6">6</div> - <div class="span6">6</div> - </div> - <div class="row show-grid"> - <div class="span12">12</div> - </div> - - <div class="row"> - <div class="span4"> - <p>The default grid system provided as part of Bootstrap is a <strong>940px-wide, 12-column grid</strong>.</p> - <p>It also has three responsive variations for various devices and resolutions: phone, tablet, and large widescreen desktops.</p> - </div> - <div class="span4"> -<pre class="prettyprint linenums"> -<div class="row"> - <div class="span4">...</div> - <div class="span8">...</div> -</div> -</pre> - </div> - <div class="span4"> - <p>As shown here, a basic layout can be created with two "columns," each spanning a number of the 12 foundational columns we defined as part of our grid system.</p> - </div> - </div><!-- /row --> - - <h2>Offsetting columns</h2> - <div class="row show-grid"> - <div class="span4">4</div> - <div class="span4 offset4">4 offset 4</div> - </div><!-- /row --> - <div class="row show-grid"> - <div class="span3 offset3">3 offset 3</div> - <div class="span3 offset3">3 offset 3</div> - </div><!-- /row --> - <div class="row show-grid"> - <div class="span8 offset4">8 offset 4</div> - </div><!-- /row --> - - <br> - - <h2>Nesting columns</h2> - <div class="row"> - <div class="span6"> - <p>With the static (non-fluid) grid system in Bootstrap, nesting is easy. To nest your content, just add a new <code>.row</code> and set of <code>.span*</code> columns within an existing <code>.span*</code> column.</p> - <h4>Example</h4> - <div class="row show-grid"> - <div class="span6"> - Level 1 of column - <div class="row show-grid"> - <div class="span3"> - Level 2 - </div> - <div class="span3"> - Level 2 - </div> - </div> - </div> - </div> - </div> - <div class="span6"> -<pre class="prettyprint linenums"> -<div class="row"> - <div class="span12"> - Level 1 of column - <div class="row"> - <div class="span6">Level 2</div> - <div class="span6">Level 2</div> - </div> - </div> -</div> -</pre> - </div> - </div> - - <h2>Grid customization</h2> - <table class="zebra-striped"> - <thead> - <tr> - <th>Variable</th> - <th>Default value</th> - <th>Description</th> - </tr> - </thead> - <tbody> - <tr> - <td><code>@gridColumns</code></td> - <td>16</td> - <td>The number of columns within the grid</td> - </tr> - <tr> - <td><code>@gridColumnWidth</code></td> - <td>40px</td> - <td>The width of each column within the grid</td> - </tr> - <tr> - <td><code>@gridGutterWidth</code></td> - <td>20px</td> - <td>The negative space between each column</td> - </tr> - <tr> - <td><code>@siteWidth</code></td> - <td><em>Computed sum of all columns and gutters</em></td> - <td>We use some basic match to count the number of columns and gutters and set the width of the <code>.fixed-container()</code> mixin.</td> - </tr> - </tbody> - </table> - <div class="row"> - <div class="span4"> - <h3>Variables in LESS</h3> - <p>Built into Bootstrap are a handful of variables for customizing the default 940px grid system, documented above. All variables for the grid are stored in mixins.less.</p> - </div> - <div class="span4"> - <h3>How to customize</h3> - <p>Modifying the grid means changing the three <code>@grid*</code> variables and recompiling Bootstrap. Change the grids in the preboot.less file and use one of the <a href="#compiling">four ways documented to recompile</a>.</p> - </div> - <div class="span4"> - <h3>Staying responsive</h3> - <p>Customization of the grid only works at the default level, the 940px grid. To maintain the responsive aspects of Bootstrap, you'll also have to customize the grids in responsive.less.</p> - </div> - </div><!-- /row --> - -</section> - - - -<!-- Layouts (Default and fluid) -================================================== --> -<section id="layouts"> - <div class="page-header"> - <h1>Layouts <small>Basic templates to create webpages</small></h1> - </div> - - <div class="row"> - <div class="span6"> - <h2>Fixed layout</h2> - <p>The default and simple 940px-wide, centered layout for just about any website or page provided by a single <code><div.container></code>.</p> - <div class="mini-layout"> - <div class="mini-layout-body"></div> - </div> -<pre class="prettyprint linenums"> -<body> - <div class="container"> - ... - </div> -</body> -</pre> - </div><!-- /col --> - <div class="span6"> - <h2>Fluid layout</h2> - <p>An alternative, flexible fluid page structure with min- and max-widths and a left-hand sidebar. Great for apps and docs.</p> - <div class="mini-layout fluid"> - <div class="mini-layout-sidebar"></div> - <div class="mini-layout-body"></div> - </div> -<pre class="prettyprint linenums"> -<body> - <div class="container-fluid"> - <div class="sidebar"> - ... - </div> - <div class="content"> - ... - </div> - </div> -</body> -</pre> - </div><!-- /col --> - </div><!-- /row --> -</section> - - - - -<!-- Responsive design -================================================== --> -<section id="responsive"> - <div class="page-header"> - <h1>Responsive design <small>Media queries for various devices and resolutions</small></h1> - </div> - <!-- Supported devices --> - <div class="row"> - <div class="span4"> - <img src="assets/img/responsive-illustrations.png" alt="Responsive devices"> - </div> - <div class="span8"> - <h2>Supported devices</h2> - <p>Bootstrap supports a handful of media queries to help make your projects more appropriate on different devices and screen resolutions. Here's what's included:</p> - <table class="zebra-striped"> - <thead> - <tr> - <th>Label</th> - <th>Layout width</th> - <th>Column width</th> - <th>Gutter width</th> - </tr> - </thead> - <tbody> - <tr> - <td>Smartphones</td> - <td>480px and below</td> - <td class="muted" colspan="2">Fluid columns, no fixed widths</td> - </tr> - <tr> - <td>Portrait tablets</td> - <td>480px to 768px</td> - <td class="muted" colspan="2">Fluid columns, no fixed widths</td> - </tr> - <tr> - <td>Landscape tablets</td> - <td>768px to 940px</td> - <td>44px</td> - <td>20px</td> - </tr> - <tr> - <td>Default</td> - <td>940px and up</td> - <td>60px</td> - <td>20px</td> - </tr> - <tr> - <td>Large display</td> - <td>1210px and up</td> - <td>70px</td> - <td>30px</td> - </tr> - </tbody> - </table> - - <h3>What they do</h3> - <p>Media queries allow for custom CSS based on a number of conditions—ratios, widths, display type, etc—but usually focuses around <code>min-width</code> and <code>max-width</code>.</p> - <ul> - <li>Modify the width of column in our grid</li> - <li>Stack elements instead of float wherever necessary</li> - <li>Resize headings and text to be more appropriate for devices</li> - </ul> - </div> - </div> - - <br> - - <!-- Media query code --> - <h2>Using the media queries</h2> - <div class="row"> - <div class="span5"> - <p>Bootstrap doesn't automatically include these media queries, but understanding and adding them is very easy and requires minimal setup. You have a few options for including the responsive features of Bootstrap:</p> - <ol> - <li>Use the compiled responsive version, bootstrap.reponsive.css</li> - <li>Add @import "responsive.less" and recompile Bootstrap</li> - <li>Compile responsive.less as a separate file and include that</li> - </ol> - <p><strong>Why not just include it?</strong> Truth be told, not everything needs to be responsive. Instead of encouraging developers to remove this feature, we figure it best to enable it.</p> - </div> - <div class="span7"> -<pre class="prettyprint linenums"> - // Landscape phones and down - @media (max-width: 480px) { ... } - - // Landscape phone to portrait tablet - @media (min-width: 480px) and (max-width: 768px) { ... } - - // Portrait tablet to landscape and desktop - @media (min-width: 768px) and (max-width: 940px) { ... } - - // Large desktop - @media (min-width: 1210px) { .. } -</pre> - </div> - </div> - -</section> - - - - -<!-- Typography -================================================== --> -<section id="typography"> - <div class="page-header"> - <h1>Typography <small>Headings, paragraphs, lists, and other inline type elements</small></h1> - </div> - - <h2>Headings & body copy</h2> - - <!-- Headings & Paragraph Copy --> - <div class="row"> - <div class="span4"> - <h3>Typographic scale</h3> - <p>The entire typographic grid is based on two Less variables in our preboot.less file: <code>@baseFontSize</code> and <code>@baseLineHeight</code>. The first is the base font-size used throughout and the second is the base line-height.</p> - <p>We use those variables, and some math, to create the margins, paddings, and line-heights of all our type and more.</p> - </div> - <div class="span4"> - <h3>Example body text</h3> - <p>Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p> - <p>Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Donec sed odio dui.</p> - </div> - <div class="span4"> - <div class="well"> - <h1>h1. Heading 1</h1> - <h2>h2. Heading 2</h2> - <h3>h3. Heading 3</h3> - <h4>h4. Heading 4</h4> - <h5>h5. Heading 5</h5> - <h6>h6. Heading 6</h6> - </div> - </div> - </div> - - <!-- Misc Elements --> - <h2>Emphasis, address, and abbreviation</h2> - <table class="zebra-striped"> - <thead> - <tr> - <th>Element</th> - <th>Description</th> - <th>Usage</th> - </tr> - </thead> - <tbody> - <tr> - <td> - <code><strong></code> - </td> - <td> - For emphasizing a snippet of text with <strong>important</strong> - </td> - <td> - <span class="muted">None</span> - </td> - </tr> - <tr> - <td> - <code><em></code> - </td> - <td> - For emphasizing a snippet of text with <em>stress</em> - </td> - <td> - <span class="muted">None</span> - </td> - </tr> - <tr> - <td> - <code><abbr></code> - </td> - <td> - Wraps abbreviations and acronyms to show the expanded version on hover - </td> - <td> - Include optional <code>title</code> for expanded text - </td> - </tr> - <tr> - <td> - <code><address></code> - </td> - <td> - For contact information for its nearest ancestor or the entire body of work - </td> - <td> - Preserve formatting by ending all lines with <code><br></code> - </td> - </tr> - </tbody> - </table> - - <div class="row"> - <div class="span4"> - <h3>Using emphasis</h3> - <p><a href="#">Fusce dapibus</a>, <strong>tellus ac cursus commodo</strong>, <em>tortor mauris condimentum nibh</em>, ut fermentum massa justo sit amet risus. Maecenas faucibus mollis interdum. Nulla vitae elit libero, a pharetra augue.</p> - <p><strong>Note:</strong> Feel free to use <code><b></code> and <code><i></code> in HTML5, but their usage has changed a bit. <code><b></code> is meant to highlight words or phrases without conveying additional importance while <code><i></code> is mostly for voice, technical terms, etc.</p> - </div> - <div class="span4"> - <h3>Example addresses</h3> - <p>Here are two examples of how the <code><address></code> tag can be used:</p> - <address> - <strong>Twitter, Inc.</strong><br> - 795 Folsom Ave, Suite 600<br> - San Francisco, CA 94107<br> - <abbr title="Phone">P:</abbr> (123) 456-7890 - </address> - <address> - <strong>Full Name</strong><br> - <a mailto="#">first.last@gmail.com</a> - </address> - </div> - <div class="span4"> - <h3>Example abbreviations</h3> - <p>Abbreviations are styled with uppercase text and a light dotted bottom border. They also have a help cursor on hover so users have extra indication something will be shown on hover.</p> - <p><abbr title="HyperText Markup Language">HTML</abbr> is the best thing since sliced bread.</p> - <p>An abbreviation of the word attribute is <abbr title="attribute">attr</abbr>.</p> - </div> - </div> - - - <!-- Blockquotes --> - <h2>Blockquotes</h2> - <div class="row"> - <div class="span5"> - <p>To include a blockquote, wrap <code><blockquote></code> around <code><p></code> and <code><small></code> tags. Use the <code><small></code> element to cite your source and you'll get an em dash <code>&mdash;</code> before it.</p> - <blockquote> - <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante venenatis dapibus posuere velit aliquet.</p> - <small>Someone famous</small> - </blockquote> - </div> - <div class="span7"> -<pre class="prettyprint linenums"> -<blockquote> - <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante venenatis dapibus posuere velit aliquet.</p> - <small>Dr. Julius Hibbert</small> -</blockquote> -</pre> - </div> - </div> - - <!-- Lists --> - <h2>Lists</h2> - <div class="row"> - <div class="span3"> - <h4>Unordered <code><ul></code></h4> - <ul> - <li>Lorem ipsum dolor sit amet</li> - <li>Consectetur adipiscing elit</li> - <li>Integer molestie lorem at massa</li> - <li>Facilisis in pretium nisl aliquet</li> - <li>Nulla volutpat aliquam velit - <ul> - <li>Phasellus iaculis neque</li> - <li>Purus sodales ultricies</li> - <li>Vestibulum laoreet porttitor sem</li> - <li>Ac tristique libero volutpat at</li> - </ul> - </li> - <li>Faucibus porta lacus fringilla vel</li> - <li>Aenean sit amet erat nunc</li> - <li>Eget porttitor lorem</li> - </ul> - </div> - <div class="span3"> - <h4>Unstyled <code><ul.unstyled></code></h4> - <ul class="unstyled"> - <li>Lorem ipsum dolor sit amet</li> - <li>Consectetur adipiscing elit</li> - <li>Integer molestie lorem at massa</li> - <li>Facilisis in pretium nisl aliquet</li> - <li>Nulla volutpat aliquam velit - <ul> - <li>Phasellus iaculis neque</li> - <li>Purus sodales ultricies</li> - <li>Vestibulum laoreet porttitor sem</li> - <li>Ac tristique libero volutpat at</li> - </ul> - </li> - <li>Faucibus porta lacus fringilla vel</li> - <li>Aenean sit amet erat nunc</li> - <li>Eget porttitor lorem</li> - </ul> - </div> - <div class="span3"> - <h4>Ordered <code><ol></code></h4> - <ol> - <li>Lorem ipsum dolor sit amet</li> - <li>Consectetur adipiscing elit</li> - <li>Integer molestie lorem at massa</li> - <li>Facilisis in pretium nisl aliquet</li> - <li>Nulla volutpat aliquam velit</li> - <li>Faucibus porta lacus fringilla vel</li> - <li>Aenean sit amet erat nunc</li> - <li>Eget porttitor lorem</li> - </ol> - </div> - <div class="span3"> - <h4>Description <code><dl></code></h4> - <dl> - <dt>Description lists</dt> - <dd>A description list is perfect for defining terms.</dd> - <dt>Euismod</dt> - <dd>Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit.</dd> - <dd>Donec id elit non mi porta gravida at eget metus.</dd> - <dt>Malesuada porta</dt> - <dd>Etiam porta sem malesuada magna mollis euismod.</dd> - </dl> - </div> - </div><!-- /row --> - - - <!-- Code --> - - <h2>Code <small>Inline and block</small></h2> - <table class="zebra-striped"> - <thead> - <tr> - <th style="width: 190px;">Element</th> - <th>Result</th> - </tr> - </thead> - <tbody> - <tr> - <td><code><code></code></td> - <td>In a line of text like this, your wrapped code will look like this <code><html></code> element.</td> - </tr> - <tr> - <td><code><pre></code></td> - <td> -<pre><div> - <h1>Heading</h1> - <p>Something right here...</p> -</div></pre> - <p><strong>Note:</strong> Be sure to keep code within <code>pre</code> tags as close to the left as possible; it will render all tabs.</p> - </td> - </tr> - <tr> - <td><code><pre class="prettyprint"></code></td> - <td> - <p>Using the google-code-prettify library, you're blocks of code get a slightly different visual style and automatic syntax highlighting. You can also add an additional class to add line numbers.</p> -<pre class="prettyprint"><div> - <h1>Heading</h1> - <p>Something right here...</p> -</div></pre> -<pre class="prettyprint linenums"><div> - <h1>Heading</h1> - <p>Something right here...</p> -</div></pre> - <p><a href="http://code.google.com/p/google-code-prettify/">Download google-code-prettify</a> and view the readme for <a href="http://google-code-prettify.googlecode.com/svn/trunk/README.html">how to use</a>.</p> - </td> - </tr> - </tbody> - </table> - - <!-- Labels --> - <h2>Inline labels <small>for special attention</small></h2> - <table class="zebra-striped"> - <thead> - <tr> - <th style="width: 190px;">Labels</th> - <th>Markup</th> - </tr> - </thead> - <tbody> - <tr> - <td> - <span class="label">Default</span> - </td> - <td> - <code><span class="label">Default</span></code> - </td> - </tr> - <tr> - <td> - <span class="label success">New</span> - </td> - <td> - <code><span class="label success">New</span></code> - </td> - </tr> - <tr> - <td> - <span class="label warning">Warning</span> - </td> - <td> - <code><span class="label warning">Warning</span></code> - </td> - </tr> - <tr> - <td> - <span class="label important">Important</span> - </td> - <td> - <code><span class="label important">Important</span></code> - </td> - </tr> - <tr> - <td> - <span class="label notice">Notice</span> - </td> - <td> - <code><span class="label notice">Notice</span></code> - </td> - </tr> - </tbody> - </table> - -</section> - - - -<!-- Tables -================================================== --> -<section id="tables"> - <div class="page-header"> - <h1>Tables <small>For, you guessed it, tabular data</small></h1> - </div> - - <h2>Table markup</h2> - <div class="row"> - <div class="span8"> - <table class="zebra-striped"> - <thead> - <tr> - <th>Tag</th> - <th>Description</th> - </tr> - </thead> - <tbody> - <tr> - <td> - <code><table></code> - </td> - <td> - Wrapping element for displaying data in a tabular format - </td> - </tr> - <tr> - <td> - <code><thead></code> - </td> - <td> - Container element for table header rows (<code><tr></code>) to label table columns - </td> - </tr> - <tr> - <td> - <code><tbody></code> - </td> - <td> - Container element for table rows (<code><tr></code>) in the body of the table - </td> - </tr> - <tr> - <td> - <code><tr></code> - </td> - <td> - Container element for a set of table cells (<code><td></code> or <code><th></code>) that appears on a single row - </td> - </tr> - <tr> - <td> - <code><td></code> - </td> - <td> - Default table cell - </td> - </tr> - <tr> - <td> - <code><th></code> - </td> - <td> - Special table cell for column (or row, depending on scope and placement) labels<br> - Must be used within a <code><thead></code> - </td> - </tr> - <tr> - <td> - <code><caption></code> - </td> - <td> - Description or summary of what the table holds, especially useful for screen readers - </td> - </tr> - </tbody> - </table> - </div> - <div class="span4"> -<pre class="prettyprint linenums"> -<table> - <thead> - <tr> - <th>...</th> - <th>...</th> - </tr> - </thead> - <tbody> - <tr> - <td>...</td> - <td>...</td> - </tr> - </tbody> -</table> -</pre> - </div> - </div> - - <h2>Example tables</h2> - <h3>1. Default table styles</h3> - <p>All tables will be automatically styled with only the essential borders to ensure readability and maintain structure. No need to add extra classes or attributes.</p> - <table> - <thead> - <tr> - <th>#</th> - <th>First Name</th> - <th>Last Name</th> - <th>Language</th> - </tr> - </thead> - <tbody> - <tr> - <td>1</td> - <td>Some</td> - <td>One</td> - <td>English</td> - </tr> - <tr> - <td>2</td> - <td>Joe</td> - <td>Sixpack</td> - <td>English</td> - </tr> - <tr> - <td>3</td> - <td>Stu</td> - <td>Dent</td> - <td>Code</td> - </tr> - </tbody> - </table> -<pre class="prettyprint linenums"> -<table> - ... -</table></pre> - <h3>2. Zebra-striped</h3> - <p>Get a little fancy with your tables by adding zebra-striping—just add the <code>.zebra-striped</code> class.</p> - <table class="zebra-striped"> - <thead> - <tr> - <th>#</th> - <th>First Name</th> - <th>Last Name</th> - <th>Language</th> - </tr> - </thead> - <tbody> - <tr> - <td>1</td> - <td>Some</td> - <td>One</td> - <td>English</td> - </tr> - <tr> - <td>2</td> - <td>Joe</td> - <td>Sixpack</td> - <td>English</td> - </tr> - <tr> - <td>3</td> - <td>Stu</td> - <td>Dent</td> - <td>Code</td> - </tr> - </tbody> - </table> - <p><strong>Note:</strong> Zebra-striping is a progressive enhancement not available for older browsers like IE8 and below.</p> -<pre class="prettyprint linenums"> -<table class="zebra-striped"> -... -</table></pre> - <h3>3. Zebra-striped w/ TableSorter.js</h3> - <p>Taking the previous example, we improve the usefulness of our tables by providing sorting functionality via <a href="http://jquery.com">jQuery</a> and the <a href="http://tablesorter.com/docs/">Tablesorter</a> plugin. <strong>Click any column’s header to change the sort.</strong></p> - <table class="zebra-striped" id="sortTableExample"> - <thead> - <tr> - <th>#</th> - <th class="yellow">First Name</th> - <th class="blue">Last Name</th> - <th class="green">Language</th> - </tr> - </thead> - <tbody> - <tr> - <td>1</td> - <td>Your</td> - <td>One</td> - <td>English</td> - </tr> - <tr> - <td>2</td> - <td>Joe</td> - <td>Sixpack</td> - <td>English</td> - </tr> - <tr> - <td>3</td> - <td>Stu</td> - <td>Dent</td> - <td>Code</td> - </tr> - </tbody> - </table> -<pre class="prettyprint linenums"> -<script src="js/jquery/jquery.tablesorter.min.js"></script> -<script > - $(function() { - $("table#sortTableExample").tablesorter({ sortList: [[1,0]] }); - }); -</script> -<table class="zebra-striped"> - ... -</table></pre> - -</section> - - - -<!-- Forms -================================================== --> -<section id="forms"> - <div class="page-header"> - <h1>Forms</h1> - </div> - <div class="row"> - <div class="span4"> - <h3>Four types of forms</h3> - <p>With 2.0, we now have four types of forms to choose from:</p> - <ul> - <li>Search form for a super-rounded input and optional button</li> - <li>Inline form for a series of elements on one line</li> - <li>Horizontal form for left-aligned labels</li> - <li>Vertical form for stacked labels and inputs</li> - </ul> - </div> - <div class="span4"> - <h3></h3> - </div> - </div><!-- /row --> - <div class="row"> - <div class="span3"> - <h2>Search form</h2> - </div> - <div class="span9"> - <div class="well"> - <form class="form-search"> - <input type="text" class="search-query"> - <button type="submit" class="btn">Search</button> - </form> - </div><!--/well--> - </div> - </div><!-- /row --> - <div class="row"> - <div class="span3"> - <h2>Inline form</h2> - </div> - <div class="span9"> - <div class="well"> - <form class="form-inline"> - <h4>Some directional text</h4> - <p>And maybe some kind of optional supporting text right here.</p> - <input type="text" class="input-medium"> - <input type="text" class="input-medium"> - <input type="text" class="input-medium"> - <button type="submit" class="btn">Search</button> - </form> - </div><!--/well--> - </div> - </div><!-- /row --> - <div class="row"> - <div class="span3"> - <h2>Horizontal form</h2> - </div> - <div class="span9"> - <form class="form-horizontal"> - <legend>Example form</legend> - <fieldset class="control-group"> - <label class="control-label" for="input01">Text input</label> - <div class="controls"> - <input type="text" class="xlarge" name="input01"> - <p class="help-text">Help text here. Be sure to fill this out like so, or else!</p> - </div> - </fieldset> - <fieldset class="control-group"> - <label class="control-label" for="select01">Select list</label> - <div class="controls"> - <select name="select01"> - <option>1</option> - <option>2</option> - <option>3</option> - <option>4</option> - <option>5</option> - </select> - </div> - </fieldset> - <fieldset class="control-group"> - <label class="control-label" for="multiSelect">Multi-select</label> - <div class="controls"> - <select multiple="multiple" name="multiSelect"> - <option>1</option> - <option>2</option> - <option>3</option> - <option>4</option> - <option>5</option> - </select> - </div> - </fieldset> - <legend>Example form</legend> - <fieldset class="control-group"> - <label class="control-label" for="fileInput">File input</label> - <div class="controls"> - <input class="input-file" id="fileInput" name="fileInput" type="file"> - </div> - </fieldset> - <fieldset class="control-group has-error"> - <label class="control-label" for="inputError">Input with error</label> - <div class="controls"> - <input type="text" name="inputError"> - </div> - </fieldset> - <fieldset class="control-group has-error"> - <label class="control-label" for="textareaError">Textarea with error</label> - <div class="controls"> - <textarea class="input-xlarge" rows="3"></textarea> - </div> - </fieldset> - <fieldset class="control-group"> - <label class="control-label" for="optionsCheckboxes">Checkboxes</label> - <div class="controls"> - <div class="control-list"> - <label class="checkbox"> - <input type="checkbox" name="optionsCheckboxes" value="option1"> - Option one is this and that—be sure to include why it’s great - </label> - <label class="checkbox"> - <input type="checkbox" name="optionsCheckboxes" value="option2"> - Option two can also be checked and included in form results - </label> - <label class="checkbox"> - <input type="checkbox" name="optionsCheckboxes" value="option3"> - Option three can—yes, you guessed it—also be checked and included in form results - </label> - <label class="checkbox"> - <input type="checkbox" name="optionsCheckboxes" value="option4"> - Option four cannot be checked as it is disabled - </label> - </div> - <p class="help-text"><strong>Note:</strong> Labels surround all the options for much larger click areas and a more usable form.</p> - </div> - </fieldset> - <fieldset class="control-group"> - <label class="control-label" for="optionsRadios">Radio buttons</label> - <div class="controls"> - <div class="control-list"> - <label> - <input type="radio" checked name="optionsRadios" value="option1"> - <span>Option one is this and that—be sure to include why it’s great</span> - </label> - <label> - <input type="radio" name="optionsRadios" value="option2"> - <span>Option two can is something else and selecting it will deselect options 1</span> - </label> - </div> - <p class="help-text"><strong>Note:</strong> Labels surround all the options for much larger click areas and a more usable form.</p> - </div> - </fieldset> - <fieldset class="form-actions"> - <button type="submit" class="btn primary">Save changes</button> - <button type="reset" class="btn">Cancel</button> - </fieldset> - </form> - </div> - </div><!-- /row --> - <div class="row"> - <div class="span3"> - <h2>Vertical form</h2> - </div> - <div class="span9"> - <form class="form-vertical"> - <legend>Example form</legend> - <fieldset class="control-group"> - <label class="control-label" for="input01">Label</label> - <div class="controls"> - <input type="text" class="xlarge" name="input01"> - <p class="help-text">Be sure to fill this out like so, or else!</p> - </div> - </fieldset> - <fieldset class="control-group"> - <label class="control-label" for="select01">Label</label> - <div class="controls"> - <select name="select01"></select> - </div> - </fieldset> - <fieldset class="control-group"> - <label class="control-label" for="input02">Label</label> - <div class="controls"> - <div class="control-list"> - <label class="checkbox"> - <input type="checkbox"> Something something something something something - </label> - <label class="checkbox"> - <input type="checkbox"> Something something something something - </label> - <label class="checkbox"> - <input type="checkbox"> Something something something - </label> + <div class="container"> + + <div id="overview"> + + <!-- Masthead + ================================================== --> + <header class="jumbotron masthead"> + <div class="inner"> + <h1>Bootstrap,<br> from Twitter</h1> + <p class="lead">Bootstrap is a responsive frontend toolkit from Twitter designed to kickstart web development, complete with core HTML, CSS, and JS for grids, type, forms, navigation, and many more components.</p> + <p class="download-info"> + <a href="#" class="btn primary btn-large">Download on GitHub</a> + Currently v2.0.0 + </p> + <div class="benefits"> + <h4>Feature highlights</h4> + <ul> + <li><span>×</span> Built on LESS</li> + <li><span>×</span> Complete styleguide docs</li> + <li><span>×</span> Fully responsive design</li> + <li><span>×</span> Small footprint (7kb gzipped)</li> + <li><span>×</span> Support for IE7 and up</li> + <li><span>×</span> Custom jQuery plugins</li> + <li><span>×</span> Dozens of components</li> + </ul> </div> </div> - </fieldset> - <fieldset class="form-actions"> - <button type="submit" class="btn primary">Save changes</button> - <button type="reset" class="btn">Cancel</button> - </fieldset> - </form> - </div> - </div><!-- /row --> - - <div class="row"> - <div class="span3"> - <h2>Buttons</h2> - <p>As a convention, buttons are used for actions while links are used for objects. For instance, "Download" could be a button and "recent activity" could be a link.</p> - <p>All buttons default to a light gray style, but a number of functional classes can be applied for different color styles. These classes include a blue <code>.primary</code> class, a light-blue <code>.info</code> class, a green <code>.success</code> class, and a red <code>.danger</code> class.</p> - </div> - <div class="span9"> - <h3>Example buttons</h3> - <p>Button styles can be applied to anything with the <code>.btn</code> applied. Typically you’ll want to apply these to only <code><a></code>, <code><button></code>, and select <code><input></code> elements. Here’s how it looks:</p> - <div class="well" style="padding: 14px 19px;"> - <button class="btn primary">Primary</button> <button class="btn">Default</button> <button class="btn info">Info</button> <button class="btn success">Success</button> <button class="btn danger">Danger</button> - </div> - <h3>Alternate sizes</h3> - <p>Fancy larger or smaller buttons? Have at it!</p> - <div class="well"> - <a href="#" class="btn large primary">Primary action</a> - <a href="#" class="btn large">Action</a> - </div> - <div class="well" style="padding: 16px 19px;"> - <a href="#" class="btn small primary">Primary action</a> - <a href="#" class="btn small">Action</a> - </div> - <h3>Disabled state</h3> - <p>For buttons that are not active or are disabled by the app for one reason or another, use the disabled state. That’s <code>.disabled</code> for links and <code>:disabled</code> for <code><button></code> elements.</p> - <h4>Links</h4> - <div class="well"> - <a href="#" class="btn large primary disabled">Primary action</a> - <a href="#" class="btn large disabled">Action</a> - </div> - <h4>Buttons</h4> - <div class="well"> - <button class="btn large primary disabled" disabled="disabled">Primary action</button> <button class="btn large" disabled>Action</button> - </div> - </div> - </div><!-- /row --> - - <div class="row"> - <div class="span3"> - <h2>Button groups</h2> - </div> - <div class="span9"> - <h3>Example</h3> - <div class="well"> - <div class="btn-group"> - <a class="btn" href="#">Left</a> - <a class="btn" href="#">Middle</a> - <a class="btn" href="#">Right</a> - </div> - </div> - <div class="well"> - <div class="btn-toolbar"> - <div class="btn-group"> - <a class="btn" href="#">1</a> - <a class="btn" href="#">2</a> - <a class="btn" href="#">3</a> - <a class="btn" href="#">4</a> - <a class="btn" href="#">5</a> - </div> - <div class="btn-group"> - <a class="btn" href="#">6</a> - <a class="btn" href="#">7</a> - <a class="btn" href="#">8</a> - </div> - <div class="btn-group"> - <a class="btn" href="#">9</a> - </div> - <div class="btn-group"> - <a class="btn" href="#">10</a> - </div> - </div> - </div> - </div> - </div><!-- /row --> - -</section> - - - -<!-- 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="span3"> - <h2>Media grid</h2> - <p>Display thumbnails of varying sizes on pages with a low HTML footprint and minimal styles.</p> - </div> - <div class="span9"> - <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"> - <div class="page-header"> - <h1>Navigation</h1> - </div> - <h2>Fixed navbar</h2> - <div class="navbar navbar-static" data-dropdown="dropdown"> - <div class="navbar-inner"> - <div class="container"> - <a class="brand" href="#">Project Name</a> - <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> + </header> + + <ul class="quick-links"> + <li><strong>Quick links</strong></li> + <li><a href="https://github.com/twitter/bootstrap/">GitHub</a></li> + <li><a href="https://github.com/twitter/bootstrap/issues?state=open">Issues</a></li> + <li><a href="https://github.com/twitter/bootstrap/wiki/Roadmap">Roadmap</a></li> + <li><a href="https://github.com/twitter/bootstrap/wiki/Changelog">Changelog</a></li> + <li class="divider">·</li> + <li><strong>Authors</strong></li> + <li><a href="http://twitter.com/mdo">@mdo</a></li> + <li><a href="http://twitter.com/fat">@fat</a></li> + <li class="divider">·</li> + <li class="follow-btn"> + <a href="https://twitter.com/twbootstrap" class="twitter-follow-button" data-width="145px" data-link-color="#0069D6" data-show-count="false">Follow @twbootstrap</a><script src="http://platform.twitter.com/widgets.js" type="text/javascript"></script> </li> - </ul> - <form class="form-search navbar-search pull-left" action=""> - <input type="text" class="search-query span2" placeholder="Search"> - </form> - <ul class="nav secondary-nav"> - <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 class="tweet-btn"> + <a href="https://twitter.com/share" class="twitter-share-button" data-url="http://twitter.github.com/bootstrap/" data-count="horizontal" data-via="twbootstrap" data-related="mdo:Creator of Twitter Bootstrap">Tweet</a><script type="text/javascript" src="http://platform.twitter.com/widgets.js"></script> </li> </ul> - </div> - </div><!-- /navbar-inner --> - </div><!-- /navbar --> - <div class="row"> - <div class="span4"> - <h4>What is it</h4> - <p>Our navbar is a fixed bar that houses a website’s logo or name, primary navigation, and search form.</p> - </div> - <div class="span4"> - <h4>Customizable</h4> - <p>All elements within, and the entire navbar as well, are optional. You can choose to include a logo/name, nav, search, and a secondary nav—or any combination of that.</p> - </div> - <div class="span4"> - <h4>Dropdowns included</h4> - <p>As part of the main navigation, we’ve included the ability for you to add dropdowns to your nav. Check out the secondary nav above (right aligned) to see how it’s done. Dropdowns <code><li></code> tags also support <code>.active</code> for showing current page selection.</p> - </div> - </div> - <p><strong>Note:</strong> When using the navbar on any page, be sure to account for the overlap it causes by adding <code>padding-top: 40px;</code> to your <code><body></code>.</p> - - <br> - - <div class="row"> - <div class="span3"> - <h2>Tabs and pills</h2> - <p>Create simple secondary navigation with a <code><ul></code>. Swap between tabs or pills by adding the appropriate class.</p> - <p>Great for sub-sections of content like our account settings pages and user timelines for toggling between pages of like content. Available in tabbed or pill styles.</p> - </div> - <div class="span9"> - <h3>Basic tabs example</h3> - <p>Tabs can be used as regular navigation (loading external pages in the same tab) or as tabbable content areas for swapping out panes of content. We have a <a href="./javascript.html#tabs">tabs plugin</a> that can be used to integrate the latter.</p> - <ul class="tabs"> - <li class="active"><a href="#">Home</a></li> - <li><a href="#">Profile</a></li> - <li><a href="#">Messages</a></li> - <li><a href="#">Settings</a></li> - <li><a href="#">Contact</a></li> - <li class="dropdown" data-dropdown="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"> -<ul class="tabs"> - <li class="active"><a href="#">Home</a></li> - <li><a href="#">Profile</a></li> - <li><a href="#">Messages</a></li> - <li><a href="#">Settings</a></li> - <li><a href="#">Contact</a></li> -</ul> -</pre> - <h3>Alternate tabs</h3> - <p>You can also use tabs that are stacked on either side of an element, or on the bottom.</p> - <div class="row"> - <div class="span2"> - <div class="clearfix"> - <ul class="tabs tabs-left"> - <li class="active"><a href="#">Active link</a></li> - <li><a href="#">Link</a></li> - <li><a href="#">Linky link</a></li> - <li><a href="#">What up link</a></li> - </ul> - </div> - </div> - <div class="span2"> - <div class="clearfix"> - <ul class="tabs tabs-right"> - <li class="active"><a href="#">Active link</a></li> - <li><a href="#">Link</a></li> - <li><a href="#">Linky link</a></li> - <li><a href="#">What up link</a></li> - </ul> - </div> - </div> - <div class="span5"> - <div class="clearfix"> - <ul class="tabs tabs-bottom"> - <li class="active"><a href="#">Active link</a></li> - <li><a href="#">Link</a></li> - <li><a href="#">Linky link</a></li> - </ul> - </div> - </div> - </div> - <h3>Tabbable tabs</h3> - <p>As mentioned above, you can bring your tabs to life with a simple plugin. Here we have integrated all four variations of the tabs—default (top), right, bottom, left—with example tab areas.</p> - <div class="tabbable"> - <ul class="tabs" data-tabs="tabs"> - <li class="active"><a href="#1">Section 1</a></li> - <li><a href="#2">Section 2</a></li> - <li><a href="#3">Section 3</a></li> - <li><a href="#4">Section 4</a></li> - </ul> - <div class="tab-content"> - <div class="tab-pane active" id="1"> - <p>Oh hai #1!</p> - </div> - <div class="tab-pane" id="2"> - <p>Oh hai #2!</p> - </div> - <div class="tab-pane" id="3"> - <p>Oh hai #3!</p> - </div> - <div class="tab-pane" id="4"> - <p>Oh hai #4!</p> - </div> - </div> - </div> - <div class="row"> - <div class="span4"> - <div class="tabbable tabs-left"> - <ul class="tabs" data-tabs="tabs"> - <li class="active"><a href="#1">Section 1</a></li> - <li><a href="#2">Section 2</a></li> - <li><a href="#3">Section 3</a></li> - </ul> - <div class="tab-content" id="myTabContent2"> - <div class="tab-pane active" id="1"> - <h4>Section 1</h4> - <p>Oh hai!</p> - </div> - <div class="tab-pane" id="2"> - <h4>Section 2</h4> - <p>Oh hai!</p> - </div> - <div class="tab-pane" id="3"> - <h4>Section 3</h4> - <p>Oh hai!</p> - </div> + <!-- About Bootstrap + ================================================== --> + <section id="about"> + <div class="row"> + <div class="span4"> + <h2>Built for and by nerds</h2> + <p>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.</p> + <p>Read more on <a href="https://dev.twitter.com/blog/bootstrap-twitter">dev.twitter.com ›</a></p> </div> - </div> - </div> - <div class="span5"> - <div class="tabbable tabs-right"> - <ul class="tabs" data-tabs="tabs"> - <li class="active"><a href="#1">Section 1</a></li> - <li><a href="#2">Section 2</a></li> - <li><a href="#3">Section 3</a></li> - </ul> - <div class="tab-content" id="myTabContent3"> - <div class="tab-pane active" id="1"> - <h4>Section 1</h4> - <p>Oh hai!</p> - </div> - <div class="tab-pane" id="2"> - <h4>Section 2</h4> - <p>Oh hai!</p> - </div> - <div class="tab-pane" id="3"> - <h4>Section 3</h4> - <p>Oh hai!</p> - </div> + <div class="span4"> + <h2>Cross-everything</h2> + <p>Bootstrap is tested and supported in major modern browsers like Chrome, Safari, Internet Explorer, and Firefox.</p> + <img class="browser-support" src="assets/img/browsers.png" alt="Tested and supported in Chrome, Safari, Internet Explorer, and Firefox"> + <ul> + <li>Latest Safari</li> + <li>Latest Google Chrome</li> + <li>Firefox 4+</li> + <li>Internet Explorer 7+</li> + <li>Opera 11</li> + </ul> </div> - </div> - </div> - </div> - - <div class="tabbable tabs-bottom"> - <div class="tab-content"> - <div class="tab-pane active" id="1"> - <p>Oh hai #1!</p> - </div> - <div class="tab-pane" id="2"> - <p>Oh hai #2!</p> - </div> - <div class="tab-pane" id="3"> - <p>Oh hai #3!</p> - </div> - <div class="tab-pane" id="4"> - <p>Oh hai #4!</p> - </div> - </div> - <ul class="tabs" data-tabs="tabs"> - <li class="active"><a href="#1">Section 1</a></li> - <li><a href="#2">Section 2</a></li> - <li><a href="#3">Section 3</a></li> - <li><a href="#4">Section 4</a></li> - </ul> - </div> - - - <p>In addition to tabs, we have pills! Though a bit more limited in functionality, they share much of the same markup.</p> - <hr> - <h3>Basic pills example</h3> - <ul class="pills"> - <li class="active"><a href="#">Home</a></li> - <li><a href="#">Profile</a></li> - <li><a href="#">Messages</a></li> - <li><a href="#">Settings</a></li> - <li><a href="#">Contact</a></li> - </ul> -<pre class="prettyprint linenums"> -<ul class="pills"> - <li class="active"><a href="#">Home</a></li> - <li><a href="#">Profile</a></li> - <li><a href="#">Messages</a></li> - <li><a href="#">Settings</a></li> - <li><a href="#">Contact</a></li> -</ul> -</pre> - <h3>Vertical pill nav</h3> - <p>With a pill-style nav, you can also stack the list items to have a simple sidebar. We don't offer left or right aligned versions here because that's easy enough to customize based on your own needs</p> - <ul class="pills pills-vertical span4"> - <li class="active"><a href="#">Home</a></li> - <li><a href="#">Profile</a></li> - <li><a href="#">Messages</a></li> - <li><a href="#">Settings</a></li> - <li><a href="#">Contact</a></li> - </ul> - </div> - </div><!-- /row --> - - <!-- Breadcrumbs --> - <div class="row"> - <div class="span3"> - <h2>Breadcrumbs</h2> - <p>Breadcrumb navigation is used as a way to show users where they are within an app or a site, but not for primary navigation.</p> - </div> - <div class="span9"> - <ul class="breadcrumb"> - <li class="active">Home</li> - </ul> - <ul class="breadcrumb"> - <li><a href="#">Home</a> <span class="divider">/</span></li> - <li class="active">Middle page</li> - </ul> - <ul class="breadcrumb"> - <li><a href="#">Home</a> <span class="divider">/</span></li> - <li><a href="#">Middle page</a> <span class="divider">/</span></li> - <li class="active">Another one</li> - </ul> - <ul class="breadcrumb"> - <li><a href="#">Home</a> <span class="divider">/</span></li> - <li><a href="#">Middle page</a> <span class="divider">/</span></li> - <li><a href="#">Another one</a> <span class="divider">/</span></li> - <li class="active">You are here</li> - </ul> -<pre class="prettyprint linenums"> -<ul class="breadcrumb"> - <li><a href="#">Home</a> <span class="divider">/</span></li> - <li><a href="#">Middle page</a> <span class="divider">/</span></li> - <li><a href="#">Another one</a> <span class="divider">/</span></li> - <li class="active">You are here</li> -</ul> -</pre> - </div> - </div> - - <!-- Pagination --> - <div class="row"> - <div class="span3"> - <h2>Pagination</h2> - <p>Ultra simplistic and minimally styled pagination inspired by Rdio. The large block is hard to miss, easily scalable, and provides large click areas.</p> - </div> - <div class="span9"> - <div class="pagination"> - <ul> - <li class="prev disabled"><a href="#">← Previous</a></li> - <li class="active"><a href="#">1</a></li> - <li><a href="#">2</a></li> - <li><a href="#">3</a></li> - <li><a href="#">4</a></li> - <li class="next"><a href="#">Next →</a></li> - </ul> - </div> - <div class="pagination"> - <ul> - <li class="prev"><a href="#">←</a></li> - <li class="active"><a href="#">10</a></li> - <li><a href="#">11</a></li> - <li class="disabled"><a href="#">…</a></li> - <li><a href="#">20</a></li> - <li><a href="#">21</a></li> - <li class="next"><a href="#">→</a></li> - </ul> - </div> - <div class="pagination"> - <ul> - <li class="prev"><a href="#">←</a></li> - <li><a href="#">10</a></li> - <li><a href="#">11</a></li> - <li class="active"><a href="#">12</a></li> - <li><a href="#">13</a></li> - <li><a href="#">14</a></li> - <li class="next"><a href="#">→</a></li> - </ul> - </div> -<pre class="prettyprint linenums"> -<div class="pagination"> - <ul> - <li class="prev disabled"><a href="#">&larr; Previous</a></li> - <li class="active"><a href="#">1</a></li> - <li><a href="#">2</a></li> - <li><a href="#">3</a></li> - <li><a href="#">4</a></li> - <li><a href="#">5</a></li> - <li class="next"><a href="#">Next &rarr;</a></li> - </ul> -</div> -</pre> - </div> - </div><!-- /row --> - -</section> - - - -<!-- Alerts & Messages -================================================== --> -<section id="alerts"> - <div class="page-header"> - <h1>Alerts & Errors <small>Styles for success, warning, and error messages or alerts</small></h1> - </div> - <!-- Basic alert messages --> - <div class="row"> - <div class="span3"> - <h2>Basic alerts</h2> - <p><code>.alert-message</code></p> - <p>One-line messages for highlighting the failure, possible failure, or success of an action. Particularly useful for forms.</p> - <p><a class="btn js-btn" href="./javascript.html#alerts">Get the javascript »</a></p> - </div> - <div class="span9"> - <div class="alert-message warning"> - <a class="close" href="#">×</a> - <p><strong>Holy guacamole!</strong> Best check yo self, you’re not looking too good.</p> - </div> - <div class="alert-message error"> - <a class="close" href="#">×</a> - <p><strong>Oh snap!</strong> Change this and that and try again.</p> - </div> - <div class="alert-message success"> - <a class="close" href="#">×</a> - <p><strong>Well done!</strong> You successfully read this alert message.</p> - </div> - <div class="alert-message info"> - <a class="close" href="#">×</a> - <p><strong>Heads up!</strong> This is an alert that needs your attention, but it’s not a huge priority just yet.</p> - </div> - - <h4>Example code</h4> -<pre class="prettyprint linenums"> -<div class="alert-message warning"> - <a class="close" href="#">×</a> - <p><strong>Holy guacamole!</strong> Best check yo self, you’re not looking too good.</p> -</div> -</pre> - </div> - </div><!-- /row --> - <!-- Block messages --> - <div class="row"> - <div class="span3"> - <h2>Block messages</h2> - <p><code>.alert-message.block-message</code></p> - <p>For messages that require a bit of explanation, we have paragraph style alerts. These are perfect for bubbling up longer error messages, warning a user of a pending action, or just presenting information for more emphasis on the page.</p> - <p><a class="btn js-btn" href="./javascript.html#alerts">Get the javascript »</a></p> - </div> - <div class="span9"> - <div class="alert-message block-message warning"> - <a class="close" href="#">×</a> - <p><strong>Holy guacamole! This is a warning!</strong> Best check yo self, you’re not looking too good. Nulla vitae elit libero, a pharetra augue. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.</p> - <div class="alert-actions"> - <a class="btn small" href="#">Take this action</a> <a class="btn small" href="#">Or do this</a> - </div> - </div> - <div class="alert-message block-message error"> - <a class="close" href="#">×</a> - <p><strong>Oh snap! You got an error!</strong> Change this and that and try again.</p> - <ul> - <li>Duis mollis est non commodo luctus</li> - <li>Nisi erat porttitor ligula</li> - <li>Eget lacinia odio sem nec elit</li> - </ul> - <div class="alert-actions"> - <a class="btn small" href="#">Take this action</a> <a class="btn small" href="#">Or do this</a> - </div> - </div> - <div class="alert-message block-message success"> - <a class="close" href="#">×</a> - <p><strong>Well done!</strong> You successfully read this alert message. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Maecenas faucibus mollis interdum.</p> - <div class="alert-actions"> - <a class="btn small" href="#">Take this action</a> <a class="btn small" href="#">Or do this</a> - </div> - </div> - <div class="alert-message block-message info"> - <a class="close" href="#">×</a> - <p><strong>Heads up!</strong> This is an alert that needs your attention, but it’s not a huge priority just yet.</p> - <div class="alert-actions"> - <a class="btn small" href="#">Take this action</a> <a class="btn small" href="#">Or do this</a> - </div> - </div> - - <h4>Example code</h4> -<pre class="prettyprint linenums"> -<div class="alert-message block-message warning"> - <a class="close" href="#">×</a> - <p><strong>Holy guacamole! This is a warning!</strong> Best check yo self, you’re not looking too good. Nulla vitae elit libero, a pharetra augue. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.</p> - <div class="alert-actions"> - <a class="btn small" href="#">Take this action</a> <a class="btn small" href="#">Or do this</a> - </div> -</div> -</pre> - </div> - </div><!-- /row --> -</section> - - -<!-- Popovers -================================================== --> -<section id="popovers"> - <div class="page-header"> - <h1>Popovers <small>Components for displaying content in modals, tooltips, and popovers</small></h1> - </div> - <div class="row"> - <div class="span3"> - <h2>Modals</h2> - <p>Modals—dialogs or lightboxes—are great for contextual actions in situations where it’s important that the background context be maintained.</p> - <p><a class="btn js-btn" href="./javascript.html#modal">Get the javascript »</a></p> - </div> - <div class="span9"> - <div class="well" style="background-color: #888; border: none; padding: 40px;"> - <!-- Modal --> - <div class="modal" style="position: relative; top: auto; left: auto; margin: 0 auto; z-index: 1"> - <div class="modal-header"> - <a href="#" class="close js-dismiss">×</a> - <h3>Modal Heading</h3> - </div> - <div class="modal-body"> - <p>One fine body…</p> - </div> - <div class="modal-footer"> - <a href="#" class="btn primary">Primary</a> - <a href="#" class="btn">Secondary</a> - </div> - </div> - </div> - </div> - </div><!-- /row --> - - <!-- Tooltips --> - <div class="row"> - <div class="span3"> - <h2>Tooltips</h2> - <p>Twipsies are super useful for aiding a confused user and pointing them in the right direction.</p> - <p><a class="btn js-btn" href="./javascript.html#twipsy">Get the javascript »</a></p> - </div> - <div class="span9"> - <div class="twipsies well"> - <div style="position: relative"> - <p class="muted" style="margin-bottom: 0"> -Lorem ipsum dolar sit amet illo error <a href="#" title="below">ipsum</a> veritatis aut iste perspiciatis iste voluptas natus illo quasi odit aut natus consequuntur consequuntur, aut natus illo voluptatem odit perspiciatis laudantium rem doloremque totam voluptas. <a href="#" title="right">Voluptasdicta</a> eaque beatae aperiam ut enim voluptatem explicabo explicabo, voluptas quia odit fugit accusantium totam totam architecto explicabo sit quasi fugit fugit, totam doloremque unde sunt <a href="#" title="left">sed</a> dicta quae accusantium fugit voluptas nemo voluptas voluptatem <a href="#" title="above">rem</a> quae aut veritatis quasi quae. - </p> - </div> - </div> - </div> - </div><!-- /row --> - - <!-- Popovers --> - <div class="row"> - <div class="span3"> - <h2>Popovers</h2> - <p>Use popovers to provide subtextual information to a page without affecting layout.</p> - <p><a class="btn js-btn" href="./javascript.html#popover">Get the javascript »</a></p> - </div> - <div class="span9"> - <div class="well popover-well"> - <div class="popover-wrapper"> - <div class="popover left"> - <div class="arrow"></div> - <div class="inner"> - <h3 class="title">Popover Title</h3> - <div class="content"> - <p>Etiam porta sem malesuada magna mollis euismod. Maecenas faucibus mollis interdum. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.</p> - </div> + <div class="span4"> + <h2>What's included</h2> + <p>Bootstrap comes complete with compiled CSS, uncompiled, and example templates.</p> + <ul> + <li><span class="label">New in 1.3</span> <a href="./javascript.html">Javascript plugins</a></li> + <li>All original .less files</li> + <li>Fully <a href="../bootstrap.css">compiled</a> and <a href="../bootstrap.min.css">minified</a> CSS</li> + <li>Complete styleguide documentation</li> + <li>Three example pages with different layouts</li> + </ul> </div> - </div> - <img class="large-bird" src="assets/img/bird.png" > - </div> - </div> - </div> - </div><!-- /row --> -</section> - - -<!-- Using Javascript w/ Bootstrap - ================================================== --> - - <section id="javascript"> - <div class="page-header"> - <h1>Using javascript with Bootstrap <small>An index of plugins to get you started</small></h1> - </div> - <div class="row"> - <div class="span3"> - <h2>Getting started</h2> - <p>Integrating javascript with the Bootstrap library is super easy. Below we go over the basics and provide you with some awesome plugins to get you started!</p> - <p><a class="btn primary" href="./javascript.html">View javascript docs »</a></p> - </div> - <div class="span9"> - <h3>What's included</h3> - <p>Bring some of Bootstrap's primary components to life with new custom plugins that work with <a href="http://jquery.com/" target="_blank">jQuery</a> and <a href="http://ender.no.de" target="_blank">Ender</a>. We encourage you to extend and modify them to fit your specific development needs.</p> - <table class="zebra-striped"> - <thead> - <tr> - <th style="width: 150px;">File</th> - <th>Description</th> - </tr> - </thead> - <tbody> - <tr> - <td><a href="./javascript.html#modal">bootstrap-modal.js</a></td> - <td>Our Modal plugin is a <strong>super</strong> slim take on the traditional modal js plugin! We took special care to include only the bare functionality that we require at twitter.</td> - </tr> - <tr> - <td><a href="./javascript.html#alerts">bootstrap-alerts.js</a></td> - <td>The alert plugin is a super tiny class for adding close functionality to alerts.</td> - </tr> - <tr> - <td><a href="./javascript.html#dropdowns">bootstrap-dropdown.js</a></td> - <td>This plugin is for adding dropdown interaction to the bootstrap navbar or tabbed navigations.</td> - </tr> - <tr> - <td><a href="./javascript.html#scrollspy">bootstrap-scrollspy.js</a></td> - <td>The ScrollSpy plugin is for adding an auto updating nav based on scroll position to the bootstrap navbar.</td> - </tr> - <tr> - <td><a href="./javascript.html#tabs">bootstrap-tabs.js</a></td> - <td>This plugin adds quick, dynamic tab and pill functionality for cycling through local content.</td> - </tr> - <tr> - <td><a href="./javascript.html#twipsy">bootstrap-twipsy.js</a></td> - <td>Based on the excellent jQuery.tipsy plugin written by Jason Frame; twipsy is an updated version, which doesn't rely on images, uses css3 for animations, and data-attributes for local title storage!</td> - </tr> - <tr> - <td><a href="./javascript.html#popover">bootstrap-popover.js</a></td> - <td>The popover plugin provides a simple interface for adding popovers to your application. It extends the <a href="#twipsy">boostrap-twipsy.js</a> plugin, so be sure to grab that file as well when including popovers in your project!</td> - </tr> - </tbody> - </table> - <h3>Is javascript necessary?</h3> - <p><strong>Nope!</strong> Bootstrap is designed first and foremost to be a CSS library. This javascript provides a basic interactive layer on top of the included styles.</p> - <p>However, for those who do need javascript, we've provided the plugins above to help you understand how to integrate Bootstrap with javascript and to give you a quick, lightweight option for the basic functionality right away.</p> - <p>For more information and to see some live demos, please refer to our <a href="./javascript.html">plugin documentation page</a>.</p> - </div> - </div> - - -<!-- Using Bootstrap w/ Less -================================================== --> -<section id="less"> -<div class="page-header"> - <h1>Using Bootstrap with Less <small>Supercharge your CSS with variables, mixins, and functions</small></h1> -</div> -<div class="row"> - <div class="span3"> - <p>Bootstrap was built with <a href="http://markdotto.com/bootstrap/">Preboot</a>, an open-source pack of mixins and variables to be used in conjunction with <a href="http://lesscss.org" target="_blank">Less</a>, a CSS preprocessor for faster and easier web development.</p> - <p>Check out how we used Preboot in Bootstrap and how you can make use of it should you choose to run Less on your next project.</p> - </div> - <div class="span9"> - <h2>How to use it</h2> - <p>Use this option to make full use of Bootstrap’s Less variables, mixins, and nesting in CSS via javascript in your browser.</p> -<pre class="prettyprint linenums"> -<link rel="stylesheet/less" href="less/bootstrap.less" media="all" /> -<script src="js/less-1.1.3.min.js"></script></pre> -<p>Not feeling the .js solution? <a href="http://incident57.com/less" target="_blank">Try the Less Mac app</a> or <a href="http://lesscss.org/#-client-side-usage" target="_blank">use Node.js</a> to compile when you deploy your code.</p> - - <h2>What’s included</h2> - <p>Here are some of the highlights of what’s included in Twitter Bootstrap as part of Bootstrap. Head over to the Bootstrap website or Github project page to download and learn more.</p> - <h3>Variables</h3> - <p>Variables in Less are perfect for maintaining and updating your CSS headache free. When you want to change a color value or a frequently used value, update it in one spot and you’re set.</p> -<pre class="prettyprint linenums"> -// Links -@linkColor: #8b59c2; -@linkColorHover: darken(@linkColor, 10); - -// Grays -@black: #000; -@grayDark: lighten(@black, 25%); -@gray: lighten(@black, 50%); -@grayLight: lighten(@black, 70%); -@grayLighter: lighten(@black, 90%); -@white: #fff; - -// Accent Colors -@blue: #08b5fb; -@green: #46a546; -@red: #9d261d; -@yellow: #ffc40d; -@orange: #f89406; -@pink: #c3325f; -@purple: #7a43b6; - -// Baseline grid -@basefont: 13px; -@baseline: 18px; -</pre> - -<h3>Commenting</h3> -<p>Less also provides another style of commenting in addition to CSS’s normal <code>/* ... */</code> syntax.</p> -<pre class="prettyprint linenums"> -// This is a comment -/* This is also a comment */ -</pre> - -<h3>Mixins up the wazoo</h3> -<p>Mixins are basically includes or partials for CSS, allowing you to combine a block of code into one. They’re great for vendor prefixed properties like <code>box-shadow</code>, cross-browser gradients, font stacks, and more. Below is a sample of the mixins that are included with Bootstrap.</p> -<h4>Font stacks</h4> -<pre class="prettyprint linenums"> -#font { - .shorthand(@weight: normal, @size: 14px, @lineHeight: 20px) { - font-size: @size; - font-weight: @weight; - line-height: @lineHeight; - } - .sans-serif(@weight: normal, @size: 14px, @lineHeight: 20px) { - font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; - font-size: @size; - font-weight: @weight; - line-height: @lineHeight; - } - ... -} -</pre> -<h4>Gradients</h4> -<pre class="prettyprint linenums"> -#gradient { - ... - .vertical (@startColor: #555, @endColor: #333) { - background-color: @endColor; - background-repeat: repeat-x; - background-image: -khtml-gradient(linear, left top, left bottom, from(@startColor), to(@endColor)); // Konqueror - background-image: -moz-linear-gradient(@startColor, @endColor); // FF 3.6+ - background-image: -ms-linear-gradient(@startColor, @endColor); // IE10 - background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, @startColor), color-stop(100%, @endColor)); // Safari 4+, Chrome 2+ - background-image: -webkit-linear-gradient(@startColor, @endColor); // Safari 5.1+, Chrome 10+ - background-image: -o-linear-gradient(@startColor, @endColor); // Opera 11.10 - background-image: linear-gradient(@startColor, @endColor); // The standard - } - ... -} -</pre> - -<h3>Operations</h3> -<p>Get fancy and perform some math to generate flexible and powerful mixins like the one below.</p> -<pre class="prettyprint linenums"> -// Griditude -@gridColumns: 16; -@gridColumnWidth: 40px; -@gridGutterWidth: 20px; -@siteWidth: (@gridColumns * @gridColumnWidth) + (@gridGutterWidth * (@gridColumns - 1)); - -// Make some columns -.columns(@columnSpan: 1) { - width: (@gridColumnWidth * @columnSpan) + (@gridGutterWidth * (@columnSpan - 1)); -} -</pre> - - <h2 id="compiling">Compiling Less</h2> - <p>After modifying the <code>.less</code> files in /lib/, you'll need to recompile them in order to regenerate the bootstrap-*.*.*.css and bootstrap-*.*.*.min.css files. If you're submitting a pull request to GitHub, you must always recompile.</p> - <h3>Ways to compile</h3> - <table class="zebra-striped"> - <thead> - <tr> - <th style="width: 120px;">Method</th> - <th>Steps</th> - </tr> - </thead> - <tbody> - <tr> - <td>Node with makefile</td> - <td> - <p>Install the less command line compiler with npm by running the following command:</p> - <pre>$ npm install lessc</pre> - <p>Once installed just run <code>make</code> from the root of your bootstrap directory and you're all set.</p> - <p>Additionally, if you have <a href="https://github.com/mynyml/watchr">watchr</a> installed, you may run <code>make watch</code> to have bootstrap automatically rebuilt every time you edit a file in the bootstrap lib (this isn't required, just a convenience method).</p> - </td> - </tr> - <td>Javascript</td> - <td> - <p><a href="http://lesscss.org/">Download the latest Less.js</a> and include the path to it (and Bootstrap) in the <code>head</code>.</p> -<pre class="prettyprint"> -<link rel="stylesheet/less" href="/path/to/bootstrap.less"> -<script src="/path/to/less.js"></script> -</pre> - <p>To recompile the .less files, just save them and reload your page. Less.js compiles them and stores them in local storage.</p> - </td> - </tr> - <tr> - <td>Command line</td> - <td> - <p>If you already have the less command line tool installed, simply run the following command:</p> - <pre>$ lessc ./lib/bootstrap.less > bootstrap.css</pre> - <p>Be sure to include <code>--compress</code> in that command if you're trying to save some bytes!</p> - </td> - </tr> - <tr> - <td>Mac app</td> - <td> - <p><a href="http://incident57.com/less/">The unofficial Mac app</a> watches directories of .less files and compiles the code to local files after every save of a watched .less file.</p> - <p>If you like, you can toggle preferences in the app for automatic minifying and which directory the compiled files end up in.</p> - </td> - </tr> - </tbody> - </table> - </div> -</div> + </div><!-- /row --> + </section> + + <h3>Quick-start examples</h3> + <p>Need some quick templates? Check out these basic examples we've put together:</p> + <ul class="media-grid"> + <li> + <a href="../examples/hero.html"><img src="assets/img/example-diagram-01.png" alt="Simple three-column layout with hero unit"></a> + </li> + <li> + <a href="../examples/fluid.html"><img src="assets/img/example-diagram-02.png" alt="Fluid layout with static sidebar"></a> + </li> + <li> + <a href="../examples/container-app.html"><img src="assets/img/example-diagram-03.png" alt="Simple hanging container for apps"></a> + </li> + </ul> -</section> + </div><!-- /#overview --> + <!-- Footer + ================================================== --> <footer class="footer"> <p class="pull-right"><a href="#">Back to top</a></p> <p> @@ -2168,11 +189,10 @@ Lorem ipsum dolar sit amet illo error <a href="#" title="below">ipsum</a> verita Code licensed under the <a href="http://www.apache.org/licenses/LICENSE-2.0" target="_blank">Apache License v2.0</a>. Documentation licensed under <a href="http://creativecommons.org/licenses/by/3.0/">CC BY 3.0</a>. </p> </footer> - </div><!-- /container --> - <!-- Le javascript --> + <!-- Placed at the end of the document so the pages load faster --> <script src="http://code.jquery.com/jquery-1.5.2.min.js"></script> <script src="http://autobahn.tablesorter.com/jquery.tablesorter.min.js"></script> <script src="assets/js/google-code-prettify/prettify.js"></script> @@ -2182,6 +202,5 @@ Lorem ipsum dolar sit amet illo error <a href="#" title="below">ipsum</a> verita <script src="../js/bootstrap-twipsy.js"></script> <script src="../js/bootstrap-scrollspy.js"></script> <script src="assets/js/application.js"></script> - </body> </html> diff --git a/docs/javascript.html b/docs/javascript.html index 68a3d0cd46..c9ac7e21da 100644 --- a/docs/javascript.html +++ b/docs/javascript.html @@ -27,7 +27,24 @@ <!-- Navbar ================================================== --> - <div class="navbar navbar-fixed" data-scrollspy="scrollspy"> + <div class="navbar navbar-fixed"> + <div class="navbar-inner"> + <div class="container"> + <a class="brand" href="./index.html">Bootstrap</a> + <ul class="nav"> + <li><a href="./index.html">Overview</a></li> + <li><a href="./scaffolding.html">Scaffolding</a></li> + <li><a href="./base-css.html">Base CSS</a></li> + <li><a href="./components.html">Components</a></li> + <li class="active"><a href="./javascript.html">Javascript plugins</a></li> + <li><a href="./less.html">Using LESS</a></li> + </ul> + </div> + </div> + </div> + +<!-- + <div class="navbar navbar-fixed" data-scrollspy="scrollspy"> <div class="navbar-inner"> <div class="container"> <a class="brand" href="./index.html">Bootstrap</a> @@ -44,14 +61,78 @@ </div> </div> </div> - - <div class="container"> - <!-- Masthead (blueprinty thing) - ================================================== --> - <header class="jumbotron subhead" id="overview"> - <h1>Javascript for Bootstrap</h1> - <p class="lead">Bring Bootstrap's components to life with custom plugins for <a href="http://jquery.com/" target="_blank">jQuery</a> and <a href="http://ender.no.de" target="_blank">Ender</a>.</p> - </header> + --> + + <div class="container"> + <!-- Masthead + ================================================== --> + <header class="jumbotron subhead" id="overview"> + <h1>Javascript for Bootstrap</h1> + <p class="lead">Bring Bootstrap's components to life with custom plugins for <a href="http://jquery.com/" target="_blank">jQuery</a> and <a href="http://ender.no.de" target="_blank">Ender</a></p> + </header> + + +<!-- Using Javascript w/ Bootstrap + ================================================== --> + + <section id="javascript"> + <div class="page-header"> + <h1>Using javascript with Bootstrap <small>An index of plugins to get you started</small></h1> + </div> + <div class="row"> + <div class="span3"> + <h2>Getting started</h2> + <p>Integrating javascript with the Bootstrap library is super easy. Below we go over the basics and provide you with some awesome plugins to get you started!</p> + <p><a class="btn primary" href="./javascript.html">View javascript docs »</a></p> + </div> + <div class="span9"> + <h3>What's included</h3> + <p>Bring some of Bootstrap's primary components to life with new custom plugins that work with <a href="http://jquery.com/" target="_blank">jQuery</a> and <a href="http://ender.no.de" target="_blank">Ender</a>. We encourage you to extend and modify them to fit your specific development needs.</p> + <table class="zebra-striped"> + <thead> + <tr> + <th style="width: 150px;">File</th> + <th>Description</th> + </tr> + </thead> + <tbody> + <tr> + <td><a href="./javascript.html#modal">bootstrap-modal.js</a></td> + <td>Our Modal plugin is a <strong>super</strong> slim take on the traditional modal js plugin! We took special care to include only the bare functionality that we require at twitter.</td> + </tr> + <tr> + <td><a href="./javascript.html#alerts">bootstrap-alerts.js</a></td> + <td>The alert plugin is a super tiny class for adding close functionality to alerts.</td> + </tr> + <tr> + <td><a href="./javascript.html#dropdowns">bootstrap-dropdown.js</a></td> + <td>This plugin is for adding dropdown interaction to the bootstrap navbar or tabbed navigations.</td> + </tr> + <tr> + <td><a href="./javascript.html#scrollspy">bootstrap-scrollspy.js</a></td> + <td>The ScrollSpy plugin is for adding an auto updating nav based on scroll position to the bootstrap navbar.</td> + </tr> + <tr> + <td><a href="./javascript.html#tabs">bootstrap-tabs.js</a></td> + <td>This plugin adds quick, dynamic tab and pill functionality for cycling through local content.</td> + </tr> + <tr> + <td><a href="./javascript.html#twipsy">bootstrap-twipsy.js</a></td> + <td>Based on the excellent jQuery.tipsy plugin written by Jason Frame; twipsy is an updated version, which doesn't rely on images, uses css3 for animations, and data-attributes for local title storage!</td> + </tr> + <tr> + <td><a href="./javascript.html#popover">bootstrap-popover.js</a></td> + <td>The popover plugin provides a simple interface for adding popovers to your application. It extends the <a href="#twipsy">boostrap-twipsy.js</a> plugin, so be sure to grab that file as well when including popovers in your project!</td> + </tr> + </tbody> + </table> + <h3>Is javascript necessary?</h3> + <p><strong>Nope!</strong> Bootstrap is designed first and foremost to be a CSS library. This javascript provides a basic interactive layer on top of the included styles.</p> + <p>However, for those who do need javascript, we've provided the plugins above to help you understand how to integrate Bootstrap with javascript and to give you a quick, lightweight option for the basic functionality right away.</p> + <p>For more information and to see some live demos, please refer to our <a href="./javascript.html">plugin documentation page</a>.</p> + </div> + </div> +</section> <!-- Modal @@ -638,28 +719,27 @@ $('#my-modal').bind('hidden', function () { </section> + <!-- Footer + ================================================== --> <footer class="footer"> <p class="pull-right"><a href="#">Back to top</a></p> <p> - Designed and built with all the love in the world <a href="http://twitter.com/twitter" target="_blank">@twitter</a> by <a href="http://twitter.com/mdo" target="_blank">@mdo</a> and <a href="http://twitter.com/fat" target="_blank">@fat</a>.<br /> - Licensed under the <a href="http://www.apache.org/licenses/LICENSE-2.0" target="_blank">Apache License v2.0</a>. + Designed and built with all the love in the world <a href="http://twitter.com/twitter" target="_blank">@twitter</a> by <a href="http://twitter.com/mdo" target="_blank">@mdo</a> and <a href="http://twitter.com/fat" target="_blank">@fat</a>.<br> + Code licensed under the <a href="http://www.apache.org/licenses/LICENSE-2.0" target="_blank">Apache License v2.0</a>. Documentation licensed under <a href="http://creativecommons.org/licenses/by/3.0/">CC BY 3.0</a>. </p> </footer> - </div><!-- /container --> - <!-- Le javascript --> - <script src="http://code.jquery.com/jquery-1.6.4.min.js"></script> + <!-- Placed at the end of the document so the pages load faster --> + <script src="http://code.jquery.com/jquery-1.5.2.min.js"></script> + <script src="http://autobahn.tablesorter.com/jquery.tablesorter.min.js"></script> <script src="assets/js/google-code-prettify/prettify.js"></script> <script>$(function () { prettyPrint() })</script> - <script src="../js/bootstrap-modal.js"></script> - <script src="../js/bootstrap-alerts.js"></script> - <script src="../js/bootstrap-twipsy.js"></script> - <script src="../js/bootstrap-popover.js"></script> + <script src="../js/bootstrap-transitions.js"></script> <script src="../js/bootstrap-dropdown.js"></script> + <script src="../js/bootstrap-twipsy.js"></script> <script src="../js/bootstrap-scrollspy.js"></script> - <script src="../js/bootstrap-tabs.js"></script> - + <script src="assets/js/application.js"></script> </body> </html> diff --git a/docs/less.html b/docs/less.html new file mode 100644 index 0000000000..806c2eedec --- /dev/null +++ b/docs/less.html @@ -0,0 +1,242 @@ +<!DOCTYPE html> +<html lang="en"> + <head> + <meta charset="utf-8"> + <title>Bootstrap, from Twitter</title> + <meta name="description" content=""> + <meta name="author" content=""> + + <!-- 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]--> + + <!-- Le styles --> + <link href="../bootstrap.css" rel="stylesheet"> + <link href="assets/css/docs.css" rel="stylesheet"> + <link href="assets/js/google-code-prettify/prettify.css" rel="stylesheet"> + + <!-- Le fav and touch icons --> + <link rel="shortcut icon" type="image/x-icon" href="assets/ico/favicon.ico"> + <link rel="apple-touch-icon" href="assets/ico/bootstrap-apple-57x57.png"> + <link rel="apple-touch-icon" sizes="72x72" href="assets/ico/bootstrap-apple-72x72.png"> + <link rel="apple-touch-icon" sizes="114x114" href="assets/ico/bootstrap-apple-114x114.png"> + </head> + + <body> + + <!-- Navbar + ================================================== --> + <div class="navbar navbar-fixed"> + <div class="navbar-inner"> + <div class="container"> + <a class="brand" href="./index.html">Bootstrap</a> + <ul class="nav"> + <li><a href="./index.html">Overview</a></li> + <li><a href="./scaffolding.html">Scaffolding</a></li> + <li><a href="./base-css.html">Base CSS</a></li> + <li><a href="./components.html">Components</a></li> + <li><a href="./javascript.html">Javascript plugins</a></li> + <li class="active"><a href="./less.html">Using LESS</a></li> + </ul> + </div> + </div> + </div> + + <div class="container"> + + <!-- Masthead + ================================================== --> + <header class="jumbotron subhead" id="overview"> + <h1>Using LESS</h1> + <p class="lead">Be a boss and use Bootstrap's built-in variables, mixins, and more via LESS</p> + </header> + + +<!-- Using Bootstrap w/ Less +================================================== --> +<section id="less"> +<div class="page-header"> + <h1>Using Bootstrap with Less <small>Supercharge your CSS with variables, mixins, and functions</small></h1> +</div> +<div class="row"> + <div class="span3"> + <p>Bootstrap was built with <a href="http://markdotto.com/bootstrap/">Preboot</a>, an open-source pack of mixins and variables to be used in conjunction with <a href="http://lesscss.org" target="_blank">Less</a>, a CSS preprocessor for faster and easier web development.</p> + <p>Check out how we used Preboot in Bootstrap and how you can make use of it should you choose to run Less on your next project.</p> + </div> + <div class="span9"> + <h2>How to use it</h2> + <p>Use this option to make full use of Bootstrap’s Less variables, mixins, and nesting in CSS via javascript in your browser.</p> +<pre class="prettyprint linenums"> +<link rel="stylesheet/less" href="less/bootstrap.less" media="all" /> +<script src="js/less-1.1.3.min.js"></script></pre> +<p>Not feeling the .js solution? <a href="http://incident57.com/less" target="_blank">Try the Less Mac app</a> or <a href="http://lesscss.org/#-client-side-usage" target="_blank">use Node.js</a> to compile when you deploy your code.</p> + + <h2>What’s included</h2> + <p>Here are some of the highlights of what’s included in Twitter Bootstrap as part of Bootstrap. Head over to the Bootstrap website or Github project page to download and learn more.</p> + <h3>Variables</h3> + <p>Variables in Less are perfect for maintaining and updating your CSS headache free. When you want to change a color value or a frequently used value, update it in one spot and you’re set.</p> +<pre class="prettyprint linenums"> +// Links +@linkColor: #8b59c2; +@linkColorHover: darken(@linkColor, 10); + +// Grays +@black: #000; +@grayDark: lighten(@black, 25%); +@gray: lighten(@black, 50%); +@grayLight: lighten(@black, 70%); +@grayLighter: lighten(@black, 90%); +@white: #fff; + +// Accent Colors +@blue: #08b5fb; +@green: #46a546; +@red: #9d261d; +@yellow: #ffc40d; +@orange: #f89406; +@pink: #c3325f; +@purple: #7a43b6; + +// Baseline grid +@basefont: 13px; +@baseline: 18px; +</pre> + +<h3>Commenting</h3> +<p>Less also provides another style of commenting in addition to CSS’s normal <code>/* ... */</code> syntax.</p> +<pre class="prettyprint linenums"> +// This is a comment +/* This is also a comment */ +</pre> + +<h3>Mixins up the wazoo</h3> +<p>Mixins are basically includes or partials for CSS, allowing you to combine a block of code into one. They’re great for vendor prefixed properties like <code>box-shadow</code>, cross-browser gradients, font stacks, and more. Below is a sample of the mixins that are included with Bootstrap.</p> +<h4>Font stacks</h4> +<pre class="prettyprint linenums"> +#font { + .shorthand(@weight: normal, @size: 14px, @lineHeight: 20px) { + font-size: @size; + font-weight: @weight; + line-height: @lineHeight; + } + .sans-serif(@weight: normal, @size: 14px, @lineHeight: 20px) { + font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; + font-size: @size; + font-weight: @weight; + line-height: @lineHeight; + } + ... +} +</pre> +<h4>Gradients</h4> +<pre class="prettyprint linenums"> +#gradient { + ... + .vertical (@startColor: #555, @endColor: #333) { + background-color: @endColor; + background-repeat: repeat-x; + background-image: -khtml-gradient(linear, left top, left bottom, from(@startColor), to(@endColor)); // Konqueror + background-image: -moz-linear-gradient(@startColor, @endColor); // FF 3.6+ + background-image: -ms-linear-gradient(@startColor, @endColor); // IE10 + background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, @startColor), color-stop(100%, @endColor)); // Safari 4+, Chrome 2+ + background-image: -webkit-linear-gradient(@startColor, @endColor); // Safari 5.1+, Chrome 10+ + background-image: -o-linear-gradient(@startColor, @endColor); // Opera 11.10 + background-image: linear-gradient(@startColor, @endColor); // The standard + } + ... +} +</pre> + +<h3>Operations</h3> +<p>Get fancy and perform some math to generate flexible and powerful mixins like the one below.</p> +<pre class="prettyprint linenums"> +// Griditude +@gridColumns: 16; +@gridColumnWidth: 40px; +@gridGutterWidth: 20px; +@siteWidth: (@gridColumns * @gridColumnWidth) + (@gridGutterWidth * (@gridColumns - 1)); + +// Make some columns +.columns(@columnSpan: 1) { + width: (@gridColumnWidth * @columnSpan) + (@gridGutterWidth * (@columnSpan - 1)); +} +</pre> + + <h2 id="compiling">Compiling Less</h2> + <p>After modifying the <code>.less</code> files in /lib/, you'll need to recompile them in order to regenerate the bootstrap-*.*.*.css and bootstrap-*.*.*.min.css files. If you're submitting a pull request to GitHub, you must always recompile.</p> + <h3>Ways to compile</h3> + <table class="zebra-striped"> + <thead> + <tr> + <th style="width: 120px;">Method</th> + <th>Steps</th> + </tr> + </thead> + <tbody> + <tr> + <td>Node with makefile</td> + <td> + <p>Install the less command line compiler with npm by running the following command:</p> + <pre>$ npm install lessc</pre> + <p>Once installed just run <code>make</code> from the root of your bootstrap directory and you're all set.</p> + <p>Additionally, if you have <a href="https://github.com/mynyml/watchr">watchr</a> installed, you may run <code>make watch</code> to have bootstrap automatically rebuilt every time you edit a file in the bootstrap lib (this isn't required, just a convenience method).</p> + </td> + </tr> + <td>Javascript</td> + <td> + <p><a href="http://lesscss.org/">Download the latest Less.js</a> and include the path to it (and Bootstrap) in the <code>head</code>.</p> +<pre class="prettyprint"> +<link rel="stylesheet/less" href="/path/to/bootstrap.less"> +<script src="/path/to/less.js"></script> +</pre> + <p>To recompile the .less files, just save them and reload your page. Less.js compiles them and stores them in local storage.</p> + </td> + </tr> + <tr> + <td>Command line</td> + <td> + <p>If you already have the less command line tool installed, simply run the following command:</p> + <pre>$ lessc ./lib/bootstrap.less > bootstrap.css</pre> + <p>Be sure to include <code>--compress</code> in that command if you're trying to save some bytes!</p> + </td> + </tr> + <tr> + <td>Mac app</td> + <td> + <p><a href="http://incident57.com/less/">The unofficial Mac app</a> watches directories of .less files and compiles the code to local files after every save of a watched .less file.</p> + <p>If you like, you can toggle preferences in the app for automatic minifying and which directory the compiled files end up in.</p> + </td> + </tr> + </tbody> + </table> + </div> +</div> + +</section> + + + <!-- Footer + ================================================== --> + <footer class="footer"> + <p class="pull-right"><a href="#">Back to top</a></p> + <p> + Designed and built with all the love in the world <a href="http://twitter.com/twitter" target="_blank">@twitter</a> by <a href="http://twitter.com/mdo" target="_blank">@mdo</a> and <a href="http://twitter.com/fat" target="_blank">@fat</a>.<br> + Code licensed under the <a href="http://www.apache.org/licenses/LICENSE-2.0" target="_blank">Apache License v2.0</a>. Documentation licensed under <a href="http://creativecommons.org/licenses/by/3.0/">CC BY 3.0</a>. + </p> + </footer> + </div><!-- /container --> + + <!-- Le javascript --> + <!-- Placed at the end of the document so the pages load faster --> + <script src="http://code.jquery.com/jquery-1.5.2.min.js"></script> + <script src="http://autobahn.tablesorter.com/jquery.tablesorter.min.js"></script> + <script src="assets/js/google-code-prettify/prettify.js"></script> + <script>$(function () { prettyPrint() })</script> + <script src="../js/bootstrap-transitions.js"></script> + <script src="../js/bootstrap-dropdown.js"></script> + <script src="../js/bootstrap-twipsy.js"></script> + <script src="../js/bootstrap-scrollspy.js"></script> + <script src="assets/js/application.js"></script> + </body> +</html> diff --git a/docs/scaffolding.html b/docs/scaffolding.html new file mode 100644 index 0000000000..9334e830c1 --- /dev/null +++ b/docs/scaffolding.html @@ -0,0 +1,383 @@ +<!DOCTYPE html> +<html lang="en"> + <head> + <meta charset="utf-8"> + <title>Bootstrap, from Twitter</title> + <meta name="description" content=""> + <meta name="author" content=""> + + <!-- 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]--> + + <!-- Le styles --> + <link href="../bootstrap.css" rel="stylesheet"> + <link href="assets/css/docs.css" rel="stylesheet"> + <link href="assets/js/google-code-prettify/prettify.css" rel="stylesheet"> + + <!-- Le fav and touch icons --> + <link rel="shortcut icon" type="image/x-icon" href="assets/ico/favicon.ico"> + <link rel="apple-touch-icon" href="assets/ico/bootstrap-apple-57x57.png"> + <link rel="apple-touch-icon" sizes="72x72" href="assets/ico/bootstrap-apple-72x72.png"> + <link rel="apple-touch-icon" sizes="114x114" href="assets/ico/bootstrap-apple-114x114.png"> + </head> + + <body> + + <!-- Navbar + ================================================== --> + <div class="navbar navbar-fixed"> + <div class="navbar-inner"> + <div class="container"> + <a class="brand" href="./index.html">Bootstrap</a> + <ul class="nav"> + <li><a href="./index.html">Overview</a></li> + <li class="active"><a href="./scaffolding.html">Scaffolding</a></li> + <li><a href="./base-css.html">Base CSS</a></li> + <li><a href="./components.html">Components</a></li> + <li><a href="./javascript.html">Javascript plugins</a></li> + <li><a href="./less.html">Using LESS</a></li> + </ul> + </div> + </div> + </div> + + <div class="container"> + + <!-- Masthead + ================================================== --> + <header class="jumbotron subhead" id="overview"> + <h1>Scaffolding</h1> + <p class="lead">Responsive 12-column grid and fixed- and fluid-width layouts</p> + </header> + + +<!-- Grid system +================================================== --> +<section id="grid-system"> + <div class="page-header"> + <h1>Grid system <small>12 columns with a responsive twist</small></h1> + </div> + + <h2>Default 940px grid</h2> + <div class="row show-grid"> + <div class="span1">1</div> + <div class="span1">1</div> + <div class="span1">1</div> + <div class="span1">1</div> + <div class="span1">1</div> + <div class="span1">1</div> + <div class="span1">1</div> + <div class="span1">1</div> + <div class="span1">1</div> + <div class="span1">1</div> + <div class="span1">1</div> + <div class="span1">1</div> + </div> + <div class="row show-grid"> + <div class="span4">4</div> + <div class="span4">4</div> + <div class="span4">4</div> + </div> + <div class="row show-grid"> + <div class="span4">4</div> + <div class="span8">8</div> + </div> + <div class="row show-grid"> + <div class="span6">6</div> + <div class="span6">6</div> + </div> + <div class="row show-grid"> + <div class="span12">12</div> + </div> + + <div class="row"> + <div class="span4"> + <p>The default grid system provided as part of Bootstrap is a <strong>940px-wide, 12-column grid</strong>.</p> + <p>It also has three responsive variations for various devices and resolutions: phone, tablet, and large widescreen desktops.</p> + </div> + <div class="span4"> +<pre class="prettyprint linenums"> +<div class="row"> + <div class="span4">...</div> + <div class="span8">...</div> +</div> +</pre> + </div> + <div class="span4"> + <p>As shown here, a basic layout can be created with two "columns," each spanning a number of the 12 foundational columns we defined as part of our grid system.</p> + </div> + </div><!-- /row --> + + <h2>Offsetting columns</h2> + <div class="row show-grid"> + <div class="span4">4</div> + <div class="span4 offset4">4 offset 4</div> + </div><!-- /row --> + <div class="row show-grid"> + <div class="span3 offset3">3 offset 3</div> + <div class="span3 offset3">3 offset 3</div> + </div><!-- /row --> + <div class="row show-grid"> + <div class="span8 offset4">8 offset 4</div> + </div><!-- /row --> + + <br> + + <h2>Nesting columns</h2> + <div class="row"> + <div class="span6"> + <p>With the static (non-fluid) grid system in Bootstrap, nesting is easy. To nest your content, just add a new <code>.row</code> and set of <code>.span*</code> columns within an existing <code>.span*</code> column.</p> + <h4>Example</h4> + <div class="row show-grid"> + <div class="span6"> + Level 1 of column + <div class="row show-grid"> + <div class="span3"> + Level 2 + </div> + <div class="span3"> + Level 2 + </div> + </div> + </div> + </div> + </div> + <div class="span6"> +<pre class="prettyprint linenums"> +<div class="row"> + <div class="span12"> + Level 1 of column + <div class="row"> + <div class="span6">Level 2</div> + <div class="span6">Level 2</div> + </div> + </div> +</div> +</pre> + </div> + </div> + + <h2>Grid customization</h2> + <table class="zebra-striped"> + <thead> + <tr> + <th>Variable</th> + <th>Default value</th> + <th>Description</th> + </tr> + </thead> + <tbody> + <tr> + <td><code>@gridColumns</code></td> + <td>16</td> + <td>The number of columns within the grid</td> + </tr> + <tr> + <td><code>@gridColumnWidth</code></td> + <td>40px</td> + <td>The width of each column within the grid</td> + </tr> + <tr> + <td><code>@gridGutterWidth</code></td> + <td>20px</td> + <td>The negative space between each column</td> + </tr> + <tr> + <td><code>@siteWidth</code></td> + <td><em>Computed sum of all columns and gutters</em></td> + <td>We use some basic match to count the number of columns and gutters and set the width of the <code>.fixed-container()</code> mixin.</td> + </tr> + </tbody> + </table> + <div class="row"> + <div class="span4"> + <h3>Variables in LESS</h3> + <p>Built into Bootstrap are a handful of variables for customizing the default 940px grid system, documented above. All variables for the grid are stored in mixins.less.</p> + </div> + <div class="span4"> + <h3>How to customize</h3> + <p>Modifying the grid means changing the three <code>@grid*</code> variables and recompiling Bootstrap. Change the grids in the preboot.less file and use one of the <a href="#compiling">four ways documented to recompile</a>.</p> + </div> + <div class="span4"> + <h3>Staying responsive</h3> + <p>Customization of the grid only works at the default level, the 940px grid. To maintain the responsive aspects of Bootstrap, you'll also have to customize the grids in responsive.less.</p> + </div> + </div><!-- /row --> + +</section> + + + +<!-- Layouts (Default and fluid) +================================================== --> +<section id="layouts"> + <div class="page-header"> + <h1>Layouts <small>Basic templates to create webpages</small></h1> + </div> + + <div class="row"> + <div class="span6"> + <h2>Fixed layout</h2> + <p>The default and simple 940px-wide, centered layout for just about any website or page provided by a single <code><div.container></code>.</p> + <div class="mini-layout"> + <div class="mini-layout-body"></div> + </div> +<pre class="prettyprint linenums"> +<body> + <div class="container"> + ... + </div> +</body> +</pre> + </div><!-- /col --> + <div class="span6"> + <h2>Fluid layout</h2> + <p>An alternative, flexible fluid page structure with min- and max-widths and a left-hand sidebar. Great for apps and docs.</p> + <div class="mini-layout fluid"> + <div class="mini-layout-sidebar"></div> + <div class="mini-layout-body"></div> + </div> +<pre class="prettyprint linenums"> +<body> + <div class="container-fluid"> + <div class="sidebar"> + ... + </div> + <div class="content"> + ... + </div> + </div> +</body> +</pre> + </div><!-- /col --> + </div><!-- /row --> +</section> + + + + +<!-- Responsive design +================================================== --> +<section id="responsive"> + <div class="page-header"> + <h1>Responsive design <small>Media queries for various devices and resolutions</small></h1> + </div> + <!-- Supported devices --> + <div class="row"> + <div class="span4"> + <img src="assets/img/responsive-illustrations.png" alt="Responsive devices"> + </div> + <div class="span8"> + <h2>Supported devices</h2> + <p>Bootstrap supports a handful of media queries to help make your projects more appropriate on different devices and screen resolutions. Here's what's included:</p> + <table class="zebra-striped"> + <thead> + <tr> + <th>Label</th> + <th>Layout width</th> + <th>Column width</th> + <th>Gutter width</th> + </tr> + </thead> + <tbody> + <tr> + <td>Smartphones</td> + <td>480px and below</td> + <td class="muted" colspan="2">Fluid columns, no fixed widths</td> + </tr> + <tr> + <td>Portrait tablets</td> + <td>480px to 768px</td> + <td class="muted" colspan="2">Fluid columns, no fixed widths</td> + </tr> + <tr> + <td>Landscape tablets</td> + <td>768px to 940px</td> + <td>44px</td> + <td>20px</td> + </tr> + <tr> + <td>Default</td> + <td>940px and up</td> + <td>60px</td> + <td>20px</td> + </tr> + <tr> + <td>Large display</td> + <td>1210px and up</td> + <td>70px</td> + <td>30px</td> + </tr> + </tbody> + </table> + + <h3>What they do</h3> + <p>Media queries allow for custom CSS based on a number of conditions—ratios, widths, display type, etc—but usually focuses around <code>min-width</code> and <code>max-width</code>.</p> + <ul> + <li>Modify the width of column in our grid</li> + <li>Stack elements instead of float wherever necessary</li> + <li>Resize headings and text to be more appropriate for devices</li> + </ul> + </div> + </div> + + <br> + + <!-- Media query code --> + <h2>Using the media queries</h2> + <div class="row"> + <div class="span5"> + <p>Bootstrap doesn't automatically include these media queries, but understanding and adding them is very easy and requires minimal setup. You have a few options for including the responsive features of Bootstrap:</p> + <ol> + <li>Use the compiled responsive version, bootstrap.reponsive.css</li> + <li>Add @import "responsive.less" and recompile Bootstrap</li> + <li>Compile responsive.less as a separate file and include that</li> + </ol> + <p><strong>Why not just include it?</strong> Truth be told, not everything needs to be responsive. Instead of encouraging developers to remove this feature, we figure it best to enable it.</p> + </div> + <div class="span7"> +<pre class="prettyprint linenums"> + // Landscape phones and down + @media (max-width: 480px) { ... } + + // Landscape phone to portrait tablet + @media (min-width: 480px) and (max-width: 768px) { ... } + + // Portrait tablet to landscape and desktop + @media (min-width: 768px) and (max-width: 940px) { ... } + + // Large desktop + @media (min-width: 1210px) { .. } +</pre> + </div> + </div> +</section> + + + + <!-- Footer + ================================================== --> + <footer class="footer"> + <p class="pull-right"><a href="#">Back to top</a></p> + <p> + Designed and built with all the love in the world <a href="http://twitter.com/twitter" target="_blank">@twitter</a> by <a href="http://twitter.com/mdo" target="_blank">@mdo</a> and <a href="http://twitter.com/fat" target="_blank">@fat</a>.<br> + Code licensed under the <a href="http://www.apache.org/licenses/LICENSE-2.0" target="_blank">Apache License v2.0</a>. Documentation licensed under <a href="http://creativecommons.org/licenses/by/3.0/">CC BY 3.0</a>. + </p> + </footer> + </div><!-- /container --> + + <!-- Le javascript --> + <!-- Placed at the end of the document so the pages load faster --> + <script src="http://code.jquery.com/jquery-1.5.2.min.js"></script> + <script src="http://autobahn.tablesorter.com/jquery.tablesorter.min.js"></script> + <script src="assets/js/google-code-prettify/prettify.js"></script> + <script>$(function () { prettyPrint() })</script> + <script src="../js/bootstrap-transitions.js"></script> + <script src="../js/bootstrap-dropdown.js"></script> + <script src="../js/bootstrap-twipsy.js"></script> + <script src="../js/bootstrap-scrollspy.js"></script> + <script src="assets/js/application.js"></script> + </body> +</html> diff --git a/lib/mixins.less b/lib/mixins.less index 5b05654d50..6d034cbcc6 100644 --- a/lib/mixins.less +++ b/lib/mixins.less @@ -162,12 +162,19 @@ } // Background clipping +// Heads up: FF 3.6 and under need padding instead of padding-box .background-clip(@clip) { -webkit-background-clip: @clip; -moz-background-clip: @clip; background-clip: @clip; } +// Resize anything +.resizable(@direction: both) { + resize: @direction; // Options: horizontal, vertical, both + overflow: auto; // Safari fix +} + // CSS3 Content Columns .content-columns(@columnCount, @columnGap: 20px) { -webkit-column-count: @columnCount; -- GitLab From b4c894961c0b75361ead496f1686eb3cf41c5c97 Mon Sep 17 00:00:00 2001 From: Mark Otto <mark.otto@twitter.com> Date: Wed, 26 Oct 2011 23:24:22 -0700 Subject: [PATCH 051/318] address issue #414 and fix up a number of docs loose ends --- docs/assets/css/docs.css | 58 +++++++++------------------------------- docs/base-css.html | 14 ++++++---- docs/components.html | 2 +- docs/less.html | 2 +- docs/scaffolding.html | 2 +- 5 files changed, 24 insertions(+), 54 deletions(-) diff --git a/docs/assets/css/docs.css b/docs/assets/css/docs.css index 8ed81e713a..3a4dcff1c3 100644 --- a/docs/assets/css/docs.css +++ b/docs/assets/css/docs.css @@ -15,7 +15,7 @@ body { background-repeat: repeat-x; } -/* Tweak topbar brand link to be super sleek +/* Tweak navbar brand link to be super sleek -------------------------------------------------- */ body > .navbar-fixed .brand { padding-right: 0; @@ -29,6 +29,12 @@ body > .navbar-fixed .brand:hover { text-decoration: none; } +/* Space out sub-sections more +-------------------------------------------------- */ +.page-header { + margin-top: 36px; +} + /* Jumbotrons -------------------------------------------------- */ .jumbotron { @@ -92,12 +98,12 @@ body > .navbar-fixed .brand:hover { color: #999; } - /* Specific jumbotrons ------------------------- */ /* supporting docs pages */ .subhead { padding-bottom: 14px; + margin-bottom: 45px; border-bottom: 3px solid #e5e5e5; } .subhead h1, @@ -224,46 +230,6 @@ body > .navbar-fixed .brand:hover { } -/* Topbar special styles --------------------------------------------------- */ -.topbar-wrapper { - position: relative; - height: 40px; - margin: 5px 0 15px; -} -.topbar-wrapper .topbar { - position: absolute; - margin: 0 -20px; -} -.topbar-wrapper .topbar .topbar-inner { - padding-left: 20px; - padding-right: 20px; - -webkit-border-radius: 4px; - -moz-border-radius: 4px; - border-radius: 4px; -} - -/* Topbar in js docs -------------------------- */ -#bootstrap-js .topbar-wrapper { - z-index: 1; -} -#bootstrap-js .topbar-wrapper .topbar { - position: absolute; - margin: 0 -20px; -} -#bootstrap-js .topbar-wrapper .topbar .topbar-inner { - padding-left: 20px; - padding-right: 20px; - -webkit-border-radius: 4px; - -moz-border-radius: 4px; - border-radius: 4px; -} -#bootstrap-js .topbar-wrapper .container { - width: auto; -} - - /* Popover docs -------------------------------------------------- */ .popover-well { @@ -288,15 +254,13 @@ img.large-bird { } -/* Pretty Print +/* Misc -------------------------------------------------- */ + pre.prettyprint { overflow: hidden; } - -/* Wells --------------------------------------------------- */ .well form { margin-bottom: 0; } @@ -311,6 +275,7 @@ h2 + table { margin-top: 5px; } + /* Responsive Docs -------------------------------------------------- */ @media (max-width: 480px) { @@ -385,6 +350,7 @@ h2 + table { } + @media (min-width: 768px) and (max-width: 940px) { /* Scale down the jumbotron content */ diff --git a/docs/base-css.html b/docs/base-css.html index e3b3782c0a..47dff40e72 100644 --- a/docs/base-css.html +++ b/docs/base-css.html @@ -197,7 +197,8 @@ <h2>Lists</h2> <div class="row"> <div class="span3"> - <h4>Unordered <code><ul></code></h4> + <h4>Unordered</h4> + <p><code><ul></code></p> <ul> <li>Lorem ipsum dolor sit amet</li> <li>Consectetur adipiscing elit</li> @@ -217,7 +218,8 @@ </ul> </div> <div class="span3"> - <h4>Unstyled <code><ul.unstyled></code></h4> + <h4>Unstyled</h4> + <p><code><ul class="unstyled"></code></p> <ul class="unstyled"> <li>Lorem ipsum dolor sit amet</li> <li>Consectetur adipiscing elit</li> @@ -237,7 +239,8 @@ </ul> </div> <div class="span3"> - <h4>Ordered <code><ol></code></h4> + <h4>Ordered</h4> + <p><code><ol></code></p> <ol> <li>Lorem ipsum dolor sit amet</li> <li>Consectetur adipiscing elit</li> @@ -250,7 +253,8 @@ </ol> </div> <div class="span3"> - <h4>Description <code><dl></code></h4> + <h4>Description</h4> + <p><code><dl></code></p> <dl> <dt>Description lists</dt> <dd>A description list is perfect for defining terms.</dd> @@ -286,7 +290,7 @@ <h1>Heading</h1> <p>Something right here...</p> </div></pre> - <p><strong>Note:</strong> Be sure to keep code within <code>pre</code> tags as close to the left as possible; it will render all tabs.</p> + <p><strong>Note:</strong> Be sure to keep code within <code><pre></code> tags as close to the left as possible; it will render all tabs.</p> </td> </tr> <tr> diff --git a/docs/components.html b/docs/components.html index 0e3f0a223f..59273ac195 100644 --- a/docs/components.html +++ b/docs/components.html @@ -548,7 +548,7 @@ <div class="row"> <div class="span3"> <h2>Block messages</h2> - <p><code>.alert-message.block-message</code></p> + <p><code><div class="alert-message block-message"></code></p> <p>For messages that require a bit of explanation, we have paragraph style alerts. These are perfect for bubbling up longer error messages, warning a user of a pending action, or just presenting information for more emphasis on the page.</p> <p><a class="btn js-btn" href="./javascript.html#alerts">Get the javascript »</a></p> </div> diff --git a/docs/less.html b/docs/less.html index 806c2eedec..d5a467bfa2 100644 --- a/docs/less.html +++ b/docs/less.html @@ -185,7 +185,7 @@ </tr> <td>Javascript</td> <td> - <p><a href="http://lesscss.org/">Download the latest Less.js</a> and include the path to it (and Bootstrap) in the <code>head</code>.</p> + <p><a href="http://lesscss.org/">Download the latest Less.js</a> and include the path to it (and Bootstrap) in the <code><head></code>.</p> <pre class="prettyprint"> <link rel="stylesheet/less" href="/path/to/bootstrap.less"> <script src="/path/to/less.js"></script> diff --git a/docs/scaffolding.html b/docs/scaffolding.html index 9334e830c1..2a5ae8bc63 100644 --- a/docs/scaffolding.html +++ b/docs/scaffolding.html @@ -234,7 +234,7 @@ </div><!-- /col --> <div class="span6"> <h2>Fluid layout</h2> - <p>An alternative, flexible fluid page structure with min- and max-widths and a left-hand sidebar. Great for apps and docs.</p> + <p><code><div class="fluid-container"></code> gives flexible page structure, min- and max-widths, and a left-hand sidebar. It's great for apps and docs.</p> <div class="mini-layout fluid"> <div class="mini-layout-sidebar"></div> <div class="mini-layout-body"></div> -- GitLab From 19feb1b1ff56db21bc36106e3b57943ca490a912 Mon Sep 17 00:00:00 2001 From: Mark Otto <mark.otto@twitter.com> Date: Wed, 26 Oct 2011 23:25:57 -0700 Subject: [PATCH 052/318] fix new navbar in components --- docs/components.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/components.html b/docs/components.html index 59273ac195..c18d8c113e 100644 --- a/docs/components.html +++ b/docs/components.html @@ -158,7 +158,7 @@ <h2>Fixed navbar</h2> <div class="navbar navbar-static" data-dropdown="dropdown"> <div class="navbar-inner"> - <div class="container"> + <div class="container" style="width: auto;"> <a class="brand" href="#">Project Name</a> <ul class="nav"> <li class="active"><a href="#">Home</a></li> -- GitLab From 20b9390a9e3a94dae86af388821aa8f458ba057f Mon Sep 17 00:00:00 2001 From: Mark Otto <mark.otto@twitter.com> Date: Thu, 27 Oct 2011 09:35:58 -0700 Subject: [PATCH 053/318] update docs for responsive --- docs/assets/css/docs.css | 15 +++++++++++++++ 1 file changed, 15 insertions(+) diff --git a/docs/assets/css/docs.css b/docs/assets/css/docs.css index 3a4dcff1c3..7238badb35 100644 --- a/docs/assets/css/docs.css +++ b/docs/assets/css/docs.css @@ -351,6 +351,21 @@ h2 + table { } +@media (min-width: 480px) and (max-width: 768px) { + + /* Scale down the jumbotron content */ + .jumbotron h1 { + font-size: 54px; + } + + .jumbotron h1, + .jumbotron p { + margin-right: 40%; + } + +} + + @media (min-width: 768px) and (max-width: 940px) { /* Scale down the jumbotron content */ -- GitLab From cb13f010e2dd1eb8f37048b5664ff455b60eba05 Mon Sep 17 00:00:00 2001 From: Bulat Shakirzyanov <mallluhuct@gmail.com> Date: Thu, 27 Oct 2011 18:51:49 -0700 Subject: [PATCH 054/318] implement left and right tabs styles --- lib/patterns.less | 72 ++++++++++++++++++++++++++++++++++++++++------- 1 file changed, 62 insertions(+), 10 deletions(-) diff --git a/lib/patterns.less b/lib/patterns.less index f1badc46d4..1db3158313 100644 --- a/lib/patterns.less +++ b/lib/patterns.less @@ -379,19 +379,71 @@ } // Tabs on left - &.tabs-left .tabs { - float: left; - } - &.tabs-left .tabs > li { - float: none; + &.tabs-left { + .clearfix(); + + .tab-content { + float: left; + } + .tabs { + float: left; + + > li { + float: none; + margin-bottom: -1px; + margin-right: -1px; + > a { + margin-right: 0; + margin-bottom: 2px; + .border-radius(4px 0 0 4px); + + &:hover { + border-color: transparent; + border-right-color: #ddd; + } + } + } + + > .active > a, + > .active > a:hover { + border-color: #ddd; + border-right-color: transparent; + } + } } // Tabs on right - &.tabs-right .tabs { - float: right; - } - &.tabs-right .tabs > li { - float: none; + &.tabs-right { + .clearfix(); + + .tab-content { + float: right; + } + .tabs { + float: right; + + > li { + float: none; + margin-bottom: -1px; + margin-left: -1px; + > a { + margin-left: 0; + margin-bottom: 2px; + .border-radius(4px 0 0 4px); + + &:hover { + border-color: transparent; + border-left-color: #ddd; + } + } + } + + > .active > a, + > .active > a:hover { + border-color: #ddd; + border-left-color: transparent; + } + } } } -- GitLab From f3128d0fa1f1f14104b7c4ffab54f083b99a108e Mon Sep 17 00:00:00 2001 From: Mark Otto <mark.otto@twitter.com> Date: Thu, 27 Oct 2011 23:00:09 -0700 Subject: [PATCH 055/318] overhauled the front page to feel a bit more marketing-like, added the awesome glyphicons to bring some life to the docs --- bootstrap.css | 2 +- docs/assets/css/docs.css | 35 +++++++- .../img/glyphicons/glyphicons_009_magic.png | Bin 0 -> 1426 bytes .../img/glyphicons/glyphicons_042_group.png | Bin 0 -> 1386 bytes .../img/glyphicons/glyphicons_079_podium.png | Bin 0 -> 1328 bytes .../glyphicons/glyphicons_082_roundabout.png | Bin 0 -> 1516 bytes .../glyphicons_155_show_thumbnails.png | Bin 0 -> 1179 bytes .../img/glyphicons/glyphicons_163_iphone.png | Bin 0 -> 1235 bytes .../glyphicons_214_resize_small.png | Bin 0 -> 1406 bytes .../glyphicons/glyphicons_266_book_open.png | Bin 0 -> 1405 bytes docs/index.html | 85 ++++++++++++++++-- 11 files changed, 112 insertions(+), 10 deletions(-) create mode 100644 docs/assets/img/glyphicons/glyphicons_009_magic.png create mode 100644 docs/assets/img/glyphicons/glyphicons_042_group.png create mode 100644 docs/assets/img/glyphicons/glyphicons_079_podium.png create mode 100644 docs/assets/img/glyphicons/glyphicons_082_roundabout.png create mode 100644 docs/assets/img/glyphicons/glyphicons_155_show_thumbnails.png create mode 100644 docs/assets/img/glyphicons/glyphicons_163_iphone.png create mode 100644 docs/assets/img/glyphicons/glyphicons_214_resize_small.png create mode 100644 docs/assets/img/glyphicons/glyphicons_266_book_open.png diff --git a/bootstrap.css b/bootstrap.css index 0baa88d110..ed0556b3d8 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: Wed Oct 26 21:03:54 PDT 2011 + * Date: Thu Oct 27 12:48:41 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). diff --git a/docs/assets/css/docs.css b/docs/assets/css/docs.css index 7238badb35..66e87fdf9e 100644 --- a/docs/assets/css/docs.css +++ b/docs/assets/css/docs.css @@ -5,6 +5,7 @@ Special styles for presenting Bootstrap's documentation and examples */ + /* Body and structure -------------------------------------------------- */ body { @@ -15,6 +16,7 @@ body { background-repeat: repeat-x; } + /* Tweak navbar brand link to be super sleek -------------------------------------------------- */ body > .navbar-fixed .brand { @@ -29,12 +31,14 @@ body > .navbar-fixed .brand:hover { text-decoration: none; } + /* Space out sub-sections more -------------------------------------------------- */ .page-header { margin-top: 36px; } + /* Jumbotrons -------------------------------------------------- */ .jumbotron { @@ -119,7 +123,7 @@ body > .navbar-fixed .brand:hover { -------------------------------------------------- */ .quick-links { padding: 5px 20px; - margin: 60px 0; + margin: 45px 0; list-style: none; text-align: center; background-color: #eee; @@ -149,13 +153,40 @@ body > .navbar-fixed .brand:hover { } +/* Marketing section of Overview +-------------------------------------------------- */ +.marketing .row { + margin-bottom: 18px; +} +.marketing h1 { + margin-bottom: 18px; +} +.marketing h2, +.marketing h3 { + font-weight: 300; + color: #000; +} +.marketing h2 { + margin-bottom: 9px; +} +.marketing p { + margin-right: 10px; +} +.marketing img { + float: left; + margin: 7px 10px 0 0; +} + + /* Footer -------------------------------------------------- */ .footer { - padding: 30px 0; + margin-top: 45px; + padding: 35px 0 36px; border-top: 1px solid #e5e5e5; } .footer p { + margin-bottom: 0; color: #555; } diff --git a/docs/assets/img/glyphicons/glyphicons_009_magic.png b/docs/assets/img/glyphicons/glyphicons_009_magic.png new file mode 100644 index 0000000000000000000000000000000000000000..ef048aaaae38a1a4758df72aaaf87f33d13e2be5 GIT binary patch literal 1426 zcmaJ>ZEVzJ9Pbzz8;nI3h|HZy?IggmyFTsh+Ph{4-g<ZLCO7Bp(94iO*FJYw)@y6q z<L(xnyeNtAL6(5QNCGjyhb;`1AdZ>Mmqb9~%OFugd|77H4`>#3iPI0pr?<PY4}>Od zpXcfC_xr#1weGGbSFe0zC5B<EBOSpQdat+d>MHb{&iUujtHBB-tR5|C<pcv_0ZHqF zcqAjFU<?XU;f3q44Z|w`mg5O45#7d#TE->V7*{@{BQ}P$ZO!X~*bgnd52j?*Pt1-_ z61Xh+iRU~~5Y>5@mOBOv*fY=-7YF)9pG0ikg16;4B#?oYfaf!cYI1o$QPkzo+CC-; zya=)S{ltP(iD);@YX-zUF5naa18|0NQSMfjWm|9>P=Ew9NzqP<<=iv}0A9KXWX+J0 zTr3za*+M%%k+v+IBgtGY=gPTVnvo(YpU-D&(6kdFoMu6_guGKVo5~77Xo`lcTe7C& zwxZCdWi3B}JY5JOqer8Q!m3$H6iOMH7j%+x0Wy=Z<0_&}D+cemabL6<FX)hrK~u{b zBC1ESsZ2(>d$6H0P!bn$de%^iaY`Zy6_|mlWg@4jqDRPc?rB3t1r(H^CT8ugk)WT* zW@U+EJR!#I1B{p9!xR;44=^D*==HLED8RS30@gNW3oIp~6PJXzfMt0P@VMK(Zib>l zz#E{$K?;Q23;;}k36!}J)wBdvgtk$eE8pYN59D&Z0R>Al;+m$ETcta#S(=&Fbe!+; z;88)8ReNvOvE(T<<h@V|8(Ic07J`%SXP@!{iegcOGzy-gykUk82RuFx<8B3Xm?lbG zX-UG$aff*p<!T8Rc->)&_3^05*bs0NByvU)IZL(_SnAM#VwF~kY<CH#2x<zY!zsa} zkX0;VOG+u|X<5`%bC;PB6lIqr82xRe-HeKixW(0i47o(Sc)X;0%Sbd5_HuC+(PnX) zp^8S>K(oqR`J)rVDyT>>5YOK^vwhW?PeASWpt~lttX>C>+7-w5y%Jep*IePKtvS7q z4@5pVcDM7^xedA5_lM>-v`&8M`}QnGn^zo9to^8dZR$+L{M(J!9_EfDn4P_KQx`YA z^kdUM>)zS1`9w!cXm?{%ZtlGIr?0zf9JQPOeBFgVdhnW<xH%F8hkv+w;^g3L^3btQ z9XoH-dm9E1R1bev{onpyhF=~3ysvIgeY0_Ngs3Teclu=IDbN!covB)veebB_t8Ehx zO{AW>*wHaK(>yxHH|*e<Tf<Ym*D2%NvLn89XZogm_tNseu1XiiDC6<T<^R5WJN@#r zH}-U$O+FL7G(Yz9@2BR@zxm=fU%c`BWwTCk7Df;EO?OSKXq>CMeQ;*`osT8+(63G7 pBU7tdl;1vdPH%eb!q8=`65AMit9Sq2p}75*jD)&^qwTv7{10K9<ZA!` literal 0 HcmV?d00001 diff --git a/docs/assets/img/glyphicons/glyphicons_042_group.png b/docs/assets/img/glyphicons/glyphicons_042_group.png new file mode 100644 index 0000000000000000000000000000000000000000..29393dda1da3e71e88b4b44f2acc77a634076590 GIT binary patch literal 1386 zcmaJ>eQ4Zd7|&LxUAu~tQoDgJq&S%FE^m@vau<7@_m%dhsr7nb9UU`G-n+}1FO&Cr zABwo@lwlR845cWd7R3*SIGAXs(=x@*4fltjj{3)NL(w|t7aK#IZ?1P;{}>A-dEO__ z@ArIX&)`5`Tg&<uf*{(`{mBe|cj3FE`C9zkYTeq0U+Yk67!BDuR8m|>#58*pl4(=P z!wgik%7b&Thaj5H>)By6EZ;4vwi#4>n_$^=Fq$BGwv-)39fOD*g?ZhIQoqj}rbu0j zQul>qAUg?I(EF<{9I6gv)#{iU(WouGWKUVd1SUiZSvC#J6U$Mm#w%jkSJM<(GeKif zYB8u`d5}!lE+j)i5KsXRNS+BYT(=+yn@JWhfCenhumMI8IaUOKtX~xN=4v@Hla%Vd z@F_|a5OPGCE|p5b5*M`HJk3NR5ubx)1K1+qRV<{G1D4m-U`Rqwb#({nwnh4k%BWpL zQ3^-8n1boZ@)EJ-)eD77Mwb<bW`ck=O+T-iwTCkBau`>%_OcZR(i!O4MOVfB$aOWq zxOP`})G*Z4B|E3+8nrw%m4*g1p@lpg6jO@`M=svu>bQZ5k+jvK|23VAQpKXKiF_!< za}mIY`GmwU$#{%UvB_{)NTgzkcsCGyXFkDlAl3vmj15bm8vtI4hq(m9q(C^vN=XK! zI38<be5`>@TOLv@75YwntbQ4rx++#oxKKg1o3(ADF)D)v8`)mLcF4p~h?EsoxBRo; z$9kmD)yJVGxwc8x8X@Xe@DG?UU>E^s$l~M~CM@x+6bnT{Jl73aiKXgTZCSw@c}oca z*J>FSggJ>3A_+WXLJDvcjf2rt5$VW)^$Cp`s4f}0KP94}Sb1EIfCh6)(Lhvh-l#YQ zU9~N5hi58=u|rebu^!qVMnlKgnzTqmFC(w1mrZZO60d|WF6|;dENwHi@Cv(lSK-T_ zy-N@)R;QD(Z29EEzNgksfHhCN)e0uMK)i2P8)}l2_P(E+*X>%n^X=cZKRz|RDtd@3 zUAp;T<>A#M#-a1_(<e3`eYNM_3+6kXMf@?jASf>pKaM{Z`*rZn=brrOnfZs(Cr8$I ze%b!$)=vJWeS22Wxyk!C^xoci_LC#R4?}l^u6uv9bK&oQH@)~uS^oCe_vHKw7q0(h z?zFgVd{*xJ^SFHGyA5Fc#A{N!wsF;|{pZxYx4Zh)-Z##)w;Vr4&3t}on!o7YWluiB zfAR5Ot^Y`~=bDL)M8^#Wa!qf>uQ|GD=X-M(`{!Ffz44pfr%z4I-7+x!`nG0k_W6!n u$I64Zg+7{kw)*vge)xm@f8fa3m1~FtliO!FIP#(Y_e-Y+lKbNiO#Bax<<`vr literal 0 HcmV?d00001 diff --git a/docs/assets/img/glyphicons/glyphicons_079_podium.png b/docs/assets/img/glyphicons/glyphicons_079_podium.png new file mode 100644 index 0000000000000000000000000000000000000000..f5544545182313acaad4c785762642963b357ac8 GIT binary patch literal 1328 zcmaJ>Ux?du9FNy=%wro98SLc1m=mY4Hoqio(uV8RG=Hvz>+S4ScAMgwCckTQ%|DZ0 zZSQd6rUQ%OtWUnl3c?{G^KIZj1%245=N?3554r~t-^N66h%kTYwYNTu1(N)JzkEKQ z@Beg{mlh6AJvK!U#KB@gDdYDHzK`sm#Lwp^-hC0jrjfdeR=hRT)&odLrdNYx(b4O$ z40Utk<!f+`AY%Vml~uG_S`-b>N$3$K(Q$mtCWyIQ$JdP}L}U%tEjLTu`uq!uw9G7Z zGF1X4Uxp2<uo=LW&83R5*)%dHm76E$IwBTuAkxW>W4oc)$x;Jd5wD|Tnj!}f)XY-5 zPOX-fN!be^nM#1T0eC?2OoHK(f*>3xS-=1qur$NQ8A0S&5dd;{QP^5wu8Czu8`{FV zEY(2B7iqfPZYSDY!VBs&lgVTv4VH~#L_FMZk=}{B;p|93fuRvtKC(QQj1={n*Fsqe zd%7Ef<CjW%!frTB6iyl4(S4dp0NQb)xCZDDmEk=%?u!m98$P7VF!Wl1f$On0J0j!U zJ=o9)Xc~JszZKYnI8B3wHguqiLhKYX@CbV@o(L>lK;2e6qZNHEDp{)4vP_XrsXUhf ze43XvhEehoud+%yEy$`Q=aWE)j70+DM0}DkF_+B<a!Sf``E)YLFe*q(tfnwP<#+&i ziI+y)q8lRJHDF{k;#&8(>;t)?96%j;LB;dzQL8LBJmiH9&nM-T6j{;@%Z>I?9fzL6 zz<LFmTHrb4pb(;UANznw1BMZBge(r8VbU7UYEmkb;<+SXHI^E3&9Q`y;?`sV=W2`# z(wxQ!85uX3paPDfu`{M2A`97Y*rAe*hAZ2Ox<s^fw~o^hH{qJzvJo|3w>SKTWq59Q zCUkV$K4a=ZbB>Oh(Y7#mu-cWO$HWK6W8FJK;*p4!d$Wi)d(#YEJi-B<)$XaM96aYg z6cwq`xl#M??%iDMv)6k)hA2$meD1GD8ZYJMxevCi>BGN0VIF!k8=u|Iub-ZrIIe7+ zI`QnU7tihcGT--}o?LwL^dAc!U%dS9d;30gsOqJu>z_=%di#6jn`-5u+H3jl+ZWza zq|~>C?K?kSe&-ik+W&X&edp-8JGn#GN|o)0J8|XYmG0sjLT~-j;}_<YpKdK|HD-Ti z`~BDpGj6|pwfDQcer)Dw=ezSC{n^*nzh2uhs?D1dv1GyOo|V*NThGLrJJ)aIuR!v^ a;VN<V&0y!N1M2PQA68VCluz^3^Zx^<@v~_F literal 0 HcmV?d00001 diff --git a/docs/assets/img/glyphicons/glyphicons_082_roundabout.png b/docs/assets/img/glyphicons/glyphicons_082_roundabout.png new file mode 100644 index 0000000000000000000000000000000000000000..bbda0935c54e2601092be9ad2619ecb658b8dcef GIT binary patch literal 1516 zcmaJ>TWr%-7<OnWgS8rn4RO&X<BGuwiI1JcNlXGbHyR+NN<vpvNZ{HhiC4!qwnLLj zn<%hN3@Y&gOh^pSn9wGHs%_8-Cg^}saT%i9G#G=83f>qnE`p6+*l|co9}t#opL6_u z-+%Xp=B9;p<ED<oFsv@t7*3$~H0yq$20eRzyuS>+rkIgdGpVM{PF{x?C#vlbkLCCb zOh8^Nt~v$%7*_RAO0}A;@g=OF<{Z3*aTIbIVq=(penI1f4rt=-Fe51e;`ZUA1TKjI z;!SrP#I+F2N{wAQOm;P;gsu+3Cld4L;r;@P1ai>i@j^~k47Ly;O1dmsTgN1Ummp?G zfOz6mYrGi`sXD~n4qz7m18|0NP)?V}<C%lgfC40-Ns6{p9@a^-0N~||K-P3I%_hRp zvMsa=5LwgISd#4Q>~wTG9jcxoDWA`0Y0$JCA?!v`G5LaBG3qM{VQ2`tq?wYc;Fcoa zuI9}EfjoT@LQadvhlLfRoG6qsvcPL3<p5+ZXT?=Q8)gDNb>o?6BURKOnSh3x*9BCM zbbW=4a`${g6`&{#<Fvdkm*Nx!63Q?K71KaYQ6-O%=j>8lLIvdIuqx!Oud#4|$mb=I zW!w?Q=>v?H2}LO?9ORe?9rk)Xp$HcWx`4+rW(kZWq7#RRxFHwE(ZNV4=yka$DgwM5 z9Su_;;$#3|IEJfmV~Sz&iU2L67FT-84L+C4hIGiAs-99+xzZ}lS=CgHtg7Lmq#KX( zf}~h`tBz$)p)Re4VpLaic&QMq^bGre@&bzTpa^LcJVkk<3?1d%J~!iZ0Xj+(Wv)0P zVU@U}ArH#c2rlqCqm;)NLQUq004G5rXGDQDB~ymw4&`LCypkoWOIVp#GAJE(5vKXP zY!dS_a#71lf~puRj2th^D@0!J@RL?E$`az1R!?Ne5#pue5#3usqLHwc!?TDs!_y2E zG{QQX)$|SgIEL9a#==~xaOumfgR9no+V|?VJrviORflZ#AJ(y>uI#G6PIoWN&b7%4 z=Gtyn@0sYmyW{H1(}k-2xBpvTeP-v3Gh4SDXz_8g2Qqhe)=X)B>GLIlBR^a|H<Q(_ zZCcnn=4z6RGu2<rp1yqBjEmfNzfAo5->OFo23vM#A77Yrrfu?{$yiU}_2T{4YI_py zESBHhoTy)s{gqgg`Ny$*7B{dD^lgo#4t{gu{K;b5K>t)%gOF@%q_=;v{p+2<-Y(6? z%n9#3JM{6pwQqqNjA!!keHTvMyVUdcwT@-K|MA&_f_ui|b7}3;&}HYHwaUJucmCS- z{Q<K2(Ad7j`~FwP`oCIxWZR?bXKyyx`r0?#!8#sKU|!st{y91GY-3<9cX7J^ynW5y zQ`D$bZ~V%}fh||BRG-*jE?!_0zdgOQb`!RTpU}PMMD@m59#{7wzin{Zr#0JG2I~74 z*N(sa#vndnQgMi?J$UQbweHo&*dv>Pa`^P<4~E7c9{r&I<mMd@C$;>x?AB1*m>usV eU;U}mR)c-CsNvrFp5-^J|8FeP6y6_Px%PkgwiJ*6 literal 0 HcmV?d00001 diff --git a/docs/assets/img/glyphicons/glyphicons_155_show_thumbnails.png b/docs/assets/img/glyphicons/glyphicons_155_show_thumbnails.png new file mode 100644 index 0000000000000000000000000000000000000000..1062f4844e326ad2ebe81ee5eb0edab6d99d6c3e GIT binary patch literal 1179 zcmaJ>J#5oJ7&YQYs8S_ZkU#>AD>f3}*@>N)rmbtoG!iLQ8i{W0)xIQ0ZJ)6(#O+j7 zVqijIVnAYJgoTZPr9xt%J1a9F7GOXscWF{GpjxthcYg1E|9-Nvd}n&<%9JEY(~Tv! z#ow32ef}JO?!OIh^VeloUt_DZ!v-kDk{!@ZEH@(5#Vw42?S~)ntR$WOMcQj@t$Ek- zX;ef4Q_Q1;vn6SEK2MOpg_*pGyCkkD-`~AgWD?Yr`{gERCJyeArJWS7?ku<coh`o_ zDD!jjY;JLZ2s0$-Q5a`dUQ>p;7GH~FRgs4fwpCM(oLXzH$PP`hTrPrw4-6n1un6^% zX_~iW4M3m*O@&$knwG9v0LY_D;nvciW3^mwWQ*@=N{_L`Qq{p=P#ow*ns!xKtyYDG zrWH7%kZs2d<%Kw#87sIr^HY*ALStDdqD|UoHHCY66hf3Vo5#X&HcAvvnVO?Sg+-u7 zk%()E&R7fobK}40ti7FJwS_a<PkmmG&diw1b9b_#F);9taY;W7hj9kJibEXXm}T54 zIP{2nZrw`>FCYqC>i5OhhFeqmeG*tkxo+rHU{nmpgV0^Hjk@MmDyCDnoy8I`g)t#8 zN#rNRfOAX0HVkN&7As{P!aAtfn&(1L*9`y++px#nMw~Ge`&bwiT=I{rpUAbG6eC8{ zHl^XXRaSbG(X2-k*;y^iP2`hU>_r_%p5l}|!hx64NFEl#BLA@uU<E*E@(48^JcJd` z&^)_bEgO0XXr88wxWPoi#&LU&$#XTq1r^<cX4T<MX4ZkOsN9*rw-{j|9(AZ4ve7Ce zqD!n0#a*6`LV!D{A2MaG8*V2(;?p==&mt6t>j6r)W>wLQA>rKN>PSYN5FZ{-bnh6+ zM?x%*XOVA?ry0k5gi}7N&p$o>$>-c^xOO}Lycuk4{65${`{(fR<waN5v}ZRD_7`Tr x1MqdabLPXh3)zpJb*-G2u0DPB1re~YdrErq;>PvHUdb1~i$;CfeZ9D`_ZP-jb4&mL literal 0 HcmV?d00001 diff --git a/docs/assets/img/glyphicons/glyphicons_163_iphone.png b/docs/assets/img/glyphicons/glyphicons_163_iphone.png new file mode 100644 index 0000000000000000000000000000000000000000..bbb71dceb17f06c6de5a51ae65d0f8dd3af28174 GIT binary patch literal 1235 zcmaJ>&u`OK9QOdhR1GwQR0@ag$xIv=iQjW-JF${d$Bt<vQo1w}y|pj)Yhr5qdG^ba z_Amj{#5Re)VTXysI3TzoF$9N-pW9*A?XYUwangh|!~vx8oF;7!sFrNM_x$;MzQ6t5 z{M`A&V<*Q1K{#BUwd(wRgx?b%9^}vGPky<?Unf{)kuA^_*2OUq43{<us0O%2>IA!M zUpym4LD>J=Yb>(G+6CRAK^CW&Y%hp7TM&xpdJ%S32?I^i^1_n%-~ERo@Z6GkNvXkF zWRkWwyB?E;^|^+#zUmZQ@!T{h_H-@~5Qaf7@WVv!mBhZT&e!R&B!WJKt(L@Xrxt7T zz@#w&N)~1us6wEkEXqx3nsye*5J3sb5|T4W({r*8AsAdDw-&oAdfl=Iw)n0jwi%0b zN$PgH*={aN<CcU9g+i(!%NdTyBx@nVy-b*#8Y);MabhoG9t}aNh?}&-N+S1kJA@#r z)pmr#WRNJHGO33n31y)a1ZiA-bi(Rn*Nyk0lg3&^q&i7xCw6!}R!$AcJa>B=8UkHs z2N!i>zaOXTNW>=r30cCOLVb_8=laFi;|0XNMV(IiwQ7~bPRDa~RjH`C0#x&=X(MEn z4YeX$`MhRU46{51wbWQDFiPYnS(kHV%}^CvM&-PsAXI^QL$)mhD>)TH)liKgw;Co4 zhYm@Nrd)5A3-{#eW=t@naf4ES*edgF%4pK25il1NP{WQFru(#x15ZipeMww9rUB>| zLigTdAEG=&NaGR8Ja~liwkq3(Qc%>~6qIdQ9B|!{gbm}iO^xSjgbVXI8)*fTH<?y} zIZ@)yxQ@;|=958(8a^AWd@t=1-N#{zrz7K%72NTeINkEsqPFMIFj-0h?E6bDj#rCP z+Kj%(x&76)j5H$NKOX7cA(D?oy4;yXzS)^(67ms_`K*3(x%xey^SEjmjo$Cg=JN8L zLw~)VdHcic+sRwkKdnW-UYIFgxyrz!jhWNSM)S?lpIXPh1%EvL{Kk(buRpNI|Nr;e zf$7Z`|J?I`7B<G_ZycZf?cV0r*48J+#Kz;BFZYkXJYd`QS05j|d-v(ruQorM{PXWK clOOE+NTA2H6GxsFAEv*VYGuy4U0%NS4g%4SdjJ3c literal 0 HcmV?d00001 diff --git a/docs/assets/img/glyphicons/glyphicons_214_resize_small.png b/docs/assets/img/glyphicons/glyphicons_214_resize_small.png new file mode 100644 index 0000000000000000000000000000000000000000..5ecaa72b2f363bd51d4f83670acce3fd30aed692 GIT binary patch literal 1406 zcmaJ>duZHr98bGzk(PC<o33*kgcKZO-sN$<<SzEs<??7xceT5gTIXX;lV7i~c`f<f z?ykaChhq<>J4FO>!X^$xbU2h@eJcoVqJxRxYMC2!D8gQ#Or$=3x!!gCV=R#5_xt7h z`Fua$R}S>`b}wzZuL;AjrRg3ii{5R)eODuTUMwX4La)_O9)kVOC@iQRzy#eH0eIR{ zb07;;y|m*r=)|xkH;sWIIF#AKYmOCB1Di<EauFKCI=hOls*MAPkAR$ECy8qxe@@_r zo+KWPWvGlRf-$3K!UO#iy#w0BxR%g~u1$Dnkw*j;fGS?JOxx#+Nut8bqjhjh5_rV~ zjwgwEQA3$NTy#8u$0Af%qgV=O=?ER|;5hC9oS|rnq!^NB!ZgQ68J?o>>O~-Lo<7QF zC8g>M?UKY8gf35#g+d`xh(;VQN79KzBH&<{FtP~yB^#>6u<f_k7$o3pp5a2nvGIUW z9dYt7Ng$>3Ay{rEvp{V7)kL9`kww)d=?FzyRuEUk+J{+iOU7-j{ehAT$Sm-kyr-dh zjJDUnD0g>uR5R4I1v@wInUy$ojRYpJfDL^limoU^%K1k;0~Js;B}dB#U(-^O$mb26 zXJaxOO;Bu{6&0G6QUWV8QasLyvLL29C@ydo5G)3wlZcM6ObWs1sE~@Y6iv%iTwoN5 zrsOC~QLMlUHEi1Up=xU&a2jBZTiC=MvApO36*}I4<CwKp=^JyP<BvHmF80UpjH(%S zun+23RSG;~C(sqovG7VEc;hzyDLRfcb0|Uv1y9p)g=G{WmWZ*@4vJA2qKefQC9D>= zB628Ki?CEYs?c0QL`}xYRFoi*7+vF`0ZmZtP{D-Nm1zWB!kem{L+J?XU{uYUkl2(n zOYWGVIkvyuw^Y;IuB+a7CmA%OX&`K6HBUn>BCi}T>fV|q8i`=JFpFrjFwMY5BkZAB zUAqs@VOZU|v?L4^r#~3H)Vc>>*?9K9Q_tF)*Zg$<`No*g-jTAinc+3RHBN{AxOlX@ zqP%Ly&2<N_eYUK4c-e+ukGyHVe6AVZbF}X2s@D3GlY`iqy*D;aZiGzBhQ1{V=9hQN z<@#r2TwXi-#0%{W-?x0VdTRf7<*9e-e|a45`eyxXlYQ*f-6Jp7f7(5HeEIb&|9tY% z^4ZG=Lx=x9GJD|exzLv8<gt^3b%S{CjouaM2d{s<FSPQ~z3<h{h|lf(_T9$};(hM5 z{Us@UzGvn`q6Fa9wjaMt5pTV8>Y;KeG;wJ1irjtHZfX1B%%P`SU-@}X9&SiH^@Vuh zZRYh|t@!U(;kFZ7pNySryWDVLYHlXJzCqc%Z7+X%<l)9**YUaMOU)D(*QVe2cUS1o P;E$M=d!-Yp;XVHY3r^Ts literal 0 HcmV?d00001 diff --git a/docs/assets/img/glyphicons/glyphicons_266_book_open.png b/docs/assets/img/glyphicons/glyphicons_266_book_open.png new file mode 100644 index 0000000000000000000000000000000000000000..de084d47227396df76e176a105008f69a94bdb78 GIT binary patch literal 1405 zcmaJ>TWs4@7<N0_P2DQC3A92-<+|);CGj~<V<%qHk;E~}w6vuSZ3<|eYo8`oe8YA~ zT8ikphiOpS4Iw~W_A*Tx9h>?Fh)G+;E+AEc7o=$#5`zbXrm6^#CIJ;3r%Bg`X_joC zbNqeZfA@*Lp68mIo@^orqB(Uy=*RCCeDB)Qh@U&!=Y06}gqzH|1Ll}pl59l86mt}j zDP78;ek3X5uY8Ll1hMI!n#sD^^dVk0b-(0c{AJz3Y=VgFFI$paKrT6oa;g!fR=&DS zk*X4<hJtC3wh}0>9+<Gvz(h|*o+!v+h1%auM#?-E(2*;VWnD8Iz8s}0x;$Qc$23J& zAZ{T_tvQuV_mK(HMr6<rd@^7G$wEI2ba5Q_49NfpXu!~r@j;FcFgyTc^`fvfTN&f~ z1+i)i@1j)RbuFHzOQn*(6!4pNj)viI*wbJbA4d3`al@6$KEvs#DG11sZPjvB(;z)X zY1AybQ3`vy7J_c2)9b>9Q%w|38C{kv8u|gP>t0+HwBz=p`))iC?PSI+ME4`dEZQ=z z$5=;=jC1#JLp7ixuj8zutySVwWEyEmM~3TQr(ne+>^a|StGIxYCYW;3`<fD>RI#Wk zJR3~1fiPf0Y(j)kh{xC@BZNX+A{k4>y8!1I^8_{$@rhr-++>i2@va0H53z9wlOPmh zL;-?ifCYe!v9TIAWjL;6$jCG5an<`=_Mu!pVI#>k?Tl$^wN~lNo382PO^Zwn1j)1{ ztA@At>R9y@+3KrE5p7c^D}~_I2iONN1R&&agbWTI!jQ-^Vk{UAvVktZhzwQbDjO13 zi(5=^I9D6EAQTWG7f#?N<B}ji(byS9=3Uj*P_;v2np<6Is@EmFCK)-L4xfU?q@w0h z-8pUC%B!+zI3tcOY1)V)*@X!0HKV3tZe_J5LvIkT9B=5}8WN9$w_Kk^yjh=SWZ)6D z@vNR}o4iX9b-PnSEK|O9d+@F1>1Vesr-{~Y8kzczg}RP~`qtkX7mkMNLUr1d{>SXQ zTW{PDp8x35?!VezUk)A)ehp3*u741q+t2*Ey3coW@6aRUJJA30hl_8Y3e=Ow&Dl=K zJpTUE$F8>*XLg>yyTaP7SKGLQnH|}pvi-`){M_gEzGIu)TV90SD?i>oLA-S5pQ(FW zeLwxu^j)WwZ7>F3n_s=qcJtun^P8RFRrAr=|DKvWG{yB^5@z08o!fIX=>N2pDH%(P zUq=5N`a*74VLHDLTqN#%0-CPv6yH3vy|8#8^6z6?n#GsTPA?6gy_#xBMJ78>w|qSO z+1~u}@8TwTPuu*Ae)1N(>kWc>A(lROg!y~&N@$6-(d6ON_1lQv<GS&KZ}6J;Lrf)m Kgp2Vb)Bgke)zRYs literal 0 HcmV?d00001 diff --git a/docs/index.html b/docs/index.html index 64947dc15e..4524b79506 100644 --- a/docs/index.html +++ b/docs/index.html @@ -127,10 +127,82 @@ </ul> + <div class="marketing"> + <div class="row"> + <div class="span4"> + <img src="assets/img/glyphicons/glyphicons_042_group.png"> + <h2>Built for and by nerds</h2> + <p>Like you, we love building awesome products on the web. We love it so much, we decided to help people just like us do it easier, better, and faster. Bootstrap is built for you.</p> + </div> + <div class="span4"> + <img src="assets/img/glyphicons/glyphicons_079_podium.png"> + <h2>For all skill levels</h2> + <p>Bootstrap is designed to help people of all skill level—designer or developer, huge nerd or early beginner. Use it as a complete kit or use to start something more complex.</p> + </div> + <div class="span4"> + <img src="assets/img/glyphicons/glyphicons_163_iphone.png"> + <h2>Cross-everything</h2> + <p>Originally built with only modern browsers in mind, Bootstrap has evolved to include support for all major browsers (even IE7!) and, with Bootstrap 2, tablets and smartphones, too.</p> + </div> + </div><!--/row--> + <div class="row"> + <div class="span4"> + <img src="assets/img/glyphicons/glyphicons_155_show_thumbnails.png"> + <h2>12-column grid</h2> + <p>Grid systems aren't everything, but having a durable and flexible one at the core of your work can make development much simpler. Use our built-in grid classes or roll your own.</p> + </div> + <div class="span4"> + <img src="assets/img/glyphicons/glyphicons_214_resize_small.png"> + <h2>Responsive design</h2> + <p>With Bootstrap 2, we've gone fully responsive. Our components are flexible enough to scale according to whatever resolution or device you're using to provide a consistent experience, no matter what.</p> + </div> + <div class="span4"> + <img src="assets/img/glyphicons/glyphicons_266_book_open.png"> + <h2>Styleguide docs</h2> + <p>Unlike other front-end toolkits, Bootstrap was designed first and foremost as a styleguide to document not only our features, but best practices and living, coded examples.</p> + </div> + </div><!--/row--> + <div class="row"> + <div class="span4"> + <img src="assets/img/glyphicons/glyphicons_082_roundabout.png"> + <h2>Growing library</h2> + <p>Despite being only 7kb (gzipped), Bootstrap is one of the most complete front-end toolkits out there with dozens of fully functional components ready to be put to use.</p> + </div> + <div class="span4"> + <img src="assets/img/glyphicons/glyphicons_009_magic.png"> + <h2>Custom jQuery plugins</h2> + <p>What good is an awesome design component without easy-to-use, proper, and extensible interactions? With Bootstrap, you get custom-built jQuery plugins to bring your projects to life.</p> + </div> + <div class="span4"> + <img src="assets/img/glyphicons/glyphicons_155_show_thumbnails.png"> + <h2>Built on LESS</h2> + <p>Where vanilla CSS falters, LESS excels. Variables, nesting, operations, and mixins in LESS makes coding CSS faster and more efficient with minimal overhead.</p> + </div> + </div><!--/row--> + <div class="row"> + <div class="span3"> + <h3>HTML5</h3> + <p>Built to support new HTML5 elements and syntax.</p> + </div> + <div class="span3"> + <h3>CSS3</h3> + <p>Progressively enhanced components for ultimate style.</p> + </div> + <div class="span3"> + <h3>Open-source</h3> + <p>Built for and maintained by the community via <a href="https://github.com">GitHub</a>.</p> + </div> + <div class="span3"> + <h3>Made at Twitter</h3> + <p>Brought to you by experienced engineers and designers.</p> + </div> + </div><!--/row--> + </div> + <!-- About Bootstrap ================================================== --> - <section id="about"> + <section id="about" style="display: none;"> <div class="row"> <div class="span4"> <h2>Built for and by nerds</h2> @@ -163,7 +235,7 @@ </div><!-- /row --> </section> - <h3>Quick-start examples</h3> +<!-- <h3>Quick-start examples</h3> <p>Need some quick templates? Check out these basic examples we've put together:</p> <ul class="media-grid"> <li> @@ -176,7 +248,7 @@ <a href="../examples/container-app.html"><img src="assets/img/example-diagram-03.png" alt="Simple hanging container for apps"></a> </li> </ul> - + --> </div><!-- /#overview --> @@ -184,10 +256,9 @@ ================================================== --> <footer class="footer"> <p class="pull-right"><a href="#">Back to top</a></p> - <p> - Designed and built with all the love in the world <a href="http://twitter.com/twitter" target="_blank">@twitter</a> by <a href="http://twitter.com/mdo" target="_blank">@mdo</a> and <a href="http://twitter.com/fat" target="_blank">@fat</a>.<br> - Code licensed under the <a href="http://www.apache.org/licenses/LICENSE-2.0" target="_blank">Apache License v2.0</a>. Documentation licensed under <a href="http://creativecommons.org/licenses/by/3.0/">CC BY 3.0</a>. - </p> + <p>Designed and built with all the love in the world <a href="http://twitter.com/twitter" target="_blank">@twitter</a> by <a href="http://twitter.com/mdo" target="_blank">@mdo</a> and <a href="http://twitter.com/fat" target="_blank">@fat</a>.</p> + <p>Code licensed under the <a href="http://www.apache.org/licenses/LICENSE-2.0" target="_blank">Apache License v2.0</a>. Documentation licensed under <a href="http://creativecommons.org/licenses/by/3.0/">CC BY 3.0</a>.</p> + <p>Icons from <a href="http://glyphicons.com">Glyphicons Free</a>, licensed under <a href="http://creativecommons.org/licenses/by/3.0/">CC BY 3.0</a>.</p> </footer> </div><!-- /container --> -- GitLab From 9fd4e459fe829454c811118c64aa32eafd6e8b97 Mon Sep 17 00:00:00 2001 From: Mark Otto <mark.otto@twitter.com> Date: Thu, 27 Oct 2011 23:34:48 -0700 Subject: [PATCH 056/318] adding more icons for the homepage for open source, twitter, and html5/css3 --- docs/assets/css/docs.css | 6 +++++- docs/assets/img/icon-css3.png | Bin 0 -> 1145 bytes docs/assets/img/icon-github.png | Bin 0 -> 1191 bytes docs/assets/img/icon-html5.png | Bin 0 -> 1230 bytes docs/assets/img/icon-twitter.png | Bin 0 -> 1096 bytes docs/index.html | 22 +++++++++++++--------- 6 files changed, 18 insertions(+), 10 deletions(-) create mode 100644 docs/assets/img/icon-css3.png create mode 100644 docs/assets/img/icon-github.png create mode 100644 docs/assets/img/icon-html5.png create mode 100644 docs/assets/img/icon-twitter.png diff --git a/docs/assets/css/docs.css b/docs/assets/css/docs.css index 66e87fdf9e..79c9047743 100644 --- a/docs/assets/css/docs.css +++ b/docs/assets/css/docs.css @@ -172,10 +172,14 @@ body > .navbar-fixed .brand:hover { .marketing p { margin-right: 10px; } -.marketing img { +.marketing .icon { float: left; margin: 7px 10px 0 0; } +.marketing .small-icon { + float: left; + margin: 4px 5px 0 0; +} /* Footer diff --git a/docs/assets/img/icon-css3.png b/docs/assets/img/icon-css3.png new file mode 100644 index 0000000000000000000000000000000000000000..eb3651bacd68575d4a5be5bd3e098031f3e4aed3 GIT binary patch literal 1145 zcmaJ>O=uKX9G@g+l@O^$V?GY@n3TF=cD}N++ZnS-HaolSiWAn!f=fYkcIG8JP3FUy zm+mGWk|sH%U=KMoo(hXlsyW0`q?Zy6lpfRs{J4lh{lJ6Zp?H%j=$n|09^4Mhy!Zb6 ze!u_cn;)`6$96Y$HW37|JCl|aytd$X|E>W3&RjH)<D~;7^Jv%}K_%6NL|nHE5M)es z6e>{FC(qr4y#&$lrIE{{ynI5`Y?D%b3{^HA%qEE5{<5QLV-SG?95t*M`R|`MNMPtO z@)R#KvXg*CBR%E9;i;jVHZ`URI@#X`ddngfFd<Sw*&Me#u^b~ebw#}Q%`^!%A!sZ{ zeh4ZrXF<YtA>b({q%jc|M8XssW`wZN4LF8nXqKayXozJ*J}NRS*m_9p&DBRlMM`b? z!lxKnM92|ox>PDrr5?(5M`>0N1e)P!jtgN#$eXl~S`JxWS5-lRp5_`3GHeU@ifX~0 zKrs?W`XL3=*_O4utuo<)(Ph=4S&H#fssd&C|DmS2jrNcNKgRo6VJ|o7Kw5#GJ>hD& zaU)&6D@RPYP(`+zv+eO}6|+Sf*<R6hKw_AuSRkvKVfmI#hAfL2%R{QA!Hg6mu?A%r zy4Vxuqwz%Y>y*H=ESqHFe3Tz#qv4)-G8~U{Qk5&&+Jp%$RORX)xk62@KMbaWJxkCv zzJq$owN0>@v}n|hB~nvwi>ud;C0dh9<6vmNwV$-QYQpp5Z?^{*AGSvyT6o@FJlM+@ zuP@_E@iHUDbLEGHoT3yefwO~!(fU`@+^Zw{+=au=oko4GImo=|{yqNHz<Rp=pC4}n z<@>tG)x~{xE@fBG%)IW~$Jci*yyH%GRTl5>y;8T@x{+*t9{7WbwEaysK1q?yPj?oC z;G4ERkLNq)$N!UCPJ12Swm$%&Yi}bv7dC!te^U3;quGOfU~P7!;fp<o5^VY|2bKcQ z9I&+3s)4ocVDNRva=KIAn_h2S2vrVLe*O9IKyTZ^^z4rI#amt3Z;m%S3l?WC%^l6Q zQGXp+x{z;*9K3w$US(z8xIRM%+KrQg$_}EwnfN7@gsF3x^Zw5ulN^#(2G7pE2hk92 AO8@`> literal 0 HcmV?d00001 diff --git a/docs/assets/img/icon-github.png b/docs/assets/img/icon-github.png new file mode 100644 index 0000000000000000000000000000000000000000..8afcce9cbad95d92521ac14da65ded7f6d8aa232 GIT binary patch literal 1191 zcmeAS@N?(olHy`uVBq!ia0vp^LO?9S!3HE7rssMADajJoh?3y^w370~qErUQl>DSr z1<%~X^wgl##FWaylc_cg49qH-ArU1JzCKpT`MG+DAT@dwxdlMo3=B5*6$OdO*{LN8 zNvY|XdA3ULckfqH$V{<S3ODsN@GWpo&B*kqDoPEm@(W3>%1*XSQL?vFu&J;D8jzb> zlBiITo0C^;Rbi_HHrEQs1_|pcDS(xfWZNo192Makpx~Tel&WB=XP}#GU}mUbW};_k zVqj@vsiR<IU}&IkXrymou4`yuWom9^V5k5EN<iC+Qqrt~T-=~`0eQAc86_nJR{Hwo z<>h+i#(Mch>H3D2mX`VkM*2oZx<D1W#g%y_i50qe#mX=fTvCgZi!uvJGV}8kKqe+8 z<(HP&Dgj*z@j`9^+}ONgXfOc-Our(rK;KZ$0OTc@LSJ9}N^^7Js*6j4QW5UOYH)E# zWkITbP-=00X;CsT;?k5sRuxz|7o{ea<QIkH=jXseF(4zqB)>Q#zd*q`*i_F@!8b8E zGY=#J*5T`G<(XGpl9-pA>gi&u1T;f0Gc(1?$k4#d($Uq>&C=A!(9qSu(bU}3$<W-y z*wNL*(b32Srq?AuximL5uLPzy1)<jnr(RHE$SnZc?2=lPS(cjOR+OKs0QR(1CQi4w zxZyMpsy79<TMTgO)dxC89~8AnQ4JFUrXLU!o^XL2c+yYJ1E%*PV8T}P)y`&MV3hQ9 zaSW-rwI!sHx5+?&<uSuu2e$;4ISzLj%oAA53Rv6}{2p*z<&<DFUlCuV>b_94*UYl> z?ftL&{^n=(c>Xh;vOp-K@#BJx%kFi`u-bZjyUmrg;On(h6FfW}LsK?)vAmwp(Y9J? zQdy_O^s1BHwi6P?r7v(w9qc{eXY`0S{aJ_J+^UBYYGX9c8oKg^n(q>IV(SwsSbNOi zX40kz%|ntA>ux?c|M+y3^iIDFcJrI;PJNq`6|D;o=zX8+6#ht!^J;U`VwrGRE9rGv zu3yb}9%_1}8NI`CzpmQS#T^rpH}dazH0{L6g||+f4=z~t>Ta^1Yt+%D`NugwZmxSQ z_CeM(?kRhGLsDvLx#0HA*BkE3yXQIUU5dBes?W&A(71ngd$V%cY*5kR>FVdQ&MBb@ E09?P6761SM literal 0 HcmV?d00001 diff --git a/docs/assets/img/icon-html5.png b/docs/assets/img/icon-html5.png new file mode 100644 index 0000000000000000000000000000000000000000..e9066c67268f25a393cfb2add703aaaac755c09c GIT binary patch literal 1230 zcmeAS@N?(olHy`uVBq!ia0vp^LO?9S!3HE7rssMADajJoh?3y^w370~qErUQl>DSr z1<%~X^wgl##FWaylc_cg49qH-ArU1JzCKpT`MG+DAT@dwxdlMo3=B5*6$OdO*{LN8 zNvY|XdA3ULckfqH$V{<S3ODsN@GWpo&B*kqDoPEm@(W3>%1*XSQL?vFu&J;D8jzb> zlBiITo0C^;Rbi_HHrEQs1_|pcDS(xfWZNo192Makpx~Tel&WB=XP}#GU}mUbW};_k zVqj@vsiR<IU}&IkXrymou4`yuWom9^V5k5EN<iC+Qqrt~T-=~`0eQAc86_nJR{Hwo z<>h+i#(Mch>H3D2mX`VkM*2oZx<D1W#g%y_i50qe#mX=fTvCgZi!uvJGV}8kKqe+8 z<(HP&Dgj*z@j`9^+}ONgXfOc-Our(rK;KZ$0OTc@LSJ9}N^^7Js*6j4QW5UOYH)E# zWkITbP-=00X;CsT;?k5sRuxz|7o{ea<QIkH=jXseF(4zqB)>Q#zd*q`*i_F@!8b8E zGY=#J*5T`G<(XGpl9-pA>gi&u1T;f0Gc(1?#L3*k+}Op`&C=As(9qSu(bU}3$<W-y z*wNL*(b32Srq?AuximL5uLPzy1)<jrr(RHE$SnZc?2=lPS(cjOR+OKs0QR(1CT_PF z<1`PdHwCv_OmOPe2RcR{6tzfE4HE*U9}p9saDg0n(of9;ruQOX!gksE_9+7cql2f5 zV@SoVq>!K>t1|}<Bph~-v^d0~5@#I17uU>F<;dC`w_(A~7a{`j3PGD01!gNsx4c=@ z>=5I&#Br|&+g>+*<v^i5%8l<#Q^Y-;GwT%oIe1Ad-0i{PRnPM1{gNY6dg6@@mI9j} zUfjcd^3iggfZO$srkskJdwdRv{t1wJ^69;ffj!eknJXK91~hME47fCduU8~(Mz#aX znFZGanjIbph8S^myuHX1)sP~<JSmP%O+{RB`O-*-8ky)f3EfpC;tQ9nPDqTO5W~7D zL2}xcwxkQ(I-GCq1hzXF?mO~BYPzFvg9S@RIrB%m06|7kc2QG5hc{heZytP+@)71R zXZmQp<w(~=iNc*6vK)e^<P@4B0|ErZ<Zd_qPz(v0*pN11`g5j2!!0io6IjHy?g-M= p*k-dpf~Cyiqg_VMB8CPAW`;jseEc<!orngNFrKb{F6*2UngECum7o9s literal 0 HcmV?d00001 diff --git a/docs/assets/img/icon-twitter.png b/docs/assets/img/icon-twitter.png new file mode 100644 index 0000000000000000000000000000000000000000..98241d098d9f021642f1ecda4b115bb411a4a70c GIT binary patch literal 1096 zcmaJ=OH9;27%r>=t`LZiM2(SJj0fZP#TIPCx>>f1EK-8YCX#ru+YV6KcDn807NQAJ z58_2*;v*h>#e*lso6#7Jaxoq}C?3$0CMG5(#0Q2biqnN%J-9ZR&di_x`~KHA6TLlq z>Vlhs1VPj#JLMGK*Wk6TrV9VZFPL3;+lUhVs1FXHyy^fVro#*%lcqWdQb5&5b5B7V zK?JrL>3-C&bW0jEY1Q|kJ=4Z$f@q6+wyF&SL}tLCVMVCf`wuD7&?D4-L17g;4u*`* zF$eUG^`y12VNKMj=x(yjlQ4k^kV<-H)^a5;LKS!=eD=)@MHXDpaD-Y)s$c0P<In-5 zK(ir@ZQ;n4FwKQoF)Z#Rd6r`tj%V1`5XVYFtHg5T@<-uljy@oz<c{T7_!gmt5V9qP z$>;NQzL|#3Aj65G$gn)a^C9dJaz`zsdLhegDl*8x)f~e{2DC_@QO&>+6rpgYOC^|g ziPmzL+k_j&c&g2CH0zgCbX1i8yP9Un+eInxC*OY(yXjFIFe%`|5l6#=8)))F*;3pA zDuPZL!fdgNy+aT|cL>^KyicGxQc*R-@+}2~qDV>0MXIHNq#U6z2W=R-#B*$m7?b4= zQQ$c)!N!DEp`B|DH^&m;Sd5p8SQ%;~Ca_QutN+0!%3^&nm^O|q1IIWF^bQA_WT9xu zD4$DvS-xegUOtz2SuBH-Vf@klHR_@X>&HKqgo`gF=>rSv-NC~CwfOl1eiZkTaxCr5 zWEK_|qXB_f8#qTy*HSBMh+MScc6FxuNHBIb=+%n#Q&)+j^;328wO!*o-qeGp<5f2| z^OsLQpZwVwoDJlNm%{9w4PP6tJexFjoqp1A5mfcA-Zx&c<#kRy^L@qk%@unOWoO=< zdhkWQ_r7iGfmdsdhOUp_v}AOZd}4YmTXCdu)7+1V+K+R0AE$^*k4{cptISrh*FUYl uYCLXK7AhMWSG=veTX`-we|}H8xrTg1#7+33J8)yff7{7Kk9@2B;IZF)A7U^7 literal 0 HcmV?d00001 diff --git a/docs/index.html b/docs/index.html index 4524b79506..e712f6ed05 100644 --- a/docs/index.html +++ b/docs/index.html @@ -130,69 +130,73 @@ <div class="marketing"> <div class="row"> <div class="span4"> - <img src="assets/img/glyphicons/glyphicons_042_group.png"> + <img class="icon" src="assets/img/glyphicons/glyphicons_042_group.png"> <h2>Built for and by nerds</h2> <p>Like you, we love building awesome products on the web. We love it so much, we decided to help people just like us do it easier, better, and faster. Bootstrap is built for you.</p> </div> <div class="span4"> - <img src="assets/img/glyphicons/glyphicons_079_podium.png"> + <img class="icon" src="assets/img/glyphicons/glyphicons_079_podium.png"> <h2>For all skill levels</h2> <p>Bootstrap is designed to help people of all skill level—designer or developer, huge nerd or early beginner. Use it as a complete kit or use to start something more complex.</p> </div> <div class="span4"> - <img src="assets/img/glyphicons/glyphicons_163_iphone.png"> + <img class="icon" src="assets/img/glyphicons/glyphicons_163_iphone.png"> <h2>Cross-everything</h2> <p>Originally built with only modern browsers in mind, Bootstrap has evolved to include support for all major browsers (even IE7!) and, with Bootstrap 2, tablets and smartphones, too.</p> </div> </div><!--/row--> <div class="row"> <div class="span4"> - <img src="assets/img/glyphicons/glyphicons_155_show_thumbnails.png"> + <img class="icon" src="assets/img/glyphicons/glyphicons_155_show_thumbnails.png"> <h2>12-column grid</h2> <p>Grid systems aren't everything, but having a durable and flexible one at the core of your work can make development much simpler. Use our built-in grid classes or roll your own.</p> </div> <div class="span4"> - <img src="assets/img/glyphicons/glyphicons_214_resize_small.png"> + <img class="icon" src="assets/img/glyphicons/glyphicons_214_resize_small.png"> <h2>Responsive design</h2> <p>With Bootstrap 2, we've gone fully responsive. Our components are flexible enough to scale according to whatever resolution or device you're using to provide a consistent experience, no matter what.</p> </div> <div class="span4"> - <img src="assets/img/glyphicons/glyphicons_266_book_open.png"> + <img class="icon" src="assets/img/glyphicons/glyphicons_266_book_open.png"> <h2>Styleguide docs</h2> <p>Unlike other front-end toolkits, Bootstrap was designed first and foremost as a styleguide to document not only our features, but best practices and living, coded examples.</p> </div> </div><!--/row--> <div class="row"> <div class="span4"> - <img src="assets/img/glyphicons/glyphicons_082_roundabout.png"> + <img class="icon" src="assets/img/glyphicons/glyphicons_082_roundabout.png"> <h2>Growing library</h2> <p>Despite being only 7kb (gzipped), Bootstrap is one of the most complete front-end toolkits out there with dozens of fully functional components ready to be put to use.</p> </div> <div class="span4"> - <img src="assets/img/glyphicons/glyphicons_009_magic.png"> + <img class="icon" src="assets/img/glyphicons/glyphicons_009_magic.png"> <h2>Custom jQuery plugins</h2> <p>What good is an awesome design component without easy-to-use, proper, and extensible interactions? With Bootstrap, you get custom-built jQuery plugins to bring your projects to life.</p> </div> <div class="span4"> - <img src="assets/img/glyphicons/glyphicons_155_show_thumbnails.png"> + <img class="icon" src="assets/img/glyphicons/glyphicons_155_show_thumbnails.png"> <h2>Built on LESS</h2> <p>Where vanilla CSS falters, LESS excels. Variables, nesting, operations, and mixins in LESS makes coding CSS faster and more efficient with minimal overhead.</p> </div> </div><!--/row--> <div class="row"> <div class="span3"> + <img class="small-icon" src="assets/img/icon-html5.png"> <h3>HTML5</h3> <p>Built to support new HTML5 elements and syntax.</p> </div> <div class="span3"> + <img class="small-icon" src="assets/img/icon-css3.png"> <h3>CSS3</h3> <p>Progressively enhanced components for ultimate style.</p> </div> <div class="span3"> + <img class="small-icon" src="assets/img/icon-github.png"> <h3>Open-source</h3> <p>Built for and maintained by the community via <a href="https://github.com">GitHub</a>.</p> </div> <div class="span3"> + <img class="small-icon" src="assets/img/icon-twitter.png"> <h3>Made at Twitter</h3> <p>Brought to you by experienced engineers and designers.</p> </div> -- GitLab From 2764cfda6dbda56b4a50561fb8cd2a8be86dc096 Mon Sep 17 00:00:00 2001 From: Mark Otto <mark.otto@twitter.com> Date: Fri, 28 Oct 2011 18:38:06 -0700 Subject: [PATCH 057/318] remove html from body background --- bootstrap.css | 6 ++---- bootstrap.min.css | 3 +-- docs/scaffolding.html | 1 + lib/scaffolding.less | 4 +--- 4 files changed, 5 insertions(+), 9 deletions(-) diff --git a/bootstrap.css b/bootstrap.css index ed0556b3d8..ec9217a21b 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: Thu Oct 27 12:48:41 PDT 2011 + * Date: Fri Oct 28 18:37:59 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). @@ -180,10 +180,8 @@ textarea { * Scaffolding * Basic and global styles for generating a grid system, structural layout, and page templates * ------------------------------------------------------------------------------------------- */ -html, body { - background-color: #ffffff; -} body { + background-color: #ffffff; margin: 0; font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; font-size: 13px; diff --git a/bootstrap.min.css b/bootstrap.min.css index b443f02e39..7eb8efe2fa 100644 --- a/bootstrap.min.css +++ b/bootstrap.min.css @@ -20,8 +20,7 @@ button,input[type="button"],input[type="reset"],input[type="submit"]{cursor:poin input[type="search"]{-webkit-appearance:textfield;-webkit-box-sizing:content-box;-moz-box-sizing:content-box;box-sizing:content-box;} input[type="search"]::-webkit-search-decoration{-webkit-appearance:none;} textarea{overflow:auto;vertical-align:top;} -html,body{background-color:#ffffff;} -body{margin:0;font-family:"Helvetica Neue",Helvetica,Arial,sans-serif;font-size:13px;line-height:18px;color:#404040;} +body{background-color:#ffffff;margin:0;font-family:"Helvetica Neue",Helvetica,Arial,sans-serif;font-size:13px;line-height:18px;color:#404040;} .container{width:940px;margin-left:auto;margin-right:auto;zoom:1;}.container:before,.container:after{display:table;content:"";zoom:1;*display:inline;} .container:after{clear:both;} .fluid-container{position:relative;min-width:940px;padding-left:20px;padding-right:20px;zoom:1;}.fluid-container:before,.fluid-container:after{display:table;content:"";zoom:1;*display:inline;} diff --git a/docs/scaffolding.html b/docs/scaffolding.html index 2a5ae8bc63..de612a0746 100644 --- a/docs/scaffolding.html +++ b/docs/scaffolding.html @@ -53,6 +53,7 @@ </header> + <!-- Grid system ================================================== --> <section id="grid-system"> diff --git a/lib/scaffolding.less b/lib/scaffolding.less index f15f6853cf..7b8aa369a4 100644 --- a/lib/scaffolding.less +++ b/lib/scaffolding.less @@ -7,10 +7,8 @@ // STRUCTURAL LAYOUT // ----------------- -html, body { - background-color: @white; -} body { + background-color: @white; margin: 0; font-family: @baseFontFamily; font-size: @baseFontSize; -- GitLab From 0218d079ad83ce5f8fd08e9f68b6f661855a27a9 Mon Sep 17 00:00:00 2001 From: Mark Otto <mark.otto@twitter.com> Date: Sat, 29 Oct 2011 18:11:17 -0700 Subject: [PATCH 058/318] fix some of the docs styles at 480 to 768 --- docs/assets/css/docs.css | 24 ++++++++++++++++++------ 1 file changed, 18 insertions(+), 6 deletions(-) diff --git a/docs/assets/css/docs.css b/docs/assets/css/docs.css index 79c9047743..52738d808b 100644 --- a/docs/assets/css/docs.css +++ b/docs/assets/css/docs.css @@ -348,11 +348,6 @@ h2 + table { font-size: 18px; line-height: 24px; } - .jumbotron .benefits { - position: relative; - width: auto; - margin: 36px 0; - } .jumbotron .btn { display: block; font-size: 18px; @@ -365,6 +360,23 @@ h2 + table { margin: 40px 0 0; } +} + + +@media (max-width: 768px) { + + /* Hide the nav for now */ + body > .navbar-fixed .nav { + display: none; + } + + /* Adjust the jumbotron */ + .jumbotron .benefits { + position: relative; + width: auto; + margin: 36px 0; + } + /* Popovers */ .large-bird { display: none; @@ -395,7 +407,7 @@ h2 + table { .jumbotron h1, .jumbotron p { - margin-right: 40%; + margin-right: 0; } } -- GitLab From 3f512adf953da3a3fbbfca18b138fb6659f2b77f Mon Sep 17 00:00:00 2001 From: Mark Otto <mark.otto@twitter.com> Date: Sun, 30 Oct 2011 20:14:27 -0700 Subject: [PATCH 059/318] updated docs and type styles for blockquotes and a few fixes for type --- bootstrap.css | 8 ++++- bootstrap.min.css | 1 + docs/assets/css/docs.css | 3 +- docs/base-css.html | 68 ++++++++++++++++++++++++++++++++------ docs/index.html | 70 +--------------------------------------- docs/scaffolding.html | 2 +- lib/type.less | 9 ++++++ 7 files changed, 78 insertions(+), 83 deletions(-) diff --git a/bootstrap.css b/bootstrap.css index ec9217a21b..ca2bfe0b19 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 Oct 28 18:37:59 PDT 2011 + * Date: Sun Oct 30 20:12:53 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). @@ -490,6 +490,12 @@ blockquote small { blockquote small:before { content: '\2014 \00A0'; } +blockquote.pull-right { + float: right; +} +blockquote.pull-right p, blockquote.pull-right small { + text-align: right; +} address { display: block; line-height: 18px; diff --git a/bootstrap.min.css b/bootstrap.min.css index 7eb8efe2fa..776cb6e7bb 100644 --- a/bootstrap.min.css +++ b/bootstrap.min.css @@ -85,6 +85,7 @@ em{font-style:italic;font-weight:inherit;line-height:inherit;} abbr{font-size:90%;text-transform:uppercase;border-bottom:1px dotted #ddd;cursor:help;} blockquote{margin-bottom:18px;border-left:5px solid #eee;padding-left:15px;}blockquote p{font-size:16px;font-weight:300;line-height:22.5px;margin-bottom:0;} blockquote small{display:block;line-height:18px;color:#bfbfbf;}blockquote small:before{content:'\2014 \00A0';} +blockquote.pull-right{float:right;}blockquote.pull-right p,blockquote.pull-right small{text-align:right;} address{display:block;line-height:18px;margin-bottom:18px;} code,pre{padding:0 3px 2px;font-family:Menlo, Monaco, Andale Mono, Courier New, monospace;font-size:12px;-webkit-border-radius:3px;-moz-border-radius:3px;border-radius:3px;} code{background-color:#fee9cc;color:rgba(0, 0, 0, 0.75);padding:1px 3px;} diff --git a/docs/assets/css/docs.css b/docs/assets/css/docs.css index 52738d808b..185f381e92 100644 --- a/docs/assets/css/docs.css +++ b/docs/assets/css/docs.css @@ -164,7 +164,6 @@ body > .navbar-fixed .brand:hover { .marketing h2, .marketing h3 { font-weight: 300; - color: #000; } .marketing h2 { margin-bottom: 9px; @@ -175,6 +174,7 @@ body > .navbar-fixed .brand:hover { .marketing .icon { float: left; margin: 7px 10px 0 0; + opacity: .8; } .marketing .small-icon { float: left; @@ -300,7 +300,6 @@ pre.prettyprint { margin-bottom: 0; } - .browser-support { max-width: 100%; } diff --git a/docs/base-css.html b/docs/base-css.html index 47dff40e72..750bbd2b3b 100644 --- a/docs/base-css.html +++ b/docs/base-css.html @@ -92,8 +92,8 @@ <thead> <tr> <th>Element</th> - <th>Description</th> <th>Usage</th> + <th>Optional</th> </tr> </thead> <tbody> @@ -175,24 +175,72 @@ <!-- Blockquotes --> <h2>Blockquotes</h2> + <table class="bordered-table"> + <thead> + <tr> + <th>Element</th> + <th>Usage</th> + <th>Optional</th> + </tr> + </thead> + <tbody> + <tr> + <td> + <code><blockquote></code> + </td> + <td> + Block-level element for quoting content from another source + </td> + <td> + <p>Add <code>cite</code> attribute for source URL</p> + Use <code>.pull-left</code> and <code>.pull-right</code> classes for floated options + </td> + </tr> + <tr> + <td> + <code><small></code> + </td> + <td> + Optional element for adding a user-facing citation, typically an author with title of work + </td> + <td> + Place the <code><cite></code> around the title or name of source + </td> + </tr> + </tbody> + </table> <div class="row"> - <div class="span5"> - <p>To include a blockquote, wrap <code><blockquote></code> around <code><p></code> and <code><small></code> tags. Use the <code><small></code> element to cite your source and you'll get an em dash <code>&mdash;</code> before it.</p> - <blockquote> - <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante venenatis dapibus posuere velit aliquet.</p> - <small>Someone famous</small> - </blockquote> + <div class="span4"> + <p>To include a blockquote, wrap <code><blockquote></code> around any <abbr title="HyperText Markup Language">HTML</abbr> as the quote. For straight quotes we recommend a <code><p></code>.</p> + <p>Include an optional <code><small></code> element to cite your source and you'll get an em dash <code>&mdash;</code> before it for styling purposes.</p> </div> - <div class="span7"> + <div class="span8"> <pre class="prettyprint linenums"> <blockquote> - <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante venenatis dapibus posuere velit aliquet.</p> - <small>Dr. Julius Hibbert</small> + <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante venenatis.</p> + <small>Someone famous</small> </blockquote> </pre> </div> + </div><!--/row--> + + <h3>Example blockquotes</h3> + <div class="row"> + <div class="span6"> + <blockquote> + <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante venenatis.</p> + <small>Someone famous</small> + </blockquote> + </div> + <div class="span6"> + <blockquote class="pull-right"> + <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante venenatis.</p> + <small>Someone famous</small> + </blockquote> + </div> </div> + <!-- Lists --> <h2>Lists</h2> <div class="row"> diff --git a/docs/index.html b/docs/index.html index e712f6ed05..7b91315029 100644 --- a/docs/index.html +++ b/docs/index.html @@ -38,41 +38,6 @@ <li><a href="./components.html">Components</a></li> <li><a href="./javascript.html">Javascript plugins</a></li> <li><a href="./less.html">Using LESS</a></li> - -<!-- - <li class="active"><a href="#overview">Overview</a></li> - <li><a href="#about">About</a></li> - <li class="dropdown"> - <a href="#" class="dropdown-toggle" data-dropdown="true">Scaffolding</a> - <ul class="dropdown-menu"> - <li><a href="#grid-system">Grid</a></li> - <li><a href="#layouts">Layouts</a></li> - <li><a href="#responsive">Resposive</a></li> - </ul> - </li> - <li class="dropdown"> - <a href="#" class="dropdown-toggle" data-dropdown="true">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"> - <a href="#" class="dropdown-toggle" data-dropdown="true">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> - <li><a href="#autocomplete">Autocomplete</a></li> - <li><a href="#accordion">Accordion</a></li> - <li><a href="#datepicker">Datepicker</a></li> - </ul> - </li> - <li><a href="#javascript">Javascript</a></li> - <li><a href="#less">Using Less</a></li> ---> </ul> </div> </div> @@ -204,40 +169,7 @@ </div> - <!-- About Bootstrap - ================================================== --> - <section id="about" style="display: none;"> - <div class="row"> - <div class="span4"> - <h2>Built for and by nerds</h2> - <p>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.</p> - <p>Read more on <a href="https://dev.twitter.com/blog/bootstrap-twitter">dev.twitter.com ›</a></p> - </div> - <div class="span4"> - <h2>Cross-everything</h2> - <p>Bootstrap is tested and supported in major modern browsers like Chrome, Safari, Internet Explorer, and Firefox.</p> - <img class="browser-support" src="assets/img/browsers.png" alt="Tested and supported in Chrome, Safari, Internet Explorer, and Firefox"> - <ul> - <li>Latest Safari</li> - <li>Latest Google Chrome</li> - <li>Firefox 4+</li> - <li>Internet Explorer 7+</li> - <li>Opera 11</li> - </ul> - </div> - <div class="span4"> - <h2>What's included</h2> - <p>Bootstrap comes complete with compiled CSS, uncompiled, and example templates.</p> - <ul> - <li><span class="label">New in 1.3</span> <a href="./javascript.html">Javascript plugins</a></li> - <li>All original .less files</li> - <li>Fully <a href="../bootstrap.css">compiled</a> and <a href="../bootstrap.min.css">minified</a> CSS</li> - <li>Complete styleguide documentation</li> - <li>Three example pages with different layouts</li> - </ul> - </div> - </div><!-- /row --> - </section> + <!-- <h3>Quick-start examples</h3> <p>Need some quick templates? Check out these basic examples we've put together:</p> diff --git a/docs/scaffolding.html b/docs/scaffolding.html index de612a0746..4a5aa9a0b0 100644 --- a/docs/scaffolding.html +++ b/docs/scaffolding.html @@ -221,7 +221,7 @@ <div class="row"> <div class="span6"> <h2>Fixed layout</h2> - <p>The default and simple 940px-wide, centered layout for just about any website or page provided by a single <code><div.container></code>.</p> + <p>The default and simple 940px-wide, centered layout for just about any website or page provided by a single <code><div class="container"></code>.</p> <div class="mini-layout"> <div class="mini-layout-body"></div> </div> diff --git a/lib/type.less b/lib/type.less index 7f8044cd81..421d666a47 100644 --- a/lib/type.less +++ b/lib/type.less @@ -160,6 +160,15 @@ blockquote { content: '\2014 \00A0'; } } + + // Float right with text-align: right + &.pull-right { + float: right; + p, + small { + text-align: right; + } + } } // Addresses -- GitLab From ba597ef8458de4593b7a0269b0dd794f9ca89818 Mon Sep 17 00:00:00 2001 From: Mark Otto <mark.otto@twitter.com> Date: Mon, 31 Oct 2011 16:32:13 -0700 Subject: [PATCH 060/318] updating table documentation, jumping to dev to bring over new table styles from there --- docs/base-css.html | 45 +++++++++++++++++++++++++++++++++++++++++++-- 1 file changed, 43 insertions(+), 2 deletions(-) diff --git a/docs/base-css.html b/docs/base-css.html index 750bbd2b3b..2872fbb997 100644 --- a/docs/base-css.html +++ b/docs/base-css.html @@ -227,15 +227,17 @@ <h3>Example blockquotes</h3> <div class="row"> <div class="span6"> + <p>Default blockquotes are styled as such:</p> <blockquote> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante venenatis.</p> - <small>Someone famous</small> + <small>Someone famous in <cite title="">Body of work</cite></small> </blockquote> </div> <div class="span6"> + <p>To float your blockquote to the right, add <code>class="pull-right"</code>:</p> <blockquote class="pull-right"> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante venenatis.</p> - <small>Someone famous</small> + <small>Someone famous in <cite title="">Body of work</cite></small> </blockquote> </div> </div> @@ -514,6 +516,45 @@ </div> </div> + <h2>Table options</h2> + <table class="striped-table"> + <thead> + <tr> + <th>Name</th> + <th>Class</th> + <th>Description</th> + </tr> + </thead> + <tbody> + <tr> + <td>Default</td> + <td class="muted">None</td> + <td>Only horizontal lines between rows</td> + </tr> + <tr> + <td>Bordered</td> + <td> + <code>.bordered-table</code> + </td> + <td>Rounds corners and adds outter border</td> + </tr> + <tr> + <td>Zebra-stripe</td> + <td> + <code>.striped-table</code> + </td> + <td>Adds light gray background color to odd rows (1, 3, 5, etc)</td> + </tr> + <tr> + <td>Condensed</td> + <td> + <code>.condensed-table</code> + </td> + <td>Cuts padding in half, from 10px to 5px, within all <code>td</code> and <code>th</code> elements</td> + </tr> + </tbody> + </table> + <h2>Example tables</h2> <h3>1. Default table styles</h3> <p>All tables will be automatically styled with only the essential borders to ensure readability and maintain structure. No need to add extra classes or attributes.</p> -- GitLab From 02bf27592c8eec51795ac806390bc57db501926d Mon Sep 17 00:00:00 2001 From: Mark Otto <mark.otto@twitter.com> Date: Mon, 31 Oct 2011 19:37:10 -0700 Subject: [PATCH 061/318] overhaul the table styles and update those everywhere in the docs, update the button docs, spec out the forms docs --- bootstrap.css | 109 +++++++++++++++----- bootstrap.min.css | 49 ++++++--- docs/base-css.html | 228 ++++++++++++++++++++++++++++-------------- docs/javascript.html | 10 +- docs/less.html | 2 +- docs/scaffolding.html | 4 +- lib/tables.less | 95 ++++++++++++++---- 7 files changed, 350 insertions(+), 147 deletions(-) diff --git a/bootstrap.css b/bootstrap.css index ca2bfe0b19..2795e42513 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 Oct 30 20:12:53 PDT 2011 + * Date: Mon Oct 31 19:36:50 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). @@ -927,17 +927,10 @@ textarea[readonly] { * ---------------------------------------- */ table { width: 100%; - margin-bottom: 18px; padding: 0; - border-collapse: separate; - *border-collapse: collapse; - /* IE7, collapse table to remove spacing */ - + margin-bottom: 18px; font-size: 13px; - border: 1px solid #ddd; - -webkit-border-radius: 4px; - -moz-border-radius: 4px; - border-radius: 4px; + border-collapse: collapse; } table th, table td { padding: 10px 10px 9px; @@ -948,47 +941,109 @@ table th { padding-top: 9px; font-weight: bold; vertical-align: middle; - border-bottom: 1px solid #ddd; } table td { vertical-align: top; + border-top: 1px solid #ddd; } -table th + th, table td + td { - border-left: 1px solid #ddd; -} -table tr + tr td { +table tbody th { border-top: 1px solid #ddd; + vertical-align: top; +} +.condensed-table th, .condensed-table td { + padding: 5px 5px 4px; +} +.bordered-table { + border: 1px solid #ddd; + border-collapse: separate; + *border-collapse: collapse; + /* IE7, collapse table to remove spacing */ + + -webkit-border-radius: 4px; + -moz-border-radius: 4px; + border-radius: 4px; } -table tbody tr:first-child td:first-child { +.bordered-table th + th, .bordered-table td + td, .bordered-table th + td { + border-left: 1px solid #ddd; +} +.bordered-table thead:first-child tr:first-child th:first-child, .bordered-table tbody:first-child tr:first-child td:first-child { -webkit-border-radius: 4px 0 0 0; -moz-border-radius: 4px 0 0 0; border-radius: 4px 0 0 0; } -table tbody tr:first-child td:last-child { +.bordered-table thead:first-child tr:first-child th:last-child, .bordered-table tbody:first-child tr:first-child td:last-child { -webkit-border-radius: 0 4px 0 0; -moz-border-radius: 0 4px 0 0; border-radius: 0 4px 0 0; } -table tbody tr:last-child td:first-child { +.bordered-table tbody tr:last-child td:first-child { -webkit-border-radius: 0 0 0 4px; -moz-border-radius: 0 0 0 4px; border-radius: 0 0 0 4px; } -table tbody tr:last-child td:last-child { +.bordered-table tbody tr:last-child td:last-child { -webkit-border-radius: 0 0 4px 0; -moz-border-radius: 0 0 4px 0; border-radius: 0 0 4px 0; } -.zebra-striped tbody tr:nth-child(odd) td { +table .span1 { + width: 40px; +} +table .span2 { + width: 120px; +} +table .span3 { + width: 200px; +} +table .span4 { + width: 280px; +} +table .span5 { + width: 360px; +} +table .span6 { + width: 440px; +} +table .span7 { + width: 520px; +} +table .span8 { + width: 600px; +} +table .span9 { + width: 680px; +} +table .span10 { + width: 760px; +} +table .span11 { + width: 840px; +} +table .span12 { + width: 920px; +} +table .span13 { + width: 1000px; +} +table .span14 { + width: 1080px; +} +table .span15 { + width: 1160px; +} +table .span16 { + width: 1240px; +} +.striped-table tbody tr:nth-child(odd) td, .striped-table tbody tr:nth-child(odd) th { background-color: #f9f9f9; } -.zebra-striped tbody tr:hover td { +.striped-table tbody tr:hover td, .striped-table tbody tr:hover th { background-color: #f5f5f5; } -.zebra-striped .header { +table .header { cursor: pointer; } -.zebra-striped .header:after { +table .header:after { content: ""; float: right; margin-top: 7px; @@ -997,21 +1052,21 @@ table tbody tr:last-child td:last-child { border-color: #000 transparent; visibility: hidden; } -.zebra-striped .headerSortUp, .zebra-striped .headerSortDown { +table .headerSortUp, table .headerSortDown { background-color: rgba(141, 192, 219, 0.25); text-shadow: 0 1px 1px rgba(255, 255, 255, 0.75); } -.zebra-striped .header:hover:after { +table .header:hover:after { visibility: visible; } -.zebra-striped .headerSortDown:after, .zebra-striped .headerSortDown:hover:after { +table .headerSortDown:after, table .headerSortDown:hover:after { visibility: visible; filter: alpha(opacity=60); -khtml-opacity: 0.6; -moz-opacity: 0.6; opacity: 0.6; } -.zebra-striped .headerSortUp:after { +table .headerSortUp:after { border-bottom: none; border-left: 4px solid transparent; border-right: 4px solid transparent; diff --git a/bootstrap.min.css b/bootstrap.min.css index 776cb6e7bb..35f8a9bcd7 100644 --- a/bootstrap.min.css +++ b/bootstrap.min.css @@ -154,22 +154,39 @@ input[disabled],select[disabled],textarea[disabled],input[readonly],select[reado .form-horizontal .controls{margin-left:150px;} .form-horizontal .control-list{padding-top:6px;} .form-horizontal .form-actions{padding-left:150px;} -table{width:100%;margin-bottom:18px;padding:0;border-collapse:separate;*border-collapse:collapse;font-size:13px;border:1px solid #ddd;-webkit-border-radius:4px;-moz-border-radius:4px;border-radius:4px;}table th,table td{padding:10px 10px 9px;line-height:18px;text-align:left;} -table th{padding-top:9px;font-weight:bold;vertical-align:middle;border-bottom:1px solid #ddd;} -table td{vertical-align:top;} -table th+th,table td+td{border-left:1px solid #ddd;} -table tr+tr td{border-top:1px solid #ddd;} -table tbody tr:first-child td:first-child{-webkit-border-radius:4px 0 0 0;-moz-border-radius:4px 0 0 0;border-radius:4px 0 0 0;} -table tbody tr:first-child td:last-child{-webkit-border-radius:0 4px 0 0;-moz-border-radius:0 4px 0 0;border-radius:0 4px 0 0;} -table tbody tr:last-child td:first-child{-webkit-border-radius:0 0 0 4px;-moz-border-radius:0 0 0 4px;border-radius:0 0 0 4px;} -table tbody tr:last-child td:last-child{-webkit-border-radius:0 0 4px 0;-moz-border-radius:0 0 4px 0;border-radius:0 0 4px 0;} -.zebra-striped tbody tr:nth-child(odd) td{background-color:#f9f9f9;} -.zebra-striped tbody tr:hover td{background-color:#f5f5f5;} -.zebra-striped .header{cursor:pointer;}.zebra-striped .header:after{content:"";float:right;margin-top:7px;border-width:0 4px 4px;border-style:solid;border-color:#000 transparent;visibility:hidden;} -.zebra-striped .headerSortUp,.zebra-striped .headerSortDown{background-color:rgba(141, 192, 219, 0.25);text-shadow:0 1px 1px rgba(255, 255, 255, 0.75);} -.zebra-striped .header:hover:after{visibility:visible;} -.zebra-striped .headerSortDown:after,.zebra-striped .headerSortDown:hover:after{visibility:visible;filter:alpha(opacity=60);-khtml-opacity:0.6;-moz-opacity:0.6;opacity:0.6;} -.zebra-striped .headerSortUp:after{border-bottom:none;border-left:4px solid transparent;border-right:4px solid transparent;border-top:4px solid #000;visibility:visible;-webkit-box-shadow:none;-moz-box-shadow:none;box-shadow:none;filter:alpha(opacity=60);-khtml-opacity:0.6;-moz-opacity:0.6;opacity:0.6;} +table{width:100%;padding:0;margin-bottom:18px;font-size:13px;border-collapse:collapse;}table th,table td{padding:10px 10px 9px;line-height:18px;text-align:left;} +table th{padding-top:9px;font-weight:bold;vertical-align:middle;} +table td{vertical-align:top;border-top:1px solid #ddd;} +table tbody th{border-top:1px solid #ddd;vertical-align:top;} +.condensed-table th,.condensed-table td{padding:5px 5px 4px;} +.bordered-table{border:1px solid #ddd;border-collapse:separate;*border-collapse:collapse;-webkit-border-radius:4px;-moz-border-radius:4px;border-radius:4px;}.bordered-table th+th,.bordered-table td+td,.bordered-table th+td{border-left:1px solid #ddd;} +.bordered-table thead:first-child tr:first-child th:first-child,.bordered-table tbody:first-child tr:first-child td:first-child{-webkit-border-radius:4px 0 0 0;-moz-border-radius:4px 0 0 0;border-radius:4px 0 0 0;} +.bordered-table thead:first-child tr:first-child th:last-child,.bordered-table tbody:first-child tr:first-child td:last-child{-webkit-border-radius:0 4px 0 0;-moz-border-radius:0 4px 0 0;border-radius:0 4px 0 0;} +.bordered-table tbody tr:last-child td:first-child{-webkit-border-radius:0 0 0 4px;-moz-border-radius:0 0 0 4px;border-radius:0 0 0 4px;} +.bordered-table tbody tr:last-child td:last-child{-webkit-border-radius:0 0 4px 0;-moz-border-radius:0 0 4px 0;border-radius:0 0 4px 0;} +table .span1{width:40px;} +table .span2{width:120px;} +table .span3{width:200px;} +table .span4{width:280px;} +table .span5{width:360px;} +table .span6{width:440px;} +table .span7{width:520px;} +table .span8{width:600px;} +table .span9{width:680px;} +table .span10{width:760px;} +table .span11{width:840px;} +table .span12{width:920px;} +table .span13{width:1000px;} +table .span14{width:1080px;} +table .span15{width:1160px;} +table .span16{width:1240px;} +.striped-table tbody tr:nth-child(odd) td,.striped-table tbody tr:nth-child(odd) th{background-color:#f9f9f9;} +.striped-table tbody tr:hover td,.striped-table tbody tr:hover th{background-color:#f5f5f5;} +table .header{cursor:pointer;}table .header:after{content:"";float:right;margin-top:7px;border-width:0 4px 4px;border-style:solid;border-color:#000 transparent;visibility:hidden;} +table .headerSortUp,table .headerSortDown{background-color:rgba(141, 192, 219, 0.25);text-shadow:0 1px 1px rgba(255, 255, 255, 0.75);} +table .header:hover:after{visibility:visible;} +table .headerSortDown:after,table .headerSortDown:hover:after{visibility:visible;filter:alpha(opacity=60);-khtml-opacity:0.6;-moz-opacity:0.6;opacity:0.6;} +table .headerSortUp:after{border-bottom:none;border-left:4px solid transparent;border-right:4px solid transparent;border-top:4px solid #000;visibility:visible;-webkit-box-shadow:none;-moz-box-shadow:none;box-shadow:none;filter:alpha(opacity=60);-khtml-opacity:0.6;-moz-opacity:0.6;opacity:0.6;} table .blue{color:#049cdb;border-bottom-color:#049cdb;} table .headerSortUp.blue,table .headerSortDown.blue{background-color:#ade6fe;} table .green{color:#46a546;border-bottom-color:#46a546;} diff --git a/docs/base-css.html b/docs/base-css.html index 2872fbb997..6d3d92a171 100644 --- a/docs/base-css.html +++ b/docs/base-css.html @@ -88,7 +88,7 @@ <!-- Misc Elements --> <h2>Emphasis, address, and abbreviation</h2> - <table class="zebra-striped"> + <table class="bordered-table striped-table"> <thead> <tr> <th>Element</th> @@ -175,7 +175,7 @@ <!-- Blockquotes --> <h2>Blockquotes</h2> - <table class="bordered-table"> + <table class="bordered-table striped-table"> <thead> <tr> <th>Element</th> @@ -321,7 +321,7 @@ <!-- Code --> <h2>Code <small>Inline and block</small></h2> - <table class="zebra-striped"> + <table class="bordered-table striped-table"> <thead> <tr> <th style="width: 190px;">Element</th> @@ -363,7 +363,7 @@ <!-- Labels --> <h2>Inline labels <small>for special attention</small></h2> - <table class="zebra-striped"> + <table class="bordered-table striped-table"> <thead> <tr> <th style="width: 190px;">Labels</th> @@ -428,7 +428,7 @@ <h2>Table markup</h2> <div class="row"> <div class="span8"> - <table class="zebra-striped"> + <table class="bordered-table striped-table"> <thead> <tr> <th>Tag</th> @@ -517,7 +517,7 @@ </div> <h2>Table options</h2> - <table class="striped-table"> + <table class="bordered-table striped-table"> <thead> <tr> <th>Name</th> @@ -592,9 +592,9 @@ <table> ... </table></pre> - <h3>2. Zebra-striped</h3> - <p>Get a little fancy with your tables by adding zebra-striping—just add the <code>.zebra-striped</code> class.</p> - <table class="zebra-striped"> + <h3>2. Striped table</h3> + <p>Get a little fancy with your tables by adding zebra-striping—just add the <code>.striped-table</code> class.</p> + <table class="striped-table"> <thead> <tr> <th>#</th> @@ -626,12 +626,12 @@ </table> <p><strong>Note:</strong> Zebra-striping is a progressive enhancement not available for older browsers like IE8 and below.</p> <pre class="prettyprint linenums"> -<table class="zebra-striped"> +<table class="striped-table"> ... </table></pre> - <h3>3. Zebra-striped w/ TableSorter.js</h3> + <h3>3. Striped table w/ TableSorter.js</h3> <p>Taking the previous example, we improve the usefulness of our tables by providing sorting functionality via <a href="http://jquery.com">jQuery</a> and the <a href="http://tablesorter.com/docs/">Tablesorter</a> plugin. <strong>Click any column’s header to change the sort.</strong></p> - <table class="zebra-striped" id="sortTableExample"> + <table class="striped-table" id="sortTableExample"> <thead> <tr> <th>#</th> @@ -668,7 +668,7 @@ $("table#sortTableExample").tablesorter({ sortList: [[1,0]] }); }); </script> -<table class="zebra-striped"> +<table class="striped-table"> ... </table></pre> @@ -682,19 +682,49 @@ <div class="page-header"> <h1>Forms</h1> </div> + + <h2>Four types of forms</h2> + <table class="bordered-table striped-table"> + <thead> + <tr> + <th>Name</th> + <th>Class</th> + <th>Description</th> + </tr> + </thead> + <tbody> + <tr> + <th>Vertical (default)</th> + <td><code>.vertical-form</code> <span class="muted">(not required)</span></td> + <td>Stacked, left-aligned labels over controls</td> + </tr> + <tr> + <th>Horiztonal</th> + <td><code>.horizontal-form</code></td> + <td>Float left, right-aligned labels on same line as controls</td> + </tr> + <tr> + <th>Inline</th> + <td><code>.inline-form</code></td> + <td>Left-aligned label and inline-block controls for compact style</td> + </tr> + <tr> + <th>Search</th> + <td><code>.search-form</code></td> + <td>Extra-rounded text input for a typical search aesthetic</td> + </tr> + </tbody> + </table> + + <div class="row"> <div class="span4"> - <h3>Four types of forms</h3> - <p>With 2.0, we now have four types of forms to choose from:</p> - <ul> - <li>Search form for a super-rounded input and optional button</li> - <li>Inline form for a series of elements on one line</li> - <li>Horizontal form for left-aligned labels</li> - <li>Vertical form for stacked labels and inputs</li> - </ul> + <h3>Why four types</h3> + <p>With Bootstrap 2, we completely recoded our forms to allow for simple base styles and improved namespacing on labels and controls. To address the many uses of forms, we've included some base styles to help get you started.</p> </div> <div class="span4"> - <h3></h3> + <h3>Vertical or horizontal</h3> + <p>Our default form styles are now vertical, not horizontal. This makes it easier to customize bare-bones forms, as well as forms in tricker situations like sign-up, modals, etc. <strong>They share the same exact markup; just swap the class.</strong></p> </div> </div><!-- /row --> <div class="row"> @@ -875,79 +905,123 @@ </div> </div><!-- /row --> + + + <h2>Buttons</h2> + <table class="bordered-table striped-table"> + <thead> + <tr> + <th>Name</th> + <th>Preview</th> + <th>Class</th> + <th>Description</th> + </tr> + </thead> + <tbody> + <tr> + <th>Default</th> + <td><a class="btn" href="#">Button</a></td> + <td><code>.btn</code></td> + <td>Standard gray button with gradient</td> + </tr> + <tr> + <th>Primary</th> + <td><a class="btn primary" href="#">Button</a></td> + <td><code>.primary</code></td> + <td>Makes button blue for more visual weight to indicate the primary action in a set of buttons</td> + </tr> + <tr> + <th>Info</th> + <td><a class="btn info" href="#">Button</a></td> + <td><code>.info</code></td> + <td>Used as an alternate to the default styles</td> + </tr> + <tr> + <th>Success</th> + <td><a class="btn success" href="#">Button</a></td> + <td><code>.success</code></td> + <td>Used to indicate a successful or positive action will be taken</td> + </tr> + <tr> + <th>Danger</th> + <td><a class="btn danger" href="#">Button</a></td> + <td><code>.danger</code></td> + <td>Used to indicate a dangerous or potentially negative action will be taken</td> + </tr> + </tbody> + </table> + <div class="row"> - <div class="span3"> - <h2>Buttons</h2> - <p>As a convention, buttons are used for actions while links are used for objects. For instance, "Download" could be a button and "recent activity" could be a link.</p> - <p>All buttons default to a light gray style, but a number of functional classes can be applied for different color styles. These classes include a blue <code>.primary</code> class, a light-blue <code>.info</code> class, a green <code>.success</code> class, and a red <code>.danger</code> class.</p> + <div class="span4"> + <h3>Buttons for actions</h3> + <p>As a convention, buttons should only be used for actions while hyperlinks are to be used for objects. For instance, "Download" should be a button while "recent activity" should be a link.</p> </div> - <div class="span9"> - <h3>Example buttons</h3> - <p>Button styles can be applied to anything with the <code>.btn</code> applied. Typically you’ll want to apply these to only <code><a></code>, <code><button></code>, and select <code><input></code> elements. Here’s how it looks:</p> - <div class="well" style="padding: 14px 19px;"> - <button class="btn primary">Primary</button> <button class="btn">Default</button> <button class="btn info">Info</button> <button class="btn success">Success</button> <button class="btn danger">Danger</button> - </div> - <h3>Alternate sizes</h3> + <div class="span4"> + <h3>For anchors and forms</h3> + <p>Button styles can be applied to anything with the <code>.btn</code> applied. However, typically you’ll want to apply these to only <code><a></code> and <code><button></code> elements.</p> + </div> + <div class="span4"> + <p><strong>Note:</strong> All buttons must include the <code>.btn</code> class. Button styles should be applied to <code><button></code> and <code><a></code> elements for consistency.</p> + </div> + </div> + + <div class="row"> + <div class="span4"> + <h3>Multiple sizes</h3> <p>Fancy larger or smaller buttons? Have at it!</p> - <div class="well"> + <p> <a href="#" class="btn large primary">Primary action</a> <a href="#" class="btn large">Action</a> - </div> - <div class="well" style="padding: 16px 19px;"> + </p> + <p> <a href="#" class="btn small primary">Primary action</a> <a href="#" class="btn small">Action</a> - </div> + </p> + </div> + <div class="span8"> <h3>Disabled state</h3> <p>For buttons that are not active or are disabled by the app for one reason or another, use the disabled state. That’s <code>.disabled</code> for links and <code>:disabled</code> for <code><button></code> elements.</p> - <h4>Links</h4> - <div class="well"> + <p> <a href="#" class="btn large primary disabled">Primary action</a> <a href="#" class="btn large disabled">Action</a> - </div> - <h4>Buttons</h4> - <div class="well"> + </p> + <p> <button class="btn large primary disabled" disabled="disabled">Primary action</button> <button class="btn large" disabled>Action</button> - </div> + </p> </div> - </div><!-- /row --> + </div> - <div class="row"> - <div class="span3"> - <h2>Button groups</h2> + <h2>Button groups</h2> + + <div class="well"> + <div class="btn-group"> + <a class="btn" href="#">Left</a> + <a class="btn" href="#">Middle</a> + <a class="btn" href="#">Right</a> </div> - <div class="span9"> - <h3>Example</h3> - <div class="well"> - <div class="btn-group"> - <a class="btn" href="#">Left</a> - <a class="btn" href="#">Middle</a> - <a class="btn" href="#">Right</a> - </div> + </div> + <div class="well"> + <div class="btn-toolbar"> + <div class="btn-group"> + <a class="btn" href="#">1</a> + <a class="btn" href="#">2</a> + <a class="btn" href="#">3</a> + <a class="btn" href="#">4</a> + <a class="btn" href="#">5</a> </div> - <div class="well"> - <div class="btn-toolbar"> - <div class="btn-group"> - <a class="btn" href="#">1</a> - <a class="btn" href="#">2</a> - <a class="btn" href="#">3</a> - <a class="btn" href="#">4</a> - <a class="btn" href="#">5</a> - </div> - <div class="btn-group"> - <a class="btn" href="#">6</a> - <a class="btn" href="#">7</a> - <a class="btn" href="#">8</a> - </div> - <div class="btn-group"> - <a class="btn" href="#">9</a> - </div> - <div class="btn-group"> - <a class="btn" href="#">10</a> - </div> - </div> + <div class="btn-group"> + <a class="btn" href="#">6</a> + <a class="btn" href="#">7</a> + <a class="btn" href="#">8</a> + </div> + <div class="btn-group"> + <a class="btn" href="#">9</a> + </div> + <div class="btn-group"> + <a class="btn" href="#">10</a> </div> </div> - </div><!-- /row --> + </div> </section> diff --git a/docs/javascript.html b/docs/javascript.html index c9ac7e21da..3175d261e5 100644 --- a/docs/javascript.html +++ b/docs/javascript.html @@ -88,7 +88,7 @@ <div class="span9"> <h3>What's included</h3> <p>Bring some of Bootstrap's primary components to life with new custom plugins that work with <a href="http://jquery.com/" target="_blank">jQuery</a> and <a href="http://ender.no.de" target="_blank">Ender</a>. We encourage you to extend and modify them to fit your specific development needs.</p> - <table class="zebra-striped"> + <table class="striped-table"> <thead> <tr> <th style="width: 150px;">File</th> @@ -151,7 +151,7 @@ <h3>Using bootstrap-modal</h3> <pre class="prettyprint linenums">$('#my-modal').modal(options)</pre> <h3>Options</h3> - <table class="zebra-striped"> + <table class="striped-table"> <thead> <tr> <th style="width: 100px;">Name</th> @@ -209,7 +209,7 @@ $('#my-modal').modal({ <p><span class="label notice">Notice</span> Alternatively, this can be retrieved with <code>$().data('modal')</code>.</p> <h3>Events</h3> <p>Bootstrap's modal class exposes a few events for hooking into modal functionality. </p> - <table class="zebra-striped"> + <table class="striped-table"> <thead> <tr> <th style="width: 150px;">Event</th> @@ -457,7 +457,7 @@ $('#my-modal').bind('hidden', function () { <h3>Using bootstrap-twipsy.js</h3> <pre class="prettyprint linenums">$('#example').twipsy(options)</pre> <h3>Options</h3> - <table class="zebra-striped"> + <table class="striped-table"> <thead> <tr> <th style="width: 100px;">Name</th> @@ -574,7 +574,7 @@ $('#my-modal').bind('hidden', function () { <h3>Using boostrap-popover.js</h3> <pre class="prettyprint linenums">$('#example').popover(options)</pre> <h3>Options</h3> - <table class="zebra-striped"> + <table class="striped-table"> <thead> <tr> <th style="width: 100px;">Name</th> diff --git a/docs/less.html b/docs/less.html index d5a467bfa2..4fa0f0bdd2 100644 --- a/docs/less.html +++ b/docs/less.html @@ -166,7 +166,7 @@ <h2 id="compiling">Compiling Less</h2> <p>After modifying the <code>.less</code> files in /lib/, you'll need to recompile them in order to regenerate the bootstrap-*.*.*.css and bootstrap-*.*.*.min.css files. If you're submitting a pull request to GitHub, you must always recompile.</p> <h3>Ways to compile</h3> - <table class="zebra-striped"> + <table class="striped-table"> <thead> <tr> <th style="width: 120px;">Method</th> diff --git a/docs/scaffolding.html b/docs/scaffolding.html index 4a5aa9a0b0..de50caf8d8 100644 --- a/docs/scaffolding.html +++ b/docs/scaffolding.html @@ -161,7 +161,7 @@ </div> <h2>Grid customization</h2> - <table class="zebra-striped"> + <table class="striped-table"> <thead> <tr> <th>Variable</th> @@ -273,7 +273,7 @@ <div class="span8"> <h2>Supported devices</h2> <p>Bootstrap supports a handful of media queries to help make your projects more appropriate on different devices and screen resolutions. Here's what's included:</p> - <table class="zebra-striped"> + <table class="striped-table"> <thead> <tr> <th>Label</th> diff --git a/lib/tables.less b/lib/tables.less index 8a786ffd2a..b02087fbd2 100644 --- a/lib/tables.less +++ b/lib/tables.less @@ -9,14 +9,12 @@ table { width: 100%; - margin-bottom: @baseLineHeight; padding: 0; - border-collapse: separate; // Done so we can round those corners! - *border-collapse: collapse; /* IE7, collapse table to remove spacing */ + margin-bottom: @baseLineHeight; font-size: @baseFontSize; - border: 1px solid #ddd; - .border-radius(4px); - th, td { + border-collapse: collapse; + th, + td { padding: 10px 10px 9px; line-height: @baseLineHeight; text-align: left; @@ -25,22 +23,49 @@ table { padding-top: 9px; font-weight: bold; vertical-align: middle; - border-bottom: 1px solid #ddd; } td { vertical-align: top; + border-top: 1px solid #ddd; + } + // When scoped to row, fix th in tbody + tbody th { + border-top: 1px solid #ddd; + vertical-align: top; + } +} + + +// CONDENSED VERSION +// ----------------- + +.condensed-table { + th, + td { + padding: 5px 5px 4px; } +} + + +// BORDERED VERSION +// ---------------- + +.bordered-table { + border: 1px solid #ddd; + border-collapse: separate; // Done so we can round those corners! + *border-collapse: collapse; /* IE7, collapse table to remove spacing */ + .border-radius(4px); th + th, - td + td { + td + td, + th + td { border-left: 1px solid #ddd; } - tr + tr td { - border-top: 1px solid #ddd; - } - tbody tr:first-child td:first-child { + thead:first-child tr:first-child th:first-child, + tbody:first-child tr:first-child td:first-child { .border-radius(4px 0 0 0); } - tbody tr:first-child td:last-child { + thead:first-child tr:first-child th:last-child, + tbody:first-child tr:first-child td:last-child { .border-radius(0 4px 0 0); } tbody tr:last-child td:first-child { @@ -52,20 +77,55 @@ table { } +// ---------------- + +// This is a duplication of the main grid .columns() mixin, but subtracts 20px to account for input padding and border +.tableColumns(@columnSpan: 1) { + width: ((@gridColumnWidth - 20) * @columnSpan) + ((@gridColumnWidth - 20) * (@columnSpan - 1)); +} +table { + // Default columns + .span1 { .tableColumns(1); } + .span2 { .tableColumns(2); } + .span3 { .tableColumns(3); } + .span4 { .tableColumns(4); } + .span5 { .tableColumns(5); } + .span6 { .tableColumns(6); } + .span7 { .tableColumns(7); } + .span8 { .tableColumns(8); } + .span9 { .tableColumns(9); } + .span10 { .tableColumns(10); } + .span11 { .tableColumns(11); } + .span12 { .tableColumns(12); } + .span13 { .tableColumns(13); } + .span14 { .tableColumns(14); } + .span15 { .tableColumns(15); } + .span16 { .tableColumns(16); } +} + + // ZEBRA-STRIPING // -------------- // Default zebra-stripe styles (alternating gray and transparent backgrounds) -.zebra-striped { +.striped-table { tbody { - tr:nth-child(odd) td { + tr:nth-child(odd) td, + tr:nth-child(odd) th { background-color: #f9f9f9; } - tr:hover td { + tr:hover td, + tr:hover th { background-color: #f5f5f5; } } +} + +// TABLESORTER +// ----------- + +table { // Tablesorting styles w/ jQuery plugin .header { cursor: pointer; @@ -111,9 +171,6 @@ table { .opacity(60); } } -} - -table { // Blue Table Headings .blue { color: @blue; -- GitLab From 27b8e5e4fce71ccc5ebd56230dedd9c2403239eb Mon Sep 17 00:00:00 2001 From: Mark Otto <mark.otto@twitter.com> Date: Mon, 31 Oct 2011 21:24:57 -0700 Subject: [PATCH 062/318] small docs tweak --- docs/base-css.html | 1 - 1 file changed, 1 deletion(-) diff --git a/docs/base-css.html b/docs/base-css.html index 6d3d92a171..f6030ace1f 100644 --- a/docs/base-css.html +++ b/docs/base-css.html @@ -992,7 +992,6 @@ </div> <h2>Button groups</h2> - <div class="well"> <div class="btn-group"> <a class="btn" href="#">Left</a> -- GitLab From 31ea00304626ea68b758def41769606d4c049671 Mon Sep 17 00:00:00 2001 From: Mark Otto <mark.otto@twitter.com> Date: Mon, 31 Oct 2011 21:45:46 -0700 Subject: [PATCH 063/318] remove alt tab styles for now, too complicated to accomplish both static and tabble; fix up CSS a bit --- bootstrap.css | 66 ++++++++++++++++++++++++++++++++++++++++++-- bootstrap.min.css | 13 ++++++--- docs/components.html | 47 +++++-------------------------- lib/patterns.less | 53 ++++++++++++++++++++--------------- 4 files changed, 109 insertions(+), 70 deletions(-) diff --git a/bootstrap.css b/bootstrap.css index 2795e42513..163ee6bcd8 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: Mon Oct 31 19:36:50 PDT 2011 + * Date: Mon Oct 31 21:45:06 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). @@ -1495,17 +1495,77 @@ table .headerSortUp.purple, table .headerSortDown.purple { .tabbable.tabs-bottom .tabs > .active > a, .tabbable.tabs-bottom .tabs > .active > a:hover { border-color: transparent #ddd #ddd #ddd; } +.tabbable.tabs-left, .tabbable.tabs-right { + zoom: 1; +} +.tabbable.tabs-left:before, +.tabbable.tabs-right:before, +.tabbable.tabs-left:after, +.tabbable.tabs-right:after { + display: table; + content: ""; + zoom: 1; + *display: inline; +} +.tabbable.tabs-left:after, .tabbable.tabs-right:after { + clear: both; +} +.tabbable.tabs-left .tabs, .tabbable.tabs-right .tabs { + width: 100px; +} +.tabbable.tabs-left .tabs > li, .tabbable.tabs-right .tabs > li { + float: none; + margin-bottom: -1px; +} +.tabbable.tabs-left .tabs > li > a, .tabbable.tabs-right .tabs > li > a { + margin-bottom: 2px; +} +.tabbable.tabs-left .tabs > li > a:hover, .tabbable.tabs-right .tabs > li > a:hover { + border-color: transparent; +} +.tabbable.tabs-left .tab-content { + margin-left: 100px; +} .tabbable.tabs-left .tabs { float: left; } .tabbable.tabs-left .tabs > li { - float: none; + margin-right: -1px; +} +.tabbable.tabs-left .tabs > li > a { + margin-right: 0; + -webkit-border-radius: 4px 0 0 4px; + -moz-border-radius: 4px 0 0 4px; + border-radius: 4px 0 0 4px; +} +.tabbable.tabs-left .tabs > li > a:hover { + border-right-color: #ddd; +} +.tabbable.tabs-left .tabs .active > a, .tabbable.tabs-left .tabs .active > a:hover { + border-color: #ddd; + border-right-color: transparent; +} +.tabbable.tabs-right .tab-content { + margin-right: 100px; } .tabbable.tabs-right .tabs { float: right; } .tabbable.tabs-right .tabs > li { - float: none; + margin-left: -1px; +} +.tabbable.tabs-right .tabs > li > a { + margin-left: 0; + -webkit-border-radius: 0 4px 4px 0; + -moz-border-radius: 0 4px 4px 0; + border-radius: 0 4px 4px 0; +} +.tabbable.tabs-right .tabs > li > a:hover { + border-left-color: #ddd; +} +.tabbable.tabs-right .tabs .active > a, .tabbable.tabs-right .tabs .active > a:hover { + border-color: #ddd; + border-left-color: transparent; } .tabs .menu-dropdown, .tabs .dropdown-menu { top: 35px; diff --git a/bootstrap.min.css b/bootstrap.min.css index 35f8a9bcd7..9e45659050 100644 --- a/bootstrap.min.css +++ b/bootstrap.min.css @@ -240,10 +240,15 @@ table .headerSortUp.purple,table .headerSortDown.purple{background-color:#e2d5f0 .tabbable.tabs-bottom .tabs>li{margin-top:-1px;margin-bottom:0;} .tabbable.tabs-bottom .tabs>li>a{-webkit-border-radius:0 0 4px 4px;-moz-border-radius:0 0 4px 4px;border-radius:0 0 4px 4px;}.tabbable.tabs-bottom .tabs>li>a:hover{border-bottom-color:transparent;border-top-color:#ddd;} .tabbable.tabs-bottom .tabs>.active>a,.tabbable.tabs-bottom .tabs>.active>a:hover{border-color:transparent #ddd #ddd #ddd;} -.tabbable.tabs-left .tabs{float:left;} -.tabbable.tabs-left .tabs>li{float:none;} -.tabbable.tabs-right .tabs{float:right;} -.tabbable.tabs-right .tabs>li{float:none;} +.tabbable.tabs-left,.tabbable.tabs-right{zoom:1;}.tabbable.tabs-left:before,.tabbable.tabs-right:before,.tabbable.tabs-left:after,.tabbable.tabs-right:after{display:table;content:"";zoom:1;*display:inline;} +.tabbable.tabs-left:after,.tabbable.tabs-right:after{clear:both;} +.tabbable.tabs-left .tabs,.tabbable.tabs-right .tabs{width:100px;}.tabbable.tabs-left .tabs>li,.tabbable.tabs-right .tabs>li{float:none;margin-bottom:-1px;}.tabbable.tabs-left .tabs>li>a,.tabbable.tabs-right .tabs>li>a{margin-bottom:2px;}.tabbable.tabs-left .tabs>li>a:hover,.tabbable.tabs-right .tabs>li>a:hover{border-color:transparent;} +.tabbable.tabs-left .tab-content{margin-left:100px;} +.tabbable.tabs-left .tabs{float:left;}.tabbable.tabs-left .tabs>li{margin-right:-1px;}.tabbable.tabs-left .tabs>li>a{margin-right:0;-webkit-border-radius:4px 0 0 4px;-moz-border-radius:4px 0 0 4px;border-radius:4px 0 0 4px;}.tabbable.tabs-left .tabs>li>a:hover{border-right-color:#ddd;} +.tabbable.tabs-left .tabs .active>a,.tabbable.tabs-left .tabs .active>a:hover{border-color:#ddd;border-right-color:transparent;} +.tabbable.tabs-right .tab-content{margin-right:100px;} +.tabbable.tabs-right .tabs{float:right;}.tabbable.tabs-right .tabs>li{margin-left:-1px;}.tabbable.tabs-right .tabs>li>a{margin-left:0;-webkit-border-radius:0 4px 4px 0;-moz-border-radius:0 4px 4px 0;border-radius:0 4px 4px 0;}.tabbable.tabs-right .tabs>li>a:hover{border-left-color:#ddd;} +.tabbable.tabs-right .tabs .active>a,.tabbable.tabs-right .tabs .active>a:hover{border-color:#ddd;border-left-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;} diff --git a/docs/components.html b/docs/components.html index c18d8c113e..73a0492989 100644 --- a/docs/components.html +++ b/docs/components.html @@ -245,39 +245,6 @@ <li><a href="#">Contact</a></li> </ul> </pre> - <h3>Alternate tabs</h3> - <p>You can also use tabs that are stacked on either side of an element, or on the bottom.</p> - <div class="row"> - <div class="span2"> - <div class="clearfix"> - <ul class="tabs tabs-left"> - <li class="active"><a href="#">Active link</a></li> - <li><a href="#">Link</a></li> - <li><a href="#">Linky link</a></li> - <li><a href="#">What up link</a></li> - </ul> - </div> - </div> - <div class="span2"> - <div class="clearfix"> - <ul class="tabs tabs-right"> - <li class="active"><a href="#">Active link</a></li> - <li><a href="#">Link</a></li> - <li><a href="#">Linky link</a></li> - <li><a href="#">What up link</a></li> - </ul> - </div> - </div> - <div class="span5"> - <div class="clearfix"> - <ul class="tabs tabs-bottom"> - <li class="active"><a href="#">Active link</a></li> - <li><a href="#">Link</a></li> - <li><a href="#">Linky link</a></li> - </ul> - </div> - </div> - </div> <h3>Tabbable tabs</h3> <p>As mentioned above, you can bring your tabs to life with a simple plugin. Here we have integrated all four variations of the tabs—default (top), right, bottom, left—with example tab areas.</p> @@ -315,20 +282,20 @@ <div class="tab-content" id="myTabContent2"> <div class="tab-pane active" id="1"> <h4>Section 1</h4> - <p>Oh hai!</p> + <p>Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Maecenas sed diam eget risus varius blandit sit amet non magna. Vestibulum id ligula porta felis euismod semper.</p> </div> <div class="tab-pane" id="2"> <h4>Section 2</h4> - <p>Oh hai!</p> + <p>Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Maecenas sed diam eget risus varius blandit sit amet non magna. Vestibulum id ligula porta felis euismod semper.</p> </div> <div class="tab-pane" id="3"> <h4>Section 3</h4> - <p>Oh hai!</p> + <p>Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Maecenas sed diam eget risus varius blandit sit amet non magna. Vestibulum id ligula porta felis euismod semper.</p> </div> </div> </div> </div> - <div class="span5"> + <div class="span4 offset1"> <div class="tabbable tabs-right"> <ul class="tabs" data-tabs="tabs"> <li class="active"><a href="#1">Section 1</a></li> @@ -338,15 +305,15 @@ <div class="tab-content" id="myTabContent3"> <div class="tab-pane active" id="1"> <h4>Section 1</h4> - <p>Oh hai!</p> + <p>Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Maecenas sed diam eget risus varius blandit sit amet non magna. Vestibulum id ligula porta felis euismod semper.</p> </div> <div class="tab-pane" id="2"> <h4>Section 2</h4> - <p>Oh hai!</p> + <p>Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Maecenas sed diam eget risus varius blandit sit amet non magna. Vestibulum id ligula porta felis euismod semper.</p> </div> <div class="tab-pane" id="3"> <h4>Section 3</h4> - <p>Oh hai!</p> + <p>Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Maecenas sed diam eget risus varius blandit sit amet non magna. Vestibulum id ligula porta felis euismod semper.</p> </div> </div> </div> diff --git a/lib/patterns.less b/lib/patterns.less index 1db3158313..367347e270 100644 --- a/lib/patterns.less +++ b/lib/patterns.less @@ -378,34 +378,48 @@ border-color: transparent #ddd #ddd #ddd; } - // Tabs on left - &.tabs-left { + // Tabs on left and right + &.tabs-left, + &.tabs-right { .clearfix(); + .tabs { + // Give a fixed width to avoid floating .tab-con + width: 100px; + // Unfloat them so they stack + > li { + float: none; + margin-bottom: -1px; + > a { + margin-bottom: 2px; + &:hover { + border-color: transparent; + } + } + } + } + } + // Tabs on left + &.tabs-left { .tab-content { - float: left; + margin-left: 100px; } .tabs { float: left; - > li { - float: none; - margin-bottom: -1px; margin-right: -1px; > a { margin-right: 0; - margin-bottom: 2px; .border-radius(4px 0 0 4px); &:hover { - border-color: transparent; border-right-color: #ddd; } } } - - > .active > a, - > .active > a:hover { + // Active state + .active > a, + .active > a:hover { border-color: #ddd; border-right-color: transparent; } @@ -414,32 +428,25 @@ // Tabs on right &.tabs-right { - .clearfix(); - .tab-content { - float: right; + margin-right: 100px; } .tabs { float: right; - > li { - float: none; - margin-bottom: -1px; margin-left: -1px; > a { margin-left: 0; - margin-bottom: 2px; - .border-radius(4px 0 0 4px); + .border-radius(0 4px 4px 0); &:hover { - border-color: transparent; border-left-color: #ddd; } } } - - > .active > a, - > .active > a:hover { + // Active state + .active > a, + .active > a:hover { border-color: #ddd; border-left-color: transparent; } -- GitLab From f459f826af827735f8bfea2e850dba1151b19efc Mon Sep 17 00:00:00 2001 From: Mark Otto <mark.otto@twitter.com> Date: Mon, 31 Oct 2011 21:46:45 -0700 Subject: [PATCH 064/318] recompiling and pushing just to be sure --- bootstrap.css | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/bootstrap.css b/bootstrap.css index 163ee6bcd8..2c35362d00 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: Mon Oct 31 21:45:06 PDT 2011 + * Date: Mon Oct 31 21:46:38 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). -- GitLab From 2534fee7538526e2b4e263258fe62953cf08f159 Mon Sep 17 00:00:00 2001 From: Mark Otto <mark.otto@twitter.com> Date: Tue, 1 Nov 2011 13:56:00 -0700 Subject: [PATCH 065/318] adding unofficial github buttons --- docs/assets/css/docs.css | 41 +++++++++++++++++++++++++++- docs/assets/img/github-16px.png | Bin 0 -> 398 bytes docs/index.html | 46 +++++++++++++++++++++++++++++++- 3 files changed, 85 insertions(+), 2 deletions(-) create mode 100644 docs/assets/img/github-16px.png diff --git a/docs/assets/css/docs.css b/docs/assets/css/docs.css index 185f381e92..2dde6a452e 100644 --- a/docs/assets/css/docs.css +++ b/docs/assets/css/docs.css @@ -39,6 +39,44 @@ body > .navbar-fixed .brand:hover { } +/* Github buttons +-------------------------------------------------- */ +.github-btn + .github-btn { + margin-left: 10px; +} +.github-btn { + display: inline-block; + height: 20px; + overflow: hidden; +} +.github-btn .btn, +.github-btn .count { + float: left; + padding: 1px 5px 1px 4px; + font-size: 11px; + font-weight: normal; + line-height: 16px; + color: #555; + -webkit-border-radius: 3px; + -moz-border-radius: 3px; + border-radius: 3px; +} +.github-btn .btn { + box-shadow: none; +} +.github-btn .github-ico { + float: left; + margin-right: 4px; + opacity: .75; +} +.github-btn .count { + display: inline-block; + margin-left: 2px; + background-color: #fff; + border: 1px solid #ddd; +} + + /* Jumbotrons -------------------------------------------------- */ .jumbotron { @@ -59,7 +97,7 @@ body > .navbar-fixed .brand:hover { font-weight: 300; line-height: 36px; } -.jumbotron .btn { +.jumbotron .btn-large { font-size: 20px; padding: 14px 24px; margin-right: 5px; @@ -146,6 +184,7 @@ body > .navbar-fixed .brand:hover { font-weight: normal; color: #999; } +.quick-links .github-btn, .quick-links .tweet-btn, .quick-links .follow-btn { position: relative; diff --git a/docs/assets/img/github-16px.png b/docs/assets/img/github-16px.png new file mode 100644 index 0000000000000000000000000000000000000000..c99ab237a7e77fd149fba63e15e3463b387c0689 GIT binary patch literal 398 zcmV;90df9`P)<h;3K|Lk000e1NJLTq000mG000mO1^@s6AM^iV00009a7bBm000XU z000XU0RWnu7ytkPKuJVFR5%fhlQByJK@dibR;dKRDj);|!PZK!^#|CAAOx&Z+1mOi zY^{VqK(MtH1VIP{(%C5K1QAk*qUd|aj@;_4_`%EV&U~|bvzu$pm9;`@Ii(+YK9sF_ zW{>FzKH)jx*qFJZ+GK_>gF{$@&?*CC=Je?OrE?-zumcwSlr3$89=(}-wJ9vZDfr47 zZ(*FC#*RVHJ!I{S2poVq1I<mCQ+lnb)ZzCP?8{Ssho<6)ttYQFoq2w`;1#_XfCczV zOC<GL({+Km?wGvQ0}W#fGu2x#u@9v-PEw`qRxPA?b<#a18eG6dk0AOUFy4YtkAb)I zEw99@@ro|t0&XA{xMmz`yhf82dH3$V3I17Pf!NKQ9=(<7hqz1R2_~=s9}u$VKA7{v s(p!{g;Eu6-JdK&l)XHZ0<X@lj7XtENzMcd$=>Px#07*qoM6N<$g5G<stN;K2 literal 0 HcmV?d00001 diff --git a/docs/index.html b/docs/index.html index 7b91315029..ffc81596ec 100644 --- a/docs/index.html +++ b/docs/index.html @@ -57,6 +57,7 @@ <a href="#" class="btn primary btn-large">Download on GitHub</a> Currently v2.0.0 </p> + <div class="benefits"> <h4>Feature highlights</h4> <ul> @@ -79,9 +80,29 @@ <li><a href="https://github.com/twitter/bootstrap/wiki/Roadmap">Roadmap</a></li> <li><a href="https://github.com/twitter/bootstrap/wiki/Changelog">Changelog</a></li> <li class="divider">·</li> + <li> + <span class="github-btn github-watchers"> + <a href="https://github.com/twitter/bootstrap" class="btn"> + <img class="github-ico" src="assets/img/github-16px.png"> + Watch + </a> + <span class="count"></span> + </span> + <span class="github-btn github-forks"> + <a href="https://github.com/twitter/bootstrap" class="btn"> + <img class="github-ico" src="assets/img/github-16px.png"> + Fork + </a> + <span class="count"></span> + </span> + </li> + +<!-- <li><strong>Authors</strong></li> <li><a href="http://twitter.com/mdo">@mdo</a></li> <li><a href="http://twitter.com/fat">@fat</a></li> + --> + <li class="divider">·</li> <li class="follow-btn"> <a href="https://twitter.com/twbootstrap" class="twitter-follow-button" data-width="145px" data-link-color="#0069D6" data-show-count="false">Follow @twbootstrap</a><script src="http://platform.twitter.com/widgets.js" type="text/javascript"></script> @@ -200,7 +221,7 @@ <!-- Le javascript --> <!-- Placed at the end of the document so the pages load faster --> - <script src="http://code.jquery.com/jquery-1.5.2.min.js"></script> + <script src="http://code.jquery.com/jquery-1.6.2.min.js"></script> <script src="http://autobahn.tablesorter.com/jquery.tablesorter.min.js"></script> <script src="assets/js/google-code-prettify/prettify.js"></script> <script>$(function () { prettyPrint() })</script> @@ -209,5 +230,28 @@ <script src="../js/bootstrap-twipsy.js"></script> <script src="../js/bootstrap-scrollspy.js"></script> <script src="assets/js/application.js"></script> + + + <script type="text/javascript"> + $(document).ready(function($){ + window.repoCallback = function (obj) { + + // Variables + var watchers = obj['repository']['watchers']; + var forks = obj['repository']['forks']; + + // Echo out the counts in correct elements + $('.github-watchers .count').html(watchers); + $('.github-forks .count').html(forks); + + // Debug log + // console.log("Watchers:" + watchers); + // console.log("Forks:" + forks); + } + $.ajax("http://github.com/api/v2/json/repos/show/twitter/bootstrap?callback=repoCallback", {dataType: "jsonp"}); + }); + + </script> + </body> </html> -- GitLab From 5a702cc6eece2713ac6f6a2f6cbae1b1dd9c5a69 Mon Sep 17 00:00:00 2001 From: Mark Otto <mark.otto@twitter.com> Date: Thu, 3 Nov 2011 17:14:19 -0700 Subject: [PATCH 066/318] no idea --- docs/index.html | 18 ++++++++++++++++-- 1 file changed, 16 insertions(+), 2 deletions(-) diff --git a/docs/index.html b/docs/index.html index ffc81596ec..a78c8bd871 100644 --- a/docs/index.html +++ b/docs/index.html @@ -234,6 +234,20 @@ <script type="text/javascript"> $(document).ready(function($){ + + function addCommas(nStr) { + nStr += ''; + x = nStr.split('.'); + x1 = x[0]; + x2 = x.length > 1 ? '.' + x[1] : ''; + var rgx = /(\d+)(\d{3})/; + while (rgx.test(x1)) { + x1 = x1.replace(rgx, '$1' + ',' + '$2'); + } + return x1 + x2; + } + + // GITHUB window.repoCallback = function (obj) { // Variables @@ -241,8 +255,8 @@ var forks = obj['repository']['forks']; // Echo out the counts in correct elements - $('.github-watchers .count').html(watchers); - $('.github-forks .count').html(forks); + $('.github-watchers .count').html(addCommas(watchers)); + $('.github-forks .count').html(addCommas(forks)); // Debug log // console.log("Watchers:" + watchers); -- GitLab From 4af6dac20ed17c616fbbee7e68b34a37252565e0 Mon Sep 17 00:00:00 2001 From: Silumesii Maboshe <silumesii@pencilcasestudios.com> Date: Mon, 7 Nov 2011 09:06:13 +0200 Subject: [PATCH 067/318] Use 'fluid-container' instead of 'container-fluid' in the docs. --- docs/scaffolding.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/scaffolding.html b/docs/scaffolding.html index de50caf8d8..9a04f7c360 100644 --- a/docs/scaffolding.html +++ b/docs/scaffolding.html @@ -242,7 +242,7 @@ </div> <pre class="prettyprint linenums"> <body> - <div class="container-fluid"> + <div class="fluid-container"> <div class="sidebar"> ... </div> -- GitLab From ae5badc9fbe7bd6fc0724ab84926eaabd5eb130e Mon Sep 17 00:00:00 2001 From: Silumesii Maboshe <silumesii@pencilcasestudios.com> Date: Mon, 7 Nov 2011 09:09:17 +0200 Subject: [PATCH 068/318] Removed the 'View javascript docs' link because it is the page we are currently on. Copy tweak for intro paragraphy of the javascript docs. --- docs/javascript.html | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/docs/javascript.html b/docs/javascript.html index 3175d261e5..bb30cf2137 100644 --- a/docs/javascript.html +++ b/docs/javascript.html @@ -82,8 +82,7 @@ <div class="row"> <div class="span3"> <h2>Getting started</h2> - <p>Integrating javascript with the Bootstrap library is super easy. Below we go over the basics and provide you with some awesome plugins to get you started!</p> - <p><a class="btn primary" href="./javascript.html">View javascript docs »</a></p> + <p>Integrating javascript with the Bootstrap library is super easy. Here we go over the basics and provide you with some awesome plugins to get you started!</p> </div> <div class="span9"> <h3>What's included</h3> -- GitLab From 74dc83f211245dfaf06da9a1b2ad94f51f790be2 Mon Sep 17 00:00:00 2001 From: Raul Riera <rieraraul@gmail.com> Date: Mon, 7 Nov 2011 10:22:28 +0100 Subject: [PATCH 069/318] Added the view port meta tag for proper responsiveness --- docs/base-css.html | 1 + docs/components.html | 1 + docs/index.html | 1 + docs/javascript.html | 1 + docs/less.html | 1 + docs/scaffolding.html | 1 + 6 files changed, 6 insertions(+) diff --git a/docs/base-css.html b/docs/base-css.html index f6030ace1f..03f50f6ff3 100644 --- a/docs/base-css.html +++ b/docs/base-css.html @@ -3,6 +3,7 @@ <head> <meta charset="utf-8"> <title>Bootstrap, from Twitter</title> + <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta name="description" content=""> <meta name="author" content=""> diff --git a/docs/components.html b/docs/components.html index 73a0492989..c03aac613e 100644 --- a/docs/components.html +++ b/docs/components.html @@ -3,6 +3,7 @@ <head> <meta charset="utf-8"> <title>Bootstrap, from Twitter</title> + <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta name="description" content=""> <meta name="author" content=""> diff --git a/docs/index.html b/docs/index.html index 7b91315029..8109b6c956 100644 --- a/docs/index.html +++ b/docs/index.html @@ -3,6 +3,7 @@ <head> <meta charset="utf-8"> <title>Bootstrap, from Twitter</title> + <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta name="description" content=""> <meta name="author" content=""> diff --git a/docs/javascript.html b/docs/javascript.html index 3175d261e5..398b8130b0 100644 --- a/docs/javascript.html +++ b/docs/javascript.html @@ -3,6 +3,7 @@ <head> <meta charset="utf-8"> <title>Bootstrap, from Twitter</title> + <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta name="description" content=""> <meta name="author" content=""> diff --git a/docs/less.html b/docs/less.html index 4fa0f0bdd2..6d3802c3b8 100644 --- a/docs/less.html +++ b/docs/less.html @@ -3,6 +3,7 @@ <head> <meta charset="utf-8"> <title>Bootstrap, from Twitter</title> + <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta name="description" content=""> <meta name="author" content=""> diff --git a/docs/scaffolding.html b/docs/scaffolding.html index de50caf8d8..d0dd6a19be 100644 --- a/docs/scaffolding.html +++ b/docs/scaffolding.html @@ -3,6 +3,7 @@ <head> <meta charset="utf-8"> <title>Bootstrap, from Twitter</title> + <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta name="description" content=""> <meta name="author" content=""> -- GitLab From 0e6cd670ca0619c663c016c08059530b598e15d3 Mon Sep 17 00:00:00 2001 From: Raul Riera <rieraraul@gmail.com> Date: Tue, 8 Nov 2011 20:32:28 +0100 Subject: [PATCH 070/318] Removed trailing backslash :) --- docs/base-css.html | 2 +- docs/components.html | 2 +- docs/index.html | 2 +- docs/javascript.html | 2 +- docs/less.html | 2 +- docs/scaffolding.html | 2 +- 6 files changed, 6 insertions(+), 6 deletions(-) diff --git a/docs/base-css.html b/docs/base-css.html index 03f50f6ff3..51c4d35a3b 100644 --- a/docs/base-css.html +++ b/docs/base-css.html @@ -3,7 +3,7 @@ <head> <meta charset="utf-8"> <title>Bootstrap, from Twitter</title> - <meta name="viewport" content="width=device-width, initial-scale=1.0" /> + <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="description" content=""> <meta name="author" content=""> diff --git a/docs/components.html b/docs/components.html index c03aac613e..bb2f326b46 100644 --- a/docs/components.html +++ b/docs/components.html @@ -3,7 +3,7 @@ <head> <meta charset="utf-8"> <title>Bootstrap, from Twitter</title> - <meta name="viewport" content="width=device-width, initial-scale=1.0" /> + <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="description" content=""> <meta name="author" content=""> diff --git a/docs/index.html b/docs/index.html index 8109b6c956..ae32fa1455 100644 --- a/docs/index.html +++ b/docs/index.html @@ -3,7 +3,7 @@ <head> <meta charset="utf-8"> <title>Bootstrap, from Twitter</title> - <meta name="viewport" content="width=device-width, initial-scale=1.0" /> + <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="description" content=""> <meta name="author" content=""> diff --git a/docs/javascript.html b/docs/javascript.html index 398b8130b0..5426785884 100644 --- a/docs/javascript.html +++ b/docs/javascript.html @@ -3,7 +3,7 @@ <head> <meta charset="utf-8"> <title>Bootstrap, from Twitter</title> - <meta name="viewport" content="width=device-width, initial-scale=1.0" /> + <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="description" content=""> <meta name="author" content=""> diff --git a/docs/less.html b/docs/less.html index 6d3802c3b8..c76be9a5d1 100644 --- a/docs/less.html +++ b/docs/less.html @@ -3,7 +3,7 @@ <head> <meta charset="utf-8"> <title>Bootstrap, from Twitter</title> - <meta name="viewport" content="width=device-width, initial-scale=1.0" /> + <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="description" content=""> <meta name="author" content=""> diff --git a/docs/scaffolding.html b/docs/scaffolding.html index d0dd6a19be..87995de9d6 100644 --- a/docs/scaffolding.html +++ b/docs/scaffolding.html @@ -3,7 +3,7 @@ <head> <meta charset="utf-8"> <title>Bootstrap, from Twitter</title> - <meta name="viewport" content="width=device-width, initial-scale=1.0" /> + <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="description" content=""> <meta name="author" content=""> -- GitLab From 1fb98bed91977b710ae321443d0819939a1a8cc7 Mon Sep 17 00:00:00 2001 From: Mark Otto <mark.otto@twitter.com> Date: Sat, 12 Nov 2011 00:46:02 -0800 Subject: [PATCH 071/318] updated docs pages (still wip), adding misc css classes, added form styles from 1.4, added github buttons to homepage --- bootstrap.css | 80 +++++++++++++++++++--------- bootstrap.min.css | 14 +++-- docs/assets/css/docs.css | 7 +-- docs/assets/img/less-logo-large.png | Bin 0 -> 13831 bytes docs/less.html | 73 ++++++++++++++++++++++++- lib/forms.less | 72 ++++++++++++------------- lib/mixins.less | 2 +- lib/patterns.less | 10 ++++ 8 files changed, 190 insertions(+), 68 deletions(-) create mode 100644 docs/assets/img/less-logo-large.png diff --git a/bootstrap.css b/bootstrap.css index 2c35362d00..71712829f0 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: Mon Oct 31 21:46:38 PDT 2011 + * Date: Mon Nov 7 21:14:04 PST 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). @@ -763,33 +763,59 @@ textarea[readonly] { border-color: #ddd; cursor: not-allowed; } -.has-error { - background: #f8dcda; - padding: 9px 0; - margin: -10px 0 10px; - -webkit-border-radius: 4px; - -moz-border-radius: 4px; - border-radius: 4px; +form .clearfix.error > label, form .clearfix.error .help-block, form .clearfix.error .help-inline { + color: #b94a48; } -.has-error > label, .has-error span.help-inline, .has-error span.help-block { - color: #9d261d; +form .clearfix.error input, form .clearfix.error textarea { + color: #b94a48; + border-color: #ee5f5b; +} +form .clearfix.error input:focus, form .clearfix.error textarea:focus { + border-color: #e9322d; + -webkit-box-shadow: 0 0 6px #f8b9b7; + -moz-box-shadow: 0 0 6px #f8b9b7; + box-shadow: 0 0 6px #f8b9b7; +} +form .clearfix.error .input-prepend .add-on, form .clearfix.error .input-append .add-on { + color: #b94a48; + background-color: #fce6e6; + border-color: #b94a48; +} +form .clearfix.warning > label, form .clearfix.warning .help-block, form .clearfix.warning .help-inline { + color: #c09853; +} +form .clearfix.warning input, form .clearfix.warning textarea { + color: #c09853; + border-color: #ccae64; +} +form .clearfix.warning input:focus, form .clearfix.warning textarea:focus { + border-color: #be9a3f; + -webkit-box-shadow: 0 0 6px #e5d6b1; + -moz-box-shadow: 0 0 6px #e5d6b1; + box-shadow: 0 0 6px #e5d6b1; } -.has-error input, .has-error textarea, .has-error select { - 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 .clearfix.warning .input-prepend .add-on, form .clearfix.warning .input-append .add-on { + color: #c09853; + background-color: #d2b877; + border-color: #c09853; } -.has-error input:focus, .has-error textarea:focus, .has-error select: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 .clearfix.success > label, form .clearfix.success .help-block, form .clearfix.success .help-inline { + color: #468847; } -.has-error .input-prepend span.add-on, .has-error .input-append span.add-on { - background: #f4c8c5; - border-color: #c87872; - color: #b9554d; +form .clearfix.success input, form .clearfix.success textarea { + color: #468847; + border-color: #57a957; +} +form .clearfix.success input:focus, form .clearfix.success textarea:focus { + border-color: #458845; + -webkit-box-shadow: 0 0 6px #9acc9a; + -moz-box-shadow: 0 0 6px #9acc9a; + box-shadow: 0 0 6px #9acc9a; +} +form .clearfix.success .input-prepend .add-on, form .clearfix.success .input-append .add-on { + color: #468847; + background-color: #bcddbc; + border-color: #468847; } .form-actions { padding: 17px 20px 18px; @@ -2377,6 +2403,12 @@ button.btn::-moz-focus-inner, input[type=submit].btn::-moz-focus-inner { -moz-box-shadow: 0 1px 4px rgba(0, 105, 214, 0.25); box-shadow: 0 1px 4px rgba(0, 105, 214, 0.25); } +.pull-right { + float: right; +} +.pull-left { + float: left; +} /* Responsive.less * For phone and tablet devices * ------------------------------------------------------------- */ diff --git a/bootstrap.min.css b/bootstrap.min.css index 9e45659050..04badb14ec 100644 --- a/bootstrap.min.css +++ b/bootstrap.min.css @@ -127,9 +127,15 @@ input.span14,textarea.span14,select.span14{display:inline-block;float:none;width input.span15,textarea.span15,select.span15{display:inline-block;float:none;width:1450px;margin-left:0;} input.span16,textarea.span16,select.span16{display:inline-block;float:none;width:1550px;margin-left:0;} input[disabled],select[disabled],textarea[disabled],input[readonly],select[readonly],textarea[readonly]{background-color:#f5f5f5;border-color:#ddd;cursor:not-allowed;} -.has-error{background:#f8dcda;padding:9px 0;margin:-10px 0 10px;-webkit-border-radius:4px;-moz-border-radius:4px;border-radius:4px;}.has-error>label,.has-error span.help-inline,.has-error span.help-block{color:#9d261d;} -.has-error input,.has-error textarea,.has-error select{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);}.has-error input:focus,.has-error textarea:focus,.has-error select: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);} -.has-error .input-prepend span.add-on,.has-error .input-append span.add-on{background:#f4c8c5;border-color:#c87872;color:#b9554d;} +form .clearfix.error>label,form .clearfix.error .help-block,form .clearfix.error .help-inline{color:#b94a48;} +form .clearfix.error input,form .clearfix.error textarea{color:#b94a48;border-color:#ee5f5b;}form .clearfix.error input:focus,form .clearfix.error textarea:focus{border-color:#e9322d;-webkit-box-shadow:0 0 6px #f8b9b7;-moz-box-shadow:0 0 6px #f8b9b7;box-shadow:0 0 6px #f8b9b7;} +form .clearfix.error .input-prepend .add-on,form .clearfix.error .input-append .add-on{color:#b94a48;background-color:#fce6e6;border-color:#b94a48;} +form .clearfix.warning>label,form .clearfix.warning .help-block,form .clearfix.warning .help-inline{color:#c09853;} +form .clearfix.warning input,form .clearfix.warning textarea{color:#c09853;border-color:#ccae64;}form .clearfix.warning input:focus,form .clearfix.warning textarea:focus{border-color:#be9a3f;-webkit-box-shadow:0 0 6px #e5d6b1;-moz-box-shadow:0 0 6px #e5d6b1;box-shadow:0 0 6px #e5d6b1;} +form .clearfix.warning .input-prepend .add-on,form .clearfix.warning .input-append .add-on{color:#c09853;background-color:#d2b877;border-color:#c09853;} +form .clearfix.success>label,form .clearfix.success .help-block,form .clearfix.success .help-inline{color:#468847;} +form .clearfix.success input,form .clearfix.success textarea{color:#468847;border-color:#57a957;}form .clearfix.success input:focus,form .clearfix.success textarea:focus{border-color:#458845;-webkit-box-shadow:0 0 6px #9acc9a;-moz-box-shadow:0 0 6px #9acc9a;box-shadow:0 0 6px #9acc9a;} +form .clearfix.success .input-prepend .add-on,form .clearfix.success .input-append .add-on{color:#468847;background-color:#bcddbc;border-color:#468847;} .form-actions{padding:17px 20px 18px;margin-top:18px;margin-bottom:18px;background-color:#f5f5f5;border-top:1px solid #ddd;} .uneditable-input{background-color:#ffffff;display:block;border-color:#eee;-webkit-box-shadow:inset 0 1px 2px rgba(0, 0, 0, 0.025);-moz-box-shadow:inset 0 1px 2px rgba(0, 0, 0, 0.025);box-shadow:inset 0 1px 2px rgba(0, 0, 0, 0.025);cursor:not-allowed;} :-moz-placeholder{color:#bfbfbf;} @@ -343,4 +349,6 @@ button.btn::-moz-focus-inner,input[type=submit].btn::-moz-focus-inner{padding:0; .media-grid li{display:inline;} .media-grid a{float:left;padding:4px;margin:0 0 20px 20px;border:1px solid #ddd;-webkit-border-radius:4px;-moz-border-radius:4px;border-radius:4px;-webkit-box-shadow:0 1px 1px rgba(0, 0, 0, 0.075);-moz-box-shadow:0 1px 1px rgba(0, 0, 0, 0.075);box-shadow:0 1px 1px rgba(0, 0, 0, 0.075);}.media-grid a img{display:block;} .media-grid a:hover{border-color:#0069d6;-webkit-box-shadow:0 1px 4px rgba(0, 105, 214, 0.25);-moz-box-shadow:0 1px 4px rgba(0, 105, 214, 0.25);box-shadow:0 1px 4px rgba(0, 105, 214, 0.25);} +.pull-right{float:right;} +.pull-left{float:left;} @media (max-width: 480px){.container{width:auto;padding:0 15px;} .row{margin-left:0;} [class*="span"]{float:none;display:block;width:auto;margin:0;} .modal{width:auto;margin:0;} .form-horizontal .control-group>label{float:none;width:auto;padding-top:0;text-align:left;} .form-horizontal .controls{margin-left:0;} .form-horizontal .control-list{padding-top:0;} .form-horizontal .form-actions{padding-left:0;}}@media (min-width: 480px) and (max-width: 768px){.container{width:auto;padding:0 10px;} .row{margin-left:0;} [class*="span"]{float:none;display:block;width:auto;margin:0;}}@media (min-width: 768px) and (max-width: 940px){.container{width:748px;} .span1{width:44px;} .span2{width:108px;} .span3{width:172px;} .span4{width:236px;} .span5{width:300px;} .span6{width:364px;} .span7{width:428px;} .span8{width:492px;} .span9{width:556px;} .span10{width:620px;} .span11{width:684px;} .span12{width:748px;} .offset1{margin-left:64px;} .offset2{margin-left:128px;} .offset3{margin-left:192px;} .offset4{margin-left:256px;} .offset5{margin-left:320px;} .offset6{margin-left:384px;} .offset7{margin-left:448px;} .offset8{margin-left:512px;} .offset9{margin-left:576px;} .offset10{margin-left:640px;} .offset11{margin-left:704px;} .offset12{margin-left:768px;}} diff --git a/docs/assets/css/docs.css b/docs/assets/css/docs.css index 2dde6a452e..b503c23e43 100644 --- a/docs/assets/css/docs.css +++ b/docs/assets/css/docs.css @@ -54,9 +54,10 @@ body > .navbar-fixed .brand:hover { float: left; padding: 1px 5px 1px 4px; font-size: 11px; - font-weight: normal; + font-weight: bold; line-height: 16px; - color: #555; + color: #666; + text-shadow: 0 1px 0 #fff; -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px; @@ -67,7 +68,7 @@ body > .navbar-fixed .brand:hover { .github-btn .github-ico { float: left; margin-right: 4px; - opacity: .75; + opacity: .65; } .github-btn .count { display: inline-block; diff --git a/docs/assets/img/less-logo-large.png b/docs/assets/img/less-logo-large.png new file mode 100644 index 0000000000000000000000000000000000000000..1a739b3e9903d8c023ade58af038277b60719d5a GIT binary patch literal 13831 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 JPDHLkV1g`~`5XWM literal 0 HcmV?d00001 diff --git a/docs/less.html b/docs/less.html index 4fa0f0bdd2..108ec35df6 100644 --- a/docs/less.html +++ b/docs/less.html @@ -48,11 +48,82 @@ <!-- Masthead ================================================== --> <header class="jumbotron subhead" id="overview"> - <h1>Using LESS</h1> + <h1>Using LESS with Bootstrap</h1> <p class="lead">Be a boss and use Bootstrap's built-in variables, mixins, and more via LESS</p> </header> + + <!-- BUILT WITH LESS + ================================================== --> + <div class="page-header"> + <h1>Built with LESS</h1> + </div> + <div class="row"> + <div class="span4"> + <h3>Why LESS?</h3> + <p>Bootstrap is made with LESS at it's core, a dynamic stylesheet language created by Alexis Sellier. It makes developing systems-based CSS faster, easier, and more fun.</p> + </div> + <div class="span4"> + <h3>What's included?</h3> + <p>As an extension of CSS, LESS includes variables, mixins for reusable snippets of code, operations for simple math, nesting, and even color functions.</p> + </div> + <div class="span4"> + <h3>Learn more</h3> + <img style="float: right; height: 36px;" src="assets/img/less-logo-large.png" alt="LESS CSS"> + <p>Visit the official website at http://lesscss.org to learn more.</p> + </div> + </div> + <div class="row"> + <div class="span4"> + <h3>Variables</h3> + <p>Managing colors and pixel values in CSS can be a bit of a pain, usually full of copy and paste. Not with LESS though—assign colors or pixel values as variables and change them once.</p> + </div> + <div class="span4"> + <h3>Mixins</h3> + <p>Those three border-radius declarations you need to make in regular ol' CSS? Now they're down to one line with the help of mixins, snippets of code you can reuse anywhere.</p> + </div> + <div class="span4"> + <h3>Operations</h3> + <p>Make your grid, leading, and more super flexible by doing the math on the fly with operations. Multiple, divide, add, and subtract your way to CSS sanity.</p> + </div> + </div> + + + + <!-- VARIABLES + ================================================== --> + <div class="page-header" id="variables"> + <h1>Variables</h1> + </div> + + + + <!-- MIXINS + ================================================== --> + <div class="page-header" id="mixins"> + <h1>Mixins</h1> + </div> + + + + <!-- OPERATIONS + ================================================== --> + <div class="page-header" id="operations"> + <h1>Operations</h1> + </div> + + + + <!-- COMPILING LESS AND BOOTSTRAP + ================================================== --> + <div class="page-header" id="compiling"> + <h1>Compiling LESS and Bootstrap</h1> + </div> + + + + <!-- Using Bootstrap w/ Less ================================================== --> <section id="less"> diff --git a/lib/forms.less b/lib/forms.less index 6edf29e536..b7eb150059 100644 --- a/lib/forms.less +++ b/lib/forms.less @@ -3,6 +3,7 @@ * ------------------------------------------------------------- */ + // GENERAL STYLES // -------------- @@ -84,6 +85,7 @@ input[type=submit] { height: auto; } +// Set the height of select and file controls to match text inputs select, input[type=file] { height: @baseLineHeight * 1.5; // In IE7, the height of the select element cannot be changed by height, only font-size @@ -188,42 +190,47 @@ textarea[readonly] { -// ERROR STATE -// ----------- - -// Set color of error text -@error-text: desaturate(lighten(@red, 25%), 25%); +// FORM FIELD FEEDBACK STATES +// -------------------------- -// Style the background of control-groups with errors -.has-error { - background: lighten(@red, 55%); - padding: (@baseLineHeight / 2) 0; - margin: -10px 0 10px; - .border-radius(4px); +// Mixin for form field states +.formFieldState(@textColor: #555, @borderColor: #ccc, @backgroundColor: #f5f5f5) { + // Set the text color > label, - span.help-inline, - span.help-block { - color: @red; + .help-block, + .help-inline { + color: @textColor; } + // Style inputs accordingly input, - textarea, - select { - border-color: @error-text; - .box-shadow(0 0 3px rgba(171,41,32,.25)); + textarea { + color: @textColor; + border-color: @borderColor; &:focus { - border-color: darken(@error-text, 10%); - .box-shadow(0 0 6px rgba(171,41,32,.5)); + border-color: darken(@borderColor, 10%); + .box-shadow(0 0 6px lighten(@borderColor, 20%); } } - .input-prepend, - .input-append { - span.add-on { - background: lighten(@red, 50%); - border-color: @error-text; - color: darken(@error-text, 10%); - } + // Give a small background color for input-prepend/-append + .input-prepend .add-on, + .input-append .add-on { + color: @textColor; + background-color: @backgroundColor; + border-color: @textColor; } } +// Error +form .clearfix.error { + .formFieldState(#b94a48, #ee5f5b, lighten(#ee5f5b, 30%)); +} +// Warning +form .clearfix.warning { + .formFieldState(#c09853, #ccae64, lighten(#CCAE64, 5%)); +} +// Success +form .clearfix.success { + .formFieldState(#468847, #57a957, lighten(#57a957, 30%)); +} @@ -238,7 +245,6 @@ textarea[readonly] { border-top: 1px solid #ddd; } - // For text that needs to appear as an input but should not be an input .uneditable-input { background-color: @white; @@ -281,6 +287,7 @@ textarea[readonly] { } + // INLINE FIELDS // ------------- @@ -301,6 +308,7 @@ textarea[readonly] { } + // INPUT GROUPS // ------------ @@ -353,7 +361,6 @@ textarea[readonly] { - // SEARCH FORM // ----------- @@ -366,7 +373,6 @@ textarea[readonly] { // HORIZONTAL & VERTICAL FORMS // --------------------------- - // Common properties // ----------------- @@ -374,17 +380,11 @@ textarea[readonly] { .control-group { margin-bottom: @baseLineHeight; } - // Bold the labels so they stand out .control-group > label { font-weight: bold; } -// Lists of controls (checkboxes and radios) -.control-list { -} - - // Horizontal-specific styles // -------------------------- diff --git a/lib/mixins.less b/lib/mixins.less index 6d034cbcc6..1d2c68856e 100644 --- a/lib/mixins.less +++ b/lib/mixins.less @@ -139,7 +139,7 @@ // Transform for scale and rotate // translate, rotate, scale -- need to finalize -.rotation(@degrees: 5deg) { +.rotate(@degrees: 5deg) { -webkit-transform: rotate(@degrees); -moz-transform: rotate(@degrees); -ms-transform: rotate(@degrees); diff --git a/lib/patterns.less b/lib/patterns.less index 367347e270..618b90840f 100644 --- a/lib/patterns.less +++ b/lib/patterns.less @@ -1151,3 +1151,13 @@ input[type=submit].btn { } } } + + +// MISC +// ---- +.pull-right { + float: right; +} +.pull-left { + float: left; +} \ No newline at end of file -- GitLab From 275da020c275b2eb76ef28a1d210b6e6340e4e6e Mon Sep 17 00:00:00 2001 From: Jon Stevens <latchkey@gmail.com> Date: Wed, 16 Nov 2011 11:10:27 -0800 Subject: [PATCH 072/318] added condensed example --- docs/base-css.html | 38 +++++++++++++++++++++++++++++++++++++- 1 file changed, 37 insertions(+), 1 deletion(-) diff --git a/docs/base-css.html b/docs/base-css.html index 51c4d35a3b..c8ce7b2228 100644 --- a/docs/base-css.html +++ b/docs/base-css.html @@ -630,7 +630,43 @@ <table class="striped-table"> ... </table></pre> - <h3>3. Striped table w/ TableSorter.js</h3> + <h3>3. Condensed table</h3> + <p>Make your tables smaller—just add the <code>.condensed-table</code> class.</p> + <table class="condensed-table"> + <thead> + <tr> + <th>#</th> + <th>First Name</th> + <th>Last Name</th> + <th>Language</th> + </tr> + </thead> + <tbody> + <tr> + <td>1</td> + <td>Some</td> + <td>One</td> + <td>English</td> + </tr> + <tr> + <td>2</td> + <td>Joe</td> + <td>Sixpack</td> + <td>English</td> + </tr> + <tr> + <td>3</td> + <td>Stu</td> + <td>Dent</td> + <td>Code</td> + </tr> + </tbody> + </table> +<pre class="prettyprint linenums"> +<table class="condensed-table"> +... +</table></pre> + <h3>4. Striped table w/ TableSorter.js</h3> <p>Taking the previous example, we improve the usefulness of our tables by providing sorting functionality via <a href="http://jquery.com">jQuery</a> and the <a href="http://tablesorter.com/docs/">Tablesorter</a> plugin. <strong>Click any column’s header to change the sort.</strong></p> <table class="striped-table" id="sortTableExample"> <thead> -- GitLab From a0179322854a9d1e2b9363447c9884e40733d04f Mon Sep 17 00:00:00 2001 From: Mark Otto <mark.otto@twitter.com> Date: Wed, 16 Nov 2011 23:58:36 -0800 Subject: [PATCH 073/318] start breaking down patterns.less into more distinct files, update docs for forms to use correct classes --- bootstrap.css | 604 +++++++++++++++++++++---------------------- bootstrap.min.css | 78 +++--- docs/base-css.html | 8 +- docs/less.html | 197 +++++++++++++- lib/bootstrap.less | 10 + lib/breadcrumbs.less | 22 ++ lib/media-grids.less | 26 ++ lib/mixins.less | 39 ++- lib/modals.less | 60 +++++ lib/pagination.less | 40 +++ lib/patterns.less | 483 ---------------------------------- lib/popovers.less | 45 ++++ lib/tabs-pills.less | 221 ++++++++++++++++ lib/twipsy.less | 33 +++ 14 files changed, 1035 insertions(+), 831 deletions(-) create mode 100644 lib/breadcrumbs.less create mode 100644 lib/media-grids.less create mode 100644 lib/modals.less create mode 100644 lib/pagination.less create mode 100644 lib/popovers.less create mode 100644 lib/tabs-pills.less create mode 100644 lib/twipsy.less diff --git a/bootstrap.css b/bootstrap.css index 71712829f0..c59d499546 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: Mon Nov 7 21:14:04 PST 2011 + * Date: Wed Nov 16 23:58:14 PST 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). @@ -1440,238 +1440,6 @@ table .headerSortUp.purple, table .headerSortDown.purple { .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 { - border-color: #ddd; - border-style: solid; - border-width: 0 0 1px; -} -.tabs > li { - position: relative; - margin-bottom: -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 .active > a, .tabs .active > a:hover { - color: #808080; - background-color: #ffffff; - border: 1px solid #ddd; - border-bottom-color: transparent; - cursor: default; -} -.tabbable { - margin-bottom: 18px; -} -.tabbable .tabs { - margin-bottom: 0; - border-bottom: 0; -} -.tabbable .tab-content { - padding: 19px; - border: 1px solid #ddd; -} -.tabbable.tabs-bottom .tabs > li { - margin-top: -1px; - margin-bottom: 0; -} -.tabbable.tabs-bottom .tabs > li > a { - -webkit-border-radius: 0 0 4px 4px; - -moz-border-radius: 0 0 4px 4px; - border-radius: 0 0 4px 4px; -} -.tabbable.tabs-bottom .tabs > li > a:hover { - border-bottom-color: transparent; - border-top-color: #ddd; -} -.tabbable.tabs-bottom .tabs > .active > a, .tabbable.tabs-bottom .tabs > .active > a:hover { - border-color: transparent #ddd #ddd #ddd; -} -.tabbable.tabs-left, .tabbable.tabs-right { - zoom: 1; -} -.tabbable.tabs-left:before, -.tabbable.tabs-right:before, -.tabbable.tabs-left:after, -.tabbable.tabs-right:after { - display: table; - content: ""; - zoom: 1; - *display: inline; -} -.tabbable.tabs-left:after, .tabbable.tabs-right:after { - clear: both; -} -.tabbable.tabs-left .tabs, .tabbable.tabs-right .tabs { - width: 100px; -} -.tabbable.tabs-left .tabs > li, .tabbable.tabs-right .tabs > li { - float: none; - margin-bottom: -1px; -} -.tabbable.tabs-left .tabs > li > a, .tabbable.tabs-right .tabs > li > a { - margin-bottom: 2px; -} -.tabbable.tabs-left .tabs > li > a:hover, .tabbable.tabs-right .tabs > li > a:hover { - border-color: transparent; -} -.tabbable.tabs-left .tab-content { - margin-left: 100px; -} -.tabbable.tabs-left .tabs { - float: left; -} -.tabbable.tabs-left .tabs > li { - margin-right: -1px; -} -.tabbable.tabs-left .tabs > li > a { - margin-right: 0; - -webkit-border-radius: 4px 0 0 4px; - -moz-border-radius: 4px 0 0 4px; - border-radius: 4px 0 0 4px; -} -.tabbable.tabs-left .tabs > li > a:hover { - border-right-color: #ddd; -} -.tabbable.tabs-left .tabs .active > a, .tabbable.tabs-left .tabs .active > a:hover { - border-color: #ddd; - border-right-color: transparent; -} -.tabbable.tabs-right .tab-content { - margin-right: 100px; -} -.tabbable.tabs-right .tabs { - float: right; -} -.tabbable.tabs-right .tabs > li { - margin-left: -1px; -} -.tabbable.tabs-right .tabs > li > a { - margin-left: 0; - -webkit-border-radius: 0 4px 4px 0; - -moz-border-radius: 0 4px 4px 0; - border-radius: 0 4px 4px 0; -} -.tabbable.tabs-right .tabs > li > a:hover { - border-left-color: #ddd; -} -.tabbable.tabs-right .tabs .active > a, .tabbable.tabs-right .tabs .active > a:hover { - border-color: #ddd; - border-left-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; -} -.pills a { - margin: 5px 3px 5px 0; - padding: 0 15px; - line-height: 30px; - text-shadow: 0 1px 1px #ffffff; - -webkit-border-radius: 15px; - -moz-border-radius: 15px; - border-radius: 15px; -} -.pills a:hover { - color: #ffffff; - text-decoration: none; - text-shadow: 0 1px 1px rgba(0, 0, 0, 0.25); - background-color: #00438a; -} -.pills .active a { - color: #ffffff; - text-shadow: 0 1px 1px rgba(0, 0, 0, 0.25); - background-color: #0069d6; -} -.pills-vertical > li { - float: none; -} -.tab-content > .tab-pane, .pill-content > .pill-pane { - display: none; -} -.tab-content > .active, .pill-content > .active { - display: block; -} -.breadcrumb { - margin: 0 0 18px; - padding: 7px 14px; - background-color: #f5f5f5; - 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); - background-repeat: repeat-x; - 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; @@ -2038,18 +1806,308 @@ button.btn::-moz-focus-inner, input[type=submit].btn::-moz-focus-inner { background-color: #ddf4fb; border-color: #c6edf9; } -.pagination { - height: 36px; - margin: 18px 0; +.well { + background-color: #f5f5f5; + margin-bottom: 20px; + padding: 19px; + min-height: 20px; + border: 1px solid #eee; + border: 1px solid rgba(0, 0, 0, 0.05); + -webkit-border-radius: 4px; + -moz-border-radius: 4px; + border-radius: 4px; + -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.05); + -moz-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.05); + box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.05); } -.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; +.well blockquote { + border-color: #ddd; + border-color: rgba(0, 0, 0, 0.15); +} +.fade { + -webkit-transition: opacity 0.15s linear; + -moz-transition: opacity 0.15s linear; + -ms-transition: opacity 0.15s linear; + -o-transition: opacity 0.15s linear; + transition: opacity 0.15s linear; + opacity: 0; +} +.fade.in { + opacity: 1; +} +.label { + padding: 1px 3px 2px; + background-color: #bfbfbf; + font-size: 9.75px; + font-weight: bold; + color: #ffffff; + text-transform: uppercase; + -webkit-border-radius: 3px; + -moz-border-radius: 3px; + border-radius: 3px; +} +.label.important { + background-color: #c43c35; +} +.label.warning { + background-color: #f89406; +} +.label.success { + background-color: #46a546; +} +.label.notice { + background-color: #62cffc; +} +.pull-right { + float: right; +} +.pull-left { + float: left; +} +.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 { + border-color: #ddd; + border-style: solid; + border-width: 0 0 1px; +} +.tabs > li { + position: relative; + margin-bottom: -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 .active > a, .tabs .active > a:hover { + color: #808080; + background-color: #ffffff; + border: 1px solid #ddd; + border-bottom-color: transparent; + cursor: default; +} +.tabbable { + margin-bottom: 18px; +} +.tabbable .tabs { + margin-bottom: 0; + border-bottom: 0; +} +.tabbable .tab-content { + padding: 19px; + border: 1px solid #ddd; +} +.tabbable.tabs-bottom .tabs > li { + margin-top: -1px; + margin-bottom: 0; +} +.tabbable.tabs-bottom .tabs > li > a { + -webkit-border-radius: 0 0 4px 4px; + -moz-border-radius: 0 0 4px 4px; + border-radius: 0 0 4px 4px; +} +.tabbable.tabs-bottom .tabs > li > a:hover { + border-bottom-color: transparent; + border-top-color: #ddd; +} +.tabbable.tabs-bottom .tabs > .active > a, .tabbable.tabs-bottom .tabs > .active > a:hover { + border-color: transparent #ddd #ddd #ddd; +} +.tabbable.tabs-left, .tabbable.tabs-right { + zoom: 1; +} +.tabbable.tabs-left:before, +.tabbable.tabs-right:before, +.tabbable.tabs-left:after, +.tabbable.tabs-right:after { + display: table; + content: ""; + zoom: 1; + *display: inline; +} +.tabbable.tabs-left:after, .tabbable.tabs-right:after { + clear: both; +} +.tabbable.tabs-left .tabs, .tabbable.tabs-right .tabs { + width: 100px; +} +.tabbable.tabs-left .tabs > li, .tabbable.tabs-right .tabs > li { + float: none; + margin-bottom: -1px; +} +.tabbable.tabs-left .tabs > li > a, .tabbable.tabs-right .tabs > li > a { + margin-bottom: 2px; +} +.tabbable.tabs-left .tabs > li > a:hover, .tabbable.tabs-right .tabs > li > a:hover { + border-color: transparent; +} +.tabbable.tabs-left .tab-content { + margin-left: 100px; +} +.tabbable.tabs-left .tabs { + float: left; +} +.tabbable.tabs-left .tabs > li { + margin-right: -1px; +} +.tabbable.tabs-left .tabs > li > a { + margin-right: 0; + -webkit-border-radius: 4px 0 0 4px; + -moz-border-radius: 4px 0 0 4px; + border-radius: 4px 0 0 4px; +} +.tabbable.tabs-left .tabs > li > a:hover { + border-right-color: #ddd; +} +.tabbable.tabs-left .tabs .active > a, .tabbable.tabs-left .tabs .active > a:hover { + border-color: #ddd; + border-right-color: transparent; +} +.tabbable.tabs-right .tab-content { + margin-right: 100px; +} +.tabbable.tabs-right .tabs { + float: right; +} +.tabbable.tabs-right .tabs > li { + margin-left: -1px; +} +.tabbable.tabs-right .tabs > li > a { + margin-left: 0; + -webkit-border-radius: 0 4px 4px 0; + -moz-border-radius: 0 4px 4px 0; + border-radius: 0 4px 4px 0; +} +.tabbable.tabs-right .tabs > li > a:hover { + border-left-color: #ddd; +} +.tabbable.tabs-right .tabs .active > a, .tabbable.tabs-right .tabs .active > a:hover { + border-color: #ddd; + border-left-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; +} +.pills a { + margin: 5px 3px 5px 0; + padding: 0 15px; + line-height: 30px; + text-shadow: 0 1px 1px #ffffff; + -webkit-border-radius: 15px; + -moz-border-radius: 15px; + border-radius: 15px; +} +.pills a:hover { + color: #ffffff; + text-decoration: none; + text-shadow: 0 1px 1px rgba(0, 0, 0, 0.25); + background-color: #00438a; +} +.pills .active a { + color: #ffffff; + text-shadow: 0 1px 1px rgba(0, 0, 0, 0.25); + background-color: #0069d6; +} +.pills-vertical > li { + float: none; +} +.tab-content > .tab-pane, .pill-content > .pill-pane { + display: none; +} +.tab-content > .active, .pill-content > .active { + display: block; +} +.breadcrumb { + margin: 0 0 18px; + padding: 7px 14px; + background-color: #f5f5f5; + 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); + background-repeat: repeat-x; + 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; +} +.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); @@ -2079,24 +2137,6 @@ button.btn::-moz-focus-inner, input[type=submit].btn::-moz-focus-inner { .pagination .next a { border: 0; } -.well { - background-color: #f5f5f5; - margin-bottom: 20px; - padding: 19px; - min-height: 20px; - border: 1px solid #eee; - border: 1px solid rgba(0, 0, 0, 0.05); - -webkit-border-radius: 4px; - -moz-border-radius: 4px; - border-radius: 4px; - -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.05); - -moz-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.05); - box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.05); -} -.well blockquote { - border-color: #ddd; - border-color: rgba(0, 0, 0, 0.15); -} .modal-backdrop { background-color: #000000; position: fixed; @@ -2331,40 +2371,6 @@ button.btn::-moz-focus-inner, input[type=submit].btn::-moz-focus-inner { .popover .content p, .popover .content ul, .popover .content ol { margin-bottom: 0; } -.fade { - -webkit-transition: opacity 0.15s linear; - -moz-transition: opacity 0.15s linear; - -ms-transition: opacity 0.15s linear; - -o-transition: opacity 0.15s linear; - transition: opacity 0.15s linear; - opacity: 0; -} -.fade.in { - opacity: 1; -} -.label { - padding: 1px 3px 2px; - background-color: #bfbfbf; - font-size: 9.75px; - font-weight: bold; - color: #ffffff; - text-transform: uppercase; - -webkit-border-radius: 3px; - -moz-border-radius: 3px; - border-radius: 3px; -} -.label.important { - background-color: #c43c35; -} -.label.warning { - background-color: #f89406; -} -.label.success { - background-color: #46a546; -} -.label.notice { - background-color: #62cffc; -} .media-grid { margin-left: -20px; margin-bottom: 0; @@ -2403,12 +2409,6 @@ button.btn::-moz-focus-inner, input[type=submit].btn::-moz-focus-inner { -moz-box-shadow: 0 1px 4px rgba(0, 105, 214, 0.25); box-shadow: 0 1px 4px rgba(0, 105, 214, 0.25); } -.pull-right { - float: right; -} -.pull-left { - float: left; -} /* Responsive.less * For phone and tablet devices * ------------------------------------------------------------- */ diff --git a/bootstrap.min.css b/bootstrap.min.css index 04badb14ec..e236547a61 100644 --- a/bootstrap.min.css +++ b/bootstrap.min.css @@ -236,37 +236,6 @@ table .headerSortUp.purple,table .headerSortDown.purple{background-color:#e2d5f0 .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-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);background-repeat:repeat-x;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);} .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{border-color:#ddd;border-style:solid;border-width:0 0 1px;}.tabs>li{position:relative;margin-bottom:-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 .active>a,.tabs .active>a:hover{color:#808080;background-color:#ffffff;border:1px solid #ddd;border-bottom-color:transparent;cursor:default;} -.tabbable{margin-bottom:18px;}.tabbable .tabs{margin-bottom:0;border-bottom:0;} -.tabbable .tab-content{padding:19px;border:1px solid #ddd;} -.tabbable.tabs-bottom .tabs>li{margin-top:-1px;margin-bottom:0;} -.tabbable.tabs-bottom .tabs>li>a{-webkit-border-radius:0 0 4px 4px;-moz-border-radius:0 0 4px 4px;border-radius:0 0 4px 4px;}.tabbable.tabs-bottom .tabs>li>a:hover{border-bottom-color:transparent;border-top-color:#ddd;} -.tabbable.tabs-bottom .tabs>.active>a,.tabbable.tabs-bottom .tabs>.active>a:hover{border-color:transparent #ddd #ddd #ddd;} -.tabbable.tabs-left,.tabbable.tabs-right{zoom:1;}.tabbable.tabs-left:before,.tabbable.tabs-right:before,.tabbable.tabs-left:after,.tabbable.tabs-right:after{display:table;content:"";zoom:1;*display:inline;} -.tabbable.tabs-left:after,.tabbable.tabs-right:after{clear:both;} -.tabbable.tabs-left .tabs,.tabbable.tabs-right .tabs{width:100px;}.tabbable.tabs-left .tabs>li,.tabbable.tabs-right .tabs>li{float:none;margin-bottom:-1px;}.tabbable.tabs-left .tabs>li>a,.tabbable.tabs-right .tabs>li>a{margin-bottom:2px;}.tabbable.tabs-left .tabs>li>a:hover,.tabbable.tabs-right .tabs>li>a:hover{border-color:transparent;} -.tabbable.tabs-left .tab-content{margin-left:100px;} -.tabbable.tabs-left .tabs{float:left;}.tabbable.tabs-left .tabs>li{margin-right:-1px;}.tabbable.tabs-left .tabs>li>a{margin-right:0;-webkit-border-radius:4px 0 0 4px;-moz-border-radius:4px 0 0 4px;border-radius:4px 0 0 4px;}.tabbable.tabs-left .tabs>li>a:hover{border-right-color:#ddd;} -.tabbable.tabs-left .tabs .active>a,.tabbable.tabs-left .tabs .active>a:hover{border-color:#ddd;border-right-color:transparent;} -.tabbable.tabs-right .tab-content{margin-right:100px;} -.tabbable.tabs-right .tabs{float:right;}.tabbable.tabs-right .tabs>li{margin-left:-1px;}.tabbable.tabs-right .tabs>li>a{margin-left:0;-webkit-border-radius:0 4px 4px 0;-moz-border-radius:0 4px 4px 0;border-radius:0 4px 4px 0;}.tabbable.tabs-right .tabs>li>a:hover{border-left-color:#ddd;} -.tabbable.tabs-right .tabs .active>a,.tabbable.tabs-right .tabs .active>a:hover{border-color:#ddd;border-left-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;} -.pills a{margin:5px 3px 5px 0;padding:0 15px;line-height:30px;text-shadow:0 1px 1px #ffffff;-webkit-border-radius:15px;-moz-border-radius:15px;border-radius:15px;}.pills a:hover{color:#ffffff;text-decoration:none;text-shadow:0 1px 1px rgba(0, 0, 0, 0.25);background-color:#00438a;} -.pills .active a{color:#ffffff;text-shadow:0 1px 1px rgba(0, 0, 0, 0.25);background-color:#0069d6;} -.pills-vertical>li{float:none;} -.tab-content>.tab-pane,.pill-content>.pill-pane{display:none;} -.tab-content>.active,.pill-content>.active{display:block;} -.breadcrumb{margin:0 0 18px;padding:7px 14px;background-color:#f5f5f5;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);background-repeat:repeat-x;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;} @@ -307,13 +276,51 @@ 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;} +.well{background-color:#f5f5f5;margin-bottom:20px;padding:19px;min-height:20px;border:1px solid #eee;border:1px solid rgba(0, 0, 0, 0.05);-webkit-border-radius:4px;-moz-border-radius:4px;border-radius:4px;-webkit-box-shadow:inset 0 1px 1px rgba(0, 0, 0, 0.05);-moz-box-shadow:inset 0 1px 1px rgba(0, 0, 0, 0.05);box-shadow:inset 0 1px 1px rgba(0, 0, 0, 0.05);}.well blockquote{border-color:#ddd;border-color:rgba(0, 0, 0, 0.15);} +.fade{-webkit-transition:opacity 0.15s linear;-moz-transition:opacity 0.15s linear;-ms-transition:opacity 0.15s linear;-o-transition:opacity 0.15s linear;transition:opacity 0.15s linear;opacity:0;}.fade.in{opacity:1;} +.label{padding:1px 3px 2px;background-color:#bfbfbf;font-size:9.75px;font-weight:bold;color:#ffffff;text-transform:uppercase;-webkit-border-radius:3px;-moz-border-radius:3px;border-radius:3px;}.label.important{background-color:#c43c35;} +.label.warning{background-color:#f89406;} +.label.success{background-color:#46a546;} +.label.notice{background-color:#62cffc;} +.pull-right{float:right;} +.pull-left{float:left;} +.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{border-color:#ddd;border-style:solid;border-width:0 0 1px;}.tabs>li{position:relative;margin-bottom:-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 .active>a,.tabs .active>a:hover{color:#808080;background-color:#ffffff;border:1px solid #ddd;border-bottom-color:transparent;cursor:default;} +.tabbable{margin-bottom:18px;}.tabbable .tabs{margin-bottom:0;border-bottom:0;} +.tabbable .tab-content{padding:19px;border:1px solid #ddd;} +.tabbable.tabs-bottom .tabs>li{margin-top:-1px;margin-bottom:0;} +.tabbable.tabs-bottom .tabs>li>a{-webkit-border-radius:0 0 4px 4px;-moz-border-radius:0 0 4px 4px;border-radius:0 0 4px 4px;}.tabbable.tabs-bottom .tabs>li>a:hover{border-bottom-color:transparent;border-top-color:#ddd;} +.tabbable.tabs-bottom .tabs>.active>a,.tabbable.tabs-bottom .tabs>.active>a:hover{border-color:transparent #ddd #ddd #ddd;} +.tabbable.tabs-left,.tabbable.tabs-right{zoom:1;}.tabbable.tabs-left:before,.tabbable.tabs-right:before,.tabbable.tabs-left:after,.tabbable.tabs-right:after{display:table;content:"";zoom:1;*display:inline;} +.tabbable.tabs-left:after,.tabbable.tabs-right:after{clear:both;} +.tabbable.tabs-left .tabs,.tabbable.tabs-right .tabs{width:100px;}.tabbable.tabs-left .tabs>li,.tabbable.tabs-right .tabs>li{float:none;margin-bottom:-1px;}.tabbable.tabs-left .tabs>li>a,.tabbable.tabs-right .tabs>li>a{margin-bottom:2px;}.tabbable.tabs-left .tabs>li>a:hover,.tabbable.tabs-right .tabs>li>a:hover{border-color:transparent;} +.tabbable.tabs-left .tab-content{margin-left:100px;} +.tabbable.tabs-left .tabs{float:left;}.tabbable.tabs-left .tabs>li{margin-right:-1px;}.tabbable.tabs-left .tabs>li>a{margin-right:0;-webkit-border-radius:4px 0 0 4px;-moz-border-radius:4px 0 0 4px;border-radius:4px 0 0 4px;}.tabbable.tabs-left .tabs>li>a:hover{border-right-color:#ddd;} +.tabbable.tabs-left .tabs .active>a,.tabbable.tabs-left .tabs .active>a:hover{border-color:#ddd;border-right-color:transparent;} +.tabbable.tabs-right .tab-content{margin-right:100px;} +.tabbable.tabs-right .tabs{float:right;}.tabbable.tabs-right .tabs>li{margin-left:-1px;}.tabbable.tabs-right .tabs>li>a{margin-left:0;-webkit-border-radius:0 4px 4px 0;-moz-border-radius:0 4px 4px 0;border-radius:0 4px 4px 0;}.tabbable.tabs-right .tabs>li>a:hover{border-left-color:#ddd;} +.tabbable.tabs-right .tabs .active>a,.tabbable.tabs-right .tabs .active>a:hover{border-color:#ddd;border-left-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;} +.pills a{margin:5px 3px 5px 0;padding:0 15px;line-height:30px;text-shadow:0 1px 1px #ffffff;-webkit-border-radius:15px;-moz-border-radius:15px;border-radius:15px;}.pills a:hover{color:#ffffff;text-decoration:none;text-shadow:0 1px 1px rgba(0, 0, 0, 0.25);background-color:#00438a;} +.pills .active a{color:#ffffff;text-shadow:0 1px 1px rgba(0, 0, 0, 0.25);background-color:#0069d6;} +.pills-vertical>li{float:none;} +.tab-content>.tab-pane,.pill-content>.pill-pane{display:none;} +.tab-content>.active,.pill-content>.active{display:block;} +.breadcrumb{margin:0 0 18px;padding:7px 14px;background-color:#f5f5f5;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);background-repeat:repeat-x;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;} .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 li{display:inline;} .pagination 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 a:hover,.pagination .active a{background-color:#c7eefe;} .pagination .disabled a,.pagination .disabled a:hover{background-color:transparent;color:#bfbfbf;} .pagination .next a{border:0;} -.well{background-color:#f5f5f5;margin-bottom:20px;padding:19px;min-height:20px;border:1px solid #eee;border:1px solid rgba(0, 0, 0, 0.05);-webkit-border-radius:4px;-moz-border-radius:4px;border-radius:4px;-webkit-box-shadow:inset 0 1px 1px rgba(0, 0, 0, 0.05);-moz-box-shadow:inset 0 1px 1px rgba(0, 0, 0, 0.05);box-shadow:inset 0 1px 1px rgba(0, 0, 0, 0.05);}.well blockquote{border-color:#ddd;border-color:rgba(0, 0, 0, 0.15);} .modal-backdrop{background-color:#000000;position:fixed;top:0;left:0;right:0;bottom:0;z-index:10000;}.modal-backdrop.fade{opacity:0;} .modal-backdrop,.modal-backdrop.fade.in{filter:alpha(opacity=80);-khtml-opacity:0.8;-moz-opacity:0.8;opacity:0.8;} .modal{position:fixed;top:50%;left:50%;z-index:11000;width:560px;margin:-250px 0 0 -250px;background-color:#ffffff;border:1px solid #999;border:1px solid rgba(0, 0, 0, 0.3);*border:1px solid #999;-webkit-border-radius:6px;-moz-border-radius:6px;border-radius:6px;-webkit-box-shadow:0 3px 7px rgba(0, 0, 0, 0.3);-moz-box-shadow:0 3px 7px rgba(0, 0, 0, 0.3);box-shadow:0 3px 7px rgba(0, 0, 0, 0.3);-webkit-background-clip:padding-box;-moz-background-clip:padding-box;background-clip:padding-box;}.modal .close{margin-top:7px;} @@ -339,16 +346,9 @@ button.btn::-moz-focus-inner,input[type=submit].btn::-moz-focus-inner{padding:0; .popover .inner{background-color:#000000;background-color:rgba(0, 0, 0, 0.8);padding:3px;overflow:hidden;width:280px;-webkit-border-radius:6px;-moz-border-radius:6px;border-radius:6px;-webkit-box-shadow:0 3px 7px rgba(0, 0, 0, 0.3);-moz-box-shadow:0 3px 7px rgba(0, 0, 0, 0.3);box-shadow:0 3px 7px rgba(0, 0, 0, 0.3);} .popover .title{background-color:#f5f5f5;padding:9px 15px;line-height:1;-webkit-border-radius:3px 3px 0 0;-moz-border-radius:3px 3px 0 0;border-radius:3px 3px 0 0;border-bottom:1px solid #eee;} .popover .content{background-color:#ffffff;padding:14px;-webkit-border-radius:0 0 3px 3px;-moz-border-radius:0 0 3px 3px;border-radius:0 0 3px 3px;-webkit-background-clip:padding-box;-moz-background-clip:padding-box;background-clip:padding-box;}.popover .content p,.popover .content ul,.popover .content ol{margin-bottom:0;} -.fade{-webkit-transition:opacity 0.15s linear;-moz-transition:opacity 0.15s linear;-ms-transition:opacity 0.15s linear;-o-transition:opacity 0.15s linear;transition:opacity 0.15s linear;opacity:0;}.fade.in{opacity:1;} -.label{padding:1px 3px 2px;background-color:#bfbfbf;font-size:9.75px;font-weight:bold;color:#ffffff;text-transform:uppercase;-webkit-border-radius:3px;-moz-border-radius:3px;border-radius:3px;}.label.important{background-color:#c43c35;} -.label.warning{background-color:#f89406;} -.label.success{background-color:#46a546;} -.label.notice{background-color:#62cffc;} .media-grid{margin-left:-20px;margin-bottom:0;zoom:1;}.media-grid:before,.media-grid:after{display:table;content:"";zoom:1;*display:inline;} .media-grid:after{clear:both;} .media-grid li{display:inline;} .media-grid a{float:left;padding:4px;margin:0 0 20px 20px;border:1px solid #ddd;-webkit-border-radius:4px;-moz-border-radius:4px;border-radius:4px;-webkit-box-shadow:0 1px 1px rgba(0, 0, 0, 0.075);-moz-box-shadow:0 1px 1px rgba(0, 0, 0, 0.075);box-shadow:0 1px 1px rgba(0, 0, 0, 0.075);}.media-grid a img{display:block;} .media-grid a:hover{border-color:#0069d6;-webkit-box-shadow:0 1px 4px rgba(0, 105, 214, 0.25);-moz-box-shadow:0 1px 4px rgba(0, 105, 214, 0.25);box-shadow:0 1px 4px rgba(0, 105, 214, 0.25);} -.pull-right{float:right;} -.pull-left{float:left;} @media (max-width: 480px){.container{width:auto;padding:0 15px;} .row{margin-left:0;} [class*="span"]{float:none;display:block;width:auto;margin:0;} .modal{width:auto;margin:0;} .form-horizontal .control-group>label{float:none;width:auto;padding-top:0;text-align:left;} .form-horizontal .controls{margin-left:0;} .form-horizontal .control-list{padding-top:0;} .form-horizontal .form-actions{padding-left:0;}}@media (min-width: 480px) and (max-width: 768px){.container{width:auto;padding:0 10px;} .row{margin-left:0;} [class*="span"]{float:none;display:block;width:auto;margin:0;}}@media (min-width: 768px) and (max-width: 940px){.container{width:748px;} .span1{width:44px;} .span2{width:108px;} .span3{width:172px;} .span4{width:236px;} .span5{width:300px;} .span6{width:364px;} .span7{width:428px;} .span8{width:492px;} .span9{width:556px;} .span10{width:620px;} .span11{width:684px;} .span12{width:748px;} .offset1{margin-left:64px;} .offset2{margin-left:128px;} .offset3{margin-left:192px;} .offset4{margin-left:256px;} .offset5{margin-left:320px;} .offset6{margin-left:384px;} .offset7{margin-left:448px;} .offset8{margin-left:512px;} .offset9{margin-left:576px;} .offset10{margin-left:640px;} .offset11{margin-left:704px;} .offset12{margin-left:768px;}} diff --git a/docs/base-css.html b/docs/base-css.html index 51c4d35a3b..9c1af11c4e 100644 --- a/docs/base-css.html +++ b/docs/base-css.html @@ -696,22 +696,22 @@ <tbody> <tr> <th>Vertical (default)</th> - <td><code>.vertical-form</code> <span class="muted">(not required)</span></td> + <td><code>.form-vertical</code> <span class="muted">(not required)</span></td> <td>Stacked, left-aligned labels over controls</td> </tr> <tr> <th>Horiztonal</th> - <td><code>.horizontal-form</code></td> + <td><code>.form-horizontal</code></td> <td>Float left, right-aligned labels on same line as controls</td> </tr> <tr> <th>Inline</th> - <td><code>.inline-form</code></td> + <td><code>.form-inline</code></td> <td>Left-aligned label and inline-block controls for compact style</td> </tr> <tr> <th>Search</th> - <td><code>.search-form</code></td> + <td><code>.form-search</code></td> <td>Extra-rounded text input for a typical search aesthetic</td> </tr> </tbody> diff --git a/docs/less.html b/docs/less.html index fccd5b9a46..2d35eea267 100644 --- a/docs/less.html +++ b/docs/less.html @@ -95,15 +95,208 @@ <!-- VARIABLES ================================================== --> <div class="page-header" id="variables"> - <h1>Variables</h1> + <h1>Variables <small>from variables.less</small></h1> </div> + <div class="row"> + <div class="span3"> + <h3>Hyperlinks</h3> + </div> + <div class="span9"> + <table class="bordered-table striped-table"> + <thead> + <tr> + <th>Variable</th> + <th>Value</th> + <th>Usage</th> + </tr> + </thead> + <tbody> + <tr> + <td><code>@linkColor</code></td> + <td>#0069d6</td> + <td>Default link text color</td> + </tr> + <tr> + <td><code>@linkColorHover</code></td> + <td><code>darken(@linkColor, 15)</code></td> + <td>Default link text hover color</td> + </tr> + </tbody> + </table> + </div> + </div> + + <div class="row"> + <div class="span3"> + <h3>Grayscale colors</h3> + </div> + <div class="span9"> + <table class="bordered-table striped-table"> + <tbody> + <tr> + <td><code>@black</code></td> + <td>#000</td> + <td>Black</td> + </tr> + <tr> + <td><code>@grayDark</code></td> + <td><code>lighten(@black, 25%)</code></td> + <td>Dark gray</td> + </tr> + <tr> + <td><code>@gray</code></td> + <td><code>lighten(@black, 50%)</code></td> + <td>Medium gray</td> + </tr> + <tr> + <td><code>@grayLight</code></td> + <td><code>lighten(@black, 75%)</code></td> + <td>Light gray</td> + </tr> + <tr> + <td><code>@grayLighter</code></td> + <td><code>lighten(@black, 90%)</code></td> + <td>Lighter gray</td> + </tr> + <tr> + <td><code>@white</code></td> + <td>#fff</td> + <td>White</td> + </tr> + </tbody> + </table> + </div> + </div> + + <div class="row"> + <div class="span3"> + <h3>Accent colors</h3> + </div> + <div class="span9"> + <table class="bordered-table striped-table"> + <tbody> + <tr> + <td><code>@blue</code></td> + <td>#049CDB</td> + <td></td> + </tr> + <tr> + <td><code>@green</code></td> + <td>#46a546</td> + <td></td> + </tr> + <tr> + <td><code>@red</code></td> + <td>#9d261d</td> + <td></td> + </tr> + <tr> + <td><code>@yellow</code></td> + <td>#ffc40d</td> + <td></td> + </tr> + <tr> + <td><code>@orange</code></td> + <td>#f89406</td> + <td></td> + </tr> + <tr> + <td><code>@pink</code></td> + <td>#c3325f</td> + <td></td> + </tr> + <tr> + <td><code>@purple</code></td> + <td>#7a43b6</td> + <td></td> + </tr> + </tbody> + </table> + </div> + </div> + + <div class="row"> + <div class="span3"> + <h3>Grid system</h3> + </div> + <div class="span9"> + <table class="bordered-table striped-table"> + <tbody> + <tr> + <td><code>@gridColumns</code></td> + <td>12</td> + <td></td> + </tr> + <tr> + <td><code>@gridColumnWidth</code></td> + <td>60px</td> + <td></td> + </tr> + <tr> + <td><code>@gridGutterWidth</code></td> + <td>20px</td> + <td></td> + </tr> + <tr> + <td><code>@siteWidth</code></td> + <td><code>(@gridColumns * @gridColumnWidth) + (@gridGutterWidth * (@gridColumns - 1))</code></td> + <td></td> + </tr> + </tbody> + </table> + </div> + </div> + + <div class="row"> + <div class="span3"> + <h3>Typography</h3> + </div> + <div class="span9"> + <table class="bordered-table striped-table"> + <tbody> + <tr> + <td><code>@baseFontSize</code></td> + <td>13px</td> + <td></td> + </tr> + <tr> + <td><code>@baseFontFamily</code></td> + <td><code>"Helvetica Neue", Helvetica, Arial, sans-serif</code></td> + <td></td> + </tr> + <tr> + <td><code>@baseLineHeight</code></td> + <td>18px</td> + <td></td> + </tr> + </tbody> + </table> + </div> + </div> + + <div class="row"> + <div class="span3"> + <h3>Visuals</h3> + </div> + <div class="span9"> + <table class="bordered-table striped-table"> + <tbody> + <tr> + <td><code>@primaryButtonColor</code></td> + <td><code>@blue</code></td> + <td></td> + </tr> + </tbody> + </table> + </div> + </div> <!-- MIXINS ================================================== --> <div class="page-header" id="mixins"> - <h1>Mixins</h1> + <h1>Mixins <small>from mixins.less</small></h1> </div> diff --git a/lib/bootstrap.less b/lib/bootstrap.less index 9665306fd5..ffad359130 100644 --- a/lib/bootstrap.less +++ b/lib/bootstrap.less @@ -23,7 +23,17 @@ @import "type.less"; @import "forms.less"; @import "tables.less"; + +// Temp catchall for what's missing thus far @import "patterns.less"; +@import "tabs-pills.less"; +@import "breadcrumbs.less"; +@import "pagination.less"; +@import "modals.less"; +@import "twipsy.less"; +@import "popovers.less"; +@import "media-grids.less"; + // Responsive @import "responsive.less"; \ No newline at end of file diff --git a/lib/breadcrumbs.less b/lib/breadcrumbs.less new file mode 100644 index 0000000000..89a7aef13a --- /dev/null +++ b/lib/breadcrumbs.less @@ -0,0 +1,22 @@ +// BREADCRUMBS +// ----------- + +.breadcrumb { + margin: 0 0 @baseLineHeight; + padding: 7px 14px; + #gradient > .vertical(#ffffff, #f5f5f5); + border: 1px solid #ddd; + .border-radius(3px); + .box-shadow(inset 0 1px 0 @white); + li { + display: inline; + text-shadow: 0 1px 0 @white; + } + .divider { + padding: 0 5px; + color: @grayLight; + } + .active a { + color: @grayDark; + } +} diff --git a/lib/media-grids.less b/lib/media-grids.less new file mode 100644 index 0000000000..7ceade651b --- /dev/null +++ b/lib/media-grids.less @@ -0,0 +1,26 @@ +// MEDIA GRIDS +// ----------- + +.media-grid { + margin-left: -20px; + margin-bottom: 0; + .clearfix(); + li { + display: inline; + } + a { + float: left; + padding: 4px; + margin: 0 0 20px 20px; + border: 1px solid #ddd; + .border-radius(4px); + .box-shadow(0 1px 1px rgba(0,0,0,.075)); + img { + display: block; + } + &:hover { + border-color: @linkColor; + .box-shadow(0 1px 4px rgba(0,105,214,.25)); + } + } +} diff --git a/lib/mixins.less b/lib/mixins.less index 1d2c68856e..b8565bbdcc 100644 --- a/lib/mixins.less +++ b/lib/mixins.less @@ -272,4 +272,41 @@ -khtml-opacity: @opacity / 100; -moz-opacity: @opacity / 100; opacity: @opacity / 100; -} \ No newline at end of file +} + +// Popover arrows +// For tipsies and popovers +#popoverArrow { + .above(@arrowWidth: 5px) { + bottom: 0; + left: 50%; + margin-left: -@arrowWidth; + border-left: @arrowWidth solid transparent; + border-right: @arrowWidth solid transparent; + border-top: @arrowWidth solid @black; + } + .left(@arrowWidth: 5px) { + top: 50%; + right: 0; + margin-top: -@arrowWidth; + border-top: @arrowWidth solid transparent; + border-bottom: @arrowWidth solid transparent; + border-left: @arrowWidth solid @black; + } + .below(@arrowWidth: 5px) { + top: 0; + left: 50%; + margin-left: -@arrowWidth; + border-left: @arrowWidth solid transparent; + border-right: @arrowWidth solid transparent; + border-bottom: @arrowWidth solid @black; + } + .right(@arrowWidth: 5px) { + top: 50%; + left: 0; + margin-top: -@arrowWidth; + border-top: @arrowWidth solid transparent; + border-bottom: @arrowWidth solid transparent; + border-right: @arrowWidth solid @black; + } +} diff --git a/lib/modals.less b/lib/modals.less new file mode 100644 index 0000000000..672431beb6 --- /dev/null +++ b/lib/modals.less @@ -0,0 +1,60 @@ +// MODALS +// ------ + +.modal-backdrop { + background-color: @black; + position: fixed; + top: 0; + left: 0; + right: 0; + bottom: 0; + z-index: 10000; + // Fade for backdrop + &.fade { opacity: 0; } +} + +.modal-backdrop, .modal-backdrop.fade.in { + .opacity(80); +} + +.modal { + position: fixed; + top: 50%; + left: 50%; + z-index: 11000; + width: 560px; + margin: -250px 0 0 -250px; + background-color: @white; + border: 1px solid #999; + border: 1px solid rgba(0,0,0,.3); + *border: 1px solid #999; /* IE6-7 */ + .border-radius(6px); + .box-shadow(0 3px 7px rgba(0,0,0,0.3)); + .background-clip(padding-box); + .close { margin-top: 7px; } + &.fade { + .transition(e('opacity .3s linear, top .3s ease-out')); + top: -25%; + } + &.fade.in { top: 50%; } +} +.modal-header { + border-bottom: 1px solid #eee; + padding: 5px 15px; +} +.modal-body { + padding: 15px; +} +.modal-footer { + background-color: #f5f5f5; + padding: 14px 15px 15px; + border-top: 1px solid #ddd; + .border-radius(0 0 6px 6px); + .box-shadow(inset 0 1px 0 @white); + .clearfix(); + margin-bottom: 0; + .btn { + float: right; + margin-left: 5px; + } +} diff --git a/lib/pagination.less b/lib/pagination.less new file mode 100644 index 0000000000..d97a1bab3b --- /dev/null +++ b/lib/pagination.less @@ -0,0 +1,40 @@ +// PAGINATION +// ---------- + +.pagination { + height: @baseLineHeight * 2; + margin: @baseLineHeight 0; + ul { + float: left; + margin: 0; + border: 1px solid #ddd; + border: 1px solid rgba(0,0,0,.15); + .border-radius(3px); + .box-shadow(0 1px 2px rgba(0,0,0,.05)); + } + li { + display: inline; + } + a { + float: left; + padding: 0 14px; + line-height: (@baseLineHeight * 2) - 2; + border-right: 1px solid; + border-right-color: #ddd; + border-right-color: rgba(0,0,0,.15); + *border-right-color: #ddd; /* IE6-7 */ + text-decoration: none; + } + a:hover, + .active a { + background-color: lighten(@blue, 45%); + } + .disabled a, + .disabled a:hover { + background-color: transparent; + color: @grayLight; + } + .next a { + border: 0; + } +} diff --git a/lib/patterns.less b/lib/patterns.less index 618b90840f..bc1229bd90 100644 --- a/lib/patterns.less +++ b/lib/patterns.less @@ -301,251 +301,8 @@ } -// Tabs and Pills -.tabs, -.pills { - margin: 0 0 20px; - padding: 0; - list-style: none; - .clearfix(); - > li { - float: left; - > a { - display: block; - } - } -} - -// Tabs -.tabs { - border-color: #ddd; - border-style: solid; - border-width: 0 0 1px; - > li { - position: relative; // For the dropdowns mostly - margin-bottom: -1px; - > a { - padding: 0 15px; - margin-right: 2px; - line-height: @baseLineHeight * 2; - border: 1px solid transparent; - .border-radius(4px 4px 0 0); - &:hover { - text-decoration: none; - background-color: #eee; - border-color: #eee #eee #ddd; - } - } - } - // Active state, and it's :hover to override normal :hover - .active > a, - .active > a:hover { - color: @gray; - background-color: @white; - border: 1px solid #ddd; - border-bottom-color: transparent; - cursor: default; - } -} - -.tabbable { - margin-bottom: @baseLineHeight; - - // Tabs on top - .tabs { - margin-bottom: 0; - border-bottom: 0; - } - .tab-content { - padding: 19px; - border: 1px solid #ddd; - } - - // Tabs on bottom - &.tabs-bottom .tabs > li { - margin-top: -1px; - margin-bottom: 0; - } - &.tabs-bottom .tabs > li > a { - .border-radius(0 0 4px 4px); - &:hover { - border-bottom-color: transparent; - border-top-color: #ddd; - } - } - &.tabs-bottom .tabs > .active > a, - &.tabs-bottom .tabs > .active > a:hover { - border-color: transparent #ddd #ddd #ddd; - } - - // Tabs on left and right - &.tabs-left, - &.tabs-right { - .clearfix(); - .tabs { - // Give a fixed width to avoid floating .tab-con - width: 100px; - // Unfloat them so they stack - > li { - float: none; - margin-bottom: -1px; - > a { - margin-bottom: 2px; - &:hover { - border-color: transparent; - } - } - } - } - } - - // Tabs on left - &.tabs-left { - .tab-content { - margin-left: 100px; - } - .tabs { - float: left; - > li { - margin-right: -1px; - > a { - margin-right: 0; - .border-radius(4px 0 0 4px); - - &:hover { - border-right-color: #ddd; - } - } - } - // Active state - .active > a, - .active > a:hover { - border-color: #ddd; - border-right-color: transparent; - } - } - } - - // Tabs on right - &.tabs-right { - .tab-content { - margin-right: 100px; - } - .tabs { - float: right; - > li { - margin-left: -1px; - > a { - margin-left: 0; - .border-radius(0 4px 4px 0); - - &:hover { - border-left-color: #ddd; - } - } - } - // Active state - .active > a, - .active > a:hover { - border-color: #ddd; - border-left-color: transparent; - } - } - } -} - -// Dropdowns in tabs -.tabs { - // 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; - } -} -// Pills -.pills { - a { - margin: 5px 3px 5px 0; - padding: 0 15px; - line-height: 30px; - text-shadow: 0 1px 1px @white; - .border-radius(15px); - &:hover { - color: @white; - text-decoration: none; - text-shadow: 0 1px 1px rgba(0,0,0,.25); - background-color: @linkColorHover; - } - } - .active a { - color: @white; - text-shadow: 0 1px 1px rgba(0,0,0,.25); - background-color: @linkColor; - } -} - -// Stacked pills -.pills-vertical > li { - float: none; -} - -// Tabbable areas -.tab-content, -.pill-content { -} -.tab-content > .tab-pane, -.pill-content > .pill-pane { - display: none; -} -.tab-content > .active, -.pill-content > .active { - display: block; -} - - -// BREADCRUMBS -// ----------- - -.breadcrumb { - margin: 0 0 @baseLineHeight; - padding: 7px 14px; - #gradient > .vertical(#ffffff, #f5f5f5); - border: 1px solid #ddd; - .border-radius(3px); - .box-shadow(inset 0 1px 0 @white); - li { - display: inline; - text-shadow: 0 1px 0 @white; - } - .divider { - padding: 0 5px; - color: @grayLight; - } - .active a { - color: @grayDark; - } -} // PAGE HEADERS @@ -852,46 +609,6 @@ input[type=submit].btn { } -// PAGINATION -// ---------- - -.pagination { - height: @baseLineHeight * 2; - margin: @baseLineHeight 0; - ul { - float: left; - margin: 0; - border: 1px solid #ddd; - border: 1px solid rgba(0,0,0,.15); - .border-radius(3px); - .box-shadow(0 1px 2px rgba(0,0,0,.05)); - } - li { - display: inline; - } - a { - float: left; - padding: 0 14px; - line-height: (@baseLineHeight * 2) - 2; - border-right: 1px solid; - border-right-color: #ddd; - border-right-color: rgba(0,0,0,.15); - *border-right-color: #ddd; /* IE6-7 */ - text-decoration: none; - } - a:hover, - .active a { - background-color: lighten(@blue, 45%); - } - .disabled a, - .disabled a:hover { - background-color: transparent; - color: @grayLight; - } - .next a { - border: 0; - } -} // WELLS @@ -913,186 +630,12 @@ input[type=submit].btn { } -// MODALS -// ------ - -.modal-backdrop { - background-color: @black; - position: fixed; - top: 0; - left: 0; - right: 0; - bottom: 0; - z-index: 10000; - // Fade for backdrop - &.fade { opacity: 0; } -} - -.modal-backdrop, .modal-backdrop.fade.in { - .opacity(80); -} - -.modal { - position: fixed; - top: 50%; - left: 50%; - z-index: 11000; - width: 560px; - margin: -250px 0 0 -250px; - background-color: @white; - border: 1px solid #999; - border: 1px solid rgba(0,0,0,.3); - *border: 1px solid #999; /* IE6-7 */ - .border-radius(6px); - .box-shadow(0 3px 7px rgba(0,0,0,0.3)); - .background-clip(padding-box); - .close { margin-top: 7px; } - &.fade { - .transition(e('opacity .3s linear, top .3s ease-out')); - top: -25%; - } - &.fade.in { top: 50%; } -} -.modal-header { - border-bottom: 1px solid #eee; - padding: 5px 15px; -} -.modal-body { - padding: 15px; -} -.modal-footer { - background-color: #f5f5f5; - padding: 14px 15px 15px; - border-top: 1px solid #ddd; - .border-radius(0 0 6px 6px); - .box-shadow(inset 0 1px 0 @white); - .clearfix(); - margin-bottom: 0; - .btn { - float: right; - margin-left: 5px; - } -} - - -// POPOVER ARROWS -// -------------- -#popoverArrow { - .above(@arrowWidth: 5px) { - bottom: 0; - left: 50%; - margin-left: -@arrowWidth; - border-left: @arrowWidth solid transparent; - border-right: @arrowWidth solid transparent; - border-top: @arrowWidth solid @black; - } - .left(@arrowWidth: 5px) { - top: 50%; - right: 0; - margin-top: -@arrowWidth; - border-top: @arrowWidth solid transparent; - border-bottom: @arrowWidth solid transparent; - border-left: @arrowWidth solid @black; - } - .below(@arrowWidth: 5px) { - top: 0; - left: 50%; - margin-left: -@arrowWidth; - border-left: @arrowWidth solid transparent; - border-right: @arrowWidth solid transparent; - border-bottom: @arrowWidth solid @black; - } - .right(@arrowWidth: 5px) { - top: 50%; - left: 0; - margin-top: -@arrowWidth; - border-top: @arrowWidth solid transparent; - border-bottom: @arrowWidth solid transparent; - border-right: @arrowWidth solid @black; - } -} -// TWIPSY -// ------ -.twipsy { - display: block; - position: absolute; - visibility: visible; - padding: 5px; - font-size: 11px; - z-index: 1000; - .opacity(80); - &.fade.in { - .opacity(80); - } - &.above .twipsy-arrow { #popoverArrow > .above(); } - &.left .twipsy-arrow { #popoverArrow > .left(); } - &.below .twipsy-arrow { #popoverArrow > .below(); } - &.right .twipsy-arrow { #popoverArrow > .right(); } -} -.twipsy-inner { - padding: 3px 8px; - background-color: @black; - color: white; - text-align: center; - max-width: 200px; - text-decoration: none; - .border-radius(4px); -} -.twipsy-arrow { - position: absolute; - width: 0; - height: 0; -} -// POPOVERS -// -------- -.popover { - position: absolute; - top: 0; - left: 0; - z-index: 1000; - padding: 5px; - display: none; - &.above .arrow { #popoverArrow > .above(); } - &.right .arrow { #popoverArrow > .right(); } - &.below .arrow { #popoverArrow > .below(); } - &.left .arrow { #popoverArrow > .left(); } - .arrow { - position: absolute; - width: 0; - height: 0; - } - .inner { - background-color: @black; - background-color: rgba(0,0,0,.8); - padding: 3px; - overflow: hidden; - width: 280px; - .border-radius(6px); - .box-shadow(0 3px 7px rgba(0,0,0,0.3)); - } - .title { - background-color: #f5f5f5; - padding: 9px 15px; - line-height: 1; - .border-radius(3px 3px 0 0); - border-bottom:1px solid #eee; - } - .content { - background-color: @white; - padding: 14px; - .border-radius(0 0 3px 3px); - .background-clip(padding-box); - p, ul, ol { - margin-bottom: 0; - } - } -} // PATTERN ANIMATIONS @@ -1125,32 +668,6 @@ input[type=submit].btn { } -// MEDIA GRIDS -// ----------- - -.media-grid { - margin-left: -20px; - margin-bottom: 0; - .clearfix(); - li { - display: inline; - } - a { - float: left; - padding: 4px; - margin: 0 0 20px 20px; - border: 1px solid #ddd; - .border-radius(4px); - .box-shadow(0 1px 1px rgba(0,0,0,.075)); - img { - display: block; - } - &:hover { - border-color: @linkColor; - .box-shadow(0 1px 4px rgba(0,105,214,.25)); - } - } -} // MISC diff --git a/lib/popovers.less b/lib/popovers.less new file mode 100644 index 0000000000..ed335eeedf --- /dev/null +++ b/lib/popovers.less @@ -0,0 +1,45 @@ +// POPOVERS +// -------- + +.popover { + position: absolute; + top: 0; + left: 0; + z-index: 1000; + padding: 5px; + display: none; + &.above .arrow { #popoverArrow > .above(); } + &.right .arrow { #popoverArrow > .right(); } + &.below .arrow { #popoverArrow > .below(); } + &.left .arrow { #popoverArrow > .left(); } + .arrow { + position: absolute; + width: 0; + height: 0; + } + .inner { + background-color: @black; + background-color: rgba(0,0,0,.8); + padding: 3px; + overflow: hidden; + width: 280px; + .border-radius(6px); + .box-shadow(0 3px 7px rgba(0,0,0,0.3)); + } + .title { + background-color: #f5f5f5; + padding: 9px 15px; + line-height: 1; + .border-radius(3px 3px 0 0); + border-bottom:1px solid #eee; + } + .content { + background-color: @white; + padding: 14px; + .border-radius(0 0 3px 3px); + .background-clip(padding-box); + p, ul, ol { + margin-bottom: 0; + } + } +} \ No newline at end of file diff --git a/lib/tabs-pills.less b/lib/tabs-pills.less new file mode 100644 index 0000000000..7e6c0bf39e --- /dev/null +++ b/lib/tabs-pills.less @@ -0,0 +1,221 @@ +// Tabs and Pills +.tabs, +.pills { + margin: 0 0 20px; + padding: 0; + list-style: none; + .clearfix(); + > li { + float: left; + > a { + display: block; + } + } +} + +// Tabs +.tabs { + border-color: #ddd; + border-style: solid; + border-width: 0 0 1px; + > li { + position: relative; // For the dropdowns mostly + margin-bottom: -1px; + > a { + padding: 0 15px; + margin-right: 2px; + line-height: @baseLineHeight * 2; + border: 1px solid transparent; + .border-radius(4px 4px 0 0); + &:hover { + text-decoration: none; + background-color: #eee; + border-color: #eee #eee #ddd; + } + } + } + // Active state, and it's :hover to override normal :hover + .active > a, + .active > a:hover { + color: @gray; + background-color: @white; + border: 1px solid #ddd; + border-bottom-color: transparent; + cursor: default; + } +} + +.tabbable { + margin-bottom: @baseLineHeight; + + // Tabs on top + .tabs { + margin-bottom: 0; + border-bottom: 0; + } + .tab-content { + padding: 19px; + border: 1px solid #ddd; + } + + // Tabs on bottom + &.tabs-bottom .tabs > li { + margin-top: -1px; + margin-bottom: 0; + } + &.tabs-bottom .tabs > li > a { + .border-radius(0 0 4px 4px); + &:hover { + border-bottom-color: transparent; + border-top-color: #ddd; + } + } + &.tabs-bottom .tabs > .active > a, + &.tabs-bottom .tabs > .active > a:hover { + border-color: transparent #ddd #ddd #ddd; + } + + // Tabs on left and right + &.tabs-left, + &.tabs-right { + .clearfix(); + .tabs { + // Give a fixed width to avoid floating .tab-con + width: 100px; + // Unfloat them so they stack + > li { + float: none; + margin-bottom: -1px; + > a { + margin-bottom: 2px; + &:hover { + border-color: transparent; + } + } + } + } + } + + // Tabs on left + &.tabs-left { + .tab-content { + margin-left: 100px; + } + .tabs { + float: left; + > li { + margin-right: -1px; + > a { + margin-right: 0; + .border-radius(4px 0 0 4px); + + &:hover { + border-right-color: #ddd; + } + } + } + // Active state + .active > a, + .active > a:hover { + border-color: #ddd; + border-right-color: transparent; + } + } + } + + // Tabs on right + &.tabs-right { + .tab-content { + margin-right: 100px; + } + .tabs { + float: right; + > li { + margin-left: -1px; + > a { + margin-left: 0; + .border-radius(0 4px 4px 0); + + &:hover { + border-left-color: #ddd; + } + } + } + // Active state + .active > a, + .active > a:hover { + border-color: #ddd; + border-left-color: transparent; + } + } + } +} + + +// Dropdowns in tabs +.tabs { + // 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; + } +} + +// Pills +.pills { + a { + margin: 5px 3px 5px 0; + padding: 0 15px; + line-height: 30px; + text-shadow: 0 1px 1px @white; + .border-radius(15px); + &:hover { + color: @white; + text-decoration: none; + text-shadow: 0 1px 1px rgba(0,0,0,.25); + background-color: @linkColorHover; + } + } + .active a { + color: @white; + text-shadow: 0 1px 1px rgba(0,0,0,.25); + background-color: @linkColor; + } +} + +// Stacked pills +.pills-vertical > li { + float: none; +} + +// Tabbable areas +.tab-content, +.pill-content { +} +.tab-content > .tab-pane, +.pill-content > .pill-pane { + display: none; +} +.tab-content > .active, +.pill-content > .active { + display: block; +} diff --git a/lib/twipsy.less b/lib/twipsy.less new file mode 100644 index 0000000000..5d168db3e6 --- /dev/null +++ b/lib/twipsy.less @@ -0,0 +1,33 @@ +// TWIPSY +// ------ + +.twipsy { + display: block; + position: absolute; + visibility: visible; + padding: 5px; + font-size: 11px; + z-index: 1000; + .opacity(80); + &.fade.in { + .opacity(80); + } + &.above .twipsy-arrow { #popoverArrow > .above(); } + &.left .twipsy-arrow { #popoverArrow > .left(); } + &.below .twipsy-arrow { #popoverArrow > .below(); } + &.right .twipsy-arrow { #popoverArrow > .right(); } +} +.twipsy-inner { + padding: 3px 8px; + background-color: @black; + color: white; + text-align: center; + max-width: 200px; + text-decoration: none; + .border-radius(4px); +} +.twipsy-arrow { + position: absolute; + width: 0; + height: 0; +} -- GitLab From a8e88d14a422c3dfdb79eaf6d6a3a2f1144df150 Mon Sep 17 00:00:00 2001 From: Mark Otto <mark.otto@twitter.com> Date: Thu, 17 Nov 2011 00:06:16 -0800 Subject: [PATCH 074/318] make form classes match table classes (readable left to right), update docs associated with it --- bootstrap.css | 12 ++++++------ bootstrap.min.css | 10 +++++----- docs/base-css.html | 16 ++++++++-------- lib/forms.less | 40 +++++++++++++++++++++------------------- 4 files changed, 40 insertions(+), 38 deletions(-) diff --git a/bootstrap.css b/bootstrap.css index c59d499546..c88f4ecafe 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: Wed Nov 16 23:58:14 PST 2011 + * Date: Thu Nov 17 00:05:35 PST 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). @@ -921,7 +921,7 @@ form .clearfix.success .input-prepend .add-on, form .clearfix.success .input-app margin-right: 0; margin-left: -1px; } -.form-search .search-query { +.search-form .search-query { -webkit-border-radius: 14px; -moz-border-radius: 14px; border-radius: 14px; @@ -932,19 +932,19 @@ form .clearfix.success .input-prepend .add-on, form .clearfix.success .input-app .control-group > label { font-weight: bold; } -.form-horizontal .control-group > label { +.horizontal-form .control-group > label { float: left; width: 130px; padding-top: 5px; text-align: right; } -.form-horizontal .controls { +.horizontal-form .controls { margin-left: 150px; } -.form-horizontal .control-list { +.horizontal-form .control-list { padding-top: 6px; } -.form-horizontal .form-actions { +.horizontal-form .form-actions { padding-left: 150px; } /* diff --git a/bootstrap.min.css b/bootstrap.min.css index e236547a61..fb3dcd4db4 100644 --- a/bootstrap.min.css +++ b/bootstrap.min.css @@ -153,13 +153,13 @@ form .clearfix.success .input-prepend .add-on,form .clearfix.success .input-appe .input-prepend .add-on{*margin-top:1px;} .input-append input{float:left;-webkit-border-radius:3px 0 0 3px;-moz-border-radius:3px 0 0 3px;border-radius:3px 0 0 3px;} .input-append .add-on{-webkit-border-radius:0 3px 3px 0;-moz-border-radius:0 3px 3px 0;border-radius:0 3px 3px 0;margin-right:0;margin-left:-1px;} -.form-search .search-query{-webkit-border-radius:14px;-moz-border-radius:14px;border-radius:14px;} +.search-form .search-query{-webkit-border-radius:14px;-moz-border-radius:14px;border-radius:14px;} .control-group{margin-bottom:18px;} .control-group>label{font-weight:bold;} -.form-horizontal .control-group>label{float:left;width:130px;padding-top:5px;text-align:right;} -.form-horizontal .controls{margin-left:150px;} -.form-horizontal .control-list{padding-top:6px;} -.form-horizontal .form-actions{padding-left:150px;} +.horizontal-form .control-group>label{float:left;width:130px;padding-top:5px;text-align:right;} +.horizontal-form .controls{margin-left:150px;} +.horizontal-form .control-list{padding-top:6px;} +.horizontal-form .form-actions{padding-left:150px;} table{width:100%;padding:0;margin-bottom:18px;font-size:13px;border-collapse:collapse;}table th,table td{padding:10px 10px 9px;line-height:18px;text-align:left;} table th{padding-top:9px;font-weight:bold;vertical-align:middle;} table td{vertical-align:top;border-top:1px solid #ddd;} diff --git a/docs/base-css.html b/docs/base-css.html index 9c1af11c4e..0b84d01ad7 100644 --- a/docs/base-css.html +++ b/docs/base-css.html @@ -696,22 +696,22 @@ <tbody> <tr> <th>Vertical (default)</th> - <td><code>.form-vertical</code> <span class="muted">(not required)</span></td> + <td><code>.vertical-form</code> <span class="muted">(not required)</span></td> <td>Stacked, left-aligned labels over controls</td> </tr> <tr> <th>Horiztonal</th> - <td><code>.form-horizontal</code></td> + <td><code>.horizontal-form</code></td> <td>Float left, right-aligned labels on same line as controls</td> </tr> <tr> <th>Inline</th> - <td><code>.form-inline</code></td> + <td><code>.inline-form</code></td> <td>Left-aligned label and inline-block controls for compact style</td> </tr> <tr> <th>Search</th> - <td><code>.form-search</code></td> + <td><code>.search-form</code></td> <td>Extra-rounded text input for a typical search aesthetic</td> </tr> </tbody> @@ -734,7 +734,7 @@ </div> <div class="span9"> <div class="well"> - <form class="form-search"> + <form class="search-form"> <input type="text" class="search-query"> <button type="submit" class="btn">Search</button> </form> @@ -747,7 +747,7 @@ </div> <div class="span9"> <div class="well"> - <form class="form-inline"> + <form class="inline-form"> <h4>Some directional text</h4> <p>And maybe some kind of optional supporting text right here.</p> <input type="text" class="input-medium"> @@ -763,7 +763,7 @@ <h2>Horizontal form</h2> </div> <div class="span9"> - <form class="form-horizontal"> + <form class="horizontal-form"> <legend>Example form</legend> <fieldset class="control-group"> <label class="control-label" for="input01">Text input</label> @@ -867,7 +867,7 @@ <h2>Vertical form</h2> </div> <div class="span9"> - <form class="form-vertical"> + <form class="vertical-form"> <legend>Example form</legend> <fieldset class="control-group"> <label class="control-label" for="input01">Label</label> diff --git a/lib/forms.less b/lib/forms.less index b7eb150059..adc050d7a8 100644 --- a/lib/forms.less +++ b/lib/forms.less @@ -364,7 +364,7 @@ form .clearfix.success { // SEARCH FORM // ----------- -.form-search .search-query { +.search-form .search-query { .border-radius(14px); } @@ -388,22 +388,24 @@ form .clearfix.success { // Horizontal-specific styles // -------------------------- -// Float the labels left -.form-horizontal .control-group > label { - float: left; - width: 130px; - padding-top: 5px; - text-align: right; -} -// Move over all input controls and content -.form-horizontal .controls { - margin-left: 150px; -} -// Move the options list down to align with labels -.form-horizontal .control-list { - padding-top: 6px; // has to be padding because margin collaspes -} -// Move over buttons in .form-actions to align with .controls -.form-horizontal .form-actions { - padding-left: 150px; +.horizontal-form { + // Float the labels left + .control-group > label { + float: left; + width: 130px; + padding-top: 5px; + text-align: right; + } + // Move over all input controls and content + .controls { + margin-left: 150px; + } + // Move the options list down to align with labels + .control-list { + padding-top: 6px; // has to be padding because margin collaspes + } + // Move over buttons in .form-actions to align with .controls + .form-actions { + padding-left: 150px; + } } -- GitLab From 5abb4b32004d493ac6bbefcdd1b1f71bdf6e5437 Mon Sep 17 00:00:00 2001 From: Mark Otto <mark.otto@twitter.com> Date: Thu, 17 Nov 2011 00:09:12 -0800 Subject: [PATCH 075/318] update tables docs after merging in the condensed styles --- docs/base-css.html | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/docs/base-css.html b/docs/base-css.html index 2935f88678..aa4a2ebfc0 100644 --- a/docs/base-css.html +++ b/docs/base-css.html @@ -628,10 +628,10 @@ <p><strong>Note:</strong> Zebra-striping is a progressive enhancement not available for older browsers like IE8 and below.</p> <pre class="prettyprint linenums"> <table class="striped-table"> -... + ... </table></pre> <h3>3. Condensed table</h3> - <p>Make your tables smaller—just add the <code>.condensed-table</code> class.</p> + <p>Make your tables more compact by adding the <code>.condensed-table</code> class to cut table cell padding in half (from 10px to 5px).</p> <table class="condensed-table"> <thead> <tr> @@ -664,7 +664,7 @@ </table> <pre class="prettyprint linenums"> <table class="condensed-table"> -... + ... </table></pre> <h3>4. Striped table w/ TableSorter.js</h3> <p>Taking the previous example, we improve the usefulness of our tables by providing sorting functionality via <a href="http://jquery.com">jQuery</a> and the <a href="http://tablesorter.com/docs/">Tablesorter</a> plugin. <strong>Click any column’s header to change the sort.</strong></p> -- GitLab From 160970560b819fe3e3a3396f7385ed8cafc43bf9 Mon Sep 17 00:00:00 2001 From: Mark Otto <mark.otto@twitter.com> Date: Thu, 17 Nov 2011 00:37:14 -0800 Subject: [PATCH 076/318] updated font mixins courtesy of @apancutt --- bootstrap.css | 14 +++++++------- bootstrap.min.css | 6 +++--- lib/mixins.less | 37 +++++++++++++++++++++---------------- 3 files changed, 31 insertions(+), 26 deletions(-) diff --git a/bootstrap.css b/bootstrap.css index c88f4ecafe..c1de34a91c 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: Thu Nov 17 00:05:35 PST 2011 + * Date: Thu Nov 17 00:36:27 PST 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). @@ -477,8 +477,8 @@ blockquote { padding-left: 15px; } blockquote p { - font-size: 16px; - font-weight: 300; + font-size: 300; + font-weight: 16px; line-height: 22.5px; margin-bottom: 0; } @@ -550,8 +550,8 @@ input, select, textarea { font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; - font-size: 13px; - font-weight: normal; + font-size: normal; + font-weight: 13px; line-height: 18px; } label { @@ -1209,8 +1209,8 @@ table .headerSortUp.purple, table .headerSortDown.purple { background-color: #444; background-color: rgba(255, 255, 255, 0.3); font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; - font-size: normal; - font-weight: 13px; + font-size: 13px; + font-weight: normal; line-height: 1; padding: 4px 9px; color: #ffffff; diff --git a/bootstrap.min.css b/bootstrap.min.css index fb3dcd4db4..3424525be7 100644 --- a/bootstrap.min.css +++ b/bootstrap.min.css @@ -83,7 +83,7 @@ strong{font-style:inherit;font-weight:bold;} em{font-style:italic;font-weight:inherit;line-height:inherit;} .muted{color:#bfbfbf;} abbr{font-size:90%;text-transform:uppercase;border-bottom:1px dotted #ddd;cursor:help;} -blockquote{margin-bottom:18px;border-left:5px solid #eee;padding-left:15px;}blockquote p{font-size:16px;font-weight:300;line-height:22.5px;margin-bottom:0;} +blockquote{margin-bottom:18px;border-left:5px solid #eee;padding-left:15px;}blockquote p{font-size:300;font-weight:16px;line-height:22.5px;margin-bottom:0;} blockquote small{display:block;line-height:18px;color:#bfbfbf;}blockquote small:before{content:'\2014 \00A0';} blockquote.pull-right{float:right;}blockquote.pull-right p,blockquote.pull-right small{text-align:right;} address{display:block;line-height:18px;margin-bottom:18px;} @@ -92,7 +92,7 @@ code{background-color:#fee9cc;color:rgba(0, 0, 0, 0.75);padding:1px 3px;} pre{background-color:#f5f5f5;display:block;padding:8.5px;margin:0 0 9px;line-height:18px;font-size:12px;border:1px solid #ccc;border:1px solid rgba(0, 0, 0, 0.15);-webkit-border-radius:3px;-moz-border-radius:3px;border-radius:3px;white-space:pre;white-space:pre-wrap;word-break:break-all;} form{margin-bottom:18px;} legend{display:block;width:100%;margin-bottom:27px;font-size:19.5px;line-height:36px;color:#404040;border-bottom:1px solid #eee;} -label,input,select,textarea{font-family:"Helvetica Neue",Helvetica,Arial,sans-serif;font-size:13px;font-weight:normal;line-height:18px;} +label,input,select,textarea{font-family:"Helvetica Neue",Helvetica,Arial,sans-serif;font-size:normal;font-weight:13px;line-height:18px;} label{display:block;margin-bottom:5px;color:#404040;} input,textarea,select,.uneditable-input{display:inline-block;width:210px;height:18px;padding:4px;font-size:13px;line-height:18px;color:#808080;border:1px solid #ccc;-webkit-border-radius:3px;-moz-border-radius:3px;border-radius:3px;} input[type=checkbox],input[type=radio]{width:auto;height:auto;padding:0;margin:3px 0;*margin-top:0;line-height:normal;border:none;cursor:pointer;} @@ -211,7 +211,7 @@ table .headerSortUp.purple,table .headerSortDown.purple{background-color:#e2d5f0 .navbar .brand a:hover,.navbar ul .active>a{background-color:#333333;background-color:rgba(255, 255, 255, 0.05);color:#ffffff;text-decoration:none;} .navbar .brand{float:left;display:block;padding:8px 20px 12px;margin-left:-20px;color:#ffffff;font-size:20px;font-weight:200;line-height:1;} .navbar p{margin:0;line-height:40px;}.navbar p a:hover{background-color:transparent;color:#ffffff;} -.navbar-search{position:relative;margin-top:6px;margin-bottom:0;float:left;}.navbar-search .search-query{background-color:#444;background-color:rgba(255, 255, 255, 0.3);font-family:"Helvetica Neue",Helvetica,Arial,sans-serif;font-size:normal;font-weight:13px;line-height:1;padding:4px 9px;color:#ffffff;color:rgba(255, 255, 255, 0.75);border:1px solid #111;-webkit-box-shadow:inset 0 1px 2px rgba(0, 0, 0, 0.1),0 1px 0px rgba(255, 255, 255, 0.15);-moz-box-shadow:inset 0 1px 2px rgba(0, 0, 0, 0.1),0 1px 0px rgba(255, 255, 255, 0.15);box-shadow:inset 0 1px 2px rgba(0, 0, 0, 0.1),0 1px 0px rgba(255, 255, 255, 0.15);-webkit-transition:none;-moz-transition:none;-ms-transition:none;-o-transition:none;transition:none;}.navbar-search .search-query:-moz-placeholder{color:#e6e6e6;} +.navbar-search{position:relative;margin-top:6px;margin-bottom:0;float:left;}.navbar-search .search-query{background-color:#444;background-color:rgba(255, 255, 255, 0.3);font-family:"Helvetica Neue",Helvetica,Arial,sans-serif;font-size:13px;font-weight:normal;line-height:1;padding:4px 9px;color:#ffffff;color:rgba(255, 255, 255, 0.75);border:1px solid #111;-webkit-box-shadow:inset 0 1px 2px rgba(0, 0, 0, 0.1),0 1px 0px rgba(255, 255, 255, 0.15);-moz-box-shadow:inset 0 1px 2px rgba(0, 0, 0, 0.1),0 1px 0px rgba(255, 255, 255, 0.15);box-shadow:inset 0 1px 2px rgba(0, 0, 0, 0.1),0 1px 0px rgba(255, 255, 255, 0.15);-webkit-transition:none;-moz-transition:none;-ms-transition:none;-o-transition:none;transition:none;}.navbar-search .search-query:-moz-placeholder{color:#e6e6e6;} .navbar-search .search-query::-webkit-input-placeholder{color:#e6e6e6;} .navbar-search .search-query:hover{background-color:#bfbfbf;background-color:rgba(255, 255, 255, 0.5);color:#ffffff;} .navbar-search .search-query:focus,.navbar-search .search-query.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);} diff --git a/lib/mixins.less b/lib/mixins.less index b8565bbdcc..fc17950426 100644 --- a/lib/mixins.less +++ b/lib/mixins.less @@ -46,28 +46,33 @@ // Font Stacks #font { - .shorthand(@weight: normal, @size: @baseFontSize, @lineHeight: @baseLineHeight) { - font-size: @size; - font-weight: @weight; - line-height: @lineHeight; + #family { + .serif() { + font-family: "Georgia", Times New Roman, Times, serif; + } + .sans-serif() { + font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; + } + .monospace() { + font-family: "Menlo", Monaco, Courier New, monospace; + } } - .sans-serif(@weight: normal, @size: @baseFontSize, @lineHeight: @baseLineHeight) { - font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; + .shorthand(@size: @baseFontSize, @weight: normal, @lineHeight: @baseLineHeight) { font-size: @size; font-weight: @weight; line-height: @lineHeight; } - .serif(@weight: normal, @size: @baseFontSize, @lineHeight: @baseLineHeight) { - font-family: "Georgia", Times New Roman, Times, serif; - font-size: @size; - font-weight: @weight; - line-height: @lineHeight; + .serif(@size: @baseFontSize, @weight: normal, @lineHeight: @baseLineHeight) { + #font > #family > .serif; + #font > .shorthand(@size, @weight, @lineHeight); } - .monospace(@weight: normal, @size: @baseFontSize, @lineHeight: @baseLineHeight) { - font-family: Menlo, Monaco, Andale Mono, Courier New, monospace; - font-size: @size; - font-weight: @weight; - line-height: @lineHeight; + .sans-serif(@size: @baseFontSize, @weight: normal, @lineHeight: @baseLineHeight) { + #font > #family > .sans-serif; + #font > .shorthand(@size, @weight, @lineHeight); + } + .monospace(@size: @baseFontSize, @weight: normal, @lineHeight: @baseLineHeight) { + #font > #family > .monospace; + #font > .shorthand(@size, @weight, @lineHeight); } } -- GitLab From 6418a40675a2354df757e949e2092a246485ff1c Mon Sep 17 00:00:00 2001 From: Mark Otto <mark.otto@twitter.com> Date: Thu, 17 Nov 2011 00:41:26 -0800 Subject: [PATCH 077/318] spelling mistake in comment --- lib/mixins.less | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/lib/mixins.less b/lib/mixins.less index fc17950426..670b17384b 100644 --- a/lib/mixins.less +++ b/lib/mixins.less @@ -201,7 +201,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); -- GitLab From ba9fcd8b57ad7974a52aecabac7c90dccda4afcb Mon Sep 17 00:00:00 2001 From: Mark Otto <mark.otto@twitter.com> Date: Thu, 17 Nov 2011 00:49:51 -0800 Subject: [PATCH 078/318] make uneditable inputs work with span* classes --- bootstrap.css | 82 +++++++++++++++++++++++++++++++++++++---------- bootstrap.min.css | 32 +++++++++--------- lib/forms.less | 3 +- 3 files changed, 83 insertions(+), 34 deletions(-) diff --git a/bootstrap.css b/bootstrap.css index c1de34a91c..b65126285f 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: Thu Nov 17 00:36:27 PST 2011 + * Date: Thu Nov 17 00:48:46 PST 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). @@ -657,97 +657,145 @@ input[type=file]:focus, input[type=checkbox]:focus, select:focus { .input-xxlarge { width: 530px; } -input.span1, textarea.span1, select.span1 { +input.span1, +textarea.span1, +select.span1, +.uneditable-input.span1 { display: inline-block; float: none; width: 50px; margin-left: 0; } -input.span2, textarea.span2, select.span2 { +input.span2, +textarea.span2, +select.span2, +.uneditable-input.span2 { display: inline-block; float: none; width: 150px; margin-left: 0; } -input.span3, textarea.span3, select.span3 { +input.span3, +textarea.span3, +select.span3, +.uneditable-input.span3 { display: inline-block; float: none; width: 250px; margin-left: 0; } -input.span4, textarea.span4, select.span4 { +input.span4, +textarea.span4, +select.span4, +.uneditable-input.span4 { display: inline-block; float: none; width: 350px; margin-left: 0; } -input.span5, textarea.span5, select.span5 { +input.span5, +textarea.span5, +select.span5, +.uneditable-input.span5 { display: inline-block; float: none; width: 450px; margin-left: 0; } -input.span6, textarea.span6, select.span6 { +input.span6, +textarea.span6, +select.span6, +.uneditable-input.span6 { display: inline-block; float: none; width: 550px; margin-left: 0; } -input.span7, textarea.span7, select.span7 { +input.span7, +textarea.span7, +select.span7, +.uneditable-input.span7 { display: inline-block; float: none; width: 650px; margin-left: 0; } -input.span8, textarea.span8, select.span8 { +input.span8, +textarea.span8, +select.span8, +.uneditable-input.span8 { display: inline-block; float: none; width: 750px; margin-left: 0; } -input.span9, textarea.span9, select.span9 { +input.span9, +textarea.span9, +select.span9, +.uneditable-input.span9 { display: inline-block; float: none; width: 850px; margin-left: 0; } -input.span10, textarea.span10, select.span10 { +input.span10, +textarea.span10, +select.span10, +.uneditable-input.span10 { display: inline-block; float: none; width: 950px; margin-left: 0; } -input.span11, textarea.span11, select.span11 { +input.span11, +textarea.span11, +select.span11, +.uneditable-input.span11 { display: inline-block; float: none; width: 1050px; margin-left: 0; } -input.span12, textarea.span12, select.span12 { +input.span12, +textarea.span12, +select.span12, +.uneditable-input.span12 { display: inline-block; float: none; width: 1150px; margin-left: 0; } -input.span13, textarea.span13, select.span13 { +input.span13, +textarea.span13, +select.span13, +.uneditable-input.span13 { display: inline-block; float: none; width: 1250px; margin-left: 0; } -input.span14, textarea.span14, select.span14 { +input.span14, +textarea.span14, +select.span14, +.uneditable-input.span14 { display: inline-block; float: none; width: 1350px; margin-left: 0; } -input.span15, textarea.span15, select.span15 { +input.span15, +textarea.span15, +select.span15, +.uneditable-input.span15 { display: inline-block; float: none; width: 1450px; margin-left: 0; } -input.span16, textarea.span16, select.span16 { +input.span16, +textarea.span16, +select.span16, +.uneditable-input.span16 { display: inline-block; float: none; width: 1550px; diff --git a/bootstrap.min.css b/bootstrap.min.css index 3424525be7..b71f2c74f9 100644 --- a/bootstrap.min.css +++ b/bootstrap.min.css @@ -110,22 +110,22 @@ input[type=file]:focus,input[type=checkbox]:focus,select:focus{-webkit-box-shado .input-large{width:210px;} .input-xlarge{width:270px;} .input-xxlarge{width:530px;} -input.span1,textarea.span1,select.span1{display:inline-block;float:none;width:50px;margin-left:0;} -input.span2,textarea.span2,select.span2{display:inline-block;float:none;width:150px;margin-left:0;} -input.span3,textarea.span3,select.span3{display:inline-block;float:none;width:250px;margin-left:0;} -input.span4,textarea.span4,select.span4{display:inline-block;float:none;width:350px;margin-left:0;} -input.span5,textarea.span5,select.span5{display:inline-block;float:none;width:450px;margin-left:0;} -input.span6,textarea.span6,select.span6{display:inline-block;float:none;width:550px;margin-left:0;} -input.span7,textarea.span7,select.span7{display:inline-block;float:none;width:650px;margin-left:0;} -input.span8,textarea.span8,select.span8{display:inline-block;float:none;width:750px;margin-left:0;} -input.span9,textarea.span9,select.span9{display:inline-block;float:none;width:850px;margin-left:0;} -input.span10,textarea.span10,select.span10{display:inline-block;float:none;width:950px;margin-left:0;} -input.span11,textarea.span11,select.span11{display:inline-block;float:none;width:1050px;margin-left:0;} -input.span12,textarea.span12,select.span12{display:inline-block;float:none;width:1150px;margin-left:0;} -input.span13,textarea.span13,select.span13{display:inline-block;float:none;width:1250px;margin-left:0;} -input.span14,textarea.span14,select.span14{display:inline-block;float:none;width:1350px;margin-left:0;} -input.span15,textarea.span15,select.span15{display:inline-block;float:none;width:1450px;margin-left:0;} -input.span16,textarea.span16,select.span16{display:inline-block;float:none;width:1550px;margin-left:0;} +input.span1,textarea.span1,select.span1,.uneditable-input.span1{display:inline-block;float:none;width:50px;margin-left:0;} +input.span2,textarea.span2,select.span2,.uneditable-input.span2{display:inline-block;float:none;width:150px;margin-left:0;} +input.span3,textarea.span3,select.span3,.uneditable-input.span3{display:inline-block;float:none;width:250px;margin-left:0;} +input.span4,textarea.span4,select.span4,.uneditable-input.span4{display:inline-block;float:none;width:350px;margin-left:0;} +input.span5,textarea.span5,select.span5,.uneditable-input.span5{display:inline-block;float:none;width:450px;margin-left:0;} +input.span6,textarea.span6,select.span6,.uneditable-input.span6{display:inline-block;float:none;width:550px;margin-left:0;} +input.span7,textarea.span7,select.span7,.uneditable-input.span7{display:inline-block;float:none;width:650px;margin-left:0;} +input.span8,textarea.span8,select.span8,.uneditable-input.span8{display:inline-block;float:none;width:750px;margin-left:0;} +input.span9,textarea.span9,select.span9,.uneditable-input.span9{display:inline-block;float:none;width:850px;margin-left:0;} +input.span10,textarea.span10,select.span10,.uneditable-input.span10{display:inline-block;float:none;width:950px;margin-left:0;} +input.span11,textarea.span11,select.span11,.uneditable-input.span11{display:inline-block;float:none;width:1050px;margin-left:0;} +input.span12,textarea.span12,select.span12,.uneditable-input.span12{display:inline-block;float:none;width:1150px;margin-left:0;} +input.span13,textarea.span13,select.span13,.uneditable-input.span13{display:inline-block;float:none;width:1250px;margin-left:0;} +input.span14,textarea.span14,select.span14,.uneditable-input.span14{display:inline-block;float:none;width:1350px;margin-left:0;} +input.span15,textarea.span15,select.span15,.uneditable-input.span15{display:inline-block;float:none;width:1450px;margin-left:0;} +input.span16,textarea.span16,select.span16,.uneditable-input.span16{display:inline-block;float:none;width:1550px;margin-left:0;} input[disabled],select[disabled],textarea[disabled],input[readonly],select[readonly],textarea[readonly]{background-color:#f5f5f5;border-color:#ddd;cursor:not-allowed;} form .clearfix.error>label,form .clearfix.error .help-block,form .clearfix.error .help-inline{color:#b94a48;} form .clearfix.error input,form .clearfix.error textarea{color:#b94a48;border-color:#ee5f5b;}form .clearfix.error input:focus,form .clearfix.error textarea:focus{border-color:#e9322d;-webkit-box-shadow:0 0 6px #f8b9b7;-moz-box-shadow:0 0 6px #f8b9b7;box-shadow:0 0 6px #f8b9b7;} diff --git a/lib/forms.less b/lib/forms.less index adc050d7a8..f590101cd0 100644 --- a/lib/forms.less +++ b/lib/forms.less @@ -151,7 +151,8 @@ select:focus { } input, textarea, -select { +select, +.uneditable-input { // Default columns &.span1 { .formColumns(1); } &.span2 { .formColumns(2); } -- GitLab From 159c7a7fdae4a3bd929ee9cc76aaa3b509a969dc Mon Sep 17 00:00:00 2001 From: Mark Otto <mark.otto@twitter.com> Date: Thu, 17 Nov 2011 00:52:11 -0800 Subject: [PATCH 079/318] remove code styling if it's in a pre tag --- bootstrap.css | 10 +++++++--- bootstrap.min.css | 6 +++--- lib/type.less | 13 ++++++++++--- 3 files changed, 20 insertions(+), 9 deletions(-) diff --git a/bootstrap.css b/bootstrap.css index b65126285f..e8b9d2d530 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: Thu Nov 17 00:48:46 PST 2011 + * Date: Thu Nov 17 00:52:01 PST 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). @@ -503,15 +503,15 @@ address { } code, pre { padding: 0 3px 2px; - font-family: Menlo, Monaco, Andale Mono, Courier New, monospace; + font-family: "Menlo", Monaco, Courier New, monospace; font-size: 12px; + color: #404040; -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px; } code { background-color: #fee9cc; - color: rgba(0, 0, 0, 0.75); padding: 1px 3px; } pre { @@ -530,6 +530,10 @@ pre { white-space: pre-wrap; word-break: break-all; } +pre code { + padding: 0; + background-color: transparent; +} /* Forms.less * Base styles for various input types, form layouts, and states * ------------------------------------------------------------- */ diff --git a/bootstrap.min.css b/bootstrap.min.css index b71f2c74f9..832d50ff81 100644 --- a/bootstrap.min.css +++ b/bootstrap.min.css @@ -87,9 +87,9 @@ blockquote{margin-bottom:18px;border-left:5px solid #eee;padding-left:15px;}bloc blockquote small{display:block;line-height:18px;color:#bfbfbf;}blockquote small:before{content:'\2014 \00A0';} blockquote.pull-right{float:right;}blockquote.pull-right p,blockquote.pull-right small{text-align:right;} address{display:block;line-height:18px;margin-bottom:18px;} -code,pre{padding:0 3px 2px;font-family:Menlo, Monaco, Andale Mono, Courier New, monospace;font-size:12px;-webkit-border-radius:3px;-moz-border-radius:3px;border-radius:3px;} -code{background-color:#fee9cc;color:rgba(0, 0, 0, 0.75);padding:1px 3px;} -pre{background-color:#f5f5f5;display:block;padding:8.5px;margin:0 0 9px;line-height:18px;font-size:12px;border:1px solid #ccc;border:1px solid rgba(0, 0, 0, 0.15);-webkit-border-radius:3px;-moz-border-radius:3px;border-radius:3px;white-space:pre;white-space:pre-wrap;word-break:break-all;} +code,pre{padding:0 3px 2px;font-family:"Menlo",Monaco,Courier New,monospace;font-size:12px;color:#404040;-webkit-border-radius:3px;-moz-border-radius:3px;border-radius:3px;} +code{background-color:#fee9cc;padding:1px 3px;} +pre{background-color:#f5f5f5;display:block;padding:8.5px;margin:0 0 9px;line-height:18px;font-size:12px;border:1px solid #ccc;border:1px solid rgba(0, 0, 0, 0.15);-webkit-border-radius:3px;-moz-border-radius:3px;border-radius:3px;white-space:pre;white-space:pre-wrap;word-break:break-all;}pre code{padding:0;background-color:transparent;} form{margin-bottom:18px;} legend{display:block;width:100%;margin-bottom:27px;font-size:19.5px;line-height:36px;color:#404040;border-bottom:1px solid #eee;} label,input,select,textarea{font-family:"Helvetica Neue",Helvetica,Arial,sans-serif;font-size:normal;font-weight:13px;line-height:18px;} diff --git a/lib/type.less b/lib/type.less index 421d666a47..f5b5ff272d 100644 --- a/lib/type.less +++ b/lib/type.less @@ -179,15 +179,16 @@ address { } // Inline and block code styles -code, pre { +code, +pre { padding: 0 3px 2px; - font-family: Menlo, Monaco, Andale Mono, Courier New, monospace; + #font > #family > .monospace; font-size: 12px; + color: @grayDark; .border-radius(3px); } code { background-color: lighten(@orange, 40%); - color: rgba(0,0,0,.75); padding: 1px 3px; } pre { @@ -203,4 +204,10 @@ pre { white-space: pre; white-space: pre-wrap; word-break: break-all; + + // Account for some code outputs that place code tags in pre tags + code { + padding: 0; + background-color: transparent; + } } \ No newline at end of file -- GitLab From 4e6275d0fe0880d32633a2c139dad8d3e2745bb6 Mon Sep 17 00:00:00 2001 From: Mark Otto <mark.otto@twitter.com> Date: Thu, 17 Nov 2011 01:28:42 -0800 Subject: [PATCH 080/318] update property order and do some misc cleanup --- lib/breadcrumbs.less | 2 +- lib/forms.less | 30 +++++++------- lib/mixins.less | 11 ++--- lib/modals.less | 10 ++--- lib/pagination.less | 4 +- lib/patterns.less | 95 ++++++++++++++++++++------------------------ lib/popovers.less | 14 +++---- lib/reset.less | 12 +++--- lib/scaffolding.less | 6 +-- lib/tables.less | 8 ++-- lib/tabs-pills.less | 7 +--- lib/twipsy.less | 8 ++-- lib/type.less | 16 ++++---- 13 files changed, 105 insertions(+), 118 deletions(-) diff --git a/lib/breadcrumbs.less b/lib/breadcrumbs.less index 89a7aef13a..2fa9921ac8 100644 --- a/lib/breadcrumbs.less +++ b/lib/breadcrumbs.less @@ -2,8 +2,8 @@ // ----------- .breadcrumb { - margin: 0 0 @baseLineHeight; padding: 7px 14px; + margin: 0 0 @baseLineHeight; #gradient > .vertical(#ffffff, #f5f5f5); border: 1px solid #ddd; .border-radius(3px); diff --git a/lib/forms.less b/lib/forms.less index f590101cd0..845eec185e 100644 --- a/lib/forms.less +++ b/lib/forms.less @@ -69,11 +69,11 @@ input[type=radio] { // Reset the file input to browser defaults input[type=file] { - background-color: @white; - background-color: initial; padding: initial; - border: initial; line-height: initial; + border: initial; + background-color: @white; + background-color: initial; .box-shadow(none); } @@ -89,14 +89,14 @@ input[type=submit] { select, input[type=file] { height: @baseLineHeight * 1.5; // In IE7, the height of the select element cannot be changed by height, only font-size - line-height: @baseLineHeight * 1.5; *margin-top: 4px; /* For IE7, add top margin to align select with labels */ + line-height: @baseLineHeight * 1.5; } // Make multiple select elements height not fixed select[multiple] { - background-color: @white; // Fixes Chromium bug? height: inherit; + background-color: @white; // Fixes Chromium bug? } textarea { @@ -110,16 +110,16 @@ textarea { input, textarea { + .box-shadow(inset 0 1px 3px rgba(0,0,0,.1)); @transition: border linear .2s, box-shadow linear .2s; .transition(@transition); - .box-shadow(inset 0 1px 3px rgba(0,0,0,.1)); } input:focus, textarea:focus { - outline: 0; border-color: rgba(82,168,236,.8); @shadow: inset 0 1px 3px rgba(0,0,0,.1), 0 0 8px rgba(82,168,236,.6); .box-shadow(@shadow); + outline: 0; } input[type=file]:focus, input[type=checkbox]:focus, @@ -248,8 +248,8 @@ form .clearfix.success { // For text that needs to appear as an input but should not be an input .uneditable-input { - background-color: @white; display: block; + background-color: @white; border-color: #eee; .box-shadow(inset 0 1px 2px rgba(0,0,0,.025)); cursor: not-allowed; @@ -275,10 +275,10 @@ form .clearfix.success { } .help-inline { - display: inline; - padding-left: 5px; *position: relative; /* IE6-7 */ *top: -5px; /* IE6-7 */ + display: inline; + padding-left: 5px; } // Big blocks of help text @@ -321,25 +321,25 @@ form .clearfix.success { } .add-on { position: relative; - background: #f5f5f5; - border: 1px solid #ccc; z-index: 2; float: left; display: block; width: auto; min-width: 16px; height: @baseLineHeight; - padding: 4px 4px 4px 5px; margin-right: -1px; + padding: 4px 4px 4px 5px; font-weight: normal; line-height: @baseLineHeight; color: @grayLight; text-align: center; text-shadow: 0 1px 0 @white; + background-color: #f5f5f5; + border: 1px solid #ccc; .border-radius(3px 0 0 3px); } .active { - background: lighten(@green, 30); + background-color: lighten(@green, 30); border-color: @green; } } @@ -354,9 +354,9 @@ form .clearfix.success { .border-radius(3px 0 0 3px); } .add-on { - .border-radius(0 3px 3px 0); margin-right: 0; margin-left: -1px; + .border-radius(0 3px 3px 0); } } diff --git a/lib/mixins.less b/lib/mixins.less index 670b17384b..d77ecf6215 100644 --- a/lib/mixins.less +++ b/lib/mixins.less @@ -9,9 +9,9 @@ &:before, &:after { display: table; + *display: inline; content: ""; zoom: 1; - *display: inline; } &:after { clear: both; @@ -27,8 +27,8 @@ // Sizing shortcuts .size(@height: 5px, @width: 5px) { - height: @height; width: @width; + height: @height; } .square(@size: 5px) { .size(@size, @size); @@ -197,14 +197,16 @@ } .border(@color: @white, @alpha: 1) { border-color: hsla(hue(@color), saturation(@color), lightness(@color), @alpha); - background-clip: padding-box; + -webkit-background-clip: padding-box; + -moz-background-clip: padding; + background-clip: padding-box; } } // Gradient Bar Colors for buttons and alerts .gradientBar(@primaryColor, @secondaryColor) { - #gradient > .vertical(@primaryColor, @secondaryColor); text-shadow: 0 -1px 0 rgba(0,0,0,.25); + #gradient > .vertical(@primaryColor, @secondaryColor); border-color: @secondaryColor @secondaryColor darken(@secondaryColor, 15%); border-color: rgba(0,0,0,.1) rgba(0,0,0,.1) fadein(rgba(0,0,0,.1), 15%); } @@ -274,7 +276,6 @@ // Opacity .opacity(@opacity: 100) { filter: e(%("alpha(opacity=%d)", @opacity)); - -khtml-opacity: @opacity / 100; -moz-opacity: @opacity / 100; opacity: @opacity / 100; } diff --git a/lib/modals.less b/lib/modals.less index 672431beb6..53d6cd4089 100644 --- a/lib/modals.less +++ b/lib/modals.less @@ -2,13 +2,13 @@ // ------ .modal-backdrop { - background-color: @black; position: fixed; top: 0; - left: 0; right: 0; bottom: 0; + left: 0; z-index: 10000; + background-color: @black; // Fade for backdrop &.fade { opacity: 0; } } @@ -39,20 +39,20 @@ &.fade.in { top: 50%; } } .modal-header { - border-bottom: 1px solid #eee; padding: 5px 15px; + border-bottom: 1px solid #eee; } .modal-body { padding: 15px; } .modal-footer { - background-color: #f5f5f5; padding: 14px 15px 15px; + margin-bottom: 0; + background-color: #f5f5f5; border-top: 1px solid #ddd; .border-radius(0 0 6px 6px); .box-shadow(inset 0 1px 0 @white); .clearfix(); - margin-bottom: 0; .btn { float: right; margin-left: 5px; diff --git a/lib/pagination.less b/lib/pagination.less index d97a1bab3b..d82a0bbd07 100644 --- a/lib/pagination.less +++ b/lib/pagination.less @@ -19,11 +19,11 @@ float: left; padding: 0 14px; line-height: (@baseLineHeight * 2) - 2; + text-decoration: none; border-right: 1px solid; border-right-color: #ddd; border-right-color: rgba(0,0,0,.15); *border-right-color: #ddd; /* IE6-7 */ - text-decoration: none; } a:hover, .active a { @@ -31,8 +31,8 @@ } .disabled a, .disabled a:hover { - background-color: transparent; color: @grayLight; + background-color: transparent; } .next a { border: 0; diff --git a/lib/patterns.less b/lib/patterns.less index bc1229bd90..2fcc4f2b38 100644 --- a/lib/patterns.less +++ b/lib/patterns.less @@ -33,10 +33,10 @@ // Hover and active states .brand a:hover, ul .active > a { - background-color: @navBarBgStart; - background-color: rgba(255,255,255,.05); color: @white; text-decoration: none; + background-color: @navBarBgStart; + background-color: rgba(255,255,255,.05); } // Website or project name .brand { @@ -44,18 +44,18 @@ display: block; padding: 8px 20px 12px; margin-left: -20px; // negative indent to left-align the text down the page - color: @white; font-size: 20px; font-weight: 200; line-height: 1; + color: @white; } // Plain text in topbar p { margin: 0; line-height: 40px; a:hover { - background-color: transparent; color: @white; + background-color: transparent; } } } @@ -63,16 +63,16 @@ // Navbar search .navbar-search { position: relative; + float: left; margin-top: 6px; margin-bottom: 0; - float: left; .search-query { - background-color: #444; - background-color: rgba(255,255,255,.3); - #font > .sans-serif(13px, normal, 1); padding: 4px 9px; + #font > .sans-serif(13px, normal, 1); color: @white; color: rgba(255,255,255,.75); + background-color: #444; + background-color: rgba(255,255,255,.3); border: 1px solid #111; @shadow: inset 0 1px 2px rgba(0,0,0,.1), 0 1px 0px rgba(255,255,255,.15); .box-shadow(@shadow); @@ -87,20 +87,20 @@ } // Hover states &:hover { + color: @white; background-color: @grayLight; background-color: rgba(255,255,255,.5); - color: @white; } // Focus states (we use .focused since IE8 and down doesn't support :focus) &:focus, &.focused { - outline: 0; - background-color: @white; + padding: 5px 10px; color: @grayDark; text-shadow: 0 1px 0 @white; + background-color: @white; border: 0; - padding: 5px 10px; .box-shadow(0 0 3px rgba(0,0,0,.15)); + outline: 0; } } } @@ -120,8 +120,8 @@ .navbar-fixed { position: fixed; top: 0; - left: 0; right: 0; + left: 0; z-index: 10000; } @@ -133,11 +133,11 @@ // Nav for navbar and topbar // ul.nav for all topbar based navigation to avoid inheritance issues and over-specificity .nav { + position: relative; + left: 0; display: block; float: left; margin: 0 10px 0 0; - position: relative; - left: 0; > li { display: block; float: left; @@ -212,37 +212,36 @@ } // The link that is clicked to toggle the dropdown .dropdown-toggle:after { + display: inline-block; width: 0; height: 0; - display: inline-block; - content: "↓"; - text-indent: -99999px; - vertical-align: top; margin-top: 8px; margin-left: 6px; + text-indent: -99999px; + vertical-align: top; border-left: 4px solid transparent; border-right: 4px solid transparent; border-top: 4px solid @white; .opacity(30); + content: "↓"; } .dropdown:hover .dropdown-toggle:after { .opacity(100); } // The dropdown menu (ul) .dropdown-menu { - background-color: @white; - float: left; - display: none; // None by default, but block on "open" of the menu position: absolute; top: 40px; z-index: 900; + float: left; + display: none; // None by default, but block on "open" of the menu min-width: 160px; max-width: 220px; _width: 160px; + padding: 6px 0; margin-left: 0; // override default ul styles margin-right: 0; - padding: 6px 0; - zoom: 1; // do we need this? + background-color: @white; border-color: #999; border-color: rgba(0,0,0,.2); border-style: solid; @@ -250,6 +249,7 @@ .border-radius(0 0 6px 6px); .box-shadow(0 2px 4px rgba(0,0,0,.2)); .background-clip(padding-box); + zoom: 1; // do we need this? // Unfloat any li's to make them stack li { @@ -279,9 +279,9 @@ text-shadow: 0 1px 0 @white; // Hover state &:hover { - #gradient > .vertical(#eeeeee, #dddddd); color: @grayDark; text-decoration: none; + #gradient > .vertical(#eeeeee, #dddddd); @shadow: inset 0 1px 0 rgba(0,0,0,.025), inset 0 -1px rgba(0,0,0,.025); .box-shadow(@shadow); } @@ -309,9 +309,9 @@ // ------------ .hero-unit { - background-color: #f5f5f5; - margin-bottom: 30px; padding: 60px; + margin-bottom: 30px; + background-color: #f5f5f5; .border-radius(6px); h1 { margin-bottom: 0; @@ -326,8 +326,8 @@ } } footer { - margin-top: @baseLineHeight - 1; padding-top: @baseLineHeight - 1; + margin-top: @baseLineHeight - 1; border-top: 1px solid #eee; } @@ -380,24 +380,24 @@ footer { // Base .btn styles .btn { // Button Base - cursor: pointer; display: inline-block; - #gradient > .vertical-three-colors(#ffffff, #ffffff, 25%, darken(#ffffff, 10%)); // Don't use .gradientbar() here since it does a three-color gradient padding: 5px 14px 6px; - text-shadow: 0 1px 1px rgba(255,255,255,.75); - color: #333; font-size: @baseFontSize; line-height: normal; + color: #333; + text-shadow: 0 1px 1px rgba(255,255,255,.75); + #gradient > .vertical-three-colors(#ffffff, #ffffff, 25%, darken(#ffffff, 10%)); // Don't use .gradientbar() here since it does a three-color gradient border: 1px solid #ccc; border-bottom-color: #bbb; .border-radius(4px); @shadow: inset 0 1px 0 rgba(255,255,255,.2), 0 1px 2px rgba(0,0,0,.05); .box-shadow(@shadow); + cursor: pointer; &:hover { - background-position: 0 -15px; color: #333; text-decoration: none; + background-position: 0 -15px; } // Focus state for keyboard and accessibility @@ -438,9 +438,9 @@ footer { // Button Sizes &.large { + padding: 9px 14px 9px; font-size: @baseFontSize + 2px; line-height: normal; - padding: 9px 14px 9px; .border-radius(6px); } &.small { @@ -516,10 +516,10 @@ input[type=submit].btn { // ----------- .close { float: right; - color: @black; font-size: 20px; font-weight: bold; line-height: @baseLineHeight * .75; + color: @black; text-shadow: 0 1px 0 rgba(255,255,255,1); .opacity(20); &:hover { @@ -539,8 +539,8 @@ input[type=submit].btn { padding: 7px 15px; margin-bottom: @baseLineHeight; color: @grayDark; - .gradientBar(#fceec1, #eedc94); // warning by default text-shadow: 0 1px 0 rgba(255,255,255,.5); + .gradientBar(#fceec1, #eedc94); // warning by default border-width: 1px; border-style: solid; .border-radius(4px); @@ -569,10 +569,10 @@ input[type=submit].btn { } &.block-message { + padding: 14px; background-image: none; background-color: lighten(#fceec1, 5%); - .reset-filter(); - padding: 14px; + .reset-filter(); // undo gradient for IE9 border-color: #fceec1; .box-shadow(none); ul, p { @@ -615,10 +615,10 @@ input[type=submit].btn { // ----- .well { - background-color: #f5f5f5; - margin-bottom: 20px; - padding: 19px; min-height: 20px; + padding: 19px; + margin-bottom: 20px; + background-color: #f5f5f5; border: 1px solid #eee; border: 1px solid rgba(0,0,0,.05); .border-radius(4px); @@ -655,11 +655,11 @@ input[type=submit].btn { .label { padding: 1px 3px 2px; - background-color: @grayLight; font-size: @baseFontSize * .75; font-weight: bold; color: @white; text-transform: uppercase; + background-color: @grayLight; .border-radius(3px); &.important { background-color: #c43c35; } &.warning { background-color: @orange; } @@ -667,14 +667,3 @@ input[type=submit].btn { &.notice { background-color: lighten(@blue, 25%); } } - - - -// MISC -// ---- -.pull-right { - float: right; -} -.pull-left { - float: left; -} \ No newline at end of file diff --git a/lib/popovers.less b/lib/popovers.less index ed335eeedf..570bc906c4 100644 --- a/lib/popovers.less +++ b/lib/popovers.less @@ -6,8 +6,8 @@ top: 0; left: 0; z-index: 1000; - padding: 5px; display: none; + padding: 5px; &.above .arrow { #popoverArrow > .above(); } &.right .arrow { #popoverArrow > .right(); } &.below .arrow { #popoverArrow > .below(); } @@ -18,24 +18,24 @@ height: 0; } .inner { - background-color: @black; - background-color: rgba(0,0,0,.8); padding: 3px; - overflow: hidden; width: 280px; + overflow: hidden; + background-color: @black; + background-color: rgba(0,0,0,.8); .border-radius(6px); .box-shadow(0 3px 7px rgba(0,0,0,0.3)); } .title { - background-color: #f5f5f5; padding: 9px 15px; line-height: 1; - .border-radius(3px 3px 0 0); + background-color: #f5f5f5; border-bottom:1px solid #eee; + .border-radius(3px 3px 0 0); } .content { - background-color: @white; padding: 14px; + background-color: @white; .border-radius(0 0 3px 3px); .background-clip(padding-box); p, ul, ol { diff --git a/lib/reset.less b/lib/reset.less index 983f14f3dc..8bff573352 100644 --- a/lib/reset.less +++ b/lib/reset.less @@ -75,9 +75,9 @@ audio:not([controls]) { // Source: http://github.com/necolas/normalize.css sub, sup { + position: relative; font-size: 75%; line-height: 0; - position: relative; vertical-align: baseline; } sup { @@ -91,8 +91,8 @@ sub { // ------------------------- // Source: http://github.com/necolas/normalize.css img { - border: 0; - -ms-interpolation-mode: bicubic; + border: 0; + -ms-interpolation-mode: bicubic; } // Forms @@ -104,20 +104,20 @@ button, input, select, textarea { - font-size: 100%; margin: 0; + font-size: 100%; vertical-align: baseline; *vertical-align: middle; } button, input { - line-height: normal; // FF3/4 have !important on line-height in UA stylesheet *overflow: visible; // Inner spacing ie IE6/7 + line-height: normal; // FF3/4 have !important on line-height in UA stylesheet } button::-moz-focus-inner, input::-moz-focus-inner { // Inner padding and border oddities in FF3/4 - border: 0; padding: 0; + border: 0; } button, input[type="button"], diff --git a/lib/scaffolding.less b/lib/scaffolding.less index 7b8aa369a4..179ef26387 100644 --- a/lib/scaffolding.less +++ b/lib/scaffolding.less @@ -8,12 +8,12 @@ // ----------------- body { - background-color: @white; margin: 0; font-family: @baseFontFamily; font-size: @baseFontSize; line-height: @baseLineHeight; color: @grayDark; + background-color: @white; } // Container (centered, fixed-width layouts) @@ -52,10 +52,10 @@ body { // Links a { + font-weight: inherit; + line-height: inherit; color: @linkColor; text-decoration: none; - line-height: inherit; - font-weight: inherit; &:hover { color: @linkColorHover; text-decoration: underline; diff --git a/lib/tables.less b/lib/tables.less index b02087fbd2..4aed466b11 100644 --- a/lib/tables.less +++ b/lib/tables.less @@ -130,32 +130,32 @@ table { .header { cursor: pointer; &:after { - content: ""; float: right; margin-top: 7px; border-width: 0 4px 4px; border-style: solid; border-color: #000 transparent; + content: ""; visibility: hidden; } } // Style the sorted column headers (THs) .headerSortUp, .headerSortDown { - background-color: rgba(141,192,219,.25); text-shadow: 0 1px 1px rgba(255,255,255,.75); + background-color: rgba(141,192,219,.25); } // Style the ascending (reverse alphabetical) column header .header:hover { &:after { - visibility:visible; + visibility: visible; } } // Style the descending (alphabetical) column header .headerSortDown, .headerSortDown:hover { &:after { - visibility:visible; + visibility: visible; .opacity(60); } } diff --git a/lib/tabs-pills.less b/lib/tabs-pills.less index 7e6c0bf39e..3ff08a6766 100644 --- a/lib/tabs-pills.less +++ b/lib/tabs-pills.less @@ -1,8 +1,8 @@ // Tabs and Pills .tabs, .pills { - margin: 0 0 20px; padding: 0; + margin: 0 0 20px; list-style: none; .clearfix(); > li { @@ -183,8 +183,8 @@ // Pills .pills { a { - margin: 5px 3px 5px 0; padding: 0 15px; + margin: 5px 3px 5px 0; line-height: 30px; text-shadow: 0 1px 1px @white; .border-radius(15px); @@ -208,9 +208,6 @@ } // Tabbable areas -.tab-content, -.pill-content { -} .tab-content > .tab-pane, .pill-content > .pill-pane { display: none; diff --git a/lib/twipsy.less b/lib/twipsy.less index 5d168db3e6..4193eda5fb 100644 --- a/lib/twipsy.less +++ b/lib/twipsy.less @@ -2,12 +2,12 @@ // ------ .twipsy { - display: block; position: absolute; + z-index: 1000; + display: block; visibility: visible; padding: 5px; font-size: 11px; - z-index: 1000; .opacity(80); &.fade.in { .opacity(80); @@ -18,12 +18,12 @@ &.right .twipsy-arrow { #popoverArrow > .right(); } } .twipsy-inner { + max-width: 200px; padding: 3px 8px; - background-color: @black; color: white; text-align: center; - max-width: 200px; text-decoration: none; + background-color: @black; .border-radius(4px); } .twipsy-arrow { diff --git a/lib/type.less b/lib/type.less index f5b5ff272d..8e25fd9c51 100644 --- a/lib/type.less +++ b/lib/type.less @@ -7,10 +7,10 @@ // --------- p { + margin-bottom: @baseLineHeight / 2; font-family: @baseFontFamily; font-size: @baseFontSize; line-height: @baseLineHeight; - margin-bottom: @baseLineHeight / 2; small { font-size: @baseFontSize - 2; color: @grayLight; @@ -93,8 +93,8 @@ li { color: @grayDark; } ul.unstyled { - list-style: none; margin-left: 0; + list-style: none; } // Description Lists @@ -145,12 +145,12 @@ abbr { // Blockquotes blockquote { + padding-left: 15px; margin-bottom: @baseLineHeight; border-left: 5px solid #eee; - padding-left: 15px; p { - #font > .shorthand(300,16px,@baseLineHeight * 1.25); margin-bottom: 0; + #font > .shorthand(300,16px,@baseLineHeight * 1.25); } small { display: block; @@ -174,8 +174,8 @@ blockquote { // Addresses address { display: block; - line-height: @baseLineHeight; margin-bottom: @baseLineHeight; + line-height: @baseLineHeight; } // Inline and block code styles @@ -188,16 +188,16 @@ pre { .border-radius(3px); } code { - background-color: lighten(@orange, 40%); padding: 1px 3px; + background-color: lighten(@orange, 40%); } pre { - background-color: #f5f5f5; display: block; padding: (@baseLineHeight - 1) / 2; margin: 0 0 @baseLineHeight / 2; - line-height: @baseLineHeight; font-size: 12px; + line-height: @baseLineHeight; + background-color: #f5f5f5; border: 1px solid #ccc; border: 1px solid rgba(0,0,0,.15); .border-radius(3px); -- GitLab From 0b1d5d9189ea82cde5e848e5a8771a8f4850e21f Mon Sep 17 00:00:00 2001 From: Jacob Thornton <jacobthornton@gmail.com> Date: Sun, 20 Nov 2011 18:19:50 -0800 Subject: [PATCH 081/318] revert all js stuff back to 1.4 :/ --- bootstrap.css | 247 ++++++++++++++++++--------------------- bootstrap.min.css | 152 ++++++++++++------------ js/bootstrap-alerts.js | 104 ++++++++++++++--- js/bootstrap-buttons.js | 62 ++++++++++ js/bootstrap-dropdown.js | 37 ++++-- js/bootstrap-modal.js | 131 ++++++++++++++------- js/bootstrap-popover.js | 24 +++- js/bootstrap-tabs.js | 15 ++- js/bootstrap-twipsy.js | 75 +++++++++--- 9 files changed, 543 insertions(+), 304 deletions(-) create mode 100644 js/bootstrap-buttons.js diff --git a/bootstrap.css b/bootstrap.css index e8b9d2d530..e17c454d5c 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: Thu Nov 17 00:52:01 PST 2011 + * Date: Sun Nov 20 18:13:58 PST 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). @@ -118,9 +118,9 @@ audio:not([controls]) { display: none; } sub, sup { + position: relative; font-size: 75%; line-height: 0; - position: relative; vertical-align: baseline; } sup { @@ -137,18 +137,18 @@ button, input, select, textarea { - font-size: 100%; margin: 0; + font-size: 100%; vertical-align: baseline; *vertical-align: middle; } button, input { - line-height: normal; *overflow: visible; + line-height: normal; } button::-moz-focus-inner, input::-moz-focus-inner { - border: 0; padding: 0; + border: 0; } button, input[type="button"], @@ -181,12 +181,12 @@ textarea { * Basic and global styles for generating a grid system, structural layout, and page templates * ------------------------------------------------------------------------------------------- */ body { - background-color: #ffffff; margin: 0; font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; font-size: 13px; line-height: 18px; color: #404040; + background-color: #ffffff; } .container { width: 940px; @@ -196,9 +196,9 @@ body { } .container:before, .container:after { display: table; + *display: inline; content: ""; zoom: 1; - *display: inline; } .container:after { clear: both; @@ -212,9 +212,9 @@ body { } .fluid-container:before, .fluid-container:after { display: table; + *display: inline; content: ""; zoom: 1; - *display: inline; } .fluid-container:after { clear: both; @@ -236,10 +236,10 @@ body { margin-right: 240px; } a { + font-weight: inherit; + line-height: inherit; color: #0069d6; text-decoration: none; - line-height: inherit; - font-weight: inherit; } a:hover { color: #00438a; @@ -263,9 +263,9 @@ a:hover { } .row:before, .row:after { display: table; + *display: inline; content: ""; zoom: 1; - *display: inline; } .row:after { clear: both; @@ -348,10 +348,10 @@ a:hover { * Headings, body text, lists, code, and more for a versatile and durable typography system * ---------------------------------------------------------------------------------------- */ p { + margin-bottom: 9px; font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; font-size: 13px; line-height: 18px; - margin-bottom: 9px; } p small { font-size: 11px; @@ -433,8 +433,8 @@ li { color: #404040; } ul.unstyled { - list-style: none; margin-left: 0; + list-style: none; } dl { margin-bottom: 18px; @@ -472,15 +472,15 @@ abbr { cursor: help; } blockquote { + padding-left: 15px; margin-bottom: 18px; border-left: 5px solid #eee; - padding-left: 15px; } blockquote p { + margin-bottom: 0; font-size: 300; font-weight: 16px; line-height: 22.5px; - margin-bottom: 0; } blockquote small { display: block; @@ -498,8 +498,8 @@ blockquote.pull-right p, blockquote.pull-right small { } address { display: block; - line-height: 18px; margin-bottom: 18px; + line-height: 18px; } code, pre { padding: 0 3px 2px; @@ -511,16 +511,16 @@ code, pre { border-radius: 3px; } code { - background-color: #fee9cc; padding: 1px 3px; + background-color: #fee9cc; } pre { - background-color: #f5f5f5; display: block; padding: 8.5px; margin: 0 0 9px; - line-height: 18px; font-size: 12px; + line-height: 18px; + background-color: #f5f5f5; border: 1px solid #ccc; border: 1px solid rgba(0, 0, 0, 0.15); -webkit-border-radius: 3px; @@ -593,11 +593,11 @@ input[type=checkbox], input[type=radio] { cursor: pointer; } input[type=file] { - background-color: #ffffff; - background-color: initial; padding: initial; - border: initial; line-height: initial; + border: initial; + background-color: #ffffff; + background-color: initial; -webkit-box-shadow: none; -moz-box-shadow: none; box-shadow: none; @@ -608,34 +608,34 @@ input[type=button], input[type=reset], input[type=submit] { } select, input[type=file] { height: 27px; - line-height: 27px; *margin-top: 4px; /* For IE7, add top margin to align select with labels */ + line-height: 27px; } select[multiple] { - background-color: #ffffff; height: inherit; + background-color: #ffffff; } textarea { height: auto; } input, textarea { + -webkit-box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.1); + -moz-box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.1); + box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.1); -webkit-transition: border linear 0.2s, box-shadow linear 0.2s; -moz-transition: border linear 0.2s, box-shadow linear 0.2s; -ms-transition: border linear 0.2s, box-shadow linear 0.2s; -o-transition: border linear 0.2s, box-shadow linear 0.2s; transition: border linear 0.2s, box-shadow linear 0.2s; - -webkit-box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.1); - -moz-box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.1); - box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.1); } input:focus, textarea:focus { - outline: 0; border-color: rgba(82, 168, 236, 0.8); -webkit-box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.1), 0 0 8px rgba(82, 168, 236, 0.6); -moz-box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.1), 0 0 8px rgba(82, 168, 236, 0.6); box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.1), 0 0 8px rgba(82, 168, 236, 0.6); + outline: 0; } input[type=file]:focus, input[type=checkbox]:focus, select:focus { -webkit-box-shadow: none; @@ -877,8 +877,8 @@ form .clearfix.success .input-prepend .add-on, form .clearfix.success .input-app border-top: 1px solid #ddd; } .uneditable-input { - background-color: #ffffff; display: block; + background-color: #ffffff; border-color: #eee; -webkit-box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.025); -moz-box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.025); @@ -897,14 +897,14 @@ form .clearfix.success .input-prepend .add-on, form .clearfix.success .input-app color: #bfbfbf; } .help-inline { - display: inline; - padding-left: 5px; *position: relative; /* IE6-7 */ *top: -5px; /* IE6-7 */ + display: inline; + padding-left: 5px; } .help-block { display: block; @@ -932,27 +932,27 @@ form .clearfix.success .input-prepend .add-on, form .clearfix.success .input-app } .input-prepend .add-on, .input-append .add-on { position: relative; - background: #f5f5f5; - border: 1px solid #ccc; z-index: 2; float: left; display: block; width: auto; min-width: 16px; height: 18px; - padding: 4px 4px 4px 5px; margin-right: -1px; + padding: 4px 4px 4px 5px; font-weight: normal; line-height: 18px; color: #bfbfbf; text-align: center; text-shadow: 0 1px 0 #ffffff; + background-color: #f5f5f5; + border: 1px solid #ccc; -webkit-border-radius: 3px 0 0 3px; -moz-border-radius: 3px 0 0 3px; border-radius: 3px 0 0 3px; } .input-prepend .active, .input-append .active { - background: #a9dba9; + background-color: #a9dba9; border-color: #46a546; } .input-prepend .add-on { @@ -967,11 +967,11 @@ form .clearfix.success .input-prepend .add-on, form .clearfix.success .input-app border-radius: 3px 0 0 3px; } .input-append .add-on { + margin-right: 0; + margin-left: -1px; -webkit-border-radius: 0 3px 3px 0; -moz-border-radius: 0 3px 3px 0; border-radius: 0 3px 3px 0; - margin-right: 0; - margin-left: -1px; } .search-form .search-query { -webkit-border-radius: 14px; @@ -1122,17 +1122,17 @@ table .header { cursor: pointer; } table .header:after { - content: ""; float: right; margin-top: 7px; border-width: 0 4px 4px; border-style: solid; border-color: #000 transparent; + content: ""; visibility: hidden; } table .headerSortUp, table .headerSortDown { - background-color: rgba(141, 192, 219, 0.25); text-shadow: 0 1px 1px rgba(255, 255, 255, 0.75); + background-color: rgba(141, 192, 219, 0.25); } table .header:hover:after { visibility: visible; @@ -1140,7 +1140,6 @@ table .header:hover:after { table .headerSortDown:after, table .headerSortDown:hover:after { visibility: visible; filter: alpha(opacity=60); - -khtml-opacity: 0.6; -moz-opacity: 0.6; opacity: 0.6; } @@ -1154,7 +1153,6 @@ table .headerSortUp:after { -moz-box-shadow: none; box-shadow: none; filter: alpha(opacity=60); - -khtml-opacity: 0.6; -moz-opacity: 0.6; opacity: 0.6; } @@ -1228,45 +1226,45 @@ table .headerSortUp.purple, table .headerSortDown.purple { text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25); } .navbar .brand a:hover, .navbar ul .active > a { - background-color: #333333; - background-color: rgba(255, 255, 255, 0.05); color: #ffffff; text-decoration: none; + background-color: #333333; + background-color: rgba(255, 255, 255, 0.05); } .navbar .brand { float: left; display: block; padding: 8px 20px 12px; margin-left: -20px; - color: #ffffff; font-size: 20px; font-weight: 200; line-height: 1; + color: #ffffff; } .navbar p { margin: 0; line-height: 40px; } .navbar p a:hover { - background-color: transparent; color: #ffffff; + background-color: transparent; } .navbar-search { position: relative; + float: left; margin-top: 6px; margin-bottom: 0; - float: left; } .navbar-search .search-query { - background-color: #444; - background-color: rgba(255, 255, 255, 0.3); + padding: 4px 9px; font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; font-size: 13px; font-weight: normal; line-height: 1; - padding: 4px 9px; color: #ffffff; color: rgba(255, 255, 255, 0.75); + background-color: #444; + background-color: rgba(255, 255, 255, 0.3); border: 1px solid #111; -webkit-box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1), 0 1px 0px rgba(255, 255, 255, 0.15); -moz-box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1), 0 1px 0px rgba(255, 255, 255, 0.15); @@ -1284,20 +1282,20 @@ table .headerSortUp.purple, table .headerSortDown.purple { color: #e6e6e6; } .navbar-search .search-query:hover { + color: #ffffff; background-color: #bfbfbf; background-color: rgba(255, 255, 255, 0.5); - color: #ffffff; } .navbar-search .search-query:focus, .navbar-search .search-query.focused { - outline: 0; - background-color: #ffffff; + padding: 5px 10px; color: #404040; text-shadow: 0 1px 0 #ffffff; + background-color: #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); + outline: 0; } .navbar-static { margin-bottom: 18px; @@ -1312,16 +1310,16 @@ table .headerSortUp.purple, table .headerSortDown.purple { .navbar-fixed { position: fixed; top: 0; - left: 0; right: 0; + left: 0; z-index: 10000; } .nav { + position: relative; + left: 0; display: block; float: left; margin: 0 10px 0 0; - position: relative; - left: 0; } .nav > li { display: block; @@ -1396,42 +1394,39 @@ table .headerSortUp.purple, table .headerSortDown.purple { position: relative; } .dropdown-toggle:after { + display: inline-block; width: 0; height: 0; - display: inline-block; - content: "↓"; - text-indent: -99999px; - vertical-align: top; margin-top: 8px; margin-left: 6px; + text-indent: -99999px; + vertical-align: top; border-left: 4px solid transparent; border-right: 4px solid transparent; border-top: 4px solid #ffffff; filter: alpha(opacity=30); - -khtml-opacity: 0.3; -moz-opacity: 0.3; opacity: 0.3; + content: "↓"; } .dropdown:hover .dropdown-toggle:after { filter: alpha(opacity=100); - -khtml-opacity: 1; -moz-opacity: 1; opacity: 1; } .dropdown-menu { - background-color: #ffffff; - float: left; - display: none; position: absolute; top: 40px; z-index: 900; + float: left; + display: none; min-width: 160px; max-width: 220px; _width: 160px; + padding: 6px 0; margin-left: 0; margin-right: 0; - padding: 6px 0; - zoom: 1; + background-color: #ffffff; border-color: #999; border-color: rgba(0, 0, 0, 0.2); border-style: solid; @@ -1445,6 +1440,7 @@ table .headerSortUp.purple, table .headerSortDown.purple { -webkit-background-clip: padding-box; -moz-background-clip: padding-box; background-clip: padding-box; + zoom: 1; } .dropdown-menu li { float: none; @@ -1468,6 +1464,8 @@ table .headerSortUp.purple, table .headerSortDown.purple { text-shadow: 0 1px 0 #ffffff; } .topbar .dropdown-menu a:hover, .dropdown-menu a:hover { + color: #404040; + text-decoration: none; background-color: #dddddd; background-image: -khtml-gradient(linear, left top, left bottom, from(#eeeeee), to(#dddddd)); background-image: -moz-linear-gradient(top, #eeeeee, #dddddd); @@ -1478,8 +1476,6 @@ table .headerSortUp.purple, table .headerSortDown.purple { background-image: linear-gradient(top, #eeeeee, #dddddd); background-repeat: repeat-x; 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); @@ -1493,9 +1489,9 @@ table .headerSortUp.purple, table .headerSortDown.purple { display: block; } .hero-unit { - background-color: #f5f5f5; - margin-bottom: 30px; padding: 60px; + margin-bottom: 30px; + background-color: #f5f5f5; -webkit-border-radius: 6px; -moz-border-radius: 6px; border-radius: 6px; @@ -1512,8 +1508,8 @@ table .headerSortUp.purple, table .headerSortDown.purple { line-height: 27px; } footer { - margin-top: 17px; padding-top: 17px; + margin-top: 17px; border-top: 1px solid #eee; } .page-header { @@ -1548,6 +1544,7 @@ footer { .alert-message.danger, .btn.error, .alert-message.error { + text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25); background-color: #c43c35; background-image: -khtml-gradient(linear, left top, left bottom, from(#ee5f5b), to(#c43c35)); background-image: -moz-linear-gradient(top, #ee5f5b, #c43c35); @@ -1558,11 +1555,11 @@ footer { background-image: linear-gradient(top, #ee5f5b, #c43c35); background-repeat: repeat-x; 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); } .btn.success, .alert-message.success { + text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25); background-color: #57a957; background-image: -khtml-gradient(linear, left top, left bottom, from(#62c462), to(#57a957)); background-image: -moz-linear-gradient(top, #62c462, #57a957); @@ -1573,11 +1570,11 @@ footer { background-image: linear-gradient(top, #62c462, #57a957); background-repeat: repeat-x; filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#62c462', endColorstr='#57a957', GradientType=0); - text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25); border-color: #57a957 #57a957 #3d773d; border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25); } .btn.info, .alert-message.info { + text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25); background-color: #339bb9; background-image: -khtml-gradient(linear, left top, left bottom, from(#5bc0de), to(#339bb9)); background-image: -moz-linear-gradient(top, #5bc0de, #339bb9); @@ -1588,13 +1585,16 @@ footer { background-image: linear-gradient(top, #5bc0de, #339bb9); background-repeat: repeat-x; filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#5bc0de', endColorstr='#339bb9', GradientType=0); - text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25); border-color: #339bb9 #339bb9 #22697d; border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25); } .btn { - cursor: pointer; display: inline-block; + padding: 5px 14px 6px; + font-size: 13px; + line-height: normal; + color: #333; + text-shadow: 0 1px 1px rgba(255, 255, 255, 0.75); background-color: #e6e6e6; background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#ffffff), color-stop(25%, #ffffff), to(#e6e6e6)); background-image: -webkit-linear-gradient(#ffffff, #ffffff 25%, #e6e6e6); @@ -1604,11 +1604,6 @@ footer { background-image: linear-gradient(#ffffff, #ffffff 25%, #e6e6e6); background-repeat: no-repeat; filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#e6e6e6', GradientType=0); - padding: 5px 14px 6px; - text-shadow: 0 1px 1px rgba(255, 255, 255, 0.75); - color: #333; - font-size: 13px; - line-height: normal; border: 1px solid #ccc; border-bottom-color: #bbb; -webkit-border-radius: 4px; @@ -1617,6 +1612,7 @@ footer { -webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05); -moz-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05); + cursor: pointer; -webkit-transition: 0.1s linear all; -moz-transition: 0.1s linear all; -ms-transition: 0.1s linear all; @@ -1624,15 +1620,16 @@ footer { transition: 0.1s linear all; } .btn:hover { - background-position: 0 -15px; color: #333; text-decoration: none; + background-position: 0 -15px; } .btn:focus { outline: 1px dotted #666; } .btn.primary { color: #ffffff; + text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25); background-color: #0064cd; background-image: -khtml-gradient(linear, left top, left bottom, from(#049cdb), to(#0064cd)); background-image: -moz-linear-gradient(top, #049cdb, #0064cd); @@ -1643,7 +1640,6 @@ footer { background-image: linear-gradient(top, #049cdb, #0064cd); background-repeat: repeat-x; filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#049cdb', endColorstr='#0064cd', GradientType=0); - text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25); border-color: #0064cd #0064cd #003f81; border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25); } @@ -1657,7 +1653,6 @@ footer { background-image: none; filter: progid:DXImageTransform.Microsoft.gradient(enabled = false); filter: alpha(opacity=65); - -khtml-opacity: 0.65; -moz-opacity: 0.65; opacity: 0.65; -webkit-box-shadow: none; @@ -1669,7 +1664,6 @@ footer { background-image: none; filter: progid:DXImageTransform.Microsoft.gradient(enabled = false); filter: alpha(opacity=65); - -khtml-opacity: 0.65; -moz-opacity: 0.65; opacity: 0.65; -webkit-box-shadow: none; @@ -1677,9 +1671,9 @@ footer { box-shadow: none; } .btn.large { + padding: 9px 14px 9px; font-size: 15px; line-height: normal; - padding: 9px 14px 9px; -webkit-border-radius: 6px; -moz-border-radius: 6px; border-radius: 6px; @@ -1700,9 +1694,9 @@ button.btn::-moz-focus-inner, input[type=submit].btn::-moz-focus-inner { } .btn-toolbar:before, .btn-toolbar:after { display: table; + *display: inline; content: ""; zoom: 1; - *display: inline; } .btn-toolbar:after { clear: both; @@ -1716,9 +1710,9 @@ button.btn::-moz-focus-inner, input[type=submit].btn::-moz-focus-inner { } .btn-group:before, .btn-group:after { display: table; + *display: inline; content: ""; zoom: 1; - *display: inline; } .btn-group:after { clear: both; @@ -1753,13 +1747,12 @@ button.btn::-moz-focus-inner, input[type=submit].btn::-moz-focus-inner { } .close { float: right; - color: #000000; font-size: 20px; font-weight: bold; line-height: 13.5px; + color: #000000; text-shadow: 0 1px 0 #ffffff; filter: alpha(opacity=20); - -khtml-opacity: 0.2; -moz-opacity: 0.2; opacity: 0.2; } @@ -1767,7 +1760,6 @@ button.btn::-moz-focus-inner, input[type=submit].btn::-moz-focus-inner { color: #000000; text-decoration: none; filter: alpha(opacity=40); - -khtml-opacity: 0.4; -moz-opacity: 0.4; opacity: 0.4; } @@ -1776,6 +1768,8 @@ button.btn::-moz-focus-inner, input[type=submit].btn::-moz-focus-inner { padding: 7px 15px; margin-bottom: 18px; color: #404040; + text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5); + text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25); background-color: #eedc94; background-image: -khtml-gradient(linear, left top, left bottom, from(#fceec1), to(#eedc94)); background-image: -moz-linear-gradient(top, #fceec1, #eedc94); @@ -1786,10 +1780,8 @@ button.btn::-moz-focus-inner, input[type=submit].btn::-moz-focus-inner { background-image: linear-gradient(top, #fceec1, #eedc94); background-repeat: repeat-x; filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#fceec1', endColorstr='#eedc94', GradientType=0); - text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25); border-color: #eedc94 #eedc94 #e4c652; border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25); - text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5); border-width: 1px; border-style: solid; -webkit-border-radius: 4px; @@ -1821,10 +1813,10 @@ button.btn::-moz-focus-inner, input[type=submit].btn::-moz-focus-inner { box-shadow: 0 1px 0 rgba(255, 255, 255, 0.25); } .alert-message.block-message { + padding: 14px; background-image: none; background-color: #fdf5d9; filter: progid:DXImageTransform.Microsoft.gradient(enabled = false); - padding: 14px; border-color: #fceec1; -webkit-box-shadow: none; -moz-box-shadow: none; @@ -1859,10 +1851,10 @@ button.btn::-moz-focus-inner, input[type=submit].btn::-moz-focus-inner { border-color: #c6edf9; } .well { - background-color: #f5f5f5; - margin-bottom: 20px; - padding: 19px; min-height: 20px; + padding: 19px; + margin-bottom: 20px; + background-color: #f5f5f5; border: 1px solid #eee; border: 1px solid rgba(0, 0, 0, 0.05); -webkit-border-radius: 4px; @@ -1889,11 +1881,11 @@ button.btn::-moz-focus-inner, input[type=submit].btn::-moz-focus-inner { } .label { padding: 1px 3px 2px; - background-color: #bfbfbf; font-size: 9.75px; font-weight: bold; color: #ffffff; text-transform: uppercase; + background-color: #bfbfbf; -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px; @@ -1910,15 +1902,9 @@ button.btn::-moz-focus-inner, input[type=submit].btn::-moz-focus-inner { .label.notice { background-color: #62cffc; } -.pull-right { - float: right; -} -.pull-left { - float: left; -} .tabs, .pills { - margin: 0 0 20px; padding: 0; + margin: 0 0 20px; list-style: none; zoom: 1; } @@ -1927,9 +1913,9 @@ button.btn::-moz-focus-inner, input[type=submit].btn::-moz-focus-inner { .tabs:after, .pills:after { display: table; + *display: inline; content: ""; zoom: 1; - *display: inline; } .tabs:after, .pills:after { clear: both; @@ -2005,9 +1991,9 @@ button.btn::-moz-focus-inner, input[type=submit].btn::-moz-focus-inner { .tabbable.tabs-left:after, .tabbable.tabs-right:after { display: table; + *display: inline; content: ""; zoom: 1; - *display: inline; } .tabbable.tabs-left:after, .tabbable.tabs-right:after { clear: both; @@ -2088,8 +2074,8 @@ button.btn::-moz-focus-inner, input[type=submit].btn::-moz-focus-inner { border-top-color: #555; } .pills a { - margin: 5px 3px 5px 0; padding: 0 15px; + margin: 5px 3px 5px 0; line-height: 30px; text-shadow: 0 1px 1px #ffffff; -webkit-border-radius: 15px; @@ -2117,8 +2103,8 @@ button.btn::-moz-focus-inner, input[type=submit].btn::-moz-focus-inner { display: block; } .breadcrumb { - margin: 0 0 18px; padding: 7px 14px; + margin: 0 0 18px; background-color: #f5f5f5; background-image: -khtml-gradient(linear, left top, left bottom, from(#ffffff), to(#f5f5f5)); background-image: -moz-linear-gradient(top, #ffffff, #f5f5f5); @@ -2171,39 +2157,38 @@ button.btn::-moz-focus-inner, input[type=submit].btn::-moz-focus-inner { float: left; padding: 0 14px; line-height: 34px; + text-decoration: none; border-right: 1px solid; border-right-color: #ddd; border-right-color: rgba(0, 0, 0, 0.15); *border-right-color: #ddd; /* IE6-7 */ - text-decoration: none; } .pagination a:hover, .pagination .active a { background-color: #c7eefe; } .pagination .disabled a, .pagination .disabled a:hover { - background-color: transparent; color: #bfbfbf; + background-color: transparent; } .pagination .next a { border: 0; } .modal-backdrop { - background-color: #000000; position: fixed; top: 0; - left: 0; right: 0; bottom: 0; + left: 0; z-index: 10000; + background-color: #000000; } .modal-backdrop.fade { opacity: 0; } .modal-backdrop, .modal-backdrop.fade.in { filter: alpha(opacity=80); - -khtml-opacity: 0.8; -moz-opacity: 0.8; opacity: 0.8; } @@ -2245,15 +2230,16 @@ button.btn::-moz-focus-inner, input[type=submit].btn::-moz-focus-inner { top: 50%; } .modal-header { - border-bottom: 1px solid #eee; padding: 5px 15px; + border-bottom: 1px solid #eee; } .modal-body { padding: 15px; } .modal-footer { - background-color: #f5f5f5; padding: 14px 15px 15px; + margin-bottom: 0; + background-color: #f5f5f5; border-top: 1px solid #ddd; -webkit-border-radius: 0 0 6px 6px; -moz-border-radius: 0 0 6px 6px; @@ -2262,13 +2248,12 @@ button.btn::-moz-focus-inner, input[type=submit].btn::-moz-focus-inner { -moz-box-shadow: inset 0 1px 0 #ffffff; box-shadow: inset 0 1px 0 #ffffff; zoom: 1; - margin-bottom: 0; } .modal-footer:before, .modal-footer:after { display: table; + *display: inline; content: ""; zoom: 1; - *display: inline; } .modal-footer:after { clear: both; @@ -2278,20 +2263,18 @@ button.btn::-moz-focus-inner, input[type=submit].btn::-moz-focus-inner { margin-left: 5px; } .twipsy { - display: block; position: absolute; + z-index: 1000; + display: block; visibility: visible; padding: 5px; font-size: 11px; - z-index: 1000; filter: alpha(opacity=80); - -khtml-opacity: 0.8; -moz-opacity: 0.8; opacity: 0.8; } .twipsy.fade.in { filter: alpha(opacity=80); - -khtml-opacity: 0.8; -moz-opacity: 0.8; opacity: 0.8; } @@ -2328,12 +2311,12 @@ button.btn::-moz-focus-inner, input[type=submit].btn::-moz-focus-inner { border-right: 5px solid #000000; } .twipsy-inner { + max-width: 200px; padding: 3px 8px; - background-color: #000000; color: white; text-align: center; - max-width: 200px; text-decoration: none; + background-color: #000000; -webkit-border-radius: 4px; -moz-border-radius: 4px; border-radius: 4px; @@ -2348,8 +2331,8 @@ button.btn::-moz-focus-inner, input[type=submit].btn::-moz-focus-inner { top: 0; left: 0; z-index: 1000; - padding: 5px; display: none; + padding: 5px; } .popover.above .arrow { bottom: 0; @@ -2389,11 +2372,11 @@ button.btn::-moz-focus-inner, input[type=submit].btn::-moz-focus-inner { height: 0; } .popover .inner { - background-color: #000000; - background-color: rgba(0, 0, 0, 0.8); padding: 3px; - overflow: hidden; width: 280px; + overflow: hidden; + background-color: #000000; + background-color: rgba(0, 0, 0, 0.8); -webkit-border-radius: 6px; -moz-border-radius: 6px; border-radius: 6px; @@ -2402,17 +2385,17 @@ button.btn::-moz-focus-inner, input[type=submit].btn::-moz-focus-inner { box-shadow: 0 3px 7px rgba(0, 0, 0, 0.3); } .popover .title { - background-color: #f5f5f5; padding: 9px 15px; line-height: 1; + background-color: #f5f5f5; + border-bottom: 1px solid #eee; -webkit-border-radius: 3px 3px 0 0; -moz-border-radius: 3px 3px 0 0; border-radius: 3px 3px 0 0; - border-bottom: 1px solid #eee; } .popover .content { - background-color: #ffffff; padding: 14px; + background-color: #ffffff; -webkit-border-radius: 0 0 3px 3px; -moz-border-radius: 0 0 3px 3px; border-radius: 0 0 3px 3px; @@ -2430,9 +2413,9 @@ button.btn::-moz-focus-inner, input[type=submit].btn::-moz-focus-inner { } .media-grid:before, .media-grid:after { display: table; + *display: inline; content: ""; zoom: 1; - *display: inline; } .media-grid:after { clear: both; diff --git a/bootstrap.min.css b/bootstrap.min.css index 832d50ff81..e0584b480f 100644 --- a/bootstrap.min.css +++ b/bootstrap.min.css @@ -9,33 +9,33 @@ a:hover,a:active{outline:0;} article,aside,details,figcaption,figure,footer,header,hgroup,nav,section{display:block;} audio,canvas,video{display:inline-block;*display:inline;*zoom:1;} audio:not([controls]){display:none;} -sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline;} +sub,sup{position:relative;font-size:75%;line-height:0;vertical-align:baseline;} sup{top:-0.5em;} sub{bottom:-0.25em;} img{border:0;-ms-interpolation-mode:bicubic;} -button,input,select,textarea{font-size:100%;margin:0;vertical-align:baseline;*vertical-align:middle;} -button,input{line-height:normal;*overflow:visible;} -button::-moz-focus-inner,input::-moz-focus-inner{border:0;padding:0;} +button,input,select,textarea{margin:0;font-size:100%;vertical-align:baseline;*vertical-align:middle;} +button,input{*overflow:visible;line-height:normal;} +button::-moz-focus-inner,input::-moz-focus-inner{padding:0;border:0;} button,input[type="button"],input[type="reset"],input[type="submit"]{cursor:pointer;-webkit-appearance:button;} input[type="search"]{-webkit-appearance:textfield;-webkit-box-sizing:content-box;-moz-box-sizing:content-box;box-sizing:content-box;} input[type="search"]::-webkit-search-decoration{-webkit-appearance:none;} textarea{overflow:auto;vertical-align:top;} -body{background-color:#ffffff;margin:0;font-family:"Helvetica Neue",Helvetica,Arial,sans-serif;font-size:13px;line-height:18px;color:#404040;} -.container{width:940px;margin-left:auto;margin-right:auto;zoom:1;}.container:before,.container:after{display:table;content:"";zoom:1;*display:inline;} +body{margin:0;font-family:"Helvetica Neue",Helvetica,Arial,sans-serif;font-size:13px;line-height:18px;color:#404040;background-color:#ffffff;} +.container{width:940px;margin-left:auto;margin-right:auto;zoom:1;}.container:before,.container:after{display:table;*display:inline;content:"";zoom:1;} .container:after{clear:both;} -.fluid-container{position:relative;min-width:940px;padding-left:20px;padding-right:20px;zoom:1;}.fluid-container:before,.fluid-container:after{display:table;content:"";zoom:1;*display:inline;} +.fluid-container{position:relative;min-width:940px;padding-left:20px;padding-right:20px;zoom:1;}.fluid-container:before,.fluid-container:after{display:table;*display:inline;content:"";zoom:1;} .fluid-container:after{clear:both;} .fluid-sidebar-left,.fluid-sidebar-right{width:220px;} .fluid-sidebar-left{float:left;} .fluid-sidebar-right{float:right;} .fluid-content{margin-left:240px;} .fluid-container.reverse .fluid-content{margin-left:0;margin-right:240px;} -a{color:#0069d6;text-decoration:none;line-height:inherit;font-weight:inherit;}a:hover{color:#00438a;text-decoration:underline;} +a{font-weight:inherit;line-height:inherit;color:#0069d6;text-decoration:none;}a:hover{color:#00438a;text-decoration:underline;} .pull-right{float:right;} .pull-left{float:left;} .hide{display:none;} .show{display:block;} -.row{margin-left:-20px;zoom:1;}.row:before,.row:after{display:table;content:"";zoom:1;*display:inline;} +.row{margin-left:-20px;zoom:1;}.row:before,.row:after{display:table;*display:inline;content:"";zoom:1;} .row:after{clear:both;} [class*="span"]{display:inline;float:left;margin-left:20px;} .span1{width:60px;} @@ -61,7 +61,7 @@ a{color:#0069d6;text-decoration:none;line-height:inherit;font-weight:inherit;}a: .offset9{margin-left:740px;} .offset10{margin-left:820px;} .offset11{margin-left:900px;} -p{font-family:"Helvetica Neue",Helvetica,Arial,sans-serif;font-size:13px;line-height:18px;margin-bottom:9px;}p small{font-size:11px;color:#bfbfbf;} +p{margin-bottom:9px;font-family:"Helvetica Neue",Helvetica,Arial,sans-serif;font-size:13px;line-height:18px;}p small{font-size:11px;color:#bfbfbf;} h1,h2,h3,h4,h5,h6{font-weight:bold;color:#404040;text-rendering:optimizelegibility;}h1 small,h2 small,h3 small,h4 small,h5 small,h6 small{color:#bfbfbf;} h1{font-size:30px;line-height:36px;}h1 small{font-size:18px;} h2{font-size:24px;line-height:36px;}h2 small{font-size:18px;} @@ -74,7 +74,7 @@ ul ul,ul ol,ol ol,ol ul{margin-bottom:0;} ul{list-style:disc;} ol{list-style:decimal;} li{line-height:18px;color:#404040;} -ul.unstyled{list-style:none;margin-left:0;} +ul.unstyled{margin-left:0;list-style:none;} dl{margin-bottom:18px;}dl dt,dl dd{line-height:18px;} dl dt{font-weight:bold;} dl dd{margin-left:9px;} @@ -83,26 +83,26 @@ strong{font-style:inherit;font-weight:bold;} em{font-style:italic;font-weight:inherit;line-height:inherit;} .muted{color:#bfbfbf;} abbr{font-size:90%;text-transform:uppercase;border-bottom:1px dotted #ddd;cursor:help;} -blockquote{margin-bottom:18px;border-left:5px solid #eee;padding-left:15px;}blockquote p{font-size:300;font-weight:16px;line-height:22.5px;margin-bottom:0;} +blockquote{padding-left:15px;margin-bottom:18px;border-left:5px solid #eee;}blockquote p{margin-bottom:0;font-size:300;font-weight:16px;line-height:22.5px;} blockquote small{display:block;line-height:18px;color:#bfbfbf;}blockquote small:before{content:'\2014 \00A0';} blockquote.pull-right{float:right;}blockquote.pull-right p,blockquote.pull-right small{text-align:right;} -address{display:block;line-height:18px;margin-bottom:18px;} +address{display:block;margin-bottom:18px;line-height:18px;} code,pre{padding:0 3px 2px;font-family:"Menlo",Monaco,Courier New,monospace;font-size:12px;color:#404040;-webkit-border-radius:3px;-moz-border-radius:3px;border-radius:3px;} -code{background-color:#fee9cc;padding:1px 3px;} -pre{background-color:#f5f5f5;display:block;padding:8.5px;margin:0 0 9px;line-height:18px;font-size:12px;border:1px solid #ccc;border:1px solid rgba(0, 0, 0, 0.15);-webkit-border-radius:3px;-moz-border-radius:3px;border-radius:3px;white-space:pre;white-space:pre-wrap;word-break:break-all;}pre code{padding:0;background-color:transparent;} +code{padding:1px 3px;background-color:#fee9cc;} +pre{display:block;padding:8.5px;margin:0 0 9px;font-size:12px;line-height:18px;background-color:#f5f5f5;border:1px solid #ccc;border:1px solid rgba(0, 0, 0, 0.15);-webkit-border-radius:3px;-moz-border-radius:3px;border-radius:3px;white-space:pre;white-space:pre-wrap;word-break:break-all;}pre code{padding:0;background-color:transparent;} form{margin-bottom:18px;} legend{display:block;width:100%;margin-bottom:27px;font-size:19.5px;line-height:36px;color:#404040;border-bottom:1px solid #eee;} label,input,select,textarea{font-family:"Helvetica Neue",Helvetica,Arial,sans-serif;font-size:normal;font-weight:13px;line-height:18px;} label{display:block;margin-bottom:5px;color:#404040;} input,textarea,select,.uneditable-input{display:inline-block;width:210px;height:18px;padding:4px;font-size:13px;line-height:18px;color:#808080;border:1px solid #ccc;-webkit-border-radius:3px;-moz-border-radius:3px;border-radius:3px;} input[type=checkbox],input[type=radio]{width:auto;height:auto;padding:0;margin:3px 0;*margin-top:0;line-height:normal;border:none;cursor:pointer;} -input[type=file]{background-color:#ffffff;background-color:initial;padding:initial;border:initial;line-height:initial;-webkit-box-shadow:none;-moz-box-shadow:none;box-shadow:none;} +input[type=file]{padding:initial;line-height:initial;border:initial;background-color:#ffffff;background-color:initial;-webkit-box-shadow:none;-moz-box-shadow:none;box-shadow:none;} input[type=button],input[type=reset],input[type=submit]{width:auto;height:auto;} -select,input[type=file]{height:27px;line-height:27px;*margin-top:4px;} -select[multiple]{background-color:#ffffff;height:inherit;} +select,input[type=file]{height:27px;*margin-top:4px;line-height:27px;} +select[multiple]{height:inherit;background-color:#ffffff;} textarea{height:auto;} -input,textarea{-webkit-transition:border linear 0.2s,box-shadow linear 0.2s;-moz-transition:border linear 0.2s,box-shadow linear 0.2s;-ms-transition:border linear 0.2s,box-shadow linear 0.2s;-o-transition:border linear 0.2s,box-shadow linear 0.2s;transition:border linear 0.2s,box-shadow linear 0.2s;-webkit-box-shadow:inset 0 1px 3px rgba(0, 0, 0, 0.1);-moz-box-shadow:inset 0 1px 3px rgba(0, 0, 0, 0.1);box-shadow:inset 0 1px 3px rgba(0, 0, 0, 0.1);} -input:focus,textarea:focus{outline:0;border-color:rgba(82, 168, 236, 0.8);-webkit-box-shadow:inset 0 1px 3px rgba(0, 0, 0, 0.1),0 0 8px rgba(82, 168, 236, 0.6);-moz-box-shadow:inset 0 1px 3px rgba(0, 0, 0, 0.1),0 0 8px rgba(82, 168, 236, 0.6);box-shadow:inset 0 1px 3px rgba(0, 0, 0, 0.1),0 0 8px rgba(82, 168, 236, 0.6);} +input,textarea{-webkit-box-shadow:inset 0 1px 3px rgba(0, 0, 0, 0.1);-moz-box-shadow:inset 0 1px 3px rgba(0, 0, 0, 0.1);box-shadow:inset 0 1px 3px rgba(0, 0, 0, 0.1);-webkit-transition:border linear 0.2s,box-shadow linear 0.2s;-moz-transition:border linear 0.2s,box-shadow linear 0.2s;-ms-transition:border linear 0.2s,box-shadow linear 0.2s;-o-transition:border linear 0.2s,box-shadow linear 0.2s;transition:border linear 0.2s,box-shadow linear 0.2s;} +input:focus,textarea:focus{border-color:rgba(82, 168, 236, 0.8);-webkit-box-shadow:inset 0 1px 3px rgba(0, 0, 0, 0.1),0 0 8px rgba(82, 168, 236, 0.6);-moz-box-shadow:inset 0 1px 3px rgba(0, 0, 0, 0.1),0 0 8px rgba(82, 168, 236, 0.6);box-shadow:inset 0 1px 3px rgba(0, 0, 0, 0.1),0 0 8px rgba(82, 168, 236, 0.6);outline:0;} input[type=file]:focus,input[type=checkbox]:focus,select:focus{-webkit-box-shadow:none;-moz-box-shadow:none;box-shadow:none;outline:1px dotted #666;} .input-mini{width:60px;} .input-small{width:90px;} @@ -137,22 +137,22 @@ form .clearfix.success>label,form .clearfix.success .help-block,form .clearfix.s form .clearfix.success input,form .clearfix.success textarea{color:#468847;border-color:#57a957;}form .clearfix.success input:focus,form .clearfix.success textarea:focus{border-color:#458845;-webkit-box-shadow:0 0 6px #9acc9a;-moz-box-shadow:0 0 6px #9acc9a;box-shadow:0 0 6px #9acc9a;} form .clearfix.success .input-prepend .add-on,form .clearfix.success .input-append .add-on{color:#468847;background-color:#bcddbc;border-color:#468847;} .form-actions{padding:17px 20px 18px;margin-top:18px;margin-bottom:18px;background-color:#f5f5f5;border-top:1px solid #ddd;} -.uneditable-input{background-color:#ffffff;display:block;border-color:#eee;-webkit-box-shadow:inset 0 1px 2px rgba(0, 0, 0, 0.025);-moz-box-shadow:inset 0 1px 2px rgba(0, 0, 0, 0.025);box-shadow:inset 0 1px 2px rgba(0, 0, 0, 0.025);cursor:not-allowed;} +.uneditable-input{display:block;background-color:#ffffff;border-color:#eee;-webkit-box-shadow:inset 0 1px 2px rgba(0, 0, 0, 0.025);-moz-box-shadow:inset 0 1px 2px rgba(0, 0, 0, 0.025);box-shadow:inset 0 1px 2px rgba(0, 0, 0, 0.025);cursor:not-allowed;} :-moz-placeholder{color:#bfbfbf;} ::-webkit-input-placeholder{color:#bfbfbf;} .help-text{margin-top:5px;margin-bottom:0;color:#bfbfbf;} -.help-inline{display:inline;padding-left:5px;*position:relative;*top:-5px;} +.help-inline{*position:relative;*top:-5px;display:inline;padding-left:5px;} .help-block{display:block;max-width:600px;} .inline-inputs{color:#808080;}.inline-inputs span,.inline-inputs input{display:inline-block;} .inline-inputs input.mini{width:60px;} .inline-inputs input.small{width:90px;} .inline-inputs span{padding:0 2px 0 1px;} .input-prepend input,.input-append input{-webkit-border-radius:0 3px 3px 0;-moz-border-radius:0 3px 3px 0;border-radius:0 3px 3px 0;} -.input-prepend .add-on,.input-append .add-on{position:relative;background:#f5f5f5;border:1px solid #ccc;z-index:2;float:left;display:block;width:auto;min-width:16px;height:18px;padding:4px 4px 4px 5px;margin-right:-1px;font-weight:normal;line-height:18px;color:#bfbfbf;text-align:center;text-shadow:0 1px 0 #ffffff;-webkit-border-radius:3px 0 0 3px;-moz-border-radius:3px 0 0 3px;border-radius:3px 0 0 3px;} -.input-prepend .active,.input-append .active{background:#a9dba9;border-color:#46a546;} +.input-prepend .add-on,.input-append .add-on{position:relative;z-index:2;float:left;display:block;width:auto;min-width:16px;height:18px;margin-right:-1px;padding:4px 4px 4px 5px;font-weight:normal;line-height:18px;color:#bfbfbf;text-align:center;text-shadow:0 1px 0 #ffffff;background-color:#f5f5f5;border:1px solid #ccc;-webkit-border-radius:3px 0 0 3px;-moz-border-radius:3px 0 0 3px;border-radius:3px 0 0 3px;} +.input-prepend .active,.input-append .active{background-color:#a9dba9;border-color:#46a546;} .input-prepend .add-on{*margin-top:1px;} .input-append input{float:left;-webkit-border-radius:3px 0 0 3px;-moz-border-radius:3px 0 0 3px;border-radius:3px 0 0 3px;} -.input-append .add-on{-webkit-border-radius:0 3px 3px 0;-moz-border-radius:0 3px 3px 0;border-radius:0 3px 3px 0;margin-right:0;margin-left:-1px;} +.input-append .add-on{margin-right:0;margin-left:-1px;-webkit-border-radius:0 3px 3px 0;-moz-border-radius:0 3px 3px 0;border-radius:0 3px 3px 0;} .search-form .search-query{-webkit-border-radius:14px;-moz-border-radius:14px;border-radius:14px;} .control-group{margin-bottom:18px;} .control-group>label{font-weight:bold;} @@ -188,11 +188,11 @@ table .span15{width:1160px;} table .span16{width:1240px;} .striped-table tbody tr:nth-child(odd) td,.striped-table tbody tr:nth-child(odd) th{background-color:#f9f9f9;} .striped-table tbody tr:hover td,.striped-table tbody tr:hover th{background-color:#f5f5f5;} -table .header{cursor:pointer;}table .header:after{content:"";float:right;margin-top:7px;border-width:0 4px 4px;border-style:solid;border-color:#000 transparent;visibility:hidden;} -table .headerSortUp,table .headerSortDown{background-color:rgba(141, 192, 219, 0.25);text-shadow:0 1px 1px rgba(255, 255, 255, 0.75);} +table .header{cursor:pointer;}table .header:after{float:right;margin-top:7px;border-width:0 4px 4px;border-style:solid;border-color:#000 transparent;content:"";visibility:hidden;} +table .headerSortUp,table .headerSortDown{text-shadow:0 1px 1px rgba(255, 255, 255, 0.75);background-color:rgba(141, 192, 219, 0.25);} table .header:hover:after{visibility:visible;} -table .headerSortDown:after,table .headerSortDown:hover:after{visibility:visible;filter:alpha(opacity=60);-khtml-opacity:0.6;-moz-opacity:0.6;opacity:0.6;} -table .headerSortUp:after{border-bottom:none;border-left:4px solid transparent;border-right:4px solid transparent;border-top:4px solid #000;visibility:visible;-webkit-box-shadow:none;-moz-box-shadow:none;box-shadow:none;filter:alpha(opacity=60);-khtml-opacity:0.6;-moz-opacity:0.6;opacity:0.6;} +table .headerSortDown:after,table .headerSortDown:hover:after{visibility:visible;filter:alpha(opacity=60);-moz-opacity:0.6;opacity:0.6;} +table .headerSortUp:after{border-bottom:none;border-left:4px solid transparent;border-right:4px solid transparent;border-top:4px solid #000;visibility:visible;-webkit-box-shadow:none;-moz-box-shadow:none;box-shadow:none;filter:alpha(opacity=60);-moz-opacity:0.6;opacity:0.6;} table .blue{color:#049cdb;border-bottom-color:#049cdb;} table .headerSortUp.blue,table .headerSortDown.blue{background-color:#ade6fe;} table .green{color:#46a546;border-bottom-color:#46a546;} @@ -208,17 +208,17 @@ table .headerSortUp.purple,table .headerSortDown.purple{background-color:#e2d5f0 .navbar{height:40px;overflow:visible;} .navbar-inner{background-color:#222222;background-color:#222222;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);background-repeat:repeat-x;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);} .navbar a{color:#bfbfbf;text-shadow:0 -1px 0 rgba(0, 0, 0, 0.25);} -.navbar .brand a:hover,.navbar ul .active>a{background-color:#333333;background-color:rgba(255, 255, 255, 0.05);color:#ffffff;text-decoration:none;} -.navbar .brand{float:left;display:block;padding:8px 20px 12px;margin-left:-20px;color:#ffffff;font-size:20px;font-weight:200;line-height:1;} -.navbar p{margin:0;line-height:40px;}.navbar p a:hover{background-color:transparent;color:#ffffff;} -.navbar-search{position:relative;margin-top:6px;margin-bottom:0;float:left;}.navbar-search .search-query{background-color:#444;background-color:rgba(255, 255, 255, 0.3);font-family:"Helvetica Neue",Helvetica,Arial,sans-serif;font-size:13px;font-weight:normal;line-height:1;padding:4px 9px;color:#ffffff;color:rgba(255, 255, 255, 0.75);border:1px solid #111;-webkit-box-shadow:inset 0 1px 2px rgba(0, 0, 0, 0.1),0 1px 0px rgba(255, 255, 255, 0.15);-moz-box-shadow:inset 0 1px 2px rgba(0, 0, 0, 0.1),0 1px 0px rgba(255, 255, 255, 0.15);box-shadow:inset 0 1px 2px rgba(0, 0, 0, 0.1),0 1px 0px rgba(255, 255, 255, 0.15);-webkit-transition:none;-moz-transition:none;-ms-transition:none;-o-transition:none;transition:none;}.navbar-search .search-query:-moz-placeholder{color:#e6e6e6;} +.navbar .brand a:hover,.navbar ul .active>a{color:#ffffff;text-decoration:none;background-color:#333333;background-color:rgba(255, 255, 255, 0.05);} +.navbar .brand{float:left;display:block;padding:8px 20px 12px;margin-left:-20px;font-size:20px;font-weight:200;line-height:1;color:#ffffff;} +.navbar p{margin:0;line-height:40px;}.navbar p a:hover{color:#ffffff;background-color:transparent;} +.navbar-search{position:relative;float:left;margin-top:6px;margin-bottom:0;}.navbar-search .search-query{padding:4px 9px;font-family:"Helvetica Neue",Helvetica,Arial,sans-serif;font-size:13px;font-weight:normal;line-height:1;color:#ffffff;color:rgba(255, 255, 255, 0.75);background-color:#444;background-color:rgba(255, 255, 255, 0.3);border:1px solid #111;-webkit-box-shadow:inset 0 1px 2px rgba(0, 0, 0, 0.1),0 1px 0px rgba(255, 255, 255, 0.15);-moz-box-shadow:inset 0 1px 2px rgba(0, 0, 0, 0.1),0 1px 0px rgba(255, 255, 255, 0.15);box-shadow:inset 0 1px 2px rgba(0, 0, 0, 0.1),0 1px 0px rgba(255, 255, 255, 0.15);-webkit-transition:none;-moz-transition:none;-ms-transition:none;-o-transition:none;transition:none;}.navbar-search .search-query:-moz-placeholder{color:#e6e6e6;} .navbar-search .search-query::-webkit-input-placeholder{color:#e6e6e6;} -.navbar-search .search-query:hover{background-color:#bfbfbf;background-color:rgba(255, 255, 255, 0.5);color:#ffffff;} -.navbar-search .search-query:focus,.navbar-search .search-query.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);} +.navbar-search .search-query:hover{color:#ffffff;background-color:#bfbfbf;background-color:rgba(255, 255, 255, 0.5);} +.navbar-search .search-query:focus,.navbar-search .search-query.focused{padding:5px 10px;color:#404040;text-shadow:0 1px 0 #ffffff;background-color:#ffffff;border:0;-webkit-box-shadow:0 0 3px rgba(0, 0, 0, 0.15);-moz-box-shadow:0 0 3px rgba(0, 0, 0, 0.15);box-shadow:0 0 3px rgba(0, 0, 0, 0.15);outline:0;} .navbar-static{margin-bottom:18px;} .navbar-static .navbar-inner{padding-left:20px;padding-right:20px;-webkit-border-radius:4px;-moz-border-radius:4px;border-radius:4px;} -.navbar-fixed{position:fixed;top:0;left:0;right:0;z-index:10000;} -.nav{display:block;float:left;margin:0 10px 0 0;position:relative;left:0;}.nav>li{display:block;float:left;} +.navbar-fixed{position:fixed;top:0;right:0;left:0;z-index:10000;} +.nav{position:relative;left:0;display:block;float:left;margin:0 10px 0 0;}.nav>li{display:block;float:left;} .nav a{display:block;float:none;padding:10px 10px 11px;line-height:19px;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;} @@ -229,46 +229,46 @@ table .headerSortUp.purple,table .headerSortDown.purple{background-color:#e2d5f0 .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:6px;border-left:4px solid transparent;border-right:4px solid transparent;border-top:4px solid #ffffff;filter:alpha(opacity=30);-khtml-opacity:0.3;-moz-opacity:0.3;opacity:0.3;} -.dropdown:hover .dropdown-toggle:after{filter:alpha(opacity=100);-khtml-opacity:1;-moz-opacity:1;opacity:1;} -.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-toggle:after{display:inline-block;width:0;height:0;margin-top:8px;margin-left:6px;text-indent:-99999px;vertical-align:top;border-left:4px solid transparent;border-right:4px solid transparent;border-top:4px solid #ffffff;filter:alpha(opacity=30);-moz-opacity:0.3;opacity:0.3;content:"↓";} +.dropdown:hover .dropdown-toggle:after{filter:alpha(opacity=100);-moz-opacity:1;opacity:1;} +.dropdown-menu{position:absolute;top:40px;z-index:900;float:left;display:none;min-width:160px;max-width:220px;_width:160px;padding:6px 0;margin-left:0;margin-right:0;background-color:#ffffff;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;zoom:1;}.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-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);background-repeat:repeat-x;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);} +.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{color:#404040;text-decoration:none;background-color:#dddddd;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);background-repeat:repeat-x;filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#eeeeee', endColorstr='#dddddd', GradientType=0);-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.open .dropdown-toggle{color:#ffffff;background:#ccc;background:rgba(0, 0, 0, 0.3);} .dropdown.open .dropdown-menu{display:block;} -.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{padding:60px;margin-bottom:30px;background-color:#f5f5f5;-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;} +footer{padding-top:17px;margin-top:17px;border-top:1px solid #eee;} .page-header{margin-bottom:27px;border-bottom:1px solid #eee;-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:13.5px;} .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-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);background-repeat:repeat-x;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);} -.btn.success,.alert-message.success{background-color:#57a957;background-image:-khtml-gradient(linear, left top, left bottom, from(#62c462), to(#57a957));background-image:-moz-linear-gradient(top, #62c462, #57a957);background-image:-ms-linear-gradient(top, #62c462, #57a957);background-image:-webkit-gradient(linear, left top, left bottom, color-stop(0%, #62c462), color-stop(100%, #57a957));background-image:-webkit-linear-gradient(top, #62c462, #57a957);background-image:-o-linear-gradient(top, #62c462, #57a957);background-image:linear-gradient(top, #62c462, #57a957);background-repeat:repeat-x;filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#62c462', endColorstr='#57a957', GradientType=0);text-shadow:0 -1px 0 rgba(0, 0, 0, 0.25);border-color:#57a957 #57a957 #3d773d;border-color:rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);} -.btn.info,.alert-message.info{background-color:#339bb9;background-image:-khtml-gradient(linear, left top, left bottom, from(#5bc0de), to(#339bb9));background-image:-moz-linear-gradient(top, #5bc0de, #339bb9);background-image:-ms-linear-gradient(top, #5bc0de, #339bb9);background-image:-webkit-gradient(linear, left top, left bottom, color-stop(0%, #5bc0de), color-stop(100%, #339bb9));background-image:-webkit-linear-gradient(top, #5bc0de, #339bb9);background-image:-o-linear-gradient(top, #5bc0de, #339bb9);background-image:linear-gradient(top, #5bc0de, #339bb9);background-repeat:repeat-x;filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#5bc0de', endColorstr='#339bb9', GradientType=0);text-shadow:0 -1px 0 rgba(0, 0, 0, 0.25);border-color:#339bb9 #339bb9 #22697d;border-color:rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);} -.btn{cursor:pointer;display:inline-block;background-color:#e6e6e6;background-image:-webkit-gradient(linear, 0 0, 0 100%, from(#ffffff), color-stop(25%, #ffffff), to(#e6e6e6));background-image:-webkit-linear-gradient(#ffffff, #ffffff 25%, #e6e6e6);background-image:-moz-linear-gradient(top, #ffffff, #ffffff 25%, #e6e6e6);background-image:-ms-linear-gradient(#ffffff, #ffffff 25%, #e6e6e6);background-image:-o-linear-gradient(#ffffff, #ffffff 25%, #e6e6e6);background-image:linear-gradient(#ffffff, #ffffff 25%, #e6e6e6);background-repeat:no-repeat;filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#e6e6e6', GradientType=0);padding:5px 14px 6px;text-shadow:0 1px 1px rgba(255, 255, 255, 0.75);color:#333;font-size:13px;line-height:normal;border:1px solid #ccc;border-bottom-color:#bbb;-webkit-border-radius:4px;-moz-border-radius:4px;border-radius:4px;-webkit-box-shadow:inset 0 1px 0 rgba(255, 255, 255, 0.2),0 1px 2px rgba(0, 0, 0, 0.05);-moz-box-shadow:inset 0 1px 0 rgba(255, 255, 255, 0.2),0 1px 2px rgba(0, 0, 0, 0.05);box-shadow:inset 0 1px 0 rgba(255, 255, 255, 0.2),0 1px 2px rgba(0, 0, 0, 0.05);-webkit-transition:0.1s linear all;-moz-transition:0.1s linear all;-ms-transition:0.1s linear all;-o-transition:0.1s linear all;transition:0.1s linear all;}.btn:hover{background-position:0 -15px;color:#333;text-decoration:none;} +.btn.danger,.alert-message.danger,.btn.error,.alert-message.error{text-shadow:0 -1px 0 rgba(0, 0, 0, 0.25);background-color:#c43c35;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);background-repeat:repeat-x;filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ee5f5b', endColorstr='#c43c35', GradientType=0);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);} +.btn.success,.alert-message.success{text-shadow:0 -1px 0 rgba(0, 0, 0, 0.25);background-color:#57a957;background-image:-khtml-gradient(linear, left top, left bottom, from(#62c462), to(#57a957));background-image:-moz-linear-gradient(top, #62c462, #57a957);background-image:-ms-linear-gradient(top, #62c462, #57a957);background-image:-webkit-gradient(linear, left top, left bottom, color-stop(0%, #62c462), color-stop(100%, #57a957));background-image:-webkit-linear-gradient(top, #62c462, #57a957);background-image:-o-linear-gradient(top, #62c462, #57a957);background-image:linear-gradient(top, #62c462, #57a957);background-repeat:repeat-x;filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#62c462', endColorstr='#57a957', GradientType=0);border-color:#57a957 #57a957 #3d773d;border-color:rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);} +.btn.info,.alert-message.info{text-shadow:0 -1px 0 rgba(0, 0, 0, 0.25);background-color:#339bb9;background-image:-khtml-gradient(linear, left top, left bottom, from(#5bc0de), to(#339bb9));background-image:-moz-linear-gradient(top, #5bc0de, #339bb9);background-image:-ms-linear-gradient(top, #5bc0de, #339bb9);background-image:-webkit-gradient(linear, left top, left bottom, color-stop(0%, #5bc0de), color-stop(100%, #339bb9));background-image:-webkit-linear-gradient(top, #5bc0de, #339bb9);background-image:-o-linear-gradient(top, #5bc0de, #339bb9);background-image:linear-gradient(top, #5bc0de, #339bb9);background-repeat:repeat-x;filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#5bc0de', endColorstr='#339bb9', GradientType=0);border-color:#339bb9 #339bb9 #22697d;border-color:rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);} +.btn{display:inline-block;padding:5px 14px 6px;font-size:13px;line-height:normal;color:#333;text-shadow:0 1px 1px rgba(255, 255, 255, 0.75);background-color:#e6e6e6;background-image:-webkit-gradient(linear, 0 0, 0 100%, from(#ffffff), color-stop(25%, #ffffff), to(#e6e6e6));background-image:-webkit-linear-gradient(#ffffff, #ffffff 25%, #e6e6e6);background-image:-moz-linear-gradient(top, #ffffff, #ffffff 25%, #e6e6e6);background-image:-ms-linear-gradient(#ffffff, #ffffff 25%, #e6e6e6);background-image:-o-linear-gradient(#ffffff, #ffffff 25%, #e6e6e6);background-image:linear-gradient(#ffffff, #ffffff 25%, #e6e6e6);background-repeat:no-repeat;filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#e6e6e6', GradientType=0);border:1px solid #ccc;border-bottom-color:#bbb;-webkit-border-radius:4px;-moz-border-radius:4px;border-radius:4px;-webkit-box-shadow:inset 0 1px 0 rgba(255, 255, 255, 0.2),0 1px 2px rgba(0, 0, 0, 0.05);-moz-box-shadow:inset 0 1px 0 rgba(255, 255, 255, 0.2),0 1px 2px rgba(0, 0, 0, 0.05);box-shadow:inset 0 1px 0 rgba(255, 255, 255, 0.2),0 1px 2px rgba(0, 0, 0, 0.05);cursor:pointer;-webkit-transition:0.1s linear all;-moz-transition:0.1s linear all;-ms-transition:0.1s linear all;-o-transition:0.1s linear all;transition:0.1s linear all;}.btn:hover{color:#333;text-decoration:none;background-position:0 -15px;} .btn:focus{outline:1px dotted #666;} -.btn.primary{color:#ffffff;background-color:#0064cd;background-image:-khtml-gradient(linear, left top, left bottom, from(#049cdb), to(#0064cd));background-image:-moz-linear-gradient(top, #049cdb, #0064cd);background-image:-ms-linear-gradient(top, #049cdb, #0064cd);background-image:-webkit-gradient(linear, left top, left bottom, color-stop(0%, #049cdb), color-stop(100%, #0064cd));background-image:-webkit-linear-gradient(top, #049cdb, #0064cd);background-image:-o-linear-gradient(top, #049cdb, #0064cd);background-image:linear-gradient(top, #049cdb, #0064cd);background-repeat:repeat-x;filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#049cdb', endColorstr='#0064cd', GradientType=0);text-shadow:0 -1px 0 rgba(0, 0, 0, 0.25);border-color:#0064cd #0064cd #003f81;border-color:rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);} +.btn.primary{color:#ffffff;text-shadow:0 -1px 0 rgba(0, 0, 0, 0.25);background-color:#0064cd;background-image:-khtml-gradient(linear, left top, left bottom, from(#049cdb), to(#0064cd));background-image:-moz-linear-gradient(top, #049cdb, #0064cd);background-image:-ms-linear-gradient(top, #049cdb, #0064cd);background-image:-webkit-gradient(linear, left top, left bottom, color-stop(0%, #049cdb), color-stop(100%, #0064cd));background-image:-webkit-linear-gradient(top, #049cdb, #0064cd);background-image:-o-linear-gradient(top, #049cdb, #0064cd);background-image:linear-gradient(top, #049cdb, #0064cd);background-repeat:repeat-x;filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#049cdb', endColorstr='#0064cd', GradientType=0);border-color:#0064cd #0064cd #003f81;border-color:rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);} .btn:active{-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);} -.btn.disabled{cursor:default;background-image:none;filter:progid:DXImageTransform.Microsoft.gradient(enabled = false);filter:alpha(opacity=65);-khtml-opacity:0.65;-moz-opacity:0.65;opacity:0.65;-webkit-box-shadow:none;-moz-box-shadow:none;box-shadow:none;} -.btn[disabled]{cursor:default;background-image:none;filter:progid:DXImageTransform.Microsoft.gradient(enabled = false);filter:alpha(opacity=65);-khtml-opacity:0.65;-moz-opacity:0.65;opacity:0.65;-webkit-box-shadow:none;-moz-box-shadow:none;box-shadow:none;} -.btn.large{font-size:15px;line-height:normal;padding:9px 14px 9px;-webkit-border-radius:6px;-moz-border-radius:6px;border-radius:6px;} +.btn.disabled{cursor:default;background-image:none;filter:progid:DXImageTransform.Microsoft.gradient(enabled = false);filter:alpha(opacity=65);-moz-opacity:0.65;opacity:0.65;-webkit-box-shadow:none;-moz-box-shadow:none;box-shadow:none;} +.btn[disabled]{cursor:default;background-image:none;filter:progid:DXImageTransform.Microsoft.gradient(enabled = false);filter:alpha(opacity=65);-moz-opacity:0.65;opacity:0.65;-webkit-box-shadow:none;-moz-box-shadow:none;box-shadow:none;} +.btn.large{padding:9px 14px 9px;font-size:15px;line-height:normal;-webkit-border-radius:6px;-moz-border-radius:6px;border-radius:6px;} .btn.small{padding:7px 9px 7px;font-size:11px;} :root .alert-message,:root .btn{border-radius:0 \0;} button.btn::-moz-focus-inner,input[type=submit].btn::-moz-focus-inner{padding:0;border:0;} -.btn-toolbar{zoom:1;}.btn-toolbar:before,.btn-toolbar:after{display:table;content:"";zoom:1;*display:inline;} +.btn-toolbar{zoom:1;}.btn-toolbar:before,.btn-toolbar:after{display:table;*display:inline;content:"";zoom:1;} .btn-toolbar:after{clear:both;} .btn-toolbar .btn-group{float:left;margin-right:10px;} -.btn-group{zoom:1;}.btn-group:before,.btn-group:after{display:table;content:"";zoom:1;*display:inline;} +.btn-group{zoom:1;}.btn-group:before,.btn-group:after{display:table;*display:inline;content:"";zoom:1;} .btn-group:after{clear:both;} .btn-group .btn{position:relative;float:left;margin-left:-1px;-webkit-border-radius:0;-moz-border-radius:0;border-radius:0;}.btn-group .btn:first-child{margin-left:0;-webkit-border-top-left-radius:4px;-moz-border-radius-topleft:4px;border-top-left-radius:4px;-webkit-border-bottom-left-radius:4px;-moz-border-radius-bottomleft:4px;border-bottom-left-radius:4px;} .btn-group .btn:last-child{-webkit-border-top-right-radius:4px;-moz-border-radius-topright:4px;border-top-right-radius:4px;-webkit-border-bottom-right-radius:4px;-moz-border-radius-bottomright:4px;border-bottom-right-radius:4px;} .btn-group .btn:hover,.btn-group .btn:focus,.btn-group .btn:active{z-index:2;} -.close{float:right;color:#000000;font-size:20px;font-weight:bold;line-height:13.5px;text-shadow:0 1px 0 #ffffff;filter:alpha(opacity=20);-khtml-opacity:0.2;-moz-opacity:0.2;opacity:0.2;}.close:hover{color:#000000;text-decoration:none;filter:alpha(opacity=40);-khtml-opacity:0.4;-moz-opacity:0.4;opacity:0.4;} -.alert-message{position:relative;padding:7px 15px;margin-bottom:18px;color:#404040;background-color:#eedc94;background-image:-khtml-gradient(linear, left top, left bottom, from(#fceec1), to(#eedc94));background-image:-moz-linear-gradient(top, #fceec1, #eedc94);background-image:-ms-linear-gradient(top, #fceec1, #eedc94);background-image:-webkit-gradient(linear, left top, left bottom, color-stop(0%, #fceec1), color-stop(100%, #eedc94));background-image:-webkit-linear-gradient(top, #fceec1, #eedc94);background-image:-o-linear-gradient(top, #fceec1, #eedc94);background-image:linear-gradient(top, #fceec1, #eedc94);background-repeat:repeat-x;filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#fceec1', endColorstr='#eedc94', GradientType=0);text-shadow:0 -1px 0 rgba(0, 0, 0, 0.25);border-color:#eedc94 #eedc94 #e4c652;border-color:rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);text-shadow:0 1px 0 rgba(255, 255, 255, 0.5);border-width:1px;border-style:solid;-webkit-border-radius:4px;-moz-border-radius:4px;border-radius:4px;-webkit-box-shadow:inset 0 1px 0 rgba(255, 255, 255, 0.25);-moz-box-shadow:inset 0 1px 0 rgba(255, 255, 255, 0.25);box-shadow:inset 0 1px 0 rgba(255, 255, 255, 0.25);}.alert-message .close{*margin-top:3px;} +.close{float:right;font-size:20px;font-weight:bold;line-height:13.5px;color:#000000;text-shadow:0 1px 0 #ffffff;filter:alpha(opacity=20);-moz-opacity:0.2;opacity:0.2;}.close:hover{color:#000000;text-decoration:none;filter:alpha(opacity=40);-moz-opacity:0.4;opacity:0.4;} +.alert-message{position:relative;padding:7px 15px;margin-bottom:18px;color:#404040;text-shadow:0 1px 0 rgba(255, 255, 255, 0.5);text-shadow:0 -1px 0 rgba(0, 0, 0, 0.25);background-color:#eedc94;background-image:-khtml-gradient(linear, left top, left bottom, from(#fceec1), to(#eedc94));background-image:-moz-linear-gradient(top, #fceec1, #eedc94);background-image:-ms-linear-gradient(top, #fceec1, #eedc94);background-image:-webkit-gradient(linear, left top, left bottom, color-stop(0%, #fceec1), color-stop(100%, #eedc94));background-image:-webkit-linear-gradient(top, #fceec1, #eedc94);background-image:-o-linear-gradient(top, #fceec1, #eedc94);background-image:linear-gradient(top, #fceec1, #eedc94);background-repeat:repeat-x;filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#fceec1', endColorstr='#eedc94', GradientType=0);border-color:#eedc94 #eedc94 #e4c652;border-color:rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);border-width:1px;border-style:solid;-webkit-border-radius:4px;-moz-border-radius:4px;border-radius:4px;-webkit-box-shadow:inset 0 1px 0 rgba(255, 255, 255, 0.25);-moz-box-shadow:inset 0 1px 0 rgba(255, 255, 255, 0.25);box-shadow:inset 0 1px 0 rgba(255, 255, 255, 0.25);}.alert-message .close{*margin-top:3px;} .alert-message h5{line-height:18px;} .alert-message p{margin-bottom:0;} .alert-message div{margin-top:5px;margin-bottom:2px;line-height:28px;} .alert-message .btn{-webkit-box-shadow:0 1px 0 rgba(255, 255, 255, 0.25);-moz-box-shadow:0 1px 0 rgba(255, 255, 255, 0.25);box-shadow:0 1px 0 rgba(255, 255, 255, 0.25);} -.alert-message.block-message{background-image:none;background-color:#fdf5d9;filter:progid:DXImageTransform.Microsoft.gradient(enabled = false);padding:14px;border-color:#fceec1;-webkit-box-shadow:none;-moz-box-shadow:none;box-shadow:none;}.alert-message.block-message ul,.alert-message.block-message p{margin-right:30px;} +.alert-message.block-message{padding:14px;background-image:none;background-color:#fdf5d9;filter:progid:DXImageTransform.Microsoft.gradient(enabled = false);border-color:#fceec1;-webkit-box-shadow:none;-moz-box-shadow:none;box-shadow:none;}.alert-message.block-message ul,.alert-message.block-message p{margin-right:30px;} .alert-message.block-message ul{margin-bottom:0;} .alert-message.block-message li{color:#404040;} .alert-message.block-message .alert-actions{margin-top:5px;} @@ -276,15 +276,13 @@ 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;} -.well{background-color:#f5f5f5;margin-bottom:20px;padding:19px;min-height:20px;border:1px solid #eee;border:1px solid rgba(0, 0, 0, 0.05);-webkit-border-radius:4px;-moz-border-radius:4px;border-radius:4px;-webkit-box-shadow:inset 0 1px 1px rgba(0, 0, 0, 0.05);-moz-box-shadow:inset 0 1px 1px rgba(0, 0, 0, 0.05);box-shadow:inset 0 1px 1px rgba(0, 0, 0, 0.05);}.well blockquote{border-color:#ddd;border-color:rgba(0, 0, 0, 0.15);} +.well{min-height:20px;padding:19px;margin-bottom:20px;background-color:#f5f5f5;border:1px solid #eee;border:1px solid rgba(0, 0, 0, 0.05);-webkit-border-radius:4px;-moz-border-radius:4px;border-radius:4px;-webkit-box-shadow:inset 0 1px 1px rgba(0, 0, 0, 0.05);-moz-box-shadow:inset 0 1px 1px rgba(0, 0, 0, 0.05);box-shadow:inset 0 1px 1px rgba(0, 0, 0, 0.05);}.well blockquote{border-color:#ddd;border-color:rgba(0, 0, 0, 0.15);} .fade{-webkit-transition:opacity 0.15s linear;-moz-transition:opacity 0.15s linear;-ms-transition:opacity 0.15s linear;-o-transition:opacity 0.15s linear;transition:opacity 0.15s linear;opacity:0;}.fade.in{opacity:1;} -.label{padding:1px 3px 2px;background-color:#bfbfbf;font-size:9.75px;font-weight:bold;color:#ffffff;text-transform:uppercase;-webkit-border-radius:3px;-moz-border-radius:3px;border-radius:3px;}.label.important{background-color:#c43c35;} +.label{padding:1px 3px 2px;font-size:9.75px;font-weight:bold;color:#ffffff;text-transform:uppercase;background-color:#bfbfbf;-webkit-border-radius:3px;-moz-border-radius:3px;border-radius:3px;}.label.important{background-color:#c43c35;} .label.warning{background-color:#f89406;} .label.success{background-color:#46a546;} .label.notice{background-color:#62cffc;} -.pull-right{float:right;} -.pull-left{float:left;} -.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,.pills{padding:0;margin:0 0 20px;list-style:none;zoom:1;}.tabs:before,.pills:before,.tabs:after,.pills:after{display:table;*display:inline;content:"";zoom:1;} .tabs:after,.pills:after{clear:both;} .tabs>li,.pills>li{float:left;}.tabs>li>a,.pills>li>a{display:block;} .tabs{border-color:#ddd;border-style:solid;border-width:0 0 1px;}.tabs>li{position:relative;margin-bottom:-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;} @@ -294,7 +292,7 @@ button.btn::-moz-focus-inner,input[type=submit].btn::-moz-focus-inner{padding:0; .tabbable.tabs-bottom .tabs>li{margin-top:-1px;margin-bottom:0;} .tabbable.tabs-bottom .tabs>li>a{-webkit-border-radius:0 0 4px 4px;-moz-border-radius:0 0 4px 4px;border-radius:0 0 4px 4px;}.tabbable.tabs-bottom .tabs>li>a:hover{border-bottom-color:transparent;border-top-color:#ddd;} .tabbable.tabs-bottom .tabs>.active>a,.tabbable.tabs-bottom .tabs>.active>a:hover{border-color:transparent #ddd #ddd #ddd;} -.tabbable.tabs-left,.tabbable.tabs-right{zoom:1;}.tabbable.tabs-left:before,.tabbable.tabs-right:before,.tabbable.tabs-left:after,.tabbable.tabs-right:after{display:table;content:"";zoom:1;*display:inline;} +.tabbable.tabs-left,.tabbable.tabs-right{zoom:1;}.tabbable.tabs-left:before,.tabbable.tabs-right:before,.tabbable.tabs-left:after,.tabbable.tabs-right:after{display:table;*display:inline;content:"";zoom:1;} .tabbable.tabs-left:after,.tabbable.tabs-right:after{clear:both;} .tabbable.tabs-left .tabs,.tabbable.tabs-right .tabs{width:100px;}.tabbable.tabs-left .tabs>li,.tabbable.tabs-right .tabs>li{float:none;margin-bottom:-1px;}.tabbable.tabs-left .tabs>li>a,.tabbable.tabs-right .tabs>li>a{margin-bottom:2px;}.tabbable.tabs-left .tabs>li>a:hover,.tabbable.tabs-right .tabs>li>a:hover{border-color:transparent;} .tabbable.tabs-left .tab-content{margin-left:100px;} @@ -307,46 +305,46 @@ button.btn::-moz-focus-inner,input[type=submit].btn::-moz-focus-inner{padding:0; .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;} -.pills a{margin:5px 3px 5px 0;padding:0 15px;line-height:30px;text-shadow:0 1px 1px #ffffff;-webkit-border-radius:15px;-moz-border-radius:15px;border-radius:15px;}.pills a:hover{color:#ffffff;text-decoration:none;text-shadow:0 1px 1px rgba(0, 0, 0, 0.25);background-color:#00438a;} +.pills a{padding:0 15px;margin:5px 3px 5px 0;line-height:30px;text-shadow:0 1px 1px #ffffff;-webkit-border-radius:15px;-moz-border-radius:15px;border-radius:15px;}.pills a:hover{color:#ffffff;text-decoration:none;text-shadow:0 1px 1px rgba(0, 0, 0, 0.25);background-color:#00438a;} .pills .active a{color:#ffffff;text-shadow:0 1px 1px rgba(0, 0, 0, 0.25);background-color:#0069d6;} .pills-vertical>li{float:none;} .tab-content>.tab-pane,.pill-content>.pill-pane{display:none;} .tab-content>.active,.pill-content>.active{display:block;} -.breadcrumb{margin:0 0 18px;padding:7px 14px;background-color:#f5f5f5;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);background-repeat:repeat-x;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{padding:7px 14px;margin:0 0 18px;background-color:#f5f5f5;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);background-repeat:repeat-x;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;} .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 li{display:inline;} -.pagination 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 a{float:left;padding:0 14px;line-height:34px;text-decoration:none;border-right:1px solid;border-right-color:#ddd;border-right-color:rgba(0, 0, 0, 0.15);*border-right-color:#ddd;} .pagination a:hover,.pagination .active a{background-color:#c7eefe;} -.pagination .disabled a,.pagination .disabled a:hover{background-color:transparent;color:#bfbfbf;} +.pagination .disabled a,.pagination .disabled a:hover{color:#bfbfbf;background-color:transparent;} .pagination .next a{border:0;} -.modal-backdrop{background-color:#000000;position:fixed;top:0;left:0;right:0;bottom:0;z-index:10000;}.modal-backdrop.fade{opacity:0;} -.modal-backdrop,.modal-backdrop.fade.in{filter:alpha(opacity=80);-khtml-opacity:0.8;-moz-opacity:0.8;opacity:0.8;} +.modal-backdrop{position:fixed;top:0;right:0;bottom:0;left:0;z-index:10000;background-color:#000000;}.modal-backdrop.fade{opacity:0;} +.modal-backdrop,.modal-backdrop.fade.in{filter:alpha(opacity=80);-moz-opacity:0.8;opacity:0.8;} .modal{position:fixed;top:50%;left:50%;z-index:11000;width:560px;margin:-250px 0 0 -250px;background-color:#ffffff;border:1px solid #999;border:1px solid rgba(0, 0, 0, 0.3);*border:1px solid #999;-webkit-border-radius:6px;-moz-border-radius:6px;border-radius:6px;-webkit-box-shadow:0 3px 7px rgba(0, 0, 0, 0.3);-moz-box-shadow:0 3px 7px rgba(0, 0, 0, 0.3);box-shadow:0 3px 7px rgba(0, 0, 0, 0.3);-webkit-background-clip:padding-box;-moz-background-clip:padding-box;background-clip:padding-box;}.modal .close{margin-top:7px;} .modal.fade{-webkit-transition:opacity .3s linear, top .3s ease-out;-moz-transition:opacity .3s linear, top .3s ease-out;-ms-transition:opacity .3s linear, top .3s ease-out;-o-transition:opacity .3s linear, top .3s ease-out;transition:opacity .3s linear, top .3s ease-out;top:-25%;} .modal.fade.in{top:50%;} -.modal-header{border-bottom:1px solid #eee;padding:5px 15px;} +.modal-header{padding:5px 15px;border-bottom:1px solid #eee;} .modal-body{padding:15px;} -.modal-footer{background-color:#f5f5f5;padding:14px 15px 15px;border-top:1px solid #ddd;-webkit-border-radius:0 0 6px 6px;-moz-border-radius:0 0 6px 6px;border-radius:0 0 6px 6px;-webkit-box-shadow:inset 0 1px 0 #ffffff;-moz-box-shadow:inset 0 1px 0 #ffffff;box-shadow:inset 0 1px 0 #ffffff;zoom:1;margin-bottom:0;}.modal-footer:before,.modal-footer:after{display:table;content:"";zoom:1;*display:inline;} +.modal-footer{padding:14px 15px 15px;margin-bottom:0;background-color:#f5f5f5;border-top:1px solid #ddd;-webkit-border-radius:0 0 6px 6px;-moz-border-radius:0 0 6px 6px;border-radius:0 0 6px 6px;-webkit-box-shadow:inset 0 1px 0 #ffffff;-moz-box-shadow:inset 0 1px 0 #ffffff;box-shadow:inset 0 1px 0 #ffffff;zoom:1;}.modal-footer:before,.modal-footer:after{display:table;*display:inline;content:"";zoom:1;} .modal-footer:after{clear:both;} .modal-footer .btn{float:right;margin-left:5px;} -.twipsy{display:block;position:absolute;visibility:visible;padding:5px;font-size:11px;z-index:1000;filter:alpha(opacity=80);-khtml-opacity:0.8;-moz-opacity:0.8;opacity:0.8;}.twipsy.fade.in{filter:alpha(opacity=80);-khtml-opacity:0.8;-moz-opacity:0.8;opacity:0.8;} +.twipsy{position:absolute;z-index:1000;display:block;visibility:visible;padding:5px;font-size:11px;filter:alpha(opacity=80);-moz-opacity:0.8;opacity:0.8;}.twipsy.fade.in{filter:alpha(opacity=80);-moz-opacity:0.8;opacity:0.8;} .twipsy.above .twipsy-arrow{bottom:0;left:50%;margin-left:-5px;border-left:5px solid transparent;border-right:5px solid transparent;border-top:5px solid #000000;} .twipsy.left .twipsy-arrow{top:50%;right:0;margin-top:-5px;border-top:5px solid transparent;border-bottom:5px solid transparent;border-left:5px solid #000000;} .twipsy.below .twipsy-arrow{top:0;left:50%;margin-left:-5px;border-left:5px solid transparent;border-right:5px solid transparent;border-bottom:5px solid #000000;} .twipsy.right .twipsy-arrow{top:50%;left:0;margin-top:-5px;border-top:5px solid transparent;border-bottom:5px solid transparent;border-right:5px solid #000000;} -.twipsy-inner{padding:3px 8px;background-color:#000000;color:white;text-align:center;max-width:200px;text-decoration:none;-webkit-border-radius:4px;-moz-border-radius:4px;border-radius:4px;} +.twipsy-inner{max-width:200px;padding:3px 8px;color:white;text-align:center;text-decoration:none;background-color:#000000;-webkit-border-radius:4px;-moz-border-radius:4px;border-radius:4px;} .twipsy-arrow{position:absolute;width:0;height:0;} -.popover{position:absolute;top:0;left:0;z-index:1000;padding:5px;display:none;}.popover.above .arrow{bottom:0;left:50%;margin-left:-5px;border-left:5px solid transparent;border-right:5px solid transparent;border-top:5px solid #000000;} +.popover{position:absolute;top:0;left:0;z-index:1000;display:none;padding:5px;}.popover.above .arrow{bottom:0;left:50%;margin-left:-5px;border-left:5px solid transparent;border-right:5px solid transparent;border-top:5px solid #000000;} .popover.right .arrow{top:50%;left:0;margin-top:-5px;border-top:5px solid transparent;border-bottom:5px solid transparent;border-right:5px solid #000000;} .popover.below .arrow{top:0;left:50%;margin-left:-5px;border-left:5px solid transparent;border-right:5px solid transparent;border-bottom:5px solid #000000;} .popover.left .arrow{top:50%;right:0;margin-top:-5px;border-top:5px solid transparent;border-bottom:5px solid transparent;border-left:5px solid #000000;} .popover .arrow{position:absolute;width:0;height:0;} -.popover .inner{background-color:#000000;background-color:rgba(0, 0, 0, 0.8);padding:3px;overflow:hidden;width:280px;-webkit-border-radius:6px;-moz-border-radius:6px;border-radius:6px;-webkit-box-shadow:0 3px 7px rgba(0, 0, 0, 0.3);-moz-box-shadow:0 3px 7px rgba(0, 0, 0, 0.3);box-shadow:0 3px 7px rgba(0, 0, 0, 0.3);} -.popover .title{background-color:#f5f5f5;padding:9px 15px;line-height:1;-webkit-border-radius:3px 3px 0 0;-moz-border-radius:3px 3px 0 0;border-radius:3px 3px 0 0;border-bottom:1px solid #eee;} -.popover .content{background-color:#ffffff;padding:14px;-webkit-border-radius:0 0 3px 3px;-moz-border-radius:0 0 3px 3px;border-radius:0 0 3px 3px;-webkit-background-clip:padding-box;-moz-background-clip:padding-box;background-clip:padding-box;}.popover .content p,.popover .content ul,.popover .content ol{margin-bottom:0;} -.media-grid{margin-left:-20px;margin-bottom:0;zoom:1;}.media-grid:before,.media-grid:after{display:table;content:"";zoom:1;*display:inline;} +.popover .inner{padding:3px;width:280px;overflow:hidden;background-color:#000000;background-color:rgba(0, 0, 0, 0.8);-webkit-border-radius:6px;-moz-border-radius:6px;border-radius:6px;-webkit-box-shadow:0 3px 7px rgba(0, 0, 0, 0.3);-moz-box-shadow:0 3px 7px rgba(0, 0, 0, 0.3);box-shadow:0 3px 7px rgba(0, 0, 0, 0.3);} +.popover .title{padding:9px 15px;line-height:1;background-color:#f5f5f5;border-bottom:1px solid #eee;-webkit-border-radius:3px 3px 0 0;-moz-border-radius:3px 3px 0 0;border-radius:3px 3px 0 0;} +.popover .content{padding:14px;background-color:#ffffff;-webkit-border-radius:0 0 3px 3px;-moz-border-radius:0 0 3px 3px;border-radius:0 0 3px 3px;-webkit-background-clip:padding-box;-moz-background-clip:padding-box;background-clip:padding-box;}.popover .content p,.popover .content ul,.popover .content ol{margin-bottom:0;} +.media-grid{margin-left:-20px;margin-bottom:0;zoom:1;}.media-grid:before,.media-grid:after{display:table;*display:inline;content:"";zoom:1;} .media-grid:after{clear:both;} .media-grid li{display:inline;} .media-grid a{float:left;padding:4px;margin:0 0 20px 20px;border:1px solid #ddd;-webkit-border-radius:4px;-moz-border-radius:4px;border-radius:4px;-webkit-box-shadow:0 1px 1px rgba(0, 0, 0, 0.075);-moz-box-shadow:0 1px 1px rgba(0, 0, 0, 0.075);box-shadow:0 1px 1px rgba(0, 0, 0, 0.075);}.media-grid a img{display:block;} diff --git a/js/bootstrap-alerts.js b/js/bootstrap-alerts.js index 4f1acfa3d0..3ef1672bc0 100644 --- a/js/bootstrap-alerts.js +++ b/js/bootstrap-alerts.js @@ -1,5 +1,5 @@ /* ========================================================== - * bootstrap-alerts.js v2.0.0 + * bootstrap-alerts.js v1.4.0 * http://twitter.github.com/bootstrap/javascript.html#alerts * ========================================================== * Copyright 2011 Twitter, Inc. @@ -17,32 +17,108 @@ * limitations under the License. * ========================================================== */ -(function( $ ){ + +!function( $ ){ + + "use strict" + + /* CSS TRANSITION SUPPORT (https://gist.github.com/373874) + * ======================================================= */ + + var transitionEnd + + $(document).ready(function () { + + $.support.transition = (function () { + var thisBody = document.body || document.documentElement + , thisStyle = thisBody.style + , support = thisStyle.transition !== undefined || thisStyle.WebkitTransition !== undefined || thisStyle.MozTransition !== undefined || thisStyle.MsTransition !== undefined || thisStyle.OTransition !== undefined + return support + })() + + // set CSS transition event type + if ( $.support.transition ) { + transitionEnd = "TransitionEnd" + if ( $.browser.webkit ) { + transitionEnd = "webkitTransitionEnd" + } else if ( $.browser.mozilla ) { + transitionEnd = "transitionend" + } else if ( $.browser.opera ) { + transitionEnd = "oTransitionEnd" + } + } + + }) /* ALERT CLASS DEFINITION * ====================== */ - function close(e) { - var $element = $(this).parent('.alert-message') + var Alert = function ( content, options ) { + if (options == 'close') return this.close.call(content) + this.settings = $.extend({}, $.fn.alert.defaults, options) + this.$element = $(content) + .delegate(this.settings.selector, 'click', this.close) + } + + Alert.prototype = { + + close: function (e) { + var $element = $(this) + , className = 'alert-message' + + $element = $element.hasClass(className) ? $element : $element.parent() + + e && e.preventDefault() + $element.removeClass('in') - e && e.preventDefault() - $element.removeClass('in') + function removeElement () { + $element.remove() + } - function removeElement () { - $element.remove() + $.support.transition && $element.hasClass('fade') ? + $element.bind(transitionEnd, removeElement) : + removeElement() } - $.support.transition && $element.hasClass('fade') ? - $element.bind($.support.transition.end, removeElement) : - removeElement() } /* ALERT PLUGIN DEFINITION * ======================= */ - $(function () { - $('body').delegate('[data-alert-dismiss]', 'click', close) + $.fn.alert = function ( options ) { + + if ( options === true ) { + return this.data('alert') + } + + return this.each(function () { + var $this = $(this) + , data + + if ( typeof options == 'string' ) { + + data = $this.data('alert') + + if (typeof data == 'object') { + return data[options].call( $this ) + } + + } + + $(this).data('alert', new Alert( this, options )) + + }) + } + + $.fn.alert.defaults = { + selector: '.close' + } + + $(document).ready(function () { + new Alert($('body'), { + selector: '.alert-message[data-alert] .close' + }) }) -})( window.jQuery || window.ender ) \ No newline at end of file +}( window.jQuery || window.ender ); \ No newline at end of file diff --git a/js/bootstrap-buttons.js b/js/bootstrap-buttons.js new file mode 100644 index 0000000000..16fa161cb9 --- /dev/null +++ b/js/bootstrap-buttons.js @@ -0,0 +1,62 @@ +/* ============================================================ + * bootstrap-buttons.js v1.4.0 + * http://twitter.github.com/bootstrap/javascript.html#buttons + * ============================================================ + * Copyright 2011 Twitter, Inc. + * + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + * ============================================================ */ + +!function( $ ){ + + "use strict" + + function setState(el, state) { + var d = 'disabled' + , $el = $(el) + , data = $el.data() + + state = state + 'Text' + data.resetText || $el.data('resetText', $el.html()) + + $el.html( data[state] || $.fn.button.defaults[state] ) + + state == 'loadingText' ? + $el.addClass(d).attr(d, d) : + $el.removeClass(d).removeAttr(d) + } + + function toggle(el) { + $(el).toggleClass('active') + } + + $.fn.button = function(options) { + return this.each(function () { + if (options == 'toggle') { + return toggle(this) + } + options && setState(this, options) + }) + } + + $.fn.button.defaults = { + loadingText: 'loading...' + } + + $(function () { + $('body').delegate('.btn[data-toggle]', 'click', function () { + $(this).button('toggle') + }) + }) + +}( window.jQuery || window.ender ); \ No newline at end of file diff --git a/js/bootstrap-dropdown.js b/js/bootstrap-dropdown.js index d12fe48cb6..cab0ec27ed 100644 --- a/js/bootstrap-dropdown.js +++ b/js/bootstrap-dropdown.js @@ -1,5 +1,5 @@ /* ============================================================ - * bootstrap-dropdown.js v2.0.0 + * bootstrap-dropdown.js v1.4.0 * http://twitter.github.com/bootstrap/javascript.html#dropdown * ============================================================ * Copyright 2011 Twitter, Inc. @@ -18,25 +18,38 @@ * ============================================================ */ -(function( $ ){ +!function( $ ){ + + "use strict" + + /* DROPDOWN PLUGIN DEFINITION + * ========================== */ + + $.fn.dropdown = function ( selector ) { + return this.each(function () { + $(this).delegate(selector || d, 'click', function (e) { + var li = $(this).parent('li') + , isActive = li.hasClass('open') + + clearMenus() + !isActive && li.toggleClass('open') + return false + }) + }) + } /* APPLY TO STANDARD DROPDOWN ELEMENTS * =================================== */ - var selector = '[data-dropdown]' + + var d = 'a.menu, .dropdown-toggle' function clearMenus() { - $(selector).parent('li').removeClass('open') + $(d).parent('li').removeClass('open') } $(function () { $('html').bind("click", clearMenus) - $('body').delegate(selector, 'click', function (e) { - var li = $(this).parent('li') - , isActive = li.hasClass('open') - clearMenus() - !isActive && li.toggleClass('open') - return false - }) + $('body').dropdown( '[data-dropdown] a.menu, [data-dropdown] .dropdown-toggle' ) }) -})( window.jQuery || window.ender ) \ No newline at end of file +}( window.jQuery || window.ender ); \ No newline at end of file diff --git a/js/bootstrap-modal.js b/js/bootstrap-modal.js index 984b091d61..be2315afba 100644 --- a/js/bootstrap-modal.js +++ b/js/bootstrap-modal.js @@ -1,5 +1,5 @@ /* ========================================================= - * bootstrap-modal.js v2.0.0 + * bootstrap-modal.js v1.4.0 * http://twitter.github.com/bootstrap/javascript.html#modal * ========================================================= * Copyright 2011 Twitter, Inc. @@ -20,13 +20,44 @@ !function( $ ){ + "use strict" + + /* CSS TRANSITION SUPPORT (https://gist.github.com/373874) + * ======================================================= */ + + var transitionEnd + + $(document).ready(function () { + + $.support.transition = (function () { + var thisBody = document.body || document.documentElement + , thisStyle = thisBody.style + , support = thisStyle.transition !== undefined || thisStyle.WebkitTransition !== undefined || thisStyle.MozTransition !== undefined || thisStyle.MsTransition !== undefined || thisStyle.OTransition !== undefined + return support + })() + + // set CSS transition event type + if ( $.support.transition ) { + transitionEnd = "TransitionEnd" + if ( $.browser.webkit ) { + transitionEnd = "webkitTransitionEnd" + } else if ( $.browser.mozilla ) { + transitionEnd = "transitionend" + } else if ( $.browser.opera ) { + transitionEnd = "oTransitionEnd" + } + } + + }) + + /* MODAL PUBLIC CLASS DEFINITION * ============================= */ var Modal = function ( content, options ) { this.settings = $.extend({}, $.fn.modal.defaults, options) this.$element = $(content) - .delegate('[data-modal-dismiss]', 'click', $.proxy(this.hide, this)) + .delegate('.close', 'click.modal', $.proxy(this.hide, this)) if ( this.settings.show ) { this.show() @@ -47,7 +78,24 @@ this.$element.trigger('show') escape.call(this) - backdrop.call(this) + backdrop.call(this, function () { + var transition = $.support.transition && that.$element.hasClass('fade') + + that.$element + .appendTo(document.body) + .show() + + if (transition) { + that.$element[0].offsetWidth // force reflow + } + + that.$element.addClass('in') + + transition ? + that.$element.one(transitionEnd, function () { that.$element.trigger('shown') }) : + that.$element.trigger('shown') + + }) return this } @@ -68,17 +116,9 @@ .trigger('hide') .removeClass('in') - function removeElement () { - that.$element - .hide() - .trigger('hidden') - - backdrop.call(that) - } - $.support.transition && this.$element.hasClass('fade') ? - this.$element.one($.support.transition.end, removeElement) : - removeElement() + hideWithTransition.call(this) : + hideModal.call(this) return this } @@ -89,11 +129,31 @@ /* MODAL PRIVATE METHODS * ===================== */ - function backdrop () { + function hideWithTransition() { + // firefox drops transitionEnd events :{o var that = this - , animate = this.$element.hasClass('fade') ? 'fade' : '' - , callback = $.proxy(show, this) + , timeout = setTimeout(function () { + that.$element.unbind(transitionEnd) + hideModal.call(that) + }, 500) + + this.$element.one(transitionEnd, function () { + clearTimeout(timeout) + hideModal.call(that) + }) + } + + function hideModal (that) { + this.$element + .hide() + .trigger('hidden') + + backdrop.call(this) + } + function backdrop ( callback ) { + var that = this + , animate = this.$element.hasClass('fade') ? 'fade' : '' if ( this.isShown && this.settings.backdrop ) { var doAnimate = $.support.transition && animate @@ -111,43 +171,24 @@ this.$backdrop.addClass('in') doAnimate ? - this.$backdrop.one($.support.transition.end, callback) : + this.$backdrop.one(transitionEnd, callback) : callback() } else if ( !this.isShown && this.$backdrop ) { this.$backdrop.removeClass('in') - function removeElement() { - that.$backdrop.remove() - that.$backdrop = null - } - $.support.transition && this.$element.hasClass('fade')? - this.$backdrop.one($.support.transition.end, removeElement) : - removeElement() + this.$backdrop.one(transitionEnd, $.proxy(removeBackdrop, this)) : + removeBackdrop.call(this) + } else if ( callback ) { callback() } } - function show() { - var transition = $.support.transition && that.$element.hasClass('fade') - , that = this - - this.$element - .appendTo(document.body) - .show() - - if (transition) { - this.$element[0].offsetWidth // force reflow - } - - this.$element - .addClass('in') - - transition ? - this.$element.one($.support.transition.end, function () { that.$element.trigger('shown') }) : - this.$element.trigger('shown') + function removeBackdrop() { + this.$backdrop.remove() + this.$backdrop = null } function escape() { @@ -205,10 +246,10 @@ } - /* MODAL DATA-IMPLEMENTATION - * ========================= */ + /* MODAL DATA- IMPLEMENTATION + * ========================== */ - $(function () { + $(document).ready(function () { $('body').delegate('[data-controls-modal]', 'click', function (e) { e.preventDefault() var $this = $(this).data('show', true) diff --git a/js/bootstrap-popover.js b/js/bootstrap-popover.js index 3fdde19b51..c23741735b 100644 --- a/js/bootstrap-popover.js +++ b/js/bootstrap-popover.js @@ -1,5 +1,5 @@ /* =========================================================== - * bootstrap-popover.js v2.0.0 + * bootstrap-popover.js v1.4.0 * http://twitter.github.com/bootstrap/javascript.html#popover * =========================================================== * Copyright 2011 Twitter, Inc. @@ -20,6 +20,8 @@ !function( $ ) { + "use strict" + var Popover = function ( element, options ) { this.$element = $(element) this.options = options @@ -35,33 +37,39 @@ setContent: function () { var $tip = this.tip() $tip.find('.title')[this.options.html ? 'html' : 'text'](this.getTitle()) - $tip.find('.content p')[this.options.html ? 'html' : 'text'](this.getContent()) + $tip.find('.content > *')[this.options.html ? 'html' : 'text'](this.getContent()) $tip[0].className = 'popover' } + , hasContent: function () { + return this.getTitle() || this.getContent() + } + , getContent: function () { var content , $e = this.$element , o = this.options if (typeof this.options.content == 'string') { - content = $e.attr(o.content) + content = $e.attr(this.options.content) } else if (typeof this.options.content == 'function') { content = this.options.content.call(this.$element[0]) } + return content } , tip: function() { if (!this.$tip) { this.$tip = $('<div class="popover" />') - .html('<div class="arrow"></div><div class="inner"><h3 class="title"></h3><div class="content"><p></p></div></div>') + .html(this.options.template) } return this.$tip } }) + /* POPOVER PLUGIN DEFINITION * ======================= */ @@ -71,6 +79,12 @@ return this } - $.fn.popover.defaults = $.extend({} , $.fn.twipsy.defaults, { content: 'data-content', placement: 'right'}) + $.fn.popover.defaults = $.extend({} , $.fn.twipsy.defaults, { + placement: 'right' + , content: 'data-content' + , template: '<div class="arrow"></div><div class="inner"><h3 class="title"></h3><div class="content"><p></p></div></div>' + }) + + $.fn.twipsy.rejectAttrOptions.push( 'content' ) }( window.jQuery || window.ender ); \ No newline at end of file diff --git a/js/bootstrap-tabs.js b/js/bootstrap-tabs.js index 86bd4784f3..790180ca2e 100644 --- a/js/bootstrap-tabs.js +++ b/js/bootstrap-tabs.js @@ -1,5 +1,5 @@ /* ======================================================== - * bootstrap-tabs.js v2.0.0 + * bootstrap-tabs.js v1.4.0 * http://twitter.github.com/bootstrap/javascript.html#tabs * ======================================================== * Copyright 2011 Twitter, Inc. @@ -20,6 +20,8 @@ !function( $ ){ + "use strict" + function activate ( element, container ) { container .find('> .active') @@ -39,6 +41,7 @@ , $ul = $this.closest('ul:not(.dropdown-menu)') , href = $this.attr('href') , previous + , $href if ( /^#\w+/.test(href) ) { e.preventDefault() @@ -64,8 +67,14 @@ /* TABS/PILLS PLUGIN DEFINITION * ============================ */ - $(function () { - $('body').delegate('ul[data-tabs] > li > a, ul[data-pills] > li > a', 'click', tab) + $.fn.tabs = $.fn.pills = function ( selector ) { + return this.each(function () { + $(this).delegate(selector || '.tabs li > a, .pills > li > a', 'click', tab) + }) + } + + $(document).ready(function () { + $('body').tabs('ul[data-tabs] li > a, ul[data-pills] > li > a') }) }( window.jQuery || window.ender ); \ No newline at end of file diff --git a/js/bootstrap-twipsy.js b/js/bootstrap-twipsy.js index 7c195fbc78..fc22d0218b 100644 --- a/js/bootstrap-twipsy.js +++ b/js/bootstrap-twipsy.js @@ -1,5 +1,5 @@ /* ========================================================== - * bootstrap-twipsy.js v2.0.0 + * bootstrap-twipsy.js v1.4.0 * http://twitter.github.com/bootstrap/javascript.html#twipsy * Adapted from the original jQuery.tipsy by Jason Frame * ========================================================== @@ -21,6 +21,37 @@ !function( $ ) { + "use strict" + + /* CSS TRANSITION SUPPORT (https://gist.github.com/373874) + * ======================================================= */ + + var transitionEnd + + $(document).ready(function () { + + $.support.transition = (function () { + var thisBody = document.body || document.documentElement + , thisStyle = thisBody.style + , support = thisStyle.transition !== undefined || thisStyle.WebkitTransition !== undefined || thisStyle.MozTransition !== undefined || thisStyle.MsTransition !== undefined || thisStyle.OTransition !== undefined + return support + })() + + // set CSS transition event type + if ( $.support.transition ) { + transitionEnd = "TransitionEnd" + if ( $.browser.webkit ) { + transitionEnd = "webkitTransitionEnd" + } else if ( $.browser.mozilla ) { + transitionEnd = "transitionend" + } else if ( $.browser.opera ) { + transitionEnd = "oTransitionEnd" + } + } + + }) + + /* TWIPSY PUBLIC CLASS DEFINITION * ============================== */ @@ -41,7 +72,7 @@ , $tip , tp - if (this.getTitle() && this.enabled) { + if (this.hasContent() && this.enabled) { $tip = this.tip() this.setContent() @@ -61,7 +92,8 @@ actualWidth = $tip[0].offsetWidth actualHeight = $tip[0].offsetHeight - placement = _.maybeCall(this.options.placement, this.$element[0]) + + placement = maybeCall(this.options.placement, this, [ $tip[0], this.$element[0] ]) switch (placement) { case 'below': @@ -102,7 +134,7 @@ } $.support.transition && this.$tip.hasClass('fade') ? - $tip.bind($.support.transition.end, removeElement) : + $tip.bind(transitionEnd, removeElement) : removeElement() } @@ -113,6 +145,10 @@ } } + , hasContent: function () { + return this.getTitle() + } + , getTitle: function() { var title , $e = this.$element @@ -132,10 +168,7 @@ } , tip: function() { - if (!this.$tip) { - this.$tip = $('<div class="twipsy" />').html('<div class="twipsy-arrow"></div><div class="twipsy-inner"></div>') - } - return this.$tip + return this.$tip = this.$tip || $('<div class="twipsy" />').html(this.options.template) } , validate: function() { @@ -158,21 +191,20 @@ this.enabled = !this.enabled } + , toggle: function () { + this[this.tip().hasClass('in') ? 'hide' : 'show']() + } + } /* TWIPSY PRIVATE METHODS * ====================== */ - var _ = { - - maybeCall: function ( thing, ctx ) { - return (typeof thing == 'function') ? (thing.call(ctx)) : thing - } - + function maybeCall ( thing, ctx, args ) { + return typeof thing == 'function' ? thing.apply(ctx, args) : thing } - /* TWIPSY PLUGIN DEFINITION * ======================== */ @@ -269,10 +301,21 @@ , offset: 0 , title: 'title' , trigger: 'hover' + , template: '<div class="twipsy-arrow"></div><div class="twipsy-inner"></div>' } + $.fn.twipsy.rejectAttrOptions = [ 'title' ] + $.fn.twipsy.elementOptions = function(ele, options) { - return $.metadata ? $.extend({}, options, $(ele).metadata()) : options + var data = $(ele).data() + , rejects = $.fn.twipsy.rejectAttrOptions + , i = rejects.length + + while (i--) { + delete data[rejects[i]] + } + + return $.extend({}, options, data) } }( window.jQuery || window.ender ); \ No newline at end of file -- GitLab From bc65b58551575c9dfb2e4d9f4f7af97009e39432 Mon Sep 17 00:00:00 2001 From: Jacob Thornton <jacobthornton@gmail.com> Date: Sun, 20 Nov 2011 20:58:04 -0800 Subject: [PATCH 082/318] merge in js from 1.4... start working through js docs --- Makefile | 2 +- bootstrap.css | 12 +- bootstrap.min.css | 2 +- docs/assets/css/docs.css | 7 + docs/base-css.html | 2 +- docs/javascript.html | 356 ++++++++++++++++++------------------ js/bootstrap-alerts.js | 44 +---- js/bootstrap-dropdown.js | 43 +++-- js/bootstrap-modal.js | 48 +---- js/bootstrap-popover.js | 6 +- js/bootstrap-scrollspy.js | 33 ++-- js/bootstrap-tabs.js | 2 +- js/bootstrap-transitions.js | 2 +- js/bootstrap-twipsy.js | 68 ++----- lib/twipsy.less | 4 +- 15 files changed, 281 insertions(+), 350 deletions(-) diff --git a/Makefile b/Makefile index b3dce89ac4..294f0ed72e 100644 --- a/Makefile +++ b/Makefile @@ -1,4 +1,4 @@ -VERSION=1.2.0 +VERSION=2.0.0 DATE=$(shell DATE) BOOTSTRAP = ./bootstrap.css BOOTSTRAP_MIN = ./bootstrap.min.css diff --git a/bootstrap.css b/bootstrap.css index e17c454d5c..d6cc76b6d8 100644 --- a/bootstrap.css +++ b/bootstrap.css @@ -1,12 +1,12 @@ /*! - * Bootstrap v1.2.0 + * Bootstrap v2.0.0 * * Copyright 2011 Twitter, Inc * Licensed under the Apache License v2.0 * 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 Nov 20 18:13:58 PST 2011 + * Date: Sun Nov 20 20:05:48 PST 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). @@ -2269,11 +2269,11 @@ button.btn::-moz-focus-inner, input[type=submit].btn::-moz-focus-inner { visibility: visible; padding: 5px; font-size: 11px; - filter: alpha(opacity=80); - -moz-opacity: 0.8; - opacity: 0.8; + filter: alpha(opacity=0); + -moz-opacity: 0; + opacity: 0; } -.twipsy.fade.in { +.twipsy.in { filter: alpha(opacity=80); -moz-opacity: 0.8; opacity: 0.8; diff --git a/bootstrap.min.css b/bootstrap.min.css index e0584b480f..69441b76e7 100644 --- a/bootstrap.min.css +++ b/bootstrap.min.css @@ -329,7 +329,7 @@ button.btn::-moz-focus-inner,input[type=submit].btn::-moz-focus-inner{padding:0; .modal-footer{padding:14px 15px 15px;margin-bottom:0;background-color:#f5f5f5;border-top:1px solid #ddd;-webkit-border-radius:0 0 6px 6px;-moz-border-radius:0 0 6px 6px;border-radius:0 0 6px 6px;-webkit-box-shadow:inset 0 1px 0 #ffffff;-moz-box-shadow:inset 0 1px 0 #ffffff;box-shadow:inset 0 1px 0 #ffffff;zoom:1;}.modal-footer:before,.modal-footer:after{display:table;*display:inline;content:"";zoom:1;} .modal-footer:after{clear:both;} .modal-footer .btn{float:right;margin-left:5px;} -.twipsy{position:absolute;z-index:1000;display:block;visibility:visible;padding:5px;font-size:11px;filter:alpha(opacity=80);-moz-opacity:0.8;opacity:0.8;}.twipsy.fade.in{filter:alpha(opacity=80);-moz-opacity:0.8;opacity:0.8;} +.twipsy{position:absolute;z-index:1000;display:block;visibility:visible;padding:5px;font-size:11px;filter:alpha(opacity=0);-moz-opacity:0;opacity:0;}.twipsy.in{filter:alpha(opacity=80);-moz-opacity:0.8;opacity:0.8;} .twipsy.above .twipsy-arrow{bottom:0;left:50%;margin-left:-5px;border-left:5px solid transparent;border-right:5px solid transparent;border-top:5px solid #000000;} .twipsy.left .twipsy-arrow{top:50%;right:0;margin-top:-5px;border-top:5px solid transparent;border-bottom:5px solid transparent;border-left:5px solid #000000;} .twipsy.below .twipsy-arrow{top:0;left:50%;margin-left:-5px;border-left:5px solid transparent;border-right:5px solid transparent;border-bottom:5px solid #000000;} diff --git a/docs/assets/css/docs.css b/docs/assets/css/docs.css index b503c23e43..cde8ff1e0d 100644 --- a/docs/assets/css/docs.css +++ b/docs/assets/css/docs.css @@ -304,6 +304,13 @@ body > .navbar-fixed .brand:hover { margin-left: 10px; } +/* scrollspy docs */ + +.scrollspy-example { + overflow: auto; + height: 200px; + position: relative; +} /* Popover docs -------------------------------------------------- */ diff --git a/docs/base-css.html b/docs/base-css.html index aa4a2ebfc0..11346b5b02 100644 --- a/docs/base-css.html +++ b/docs/base-css.html @@ -37,7 +37,7 @@ <li><a href="./scaffolding.html">Scaffolding</a></li> <li class="active"><a href="./base-css.html">Base CSS</a></li> <li><a href="./components.html">Components</a></li> - <li><a href="./javascript.html">Javascript</a></li> + <li><a href="./javascript.html">Javascript plugins</a></li> <li><a href="./less.html">Using LESS</a></li> </ul> </div> diff --git a/docs/javascript.html b/docs/javascript.html index a962e043c8..c9709d35fb 100644 --- a/docs/javascript.html +++ b/docs/javascript.html @@ -22,6 +22,40 @@ <link rel="apple-touch-icon" href="images/apple-touch-icon.png"> <link rel="apple-touch-icon" sizes="72x72" href="images/apple-touch-icon-72x72.png"> <link rel="apple-touch-icon" sizes="114x114" href="images/apple-touch-icon-114x114.png"> + + <!-- Le javascript --> + <!-- placed up here so that the inline demos can be next to their markup --> + <script src="http://code.jquery.com/jquery-1.7.js"></script> + <script src="http://autobahn.tablesorter.com/jquery.tablesorter.min.js"></script> + <script src="assets/js/google-code-prettify/prettify.js"></script> + <script>$(function () { prettyPrint() })</script> + <script src="../js/bootstrap-transitions.js"></script> + <script src="../js/bootstrap-alerts.js"></script> + <script src="../js/bootstrap-modal.js"></script> + <script src="../js/bootstrap-dropdown.js"></script> + <script src="../js/bootstrap-scrollspy.js"></script> + <script src="../js/bootstrap-tabs.js"></script> + <script src="../js/bootstrap-twipsy.js"></script> + <script src="../js/bootstrap-popover.js"></script> + <script> + $(function () { + + // twipsy demo + $("a[rel=twipsy]").twipsy({ + live: true + }) + + //popover demo + $("a[rel=popover]") + .popover({ + offset: 10 + }) + .click(function(e) { + e.preventDefault() + }) + }) + </script> + </head> <body id="bootstrap-js"> @@ -44,26 +78,6 @@ </div> </div> -<!-- - <div class="navbar navbar-fixed" data-scrollspy="scrollspy"> - <div class="navbar-inner"> - <div class="container"> - <a class="brand" href="./index.html">Bootstrap</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> - <li><a href="#scrollspy">ScrollSpy</a></li> - <li><a href="#tabs">Tabs</a></li> - <li><a href="#twipsy">Twipsy</a></li> - <li><a href="#popover">Popover</a></li> - <li><a href="#alerts">Alerts</a></li> - </ul> - </div> - </div> - </div> - --> - <div class="container"> <!-- Masthead ================================================== --> @@ -105,7 +119,7 @@ <td>The alert plugin is a super tiny class for adding close functionality to alerts.</td> </tr> <tr> - <td><a href="./javascript.html#dropdowns">bootstrap-dropdown.js</a></td> + <td><a href="./javascript.html#dropdown">bootstrap-dropdown.js</a></td> <td>This plugin is for adding dropdown interaction to the bootstrap navbar or tabbed navigations.</td> </tr> <tr> @@ -164,35 +178,35 @@ <tr> <td>backdrop</td> <td>boolean</td> - <td>false</td> + <td>true</td> <td>Includes a modal-backdrop element</td> </tr> <tr> <td>keyboard</td> <td>boolean</td> - <td>false</td> + <td>true</td> <td>Closes the modal when escape key is pressed</td> </tr> <tr> <td>show</td> <td>boolean</td> - <td>false</td> + <td>true</td> <td>Opens modal on class initialization</td> </tr> </tbody> </table> <h3>Markup</h3> - <p>You can activate modals on your page easily without having to write a single line of javascript. Just give an element a <code>data-controls-modal</code> attribute which corresponds to a modal element id, and when clicked, it will launch your modal. To add modal options, just include them as data attributes as well.</p> + <p>You can activate modals on your page easily without having to write a single line of javascript. Just give an element a <code>data-controls-modal</code> attribute which corresponds to a modal element id, and when clicked, it will launch your modal. To add modal options, just include them as data attributes.</p> <pre class="prettyprint linenums"> <a class="btn" data-controls-modal="my-modal" data-backdrop="true" >Launch Modal</a> </pre> - <p><span class="label notice">Notice</span> If you want your modal to animate in and out, just add a <code>.fade</code> class to your <code>.modal</code> element (refer to the demo to see this in action).</p> + <p><span class="label notice">Notice</span> If you want your modal to animate in and out, just add a <code>.fade</code> class to the <code>.modal</code> element (refer to the demo to see this in action).</p> <h3>Methods</h3> <h4>.modal(options)</h4> <p>Activates your content as a modal. Accepts an optional options <code>object</code>. <pre class="prettyprint linenums"> $('#my-modal').modal({ - closeOnEscape: true + keyboard: false })</pre> <h4>.modal('toggle')</h4> <p>Manually toggles a modal.</p> @@ -203,10 +217,6 @@ $('#my-modal').modal({ <h4>.modal('hide')</h4> <p>Manually hides a modal.</p> <pre class="prettyprint linenums">$('#my-modal').modal('hide')</pre> - <h4>.modal(true)</h4> - <p>Returns an elements modal class instance.</p> - <pre class="prettyprint linenums">$('#my-modal').modal(true)</pre> - <p><span class="label notice">Notice</span> Alternatively, this can be retrieved with <code>$().data('modal')</code>.</p> <h3>Events</h3> <p>Bootstrap's modal class exposes a few events for hooking into modal functionality. </p> <table class="striped-table"> @@ -255,7 +265,7 @@ $('#my-modal').bind('hidden', function () { <a href="#" class="btn" data-modal-dismiss="true" >Close</a> </div> </div> - <button data-controls-modal="modal-from-dom" data-backdrop="true" data-keyboard="true" class="btn danger">Launch Modal</button> + <button data-controls-modal="modal-from-dom" class="btn danger">Launch Modal</button> </div> </div> </section> @@ -275,14 +285,14 @@ $('#my-modal').bind('hidden', function () { </div> <div class="span9 columns"> <h3>Using boostrap-dropdown.js</h3> - <pre class="prettyprint linenums">$('#navbar').dropdown()</pre> + <pre class="prettyprint linenums">$('.dropdown-toggle').dropdown()</pre> <h3>Markup</h3> - <p>To quickly add dropdown functionality to any nav element, use the <code>data-dropdown</code> attribute. Any valid bootstrap dropdown will automatically be activated.</p> + <p>To quickly add dropdown functionality to any element just add <code>data-toggle="dropdown"</code>. Any valid bootstrap dropdown will automatically be activated.</p> <pre class="prettyprint linenums"> <ul class="tabs"> <li class="active"><a href="#">Home</a></li> - <li class="dropdown" data-dropdown="true" > - <a href="#" class="dropdown-toggle">Dropdown</a> + <li class="dropdown"> + <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown</a> <ul class="dropdown-menu"> <li><a href="#">Secondary link</a></li> <li><a href="#">Something else here</a></li> @@ -310,7 +320,7 @@ $('#my-modal').bind('hidden', function () { </form> <ul class="nav secondary-nav"> <li class="dropdown"> - <a href="#" class="dropdown-toggle" data-dropdown="true">Dropdown 1</a> + <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown 1</a> <ul class="dropdown-menu"> <li><a href="#">Secondary link</a></li> <li><a href="#">Something else here</a></li> @@ -319,7 +329,7 @@ $('#my-modal').bind('hidden', function () { </ul> </li> <li class="dropdown"> - <a href="#" class="dropdown-toggle" data-dropdown="true">Dropdown 2</a> + <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown 2</a> <ul class="dropdown-menu"> <li><a href="#">Secondary link</a></li> <li><a href="#">Something else here</a></li> @@ -351,21 +361,60 @@ $('#my-modal').bind('hidden', function () { <h2>Using boostrap-scrollspy.js</h2> <pre class="prettyprint linenums">$('#navbar').dropdown()</pre> <h3>Markup</h3> - <p>To easily add scrollspy behavior to your nav, just add the <code>data-scrollspy</code> attribute to the <code>.navbar</code>. - <pre class="prettyprint linenums"><div class="navbar" data-scrollspy="scrollspy" >...</div></pre> - <h3>Methods</h3> - <h4>$().scrollspy()</h4> - <p> - Auto activates navigation buttons by users scroll position. - </p> - <pre class="prettyprint linenums">$('body > .navbar').scrollSpy()</pre> + <p>To easily add scrollspy behavior to your topbar navigation, just add <code>data-spy="scroll"</code> to the element you want to spy on (most typically this would be the body). + <pre class="prettyprint linenums"><body data-spy="scroll" >...</body></pre> <p><span class="label notice">Notice</span> Navbar anchor tags must have resolvable id targets. For example, a <code><a href="#home">home</a></code> must correspond to something in the dom like <code><div id="home"></div></code>. - </p> - <h4>.scrollspy('refresh')</h4> - <p>The scrollspy caches nav buttons and section coordinates for performance. If you need to update this cache (likely if you have dynamic content) just call this refresh method. If you used the data attribute to define your scrollspy, just call refresh on the body.</p> - <pre class="prettyprint linenums">$('body').scrollspy('refresh')</pre> <h3>Demo</h3> - <p>Checkout the the navbar navigation on this page.</p> + <p> + Scroll the area below and watch the navigation update. The dropdown sub items will be highlighted as well. Try it!</p> + <p> + + <div id="navbar-example" class="navbar navbar-static"> + <div class="navbar-inner"> + <div class="container" style="width: auto;"> + <a class="brand" href="#">Project Name</a> + <ul class="nav"> + <li><a href="#fat">@fat</a></li> + <li><a href="#mdo">@mdo</a></li> + <li class="dropdown"> + <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown</a> + <ul class="dropdown-menu"> + <li><a href="#one">one</a></li> + <li><a href="#two">two</a></li> + <li class="divider"></li> + <li><a href="#three">three</a></li> + </ul> + </li> + </ul> + </div> + </div> + </div> + + <div data-spy="scroll" class="scrollspy-example"> + <h4 id="fat">@fat</h4> + <p> + Ad leggings keytar, brunch id art party dolor labore. Pitchfork yr enim lo-fi before they sold out qui. Tumblr farm-to-table bicycle rights whatever. Anim keffiyeh carles cardigan. Velit seitan mcsweeney's photo booth 3 wolf moon irure. Cosby sweater lomo jean shorts, williamsburg hoodie minim qui you probably haven't heard of them et cardigan trust fund culpa biodiesel wes anderson aesthetic. Nihil tattooed accusamus, cred irony biodiesel keffiyeh artisan ullamco consequat. + </p> + <h4 id="mdo">@mdo</h4> + <p> + Veniam marfa mustache skateboard, adipisicing fugiat velit pitchfork beard. Freegan beard aliqua cupidatat mcsweeney's vero. Cupidatat four loko nisi, ea helvetica nulla carles. Tattooed cosby sweater food truck, mcsweeney's quis non freegan vinyl. Lo-fi wes anderson +1 sartorial. Carles non aesthetic exercitation quis gentrify. Brooklyn adipisicing craft beer vice keytar deserunt. + </p> + <h4 id="one">one</h4> + <p> + Occaecat commodo aliqua delectus. Fap craft beer deserunt skateboard ea. Lomo bicycle rights adipisicing banh mi, velit ea sunt next level locavore single-origin coffee in magna veniam. High life id vinyl, echo park consequat quis aliquip banh mi pitchfork. Vero VHS est adipisicing. Consectetur nisi DIY minim messenger bag. Cred ex in, sustainable delectus consectetur fanny pack iphone. + </p> + <h4 id="two">two</h4> + <p> + In incididunt echo park, officia deserunt mcsweeney's proident master cleanse thundercats sapiente veniam. Excepteur VHS elit, proident shoreditch +1 biodiesel laborum craft beer. Single-origin coffee wayfarers irure four loko, cupidatat terry richardson master cleanse. Assumenda you probably haven't heard of them art party fanny pack, tattooed nulla cardigan tempor ad. Proident wolf nesciunt sartorial keffiyeh eu banh mi sustainable. Elit wolf voluptate, lo-fi ea portland before they sold out four loko. Locavore enim nostrud mlkshk brooklyn nesciunt. + </p> + <h4 id="three">three</h4> + <p> + Ad leggings keytar, brunch id art party dolor labore. Pitchfork yr enim lo-fi before they sold out qui. Tumblr farm-to-table bicycle rights whatever. Anim keffiyeh carles cardigan. Velit seitan mcsweeney's photo booth 3 wolf moon irure. Cosby sweater lomo jean shorts, williamsburg hoodie minim qui you probably haven't heard of them et cardigan trust fund culpa biodiesel wes anderson aesthetic. Nihil tattooed accusamus, cred irony biodiesel keffiyeh artisan ullamco consequat. + </p> + <p>Keytar twee blog, culpa messenger bag marfa whatever delectus food truck. Sapiente synth id assumenda. Locavore sed helvetica cliche irony, thundercats you probably haven't heard of them consequat hoodie gluten-free lo-fi fap aliquip. Labore elit placeat before they sold out, terry richardson proident brunch nesciunt quis cosby sweater pariatur keffiyeh ut helvetica artisan. Cardigan craft beer seitan readymade velit. VHS chambray laboris tempor veniam. Anim mollit minim commodo ullamco thundercats. + </p> + </div> + </div> </div> </section> @@ -414,27 +463,59 @@ $('#my-modal').bind('hidden', function () { }) </script></pre> </p> + <h3>Events</h3> + <table class="zebra-striped"> + <thead> + <tr> + <th style="width: 150px;">Event</th> + <th>Description</th> + </tr> + </thead> + <tbody> + <tr> + <td>change</td> + <td>This event fires on tab change. Use <code>event.target</code> and <code>event.relatedTarget</code> to target the active tab and the previous active tab respectively.</td> + </tr> + </tbody> + </table> + + <pre class="prettyprint linenums"> +$('.tabs a').bind('change', function (e) { + e.target // activated tab + e.relatedTarget // previous tab +})</pre> <h3>Demo</h3> - <div class="tabbable"> - <ul class="tabs" data-tabs="tabs"> - <li class="active"><a href="#home">Home</a></li> - <li><a href="#profile">Profile</a></li> - <li><a href="#messages">Messages</a></li> - <li><a href="#settings">Settings</a></li> - </ul> - <div class="tab-content" id="myTabContent"> - <div class="tab-pane active" id="home"> - <p>Raw denim you probably haven't heard of them jean shorts Austin. Nesciunt tofu stumptown aliqua, retro synth master cleanse. Mustache cliche tempor, williamsburg carles vegan helvetica. Reprehenderit butcher retro keffiyeh dreamcatcher synth. Cosby sweater eu banh mi, qui irure terry richardson ex squid. Aliquip placeat salvia cillum iphone. Seitan aliquip quis cardigan american apparel, butcher voluptate nisi qui.</p> - </div> - <div class="tab-pane" id="profile"> - <p>Food truck fixie locavore, accusamus mcsweeney's marfa nulla single-origin coffee squid. Exercitation +1 labore velit, blog sartorial PBR leggings next level wes anderson artisan four loko farm-to-table craft beer twee. Qui photo booth letterpress, commodo enim craft beer mlkshk aliquip jean shorts ullamco ad vinyl cillum PBR. Homo nostrud organic, assumenda labore aesthetic magna delectus mollit. Keytar helvetica VHS salvia yr, vero magna velit sapiente labore stumptown. Vegan fanny pack odio cillum wes anderson 8-bit, sustainable jean shorts beard ut DIY ethical culpa terry richardson biodiesel. Art party scenester stumptown, tumblr butcher vero sint qui sapiente accusamus tattooed echo park.</p> - </div> - <div class="tab-pane" id="messages"> - <p>Banksy do proident, brooklyn photo booth delectus sunt artisan sed organic exercitation eiusmod four loko. Quis tattooed iphone esse aliqua. Master cleanse vero fixie mcsweeney's. Ethical portland aute, irony food truck pitchfork lomo eu anim. Aesthetic blog DIY, ethical beard leggings tofu consequat whatever cardigan nostrud. Helvetica you probably haven't heard of them carles, marfa veniam occaecat lomo before they sold out in shoreditch scenester sustainable thundercats. Consectetur tofu craft beer, mollit brunch fap echo park pitchfork mustache dolor.</p> - </div> - <div class="tab-pane" id="settings"> - <p>Sunt qui biodiesel mollit officia, fanny pack put a bird on it thundercats seitan squid ad wolf bicycle rights blog. Et aute readymade farm-to-table carles 8-bit, nesciunt nulla etsy adipisicing organic ea. Master cleanse mollit high life, next level Austin nesciunt american apparel twee mustache adipisicing reprehenderit hoodie portland irony. Aliqua tofu quinoa +1 commodo eiusmod. High life williamsburg cupidatat twee homo leggings. Four loko vinyl DIY consectetur nisi, marfa retro keffiyeh vegan. Fanny pack viral retro consectetur gentrify fap.</p> - </div> + <ul class="tabs" data-tabs="tabs"> + <li class="active"><a href="#home">Home</a></li> + <li><a href="#profile">Profile</a></li> + <li><a href="#messages">Messages</a></li> + <li><a href="#settings">Settings</a></li> + <li class="dropdown"> + <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown</a> + <ul class="dropdown-menu"> + <li><a href="#dropdown1">@fat</a></li> + <li><a href="#dropdown2">@mdo</a></li> + </ul> + </li> + </ul> + <div id="my-tab-content" class="tab-content"> + <div class="active tab-pane" id="home"> + <p>Raw denim you probably haven't heard of them jean shorts Austin. Nesciunt tofu stumptown aliqua, retro synth master cleanse. Mustache cliche tempor, williamsburg carles vegan helvetica. Reprehenderit butcher retro keffiyeh dreamcatcher synth. Cosby sweater eu banh mi, qui irure terry richardson ex squid. Aliquip placeat salvia cillum iphone. Seitan aliquip quis cardigan american apparel, butcher voluptate nisi qui.</p> + </div> + <div class="tab-pane" id="profile"> + <p>Food truck fixie locavore, accusamus mcsweeney's marfa nulla single-origin coffee squid. Exercitation +1 labore velit, blog sartorial PBR leggings next level wes anderson artisan four loko farm-to-table craft beer twee. Qui photo booth letterpress, commodo enim craft beer mlkshk aliquip jean shorts ullamco ad vinyl cillum PBR. Homo nostrud organic, assumenda labore aesthetic magna delectus mollit. Keytar helvetica VHS salvia yr, vero magna velit sapiente labore stumptown. Vegan fanny pack odio cillum wes anderson 8-bit, sustainable jean shorts beard ut DIY ethical culpa terry richardson biodiesel. Art party scenester stumptown, tumblr butcher vero sint qui sapiente accusamus tattooed echo park.</p> + </div> + <div class="tab-pane" id="messages"> + <p>Banksy do proident, brooklyn photo booth delectus sunt artisan sed organic exercitation eiusmod four loko. Quis tattooed iphone esse aliqua. Master cleanse vero fixie mcsweeney's. Ethical portland aute, irony food truck pitchfork lomo eu anim. Aesthetic blog DIY, ethical beard leggings tofu consequat whatever cardigan nostrud. Helvetica you probably haven't heard of them carles, marfa veniam occaecat lomo before they sold out in shoreditch scenester sustainable thundercats. Consectetur tofu craft beer, mollit brunch fap echo park pitchfork mustache dolor.</p> + </div> + <div class="tab-pane" id="settings"> + <p>Sunt qui biodiesel mollit officia, fanny pack put a bird on it thundercats seitan squid ad wolf bicycle rights blog. Et aute readymade farm-to-table carles 8-bit, nesciunt nulla etsy adipisicing organic ea. Master cleanse mollit high life, next level Austin nesciunt american apparel twee mustache adipisicing reprehenderit hoodie portland irony. Aliqua tofu quinoa +1 commodo eiusmod. High life williamsburg cupidatat twee homo leggings. Four loko vinyl DIY consectetur nisi, marfa retro keffiyeh vegan. Fanny pack viral retro consectetur gentrify fap.</p> + </div> + <div class="tab-pane" id="dropdown1"> + <p>Etsy mixtape wayfarers, ethical wes anderson tofu before they sold out mcsweeney's organic lomo retro fanny pack lo-fi farm-to-table readymade. Messenger bag gentrify pitchfork tattooed craft beer, iphone skateboard locavore carles etsy salvia banksy hoodie helvetica. DIY synth PBR banksy irony. Leggings gentrify squid 8-bit cred pitchfork. Williamsburg banh mi whatever gluten-free, carles pitchfork biodiesel fixie etsy retro mlkshk vice blog. Scenester cred you probably haven't heard of them, vinyl craft beer blog stumptown. Pitchfork sustainable tofu synth chambray yr.</p> + </div> + <div class="tab-pane" id="dropdown2"> + <p>Trust fund seitan letterpress, keytar raw denim keffiyeh etsy art party before they sold out master cleanse gluten-free squid scenester freegan cosby sweater. Fanny pack portland seitan DIY, art party locavore wolf cliche high life echo park Austin. Cred vinyl keffiyeh DIY salvia PBR, banh mi before they sold out farm-to-table VHS viral locavore cosby sweater. Lomo wolf viral, mustache readymade thundercats keffiyeh craft beer marfa ethical. Wolf salvia freegan, sartorial keffiyeh echo park vegan.</p> </div> </div> </div> @@ -473,36 +554,12 @@ $('#my-modal').bind('hidden', function () { <td>true</td> <td>apply a css fade transition to the tooltip</td> </tr> - <tr> - <td>delayIn</td> - <td>number</td> - <td>0</td> - <td>delay before showing tooltip (ms)</td> - </tr> - <tr> - <td>delayOut</td> - <td>number</td> - <td>0</td> - <td>delay before hiding tooltip (ms)</td> - </tr> - <tr> - <td>fallback</td> - <td>string</td> - <td>''</td> - <td>text to use when no tooltip title is present</td> - </tr> <tr> <td>placement</td> <td>string</td> <td>'above'</td> <td>how to position the tooltip - above | below | left | right</td> </tr> - <tr> - <td>html</td> - <td>boolean</td> - <td>false</td> - <td>allows html content within tooltip</td> - </tr> <tr> <td>live</td> <td>boolean</td> @@ -515,20 +572,28 @@ $('#my-modal').bind('hidden', function () { <td>0</td> <td>pixel offset of tooltip from target element</td> </tr> - <tr> - <td>title</td> - <td>string | function</td> - <td>'title'</td> - <td>attribute or method for retrieving title text</td> - </tr> <tr> <td>trigger</td> <td>string</td> <td>'hover'</td> <td>how tooltip is triggered - hover | focus | manual</td> </tr> + <tr> + <td>delay</td> + <td>number | object</td> + <td>0</td> + <td> + <p>delay showing/hiding the tooltip (ms)</p> + <p>If a number is supplied, delay is applied to both hide/show</p> + <p>Object structure is: <code>delay: { show: 500, hide: 100 }</code></p> + </td> + </tr> </tbody> </table> + <p><span class="label notice">Notice</span> Individual twipsy instance options can alternatively be specified through the use of data attributes.</code></p> + <h3>Markup</h3> + <p>Twipsy's should contain a title tag which will be use to fill the tip content.<p> + <pre class="prettyprint linenums"><a href="#" rel='twipsy' title='twipsy text'>@fat</a></pre> <h3>Methods</h3> <h4>$().twipsy(options)</h4> <p>Attaches a twipsy handler to an element collection.</p> @@ -538,22 +603,11 @@ $('#my-modal').bind('hidden', function () { <h4>.twipsy('hide')</h4> <p>Hides an elements twipsy.</p> <pre class="prettyprint linenums">$('#element').twipsy('hide')</pre> - <h4>.twipsy(true)</h4> - <p>Returns an elements twipsy class instance.</p> - <pre class="prettyprint linenums">$('#element').twipsy(true)</pre> - <p><span class="label notice">Notice</span> Alternatively, this can be retrieved with <code>$().data('twipsy')</code>.</p> <h3>Demo</h3> <div class="well"> <p class="muted">Tight pants next level keffiyeh <a href="#" rel='twipsy' title='Some title text'>you probably</a> haven't heard of them. Photo booth beard raw denim letterpress vegan messenger bag stumptown. Farm-to-table seitan, mcsweeney's fixie sustainable quinoa 8-bit american apparel <a href="#" rel='twipsy' title='Another twipsy'>have a</a> terry richardson vinyl chambray. Beard stumptown, cardigans banh mi lomo thundercats. Tofu biodiesel williamsburg marfa, four loko mcsweeney's cleanse vegan chambray. A <a href="#" rel='twipsy' title='Another one here too'>really ironic</a> artisan whatever keytar, scenester farm-to-table banksy Austin <a href="#" rel='twipsy' title='The last tip!'>twitter handle</a> freegan cred raw denim single-origin coffee viral. </p> </div> - <script> - $(function () { - $("a[rel=twipsy]").twipsy({ - live: true - }) - }) - </script> </div> </div> </section> @@ -591,34 +645,16 @@ $('#my-modal').bind('hidden', function () { <td>apply a css fade transition to the tooltip</td> </tr> <tr> - <td>delayIn</td> - <td>number</td> - <td>0</td> - <td>delay before showing tooltip (ms)</td> - </tr> - <tr> - <td>delayOut</td> - <td>number</td> + <td>delay</td> + <td>number | object</td> <td>0</td> - <td>delay before hiding tooltip (ms)</td> - </tr> - <tr> - <td>fallback</td> - <td>string</td> - <td>''</td> - <td>text to use when no tooltip title is present</td> + <td>delay before showing/hiding the tooltip (ms)</td> </tr> <tr> <td>placement</td> <td>string</td> <td>'right'</td> - <td>how to position the tooltip - above | below | left | right</td> - </tr> - <tr> - <td>html</td> - <td>boolean</td> - <td>false</td> - <td>allows html content within tooltip</td> + <td>how to position the popover - above | below | left | right</td> </tr> <tr> <td>live</td> @@ -632,18 +668,6 @@ $('#my-modal').bind('hidden', function () { <td>0</td> <td>pixel offset of tooltip from target element</td> </tr> - <tr> - <td>title</td> - <td>string | function</td> - <td>'title'</td> - <td>attribute or method for retrieving title text</td> - </tr> - <tr> - <td>content</td> - <td>string | function</td> - <td>'data-content'</td> - <td>attribute or method for retrieving content text</td> - </tr> <tr> <td>trigger</td> <td>string</td> @@ -652,6 +676,12 @@ $('#my-modal').bind('hidden', function () { </tr> </tbody> </table> + <p><span class="label notice">Notice</span> Individual popover instance options can alternatively be specified through the use of data attributes.</code></p> + <h3>Markup</h3> + <p>Popover's should contain a title tag and a data-content attribute.<p> +<pre class="prettyprint linenums"><a href="#" class="btn" rel="popover" title="A Title" data-content="Some content"> + hover for popover +</a></pre> <h3>Methods</h3> <h4>$().popover(options)</h4> <p>Initializes popovers for an element collection.</p> @@ -663,17 +693,6 @@ $('#my-modal').bind('hidden', function () { <pre class="prettyprint linenums">$('#element').popover('hide')</pre> <h3>Demo</h3> <a href="#" class="btn danger" rel="popover" title="A Title" data-content="And here's some amazing content. It's very engaging. right?">hover for popover</a> - <script> - $(function () { - $("a[rel=popover]") - .popover({ - offset: 10 - }) - .click(function(e) { - e.preventDefault() - }) - }) - </script> </div> </div> </section> @@ -695,7 +714,8 @@ $('#my-modal').bind('hidden', function () { <h3>Using bootstrap-alerts.js</h3> <pre class="prettyprint linenums">$(".alert-message").alert()</pre> <h3>Markup</h3> - <p>Just add a <code>data-alert</code> attribute to your alert messages to automatically give them close functionality.</p> + <p>Just add <code>data-dismiss="alert"</code> to your close button to automatically give an alert close functionality.</p> + <pre class="prettyprint linenums"><a class="close" data-dismiss="alert" href="#">&times;</a></pre> <h3>Methods</h3> <h4>$().alert()</h4> <p>Wraps all alerts with close functionality. To have your alerts animate out when closed, make sure they have the <code>.fade</code> and <code>.in</code> class already applied to them.</p> @@ -703,12 +723,12 @@ $('#my-modal').bind('hidden', function () { <p>Closes an alert.</p> <pre class="prettyprint linenums">$(".alert-message").alert('close')</pre> <h3>Demo</h3> - <div class="alert-message warning fade in" data-alert="alert" > - <a class="close" data-alert-dismiss="true" href="#">×</a> + <div class="alert-message warning fade in"> + <a class="close" data-dismiss="alert" href="#">×</a> <p><strong>Holy guacamole!</strong> Best check yo self, you’re not looking too good.</p> </div> - <div class="alert-message block-message error fade in" data-alert="alert" > - <a class="close" data-alert-dismiss="true" href="#">×</a> + <div class="alert-message block-message error fade in"> + <a class="close" data-dismiss="alert" href="#">×</a> <p><strong>Oh snap! You got an error!</strong> Change this and that and try again. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Cras mattis consectetur purus sit amet fermentum.</p> <div class="alert-actions"> <a class="btn small" href="#">Take this action</a> <a class="btn small" href="#">Or do this</a> @@ -729,17 +749,5 @@ $('#my-modal').bind('hidden', function () { </p> </footer> </div><!-- /container --> - - <!-- Le javascript --> - <!-- Placed at the end of the document so the pages load faster --> - <script src="http://code.jquery.com/jquery-1.5.2.min.js"></script> - <script src="http://autobahn.tablesorter.com/jquery.tablesorter.min.js"></script> - <script src="assets/js/google-code-prettify/prettify.js"></script> - <script>$(function () { prettyPrint() })</script> - <script src="../js/bootstrap-transitions.js"></script> - <script src="../js/bootstrap-dropdown.js"></script> - <script src="../js/bootstrap-twipsy.js"></script> - <script src="../js/bootstrap-scrollspy.js"></script> - <script src="assets/js/application.js"></script> </body> </html> diff --git a/js/bootstrap-alerts.js b/js/bootstrap-alerts.js index 3ef1672bc0..600440e40e 100644 --- a/js/bootstrap-alerts.js +++ b/js/bootstrap-alerts.js @@ -1,5 +1,5 @@ /* ========================================================== - * bootstrap-alerts.js v1.4.0 + * bootstrap-alerts.js v2.0.0 * http://twitter.github.com/bootstrap/javascript.html#alerts * ========================================================== * Copyright 2011 Twitter, Inc. @@ -22,34 +22,6 @@ "use strict" - /* CSS TRANSITION SUPPORT (https://gist.github.com/373874) - * ======================================================= */ - - var transitionEnd - - $(document).ready(function () { - - $.support.transition = (function () { - var thisBody = document.body || document.documentElement - , thisStyle = thisBody.style - , support = thisStyle.transition !== undefined || thisStyle.WebkitTransition !== undefined || thisStyle.MozTransition !== undefined || thisStyle.MsTransition !== undefined || thisStyle.OTransition !== undefined - return support - })() - - // set CSS transition event type - if ( $.support.transition ) { - transitionEnd = "TransitionEnd" - if ( $.browser.webkit ) { - transitionEnd = "webkitTransitionEnd" - } else if ( $.browser.mozilla ) { - transitionEnd = "transitionend" - } else if ( $.browser.opera ) { - transitionEnd = "oTransitionEnd" - } - } - - }) - /* ALERT CLASS DEFINITION * ====================== */ @@ -76,7 +48,7 @@ } $.support.transition && $element.hasClass('fade') ? - $element.bind(transitionEnd, removeElement) : + $element.bind($.support.transition.end, removeElement) : removeElement() } @@ -88,10 +60,6 @@ $.fn.alert = function ( options ) { - if ( options === true ) { - return this.data('alert') - } - return this.each(function () { var $this = $(this) , data @@ -112,13 +80,11 @@ } $.fn.alert.defaults = { - selector: '.close' + selector: '[data-dismiss="alert"]' } - $(document).ready(function () { - new Alert($('body'), { - selector: '.alert-message[data-alert] .close' - }) + $(function () { + new Alert( $('body') ) }) }( window.jQuery || window.ender ); \ No newline at end of file diff --git a/js/bootstrap-dropdown.js b/js/bootstrap-dropdown.js index cab0ec27ed..bb7d11b1fa 100644 --- a/js/bootstrap-dropdown.js +++ b/js/bootstrap-dropdown.js @@ -1,5 +1,5 @@ /* ============================================================ - * bootstrap-dropdown.js v1.4.0 + * bootstrap-dropdown.js v2.0.0 * http://twitter.github.com/bootstrap/javascript.html#dropdown * ============================================================ * Copyright 2011 Twitter, Inc. @@ -22,34 +22,45 @@ "use strict" + /* SIMPLE DROPDOWN LOGIC + * ===================== */ + + var s = '[data-toggle="dropdown"]' + + function clearMenus() { + $(s).parent('li').removeClass('open') + } + + function toggle(e) { + var li = $(this).parent('li') + , isActive = li.hasClass('open') + + clearMenus() + !isActive && li.toggleClass('open') + + return false + } + + /* DROPDOWN PLUGIN DEFINITION * ========================== */ $.fn.dropdown = function ( selector ) { return this.each(function () { - $(this).delegate(selector || d, 'click', function (e) { - var li = $(this).parent('li') - , isActive = li.hasClass('open') - - clearMenus() - !isActive && li.toggleClass('open') - return false - }) + var args = ['click', toggle] + , $this = $(this) + selector && args.unshift(selector) + $this[selector ? 'delegate' : 'bind'].apply($this, args) }) } + /* APPLY TO STANDARD DROPDOWN ELEMENTS * =================================== */ - var d = 'a.menu, .dropdown-toggle' - - function clearMenus() { - $(d).parent('li').removeClass('open') - } - $(function () { $('html').bind("click", clearMenus) - $('body').dropdown( '[data-dropdown] a.menu, [data-dropdown] .dropdown-toggle' ) + $('body').dropdown(s) }) }( window.jQuery || window.ender ); \ No newline at end of file diff --git a/js/bootstrap-modal.js b/js/bootstrap-modal.js index be2315afba..ccc7b133b2 100644 --- a/js/bootstrap-modal.js +++ b/js/bootstrap-modal.js @@ -22,35 +22,6 @@ "use strict" - /* CSS TRANSITION SUPPORT (https://gist.github.com/373874) - * ======================================================= */ - - var transitionEnd - - $(document).ready(function () { - - $.support.transition = (function () { - var thisBody = document.body || document.documentElement - , thisStyle = thisBody.style - , support = thisStyle.transition !== undefined || thisStyle.WebkitTransition !== undefined || thisStyle.MozTransition !== undefined || thisStyle.MsTransition !== undefined || thisStyle.OTransition !== undefined - return support - })() - - // set CSS transition event type - if ( $.support.transition ) { - transitionEnd = "TransitionEnd" - if ( $.browser.webkit ) { - transitionEnd = "webkitTransitionEnd" - } else if ( $.browser.mozilla ) { - transitionEnd = "transitionend" - } else if ( $.browser.opera ) { - transitionEnd = "oTransitionEnd" - } - } - - }) - - /* MODAL PUBLIC CLASS DEFINITION * ============================= */ @@ -92,7 +63,7 @@ that.$element.addClass('in') transition ? - that.$element.one(transitionEnd, function () { that.$element.trigger('shown') }) : + that.$element.one($.support.transition.end, function () { that.$element.trigger('shown') }) : that.$element.trigger('shown') }) @@ -130,14 +101,13 @@ * ===================== */ function hideWithTransition() { - // firefox drops transitionEnd events :{o var that = this , timeout = setTimeout(function () { - that.$element.unbind(transitionEnd) + that.$element.unbind($.support.transition.end) hideModal.call(that) }, 500) - this.$element.one(transitionEnd, function () { + this.$element.one($.support.transition.end, function () { clearTimeout(timeout) hideModal.call(that) }) @@ -171,14 +141,14 @@ this.$backdrop.addClass('in') doAnimate ? - this.$backdrop.one(transitionEnd, callback) : + this.$backdrop.one($.support.transition.end, callback) : callback() } else if ( !this.isShown && this.$backdrop ) { this.$backdrop.removeClass('in') $.support.transition && this.$element.hasClass('fade')? - this.$backdrop.one(transitionEnd, $.proxy(removeBackdrop, this)) : + this.$backdrop.one($.support.transition.end, $.proxy(removeBackdrop, this)) : removeBackdrop.call(this) } else if ( callback ) { @@ -240,9 +210,9 @@ $.fn.modal.Modal = Modal $.fn.modal.defaults = { - backdrop: false - , keyboard: false - , show: false + backdrop: true + , keyboard: true + , show: true } @@ -252,7 +222,7 @@ $(document).ready(function () { $('body').delegate('[data-controls-modal]', 'click', function (e) { e.preventDefault() - var $this = $(this).data('show', true) + var $this = $(this) $('#' + $this.attr('data-controls-modal')).modal( $this.data() ) }) }) diff --git a/js/bootstrap-popover.js b/js/bootstrap-popover.js index c23741735b..d0bd831317 100644 --- a/js/bootstrap-popover.js +++ b/js/bootstrap-popover.js @@ -1,5 +1,5 @@ /* =========================================================== - * bootstrap-popover.js v1.4.0 + * bootstrap-popover.js v2.0.0 * http://twitter.github.com/bootstrap/javascript.html#popover * =========================================================== * Copyright 2011 Twitter, Inc. @@ -36,8 +36,8 @@ setContent: function () { var $tip = this.tip() - $tip.find('.title')[this.options.html ? 'html' : 'text'](this.getTitle()) - $tip.find('.content > *')[this.options.html ? 'html' : 'text'](this.getContent()) + $tip.find('.title')['html'](this.getTitle()) + $tip.find('.content > *')['html'](this.getContent()) $tip[0].className = 'popover' } diff --git a/js/bootstrap-scrollspy.js b/js/bootstrap-scrollspy.js index 1269d91ecb..91c2dcb1ed 100644 --- a/js/bootstrap-scrollspy.js +++ b/js/bootstrap-scrollspy.js @@ -20,33 +20,34 @@ !function ( $ ) { - var $window = $(window) - function ScrollSpy() { var process = $.proxy(this.process, this) - this.$topbar = $('body') - this.selector = '[data-scrollspy] li > a' + this.selector = '.nav li > a' + + this.$body = $('body').delegate(this.selector, 'click', process) + this.$scrollElement = $('[data-spy="scroll"]').bind('scroll', process) + this.refresh() - this.$topbar.delegate(this.selector, 'click', process) - $window.scroll(process) this.process() } ScrollSpy.prototype = { refresh: function () { - this.targets = this.$topbar.find(this.selector).map(function () { - var href = $(this).attr('href') - return /^#\w/.test(href) && $(href).length ? href : null - }) + this.targets = this.$body + .find(this.selector) + .map(function () { + var href = $(this).attr('href') + return /^#\w/.test(href) && $(href).length ? href : null + }) this.offsets = $.map(this.targets, function (id) { - return $(id).offset().top + return $(id).position().top }) } , process: function () { - var scrollTop = $window.scrollTop() + 10 + var scrollTop = this.$scrollElement.scrollTop() + 10 , offsets = this.offsets , targets = this.targets , activeTarget = this.activeTarget @@ -65,11 +66,11 @@ this.activeTarget = target - this.$topbar + this.$body .find(this.selector).parent('.active') .removeClass('active') - active = this.$topbar + active = this.$body .find(this.selector + '[href="' + target + '"]') .parent('li') .addClass('active') @@ -82,8 +83,6 @@ } - $(function () { - new ScrollSpy() - }) + $(function () { new ScrollSpy() }) }( window.jQuery || window.ender ) \ No newline at end of file diff --git a/js/bootstrap-tabs.js b/js/bootstrap-tabs.js index 790180ca2e..35418fd447 100644 --- a/js/bootstrap-tabs.js +++ b/js/bootstrap-tabs.js @@ -1,5 +1,5 @@ /* ======================================================== - * bootstrap-tabs.js v1.4.0 + * bootstrap-tabs.js v2.0.0 * http://twitter.github.com/bootstrap/javascript.html#tabs * ======================================================== * Copyright 2011 Twitter, Inc. diff --git a/js/bootstrap-transitions.js b/js/bootstrap-transitions.js index 49b5338a8f..25f8b111f1 100644 --- a/js/bootstrap-transitions.js +++ b/js/bootstrap-transitions.js @@ -38,7 +38,7 @@ $(function () { transitionEnd = "oTransitionEnd" } return transitionEnd - })() + }()) } })() diff --git a/js/bootstrap-twipsy.js b/js/bootstrap-twipsy.js index fc22d0218b..19e43a7234 100644 --- a/js/bootstrap-twipsy.js +++ b/js/bootstrap-twipsy.js @@ -1,5 +1,5 @@ /* ========================================================== - * bootstrap-twipsy.js v1.4.0 + * bootstrap-twipsy.js v2.0.0 * http://twitter.github.com/bootstrap/javascript.html#twipsy * Adapted from the original jQuery.tipsy by Jason Frame * ========================================================== @@ -18,40 +18,10 @@ * limitations under the License. * ========================================================== */ - !function( $ ) { "use strict" - /* CSS TRANSITION SUPPORT (https://gist.github.com/373874) - * ======================================================= */ - - var transitionEnd - - $(document).ready(function () { - - $.support.transition = (function () { - var thisBody = document.body || document.documentElement - , thisStyle = thisBody.style - , support = thisStyle.transition !== undefined || thisStyle.WebkitTransition !== undefined || thisStyle.MozTransition !== undefined || thisStyle.MsTransition !== undefined || thisStyle.OTransition !== undefined - return support - })() - - // set CSS transition event type - if ( $.support.transition ) { - transitionEnd = "TransitionEnd" - if ( $.browser.webkit ) { - transitionEnd = "webkitTransitionEnd" - } else if ( $.browser.mozilla ) { - transitionEnd = "transitionend" - } else if ( $.browser.opera ) { - transitionEnd = "oTransitionEnd" - } - } - - }) - - /* TWIPSY PUBLIC CLASS DEFINITION * ============================== */ @@ -119,7 +89,7 @@ , setContent: function () { var $tip = this.tip() - $tip.find('.twipsy-inner')[this.options.html ? 'html' : 'text'](this.getTitle()) + $tip.find('.twipsy-inner').html(this.getTitle()) $tip[0].className = 'twipsy' } @@ -134,7 +104,7 @@ } $.support.transition && this.$tip.hasClass('fade') ? - $tip.bind(transitionEnd, removeElement) : + $tip.bind( $.support.transition.end, removeElement) : removeElement() } @@ -164,7 +134,7 @@ title = ('' + title).replace(/(^\s*|\s*$)/, "") - return title || o.fallback + return title } , tip: function() { @@ -219,18 +189,21 @@ , eventIn , eventOut - if (options === true) { - return this.data(name) - } else if (typeof options == 'string') { + if (typeof options == 'string') { twipsy = this.data(name) - if (twipsy) { - twipsy[options]() - } + if (twipsy) twipsy[options]() return this } options = $.extend({}, $.fn[name].defaults, options) + if (options.delay && typeof options.delay == 'number') { + options.delay = { + show: options.delay + , hide: options.delay + } + } + function get(ele) { var twipsy = $.data(ele, name) @@ -246,7 +219,7 @@ var twipsy = get(this) twipsy.hoverState = 'in' - if (options.delayIn == 0) { + if (!options.delay || !options.delay.show) { twipsy.show() } else { twipsy.fixTitle() @@ -254,21 +227,21 @@ if (twipsy.hoverState == 'in') { twipsy.show() } - }, options.delayIn) + }, options.delay.show) } } function leave() { var twipsy = get(this) twipsy.hoverState = 'out' - if (options.delayOut == 0) { + if (!options.delay || !options.delay.hide) { twipsy.hide() } else { setTimeout(function() { if (twipsy.hoverState == 'out') { twipsy.hide() } - }, options.delayOut) + }, options.delay.hide) } } @@ -292,15 +265,12 @@ $.fn.twipsy.defaults = { animate: true - , delayIn: 0 - , delayOut: 0 - , fallback: '' + , delay: 0 , placement: 'above' - , html: false , live: false , offset: 0 - , title: 'title' , trigger: 'hover' + , title: 'title' , template: '<div class="twipsy-arrow"></div><div class="twipsy-inner"></div>' } diff --git a/lib/twipsy.less b/lib/twipsy.less index 4193eda5fb..3fa21fa012 100644 --- a/lib/twipsy.less +++ b/lib/twipsy.less @@ -8,8 +8,8 @@ visibility: visible; padding: 5px; font-size: 11px; - .opacity(80); - &.fade.in { + .opacity(0); + &.in { .opacity(80); } &.above .twipsy-arrow { #popoverArrow > .above(); } -- GitLab From 8a891f2a7b9720845932c0be8853fc25c6e49eed Mon Sep 17 00:00:00 2001 From: Jacob Thornton <jacobthornton@gmail.com> Date: Sun, 20 Nov 2011 21:06:32 -0800 Subject: [PATCH 083/318] act on all twipsy instances --- js/bootstrap-twipsy.js | 7 ++++--- 1 file changed, 4 insertions(+), 3 deletions(-) diff --git a/js/bootstrap-twipsy.js b/js/bootstrap-twipsy.js index 19e43a7234..3cb9841c52 100644 --- a/js/bootstrap-twipsy.js +++ b/js/bootstrap-twipsy.js @@ -190,9 +190,10 @@ , eventOut if (typeof options == 'string') { - twipsy = this.data(name) - if (twipsy) twipsy[options]() - return this + return this.each(function (){ + twipsy = $.data(this, name) + if (twipsy) twipsy[options]() + }) } options = $.extend({}, $.fn[name].defaults, options) -- GitLab From 47c7f655ac455cf76a4865f129a523a91486d3ad Mon Sep 17 00:00:00 2001 From: Jacob Thornton <jacobthornton@gmail.com> Date: Sun, 20 Nov 2011 21:13:28 -0800 Subject: [PATCH 084/318] update comment numbers --- js/bootstrap-buttons.js | 2 +- js/bootstrap-modal.js | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/js/bootstrap-buttons.js b/js/bootstrap-buttons.js index 16fa161cb9..2fe1a7352d 100644 --- a/js/bootstrap-buttons.js +++ b/js/bootstrap-buttons.js @@ -1,5 +1,5 @@ /* ============================================================ - * bootstrap-buttons.js v1.4.0 + * bootstrap-buttons.js v2.0.0 * http://twitter.github.com/bootstrap/javascript.html#buttons * ============================================================ * Copyright 2011 Twitter, Inc. diff --git a/js/bootstrap-modal.js b/js/bootstrap-modal.js index ccc7b133b2..e15b1237ce 100644 --- a/js/bootstrap-modal.js +++ b/js/bootstrap-modal.js @@ -1,5 +1,5 @@ /* ========================================================= - * bootstrap-modal.js v1.4.0 + * bootstrap-modal.js v2.0.0 * http://twitter.github.com/bootstrap/javascript.html#modal * ========================================================= * Copyright 2011 Twitter, Inc. -- GitLab From 36a7eb3851855b608266f301a63b561ac316bca9 Mon Sep 17 00:00:00 2001 From: Jacob Thornton <jacobthornton@gmail.com> Date: Sun, 20 Nov 2011 21:36:26 -0800 Subject: [PATCH 085/318] add build script for minified files and allow elements to be returned to getContent and title in popovers --- .gitignore | 3 ++- Makefile | 19 +++++++++++++++++++ js/bootstrap-popover.js | 8 ++++++-- 3 files changed, 27 insertions(+), 3 deletions(-) diff --git a/.gitignore b/.gitignore index 496ee2ca6a..38ad090992 100644 --- a/.gitignore +++ b/.gitignore @@ -1 +1,2 @@ -.DS_Store \ No newline at end of file +.DS_Store +js/min \ No newline at end of file diff --git a/Makefile b/Makefile index 294f0ed72e..e5c083ae6f 100644 --- a/Makefile +++ b/Makefile @@ -4,6 +4,7 @@ BOOTSTRAP = ./bootstrap.css BOOTSTRAP_MIN = ./bootstrap.min.css BOOTSTRAP_LESS = ./lib/bootstrap.less LESS_COMPESSOR ?= `which lessc` +UGLIFY_JS ?= `which uglifyjs` WATCHR ?= `which watchr` build: @@ -18,6 +19,24 @@ build: echo "You can install it by running: npm install less -g"; \ fi +uglify: + @@if test ! -z ${UGLIFY_JS}; then \ + mkdir -p js/min; \ + uglifyjs -o js/min/bootstrap-accordion.js js/bootstrap-accordion.js;\ + uglifyjs -o js/min/bootstrap-alerts.js js/bootstrap-alerts.js;\ + uglifyjs -o js/min/bootstrap-buttons.js js/bootstrap-buttons.js;\ + uglifyjs -o js/min/bootstrap-dropdown.js js/bootstrap-dropdown.js;\ + uglifyjs -o js/min/bootstrap-modal.js js/bootstrap-modal.js;\ + uglifyjs -o js/min/bootstrap-popover.js js/bootstrap-popover.js;\ + uglifyjs -o js/min/bootstrap-scrollspy.js js/bootstrap-scrollspy.js;\ + uglifyjs -o js/min/bootstrap-tabs.js js/bootstrap-tabs.js;\ + uglifyjs -o js/min/bootstrap-transitions.js js/bootstrap-transitions.js;\ + uglifyjs -o js/min/bootstrap-twipsy.js js/bootstrap-twipsy.js;\ + else \ + echo "You must have the UGLIFYJS minifier installed in order to minify Bootstrap's js."; \ + echo "You can install it by running: npm install uglify-js -g"; \ + fi + watch: @@if test ! -z ${WATCHR}; then \ echo "Watching less files..."; \ diff --git a/js/bootstrap-popover.js b/js/bootstrap-popover.js index d0bd831317..934ab05453 100644 --- a/js/bootstrap-popover.js +++ b/js/bootstrap-popover.js @@ -36,8 +36,12 @@ setContent: function () { var $tip = this.tip() - $tip.find('.title')['html'](this.getTitle()) - $tip.find('.content > *')['html'](this.getContent()) + , title = this.getTitle() + , content = this.getContent() + + $tip.find('.title')[ $.type(title) == 'object' ? 'append' : 'html' ](title) + $tip.find('.content > *')[ $.type(content) == 'object' ? 'append' : 'html' ](content) + $tip[0].className = 'popover' } -- GitLab From b2650859d6c6dcb0665311b6e983d230fee1111f Mon Sep 17 00:00:00 2001 From: Jacob Thornton <jacobthornton@gmail.com> Date: Thu, 24 Nov 2011 14:43:26 -0800 Subject: [PATCH 086/318] update buttons js for button groups --- bootstrap.css | 4 +- bootstrap.min.css | 2 +- docs/javascript.html | 112 +++++++++++++++++++++++++++++++++++++++- js/bootstrap-buttons.js | 32 ++++++++---- lib/patterns.less | 1 + 5 files changed, 136 insertions(+), 15 deletions(-) diff --git a/bootstrap.css b/bootstrap.css index d6cc76b6d8..895f1c8613 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 Nov 20 20:05:48 PST 2011 + * Date: Thu Nov 24 13:45:21 PST 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). @@ -1643,7 +1643,7 @@ footer { border-color: #0064cd #0064cd #003f81; border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25); } -.btn:active { +.btn.active, .btn:active { -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); diff --git a/bootstrap.min.css b/bootstrap.min.css index 69441b76e7..333e4db18c 100644 --- a/bootstrap.min.css +++ b/bootstrap.min.css @@ -247,7 +247,7 @@ footer{padding-top:17px;margin-top:17px;border-top:1px solid #eee;} .btn{display:inline-block;padding:5px 14px 6px;font-size:13px;line-height:normal;color:#333;text-shadow:0 1px 1px rgba(255, 255, 255, 0.75);background-color:#e6e6e6;background-image:-webkit-gradient(linear, 0 0, 0 100%, from(#ffffff), color-stop(25%, #ffffff), to(#e6e6e6));background-image:-webkit-linear-gradient(#ffffff, #ffffff 25%, #e6e6e6);background-image:-moz-linear-gradient(top, #ffffff, #ffffff 25%, #e6e6e6);background-image:-ms-linear-gradient(#ffffff, #ffffff 25%, #e6e6e6);background-image:-o-linear-gradient(#ffffff, #ffffff 25%, #e6e6e6);background-image:linear-gradient(#ffffff, #ffffff 25%, #e6e6e6);background-repeat:no-repeat;filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#e6e6e6', GradientType=0);border:1px solid #ccc;border-bottom-color:#bbb;-webkit-border-radius:4px;-moz-border-radius:4px;border-radius:4px;-webkit-box-shadow:inset 0 1px 0 rgba(255, 255, 255, 0.2),0 1px 2px rgba(0, 0, 0, 0.05);-moz-box-shadow:inset 0 1px 0 rgba(255, 255, 255, 0.2),0 1px 2px rgba(0, 0, 0, 0.05);box-shadow:inset 0 1px 0 rgba(255, 255, 255, 0.2),0 1px 2px rgba(0, 0, 0, 0.05);cursor:pointer;-webkit-transition:0.1s linear all;-moz-transition:0.1s linear all;-ms-transition:0.1s linear all;-o-transition:0.1s linear all;transition:0.1s linear all;}.btn:hover{color:#333;text-decoration:none;background-position:0 -15px;} .btn:focus{outline:1px dotted #666;} .btn.primary{color:#ffffff;text-shadow:0 -1px 0 rgba(0, 0, 0, 0.25);background-color:#0064cd;background-image:-khtml-gradient(linear, left top, left bottom, from(#049cdb), to(#0064cd));background-image:-moz-linear-gradient(top, #049cdb, #0064cd);background-image:-ms-linear-gradient(top, #049cdb, #0064cd);background-image:-webkit-gradient(linear, left top, left bottom, color-stop(0%, #049cdb), color-stop(100%, #0064cd));background-image:-webkit-linear-gradient(top, #049cdb, #0064cd);background-image:-o-linear-gradient(top, #049cdb, #0064cd);background-image:linear-gradient(top, #049cdb, #0064cd);background-repeat:repeat-x;filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#049cdb', endColorstr='#0064cd', GradientType=0);border-color:#0064cd #0064cd #003f81;border-color:rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);} -.btn:active{-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);} +.btn.active,.btn:active{-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);} .btn.disabled{cursor:default;background-image:none;filter:progid:DXImageTransform.Microsoft.gradient(enabled = false);filter:alpha(opacity=65);-moz-opacity:0.65;opacity:0.65;-webkit-box-shadow:none;-moz-box-shadow:none;box-shadow:none;} .btn[disabled]{cursor:default;background-image:none;filter:progid:DXImageTransform.Microsoft.gradient(enabled = false);filter:alpha(opacity=65);-moz-opacity:0.65;opacity:0.65;-webkit-box-shadow:none;-moz-box-shadow:none;box-shadow:none;} .btn.large{padding:9px 14px 9px;font-size:15px;line-height:normal;-webkit-border-radius:6px;-moz-border-radius:6px;border-radius:6px;} diff --git a/docs/javascript.html b/docs/javascript.html index c9709d35fb..28f5e30356 100644 --- a/docs/javascript.html +++ b/docs/javascript.html @@ -26,7 +26,6 @@ <!-- Le javascript --> <!-- placed up here so that the inline demos can be next to their markup --> <script src="http://code.jquery.com/jquery-1.7.js"></script> - <script src="http://autobahn.tablesorter.com/jquery.tablesorter.min.js"></script> <script src="assets/js/google-code-prettify/prettify.js"></script> <script>$(function () { prettyPrint() })</script> <script src="../js/bootstrap-transitions.js"></script> @@ -37,6 +36,7 @@ <script src="../js/bootstrap-tabs.js"></script> <script src="../js/bootstrap-twipsy.js"></script> <script src="../js/bootstrap-popover.js"></script> + <script src="../js/bootstrap-buttons.js"></script> <script> $(function () { @@ -138,6 +138,10 @@ <td><a href="./javascript.html#popover">bootstrap-popover.js</a></td> <td>The popover plugin provides a simple interface for adding popovers to your application. It extends the <a href="#twipsy">boostrap-twipsy.js</a> plugin, so be sure to grab that file as well when including popovers in your project!</td> </tr> + <tr> + <td><a href="./javascript.html#buttons">bootstrap-buttons.js</a></td> + <td>This plugin offers additional functionality for managing button state.</td> + </tr> </tbody> </table> <h3>Is javascript necessary?</h3> @@ -739,6 +743,112 @@ $('.tabs a').bind('change', function (e) { </section> + <!-- Buttons + ================================================== --> + + <section id="buttons"> + <div class="page-header"> + <h1>Buttons <small>bootstrap-buttons.js</small></h1> + </div> + <div class="row"> + <div class="span3 columns"> + <p>This plugin offers additional functionality for managing button state.</p> + <a href="../js/bootstrap-buttons.js" target="_blank" class="btn primary">Download</a> + </div> + <div class="span9 columns"> + <h3>Using bootstrap-buttons.js</h3> + <pre class="prettyprint linenums">$('.tabs').button()</pre> + <h3>Markup</h3> + <p>Data attributes are integral to the button plugin. Check out the example code below for the various markup types.</p> +<pre class="prettyprint linenums"> +<!-- Add data-toggle="button" to activate toggling on a single button --> +<button class="btn" data-toggle="button">Single Toggle</button> + +<!-- Add data-toggle="buttons-checkbox" for checkbox style toggling on btn-group --> +<div class="btn-group" data-toggle="buttons-checkbox"> + <button class="btn">Left</button> + <button class="btn">Middle</button> + <button class="btn">Right</button> +</div> + +<!-- Add data-toggle="buttons-radio" for radio style toggling on btn-group --> +<div class="btn-group" data-toggle="buttons-radio"> + <button class="btn">Left</button> + <button class="btn">Middle</button> + <button class="btn">Right</button> +</div> +</pre> + <h3>Methods</h3> + <h4>$().button('toggle')</h4> + <p>Toggles push state. Gives btn the look that it's been activated.</p> + <p><span class="label notice">Notice</span> You can enable auto toggling of a button by using the <code>data-toggle</code> attribute.</p> + <pre class="prettyprint linenums"><button class="btn" data-toggle="button" >...</button></pre> + <h4>$().button('loading')</h4> + <p>Sets button state to loading - disables button and swaps text to loading text. Loading text should be defined on the button element using the data attribute <code>data-loading-text</code>. + </p> + <pre class="prettyprint linenums"><button class="btn" data-loading-text="loading stuff..." >...</button></pre> + <h4>$().button('reset')</h4> + <p>Resets button state - swaps text to original text.</p> + <h4>$().button(string)</h4> + <p>Resets button state - swaps text to any data defined text state.</p> +<pre class="prettyprint linenums"><button class="btn" data-complete-text="finished!" >...</button> +<script> + $('.btn').button('complete') +</scrip></pre> + <h3>Demo</h3> + <table class="striped-table"> + <tbody> + <tr> + <td>Stateful</td> + <td> + <button id="fat-btn" data-loading-text="loading..." class="btn"> + Loading State + </button> + <script> + $(function() { + var btn = $('#fat-btn').click(function () { + btn.button('loading') + setTimeout(function () { + btn.button('reset') + }, 3000) + }) + }) + </script> + </td> + </tr> + <tr> + <td>Single Toggle</td> + <td> + <button class="btn" data-toggle="button">Single Toggle</button> + </td> + </tr> + <tr> + <td>Checkbox</td> + <td> + <div class="btn-group" data-toggle="buttons-checkbox"> + <button class="btn">Left</button> + <button class="btn">Middle</button> + <button class="btn">Right</button> + </div> + </td> + </tr> + <tr> + <td>Radio</td> + <td> + <div class="btn-group" data-toggle="buttons-radio"> + <button class="btn">Left</button> + <button class="btn">Middle</button> + <button class="btn">Right</button> + </div> + </td> + </tr> + </tbody> + </table> + </div> + </div> + </section> + + <!-- Footer ================================================== --> <footer class="footer"> diff --git a/js/bootstrap-buttons.js b/js/bootstrap-buttons.js index 2fe1a7352d..759a65f842 100644 --- a/js/bootstrap-buttons.js +++ b/js/bootstrap-buttons.js @@ -25,26 +25,36 @@ var d = 'disabled' , $el = $(el) , data = $el.data() + , val = $el.is('input') ? 'val' : 'html' state = state + 'Text' - data.resetText || $el.data('resetText', $el.html()) + data.resetText || $el.data('resetText', $el[val]()) - $el.html( data[state] || $.fn.button.defaults[state] ) + $el[val]( data[state] || $.fn.button.defaults[state] ) - state == 'loadingText' ? - $el.addClass(d).attr(d, d) : - $el.removeClass(d).removeAttr(d) + setTimeout(function () { + state == 'loadingText' ? + $el.addClass(d).attr(d, d) : + $el.removeClass(d).removeAttr(d) + }, 0) } function toggle(el) { - $(el).toggleClass('active') + var $el = $(el) + , $parent = $el.parent('[data-toggle="buttons-radio"]') + + if ($parent) { + $parent + .find('.active') + .removeClass('active') + } + + $el.toggleClass('active') } $.fn.button = function(options) { return this.each(function () { - if (options == 'toggle') { - return toggle(this) - } + if (options == 'toggle') return toggle(this) options && setState(this, options) }) } @@ -54,8 +64,8 @@ } $(function () { - $('body').delegate('.btn[data-toggle]', 'click', function () { - $(this).button('toggle') + $('body').delegate('[data-toggle^=button]', 'click', function (e) { + $(e.srcElement).button('toggle') }) }) diff --git a/lib/patterns.less b/lib/patterns.less index 2fcc4f2b38..01b32cd900 100644 --- a/lib/patterns.less +++ b/lib/patterns.less @@ -415,6 +415,7 @@ footer { .transition(.1s linear all); // Active and Disabled states + &.active, &:active { @shadow: inset 0 2px 4px rgba(0,0,0,.25), 0 1px 2px rgba(0,0,0,.05); .box-shadow(@shadow); -- GitLab From 71654cbf69333c3cf6f0bb373121640c6f061d68 Mon Sep 17 00:00:00 2001 From: Jacob Thornton <jacobthornton@gmail.com> Date: Thu, 24 Nov 2011 18:55:44 -0800 Subject: [PATCH 087/318] refactor alerts + add new readme which idefientifies goals for 2.0 js --- docs/javascript.html | 42 +++++++++++++++-- js/README.md | 89 +++++++++++++++++++++++++++++++++++++ js/bootstrap-alerts.js | 45 +++++++------------ js/bootstrap-buttons.js | 25 ++++++++--- js/bootstrap-collapsible.js | 37 +++++++++++++++ js/bootstrap-dropdown.js | 2 +- js/bootstrap-modal.js | 6 +-- 7 files changed, 201 insertions(+), 45 deletions(-) create mode 100644 js/README.md create mode 100644 js/bootstrap-collapsible.js diff --git a/docs/javascript.html b/docs/javascript.html index 28f5e30356..f5f0520c3a 100644 --- a/docs/javascript.html +++ b/docs/javascript.html @@ -39,7 +39,6 @@ <script src="../js/bootstrap-buttons.js"></script> <script> $(function () { - // twipsy demo $("a[rel=twipsy]").twipsy({ live: true @@ -200,9 +199,9 @@ </tbody> </table> <h3>Markup</h3> - <p>You can activate modals on your page easily without having to write a single line of javascript. Just give an element a <code>data-controls-modal</code> attribute which corresponds to a modal element id, and when clicked, it will launch your modal. To add modal options, just include them as data attributes.</p> + <p>You can activate modals on your page easily without having to write a single line of javascript. Just set <code>data-toggle="modal"</code> on a controller element with a <code>data-target="#foo"</code> which corresponds to a modal element id, and when clicked, it will launch your modal. To add modal options, just include them as additoinal data attributes.</p> <pre class="prettyprint linenums"> -<a class="btn" data-controls-modal="my-modal" data-backdrop="true" >Launch Modal</a> +<a class="btn" data-toggle="modal" data-target="my-modal" >Launch Modal</a> </pre> <p><span class="label notice">Notice</span> If you want your modal to animate in and out, just add a <code>.fade</code> class to the <code>.modal</code> element (refer to the demo to see this in action).</p> <h3>Methods</h3> @@ -269,7 +268,9 @@ $('#my-modal').bind('hidden', function () { <a href="#" class="btn" data-modal-dismiss="true" >Close</a> </div> </div> - <button data-controls-modal="modal-from-dom" class="btn danger">Launch Modal</button> + <button data-toggle="modal" data-target="modal-from-dom" class="btn danger"> + Launch Modal + </button> </div> </div> </section> @@ -849,6 +850,39 @@ $('.tabs a').bind('change', function (e) { </section> + <!-- Collapsible + ================================================== --> + + <section id="collapsible"> + <div class="page-header"> + <h1>Collapsible <small>bootstrap-collapsible.js</small></h1> + </div> + <div class="row"> + <div class="span3 columns"> + <p>collapsible collapsible collapsible bitches.</p> + <a href="../js/bootstrap-collapsible.js" target="_blank" class="btn primary">Download</a> + </div> + <div class="span9 columns"> + <h3>Using bootstrap-collapsible.js</h3> + <pre class="prettyprint linenums">$(".collapsible").collapsible()</pre> + <h3>Markup</h3> + <p>Just add <code>data-dismiss="alert"</code> to your close button to automatically give an alert close functionality.</p> + <pre class="prettyprint linenums"><a class="close" data-dismiss="alert" href="#">&times;</a></pre> + <h3>Methods</h3> + + <h3>Demo</h3> + + <button data-toggle="collapse"></butotn> + <div> + + </div> + + + </div> + </div> + </section> + + <!-- Footer ================================================== --> <footer class="footer"> diff --git a/js/README.md b/js/README.md new file mode 100644 index 0000000000..98be75421d --- /dev/null +++ b/js/README.md @@ -0,0 +1,89 @@ +2.0 BOOTSTRAP JS PHILSOPHY +These are the highlevel design rules which guide the developement of Bootstrap's js plugins. + +--- + +### DATA-ATTRIBUTE API + +We believe you should be able to use all plugins provided by bootstrap purely through the markup api without writing a single line of javascript. + +We acknoledge that this isn't always the most performant and sometimes it may be desirable to turn this functionality off altogether. Therefore, as of 2.0 we provide the ability to disable the data attribute api by unbinding all events on the body namespaced with `'data-api'`. This looks like this: + + $('body').unbind('.data-api') + +To target a specific plugin, just include the plugins name as a namespace along with the data-api namespace like this: + + $('body').unbind('.alert.data-api') + +--- + +### PROGRAMATIC API + +We also believe you should be able to use all plugins provided by bootstrap purely through the JS api. + +All pubilc APIs should be a single, chainable method, and return the collection acted upon. + + $(".btn.danger").button("toggle").addClass("fat") + +All methods should accept an optional options object, a string which targets a particular method, or null which innitiates the default behavior: + + $("#myModal").modal() // initialized with defaults + +--- + +### PLUGIN OPTIONS + +Options should be sparse and add universal value. We should pick the right defaults. + +All plugins should have a default object which can be modified to effect all instance's default options. The defaults object should be available via `$.fn.plugin.defaults`. + + $.fn.modal.defaults = { … } + +An options definiton should take the following form: + + *noun*: *adjective* - describes or modifies a quality of an instance + +examples: + + backdrop: true + keyboard: false + placement: 'above' + +--- + +### PLUGIN EVENTS + +All events should have an infinitive and past participle form. The infinitive is fired just before an action takes place, the past participle on completion of the action. + + show | shown + hide | hidden + change | changed + +--- + + +### DATA ATTRIBUTES + +Data attributes should take the following form: + +data-*(verb)* - defines main interaction +data-target - defined on controller element (if element interacts with an element other than self) +data-*(noun)* - defines options for element invocation + +examples: + + // control other targets + data-toggle="modal" data-target="#foo" + data-toggle="view" data-target="#foo" + + // defined on element they control + data-spy="scroll" + + data-dismiss="modal" + data-dismiss="alert" + + data-toggle="dropdown" + + data-toggle="button" + data-toggle="buttons-checkbox" + data-toggle="buttons-radio" \ No newline at end of file diff --git a/js/bootstrap-alerts.js b/js/bootstrap-alerts.js index 600440e40e..565f831936 100644 --- a/js/bootstrap-alerts.js +++ b/js/bootstrap-alerts.js @@ -25,25 +25,22 @@ /* ALERT CLASS DEFINITION * ====================== */ - var Alert = function ( content, options ) { - if (options == 'close') return this.close.call(content) - this.settings = $.extend({}, $.fn.alert.defaults, options) - this.$element = $(content) - .delegate(this.settings.selector, 'click', this.close) - } + var dismiss = '[data-dismiss="alert"]' + , Alert = function ( el, close ) { + $(el).delegate(dismiss, 'click', this.close) + } Alert.prototype = { - close: function (e) { + close: function ( e ) { var $element = $(this) - , className = 'alert-message' - $element = $element.hasClass(className) ? $element : $element.parent() + $element = $element.hasClass('alert-message') ? $element : $element.parent() e && e.preventDefault() $element.removeClass('in') - function removeElement () { + function removeElement() { $element.remove() } @@ -59,32 +56,22 @@ * ======================= */ $.fn.alert = function ( options ) { - return this.each(function () { var $this = $(this) - , data - - if ( typeof options == 'string' ) { - - data = $this.data('alert') - - if (typeof data == 'object') { - return data[options].call( $this ) - } - - } - - $(this).data('alert', new Alert( this, options )) - + , data = $this.data('alert') + if (!data) $this.data('alert', (data = new Alert(this))) + if (typeof options == 'string') data[options].call($this) }) } - $.fn.alert.defaults = { - selector: '[data-dismiss="alert"]' - } + $.fn.alert.Alert = Alert + + + /* ALERT DATA-API + * ============== */ $(function () { - new Alert( $('body') ) + $('body').delegate(dismiss, 'click.alert.data-api', Alert.prototype.close) }) }( window.jQuery || window.ender ); \ No newline at end of file diff --git a/js/bootstrap-buttons.js b/js/bootstrap-buttons.js index 759a65f842..5ca678df8b 100644 --- a/js/bootstrap-buttons.js +++ b/js/bootstrap-buttons.js @@ -21,6 +21,11 @@ "use strict" + /* BUTTON PUBLIC CLASS DEFINITION + * ============================== */ + + var Button + function setState(el, state) { var d = 'disabled' , $el = $(el) @@ -43,15 +48,17 @@ var $el = $(el) , $parent = $el.parent('[data-toggle="buttons-radio"]') - if ($parent) { - $parent - .find('.active') - .removeClass('active') - } + $parent && $parent + .find('.active') + .removeClass('active') $el.toggleClass('active') } + + /* BUTTON PLUGIN DEFINITION + * ======================== */ + $.fn.button = function(options) { return this.each(function () { if (options == 'toggle') return toggle(this) @@ -63,8 +70,14 @@ loadingText: 'loading...' } + $.fn.button.Button = Button + + + /* BUTTON DATA-API + * =============== */ + $(function () { - $('body').delegate('[data-toggle^=button]', 'click', function (e) { + $('body').delegate('[data-toggle^=button]', 'click.button.data-api', function (e) { $(e.srcElement).button('toggle') }) }) diff --git a/js/bootstrap-collapsible.js b/js/bootstrap-collapsible.js new file mode 100644 index 0000000000..273eb22720 --- /dev/null +++ b/js/bootstrap-collapsible.js @@ -0,0 +1,37 @@ +/* ============================================================= + * bootstrap-collapsible.js v2.0.0 + * http://twitter.github.com/bootstrap/javascript.html#collapsible + * ============================================================= + * Copyright 2011 Twitter, Inc. + * + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + * ============================================================ */ + +(function( $ ){ + + var Collapsible = function ( element, options ) {} + + Collapsible.prototype = {} + + /* collapsible PLUGIN DEFINITION + * ======================= */ + + $.fn.collapsible = function ( options ) { + + return this.each(function () { + new Collapsible(this, options) + }) + } + + +})( window.jQuery || window.ender ) \ No newline at end of file diff --git a/js/bootstrap-dropdown.js b/js/bootstrap-dropdown.js index bb7d11b1fa..ef243fc6f6 100644 --- a/js/bootstrap-dropdown.js +++ b/js/bootstrap-dropdown.js @@ -59,7 +59,7 @@ * =================================== */ $(function () { - $('html').bind("click", clearMenus) + $('html').bind("click.dropdown.data-api", clearMenus) $('body').dropdown(s) }) diff --git a/js/bootstrap-modal.js b/js/bootstrap-modal.js index e15b1237ce..16c805a4e7 100644 --- a/js/bootstrap-modal.js +++ b/js/bootstrap-modal.js @@ -194,10 +194,6 @@ }) } - if ( options === true ) { - return modal - } - if ( typeof options == 'string' ) { modal[options]() } else if ( modal ) { @@ -220,7 +216,7 @@ * ========================== */ $(document).ready(function () { - $('body').delegate('[data-controls-modal]', 'click', function (e) { + $('body').delegate('[data-controls-modal]', 'click.modal.data-api', function (e) { e.preventDefault() var $this = $(this) $('#' + $this.attr('data-controls-modal')).modal( $this.data() ) -- GitLab From 69372701cfe58876623c89a0bdeca5ce91dd839b Mon Sep 17 00:00:00 2001 From: Jacob Thornton <jacobthornton@gmail.com> Date: Thu, 24 Nov 2011 19:40:25 -0800 Subject: [PATCH 088/318] refactor dropdown in accordance with readme --- js/bootstrap-accordion.js | 41 -------------------------- js/bootstrap-alerts.js | 7 ++--- js/bootstrap-buttons.js | 61 +++++++++++++++++++++++---------------- js/bootstrap-dropdown.js | 45 +++++++++++++++++------------ 4 files changed, 65 insertions(+), 89 deletions(-) delete mode 100644 js/bootstrap-accordion.js diff --git a/js/bootstrap-accordion.js b/js/bootstrap-accordion.js deleted file mode 100644 index 9a24b5ddfc..0000000000 --- a/js/bootstrap-accordion.js +++ /dev/null @@ -1,41 +0,0 @@ -/* ============================================================= - * bootstrap-accordion.js v2.0.0 - * http://twitter.github.com/bootstrap/javascript.html#accordion - * ============================================================= - * Copyright 2011 Twitter, Inc. - * - * Licensed under the Apache License, Version 2.0 (the "License"); - * you may not use this file except in compliance with the License. - * You may obtain a copy of the License at - * - * http://www.apache.org/licenses/LICENSE-2.0 - * - * Unless required by applicable law or agreed to in writing, software - * distributed under the License is distributed on an "AS IS" BASIS, - * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. - * See the License for the specific language governing permissions and - * limitations under the License. - * ============================================================ */ - -(function( $ ){ - - var Accordion = function ( element, options ) {} - - Accordion.prototype = {} - - /* ALERT PLUGIN DEFINITION - * ======================= */ - - $.fn.accordion = function ( options ) { - - if ( options === true ) { - return this.data('accordion') - } - - return this.each(function () { - new Accordion(this, options) - }) - } - - -})( window.jQuery || window.ender ) \ No newline at end of file diff --git a/js/bootstrap-alerts.js b/js/bootstrap-alerts.js index 565f831936..fabafa4f92 100644 --- a/js/bootstrap-alerts.js +++ b/js/bootstrap-alerts.js @@ -26,7 +26,7 @@ * ====================== */ var dismiss = '[data-dismiss="alert"]' - , Alert = function ( el, close ) { + , Alert = function ( el ) { $(el).delegate(dismiss, 'click', this.close) } @@ -36,7 +36,6 @@ var $element = $(this) $element = $element.hasClass('alert-message') ? $element : $element.parent() - e && e.preventDefault() $element.removeClass('in') @@ -55,12 +54,12 @@ /* ALERT PLUGIN DEFINITION * ======================= */ - $.fn.alert = function ( options ) { + $.fn.alert = function ( option ) { return this.each(function () { var $this = $(this) , data = $this.data('alert') if (!data) $this.data('alert', (data = new Alert(this))) - if (typeof options == 'string') data[options].call($this) + if (typeof option == 'string') data[option].call($this) }) } diff --git a/js/bootstrap-buttons.js b/js/bootstrap-buttons.js index 5ca678df8b..82d80df2d9 100644 --- a/js/bootstrap-buttons.js +++ b/js/bootstrap-buttons.js @@ -24,45 +24,56 @@ /* BUTTON PUBLIC CLASS DEFINITION * ============================== */ - var Button + var Button = function (element, options) { + this.$element = $(element) + this.settings = $.extend({}, $.fn.button.defaults, options) + } - function setState(el, state) { - var d = 'disabled' - , $el = $(el) - , data = $el.data() - , val = $el.is('input') ? 'val' : 'html' + Button.prototype = { - state = state + 'Text' - data.resetText || $el.data('resetText', $el[val]()) + setState: function (state) { + var d = 'disabled' + , $el = this.$element + , data = $el.data() + , val = $el.is('input') ? 'val' : 'html' - $el[val]( data[state] || $.fn.button.defaults[state] ) + state = state + 'Text' + data.resetText || $el.data('resetText', $el[val]()) - setTimeout(function () { - state == 'loadingText' ? - $el.addClass(d).attr(d, d) : - $el.removeClass(d).removeAttr(d) - }, 0) - } + $el[val](data[state] || this.settings[state]) + + // push to event loop to allow forms to submit + setTimeout(function () { + state == 'loadingText' ? + $el.addClass(d).attr(d, d) : + $el.removeClass(d).removeAttr(d) + }, 0) + } + + , toggle: function () { + var $parent = this.$element.parent('[data-toggle="buttons-radio"]') - function toggle(el) { - var $el = $(el) - , $parent = $el.parent('[data-toggle="buttons-radio"]') + $parent && $parent + .find('.active') + .removeClass('active') - $parent && $parent - .find('.active') - .removeClass('active') + this.$element.toggleClass('active') + } - $el.toggleClass('active') } /* BUTTON PLUGIN DEFINITION * ======================== */ - $.fn.button = function(options) { + $.fn.button = function ( option ) { return this.each(function () { - if (options == 'toggle') return toggle(this) - options && setState(this, options) + var $this = $(this) + , data = $this.data('button') + , options = typeof option == 'object' && option + if (!data) $this.data('button', (data = new Button(this, options))) + if (option == 'toggle') data.toggle() + else if (option) data.setState(option) }) } diff --git a/js/bootstrap-dropdown.js b/js/bootstrap-dropdown.js index ef243fc6f6..4526a9203b 100644 --- a/js/bootstrap-dropdown.js +++ b/js/bootstrap-dropdown.js @@ -22,35 +22,42 @@ "use strict" - /* SIMPLE DROPDOWN LOGIC - * ===================== */ + /* DROPDOWN CLASS DEFINITION + * ========================= */ - var s = '[data-toggle="dropdown"]' + var toggle = '[data-toggle="dropdown"]' + , Dropdown = function ( element ) { + $(element).bind('click', this.toggle) + } - function clearMenus() { - $(s).parent('li').removeClass('open') - } + Dropdown.prototype = { + + toggle: function ( e ) { + var li = $(this).parent('li') + , isActive = li.hasClass('open') - function toggle(e) { - var li = $(this).parent('li') - , isActive = li.hasClass('open') + clearMenus() + !isActive && li.toggleClass('open') - clearMenus() - !isActive && li.toggleClass('open') + return false + } - return false + } + + function clearMenus() { + $(toggle).parent('li').removeClass('open') } /* DROPDOWN PLUGIN DEFINITION * ========================== */ - $.fn.dropdown = function ( selector ) { + $.fn.dropdown = function ( option ) { return this.each(function () { - var args = ['click', toggle] - , $this = $(this) - selector && args.unshift(selector) - $this[selector ? 'delegate' : 'bind'].apply($this, args) + var $this = $(this) + , data = $this.data('dropdown') + if (!data) $this.data('dropdown', (data = new Dropdown(this))) + if (typeof option == 'string') data[option].call($this) }) } @@ -59,8 +66,8 @@ * =================================== */ $(function () { - $('html').bind("click.dropdown.data-api", clearMenus) - $('body').dropdown(s) + $('html').bind('click.dropdown.data-api', clearMenus) + $('body').delegate(toggle, 'click.dropdown.data-api', Dropdown.prototype.toggle) }) }( window.jQuery || window.ender ); \ No newline at end of file -- GitLab From 1fa02fbda2bb3710a9f26a487da2c34565e8c406 Mon Sep 17 00:00:00 2001 From: Jacob Thornton <jacobthornton@gmail.com> Date: Thu, 24 Nov 2011 20:04:07 -0800 Subject: [PATCH 089/318] refactor modal --- docs/javascript.html | 9 ++-- js/bootstrap-modal.js | 104 ++++++++++++++++-------------------------- 2 files changed, 44 insertions(+), 69 deletions(-) diff --git a/docs/javascript.html b/docs/javascript.html index f5f0520c3a..aa13d523da 100644 --- a/docs/javascript.html +++ b/docs/javascript.html @@ -255,9 +255,9 @@ $('#my-modal').bind('hidden', function () { })</pre> <h3>Demo</h3> <!-- sample modal content --> - <div id="modal-from-dom" class="modal hide fade"> + <div id="myModal" class="modal hide fade"> <div class="modal-header"> - <a href="#" class="close" data-modal-dismiss="true" >×</a> + <a href="#" class="close" data-dismiss="modal" >×</a> <h3>Modal Heading</h3> </div> <div class="modal-body"> @@ -265,10 +265,11 @@ $('#my-modal').bind('hidden', function () { </div> <div class="modal-footer"> <a href="#" class="btn primary">Save changes</a> - <a href="#" class="btn" data-modal-dismiss="true" >Close</a> + <a href="#" class="btn" data-dismiss="modal" >Close</a> </div> </div> - <button data-toggle="modal" data-target="modal-from-dom" class="btn danger"> + + <button data-toggle="modal" data-target="#myModal" class="btn danger"> Launch Modal </button> </div> diff --git a/js/bootstrap-modal.js b/js/bootstrap-modal.js index 16c805a4e7..14c03e6a3e 100644 --- a/js/bootstrap-modal.js +++ b/js/bootstrap-modal.js @@ -22,19 +22,14 @@ "use strict" - /* MODAL PUBLIC CLASS DEFINITION - * ============================= */ + /* MODAL CLASS DEFINITION + * ====================== */ var Modal = function ( content, options ) { this.settings = $.extend({}, $.fn.modal.defaults, options) this.$element = $(content) - .delegate('.close', 'click.modal', $.proxy(this.hide, this)) - - if ( this.settings.show ) { - this.show() - } - - return this + .delegate('[data-dismiss="modal"]', 'click.dismiss.modal', $.proxy(this.hide, this)) + this.settings.show && this.show() } Modal.prototype = { @@ -45,6 +40,9 @@ , show: function () { var that = this + + if (this.isShown) return + this.isShown = true this.$element.trigger('show') @@ -67,16 +65,12 @@ that.$element.trigger('shown') }) - - return this } - , hide: function (e) { + , hide: function ( e ) { e && e.preventDefault() - if ( !this.isShown ) { - return this - } + if (!this.isShown) return var that = this this.isShown = false @@ -90,8 +84,6 @@ $.support.transition && this.$element.hasClass('fade') ? hideWithTransition.call(this) : hideModal.call(this) - - return this } } @@ -124,19 +116,18 @@ function backdrop ( callback ) { var that = this , animate = this.$element.hasClass('fade') ? 'fade' : '' - if ( this.isShown && this.settings.backdrop ) { + + if (this.isShown && this.settings.backdrop) { var doAnimate = $.support.transition && animate this.$backdrop = $('<div class="modal-backdrop ' + animate + '" />') .appendTo(document.body) - if ( this.settings.backdrop != 'static' ) { + if (this.settings.backdrop != 'static') { this.$backdrop.click($.proxy(this.hide, this)) } - if ( doAnimate ) { - this.$backdrop[0].offsetWidth // force reflow - } + if (doAnimate) this.$backdrop[0].offsetWidth // force reflow this.$backdrop.addClass('in') @@ -144,15 +135,15 @@ this.$backdrop.one($.support.transition.end, callback) : callback() - } else if ( !this.isShown && this.$backdrop ) { + } else if (!this.isShown && this.$backdrop) { this.$backdrop.removeClass('in') $.support.transition && this.$element.hasClass('fade')? this.$backdrop.one($.support.transition.end, $.proxy(removeBackdrop, this)) : removeBackdrop.call(this) - } else if ( callback ) { - callback() + } else if (callback) { + callback() } } @@ -163,14 +154,12 @@ function escape() { var that = this - if ( this.isShown && this.settings.keyboard ) { - $(document).bind('keyup.modal', function ( e ) { - if ( e.which == 27 ) { - that.hide() - } + if (this.isShown && this.settings.keyboard) { + $(document).bind('keyup.dismiss.modal', function ( e ) { + e.which == 27 && that.hide() }) - } else if ( !this.isShown ) { - $(document).unbind('keyup.modal') + } else if (!this.isShown) { + $(document).unbind('keyup.dismiss.modal') } } @@ -178,48 +167,33 @@ /* MODAL PLUGIN DEFINITION * ======================= */ - $.fn.modal = function ( options ) { - var modal = this.data('modal') - - if (!modal) { - - if (typeof options == 'string') { - options = { - show: /show|toggle/.test(options) - } - } - - return this.each(function () { - $(this).data('modal', new Modal(this, options)) - }) - } - - if ( typeof options == 'string' ) { - modal[options]() - } else if ( modal ) { - modal.toggle() - } - - return this + $.fn.modal = function ( option ) { + return this.each(function () { + var $this = $(this) + , data = $this.data('modal') + , options = typeof option == 'object' && option + if (!data) $this.data('modal', (data = new Modal(this, options))) + if (typeof option == 'string') data[option]() + }) } - $.fn.modal.Modal = Modal - $.fn.modal.defaults = { - backdrop: true - , keyboard: true - , show: true + backdrop: true + , keyboard: true + , show: true } + $.fn.modal.Modal = Modal + - /* MODAL DATA- IMPLEMENTATION - * ========================== */ + /* MODAL DATA-API + * ============== */ $(document).ready(function () { - $('body').delegate('[data-controls-modal]', 'click.modal.data-api', function (e) { - e.preventDefault() + $('body').delegate('[data-toggle="modal"]', 'click.modal.data-api', function ( e ) { var $this = $(this) - $('#' + $this.attr('data-controls-modal')).modal( $this.data() ) + e.preventDefault() + $($this.attr('data-target')).modal($this.data()) }) }) -- GitLab From b14f551c9c1498247dc69251f8eebfde3b1002f6 Mon Sep 17 00:00:00 2001 From: Jacob Thornton <jacobthornton@gmail.com> Date: Thu, 24 Nov 2011 20:12:13 -0800 Subject: [PATCH 090/318] fix some more modal things --- js/bootstrap-modal.js | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/js/bootstrap-modal.js b/js/bootstrap-modal.js index 14c03e6a3e..2860c8a518 100644 --- a/js/bootstrap-modal.js +++ b/js/bootstrap-modal.js @@ -192,8 +192,10 @@ $(document).ready(function () { $('body').delegate('[data-toggle="modal"]', 'click.modal.data-api', function ( e ) { var $this = $(this) + , target = $this.attr('data-target') + , option = $(target).data('modal') ? 'toggle' : $this.data() e.preventDefault() - $($this.attr('data-target')).modal($this.data()) + $(target).modal(option) }) }) -- GitLab From 53ff2682cd95dd96fc1fbf234d7b0530127a464b Mon Sep 17 00:00:00 2001 From: Jacob Thornton <jacobthornton@gmail.com> Date: Thu, 24 Nov 2011 20:27:18 -0800 Subject: [PATCH 091/318] clean up scrollspy a bit - add public api method --- docs/javascript.html | 2 +- js/bootstrap-scrollspy.js | 34 ++++++++++++++++++++++++++++------ 2 files changed, 29 insertions(+), 7 deletions(-) diff --git a/docs/javascript.html b/docs/javascript.html index aa13d523da..f625e2323c 100644 --- a/docs/javascript.html +++ b/docs/javascript.html @@ -201,7 +201,7 @@ <h3>Markup</h3> <p>You can activate modals on your page easily without having to write a single line of javascript. Just set <code>data-toggle="modal"</code> on a controller element with a <code>data-target="#foo"</code> which corresponds to a modal element id, and when clicked, it will launch your modal. To add modal options, just include them as additoinal data attributes.</p> <pre class="prettyprint linenums"> -<a class="btn" data-toggle="modal" data-target="my-modal" >Launch Modal</a> +<a class="btn" data-toggle="modal" data-target="#myModal" >Launch Modal</a> </pre> <p><span class="label notice">Notice</span> If you want your modal to animate in and out, just add a <code>.fade</code> class to the <code>.modal</code> element (refer to the demo to see this in action).</p> <h3>Methods</h3> diff --git a/js/bootstrap-scrollspy.js b/js/bootstrap-scrollspy.js index 91c2dcb1ed..e846fd7182 100644 --- a/js/bootstrap-scrollspy.js +++ b/js/bootstrap-scrollspy.js @@ -17,15 +17,19 @@ * limitations under the License. * ============================================================== */ - !function ( $ ) { - function ScrollSpy() { + "use strict" + + /* SCROLLSPY CLASS DEFINITION + * ========================== */ + + function ScrollSpy( element ) { var process = $.proxy(this.process, this) this.selector = '.nav li > a' - this.$body = $('body').delegate(this.selector, 'click', process) - this.$scrollElement = $('[data-spy="scroll"]').bind('scroll', process) + this.$body = $('body').delegate(this.selector, 'click.scroll.data-api', process) + this.$scrollElement = $(element).bind('scroll.scroll.data-api', process) this.refresh() this.process() @@ -78,11 +82,29 @@ if ( active.parent('.dropdown-menu') ) { active.closest('li.dropdown').addClass('active') } - } } - $(function () { new ScrollSpy() }) + + /* SCROLLSPY PLUGIN DEFINITION + * =========================== */ + + $.fn.scrollspy = function ( option ) { + return this.each(function () { + var $this = $(this) + , data = $this.data('scrollspy') + if (!data) $this.data('scrollspy', (data = new ScrollSpy(this))) + if (typeof option == 'string') data[option]() + }) + } + + $.fn.alert.ScrollSpy = ScrollSpy + + + /* SCROLLSPY DATA-API + * ============== */ + + $(function () { $('[data-spy="scroll"]').scrollspy() }) }( window.jQuery || window.ender ) \ No newline at end of file -- GitLab From 96adf8f91811a71bf2fbd6737c8bd80fe400b8c2 Mon Sep 17 00:00:00 2001 From: Jacob Thornton <jacobthornton@gmail.com> Date: Thu, 24 Nov 2011 20:27:55 -0800 Subject: [PATCH 092/318] fix copy paste bug --- js/bootstrap-scrollspy.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/js/bootstrap-scrollspy.js b/js/bootstrap-scrollspy.js index e846fd7182..ac9477d0ef 100644 --- a/js/bootstrap-scrollspy.js +++ b/js/bootstrap-scrollspy.js @@ -99,7 +99,7 @@ }) } - $.fn.alert.ScrollSpy = ScrollSpy + $.fn.scrollspy.ScrollSpy = ScrollSpy /* SCROLLSPY DATA-API -- GitLab From 98fddaa3557b1c872f1e585d579ec7e5e989e95d Mon Sep 17 00:00:00 2001 From: Jacob Thornton <jacobthornton@gmail.com> Date: Fri, 25 Nov 2011 17:23:14 -0800 Subject: [PATCH 093/318] new plugin "collapse" for collapsible lists and "accordion" like support --- bootstrap.css | 28 ++++++- bootstrap.min.css | 2 + docs/assets/css/docs.css | 16 ++++ docs/javascript.html | 155 +++++++++++++++++++++++++++++++++------ js/bootstrap-collapse.js | 127 ++++++++++++++++++++++++++++++++ lib/patterns.less | 23 ++++-- 6 files changed, 321 insertions(+), 30 deletions(-) create mode 100644 js/bootstrap-collapse.js diff --git a/bootstrap.css b/bootstrap.css index 895f1c8613..19d07745e4 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: Thu Nov 24 13:45:21 PST 2011 + * Date: Fri Nov 25 12:09:37 PST 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). @@ -1879,6 +1879,32 @@ button.btn::-moz-focus-inner, input[type=submit].btn::-moz-focus-inner { .fade.in { opacity: 1; } +.collapse { + position: relative; + overflow: hidden; +} +.collapse.height { + -webkit-transition: height 0.35s ease; + -moz-transition: height 0.35s ease; + -ms-transition: height 0.35s ease; + -o-transition: height 0.35s ease; + transition: height 0.35s ease; + height: 0; +} +.collapse.height.in { + height: auto; +} +.collapse.width { + -webkit-transition: width 0.35s ease; + -moz-transition: width 0.35s ease; + -ms-transition: width 0.35s ease; + -o-transition: width 0.35s ease; + transition: width 0.35s ease; + width: 0; +} +.collapse.width.in { + width: auto; +} .label { padding: 1px 3px 2px; font-size: 9.75px; diff --git a/bootstrap.min.css b/bootstrap.min.css index 333e4db18c..f0e1a8dec4 100644 --- a/bootstrap.min.css +++ b/bootstrap.min.css @@ -278,6 +278,8 @@ button.btn::-moz-focus-inner,input[type=submit].btn::-moz-focus-inner{padding:0; .alert-message.block-message.info{background-color:#ddf4fb;border-color:#c6edf9;} .well{min-height:20px;padding:19px;margin-bottom:20px;background-color:#f5f5f5;border:1px solid #eee;border:1px solid rgba(0, 0, 0, 0.05);-webkit-border-radius:4px;-moz-border-radius:4px;border-radius:4px;-webkit-box-shadow:inset 0 1px 1px rgba(0, 0, 0, 0.05);-moz-box-shadow:inset 0 1px 1px rgba(0, 0, 0, 0.05);box-shadow:inset 0 1px 1px rgba(0, 0, 0, 0.05);}.well blockquote{border-color:#ddd;border-color:rgba(0, 0, 0, 0.15);} .fade{-webkit-transition:opacity 0.15s linear;-moz-transition:opacity 0.15s linear;-ms-transition:opacity 0.15s linear;-o-transition:opacity 0.15s linear;transition:opacity 0.15s linear;opacity:0;}.fade.in{opacity:1;} +.collapse{position:relative;overflow:hidden;}.collapse.height{-webkit-transition:height 0.35s ease;-moz-transition:height 0.35s ease;-ms-transition:height 0.35s ease;-o-transition:height 0.35s ease;transition:height 0.35s ease;height:0;}.collapse.height.in{height:auto;} +.collapse.width{-webkit-transition:width 0.35s ease;-moz-transition:width 0.35s ease;-ms-transition:width 0.35s ease;-o-transition:width 0.35s ease;transition:width 0.35s ease;width:0;}.collapse.width.in{width:auto;} .label{padding:1px 3px 2px;font-size:9.75px;font-weight:bold;color:#ffffff;text-transform:uppercase;background-color:#bfbfbf;-webkit-border-radius:3px;-moz-border-radius:3px;border-radius:3px;}.label.important{background-color:#c43c35;} .label.warning{background-color:#f89406;} .label.success{background-color:#46a546;} diff --git a/docs/assets/css/docs.css b/docs/assets/css/docs.css index cde8ff1e0d..0873d443f6 100644 --- a/docs/assets/css/docs.css +++ b/docs/assets/css/docs.css @@ -473,3 +473,19 @@ h2 + table { } } +#accordion dt a{ + display:block; + padding: 9px 15px; + line-height: 1; + background-color: whiteSmoke; + border: 1px solid #EEE; + border-top-color: #fff; +} + +#accordion dt:first-child a { + border-top-color:#eee; +} + +#accordion dd p { + padding: 10px; +} \ No newline at end of file diff --git a/docs/javascript.html b/docs/javascript.html index f625e2323c..fae1038566 100644 --- a/docs/javascript.html +++ b/docs/javascript.html @@ -37,6 +37,7 @@ <script src="../js/bootstrap-twipsy.js"></script> <script src="../js/bootstrap-popover.js"></script> <script src="../js/bootstrap-buttons.js"></script> + <script src="../js/bootstrap-collapse.js"></script> <script> $(function () { // twipsy demo @@ -141,6 +142,10 @@ <td><a href="./javascript.html#buttons">bootstrap-buttons.js</a></td> <td>This plugin offers additional functionality for managing button state.</td> </tr> + <tr> + <td><a href="./javascript.html#collapse">bootstrap-collapse.js</a></td> + <td>The collapse plugin offers simple, generic collapsible element support for making accordions and other collapsible ui components.</td> + </tr> </tbody> </table> <h3>Is javascript necessary?</h3> @@ -166,7 +171,7 @@ </div> <div class="span9 columns"> <h3>Using bootstrap-modal</h3> - <pre class="prettyprint linenums">$('#my-modal').modal(options)</pre> + <pre class="prettyprint linenums">$('#myModal').modal(options)</pre> <h3>Options</h3> <table class="striped-table"> <thead> @@ -208,18 +213,18 @@ <h4>.modal(options)</h4> <p>Activates your content as a modal. Accepts an optional options <code>object</code>. <pre class="prettyprint linenums"> -$('#my-modal').modal({ +$('#myModal').modal({ keyboard: false })</pre> <h4>.modal('toggle')</h4> <p>Manually toggles a modal.</p> - <pre class="prettyprint linenums">$('#my-modal').modal('toggle')</pre> + <pre class="prettyprint linenums">$('#myModal').modal('toggle')</pre> <h4>.modal('show')</h4> <p>Manually opens a modal.</p> - <pre class="prettyprint linenums">$('#my-modal').modal('show')</pre> + <pre class="prettyprint linenums">$('#myModal').modal('show')</pre> <h4>.modal('hide')</h4> <p>Manually hides a modal.</p> - <pre class="prettyprint linenums">$('#my-modal').modal('hide')</pre> + <pre class="prettyprint linenums">$('#myModal').modal('hide')</pre> <h3>Events</h3> <p>Bootstrap's modal class exposes a few events for hooking into modal functionality. </p> <table class="striped-table"> @@ -250,7 +255,7 @@ $('#my-modal').modal({ </table> <pre class="prettyprint linenums"> -$('#my-modal').bind('hidden', function () { +$('#myModal').bind('hidden', function () { // do something ... })</pre> <h3>Demo</h3> @@ -504,7 +509,7 @@ $('.tabs a').bind('change', function (e) { </ul> </li> </ul> - <div id="my-tab-content" class="tab-content"> + <div id="myTabContent" class="tab-content"> <div class="active tab-pane" id="home"> <p>Raw denim you probably haven't heard of them jean shorts Austin. Nesciunt tofu stumptown aliqua, retro synth master cleanse. Mustache cliche tempor, williamsburg carles vegan helvetica. Reprehenderit butcher retro keffiyeh dreamcatcher synth. Cosby sweater eu banh mi, qui irure terry richardson ex squid. Aliquip placeat salvia cillum iphone. Seitan aliquip quis cardigan american apparel, butcher voluptate nisi qui.</p> </div> @@ -851,39 +856,147 @@ $('.tabs a').bind('change', function (e) { </section> - <!-- Collapsible + <!-- Collapse ================================================== --> - <section id="collapsible"> + <section id="collapse"> <div class="page-header"> - <h1>Collapsible <small>bootstrap-collapsible.js</small></h1> + <h1>collapse <small>bootstrap-collapse.js</small></h1> </div> <div class="row"> <div class="span3 columns"> - <p>collapsible collapsible collapsible bitches.</p> + <p>The collapse plugin offers simple, flexible collapsible element support for making accordions and other collapsible ui components.</p> <a href="../js/bootstrap-collapsible.js" target="_blank" class="btn primary">Download</a> </div> <div class="span9 columns"> - <h3>Using bootstrap-collapsible.js</h3> - <pre class="prettyprint linenums">$(".collapsible").collapsible()</pre> + <h3>Using bootstrap-collapse.js</h3> + <pre class="prettyprint linenums">$(".collapse").collapse()</pre> + <h3>Options</h3> + <table class="striped-table"> + <thead> + <tr> + <th style="width: 100px;">Name</th> + <th style="width: 50px;">type</th> + <th style="width: 50px;">default</th> + <th>description</th> + </tr> + </thead> + <tbody> + <tr> + <td>parent</td> + <td>selector</td> + <td>false</td> + <td>If selector then all collapsible elements under the specified parent will be closed when this collasabile item is shown. (similar to traditional accordion behavior)</td> + </tr> + <tr> + <td>toggle</td> + <td>boolean</td> + <td>true</td> + <td>Toggles the collapsible element on invocation</td> + </tr> + </tbody> + </table> <h3>Markup</h3> - <p>Just add <code>data-dismiss="alert"</code> to your close button to automatically give an alert close functionality.</p> - <pre class="prettyprint linenums"><a class="close" data-dismiss="alert" href="#">&times;</a></pre> + <p>Just add <code>data-toggle="collapse"</code> and a <code>data-target</code> to element to automatically assign control of a collapsible element. The <code>data-target</code> attribute accepts a css selector to apply the collapse to. Be sure to add the class <code>collapse</code> to the collapsible element. If you'd like it to default open, add the additional class <code>in</code>.</p> + <pre class="prettyprint linenums"> +<button class="btn danger" data-toggle="collapse" data-target="#demo"> + simple collapsible +</button> + +<div id="demo" class="collapse height in"> … </div></pre> + <p><span class="label notice">Notice</span> To add accordion like group management to a collapsible control just add the additional data attribute <code>data-parent="#selector"</code>. Refer to the demo below to see this in action.</p> <h3>Methods</h3> + <h4>.collapse(options)</h4> + <p>Activates your content as a collapsible element. Accepts an optional options <code>object</code>. +<pre class="prettyprint linenums"> +$('#myCollapsible').collapse({ + toggle: false +})</pre> + <h4>.collapse('toggle')</h4> + <p>Toggles a collapsible element to shown or hidden.</p> + <h4>.collapse('show')</h4> + <p>Shows a collapsible element.</p> + <h4>.collapse('hide')</h4> + <p>Hides a collapsible element.</p> + <h3>Events</h3> + <p> + Bootstrap's collapse class exposes a few events for hooking into collapse functionality. + </p> + <table class="striped-table"> + <thead> + <tr> + <th style="width: 150px;">Event</th> + <th>Description</th> + </tr> + </thead> + <tbody> + <tr> + <td>show</td> + <td>This event fires immediately when the <code>show</code> instance method is called.</td> + </tr> + <tr> + <td>shown</td> + <td>This event is fired when a collapse element has been made visible to the user (will wait for css transitions to complete).</td> + </tr> + <tr> + <td>hide</td> + <td> + This event is fired immediately when the <code>hide</code> method has been called. + </td> + </tr> + <tr> + <td>hidden</td> + <td>This event is fired when a collapse element has been hidden from the user (will wait for css transitions to complete).</td> + </tr> + </tbody> + </table> +<pre class="prettyprint linenums"> +$('#myCollapsible').bind('hidden', function () { + // do something ... +})</pre> <h3>Demo</h3> - <button data-toggle="collapse"></butotn> - <div> - - </div> - + <!-- single collapse --> + <p> + <button class="btn danger" data-toggle="collapse" data-target="#collapseDemoWrap"> + simple collapsible + </button> + </p> + <div id="collapseDemoWrap" class="collapse height"> + <!-- group collapse --> + <dl id="accordion" > + <dt data-toggle="collapse" data-target="#collapseOne" data-parent="#accordion"> + <a href="#">Collapsible Group Item #1</a> + </dt> + <dd id="collapseOne" class="collapse height"> + <p> + Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS. + </p> + </dd> + <dt data-toggle="collapse" data-target="#collapseTwo" data-parent="#accordion" > + <a href="#">Collapsible Group Item #2</a> + </dt> + <dd id="collapseTwo" class="collapse height"> + <p> + Blog +1 eiusmod, williamsburg chambray craft beer brooklyn. Trust fund squid whatever, sunt hoodie skateboard mustache 3 wolf moon art party wes anderson ad leggings officia. Skateboard keytar incididunt gluten-free retro sartorial, single-origin coffee et viral. Art party blog sunt, readymade fugiat 8-bit aesthetic ex echo park fanny pack keytar. Thundercats sustainable labore, mustache adipisicing tattooed dolore aute occaecat velit 8-bit raw denim letterpress. In occaecat freegan, next level single-origin coffee chambray excepteur nihil duis exercitation adipisicing ex sartorial twee squid. You probably haven't heard of them fugiat ea retro eiusmod quis cosby sweater, +1 fap sapiente biodiesel banksy. + </p> + </dd> + <dt data-toggle="collapse" data-target="#collapseThree" data-parent="#accordion" > + <a href="#">Collapsible Group Item #3</a> + </dt> + <dd id="collapseThree" class="collapse height"> + <p> + Tempor gentrify pariatur nihil salvia, irony synth incididunt odio commodo brunch aute. Four loko est vice echo park wes anderson jean shorts, tempor ea vero locavore. Seitan DIY dolore readymade williamsburg viral. Dolor fap master cleanse delectus, ad butcher labore duis vice mollit cillum exercitation eu banh mi. Austin banksy 3 wolf moon locavore sed, helvetica next level VHS you probably haven't heard of them ethical odio. Incididunt locavore minim, do seitan consequat qui thundercats labore before they sold out retro laborum. Esse twee readymade laboris fap vice, voluptate DIY. + </p> + </dd> + </dl> + </div> </div> </div> </section> - <!-- Footer ================================================== --> <footer class="footer"> diff --git a/js/bootstrap-collapse.js b/js/bootstrap-collapse.js new file mode 100644 index 0000000000..6de3d971a3 --- /dev/null +++ b/js/bootstrap-collapse.js @@ -0,0 +1,127 @@ +/* ============================================================= + * bootstrap-collapsible.js v2.0.0 + * http://twitter.github.com/bootstrap/javascript.html#collapsible + * ============================================================= + * Copyright 2011 Twitter, Inc. + * + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + * ============================================================ */ + +(function( $ ){ + + "use strict" + + var Collapse = function ( element, options ) { + this.$element = $(element) + this.settings = $.extend({}, $.fn.collapse.defaults, options) + + if (this.settings["parent"]) { + this.$parent = $(this.settings["parent"]) + } + + this.settings.toggle && this.toggle() + } + + Collapse.prototype = { + + dimension: function () { + var hasWidth = this.$element.hasClass('width') + return hasWidth ? 'width' : 'height' + } + + , show: function () { + var dimension = this.dimension() + , scroll = $.camelCase(['scroll', dimension].join('-')) + + this.$parent && this.$parent.find('.in').collapse('hide') + + this.$element[dimension](0) + this.transition('addClass', 'show', 'shown') + this.$element[dimension](this.$element[0][scroll]) + + } + + , hide: function () { + var dimension = this.dimension() + this.reset(this.$element[dimension]()) + this.transition('removeClass', 'hide', 'hidden') + this.$element[dimension](0) + } + + , reset: function ( size ) { + var dimension = this.dimension() + + this.$element + .removeClass('collapse') + [dimension](size || '') + [0].offsetWidth + + this.$element.addClass('collapse') + } + + , transition: function ( method, startEvent, completeEvent ) { + var that = this + , complete = function () { + if (startEvent == 'show') that.reset() + that.$element.trigger(completeEvent) + } + + this.$element + .trigger(startEvent) + [method]('in') + + $.support.transition && this.$element.hasClass('collapse') ? + this.$element.one($.support.transition.end, complete) : + complete() + } + + , toggle: function () { + this[this.$element.hasClass('in') ? 'hide' : 'show']() + } + + } + + /* COLLAPSIBLE PLUGIN DEFINITION + * ============================== */ + + $.fn.collapse = function ( option ) { + return this.each(function () { + var $this = $(this) + , data = $this.data('collapse') + , options = typeof option == 'object' && option + if (!data) $this.data('collapse', (data = new Collapse(this, options))) + if (typeof option == 'string') data[option]() + }) + } + + $.fn.collapse.defaults = { + toggle: true + } + + $.fn.collapse.Collapse = Collapse + + + /* COLLAPSIBLE DATA-API + * ==================== */ + + $(function () { + $('body').delegate('[data-toggle=collapse]', 'click.collapse.data-api', function ( e ) { + var $this = $(this) + , target = $this.attr('data-target') + , option = $(target).data('collapse') ? 'toggle' : $this.data() + e.preventDefault() + $(target).collapse(option) + }) + }) + +})( window.jQuery || window.ender ) \ No newline at end of file diff --git a/lib/patterns.less b/lib/patterns.less index 01b32cd900..1b4c5a9416 100644 --- a/lib/patterns.less +++ b/lib/patterns.less @@ -631,14 +631,6 @@ input[type=submit].btn { } - - - - - - - - // PATTERN ANIMATIONS // ------------------ @@ -650,6 +642,21 @@ input[type=submit].btn { } } +.collapse { + position:relative; + overflow:hidden; + &.height { + .transition(height .35s ease); + height: 0; + &.in { height: auto; } + } + &.width { + .transition(width .35s ease); + width: 0; + &.in { width: auto; } + } +} + // LABELS // ------ -- GitLab From bd8745a98b93fb55e4c1c08a34e97bd30a16798c Mon Sep 17 00:00:00 2001 From: Jacob Thornton <jacobthornton@gmail.com> Date: Fri, 25 Nov 2011 17:30:52 -0800 Subject: [PATCH 094/318] allow scrollspy to target a specific nav --- docs/javascript.html | 4 ++-- js/bootstrap-scrollspy.js | 4 ++-- 2 files changed, 4 insertions(+), 4 deletions(-) diff --git a/docs/javascript.html b/docs/javascript.html index fae1038566..3e2bacc9d4 100644 --- a/docs/javascript.html +++ b/docs/javascript.html @@ -380,7 +380,7 @@ $('#myModal').bind('hidden', function () { Scroll the area below and watch the navigation update. The dropdown sub items will be highlighted as well. Try it!</p> <p> - <div id="navbar-example" class="navbar navbar-static"> + <div id="navbarExample" class="navbar navbar-static"> <div class="navbar-inner"> <div class="container" style="width: auto;"> <a class="brand" href="#">Project Name</a> @@ -401,7 +401,7 @@ $('#myModal').bind('hidden', function () { </div> </div> - <div data-spy="scroll" class="scrollspy-example"> + <div data-spy="scroll" data-target="#navbarExample" class="scrollspy-example"> <h4 id="fat">@fat</h4> <p> Ad leggings keytar, brunch id art party dolor labore. Pitchfork yr enim lo-fi before they sold out qui. Tumblr farm-to-table bicycle rights whatever. Anim keffiyeh carles cardigan. Velit seitan mcsweeney's photo booth 3 wolf moon irure. Cosby sweater lomo jean shorts, williamsburg hoodie minim qui you probably haven't heard of them et cardigan trust fund culpa biodiesel wes anderson aesthetic. Nihil tattooed accusamus, cred irony biodiesel keffiyeh artisan ullamco consequat. diff --git a/js/bootstrap-scrollspy.js b/js/bootstrap-scrollspy.js index ac9477d0ef..e4bfea4836 100644 --- a/js/bootstrap-scrollspy.js +++ b/js/bootstrap-scrollspy.js @@ -26,10 +26,10 @@ function ScrollSpy( element ) { var process = $.proxy(this.process, this) - this.selector = '.nav li > a' - this.$body = $('body').delegate(this.selector, 'click.scroll.data-api', process) this.$scrollElement = $(element).bind('scroll.scroll.data-api', process) + this.selector = (this.$scrollElement.attr('data-target') || '') + ' .nav li > a' + this.$body = $('body').delegate(this.selector, 'click.scroll.data-api', process) this.refresh() this.process() -- GitLab From 3157de8d1d4b69c0f5152b4a784bd185f76c9ac4 Mon Sep 17 00:00:00 2001 From: Jacob Thornton <jacobthornton@gmail.com> Date: Fri, 25 Nov 2011 21:34:55 -0800 Subject: [PATCH 095/318] clean up comments for better built files --- bootstrap.css | 50 +++---------------------------------- bootstrap.min.css | 3 +-- docs/javascript.html | 10 ++++---- js/bootstrap-collapsible.js | 37 --------------------------- lib/forms.less | 7 +++--- lib/mixins.less | 6 ++--- lib/patterns.less | 19 +++++--------- lib/reset.less | 8 +++--- lib/responsive.less | 6 ++--- lib/scaffolding.less | 8 +++--- lib/tables.less | 8 +++--- lib/type.less | 6 ++--- lib/variables.less | 6 ++--- 13 files changed, 44 insertions(+), 130 deletions(-) delete mode 100644 js/bootstrap-collapsible.js diff --git a/bootstrap.css b/bootstrap.css index 19d07745e4..4c4d85aa9e 100644 --- a/bootstrap.css +++ b/bootstrap.css @@ -6,11 +6,8 @@ * 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 Nov 25 12:09:37 PST 2011 + * Date: Fri Nov 25 21:33:58 PST 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). - * ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */ html, body { margin: 0; padding: 0; @@ -170,16 +167,6 @@ textarea { overflow: auto; vertical-align: top; } -/* Variables.less - * Variables to customize the look and feel of Bootstrap - * ----------------------------------------------------- */ -/* Mixins.less - * Snippets of reusable CSS to develop faster and keep code readable - * ----------------------------------------------------------------- */ -/* - * Scaffolding - * Basic and global styles for generating a grid system, structural layout, and page templates - * ------------------------------------------------------------------------------------------- */ body { margin: 0; font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; @@ -344,9 +331,6 @@ a:hover { .offset11 { margin-left: 900px; } -/* Typography.less - * Headings, body text, lists, code, and more for a versatile and durable typography system - * ---------------------------------------------------------------------------------------- */ p { margin-bottom: 9px; font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; @@ -534,9 +518,6 @@ pre code { padding: 0; background-color: transparent; } -/* Forms.less - * Base styles for various input types, form layouts, and states - * ------------------------------------------------------------- */ form { margin-bottom: 18px; } @@ -999,10 +980,6 @@ form .clearfix.success .input-prepend .add-on, form .clearfix.success .input-app .horizontal-form .form-actions { padding-left: 150px; } -/* - * Tables.less - * Tables for, you guessed it, tabular data - * ---------------------------------------- */ table { width: 100%; padding: 0; @@ -1198,9 +1175,6 @@ table .purple { table .headerSortUp.purple, table .headerSortDown.purple { background-color: #e2d5f0; } -/* Patterns.less - * Repeatable UI elements outside the base styles provided from the scaffolding - * ---------------------------------------------------------------------------- */ .navbar { height: 40px; overflow: visible; @@ -1880,31 +1854,18 @@ button.btn::-moz-focus-inner, input[type=submit].btn::-moz-focus-inner { opacity: 1; } .collapse { - position: relative; - overflow: hidden; -} -.collapse.height { -webkit-transition: height 0.35s ease; -moz-transition: height 0.35s ease; -ms-transition: height 0.35s ease; -o-transition: height 0.35s ease; transition: height 0.35s ease; + position: relative; + overflow: hidden; height: 0; } -.collapse.height.in { +.collapse.in { height: auto; } -.collapse.width { - -webkit-transition: width 0.35s ease; - -moz-transition: width 0.35s ease; - -ms-transition: width 0.35s ease; - -o-transition: width 0.35s ease; - transition: width 0.35s ease; - width: 0; -} -.collapse.width.in { - width: auto; -} .label { padding: 1px 3px 2px; font-size: 9.75px; @@ -2470,9 +2431,6 @@ button.btn::-moz-focus-inner, input[type=submit].btn::-moz-focus-inner { -moz-box-shadow: 0 1px 4px rgba(0, 105, 214, 0.25); box-shadow: 0 1px 4px rgba(0, 105, 214, 0.25); } -/* Responsive.less - * For phone and tablet devices - * ------------------------------------------------------------- */ @media (max-width: 480px) { .container { width: auto; diff --git a/bootstrap.min.css b/bootstrap.min.css index f0e1a8dec4..2a802744cf 100644 --- a/bootstrap.min.css +++ b/bootstrap.min.css @@ -278,8 +278,7 @@ button.btn::-moz-focus-inner,input[type=submit].btn::-moz-focus-inner{padding:0; .alert-message.block-message.info{background-color:#ddf4fb;border-color:#c6edf9;} .well{min-height:20px;padding:19px;margin-bottom:20px;background-color:#f5f5f5;border:1px solid #eee;border:1px solid rgba(0, 0, 0, 0.05);-webkit-border-radius:4px;-moz-border-radius:4px;border-radius:4px;-webkit-box-shadow:inset 0 1px 1px rgba(0, 0, 0, 0.05);-moz-box-shadow:inset 0 1px 1px rgba(0, 0, 0, 0.05);box-shadow:inset 0 1px 1px rgba(0, 0, 0, 0.05);}.well blockquote{border-color:#ddd;border-color:rgba(0, 0, 0, 0.15);} .fade{-webkit-transition:opacity 0.15s linear;-moz-transition:opacity 0.15s linear;-ms-transition:opacity 0.15s linear;-o-transition:opacity 0.15s linear;transition:opacity 0.15s linear;opacity:0;}.fade.in{opacity:1;} -.collapse{position:relative;overflow:hidden;}.collapse.height{-webkit-transition:height 0.35s ease;-moz-transition:height 0.35s ease;-ms-transition:height 0.35s ease;-o-transition:height 0.35s ease;transition:height 0.35s ease;height:0;}.collapse.height.in{height:auto;} -.collapse.width{-webkit-transition:width 0.35s ease;-moz-transition:width 0.35s ease;-ms-transition:width 0.35s ease;-o-transition:width 0.35s ease;transition:width 0.35s ease;width:0;}.collapse.width.in{width:auto;} +.collapse{-webkit-transition:height 0.35s ease;-moz-transition:height 0.35s ease;-ms-transition:height 0.35s ease;-o-transition:height 0.35s ease;transition:height 0.35s ease;position:relative;overflow:hidden;height:0;}.collapse.in{height:auto;} .label{padding:1px 3px 2px;font-size:9.75px;font-weight:bold;color:#ffffff;text-transform:uppercase;background-color:#bfbfbf;-webkit-border-radius:3px;-moz-border-radius:3px;border-radius:3px;}.label.important{background-color:#c43c35;} .label.warning{background-color:#f89406;} .label.success{background-color:#46a546;} diff --git a/docs/javascript.html b/docs/javascript.html index 3e2bacc9d4..e57e452236 100644 --- a/docs/javascript.html +++ b/docs/javascript.html @@ -903,7 +903,7 @@ $('.tabs a').bind('change', function (e) { simple collapsible </button> -<div id="demo" class="collapse height in"> … </div></pre> +<div id="demo" class="collapse in"> … </div></pre> <p><span class="label notice">Notice</span> To add accordion like group management to a collapsible control just add the additional data attribute <code>data-parent="#selector"</code>. Refer to the demo below to see this in action.</p> <h3>Methods</h3> <h4>.collapse(options)</h4> @@ -964,13 +964,13 @@ $('#myCollapsible').bind('hidden', function () { </button> </p> - <div id="collapseDemoWrap" class="collapse height"> + <div id="collapseDemoWrap" class="collapse"> <!-- group collapse --> <dl id="accordion" > <dt data-toggle="collapse" data-target="#collapseOne" data-parent="#accordion"> <a href="#">Collapsible Group Item #1</a> </dt> - <dd id="collapseOne" class="collapse height"> + <dd id="collapseOne" class="collapse in"> <p> Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS. </p> @@ -978,7 +978,7 @@ $('#myCollapsible').bind('hidden', function () { <dt data-toggle="collapse" data-target="#collapseTwo" data-parent="#accordion" > <a href="#">Collapsible Group Item #2</a> </dt> - <dd id="collapseTwo" class="collapse height"> + <dd id="collapseTwo" class="collapse"> <p> Blog +1 eiusmod, williamsburg chambray craft beer brooklyn. Trust fund squid whatever, sunt hoodie skateboard mustache 3 wolf moon art party wes anderson ad leggings officia. Skateboard keytar incididunt gluten-free retro sartorial, single-origin coffee et viral. Art party blog sunt, readymade fugiat 8-bit aesthetic ex echo park fanny pack keytar. Thundercats sustainable labore, mustache adipisicing tattooed dolore aute occaecat velit 8-bit raw denim letterpress. In occaecat freegan, next level single-origin coffee chambray excepteur nihil duis exercitation adipisicing ex sartorial twee squid. You probably haven't heard of them fugiat ea retro eiusmod quis cosby sweater, +1 fap sapiente biodiesel banksy. </p> @@ -986,7 +986,7 @@ $('#myCollapsible').bind('hidden', function () { <dt data-toggle="collapse" data-target="#collapseThree" data-parent="#accordion" > <a href="#">Collapsible Group Item #3</a> </dt> - <dd id="collapseThree" class="collapse height"> + <dd id="collapseThree" class="collapse"> <p> Tempor gentrify pariatur nihil salvia, irony synth incididunt odio commodo brunch aute. Four loko est vice echo park wes anderson jean shorts, tempor ea vero locavore. Seitan DIY dolore readymade williamsburg viral. Dolor fap master cleanse delectus, ad butcher labore duis vice mollit cillum exercitation eu banh mi. Austin banksy 3 wolf moon locavore sed, helvetica next level VHS you probably haven't heard of them ethical odio. Incididunt locavore minim, do seitan consequat qui thundercats labore before they sold out retro laborum. Esse twee readymade laboris fap vice, voluptate DIY. </p> diff --git a/js/bootstrap-collapsible.js b/js/bootstrap-collapsible.js deleted file mode 100644 index 273eb22720..0000000000 --- a/js/bootstrap-collapsible.js +++ /dev/null @@ -1,37 +0,0 @@ -/* ============================================================= - * bootstrap-collapsible.js v2.0.0 - * http://twitter.github.com/bootstrap/javascript.html#collapsible - * ============================================================= - * Copyright 2011 Twitter, Inc. - * - * Licensed under the Apache License, Version 2.0 (the "License"); - * you may not use this file except in compliance with the License. - * You may obtain a copy of the License at - * - * http://www.apache.org/licenses/LICENSE-2.0 - * - * Unless required by applicable law or agreed to in writing, software - * distributed under the License is distributed on an "AS IS" BASIS, - * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. - * See the License for the specific language governing permissions and - * limitations under the License. - * ============================================================ */ - -(function( $ ){ - - var Collapsible = function ( element, options ) {} - - Collapsible.prototype = {} - - /* collapsible PLUGIN DEFINITION - * ======================= */ - - $.fn.collapsible = function ( options ) { - - return this.each(function () { - new Collapsible(this, options) - }) - } - - -})( window.jQuery || window.ender ) \ No newline at end of file diff --git a/lib/forms.less b/lib/forms.less index 845eec185e..39c2937999 100644 --- a/lib/forms.less +++ b/lib/forms.less @@ -1,7 +1,6 @@ -/* Forms.less - * Base styles for various input types, form layouts, and states - * ------------------------------------------------------------- */ - +// Forms.less +// Base styles for various input types, form layouts, and states +// ------------------------------------------------------------- // GENERAL STYLES diff --git a/lib/mixins.less b/lib/mixins.less index d77ecf6215..0effdfa37a 100644 --- a/lib/mixins.less +++ b/lib/mixins.less @@ -1,6 +1,6 @@ -/* Mixins.less - * Snippets of reusable CSS to develop faster and keep code readable - * ----------------------------------------------------------------- */ +// Mixins.less +// Snippets of reusable CSS to develop faster and keep code readable +// ----------------------------------------------------------------- // Clearfix for clearing floats like a boss h5bp.com/q diff --git a/lib/patterns.less b/lib/patterns.less index 1b4c5a9416..15c3c9c067 100644 --- a/lib/patterns.less +++ b/lib/patterns.less @@ -1,6 +1,6 @@ -/* Patterns.less - * Repeatable UI elements outside the base styles provided from the scaffolding - * ---------------------------------------------------------------------------- */ +// Patterns.less +// Repeatable UI elements outside the base styles provided from the scaffolding +// ---------------------------------------------------------------------------- // NAVBAR (FIXED AND STATIC) @@ -643,18 +643,11 @@ input[type=submit].btn { } .collapse { + .transition(height .35s ease); position:relative; overflow:hidden; - &.height { - .transition(height .35s ease); - height: 0; - &.in { height: auto; } - } - &.width { - .transition(width .35s ease); - width: 0; - &.in { width: auto; } - } + height: 0; + &.in { height: auto; } } diff --git a/lib/reset.less b/lib/reset.less index 8bff573352..c95c7b04c5 100644 --- a/lib/reset.less +++ b/lib/reset.less @@ -1,6 +1,8 @@ -/* 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). - * ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */ +// 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). +// ------------------------------------------------------------------------ // ERIC MEYER RESET diff --git a/lib/responsive.less b/lib/responsive.less index 75c33b1a8e..f63f90c982 100644 --- a/lib/responsive.less +++ b/lib/responsive.less @@ -1,6 +1,6 @@ -/* Responsive.less - * For phone and tablet devices - * ------------------------------------------------------------- */ +// Responsive.less +// For phone and tablet devices +// ------------------------------------------------------------- // UP TO LANDSCAPE PHONE diff --git a/lib/scaffolding.less b/lib/scaffolding.less index 179ef26387..3e231aae5e 100644 --- a/lib/scaffolding.less +++ b/lib/scaffolding.less @@ -1,7 +1,7 @@ -/* - * Scaffolding - * Basic and global styles for generating a grid system, structural layout, and page templates - * ------------------------------------------------------------------------------------------- */ +// +// Scaffolding +// Basic and global styles for generating a grid system, structural layout, and page templates +// ------------------------------------------------------------------------------------------- // STRUCTURAL LAYOUT diff --git a/lib/tables.less b/lib/tables.less index 4aed466b11..22a3199185 100644 --- a/lib/tables.less +++ b/lib/tables.less @@ -1,7 +1,7 @@ -/* - * Tables.less - * Tables for, you guessed it, tabular data - * ---------------------------------------- */ +// +// Tables.less +// Tables for, you guessed it, tabular data +// ---------------------------------------- // BASELINE STYLES diff --git a/lib/type.less b/lib/type.less index 8e25fd9c51..407a20ec29 100644 --- a/lib/type.less +++ b/lib/type.less @@ -1,6 +1,6 @@ -/* Typography.less - * Headings, body text, lists, code, and more for a versatile and durable typography system - * ---------------------------------------------------------------------------------------- */ +// Typography.less +// Headings, body text, lists, code, and more for a versatile and durable typography system +// ---------------------------------------------------------------------------------------- // BODY TEXT diff --git a/lib/variables.less b/lib/variables.less index 92d09de709..caa9c0f602 100644 --- a/lib/variables.less +++ b/lib/variables.less @@ -1,6 +1,6 @@ -/* Variables.less - * Variables to customize the look and feel of Bootstrap - * ----------------------------------------------------- */ +// Variables.less +// Variables to customize the look and feel of Bootstrap +// ----------------------------------------------------- // LINK COLORS -- GitLab From ecc9764c831078a186fed69c3ae0af2f7c9ee495 Mon Sep 17 00:00:00 2001 From: Mark Otto <markdotto@gmail.com> Date: Sun, 27 Nov 2011 00:44:30 -0800 Subject: [PATCH 096/318] Remove static github buttons and replace with iframe versions --- docs/index.html | 72 +++---------------------------------------------- 1 file changed, 4 insertions(+), 68 deletions(-) diff --git a/docs/index.html b/docs/index.html index 0517787417..c9c5df7cdb 100644 --- a/docs/index.html +++ b/docs/index.html @@ -82,22 +82,11 @@ <li><a href="https://github.com/twitter/bootstrap/wiki/Changelog">Changelog</a></li> <li class="divider">·</li> <li> - <span class="github-btn github-watchers"> - <a href="https://github.com/twitter/bootstrap" class="btn"> - <img class="github-ico" src="assets/img/github-16px.png"> - Watch - </a> - <span class="count"></span> - </span> - <span class="github-btn github-forks"> - <a href="https://github.com/twitter/bootstrap" class="btn"> - <img class="github-ico" src="assets/img/github-16px.png"> - Fork - </a> - <span class="count"></span> - </span> + <iframe class="github-btn" src="http://markdotto.github.com/github-buttons/github-btn.html?user=twitter&repo=bootstrap&type=watch&count=true" allowtransparency="true" frameborder="0" scrolling="0" width="110px" height="20px"></iframe> + </li> + <li> + <iframe class="github-btn" src="http://markdotto.github.com/github-buttons/github-btn.html?user=twitter&repo=bootstrap&type=fork&count=true" allowtransparency="true" frameborder="0" scrolling="0" width="94px" height="20px"></iframe> </li> - <!-- <li><strong>Authors</strong></li> <li><a href="http://twitter.com/mdo">@mdo</a></li> @@ -190,23 +179,6 @@ </div><!--/row--> </div> - - - -<!-- <h3>Quick-start examples</h3> - <p>Need some quick templates? Check out these basic examples we've put together:</p> - <ul class="media-grid"> - <li> - <a href="../examples/hero.html"><img src="assets/img/example-diagram-01.png" alt="Simple three-column layout with hero unit"></a> - </li> - <li> - <a href="../examples/fluid.html"><img src="assets/img/example-diagram-02.png" alt="Fluid layout with static sidebar"></a> - </li> - <li> - <a href="../examples/container-app.html"><img src="assets/img/example-diagram-03.png" alt="Simple hanging container for apps"></a> - </li> - </ul> - --> </div><!-- /#overview --> @@ -232,41 +204,5 @@ <script src="../js/bootstrap-scrollspy.js"></script> <script src="assets/js/application.js"></script> - - <script type="text/javascript"> - $(document).ready(function($){ - - function addCommas(nStr) { - nStr += ''; - x = nStr.split('.'); - x1 = x[0]; - x2 = x.length > 1 ? '.' + x[1] : ''; - var rgx = /(\d+)(\d{3})/; - while (rgx.test(x1)) { - x1 = x1.replace(rgx, '$1' + ',' + '$2'); - } - return x1 + x2; - } - - // GITHUB - window.repoCallback = function (obj) { - - // Variables - var watchers = obj['repository']['watchers']; - var forks = obj['repository']['forks']; - - // Echo out the counts in correct elements - $('.github-watchers .count').html(addCommas(watchers)); - $('.github-forks .count').html(addCommas(forks)); - - // Debug log - // console.log("Watchers:" + watchers); - // console.log("Forks:" + forks); - } - $.ajax("http://github.com/api/v2/json/repos/show/twitter/bootstrap?callback=repoCallback", {dataType: "jsonp"}); - }); - - </script> - </body> </html> -- GitLab From 3925ea9986e70f5a87883563c47c8ecd3d631c02 Mon Sep 17 00:00:00 2001 From: Jacob Thornton <jacobthornton@gmail.com> Date: Sun, 27 Nov 2011 16:01:26 -0800 Subject: [PATCH 097/318] remove trailing semicolons - we'll be hosting minified files with semicolons - no reason to make the dev source ugly --- js/bootstrap-alerts.js | 2 +- js/bootstrap-buttons.js | 2 +- js/bootstrap-dropdown.js | 2 +- js/bootstrap-modal.js | 2 +- js/bootstrap-popover.js | 2 +- js/bootstrap-tabs.js | 2 +- js/bootstrap-twipsy.js | 2 +- 7 files changed, 7 insertions(+), 7 deletions(-) diff --git a/js/bootstrap-alerts.js b/js/bootstrap-alerts.js index fabafa4f92..5f600ba1ff 100644 --- a/js/bootstrap-alerts.js +++ b/js/bootstrap-alerts.js @@ -73,4 +73,4 @@ $('body').delegate(dismiss, 'click.alert.data-api', Alert.prototype.close) }) -}( window.jQuery || window.ender ); \ No newline at end of file +}( window.jQuery || window.ender ) \ No newline at end of file diff --git a/js/bootstrap-buttons.js b/js/bootstrap-buttons.js index 82d80df2d9..1cafe4d688 100644 --- a/js/bootstrap-buttons.js +++ b/js/bootstrap-buttons.js @@ -93,4 +93,4 @@ }) }) -}( window.jQuery || window.ender ); \ No newline at end of file +}( window.jQuery || window.ender ) \ No newline at end of file diff --git a/js/bootstrap-dropdown.js b/js/bootstrap-dropdown.js index 4526a9203b..7259284bfe 100644 --- a/js/bootstrap-dropdown.js +++ b/js/bootstrap-dropdown.js @@ -70,4 +70,4 @@ $('body').delegate(toggle, 'click.dropdown.data-api', Dropdown.prototype.toggle) }) -}( window.jQuery || window.ender ); \ No newline at end of file +}( window.jQuery || window.ender ) \ No newline at end of file diff --git a/js/bootstrap-modal.js b/js/bootstrap-modal.js index 2860c8a518..dab67d1b23 100644 --- a/js/bootstrap-modal.js +++ b/js/bootstrap-modal.js @@ -199,4 +199,4 @@ }) }) -}( window.jQuery || window.ender ); \ No newline at end of file +}( window.jQuery || window.ender ) \ No newline at end of file diff --git a/js/bootstrap-popover.js b/js/bootstrap-popover.js index 934ab05453..3c67b18fc2 100644 --- a/js/bootstrap-popover.js +++ b/js/bootstrap-popover.js @@ -91,4 +91,4 @@ $.fn.twipsy.rejectAttrOptions.push( 'content' ) -}( window.jQuery || window.ender ); \ No newline at end of file +}( window.jQuery || window.ender ) \ No newline at end of file diff --git a/js/bootstrap-tabs.js b/js/bootstrap-tabs.js index 35418fd447..bd49e130f2 100644 --- a/js/bootstrap-tabs.js +++ b/js/bootstrap-tabs.js @@ -77,4 +77,4 @@ $('body').tabs('ul[data-tabs] li > a, ul[data-pills] > li > a') }) -}( window.jQuery || window.ender ); \ No newline at end of file +}( window.jQuery || window.ender ) \ No newline at end of file diff --git a/js/bootstrap-twipsy.js b/js/bootstrap-twipsy.js index 3cb9841c52..fe4469a232 100644 --- a/js/bootstrap-twipsy.js +++ b/js/bootstrap-twipsy.js @@ -289,4 +289,4 @@ return $.extend({}, options, data) } -}( window.jQuery || window.ender ); \ No newline at end of file +}( window.jQuery || window.ender ) \ No newline at end of file -- GitLab From 46fe38386afce7149810b1feb534726735ce28b2 Mon Sep 17 00:00:00 2001 From: Jacob Thornton <jacobthornton@gmail.com> Date: Sun, 27 Nov 2011 17:04:55 -0800 Subject: [PATCH 098/318] rename tabs to tab - clean up lots of api stuff make href acceptable target val --- docs/javascript.html | 89 ++++++++------- js/README.md | 4 +- js/bootstrap-collapse.js | 4 +- js/bootstrap-modal.js | 2 +- js/bootstrap-scrollspy.js | 4 +- js/bootstrap-tab.js | 102 ++++++++++++++++++ js/bootstrap-tabs.js | 80 -------------- ...transitions.js => bootstrap-transition.js} | 0 8 files changed, 161 insertions(+), 124 deletions(-) create mode 100644 js/bootstrap-tab.js delete mode 100644 js/bootstrap-tabs.js rename js/{bootstrap-transitions.js => bootstrap-transition.js} (100%) diff --git a/docs/javascript.html b/docs/javascript.html index e57e452236..833e6ec026 100644 --- a/docs/javascript.html +++ b/docs/javascript.html @@ -28,12 +28,12 @@ <script src="http://code.jquery.com/jquery-1.7.js"></script> <script src="assets/js/google-code-prettify/prettify.js"></script> <script>$(function () { prettyPrint() })</script> - <script src="../js/bootstrap-transitions.js"></script> + <script src="../js/bootstrap-transition.js"></script> <script src="../js/bootstrap-alerts.js"></script> <script src="../js/bootstrap-modal.js"></script> <script src="../js/bootstrap-dropdown.js"></script> <script src="../js/bootstrap-scrollspy.js"></script> - <script src="../js/bootstrap-tabs.js"></script> + <script src="../js/bootstrap-tab.js"></script> <script src="../js/bootstrap-twipsy.js"></script> <script src="../js/bootstrap-popover.js"></script> <script src="../js/bootstrap-buttons.js"></script> @@ -127,7 +127,7 @@ <td>The ScrollSpy plugin is for adding an auto updating nav based on scroll position to the bootstrap navbar.</td> </tr> <tr> - <td><a href="./javascript.html#tabs">bootstrap-tabs.js</a></td> + <td><a href="./javascript.html#tabs">bootstrap-tab.js</a></td> <td>This plugin adds quick, dynamic tab and pill functionality for cycling through local content.</td> </tr> <tr> @@ -204,9 +204,9 @@ </tbody> </table> <h3>Markup</h3> - <p>You can activate modals on your page easily without having to write a single line of javascript. Just set <code>data-toggle="modal"</code> on a controller element with a <code>data-target="#foo"</code> which corresponds to a modal element id, and when clicked, it will launch your modal. To add modal options, just include them as additoinal data attributes.</p> + <p>You can activate modals on your page easily without having to write a single line of javascript. Just set <code>data-toggle="modal"</code> on a controller element with a <code>data-target="#foo"</code> or <code>href="#foo"</code> which corresponds to a modal element id, and when clicked, it will launch your modal. To add modal options, just include them as additoinal data attributes.</p> <pre class="prettyprint linenums"> -<a class="btn" data-toggle="modal" data-target="#myModal" >Launch Modal</a> +<a class="btn" data-toggle="modal" href="#myModal" >Launch Modal</a> </pre> <p><span class="label notice">Notice</span> If you want your modal to animate in and out, just add a <code>.fade</code> class to the <code>.modal</code> element (refer to the demo to see this in action).</p> <h3>Methods</h3> @@ -274,9 +274,9 @@ $('#myModal').bind('hidden', function () { </div> </div> - <button data-toggle="modal" data-target="#myModal" class="btn danger"> + <a data-toggle="modal" href="#myModal" class="btn danger"> Launch Modal - </button> + </a> </div> </div> </section> @@ -435,23 +435,28 @@ $('#myModal').bind('hidden', function () { <section id="tabs"> <div class="page-header"> - <h1>Tabs <small>bootstrap-tabs.js</small></h1> + <h1>Tabs <small>bootstrap-tab.js</small></h1> </div> <div class="row"> <div class="span3 columns"> <p>This plugin adds quick, dynamic tab and pill functionality.</p> - <a href="../js/bootstrap-tabs.js" target="_blank" class="btn primary">Download</a> + <a href="../js/bootstrap-tab.js" target="_blank" class="btn primary">Download</a> </div> <div class="span9 columns"> - <h3>Using boostrap-tabs.js</h3> - <pre class="prettyprint linenums">$('.tabs').tabs()</pre> + <h3>Using boostrap-tab.js</h3> + <pre class="prettyprint linenums">$('#myTab').tab('show')</pre> <h3>Markup</h3> - <p>You can activate a tab or pill navigation without writing any javascript by simply giving them a <code>data-tabs</code> or <code>data-pills</code> attribute.</p> - <pre class="prettyprint linenums"> <ul class="tabs" data-tabs="tabs" >...</ul></pre> + <p>You can activate a tab or pill navigation without writing any javascript by simply specifying <code>data-toggle="tab"</code> or <code>data-toggle="pill"</code> on an element.</p> +<pre class="prettyprint linenums"> +<ul class="tabs"> + <li><a href="#home" data-toggle="tab">Home</a></li> + <li><a href="#profile" data-toggle="tab">Profile</a></li> + <li><a href="http://twitter.com/fat">twitter</a></li> +</ul></pre> <h3>Methods</h3> - <h4>$().tabs or $().pills</h4> + <h4>$().tab</h4> <p> - Activates tab and pill functionality for a given container. Tab links should reference id's in the document. + Activates tab functionality for a given element controller. Tab should have either a `data-target` or an `href` referencing a node in the dom. </p> <pre class="prettyprint linenums"> <ul class="tabs"> @@ -470,7 +475,7 @@ $('#myModal').bind('hidden', function () { <script> $(function () { - $('.tabs').tabs() + $('.tabs a:last').tab('show') }) </script></pre> </p> @@ -484,28 +489,32 @@ $('#myModal').bind('hidden', function () { </thead> <tbody> <tr> - <td>change</td> - <td>This event fires on tab change. Use <code>event.target</code> and <code>event.relatedTarget</code> to target the active tab and the previous active tab respectively.</td> + <td>show</td> + <td>This event fires on tab show, but before the new tab has been shown. Use <code>event.target</code> and <code>event.relatedTarget</code> to target the active tab and the previous active tab (if available) respectively.</td> + </tr> + <tr> + <td>show</td> + <td>This event fires on tab show after a tab has been shown. Use <code>event.target</code> and <code>event.relatedTarget</code> to target the active tab and the previous active tab (if available) respectively.</td> </tr> </tbody> </table> <pre class="prettyprint linenums"> -$('.tabs a').bind('change', function (e) { +$('a[data-toggle="tab"]').bind('shown', function (e) { e.target // activated tab e.relatedTarget // previous tab })</pre> <h3>Demo</h3> - <ul class="tabs" data-tabs="tabs"> - <li class="active"><a href="#home">Home</a></li> - <li><a href="#profile">Profile</a></li> - <li><a href="#messages">Messages</a></li> - <li><a href="#settings">Settings</a></li> + <ul id="tab" class="tabs"> + <li class="active"><a href="#home" data-toggle="tab">Home</a></li> + <li><a href="#profile" data-toggle="tab">Profile</a></li> + <li><a href="#messages" data-toggle="tab">Messages</a></li> + <li><a href="#settings" data-toggle="tab">Settings</a></li> <li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown</a> <ul class="dropdown-menu"> - <li><a href="#dropdown1">@fat</a></li> - <li><a href="#dropdown2">@mdo</a></li> + <li><a href="#dropdown1" data-toggle="tab">@fat</a></li> + <li><a href="#dropdown2" data-toggle="tab">@mdo</a></li> </ul> </li> </ul> @@ -603,8 +612,7 @@ $('.tabs a').bind('change', function (e) { </table> <p><span class="label notice">Notice</span> Individual twipsy instance options can alternatively be specified through the use of data attributes.</code></p> <h3>Markup</h3> - <p>Twipsy's should contain a title tag which will be use to fill the tip content.<p> - <pre class="prettyprint linenums"><a href="#" rel='twipsy' title='twipsy text'>@fat</a></pre> + For performance reasons, the Twipsy and Popover data-apis are opt in. If you would like to use them just set the live flag to true, however we recommend you know what you are doing if you do that. :) <h3>Methods</h3> <h4>$().twipsy(options)</h4> <p>Attaches a twipsy handler to an element collection.</p> @@ -689,10 +697,9 @@ $('.tabs a').bind('change', function (e) { </table> <p><span class="label notice">Notice</span> Individual popover instance options can alternatively be specified through the use of data attributes.</code></p> <h3>Markup</h3> - <p>Popover's should contain a title tag and a data-content attribute.<p> -<pre class="prettyprint linenums"><a href="#" class="btn" rel="popover" title="A Title" data-content="Some content"> - hover for popover -</a></pre> + <p> + For performance reasons, the Twipsy and Popover data-apis are opt in. If you would like to use them just set the live flag to true, however we recommend you know what you are doing if you do that. :) + </p> <h3>Methods</h3> <h4>$().popover(options)</h4> <p>Initializes popovers for an element collection.</p> @@ -967,24 +974,30 @@ $('#myCollapsible').bind('hidden', function () { <div id="collapseDemoWrap" class="collapse"> <!-- group collapse --> <dl id="accordion" > - <dt data-toggle="collapse" data-target="#collapseOne" data-parent="#accordion"> - <a href="#">Collapsible Group Item #1</a> + <dt> + <a data-toggle="collapse" data-parent="#accordion" href="#collapseOne"> + Collapsible Group Item #1 + </a> </dt> <dd id="collapseOne" class="collapse in"> <p> Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS. </p> </dd> - <dt data-toggle="collapse" data-target="#collapseTwo" data-parent="#accordion" > - <a href="#">Collapsible Group Item #2</a> + <dt> + <a data-toggle="collapse" data-parent="#accordion" href="#collapseTwo"> + Collapsible Group Item #2 + </a> </dt> <dd id="collapseTwo" class="collapse"> <p> Blog +1 eiusmod, williamsburg chambray craft beer brooklyn. Trust fund squid whatever, sunt hoodie skateboard mustache 3 wolf moon art party wes anderson ad leggings officia. Skateboard keytar incididunt gluten-free retro sartorial, single-origin coffee et viral. Art party blog sunt, readymade fugiat 8-bit aesthetic ex echo park fanny pack keytar. Thundercats sustainable labore, mustache adipisicing tattooed dolore aute occaecat velit 8-bit raw denim letterpress. In occaecat freegan, next level single-origin coffee chambray excepteur nihil duis exercitation adipisicing ex sartorial twee squid. You probably haven't heard of them fugiat ea retro eiusmod quis cosby sweater, +1 fap sapiente biodiesel banksy. </p> </dd> - <dt data-toggle="collapse" data-target="#collapseThree" data-parent="#accordion" > - <a href="#">Collapsible Group Item #3</a> + <dt> + <a data-toggle="collapse" data-parent="#accordion" href="#collapseThree"> + Collapsible Group Item #3 + </a> </dt> <dd id="collapseThree" class="collapse"> <p> diff --git a/js/README.md b/js/README.md index 98be75421d..5224d65b7b 100644 --- a/js/README.md +++ b/js/README.md @@ -67,14 +67,14 @@ All events should have an infinitive and past participle form. The infinitive is Data attributes should take the following form: data-*(verb)* - defines main interaction -data-target - defined on controller element (if element interacts with an element other than self) +data-target || href^=# - defined on controller element (if element interacts with an element other than self) data-*(noun)* - defines options for element invocation examples: // control other targets data-toggle="modal" data-target="#foo" - data-toggle="view" data-target="#foo" + data-toggle="collapse" data-target="#foo" data-parent="#foo" // defined on element they control data-spy="scroll" diff --git a/js/bootstrap-collapse.js b/js/bootstrap-collapse.js index 6de3d971a3..629d9b589e 100644 --- a/js/bootstrap-collapse.js +++ b/js/bootstrap-collapse.js @@ -117,9 +117,9 @@ $(function () { $('body').delegate('[data-toggle=collapse]', 'click.collapse.data-api', function ( e ) { var $this = $(this) - , target = $this.attr('data-target') + , target = $this.attr('data-target') || $this.attr('href') , option = $(target).data('collapse') ? 'toggle' : $this.data() - e.preventDefault() + e.preventDefault() $(target).collapse(option) }) }) diff --git a/js/bootstrap-modal.js b/js/bootstrap-modal.js index dab67d1b23..5f543c5537 100644 --- a/js/bootstrap-modal.js +++ b/js/bootstrap-modal.js @@ -192,7 +192,7 @@ $(document).ready(function () { $('body').delegate('[data-toggle="modal"]', 'click.modal.data-api', function ( e ) { var $this = $(this) - , target = $this.attr('data-target') + , target = $this.attr('data-target') || $this.attr('href') , option = $(target).data('modal') ? 'toggle' : $this.data() e.preventDefault() $(target).modal(option) diff --git a/js/bootstrap-scrollspy.js b/js/bootstrap-scrollspy.js index e4bfea4836..fe34019ffc 100644 --- a/js/bootstrap-scrollspy.js +++ b/js/bootstrap-scrollspy.js @@ -28,7 +28,9 @@ var process = $.proxy(this.process, this) this.$scrollElement = $(element).bind('scroll.scroll.data-api', process) - this.selector = (this.$scrollElement.attr('data-target') || '') + ' .nav li > a' + this.selector = (this.$scrollElement.attr('data-target') + || this.$scrollElement.attr('href') + || '') + ' .nav li > a' this.$body = $('body').delegate(this.selector, 'click.scroll.data-api', process) this.refresh() diff --git a/js/bootstrap-tab.js b/js/bootstrap-tab.js new file mode 100644 index 0000000000..ba956cbe86 --- /dev/null +++ b/js/bootstrap-tab.js @@ -0,0 +1,102 @@ +/* ======================================================== + * bootstrap-tabs.js v2.0.0 + * http://twitter.github.com/bootstrap/javascript.html#tabs + * ======================================================== + * Copyright 2011 Twitter, Inc. + * + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + * ======================================================== */ + + +!function( $ ){ + + "use strict" + + /* TAB CLASS DEFINITION + * ==================== */ + + var Tab = function ( element ) { + this.element = $(element) + } + + Tab.prototype = { + + show: function () { + var $this = this.element + , $ul = $this.closest('ul:not(.dropdown-menu)') + , href = $this.attr('data-target') || $this.attr('href') + , previous + , $href + + if ( $this.parent('li').hasClass('active') ) return + + previous = $ul.find('.active a').last()[0] + + $this.trigger({ + type: 'show' + , relatedTarget: previous + }) + + $href = $(href) + + this.activate($this.parent('li'), $ul) + this.activate($href, $href.parent()) + + $this.trigger({ + type: 'shown' + , relatedTarget: previous + }) + } + + , activate: function ( element, container ) { + container + .find('> .active') + .removeClass('active') + .find('> .dropdown-menu > .active') + .removeClass('active') + + element.addClass('active') + + if ( element.parent('.dropdown-menu') ) { + element.closest('li.dropdown').addClass('active') + } + } + } + + + /* TAB PLUGIN DEFINITION + * ===================== */ + + $.fn.tab = function (option) { + return this.each(function () { + var $this = $(this) + , data = $this.data('tab') + if (!data) $this.data('tab', (data = new Tab(this))) + if (typeof option == 'string') data[option]() + }) + } + + $.fn.tab.Tab = Tab + + + /* TAB DATA-API + * ============ */ + + $(document).ready(function () { + $('body').delegate('[data-toggle="tab"], [data-toggle="pill"]', 'click.tab.data-api', function (e) { + e.preventDefault() + $(this).tab('show') + }) + }) + +}( window.jQuery || window.ender ) \ No newline at end of file diff --git a/js/bootstrap-tabs.js b/js/bootstrap-tabs.js deleted file mode 100644 index bd49e130f2..0000000000 --- a/js/bootstrap-tabs.js +++ /dev/null @@ -1,80 +0,0 @@ -/* ======================================================== - * bootstrap-tabs.js v2.0.0 - * http://twitter.github.com/bootstrap/javascript.html#tabs - * ======================================================== - * Copyright 2011 Twitter, Inc. - * - * Licensed under the Apache License, Version 2.0 (the "License"); - * you may not use this file except in compliance with the License. - * You may obtain a copy of the License at - * - * http://www.apache.org/licenses/LICENSE-2.0 - * - * Unless required by applicable law or agreed to in writing, software - * distributed under the License is distributed on an "AS IS" BASIS, - * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. - * See the License for the specific language governing permissions and - * limitations under the License. - * ======================================================== */ - - -!function( $ ){ - - "use strict" - - function activate ( element, container ) { - container - .find('> .active') - .removeClass('active') - .find('> .dropdown-menu > .active') - .removeClass('active') - - element.addClass('active') - - if ( element.parent('.dropdown-menu') ) { - element.closest('li.dropdown').addClass('active') - } - } - - function tab( e ) { - var $this = $(this) - , $ul = $this.closest('ul:not(.dropdown-menu)') - , href = $this.attr('href') - , previous - , $href - - if ( /^#\w+/.test(href) ) { - e.preventDefault() - - if ( $this.parent('li').hasClass('active') ) { - return - } - - previous = $ul.find('.active a').last()[0] - $href = $(href) - - activate($this.parent('li'), $ul) - activate($href, $href.parent()) - - $this.trigger({ - type: 'change' - , relatedTarget: previous - }) - } - } - - - /* TABS/PILLS PLUGIN DEFINITION - * ============================ */ - - $.fn.tabs = $.fn.pills = function ( selector ) { - return this.each(function () { - $(this).delegate(selector || '.tabs li > a, .pills > li > a', 'click', tab) - }) - } - - $(document).ready(function () { - $('body').tabs('ul[data-tabs] li > a, ul[data-pills] > li > a') - }) - -}( window.jQuery || window.ender ) \ No newline at end of file diff --git a/js/bootstrap-transitions.js b/js/bootstrap-transition.js similarity index 100% rename from js/bootstrap-transitions.js rename to js/bootstrap-transition.js -- GitLab From 7f74f11262d9e6430f84a1c0861084b9d33a4053 Mon Sep 17 00:00:00 2001 From: Jacob Thornton <jacobthornton@gmail.com> Date: Sun, 27 Nov 2011 17:09:31 -0800 Subject: [PATCH 099/318] fix heading for js readme... --- js/README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/js/README.md b/js/README.md index 5224d65b7b..362ad4a789 100644 --- a/js/README.md +++ b/js/README.md @@ -1,4 +1,4 @@ -2.0 BOOTSTRAP JS PHILSOPHY +## 2.0 BOOTSTRAP JS PHILSOPHY These are the highlevel design rules which guide the developement of Bootstrap's js plugins. --- -- GitLab From 76f95f4ea2e4e0651e3fc6e3bf0e6872f1cd1b38 Mon Sep 17 00:00:00 2001 From: Jacob Thornton <jacobthornton@gmail.com> Date: Sun, 27 Nov 2011 17:11:31 -0800 Subject: [PATCH 100/318] change even was removed, in favor of show shown --- js/README.md | 1 - 1 file changed, 1 deletion(-) diff --git a/js/README.md b/js/README.md index 362ad4a789..e1f5107c2c 100644 --- a/js/README.md +++ b/js/README.md @@ -57,7 +57,6 @@ All events should have an infinitive and past participle form. The infinitive is show | shown hide | hidden - change | changed --- -- GitLab From f77d0c21df60e2e9c1c4b4d6a1b79e54f18914aa Mon Sep 17 00:00:00 2001 From: Jacob Thornton <jacobthornton@gmail.com> Date: Sun, 27 Nov 2011 17:12:17 -0800 Subject: [PATCH 101/318] turn attribute rules to list --- js/README.md | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/js/README.md b/js/README.md index e1f5107c2c..ba52b59565 100644 --- a/js/README.md +++ b/js/README.md @@ -65,9 +65,9 @@ All events should have an infinitive and past participle form. The infinitive is Data attributes should take the following form: -data-*(verb)* - defines main interaction -data-target || href^=# - defined on controller element (if element interacts with an element other than self) -data-*(noun)* - defines options for element invocation +-data-*(verb)* - defines main interaction +-data-target || href^=# - defined on controller element (if element interacts with an element other than self) +-data-*(noun)* - defines options for element invocation examples: -- GitLab From 7522517b47521da731bf7a598d5e5a71721c4c44 Mon Sep 17 00:00:00 2001 From: Jacob Thornton <jacobthornton@gmail.com> Date: Sun, 27 Nov 2011 17:12:58 -0800 Subject: [PATCH 102/318] derp --- js/README.md | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/js/README.md b/js/README.md index ba52b59565..2655af68e2 100644 --- a/js/README.md +++ b/js/README.md @@ -65,9 +65,9 @@ All events should have an infinitive and past participle form. The infinitive is Data attributes should take the following form: --data-*(verb)* - defines main interaction --data-target || href^=# - defined on controller element (if element interacts with an element other than self) --data-*(noun)* - defines options for element invocation +- data-*(verb)* - defines main interaction +- data-target || href^=# - defined on controller element (if element interacts with an element other than self) +- data-*(noun)* - defines options for element invocation examples: -- GitLab From 7eb340ec589acd56ad960a020969822636c2bc54 Mon Sep 17 00:00:00 2001 From: Jacob Thornton <jacobthornton@gmail.com> Date: Sun, 27 Nov 2011 17:31:12 -0800 Subject: [PATCH 103/318] add code to reset data for collapsed element so that item can be intitialized with correct options --- docs/javascript.html | 24 +++++++++---------- ...bootstrap-alerts.js => bootstrap-alert.js} | 2 +- ...otstrap-buttons.js => bootstrap-button.js} | 0 js/bootstrap-collapse.js | 10 ++++++-- 4 files changed, 21 insertions(+), 15 deletions(-) rename js/{bootstrap-alerts.js => bootstrap-alert.js} (96%) rename js/{bootstrap-buttons.js => bootstrap-button.js} (100%) diff --git a/docs/javascript.html b/docs/javascript.html index 833e6ec026..2db37a9fe1 100644 --- a/docs/javascript.html +++ b/docs/javascript.html @@ -29,14 +29,14 @@ <script src="assets/js/google-code-prettify/prettify.js"></script> <script>$(function () { prettyPrint() })</script> <script src="../js/bootstrap-transition.js"></script> - <script src="../js/bootstrap-alerts.js"></script> + <script src="../js/bootstrap-alert.js"></script> <script src="../js/bootstrap-modal.js"></script> <script src="../js/bootstrap-dropdown.js"></script> <script src="../js/bootstrap-scrollspy.js"></script> <script src="../js/bootstrap-tab.js"></script> <script src="../js/bootstrap-twipsy.js"></script> <script src="../js/bootstrap-popover.js"></script> - <script src="../js/bootstrap-buttons.js"></script> + <script src="../js/bootstrap-button.js"></script> <script src="../js/bootstrap-collapse.js"></script> <script> $(function () { @@ -115,7 +115,7 @@ <td>Our Modal plugin is a <strong>super</strong> slim take on the traditional modal js plugin! We took special care to include only the bare functionality that we require at twitter.</td> </tr> <tr> - <td><a href="./javascript.html#alerts">bootstrap-alerts.js</a></td> + <td><a href="./javascript.html#alert">bootstrap-alert.js</a></td> <td>The alert plugin is a super tiny class for adding close functionality to alerts.</td> </tr> <tr> @@ -139,7 +139,7 @@ <td>The popover plugin provides a simple interface for adding popovers to your application. It extends the <a href="#twipsy">boostrap-twipsy.js</a> plugin, so be sure to grab that file as well when including popovers in your project!</td> </tr> <tr> - <td><a href="./javascript.html#buttons">bootstrap-buttons.js</a></td> + <td><a href="./javascript.html#button">bootstrap-button.js</a></td> <td>This plugin offers additional functionality for managing button state.</td> </tr> <tr> @@ -716,12 +716,12 @@ $('a[data-toggle="tab"]').bind('shown', function (e) { </section> - <!-- Alerts + <!-- Alert ================================================== --> - <section id="alerts"> + <section id="alert"> <div class="page-header"> - <h1>Alerts <small>bootstrap-alerts.js</small></h1> + <h1>Alert <small>bootstrap-alert.js</small></h1> </div> <div class="row"> <div class="span3 columns"> @@ -757,20 +757,20 @@ $('a[data-toggle="tab"]').bind('shown', function (e) { </section> - <!-- Buttons + <!-- Button ================================================== --> - <section id="buttons"> + <section id="button"> <div class="page-header"> - <h1>Buttons <small>bootstrap-buttons.js</small></h1> + <h1>Button <small>bootstrap-button.js</small></h1> </div> <div class="row"> <div class="span3 columns"> <p>This plugin offers additional functionality for managing button state.</p> - <a href="../js/bootstrap-buttons.js" target="_blank" class="btn primary">Download</a> + <a href="../js/bootstrap-button.js" target="_blank" class="btn primary">Download</a> </div> <div class="span9 columns"> - <h3>Using bootstrap-buttons.js</h3> + <h3>Using bootstrap-button.js</h3> <pre class="prettyprint linenums">$('.tabs').button()</pre> <h3>Markup</h3> <p>Data attributes are integral to the button plugin. Check out the example code below for the various markup types.</p> diff --git a/js/bootstrap-alerts.js b/js/bootstrap-alert.js similarity index 96% rename from js/bootstrap-alerts.js rename to js/bootstrap-alert.js index 5f600ba1ff..210512a8b3 100644 --- a/js/bootstrap-alerts.js +++ b/js/bootstrap-alert.js @@ -1,5 +1,5 @@ /* ========================================================== - * bootstrap-alerts.js v2.0.0 + * bootstrap-alert.js v2.0.0 * http://twitter.github.com/bootstrap/javascript.html#alerts * ========================================================== * Copyright 2011 Twitter, Inc. diff --git a/js/bootstrap-buttons.js b/js/bootstrap-button.js similarity index 100% rename from js/bootstrap-buttons.js rename to js/bootstrap-button.js diff --git a/js/bootstrap-collapse.js b/js/bootstrap-collapse.js index 629d9b589e..93f91513e3 100644 --- a/js/bootstrap-collapse.js +++ b/js/bootstrap-collapse.js @@ -42,8 +42,14 @@ , show: function () { var dimension = this.dimension() , scroll = $.camelCase(['scroll', dimension].join('-')) - - this.$parent && this.$parent.find('.in').collapse('hide') + , actives = this.$parent && this.$parent.find('.in') + , hasData + + if (actives && actives.length) { + hasData = actives.data('collapse') + actives.collapse('hide') + hasData || actives.data('collapse', null) + } this.$element[dimension](0) this.transition('addClass', 'show', 'shown') -- GitLab From 1af3596a5e09575d9f1c08e6bd69789baecef90f Mon Sep 17 00:00:00 2001 From: Silumesii Maboshe <silumesii@pencilcasestudios.com> Date: Mon, 28 Nov 2011 08:13:54 +0200 Subject: [PATCH 104/318] Capitalising 'Bootstrap' and abbreviations. Fixing typos. --- README.md | 4 ++-- js/README.md | 16 ++++++++-------- 2 files changed, 10 insertions(+), 10 deletions(-) diff --git a/README.md b/README.md index ad51b16fc1..fd97265840 100644 --- a/README.md +++ b/README.md @@ -18,7 +18,7 @@ Here's what the LESS version looks like: <script src="less.js" type="text/javascript"></script> ``` -Or if you prefer, the standard css way: +Or if you prefer, the standard CSS way: ``` html <link rel="stylesheet" type="text/css" href="bootstrap.css"> @@ -72,7 +72,7 @@ http://groups.google.com/group/twitter-bootstrap Developers ---------- -We have included a makefile with convenience methods for working with the bootstrap library. +We have included a makefile with convenience methods for working with the Bootstrap library. + **build** - `make build` This will run the less compiler on the bootstrap lib and generate a bootstrap.css and bootstrap.min.css file. diff --git a/js/README.md b/js/README.md index 2655af68e2..2eef9e7357 100644 --- a/js/README.md +++ b/js/README.md @@ -1,13 +1,13 @@ -## 2.0 BOOTSTRAP JS PHILSOPHY -These are the highlevel design rules which guide the developement of Bootstrap's js plugins. +## 2.0 BOOTSTRAP JS PHILOSOPHY +These are the high-level design rules which guide the development of Bootstrap's JS plugins. --- ### DATA-ATTRIBUTE API -We believe you should be able to use all plugins provided by bootstrap purely through the markup api without writing a single line of javascript. +We believe you should be able to use all plugins provided by Bootstrap purely through the markup API without writing a single line of javascript. -We acknoledge that this isn't always the most performant and sometimes it may be desirable to turn this functionality off altogether. Therefore, as of 2.0 we provide the ability to disable the data attribute api by unbinding all events on the body namespaced with `'data-api'`. This looks like this: +We acknowledge that this isn't always the most performant and sometimes it may be desirable to turn this functionality off altogether. Therefore, as of 2.0 we provide the ability to disable the data attribute API by unbinding all events on the body namespaced with `'data-api'`. This looks like this: $('body').unbind('.data-api') @@ -19,13 +19,13 @@ To target a specific plugin, just include the plugins name as a namespace along ### PROGRAMATIC API -We also believe you should be able to use all plugins provided by bootstrap purely through the JS api. +We also believe you should be able to use all plugins provided by Bootstrap purely through the JS API. -All pubilc APIs should be a single, chainable method, and return the collection acted upon. +All public APIs should be a single, chainable method, and return the collection acted upon. $(".btn.danger").button("toggle").addClass("fat") -All methods should accept an optional options object, a string which targets a particular method, or null which innitiates the default behavior: +All methods should accept an optional options object, a string which targets a particular method, or null which initiates the default behavior: $("#myModal").modal() // initialized with defaults @@ -39,7 +39,7 @@ All plugins should have a default object which can be modified to effect all ins $.fn.modal.defaults = { … } -An options definiton should take the following form: +An options definition should take the following form: *noun*: *adjective* - describes or modifies a quality of an instance -- GitLab From d48027d49567c2d38211c357d6fb8d6a5a9e8a7b Mon Sep 17 00:00:00 2001 From: Jeff Adams <jeff@tinyfly.com> Date: Tue, 29 Nov 2011 11:12:32 -0600 Subject: [PATCH 105/318] add input width calculation fix from #408 to the 2.0 branch --- bootstrap.css | 32 ++++++++++++++++---------------- bootstrap.min.css | 30 +++++++++++++++--------------- lib/forms.less | 2 +- 3 files changed, 32 insertions(+), 32 deletions(-) diff --git a/bootstrap.css b/bootstrap.css index 4c4d85aa9e..271c35afc9 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 Nov 25 21:33:58 PST 2011 + * Date: Tue Nov 29 11:11:41 CST 2011 */ html, body { margin: 0; @@ -657,7 +657,7 @@ select.span2, .uneditable-input.span2 { display: inline-block; float: none; - width: 150px; + width: 130px; margin-left: 0; } input.span3, @@ -666,7 +666,7 @@ select.span3, .uneditable-input.span3 { display: inline-block; float: none; - width: 250px; + width: 210px; margin-left: 0; } input.span4, @@ -675,7 +675,7 @@ select.span4, .uneditable-input.span4 { display: inline-block; float: none; - width: 350px; + width: 290px; margin-left: 0; } input.span5, @@ -684,7 +684,7 @@ select.span5, .uneditable-input.span5 { display: inline-block; float: none; - width: 450px; + width: 370px; margin-left: 0; } input.span6, @@ -693,7 +693,7 @@ select.span6, .uneditable-input.span6 { display: inline-block; float: none; - width: 550px; + width: 450px; margin-left: 0; } input.span7, @@ -702,7 +702,7 @@ select.span7, .uneditable-input.span7 { display: inline-block; float: none; - width: 650px; + width: 530px; margin-left: 0; } input.span8, @@ -711,7 +711,7 @@ select.span8, .uneditable-input.span8 { display: inline-block; float: none; - width: 750px; + width: 610px; margin-left: 0; } input.span9, @@ -720,7 +720,7 @@ select.span9, .uneditable-input.span9 { display: inline-block; float: none; - width: 850px; + width: 690px; margin-left: 0; } input.span10, @@ -729,7 +729,7 @@ select.span10, .uneditable-input.span10 { display: inline-block; float: none; - width: 950px; + width: 770px; margin-left: 0; } input.span11, @@ -738,7 +738,7 @@ select.span11, .uneditable-input.span11 { display: inline-block; float: none; - width: 1050px; + width: 850px; margin-left: 0; } input.span12, @@ -747,7 +747,7 @@ select.span12, .uneditable-input.span12 { display: inline-block; float: none; - width: 1150px; + width: 930px; margin-left: 0; } input.span13, @@ -756,7 +756,7 @@ select.span13, .uneditable-input.span13 { display: inline-block; float: none; - width: 1250px; + width: 1010px; margin-left: 0; } input.span14, @@ -765,7 +765,7 @@ select.span14, .uneditable-input.span14 { display: inline-block; float: none; - width: 1350px; + width: 1090px; margin-left: 0; } input.span15, @@ -774,7 +774,7 @@ select.span15, .uneditable-input.span15 { display: inline-block; float: none; - width: 1450px; + width: 1170px; margin-left: 0; } input.span16, @@ -783,7 +783,7 @@ select.span16, .uneditable-input.span16 { display: inline-block; float: none; - width: 1550px; + width: 1250px; margin-left: 0; } input[disabled], diff --git a/bootstrap.min.css b/bootstrap.min.css index 2a802744cf..4824041102 100644 --- a/bootstrap.min.css +++ b/bootstrap.min.css @@ -111,21 +111,21 @@ input[type=file]:focus,input[type=checkbox]:focus,select:focus{-webkit-box-shado .input-xlarge{width:270px;} .input-xxlarge{width:530px;} input.span1,textarea.span1,select.span1,.uneditable-input.span1{display:inline-block;float:none;width:50px;margin-left:0;} -input.span2,textarea.span2,select.span2,.uneditable-input.span2{display:inline-block;float:none;width:150px;margin-left:0;} -input.span3,textarea.span3,select.span3,.uneditable-input.span3{display:inline-block;float:none;width:250px;margin-left:0;} -input.span4,textarea.span4,select.span4,.uneditable-input.span4{display:inline-block;float:none;width:350px;margin-left:0;} -input.span5,textarea.span5,select.span5,.uneditable-input.span5{display:inline-block;float:none;width:450px;margin-left:0;} -input.span6,textarea.span6,select.span6,.uneditable-input.span6{display:inline-block;float:none;width:550px;margin-left:0;} -input.span7,textarea.span7,select.span7,.uneditable-input.span7{display:inline-block;float:none;width:650px;margin-left:0;} -input.span8,textarea.span8,select.span8,.uneditable-input.span8{display:inline-block;float:none;width:750px;margin-left:0;} -input.span9,textarea.span9,select.span9,.uneditable-input.span9{display:inline-block;float:none;width:850px;margin-left:0;} -input.span10,textarea.span10,select.span10,.uneditable-input.span10{display:inline-block;float:none;width:950px;margin-left:0;} -input.span11,textarea.span11,select.span11,.uneditable-input.span11{display:inline-block;float:none;width:1050px;margin-left:0;} -input.span12,textarea.span12,select.span12,.uneditable-input.span12{display:inline-block;float:none;width:1150px;margin-left:0;} -input.span13,textarea.span13,select.span13,.uneditable-input.span13{display:inline-block;float:none;width:1250px;margin-left:0;} -input.span14,textarea.span14,select.span14,.uneditable-input.span14{display:inline-block;float:none;width:1350px;margin-left:0;} -input.span15,textarea.span15,select.span15,.uneditable-input.span15{display:inline-block;float:none;width:1450px;margin-left:0;} -input.span16,textarea.span16,select.span16,.uneditable-input.span16{display:inline-block;float:none;width:1550px;margin-left:0;} +input.span2,textarea.span2,select.span2,.uneditable-input.span2{display:inline-block;float:none;width:130px;margin-left:0;} +input.span3,textarea.span3,select.span3,.uneditable-input.span3{display:inline-block;float:none;width:210px;margin-left:0;} +input.span4,textarea.span4,select.span4,.uneditable-input.span4{display:inline-block;float:none;width:290px;margin-left:0;} +input.span5,textarea.span5,select.span5,.uneditable-input.span5{display:inline-block;float:none;width:370px;margin-left:0;} +input.span6,textarea.span6,select.span6,.uneditable-input.span6{display:inline-block;float:none;width:450px;margin-left:0;} +input.span7,textarea.span7,select.span7,.uneditable-input.span7{display:inline-block;float:none;width:530px;margin-left:0;} +input.span8,textarea.span8,select.span8,.uneditable-input.span8{display:inline-block;float:none;width:610px;margin-left:0;} +input.span9,textarea.span9,select.span9,.uneditable-input.span9{display:inline-block;float:none;width:690px;margin-left:0;} +input.span10,textarea.span10,select.span10,.uneditable-input.span10{display:inline-block;float:none;width:770px;margin-left:0;} +input.span11,textarea.span11,select.span11,.uneditable-input.span11{display:inline-block;float:none;width:850px;margin-left:0;} +input.span12,textarea.span12,select.span12,.uneditable-input.span12{display:inline-block;float:none;width:930px;margin-left:0;} +input.span13,textarea.span13,select.span13,.uneditable-input.span13{display:inline-block;float:none;width:1010px;margin-left:0;} +input.span14,textarea.span14,select.span14,.uneditable-input.span14{display:inline-block;float:none;width:1090px;margin-left:0;} +input.span15,textarea.span15,select.span15,.uneditable-input.span15{display:inline-block;float:none;width:1170px;margin-left:0;} +input.span16,textarea.span16,select.span16,.uneditable-input.span16{display:inline-block;float:none;width:1250px;margin-left:0;} input[disabled],select[disabled],textarea[disabled],input[readonly],select[readonly],textarea[readonly]{background-color:#f5f5f5;border-color:#ddd;cursor:not-allowed;} form .clearfix.error>label,form .clearfix.error .help-block,form .clearfix.error .help-inline{color:#b94a48;} form .clearfix.error input,form .clearfix.error textarea{color:#b94a48;border-color:#ee5f5b;}form .clearfix.error input:focus,form .clearfix.error textarea:focus{border-color:#e9322d;-webkit-box-shadow:0 0 6px #f8b9b7;-moz-box-shadow:0 0 6px #f8b9b7;box-shadow:0 0 6px #f8b9b7;} diff --git a/lib/forms.less b/lib/forms.less index 39c2937999..5de55e727f 100644 --- a/lib/forms.less +++ b/lib/forms.less @@ -145,7 +145,7 @@ select:focus { .formColumns(@columnSpan: 1) { display: inline-block; float: none; - width: ((@gridColumnWidth - 10) * @columnSpan) + ((@gridColumnWidth - 10) * (@columnSpan - 1)); + width: ((@gridColumnWidth) * @columnSpan) + (@gridGutterWidth * (@columnSpan - 1)) - 10; margin-left: 0; } input, -- GitLab From 1da19bf65f9affec06ba6e1f6e5f545a8e2ea457 Mon Sep 17 00:00:00 2001 From: Jeff Adams <jeff@tinyfly.com> Date: Tue, 29 Nov 2011 14:06:31 -0600 Subject: [PATCH 106/318] scope form feedback states to .control-group instead of unused .clearfix --- bootstrap.css | 26 +++++++++++++------------- bootstrap.min.css | 18 +++++++++--------- lib/forms.less | 6 +++--- 3 files changed, 25 insertions(+), 25 deletions(-) diff --git a/bootstrap.css b/bootstrap.css index 4c4d85aa9e..1fa314cd4f 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 Nov 25 21:33:58 PST 2011 + * Date: Tue Nov 29 14:05:43 CST 2011 */ html, body { margin: 0; @@ -796,56 +796,56 @@ textarea[readonly] { border-color: #ddd; cursor: not-allowed; } -form .clearfix.error > label, form .clearfix.error .help-block, form .clearfix.error .help-inline { +.control-group.error > label, .control-group.error .help-block, .control-group.error .help-inline { color: #b94a48; } -form .clearfix.error input, form .clearfix.error textarea { +.control-group.error input, .control-group.error textarea { color: #b94a48; border-color: #ee5f5b; } -form .clearfix.error input:focus, form .clearfix.error textarea:focus { +.control-group.error input:focus, .control-group.error textarea:focus { border-color: #e9322d; -webkit-box-shadow: 0 0 6px #f8b9b7; -moz-box-shadow: 0 0 6px #f8b9b7; box-shadow: 0 0 6px #f8b9b7; } -form .clearfix.error .input-prepend .add-on, form .clearfix.error .input-append .add-on { +.control-group.error .input-prepend .add-on, .control-group.error .input-append .add-on { color: #b94a48; background-color: #fce6e6; border-color: #b94a48; } -form .clearfix.warning > label, form .clearfix.warning .help-block, form .clearfix.warning .help-inline { +.control-group.warning > label, .control-group.warning .help-block, .control-group.warning .help-inline { color: #c09853; } -form .clearfix.warning input, form .clearfix.warning textarea { +.control-group.warning input, .control-group.warning textarea { color: #c09853; border-color: #ccae64; } -form .clearfix.warning input:focus, form .clearfix.warning textarea:focus { +.control-group.warning input:focus, .control-group.warning textarea:focus { border-color: #be9a3f; -webkit-box-shadow: 0 0 6px #e5d6b1; -moz-box-shadow: 0 0 6px #e5d6b1; box-shadow: 0 0 6px #e5d6b1; } -form .clearfix.warning .input-prepend .add-on, form .clearfix.warning .input-append .add-on { +.control-group.warning .input-prepend .add-on, .control-group.warning .input-append .add-on { color: #c09853; background-color: #d2b877; border-color: #c09853; } -form .clearfix.success > label, form .clearfix.success .help-block, form .clearfix.success .help-inline { +.control-group.success > label, .control-group.success .help-block, .control-group.success .help-inline { color: #468847; } -form .clearfix.success input, form .clearfix.success textarea { +.control-group.success input, .control-group.success textarea { color: #468847; border-color: #57a957; } -form .clearfix.success input:focus, form .clearfix.success textarea:focus { +.control-group.success input:focus, .control-group.success textarea:focus { border-color: #458845; -webkit-box-shadow: 0 0 6px #9acc9a; -moz-box-shadow: 0 0 6px #9acc9a; box-shadow: 0 0 6px #9acc9a; } -form .clearfix.success .input-prepend .add-on, form .clearfix.success .input-append .add-on { +.control-group.success .input-prepend .add-on, .control-group.success .input-append .add-on { color: #468847; background-color: #bcddbc; border-color: #468847; diff --git a/bootstrap.min.css b/bootstrap.min.css index 2a802744cf..7eb899bc19 100644 --- a/bootstrap.min.css +++ b/bootstrap.min.css @@ -127,15 +127,15 @@ input.span14,textarea.span14,select.span14,.uneditable-input.span14{display:inli input.span15,textarea.span15,select.span15,.uneditable-input.span15{display:inline-block;float:none;width:1450px;margin-left:0;} input.span16,textarea.span16,select.span16,.uneditable-input.span16{display:inline-block;float:none;width:1550px;margin-left:0;} input[disabled],select[disabled],textarea[disabled],input[readonly],select[readonly],textarea[readonly]{background-color:#f5f5f5;border-color:#ddd;cursor:not-allowed;} -form .clearfix.error>label,form .clearfix.error .help-block,form .clearfix.error .help-inline{color:#b94a48;} -form .clearfix.error input,form .clearfix.error textarea{color:#b94a48;border-color:#ee5f5b;}form .clearfix.error input:focus,form .clearfix.error textarea:focus{border-color:#e9322d;-webkit-box-shadow:0 0 6px #f8b9b7;-moz-box-shadow:0 0 6px #f8b9b7;box-shadow:0 0 6px #f8b9b7;} -form .clearfix.error .input-prepend .add-on,form .clearfix.error .input-append .add-on{color:#b94a48;background-color:#fce6e6;border-color:#b94a48;} -form .clearfix.warning>label,form .clearfix.warning .help-block,form .clearfix.warning .help-inline{color:#c09853;} -form .clearfix.warning input,form .clearfix.warning textarea{color:#c09853;border-color:#ccae64;}form .clearfix.warning input:focus,form .clearfix.warning textarea:focus{border-color:#be9a3f;-webkit-box-shadow:0 0 6px #e5d6b1;-moz-box-shadow:0 0 6px #e5d6b1;box-shadow:0 0 6px #e5d6b1;} -form .clearfix.warning .input-prepend .add-on,form .clearfix.warning .input-append .add-on{color:#c09853;background-color:#d2b877;border-color:#c09853;} -form .clearfix.success>label,form .clearfix.success .help-block,form .clearfix.success .help-inline{color:#468847;} -form .clearfix.success input,form .clearfix.success textarea{color:#468847;border-color:#57a957;}form .clearfix.success input:focus,form .clearfix.success textarea:focus{border-color:#458845;-webkit-box-shadow:0 0 6px #9acc9a;-moz-box-shadow:0 0 6px #9acc9a;box-shadow:0 0 6px #9acc9a;} -form .clearfix.success .input-prepend .add-on,form .clearfix.success .input-append .add-on{color:#468847;background-color:#bcddbc;border-color:#468847;} +.control-group.error>label,.control-group.error .help-block,.control-group.error .help-inline{color:#b94a48;} +.control-group.error input,.control-group.error textarea{color:#b94a48;border-color:#ee5f5b;}.control-group.error input:focus,.control-group.error textarea:focus{border-color:#e9322d;-webkit-box-shadow:0 0 6px #f8b9b7;-moz-box-shadow:0 0 6px #f8b9b7;box-shadow:0 0 6px #f8b9b7;} +.control-group.error .input-prepend .add-on,.control-group.error .input-append .add-on{color:#b94a48;background-color:#fce6e6;border-color:#b94a48;} +.control-group.warning>label,.control-group.warning .help-block,.control-group.warning .help-inline{color:#c09853;} +.control-group.warning input,.control-group.warning textarea{color:#c09853;border-color:#ccae64;}.control-group.warning input:focus,.control-group.warning textarea:focus{border-color:#be9a3f;-webkit-box-shadow:0 0 6px #e5d6b1;-moz-box-shadow:0 0 6px #e5d6b1;box-shadow:0 0 6px #e5d6b1;} +.control-group.warning .input-prepend .add-on,.control-group.warning .input-append .add-on{color:#c09853;background-color:#d2b877;border-color:#c09853;} +.control-group.success>label,.control-group.success .help-block,.control-group.success .help-inline{color:#468847;} +.control-group.success input,.control-group.success textarea{color:#468847;border-color:#57a957;}.control-group.success input:focus,.control-group.success textarea:focus{border-color:#458845;-webkit-box-shadow:0 0 6px #9acc9a;-moz-box-shadow:0 0 6px #9acc9a;box-shadow:0 0 6px #9acc9a;} +.control-group.success .input-prepend .add-on,.control-group.success .input-append .add-on{color:#468847;background-color:#bcddbc;border-color:#468847;} .form-actions{padding:17px 20px 18px;margin-top:18px;margin-bottom:18px;background-color:#f5f5f5;border-top:1px solid #ddd;} .uneditable-input{display:block;background-color:#ffffff;border-color:#eee;-webkit-box-shadow:inset 0 1px 2px rgba(0, 0, 0, 0.025);-moz-box-shadow:inset 0 1px 2px rgba(0, 0, 0, 0.025);box-shadow:inset 0 1px 2px rgba(0, 0, 0, 0.025);cursor:not-allowed;} :-moz-placeholder{color:#bfbfbf;} diff --git a/lib/forms.less b/lib/forms.less index 39c2937999..23cdb28c9c 100644 --- a/lib/forms.less +++ b/lib/forms.less @@ -220,15 +220,15 @@ textarea[readonly] { } } // Error -form .clearfix.error { +.control-group.error { .formFieldState(#b94a48, #ee5f5b, lighten(#ee5f5b, 30%)); } // Warning -form .clearfix.warning { +.control-group.warning { .formFieldState(#c09853, #ccae64, lighten(#CCAE64, 5%)); } // Success -form .clearfix.success { +.control-group.success { .formFieldState(#468847, #57a957, lighten(#57a957, 30%)); } -- GitLab From b36df463108e2e4df8c389a06f577823564788d9 Mon Sep 17 00:00:00 2001 From: Mark Otto <markdotto@gmail.com> Date: Tue, 29 Nov 2011 22:35:03 -0800 Subject: [PATCH 107/318] misc docs updates, revamped tables CSS save for grid columns and tablesorter options --- bootstrap.css | 538 +++++++++++++++++++-------------------- bootstrap.min.css | 195 ++++++-------- docs/assets/css/docs.css | 46 +++- docs/base-css.html | 4 +- docs/index.html | 1 + docs/scaffolding.html | 8 +- lib/tables.less | 96 ++++--- 7 files changed, 428 insertions(+), 460 deletions(-) diff --git a/bootstrap.css b/bootstrap.css index e8b9d2d530..87e12fca0b 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: Thu Nov 17 00:52:01 PST 2011 + * Date: Tue Nov 29 22:34:51 PST 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). @@ -118,9 +118,9 @@ audio:not([controls]) { display: none; } sub, sup { + position: relative; font-size: 75%; line-height: 0; - position: relative; vertical-align: baseline; } sup { @@ -137,18 +137,18 @@ button, input, select, textarea { - font-size: 100%; margin: 0; + font-size: 100%; vertical-align: baseline; *vertical-align: middle; } button, input { - line-height: normal; *overflow: visible; + line-height: normal; } button::-moz-focus-inner, input::-moz-focus-inner { - border: 0; padding: 0; + border: 0; } button, input[type="button"], @@ -181,12 +181,12 @@ textarea { * Basic and global styles for generating a grid system, structural layout, and page templates * ------------------------------------------------------------------------------------------- */ body { - background-color: #ffffff; margin: 0; font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; font-size: 13px; line-height: 18px; color: #404040; + background-color: #ffffff; } .container { width: 940px; @@ -196,9 +196,9 @@ body { } .container:before, .container:after { display: table; + *display: inline; content: ""; zoom: 1; - *display: inline; } .container:after { clear: both; @@ -212,9 +212,9 @@ body { } .fluid-container:before, .fluid-container:after { display: table; + *display: inline; content: ""; zoom: 1; - *display: inline; } .fluid-container:after { clear: both; @@ -236,10 +236,10 @@ body { margin-right: 240px; } a { + font-weight: inherit; + line-height: inherit; color: #0069d6; text-decoration: none; - line-height: inherit; - font-weight: inherit; } a:hover { color: #00438a; @@ -263,9 +263,9 @@ a:hover { } .row:before, .row:after { display: table; + *display: inline; content: ""; zoom: 1; - *display: inline; } .row:after { clear: both; @@ -348,10 +348,10 @@ a:hover { * Headings, body text, lists, code, and more for a versatile and durable typography system * ---------------------------------------------------------------------------------------- */ p { + margin-bottom: 9px; font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; font-size: 13px; line-height: 18px; - margin-bottom: 9px; } p small { font-size: 11px; @@ -433,8 +433,8 @@ li { color: #404040; } ul.unstyled { - list-style: none; margin-left: 0; + list-style: none; } dl { margin-bottom: 18px; @@ -472,15 +472,15 @@ abbr { cursor: help; } blockquote { + padding-left: 15px; margin-bottom: 18px; border-left: 5px solid #eee; - padding-left: 15px; } blockquote p { + margin-bottom: 0; font-size: 300; font-weight: 16px; line-height: 22.5px; - margin-bottom: 0; } blockquote small { display: block; @@ -498,8 +498,8 @@ blockquote.pull-right p, blockquote.pull-right small { } address { display: block; - line-height: 18px; margin-bottom: 18px; + line-height: 18px; } code, pre { padding: 0 3px 2px; @@ -511,16 +511,16 @@ code, pre { border-radius: 3px; } code { - background-color: #fee9cc; padding: 1px 3px; + background-color: #fee9cc; } pre { - background-color: #f5f5f5; display: block; padding: 8.5px; margin: 0 0 9px; - line-height: 18px; font-size: 12px; + line-height: 18px; + background-color: #f5f5f5; border: 1px solid #ccc; border: 1px solid rgba(0, 0, 0, 0.15); -webkit-border-radius: 3px; @@ -593,11 +593,11 @@ input[type=checkbox], input[type=radio] { cursor: pointer; } input[type=file] { - background-color: #ffffff; - background-color: initial; padding: initial; - border: initial; line-height: initial; + border: initial; + background-color: #ffffff; + background-color: initial; -webkit-box-shadow: none; -moz-box-shadow: none; box-shadow: none; @@ -608,34 +608,34 @@ input[type=button], input[type=reset], input[type=submit] { } select, input[type=file] { height: 27px; - line-height: 27px; *margin-top: 4px; /* For IE7, add top margin to align select with labels */ + line-height: 27px; } select[multiple] { - background-color: #ffffff; height: inherit; + background-color: #ffffff; } textarea { height: auto; } input, textarea { + -webkit-box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.1); + -moz-box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.1); + box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.1); -webkit-transition: border linear 0.2s, box-shadow linear 0.2s; -moz-transition: border linear 0.2s, box-shadow linear 0.2s; -ms-transition: border linear 0.2s, box-shadow linear 0.2s; -o-transition: border linear 0.2s, box-shadow linear 0.2s; transition: border linear 0.2s, box-shadow linear 0.2s; - -webkit-box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.1); - -moz-box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.1); - box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.1); } input:focus, textarea:focus { - outline: 0; border-color: rgba(82, 168, 236, 0.8); -webkit-box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.1), 0 0 8px rgba(82, 168, 236, 0.6); -moz-box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.1), 0 0 8px rgba(82, 168, 236, 0.6); box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.1), 0 0 8px rgba(82, 168, 236, 0.6); + outline: 0; } input[type=file]:focus, input[type=checkbox]:focus, select:focus { -webkit-box-shadow: none; @@ -877,8 +877,8 @@ form .clearfix.success .input-prepend .add-on, form .clearfix.success .input-app border-top: 1px solid #ddd; } .uneditable-input { - background-color: #ffffff; display: block; + background-color: #ffffff; border-color: #eee; -webkit-box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.025); -moz-box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.025); @@ -897,14 +897,14 @@ form .clearfix.success .input-prepend .add-on, form .clearfix.success .input-app color: #bfbfbf; } .help-inline { - display: inline; - padding-left: 5px; *position: relative; /* IE6-7 */ *top: -5px; /* IE6-7 */ + display: inline; + padding-left: 5px; } .help-block { display: block; @@ -932,27 +932,27 @@ form .clearfix.success .input-prepend .add-on, form .clearfix.success .input-app } .input-prepend .add-on, .input-append .add-on { position: relative; - background: #f5f5f5; - border: 1px solid #ccc; z-index: 2; float: left; display: block; width: auto; min-width: 16px; height: 18px; - padding: 4px 4px 4px 5px; margin-right: -1px; + padding: 4px 4px 4px 5px; font-weight: normal; line-height: 18px; color: #bfbfbf; text-align: center; text-shadow: 0 1px 0 #ffffff; + background-color: #f5f5f5; + border: 1px solid #ccc; -webkit-border-radius: 3px 0 0 3px; -moz-border-radius: 3px 0 0 3px; border-radius: 3px 0 0 3px; } .input-prepend .active, .input-append .active { - background: #a9dba9; + background-color: #a9dba9; border-color: #46a546; } .input-prepend .add-on { @@ -967,11 +967,11 @@ form .clearfix.success .input-prepend .add-on, form .clearfix.success .input-app border-radius: 3px 0 0 3px; } .input-append .add-on { + margin-right: 0; + margin-left: -1px; -webkit-border-radius: 0 3px 3px 0; -moz-border-radius: 0 3px 3px 0; border-radius: 0 3px 3px 0; - margin-right: 0; - margin-left: -1px; } .search-form .search-query { -webkit-border-radius: 14px; @@ -1005,43 +1005,38 @@ form .clearfix.success .input-prepend .add-on, form .clearfix.success .input-app * ---------------------------------------- */ table { width: 100%; - padding: 0; margin-bottom: 18px; - font-size: 13px; - border-collapse: collapse; } -table th, table td { - padding: 10px 10px 9px; +th, td { + padding: 8px; line-height: 18px; text-align: left; + border-bottom: 1px solid #ddd; } -table th { - padding-top: 9px; +th { font-weight: bold; - vertical-align: middle; + vertical-align: bottom; } -table td { +td { vertical-align: top; - border-top: 1px solid #ddd; } -table tbody th { - border-top: 1px solid #ddd; - vertical-align: top; +tbody tr:last-child th, tbody tr:last-child td { + border-bottom: 0; } .condensed-table th, .condensed-table td { - padding: 5px 5px 4px; + padding: 4px 5px; } .bordered-table { border: 1px solid #ddd; border-collapse: separate; - *border-collapse: collapse; - /* IE7, collapse table to remove spacing */ - -webkit-border-radius: 4px; -moz-border-radius: 4px; border-radius: 4px; } -.bordered-table th + th, .bordered-table td + td, .bordered-table th + td { +.bordered-table th + th, +.bordered-table td + td, +.bordered-table th + td, +.bordered-table td + th { border-left: 1px solid #ddd; } .bordered-table thead:first-child tr:first-child th:first-child, .bordered-table tbody:first-child tr:first-child td:first-child { @@ -1054,153 +1049,151 @@ table tbody th { -moz-border-radius: 0 4px 0 0; border-radius: 0 4px 0 0; } -.bordered-table tbody tr:last-child td:first-child { +.bordered-table thead:last-child tr:last-child th:first-child, .bordered-table tbody:last-child tr:last-child td:first-child { -webkit-border-radius: 0 0 0 4px; -moz-border-radius: 0 0 0 4px; border-radius: 0 0 0 4px; } -.bordered-table tbody tr:last-child td:last-child { +.bordered-table thead:last-child tr:last-child th:last-child, .bordered-table tbody:last-child tr:last-child td:last-child { -webkit-border-radius: 0 0 4px 0; -moz-border-radius: 0 0 4px 0; border-radius: 0 0 4px 0; } -table .span1 { - width: 40px; -} -table .span2 { - width: 120px; -} -table .span3 { - width: 200px; -} -table .span4 { - width: 280px; -} -table .span5 { - width: 360px; -} -table .span6 { - width: 440px; -} -table .span7 { - width: 520px; -} -table .span8 { - width: 600px; -} -table .span9 { - width: 680px; -} -table .span10 { - width: 760px; -} -table .span11 { - width: 840px; -} -table .span12 { - width: 920px; -} -table .span13 { - width: 1000px; -} -table .span14 { - width: 1080px; -} -table .span15 { - width: 1160px; -} -table .span16 { - width: 1240px; -} .striped-table tbody tr:nth-child(odd) td, .striped-table tbody tr:nth-child(odd) th { background-color: #f9f9f9; } -.striped-table tbody tr:hover td, .striped-table tbody tr:hover th { - background-color: #f5f5f5; -} -table .header { - cursor: pointer; -} -table .header:after { - content: ""; - float: right; - margin-top: 7px; - border-width: 0 4px 4px; - border-style: solid; - border-color: #000 transparent; - visibility: hidden; -} -table .headerSortUp, table .headerSortDown { - background-color: rgba(141, 192, 219, 0.25); - text-shadow: 0 1px 1px rgba(255, 255, 255, 0.75); -} -table .header:hover:after { - visibility: visible; -} -table .headerSortDown:after, table .headerSortDown:hover:after { - visibility: visible; - filter: alpha(opacity=60); - -khtml-opacity: 0.6; - -moz-opacity: 0.6; - opacity: 0.6; -} -table .headerSortUp:after { - border-bottom: none; - border-left: 4px solid transparent; - border-right: 4px solid transparent; - border-top: 4px solid #000; - visibility: visible; - -webkit-box-shadow: none; - -moz-box-shadow: none; - box-shadow: none; - filter: alpha(opacity=60); - -khtml-opacity: 0.6; - -moz-opacity: 0.6; - opacity: 0.6; -} -table .blue { - color: #049cdb; - border-bottom-color: #049cdb; -} -table .headerSortUp.blue, table .headerSortDown.blue { - background-color: #ade6fe; -} -table .green { - color: #46a546; - border-bottom-color: #46a546; -} -table .headerSortUp.green, table .headerSortDown.green { - background-color: #cdeacd; -} -table .red { - color: #9d261d; - border-bottom-color: #9d261d; -} -table .headerSortUp.red, table .headerSortDown.red { - background-color: #f4c8c5; -} -table .yellow { - color: #ffc40d; - border-bottom-color: #ffc40d; -} -table .headerSortUp.yellow, table .headerSortDown.yellow { - background-color: #fff6d9; -} -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; +/* +// ---------------- + +// This is a duplication of the main grid .columns() mixin, but subtracts 20px to account for input padding and border +.tableColumns(@columnSpan: 1) { + width: ((@gridColumnWidth - 20) * @columnSpan) + ((@gridColumnWidth - 20) * (@columnSpan - 1)); } -table .headerSortUp.purple, table .headerSortDown.purple { - background-color: #e2d5f0; +table { + // Default columns + .span1 { .tableColumns(1); } + .span2 { .tableColumns(2); } + .span3 { .tableColumns(3); } + .span4 { .tableColumns(4); } + .span5 { .tableColumns(5); } + .span6 { .tableColumns(6); } + .span7 { .tableColumns(7); } + .span8 { .tableColumns(8); } + .span9 { .tableColumns(9); } + .span10 { .tableColumns(10); } + .span11 { .tableColumns(11); } + .span12 { .tableColumns(12); } + .span13 { .tableColumns(13); } + .span14 { .tableColumns(14); } + .span15 { .tableColumns(15); } + .span16 { .tableColumns(16); } } -/* Patterns.less + + +// TABLESORTER +// ----------- + +table { + // Tablesorting styles w/ jQuery plugin + .header { + cursor: pointer; + &:after { + float: right; + margin-top: 7px; + border-width: 0 4px 4px; + border-style: solid; + border-color: #000 transparent; + content: ""; + visibility: hidden; + } + } + // Style the sorted column headers (THs) + .headerSortUp, + .headerSortDown { + text-shadow: 0 1px 1px rgba(255,255,255,.75); + background-color: rgba(141,192,219,.25); + } + // Style the ascending (reverse alphabetical) column header + .header:hover { + &:after { + visibility: visible; + } + } + // Style the descending (alphabetical) column header + .headerSortDown, + .headerSortDown:hover { + &:after { + visibility: visible; + .opacity(60); + } + } + // Style the ascending (reverse alphabetical) column header + .headerSortUp { + &:after { + border-bottom: none; + border-left: 4px solid transparent; + border-right: 4px solid transparent; + border-top: 4px solid #000; + visibility:visible; + .box-shadow(none); //can't add boxshadow to downward facing arrow :( + .opacity(60); + } + } + // Blue Table Headings + .blue { + color: @blue; + border-bottom-color: @blue; + } + .headerSortUp.blue, + .headerSortDown.blue { + background-color: lighten(@blue, 40%); + } + // Green Table Headings + .green { + color: @green; + border-bottom-color: @green; + } + .headerSortUp.green, + .headerSortDown.green { + background-color: lighten(@green, 40%); + } + // Red Table Headings + .red { + color: @red; + border-bottom-color: @red; + } + .headerSortUp.red, + .headerSortDown.red { + background-color: lighten(@red, 50%); + } + // Yellow Table Headings + .yellow { + color: @yellow; + border-bottom-color: @yellow; + } + .headerSortUp.yellow, + .headerSortDown.yellow { + background-color: lighten(@yellow, 40%); + } + // Orange Table Headings + .orange { + color: @orange; + border-bottom-color: @orange; + } + .headerSortUp.orange, + .headerSortDown.orange { + background-color: lighten(@orange, 40%); + } + // Purple Table Headings + .purple { + color: @purple; + border-bottom-color: @purple; + } + .headerSortUp.purple, + .headerSortDown.purple { + background-color: lighten(@purple, 40%); + } +}*//* Patterns.less * Repeatable UI elements outside the base styles provided from the scaffolding * ---------------------------------------------------------------------------- */ .navbar { @@ -1228,45 +1221,45 @@ table .headerSortUp.purple, table .headerSortDown.purple { text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25); } .navbar .brand a:hover, .navbar ul .active > a { - background-color: #333333; - background-color: rgba(255, 255, 255, 0.05); color: #ffffff; text-decoration: none; + background-color: #333333; + background-color: rgba(255, 255, 255, 0.05); } .navbar .brand { float: left; display: block; padding: 8px 20px 12px; margin-left: -20px; - color: #ffffff; font-size: 20px; font-weight: 200; line-height: 1; + color: #ffffff; } .navbar p { margin: 0; line-height: 40px; } .navbar p a:hover { - background-color: transparent; color: #ffffff; + background-color: transparent; } .navbar-search { position: relative; + float: left; margin-top: 6px; margin-bottom: 0; - float: left; } .navbar-search .search-query { - background-color: #444; - background-color: rgba(255, 255, 255, 0.3); + padding: 4px 9px; font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; font-size: 13px; font-weight: normal; line-height: 1; - padding: 4px 9px; color: #ffffff; color: rgba(255, 255, 255, 0.75); + background-color: #444; + background-color: rgba(255, 255, 255, 0.3); border: 1px solid #111; -webkit-box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1), 0 1px 0px rgba(255, 255, 255, 0.15); -moz-box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1), 0 1px 0px rgba(255, 255, 255, 0.15); @@ -1284,20 +1277,20 @@ table .headerSortUp.purple, table .headerSortDown.purple { color: #e6e6e6; } .navbar-search .search-query:hover { + color: #ffffff; background-color: #bfbfbf; background-color: rgba(255, 255, 255, 0.5); - color: #ffffff; } .navbar-search .search-query:focus, .navbar-search .search-query.focused { - outline: 0; - background-color: #ffffff; + padding: 5px 10px; color: #404040; text-shadow: 0 1px 0 #ffffff; + background-color: #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); + outline: 0; } .navbar-static { margin-bottom: 18px; @@ -1312,16 +1305,16 @@ table .headerSortUp.purple, table .headerSortDown.purple { .navbar-fixed { position: fixed; top: 0; - left: 0; right: 0; + left: 0; z-index: 10000; } .nav { + position: relative; + left: 0; display: block; float: left; margin: 0 10px 0 0; - position: relative; - left: 0; } .nav > li { display: block; @@ -1396,42 +1389,39 @@ table .headerSortUp.purple, table .headerSortDown.purple { position: relative; } .dropdown-toggle:after { + display: inline-block; width: 0; height: 0; - display: inline-block; - content: "↓"; - text-indent: -99999px; - vertical-align: top; margin-top: 8px; margin-left: 6px; + text-indent: -99999px; + vertical-align: top; border-left: 4px solid transparent; border-right: 4px solid transparent; border-top: 4px solid #ffffff; filter: alpha(opacity=30); - -khtml-opacity: 0.3; -moz-opacity: 0.3; opacity: 0.3; + content: "↓"; } .dropdown:hover .dropdown-toggle:after { filter: alpha(opacity=100); - -khtml-opacity: 1; -moz-opacity: 1; opacity: 1; } .dropdown-menu { - background-color: #ffffff; - float: left; - display: none; position: absolute; top: 40px; z-index: 900; + float: left; + display: none; min-width: 160px; max-width: 220px; _width: 160px; + padding: 6px 0; margin-left: 0; margin-right: 0; - padding: 6px 0; - zoom: 1; + background-color: #ffffff; border-color: #999; border-color: rgba(0, 0, 0, 0.2); border-style: solid; @@ -1445,6 +1435,7 @@ table .headerSortUp.purple, table .headerSortDown.purple { -webkit-background-clip: padding-box; -moz-background-clip: padding-box; background-clip: padding-box; + zoom: 1; } .dropdown-menu li { float: none; @@ -1468,6 +1459,8 @@ table .headerSortUp.purple, table .headerSortDown.purple { text-shadow: 0 1px 0 #ffffff; } .topbar .dropdown-menu a:hover, .dropdown-menu a:hover { + color: #404040; + text-decoration: none; background-color: #dddddd; background-image: -khtml-gradient(linear, left top, left bottom, from(#eeeeee), to(#dddddd)); background-image: -moz-linear-gradient(top, #eeeeee, #dddddd); @@ -1478,8 +1471,6 @@ table .headerSortUp.purple, table .headerSortDown.purple { background-image: linear-gradient(top, #eeeeee, #dddddd); background-repeat: repeat-x; 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); @@ -1493,9 +1484,9 @@ table .headerSortUp.purple, table .headerSortDown.purple { display: block; } .hero-unit { - background-color: #f5f5f5; - margin-bottom: 30px; padding: 60px; + margin-bottom: 30px; + background-color: #f5f5f5; -webkit-border-radius: 6px; -moz-border-radius: 6px; border-radius: 6px; @@ -1512,8 +1503,8 @@ table .headerSortUp.purple, table .headerSortDown.purple { line-height: 27px; } footer { - margin-top: 17px; padding-top: 17px; + margin-top: 17px; border-top: 1px solid #eee; } .page-header { @@ -1548,6 +1539,7 @@ footer { .alert-message.danger, .btn.error, .alert-message.error { + text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25); background-color: #c43c35; background-image: -khtml-gradient(linear, left top, left bottom, from(#ee5f5b), to(#c43c35)); background-image: -moz-linear-gradient(top, #ee5f5b, #c43c35); @@ -1558,11 +1550,11 @@ footer { background-image: linear-gradient(top, #ee5f5b, #c43c35); background-repeat: repeat-x; 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); } .btn.success, .alert-message.success { + text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25); background-color: #57a957; background-image: -khtml-gradient(linear, left top, left bottom, from(#62c462), to(#57a957)); background-image: -moz-linear-gradient(top, #62c462, #57a957); @@ -1573,11 +1565,11 @@ footer { background-image: linear-gradient(top, #62c462, #57a957); background-repeat: repeat-x; filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#62c462', endColorstr='#57a957', GradientType=0); - text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25); border-color: #57a957 #57a957 #3d773d; border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25); } .btn.info, .alert-message.info { + text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25); background-color: #339bb9; background-image: -khtml-gradient(linear, left top, left bottom, from(#5bc0de), to(#339bb9)); background-image: -moz-linear-gradient(top, #5bc0de, #339bb9); @@ -1588,13 +1580,16 @@ footer { background-image: linear-gradient(top, #5bc0de, #339bb9); background-repeat: repeat-x; filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#5bc0de', endColorstr='#339bb9', GradientType=0); - text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25); border-color: #339bb9 #339bb9 #22697d; border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25); } .btn { - cursor: pointer; display: inline-block; + padding: 5px 14px 6px; + font-size: 13px; + line-height: normal; + color: #333; + text-shadow: 0 1px 1px rgba(255, 255, 255, 0.75); background-color: #e6e6e6; background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#ffffff), color-stop(25%, #ffffff), to(#e6e6e6)); background-image: -webkit-linear-gradient(#ffffff, #ffffff 25%, #e6e6e6); @@ -1604,11 +1599,6 @@ footer { background-image: linear-gradient(#ffffff, #ffffff 25%, #e6e6e6); background-repeat: no-repeat; filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#e6e6e6', GradientType=0); - padding: 5px 14px 6px; - text-shadow: 0 1px 1px rgba(255, 255, 255, 0.75); - color: #333; - font-size: 13px; - line-height: normal; border: 1px solid #ccc; border-bottom-color: #bbb; -webkit-border-radius: 4px; @@ -1617,6 +1607,7 @@ footer { -webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05); -moz-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05); + cursor: pointer; -webkit-transition: 0.1s linear all; -moz-transition: 0.1s linear all; -ms-transition: 0.1s linear all; @@ -1624,15 +1615,16 @@ footer { transition: 0.1s linear all; } .btn:hover { - background-position: 0 -15px; color: #333; text-decoration: none; + background-position: 0 -15px; } .btn:focus { outline: 1px dotted #666; } .btn.primary { color: #ffffff; + text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25); background-color: #0064cd; background-image: -khtml-gradient(linear, left top, left bottom, from(#049cdb), to(#0064cd)); background-image: -moz-linear-gradient(top, #049cdb, #0064cd); @@ -1643,7 +1635,6 @@ footer { background-image: linear-gradient(top, #049cdb, #0064cd); background-repeat: repeat-x; filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#049cdb', endColorstr='#0064cd', GradientType=0); - text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25); border-color: #0064cd #0064cd #003f81; border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25); } @@ -1657,7 +1648,6 @@ footer { background-image: none; filter: progid:DXImageTransform.Microsoft.gradient(enabled = false); filter: alpha(opacity=65); - -khtml-opacity: 0.65; -moz-opacity: 0.65; opacity: 0.65; -webkit-box-shadow: none; @@ -1669,7 +1659,6 @@ footer { background-image: none; filter: progid:DXImageTransform.Microsoft.gradient(enabled = false); filter: alpha(opacity=65); - -khtml-opacity: 0.65; -moz-opacity: 0.65; opacity: 0.65; -webkit-box-shadow: none; @@ -1677,9 +1666,9 @@ footer { box-shadow: none; } .btn.large { + padding: 9px 14px 9px; font-size: 15px; line-height: normal; - padding: 9px 14px 9px; -webkit-border-radius: 6px; -moz-border-radius: 6px; border-radius: 6px; @@ -1700,9 +1689,9 @@ button.btn::-moz-focus-inner, input[type=submit].btn::-moz-focus-inner { } .btn-toolbar:before, .btn-toolbar:after { display: table; + *display: inline; content: ""; zoom: 1; - *display: inline; } .btn-toolbar:after { clear: both; @@ -1716,9 +1705,9 @@ button.btn::-moz-focus-inner, input[type=submit].btn::-moz-focus-inner { } .btn-group:before, .btn-group:after { display: table; + *display: inline; content: ""; zoom: 1; - *display: inline; } .btn-group:after { clear: both; @@ -1753,13 +1742,12 @@ button.btn::-moz-focus-inner, input[type=submit].btn::-moz-focus-inner { } .close { float: right; - color: #000000; font-size: 20px; font-weight: bold; line-height: 13.5px; + color: #000000; text-shadow: 0 1px 0 #ffffff; filter: alpha(opacity=20); - -khtml-opacity: 0.2; -moz-opacity: 0.2; opacity: 0.2; } @@ -1767,7 +1755,6 @@ button.btn::-moz-focus-inner, input[type=submit].btn::-moz-focus-inner { color: #000000; text-decoration: none; filter: alpha(opacity=40); - -khtml-opacity: 0.4; -moz-opacity: 0.4; opacity: 0.4; } @@ -1776,6 +1763,8 @@ button.btn::-moz-focus-inner, input[type=submit].btn::-moz-focus-inner { padding: 7px 15px; margin-bottom: 18px; color: #404040; + text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5); + text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25); background-color: #eedc94; background-image: -khtml-gradient(linear, left top, left bottom, from(#fceec1), to(#eedc94)); background-image: -moz-linear-gradient(top, #fceec1, #eedc94); @@ -1786,10 +1775,8 @@ button.btn::-moz-focus-inner, input[type=submit].btn::-moz-focus-inner { background-image: linear-gradient(top, #fceec1, #eedc94); background-repeat: repeat-x; filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#fceec1', endColorstr='#eedc94', GradientType=0); - text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25); border-color: #eedc94 #eedc94 #e4c652; border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25); - text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5); border-width: 1px; border-style: solid; -webkit-border-radius: 4px; @@ -1821,10 +1808,10 @@ button.btn::-moz-focus-inner, input[type=submit].btn::-moz-focus-inner { box-shadow: 0 1px 0 rgba(255, 255, 255, 0.25); } .alert-message.block-message { + padding: 14px; background-image: none; background-color: #fdf5d9; filter: progid:DXImageTransform.Microsoft.gradient(enabled = false); - padding: 14px; border-color: #fceec1; -webkit-box-shadow: none; -moz-box-shadow: none; @@ -1859,10 +1846,10 @@ button.btn::-moz-focus-inner, input[type=submit].btn::-moz-focus-inner { border-color: #c6edf9; } .well { - background-color: #f5f5f5; - margin-bottom: 20px; - padding: 19px; min-height: 20px; + padding: 19px; + margin-bottom: 20px; + background-color: #f5f5f5; border: 1px solid #eee; border: 1px solid rgba(0, 0, 0, 0.05); -webkit-border-radius: 4px; @@ -1889,11 +1876,11 @@ button.btn::-moz-focus-inner, input[type=submit].btn::-moz-focus-inner { } .label { padding: 1px 3px 2px; - background-color: #bfbfbf; font-size: 9.75px; font-weight: bold; color: #ffffff; text-transform: uppercase; + background-color: #bfbfbf; -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px; @@ -1910,15 +1897,9 @@ button.btn::-moz-focus-inner, input[type=submit].btn::-moz-focus-inner { .label.notice { background-color: #62cffc; } -.pull-right { - float: right; -} -.pull-left { - float: left; -} .tabs, .pills { - margin: 0 0 20px; padding: 0; + margin: 0 0 20px; list-style: none; zoom: 1; } @@ -1927,9 +1908,9 @@ button.btn::-moz-focus-inner, input[type=submit].btn::-moz-focus-inner { .tabs:after, .pills:after { display: table; + *display: inline; content: ""; zoom: 1; - *display: inline; } .tabs:after, .pills:after { clear: both; @@ -2005,9 +1986,9 @@ button.btn::-moz-focus-inner, input[type=submit].btn::-moz-focus-inner { .tabbable.tabs-left:after, .tabbable.tabs-right:after { display: table; + *display: inline; content: ""; zoom: 1; - *display: inline; } .tabbable.tabs-left:after, .tabbable.tabs-right:after { clear: both; @@ -2088,8 +2069,8 @@ button.btn::-moz-focus-inner, input[type=submit].btn::-moz-focus-inner { border-top-color: #555; } .pills a { - margin: 5px 3px 5px 0; padding: 0 15px; + margin: 5px 3px 5px 0; line-height: 30px; text-shadow: 0 1px 1px #ffffff; -webkit-border-radius: 15px; @@ -2117,8 +2098,8 @@ button.btn::-moz-focus-inner, input[type=submit].btn::-moz-focus-inner { display: block; } .breadcrumb { - margin: 0 0 18px; padding: 7px 14px; + margin: 0 0 18px; background-color: #f5f5f5; background-image: -khtml-gradient(linear, left top, left bottom, from(#ffffff), to(#f5f5f5)); background-image: -moz-linear-gradient(top, #ffffff, #f5f5f5); @@ -2171,39 +2152,38 @@ button.btn::-moz-focus-inner, input[type=submit].btn::-moz-focus-inner { float: left; padding: 0 14px; line-height: 34px; + text-decoration: none; border-right: 1px solid; border-right-color: #ddd; border-right-color: rgba(0, 0, 0, 0.15); *border-right-color: #ddd; /* IE6-7 */ - text-decoration: none; } .pagination a:hover, .pagination .active a { background-color: #c7eefe; } .pagination .disabled a, .pagination .disabled a:hover { - background-color: transparent; color: #bfbfbf; + background-color: transparent; } .pagination .next a { border: 0; } .modal-backdrop { - background-color: #000000; position: fixed; top: 0; - left: 0; right: 0; bottom: 0; + left: 0; z-index: 10000; + background-color: #000000; } .modal-backdrop.fade { opacity: 0; } .modal-backdrop, .modal-backdrop.fade.in { filter: alpha(opacity=80); - -khtml-opacity: 0.8; -moz-opacity: 0.8; opacity: 0.8; } @@ -2245,15 +2225,16 @@ button.btn::-moz-focus-inner, input[type=submit].btn::-moz-focus-inner { top: 50%; } .modal-header { - border-bottom: 1px solid #eee; padding: 5px 15px; + border-bottom: 1px solid #eee; } .modal-body { padding: 15px; } .modal-footer { - background-color: #f5f5f5; padding: 14px 15px 15px; + margin-bottom: 0; + background-color: #f5f5f5; border-top: 1px solid #ddd; -webkit-border-radius: 0 0 6px 6px; -moz-border-radius: 0 0 6px 6px; @@ -2262,13 +2243,12 @@ button.btn::-moz-focus-inner, input[type=submit].btn::-moz-focus-inner { -moz-box-shadow: inset 0 1px 0 #ffffff; box-shadow: inset 0 1px 0 #ffffff; zoom: 1; - margin-bottom: 0; } .modal-footer:before, .modal-footer:after { display: table; + *display: inline; content: ""; zoom: 1; - *display: inline; } .modal-footer:after { clear: both; @@ -2278,20 +2258,18 @@ button.btn::-moz-focus-inner, input[type=submit].btn::-moz-focus-inner { margin-left: 5px; } .twipsy { - display: block; position: absolute; + z-index: 1000; + display: block; visibility: visible; padding: 5px; font-size: 11px; - z-index: 1000; filter: alpha(opacity=80); - -khtml-opacity: 0.8; -moz-opacity: 0.8; opacity: 0.8; } .twipsy.fade.in { filter: alpha(opacity=80); - -khtml-opacity: 0.8; -moz-opacity: 0.8; opacity: 0.8; } @@ -2328,12 +2306,12 @@ button.btn::-moz-focus-inner, input[type=submit].btn::-moz-focus-inner { border-right: 5px solid #000000; } .twipsy-inner { + max-width: 200px; padding: 3px 8px; - background-color: #000000; color: white; text-align: center; - max-width: 200px; text-decoration: none; + background-color: #000000; -webkit-border-radius: 4px; -moz-border-radius: 4px; border-radius: 4px; @@ -2348,8 +2326,8 @@ button.btn::-moz-focus-inner, input[type=submit].btn::-moz-focus-inner { top: 0; left: 0; z-index: 1000; - padding: 5px; display: none; + padding: 5px; } .popover.above .arrow { bottom: 0; @@ -2389,11 +2367,11 @@ button.btn::-moz-focus-inner, input[type=submit].btn::-moz-focus-inner { height: 0; } .popover .inner { - background-color: #000000; - background-color: rgba(0, 0, 0, 0.8); padding: 3px; - overflow: hidden; width: 280px; + overflow: hidden; + background-color: #000000; + background-color: rgba(0, 0, 0, 0.8); -webkit-border-radius: 6px; -moz-border-radius: 6px; border-radius: 6px; @@ -2402,17 +2380,17 @@ button.btn::-moz-focus-inner, input[type=submit].btn::-moz-focus-inner { box-shadow: 0 3px 7px rgba(0, 0, 0, 0.3); } .popover .title { - background-color: #f5f5f5; padding: 9px 15px; line-height: 1; + background-color: #f5f5f5; + border-bottom: 1px solid #eee; -webkit-border-radius: 3px 3px 0 0; -moz-border-radius: 3px 3px 0 0; border-radius: 3px 3px 0 0; - border-bottom: 1px solid #eee; } .popover .content { - background-color: #ffffff; padding: 14px; + background-color: #ffffff; -webkit-border-radius: 0 0 3px 3px; -moz-border-radius: 0 0 3px 3px; border-radius: 0 0 3px 3px; @@ -2430,9 +2408,9 @@ button.btn::-moz-focus-inner, input[type=submit].btn::-moz-focus-inner { } .media-grid:before, .media-grid:after { display: table; + *display: inline; content: ""; zoom: 1; - *display: inline; } .media-grid:after { clear: both; diff --git a/bootstrap.min.css b/bootstrap.min.css index 832d50ff81..32d4a9967a 100644 --- a/bootstrap.min.css +++ b/bootstrap.min.css @@ -9,33 +9,33 @@ a:hover,a:active{outline:0;} article,aside,details,figcaption,figure,footer,header,hgroup,nav,section{display:block;} audio,canvas,video{display:inline-block;*display:inline;*zoom:1;} audio:not([controls]){display:none;} -sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline;} +sub,sup{position:relative;font-size:75%;line-height:0;vertical-align:baseline;} sup{top:-0.5em;} sub{bottom:-0.25em;} img{border:0;-ms-interpolation-mode:bicubic;} -button,input,select,textarea{font-size:100%;margin:0;vertical-align:baseline;*vertical-align:middle;} -button,input{line-height:normal;*overflow:visible;} -button::-moz-focus-inner,input::-moz-focus-inner{border:0;padding:0;} +button,input,select,textarea{margin:0;font-size:100%;vertical-align:baseline;*vertical-align:middle;} +button,input{*overflow:visible;line-height:normal;} +button::-moz-focus-inner,input::-moz-focus-inner{padding:0;border:0;} button,input[type="button"],input[type="reset"],input[type="submit"]{cursor:pointer;-webkit-appearance:button;} input[type="search"]{-webkit-appearance:textfield;-webkit-box-sizing:content-box;-moz-box-sizing:content-box;box-sizing:content-box;} input[type="search"]::-webkit-search-decoration{-webkit-appearance:none;} textarea{overflow:auto;vertical-align:top;} -body{background-color:#ffffff;margin:0;font-family:"Helvetica Neue",Helvetica,Arial,sans-serif;font-size:13px;line-height:18px;color:#404040;} -.container{width:940px;margin-left:auto;margin-right:auto;zoom:1;}.container:before,.container:after{display:table;content:"";zoom:1;*display:inline;} +body{margin:0;font-family:"Helvetica Neue",Helvetica,Arial,sans-serif;font-size:13px;line-height:18px;color:#404040;background-color:#ffffff;} +.container{width:940px;margin-left:auto;margin-right:auto;zoom:1;}.container:before,.container:after{display:table;*display:inline;content:"";zoom:1;} .container:after{clear:both;} -.fluid-container{position:relative;min-width:940px;padding-left:20px;padding-right:20px;zoom:1;}.fluid-container:before,.fluid-container:after{display:table;content:"";zoom:1;*display:inline;} +.fluid-container{position:relative;min-width:940px;padding-left:20px;padding-right:20px;zoom:1;}.fluid-container:before,.fluid-container:after{display:table;*display:inline;content:"";zoom:1;} .fluid-container:after{clear:both;} .fluid-sidebar-left,.fluid-sidebar-right{width:220px;} .fluid-sidebar-left{float:left;} .fluid-sidebar-right{float:right;} .fluid-content{margin-left:240px;} .fluid-container.reverse .fluid-content{margin-left:0;margin-right:240px;} -a{color:#0069d6;text-decoration:none;line-height:inherit;font-weight:inherit;}a:hover{color:#00438a;text-decoration:underline;} +a{font-weight:inherit;line-height:inherit;color:#0069d6;text-decoration:none;}a:hover{color:#00438a;text-decoration:underline;} .pull-right{float:right;} .pull-left{float:left;} .hide{display:none;} .show{display:block;} -.row{margin-left:-20px;zoom:1;}.row:before,.row:after{display:table;content:"";zoom:1;*display:inline;} +.row{margin-left:-20px;zoom:1;}.row:before,.row:after{display:table;*display:inline;content:"";zoom:1;} .row:after{clear:both;} [class*="span"]{display:inline;float:left;margin-left:20px;} .span1{width:60px;} @@ -61,7 +61,7 @@ a{color:#0069d6;text-decoration:none;line-height:inherit;font-weight:inherit;}a: .offset9{margin-left:740px;} .offset10{margin-left:820px;} .offset11{margin-left:900px;} -p{font-family:"Helvetica Neue",Helvetica,Arial,sans-serif;font-size:13px;line-height:18px;margin-bottom:9px;}p small{font-size:11px;color:#bfbfbf;} +p{margin-bottom:9px;font-family:"Helvetica Neue",Helvetica,Arial,sans-serif;font-size:13px;line-height:18px;}p small{font-size:11px;color:#bfbfbf;} h1,h2,h3,h4,h5,h6{font-weight:bold;color:#404040;text-rendering:optimizelegibility;}h1 small,h2 small,h3 small,h4 small,h5 small,h6 small{color:#bfbfbf;} h1{font-size:30px;line-height:36px;}h1 small{font-size:18px;} h2{font-size:24px;line-height:36px;}h2 small{font-size:18px;} @@ -74,7 +74,7 @@ ul ul,ul ol,ol ol,ol ul{margin-bottom:0;} ul{list-style:disc;} ol{list-style:decimal;} li{line-height:18px;color:#404040;} -ul.unstyled{list-style:none;margin-left:0;} +ul.unstyled{margin-left:0;list-style:none;} dl{margin-bottom:18px;}dl dt,dl dd{line-height:18px;} dl dt{font-weight:bold;} dl dd{margin-left:9px;} @@ -83,26 +83,26 @@ strong{font-style:inherit;font-weight:bold;} em{font-style:italic;font-weight:inherit;line-height:inherit;} .muted{color:#bfbfbf;} abbr{font-size:90%;text-transform:uppercase;border-bottom:1px dotted #ddd;cursor:help;} -blockquote{margin-bottom:18px;border-left:5px solid #eee;padding-left:15px;}blockquote p{font-size:300;font-weight:16px;line-height:22.5px;margin-bottom:0;} +blockquote{padding-left:15px;margin-bottom:18px;border-left:5px solid #eee;}blockquote p{margin-bottom:0;font-size:300;font-weight:16px;line-height:22.5px;} blockquote small{display:block;line-height:18px;color:#bfbfbf;}blockquote small:before{content:'\2014 \00A0';} blockquote.pull-right{float:right;}blockquote.pull-right p,blockquote.pull-right small{text-align:right;} -address{display:block;line-height:18px;margin-bottom:18px;} +address{display:block;margin-bottom:18px;line-height:18px;} code,pre{padding:0 3px 2px;font-family:"Menlo",Monaco,Courier New,monospace;font-size:12px;color:#404040;-webkit-border-radius:3px;-moz-border-radius:3px;border-radius:3px;} -code{background-color:#fee9cc;padding:1px 3px;} -pre{background-color:#f5f5f5;display:block;padding:8.5px;margin:0 0 9px;line-height:18px;font-size:12px;border:1px solid #ccc;border:1px solid rgba(0, 0, 0, 0.15);-webkit-border-radius:3px;-moz-border-radius:3px;border-radius:3px;white-space:pre;white-space:pre-wrap;word-break:break-all;}pre code{padding:0;background-color:transparent;} +code{padding:1px 3px;background-color:#fee9cc;} +pre{display:block;padding:8.5px;margin:0 0 9px;font-size:12px;line-height:18px;background-color:#f5f5f5;border:1px solid #ccc;border:1px solid rgba(0, 0, 0, 0.15);-webkit-border-radius:3px;-moz-border-radius:3px;border-radius:3px;white-space:pre;white-space:pre-wrap;word-break:break-all;}pre code{padding:0;background-color:transparent;} form{margin-bottom:18px;} legend{display:block;width:100%;margin-bottom:27px;font-size:19.5px;line-height:36px;color:#404040;border-bottom:1px solid #eee;} label,input,select,textarea{font-family:"Helvetica Neue",Helvetica,Arial,sans-serif;font-size:normal;font-weight:13px;line-height:18px;} label{display:block;margin-bottom:5px;color:#404040;} input,textarea,select,.uneditable-input{display:inline-block;width:210px;height:18px;padding:4px;font-size:13px;line-height:18px;color:#808080;border:1px solid #ccc;-webkit-border-radius:3px;-moz-border-radius:3px;border-radius:3px;} input[type=checkbox],input[type=radio]{width:auto;height:auto;padding:0;margin:3px 0;*margin-top:0;line-height:normal;border:none;cursor:pointer;} -input[type=file]{background-color:#ffffff;background-color:initial;padding:initial;border:initial;line-height:initial;-webkit-box-shadow:none;-moz-box-shadow:none;box-shadow:none;} +input[type=file]{padding:initial;line-height:initial;border:initial;background-color:#ffffff;background-color:initial;-webkit-box-shadow:none;-moz-box-shadow:none;box-shadow:none;} input[type=button],input[type=reset],input[type=submit]{width:auto;height:auto;} -select,input[type=file]{height:27px;line-height:27px;*margin-top:4px;} -select[multiple]{background-color:#ffffff;height:inherit;} +select,input[type=file]{height:27px;*margin-top:4px;line-height:27px;} +select[multiple]{height:inherit;background-color:#ffffff;} textarea{height:auto;} -input,textarea{-webkit-transition:border linear 0.2s,box-shadow linear 0.2s;-moz-transition:border linear 0.2s,box-shadow linear 0.2s;-ms-transition:border linear 0.2s,box-shadow linear 0.2s;-o-transition:border linear 0.2s,box-shadow linear 0.2s;transition:border linear 0.2s,box-shadow linear 0.2s;-webkit-box-shadow:inset 0 1px 3px rgba(0, 0, 0, 0.1);-moz-box-shadow:inset 0 1px 3px rgba(0, 0, 0, 0.1);box-shadow:inset 0 1px 3px rgba(0, 0, 0, 0.1);} -input:focus,textarea:focus{outline:0;border-color:rgba(82, 168, 236, 0.8);-webkit-box-shadow:inset 0 1px 3px rgba(0, 0, 0, 0.1),0 0 8px rgba(82, 168, 236, 0.6);-moz-box-shadow:inset 0 1px 3px rgba(0, 0, 0, 0.1),0 0 8px rgba(82, 168, 236, 0.6);box-shadow:inset 0 1px 3px rgba(0, 0, 0, 0.1),0 0 8px rgba(82, 168, 236, 0.6);} +input,textarea{-webkit-box-shadow:inset 0 1px 3px rgba(0, 0, 0, 0.1);-moz-box-shadow:inset 0 1px 3px rgba(0, 0, 0, 0.1);box-shadow:inset 0 1px 3px rgba(0, 0, 0, 0.1);-webkit-transition:border linear 0.2s,box-shadow linear 0.2s;-moz-transition:border linear 0.2s,box-shadow linear 0.2s;-ms-transition:border linear 0.2s,box-shadow linear 0.2s;-o-transition:border linear 0.2s,box-shadow linear 0.2s;transition:border linear 0.2s,box-shadow linear 0.2s;} +input:focus,textarea:focus{border-color:rgba(82, 168, 236, 0.8);-webkit-box-shadow:inset 0 1px 3px rgba(0, 0, 0, 0.1),0 0 8px rgba(82, 168, 236, 0.6);-moz-box-shadow:inset 0 1px 3px rgba(0, 0, 0, 0.1),0 0 8px rgba(82, 168, 236, 0.6);box-shadow:inset 0 1px 3px rgba(0, 0, 0, 0.1),0 0 8px rgba(82, 168, 236, 0.6);outline:0;} input[type=file]:focus,input[type=checkbox]:focus,select:focus{-webkit-box-shadow:none;-moz-box-shadow:none;box-shadow:none;outline:1px dotted #666;} .input-mini{width:60px;} .input-small{width:90px;} @@ -137,22 +137,22 @@ form .clearfix.success>label,form .clearfix.success .help-block,form .clearfix.s form .clearfix.success input,form .clearfix.success textarea{color:#468847;border-color:#57a957;}form .clearfix.success input:focus,form .clearfix.success textarea:focus{border-color:#458845;-webkit-box-shadow:0 0 6px #9acc9a;-moz-box-shadow:0 0 6px #9acc9a;box-shadow:0 0 6px #9acc9a;} form .clearfix.success .input-prepend .add-on,form .clearfix.success .input-append .add-on{color:#468847;background-color:#bcddbc;border-color:#468847;} .form-actions{padding:17px 20px 18px;margin-top:18px;margin-bottom:18px;background-color:#f5f5f5;border-top:1px solid #ddd;} -.uneditable-input{background-color:#ffffff;display:block;border-color:#eee;-webkit-box-shadow:inset 0 1px 2px rgba(0, 0, 0, 0.025);-moz-box-shadow:inset 0 1px 2px rgba(0, 0, 0, 0.025);box-shadow:inset 0 1px 2px rgba(0, 0, 0, 0.025);cursor:not-allowed;} +.uneditable-input{display:block;background-color:#ffffff;border-color:#eee;-webkit-box-shadow:inset 0 1px 2px rgba(0, 0, 0, 0.025);-moz-box-shadow:inset 0 1px 2px rgba(0, 0, 0, 0.025);box-shadow:inset 0 1px 2px rgba(0, 0, 0, 0.025);cursor:not-allowed;} :-moz-placeholder{color:#bfbfbf;} ::-webkit-input-placeholder{color:#bfbfbf;} .help-text{margin-top:5px;margin-bottom:0;color:#bfbfbf;} -.help-inline{display:inline;padding-left:5px;*position:relative;*top:-5px;} +.help-inline{*position:relative;*top:-5px;display:inline;padding-left:5px;} .help-block{display:block;max-width:600px;} .inline-inputs{color:#808080;}.inline-inputs span,.inline-inputs input{display:inline-block;} .inline-inputs input.mini{width:60px;} .inline-inputs input.small{width:90px;} .inline-inputs span{padding:0 2px 0 1px;} .input-prepend input,.input-append input{-webkit-border-radius:0 3px 3px 0;-moz-border-radius:0 3px 3px 0;border-radius:0 3px 3px 0;} -.input-prepend .add-on,.input-append .add-on{position:relative;background:#f5f5f5;border:1px solid #ccc;z-index:2;float:left;display:block;width:auto;min-width:16px;height:18px;padding:4px 4px 4px 5px;margin-right:-1px;font-weight:normal;line-height:18px;color:#bfbfbf;text-align:center;text-shadow:0 1px 0 #ffffff;-webkit-border-radius:3px 0 0 3px;-moz-border-radius:3px 0 0 3px;border-radius:3px 0 0 3px;} -.input-prepend .active,.input-append .active{background:#a9dba9;border-color:#46a546;} +.input-prepend .add-on,.input-append .add-on{position:relative;z-index:2;float:left;display:block;width:auto;min-width:16px;height:18px;margin-right:-1px;padding:4px 4px 4px 5px;font-weight:normal;line-height:18px;color:#bfbfbf;text-align:center;text-shadow:0 1px 0 #ffffff;background-color:#f5f5f5;border:1px solid #ccc;-webkit-border-radius:3px 0 0 3px;-moz-border-radius:3px 0 0 3px;border-radius:3px 0 0 3px;} +.input-prepend .active,.input-append .active{background-color:#a9dba9;border-color:#46a546;} .input-prepend .add-on{*margin-top:1px;} .input-append input{float:left;-webkit-border-radius:3px 0 0 3px;-moz-border-radius:3px 0 0 3px;border-radius:3px 0 0 3px;} -.input-append .add-on{-webkit-border-radius:0 3px 3px 0;-moz-border-radius:0 3px 3px 0;border-radius:0 3px 3px 0;margin-right:0;margin-left:-1px;} +.input-append .add-on{margin-right:0;margin-left:-1px;-webkit-border-radius:0 3px 3px 0;-moz-border-radius:0 3px 3px 0;border-radius:0 3px 3px 0;} .search-form .search-query{-webkit-border-radius:14px;-moz-border-radius:14px;border-radius:14px;} .control-group{margin-bottom:18px;} .control-group>label{font-weight:bold;} @@ -160,65 +160,32 @@ form .clearfix.success .input-prepend .add-on,form .clearfix.success .input-appe .horizontal-form .controls{margin-left:150px;} .horizontal-form .control-list{padding-top:6px;} .horizontal-form .form-actions{padding-left:150px;} -table{width:100%;padding:0;margin-bottom:18px;font-size:13px;border-collapse:collapse;}table th,table td{padding:10px 10px 9px;line-height:18px;text-align:left;} -table th{padding-top:9px;font-weight:bold;vertical-align:middle;} -table td{vertical-align:top;border-top:1px solid #ddd;} -table tbody th{border-top:1px solid #ddd;vertical-align:top;} -.condensed-table th,.condensed-table td{padding:5px 5px 4px;} -.bordered-table{border:1px solid #ddd;border-collapse:separate;*border-collapse:collapse;-webkit-border-radius:4px;-moz-border-radius:4px;border-radius:4px;}.bordered-table th+th,.bordered-table td+td,.bordered-table th+td{border-left:1px solid #ddd;} +table{width:100%;margin-bottom:18px;} +th,td{padding:8px;line-height:18px;text-align:left;border-bottom:1px solid #ddd;} +th{font-weight:bold;vertical-align:bottom;} +td{vertical-align:top;} +tbody tr:last-child th,tbody tr:last-child td{border-bottom:0;} +.condensed-table th,.condensed-table td{padding:4px 5px;} +.bordered-table{border:1px solid #ddd;border-collapse:separate;-webkit-border-radius:4px;-moz-border-radius:4px;border-radius:4px;}.bordered-table th+th,.bordered-table td+td,.bordered-table th+td,.bordered-table td+th{border-left:1px solid #ddd;} .bordered-table thead:first-child tr:first-child th:first-child,.bordered-table tbody:first-child tr:first-child td:first-child{-webkit-border-radius:4px 0 0 0;-moz-border-radius:4px 0 0 0;border-radius:4px 0 0 0;} .bordered-table thead:first-child tr:first-child th:last-child,.bordered-table tbody:first-child tr:first-child td:last-child{-webkit-border-radius:0 4px 0 0;-moz-border-radius:0 4px 0 0;border-radius:0 4px 0 0;} -.bordered-table tbody tr:last-child td:first-child{-webkit-border-radius:0 0 0 4px;-moz-border-radius:0 0 0 4px;border-radius:0 0 0 4px;} -.bordered-table tbody tr:last-child td:last-child{-webkit-border-radius:0 0 4px 0;-moz-border-radius:0 0 4px 0;border-radius:0 0 4px 0;} -table .span1{width:40px;} -table .span2{width:120px;} -table .span3{width:200px;} -table .span4{width:280px;} -table .span5{width:360px;} -table .span6{width:440px;} -table .span7{width:520px;} -table .span8{width:600px;} -table .span9{width:680px;} -table .span10{width:760px;} -table .span11{width:840px;} -table .span12{width:920px;} -table .span13{width:1000px;} -table .span14{width:1080px;} -table .span15{width:1160px;} -table .span16{width:1240px;} +.bordered-table thead:last-child tr:last-child th:first-child,.bordered-table tbody:last-child tr:last-child td:first-child{-webkit-border-radius:0 0 0 4px;-moz-border-radius:0 0 0 4px;border-radius:0 0 0 4px;} +.bordered-table thead:last-child tr:last-child th:last-child,.bordered-table tbody:last-child tr:last-child td:last-child{-webkit-border-radius:0 0 4px 0;-moz-border-radius:0 0 4px 0;border-radius:0 0 4px 0;} .striped-table tbody tr:nth-child(odd) td,.striped-table tbody tr:nth-child(odd) th{background-color:#f9f9f9;} -.striped-table tbody tr:hover td,.striped-table tbody tr:hover th{background-color:#f5f5f5;} -table .header{cursor:pointer;}table .header:after{content:"";float:right;margin-top:7px;border-width:0 4px 4px;border-style:solid;border-color:#000 transparent;visibility:hidden;} -table .headerSortUp,table .headerSortDown{background-color:rgba(141, 192, 219, 0.25);text-shadow:0 1px 1px rgba(255, 255, 255, 0.75);} -table .header:hover:after{visibility:visible;} -table .headerSortDown:after,table .headerSortDown:hover:after{visibility:visible;filter:alpha(opacity=60);-khtml-opacity:0.6;-moz-opacity:0.6;opacity:0.6;} -table .headerSortUp:after{border-bottom:none;border-left:4px solid transparent;border-right:4px solid transparent;border-top:4px solid #000;visibility:visible;-webkit-box-shadow:none;-moz-box-shadow:none;box-shadow:none;filter:alpha(opacity=60);-khtml-opacity:0.6;-moz-opacity:0.6;opacity:0.6;} -table .blue{color:#049cdb;border-bottom-color:#049cdb;} -table .headerSortUp.blue,table .headerSortDown.blue{background-color:#ade6fe;} -table .green{color:#46a546;border-bottom-color:#46a546;} -table .headerSortUp.green,table .headerSortDown.green{background-color:#cdeacd;} -table .red{color:#9d261d;border-bottom-color:#9d261d;} -table .headerSortUp.red,table .headerSortDown.red{background-color:#f4c8c5;} -table .yellow{color:#ffc40d;border-bottom-color:#ffc40d;} -table .headerSortUp.yellow,table .headerSortDown.yellow{background-color:#fff6d9;} -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;} .navbar{height:40px;overflow:visible;} .navbar-inner{background-color:#222222;background-color:#222222;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);background-repeat:repeat-x;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);} .navbar a{color:#bfbfbf;text-shadow:0 -1px 0 rgba(0, 0, 0, 0.25);} -.navbar .brand a:hover,.navbar ul .active>a{background-color:#333333;background-color:rgba(255, 255, 255, 0.05);color:#ffffff;text-decoration:none;} -.navbar .brand{float:left;display:block;padding:8px 20px 12px;margin-left:-20px;color:#ffffff;font-size:20px;font-weight:200;line-height:1;} -.navbar p{margin:0;line-height:40px;}.navbar p a:hover{background-color:transparent;color:#ffffff;} -.navbar-search{position:relative;margin-top:6px;margin-bottom:0;float:left;}.navbar-search .search-query{background-color:#444;background-color:rgba(255, 255, 255, 0.3);font-family:"Helvetica Neue",Helvetica,Arial,sans-serif;font-size:13px;font-weight:normal;line-height:1;padding:4px 9px;color:#ffffff;color:rgba(255, 255, 255, 0.75);border:1px solid #111;-webkit-box-shadow:inset 0 1px 2px rgba(0, 0, 0, 0.1),0 1px 0px rgba(255, 255, 255, 0.15);-moz-box-shadow:inset 0 1px 2px rgba(0, 0, 0, 0.1),0 1px 0px rgba(255, 255, 255, 0.15);box-shadow:inset 0 1px 2px rgba(0, 0, 0, 0.1),0 1px 0px rgba(255, 255, 255, 0.15);-webkit-transition:none;-moz-transition:none;-ms-transition:none;-o-transition:none;transition:none;}.navbar-search .search-query:-moz-placeholder{color:#e6e6e6;} +.navbar .brand a:hover,.navbar ul .active>a{color:#ffffff;text-decoration:none;background-color:#333333;background-color:rgba(255, 255, 255, 0.05);} +.navbar .brand{float:left;display:block;padding:8px 20px 12px;margin-left:-20px;font-size:20px;font-weight:200;line-height:1;color:#ffffff;} +.navbar p{margin:0;line-height:40px;}.navbar p a:hover{color:#ffffff;background-color:transparent;} +.navbar-search{position:relative;float:left;margin-top:6px;margin-bottom:0;}.navbar-search .search-query{padding:4px 9px;font-family:"Helvetica Neue",Helvetica,Arial,sans-serif;font-size:13px;font-weight:normal;line-height:1;color:#ffffff;color:rgba(255, 255, 255, 0.75);background-color:#444;background-color:rgba(255, 255, 255, 0.3);border:1px solid #111;-webkit-box-shadow:inset 0 1px 2px rgba(0, 0, 0, 0.1),0 1px 0px rgba(255, 255, 255, 0.15);-moz-box-shadow:inset 0 1px 2px rgba(0, 0, 0, 0.1),0 1px 0px rgba(255, 255, 255, 0.15);box-shadow:inset 0 1px 2px rgba(0, 0, 0, 0.1),0 1px 0px rgba(255, 255, 255, 0.15);-webkit-transition:none;-moz-transition:none;-ms-transition:none;-o-transition:none;transition:none;}.navbar-search .search-query:-moz-placeholder{color:#e6e6e6;} .navbar-search .search-query::-webkit-input-placeholder{color:#e6e6e6;} -.navbar-search .search-query:hover{background-color:#bfbfbf;background-color:rgba(255, 255, 255, 0.5);color:#ffffff;} -.navbar-search .search-query:focus,.navbar-search .search-query.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);} +.navbar-search .search-query:hover{color:#ffffff;background-color:#bfbfbf;background-color:rgba(255, 255, 255, 0.5);} +.navbar-search .search-query:focus,.navbar-search .search-query.focused{padding:5px 10px;color:#404040;text-shadow:0 1px 0 #ffffff;background-color:#ffffff;border:0;-webkit-box-shadow:0 0 3px rgba(0, 0, 0, 0.15);-moz-box-shadow:0 0 3px rgba(0, 0, 0, 0.15);box-shadow:0 0 3px rgba(0, 0, 0, 0.15);outline:0;} .navbar-static{margin-bottom:18px;} .navbar-static .navbar-inner{padding-left:20px;padding-right:20px;-webkit-border-radius:4px;-moz-border-radius:4px;border-radius:4px;} -.navbar-fixed{position:fixed;top:0;left:0;right:0;z-index:10000;} -.nav{display:block;float:left;margin:0 10px 0 0;position:relative;left:0;}.nav>li{display:block;float:left;} +.navbar-fixed{position:fixed;top:0;right:0;left:0;z-index:10000;} +.nav{position:relative;left:0;display:block;float:left;margin:0 10px 0 0;}.nav>li{display:block;float:left;} .nav a{display:block;float:none;padding:10px 10px 11px;line-height:19px;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;} @@ -229,46 +196,46 @@ table .headerSortUp.purple,table .headerSortDown.purple{background-color:#e2d5f0 .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:6px;border-left:4px solid transparent;border-right:4px solid transparent;border-top:4px solid #ffffff;filter:alpha(opacity=30);-khtml-opacity:0.3;-moz-opacity:0.3;opacity:0.3;} -.dropdown:hover .dropdown-toggle:after{filter:alpha(opacity=100);-khtml-opacity:1;-moz-opacity:1;opacity:1;} -.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-toggle:after{display:inline-block;width:0;height:0;margin-top:8px;margin-left:6px;text-indent:-99999px;vertical-align:top;border-left:4px solid transparent;border-right:4px solid transparent;border-top:4px solid #ffffff;filter:alpha(opacity=30);-moz-opacity:0.3;opacity:0.3;content:"↓";} +.dropdown:hover .dropdown-toggle:after{filter:alpha(opacity=100);-moz-opacity:1;opacity:1;} +.dropdown-menu{position:absolute;top:40px;z-index:900;float:left;display:none;min-width:160px;max-width:220px;_width:160px;padding:6px 0;margin-left:0;margin-right:0;background-color:#ffffff;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;zoom:1;}.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-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);background-repeat:repeat-x;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);} +.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{color:#404040;text-decoration:none;background-color:#dddddd;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);background-repeat:repeat-x;filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#eeeeee', endColorstr='#dddddd', GradientType=0);-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.open .dropdown-toggle{color:#ffffff;background:#ccc;background:rgba(0, 0, 0, 0.3);} .dropdown.open .dropdown-menu{display:block;} -.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{padding:60px;margin-bottom:30px;background-color:#f5f5f5;-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;} +footer{padding-top:17px;margin-top:17px;border-top:1px solid #eee;} .page-header{margin-bottom:27px;border-bottom:1px solid #eee;-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:13.5px;} .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-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);background-repeat:repeat-x;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);} -.btn.success,.alert-message.success{background-color:#57a957;background-image:-khtml-gradient(linear, left top, left bottom, from(#62c462), to(#57a957));background-image:-moz-linear-gradient(top, #62c462, #57a957);background-image:-ms-linear-gradient(top, #62c462, #57a957);background-image:-webkit-gradient(linear, left top, left bottom, color-stop(0%, #62c462), color-stop(100%, #57a957));background-image:-webkit-linear-gradient(top, #62c462, #57a957);background-image:-o-linear-gradient(top, #62c462, #57a957);background-image:linear-gradient(top, #62c462, #57a957);background-repeat:repeat-x;filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#62c462', endColorstr='#57a957', GradientType=0);text-shadow:0 -1px 0 rgba(0, 0, 0, 0.25);border-color:#57a957 #57a957 #3d773d;border-color:rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);} -.btn.info,.alert-message.info{background-color:#339bb9;background-image:-khtml-gradient(linear, left top, left bottom, from(#5bc0de), to(#339bb9));background-image:-moz-linear-gradient(top, #5bc0de, #339bb9);background-image:-ms-linear-gradient(top, #5bc0de, #339bb9);background-image:-webkit-gradient(linear, left top, left bottom, color-stop(0%, #5bc0de), color-stop(100%, #339bb9));background-image:-webkit-linear-gradient(top, #5bc0de, #339bb9);background-image:-o-linear-gradient(top, #5bc0de, #339bb9);background-image:linear-gradient(top, #5bc0de, #339bb9);background-repeat:repeat-x;filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#5bc0de', endColorstr='#339bb9', GradientType=0);text-shadow:0 -1px 0 rgba(0, 0, 0, 0.25);border-color:#339bb9 #339bb9 #22697d;border-color:rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);} -.btn{cursor:pointer;display:inline-block;background-color:#e6e6e6;background-image:-webkit-gradient(linear, 0 0, 0 100%, from(#ffffff), color-stop(25%, #ffffff), to(#e6e6e6));background-image:-webkit-linear-gradient(#ffffff, #ffffff 25%, #e6e6e6);background-image:-moz-linear-gradient(top, #ffffff, #ffffff 25%, #e6e6e6);background-image:-ms-linear-gradient(#ffffff, #ffffff 25%, #e6e6e6);background-image:-o-linear-gradient(#ffffff, #ffffff 25%, #e6e6e6);background-image:linear-gradient(#ffffff, #ffffff 25%, #e6e6e6);background-repeat:no-repeat;filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#e6e6e6', GradientType=0);padding:5px 14px 6px;text-shadow:0 1px 1px rgba(255, 255, 255, 0.75);color:#333;font-size:13px;line-height:normal;border:1px solid #ccc;border-bottom-color:#bbb;-webkit-border-radius:4px;-moz-border-radius:4px;border-radius:4px;-webkit-box-shadow:inset 0 1px 0 rgba(255, 255, 255, 0.2),0 1px 2px rgba(0, 0, 0, 0.05);-moz-box-shadow:inset 0 1px 0 rgba(255, 255, 255, 0.2),0 1px 2px rgba(0, 0, 0, 0.05);box-shadow:inset 0 1px 0 rgba(255, 255, 255, 0.2),0 1px 2px rgba(0, 0, 0, 0.05);-webkit-transition:0.1s linear all;-moz-transition:0.1s linear all;-ms-transition:0.1s linear all;-o-transition:0.1s linear all;transition:0.1s linear all;}.btn:hover{background-position:0 -15px;color:#333;text-decoration:none;} +.btn.danger,.alert-message.danger,.btn.error,.alert-message.error{text-shadow:0 -1px 0 rgba(0, 0, 0, 0.25);background-color:#c43c35;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);background-repeat:repeat-x;filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ee5f5b', endColorstr='#c43c35', GradientType=0);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);} +.btn.success,.alert-message.success{text-shadow:0 -1px 0 rgba(0, 0, 0, 0.25);background-color:#57a957;background-image:-khtml-gradient(linear, left top, left bottom, from(#62c462), to(#57a957));background-image:-moz-linear-gradient(top, #62c462, #57a957);background-image:-ms-linear-gradient(top, #62c462, #57a957);background-image:-webkit-gradient(linear, left top, left bottom, color-stop(0%, #62c462), color-stop(100%, #57a957));background-image:-webkit-linear-gradient(top, #62c462, #57a957);background-image:-o-linear-gradient(top, #62c462, #57a957);background-image:linear-gradient(top, #62c462, #57a957);background-repeat:repeat-x;filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#62c462', endColorstr='#57a957', GradientType=0);border-color:#57a957 #57a957 #3d773d;border-color:rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);} +.btn.info,.alert-message.info{text-shadow:0 -1px 0 rgba(0, 0, 0, 0.25);background-color:#339bb9;background-image:-khtml-gradient(linear, left top, left bottom, from(#5bc0de), to(#339bb9));background-image:-moz-linear-gradient(top, #5bc0de, #339bb9);background-image:-ms-linear-gradient(top, #5bc0de, #339bb9);background-image:-webkit-gradient(linear, left top, left bottom, color-stop(0%, #5bc0de), color-stop(100%, #339bb9));background-image:-webkit-linear-gradient(top, #5bc0de, #339bb9);background-image:-o-linear-gradient(top, #5bc0de, #339bb9);background-image:linear-gradient(top, #5bc0de, #339bb9);background-repeat:repeat-x;filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#5bc0de', endColorstr='#339bb9', GradientType=0);border-color:#339bb9 #339bb9 #22697d;border-color:rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);} +.btn{display:inline-block;padding:5px 14px 6px;font-size:13px;line-height:normal;color:#333;text-shadow:0 1px 1px rgba(255, 255, 255, 0.75);background-color:#e6e6e6;background-image:-webkit-gradient(linear, 0 0, 0 100%, from(#ffffff), color-stop(25%, #ffffff), to(#e6e6e6));background-image:-webkit-linear-gradient(#ffffff, #ffffff 25%, #e6e6e6);background-image:-moz-linear-gradient(top, #ffffff, #ffffff 25%, #e6e6e6);background-image:-ms-linear-gradient(#ffffff, #ffffff 25%, #e6e6e6);background-image:-o-linear-gradient(#ffffff, #ffffff 25%, #e6e6e6);background-image:linear-gradient(#ffffff, #ffffff 25%, #e6e6e6);background-repeat:no-repeat;filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#e6e6e6', GradientType=0);border:1px solid #ccc;border-bottom-color:#bbb;-webkit-border-radius:4px;-moz-border-radius:4px;border-radius:4px;-webkit-box-shadow:inset 0 1px 0 rgba(255, 255, 255, 0.2),0 1px 2px rgba(0, 0, 0, 0.05);-moz-box-shadow:inset 0 1px 0 rgba(255, 255, 255, 0.2),0 1px 2px rgba(0, 0, 0, 0.05);box-shadow:inset 0 1px 0 rgba(255, 255, 255, 0.2),0 1px 2px rgba(0, 0, 0, 0.05);cursor:pointer;-webkit-transition:0.1s linear all;-moz-transition:0.1s linear all;-ms-transition:0.1s linear all;-o-transition:0.1s linear all;transition:0.1s linear all;}.btn:hover{color:#333;text-decoration:none;background-position:0 -15px;} .btn:focus{outline:1px dotted #666;} -.btn.primary{color:#ffffff;background-color:#0064cd;background-image:-khtml-gradient(linear, left top, left bottom, from(#049cdb), to(#0064cd));background-image:-moz-linear-gradient(top, #049cdb, #0064cd);background-image:-ms-linear-gradient(top, #049cdb, #0064cd);background-image:-webkit-gradient(linear, left top, left bottom, color-stop(0%, #049cdb), color-stop(100%, #0064cd));background-image:-webkit-linear-gradient(top, #049cdb, #0064cd);background-image:-o-linear-gradient(top, #049cdb, #0064cd);background-image:linear-gradient(top, #049cdb, #0064cd);background-repeat:repeat-x;filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#049cdb', endColorstr='#0064cd', GradientType=0);text-shadow:0 -1px 0 rgba(0, 0, 0, 0.25);border-color:#0064cd #0064cd #003f81;border-color:rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);} +.btn.primary{color:#ffffff;text-shadow:0 -1px 0 rgba(0, 0, 0, 0.25);background-color:#0064cd;background-image:-khtml-gradient(linear, left top, left bottom, from(#049cdb), to(#0064cd));background-image:-moz-linear-gradient(top, #049cdb, #0064cd);background-image:-ms-linear-gradient(top, #049cdb, #0064cd);background-image:-webkit-gradient(linear, left top, left bottom, color-stop(0%, #049cdb), color-stop(100%, #0064cd));background-image:-webkit-linear-gradient(top, #049cdb, #0064cd);background-image:-o-linear-gradient(top, #049cdb, #0064cd);background-image:linear-gradient(top, #049cdb, #0064cd);background-repeat:repeat-x;filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#049cdb', endColorstr='#0064cd', GradientType=0);border-color:#0064cd #0064cd #003f81;border-color:rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);} .btn:active{-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);} -.btn.disabled{cursor:default;background-image:none;filter:progid:DXImageTransform.Microsoft.gradient(enabled = false);filter:alpha(opacity=65);-khtml-opacity:0.65;-moz-opacity:0.65;opacity:0.65;-webkit-box-shadow:none;-moz-box-shadow:none;box-shadow:none;} -.btn[disabled]{cursor:default;background-image:none;filter:progid:DXImageTransform.Microsoft.gradient(enabled = false);filter:alpha(opacity=65);-khtml-opacity:0.65;-moz-opacity:0.65;opacity:0.65;-webkit-box-shadow:none;-moz-box-shadow:none;box-shadow:none;} -.btn.large{font-size:15px;line-height:normal;padding:9px 14px 9px;-webkit-border-radius:6px;-moz-border-radius:6px;border-radius:6px;} +.btn.disabled{cursor:default;background-image:none;filter:progid:DXImageTransform.Microsoft.gradient(enabled = false);filter:alpha(opacity=65);-moz-opacity:0.65;opacity:0.65;-webkit-box-shadow:none;-moz-box-shadow:none;box-shadow:none;} +.btn[disabled]{cursor:default;background-image:none;filter:progid:DXImageTransform.Microsoft.gradient(enabled = false);filter:alpha(opacity=65);-moz-opacity:0.65;opacity:0.65;-webkit-box-shadow:none;-moz-box-shadow:none;box-shadow:none;} +.btn.large{padding:9px 14px 9px;font-size:15px;line-height:normal;-webkit-border-radius:6px;-moz-border-radius:6px;border-radius:6px;} .btn.small{padding:7px 9px 7px;font-size:11px;} :root .alert-message,:root .btn{border-radius:0 \0;} button.btn::-moz-focus-inner,input[type=submit].btn::-moz-focus-inner{padding:0;border:0;} -.btn-toolbar{zoom:1;}.btn-toolbar:before,.btn-toolbar:after{display:table;content:"";zoom:1;*display:inline;} +.btn-toolbar{zoom:1;}.btn-toolbar:before,.btn-toolbar:after{display:table;*display:inline;content:"";zoom:1;} .btn-toolbar:after{clear:both;} .btn-toolbar .btn-group{float:left;margin-right:10px;} -.btn-group{zoom:1;}.btn-group:before,.btn-group:after{display:table;content:"";zoom:1;*display:inline;} +.btn-group{zoom:1;}.btn-group:before,.btn-group:after{display:table;*display:inline;content:"";zoom:1;} .btn-group:after{clear:both;} .btn-group .btn{position:relative;float:left;margin-left:-1px;-webkit-border-radius:0;-moz-border-radius:0;border-radius:0;}.btn-group .btn:first-child{margin-left:0;-webkit-border-top-left-radius:4px;-moz-border-radius-topleft:4px;border-top-left-radius:4px;-webkit-border-bottom-left-radius:4px;-moz-border-radius-bottomleft:4px;border-bottom-left-radius:4px;} .btn-group .btn:last-child{-webkit-border-top-right-radius:4px;-moz-border-radius-topright:4px;border-top-right-radius:4px;-webkit-border-bottom-right-radius:4px;-moz-border-radius-bottomright:4px;border-bottom-right-radius:4px;} .btn-group .btn:hover,.btn-group .btn:focus,.btn-group .btn:active{z-index:2;} -.close{float:right;color:#000000;font-size:20px;font-weight:bold;line-height:13.5px;text-shadow:0 1px 0 #ffffff;filter:alpha(opacity=20);-khtml-opacity:0.2;-moz-opacity:0.2;opacity:0.2;}.close:hover{color:#000000;text-decoration:none;filter:alpha(opacity=40);-khtml-opacity:0.4;-moz-opacity:0.4;opacity:0.4;} -.alert-message{position:relative;padding:7px 15px;margin-bottom:18px;color:#404040;background-color:#eedc94;background-image:-khtml-gradient(linear, left top, left bottom, from(#fceec1), to(#eedc94));background-image:-moz-linear-gradient(top, #fceec1, #eedc94);background-image:-ms-linear-gradient(top, #fceec1, #eedc94);background-image:-webkit-gradient(linear, left top, left bottom, color-stop(0%, #fceec1), color-stop(100%, #eedc94));background-image:-webkit-linear-gradient(top, #fceec1, #eedc94);background-image:-o-linear-gradient(top, #fceec1, #eedc94);background-image:linear-gradient(top, #fceec1, #eedc94);background-repeat:repeat-x;filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#fceec1', endColorstr='#eedc94', GradientType=0);text-shadow:0 -1px 0 rgba(0, 0, 0, 0.25);border-color:#eedc94 #eedc94 #e4c652;border-color:rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);text-shadow:0 1px 0 rgba(255, 255, 255, 0.5);border-width:1px;border-style:solid;-webkit-border-radius:4px;-moz-border-radius:4px;border-radius:4px;-webkit-box-shadow:inset 0 1px 0 rgba(255, 255, 255, 0.25);-moz-box-shadow:inset 0 1px 0 rgba(255, 255, 255, 0.25);box-shadow:inset 0 1px 0 rgba(255, 255, 255, 0.25);}.alert-message .close{*margin-top:3px;} +.close{float:right;font-size:20px;font-weight:bold;line-height:13.5px;color:#000000;text-shadow:0 1px 0 #ffffff;filter:alpha(opacity=20);-moz-opacity:0.2;opacity:0.2;}.close:hover{color:#000000;text-decoration:none;filter:alpha(opacity=40);-moz-opacity:0.4;opacity:0.4;} +.alert-message{position:relative;padding:7px 15px;margin-bottom:18px;color:#404040;text-shadow:0 1px 0 rgba(255, 255, 255, 0.5);text-shadow:0 -1px 0 rgba(0, 0, 0, 0.25);background-color:#eedc94;background-image:-khtml-gradient(linear, left top, left bottom, from(#fceec1), to(#eedc94));background-image:-moz-linear-gradient(top, #fceec1, #eedc94);background-image:-ms-linear-gradient(top, #fceec1, #eedc94);background-image:-webkit-gradient(linear, left top, left bottom, color-stop(0%, #fceec1), color-stop(100%, #eedc94));background-image:-webkit-linear-gradient(top, #fceec1, #eedc94);background-image:-o-linear-gradient(top, #fceec1, #eedc94);background-image:linear-gradient(top, #fceec1, #eedc94);background-repeat:repeat-x;filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#fceec1', endColorstr='#eedc94', GradientType=0);border-color:#eedc94 #eedc94 #e4c652;border-color:rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);border-width:1px;border-style:solid;-webkit-border-radius:4px;-moz-border-radius:4px;border-radius:4px;-webkit-box-shadow:inset 0 1px 0 rgba(255, 255, 255, 0.25);-moz-box-shadow:inset 0 1px 0 rgba(255, 255, 255, 0.25);box-shadow:inset 0 1px 0 rgba(255, 255, 255, 0.25);}.alert-message .close{*margin-top:3px;} .alert-message h5{line-height:18px;} .alert-message p{margin-bottom:0;} .alert-message div{margin-top:5px;margin-bottom:2px;line-height:28px;} .alert-message .btn{-webkit-box-shadow:0 1px 0 rgba(255, 255, 255, 0.25);-moz-box-shadow:0 1px 0 rgba(255, 255, 255, 0.25);box-shadow:0 1px 0 rgba(255, 255, 255, 0.25);} -.alert-message.block-message{background-image:none;background-color:#fdf5d9;filter:progid:DXImageTransform.Microsoft.gradient(enabled = false);padding:14px;border-color:#fceec1;-webkit-box-shadow:none;-moz-box-shadow:none;box-shadow:none;}.alert-message.block-message ul,.alert-message.block-message p{margin-right:30px;} +.alert-message.block-message{padding:14px;background-image:none;background-color:#fdf5d9;filter:progid:DXImageTransform.Microsoft.gradient(enabled = false);border-color:#fceec1;-webkit-box-shadow:none;-moz-box-shadow:none;box-shadow:none;}.alert-message.block-message ul,.alert-message.block-message p{margin-right:30px;} .alert-message.block-message ul{margin-bottom:0;} .alert-message.block-message li{color:#404040;} .alert-message.block-message .alert-actions{margin-top:5px;} @@ -276,15 +243,13 @@ 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;} -.well{background-color:#f5f5f5;margin-bottom:20px;padding:19px;min-height:20px;border:1px solid #eee;border:1px solid rgba(0, 0, 0, 0.05);-webkit-border-radius:4px;-moz-border-radius:4px;border-radius:4px;-webkit-box-shadow:inset 0 1px 1px rgba(0, 0, 0, 0.05);-moz-box-shadow:inset 0 1px 1px rgba(0, 0, 0, 0.05);box-shadow:inset 0 1px 1px rgba(0, 0, 0, 0.05);}.well blockquote{border-color:#ddd;border-color:rgba(0, 0, 0, 0.15);} +.well{min-height:20px;padding:19px;margin-bottom:20px;background-color:#f5f5f5;border:1px solid #eee;border:1px solid rgba(0, 0, 0, 0.05);-webkit-border-radius:4px;-moz-border-radius:4px;border-radius:4px;-webkit-box-shadow:inset 0 1px 1px rgba(0, 0, 0, 0.05);-moz-box-shadow:inset 0 1px 1px rgba(0, 0, 0, 0.05);box-shadow:inset 0 1px 1px rgba(0, 0, 0, 0.05);}.well blockquote{border-color:#ddd;border-color:rgba(0, 0, 0, 0.15);} .fade{-webkit-transition:opacity 0.15s linear;-moz-transition:opacity 0.15s linear;-ms-transition:opacity 0.15s linear;-o-transition:opacity 0.15s linear;transition:opacity 0.15s linear;opacity:0;}.fade.in{opacity:1;} -.label{padding:1px 3px 2px;background-color:#bfbfbf;font-size:9.75px;font-weight:bold;color:#ffffff;text-transform:uppercase;-webkit-border-radius:3px;-moz-border-radius:3px;border-radius:3px;}.label.important{background-color:#c43c35;} +.label{padding:1px 3px 2px;font-size:9.75px;font-weight:bold;color:#ffffff;text-transform:uppercase;background-color:#bfbfbf;-webkit-border-radius:3px;-moz-border-radius:3px;border-radius:3px;}.label.important{background-color:#c43c35;} .label.warning{background-color:#f89406;} .label.success{background-color:#46a546;} .label.notice{background-color:#62cffc;} -.pull-right{float:right;} -.pull-left{float:left;} -.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,.pills{padding:0;margin:0 0 20px;list-style:none;zoom:1;}.tabs:before,.pills:before,.tabs:after,.pills:after{display:table;*display:inline;content:"";zoom:1;} .tabs:after,.pills:after{clear:both;} .tabs>li,.pills>li{float:left;}.tabs>li>a,.pills>li>a{display:block;} .tabs{border-color:#ddd;border-style:solid;border-width:0 0 1px;}.tabs>li{position:relative;margin-bottom:-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;} @@ -294,7 +259,7 @@ button.btn::-moz-focus-inner,input[type=submit].btn::-moz-focus-inner{padding:0; .tabbable.tabs-bottom .tabs>li{margin-top:-1px;margin-bottom:0;} .tabbable.tabs-bottom .tabs>li>a{-webkit-border-radius:0 0 4px 4px;-moz-border-radius:0 0 4px 4px;border-radius:0 0 4px 4px;}.tabbable.tabs-bottom .tabs>li>a:hover{border-bottom-color:transparent;border-top-color:#ddd;} .tabbable.tabs-bottom .tabs>.active>a,.tabbable.tabs-bottom .tabs>.active>a:hover{border-color:transparent #ddd #ddd #ddd;} -.tabbable.tabs-left,.tabbable.tabs-right{zoom:1;}.tabbable.tabs-left:before,.tabbable.tabs-right:before,.tabbable.tabs-left:after,.tabbable.tabs-right:after{display:table;content:"";zoom:1;*display:inline;} +.tabbable.tabs-left,.tabbable.tabs-right{zoom:1;}.tabbable.tabs-left:before,.tabbable.tabs-right:before,.tabbable.tabs-left:after,.tabbable.tabs-right:after{display:table;*display:inline;content:"";zoom:1;} .tabbable.tabs-left:after,.tabbable.tabs-right:after{clear:both;} .tabbable.tabs-left .tabs,.tabbable.tabs-right .tabs{width:100px;}.tabbable.tabs-left .tabs>li,.tabbable.tabs-right .tabs>li{float:none;margin-bottom:-1px;}.tabbable.tabs-left .tabs>li>a,.tabbable.tabs-right .tabs>li>a{margin-bottom:2px;}.tabbable.tabs-left .tabs>li>a:hover,.tabbable.tabs-right .tabs>li>a:hover{border-color:transparent;} .tabbable.tabs-left .tab-content{margin-left:100px;} @@ -307,46 +272,46 @@ button.btn::-moz-focus-inner,input[type=submit].btn::-moz-focus-inner{padding:0; .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;} -.pills a{margin:5px 3px 5px 0;padding:0 15px;line-height:30px;text-shadow:0 1px 1px #ffffff;-webkit-border-radius:15px;-moz-border-radius:15px;border-radius:15px;}.pills a:hover{color:#ffffff;text-decoration:none;text-shadow:0 1px 1px rgba(0, 0, 0, 0.25);background-color:#00438a;} +.pills a{padding:0 15px;margin:5px 3px 5px 0;line-height:30px;text-shadow:0 1px 1px #ffffff;-webkit-border-radius:15px;-moz-border-radius:15px;border-radius:15px;}.pills a:hover{color:#ffffff;text-decoration:none;text-shadow:0 1px 1px rgba(0, 0, 0, 0.25);background-color:#00438a;} .pills .active a{color:#ffffff;text-shadow:0 1px 1px rgba(0, 0, 0, 0.25);background-color:#0069d6;} .pills-vertical>li{float:none;} .tab-content>.tab-pane,.pill-content>.pill-pane{display:none;} .tab-content>.active,.pill-content>.active{display:block;} -.breadcrumb{margin:0 0 18px;padding:7px 14px;background-color:#f5f5f5;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);background-repeat:repeat-x;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{padding:7px 14px;margin:0 0 18px;background-color:#f5f5f5;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);background-repeat:repeat-x;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;} .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 li{display:inline;} -.pagination 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 a{float:left;padding:0 14px;line-height:34px;text-decoration:none;border-right:1px solid;border-right-color:#ddd;border-right-color:rgba(0, 0, 0, 0.15);*border-right-color:#ddd;} .pagination a:hover,.pagination .active a{background-color:#c7eefe;} -.pagination .disabled a,.pagination .disabled a:hover{background-color:transparent;color:#bfbfbf;} +.pagination .disabled a,.pagination .disabled a:hover{color:#bfbfbf;background-color:transparent;} .pagination .next a{border:0;} -.modal-backdrop{background-color:#000000;position:fixed;top:0;left:0;right:0;bottom:0;z-index:10000;}.modal-backdrop.fade{opacity:0;} -.modal-backdrop,.modal-backdrop.fade.in{filter:alpha(opacity=80);-khtml-opacity:0.8;-moz-opacity:0.8;opacity:0.8;} +.modal-backdrop{position:fixed;top:0;right:0;bottom:0;left:0;z-index:10000;background-color:#000000;}.modal-backdrop.fade{opacity:0;} +.modal-backdrop,.modal-backdrop.fade.in{filter:alpha(opacity=80);-moz-opacity:0.8;opacity:0.8;} .modal{position:fixed;top:50%;left:50%;z-index:11000;width:560px;margin:-250px 0 0 -250px;background-color:#ffffff;border:1px solid #999;border:1px solid rgba(0, 0, 0, 0.3);*border:1px solid #999;-webkit-border-radius:6px;-moz-border-radius:6px;border-radius:6px;-webkit-box-shadow:0 3px 7px rgba(0, 0, 0, 0.3);-moz-box-shadow:0 3px 7px rgba(0, 0, 0, 0.3);box-shadow:0 3px 7px rgba(0, 0, 0, 0.3);-webkit-background-clip:padding-box;-moz-background-clip:padding-box;background-clip:padding-box;}.modal .close{margin-top:7px;} .modal.fade{-webkit-transition:opacity .3s linear, top .3s ease-out;-moz-transition:opacity .3s linear, top .3s ease-out;-ms-transition:opacity .3s linear, top .3s ease-out;-o-transition:opacity .3s linear, top .3s ease-out;transition:opacity .3s linear, top .3s ease-out;top:-25%;} .modal.fade.in{top:50%;} -.modal-header{border-bottom:1px solid #eee;padding:5px 15px;} +.modal-header{padding:5px 15px;border-bottom:1px solid #eee;} .modal-body{padding:15px;} -.modal-footer{background-color:#f5f5f5;padding:14px 15px 15px;border-top:1px solid #ddd;-webkit-border-radius:0 0 6px 6px;-moz-border-radius:0 0 6px 6px;border-radius:0 0 6px 6px;-webkit-box-shadow:inset 0 1px 0 #ffffff;-moz-box-shadow:inset 0 1px 0 #ffffff;box-shadow:inset 0 1px 0 #ffffff;zoom:1;margin-bottom:0;}.modal-footer:before,.modal-footer:after{display:table;content:"";zoom:1;*display:inline;} +.modal-footer{padding:14px 15px 15px;margin-bottom:0;background-color:#f5f5f5;border-top:1px solid #ddd;-webkit-border-radius:0 0 6px 6px;-moz-border-radius:0 0 6px 6px;border-radius:0 0 6px 6px;-webkit-box-shadow:inset 0 1px 0 #ffffff;-moz-box-shadow:inset 0 1px 0 #ffffff;box-shadow:inset 0 1px 0 #ffffff;zoom:1;}.modal-footer:before,.modal-footer:after{display:table;*display:inline;content:"";zoom:1;} .modal-footer:after{clear:both;} .modal-footer .btn{float:right;margin-left:5px;} -.twipsy{display:block;position:absolute;visibility:visible;padding:5px;font-size:11px;z-index:1000;filter:alpha(opacity=80);-khtml-opacity:0.8;-moz-opacity:0.8;opacity:0.8;}.twipsy.fade.in{filter:alpha(opacity=80);-khtml-opacity:0.8;-moz-opacity:0.8;opacity:0.8;} +.twipsy{position:absolute;z-index:1000;display:block;visibility:visible;padding:5px;font-size:11px;filter:alpha(opacity=80);-moz-opacity:0.8;opacity:0.8;}.twipsy.fade.in{filter:alpha(opacity=80);-moz-opacity:0.8;opacity:0.8;} .twipsy.above .twipsy-arrow{bottom:0;left:50%;margin-left:-5px;border-left:5px solid transparent;border-right:5px solid transparent;border-top:5px solid #000000;} .twipsy.left .twipsy-arrow{top:50%;right:0;margin-top:-5px;border-top:5px solid transparent;border-bottom:5px solid transparent;border-left:5px solid #000000;} .twipsy.below .twipsy-arrow{top:0;left:50%;margin-left:-5px;border-left:5px solid transparent;border-right:5px solid transparent;border-bottom:5px solid #000000;} .twipsy.right .twipsy-arrow{top:50%;left:0;margin-top:-5px;border-top:5px solid transparent;border-bottom:5px solid transparent;border-right:5px solid #000000;} -.twipsy-inner{padding:3px 8px;background-color:#000000;color:white;text-align:center;max-width:200px;text-decoration:none;-webkit-border-radius:4px;-moz-border-radius:4px;border-radius:4px;} +.twipsy-inner{max-width:200px;padding:3px 8px;color:white;text-align:center;text-decoration:none;background-color:#000000;-webkit-border-radius:4px;-moz-border-radius:4px;border-radius:4px;} .twipsy-arrow{position:absolute;width:0;height:0;} -.popover{position:absolute;top:0;left:0;z-index:1000;padding:5px;display:none;}.popover.above .arrow{bottom:0;left:50%;margin-left:-5px;border-left:5px solid transparent;border-right:5px solid transparent;border-top:5px solid #000000;} +.popover{position:absolute;top:0;left:0;z-index:1000;display:none;padding:5px;}.popover.above .arrow{bottom:0;left:50%;margin-left:-5px;border-left:5px solid transparent;border-right:5px solid transparent;border-top:5px solid #000000;} .popover.right .arrow{top:50%;left:0;margin-top:-5px;border-top:5px solid transparent;border-bottom:5px solid transparent;border-right:5px solid #000000;} .popover.below .arrow{top:0;left:50%;margin-left:-5px;border-left:5px solid transparent;border-right:5px solid transparent;border-bottom:5px solid #000000;} .popover.left .arrow{top:50%;right:0;margin-top:-5px;border-top:5px solid transparent;border-bottom:5px solid transparent;border-left:5px solid #000000;} .popover .arrow{position:absolute;width:0;height:0;} -.popover .inner{background-color:#000000;background-color:rgba(0, 0, 0, 0.8);padding:3px;overflow:hidden;width:280px;-webkit-border-radius:6px;-moz-border-radius:6px;border-radius:6px;-webkit-box-shadow:0 3px 7px rgba(0, 0, 0, 0.3);-moz-box-shadow:0 3px 7px rgba(0, 0, 0, 0.3);box-shadow:0 3px 7px rgba(0, 0, 0, 0.3);} -.popover .title{background-color:#f5f5f5;padding:9px 15px;line-height:1;-webkit-border-radius:3px 3px 0 0;-moz-border-radius:3px 3px 0 0;border-radius:3px 3px 0 0;border-bottom:1px solid #eee;} -.popover .content{background-color:#ffffff;padding:14px;-webkit-border-radius:0 0 3px 3px;-moz-border-radius:0 0 3px 3px;border-radius:0 0 3px 3px;-webkit-background-clip:padding-box;-moz-background-clip:padding-box;background-clip:padding-box;}.popover .content p,.popover .content ul,.popover .content ol{margin-bottom:0;} -.media-grid{margin-left:-20px;margin-bottom:0;zoom:1;}.media-grid:before,.media-grid:after{display:table;content:"";zoom:1;*display:inline;} +.popover .inner{padding:3px;width:280px;overflow:hidden;background-color:#000000;background-color:rgba(0, 0, 0, 0.8);-webkit-border-radius:6px;-moz-border-radius:6px;border-radius:6px;-webkit-box-shadow:0 3px 7px rgba(0, 0, 0, 0.3);-moz-box-shadow:0 3px 7px rgba(0, 0, 0, 0.3);box-shadow:0 3px 7px rgba(0, 0, 0, 0.3);} +.popover .title{padding:9px 15px;line-height:1;background-color:#f5f5f5;border-bottom:1px solid #eee;-webkit-border-radius:3px 3px 0 0;-moz-border-radius:3px 3px 0 0;border-radius:3px 3px 0 0;} +.popover .content{padding:14px;background-color:#ffffff;-webkit-border-radius:0 0 3px 3px;-moz-border-radius:0 0 3px 3px;border-radius:0 0 3px 3px;-webkit-background-clip:padding-box;-moz-background-clip:padding-box;background-clip:padding-box;}.popover .content p,.popover .content ul,.popover .content ol{margin-bottom:0;} +.media-grid{margin-left:-20px;margin-bottom:0;zoom:1;}.media-grid:before,.media-grid:after{display:table;*display:inline;content:"";zoom:1;} .media-grid:after{clear:both;} .media-grid li{display:inline;} .media-grid a{float:left;padding:4px;margin:0 0 20px 20px;border:1px solid #ddd;-webkit-border-radius:4px;-moz-border-radius:4px;border-radius:4px;-webkit-box-shadow:0 1px 1px rgba(0, 0, 0, 0.075);-moz-box-shadow:0 1px 1px rgba(0, 0, 0, 0.075);box-shadow:0 1px 1px rgba(0, 0, 0, 0.075);}.media-grid a img{display:block;} diff --git a/docs/assets/css/docs.css b/docs/assets/css/docs.css index b503c23e43..6c57fddabd 100644 --- a/docs/assets/css/docs.css +++ b/docs/assets/css/docs.css @@ -41,36 +41,62 @@ body > .navbar-fixed .brand:hover { /* Github buttons -------------------------------------------------- */ -.github-btn + .github-btn { - margin-left: 10px; -} .github-btn { display: inline-block; height: 20px; overflow: hidden; } -.github-btn .btn, -.github-btn .count { +.github-btn .gh-btn, +.github-btn .gh-count, +.github-btn .gh-ico { float: left; +} +.github-btn .gh-btn, +.github-btn .gh-count { padding: 1px 5px 1px 4px; font-size: 11px; font-weight: bold; line-height: 16px; color: #666; text-shadow: 0 1px 0 #fff; + cursor: pointer; +} +.github-btn .gh-btn { + background-color: #e6e6e6; + background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#ffffff), color-stop(25%, #ffffff), to(#e6e6e6)); + background-image: -webkit-linear-gradient(#ffffff, #ffffff 25%, #e6e6e6); + background-image: -moz-linear-gradient(top, #ffffff, #ffffff 25%, #e6e6e6); + background-image: -ms-linear-gradient(#ffffff, #ffffff 25%, #e6e6e6); + background-image: -o-linear-gradient(#ffffff, #ffffff 25%, #e6e6e6); + background-image: linear-gradient(#ffffff, #ffffff 25%, #e6e6e6); + background-repeat: no-repeat; + border: 1px solid #ccc; + border-bottom-color: #bbb; -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px; + -webkit-box-shadow: inset 0 1px 0 rgba(255,255,255,.2); + -moz-box-shadow: inset 0 1px 0 rgba(255,255,255,.2); + box-shadow: inset 0 1px 0 rgba(255,255,255,.2); } -.github-btn .btn { - box-shadow: none; +.github-btn .gh-btn:hover { + color: #333; + text-decoration: none; + background-position: 0 -10px; } -.github-btn .github-ico { - float: left; +.github-btn .gh-btn:active { + -webkit-box-shadow: inset 0 2px 4px rgba(0,0,0,.15); + -moz-box-shadow: inset 0 2px 4px rgba(0,0,0,.15); + box-shadow: inset 0 2px 4px rgba(0,0,0,.15); +} +.github-btn .gh-ico { margin-right: 4px; opacity: .65; } -.github-btn .count { +.github-btn .gh-btn:hover .gh-ico { + opacity: .75; +} +.github-btn .gh-count { display: inline-block; margin-left: 2px; background-color: #fff; diff --git a/docs/base-css.html b/docs/base-css.html index aa4a2ebfc0..48704cbd49 100644 --- a/docs/base-css.html +++ b/docs/base-css.html @@ -519,7 +519,7 @@ <h2>Table options</h2> <table class="bordered-table striped-table"> - <thead> + <thead> <tr> <th>Name</th> <th>Class</th> @@ -551,7 +551,7 @@ <td> <code>.condensed-table</code> </td> - <td>Cuts padding in half, from 10px to 5px, within all <code>td</code> and <code>th</code> elements</td> + <td>Cuts vertical padding in half, from 8px to 4px, within all <code>td</code> and <code>th</code> elements</td> </tr> </tbody> </table> diff --git a/docs/index.html b/docs/index.html index c9c5df7cdb..977ba5c9d8 100644 --- a/docs/index.html +++ b/docs/index.html @@ -56,6 +56,7 @@ <p class="lead">Bootstrap is a responsive frontend toolkit from Twitter designed to kickstart web development, complete with core HTML, CSS, and JS for grids, type, forms, navigation, and many more components.</p> <p class="download-info"> <a href="#" class="btn primary btn-large">Download on GitHub</a> + <a href="#" class="btn btn-large">Get started</a> Currently v2.0.0 </p> diff --git a/docs/scaffolding.html b/docs/scaffolding.html index 10ad71a748..f330d750d4 100644 --- a/docs/scaffolding.html +++ b/docs/scaffolding.html @@ -162,7 +162,7 @@ </div> <h2>Grid customization</h2> - <table class="striped-table"> + <table class="bordered-table striped-table"> <thead> <tr> <th>Variable</th> @@ -173,12 +173,12 @@ <tbody> <tr> <td><code>@gridColumns</code></td> - <td>16</td> + <td>12</td> <td>The number of columns within the grid</td> </tr> <tr> <td><code>@gridColumnWidth</code></td> - <td>40px</td> + <td>60px</td> <td>The width of each column within the grid</td> </tr> <tr> @@ -274,7 +274,7 @@ <div class="span8"> <h2>Supported devices</h2> <p>Bootstrap supports a handful of media queries to help make your projects more appropriate on different devices and screen resolutions. Here's what's included:</p> - <table class="striped-table"> + <table class="bordered-table striped-table"> <thead> <tr> <th>Label</th> diff --git a/lib/tables.less b/lib/tables.less index 4aed466b11..c8cda1cf9c 100644 --- a/lib/tables.less +++ b/lib/tables.less @@ -4,45 +4,41 @@ * ---------------------------------------- */ + // BASELINE STYLES // --------------- table { width: 100%; - padding: 0; margin-bottom: @baseLineHeight; - font-size: @baseFontSize; - border-collapse: collapse; - th, - td { - padding: 10px 10px 9px; - line-height: @baseLineHeight; - text-align: left; - } - th { - padding-top: 9px; - font-weight: bold; - vertical-align: middle; - } - td { - vertical-align: top; - border-top: 1px solid #ddd; - } - // When scoped to row, fix th in tbody - tbody th { - border-top: 1px solid #ddd; - vertical-align: top; - } +} +th, +td { + padding: 8px; + line-height: @baseLineHeight; + text-align: left; + border-bottom: 1px solid #ddd; +} +th { + font-weight: bold; + vertical-align: bottom; +} +td { + vertical-align: top; +} +tbody tr:last-child th, +tbody tr:last-child td { + border-bottom: 0; } -// CONDENSED VERSION -// ----------------- +// CONDENSED TABLE W/ HALF PADDING +// ------------------------------- .condensed-table { th, td { - padding: 5px 5px 4px; + padding: 4px 5px; } } @@ -53,13 +49,14 @@ table { .bordered-table { border: 1px solid #ddd; border-collapse: separate; // Done so we can round those corners! - *border-collapse: collapse; /* IE7, collapse table to remove spacing */ .border-radius(4px); th + th, td + td, - th + td { + th + td, + td + th { border-left: 1px solid #ddd; } + // For first th or td in the first row in the first thead or tbody thead:first-child tr:first-child th:first-child, tbody:first-child tr:first-child td:first-child { .border-radius(4px 0 0 0); @@ -68,15 +65,34 @@ table { tbody:first-child tr:first-child td:last-child { .border-radius(0 4px 0 0); } - tbody tr:last-child td:first-child { + // For first th or td in the first row in the first thead or tbody + thead:last-child tr:last-child th:first-child, + tbody:last-child tr:last-child td:first-child { .border-radius(0 0 0 4px); } - tbody tr:last-child td:last-child { + thead:last-child tr:last-child th:last-child, + tbody:last-child tr:last-child td:last-child { .border-radius(0 0 4px 0); } } +// ZEBRA-STRIPING +// -------------- + +// Default zebra-stripe styles (alternating gray and transparent backgrounds) +.striped-table { + tbody { + tr:nth-child(odd) td, + tr:nth-child(odd) th { + background-color: #f9f9f9; + } + } +} + + + +/* // ---------------- // This is a duplication of the main grid .columns() mixin, but subtracts 20px to account for input padding and border @@ -104,24 +120,6 @@ table { } -// ZEBRA-STRIPING -// -------------- - -// Default zebra-stripe styles (alternating gray and transparent backgrounds) -.striped-table { - tbody { - tr:nth-child(odd) td, - tr:nth-child(odd) th { - background-color: #f9f9f9; - } - tr:hover td, - tr:hover th { - background-color: #f5f5f5; - } - } -} - - // TABLESORTER // ----------- @@ -225,4 +223,4 @@ table { .headerSortDown.purple { background-color: lighten(@purple, 40%); } -} \ No newline at end of file +}*/ \ No newline at end of file -- GitLab From 61e84d8762d79befb2d75685705fd4e451a609fe Mon Sep 17 00:00:00 2001 From: Evan Meagher <evan.meagher@gmail.com> Date: Tue, 29 Nov 2011 23:16:09 -0800 Subject: [PATCH 108/318] Add vertical nav divider. --- lib/patterns.less | 9 +++++++++ 1 file changed, 9 insertions(+) diff --git a/lib/patterns.less b/lib/patterns.less index 15c3c9c067..a2d512339d 100644 --- a/lib/patterns.less +++ b/lib/patterns.less @@ -157,6 +157,15 @@ background-color: #222; background-color: rgba(0,0,0,.5); } + // Dividers (basically a vertical hr) + .divider { + height: 40px; + width: 1px; + margin: 0 5px; + overflow: hidden; + background-color: #222; + border-right: 1px solid #444; + } // Secondary (floated right) nav in topbar &.secondary-nav { -- GitLab From 0c8d2e37e76db3d3b47ca9eb5340def031b9196b Mon Sep 17 00:00:00 2001 From: Mark Otto <markdotto@gmail.com> Date: Tue, 29 Nov 2011 23:16:38 -0800 Subject: [PATCH 109/318] adding bordered table to docs and showing it works with colspan --- docs/base-css.html | 39 +++++++++++++++++++++++++++++++++++++-- 1 file changed, 37 insertions(+), 2 deletions(-) diff --git a/docs/base-css.html b/docs/base-css.html index bab55f0e44..7626d1668e 100644 --- a/docs/base-css.html +++ b/docs/base-css.html @@ -630,7 +630,42 @@ <table class="striped-table"> ... </table></pre> - <h3>3. Condensed table</h3> + <h3>3. Bordered table</h3> + <p>Add borders around the entire table and between each row, plus a bit of rounded corners for aesthetic purposes.</p> + <table class="bordered-table"> + <thead> + <tr> + <th>#</th> + <th>First Name</th> + <th>Last Name</th> + <th>Language</th> + </tr> + </thead> + <tbody> + <tr> + <td>1</td> + <td colspan="2">Some One</td> + <td>English</td> + </tr> + <tr> + <td colspan="2">2 Joe</td> + <td>Sixpack</td> + <td>English</td> + </tr> + <tr> + <td>3</td> + <td>Stu</td> + <td>Dent</td> + <td>Code</td> + </tr> + </tbody> + </table> + <p><strong>Note:</strong> Zebra-striping is a progressive enhancement not available for older browsers like IE8 and below.</p> +<pre class="prettyprint linenums"> +<table class="striped-table"> + ... +</table></pre> + <h3>4. Condensed table</h3> <p>Make your tables more compact by adding the <code>.condensed-table</code> class to cut table cell padding in half (from 10px to 5px).</p> <table class="condensed-table"> <thead> @@ -666,7 +701,7 @@ <table class="condensed-table"> ... </table></pre> - <h3>4. Striped table w/ TableSorter.js</h3> + <h3>5. Striped table w/ TableSorter.js</h3> <p>Taking the previous example, we improve the usefulness of our tables by providing sorting functionality via <a href="http://jquery.com">jQuery</a> and the <a href="http://tablesorter.com/docs/">Tablesorter</a> plugin. <strong>Click any column’s header to change the sort.</strong></p> <table class="striped-table" id="sortTableExample"> <thead> -- GitLab From 90c190d4efedd4080c574b34bffdf54cd5b9ed88 Mon Sep 17 00:00:00 2001 From: Mark Otto <markdotto@gmail.com> Date: Tue, 29 Nov 2011 23:48:27 -0800 Subject: [PATCH 110/318] updates to add warning for bordered tables to docs, fix to spacing on prettyprint pre blocks --- bootstrap.css | 5 ++++- bootstrap.min.css | 3 ++- docs/base-css.html | 9 ++++++++- lib/type.less | 5 +++++ 4 files changed, 19 insertions(+), 3 deletions(-) diff --git a/bootstrap.css b/bootstrap.css index 6c5e58b712..aa852460ec 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: Tue Nov 29 22:53:00 PST 2011 + * Date: Tue Nov 29 23:48:09 PST 2011 */ html, body { margin: 0; @@ -514,6 +514,9 @@ pre { white-space: pre-wrap; word-break: break-all; } +pre.prettyprint { + margin-bottom: 18px; +} pre code { padding: 0; background-color: transparent; diff --git a/bootstrap.min.css b/bootstrap.min.css index 7e9e633ae4..e7505341e0 100644 --- a/bootstrap.min.css +++ b/bootstrap.min.css @@ -89,7 +89,8 @@ blockquote.pull-right{float:right;}blockquote.pull-right p,blockquote.pull-right address{display:block;margin-bottom:18px;line-height:18px;} code,pre{padding:0 3px 2px;font-family:"Menlo",Monaco,Courier New,monospace;font-size:12px;color:#404040;-webkit-border-radius:3px;-moz-border-radius:3px;border-radius:3px;} code{padding:1px 3px;background-color:#fee9cc;} -pre{display:block;padding:8.5px;margin:0 0 9px;font-size:12px;line-height:18px;background-color:#f5f5f5;border:1px solid #ccc;border:1px solid rgba(0, 0, 0, 0.15);-webkit-border-radius:3px;-moz-border-radius:3px;border-radius:3px;white-space:pre;white-space:pre-wrap;word-break:break-all;}pre code{padding:0;background-color:transparent;} +pre{display:block;padding:8.5px;margin:0 0 9px;font-size:12px;line-height:18px;background-color:#f5f5f5;border:1px solid #ccc;border:1px solid rgba(0, 0, 0, 0.15);-webkit-border-radius:3px;-moz-border-radius:3px;border-radius:3px;white-space:pre;white-space:pre-wrap;word-break:break-all;}pre.prettyprint{margin-bottom:18px;} +pre code{padding:0;background-color:transparent;} form{margin-bottom:18px;} legend{display:block;width:100%;margin-bottom:27px;font-size:19.5px;line-height:36px;color:#404040;border-bottom:1px solid #eee;} label,input,select,textarea{font-family:"Helvetica Neue",Helvetica,Arial,sans-serif;font-size:normal;font-weight:13px;line-height:18px;} diff --git a/docs/base-css.html b/docs/base-css.html index 7626d1668e..cc1b4903ce 100644 --- a/docs/base-css.html +++ b/docs/base-css.html @@ -632,6 +632,7 @@ </table></pre> <h3>3. Bordered table</h3> <p>Add borders around the entire table and between each row, plus a bit of rounded corners for aesthetic purposes.</p> + <p><span class="label">Note</span> Bordered tables do not work well with <code>rowspan</code> due to somewhat hacky CSS applied to the tables. Sorry about that!</p> <table class="bordered-table"> <thead> <tr> @@ -648,7 +649,13 @@ <td>English</td> </tr> <tr> - <td colspan="2">2 Joe</td> + <td>2</td> + <td>Joe</td> + <td>Sixpack</td> + <td>English</td> + </tr> + </tr> + <td>Joe</td> <td>Sixpack</td> <td>English</td> </tr> diff --git a/lib/type.less b/lib/type.less index 407a20ec29..bdc99acdfa 100644 --- a/lib/type.less +++ b/lib/type.less @@ -205,6 +205,11 @@ pre { white-space: pre-wrap; word-break: break-all; + // Make prettyprint styles more spaced out for readability + &.prettyprint { + margin-bottom: @baseLineHeight; + } + // Account for some code outputs that place code tags in pre tags code { padding: 0; -- GitLab From 447c9322e96ebd1102115aea01d925536016351a Mon Sep 17 00:00:00 2001 From: Mark Otto <markdotto@gmail.com> Date: Tue, 29 Nov 2011 23:56:01 -0800 Subject: [PATCH 111/318] update all leads on docs pages --- docs/base-css.html | 2 +- docs/components.html | 2 +- docs/index.html | 4 ++-- docs/javascript.html | 2 +- docs/less.html | 2 +- docs/scaffolding.html | 2 +- 6 files changed, 7 insertions(+), 7 deletions(-) diff --git a/docs/base-css.html b/docs/base-css.html index cc1b4903ce..2b7d17b4a0 100644 --- a/docs/base-css.html +++ b/docs/base-css.html @@ -50,7 +50,7 @@ ================================================== --> <header class="jumbotron subhead" id="overview"> <h1>Base CSS</h1> - <p class="lead">The core typography, form, and table styles of Bootstrap</p> + <p class="lead">On top of the scaffolding, basic HTML elements are styled and enhanced with extensible classes to provide a fresh, consistent look and feel.</p> </header> diff --git a/docs/components.html b/docs/components.html index bb2f326b46..c311d20e60 100644 --- a/docs/components.html +++ b/docs/components.html @@ -50,7 +50,7 @@ ================================================== --> <header class="jumbotron subhead" id="overview"> <h1>Components</h1> - <p class="lead">Reusable patterns for navigation, alerts, popovers, and much more</p> + <p class="lead">Dozens of reusable components are built into Bootstrap to provide navigation, alerts, popovers, and much more.</p> </header> diff --git a/docs/index.html b/docs/index.html index 977ba5c9d8..ff7d56976d 100644 --- a/docs/index.html +++ b/docs/index.html @@ -55,8 +55,8 @@ <h1>Bootstrap,<br> from Twitter</h1> <p class="lead">Bootstrap is a responsive frontend toolkit from Twitter designed to kickstart web development, complete with core HTML, CSS, and JS for grids, type, forms, navigation, and many more components.</p> <p class="download-info"> - <a href="#" class="btn primary btn-large">Download on GitHub</a> - <a href="#" class="btn btn-large">Get started</a> + <a href="https://github.com/twitter/bootstrap/" class="btn primary btn-large">Download on GitHub</a> + <a href="./scaffolding.html" class="btn btn-large">Get started</a> Currently v2.0.0 </p> diff --git a/docs/javascript.html b/docs/javascript.html index 2db37a9fe1..09cdc714cb 100644 --- a/docs/javascript.html +++ b/docs/javascript.html @@ -83,7 +83,7 @@ ================================================== --> <header class="jumbotron subhead" id="overview"> <h1>Javascript for Bootstrap</h1> - <p class="lead">Bring Bootstrap's components to life with custom plugins for <a href="http://jquery.com/" target="_blank">jQuery</a> and <a href="http://ender.no.de" target="_blank">Ender</a></p> + <p class="lead">Bring Bootstrap's components to life with flexible, custom javascript plugins for many of our custom components that work with <a href="http://jquery.com/" target="_blank">jQuery</a> and <a href="http://ender.no.de" target="_blank">Ender</a>.</p> </header> diff --git a/docs/less.html b/docs/less.html index 2d35eea267..97d95a3ab9 100644 --- a/docs/less.html +++ b/docs/less.html @@ -50,7 +50,7 @@ ================================================== --> <header class="jumbotron subhead" id="overview"> <h1>Using LESS with Bootstrap</h1> - <p class="lead">Be a boss and use Bootstrap's built-in variables, mixins, and more via LESS</p> + <p class="lead">Customize and extend Bootstrap with <a href="http://lesscss.org" target="_blank">LESS</a>, a CSS preprocessor, to take advantage of the variables, mixins, and more used to build Bootstrap's CSS.</p> </header> diff --git a/docs/scaffolding.html b/docs/scaffolding.html index f330d750d4..d4d1c65262 100644 --- a/docs/scaffolding.html +++ b/docs/scaffolding.html @@ -50,7 +50,7 @@ ================================================== --> <header class="jumbotron subhead" id="overview"> <h1>Scaffolding</h1> - <p class="lead">Responsive 12-column grid and fixed- and fluid-width layouts</p> + <p class="lead">Bootstrap is built on a responsive 12-column grid. We've also included fixed- and fluid-width layouts based on that system.</p> </header> -- GitLab From f2c40ee24d0caa26e79ed206370858918c603419 Mon Sep 17 00:00:00 2001 From: Mark Otto <markdotto@gmail.com> Date: Wed, 30 Nov 2011 00:39:38 -0800 Subject: [PATCH 112/318] adding step nav to components --- bootstrap.css | 44 +++++++++++++++++++- bootstrap.min.css | 6 +++ docs/assets/css/docs.css | 88 ---------------------------------------- docs/components.html | 22 ++++++++++ lib/tabs-pills.less | 43 ++++++++++++++++++++ 5 files changed, 114 insertions(+), 89 deletions(-) diff --git a/bootstrap.css b/bootstrap.css index aa852460ec..6e10706f77 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: Tue Nov 29 23:48:09 PST 2011 + * Date: Wed Nov 30 00:39:32 PST 2011 */ html, body { margin: 0; @@ -2088,6 +2088,48 @@ button.btn::-moz-focus-inner, input[type=submit].btn::-moz-focus-inner { .tab-content > .active, .pill-content > .active { display: block; } +.step-nav { + position: relative; + margin: 0 0 18px; + list-style: none; + line-height: 30px; + text-align: center; + background-color: #f5f5f5; + -webkit-border-radius: 15px; + -moz-border-radius: 15px; + border-radius: 15px; +} +.step-nav li { + display: inline; + color: #bfbfbf; +} +.step-nav .prev, .step-nav .next { + position: absolute; + top: 6px; +} +.step-nav .prev { + left: 15px; +} +.step-nav .next { + right: 15px; +} +.step-nav .dot { + display: inline-block; + width: 10px; + height: 10px; + margin: 0 3px; + text-indent: -999em; + background-color: #bfbfbf; + -webkit-border-radius: 5px; + -moz-border-radius: 5px; + border-radius: 5px; + -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.25); + -moz-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.25); + box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.25); +} +.step-nav .dot:hover, .step-nav .active .dot { + background-color: #404040; +} .breadcrumb { padding: 7px 14px; margin: 0 0 18px; diff --git a/bootstrap.min.css b/bootstrap.min.css index e7505341e0..7042c7a104 100644 --- a/bootstrap.min.css +++ b/bootstrap.min.css @@ -279,6 +279,12 @@ button.btn::-moz-focus-inner,input[type=submit].btn::-moz-focus-inner{padding:0; .pills-vertical>li{float:none;} .tab-content>.tab-pane,.pill-content>.pill-pane{display:none;} .tab-content>.active,.pill-content>.active{display:block;} +.step-nav{position:relative;margin:0 0 18px;list-style:none;line-height:30px;text-align:center;background-color:#f5f5f5;-webkit-border-radius:15px;-moz-border-radius:15px;border-radius:15px;}.step-nav li{display:inline;color:#bfbfbf;} +.step-nav .prev,.step-nav .next{position:absolute;top:6px;} +.step-nav .prev{left:15px;} +.step-nav .next{right:15px;} +.step-nav .dot{display:inline-block;width:10px;height:10px;margin:0 3px;text-indent:-999em;background-color:#bfbfbf;-webkit-border-radius:5px;-moz-border-radius:5px;border-radius:5px;-webkit-box-shadow:inset 0 1px 1px rgba(0, 0, 0, 0.25);-moz-box-shadow:inset 0 1px 1px rgba(0, 0, 0, 0.25);box-shadow:inset 0 1px 1px rgba(0, 0, 0, 0.25);} +.step-nav .dot:hover,.step-nav .active .dot{background-color:#404040;} .breadcrumb{padding:7px 14px;margin:0 0 18px;background-color:#f5f5f5;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);background-repeat:repeat-x;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;} diff --git a/docs/assets/css/docs.css b/docs/assets/css/docs.css index ec3cd83cb2..a7b52821e3 100644 --- a/docs/assets/css/docs.css +++ b/docs/assets/css/docs.css @@ -39,71 +39,6 @@ body > .navbar-fixed .brand:hover { } -/* Github buttons --------------------------------------------------- */ -.github-btn { - display: inline-block; - height: 20px; - overflow: hidden; -} -.github-btn .gh-btn, -.github-btn .gh-count, -.github-btn .gh-ico { - float: left; -} -.github-btn .gh-btn, -.github-btn .gh-count { - padding: 1px 5px 1px 4px; - font-size: 11px; - font-weight: bold; - line-height: 16px; - color: #666; - text-shadow: 0 1px 0 #fff; - cursor: pointer; -} -.github-btn .gh-btn { - background-color: #e6e6e6; - background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#ffffff), color-stop(25%, #ffffff), to(#e6e6e6)); - background-image: -webkit-linear-gradient(#ffffff, #ffffff 25%, #e6e6e6); - background-image: -moz-linear-gradient(top, #ffffff, #ffffff 25%, #e6e6e6); - background-image: -ms-linear-gradient(#ffffff, #ffffff 25%, #e6e6e6); - background-image: -o-linear-gradient(#ffffff, #ffffff 25%, #e6e6e6); - background-image: linear-gradient(#ffffff, #ffffff 25%, #e6e6e6); - background-repeat: no-repeat; - border: 1px solid #ccc; - border-bottom-color: #bbb; - -webkit-border-radius: 3px; - -moz-border-radius: 3px; - border-radius: 3px; - -webkit-box-shadow: inset 0 1px 0 rgba(255,255,255,.2); - -moz-box-shadow: inset 0 1px 0 rgba(255,255,255,.2); - box-shadow: inset 0 1px 0 rgba(255,255,255,.2); -} -.github-btn .gh-btn:hover { - color: #333; - text-decoration: none; - background-position: 0 -10px; -} -.github-btn .gh-btn:active { - -webkit-box-shadow: inset 0 2px 4px rgba(0,0,0,.15); - -moz-box-shadow: inset 0 2px 4px rgba(0,0,0,.15); - box-shadow: inset 0 2px 4px rgba(0,0,0,.15); -} -.github-btn .gh-ico { - margin-right: 4px; - opacity: .65; -} -.github-btn .gh-btn:hover .gh-ico { - opacity: .75; -} -.github-btn .gh-count { - display: inline-block; - margin-left: 2px; - background-color: #fff; - border: 1px solid #ddd; -} - - /* Jumbotrons -------------------------------------------------- */ .jumbotron { @@ -330,13 +265,6 @@ body > .navbar-fixed .brand:hover { margin-left: 10px; } -/* scrollspy docs */ - -.scrollspy-example { - overflow: auto; - height: 200px; - position: relative; -} /* Popover docs -------------------------------------------------- */ @@ -499,19 +427,3 @@ h2 + table { } } -#accordion dt a{ - display:block; - padding: 9px 15px; - line-height: 1; - background-color: whiteSmoke; - border: 1px solid #EEE; - border-top-color: #fff; -} - -#accordion dt:first-child a { - border-top-color:#eee; -} - -#accordion dd p { - padding: 10px; -} diff --git a/docs/components.html b/docs/components.html index c311d20e60..833f532d9f 100644 --- a/docs/components.html +++ b/docs/components.html @@ -412,6 +412,28 @@ </div> </div> + <!-- Step nav --> + <div class="row"> + <div class="span3"> + <h2>Step nav</h2> + <p>Placeholder for now!</p> + </div> + <div class="span9"> + <br> + <ul class="step-nav"> + <li class="prev"><a href="#">« Overview</a></li> + <li class="active"><a class="dot" href="#">1</a></li> + <li><a class="dot" href="#">2</a></li> + <li><a class="dot" href="#">3</a></li> + <li><a class="dot" href="#">4</a></li> + <li><a class="dot" href="#">5</a></li> + <li class="next"><a href="#">Base CSS »</a></li> + </ul> + <br> + <br> + </div> + </div> + <!-- Pagination --> <div class="row"> <div class="span3"> diff --git a/lib/tabs-pills.less b/lib/tabs-pills.less index 3ff08a6766..7fc73f69cc 100644 --- a/lib/tabs-pills.less +++ b/lib/tabs-pills.less @@ -216,3 +216,46 @@ .pill-content > .active { display: block; } + + +// Step nav +.step-nav { + position: relative; // for prev/next links + margin: 0 0 @baseLineHeight; + list-style: none; + line-height: 30px; + text-align: center; + background-color: #f5f5f5; + .border-radius(15px); + li { + display: inline; + color: @grayLight; + } + // prev/next links + .prev, + .next { + position: absolute; + top: 6px; + } + .prev { + left: 15px; + } + .next { + right: 15px; + } + // indicators for each step/page/item/etc + .dot { + display: inline-block; + width: 10px; + height: 10px; + margin: 0 3px; + text-indent: -999em; + background-color: @grayLight; + .border-radius(5px); + .box-shadow(inset 0 1px 1px rgba(0,0,0,.25)); + } + .dot:hover, + .active .dot { + background-color: @grayDark; + } +} -- GitLab From bc51c15709469fd0c2e78886a15e849626a8f191 Mon Sep 17 00:00:00 2001 From: Mark Otto <markdotto@gmail.com> Date: Wed, 30 Nov 2011 01:00:55 -0800 Subject: [PATCH 113/318] adding temp idea for subnav to docs --- bootstrap.css | 45 ++++++++++++++++++++++++++++++++++++++++++- bootstrap.min.css | 4 ++++ docs/scaffolding.html | 9 +++++++++ lib/tabs-pills.less | 32 ++++++++++++++++++++++++++++++ 4 files changed, 89 insertions(+), 1 deletion(-) diff --git a/bootstrap.css b/bootstrap.css index 6e10706f77..2bef99e1a3 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: Wed Nov 30 00:39:32 PST 2011 + * Date: Wed Nov 30 00:54:47 PST 2011 */ html, body { margin: 0; @@ -2130,6 +2130,49 @@ button.btn::-moz-focus-inner, input[type=submit].btn::-moz-focus-inner { .step-nav .dot:hover, .step-nav .active .dot { background-color: #404040; } +.subnav { + position: relative; + background-color: #eeeeee; + background-image: -khtml-gradient(linear, left top, left bottom, from(#f5f5f5), to(#eeeeee)); + background-image: -moz-linear-gradient(top, #f5f5f5, #eeeeee); + background-image: -ms-linear-gradient(top, #f5f5f5, #eeeeee); + background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #f5f5f5), color-stop(100%, #eeeeee)); + background-image: -webkit-linear-gradient(top, #f5f5f5, #eeeeee); + background-image: -o-linear-gradient(top, #f5f5f5, #eeeeee); + background-image: linear-gradient(top, #f5f5f5, #eeeeee); + background-repeat: repeat-x; + filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#f5f5f5', endColorstr='#eeeeee', GradientType=0); + -webkit-border-radius: 6px; + -moz-border-radius: 6px; + border-radius: 6px; +} +.subnav a { + padding: 10px 15px; + color: #0069d6; + text-shadow: 0 1px 0 #fff; + border-left: 1px solid #f9f9f9; + border-right: 1px solid #e5e5e5; +} +.subnav a:hover { + color: #00438a; + background-color: #eee; +} +.subnav li:first-child a { + border-left: 0; + -webkit-border-radius: 6px 0 0 6px; + -moz-border-radius: 6px 0 0 6px; + border-radius: 6px 0 0 6px; +} +.subnav li:last-child a { + border-right: 0; + -webkit-border-radius: 0 6px 6px 0; + -moz-border-radius: 0 6px 6px 0; + border-radius: 0 6px 6px 0; +} +.subnav ul .active > a { + color: #404040; + background-color: #eee; +} .breadcrumb { padding: 7px 14px; margin: 0 0 18px; diff --git a/bootstrap.min.css b/bootstrap.min.css index 7042c7a104..d8ee06c156 100644 --- a/bootstrap.min.css +++ b/bootstrap.min.css @@ -285,6 +285,10 @@ button.btn::-moz-focus-inner,input[type=submit].btn::-moz-focus-inner{padding:0; .step-nav .next{right:15px;} .step-nav .dot{display:inline-block;width:10px;height:10px;margin:0 3px;text-indent:-999em;background-color:#bfbfbf;-webkit-border-radius:5px;-moz-border-radius:5px;border-radius:5px;-webkit-box-shadow:inset 0 1px 1px rgba(0, 0, 0, 0.25);-moz-box-shadow:inset 0 1px 1px rgba(0, 0, 0, 0.25);box-shadow:inset 0 1px 1px rgba(0, 0, 0, 0.25);} .step-nav .dot:hover,.step-nav .active .dot{background-color:#404040;} +.subnav{position:relative;background-color:#eeeeee;background-image:-khtml-gradient(linear, left top, left bottom, from(#f5f5f5), to(#eeeeee));background-image:-moz-linear-gradient(top, #f5f5f5, #eeeeee);background-image:-ms-linear-gradient(top, #f5f5f5, #eeeeee);background-image:-webkit-gradient(linear, left top, left bottom, color-stop(0%, #f5f5f5), color-stop(100%, #eeeeee));background-image:-webkit-linear-gradient(top, #f5f5f5, #eeeeee);background-image:-o-linear-gradient(top, #f5f5f5, #eeeeee);background-image:linear-gradient(top, #f5f5f5, #eeeeee);background-repeat:repeat-x;filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#f5f5f5', endColorstr='#eeeeee', GradientType=0);-webkit-border-radius:6px;-moz-border-radius:6px;border-radius:6px;}.subnav a{padding:10px 15px;color:#0069d6;text-shadow:0 1px 0 #fff;border-left:1px solid #f9f9f9;border-right:1px solid #e5e5e5;}.subnav a:hover{color:#00438a;background-color:#eee;} +.subnav li:first-child a{border-left:0;-webkit-border-radius:6px 0 0 6px;-moz-border-radius:6px 0 0 6px;border-radius:6px 0 0 6px;} +.subnav li:last-child a{border-right:0;-webkit-border-radius:0 6px 6px 0;-moz-border-radius:0 6px 6px 0;border-radius:0 6px 6px 0;} +.subnav ul .active>a{color:#404040;background-color:#eee;} .breadcrumb{padding:7px 14px;margin:0 0 18px;background-color:#f5f5f5;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);background-repeat:repeat-x;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;} diff --git a/docs/scaffolding.html b/docs/scaffolding.html index d4d1c65262..dd7f05bc64 100644 --- a/docs/scaffolding.html +++ b/docs/scaffolding.html @@ -53,6 +53,15 @@ <p class="lead">Bootstrap is built on a responsive 12-column grid. We've also included fixed- and fluid-width layouts based on that system.</p> </header> + <!-- Work in progress sub nav for docs --> + <div class="navbar subnav docked-top"> + <ul class="nav"> + <li class="active"><a href="#">Grid system</a></li> + <li><a href="#">Layouts</a></li> + <li><a href="#">Responsive</a></li> + </ul> + </div> + <!-- Grid system diff --git a/lib/tabs-pills.less b/lib/tabs-pills.less index 7fc73f69cc..e9b58d04a5 100644 --- a/lib/tabs-pills.less +++ b/lib/tabs-pills.less @@ -259,3 +259,35 @@ background-color: @grayDark; } } + + +// Subnav +// STILL A WIP +.subnav { + position: relative; + #gradient > .vertical(#f5f5f5, #eeeeee); + .border-radius(6px); + a { + padding: 10px 15px; + color: @linkColor; + text-shadow: 0 1px 0 #fff; + border-left: 1px solid #f9f9f9; + border-right: 1px solid #e5e5e5; + &:hover { + color: @linkColorHover; + background-color: #eee; + } + } + li:first-child a { + border-left: 0; + .border-radius(6px 0 0 6px); + } + li:last-child a { + border-right: 0; + .border-radius(0 6px 6px 0); + } + ul .active > a { + color: @grayDark; + background-color: #eee; + } +} \ No newline at end of file -- GitLab From dc628c9115b74e49940c0cc200a8914232c9d2a2 Mon Sep 17 00:00:00 2001 From: Jacob Thornton <jacobthornton@gmail.com> Date: Wed, 30 Nov 2011 22:05:09 -0800 Subject: [PATCH 114/318] start of carousel --- bootstrap.css | 2 +- js/bootstrap-carousel.js | 59 ++++++++++++++++++++++++++++++++++++++++ 2 files changed, 60 insertions(+), 1 deletion(-) create mode 100644 js/bootstrap-carousel.js diff --git a/bootstrap.css b/bootstrap.css index 4c4d85aa9e..462c254a8a 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 Nov 25 21:33:58 PST 2011 + * Date: Mon Nov 28 11:50:42 PST 2011 */ html, body { margin: 0; diff --git a/js/bootstrap-carousel.js b/js/bootstrap-carousel.js new file mode 100644 index 0000000000..9513b4cd21 --- /dev/null +++ b/js/bootstrap-carousel.js @@ -0,0 +1,59 @@ +/* ========================================================== + * bootstrap-carousel.js v2.0.0 + * http://twitter.github.com/bootstrap/javascript.html#alerts + * ========================================================== + * Copyright 2011 Twitter, Inc. + * + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + * ========================================================== */ + + +!function( $ ){ + + "use strict" + + /* CAROUSEL CLASS DEFINITION + * ========================= */ + + var Carousel = function ( el ) { + $(el).delegate(dismiss, 'click', this.close) + } + + Carousel.prototype = { + + } + + + /* CAROUSEL PLUGIN DEFINITION + * ========================== */ + + $.fn.carousel = function ( option ) { + return this.each(function () { + var $this = $(this) + , data = $this.data('alert') + if (!data) $this.data('alert', (data = new Alert(this))) + if (typeof option == 'string') data[option].call($this) + }) + } + + $.fn.carousel.Carousel = Carousel + + + /* CAROUSEL DATA-API + * ================= */ + + // $(function () { + // $('body').delegate(dismiss, 'click.alert.data-api', Alert.prototype.close) + // }) + +}( window.jQuery || window.ender ) \ No newline at end of file -- GitLab From cee2f61898f4807311402fed747a93ee68a31f8f Mon Sep 17 00:00:00 2001 From: Jacob Thornton <jacobthornton@gmail.com> Date: Wed, 30 Nov 2011 22:42:22 -0800 Subject: [PATCH 115/318] define constructor on prototypes --- docs/javascript.html | 2 +- js/bootstrap-alert.js | 4 +++- js/bootstrap-button.js | 4 +++- js/bootstrap-collapse.js | 4 +++- js/bootstrap-dropdown.js | 4 +++- js/bootstrap-modal.js | 4 +++- js/bootstrap-popover.js | 4 +++- js/bootstrap-scrollspy.js | 4 +++- js/bootstrap-tab.js | 4 +++- js/bootstrap-twipsy.js | 8 +++++--- 10 files changed, 30 insertions(+), 12 deletions(-) diff --git a/docs/javascript.html b/docs/javascript.html index 09cdc714cb..c541d57fbd 100644 --- a/docs/javascript.html +++ b/docs/javascript.html @@ -757,7 +757,7 @@ $('a[data-toggle="tab"]').bind('shown', function (e) { </section> - <!-- Button + <!-- Button ================================================== --> <section id="button"> diff --git a/js/bootstrap-alert.js b/js/bootstrap-alert.js index 210512a8b3..0691300808 100644 --- a/js/bootstrap-alert.js +++ b/js/bootstrap-alert.js @@ -32,7 +32,9 @@ Alert.prototype = { - close: function ( e ) { + constructor: Alert + + , close: function ( e ) { var $element = $(this) $element = $element.hasClass('alert-message') ? $element : $element.parent() diff --git a/js/bootstrap-button.js b/js/bootstrap-button.js index 1cafe4d688..4ed24d98b9 100644 --- a/js/bootstrap-button.js +++ b/js/bootstrap-button.js @@ -31,7 +31,9 @@ Button.prototype = { - setState: function (state) { + constructor: Button + + , setState: function (state) { var d = 'disabled' , $el = this.$element , data = $el.data() diff --git a/js/bootstrap-collapse.js b/js/bootstrap-collapse.js index 93f91513e3..f56f6c7050 100644 --- a/js/bootstrap-collapse.js +++ b/js/bootstrap-collapse.js @@ -34,7 +34,9 @@ Collapse.prototype = { - dimension: function () { + constructor: Collapse + + , dimension: function () { var hasWidth = this.$element.hasClass('width') return hasWidth ? 'width' : 'height' } diff --git a/js/bootstrap-dropdown.js b/js/bootstrap-dropdown.js index 7259284bfe..238a52e086 100644 --- a/js/bootstrap-dropdown.js +++ b/js/bootstrap-dropdown.js @@ -32,7 +32,9 @@ Dropdown.prototype = { - toggle: function ( e ) { + constructor: Dropdown + + , toggle: function ( e ) { var li = $(this).parent('li') , isActive = li.hasClass('open') diff --git a/js/bootstrap-modal.js b/js/bootstrap-modal.js index 5f543c5537..189bcf2acc 100644 --- a/js/bootstrap-modal.js +++ b/js/bootstrap-modal.js @@ -34,7 +34,9 @@ Modal.prototype = { - toggle: function () { + constructor: Modal + + , toggle: function () { return this[!this.isShown ? 'show' : 'hide']() } diff --git a/js/bootstrap-popover.js b/js/bootstrap-popover.js index 3c67b18fc2..890f6efc0b 100644 --- a/js/bootstrap-popover.js +++ b/js/bootstrap-popover.js @@ -34,7 +34,9 @@ Popover.prototype = $.extend({}, $.fn.twipsy.Twipsy.prototype, { - setContent: function () { + constructor: Popover + + , setContent: function () { var $tip = this.tip() , title = this.getTitle() , content = this.getContent() diff --git a/js/bootstrap-scrollspy.js b/js/bootstrap-scrollspy.js index fe34019ffc..8248b6cbdd 100644 --- a/js/bootstrap-scrollspy.js +++ b/js/bootstrap-scrollspy.js @@ -39,7 +39,9 @@ ScrollSpy.prototype = { - refresh: function () { + constructor: ScrollSpy + + , refresh: function () { this.targets = this.$body .find(this.selector) .map(function () { diff --git a/js/bootstrap-tab.js b/js/bootstrap-tab.js index ba956cbe86..6aa8ae32cf 100644 --- a/js/bootstrap-tab.js +++ b/js/bootstrap-tab.js @@ -31,7 +31,9 @@ Tab.prototype = { - show: function () { + constructor: Tab + + , show: function () { var $this = this.element , $ul = $this.closest('ul:not(.dropdown-menu)') , href = $this.attr('data-target') || $this.attr('href') diff --git a/js/bootstrap-twipsy.js b/js/bootstrap-twipsy.js index fe4469a232..ca8ac8800f 100644 --- a/js/bootstrap-twipsy.js +++ b/js/bootstrap-twipsy.js @@ -34,7 +34,9 @@ Twipsy.prototype = { - show: function() { + constructor: Twipsy + + , show: function() { var pos , actualWidth , actualHeight @@ -183,7 +185,7 @@ return this } - $.fn.twipsy.initWith = function (options, Constructor, name) { + $.fn.twipsy.initWith = function (options, Base, name) { var twipsy , binder , eventIn @@ -209,7 +211,7 @@ var twipsy = $.data(ele, name) if (!twipsy) { - twipsy = new Constructor(ele, $.fn.twipsy.elementOptions(ele, options)) + twipsy = new Base(ele, $.fn.twipsy.elementOptions(ele, options)) $.data(ele, name, twipsy) } -- GitLab From 6e70d490e1c189518164d7f08035c34e21745715 Mon Sep 17 00:00:00 2001 From: Evan Meagher <evan.meagher@gmail.com> Date: Fri, 2 Dec 2011 11:37:39 -0800 Subject: [PATCH 116/318] Add vertical nav divider example in components doc page. --- bootstrap.css | 10 +++++++++- bootstrap.min.css | 1 + docs/components.html | 1 + 3 files changed, 11 insertions(+), 1 deletion(-) diff --git a/bootstrap.css b/bootstrap.css index afd87d1372..977737f67b 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: Wed Nov 30 22:05:44 PST 2011 + * Date: Fri Dec 2 11:32:48 PST 2011 */ html, body { margin: 0; @@ -1313,6 +1313,14 @@ table { background-color: #222; background-color: rgba(0, 0, 0, 0.5); } +.nav .divider { + height: 40px; + width: 1px; + margin: 0 5px; + overflow: hidden; + background-color: #222; + border-right: 1px solid #444; +} .nav.secondary-nav { float: right; margin-left: 10px; diff --git a/bootstrap.min.css b/bootstrap.min.css index d8ee06c156..37e9667846 100644 --- a/bootstrap.min.css +++ b/bootstrap.min.css @@ -189,6 +189,7 @@ tbody tr:last-child th,tbody tr:last-child td{border-bottom:0;} .nav{position:relative;left:0;display:block;float:left;margin:0 10px 0 0;}.nav>li{display:block;float:left;} .nav a{display:block;float:none;padding:10px 10px 11px;line-height:19px;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 .divider{height:40px;width:1px;margin:0 5px;overflow:hidden;background-color:#222;border-right:1px solid #444;} .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);} diff --git a/docs/components.html b/docs/components.html index 833f532d9f..ba9542fdb2 100644 --- a/docs/components.html +++ b/docs/components.html @@ -180,6 +180,7 @@ <input type="text" class="search-query span2" placeholder="Search"> </form> <ul class="nav secondary-nav"> + <li class="divider"></li> <li class="dropdown"> <a href="#" class="dropdown-toggle">Dropdown</a> <ul class="dropdown-menu"> -- GitLab From e603009fca162178de3265192b2e5da40ce3a151 Mon Sep 17 00:00:00 2001 From: Chris Sternal-Johnson <chris@sternal-johnson.com> Date: Thu, 8 Dec 2011 14:42:42 -0500 Subject: [PATCH 117/318] fix docs for bordered-table --- docs/base-css.html | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/docs/base-css.html b/docs/base-css.html index 2b7d17b4a0..a9529821b9 100644 --- a/docs/base-css.html +++ b/docs/base-css.html @@ -667,9 +667,8 @@ </tr> </tbody> </table> - <p><strong>Note:</strong> Zebra-striping is a progressive enhancement not available for older browsers like IE8 and below.</p> <pre class="prettyprint linenums"> -<table class="striped-table"> +<table class="bordered-table"> ... </table></pre> <h3>4. Condensed table</h3> -- GitLab From b12b71bf7ca76437a532122d8efff59506b61530 Mon Sep 17 00:00:00 2001 From: Mark Otto <markdotto@gmail.com> Date: Fri, 9 Dec 2011 11:32:07 -0800 Subject: [PATCH 118/318] updated to include sub nav and pip nav, new docs updates, topbar nav refinements for media queried settings --- bootstrap.css | 216 +++++++++++++++++++++------------ bootstrap.min.css | 7 +- docs/assets/css/docs.css | 15 +-- docs/assets/img/less-small.png | Bin 0 -> 2235 bytes docs/index.html | 14 ++- docs/less.html | 51 +------- docs/scaffolding.html | 9 -- lib/patterns.less | 3 - lib/responsive.less | 90 ++++++++++---- lib/tabs-pills.less | 7 +- 10 files changed, 234 insertions(+), 178 deletions(-) create mode 100644 docs/assets/img/less-small.png diff --git a/bootstrap.css b/bootstrap.css index 2bef99e1a3..d0c78d0370 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: Wed Nov 30 00:54:47 PST 2011 + * Date: Fri Dec 9 11:23:25 PST 2011 */ html, body { margin: 0; @@ -1175,7 +1175,6 @@ table { } }*/ .navbar { - height: 40px; overflow: visible; } .navbar-inner { @@ -2131,7 +2130,6 @@ button.btn::-moz-focus-inner, input[type=submit].btn::-moz-focus-inner { background-color: #404040; } .subnav { - position: relative; background-color: #eeeeee; background-image: -khtml-gradient(linear, left top, left bottom, from(#f5f5f5), to(#eeeeee)); background-image: -moz-linear-gradient(top, #f5f5f5, #eeeeee); @@ -2142,12 +2140,13 @@ button.btn::-moz-focus-inner, input[type=submit].btn::-moz-focus-inner { background-image: linear-gradient(top, #f5f5f5, #eeeeee); background-repeat: repeat-x; filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#f5f5f5', endColorstr='#eeeeee', GradientType=0); - -webkit-border-radius: 6px; - -moz-border-radius: 6px; - border-radius: 6px; + -webkit-box-shadow: inset 0 1px 0 #ffffff, 0 0 5px rgba(0, 0, 0, 0.5); + -moz-box-shadow: inset 0 1px 0 #ffffff, 0 0 5px rgba(0, 0, 0, 0.5); + box-shadow: inset 0 1px 0 #ffffff, 0 0 5px rgba(0, 0, 0, 0.5); } .subnav a { - padding: 10px 15px; + padding: 8px 10px; + font-size: 12px; color: #0069d6; text-shadow: 0 1px 0 #fff; border-left: 1px solid #f9f9f9; @@ -2515,44 +2514,35 @@ button.btn::-moz-focus-inner, input[type=submit].btn::-moz-focus-inner { -moz-box-shadow: 0 1px 4px rgba(0, 105, 214, 0.25); box-shadow: 0 1px 4px rgba(0, 105, 214, 0.25); } +.hidden { + display: none; + visibility: hidden; +} @media (max-width: 480px) { - .container { - width: auto; - padding: 0 15px; - } - .row { - margin-left: 0; - } - [class*="span"] { - float: none; - display: block; - width: auto; - margin: 0; - } .modal { width: auto; margin: 0; } - .form-horizontal .control-group > label { + .horizontal-form .control-group > label { float: none; width: auto; padding-top: 0; text-align: left; } - .form-horizontal .controls { + .horizontal-form .controls { margin-left: 0; } - .form-horizontal .control-list { + .horizontal-form .control-list { padding-top: 0; } - .form-horizontal .form-actions { + .horizontal-form .form-actions { padding-left: 0; } } -@media (min-width: 480px) and (max-width: 768px) { +@media (max-width: 768px) { .container { width: auto; - padding: 0 10px; + padding: 0 20px; } .row { margin-left: 0; @@ -2563,6 +2553,55 @@ button.btn::-moz-focus-inner, input[type=submit].btn::-moz-focus-inner { width: auto; margin: 0; } + .nav { + position: absolute; + top: 0; + left: 0; + width: 180px; + padding-top: 40px; + list-style: none; + } + .nav, .nav > li:last-child a { + -webkit-border-radius: 0 0 4px 0; + -moz-border-radius: 0 0 4px 0; + border-radius: 0 0 4px 0; + } + .nav > li { + float: none; + display: none; + } + .nav > li > a { + float: none; + background-color: #222; + } + .nav > .active { + display: block; + position: absolute; + top: 0; + left: 0; + } + .navbar ul .active > a { + background-color: transparent; + } + .nav > .active a:after { + display: inline-block; + width: 0; + height: 0; + margin-top: 8px; + margin-left: 6px; + text-indent: -99999px; + vertical-align: top; + border-left: 4px solid transparent; + border-right: 4px solid transparent; + border-top: 4px solid #ffffff; + filter: alpha(opacity=100); + -moz-opacity: 1; + opacity: 1; + content: "↓"; + } + .nav > .active a:hover { + background-color: rgba(255, 255, 255, 0.05); + } } @media (min-width: 768px) and (max-width: 940px) { .container { @@ -2641,60 +2680,83 @@ button.btn::-moz-focus-inner, input[type=submit].btn::-moz-focus-inner { margin-left: 768px; } } -/* -// LARGE DESKTOP & UP -// ------------------ - @media (min-width: 1210px) { - - // Reset grid variables - @gridColumns: 12; - @gridColumnWidth: 70px; - @gridGutterWidth: 30px; - @siteWidth: 1170px; - - // Bring grid mixins to recalculate widths - .columns(@columnSpan: 1) { - width: (@gridColumnWidth * @columnSpan) + (@gridGutterWidth * (@columnSpan - 1)); - } - .offset(@columnOffset: 1) { - margin-left: (@gridColumnWidth * @columnOffset) + (@gridGutterWidth * (@columnOffset - 1)) + @gridGutterWidth; - } - .container { - width: @siteWidth; + width: 1170px; } [class*="span"] { - margin-left: @gridGutterWidth; + margin-left: 30px; + } + .span1 { + width: 70px; + } + .span2 { + width: 170px; + } + .span3 { + width: 270px; + } + .span4 { + width: 370px; + } + .span5 { + width: 470px; + } + .span6 { + width: 570px; + } + .span7 { + width: 670px; + } + .span8 { + width: 770px; + } + .span9 { + width: 870px; + } + .span10 { + width: 970px; + } + .span11 { + width: 1070px; + } + .span12 { + width: 1170px; + } + .offset1 { + margin-left: 100px; + } + .offset2 { + margin-left: 200px; + } + .offset3 { + margin-left: 300px; + } + .offset4 { + margin-left: 400px; + } + .offset5 { + margin-left: 500px; + } + .offset6 { + margin-left: 600px; + } + .offset7 { + margin-left: 700px; + } + .offset8 { + margin-left: 800px; + } + .offset9 { + margin-left: 900px; + } + .offset10 { + margin-left: 1000px; + } + .offset11 { + margin-left: 1100px; + } + .offset12 { + margin-left: 1200px; } - - // Default columns - .span1 { .columns(1); } - .span2 { .columns(2); } - .span3 { .columns(3); } - .span4 { .columns(4); } - .span5 { .columns(5); } - .span6 { .columns(6); } - .span7 { .columns(7); } - .span8 { .columns(8); } - .span9 { .columns(9); } - .span10 { .columns(10); } - .span11 { .columns(11); } - .span12 { .columns(12); } - - // Offset column options - .offset1 { .offset(1); } - .offset2 { .offset(2); } - .offset3 { .offset(3); } - .offset4 { .offset(4); } - .offset5 { .offset(5); } - .offset6 { .offset(6); } - .offset7 { .offset(7); } - .offset8 { .offset(8); } - .offset9 { .offset(9); } - .offset10 { .offset(10); } - .offset11 { .offset(11); } - .offset12 { .offset(12); } - } -*/ \ No newline at end of file diff --git a/bootstrap.min.css b/bootstrap.min.css index d8ee06c156..4ee8f84faa 100644 --- a/bootstrap.min.css +++ b/bootstrap.min.css @@ -173,7 +173,7 @@ tbody tr:last-child th,tbody tr:last-child td{border-bottom:0;} .bordered-table thead:last-child tr:last-child th:first-child,.bordered-table tbody:last-child tr:last-child td:first-child{-webkit-border-radius:0 0 0 4px;-moz-border-radius:0 0 0 4px;border-radius:0 0 0 4px;} .bordered-table thead:last-child tr:last-child th:last-child,.bordered-table tbody:last-child tr:last-child td:last-child{-webkit-border-radius:0 0 4px 0;-moz-border-radius:0 0 4px 0;border-radius:0 0 4px 0;} .striped-table tbody tr:nth-child(odd) td,.striped-table tbody tr:nth-child(odd) th{background-color:#f9f9f9;} -.navbar{height:40px;overflow:visible;} +.navbar{overflow:visible;} .navbar-inner{background-color:#222222;background-color:#222222;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);background-repeat:repeat-x;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);} .navbar a{color:#bfbfbf;text-shadow:0 -1px 0 rgba(0, 0, 0, 0.25);} .navbar .brand a:hover,.navbar ul .active>a{color:#ffffff;text-decoration:none;background-color:#333333;background-color:rgba(255, 255, 255, 0.05);} @@ -285,7 +285,7 @@ button.btn::-moz-focus-inner,input[type=submit].btn::-moz-focus-inner{padding:0; .step-nav .next{right:15px;} .step-nav .dot{display:inline-block;width:10px;height:10px;margin:0 3px;text-indent:-999em;background-color:#bfbfbf;-webkit-border-radius:5px;-moz-border-radius:5px;border-radius:5px;-webkit-box-shadow:inset 0 1px 1px rgba(0, 0, 0, 0.25);-moz-box-shadow:inset 0 1px 1px rgba(0, 0, 0, 0.25);box-shadow:inset 0 1px 1px rgba(0, 0, 0, 0.25);} .step-nav .dot:hover,.step-nav .active .dot{background-color:#404040;} -.subnav{position:relative;background-color:#eeeeee;background-image:-khtml-gradient(linear, left top, left bottom, from(#f5f5f5), to(#eeeeee));background-image:-moz-linear-gradient(top, #f5f5f5, #eeeeee);background-image:-ms-linear-gradient(top, #f5f5f5, #eeeeee);background-image:-webkit-gradient(linear, left top, left bottom, color-stop(0%, #f5f5f5), color-stop(100%, #eeeeee));background-image:-webkit-linear-gradient(top, #f5f5f5, #eeeeee);background-image:-o-linear-gradient(top, #f5f5f5, #eeeeee);background-image:linear-gradient(top, #f5f5f5, #eeeeee);background-repeat:repeat-x;filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#f5f5f5', endColorstr='#eeeeee', GradientType=0);-webkit-border-radius:6px;-moz-border-radius:6px;border-radius:6px;}.subnav a{padding:10px 15px;color:#0069d6;text-shadow:0 1px 0 #fff;border-left:1px solid #f9f9f9;border-right:1px solid #e5e5e5;}.subnav a:hover{color:#00438a;background-color:#eee;} +.subnav{background-color:#eeeeee;background-image:-khtml-gradient(linear, left top, left bottom, from(#f5f5f5), to(#eeeeee));background-image:-moz-linear-gradient(top, #f5f5f5, #eeeeee);background-image:-ms-linear-gradient(top, #f5f5f5, #eeeeee);background-image:-webkit-gradient(linear, left top, left bottom, color-stop(0%, #f5f5f5), color-stop(100%, #eeeeee));background-image:-webkit-linear-gradient(top, #f5f5f5, #eeeeee);background-image:-o-linear-gradient(top, #f5f5f5, #eeeeee);background-image:linear-gradient(top, #f5f5f5, #eeeeee);background-repeat:repeat-x;filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#f5f5f5', endColorstr='#eeeeee', GradientType=0);-webkit-box-shadow:inset 0 1px 0 #ffffff,0 0 5px rgba(0, 0, 0, 0.5);-moz-box-shadow:inset 0 1px 0 #ffffff,0 0 5px rgba(0, 0, 0, 0.5);box-shadow:inset 0 1px 0 #ffffff,0 0 5px rgba(0, 0, 0, 0.5);}.subnav a{padding:8px 10px;font-size:12px;color:#0069d6;text-shadow:0 1px 0 #fff;border-left:1px solid #f9f9f9;border-right:1px solid #e5e5e5;}.subnav a:hover{color:#00438a;background-color:#eee;} .subnav li:first-child a{border-left:0;-webkit-border-radius:6px 0 0 6px;-moz-border-radius:6px 0 0 6px;border-radius:6px 0 0 6px;} .subnav li:last-child a{border-right:0;-webkit-border-radius:0 6px 6px 0;-moz-border-radius:0 6px 6px 0;border-radius:0 6px 6px 0;} .subnav ul .active>a{color:#404040;background-color:#eee;} @@ -328,4 +328,5 @@ button.btn::-moz-focus-inner,input[type=submit].btn::-moz-focus-inner{padding:0; .media-grid li{display:inline;} .media-grid a{float:left;padding:4px;margin:0 0 20px 20px;border:1px solid #ddd;-webkit-border-radius:4px;-moz-border-radius:4px;border-radius:4px;-webkit-box-shadow:0 1px 1px rgba(0, 0, 0, 0.075);-moz-box-shadow:0 1px 1px rgba(0, 0, 0, 0.075);box-shadow:0 1px 1px rgba(0, 0, 0, 0.075);}.media-grid a img{display:block;} .media-grid a:hover{border-color:#0069d6;-webkit-box-shadow:0 1px 4px rgba(0, 105, 214, 0.25);-moz-box-shadow:0 1px 4px rgba(0, 105, 214, 0.25);box-shadow:0 1px 4px rgba(0, 105, 214, 0.25);} -@media (max-width: 480px){.container{width:auto;padding:0 15px;} .row{margin-left:0;} [class*="span"]{float:none;display:block;width:auto;margin:0;} .modal{width:auto;margin:0;} .form-horizontal .control-group>label{float:none;width:auto;padding-top:0;text-align:left;} .form-horizontal .controls{margin-left:0;} .form-horizontal .control-list{padding-top:0;} .form-horizontal .form-actions{padding-left:0;}}@media (min-width: 480px) and (max-width: 768px){.container{width:auto;padding:0 10px;} .row{margin-left:0;} [class*="span"]{float:none;display:block;width:auto;margin:0;}}@media (min-width: 768px) and (max-width: 940px){.container{width:748px;} .span1{width:44px;} .span2{width:108px;} .span3{width:172px;} .span4{width:236px;} .span5{width:300px;} .span6{width:364px;} .span7{width:428px;} .span8{width:492px;} .span9{width:556px;} .span10{width:620px;} .span11{width:684px;} .span12{width:748px;} .offset1{margin-left:64px;} .offset2{margin-left:128px;} .offset3{margin-left:192px;} .offset4{margin-left:256px;} .offset5{margin-left:320px;} .offset6{margin-left:384px;} .offset7{margin-left:448px;} .offset8{margin-left:512px;} .offset9{margin-left:576px;} .offset10{margin-left:640px;} .offset11{margin-left:704px;} .offset12{margin-left:768px;}} +.hidden{display:none;visibility:hidden;} +@media (max-width: 480px){.modal{width:auto;margin:0;} .horizontal-form .control-group>label{float:none;width:auto;padding-top:0;text-align:left;} .horizontal-form .controls{margin-left:0;} .horizontal-form .control-list{padding-top:0;} .horizontal-form .form-actions{padding-left:0;}}@media (max-width: 768px){.container{width:auto;padding:0 20px;} .row{margin-left:0;} [class*="span"]{float:none;display:block;width:auto;margin:0;} .nav{position:absolute;top:0;left:0;width:180px;padding-top:40px;list-style:none;} .nav,.nav>li:last-child a{-webkit-border-radius:0 0 4px 0;-moz-border-radius:0 0 4px 0;border-radius:0 0 4px 0;} .nav>li{float:none;display:none;} .nav>li>a{float:none;background-color:#222;} .nav>.active{display:block;position:absolute;top:0;left:0;} .navbar ul .active>a{background-color:transparent;} .nav>.active a:after{display:inline-block;width:0;height:0;margin-top:8px;margin-left:6px;text-indent:-99999px;vertical-align:top;border-left:4px solid transparent;border-right:4px solid transparent;border-top:4px solid #ffffff;filter:alpha(opacity=100);-moz-opacity:1;opacity:1;content:"↓";} .nav>.active a:hover{background-color:rgba(255, 255, 255, 0.05);}}@media (min-width: 768px) and (max-width: 940px){.container{width:748px;} .span1{width:44px;} .span2{width:108px;} .span3{width:172px;} .span4{width:236px;} .span5{width:300px;} .span6{width:364px;} .span7{width:428px;} .span8{width:492px;} .span9{width:556px;} .span10{width:620px;} .span11{width:684px;} .span12{width:748px;} .offset1{margin-left:64px;} .offset2{margin-left:128px;} .offset3{margin-left:192px;} .offset4{margin-left:256px;} .offset5{margin-left:320px;} .offset6{margin-left:384px;} .offset7{margin-left:448px;} .offset8{margin-left:512px;} .offset9{margin-left:576px;} .offset10{margin-left:640px;} .offset11{margin-left:704px;} .offset12{margin-left:768px;}}@media (min-width: 1210px){.container{width:1170px;} [class*="span"]{margin-left:30px;} .span1{width:70px;} .span2{width:170px;} .span3{width:270px;} .span4{width:370px;} .span5{width:470px;} .span6{width:570px;} .span7{width:670px;} .span8{width:770px;} .span9{width:870px;} .span10{width:970px;} .span11{width:1070px;} .span12{width:1170px;} .offset1{margin-left:100px;} .offset2{margin-left:200px;} .offset3{margin-left:300px;} .offset4{margin-left:400px;} .offset5{margin-left:500px;} .offset6{margin-left:600px;} .offset7{margin-left:700px;} .offset8{margin-left:800px;} .offset9{margin-left:900px;} .offset10{margin-left:1000px;} .offset11{margin-left:1100px;} .offset12{margin-left:1200px;}} diff --git a/docs/assets/css/docs.css b/docs/assets/css/docs.css index a7b52821e3..281b224e39 100644 --- a/docs/assets/css/docs.css +++ b/docs/assets/css/docs.css @@ -315,11 +315,6 @@ h2 + table { -------------------------------------------------- */ @media (max-width: 480px) { - /* Hide the nav for now */ - body > .navbar-fixed .nav { - display: none; - } - /* Change up some type stuff */ h1 small { display: block; @@ -365,11 +360,6 @@ h2 + table { @media (max-width: 768px) { - /* Hide the nav for now */ - body > .navbar-fixed .nav { - display: none; - } - /* Adjust the jumbotron */ .jumbotron .benefits { position: relative; @@ -394,6 +384,9 @@ h2 + table { .footer .pull-right { float: none; } + .footer p { + margin-bottom: 9px; + } } @@ -423,7 +416,7 @@ h2 + table { /* Provide enough space on right-hand side for benefits list */ .jumbotron h1, .jumbotron p { - margin-right: 40%; + margin-right: 20%; } } diff --git a/docs/assets/img/less-small.png b/docs/assets/img/less-small.png new file mode 100644 index 0000000000000000000000000000000000000000..763b847e85440003b1fcf6d20cb83a89b21de707 GIT binary patch literal 2235 zcmaJ@dpK0<9v)?E*OJ=DB{3!kb(mR81~W*^r5Q4q#^ppEV`gD6v!<Cf4U-7jNRm{D zp_HhcNS7_iCG5T3+MH9iL{w+DCDKJH)HzE#?eoWRzUNu%`@Y}vzVGk4o@ZtHvA61J zn`mP&7(Et~#zA)*^fA)ZK;Ib$nwrtg7@-Fv+u;aA!IMH54*?tw;aDPGB*cMug81DX zkShkW+)~I5MuL5|QTVWkz+1o&;zSaZjlsCO$4Pkn7zn|ILy<zU8-D6$6CNiNxZ#6H zK7fye3PlN-N-4Bm$>#EvF?_NB@4gx58b?6|L=eKm#ff6YGD@5q{<AIxJujGvc-&_Q z661#dJ*Z$GKO7a7LO2ouu;T-cAkNW&06G9<2eK{B9smI%Xio&3>_C7*a-skr?#sfX z-lT#E3Wvt{;tRdG;iC{lLLm|r3I##2i2zF@i6EIwCIa?EdwV++VJC|hBfK~}v26XK z0u7S!r9ufJgvGc8MP4{8N8Ipeq`#*il6;jF%f6HeEf_J5Cn16aU?HVNppVc0hl)gB z(K3Vs{Soi~6qa%0B@mGV$zZvZk2Wr1{emkAg(`)32rT8oaO`3g{i0w5mPNr59CbU1 z0OEXje4%*3@|oe|Lt%+!2v5w1STr|0szDG61r!>U#BlbcQ$Z(?27+{u>`bRK9LXNe z&I~HU(aC<1ON04x5hO+yxq?5qv?aL<!yuBNo@tO&xCat2q_7D0IcbV;=~z6L)ce8} zEFFvIl3XGh3~`~g|JCY66FNT&$FGBnUcQb#Bu3|5iVk))Gjtq-!P>EC9^AOWp&%Ah z6|`ovZ|NIXjr2;~9qq$d!xgkxeJ+P~I)$61gY8RMV_5H}-=|s|l4&D9gY)7#WK!uj z`<&O8;Rhev%FQGht&`-6hov*tJL&;pM{?K45wha_3&nSPOBtGK|BmcSScU28>UtX# z7&tvP_w1h)7qnViTWgw{h(p7}=EXU(mj3?0)yBr>$NKyG9bV6kjg4I|FaP!F2qqzA za&Ihe;84x*QF{vui+Hhkg|42Sx$5-H)JSSYg|)7(?$xP@3EORKw&UicPYE7_*C_mT zHFBO#(~TR+4<3X70PsHcQbT>c^3muh1_Z$o`JO$AdBw%^ho_a&=JxjX@6}g)<4L2b zA3J`0Ltb@tb@G;^gXj99!glXob-T6o(e(71L)qD?gnj$GZEbC*xw_-epU*v1OMClP ze%wWFm=K#AQ?{2UldW#JbxZ54`2|}W*K0HF>Y3u$f8eL*wquT&;jPZ+-|#3tA6nIF zIkP5}qgkxZv>2V5S~)p63AnreJlRv^q;G0kbx0wXr=2@zRiIL(rKMqwjE$48UUevm z;q#Zv<#K>TDj%r5a>d-WfsksYXz3g^TV}LwonB8*Pw|%Y^z>8rqAhG}G<SrAJi31+ zvgYPZ9eAV>8xs>_mb7Qj5BtG$TYP<2D);Vf>F8iVXAI~QtSRGpmC6KqgDz|5uvJa; zkdUI9+FAp&CZ5{;#ANxly1KfI)YRquBu7VWbqmvV>)KzxwtucvDrviRnI%0@;z2O? zH>|q)%euRFxlm74m2Jt?lPBvduj8+jm6fH4GJb17GdNk3o0ZgjYJ%~LGCL=S%4V<l zF_rLZ?Zkn!G;oup!->SX4<G#dpq)&nW<g=$hSQvY0PN+<my0p^`S}+}-d<jnjkShs zHoIVWd^~#W#S1Hq?5u+a6I<fj1)+J?ce=Y9%D4Nss&xu4Pb9RB?@J*Vn3<V{$Hs0e z9~m4p2xc5msZ>TLCY<|#B`q}6bQ5zfTvMy9&9OUL?cKX~*NtAf<C|q115IylZ~x%n z%4N*@`S}F;FZb^KIXXJJtt+2M7m4h?@9gw?m@#xRH`gK}BI5n1f#owTnwOWhx#!^F zoE+?9{a3GERh{`R_S3<$34gc5{1Et!9zy|!1b2K3V6j+T{hgI#HoKVVEk9>J^;>@; zYSa0okF(cqUn(jp>g@0BJyo@J_rS;qvCzfd$!X;yj<s4i<KB_nqx;#<CMLSGI@>d| zhlWDg>KhQF9f(A7WO$W{NoS^qm|6{B!qX2JWQMXF!%GV);9<9|Tep6gF}Km|4aDku z%v<tPG*-J50LT2j0y$5Q>bOuSYhH4GDmixSthU|;^^%QSl*;<Yfx|}Vha_NFTUiCC zSC>Lse(^nFALop(SVzKe&fg3<ut3mOnB|La)Hq%y48Q$WXSnlP&ZP~mx<MFM)3Dm! z<JgNAFV@_;)f2Ga{#z#vgfz2u?b@NA7;k#l&aY@DH}QoBn+5lSv`HtDV=m-yttu;O zx8zk;=)M2cXXEQks710WABv+YQvIJ5l#~QME7#k3$LY`|pLg7=Q#F#zz@2imH&kxL z*j=N6u;}OuH8xJ~^}Ew2Egrb{oN>!IGCQkm<S}PwXa98BCBQAXFJQ;ny6znJfg zKKyE#QMbA1<$&j0URP$o#)0Zxw@%)EU}IRAsF=z#=UW?9U$1_7=V}YBH}UX~8`~qe v+`Cw-4(&#*B<iW8#J?t;{N(+?d%qfnrBmPVuTj_C3%?UAI-7RMGc4sl8Qq%6 literal 0 HcmV?d00001 diff --git a/docs/index.html b/docs/index.html index ff7d56976d..16eed36c84 100644 --- a/docs/index.html +++ b/docs/index.html @@ -151,7 +151,7 @@ <p>What good is an awesome design component without easy-to-use, proper, and extensible interactions? With Bootstrap, you get custom-built jQuery plugins to bring your projects to life.</p> </div> <div class="span4"> - <img class="icon" src="assets/img/glyphicons/glyphicons_155_show_thumbnails.png"> + <img class="icon" src="assets/img/less-small.png"> <h2>Built on LESS</h2> <p>Where vanilla CSS falters, LESS excels. Variables, nesting, operations, and mixins in LESS makes coding CSS faster and more efficient with minimal overhead.</p> </div> @@ -175,7 +175,7 @@ <div class="span3"> <img class="small-icon" src="assets/img/icon-twitter.png"> <h3>Made at Twitter</h3> - <p>Brought to you by experienced engineers and designers.</p> + <p>Brought to you by an experienced <a href="http://twitter.com/fat">engineer</a> and <a href="http://twitter.com/mdo">designer</a>.</p> </div> </div><!--/row--> </div> @@ -196,6 +196,16 @@ <!-- Le javascript --> <!-- Placed at the end of the document so the pages load faster --> <script src="http://code.jquery.com/jquery-1.6.2.min.js"></script> + + <script type="text/javascript"> + $(document).ready(function() { + $('.nav .active a').click(function(e) { + e.preventDefault(); + $(this).parent().siblings().toggle(); + }); + }); + </script> + <script src="http://autobahn.tablesorter.com/jquery.tablesorter.min.js"></script> <script src="assets/js/google-code-prettify/prettify.js"></script> <script>$(function () { prettyPrint() })</script> diff --git a/docs/less.html b/docs/less.html index 97d95a3ab9..e9334a5528 100644 --- a/docs/less.html +++ b/docs/less.html @@ -63,7 +63,7 @@ <div class="row"> <div class="span4"> <h3>Why LESS?</h3> - <p>Bootstrap is made with LESS at it's core, a dynamic stylesheet language created by Alexis Sellier. It makes developing systems-based CSS faster, easier, and more fun.</p> + <p>Bootstrap is made with LESS at it's core, a dynamic stylesheet language created by <a href="http://cloudhead.io">Alexis Sellier</a>. It makes developing systems-based CSS faster, easier, and more fun.</p> </div> <div class="span4"> <h3>What's included?</h3> @@ -72,7 +72,7 @@ <div class="span4"> <h3>Learn more</h3> <img style="float: right; height: 36px;" src="assets/img/less-logo-large.png" alt="LESS CSS"> - <p>Visit the official website at http://lesscss.org to learn more.</p> + <p>Visit the official website at <a href="http://lesscss.org">http://lesscss.org</a> to learn more.</p> </div> </div> <div class="row"> @@ -98,11 +98,7 @@ <h1>Variables <small>from variables.less</small></h1> </div> - <div class="row"> - <div class="span3"> <h3>Hyperlinks</h3> - </div> - <div class="span9"> <table class="bordered-table striped-table"> <thead> <tr> @@ -124,92 +120,70 @@ </tr> </tbody> </table> - </div> - </div> <div class="row"> - <div class="span3"> + <div class="span6"> <h3>Grayscale colors</h3> - </div> - <div class="span9"> <table class="bordered-table striped-table"> <tbody> <tr> <td><code>@black</code></td> <td>#000</td> - <td>Black</td> </tr> <tr> <td><code>@grayDark</code></td> <td><code>lighten(@black, 25%)</code></td> - <td>Dark gray</td> </tr> <tr> <td><code>@gray</code></td> <td><code>lighten(@black, 50%)</code></td> - <td>Medium gray</td> </tr> <tr> <td><code>@grayLight</code></td> <td><code>lighten(@black, 75%)</code></td> - <td>Light gray</td> </tr> <tr> <td><code>@grayLighter</code></td> <td><code>lighten(@black, 90%)</code></td> - <td>Lighter gray</td> </tr> <tr> <td><code>@white</code></td> <td>#fff</td> - <td>White</td> </tr> </tbody> </table> </div> - </div> - - <div class="row"> - <div class="span3"> + <div class="span6"> <h3>Accent colors</h3> - </div> - <div class="span9"> <table class="bordered-table striped-table"> <tbody> <tr> <td><code>@blue</code></td> <td>#049CDB</td> - <td></td> </tr> <tr> <td><code>@green</code></td> <td>#46a546</td> - <td></td> </tr> <tr> <td><code>@red</code></td> <td>#9d261d</td> - <td></td> </tr> <tr> <td><code>@yellow</code></td> <td>#ffc40d</td> - <td></td> </tr> <tr> <td><code>@orange</code></td> <td>#f89406</td> - <td></td> </tr> <tr> <td><code>@pink</code></td> <td>#c3325f</td> - <td></td> </tr> <tr> <td><code>@purple</code></td> <td>#7a43b6</td> - <td></td> </tr> </tbody> </table> @@ -217,48 +191,36 @@ </div> <div class="row"> - <div class="span3"> + <div class="span6"> <h3>Grid system</h3> - </div> - <div class="span9"> <table class="bordered-table striped-table"> <tbody> <tr> <td><code>@gridColumns</code></td> <td>12</td> - <td></td> </tr> <tr> <td><code>@gridColumnWidth</code></td> <td>60px</td> - <td></td> </tr> <tr> <td><code>@gridGutterWidth</code></td> <td>20px</td> - <td></td> </tr> <tr> <td><code>@siteWidth</code></td> <td><code>(@gridColumns * @gridColumnWidth) + (@gridGutterWidth * (@gridColumns - 1))</code></td> - <td></td> </tr> </tbody> </table> </div> - </div> - - <div class="row"> - <div class="span3"> + <div class="span6"> <h3>Typography</h3> - </div> - <div class="span9"> <table class="bordered-table striped-table"> <tbody> <tr> <td><code>@baseFontSize</code></td> <td>13px</td> - <td></td> </tr> <tr> <td><code>@baseFontFamily</code></td> @@ -268,7 +230,6 @@ <tr> <td><code>@baseLineHeight</code></td> <td>18px</td> - <td></td> </tr> </tbody> </table> diff --git a/docs/scaffolding.html b/docs/scaffolding.html index dd7f05bc64..d4d1c65262 100644 --- a/docs/scaffolding.html +++ b/docs/scaffolding.html @@ -53,15 +53,6 @@ <p class="lead">Bootstrap is built on a responsive 12-column grid. We've also included fixed- and fluid-width layouts based on that system.</p> </header> - <!-- Work in progress sub nav for docs --> - <div class="navbar subnav docked-top"> - <ul class="nav"> - <li class="active"><a href="#">Grid system</a></li> - <li><a href="#">Layouts</a></li> - <li><a href="#">Responsive</a></li> - </ul> - </div> - <!-- Grid system diff --git a/lib/patterns.less b/lib/patterns.less index 15c3c9c067..cd2fdc01e8 100644 --- a/lib/patterns.less +++ b/lib/patterns.less @@ -13,7 +13,6 @@ // Common styles .navbar { - height: @navBarHeight; overflow: visible; } // gradient is applied to it's own element because overflow visible is not honored by ie when filter is present @@ -303,8 +302,6 @@ - - // PAGE HEADERS // ------------ diff --git a/lib/responsive.less b/lib/responsive.less index f63f90c982..e0772b111b 100644 --- a/lib/responsive.less +++ b/lib/responsive.less @@ -3,26 +3,21 @@ // ------------------------------------------------------------- +// RESPONSIVE CLASSES +// ------------------ + +// Hide from screenreaders and browsers +// Credit: HTML5BP +.hidden { + display: none; + visibility: hidden; +} + + // UP TO LANDSCAPE PHONE // --------------------- @media (max-width: 480px) { - // Remove width from containers - .container { - width: auto; - padding: 0 15px; - } - // Undo negative margin on rows - .row { - margin-left: 0; - } - // Make all columns even - [class*="span"] { - float: none; - display: block; - width: auto; - margin: 0; - } // Resize modals .modal { width: auto; @@ -30,36 +25,35 @@ } // Remove the horizontal form styles - .form-horizontal .control-group > label { + .horizontal-form .control-group > label { float: none; width: auto; padding-top: 0; text-align: left; } // Move over all input controls and content - .form-horizontal .controls { + .horizontal-form .controls { margin-left: 0; } // Move the options list down to align with labels - .form-horizontal .control-list { + .horizontal-form .control-list { padding-top: 0; // has to be padding because margin collaspes } // Move over buttons in .form-actions to align with .controls - .form-horizontal .form-actions { + .horizontal-form .form-actions { padding-left: 0; } - } // LANDSCAPE PHONE TO SMALL DESKTOP & PORTRAIT TABLET // -------------------------------------------------- -@media (min-width: 480px) and (max-width: 768px) { +@media (max-width: 768px) { // Remove width from containers .container { width: auto; - padding: 0 10px; + padding: 0 20px; } // Undo negative margin on rows .row { @@ -72,6 +66,54 @@ width: auto; margin: 0; } + + // Make the nav work for small devices + .nav { + position: absolute; + top: 0; + left: 0; + width: 180px; + padding-top: 40px; + list-style: none; + } + .nav, + .nav > li:last-child a { + .border-radius(0 0 4px 0); + } + .nav > li { + float: none; + display: none; + } + .nav > li > a { + float: none; + background-color: #222; + } + .nav > .active { + display: block; + position: absolute; + top: 0; + left: 0; + } + .navbar ul .active > a { + background-color: transparent; + } + .nav > .active a:after { + display: inline-block; + width: 0; + height: 0; + margin-top: 8px; + margin-left: 6px; + text-indent: -99999px; + vertical-align: top; + border-left: 4px solid transparent; + border-right: 4px solid transparent; + border-top: 4px solid @white; + .opacity(100); + content: "↓"; + } + .nav > .active a:hover { + background-color: rgba(255,255,255,.05); + } } @@ -129,7 +171,6 @@ } -/* // LARGE DESKTOP & UP // ------------------ @@ -185,4 +226,3 @@ .offset12 { .offset(12); } } -*/ \ No newline at end of file diff --git a/lib/tabs-pills.less b/lib/tabs-pills.less index e9b58d04a5..ad6459c0d9 100644 --- a/lib/tabs-pills.less +++ b/lib/tabs-pills.less @@ -264,11 +264,12 @@ // Subnav // STILL A WIP .subnav { - position: relative; #gradient > .vertical(#f5f5f5, #eeeeee); - .border-radius(6px); + @shadow: inset 0 1px 0 #fff, 0 0 5px rgba(0,0,0,.5); + .box-shadow(@shadow); a { - padding: 10px 15px; + padding: 8px 10px; + font-size: 12px; color: @linkColor; text-shadow: 0 1px 0 #fff; border-left: 1px solid #f9f9f9; -- GitLab From 1d1805ee5cb188f0c70b6a27e227ea6caca62c8e Mon Sep 17 00:00:00 2001 From: Mark Otto <markdotto@gmail.com> Date: Fri, 9 Dec 2011 11:41:00 -0800 Subject: [PATCH 119/318] add jank js for prototyping new topbar to all docs pages --- docs/base-css.html | 11 +++++++++++ docs/components.html | 11 +++++++++++ docs/index.html | 1 + docs/javascript.html | 13 ++++++++++++- docs/less.html | 11 +++++++++++ docs/scaffolding.html | 11 +++++++++++ 6 files changed, 57 insertions(+), 1 deletion(-) diff --git a/docs/base-css.html b/docs/base-css.html index 2b7d17b4a0..e087432fe8 100644 --- a/docs/base-css.html +++ b/docs/base-css.html @@ -1118,6 +1118,17 @@ <!-- Le javascript --> <!-- Placed at the end of the document so the pages load faster --> <script src="http://code.jquery.com/jquery-1.5.2.min.js"></script> + + <script type="text/javascript"> + // NOT FINAL BY ANY MEANS, JUST MAH JANK CODE BRO + $(document).ready(function() { + $('.nav .active a').click(function(e) { + e.preventDefault(); + $(this).parent().siblings().toggle(); + }); + }); + </script> + <script src="http://autobahn.tablesorter.com/jquery.tablesorter.min.js"></script> <script src="assets/js/google-code-prettify/prettify.js"></script> <script>$(function () { prettyPrint() })</script> diff --git a/docs/components.html b/docs/components.html index 833f532d9f..049908c205 100644 --- a/docs/components.html +++ b/docs/components.html @@ -683,6 +683,17 @@ Lorem ipsum dolar sit amet illo error <a href="#" title="below">ipsum</a> verita <!-- Le javascript --> <!-- Placed at the end of the document so the pages load faster --> <script src="http://code.jquery.com/jquery-1.5.2.min.js"></script> + + <script type="text/javascript"> + // NOT FINAL BY ANY MEANS, JUST MAH JANK CODE BRO + $(document).ready(function() { + $('.nav .active a').click(function(e) { + e.preventDefault(); + $(this).parent().siblings().toggle(); + }); + }); + </script> + <script src="http://autobahn.tablesorter.com/jquery.tablesorter.min.js"></script> <script src="assets/js/google-code-prettify/prettify.js"></script> <script>$(function () { prettyPrint() })</script> diff --git a/docs/index.html b/docs/index.html index 16eed36c84..daf7eb3086 100644 --- a/docs/index.html +++ b/docs/index.html @@ -198,6 +198,7 @@ <script src="http://code.jquery.com/jquery-1.6.2.min.js"></script> <script type="text/javascript"> + // NOT FINAL BY ANY MEANS, JUST MAH JANK CODE BRO $(document).ready(function() { $('.nav .active a').click(function(e) { e.preventDefault(); diff --git a/docs/javascript.html b/docs/javascript.html index c541d57fbd..4e405521d1 100644 --- a/docs/javascript.html +++ b/docs/javascript.html @@ -25,7 +25,18 @@ <!-- Le javascript --> <!-- placed up here so that the inline demos can be next to their markup --> - <script src="http://code.jquery.com/jquery-1.7.js"></script> + <script src="http://code.jquery.com/jquery-1.7.min.js"></script> + + <script type="text/javascript"> + // NOT FINAL BY ANY MEANS, JUST MAH JANK CODE BRO + $(document).ready(function() { + $('.nav .active a').click(function(e) { + e.preventDefault(); + $(this).parent().siblings().toggle(); + }); + }); + </script> + <script src="assets/js/google-code-prettify/prettify.js"></script> <script>$(function () { prettyPrint() })</script> <script src="../js/bootstrap-transition.js"></script> diff --git a/docs/less.html b/docs/less.html index e9334a5528..cbc4103023 100644 --- a/docs/less.html +++ b/docs/less.html @@ -456,6 +456,17 @@ <!-- Le javascript --> <!-- Placed at the end of the document so the pages load faster --> <script src="http://code.jquery.com/jquery-1.5.2.min.js"></script> + + <script type="text/javascript"> + // NOT FINAL BY ANY MEANS, JUST MAH JANK CODE BRO + $(document).ready(function() { + $('.nav .active a').click(function(e) { + e.preventDefault(); + $(this).parent().siblings().toggle(); + }); + }); + </script> + <script src="http://autobahn.tablesorter.com/jquery.tablesorter.min.js"></script> <script src="assets/js/google-code-prettify/prettify.js"></script> <script>$(function () { prettyPrint() })</script> diff --git a/docs/scaffolding.html b/docs/scaffolding.html index d4d1c65262..625c4bdb70 100644 --- a/docs/scaffolding.html +++ b/docs/scaffolding.html @@ -373,6 +373,17 @@ <!-- Le javascript --> <!-- Placed at the end of the document so the pages load faster --> <script src="http://code.jquery.com/jquery-1.5.2.min.js"></script> + + <script type="text/javascript"> + // NOT FINAL BY ANY MEANS, JUST MAH JANK CODE BRO + $(document).ready(function() { + $('.nav .active a').click(function(e) { + e.preventDefault(); + $(this).parent().siblings().toggle(); + }); + }); + </script> + <script src="http://autobahn.tablesorter.com/jquery.tablesorter.min.js"></script> <script src="assets/js/google-code-prettify/prettify.js"></script> <script>$(function () { prettyPrint() })</script> -- GitLab From 7b810bf9a617e1f02e073aafcc70857dc915ee59 Mon Sep 17 00:00:00 2001 From: Mark Otto <markdotto@gmail.com> Date: Fri, 9 Dec 2011 12:10:01 -0800 Subject: [PATCH 120/318] update js in footer, add max-width to img --- bootstrap.css | 4 +++- bootstrap.min.css | 2 +- docs/base-css.html | 4 ++-- docs/components.html | 4 ++-- docs/index.html | 5 +++-- docs/javascript.html | 4 ++-- docs/less.html | 4 ++-- docs/scaffolding.html | 4 ++-- lib/reset.less | 2 ++ 9 files changed, 19 insertions(+), 14 deletions(-) diff --git a/bootstrap.css b/bootstrap.css index adae67ec91..2180ae4463 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 Dec 9 11:32:45 PST 2011 + * Date: Fri Dec 9 12:09:50 PST 2011 */ html, body { margin: 0; @@ -127,6 +127,8 @@ sub { bottom: -0.25em; } img { + max-width: 100%; + height: auto; border: 0; -ms-interpolation-mode: bicubic; } diff --git a/bootstrap.min.css b/bootstrap.min.css index 4ee8f84faa..cc4363fe3b 100644 --- a/bootstrap.min.css +++ b/bootstrap.min.css @@ -12,7 +12,7 @@ audio:not([controls]){display:none;} sub,sup{position:relative;font-size:75%;line-height:0;vertical-align:baseline;} sup{top:-0.5em;} sub{bottom:-0.25em;} -img{border:0;-ms-interpolation-mode:bicubic;} +img{max-width:100%;height:auto;border:0;-ms-interpolation-mode:bicubic;} button,input,select,textarea{margin:0;font-size:100%;vertical-align:baseline;*vertical-align:middle;} button,input{*overflow:visible;line-height:normal;} button::-moz-focus-inner,input::-moz-focus-inner{padding:0;border:0;} diff --git a/docs/base-css.html b/docs/base-css.html index e087432fe8..efdc1e2719 100644 --- a/docs/base-css.html +++ b/docs/base-css.html @@ -1122,9 +1122,9 @@ <script type="text/javascript"> // NOT FINAL BY ANY MEANS, JUST MAH JANK CODE BRO $(document).ready(function() { - $('.nav .active a').click(function(e) { + $('.nav .active').click(function(e) { e.preventDefault(); - $(this).parent().siblings().toggle(); + $(this).siblings().toggle(); }); }); </script> diff --git a/docs/components.html b/docs/components.html index 049908c205..d0456cc743 100644 --- a/docs/components.html +++ b/docs/components.html @@ -687,9 +687,9 @@ Lorem ipsum dolar sit amet illo error <a href="#" title="below">ipsum</a> verita <script type="text/javascript"> // NOT FINAL BY ANY MEANS, JUST MAH JANK CODE BRO $(document).ready(function() { - $('.nav .active a').click(function(e) { + $('.nav .active').click(function(e) { e.preventDefault(); - $(this).parent().siblings().toggle(); + $(this).siblings().toggle(); }); }); </script> diff --git a/docs/index.html b/docs/index.html index daf7eb3086..0598fc449b 100644 --- a/docs/index.html +++ b/docs/index.html @@ -4,6 +4,7 @@ <meta charset="utf-8"> <title>Bootstrap, from Twitter</title> <meta name="viewport" content="width=device-width, initial-scale=1.0"> + <meta name="apple-mobile-web-app-capable" content="yes"> <meta name="description" content=""> <meta name="author" content=""> @@ -200,9 +201,9 @@ <script type="text/javascript"> // NOT FINAL BY ANY MEANS, JUST MAH JANK CODE BRO $(document).ready(function() { - $('.nav .active a').click(function(e) { + $('.nav .active').click(function(e) { e.preventDefault(); - $(this).parent().siblings().toggle(); + $(this).siblings().toggle(); }); }); </script> diff --git a/docs/javascript.html b/docs/javascript.html index 4e405521d1..d71de69247 100644 --- a/docs/javascript.html +++ b/docs/javascript.html @@ -30,9 +30,9 @@ <script type="text/javascript"> // NOT FINAL BY ANY MEANS, JUST MAH JANK CODE BRO $(document).ready(function() { - $('.nav .active a').click(function(e) { + $('.nav .active').click(function(e) { e.preventDefault(); - $(this).parent().siblings().toggle(); + $(this).siblings().toggle(); }); }); </script> diff --git a/docs/less.html b/docs/less.html index cbc4103023..cd2c992df9 100644 --- a/docs/less.html +++ b/docs/less.html @@ -460,9 +460,9 @@ <script type="text/javascript"> // NOT FINAL BY ANY MEANS, JUST MAH JANK CODE BRO $(document).ready(function() { - $('.nav .active a').click(function(e) { + $('.nav .active').click(function(e) { e.preventDefault(); - $(this).parent().siblings().toggle(); + $(this).siblings().toggle(); }); }); </script> diff --git a/docs/scaffolding.html b/docs/scaffolding.html index 625c4bdb70..f597e7e887 100644 --- a/docs/scaffolding.html +++ b/docs/scaffolding.html @@ -377,9 +377,9 @@ <script type="text/javascript"> // NOT FINAL BY ANY MEANS, JUST MAH JANK CODE BRO $(document).ready(function() { - $('.nav .active a').click(function(e) { + $('.nav .active').click(function(e) { e.preventDefault(); - $(this).parent().siblings().toggle(); + $(this).siblings().toggle(); }); }); </script> diff --git a/lib/reset.less b/lib/reset.less index c95c7b04c5..2002154562 100644 --- a/lib/reset.less +++ b/lib/reset.less @@ -93,6 +93,8 @@ sub { // ------------------------- // Source: http://github.com/necolas/normalize.css img { + max-width: 100%; + height: auto; border: 0; -ms-interpolation-mode: bicubic; } -- GitLab From 97b285896f50bed4a66b00a70ed67eb3224bc7f3 Mon Sep 17 00:00:00 2001 From: Mark Otto <markdotto@gmail.com> Date: Fri, 9 Dec 2011 12:51:54 -0800 Subject: [PATCH 121/318] help tables not look like shit on mobile maybe? also fix bordered table example --- bootstrap.css | 3 ++- bootstrap.min.css | 2 +- docs/base-css.html | 1 + lib/reset.less | 6 +++++- 4 files changed, 9 insertions(+), 3 deletions(-) diff --git a/bootstrap.css b/bootstrap.css index 2180ae4463..d52b96fa6c 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 Dec 9 12:09:50 PST 2011 + * Date: Fri Dec 9 12:51:39 PST 2011 */ html, body { margin: 0; @@ -70,6 +70,7 @@ td { font-family: inherit; } table { + max-width: 100%; border-collapse: collapse; border-spacing: 0; } diff --git a/bootstrap.min.css b/bootstrap.min.css index cc4363fe3b..6a728864f6 100644 --- a/bootstrap.min.css +++ b/bootstrap.min.css @@ -1,6 +1,6 @@ html,body{margin:0;padding:0;} h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,cite,code,del,dfn,em,img,q,s,samp,small,strike,strong,sub,sup,tt,var,dd,dl,dt,li,ol,ul,fieldset,form,label,legend,button,table,caption,tbody,tfoot,thead,tr,th,td{margin:0;padding:0;border:0;font-weight:normal;font-style:normal;font-size:100%;line-height:1;font-family:inherit;} -table{border-collapse:collapse;border-spacing:0;} +table{max-width:100%;border-collapse:collapse;border-spacing:0;} ol,ul{list-style:none;} q:before,q:after,blockquote:before,blockquote:after{content:"";} html{overflow-y:scroll;font-size:100%;-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%;} diff --git a/docs/base-css.html b/docs/base-css.html index efdc1e2719..cb6c699f93 100644 --- a/docs/base-css.html +++ b/docs/base-css.html @@ -655,6 +655,7 @@ <td>English</td> </tr> </tr> + <td>3</td> <td>Joe</td> <td>Sixpack</td> <td>English</td> diff --git a/lib/reset.less b/lib/reset.less index 2002154562..28638b6b37 100644 --- a/lib/reset.less +++ b/lib/reset.less @@ -10,7 +10,11 @@ html, body { margin: 0; padding: 0; } h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, cite, code, del, dfn, em, img, q, s, samp, small, strike, strong, sub, sup, tt, var, dd, dl, dt, li, ol, ul, fieldset, form, label, legend, button, table, caption, tbody, tfoot, thead, tr, th, td { margin: 0; padding: 0; border: 0; font-weight: normal; font-style: normal; font-size: 100%; line-height: 1; font-family: inherit; } -table { border-collapse: collapse; border-spacing: 0; } +table { + max-width: 100%; + border-collapse: collapse; + border-spacing: 0; +} ol, ul { list-style: none; } q:before, q:after, blockquote:before, blockquote:after { content: ""; } -- GitLab From 5c8df1d2858c3d5f2cc65a80acaef5312b1ae87f Mon Sep 17 00:00:00 2001 From: Mark Otto <markdotto@gmail.com> Date: Fri, 9 Dec 2011 14:34:38 -0800 Subject: [PATCH 122/318] updated index page to add featured sites, more docs tweaks --- bootstrap.css | 7 ++-- bootstrap.min.css | 2 +- docs/assets/css/docs.css | 10 ++++- docs/assets/img/example-sites/bartop.png | Bin 0 -> 86214 bytes docs/assets/img/example-sites/fleetio.png | Bin 0 -> 47275 bytes docs/assets/img/example-sites/jshint.png | Bin 0 -> 8886 bytes docs/assets/img/example-sites/kippt.png | Bin 0 -> 57064 bytes docs/assets/img/example-sites/railwayjs.png | Bin 0 -> 34839 bytes .../img/example-sites/totalwireframe.png | Bin 0 -> 47095 bytes docs/index.html | 37 ++++++++++++++++++ lib/type.less | 5 ++- 11 files changed, 54 insertions(+), 7 deletions(-) create mode 100644 docs/assets/img/example-sites/bartop.png create mode 100644 docs/assets/img/example-sites/fleetio.png create mode 100644 docs/assets/img/example-sites/jshint.png create mode 100644 docs/assets/img/example-sites/kippt.png create mode 100644 docs/assets/img/example-sites/railwayjs.png create mode 100644 docs/assets/img/example-sites/totalwireframe.png diff --git a/bootstrap.css b/bootstrap.css index d52b96fa6c..0c1c02566a 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 Dec 9 12:51:39 PST 2011 + * Date: Fri Dec 9 13:29:05 PST 2011 */ html, body { margin: 0; @@ -436,9 +436,10 @@ dl dd { margin-left: 9px; } hr { - margin: 20px 0 19px; + margin: 27px 0; border: 0; - border-bottom: 1px solid #eee; + border-top: 1px solid #e5e5e5; + border-bottom: 1px solid #fff; } strong { font-style: inherit; diff --git a/bootstrap.min.css b/bootstrap.min.css index 6a728864f6..336d6f68c4 100644 --- a/bootstrap.min.css +++ b/bootstrap.min.css @@ -78,7 +78,7 @@ ul.unstyled{margin-left:0;list-style:none;} dl{margin-bottom:18px;}dl dt,dl dd{line-height:18px;} dl dt{font-weight:bold;} dl dd{margin-left:9px;} -hr{margin:20px 0 19px;border:0;border-bottom:1px solid #eee;} +hr{margin:27px 0;border:0;border-top:1px solid #e5e5e5;border-bottom:1px solid #fff;} strong{font-style:inherit;font-weight:bold;} em{font-style:italic;font-weight:inherit;line-height:inherit;} .muted{color:#bfbfbf;} diff --git a/docs/assets/css/docs.css b/docs/assets/css/docs.css index 281b224e39..73e619d290 100644 --- a/docs/assets/css/docs.css +++ b/docs/assets/css/docs.css @@ -160,7 +160,10 @@ body > .navbar-fixed .brand:hover { margin-bottom: 18px; } .marketing h1 { - margin-bottom: 18px; + margin: 36px 0 27px; + font-size: 36px; + font-weight: 300; + text-align: center; } .marketing h2, .marketing h3 { @@ -310,6 +313,11 @@ h2 + table { margin-top: 5px; } +/* Example sites showcase */ +.example-sites img { + width: 290px; +} + /* Responsive Docs -------------------------------------------------- */ diff --git a/docs/assets/img/example-sites/bartop.png b/docs/assets/img/example-sites/bartop.png new file mode 100644 index 0000000000000000000000000000000000000000..9628516367fcc933e1285e727d0b888da68d82c5 GIT binary patch literal 86214 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 literal 0 HcmV?d00001 diff --git a/docs/assets/img/example-sites/fleetio.png b/docs/assets/img/example-sites/fleetio.png new file mode 100644 index 0000000000000000000000000000000000000000..b48d6f010475d1620c5fa40c93e6fccc87073782 GIT binary patch literal 47275 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 literal 0 HcmV?d00001 diff --git a/docs/assets/img/example-sites/jshint.png b/docs/assets/img/example-sites/jshint.png new file mode 100644 index 0000000000000000000000000000000000000000..e532320a3ca4ecef52a3a34fe9a690b2a4619657 GIT binary patch literal 8886 zcmdUVby!sI);7vdX^EjjU=V4B8W1F8XodlVp>yb(5C%bNM21EX0Vx3q>Fy9vQba*o zQVHqq=EHN&@4Vk1-}&Bu-*;c@+WXnhweEYZXFd1s9j>dbMnTF<N<ctBp`os<M?i2x z@Vb3UeDiu8Pq~qEy<x(t7-RL(4p=XQyFG!T9ooj8Lj#F$wAZso*gbpFV=qfUKzPp? zZj3dCY0224k-~^SKEmEe%r%;TKvuyUgRphA$8y-%J36D}fLl$iKn`a+IiL|3CIZ7K z**iI_`?%Zd`)I>$eOzs&?SKmM9J1ar*91s=EP}%u>4x%<@s<PrgIDId{ihoQ<oJgR z)>RJp&!miDx*SSqcY6-7u!xYYh@>coq=c}jgow0+v>=C=h^PoiR172{B_t{$1D28z z5#{*T0=$mqZs#DQr>y#~Sl4@UKqo8~BLf0?d3gzYi3_9M9YLbf($XLiF_4&;(6xt< z$1@Zb;Vp#n;QE_E+1|s}-5G;*Mx!|XFd}Two>)2Hb*BFu0uu9YT9n7X%5+^YkT(JY z5)~HtGo-&AVX*(dD-!u{Zx5`V{eR{A|0MQ+Kf~CA^z1#*p6<5S6X(G7Clp3T$=x1- zMZ3e%Xt%$ssOyBrqCK3@7!D<Uu&^ix3}Nex`qT3d1Pmslf%3p2P`36O%5uPK4q<0! zI~h@BF^DomT2fR|SwvJ+MN|>23{eGxC6rW@AP^~t%HLRJw5=!79)<lIYxiGRssD)m zBL*bqI<m68yYo|fJ5_fylH(tPmT~^ixk&s+zJFou{&Ozi|A+-$Cj<I3wg1;t|J`-1 zpFhoi3-@~G-_o~7UF+TbTG+rCzElDNc3ur-MY#9GdYY>T>sZ>%**?<8K}5X%r{W6& zlGk%cmB*Eawd?UxqZ2hnB^}xZySL2gTED!n)R1K7M4Nw!{Ge{YufbhoVxZSlpodg3 z?R|sPdu_i5)QnfZnWH`x_{m=+DY+$GcAA1bw4Pe&y90rOg8qDZy2nMv-rFnb={%OX z&PWiy-Z%hw8gCYT#8@XeH#5JfVAK45T1R;z^sqo7>+WBl053jo;~>P`-f#euvg2WN zROG#!cukA-hc@2EM&>5qcgJihIsO5y8`+-KUSVq4%JCWI{gX!*A1N_im4f{T97YED z6;6O~{L(W-z+>w%&w1Vv2wIN#J*&T=E%IA6^W6rHBi$ty&M~4$3$D4Lqw_)`ym^@l z<8KY=E}q9$=Kw^PO&oZ%h)XJ~*hqbJ@h(wxr0GNLSuHT*m!J&mo`W00Uk@s%k*>KT zSs^t5&9}Z&KT^N6f`K$KLMO&TS;N~ywbVtoCS5X09G{B19pu3d$K~d<FY+YkMqN-Y z-%2)`y2ErHf4i7eOQcTi6nu}IM1R=nnwpw|f|~KKjD)SEpY1M8qFXN(Q_<Sm+POn3 zItmxGB}Ik&@}VIi4h{}qe!JI*8w^Dajd{w&=ToUmZpMd&l_9ohAw$(J@#W~h6z|6c z_U)bcvC{lno0wpRbUkj{Q5u>HdI0R>((>@wTV3UkfEU2$tUMZ6`-;i9YMXRlS=Yd8 zRFH0N%Eg_Xod?k@@1OVA=l0lD!udIk&7-_U+7wGDo>-^k&OZo2aA4k2tBS&9qr(I- z&jsf`hB*Ja*Je}{!>bOkpUlznLpnPLQb%;!m>;>cRB%&MFS(ilcw)hV&qoV#+0~Rk z!})`0x~QdKVRJUawNPXgYE@+NFoWmrI?tT&lZ?jd*0Zn?!e&X+DcL8J?E{%T1Gbgp z>oK@<TkPf*?&{3K!s6B3?yi`!_vQJCk>#^nu!FvbTj$Ga3O+~EUO#=e<n}*IXam^W zb?%Upci1SkE3o?im>HE<P(VL?>g84EoFs*wi8`P<V%b0V^hvP;GWrCq^px>VG^_NB z;?$IsFA0^UD^*oh%dxzVSg9}STU*(=m6=dKTV95hl$3nF^Q610i;BkNk@)id_9_$# zrJ$h5&d#p!43&=s4M!SRy!x&ddq-<vW?=J2W~rf};j3S5Z8rsj2+F$>1dK-04pr@~ z{0|J`CExP#lJ0^5iv!teYV6U#Bj2M<HiZE5p_-L~72_Z302wBB_R!#1wlA`&8J+tJ zpMr=CD7c>Fj80CHiCeY?TzpLyFDLvG&iqN4n9w8(PS+$RDo?#uURbT4rvua0$|9(+ zL72h)YU-JzA2g`uY>yaOaq=yYl>klP{HXiG)HPvb<){oHIp?7yvq@ZS$oPs~&7a!W z98B=d)go$3&h#gF)(cXxOm*}!06&g}z{}Gh_H%-ntr`VC3X8p|29FHfrL+%CBkcs= z=C@@ayWjSWiAv^XAF7ywWhsi}+xxbx?Ci2FhUQ8*NYdfq(__4gZ8wUFBnx1@tt!lW zyY1cD(f<CgyuLndY%B(g{+ckV84Sr>rP9599-*f=LrnOL3#g|`y1YzG2|>Tn4AGN_ z%3aJ|S<xklSrw+`W!?0$#t>Mgnx&kbp1$+zfOHN~I4=a7a(MAlA--p3isEAq3}Hm! z)z!7X099(_q{JaX*%xZDW5dJ4;Q$_8Fz?>_cong%yyWGVG0Q;eXtswTGFhrhJR#OM z?nQRETFAAu36`@|Div%4R>Rsj_#`?yBN-3|<XR)V1mNIwHC0t>4chFI5(-JYxvgur z2maFbf;a~Cyhg1}>zAEu%R6#jN2JumaAm4CYE|JNWSo0$6LAQ5GU>Cy{k8VM$K?zU zoO)UjwlWk<#_)Z6tkfb1x4gW}TTDOWvnCYPz04a{V`!@672|K@Xv71LNUz@Te!d7Q zrQ56W2*-yLY%45(2LJ%$=8`A}@{cj4LL`CCNLzhdrN$c*O05mPN5WHM=Toxrgx|PG zZ(r8qD~Q>JFkmFs4O>$_F)>P7cl+fnv81%*&Sy<FT)?(6!LnZf?c0r}#^&DDAyI}g z--TpOryqK8aw@AWg)qM2(|lp~m?4U5N8(2KJH7meuS<|2^`zyh4|eED3qu|g_%r`j zb6MUGBQvo6U~Fz2wUmD{E-Th48bZEIWhq*^m>bUBLHLY=Jm;1u7pb0->Jx(M;o*I_ zCyiwqTgQab+-C+b<jaFcuvmH0+g#Qu&wFsPrktcvG1lceZJNIpwEJfHemtG6I;szS zko6H?I0_z%I0#iZpDi(~6Isr323fU44bbYBK@){DIYqtNG$iO2#hqlaeETsO=L<YL z{5A}0=-u9mjH!vi*^x-6eAOi-qaxv3MKd3m>m&_58;mVx^C1b77M!K`YxvempxJ2- z%r#$r#=Eau%-0xh#PbOY1*pUq5{<&Y?KM9je@iJCuE>8!|Dmf7b|t^-&J%hBI9tWS z&)jwLV14+2&do2ucj#?lN&ph<3YZ%8F*B<=w642jG(TA<)MW`ol`Nt`bG30j)AOUQ z?4lA9)dzyA-^Z+QY=DH;(+nJ)j+m&O&0jA;A|3utL!M-Qh79=ri2C*sFVF%9!15|; z;pj}?o`#<o8ebBmEJ&bEJwX=QzFN}uaxx^<uGty;EM6P-t2^3@(ZYqxP;Jwt14)!H zQS1t>hjzf8jaViXsG93IEV;<nKFafV%JBa|6sIBR-ch?(dffJ_FS`;>ThYDtcyhXr z_CU?Ne?M7m>S<pC-yERq`G9<N|IoNv-RlC2+OaS>w^3>$g*iYS{hxkxzx>=6p0Njf zJPXfCNgU~ooNqzWxqSS*!l-sX=sMqoq*w7wAq)9w6QqiX$E7}%rUvh)(ed8=33~9h zn5NQ-Sxd?P{6->Aq^`1;$V@;zw#a%78-iaa)cI01-l4$cG`=GI`4HG4SZ&=jMrLUO zD|oEjuxXI6+Mc;nGCE;fz}vLunMa@#Rqu6}6hF1uOk{?m^Zjf;X&vCiQ?OYA?=L@H zxaw}mry3(WOpQ*2F<w6H!_<KhRGWz;py|)s4egI&6|;%WGZTU^9?=DV)n*yqR51$P z_nZEH@KFG2VAL)*6o8#MkTV#u%XhiuC`gSWecJv4PkD!vV0iN+kk8J9B>UE&+VMdt zliUxx)yBFVf(Q3UiDPtNDv*JpS1ivu%|Liv@XsOaG|AF0L@t7t3H6AAHnV_NX}`Rg z{B@z8p@c<j<E#AGH6l|+2mi5HzKe(~6NJ5il<r)ZX8pLSO02Gn{tlAQuOMl5(FrYQ zT>Wi?l0D1FJ%S7>NK|;gE#jWC?(139GDl%7i#oXUjuub$`d>Fg=xr0_@Idm(3Evbl z@nvlKmaPgg?A;K#1mpCZ*rA03`z3Q#fksRI*d(hWW7Bfle4f-O9mA>gzp$<`zCNaZ zNrOKVb@fVn`U$=LPA{806c6W@Hr<WpZojx%E*3AXT#Zbuq^bs2!9~ckM+WmE=&-Pd zRMPs@CNi%#;BtgM^rk`lNcL0eXFAS-7((1vi+(Zy%6pxg$Gawbc8ScgZV>|MEqy(d zpw-4JlTQ3WrJycVH)q1mMZ9*a@%P(=eBukm0qHn$dUNi~kp2foIS&RVL@MCQ&X1Gm zzojPngfbOA8#SmZR9JBqA{o*1gT>YftezB$8a-u^@ahSrRmrAjY<w!_>Mvm>ohv|B z;824>zXpmP^CAtM@&m+qZz0AP&BwDMTXI8Y8(!pwi|Q<mthR?z^6|C!ky2;%H>9ue z&x(tnmWlScCoK*yHt`cF5-Bt?@PW85!V@Tu{c@%860Ag?zFvk&{yX31sT3b6G>=vh zWjc&Ej{-S!XeKz{=dPiV+c@MiZlpD4Ro<Lq&rQ+X$|XMgaU=}7aT-Bbmo;rJcyv!| zOyI-Qd#RwN==6`uj25j6r`@l+irFMI9eoB=Ev;Okpa}euPf$cFb3UU?quF5i$A|VV zRdlUF&hcz@o#kB?nXWQju_}|U2Fio+at#X!4SJ?VDdH=r%m)yqm$Q_!J2GN#GL_sN znv#>YtD`a%_roiPa#pIy5{i>ozZplfM}4FJ)$eYKsTHMIGQr6H^oYxSlK0E}Gn1=c zT4m5;R06Hyc%n30(BpT|CZ5y)-SSChnxGKg`dJo-mYIZP-iD)HZrFQr%1q+vZ6*0& zVmfv?ejg<4f$csxutH|r4`E@&OE>+lj8n8MBKdXPFq~JB?7Rn@XA(yOLy8=%Xg)Wv z4=Aw-+lH+9b@mpzS2KQm0%PdaC`f%^a>&4j<5<y>x%B(>l6E~i8BY;fZtARUs<HCz zlfdmyp9|waZw$m)N!}d=K%?k?!w0$)!DSl0B@4&X8bX;TuC=M~o5!o;yhBaBmWKND znwQl<D;aM_l{JGO4iAP%SGu^)lD)UnPB@C#tc(o$I5-0KuKoxz@~fZhtdv?JfeyXc ze%$g%)Brk0&wod-%Ep)XZd6e6aW$KkfvgtKLoNT(xs{ftWtNC78!>-$&z2@r^BW(> z&RUVPgY&G7+bv7=tNB8|Dk3e*fk6c$nnk4xv(@8B%4FjAbCJ_C&b(cY40Y+jYNmV- zuh!dRN1O}@`y}qOmrC1H#uXlqSZGoy6l4+$=12%`mP^LX7IsC>2-05xC58R0netWE zxGj`g6Lvhp6nVEXoD3OOI9xJ~a7_7~4%%T#LcFI)`D^mIJnM>Tvc%Y=O5i6K%Rrir zXW>p1lCPjKC2wYJ+Y&6RBO=q;!!3L8fol1$UNLu(jyW*tw?~}JYBH%1TfLwU4j&|m z3vu0TzqNcSe9Sv^tZ86edo1sQZRYpupjU7jU{cZ-Fy<+m1@=?Ch$@gW>k3K`8-1l2 zkNGgD`epXiP_=0MSdJ~iu1wAk_%;8NnUz8;G$lZ{KbVP0TTM<%cYeknZ1pHqKVbv3 zaBDE8|7_+BSuVI&|5t~p&pJgp!n_-|pF)Ce4=)Ri9jM4ZUD{@p?}>|9GKgDGJE0S5 zjABt%I2kN!CSO&S?izhmKrcrbIjKt?0FPB8geSerlYPoP>^pVy@{MbOWxU(@AQQRq zPESH*E1a|nV}YwOIaeE*QyFaMhZs>T=xeFX3Y$+_KD`GTr><ld@vPL!B&(69ZgX}J z+{;K`xg6<u+XuacUx(s96*VKN;_KQcH|wkbUB->MWTlUZ#~Fa8IdGSmwYsqt-g5ty zu(aBGDo8p-Q<!csoe@76U5i_nLh*9jq47A(ClRsnu2W^kmcTl=nDTf3>g#7)7@tc@ zx(E!$N`SjQ^GqyAXFE^)I96^j*M6^8nckc|y8-4p1@O*vnb)53E5m}xUv|>y8NK^{ z+y?uw7!@<$oOuv028TAgk3)-d<Ff`F<Cb0~lt<LI4o&9lTa3lcTJ;yUlze-_%KKe} z+~9LW-nkDvIW5HrwN@HWmOd|4Tm2~XcZ~t{Wh_8$<kfTe-=`T{dgMwZbstsSM=4ZB z+RkirA5(2KTP7v<f~B|xo0(OI+Hrvl!BL*VZM==8-kXiTjNUA!PNuwv$8rSFxER}< z=cphsw<}uYa&oi|Z|r`c)@isu6}8qVARuu4cvsO~1r?wSMc<VkJ?k7P@+Wk}!l*;s z=i4cl9C`XJPZ!(Py=|dt=fX$IVi%Z&(F(wl%-N|3l`Lz6xU|fm0v6@49-xM9)i0Pj zKOn+wud>5lPP53Ixtlri3}!I1ur*()^vBM7hy&Q<E;`$27N(^zt22pXI%zoY*dX~0 z+;M7#NzZ<A<j;D~3wQLD#$WmIqoxmi*~xJMyHf&b{%JSZ)$bFXw|#xHVs-rX75ioe z+*5tC=wV&-U4@zlbu`D8YB~&WV@mnu)M7w=FgmimJ@L4zxNM4s#hNxfDeXS(=KTp4 zv0dxBQj5(McIL}-saad9BXsJU_baC(0$akMg{qfAY0YV$XJ?zussNOWc|6SSFZHvz z$W98}^p6>WTk4;_&t5Y2@D(4_FfOn`oMazeIqY91LLNgq6SBMer!M!6j?h1yP#gQ^ zJP4E3@Taw+(z3t~NWZ43V$Qv<EaI>YHn||OljOi5h6_x4;)_mOV1l#^_VV*DrtTe1 z^~viT@@8p*3)RfH+coAR%bF`HA6yMe2?ux{Eha;Mnp&6$mI~H-v8QIRZ9TkvF^@;w z)^0wwJ|3-WIm(Ol7y_C5HN(vhWb-&D^HU8y)IjcPE^-%n7_sEO!#f|oPmI*XXVmIl zGo4$yj>WbB967D0waNo~ZX^|<e5)*pJ&`3zy3OgEsD2z4p=w~zzlZ%Q=2=x=u~}%D zK$2HrTJIL5UQQe}A55m8AiMR0rE#pi%(D7p<e2YqXxXf3A4wby<O!Q^N&Up|1am0K zQK0IXN~~%AM{9p1Q--q3&Z;OeyR0D=Fp&L1gByvDS)keVOHN4_Hay2FseZA>rHh=V zD#k*|*-iUXA}WW#lqHKE^BidtV6C_DH9O#Br(W*6WDR^-m1`Q28`^isu>ia-{*O^b zy!vAhYMMXB3;AQjD(ZhMlbGb%IB7Zm7#?`<kNpn^0dq+HH>UmHR`q|vY_Lk~r{P{l z0O2r$_kQce@epbWR!-0D`mjS@NI_u=dwu7K!B0xbaNQy7ki_rO6&i?*1Wdq)ztBM? z8rcuTe|+6zSFrq2dolRO>d`V8$#@e(d<eqfbwS$sn-=I-xYGT!o(&OwZv6T*Lk|aW zx($qRRaZ0P&3!w8LfzLXKjyQv__NHfQeIJ2?uqGy8H`;WwVI}z-`VGxMqmg}US4)6 z$fpH^;;+Tp{}+^DD<<J5^AkE-B}GMSE9k@f@+Y0jD8Z?mW0i{Yt^v5mm+hMx)HJ(p zqc2KXc<CAfwiNj{!mU3Uut>Dp5Y^^6rO@OT(wd$Ztw9xDy^W^X)iNN4jVmtPpzBPu zT7zD=eO=LZ$(xX{_&i#DnL7S!HLA?%vAWz3<TDLlnq7&HRpWY*m!G)rpTFx7@LbN~ zPB5($(g!aZ$##YZs4y-$qecOcrw75?NIIr1o<09(xUPqZP+4R0-QI-X5v}z(_x(Bf zlj8Ul-{l8LJfZtDCX5U-e&{hZObw=Tvaa|$1XztpS<Q!hU1%qh2x;Ur;(o_-Z-I%c z`H=}(mR#DJJ`6d}p=-CkH<!A;jZbG^uWSzn-pfI;TBWaRv7!b0X}{=v&~ftJJy0wX zE!nDeRE_Ev9?ZoLN9OVibh=k8g!61zwA++}9g}mJhMT<NsVd2mtQVQ}VB>N~_5*(= z^_lB<<7=2Yvu)qdBNCElegBm4-zOCeIw`lH&;^K?1$0ZWkAooh1fgS|5g5u@c#U4c z`N5S>Q+?xU;?+fKF+C}6uk~lG03B?MqP-(8S)G{komRUDFm+c>Vj=t{ZAARlj>7qI zS548I1ZA~0COM$|qq6qATxUdU#1+%+7G~<>1I!OZ8JF(yOdfo7Hs~y4`oqrU&*sTV zFFQAEb-m$v@70b~Xoz+m3$y&maeJb0vme^d4iT^!bG4wOlOeq%bLWg{{1)-b%=UDs z)ijhlF3<A8-p|WDoQyoSvZ!e(4|jySx@7s8`j%C}egDVj?X>inmZH|njw9Ky@0G<0 zXQ2w-OIPPL?8mr6%FD<1<HmpA(hU6ufZ&rPSy>)j4kTDv`mOw?#GOP2&UZ%!zgY5N z$6-(UHbBg&DKbq>-QB89K0XLBa+7tt1(Lguq)_IqF5LP@n=ilqc3fKAZP`NjfD`*| zQD8CIDCe=}+1ZLv%1nv=y~^>aulxI;fWx6wsnULJSUWdkXjbaT?00)A)|D;x2H&O0 zpU-UVjyFGk+{wUg>;LGJ036c=(T_$@jBA<sHZ4R3_S{{}dOtX^J^c`Od@xqkFqLRE z)woRry4+o2x2qiQ%5{i3U}Ixb@V#no`$C$VCL~nyO-N|Exmnjj9|{#qV3rlduQ0|x zW7MiRqL?aYRxJn*-?1eOV#J?D?=z4Ji0kVMA(8xV#z>-^3QijQ_|u-c<z*KMY@akL zSDJabTX?y+&ke6I{32vnWT0nQY-()ctRk|SRyb%gF`#?p<m&3mKSK3a0G0Yz6|$n> z&CR=7_4JEN{TB7l?H4#1x7U0lAo=`m_|CfyOUH17ugnq(esN~Ri{!`AS3&-i-Bc<8 zlQP5En>o(RQ*83hm^_c?Gr><-JwUA1yfJn1p)muR;h1GpAFM%F#YVg6@40L(JnLKV zzb<;k$=`;ao>@^35Lc^C13Lz#XIKG$DISkOf<K;mo9!9sM1)NQ<+(mr8d5))z)Ujy z4lXmbiUHn<16MoYzHX%wuT56f)r-Vfii*je7sV)?GT<)Jz3*R>-!#w{5?DD4z&g|N z`0WeuaizL2%Ug_T<PJt##EMP%Ghd86W;&ELc$wv@&f`YXP7D~3Pyn`wg@|Yl>mw(l zrHUI%eczRZkJz_Aig=rZrg9Zggs*J(-)ncLo9wJWF+vqnON{3}qG*aMy1K8<tuEFY z#+k?kN|4AAA!kKwh1@2zT*vd#^&Qj?0sRbOM0`!n+~<vcA|j%I)0v;?O_+ho;-U;c zb73R$A@!v2c_k%)t?f!kNLOy|NyEw6QOMQuL)?cC)!4nRn!~<6t@}p&B`;%Mrc3+w zY2J@DeNt2Z;luUY>*~tN7c+0Pa<9Jy`Kon)9fqqp8bMvx66@sqe=`dth~Y!ik2)DL znlX#4ZTp98((iCQ$9!(bM=cj=IlO1upF9ci&o5=WRkl3Ly%sKi^nx<LFEmv&?kZEG zD!YOiK+?5)0|~uOQ=b4z#~tOajH;5Ud$N>)OG~?K7SjptOkDA64KH89j=dgWjWc-g z4wutb=bc`yXVd6_HM2;vNZV{m#5=q_oAkuh=Fb+7xrG9j#4-r~$@uu^{(?HxwAT9} zua@({BiXO1jlMpiTQi?NC%U?wuFeoIU@un7`qNr5XT6|TV%jsO>qFPF&!%MmI4uMc z%8E7bHc858$8slV;&yk`p1yyPx!v*I*?Wx8Wk<%17@hB2nAL*&oq|XzfxY~0spi{z z(7*ZN@XM|9+|PsxY$c}i2k4e)1hYR^g7$R71^4Roz(8_;Kg2V7et-W^=#w)ftg33K zaj^-vyO=qi`2M0-;Y!NaT&kTlB=>DA=5p#}uc(uzYhFvzw;E^d;(jyx0j+@`eQK(i zkr7#somgB?TM6fvwl;{PS6xDRqmR#MMCbLvPL3Ang|1);qf)fEpNPe(zawk=PB)pJ zk?Q){VVkaJk(nj4%Z}gPgm28Fv9S>*{=^MKl|fW-BfTv|2)SXx<`ELSnCk}hsMV{0 z>6;0Z+7I^l1zb9LrIsw-S;k`Hz@$Z;Zl%%+;z8khwzl)(nQ>6ENaV&w62tS-(z{GE zO;YYjY+&#wU5n}IPzRaDvD5<*rd3(LCCLyZF`+z#VHgf_HcyLR_#tV?mmcbw*4Pqw ze}XWuGkwX&`0zN8l87nBZfHn<C@zj_b$@txMch$roOLuH>0KK#>xKxMif~x8@~_9) z6w-QQSUcgYGNS#P))$iT&NWGf&{Brw#t`R*))rOLpUbSgHU`dzwDZp+Fp*#%zn|@| z8EurN+f8_jIfg&W(*%n6^)BDM)5o3*i#^y#QoN#K>9xn<40X8*Be%TakvfL0cl)3S z&k0?ANQjXV`--6a%yIl2heD%C47dZ~uU^vv=2XpgBG(6ycw_*J4NQmohnMZnGb+!T z0bsYNpozN&6XpEkJKi|i?cPt!uIn#PO=a(XSluS=FVnwJxN)1Hlj@;qy20K0KYx;F MsAwyfLabl>AFniQHUIzs literal 0 HcmV?d00001 diff --git a/docs/assets/img/example-sites/kippt.png b/docs/assets/img/example-sites/kippt.png new file mode 100644 index 0000000000000000000000000000000000000000..af15baa115fe37f40f92390a9d72c03ca3246be4 GIT binary patch literal 57064 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¥}GU7fAr2_gHJ8;1Sa+qoR%BQsoY7OC|_lXF2$lSRAqTk^7Whh_%=@)u%CE zpo%3o@}Fv+sH>~m)f~ETW=Qh-@FJkx&PC>sXc+6F2ln@k9kqUU56DNnlI$2z2a@5j ze`m4AX#$x}5wsJ=TF|g@6#!e39+EsS0l;?7XllPHxfe;ukr0W_l}m0DX7xbpMdZc~ zU-P|`)3%Cj(xzO|^>7hCK&q7J2TITdq(hf4ZxRQrY!$e+g|QRa#e+J*XXn!AuHKYd z87DWk)p+K=Zt+;;S1vXW{&dNLHvMusBehF3ju~aJA}$Yi0(992<7$1Q%op*n;XX=5 z3=msEc2|||(Pbk-9v_imZVwU)i$1bLoH1|K)P3*E`6ZPrtTF8T?n|}Z-HvZg5!&;U z03_YXDKUc+`EDcHmNa~5i{J9l@t%}htA>XC>XxlAOSuMF;_04A@iX}R-3)4M<;e>p zl6$eEbf(U4@9!$`PE=Wpt`VC4hR2*8G=el<1u#YmZF<v~7q*miwBAgXgw)#X*uwf1 z_#RY3mh**7+hGsRIcAQXxcpHjW_r7hsdiM5(PZA){Hg4prja@-n~^EbqS?Qhg?LY1 z*z=QDDj)>A@MEwp{-CU$DH0YfjtSUjJTapsdT(R*76$kiBI+obb$aq|mZ(asu|v%7 z(0{+~mNpaFNax=Bq@kRX!y_<09k++<PMZLBf7uZ5gMMu7bs!D)D~|h&4Y?cEMe3rj zpj3Uc9JgC?2#GZVcBbIHx+h04?NBFol2h;7g+6|`gnr}@h`2RxVZC7BwNG&A@5h_j z_L7rQ72Ox3A0UKpG||F!3E4)XP5fB-YJDyFll%M7M9IfjlZplsaN~e^3&#eR62-xE zgG2LqQ$PFN>K8ifBdoN*)Z2=k+Rxmb^Hr~emqpHK7+<RBWKK{afNVWpW*!fo-EE{b z*1<dFS;F7{Tdmu=cmMAiyn|DXiO1L}|6g1FKO1GIaE4erJ_Y8uVCK|5GV$N+nt2aQ w%(gMvWY6jgAC2pZ)Yam{U|o9;U>q{6a|4!g%2-ZIEX<{?ZlG4HV*Bxb007wOfdBvi literal 0 HcmV?d00001 diff --git a/docs/assets/img/example-sites/railwayjs.png b/docs/assets/img/example-sites/railwayjs.png new file mode 100644 index 0000000000000000000000000000000000000000..2480dd68e7208a42842dc85615641691ce17262a GIT binary patch literal 34839 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 LNkvXXu0mjfU{cQ| literal 0 HcmV?d00001 diff --git a/docs/assets/img/example-sites/totalwireframe.png b/docs/assets/img/example-sites/totalwireframe.png new file mode 100644 index 0000000000000000000000000000000000000000..b6256138e58df4ca43b4fd3bb8eab75cd044d7bc GIT binary patch literal 47095 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	T>?A-E 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 literal 0 HcmV?d00001 diff --git a/docs/index.html b/docs/index.html index 0598fc449b..c2b9d12d7d 100644 --- a/docs/index.html +++ b/docs/index.html @@ -106,6 +106,43 @@ <div class="marketing"> + <h1>Built with Bootstrap</h1> + <ul class="media-grid example-sites"> + <li> + <a href="http://kippt.com/" target="_blank"> + <img src="assets/img/example-sites/kippt.png" alt="Kippt"> + </a> + </li> + <li> + <a href="http://www.fleetio.com/" target="_blank"> + <img src="assets/img/example-sites/fleetio.png" alt="Fleetio"> + </a> + </li> + <li> + <a href="http://www.jshint.com/" target="_blank"> + <img src="assets/img/example-sites/jshint.png" alt="JS Hint"> + </a> + </li> +<!-- + <li> + <a href="http://bartop.co/" target="_blank"> + <img src="assets/img/example-sites/bartop.png" alt="Bartop.co"> + </a> + </li> + <li> + <a href="http://railwayjs.com/" target="_blank"> + <img src="assets/img/example-sites/railwayjs.png" alt="RailwayJS"> + </a> + </li> + <li> + <a href="http://www.totalwireframe.com/" target="_blank"> + <img src="assets/img/example-sites/totalwireframe.png" alt="Total Wireframe"> + </a> + </li> + --> + </ul> + + <h1>Designed for everyone, everywhere</h1> <div class="row"> <div class="span4"> <img class="icon" src="assets/img/glyphicons/glyphicons_042_group.png"> diff --git a/lib/type.less b/lib/type.less index bdc99acdfa..b2ba73b867 100644 --- a/lib/type.less +++ b/lib/type.less @@ -116,9 +116,10 @@ dl { // Horizontal rules hr { - margin: 20px 0 19px; + margin: @baseLineHeight * 1.5 0; border: 0; - border-bottom: 1px solid #eee; + border-top: 1px solid #e5e5e5; + border-bottom: 1px solid #fff; } // Emphasis -- GitLab From 4d55356e9b476cbfea5eb2ea01099dc19a5fc5f4 Mon Sep 17 00:00:00 2001 From: Mark Otto <markdotto@gmail.com> Date: Fri, 9 Dec 2011 14:39:23 -0800 Subject: [PATCH 123/318] remove uber large responsive stuff --- bootstrap.css | 124 +++++++++++++++++--------------------------- bootstrap.min.css | 2 +- lib/responsive.less | 3 +- 3 files changed, 52 insertions(+), 77 deletions(-) diff --git a/bootstrap.css b/bootstrap.css index 0c1c02566a..6cfb0fbf90 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 Dec 9 13:29:05 PST 2011 + * Date: Fri Dec 9 14:39:08 PST 2011 */ html, body { margin: 0; @@ -2684,83 +2684,57 @@ button.btn::-moz-focus-inner, input[type=submit].btn::-moz-focus-inner { margin-left: 768px; } } +/* @media (min-width: 1210px) { - .container { - width: 1170px; - } - [class*="span"] { - margin-left: 30px; - } - .span1 { - width: 70px; - } - .span2 { - width: 170px; - } - .span3 { - width: 270px; - } - .span4 { - width: 370px; - } - .span5 { - width: 470px; - } - .span6 { - width: 570px; - } - .span7 { - width: 670px; - } - .span8 { - width: 770px; - } - .span9 { - width: 870px; - } - .span10 { - width: 970px; - } - .span11 { - width: 1070px; - } - .span12 { - width: 1170px; - } - .offset1 { - margin-left: 100px; - } - .offset2 { - margin-left: 200px; - } - .offset3 { - margin-left: 300px; - } - .offset4 { - margin-left: 400px; - } - .offset5 { - margin-left: 500px; - } - .offset6 { - margin-left: 600px; - } - .offset7 { - margin-left: 700px; - } - .offset8 { - margin-left: 800px; + + // Reset grid variables + @gridColumns: 12; + @gridColumnWidth: 70px; + @gridGutterWidth: 30px; + @siteWidth: 1170px; + + // Bring grid mixins to recalculate widths + .columns(@columnSpan: 1) { + width: (@gridColumnWidth * @columnSpan) + (@gridGutterWidth * (@columnSpan - 1)); } - .offset9 { - margin-left: 900px; + .offset(@columnOffset: 1) { + margin-left: (@gridColumnWidth * @columnOffset) + (@gridGutterWidth * (@columnOffset - 1)) + @gridGutterWidth; } - .offset10 { - margin-left: 1000px; - } - .offset11 { - margin-left: 1100px; + + .container { + width: @siteWidth; } - .offset12 { - margin-left: 1200px; + [class*="span"] { + margin-left: @gridGutterWidth; } + + // Default columns + .span1 { .columns(1); } + .span2 { .columns(2); } + .span3 { .columns(3); } + .span4 { .columns(4); } + .span5 { .columns(5); } + .span6 { .columns(6); } + .span7 { .columns(7); } + .span8 { .columns(8); } + .span9 { .columns(9); } + .span10 { .columns(10); } + .span11 { .columns(11); } + .span12 { .columns(12); } + + // Offset column options + .offset1 { .offset(1); } + .offset2 { .offset(2); } + .offset3 { .offset(3); } + .offset4 { .offset(4); } + .offset5 { .offset(5); } + .offset6 { .offset(6); } + .offset7 { .offset(7); } + .offset8 { .offset(8); } + .offset9 { .offset(9); } + .offset10 { .offset(10); } + .offset11 { .offset(11); } + .offset12 { .offset(12); } + } +*/ diff --git a/bootstrap.min.css b/bootstrap.min.css index 336d6f68c4..0be081c0af 100644 --- a/bootstrap.min.css +++ b/bootstrap.min.css @@ -329,4 +329,4 @@ button.btn::-moz-focus-inner,input[type=submit].btn::-moz-focus-inner{padding:0; .media-grid a{float:left;padding:4px;margin:0 0 20px 20px;border:1px solid #ddd;-webkit-border-radius:4px;-moz-border-radius:4px;border-radius:4px;-webkit-box-shadow:0 1px 1px rgba(0, 0, 0, 0.075);-moz-box-shadow:0 1px 1px rgba(0, 0, 0, 0.075);box-shadow:0 1px 1px rgba(0, 0, 0, 0.075);}.media-grid a img{display:block;} .media-grid a:hover{border-color:#0069d6;-webkit-box-shadow:0 1px 4px rgba(0, 105, 214, 0.25);-moz-box-shadow:0 1px 4px rgba(0, 105, 214, 0.25);box-shadow:0 1px 4px rgba(0, 105, 214, 0.25);} .hidden{display:none;visibility:hidden;} -@media (max-width: 480px){.modal{width:auto;margin:0;} .horizontal-form .control-group>label{float:none;width:auto;padding-top:0;text-align:left;} .horizontal-form .controls{margin-left:0;} .horizontal-form .control-list{padding-top:0;} .horizontal-form .form-actions{padding-left:0;}}@media (max-width: 768px){.container{width:auto;padding:0 20px;} .row{margin-left:0;} [class*="span"]{float:none;display:block;width:auto;margin:0;} .nav{position:absolute;top:0;left:0;width:180px;padding-top:40px;list-style:none;} .nav,.nav>li:last-child a{-webkit-border-radius:0 0 4px 0;-moz-border-radius:0 0 4px 0;border-radius:0 0 4px 0;} .nav>li{float:none;display:none;} .nav>li>a{float:none;background-color:#222;} .nav>.active{display:block;position:absolute;top:0;left:0;} .navbar ul .active>a{background-color:transparent;} .nav>.active a:after{display:inline-block;width:0;height:0;margin-top:8px;margin-left:6px;text-indent:-99999px;vertical-align:top;border-left:4px solid transparent;border-right:4px solid transparent;border-top:4px solid #ffffff;filter:alpha(opacity=100);-moz-opacity:1;opacity:1;content:"↓";} .nav>.active a:hover{background-color:rgba(255, 255, 255, 0.05);}}@media (min-width: 768px) and (max-width: 940px){.container{width:748px;} .span1{width:44px;} .span2{width:108px;} .span3{width:172px;} .span4{width:236px;} .span5{width:300px;} .span6{width:364px;} .span7{width:428px;} .span8{width:492px;} .span9{width:556px;} .span10{width:620px;} .span11{width:684px;} .span12{width:748px;} .offset1{margin-left:64px;} .offset2{margin-left:128px;} .offset3{margin-left:192px;} .offset4{margin-left:256px;} .offset5{margin-left:320px;} .offset6{margin-left:384px;} .offset7{margin-left:448px;} .offset8{margin-left:512px;} .offset9{margin-left:576px;} .offset10{margin-left:640px;} .offset11{margin-left:704px;} .offset12{margin-left:768px;}}@media (min-width: 1210px){.container{width:1170px;} [class*="span"]{margin-left:30px;} .span1{width:70px;} .span2{width:170px;} .span3{width:270px;} .span4{width:370px;} .span5{width:470px;} .span6{width:570px;} .span7{width:670px;} .span8{width:770px;} .span9{width:870px;} .span10{width:970px;} .span11{width:1070px;} .span12{width:1170px;} .offset1{margin-left:100px;} .offset2{margin-left:200px;} .offset3{margin-left:300px;} .offset4{margin-left:400px;} .offset5{margin-left:500px;} .offset6{margin-left:600px;} .offset7{margin-left:700px;} .offset8{margin-left:800px;} .offset9{margin-left:900px;} .offset10{margin-left:1000px;} .offset11{margin-left:1100px;} .offset12{margin-left:1200px;}} +@media (max-width: 480px){.modal{width:auto;margin:0;} .horizontal-form .control-group>label{float:none;width:auto;padding-top:0;text-align:left;} .horizontal-form .controls{margin-left:0;} .horizontal-form .control-list{padding-top:0;} .horizontal-form .form-actions{padding-left:0;}}@media (max-width: 768px){.container{width:auto;padding:0 20px;} .row{margin-left:0;} [class*="span"]{float:none;display:block;width:auto;margin:0;} .nav{position:absolute;top:0;left:0;width:180px;padding-top:40px;list-style:none;} .nav,.nav>li:last-child a{-webkit-border-radius:0 0 4px 0;-moz-border-radius:0 0 4px 0;border-radius:0 0 4px 0;} .nav>li{float:none;display:none;} .nav>li>a{float:none;background-color:#222;} .nav>.active{display:block;position:absolute;top:0;left:0;} .navbar ul .active>a{background-color:transparent;} .nav>.active a:after{display:inline-block;width:0;height:0;margin-top:8px;margin-left:6px;text-indent:-99999px;vertical-align:top;border-left:4px solid transparent;border-right:4px solid transparent;border-top:4px solid #ffffff;filter:alpha(opacity=100);-moz-opacity:1;opacity:1;content:"↓";} .nav>.active a:hover{background-color:rgba(255, 255, 255, 0.05);}}@media (min-width: 768px) and (max-width: 940px){.container{width:748px;} .span1{width:44px;} .span2{width:108px;} .span3{width:172px;} .span4{width:236px;} .span5{width:300px;} .span6{width:364px;} .span7{width:428px;} .span8{width:492px;} .span9{width:556px;} .span10{width:620px;} .span11{width:684px;} .span12{width:748px;} .offset1{margin-left:64px;} .offset2{margin-left:128px;} .offset3{margin-left:192px;} .offset4{margin-left:256px;} .offset5{margin-left:320px;} .offset6{margin-left:384px;} .offset7{margin-left:448px;} .offset8{margin-left:512px;} .offset9{margin-left:576px;} .offset10{margin-left:640px;} .offset11{margin-left:704px;} .offset12{margin-left:768px;}} diff --git a/lib/responsive.less b/lib/responsive.less index e0772b111b..c74f6b98e0 100644 --- a/lib/responsive.less +++ b/lib/responsive.less @@ -173,7 +173,7 @@ // LARGE DESKTOP & UP // ------------------ - +/* @media (min-width: 1210px) { // Reset grid variables @@ -226,3 +226,4 @@ .offset12 { .offset(12); } } +*/ -- GitLab From d587845149471ad9ed07bc57c1a8652c54d17c55 Mon Sep 17 00:00:00 2001 From: Mark Otto <markdotto@gmail.com> Date: Sat, 10 Dec 2011 22:21:08 -0800 Subject: [PATCH 124/318] tweaks and increase specificity of pills and active classes --- bootstrap.css | 8 ++++---- bootstrap.min.css | 4 ++-- docs/index.html | 2 +- lib/tabs-pills.less | 4 ++-- 4 files changed, 9 insertions(+), 9 deletions(-) diff --git a/bootstrap.css b/bootstrap.css index 6cfb0fbf90..b7a820f716 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 Dec 9 14:39:08 PST 2011 + * Date: Sat Dec 10 22:20:18 PST 2011 */ html, body { margin: 0; @@ -2062,7 +2062,7 @@ button.btn::-moz-focus-inner, input[type=submit].btn::-moz-focus-inner { .tabs li.open a.menu:after, .tabs .dropdown.open .dropdown-toggle:after { border-top-color: #555; } -.pills a { +.pills > a { padding: 0 15px; margin: 5px 3px 5px 0; line-height: 30px; @@ -2071,13 +2071,13 @@ button.btn::-moz-focus-inner, input[type=submit].btn::-moz-focus-inner { -moz-border-radius: 15px; border-radius: 15px; } -.pills a:hover { +.pills > a:hover { color: #ffffff; text-decoration: none; text-shadow: 0 1px 1px rgba(0, 0, 0, 0.25); background-color: #00438a; } -.pills .active a { +.pills .active > a { color: #ffffff; text-shadow: 0 1px 1px rgba(0, 0, 0, 0.25); background-color: #0069d6; diff --git a/bootstrap.min.css b/bootstrap.min.css index 0be081c0af..3a77a1df22 100644 --- a/bootstrap.min.css +++ b/bootstrap.min.css @@ -274,8 +274,8 @@ button.btn::-moz-focus-inner,input[type=submit].btn::-moz-focus-inner{padding:0; .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;} -.pills a{padding:0 15px;margin:5px 3px 5px 0;line-height:30px;text-shadow:0 1px 1px #ffffff;-webkit-border-radius:15px;-moz-border-radius:15px;border-radius:15px;}.pills a:hover{color:#ffffff;text-decoration:none;text-shadow:0 1px 1px rgba(0, 0, 0, 0.25);background-color:#00438a;} -.pills .active a{color:#ffffff;text-shadow:0 1px 1px rgba(0, 0, 0, 0.25);background-color:#0069d6;} +.pills>a{padding:0 15px;margin:5px 3px 5px 0;line-height:30px;text-shadow:0 1px 1px #ffffff;-webkit-border-radius:15px;-moz-border-radius:15px;border-radius:15px;}.pills>a:hover{color:#ffffff;text-decoration:none;text-shadow:0 1px 1px rgba(0, 0, 0, 0.25);background-color:#00438a;} +.pills .active>a{color:#ffffff;text-shadow:0 1px 1px rgba(0, 0, 0, 0.25);background-color:#0069d6;} .pills-vertical>li{float:none;} .tab-content>.tab-pane,.pill-content>.pill-pane{display:none;} .tab-content>.active,.pill-content>.active{display:block;} diff --git a/docs/index.html b/docs/index.html index c2b9d12d7d..0a63c19103 100644 --- a/docs/index.html +++ b/docs/index.html @@ -57,7 +57,7 @@ <p class="lead">Bootstrap is a responsive frontend toolkit from Twitter designed to kickstart web development, complete with core HTML, CSS, and JS for grids, type, forms, navigation, and many more components.</p> <p class="download-info"> <a href="https://github.com/twitter/bootstrap/" class="btn primary btn-large">Download on GitHub</a> - <a href="./scaffolding.html" class="btn btn-large">Get started</a> + <a href="./scaffolding.html" class="btn btn-large">Get started →</a> Currently v2.0.0 </p> diff --git a/lib/tabs-pills.less b/lib/tabs-pills.less index ad6459c0d9..26c62c950a 100644 --- a/lib/tabs-pills.less +++ b/lib/tabs-pills.less @@ -182,7 +182,7 @@ // Pills .pills { - a { + > a { padding: 0 15px; margin: 5px 3px 5px 0; line-height: 30px; @@ -195,7 +195,7 @@ background-color: @linkColorHover; } } - .active a { + .active > a { color: @white; text-shadow: 0 1px 1px rgba(0,0,0,.25); background-color: @linkColor; -- GitLab From d2e56ad53d5d5c93cd6206a6829ee2054f583c5b Mon Sep 17 00:00:00 2001 From: Mark Otto <markdotto@gmail.com> Date: Sat, 10 Dec 2011 22:29:49 -0800 Subject: [PATCH 125/318] unstyle image inputs --- bootstrap.css | 10 +++++++--- bootstrap.min.css | 3 ++- lib/forms.less | 8 +++++++- 3 files changed, 16 insertions(+), 5 deletions(-) diff --git a/bootstrap.css b/bootstrap.css index b7a820f716..5fb8b6fc88 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: Sat Dec 10 22:20:18 PST 2011 + * Date: Sat Dec 10 22:29:17 PST 2011 */ html, body { margin: 0; @@ -567,8 +567,7 @@ select, -moz-border-radius: 3px; border-radius: 3px; } -/* Mini reset for unique input types */ -input[type=checkbox], input[type=radio] { +input[type=image], input[type=checkbox], input[type=radio] { width: auto; height: auto; padding: 0; @@ -605,6 +604,11 @@ select[multiple] { height: inherit; background-color: #ffffff; } +input[type=image] { + -webkit-box-shadow: none; + -moz-box-shadow: none; + box-shadow: none; +} textarea { height: auto; } diff --git a/bootstrap.min.css b/bootstrap.min.css index 3a77a1df22..eecca66d0b 100644 --- a/bootstrap.min.css +++ b/bootstrap.min.css @@ -96,11 +96,12 @@ legend{display:block;width:100%;margin-bottom:27px;font-size:19.5px;line-height: label,input,select,textarea{font-family:"Helvetica Neue",Helvetica,Arial,sans-serif;font-size:normal;font-weight:13px;line-height:18px;} label{display:block;margin-bottom:5px;color:#404040;} input,textarea,select,.uneditable-input{display:inline-block;width:210px;height:18px;padding:4px;font-size:13px;line-height:18px;color:#808080;border:1px solid #ccc;-webkit-border-radius:3px;-moz-border-radius:3px;border-radius:3px;} -input[type=checkbox],input[type=radio]{width:auto;height:auto;padding:0;margin:3px 0;*margin-top:0;line-height:normal;border:none;cursor:pointer;} +input[type=image],input[type=checkbox],input[type=radio]{width:auto;height:auto;padding:0;margin:3px 0;*margin-top:0;line-height:normal;border:none;cursor:pointer;} input[type=file]{padding:initial;line-height:initial;border:initial;background-color:#ffffff;background-color:initial;-webkit-box-shadow:none;-moz-box-shadow:none;box-shadow:none;} input[type=button],input[type=reset],input[type=submit]{width:auto;height:auto;} select,input[type=file]{height:27px;*margin-top:4px;line-height:27px;} select[multiple]{height:inherit;background-color:#ffffff;} +input[type=image]{-webkit-box-shadow:none;-moz-box-shadow:none;box-shadow:none;} textarea{height:auto;} input,textarea{-webkit-box-shadow:inset 0 1px 3px rgba(0, 0, 0, 0.1);-moz-box-shadow:inset 0 1px 3px rgba(0, 0, 0, 0.1);box-shadow:inset 0 1px 3px rgba(0, 0, 0, 0.1);-webkit-transition:border linear 0.2s,box-shadow linear 0.2s;-moz-transition:border linear 0.2s,box-shadow linear 0.2s;-ms-transition:border linear 0.2s,box-shadow linear 0.2s;-o-transition:border linear 0.2s,box-shadow linear 0.2s;transition:border linear 0.2s,box-shadow linear 0.2s;} input:focus,textarea:focus{border-color:rgba(82, 168, 236, 0.8);-webkit-box-shadow:inset 0 1px 3px rgba(0, 0, 0, 0.1),0 0 8px rgba(82, 168, 236, 0.6);-moz-box-shadow:inset 0 1px 3px rgba(0, 0, 0, 0.1),0 0 8px rgba(82, 168, 236, 0.6);box-shadow:inset 0 1px 3px rgba(0, 0, 0, 0.1),0 0 8px rgba(82, 168, 236, 0.6);outline:0;} diff --git a/lib/forms.less b/lib/forms.less index e85b9f2015..8d4369b186 100644 --- a/lib/forms.less +++ b/lib/forms.less @@ -53,7 +53,8 @@ select, .border-radius(3px); } -/* Mini reset for unique input types */ +// Mini reset for unique input types +input[type=image], input[type=checkbox], input[type=radio] { width: auto; @@ -98,6 +99,11 @@ select[multiple] { background-color: @white; // Fixes Chromium bug? } +// Remove shadow from image inputs +input[type=image] { + .box-shadow(none); +} + textarea { height: auto; } -- GitLab From 95048c271eb4166a4e22ab1f0ff6d69bade7d62b Mon Sep 17 00:00:00 2001 From: Mark Otto <markdotto@gmail.com> Date: Sun, 11 Dec 2011 01:03:57 -0800 Subject: [PATCH 126/318] fix specificity on pills --- bootstrap.css | 6 +++--- bootstrap.min.css | 2 +- lib/tabs-pills.less | 2 +- 3 files changed, 5 insertions(+), 5 deletions(-) diff --git a/bootstrap.css b/bootstrap.css index 79fe4826cf..1c04bc09c9 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 Dec 11 00:58:00 PST 2011 + * Date: Sun Dec 11 01:03:44 PST 2011 */ html, body { margin: 0; @@ -2074,7 +2074,7 @@ button.btn::-moz-focus-inner, input[type=submit].btn::-moz-focus-inner { .tabs li.open a.menu:after, .tabs .dropdown.open .dropdown-toggle:after { border-top-color: #555; } -.pills > a { +.pills > li > a { padding: 0 15px; margin: 5px 3px 5px 0; line-height: 30px; @@ -2083,7 +2083,7 @@ button.btn::-moz-focus-inner, input[type=submit].btn::-moz-focus-inner { -moz-border-radius: 15px; border-radius: 15px; } -.pills > a:hover { +.pills > li > a:hover { color: #ffffff; text-decoration: none; text-shadow: 0 1px 1px rgba(0, 0, 0, 0.25); diff --git a/bootstrap.min.css b/bootstrap.min.css index 48cc90703e..b9e7dd1ee5 100644 --- a/bootstrap.min.css +++ b/bootstrap.min.css @@ -276,7 +276,7 @@ button.btn::-moz-focus-inner,input[type=submit].btn::-moz-focus-inner{padding:0; .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;} -.pills>a{padding:0 15px;margin:5px 3px 5px 0;line-height:30px;text-shadow:0 1px 1px #ffffff;-webkit-border-radius:15px;-moz-border-radius:15px;border-radius:15px;}.pills>a:hover{color:#ffffff;text-decoration:none;text-shadow:0 1px 1px rgba(0, 0, 0, 0.25);background-color:#00438a;} +.pills>li>a{padding:0 15px;margin:5px 3px 5px 0;line-height:30px;text-shadow:0 1px 1px #ffffff;-webkit-border-radius:15px;-moz-border-radius:15px;border-radius:15px;}.pills>li>a:hover{color:#ffffff;text-decoration:none;text-shadow:0 1px 1px rgba(0, 0, 0, 0.25);background-color:#00438a;} .pills .active>a{color:#ffffff;text-shadow:0 1px 1px rgba(0, 0, 0, 0.25);background-color:#0069d6;} .pills-vertical>li{float:none;} .tab-content>.tab-pane,.pill-content>.pill-pane{display:none;} diff --git a/lib/tabs-pills.less b/lib/tabs-pills.less index 26c62c950a..23ba9ccfac 100644 --- a/lib/tabs-pills.less +++ b/lib/tabs-pills.less @@ -182,7 +182,7 @@ // Pills .pills { - > a { + > li > a { padding: 0 15px; margin: 5px 3px 5px 0; line-height: 30px; -- GitLab From 401f84a7ec65996a8573671b2c17077f85e63e6f Mon Sep 17 00:00:00 2001 From: Mark Otto <markdotto@gmail.com> Date: Sun, 11 Dec 2011 01:58:06 -0800 Subject: [PATCH 127/318] center example sites in docs on mobile --- bootstrap.css | 2 +- docs/assets/css/docs.css | 20 ++++++++++++++++++++ docs/index.html | 11 ++++++++++- 3 files changed, 31 insertions(+), 2 deletions(-) diff --git a/bootstrap.css b/bootstrap.css index 1c04bc09c9..49164fa53d 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 Dec 11 01:03:44 PST 2011 + * Date: Sun Dec 11 01:57:49 PST 2011 */ html, body { margin: 0; diff --git a/docs/assets/css/docs.css b/docs/assets/css/docs.css index 73e619d290..9324f99901 100644 --- a/docs/assets/css/docs.css +++ b/docs/assets/css/docs.css @@ -323,6 +323,11 @@ h2 + table { -------------------------------------------------- */ @media (max-width: 480px) { + /* Reduce padding above jumbotron */ + body { + padding-top: 70px; + } + /* Change up some type stuff */ h1 small { display: block; @@ -362,6 +367,21 @@ h2 + table { .quick-links { margin: 40px 0 0; } + /* hide the bullets on mobile since our horizontal space is limited */ + .quick-links .divider { + display: none; + } + + /* center example sites */ + .example-sites { + margin-left: 0; + } + .example-sites a { + float: none; + display: block; + max-width: 300px; + margin: 0 auto 18px; + } } diff --git a/docs/index.html b/docs/index.html index 0a63c19103..55a75b1bf6 100644 --- a/docs/index.html +++ b/docs/index.html @@ -54,7 +54,7 @@ <header class="jumbotron masthead"> <div class="inner"> <h1>Bootstrap,<br> from Twitter</h1> - <p class="lead">Bootstrap is a responsive frontend toolkit from Twitter designed to kickstart web development, complete with core HTML, CSS, and JS for grids, type, forms, navigation, and many more components.</p> + <p class="lead">Bootstrap is a responsive frontend toolkit from Twitter designed to kickstart web development, featuring HTML, CSS, and JS for dozens of base elements and common design components.</p> <p class="download-info"> <a href="https://github.com/twitter/bootstrap/" class="btn primary btn-large">Download on GitHub</a> <a href="./scaffolding.html" class="btn btn-large">Get started →</a> @@ -236,6 +236,15 @@ <script src="http://code.jquery.com/jquery-1.6.2.min.js"></script> <script type="text/javascript"> + // When ready... + window.addEventListener("load",function() { + // Set a timeout... + setTimeout(function(){ + // Hide the address bar! + window.scrollTo(0, 1); + }, 0); + }); + // NOT FINAL BY ANY MEANS, JUST MAH JANK CODE BRO $(document).ready(function() { $('.nav .active').click(function(e) { -- GitLab From ecbc9ec4a2cbd3f68067b869c328d55e8afc8aa6 Mon Sep 17 00:00:00 2001 From: Mark Otto <markdotto@gmail.com> Date: Sun, 11 Dec 2011 02:03:16 -0800 Subject: [PATCH 128/318] updated footers everywhere --- docs/base-css.html | 7 +++---- docs/components.html | 7 +++---- docs/javascript.html | 7 +++---- docs/less.html | 7 +++---- docs/scaffolding.html | 7 +++---- 5 files changed, 15 insertions(+), 20 deletions(-) diff --git a/docs/base-css.html b/docs/base-css.html index b353a538d4..811bb01bd8 100644 --- a/docs/base-css.html +++ b/docs/base-css.html @@ -1108,10 +1108,9 @@ ================================================== --> <footer class="footer"> <p class="pull-right"><a href="#">Back to top</a></p> - <p> - Designed and built with all the love in the world <a href="http://twitter.com/twitter" target="_blank">@twitter</a> by <a href="http://twitter.com/mdo" target="_blank">@mdo</a> and <a href="http://twitter.com/fat" target="_blank">@fat</a>.<br> - Code licensed under the <a href="http://www.apache.org/licenses/LICENSE-2.0" target="_blank">Apache License v2.0</a>. Documentation licensed under <a href="http://creativecommons.org/licenses/by/3.0/">CC BY 3.0</a>. - </p> + <p>Designed and built with all the love in the world <a href="http://twitter.com/twitter" target="_blank">@twitter</a> by <a href="http://twitter.com/mdo" target="_blank">@mdo</a> and <a href="http://twitter.com/fat" target="_blank">@fat</a>.</p> + <p>Code licensed under the <a href="http://www.apache.org/licenses/LICENSE-2.0" target="_blank">Apache License v2.0</a>. Documentation licensed under <a href="http://creativecommons.org/licenses/by/3.0/">CC BY 3.0</a>.</p> + <p>Icons from <a href="http://glyphicons.com">Glyphicons Free</a>, licensed under <a href="http://creativecommons.org/licenses/by/3.0/">CC BY 3.0</a>.</p> </footer> </div><!-- /container --> diff --git a/docs/components.html b/docs/components.html index c8e0a6ab49..b4a88dd078 100644 --- a/docs/components.html +++ b/docs/components.html @@ -674,10 +674,9 @@ Lorem ipsum dolar sit amet illo error <a href="#" title="below">ipsum</a> verita ================================================== --> <footer class="footer"> <p class="pull-right"><a href="#">Back to top</a></p> - <p> - Designed and built with all the love in the world <a href="http://twitter.com/twitter" target="_blank">@twitter</a> by <a href="http://twitter.com/mdo" target="_blank">@mdo</a> and <a href="http://twitter.com/fat" target="_blank">@fat</a>.<br> - Code licensed under the <a href="http://www.apache.org/licenses/LICENSE-2.0" target="_blank">Apache License v2.0</a>. Documentation licensed under <a href="http://creativecommons.org/licenses/by/3.0/">CC BY 3.0</a>. - </p> + <p>Designed and built with all the love in the world <a href="http://twitter.com/twitter" target="_blank">@twitter</a> by <a href="http://twitter.com/mdo" target="_blank">@mdo</a> and <a href="http://twitter.com/fat" target="_blank">@fat</a>.</p> + <p>Code licensed under the <a href="http://www.apache.org/licenses/LICENSE-2.0" target="_blank">Apache License v2.0</a>. Documentation licensed under <a href="http://creativecommons.org/licenses/by/3.0/">CC BY 3.0</a>.</p> + <p>Icons from <a href="http://glyphicons.com">Glyphicons Free</a>, licensed under <a href="http://creativecommons.org/licenses/by/3.0/">CC BY 3.0</a>.</p> </footer> </div><!-- /container --> diff --git a/docs/javascript.html b/docs/javascript.html index d71de69247..4e40041320 100644 --- a/docs/javascript.html +++ b/docs/javascript.html @@ -1025,10 +1025,9 @@ $('#myCollapsible').bind('hidden', function () { ================================================== --> <footer class="footer"> <p class="pull-right"><a href="#">Back to top</a></p> - <p> - Designed and built with all the love in the world <a href="http://twitter.com/twitter" target="_blank">@twitter</a> by <a href="http://twitter.com/mdo" target="_blank">@mdo</a> and <a href="http://twitter.com/fat" target="_blank">@fat</a>.<br> - Code licensed under the <a href="http://www.apache.org/licenses/LICENSE-2.0" target="_blank">Apache License v2.0</a>. Documentation licensed under <a href="http://creativecommons.org/licenses/by/3.0/">CC BY 3.0</a>. - </p> + <p>Designed and built with all the love in the world <a href="http://twitter.com/twitter" target="_blank">@twitter</a> by <a href="http://twitter.com/mdo" target="_blank">@mdo</a> and <a href="http://twitter.com/fat" target="_blank">@fat</a>.</p> + <p>Code licensed under the <a href="http://www.apache.org/licenses/LICENSE-2.0" target="_blank">Apache License v2.0</a>. Documentation licensed under <a href="http://creativecommons.org/licenses/by/3.0/">CC BY 3.0</a>.</p> + <p>Icons from <a href="http://glyphicons.com">Glyphicons Free</a>, licensed under <a href="http://creativecommons.org/licenses/by/3.0/">CC BY 3.0</a>.</p> </footer> </div><!-- /container --> </body> diff --git a/docs/less.html b/docs/less.html index cd2c992df9..ab276eeced 100644 --- a/docs/less.html +++ b/docs/less.html @@ -446,10 +446,9 @@ ================================================== --> <footer class="footer"> <p class="pull-right"><a href="#">Back to top</a></p> - <p> - Designed and built with all the love in the world <a href="http://twitter.com/twitter" target="_blank">@twitter</a> by <a href="http://twitter.com/mdo" target="_blank">@mdo</a> and <a href="http://twitter.com/fat" target="_blank">@fat</a>.<br> - Code licensed under the <a href="http://www.apache.org/licenses/LICENSE-2.0" target="_blank">Apache License v2.0</a>. Documentation licensed under <a href="http://creativecommons.org/licenses/by/3.0/">CC BY 3.0</a>. - </p> + <p>Designed and built with all the love in the world <a href="http://twitter.com/twitter" target="_blank">@twitter</a> by <a href="http://twitter.com/mdo" target="_blank">@mdo</a> and <a href="http://twitter.com/fat" target="_blank">@fat</a>.</p> + <p>Code licensed under the <a href="http://www.apache.org/licenses/LICENSE-2.0" target="_blank">Apache License v2.0</a>. Documentation licensed under <a href="http://creativecommons.org/licenses/by/3.0/">CC BY 3.0</a>.</p> + <p>Icons from <a href="http://glyphicons.com">Glyphicons Free</a>, licensed under <a href="http://creativecommons.org/licenses/by/3.0/">CC BY 3.0</a>.</p> </footer> </div><!-- /container --> diff --git a/docs/scaffolding.html b/docs/scaffolding.html index f597e7e887..cb8e067dba 100644 --- a/docs/scaffolding.html +++ b/docs/scaffolding.html @@ -363,10 +363,9 @@ ================================================== --> <footer class="footer"> <p class="pull-right"><a href="#">Back to top</a></p> - <p> - Designed and built with all the love in the world <a href="http://twitter.com/twitter" target="_blank">@twitter</a> by <a href="http://twitter.com/mdo" target="_blank">@mdo</a> and <a href="http://twitter.com/fat" target="_blank">@fat</a>.<br> - Code licensed under the <a href="http://www.apache.org/licenses/LICENSE-2.0" target="_blank">Apache License v2.0</a>. Documentation licensed under <a href="http://creativecommons.org/licenses/by/3.0/">CC BY 3.0</a>. - </p> + <p>Designed and built with all the love in the world <a href="http://twitter.com/twitter" target="_blank">@twitter</a> by <a href="http://twitter.com/mdo" target="_blank">@mdo</a> and <a href="http://twitter.com/fat" target="_blank">@fat</a>.</p> + <p>Code licensed under the <a href="http://www.apache.org/licenses/LICENSE-2.0" target="_blank">Apache License v2.0</a>. Documentation licensed under <a href="http://creativecommons.org/licenses/by/3.0/">CC BY 3.0</a>.</p> + <p>Icons from <a href="http://glyphicons.com">Glyphicons Free</a>, licensed under <a href="http://creativecommons.org/licenses/by/3.0/">CC BY 3.0</a>.</p> </footer> </div><!-- /container --> -- GitLab From 54a84f0f7f217ea12249857d2b2d5ad4795e41e2 Mon Sep 17 00:00:00 2001 From: Mark Otto <markdotto@gmail.com> Date: Sun, 11 Dec 2011 02:05:50 -0800 Subject: [PATCH 129/318] clearer grid vars docs language --- docs/scaffolding.html | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/docs/scaffolding.html b/docs/scaffolding.html index cb8e067dba..8b7e620fb9 100644 --- a/docs/scaffolding.html +++ b/docs/scaffolding.html @@ -174,22 +174,22 @@ <tr> <td><code>@gridColumns</code></td> <td>12</td> - <td>The number of columns within the grid</td> + <td>Number of columns</td> </tr> <tr> <td><code>@gridColumnWidth</code></td> <td>60px</td> - <td>The width of each column within the grid</td> + <td>Width of each column</td> </tr> <tr> <td><code>@gridGutterWidth</code></td> <td>20px</td> - <td>The negative space between each column</td> + <td>Negative space between columns</td> </tr> <tr> <td><code>@siteWidth</code></td> <td><em>Computed sum of all columns and gutters</em></td> - <td>We use some basic match to count the number of columns and gutters and set the width of the <code>.fixed-container()</code> mixin.</td> + <td>Counts number of columns and gutters to set width of the <code>.fixed-container()</code> mixin</td> </tr> </tbody> </table> -- GitLab From 4e8c26d409c60f50e2ab245e74ec18af5131d838 Mon Sep 17 00:00:00 2001 From: Mark Otto <markdotto@gmail.com> Date: Sun, 11 Dec 2011 02:38:58 -0800 Subject: [PATCH 130/318] updated buttons docs --- bootstrap.css | 2 +- docs/assets/css/docs.css | 1 - docs/base-css.html | 18 ++++++------------ 3 files changed, 7 insertions(+), 14 deletions(-) diff --git a/bootstrap.css b/bootstrap.css index 49164fa53d..4e5055c1b7 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 Dec 11 01:57:49 PST 2011 + * Date: Sun Dec 11 02:07:42 PST 2011 */ html, body { margin: 0; diff --git a/docs/assets/css/docs.css b/docs/assets/css/docs.css index 9324f99901..7c1e65942d 100644 --- a/docs/assets/css/docs.css +++ b/docs/assets/css/docs.css @@ -382,7 +382,6 @@ h2 + table { max-width: 300px; margin: 0 auto 18px; } - } diff --git a/docs/base-css.html b/docs/base-css.html index 811bb01bd8..2098974027 100644 --- a/docs/base-css.html +++ b/docs/base-css.html @@ -990,40 +990,34 @@ <table class="bordered-table striped-table"> <thead> <tr> - <th>Name</th> - <th>Preview</th> + <th>Button</th> <th>Class</th> <th>Description</th> </tr> </thead> <tbody> <tr> - <th>Default</th> - <td><a class="btn" href="#">Button</a></td> + <td><a class="btn" href="#">Default</a></td> <td><code>.btn</code></td> <td>Standard gray button with gradient</td> </tr> <tr> - <th>Primary</th> - <td><a class="btn primary" href="#">Button</a></td> + <td><a class="btn primary" href="#">Primary</a></td> <td><code>.primary</code></td> <td>Makes button blue for more visual weight to indicate the primary action in a set of buttons</td> </tr> <tr> - <th>Info</th> - <td><a class="btn info" href="#">Button</a></td> + <td><a class="btn info" href="#">Info</a></td> <td><code>.info</code></td> <td>Used as an alternate to the default styles</td> </tr> <tr> - <th>Success</th> - <td><a class="btn success" href="#">Button</a></td> + <td><a class="btn success" href="#">Success</a></td> <td><code>.success</code></td> <td>Used to indicate a successful or positive action will be taken</td> </tr> <tr> - <th>Danger</th> - <td><a class="btn danger" href="#">Button</a></td> + <td><a class="btn danger" href="#">Danger</a></td> <td><code>.danger</code></td> <td>Used to indicate a dangerous or potentially negative action will be taken</td> </tr> -- GitLab From d681ae9f51b85d8e1efae2a819ce289266d7efd0 Mon Sep 17 00:00:00 2001 From: Mark Otto <markdotto@gmail.com> Date: Mon, 12 Dec 2011 09:51:41 -0800 Subject: [PATCH 131/318] updated docs to include other less apps --- bootstrap.css | 2 +- docs/assets/css/docs.css | 6 ++++++ docs/less.html | 16 ++++++++++++++-- 3 files changed, 21 insertions(+), 3 deletions(-) diff --git a/bootstrap.css b/bootstrap.css index 4e5055c1b7..6411413ff7 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 Dec 11 02:07:42 PST 2011 + * Date: Mon Dec 12 09:51:27 PST 2011 */ html, body { margin: 0; diff --git a/docs/assets/css/docs.css b/docs/assets/css/docs.css index 7c1e65942d..586b5334b1 100644 --- a/docs/assets/css/docs.css +++ b/docs/assets/css/docs.css @@ -382,6 +382,12 @@ h2 + table { max-width: 300px; margin: 0 auto 18px; } + + table code { + white-space: normal; + word-wrap: break-word; + word-break: break-all; + } } diff --git a/docs/less.html b/docs/less.html index ab276eeced..52de8b6aac 100644 --- a/docs/less.html +++ b/docs/less.html @@ -392,7 +392,7 @@ <h2 id="compiling">Compiling Less</h2> <p>After modifying the <code>.less</code> files in /lib/, you'll need to recompile them in order to regenerate the bootstrap-*.*.*.css and bootstrap-*.*.*.min.css files. If you're submitting a pull request to GitHub, you must always recompile.</p> <h3>Ways to compile</h3> - <table class="striped-table"> + <table class="bordered-table striped-table"> <thead> <tr> <th style="width: 120px;">Method</th> @@ -428,12 +428,24 @@ </td> </tr> <tr> - <td>Mac app</td> + <td><a href="http://incident57.com/less/" target="_blank">Unofficial Mac app</a></td> <td> <p><a href="http://incident57.com/less/">The unofficial Mac app</a> watches directories of .less files and compiles the code to local files after every save of a watched .less file.</p> <p>If you like, you can toggle preferences in the app for automatic minifying and which directory the compiled files end up in.</p> </td> </tr> + <tr> + <td><a href="http://crunchapp.net/" target="_blank">Crunch</a></td> + <td>Crunch is a great looking LESS editor and compiler built on Adobe Air.</td> + </tr> + <tr> + <td><a href="http://incident57.com/codekit/" target="_blank">CodeKit</a></td> + <td>Created by the same guy as the unofficial Mac app, CodeKit is a Mac app that compiles LESS, SASS, Stylus, and CoffeeScript.</td> + </tr> + <tr> + <td><a href="http://wearekiss.com/simpless" target="_blank">Simpless</a></td> + <td>Mac, Linux, and PC app for drag and drop compiling of LESS files. Plus, the <a href="https://github.com/Paratron/SimpLESS" target="_blank">source code is on GitHub</a>.</td> + </tr> </tbody> </table> </div> -- GitLab From aa69286c306ab4d0e5fe748953cded81f8260cc1 Mon Sep 17 00:00:00 2001 From: Mark Otto <markdotto@gmail.com> Date: Tue, 13 Dec 2011 10:05:19 -0800 Subject: [PATCH 132/318] rename transitions js file, fix link in js docs --- docs/javascript.html | 2 +- js/{bootstrap-transition.js => bootstrap-transitions.js} | 0 2 files changed, 1 insertion(+), 1 deletion(-) rename js/{bootstrap-transition.js => bootstrap-transitions.js} (100%) diff --git a/docs/javascript.html b/docs/javascript.html index 4e40041320..6c0e12c192 100644 --- a/docs/javascript.html +++ b/docs/javascript.html @@ -39,7 +39,7 @@ <script src="assets/js/google-code-prettify/prettify.js"></script> <script>$(function () { prettyPrint() })</script> - <script src="../js/bootstrap-transition.js"></script> + <script src="../js/bootstrap-transitions.js"></script> <script src="../js/bootstrap-alert.js"></script> <script src="../js/bootstrap-modal.js"></script> <script src="../js/bootstrap-dropdown.js"></script> diff --git a/js/bootstrap-transition.js b/js/bootstrap-transitions.js similarity index 100% rename from js/bootstrap-transition.js rename to js/bootstrap-transitions.js -- GitLab From 7df0d1c7d18a72f401094d08afa4eaa9142fe511 Mon Sep 17 00:00:00 2001 From: Jacob Thornton <jacobthornton@gmail.com> Date: Wed, 14 Dec 2011 18:45:33 -0800 Subject: [PATCH 133/318] rename transitions to transition and fix scrollspy example --- docs/assets/css/docs.css | 6 +++++ docs/javascript.html | 2 +- js/bootstrap-transition.js | 45 ++++++++++++++++++++++++++++++++++++++ 3 files changed, 52 insertions(+), 1 deletion(-) create mode 100644 js/bootstrap-transition.js diff --git a/docs/assets/css/docs.css b/docs/assets/css/docs.css index 586b5334b1..fa8c92e505 100644 --- a/docs/assets/css/docs.css +++ b/docs/assets/css/docs.css @@ -318,6 +318,12 @@ h2 + table { width: 290px; } +.scrollspy-example { + height: 200px; + overflow: auto; + position: relative; +} + /* Responsive Docs -------------------------------------------------- */ diff --git a/docs/javascript.html b/docs/javascript.html index 6c0e12c192..4e40041320 100644 --- a/docs/javascript.html +++ b/docs/javascript.html @@ -39,7 +39,7 @@ <script src="assets/js/google-code-prettify/prettify.js"></script> <script>$(function () { prettyPrint() })</script> - <script src="../js/bootstrap-transitions.js"></script> + <script src="../js/bootstrap-transition.js"></script> <script src="../js/bootstrap-alert.js"></script> <script src="../js/bootstrap-modal.js"></script> <script src="../js/bootstrap-dropdown.js"></script> diff --git a/js/bootstrap-transition.js b/js/bootstrap-transition.js new file mode 100644 index 0000000000..25f8b111f1 --- /dev/null +++ b/js/bootstrap-transition.js @@ -0,0 +1,45 @@ +/* =================================================== + * bootstrap-transitions.js v2.0.0 + * http://twitter.github.com/bootstrap/javascript.html + * =================================================== + * Copyright 2011 Twitter, Inc. + * + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + * ========================================================== */ + +$(function () { + + /* CSS TRANSITION SUPPORT (https://gist.github.com/373874) + * ======================================================= */ + + $.support.transition = (function () { + var thisBody = document.body || document.documentElement + , thisStyle = thisBody.style + , support = thisStyle.transition !== undefined || thisStyle.WebkitTransition !== undefined || thisStyle.MozTransition !== undefined || thisStyle.MsTransition !== undefined || thisStyle.OTransition !== undefined + + return support && { + end: (function () { + var transitionEnd = "TransitionEnd" + if ( $.browser.webkit ) { + transitionEnd = "webkitTransitionEnd" + } else if ( $.browser.mozilla ) { + transitionEnd = "transitionend" + } else if ( $.browser.opera ) { + transitionEnd = "oTransitionEnd" + } + return transitionEnd + }()) + } + })() + +}) \ No newline at end of file -- GitLab From 72a536393c2f2aba4f855384e94c4ce09bc2e39c Mon Sep 17 00:00:00 2001 From: Mark Otto <markdotto@gmail.com> Date: Mon, 19 Dec 2011 22:58:56 -0800 Subject: [PATCH 134/318] mostly docs updates, but also some bug fixes per github issues --- bootstrap.css | 35 +++++--- bootstrap.min.css | 15 ++-- docs/assets/css/docs.css | 4 +- docs/components.html | 179 +++++++++++++++++++++++++-------------- docs/javascript.html | 2 +- docs/scaffolding.html | 51 ++++++----- docs/upgrading.html | 152 +++++++++++++++++++++++++++++++++ lib/forms.less | 6 +- lib/media-grids.less | 49 ++++++----- 9 files changed, 364 insertions(+), 129 deletions(-) create mode 100644 docs/upgrading.html diff --git a/bootstrap.css b/bootstrap.css index 6411413ff7..f57423b0c7 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: Mon Dec 12 09:51:27 PST 2011 + * Date: Mon Dec 19 22:58:34 PST 2011 */ html, body { margin: 0; @@ -600,9 +600,11 @@ select, input[type=file] { line-height: 27px; } +select { + background-color: #ffffff; +} select[multiple] { height: inherit; - background-color: #ffffff; } input[type=image] { -webkit-box-shadow: none; @@ -2492,27 +2494,28 @@ button.btn::-moz-focus-inner, input[type=submit].btn::-moz-focus-inner { .popover .content p, .popover .content ul, .popover .content ol { margin-bottom: 0; } -.media-grid { +.thumbnails { margin-left: -20px; margin-bottom: 0; + list-style: none; zoom: 1; } -.media-grid:before, .media-grid:after { +.thumbnails:before, .thumbnails:after { display: table; *display: inline; content: ""; zoom: 1; } -.media-grid:after { +.thumbnails:after { clear: both; } -.media-grid li { - display: inline; -} -.media-grid a { +.thumbnails > li { float: left; - padding: 4px; margin: 0 0 20px 20px; +} +.thumbnail { + display: block; + line-height: 1; border: 1px solid #ddd; -webkit-border-radius: 4px; -moz-border-radius: 4px; @@ -2521,15 +2524,19 @@ button.btn::-moz-focus-inner, input[type=submit].btn::-moz-focus-inner { -moz-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.075); box-shadow: 0 1px 1px rgba(0, 0, 0, 0.075); } -.media-grid a img { - display: block; -} -.media-grid a:hover { +a.thumbnail:hover { border-color: #0069d6; -webkit-box-shadow: 0 1px 4px rgba(0, 105, 214, 0.25); -moz-box-shadow: 0 1px 4px rgba(0, 105, 214, 0.25); box-shadow: 0 1px 4px rgba(0, 105, 214, 0.25); } +.thumbnail > img { + display: block; + margin: 4px; +} +.thumbnail .caption { + padding: 9px; +} .hidden { display: none; visibility: hidden; diff --git a/bootstrap.min.css b/bootstrap.min.css index b9e7dd1ee5..4bb1adc5c0 100644 --- a/bootstrap.min.css +++ b/bootstrap.min.css @@ -100,7 +100,8 @@ input[type=image],input[type=checkbox],input[type=radio]{width:auto;height:auto; input[type=file]{padding:initial;line-height:initial;border:initial;background-color:#ffffff;background-color:initial;-webkit-box-shadow:none;-moz-box-shadow:none;box-shadow:none;} input[type=button],input[type=reset],input[type=submit]{width:auto;height:auto;} select,input[type=file]{height:27px;*margin-top:4px;line-height:27px;} -select[multiple]{height:inherit;background-color:#ffffff;} +select{background-color:#ffffff;} +select[multiple]{height:inherit;} input[type=image]{-webkit-box-shadow:none;-moz-box-shadow:none;box-shadow:none;} textarea{height:auto;} input,textarea{-webkit-box-shadow:inset 0 1px 3px rgba(0, 0, 0, 0.1);-moz-box-shadow:inset 0 1px 3px rgba(0, 0, 0, 0.1);box-shadow:inset 0 1px 3px rgba(0, 0, 0, 0.1);-webkit-transition:border linear 0.2s,box-shadow linear 0.2s;-moz-transition:border linear 0.2s,box-shadow linear 0.2s;-ms-transition:border linear 0.2s,box-shadow linear 0.2s;-o-transition:border linear 0.2s,box-shadow linear 0.2s;transition:border linear 0.2s,box-shadow linear 0.2s;} @@ -325,10 +326,12 @@ button.btn::-moz-focus-inner,input[type=submit].btn::-moz-focus-inner{padding:0; .popover .inner{padding:3px;width:280px;overflow:hidden;background-color:#000000;background-color:rgba(0, 0, 0, 0.8);-webkit-border-radius:6px;-moz-border-radius:6px;border-radius:6px;-webkit-box-shadow:0 3px 7px rgba(0, 0, 0, 0.3);-moz-box-shadow:0 3px 7px rgba(0, 0, 0, 0.3);box-shadow:0 3px 7px rgba(0, 0, 0, 0.3);} .popover .title{padding:9px 15px;line-height:1;background-color:#f5f5f5;border-bottom:1px solid #eee;-webkit-border-radius:3px 3px 0 0;-moz-border-radius:3px 3px 0 0;border-radius:3px 3px 0 0;} .popover .content{padding:14px;background-color:#ffffff;-webkit-border-radius:0 0 3px 3px;-moz-border-radius:0 0 3px 3px;border-radius:0 0 3px 3px;-webkit-background-clip:padding-box;-moz-background-clip:padding-box;background-clip:padding-box;}.popover .content p,.popover .content ul,.popover .content ol{margin-bottom:0;} -.media-grid{margin-left:-20px;margin-bottom:0;zoom:1;}.media-grid:before,.media-grid:after{display:table;*display:inline;content:"";zoom:1;} -.media-grid:after{clear:both;} -.media-grid li{display:inline;} -.media-grid a{float:left;padding:4px;margin:0 0 20px 20px;border:1px solid #ddd;-webkit-border-radius:4px;-moz-border-radius:4px;border-radius:4px;-webkit-box-shadow:0 1px 1px rgba(0, 0, 0, 0.075);-moz-box-shadow:0 1px 1px rgba(0, 0, 0, 0.075);box-shadow:0 1px 1px rgba(0, 0, 0, 0.075);}.media-grid a img{display:block;} -.media-grid a:hover{border-color:#0069d6;-webkit-box-shadow:0 1px 4px rgba(0, 105, 214, 0.25);-moz-box-shadow:0 1px 4px rgba(0, 105, 214, 0.25);box-shadow:0 1px 4px rgba(0, 105, 214, 0.25);} +.thumbnails{margin-left:-20px;margin-bottom:0;list-style:none;zoom:1;}.thumbnails:before,.thumbnails:after{display:table;*display:inline;content:"";zoom:1;} +.thumbnails:after{clear:both;} +.thumbnails>li{float:left;margin:0 0 20px 20px;} +.thumbnail{display:block;line-height:1;border:1px solid #ddd;-webkit-border-radius:4px;-moz-border-radius:4px;border-radius:4px;-webkit-box-shadow:0 1px 1px rgba(0, 0, 0, 0.075);-moz-box-shadow:0 1px 1px rgba(0, 0, 0, 0.075);box-shadow:0 1px 1px rgba(0, 0, 0, 0.075);} +a.thumbnail:hover{border-color:#0069d6;-webkit-box-shadow:0 1px 4px rgba(0, 105, 214, 0.25);-moz-box-shadow:0 1px 4px rgba(0, 105, 214, 0.25);box-shadow:0 1px 4px rgba(0, 105, 214, 0.25);} +.thumbnail>img{display:block;margin:4px;} +.thumbnail .caption{padding:9px;} .hidden{display:none;visibility:hidden;} @media (max-width: 480px){.modal{width:auto;margin:0;} .horizontal-form .control-group>label{float:none;width:auto;padding-top:0;text-align:left;} .horizontal-form .controls{margin-left:0;} .horizontal-form .control-list{padding-top:0;} .horizontal-form .form-actions{padding-left:0;}}@media (max-width: 768px){.container{width:auto;padding:0 20px;} .row{margin-left:0;} [class*="span"]{float:none;display:block;width:auto;margin:0;} .nav{position:absolute;top:0;left:0;width:180px;padding-top:40px;list-style:none;} .nav,.nav>li:last-child a{-webkit-border-radius:0 0 4px 0;-moz-border-radius:0 0 4px 0;border-radius:0 0 4px 0;} .nav>li{float:none;display:none;} .nav>li>a{float:none;background-color:#222;} .nav>.active{display:block;position:absolute;top:0;left:0;} .navbar ul .active>a{background-color:transparent;} .nav>.active a:after{display:inline-block;width:0;height:0;margin-top:8px;margin-left:6px;text-indent:-99999px;vertical-align:top;border-left:4px solid transparent;border-right:4px solid transparent;border-top:4px solid #ffffff;filter:alpha(opacity=100);-moz-opacity:1;opacity:1;content:"↓";} .nav>.active a:hover{background-color:rgba(255, 255, 255, 0.05);}}@media (min-width: 768px) and (max-width: 940px){.container{width:748px;} .span1{width:44px;} .span2{width:108px;} .span3{width:172px;} .span4{width:236px;} .span5{width:300px;} .span6{width:364px;} .span7{width:428px;} .span8{width:492px;} .span9{width:556px;} .span10{width:620px;} .span11{width:684px;} .span12{width:748px;} .offset1{margin-left:64px;} .offset2{margin-left:128px;} .offset3{margin-left:192px;} .offset4{margin-left:256px;} .offset5{margin-left:320px;} .offset6{margin-left:384px;} .offset7{margin-left:448px;} .offset8{margin-left:512px;} .offset9{margin-left:576px;} .offset10{margin-left:640px;} .offset11{margin-left:704px;} .offset12{margin-left:768px;}} diff --git a/docs/assets/css/docs.css b/docs/assets/css/docs.css index 586b5334b1..3cf2208e96 100644 --- a/docs/assets/css/docs.css +++ b/docs/assets/css/docs.css @@ -25,7 +25,7 @@ body > .navbar-fixed .brand { float: right; font-weight: bold; color: #000; - text-shadow: 0 1px 0 rgba(255,255,255,.1); + text-shadow: 0 1px 0 rgba(255,255,255,.1), 0 0 30px rgba(255,255,255,.125); } body > .navbar-fixed .brand:hover { text-decoration: none; @@ -449,7 +449,7 @@ h2 + table { /* Provide enough space on right-hand side for benefits list */ .jumbotron h1, .jumbotron p { - margin-right: 20%; + margin-right: 40%; } } diff --git a/docs/components.html b/docs/components.html index b4a88dd078..56e71b0f7f 100644 --- a/docs/components.html +++ b/docs/components.html @@ -58,94 +58,145 @@ ================================================== --> <section id="media"> <div class="page-header"> - <h1>Media <small>Displaying images and videos</small></h1> + <h1>Thumbnails <small>Grids of images, videos, text, and more</small></h1> </div> - <!-- Table structure --> + <div class="row"> - <div class="span3"> - <h2>Media grid</h2> - <p>Display thumbnails of varying sizes on pages with a low HTML footprint and minimal styles.</p> - </div> - <div class="span9"> - <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=""> + <div class="span6"> + <h2>Default thumbnails</h2> + <p>By default, Bootstrap's thumbnails are designed to showcase linked images with minimal required markup.</p> + <ul class="thumbnails"> + <li class="span3"> + <a href="#" class="thumbnail"> + <img src="http://placehold.it/210x150" alt=""> </a> </li> - <li> - <a href="#"> - <img class="thumbnail" src="http://placehold.it/330x230" alt=""> + <li class="span3"> + <a href="#" class="thumbnail"> + <img src="http://placehold.it/210x150" alt=""> </a> </li> - </ul> - <h4>Medium</h4> - <ul class="media-grid"> - <li> - <a href="#"> - <img class="thumbnail" src="http://placehold.it/210x150" alt=""> + <li class="span3"> + <a href="#" class="thumbnail"> + <img src="http://placehold.it/210x150" alt=""> </a> </li> - <li> - <a href="#"> - <img class="thumbnail" src="http://placehold.it/210x150" alt=""> + <li class="span3"> + <a href="#" class="thumbnail"> + <img src="http://placehold.it/210x150" alt=""> </a> </li> - <li> - <a href="#"> - <img class="thumbnail" src="http://placehold.it/210x150" alt=""> + </ul> + </div> + <div class="span6"> + <h2>Highly customizable</h2> + <p>With a bit of extra markup, it's possible to add any kind of HTML content like headings, paragraphs, or buttons into thumbnails.</p> + <ul class="thumbnails"> + <li class="span3"> + <div class="thumbnail"> + <img src="http://placehold.it/210x150" alt=""> + <div class="caption"> + <h5>Thumbnail label</h5> + <p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p> + <p><a href="#" class="btn primary">Action</a> <a href="#" class="btn">Action</a></p> + </div> + </div> + </li> + <li class="span3"> + <div class="thumbnail"> + <img src="http://placehold.it/210x150" alt=""> + <div class="caption"> + <h5>Thumbnail label</h5> + <p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p> + <p><a href="#" class="btn primary">Action</a> <a href="#" class="btn">Action</a></p> + </div> + </div> + </li> + </ul> + </div> + </div> + + <div class="row"> + <div class="span4"> + <h3>Why use thumbnails</h3> + <p>Thumbnails (previously <code>.media-grid</code> up until v1.4) are great for grids of photos or videos, image search results, retail products, portfolios, and much more. They can be links or static content.</p> + </div> + <div class="span4"> + <h3>Simple, flexible markup</h3> + <p>Thumbnail markup is simple—a <code>ul</code> with any number of <code>li</code> elements is all that is required. It's also super flexible, allowing for any type of content with just a bit more markup to wrap your contents.</p> + </div> + <div class="span4"> + <h3>Uses grid column sizes</h3> + <p>Lastly, the thumbnails component uses existing grid system classes—like <code>.span2</code> or <code>.span3</code>—for control of thumbnail dimensions.</p> + </div> + </div> + + <div class="row"> + <div class="span6"> + <h2>The markup</h2> + <p>As mentioned previously, the required markup for thumbnails is light and straightforward. Here's a look at the default setup <strong>for linked images</strong>:</p> +<pre class="prettyprint linenums"> +<ul class="thumbnails"> + <li class="span3"> + <a href="#" class="thumbnail"> + <img src="http://placehold.it/210x150" alt=""> + </a> + </li> + ... +</ul> +</pre> + <p>For custom HTML content in thumbnails, the markup changes slightly. To allow block level content anywhere, we swap the <code><a></code> for a <code><div></code> like so:</p> +<pre class="prettyprint linenums"> +<ul class="thumbnails"> + <li class="span3"> + <div class="thumbnail"> + <img src="http://placehold.it/210x150" alt=""> + <h5>Thumbnail label</h5> + <p>Thumbnail caption right here...</p> + </div> + </li> + ... +</ul> +</pre> + </div> + <div class="span6"> + <h2>More examples</h2> + <p>Explore all your options with the various grid classes available to you. You can also mix and match different sizes.</p> + <ul class="thumbnails"> + <li class="span4"> + <a href="#" class="thumbnail"> + <img src="http://placehold.it/290x230" alt=""> </a> </li> - <li> - <a href="#"> - <img class="thumbnail" src="http://placehold.it/210x150" alt=""> + <li class="span2"> + <a href="#" class="thumbnail"> + <img src="http://placehold.it/130x100" alt=""> </a> </li> - <li> - <a href="#"> - <img class="thumbnail" src="http://placehold.it/210x150" alt=""> + <li class="span2"> + <a href="#" class="thumbnail"> + <img src="http://placehold.it/130x100" alt=""> </a> </li> - </ul> - <h4>Small</h4> - <ul class="media-grid"> - <li> - <a href="#"> - <img class="thumbnail" src="http://placehold.it/90x90" alt=""> + <li class="span2"> + <a href="#" class="thumbnail"> + <img src="http://placehold.it/130x100" alt=""> </a> </li> - <li> - <a href="#"> - <img class="thumbnail" src="http://placehold.it/90x90" alt=""> + <li class="span2"> + <a href="#" class="thumbnail"> + <img src="http://placehold.it/130x100" alt=""> </a> </li> - <li> - <a href="#"> - <img class="thumbnail" src="http://placehold.it/90x90" alt=""> + <li class="span2"> + <a href="#" class="thumbnail"> + <img src="http://placehold.it/130x100" 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 --> + </div> + </section> diff --git a/docs/javascript.html b/docs/javascript.html index 6c0e12c192..56e60e98c7 100644 --- a/docs/javascript.html +++ b/docs/javascript.html @@ -819,7 +819,7 @@ $('a[data-toggle="tab"]').bind('shown', function (e) { <pre class="prettyprint linenums"><button class="btn" data-complete-text="finished!" >...</button> <script> $('.btn').button('complete') -</scrip></pre> +</script></pre> <h3>Demo</h3> <table class="striped-table"> <tbody> diff --git a/docs/scaffolding.html b/docs/scaffolding.html index 8b7e620fb9..7431ae58b3 100644 --- a/docs/scaffolding.html +++ b/docs/scaffolding.html @@ -64,34 +64,34 @@ <h2>Default 940px grid</h2> <div class="row show-grid"> - <div class="span1">1</div> - <div class="span1">1</div> - <div class="span1">1</div> - <div class="span1">1</div> - <div class="span1">1</div> - <div class="span1">1</div> - <div class="span1">1</div> - <div class="span1">1</div> - <div class="span1">1</div> - <div class="span1">1</div> - <div class="span1">1</div> - <div class="span1">1</div> + <div class="span1" title="60px">1</div> + <div class="span1" title="60px">1</div> + <div class="span1" title="60px">1</div> + <div class="span1" title="60px">1</div> + <div class="span1" title="60px">1</div> + <div class="span1" title="60px">1</div> + <div class="span1" title="60px">1</div> + <div class="span1" title="60px">1</div> + <div class="span1" title="60px">1</div> + <div class="span1" title="60px">1</div> + <div class="span1" title="60px">1</div> + <div class="span1" title="60px">1</div> </div> <div class="row show-grid"> - <div class="span4">4</div> - <div class="span4">4</div> - <div class="span4">4</div> + <div class="span4" title="300px">4</div> + <div class="span4" title="300px">4</div> + <div class="span4" title="300px">4</div> </div> <div class="row show-grid"> - <div class="span4">4</div> - <div class="span8">8</div> + <div class="span4" title="300px">4</div> + <div class="span8" title="620px">8</div> </div> <div class="row show-grid"> - <div class="span6">6</div> - <div class="span6">6</div> + <div class="span6" title="460px">6</div> + <div class="span6" title="460px">6</div> </div> <div class="row show-grid"> - <div class="span12">12</div> + <div class="span12" title="940px">12</div> </div> <div class="row"> @@ -383,6 +383,17 @@ }); </script> + <script type="text/javascript"> + // Show grid dimensions on hover + $(document).ready(function() { + $('.show-grid > div').hover(function() { + var width = $(this).width(); + $(this).attr('title', width); + $(this).twipsy(); + }); + }); + </script> + <script src="http://autobahn.tablesorter.com/jquery.tablesorter.min.js"></script> <script src="assets/js/google-code-prettify/prettify.js"></script> <script>$(function () { prettyPrint() })</script> diff --git a/docs/upgrading.html b/docs/upgrading.html new file mode 100644 index 0000000000..cd0ca8e22d --- /dev/null +++ b/docs/upgrading.html @@ -0,0 +1,152 @@ +<!DOCTYPE html> +<html lang="en"> + <head> + <meta charset="utf-8"> + <title>Bootstrap, from Twitter: Upgrading from v1.4 to v2.0</title> + <meta name="viewport" content="width=device-width, initial-scale=1.0"> + <meta name="description" content=""> + <meta name="author" content=""> + + <!-- 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]--> + + <!-- Le styles --> + <link href="../bootstrap.css" rel="stylesheet"> + <link href="assets/css/docs.css" rel="stylesheet"> + <link href="assets/js/google-code-prettify/prettify.css" rel="stylesheet"> + + <!-- Le fav and touch icons --> + <link rel="shortcut icon" type="image/x-icon" href="assets/ico/favicon.ico"> + <link rel="apple-touch-icon" href="assets/ico/bootstrap-apple-57x57.png"> + <link rel="apple-touch-icon" sizes="72x72" href="assets/ico/bootstrap-apple-72x72.png"> + <link rel="apple-touch-icon" sizes="114x114" href="assets/ico/bootstrap-apple-114x114.png"> + </head> + + <body> + + <!-- Navbar + ================================================== --> + <div class="navbar navbar-fixed"> + <div class="navbar-inner"> + <div class="container"> + <a class="brand" href="./index.html">Bootstrap</a> + <ul class="nav"> + <li><a href="./index.html">Overview</a></li> + <li><a href="./scaffolding.html">Scaffolding</a></li> + <li><a href="./base-css.html">Base CSS</a></li> + <li><a href="./components.html">Components</a></li> + <li><a href="./javascript.html">Javascript plugins</a></li> + <li class="active"><a href="./less.html">Using LESS</a></li> + </ul> + </div> + </div> + </div> + + <div class="container"> + + <!-- Masthead + ================================================== --> + <header class="jumbotron subhead" id="overview"> + <h1>Upgrading to Bootstrap 2</h1> + <p class="lead">Learn about significant changes and additions since v1.4 with this handy guide.</p> + </header> + + +<h2>Rough outline</h2> +<ul> + <li>Docs completely overhauled + <ul> + <li>Responsive thanks to new grid system</li> + <li>Now less marketing and more information</li> + <li>Extensive use of tables to share classes and elements of most components</li> + <li>Broken down into several pages for easier consumption</li> + </ul> + </li> + <li>Updated grid system, now only 12 columns + <ul> + <li>Same great classes, but now only 12 columns</li> + <li>Responsive approach means your projects virtually work out of the box on smartphones, tablets, and more</li> + </ul> + </li> + <li>New thumbnails (previously media grids) + <ul> + <li><code>.media-grid</code> class has been changed to <code>.thumbnails</code></li> + <li>Individual thumbnails now require <code>.thumbnail</code> class</li> + </ul> + </li> + <li>Updated forms + <ul> + <li>Default form style is now stacked to use less CSS and add flexibility</li> + <li>Exact same markup is required for vertical or horizontal forms—just swap the classes</li> + <li>New form defaults for search, inline, vertical, and horizontal</li> + </ul> + </li> + <li>Updated tables + <ul> + <li>Table classes made more consistent</li> + <li>Removed unused table color options (too much code for such little impact)</li> + </ul> + </li> + <li>Typography + <ul> + <li>Right-aligned option for blockquotes if float: right;</li> + </ul> + </li> + <li>Buttons + <ul> + <li>Added button bar options</li> + </ul> + </li> + <li> + <ul> + <li></li> + </ul> + </li> +</ul> + +<!-- + + + +--> + + + + + + <!-- Footer + ================================================== --> + <footer class="footer"> + <p class="pull-right"><a href="#">Back to top</a></p> + <p>Designed and built with all the love in the world <a href="http://twitter.com/twitter" target="_blank">@twitter</a> by <a href="http://twitter.com/mdo" target="_blank">@mdo</a> and <a href="http://twitter.com/fat" target="_blank">@fat</a>.</p> + <p>Code licensed under the <a href="http://www.apache.org/licenses/LICENSE-2.0" target="_blank">Apache License v2.0</a>. Documentation licensed under <a href="http://creativecommons.org/licenses/by/3.0/">CC BY 3.0</a>.</p> + <p>Icons from <a href="http://glyphicons.com">Glyphicons Free</a>, licensed under <a href="http://creativecommons.org/licenses/by/3.0/">CC BY 3.0</a>.</p> + </footer> + </div><!-- /container --> + + <!-- Le javascript --> + <!-- Placed at the end of the document so the pages load faster --> + <script src="http://code.jquery.com/jquery-1.5.2.min.js"></script> + + <script type="text/javascript"> + // NOT FINAL BY ANY MEANS, JUST MAH JANK CODE BRO + $(document).ready(function() { + $('.nav .active').click(function(e) { + e.preventDefault(); + $(this).siblings().toggle(); + }); + }); + </script> + + <script src="http://autobahn.tablesorter.com/jquery.tablesorter.min.js"></script> + <script src="assets/js/google-code-prettify/prettify.js"></script> + <script>$(function () { prettyPrint() })</script> + <script src="../js/bootstrap-transitions.js"></script> + <script src="../js/bootstrap-dropdown.js"></script> + <script src="../js/bootstrap-twipsy.js"></script> + <script src="../js/bootstrap-scrollspy.js"></script> + <script src="assets/js/application.js"></script> + </body> +</html> diff --git a/lib/forms.less b/lib/forms.less index 8d4369b186..a73e6f545f 100644 --- a/lib/forms.less +++ b/lib/forms.less @@ -93,10 +93,14 @@ input[type=file] { line-height: @baseLineHeight * 1.5; } +// Chrome on Linux needs background color +select { + background-color: @white; +} + // Make multiple select elements height not fixed select[multiple] { height: inherit; - background-color: @white; // Fixes Chromium bug? } // Remove shadow from image inputs diff --git a/lib/media-grids.less b/lib/media-grids.less index 7ceade651b..12626df3f1 100644 --- a/lib/media-grids.less +++ b/lib/media-grids.less @@ -1,26 +1,33 @@ -// MEDIA GRIDS -// ----------- +// THUMBNAILS +// ---------- -.media-grid { +.thumbnails { margin-left: -20px; margin-bottom: 0; + list-style: none; .clearfix(); - li { - display: inline; - } - a { - float: left; - padding: 4px; - margin: 0 0 20px 20px; - border: 1px solid #ddd; - .border-radius(4px); - .box-shadow(0 1px 1px rgba(0,0,0,.075)); - img { - display: block; - } - &:hover { - border-color: @linkColor; - .box-shadow(0 1px 4px rgba(0,105,214,.25)); - } - } +} +.thumbnails > li { + float: left; + margin: 0 0 20px 20px; +} +.thumbnail { + display: block; + line-height: 1; + border: 1px solid #ddd; + .border-radius(4px); + .box-shadow(0 1px 1px rgba(0,0,0,.075)); +} +// Add a hover state for linked versions only +a.thumbnail:hover { + border-color: @linkColor; + .box-shadow(0 1px 4px rgba(0,105,214,.25)); +} +// Images and captions +.thumbnail > img { + display: block; + margin: 4px; +} +.thumbnail .caption { + padding: 9px; } -- GitLab From 1ef5fa7d6b4e50230c0c12919b0a06a9a2ac07f1 Mon Sep 17 00:00:00 2001 From: Jacob Thornton <jacobthornton@gmail.com> Date: Tue, 20 Dec 2011 18:02:47 -0800 Subject: [PATCH 135/318] giant refactor - all spec passing again... --- docs/javascript.html | 29 +- js/README.md | 4 +- js/bootstrap-alert.js | 6 +- js/bootstrap-button.js | 12 +- js/bootstrap-carousel.js | 18 +- js/bootstrap-collapse.js | 14 +- js/bootstrap-dropdown.js | 6 +- js/bootstrap-modal.js | 20 +- js/bootstrap-popover.js | 38 +- js/bootstrap-scrollspy.js | 4 +- js/bootstrap-tab.js | 8 +- js/bootstrap-transitions.js | 45 - js/bootstrap-twipsy.js | 226 +- js/tests/index.html | 24 +- ...bootstrap-alerts.js => bootstrap-alert.js} | 10 +- js/tests/unit/bootstrap-button.js | 54 + js/tests/unit/bootstrap-collapse.js | 25 + js/tests/unit/bootstrap-dropdown.js | 21 +- js/tests/unit/bootstrap-modal.js | 28 +- js/tests/unit/bootstrap-popover.js | 12 +- js/tests/unit/bootstrap-scrollspy.js | 6 +- js/tests/unit/bootstrap-tab.js | 46 + js/tests/unit/bootstrap-tabs.js | 49 - js/tests/unit/bootstrap-transition.js | 13 + js/tests/unit/bootstrap-twipsy.js | 36 +- js/tests/vendor/jquery.js | 9252 +++++++++++++++++ js/tests/vendor/qunit.css | 2 +- 27 files changed, 9618 insertions(+), 390 deletions(-) delete mode 100644 js/bootstrap-transitions.js rename js/tests/unit/{bootstrap-alerts.js => bootstrap-alert.js} (74%) create mode 100644 js/tests/unit/bootstrap-button.js create mode 100644 js/tests/unit/bootstrap-collapse.js create mode 100644 js/tests/unit/bootstrap-tab.js delete mode 100644 js/tests/unit/bootstrap-tabs.js create mode 100644 js/tests/unit/bootstrap-transition.js create mode 100644 js/tests/vendor/jquery.js diff --git a/docs/javascript.html b/docs/javascript.html index 4e40041320..964d2f7aaf 100644 --- a/docs/javascript.html +++ b/docs/javascript.html @@ -25,7 +25,8 @@ <!-- Le javascript --> <!-- placed up here so that the inline demos can be next to their markup --> - <script src="http://code.jquery.com/jquery-1.7.min.js"></script> + <!-- <script src="http://code.jquery.com/jquery-1.7.min.js"></script> --> + <script src="../js/tests/vendor/jquery.js"></script> <script type="text/javascript"> // NOT FINAL BY ANY MEANS, JUST MAH JANK CODE BRO @@ -52,15 +53,13 @@ <script> $(function () { // twipsy demo - $("a[rel=twipsy]").twipsy({ - live: true + $('.twipsy-demo.well').twipsy({ + selector: "a[rel=twipsy]" }) //popover demo $("a[rel=popover]") - .popover({ - offset: 10 - }) + .popover() .click(function(e) { e.preventDefault() }) @@ -94,7 +93,7 @@ ================================================== --> <header class="jumbotron subhead" id="overview"> <h1>Javascript for Bootstrap</h1> - <p class="lead">Bring Bootstrap's components to life with flexible, custom javascript plugins for many of our custom components that work with <a href="http://jquery.com/" target="_blank">jQuery</a> and <a href="http://ender.no.de" target="_blank">Ender</a>.</p> + <p class="lead">Bring Bootstrap's components to life with 12 custom, flexible <a href="http://jquery.com/" target="_blank">jQuery</a> plugins. </header> @@ -112,7 +111,7 @@ </div> <div class="span9"> <h3>What's included</h3> - <p>Bring some of Bootstrap's primary components to life with new custom plugins that work with <a href="http://jquery.com/" target="_blank">jQuery</a> and <a href="http://ender.no.de" target="_blank">Ender</a>. We encourage you to extend and modify them to fit your specific development needs.</p> + <p>Bring some of Bootstrap's primary components to life with custom <a href="http://jquery.com/" target="_blank">jQuery</a> plugins. We encourage you to extend and modify them to fit your specific development needs.</p> <table class="striped-table"> <thead> <tr> @@ -138,7 +137,7 @@ <td>The ScrollSpy plugin is for adding an auto updating nav based on scroll position to the bootstrap navbar.</td> </tr> <tr> - <td><a href="./javascript.html#tabs">bootstrap-tab.js</a></td> + <td><a href="./javascript.html#tab">bootstrap-tab.js</a></td> <td>This plugin adds quick, dynamic tab and pill functionality for cycling through local content.</td> </tr> <tr> @@ -444,9 +443,9 @@ $('#myModal').bind('hidden', function () { <!-- Tabs ================================================== --> - <section id="tabs"> + <section id="tab"> <div class="page-header"> - <h1>Tabs <small>bootstrap-tab.js</small></h1> + <h1>Tab <small>bootstrap-tab.js</small></h1> </div> <div class="row"> <div class="span3 columns"> @@ -467,7 +466,7 @@ $('#myModal').bind('hidden', function () { <h3>Methods</h3> <h4>$().tab</h4> <p> - Activates tab functionality for a given element controller. Tab should have either a `data-target` or an `href` referencing a node in the dom. + Activates a tab element and content container. Tab should have either a `data-target` or an `href` targeting a container node in the dom. </p> <pre class="prettyprint linenums"> <ul class="tabs"> @@ -504,7 +503,7 @@ $('#myModal').bind('hidden', function () { <td>This event fires on tab show, but before the new tab has been shown. Use <code>event.target</code> and <code>event.relatedTarget</code> to target the active tab and the previous active tab (if available) respectively.</td> </tr> <tr> - <td>show</td> + <td>shown</td> <td>This event fires on tab show after a tab has been shown. Use <code>event.target</code> and <code>event.relatedTarget</code> to target the active tab and the previous active tab (if available) respectively.</td> </tr> </tbody> @@ -634,8 +633,8 @@ $('a[data-toggle="tab"]').bind('shown', function (e) { <p>Hides an elements twipsy.</p> <pre class="prettyprint linenums">$('#element').twipsy('hide')</pre> <h3>Demo</h3> - <div class="well"> - <p class="muted">Tight pants next level keffiyeh <a href="#" rel='twipsy' title='Some title text'>you probably</a> haven't heard of them. Photo booth beard raw denim letterpress vegan messenger bag stumptown. Farm-to-table seitan, mcsweeney's fixie sustainable quinoa 8-bit american apparel <a href="#" rel='twipsy' title='Another twipsy'>have a</a> terry richardson vinyl chambray. Beard stumptown, cardigans banh mi lomo thundercats. Tofu biodiesel williamsburg marfa, four loko mcsweeney's cleanse vegan chambray. A <a href="#" rel='twipsy' title='Another one here too'>really ironic</a> artisan whatever keytar, scenester farm-to-table banksy Austin <a href="#" rel='twipsy' title='The last tip!'>twitter handle</a> freegan cred raw denim single-origin coffee viral. + <div class="twipsy-demo well"> + <p class="muted">Tight pants next level keffiyeh <a href="#" rel='twipsy' title="first twipsy">you probably</a> haven't heard of them. Photo booth beard raw denim letterpress vegan messenger bag stumptown. Farm-to-table seitan, mcsweeney's fixie sustainable quinoa 8-bit american apparel <a href="#" rel='twipsy' title='Another twipsy'>have a</a> terry richardson vinyl chambray. Beard stumptown, cardigans banh mi lomo thundercats. Tofu biodiesel williamsburg marfa, four loko mcsweeney's cleanse vegan chambray. A <a href="#" rel='twipsy' title='Another one here too'>really ironic</a> artisan whatever keytar, scenester farm-to-table banksy Austin <a href="#" rel='twipsy' title='The last tip!'>twitter handle</a> freegan cred raw denim single-origin coffee viral. </p> </div> </div> diff --git a/js/README.md b/js/README.md index 2eef9e7357..107dd15281 100644 --- a/js/README.md +++ b/js/README.md @@ -21,7 +21,7 @@ To target a specific plugin, just include the plugins name as a namespace along We also believe you should be able to use all plugins provided by Bootstrap purely through the JS API. -All public APIs should be a single, chainable method, and return the collection acted upon. +All public APIs should be single, chainable methods, and return the collection acted upon. $(".btn.danger").button("toggle").addClass("fat") @@ -73,7 +73,7 @@ examples: // control other targets data-toggle="modal" data-target="#foo" - data-toggle="collapse" data-target="#foo" data-parent="#foo" + data-toggle="collapse" data-target="#foo" data-parent="#bar" // defined on element they control data-spy="scroll" diff --git a/js/bootstrap-alert.js b/js/bootstrap-alert.js index 0691300808..db9116f761 100644 --- a/js/bootstrap-alert.js +++ b/js/bootstrap-alert.js @@ -27,7 +27,7 @@ var dismiss = '[data-dismiss="alert"]' , Alert = function ( el ) { - $(el).delegate(dismiss, 'click', this.close) + $(el).on('click', dismiss, this.close) } Alert.prototype = { @@ -72,7 +72,7 @@ * ============== */ $(function () { - $('body').delegate(dismiss, 'click.alert.data-api', Alert.prototype.close) + $('body').on('click.alert.data-api', dismiss, Alert.prototype.close) }) -}( window.jQuery || window.ender ) \ No newline at end of file +}( window.jQuery ) \ No newline at end of file diff --git a/js/bootstrap-button.js b/js/bootstrap-button.js index 4ed24d98b9..508835a38f 100644 --- a/js/bootstrap-button.js +++ b/js/bootstrap-button.js @@ -24,16 +24,16 @@ /* BUTTON PUBLIC CLASS DEFINITION * ============================== */ - var Button = function (element, options) { + var Button = function ( element, options ) { this.$element = $(element) - this.settings = $.extend({}, $.fn.button.defaults, options) + this.options = $.extend({}, $.fn.button.defaults, options) } Button.prototype = { constructor: Button - , setState: function (state) { + , setState: function ( state ) { var d = 'disabled' , $el = this.$element , data = $el.data() @@ -42,7 +42,7 @@ state = state + 'Text' data.resetText || $el.data('resetText', $el[val]()) - $el[val](data[state] || this.settings[state]) + $el[val](data[state] || this.options[state]) // push to event loop to allow forms to submit setTimeout(function () { @@ -90,9 +90,9 @@ * =============== */ $(function () { - $('body').delegate('[data-toggle^=button]', 'click.button.data-api', function (e) { + $('body').on('click.button.data-api', '[data-toggle^=button]', function ( e ) { $(e.srcElement).button('toggle') }) }) -}( window.jQuery || window.ender ) \ No newline at end of file +}( window.jQuery ) \ No newline at end of file diff --git a/js/bootstrap-carousel.js b/js/bootstrap-carousel.js index 9513b4cd21..e2b36884b5 100644 --- a/js/bootstrap-carousel.js +++ b/js/bootstrap-carousel.js @@ -25,8 +25,8 @@ /* CAROUSEL CLASS DEFINITION * ========================= */ - var Carousel = function ( el ) { - $(el).delegate(dismiss, 'click', this.close) + var Carousel = function () { + } Carousel.prototype = { @@ -40,20 +40,12 @@ $.fn.carousel = function ( option ) { return this.each(function () { var $this = $(this) - , data = $this.data('alert') - if (!data) $this.data('alert', (data = new Alert(this))) + , data = $this.data('carousel') + if (!data) $this.data('carousel', (data = new Carousel(this))) if (typeof option == 'string') data[option].call($this) }) } $.fn.carousel.Carousel = Carousel - - /* CAROUSEL DATA-API - * ================= */ - - // $(function () { - // $('body').delegate(dismiss, 'click.alert.data-api', Alert.prototype.close) - // }) - -}( window.jQuery || window.ender ) \ No newline at end of file +}( window.jQuery ) \ No newline at end of file diff --git a/js/bootstrap-collapse.js b/js/bootstrap-collapse.js index f56f6c7050..8eefd8863a 100644 --- a/js/bootstrap-collapse.js +++ b/js/bootstrap-collapse.js @@ -23,13 +23,13 @@ var Collapse = function ( element, options ) { this.$element = $(element) - this.settings = $.extend({}, $.fn.collapse.defaults, options) + this.options = $.extend({}, $.fn.collapse.defaults, options) - if (this.settings["parent"]) { - this.$parent = $(this.settings["parent"]) + if (this.options["parent"]) { + this.$parent = $(this.options["parent"]) } - this.settings.toggle && this.toggle() + this.options.toggle && this.toggle() } Collapse.prototype = { @@ -123,13 +123,13 @@ * ==================== */ $(function () { - $('body').delegate('[data-toggle=collapse]', 'click.collapse.data-api', function ( e ) { + $('body').on('click.collapse.data-api', '[data-toggle=collapse]', function ( e ) { var $this = $(this) , target = $this.attr('data-target') || $this.attr('href') , option = $(target).data('collapse') ? 'toggle' : $this.data() - e.preventDefault() + e.preventDefault() $(target).collapse(option) }) }) -})( window.jQuery || window.ender ) \ No newline at end of file +})( window.jQuery ) \ No newline at end of file diff --git a/js/bootstrap-dropdown.js b/js/bootstrap-dropdown.js index 238a52e086..d2881b2762 100644 --- a/js/bootstrap-dropdown.js +++ b/js/bootstrap-dropdown.js @@ -68,8 +68,8 @@ * =================================== */ $(function () { - $('html').bind('click.dropdown.data-api', clearMenus) - $('body').delegate(toggle, 'click.dropdown.data-api', Dropdown.prototype.toggle) + $('html').on('click.dropdown.data-api', clearMenus) + $('body').on('click.dropdown.data-api', toggle, Dropdown.prototype.toggle) }) -}( window.jQuery || window.ender ) \ No newline at end of file +}( window.jQuery ) \ No newline at end of file diff --git a/js/bootstrap-modal.js b/js/bootstrap-modal.js index 189bcf2acc..38f4f51a29 100644 --- a/js/bootstrap-modal.js +++ b/js/bootstrap-modal.js @@ -26,10 +26,9 @@ * ====================== */ var Modal = function ( content, options ) { - this.settings = $.extend({}, $.fn.modal.defaults, options) + this.options = $.extend({}, $.fn.modal.defaults, options) this.$element = $(content) .delegate('[data-dismiss="modal"]', 'click.dismiss.modal', $.proxy(this.hide, this)) - this.settings.show && this.show() } Modal.prototype = { @@ -107,7 +106,7 @@ }) } - function hideModal (that) { + function hideModal( that ) { this.$element .hide() .trigger('hidden') @@ -115,17 +114,17 @@ backdrop.call(this) } - function backdrop ( callback ) { + function backdrop( callback ) { var that = this , animate = this.$element.hasClass('fade') ? 'fade' : '' - if (this.isShown && this.settings.backdrop) { + if (this.isShown && this.options.backdrop) { var doAnimate = $.support.transition && animate this.$backdrop = $('<div class="modal-backdrop ' + animate + '" />') .appendTo(document.body) - if (this.settings.backdrop != 'static') { + if (this.options.backdrop != 'static') { this.$backdrop.click($.proxy(this.hide, this)) } @@ -156,7 +155,7 @@ function escape() { var that = this - if (this.isShown && this.settings.keyboard) { + if (this.isShown && this.options.keyboard) { $(document).bind('keyup.dismiss.modal', function ( e ) { e.which == 27 && that.hide() }) @@ -176,6 +175,7 @@ , options = typeof option == 'object' && option if (!data) $this.data('modal', (data = new Modal(this, options))) if (typeof option == 'string') data[option]() + else if (data.options.show) data.show() }) } @@ -191,8 +191,8 @@ /* MODAL DATA-API * ============== */ - $(document).ready(function () { - $('body').delegate('[data-toggle="modal"]', 'click.modal.data-api', function ( e ) { + $(function () { + $('body').on('click.modal.data-api', '[data-toggle="modal"]', function ( e ) { var $this = $(this) , target = $this.attr('data-target') || $this.attr('href') , option = $(target).data('modal') ? 'toggle' : $this.data() @@ -201,4 +201,4 @@ }) }) -}( window.jQuery || window.ender ) \ No newline at end of file +}( window.jQuery ) \ No newline at end of file diff --git a/js/bootstrap-popover.js b/js/bootstrap-popover.js index 890f6efc0b..a0495ce699 100644 --- a/js/bootstrap-popover.js +++ b/js/bootstrap-popover.js @@ -23,10 +23,7 @@ "use strict" var Popover = function ( element, options ) { - this.$element = $(element) - this.options = options - this.enabled = true - this.fixTitle() + this.init('popover', element, options) } /* NOTE: POPOVER EXTENDS BOOTSTRAP-TWIPSY.js @@ -53,14 +50,13 @@ , getContent: function () { var content - , $e = this.$element - , o = this.options + , $e = this.$element + , o = this.options - if (typeof this.options.content == 'string') { - content = $e.attr(this.options.content) - } else if (typeof this.options.content == 'function') { - content = this.options.content.call(this.$element[0]) - } + content = $e.attr('data-content') + || (typeof o.content == 'function' ? o.content.call($e[0]) : o.content) + + content = content.toString().replace(/(^\s*|\s*$)/, "") return content } @@ -79,18 +75,22 @@ /* POPOVER PLUGIN DEFINITION * ======================= */ - $.fn.popover = function (options) { - if (typeof options == 'object') options = $.extend({}, $.fn.popover.defaults, options) - $.fn.twipsy.initWith.call(this, options, Popover, 'popover') - return this + $.fn.popover = function ( option ) { + return this.each(function () { + var $this = $(this) + , data = $this.data('popover') + , options = typeof option == 'object' && option + if (!data) $this.data('popover', (data = new Popover(this, options))) + if (typeof option == 'string') data[option]() + }) } + $.fn.popover.Popover = Popover + $.fn.popover.defaults = $.extend({} , $.fn.twipsy.defaults, { placement: 'right' - , content: 'data-content' + , content: '' , template: '<div class="arrow"></div><div class="inner"><h3 class="title"></h3><div class="content"><p></p></div></div>' }) - $.fn.twipsy.rejectAttrOptions.push( 'content' ) - -}( window.jQuery || window.ender ) \ No newline at end of file +}( window.jQuery ) \ No newline at end of file diff --git a/js/bootstrap-scrollspy.js b/js/bootstrap-scrollspy.js index 8248b6cbdd..3c271793c0 100644 --- a/js/bootstrap-scrollspy.js +++ b/js/bootstrap-scrollspy.js @@ -31,7 +31,7 @@ this.selector = (this.$scrollElement.attr('data-target') || this.$scrollElement.attr('href') || '') + ' .nav li > a' - this.$body = $('body').delegate(this.selector, 'click.scroll.data-api', process) + this.$body = $('body').on('click.scroll.data-api', this.selector, process) this.refresh() this.process() @@ -111,4 +111,4 @@ $(function () { $('[data-spy="scroll"]').scrollspy() }) -}( window.jQuery || window.ender ) \ No newline at end of file +}( window.jQuery ) \ No newline at end of file diff --git a/js/bootstrap-tab.js b/js/bootstrap-tab.js index 6aa8ae32cf..e0a92816d4 100644 --- a/js/bootstrap-tab.js +++ b/js/bootstrap-tab.js @@ -79,7 +79,7 @@ /* TAB PLUGIN DEFINITION * ===================== */ - $.fn.tab = function (option) { + $.fn.tab = function ( option ) { return this.each(function () { var $this = $(this) , data = $this.data('tab') @@ -94,11 +94,11 @@ /* TAB DATA-API * ============ */ - $(document).ready(function () { - $('body').delegate('[data-toggle="tab"], [data-toggle="pill"]', 'click.tab.data-api', function (e) { + $(function () { + $('body').on('click.tab.data-api', '[data-toggle="tab"], [data-toggle="pill"]', function (e) { e.preventDefault() $(this).tab('show') }) }) -}( window.jQuery || window.ender ) \ No newline at end of file +}( window.jQuery ) \ No newline at end of file diff --git a/js/bootstrap-transitions.js b/js/bootstrap-transitions.js deleted file mode 100644 index 25f8b111f1..0000000000 --- a/js/bootstrap-transitions.js +++ /dev/null @@ -1,45 +0,0 @@ -/* =================================================== - * bootstrap-transitions.js v2.0.0 - * http://twitter.github.com/bootstrap/javascript.html - * =================================================== - * Copyright 2011 Twitter, Inc. - * - * Licensed under the Apache License, Version 2.0 (the "License"); - * you may not use this file except in compliance with the License. - * You may obtain a copy of the License at - * - * http://www.apache.org/licenses/LICENSE-2.0 - * - * Unless required by applicable law or agreed to in writing, software - * distributed under the License is distributed on an "AS IS" BASIS, - * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. - * See the License for the specific language governing permissions and - * limitations under the License. - * ========================================================== */ - -$(function () { - - /* CSS TRANSITION SUPPORT (https://gist.github.com/373874) - * ======================================================= */ - - $.support.transition = (function () { - var thisBody = document.body || document.documentElement - , thisStyle = thisBody.style - , support = thisStyle.transition !== undefined || thisStyle.WebkitTransition !== undefined || thisStyle.MozTransition !== undefined || thisStyle.MsTransition !== undefined || thisStyle.OTransition !== undefined - - return support && { - end: (function () { - var transitionEnd = "TransitionEnd" - if ( $.browser.webkit ) { - transitionEnd = "webkitTransitionEnd" - } else if ( $.browser.mozilla ) { - transitionEnd = "transitionend" - } else if ( $.browser.opera ) { - transitionEnd = "oTransitionEnd" - } - return transitionEnd - }()) - } - })() - -}) \ No newline at end of file diff --git a/js/bootstrap-twipsy.js b/js/bootstrap-twipsy.js index ca8ac8800f..ee9a415fdb 100644 --- a/js/bootstrap-twipsy.js +++ b/js/bootstrap-twipsy.js @@ -1,7 +1,7 @@ /* ========================================================== * bootstrap-twipsy.js v2.0.0 * http://twitter.github.com/bootstrap/javascript.html#twipsy - * Adapted from the original jQuery.tipsy by Jason Frame + * Inspired by the original jQuery.tipsy by Jason Frame * ========================================================== * Copyright 2011 Twitter, Inc. * @@ -26,22 +26,83 @@ * ============================== */ var Twipsy = function ( element, options ) { - this.$element = $(element) - this.options = options - this.enabled = true - this.fixTitle() + this.init('twipsy', element, options) } Twipsy.prototype = { constructor: Twipsy - , show: function() { - var pos + , init: function ( type, element, options ) { + var eventIn + , eventOut + + this.type = type + this.$element = $(element) + this.options = this.getOptions(options) + this.enabled = true + + if (this.options.trigger != 'manual') { + eventIn = this.options.trigger == 'hover' ? 'mouseenter' : 'focus' + eventOut = this.options.trigger == 'hover' ? 'mouseleave' : 'blur' + this.$element.on(eventIn, this.options.selector, $.proxy(this.enter, this)) + this.$element.on(eventOut, this.options.selector, $.proxy(this.leave, this)) + } + + this.options.selector ? + (this._options = $.extend({}, this.options, { trigger: 'manual', selector: '' })) : + this.fixTitle() + } + + , getOptions: function ( options ) { + options = $.extend({}, $.fn[this.type].defaults, options, this.$element.data()) + + if (options.delay && typeof options.delay == 'number') { + options.delay = { + show: options.delay + , hide: options.delay + } + } + + return options + } + + , enter: function ( e ) { + var self = $(e.currentTarget)[this.type](this._options).data(this.type) + + if (!self.options.delay || !self.options.delay.show) { + self.show() + } else { + self.hoverState = 'in' + setTimeout(function() { + if (self.hoverState == 'in') { + self.show() + } + }, self.options.delay.show) + } + } + + , leave: function ( e ) { + var self = $(e.currentTarget)[this.type](this._options).data(this.type) + + if (!self.options.delay || !self.options.delay.hide) { + self.hide() + } else { + setTimeout(function() { + self.hoverState = 'out' + if (self.hoverState == 'out') { + self.hide() + } + }, self.options.delay.hide) + } + } + + , show: function () { + var $tip + , pos , actualWidth , actualHeight , placement - , $tip , tp if (this.hasContent() && this.enabled) { @@ -69,16 +130,16 @@ switch (placement) { case 'below': - tp = {top: pos.top + pos.height + this.options.offset, left: pos.left + pos.width / 2 - actualWidth / 2} + tp = {top: pos.top + pos.height, left: pos.left + pos.width / 2 - actualWidth / 2} break case 'above': - tp = {top: pos.top - actualHeight - this.options.offset, left: pos.left + pos.width / 2 - actualWidth / 2} + tp = {top: pos.top - actualHeight, left: pos.left + pos.width / 2 - actualWidth / 2} break case 'left': - tp = {top: pos.top + pos.height / 2 - actualHeight / 2, left: pos.left - actualWidth - this.options.offset} + tp = {top: pos.top + pos.height / 2 - actualHeight / 2, left: pos.left - actualWidth} break case 'right': - tp = {top: pos.top + pos.height / 2 - actualHeight / 2, left: pos.left + pos.width + this.options.offset} + tp = {top: pos.top + pos.height / 2 - actualHeight / 2, left: pos.left + pos.width} break } @@ -95,7 +156,7 @@ $tip[0].className = 'twipsy' } - , hide: function() { + , hide: function () { var that = this , $tip = this.tip() @@ -110,7 +171,7 @@ removeElement() } - , fixTitle: function() { + , fixTitle: function () { var $e = this.$element if ($e.attr('title') || typeof($e.attr('data-original-title')) != 'string') { $e.attr('data-original-title', $e.attr('title') || '').removeAttr('title') @@ -121,29 +182,24 @@ return this.getTitle() } - , getTitle: function() { + , getTitle: function () { var title , $e = this.$element , o = this.options - this.fixTitle() - - if (typeof o.title == 'string') { - title = $e.attr(o.title == 'title' ? 'data-original-title' : o.title) - } else if (typeof o.title == 'function') { - title = o.title.call($e[0]) - } + title = $e.attr('data-original-title') + || (typeof o.title == 'function' ? o.title.call($e[0]) : o.title) - title = ('' + title).replace(/(^\s*|\s*$)/, "") + title = title.toString().replace(/(^\s*|\s*$)/, "") - return title + return title } - , tip: function() { + , tip: function () { return this.$tip = this.$tip || $('<div class="twipsy" />').html(this.options.template) } - , validate: function() { + , validate: function () { if (!this.$element[0].parentNode) { this.hide() this.$element = null @@ -151,15 +207,15 @@ } } - , enable: function() { + , enable: function () { this.enabled = true } - , disable: function() { + , disable: function () { this.enabled = false } - , toggleEnabled: function() { + , toggleEnabled: function () { this.enabled = !this.enabled } @@ -177,91 +233,18 @@ return typeof thing == 'function' ? thing.apply(ctx, args) : thing } + /* TWIPSY PLUGIN DEFINITION * ======================== */ - $.fn.twipsy = function (options) { - $.fn.twipsy.initWith.call(this, options, Twipsy, 'twipsy') - return this - } - - $.fn.twipsy.initWith = function (options, Base, name) { - var twipsy - , binder - , eventIn - , eventOut - - if (typeof options == 'string') { - return this.each(function (){ - twipsy = $.data(this, name) - if (twipsy) twipsy[options]() - }) - } - - options = $.extend({}, $.fn[name].defaults, options) - - if (options.delay && typeof options.delay == 'number') { - options.delay = { - show: options.delay - , hide: options.delay - } - } - - function get(ele) { - var twipsy = $.data(ele, name) - - if (!twipsy) { - twipsy = new Base(ele, $.fn.twipsy.elementOptions(ele, options)) - $.data(ele, name, twipsy) - } - - return twipsy - } - - function enter() { - var twipsy = get(this) - twipsy.hoverState = 'in' - - if (!options.delay || !options.delay.show) { - twipsy.show() - } else { - twipsy.fixTitle() - setTimeout(function() { - if (twipsy.hoverState == 'in') { - twipsy.show() - } - }, options.delay.show) - } - } - - function leave() { - var twipsy = get(this) - twipsy.hoverState = 'out' - if (!options.delay || !options.delay.hide) { - twipsy.hide() - } else { - setTimeout(function() { - if (twipsy.hoverState == 'out') { - twipsy.hide() - } - }, options.delay.hide) - } - } - - if (!options.live) { - this.each(function() { - get(this) - }) - } - - if (options.trigger != 'manual') { - binder = options.live ? 'live' : 'bind' - eventIn = options.trigger == 'hover' ? 'mouseenter' : 'focus' - eventOut = options.trigger == 'hover' ? 'mouseleave' : 'blur' - this[binder](eventIn, enter)[binder](eventOut, leave) - } - - return this + $.fn.twipsy = function ( option ) { + return this.each(function () { + var $this = $(this) + , data = $this.data('twipsy') + , options = typeof option == 'object' && option + if (!data) $this.data('twipsy', (data = new Twipsy(this, options))) + if (typeof option == 'string') data[option]() + }) } $.fn.twipsy.Twipsy = Twipsy @@ -269,26 +252,11 @@ $.fn.twipsy.defaults = { animate: true , delay: 0 + , selector: false , placement: 'above' - , live: false - , offset: 0 , trigger: 'hover' - , title: 'title' + , title: '' , template: '<div class="twipsy-arrow"></div><div class="twipsy-inner"></div>' } - $.fn.twipsy.rejectAttrOptions = [ 'title' ] - - $.fn.twipsy.elementOptions = function(ele, options) { - var data = $(ele).data() - , rejects = $.fn.twipsy.rejectAttrOptions - , i = rejects.length - - while (i--) { - delete data[rejects[i]] - } - - return $.extend({}, options, data) - } - -}( window.jQuery || window.ender ) \ No newline at end of file +}( window.jQuery ) \ No newline at end of file diff --git a/js/tests/index.html b/js/tests/index.html index 617fcd92ab..e8ed2c5feb 100644 --- a/js/tests/index.html +++ b/js/tests/index.html @@ -4,28 +4,36 @@ <title>Bootstrap Plugin Test Suite</title> <!-- jquery --> - <script src="http://code.jquery.com/jquery-1.5.2.min.js"></script> + <!--<script src="http://code.jquery.com/jquery-1.7.min.js"></script>--> + <script src="vendor/jquery.js"></script> <!-- qunit --> <link rel="stylesheet" href="vendor/qunit.css" type="text/css" media="screen" /> <script src="vendor/qunit.js"></script> <!-- plugin sources --> - <script src="../../js/bootstrap-transitions.js"></script> - <script src="../../js/bootstrap-alerts.js"></script> + <script src="../../js/bootstrap-transition.js"></script> + <script src="../../js/bootstrap-alert.js"></script> + <script src="../../js/bootstrap-button.js"></script> + <script src="../../js/bootstrap-collapse.js"></script> <script src="../../js/bootstrap-dropdown.js"></script> <script src="../../js/bootstrap-modal.js"></script> - <script src="../../js/bootstrap-tabs.js"></script> + <script src="../../js/bootstrap-scrollspy.js"></script> + <script src="../../js/bootstrap-tab.js"></script> <script src="../../js/bootstrap-twipsy.js"></script> <script src="../../js/bootstrap-popover.js"></script> <!-- unit tests --> - <script src="unit/bootstrap-alerts.js"></script> + <script src="unit/bootstrap-transition.js"></script> + <script src="unit/bootstrap-alert.js"></script> + <script src="unit/bootstrap-button.js"></script> + <script src="unit/bootstrap-collapse.js"></script> <script src="unit/bootstrap-dropdown.js"></script> <script src="unit/bootstrap-modal.js"></script> - <script src="unit/bootstrap-popover.js"></script> - <script src="unit/bootstrap-tabs.js"></script> + <script src="unit/bootstrap-scrollspy.js"></script> + <script src="unit/bootstrap-tab.js"></script> <script src="unit/bootstrap-twipsy.js"></script> + <script src="unit/bootstrap-popover.js"></script> <body> <div> @@ -33,7 +41,7 @@ <h2 id="qunit-banner"></h2> <h2 id="qunit-userAgent"></h2> <ol id="qunit-tests"></ol> - <div id="qunit-runoff"></div> + <div id="qunit-fixture"></div> </div> </body> </html> \ No newline at end of file diff --git a/js/tests/unit/bootstrap-alerts.js b/js/tests/unit/bootstrap-alert.js similarity index 74% rename from js/tests/unit/bootstrap-alerts.js rename to js/tests/unit/bootstrap-alert.js index 152d97ab77..8eecaff0d2 100644 --- a/js/tests/unit/bootstrap-alerts.js +++ b/js/tests/unit/bootstrap-alert.js @@ -12,7 +12,7 @@ $(function () { test("should fade element out on clicking .close", function () { var alertHTML = '<div class="alert-message warning fade in">' - + '<a class="close" href="#">×</a>' + + '<a class="close" href="#" data-dismiss="alert">×</a>' + '<p><strong>Holy guacamole!</strong> Best check yo self, you’re not looking too good.</p>' + '</div>' , alert = $(alertHTML).alert() @@ -26,16 +26,16 @@ $(function () { $.support.transition = false var alertHTML = '<div class="alert-message warning fade in">' - + '<a class="close" href="#">×</a>' + + '<a class="close" href="#" data-dismiss="alert">×</a>' + '<p><strong>Holy guacamole!</strong> Best check yo self, you’re not looking too good.</p>' + '</div>' - , alert = $(alertHTML).appendTo('#qunit-runoff').alert() + , alert = $(alertHTML).appendTo('#qunit-fixture').alert() - ok($('#qunit-runoff').find('.alert-message').length, 'element added to dom') + ok($('#qunit-fixture').find('.alert-message').length, 'element added to dom') alert.find('.close').click() - ok(!$('#qunit-runoff').find('.alert-message').length, 'element removed from dom') + ok(!$('#qunit-fixture').find('.alert-message').length, 'element removed from dom') }) }) \ No newline at end of file diff --git a/js/tests/unit/bootstrap-button.js b/js/tests/unit/bootstrap-button.js new file mode 100644 index 0000000000..59e8f33bc9 --- /dev/null +++ b/js/tests/unit/bootstrap-button.js @@ -0,0 +1,54 @@ +$(function () { + + module("bootstrap-buttons") + + test("should be defined on jquery object", function () { + ok($(document.body).button, 'tabs method is defined') + }) + + test("should return element", function () { + ok($(document.body).button()[0] == document.body, 'document.body returned') + }) + + test("should return set state to loading", function () { + var btn = $('<button class="btn" data-loading-text="fat">mdo</button>') + equals(btn.html(), 'mdo', 'btn text equals mdo') + btn.button('loading') + equals(btn.html(), 'fat', 'btn text equals fat') + stop() + setTimeout(function () { + ok(btn.attr('disabled'), 'btn is disabled') + ok(btn.hasClass('disabled'), 'btn has disabled class') + start() + }, 0) + }) + + test("should return reset state", function () { + var btn = $('<button class="btn" data-loading-text="fat">mdo</button>') + equals(btn.html(), 'mdo', 'btn text equals mdo') + btn.button('loading') + equals(btn.html(), 'fat', 'btn text equals fat') + stop() + setTimeout(function () { + ok(btn.attr('disabled'), 'btn is disabled') + ok(btn.hasClass('disabled'), 'btn has disabled class') + start() + stop() + }, 0) + btn.button('reset') + equals(btn.html(), 'mdo', 'btn text equals mdo') + setTimeout(function () { + ok(!btn.attr('disabled'), 'btn is not disabled') + ok(!btn.hasClass('disabled'), 'btn does not have disabled class') + start() + }, 0) + }) + + test("should toggle active", function () { + var btn = $('<button class="btn" data-loading-text="fat">mdo</button>') + ok(!btn.hasClass('active'), 'btn does not have active class') + btn.button('toggle') + ok(btn.hasClass('active'), 'btn has class active') + }) + +}) \ No newline at end of file diff --git a/js/tests/unit/bootstrap-collapse.js b/js/tests/unit/bootstrap-collapse.js new file mode 100644 index 0000000000..698238d96b --- /dev/null +++ b/js/tests/unit/bootstrap-collapse.js @@ -0,0 +1,25 @@ +$(function () { + + module("bootstrap-collapse") + + test("should be defined on jquery object", function () { + ok($(document.body).collapse, 'collapse method is defined') + }) + + test("should return element", function () { + ok($(document.body).collapse()[0] == document.body, 'document.body returned') + }) + + test("should show a collapsed element", function () { + var el = $('<div class="collapse"></div>').collapse('show') + ok(el.hasClass('in'), 'has class in') + ok(/height/.test(el.attr('style')), 'has height set') + }) + + test("should hide a collapsed element", function () { + var el = $('<div class="collapse"></div>').collapse('hide') + ok(!el.hasClass('in'), 'does not have class in') + ok(/height/.test(el.attr('style')), 'has height set') + }) + +}) \ No newline at end of file diff --git a/js/tests/unit/bootstrap-dropdown.js b/js/tests/unit/bootstrap-dropdown.js index 2c2acb9bb6..368ced2a5a 100644 --- a/js/tests/unit/bootstrap-dropdown.js +++ b/js/tests/unit/bootstrap-dropdown.js @@ -13,7 +13,7 @@ $(function () { test("should add class open to menu if clicked", function () { var dropdownHTML = '<ul class="tabs">' + '<li class="dropdown">' - + '<a href="#" class="dropdown-toggle">Dropdown</a>' + + '<a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown</a>' + '<ul class="dropdown-menu">' + '<li><a href="#">Secondary link</a></li>' + '<li><a href="#">Something else here</a></li>' @@ -22,16 +22,15 @@ $(function () { + '</ul>' + '</li>' + '</ul>' - , dropdown = $(dropdownHTML).dropdown() + , dropdown = $(dropdownHTML).find('[data-toggle="dropdown"]').dropdown().click() - dropdown.find('.dropdown-toggle').click() - ok(dropdown.find('.dropdown').hasClass('open'), 'open class added on click') + ok(dropdown.parent('.dropdown').hasClass('open'), 'open class added on click') }) test("should remove open class if body clicked", function () { var dropdownHTML = '<ul class="tabs">' + '<li class="dropdown">' - + '<a href="#" class="dropdown-toggle">Dropdown</a>' + + '<a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown</a>' + '<ul class="dropdown-menu">' + '<li><a href="#">Secondary link</a></li>' + '<li><a href="#">Something else here</a></li>' @@ -40,12 +39,14 @@ $(function () { + '</ul>' + '</li>' + '</ul>' - , dropdown = $(dropdownHTML).dropdown().appendTo('#qunit-runoff') - - dropdown.find('.dropdown-toggle').click() - ok(dropdown.find('.dropdown').hasClass('open'), 'open class added on click') + , dropdown = $(dropdownHTML) + .appendTo('#qunit-fixture') + .find('[data-toggle="dropdown"]') + .dropdown() + .click() + ok(dropdown.parent('.dropdown').hasClass('open'), 'open class added on click') $('body').click() - ok(!dropdown.find('.dropdown').hasClass('open'), 'open class removed') + ok(!dropdown.parent('.dropdown').hasClass('open'), 'open class removed') dropdown.remove() }) diff --git a/js/tests/unit/bootstrap-modal.js b/js/tests/unit/bootstrap-modal.js index 4bbb3313cc..22f5781ea6 100644 --- a/js/tests/unit/bootstrap-modal.js +++ b/js/tests/unit/bootstrap-modal.js @@ -10,6 +10,7 @@ $(function () { test("should return element", function () { var div = $("<div id='modal-test'></div>") ok(div.modal() == div, 'document.body returned') + $('#modal-test').remove() }) test("should expose defaults var for settings", function () { @@ -19,32 +20,29 @@ $(function () { test("should insert into dom when show method is called", function () { stop() $.support.transition = false - var div = $("<div id='modal-test'></div>") - div - .modal() - .modal("show") + $("<div id='modal-test'></div>") .bind("shown", function () { ok($('#modal-test').length, 'modal insterted into dom') + $(this).remove() start() - div.remove() }) + .modal("show") }) test("should hide modal when hide is called", function () { stop() $.support.transition = false - var div = $("<div id='modal-test'></div>") - div - .modal() + + $("<div id='modal-test'></div>") .bind("shown", function () { ok($('#modal-test').is(":visible"), 'modal visible') ok($('#modal-test').length, 'modal insterted into dom') - div.modal("hide") + $(this).modal("hide") }) .bind("hidden", function() { ok(!$('#modal-test').is(":visible"), 'modal hidden') + $('#modal-test').remove() start() - div.remove() }) .modal("show") }) @@ -54,7 +52,6 @@ $(function () { $.support.transition = false var div = $("<div id='modal-test'></div>") div - .modal() .bind("shown", function () { ok($('#modal-test').is(":visible"), 'modal visible') ok($('#modal-test').length, 'modal insterted into dom') @@ -62,18 +59,17 @@ $(function () { }) .bind("hidden", function() { ok(!$('#modal-test').is(":visible"), 'modal hidden') - start() div.remove() + start() }) .modal("toggle") }) - test("should remove from dom when click .close", function () { + test("should remove from dom when click [data-dismiss=modal]", function () { stop() $.support.transition = false - var div = $("<div id='modal-test'><span class='close'></span></div>") + var div = $("<div id='modal-test'><span class='close' data-dismiss='modal'></span></div>") div - .modal() .bind("shown", function () { ok($('#modal-test').is(":visible"), 'modal visible') ok($('#modal-test').length, 'modal insterted into dom') @@ -81,8 +77,8 @@ $(function () { }) .bind("hidden", function() { ok(!$('#modal-test').is(":visible"), 'modal hidden') - start() div.remove() + start() }) .modal("toggle") }) diff --git a/js/tests/unit/bootstrap-popover.js b/js/tests/unit/bootstrap-popover.js index 3e13d2fd20..9180c043e9 100644 --- a/js/tests/unit/bootstrap-popover.js +++ b/js/tests/unit/bootstrap-popover.js @@ -15,14 +15,12 @@ $(function () { test("should render popover element", function () { $.support.transition = false var popover = $('<a href="#" title="mdo" data-content="http://twitter.com/mdo">@mdo</a>') - .appendTo('#qunit-runoff') - .popover() + .appendTo('#qunit-fixture') .popover('show') ok($('.popover').length, 'popover was inserted') popover.popover('hide') ok(!$(".popover").length, 'popover removed') - $('#qunit-runoff').empty() }) test("should store popover instance in popover data object", function () { @@ -36,7 +34,7 @@ $(function () { test("should get title and content from options", function () { $.support.transition = false var popover = $('<a href="#">@fat</a>') - .appendTo('#qunit-runoff') + .appendTo('#qunit-fixture') .popover({ title: function () { return '@fat' @@ -54,13 +52,13 @@ $(function () { popover.popover('hide') ok(!$('.popover').length, 'popover was removed') - $('#qunit-runoff').empty() + $('#qunit-fixture').empty() }) test("should get title and content from attributes", function () { $.support.transition = false var popover = $('<a href="#" title="@mdo" data-content="loves data attributes (ã¥ï½¡â—•â€¿â€¿â—•ï½¡)㥠︵ â”»â”â”»" >@mdo</a>') - .appendTo('#qunit-runoff') + .appendTo('#qunit-fixture') .popover() .popover('show') @@ -70,7 +68,7 @@ $(function () { popover.popover('hide') ok(!$('.popover').length, 'popover was removed') - $('#qunit-runoff').empty() + $('#qunit-fixture').empty() }) }) \ No newline at end of file diff --git a/js/tests/unit/bootstrap-scrollspy.js b/js/tests/unit/bootstrap-scrollspy.js index b9b3090620..bee46a925e 100644 --- a/js/tests/unit/bootstrap-scrollspy.js +++ b/js/tests/unit/bootstrap-scrollspy.js @@ -12,7 +12,7 @@ $(function () { test("should switch active class on scroll", function () { var sectionHTML = '<div id="masthead"></div>' - , $section = $(sectionHTML).append('#qunit-runoff') + , $section = $(sectionHTML).append('#qunit-fixture') , topbarHTML ='<div class="topbar">' + '<div class="topbar-inner">' + '<div class="container">' @@ -23,9 +23,9 @@ $(function () { + '</div>' + '</div>' + '</div>' - , $topbar = $(topbarHTML).topbar() + , $topbar = $(topbarHTML).scrollspy() - ok(topbar.find('.active', true) + ok($topbar.find('.active', true)) }) }) \ No newline at end of file diff --git a/js/tests/unit/bootstrap-tab.js b/js/tests/unit/bootstrap-tab.js new file mode 100644 index 0000000000..f326490786 --- /dev/null +++ b/js/tests/unit/bootstrap-tab.js @@ -0,0 +1,46 @@ +$(function () { + + module("bootstrap-tabs") + + test("should be defined on jquery object", function () { + ok($(document.body).tab, 'tabs method is defined') + }) + + test("should return element", function () { + ok($(document.body).tab()[0] == document.body, 'document.body returned') + }) + + test("should activate element by tab id", function () { + var tabsHTML = + '<ul class="tabs">' + + '<li><a href="#home">Home</a></li>' + + '<li><a href="#profile">Profile</a></li>' + + '</ul>' + + + $('<ul><li id="home"></li><li id="profile"></li></ul>').appendTo("#qunit-fixture") + + $(tabsHTML).find('li:last a').tab('show') + equals($("#qunit-fixture").find('.active').attr('id'), "profile") + + $(tabsHTML).find('li:first a').tab('show') + equals($("#qunit-fixture").find('.active').attr('id'), "home") + }) + + test("should activate element by tab id", function () { + var pillsHTML = + '<ul class="pills">' + + '<li><a href="#home">Home</a></li>' + + '<li><a href="#profile">Profile</a></li>' + + '</ul>' + + $('<ul><li id="home"></li><li id="profile"></li></ul>').appendTo("#qunit-fixture") + + $(pillsHTML).find('li:last a').tab('show') + equals($("#qunit-fixture").find('.active').attr('id'), "profile") + + $(pillsHTML).find('li:first a').tab('show') + equals($("#qunit-fixture").find('.active').attr('id'), "home") + }) + +}) \ No newline at end of file diff --git a/js/tests/unit/bootstrap-tabs.js b/js/tests/unit/bootstrap-tabs.js deleted file mode 100644 index 2ee6761eda..0000000000 --- a/js/tests/unit/bootstrap-tabs.js +++ /dev/null @@ -1,49 +0,0 @@ -$(function () { - - module("bootstrap-tabs") - - test("should be defined on jquery object", function () { - ok($(document.body).tabs, 'tabs method is defined') - }) - - test("should return element", function () { - ok($(document.body).tabs()[0] == document.body, 'document.body returned') - }) - - test("should activate element by tab id", function () { - var tabsHTML = '<ul class="tabs">' - + '<li class="active"><a href="#home">Home</a></li>' - + '<li><a href="#profile">Profile</a></li>' - + '</ul>' - - - $('<ul><li id="home"></li><li id="profile"></li></ul>').appendTo("#qunit-runoff") - - $(tabsHTML).tabs().find('a').last().click() - equals($("#qunit-runoff").find('.active').attr('id'), "profile") - - $(tabsHTML).tabs().find('a').first().click() - equals($("#qunit-runoff").find('.active').attr('id'), "home") - - $("#qunit-runoff").empty() - }) - - test("should activate element by pill id", function () { - var pillsHTML = '<ul class="pills">' - + '<li class="active"><a href="#home">Home</a></li>' - + '<li><a href="#profile">Profile</a></li>' - + '</ul>' - - - $('<ul><li id="home"></li><li id="profile"></li></ul>').appendTo("#qunit-runoff") - - $(pillsHTML).pills().find('a').last().click() - equals($("#qunit-runoff").find('.active').attr('id'), "profile") - - $(pillsHTML).pills().find('a').first().click() - equals($("#qunit-runoff").find('.active').attr('id'), "home") - - $("#qunit-runoff").empty() - }) - -}) \ No newline at end of file diff --git a/js/tests/unit/bootstrap-transition.js b/js/tests/unit/bootstrap-transition.js new file mode 100644 index 0000000000..ff4a0f0c34 --- /dev/null +++ b/js/tests/unit/bootstrap-transition.js @@ -0,0 +1,13 @@ +$(function () { + + module("bootstrap-transition") + + test("should be defined on jquery support object", function () { + ok($.support.transition != undefined, 'transition object is defined') + }) + + test("should provide an end object", function () { + ok($.support.transition.end, 'end string is defined') + }) + +}) \ No newline at end of file diff --git a/js/tests/unit/bootstrap-twipsy.js b/js/tests/unit/bootstrap-twipsy.js index 04000696ae..7a88ab2f13 100644 --- a/js/tests/unit/bootstrap-twipsy.js +++ b/js/tests/unit/bootstrap-twipsy.js @@ -29,53 +29,23 @@ $(function () { test("should place tooltips relative to placement option", function () { $.support.transition = false var twipsy = $('<a href="#" rel="twipsy" title="Another twipsy"></a>') - .appendTo('#qunit-runoff') + .appendTo('#qunit-fixture') .twipsy({placement: 'below'}) .twipsy('show') ok($(".twipsy").hasClass('fade below in'), 'has correct classes applied') twipsy.twipsy('hide') - ok(!$(".twipsy").length, 'twipsy removed') - $('#qunit-runoff').empty() - }) - - test("should add a fallback in cases where elements have no title tag", function () { - $.support.transition = false - var twipsy = $('<a href="#" rel="twipsy"></a>') - .appendTo('#qunit-runoff') - .twipsy({fallback: '@fat'}) - .twipsy('show') - - equals($(".twipsy").text(), "@fat", 'has correct default text') - twipsy.twipsy('hide') - ok(!$(".twipsy").length, 'twipsy removed') - $('#qunit-runoff').empty() - }) - - test("should not allow html entities", function () { - $.support.transition = false - var twipsy = $('<a href="#" rel="twipsy" title="<b>@fat</b>"></a>') - .appendTo('#qunit-runoff') - .twipsy() - .twipsy('show') - - ok(!$('.twipsy b').length, 'b tag was not inserted') - twipsy.twipsy('hide') - ok(!$(".twipsy").length, 'twipsy removed') - $('#qunit-runoff').empty() }) - test("should allow html entities if html option set to true", function () { + test("should always allow html entities", function () { $.support.transition = false var twipsy = $('<a href="#" rel="twipsy" title="<b>@fat</b>"></a>') - .appendTo('#qunit-runoff') - .twipsy({html: true}) + .appendTo('#qunit-fixture') .twipsy('show') ok($('.twipsy b').length, 'b tag was inserted') twipsy.twipsy('hide') ok(!$(".twipsy").length, 'twipsy removed') - $('#qunit-runoff').empty() }) }) \ No newline at end of file diff --git a/js/tests/vendor/jquery.js b/js/tests/vendor/jquery.js new file mode 100644 index 0000000000..01fbe13c82 --- /dev/null +++ b/js/tests/vendor/jquery.js @@ -0,0 +1,9252 @@ +/*! jQuery v1.7.1 jquery.com | jquery.org/license */ +(function( window, undefined ) { + +// Use the correct document accordingly with window argument (sandbox) +var document = window.document, + navigator = window.navigator, + location = window.location; +var jQuery = (function() { + +// Define a local copy of jQuery +var jQuery = function( selector, context ) { + // The jQuery object is actually just the init constructor 'enhanced' + return new jQuery.fn.init( selector, context, rootjQuery ); + }, + + // Map over jQuery in case of overwrite + _jQuery = window.jQuery, + + // Map over the $ in case of overwrite + _$ = window.$, + + // A central reference to the root jQuery(document) + rootjQuery, + + // A simple way to check for HTML strings or ID strings + // Prioritize #id over <tag> to avoid XSS via location.hash (#9521) + quickExpr = /^(?:[^#<]*(<[\w\W]+>)[^>]*$|#([\w\-]*)$)/, + + // Check if a string has a non-whitespace character in it + rnotwhite = /\S/, + + // Used for trimming whitespace + trimLeft = /^\s+/, + trimRight = /\s+$/, + + // Match a standalone tag + rsingleTag = /^<(\w+)\s*\/?>(?:<\/\1>)?$/, + + // JSON RegExp + rvalidchars = /^[\],:{}\s]*$/, + rvalidescape = /\\(?:["\\\/bfnrt]|u[0-9a-fA-F]{4})/g, + rvalidtokens = /"[^"\\\n\r]*"|true|false|null|-?\d+(?:\.\d*)?(?:[eE][+\-]?\d+)?/g, + rvalidbraces = /(?:^|:|,)(?:\s*\[)+/g, + + // Useragent RegExp + rwebkit = /(webkit)[ \/]([\w.]+)/, + ropera = /(opera)(?:.*version)?[ \/]([\w.]+)/, + rmsie = /(msie) ([\w.]+)/, + rmozilla = /(mozilla)(?:.*? rv:([\w.]+))?/, + + // Matches dashed string for camelizing + rdashAlpha = /-([a-z]|[0-9])/ig, + rmsPrefix = /^-ms-/, + + // Used by jQuery.camelCase as callback to replace() + fcamelCase = function( all, letter ) { + return ( letter + "" ).toUpperCase(); + }, + + // Keep a UserAgent string for use with jQuery.browser + userAgent = navigator.userAgent, + + // For matching the engine and version of the browser + browserMatch, + + // The deferred used on DOM ready + readyList, + + // The ready event handler + DOMContentLoaded, + + // Save a reference to some core methods + toString = Object.prototype.toString, + hasOwn = Object.prototype.hasOwnProperty, + push = Array.prototype.push, + slice = Array.prototype.slice, + trim = String.prototype.trim, + indexOf = Array.prototype.indexOf, + + // [[Class]] -> type pairs + class2type = {}; + +jQuery.fn = jQuery.prototype = { + constructor: jQuery, + init: function( selector, context, rootjQuery ) { + var match, elem, ret, doc; + + // Handle $(""), $(null), or $(undefined) + if ( !selector ) { + return this; + } + + // Handle $(DOMElement) + if ( selector.nodeType ) { + this.context = this[0] = selector; + this.length = 1; + return this; + } + + // The body element only exists once, optimize finding it + if ( selector === "body" && !context && document.body ) { + this.context = document; + this[0] = document.body; + this.selector = selector; + this.length = 1; + return this; + } + + // Handle HTML strings + if ( typeof selector === "string" ) { + // Are we dealing with HTML string or an ID? + if ( selector.charAt(0) === "<" && selector.charAt( selector.length - 1 ) === ">" && selector.length >= 3 ) { + // Assume that strings that start and end with <> are HTML and skip the regex check + match = [ null, selector, null ]; + + } else { + match = quickExpr.exec( selector ); + } + + // Verify a match, and that no context was specified for #id + if ( match && (match[1] || !context) ) { + + // HANDLE: $(html) -> $(array) + if ( match[1] ) { + context = context instanceof jQuery ? context[0] : context; + doc = ( context ? context.ownerDocument || context : document ); + + // If a single string is passed in and it's a single tag + // just do a createElement and skip the rest + ret = rsingleTag.exec( selector ); + + if ( ret ) { + if ( jQuery.isPlainObject( context ) ) { + selector = [ document.createElement( ret[1] ) ]; + jQuery.fn.attr.call( selector, context, true ); + + } else { + selector = [ doc.createElement( ret[1] ) ]; + } + + } else { + ret = jQuery.buildFragment( [ match[1] ], [ doc ] ); + selector = ( ret.cacheable ? jQuery.clone(ret.fragment) : ret.fragment ).childNodes; + } + + return jQuery.merge( this, selector ); + + // HANDLE: $("#id") + } else { + elem = document.getElementById( match[2] ); + + // Check parentNode to catch when Blackberry 4.6 returns + // nodes that are no longer in the document #6963 + if ( elem && elem.parentNode ) { + // Handle the case where IE and Opera return items + // by name instead of ID + if ( elem.id !== match[2] ) { + return rootjQuery.find( selector ); + } + + // Otherwise, we inject the element directly into the jQuery object + this.length = 1; + this[0] = elem; + } + + this.context = document; + this.selector = selector; + return this; + } + + // HANDLE: $(expr, $(...)) + } else if ( !context || context.jquery ) { + return ( context || rootjQuery ).find( selector ); + + // HANDLE: $(expr, context) + // (which is just equivalent to: $(context).find(expr) + } else { + return this.constructor( context ).find( selector ); + } + + // HANDLE: $(function) + // Shortcut for document ready + } else if ( jQuery.isFunction( selector ) ) { + return rootjQuery.ready( selector ); + } + + if ( selector.selector !== undefined ) { + this.selector = selector.selector; + this.context = selector.context; + } + + return jQuery.makeArray( selector, this ); + }, + + // Start with an empty selector + selector: "", + + // The current version of jQuery being used + jquery: "1.7.1", + + // The default length of a jQuery object is 0 + length: 0, + + // The number of elements contained in the matched element set + size: function() { + return this.length; + }, + + toArray: function() { + return slice.call( this, 0 ); + }, + + // Get the Nth element in the matched element set OR + // Get the whole matched element set as a clean array + get: function( num ) { + return num == null ? + + // Return a 'clean' array + this.toArray() : + + // Return just the object + ( num < 0 ? this[ this.length + num ] : this[ num ] ); + }, + + // Take an array of elements and push it onto the stack + // (returning the new matched element set) + pushStack: function( elems, name, selector ) { + // Build a new jQuery matched element set + var ret = this.constructor(); + + if ( jQuery.isArray( elems ) ) { + push.apply( ret, elems ); + + } else { + jQuery.merge( ret, elems ); + } + + // Add the old object onto the stack (as a reference) + ret.prevObject = this; + + ret.context = this.context; + + if ( name === "find" ) { + ret.selector = this.selector + ( this.selector ? " " : "" ) + selector; + } else if ( name ) { + ret.selector = this.selector + "." + name + "(" + selector + ")"; + } + + // Return the newly-formed element set + return ret; + }, + + // Execute a callback for every element in the matched set. + // (You can seed the arguments with an array of args, but this is + // only used internally.) + each: function( callback, args ) { + return jQuery.each( this, callback, args ); + }, + + ready: function( fn ) { + // Attach the listeners + jQuery.bindReady(); + + // Add the callback + readyList.add( fn ); + + return this; + }, + + eq: function( i ) { + i = +i; + return i === -1 ? + this.slice( i ) : + this.slice( i, i + 1 ); + }, + + first: function() { + return this.eq( 0 ); + }, + + last: function() { + return this.eq( -1 ); + }, + + slice: function() { + return this.pushStack( slice.apply( this, arguments ), + "slice", slice.call(arguments).join(",") ); + }, + + map: function( callback ) { + return this.pushStack( jQuery.map(this, function( elem, i ) { + return callback.call( elem, i, elem ); + })); + }, + + end: function() { + return this.prevObject || this.constructor(null); + }, + + // For internal use only. + // Behaves like an Array's method, not like a jQuery method. + push: push, + sort: [].sort, + splice: [].splice +}; + +// Give the init function the jQuery prototype for later instantiation +jQuery.fn.init.prototype = jQuery.fn; + +jQuery.extend = jQuery.fn.extend = function() { + var options, name, src, copy, copyIsArray, clone, + target = arguments[0] || {}, + i = 1, + length = arguments.length, + deep = false; + + // Handle a deep copy situation + if ( typeof target === "boolean" ) { + deep = target; + target = arguments[1] || {}; + // skip the boolean and the target + i = 2; + } + + // Handle case when target is a string or something (possible in deep copy) + if ( typeof target !== "object" && !jQuery.isFunction(target) ) { + target = {}; + } + + // extend jQuery itself if only one argument is passed + if ( length === i ) { + target = this; + --i; + } + + for ( ; i < length; i++ ) { + // Only deal with non-null/undefined values + if ( (options = arguments[ i ]) != null ) { + // Extend the base object + for ( name in options ) { + src = target[ name ]; + copy = options[ name ]; + + // Prevent never-ending loop + if ( target === copy ) { + continue; + } + + // Recurse if we're merging plain objects or arrays + if ( deep && copy && ( jQuery.isPlainObject(copy) || (copyIsArray = jQuery.isArray(copy)) ) ) { + if ( copyIsArray ) { + copyIsArray = false; + clone = src && jQuery.isArray(src) ? src : []; + + } else { + clone = src && jQuery.isPlainObject(src) ? src : {}; + } + + // Never move original objects, clone them + target[ name ] = jQuery.extend( deep, clone, copy ); + + // Don't bring in undefined values + } else if ( copy !== undefined ) { + target[ name ] = copy; + } + } + } + } + + // Return the modified object + return target; +}; + +jQuery.extend({ + noConflict: function( deep ) { + if ( window.$ === jQuery ) { + window.$ = _$; + } + + if ( deep && window.jQuery === jQuery ) { + window.jQuery = _jQuery; + } + + return jQuery; + }, + + // Is the DOM ready to be used? Set to true once it occurs. + isReady: false, + + // A counter to track how many items to wait for before + // the ready event fires. See #6781 + readyWait: 1, + + // Hold (or release) the ready event + holdReady: function( hold ) { + if ( hold ) { + jQuery.readyWait++; + } else { + jQuery.ready( true ); + } + }, + + // Handle when the DOM is ready + ready: function( wait ) { + // Either a released hold or an DOMready/load event and not yet ready + if ( (wait === true && !--jQuery.readyWait) || (wait !== true && !jQuery.isReady) ) { + // Make sure body exists, at least, in case IE gets a little overzealous (ticket #5443). + if ( !document.body ) { + return setTimeout( jQuery.ready, 1 ); + } + + // Remember that the DOM is ready + jQuery.isReady = true; + + // If a normal DOM Ready event fired, decrement, and wait if need be + if ( wait !== true && --jQuery.readyWait > 0 ) { + return; + } + + // If there are functions bound, to execute + readyList.fireWith( document, [ jQuery ] ); + + // Trigger any bound ready events + if ( jQuery.fn.trigger ) { + jQuery( document ).trigger( "ready" ).off( "ready" ); + } + } + }, + + bindReady: function() { + if ( readyList ) { + return; + } + + readyList = jQuery.Callbacks( "once memory" ); + + // Catch cases where $(document).ready() is called after the + // browser event has already occurred. + if ( document.readyState === "complete" ) { + // Handle it asynchronously to allow scripts the opportunity to delay ready + return setTimeout( jQuery.ready, 1 ); + } + + // Mozilla, Opera and webkit nightlies currently support this event + if ( document.addEventListener ) { + // Use the handy event callback + document.addEventListener( "DOMContentLoaded", DOMContentLoaded, false ); + + // A fallback to window.onload, that will always work + window.addEventListener( "load", jQuery.ready, false ); + + // If IE event model is used + } else if ( document.attachEvent ) { + // ensure firing before onload, + // maybe late but safe also for iframes + document.attachEvent( "onreadystatechange", DOMContentLoaded ); + + // A fallback to window.onload, that will always work + window.attachEvent( "onload", jQuery.ready ); + + // If IE and not a frame + // continually check to see if the document is ready + var toplevel = false; + + try { + toplevel = window.frameElement == null; + } catch(e) {} + + if ( document.documentElement.doScroll && toplevel ) { + doScrollCheck(); + } + } + }, + + // See test/unit/core.js for details concerning isFunction. + // Since version 1.3, DOM methods and functions like alert + // aren't supported. They return false on IE (#2968). + isFunction: function( obj ) { + return jQuery.type(obj) === "function"; + }, + + isArray: Array.isArray || function( obj ) { + return jQuery.type(obj) === "array"; + }, + + // A crude way of determining if an object is a window + isWindow: function( obj ) { + return obj && typeof obj === "object" && "setInterval" in obj; + }, + + isNumeric: function( obj ) { + return !isNaN( parseFloat(obj) ) && isFinite( obj ); + }, + + type: function( obj ) { + return obj == null ? + String( obj ) : + class2type[ toString.call(obj) ] || "object"; + }, + + isPlainObject: function( obj ) { + // Must be an Object. + // Because of IE, we also have to check the presence of the constructor property. + // Make sure that DOM nodes and window objects don't pass through, as well + if ( !obj || jQuery.type(obj) !== "object" || obj.nodeType || jQuery.isWindow( obj ) ) { + return false; + } + + try { + // Not own constructor property must be Object + if ( obj.constructor && + !hasOwn.call(obj, "constructor") && + !hasOwn.call(obj.constructor.prototype, "isPrototypeOf") ) { + return false; + } + } catch ( e ) { + // IE8,9 Will throw exceptions on certain host objects #9897 + return false; + } + + // Own properties are enumerated firstly, so to speed up, + // if last one is own, then all properties are own. + + var key; + for ( key in obj ) {} + + return key === undefined || hasOwn.call( obj, key ); + }, + + isEmptyObject: function( obj ) { + for ( var name in obj ) { + return false; + } + return true; + }, + + error: function( msg ) { + throw new Error( msg ); + }, + + parseJSON: function( data ) { + if ( typeof data !== "string" || !data ) { + return null; + } + + // Make sure leading/trailing whitespace is removed (IE can't handle it) + data = jQuery.trim( data ); + + // Attempt to parse using the native JSON parser first + if ( window.JSON && window.JSON.parse ) { + return window.JSON.parse( data ); + } + + // Make sure the incoming data is actual JSON + // Logic borrowed from http://json.org/json2.js + if ( rvalidchars.test( data.replace( rvalidescape, "@" ) + .replace( rvalidtokens, "]" ) + .replace( rvalidbraces, "")) ) { + + return ( new Function( "return " + data ) )(); + + } + jQuery.error( "Invalid JSON: " + data ); + }, + + // Cross-browser xml parsing + parseXML: function( data ) { + var xml, tmp; + try { + if ( window.DOMParser ) { // Standard + tmp = new DOMParser(); + xml = tmp.parseFromString( data , "text/xml" ); + } else { // IE + xml = new ActiveXObject( "Microsoft.XMLDOM" ); + xml.async = "false"; + xml.loadXML( data ); + } + } catch( e ) { + xml = undefined; + } + if ( !xml || !xml.documentElement || xml.getElementsByTagName( "parsererror" ).length ) { + jQuery.error( "Invalid XML: " + data ); + } + return xml; + }, + + noop: function() {}, + + // Evaluates a script in a global context + // Workarounds based on findings by Jim Driscoll + // http://weblogs.java.net/blog/driscoll/archive/2009/09/08/eval-javascript-global-context + globalEval: function( data ) { + if ( data && rnotwhite.test( data ) ) { + // We use execScript on Internet Explorer + // We use an anonymous function so that context is window + // rather than jQuery in Firefox + ( window.execScript || function( data ) { + window[ "eval" ].call( window, data ); + } )( data ); + } + }, + + // Convert dashed to camelCase; used by the css and data modules + // Microsoft forgot to hump their vendor prefix (#9572) + camelCase: function( string ) { + return string.replace( rmsPrefix, "ms-" ).replace( rdashAlpha, fcamelCase ); + }, + + nodeName: function( elem, name ) { + return elem.nodeName && elem.nodeName.toUpperCase() === name.toUpperCase(); + }, + + // args is for internal usage only + each: function( object, callback, args ) { + var name, i = 0, + length = object.length, + isObj = length === undefined || jQuery.isFunction( object ); + + if ( args ) { + if ( isObj ) { + for ( name in object ) { + if ( callback.apply( object[ name ], args ) === false ) { + break; + } + } + } else { + for ( ; i < length; ) { + if ( callback.apply( object[ i++ ], args ) === false ) { + break; + } + } + } + + // A special, fast, case for the most common use of each + } else { + if ( isObj ) { + for ( name in object ) { + if ( callback.call( object[ name ], name, object[ name ] ) === false ) { + break; + } + } + } else { + for ( ; i < length; ) { + if ( callback.call( object[ i ], i, object[ i++ ] ) === false ) { + break; + } + } + } + } + + return object; + }, + + // Use native String.trim function wherever possible + trim: trim ? + function( text ) { + return text == null ? + "" : + trim.call( text ); + } : + + // Otherwise use our own trimming functionality + function( text ) { + return text == null ? + "" : + text.toString().replace( trimLeft, "" ).replace( trimRight, "" ); + }, + + // results is for internal usage only + makeArray: function( array, results ) { + var ret = results || []; + + if ( array != null ) { + // The window, strings (and functions) also have 'length' + // Tweaked logic slightly to handle Blackberry 4.7 RegExp issues #6930 + var type = jQuery.type( array ); + + if ( array.length == null || type === "string" || type === "function" || type === "regexp" || jQuery.isWindow( array ) ) { + push.call( ret, array ); + } else { + jQuery.merge( ret, array ); + } + } + + return ret; + }, + + inArray: function( elem, array, i ) { + var len; + + if ( array ) { + if ( indexOf ) { + return indexOf.call( array, elem, i ); + } + + len = array.length; + i = i ? i < 0 ? Math.max( 0, len + i ) : i : 0; + + for ( ; i < len; i++ ) { + // Skip accessing in sparse arrays + if ( i in array && array[ i ] === elem ) { + return i; + } + } + } + + return -1; + }, + + merge: function( first, second ) { + var i = first.length, + j = 0; + + if ( typeof second.length === "number" ) { + for ( var l = second.length; j < l; j++ ) { + first[ i++ ] = second[ j ]; + } + + } else { + while ( second[j] !== undefined ) { + first[ i++ ] = second[ j++ ]; + } + } + + first.length = i; + + return first; + }, + + grep: function( elems, callback, inv ) { + var ret = [], retVal; + inv = !!inv; + + // Go through the array, only saving the items + // that pass the validator function + for ( var i = 0, length = elems.length; i < length; i++ ) { + retVal = !!callback( elems[ i ], i ); + if ( inv !== retVal ) { + ret.push( elems[ i ] ); + } + } + + return ret; + }, + + // arg is for internal usage only + map: function( elems, callback, arg ) { + var value, key, ret = [], + i = 0, + length = elems.length, + // jquery objects are treated as arrays + isArray = elems instanceof jQuery || length !== undefined && typeof length === "number" && ( ( length > 0 && elems[ 0 ] && elems[ length -1 ] ) || length === 0 || jQuery.isArray( elems ) ) ; + + // Go through the array, translating each of the items to their + if ( isArray ) { + for ( ; i < length; i++ ) { + value = callback( elems[ i ], i, arg ); + + if ( value != null ) { + ret[ ret.length ] = value; + } + } + + // Go through every key on the object + } else { + for ( key in elems ) { + value = callback( elems[ key ], key, arg ); + + if ( value != null ) { + ret[ ret.length ] = value; + } + } + } + + // Flatten any nested arrays + return ret.concat.apply( [], ret ); + }, + + // A global GUID counter for objects + guid: 1, + + // Bind a function to a context, optionally partially applying any + // arguments. + proxy: function( fn, context ) { + if ( typeof context === "string" ) { + var tmp = fn[ context ]; + context = fn; + fn = tmp; + } + + // Quick check to determine if target is callable, in the spec + // this throws a TypeError, but we will just return undefined. + if ( !jQuery.isFunction( fn ) ) { + return undefined; + } + + // Simulated bind + var args = slice.call( arguments, 2 ), + proxy = function() { + return fn.apply( context, args.concat( slice.call( arguments ) ) ); + }; + + // Set the guid of unique handler to the same of original handler, so it can be removed + proxy.guid = fn.guid = fn.guid || proxy.guid || jQuery.guid++; + + return proxy; + }, + + // Mutifunctional method to get and set values to a collection + // The value/s can optionally be executed if it's a function + access: function( elems, key, value, exec, fn, pass ) { + var length = elems.length; + + // Setting many attributes + if ( typeof key === "object" ) { + for ( var k in key ) { + jQuery.access( elems, k, key[k], exec, fn, value ); + } + return elems; + } + + // Setting one attribute + if ( value !== undefined ) { + // Optionally, function values get executed if exec is true + exec = !pass && exec && jQuery.isFunction(value); + + for ( var i = 0; i < length; i++ ) { + fn( elems[i], key, exec ? value.call( elems[i], i, fn( elems[i], key ) ) : value, pass ); + } + + return elems; + } + + // Getting an attribute + return length ? fn( elems[0], key ) : undefined; + }, + + now: function() { + return ( new Date() ).getTime(); + }, + + // Use of jQuery.browser is frowned upon. + // More details: http://docs.jquery.com/Utilities/jQuery.browser + uaMatch: function( ua ) { + ua = ua.toLowerCase(); + + var match = rwebkit.exec( ua ) || + ropera.exec( ua ) || + rmsie.exec( ua ) || + ua.indexOf("compatible") < 0 && rmozilla.exec( ua ) || + []; + + return { browser: match[1] || "", version: match[2] || "0" }; + }, + + sub: function() { + function jQuerySub( selector, context ) { + return new jQuerySub.fn.init( selector, context ); + } + jQuery.extend( true, jQuerySub, this ); + jQuerySub.superclass = this; + jQuerySub.fn = jQuerySub.prototype = this(); + jQuerySub.fn.constructor = jQuerySub; + jQuerySub.sub = this.sub; + jQuerySub.fn.init = function init( selector, context ) { + if ( context && context instanceof jQuery && !(context instanceof jQuerySub) ) { + context = jQuerySub( context ); + } + + return jQuery.fn.init.call( this, selector, context, rootjQuerySub ); + }; + jQuerySub.fn.init.prototype = jQuerySub.fn; + var rootjQuerySub = jQuerySub(document); + return jQuerySub; + }, + + browser: {} +}); + +// Populate the class2type map +jQuery.each("Boolean Number String Function Array Date RegExp Object".split(" "), function(i, name) { + class2type[ "[object " + name + "]" ] = name.toLowerCase(); +}); + +browserMatch = jQuery.uaMatch( userAgent ); +if ( browserMatch.browser ) { + jQuery.browser[ browserMatch.browser ] = true; + jQuery.browser.version = browserMatch.version; +} + +// Deprecated, use jQuery.browser.webkit instead +if ( jQuery.browser.webkit ) { + jQuery.browser.safari = true; +} + +// IE doesn't match non-breaking spaces with \s +if ( rnotwhite.test( "\xA0" ) ) { + trimLeft = /^[\s\xA0]+/; + trimRight = /[\s\xA0]+$/; +} + +// All jQuery objects should point back to these +rootjQuery = jQuery(document); + +// Cleanup functions for the document ready method +if ( document.addEventListener ) { + DOMContentLoaded = function() { + document.removeEventListener( "DOMContentLoaded", DOMContentLoaded, false ); + jQuery.ready(); + }; + +} else if ( document.attachEvent ) { + DOMContentLoaded = function() { + // Make sure body exists, at least, in case IE gets a little overzealous (ticket #5443). + if ( document.readyState === "complete" ) { + document.detachEvent( "onreadystatechange", DOMContentLoaded ); + jQuery.ready(); + } + }; +} + +// The DOM ready check for Internet Explorer +function doScrollCheck() { + if ( jQuery.isReady ) { + return; + } + + try { + // If IE is used, use the trick by Diego Perini + // http://javascript.nwbox.com/IEContentLoaded/ + document.documentElement.doScroll("left"); + } catch(e) { + setTimeout( doScrollCheck, 1 ); + return; + } + + // and execute any waiting functions + jQuery.ready(); +} + +return jQuery; + +})(); + + +// String to Object flags format cache +var flagsCache = {}; + +// Convert String-formatted flags into Object-formatted ones and store in cache +function createFlags( flags ) { + var object = flagsCache[ flags ] = {}, + i, length; + flags = flags.split( /\s+/ ); + for ( i = 0, length = flags.length; i < length; i++ ) { + object[ flags[i] ] = true; + } + return object; +} + +/* + * Create a callback list using the following parameters: + * + * flags: an optional list of space-separated flags that will change how + * the callback list behaves + * + * By default a callback list will act like an event callback list and can be + * "fired" multiple times. + * + * Possible flags: + * + * once: will ensure the callback list can only be fired once (like a Deferred) + * + * memory: will keep track of previous values and will call any callback added + * after the list has been fired right away with the latest "memorized" + * values (like a Deferred) + * + * unique: will ensure a callback can only be added once (no duplicate in the list) + * + * stopOnFalse: interrupt callings when a callback returns false + * + */ +jQuery.Callbacks = function( flags ) { + + // Convert flags from String-formatted to Object-formatted + // (we check in cache first) + flags = flags ? ( flagsCache[ flags ] || createFlags( flags ) ) : {}; + + var // Actual callback list + list = [], + // Stack of fire calls for repeatable lists + stack = [], + // Last fire value (for non-forgettable lists) + memory, + // Flag to know if list is currently firing + firing, + // First callback to fire (used internally by add and fireWith) + firingStart, + // End of the loop when firing + firingLength, + // Index of currently firing callback (modified by remove if needed) + firingIndex, + // Add one or several callbacks to the list + add = function( args ) { + var i, + length, + elem, + type, + actual; + for ( i = 0, length = args.length; i < length; i++ ) { + elem = args[ i ]; + type = jQuery.type( elem ); + if ( type === "array" ) { + // Inspect recursively + add( elem ); + } else if ( type === "function" ) { + // Add if not in unique mode and callback is not in + if ( !flags.unique || !self.has( elem ) ) { + list.push( elem ); + } + } + } + }, + // Fire callbacks + fire = function( context, args ) { + args = args || []; + memory = !flags.memory || [ context, args ]; + firing = true; + firingIndex = firingStart || 0; + firingStart = 0; + firingLength = list.length; + for ( ; list && firingIndex < firingLength; firingIndex++ ) { + if ( list[ firingIndex ].apply( context, args ) === false && flags.stopOnFalse ) { + memory = true; // Mark as halted + break; + } + } + firing = false; + if ( list ) { + if ( !flags.once ) { + if ( stack && stack.length ) { + memory = stack.shift(); + self.fireWith( memory[ 0 ], memory[ 1 ] ); + } + } else if ( memory === true ) { + self.disable(); + } else { + list = []; + } + } + }, + // Actual Callbacks object + self = { + // Add a callback or a collection of callbacks to the list + add: function() { + if ( list ) { + var length = list.length; + add( arguments ); + // Do we need to add the callbacks to the + // current firing batch? + if ( firing ) { + firingLength = list.length; + // With memory, if we're not firing then + // we should call right away, unless previous + // firing was halted (stopOnFalse) + } else if ( memory && memory !== true ) { + firingStart = length; + fire( memory[ 0 ], memory[ 1 ] ); + } + } + return this; + }, + // Remove a callback from the list + remove: function() { + if ( list ) { + var args = arguments, + argIndex = 0, + argLength = args.length; + for ( ; argIndex < argLength ; argIndex++ ) { + for ( var i = 0; i < list.length; i++ ) { + if ( args[ argIndex ] === list[ i ] ) { + // Handle firingIndex and firingLength + if ( firing ) { + if ( i <= firingLength ) { + firingLength--; + if ( i <= firingIndex ) { + firingIndex--; + } + } + } + // Remove the element + list.splice( i--, 1 ); + // If we have some unicity property then + // we only need to do this once + if ( flags.unique ) { + break; + } + } + } + } + } + return this; + }, + // Control if a given callback is in the list + has: function( fn ) { + if ( list ) { + var i = 0, + length = list.length; + for ( ; i < length; i++ ) { + if ( fn === list[ i ] ) { + return true; + } + } + } + return false; + }, + // Remove all callbacks from the list + empty: function() { + list = []; + return this; + }, + // Have the list do nothing anymore + disable: function() { + list = stack = memory = undefined; + return this; + }, + // Is it disabled? + disabled: function() { + return !list; + }, + // Lock the list in its current state + lock: function() { + stack = undefined; + if ( !memory || memory === true ) { + self.disable(); + } + return this; + }, + // Is it locked? + locked: function() { + return !stack; + }, + // Call all callbacks with the given context and arguments + fireWith: function( context, args ) { + if ( stack ) { + if ( firing ) { + if ( !flags.once ) { + stack.push( [ context, args ] ); + } + } else if ( !( flags.once && memory ) ) { + fire( context, args ); + } + } + return this; + }, + // Call all the callbacks with the given arguments + fire: function() { + self.fireWith( this, arguments ); + return this; + }, + // To know if the callbacks have already been called at least once + fired: function() { + return !!memory; + } + }; + + return self; +}; + + + + +var // Static reference to slice + sliceDeferred = [].slice; + +jQuery.extend({ + + Deferred: function( func ) { + var doneList = jQuery.Callbacks( "once memory" ), + failList = jQuery.Callbacks( "once memory" ), + progressList = jQuery.Callbacks( "memory" ), + state = "pending", + lists = { + resolve: doneList, + reject: failList, + notify: progressList + }, + promise = { + done: doneList.add, + fail: failList.add, + progress: progressList.add, + + state: function() { + return state; + }, + + // Deprecated + isResolved: doneList.fired, + isRejected: failList.fired, + + then: function( doneCallbacks, failCallbacks, progressCallbacks ) { + deferred.done( doneCallbacks ).fail( failCallbacks ).progress( progressCallbacks ); + return this; + }, + always: function() { + deferred.done.apply( deferred, arguments ).fail.apply( deferred, arguments ); + return this; + }, + pipe: function( fnDone, fnFail, fnProgress ) { + return jQuery.Deferred(function( newDefer ) { + jQuery.each( { + done: [ fnDone, "resolve" ], + fail: [ fnFail, "reject" ], + progress: [ fnProgress, "notify" ] + }, function( handler, data ) { + var fn = data[ 0 ], + action = data[ 1 ], + returned; + if ( jQuery.isFunction( fn ) ) { + deferred[ handler ](function() { + returned = fn.apply( this, arguments ); + if ( returned && jQuery.isFunction( returned.promise ) ) { + returned.promise().then( newDefer.resolve, newDefer.reject, newDefer.notify ); + } else { + newDefer[ action + "With" ]( this === deferred ? newDefer : this, [ returned ] ); + } + }); + } else { + deferred[ handler ]( newDefer[ action ] ); + } + }); + }).promise(); + }, + // Get a promise for this deferred + // If obj is provided, the promise aspect is added to the object + promise: function( obj ) { + if ( obj == null ) { + obj = promise; + } else { + for ( var key in promise ) { + obj[ key ] = promise[ key ]; + } + } + return obj; + } + }, + deferred = promise.promise({}), + key; + + for ( key in lists ) { + deferred[ key ] = lists[ key ].fire; + deferred[ key + "With" ] = lists[ key ].fireWith; + } + + // Handle state + deferred.done( function() { + state = "resolved"; + }, failList.disable, progressList.lock ).fail( function() { + state = "rejected"; + }, doneList.disable, progressList.lock ); + + // Call given func if any + if ( func ) { + func.call( deferred, deferred ); + } + + // All done! + return deferred; + }, + + // Deferred helper + when: function( firstParam ) { + var args = sliceDeferred.call( arguments, 0 ), + i = 0, + length = args.length, + pValues = new Array( length ), + count = length, + pCount = length, + deferred = length <= 1 && firstParam && jQuery.isFunction( firstParam.promise ) ? + firstParam : + jQuery.Deferred(), + promise = deferred.promise(); + function resolveFunc( i ) { + return function( value ) { + args[ i ] = arguments.length > 1 ? sliceDeferred.call( arguments, 0 ) : value; + if ( !( --count ) ) { + deferred.resolveWith( deferred, args ); + } + }; + } + function progressFunc( i ) { + return function( value ) { + pValues[ i ] = arguments.length > 1 ? sliceDeferred.call( arguments, 0 ) : value; + deferred.notifyWith( promise, pValues ); + }; + } + if ( length > 1 ) { + for ( ; i < length; i++ ) { + if ( args[ i ] && args[ i ].promise && jQuery.isFunction( args[ i ].promise ) ) { + args[ i ].promise().then( resolveFunc(i), deferred.reject, progressFunc(i) ); + } else { + --count; + } + } + if ( !count ) { + deferred.resolveWith( deferred, args ); + } + } else if ( deferred !== firstParam ) { + deferred.resolveWith( deferred, length ? [ firstParam ] : [] ); + } + return promise; + } +}); + + + + +jQuery.support = (function() { + + var support, + all, + a, + select, + opt, + input, + marginDiv, + fragment, + tds, + events, + eventName, + i, + isSupported, + div = document.createElement( "div" ), + documentElement = document.documentElement; + + // Preliminary tests + div.setAttribute("className", "t"); + div.innerHTML = " <link/><table></table><a href='/a' style='top:1px;float:left;opacity:.55;'>a</a><input type='checkbox'/>"; + + all = div.getElementsByTagName( "*" ); + a = div.getElementsByTagName( "a" )[ 0 ]; + + // Can't get basic test support + if ( !all || !all.length || !a ) { + return {}; + } + + // First batch of supports tests + select = document.createElement( "select" ); + opt = select.appendChild( document.createElement("option") ); + input = div.getElementsByTagName( "input" )[ 0 ]; + + support = { + // IE strips leading whitespace when .innerHTML is used + leadingWhitespace: ( div.firstChild.nodeType === 3 ), + + // Make sure that tbody elements aren't automatically inserted + // IE will insert them into empty tables + tbody: !div.getElementsByTagName("tbody").length, + + // Make sure that link elements get serialized correctly by innerHTML + // This requires a wrapper element in IE + htmlSerialize: !!div.getElementsByTagName("link").length, + + // Get the style information from getAttribute + // (IE uses .cssText instead) + style: /top/.test( a.getAttribute("style") ), + + // Make sure that URLs aren't manipulated + // (IE normalizes it by default) + hrefNormalized: ( a.getAttribute("href") === "/a" ), + + // Make sure that element opacity exists + // (IE uses filter instead) + // Use a regex to work around a WebKit issue. See #5145 + opacity: /^0.55/.test( a.style.opacity ), + + // Verify style float existence + // (IE uses styleFloat instead of cssFloat) + cssFloat: !!a.style.cssFloat, + + // Make sure that if no value is specified for a checkbox + // that it defaults to "on". + // (WebKit defaults to "" instead) + checkOn: ( input.value === "on" ), + + // Make sure that a selected-by-default option has a working selected property. + // (WebKit defaults to false instead of true, IE too, if it's in an optgroup) + optSelected: opt.selected, + + // Test setAttribute on camelCase class. If it works, we need attrFixes when doing get/setAttribute (ie6/7) + getSetAttribute: div.className !== "t", + + // Tests for enctype support on a form(#6743) + enctype: !!document.createElement("form").enctype, + + // Makes sure cloning an html5 element does not cause problems + // Where outerHTML is undefined, this still works + html5Clone: document.createElement("nav").cloneNode( true ).outerHTML !== "<:nav></:nav>", + + // Will be defined later + submitBubbles: true, + changeBubbles: true, + focusinBubbles: false, + deleteExpando: true, + noCloneEvent: true, + inlineBlockNeedsLayout: false, + shrinkWrapBlocks: false, + reliableMarginRight: true + }; + + // Make sure checked status is properly cloned + input.checked = true; + support.noCloneChecked = input.cloneNode( true ).checked; + + // Make sure that the options inside disabled selects aren't marked as disabled + // (WebKit marks them as disabled) + select.disabled = true; + support.optDisabled = !opt.disabled; + + // Test to see if it's possible to delete an expando from an element + // Fails in Internet Explorer + try { + delete div.test; + } catch( e ) { + support.deleteExpando = false; + } + + if ( !div.addEventListener && div.attachEvent && div.fireEvent ) { + div.attachEvent( "onclick", function() { + // Cloning a node shouldn't copy over any + // bound event handlers (IE does this) + support.noCloneEvent = false; + }); + div.cloneNode( true ).fireEvent( "onclick" ); + } + + // Check if a radio maintains its value + // after being appended to the DOM + input = document.createElement("input"); + input.value = "t"; + input.setAttribute("type", "radio"); + support.radioValue = input.value === "t"; + + input.setAttribute("checked", "checked"); + div.appendChild( input ); + fragment = document.createDocumentFragment(); + fragment.appendChild( div.lastChild ); + + // WebKit doesn't clone checked state correctly in fragments + support.checkClone = fragment.cloneNode( true ).cloneNode( true ).lastChild.checked; + + // Check if a disconnected checkbox will retain its checked + // value of true after appended to the DOM (IE6/7) + support.appendChecked = input.checked; + + fragment.removeChild( input ); + fragment.appendChild( div ); + + div.innerHTML = ""; + + // Check if div with explicit width and no margin-right incorrectly + // gets computed margin-right based on width of container. For more + // info see bug #3333 + // Fails in WebKit before Feb 2011 nightlies + // WebKit Bug 13343 - getComputedStyle returns wrong value for margin-right + if ( window.getComputedStyle ) { + marginDiv = document.createElement( "div" ); + marginDiv.style.width = "0"; + marginDiv.style.marginRight = "0"; + div.style.width = "2px"; + div.appendChild( marginDiv ); + support.reliableMarginRight = + ( parseInt( ( window.getComputedStyle( marginDiv, null ) || { marginRight: 0 } ).marginRight, 10 ) || 0 ) === 0; + } + + // Technique from Juriy Zaytsev + // http://perfectionkills.com/detecting-event-support-without-browser-sniffing/ + // We only care about the case where non-standard event systems + // are used, namely in IE. Short-circuiting here helps us to + // avoid an eval call (in setAttribute) which can cause CSP + // to go haywire. See: https://developer.mozilla.org/en/Security/CSP + if ( div.attachEvent ) { + for( i in { + submit: 1, + change: 1, + focusin: 1 + }) { + eventName = "on" + i; + isSupported = ( eventName in div ); + if ( !isSupported ) { + div.setAttribute( eventName, "return;" ); + isSupported = ( typeof div[ eventName ] === "function" ); + } + support[ i + "Bubbles" ] = isSupported; + } + } + + fragment.removeChild( div ); + + // Null elements to avoid leaks in IE + fragment = select = opt = marginDiv = div = input = null; + + // Run tests that need a body at doc ready + jQuery(function() { + var container, outer, inner, table, td, offsetSupport, + conMarginTop, ptlm, vb, style, html, + body = document.getElementsByTagName("body")[0]; + + if ( !body ) { + // Return for frameset docs that don't have a body + return; + } + + conMarginTop = 1; + ptlm = "position:absolute;top:0;left:0;width:1px;height:1px;margin:0;"; + vb = "visibility:hidden;border:0;"; + style = "style='" + ptlm + "border:5px solid #000;padding:0;'"; + html = "<div " + style + "><div></div></div>" + + "<table " + style + " cellpadding='0' cellspacing='0'>" + + "<tr><td></td></tr></table>"; + + container = document.createElement("div"); + container.style.cssText = vb + "width:0;height:0;position:static;top:0;margin-top:" + conMarginTop + "px"; + body.insertBefore( container, body.firstChild ); + + // Construct the test element + div = document.createElement("div"); + container.appendChild( div ); + + // Check if table cells still have offsetWidth/Height when they are set + // to display:none and there are still other visible table cells in a + // table row; if so, offsetWidth/Height are not reliable for use when + // determining if an element has been hidden directly using + // display:none (it is still safe to use offsets if a parent element is + // hidden; don safety goggles and see bug #4512 for more information). + // (only IE 8 fails this test) + div.innerHTML = "<table><tr><td style='padding:0;border:0;display:none'></td><td>t</td></tr></table>"; + tds = div.getElementsByTagName( "td" ); + isSupported = ( tds[ 0 ].offsetHeight === 0 ); + + tds[ 0 ].style.display = ""; + tds[ 1 ].style.display = "none"; + + // Check if empty table cells still have offsetWidth/Height + // (IE <= 8 fail this test) + support.reliableHiddenOffsets = isSupported && ( tds[ 0 ].offsetHeight === 0 ); + + // Figure out if the W3C box model works as expected + div.innerHTML = ""; + div.style.width = div.style.paddingLeft = "1px"; + jQuery.boxModel = support.boxModel = div.offsetWidth === 2; + + if ( typeof div.style.zoom !== "undefined" ) { + // Check if natively block-level elements act like inline-block + // elements when setting their display to 'inline' and giving + // them layout + // (IE < 8 does this) + div.style.display = "inline"; + div.style.zoom = 1; + support.inlineBlockNeedsLayout = ( div.offsetWidth === 2 ); + + // Check if elements with layout shrink-wrap their children + // (IE 6 does this) + div.style.display = ""; + div.innerHTML = "<div style='width:4px;'></div>"; + support.shrinkWrapBlocks = ( div.offsetWidth !== 2 ); + } + + div.style.cssText = ptlm + vb; + div.innerHTML = html; + + outer = div.firstChild; + inner = outer.firstChild; + td = outer.nextSibling.firstChild.firstChild; + + offsetSupport = { + doesNotAddBorder: ( inner.offsetTop !== 5 ), + doesAddBorderForTableAndCells: ( td.offsetTop === 5 ) + }; + + inner.style.position = "fixed"; + inner.style.top = "20px"; + + // safari subtracts parent border width here which is 5px + offsetSupport.fixedPosition = ( inner.offsetTop === 20 || inner.offsetTop === 15 ); + inner.style.position = inner.style.top = ""; + + outer.style.overflow = "hidden"; + outer.style.position = "relative"; + + offsetSupport.subtractsBorderForOverflowNotVisible = ( inner.offsetTop === -5 ); + offsetSupport.doesNotIncludeMarginInBodyOffset = ( body.offsetTop !== conMarginTop ); + + body.removeChild( container ); + div = container = null; + + jQuery.extend( support, offsetSupport ); + }); + + return support; +})(); + + + + +var rbrace = /^(?:\{.*\}|\[.*\])$/, + rmultiDash = /([A-Z])/g; + +jQuery.extend({ + cache: {}, + + // Please use with caution + uuid: 0, + + // Unique for each copy of jQuery on the page + // Non-digits removed to match rinlinejQuery + expando: "jQuery" + ( jQuery.fn.jquery + Math.random() ).replace( /\D/g, "" ), + + // The following elements throw uncatchable exceptions if you + // attempt to add expando properties to them. + noData: { + "embed": true, + // Ban all objects except for Flash (which handle expandos) + "object": "clsid:D27CDB6E-AE6D-11cf-96B8-444553540000", + "applet": true + }, + + hasData: function( elem ) { + elem = elem.nodeType ? jQuery.cache[ elem[jQuery.expando] ] : elem[ jQuery.expando ]; + return !!elem && !isEmptyDataObject( elem ); + }, + + data: function( elem, name, data, pvt /* Internal Use Only */ ) { + if ( !jQuery.acceptData( elem ) ) { + return; + } + + var privateCache, thisCache, ret, + internalKey = jQuery.expando, + getByName = typeof name === "string", + + // We have to handle DOM nodes and JS objects differently because IE6-7 + // can't GC object references properly across the DOM-JS boundary + isNode = elem.nodeType, + + // Only DOM nodes need the global jQuery cache; JS object data is + // attached directly to the object so GC can occur automatically + cache = isNode ? jQuery.cache : elem, + + // Only defining an ID for JS objects if its cache already exists allows + // the code to shortcut on the same path as a DOM node with no cache + id = isNode ? elem[ internalKey ] : elem[ internalKey ] && internalKey, + isEvents = name === "events"; + + // Avoid doing any more work than we need to when trying to get data on an + // object that has no data at all + if ( (!id || !cache[id] || (!isEvents && !pvt && !cache[id].data)) && getByName && data === undefined ) { + return; + } + + if ( !id ) { + // Only DOM nodes need a new unique ID for each element since their data + // ends up in the global cache + if ( isNode ) { + elem[ internalKey ] = id = ++jQuery.uuid; + } else { + id = internalKey; + } + } + + if ( !cache[ id ] ) { + cache[ id ] = {}; + + // Avoids exposing jQuery metadata on plain JS objects when the object + // is serialized using JSON.stringify + if ( !isNode ) { + cache[ id ].toJSON = jQuery.noop; + } + } + + // An object can be passed to jQuery.data instead of a key/value pair; this gets + // shallow copied over onto the existing cache + if ( typeof name === "object" || typeof name === "function" ) { + if ( pvt ) { + cache[ id ] = jQuery.extend( cache[ id ], name ); + } else { + cache[ id ].data = jQuery.extend( cache[ id ].data, name ); + } + } + + privateCache = thisCache = cache[ id ]; + + // jQuery data() is stored in a separate object inside the object's internal data + // cache in order to avoid key collisions between internal data and user-defined + // data. + if ( !pvt ) { + if ( !thisCache.data ) { + thisCache.data = {}; + } + + thisCache = thisCache.data; + } + + if ( data !== undefined ) { + thisCache[ jQuery.camelCase( name ) ] = data; + } + + // Users should not attempt to inspect the internal events object using jQuery.data, + // it is undocumented and subject to change. But does anyone listen? No. + if ( isEvents && !thisCache[ name ] ) { + return privateCache.events; + } + + // Check for both converted-to-camel and non-converted data property names + // If a data property was specified + if ( getByName ) { + + // First Try to find as-is property data + ret = thisCache[ name ]; + + // Test for null|undefined property data + if ( ret == null ) { + + // Try to find the camelCased property + ret = thisCache[ jQuery.camelCase( name ) ]; + } + } else { + ret = thisCache; + } + + return ret; + }, + + removeData: function( elem, name, pvt /* Internal Use Only */ ) { + if ( !jQuery.acceptData( elem ) ) { + return; + } + + var thisCache, i, l, + + // Reference to internal data cache key + internalKey = jQuery.expando, + + isNode = elem.nodeType, + + // See jQuery.data for more information + cache = isNode ? jQuery.cache : elem, + + // See jQuery.data for more information + id = isNode ? elem[ internalKey ] : internalKey; + + // If there is already no cache entry for this object, there is no + // purpose in continuing + if ( !cache[ id ] ) { + return; + } + + if ( name ) { + + thisCache = pvt ? cache[ id ] : cache[ id ].data; + + if ( thisCache ) { + + // Support array or space separated string names for data keys + if ( !jQuery.isArray( name ) ) { + + // try the string as a key before any manipulation + if ( name in thisCache ) { + name = [ name ]; + } else { + + // split the camel cased version by spaces unless a key with the spaces exists + name = jQuery.camelCase( name ); + if ( name in thisCache ) { + name = [ name ]; + } else { + name = name.split( " " ); + } + } + } + + for ( i = 0, l = name.length; i < l; i++ ) { + delete thisCache[ name[i] ]; + } + + // If there is no data left in the cache, we want to continue + // and let the cache object itself get destroyed + if ( !( pvt ? isEmptyDataObject : jQuery.isEmptyObject )( thisCache ) ) { + return; + } + } + } + + // See jQuery.data for more information + if ( !pvt ) { + delete cache[ id ].data; + + // Don't destroy the parent cache unless the internal data object + // had been the only thing left in it + if ( !isEmptyDataObject(cache[ id ]) ) { + return; + } + } + + // Browsers that fail expando deletion also refuse to delete expandos on + // the window, but it will allow it on all other JS objects; other browsers + // don't care + // Ensure that `cache` is not a window object #10080 + if ( jQuery.support.deleteExpando || !cache.setInterval ) { + delete cache[ id ]; + } else { + cache[ id ] = null; + } + + // We destroyed the cache and need to eliminate the expando on the node to avoid + // false lookups in the cache for entries that no longer exist + if ( isNode ) { + // IE does not allow us to delete expando properties from nodes, + // nor does it have a removeAttribute function on Document nodes; + // we must handle all of these cases + if ( jQuery.support.deleteExpando ) { + delete elem[ internalKey ]; + } else if ( elem.removeAttribute ) { + elem.removeAttribute( internalKey ); + } else { + elem[ internalKey ] = null; + } + } + }, + + // For internal use only. + _data: function( elem, name, data ) { + return jQuery.data( elem, name, data, true ); + }, + + // A method for determining if a DOM node can handle the data expando + acceptData: function( elem ) { + if ( elem.nodeName ) { + var match = jQuery.noData[ elem.nodeName.toLowerCase() ]; + + if ( match ) { + return !(match === true || elem.getAttribute("classid") !== match); + } + } + + return true; + } +}); + +jQuery.fn.extend({ + data: function( key, value ) { + var parts, attr, name, + data = null; + + if ( typeof key === "undefined" ) { + if ( this.length ) { + data = jQuery.data( this[0] ); + + if ( this[0].nodeType === 1 && !jQuery._data( this[0], "parsedAttrs" ) ) { + attr = this[0].attributes; + for ( var i = 0, l = attr.length; i < l; i++ ) { + name = attr[i].name; + + if ( name.indexOf( "data-" ) === 0 ) { + name = jQuery.camelCase( name.substring(5) ); + + dataAttr( this[0], name, data[ name ] ); + } + } + jQuery._data( this[0], "parsedAttrs", true ); + } + } + + return data; + + } else if ( typeof key === "object" ) { + return this.each(function() { + jQuery.data( this, key ); + }); + } + + parts = key.split("."); + parts[1] = parts[1] ? "." + parts[1] : ""; + + if ( value === undefined ) { + data = this.triggerHandler("getData" + parts[1] + "!", [parts[0]]); + + // Try to fetch any internally stored data first + if ( data === undefined && this.length ) { + data = jQuery.data( this[0], key ); + data = dataAttr( this[0], key, data ); + } + + return data === undefined && parts[1] ? + this.data( parts[0] ) : + data; + + } else { + return this.each(function() { + var self = jQuery( this ), + args = [ parts[0], value ]; + + self.triggerHandler( "setData" + parts[1] + "!", args ); + jQuery.data( this, key, value ); + self.triggerHandler( "changeData" + parts[1] + "!", args ); + }); + } + }, + + removeData: function( key ) { + return this.each(function() { + jQuery.removeData( this, key ); + }); + } +}); + +function dataAttr( elem, key, data ) { + // If nothing was found internally, try to fetch any + // data from the HTML5 data-* attribute + if ( data === undefined && elem.nodeType === 1 ) { + + var name = "data-" + key.replace( rmultiDash, "-$1" ).toLowerCase(); + + data = elem.getAttribute( name ); + + if ( typeof data === "string" ) { + try { + data = data === "true" ? true : + data === "false" ? false : + data === "null" ? null : + jQuery.isNumeric( data ) ? parseFloat( data ) : + rbrace.test( data ) ? jQuery.parseJSON( data ) : + data; + } catch( e ) {} + + // Make sure we set the data so it isn't changed later + jQuery.data( elem, key, data ); + + } else { + data = undefined; + } + } + + return data; +} + +// checks a cache object for emptiness +function isEmptyDataObject( obj ) { + for ( var name in obj ) { + + // if the public data object is empty, the private is still empty + if ( name === "data" && jQuery.isEmptyObject( obj[name] ) ) { + continue; + } + if ( name !== "toJSON" ) { + return false; + } + } + + return true; +} + + + + +function handleQueueMarkDefer( elem, type, src ) { + var deferDataKey = type + "defer", + queueDataKey = type + "queue", + markDataKey = type + "mark", + defer = jQuery._data( elem, deferDataKey ); + if ( defer && + ( src === "queue" || !jQuery._data(elem, queueDataKey) ) && + ( src === "mark" || !jQuery._data(elem, markDataKey) ) ) { + // Give room for hard-coded callbacks to fire first + // and eventually mark/queue something else on the element + setTimeout( function() { + if ( !jQuery._data( elem, queueDataKey ) && + !jQuery._data( elem, markDataKey ) ) { + jQuery.removeData( elem, deferDataKey, true ); + defer.fire(); + } + }, 0 ); + } +} + +jQuery.extend({ + + _mark: function( elem, type ) { + if ( elem ) { + type = ( type || "fx" ) + "mark"; + jQuery._data( elem, type, (jQuery._data( elem, type ) || 0) + 1 ); + } + }, + + _unmark: function( force, elem, type ) { + if ( force !== true ) { + type = elem; + elem = force; + force = false; + } + if ( elem ) { + type = type || "fx"; + var key = type + "mark", + count = force ? 0 : ( (jQuery._data( elem, key ) || 1) - 1 ); + if ( count ) { + jQuery._data( elem, key, count ); + } else { + jQuery.removeData( elem, key, true ); + handleQueueMarkDefer( elem, type, "mark" ); + } + } + }, + + queue: function( elem, type, data ) { + var q; + if ( elem ) { + type = ( type || "fx" ) + "queue"; + q = jQuery._data( elem, type ); + + // Speed up dequeue by getting out quickly if this is just a lookup + if ( data ) { + if ( !q || jQuery.isArray(data) ) { + q = jQuery._data( elem, type, jQuery.makeArray(data) ); + } else { + q.push( data ); + } + } + return q || []; + } + }, + + dequeue: function( elem, type ) { + type = type || "fx"; + + var queue = jQuery.queue( elem, type ), + fn = queue.shift(), + hooks = {}; + + // If the fx queue is dequeued, always remove the progress sentinel + if ( fn === "inprogress" ) { + fn = queue.shift(); + } + + if ( fn ) { + // Add a progress sentinel to prevent the fx queue from being + // automatically dequeued + if ( type === "fx" ) { + queue.unshift( "inprogress" ); + } + + jQuery._data( elem, type + ".run", hooks ); + fn.call( elem, function() { + jQuery.dequeue( elem, type ); + }, hooks ); + } + + if ( !queue.length ) { + jQuery.removeData( elem, type + "queue " + type + ".run", true ); + handleQueueMarkDefer( elem, type, "queue" ); + } + } +}); + +jQuery.fn.extend({ + queue: function( type, data ) { + if ( typeof type !== "string" ) { + data = type; + type = "fx"; + } + + if ( data === undefined ) { + return jQuery.queue( this[0], type ); + } + return this.each(function() { + var queue = jQuery.queue( this, type, data ); + + if ( type === "fx" && queue[0] !== "inprogress" ) { + jQuery.dequeue( this, type ); + } + }); + }, + dequeue: function( type ) { + return this.each(function() { + jQuery.dequeue( this, type ); + }); + }, + // Based off of the plugin by Clint Helfers, with permission. + // http://blindsignals.com/index.php/2009/07/jquery-delay/ + delay: function( time, type ) { + time = jQuery.fx ? jQuery.fx.speeds[ time ] || time : time; + type = type || "fx"; + + return this.queue( type, function( next, hooks ) { + var timeout = setTimeout( next, time ); + hooks.stop = function() { + clearTimeout( timeout ); + }; + }); + }, + clearQueue: function( type ) { + return this.queue( type || "fx", [] ); + }, + // Get a promise resolved when queues of a certain type + // are emptied (fx is the type by default) + promise: function( type, object ) { + if ( typeof type !== "string" ) { + object = type; + type = undefined; + } + type = type || "fx"; + var defer = jQuery.Deferred(), + elements = this, + i = elements.length, + count = 1, + deferDataKey = type + "defer", + queueDataKey = type + "queue", + markDataKey = type + "mark", + tmp; + function resolve() { + if ( !( --count ) ) { + defer.resolveWith( elements, [ elements ] ); + } + } + while( i-- ) { + if (( tmp = jQuery.data( elements[ i ], deferDataKey, undefined, true ) || + ( jQuery.data( elements[ i ], queueDataKey, undefined, true ) || + jQuery.data( elements[ i ], markDataKey, undefined, true ) ) && + jQuery.data( elements[ i ], deferDataKey, jQuery.Callbacks( "once memory" ), true ) )) { + count++; + tmp.add( resolve ); + } + } + resolve(); + return defer.promise(); + } +}); + + + + +var rclass = /[\n\t\r]/g, + rspace = /\s+/, + rreturn = /\r/g, + rtype = /^(?:button|input)$/i, + rfocusable = /^(?:button|input|object|select|textarea)$/i, + rclickable = /^a(?:rea)?$/i, + rboolean = /^(?:autofocus|autoplay|async|checked|controls|defer|disabled|hidden|loop|multiple|open|readonly|required|scoped|selected)$/i, + getSetAttribute = jQuery.support.getSetAttribute, + nodeHook, boolHook, fixSpecified; + +jQuery.fn.extend({ + attr: function( name, value ) { + return jQuery.access( this, name, value, true, jQuery.attr ); + }, + + removeAttr: function( name ) { + return this.each(function() { + jQuery.removeAttr( this, name ); + }); + }, + + prop: function( name, value ) { + return jQuery.access( this, name, value, true, jQuery.prop ); + }, + + removeProp: function( name ) { + name = jQuery.propFix[ name ] || name; + return this.each(function() { + // try/catch handles cases where IE balks (such as removing a property on window) + try { + this[ name ] = undefined; + delete this[ name ]; + } catch( e ) {} + }); + }, + + addClass: function( value ) { + var classNames, i, l, elem, + setClass, c, cl; + + if ( jQuery.isFunction( value ) ) { + return this.each(function( j ) { + jQuery( this ).addClass( value.call(this, j, this.className) ); + }); + } + + if ( value && typeof value === "string" ) { + classNames = value.split( rspace ); + + for ( i = 0, l = this.length; i < l; i++ ) { + elem = this[ i ]; + + if ( elem.nodeType === 1 ) { + if ( !elem.className && classNames.length === 1 ) { + elem.className = value; + + } else { + setClass = " " + elem.className + " "; + + for ( c = 0, cl = classNames.length; c < cl; c++ ) { + if ( !~setClass.indexOf( " " + classNames[ c ] + " " ) ) { + setClass += classNames[ c ] + " "; + } + } + elem.className = jQuery.trim( setClass ); + } + } + } + } + + return this; + }, + + removeClass: function( value ) { + var classNames, i, l, elem, className, c, cl; + + if ( jQuery.isFunction( value ) ) { + return this.each(function( j ) { + jQuery( this ).removeClass( value.call(this, j, this.className) ); + }); + } + + if ( (value && typeof value === "string") || value === undefined ) { + classNames = ( value || "" ).split( rspace ); + + for ( i = 0, l = this.length; i < l; i++ ) { + elem = this[ i ]; + + if ( elem.nodeType === 1 && elem.className ) { + if ( value ) { + className = (" " + elem.className + " ").replace( rclass, " " ); + for ( c = 0, cl = classNames.length; c < cl; c++ ) { + className = className.replace(" " + classNames[ c ] + " ", " "); + } + elem.className = jQuery.trim( className ); + + } else { + elem.className = ""; + } + } + } + } + + return this; + }, + + toggleClass: function( value, stateVal ) { + var type = typeof value, + isBool = typeof stateVal === "boolean"; + + if ( jQuery.isFunction( value ) ) { + return this.each(function( i ) { + jQuery( this ).toggleClass( value.call(this, i, this.className, stateVal), stateVal ); + }); + } + + return this.each(function() { + if ( type === "string" ) { + // toggle individual class names + var className, + i = 0, + self = jQuery( this ), + state = stateVal, + classNames = value.split( rspace ); + + while ( (className = classNames[ i++ ]) ) { + // check each className given, space seperated list + state = isBool ? state : !self.hasClass( className ); + self[ state ? "addClass" : "removeClass" ]( className ); + } + + } else if ( type === "undefined" || type === "boolean" ) { + if ( this.className ) { + // store className if set + jQuery._data( this, "__className__", this.className ); + } + + // toggle whole className + this.className = this.className || value === false ? "" : jQuery._data( this, "__className__" ) || ""; + } + }); + }, + + hasClass: function( selector ) { + var className = " " + selector + " ", + i = 0, + l = this.length; + for ( ; i < l; i++ ) { + if ( this[i].nodeType === 1 && (" " + this[i].className + " ").replace(rclass, " ").indexOf( className ) > -1 ) { + return true; + } + } + + return false; + }, + + val: function( value ) { + var hooks, ret, isFunction, + elem = this[0]; + + if ( !arguments.length ) { + if ( elem ) { + hooks = jQuery.valHooks[ elem.nodeName.toLowerCase() ] || jQuery.valHooks[ elem.type ]; + + if ( hooks && "get" in hooks && (ret = hooks.get( elem, "value" )) !== undefined ) { + return ret; + } + + ret = elem.value; + + return typeof ret === "string" ? + // handle most common string cases + ret.replace(rreturn, "") : + // handle cases where value is null/undef or number + ret == null ? "" : ret; + } + + return; + } + + isFunction = jQuery.isFunction( value ); + + return this.each(function( i ) { + var self = jQuery(this), val; + + if ( this.nodeType !== 1 ) { + return; + } + + if ( isFunction ) { + val = value.call( this, i, self.val() ); + } else { + val = value; + } + + // Treat null/undefined as ""; convert numbers to string + if ( val == null ) { + val = ""; + } else if ( typeof val === "number" ) { + val += ""; + } else if ( jQuery.isArray( val ) ) { + val = jQuery.map(val, function ( value ) { + return value == null ? "" : value + ""; + }); + } + + hooks = jQuery.valHooks[ this.nodeName.toLowerCase() ] || jQuery.valHooks[ this.type ]; + + // If set returns undefined, fall back to normal setting + if ( !hooks || !("set" in hooks) || hooks.set( this, val, "value" ) === undefined ) { + this.value = val; + } + }); + } +}); + +jQuery.extend({ + valHooks: { + option: { + get: function( elem ) { + // attributes.value is undefined in Blackberry 4.7 but + // uses .value. See #6932 + var val = elem.attributes.value; + return !val || val.specified ? elem.value : elem.text; + } + }, + select: { + get: function( elem ) { + var value, i, max, option, + index = elem.selectedIndex, + values = [], + options = elem.options, + one = elem.type === "select-one"; + + // Nothing was selected + if ( index < 0 ) { + return null; + } + + // Loop through all the selected options + i = one ? index : 0; + max = one ? index + 1 : options.length; + for ( ; i < max; i++ ) { + option = options[ i ]; + + // Don't return options that are disabled or in a disabled optgroup + if ( option.selected && (jQuery.support.optDisabled ? !option.disabled : option.getAttribute("disabled") === null) && + (!option.parentNode.disabled || !jQuery.nodeName( option.parentNode, "optgroup" )) ) { + + // Get the specific value for the option + value = jQuery( option ).val(); + + // We don't need an array for one selects + if ( one ) { + return value; + } + + // Multi-Selects return an array + values.push( value ); + } + } + + // Fixes Bug #2551 -- select.val() broken in IE after form.reset() + if ( one && !values.length && options.length ) { + return jQuery( options[ index ] ).val(); + } + + return values; + }, + + set: function( elem, value ) { + var values = jQuery.makeArray( value ); + + jQuery(elem).find("option").each(function() { + this.selected = jQuery.inArray( jQuery(this).val(), values ) >= 0; + }); + + if ( !values.length ) { + elem.selectedIndex = -1; + } + return values; + } + } + }, + + attrFn: { + val: true, + css: true, + html: true, + text: true, + data: true, + width: true, + height: true, + offset: true + }, + + attr: function( elem, name, value, pass ) { + var ret, hooks, notxml, + nType = elem.nodeType; + + // don't get/set attributes on text, comment and attribute nodes + if ( !elem || nType === 3 || nType === 8 || nType === 2 ) { + return; + } + + if ( pass && name in jQuery.attrFn ) { + return jQuery( elem )[ name ]( value ); + } + + // Fallback to prop when attributes are not supported + if ( typeof elem.getAttribute === "undefined" ) { + return jQuery.prop( elem, name, value ); + } + + notxml = nType !== 1 || !jQuery.isXMLDoc( elem ); + + // All attributes are lowercase + // Grab necessary hook if one is defined + if ( notxml ) { + name = name.toLowerCase(); + hooks = jQuery.attrHooks[ name ] || ( rboolean.test( name ) ? boolHook : nodeHook ); + } + + if ( value !== undefined ) { + + if ( value === null ) { + jQuery.removeAttr( elem, name ); + return; + + } else if ( hooks && "set" in hooks && notxml && (ret = hooks.set( elem, value, name )) !== undefined ) { + return ret; + + } else { + elem.setAttribute( name, "" + value ); + return value; + } + + } else if ( hooks && "get" in hooks && notxml && (ret = hooks.get( elem, name )) !== null ) { + return ret; + + } else { + + ret = elem.getAttribute( name ); + + // Non-existent attributes return null, we normalize to undefined + return ret === null ? + undefined : + ret; + } + }, + + removeAttr: function( elem, value ) { + var propName, attrNames, name, l, + i = 0; + + if ( value && elem.nodeType === 1 ) { + attrNames = value.toLowerCase().split( rspace ); + l = attrNames.length; + + for ( ; i < l; i++ ) { + name = attrNames[ i ]; + + if ( name ) { + propName = jQuery.propFix[ name ] || name; + + // See #9699 for explanation of this approach (setting first, then removal) + jQuery.attr( elem, name, "" ); + elem.removeAttribute( getSetAttribute ? name : propName ); + + // Set corresponding property to false for boolean attributes + if ( rboolean.test( name ) && propName in elem ) { + elem[ propName ] = false; + } + } + } + } + }, + + attrHooks: { + type: { + set: function( elem, value ) { + // We can't allow the type property to be changed (since it causes problems in IE) + if ( rtype.test( elem.nodeName ) && elem.parentNode ) { + jQuery.error( "type property can't be changed" ); + } else if ( !jQuery.support.radioValue && value === "radio" && jQuery.nodeName(elem, "input") ) { + // Setting the type on a radio button after the value resets the value in IE6-9 + // Reset value to it's default in case type is set after value + // This is for element creation + var val = elem.value; + elem.setAttribute( "type", value ); + if ( val ) { + elem.value = val; + } + return value; + } + } + }, + // Use the value property for back compat + // Use the nodeHook for button elements in IE6/7 (#1954) + value: { + get: function( elem, name ) { + if ( nodeHook && jQuery.nodeName( elem, "button" ) ) { + return nodeHook.get( elem, name ); + } + return name in elem ? + elem.value : + null; + }, + set: function( elem, value, name ) { + if ( nodeHook && jQuery.nodeName( elem, "button" ) ) { + return nodeHook.set( elem, value, name ); + } + // Does not return so that setAttribute is also used + elem.value = value; + } + } + }, + + propFix: { + tabindex: "tabIndex", + readonly: "readOnly", + "for": "htmlFor", + "class": "className", + maxlength: "maxLength", + cellspacing: "cellSpacing", + cellpadding: "cellPadding", + rowspan: "rowSpan", + colspan: "colSpan", + usemap: "useMap", + frameborder: "frameBorder", + contenteditable: "contentEditable" + }, + + prop: function( elem, name, value ) { + var ret, hooks, notxml, + nType = elem.nodeType; + + // don't get/set properties on text, comment and attribute nodes + if ( !elem || nType === 3 || nType === 8 || nType === 2 ) { + return; + } + + notxml = nType !== 1 || !jQuery.isXMLDoc( elem ); + + if ( notxml ) { + // Fix name and attach hooks + name = jQuery.propFix[ name ] || name; + hooks = jQuery.propHooks[ name ]; + } + + if ( value !== undefined ) { + if ( hooks && "set" in hooks && (ret = hooks.set( elem, value, name )) !== undefined ) { + return ret; + + } else { + return ( elem[ name ] = value ); + } + + } else { + if ( hooks && "get" in hooks && (ret = hooks.get( elem, name )) !== null ) { + return ret; + + } else { + return elem[ name ]; + } + } + }, + + propHooks: { + tabIndex: { + get: function( elem ) { + // elem.tabIndex doesn't always return the correct value when it hasn't been explicitly set + // http://fluidproject.org/blog/2008/01/09/getting-setting-and-removing-tabindex-values-with-javascript/ + var attributeNode = elem.getAttributeNode("tabindex"); + + return attributeNode && attributeNode.specified ? + parseInt( attributeNode.value, 10 ) : + rfocusable.test( elem.nodeName ) || rclickable.test( elem.nodeName ) && elem.href ? + 0 : + undefined; + } + } + } +}); + +// Add the tabIndex propHook to attrHooks for back-compat (different case is intentional) +jQuery.attrHooks.tabindex = jQuery.propHooks.tabIndex; + +// Hook for boolean attributes +boolHook = { + get: function( elem, name ) { + // Align boolean attributes with corresponding properties + // Fall back to attribute presence where some booleans are not supported + var attrNode, + property = jQuery.prop( elem, name ); + return property === true || typeof property !== "boolean" && ( attrNode = elem.getAttributeNode(name) ) && attrNode.nodeValue !== false ? + name.toLowerCase() : + undefined; + }, + set: function( elem, value, name ) { + var propName; + if ( value === false ) { + // Remove boolean attributes when set to false + jQuery.removeAttr( elem, name ); + } else { + // value is true since we know at this point it's type boolean and not false + // Set boolean attributes to the same name and set the DOM property + propName = jQuery.propFix[ name ] || name; + if ( propName in elem ) { + // Only set the IDL specifically if it already exists on the element + elem[ propName ] = true; + } + + elem.setAttribute( name, name.toLowerCase() ); + } + return name; + } +}; + +// IE6/7 do not support getting/setting some attributes with get/setAttribute +if ( !getSetAttribute ) { + + fixSpecified = { + name: true, + id: true + }; + + // Use this for any attribute in IE6/7 + // This fixes almost every IE6/7 issue + nodeHook = jQuery.valHooks.button = { + get: function( elem, name ) { + var ret; + ret = elem.getAttributeNode( name ); + return ret && ( fixSpecified[ name ] ? ret.nodeValue !== "" : ret.specified ) ? + ret.nodeValue : + undefined; + }, + set: function( elem, value, name ) { + // Set the existing or create a new attribute node + var ret = elem.getAttributeNode( name ); + if ( !ret ) { + ret = document.createAttribute( name ); + elem.setAttributeNode( ret ); + } + return ( ret.nodeValue = value + "" ); + } + }; + + // Apply the nodeHook to tabindex + jQuery.attrHooks.tabindex.set = nodeHook.set; + + // Set width and height to auto instead of 0 on empty string( Bug #8150 ) + // This is for removals + jQuery.each([ "width", "height" ], function( i, name ) { + jQuery.attrHooks[ name ] = jQuery.extend( jQuery.attrHooks[ name ], { + set: function( elem, value ) { + if ( value === "" ) { + elem.setAttribute( name, "auto" ); + return value; + } + } + }); + }); + + // Set contenteditable to false on removals(#10429) + // Setting to empty string throws an error as an invalid value + jQuery.attrHooks.contenteditable = { + get: nodeHook.get, + set: function( elem, value, name ) { + if ( value === "" ) { + value = "false"; + } + nodeHook.set( elem, value, name ); + } + }; +} + + +// Some attributes require a special call on IE +if ( !jQuery.support.hrefNormalized ) { + jQuery.each([ "href", "src", "width", "height" ], function( i, name ) { + jQuery.attrHooks[ name ] = jQuery.extend( jQuery.attrHooks[ name ], { + get: function( elem ) { + var ret = elem.getAttribute( name, 2 ); + return ret === null ? undefined : ret; + } + }); + }); +} + +if ( !jQuery.support.style ) { + jQuery.attrHooks.style = { + get: function( elem ) { + // Return undefined in the case of empty string + // Normalize to lowercase since IE uppercases css property names + return elem.style.cssText.toLowerCase() || undefined; + }, + set: function( elem, value ) { + return ( elem.style.cssText = "" + value ); + } + }; +} + +// Safari mis-reports the default selected property of an option +// Accessing the parent's selectedIndex property fixes it +if ( !jQuery.support.optSelected ) { + jQuery.propHooks.selected = jQuery.extend( jQuery.propHooks.selected, { + get: function( elem ) { + var parent = elem.parentNode; + + if ( parent ) { + parent.selectedIndex; + + // Make sure that it also works with optgroups, see #5701 + if ( parent.parentNode ) { + parent.parentNode.selectedIndex; + } + } + return null; + } + }); +} + +// IE6/7 call enctype encoding +if ( !jQuery.support.enctype ) { + jQuery.propFix.enctype = "encoding"; +} + +// Radios and checkboxes getter/setter +if ( !jQuery.support.checkOn ) { + jQuery.each([ "radio", "checkbox" ], function() { + jQuery.valHooks[ this ] = { + get: function( elem ) { + // Handle the case where in Webkit "" is returned instead of "on" if a value isn't specified + return elem.getAttribute("value") === null ? "on" : elem.value; + } + }; + }); +} +jQuery.each([ "radio", "checkbox" ], function() { + jQuery.valHooks[ this ] = jQuery.extend( jQuery.valHooks[ this ], { + set: function( elem, value ) { + if ( jQuery.isArray( value ) ) { + return ( elem.checked = jQuery.inArray( jQuery(elem).val(), value ) >= 0 ); + } + } + }); +}); + + + + +var rformElems = /^(?:textarea|input|select)$/i, + rtypenamespace = /^([^\.]*)?(?:\.(.+))?$/, + rhoverHack = /\bhover(\.\S+)?\b/, + rkeyEvent = /^key/, + rmouseEvent = /^(?:mouse|contextmenu)|click/, + rfocusMorph = /^(?:focusinfocus|focusoutblur)$/, + rquickIs = /^(\w*)(?:#([\w\-]+))?(?:\.([\w\-]+))?$/, + quickParse = function( selector ) { + var quick = rquickIs.exec( selector ); + if ( quick ) { + // 0 1 2 3 + // [ _, tag, id, class ] + quick[1] = ( quick[1] || "" ).toLowerCase(); + quick[3] = quick[3] && new RegExp( "(?:^|\\s)" + quick[3] + "(?:\\s|$)" ); + } + return quick; + }, + quickIs = function( elem, m ) { + var attrs = elem.attributes || {}; + return ( + (!m[1] || elem.nodeName.toLowerCase() === m[1]) && + (!m[2] || (attrs.id || {}).value === m[2]) && + (!m[3] || m[3].test( (attrs[ "class" ] || {}).value )) + ); + }, + hoverHack = function( events ) { + return jQuery.event.special.hover ? events : events.replace( rhoverHack, "mouseenter$1 mouseleave$1" ); + }; + +/* + * Helper functions for managing events -- not part of the public interface. + * Props to Dean Edwards' addEvent library for many of the ideas. + */ +jQuery.event = { + + add: function( elem, types, handler, data, selector ) { + + var elemData, eventHandle, events, + t, tns, type, namespaces, handleObj, + handleObjIn, quick, handlers, special; + + // Don't attach events to noData or text/comment nodes (allow plain objects tho) + if ( elem.nodeType === 3 || elem.nodeType === 8 || !types || !handler || !(elemData = jQuery._data( elem )) ) { + return; + } + + // Caller can pass in an object of custom data in lieu of the handler + if ( handler.handler ) { + handleObjIn = handler; + handler = handleObjIn.handler; + } + + // Make sure that the handler has a unique ID, used to find/remove it later + if ( !handler.guid ) { + handler.guid = jQuery.guid++; + } + + // Init the element's event structure and main handler, if this is the first + events = elemData.events; + if ( !events ) { + elemData.events = events = {}; + } + eventHandle = elemData.handle; + if ( !eventHandle ) { + elemData.handle = eventHandle = function( e ) { + // Discard the second event of a jQuery.event.trigger() and + // when an event is called after a page has unloaded + return typeof jQuery !== "undefined" && (!e || jQuery.event.triggered !== e.type) ? + jQuery.event.dispatch.apply( eventHandle.elem, arguments ) : + undefined; + }; + // Add elem as a property of the handle fn to prevent a memory leak with IE non-native events + eventHandle.elem = elem; + } + + // Handle multiple events separated by a space + // jQuery(...).bind("mouseover mouseout", fn); + types = jQuery.trim( hoverHack(types) ).split( " " ); + for ( t = 0; t < types.length; t++ ) { + + tns = rtypenamespace.exec( types[t] ) || []; + type = tns[1]; + namespaces = ( tns[2] || "" ).split( "." ).sort(); + + // If event changes its type, use the special event handlers for the changed type + special = jQuery.event.special[ type ] || {}; + + // If selector defined, determine special event api type, otherwise given type + type = ( selector ? special.delegateType : special.bindType ) || type; + + // Update special based on newly reset type + special = jQuery.event.special[ type ] || {}; + + // handleObj is passed to all event handlers + handleObj = jQuery.extend({ + type: type, + origType: tns[1], + data: data, + handler: handler, + guid: handler.guid, + selector: selector, + quick: quickParse( selector ), + namespace: namespaces.join(".") + }, handleObjIn ); + + // Init the event handler queue if we're the first + handlers = events[ type ]; + if ( !handlers ) { + handlers = events[ type ] = []; + handlers.delegateCount = 0; + + // Only use addEventListener/attachEvent if the special events handler returns false + if ( !special.setup || special.setup.call( elem, data, namespaces, eventHandle ) === false ) { + // Bind the global event handler to the element + if ( elem.addEventListener ) { + elem.addEventListener( type, eventHandle, false ); + + } else if ( elem.attachEvent ) { + elem.attachEvent( "on" + type, eventHandle ); + } + } + } + + if ( special.add ) { + special.add.call( elem, handleObj ); + + if ( !handleObj.handler.guid ) { + handleObj.handler.guid = handler.guid; + } + } + + // Add to the element's handler list, delegates in front + if ( selector ) { + handlers.splice( handlers.delegateCount++, 0, handleObj ); + } else { + handlers.push( handleObj ); + } + + // Keep track of which events have ever been used, for event optimization + jQuery.event.global[ type ] = true; + } + + // Nullify elem to prevent memory leaks in IE + elem = null; + }, + + global: {}, + + // Detach an event or set of events from an element + remove: function( elem, types, handler, selector, mappedTypes ) { + + var elemData = jQuery.hasData( elem ) && jQuery._data( elem ), + t, tns, type, origType, namespaces, origCount, + j, events, special, handle, eventType, handleObj; + + if ( !elemData || !(events = elemData.events) ) { + return; + } + + // Once for each type.namespace in types; type may be omitted + types = jQuery.trim( hoverHack( types || "" ) ).split(" "); + for ( t = 0; t < types.length; t++ ) { + tns = rtypenamespace.exec( types[t] ) || []; + type = origType = tns[1]; + namespaces = tns[2]; + + // Unbind all events (on this namespace, if provided) for the element + if ( !type ) { + for ( type in events ) { + jQuery.event.remove( elem, type + types[ t ], handler, selector, true ); + } + continue; + } + + special = jQuery.event.special[ type ] || {}; + type = ( selector? special.delegateType : special.bindType ) || type; + eventType = events[ type ] || []; + origCount = eventType.length; + namespaces = namespaces ? new RegExp("(^|\\.)" + namespaces.split(".").sort().join("\\.(?:.*\\.)?") + "(\\.|$)") : null; + + // Remove matching events + for ( j = 0; j < eventType.length; j++ ) { + handleObj = eventType[ j ]; + + if ( ( mappedTypes || origType === handleObj.origType ) && + ( !handler || handler.guid === handleObj.guid ) && + ( !namespaces || namespaces.test( handleObj.namespace ) ) && + ( !selector || selector === handleObj.selector || selector === "**" && handleObj.selector ) ) { + eventType.splice( j--, 1 ); + + if ( handleObj.selector ) { + eventType.delegateCount--; + } + if ( special.remove ) { + special.remove.call( elem, handleObj ); + } + } + } + + // Remove generic event handler if we removed something and no more handlers exist + // (avoids potential for endless recursion during removal of special event handlers) + if ( eventType.length === 0 && origCount !== eventType.length ) { + if ( !special.teardown || special.teardown.call( elem, namespaces ) === false ) { + jQuery.removeEvent( elem, type, elemData.handle ); + } + + delete events[ type ]; + } + } + + // Remove the expando if it's no longer used + if ( jQuery.isEmptyObject( events ) ) { + handle = elemData.handle; + if ( handle ) { + handle.elem = null; + } + + // removeData also checks for emptiness and clears the expando if empty + // so use it instead of delete + jQuery.removeData( elem, [ "events", "handle" ], true ); + } + }, + + // Events that are safe to short-circuit if no handlers are attached. + // Native DOM events should not be added, they may have inline handlers. + customEvent: { + "getData": true, + "setData": true, + "changeData": true + }, + + trigger: function( event, data, elem, onlyHandlers ) { + // Don't do events on text and comment nodes + if ( elem && (elem.nodeType === 3 || elem.nodeType === 8) ) { + return; + } + + // Event object or event type + var type = event.type || event, + namespaces = [], + cache, exclusive, i, cur, old, ontype, special, handle, eventPath, bubbleType; + + // focus/blur morphs to focusin/out; ensure we're not firing them right now + if ( rfocusMorph.test( type + jQuery.event.triggered ) ) { + return; + } + + if ( type.indexOf( "!" ) >= 0 ) { + // Exclusive events trigger only for the exact event (no namespaces) + type = type.slice(0, -1); + exclusive = true; + } + + if ( type.indexOf( "." ) >= 0 ) { + // Namespaced trigger; create a regexp to match event type in handle() + namespaces = type.split("."); + type = namespaces.shift(); + namespaces.sort(); + } + + if ( (!elem || jQuery.event.customEvent[ type ]) && !jQuery.event.global[ type ] ) { + // No jQuery handlers for this event type, and it can't have inline handlers + return; + } + + // Caller can pass in an Event, Object, or just an event type string + event = typeof event === "object" ? + // jQuery.Event object + event[ jQuery.expando ] ? event : + // Object literal + new jQuery.Event( type, event ) : + // Just the event type (string) + new jQuery.Event( type ); + + event.type = type; + event.isTrigger = true; + event.exclusive = exclusive; + event.namespace = namespaces.join( "." ); + event.namespace_re = event.namespace? new RegExp("(^|\\.)" + namespaces.join("\\.(?:.*\\.)?") + "(\\.|$)") : null; + ontype = type.indexOf( ":" ) < 0 ? "on" + type : ""; + + // Handle a global trigger + if ( !elem ) { + + // TODO: Stop taunting the data cache; remove global events and always attach to document + cache = jQuery.cache; + for ( i in cache ) { + if ( cache[ i ].events && cache[ i ].events[ type ] ) { + jQuery.event.trigger( event, data, cache[ i ].handle.elem, true ); + } + } + return; + } + + // Clean up the event in case it is being reused + event.result = undefined; + if ( !event.target ) { + event.target = elem; + } + + // Clone any incoming data and prepend the event, creating the handler arg list + data = data != null ? jQuery.makeArray( data ) : []; + data.unshift( event ); + + // Allow special events to draw outside the lines + special = jQuery.event.special[ type ] || {}; + if ( special.trigger && special.trigger.apply( elem, data ) === false ) { + return; + } + + // Determine event propagation path in advance, per W3C events spec (#9951) + // Bubble up to document, then to window; watch for a global ownerDocument var (#9724) + eventPath = [[ elem, special.bindType || type ]]; + if ( !onlyHandlers && !special.noBubble && !jQuery.isWindow( elem ) ) { + + bubbleType = special.delegateType || type; + cur = rfocusMorph.test( bubbleType + type ) ? elem : elem.parentNode; + old = null; + for ( ; cur; cur = cur.parentNode ) { + eventPath.push([ cur, bubbleType ]); + old = cur; + } + + // Only add window if we got to document (e.g., not plain obj or detached DOM) + if ( old && old === elem.ownerDocument ) { + eventPath.push([ old.defaultView || old.parentWindow || window, bubbleType ]); + } + } + + // Fire handlers on the event path + for ( i = 0; i < eventPath.length && !event.isPropagationStopped(); i++ ) { + + cur = eventPath[i][0]; + event.type = eventPath[i][1]; + + handle = ( jQuery._data( cur, "events" ) || {} )[ event.type ] && jQuery._data( cur, "handle" ); + if ( handle ) { + handle.apply( cur, data ); + } + // Note that this is a bare JS function and not a jQuery handler + handle = ontype && cur[ ontype ]; + if ( handle && jQuery.acceptData( cur ) && handle.apply( cur, data ) === false ) { + event.preventDefault(); + } + } + event.type = type; + + // If nobody prevented the default action, do it now + if ( !onlyHandlers && !event.isDefaultPrevented() ) { + + if ( (!special._default || special._default.apply( elem.ownerDocument, data ) === false) && + !(type === "click" && jQuery.nodeName( elem, "a" )) && jQuery.acceptData( elem ) ) { + + // Call a native DOM method on the target with the same name name as the event. + // Can't use an .isFunction() check here because IE6/7 fails that test. + // Don't do default actions on window, that's where global variables be (#6170) + // IE<9 dies on focus/blur to hidden element (#1486) + if ( ontype && elem[ type ] && ((type !== "focus" && type !== "blur") || event.target.offsetWidth !== 0) && !jQuery.isWindow( elem ) ) { + + // Don't re-trigger an onFOO event when we call its FOO() method + old = elem[ ontype ]; + + if ( old ) { + elem[ ontype ] = null; + } + + // Prevent re-triggering of the same event, since we already bubbled it above + jQuery.event.triggered = type; + elem[ type ](); + jQuery.event.triggered = undefined; + + if ( old ) { + elem[ ontype ] = old; + } + } + } + } + + return event.result; + }, + + dispatch: function( event ) { + + // Make a writable jQuery.Event from the native event object + event = jQuery.event.fix( event || window.event ); + + var handlers = ( (jQuery._data( this, "events" ) || {} )[ event.type ] || []), + delegateCount = handlers.delegateCount, + args = [].slice.call( arguments, 0 ), + run_all = !event.exclusive && !event.namespace, + handlerQueue = [], + i, j, cur, jqcur, ret, selMatch, matched, matches, handleObj, sel, related; + + // Use the fix-ed jQuery.Event rather than the (read-only) native event + args[0] = event; + event.delegateTarget = this; + + // Determine handlers that should run if there are delegated events + // Avoid disabled elements in IE (#6911) and non-left-click bubbling in Firefox (#3861) + if ( delegateCount && !event.target.disabled && !(event.button && event.type === "click") ) { + + // Pregenerate a single jQuery object for reuse with .is() + jqcur = jQuery(this); + jqcur.context = this.ownerDocument || this; + + for ( cur = event.target; cur != this; cur = cur.parentNode || this ) { + selMatch = {}; + matches = []; + jqcur[0] = cur; + for ( i = 0; i < delegateCount; i++ ) { + handleObj = handlers[ i ]; + sel = handleObj.selector; + + if ( selMatch[ sel ] === undefined ) { + selMatch[ sel ] = ( + handleObj.quick ? quickIs( cur, handleObj.quick ) : jqcur.is( sel ) + ); + } + if ( selMatch[ sel ] ) { + matches.push( handleObj ); + } + } + if ( matches.length ) { + handlerQueue.push({ elem: cur, matches: matches }); + } + } + } + + // Add the remaining (directly-bound) handlers + if ( handlers.length > delegateCount ) { + handlerQueue.push({ elem: this, matches: handlers.slice( delegateCount ) }); + } + + // Run delegates first; they may want to stop propagation beneath us + for ( i = 0; i < handlerQueue.length && !event.isPropagationStopped(); i++ ) { + matched = handlerQueue[ i ]; + event.currentTarget = matched.elem; + + for ( j = 0; j < matched.matches.length && !event.isImmediatePropagationStopped(); j++ ) { + handleObj = matched.matches[ j ]; + + // Triggered event must either 1) be non-exclusive and have no namespace, or + // 2) have namespace(s) a subset or equal to those in the bound event (both can have no namespace). + if ( run_all || (!event.namespace && !handleObj.namespace) || event.namespace_re && event.namespace_re.test( handleObj.namespace ) ) { + + event.data = handleObj.data; + event.handleObj = handleObj; + + ret = ( (jQuery.event.special[ handleObj.origType ] || {}).handle || handleObj.handler ) + .apply( matched.elem, args ); + + if ( ret !== undefined ) { + event.result = ret; + if ( ret === false ) { + event.preventDefault(); + event.stopPropagation(); + } + } + } + } + } + + return event.result; + }, + + // Includes some event props shared by KeyEvent and MouseEvent + // *** attrChange attrName relatedNode srcElement are not normalized, non-W3C, deprecated, will be removed in 1.8 *** + props: "attrChange attrName relatedNode srcElement altKey bubbles cancelable ctrlKey currentTarget eventPhase metaKey relatedTarget shiftKey target timeStamp view which".split(" "), + + fixHooks: {}, + + keyHooks: { + props: "char charCode key keyCode".split(" "), + filter: function( event, original ) { + + // Add which for key events + if ( event.which == null ) { + event.which = original.charCode != null ? original.charCode : original.keyCode; + } + + return event; + } + }, + + mouseHooks: { + props: "button buttons clientX clientY fromElement offsetX offsetY pageX pageY screenX screenY toElement".split(" "), + filter: function( event, original ) { + var eventDoc, doc, body, + button = original.button, + fromElement = original.fromElement; + + // Calculate pageX/Y if missing and clientX/Y available + if ( event.pageX == null && original.clientX != null ) { + eventDoc = event.target.ownerDocument || document; + doc = eventDoc.documentElement; + body = eventDoc.body; + + event.pageX = original.clientX + ( doc && doc.scrollLeft || body && body.scrollLeft || 0 ) - ( doc && doc.clientLeft || body && body.clientLeft || 0 ); + event.pageY = original.clientY + ( doc && doc.scrollTop || body && body.scrollTop || 0 ) - ( doc && doc.clientTop || body && body.clientTop || 0 ); + } + + // Add relatedTarget, if necessary + if ( !event.relatedTarget && fromElement ) { + event.relatedTarget = fromElement === event.target ? original.toElement : fromElement; + } + + // Add which for click: 1 === left; 2 === middle; 3 === right + // Note: button is not normalized, so don't use it + if ( !event.which && button !== undefined ) { + event.which = ( button & 1 ? 1 : ( button & 2 ? 3 : ( button & 4 ? 2 : 0 ) ) ); + } + + return event; + } + }, + + fix: function( event ) { + if ( event[ jQuery.expando ] ) { + return event; + } + + // Create a writable copy of the event object and normalize some properties + var i, prop, + originalEvent = event, + fixHook = jQuery.event.fixHooks[ event.type ] || {}, + copy = fixHook.props ? this.props.concat( fixHook.props ) : this.props; + + event = jQuery.Event( originalEvent ); + + for ( i = copy.length; i; ) { + prop = copy[ --i ]; + event[ prop ] = originalEvent[ prop ]; + } + + // Fix target property, if necessary (#1925, IE 6/7/8 & Safari2) + if ( !event.target ) { + event.target = originalEvent.srcElement || document; + } + + // Target should not be a text node (#504, Safari) + if ( event.target.nodeType === 3 ) { + event.target = event.target.parentNode; + } + + // For mouse/key events; add metaKey if it's not there (#3368, IE6/7/8) + if ( event.metaKey === undefined ) { + event.metaKey = event.ctrlKey; + } + + return fixHook.filter? fixHook.filter( event, originalEvent ) : event; + }, + + special: { + ready: { + // Make sure the ready event is setup + setup: jQuery.bindReady + }, + + load: { + // Prevent triggered image.load events from bubbling to window.load + noBubble: true + }, + + focus: { + delegateType: "focusin" + }, + blur: { + delegateType: "focusout" + }, + + beforeunload: { + setup: function( data, namespaces, eventHandle ) { + // We only want to do this special case on windows + if ( jQuery.isWindow( this ) ) { + this.onbeforeunload = eventHandle; + } + }, + + teardown: function( namespaces, eventHandle ) { + if ( this.onbeforeunload === eventHandle ) { + this.onbeforeunload = null; + } + } + } + }, + + simulate: function( type, elem, event, bubble ) { + // Piggyback on a donor event to simulate a different one. + // Fake originalEvent to avoid donor's stopPropagation, but if the + // simulated event prevents default then we do the same on the donor. + var e = jQuery.extend( + new jQuery.Event(), + event, + { type: type, + isSimulated: true, + originalEvent: {} + } + ); + if ( bubble ) { + jQuery.event.trigger( e, null, elem ); + } else { + jQuery.event.dispatch.call( elem, e ); + } + if ( e.isDefaultPrevented() ) { + event.preventDefault(); + } + } +}; + +// Some plugins are using, but it's undocumented/deprecated and will be removed. +// The 1.7 special event interface should provide all the hooks needed now. +jQuery.event.handle = jQuery.event.dispatch; + +jQuery.removeEvent = document.removeEventListener ? + function( elem, type, handle ) { + if ( elem.removeEventListener ) { + elem.removeEventListener( type, handle, false ); + } + } : + function( elem, type, handle ) { + if ( elem.detachEvent ) { + elem.detachEvent( "on" + type, handle ); + } + }; + +jQuery.Event = function( src, props ) { + // Allow instantiation without the 'new' keyword + if ( !(this instanceof jQuery.Event) ) { + return new jQuery.Event( src, props ); + } + + // Event object + if ( src && src.type ) { + this.originalEvent = src; + this.type = src.type; + + // Events bubbling up the document may have been marked as prevented + // by a handler lower down the tree; reflect the correct value. + this.isDefaultPrevented = ( src.defaultPrevented || src.returnValue === false || + src.getPreventDefault && src.getPreventDefault() ) ? returnTrue : returnFalse; + + // Event type + } else { + this.type = src; + } + + // Put explicitly provided properties onto the event object + if ( props ) { + jQuery.extend( this, props ); + } + + // Create a timestamp if incoming event doesn't have one + this.timeStamp = src && src.timeStamp || jQuery.now(); + + // Mark it as fixed + this[ jQuery.expando ] = true; +}; + +function returnFalse() { + return false; +} +function returnTrue() { + return true; +} + +// jQuery.Event is based on DOM3 Events as specified by the ECMAScript Language Binding +// http://www.w3.org/TR/2003/WD-DOM-Level-3-Events-20030331/ecma-script-binding.html +jQuery.Event.prototype = { + preventDefault: function() { + this.isDefaultPrevented = returnTrue; + + var e = this.originalEvent; + if ( !e ) { + return; + } + + // if preventDefault exists run it on the original event + if ( e.preventDefault ) { + e.preventDefault(); + + // otherwise set the returnValue property of the original event to false (IE) + } else { + e.returnValue = false; + } + }, + stopPropagation: function() { + this.isPropagationStopped = returnTrue; + + var e = this.originalEvent; + if ( !e ) { + return; + } + // if stopPropagation exists run it on the original event + if ( e.stopPropagation ) { + e.stopPropagation(); + } + // otherwise set the cancelBubble property of the original event to true (IE) + e.cancelBubble = true; + }, + stopImmediatePropagation: function() { + this.isImmediatePropagationStopped = returnTrue; + this.stopPropagation(); + }, + isDefaultPrevented: returnFalse, + isPropagationStopped: returnFalse, + isImmediatePropagationStopped: returnFalse +}; + +// Create mouseenter/leave events using mouseover/out and event-time checks +jQuery.each({ + mouseenter: "mouseover", + mouseleave: "mouseout" +}, function( orig, fix ) { + jQuery.event.special[ orig ] = { + delegateType: fix, + bindType: fix, + + handle: function( event ) { + var target = this, + related = event.relatedTarget, + handleObj = event.handleObj, + selector = handleObj.selector, + ret; + + // For mousenter/leave call the handler if related is outside the target. + // NB: No relatedTarget if the mouse left/entered the browser window + if ( !related || (related !== target && !jQuery.contains( target, related )) ) { + event.type = handleObj.origType; + ret = handleObj.handler.apply( this, arguments ); + event.type = fix; + } + return ret; + } + }; +}); + +// IE submit delegation +if ( !jQuery.support.submitBubbles ) { + + jQuery.event.special.submit = { + setup: function() { + // Only need this for delegated form submit events + if ( jQuery.nodeName( this, "form" ) ) { + return false; + } + + // Lazy-add a submit handler when a descendant form may potentially be submitted + jQuery.event.add( this, "click._submit keypress._submit", function( e ) { + // Node name check avoids a VML-related crash in IE (#9807) + var elem = e.target, + form = jQuery.nodeName( elem, "input" ) || jQuery.nodeName( elem, "button" ) ? elem.form : undefined; + if ( form && !form._submit_attached ) { + jQuery.event.add( form, "submit._submit", function( event ) { + // If form was submitted by the user, bubble the event up the tree + if ( this.parentNode && !event.isTrigger ) { + jQuery.event.simulate( "submit", this.parentNode, event, true ); + } + }); + form._submit_attached = true; + } + }); + // return undefined since we don't need an event listener + }, + + teardown: function() { + // Only need this for delegated form submit events + if ( jQuery.nodeName( this, "form" ) ) { + return false; + } + + // Remove delegated handlers; cleanData eventually reaps submit handlers attached above + jQuery.event.remove( this, "._submit" ); + } + }; +} + +// IE change delegation and checkbox/radio fix +if ( !jQuery.support.changeBubbles ) { + + jQuery.event.special.change = { + + setup: function() { + + if ( rformElems.test( this.nodeName ) ) { + // IE doesn't fire change on a check/radio until blur; trigger it on click + // after a propertychange. Eat the blur-change in special.change.handle. + // This still fires onchange a second time for check/radio after blur. + if ( this.type === "checkbox" || this.type === "radio" ) { + jQuery.event.add( this, "propertychange._change", function( event ) { + if ( event.originalEvent.propertyName === "checked" ) { + this._just_changed = true; + } + }); + jQuery.event.add( this, "click._change", function( event ) { + if ( this._just_changed && !event.isTrigger ) { + this._just_changed = false; + jQuery.event.simulate( "change", this, event, true ); + } + }); + } + return false; + } + // Delegated event; lazy-add a change handler on descendant inputs + jQuery.event.add( this, "beforeactivate._change", function( e ) { + var elem = e.target; + + if ( rformElems.test( elem.nodeName ) && !elem._change_attached ) { + jQuery.event.add( elem, "change._change", function( event ) { + if ( this.parentNode && !event.isSimulated && !event.isTrigger ) { + jQuery.event.simulate( "change", this.parentNode, event, true ); + } + }); + elem._change_attached = true; + } + }); + }, + + handle: function( event ) { + var elem = event.target; + + // Swallow native change events from checkbox/radio, we already triggered them above + if ( this !== elem || event.isSimulated || event.isTrigger || (elem.type !== "radio" && elem.type !== "checkbox") ) { + return event.handleObj.handler.apply( this, arguments ); + } + }, + + teardown: function() { + jQuery.event.remove( this, "._change" ); + + return rformElems.test( this.nodeName ); + } + }; +} + +// Create "bubbling" focus and blur events +if ( !jQuery.support.focusinBubbles ) { + jQuery.each({ focus: "focusin", blur: "focusout" }, function( orig, fix ) { + + // Attach a single capturing handler while someone wants focusin/focusout + var attaches = 0, + handler = function( event ) { + jQuery.event.simulate( fix, event.target, jQuery.event.fix( event ), true ); + }; + + jQuery.event.special[ fix ] = { + setup: function() { + if ( attaches++ === 0 ) { + document.addEventListener( orig, handler, true ); + } + }, + teardown: function() { + if ( --attaches === 0 ) { + document.removeEventListener( orig, handler, true ); + } + } + }; + }); +} + +jQuery.fn.extend({ + + on: function( types, selector, data, fn, /*INTERNAL*/ one ) { + var origFn, type; + + // Types can be a map of types/handlers + if ( typeof types === "object" ) { + // ( types-Object, selector, data ) + if ( typeof selector !== "string" ) { + // ( types-Object, data ) + data = selector; + selector = undefined; + } + for ( type in types ) { + this.on( type, selector, data, types[ type ], one ); + } + return this; + } + + if ( data == null && fn == null ) { + // ( types, fn ) + fn = selector; + data = selector = undefined; + } else if ( fn == null ) { + if ( typeof selector === "string" ) { + // ( types, selector, fn ) + fn = data; + data = undefined; + } else { + // ( types, data, fn ) + fn = data; + data = selector; + selector = undefined; + } + } + if ( fn === false ) { + fn = returnFalse; + } else if ( !fn ) { + return this; + } + + if ( one === 1 ) { + origFn = fn; + fn = function( event ) { + // Can use an empty set, since event contains the info + jQuery().off( event ); + return origFn.apply( this, arguments ); + }; + // Use same guid so caller can remove using origFn + fn.guid = origFn.guid || ( origFn.guid = jQuery.guid++ ); + } + return this.each( function() { + jQuery.event.add( this, types, fn, data, selector ); + }); + }, + one: function( types, selector, data, fn ) { + return this.on.call( this, types, selector, data, fn, 1 ); + }, + off: function( types, selector, fn ) { + if ( types && types.preventDefault && types.handleObj ) { + // ( event ) dispatched jQuery.Event + var handleObj = types.handleObj; + jQuery( types.delegateTarget ).off( + handleObj.namespace? handleObj.type + "." + handleObj.namespace : handleObj.type, + handleObj.selector, + handleObj.handler + ); + return this; + } + if ( typeof types === "object" ) { + // ( types-object [, selector] ) + for ( var type in types ) { + this.off( type, selector, types[ type ] ); + } + return this; + } + if ( selector === false || typeof selector === "function" ) { + // ( types [, fn] ) + fn = selector; + selector = undefined; + } + if ( fn === false ) { + fn = returnFalse; + } + return this.each(function() { + jQuery.event.remove( this, types, fn, selector ); + }); + }, + + bind: function( types, data, fn ) { + return this.on( types, null, data, fn ); + }, + unbind: function( types, fn ) { + return this.off( types, null, fn ); + }, + + live: function( types, data, fn ) { + jQuery( this.context ).on( types, this.selector, data, fn ); + return this; + }, + die: function( types, fn ) { + jQuery( this.context ).off( types, this.selector || "**", fn ); + return this; + }, + + delegate: function( selector, types, data, fn ) { + return this.on( types, selector, data, fn ); + }, + undelegate: function( selector, types, fn ) { + // ( namespace ) or ( selector, types [, fn] ) + return arguments.length == 1? this.off( selector, "**" ) : this.off( types, selector, fn ); + }, + + trigger: function( type, data ) { + return this.each(function() { + jQuery.event.trigger( type, data, this ); + }); + }, + triggerHandler: function( type, data ) { + if ( this[0] ) { + return jQuery.event.trigger( type, data, this[0], true ); + } + }, + + toggle: function( fn ) { + // Save reference to arguments for access in closure + var args = arguments, + guid = fn.guid || jQuery.guid++, + i = 0, + toggler = function( event ) { + // Figure out which function to execute + var lastToggle = ( jQuery._data( this, "lastToggle" + fn.guid ) || 0 ) % i; + jQuery._data( this, "lastToggle" + fn.guid, lastToggle + 1 ); + + // Make sure that clicks stop + event.preventDefault(); + + // and execute the function + return args[ lastToggle ].apply( this, arguments ) || false; + }; + + // link all the functions, so any of them can unbind this click handler + toggler.guid = guid; + while ( i < args.length ) { + args[ i++ ].guid = guid; + } + + return this.click( toggler ); + }, + + hover: function( fnOver, fnOut ) { + return this.mouseenter( fnOver ).mouseleave( fnOut || fnOver ); + } +}); + +jQuery.each( ("blur focus focusin focusout load resize scroll unload click dblclick " + + "mousedown mouseup mousemove mouseover mouseout mouseenter mouseleave " + + "change select submit keydown keypress keyup error contextmenu").split(" "), function( i, name ) { + + // Handle event binding + jQuery.fn[ name ] = function( data, fn ) { + if ( fn == null ) { + fn = data; + data = null; + } + + return arguments.length > 0 ? + this.on( name, null, data, fn ) : + this.trigger( name ); + }; + + if ( jQuery.attrFn ) { + jQuery.attrFn[ name ] = true; + } + + if ( rkeyEvent.test( name ) ) { + jQuery.event.fixHooks[ name ] = jQuery.event.keyHooks; + } + + if ( rmouseEvent.test( name ) ) { + jQuery.event.fixHooks[ name ] = jQuery.event.mouseHooks; + } +}); + + + +/*! + * Sizzle CSS Selector Engine + * Copyright 2011, The Dojo Foundation + * Released under the MIT, BSD, and GPL Licenses. + * More information: http://sizzlejs.com/ + */ +(function(){ + +var chunker = /((?:\((?:\([^()]+\)|[^()]+)+\)|\[(?:\[[^\[\]]*\]|['"][^'"]*['"]|[^\[\]'"]+)+\]|\\.|[^ >+~,(\[\\]+)+|[>+~])(\s*,\s*)?((?:.|\r|\n)*)/g, + expando = "sizcache" + (Math.random() + '').replace('.', ''), + done = 0, + toString = Object.prototype.toString, + hasDuplicate = false, + baseHasDuplicate = true, + rBackslash = /\\/g, + rReturn = /\r\n/g, + rNonWord = /\W/; + +// Here we check if the JavaScript engine is using some sort of +// optimization where it does not always call our comparision +// function. If that is the case, discard the hasDuplicate value. +// Thus far that includes Google Chrome. +[0, 0].sort(function() { + baseHasDuplicate = false; + return 0; +}); + +var Sizzle = function( selector, context, results, seed ) { + results = results || []; + context = context || document; + + var origContext = context; + + if ( context.nodeType !== 1 && context.nodeType !== 9 ) { + return []; + } + + if ( !selector || typeof selector !== "string" ) { + return results; + } + + var m, set, checkSet, extra, ret, cur, pop, i, + prune = true, + contextXML = Sizzle.isXML( context ), + parts = [], + soFar = selector; + + // Reset the position of the chunker regexp (start from head) + do { + chunker.exec( "" ); + m = chunker.exec( soFar ); + + if ( m ) { + soFar = m[3]; + + parts.push( m[1] ); + + if ( m[2] ) { + extra = m[3]; + break; + } + } + } while ( m ); + + if ( parts.length > 1 && origPOS.exec( selector ) ) { + + if ( parts.length === 2 && Expr.relative[ parts[0] ] ) { + set = posProcess( parts[0] + parts[1], context, seed ); + + } else { + set = Expr.relative[ parts[0] ] ? + [ context ] : + Sizzle( parts.shift(), context ); + + while ( parts.length ) { + selector = parts.shift(); + + if ( Expr.relative[ selector ] ) { + selector += parts.shift(); + } + + set = posProcess( selector, set, seed ); + } + } + + } else { + // Take a shortcut and set the context if the root selector is an ID + // (but not if it'll be faster if the inner selector is an ID) + if ( !seed && parts.length > 1 && context.nodeType === 9 && !contextXML && + Expr.match.ID.test(parts[0]) && !Expr.match.ID.test(parts[parts.length - 1]) ) { + + ret = Sizzle.find( parts.shift(), context, contextXML ); + context = ret.expr ? + Sizzle.filter( ret.expr, ret.set )[0] : + ret.set[0]; + } + + if ( context ) { + ret = seed ? + { expr: parts.pop(), set: makeArray(seed) } : + Sizzle.find( parts.pop(), parts.length === 1 && (parts[0] === "~" || parts[0] === "+") && context.parentNode ? context.parentNode : context, contextXML ); + + set = ret.expr ? + Sizzle.filter( ret.expr, ret.set ) : + ret.set; + + if ( parts.length > 0 ) { + checkSet = makeArray( set ); + + } else { + prune = false; + } + + while ( parts.length ) { + cur = parts.pop(); + pop = cur; + + if ( !Expr.relative[ cur ] ) { + cur = ""; + } else { + pop = parts.pop(); + } + + if ( pop == null ) { + pop = context; + } + + Expr.relative[ cur ]( checkSet, pop, contextXML ); + } + + } else { + checkSet = parts = []; + } + } + + if ( !checkSet ) { + checkSet = set; + } + + if ( !checkSet ) { + Sizzle.error( cur || selector ); + } + + if ( toString.call(checkSet) === "[object Array]" ) { + if ( !prune ) { + results.push.apply( results, checkSet ); + + } else if ( context && context.nodeType === 1 ) { + for ( i = 0; checkSet[i] != null; i++ ) { + if ( checkSet[i] && (checkSet[i] === true || checkSet[i].nodeType === 1 && Sizzle.contains(context, checkSet[i])) ) { + results.push( set[i] ); + } + } + + } else { + for ( i = 0; checkSet[i] != null; i++ ) { + if ( checkSet[i] && checkSet[i].nodeType === 1 ) { + results.push( set[i] ); + } + } + } + + } else { + makeArray( checkSet, results ); + } + + if ( extra ) { + Sizzle( extra, origContext, results, seed ); + Sizzle.uniqueSort( results ); + } + + return results; +}; + +Sizzle.uniqueSort = function( results ) { + if ( sortOrder ) { + hasDuplicate = baseHasDuplicate; + results.sort( sortOrder ); + + if ( hasDuplicate ) { + for ( var i = 1; i < results.length; i++ ) { + if ( results[i] === results[ i - 1 ] ) { + results.splice( i--, 1 ); + } + } + } + } + + return results; +}; + +Sizzle.matches = function( expr, set ) { + return Sizzle( expr, null, null, set ); +}; + +Sizzle.matchesSelector = function( node, expr ) { + return Sizzle( expr, null, null, [node] ).length > 0; +}; + +Sizzle.find = function( expr, context, isXML ) { + var set, i, len, match, type, left; + + if ( !expr ) { + return []; + } + + for ( i = 0, len = Expr.order.length; i < len; i++ ) { + type = Expr.order[i]; + + if ( (match = Expr.leftMatch[ type ].exec( expr )) ) { + left = match[1]; + match.splice( 1, 1 ); + + if ( left.substr( left.length - 1 ) !== "\\" ) { + match[1] = (match[1] || "").replace( rBackslash, "" ); + set = Expr.find[ type ]( match, context, isXML ); + + if ( set != null ) { + expr = expr.replace( Expr.match[ type ], "" ); + break; + } + } + } + } + + if ( !set ) { + set = typeof context.getElementsByTagName !== "undefined" ? + context.getElementsByTagName( "*" ) : + []; + } + + return { set: set, expr: expr }; +}; + +Sizzle.filter = function( expr, set, inplace, not ) { + var match, anyFound, + type, found, item, filter, left, + i, pass, + old = expr, + result = [], + curLoop = set, + isXMLFilter = set && set[0] && Sizzle.isXML( set[0] ); + + while ( expr && set.length ) { + for ( type in Expr.filter ) { + if ( (match = Expr.leftMatch[ type ].exec( expr )) != null && match[2] ) { + filter = Expr.filter[ type ]; + left = match[1]; + + anyFound = false; + + match.splice(1,1); + + if ( left.substr( left.length - 1 ) === "\\" ) { + continue; + } + + if ( curLoop === result ) { + result = []; + } + + if ( Expr.preFilter[ type ] ) { + match = Expr.preFilter[ type ]( match, curLoop, inplace, result, not, isXMLFilter ); + + if ( !match ) { + anyFound = found = true; + + } else if ( match === true ) { + continue; + } + } + + if ( match ) { + for ( i = 0; (item = curLoop[i]) != null; i++ ) { + if ( item ) { + found = filter( item, match, i, curLoop ); + pass = not ^ found; + + if ( inplace && found != null ) { + if ( pass ) { + anyFound = true; + + } else { + curLoop[i] = false; + } + + } else if ( pass ) { + result.push( item ); + anyFound = true; + } + } + } + } + + if ( found !== undefined ) { + if ( !inplace ) { + curLoop = result; + } + + expr = expr.replace( Expr.match[ type ], "" ); + + if ( !anyFound ) { + return []; + } + + break; + } + } + } + + // Improper expression + if ( expr === old ) { + if ( anyFound == null ) { + Sizzle.error( expr ); + + } else { + break; + } + } + + old = expr; + } + + return curLoop; +}; + +Sizzle.error = function( msg ) { + throw new Error( "Syntax error, unrecognized expression: " + msg ); +}; + +/** + * Utility function for retreiving the text value of an array of DOM nodes + * @param {Array|Element} elem + */ +var getText = Sizzle.getText = function( elem ) { + var i, node, + nodeType = elem.nodeType, + ret = ""; + + if ( nodeType ) { + if ( nodeType === 1 || nodeType === 9 ) { + // Use textContent || innerText for elements + if ( typeof elem.textContent === 'string' ) { + return elem.textContent; + } else if ( typeof elem.innerText === 'string' ) { + // Replace IE's carriage returns + return elem.innerText.replace( rReturn, '' ); + } else { + // Traverse it's children + for ( elem = elem.firstChild; elem; elem = elem.nextSibling) { + ret += getText( elem ); + } + } + } else if ( nodeType === 3 || nodeType === 4 ) { + return elem.nodeValue; + } + } else { + + // If no nodeType, this is expected to be an array + for ( i = 0; (node = elem[i]); i++ ) { + // Do not traverse comment nodes + if ( node.nodeType !== 8 ) { + ret += getText( node ); + } + } + } + return ret; +}; + +var Expr = Sizzle.selectors = { + order: [ "ID", "NAME", "TAG" ], + + match: { + ID: /#((?:[\w\u00c0-\uFFFF\-]|\\.)+)/, + CLASS: /\.((?:[\w\u00c0-\uFFFF\-]|\\.)+)/, + NAME: /\[name=['"]*((?:[\w\u00c0-\uFFFF\-]|\\.)+)['"]*\]/, + ATTR: /\[\s*((?:[\w\u00c0-\uFFFF\-]|\\.)+)\s*(?:(\S?=)\s*(?:(['"])(.*?)\3|(#?(?:[\w\u00c0-\uFFFF\-]|\\.)*)|)|)\s*\]/, + TAG: /^((?:[\w\u00c0-\uFFFF\*\-]|\\.)+)/, + CHILD: /:(only|nth|last|first)-child(?:\(\s*(even|odd|(?:[+\-]?\d+|(?:[+\-]?\d*)?n\s*(?:[+\-]\s*\d+)?))\s*\))?/, + POS: /:(nth|eq|gt|lt|first|last|even|odd)(?:\((\d*)\))?(?=[^\-]|$)/, + PSEUDO: /:((?:[\w\u00c0-\uFFFF\-]|\\.)+)(?:\((['"]?)((?:\([^\)]+\)|[^\(\)]*)+)\2\))?/ + }, + + leftMatch: {}, + + attrMap: { + "class": "className", + "for": "htmlFor" + }, + + attrHandle: { + href: function( elem ) { + return elem.getAttribute( "href" ); + }, + type: function( elem ) { + return elem.getAttribute( "type" ); + } + }, + + relative: { + "+": function(checkSet, part){ + var isPartStr = typeof part === "string", + isTag = isPartStr && !rNonWord.test( part ), + isPartStrNotTag = isPartStr && !isTag; + + if ( isTag ) { + part = part.toLowerCase(); + } + + for ( var i = 0, l = checkSet.length, elem; i < l; i++ ) { + if ( (elem = checkSet[i]) ) { + while ( (elem = elem.previousSibling) && elem.nodeType !== 1 ) {} + + checkSet[i] = isPartStrNotTag || elem && elem.nodeName.toLowerCase() === part ? + elem || false : + elem === part; + } + } + + if ( isPartStrNotTag ) { + Sizzle.filter( part, checkSet, true ); + } + }, + + ">": function( checkSet, part ) { + var elem, + isPartStr = typeof part === "string", + i = 0, + l = checkSet.length; + + if ( isPartStr && !rNonWord.test( part ) ) { + part = part.toLowerCase(); + + for ( ; i < l; i++ ) { + elem = checkSet[i]; + + if ( elem ) { + var parent = elem.parentNode; + checkSet[i] = parent.nodeName.toLowerCase() === part ? parent : false; + } + } + + } else { + for ( ; i < l; i++ ) { + elem = checkSet[i]; + + if ( elem ) { + checkSet[i] = isPartStr ? + elem.parentNode : + elem.parentNode === part; + } + } + + if ( isPartStr ) { + Sizzle.filter( part, checkSet, true ); + } + } + }, + + "": function(checkSet, part, isXML){ + var nodeCheck, + doneName = done++, + checkFn = dirCheck; + + if ( typeof part === "string" && !rNonWord.test( part ) ) { + part = part.toLowerCase(); + nodeCheck = part; + checkFn = dirNodeCheck; + } + + checkFn( "parentNode", part, doneName, checkSet, nodeCheck, isXML ); + }, + + "~": function( checkSet, part, isXML ) { + var nodeCheck, + doneName = done++, + checkFn = dirCheck; + + if ( typeof part === "string" && !rNonWord.test( part ) ) { + part = part.toLowerCase(); + nodeCheck = part; + checkFn = dirNodeCheck; + } + + checkFn( "previousSibling", part, doneName, checkSet, nodeCheck, isXML ); + } + }, + + find: { + ID: function( match, context, isXML ) { + if ( typeof context.getElementById !== "undefined" && !isXML ) { + var m = context.getElementById(match[1]); + // Check parentNode to catch when Blackberry 4.6 returns + // nodes that are no longer in the document #6963 + return m && m.parentNode ? [m] : []; + } + }, + + NAME: function( match, context ) { + if ( typeof context.getElementsByName !== "undefined" ) { + var ret = [], + results = context.getElementsByName( match[1] ); + + for ( var i = 0, l = results.length; i < l; i++ ) { + if ( results[i].getAttribute("name") === match[1] ) { + ret.push( results[i] ); + } + } + + return ret.length === 0 ? null : ret; + } + }, + + TAG: function( match, context ) { + if ( typeof context.getElementsByTagName !== "undefined" ) { + return context.getElementsByTagName( match[1] ); + } + } + }, + preFilter: { + CLASS: function( match, curLoop, inplace, result, not, isXML ) { + match = " " + match[1].replace( rBackslash, "" ) + " "; + + if ( isXML ) { + return match; + } + + for ( var i = 0, elem; (elem = curLoop[i]) != null; i++ ) { + if ( elem ) { + if ( not ^ (elem.className && (" " + elem.className + " ").replace(/[\t\n\r]/g, " ").indexOf(match) >= 0) ) { + if ( !inplace ) { + result.push( elem ); + } + + } else if ( inplace ) { + curLoop[i] = false; + } + } + } + + return false; + }, + + ID: function( match ) { + return match[1].replace( rBackslash, "" ); + }, + + TAG: function( match, curLoop ) { + return match[1].replace( rBackslash, "" ).toLowerCase(); + }, + + CHILD: function( match ) { + if ( match[1] === "nth" ) { + if ( !match[2] ) { + Sizzle.error( match[0] ); + } + + match[2] = match[2].replace(/^\+|\s*/g, ''); + + // parse equations like 'even', 'odd', '5', '2n', '3n+2', '4n-1', '-n+6' + var test = /(-?)(\d*)(?:n([+\-]?\d*))?/.exec( + match[2] === "even" && "2n" || match[2] === "odd" && "2n+1" || + !/\D/.test( match[2] ) && "0n+" + match[2] || match[2]); + + // calculate the numbers (first)n+(last) including if they are negative + match[2] = (test[1] + (test[2] || 1)) - 0; + match[3] = test[3] - 0; + } + else if ( match[2] ) { + Sizzle.error( match[0] ); + } + + // TODO: Move to normal caching system + match[0] = done++; + + return match; + }, + + ATTR: function( match, curLoop, inplace, result, not, isXML ) { + var name = match[1] = match[1].replace( rBackslash, "" ); + + if ( !isXML && Expr.attrMap[name] ) { + match[1] = Expr.attrMap[name]; + } + + // Handle if an un-quoted value was used + match[4] = ( match[4] || match[5] || "" ).replace( rBackslash, "" ); + + if ( match[2] === "~=" ) { + match[4] = " " + match[4] + " "; + } + + return match; + }, + + PSEUDO: function( match, curLoop, inplace, result, not ) { + if ( match[1] === "not" ) { + // If we're dealing with a complex expression, or a simple one + if ( ( chunker.exec(match[3]) || "" ).length > 1 || /^\w/.test(match[3]) ) { + match[3] = Sizzle(match[3], null, null, curLoop); + + } else { + var ret = Sizzle.filter(match[3], curLoop, inplace, true ^ not); + + if ( !inplace ) { + result.push.apply( result, ret ); + } + + return false; + } + + } else if ( Expr.match.POS.test( match[0] ) || Expr.match.CHILD.test( match[0] ) ) { + return true; + } + + return match; + }, + + POS: function( match ) { + match.unshift( true ); + + return match; + } + }, + + filters: { + enabled: function( elem ) { + return elem.disabled === false && elem.type !== "hidden"; + }, + + disabled: function( elem ) { + return elem.disabled === true; + }, + + checked: function( elem ) { + return elem.checked === true; + }, + + selected: function( elem ) { + // Accessing this property makes selected-by-default + // options in Safari work properly + if ( elem.parentNode ) { + elem.parentNode.selectedIndex; + } + + return elem.selected === true; + }, + + parent: function( elem ) { + return !!elem.firstChild; + }, + + empty: function( elem ) { + return !elem.firstChild; + }, + + has: function( elem, i, match ) { + return !!Sizzle( match[3], elem ).length; + }, + + header: function( elem ) { + return (/h\d/i).test( elem.nodeName ); + }, + + text: function( elem ) { + var attr = elem.getAttribute( "type" ), type = elem.type; + // IE6 and 7 will map elem.type to 'text' for new HTML5 types (search, etc) + // use getAttribute instead to test this case + return elem.nodeName.toLowerCase() === "input" && "text" === type && ( attr === type || attr === null ); + }, + + radio: function( elem ) { + return elem.nodeName.toLowerCase() === "input" && "radio" === elem.type; + }, + + checkbox: function( elem ) { + return elem.nodeName.toLowerCase() === "input" && "checkbox" === elem.type; + }, + + file: function( elem ) { + return elem.nodeName.toLowerCase() === "input" && "file" === elem.type; + }, + + password: function( elem ) { + return elem.nodeName.toLowerCase() === "input" && "password" === elem.type; + }, + + submit: function( elem ) { + var name = elem.nodeName.toLowerCase(); + return (name === "input" || name === "button") && "submit" === elem.type; + }, + + image: function( elem ) { + return elem.nodeName.toLowerCase() === "input" && "image" === elem.type; + }, + + reset: function( elem ) { + var name = elem.nodeName.toLowerCase(); + return (name === "input" || name === "button") && "reset" === elem.type; + }, + + button: function( elem ) { + var name = elem.nodeName.toLowerCase(); + return name === "input" && "button" === elem.type || name === "button"; + }, + + input: function( elem ) { + return (/input|select|textarea|button/i).test( elem.nodeName ); + }, + + focus: function( elem ) { + return elem === elem.ownerDocument.activeElement; + } + }, + setFilters: { + first: function( elem, i ) { + return i === 0; + }, + + last: function( elem, i, match, array ) { + return i === array.length - 1; + }, + + even: function( elem, i ) { + return i % 2 === 0; + }, + + odd: function( elem, i ) { + return i % 2 === 1; + }, + + lt: function( elem, i, match ) { + return i < match[3] - 0; + }, + + gt: function( elem, i, match ) { + return i > match[3] - 0; + }, + + nth: function( elem, i, match ) { + return match[3] - 0 === i; + }, + + eq: function( elem, i, match ) { + return match[3] - 0 === i; + } + }, + filter: { + PSEUDO: function( elem, match, i, array ) { + var name = match[1], + filter = Expr.filters[ name ]; + + if ( filter ) { + return filter( elem, i, match, array ); + + } else if ( name === "contains" ) { + return (elem.textContent || elem.innerText || getText([ elem ]) || "").indexOf(match[3]) >= 0; + + } else if ( name === "not" ) { + var not = match[3]; + + for ( var j = 0, l = not.length; j < l; j++ ) { + if ( not[j] === elem ) { + return false; + } + } + + return true; + + } else { + Sizzle.error( name ); + } + }, + + CHILD: function( elem, match ) { + var first, last, + doneName, parent, cache, + count, diff, + type = match[1], + node = elem; + + switch ( type ) { + case "only": + case "first": + while ( (node = node.previousSibling) ) { + if ( node.nodeType === 1 ) { + return false; + } + } + + if ( type === "first" ) { + return true; + } + + node = elem; + + case "last": + while ( (node = node.nextSibling) ) { + if ( node.nodeType === 1 ) { + return false; + } + } + + return true; + + case "nth": + first = match[2]; + last = match[3]; + + if ( first === 1 && last === 0 ) { + return true; + } + + doneName = match[0]; + parent = elem.parentNode; + + if ( parent && (parent[ expando ] !== doneName || !elem.nodeIndex) ) { + count = 0; + + for ( node = parent.firstChild; node; node = node.nextSibling ) { + if ( node.nodeType === 1 ) { + node.nodeIndex = ++count; + } + } + + parent[ expando ] = doneName; + } + + diff = elem.nodeIndex - last; + + if ( first === 0 ) { + return diff === 0; + + } else { + return ( diff % first === 0 && diff / first >= 0 ); + } + } + }, + + ID: function( elem, match ) { + return elem.nodeType === 1 && elem.getAttribute("id") === match; + }, + + TAG: function( elem, match ) { + return (match === "*" && elem.nodeType === 1) || !!elem.nodeName && elem.nodeName.toLowerCase() === match; + }, + + CLASS: function( elem, match ) { + return (" " + (elem.className || elem.getAttribute("class")) + " ") + .indexOf( match ) > -1; + }, + + ATTR: function( elem, match ) { + var name = match[1], + result = Sizzle.attr ? + Sizzle.attr( elem, name ) : + Expr.attrHandle[ name ] ? + Expr.attrHandle[ name ]( elem ) : + elem[ name ] != null ? + elem[ name ] : + elem.getAttribute( name ), + value = result + "", + type = match[2], + check = match[4]; + + return result == null ? + type === "!=" : + !type && Sizzle.attr ? + result != null : + type === "=" ? + value === check : + type === "*=" ? + value.indexOf(check) >= 0 : + type === "~=" ? + (" " + value + " ").indexOf(check) >= 0 : + !check ? + value && result !== false : + type === "!=" ? + value !== check : + type === "^=" ? + value.indexOf(check) === 0 : + type === "$=" ? + value.substr(value.length - check.length) === check : + type === "|=" ? + value === check || value.substr(0, check.length + 1) === check + "-" : + false; + }, + + POS: function( elem, match, i, array ) { + var name = match[2], + filter = Expr.setFilters[ name ]; + + if ( filter ) { + return filter( elem, i, match, array ); + } + } + } +}; + +var origPOS = Expr.match.POS, + fescape = function(all, num){ + return "\\" + (num - 0 + 1); + }; + +for ( var type in Expr.match ) { + Expr.match[ type ] = new RegExp( Expr.match[ type ].source + (/(?![^\[]*\])(?![^\(]*\))/.source) ); + Expr.leftMatch[ type ] = new RegExp( /(^(?:.|\r|\n)*?)/.source + Expr.match[ type ].source.replace(/\\(\d+)/g, fescape) ); +} + +var makeArray = function( array, results ) { + array = Array.prototype.slice.call( array, 0 ); + + if ( results ) { + results.push.apply( results, array ); + return results; + } + + return array; +}; + +// Perform a simple check to determine if the browser is capable of +// converting a NodeList to an array using builtin methods. +// Also verifies that the returned array holds DOM nodes +// (which is not the case in the Blackberry browser) +try { + Array.prototype.slice.call( document.documentElement.childNodes, 0 )[0].nodeType; + +// Provide a fallback method if it does not work +} catch( e ) { + makeArray = function( array, results ) { + var i = 0, + ret = results || []; + + if ( toString.call(array) === "[object Array]" ) { + Array.prototype.push.apply( ret, array ); + + } else { + if ( typeof array.length === "number" ) { + for ( var l = array.length; i < l; i++ ) { + ret.push( array[i] ); + } + + } else { + for ( ; array[i]; i++ ) { + ret.push( array[i] ); + } + } + } + + return ret; + }; +} + +var sortOrder, siblingCheck; + +if ( document.documentElement.compareDocumentPosition ) { + sortOrder = function( a, b ) { + if ( a === b ) { + hasDuplicate = true; + return 0; + } + + if ( !a.compareDocumentPosition || !b.compareDocumentPosition ) { + return a.compareDocumentPosition ? -1 : 1; + } + + return a.compareDocumentPosition(b) & 4 ? -1 : 1; + }; + +} else { + sortOrder = function( a, b ) { + // The nodes are identical, we can exit early + if ( a === b ) { + hasDuplicate = true; + return 0; + + // Fallback to using sourceIndex (in IE) if it's available on both nodes + } else if ( a.sourceIndex && b.sourceIndex ) { + return a.sourceIndex - b.sourceIndex; + } + + var al, bl, + ap = [], + bp = [], + aup = a.parentNode, + bup = b.parentNode, + cur = aup; + + // If the nodes are siblings (or identical) we can do a quick check + if ( aup === bup ) { + return siblingCheck( a, b ); + + // If no parents were found then the nodes are disconnected + } else if ( !aup ) { + return -1; + + } else if ( !bup ) { + return 1; + } + + // Otherwise they're somewhere else in the tree so we need + // to build up a full list of the parentNodes for comparison + while ( cur ) { + ap.unshift( cur ); + cur = cur.parentNode; + } + + cur = bup; + + while ( cur ) { + bp.unshift( cur ); + cur = cur.parentNode; + } + + al = ap.length; + bl = bp.length; + + // Start walking down the tree looking for a discrepancy + for ( var i = 0; i < al && i < bl; i++ ) { + if ( ap[i] !== bp[i] ) { + return siblingCheck( ap[i], bp[i] ); + } + } + + // We ended someplace up the tree so do a sibling check + return i === al ? + siblingCheck( a, bp[i], -1 ) : + siblingCheck( ap[i], b, 1 ); + }; + + siblingCheck = function( a, b, ret ) { + if ( a === b ) { + return ret; + + var cur = a.nextSibling; + } + + while ( cur ) { + if ( cur === b ) { + return -1; + } + + cur = cur.nextSibling; + } + + return 1; + }; +} + +// Check to see if the browser returns elements by name when +// querying by getElementById (and provide a workaround) +(function(){ + // We're going to inject a fake input element with a specified name + var form = document.createElement("div"), + id = "script" + (new Date()).getTime(), + root = document.documentElement; + + form.innerHTML = "<a name='" + id + "'/>"; + + // Inject it into the root element, check its status, and remove it quickly + root.insertBefore( form, root.firstChild ); + + // The workaround has to do additional checks after a getElementById + // Which slows things down for other browsers (hence the branching) + if ( document.getElementById( id ) ) { + Expr.find.ID = function( match, context, isXML ) { + if ( typeof context.getElementById !== "undefined" && !isXML ) { + var m = context.getElementById(match[1]); + + return m ? + m.id === match[1] || typeof m.getAttributeNode !== "undefined" && m.getAttributeNode("id").nodeValue === match[1] ? + [m] : + undefined : + []; + } + }; + + Expr.filter.ID = function( elem, match ) { + var node = typeof elem.getAttributeNode !== "undefined" && elem.getAttributeNode("id"); + + return elem.nodeType === 1 && node && node.nodeValue === match; + }; + } + + root.removeChild( form ); + + // release memory in IE + root = form = null; +})(); + +(function(){ + // Check to see if the browser returns only elements + // when doing getElementsByTagName("*") + + // Create a fake element + var div = document.createElement("div"); + div.appendChild( document.createComment("") ); + + // Make sure no comments are found + if ( div.getElementsByTagName("*").length > 0 ) { + Expr.find.TAG = function( match, context ) { + var results = context.getElementsByTagName( match[1] ); + + // Filter out possible comments + if ( match[1] === "*" ) { + var tmp = []; + + for ( var i = 0; results[i]; i++ ) { + if ( results[i].nodeType === 1 ) { + tmp.push( results[i] ); + } + } + + results = tmp; + } + + return results; + }; + } + + // Check to see if an attribute returns normalized href attributes + div.innerHTML = "<a href='#'></a>"; + + if ( div.firstChild && typeof div.firstChild.getAttribute !== "undefined" && + div.firstChild.getAttribute("href") !== "#" ) { + + Expr.attrHandle.href = function( elem ) { + return elem.getAttribute( "href", 2 ); + }; + } + + // release memory in IE + div = null; +})(); + +if ( document.querySelectorAll ) { + (function(){ + var oldSizzle = Sizzle, + div = document.createElement("div"), + id = "__sizzle__"; + + div.innerHTML = "<p class='TEST'></p>"; + + // Safari can't handle uppercase or unicode characters when + // in quirks mode. + if ( div.querySelectorAll && div.querySelectorAll(".TEST").length === 0 ) { + return; + } + + Sizzle = function( query, context, extra, seed ) { + context = context || document; + + // Only use querySelectorAll on non-XML documents + // (ID selectors don't work in non-HTML documents) + if ( !seed && !Sizzle.isXML(context) ) { + // See if we find a selector to speed up + var match = /^(\w+$)|^\.([\w\-]+$)|^#([\w\-]+$)/.exec( query ); + + if ( match && (context.nodeType === 1 || context.nodeType === 9) ) { + // Speed-up: Sizzle("TAG") + if ( match[1] ) { + return makeArray( context.getElementsByTagName( query ), extra ); + + // Speed-up: Sizzle(".CLASS") + } else if ( match[2] && Expr.find.CLASS && context.getElementsByClassName ) { + return makeArray( context.getElementsByClassName( match[2] ), extra ); + } + } + + if ( context.nodeType === 9 ) { + // Speed-up: Sizzle("body") + // The body element only exists once, optimize finding it + if ( query === "body" && context.body ) { + return makeArray( [ context.body ], extra ); + + // Speed-up: Sizzle("#ID") + } else if ( match && match[3] ) { + var elem = context.getElementById( match[3] ); + + // Check parentNode to catch when Blackberry 4.6 returns + // nodes that are no longer in the document #6963 + if ( elem && elem.parentNode ) { + // Handle the case where IE and Opera return items + // by name instead of ID + if ( elem.id === match[3] ) { + return makeArray( [ elem ], extra ); + } + + } else { + return makeArray( [], extra ); + } + } + + try { + return makeArray( context.querySelectorAll(query), extra ); + } catch(qsaError) {} + + // qSA works strangely on Element-rooted queries + // We can work around this by specifying an extra ID on the root + // and working up from there (Thanks to Andrew Dupont for the technique) + // IE 8 doesn't work on object elements + } else if ( context.nodeType === 1 && context.nodeName.toLowerCase() !== "object" ) { + var oldContext = context, + old = context.getAttribute( "id" ), + nid = old || id, + hasParent = context.parentNode, + relativeHierarchySelector = /^\s*[+~]/.test( query ); + + if ( !old ) { + context.setAttribute( "id", nid ); + } else { + nid = nid.replace( /'/g, "\\$&" ); + } + if ( relativeHierarchySelector && hasParent ) { + context = context.parentNode; + } + + try { + if ( !relativeHierarchySelector || hasParent ) { + return makeArray( context.querySelectorAll( "[id='" + nid + "'] " + query ), extra ); + } + + } catch(pseudoError) { + } finally { + if ( !old ) { + oldContext.removeAttribute( "id" ); + } + } + } + } + + return oldSizzle(query, context, extra, seed); + }; + + for ( var prop in oldSizzle ) { + Sizzle[ prop ] = oldSizzle[ prop ]; + } + + // release memory in IE + div = null; + })(); +} + +(function(){ + var html = document.documentElement, + matches = html.matchesSelector || html.mozMatchesSelector || html.webkitMatchesSelector || html.msMatchesSelector; + + if ( matches ) { + // Check to see if it's possible to do matchesSelector + // on a disconnected node (IE 9 fails this) + var disconnectedMatch = !matches.call( document.createElement( "div" ), "div" ), + pseudoWorks = false; + + try { + // This should fail with an exception + // Gecko does not error, returns false instead + matches.call( document.documentElement, "[test!='']:sizzle" ); + + } catch( pseudoError ) { + pseudoWorks = true; + } + + Sizzle.matchesSelector = function( node, expr ) { + // Make sure that attribute selectors are quoted + expr = expr.replace(/\=\s*([^'"\]]*)\s*\]/g, "='$1']"); + + if ( !Sizzle.isXML( node ) ) { + try { + if ( pseudoWorks || !Expr.match.PSEUDO.test( expr ) && !/!=/.test( expr ) ) { + var ret = matches.call( node, expr ); + + // IE 9's matchesSelector returns false on disconnected nodes + if ( ret || !disconnectedMatch || + // As well, disconnected nodes are said to be in a document + // fragment in IE 9, so check for that + node.document && node.document.nodeType !== 11 ) { + return ret; + } + } + } catch(e) {} + } + + return Sizzle(expr, null, null, [node]).length > 0; + }; + } +})(); + +(function(){ + var div = document.createElement("div"); + + div.innerHTML = "<div class='test e'></div><div class='test'></div>"; + + // Opera can't find a second classname (in 9.6) + // Also, make sure that getElementsByClassName actually exists + if ( !div.getElementsByClassName || div.getElementsByClassName("e").length === 0 ) { + return; + } + + // Safari caches class attributes, doesn't catch changes (in 3.2) + div.lastChild.className = "e"; + + if ( div.getElementsByClassName("e").length === 1 ) { + return; + } + + Expr.order.splice(1, 0, "CLASS"); + Expr.find.CLASS = function( match, context, isXML ) { + if ( typeof context.getElementsByClassName !== "undefined" && !isXML ) { + return context.getElementsByClassName(match[1]); + } + }; + + // release memory in IE + div = null; +})(); + +function dirNodeCheck( dir, cur, doneName, checkSet, nodeCheck, isXML ) { + for ( var i = 0, l = checkSet.length; i < l; i++ ) { + var elem = checkSet[i]; + + if ( elem ) { + var match = false; + + elem = elem[dir]; + + while ( elem ) { + if ( elem[ expando ] === doneName ) { + match = checkSet[elem.sizset]; + break; + } + + if ( elem.nodeType === 1 && !isXML ){ + elem[ expando ] = doneName; + elem.sizset = i; + } + + if ( elem.nodeName.toLowerCase() === cur ) { + match = elem; + break; + } + + elem = elem[dir]; + } + + checkSet[i] = match; + } + } +} + +function dirCheck( dir, cur, doneName, checkSet, nodeCheck, isXML ) { + for ( var i = 0, l = checkSet.length; i < l; i++ ) { + var elem = checkSet[i]; + + if ( elem ) { + var match = false; + + elem = elem[dir]; + + while ( elem ) { + if ( elem[ expando ] === doneName ) { + match = checkSet[elem.sizset]; + break; + } + + if ( elem.nodeType === 1 ) { + if ( !isXML ) { + elem[ expando ] = doneName; + elem.sizset = i; + } + + if ( typeof cur !== "string" ) { + if ( elem === cur ) { + match = true; + break; + } + + } else if ( Sizzle.filter( cur, [elem] ).length > 0 ) { + match = elem; + break; + } + } + + elem = elem[dir]; + } + + checkSet[i] = match; + } + } +} + +if ( document.documentElement.contains ) { + Sizzle.contains = function( a, b ) { + return a !== b && (a.contains ? a.contains(b) : true); + }; + +} else if ( document.documentElement.compareDocumentPosition ) { + Sizzle.contains = function( a, b ) { + return !!(a.compareDocumentPosition(b) & 16); + }; + +} else { + Sizzle.contains = function() { + return false; + }; +} + +Sizzle.isXML = function( elem ) { + // documentElement is verified for cases where it doesn't yet exist + // (such as loading iframes in IE - #4833) + var documentElement = (elem ? elem.ownerDocument || elem : 0).documentElement; + + return documentElement ? documentElement.nodeName !== "HTML" : false; +}; + +var posProcess = function( selector, context, seed ) { + var match, + tmpSet = [], + later = "", + root = context.nodeType ? [context] : context; + + // Position selectors must be done after the filter + // And so must :not(positional) so we move all PSEUDOs to the end + while ( (match = Expr.match.PSEUDO.exec( selector )) ) { + later += match[0]; + selector = selector.replace( Expr.match.PSEUDO, "" ); + } + + selector = Expr.relative[selector] ? selector + "*" : selector; + + for ( var i = 0, l = root.length; i < l; i++ ) { + Sizzle( selector, root[i], tmpSet, seed ); + } + + return Sizzle.filter( later, tmpSet ); +}; + +// EXPOSE +// Override sizzle attribute retrieval +Sizzle.attr = jQuery.attr; +Sizzle.selectors.attrMap = {}; +jQuery.find = Sizzle; +jQuery.expr = Sizzle.selectors; +jQuery.expr[":"] = jQuery.expr.filters; +jQuery.unique = Sizzle.uniqueSort; +jQuery.text = Sizzle.getText; +jQuery.isXMLDoc = Sizzle.isXML; +jQuery.contains = Sizzle.contains; + + +})(); + + +var runtil = /Until$/, + rparentsprev = /^(?:parents|prevUntil|prevAll)/, + // Note: This RegExp should be improved, or likely pulled from Sizzle + rmultiselector = /,/, + isSimple = /^.[^:#\[\.,]*$/, + slice = Array.prototype.slice, + POS = jQuery.expr.match.POS, + // methods guaranteed to produce a unique set when starting from a unique set + guaranteedUnique = { + children: true, + contents: true, + next: true, + prev: true + }; + +jQuery.fn.extend({ + find: function( selector ) { + var self = this, + i, l; + + if ( typeof selector !== "string" ) { + return jQuery( selector ).filter(function() { + for ( i = 0, l = self.length; i < l; i++ ) { + if ( jQuery.contains( self[ i ], this ) ) { + return true; + } + } + }); + } + + var ret = this.pushStack( "", "find", selector ), + length, n, r; + + for ( i = 0, l = this.length; i < l; i++ ) { + length = ret.length; + jQuery.find( selector, this[i], ret ); + + if ( i > 0 ) { + // Make sure that the results are unique + for ( n = length; n < ret.length; n++ ) { + for ( r = 0; r < length; r++ ) { + if ( ret[r] === ret[n] ) { + ret.splice(n--, 1); + break; + } + } + } + } + } + + return ret; + }, + + has: function( target ) { + var targets = jQuery( target ); + return this.filter(function() { + for ( var i = 0, l = targets.length; i < l; i++ ) { + if ( jQuery.contains( this, targets[i] ) ) { + return true; + } + } + }); + }, + + not: function( selector ) { + return this.pushStack( winnow(this, selector, false), "not", selector); + }, + + filter: function( selector ) { + return this.pushStack( winnow(this, selector, true), "filter", selector ); + }, + + is: function( selector ) { + return !!selector && ( + typeof selector === "string" ? + // If this is a positional selector, check membership in the returned set + // so $("p:first").is("p:last") won't return true for a doc with two "p". + POS.test( selector ) ? + jQuery( selector, this.context ).index( this[0] ) >= 0 : + jQuery.filter( selector, this ).length > 0 : + this.filter( selector ).length > 0 ); + }, + + closest: function( selectors, context ) { + var ret = [], i, l, cur = this[0]; + + // Array (deprecated as of jQuery 1.7) + if ( jQuery.isArray( selectors ) ) { + var level = 1; + + while ( cur && cur.ownerDocument && cur !== context ) { + for ( i = 0; i < selectors.length; i++ ) { + + if ( jQuery( cur ).is( selectors[ i ] ) ) { + ret.push({ selector: selectors[ i ], elem: cur, level: level }); + } + } + + cur = cur.parentNode; + level++; + } + + return ret; + } + + // String + var pos = POS.test( selectors ) || typeof selectors !== "string" ? + jQuery( selectors, context || this.context ) : + 0; + + for ( i = 0, l = this.length; i < l; i++ ) { + cur = this[i]; + + while ( cur ) { + if ( pos ? pos.index(cur) > -1 : jQuery.find.matchesSelector(cur, selectors) ) { + ret.push( cur ); + break; + + } else { + cur = cur.parentNode; + if ( !cur || !cur.ownerDocument || cur === context || cur.nodeType === 11 ) { + break; + } + } + } + } + + ret = ret.length > 1 ? jQuery.unique( ret ) : ret; + + return this.pushStack( ret, "closest", selectors ); + }, + + // Determine the position of an element within + // the matched set of elements + index: function( elem ) { + + // No argument, return index in parent + if ( !elem ) { + return ( this[0] && this[0].parentNode ) ? this.prevAll().length : -1; + } + + // index in selector + if ( typeof elem === "string" ) { + return jQuery.inArray( this[0], jQuery( elem ) ); + } + + // Locate the position of the desired element + return jQuery.inArray( + // If it receives a jQuery object, the first element is used + elem.jquery ? elem[0] : elem, this ); + }, + + add: function( selector, context ) { + var set = typeof selector === "string" ? + jQuery( selector, context ) : + jQuery.makeArray( selector && selector.nodeType ? [ selector ] : selector ), + all = jQuery.merge( this.get(), set ); + + return this.pushStack( isDisconnected( set[0] ) || isDisconnected( all[0] ) ? + all : + jQuery.unique( all ) ); + }, + + andSelf: function() { + return this.add( this.prevObject ); + } +}); + +// A painfully simple check to see if an element is disconnected +// from a document (should be improved, where feasible). +function isDisconnected( node ) { + return !node || !node.parentNode || node.parentNode.nodeType === 11; +} + +jQuery.each({ + parent: function( elem ) { + var parent = elem.parentNode; + return parent && parent.nodeType !== 11 ? parent : null; + }, + parents: function( elem ) { + return jQuery.dir( elem, "parentNode" ); + }, + parentsUntil: function( elem, i, until ) { + return jQuery.dir( elem, "parentNode", until ); + }, + next: function( elem ) { + return jQuery.nth( elem, 2, "nextSibling" ); + }, + prev: function( elem ) { + return jQuery.nth( elem, 2, "previousSibling" ); + }, + nextAll: function( elem ) { + return jQuery.dir( elem, "nextSibling" ); + }, + prevAll: function( elem ) { + return jQuery.dir( elem, "previousSibling" ); + }, + nextUntil: function( elem, i, until ) { + return jQuery.dir( elem, "nextSibling", until ); + }, + prevUntil: function( elem, i, until ) { + return jQuery.dir( elem, "previousSibling", until ); + }, + siblings: function( elem ) { + return jQuery.sibling( elem.parentNode.firstChild, elem ); + }, + children: function( elem ) { + return jQuery.sibling( elem.firstChild ); + }, + contents: function( elem ) { + return jQuery.nodeName( elem, "iframe" ) ? + elem.contentDocument || elem.contentWindow.document : + jQuery.makeArray( elem.childNodes ); + } +}, function( name, fn ) { + jQuery.fn[ name ] = function( until, selector ) { + var ret = jQuery.map( this, fn, until ); + + if ( !runtil.test( name ) ) { + selector = until; + } + + if ( selector && typeof selector === "string" ) { + ret = jQuery.filter( selector, ret ); + } + + ret = this.length > 1 && !guaranteedUnique[ name ] ? jQuery.unique( ret ) : ret; + + if ( (this.length > 1 || rmultiselector.test( selector )) && rparentsprev.test( name ) ) { + ret = ret.reverse(); + } + + return this.pushStack( ret, name, slice.call( arguments ).join(",") ); + }; +}); + +jQuery.extend({ + filter: function( expr, elems, not ) { + if ( not ) { + expr = ":not(" + expr + ")"; + } + + return elems.length === 1 ? + jQuery.find.matchesSelector(elems[0], expr) ? [ elems[0] ] : [] : + jQuery.find.matches(expr, elems); + }, + + dir: function( elem, dir, until ) { + var matched = [], + cur = elem[ dir ]; + + while ( cur && cur.nodeType !== 9 && (until === undefined || cur.nodeType !== 1 || !jQuery( cur ).is( until )) ) { + if ( cur.nodeType === 1 ) { + matched.push( cur ); + } + cur = cur[dir]; + } + return matched; + }, + + nth: function( cur, result, dir, elem ) { + result = result || 1; + var num = 0; + + for ( ; cur; cur = cur[dir] ) { + if ( cur.nodeType === 1 && ++num === result ) { + break; + } + } + + return cur; + }, + + sibling: function( n, elem ) { + var r = []; + + for ( ; n; n = n.nextSibling ) { + if ( n.nodeType === 1 && n !== elem ) { + r.push( n ); + } + } + + return r; + } +}); + +// Implement the identical functionality for filter and not +function winnow( elements, qualifier, keep ) { + + // Can't pass null or undefined to indexOf in Firefox 4 + // Set to 0 to skip string check + qualifier = qualifier || 0; + + if ( jQuery.isFunction( qualifier ) ) { + return jQuery.grep(elements, function( elem, i ) { + var retVal = !!qualifier.call( elem, i, elem ); + return retVal === keep; + }); + + } else if ( qualifier.nodeType ) { + return jQuery.grep(elements, function( elem, i ) { + return ( elem === qualifier ) === keep; + }); + + } else if ( typeof qualifier === "string" ) { + var filtered = jQuery.grep(elements, function( elem ) { + return elem.nodeType === 1; + }); + + if ( isSimple.test( qualifier ) ) { + return jQuery.filter(qualifier, filtered, !keep); + } else { + qualifier = jQuery.filter( qualifier, filtered ); + } + } + + return jQuery.grep(elements, function( elem, i ) { + return ( jQuery.inArray( elem, qualifier ) >= 0 ) === keep; + }); +} + + + + +function createSafeFragment( document ) { + var list = nodeNames.split( "|" ), + safeFrag = document.createDocumentFragment(); + + if ( safeFrag.createElement ) { + while ( list.length ) { + safeFrag.createElement( + list.pop() + ); + } + } + return safeFrag; +} + +var nodeNames = "abbr|article|aside|audio|canvas|datalist|details|figcaption|figure|footer|" + + "header|hgroup|mark|meter|nav|output|progress|section|summary|time|video", + rinlinejQuery = / jQuery\d+="(?:\d+|null)"/g, + rleadingWhitespace = /^\s+/, + rxhtmlTag = /<(?!area|br|col|embed|hr|img|input|link|meta|param)(([\w:]+)[^>]*)\/>/ig, + rtagName = /<([\w:]+)/, + rtbody = /<tbody/i, + rhtml = /<|&#?\w+;/, + rnoInnerhtml = /<(?:script|style)/i, + rnocache = /<(?:script|object|embed|option|style)/i, + rnoshimcache = new RegExp("<(?:" + nodeNames + ")", "i"), + // checked="checked" or checked + rchecked = /checked\s*(?:[^=]|=\s*.checked.)/i, + rscriptType = /\/(java|ecma)script/i, + rcleanScript = /^\s*<!(?:\[CDATA\[|\-\-)/, + wrapMap = { + option: [ 1, "<select multiple='multiple'>", "</select>" ], + legend: [ 1, "<fieldset>", "</fieldset>" ], + thead: [ 1, "<table>", "</table>" ], + tr: [ 2, "<table><tbody>", "</tbody></table>" ], + td: [ 3, "<table><tbody><tr>", "</tr></tbody></table>" ], + col: [ 2, "<table><tbody></tbody><colgroup>", "</colgroup></table>" ], + area: [ 1, "<map>", "</map>" ], + _default: [ 0, "", "" ] + }, + safeFragment = createSafeFragment( document ); + +wrapMap.optgroup = wrapMap.option; +wrapMap.tbody = wrapMap.tfoot = wrapMap.colgroup = wrapMap.caption = wrapMap.thead; +wrapMap.th = wrapMap.td; + +// IE can't serialize <link> and <script> tags normally +if ( !jQuery.support.htmlSerialize ) { + wrapMap._default = [ 1, "div<div>", "</div>" ]; +} + +jQuery.fn.extend({ + text: function( text ) { + if ( jQuery.isFunction(text) ) { + return this.each(function(i) { + var self = jQuery( this ); + + self.text( text.call(this, i, self.text()) ); + }); + } + + if ( typeof text !== "object" && text !== undefined ) { + return this.empty().append( (this[0] && this[0].ownerDocument || document).createTextNode( text ) ); + } + + return jQuery.text( this ); + }, + + wrapAll: function( html ) { + if ( jQuery.isFunction( html ) ) { + return this.each(function(i) { + jQuery(this).wrapAll( html.call(this, i) ); + }); + } + + if ( this[0] ) { + // The elements to wrap the target around + var wrap = jQuery( html, this[0].ownerDocument ).eq(0).clone(true); + + if ( this[0].parentNode ) { + wrap.insertBefore( this[0] ); + } + + wrap.map(function() { + var elem = this; + + while ( elem.firstChild && elem.firstChild.nodeType === 1 ) { + elem = elem.firstChild; + } + + return elem; + }).append( this ); + } + + return this; + }, + + wrapInner: function( html ) { + if ( jQuery.isFunction( html ) ) { + return this.each(function(i) { + jQuery(this).wrapInner( html.call(this, i) ); + }); + } + + return this.each(function() { + var self = jQuery( this ), + contents = self.contents(); + + if ( contents.length ) { + contents.wrapAll( html ); + + } else { + self.append( html ); + } + }); + }, + + wrap: function( html ) { + var isFunction = jQuery.isFunction( html ); + + return this.each(function(i) { + jQuery( this ).wrapAll( isFunction ? html.call(this, i) : html ); + }); + }, + + unwrap: function() { + return this.parent().each(function() { + if ( !jQuery.nodeName( this, "body" ) ) { + jQuery( this ).replaceWith( this.childNodes ); + } + }).end(); + }, + + append: function() { + return this.domManip(arguments, true, function( elem ) { + if ( this.nodeType === 1 ) { + this.appendChild( elem ); + } + }); + }, + + prepend: function() { + return this.domManip(arguments, true, function( elem ) { + if ( this.nodeType === 1 ) { + this.insertBefore( elem, this.firstChild ); + } + }); + }, + + before: function() { + if ( this[0] && this[0].parentNode ) { + return this.domManip(arguments, false, function( elem ) { + this.parentNode.insertBefore( elem, this ); + }); + } else if ( arguments.length ) { + var set = jQuery.clean( arguments ); + set.push.apply( set, this.toArray() ); + return this.pushStack( set, "before", arguments ); + } + }, + + after: function() { + if ( this[0] && this[0].parentNode ) { + return this.domManip(arguments, false, function( elem ) { + this.parentNode.insertBefore( elem, this.nextSibling ); + }); + } else if ( arguments.length ) { + var set = this.pushStack( this, "after", arguments ); + set.push.apply( set, jQuery.clean(arguments) ); + return set; + } + }, + + // keepData is for internal use only--do not document + remove: function( selector, keepData ) { + for ( var i = 0, elem; (elem = this[i]) != null; i++ ) { + if ( !selector || jQuery.filter( selector, [ elem ] ).length ) { + if ( !keepData && elem.nodeType === 1 ) { + jQuery.cleanData( elem.getElementsByTagName("*") ); + jQuery.cleanData( [ elem ] ); + } + + if ( elem.parentNode ) { + elem.parentNode.removeChild( elem ); + } + } + } + + return this; + }, + + empty: function() { + for ( var i = 0, elem; (elem = this[i]) != null; i++ ) { + // Remove element nodes and prevent memory leaks + if ( elem.nodeType === 1 ) { + jQuery.cleanData( elem.getElementsByTagName("*") ); + } + + // Remove any remaining nodes + while ( elem.firstChild ) { + elem.removeChild( elem.firstChild ); + } + } + + return this; + }, + + clone: function( dataAndEvents, deepDataAndEvents ) { + dataAndEvents = dataAndEvents == null ? false : dataAndEvents; + deepDataAndEvents = deepDataAndEvents == null ? dataAndEvents : deepDataAndEvents; + + return this.map( function () { + return jQuery.clone( this, dataAndEvents, deepDataAndEvents ); + }); + }, + + html: function( value ) { + if ( value === undefined ) { + return this[0] && this[0].nodeType === 1 ? + this[0].innerHTML.replace(rinlinejQuery, "") : + null; + + // See if we can take a shortcut and just use innerHTML + } else if ( typeof value === "string" && !rnoInnerhtml.test( value ) && + (jQuery.support.leadingWhitespace || !rleadingWhitespace.test( value )) && + !wrapMap[ (rtagName.exec( value ) || ["", ""])[1].toLowerCase() ] ) { + + value = value.replace(rxhtmlTag, "<$1></$2>"); + + try { + for ( var i = 0, l = this.length; i < l; i++ ) { + // Remove element nodes and prevent memory leaks + if ( this[i].nodeType === 1 ) { + jQuery.cleanData( this[i].getElementsByTagName("*") ); + this[i].innerHTML = value; + } + } + + // If using innerHTML throws an exception, use the fallback method + } catch(e) { + this.empty().append( value ); + } + + } else if ( jQuery.isFunction( value ) ) { + this.each(function(i){ + var self = jQuery( this ); + + self.html( value.call(this, i, self.html()) ); + }); + + } else { + this.empty().append( value ); + } + + return this; + }, + + replaceWith: function( value ) { + if ( this[0] && this[0].parentNode ) { + // Make sure that the elements are removed from the DOM before they are inserted + // this can help fix replacing a parent with child elements + if ( jQuery.isFunction( value ) ) { + return this.each(function(i) { + var self = jQuery(this), old = self.html(); + self.replaceWith( value.call( this, i, old ) ); + }); + } + + if ( typeof value !== "string" ) { + value = jQuery( value ).detach(); + } + + return this.each(function() { + var next = this.nextSibling, + parent = this.parentNode; + + jQuery( this ).remove(); + + if ( next ) { + jQuery(next).before( value ); + } else { + jQuery(parent).append( value ); + } + }); + } else { + return this.length ? + this.pushStack( jQuery(jQuery.isFunction(value) ? value() : value), "replaceWith", value ) : + this; + } + }, + + detach: function( selector ) { + return this.remove( selector, true ); + }, + + domManip: function( args, table, callback ) { + var results, first, fragment, parent, + value = args[0], + scripts = []; + + // We can't cloneNode fragments that contain checked, in WebKit + if ( !jQuery.support.checkClone && arguments.length === 3 && typeof value === "string" && rchecked.test( value ) ) { + return this.each(function() { + jQuery(this).domManip( args, table, callback, true ); + }); + } + + if ( jQuery.isFunction(value) ) { + return this.each(function(i) { + var self = jQuery(this); + args[0] = value.call(this, i, table ? self.html() : undefined); + self.domManip( args, table, callback ); + }); + } + + if ( this[0] ) { + parent = value && value.parentNode; + + // If we're in a fragment, just use that instead of building a new one + if ( jQuery.support.parentNode && parent && parent.nodeType === 11 && parent.childNodes.length === this.length ) { + results = { fragment: parent }; + + } else { + results = jQuery.buildFragment( args, this, scripts ); + } + + fragment = results.fragment; + + if ( fragment.childNodes.length === 1 ) { + first = fragment = fragment.firstChild; + } else { + first = fragment.firstChild; + } + + if ( first ) { + table = table && jQuery.nodeName( first, "tr" ); + + for ( var i = 0, l = this.length, lastIndex = l - 1; i < l; i++ ) { + callback.call( + table ? + root(this[i], first) : + this[i], + // Make sure that we do not leak memory by inadvertently discarding + // the original fragment (which might have attached data) instead of + // using it; in addition, use the original fragment object for the last + // item instead of first because it can end up being emptied incorrectly + // in certain situations (Bug #8070). + // Fragments from the fragment cache must always be cloned and never used + // in place. + results.cacheable || ( l > 1 && i < lastIndex ) ? + jQuery.clone( fragment, true, true ) : + fragment + ); + } + } + + if ( scripts.length ) { + jQuery.each( scripts, evalScript ); + } + } + + return this; + } +}); + +function root( elem, cur ) { + return jQuery.nodeName(elem, "table") ? + (elem.getElementsByTagName("tbody")[0] || + elem.appendChild(elem.ownerDocument.createElement("tbody"))) : + elem; +} + +function cloneCopyEvent( src, dest ) { + + if ( dest.nodeType !== 1 || !jQuery.hasData( src ) ) { + return; + } + + var type, i, l, + oldData = jQuery._data( src ), + curData = jQuery._data( dest, oldData ), + events = oldData.events; + + if ( events ) { + delete curData.handle; + curData.events = {}; + + for ( type in events ) { + for ( i = 0, l = events[ type ].length; i < l; i++ ) { + jQuery.event.add( dest, type + ( events[ type ][ i ].namespace ? "." : "" ) + events[ type ][ i ].namespace, events[ type ][ i ], events[ type ][ i ].data ); + } + } + } + + // make the cloned public data object a copy from the original + if ( curData.data ) { + curData.data = jQuery.extend( {}, curData.data ); + } +} + +function cloneFixAttributes( src, dest ) { + var nodeName; + + // We do not need to do anything for non-Elements + if ( dest.nodeType !== 1 ) { + return; + } + + // clearAttributes removes the attributes, which we don't want, + // but also removes the attachEvent events, which we *do* want + if ( dest.clearAttributes ) { + dest.clearAttributes(); + } + + // mergeAttributes, in contrast, only merges back on the + // original attributes, not the events + if ( dest.mergeAttributes ) { + dest.mergeAttributes( src ); + } + + nodeName = dest.nodeName.toLowerCase(); + + // IE6-8 fail to clone children inside object elements that use + // the proprietary classid attribute value (rather than the type + // attribute) to identify the type of content to display + if ( nodeName === "object" ) { + dest.outerHTML = src.outerHTML; + + } else if ( nodeName === "input" && (src.type === "checkbox" || src.type === "radio") ) { + // IE6-8 fails to persist the checked state of a cloned checkbox + // or radio button. Worse, IE6-7 fail to give the cloned element + // a checked appearance if the defaultChecked value isn't also set + if ( src.checked ) { + dest.defaultChecked = dest.checked = src.checked; + } + + // IE6-7 get confused and end up setting the value of a cloned + // checkbox/radio button to an empty string instead of "on" + if ( dest.value !== src.value ) { + dest.value = src.value; + } + + // IE6-8 fails to return the selected option to the default selected + // state when cloning options + } else if ( nodeName === "option" ) { + dest.selected = src.defaultSelected; + + // IE6-8 fails to set the defaultValue to the correct value when + // cloning other types of input fields + } else if ( nodeName === "input" || nodeName === "textarea" ) { + dest.defaultValue = src.defaultValue; + } + + // Event data gets referenced instead of copied if the expando + // gets copied too + dest.removeAttribute( jQuery.expando ); +} + +jQuery.buildFragment = function( args, nodes, scripts ) { + var fragment, cacheable, cacheresults, doc, + first = args[ 0 ]; + + // nodes may contain either an explicit document object, + // a jQuery collection or context object. + // If nodes[0] contains a valid object to assign to doc + if ( nodes && nodes[0] ) { + doc = nodes[0].ownerDocument || nodes[0]; + } + + // Ensure that an attr object doesn't incorrectly stand in as a document object + // Chrome and Firefox seem to allow this to occur and will throw exception + // Fixes #8950 + if ( !doc.createDocumentFragment ) { + doc = document; + } + + // Only cache "small" (1/2 KB) HTML strings that are associated with the main document + // Cloning options loses the selected state, so don't cache them + // IE 6 doesn't like it when you put <object> or <embed> elements in a fragment + // Also, WebKit does not clone 'checked' attributes on cloneNode, so don't cache + // Lastly, IE6,7,8 will not correctly reuse cached fragments that were created from unknown elems #10501 + if ( args.length === 1 && typeof first === "string" && first.length < 512 && doc === document && + first.charAt(0) === "<" && !rnocache.test( first ) && + (jQuery.support.checkClone || !rchecked.test( first )) && + (jQuery.support.html5Clone || !rnoshimcache.test( first )) ) { + + cacheable = true; + + cacheresults = jQuery.fragments[ first ]; + if ( cacheresults && cacheresults !== 1 ) { + fragment = cacheresults; + } + } + + if ( !fragment ) { + fragment = doc.createDocumentFragment(); + jQuery.clean( args, doc, fragment, scripts ); + } + + if ( cacheable ) { + jQuery.fragments[ first ] = cacheresults ? fragment : 1; + } + + return { fragment: fragment, cacheable: cacheable }; +}; + +jQuery.fragments = {}; + +jQuery.each({ + appendTo: "append", + prependTo: "prepend", + insertBefore: "before", + insertAfter: "after", + replaceAll: "replaceWith" +}, function( name, original ) { + jQuery.fn[ name ] = function( selector ) { + var ret = [], + insert = jQuery( selector ), + parent = this.length === 1 && this[0].parentNode; + + if ( parent && parent.nodeType === 11 && parent.childNodes.length === 1 && insert.length === 1 ) { + insert[ original ]( this[0] ); + return this; + + } else { + for ( var i = 0, l = insert.length; i < l; i++ ) { + var elems = ( i > 0 ? this.clone(true) : this ).get(); + jQuery( insert[i] )[ original ]( elems ); + ret = ret.concat( elems ); + } + + return this.pushStack( ret, name, insert.selector ); + } + }; +}); + +function getAll( elem ) { + if ( typeof elem.getElementsByTagName !== "undefined" ) { + return elem.getElementsByTagName( "*" ); + + } else if ( typeof elem.querySelectorAll !== "undefined" ) { + return elem.querySelectorAll( "*" ); + + } else { + return []; + } +} + +// Used in clean, fixes the defaultChecked property +function fixDefaultChecked( elem ) { + if ( elem.type === "checkbox" || elem.type === "radio" ) { + elem.defaultChecked = elem.checked; + } +} +// Finds all inputs and passes them to fixDefaultChecked +function findInputs( elem ) { + var nodeName = ( elem.nodeName || "" ).toLowerCase(); + if ( nodeName === "input" ) { + fixDefaultChecked( elem ); + // Skip scripts, get other children + } else if ( nodeName !== "script" && typeof elem.getElementsByTagName !== "undefined" ) { + jQuery.grep( elem.getElementsByTagName("input"), fixDefaultChecked ); + } +} + +// Derived From: http://www.iecss.com/shimprove/javascript/shimprove.1-0-1.js +function shimCloneNode( elem ) { + var div = document.createElement( "div" ); + safeFragment.appendChild( div ); + + div.innerHTML = elem.outerHTML; + return div.firstChild; +} + +jQuery.extend({ + clone: function( elem, dataAndEvents, deepDataAndEvents ) { + var srcElements, + destElements, + i, + // IE<=8 does not properly clone detached, unknown element nodes + clone = jQuery.support.html5Clone || !rnoshimcache.test( "<" + elem.nodeName ) ? + elem.cloneNode( true ) : + shimCloneNode( elem ); + + if ( (!jQuery.support.noCloneEvent || !jQuery.support.noCloneChecked) && + (elem.nodeType === 1 || elem.nodeType === 11) && !jQuery.isXMLDoc(elem) ) { + // IE copies events bound via attachEvent when using cloneNode. + // Calling detachEvent on the clone will also remove the events + // from the original. In order to get around this, we use some + // proprietary methods to clear the events. Thanks to MooTools + // guys for this hotness. + + cloneFixAttributes( elem, clone ); + + // Using Sizzle here is crazy slow, so we use getElementsByTagName instead + srcElements = getAll( elem ); + destElements = getAll( clone ); + + // Weird iteration because IE will replace the length property + // with an element if you are cloning the body and one of the + // elements on the page has a name or id of "length" + for ( i = 0; srcElements[i]; ++i ) { + // Ensure that the destination node is not null; Fixes #9587 + if ( destElements[i] ) { + cloneFixAttributes( srcElements[i], destElements[i] ); + } + } + } + + // Copy the events from the original to the clone + if ( dataAndEvents ) { + cloneCopyEvent( elem, clone ); + + if ( deepDataAndEvents ) { + srcElements = getAll( elem ); + destElements = getAll( clone ); + + for ( i = 0; srcElements[i]; ++i ) { + cloneCopyEvent( srcElements[i], destElements[i] ); + } + } + } + + srcElements = destElements = null; + + // Return the cloned set + return clone; + }, + + clean: function( elems, context, fragment, scripts ) { + var checkScriptType; + + context = context || document; + + // !context.createElement fails in IE with an error but returns typeof 'object' + if ( typeof context.createElement === "undefined" ) { + context = context.ownerDocument || context[0] && context[0].ownerDocument || document; + } + + var ret = [], j; + + for ( var i = 0, elem; (elem = elems[i]) != null; i++ ) { + if ( typeof elem === "number" ) { + elem += ""; + } + + if ( !elem ) { + continue; + } + + // Convert html string into DOM nodes + if ( typeof elem === "string" ) { + if ( !rhtml.test( elem ) ) { + elem = context.createTextNode( elem ); + } else { + // Fix "XHTML"-style tags in all browsers + elem = elem.replace(rxhtmlTag, "<$1></$2>"); + + // Trim whitespace, otherwise indexOf won't work as expected + var tag = ( rtagName.exec( elem ) || ["", ""] )[1].toLowerCase(), + wrap = wrapMap[ tag ] || wrapMap._default, + depth = wrap[0], + div = context.createElement("div"); + + // Append wrapper element to unknown element safe doc fragment + if ( context === document ) { + // Use the fragment we've already created for this document + safeFragment.appendChild( div ); + } else { + // Use a fragment created with the owner document + createSafeFragment( context ).appendChild( div ); + } + + // Go to html and back, then peel off extra wrappers + div.innerHTML = wrap[1] + elem + wrap[2]; + + // Move to the right depth + while ( depth-- ) { + div = div.lastChild; + } + + // Remove IE's autoinserted <tbody> from table fragments + if ( !jQuery.support.tbody ) { + + // String was a <table>, *may* have spurious <tbody> + var hasBody = rtbody.test(elem), + tbody = tag === "table" && !hasBody ? + div.firstChild && div.firstChild.childNodes : + + // String was a bare <thead> or <tfoot> + wrap[1] === "<table>" && !hasBody ? + div.childNodes : + []; + + for ( j = tbody.length - 1; j >= 0 ; --j ) { + if ( jQuery.nodeName( tbody[ j ], "tbody" ) && !tbody[ j ].childNodes.length ) { + tbody[ j ].parentNode.removeChild( tbody[ j ] ); + } + } + } + + // IE completely kills leading whitespace when innerHTML is used + if ( !jQuery.support.leadingWhitespace && rleadingWhitespace.test( elem ) ) { + div.insertBefore( context.createTextNode( rleadingWhitespace.exec(elem)[0] ), div.firstChild ); + } + + elem = div.childNodes; + } + } + + // Resets defaultChecked for any radios and checkboxes + // about to be appended to the DOM in IE 6/7 (#8060) + var len; + if ( !jQuery.support.appendChecked ) { + if ( elem[0] && typeof (len = elem.length) === "number" ) { + for ( j = 0; j < len; j++ ) { + findInputs( elem[j] ); + } + } else { + findInputs( elem ); + } + } + + if ( elem.nodeType ) { + ret.push( elem ); + } else { + ret = jQuery.merge( ret, elem ); + } + } + + if ( fragment ) { + checkScriptType = function( elem ) { + return !elem.type || rscriptType.test( elem.type ); + }; + for ( i = 0; ret[i]; i++ ) { + if ( scripts && jQuery.nodeName( ret[i], "script" ) && (!ret[i].type || ret[i].type.toLowerCase() === "text/javascript") ) { + scripts.push( ret[i].parentNode ? ret[i].parentNode.removeChild( ret[i] ) : ret[i] ); + + } else { + if ( ret[i].nodeType === 1 ) { + var jsTags = jQuery.grep( ret[i].getElementsByTagName( "script" ), checkScriptType ); + + ret.splice.apply( ret, [i + 1, 0].concat( jsTags ) ); + } + fragment.appendChild( ret[i] ); + } + } + } + + return ret; + }, + + cleanData: function( elems ) { + var data, id, + cache = jQuery.cache, + special = jQuery.event.special, + deleteExpando = jQuery.support.deleteExpando; + + for ( var i = 0, elem; (elem = elems[i]) != null; i++ ) { + if ( elem.nodeName && jQuery.noData[elem.nodeName.toLowerCase()] ) { + continue; + } + + id = elem[ jQuery.expando ]; + + if ( id ) { + data = cache[ id ]; + + if ( data && data.events ) { + for ( var type in data.events ) { + if ( special[ type ] ) { + jQuery.event.remove( elem, type ); + + // This is a shortcut to avoid jQuery.event.remove's overhead + } else { + jQuery.removeEvent( elem, type, data.handle ); + } + } + + // Null the DOM reference to avoid IE6/7/8 leak (#7054) + if ( data.handle ) { + data.handle.elem = null; + } + } + + if ( deleteExpando ) { + delete elem[ jQuery.expando ]; + + } else if ( elem.removeAttribute ) { + elem.removeAttribute( jQuery.expando ); + } + + delete cache[ id ]; + } + } + } +}); + +function evalScript( i, elem ) { + if ( elem.src ) { + jQuery.ajax({ + url: elem.src, + async: false, + dataType: "script" + }); + } else { + jQuery.globalEval( ( elem.text || elem.textContent || elem.innerHTML || "" ).replace( rcleanScript, "/*$0*/" ) ); + } + + if ( elem.parentNode ) { + elem.parentNode.removeChild( elem ); + } +} + + + + +var ralpha = /alpha\([^)]*\)/i, + ropacity = /opacity=([^)]*)/, + // fixed for IE9, see #8346 + rupper = /([A-Z]|^ms)/g, + rnumpx = /^-?\d+(?:px)?$/i, + rnum = /^-?\d/, + rrelNum = /^([\-+])=([\-+.\de]+)/, + + cssShow = { position: "absolute", visibility: "hidden", display: "block" }, + cssWidth = [ "Left", "Right" ], + cssHeight = [ "Top", "Bottom" ], + curCSS, + + getComputedStyle, + currentStyle; + +jQuery.fn.css = function( name, value ) { + // Setting 'undefined' is a no-op + if ( arguments.length === 2 && value === undefined ) { + return this; + } + + return jQuery.access( this, name, value, true, function( elem, name, value ) { + return value !== undefined ? + jQuery.style( elem, name, value ) : + jQuery.css( elem, name ); + }); +}; + +jQuery.extend({ + // Add in style property hooks for overriding the default + // behavior of getting and setting a style property + cssHooks: { + opacity: { + get: function( elem, computed ) { + if ( computed ) { + // We should always get a number back from opacity + var ret = curCSS( elem, "opacity", "opacity" ); + return ret === "" ? "1" : ret; + + } else { + return elem.style.opacity; + } + } + } + }, + + // Exclude the following css properties to add px + cssNumber: { + "fillOpacity": true, + "fontWeight": true, + "lineHeight": true, + "opacity": true, + "orphans": true, + "widows": true, + "zIndex": true, + "zoom": true + }, + + // Add in properties whose names you wish to fix before + // setting or getting the value + cssProps: { + // normalize float css property + "float": jQuery.support.cssFloat ? "cssFloat" : "styleFloat" + }, + + // Get and set the style property on a DOM Node + style: function( elem, name, value, extra ) { + // Don't set styles on text and comment nodes + if ( !elem || elem.nodeType === 3 || elem.nodeType === 8 || !elem.style ) { + return; + } + + // Make sure that we're working with the right name + var ret, type, origName = jQuery.camelCase( name ), + style = elem.style, hooks = jQuery.cssHooks[ origName ]; + + name = jQuery.cssProps[ origName ] || origName; + + // Check if we're setting a value + if ( value !== undefined ) { + type = typeof value; + + // convert relative number strings (+= or -=) to relative numbers. #7345 + if ( type === "string" && (ret = rrelNum.exec( value )) ) { + value = ( +( ret[1] + 1) * +ret[2] ) + parseFloat( jQuery.css( elem, name ) ); + // Fixes bug #9237 + type = "number"; + } + + // Make sure that NaN and null values aren't set. See: #7116 + if ( value == null || type === "number" && isNaN( value ) ) { + return; + } + + // If a number was passed in, add 'px' to the (except for certain CSS properties) + if ( type === "number" && !jQuery.cssNumber[ origName ] ) { + value += "px"; + } + + // If a hook was provided, use that value, otherwise just set the specified value + if ( !hooks || !("set" in hooks) || (value = hooks.set( elem, value )) !== undefined ) { + // Wrapped to prevent IE from throwing errors when 'invalid' values are provided + // Fixes bug #5509 + try { + style[ name ] = value; + } catch(e) {} + } + + } else { + // If a hook was provided get the non-computed value from there + if ( hooks && "get" in hooks && (ret = hooks.get( elem, false, extra )) !== undefined ) { + return ret; + } + + // Otherwise just get the value from the style object + return style[ name ]; + } + }, + + css: function( elem, name, extra ) { + var ret, hooks; + + // Make sure that we're working with the right name + name = jQuery.camelCase( name ); + hooks = jQuery.cssHooks[ name ]; + name = jQuery.cssProps[ name ] || name; + + // cssFloat needs a special treatment + if ( name === "cssFloat" ) { + name = "float"; + } + + // If a hook was provided get the computed value from there + if ( hooks && "get" in hooks && (ret = hooks.get( elem, true, extra )) !== undefined ) { + return ret; + + // Otherwise, if a way to get the computed value exists, use that + } else if ( curCSS ) { + return curCSS( elem, name ); + } + }, + + // A method for quickly swapping in/out CSS properties to get correct calculations + swap: function( elem, options, callback ) { + var old = {}; + + // Remember the old values, and insert the new ones + for ( var name in options ) { + old[ name ] = elem.style[ name ]; + elem.style[ name ] = options[ name ]; + } + + callback.call( elem ); + + // Revert the old values + for ( name in options ) { + elem.style[ name ] = old[ name ]; + } + } +}); + +// DEPRECATED, Use jQuery.css() instead +jQuery.curCSS = jQuery.css; + +jQuery.each(["height", "width"], function( i, name ) { + jQuery.cssHooks[ name ] = { + get: function( elem, computed, extra ) { + var val; + + if ( computed ) { + if ( elem.offsetWidth !== 0 ) { + return getWH( elem, name, extra ); + } else { + jQuery.swap( elem, cssShow, function() { + val = getWH( elem, name, extra ); + }); + } + + return val; + } + }, + + set: function( elem, value ) { + if ( rnumpx.test( value ) ) { + // ignore negative width and height values #1599 + value = parseFloat( value ); + + if ( value >= 0 ) { + return value + "px"; + } + + } else { + return value; + } + } + }; +}); + +if ( !jQuery.support.opacity ) { + jQuery.cssHooks.opacity = { + get: function( elem, computed ) { + // IE uses filters for opacity + return ropacity.test( (computed && elem.currentStyle ? elem.currentStyle.filter : elem.style.filter) || "" ) ? + ( parseFloat( RegExp.$1 ) / 100 ) + "" : + computed ? "1" : ""; + }, + + set: function( elem, value ) { + var style = elem.style, + currentStyle = elem.currentStyle, + opacity = jQuery.isNumeric( value ) ? "alpha(opacity=" + value * 100 + ")" : "", + filter = currentStyle && currentStyle.filter || style.filter || ""; + + // IE has trouble with opacity if it does not have layout + // Force it by setting the zoom level + style.zoom = 1; + + // if setting opacity to 1, and no other filters exist - attempt to remove filter attribute #6652 + if ( value >= 1 && jQuery.trim( filter.replace( ralpha, "" ) ) === "" ) { + + // Setting style.filter to null, "" & " " still leave "filter:" in the cssText + // if "filter:" is present at all, clearType is disabled, we want to avoid this + // style.removeAttribute is IE Only, but so apparently is this code path... + style.removeAttribute( "filter" ); + + // if there there is no filter style applied in a css rule, we are done + if ( currentStyle && !currentStyle.filter ) { + return; + } + } + + // otherwise, set new filter values + style.filter = ralpha.test( filter ) ? + filter.replace( ralpha, opacity ) : + filter + " " + opacity; + } + }; +} + +jQuery(function() { + // This hook cannot be added until DOM ready because the support test + // for it is not run until after DOM ready + if ( !jQuery.support.reliableMarginRight ) { + jQuery.cssHooks.marginRight = { + get: function( elem, computed ) { + // WebKit Bug 13343 - getComputedStyle returns wrong value for margin-right + // Work around by temporarily setting element display to inline-block + var ret; + jQuery.swap( elem, { "display": "inline-block" }, function() { + if ( computed ) { + ret = curCSS( elem, "margin-right", "marginRight" ); + } else { + ret = elem.style.marginRight; + } + }); + return ret; + } + }; + } +}); + +if ( document.defaultView && document.defaultView.getComputedStyle ) { + getComputedStyle = function( elem, name ) { + var ret, defaultView, computedStyle; + + name = name.replace( rupper, "-$1" ).toLowerCase(); + + if ( (defaultView = elem.ownerDocument.defaultView) && + (computedStyle = defaultView.getComputedStyle( elem, null )) ) { + ret = computedStyle.getPropertyValue( name ); + if ( ret === "" && !jQuery.contains( elem.ownerDocument.documentElement, elem ) ) { + ret = jQuery.style( elem, name ); + } + } + + return ret; + }; +} + +if ( document.documentElement.currentStyle ) { + currentStyle = function( elem, name ) { + var left, rsLeft, uncomputed, + ret = elem.currentStyle && elem.currentStyle[ name ], + style = elem.style; + + // Avoid setting ret to empty string here + // so we don't default to auto + if ( ret === null && style && (uncomputed = style[ name ]) ) { + ret = uncomputed; + } + + // From the awesome hack by Dean Edwards + // http://erik.eae.net/archives/2007/07/27/18.54.15/#comment-102291 + + // If we're not dealing with a regular pixel number + // but a number that has a weird ending, we need to convert it to pixels + if ( !rnumpx.test( ret ) && rnum.test( ret ) ) { + + // Remember the original values + left = style.left; + rsLeft = elem.runtimeStyle && elem.runtimeStyle.left; + + // Put in the new values to get a computed value out + if ( rsLeft ) { + elem.runtimeStyle.left = elem.currentStyle.left; + } + style.left = name === "fontSize" ? "1em" : ( ret || 0 ); + ret = style.pixelLeft + "px"; + + // Revert the changed values + style.left = left; + if ( rsLeft ) { + elem.runtimeStyle.left = rsLeft; + } + } + + return ret === "" ? "auto" : ret; + }; +} + +curCSS = getComputedStyle || currentStyle; + +function getWH( elem, name, extra ) { + + // Start with offset property + var val = name === "width" ? elem.offsetWidth : elem.offsetHeight, + which = name === "width" ? cssWidth : cssHeight, + i = 0, + len = which.length; + + if ( val > 0 ) { + if ( extra !== "border" ) { + for ( ; i < len; i++ ) { + if ( !extra ) { + val -= parseFloat( jQuery.css( elem, "padding" + which[ i ] ) ) || 0; + } + if ( extra === "margin" ) { + val += parseFloat( jQuery.css( elem, extra + which[ i ] ) ) || 0; + } else { + val -= parseFloat( jQuery.css( elem, "border" + which[ i ] + "Width" ) ) || 0; + } + } + } + + return val + "px"; + } + + // Fall back to computed then uncomputed css if necessary + val = curCSS( elem, name, name ); + if ( val < 0 || val == null ) { + val = elem.style[ name ] || 0; + } + // Normalize "", auto, and prepare for extra + val = parseFloat( val ) || 0; + + // Add padding, border, margin + if ( extra ) { + for ( ; i < len; i++ ) { + val += parseFloat( jQuery.css( elem, "padding" + which[ i ] ) ) || 0; + if ( extra !== "padding" ) { + val += parseFloat( jQuery.css( elem, "border" + which[ i ] + "Width" ) ) || 0; + } + if ( extra === "margin" ) { + val += parseFloat( jQuery.css( elem, extra + which[ i ] ) ) || 0; + } + } + } + + return val + "px"; +} + +if ( jQuery.expr && jQuery.expr.filters ) { + jQuery.expr.filters.hidden = function( elem ) { + var width = elem.offsetWidth, + height = elem.offsetHeight; + + return ( width === 0 && height === 0 ) || (!jQuery.support.reliableHiddenOffsets && ((elem.style && elem.style.display) || jQuery.css( elem, "display" )) === "none"); + }; + + jQuery.expr.filters.visible = function( elem ) { + return !jQuery.expr.filters.hidden( elem ); + }; +} + + + + +var r20 = /%20/g, + rbracket = /\[\]$/, + rCRLF = /\r?\n/g, + rhash = /#.*$/, + rheaders = /^(.*?):[ \t]*([^\r\n]*)\r?$/mg, // IE leaves an \r character at EOL + rinput = /^(?:color|date|datetime|datetime-local|email|hidden|month|number|password|range|search|tel|text|time|url|week)$/i, + // #7653, #8125, #8152: local protocol detection + rlocalProtocol = /^(?:about|app|app\-storage|.+\-extension|file|res|widget):$/, + rnoContent = /^(?:GET|HEAD)$/, + rprotocol = /^\/\//, + rquery = /\?/, + rscript = /<script\b[^<]*(?:(?!<\/script>)<[^<]*)*<\/script>/gi, + rselectTextarea = /^(?:select|textarea)/i, + rspacesAjax = /\s+/, + rts = /([?&])_=[^&]*/, + rurl = /^([\w\+\.\-]+:)(?:\/\/([^\/?#:]*)(?::(\d+))?)?/, + + // Keep a copy of the old load method + _load = jQuery.fn.load, + + /* Prefilters + * 1) They are useful to introduce custom dataTypes (see ajax/jsonp.js for an example) + * 2) These are called: + * - BEFORE asking for a transport + * - AFTER param serialization (s.data is a string if s.processData is true) + * 3) key is the dataType + * 4) the catchall symbol "*" can be used + * 5) execution will start with transport dataType and THEN continue down to "*" if needed + */ + prefilters = {}, + + /* Transports bindings + * 1) key is the dataType + * 2) the catchall symbol "*" can be used + * 3) selection will start with transport dataType and THEN go to "*" if needed + */ + transports = {}, + + // Document location + ajaxLocation, + + // Document location segments + ajaxLocParts, + + // Avoid comment-prolog char sequence (#10098); must appease lint and evade compression + allTypes = ["*/"] + ["*"]; + +// #8138, IE may throw an exception when accessing +// a field from window.location if document.domain has been set +try { + ajaxLocation = location.href; +} catch( e ) { + // Use the href attribute of an A element + // since IE will modify it given document.location + ajaxLocation = document.createElement( "a" ); + ajaxLocation.href = ""; + ajaxLocation = ajaxLocation.href; +} + +// Segment location into parts +ajaxLocParts = rurl.exec( ajaxLocation.toLowerCase() ) || []; + +// Base "constructor" for jQuery.ajaxPrefilter and jQuery.ajaxTransport +function addToPrefiltersOrTransports( structure ) { + + // dataTypeExpression is optional and defaults to "*" + return function( dataTypeExpression, func ) { + + if ( typeof dataTypeExpression !== "string" ) { + func = dataTypeExpression; + dataTypeExpression = "*"; + } + + if ( jQuery.isFunction( func ) ) { + var dataTypes = dataTypeExpression.toLowerCase().split( rspacesAjax ), + i = 0, + length = dataTypes.length, + dataType, + list, + placeBefore; + + // For each dataType in the dataTypeExpression + for ( ; i < length; i++ ) { + dataType = dataTypes[ i ]; + // We control if we're asked to add before + // any existing element + placeBefore = /^\+/.test( dataType ); + if ( placeBefore ) { + dataType = dataType.substr( 1 ) || "*"; + } + list = structure[ dataType ] = structure[ dataType ] || []; + // then we add to the structure accordingly + list[ placeBefore ? "unshift" : "push" ]( func ); + } + } + }; +} + +// Base inspection function for prefilters and transports +function inspectPrefiltersOrTransports( structure, options, originalOptions, jqXHR, + dataType /* internal */, inspected /* internal */ ) { + + dataType = dataType || options.dataTypes[ 0 ]; + inspected = inspected || {}; + + inspected[ dataType ] = true; + + var list = structure[ dataType ], + i = 0, + length = list ? list.length : 0, + executeOnly = ( structure === prefilters ), + selection; + + for ( ; i < length && ( executeOnly || !selection ); i++ ) { + selection = list[ i ]( options, originalOptions, jqXHR ); + // If we got redirected to another dataType + // we try there if executing only and not done already + if ( typeof selection === "string" ) { + if ( !executeOnly || inspected[ selection ] ) { + selection = undefined; + } else { + options.dataTypes.unshift( selection ); + selection = inspectPrefiltersOrTransports( + structure, options, originalOptions, jqXHR, selection, inspected ); + } + } + } + // If we're only executing or nothing was selected + // we try the catchall dataType if not done already + if ( ( executeOnly || !selection ) && !inspected[ "*" ] ) { + selection = inspectPrefiltersOrTransports( + structure, options, originalOptions, jqXHR, "*", inspected ); + } + // unnecessary when only executing (prefilters) + // but it'll be ignored by the caller in that case + return selection; +} + +// A special extend for ajax options +// that takes "flat" options (not to be deep extended) +// Fixes #9887 +function ajaxExtend( target, src ) { + var key, deep, + flatOptions = jQuery.ajaxSettings.flatOptions || {}; + for ( key in src ) { + if ( src[ key ] !== undefined ) { + ( flatOptions[ key ] ? target : ( deep || ( deep = {} ) ) )[ key ] = src[ key ]; + } + } + if ( deep ) { + jQuery.extend( true, target, deep ); + } +} + +jQuery.fn.extend({ + load: function( url, params, callback ) { + if ( typeof url !== "string" && _load ) { + return _load.apply( this, arguments ); + + // Don't do a request if no elements are being requested + } else if ( !this.length ) { + return this; + } + + var off = url.indexOf( " " ); + if ( off >= 0 ) { + var selector = url.slice( off, url.length ); + url = url.slice( 0, off ); + } + + // Default to a GET request + var type = "GET"; + + // If the second parameter was provided + if ( params ) { + // If it's a function + if ( jQuery.isFunction( params ) ) { + // We assume that it's the callback + callback = params; + params = undefined; + + // Otherwise, build a param string + } else if ( typeof params === "object" ) { + params = jQuery.param( params, jQuery.ajaxSettings.traditional ); + type = "POST"; + } + } + + var self = this; + + // Request the remote document + jQuery.ajax({ + url: url, + type: type, + dataType: "html", + data: params, + // Complete callback (responseText is used internally) + complete: function( jqXHR, status, responseText ) { + // Store the response as specified by the jqXHR object + responseText = jqXHR.responseText; + // If successful, inject the HTML into all the matched elements + if ( jqXHR.isResolved() ) { + // #4825: Get the actual response in case + // a dataFilter is present in ajaxSettings + jqXHR.done(function( r ) { + responseText = r; + }); + // See if a selector was specified + self.html( selector ? + // Create a dummy div to hold the results + jQuery("<div>") + // inject the contents of the document in, removing the scripts + // to avoid any 'Permission Denied' errors in IE + .append(responseText.replace(rscript, "")) + + // Locate the specified elements + .find(selector) : + + // If not, just inject the full result + responseText ); + } + + if ( callback ) { + self.each( callback, [ responseText, status, jqXHR ] ); + } + } + }); + + return this; + }, + + serialize: function() { + return jQuery.param( this.serializeArray() ); + }, + + serializeArray: function() { + return this.map(function(){ + return this.elements ? jQuery.makeArray( this.elements ) : this; + }) + .filter(function(){ + return this.name && !this.disabled && + ( this.checked || rselectTextarea.test( this.nodeName ) || + rinput.test( this.type ) ); + }) + .map(function( i, elem ){ + var val = jQuery( this ).val(); + + return val == null ? + null : + jQuery.isArray( val ) ? + jQuery.map( val, function( val, i ){ + return { name: elem.name, value: val.replace( rCRLF, "\r\n" ) }; + }) : + { name: elem.name, value: val.replace( rCRLF, "\r\n" ) }; + }).get(); + } +}); + +// Attach a bunch of functions for handling common AJAX events +jQuery.each( "ajaxStart ajaxStop ajaxComplete ajaxError ajaxSuccess ajaxSend".split( " " ), function( i, o ){ + jQuery.fn[ o ] = function( f ){ + return this.on( o, f ); + }; +}); + +jQuery.each( [ "get", "post" ], function( i, method ) { + jQuery[ method ] = function( url, data, callback, type ) { + // shift arguments if data argument was omitted + if ( jQuery.isFunction( data ) ) { + type = type || callback; + callback = data; + data = undefined; + } + + return jQuery.ajax({ + type: method, + url: url, + data: data, + success: callback, + dataType: type + }); + }; +}); + +jQuery.extend({ + + getScript: function( url, callback ) { + return jQuery.get( url, undefined, callback, "script" ); + }, + + getJSON: function( url, data, callback ) { + return jQuery.get( url, data, callback, "json" ); + }, + + // Creates a full fledged settings object into target + // with both ajaxSettings and settings fields. + // If target is omitted, writes into ajaxSettings. + ajaxSetup: function( target, settings ) { + if ( settings ) { + // Building a settings object + ajaxExtend( target, jQuery.ajaxSettings ); + } else { + // Extending ajaxSettings + settings = target; + target = jQuery.ajaxSettings; + } + ajaxExtend( target, settings ); + return target; + }, + + ajaxSettings: { + url: ajaxLocation, + isLocal: rlocalProtocol.test( ajaxLocParts[ 1 ] ), + global: true, + type: "GET", + contentType: "application/x-www-form-urlencoded", + processData: true, + async: true, + /* + timeout: 0, + data: null, + dataType: null, + username: null, + password: null, + cache: null, + traditional: false, + headers: {}, + */ + + accepts: { + xml: "application/xml, text/xml", + html: "text/html", + text: "text/plain", + json: "application/json, text/javascript", + "*": allTypes + }, + + contents: { + xml: /xml/, + html: /html/, + json: /json/ + }, + + responseFields: { + xml: "responseXML", + text: "responseText" + }, + + // List of data converters + // 1) key format is "source_type destination_type" (a single space in-between) + // 2) the catchall symbol "*" can be used for source_type + converters: { + + // Convert anything to text + "* text": window.String, + + // Text to html (true = no transformation) + "text html": true, + + // Evaluate text as a json expression + "text json": jQuery.parseJSON, + + // Parse text as xml + "text xml": jQuery.parseXML + }, + + // For options that shouldn't be deep extended: + // you can add your own custom options here if + // and when you create one that shouldn't be + // deep extended (see ajaxExtend) + flatOptions: { + context: true, + url: true + } + }, + + ajaxPrefilter: addToPrefiltersOrTransports( prefilters ), + ajaxTransport: addToPrefiltersOrTransports( transports ), + + // Main method + ajax: function( url, options ) { + + // If url is an object, simulate pre-1.5 signature + if ( typeof url === "object" ) { + options = url; + url = undefined; + } + + // Force options to be an object + options = options || {}; + + var // Create the final options object + s = jQuery.ajaxSetup( {}, options ), + // Callbacks context + callbackContext = s.context || s, + // Context for global events + // It's the callbackContext if one was provided in the options + // and if it's a DOM node or a jQuery collection + globalEventContext = callbackContext !== s && + ( callbackContext.nodeType || callbackContext instanceof jQuery ) ? + jQuery( callbackContext ) : jQuery.event, + // Deferreds + deferred = jQuery.Deferred(), + completeDeferred = jQuery.Callbacks( "once memory" ), + // Status-dependent callbacks + statusCode = s.statusCode || {}, + // ifModified key + ifModifiedKey, + // Headers (they are sent all at once) + requestHeaders = {}, + requestHeadersNames = {}, + // Response headers + responseHeadersString, + responseHeaders, + // transport + transport, + // timeout handle + timeoutTimer, + // Cross-domain detection vars + parts, + // The jqXHR state + state = 0, + // To know if global events are to be dispatched + fireGlobals, + // Loop variable + i, + // Fake xhr + jqXHR = { + + readyState: 0, + + // Caches the header + setRequestHeader: function( name, value ) { + if ( !state ) { + var lname = name.toLowerCase(); + name = requestHeadersNames[ lname ] = requestHeadersNames[ lname ] || name; + requestHeaders[ name ] = value; + } + return this; + }, + + // Raw string + getAllResponseHeaders: function() { + return state === 2 ? responseHeadersString : null; + }, + + // Builds headers hashtable if needed + getResponseHeader: function( key ) { + var match; + if ( state === 2 ) { + if ( !responseHeaders ) { + responseHeaders = {}; + while( ( match = rheaders.exec( responseHeadersString ) ) ) { + responseHeaders[ match[1].toLowerCase() ] = match[ 2 ]; + } + } + match = responseHeaders[ key.toLowerCase() ]; + } + return match === undefined ? null : match; + }, + + // Overrides response content-type header + overrideMimeType: function( type ) { + if ( !state ) { + s.mimeType = type; + } + return this; + }, + + // Cancel the request + abort: function( statusText ) { + statusText = statusText || "abort"; + if ( transport ) { + transport.abort( statusText ); + } + done( 0, statusText ); + return this; + } + }; + + // Callback for when everything is done + // It is defined here because jslint complains if it is declared + // at the end of the function (which would be more logical and readable) + function done( status, nativeStatusText, responses, headers ) { + + // Called once + if ( state === 2 ) { + return; + } + + // State is "done" now + state = 2; + + // Clear timeout if it exists + if ( timeoutTimer ) { + clearTimeout( timeoutTimer ); + } + + // Dereference transport for early garbage collection + // (no matter how long the jqXHR object will be used) + transport = undefined; + + // Cache response headers + responseHeadersString = headers || ""; + + // Set readyState + jqXHR.readyState = status > 0 ? 4 : 0; + + var isSuccess, + success, + error, + statusText = nativeStatusText, + response = responses ? ajaxHandleResponses( s, jqXHR, responses ) : undefined, + lastModified, + etag; + + // If successful, handle type chaining + if ( status >= 200 && status < 300 || status === 304 ) { + + // Set the If-Modified-Since and/or If-None-Match header, if in ifModified mode. + if ( s.ifModified ) { + + if ( ( lastModified = jqXHR.getResponseHeader( "Last-Modified" ) ) ) { + jQuery.lastModified[ ifModifiedKey ] = lastModified; + } + if ( ( etag = jqXHR.getResponseHeader( "Etag" ) ) ) { + jQuery.etag[ ifModifiedKey ] = etag; + } + } + + // If not modified + if ( status === 304 ) { + + statusText = "notmodified"; + isSuccess = true; + + // If we have data + } else { + + try { + success = ajaxConvert( s, response ); + statusText = "success"; + isSuccess = true; + } catch(e) { + // We have a parsererror + statusText = "parsererror"; + error = e; + } + } + } else { + // We extract error from statusText + // then normalize statusText and status for non-aborts + error = statusText; + if ( !statusText || status ) { + statusText = "error"; + if ( status < 0 ) { + status = 0; + } + } + } + + // Set data for the fake xhr object + jqXHR.status = status; + jqXHR.statusText = "" + ( nativeStatusText || statusText ); + + // Success/Error + if ( isSuccess ) { + deferred.resolveWith( callbackContext, [ success, statusText, jqXHR ] ); + } else { + deferred.rejectWith( callbackContext, [ jqXHR, statusText, error ] ); + } + + // Status-dependent callbacks + jqXHR.statusCode( statusCode ); + statusCode = undefined; + + if ( fireGlobals ) { + globalEventContext.trigger( "ajax" + ( isSuccess ? "Success" : "Error" ), + [ jqXHR, s, isSuccess ? success : error ] ); + } + + // Complete + completeDeferred.fireWith( callbackContext, [ jqXHR, statusText ] ); + + if ( fireGlobals ) { + globalEventContext.trigger( "ajaxComplete", [ jqXHR, s ] ); + // Handle the global AJAX counter + if ( !( --jQuery.active ) ) { + jQuery.event.trigger( "ajaxStop" ); + } + } + } + + // Attach deferreds + deferred.promise( jqXHR ); + jqXHR.success = jqXHR.done; + jqXHR.error = jqXHR.fail; + jqXHR.complete = completeDeferred.add; + + // Status-dependent callbacks + jqXHR.statusCode = function( map ) { + if ( map ) { + var tmp; + if ( state < 2 ) { + for ( tmp in map ) { + statusCode[ tmp ] = [ statusCode[tmp], map[tmp] ]; + } + } else { + tmp = map[ jqXHR.status ]; + jqXHR.then( tmp, tmp ); + } + } + return this; + }; + + // Remove hash character (#7531: and string promotion) + // Add protocol if not provided (#5866: IE7 issue with protocol-less urls) + // We also use the url parameter if available + s.url = ( ( url || s.url ) + "" ).replace( rhash, "" ).replace( rprotocol, ajaxLocParts[ 1 ] + "//" ); + + // Extract dataTypes list + s.dataTypes = jQuery.trim( s.dataType || "*" ).toLowerCase().split( rspacesAjax ); + + // Determine if a cross-domain request is in order + if ( s.crossDomain == null ) { + parts = rurl.exec( s.url.toLowerCase() ); + s.crossDomain = !!( parts && + ( parts[ 1 ] != ajaxLocParts[ 1 ] || parts[ 2 ] != ajaxLocParts[ 2 ] || + ( parts[ 3 ] || ( parts[ 1 ] === "http:" ? 80 : 443 ) ) != + ( ajaxLocParts[ 3 ] || ( ajaxLocParts[ 1 ] === "http:" ? 80 : 443 ) ) ) + ); + } + + // Convert data if not already a string + if ( s.data && s.processData && typeof s.data !== "string" ) { + s.data = jQuery.param( s.data, s.traditional ); + } + + // Apply prefilters + inspectPrefiltersOrTransports( prefilters, s, options, jqXHR ); + + // If request was aborted inside a prefiler, stop there + if ( state === 2 ) { + return false; + } + + // We can fire global events as of now if asked to + fireGlobals = s.global; + + // Uppercase the type + s.type = s.type.toUpperCase(); + + // Determine if request has content + s.hasContent = !rnoContent.test( s.type ); + + // Watch for a new set of requests + if ( fireGlobals && jQuery.active++ === 0 ) { + jQuery.event.trigger( "ajaxStart" ); + } + + // More options handling for requests with no content + if ( !s.hasContent ) { + + // If data is available, append data to url + if ( s.data ) { + s.url += ( rquery.test( s.url ) ? "&" : "?" ) + s.data; + // #9682: remove data so that it's not used in an eventual retry + delete s.data; + } + + // Get ifModifiedKey before adding the anti-cache parameter + ifModifiedKey = s.url; + + // Add anti-cache in url if needed + if ( s.cache === false ) { + + var ts = jQuery.now(), + // try replacing _= if it is there + ret = s.url.replace( rts, "$1_=" + ts ); + + // if nothing was replaced, add timestamp to the end + s.url = ret + ( ( ret === s.url ) ? ( rquery.test( s.url ) ? "&" : "?" ) + "_=" + ts : "" ); + } + } + + // Set the correct header, if data is being sent + if ( s.data && s.hasContent && s.contentType !== false || options.contentType ) { + jqXHR.setRequestHeader( "Content-Type", s.contentType ); + } + + // Set the If-Modified-Since and/or If-None-Match header, if in ifModified mode. + if ( s.ifModified ) { + ifModifiedKey = ifModifiedKey || s.url; + if ( jQuery.lastModified[ ifModifiedKey ] ) { + jqXHR.setRequestHeader( "If-Modified-Since", jQuery.lastModified[ ifModifiedKey ] ); + } + if ( jQuery.etag[ ifModifiedKey ] ) { + jqXHR.setRequestHeader( "If-None-Match", jQuery.etag[ ifModifiedKey ] ); + } + } + + // Set the Accepts header for the server, depending on the dataType + jqXHR.setRequestHeader( + "Accept", + s.dataTypes[ 0 ] && s.accepts[ s.dataTypes[0] ] ? + s.accepts[ s.dataTypes[0] ] + ( s.dataTypes[ 0 ] !== "*" ? ", " + allTypes + "; q=0.01" : "" ) : + s.accepts[ "*" ] + ); + + // Check for headers option + for ( i in s.headers ) { + jqXHR.setRequestHeader( i, s.headers[ i ] ); + } + + // Allow custom headers/mimetypes and early abort + if ( s.beforeSend && ( s.beforeSend.call( callbackContext, jqXHR, s ) === false || state === 2 ) ) { + // Abort if not done already + jqXHR.abort(); + return false; + + } + + // Install callbacks on deferreds + for ( i in { success: 1, error: 1, complete: 1 } ) { + jqXHR[ i ]( s[ i ] ); + } + + // Get transport + transport = inspectPrefiltersOrTransports( transports, s, options, jqXHR ); + + // If no transport, we auto-abort + if ( !transport ) { + done( -1, "No Transport" ); + } else { + jqXHR.readyState = 1; + // Send global event + if ( fireGlobals ) { + globalEventContext.trigger( "ajaxSend", [ jqXHR, s ] ); + } + // Timeout + if ( s.async && s.timeout > 0 ) { + timeoutTimer = setTimeout( function(){ + jqXHR.abort( "timeout" ); + }, s.timeout ); + } + + try { + state = 1; + transport.send( requestHeaders, done ); + } catch (e) { + // Propagate exception as error if not done + if ( state < 2 ) { + done( -1, e ); + // Simply rethrow otherwise + } else { + throw e; + } + } + } + + return jqXHR; + }, + + // Serialize an array of form elements or a set of + // key/values into a query string + param: function( a, traditional ) { + var s = [], + add = function( key, value ) { + // If value is a function, invoke it and return its value + value = jQuery.isFunction( value ) ? value() : value; + s[ s.length ] = encodeURIComponent( key ) + "=" + encodeURIComponent( value ); + }; + + // Set traditional to true for jQuery <= 1.3.2 behavior. + if ( traditional === undefined ) { + traditional = jQuery.ajaxSettings.traditional; + } + + // If an array was passed in, assume that it is an array of form elements. + if ( jQuery.isArray( a ) || ( a.jquery && !jQuery.isPlainObject( a ) ) ) { + // Serialize the form elements + jQuery.each( a, function() { + add( this.name, this.value ); + }); + + } else { + // If traditional, encode the "old" way (the way 1.3.2 or older + // did it), otherwise encode params recursively. + for ( var prefix in a ) { + buildParams( prefix, a[ prefix ], traditional, add ); + } + } + + // Return the resulting serialization + return s.join( "&" ).replace( r20, "+" ); + } +}); + +function buildParams( prefix, obj, traditional, add ) { + if ( jQuery.isArray( obj ) ) { + // Serialize array item. + jQuery.each( obj, function( i, v ) { + if ( traditional || rbracket.test( prefix ) ) { + // Treat each array item as a scalar. + add( prefix, v ); + + } else { + // If array item is non-scalar (array or object), encode its + // numeric index to resolve deserialization ambiguity issues. + // Note that rack (as of 1.0.0) can't currently deserialize + // nested arrays properly, and attempting to do so may cause + // a server error. Possible fixes are to modify rack's + // deserialization algorithm or to provide an option or flag + // to force array serialization to be shallow. + buildParams( prefix + "[" + ( typeof v === "object" || jQuery.isArray(v) ? i : "" ) + "]", v, traditional, add ); + } + }); + + } else if ( !traditional && obj != null && typeof obj === "object" ) { + // Serialize object item. + for ( var name in obj ) { + buildParams( prefix + "[" + name + "]", obj[ name ], traditional, add ); + } + + } else { + // Serialize scalar item. + add( prefix, obj ); + } +} + +// This is still on the jQuery object... for now +// Want to move this to jQuery.ajax some day +jQuery.extend({ + + // Counter for holding the number of active queries + active: 0, + + // Last-Modified header cache for next request + lastModified: {}, + etag: {} + +}); + +/* Handles responses to an ajax request: + * - sets all responseXXX fields accordingly + * - finds the right dataType (mediates between content-type and expected dataType) + * - returns the corresponding response + */ +function ajaxHandleResponses( s, jqXHR, responses ) { + + var contents = s.contents, + dataTypes = s.dataTypes, + responseFields = s.responseFields, + ct, + type, + finalDataType, + firstDataType; + + // Fill responseXXX fields + for ( type in responseFields ) { + if ( type in responses ) { + jqXHR[ responseFields[type] ] = responses[ type ]; + } + } + + // Remove auto dataType and get content-type in the process + while( dataTypes[ 0 ] === "*" ) { + dataTypes.shift(); + if ( ct === undefined ) { + ct = s.mimeType || jqXHR.getResponseHeader( "content-type" ); + } + } + + // Check if we're dealing with a known content-type + if ( ct ) { + for ( type in contents ) { + if ( contents[ type ] && contents[ type ].test( ct ) ) { + dataTypes.unshift( type ); + break; + } + } + } + + // Check to see if we have a response for the expected dataType + if ( dataTypes[ 0 ] in responses ) { + finalDataType = dataTypes[ 0 ]; + } else { + // Try convertible dataTypes + for ( type in responses ) { + if ( !dataTypes[ 0 ] || s.converters[ type + " " + dataTypes[0] ] ) { + finalDataType = type; + break; + } + if ( !firstDataType ) { + firstDataType = type; + } + } + // Or just use first one + finalDataType = finalDataType || firstDataType; + } + + // If we found a dataType + // We add the dataType to the list if needed + // and return the corresponding response + if ( finalDataType ) { + if ( finalDataType !== dataTypes[ 0 ] ) { + dataTypes.unshift( finalDataType ); + } + return responses[ finalDataType ]; + } +} + +// Chain conversions given the request and the original response +function ajaxConvert( s, response ) { + + // Apply the dataFilter if provided + if ( s.dataFilter ) { + response = s.dataFilter( response, s.dataType ); + } + + var dataTypes = s.dataTypes, + converters = {}, + i, + key, + length = dataTypes.length, + tmp, + // Current and previous dataTypes + current = dataTypes[ 0 ], + prev, + // Conversion expression + conversion, + // Conversion function + conv, + // Conversion functions (transitive conversion) + conv1, + conv2; + + // For each dataType in the chain + for ( i = 1; i < length; i++ ) { + + // Create converters map + // with lowercased keys + if ( i === 1 ) { + for ( key in s.converters ) { + if ( typeof key === "string" ) { + converters[ key.toLowerCase() ] = s.converters[ key ]; + } + } + } + + // Get the dataTypes + prev = current; + current = dataTypes[ i ]; + + // If current is auto dataType, update it to prev + if ( current === "*" ) { + current = prev; + // If no auto and dataTypes are actually different + } else if ( prev !== "*" && prev !== current ) { + + // Get the converter + conversion = prev + " " + current; + conv = converters[ conversion ] || converters[ "* " + current ]; + + // If there is no direct converter, search transitively + if ( !conv ) { + conv2 = undefined; + for ( conv1 in converters ) { + tmp = conv1.split( " " ); + if ( tmp[ 0 ] === prev || tmp[ 0 ] === "*" ) { + conv2 = converters[ tmp[1] + " " + current ]; + if ( conv2 ) { + conv1 = converters[ conv1 ]; + if ( conv1 === true ) { + conv = conv2; + } else if ( conv2 === true ) { + conv = conv1; + } + break; + } + } + } + } + // If we found no converter, dispatch an error + if ( !( conv || conv2 ) ) { + jQuery.error( "No conversion from " + conversion.replace(" "," to ") ); + } + // If found converter is not an equivalence + if ( conv !== true ) { + // Convert with 1 or 2 converters accordingly + response = conv ? conv( response ) : conv2( conv1(response) ); + } + } + } + return response; +} + + + + +var jsc = jQuery.now(), + jsre = /(\=)\?(&|$)|\?\?/i; + +// Default jsonp settings +jQuery.ajaxSetup({ + jsonp: "callback", + jsonpCallback: function() { + return jQuery.expando + "_" + ( jsc++ ); + } +}); + +// Detect, normalize options and install callbacks for jsonp requests +jQuery.ajaxPrefilter( "json jsonp", function( s, originalSettings, jqXHR ) { + + var inspectData = s.contentType === "application/x-www-form-urlencoded" && + ( typeof s.data === "string" ); + + if ( s.dataTypes[ 0 ] === "jsonp" || + s.jsonp !== false && ( jsre.test( s.url ) || + inspectData && jsre.test( s.data ) ) ) { + + var responseContainer, + jsonpCallback = s.jsonpCallback = + jQuery.isFunction( s.jsonpCallback ) ? s.jsonpCallback() : s.jsonpCallback, + previous = window[ jsonpCallback ], + url = s.url, + data = s.data, + replace = "$1" + jsonpCallback + "$2"; + + if ( s.jsonp !== false ) { + url = url.replace( jsre, replace ); + if ( s.url === url ) { + if ( inspectData ) { + data = data.replace( jsre, replace ); + } + if ( s.data === data ) { + // Add callback manually + url += (/\?/.test( url ) ? "&" : "?") + s.jsonp + "=" + jsonpCallback; + } + } + } + + s.url = url; + s.data = data; + + // Install callback + window[ jsonpCallback ] = function( response ) { + responseContainer = [ response ]; + }; + + // Clean-up function + jqXHR.always(function() { + // Set callback back to previous value + window[ jsonpCallback ] = previous; + // Call if it was a function and we have a response + if ( responseContainer && jQuery.isFunction( previous ) ) { + window[ jsonpCallback ]( responseContainer[ 0 ] ); + } + }); + + // Use data converter to retrieve json after script execution + s.converters["script json"] = function() { + if ( !responseContainer ) { + jQuery.error( jsonpCallback + " was not called" ); + } + return responseContainer[ 0 ]; + }; + + // force json dataType + s.dataTypes[ 0 ] = "json"; + + // Delegate to script + return "script"; + } +}); + + + + +// Install script dataType +jQuery.ajaxSetup({ + accepts: { + script: "text/javascript, application/javascript, application/ecmascript, application/x-ecmascript" + }, + contents: { + script: /javascript|ecmascript/ + }, + converters: { + "text script": function( text ) { + jQuery.globalEval( text ); + return text; + } + } +}); + +// Handle cache's special case and global +jQuery.ajaxPrefilter( "script", function( s ) { + if ( s.cache === undefined ) { + s.cache = false; + } + if ( s.crossDomain ) { + s.type = "GET"; + s.global = false; + } +}); + +// Bind script tag hack transport +jQuery.ajaxTransport( "script", function(s) { + + // This transport only deals with cross domain requests + if ( s.crossDomain ) { + + var script, + head = document.head || document.getElementsByTagName( "head" )[0] || document.documentElement; + + return { + + send: function( _, callback ) { + + script = document.createElement( "script" ); + + script.async = "async"; + + if ( s.scriptCharset ) { + script.charset = s.scriptCharset; + } + + script.src = s.url; + + // Attach handlers for all browsers + script.onload = script.onreadystatechange = function( _, isAbort ) { + + if ( isAbort || !script.readyState || /loaded|complete/.test( script.readyState ) ) { + + // Handle memory leak in IE + script.onload = script.onreadystatechange = null; + + // Remove the script + if ( head && script.parentNode ) { + head.removeChild( script ); + } + + // Dereference the script + script = undefined; + + // Callback if not abort + if ( !isAbort ) { + callback( 200, "success" ); + } + } + }; + // Use insertBefore instead of appendChild to circumvent an IE6 bug. + // This arises when a base node is used (#2709 and #4378). + head.insertBefore( script, head.firstChild ); + }, + + abort: function() { + if ( script ) { + script.onload( 0, 1 ); + } + } + }; + } +}); + + + + +var // #5280: Internet Explorer will keep connections alive if we don't abort on unload + xhrOnUnloadAbort = window.ActiveXObject ? function() { + // Abort all pending requests + for ( var key in xhrCallbacks ) { + xhrCallbacks[ key ]( 0, 1 ); + } + } : false, + xhrId = 0, + xhrCallbacks; + +// Functions to create xhrs +function createStandardXHR() { + try { + return new window.XMLHttpRequest(); + } catch( e ) {} +} + +function createActiveXHR() { + try { + return new window.ActiveXObject( "Microsoft.XMLHTTP" ); + } catch( e ) {} +} + +// Create the request object +// (This is still attached to ajaxSettings for backward compatibility) +jQuery.ajaxSettings.xhr = window.ActiveXObject ? + /* Microsoft failed to properly + * implement the XMLHttpRequest in IE7 (can't request local files), + * so we use the ActiveXObject when it is available + * Additionally XMLHttpRequest can be disabled in IE7/IE8 so + * we need a fallback. + */ + function() { + return !this.isLocal && createStandardXHR() || createActiveXHR(); + } : + // For all other browsers, use the standard XMLHttpRequest object + createStandardXHR; + +// Determine support properties +(function( xhr ) { + jQuery.extend( jQuery.support, { + ajax: !!xhr, + cors: !!xhr && ( "withCredentials" in xhr ) + }); +})( jQuery.ajaxSettings.xhr() ); + +// Create transport if the browser can provide an xhr +if ( jQuery.support.ajax ) { + + jQuery.ajaxTransport(function( s ) { + // Cross domain only allowed if supported through XMLHttpRequest + if ( !s.crossDomain || jQuery.support.cors ) { + + var callback; + + return { + send: function( headers, complete ) { + + // Get a new xhr + var xhr = s.xhr(), + handle, + i; + + // Open the socket + // Passing null username, generates a login popup on Opera (#2865) + if ( s.username ) { + xhr.open( s.type, s.url, s.async, s.username, s.password ); + } else { + xhr.open( s.type, s.url, s.async ); + } + + // Apply custom fields if provided + if ( s.xhrFields ) { + for ( i in s.xhrFields ) { + xhr[ i ] = s.xhrFields[ i ]; + } + } + + // Override mime type if needed + if ( s.mimeType && xhr.overrideMimeType ) { + xhr.overrideMimeType( s.mimeType ); + } + + // X-Requested-With header + // For cross-domain requests, seeing as conditions for a preflight are + // akin to a jigsaw puzzle, we simply never set it to be sure. + // (it can always be set on a per-request basis or even using ajaxSetup) + // For same-domain requests, won't change header if already provided. + if ( !s.crossDomain && !headers["X-Requested-With"] ) { + headers[ "X-Requested-With" ] = "XMLHttpRequest"; + } + + // Need an extra try/catch for cross domain requests in Firefox 3 + try { + for ( i in headers ) { + xhr.setRequestHeader( i, headers[ i ] ); + } + } catch( _ ) {} + + // Do send the request + // This may raise an exception which is actually + // handled in jQuery.ajax (so no try/catch here) + xhr.send( ( s.hasContent && s.data ) || null ); + + // Listener + callback = function( _, isAbort ) { + + var status, + statusText, + responseHeaders, + responses, + xml; + + // Firefox throws exceptions when accessing properties + // of an xhr when a network error occured + // http://helpful.knobs-dials.com/index.php/Component_returned_failure_code:_0x80040111_(NS_ERROR_NOT_AVAILABLE) + try { + + // Was never called and is aborted or complete + if ( callback && ( isAbort || xhr.readyState === 4 ) ) { + + // Only called once + callback = undefined; + + // Do not keep as active anymore + if ( handle ) { + xhr.onreadystatechange = jQuery.noop; + if ( xhrOnUnloadAbort ) { + delete xhrCallbacks[ handle ]; + } + } + + // If it's an abort + if ( isAbort ) { + // Abort it manually if needed + if ( xhr.readyState !== 4 ) { + xhr.abort(); + } + } else { + status = xhr.status; + responseHeaders = xhr.getAllResponseHeaders(); + responses = {}; + xml = xhr.responseXML; + + // Construct response list + if ( xml && xml.documentElement /* #4958 */ ) { + responses.xml = xml; + } + responses.text = xhr.responseText; + + // Firefox throws an exception when accessing + // statusText for faulty cross-domain requests + try { + statusText = xhr.statusText; + } catch( e ) { + // We normalize with Webkit giving an empty statusText + statusText = ""; + } + + // Filter status for non standard behaviors + + // If the request is local and we have data: assume a success + // (success with no data won't get notified, that's the best we + // can do given current implementations) + if ( !status && s.isLocal && !s.crossDomain ) { + status = responses.text ? 200 : 404; + // IE - #1450: sometimes returns 1223 when it should be 204 + } else if ( status === 1223 ) { + status = 204; + } + } + } + } catch( firefoxAccessException ) { + if ( !isAbort ) { + complete( -1, firefoxAccessException ); + } + } + + // Call complete if needed + if ( responses ) { + complete( status, statusText, responses, responseHeaders ); + } + }; + + // if we're in sync mode or it's in cache + // and has been retrieved directly (IE6 & IE7) + // we need to manually fire the callback + if ( !s.async || xhr.readyState === 4 ) { + callback(); + } else { + handle = ++xhrId; + if ( xhrOnUnloadAbort ) { + // Create the active xhrs callbacks list if needed + // and attach the unload handler + if ( !xhrCallbacks ) { + xhrCallbacks = {}; + jQuery( window ).unload( xhrOnUnloadAbort ); + } + // Add to list of active xhrs callbacks + xhrCallbacks[ handle ] = callback; + } + xhr.onreadystatechange = callback; + } + }, + + abort: function() { + if ( callback ) { + callback(0,1); + } + } + }; + } + }); +} + + + + +var elemdisplay = {}, + iframe, iframeDoc, + rfxtypes = /^(?:toggle|show|hide)$/, + rfxnum = /^([+\-]=)?([\d+.\-]+)([a-z%]*)$/i, + timerId, + fxAttrs = [ + // height animations + [ "height", "marginTop", "marginBottom", "paddingTop", "paddingBottom" ], + // width animations + [ "width", "marginLeft", "marginRight", "paddingLeft", "paddingRight" ], + // opacity animations + [ "opacity" ] + ], + fxNow; + +jQuery.fn.extend({ + show: function( speed, easing, callback ) { + var elem, display; + + if ( speed || speed === 0 ) { + return this.animate( genFx("show", 3), speed, easing, callback ); + + } else { + for ( var i = 0, j = this.length; i < j; i++ ) { + elem = this[ i ]; + + if ( elem.style ) { + display = elem.style.display; + + // Reset the inline display of this element to learn if it is + // being hidden by cascaded rules or not + if ( !jQuery._data(elem, "olddisplay") && display === "none" ) { + display = elem.style.display = ""; + } + + // Set elements which have been overridden with display: none + // in a stylesheet to whatever the default browser style is + // for such an element + if ( display === "" && jQuery.css(elem, "display") === "none" ) { + jQuery._data( elem, "olddisplay", defaultDisplay(elem.nodeName) ); + } + } + } + + // Set the display of most of the elements in a second loop + // to avoid the constant reflow + for ( i = 0; i < j; i++ ) { + elem = this[ i ]; + + if ( elem.style ) { + display = elem.style.display; + + if ( display === "" || display === "none" ) { + elem.style.display = jQuery._data( elem, "olddisplay" ) || ""; + } + } + } + + return this; + } + }, + + hide: function( speed, easing, callback ) { + if ( speed || speed === 0 ) { + return this.animate( genFx("hide", 3), speed, easing, callback); + + } else { + var elem, display, + i = 0, + j = this.length; + + for ( ; i < j; i++ ) { + elem = this[i]; + if ( elem.style ) { + display = jQuery.css( elem, "display" ); + + if ( display !== "none" && !jQuery._data( elem, "olddisplay" ) ) { + jQuery._data( elem, "olddisplay", display ); + } + } + } + + // Set the display of the elements in a second loop + // to avoid the constant reflow + for ( i = 0; i < j; i++ ) { + if ( this[i].style ) { + this[i].style.display = "none"; + } + } + + return this; + } + }, + + // Save the old toggle function + _toggle: jQuery.fn.toggle, + + toggle: function( fn, fn2, callback ) { + var bool = typeof fn === "boolean"; + + if ( jQuery.isFunction(fn) && jQuery.isFunction(fn2) ) { + this._toggle.apply( this, arguments ); + + } else if ( fn == null || bool ) { + this.each(function() { + var state = bool ? fn : jQuery(this).is(":hidden"); + jQuery(this)[ state ? "show" : "hide" ](); + }); + + } else { + this.animate(genFx("toggle", 3), fn, fn2, callback); + } + + return this; + }, + + fadeTo: function( speed, to, easing, callback ) { + return this.filter(":hidden").css("opacity", 0).show().end() + .animate({opacity: to}, speed, easing, callback); + }, + + animate: function( prop, speed, easing, callback ) { + var optall = jQuery.speed( speed, easing, callback ); + + if ( jQuery.isEmptyObject( prop ) ) { + return this.each( optall.complete, [ false ] ); + } + + // Do not change referenced properties as per-property easing will be lost + prop = jQuery.extend( {}, prop ); + + function doAnimation() { + // XXX 'this' does not always have a nodeName when running the + // test suite + + if ( optall.queue === false ) { + jQuery._mark( this ); + } + + var opt = jQuery.extend( {}, optall ), + isElement = this.nodeType === 1, + hidden = isElement && jQuery(this).is(":hidden"), + name, val, p, e, + parts, start, end, unit, + method; + + // will store per property easing and be used to determine when an animation is complete + opt.animatedProperties = {}; + + for ( p in prop ) { + + // property name normalization + name = jQuery.camelCase( p ); + if ( p !== name ) { + prop[ name ] = prop[ p ]; + delete prop[ p ]; + } + + val = prop[ name ]; + + // easing resolution: per property > opt.specialEasing > opt.easing > 'swing' (default) + if ( jQuery.isArray( val ) ) { + opt.animatedProperties[ name ] = val[ 1 ]; + val = prop[ name ] = val[ 0 ]; + } else { + opt.animatedProperties[ name ] = opt.specialEasing && opt.specialEasing[ name ] || opt.easing || 'swing'; + } + + if ( val === "hide" && hidden || val === "show" && !hidden ) { + return opt.complete.call( this ); + } + + if ( isElement && ( name === "height" || name === "width" ) ) { + // Make sure that nothing sneaks out + // Record all 3 overflow attributes because IE does not + // change the overflow attribute when overflowX and + // overflowY are set to the same value + opt.overflow = [ this.style.overflow, this.style.overflowX, this.style.overflowY ]; + + // Set display property to inline-block for height/width + // animations on inline elements that are having width/height animated + if ( jQuery.css( this, "display" ) === "inline" && + jQuery.css( this, "float" ) === "none" ) { + + // inline-level elements accept inline-block; + // block-level elements need to be inline with layout + if ( !jQuery.support.inlineBlockNeedsLayout || defaultDisplay( this.nodeName ) === "inline" ) { + this.style.display = "inline-block"; + + } else { + this.style.zoom = 1; + } + } + } + } + + if ( opt.overflow != null ) { + this.style.overflow = "hidden"; + } + + for ( p in prop ) { + e = new jQuery.fx( this, opt, p ); + val = prop[ p ]; + + if ( rfxtypes.test( val ) ) { + + // Tracks whether to show or hide based on private + // data attached to the element + method = jQuery._data( this, "toggle" + p ) || ( val === "toggle" ? hidden ? "show" : "hide" : 0 ); + if ( method ) { + jQuery._data( this, "toggle" + p, method === "show" ? "hide" : "show" ); + e[ method ](); + } else { + e[ val ](); + } + + } else { + parts = rfxnum.exec( val ); + start = e.cur(); + + if ( parts ) { + end = parseFloat( parts[2] ); + unit = parts[3] || ( jQuery.cssNumber[ p ] ? "" : "px" ); + + // We need to compute starting value + if ( unit !== "px" ) { + jQuery.style( this, p, (end || 1) + unit); + start = ( (end || 1) / e.cur() ) * start; + jQuery.style( this, p, start + unit); + } + + // If a +=/-= token was provided, we're doing a relative animation + if ( parts[1] ) { + end = ( (parts[ 1 ] === "-=" ? -1 : 1) * end ) + start; + } + + e.custom( start, end, unit ); + + } else { + e.custom( start, val, "" ); + } + } + } + + // For JS strict compliance + return true; + } + + return optall.queue === false ? + this.each( doAnimation ) : + this.queue( optall.queue, doAnimation ); + }, + + stop: function( type, clearQueue, gotoEnd ) { + if ( typeof type !== "string" ) { + gotoEnd = clearQueue; + clearQueue = type; + type = undefined; + } + if ( clearQueue && type !== false ) { + this.queue( type || "fx", [] ); + } + + return this.each(function() { + var index, + hadTimers = false, + timers = jQuery.timers, + data = jQuery._data( this ); + + // clear marker counters if we know they won't be + if ( !gotoEnd ) { + jQuery._unmark( true, this ); + } + + function stopQueue( elem, data, index ) { + var hooks = data[ index ]; + jQuery.removeData( elem, index, true ); + hooks.stop( gotoEnd ); + } + + if ( type == null ) { + for ( index in data ) { + if ( data[ index ] && data[ index ].stop && index.indexOf(".run") === index.length - 4 ) { + stopQueue( this, data, index ); + } + } + } else if ( data[ index = type + ".run" ] && data[ index ].stop ){ + stopQueue( this, data, index ); + } + + for ( index = timers.length; index--; ) { + if ( timers[ index ].elem === this && (type == null || timers[ index ].queue === type) ) { + if ( gotoEnd ) { + + // force the next step to be the last + timers[ index ]( true ); + } else { + timers[ index ].saveState(); + } + hadTimers = true; + timers.splice( index, 1 ); + } + } + + // start the next in the queue if the last step wasn't forced + // timers currently will call their complete callbacks, which will dequeue + // but only if they were gotoEnd + if ( !( gotoEnd && hadTimers ) ) { + jQuery.dequeue( this, type ); + } + }); + } + +}); + +// Animations created synchronously will run synchronously +function createFxNow() { + setTimeout( clearFxNow, 0 ); + return ( fxNow = jQuery.now() ); +} + +function clearFxNow() { + fxNow = undefined; +} + +// Generate parameters to create a standard animation +function genFx( type, num ) { + var obj = {}; + + jQuery.each( fxAttrs.concat.apply([], fxAttrs.slice( 0, num )), function() { + obj[ this ] = type; + }); + + return obj; +} + +// Generate shortcuts for custom animations +jQuery.each({ + slideDown: genFx( "show", 1 ), + slideUp: genFx( "hide", 1 ), + slideToggle: genFx( "toggle", 1 ), + fadeIn: { opacity: "show" }, + fadeOut: { opacity: "hide" }, + fadeToggle: { opacity: "toggle" } +}, function( name, props ) { + jQuery.fn[ name ] = function( speed, easing, callback ) { + return this.animate( props, speed, easing, callback ); + }; +}); + +jQuery.extend({ + speed: function( speed, easing, fn ) { + var opt = speed && typeof speed === "object" ? jQuery.extend( {}, speed ) : { + complete: fn || !fn && easing || + jQuery.isFunction( speed ) && speed, + duration: speed, + easing: fn && easing || easing && !jQuery.isFunction( easing ) && easing + }; + + opt.duration = jQuery.fx.off ? 0 : typeof opt.duration === "number" ? opt.duration : + opt.duration in jQuery.fx.speeds ? jQuery.fx.speeds[ opt.duration ] : jQuery.fx.speeds._default; + + // normalize opt.queue - true/undefined/null -> "fx" + if ( opt.queue == null || opt.queue === true ) { + opt.queue = "fx"; + } + + // Queueing + opt.old = opt.complete; + + opt.complete = function( noUnmark ) { + if ( jQuery.isFunction( opt.old ) ) { + opt.old.call( this ); + } + + if ( opt.queue ) { + jQuery.dequeue( this, opt.queue ); + } else if ( noUnmark !== false ) { + jQuery._unmark( this ); + } + }; + + return opt; + }, + + easing: { + linear: function( p, n, firstNum, diff ) { + return firstNum + diff * p; + }, + swing: function( p, n, firstNum, diff ) { + return ( ( -Math.cos( p*Math.PI ) / 2 ) + 0.5 ) * diff + firstNum; + } + }, + + timers: [], + + fx: function( elem, options, prop ) { + this.options = options; + this.elem = elem; + this.prop = prop; + + options.orig = options.orig || {}; + } + +}); + +jQuery.fx.prototype = { + // Simple function for setting a style value + update: function() { + if ( this.options.step ) { + this.options.step.call( this.elem, this.now, this ); + } + + ( jQuery.fx.step[ this.prop ] || jQuery.fx.step._default )( this ); + }, + + // Get the current size + cur: function() { + if ( this.elem[ this.prop ] != null && (!this.elem.style || this.elem.style[ this.prop ] == null) ) { + return this.elem[ this.prop ]; + } + + var parsed, + r = jQuery.css( this.elem, this.prop ); + // Empty strings, null, undefined and "auto" are converted to 0, + // complex values such as "rotate(1rad)" are returned as is, + // simple values such as "10px" are parsed to Float. + return isNaN( parsed = parseFloat( r ) ) ? !r || r === "auto" ? 0 : r : parsed; + }, + + // Start an animation from one number to another + custom: function( from, to, unit ) { + var self = this, + fx = jQuery.fx; + + this.startTime = fxNow || createFxNow(); + this.end = to; + this.now = this.start = from; + this.pos = this.state = 0; + this.unit = unit || this.unit || ( jQuery.cssNumber[ this.prop ] ? "" : "px" ); + + function t( gotoEnd ) { + return self.step( gotoEnd ); + } + + t.queue = this.options.queue; + t.elem = this.elem; + t.saveState = function() { + if ( self.options.hide && jQuery._data( self.elem, "fxshow" + self.prop ) === undefined ) { + jQuery._data( self.elem, "fxshow" + self.prop, self.start ); + } + }; + + if ( t() && jQuery.timers.push(t) && !timerId ) { + timerId = setInterval( fx.tick, fx.interval ); + } + }, + + // Simple 'show' function + show: function() { + var dataShow = jQuery._data( this.elem, "fxshow" + this.prop ); + + // Remember where we started, so that we can go back to it later + this.options.orig[ this.prop ] = dataShow || jQuery.style( this.elem, this.prop ); + this.options.show = true; + + // Begin the animation + // Make sure that we start at a small width/height to avoid any flash of content + if ( dataShow !== undefined ) { + // This show is picking up where a previous hide or show left off + this.custom( this.cur(), dataShow ); + } else { + this.custom( this.prop === "width" || this.prop === "height" ? 1 : 0, this.cur() ); + } + + // Start by showing the element + jQuery( this.elem ).show(); + }, + + // Simple 'hide' function + hide: function() { + // Remember where we started, so that we can go back to it later + this.options.orig[ this.prop ] = jQuery._data( this.elem, "fxshow" + this.prop ) || jQuery.style( this.elem, this.prop ); + this.options.hide = true; + + // Begin the animation + this.custom( this.cur(), 0 ); + }, + + // Each step of an animation + step: function( gotoEnd ) { + var p, n, complete, + t = fxNow || createFxNow(), + done = true, + elem = this.elem, + options = this.options; + + if ( gotoEnd || t >= options.duration + this.startTime ) { + this.now = this.end; + this.pos = this.state = 1; + this.update(); + + options.animatedProperties[ this.prop ] = true; + + for ( p in options.animatedProperties ) { + if ( options.animatedProperties[ p ] !== true ) { + done = false; + } + } + + if ( done ) { + // Reset the overflow + if ( options.overflow != null && !jQuery.support.shrinkWrapBlocks ) { + + jQuery.each( [ "", "X", "Y" ], function( index, value ) { + elem.style[ "overflow" + value ] = options.overflow[ index ]; + }); + } + + // Hide the element if the "hide" operation was done + if ( options.hide ) { + jQuery( elem ).hide(); + } + + // Reset the properties, if the item has been hidden or shown + if ( options.hide || options.show ) { + for ( p in options.animatedProperties ) { + jQuery.style( elem, p, options.orig[ p ] ); + jQuery.removeData( elem, "fxshow" + p, true ); + // Toggle data is no longer needed + jQuery.removeData( elem, "toggle" + p, true ); + } + } + + // Execute the complete function + // in the event that the complete function throws an exception + // we must ensure it won't be called twice. #5684 + + complete = options.complete; + if ( complete ) { + + options.complete = false; + complete.call( elem ); + } + } + + return false; + + } else { + // classical easing cannot be used with an Infinity duration + if ( options.duration == Infinity ) { + this.now = t; + } else { + n = t - this.startTime; + this.state = n / options.duration; + + // Perform the easing function, defaults to swing + this.pos = jQuery.easing[ options.animatedProperties[this.prop] ]( this.state, n, 0, 1, options.duration ); + this.now = this.start + ( (this.end - this.start) * this.pos ); + } + // Perform the next step of the animation + this.update(); + } + + return true; + } +}; + +jQuery.extend( jQuery.fx, { + tick: function() { + var timer, + timers = jQuery.timers, + i = 0; + + for ( ; i < timers.length; i++ ) { + timer = timers[ i ]; + // Checks the timer has not already been removed + if ( !timer() && timers[ i ] === timer ) { + timers.splice( i--, 1 ); + } + } + + if ( !timers.length ) { + jQuery.fx.stop(); + } + }, + + interval: 13, + + stop: function() { + clearInterval( timerId ); + timerId = null; + }, + + speeds: { + slow: 600, + fast: 200, + // Default speed + _default: 400 + }, + + step: { + opacity: function( fx ) { + jQuery.style( fx.elem, "opacity", fx.now ); + }, + + _default: function( fx ) { + if ( fx.elem.style && fx.elem.style[ fx.prop ] != null ) { + fx.elem.style[ fx.prop ] = fx.now + fx.unit; + } else { + fx.elem[ fx.prop ] = fx.now; + } + } + } +}); + +// Adds width/height step functions +// Do not set anything below 0 +jQuery.each([ "width", "height" ], function( i, prop ) { + jQuery.fx.step[ prop ] = function( fx ) { + jQuery.style( fx.elem, prop, Math.max(0, fx.now) + fx.unit ); + }; +}); + +if ( jQuery.expr && jQuery.expr.filters ) { + jQuery.expr.filters.animated = function( elem ) { + return jQuery.grep(jQuery.timers, function( fn ) { + return elem === fn.elem; + }).length; + }; +} + +// Try to restore the default display value of an element +function defaultDisplay( nodeName ) { + + if ( !elemdisplay[ nodeName ] ) { + + var body = document.body, + elem = jQuery( "<" + nodeName + ">" ).appendTo( body ), + display = elem.css( "display" ); + elem.remove(); + + // If the simple way fails, + // get element's real default display by attaching it to a temp iframe + if ( display === "none" || display === "" ) { + // No iframe to use yet, so create it + if ( !iframe ) { + iframe = document.createElement( "iframe" ); + iframe.frameBorder = iframe.width = iframe.height = 0; + } + + body.appendChild( iframe ); + + // Create a cacheable copy of the iframe document on first call. + // IE and Opera will allow us to reuse the iframeDoc without re-writing the fake HTML + // document to it; WebKit & Firefox won't allow reusing the iframe document. + if ( !iframeDoc || !iframe.createElement ) { + iframeDoc = ( iframe.contentWindow || iframe.contentDocument ).document; + iframeDoc.write( ( document.compatMode === "CSS1Compat" ? "<!doctype html>" : "" ) + "<html><body>" ); + iframeDoc.close(); + } + + elem = iframeDoc.createElement( nodeName ); + + iframeDoc.body.appendChild( elem ); + + display = jQuery.css( elem, "display" ); + body.removeChild( iframe ); + } + + // Store the correct default display + elemdisplay[ nodeName ] = display; + } + + return elemdisplay[ nodeName ]; +} + + + + +var rtable = /^t(?:able|d|h)$/i, + rroot = /^(?:body|html)$/i; + +if ( "getBoundingClientRect" in document.documentElement ) { + jQuery.fn.offset = function( options ) { + var elem = this[0], box; + + if ( options ) { + return this.each(function( i ) { + jQuery.offset.setOffset( this, options, i ); + }); + } + + if ( !elem || !elem.ownerDocument ) { + return null; + } + + if ( elem === elem.ownerDocument.body ) { + return jQuery.offset.bodyOffset( elem ); + } + + try { + box = elem.getBoundingClientRect(); + } catch(e) {} + + var doc = elem.ownerDocument, + docElem = doc.documentElement; + + // Make sure we're not dealing with a disconnected DOM node + if ( !box || !jQuery.contains( docElem, elem ) ) { + return box ? { top: box.top, left: box.left } : { top: 0, left: 0 }; + } + + var body = doc.body, + win = getWindow(doc), + clientTop = docElem.clientTop || body.clientTop || 0, + clientLeft = docElem.clientLeft || body.clientLeft || 0, + scrollTop = win.pageYOffset || jQuery.support.boxModel && docElem.scrollTop || body.scrollTop, + scrollLeft = win.pageXOffset || jQuery.support.boxModel && docElem.scrollLeft || body.scrollLeft, + top = box.top + scrollTop - clientTop, + left = box.left + scrollLeft - clientLeft; + + return { top: top, left: left }; + }; + +} else { + jQuery.fn.offset = function( options ) { + var elem = this[0]; + + if ( options ) { + return this.each(function( i ) { + jQuery.offset.setOffset( this, options, i ); + }); + } + + if ( !elem || !elem.ownerDocument ) { + return null; + } + + if ( elem === elem.ownerDocument.body ) { + return jQuery.offset.bodyOffset( elem ); + } + + var computedStyle, + offsetParent = elem.offsetParent, + prevOffsetParent = elem, + doc = elem.ownerDocument, + docElem = doc.documentElement, + body = doc.body, + defaultView = doc.defaultView, + prevComputedStyle = defaultView ? defaultView.getComputedStyle( elem, null ) : elem.currentStyle, + top = elem.offsetTop, + left = elem.offsetLeft; + + while ( (elem = elem.parentNode) && elem !== body && elem !== docElem ) { + if ( jQuery.support.fixedPosition && prevComputedStyle.position === "fixed" ) { + break; + } + + computedStyle = defaultView ? defaultView.getComputedStyle(elem, null) : elem.currentStyle; + top -= elem.scrollTop; + left -= elem.scrollLeft; + + if ( elem === offsetParent ) { + top += elem.offsetTop; + left += elem.offsetLeft; + + if ( jQuery.support.doesNotAddBorder && !(jQuery.support.doesAddBorderForTableAndCells && rtable.test(elem.nodeName)) ) { + top += parseFloat( computedStyle.borderTopWidth ) || 0; + left += parseFloat( computedStyle.borderLeftWidth ) || 0; + } + + prevOffsetParent = offsetParent; + offsetParent = elem.offsetParent; + } + + if ( jQuery.support.subtractsBorderForOverflowNotVisible && computedStyle.overflow !== "visible" ) { + top += parseFloat( computedStyle.borderTopWidth ) || 0; + left += parseFloat( computedStyle.borderLeftWidth ) || 0; + } + + prevComputedStyle = computedStyle; + } + + if ( prevComputedStyle.position === "relative" || prevComputedStyle.position === "static" ) { + top += body.offsetTop; + left += body.offsetLeft; + } + + if ( jQuery.support.fixedPosition && prevComputedStyle.position === "fixed" ) { + top += Math.max( docElem.scrollTop, body.scrollTop ); + left += Math.max( docElem.scrollLeft, body.scrollLeft ); + } + + return { top: top, left: left }; + }; +} + +jQuery.offset = { + + bodyOffset: function( body ) { + var top = body.offsetTop, + left = body.offsetLeft; + + if ( jQuery.support.doesNotIncludeMarginInBodyOffset ) { + top += parseFloat( jQuery.css(body, "marginTop") ) || 0; + left += parseFloat( jQuery.css(body, "marginLeft") ) || 0; + } + + return { top: top, left: left }; + }, + + setOffset: function( elem, options, i ) { + var position = jQuery.css( elem, "position" ); + + // set position first, in-case top/left are set even on static elem + if ( position === "static" ) { + elem.style.position = "relative"; + } + + var curElem = jQuery( elem ), + curOffset = curElem.offset(), + curCSSTop = jQuery.css( elem, "top" ), + curCSSLeft = jQuery.css( elem, "left" ), + calculatePosition = ( position === "absolute" || position === "fixed" ) && jQuery.inArray("auto", [curCSSTop, curCSSLeft]) > -1, + props = {}, curPosition = {}, curTop, curLeft; + + // need to be able to calculate position if either top or left is auto and position is either absolute or fixed + if ( calculatePosition ) { + curPosition = curElem.position(); + curTop = curPosition.top; + curLeft = curPosition.left; + } else { + curTop = parseFloat( curCSSTop ) || 0; + curLeft = parseFloat( curCSSLeft ) || 0; + } + + if ( jQuery.isFunction( options ) ) { + options = options.call( elem, i, curOffset ); + } + + if ( options.top != null ) { + props.top = ( options.top - curOffset.top ) + curTop; + } + if ( options.left != null ) { + props.left = ( options.left - curOffset.left ) + curLeft; + } + + if ( "using" in options ) { + options.using.call( elem, props ); + } else { + curElem.css( props ); + } + } +}; + + +jQuery.fn.extend({ + + position: function() { + if ( !this[0] ) { + return null; + } + + var elem = this[0], + + // Get *real* offsetParent + offsetParent = this.offsetParent(), + + // Get correct offsets + offset = this.offset(), + parentOffset = rroot.test(offsetParent[0].nodeName) ? { top: 0, left: 0 } : offsetParent.offset(); + + // Subtract element margins + // note: when an element has margin: auto the offsetLeft and marginLeft + // are the same in Safari causing offset.left to incorrectly be 0 + offset.top -= parseFloat( jQuery.css(elem, "marginTop") ) || 0; + offset.left -= parseFloat( jQuery.css(elem, "marginLeft") ) || 0; + + // Add offsetParent borders + parentOffset.top += parseFloat( jQuery.css(offsetParent[0], "borderTopWidth") ) || 0; + parentOffset.left += parseFloat( jQuery.css(offsetParent[0], "borderLeftWidth") ) || 0; + + // Subtract the two offsets + return { + top: offset.top - parentOffset.top, + left: offset.left - parentOffset.left + }; + }, + + offsetParent: function() { + return this.map(function() { + var offsetParent = this.offsetParent || document.body; + while ( offsetParent && (!rroot.test(offsetParent.nodeName) && jQuery.css(offsetParent, "position") === "static") ) { + offsetParent = offsetParent.offsetParent; + } + return offsetParent; + }); + } +}); + + +// Create scrollLeft and scrollTop methods +jQuery.each( ["Left", "Top"], function( i, name ) { + var method = "scroll" + name; + + jQuery.fn[ method ] = function( val ) { + var elem, win; + + if ( val === undefined ) { + elem = this[ 0 ]; + + if ( !elem ) { + return null; + } + + win = getWindow( elem ); + + // Return the scroll offset + return win ? ("pageXOffset" in win) ? win[ i ? "pageYOffset" : "pageXOffset" ] : + jQuery.support.boxModel && win.document.documentElement[ method ] || + win.document.body[ method ] : + elem[ method ]; + } + + // Set the scroll offset + return this.each(function() { + win = getWindow( this ); + + if ( win ) { + win.scrollTo( + !i ? val : jQuery( win ).scrollLeft(), + i ? val : jQuery( win ).scrollTop() + ); + + } else { + this[ method ] = val; + } + }); + }; +}); + +function getWindow( elem ) { + return jQuery.isWindow( elem ) ? + elem : + elem.nodeType === 9 ? + elem.defaultView || elem.parentWindow : + false; +} + + + + +// Create width, height, innerHeight, innerWidth, outerHeight and outerWidth methods +jQuery.each([ "Height", "Width" ], function( i, name ) { + + var type = name.toLowerCase(); + + // innerHeight and innerWidth + jQuery.fn[ "inner" + name ] = function() { + var elem = this[0]; + return elem ? + elem.style ? + parseFloat( jQuery.css( elem, type, "padding" ) ) : + this[ type ]() : + null; + }; + + // outerHeight and outerWidth + jQuery.fn[ "outer" + name ] = function( margin ) { + var elem = this[0]; + return elem ? + elem.style ? + parseFloat( jQuery.css( elem, type, margin ? "margin" : "border" ) ) : + this[ type ]() : + null; + }; + + jQuery.fn[ type ] = function( size ) { + // Get window width or height + var elem = this[0]; + if ( !elem ) { + return size == null ? null : this; + } + + if ( jQuery.isFunction( size ) ) { + return this.each(function( i ) { + var self = jQuery( this ); + self[ type ]( size.call( this, i, self[ type ]() ) ); + }); + } + + if ( jQuery.isWindow( elem ) ) { + // Everyone else use document.documentElement or document.body depending on Quirks vs Standards mode + // 3rd condition allows Nokia support, as it supports the docElem prop but not CSS1Compat + var docElemProp = elem.document.documentElement[ "client" + name ], + body = elem.document.body; + return elem.document.compatMode === "CSS1Compat" && docElemProp || + body && body[ "client" + name ] || docElemProp; + + // Get document width or height + } else if ( elem.nodeType === 9 ) { + // Either scroll[Width/Height] or offset[Width/Height], whichever is greater + return Math.max( + elem.documentElement["client" + name], + elem.body["scroll" + name], elem.documentElement["scroll" + name], + elem.body["offset" + name], elem.documentElement["offset" + name] + ); + + // Get or set width or height on the element + } else if ( size === undefined ) { + var orig = jQuery.css( elem, type ), + ret = parseFloat( orig ); + + return jQuery.isNumeric( ret ) ? ret : orig; + + // Set the width or height on the element (default to pixels if value is unitless) + } else { + return this.css( type, typeof size === "string" ? size : size + "px" ); + } + }; + +}); + + + + +// Expose jQuery to the global object +window.jQuery = window.$ = jQuery; + +// Expose jQuery as an AMD module, but only for AMD loaders that +// understand the issues with loading multiple versions of jQuery +// in a page that all might call define(). The loader will indicate +// they have special allowances for multiple jQuery versions by +// specifying define.amd.jQuery = true. Register as a named module, +// since jQuery can be concatenated with other files that may use define, +// but not use a proper concatenation script that understands anonymous +// AMD modules. A named AMD is safest and most robust way to register. +// Lowercase jquery is used because AMD module names are derived from +// file names, and jQuery is normally delivered in a lowercase file name. +// Do this after creating the global so that if an AMD module wants to call +// noConflict to hide this version of jQuery, it will work. +if ( typeof define === "function" && define.amd && define.amd.jQuery ) { + define( "jquery", [], function () { return jQuery; } ); +} + + + +})( window ); diff --git a/js/tests/vendor/qunit.css b/js/tests/vendor/qunit.css index c8eb02fbee..800dac541b 100644 --- a/js/tests/vendor/qunit.css +++ b/js/tests/vendor/qunit.css @@ -227,6 +227,6 @@ /** Runoff */ -#qunit-runoff { +#qunit-fixture { display:none; } \ No newline at end of file -- GitLab From 0980a33b4703677e1aaf3cd949c0437512fa6f33 Mon Sep 17 00:00:00 2001 From: Jacob Thornton <jacobthornton@gmail.com> Date: Tue, 20 Dec 2011 19:37:41 -0800 Subject: [PATCH 136/318] update all to new on api + add animation support to tabs --- bootstrap.css | 2 +- docs/assets/js/application.js | 2 +- docs/javascript.html | 112 +++++++++++++++++++--------------- js/README.md | 4 +- js/bootstrap-alert.js | 2 +- js/bootstrap-modal.js | 6 +- js/bootstrap-popover.js | 5 +- js/bootstrap-scrollspy.js | 2 +- js/bootstrap-tab.js | 47 +++++++++----- js/bootstrap-twipsy.js | 6 +- 10 files changed, 110 insertions(+), 78 deletions(-) diff --git a/bootstrap.css b/bootstrap.css index 6411413ff7..c39a12264f 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: Mon Dec 12 09:51:27 PST 2011 + * Date: Tue Dec 20 19:08:51 PST 2011 */ html, body { margin: 0; diff --git a/docs/assets/js/application.js b/docs/assets/js/application.js index 74024caa1d..dd759bf8b2 100644 --- a/docs/assets/js/application.js +++ b/docs/assets/js/application.js @@ -37,7 +37,7 @@ $(function(){ // POSITION STATIC TWIPSIES // ======================== - $(window).bind( 'load resize', function () { + $(window).on('load resize', function () { $(".twipsies a").each(function () { $(this) .twipsy({ diff --git a/docs/javascript.html b/docs/javascript.html index 964d2f7aaf..45a7a2fe8a 100644 --- a/docs/javascript.html +++ b/docs/javascript.html @@ -93,7 +93,7 @@ ================================================== --> <header class="jumbotron subhead" id="overview"> <h1>Javascript for Bootstrap</h1> - <p class="lead">Bring Bootstrap's components to life with 12 custom, flexible <a href="http://jquery.com/" target="_blank">jQuery</a> plugins. + <p class="lead">Bring Bootstrap's components to life — now with 12 custom <a href="http://jquery.com/" target="_blank">jQuery</a> plugins. </header> @@ -121,36 +121,40 @@ </thead> <tbody> <tr> - <td><a href="./javascript.html#modal">bootstrap-modal.js</a></td> - <td>Our Modal plugin is a <strong>super</strong> slim take on the traditional modal js plugin! We took special care to include only the bare functionality that we require at twitter.</td> + <td><a href="./javascript.html#transition">bootstrap-transition.js</a></td> + <td>The transition plugin is required for adding animation to other bootstrap plugins. Include this plugin (only once) when sliding in modals or fading out alerts.</td> </tr> <tr> - <td><a href="./javascript.html#alert">bootstrap-alert.js</a></td> - <td>The alert plugin is a super tiny class for adding close functionality to alerts.</td> + <td><a href="./javascript.html#modal">bootstrap-modal.js</a></td> + <td>Our Modal plugin is a super slim take on the traditional modal js plugin! We took special care to include only the bare functionality that we require here at twitter.</td> </tr> <tr> <td><a href="./javascript.html#dropdown">bootstrap-dropdown.js</a></td> - <td>This plugin is for adding dropdown interaction to the bootstrap navbar or tabbed navigations.</td> + <td>This plugin is for adding generic dropdown interactions to things like navigation top bars and tabs.</td> </tr> <tr> <td><a href="./javascript.html#scrollspy">bootstrap-scrollspy.js</a></td> - <td>The ScrollSpy plugin is for adding an auto updating nav based on scroll position to the bootstrap navbar.</td> + <td>The ScrollSpy plugin is for automatically updating nav targets based on scroll position.</td> </tr> <tr> <td><a href="./javascript.html#tab">bootstrap-tab.js</a></td> - <td>This plugin adds quick, dynamic tab and pill functionality for cycling through local content.</td> - </tr> + <td>This plugin adds quick, dynamic tab and pill functionality for transitioning through local content.</td> <tr> <td><a href="./javascript.html#twipsy">bootstrap-twipsy.js</a></td> - <td>Based on the excellent jQuery.tipsy plugin written by Jason Frame; twipsy is an updated version, which doesn't rely on images, uses css3 for animations, and data-attributes for local title storage!</td> + <td>Inspired by the excellent jQuery.tipsy plugin written by Jason Frame; twipsy is an updated version, which doesn't rely on images, uses css3 for animations, data-attributes for local title storage, and now jquery 1.7's new event api!</td> </tr> <tr> <td><a href="./javascript.html#popover">bootstrap-popover.js</a></td> <td>The popover plugin provides a simple interface for adding popovers to your application. It extends the <a href="#twipsy">boostrap-twipsy.js</a> plugin, so be sure to grab that file as well when including popovers in your project!</td> </tr> + </tr> + <tr> + <td><a href="./javascript.html#alert">bootstrap-alert.js</a></td> + <td>The alert plugin is a tiny class for adding close functionality to alerts.</td> + </tr> <tr> <td><a href="./javascript.html#button">bootstrap-button.js</a></td> - <td>This plugin offers additional functionality for managing button state.</td> + <td>This plugin offers additional functionality for managing button state in single buttons and button sets.</td> </tr> <tr> <td><a href="./javascript.html#collapse">bootstrap-collapse.js</a></td> @@ -161,7 +165,6 @@ <h3>Is javascript necessary?</h3> <p><strong>Nope!</strong> Bootstrap is designed first and foremost to be a CSS library. This javascript provides a basic interactive layer on top of the included styles.</p> <p>However, for those who do need javascript, we've provided the plugins above to help you understand how to integrate Bootstrap with javascript and to give you a quick, lightweight option for the basic functionality right away.</p> - <p>For more information and to see some live demos, please refer to our <a href="./javascript.html">plugin documentation page</a>.</p> </div> </div> </section> @@ -265,7 +268,7 @@ $('#myModal').modal({ </table> <pre class="prettyprint linenums"> -$('#myModal').bind('hidden', function () { +$('#myModal').on('hidden', function () { // do something ... })</pre> <h3>Demo</h3> @@ -301,7 +304,7 @@ $('#myModal').bind('hidden', function () { </div> <div class="row"> <div class="span3 columns"> - <p>This plugin is for adding dropdown interaction to the Bootstrap navbar or tabbed navigations.</p> + <p>This plugin is for adding generic dropdown interactions to things like navigation top bars and tabs.</p> <a href="../js/bootstrap-dropdown.js" target="_blank" class="btn primary">Download</a> </div> <div class="span9 columns"> @@ -375,7 +378,7 @@ $('#myModal').bind('hidden', function () { </div> <div class="row"> <div class="span3 columns"> - <p>This plugin is for adding the scrollspy (auto updating nav) interaction to the bootstrap navbar.</p> + <p>The ScrollSpy plugin is for automatically updating nav targets based on scroll position.</p> <a href="../js/bootstrap-scrollspy.js" target="_blank" class="btn primary">Download</a> </div> <div class="span9 columns"> @@ -449,7 +452,7 @@ $('#myModal').bind('hidden', function () { </div> <div class="row"> <div class="span3 columns"> - <p>This plugin adds quick, dynamic tab and pill functionality.</p> + <p>This plugin adds quick, dynamic tab and pill functionality for transitioning through local content.</p> <a href="../js/bootstrap-tab.js" target="_blank" class="btn primary">Download</a> </div> <div class="span9 columns"> @@ -510,7 +513,7 @@ $('#myModal').bind('hidden', function () { </table> <pre class="prettyprint linenums"> -$('a[data-toggle="tab"]').bind('shown', function (e) { +$('a[data-toggle="tab"]').on('shown', function (e) { e.target // activated tab e.relatedTarget // previous tab })</pre> @@ -529,22 +532,22 @@ $('a[data-toggle="tab"]').bind('shown', function (e) { </li> </ul> <div id="myTabContent" class="tab-content"> - <div class="active tab-pane" id="home"> + <div class="tab-pane fade in active" id="home"> <p>Raw denim you probably haven't heard of them jean shorts Austin. Nesciunt tofu stumptown aliqua, retro synth master cleanse. Mustache cliche tempor, williamsburg carles vegan helvetica. Reprehenderit butcher retro keffiyeh dreamcatcher synth. Cosby sweater eu banh mi, qui irure terry richardson ex squid. Aliquip placeat salvia cillum iphone. Seitan aliquip quis cardigan american apparel, butcher voluptate nisi qui.</p> </div> - <div class="tab-pane" id="profile"> + <div class="tab-pane fade" id="profile"> <p>Food truck fixie locavore, accusamus mcsweeney's marfa nulla single-origin coffee squid. Exercitation +1 labore velit, blog sartorial PBR leggings next level wes anderson artisan four loko farm-to-table craft beer twee. Qui photo booth letterpress, commodo enim craft beer mlkshk aliquip jean shorts ullamco ad vinyl cillum PBR. Homo nostrud organic, assumenda labore aesthetic magna delectus mollit. Keytar helvetica VHS salvia yr, vero magna velit sapiente labore stumptown. Vegan fanny pack odio cillum wes anderson 8-bit, sustainable jean shorts beard ut DIY ethical culpa terry richardson biodiesel. Art party scenester stumptown, tumblr butcher vero sint qui sapiente accusamus tattooed echo park.</p> </div> - <div class="tab-pane" id="messages"> + <div class="tab-pane fade" id="messages"> <p>Banksy do proident, brooklyn photo booth delectus sunt artisan sed organic exercitation eiusmod four loko. Quis tattooed iphone esse aliqua. Master cleanse vero fixie mcsweeney's. Ethical portland aute, irony food truck pitchfork lomo eu anim. Aesthetic blog DIY, ethical beard leggings tofu consequat whatever cardigan nostrud. Helvetica you probably haven't heard of them carles, marfa veniam occaecat lomo before they sold out in shoreditch scenester sustainable thundercats. Consectetur tofu craft beer, mollit brunch fap echo park pitchfork mustache dolor.</p> </div> - <div class="tab-pane" id="settings"> + <div class="tab-pane fade" id="settings"> <p>Sunt qui biodiesel mollit officia, fanny pack put a bird on it thundercats seitan squid ad wolf bicycle rights blog. Et aute readymade farm-to-table carles 8-bit, nesciunt nulla etsy adipisicing organic ea. Master cleanse mollit high life, next level Austin nesciunt american apparel twee mustache adipisicing reprehenderit hoodie portland irony. Aliqua tofu quinoa +1 commodo eiusmod. High life williamsburg cupidatat twee homo leggings. Four loko vinyl DIY consectetur nisi, marfa retro keffiyeh vegan. Fanny pack viral retro consectetur gentrify fap.</p> </div> - <div class="tab-pane" id="dropdown1"> + <div class="tab-pane fade" id="dropdown1"> <p>Etsy mixtape wayfarers, ethical wes anderson tofu before they sold out mcsweeney's organic lomo retro fanny pack lo-fi farm-to-table readymade. Messenger bag gentrify pitchfork tattooed craft beer, iphone skateboard locavore carles etsy salvia banksy hoodie helvetica. DIY synth PBR banksy irony. Leggings gentrify squid 8-bit cred pitchfork. Williamsburg banh mi whatever gluten-free, carles pitchfork biodiesel fixie etsy retro mlkshk vice blog. Scenester cred you probably haven't heard of them, vinyl craft beer blog stumptown. Pitchfork sustainable tofu synth chambray yr.</p> </div> - <div class="tab-pane" id="dropdown2"> + <div class="tab-pane fade" id="dropdown2"> <p>Trust fund seitan letterpress, keytar raw denim keffiyeh etsy art party before they sold out master cleanse gluten-free squid scenester freegan cosby sweater. Fanny pack portland seitan DIY, art party locavore wolf cliche high life echo park Austin. Cred vinyl keffiyeh DIY salvia PBR, banh mi before they sold out farm-to-table VHS viral locavore cosby sweater. Lomo wolf viral, mustache readymade thundercats keffiyeh craft beer marfa ethical. Wolf salvia freegan, sartorial keffiyeh echo park vegan.</p> </div> </div> @@ -561,7 +564,7 @@ $('a[data-toggle="tab"]').bind('shown', function (e) { </div> <div class="row"> <div class="span3 columns"> - <p>Based on the excellent jQuery.tipsy plugin written by Jason Frame; twipsy is an updated version, which doesn't rely on images, uses css3 for animations, and data-attributes for title storage!</p> + <p>Inspired by the excellent jQuery.tipsy plugin written by Jason Frame; twipsy is an updated version, which doesn't rely on images, uses css3 for animations, data-attributes for local title storage, and now jquery 1.7's new event api!</p> <a href="../js/bootstrap-twipsy.js" target="_blank" class="btn primary">Download</a> </div> <div class="span9 columns"> @@ -591,16 +594,16 @@ $('a[data-toggle="tab"]').bind('shown', function (e) { <td>how to position the tooltip - above | below | left | right</td> </tr> <tr> - <td>live</td> - <td>boolean</td> + <td>selector</td> + <td>string</td> <td>false</td> - <td>use event delegation instead of individual event handlers</td> + <td>If a selector is provided, twipsy objects will be delegated to the specified targets.</td> </tr> <tr> - <td>offset</td> - <td>number</td> - <td>0</td> - <td>pixel offset of tooltip from target element</td> + <td>title</td> + <td>string | function</td> + <td>''</td> + <td>default title value if `title` tag isn't present</td> </tr> <tr> <td>trigger</td> @@ -622,7 +625,8 @@ $('a[data-toggle="tab"]').bind('shown', function (e) { </table> <p><span class="label notice">Notice</span> Individual twipsy instance options can alternatively be specified through the use of data attributes.</code></p> <h3>Markup</h3> - For performance reasons, the Twipsy and Popover data-apis are opt in. If you would like to use them just set the live flag to true, however we recommend you know what you are doing if you do that. :) + <p> + For performance reasons, the Twipsy and Popover data-apis are opt in. If you would like to use them just specify a selector option.</p> <h3>Methods</h3> <h4>$().twipsy(options)</h4> <p>Attaches a twipsy handler to an element collection.</p> @@ -673,12 +677,6 @@ $('a[data-toggle="tab"]').bind('shown', function (e) { <td>true</td> <td>apply a css fade transition to the tooltip</td> </tr> - <tr> - <td>delay</td> - <td>number | object</td> - <td>0</td> - <td>delay before showing/hiding the tooltip (ms)</td> - </tr> <tr> <td>placement</td> <td>string</td> @@ -686,16 +684,10 @@ $('a[data-toggle="tab"]').bind('shown', function (e) { <td>how to position the popover - above | below | left | right</td> </tr> <tr> - <td>live</td> - <td>boolean</td> + <td>selector</td> + <td>string</td> <td>false</td> - <td>use event delegation instead of individual event handlers</td> - </tr> - <tr> - <td>offset</td> - <td>number</td> - <td>0</td> - <td>pixel offset of tooltip from target element</td> + <td>if a selector is provided, twipsy objects will be delegated to the specified targets</td> </tr> <tr> <td>trigger</td> @@ -703,12 +695,34 @@ $('a[data-toggle="tab"]').bind('shown', function (e) { <td>'hover'</td> <td>how tooltip is triggered - hover | focus | manual</td> </tr> + <tr> + <td>title</td> + <td>string | function</td> + <td>''</td> + <td>default title value if `title` attribute isn't present</td> + </tr> + <tr> + <td>content</td> + <td>string | function</td> + <td>''</td> + <td>default content value if `data-content` attribute isn't present</td> + </tr> + <tr> + <td>delay</td> + <td>number | object</td> + <td>0</td> + <td> + <p>delay showing/hiding the popover (ms)</p> + <p>If a number is supplied, delay is applied to both hide/show</p> + <p>Object structure is: <code>delay: { show: 500, hide: 100 }</code></p> + </td> + </tr> </tbody> </table> <p><span class="label notice">Notice</span> Individual popover instance options can alternatively be specified through the use of data attributes.</code></p> <h3>Markup</h3> <p> - For performance reasons, the Twipsy and Popover data-apis are opt in. If you would like to use them just set the live flag to true, however we recommend you know what you are doing if you do that. :) + For performance reasons, the Twipsy and Popover data-apis are opt in. If you would like to use them just specify a the selector option. </p> <h3>Methods</h3> <h4>$().popover(options)</h4> @@ -969,7 +983,7 @@ $('#myCollapsible').collapse({ </table> <pre class="prettyprint linenums"> -$('#myCollapsible').bind('hidden', function () { +$('#myCollapsible').on('hidden', function () { // do something ... })</pre> <h3>Demo</h3> diff --git a/js/README.md b/js/README.md index 107dd15281..061509fd3a 100644 --- a/js/README.md +++ b/js/README.md @@ -9,11 +9,11 @@ We believe you should be able to use all plugins provided by Bootstrap purely th We acknowledge that this isn't always the most performant and sometimes it may be desirable to turn this functionality off altogether. Therefore, as of 2.0 we provide the ability to disable the data attribute API by unbinding all events on the body namespaced with `'data-api'`. This looks like this: - $('body').unbind('.data-api') + $('body').off('.data-api') To target a specific plugin, just include the plugins name as a namespace along with the data-api namespace like this: - $('body').unbind('.alert.data-api') + $('body').off('.alert.data-api') --- diff --git a/js/bootstrap-alert.js b/js/bootstrap-alert.js index db9116f761..af15cbd7be 100644 --- a/js/bootstrap-alert.js +++ b/js/bootstrap-alert.js @@ -46,7 +46,7 @@ } $.support.transition && $element.hasClass('fade') ? - $element.bind($.support.transition.end, removeElement) : + $element.on($.support.transition.end, removeElement) : removeElement() } diff --git a/js/bootstrap-modal.js b/js/bootstrap-modal.js index 38f4f51a29..f2624ec1c1 100644 --- a/js/bootstrap-modal.js +++ b/js/bootstrap-modal.js @@ -96,7 +96,7 @@ function hideWithTransition() { var that = this , timeout = setTimeout(function () { - that.$element.unbind($.support.transition.end) + that.$element.off($.support.transition.end) hideModal.call(that) }, 500) @@ -156,11 +156,11 @@ function escape() { var that = this if (this.isShown && this.options.keyboard) { - $(document).bind('keyup.dismiss.modal', function ( e ) { + $(document).on('keyup.dismiss.modal', function ( e ) { e.which == 27 && that.hide() }) } else if (!this.isShown) { - $(document).unbind('keyup.dismiss.modal') + $(document).off('keyup.dismiss.modal') } } diff --git a/js/bootstrap-popover.js b/js/bootstrap-popover.js index a0495ce699..53edfc8c9d 100644 --- a/js/bootstrap-popover.js +++ b/js/bootstrap-popover.js @@ -63,8 +63,7 @@ , tip: function() { if (!this.$tip) { - this.$tip = $('<div class="popover" />') - .html(this.options.template) + this.$tip = $(this.options.template) } return this.$tip } @@ -90,7 +89,7 @@ $.fn.popover.defaults = $.extend({} , $.fn.twipsy.defaults, { placement: 'right' , content: '' - , template: '<div class="arrow"></div><div class="inner"><h3 class="title"></h3><div class="content"><p></p></div></div>' + , template: '<div class="popover"><div class="arrow"></div><div class="inner"><h3 class="title"></h3><div class="content"><p></p></div></div></div>' }) }( window.jQuery ) \ No newline at end of file diff --git a/js/bootstrap-scrollspy.js b/js/bootstrap-scrollspy.js index 3c271793c0..041cfcb454 100644 --- a/js/bootstrap-scrollspy.js +++ b/js/bootstrap-scrollspy.js @@ -27,7 +27,7 @@ function ScrollSpy( element ) { var process = $.proxy(this.process, this) - this.$scrollElement = $(element).bind('scroll.scroll.data-api', process) + this.$scrollElement = $(element).on('scroll.scroll.data-api', process) this.selector = (this.$scrollElement.attr('data-target') || this.$scrollElement.attr('href') || '') + ' .nav li > a' diff --git a/js/bootstrap-tab.js b/js/bootstrap-tab.js index e0a92816d4..2f147c59d8 100644 --- a/js/bootstrap-tab.js +++ b/js/bootstrap-tab.js @@ -52,26 +52,45 @@ $href = $(href) this.activate($this.parent('li'), $ul) - this.activate($href, $href.parent()) - - $this.trigger({ - type: 'shown' - , relatedTarget: previous + this.activate($href, $href.parent(), function () { + $this.trigger({ + type: 'shown' + , relatedTarget: previous + }) }) } - , activate: function ( element, container ) { - container - .find('> .active') - .removeClass('active') - .find('> .dropdown-menu > .active') - .removeClass('active') + , activate: function ( element, container, callback) { + var $active = container.find('> .active') + , transition = callback + && $.support.transition + && $active.hasClass('fade') + + function next() { + $active + .removeClass('active') + .find('> .dropdown-menu > .active') + .removeClass('active') - element.addClass('active') + element.addClass('active') - if ( element.parent('.dropdown-menu') ) { - element.closest('li.dropdown').addClass('active') + if (transition) { + element[0].offsetWidth // reflow for transition + element.addClass('in') + } + + if ( element.parent('.dropdown-menu') ) { + element.closest('li.dropdown').addClass('active') + } + + callback && callback() } + + transition ? + $active.one($.support.transition.end, next) : + next() + + $active.removeClass('in') } } diff --git a/js/bootstrap-twipsy.js b/js/bootstrap-twipsy.js index ee9a415fdb..ab744b7c5a 100644 --- a/js/bootstrap-twipsy.js +++ b/js/bootstrap-twipsy.js @@ -167,7 +167,7 @@ } $.support.transition && this.$tip.hasClass('fade') ? - $tip.bind( $.support.transition.end, removeElement) : + $tip.on($.support.transition.end, removeElement) : removeElement() } @@ -196,7 +196,7 @@ } , tip: function () { - return this.$tip = this.$tip || $('<div class="twipsy" />').html(this.options.template) + return this.$tip = this.$tip || $(this.options.template) } , validate: function () { @@ -256,7 +256,7 @@ , placement: 'above' , trigger: 'hover' , title: '' - , template: '<div class="twipsy-arrow"></div><div class="twipsy-inner"></div>' + , template: '<div class="twipsy"><div class="twipsy-arrow"></div><div class="twipsy-inner"></div></div>' } }( window.jQuery ) \ No newline at end of file -- GitLab From c4364285e456013c4b66308fea86e0f1fb852817 Mon Sep 17 00:00:00 2001 From: Jacob Thornton <jacobthornton@gmail.com> Date: Tue, 20 Dec 2011 22:12:23 -0800 Subject: [PATCH 137/318] add default margin for popover and twipsy --- bootstrap.css | 26 +++++++++++++++++++++++++- bootstrap.min.css | 10 +++++++++- lib/popovers.less | 6 +++++- lib/twipsy.less | 8 +++++--- 4 files changed, 44 insertions(+), 6 deletions(-) diff --git a/bootstrap.css b/bootstrap.css index c39a12264f..f3fcca6376 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: Tue Dec 20 19:08:51 PST 2011 + * Date: Tue Dec 20 22:11:42 PST 2011 */ html, body { margin: 0; @@ -2364,6 +2364,18 @@ button.btn::-moz-focus-inner, input[type=submit].btn::-moz-focus-inner { -moz-opacity: 0.8; opacity: 0.8; } +.twipsy.above { + margin-top: -2px; +} +.twipsy.right { + margin-left: 2px; +} +.twipsy.below { + margin-top: 2px; +} +.twipsy.left { + margin-left: -2px; +} .twipsy.above .twipsy-arrow { bottom: 0; left: 50%; @@ -2420,6 +2432,18 @@ button.btn::-moz-focus-inner, input[type=submit].btn::-moz-focus-inner { display: none; padding: 5px; } +.popover.above { + margin-top: -5px; +} +.popover.right { + margin-left: 5px; +} +.popover.below { + margin-top: 5px; +} +.popover.left { + margin-left: -5px; +} .popover.above .arrow { bottom: 0; left: 50%; diff --git a/bootstrap.min.css b/bootstrap.min.css index b9e7dd1ee5..beef8754b0 100644 --- a/bootstrap.min.css +++ b/bootstrap.min.css @@ -311,13 +311,21 @@ button.btn::-moz-focus-inner,input[type=submit].btn::-moz-focus-inner{padding:0; .modal-footer:after{clear:both;} .modal-footer .btn{float:right;margin-left:5px;} .twipsy{position:absolute;z-index:1000;display:block;visibility:visible;padding:5px;font-size:11px;filter:alpha(opacity=0);-moz-opacity:0;opacity:0;}.twipsy.in{filter:alpha(opacity=80);-moz-opacity:0.8;opacity:0.8;} +.twipsy.above{margin-top:-2px;} +.twipsy.right{margin-left:2px;} +.twipsy.below{margin-top:2px;} +.twipsy.left{margin-left:-2px;} .twipsy.above .twipsy-arrow{bottom:0;left:50%;margin-left:-5px;border-left:5px solid transparent;border-right:5px solid transparent;border-top:5px solid #000000;} .twipsy.left .twipsy-arrow{top:50%;right:0;margin-top:-5px;border-top:5px solid transparent;border-bottom:5px solid transparent;border-left:5px solid #000000;} .twipsy.below .twipsy-arrow{top:0;left:50%;margin-left:-5px;border-left:5px solid transparent;border-right:5px solid transparent;border-bottom:5px solid #000000;} .twipsy.right .twipsy-arrow{top:50%;left:0;margin-top:-5px;border-top:5px solid transparent;border-bottom:5px solid transparent;border-right:5px solid #000000;} .twipsy-inner{max-width:200px;padding:3px 8px;color:white;text-align:center;text-decoration:none;background-color:#000000;-webkit-border-radius:4px;-moz-border-radius:4px;border-radius:4px;} .twipsy-arrow{position:absolute;width:0;height:0;} -.popover{position:absolute;top:0;left:0;z-index:1000;display:none;padding:5px;}.popover.above .arrow{bottom:0;left:50%;margin-left:-5px;border-left:5px solid transparent;border-right:5px solid transparent;border-top:5px solid #000000;} +.popover{position:absolute;top:0;left:0;z-index:1000;display:none;padding:5px;}.popover.above{margin-top:-5px;} +.popover.right{margin-left:5px;} +.popover.below{margin-top:5px;} +.popover.left{margin-left:-5px;} +.popover.above .arrow{bottom:0;left:50%;margin-left:-5px;border-left:5px solid transparent;border-right:5px solid transparent;border-top:5px solid #000000;} .popover.right .arrow{top:50%;left:0;margin-top:-5px;border-top:5px solid transparent;border-bottom:5px solid transparent;border-right:5px solid #000000;} .popover.below .arrow{top:0;left:50%;margin-left:-5px;border-left:5px solid transparent;border-right:5px solid transparent;border-bottom:5px solid #000000;} .popover.left .arrow{top:50%;right:0;margin-top:-5px;border-top:5px solid transparent;border-bottom:5px solid transparent;border-left:5px solid #000000;} diff --git a/lib/popovers.less b/lib/popovers.less index 570bc906c4..ff875eaffb 100644 --- a/lib/popovers.less +++ b/lib/popovers.less @@ -8,10 +8,14 @@ z-index: 1000; display: none; padding: 5px; + &.above { margin-top: -5px; } + &.right { margin-left: 5px; } + &.below { margin-top: 5px; } + &.left { margin-left: -5px; } &.above .arrow { #popoverArrow > .above(); } &.right .arrow { #popoverArrow > .right(); } &.below .arrow { #popoverArrow > .below(); } - &.left .arrow { #popoverArrow > .left(); } + &.left .arrow { #popoverArrow > .left(); } .arrow { position: absolute; width: 0; diff --git a/lib/twipsy.less b/lib/twipsy.less index 3fa21fa012..05f121a5dd 100644 --- a/lib/twipsy.less +++ b/lib/twipsy.less @@ -9,9 +9,11 @@ padding: 5px; font-size: 11px; .opacity(0); - &.in { - .opacity(80); - } + &.in { .opacity(80); } + &.above { margin-top: -2px; } + &.right { margin-left: 2px; } + &.below { margin-top: 2px; } + &.left { margin-left: -2px; } &.above .twipsy-arrow { #popoverArrow > .above(); } &.left .twipsy-arrow { #popoverArrow > .left(); } &.below .twipsy-arrow { #popoverArrow > .below(); } -- GitLab From f72a94ae2879ebfc5206dd40d5db175e13113850 Mon Sep 17 00:00:00 2001 From: Jacob Thornton <jacobthornton@gmail.com> Date: Tue, 20 Dec 2011 23:28:48 -0800 Subject: [PATCH 138/318] update more readme changes - introduce target specificty convention to more plugins --- docs/javascript.html | 39 ++++++++++++++++++--------------------- js/README.md | 28 +++++++++++++++++++++++----- js/bootstrap-alert.js | 18 +++++++++++------- js/bootstrap-button.js | 2 +- js/bootstrap-carousel.js | 2 +- js/bootstrap-collapse.js | 2 +- js/bootstrap-dropdown.js | 14 ++++++++++---- js/bootstrap-modal.js | 12 ++++++------ js/bootstrap-popover.js | 4 ++-- js/bootstrap-scrollspy.js | 2 +- js/bootstrap-tab.js | 2 +- js/bootstrap-twipsy.js | 2 +- 12 files changed, 76 insertions(+), 51 deletions(-) diff --git a/docs/javascript.html b/docs/javascript.html index 45a7a2fe8a..8a9a203e74 100644 --- a/docs/javascript.html +++ b/docs/javascript.html @@ -112,7 +112,7 @@ <div class="span9"> <h3>What's included</h3> <p>Bring some of Bootstrap's primary components to life with custom <a href="http://jquery.com/" target="_blank">jQuery</a> plugins. We encourage you to extend and modify them to fit your specific development needs.</p> - <table class="striped-table"> + <table class="bordered-table striped-table"> <thead> <tr> <th style="width: 150px;">File</th> @@ -186,7 +186,7 @@ <h3>Using bootstrap-modal</h3> <pre class="prettyprint linenums">$('#myModal').modal(options)</pre> <h3>Options</h3> - <table class="striped-table"> + <table class="bordered-table striped-table"> <thead> <tr> <th style="width: 100px;">Name</th> @@ -208,16 +208,11 @@ <td>true</td> <td>Closes the modal when escape key is pressed</td> </tr> - <tr> - <td>show</td> - <td>boolean</td> - <td>true</td> - <td>Opens modal on class initialization</td> - </tr> </tbody> </table> <h3>Markup</h3> - <p>You can activate modals on your page easily without having to write a single line of javascript. Just set <code>data-toggle="modal"</code> on a controller element with a <code>data-target="#foo"</code> or <code>href="#foo"</code> which corresponds to a modal element id, and when clicked, it will launch your modal. To add modal options, just include them as additoinal data attributes.</p> + <p>You can activate modals on your page easily without having to write a single line of javascript. Just set <code>data-toggle="modal"</code> on a controller element with a <code>data-target="#foo"</code> or <code>href="#foo"</code> which corresponds to a modal element id, and when clicked, it will launch your modal.</p> + <p>Also, to add options to your modal instance, just include them as additional data attributes on either the control element or the modal markup itself.</p> <pre class="prettyprint linenums"> <a class="btn" data-toggle="modal" href="#myModal" >Launch Modal</a> </pre> @@ -240,7 +235,7 @@ $('#myModal').modal({ <pre class="prettyprint linenums">$('#myModal').modal('hide')</pre> <h3>Events</h3> <p>Bootstrap's modal class exposes a few events for hooking into modal functionality. </p> - <table class="striped-table"> + <table class="bordered-table striped-table"> <thead> <tr> <th style="width: 150px;">Event</th> @@ -311,12 +306,14 @@ $('#myModal').on('hidden', function () { <h3>Using boostrap-dropdown.js</h3> <pre class="prettyprint linenums">$('.dropdown-toggle').dropdown()</pre> <h3>Markup</h3> - <p>To quickly add dropdown functionality to any element just add <code>data-toggle="dropdown"</code>. Any valid bootstrap dropdown will automatically be activated.</p> + <p>To quickly add dropdown functionality to any element just add <code>data-toggle="dropdown"</code> and any valid bootstrap dropdown will automatically be activated.</p> + <p><span class="label notice">Notice</span> For added control and flexibility, optionally specify a <code>data-target="#fat"</code> or <code>href="#fat"</code> - this allows you to target specific dropdowns.</p> + <pre class="prettyprint linenums"> <ul class="tabs"> <li class="active"><a href="#">Home</a></li> - <li class="dropdown"> - <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown</a> + <li id="secondary" class="dropdown"> + <a href="#secondary" class="dropdown-toggle" data-toggle="dropdown">Dropdown</a> <ul class="dropdown-menu"> <li><a href="#">Secondary link</a></li> <li><a href="#">Something else here</a></li> @@ -343,7 +340,7 @@ $('#myModal').on('hidden', function () { <input type="text" class="search-query span2" placeholder="Search"> </form> <ul class="nav secondary-nav"> - <li class="dropdown"> + <li id="fat-menu" class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown 1</a> <ul class="dropdown-menu"> <li><a href="#">Secondary link</a></li> @@ -352,7 +349,7 @@ $('#myModal').on('hidden', function () { <li><a href="#">Another link</a></li> </ul> </li> - <li class="dropdown"> + <li id="mdo-menu" class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown 2</a> <ul class="dropdown-menu"> <li><a href="#">Secondary link</a></li> @@ -493,7 +490,7 @@ $('#myModal').on('hidden', function () { </script></pre> </p> <h3>Events</h3> - <table class="zebra-striped"> + <table class="bordered-table striped-table"> <thead> <tr> <th style="width: 150px;">Event</th> @@ -571,7 +568,7 @@ $('a[data-toggle="tab"]').on('shown', function (e) { <h3>Using bootstrap-twipsy.js</h3> <pre class="prettyprint linenums">$('#example').twipsy(options)</pre> <h3>Options</h3> - <table class="striped-table"> + <table class="bordered-table striped-table"> <thead> <tr> <th style="width: 100px;">Name</th> @@ -661,7 +658,7 @@ $('a[data-toggle="tab"]').on('shown', function (e) { <h3>Using boostrap-popover.js</h3> <pre class="prettyprint linenums">$('#example').popover(options)</pre> <h3>Options</h3> - <table class="striped-table"> + <table class="bordered-table striped-table"> <thead> <tr> <th style="width: 100px;">Name</th> @@ -834,7 +831,7 @@ $('a[data-toggle="tab"]').on('shown', function (e) { $('.btn').button('complete') </scrip></pre> <h3>Demo</h3> - <table class="striped-table"> + <table class="bordered-table striped-table"> <tbody> <tr> <td>Stateful</td> @@ -903,7 +900,7 @@ $('a[data-toggle="tab"]').on('shown', function (e) { <h3>Using bootstrap-collapse.js</h3> <pre class="prettyprint linenums">$(".collapse").collapse()</pre> <h3>Options</h3> - <table class="striped-table"> + <table class="bordered-table striped-table"> <thead> <tr> <th style="width: 100px;">Name</th> @@ -953,7 +950,7 @@ $('#myCollapsible').collapse({ <p> Bootstrap's collapse class exposes a few events for hooking into collapse functionality. </p> - <table class="striped-table"> + <table class="bordered-table striped-table"> <thead> <tr> <th style="width: 150px;">Event</th> diff --git a/js/README.md b/js/README.md index 061509fd3a..04dfb75df6 100644 --- a/js/README.md +++ b/js/README.md @@ -1,5 +1,5 @@ ## 2.0 BOOTSTRAP JS PHILOSOPHY -These are the high-level design rules which guide the development of Bootstrap's JS plugins. +These are the high-level design rules which guide the development of Bootstrap's plugin apis. --- @@ -28,10 +28,12 @@ All public APIs should be single, chainable methods, and return the collection a All methods should accept an optional options object, a string which targets a particular method, or null which initiates the default behavior: $("#myModal").modal() // initialized with defaults + $("#myModal").modal({ keyboard: false }) // initialized with now keyboard + $("#myModal").modal('show') // initializes and invokes show immediately afterqwe2 --- -### PLUGIN OPTIONS +### OPTIONS Options should be sparse and add universal value. We should pick the right defaults. @@ -51,7 +53,7 @@ examples: --- -### PLUGIN EVENTS +### EVENTS All events should have an infinitive and past participle form. The infinitive is fired just before an action takes place, the past participle on completion of the action. @@ -60,14 +62,30 @@ All events should have an infinitive and past participle form. The infinitive is --- +### CONSTRUCTORS + +Each plugin should expose it's raw constructor on a `Constructor` property -- accessed in the following way: + + + $.fn.popover.Constructor + +--- + +### DATA ACCESSOR + +Each plugin stores a copy of the invoked class on an object. This class instance can be accessed directly through jQuery's data api like this: + + $('[rel=popover]').data('popover') instanceof $.fn.popover.Constructor + +--- ### DATA ATTRIBUTES Data attributes should take the following form: - data-*(verb)* - defines main interaction -- data-target || href^=# - defined on controller element (if element interacts with an element other than self) -- data-*(noun)* - defines options for element invocation +- data-target || href^=# - defined on "control" element (if element controls an element other than self) +- data-*(noun)* - defines class instance options examples: diff --git a/js/bootstrap-alert.js b/js/bootstrap-alert.js index af15cbd7be..90961cdd39 100644 --- a/js/bootstrap-alert.js +++ b/js/bootstrap-alert.js @@ -35,18 +35,22 @@ constructor: Alert , close: function ( e ) { - var $element = $(this) + var $this = $(this) + , selector = $this.attr('data-target') || $this.attr('href') + , $parent = $(selector) - $element = $element.hasClass('alert-message') ? $element : $element.parent() e && e.preventDefault() - $element.removeClass('in') + + $parent.length || ($parent = $this.hasClass('alert-message') ? $this : $this.parent()) + + $parent.removeClass('in') function removeElement() { - $element.remove() + $parent.remove() } - $.support.transition && $element.hasClass('fade') ? - $element.on($.support.transition.end, removeElement) : + $.support.transition && $parent.hasClass('fade') ? + $parent.on($.support.transition.end, removeElement) : removeElement() } @@ -65,7 +69,7 @@ }) } - $.fn.alert.Alert = Alert + $.fn.alert.Constructor = Alert /* ALERT DATA-API diff --git a/js/bootstrap-button.js b/js/bootstrap-button.js index 508835a38f..10a85835e6 100644 --- a/js/bootstrap-button.js +++ b/js/bootstrap-button.js @@ -83,7 +83,7 @@ loadingText: 'loading...' } - $.fn.button.Button = Button + $.fn.button.Constructor = Button /* BUTTON DATA-API diff --git a/js/bootstrap-carousel.js b/js/bootstrap-carousel.js index e2b36884b5..ed4b8f3fac 100644 --- a/js/bootstrap-carousel.js +++ b/js/bootstrap-carousel.js @@ -46,6 +46,6 @@ }) } - $.fn.carousel.Carousel = Carousel + $.fn.carousel.Constructor = Carousel }( window.jQuery ) \ No newline at end of file diff --git a/js/bootstrap-collapse.js b/js/bootstrap-collapse.js index 8eefd8863a..313c0abcab 100644 --- a/js/bootstrap-collapse.js +++ b/js/bootstrap-collapse.js @@ -116,7 +116,7 @@ toggle: true } - $.fn.collapse.Collapse = Collapse + $.fn.collapse.Constructor = Collapse /* COLLAPSIBLE DATA-API diff --git a/js/bootstrap-dropdown.js b/js/bootstrap-dropdown.js index d2881b2762..15f4677b9d 100644 --- a/js/bootstrap-dropdown.js +++ b/js/bootstrap-dropdown.js @@ -35,11 +35,15 @@ constructor: Dropdown , toggle: function ( e ) { - var li = $(this).parent('li') - , isActive = li.hasClass('open') + var $this = $(this) + , selector = $this.attr('data-target') || $this.attr('href') + , $parent = $(selector) + + $parent.length || ($parent = $this.parent()) clearMenus() - !isActive && li.toggleClass('open') + + !$parent.hasClass('open') && $parent.toggleClass('open') return false } @@ -47,7 +51,7 @@ } function clearMenus() { - $(toggle).parent('li').removeClass('open') + $(toggle).parent().removeClass('open') } @@ -63,6 +67,8 @@ }) } + $.fn.dropdown.Constructor = Dropdown + /* APPLY TO STANDARD DROPDOWN ELEMENTS * =================================== */ diff --git a/js/bootstrap-modal.js b/js/bootstrap-modal.js index f2624ec1c1..98a62865b3 100644 --- a/js/bootstrap-modal.js +++ b/js/bootstrap-modal.js @@ -175,17 +175,16 @@ , options = typeof option == 'object' && option if (!data) $this.data('modal', (data = new Modal(this, options))) if (typeof option == 'string') data[option]() - else if (data.options.show) data.show() + else data.show() }) } $.fn.modal.defaults = { backdrop: true , keyboard: true - , show: true } - $.fn.modal.Modal = Modal + $.fn.modal.Constructor = Modal /* MODAL DATA-API @@ -194,10 +193,11 @@ $(function () { $('body').on('click.modal.data-api', '[data-toggle="modal"]', function ( e ) { var $this = $(this) - , target = $this.attr('data-target') || $this.attr('href') - , option = $(target).data('modal') ? 'toggle' : $this.data() + , $target = $($this.attr('data-target') || $this.attr('href')) + , option = $target.data('modal') ? 'toggle' : $.extend({}, $target.data(), $this.data()) + e.preventDefault() - $(target).modal(option) + $target.modal(option) }) }) diff --git a/js/bootstrap-popover.js b/js/bootstrap-popover.js index 53edfc8c9d..746699d372 100644 --- a/js/bootstrap-popover.js +++ b/js/bootstrap-popover.js @@ -29,7 +29,7 @@ /* NOTE: POPOVER EXTENDS BOOTSTRAP-TWIPSY.js ========================================= */ - Popover.prototype = $.extend({}, $.fn.twipsy.Twipsy.prototype, { + Popover.prototype = $.extend({}, $.fn.twipsy.Constructor.prototype, { constructor: Popover @@ -84,7 +84,7 @@ }) } - $.fn.popover.Popover = Popover + $.fn.popover.Constructor = Popover $.fn.popover.defaults = $.extend({} , $.fn.twipsy.defaults, { placement: 'right' diff --git a/js/bootstrap-scrollspy.js b/js/bootstrap-scrollspy.js index 041cfcb454..6201d4cefa 100644 --- a/js/bootstrap-scrollspy.js +++ b/js/bootstrap-scrollspy.js @@ -103,7 +103,7 @@ }) } - $.fn.scrollspy.ScrollSpy = ScrollSpy + $.fn.scrollspy.Constructor = ScrollSpy /* SCROLLSPY DATA-API diff --git a/js/bootstrap-tab.js b/js/bootstrap-tab.js index 2f147c59d8..c7632ded25 100644 --- a/js/bootstrap-tab.js +++ b/js/bootstrap-tab.js @@ -107,7 +107,7 @@ }) } - $.fn.tab.Tab = Tab + $.fn.tab.Constructor = Tab /* TAB DATA-API diff --git a/js/bootstrap-twipsy.js b/js/bootstrap-twipsy.js index ab744b7c5a..4868671bf3 100644 --- a/js/bootstrap-twipsy.js +++ b/js/bootstrap-twipsy.js @@ -247,7 +247,7 @@ }) } - $.fn.twipsy.Twipsy = Twipsy + $.fn.twipsy.Constructor = Twipsy $.fn.twipsy.defaults = { animate: true -- GitLab From 80cb760fac507ce207a6174f8886417d32d4b5ed Mon Sep 17 00:00:00 2001 From: Jacob Thornton <jacobthornton@gmail.com> Date: Wed, 21 Dec 2011 13:29:12 -0800 Subject: [PATCH 139/318] animate -> animation --- docs/javascript.html | 4 ++-- js/README.md | 4 ++-- js/bootstrap-twipsy.js | 4 ++-- 3 files changed, 6 insertions(+), 6 deletions(-) diff --git a/docs/javascript.html b/docs/javascript.html index 8a9a203e74..8dc3ba9d8d 100644 --- a/docs/javascript.html +++ b/docs/javascript.html @@ -579,7 +579,7 @@ $('a[data-toggle="tab"]').on('shown', function (e) { </thead> <tbody> <tr> - <td>animate</td> + <td>animation</td> <td>boolean</td> <td>true</td> <td>apply a css fade transition to the tooltip</td> @@ -669,7 +669,7 @@ $('a[data-toggle="tab"]').on('shown', function (e) { </thead> <tbody> <tr> - <td>animate</td> + <td>animation</td> <td>boolean</td> <td>true</td> <td>apply a css fade transition to the tooltip</td> diff --git a/js/README.md b/js/README.md index 04dfb75df6..0d8d163a28 100644 --- a/js/README.md +++ b/js/README.md @@ -83,9 +83,9 @@ Each plugin stores a copy of the invoked class on an object. This class instance Data attributes should take the following form: -- data-*(verb)* - defines main interaction +- data-{{verb}}={{plugin}} - defines main interaction - data-target || href^=# - defined on "control" element (if element controls an element other than self) -- data-*(noun)* - defines class instance options +- data-{{noun}} - defines class instance options examples: diff --git a/js/bootstrap-twipsy.js b/js/bootstrap-twipsy.js index 4868671bf3..018edb97e5 100644 --- a/js/bootstrap-twipsy.js +++ b/js/bootstrap-twipsy.js @@ -109,7 +109,7 @@ $tip = this.tip() this.setContent() - if (this.options.animate) { + if (this.options.animation) { $tip.addClass('fade') } @@ -250,7 +250,7 @@ $.fn.twipsy.Constructor = Twipsy $.fn.twipsy.defaults = { - animate: true + animation: true , delay: 0 , selector: false , placement: 'above' -- GitLab From 8a7abc7493a07935d4d91b2cc56a82523fd53970 Mon Sep 17 00:00:00 2001 From: Mark Otto <markdotto@gmail.com> Date: Wed, 21 Dec 2011 16:00:50 -0600 Subject: [PATCH 140/318] docs updates, forms updated to include error states and more examples, remove text-shadow from gradientbar mixin to fix bug --- bootstrap.css | 13 +++--- bootstrap.min.css | 13 +++--- docs/base-css.html | 80 +++++++++++++++++++++++++++++--- docs/components.html | 107 +++++++++++++++++++++++++++++++++++++------ docs/upgrading.html | 2 +- lib/forms.less | 1 + lib/mixins.less | 1 - lib/patterns.less | 6 +++ 8 files changed, 190 insertions(+), 33 deletions(-) diff --git a/bootstrap.css b/bootstrap.css index f57423b0c7..7254ee443f 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: Mon Dec 19 22:58:34 PST 2011 + * Date: Wed Dec 21 15:58:57 CST 2011 */ html, body { margin: 0; @@ -919,6 +919,9 @@ textarea[readonly] { .inline-inputs span { padding: 0 2px 0 1px; } +.input-prepend, .input-append { + overflow: hidden; +} .input-prepend input, .input-append input { -webkit-border-radius: 0 3px 3px 0; -moz-border-radius: 0 3px 3px 0; @@ -1534,7 +1537,6 @@ footer { .alert-message.danger, .btn.error, .alert-message.error { - text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25); background-color: #c43c35; background-image: -khtml-gradient(linear, left top, left bottom, from(#ee5f5b), to(#c43c35)); background-image: -moz-linear-gradient(top, #ee5f5b, #c43c35); @@ -1549,7 +1551,6 @@ footer { border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25); } .btn.success, .alert-message.success { - text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25); background-color: #57a957; background-image: -khtml-gradient(linear, left top, left bottom, from(#62c462), to(#57a957)); background-image: -moz-linear-gradient(top, #62c462, #57a957); @@ -1564,7 +1565,6 @@ footer { border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25); } .btn.info, .alert-message.info { - text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25); background-color: #339bb9; background-image: -khtml-gradient(linear, left top, left bottom, from(#5bc0de), to(#339bb9)); background-image: -moz-linear-gradient(top, #5bc0de, #339bb9); @@ -1619,7 +1619,6 @@ footer { } .btn.primary { color: #ffffff; - text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25); background-color: #0064cd; background-image: -khtml-gradient(linear, left top, left bottom, from(#049cdb), to(#0064cd)); background-image: -moz-linear-gradient(top, #049cdb, #0064cd); @@ -1759,7 +1758,6 @@ button.btn::-moz-focus-inner, input[type=submit].btn::-moz-focus-inner { margin-bottom: 18px; color: #404040; text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5); - text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25); background-color: #eedc94; background-image: -khtml-gradient(linear, left top, left bottom, from(#fceec1), to(#eedc94)); background-image: -moz-linear-gradient(top, #fceec1, #eedc94); @@ -1802,6 +1800,9 @@ button.btn::-moz-focus-inner, input[type=submit].btn::-moz-focus-inner { -moz-box-shadow: 0 1px 0 rgba(255, 255, 255, 0.25); box-shadow: 0 1px 0 rgba(255, 255, 255, 0.25); } +.alert-message.error, .alert-message.success, .alert-message.info { + text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25); +} .alert-message.block-message { padding: 14px; background-image: none; diff --git a/bootstrap.min.css b/bootstrap.min.css index 4bb1adc5c0..5953cfabaf 100644 --- a/bootstrap.min.css +++ b/bootstrap.min.css @@ -150,7 +150,7 @@ input[disabled],select[disabled],textarea[disabled],input[readonly],select[reado .inline-inputs input.mini{width:60px;} .inline-inputs input.small{width:90px;} .inline-inputs span{padding:0 2px 0 1px;} -.input-prepend input,.input-append input{-webkit-border-radius:0 3px 3px 0;-moz-border-radius:0 3px 3px 0;border-radius:0 3px 3px 0;} +.input-prepend,.input-append{overflow:hidden;}.input-prepend input,.input-append input{-webkit-border-radius:0 3px 3px 0;-moz-border-radius:0 3px 3px 0;border-radius:0 3px 3px 0;} .input-prepend .add-on,.input-append .add-on{position:relative;z-index:2;float:left;display:block;width:auto;min-width:16px;height:18px;margin-right:-1px;padding:4px 4px 4px 5px;font-weight:normal;line-height:18px;color:#bfbfbf;text-align:center;text-shadow:0 1px 0 #ffffff;background-color:#f5f5f5;border:1px solid #ccc;-webkit-border-radius:3px 0 0 3px;-moz-border-radius:3px 0 0 3px;border-radius:3px 0 0 3px;} .input-prepend .active,.input-append .active{background-color:#a9dba9;border-color:#46a546;} .input-prepend .add-on{*margin-top:1px;} @@ -212,12 +212,12 @@ tbody tr:last-child th,tbody tr:last-child td{border-bottom:0;} footer{padding-top:17px;margin-top:17px;border-top:1px solid #eee;} .page-header{margin-bottom:27px;border-bottom:1px solid #eee;-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:13.5px;} .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{text-shadow:0 -1px 0 rgba(0, 0, 0, 0.25);background-color:#c43c35;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);background-repeat:repeat-x;filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ee5f5b', endColorstr='#c43c35', GradientType=0);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);} -.btn.success,.alert-message.success{text-shadow:0 -1px 0 rgba(0, 0, 0, 0.25);background-color:#57a957;background-image:-khtml-gradient(linear, left top, left bottom, from(#62c462), to(#57a957));background-image:-moz-linear-gradient(top, #62c462, #57a957);background-image:-ms-linear-gradient(top, #62c462, #57a957);background-image:-webkit-gradient(linear, left top, left bottom, color-stop(0%, #62c462), color-stop(100%, #57a957));background-image:-webkit-linear-gradient(top, #62c462, #57a957);background-image:-o-linear-gradient(top, #62c462, #57a957);background-image:linear-gradient(top, #62c462, #57a957);background-repeat:repeat-x;filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#62c462', endColorstr='#57a957', GradientType=0);border-color:#57a957 #57a957 #3d773d;border-color:rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);} -.btn.info,.alert-message.info{text-shadow:0 -1px 0 rgba(0, 0, 0, 0.25);background-color:#339bb9;background-image:-khtml-gradient(linear, left top, left bottom, from(#5bc0de), to(#339bb9));background-image:-moz-linear-gradient(top, #5bc0de, #339bb9);background-image:-ms-linear-gradient(top, #5bc0de, #339bb9);background-image:-webkit-gradient(linear, left top, left bottom, color-stop(0%, #5bc0de), color-stop(100%, #339bb9));background-image:-webkit-linear-gradient(top, #5bc0de, #339bb9);background-image:-o-linear-gradient(top, #5bc0de, #339bb9);background-image:linear-gradient(top, #5bc0de, #339bb9);background-repeat:repeat-x;filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#5bc0de', endColorstr='#339bb9', GradientType=0);border-color:#339bb9 #339bb9 #22697d;border-color:rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);} +.btn.danger,.alert-message.danger,.btn.error,.alert-message.error{background-color:#c43c35;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);background-repeat:repeat-x;filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ee5f5b', endColorstr='#c43c35', GradientType=0);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);} +.btn.success,.alert-message.success{background-color:#57a957;background-image:-khtml-gradient(linear, left top, left bottom, from(#62c462), to(#57a957));background-image:-moz-linear-gradient(top, #62c462, #57a957);background-image:-ms-linear-gradient(top, #62c462, #57a957);background-image:-webkit-gradient(linear, left top, left bottom, color-stop(0%, #62c462), color-stop(100%, #57a957));background-image:-webkit-linear-gradient(top, #62c462, #57a957);background-image:-o-linear-gradient(top, #62c462, #57a957);background-image:linear-gradient(top, #62c462, #57a957);background-repeat:repeat-x;filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#62c462', endColorstr='#57a957', GradientType=0);border-color:#57a957 #57a957 #3d773d;border-color:rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);} +.btn.info,.alert-message.info{background-color:#339bb9;background-image:-khtml-gradient(linear, left top, left bottom, from(#5bc0de), to(#339bb9));background-image:-moz-linear-gradient(top, #5bc0de, #339bb9);background-image:-ms-linear-gradient(top, #5bc0de, #339bb9);background-image:-webkit-gradient(linear, left top, left bottom, color-stop(0%, #5bc0de), color-stop(100%, #339bb9));background-image:-webkit-linear-gradient(top, #5bc0de, #339bb9);background-image:-o-linear-gradient(top, #5bc0de, #339bb9);background-image:linear-gradient(top, #5bc0de, #339bb9);background-repeat:repeat-x;filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#5bc0de', endColorstr='#339bb9', GradientType=0);border-color:#339bb9 #339bb9 #22697d;border-color:rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);} .btn{display:inline-block;padding:5px 14px 6px;font-size:13px;line-height:normal;color:#333;text-shadow:0 1px 1px rgba(255, 255, 255, 0.75);background-color:#e6e6e6;background-image:-webkit-gradient(linear, 0 0, 0 100%, from(#ffffff), color-stop(25%, #ffffff), to(#e6e6e6));background-image:-webkit-linear-gradient(#ffffff, #ffffff 25%, #e6e6e6);background-image:-moz-linear-gradient(top, #ffffff, #ffffff 25%, #e6e6e6);background-image:-ms-linear-gradient(#ffffff, #ffffff 25%, #e6e6e6);background-image:-o-linear-gradient(#ffffff, #ffffff 25%, #e6e6e6);background-image:linear-gradient(#ffffff, #ffffff 25%, #e6e6e6);background-repeat:no-repeat;filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#e6e6e6', GradientType=0);border:1px solid #ccc;border-bottom-color:#bbb;-webkit-border-radius:4px;-moz-border-radius:4px;border-radius:4px;-webkit-box-shadow:inset 0 1px 0 rgba(255, 255, 255, 0.2),0 1px 2px rgba(0, 0, 0, 0.05);-moz-box-shadow:inset 0 1px 0 rgba(255, 255, 255, 0.2),0 1px 2px rgba(0, 0, 0, 0.05);box-shadow:inset 0 1px 0 rgba(255, 255, 255, 0.2),0 1px 2px rgba(0, 0, 0, 0.05);cursor:pointer;-webkit-transition:0.1s linear all;-moz-transition:0.1s linear all;-ms-transition:0.1s linear all;-o-transition:0.1s linear all;transition:0.1s linear all;}.btn:hover{color:#333;text-decoration:none;background-position:0 -15px;} .btn:focus{outline:1px dotted #666;} -.btn.primary{color:#ffffff;text-shadow:0 -1px 0 rgba(0, 0, 0, 0.25);background-color:#0064cd;background-image:-khtml-gradient(linear, left top, left bottom, from(#049cdb), to(#0064cd));background-image:-moz-linear-gradient(top, #049cdb, #0064cd);background-image:-ms-linear-gradient(top, #049cdb, #0064cd);background-image:-webkit-gradient(linear, left top, left bottom, color-stop(0%, #049cdb), color-stop(100%, #0064cd));background-image:-webkit-linear-gradient(top, #049cdb, #0064cd);background-image:-o-linear-gradient(top, #049cdb, #0064cd);background-image:linear-gradient(top, #049cdb, #0064cd);background-repeat:repeat-x;filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#049cdb', endColorstr='#0064cd', GradientType=0);border-color:#0064cd #0064cd #003f81;border-color:rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);} +.btn.primary{color:#ffffff;background-color:#0064cd;background-image:-khtml-gradient(linear, left top, left bottom, from(#049cdb), to(#0064cd));background-image:-moz-linear-gradient(top, #049cdb, #0064cd);background-image:-ms-linear-gradient(top, #049cdb, #0064cd);background-image:-webkit-gradient(linear, left top, left bottom, color-stop(0%, #049cdb), color-stop(100%, #0064cd));background-image:-webkit-linear-gradient(top, #049cdb, #0064cd);background-image:-o-linear-gradient(top, #049cdb, #0064cd);background-image:linear-gradient(top, #049cdb, #0064cd);background-repeat:repeat-x;filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#049cdb', endColorstr='#0064cd', GradientType=0);border-color:#0064cd #0064cd #003f81;border-color:rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);} .btn.active,.btn:active{-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);} .btn.disabled{cursor:default;background-image:none;filter:progid:DXImageTransform.Microsoft.gradient(enabled = false);filter:alpha(opacity=65);-moz-opacity:0.65;opacity:0.65;-webkit-box-shadow:none;-moz-box-shadow:none;box-shadow:none;} .btn[disabled]{cursor:default;background-image:none;filter:progid:DXImageTransform.Microsoft.gradient(enabled = false);filter:alpha(opacity=65);-moz-opacity:0.65;opacity:0.65;-webkit-box-shadow:none;-moz-box-shadow:none;box-shadow:none;} @@ -234,11 +234,12 @@ button.btn::-moz-focus-inner,input[type=submit].btn::-moz-focus-inner{padding:0; .btn-group .btn:last-child{-webkit-border-top-right-radius:4px;-moz-border-radius-topright:4px;border-top-right-radius:4px;-webkit-border-bottom-right-radius:4px;-moz-border-radius-bottomright:4px;border-bottom-right-radius:4px;} .btn-group .btn:hover,.btn-group .btn:focus,.btn-group .btn:active{z-index:2;} .close{float:right;font-size:20px;font-weight:bold;line-height:13.5px;color:#000000;text-shadow:0 1px 0 #ffffff;filter:alpha(opacity=20);-moz-opacity:0.2;opacity:0.2;}.close:hover{color:#000000;text-decoration:none;filter:alpha(opacity=40);-moz-opacity:0.4;opacity:0.4;} -.alert-message{position:relative;padding:7px 15px;margin-bottom:18px;color:#404040;text-shadow:0 1px 0 rgba(255, 255, 255, 0.5);text-shadow:0 -1px 0 rgba(0, 0, 0, 0.25);background-color:#eedc94;background-image:-khtml-gradient(linear, left top, left bottom, from(#fceec1), to(#eedc94));background-image:-moz-linear-gradient(top, #fceec1, #eedc94);background-image:-ms-linear-gradient(top, #fceec1, #eedc94);background-image:-webkit-gradient(linear, left top, left bottom, color-stop(0%, #fceec1), color-stop(100%, #eedc94));background-image:-webkit-linear-gradient(top, #fceec1, #eedc94);background-image:-o-linear-gradient(top, #fceec1, #eedc94);background-image:linear-gradient(top, #fceec1, #eedc94);background-repeat:repeat-x;filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#fceec1', endColorstr='#eedc94', GradientType=0);border-color:#eedc94 #eedc94 #e4c652;border-color:rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);border-width:1px;border-style:solid;-webkit-border-radius:4px;-moz-border-radius:4px;border-radius:4px;-webkit-box-shadow:inset 0 1px 0 rgba(255, 255, 255, 0.25);-moz-box-shadow:inset 0 1px 0 rgba(255, 255, 255, 0.25);box-shadow:inset 0 1px 0 rgba(255, 255, 255, 0.25);}.alert-message .close{*margin-top:3px;} +.alert-message{position:relative;padding:7px 15px;margin-bottom:18px;color:#404040;text-shadow:0 1px 0 rgba(255, 255, 255, 0.5);background-color:#eedc94;background-image:-khtml-gradient(linear, left top, left bottom, from(#fceec1), to(#eedc94));background-image:-moz-linear-gradient(top, #fceec1, #eedc94);background-image:-ms-linear-gradient(top, #fceec1, #eedc94);background-image:-webkit-gradient(linear, left top, left bottom, color-stop(0%, #fceec1), color-stop(100%, #eedc94));background-image:-webkit-linear-gradient(top, #fceec1, #eedc94);background-image:-o-linear-gradient(top, #fceec1, #eedc94);background-image:linear-gradient(top, #fceec1, #eedc94);background-repeat:repeat-x;filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#fceec1', endColorstr='#eedc94', GradientType=0);border-color:#eedc94 #eedc94 #e4c652;border-color:rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);border-width:1px;border-style:solid;-webkit-border-radius:4px;-moz-border-radius:4px;border-radius:4px;-webkit-box-shadow:inset 0 1px 0 rgba(255, 255, 255, 0.25);-moz-box-shadow:inset 0 1px 0 rgba(255, 255, 255, 0.25);box-shadow:inset 0 1px 0 rgba(255, 255, 255, 0.25);}.alert-message .close{*margin-top:3px;} .alert-message h5{line-height:18px;} .alert-message p{margin-bottom:0;} .alert-message div{margin-top:5px;margin-bottom:2px;line-height:28px;} .alert-message .btn{-webkit-box-shadow:0 1px 0 rgba(255, 255, 255, 0.25);-moz-box-shadow:0 1px 0 rgba(255, 255, 255, 0.25);box-shadow:0 1px 0 rgba(255, 255, 255, 0.25);} +.alert-message.error,.alert-message.success,.alert-message.info{text-shadow:0 -1px 0 rgba(0, 0, 0, 0.25);} .alert-message.block-message{padding:14px;background-image:none;background-color:#fdf5d9;filter:progid:DXImageTransform.Microsoft.gradient(enabled = false);border-color:#fceec1;-webkit-box-shadow:none;-moz-box-shadow:none;box-shadow:none;}.alert-message.block-message ul,.alert-message.block-message p{margin-right:30px;} .alert-message.block-message ul{margin-bottom:0;} .alert-message.block-message li{color:#404040;} diff --git a/docs/base-css.html b/docs/base-css.html index 2098974027..63ec53306d 100644 --- a/docs/base-css.html +++ b/docs/base-css.html @@ -762,6 +762,43 @@ <h1>Forms</h1> </div> +<!-- + +Types of forms + default (stacked) + horizontal (change the class) + search + inline +Form elements + form + fieldset + legend + label + input + text (password, email, etc) + radio + checkbox + textarea + rows + select + single + multiple + size +Custom form elements + Input prepend and append (for @ and $) + checkbox and radio lists +Explaining the default Bootstrap form structure + Bulletproofing our forms means adding a bit of extra structure and providing more classes for customization and event handling + Form vertical and horizontal forms, we require a wrapping element. + we suggest a fieldset + but could be anthing so long as it uses the proper class +Form states + warning + error + success + +--> + <h2>Four types of forms</h2> <table class="bordered-table striped-table"> <thead> @@ -842,7 +879,7 @@ </div> <div class="span9"> <form class="horizontal-form"> - <legend>Example form</legend> + <legend>Example form section</legend> <fieldset class="control-group"> <label class="control-label" for="input01">Text input</label> <div class="controls"> @@ -850,6 +887,16 @@ <p class="help-text">Help text here. Be sure to fill this out like so, or else!</p> </div> </fieldset> + <fieldset class="control-group"> + <label class="control-label" for="prependedInput">Prepended text</label> + <div class="controls"> + <div class="input-prepend"> + <span class="add-on">@</span> + <input class="input-small" id="prependedInput" name="prependedInput" size="16" type="text"> + </div> + <span class="help-block">Here's some help text</span> + </div> + </fieldset> <fieldset class="control-group"> <label class="control-label" for="select01">Select list</label> <div class="controls"> @@ -874,23 +921,44 @@ </select> </div> </fieldset> - <legend>Example form</legend> + <legend>Example form section</legend> + <fieldset class="control-group"> + <label class="control-label" for="textarea">Textarea</label> + <div class="controls"> + <textarea class="input-xlarge" name="textarea" id="textarea" rows="3"></textarea> + </div> + </fieldset> + <fieldset class="control-group"> + <label class="control-label" for="fileInput">Disabled input</label> + <div class="controls"> + <input class="input-xlarge disabled" id="disabledInput" name="disabledInput" size="30" type="text" placeholder="Disabled input here... carry on." disabled> + </div> + </fieldset> <fieldset class="control-group"> <label class="control-label" for="fileInput">File input</label> <div class="controls"> <input class="input-file" id="fileInput" name="fileInput" type="file"> </div> </fieldset> - <fieldset class="control-group has-error"> + <fieldset class="control-group warning"> + <label class="control-label" for="inputError">Input with warning</label> + <div class="controls"> + <input type="text" name="inputError"> + <span class="help-inline">Something may have gone wrong</span> + </div> + </fieldset> + <fieldset class="control-group error"> <label class="control-label" for="inputError">Input with error</label> <div class="controls"> <input type="text" name="inputError"> + <span class="help-inline">Please correct the error</span> </div> </fieldset> - <fieldset class="control-group has-error"> - <label class="control-label" for="textareaError">Textarea with error</label> + <fieldset class="control-group success"> + <label class="control-label" for="inputError">Input with success</label> <div class="controls"> - <textarea class="input-xlarge" rows="3"></textarea> + <input type="text" name="inputError"> + <span class="help-inline">Woohoo!</span> </div> </fieldset> <fieldset class="control-group"> diff --git a/docs/components.html b/docs/components.html index 56e71b0f7f..11d83c51ae 100644 --- a/docs/components.html +++ b/docs/components.html @@ -201,11 +201,33 @@ -<!-- Navigation +<!-- Autocomplete ================================================== --> -<section id="navigation"> +<section id="autocomplete"> <div class="page-header"> - <h1>Navigation</h1> + <h1>Autocomplete <small></small></h1> + </div> + +</section> + + + +<!-- Carousel +================================================== --> +<section id="carousel"> + <div class="page-header"> + <h1>Carousel <small></small></h1> + </div> + +</section> + + + +<!-- Navbar +================================================== --> +<section id="navbar"> + <div class="page-header"> + <h1>Navbar</h1> </div> <h2>Fixed navbar</h2> <div class="navbar navbar-static" data-dropdown="dropdown"> @@ -262,11 +284,19 @@ </div> <p><strong>Note:</strong> When using the navbar on any page, be sure to account for the overlap it causes by adding <code>padding-top: 40px;</code> to your <code><body></code>.</p> - <br> +</section> + + + +<!-- Tabs & Pills +================================================== --> +<section id="tabsAndPills"> + <div class="page-header"> + <h1>Tabs and pills <small></small></h1> + </div> <div class="row"> <div class="span3"> - <h2>Tabs and pills</h2> <p>Create simple secondary navigation with a <code><ul></code>. Swap between tabs or pills by adding the appropriate class.</p> <p>Great for sub-sections of content like our account settings pages and user timelines for toggling between pages of like content. Available in tabbed or pill styles.</p> </div> @@ -428,10 +458,19 @@ </div> </div><!-- /row --> - <!-- Breadcrumbs --> +</section> + + + +<!-- Breadcrumbs +================================================== --> +<section id="breadcrumbs"> + <div class="page-header"> + <h1>Breadcrumbs <small></small></h1> + </div> + <div class="row"> <div class="span3"> - <h2>Breadcrumbs</h2> <p>Breadcrumb navigation is used as a way to show users where they are within an app or a site, but not for primary navigation.</p> </div> <div class="span9"> @@ -464,10 +503,20 @@ </div> </div> +</section> + + + +<!-- Step nav +================================================== --> +<section id="stepNav"> + <div class="page-header"> + <h1>Step nav <small></small></h1> + </div> + <!-- Step nav --> <div class="row"> <div class="span3"> - <h2>Step nav</h2> <p>Placeholder for now!</p> </div> <div class="span9"> @@ -486,7 +535,17 @@ </div> </div> - <!-- Pagination --> +</section> + + + +<!-- Pagination +================================================== --> +<section id="carousel"> + <div class="page-header"> + <h1>Pagination <small></small></h1> + </div> + <div class="row"> <div class="span3"> <h2>Pagination</h2> @@ -644,11 +703,11 @@ </section> -<!-- Popovers +<!-- Modals ================================================== --> <section id="popovers"> <div class="page-header"> - <h1>Popovers <small>Components for displaying content in modals, tooltips, and popovers</small></h1> + <h1>Modals <small></small></h1> </div> <div class="row"> <div class="span3"> @@ -676,7 +735,17 @@ </div> </div><!-- /row --> - <!-- Tooltips --> +</section> + + + +<!-- Twipsies +================================================== --> +<section id="carousel"> + <div class="page-header"> + <h1>Twipsy tooltips <small></small></h1> + </div> + <div class="row"> <div class="span3"> <h2>Tooltips</h2> @@ -694,7 +763,17 @@ Lorem ipsum dolar sit amet illo error <a href="#" title="below">ipsum</a> verita </div> </div><!-- /row --> - <!-- Popovers --> +</section> + + + +<!-- Popovers +================================================== --> +<section id="popovers"> + <div class="page-header"> + <h1>Popovers <small></small></h1> + </div> + <div class="row"> <div class="span3"> <h2>Popovers</h2> @@ -721,6 +800,8 @@ Lorem ipsum dolar sit amet illo error <a href="#" title="below">ipsum</a> verita </section> + + <!-- Footer ================================================== --> <footer class="footer"> diff --git a/docs/upgrading.html b/docs/upgrading.html index cd0ca8e22d..60c9c325b8 100644 --- a/docs/upgrading.html +++ b/docs/upgrading.html @@ -38,7 +38,7 @@ <li><a href="./base-css.html">Base CSS</a></li> <li><a href="./components.html">Components</a></li> <li><a href="./javascript.html">Javascript plugins</a></li> - <li class="active"><a href="./less.html">Using LESS</a></li> + <li><a href="./less.html">Using LESS</a></li> </ul> </div> </div> diff --git a/lib/forms.less b/lib/forms.less index a73e6f545f..64e77fdb4c 100644 --- a/lib/forms.less +++ b/lib/forms.less @@ -325,6 +325,7 @@ textarea[readonly] { // Allow us to put symbols and text within the input field for a cleaner look .input-prepend, .input-append { + overflow: hidden; input { .border-radius(0 3px 3px 0); } diff --git a/lib/mixins.less b/lib/mixins.less index 0effdfa37a..251173fced 100644 --- a/lib/mixins.less +++ b/lib/mixins.less @@ -205,7 +205,6 @@ // Gradient Bar Colors for buttons and alerts .gradientBar(@primaryColor, @secondaryColor) { - text-shadow: 0 -1px 0 rgba(0,0,0,.25); #gradient > .vertical(@primaryColor, @secondaryColor); border-color: @secondaryColor @secondaryColor darken(@secondaryColor, 15%); border-color: rgba(0,0,0,.1) rgba(0,0,0,.1) fadein(rgba(0,0,0,.1), 15%); diff --git a/lib/patterns.less b/lib/patterns.less index 558f3ca45b..ec717e030f 100644 --- a/lib/patterns.less +++ b/lib/patterns.less @@ -575,6 +575,12 @@ input[type=submit].btn { .box-shadow(0 1px 0 rgba(255,255,255,.25)); } + &.error, + &.success, + &.info { + text-shadow: 0 -1px 0 rgba(0,0,0,.25); + } + &.block-message { padding: 14px; background-image: none; -- GitLab From 20aecb983838422c7b43e20960b10d4d79fefaa3 Mon Sep 17 00:00:00 2001 From: Mark Otto <markdotto@gmail.com> Date: Wed, 21 Dec 2011 16:22:20 -0600 Subject: [PATCH 141/318] updated all docs to jQuery 1.7, move all docs JS to application.js, and move dropdowns css to dedicated file --- bootstrap.css | 103 +++++++++++++++++++++++++++++++++- bootstrap.min.css | 12 +++- docs/assets/css/docs.css | 5 ++ docs/assets/js/application.js | 31 ++++++++++ docs/base-css.html | 13 +---- docs/components.html | 13 +---- docs/index.html | 37 +++--------- docs/less.html | 13 +---- docs/scaffolding.html | 24 +------- docs/upgrading.html | 24 +------- lib/bootstrap.less | 1 + lib/dropdowns.less | 94 +++++++++++++++++++++++++++++++ lib/patterns.less | 3 +- 13 files changed, 260 insertions(+), 113 deletions(-) create mode 100644 lib/dropdowns.less diff --git a/bootstrap.css b/bootstrap.css index 7254ee443f..74849e66b9 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: Wed Dec 21 15:58:57 CST 2011 + * Date: Wed Dec 21 16:21:54 CST 2011 */ html, body { margin: 0; @@ -1610,7 +1610,7 @@ footer { transition: 0.1s linear all; } .btn:hover { - color: #333; + color: #404040; text-decoration: none; background-position: 0 -15px; } @@ -1619,6 +1619,7 @@ footer { } .btn.primary { color: #ffffff; + text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25); background-color: #0064cd; background-image: -khtml-gradient(linear, left top, left bottom, from(#049cdb), to(#0064cd)); background-image: -moz-linear-gradient(top, #049cdb, #0064cd); @@ -1906,6 +1907,104 @@ button.btn::-moz-focus-inner, input[type=submit].btn::-moz-focus-inner { .label.notice { background-color: #62cffc; } +.dropdown { + position: relative; +} +.dropdown-toggle:after { + display: inline-block; + width: 0; + height: 0; + margin-top: 8px; + margin-left: 6px; + text-indent: -99999px; + vertical-align: top; + border-left: 4px solid transparent; + border-right: 4px solid transparent; + border-top: 4px solid #ffffff; + filter: alpha(opacity=30); + -moz-opacity: 0.3; + opacity: 0.3; + content: "↓"; +} +.dropdown:hover .dropdown-toggle:after { + filter: alpha(opacity=100); + -moz-opacity: 1; + opacity: 1; +} +.dropdown-menu { + position: absolute; + top: 40px; + z-index: 900; + float: left; + display: none; + min-width: 160px; + max-width: 220px; + _width: 160px; + padding: 6px 0; + margin-left: 0; + margin-right: 0; + background-color: #ffffff; + 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; + zoom: 1; +} +.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 { + color: #404040; + text-decoration: none; + background-color: #dddddd; + 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); + background-repeat: repeat-x; + filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#eeeeee', endColorstr='#dddddd', GradientType=0); + -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.open .dropdown-toggle { + color: #ffffff; + background: #ccc; + background: rgba(0, 0, 0, 0.3); +} +.dropdown.open .dropdown-menu { + display: block; +} .tabs, .pills { padding: 0; margin: 0 0 20px; diff --git a/bootstrap.min.css b/bootstrap.min.css index 5953cfabaf..728a48a129 100644 --- a/bootstrap.min.css +++ b/bootstrap.min.css @@ -215,9 +215,9 @@ footer{padding-top:17px;margin-top:17px;border-top:1px solid #eee;} .btn.danger,.alert-message.danger,.btn.error,.alert-message.error{background-color:#c43c35;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);background-repeat:repeat-x;filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ee5f5b', endColorstr='#c43c35', GradientType=0);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);} .btn.success,.alert-message.success{background-color:#57a957;background-image:-khtml-gradient(linear, left top, left bottom, from(#62c462), to(#57a957));background-image:-moz-linear-gradient(top, #62c462, #57a957);background-image:-ms-linear-gradient(top, #62c462, #57a957);background-image:-webkit-gradient(linear, left top, left bottom, color-stop(0%, #62c462), color-stop(100%, #57a957));background-image:-webkit-linear-gradient(top, #62c462, #57a957);background-image:-o-linear-gradient(top, #62c462, #57a957);background-image:linear-gradient(top, #62c462, #57a957);background-repeat:repeat-x;filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#62c462', endColorstr='#57a957', GradientType=0);border-color:#57a957 #57a957 #3d773d;border-color:rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);} .btn.info,.alert-message.info{background-color:#339bb9;background-image:-khtml-gradient(linear, left top, left bottom, from(#5bc0de), to(#339bb9));background-image:-moz-linear-gradient(top, #5bc0de, #339bb9);background-image:-ms-linear-gradient(top, #5bc0de, #339bb9);background-image:-webkit-gradient(linear, left top, left bottom, color-stop(0%, #5bc0de), color-stop(100%, #339bb9));background-image:-webkit-linear-gradient(top, #5bc0de, #339bb9);background-image:-o-linear-gradient(top, #5bc0de, #339bb9);background-image:linear-gradient(top, #5bc0de, #339bb9);background-repeat:repeat-x;filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#5bc0de', endColorstr='#339bb9', GradientType=0);border-color:#339bb9 #339bb9 #22697d;border-color:rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);} -.btn{display:inline-block;padding:5px 14px 6px;font-size:13px;line-height:normal;color:#333;text-shadow:0 1px 1px rgba(255, 255, 255, 0.75);background-color:#e6e6e6;background-image:-webkit-gradient(linear, 0 0, 0 100%, from(#ffffff), color-stop(25%, #ffffff), to(#e6e6e6));background-image:-webkit-linear-gradient(#ffffff, #ffffff 25%, #e6e6e6);background-image:-moz-linear-gradient(top, #ffffff, #ffffff 25%, #e6e6e6);background-image:-ms-linear-gradient(#ffffff, #ffffff 25%, #e6e6e6);background-image:-o-linear-gradient(#ffffff, #ffffff 25%, #e6e6e6);background-image:linear-gradient(#ffffff, #ffffff 25%, #e6e6e6);background-repeat:no-repeat;filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#e6e6e6', GradientType=0);border:1px solid #ccc;border-bottom-color:#bbb;-webkit-border-radius:4px;-moz-border-radius:4px;border-radius:4px;-webkit-box-shadow:inset 0 1px 0 rgba(255, 255, 255, 0.2),0 1px 2px rgba(0, 0, 0, 0.05);-moz-box-shadow:inset 0 1px 0 rgba(255, 255, 255, 0.2),0 1px 2px rgba(0, 0, 0, 0.05);box-shadow:inset 0 1px 0 rgba(255, 255, 255, 0.2),0 1px 2px rgba(0, 0, 0, 0.05);cursor:pointer;-webkit-transition:0.1s linear all;-moz-transition:0.1s linear all;-ms-transition:0.1s linear all;-o-transition:0.1s linear all;transition:0.1s linear all;}.btn:hover{color:#333;text-decoration:none;background-position:0 -15px;} +.btn{display:inline-block;padding:5px 14px 6px;font-size:13px;line-height:normal;color:#333;text-shadow:0 1px 1px rgba(255, 255, 255, 0.75);background-color:#e6e6e6;background-image:-webkit-gradient(linear, 0 0, 0 100%, from(#ffffff), color-stop(25%, #ffffff), to(#e6e6e6));background-image:-webkit-linear-gradient(#ffffff, #ffffff 25%, #e6e6e6);background-image:-moz-linear-gradient(top, #ffffff, #ffffff 25%, #e6e6e6);background-image:-ms-linear-gradient(#ffffff, #ffffff 25%, #e6e6e6);background-image:-o-linear-gradient(#ffffff, #ffffff 25%, #e6e6e6);background-image:linear-gradient(#ffffff, #ffffff 25%, #e6e6e6);background-repeat:no-repeat;filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#e6e6e6', GradientType=0);border:1px solid #ccc;border-bottom-color:#bbb;-webkit-border-radius:4px;-moz-border-radius:4px;border-radius:4px;-webkit-box-shadow:inset 0 1px 0 rgba(255, 255, 255, 0.2),0 1px 2px rgba(0, 0, 0, 0.05);-moz-box-shadow:inset 0 1px 0 rgba(255, 255, 255, 0.2),0 1px 2px rgba(0, 0, 0, 0.05);box-shadow:inset 0 1px 0 rgba(255, 255, 255, 0.2),0 1px 2px rgba(0, 0, 0, 0.05);cursor:pointer;-webkit-transition:0.1s linear all;-moz-transition:0.1s linear all;-ms-transition:0.1s linear all;-o-transition:0.1s linear all;transition:0.1s linear all;}.btn:hover{color:#404040;text-decoration:none;background-position:0 -15px;} .btn:focus{outline:1px dotted #666;} -.btn.primary{color:#ffffff;background-color:#0064cd;background-image:-khtml-gradient(linear, left top, left bottom, from(#049cdb), to(#0064cd));background-image:-moz-linear-gradient(top, #049cdb, #0064cd);background-image:-ms-linear-gradient(top, #049cdb, #0064cd);background-image:-webkit-gradient(linear, left top, left bottom, color-stop(0%, #049cdb), color-stop(100%, #0064cd));background-image:-webkit-linear-gradient(top, #049cdb, #0064cd);background-image:-o-linear-gradient(top, #049cdb, #0064cd);background-image:linear-gradient(top, #049cdb, #0064cd);background-repeat:repeat-x;filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#049cdb', endColorstr='#0064cd', GradientType=0);border-color:#0064cd #0064cd #003f81;border-color:rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);} +.btn.primary{color:#ffffff;text-shadow:0 -1px 0 rgba(0, 0, 0, 0.25);background-color:#0064cd;background-image:-khtml-gradient(linear, left top, left bottom, from(#049cdb), to(#0064cd));background-image:-moz-linear-gradient(top, #049cdb, #0064cd);background-image:-ms-linear-gradient(top, #049cdb, #0064cd);background-image:-webkit-gradient(linear, left top, left bottom, color-stop(0%, #049cdb), color-stop(100%, #0064cd));background-image:-webkit-linear-gradient(top, #049cdb, #0064cd);background-image:-o-linear-gradient(top, #049cdb, #0064cd);background-image:linear-gradient(top, #049cdb, #0064cd);background-repeat:repeat-x;filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#049cdb', endColorstr='#0064cd', GradientType=0);border-color:#0064cd #0064cd #003f81;border-color:rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);} .btn.active,.btn:active{-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);} .btn.disabled{cursor:default;background-image:none;filter:progid:DXImageTransform.Microsoft.gradient(enabled = false);filter:alpha(opacity=65);-moz-opacity:0.65;opacity:0.65;-webkit-box-shadow:none;-moz-box-shadow:none;box-shadow:none;} .btn[disabled]{cursor:default;background-image:none;filter:progid:DXImageTransform.Microsoft.gradient(enabled = false);filter:alpha(opacity=65);-moz-opacity:0.65;opacity:0.65;-webkit-box-shadow:none;-moz-box-shadow:none;box-shadow:none;} @@ -255,6 +255,14 @@ button.btn::-moz-focus-inner,input[type=submit].btn::-moz-focus-inner{padding:0; .label.warning{background-color:#f89406;} .label.success{background-color:#46a546;} .label.notice{background-color:#62cffc;} +.dropdown{position:relative;} +.dropdown-toggle:after{display:inline-block;width:0;height:0;margin-top:8px;margin-left:6px;text-indent:-99999px;vertical-align:top;border-left:4px solid transparent;border-right:4px solid transparent;border-top:4px solid #ffffff;filter:alpha(opacity=30);-moz-opacity:0.3;opacity:0.3;content:"↓";} +.dropdown:hover .dropdown-toggle:after{filter:alpha(opacity=100);-moz-opacity:1;opacity:1;} +.dropdown-menu{position:absolute;top:40px;z-index:900;float:left;display:none;min-width:160px;max-width:220px;_width:160px;padding:6px 0;margin-left:0;margin-right:0;background-color:#ffffff;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;zoom:1;}.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{color:#404040;text-decoration:none;background-color:#dddddd;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);background-repeat:repeat-x;filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#eeeeee', endColorstr='#dddddd', GradientType=0);-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.open .dropdown-toggle{color:#ffffff;background:#ccc;background:rgba(0, 0, 0, 0.3);} +.dropdown.open .dropdown-menu{display:block;} .tabs,.pills{padding:0;margin:0 0 20px;list-style:none;zoom:1;}.tabs:before,.pills:before,.tabs:after,.pills:after{display:table;*display:inline;content:"";zoom:1;} .tabs:after,.pills:after{clear:both;} .tabs>li,.pills>li{float:left;}.tabs>li>a,.pills>li>a{display:block;} diff --git a/docs/assets/css/docs.css b/docs/assets/css/docs.css index 8432f92ea7..5ed38bb478 100644 --- a/docs/assets/css/docs.css +++ b/docs/assets/css/docs.css @@ -317,6 +317,11 @@ h2 + table { .example-sites img { width: 290px; } +.built-with { + margin: -18px 0 27px; + color: #999; + text-align: center; +} .scrollspy-example { height: 200px; diff --git a/docs/assets/js/application.js b/docs/assets/js/application.js index 74024caa1d..255f624bed 100644 --- a/docs/assets/js/application.js +++ b/docs/assets/js/application.js @@ -1,5 +1,36 @@ $(function(){ + // Hide the Mobile Safari address bar once loaded + // ============================================== + + window.addEventListener("load",function() { + // Set a timeout... + setTimeout(function(){ + // Hide the address bar! + window.scrollTo(0, 1); + }, 0); + }); + + + // Docs topbar nav + // =============== + + $('.nav .active').click(function(e) { + e.preventDefault(); + $(this).siblings().toggle(); + }); + + + // Show grid dimensions on hover + // ============================= + + $('.show-grid > div').hover(function() { + var width = $(this).width(); + $(this).attr('title', width); + $(this).twipsy(); + }); + + // table sort example // ================== diff --git a/docs/base-css.html b/docs/base-css.html index 63ec53306d..bb54b0c511 100644 --- a/docs/base-css.html +++ b/docs/base-css.html @@ -1178,18 +1178,7 @@ Form states <!-- Le javascript --> <!-- Placed at the end of the document so the pages load faster --> - <script src="http://code.jquery.com/jquery-1.5.2.min.js"></script> - - <script type="text/javascript"> - // NOT FINAL BY ANY MEANS, JUST MAH JANK CODE BRO - $(document).ready(function() { - $('.nav .active').click(function(e) { - e.preventDefault(); - $(this).siblings().toggle(); - }); - }); - </script> - + <script src="http://code.jquery.com/jquery-1.7.min.js"></script> <script src="http://autobahn.tablesorter.com/jquery.tablesorter.min.js"></script> <script src="assets/js/google-code-prettify/prettify.js"></script> <script>$(function () { prettyPrint() })</script> diff --git a/docs/components.html b/docs/components.html index 11d83c51ae..9c683b9b2d 100644 --- a/docs/components.html +++ b/docs/components.html @@ -814,18 +814,7 @@ Lorem ipsum dolar sit amet illo error <a href="#" title="below">ipsum</a> verita <!-- Le javascript --> <!-- Placed at the end of the document so the pages load faster --> - <script src="http://code.jquery.com/jquery-1.5.2.min.js"></script> - - <script type="text/javascript"> - // NOT FINAL BY ANY MEANS, JUST MAH JANK CODE BRO - $(document).ready(function() { - $('.nav .active').click(function(e) { - e.preventDefault(); - $(this).siblings().toggle(); - }); - }); - </script> - + <script src="http://code.jquery.com/jquery-1.7.min.js"></script> <script src="http://autobahn.tablesorter.com/jquery.tablesorter.min.js"></script> <script src="assets/js/google-code-prettify/prettify.js"></script> <script>$(function () { prettyPrint() })</script> diff --git a/docs/index.html b/docs/index.html index 55a75b1bf6..1b7edb8c56 100644 --- a/docs/index.html +++ b/docs/index.html @@ -107,19 +107,20 @@ <div class="marketing"> <h1>Built with Bootstrap</h1> - <ul class="media-grid example-sites"> - <li> - <a href="http://kippt.com/" target="_blank"> + <p class="built-with">For even more sites built with Bootstrap, <a href="http://builtwithbootstrap.tumblr.com/" target="_blank">visit the unofficial Tumblr</a>.</p> + <ul class="thumbnails example-sites"> + <li class="span4"> + <a class="thumbnail" href="http://kippt.com/" target="_blank"> <img src="assets/img/example-sites/kippt.png" alt="Kippt"> </a> </li> - <li> - <a href="http://www.fleetio.com/" target="_blank"> + <li class="span4"> + <a class="thumbnail" href="http://www.fleetio.com/" target="_blank"> <img src="assets/img/example-sites/fleetio.png" alt="Fleetio"> </a> </li> - <li> - <a href="http://www.jshint.com/" target="_blank"> + <li class="span4"> + <a class="thumbnail" href="http://www.jshint.com/" target="_blank"> <img src="assets/img/example-sites/jshint.png" alt="JS Hint"> </a> </li> @@ -233,27 +234,7 @@ <!-- Le javascript --> <!-- Placed at the end of the document so the pages load faster --> - <script src="http://code.jquery.com/jquery-1.6.2.min.js"></script> - - <script type="text/javascript"> - // When ready... - window.addEventListener("load",function() { - // Set a timeout... - setTimeout(function(){ - // Hide the address bar! - window.scrollTo(0, 1); - }, 0); - }); - - // NOT FINAL BY ANY MEANS, JUST MAH JANK CODE BRO - $(document).ready(function() { - $('.nav .active').click(function(e) { - e.preventDefault(); - $(this).siblings().toggle(); - }); - }); - </script> - + <script src="http://code.jquery.com/jquery-1.7.min.js"></script> <script src="http://autobahn.tablesorter.com/jquery.tablesorter.min.js"></script> <script src="assets/js/google-code-prettify/prettify.js"></script> <script>$(function () { prettyPrint() })</script> diff --git a/docs/less.html b/docs/less.html index 52de8b6aac..e004bc24c2 100644 --- a/docs/less.html +++ b/docs/less.html @@ -466,18 +466,7 @@ <!-- Le javascript --> <!-- Placed at the end of the document so the pages load faster --> - <script src="http://code.jquery.com/jquery-1.5.2.min.js"></script> - - <script type="text/javascript"> - // NOT FINAL BY ANY MEANS, JUST MAH JANK CODE BRO - $(document).ready(function() { - $('.nav .active').click(function(e) { - e.preventDefault(); - $(this).siblings().toggle(); - }); - }); - </script> - + <script src="http://code.jquery.com/jquery-1.7.min.js"></script> <script src="http://autobahn.tablesorter.com/jquery.tablesorter.min.js"></script> <script src="assets/js/google-code-prettify/prettify.js"></script> <script>$(function () { prettyPrint() })</script> diff --git a/docs/scaffolding.html b/docs/scaffolding.html index 7431ae58b3..4735534129 100644 --- a/docs/scaffolding.html +++ b/docs/scaffolding.html @@ -371,29 +371,7 @@ <!-- Le javascript --> <!-- Placed at the end of the document so the pages load faster --> - <script src="http://code.jquery.com/jquery-1.5.2.min.js"></script> - - <script type="text/javascript"> - // NOT FINAL BY ANY MEANS, JUST MAH JANK CODE BRO - $(document).ready(function() { - $('.nav .active').click(function(e) { - e.preventDefault(); - $(this).siblings().toggle(); - }); - }); - </script> - - <script type="text/javascript"> - // Show grid dimensions on hover - $(document).ready(function() { - $('.show-grid > div').hover(function() { - var width = $(this).width(); - $(this).attr('title', width); - $(this).twipsy(); - }); - }); - </script> - + <script src="http://code.jquery.com/jquery-1.7.min.js"></script> <script src="http://autobahn.tablesorter.com/jquery.tablesorter.min.js"></script> <script src="assets/js/google-code-prettify/prettify.js"></script> <script>$(function () { prettyPrint() })</script> diff --git a/docs/upgrading.html b/docs/upgrading.html index 60c9c325b8..3e5a14a8ab 100644 --- a/docs/upgrading.html +++ b/docs/upgrading.html @@ -99,21 +99,14 @@ <li>Added button bar options</li> </ul> </li> +<!-- <li> <ul> <li></li> </ul> </li> -</ul> - -<!-- - - - --> - - - +</ul> <!-- Footer @@ -128,18 +121,7 @@ <!-- Le javascript --> <!-- Placed at the end of the document so the pages load faster --> - <script src="http://code.jquery.com/jquery-1.5.2.min.js"></script> - - <script type="text/javascript"> - // NOT FINAL BY ANY MEANS, JUST MAH JANK CODE BRO - $(document).ready(function() { - $('.nav .active').click(function(e) { - e.preventDefault(); - $(this).siblings().toggle(); - }); - }); - </script> - + <script src="http://code.jquery.com/jquery-1.7.min.js"></script> <script src="http://autobahn.tablesorter.com/jquery.tablesorter.min.js"></script> <script src="assets/js/google-code-prettify/prettify.js"></script> <script>$(function () { prettyPrint() })</script> diff --git a/lib/bootstrap.less b/lib/bootstrap.less index ffad359130..a871a7cd43 100644 --- a/lib/bootstrap.less +++ b/lib/bootstrap.less @@ -27,6 +27,7 @@ // Temp catchall for what's missing thus far @import "patterns.less"; +@import "dropdowns.less"; @import "tabs-pills.less"; @import "breadcrumbs.less"; @import "pagination.less"; diff --git a/lib/dropdowns.less b/lib/dropdowns.less new file mode 100644 index 0000000000..7436f6a2c5 --- /dev/null +++ b/lib/dropdowns.less @@ -0,0 +1,94 @@ +// 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 { + display: inline-block; + width: 0; + height: 0; + margin-top: 8px; + margin-left: 6px; + text-indent: -99999px; + vertical-align: top; + border-left: 4px solid transparent; + border-right: 4px solid transparent; + border-top: 4px solid @white; + .opacity(30); + content: "↓"; +} +.dropdown:hover .dropdown-toggle:after { + .opacity(100); +} +// The dropdown menu (ul) +.dropdown-menu { + position: absolute; + top: 40px; + z-index: 900; + float: left; + display: none; // None by default, but block on "open" of the menu + min-width: 160px; + max-width: 220px; + _width: 160px; + padding: 6px 0; + margin-left: 0; // override default ul styles + margin-right: 0; + background-color: @white; + 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); + zoom: 1; // do we need this? + + // Unfloat any li's to make them stack + li { + float: none; + display: block; + background-color: none; + } + // Dividers (basically an hr) within the dropdown + .divider { + height: 1px; + margin: 5px 0; + overflow: hidden; + background-color: #eee; + border-bottom: 1px solid @white; + } +} + +.topbar .dropdown-menu, .dropdown-menu { + // 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 @white; + // Hover state + &:hover { + color: @grayDark; + text-decoration: none; + #gradient > .vertical(#eeeeee, #dddddd); + @shadow: inset 0 1px 0 rgba(0,0,0,.025), inset 0 -1px rgba(0,0,0,.025); + .box-shadow(@shadow); + } + } +} + +// Open state for the dropdown +.dropdown.open { + .dropdown-toggle { + color: @white; + background: #ccc; + background: rgba(0,0,0,.3); + } + .dropdown-menu { + display: block; + } +} diff --git a/lib/patterns.less b/lib/patterns.less index ec717e030f..44c427adf5 100644 --- a/lib/patterns.less +++ b/lib/patterns.less @@ -401,7 +401,7 @@ footer { cursor: pointer; &:hover { - color: #333; + color: @grayDark; text-decoration: none; background-position: 0 -15px; } @@ -414,6 +414,7 @@ footer { // Primary Button Type &.primary { color: @white; + text-shadow: 0 -1px 0 rgba(0,0,0,.25); .gradientBar(@blue, @blueDark) } -- GitLab From c854ed167ce37d6a008723c78f2e6336211fff69 Mon Sep 17 00:00:00 2001 From: Mark Otto <markdotto@gmail.com> Date: Wed, 21 Dec 2011 16:26:21 -0600 Subject: [PATCH 142/318] rename media grid to thumbnails, recompile bootstrap, fix examples for mobile phones --- bootstrap.css | 2 +- docs/assets/css/docs.css | 2 +- lib/bootstrap.less | 2 +- lib/{media-grids.less => thumbnails.less} | 0 4 files changed, 3 insertions(+), 3 deletions(-) rename lib/{media-grids.less => thumbnails.less} (100%) diff --git a/bootstrap.css b/bootstrap.css index 74849e66b9..c7f2dfc6a2 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: Wed Dec 21 16:21:54 CST 2011 + * Date: Wed Dec 21 16:26:02 CST 2011 */ html, body { margin: 0; diff --git a/docs/assets/css/docs.css b/docs/assets/css/docs.css index 5ed38bb478..20ea50d6f1 100644 --- a/docs/assets/css/docs.css +++ b/docs/assets/css/docs.css @@ -387,7 +387,7 @@ h2 + table { .example-sites { margin-left: 0; } - .example-sites a { + .example-sites > li { float: none; display: block; max-width: 300px; diff --git a/lib/bootstrap.less b/lib/bootstrap.less index a871a7cd43..e05a966add 100644 --- a/lib/bootstrap.less +++ b/lib/bootstrap.less @@ -34,7 +34,7 @@ @import "modals.less"; @import "twipsy.less"; @import "popovers.less"; -@import "media-grids.less"; +@import "thumbnails.less"; // Responsive @import "responsive.less"; \ No newline at end of file diff --git a/lib/media-grids.less b/lib/thumbnails.less similarity index 100% rename from lib/media-grids.less rename to lib/thumbnails.less -- GitLab From af5793e1cd358862cf510a54dda2476b95a26ca8 Mon Sep 17 00:00:00 2001 From: Mark Otto <markdotto@gmail.com> Date: Wed, 21 Dec 2011 16:41:46 -0600 Subject: [PATCH 143/318] fix mobile example sites, remove unused JS from docs index --- docs/assets/css/docs.css | 5 ++++- docs/index.html | 24 ------------------------ 2 files changed, 4 insertions(+), 25 deletions(-) diff --git a/docs/assets/css/docs.css b/docs/assets/css/docs.css index 20ea50d6f1..b3c4649419 100644 --- a/docs/assets/css/docs.css +++ b/docs/assets/css/docs.css @@ -315,7 +315,7 @@ h2 + table { /* Example sites showcase */ .example-sites img { - width: 290px; + max-width: 290px; } .built-with { margin: -18px 0 27px; @@ -393,6 +393,9 @@ h2 + table { max-width: 300px; margin: 0 auto 18px; } + .example-sites img { + max-width: 270px; + } table code { white-space: normal; diff --git a/docs/index.html b/docs/index.html index 1b7edb8c56..9cad062714 100644 --- a/docs/index.html +++ b/docs/index.html @@ -124,23 +124,6 @@ <img src="assets/img/example-sites/jshint.png" alt="JS Hint"> </a> </li> -<!-- - <li> - <a href="http://bartop.co/" target="_blank"> - <img src="assets/img/example-sites/bartop.png" alt="Bartop.co"> - </a> - </li> - <li> - <a href="http://railwayjs.com/" target="_blank"> - <img src="assets/img/example-sites/railwayjs.png" alt="RailwayJS"> - </a> - </li> - <li> - <a href="http://www.totalwireframe.com/" target="_blank"> - <img src="assets/img/example-sites/totalwireframe.png" alt="Total Wireframe"> - </a> - </li> - --> </ul> <h1>Designed for everyone, everywhere</h1> @@ -235,13 +218,6 @@ <!-- Le javascript --> <!-- Placed at the end of the document so the pages load faster --> <script src="http://code.jquery.com/jquery-1.7.min.js"></script> - <script src="http://autobahn.tablesorter.com/jquery.tablesorter.min.js"></script> - <script src="assets/js/google-code-prettify/prettify.js"></script> - <script>$(function () { prettyPrint() })</script> - <script src="../js/bootstrap-transitions.js"></script> - <script src="../js/bootstrap-dropdown.js"></script> - <script src="../js/bootstrap-twipsy.js"></script> - <script src="../js/bootstrap-scrollspy.js"></script> <script src="assets/js/application.js"></script> </body> -- GitLab From 00cbadf9943fea6a196cc01c7705d7f2c012bfa1 Mon Sep 17 00:00:00 2001 From: Mark Otto <markdotto@gmail.com> Date: Wed, 21 Dec 2011 18:21:55 -0600 Subject: [PATCH 144/318] update thumbnails to keep images from going past edges of thumbnails --- bootstrap.css | 5 +++-- bootstrap.min.css | 4 ++-- lib/thumbnails.less | 3 ++- 3 files changed, 7 insertions(+), 5 deletions(-) diff --git a/bootstrap.css b/bootstrap.css index c7f2dfc6a2..3fa776fcbb 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: Wed Dec 21 16:26:02 CST 2011 + * Date: Wed Dec 21 18:20:33 CST 2011 */ html, body { margin: 0; @@ -2615,6 +2615,7 @@ button.btn::-moz-focus-inner, input[type=submit].btn::-moz-focus-inner { } .thumbnail { display: block; + padding: 4px; line-height: 1; border: 1px solid #ddd; -webkit-border-radius: 4px; @@ -2632,7 +2633,7 @@ a.thumbnail:hover { } .thumbnail > img { display: block; - margin: 4px; + max-width: 100%; } .thumbnail .caption { padding: 9px; diff --git a/bootstrap.min.css b/bootstrap.min.css index 728a48a129..71996816d8 100644 --- a/bootstrap.min.css +++ b/bootstrap.min.css @@ -338,9 +338,9 @@ button.btn::-moz-focus-inner,input[type=submit].btn::-moz-focus-inner{padding:0; .thumbnails{margin-left:-20px;margin-bottom:0;list-style:none;zoom:1;}.thumbnails:before,.thumbnails:after{display:table;*display:inline;content:"";zoom:1;} .thumbnails:after{clear:both;} .thumbnails>li{float:left;margin:0 0 20px 20px;} -.thumbnail{display:block;line-height:1;border:1px solid #ddd;-webkit-border-radius:4px;-moz-border-radius:4px;border-radius:4px;-webkit-box-shadow:0 1px 1px rgba(0, 0, 0, 0.075);-moz-box-shadow:0 1px 1px rgba(0, 0, 0, 0.075);box-shadow:0 1px 1px rgba(0, 0, 0, 0.075);} +.thumbnail{display:block;padding:4px;line-height:1;border:1px solid #ddd;-webkit-border-radius:4px;-moz-border-radius:4px;border-radius:4px;-webkit-box-shadow:0 1px 1px rgba(0, 0, 0, 0.075);-moz-box-shadow:0 1px 1px rgba(0, 0, 0, 0.075);box-shadow:0 1px 1px rgba(0, 0, 0, 0.075);} a.thumbnail:hover{border-color:#0069d6;-webkit-box-shadow:0 1px 4px rgba(0, 105, 214, 0.25);-moz-box-shadow:0 1px 4px rgba(0, 105, 214, 0.25);box-shadow:0 1px 4px rgba(0, 105, 214, 0.25);} -.thumbnail>img{display:block;margin:4px;} +.thumbnail>img{display:block;max-width:100%;} .thumbnail .caption{padding:9px;} .hidden{display:none;visibility:hidden;} @media (max-width: 480px){.modal{width:auto;margin:0;} .horizontal-form .control-group>label{float:none;width:auto;padding-top:0;text-align:left;} .horizontal-form .controls{margin-left:0;} .horizontal-form .control-list{padding-top:0;} .horizontal-form .form-actions{padding-left:0;}}@media (max-width: 768px){.container{width:auto;padding:0 20px;} .row{margin-left:0;} [class*="span"]{float:none;display:block;width:auto;margin:0;} .nav{position:absolute;top:0;left:0;width:180px;padding-top:40px;list-style:none;} .nav,.nav>li:last-child a{-webkit-border-radius:0 0 4px 0;-moz-border-radius:0 0 4px 0;border-radius:0 0 4px 0;} .nav>li{float:none;display:none;} .nav>li>a{float:none;background-color:#222;} .nav>.active{display:block;position:absolute;top:0;left:0;} .navbar ul .active>a{background-color:transparent;} .nav>.active a:after{display:inline-block;width:0;height:0;margin-top:8px;margin-left:6px;text-indent:-99999px;vertical-align:top;border-left:4px solid transparent;border-right:4px solid transparent;border-top:4px solid #ffffff;filter:alpha(opacity=100);-moz-opacity:1;opacity:1;content:"↓";} .nav>.active a:hover{background-color:rgba(255, 255, 255, 0.05);}}@media (min-width: 768px) and (max-width: 940px){.container{width:748px;} .span1{width:44px;} .span2{width:108px;} .span3{width:172px;} .span4{width:236px;} .span5{width:300px;} .span6{width:364px;} .span7{width:428px;} .span8{width:492px;} .span9{width:556px;} .span10{width:620px;} .span11{width:684px;} .span12{width:748px;} .offset1{margin-left:64px;} .offset2{margin-left:128px;} .offset3{margin-left:192px;} .offset4{margin-left:256px;} .offset5{margin-left:320px;} .offset6{margin-left:384px;} .offset7{margin-left:448px;} .offset8{margin-left:512px;} .offset9{margin-left:576px;} .offset10{margin-left:640px;} .offset11{margin-left:704px;} .offset12{margin-left:768px;}} diff --git a/lib/thumbnails.less b/lib/thumbnails.less index 12626df3f1..9e25f50272 100644 --- a/lib/thumbnails.less +++ b/lib/thumbnails.less @@ -13,6 +13,7 @@ } .thumbnail { display: block; + padding: 4px; line-height: 1; border: 1px solid #ddd; .border-radius(4px); @@ -26,7 +27,7 @@ a.thumbnail:hover { // Images and captions .thumbnail > img { display: block; - margin: 4px; + max-width: 100%; } .thumbnail .caption { padding: 9px; -- GitLab From 12a0d69454a2831031035d19237d36d38bb2c2a9 Mon Sep 17 00:00:00 2001 From: Mark Otto <markdotto@gmail.com> Date: Wed, 21 Dec 2011 18:38:03 -0600 Subject: [PATCH 145/318] fix dropdowns in components docs page --- docs/components.html | 30 +++++++++++++++--------------- docs/javascript.html | 23 ++++++----------------- 2 files changed, 21 insertions(+), 32 deletions(-) diff --git a/docs/components.html b/docs/components.html index 9c683b9b2d..2f359ab57f 100644 --- a/docs/components.html +++ b/docs/components.html @@ -22,6 +22,18 @@ <link rel="apple-touch-icon" href="assets/ico/bootstrap-apple-57x57.png"> <link rel="apple-touch-icon" sizes="72x72" href="assets/ico/bootstrap-apple-72x72.png"> <link rel="apple-touch-icon" sizes="114x114" href="assets/ico/bootstrap-apple-114x114.png"> + + <!-- Le javascript --> + <!-- Placed at the end of the document so the pages load faster --> + <script src="http://code.jquery.com/jquery-1.7.min.js"></script> + <script src="http://autobahn.tablesorter.com/jquery.tablesorter.min.js"></script> + <script src="assets/js/google-code-prettify/prettify.js"></script> + <script>$(function () { prettyPrint() })</script> + <script src="../js/bootstrap-transitions.js"></script> + <script src="../js/bootstrap-dropdown.js"></script> + <script src="../js/bootstrap-twipsy.js"></script> + <script src="../js/bootstrap-scrollspy.js"></script> + <script src="assets/js/application.js"></script> </head> <body> @@ -230,7 +242,7 @@ <h1>Navbar</h1> </div> <h2>Fixed navbar</h2> - <div class="navbar navbar-static" data-dropdown="dropdown"> + <div class="navbar navbar-static"> <div class="navbar-inner"> <div class="container" style="width: auto;"> <a class="brand" href="#">Project Name</a> @@ -240,7 +252,7 @@ <li><a href="#">Link</a></li> <li><a href="#">Link</a></li> <li class="dropdown"> - <a href="#" class="dropdown-toggle">Dropdown</a> + <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown</a> <ul class="dropdown-menu"> <li><a href="#">Secondary link</a></li> <li><a href="#">Something else here</a></li> @@ -255,7 +267,7 @@ <ul class="nav secondary-nav"> <li class="divider"></li> <li class="dropdown"> - <a href="#" class="dropdown-toggle">Dropdown</a> + <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown</a> <ul class="dropdown-menu"> <li><a href="#">Secondary link</a></li> <li><a href="#">Something else here</a></li> @@ -811,17 +823,5 @@ Lorem ipsum dolar sit amet illo error <a href="#" title="below">ipsum</a> verita <p>Icons from <a href="http://glyphicons.com">Glyphicons Free</a>, licensed under <a href="http://creativecommons.org/licenses/by/3.0/">CC BY 3.0</a>.</p> </footer> </div><!-- /container --> - - <!-- Le javascript --> - <!-- Placed at the end of the document so the pages load faster --> - <script src="http://code.jquery.com/jquery-1.7.min.js"></script> - <script src="http://autobahn.tablesorter.com/jquery.tablesorter.min.js"></script> - <script src="assets/js/google-code-prettify/prettify.js"></script> - <script>$(function () { prettyPrint() })</script> - <script src="../js/bootstrap-transitions.js"></script> - <script src="../js/bootstrap-dropdown.js"></script> - <script src="../js/bootstrap-twipsy.js"></script> - <script src="../js/bootstrap-scrollspy.js"></script> - <script src="assets/js/application.js"></script> </body> </html> diff --git a/docs/javascript.html b/docs/javascript.html index 568991969b..91fe949101 100644 --- a/docs/javascript.html +++ b/docs/javascript.html @@ -26,17 +26,6 @@ <!-- Le javascript --> <!-- placed up here so that the inline demos can be next to their markup --> <script src="http://code.jquery.com/jquery-1.7.min.js"></script> - - <script type="text/javascript"> - // NOT FINAL BY ANY MEANS, JUST MAH JANK CODE BRO - $(document).ready(function() { - $('.nav .active').click(function(e) { - e.preventDefault(); - $(this).siblings().toggle(); - }); - }); - </script> - <script src="assets/js/google-code-prettify/prettify.js"></script> <script>$(function () { prettyPrint() })</script> <script src="../js/bootstrap-transition.js"></script> @@ -147,7 +136,7 @@ </tr> <tr> <td><a href="./javascript.html#popover">bootstrap-popover.js</a></td> - <td>The popover plugin provides a simple interface for adding popovers to your application. It extends the <a href="#twipsy">boostrap-twipsy.js</a> plugin, so be sure to grab that file as well when including popovers in your project!</td> + <td>The popover plugin provides a simple interface for adding popovers to your application. It extends the <a href="#twipsy">bootstrap-twipsy.js</a> plugin, so be sure to grab that file as well when including popovers in your project!</td> </tr> <tr> <td><a href="./javascript.html#button">bootstrap-button.js</a></td> @@ -306,7 +295,7 @@ $('#myModal').bind('hidden', function () { <a href="../js/bootstrap-dropdown.js" target="_blank" class="btn primary">Download</a> </div> <div class="span9 columns"> - <h3>Using boostrap-dropdown.js</h3> + <h3>Using bootstrap-dropdown.js</h3> <pre class="prettyprint linenums">$('.dropdown-toggle').dropdown()</pre> <h3>Markup</h3> <p>To quickly add dropdown functionality to any element just add <code>data-toggle="dropdown"</code>. Any valid bootstrap dropdown will automatically be activated.</p> @@ -380,7 +369,7 @@ $('#myModal').bind('hidden', function () { <a href="../js/bootstrap-scrollspy.js" target="_blank" class="btn primary">Download</a> </div> <div class="span9 columns"> - <h2>Using boostrap-scrollspy.js</h2> + <h2>Using bootstrap-scrollspy.js</h2> <pre class="prettyprint linenums">$('#navbar').dropdown()</pre> <h3>Markup</h3> <p>To easily add scrollspy behavior to your topbar navigation, just add <code>data-spy="scroll"</code> to the element you want to spy on (most typically this would be the body). @@ -454,7 +443,7 @@ $('#myModal').bind('hidden', function () { <a href="../js/bootstrap-tab.js" target="_blank" class="btn primary">Download</a> </div> <div class="span9 columns"> - <h3>Using boostrap-tab.js</h3> + <h3>Using bootstrap-tab.js</h3> <pre class="prettyprint linenums">$('#myTab').tab('show')</pre> <h3>Markup</h3> <p>You can activate a tab or pill navigation without writing any javascript by simply specifying <code>data-toggle="tab"</code> or <code>data-toggle="pill"</code> on an element.</p> @@ -651,11 +640,11 @@ $('a[data-toggle="tab"]').bind('shown', function (e) { </div> <div class="row"> <div class="span3 columns"> - <p>The popover plugin provides a simple interface for adding popovers to your application. It extends the <a href="#twipsy">boostrap-twipsy.js</a> plugin, so be sure to grab that file as well when including popovers in your project!</p> + <p>The popover plugin provides a simple interface for adding popovers to your application. It extends the <a href="#twipsy">bootstrap-twipsy.js</a> plugin, so be sure to grab that file as well when including popovers in your project!</p> <a href="../js/bootstrap-popover.js" target="_blank" class="btn primary">Download</a> </div> <div class="span9 columns"> - <h3>Using boostrap-popover.js</h3> + <h3>Using bootstrap-popover.js</h3> <pre class="prettyprint linenums">$('#example').popover(options)</pre> <h3>Options</h3> <table class="striped-table"> -- GitLab From 369cedd87c4447241ce2a73ed6c8414a4cd8bdf8 Mon Sep 17 00:00:00 2001 From: Mark Otto <markdotto@gmail.com> Date: Wed, 21 Dec 2011 19:31:01 -0600 Subject: [PATCH 146/318] update comment on select bg bug and confirmed it was fixed, scoped responsive .span* to .row --- bootstrap.css | 4 ++-- bootstrap.min.css | 2 +- lib/forms.less | 2 +- lib/responsive.less | 2 +- 4 files changed, 5 insertions(+), 5 deletions(-) diff --git a/bootstrap.css b/bootstrap.css index 354f534b28..fbd909de30 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: Wed Dec 21 18:38:56 CST 2011 + * Date: Wed Dec 21 19:30:30 CST 2011 */ html, body { margin: 0; @@ -2695,7 +2695,7 @@ a.thumbnail:hover { .row { margin-left: 0; } - [class*="span"] { + .row > [class*="span"] { float: none; display: block; width: auto; diff --git a/bootstrap.min.css b/bootstrap.min.css index 1fb1d4f32f..e6cf50d161 100644 --- a/bootstrap.min.css +++ b/bootstrap.min.css @@ -351,4 +351,4 @@ a.thumbnail:hover{border-color:#0069d6;-webkit-box-shadow:0 1px 4px rgba(0, 105, .thumbnail>img{display:block;max-width:100%;} .thumbnail .caption{padding:9px;} .hidden{display:none;visibility:hidden;} -@media (max-width: 480px){.modal{width:auto;margin:0;} .horizontal-form .control-group>label{float:none;width:auto;padding-top:0;text-align:left;} .horizontal-form .controls{margin-left:0;} .horizontal-form .control-list{padding-top:0;} .horizontal-form .form-actions{padding-left:0;}}@media (max-width: 768px){.container{width:auto;padding:0 20px;} .row{margin-left:0;} [class*="span"]{float:none;display:block;width:auto;margin:0;} .nav{position:absolute;top:0;left:0;width:180px;padding-top:40px;list-style:none;} .nav,.nav>li:last-child a{-webkit-border-radius:0 0 4px 0;-moz-border-radius:0 0 4px 0;border-radius:0 0 4px 0;} .nav>li{float:none;display:none;} .nav>li>a{float:none;background-color:#222;} .nav>.active{display:block;position:absolute;top:0;left:0;} .navbar ul .active>a{background-color:transparent;} .nav>.active a:after{display:inline-block;width:0;height:0;margin-top:8px;margin-left:6px;text-indent:-99999px;vertical-align:top;border-left:4px solid transparent;border-right:4px solid transparent;border-top:4px solid #ffffff;filter:alpha(opacity=100);-moz-opacity:1;opacity:1;content:"↓";} .nav>.active a:hover{background-color:rgba(255, 255, 255, 0.05);}}@media (min-width: 768px) and (max-width: 940px){.container{width:748px;} .span1{width:44px;} .span2{width:108px;} .span3{width:172px;} .span4{width:236px;} .span5{width:300px;} .span6{width:364px;} .span7{width:428px;} .span8{width:492px;} .span9{width:556px;} .span10{width:620px;} .span11{width:684px;} .span12{width:748px;} .offset1{margin-left:64px;} .offset2{margin-left:128px;} .offset3{margin-left:192px;} .offset4{margin-left:256px;} .offset5{margin-left:320px;} .offset6{margin-left:384px;} .offset7{margin-left:448px;} .offset8{margin-left:512px;} .offset9{margin-left:576px;} .offset10{margin-left:640px;} .offset11{margin-left:704px;} .offset12{margin-left:768px;}} +@media (max-width: 480px){.modal{width:auto;margin:0;} .horizontal-form .control-group>label{float:none;width:auto;padding-top:0;text-align:left;} .horizontal-form .controls{margin-left:0;} .horizontal-form .control-list{padding-top:0;} .horizontal-form .form-actions{padding-left:0;}}@media (max-width: 768px){.container{width:auto;padding:0 20px;} .row{margin-left:0;} .row>[class*="span"]{float:none;display:block;width:auto;margin:0;} .nav{position:absolute;top:0;left:0;width:180px;padding-top:40px;list-style:none;} .nav,.nav>li:last-child a{-webkit-border-radius:0 0 4px 0;-moz-border-radius:0 0 4px 0;border-radius:0 0 4px 0;} .nav>li{float:none;display:none;} .nav>li>a{float:none;background-color:#222;} .nav>.active{display:block;position:absolute;top:0;left:0;} .navbar ul .active>a{background-color:transparent;} .nav>.active a:after{display:inline-block;width:0;height:0;margin-top:8px;margin-left:6px;text-indent:-99999px;vertical-align:top;border-left:4px solid transparent;border-right:4px solid transparent;border-top:4px solid #ffffff;filter:alpha(opacity=100);-moz-opacity:1;opacity:1;content:"↓";} .nav>.active a:hover{background-color:rgba(255, 255, 255, 0.05);}}@media (min-width: 768px) and (max-width: 940px){.container{width:748px;} .span1{width:44px;} .span2{width:108px;} .span3{width:172px;} .span4{width:236px;} .span5{width:300px;} .span6{width:364px;} .span7{width:428px;} .span8{width:492px;} .span9{width:556px;} .span10{width:620px;} .span11{width:684px;} .span12{width:748px;} .offset1{margin-left:64px;} .offset2{margin-left:128px;} .offset3{margin-left:192px;} .offset4{margin-left:256px;} .offset5{margin-left:320px;} .offset6{margin-left:384px;} .offset7{margin-left:448px;} .offset8{margin-left:512px;} .offset9{margin-left:576px;} .offset10{margin-left:640px;} .offset11{margin-left:704px;} .offset12{margin-left:768px;}} diff --git a/lib/forms.less b/lib/forms.less index 64e77fdb4c..84fddd7d1f 100644 --- a/lib/forms.less +++ b/lib/forms.less @@ -93,7 +93,7 @@ input[type=file] { line-height: @baseLineHeight * 1.5; } -// Chrome on Linux needs background color +// Chrome on Linux and Mobile Safari need background-color select { background-color: @white; } diff --git a/lib/responsive.less b/lib/responsive.less index c74f6b98e0..d8b453d06d 100644 --- a/lib/responsive.less +++ b/lib/responsive.less @@ -60,7 +60,7 @@ margin-left: 0; } // Make all columns even - [class*="span"] { + .row > [class*="span"] { float: none; display: block; width: auto; -- GitLab From 690d3f4d1aeb97a76d22a4dfe056e33606e0bd94 Mon Sep 17 00:00:00 2001 From: Mark Otto <markdotto@gmail.com> Date: Wed, 21 Dec 2011 19:32:14 -0600 Subject: [PATCH 147/318] remove inline input field CSS since that's not required as all inputs are inline-block anyway --- bootstrap.css | 17 +---------------- bootstrap.min.css | 4 ---- lib/forms.less | 21 --------------------- 3 files changed, 1 insertion(+), 41 deletions(-) diff --git a/bootstrap.css b/bootstrap.css index fbd909de30..2ea7a8fbe3 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: Wed Dec 21 19:30:30 CST 2011 + * Date: Wed Dec 21 19:31:39 CST 2011 */ html, body { margin: 0; @@ -904,21 +904,6 @@ textarea[readonly] { display: block; max-width: 600px; } -.inline-inputs { - color: #808080; -} -.inline-inputs span, .inline-inputs input { - display: inline-block; -} -.inline-inputs input.mini { - width: 60px; -} -.inline-inputs input.small { - width: 90px; -} -.inline-inputs span { - padding: 0 2px 0 1px; -} .input-prepend, .input-append { overflow: hidden; } diff --git a/bootstrap.min.css b/bootstrap.min.css index e6cf50d161..f6587dd878 100644 --- a/bootstrap.min.css +++ b/bootstrap.min.css @@ -146,10 +146,6 @@ input[disabled],select[disabled],textarea[disabled],input[readonly],select[reado .help-text{margin-top:5px;margin-bottom:0;color:#bfbfbf;} .help-inline{*position:relative;*top:-5px;display:inline;padding-left:5px;} .help-block{display:block;max-width:600px;} -.inline-inputs{color:#808080;}.inline-inputs span,.inline-inputs input{display:inline-block;} -.inline-inputs input.mini{width:60px;} -.inline-inputs input.small{width:90px;} -.inline-inputs span{padding:0 2px 0 1px;} .input-prepend,.input-append{overflow:hidden;}.input-prepend input,.input-append input{-webkit-border-radius:0 3px 3px 0;-moz-border-radius:0 3px 3px 0;border-radius:0 3px 3px 0;} .input-prepend .add-on,.input-append .add-on{position:relative;z-index:2;float:left;display:block;width:auto;min-width:16px;height:18px;margin-right:-1px;padding:4px 4px 4px 5px;font-weight:normal;line-height:18px;color:#bfbfbf;text-align:center;text-shadow:0 1px 0 #ffffff;background-color:#f5f5f5;border:1px solid #ccc;-webkit-border-radius:3px 0 0 3px;-moz-border-radius:3px 0 0 3px;border-radius:3px 0 0 3px;} .input-prepend .active,.input-append .active{background-color:#a9dba9;border-color:#46a546;} diff --git a/lib/forms.less b/lib/forms.less index 84fddd7d1f..99d6fcb59d 100644 --- a/lib/forms.less +++ b/lib/forms.less @@ -298,27 +298,6 @@ textarea[readonly] { -// INLINE FIELDS -// ------------- - -.inline-inputs { - color: @gray; - span, input { - display: inline-block; - } - input.mini { - width: 60px; - } - input.small { - width: 90px; - } - span { - padding: 0 2px 0 1px; - } -} - - - // INPUT GROUPS // ------------ -- GitLab From 6d5b5065176a9e46ce71ec5fc16ae4a079e9e636 Mon Sep 17 00:00:00 2001 From: Jacob Thornton <jacobthornton@gmail.com> Date: Wed, 21 Dec 2011 17:38:05 -0800 Subject: [PATCH 148/318] minor cleanups --- Makefile | 11 ++++++----- js/bootstrap-collapse.js | 4 ++-- js/bootstrap-transition.js | 2 ++ 3 files changed, 10 insertions(+), 7 deletions(-) diff --git a/Makefile b/Makefile index e5c083ae6f..1f38338f80 100644 --- a/Makefile +++ b/Makefile @@ -22,15 +22,16 @@ build: uglify: @@if test ! -z ${UGLIFY_JS}; then \ mkdir -p js/min; \ - uglifyjs -o js/min/bootstrap-accordion.js js/bootstrap-accordion.js;\ - uglifyjs -o js/min/bootstrap-alerts.js js/bootstrap-alerts.js;\ - uglifyjs -o js/min/bootstrap-buttons.js js/bootstrap-buttons.js;\ + uglifyjs -o js/min/bootstrap-alerts.js js/bootstrap-alert.js;\ + uglifyjs -o js/min/bootstrap-buttons.js js/bootstrap-button.js;\ + uglifyjs -o js/min/bootstrap-carousel.js js/bootstrap-carousel.js;\ + uglifyjs -o js/min/bootstrap-collapse.js js/bootstrap-collapse.js;\ uglifyjs -o js/min/bootstrap-dropdown.js js/bootstrap-dropdown.js;\ uglifyjs -o js/min/bootstrap-modal.js js/bootstrap-modal.js;\ uglifyjs -o js/min/bootstrap-popover.js js/bootstrap-popover.js;\ uglifyjs -o js/min/bootstrap-scrollspy.js js/bootstrap-scrollspy.js;\ - uglifyjs -o js/min/bootstrap-tabs.js js/bootstrap-tabs.js;\ - uglifyjs -o js/min/bootstrap-transitions.js js/bootstrap-transitions.js;\ + uglifyjs -o js/min/bootstrap-tabs.js js/bootstrap-tab.js;\ + uglifyjs -o js/min/bootstrap-transitions.js js/bootstrap-transition.js;\ uglifyjs -o js/min/bootstrap-twipsy.js js/bootstrap-twipsy.js;\ else \ echo "You must have the UGLIFYJS minifier installed in order to minify Bootstrap's js."; \ diff --git a/js/bootstrap-collapse.js b/js/bootstrap-collapse.js index 313c0abcab..9301c7309d 100644 --- a/js/bootstrap-collapse.js +++ b/js/bootstrap-collapse.js @@ -17,7 +17,7 @@ * limitations under the License. * ============================================================ */ -(function( $ ){ +!function( $ ){ "use strict" @@ -132,4 +132,4 @@ }) }) -})( window.jQuery ) \ No newline at end of file +}( window.jQuery ) \ No newline at end of file diff --git a/js/bootstrap-transition.js b/js/bootstrap-transition.js index 25f8b111f1..29fa1bdebc 100644 --- a/js/bootstrap-transition.js +++ b/js/bootstrap-transition.js @@ -19,6 +19,8 @@ $(function () { + "use strict" + /* CSS TRANSITION SUPPORT (https://gist.github.com/373874) * ======================================================= */ -- GitLab From efacac0d6c812abffa8a84a48fa760f5f56c92f0 Mon Sep 17 00:00:00 2001 From: Jacob Thornton <jacobthornton@gmail.com> Date: Wed, 21 Dec 2011 18:42:43 -0800 Subject: [PATCH 149/318] clean up all the js across all the doc pages --- bootstrap.css | 2 +- docs/assets/js/application.js | 86 +++++++++++++++++-------------- docs/base-css.html | 19 +------ docs/components.html | 91 +++++++++++++++------------------ docs/index.html | 37 ++------------ docs/javascript.html | 95 ++++++++++++++++------------------- docs/less.html | 20 +------- docs/scaffolding.html | 74 +++++++++------------------ docs/upgrading.html | 39 -------------- 9 files changed, 165 insertions(+), 298 deletions(-) diff --git a/bootstrap.css b/bootstrap.css index 612fe24bc7..6515b12b5f 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: Wed Dec 21 13:29:41 PST 2011 + * Date: Wed Dec 21 18:41:55 PST 2011 */ html, body { margin: 0; diff --git a/docs/assets/js/application.js b/docs/assets/js/application.js index dd759bf8b2..c653233e6b 100644 --- a/docs/assets/js/application.js +++ b/docs/assets/js/application.js @@ -1,52 +1,64 @@ $(function(){ - // table sort example - // ================== + // NOTICE!! DO NOT USE ANY OF THIS JAVASCRIPT + // IT'S ALL JUST JUNK FOR OUR DOCS! + // ++++++++++++++++++++++++++++++++++++++++++ - $("#sortTableExample").tablesorter( { sortList: [[ 1, 0 ]] } ) + // make code pretty + prettyPrint && prettyPrint() + // table sort example + if ($.fn.tableSorter) { + $("#sortTableExample").tablesorter( { sortList: [[ 1, 0 ]] } ) + } // add on logic - // ============ - - $('.add-on :checkbox').click(function () { - if ($(this).attr('checked')) { - $(this).parents('.add-on').addClass('active') - } else { - $(this).parents('.add-on').removeClass('active') - } + $('.add-on :checkbox').on('click', function () { + var $this = $(this) + , method = $this.attr('checked') ? 'addClass' : 'removeClass' + $(this).parents('.add-on')[method]('active') }) - // Disable certain links in docs - // ============================= - // Please do not carry these styles over to your projects, it's merely here to prevent button clicks form taking you away from your spot on page + // Please do not carry these styles over to your projects + // it's merely here to prevent button clicks form taking you + // away from your spot on page!! - $('ul.tabs a, ul.pills a, .pagination a, .well .btn, .actions .btn, .alert-message .btn, a.close').click(function (e) { + $('[href^=#]').click(function (e) { e.preventDefault() }) // Copy code blocks in docs - $(".copy-code").focus(function () { - var el = this; - // push select to event loop for chrome :{o - setTimeout(function () { $(el).select(); }, 1); - }); - - - // POSITION STATIC TWIPSIES - // ======================== - - $(window).on('load resize', function () { - $(".twipsies a").each(function () { - $(this) - .twipsy({ - live: false - , placement: $(this).attr('title') - , trigger: 'manual' - , offset: 2 - }) - .twipsy('show') - }) + $(".copy-code").on('focus', function () { + var el = this + setTimeout(function () { $(el).select() }, 0) }) -}); + + if ($.fn.twipsy) { + + // position static twipsies for components page + if ($(".twipsies a").length) { + $(window).on('load resize', function () { + $(".twipsies a").each(function () { + $(this) + .twipsy({ + placement: $(this).attr('title') + , trigger: 'manual' + }) + .twipsy('show') + }) + }) + } + + // add tipsies to grid for scaffolding + if ($('#grid-system').length) { + + $('#grid-system').twipsy({ + selector: '.show-grid > div' + , title: function () { return $(this).width() + 'px' } + }) + + } + } + +}) \ No newline at end of file diff --git a/docs/base-css.html b/docs/base-css.html index 2098974027..6173a4de6e 100644 --- a/docs/base-css.html +++ b/docs/base-css.html @@ -1110,25 +1110,10 @@ <!-- Le javascript --> <!-- Placed at the end of the document so the pages load faster --> - <script src="http://code.jquery.com/jquery-1.5.2.min.js"></script> - - <script type="text/javascript"> - // NOT FINAL BY ANY MEANS, JUST MAH JANK CODE BRO - $(document).ready(function() { - $('.nav .active').click(function(e) { - e.preventDefault(); - $(this).siblings().toggle(); - }); - }); - </script> - - <script src="http://autobahn.tablesorter.com/jquery.tablesorter.min.js"></script> + <!-- <script src="http://code.jquery.com/jquery-1.7.min.js"></script> --> + <script src="../js/tests/vendor/jquery.js"></script> <script src="assets/js/google-code-prettify/prettify.js"></script> <script>$(function () { prettyPrint() })</script> - <script src="../js/bootstrap-transitions.js"></script> - <script src="../js/bootstrap-dropdown.js"></script> - <script src="../js/bootstrap-twipsy.js"></script> - <script src="../js/bootstrap-scrollspy.js"></script> <script src="assets/js/application.js"></script> </body> </html> diff --git a/docs/components.html b/docs/components.html index 56e71b0f7f..4d2c608230 100644 --- a/docs/components.html +++ b/docs/components.html @@ -208,7 +208,7 @@ <h1>Navigation</h1> </div> <h2>Fixed navbar</h2> - <div class="navbar navbar-static" data-dropdown="dropdown"> + <div class="navbar navbar-static" > <div class="navbar-inner"> <div class="container" style="width: auto;"> <a class="brand" href="#">Project Name</a> @@ -218,7 +218,7 @@ <li><a href="#">Link</a></li> <li><a href="#">Link</a></li> <li class="dropdown"> - <a href="#" class="dropdown-toggle">Dropdown</a> + <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown</a> <ul class="dropdown-menu"> <li><a href="#">Secondary link</a></li> <li><a href="#">Something else here</a></li> @@ -233,7 +233,7 @@ <ul class="nav secondary-nav"> <li class="divider"></li> <li class="dropdown"> - <a href="#" class="dropdown-toggle">Dropdown</a> + <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown</a> <ul class="dropdown-menu"> <li><a href="#">Secondary link</a></li> <li><a href="#">Something else here</a></li> @@ -279,8 +279,8 @@ <li><a href="#">Messages</a></li> <li><a href="#">Settings</a></li> <li><a href="#">Contact</a></li> - <li class="dropdown" data-dropdown="dropdown"> - <a href="#" class="dropdown-toggle">Dropdown</a> + <li class="dropdown"> + <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown</a> <ul class="dropdown-menu"> <li><a href="#">Secondary link</a></li> <li><a href="#">Something else here</a></li> @@ -302,11 +302,11 @@ <p>As mentioned above, you can bring your tabs to life with a simple plugin. Here we have integrated all four variations of the tabs—default (top), right, bottom, left—with example tab areas.</p> <div class="tabbable"> - <ul class="tabs" data-tabs="tabs"> - <li class="active"><a href="#1">Section 1</a></li> - <li><a href="#2">Section 2</a></li> - <li><a href="#3">Section 3</a></li> - <li><a href="#4">Section 4</a></li> + <ul class="tabs"> + <li class="active"><a href="#1" data-toggle="tab">Section 1</a></li> + <li><a href="#2" data-toggle="tab">Section 2</a></li> + <li><a href="#3" data-toggle="tab">Section 3</a></li> + <li><a href="#4" data-toggle="tab">Section 4</a></li> </ul> <div class="tab-content"> <div class="tab-pane active" id="1"> @@ -327,21 +327,21 @@ <div class="row"> <div class="span4"> <div class="tabbable tabs-left"> - <ul class="tabs" data-tabs="tabs"> - <li class="active"><a href="#1">Section 1</a></li> - <li><a href="#2">Section 2</a></li> - <li><a href="#3">Section 3</a></li> + <ul class="tabs"> + <li class="active"><a href="#4" data-toggle="tab">Section 1</a></li> + <li><a href="#5" data-toggle="tab">Section 2</a></li> + <li><a href="#6" data-toggle="tab">Section 3</a></li> </ul> <div class="tab-content" id="myTabContent2"> - <div class="tab-pane active" id="1"> + <div class="tab-pane active" id="4"> <h4>Section 1</h4> <p>Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Maecenas sed diam eget risus varius blandit sit amet non magna. Vestibulum id ligula porta felis euismod semper.</p> </div> - <div class="tab-pane" id="2"> + <div class="tab-pane" id="5"> <h4>Section 2</h4> <p>Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Maecenas sed diam eget risus varius blandit sit amet non magna. Vestibulum id ligula porta felis euismod semper.</p> </div> - <div class="tab-pane" id="3"> + <div class="tab-pane" id="6"> <h4>Section 3</h4> <p>Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Maecenas sed diam eget risus varius blandit sit amet non magna. Vestibulum id ligula porta felis euismod semper.</p> </div> @@ -350,21 +350,21 @@ </div> <div class="span4 offset1"> <div class="tabbable tabs-right"> - <ul class="tabs" data-tabs="tabs"> - <li class="active"><a href="#1">Section 1</a></li> - <li><a href="#2">Section 2</a></li> - <li><a href="#3">Section 3</a></li> + <ul class="tabs"> + <li class="active"><a href="#7" data-toggle="tab">Section 1</a></li> + <li><a href="#8" data-toggle="tab">Section 2</a></li> + <li><a href="#9" data-toggle="tab">Section 3</a></li> </ul> <div class="tab-content" id="myTabContent3"> - <div class="tab-pane active" id="1"> + <div class="tab-pane active" id="7"> <h4>Section 1</h4> <p>Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Maecenas sed diam eget risus varius blandit sit amet non magna. Vestibulum id ligula porta felis euismod semper.</p> </div> - <div class="tab-pane" id="2"> + <div class="tab-pane" id="8"> <h4>Section 2</h4> <p>Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Maecenas sed diam eget risus varius blandit sit amet non magna. Vestibulum id ligula porta felis euismod semper.</p> </div> - <div class="tab-pane" id="3"> + <div class="tab-pane" id="9"> <h4>Section 3</h4> <p>Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Maecenas sed diam eget risus varius blandit sit amet non magna. Vestibulum id ligula porta felis euismod semper.</p> </div> @@ -375,24 +375,24 @@ <div class="tabbable tabs-bottom"> <div class="tab-content"> - <div class="tab-pane active" id="1"> + <div class="tab-pane active" id="10"> <p>Oh hai #1!</p> </div> - <div class="tab-pane" id="2"> + <div class="tab-pane" id="11"> <p>Oh hai #2!</p> </div> - <div class="tab-pane" id="3"> + <div class="tab-pane" id="12"> <p>Oh hai #3!</p> </div> - <div class="tab-pane" id="4"> + <div class="tab-pane" id="13"> <p>Oh hai #4!</p> </div> </div> - <ul class="tabs" data-tabs="tabs"> - <li class="active"><a href="#1">Section 1</a></li> - <li><a href="#2">Section 2</a></li> - <li><a href="#3">Section 3</a></li> - <li><a href="#4">Section 4</a></li> + <ul class="tabs"> + <li class="active"><a href="#10" data-toggle="tab">Section 1</a></li> + <li><a href="#11" data-toggle="tab">Section 2</a></li> + <li><a href="#12" data-toggle="tab">Section 3</a></li> + <li><a href="#13" data-toggle="tab">Section 4</a></li> </ul> </div> @@ -733,25 +733,16 @@ Lorem ipsum dolar sit amet illo error <a href="#" title="below">ipsum</a> verita <!-- Le javascript --> <!-- Placed at the end of the document so the pages load faster --> - <script src="http://code.jquery.com/jquery-1.5.2.min.js"></script> - - <script type="text/javascript"> - // NOT FINAL BY ANY MEANS, JUST MAH JANK CODE BRO - $(document).ready(function() { - $('.nav .active').click(function(e) { - e.preventDefault(); - $(this).siblings().toggle(); - }); - }); - </script> - - <script src="http://autobahn.tablesorter.com/jquery.tablesorter.min.js"></script> + <!-- <script src="http://code.jquery.com/jquery-1.7.min.js"></script> --> + <script src="../js/tests/vendor/jquery.js"></script> + <script src="assets/js/google-code-prettify/prettify.js"></script> - <script>$(function () { prettyPrint() })</script> - <script src="../js/bootstrap-transitions.js"></script> - <script src="../js/bootstrap-dropdown.js"></script> + + <script src="../js/bootstrap-transition.js"></script> <script src="../js/bootstrap-twipsy.js"></script> - <script src="../js/bootstrap-scrollspy.js"></script> + <script src="../js/bootstrap-dropdown.js"></script> + <script src="../js/bootstrap-tab.js"></script> + <script src="assets/js/application.js"></script> </body> </html> diff --git a/docs/index.html b/docs/index.html index 55a75b1bf6..81d7df41e6 100644 --- a/docs/index.html +++ b/docs/index.html @@ -97,10 +97,10 @@ <li class="divider">·</li> <li class="follow-btn"> - <a href="https://twitter.com/twbootstrap" class="twitter-follow-button" data-width="145px" data-link-color="#0069D6" data-show-count="false">Follow @twbootstrap</a><script src="http://platform.twitter.com/widgets.js" type="text/javascript"></script> + <a href="https://twitter.com/twbootstrap" class="twitter-follow-button" data-width="145px" data-link-color="#0069D6" data-show-count="false">Follow @twbootstrap</a> </li> <li class="tweet-btn"> - <a href="https://twitter.com/share" class="twitter-share-button" data-url="http://twitter.github.com/bootstrap/" data-count="horizontal" data-via="twbootstrap" data-related="mdo:Creator of Twitter Bootstrap">Tweet</a><script type="text/javascript" src="http://platform.twitter.com/widgets.js"></script> + <a href="https://twitter.com/share" class="twitter-share-button" data-url="http://twitter.github.com/bootstrap/" data-count="horizontal" data-via="twbootstrap" data-related="mdo:Creator of Twitter Bootstrap">Tweet</a> </li> </ul> @@ -233,35 +233,6 @@ <!-- Le javascript --> <!-- Placed at the end of the document so the pages load faster --> - <script src="http://code.jquery.com/jquery-1.6.2.min.js"></script> - - <script type="text/javascript"> - // When ready... - window.addEventListener("load",function() { - // Set a timeout... - setTimeout(function(){ - // Hide the address bar! - window.scrollTo(0, 1); - }, 0); - }); - - // NOT FINAL BY ANY MEANS, JUST MAH JANK CODE BRO - $(document).ready(function() { - $('.nav .active').click(function(e) { - e.preventDefault(); - $(this).siblings().toggle(); - }); - }); - </script> - - <script src="http://autobahn.tablesorter.com/jquery.tablesorter.min.js"></script> - <script src="assets/js/google-code-prettify/prettify.js"></script> - <script>$(function () { prettyPrint() })</script> - <script src="../js/bootstrap-transitions.js"></script> - <script src="../js/bootstrap-dropdown.js"></script> - <script src="../js/bootstrap-twipsy.js"></script> - <script src="../js/bootstrap-scrollspy.js"></script> - <script src="assets/js/application.js"></script> - + <script type="text/javascript" src="http://platform.twitter.com/widgets.js"></script> </body> -</html> +</html> \ No newline at end of file diff --git a/docs/javascript.html b/docs/javascript.html index acde34d46a..aed64d30ad 100644 --- a/docs/javascript.html +++ b/docs/javascript.html @@ -23,49 +23,6 @@ <link rel="apple-touch-icon" sizes="72x72" href="images/apple-touch-icon-72x72.png"> <link rel="apple-touch-icon" sizes="114x114" href="images/apple-touch-icon-114x114.png"> - <!-- Le javascript --> - <!-- placed up here so that the inline demos can be next to their markup --> - <!-- <script src="http://code.jquery.com/jquery-1.7.min.js"></script> --> - <script src="../js/tests/vendor/jquery.js"></script> - - <script type="text/javascript"> - // NOT FINAL BY ANY MEANS, JUST MAH JANK CODE BRO - $(document).ready(function() { - $('.nav .active').click(function(e) { - e.preventDefault(); - $(this).siblings().toggle(); - }); - }); - </script> - - <script src="assets/js/google-code-prettify/prettify.js"></script> - <script>$(function () { prettyPrint() })</script> - <script src="../js/bootstrap-transition.js"></script> - <script src="../js/bootstrap-alert.js"></script> - <script src="../js/bootstrap-modal.js"></script> - <script src="../js/bootstrap-dropdown.js"></script> - <script src="../js/bootstrap-scrollspy.js"></script> - <script src="../js/bootstrap-tab.js"></script> - <script src="../js/bootstrap-twipsy.js"></script> - <script src="../js/bootstrap-popover.js"></script> - <script src="../js/bootstrap-button.js"></script> - <script src="../js/bootstrap-collapse.js"></script> - <script> - $(function () { - // twipsy demo - $('.twipsy-demo.well').twipsy({ - selector: "a[rel=twipsy]" - }) - - //popover demo - $("a[rel=popover]") - .popover() - .click(function(e) { - e.preventDefault() - }) - }) - </script> - </head> <body id="bootstrap-js"> @@ -839,16 +796,6 @@ $('a[data-toggle="tab"]').on('shown', function (e) { <button id="fat-btn" data-loading-text="loading..." class="btn"> Loading State </button> - <script> - $(function() { - var btn = $('#fat-btn').click(function () { - btn.button('loading') - setTimeout(function () { - btn.button('reset') - }, 3000) - }) - }) - </script> </td> </tr> <tr> @@ -1040,5 +987,47 @@ $('#myCollapsible').on('hidden', function () { <p>Icons from <a href="http://glyphicons.com">Glyphicons Free</a>, licensed under <a href="http://creativecommons.org/licenses/by/3.0/">CC BY 3.0</a>.</p> </footer> </div><!-- /container --> + + + <!-- Le javascript --> + <!-- Placed at the end of the document so the pages load faster --> + <!-- <script src="http://code.jquery.com/jquery-1.7.min.js"></script> --> + <script src="../js/tests/vendor/jquery.js"></script> + <script src="assets/js/google-code-prettify/prettify.js"></script> + <script src="../js/bootstrap-transition.js"></script> + <script src="../js/bootstrap-alert.js"></script> + <script src="../js/bootstrap-modal.js"></script> + <script src="../js/bootstrap-dropdown.js"></script> + <script src="../js/bootstrap-scrollspy.js"></script> + <script src="../js/bootstrap-tab.js"></script> + <script src="../js/bootstrap-twipsy.js"></script> + <script src="../js/bootstrap-popover.js"></script> + <script src="../js/bootstrap-button.js"></script> + <script src="../js/bootstrap-collapse.js"></script> + <script src="assets/js/application.js"></script> + <script> + $(function () { + // twipsy demo + $('.twipsy-demo.well').twipsy({ + selector: "a[rel=twipsy]" + }) + + //popover demo + $("a[rel=popover]") + .popover() + .click(function(e) { + e.preventDefault() + }) + + $('#fat-btn') + .click(function () { + var btn = $(this) + btn.button('loading') + setTimeout(function () { + btn.button('reset') + }, 3000) + }) + }) + </script> </body> </html> diff --git a/docs/less.html b/docs/less.html index 52de8b6aac..13dfee282d 100644 --- a/docs/less.html +++ b/docs/less.html @@ -466,25 +466,9 @@ <!-- Le javascript --> <!-- Placed at the end of the document so the pages load faster --> - <script src="http://code.jquery.com/jquery-1.5.2.min.js"></script> - - <script type="text/javascript"> - // NOT FINAL BY ANY MEANS, JUST MAH JANK CODE BRO - $(document).ready(function() { - $('.nav .active').click(function(e) { - e.preventDefault(); - $(this).siblings().toggle(); - }); - }); - </script> - - <script src="http://autobahn.tablesorter.com/jquery.tablesorter.min.js"></script> + <!-- <script src="http://code.jquery.com/jquery-1.7.min.js"></script> --> + <script src="../js/tests/vendor/jquery.js"></script> <script src="assets/js/google-code-prettify/prettify.js"></script> - <script>$(function () { prettyPrint() })</script> - <script src="../js/bootstrap-transitions.js"></script> - <script src="../js/bootstrap-dropdown.js"></script> - <script src="../js/bootstrap-twipsy.js"></script> - <script src="../js/bootstrap-scrollspy.js"></script> <script src="assets/js/application.js"></script> </body> </html> diff --git a/docs/scaffolding.html b/docs/scaffolding.html index 7431ae58b3..311a6954c9 100644 --- a/docs/scaffolding.html +++ b/docs/scaffolding.html @@ -64,34 +64,34 @@ <h2>Default 940px grid</h2> <div class="row show-grid"> - <div class="span1" title="60px">1</div> - <div class="span1" title="60px">1</div> - <div class="span1" title="60px">1</div> - <div class="span1" title="60px">1</div> - <div class="span1" title="60px">1</div> - <div class="span1" title="60px">1</div> - <div class="span1" title="60px">1</div> - <div class="span1" title="60px">1</div> - <div class="span1" title="60px">1</div> - <div class="span1" title="60px">1</div> - <div class="span1" title="60px">1</div> - <div class="span1" title="60px">1</div> + <div class="span1">1</div> + <div class="span1">1</div> + <div class="span1">1</div> + <div class="span1">1</div> + <div class="span1">1</div> + <div class="span1">1</div> + <div class="span1">1</div> + <div class="span1">1</div> + <div class="span1">1</div> + <div class="span1">1</div> + <div class="span1">1</div> + <div class="span1">1</div> </div> <div class="row show-grid"> - <div class="span4" title="300px">4</div> - <div class="span4" title="300px">4</div> - <div class="span4" title="300px">4</div> + <div class="span4">4</div> + <div class="span4">4</div> + <div class="span4">4</div> </div> <div class="row show-grid"> - <div class="span4" title="300px">4</div> - <div class="span8" title="620px">8</div> + <div class="span4">4</div> + <div class="span8">8</div> </div> <div class="row show-grid"> - <div class="span6" title="460px">6</div> - <div class="span6" title="460px">6</div> + <div class="span6">6</div> + <div class="span6">6</div> </div> <div class="row show-grid"> - <div class="span12" title="940px">12</div> + <div class="span12">12</div> </div> <div class="row"> @@ -358,7 +358,6 @@ </section> - <!-- Footer ================================================== --> <footer class="footer"> @@ -371,36 +370,11 @@ <!-- Le javascript --> <!-- Placed at the end of the document so the pages load faster --> - <script src="http://code.jquery.com/jquery-1.5.2.min.js"></script> - - <script type="text/javascript"> - // NOT FINAL BY ANY MEANS, JUST MAH JANK CODE BRO - $(document).ready(function() { - $('.nav .active').click(function(e) { - e.preventDefault(); - $(this).siblings().toggle(); - }); - }); - </script> - - <script type="text/javascript"> - // Show grid dimensions on hover - $(document).ready(function() { - $('.show-grid > div').hover(function() { - var width = $(this).width(); - $(this).attr('title', width); - $(this).twipsy(); - }); - }); - </script> - - <script src="http://autobahn.tablesorter.com/jquery.tablesorter.min.js"></script> + <!-- <script src="http://code.jquery.com/jquery-1.7.min.js"></script> --> + <script src="../js/tests/vendor/jquery.js"></script> <script src="assets/js/google-code-prettify/prettify.js"></script> - <script>$(function () { prettyPrint() })</script> - <script src="../js/bootstrap-transitions.js"></script> - <script src="../js/bootstrap-dropdown.js"></script> + <script src="../js/bootstrap-transition.js"></script> <script src="../js/bootstrap-twipsy.js"></script> - <script src="../js/bootstrap-scrollspy.js"></script> <script src="assets/js/application.js"></script> </body> -</html> +</html> \ No newline at end of file diff --git a/docs/upgrading.html b/docs/upgrading.html index cd0ca8e22d..4dedb37d88 100644 --- a/docs/upgrading.html +++ b/docs/upgrading.html @@ -99,23 +99,7 @@ <li>Added button bar options</li> </ul> </li> - <li> - <ul> - <li></li> - </ul> - </li> </ul> - -<!-- - - - ---> - - - - - <!-- Footer ================================================== --> <footer class="footer"> @@ -125,28 +109,5 @@ <p>Icons from <a href="http://glyphicons.com">Glyphicons Free</a>, licensed under <a href="http://creativecommons.org/licenses/by/3.0/">CC BY 3.0</a>.</p> </footer> </div><!-- /container --> - - <!-- Le javascript --> - <!-- Placed at the end of the document so the pages load faster --> - <script src="http://code.jquery.com/jquery-1.5.2.min.js"></script> - - <script type="text/javascript"> - // NOT FINAL BY ANY MEANS, JUST MAH JANK CODE BRO - $(document).ready(function() { - $('.nav .active').click(function(e) { - e.preventDefault(); - $(this).siblings().toggle(); - }); - }); - </script> - - <script src="http://autobahn.tablesorter.com/jquery.tablesorter.min.js"></script> - <script src="assets/js/google-code-prettify/prettify.js"></script> - <script>$(function () { prettyPrint() })</script> - <script src="../js/bootstrap-transitions.js"></script> - <script src="../js/bootstrap-dropdown.js"></script> - <script src="../js/bootstrap-twipsy.js"></script> - <script src="../js/bootstrap-scrollspy.js"></script> - <script src="assets/js/application.js"></script> </body> </html> -- GitLab From 5de1e39a8fba831faa170f46e868068fa069dd0e Mon Sep 17 00:00:00 2001 From: Jonathan Ingram <jonathan.b.ingram@gmail.com> Date: Thu, 22 Dec 2011 16:41:26 +1100 Subject: [PATCH 150/318] From #822 --- js/bootstrap-alert.js | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/js/bootstrap-alert.js b/js/bootstrap-alert.js index 90961cdd39..1ce8f01bff 100644 --- a/js/bootstrap-alert.js +++ b/js/bootstrap-alert.js @@ -39,6 +39,8 @@ , selector = $this.attr('data-target') || $this.attr('href') , $parent = $(selector) + $parent.trigger('close') + e && e.preventDefault() $parent.length || ($parent = $this.hasClass('alert-message') ? $this : $this.parent()) @@ -47,6 +49,8 @@ function removeElement() { $parent.remove() + + $parent.trigger('closed') } $.support.transition && $parent.hasClass('fade') ? -- GitLab From 2ebc0ad2ef13c4eb9ab2e7b57ff6ca661687ca4e Mon Sep 17 00:00:00 2001 From: Jonathan Ingram <jonathan.b.ingram@gmail.com> Date: Thu, 22 Dec 2011 16:47:42 +1100 Subject: [PATCH 151/318] Update docs to show available events on alert --- docs/javascript.html | 24 ++++++++++++++++++++++++ 1 file changed, 24 insertions(+) diff --git a/docs/javascript.html b/docs/javascript.html index bf27dd7f17..0bdcdc8ed5 100644 --- a/docs/javascript.html +++ b/docs/javascript.html @@ -750,6 +750,30 @@ $('a[data-toggle="tab"]').on('shown', function (e) { <h4>.alert('close')</h4> <p>Closes an alert.</p> <pre class="prettyprint linenums">$(".alert-message").alert('close')</pre> + <h3>Events</h3> + <p>Bootstrap's alert class exposes a few events for hooking into alert functionality. </p> + <table class="zebra-striped"> + <thead> + <tr> + <th style="width: 150px;">Event</th> + <th>Description</th> + </tr> + </thead> + <tbody> + <tr> + <td>close</td> + <td>This event fires immediately when the <code>close</code> instance method is called.</td> + </tr> + <tr> + <td>closed</td> + <td>This event is fired when the alert has been closed (will wait for css transitions to complete).</td> + </tr> + </tbody> + </table> +<pre class="prettyprint linenums"> +$('#my-alert').bind('closed', function () { + // do something ... +})</pre> <h3>Demo</h3> <div class="alert-message warning fade in"> <a class="close" data-dismiss="alert" href="#">×</a> -- GitLab From 87ac818253a26bcf09fa55f78ae3f55759c54e64 Mon Sep 17 00:00:00 2001 From: Jacob Thornton <jacobthornton@gmail.com> Date: Thu, 22 Dec 2011 19:10:32 -0800 Subject: [PATCH 152/318] change above below to top bottom and add "inside" placement option --- bootstrap.css | 18 +++++++++--------- bootstrap.min.css | 16 ++++++++-------- docs/javascript.html | 4 ++-- js/README.md | 2 +- js/bootstrap-twipsy.js | 29 +++++++++++++---------------- lib/mixins.less | 4 ++-- lib/popovers.less | 16 ++++++++-------- lib/twipsy.less | 18 +++++++++--------- 8 files changed, 52 insertions(+), 55 deletions(-) diff --git a/bootstrap.css b/bootstrap.css index 6515b12b5f..ee80000c2b 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: Wed Dec 21 18:41:55 PST 2011 + * Date: Thu Dec 22 19:09:49 PST 2011 */ html, body { margin: 0; @@ -2366,19 +2366,19 @@ button.btn::-moz-focus-inner, input[type=submit].btn::-moz-focus-inner { -moz-opacity: 0.8; opacity: 0.8; } -.twipsy.above { +.twipsy.top { margin-top: -2px; } .twipsy.right { margin-left: 2px; } -.twipsy.below { +.twipsy.bottom { margin-top: 2px; } .twipsy.left { margin-left: -2px; } -.twipsy.above .twipsy-arrow { +.twipsy.top .twipsy-arrow { bottom: 0; left: 50%; margin-left: -5px; @@ -2394,7 +2394,7 @@ button.btn::-moz-focus-inner, input[type=submit].btn::-moz-focus-inner { border-bottom: 5px solid transparent; border-left: 5px solid #000000; } -.twipsy.below .twipsy-arrow { +.twipsy.bottom .twipsy-arrow { top: 0; left: 50%; margin-left: -5px; @@ -2434,19 +2434,19 @@ button.btn::-moz-focus-inner, input[type=submit].btn::-moz-focus-inner { display: none; padding: 5px; } -.popover.above { +.popover.top { margin-top: -5px; } .popover.right { margin-left: 5px; } -.popover.below { +.popover.bottom { margin-top: 5px; } .popover.left { margin-left: -5px; } -.popover.above .arrow { +.popover.top .arrow { bottom: 0; left: 50%; margin-left: -5px; @@ -2462,7 +2462,7 @@ button.btn::-moz-focus-inner, input[type=submit].btn::-moz-focus-inner { border-bottom: 5px solid transparent; border-right: 5px solid #000000; } -.popover.below .arrow { +.popover.bottom .arrow { top: 0; left: 50%; margin-left: -5px; diff --git a/bootstrap.min.css b/bootstrap.min.css index 4e4a1270ac..3f48b135eb 100644 --- a/bootstrap.min.css +++ b/bootstrap.min.css @@ -312,23 +312,23 @@ button.btn::-moz-focus-inner,input[type=submit].btn::-moz-focus-inner{padding:0; .modal-footer:after{clear:both;} .modal-footer .btn{float:right;margin-left:5px;} .twipsy{position:absolute;z-index:1000;display:block;visibility:visible;padding:5px;font-size:11px;filter:alpha(opacity=0);-moz-opacity:0;opacity:0;}.twipsy.in{filter:alpha(opacity=80);-moz-opacity:0.8;opacity:0.8;} -.twipsy.above{margin-top:-2px;} +.twipsy.top{margin-top:-2px;} .twipsy.right{margin-left:2px;} -.twipsy.below{margin-top:2px;} +.twipsy.bottom{margin-top:2px;} .twipsy.left{margin-left:-2px;} -.twipsy.above .twipsy-arrow{bottom:0;left:50%;margin-left:-5px;border-left:5px solid transparent;border-right:5px solid transparent;border-top:5px solid #000000;} +.twipsy.top .twipsy-arrow{bottom:0;left:50%;margin-left:-5px;border-left:5px solid transparent;border-right:5px solid transparent;border-top:5px solid #000000;} .twipsy.left .twipsy-arrow{top:50%;right:0;margin-top:-5px;border-top:5px solid transparent;border-bottom:5px solid transparent;border-left:5px solid #000000;} -.twipsy.below .twipsy-arrow{top:0;left:50%;margin-left:-5px;border-left:5px solid transparent;border-right:5px solid transparent;border-bottom:5px solid #000000;} +.twipsy.bottom .twipsy-arrow{top:0;left:50%;margin-left:-5px;border-left:5px solid transparent;border-right:5px solid transparent;border-bottom:5px solid #000000;} .twipsy.right .twipsy-arrow{top:50%;left:0;margin-top:-5px;border-top:5px solid transparent;border-bottom:5px solid transparent;border-right:5px solid #000000;} .twipsy-inner{max-width:200px;padding:3px 8px;color:white;text-align:center;text-decoration:none;background-color:#000000;-webkit-border-radius:4px;-moz-border-radius:4px;border-radius:4px;} .twipsy-arrow{position:absolute;width:0;height:0;} -.popover{position:absolute;top:0;left:0;z-index:1000;display:none;padding:5px;}.popover.above{margin-top:-5px;} +.popover{position:absolute;top:0;left:0;z-index:1000;display:none;padding:5px;}.popover.top{margin-top:-5px;} .popover.right{margin-left:5px;} -.popover.below{margin-top:5px;} +.popover.bottom{margin-top:5px;} .popover.left{margin-left:-5px;} -.popover.above .arrow{bottom:0;left:50%;margin-left:-5px;border-left:5px solid transparent;border-right:5px solid transparent;border-top:5px solid #000000;} +.popover.top .arrow{bottom:0;left:50%;margin-left:-5px;border-left:5px solid transparent;border-right:5px solid transparent;border-top:5px solid #000000;} .popover.right .arrow{top:50%;left:0;margin-top:-5px;border-top:5px solid transparent;border-bottom:5px solid transparent;border-right:5px solid #000000;} -.popover.below .arrow{top:0;left:50%;margin-left:-5px;border-left:5px solid transparent;border-right:5px solid transparent;border-bottom:5px solid #000000;} +.popover.bottom .arrow{top:0;left:50%;margin-left:-5px;border-left:5px solid transparent;border-right:5px solid transparent;border-bottom:5px solid #000000;} .popover.left .arrow{top:50%;right:0;margin-top:-5px;border-top:5px solid transparent;border-bottom:5px solid transparent;border-left:5px solid #000000;} .popover .arrow{position:absolute;width:0;height:0;} .popover .inner{padding:3px;width:280px;overflow:hidden;background-color:#000000;background-color:rgba(0, 0, 0, 0.8);-webkit-border-radius:6px;-moz-border-radius:6px;border-radius:6px;-webkit-box-shadow:0 3px 7px rgba(0, 0, 0, 0.3);-moz-box-shadow:0 3px 7px rgba(0, 0, 0, 0.3);box-shadow:0 3px 7px rgba(0, 0, 0, 0.3);} diff --git a/docs/javascript.html b/docs/javascript.html index aed64d30ad..c9bb425a41 100644 --- a/docs/javascript.html +++ b/docs/javascript.html @@ -544,8 +544,8 @@ $('a[data-toggle="tab"]').on('shown', function (e) { <tr> <td>placement</td> <td>string</td> - <td>'above'</td> - <td>how to position the tooltip - above | below | left | right</td> + <td>'top'</td> + <td>how to position the tooltip - top | bottom | left | right</td> </tr> <tr> <td>selector</td> diff --git a/js/README.md b/js/README.md index 0d8d163a28..2f8e1716f5 100644 --- a/js/README.md +++ b/js/README.md @@ -49,7 +49,7 @@ examples: backdrop: true keyboard: false - placement: 'above' + placement: 'top' --- diff --git a/js/bootstrap-twipsy.js b/js/bootstrap-twipsy.js index 018edb97e5..21cf7d20b1 100644 --- a/js/bootstrap-twipsy.js +++ b/js/bootstrap-twipsy.js @@ -99,6 +99,7 @@ , show: function () { var $tip + , inside , pos , actualWidth , actualHeight @@ -113,12 +114,18 @@ $tip.addClass('fade') } + placement = typeof this.options.placement == 'function' ? + thing.call(this, $tip[0], this.$element[0]) : + this.options.placement + + inside = /in/.test(placement) + $tip .remove() .css({ top: 0, left: 0, display: 'block' }) - .prependTo(document.body) + .prependTo(inside ? this.$element : document.body) - pos = $.extend({}, this.$element.offset(), { + pos = $.extend({}, (inside ? {top: 0, left: 0} : this.$element.offset()), { width: this.$element[0].offsetWidth , height: this.$element[0].offsetHeight }) @@ -126,13 +133,11 @@ actualWidth = $tip[0].offsetWidth actualHeight = $tip[0].offsetHeight - placement = maybeCall(this.options.placement, this, [ $tip[0], this.$element[0] ]) - - switch (placement) { - case 'below': + switch (inside ? placement.split(' ')[1] : placement) { + case 'bottom': tp = {top: pos.top + pos.height, left: pos.left + pos.width / 2 - actualWidth / 2} break - case 'above': + case 'top': tp = {top: pos.top - actualHeight, left: pos.left + pos.width / 2 - actualWidth / 2} break case 'left': @@ -226,14 +231,6 @@ } - /* TWIPSY PRIVATE METHODS - * ====================== */ - - function maybeCall ( thing, ctx, args ) { - return typeof thing == 'function' ? thing.apply(ctx, args) : thing - } - - /* TWIPSY PLUGIN DEFINITION * ======================== */ @@ -253,7 +250,7 @@ animation: true , delay: 0 , selector: false - , placement: 'above' + , placement: 'top' , trigger: 'hover' , title: '' , template: '<div class="twipsy"><div class="twipsy-arrow"></div><div class="twipsy-inner"></div></div>' diff --git a/lib/mixins.less b/lib/mixins.less index 0effdfa37a..41cf8890d1 100644 --- a/lib/mixins.less +++ b/lib/mixins.less @@ -283,7 +283,7 @@ // Popover arrows // For tipsies and popovers #popoverArrow { - .above(@arrowWidth: 5px) { + .top(@arrowWidth: 5px) { bottom: 0; left: 50%; margin-left: -@arrowWidth; @@ -299,7 +299,7 @@ border-bottom: @arrowWidth solid transparent; border-left: @arrowWidth solid @black; } - .below(@arrowWidth: 5px) { + .bottom(@arrowWidth: 5px) { top: 0; left: 50%; margin-left: -@arrowWidth; diff --git a/lib/popovers.less b/lib/popovers.less index ff875eaffb..5ecde09233 100644 --- a/lib/popovers.less +++ b/lib/popovers.less @@ -8,14 +8,14 @@ z-index: 1000; display: none; padding: 5px; - &.above { margin-top: -5px; } - &.right { margin-left: 5px; } - &.below { margin-top: 5px; } - &.left { margin-left: -5px; } - &.above .arrow { #popoverArrow > .above(); } - &.right .arrow { #popoverArrow > .right(); } - &.below .arrow { #popoverArrow > .below(); } - &.left .arrow { #popoverArrow > .left(); } + &.top { margin-top: -5px; } + &.right { margin-left: 5px; } + &.bottom { margin-top: 5px; } + &.left { margin-left: -5px; } + &.top .arrow { #popoverArrow > .top(); } + &.right .arrow { #popoverArrow > .right(); } + &.bottom .arrow { #popoverArrow > .bottom(); } + &.left .arrow { #popoverArrow > .left(); } .arrow { position: absolute; width: 0; diff --git a/lib/twipsy.less b/lib/twipsy.less index 05f121a5dd..abd0599f4e 100644 --- a/lib/twipsy.less +++ b/lib/twipsy.less @@ -9,15 +9,15 @@ padding: 5px; font-size: 11px; .opacity(0); - &.in { .opacity(80); } - &.above { margin-top: -2px; } - &.right { margin-left: 2px; } - &.below { margin-top: 2px; } - &.left { margin-left: -2px; } - &.above .twipsy-arrow { #popoverArrow > .above(); } - &.left .twipsy-arrow { #popoverArrow > .left(); } - &.below .twipsy-arrow { #popoverArrow > .below(); } - &.right .twipsy-arrow { #popoverArrow > .right(); } + &.in { .opacity(80); } + &.top { margin-top: -2px; } + &.right { margin-left: 2px; } + &.bottom { margin-top: 2px; } + &.left { margin-left: -2px; } + &.top .twipsy-arrow { #popoverArrow > .top(); } + &.left .twipsy-arrow { #popoverArrow > .left(); } + &.bottom .twipsy-arrow { #popoverArrow > .bottom(); } + &.right .twipsy-arrow { #popoverArrow > .right(); } } .twipsy-inner { max-width: 200px; -- GitLab From 3396fc0542a5fbbed658a95f931472fc24feee56 Mon Sep 17 00:00:00 2001 From: Jacob Thornton <jacobthornton@gmail.com> Date: Thu, 22 Dec 2011 19:17:41 -0800 Subject: [PATCH 153/318] check for prettyprint on window --- docs/assets/js/application.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/assets/js/application.js b/docs/assets/js/application.js index c8e796a398..eae84b138f 100644 --- a/docs/assets/js/application.js +++ b/docs/assets/js/application.js @@ -17,7 +17,7 @@ $(function(){ // ================== // make code pretty - prettyPrint && prettyPrint() + window.prettyPrint && prettyPrint() // table sort example if ($.fn.tableSorter) { -- GitLab From 49fb910b11baef4ccfe9270479e8b9bf9e5e7731 Mon Sep 17 00:00:00 2001 From: Jacob Thornton <jacobthornton@gmail.com> Date: Thu, 22 Dec 2011 19:25:29 -0800 Subject: [PATCH 154/318] more js cleanup after gnarly merge --- docs/base-css.html | 1 - docs/components.html | 28 ++++++++++++---------------- docs/scaffolding.html | 1 + 3 files changed, 13 insertions(+), 17 deletions(-) diff --git a/docs/base-css.html b/docs/base-css.html index 34e844df30..dad42381de 100644 --- a/docs/base-css.html +++ b/docs/base-css.html @@ -1180,7 +1180,6 @@ Form states <!-- Placed at the end of the document so the pages load faster --> <script src="http://code.jquery.com/jquery-1.7.min.js"></script> <script src="assets/js/google-code-prettify/prettify.js"></script> - <script>$(function () { prettyPrint() })</script> <script src="assets/js/application.js"></script> </body> </html> diff --git a/docs/components.html b/docs/components.html index 26a657cb59..5b4e788f11 100644 --- a/docs/components.html +++ b/docs/components.html @@ -22,18 +22,6 @@ <link rel="apple-touch-icon" href="assets/ico/bootstrap-apple-57x57.png"> <link rel="apple-touch-icon" sizes="72x72" href="assets/ico/bootstrap-apple-72x72.png"> <link rel="apple-touch-icon" sizes="114x114" href="assets/ico/bootstrap-apple-114x114.png"> - - <!-- Le javascript --> - <!-- Placed at the end of the document so the pages load faster --> - <script src="http://code.jquery.com/jquery-1.7.min.js"></script> - <script src="http://autobahn.tablesorter.com/jquery.tablesorter.min.js"></script> - <script src="assets/js/google-code-prettify/prettify.js"></script> - <script>$(function () { prettyPrint() })</script> - <script src="../js/bootstrap-transitions.js"></script> - <script src="../js/bootstrap-dropdown.js"></script> - <script src="../js/bootstrap-twipsy.js"></script> - <script src="../js/bootstrap-scrollspy.js"></script> - <script src="assets/js/application.js"></script> </head> <body> @@ -768,7 +756,7 @@ <div class="twipsies well"> <div style="position: relative"> <p class="muted" style="margin-bottom: 0"> -Lorem ipsum dolar sit amet illo error <a href="#" title="below">ipsum</a> veritatis aut iste perspiciatis iste voluptas natus illo quasi odit aut natus consequuntur consequuntur, aut natus illo voluptatem odit perspiciatis laudantium rem doloremque totam voluptas. <a href="#" title="right">Voluptasdicta</a> eaque beatae aperiam ut enim voluptatem explicabo explicabo, voluptas quia odit fugit accusantium totam totam architecto explicabo sit quasi fugit fugit, totam doloremque unde sunt <a href="#" title="left">sed</a> dicta quae accusantium fugit voluptas nemo voluptas voluptatem <a href="#" title="above">rem</a> quae aut veritatis quasi quae. +Lorem ipsum dolar sit amet illo error <a href="#" title="bottom">ipsum</a> veritatis aut iste perspiciatis iste voluptas natus illo quasi odit aut natus consequuntur consequuntur, aut natus illo voluptatem odit perspiciatis laudantium rem doloremque totam voluptas. <a href="#" title="right">Voluptasdicta</a> eaque beatae aperiam ut enim voluptatem explicabo explicabo, voluptas quia odit fugit accusantium totam totam architecto explicabo sit quasi fugit fugit, totam doloremque unde sunt <a href="#" title="left">sed</a> dicta quae accusantium fugit voluptas nemo voluptas voluptatem <a href="#" title="top">rem</a> quae aut veritatis quasi quae. </p> </div> </div> @@ -811,9 +799,6 @@ Lorem ipsum dolar sit amet illo error <a href="#" title="below">ipsum</a> verita </div><!-- /row --> </section> - - - <!-- Footer ================================================== --> <footer class="footer"> @@ -823,5 +808,16 @@ Lorem ipsum dolar sit amet illo error <a href="#" title="below">ipsum</a> verita <p>Icons from <a href="http://glyphicons.com">Glyphicons Free</a>, licensed under <a href="http://creativecommons.org/licenses/by/3.0/">CC BY 3.0</a>.</p> </footer> </div><!-- /container --> + + <!-- Le javascript --> + <!-- Placed at the end of the document so the pages load faster --> + <script src="http://code.jquery.com/jquery-1.7.min.js"></script> + <script src="assets/js/google-code-prettify/prettify.js"></script> + <script src="../js/bootstrap-transition.js"></script> + <script src="../js/bootstrap-dropdown.js"></script> + <script src="../js/bootstrap-tab.js"></script> + <script src="../js/bootstrap-scrollspy.js"></script> + <script src="../js/bootstrap-twipsy.js"></script> + <script src="assets/js/application.js"></script> </body> </html> diff --git a/docs/scaffolding.html b/docs/scaffolding.html index dc35bd5775..0a46252ddb 100644 --- a/docs/scaffolding.html +++ b/docs/scaffolding.html @@ -375,5 +375,6 @@ <script src="../js/bootstrap-transition.js"></script> <script src="../js/bootstrap-twipsy.js"></script> <script src="assets/js/application.js"></script> + </body> </html> -- GitLab From ea2346197075a30f0200665fcd2836b217f33fb3 Mon Sep 17 00:00:00 2001 From: Jacob Thornton <jacobthornton@gmail.com> Date: Thu, 22 Dec 2011 19:28:58 -0800 Subject: [PATCH 155/318] fix unit test for twipsy --- js/tests/unit/bootstrap-twipsy.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/js/tests/unit/bootstrap-twipsy.js b/js/tests/unit/bootstrap-twipsy.js index 7a88ab2f13..6623fc026e 100644 --- a/js/tests/unit/bootstrap-twipsy.js +++ b/js/tests/unit/bootstrap-twipsy.js @@ -30,10 +30,10 @@ $(function () { $.support.transition = false var twipsy = $('<a href="#" rel="twipsy" title="Another twipsy"></a>') .appendTo('#qunit-fixture') - .twipsy({placement: 'below'}) + .twipsy({placement: 'bottom'}) .twipsy('show') - ok($(".twipsy").hasClass('fade below in'), 'has correct classes applied') + ok($(".twipsy").hasClass('fade bottom in'), 'has correct classes applied') twipsy.twipsy('hide') }) -- GitLab From 3aba68f832e3406fcd6687ba4687cd339ae3b42d Mon Sep 17 00:00:00 2001 From: Purwandi <free6300@gmail.com> Date: Fri, 23 Dec 2011 21:39:29 +0700 Subject: [PATCH 156/318] Fix id tabs on docs component --- docs/components.html | 40 ++++++++++++++++++++-------------------- 1 file changed, 20 insertions(+), 20 deletions(-) diff --git a/docs/components.html b/docs/components.html index 5b4e788f11..c6a349ff49 100644 --- a/docs/components.html +++ b/docs/components.html @@ -358,20 +358,20 @@ <div class="span4"> <div class="tabbable tabs-left"> <ul class="tabs"> - <li class="active"><a href="#4" data-toggle="tab">Section 1</a></li> - <li><a href="#5" data-toggle="tab">Section 2</a></li> - <li><a href="#6" data-toggle="tab">Section 3</a></li> + <li class="active"><a href="#5" data-toggle="tab">Section 1</a></li> + <li><a href="#6" data-toggle="tab">Section 2</a></li> + <li><a href="#7" data-toggle="tab">Section 3</a></li> </ul> <div class="tab-content" id="myTabContent2"> - <div class="tab-pane active" id="4"> + <div class="tab-pane active" id="5"> <h4>Section 1</h4> <p>Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Maecenas sed diam eget risus varius blandit sit amet non magna. Vestibulum id ligula porta felis euismod semper.</p> </div> - <div class="tab-pane" id="5"> + <div class="tab-pane" id="6"> <h4>Section 2</h4> <p>Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Maecenas sed diam eget risus varius blandit sit amet non magna. Vestibulum id ligula porta felis euismod semper.</p> </div> - <div class="tab-pane" id="6"> + <div class="tab-pane" id="7"> <h4>Section 3</h4> <p>Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Maecenas sed diam eget risus varius blandit sit amet non magna. Vestibulum id ligula porta felis euismod semper.</p> </div> @@ -381,20 +381,20 @@ <div class="span4 offset1"> <div class="tabbable tabs-right"> <ul class="tabs"> - <li class="active"><a href="#7" data-toggle="tab">Section 1</a></li> - <li><a href="#8" data-toggle="tab">Section 2</a></li> - <li><a href="#9" data-toggle="tab">Section 3</a></li> + <li class="active"><a href="#8" data-toggle="tab">Section 1</a></li> + <li><a href="#9" data-toggle="tab">Section 2</a></li> + <li><a href="#10" data-toggle="tab">Section 3</a></li> </ul> <div class="tab-content" id="myTabContent3"> - <div class="tab-pane active" id="7"> + <div class="tab-pane active" id="8"> <h4>Section 1</h4> <p>Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Maecenas sed diam eget risus varius blandit sit amet non magna. Vestibulum id ligula porta felis euismod semper.</p> </div> - <div class="tab-pane" id="8"> + <div class="tab-pane" id="9"> <h4>Section 2</h4> <p>Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Maecenas sed diam eget risus varius blandit sit amet non magna. Vestibulum id ligula porta felis euismod semper.</p> </div> - <div class="tab-pane" id="9"> + <div class="tab-pane" id="10"> <h4>Section 3</h4> <p>Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Maecenas sed diam eget risus varius blandit sit amet non magna. Vestibulum id ligula porta felis euismod semper.</p> </div> @@ -405,24 +405,24 @@ <div class="tabbable tabs-bottom"> <div class="tab-content"> - <div class="tab-pane active" id="10"> + <div class="tab-pane active" id="11"> <p>Oh hai #1!</p> </div> - <div class="tab-pane" id="11"> + <div class="tab-pane" id="12"> <p>Oh hai #2!</p> </div> - <div class="tab-pane" id="12"> + <div class="tab-pane" id="13"> <p>Oh hai #3!</p> </div> - <div class="tab-pane" id="13"> + <div class="tab-pane" id="14"> <p>Oh hai #4!</p> </div> </div> <ul class="tabs"> - <li class="active"><a href="#10" data-toggle="tab">Section 1</a></li> - <li><a href="#11" data-toggle="tab">Section 2</a></li> - <li><a href="#12" data-toggle="tab">Section 3</a></li> - <li><a href="#13" data-toggle="tab">Section 4</a></li> + <li class="active"><a href="#11" data-toggle="tab">Section 1</a></li> + <li><a href="#12" data-toggle="tab">Section 2</a></li> + <li><a href="#13" data-toggle="tab">Section 3</a></li> + <li><a href="#14" data-toggle="tab">Section 4</a></li> </ul> </div> -- GitLab From 1a295491b275cf55187c913db311e807eda5e989 Mon Sep 17 00:00:00 2001 From: Jacob Thornton <jacobthornton@gmail.com> Date: Sat, 24 Dec 2011 22:15:04 -0800 Subject: [PATCH 157/318] update docs for placement --- docs/javascript.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/javascript.html b/docs/javascript.html index e339004323..7c92ef06a1 100644 --- a/docs/javascript.html +++ b/docs/javascript.html @@ -635,7 +635,7 @@ $('a[data-toggle="tab"]').on('shown', function (e) { <td>placement</td> <td>string</td> <td>'right'</td> - <td>how to position the popover - above | below | left | right</td> + <td>how to position the popover - top | bottom | left | right</td> </tr> <tr> <td>selector</td> -- GitLab From 076370f3f9076b177a1f9c8ba9f536faa1a58957 Mon Sep 17 00:00:00 2001 From: Jacob Thornton <jacobthornton@gmail.com> Date: Sat, 24 Dec 2011 22:31:39 -0800 Subject: [PATCH 158/318] fix for linux --- Makefile | 3 +-- bootstrap.css | 6 +----- 2 files changed, 2 insertions(+), 7 deletions(-) diff --git a/Makefile b/Makefile index 1f38338f80..3d24eb1c52 100644 --- a/Makefile +++ b/Makefile @@ -1,5 +1,4 @@ VERSION=2.0.0 -DATE=$(shell DATE) BOOTSTRAP = ./bootstrap.css BOOTSTRAP_MIN = ./bootstrap.min.css BOOTSTRAP_LESS = ./lib/bootstrap.less @@ -9,7 +8,7 @@ WATCHR ?= `which watchr` build: @@if test ! -z ${LESS_COMPESSOR}; then \ - sed -e 's/@VERSION/'"v${VERSION}"'/' -e 's/@DATE/'"${DATE}"'/' <${BOOTSTRAP_LESS} >${BOOTSTRAP_LESS}.tmp; \ + sed -e 's/@VERSION/'"v${VERSION}"'/' -e 's/@DATE/'"`date`"'/' <${BOOTSTRAP_LESS} >${BOOTSTRAP_LESS}.tmp; \ lessc ${BOOTSTRAP_LESS}.tmp > ${BOOTSTRAP}; \ lessc ${BOOTSTRAP_LESS}.tmp > ${BOOTSTRAP_MIN} --compress; \ rm -f ${BOOTSTRAP_LESS}.tmp; \ diff --git a/bootstrap.css b/bootstrap.css index eb7b656783..333d6f04c0 100644 --- a/bootstrap.css +++ b/bootstrap.css @@ -6,11 +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. -<<<<<<< HEAD - * Date: Thu Dec 22 19:09:49 PST 2011 -======= - * Date: Wed Dec 21 18:38:56 CST 2011 ->>>>>>> 9fb380151d477f1741b7609ade7a9e7fd5450b2c + * Date: Sat Dec 24 22:30:43 PST 2011 */ html, body { margin: 0; -- GitLab From 823d89dbb23511b7ee929ddbd62661be751429d6 Mon Sep 17 00:00:00 2001 From: Jacob Thornton <jacobthornton@gmail.com> Date: Sat, 24 Dec 2011 22:56:01 -0800 Subject: [PATCH 159/318] move position of twipsy into getPosition so it can easily be extended for svg use --- js/bootstrap-twipsy.js | 12 ++++++++---- 1 file changed, 8 insertions(+), 4 deletions(-) diff --git a/js/bootstrap-twipsy.js b/js/bootstrap-twipsy.js index 21cf7d20b1..2651e38226 100644 --- a/js/bootstrap-twipsy.js +++ b/js/bootstrap-twipsy.js @@ -125,10 +125,7 @@ .css({ top: 0, left: 0, display: 'block' }) .prependTo(inside ? this.$element : document.body) - pos = $.extend({}, (inside ? {top: 0, left: 0} : this.$element.offset()), { - width: this.$element[0].offsetWidth - , height: this.$element[0].offsetHeight - }) + pos = this.getPosition(inside) actualWidth = $tip[0].offsetWidth actualHeight = $tip[0].offsetHeight @@ -187,6 +184,13 @@ return this.getTitle() } + , getPosition: function (inside) { + return $.extend({}, (inside ? {top: 0, left: 0} : this.$element.offset()), { + width: this.$element[0].offsetWidth + , height: this.$element[0].offsetHeight + }) + } + , getTitle: function () { var title , $e = this.$element -- GitLab From 12868933b9141ff9c63277efe36665cc7a8815df Mon Sep 17 00:00:00 2001 From: Jacob Thornton <jacobthornton@gmail.com> Date: Sat, 24 Dec 2011 23:06:16 -0800 Subject: [PATCH 160/318] clean up dead elements in firefox (which is droping transitionEnd events :( --- js/bootstrap-twipsy.js | 15 +++++++++++---- 1 file changed, 11 insertions(+), 4 deletions(-) diff --git a/js/bootstrap-twipsy.js b/js/bootstrap-twipsy.js index 2651e38226..a176f09088 100644 --- a/js/bootstrap-twipsy.js +++ b/js/bootstrap-twipsy.js @@ -164,13 +164,20 @@ $tip.removeClass('in') - function removeElement () { - $tip.remove() + function removeWithAnimation() { + var timeout = setTimeout(function () { + $tip.off($.support.transition.end).remove() + }, 500) + + $tip.one($.support.transition.end, function () { + clearTimeout(timeout) + $tip.remove() + }) } $.support.transition && this.$tip.hasClass('fade') ? - $tip.on($.support.transition.end, removeElement) : - removeElement() + removeWithAnimation() : + $tip.remove() } , fixTitle: function () { -- GitLab From 058f47b33b3978bbb484e521e7fc14c6ebadc161 Mon Sep 17 00:00:00 2001 From: Mark Otto <markdotto@gmail.com> Date: Mon, 26 Dec 2011 17:25:25 -0600 Subject: [PATCH 161/318] clean up some comments and fix a bug with buttons in navbar by removing too generic of a link color --- bootstrap.css | 106 ++-------------------------------------------- bootstrap.min.css | 11 +---- docs/index.html | 1 + lib/patterns.less | 103 ++------------------------------------------ 4 files changed, 8 insertions(+), 213 deletions(-) diff --git a/bootstrap.css b/bootstrap.css index 5e22415ddd..ff21bc836c 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: Mon Dec 26 16:47:02 CST 2011 + * Date: Mon Dec 26 17:12:29 CST 2011 */ html, body { margin: 0; @@ -1191,10 +1191,6 @@ table { -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); } -.navbar a { - color: #bfbfbf; - text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25); -} .navbar .brand a:hover, .navbar ul .active > a { color: #ffffff; text-decoration: none; @@ -1300,7 +1296,9 @@ table { float: none; padding: 10px 10px 11px; line-height: 19px; + color: #bfbfbf; text-decoration: none; + text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25); } .nav a:hover { color: #ffffff; @@ -1368,104 +1366,6 @@ table { .topbar ul .dropdown-menu li a { padding: 4px 15px; } -.dropdown { - position: relative; -} -.dropdown-toggle:after { - display: inline-block; - width: 0; - height: 0; - margin-top: 8px; - margin-left: 6px; - text-indent: -99999px; - vertical-align: top; - border-left: 4px solid transparent; - border-right: 4px solid transparent; - border-top: 4px solid #ffffff; - filter: alpha(opacity=30); - -moz-opacity: 0.3; - opacity: 0.3; - content: "↓"; -} -.dropdown:hover .dropdown-toggle:after { - filter: alpha(opacity=100); - -moz-opacity: 1; - opacity: 1; -} -.dropdown-menu { - position: absolute; - top: 40px; - z-index: 900; - float: left; - display: none; - min-width: 160px; - max-width: 220px; - _width: 160px; - padding: 6px 0; - margin-left: 0; - margin-right: 0; - background-color: #ffffff; - 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; - zoom: 1; -} -.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 { - color: #404040; - text-decoration: none; - background-color: #dddddd; - 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); - background-repeat: repeat-x; - filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#eeeeee', endColorstr='#dddddd', GradientType=0); - -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.open .dropdown-toggle { - color: #ffffff; - background: #ccc; - background: rgba(0, 0, 0, 0.3); -} -.dropdown.open .dropdown-menu { - display: block; -} .hero-unit { padding: 60px; margin-bottom: 30px; diff --git a/bootstrap.min.css b/bootstrap.min.css index aa277ddb8c..711e8a37ee 100644 --- a/bootstrap.min.css +++ b/bootstrap.min.css @@ -173,7 +173,6 @@ tbody tr:last-child th,tbody tr:last-child td{border-bottom:0;} .striped-table tbody tr:nth-child(odd) td,.striped-table tbody tr:nth-child(odd) th{background-color:#f9f9f9;} .navbar{overflow:visible;} .navbar-inner{background-color:#222222;background-color:#222222;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);background-repeat:repeat-x;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);} -.navbar a{color:#bfbfbf;text-shadow:0 -1px 0 rgba(0, 0, 0, 0.25);} .navbar .brand a:hover,.navbar ul .active>a{color:#ffffff;text-decoration:none;background-color:#333333;background-color:rgba(255, 255, 255, 0.05);} .navbar .brand{float:left;display:block;padding:8px 20px 12px;margin-left:-20px;font-size:20px;font-weight:200;line-height:1;color:#ffffff;} .navbar p{margin:0;line-height:40px;}.navbar p a:hover{color:#ffffff;background-color:transparent;} @@ -185,7 +184,7 @@ tbody tr:last-child th,tbody tr:last-child td{border-bottom:0;} .navbar-static .navbar-inner{padding-left:20px;padding-right:20px;-webkit-border-radius:4px;-moz-border-radius:4px;border-radius:4px;} .navbar-fixed{position:fixed;top:0;right:0;left:0;z-index:10000;} .nav{position:relative;left:0;display:block;float:left;margin:0 10px 0 0;}.nav>li{display:block;float:left;} -.nav a{display:block;float:none;padding:10px 10px 11px;line-height:19px;text-decoration:none;}.nav a:hover{color:#ffffff;text-decoration:none;} +.nav a{display:block;float:none;padding:10px 10px 11px;line-height:19px;color:#bfbfbf;text-decoration:none;text-shadow:0 -1px 0 rgba(0, 0, 0, 0.25);}.nav a:hover{color:#ffffff;text-decoration:none;} .nav .active>a{background-color:#222;background-color:rgba(0, 0, 0, 0.5);} .nav .divider{height:40px;width:1px;margin:0 5px;overflow:hidden;background-color:#222;border-right:1px solid #444;} .nav.secondary-nav{float:right;margin-left:10px;margin-right:0;}.nav.secondary-nav .dropdown-menu{right:0;border:0;} @@ -195,14 +194,6 @@ tbody tr:last-child th,tbody tr:last-child td{border-bottom:0;} .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{display:inline-block;width:0;height:0;margin-top:8px;margin-left:6px;text-indent:-99999px;vertical-align:top;border-left:4px solid transparent;border-right:4px solid transparent;border-top:4px solid #ffffff;filter:alpha(opacity=30);-moz-opacity:0.3;opacity:0.3;content:"↓";} -.dropdown:hover .dropdown-toggle:after{filter:alpha(opacity=100);-moz-opacity:1;opacity:1;} -.dropdown-menu{position:absolute;top:40px;z-index:900;float:left;display:none;min-width:160px;max-width:220px;_width:160px;padding:6px 0;margin-left:0;margin-right:0;background-color:#ffffff;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;zoom:1;}.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{color:#404040;text-decoration:none;background-color:#dddddd;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);background-repeat:repeat-x;filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#eeeeee', endColorstr='#dddddd', GradientType=0);-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.open .dropdown-toggle{color:#ffffff;background:#ccc;background:rgba(0, 0, 0, 0.3);} -.dropdown.open .dropdown-menu{display:block;} .hero-unit{padding:60px;margin-bottom:30px;background-color:#f5f5f5;-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{padding-top:17px;margin-top:17px;border-top:1px solid #eee;} diff --git a/docs/index.html b/docs/index.html index 0d340fa1ab..735fe7ae73 100644 --- a/docs/index.html +++ b/docs/index.html @@ -41,6 +41,7 @@ <li><a href="./javascript.html">Javascript plugins</a></li> <li><a href="./less.html">Using LESS</a></li> </ul> + <a href="" class="btn pull-right">Button</a> </div> </div> </div> diff --git a/lib/patterns.less b/lib/patterns.less index 44c427adf5..25934d80a8 100644 --- a/lib/patterns.less +++ b/lib/patterns.less @@ -24,11 +24,6 @@ } // Text and links .navbar { - // Links get text-shadow - a { - color: @grayLight; - text-shadow: 0 -1px 0 rgba(0,0,0,.25); - } // Hover and active states .brand a:hover, ul .active > a { @@ -146,7 +141,9 @@ float: none; padding: 10px 10px 11px; line-height: 19px; + color: @grayLight; text-decoration: none; + text-shadow: 0 -1px 0 rgba(0,0,0,.25); &:hover { color: @white; text-decoration: none; @@ -213,101 +210,6 @@ 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 -.dropdown { - position: relative; -} -// The link that is clicked to toggle the dropdown -.dropdown-toggle:after { - display: inline-block; - width: 0; - height: 0; - margin-top: 8px; - margin-left: 6px; - text-indent: -99999px; - vertical-align: top; - border-left: 4px solid transparent; - border-right: 4px solid transparent; - border-top: 4px solid @white; - .opacity(30); - content: "↓"; -} -.dropdown:hover .dropdown-toggle:after { - .opacity(100); -} -// The dropdown menu (ul) -.dropdown-menu { - position: absolute; - top: 40px; - z-index: 900; - float: left; - display: none; // None by default, but block on "open" of the menu - min-width: 160px; - max-width: 220px; - _width: 160px; - padding: 6px 0; - margin-left: 0; // override default ul styles - margin-right: 0; - background-color: @white; - 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); - zoom: 1; // do we need this? - - // Unfloat any li's to make them stack - li { - float: none; - display: block; - background-color: none; - } - // Dividers (basically an hr) within the dropdown - .divider { - height: 1px; - margin: 5px 0; - overflow: hidden; - background-color: #eee; - border-bottom: 1px solid @white; - } -} - -.topbar .dropdown-menu, .dropdown-menu { - // 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 @white; - // Hover state - &:hover { - color: @grayDark; - text-decoration: none; - #gradient > .vertical(#eeeeee, #dddddd); - @shadow: inset 0 1px 0 rgba(0,0,0,.025), inset 0 -1px rgba(0,0,0,.025); - .box-shadow(@shadow); - } - } -} - -// Open state for the dropdown -.dropdown.open { - .dropdown-toggle { - color: @white; - background: #ccc; - background: rgba(0,0,0,.3); - } - .dropdown-menu { - display: block; - } -} - @@ -493,6 +395,7 @@ input[type=submit].btn { float: left; margin-left: -1px; .border-radius(0); + // Set corners individual because sometimes a single button can be in a .btn-group and we need :first-child and :last-child to both match &:first-child { margin-left: 0; -webkit-border-top-left-radius: 4px; -- GitLab From 324246e4f964437a2dfa7efbd2d1b6b039369b2c Mon Sep 17 00:00:00 2001 From: Mark Otto <markdotto@gmail.com> Date: Tue, 27 Dec 2011 12:39:39 -0600 Subject: [PATCH 162/318] remove negative margin from .brand in docs, update navbar to support buttons up thurr --- bootstrap.css | 5 ++++- bootstrap.min.css | 1 + docs/assets/css/docs.css | 1 + lib/patterns.less | 4 ++++ 4 files changed, 10 insertions(+), 1 deletion(-) diff --git a/bootstrap.css b/bootstrap.css index ff21bc836c..105c10de39 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: Mon Dec 26 17:12:29 CST 2011 + * Date: Tue Dec 27 12:39:01 CST 2011 */ html, body { margin: 0; @@ -1215,6 +1215,9 @@ table { color: #ffffff; background-color: transparent; } +.navbar .btn { + margin-top: 5px; +} .navbar-search { position: relative; float: left; diff --git a/bootstrap.min.css b/bootstrap.min.css index 711e8a37ee..048414c782 100644 --- a/bootstrap.min.css +++ b/bootstrap.min.css @@ -176,6 +176,7 @@ tbody tr:last-child th,tbody tr:last-child td{border-bottom:0;} .navbar .brand a:hover,.navbar ul .active>a{color:#ffffff;text-decoration:none;background-color:#333333;background-color:rgba(255, 255, 255, 0.05);} .navbar .brand{float:left;display:block;padding:8px 20px 12px;margin-left:-20px;font-size:20px;font-weight:200;line-height:1;color:#ffffff;} .navbar p{margin:0;line-height:40px;}.navbar p a:hover{color:#ffffff;background-color:transparent;} +.navbar .btn{margin-top:5px;} .navbar-search{position:relative;float:left;margin-top:6px;margin-bottom:0;}.navbar-search .search-query{padding:4px 9px;font-family:"Helvetica Neue",Helvetica,Arial,sans-serif;font-size:13px;font-weight:normal;line-height:1;color:#ffffff;color:rgba(255, 255, 255, 0.75);background-color:#444;background-color:rgba(255, 255, 255, 0.3);border:1px solid #111;-webkit-box-shadow:inset 0 1px 2px rgba(0, 0, 0, 0.1),0 1px 0px rgba(255, 255, 255, 0.15);-moz-box-shadow:inset 0 1px 2px rgba(0, 0, 0, 0.1),0 1px 0px rgba(255, 255, 255, 0.15);box-shadow:inset 0 1px 2px rgba(0, 0, 0, 0.1),0 1px 0px rgba(255, 255, 255, 0.15);-webkit-transition:none;-moz-transition:none;-ms-transition:none;-o-transition:none;transition:none;}.navbar-search .search-query:-moz-placeholder{color:#e6e6e6;} .navbar-search .search-query::-webkit-input-placeholder{color:#e6e6e6;} .navbar-search .search-query:hover{color:#ffffff;background-color:#bfbfbf;background-color:rgba(255, 255, 255, 0.5);} diff --git a/docs/assets/css/docs.css b/docs/assets/css/docs.css index b3c4649419..c2c92a2519 100644 --- a/docs/assets/css/docs.css +++ b/docs/assets/css/docs.css @@ -22,6 +22,7 @@ body { body > .navbar-fixed .brand { padding-right: 0; padding-left: 0; + margin-left: 20px; float: right; font-weight: bold; color: #000; diff --git a/lib/patterns.less b/lib/patterns.less index 25934d80a8..d48d65e48b 100644 --- a/lib/patterns.less +++ b/lib/patterns.less @@ -52,6 +52,10 @@ background-color: transparent; } } + // Buttons in navbar + .btn { + margin-top: 5px; // make buttons vertically centered in navbar + } } // Navbar search -- GitLab From b9adae14fc9fa64134aebb57655dd93e0a7e6ad6 Mon Sep 17 00:00:00 2001 From: Mark Otto <markdotto@gmail.com> Date: Tue, 27 Dec 2011 12:40:30 -0600 Subject: [PATCH 163/318] remove button from topbar for testing --- docs/index.html | 1 - 1 file changed, 1 deletion(-) diff --git a/docs/index.html b/docs/index.html index 735fe7ae73..0d340fa1ab 100644 --- a/docs/index.html +++ b/docs/index.html @@ -41,7 +41,6 @@ <li><a href="./javascript.html">Javascript plugins</a></li> <li><a href="./less.html">Using LESS</a></li> </ul> - <a href="" class="btn pull-right">Button</a> </div> </div> </div> -- GitLab From 5801c4d766205c6f1579b9c45e733df5dba3b1fe Mon Sep 17 00:00:00 2001 From: Mark Otto <markdotto@gmail.com> Date: Tue, 27 Dec 2011 13:51:50 -0600 Subject: [PATCH 164/318] capitalize Less in makefile, add print less file (not yet compiled) --- Makefile | 2 +- lib/print.less | 18 ++++++++++++++++++ 2 files changed, 19 insertions(+), 1 deletion(-) create mode 100644 lib/print.less diff --git a/Makefile b/Makefile index 3d24eb1c52..5eee74f2e5 100644 --- a/Makefile +++ b/Makefile @@ -42,7 +42,7 @@ watch: echo "Watching less files..."; \ watchr -e "watch('lib/.*\.less') { system 'make' }"; \ else \ - echo "You must have the watchr installed in order to watch Bootstrap less files."; \ + echo "You must have the watchr installed in order to watch Bootstrap Less files."; \ echo "You can install it by running: gem install watchr"; \ fi diff --git a/lib/print.less b/lib/print.less new file mode 100644 index 0000000000..b45d016fdd --- /dev/null +++ b/lib/print.less @@ -0,0 +1,18 @@ +/*! + * Bootstrap @VERSION for Print + * + * Copyright 2011 Twitter, Inc + * Licensed under the Apache License v2.0 + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Designed and built with all the love in the world @twitter by @mdo and @fat. + * Date: @DATE + */ + + +// HIDE UNECESSARY COMPONENTS +// -------------------------- + +.navbar-fixed { + display: none; +} \ No newline at end of file -- GitLab From fec02f50455c87f0e01fe74b1fb2e3cd032ade09 Mon Sep 17 00:00:00 2001 From: Mark Otto <markdotto@gmail.com> Date: Tue, 27 Dec 2011 15:40:58 -0600 Subject: [PATCH 165/318] clean up some css for github issues: input prepend z-index, modals revamped for responsive --- bootstrap.css | 18 ++++++++++++------ bootstrap.min.css | 8 ++++---- docs/base-css.html | 2 +- docs/components.html | 2 +- lib/forms.less | 4 +--- lib/modals.less | 3 ++- lib/responsive.less | 12 ++++++++++++ 7 files changed, 33 insertions(+), 16 deletions(-) diff --git a/bootstrap.css b/bootstrap.css index 105c10de39..95dde47e84 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: Tue Dec 27 12:39:01 CST 2011 + * Date: Tue Dec 27 15:23:07 CST 2011 */ html, body { margin: 0; @@ -602,6 +602,7 @@ select, input[type=file] { } select { background-color: #ffffff; + vertical-align: middle; } select[multiple] { height: inherit; @@ -904,17 +905,12 @@ textarea[readonly] { display: block; max-width: 600px; } -.input-prepend, .input-append { - overflow: hidden; -} .input-prepend input, .input-append input { -webkit-border-radius: 0 3px 3px 0; -moz-border-radius: 0 3px 3px 0; border-radius: 0 3px 3px 0; } .input-prepend .add-on, .input-append .add-on { - position: relative; - z-index: 2; float: left; display: block; width: auto; @@ -2574,6 +2570,16 @@ a.thumbnail:hover { .horizontal-form .form-actions { padding-left: 0; } + .modal { + position: fixed; + top: 20px; + left: 20px; + right: 20px; + width: auto; + } + .modal .close { + padding: 10px; + } } @media (max-width: 768px) { .container { diff --git a/bootstrap.min.css b/bootstrap.min.css index 048414c782..aff1c43c2a 100644 --- a/bootstrap.min.css +++ b/bootstrap.min.css @@ -100,7 +100,7 @@ input[type=image],input[type=checkbox],input[type=radio]{width:auto;height:auto; input[type=file]{padding:initial;line-height:initial;border:initial;background-color:#ffffff;background-color:initial;-webkit-box-shadow:none;-moz-box-shadow:none;box-shadow:none;} input[type=button],input[type=reset],input[type=submit]{width:auto;height:auto;} select,input[type=file]{height:27px;*margin-top:4px;line-height:27px;} -select{background-color:#ffffff;} +select{background-color:#ffffff;vertical-align:middle;} select[multiple]{height:inherit;} input[type=image]{-webkit-box-shadow:none;-moz-box-shadow:none;box-shadow:none;} textarea{height:auto;} @@ -146,8 +146,8 @@ input[disabled],select[disabled],textarea[disabled],input[readonly],select[reado .help-text{margin-top:5px;margin-bottom:0;color:#bfbfbf;} .help-inline{*position:relative;*top:-5px;display:inline;padding-left:5px;} .help-block{display:block;max-width:600px;} -.input-prepend,.input-append{overflow:hidden;}.input-prepend input,.input-append input{-webkit-border-radius:0 3px 3px 0;-moz-border-radius:0 3px 3px 0;border-radius:0 3px 3px 0;} -.input-prepend .add-on,.input-append .add-on{position:relative;z-index:2;float:left;display:block;width:auto;min-width:16px;height:18px;margin-right:-1px;padding:4px 4px 4px 5px;font-weight:normal;line-height:18px;color:#bfbfbf;text-align:center;text-shadow:0 1px 0 #ffffff;background-color:#f5f5f5;border:1px solid #ccc;-webkit-border-radius:3px 0 0 3px;-moz-border-radius:3px 0 0 3px;border-radius:3px 0 0 3px;} +.input-prepend input,.input-append input{-webkit-border-radius:0 3px 3px 0;-moz-border-radius:0 3px 3px 0;border-radius:0 3px 3px 0;} +.input-prepend .add-on,.input-append .add-on{float:left;display:block;width:auto;min-width:16px;height:18px;margin-right:-1px;padding:4px 4px 4px 5px;font-weight:normal;line-height:18px;color:#bfbfbf;text-align:center;text-shadow:0 1px 0 #ffffff;background-color:#f5f5f5;border:1px solid #ccc;-webkit-border-radius:3px 0 0 3px;-moz-border-radius:3px 0 0 3px;border-radius:3px 0 0 3px;} .input-prepend .active,.input-append .active{background-color:#a9dba9;border-color:#46a546;} .input-prepend .add-on{*margin-top:1px;} .input-append input{float:left;-webkit-border-radius:3px 0 0 3px;-moz-border-radius:3px 0 0 3px;border-radius:3px 0 0 3px;} @@ -339,4 +339,4 @@ a.thumbnail:hover{border-color:#0069d6;-webkit-box-shadow:0 1px 4px rgba(0, 105, .thumbnail>img{display:block;max-width:100%;} .thumbnail .caption{padding:9px;} .hidden{display:none;visibility:hidden;} -@media (max-width: 480px){.modal{width:auto;margin:0;} .horizontal-form .control-group>label{float:none;width:auto;padding-top:0;text-align:left;} .horizontal-form .controls{margin-left:0;} .horizontal-form .control-list{padding-top:0;} .horizontal-form .form-actions{padding-left:0;}}@media (max-width: 768px){.container{width:auto;padding:0 20px;} .row{margin-left:0;} .row>[class*="span"]{float:none;display:block;width:auto;margin:0;} .nav{position:absolute;top:0;left:0;width:180px;padding-top:40px;list-style:none;} .nav,.nav>li:last-child a{-webkit-border-radius:0 0 4px 0;-moz-border-radius:0 0 4px 0;border-radius:0 0 4px 0;} .nav>li{float:none;display:none;} .nav>li>a{float:none;background-color:#222;} .nav>.active{display:block;position:absolute;top:0;left:0;} .navbar ul .active>a{background-color:transparent;} .nav>.active a:after{display:inline-block;width:0;height:0;margin-top:8px;margin-left:6px;text-indent:-99999px;vertical-align:top;border-left:4px solid transparent;border-right:4px solid transparent;border-top:4px solid #ffffff;filter:alpha(opacity=100);-moz-opacity:1;opacity:1;content:"↓";} .nav>.active a:hover{background-color:rgba(255, 255, 255, 0.05);}}@media (min-width: 768px) and (max-width: 940px){.container{width:748px;} .span1{width:44px;} .span2{width:108px;} .span3{width:172px;} .span4{width:236px;} .span5{width:300px;} .span6{width:364px;} .span7{width:428px;} .span8{width:492px;} .span9{width:556px;} .span10{width:620px;} .span11{width:684px;} .span12{width:748px;} .offset1{margin-left:64px;} .offset2{margin-left:128px;} .offset3{margin-left:192px;} .offset4{margin-left:256px;} .offset5{margin-left:320px;} .offset6{margin-left:384px;} .offset7{margin-left:448px;} .offset8{margin-left:512px;} .offset9{margin-left:576px;} .offset10{margin-left:640px;} .offset11{margin-left:704px;} .offset12{margin-left:768px;}} +@media (max-width: 480px){.modal{width:auto;margin:0;} .horizontal-form .control-group>label{float:none;width:auto;padding-top:0;text-align:left;} .horizontal-form .controls{margin-left:0;} .horizontal-form .control-list{padding-top:0;} .horizontal-form .form-actions{padding-left:0;} .modal{position:fixed;top:20px;left:20px;right:20px;width:auto;}.modal .close{padding:10px;}}@media (max-width: 768px){.container{width:auto;padding:0 20px;} .row{margin-left:0;} .row>[class*="span"]{float:none;display:block;width:auto;margin:0;} .nav{position:absolute;top:0;left:0;width:180px;padding-top:40px;list-style:none;} .nav,.nav>li:last-child a{-webkit-border-radius:0 0 4px 0;-moz-border-radius:0 0 4px 0;border-radius:0 0 4px 0;} .nav>li{float:none;display:none;} .nav>li>a{float:none;background-color:#222;} .nav>.active{display:block;position:absolute;top:0;left:0;} .navbar ul .active>a{background-color:transparent;} .nav>.active a:after{display:inline-block;width:0;height:0;margin-top:8px;margin-left:6px;text-indent:-99999px;vertical-align:top;border-left:4px solid transparent;border-right:4px solid transparent;border-top:4px solid #ffffff;filter:alpha(opacity=100);-moz-opacity:1;opacity:1;content:"↓";} .nav>.active a:hover{background-color:rgba(255, 255, 255, 0.05);}}@media (min-width: 768px) and (max-width: 940px){.container{width:748px;} .span1{width:44px;} .span2{width:108px;} .span3{width:172px;} .span4{width:236px;} .span5{width:300px;} .span6{width:364px;} .span7{width:428px;} .span8{width:492px;} .span9{width:556px;} .span10{width:620px;} .span11{width:684px;} .span12{width:748px;} .offset1{margin-left:64px;} .offset2{margin-left:128px;} .offset3{margin-left:192px;} .offset4{margin-left:256px;} .offset5{margin-left:320px;} .offset6{margin-left:384px;} .offset7{margin-left:448px;} .offset8{margin-left:512px;} .offset9{margin-left:576px;} .offset10{margin-left:640px;} .offset11{margin-left:704px;} .offset12{margin-left:768px;}} diff --git a/docs/base-css.html b/docs/base-css.html index dad42381de..99fb9bd1a6 100644 --- a/docs/base-css.html +++ b/docs/base-css.html @@ -894,7 +894,7 @@ Form states <span class="add-on">@</span> <input class="input-small" id="prependedInput" name="prependedInput" size="16" type="text"> </div> - <span class="help-block">Here's some help text</span> + <p class="help-block">Here's some help text</p> </div> </fieldset> <fieldset class="control-group"> diff --git a/docs/components.html b/docs/components.html index c6a349ff49..fbfa9fb31e 100644 --- a/docs/components.html +++ b/docs/components.html @@ -716,7 +716,7 @@ <p><a class="btn js-btn" href="./javascript.html#modal">Get the javascript »</a></p> </div> <div class="span9"> - <div class="well" style="background-color: #888; border: none; padding: 40px;"> + <div class="well" style="background-color: #888; border: none; "> <!-- Modal --> <div class="modal" style="position: relative; top: auto; left: auto; margin: 0 auto; z-index: 1"> <div class="modal-header"> diff --git a/lib/forms.less b/lib/forms.less index 99d6fcb59d..9d96e8f33c 100644 --- a/lib/forms.less +++ b/lib/forms.less @@ -96,6 +96,7 @@ input[type=file] { // Chrome on Linux and Mobile Safari need background-color select { background-color: @white; + vertical-align: middle; } // Make multiple select elements height not fixed @@ -304,13 +305,10 @@ textarea[readonly] { // Allow us to put symbols and text within the input field for a cleaner look .input-prepend, .input-append { - overflow: hidden; input { .border-radius(0 3px 3px 0); } .add-on { - position: relative; - z-index: 2; float: left; display: block; width: auto; diff --git a/lib/modals.less b/lib/modals.less index 53d6cd4089..4d2b92cbcd 100644 --- a/lib/modals.less +++ b/lib/modals.less @@ -13,7 +13,8 @@ &.fade { opacity: 0; } } -.modal-backdrop, .modal-backdrop.fade.in { +.modal-backdrop, +.modal-backdrop.fade.in { .opacity(80); } diff --git a/lib/responsive.less b/lib/responsive.less index d8b453d06d..fe2b7cd49a 100644 --- a/lib/responsive.less +++ b/lib/responsive.less @@ -43,6 +43,18 @@ .horizontal-form .form-actions { padding-left: 0; } + + // Modals + .modal { + position: fixed; + top: 20px; + left: 20px; + right: 20px; + width: auto; + .close { + padding: 10px; + } + } } -- GitLab From 3426877c894b858d89e68c72bc300cd4f670c40f Mon Sep 17 00:00:00 2001 From: Mark Otto <markdotto@gmail.com> Date: Tue, 27 Dec 2011 15:51:36 -0600 Subject: [PATCH 166/318] add ie7 inline block mixin and add ability to center pagination --- bootstrap.css | 11 +++++++++-- bootstrap.min.css | 3 ++- lib/mixins.less | 6 ++++++ lib/pagination.less | 8 +++++++- 4 files changed, 24 insertions(+), 4 deletions(-) diff --git a/bootstrap.css b/bootstrap.css index 95dde47e84..51341e9023 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: Tue Dec 27 15:23:07 CST 2011 + * Date: Tue Dec 27 15:49:07 CST 2011 */ html, body { margin: 0; @@ -2211,7 +2211,11 @@ button.btn::-moz-focus-inner, input[type=submit].btn::-moz-focus-inner { margin: 18px 0; } .pagination ul { - float: left; + display: inline-block; + *display: inline; + /* IE7 inline-block hack */ + + *zoom: 1; margin: 0; border: 1px solid #ddd; border: 1px solid rgba(0, 0, 0, 0.15); @@ -2247,6 +2251,9 @@ button.btn::-moz-focus-inner, input[type=submit].btn::-moz-focus-inner { .pagination .next a { border: 0; } +.pagination.centered { + text-align: center; +} .modal-backdrop { position: fixed; top: 0; diff --git a/bootstrap.min.css b/bootstrap.min.css index aff1c43c2a..4c794c9e74 100644 --- a/bootstrap.min.css +++ b/bootstrap.min.css @@ -292,12 +292,13 @@ button.btn::-moz-focus-inner,input[type=submit].btn::-moz-focus-inner{padding:0; .breadcrumb{padding:7px 14px;margin:0 0 18px;background-color:#f5f5f5;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);background-repeat:repeat-x;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;} -.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{height:36px;margin:18px 0;}.pagination ul{display:inline-block;*display:inline;*zoom:1;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 li{display:inline;} .pagination a{float:left;padding:0 14px;line-height:34px;text-decoration:none;border-right:1px solid;border-right-color:#ddd;border-right-color:rgba(0, 0, 0, 0.15);*border-right-color:#ddd;} .pagination a:hover,.pagination .active a{background-color:#c7eefe;} .pagination .disabled a,.pagination .disabled a:hover{color:#bfbfbf;background-color:transparent;} .pagination .next a{border:0;} +.pagination.centered{text-align:center;} .modal-backdrop{position:fixed;top:0;right:0;bottom:0;left:0;z-index:10000;background-color:#000000;}.modal-backdrop.fade{opacity:0;} .modal-backdrop,.modal-backdrop.fade.in{filter:alpha(opacity=80);-moz-opacity:0.8;opacity:0.8;} .modal{position:fixed;top:50%;left:50%;z-index:11000;width:560px;margin:-250px 0 0 -250px;background-color:#ffffff;border:1px solid #999;border:1px solid rgba(0, 0, 0, 0.3);*border:1px solid #999;-webkit-border-radius:6px;-moz-border-radius:6px;border-radius:6px;-webkit-box-shadow:0 3px 7px rgba(0, 0, 0, 0.3);-moz-box-shadow:0 3px 7px rgba(0, 0, 0, 0.3);box-shadow:0 3px 7px rgba(0, 0, 0, 0.3);-webkit-background-clip:padding-box;-moz-background-clip:padding-box;background-clip:padding-box;}.modal .close{margin-top:7px;} diff --git a/lib/mixins.less b/lib/mixins.less index e8b5cdd2f5..58df9298a5 100644 --- a/lib/mixins.less +++ b/lib/mixins.less @@ -25,6 +25,12 @@ margin-right: auto; } +// IE7 inline-block +.ie7-inline-block() { + *display: inline; /* IE7 inline-block hack */ + *zoom: 1; +} + // Sizing shortcuts .size(@height: 5px, @width: 5px) { width: @width; diff --git a/lib/pagination.less b/lib/pagination.less index d82a0bbd07..f630511689 100644 --- a/lib/pagination.less +++ b/lib/pagination.less @@ -5,7 +5,8 @@ height: @baseLineHeight * 2; margin: @baseLineHeight 0; ul { - float: left; + display: inline-block; + .ie7-inline-block(); margin: 0; border: 1px solid #ddd; border: 1px solid rgba(0,0,0,.15); @@ -37,4 +38,9 @@ .next a { border: 0; } + + // Centered + &.centered { + text-align: center; + } } -- GitLab From 46d2ad5e221646807fb2bd71881860462988008e Mon Sep 17 00:00:00 2001 From: Mark Otto <markdotto@gmail.com> Date: Tue, 27 Dec 2011 16:08:07 -0600 Subject: [PATCH 167/318] allow select with size attr to not have fixed height --- bootstrap.css | 4 ++-- bootstrap.min.css | 2 +- lib/forms.less | 3 ++- 3 files changed, 5 insertions(+), 4 deletions(-) diff --git a/bootstrap.css b/bootstrap.css index 51341e9023..a1fcc1df62 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: Tue Dec 27 15:49:07 CST 2011 + * Date: Tue Dec 27 16:07:55 CST 2011 */ html, body { margin: 0; @@ -604,7 +604,7 @@ select { background-color: #ffffff; vertical-align: middle; } -select[multiple] { +select[multiple], select[size] { height: inherit; } input[type=image] { diff --git a/bootstrap.min.css b/bootstrap.min.css index 4c794c9e74..0be96084b2 100644 --- a/bootstrap.min.css +++ b/bootstrap.min.css @@ -101,7 +101,7 @@ input[type=file]{padding:initial;line-height:initial;border:initial;background-c input[type=button],input[type=reset],input[type=submit]{width:auto;height:auto;} select,input[type=file]{height:27px;*margin-top:4px;line-height:27px;} select{background-color:#ffffff;vertical-align:middle;} -select[multiple]{height:inherit;} +select[multiple],select[size]{height:inherit;} input[type=image]{-webkit-box-shadow:none;-moz-box-shadow:none;box-shadow:none;} textarea{height:auto;} input,textarea{-webkit-box-shadow:inset 0 1px 3px rgba(0, 0, 0, 0.1);-moz-box-shadow:inset 0 1px 3px rgba(0, 0, 0, 0.1);box-shadow:inset 0 1px 3px rgba(0, 0, 0, 0.1);-webkit-transition:border linear 0.2s,box-shadow linear 0.2s;-moz-transition:border linear 0.2s,box-shadow linear 0.2s;-ms-transition:border linear 0.2s,box-shadow linear 0.2s;-o-transition:border linear 0.2s,box-shadow linear 0.2s;transition:border linear 0.2s,box-shadow linear 0.2s;} diff --git a/lib/forms.less b/lib/forms.less index 9d96e8f33c..e9c392c763 100644 --- a/lib/forms.less +++ b/lib/forms.less @@ -100,7 +100,8 @@ select { } // Make multiple select elements height not fixed -select[multiple] { +select[multiple], +select[size] { height: inherit; } -- GitLab From e78d5f8ff33009e4c4ab57496913b43ff1e369dc Mon Sep 17 00:00:00 2001 From: Mark Otto <markdotto@gmail.com> Date: Tue, 27 Dec 2011 16:25:22 -0600 Subject: [PATCH 168/318] fix tables for rowspan --- bootstrap.css | 2 +- docs/base-css.html | 7 +++---- 2 files changed, 4 insertions(+), 5 deletions(-) diff --git a/bootstrap.css b/bootstrap.css index a1fcc1df62..2b870bfce4 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: Tue Dec 27 16:07:55 CST 2011 + * Date: Tue Dec 27 16:25:12 CST 2011 */ html, body { margin: 0; diff --git a/docs/base-css.html b/docs/base-css.html index 99fb9bd1a6..13cbeedbc2 100644 --- a/docs/base-css.html +++ b/docs/base-css.html @@ -646,25 +646,24 @@ <tr> <td>1</td> <td colspan="2">Some One</td> - <td>English</td> + <td>HTML</td> </tr> <tr> <td>2</td> <td>Joe</td> <td>Sixpack</td> - <td>English</td> + <td rowspan="2">Javascript</td> </tr> </tr> <td>3</td> <td>Joe</td> <td>Sixpack</td> - <td>English</td> </tr> <tr> <td>3</td> <td>Stu</td> <td>Dent</td> - <td>Code</td> + <td>CSS</td> </tr> </tbody> </table> -- GitLab From 550879cf666ec6445d1918604cb71c7202a52999 Mon Sep 17 00:00:00 2001 From: Mark Otto <markdotto@gmail.com> Date: Tue, 27 Dec 2011 16:50:27 -0600 Subject: [PATCH 169/318] fix quotes in font-family usage --- lib/mixins.less | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/lib/mixins.less b/lib/mixins.less index 58df9298a5..83a3a31f92 100644 --- a/lib/mixins.less +++ b/lib/mixins.less @@ -54,13 +54,13 @@ #font { #family { .serif() { - font-family: "Georgia", Times New Roman, Times, serif; + font-family: Georgia, "Times New Roman", Times, serif; } .sans-serif() { font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; } .monospace() { - font-family: "Menlo", Monaco, Courier New, monospace; + font-family: Menlo, Monaco, Courier New, monospace; } } .shorthand(@size: @baseFontSize, @weight: normal, @lineHeight: @baseLineHeight) { -- GitLab From 53c6dbff0d6dd781df421f07acdd9e98719b41bf Mon Sep 17 00:00:00 2001 From: Mark Otto <markdotto@gmail.com> Date: Tue, 27 Dec 2011 17:04:55 -0600 Subject: [PATCH 170/318] add appended input example to docs, fix help-text wrapping issue by clearing float --- bootstrap.css | 24 ++++++++++++++++++------ bootstrap.min.css | 7 ++++--- docs/base-css.html | 10 ++++++++++ lib/forms.less | 1 + lib/tables.less | 6 +----- 5 files changed, 34 insertions(+), 14 deletions(-) diff --git a/bootstrap.css b/bootstrap.css index 2b870bfce4..e83f46258c 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: Tue Dec 27 16:25:12 CST 2011 + * Date: Tue Dec 27 17:02:48 CST 2011 */ html, body { margin: 0; @@ -491,7 +491,7 @@ address { } code, pre { padding: 0 3px 2px; - font-family: "Menlo", Monaco, Courier New, monospace; + font-family: Menlo, Monaco, Courier New, monospace; font-size: 12px; color: #404040; -webkit-border-radius: 3px; @@ -905,6 +905,21 @@ textarea[readonly] { display: block; max-width: 600px; } +.input-prepend, .input-append { + zoom: 1; +} +.input-prepend:before, +.input-append:before, +.input-prepend:after, +.input-append:after { + display: table; + *display: inline; + content: ""; + zoom: 1; +} +.input-prepend:after, .input-append:after { + clear: both; +} .input-prepend input, .input-append input { -webkit-border-radius: 0 3px 3px 0; -moz-border-radius: 0 3px 3px 0; @@ -985,7 +1000,7 @@ th, td { padding: 8px; line-height: 18px; text-align: left; - border-bottom: 1px solid #ddd; + border-top: 1px solid #ddd; } th { font-weight: bold; @@ -994,9 +1009,6 @@ th { td { vertical-align: top; } -tbody tr:last-child th, tbody tr:last-child td { - border-bottom: 0; -} .condensed-table th, .condensed-table td { padding: 4px 5px; } diff --git a/bootstrap.min.css b/bootstrap.min.css index 0be96084b2..e2d7fccaa1 100644 --- a/bootstrap.min.css +++ b/bootstrap.min.css @@ -87,7 +87,7 @@ blockquote{padding-left:15px;margin-bottom:18px;border-left:5px solid #eee;}bloc blockquote small{display:block;line-height:18px;color:#bfbfbf;}blockquote small:before{content:'\2014 \00A0';} blockquote.pull-right{float:right;}blockquote.pull-right p,blockquote.pull-right small{text-align:right;} address{display:block;margin-bottom:18px;line-height:18px;} -code,pre{padding:0 3px 2px;font-family:"Menlo",Monaco,Courier New,monospace;font-size:12px;color:#404040;-webkit-border-radius:3px;-moz-border-radius:3px;border-radius:3px;} +code,pre{padding:0 3px 2px;font-family:Menlo, Monaco, Courier New, monospace;font-size:12px;color:#404040;-webkit-border-radius:3px;-moz-border-radius:3px;border-radius:3px;} code{padding:1px 3px;background-color:#fee9cc;} pre{display:block;padding:8.5px;margin:0 0 9px;font-size:12px;line-height:18px;background-color:#f5f5f5;border:1px solid #ccc;border:1px solid rgba(0, 0, 0, 0.15);-webkit-border-radius:3px;-moz-border-radius:3px;border-radius:3px;white-space:pre;white-space:pre-wrap;word-break:break-all;}pre.prettyprint{margin-bottom:18px;} pre code{padding:0;background-color:transparent;} @@ -146,6 +146,8 @@ input[disabled],select[disabled],textarea[disabled],input[readonly],select[reado .help-text{margin-top:5px;margin-bottom:0;color:#bfbfbf;} .help-inline{*position:relative;*top:-5px;display:inline;padding-left:5px;} .help-block{display:block;max-width:600px;} +.input-prepend,.input-append{zoom:1;}.input-prepend:before,.input-append:before,.input-prepend:after,.input-append:after{display:table;*display:inline;content:"";zoom:1;} +.input-prepend:after,.input-append:after{clear:both;} .input-prepend input,.input-append input{-webkit-border-radius:0 3px 3px 0;-moz-border-radius:0 3px 3px 0;border-radius:0 3px 3px 0;} .input-prepend .add-on,.input-append .add-on{float:left;display:block;width:auto;min-width:16px;height:18px;margin-right:-1px;padding:4px 4px 4px 5px;font-weight:normal;line-height:18px;color:#bfbfbf;text-align:center;text-shadow:0 1px 0 #ffffff;background-color:#f5f5f5;border:1px solid #ccc;-webkit-border-radius:3px 0 0 3px;-moz-border-radius:3px 0 0 3px;border-radius:3px 0 0 3px;} .input-prepend .active,.input-append .active{background-color:#a9dba9;border-color:#46a546;} @@ -160,10 +162,9 @@ input[disabled],select[disabled],textarea[disabled],input[readonly],select[reado .horizontal-form .control-list{padding-top:6px;} .horizontal-form .form-actions{padding-left:150px;} table{width:100%;margin-bottom:18px;} -th,td{padding:8px;line-height:18px;text-align:left;border-bottom:1px solid #ddd;} +th,td{padding:8px;line-height:18px;text-align:left;border-top:1px solid #ddd;} th{font-weight:bold;vertical-align:bottom;} td{vertical-align:top;} -tbody tr:last-child th,tbody tr:last-child td{border-bottom:0;} .condensed-table th,.condensed-table td{padding:4px 5px;} .bordered-table{border:1px solid #ddd;border-collapse:separate;-webkit-border-radius:4px;-moz-border-radius:4px;border-radius:4px;}.bordered-table th+th,.bordered-table td+td,.bordered-table th+td,.bordered-table td+th{border-left:1px solid #ddd;} .bordered-table thead:first-child tr:first-child th:first-child,.bordered-table tbody:first-child tr:first-child td:first-child{-webkit-border-radius:4px 0 0 0;-moz-border-radius:4px 0 0 0;border-radius:4px 0 0 0;} diff --git a/docs/base-css.html b/docs/base-css.html index 13cbeedbc2..2bc6f49fbb 100644 --- a/docs/base-css.html +++ b/docs/base-css.html @@ -896,6 +896,16 @@ Form states <p class="help-block">Here's some help text</p> </div> </fieldset> + <fieldset class="control-group"> + <label class="control-label" for="appendedInput">Appended text</label> + <div class="controls"> + <div class="input-append"> + <input class="input-small" id="appendedInput" name="appendedInput" size="16" type="text"> + <span class="add-on">.00</span> + </div> + <p class="help-block">Here's more help text</p> + </div> + </fieldset> <fieldset class="control-group"> <label class="control-label" for="select01">Select list</label> <div class="controls"> diff --git a/lib/forms.less b/lib/forms.less index e9c392c763..5293d780ab 100644 --- a/lib/forms.less +++ b/lib/forms.less @@ -306,6 +306,7 @@ textarea[readonly] { // Allow us to put symbols and text within the input field for a cleaner look .input-prepend, .input-append { + .clearfix(); // Clear the float to prevent wrapping input { .border-radius(0 3px 3px 0); } diff --git a/lib/tables.less b/lib/tables.less index 524f959f06..1643705620 100644 --- a/lib/tables.less +++ b/lib/tables.less @@ -17,7 +17,7 @@ td { padding: 8px; line-height: @baseLineHeight; text-align: left; - border-bottom: 1px solid #ddd; + border-top: 1px solid #ddd; } th { font-weight: bold; @@ -26,10 +26,6 @@ th { td { vertical-align: top; } -tbody tr:last-child th, -tbody tr:last-child td { - border-bottom: 0; -} // CONDENSED TABLE W/ HALF PADDING -- GitLab From 704d713aadbfcd27e39226cb0d1b2243d52dde0a Mon Sep 17 00:00:00 2001 From: Mark Otto <markdotto@gmail.com> Date: Tue, 27 Dec 2011 17:39:34 -0600 Subject: [PATCH 171/318] border radius on large button toolbar --- bootstrap.css | 19 ++++++++++++++++++- bootstrap.min.css | 2 ++ lib/patterns.less | 18 ++++++++++++++++++ 3 files changed, 38 insertions(+), 1 deletion(-) diff --git a/bootstrap.css b/bootstrap.css index e83f46258c..1d0a29b519 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: Tue Dec 27 17:02:48 CST 2011 + * Date: Tue Dec 27 17:38:27 CST 2011 */ html, body { margin: 0; @@ -1628,6 +1628,23 @@ button.btn::-moz-focus-inner, input[type=submit].btn::-moz-focus-inner { -moz-border-radius-bottomright: 4px; border-bottom-right-radius: 4px; } +.btn-group .btn.large:first-child { + margin-left: 0; + -webkit-border-top-left-radius: 6px; + -moz-border-radius-topleft: 6px; + border-top-left-radius: 6px; + -webkit-border-bottom-left-radius: 6px; + -moz-border-radius-bottomleft: 6px; + border-bottom-left-radius: 6px; +} +.btn-group .btn.large:last-child { + -webkit-border-top-right-radius: 6px; + -moz-border-radius-topright: 6px; + border-top-right-radius: 6px; + -webkit-border-bottom-right-radius: 6px; + -moz-border-radius-bottomright: 6px; + border-bottom-right-radius: 6px; +} .btn-group .btn:hover, .btn-group .btn:focus, .btn-group .btn:active { z-index: 2; } diff --git a/bootstrap.min.css b/bootstrap.min.css index e2d7fccaa1..51e652bb95 100644 --- a/bootstrap.min.css +++ b/bootstrap.min.css @@ -221,6 +221,8 @@ button.btn::-moz-focus-inner,input[type=submit].btn::-moz-focus-inner{padding:0; .btn-group:after{clear:both;} .btn-group .btn{position:relative;float:left;margin-left:-1px;-webkit-border-radius:0;-moz-border-radius:0;border-radius:0;}.btn-group .btn:first-child{margin-left:0;-webkit-border-top-left-radius:4px;-moz-border-radius-topleft:4px;border-top-left-radius:4px;-webkit-border-bottom-left-radius:4px;-moz-border-radius-bottomleft:4px;border-bottom-left-radius:4px;} .btn-group .btn:last-child{-webkit-border-top-right-radius:4px;-moz-border-radius-topright:4px;border-top-right-radius:4px;-webkit-border-bottom-right-radius:4px;-moz-border-radius-bottomright:4px;border-bottom-right-radius:4px;} +.btn-group .btn.large:first-child{margin-left:0;-webkit-border-top-left-radius:6px;-moz-border-radius-topleft:6px;border-top-left-radius:6px;-webkit-border-bottom-left-radius:6px;-moz-border-radius-bottomleft:6px;border-bottom-left-radius:6px;} +.btn-group .btn.large:last-child{-webkit-border-top-right-radius:6px;-moz-border-radius-topright:6px;border-top-right-radius:6px;-webkit-border-bottom-right-radius:6px;-moz-border-radius-bottomright:6px;border-bottom-right-radius:6px;} .btn-group .btn:hover,.btn-group .btn:focus,.btn-group .btn:active{z-index:2;} .close{float:right;font-size:20px;font-weight:bold;line-height:13.5px;color:#000000;text-shadow:0 1px 0 #ffffff;filter:alpha(opacity=20);-moz-opacity:0.2;opacity:0.2;}.close:hover{color:#000000;text-decoration:none;filter:alpha(opacity=40);-moz-opacity:0.4;opacity:0.4;} .alert-message{position:relative;padding:7px 15px;margin-bottom:18px;color:#404040;text-shadow:0 1px 0 rgba(255, 255, 255, 0.5);background-color:#eedc94;background-image:-khtml-gradient(linear, left top, left bottom, from(#fceec1), to(#eedc94));background-image:-moz-linear-gradient(top, #fceec1, #eedc94);background-image:-ms-linear-gradient(top, #fceec1, #eedc94);background-image:-webkit-gradient(linear, left top, left bottom, color-stop(0%, #fceec1), color-stop(100%, #eedc94));background-image:-webkit-linear-gradient(top, #fceec1, #eedc94);background-image:-o-linear-gradient(top, #fceec1, #eedc94);background-image:linear-gradient(top, #fceec1, #eedc94);background-repeat:repeat-x;filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#fceec1', endColorstr='#eedc94', GradientType=0);border-color:#eedc94 #eedc94 #e4c652;border-color:rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);border-width:1px;border-style:solid;-webkit-border-radius:4px;-moz-border-radius:4px;border-radius:4px;-webkit-box-shadow:inset 0 1px 0 rgba(255, 255, 255, 0.25);-moz-box-shadow:inset 0 1px 0 rgba(255, 255, 255, 0.25);box-shadow:inset 0 1px 0 rgba(255, 255, 255, 0.25);}.alert-message .close{*margin-top:3px;} diff --git a/lib/patterns.less b/lib/patterns.less index d48d65e48b..7c9ee7e48f 100644 --- a/lib/patterns.less +++ b/lib/patterns.less @@ -417,6 +417,24 @@ input[type=submit].btn { -moz-border-radius-bottomright: 4px; border-bottom-right-radius: 4px; } + // Reset corners for large buttons + &.large:first-child { + margin-left: 0; + -webkit-border-top-left-radius: 6px; + -moz-border-radius-topleft: 6px; + border-top-left-radius: 6px; + -webkit-border-bottom-left-radius: 6px; + -moz-border-radius-bottomleft: 6px; + border-bottom-left-radius: 6px; + } + &.large:last-child { + -webkit-border-top-right-radius: 6px; + -moz-border-radius-topright: 6px; + border-top-right-radius: 6px; + -webkit-border-bottom-right-radius: 6px; + -moz-border-radius-bottomright: 6px; + border-bottom-right-radius: 6px; + } } // On hover/focus/active, bring the proper btn to front .btn-group .btn:hover, -- GitLab From 553030ca7de8dac3c5180629ff84fa14173513ab Mon Sep 17 00:00:00 2001 From: Mark Otto <markdotto@gmail.com> Date: Fri, 30 Dec 2011 16:01:29 -0800 Subject: [PATCH 172/318] missing parantheses --- bootstrap.css | 2 +- lib/forms.less | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/bootstrap.css b/bootstrap.css index 1d0a29b519..8e2ce41f3b 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: Tue Dec 27 17:38:27 CST 2011 + * Date: Fri Dec 30 16:01:05 PST 2011 */ html, body { margin: 0; diff --git a/lib/forms.less b/lib/forms.less index 5293d780ab..ededc772ed 100644 --- a/lib/forms.less +++ b/lib/forms.less @@ -220,7 +220,7 @@ textarea[readonly] { border-color: @borderColor; &:focus { border-color: darken(@borderColor, 10%); - .box-shadow(0 0 6px lighten(@borderColor, 20%); + .box-shadow(0 0 6px lighten(@borderColor, 20%)); } } // Give a small background color for input-prepend/-append -- GitLab From 2d092dfeea969d82bc55a153c6a597a3e87a0a03 Mon Sep 17 00:00:00 2001 From: Jacob Thornton <jacobthornton@gmail.com> Date: Mon, 2 Jan 2012 16:04:01 -0800 Subject: [PATCH 173/318] start playing with carousel stuff --- bootstrap.css | 10 +++++- bootstrap.min.css | 4 ++- docs/javascript.html | 66 +++++++++++++++++++++++++++++++++++++++- js/bootstrap-carousel.js | 21 +++++++++++-- lib/modals.less | 2 ++ lib/thumbnails.less | 8 +++++ 6 files changed, 106 insertions(+), 5 deletions(-) diff --git a/bootstrap.css b/bootstrap.css index 333d6f04c0..d906168cfa 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: Sat Dec 24 22:30:43 PST 2011 + * Date: Sun Dec 25 21:24:32 PST 2011 */ html, body { margin: 0; @@ -2385,6 +2385,8 @@ button.btn::-moz-focus-inner, input[type=submit].btn::-moz-focus-inner { top: 50%; left: 50%; z-index: 11000; + max-height: 500px; + overflow: auto; width: 560px; margin: -250px 0 0 -250px; background-color: #ffffff; @@ -2662,6 +2664,12 @@ a.thumbnail:hover { .thumbnail .caption { padding: 9px; } +.carousel .item { + display: none; +} +.carousel .active { + display: block; +} .hidden { display: none; visibility: hidden; diff --git a/bootstrap.min.css b/bootstrap.min.css index db5e4206d8..4036f46450 100644 --- a/bootstrap.min.css +++ b/bootstrap.min.css @@ -312,7 +312,7 @@ button.btn::-moz-focus-inner,input[type=submit].btn::-moz-focus-inner{padding:0; .pagination .next a{border:0;} .modal-backdrop{position:fixed;top:0;right:0;bottom:0;left:0;z-index:10000;background-color:#000000;}.modal-backdrop.fade{opacity:0;} .modal-backdrop,.modal-backdrop.fade.in{filter:alpha(opacity=80);-moz-opacity:0.8;opacity:0.8;} -.modal{position:fixed;top:50%;left:50%;z-index:11000;width:560px;margin:-250px 0 0 -250px;background-color:#ffffff;border:1px solid #999;border:1px solid rgba(0, 0, 0, 0.3);*border:1px solid #999;-webkit-border-radius:6px;-moz-border-radius:6px;border-radius:6px;-webkit-box-shadow:0 3px 7px rgba(0, 0, 0, 0.3);-moz-box-shadow:0 3px 7px rgba(0, 0, 0, 0.3);box-shadow:0 3px 7px rgba(0, 0, 0, 0.3);-webkit-background-clip:padding-box;-moz-background-clip:padding-box;background-clip:padding-box;}.modal .close{margin-top:7px;} +.modal{position:fixed;top:50%;left:50%;z-index:11000;max-height:500px;overflow:auto;width:560px;margin:-250px 0 0 -250px;background-color:#ffffff;border:1px solid #999;border:1px solid rgba(0, 0, 0, 0.3);*border:1px solid #999;-webkit-border-radius:6px;-moz-border-radius:6px;border-radius:6px;-webkit-box-shadow:0 3px 7px rgba(0, 0, 0, 0.3);-moz-box-shadow:0 3px 7px rgba(0, 0, 0, 0.3);box-shadow:0 3px 7px rgba(0, 0, 0, 0.3);-webkit-background-clip:padding-box;-moz-background-clip:padding-box;background-clip:padding-box;}.modal .close{margin-top:7px;} .modal.fade{-webkit-transition:opacity .3s linear, top .3s ease-out;-moz-transition:opacity .3s linear, top .3s ease-out;-ms-transition:opacity .3s linear, top .3s ease-out;-o-transition:opacity .3s linear, top .3s ease-out;transition:opacity .3s linear, top .3s ease-out;top:-25%;} .modal.fade.in{top:50%;} .modal-header{padding:5px 15px;border-bottom:1px solid #eee;} @@ -350,5 +350,7 @@ button.btn::-moz-focus-inner,input[type=submit].btn::-moz-focus-inner{padding:0; a.thumbnail:hover{border-color:#0069d6;-webkit-box-shadow:0 1px 4px rgba(0, 105, 214, 0.25);-moz-box-shadow:0 1px 4px rgba(0, 105, 214, 0.25);box-shadow:0 1px 4px rgba(0, 105, 214, 0.25);} .thumbnail>img{display:block;max-width:100%;} .thumbnail .caption{padding:9px;} +.carousel .item{display:none;} +.carousel .active{display:block;} .hidden{display:none;visibility:hidden;} @media (max-width: 480px){.modal{width:auto;margin:0;} .horizontal-form .control-group>label{float:none;width:auto;padding-top:0;text-align:left;} .horizontal-form .controls{margin-left:0;} .horizontal-form .control-list{padding-top:0;} .horizontal-form .form-actions{padding-left:0;}}@media (max-width: 768px){.container{width:auto;padding:0 20px;} .row{margin-left:0;} [class*="span"]{float:none;display:block;width:auto;margin:0;} .nav{position:absolute;top:0;left:0;width:180px;padding-top:40px;list-style:none;} .nav,.nav>li:last-child a{-webkit-border-radius:0 0 4px 0;-moz-border-radius:0 0 4px 0;border-radius:0 0 4px 0;} .nav>li{float:none;display:none;} .nav>li>a{float:none;background-color:#222;} .nav>.active{display:block;position:absolute;top:0;left:0;} .navbar ul .active>a{background-color:transparent;} .nav>.active a:after{display:inline-block;width:0;height:0;margin-top:8px;margin-left:6px;text-indent:-99999px;vertical-align:top;border-left:4px solid transparent;border-right:4px solid transparent;border-top:4px solid #ffffff;filter:alpha(opacity=100);-moz-opacity:1;opacity:1;content:"↓";} .nav>.active a:hover{background-color:rgba(255, 255, 255, 0.05);}}@media (min-width: 768px) and (max-width: 940px){.container{width:748px;} .span1{width:44px;} .span2{width:108px;} .span3{width:172px;} .span4{width:236px;} .span5{width:300px;} .span6{width:364px;} .span7{width:428px;} .span8{width:492px;} .span9{width:556px;} .span10{width:620px;} .span11{width:684px;} .span12{width:748px;} .offset1{margin-left:64px;} .offset2{margin-left:128px;} .offset3{margin-left:192px;} .offset4{margin-left:256px;} .offset5{margin-left:320px;} .offset6{margin-left:384px;} .offset7{margin-left:448px;} .offset8{margin-left:512px;} .offset9{margin-left:576px;} .offset10{margin-left:640px;} .offset11{margin-left:704px;} .offset12{margin-left:768px;}} diff --git a/docs/javascript.html b/docs/javascript.html index d5aebbacdc..8e5e22adba 100644 --- a/docs/javascript.html +++ b/docs/javascript.html @@ -117,6 +117,10 @@ <td><a href="./javascript.html#collapse">bootstrap-collapse.js</a></td> <td>The collapse plugin offers simple, generic collapsible element support for making accordions and other collapsible ui components.</td> </tr> + <tr> + <td><a href="./javascript.html#collapse">bootstrap-carousel.js</a></td> + <td>Carousel add</td> + </tr> </tbody> </table> <h3>Is javascript necessary?</h3> @@ -1002,6 +1006,61 @@ $('#myCollapsible').on('hidden', function () { </div> </section> + <!-- Carousel + ================================================== --> + + <section id="carousel"> + <div class="page-header"> + <h1>Carousel <small>bootstrap-carousel.js</small></h1> + </div> + <div class="row"> + <div class="span3 columns"> + <p>The carousel plugin creates a carousel douh..</p> + <a href="../js/bootstrap-carousel.js" target="_blank" class="btn primary">Download</a> + </div> + <div class="span9 columns"> + <h3>Using bootstrap-carousel.js</h3> + <pre class="prettyprint linenums">$('.carousel').carousel()</pre> + <h3>Markup</h3> + <p>Data attributes are integral to the carousel plugin. Check out the example code below for the various markup types.</p> + <pre class="prettyprint linenums"></pre> + <h3>Demo</h3> + + <!-- carousel --> + <div class="thumbnail carousel"> + + <div class="item active"> + <img src="http://placehold.it/1100x350" alt=""> + <div class="caption"> + <h5>Thumbnail label</h5> + <p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p> + </div> + </div> + + <div class="item active"> + <img src="http://placehold.it/1100x350" alt=""> + <div class="caption"> + <h5>Thumbnail label</h5> + <p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p> + </div> + </div> + + <div class="item"> + <img src="http://placehold.it/1100x350" alt=""> + <div class="caption"> + <h5>Thumbnail label</h5> + <p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p> + </div> + </div> + + </div> + + + + </div> + </div> + </section> + <!-- Footer ================================================== --> <footer class="footer"> @@ -1028,6 +1087,7 @@ $('#myCollapsible').on('hidden', function () { <script src="../js/bootstrap-popover.js"></script> <script src="../js/bootstrap-button.js"></script> <script src="../js/bootstrap-collapse.js"></script> + <script src="../js/bootstrap-carousel.js"></script> <script src="assets/js/application.js"></script> <script> $(function () { @@ -1036,13 +1096,14 @@ $('#myCollapsible').on('hidden', function () { selector: "a[rel=twipsy]" }) - //popover demo + // popover demo $("a[rel=popover]") .popover() .click(function(e) { e.preventDefault() }) + // button state demo $('#fat-btn') .click(function () { var btn = $(this) @@ -1051,6 +1112,9 @@ $('#myCollapsible').on('hidden', function () { btn.button('reset') }, 3000) }) + + // carousel demo + $('.carousel').carousel() }) </script> </body> diff --git a/js/bootstrap-carousel.js b/js/bootstrap-carousel.js index ed4b8f3fac..2e1fde11a2 100644 --- a/js/bootstrap-carousel.js +++ b/js/bootstrap-carousel.js @@ -25,12 +25,29 @@ /* CAROUSEL CLASS DEFINITION * ========================= */ - var Carousel = function () { - + var Carousel = function (element) { + this.$element = $(element) + this.cycle() } Carousel.prototype = { + cycle: function () { + this.interval = setInterval($.proxy(this.right, this), 500) + } + + , pause: function () { + clearInterval(this.interval) + } + + , right: function () { + + } + + , left: function () { + + } + } diff --git a/lib/modals.less b/lib/modals.less index 53d6cd4089..ec1607c511 100644 --- a/lib/modals.less +++ b/lib/modals.less @@ -22,6 +22,8 @@ top: 50%; left: 50%; z-index: 11000; + max-height: 500px; + overflow: auto; width: 560px; margin: -250px 0 0 -250px; background-color: @white; diff --git a/lib/thumbnails.less b/lib/thumbnails.less index 9e25f50272..ae2e6c94e9 100644 --- a/lib/thumbnails.less +++ b/lib/thumbnails.less @@ -32,3 +32,11 @@ a.thumbnail:hover { .thumbnail .caption { padding: 9px; } + +.carousel .item { + display: none; +} + +.carousel .active { + display: block; +} \ No newline at end of file -- GitLab From 0c3bf7275cfe0757c876be6ba6f01cad31375923 Mon Sep 17 00:00:00 2001 From: Jacob Thornton <jacobthornton@gmail.com> Date: Mon, 2 Jan 2012 16:05:14 -0800 Subject: [PATCH 174/318] add quotes to courier new --- lib/mixins.less | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/lib/mixins.less b/lib/mixins.less index 83a3a31f92..32d3a83acc 100644 --- a/lib/mixins.less +++ b/lib/mixins.less @@ -60,7 +60,7 @@ font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; } .monospace() { - font-family: Menlo, Monaco, Courier New, monospace; + font-family: Menlo, Monaco, "Courier New", monospace; } } .shorthand(@size: @baseFontSize, @weight: normal, @lineHeight: @baseLineHeight) { -- GitLab From 8b58a1c3d9fea740c89f48c1771a6c7dd44e1f41 Mon Sep 17 00:00:00 2001 From: Jacob Thornton <jacobthornton@gmail.com> Date: Mon, 2 Jan 2012 19:13:02 -0800 Subject: [PATCH 175/318] placeholder design for carousel --- bootstrap.css | 28 ++++++++++++++++++++++++++-- bootstrap.min.css | 6 ++++-- docs/javascript.html | 43 +++++++++++++++++++++++++++++++++++-------- lib/thumbnails.less | 26 +++++++++++++++++++++----- 4 files changed, 86 insertions(+), 17 deletions(-) diff --git a/bootstrap.css b/bootstrap.css index 601c1875b9..ae1754aa65 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: Mon Jan 2 16:04:30 PST 2012 + * Date: Mon Jan 2 19:12:52 PST 2012 */ html, body { margin: 0; @@ -491,7 +491,7 @@ address { } code, pre { padding: 0 3px 2px; - font-family: Menlo, Monaco, Courier New, monospace; + font-family: Menlo, Monaco, "Courier New", monospace; font-size: 12px; color: #404040; -webkit-border-radius: 3px; @@ -2584,12 +2584,36 @@ a.thumbnail:hover { .thumbnail .caption { padding: 9px; } +.carousel { + position: relative; +} .carousel .item { display: none; } .carousel .active { display: block; } +.carousel .nav { + height: 50px; + position: absolute; + top: 50%; + margin: -25px 0 0; + cursor: pointer; + background: rgba(0, 0, 0, 0.7); + color: white; + font-size: 42px; + left: 5px; + font-weight: 100; + padding: 0 15px; +} +.carousel .nav.right { + right: 5px; + left: auto; +} +.carousel .nav:hover { + text-decoration: none; + background: rgba(0, 0, 0, 0.8); +} .hidden { display: none; visibility: hidden; diff --git a/bootstrap.min.css b/bootstrap.min.css index b3e5a3eefe..2272502263 100644 --- a/bootstrap.min.css +++ b/bootstrap.min.css @@ -87,7 +87,7 @@ blockquote{padding-left:15px;margin-bottom:18px;border-left:5px solid #eee;}bloc blockquote small{display:block;line-height:18px;color:#bfbfbf;}blockquote small:before{content:'\2014 \00A0';} blockquote.pull-right{float:right;}blockquote.pull-right p,blockquote.pull-right small{text-align:right;} address{display:block;margin-bottom:18px;line-height:18px;} -code,pre{padding:0 3px 2px;font-family:Menlo, Monaco, Courier New, monospace;font-size:12px;color:#404040;-webkit-border-radius:3px;-moz-border-radius:3px;border-radius:3px;} +code,pre{padding:0 3px 2px;font-family:Menlo,Monaco,"Courier New",monospace;font-size:12px;color:#404040;-webkit-border-radius:3px;-moz-border-radius:3px;border-radius:3px;} code{padding:1px 3px;background-color:#fee9cc;} pre{display:block;padding:8.5px;margin:0 0 9px;font-size:12px;line-height:18px;background-color:#f5f5f5;border:1px solid #ccc;border:1px solid rgba(0, 0, 0, 0.15);-webkit-border-radius:3px;-moz-border-radius:3px;border-radius:3px;white-space:pre;white-space:pre-wrap;word-break:break-all;}pre.prettyprint{margin-bottom:18px;} pre code{padding:0;background-color:transparent;} @@ -342,7 +342,9 @@ button.btn::-moz-focus-inner,input[type=submit].btn::-moz-focus-inner{padding:0; a.thumbnail:hover{border-color:#0069d6;-webkit-box-shadow:0 1px 4px rgba(0, 105, 214, 0.25);-moz-box-shadow:0 1px 4px rgba(0, 105, 214, 0.25);box-shadow:0 1px 4px rgba(0, 105, 214, 0.25);} .thumbnail>img{display:block;max-width:100%;} .thumbnail .caption{padding:9px;} -.carousel .item{display:none;} +.carousel{position:relative;}.carousel .item{display:none;} .carousel .active{display:block;} +.carousel .nav{height:50px;position:absolute;top:50%;margin:-25px 0 0;cursor:pointer;background:rgba(0, 0, 0, 0.7);color:white;font-size:42px;left:5px;font-weight:100;padding:0 15px;}.carousel .nav.right{right:5px;left:auto;} +.carousel .nav:hover{text-decoration:none;background:rgba(0, 0, 0, 0.8);} .hidden{display:none;visibility:hidden;} @media (max-width: 480px){.modal{width:auto;margin:0;} .horizontal-form .control-group>label{float:none;width:auto;padding-top:0;text-align:left;} .horizontal-form .controls{margin-left:0;} .horizontal-form .control-list{padding-top:0;} .horizontal-form .form-actions{padding-left:0;} .modal{position:fixed;top:20px;left:20px;right:20px;width:auto;}.modal .close{padding:10px;}}@media (max-width: 768px){.container{width:auto;padding:0 20px;} .row{margin-left:0;} .row>[class*="span"]{float:none;display:block;width:auto;margin:0;} .nav{position:absolute;top:0;left:0;width:180px;padding-top:40px;list-style:none;} .nav,.nav>li:last-child a{-webkit-border-radius:0 0 4px 0;-moz-border-radius:0 0 4px 0;border-radius:0 0 4px 0;} .nav>li{float:none;display:none;} .nav>li>a{float:none;background-color:#222;} .nav>.active{display:block;position:absolute;top:0;left:0;} .navbar ul .active>a{background-color:transparent;} .nav>.active a:after{display:inline-block;width:0;height:0;margin-top:8px;margin-left:6px;text-indent:-99999px;vertical-align:top;border-left:4px solid transparent;border-right:4px solid transparent;border-top:4px solid #ffffff;filter:alpha(opacity=100);-moz-opacity:1;opacity:1;content:"↓";} .nav>.active a:hover{background-color:rgba(255, 255, 255, 0.05);}}@media (min-width: 768px) and (max-width: 940px){.container{width:748px;} .span1{width:44px;} .span2{width:108px;} .span3{width:172px;} .span4{width:236px;} .span5{width:300px;} .span6{width:364px;} .span7{width:428px;} .span8{width:492px;} .span9{width:556px;} .span10{width:620px;} .span11{width:684px;} .span12{width:748px;} .offset1{margin-left:64px;} .offset2{margin-left:128px;} .offset3{margin-left:192px;} .offset4{margin-left:256px;} .offset5{margin-left:320px;} .offset6{margin-left:384px;} .offset7{margin-left:448px;} .offset8{margin-left:512px;} .offset9{margin-left:576px;} .offset10{margin-left:640px;} .offset11{margin-left:704px;} .offset12{margin-left:768px;}} diff --git a/docs/javascript.html b/docs/javascript.html index 8e5e22adba..ae464e849e 100644 --- a/docs/javascript.html +++ b/docs/javascript.html @@ -118,8 +118,8 @@ <td>The collapse plugin offers simple, generic collapsible element support for making accordions and other collapsible ui components.</td> </tr> <tr> - <td><a href="./javascript.html#collapse">bootstrap-carousel.js</a></td> - <td>Carousel add</td> + <td><a href="./javascript.html#carousel">bootstrap-carousel.js</a></td> + <td>A plugin for rotating through elements. A merry-go-round.</td> </tr> </tbody> </table> @@ -1015,7 +1015,7 @@ $('#myCollapsible').on('hidden', function () { </div> <div class="row"> <div class="span3 columns"> - <p>The carousel plugin creates a carousel douh..</p> + <p>A generic plugin for cycling through elements. A merry-go-round.</p> <a href="../js/bootstrap-carousel.js" target="_blank" class="btn primary">Download</a> </div> <div class="span9 columns"> @@ -1023,11 +1023,40 @@ $('#myCollapsible').on('hidden', function () { <pre class="prettyprint linenums">$('.carousel').carousel()</pre> <h3>Markup</h3> <p>Data attributes are integral to the carousel plugin. Check out the example code below for the various markup types.</p> - <pre class="prettyprint linenums"></pre> +<pre class="prettyprint linenums"> +<div class="thumbnail carousel"> + + <!-- navigation --> + <a class="nav" href="#myCarousel" data-show="next">&lt;</a> + <a class="nav" href="#myCarousel" data-show="previous">&gt;</a> + + <!-- items --> + <div class="item active"> + <img src="http://placehold.it/1100x350"> + <div class="caption"> + <h5>Thumbnail label</h5> + <p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. </p> + </div> + </div> + + <div class="item"> + <img src="http://placehold.it/1100x350"> + <div class="caption"> + <h5>Thumbnail label</h5> + <p>Donec id elit non mi porta gravida at eget metus.</p> + </div> + </div> + +</div> +</pre> <h3>Demo</h3> <!-- carousel --> - <div class="thumbnail carousel"> + + <div id="myCarousel" class="thumbnail carousel"> + + <a class="left nav" href="#myCarousel" data-show="next">«</a> + <a class="right nav" href="#myCarousel" data-show="previous">»</a> <div class="item active"> <img src="http://placehold.it/1100x350" alt=""> @@ -1037,7 +1066,7 @@ $('#myCollapsible').on('hidden', function () { </div> </div> - <div class="item active"> + <div class="item"> <img src="http://placehold.it/1100x350" alt=""> <div class="caption"> <h5>Thumbnail label</h5> @@ -1055,8 +1084,6 @@ $('#myCollapsible').on('hidden', function () { </div> - - </div> </div> </section> diff --git a/lib/thumbnails.less b/lib/thumbnails.less index ae2e6c94e9..181cca6817 100644 --- a/lib/thumbnails.less +++ b/lib/thumbnails.less @@ -33,10 +33,26 @@ a.thumbnail:hover { padding: 9px; } -.carousel .item { - display: none; -} +// carousel +.carousel { + position: relative; -.carousel .active { - display: block; + .item { display: none; } + .active { display: block; } + + .nav { + height: 50px; + position: absolute; + top: 50%; + margin: -25px 0 0; + cursor: pointer; + background: rgba(0, 0, 0, 0.7); + color: white; + font-size: 42px; + left: 5px; + font-weight: 100; + padding: 0 15px; + &.right { right: 5px; left: auto; } + &:hover { text-decoration: none; background: rgba(0, 0, 0, 0.8); } + } } \ No newline at end of file -- GitLab From 3fb6f6ee8670acff0c681c621b87a06a087f94be Mon Sep 17 00:00:00 2001 From: Jacob Thornton <jacobthornton@gmail.com> Date: Mon, 2 Jan 2012 22:30:57 -0800 Subject: [PATCH 176/318] basic carousel implementation --- bootstrap.css | 39 +++++++++++++++++++- bootstrap.min.css | 13 +++++-- docs/javascript.html | 79 ++++++++++++++++++++-------------------- js/bootstrap-carousel.js | 48 +++++++++++++++++++++--- lib/thumbnails.less | 32 ++++++++++++++-- 5 files changed, 158 insertions(+), 53 deletions(-) diff --git a/bootstrap.css b/bootstrap.css index ae1754aa65..b4fd7e7487 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: Mon Jan 2 19:12:52 PST 2012 + * Date: Mon Jan 2 22:30:09 PST 2012 */ html, body { margin: 0; @@ -2587,13 +2587,48 @@ a.thumbnail:hover { .carousel { position: relative; } +.carousel .carousel-inner { + overflow: hidden; + width: 100%; + position: relative; +} .carousel .item { display: none; + position: relative; + -webkit-transition: 0.25s linear left; + -moz-transition: 0.25s linear left; + -ms-transition: 0.25s linear left; + -o-transition: 0.25s linear left; + transition: 0.25s linear left; } -.carousel .active { +.carousel .active, .carousel .next, .carousel .prev { display: block; } +.carousel .next, .carousel .prev { + position: absolute; + top: 0; + width: 100%; +} +.carousel .next { + left: 100%; +} +.carousel .prev { + left: -100%; +} +.carousel .next.left, .carousel .prev.right { + left: 0%; +} +.carousel .active.left { + left: -100%; +} +.carousel .active.right { + left: 100%; +} .carousel .nav { + width: auto; + -webkit-border-radius: 0; + -moz-border-radius: 0; + border-radius: 0; height: 50px; position: absolute; top: 50%; diff --git a/bootstrap.min.css b/bootstrap.min.css index 2272502263..49e9686839 100644 --- a/bootstrap.min.css +++ b/bootstrap.min.css @@ -342,9 +342,16 @@ button.btn::-moz-focus-inner,input[type=submit].btn::-moz-focus-inner{padding:0; a.thumbnail:hover{border-color:#0069d6;-webkit-box-shadow:0 1px 4px rgba(0, 105, 214, 0.25);-moz-box-shadow:0 1px 4px rgba(0, 105, 214, 0.25);box-shadow:0 1px 4px rgba(0, 105, 214, 0.25);} .thumbnail>img{display:block;max-width:100%;} .thumbnail .caption{padding:9px;} -.carousel{position:relative;}.carousel .item{display:none;} -.carousel .active{display:block;} -.carousel .nav{height:50px;position:absolute;top:50%;margin:-25px 0 0;cursor:pointer;background:rgba(0, 0, 0, 0.7);color:white;font-size:42px;left:5px;font-weight:100;padding:0 15px;}.carousel .nav.right{right:5px;left:auto;} +.carousel{position:relative;}.carousel .carousel-inner{overflow:hidden;width:100%;position:relative;} +.carousel .item{display:none;position:relative;-webkit-transition:0.25s linear left;-moz-transition:0.25s linear left;-ms-transition:0.25s linear left;-o-transition:0.25s linear left;transition:0.25s linear left;} +.carousel .active,.carousel .next,.carousel .prev{display:block;} +.carousel .next,.carousel .prev{position:absolute;top:0;width:100%;} +.carousel .next{left:100%;} +.carousel .prev{left:-100%;} +.carousel .next.left,.carousel .prev.right{left:0%;} +.carousel .active.left{left:-100%;} +.carousel .active.right{left:100%;} +.carousel .nav{width:auto;-webkit-border-radius:0;-moz-border-radius:0;border-radius:0;height:50px;position:absolute;top:50%;margin:-25px 0 0;cursor:pointer;background:rgba(0, 0, 0, 0.7);color:white;font-size:42px;left:5px;font-weight:100;padding:0 15px;}.carousel .nav.right{right:5px;left:auto;} .carousel .nav:hover{text-decoration:none;background:rgba(0, 0, 0, 0.8);} .hidden{display:none;visibility:hidden;} @media (max-width: 480px){.modal{width:auto;margin:0;} .horizontal-form .control-group>label{float:none;width:auto;padding-top:0;text-align:left;} .horizontal-form .controls{margin-left:0;} .horizontal-form .control-list{padding-top:0;} .horizontal-form .form-actions{padding-left:0;} .modal{position:fixed;top:20px;left:20px;right:20px;width:auto;}.modal .close{padding:10px;}}@media (max-width: 768px){.container{width:auto;padding:0 20px;} .row{margin-left:0;} .row>[class*="span"]{float:none;display:block;width:auto;margin:0;} .nav{position:absolute;top:0;left:0;width:180px;padding-top:40px;list-style:none;} .nav,.nav>li:last-child a{-webkit-border-radius:0 0 4px 0;-moz-border-radius:0 0 4px 0;border-radius:0 0 4px 0;} .nav>li{float:none;display:none;} .nav>li>a{float:none;background-color:#222;} .nav>.active{display:block;position:absolute;top:0;left:0;} .navbar ul .active>a{background-color:transparent;} .nav>.active a:after{display:inline-block;width:0;height:0;margin-top:8px;margin-left:6px;text-indent:-99999px;vertical-align:top;border-left:4px solid transparent;border-right:4px solid transparent;border-top:4px solid #ffffff;filter:alpha(opacity=100);-moz-opacity:1;opacity:1;content:"↓";} .nav>.active a:hover{background-color:rgba(255, 255, 255, 0.05);}}@media (min-width: 768px) and (max-width: 940px){.container{width:748px;} .span1{width:44px;} .span2{width:108px;} .span3{width:172px;} .span4{width:236px;} .span5{width:300px;} .span6{width:364px;} .span7{width:428px;} .span8{width:492px;} .span9{width:556px;} .span10{width:620px;} .span11{width:684px;} .span12{width:748px;} .offset1{margin-left:64px;} .offset2{margin-left:128px;} .offset3{margin-left:192px;} .offset4{margin-left:256px;} .offset5{margin-left:320px;} .offset6{margin-left:384px;} .offset7{margin-left:448px;} .offset8{margin-left:512px;} .offset9{margin-left:576px;} .offset10{margin-left:640px;} .offset11{margin-left:704px;} .offset12{margin-left:768px;}} diff --git a/docs/javascript.html b/docs/javascript.html index ae464e849e..4d90dbcf1e 100644 --- a/docs/javascript.html +++ b/docs/javascript.html @@ -1026,62 +1026,66 @@ $('#myCollapsible').on('hidden', function () { <pre class="prettyprint linenums"> <div class="thumbnail carousel"> - <!-- navigation --> - <a class="nav" href="#myCarousel" data-show="next">&lt;</a> - <a class="nav" href="#myCarousel" data-show="previous">&gt;</a> - <!-- items --> - <div class="item active"> - <img src="http://placehold.it/1100x350"> - <div class="caption"> - <h5>Thumbnail label</h5> - <p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. </p> + <div class="carousel-inner"> + <div class="item active"> + <img src="http://placehold.it/1100x350"> + <div class="caption"> + <h5>Thumbnail label</h5> + <p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. </p> + </div> </div> - </div> - <div class="item"> - <img src="http://placehold.it/1100x350"> - <div class="caption"> - <h5>Thumbnail label</h5> - <p>Donec id elit non mi porta gravida at eget metus.</p> + <div class="item"> + <img src="http://placehold.it/1100x350"> + <div class="caption"> + <h5>Thumbnail label</h5> + <p>Donec id elit non mi porta gravida at eget metus.</p> + </div> </div> </div> + <!-- navigation --> + <a class="nav" href="#myCarousel" data-slide="next">&lt;</a> + <a class="nav" href="#myCarousel" data-slide="prev">&gt;</a> + </div> </pre> <h3>Demo</h3> <!-- carousel --> - <div id="myCarousel" class="thumbnail carousel"> + <div id="myCarousel" class="thumbnail carousel slide"> - <a class="left nav" href="#myCarousel" data-show="next">«</a> - <a class="right nav" href="#myCarousel" data-show="previous">»</a> - - <div class="item active"> - <img src="http://placehold.it/1100x350" alt=""> - <div class="caption"> - <h5>Thumbnail label</h5> - <p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p> + <div class="carousel-inner"> + <div class="item active"> + <img src="http://placehold.it/1100x400" alt=""> + <div class="caption"> + <h5>First Thumbnail label</h5> + <p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p> + </div> </div> - </div> - <div class="item"> - <img src="http://placehold.it/1100x350" alt=""> - <div class="caption"> - <h5>Thumbnail label</h5> - <p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p> + <div class="item"> + <img src="http://placehold.it/1100x400" alt=""> + <div class="caption"> + <h5>Second Thumbnail label</h5> + <p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p> + </div> </div> - </div> - <div class="item"> - <img src="http://placehold.it/1100x350" alt=""> - <div class="caption"> - <h5>Thumbnail label</h5> - <p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p> + <div class="item"> + <img src="http://placehold.it/1100x400" alt=""> + <div class="caption"> + <h5>Third Thumbnail label</h5> + <p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p> + </div> </div> </div> + <a class="left nav" href="#myCarousel" data-slide="prev">«</a> + <a class="right nav" href="#myCarousel" data-slide="next">»</a> + </div> </div> @@ -1139,9 +1143,6 @@ $('#myCollapsible').on('hidden', function () { btn.button('reset') }, 3000) }) - - // carousel demo - $('.carousel').carousel() }) </script> </body> diff --git a/js/bootstrap-carousel.js b/js/bootstrap-carousel.js index 2e1fde11a2..2099b372cb 100644 --- a/js/bootstrap-carousel.js +++ b/js/bootstrap-carousel.js @@ -27,25 +27,48 @@ var Carousel = function (element) { this.$element = $(element) - this.cycle() } Carousel.prototype = { cycle: function () { - this.interval = setInterval($.proxy(this.right, this), 500) + this.interval = setInterval($.proxy(this.next, this), 5000) } , pause: function () { clearInterval(this.interval) } - , right: function () { - + , next: function () { + this.slide('next') } - , left: function () { + , prev: function () { + this.slide('prev') + } + , slide: function (type) { + var $active = this.$element.find('.active') + , $next = $active[type]() + , direction = type == 'next' ? 'left' : 'right' + , fallback = type == 'next' ? 'first' : 'last' + , that = this + + $next = $next.length ? $next : this.$element.find('.item')[fallback]() + + if (!$.support.transition && this.$element.hasClass('slide')) { + $active.removeClass('active') + $next.addClass('active') + } else { + $next.addClass(type) + $next[0].offsetWidth // force reflow + $active.addClass(direction) + $next.addClass(direction) + this.$element.one($.support.transition.end, function () { + $next.removeClass([type, direction].join(' ')).addClass('active') + $active.removeClass(['active', direction].join(' ')) + }) + } } } @@ -59,10 +82,23 @@ var $this = $(this) , data = $this.data('carousel') if (!data) $this.data('carousel', (data = new Carousel(this))) - if (typeof option == 'string') data[option].call($this) + if (typeof option == 'string') data[option]() }) } $.fn.carousel.Constructor = Carousel + + /* CAROUSEL DATA-API + * ================= */ + + $(function () { + $('body').on('click.carousel.data-api', '[data-slide]', function ( e ) { + var $this = $(this) + , $target = $($this.attr('data-target') || $this.attr('href')) + + $target.carousel($this.attr('data-slide')) + }) + }) + }( window.jQuery ) \ No newline at end of file diff --git a/lib/thumbnails.less b/lib/thumbnails.less index 181cca6817..114d0f0c84 100644 --- a/lib/thumbnails.less +++ b/lib/thumbnails.less @@ -33,14 +33,40 @@ a.thumbnail:hover { padding: 9px; } -// carousel .carousel { + position: relative; - .item { display: none; } - .active { display: block; } + .carousel-inner { + overflow: hidden; + width: 100%; + position: relative; + } + + .item { + display: none; + position: relative; + .transition(.25s linear left); + } + + .active, .next, .prev { display: block; } + + .next, .prev { + position: absolute; + top: 0; + width: 100%; + } + + .next { left: 100%; } + .prev { left: -100%; } + .next.left, .prev.right { left: 0% } + + .active.left { left: -100% } + .active.right { left: 100% } .nav { + width: auto; + .border-radius(0); height: 50px; position: absolute; top: 50%; -- GitLab From f5bcfaec2c13eb3102ffc2890a69a7c2b725ff36 Mon Sep 17 00:00:00 2001 From: Jacob Thornton <jacobthornton@gmail.com> Date: Mon, 2 Jan 2012 22:33:49 -0800 Subject: [PATCH 177/318] ease-in-out slide transition --- bootstrap.css | 12 ++++++------ bootstrap.min.css | 2 +- lib/thumbnails.less | 2 +- 3 files changed, 8 insertions(+), 8 deletions(-) diff --git a/bootstrap.css b/bootstrap.css index b4fd7e7487..5413144e9d 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: Mon Jan 2 22:30:09 PST 2012 + * Date: Mon Jan 2 22:33:44 PST 2012 */ html, body { margin: 0; @@ -2595,11 +2595,11 @@ a.thumbnail:hover { .carousel .item { display: none; position: relative; - -webkit-transition: 0.25s linear left; - -moz-transition: 0.25s linear left; - -ms-transition: 0.25s linear left; - -o-transition: 0.25s linear left; - transition: 0.25s linear left; + -webkit-transition: 0.6s ease-in-out left; + -moz-transition: 0.6s ease-in-out left; + -ms-transition: 0.6s ease-in-out left; + -o-transition: 0.6s ease-in-out left; + transition: 0.6s ease-in-out left; } .carousel .active, .carousel .next, .carousel .prev { display: block; diff --git a/bootstrap.min.css b/bootstrap.min.css index 49e9686839..522de261ee 100644 --- a/bootstrap.min.css +++ b/bootstrap.min.css @@ -343,7 +343,7 @@ a.thumbnail:hover{border-color:#0069d6;-webkit-box-shadow:0 1px 4px rgba(0, 105, .thumbnail>img{display:block;max-width:100%;} .thumbnail .caption{padding:9px;} .carousel{position:relative;}.carousel .carousel-inner{overflow:hidden;width:100%;position:relative;} -.carousel .item{display:none;position:relative;-webkit-transition:0.25s linear left;-moz-transition:0.25s linear left;-ms-transition:0.25s linear left;-o-transition:0.25s linear left;transition:0.25s linear left;} +.carousel .item{display:none;position:relative;-webkit-transition:0.6s ease-in-out left;-moz-transition:0.6s ease-in-out left;-ms-transition:0.6s ease-in-out left;-o-transition:0.6s ease-in-out left;transition:0.6s ease-in-out left;} .carousel .active,.carousel .next,.carousel .prev{display:block;} .carousel .next,.carousel .prev{position:absolute;top:0;width:100%;} .carousel .next{left:100%;} diff --git a/lib/thumbnails.less b/lib/thumbnails.less index 114d0f0c84..6ac3cb51f1 100644 --- a/lib/thumbnails.less +++ b/lib/thumbnails.less @@ -46,7 +46,7 @@ a.thumbnail:hover { .item { display: none; position: relative; - .transition(.25s linear left); + .transition(.6s ease-in-out left); } .active, .next, .prev { display: block; } -- GitLab From e89618a47f768eddf47164f89176e172b5c2972d Mon Sep 17 00:00:00 2001 From: Jacob Thornton <jacobthornton@gmail.com> Date: Mon, 2 Jan 2012 22:55:51 -0800 Subject: [PATCH 178/318] clean up options implementation for carousel --- docs/javascript.html | 59 +++++++++++++++++++++++++++------------- js/bootstrap-carousel.js | 31 ++++++++++++++++----- 2 files changed, 64 insertions(+), 26 deletions(-) diff --git a/docs/javascript.html b/docs/javascript.html index 4d90dbcf1e..1cba7766f9 100644 --- a/docs/javascript.html +++ b/docs/javascript.html @@ -724,7 +724,7 @@ $('a[data-toggle="tab"]').on('shown', function (e) { <pre class="prettyprint linenums">$(".alert-message").alert('close')</pre> <h3>Events</h3> <p>Bootstrap's alert class exposes a few events for hooking into alert functionality. </p> - <table class="zebra-striped"> + <table class="bordered-table striped-table"> <thead> <tr> <th style="width: 150px;">Event</th> @@ -1021,29 +1021,32 @@ $('#myCollapsible').on('hidden', function () { <div class="span9 columns"> <h3>Using bootstrap-carousel.js</h3> <pre class="prettyprint linenums">$('.carousel').carousel()</pre> - <h3>Markup</h3> + <h3>Options</h3> + <table class="bordered-table striped-table"> + <thead> + <tr> + <th style="width: 100px;">Name</th> + <th style="width: 50px;">type</th> + <th style="width: 50px;">default</th> + <th>description</th> + </tr> + </thead> + <tbody> + <tr> + <td>interval</td> + <td>number</td> + <td>5000</td> + <td>The amount of type to delay between automatically cycling an item.</td> + </tr> + </tbody> + </table> + <h3>Markup</h3> <p>Data attributes are integral to the carousel plugin. Check out the example code below for the various markup types.</p> <pre class="prettyprint linenums"> <div class="thumbnail carousel"> <!-- items --> - <div class="carousel-inner"> - <div class="item active"> - <img src="http://placehold.it/1100x350"> - <div class="caption"> - <h5>Thumbnail label</h5> - <p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. </p> - </div> - </div> - - <div class="item"> - <img src="http://placehold.it/1100x350"> - <div class="caption"> - <h5>Thumbnail label</h5> - <p>Donec id elit non mi porta gravida at eget metus.</p> - </div> - </div> - </div> + <div class="carousel-inner">…</div> <!-- navigation --> <a class="nav" href="#myCarousel" data-slide="next">&lt;</a> @@ -1051,6 +1054,21 @@ $('#myCollapsible').on('hidden', function () { </div> </pre> +<h3>Methods</h3> +<h4>.carousel(options)</h4> +<p>Initializes the carousel with an optional options <code>object</code> and starts cycling through items.</p> +<pre class="prettyprint linenums"> +$('.myCarousel').carousel({ + interval: 2000 +})</pre> +<h4>.carousel('cycle')</h4> +<p>Cycles through the carousel items from left to right.</p> +<h4>.carousel('pause')</h4> +<p>Stops the carousel from cycling through items.</p> +<h4>.carousel('prev')</h4> +<p>Cycles to the previous item.</p> +<h4>.carousel('next')</h4> +<p>Cycles to the next item.</p> <h3>Demo</h3> <!-- carousel --> @@ -1143,6 +1161,9 @@ $('#myCollapsible').on('hidden', function () { btn.button('reset') }, 3000) }) + + // carousel demo + $('#myCarousel').carousel() }) </script> </body> diff --git a/js/bootstrap-carousel.js b/js/bootstrap-carousel.js index 2099b372cb..5e37b0f60e 100644 --- a/js/bootstrap-carousel.js +++ b/js/bootstrap-carousel.js @@ -25,35 +25,42 @@ /* CAROUSEL CLASS DEFINITION * ========================= */ - var Carousel = function (element) { + var Carousel = function (element, options) { this.$element = $(element) + this.options = $.extend({}, $.fn.carousel.defaults, options) + this.options.slide && this.slide(this.options.slide) } Carousel.prototype = { cycle: function () { this.interval = setInterval($.proxy(this.next, this), 5000) + return this } , pause: function () { clearInterval(this.interval) + return this } , next: function () { - this.slide('next') + return this.slide('next') } , prev: function () { - this.slide('prev') + return this.slide('prev') } , slide: function (type) { var $active = this.$element.find('.active') , $next = $active[type]() + , isCycling = this.interval , direction = type == 'next' ? 'left' : 'right' , fallback = type == 'next' ? 'first' : 'last' , that = this + isCycling && this.pause() + $next = $next.length ? $next : this.$element.find('.item')[fallback]() if (!$.support.transition && this.$element.hasClass('slide')) { @@ -69,6 +76,10 @@ $active.removeClass(['active', direction].join(' ')) }) } + + isCycling && this.cycle() + + return this } } @@ -81,11 +92,17 @@ return this.each(function () { var $this = $(this) , data = $this.data('carousel') - if (!data) $this.data('carousel', (data = new Carousel(this))) - if (typeof option == 'string') data[option]() + , options = typeof option == 'object' && option + if (!data) $this.data('carousel', (data = new Carousel(this, options))) + if (typeof option == 'string' || (option = options.slide)) data[option]() + else data.cycle() }) } + $.fn.carousel.defaults = { + interval: 5000 + } + $.fn.carousel.Constructor = Carousel @@ -96,8 +113,8 @@ $('body').on('click.carousel.data-api', '[data-slide]', function ( e ) { var $this = $(this) , $target = $($this.attr('data-target') || $this.attr('href')) - - $target.carousel($this.attr('data-slide')) + , options = !$target.data('modal') && $.extend({}, $target.data(), $this.data()) + $target.carousel(options) }) }) -- GitLab From 5661855be3da81f0a46bd99c7522a93f01706289 Mon Sep 17 00:00:00 2001 From: Jacob Thornton <jacobthornton@gmail.com> Date: Mon, 2 Jan 2012 22:57:04 -0800 Subject: [PATCH 179/318] actuall use interval option :P --- js/bootstrap-carousel.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/js/bootstrap-carousel.js b/js/bootstrap-carousel.js index 5e37b0f60e..fa5247c97e 100644 --- a/js/bootstrap-carousel.js +++ b/js/bootstrap-carousel.js @@ -34,7 +34,7 @@ Carousel.prototype = { cycle: function () { - this.interval = setInterval($.proxy(this.next, this), 5000) + this.interval = setInterval($.proxy(this.next, this), this.options.interval) return this } @@ -100,7 +100,7 @@ } $.fn.carousel.defaults = { - interval: 5000 + interval: 5000 } $.fn.carousel.Constructor = Carousel -- GitLab From fb9401b355366452d310d39f51224999da4daa82 Mon Sep 17 00:00:00 2001 From: Mark Otto <markdotto@gmail.com> Date: Thu, 5 Jan 2012 01:34:14 -0800 Subject: [PATCH 180/318] tweaks abound, updated prettify styles, new sidenav component started, sprite icons started --- bootstrap.css | 330 +++++++++++++++++- bootstrap.min.css | 102 +++++- docs/assets/css/docs.css | 18 + .../img/glyphicons-halflings-sprite.png | Bin 0 -> 9944 bytes .../js/google-code-prettify/prettify.css | 41 +-- docs/base-css.html | 152 ++++++++ docs/components.html | 32 ++ lib/bootstrap.less | 2 + lib/sidenav.less | 40 +++ lib/sprites.less | 118 +++++++ lib/tables.less | 5 + lib/type.less | 2 +- 12 files changed, 809 insertions(+), 33 deletions(-) create mode 100644 docs/assets/img/glyphicons-halflings-sprite.png create mode 100644 lib/sidenav.less create mode 100644 lib/sprites.less diff --git a/bootstrap.css b/bootstrap.css index 8e2ce41f3b..ade32d9ba5 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 Dec 30 16:01:05 PST 2011 + * Date: Thu Jan 5 01:33:17 PST 2012 */ html, body { margin: 0; @@ -401,7 +401,7 @@ h6 { text-transform: uppercase; } ul, ol { - margin: 0 0 9px 25px; + margin: 13px 0 14px 25px; } ul ul, ul ol, @@ -1025,6 +1025,9 @@ td { .bordered-table td + th { border-left: 1px solid #ddd; } +.bordered-table thead:first-child tr:first-child th, .bordered-table tbody:first-child tr:first-child td { + border-top: 0; +} .bordered-table thead:first-child tr:first-child th:first-child, .bordered-table tbody:first-child tr:first-child td:first-child { -webkit-border-radius: 4px 0 0 0; -moz-border-radius: 4px 0 0 0; @@ -1820,6 +1823,285 @@ button.btn::-moz-focus-inner, input[type=submit].btn::-moz-focus-inner { .label.notice { background-color: #62cffc; } +i { + background-image: url(docs/assets/img/glyphicons-halflings-sprite.png); + background-position: 0 0; + background-repeat: no-repeat; + display: inline-block; + vertical-align: text-top; + width: 14px; + height: 14px; +} +.glass { + background-position: 0 0; +} +.music { + background-position: -24px 0; +} +.search { + background-position: -48px 0; +} +.envelope { + background-position: -72px 0; +} +.heart { + background-position: -96px 0; +} +.star { + background-position: -120px 0; +} +.star-empty { + background-position: -144px 0; +} +.user { + background-position: -168px 0; +} +.film { + background-position: -192px 0; +} +.th-large { + background-position: -216px 0; +} +.th { + background-position: -240px 0; +} +.th-lines { + background-position: -264px 0; +} +.ok { + background-position: -288px 0; +} +.remove { + background-position: -312px 0; +} +.zoom-in { + background-position: -336px 0; +} +.zoom-out { + background-position: -360px 0; +} +.off { + background-position: -384px 0; +} +.signal { + background-position: -408px 0; +} +.cog { + background-position: -432px 0; +} +.trash { + background-position: -456px 0; +} +.home { + background-position: 0 -24px; +} +.file { + background-position: -24px -24px; +} +.time { + background-position: -48px -24px; +} +.road { + background-position: -72px -24px; +} +.download-alt { + background-position: -96px -24px; +} +.download { + background-position: -120px -24px; +} +.upload { + background-position: -144px -24px; +} +.inbox { + background-position: -168px -24px; +} +.play-circle { + background-position: -192px -24px; +} +.repeat { + background-position: -216px -24px; +} +.refresh { + background-position: -240px -24px; +} +.calendar { + background-position: -264px -24px; +} +.lock { + background-position: -288px -24px; +} +.flag { + background-position: -312px -24px; +} +.headphones { + background-position: -336px -24px; +} +.volume-off { + background-position: -360px -24px; +} +.volume-down { + background-position: -384px -24px; +} +.volume-up { + background-position: -408px -24px; +} +.qrcode { + background-position: -432px -24px; +} +.barcode { + background-position: -456px -24px; +} +.tag { + background-position: 0 -48px; +} +.tags { + background-position: -24px -48px; +} +.book { + background-position: -48px -48px; +} +.bookmark { + background-position: -72px -48px; +} +.print { + background-position: -96px -48px; +} +.camera { + background-position: -120px -48px; +} +.font { + background-position: -144px -48px; +} +.bold { + background-position: -168px -48px; +} +.italic { + background-position: -192px -48px; +} +.text-height { + background-position: -216px -48px; +} +.text-width { + background-position: -240px -48px; +} +.align-left { + background-position: -264px -48px; +} +.align-center { + background-position: -288px -48px; +} +.align-right { + background-position: -312px -48px; +} +.align-justify { + background-position: -336px -48px; +} +.list { + background-position: -360px -48px; +} +.indent-left { + background-position: -384px -48px; +} +.indent-right { + background-position: -408px -48px; +} +.facetime-video { + background-position: -432px -48px; +} +.picture { + background-position: -456px -48px; +} +.pencil { + background-position: 0 -72px; +} +.map-marker { + background-position: -24px -72px; +} +.adjust { + background-position: -48px -72px; +} +.tint { + background-position: -72px -72px; +} +.edit { + background-position: -96px -72px; +} +.share { + background-position: -120px -72px; +} +.check { + background-position: -144px -72px; +} +.move { + background-position: -168px -72px; +} +.step-backward { + background-position: -192px -72px; +} +.fast-backward { + background-position: -216px -72px; +} +.backward { + background-position: -240px -72px; +} +.play { + background-position: -264px -72px; +} +.pause { + background-position: -288px -72px; +} +.stop { + background-position: -312px -72px; +} +.forward { + background-position: -336px -72px; +} +.fast-forward { + background-position: -360px -72px; +} +.step-forward { + background-position: -384px -72px; +} +.eject { + background-position: -408px -72px; +} +.chevron-left { + background-position: -432px -72px; +} +.chevron-right { + background-position: -456px -72px; +} +.arrow-left { + background-position: -240px -96px; +} +.arrow-right { + background-position: -264px -96px; +} +.arrow-up { + background-position: -288px -96px; +} +.arrow-down { + background-position: -312px -96px; +} +.share { + background-position: -336px -96px; +} +.resize-full { + background-position: -360px -96px; +} +.resize-small { + background-position: -384px -96px; +} +.plus { + background-position: -408px -96px; +} +.minus { + background-position: -432px -96px; +} +.asterisk { + background-position: -456px -96px; +} .dropdown { position: relative; } @@ -2538,6 +2820,50 @@ button.btn::-moz-focus-inner, input[type=submit].btn::-moz-focus-inner { .popover .content p, .popover .content ul, .popover .content ol { margin-bottom: 0; } +.side-nav { + padding: 9px 0; +} +.side-nav .nav-label, .side-nav .nav-item { + display: block; + padding: 3px 16px; + text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5); +} +.side-nav .nav-label { + font-size: 11px; + line-height: 18px; + color: #404040; + text-transform: uppercase; +} +.side-nav .nav-group { + margin: 0 -1px; + list-style: none; +} +.side-nav .nav-item { + font-weight: bold; +} +.side-nav .nav-item i { + vertical-align: -2px; +} +.side-nav .nav-item:hover { + text-decoration: none; +} +.side-nav .active .nav-item { + color: #fff; + text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.3); + background-color: #aaaaaa; + background-image: -khtml-gradient(linear, left top, left bottom, from(#cccccc), to(#aaaaaa)); + background-image: -moz-linear-gradient(top, #cccccc, #aaaaaa); + background-image: -ms-linear-gradient(top, #cccccc, #aaaaaa); + background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #cccccc), color-stop(100%, #aaaaaa)); + background-image: -webkit-linear-gradient(top, #cccccc, #aaaaaa); + background-image: -o-linear-gradient(top, #cccccc, #aaaaaa); + background-image: linear-gradient(top, #cccccc, #aaaaaa); + background-repeat: repeat-x; + filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#cccccc', endColorstr='#aaaaaa', GradientType=0); + -webkit-box-shadow: inset 0 1px 0 rgba(0, 0, 0, 0.05), inset 0 -1px 0 rgba(0, 0, 0, 0.05); + -moz-box-shadow: inset 0 1px 0 rgba(0, 0, 0, 0.05), inset 0 -1px 0 rgba(0, 0, 0, 0.05); + box-shadow: inset 0 1px 0 rgba(0, 0, 0, 0.05), inset 0 -1px 0 rgba(0, 0, 0, 0.05); +} .thumbnails { margin-left: -20px; margin-bottom: 0; diff --git a/bootstrap.min.css b/bootstrap.min.css index 51e652bb95..65fd2649bc 100644 --- a/bootstrap.min.css +++ b/bootstrap.min.css @@ -69,7 +69,7 @@ h3{line-height:27px;font-size:18px;}h3 small{font-size:14px;} h4{font-size:16px;line-height:36px;}h4 small{font-size:12px;} h5{font-size:14px;line-height:18px;} h6{font-size:13px;line-height:18px;color:#bfbfbf;text-transform:uppercase;} -ul,ol{margin:0 0 9px 25px;} +ul,ol{margin:13px 0 14px 25px;} ul ul,ul ol,ol ol,ol ul{margin-bottom:0;} ul{list-style:disc;} ol{list-style:decimal;} @@ -167,6 +167,7 @@ th{font-weight:bold;vertical-align:bottom;} td{vertical-align:top;} .condensed-table th,.condensed-table td{padding:4px 5px;} .bordered-table{border:1px solid #ddd;border-collapse:separate;-webkit-border-radius:4px;-moz-border-radius:4px;border-radius:4px;}.bordered-table th+th,.bordered-table td+td,.bordered-table th+td,.bordered-table td+th{border-left:1px solid #ddd;} +.bordered-table thead:first-child tr:first-child th,.bordered-table tbody:first-child tr:first-child td{border-top:0;} .bordered-table thead:first-child tr:first-child th:first-child,.bordered-table tbody:first-child tr:first-child td:first-child{-webkit-border-radius:4px 0 0 0;-moz-border-radius:4px 0 0 0;border-radius:4px 0 0 0;} .bordered-table thead:first-child tr:first-child th:last-child,.bordered-table tbody:first-child tr:first-child td:last-child{-webkit-border-radius:0 4px 0 0;-moz-border-radius:0 4px 0 0;border-radius:0 4px 0 0;} .bordered-table thead:last-child tr:last-child th:first-child,.bordered-table tbody:last-child tr:last-child td:first-child{-webkit-border-radius:0 0 0 4px;-moz-border-radius:0 0 0 4px;border-radius:0 0 0 4px;} @@ -246,6 +247,97 @@ button.btn::-moz-focus-inner,input[type=submit].btn::-moz-focus-inner{padding:0; .label.warning{background-color:#f89406;} .label.success{background-color:#46a546;} .label.notice{background-color:#62cffc;} +i{background-image:url(docs/assets/img/glyphicons-halflings-sprite.png);background-position:0 0;background-repeat:no-repeat;display:inline-block;vertical-align:text-top;width:14px;height:14px;} +.glass{background-position:0 0;} +.music{background-position:-24px 0;} +.search{background-position:-48px 0;} +.envelope{background-position:-72px 0;} +.heart{background-position:-96px 0;} +.star{background-position:-120px 0;} +.star-empty{background-position:-144px 0;} +.user{background-position:-168px 0;} +.film{background-position:-192px 0;} +.th-large{background-position:-216px 0;} +.th{background-position:-240px 0;} +.th-lines{background-position:-264px 0;} +.ok{background-position:-288px 0;} +.remove{background-position:-312px 0;} +.zoom-in{background-position:-336px 0;} +.zoom-out{background-position:-360px 0;} +.off{background-position:-384px 0;} +.signal{background-position:-408px 0;} +.cog{background-position:-432px 0;} +.trash{background-position:-456px 0;} +.home{background-position:0 -24px;} +.file{background-position:-24px -24px;} +.time{background-position:-48px -24px;} +.road{background-position:-72px -24px;} +.download-alt{background-position:-96px -24px;} +.download{background-position:-120px -24px;} +.upload{background-position:-144px -24px;} +.inbox{background-position:-168px -24px;} +.play-circle{background-position:-192px -24px;} +.repeat{background-position:-216px -24px;} +.refresh{background-position:-240px -24px;} +.calendar{background-position:-264px -24px;} +.lock{background-position:-288px -24px;} +.flag{background-position:-312px -24px;} +.headphones{background-position:-336px -24px;} +.volume-off{background-position:-360px -24px;} +.volume-down{background-position:-384px -24px;} +.volume-up{background-position:-408px -24px;} +.qrcode{background-position:-432px -24px;} +.barcode{background-position:-456px -24px;} +.tag{background-position:0 -48px;} +.tags{background-position:-24px -48px;} +.book{background-position:-48px -48px;} +.bookmark{background-position:-72px -48px;} +.print{background-position:-96px -48px;} +.camera{background-position:-120px -48px;} +.font{background-position:-144px -48px;} +.bold{background-position:-168px -48px;} +.italic{background-position:-192px -48px;} +.text-height{background-position:-216px -48px;} +.text-width{background-position:-240px -48px;} +.align-left{background-position:-264px -48px;} +.align-center{background-position:-288px -48px;} +.align-right{background-position:-312px -48px;} +.align-justify{background-position:-336px -48px;} +.list{background-position:-360px -48px;} +.indent-left{background-position:-384px -48px;} +.indent-right{background-position:-408px -48px;} +.facetime-video{background-position:-432px -48px;} +.picture{background-position:-456px -48px;} +.pencil{background-position:0 -72px;} +.map-marker{background-position:-24px -72px;} +.adjust{background-position:-48px -72px;} +.tint{background-position:-72px -72px;} +.edit{background-position:-96px -72px;} +.share{background-position:-120px -72px;} +.check{background-position:-144px -72px;} +.move{background-position:-168px -72px;} +.step-backward{background-position:-192px -72px;} +.fast-backward{background-position:-216px -72px;} +.backward{background-position:-240px -72px;} +.play{background-position:-264px -72px;} +.pause{background-position:-288px -72px;} +.stop{background-position:-312px -72px;} +.forward{background-position:-336px -72px;} +.fast-forward{background-position:-360px -72px;} +.step-forward{background-position:-384px -72px;} +.eject{background-position:-408px -72px;} +.chevron-left{background-position:-432px -72px;} +.chevron-right{background-position:-456px -72px;} +.arrow-left{background-position:-240px -96px;} +.arrow-right{background-position:-264px -96px;} +.arrow-up{background-position:-288px -96px;} +.arrow-down{background-position:-312px -96px;} +.share{background-position:-336px -96px;} +.resize-full{background-position:-360px -96px;} +.resize-small{background-position:-384px -96px;} +.plus{background-position:-408px -96px;} +.minus{background-position:-432px -96px;} +.asterisk{background-position:-456px -96px;} .dropdown{position:relative;} .dropdown-toggle:after{display:inline-block;width:0;height:0;margin-top:8px;margin-left:6px;text-indent:-99999px;vertical-align:top;border-left:4px solid transparent;border-right:4px solid transparent;border-top:4px solid #ffffff;filter:alpha(opacity=30);-moz-opacity:0.3;opacity:0.3;content:"↓";} .dropdown:hover .dropdown-toggle:after{filter:alpha(opacity=100);-moz-opacity:1;opacity:1;} @@ -335,6 +427,14 @@ button.btn::-moz-focus-inner,input[type=submit].btn::-moz-focus-inner{padding:0; .popover .inner{padding:3px;width:280px;overflow:hidden;background-color:#000000;background-color:rgba(0, 0, 0, 0.8);-webkit-border-radius:6px;-moz-border-radius:6px;border-radius:6px;-webkit-box-shadow:0 3px 7px rgba(0, 0, 0, 0.3);-moz-box-shadow:0 3px 7px rgba(0, 0, 0, 0.3);box-shadow:0 3px 7px rgba(0, 0, 0, 0.3);} .popover .title{padding:9px 15px;line-height:1;background-color:#f5f5f5;border-bottom:1px solid #eee;-webkit-border-radius:3px 3px 0 0;-moz-border-radius:3px 3px 0 0;border-radius:3px 3px 0 0;} .popover .content{padding:14px;background-color:#ffffff;-webkit-border-radius:0 0 3px 3px;-moz-border-radius:0 0 3px 3px;border-radius:0 0 3px 3px;-webkit-background-clip:padding-box;-moz-background-clip:padding-box;background-clip:padding-box;}.popover .content p,.popover .content ul,.popover .content ol{margin-bottom:0;} +.side-nav{padding:9px 0;} +.side-nav .nav-label,.side-nav .nav-item{display:block;padding:3px 16px;text-shadow:0 1px 0 rgba(255, 255, 255, 0.5);} +.side-nav .nav-label{font-size:11px;line-height:18px;color:#404040;text-transform:uppercase;} +.side-nav .nav-group{margin:0 -1px;list-style:none;} +.side-nav .nav-item{font-weight:bold;} +.side-nav .nav-item i{vertical-align:-2px;} +.side-nav .nav-item:hover{text-decoration:none;} +.side-nav .active .nav-item{color:#fff;text-shadow:0 -1px 0 rgba(0, 0, 0, 0.3);background-color:#aaaaaa;background-image:-khtml-gradient(linear, left top, left bottom, from(#cccccc), to(#aaaaaa));background-image:-moz-linear-gradient(top, #cccccc, #aaaaaa);background-image:-ms-linear-gradient(top, #cccccc, #aaaaaa);background-image:-webkit-gradient(linear, left top, left bottom, color-stop(0%, #cccccc), color-stop(100%, #aaaaaa));background-image:-webkit-linear-gradient(top, #cccccc, #aaaaaa);background-image:-o-linear-gradient(top, #cccccc, #aaaaaa);background-image:linear-gradient(top, #cccccc, #aaaaaa);background-repeat:repeat-x;filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#cccccc', endColorstr='#aaaaaa', GradientType=0);-webkit-box-shadow:inset 0 1px 0 rgba(0, 0, 0, 0.05),inset 0 -1px 0 rgba(0, 0, 0, 0.05);-moz-box-shadow:inset 0 1px 0 rgba(0, 0, 0, 0.05),inset 0 -1px 0 rgba(0, 0, 0, 0.05);box-shadow:inset 0 1px 0 rgba(0, 0, 0, 0.05),inset 0 -1px 0 rgba(0, 0, 0, 0.05);} .thumbnails{margin-left:-20px;margin-bottom:0;list-style:none;zoom:1;}.thumbnails:before,.thumbnails:after{display:table;*display:inline;content:"";zoom:1;} .thumbnails:after{clear:both;} .thumbnails>li{float:left;margin:0 0 20px 20px;} diff --git a/docs/assets/css/docs.css b/docs/assets/css/docs.css index c2c92a2519..b218b465c5 100644 --- a/docs/assets/css/docs.css +++ b/docs/assets/css/docs.css @@ -330,6 +330,24 @@ h2 + table { position: relative; } +/* Icons +------------------------- */ +.the-icons { + +} +.the-icons i { + display: block; + margin-bottom: 5px; + background-color: rgba(255,0,0,.25); +} +.the-icons i:after { + display: block; + content: attr(class); + font-style: normal; + margin-left: 20px; + width: 100px; +} + /* Responsive Docs -------------------------------------------------- */ diff --git a/docs/assets/img/glyphicons-halflings-sprite.png b/docs/assets/img/glyphicons-halflings-sprite.png new file mode 100644 index 0000000000000000000000000000000000000000..525acee6dc1ae5bbf86f5dbd3c4332366beadebc GIT binary patch literal 9944 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 literal 0 HcmV?d00001 diff --git a/docs/assets/js/google-code-prettify/prettify.css b/docs/assets/js/google-code-prettify/prettify.css index da6b6e7e17..7ff618550a 100644 --- a/docs/assets/js/google-code-prettify/prettify.css +++ b/docs/assets/js/google-code-prettify/prettify.css @@ -2,40 +2,23 @@ .lit { color: #195f91; } .pun, .opn, .clo { color: #93a1a1; } .fun { color: #dc322f; } -.str, .atv { color: #268bd2; } -.kwd, .tag { color: #195f91; } -.typ, .atn, .dec, .var { color: #CB4B16; } +.str, .atv { color: #62C462; } +.kwd, .linenums .tag { color: #049CD9; } +.typ, .atn, .dec, .var { color: #EE5F5B; } .pln { color: #93a1a1; } pre.prettyprint { - background: #fefbf3; + background-color: #fefbf3; padding: 9px; - border: 1px solid rgba(0,0,0,.2); - -webkit-box-shadow: 0 1px 2px rgba(0,0,0,.1); - -moz-box-shadow: 0 1px 2px rgba(0,0,0,.1); - box-shadow: 0 1px 2px rgba(0,0,0,.1); + margin-bottom: 9px; +} + +pre.prettyprint { + color: #ccc; + background-color: #252525; } /* Specify class=linenums on a pre to get line numbering */ ol.linenums { margin: 0 0 0 40px; } /* IE indents via margin-left */ -ol.linenums li { color: rgba(0,0,0,.15); line-height: 20px; } +ol.linenums li { color: #444; line-height: 18px; } /* Alternate shading for lines */ -li.L1, li.L3, li.L5, li.L7, li.L9 { } - -/* -$base03: #002b36; -$base02: #073642; -$base01: #586e75; -$base00: #657b83; -$base0: #839496; -$base1: #93a1a1; -$base2: #eee8d5; -$base3: #fdf6e3; -$yellow: #b58900; -$orange: #cb4b16; -$red: #dc322f; -$magenta: #d33682; -$violet: #6c71c4; -$blue: #268bd2; -$cyan: #2aa198; -$green: #859900; -*/ \ No newline at end of file +li.L1, li.L3, li.L5, li.L7, li.L9 { } \ No newline at end of file diff --git a/docs/base-css.html b/docs/base-css.html index 2bc6f49fbb..c07263495c 100644 --- a/docs/base-css.html +++ b/docs/base-css.html @@ -1175,6 +1175,158 @@ Form states </section> + +<!-- Icons +================================================== --> +<section id="icons"> + <div class="page-header"> + <h1>Icons <small>Graciously provided by <a href="http://glyphicons.com" target="_blank">Glyphicons</a></small></h1> + </div> + <div class="row"> + <div class="span2"> + <div class="the-icons"> + <i class="glass"></i> + <i class="music"></i> + <i class="search"></i> + <i class="envelope"></i> + <i class="heart"></i> + <i class="star"></i> + <i class="star-empty"></i> + <i class="user"></i> + <i class="film"></i> + <i class="th-large"></i> + <i class="th"></i> + <i class="th-list"></i> + <i class="ok"></i> + <i class="remove"></i> + <i class="zoom-in"></i> + <i class="zoom-out"></i> + <i class="off"></i> + <i class="signal"></i> + <i class="cog"></i> + <i class="trash"></i> + </div> + </div> + <div class="span2"> + <div class="the-icons"> + <i class="home"></i> + <i class="file"></i> + <i class="time"></i> + <i class="road"></i> + <i class="download-alt"></i> + <i class="download"></i> + <i class="upload"></i> + <i class="inbox"></i> + <i class="play-circle"></i> + <i class="repeat"></i> + <i class="refresh"></i> + <i class="calendar"></i> + <i class="lock"></i> + <i class="flag"></i> + <i class="headphones"></i> + <i class="volume-off"></i> + <i class="volume-down"></i> + <i class="volume-up"></i> + <i class="qrcode"></i> + <i class="barcode"></i> + </div> + </div> + <div class="span2"> + <div class="the-icons"> + <i class="tag"></i> + <i class="tags"></i> + <i class="book"></i> + <i class="bookmark"></i> + <i class="print"></i> + <i class="camera"></i> + <i class="font"></i> + <i class="bold"></i> + <i class="italic"></i> + <i class="text-height"></i> + <i class="text-width"></i> + <i class="align-left"></i> + <i class="align-center"></i> + <i class="align-right"></i> + <i class="align-justify"></i> + <i class="list"></i> + <i class="indent-left"></i> + <i class="indent-right"></i> + <i class="facetime-video"></i> + <i class="picture"></i> + </div> + </div> + <div class="span2"> + <div class="the-icons"> + <i class="pencil"></i> + <i class="map-marker"></i> + <i class="adjust"></i> + <i class="tint"></i> + <i class="edit"></i> + <i class="share"></i> + <i class="check"></i> + <i class="move"></i> + <i class="step-backward"></i> + <i class="fast-backward"></i> + <i class="backward"></i> + <i class="play"></i> + <i class="pause"></i> + <i class="stop"></i> + <i class="forward"></i> + <i class="fast-forward"></i> + <i class="step-foward"></i> + <i class="eject"></i> + <i class="chevron-left"></i> + <i class="chevron-right"></i> + </div> + </div> + <div class="span2"> + <div class="the-icons"> + <i class="arrow-left"></i> + <i class="arrow-right"></i> + <i class="arrow-up"></i> + <i class="arrow-down"></i> + <i class="share"></i> + <i class="resize-full"></i> + <i class="resize-small"></i> + <i class="plus"></i> + <i class="minus"></i> + <i class="asterisk"></i> + </div> + </div> + </div> + + <br> + + <div class="row"> + <div class="span4"> + <h3>Built as a sprite</h3> + <p>Instead of making every icon an extra request, we've compiled them into a sprite—a bunch of images in one file that uses CSS to position the images with <code>background-position</code>. This is the same method we use on Twitter.com and it has worked well for us.</p> + <p><a href="http://glyphicons.com" target="_blank">Glyphicons</a> has granted us use of the Halflings set in our open-source toolkit so long as we provide a link and credit. Please consider doing the same in your projects.</p> + </div> + <div class="span4"> + <h3>How to use</h3> + <p>With v2.0.0, the <code><i></code> tag is essentially dedicated to iconography. To use the icons, you can place the follow code wherever you like one to appear:</p> +<pre class="prettyprint"> +<i class="chevron-left"></i> +</pre> + <p>There are over 100 classes to choose from for your icons. Just add an <code><i></code> tag with the right class and you're set. You can find the full list in sprites.less or right here in this document.</p> + </div> + <div class="span4"> + <h3>Use cases</h3> + <p>Icons are great, but where would one use them? Here are a few ideas:</p> + <ul> + <li>As visuals for your sidebar navigation</li> + <li>For a purely icon-driven nav</li> + <li>For buttons to help convey the meaning of an action</li> + <li>With links to share context on a user's destination</li> + </ul> + <p>Essentially, anywhere you can put an <code><i></code> tag, you can put an icon.</p> + </div> + </div> +</section> + + + <!-- Footer ================================================== --> <footer class="footer"> diff --git a/docs/components.html b/docs/components.html index fbfa9fb31e..d9d6b10d62 100644 --- a/docs/components.html +++ b/docs/components.html @@ -223,6 +223,38 @@ +<!-- Side nav +================================================== --> +<section id="sidenav"> + <div class="page-header"> + <h1>Side nav <small></small></h1> + </div> + + <div class="well side-nav"> + <h6 class="nav-label">Your account</h6> + <ul class="nav-group"> + <li class="active"><a class="nav-item" href="#">Home</a></li> + <li><a class="nav-item" href="#">Library</a></li> + <li><a class="nav-item" href="#">Profile</a></li> + <li><a class="nav-item" href="#">Settings</a></li> + <li><a class="nav-item" href="#">Help</a></li> + </ul> + </div> + + <div class="well side-nav"> + <h6 class="nav-label">Your account</h6> + <ul class="nav-group"> + <li class="active"><a class="nav-item" href="#"><i class="home"></i> Home</a></li> + <li><a class="nav-item" href="#"><i class="book"></i> Library</a></li> + <li><a class="nav-item" href="#"><i class="user"></i> Profile</a></li> + <li><a class="nav-item" href="#"><i class="cog"></i> Settings</a></li> + <li><a class="nav-item" href="#"><i class="time"></i> Help</a></li> + </ul> + </div> +</section> + + + <!-- Navbar ================================================== --> <section id="navbar"> diff --git a/lib/bootstrap.less b/lib/bootstrap.less index e05a966add..8b821825c7 100644 --- a/lib/bootstrap.less +++ b/lib/bootstrap.less @@ -27,6 +27,7 @@ // Temp catchall for what's missing thus far @import "patterns.less"; +@import "sprites.less"; @import "dropdowns.less"; @import "tabs-pills.less"; @import "breadcrumbs.less"; @@ -34,6 +35,7 @@ @import "modals.less"; @import "twipsy.less"; @import "popovers.less"; +@import "sidenav.less"; @import "thumbnails.less"; // Responsive diff --git a/lib/sidenav.less b/lib/sidenav.less new file mode 100644 index 0000000000..afc5ea1ddf --- /dev/null +++ b/lib/sidenav.less @@ -0,0 +1,40 @@ +// SIDE NAV +// -------- + + +.side-nav { + padding: @baseLineHeight / 2 0; +} +.side-nav .nav-label, +.side-nav .nav-item { + display: block; + padding: 3px 16px; + text-shadow: 0 1px 0 rgba(255,255,255,.5); +} +.side-nav .nav-label { + font-size: 11px; + line-height: @baseLineHeight; + color: @grayDark; + text-transform: uppercase; +} +.side-nav .nav-group { + margin: 0 -1px; + list-style: none; +} + +.side-nav .nav-item { + font-weight: bold; +} +.side-nav .nav-item i { + vertical-align: -2px; +} +.side-nav .nav-item:hover { + text-decoration: none; +} +.side-nav .active .nav-item { + color: #fff; + text-shadow: 0 -1px 0 rgba(0,0,0,.3); + #gradient > .vertical(#ccc, #aaa); + @shadow: inset 0 1px 0 rgba(0,0,0,.05), inset 0 -1px 0 rgba(0,0,0,.05); + .box-shadow(@shadow); +} \ No newline at end of file diff --git a/lib/sprites.less b/lib/sprites.less new file mode 100644 index 0000000000..8b5bcd5a5f --- /dev/null +++ b/lib/sprites.less @@ -0,0 +1,118 @@ +// SPRITES +// Glyphs and icons for buttons, nav, and more +// ------------------------------------------- + + +// ICONS +// ----- + +// As of v2.0.0, the <i> tag is reserved for icons from the Glyphicons set. +// All icons receive the styles of the <i> tag and are then given a unique +// class to add width, height, and background-position. Your resulting HTML +// will look like <i class="inbox"></i>. + +i { + background-image: url(docs/assets/img/glyphicons-halflings-sprite.png); + background-position: 0 0; + background-repeat: no-repeat; + display: inline-block; + vertical-align: text-top; + width: 14px; + height: 14px; +} + +.glass { background-position: 0 0; } +.music { background-position: -24px 0; } +.search { background-position: -48px 0; } +.envelope { background-position: -72px 0; } +.heart { background-position: -96px 0; } +.star { background-position: -120px 0; } +.star-empty { background-position: -144px 0; } +.user { background-position: -168px 0; } +.film { background-position: -192px 0; } +.th-large { background-position: -216px 0; } +.th { background-position: -240px 0; } +.th-lines { background-position: -264px 0; } +.ok { background-position: -288px 0; } +.remove { background-position: -312px 0; } +.zoom-in { background-position: -336px 0; } +.zoom-out { background-position: -360px 0; } +.off { background-position: -384px 0; } +.signal { background-position: -408px 0; } +.cog { background-position: -432px 0; } +.trash { background-position: -456px 0; } + +.home { background-position: 0 -24px; } +.file { background-position: -24px -24px; } +.time { background-position: -48px -24px; } +.road { background-position: -72px -24px; } +.download-alt { background-position: -96px -24px; } +.download { background-position: -120px -24px; } +.upload { background-position: -144px -24px; } +.inbox { background-position: -168px -24px; } +.play-circle { background-position: -192px -24px; } +.repeat { background-position: -216px -24px; } +.refresh { background-position: -240px -24px; } +.calendar { background-position: -264px -24px; } +.lock { background-position: -288px -24px; } +.flag { background-position: -312px -24px; } +.headphones { background-position: -336px -24px; } +.volume-off { background-position: -360px -24px; } +.volume-down { background-position: -384px -24px; } +.volume-up { background-position: -408px -24px; } +.qrcode { background-position: -432px -24px; } +.barcode { background-position: -456px -24px; } + +.tag { background-position: 0 -48px; } +.tags { background-position: -24px -48px; } +.book { background-position: -48px -48px; } +.bookmark { background-position: -72px -48px; } +.print { background-position: -96px -48px; } +.camera { background-position: -120px -48px; } +.font { background-position: -144px -48px; } +.bold { background-position: -168px -48px; } +.italic { background-position: -192px -48px; } +.text-height { background-position: -216px -48px; } +.text-width { background-position: -240px -48px; } +.align-left { background-position: -264px -48px; } +.align-center { background-position: -288px -48px; } +.align-right { background-position: -312px -48px; } +.align-justify { background-position: -336px -48px; } +.list { background-position: -360px -48px; } +.indent-left { background-position: -384px -48px; } +.indent-right { background-position: -408px -48px; } +.facetime-video { background-position: -432px -48px; } +.picture { background-position: -456px -48px; } + +.pencil { background-position: 0 -72px; } +.map-marker { background-position: -24px -72px; } +.adjust { background-position: -48px -72px; } +.tint { background-position: -72px -72px; } +.edit { background-position: -96px -72px; } +.share { background-position: -120px -72px; } +.check { background-position: -144px -72px; } +.move { background-position: -168px -72px; } +.step-backward { background-position: -192px -72px; } +.fast-backward { background-position: -216px -72px; } +.backward { background-position: -240px -72px; } +.play { background-position: -264px -72px; } +.pause { background-position: -288px -72px; } +.stop { background-position: -312px -72px; } +.forward { background-position: -336px -72px; } +.fast-forward { background-position: -360px -72px; } +.step-forward { background-position: -384px -72px; } +.eject { background-position: -408px -72px; } +.chevron-left { background-position: -432px -72px; } +.chevron-right { background-position: -456px -72px; } + +.arrow-left { background-position: -240px -96px; } +.arrow-right { background-position: -264px -96px; } +.arrow-up { background-position: -288px -96px; } +.arrow-down { background-position: -312px -96px; } +.share { background-position: -336px -96px; } +.resize-full { background-position: -360px -96px; } +.resize-small { background-position: -384px -96px; } +.plus { background-position: -408px -96px; } +.minus { background-position: -432px -96px; } +.asterisk { background-position: -456px -96px; } + diff --git a/lib/tables.less b/lib/tables.less index 1643705620..e1c9ed53bc 100644 --- a/lib/tables.less +++ b/lib/tables.less @@ -52,6 +52,11 @@ td { td + th { border-left: 1px solid #ddd; } + // Prevent a double border + thead:first-child tr:first-child th, + tbody:first-child tr:first-child td { + border-top: 0; + } // For first th or td in the first row in the first thead or tbody thead:first-child tr:first-child th:first-child, tbody:first-child tr:first-child td:first-child { diff --git a/lib/type.less b/lib/type.less index b2ba73b867..cc446a69d5 100644 --- a/lib/type.less +++ b/lib/type.less @@ -74,7 +74,7 @@ h6 { // Unordered and Ordered lists ul, ol { - margin: 0 0 @baseLineHeight / 2 25px; + margin: 13px 0 14px 25px; } ul ul, ul ol, -- GitLab From a13ab64870f40a67ffd85532c30620f8001d0822 Mon Sep 17 00:00:00 2001 From: Mark Otto <markdotto@gmail.com> Date: Thu, 5 Jan 2012 01:36:05 -0800 Subject: [PATCH 181/318] add a quick little example of icons in buttons --- docs/base-css.html | 3 +++ 1 file changed, 3 insertions(+) diff --git a/docs/base-css.html b/docs/base-css.html index c07263495c..37fa97ba85 100644 --- a/docs/base-css.html +++ b/docs/base-css.html @@ -1323,6 +1323,9 @@ Form states <p>Essentially, anywhere you can put an <code><i></code> tag, you can put an icon.</p> </div> </div> + + <h3>Examples</h3> + <p><a class="btn" href="#"><i class="check"></i> Button</a></p> </section> -- GitLab From 20add59de3f2b69aaa9c9b325dab20b13c75eaa1 Mon Sep 17 00:00:00 2001 From: Mark Otto <markdotto@gmail.com> Date: Thu, 5 Jan 2012 10:01:42 -0800 Subject: [PATCH 182/318] breaking out patterns.less even more, removing unnecessary div from checkbox and radio lists--now just labels and inputs --- bootstrap.css | 2675 ++++++++++++++++----------------- bootstrap.min.css | 219 ++- docs/assets/css/docs.css | 2 +- docs/base-css.html | 72 +- docs/components.html | 46 +- lib/alerts.less | 83 + lib/bootstrap.less | 24 +- lib/button-groups.less | 65 + lib/buttons.less | 119 ++ lib/close.less | 17 + lib/component-animations.less | 18 + lib/forms.less | 3 +- lib/labels.less | 16 + lib/navbar.less | 206 +++ lib/patterns.less | 565 ------- lib/scaffolding.less | 2 +- lib/variables.less | 10 +- lib/wells.less | 17 + 18 files changed, 2054 insertions(+), 2105 deletions(-) create mode 100644 lib/alerts.less create mode 100644 lib/button-groups.less create mode 100644 lib/buttons.less create mode 100644 lib/close.less create mode 100644 lib/component-animations.less create mode 100644 lib/labels.less create mode 100644 lib/navbar.less create mode 100644 lib/wells.less diff --git a/bootstrap.css b/bootstrap.css index f9f174c3d5..55706e2a3c 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: Thu Jan 5 01:36:56 PST 2012 + * Date: Thu Jan 5 10:00:31 PST 2012 */ html, body { margin: 0; @@ -175,7 +175,7 @@ body { font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; font-size: 13px; line-height: 18px; - color: #404040; + color: #555555; background-color: #ffffff; } .container { @@ -228,11 +228,11 @@ body { a { font-weight: inherit; line-height: inherit; - color: #0069d6; + color: #0088cc; text-decoration: none; } a:hover { - color: #00438a; + color: #005580; text-decoration: underline; } .pull-right { @@ -342,7 +342,7 @@ p { } p small { font-size: 11px; - color: #bfbfbf; + color: #999999; } h1, h2, @@ -351,7 +351,7 @@ h4, h5, h6 { font-weight: bold; - color: #404040; + color: #333333; text-rendering: optimizelegibility; } h1 small, @@ -360,7 +360,7 @@ h3 small, h4 small, h5 small, h6 small { - color: #bfbfbf; + color: #999999; } h1 { font-size: 30px; @@ -397,7 +397,7 @@ h5 { h6 { font-size: 13px; line-height: 18px; - color: #bfbfbf; + color: #999999; text-transform: uppercase; } ul, ol { @@ -417,7 +417,7 @@ ol { } li { line-height: 18px; - color: #404040; + color: #333333; } ul.unstyled { margin-left: 0; @@ -451,7 +451,7 @@ em { line-height: inherit; } .muted { - color: #bfbfbf; + color: #999999; } abbr { font-size: 90%; @@ -473,7 +473,7 @@ blockquote p { blockquote small { display: block; line-height: 18px; - color: #bfbfbf; + color: #999999; } blockquote small:before { content: '\2014 \00A0'; @@ -493,7 +493,7 @@ code, pre { padding: 0 3px 2px; font-family: Menlo, Monaco, "Courier New", monospace; font-size: 12px; - color: #404040; + color: #333333; -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px; @@ -534,7 +534,7 @@ legend { margin-bottom: 27px; font-size: 19.5px; line-height: 36px; - color: #404040; + color: #333333; border-bottom: 1px solid #eee; } label, @@ -549,7 +549,7 @@ textarea { label { display: block; margin-bottom: 5px; - color: #404040; + color: #333333; } input, textarea, @@ -561,7 +561,7 @@ select, padding: 4px; font-size: 13px; line-height: 18px; - color: #808080; + color: #555555; border: 1px solid #ccc; -webkit-border-radius: 3px; -moz-border-radius: 3px; @@ -881,15 +881,15 @@ textarea[readonly] { cursor: not-allowed; } :-moz-placeholder { - color: #bfbfbf; + color: #999999; } ::-webkit-input-placeholder { - color: #bfbfbf; + color: #999999; } .help-text { margin-top: 5px; margin-bottom: 0; - color: #bfbfbf; + color: #999999; } .help-inline { *position: relative; @@ -935,7 +935,7 @@ textarea[readonly] { padding: 4px 4px 4px 5px; font-weight: normal; line-height: 18px; - color: #bfbfbf; + color: #999999; text-align: center; text-shadow: 0 1px 0 #ffffff; background-color: #f5f5f5; @@ -986,7 +986,7 @@ textarea[readonly] { .horizontal-form .controls { margin-left: 150px; } -.horizontal-form .control-list { +.horizontal-form .controls > .radio:first-child, .horizontal-form .controls > .checkbox:first-child { padding-top: 6px; } .horizontal-form .form-actions { @@ -1183,580 +1183,382 @@ table { background-color: lighten(@purple, 40%); } }*/ -.navbar { - overflow: visible; +i { + background-image: url(docs/assets/img/glyphicons-halflings-sprite.png); + background-position: 0 0; + background-repeat: no-repeat; + display: inline-block; + vertical-align: text-top; + width: 14px; + height: 14px; } -.navbar-inner { - background-color: #222222; - background-color: #222222; - 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); - background-repeat: repeat-x; - 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); +.glass { + background-position: 0 0; } -.navbar .brand a:hover, .navbar ul .active > a { - color: #ffffff; - text-decoration: none; - background-color: #333333; - background-color: rgba(255, 255, 255, 0.05); +.music { + background-position: -24px 0; } -.navbar .brand { - float: left; - display: block; - padding: 8px 20px 12px; - margin-left: -20px; - font-size: 20px; - font-weight: 200; - line-height: 1; - color: #ffffff; +.search { + background-position: -48px 0; } -.navbar p { - margin: 0; - line-height: 40px; +.envelope { + background-position: -72px 0; } -.navbar p a:hover { - color: #ffffff; - background-color: transparent; +.heart { + background-position: -96px 0; } -.navbar .btn { - margin-top: 5px; +.star { + background-position: -120px 0; } -.navbar-search { - position: relative; - float: left; - margin-top: 6px; - margin-bottom: 0; +.star-empty { + background-position: -144px 0; } -.navbar-search .search-query { - padding: 4px 9px; - font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; - font-size: 13px; - font-weight: normal; - line-height: 1; - color: #ffffff; - color: rgba(255, 255, 255, 0.75); - background-color: #444; - background-color: rgba(255, 255, 255, 0.3); - border: 1px solid #111; - -webkit-box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1), 0 1px 0px rgba(255, 255, 255, 0.15); - -moz-box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1), 0 1px 0px rgba(255, 255, 255, 0.15); - box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1), 0 1px 0px rgba(255, 255, 255, 0.15); - -webkit-transition: none; - -moz-transition: none; - -ms-transition: none; - -o-transition: none; - transition: none; +.user { + background-position: -168px 0; } -.navbar-search .search-query:-moz-placeholder { - color: #e6e6e6; +.film { + background-position: -192px 0; } -.navbar-search .search-query::-webkit-input-placeholder { - color: #e6e6e6; +.th-large { + background-position: -216px 0; } -.navbar-search .search-query:hover { - color: #ffffff; - background-color: #bfbfbf; - background-color: rgba(255, 255, 255, 0.5); +.th { + background-position: -240px 0; } -.navbar-search .search-query:focus, .navbar-search .search-query.focused { - padding: 5px 10px; - color: #404040; - text-shadow: 0 1px 0 #ffffff; - background-color: #ffffff; - border: 0; - -webkit-box-shadow: 0 0 3px rgba(0, 0, 0, 0.15); - -moz-box-shadow: 0 0 3px rgba(0, 0, 0, 0.15); - box-shadow: 0 0 3px rgba(0, 0, 0, 0.15); - outline: 0; +.th-lines { + background-position: -264px 0; } -.navbar-static { - margin-bottom: 18px; +.ok { + background-position: -288px 0; } -.navbar-static .navbar-inner { - padding-left: 20px; - padding-right: 20px; - -webkit-border-radius: 4px; - -moz-border-radius: 4px; - border-radius: 4px; +.remove { + background-position: -312px 0; } -.navbar-fixed { - position: fixed; - top: 0; - right: 0; - left: 0; - z-index: 10000; +.zoom-in { + background-position: -336px 0; } -.nav { - position: relative; - left: 0; - display: block; - float: left; - margin: 0 10px 0 0; +.zoom-out { + background-position: -360px 0; } -.nav > li { - display: block; - float: left; +.off { + background-position: -384px 0; } -.nav a { - display: block; - float: none; - padding: 10px 10px 11px; - line-height: 19px; - color: #bfbfbf; - text-decoration: none; - text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25); +.signal { + background-position: -408px 0; } -.nav a:hover { - color: #ffffff; - text-decoration: none; +.cog { + background-position: -432px 0; } -.nav .active > a { - background-color: #222; - background-color: rgba(0, 0, 0, 0.5); +.trash { + background-position: -456px 0; } -.nav .divider { - height: 40px; - width: 1px; - margin: 0 5px; - overflow: hidden; - background-color: #222; - border-right: 1px solid #444; +.home { + background-position: 0 -24px; } -.nav.secondary-nav { - float: right; - margin-left: 10px; - margin-right: 0; +.file { + background-position: -24px -24px; } -.nav.secondary-nav .dropdown-menu { - right: 0; - border: 0; +.time { + background-position: -48px -24px; } -.nav .dropdown-toggle:hover, .nav .dropdown.open .dropdown-toggle { - background: #444; - background: rgba(255, 255, 255, 0.05); +.road { + background-position: -72px -24px; } -.nav .dropdown-menu { - background-color: #333; +.download-alt { + background-position: -96px -24px; } -.nav .dropdown-menu .dropdown-toggle { - color: #ffffff; +.download { + background-position: -120px -24px; } -.nav .dropdown-menu .dropdown-toggle.open { - background: #444; - background: rgba(255, 255, 255, 0.05); +.upload { + background-position: -144px -24px; } -.nav .dropdown-menu li a { - color: #999; - text-shadow: 0 1px 0 rgba(0, 0, 0, 0.5); +.inbox { + background-position: -168px -24px; } -.nav .dropdown-menu li a:hover { - background-color: #191919; - 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); - background-repeat: repeat-x; - filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#292929', endColorstr='#191919', GradientType=0); - color: #ffffff; +.play-circle { + background-position: -192px -24px; } -.nav .dropdown-menu .active a { - color: #ffffff; +.repeat { + background-position: -216px -24px; } -.nav .dropdown-menu .divider { - background-color: #222; - border-color: #444; +.refresh { + background-position: -240px -24px; } -.topbar ul .dropdown-menu li a { - padding: 4px 15px; +.calendar { + background-position: -264px -24px; } -.hero-unit { - padding: 60px; - margin-bottom: 30px; - background-color: #f5f5f5; - -webkit-border-radius: 6px; - -moz-border-radius: 6px; - border-radius: 6px; +.lock { + background-position: -288px -24px; } -.hero-unit h1 { - margin-bottom: 0; - font-size: 60px; - line-height: 1; - letter-spacing: -1px; +.flag { + background-position: -312px -24px; } -.hero-unit p { - font-size: 18px; - font-weight: 200; - line-height: 27px; +.headphones { + background-position: -336px -24px; } -footer { - padding-top: 17px; - margin-top: 17px; - border-top: 1px solid #eee; +.volume-off { + background-position: -360px -24px; } -.page-header { - margin-bottom: 27px; - border-bottom: 1px solid #eee; - -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); +.volume-down { + background-position: -384px -24px; } -.page-header h1 { - margin-bottom: 13.5px; +.volume-up { + background-position: -408px -24px; } -.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-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); - background-repeat: repeat-x; - filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ee5f5b', endColorstr='#c43c35', GradientType=0); - 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); +.qrcode { + background-position: -432px -24px; } -.btn.success, .alert-message.success { - background-color: #57a957; - background-image: -khtml-gradient(linear, left top, left bottom, from(#62c462), to(#57a957)); - background-image: -moz-linear-gradient(top, #62c462, #57a957); - background-image: -ms-linear-gradient(top, #62c462, #57a957); - background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #62c462), color-stop(100%, #57a957)); - background-image: -webkit-linear-gradient(top, #62c462, #57a957); - background-image: -o-linear-gradient(top, #62c462, #57a957); - background-image: linear-gradient(top, #62c462, #57a957); - background-repeat: repeat-x; - filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#62c462', endColorstr='#57a957', GradientType=0); - border-color: #57a957 #57a957 #3d773d; - border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25); +.barcode { + background-position: -456px -24px; } -.btn.info, .alert-message.info { - background-color: #339bb9; - background-image: -khtml-gradient(linear, left top, left bottom, from(#5bc0de), to(#339bb9)); - background-image: -moz-linear-gradient(top, #5bc0de, #339bb9); - background-image: -ms-linear-gradient(top, #5bc0de, #339bb9); - background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #5bc0de), color-stop(100%, #339bb9)); - background-image: -webkit-linear-gradient(top, #5bc0de, #339bb9); - background-image: -o-linear-gradient(top, #5bc0de, #339bb9); - background-image: linear-gradient(top, #5bc0de, #339bb9); - background-repeat: repeat-x; - filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#5bc0de', endColorstr='#339bb9', GradientType=0); - border-color: #339bb9 #339bb9 #22697d; - border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25); +.tag { + background-position: 0 -48px; } -.btn { - display: inline-block; - padding: 5px 14px 6px; - font-size: 13px; - line-height: normal; - color: #333; - text-shadow: 0 1px 1px rgba(255, 255, 255, 0.75); - background-color: #e6e6e6; - background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#ffffff), color-stop(25%, #ffffff), to(#e6e6e6)); - background-image: -webkit-linear-gradient(#ffffff, #ffffff 25%, #e6e6e6); - background-image: -moz-linear-gradient(top, #ffffff, #ffffff 25%, #e6e6e6); - background-image: -ms-linear-gradient(#ffffff, #ffffff 25%, #e6e6e6); - background-image: -o-linear-gradient(#ffffff, #ffffff 25%, #e6e6e6); - background-image: linear-gradient(#ffffff, #ffffff 25%, #e6e6e6); - background-repeat: no-repeat; - filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#e6e6e6', GradientType=0); - border: 1px solid #ccc; - border-bottom-color: #bbb; - -webkit-border-radius: 4px; - -moz-border-radius: 4px; - border-radius: 4px; - -webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05); - -moz-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05); - box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05); - cursor: pointer; - -webkit-transition: 0.1s linear all; - -moz-transition: 0.1s linear all; - -ms-transition: 0.1s linear all; - -o-transition: 0.1s linear all; - transition: 0.1s linear all; +.tags { + background-position: -24px -48px; } -.btn:hover { - color: #404040; - text-decoration: none; - background-position: 0 -15px; +.book { + background-position: -48px -48px; } -.btn:focus { - outline: 1px dotted #666; +.bookmark { + background-position: -72px -48px; } -.btn.primary { - color: #ffffff; - text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25); - background-color: #0064cd; - background-image: -khtml-gradient(linear, left top, left bottom, from(#049cdb), to(#0064cd)); - background-image: -moz-linear-gradient(top, #049cdb, #0064cd); - background-image: -ms-linear-gradient(top, #049cdb, #0064cd); - background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #049cdb), color-stop(100%, #0064cd)); - background-image: -webkit-linear-gradient(top, #049cdb, #0064cd); - background-image: -o-linear-gradient(top, #049cdb, #0064cd); - background-image: linear-gradient(top, #049cdb, #0064cd); - background-repeat: repeat-x; - filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#049cdb', endColorstr='#0064cd', GradientType=0); - border-color: #0064cd #0064cd #003f81; - border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25); +.print { + background-position: -96px -48px; } -.btn.active, .btn:active { - -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); +.camera { + background-position: -120px -48px; } -.btn.disabled { - cursor: default; - background-image: none; - filter: progid:DXImageTransform.Microsoft.gradient(enabled = false); - filter: alpha(opacity=65); - -moz-opacity: 0.65; - opacity: 0.65; - -webkit-box-shadow: none; - -moz-box-shadow: none; - box-shadow: none; +.font { + background-position: -144px -48px; } -.btn[disabled] { - cursor: default; - background-image: none; - filter: progid:DXImageTransform.Microsoft.gradient(enabled = false); - filter: alpha(opacity=65); - -moz-opacity: 0.65; - opacity: 0.65; - -webkit-box-shadow: none; - -moz-box-shadow: none; - box-shadow: none; +.bold { + background-position: -168px -48px; } -.btn.large { - padding: 9px 14px 9px; - font-size: 15px; - line-height: normal; - -webkit-border-radius: 6px; - -moz-border-radius: 6px; - border-radius: 6px; +.italic { + background-position: -192px -48px; } -.btn.small { - padding: 7px 9px 7px; - font-size: 11px; +.text-height { + background-position: -216px -48px; } -:root .alert-message, :root .btn { - border-radius: 0 \0; +.text-width { + background-position: -240px -48px; } -button.btn::-moz-focus-inner, input[type=submit].btn::-moz-focus-inner { - padding: 0; - border: 0; +.align-left { + background-position: -264px -48px; } -.btn-toolbar { - zoom: 1; +.align-center { + background-position: -288px -48px; } -.btn-toolbar:before, .btn-toolbar:after { - display: table; - *display: inline; - content: ""; - zoom: 1; +.align-right { + background-position: -312px -48px; } -.btn-toolbar:after { - clear: both; +.align-justify { + background-position: -336px -48px; } -.btn-toolbar .btn-group { - float: left; - margin-right: 10px; +.list { + background-position: -360px -48px; } -.btn-group { - zoom: 1; +.indent-left { + background-position: -384px -48px; } -.btn-group:before, .btn-group:after { - display: table; - *display: inline; - content: ""; - zoom: 1; +.indent-right { + background-position: -408px -48px; } -.btn-group:after { - clear: both; +.facetime-video { + background-position: -432px -48px; } -.btn-group .btn { - position: relative; - float: left; - margin-left: -1px; - -webkit-border-radius: 0; - -moz-border-radius: 0; - border-radius: 0; +.picture { + background-position: -456px -48px; } -.btn-group .btn:first-child { - margin-left: 0; - -webkit-border-top-left-radius: 4px; - -moz-border-radius-topleft: 4px; - border-top-left-radius: 4px; - -webkit-border-bottom-left-radius: 4px; - -moz-border-radius-bottomleft: 4px; - border-bottom-left-radius: 4px; +.pencil { + background-position: 0 -72px; } -.btn-group .btn:last-child { - -webkit-border-top-right-radius: 4px; - -moz-border-radius-topright: 4px; - border-top-right-radius: 4px; - -webkit-border-bottom-right-radius: 4px; - -moz-border-radius-bottomright: 4px; - border-bottom-right-radius: 4px; +.map-marker { + background-position: -24px -72px; } -.btn-group .btn.large:first-child { - margin-left: 0; - -webkit-border-top-left-radius: 6px; - -moz-border-radius-topleft: 6px; - border-top-left-radius: 6px; - -webkit-border-bottom-left-radius: 6px; - -moz-border-radius-bottomleft: 6px; - border-bottom-left-radius: 6px; +.adjust { + background-position: -48px -72px; } -.btn-group .btn.large:last-child { - -webkit-border-top-right-radius: 6px; - -moz-border-radius-topright: 6px; - border-top-right-radius: 6px; - -webkit-border-bottom-right-radius: 6px; - -moz-border-radius-bottomright: 6px; - border-bottom-right-radius: 6px; +.tint { + background-position: -72px -72px; } -.btn-group .btn:hover, .btn-group .btn:focus, .btn-group .btn:active { - z-index: 2; +.edit { + background-position: -96px -72px; } -.close { - float: right; - font-size: 20px; - font-weight: bold; - line-height: 13.5px; - color: #000000; - text-shadow: 0 1px 0 #ffffff; - filter: alpha(opacity=20); - -moz-opacity: 0.2; - opacity: 0.2; +.share { + background-position: -120px -72px; } -.close:hover { - color: #000000; - text-decoration: none; - filter: alpha(opacity=40); - -moz-opacity: 0.4; - opacity: 0.4; +.check { + background-position: -144px -72px; } -.alert-message { - position: relative; - padding: 7px 15px; - margin-bottom: 18px; - color: #404040; - text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5); - background-color: #eedc94; - background-image: -khtml-gradient(linear, left top, left bottom, from(#fceec1), to(#eedc94)); - background-image: -moz-linear-gradient(top, #fceec1, #eedc94); - background-image: -ms-linear-gradient(top, #fceec1, #eedc94); - background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #fceec1), color-stop(100%, #eedc94)); - background-image: -webkit-linear-gradient(top, #fceec1, #eedc94); - background-image: -o-linear-gradient(top, #fceec1, #eedc94); - background-image: linear-gradient(top, #fceec1, #eedc94); - background-repeat: repeat-x; - filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#fceec1', endColorstr='#eedc94', GradientType=0); - border-color: #eedc94 #eedc94 #e4c652; - border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25); - border-width: 1px; - border-style: solid; - -webkit-border-radius: 4px; - -moz-border-radius: 4px; - border-radius: 4px; - -webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.25); - -moz-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.25); - box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.25); +.move { + background-position: -168px -72px; } -.alert-message .close { - *margin-top: 3px; - /* IE7 spacing */ - +.step-backward { + background-position: -192px -72px; } -.alert-message h5 { - line-height: 18px; +.fast-backward { + background-position: -216px -72px; } -.alert-message p { - margin-bottom: 0; +.backward { + background-position: -240px -72px; } -.alert-message div { - margin-top: 5px; - margin-bottom: 2px; - line-height: 28px; +.play { + background-position: -264px -72px; } -.alert-message .btn { - -webkit-box-shadow: 0 1px 0 rgba(255, 255, 255, 0.25); - -moz-box-shadow: 0 1px 0 rgba(255, 255, 255, 0.25); - box-shadow: 0 1px 0 rgba(255, 255, 255, 0.25); +.pause { + background-position: -288px -72px; } -.alert-message.error, .alert-message.success, .alert-message.info { - text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25); +.stop { + background-position: -312px -72px; } -.alert-message.block-message { - padding: 14px; - background-image: none; - background-color: #fdf5d9; - filter: progid:DXImageTransform.Microsoft.gradient(enabled = false); - border-color: #fceec1; - -webkit-box-shadow: none; - -moz-box-shadow: none; - box-shadow: none; +.forward { + background-position: -336px -72px; } -.alert-message.block-message ul, .alert-message.block-message p { - margin-right: 30px; +.fast-forward { + background-position: -360px -72px; } -.alert-message.block-message ul { - margin-bottom: 0; +.step-forward { + background-position: -384px -72px; } -.alert-message.block-message li { - color: #404040; +.eject { + background-position: -408px -72px; } -.alert-message.block-message .alert-actions { - margin-top: 5px; +.chevron-left { + background-position: -432px -72px; } -.alert-message.block-message.error, .alert-message.block-message.success, .alert-message.block-message.info { - color: #404040; - text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5); +.chevron-right { + background-position: -456px -72px; } -.alert-message.block-message.error { - background-color: #fddfde; - border-color: #fbc7c6; +.arrow-left { + background-position: -240px -96px; } -.alert-message.block-message.success { - background-color: #d1eed1; - border-color: #bfe7bf; +.arrow-right { + background-position: -264px -96px; } -.alert-message.block-message.info { - background-color: #ddf4fb; - border-color: #c6edf9; +.arrow-up { + background-position: -288px -96px; +} +.arrow-down { + background-position: -312px -96px; +} +.share { + background-position: -336px -96px; +} +.resize-full { + background-position: -360px -96px; +} +.resize-small { + background-position: -384px -96px; +} +.plus { + background-position: -408px -96px; +} +.minus { + background-position: -432px -96px; +} +.asterisk { + background-position: -456px -96px; +} +.dropdown { + position: relative; +} +.dropdown-toggle:after { + display: inline-block; + width: 0; + height: 0; + margin-top: 8px; + margin-left: 6px; + text-indent: -99999px; + vertical-align: top; + border-left: 4px solid transparent; + border-right: 4px solid transparent; + border-top: 4px solid #ffffff; + filter: alpha(opacity=30); + -moz-opacity: 0.3; + opacity: 0.3; + content: "↓"; +} +.dropdown:hover .dropdown-toggle:after { + filter: alpha(opacity=100); + -moz-opacity: 1; + opacity: 1; +} +.dropdown-menu { + position: absolute; + top: 40px; + z-index: 900; + float: left; + display: none; + min-width: 160px; + max-width: 220px; + _width: 160px; + padding: 6px 0; + margin-left: 0; + margin-right: 0; + background-color: #ffffff; + 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; + zoom: 1; +} +.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: #555555; + text-shadow: 0 1px 0 #ffffff; +} +.topbar .dropdown-menu a:hover, .dropdown-menu a:hover { + color: #333333; + text-decoration: none; + background-color: #dddddd; + 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); + background-repeat: repeat-x; + filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#eeeeee', endColorstr='#dddddd', GradientType=0); + -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.open .dropdown-toggle { + color: #ffffff; + background: #ccc; + background: rgba(0, 0, 0, 0.3); +} +.dropdown.open .dropdown-menu { + display: block; } .well { min-height: 20px; @@ -1800,1071 +1602,1209 @@ button.btn::-moz-focus-inner, input[type=submit].btn::-moz-focus-inner { .collapse.in { height: auto; } -.label { - padding: 1px 3px 2px; - font-size: 9.75px; +.close { + float: right; + font-size: 20px; font-weight: bold; - color: #ffffff; - text-transform: uppercase; - background-color: #bfbfbf; - -webkit-border-radius: 3px; - -moz-border-radius: 3px; - border-radius: 3px; -} -.label.important { - background-color: #c43c35; -} -.label.warning { - background-color: #f89406; -} -.label.success { - background-color: #46a546; + line-height: 13.5px; + color: #000000; + text-shadow: 0 1px 0 #ffffff; + filter: alpha(opacity=20); + -moz-opacity: 0.2; + opacity: 0.2; } -.label.notice { - background-color: #62cffc; +.close:hover { + color: #000000; + text-decoration: none; + filter: alpha(opacity=40); + -moz-opacity: 0.4; + opacity: 0.4; } -i { - background-image: url(docs/assets/img/glyphicons-halflings-sprite.png); - background-position: 0 0; - background-repeat: no-repeat; - display: inline-block; - vertical-align: text-top; - width: 14px; - height: 14px; +.navbar { + overflow: visible; } -.glass { - background-position: 0 0; +.navbar-inner { + background-color: #222222; + background-color: #222222; + 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); + background-repeat: repeat-x; + 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); } -.music { - background-position: -24px 0; +.navbar .brand a:hover, .navbar ul .active > a { + color: #ffffff; + text-decoration: none; + background-color: #333333; + background-color: rgba(255, 255, 255, 0.05); } -.search { - background-position: -48px 0; +.navbar .brand { + float: left; + display: block; + padding: 8px 20px 12px; + margin-left: -20px; + font-size: 20px; + font-weight: 200; + line-height: 1; + color: #ffffff; } -.envelope { - background-position: -72px 0; +.navbar p { + margin: 0; + line-height: 40px; } -.heart { - background-position: -96px 0; +.navbar p a:hover { + color: #ffffff; + background-color: transparent; } -.star { - background-position: -120px 0; +.navbar .btn { + margin-top: 5px; } -.star-empty { - background-position: -144px 0; +.navbar-search { + position: relative; + float: left; + margin-top: 6px; + margin-bottom: 0; } -.user { - background-position: -168px 0; +.navbar-search .search-query { + padding: 4px 9px; + font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; + font-size: 13px; + font-weight: normal; + line-height: 1; + color: #ffffff; + color: rgba(255, 255, 255, 0.75); + background-color: #444; + background-color: rgba(255, 255, 255, 0.3); + border: 1px solid #111; + -webkit-box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1), 0 1px 0px rgba(255, 255, 255, 0.15); + -moz-box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1), 0 1px 0px rgba(255, 255, 255, 0.15); + box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1), 0 1px 0px rgba(255, 255, 255, 0.15); + -webkit-transition: none; + -moz-transition: none; + -ms-transition: none; + -o-transition: none; + transition: none; } -.film { - background-position: -192px 0; +.navbar-search .search-query:-moz-placeholder { + color: #eeeeee; } -.th-large { - background-position: -216px 0; +.navbar-search .search-query::-webkit-input-placeholder { + color: #eeeeee; } -.th { - background-position: -240px 0; +.navbar-search .search-query:hover { + color: #ffffff; + background-color: #999999; + background-color: rgba(255, 255, 255, 0.5); } -.th-lines { - background-position: -264px 0; +.navbar-search .search-query:focus, .navbar-search .search-query.focused { + padding: 5px 10px; + color: #333333; + text-shadow: 0 1px 0 #ffffff; + background-color: #ffffff; + border: 0; + -webkit-box-shadow: 0 0 3px rgba(0, 0, 0, 0.15); + -moz-box-shadow: 0 0 3px rgba(0, 0, 0, 0.15); + box-shadow: 0 0 3px rgba(0, 0, 0, 0.15); + outline: 0; } -.ok { - background-position: -288px 0; +.navbar-static { + margin-bottom: 18px; } -.remove { - background-position: -312px 0; +.navbar-static .navbar-inner { + padding-left: 20px; + padding-right: 20px; + -webkit-border-radius: 4px; + -moz-border-radius: 4px; + border-radius: 4px; } -.zoom-in { - background-position: -336px 0; +.navbar-fixed { + position: fixed; + top: 0; + right: 0; + left: 0; + z-index: 10000; } -.zoom-out { - background-position: -360px 0; +.nav { + position: relative; + left: 0; + display: block; + float: left; + margin: 0 10px 0 0; } -.off { - background-position: -384px 0; +.nav > li { + display: block; + float: left; } -.signal { - background-position: -408px 0; +.nav a { + display: block; + float: none; + padding: 10px 10px 11px; + line-height: 19px; + color: #999999; + text-decoration: none; + text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25); } -.cog { - background-position: -432px 0; +.nav a:hover { + color: #ffffff; + text-decoration: none; } -.trash { - background-position: -456px 0; +.nav .active > a { + background-color: #222; + background-color: rgba(0, 0, 0, 0.5); } -.home { - background-position: 0 -24px; +.nav .divider { + height: 40px; + width: 1px; + margin: 0 5px; + overflow: hidden; + background-color: #222; + border-right: 1px solid #444; } -.file { - background-position: -24px -24px; +.nav.secondary-nav { + float: right; + margin-left: 10px; + margin-right: 0; } -.time { - background-position: -48px -24px; +.nav.secondary-nav .dropdown-menu { + right: 0; + border: 0; } -.road { - background-position: -72px -24px; +.nav .dropdown-toggle:hover, .nav .dropdown.open .dropdown-toggle { + background: #444; + background: rgba(255, 255, 255, 0.05); } -.download-alt { - background-position: -96px -24px; +.nav .dropdown-menu { + background-color: #333; } -.download { - background-position: -120px -24px; +.nav .dropdown-menu .dropdown-toggle { + color: #ffffff; } -.upload { - background-position: -144px -24px; +.nav .dropdown-menu .dropdown-toggle.open { + background: #444; + background: rgba(255, 255, 255, 0.05); } -.inbox { - background-position: -168px -24px; +.nav .dropdown-menu li a { + color: #999; + text-shadow: 0 1px 0 rgba(0, 0, 0, 0.5); } -.play-circle { - background-position: -192px -24px; +.nav .dropdown-menu li a:hover { + background-color: #191919; + 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); + background-repeat: repeat-x; + filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#292929', endColorstr='#191919', GradientType=0); + color: #ffffff; } -.repeat { - background-position: -216px -24px; +.nav .dropdown-menu .active a { + color: #ffffff; } -.refresh { - background-position: -240px -24px; +.nav .dropdown-menu .divider { + background-color: #222; + border-color: #444; } -.calendar { - background-position: -264px -24px; +.tabs, .pills { + padding: 0; + margin: 0 0 20px; + list-style: none; + zoom: 1; } -.lock { - background-position: -288px -24px; +.tabs:before, +.pills:before, +.tabs:after, +.pills:after { + display: table; + *display: inline; + content: ""; + zoom: 1; } -.flag { - background-position: -312px -24px; +.tabs:after, .pills:after { + clear: both; } -.headphones { - background-position: -336px -24px; +.tabs > li, .pills > li { + float: left; } -.volume-off { - background-position: -360px -24px; +.tabs > li > a, .pills > li > a { + display: block; } -.volume-down { - background-position: -384px -24px; +.tabs { + border-color: #ddd; + border-style: solid; + border-width: 0 0 1px; } -.volume-up { - background-position: -408px -24px; +.tabs > li { + position: relative; + margin-bottom: -1px; } -.qrcode { - background-position: -432px -24px; +.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; } -.barcode { - background-position: -456px -24px; +.tabs > li > a:hover { + text-decoration: none; + background-color: #eee; + border-color: #eee #eee #ddd; } -.tag { - background-position: 0 -48px; +.tabs .active > a, .tabs .active > a:hover { + color: #555555; + background-color: #ffffff; + border: 1px solid #ddd; + border-bottom-color: transparent; + cursor: default; } -.tags { - background-position: -24px -48px; +.tabbable { + margin-bottom: 18px; } -.book { - background-position: -48px -48px; +.tabbable .tabs { + margin-bottom: 0; + border-bottom: 0; } -.bookmark { - background-position: -72px -48px; +.tabbable .tab-content { + padding: 19px; + border: 1px solid #ddd; } -.print { - background-position: -96px -48px; +.tabbable.tabs-bottom .tabs > li { + margin-top: -1px; + margin-bottom: 0; } -.camera { - background-position: -120px -48px; +.tabbable.tabs-bottom .tabs > li > a { + -webkit-border-radius: 0 0 4px 4px; + -moz-border-radius: 0 0 4px 4px; + border-radius: 0 0 4px 4px; } -.font { - background-position: -144px -48px; +.tabbable.tabs-bottom .tabs > li > a:hover { + border-bottom-color: transparent; + border-top-color: #ddd; } -.bold { - background-position: -168px -48px; +.tabbable.tabs-bottom .tabs > .active > a, .tabbable.tabs-bottom .tabs > .active > a:hover { + border-color: transparent #ddd #ddd #ddd; } -.italic { - background-position: -192px -48px; +.tabbable.tabs-left, .tabbable.tabs-right { + zoom: 1; } -.text-height { - background-position: -216px -48px; +.tabbable.tabs-left:before, +.tabbable.tabs-right:before, +.tabbable.tabs-left:after, +.tabbable.tabs-right:after { + display: table; + *display: inline; + content: ""; + zoom: 1; } -.text-width { - background-position: -240px -48px; +.tabbable.tabs-left:after, .tabbable.tabs-right:after { + clear: both; } -.align-left { - background-position: -264px -48px; +.tabbable.tabs-left .tabs, .tabbable.tabs-right .tabs { + width: 100px; } -.align-center { - background-position: -288px -48px; +.tabbable.tabs-left .tabs > li, .tabbable.tabs-right .tabs > li { + float: none; + margin-bottom: -1px; } -.align-right { - background-position: -312px -48px; +.tabbable.tabs-left .tabs > li > a, .tabbable.tabs-right .tabs > li > a { + margin-bottom: 2px; } -.align-justify { - background-position: -336px -48px; +.tabbable.tabs-left .tabs > li > a:hover, .tabbable.tabs-right .tabs > li > a:hover { + border-color: transparent; } -.list { - background-position: -360px -48px; +.tabbable.tabs-left .tab-content { + margin-left: 100px; } -.indent-left { - background-position: -384px -48px; +.tabbable.tabs-left .tabs { + float: left; } -.indent-right { - background-position: -408px -48px; +.tabbable.tabs-left .tabs > li { + margin-right: -1px; } -.facetime-video { - background-position: -432px -48px; +.tabbable.tabs-left .tabs > li > a { + margin-right: 0; + -webkit-border-radius: 4px 0 0 4px; + -moz-border-radius: 4px 0 0 4px; + border-radius: 4px 0 0 4px; } -.picture { - background-position: -456px -48px; +.tabbable.tabs-left .tabs > li > a:hover { + border-right-color: #ddd; } -.pencil { - background-position: 0 -72px; +.tabbable.tabs-left .tabs .active > a, .tabbable.tabs-left .tabs .active > a:hover { + border-color: #ddd; + border-right-color: transparent; } -.map-marker { - background-position: -24px -72px; +.tabbable.tabs-right .tab-content { + margin-right: 100px; } -.adjust { - background-position: -48px -72px; +.tabbable.tabs-right .tabs { + float: right; } -.tint { - background-position: -72px -72px; +.tabbable.tabs-right .tabs > li { + margin-left: -1px; } -.edit { - background-position: -96px -72px; +.tabbable.tabs-right .tabs > li > a { + margin-left: 0; + -webkit-border-radius: 0 4px 4px 0; + -moz-border-radius: 0 4px 4px 0; + border-radius: 0 4px 4px 0; } -.share { - background-position: -120px -72px; +.tabbable.tabs-right .tabs > li > a:hover { + border-left-color: #ddd; } -.check { - background-position: -144px -72px; +.tabbable.tabs-right .tabs .active > a, .tabbable.tabs-right .tabs .active > a:hover { + border-color: #ddd; + border-left-color: transparent; } -.move { - background-position: -168px -72px; +.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; } -.step-backward { - background-position: -192px -72px; +.tabs a.menu:after, .tabs .dropdown-toggle:after { + border-top-color: #999; + margin-top: 15px; + margin-left: 5px; } -.fast-backward { - background-position: -216px -72px; +.tabs li.open.menu .menu, .tabs .open.dropdown .dropdown-toggle { + border-color: #999; } -.backward { - background-position: -240px -72px; +.tabs li.open a.menu:after, .tabs .dropdown.open .dropdown-toggle:after { + border-top-color: #555; } -.play { - background-position: -264px -72px; +.pills > li > a { + padding: 0 15px; + margin: 5px 3px 5px 0; + line-height: 30px; + text-shadow: 0 1px 1px #ffffff; + -webkit-border-radius: 15px; + -moz-border-radius: 15px; + border-radius: 15px; } -.pause { - background-position: -288px -72px; +.pills > li > a:hover { + color: #ffffff; + text-decoration: none; + text-shadow: 0 1px 1px rgba(0, 0, 0, 0.25); + background-color: #005580; } -.stop { - background-position: -312px -72px; +.pills .active > a { + color: #ffffff; + text-shadow: 0 1px 1px rgba(0, 0, 0, 0.25); + background-color: #0088cc; } -.forward { - background-position: -336px -72px; +.pills-vertical > li { + float: none; } -.fast-forward { - background-position: -360px -72px; +.tab-content > .tab-pane, .pill-content > .pill-pane { + display: none; } -.step-forward { - background-position: -384px -72px; +.tab-content > .active, .pill-content > .active { + display: block; } -.eject { - background-position: -408px -72px; +.step-nav { + position: relative; + margin: 0 0 18px; + list-style: none; + line-height: 30px; + text-align: center; + background-color: #f5f5f5; + -webkit-border-radius: 15px; + -moz-border-radius: 15px; + border-radius: 15px; } -.chevron-left { - background-position: -432px -72px; +.step-nav li { + display: inline; + color: #999999; } -.chevron-right { - background-position: -456px -72px; +.step-nav .prev, .step-nav .next { + position: absolute; + top: 6px; } -.arrow-left { - background-position: -240px -96px; -} -.arrow-right { - background-position: -264px -96px; +.step-nav .prev { + left: 15px; } -.arrow-up { - background-position: -288px -96px; +.step-nav .next { + right: 15px; } -.arrow-down { - background-position: -312px -96px; +.step-nav .dot { + display: inline-block; + width: 10px; + height: 10px; + margin: 0 3px; + text-indent: -999em; + background-color: #999999; + -webkit-border-radius: 5px; + -moz-border-radius: 5px; + border-radius: 5px; + -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.25); + -moz-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.25); + box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.25); } -.share { - background-position: -336px -96px; +.step-nav .dot:hover, .step-nav .active .dot { + background-color: #333333; } -.resize-full { - background-position: -360px -96px; +.subnav { + background-color: #eeeeee; + background-image: -khtml-gradient(linear, left top, left bottom, from(#f5f5f5), to(#eeeeee)); + background-image: -moz-linear-gradient(top, #f5f5f5, #eeeeee); + background-image: -ms-linear-gradient(top, #f5f5f5, #eeeeee); + background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #f5f5f5), color-stop(100%, #eeeeee)); + background-image: -webkit-linear-gradient(top, #f5f5f5, #eeeeee); + background-image: -o-linear-gradient(top, #f5f5f5, #eeeeee); + background-image: linear-gradient(top, #f5f5f5, #eeeeee); + background-repeat: repeat-x; + filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#f5f5f5', endColorstr='#eeeeee', GradientType=0); + -webkit-box-shadow: inset 0 1px 0 #ffffff, 0 0 5px rgba(0, 0, 0, 0.5); + -moz-box-shadow: inset 0 1px 0 #ffffff, 0 0 5px rgba(0, 0, 0, 0.5); + box-shadow: inset 0 1px 0 #ffffff, 0 0 5px rgba(0, 0, 0, 0.5); } -.resize-small { - background-position: -384px -96px; +.subnav a { + padding: 8px 10px; + font-size: 12px; + color: #0088cc; + text-shadow: 0 1px 0 #fff; + border-left: 1px solid #f9f9f9; + border-right: 1px solid #e5e5e5; } -.plus { - background-position: -408px -96px; +.subnav a:hover { + color: #005580; + background-color: #eee; } -.minus { - background-position: -432px -96px; +.subnav li:first-child a { + border-left: 0; + -webkit-border-radius: 6px 0 0 6px; + -moz-border-radius: 6px 0 0 6px; + border-radius: 6px 0 0 6px; } -.asterisk { - background-position: -456px -96px; +.subnav li:last-child a { + border-right: 0; + -webkit-border-radius: 0 6px 6px 0; + -moz-border-radius: 0 6px 6px 0; + border-radius: 0 6px 6px 0; } -.dropdown { - position: relative; +.subnav ul .active > a { + color: #333333; + background-color: #eee; } -.dropdown-toggle:after { - display: inline-block; - width: 0; - height: 0; - margin-top: 8px; - margin-left: 6px; - text-indent: -99999px; - vertical-align: top; - border-left: 4px solid transparent; - border-right: 4px solid transparent; - border-top: 4px solid #ffffff; - filter: alpha(opacity=30); - -moz-opacity: 0.3; - opacity: 0.3; - content: "↓"; +.side-nav { + padding: 9px 0; } -.dropdown:hover .dropdown-toggle:after { - filter: alpha(opacity=100); - -moz-opacity: 1; - opacity: 1; +.side-nav .nav-label, .side-nav .nav-item { + display: block; + padding: 3px 16px; + text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5); } -.dropdown-menu { - position: absolute; - top: 40px; - z-index: 900; - float: left; - display: none; - min-width: 160px; - max-width: 220px; - _width: 160px; - padding: 6px 0; - margin-left: 0; - margin-right: 0; - background-color: #ffffff; - 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; - zoom: 1; +.side-nav .nav-label { + font-size: 11px; + line-height: 18px; + color: #333333; + text-transform: uppercase; } -.dropdown-menu li { - float: none; - display: block; - background-color: none; +.side-nav .nav-group { + margin: 0 -1px; + list-style: none; } -.dropdown-menu .divider { - height: 1px; - margin: 5px 0; - overflow: hidden; - background-color: #eee; - border-bottom: 1px solid #ffffff; +.side-nav .nav-item { + font-weight: bold; } -.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; +.side-nav .nav-item i { + vertical-align: -2px; } -.topbar .dropdown-menu a:hover, .dropdown-menu a:hover { - color: #404040; +.side-nav .nav-item:hover { text-decoration: none; - background-color: #dddddd; - 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); +} +.side-nav .active .nav-item { + color: #fff; + text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.3); + background-color: #aaaaaa; + background-image: -khtml-gradient(linear, left top, left bottom, from(#cccccc), to(#aaaaaa)); + background-image: -moz-linear-gradient(top, #cccccc, #aaaaaa); + background-image: -ms-linear-gradient(top, #cccccc, #aaaaaa); + background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #cccccc), color-stop(100%, #aaaaaa)); + background-image: -webkit-linear-gradient(top, #cccccc, #aaaaaa); + background-image: -o-linear-gradient(top, #cccccc, #aaaaaa); + background-image: linear-gradient(top, #cccccc, #aaaaaa); background-repeat: repeat-x; - filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#eeeeee', endColorstr='#dddddd', GradientType=0); - -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); + filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#cccccc', endColorstr='#aaaaaa', GradientType=0); + -webkit-box-shadow: inset 0 1px 0 rgba(0, 0, 0, 0.05), inset 0 -1px 0 rgba(0, 0, 0, 0.05); + -moz-box-shadow: inset 0 1px 0 rgba(0, 0, 0, 0.05), inset 0 -1px 0 rgba(0, 0, 0, 0.05); + box-shadow: inset 0 1px 0 rgba(0, 0, 0, 0.05), inset 0 -1px 0 rgba(0, 0, 0, 0.05); } -.dropdown.open .dropdown-toggle { - color: #ffffff; - background: #ccc; - background: rgba(0, 0, 0, 0.3); +.breadcrumb { + padding: 7px 14px; + margin: 0 0 18px; + background-color: #f5f5f5; + 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); + background-repeat: repeat-x; + 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; } -.dropdown.open .dropdown-menu { - display: block; +.breadcrumb li { + display: inline; + text-shadow: 0 1px 0 #ffffff; } -.tabs, .pills { - padding: 0; - margin: 0 0 20px; - list-style: none; - zoom: 1; +.breadcrumb .divider { + padding: 0 5px; + color: #999999; } -.tabs:before, -.pills:before, -.tabs:after, -.pills:after { - display: table; - *display: inline; - content: ""; - zoom: 1; +.breadcrumb .active a { + color: #333333; } -.tabs:after, .pills:after { - clear: both; +.pagination { + height: 36px; + margin: 18px 0; } -.tabs > li, .pills > li { - float: left; +.pagination ul { + display: inline-block; + *display: inline; + /* IE7 inline-block hack */ + + *zoom: 1; + 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); } -.tabs > li > a, .pills > li > a { - display: block; +.pagination li { + display: inline; } -.tabs { - border-color: #ddd; - border-style: solid; - border-width: 0 0 1px; +.pagination a { + float: left; + padding: 0 14px; + line-height: 34px; + text-decoration: none; + border-right: 1px solid; + border-right-color: #ddd; + border-right-color: rgba(0, 0, 0, 0.15); + *border-right-color: #ddd; + /* IE6-7 */ + } -.tabs > li { - position: relative; - margin-bottom: -1px; +.pagination a:hover, .pagination .active a { + background-color: #c7eefe; } -.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; +.pagination .disabled a, .pagination .disabled a:hover { + color: #999999; + background-color: transparent; } -.tabs > li > a:hover { - text-decoration: none; - background-color: #eee; - border-color: #eee #eee #ddd; +.pagination .next a { + border: 0; } -.tabs .active > a, .tabs .active > a:hover { - color: #808080; - background-color: #ffffff; - border: 1px solid #ddd; - border-bottom-color: transparent; - cursor: default; +.pagination.centered { + text-align: center; } -.tabbable { - margin-bottom: 18px; +.modal-backdrop { + position: fixed; + top: 0; + right: 0; + bottom: 0; + left: 0; + z-index: 10000; + background-color: #000000; } -.tabbable .tabs { - margin-bottom: 0; - border-bottom: 0; +.modal-backdrop.fade { + opacity: 0; } -.tabbable .tab-content { - padding: 19px; - border: 1px solid #ddd; +.modal-backdrop, .modal-backdrop.fade.in { + filter: alpha(opacity=80); + -moz-opacity: 0.8; + opacity: 0.8; } -.tabbable.tabs-bottom .tabs > li { - margin-top: -1px; - margin-bottom: 0; +.modal { + position: fixed; + top: 50%; + left: 50%; + z-index: 11000; + max-height: 500px; + overflow: auto; + width: 560px; + margin: -250px 0 0 -250px; + background-color: #ffffff; + border: 1px solid #999; + border: 1px solid rgba(0, 0, 0, 0.3); + *border: 1px solid #999; + /* IE6-7 */ + + -webkit-border-radius: 6px; + -moz-border-radius: 6px; + border-radius: 6px; + -webkit-box-shadow: 0 3px 7px rgba(0, 0, 0, 0.3); + -moz-box-shadow: 0 3px 7px rgba(0, 0, 0, 0.3); + box-shadow: 0 3px 7px rgba(0, 0, 0, 0.3); + -webkit-background-clip: padding-box; + -moz-background-clip: padding-box; + background-clip: padding-box; } -.tabbable.tabs-bottom .tabs > li > a { - -webkit-border-radius: 0 0 4px 4px; - -moz-border-radius: 0 0 4px 4px; - border-radius: 0 0 4px 4px; +.modal .close { + margin-top: 7px; } -.tabbable.tabs-bottom .tabs > li > a:hover { - border-bottom-color: transparent; - border-top-color: #ddd; +.modal.fade { + -webkit-transition: opacity .3s linear, top .3s ease-out; + -moz-transition: opacity .3s linear, top .3s ease-out; + -ms-transition: opacity .3s linear, top .3s ease-out; + -o-transition: opacity .3s linear, top .3s ease-out; + transition: opacity .3s linear, top .3s ease-out; + top: -25%; } -.tabbable.tabs-bottom .tabs > .active > a, .tabbable.tabs-bottom .tabs > .active > a:hover { - border-color: transparent #ddd #ddd #ddd; +.modal.fade.in { + top: 50%; } -.tabbable.tabs-left, .tabbable.tabs-right { +.modal-header { + padding: 5px 15px; + border-bottom: 1px solid #eee; +} +.modal-body { + padding: 15px; +} +.modal-footer { + padding: 14px 15px 15px; + margin-bottom: 0; + background-color: #f5f5f5; + border-top: 1px solid #ddd; + -webkit-border-radius: 0 0 6px 6px; + -moz-border-radius: 0 0 6px 6px; + border-radius: 0 0 6px 6px; + -webkit-box-shadow: inset 0 1px 0 #ffffff; + -moz-box-shadow: inset 0 1px 0 #ffffff; + box-shadow: inset 0 1px 0 #ffffff; zoom: 1; } -.tabbable.tabs-left:before, -.tabbable.tabs-right:before, -.tabbable.tabs-left:after, -.tabbable.tabs-right:after { +.modal-footer:before, .modal-footer:after { display: table; *display: inline; content: ""; zoom: 1; } -.tabbable.tabs-left:after, .tabbable.tabs-right:after { +.modal-footer:after { clear: both; } -.tabbable.tabs-left .tabs, .tabbable.tabs-right .tabs { - width: 100px; -} -.tabbable.tabs-left .tabs > li, .tabbable.tabs-right .tabs > li { - float: none; - margin-bottom: -1px; +.modal-footer .btn { + float: right; + margin-left: 5px; } -.tabbable.tabs-left .tabs > li > a, .tabbable.tabs-right .tabs > li > a { - margin-bottom: 2px; +.twipsy { + position: absolute; + z-index: 1000; + display: block; + visibility: visible; + padding: 5px; + font-size: 11px; + filter: alpha(opacity=0); + -moz-opacity: 0; + opacity: 0; } -.tabbable.tabs-left .tabs > li > a:hover, .tabbable.tabs-right .tabs > li > a:hover { - border-color: transparent; +.twipsy.in { + filter: alpha(opacity=80); + -moz-opacity: 0.8; + opacity: 0.8; } -.tabbable.tabs-left .tab-content { - margin-left: 100px; +.twipsy.top { + margin-top: -2px; } -.tabbable.tabs-left .tabs { - float: left; +.twipsy.right { + margin-left: 2px; } -.tabbable.tabs-left .tabs > li { - margin-right: -1px; +.twipsy.bottom { + margin-top: 2px; } -.tabbable.tabs-left .tabs > li > a { - margin-right: 0; - -webkit-border-radius: 4px 0 0 4px; - -moz-border-radius: 4px 0 0 4px; - border-radius: 4px 0 0 4px; +.twipsy.left { + margin-left: -2px; } -.tabbable.tabs-left .tabs > li > a:hover { - border-right-color: #ddd; +.twipsy.top .twipsy-arrow { + bottom: 0; + left: 50%; + margin-left: -5px; + border-left: 5px solid transparent; + border-right: 5px solid transparent; + border-top: 5px solid #000000; } -.tabbable.tabs-left .tabs .active > a, .tabbable.tabs-left .tabs .active > a:hover { - border-color: #ddd; - border-right-color: transparent; +.twipsy.left .twipsy-arrow { + top: 50%; + right: 0; + margin-top: -5px; + border-top: 5px solid transparent; + border-bottom: 5px solid transparent; + border-left: 5px solid #000000; } -.tabbable.tabs-right .tab-content { - margin-right: 100px; +.twipsy.bottom .twipsy-arrow { + top: 0; + left: 50%; + margin-left: -5px; + border-left: 5px solid transparent; + border-right: 5px solid transparent; + border-bottom: 5px solid #000000; } -.tabbable.tabs-right .tabs { - float: right; +.twipsy.right .twipsy-arrow { + top: 50%; + left: 0; + margin-top: -5px; + border-top: 5px solid transparent; + border-bottom: 5px solid transparent; + border-right: 5px solid #000000; } -.tabbable.tabs-right .tabs > li { - margin-left: -1px; +.twipsy-inner { + max-width: 200px; + padding: 3px 8px; + color: white; + text-align: center; + text-decoration: none; + background-color: #000000; + -webkit-border-radius: 4px; + -moz-border-radius: 4px; + border-radius: 4px; } -.tabbable.tabs-right .tabs > li > a { - margin-left: 0; - -webkit-border-radius: 0 4px 4px 0; - -moz-border-radius: 0 4px 4px 0; - border-radius: 0 4px 4px 0; +.twipsy-arrow { + position: absolute; + width: 0; + height: 0; } -.tabbable.tabs-right .tabs > li > a:hover { - border-left-color: #ddd; +.popover { + position: absolute; + top: 0; + left: 0; + z-index: 1000; + display: none; + padding: 5px; } -.tabbable.tabs-right .tabs .active > a, .tabbable.tabs-right .tabs .active > a:hover { - border-color: #ddd; - border-left-color: transparent; +.popover.top { + margin-top: -5px; } -.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; +.popover.right { margin-left: 5px; } -.tabs li.open.menu .menu, .tabs .open.dropdown .dropdown-toggle { - border-color: #999; +.popover.bottom { + margin-top: 5px; } -.tabs li.open a.menu:after, .tabs .dropdown.open .dropdown-toggle:after { - border-top-color: #555; +.popover.left { + margin-left: -5px; } -.pills > li > a { - padding: 0 15px; - margin: 5px 3px 5px 0; - line-height: 30px; - text-shadow: 0 1px 1px #ffffff; - -webkit-border-radius: 15px; - -moz-border-radius: 15px; - border-radius: 15px; +.popover.top .arrow { + bottom: 0; + left: 50%; + margin-left: -5px; + border-left: 5px solid transparent; + border-right: 5px solid transparent; + border-top: 5px solid #000000; } -.pills > li > a:hover { - color: #ffffff; - text-decoration: none; - text-shadow: 0 1px 1px rgba(0, 0, 0, 0.25); - background-color: #00438a; +.popover.right .arrow { + top: 50%; + left: 0; + margin-top: -5px; + border-top: 5px solid transparent; + border-bottom: 5px solid transparent; + border-right: 5px solid #000000; } -.pills .active > a { - color: #ffffff; - text-shadow: 0 1px 1px rgba(0, 0, 0, 0.25); - background-color: #0069d6; +.popover.bottom .arrow { + top: 0; + left: 50%; + margin-left: -5px; + border-left: 5px solid transparent; + border-right: 5px solid transparent; + border-bottom: 5px solid #000000; } -.pills-vertical > li { - float: none; +.popover.left .arrow { + top: 50%; + right: 0; + margin-top: -5px; + border-top: 5px solid transparent; + border-bottom: 5px solid transparent; + border-left: 5px solid #000000; } -.tab-content > .tab-pane, .pill-content > .pill-pane { - display: none; +.popover .arrow { + position: absolute; + width: 0; + height: 0; } -.tab-content > .active, .pill-content > .active { - display: block; +.popover .inner { + padding: 3px; + width: 280px; + overflow: hidden; + background-color: #000000; + background-color: rgba(0, 0, 0, 0.8); + -webkit-border-radius: 6px; + -moz-border-radius: 6px; + border-radius: 6px; + -webkit-box-shadow: 0 3px 7px rgba(0, 0, 0, 0.3); + -moz-box-shadow: 0 3px 7px rgba(0, 0, 0, 0.3); + box-shadow: 0 3px 7px rgba(0, 0, 0, 0.3); } -.step-nav { - position: relative; - margin: 0 0 18px; - list-style: none; - line-height: 30px; - text-align: center; +.popover .title { + padding: 9px 15px; + line-height: 1; background-color: #f5f5f5; - -webkit-border-radius: 15px; - -moz-border-radius: 15px; - border-radius: 15px; -} -.step-nav li { - display: inline; - color: #bfbfbf; -} -.step-nav .prev, .step-nav .next { - position: absolute; - top: 6px; -} -.step-nav .prev { - left: 15px; + border-bottom: 1px solid #eee; + -webkit-border-radius: 3px 3px 0 0; + -moz-border-radius: 3px 3px 0 0; + border-radius: 3px 3px 0 0; } -.step-nav .next { - right: 15px; +.popover .content { + padding: 14px; + background-color: #ffffff; + -webkit-border-radius: 0 0 3px 3px; + -moz-border-radius: 0 0 3px 3px; + border-radius: 0 0 3px 3px; + -webkit-background-clip: padding-box; + -moz-background-clip: padding-box; + background-clip: padding-box; } -.step-nav .dot { - display: inline-block; - width: 10px; - height: 10px; - margin: 0 3px; - text-indent: -999em; - background-color: #bfbfbf; - -webkit-border-radius: 5px; - -moz-border-radius: 5px; - border-radius: 5px; - -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.25); - -moz-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.25); - box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.25); +.popover .content p, .popover .content ul, .popover .content ol { + margin-bottom: 0; } -.step-nav .dot:hover, .step-nav .active .dot { - background-color: #404040; +.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; } -.subnav { - background-color: #eeeeee; - background-image: -khtml-gradient(linear, left top, left bottom, from(#f5f5f5), to(#eeeeee)); - background-image: -moz-linear-gradient(top, #f5f5f5, #eeeeee); - background-image: -ms-linear-gradient(top, #f5f5f5, #eeeeee); - background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #f5f5f5), color-stop(100%, #eeeeee)); - background-image: -webkit-linear-gradient(top, #f5f5f5, #eeeeee); - background-image: -o-linear-gradient(top, #f5f5f5, #eeeeee); - background-image: linear-gradient(top, #f5f5f5, #eeeeee); +.btn.danger, +.alert-message.danger, +.btn.error, +.alert-message.error { + background-color: #c43c35; + 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); background-repeat: repeat-x; - filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#f5f5f5', endColorstr='#eeeeee', GradientType=0); - -webkit-box-shadow: inset 0 1px 0 #ffffff, 0 0 5px rgba(0, 0, 0, 0.5); - -moz-box-shadow: inset 0 1px 0 #ffffff, 0 0 5px rgba(0, 0, 0, 0.5); - box-shadow: inset 0 1px 0 #ffffff, 0 0 5px rgba(0, 0, 0, 0.5); -} -.subnav a { - padding: 8px 10px; - font-size: 12px; - color: #0069d6; - text-shadow: 0 1px 0 #fff; - border-left: 1px solid #f9f9f9; - border-right: 1px solid #e5e5e5; -} -.subnav a:hover { - color: #00438a; - background-color: #eee; -} -.subnav li:first-child a { - border-left: 0; - -webkit-border-radius: 6px 0 0 6px; - -moz-border-radius: 6px 0 0 6px; - border-radius: 6px 0 0 6px; -} -.subnav li:last-child a { - border-right: 0; - -webkit-border-radius: 0 6px 6px 0; - -moz-border-radius: 0 6px 6px 0; - border-radius: 0 6px 6px 0; -} -.subnav ul .active > a { - color: #404040; - background-color: #eee; + filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ee5f5b', endColorstr='#c43c35', GradientType=0); + 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); } -.breadcrumb { - padding: 7px 14px; - margin: 0 0 18px; - background-color: #f5f5f5; - 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); +.btn.success, .alert-message.success { + background-color: #57a957; + background-image: -khtml-gradient(linear, left top, left bottom, from(#62c462), to(#57a957)); + background-image: -moz-linear-gradient(top, #62c462, #57a957); + background-image: -ms-linear-gradient(top, #62c462, #57a957); + background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #62c462), color-stop(100%, #57a957)); + background-image: -webkit-linear-gradient(top, #62c462, #57a957); + background-image: -o-linear-gradient(top, #62c462, #57a957); + background-image: linear-gradient(top, #62c462, #57a957); background-repeat: repeat-x; - 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; + filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#62c462', endColorstr='#57a957', GradientType=0); + border-color: #57a957 #57a957 #3d773d; + border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25); } -.pagination { - height: 36px; - margin: 18px 0; +.btn.info, .alert-message.info { + background-color: #339bb9; + background-image: -khtml-gradient(linear, left top, left bottom, from(#5bc0de), to(#339bb9)); + background-image: -moz-linear-gradient(top, #5bc0de, #339bb9); + background-image: -ms-linear-gradient(top, #5bc0de, #339bb9); + background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #5bc0de), color-stop(100%, #339bb9)); + background-image: -webkit-linear-gradient(top, #5bc0de, #339bb9); + background-image: -o-linear-gradient(top, #5bc0de, #339bb9); + background-image: linear-gradient(top, #5bc0de, #339bb9); + background-repeat: repeat-x; + filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#5bc0de', endColorstr='#339bb9', GradientType=0); + border-color: #339bb9 #339bb9 #22697d; + border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25); } -.pagination ul { +.btn { display: inline-block; - *display: inline; - /* IE7 inline-block hack */ - - *zoom: 1; - 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 li { - display: inline; + padding: 5px 14px 6px; + font-size: 13px; + line-height: normal; + color: #333; + text-shadow: 0 1px 1px rgba(255, 255, 255, 0.75); + background-color: #e6e6e6; + background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#ffffff), color-stop(25%, #ffffff), to(#e6e6e6)); + background-image: -webkit-linear-gradient(#ffffff, #ffffff 25%, #e6e6e6); + background-image: -moz-linear-gradient(top, #ffffff, #ffffff 25%, #e6e6e6); + background-image: -ms-linear-gradient(#ffffff, #ffffff 25%, #e6e6e6); + background-image: -o-linear-gradient(#ffffff, #ffffff 25%, #e6e6e6); + background-image: linear-gradient(#ffffff, #ffffff 25%, #e6e6e6); + background-repeat: no-repeat; + filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#e6e6e6', GradientType=0); + border: 1px solid #ccc; + border-bottom-color: #bbb; + -webkit-border-radius: 4px; + -moz-border-radius: 4px; + border-radius: 4px; + -webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05); + -moz-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05); + box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05); + cursor: pointer; + -webkit-transition: 0.1s linear all; + -moz-transition: 0.1s linear all; + -ms-transition: 0.1s linear all; + -o-transition: 0.1s linear all; + transition: 0.1s linear all; } -.pagination a { - float: left; - padding: 0 14px; - line-height: 34px; +.btn:hover { + color: #333333; text-decoration: none; - border-right: 1px solid; - border-right-color: #ddd; - border-right-color: rgba(0, 0, 0, 0.15); - *border-right-color: #ddd; - /* IE6-7 */ - -} -.pagination a:hover, .pagination .active a { - background-color: #c7eefe; -} -.pagination .disabled a, .pagination .disabled a:hover { - color: #bfbfbf; - background-color: transparent; + background-position: 0 -15px; } -.pagination .next a { - border: 0; +.btn:focus { + outline: 1px dotted #666; } -.pagination.centered { - text-align: center; +.btn.primary { + color: #ffffff; + text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25); + background-color: #0064cd; + background-image: -khtml-gradient(linear, left top, left bottom, from(#049cdb), to(#0064cd)); + background-image: -moz-linear-gradient(top, #049cdb, #0064cd); + background-image: -ms-linear-gradient(top, #049cdb, #0064cd); + background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #049cdb), color-stop(100%, #0064cd)); + background-image: -webkit-linear-gradient(top, #049cdb, #0064cd); + background-image: -o-linear-gradient(top, #049cdb, #0064cd); + background-image: linear-gradient(top, #049cdb, #0064cd); + background-repeat: repeat-x; + filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#049cdb', endColorstr='#0064cd', GradientType=0); + border-color: #0064cd #0064cd #003f81; + border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25); } -.modal-backdrop { - position: fixed; - top: 0; - right: 0; - bottom: 0; - left: 0; - z-index: 10000; - background-color: #000000; +.btn.active, .btn:active { + -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); } -.modal-backdrop.fade { - opacity: 0; +.btn.disabled { + cursor: default; + background-image: none; + filter: progid:DXImageTransform.Microsoft.gradient(enabled = false); + filter: alpha(opacity=65); + -moz-opacity: 0.65; + opacity: 0.65; + -webkit-box-shadow: none; + -moz-box-shadow: none; + box-shadow: none; } -.modal-backdrop, .modal-backdrop.fade.in { - filter: alpha(opacity=80); - -moz-opacity: 0.8; - opacity: 0.8; +.btn[disabled] { + cursor: default; + background-image: none; + filter: progid:DXImageTransform.Microsoft.gradient(enabled = false); + filter: alpha(opacity=65); + -moz-opacity: 0.65; + opacity: 0.65; + -webkit-box-shadow: none; + -moz-box-shadow: none; + box-shadow: none; } -.modal { - position: fixed; - top: 50%; - left: 50%; - z-index: 11000; - max-height: 500px; - overflow: auto; - width: 560px; - margin: -250px 0 0 -250px; - background-color: #ffffff; - border: 1px solid #999; - border: 1px solid rgba(0, 0, 0, 0.3); - *border: 1px solid #999; - /* IE6-7 */ - +.btn.large { + padding: 9px 14px 9px; + font-size: 15px; + line-height: normal; -webkit-border-radius: 6px; -moz-border-radius: 6px; border-radius: 6px; - -webkit-box-shadow: 0 3px 7px rgba(0, 0, 0, 0.3); - -moz-box-shadow: 0 3px 7px rgba(0, 0, 0, 0.3); - box-shadow: 0 3px 7px rgba(0, 0, 0, 0.3); - -webkit-background-clip: padding-box; - -moz-background-clip: padding-box; - background-clip: padding-box; -} -.modal .close { - margin-top: 7px; -} -.modal.fade { - -webkit-transition: opacity .3s linear, top .3s ease-out; - -moz-transition: opacity .3s linear, top .3s ease-out; - -ms-transition: opacity .3s linear, top .3s ease-out; - -o-transition: opacity .3s linear, top .3s ease-out; - transition: opacity .3s linear, top .3s ease-out; - top: -25%; } -.modal.fade.in { - top: 50%; +.btn.small { + padding: 7px 9px 7px; + font-size: 11px; } -.modal-header { - padding: 5px 15px; - border-bottom: 1px solid #eee; +:root .alert-message, :root .btn { + border-radius: 0 \0; } -.modal-body { - padding: 15px; +button.btn::-moz-focus-inner, input[type=submit].btn::-moz-focus-inner { + padding: 0; + border: 0; } -.modal-footer { - padding: 14px 15px 15px; - margin-bottom: 0; - background-color: #f5f5f5; - border-top: 1px solid #ddd; - -webkit-border-radius: 0 0 6px 6px; - -moz-border-radius: 0 0 6px 6px; - border-radius: 0 0 6px 6px; - -webkit-box-shadow: inset 0 1px 0 #ffffff; - -moz-box-shadow: inset 0 1px 0 #ffffff; - box-shadow: inset 0 1px 0 #ffffff; +.btn-toolbar { zoom: 1; } -.modal-footer:before, .modal-footer:after { +.btn-toolbar:before, .btn-toolbar:after { display: table; *display: inline; content: ""; zoom: 1; } -.modal-footer:after { +.btn-toolbar:after { clear: both; } -.modal-footer .btn { - float: right; - margin-left: 5px; -} -.twipsy { - position: absolute; - z-index: 1000; - display: block; - visibility: visible; - padding: 5px; - font-size: 11px; - filter: alpha(opacity=0); - -moz-opacity: 0; - opacity: 0; +.btn-toolbar .btn-group { + float: left; + margin-right: 10px; } -.twipsy.in { - filter: alpha(opacity=80); - -moz-opacity: 0.8; - opacity: 0.8; +.btn-group { + zoom: 1; } -.twipsy.top { - margin-top: -2px; +.btn-group:before, .btn-group:after { + display: table; + *display: inline; + content: ""; + zoom: 1; } -.twipsy.right { - margin-left: 2px; +.btn-group:after { + clear: both; } -.twipsy.bottom { - margin-top: 2px; +.btn-group .btn { + position: relative; + float: left; + margin-left: -1px; + -webkit-border-radius: 0; + -moz-border-radius: 0; + border-radius: 0; } -.twipsy.left { - margin-left: -2px; +.btn-group .btn:first-child { + margin-left: 0; + -webkit-border-top-left-radius: 4px; + -moz-border-radius-topleft: 4px; + border-top-left-radius: 4px; + -webkit-border-bottom-left-radius: 4px; + -moz-border-radius-bottomleft: 4px; + border-bottom-left-radius: 4px; } -.twipsy.top .twipsy-arrow { - bottom: 0; - left: 50%; - margin-left: -5px; - border-left: 5px solid transparent; - border-right: 5px solid transparent; - border-top: 5px solid #000000; +.btn-group .btn:last-child { + -webkit-border-top-right-radius: 4px; + -moz-border-radius-topright: 4px; + border-top-right-radius: 4px; + -webkit-border-bottom-right-radius: 4px; + -moz-border-radius-bottomright: 4px; + border-bottom-right-radius: 4px; } -.twipsy.left .twipsy-arrow { - top: 50%; - right: 0; - margin-top: -5px; - border-top: 5px solid transparent; - border-bottom: 5px solid transparent; - border-left: 5px solid #000000; +.btn-group .btn.large:first-child { + margin-left: 0; + -webkit-border-top-left-radius: 6px; + -moz-border-radius-topleft: 6px; + border-top-left-radius: 6px; + -webkit-border-bottom-left-radius: 6px; + -moz-border-radius-bottomleft: 6px; + border-bottom-left-radius: 6px; } -.twipsy.bottom .twipsy-arrow { - top: 0; - left: 50%; - margin-left: -5px; - border-left: 5px solid transparent; - border-right: 5px solid transparent; - border-bottom: 5px solid #000000; +.btn-group .btn.large:last-child { + -webkit-border-top-right-radius: 6px; + -moz-border-radius-topright: 6px; + border-top-right-radius: 6px; + -webkit-border-bottom-right-radius: 6px; + -moz-border-radius-bottomright: 6px; + border-bottom-right-radius: 6px; } -.twipsy.right .twipsy-arrow { - top: 50%; - left: 0; - margin-top: -5px; - border-top: 5px solid transparent; - border-bottom: 5px solid transparent; - border-right: 5px solid #000000; +.btn-group .btn:hover, .btn-group .btn:focus, .btn-group .btn:active { + z-index: 2; } -.twipsy-inner { - max-width: 200px; - padding: 3px 8px; - color: white; - text-align: center; - text-decoration: none; - background-color: #000000; +.alert-message { + position: relative; + padding: 7px 15px; + margin-bottom: 18px; + color: #333333; + text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5); + background-color: #eedc94; + background-image: -khtml-gradient(linear, left top, left bottom, from(#fceec1), to(#eedc94)); + background-image: -moz-linear-gradient(top, #fceec1, #eedc94); + background-image: -ms-linear-gradient(top, #fceec1, #eedc94); + background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #fceec1), color-stop(100%, #eedc94)); + background-image: -webkit-linear-gradient(top, #fceec1, #eedc94); + background-image: -o-linear-gradient(top, #fceec1, #eedc94); + background-image: linear-gradient(top, #fceec1, #eedc94); + background-repeat: repeat-x; + filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#fceec1', endColorstr='#eedc94', GradientType=0); + border-color: #eedc94 #eedc94 #e4c652; + border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25); + border-width: 1px; + border-style: solid; -webkit-border-radius: 4px; -moz-border-radius: 4px; border-radius: 4px; + -webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.25); + -moz-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.25); + box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.25); } -.twipsy-arrow { - position: absolute; - width: 0; - height: 0; -} -.popover { - position: absolute; - top: 0; - left: 0; - z-index: 1000; - display: none; - padding: 5px; +.alert-message .close { + *margin-top: 3px; + /* IE7 spacing */ + } -.popover.top { - margin-top: -5px; +.alert-message h5 { + line-height: 18px; } -.popover.right { - margin-left: 5px; +.alert-message p { + margin-bottom: 0; } -.popover.bottom { +.alert-message div { margin-top: 5px; + margin-bottom: 2px; + line-height: 28px; } -.popover.left { - margin-left: -5px; -} -.popover.top .arrow { - bottom: 0; - left: 50%; - margin-left: -5px; - border-left: 5px solid transparent; - border-right: 5px solid transparent; - border-top: 5px solid #000000; -} -.popover.right .arrow { - top: 50%; - left: 0; - margin-top: -5px; - border-top: 5px solid transparent; - border-bottom: 5px solid transparent; - border-right: 5px solid #000000; -} -.popover.bottom .arrow { - top: 0; - left: 50%; - margin-left: -5px; - border-left: 5px solid transparent; - border-right: 5px solid transparent; - border-bottom: 5px solid #000000; -} -.popover.left .arrow { - top: 50%; - right: 0; - margin-top: -5px; - border-top: 5px solid transparent; - border-bottom: 5px solid transparent; - border-left: 5px solid #000000; -} -.popover .arrow { - position: absolute; - width: 0; - height: 0; -} -.popover .inner { - padding: 3px; - width: 280px; - overflow: hidden; - background-color: #000000; - background-color: rgba(0, 0, 0, 0.8); - -webkit-border-radius: 6px; - -moz-border-radius: 6px; - border-radius: 6px; - -webkit-box-shadow: 0 3px 7px rgba(0, 0, 0, 0.3); - -moz-box-shadow: 0 3px 7px rgba(0, 0, 0, 0.3); - box-shadow: 0 3px 7px rgba(0, 0, 0, 0.3); +.alert-message .btn { + -webkit-box-shadow: 0 1px 0 rgba(255, 255, 255, 0.25); + -moz-box-shadow: 0 1px 0 rgba(255, 255, 255, 0.25); + box-shadow: 0 1px 0 rgba(255, 255, 255, 0.25); } -.popover .title { - padding: 9px 15px; - line-height: 1; - background-color: #f5f5f5; - border-bottom: 1px solid #eee; - -webkit-border-radius: 3px 3px 0 0; - -moz-border-radius: 3px 3px 0 0; - border-radius: 3px 3px 0 0; +.alert-message.error, .alert-message.success, .alert-message.info { + text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25); } -.popover .content { +.alert-message.block-message { padding: 14px; - background-color: #ffffff; - -webkit-border-radius: 0 0 3px 3px; - -moz-border-radius: 0 0 3px 3px; - border-radius: 0 0 3px 3px; - -webkit-background-clip: padding-box; - -moz-background-clip: padding-box; - background-clip: padding-box; -} -.popover .content p, .popover .content ul, .popover .content ol { - margin-bottom: 0; + background-image: none; + background-color: #fdf5d9; + filter: progid:DXImageTransform.Microsoft.gradient(enabled = false); + border-color: #fceec1; + -webkit-box-shadow: none; + -moz-box-shadow: none; + box-shadow: none; } -.side-nav { - padding: 9px 0; +.alert-message.block-message ul, .alert-message.block-message p { + margin-right: 30px; } -.side-nav .nav-label, .side-nav .nav-item { - display: block; - padding: 3px 16px; - text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5); +.alert-message.block-message ul { + margin-bottom: 0; } -.side-nav .nav-label { - font-size: 11px; - line-height: 18px; - color: #404040; - text-transform: uppercase; +.alert-message.block-message li { + color: #333333; } -.side-nav .nav-group { - margin: 0 -1px; - list-style: none; +.alert-message.block-message .alert-actions { + margin-top: 5px; } -.side-nav .nav-item { - font-weight: bold; +.alert-message.block-message.error, .alert-message.block-message.success, .alert-message.block-message.info { + color: #333333; + text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5); } -.side-nav .nav-item i { - vertical-align: -2px; +.alert-message.block-message.error { + background-color: #fddfde; + border-color: #fbc7c6; } -.side-nav .nav-item:hover { - text-decoration: none; +.alert-message.block-message.success { + background-color: #d1eed1; + border-color: #bfe7bf; } -.side-nav .active .nav-item { - color: #fff; - text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.3); - background-color: #aaaaaa; - background-image: -khtml-gradient(linear, left top, left bottom, from(#cccccc), to(#aaaaaa)); - background-image: -moz-linear-gradient(top, #cccccc, #aaaaaa); - background-image: -ms-linear-gradient(top, #cccccc, #aaaaaa); - background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #cccccc), color-stop(100%, #aaaaaa)); - background-image: -webkit-linear-gradient(top, #cccccc, #aaaaaa); - background-image: -o-linear-gradient(top, #cccccc, #aaaaaa); - background-image: linear-gradient(top, #cccccc, #aaaaaa); - background-repeat: repeat-x; - filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#cccccc', endColorstr='#aaaaaa', GradientType=0); - -webkit-box-shadow: inset 0 1px 0 rgba(0, 0, 0, 0.05), inset 0 -1px 0 rgba(0, 0, 0, 0.05); - -moz-box-shadow: inset 0 1px 0 rgba(0, 0, 0, 0.05), inset 0 -1px 0 rgba(0, 0, 0, 0.05); - box-shadow: inset 0 1px 0 rgba(0, 0, 0, 0.05), inset 0 -1px 0 rgba(0, 0, 0, 0.05); +.alert-message.block-message.info { + background-color: #ddf4fb; + border-color: #c6edf9; } .thumbnails { margin-left: -20px; @@ -2898,7 +2838,7 @@ i { box-shadow: 0 1px 1px rgba(0, 0, 0, 0.075); } a.thumbnail:hover { - border-color: #0069d6; + border-color: #0088cc; -webkit-box-shadow: 0 1px 4px rgba(0, 105, 214, 0.25); -moz-box-shadow: 0 1px 4px rgba(0, 105, 214, 0.25); box-shadow: 0 1px 4px rgba(0, 105, 214, 0.25); @@ -2975,6 +2915,29 @@ a.thumbnail:hover { text-decoration: none; background: rgba(0, 0, 0, 0.8); } +.label { + padding: 1px 3px 2px; + font-size: 9.75px; + font-weight: bold; + color: #ffffff; + text-transform: uppercase; + background-color: #999999; + -webkit-border-radius: 3px; + -moz-border-radius: 3px; + border-radius: 3px; +} +.label.important { + background-color: #c43c35; +} +.label.warning { + background-color: #f89406; +} +.label.success { + background-color: #46a546; +} +.label.notice { + background-color: #62cffc; +} .hidden { display: none; visibility: hidden; diff --git a/bootstrap.min.css b/bootstrap.min.css index 4f091262d4..d0ba4dc53e 100644 --- a/bootstrap.min.css +++ b/bootstrap.min.css @@ -20,7 +20,7 @@ button,input[type="button"],input[type="reset"],input[type="submit"]{cursor:poin input[type="search"]{-webkit-appearance:textfield;-webkit-box-sizing:content-box;-moz-box-sizing:content-box;box-sizing:content-box;} input[type="search"]::-webkit-search-decoration{-webkit-appearance:none;} textarea{overflow:auto;vertical-align:top;} -body{margin:0;font-family:"Helvetica Neue",Helvetica,Arial,sans-serif;font-size:13px;line-height:18px;color:#404040;background-color:#ffffff;} +body{margin:0;font-family:"Helvetica Neue",Helvetica,Arial,sans-serif;font-size:13px;line-height:18px;color:#555555;background-color:#ffffff;} .container{width:940px;margin-left:auto;margin-right:auto;zoom:1;}.container:before,.container:after{display:table;*display:inline;content:"";zoom:1;} .container:after{clear:both;} .fluid-container{position:relative;min-width:940px;padding-left:20px;padding-right:20px;zoom:1;}.fluid-container:before,.fluid-container:after{display:table;*display:inline;content:"";zoom:1;} @@ -30,7 +30,7 @@ body{margin:0;font-family:"Helvetica Neue",Helvetica,Arial,sans-serif;font-size: .fluid-sidebar-right{float:right;} .fluid-content{margin-left:240px;} .fluid-container.reverse .fluid-content{margin-left:0;margin-right:240px;} -a{font-weight:inherit;line-height:inherit;color:#0069d6;text-decoration:none;}a:hover{color:#00438a;text-decoration:underline;} +a{font-weight:inherit;line-height:inherit;color:#0088cc;text-decoration:none;}a:hover{color:#005580;text-decoration:underline;} .pull-right{float:right;} .pull-left{float:left;} .hide{display:none;} @@ -61,19 +61,19 @@ a{font-weight:inherit;line-height:inherit;color:#0069d6;text-decoration:none;}a: .offset9{margin-left:740px;} .offset10{margin-left:820px;} .offset11{margin-left:900px;} -p{margin-bottom:9px;font-family:"Helvetica Neue",Helvetica,Arial,sans-serif;font-size:13px;line-height:18px;}p small{font-size:11px;color:#bfbfbf;} -h1,h2,h3,h4,h5,h6{font-weight:bold;color:#404040;text-rendering:optimizelegibility;}h1 small,h2 small,h3 small,h4 small,h5 small,h6 small{color:#bfbfbf;} +p{margin-bottom:9px;font-family:"Helvetica Neue",Helvetica,Arial,sans-serif;font-size:13px;line-height:18px;}p small{font-size:11px;color:#999999;} +h1,h2,h3,h4,h5,h6{font-weight:bold;color:#333333;text-rendering:optimizelegibility;}h1 small,h2 small,h3 small,h4 small,h5 small,h6 small{color:#999999;} h1{font-size:30px;line-height:36px;}h1 small{font-size:18px;} h2{font-size:24px;line-height:36px;}h2 small{font-size:18px;} h3{line-height:27px;font-size:18px;}h3 small{font-size:14px;} h4{font-size:16px;line-height:36px;}h4 small{font-size:12px;} h5{font-size:14px;line-height:18px;} -h6{font-size:13px;line-height:18px;color:#bfbfbf;text-transform:uppercase;} +h6{font-size:13px;line-height:18px;color:#999999;text-transform:uppercase;} ul,ol{margin:13px 0 14px 25px;} ul ul,ul ol,ol ol,ol ul{margin-bottom:0;} ul{list-style:disc;} ol{list-style:decimal;} -li{line-height:18px;color:#404040;} +li{line-height:18px;color:#333333;} ul.unstyled{margin-left:0;list-style:none;} dl{margin-bottom:18px;}dl dt,dl dd{line-height:18px;} dl dt{font-weight:bold;} @@ -81,21 +81,21 @@ dl dd{margin-left:9px;} hr{margin:27px 0;border:0;border-top:1px solid #e5e5e5;border-bottom:1px solid #fff;} strong{font-style:inherit;font-weight:bold;} em{font-style:italic;font-weight:inherit;line-height:inherit;} -.muted{color:#bfbfbf;} +.muted{color:#999999;} abbr{font-size:90%;text-transform:uppercase;border-bottom:1px dotted #ddd;cursor:help;} blockquote{padding-left:15px;margin-bottom:18px;border-left:5px solid #eee;}blockquote p{margin-bottom:0;font-size:300;font-weight:16px;line-height:22.5px;} -blockquote small{display:block;line-height:18px;color:#bfbfbf;}blockquote small:before{content:'\2014 \00A0';} +blockquote small{display:block;line-height:18px;color:#999999;}blockquote small:before{content:'\2014 \00A0';} blockquote.pull-right{float:right;}blockquote.pull-right p,blockquote.pull-right small{text-align:right;} address{display:block;margin-bottom:18px;line-height:18px;} -code,pre{padding:0 3px 2px;font-family:Menlo,Monaco,"Courier New",monospace;font-size:12px;color:#404040;-webkit-border-radius:3px;-moz-border-radius:3px;border-radius:3px;} +code,pre{padding:0 3px 2px;font-family:Menlo,Monaco,"Courier New",monospace;font-size:12px;color:#333333;-webkit-border-radius:3px;-moz-border-radius:3px;border-radius:3px;} code{padding:1px 3px;background-color:#fee9cc;} pre{display:block;padding:8.5px;margin:0 0 9px;font-size:12px;line-height:18px;background-color:#f5f5f5;border:1px solid #ccc;border:1px solid rgba(0, 0, 0, 0.15);-webkit-border-radius:3px;-moz-border-radius:3px;border-radius:3px;white-space:pre;white-space:pre-wrap;word-break:break-all;}pre.prettyprint{margin-bottom:18px;} pre code{padding:0;background-color:transparent;} form{margin-bottom:18px;} -legend{display:block;width:100%;margin-bottom:27px;font-size:19.5px;line-height:36px;color:#404040;border-bottom:1px solid #eee;} +legend{display:block;width:100%;margin-bottom:27px;font-size:19.5px;line-height:36px;color:#333333;border-bottom:1px solid #eee;} label,input,select,textarea{font-family:"Helvetica Neue",Helvetica,Arial,sans-serif;font-size:normal;font-weight:13px;line-height:18px;} -label{display:block;margin-bottom:5px;color:#404040;} -input,textarea,select,.uneditable-input{display:inline-block;width:210px;height:18px;padding:4px;font-size:13px;line-height:18px;color:#808080;border:1px solid #ccc;-webkit-border-radius:3px;-moz-border-radius:3px;border-radius:3px;} +label{display:block;margin-bottom:5px;color:#333333;} +input,textarea,select,.uneditable-input{display:inline-block;width:210px;height:18px;padding:4px;font-size:13px;line-height:18px;color:#555555;border:1px solid #ccc;-webkit-border-radius:3px;-moz-border-radius:3px;border-radius:3px;} input[type=image],input[type=checkbox],input[type=radio]{width:auto;height:auto;padding:0;margin:3px 0;*margin-top:0;line-height:normal;border:none;cursor:pointer;} input[type=file]{padding:initial;line-height:initial;border:initial;background-color:#ffffff;background-color:initial;-webkit-box-shadow:none;-moz-box-shadow:none;box-shadow:none;} input[type=button],input[type=reset],input[type=submit]{width:auto;height:auto;} @@ -141,15 +141,15 @@ input[disabled],select[disabled],textarea[disabled],input[readonly],select[reado .control-group.success .input-prepend .add-on,.control-group.success .input-append .add-on{color:#468847;background-color:#bcddbc;border-color:#468847;} .form-actions{padding:17px 20px 18px;margin-top:18px;margin-bottom:18px;background-color:#f5f5f5;border-top:1px solid #ddd;} .uneditable-input{display:block;background-color:#ffffff;border-color:#eee;-webkit-box-shadow:inset 0 1px 2px rgba(0, 0, 0, 0.025);-moz-box-shadow:inset 0 1px 2px rgba(0, 0, 0, 0.025);box-shadow:inset 0 1px 2px rgba(0, 0, 0, 0.025);cursor:not-allowed;} -:-moz-placeholder{color:#bfbfbf;} -::-webkit-input-placeholder{color:#bfbfbf;} -.help-text{margin-top:5px;margin-bottom:0;color:#bfbfbf;} +:-moz-placeholder{color:#999999;} +::-webkit-input-placeholder{color:#999999;} +.help-text{margin-top:5px;margin-bottom:0;color:#999999;} .help-inline{*position:relative;*top:-5px;display:inline;padding-left:5px;} .help-block{display:block;max-width:600px;} .input-prepend,.input-append{zoom:1;}.input-prepend:before,.input-append:before,.input-prepend:after,.input-append:after{display:table;*display:inline;content:"";zoom:1;} .input-prepend:after,.input-append:after{clear:both;} .input-prepend input,.input-append input{-webkit-border-radius:0 3px 3px 0;-moz-border-radius:0 3px 3px 0;border-radius:0 3px 3px 0;} -.input-prepend .add-on,.input-append .add-on{float:left;display:block;width:auto;min-width:16px;height:18px;margin-right:-1px;padding:4px 4px 4px 5px;font-weight:normal;line-height:18px;color:#bfbfbf;text-align:center;text-shadow:0 1px 0 #ffffff;background-color:#f5f5f5;border:1px solid #ccc;-webkit-border-radius:3px 0 0 3px;-moz-border-radius:3px 0 0 3px;border-radius:3px 0 0 3px;} +.input-prepend .add-on,.input-append .add-on{float:left;display:block;width:auto;min-width:16px;height:18px;margin-right:-1px;padding:4px 4px 4px 5px;font-weight:normal;line-height:18px;color:#999999;text-align:center;text-shadow:0 1px 0 #ffffff;background-color:#f5f5f5;border:1px solid #ccc;-webkit-border-radius:3px 0 0 3px;-moz-border-radius:3px 0 0 3px;border-radius:3px 0 0 3px;} .input-prepend .active,.input-append .active{background-color:#a9dba9;border-color:#46a546;} .input-prepend .add-on{*margin-top:1px;} .input-append input{float:left;-webkit-border-radius:3px 0 0 3px;-moz-border-radius:3px 0 0 3px;border-radius:3px 0 0 3px;} @@ -159,7 +159,7 @@ input[disabled],select[disabled],textarea[disabled],input[readonly],select[reado .control-group>label{font-weight:bold;} .horizontal-form .control-group>label{float:left;width:130px;padding-top:5px;text-align:right;} .horizontal-form .controls{margin-left:150px;} -.horizontal-form .control-list{padding-top:6px;} +.horizontal-form .controls>.radio:first-child,.horizontal-form .controls>.checkbox:first-child{padding-top:6px;} .horizontal-form .form-actions{padding-left:150px;} table{width:100%;margin-bottom:18px;} th,td{padding:8px;line-height:18px;text-align:left;border-top:1px solid #ddd;} @@ -173,80 +173,6 @@ td{vertical-align:top;} .bordered-table thead:last-child tr:last-child th:first-child,.bordered-table tbody:last-child tr:last-child td:first-child{-webkit-border-radius:0 0 0 4px;-moz-border-radius:0 0 0 4px;border-radius:0 0 0 4px;} .bordered-table thead:last-child tr:last-child th:last-child,.bordered-table tbody:last-child tr:last-child td:last-child{-webkit-border-radius:0 0 4px 0;-moz-border-radius:0 0 4px 0;border-radius:0 0 4px 0;} .striped-table tbody tr:nth-child(odd) td,.striped-table tbody tr:nth-child(odd) th{background-color:#f9f9f9;} -.navbar{overflow:visible;} -.navbar-inner{background-color:#222222;background-color:#222222;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);background-repeat:repeat-x;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);} -.navbar .brand a:hover,.navbar ul .active>a{color:#ffffff;text-decoration:none;background-color:#333333;background-color:rgba(255, 255, 255, 0.05);} -.navbar .brand{float:left;display:block;padding:8px 20px 12px;margin-left:-20px;font-size:20px;font-weight:200;line-height:1;color:#ffffff;} -.navbar p{margin:0;line-height:40px;}.navbar p a:hover{color:#ffffff;background-color:transparent;} -.navbar .btn{margin-top:5px;} -.navbar-search{position:relative;float:left;margin-top:6px;margin-bottom:0;}.navbar-search .search-query{padding:4px 9px;font-family:"Helvetica Neue",Helvetica,Arial,sans-serif;font-size:13px;font-weight:normal;line-height:1;color:#ffffff;color:rgba(255, 255, 255, 0.75);background-color:#444;background-color:rgba(255, 255, 255, 0.3);border:1px solid #111;-webkit-box-shadow:inset 0 1px 2px rgba(0, 0, 0, 0.1),0 1px 0px rgba(255, 255, 255, 0.15);-moz-box-shadow:inset 0 1px 2px rgba(0, 0, 0, 0.1),0 1px 0px rgba(255, 255, 255, 0.15);box-shadow:inset 0 1px 2px rgba(0, 0, 0, 0.1),0 1px 0px rgba(255, 255, 255, 0.15);-webkit-transition:none;-moz-transition:none;-ms-transition:none;-o-transition:none;transition:none;}.navbar-search .search-query:-moz-placeholder{color:#e6e6e6;} -.navbar-search .search-query::-webkit-input-placeholder{color:#e6e6e6;} -.navbar-search .search-query:hover{color:#ffffff;background-color:#bfbfbf;background-color:rgba(255, 255, 255, 0.5);} -.navbar-search .search-query:focus,.navbar-search .search-query.focused{padding:5px 10px;color:#404040;text-shadow:0 1px 0 #ffffff;background-color:#ffffff;border:0;-webkit-box-shadow:0 0 3px rgba(0, 0, 0, 0.15);-moz-box-shadow:0 0 3px rgba(0, 0, 0, 0.15);box-shadow:0 0 3px rgba(0, 0, 0, 0.15);outline:0;} -.navbar-static{margin-bottom:18px;} -.navbar-static .navbar-inner{padding-left:20px;padding-right:20px;-webkit-border-radius:4px;-moz-border-radius:4px;border-radius:4px;} -.navbar-fixed{position:fixed;top:0;right:0;left:0;z-index:10000;} -.nav{position:relative;left:0;display:block;float:left;margin:0 10px 0 0;}.nav>li{display:block;float:left;} -.nav a{display:block;float:none;padding:10px 10px 11px;line-height:19px;color:#bfbfbf;text-decoration:none;text-shadow:0 -1px 0 rgba(0, 0, 0, 0.25);}.nav a:hover{color:#ffffff;text-decoration:none;} -.nav .active>a{background-color:#222;background-color:rgba(0, 0, 0, 0.5);} -.nav .divider{height:40px;width:1px;margin:0 5px;overflow:hidden;background-color:#222;border-right:1px solid #444;} -.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-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);background-repeat:repeat-x;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;} -.hero-unit{padding:60px;margin-bottom:30px;background-color:#f5f5f5;-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{padding-top:17px;margin-top:17px;border-top:1px solid #eee;} -.page-header{margin-bottom:27px;border-bottom:1px solid #eee;-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:13.5px;} -.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-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);background-repeat:repeat-x;filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ee5f5b', endColorstr='#c43c35', GradientType=0);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);} -.btn.success,.alert-message.success{background-color:#57a957;background-image:-khtml-gradient(linear, left top, left bottom, from(#62c462), to(#57a957));background-image:-moz-linear-gradient(top, #62c462, #57a957);background-image:-ms-linear-gradient(top, #62c462, #57a957);background-image:-webkit-gradient(linear, left top, left bottom, color-stop(0%, #62c462), color-stop(100%, #57a957));background-image:-webkit-linear-gradient(top, #62c462, #57a957);background-image:-o-linear-gradient(top, #62c462, #57a957);background-image:linear-gradient(top, #62c462, #57a957);background-repeat:repeat-x;filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#62c462', endColorstr='#57a957', GradientType=0);border-color:#57a957 #57a957 #3d773d;border-color:rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);} -.btn.info,.alert-message.info{background-color:#339bb9;background-image:-khtml-gradient(linear, left top, left bottom, from(#5bc0de), to(#339bb9));background-image:-moz-linear-gradient(top, #5bc0de, #339bb9);background-image:-ms-linear-gradient(top, #5bc0de, #339bb9);background-image:-webkit-gradient(linear, left top, left bottom, color-stop(0%, #5bc0de), color-stop(100%, #339bb9));background-image:-webkit-linear-gradient(top, #5bc0de, #339bb9);background-image:-o-linear-gradient(top, #5bc0de, #339bb9);background-image:linear-gradient(top, #5bc0de, #339bb9);background-repeat:repeat-x;filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#5bc0de', endColorstr='#339bb9', GradientType=0);border-color:#339bb9 #339bb9 #22697d;border-color:rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);} -.btn{display:inline-block;padding:5px 14px 6px;font-size:13px;line-height:normal;color:#333;text-shadow:0 1px 1px rgba(255, 255, 255, 0.75);background-color:#e6e6e6;background-image:-webkit-gradient(linear, 0 0, 0 100%, from(#ffffff), color-stop(25%, #ffffff), to(#e6e6e6));background-image:-webkit-linear-gradient(#ffffff, #ffffff 25%, #e6e6e6);background-image:-moz-linear-gradient(top, #ffffff, #ffffff 25%, #e6e6e6);background-image:-ms-linear-gradient(#ffffff, #ffffff 25%, #e6e6e6);background-image:-o-linear-gradient(#ffffff, #ffffff 25%, #e6e6e6);background-image:linear-gradient(#ffffff, #ffffff 25%, #e6e6e6);background-repeat:no-repeat;filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#e6e6e6', GradientType=0);border:1px solid #ccc;border-bottom-color:#bbb;-webkit-border-radius:4px;-moz-border-radius:4px;border-radius:4px;-webkit-box-shadow:inset 0 1px 0 rgba(255, 255, 255, 0.2),0 1px 2px rgba(0, 0, 0, 0.05);-moz-box-shadow:inset 0 1px 0 rgba(255, 255, 255, 0.2),0 1px 2px rgba(0, 0, 0, 0.05);box-shadow:inset 0 1px 0 rgba(255, 255, 255, 0.2),0 1px 2px rgba(0, 0, 0, 0.05);cursor:pointer;-webkit-transition:0.1s linear all;-moz-transition:0.1s linear all;-ms-transition:0.1s linear all;-o-transition:0.1s linear all;transition:0.1s linear all;}.btn:hover{color:#404040;text-decoration:none;background-position:0 -15px;} -.btn:focus{outline:1px dotted #666;} -.btn.primary{color:#ffffff;text-shadow:0 -1px 0 rgba(0, 0, 0, 0.25);background-color:#0064cd;background-image:-khtml-gradient(linear, left top, left bottom, from(#049cdb), to(#0064cd));background-image:-moz-linear-gradient(top, #049cdb, #0064cd);background-image:-ms-linear-gradient(top, #049cdb, #0064cd);background-image:-webkit-gradient(linear, left top, left bottom, color-stop(0%, #049cdb), color-stop(100%, #0064cd));background-image:-webkit-linear-gradient(top, #049cdb, #0064cd);background-image:-o-linear-gradient(top, #049cdb, #0064cd);background-image:linear-gradient(top, #049cdb, #0064cd);background-repeat:repeat-x;filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#049cdb', endColorstr='#0064cd', GradientType=0);border-color:#0064cd #0064cd #003f81;border-color:rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);} -.btn.active,.btn:active{-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);} -.btn.disabled{cursor:default;background-image:none;filter:progid:DXImageTransform.Microsoft.gradient(enabled = false);filter:alpha(opacity=65);-moz-opacity:0.65;opacity:0.65;-webkit-box-shadow:none;-moz-box-shadow:none;box-shadow:none;} -.btn[disabled]{cursor:default;background-image:none;filter:progid:DXImageTransform.Microsoft.gradient(enabled = false);filter:alpha(opacity=65);-moz-opacity:0.65;opacity:0.65;-webkit-box-shadow:none;-moz-box-shadow:none;box-shadow:none;} -.btn.large{padding:9px 14px 9px;font-size:15px;line-height:normal;-webkit-border-radius:6px;-moz-border-radius:6px;border-radius:6px;} -.btn.small{padding:7px 9px 7px;font-size:11px;} -:root .alert-message,:root .btn{border-radius:0 \0;} -button.btn::-moz-focus-inner,input[type=submit].btn::-moz-focus-inner{padding:0;border:0;} -.btn-toolbar{zoom:1;}.btn-toolbar:before,.btn-toolbar:after{display:table;*display:inline;content:"";zoom:1;} -.btn-toolbar:after{clear:both;} -.btn-toolbar .btn-group{float:left;margin-right:10px;} -.btn-group{zoom:1;}.btn-group:before,.btn-group:after{display:table;*display:inline;content:"";zoom:1;} -.btn-group:after{clear:both;} -.btn-group .btn{position:relative;float:left;margin-left:-1px;-webkit-border-radius:0;-moz-border-radius:0;border-radius:0;}.btn-group .btn:first-child{margin-left:0;-webkit-border-top-left-radius:4px;-moz-border-radius-topleft:4px;border-top-left-radius:4px;-webkit-border-bottom-left-radius:4px;-moz-border-radius-bottomleft:4px;border-bottom-left-radius:4px;} -.btn-group .btn:last-child{-webkit-border-top-right-radius:4px;-moz-border-radius-topright:4px;border-top-right-radius:4px;-webkit-border-bottom-right-radius:4px;-moz-border-radius-bottomright:4px;border-bottom-right-radius:4px;} -.btn-group .btn.large:first-child{margin-left:0;-webkit-border-top-left-radius:6px;-moz-border-radius-topleft:6px;border-top-left-radius:6px;-webkit-border-bottom-left-radius:6px;-moz-border-radius-bottomleft:6px;border-bottom-left-radius:6px;} -.btn-group .btn.large:last-child{-webkit-border-top-right-radius:6px;-moz-border-radius-topright:6px;border-top-right-radius:6px;-webkit-border-bottom-right-radius:6px;-moz-border-radius-bottomright:6px;border-bottom-right-radius:6px;} -.btn-group .btn:hover,.btn-group .btn:focus,.btn-group .btn:active{z-index:2;} -.close{float:right;font-size:20px;font-weight:bold;line-height:13.5px;color:#000000;text-shadow:0 1px 0 #ffffff;filter:alpha(opacity=20);-moz-opacity:0.2;opacity:0.2;}.close:hover{color:#000000;text-decoration:none;filter:alpha(opacity=40);-moz-opacity:0.4;opacity:0.4;} -.alert-message{position:relative;padding:7px 15px;margin-bottom:18px;color:#404040;text-shadow:0 1px 0 rgba(255, 255, 255, 0.5);background-color:#eedc94;background-image:-khtml-gradient(linear, left top, left bottom, from(#fceec1), to(#eedc94));background-image:-moz-linear-gradient(top, #fceec1, #eedc94);background-image:-ms-linear-gradient(top, #fceec1, #eedc94);background-image:-webkit-gradient(linear, left top, left bottom, color-stop(0%, #fceec1), color-stop(100%, #eedc94));background-image:-webkit-linear-gradient(top, #fceec1, #eedc94);background-image:-o-linear-gradient(top, #fceec1, #eedc94);background-image:linear-gradient(top, #fceec1, #eedc94);background-repeat:repeat-x;filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#fceec1', endColorstr='#eedc94', GradientType=0);border-color:#eedc94 #eedc94 #e4c652;border-color:rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);border-width:1px;border-style:solid;-webkit-border-radius:4px;-moz-border-radius:4px;border-radius:4px;-webkit-box-shadow:inset 0 1px 0 rgba(255, 255, 255, 0.25);-moz-box-shadow:inset 0 1px 0 rgba(255, 255, 255, 0.25);box-shadow:inset 0 1px 0 rgba(255, 255, 255, 0.25);}.alert-message .close{*margin-top:3px;} -.alert-message h5{line-height:18px;} -.alert-message p{margin-bottom:0;} -.alert-message div{margin-top:5px;margin-bottom:2px;line-height:28px;} -.alert-message .btn{-webkit-box-shadow:0 1px 0 rgba(255, 255, 255, 0.25);-moz-box-shadow:0 1px 0 rgba(255, 255, 255, 0.25);box-shadow:0 1px 0 rgba(255, 255, 255, 0.25);} -.alert-message.error,.alert-message.success,.alert-message.info{text-shadow:0 -1px 0 rgba(0, 0, 0, 0.25);} -.alert-message.block-message{padding:14px;background-image:none;background-color:#fdf5d9;filter:progid:DXImageTransform.Microsoft.gradient(enabled = false);border-color:#fceec1;-webkit-box-shadow:none;-moz-box-shadow:none;box-shadow:none;}.alert-message.block-message ul,.alert-message.block-message p{margin-right:30px;} -.alert-message.block-message ul{margin-bottom:0;} -.alert-message.block-message li{color:#404040;} -.alert-message.block-message .alert-actions{margin-top:5px;} -.alert-message.block-message.error,.alert-message.block-message.success,.alert-message.block-message.info{color:#404040;text-shadow:0 1px 0 rgba(255, 255, 255, 0.5);} -.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;} -.well{min-height:20px;padding:19px;margin-bottom:20px;background-color:#f5f5f5;border:1px solid #eee;border:1px solid rgba(0, 0, 0, 0.05);-webkit-border-radius:4px;-moz-border-radius:4px;border-radius:4px;-webkit-box-shadow:inset 0 1px 1px rgba(0, 0, 0, 0.05);-moz-box-shadow:inset 0 1px 1px rgba(0, 0, 0, 0.05);box-shadow:inset 0 1px 1px rgba(0, 0, 0, 0.05);}.well blockquote{border-color:#ddd;border-color:rgba(0, 0, 0, 0.15);} -.fade{-webkit-transition:opacity 0.15s linear;-moz-transition:opacity 0.15s linear;-ms-transition:opacity 0.15s linear;-o-transition:opacity 0.15s linear;transition:opacity 0.15s linear;opacity:0;}.fade.in{opacity:1;} -.collapse{-webkit-transition:height 0.35s ease;-moz-transition:height 0.35s ease;-ms-transition:height 0.35s ease;-o-transition:height 0.35s ease;transition:height 0.35s ease;position:relative;overflow:hidden;height:0;}.collapse.in{height:auto;} -.label{padding:1px 3px 2px;font-size:9.75px;font-weight:bold;color:#ffffff;text-transform:uppercase;background-color:#bfbfbf;-webkit-border-radius:3px;-moz-border-radius:3px;border-radius:3px;}.label.important{background-color:#c43c35;} -.label.warning{background-color:#f89406;} -.label.success{background-color:#46a546;} -.label.notice{background-color:#62cffc;} i{background-image:url(docs/assets/img/glyphicons-halflings-sprite.png);background-position:0 0;background-repeat:no-repeat;display:inline-block;vertical-align:text-top;width:14px;height:14px;} .glass{background-position:0 0;} .music{background-position:-24px 0;} @@ -343,14 +269,41 @@ i{background-image:url(docs/assets/img/glyphicons-halflings-sprite.png);backgrou .dropdown:hover .dropdown-toggle:after{filter:alpha(opacity=100);-moz-opacity:1;opacity:1;} .dropdown-menu{position:absolute;top:40px;z-index:900;float:left;display:none;min-width:160px;max-width:220px;_width:160px;padding:6px 0;margin-left:0;margin-right:0;background-color:#ffffff;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;zoom:1;}.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{color:#404040;text-decoration:none;background-color:#dddddd;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);background-repeat:repeat-x;filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#eeeeee', endColorstr='#dddddd', GradientType=0);-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);} +.topbar .dropdown-menu a,.dropdown-menu a{display:block;padding:4px 15px;clear:both;font-weight:normal;line-height:18px;color:#555555;text-shadow:0 1px 0 #ffffff;}.topbar .dropdown-menu a:hover,.dropdown-menu a:hover{color:#333333;text-decoration:none;background-color:#dddddd;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);background-repeat:repeat-x;filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#eeeeee', endColorstr='#dddddd', GradientType=0);-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.open .dropdown-toggle{color:#ffffff;background:#ccc;background:rgba(0, 0, 0, 0.3);} .dropdown.open .dropdown-menu{display:block;} +.well{min-height:20px;padding:19px;margin-bottom:20px;background-color:#f5f5f5;border:1px solid #eee;border:1px solid rgba(0, 0, 0, 0.05);-webkit-border-radius:4px;-moz-border-radius:4px;border-radius:4px;-webkit-box-shadow:inset 0 1px 1px rgba(0, 0, 0, 0.05);-moz-box-shadow:inset 0 1px 1px rgba(0, 0, 0, 0.05);box-shadow:inset 0 1px 1px rgba(0, 0, 0, 0.05);}.well blockquote{border-color:#ddd;border-color:rgba(0, 0, 0, 0.15);} +.fade{-webkit-transition:opacity 0.15s linear;-moz-transition:opacity 0.15s linear;-ms-transition:opacity 0.15s linear;-o-transition:opacity 0.15s linear;transition:opacity 0.15s linear;opacity:0;}.fade.in{opacity:1;} +.collapse{-webkit-transition:height 0.35s ease;-moz-transition:height 0.35s ease;-ms-transition:height 0.35s ease;-o-transition:height 0.35s ease;transition:height 0.35s ease;position:relative;overflow:hidden;height:0;}.collapse.in{height:auto;} +.close{float:right;font-size:20px;font-weight:bold;line-height:13.5px;color:#000000;text-shadow:0 1px 0 #ffffff;filter:alpha(opacity=20);-moz-opacity:0.2;opacity:0.2;}.close:hover{color:#000000;text-decoration:none;filter:alpha(opacity=40);-moz-opacity:0.4;opacity:0.4;} +.navbar{overflow:visible;} +.navbar-inner{background-color:#222222;background-color:#222222;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);background-repeat:repeat-x;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);} +.navbar .brand a:hover,.navbar ul .active>a{color:#ffffff;text-decoration:none;background-color:#333333;background-color:rgba(255, 255, 255, 0.05);} +.navbar .brand{float:left;display:block;padding:8px 20px 12px;margin-left:-20px;font-size:20px;font-weight:200;line-height:1;color:#ffffff;} +.navbar p{margin:0;line-height:40px;}.navbar p a:hover{color:#ffffff;background-color:transparent;} +.navbar .btn{margin-top:5px;} +.navbar-search{position:relative;float:left;margin-top:6px;margin-bottom:0;}.navbar-search .search-query{padding:4px 9px;font-family:"Helvetica Neue",Helvetica,Arial,sans-serif;font-size:13px;font-weight:normal;line-height:1;color:#ffffff;color:rgba(255, 255, 255, 0.75);background-color:#444;background-color:rgba(255, 255, 255, 0.3);border:1px solid #111;-webkit-box-shadow:inset 0 1px 2px rgba(0, 0, 0, 0.1),0 1px 0px rgba(255, 255, 255, 0.15);-moz-box-shadow:inset 0 1px 2px rgba(0, 0, 0, 0.1),0 1px 0px rgba(255, 255, 255, 0.15);box-shadow:inset 0 1px 2px rgba(0, 0, 0, 0.1),0 1px 0px rgba(255, 255, 255, 0.15);-webkit-transition:none;-moz-transition:none;-ms-transition:none;-o-transition:none;transition:none;}.navbar-search .search-query:-moz-placeholder{color:#eeeeee;} +.navbar-search .search-query::-webkit-input-placeholder{color:#eeeeee;} +.navbar-search .search-query:hover{color:#ffffff;background-color:#999999;background-color:rgba(255, 255, 255, 0.5);} +.navbar-search .search-query:focus,.navbar-search .search-query.focused{padding:5px 10px;color:#333333;text-shadow:0 1px 0 #ffffff;background-color:#ffffff;border:0;-webkit-box-shadow:0 0 3px rgba(0, 0, 0, 0.15);-moz-box-shadow:0 0 3px rgba(0, 0, 0, 0.15);box-shadow:0 0 3px rgba(0, 0, 0, 0.15);outline:0;} +.navbar-static{margin-bottom:18px;} +.navbar-static .navbar-inner{padding-left:20px;padding-right:20px;-webkit-border-radius:4px;-moz-border-radius:4px;border-radius:4px;} +.navbar-fixed{position:fixed;top:0;right:0;left:0;z-index:10000;} +.nav{position:relative;left:0;display:block;float:left;margin:0 10px 0 0;}.nav>li{display:block;float:left;} +.nav a{display:block;float:none;padding:10px 10px 11px;line-height:19px;color:#999999;text-decoration:none;text-shadow:0 -1px 0 rgba(0, 0, 0, 0.25);}.nav a:hover{color:#ffffff;text-decoration:none;} +.nav .active>a{background-color:#222;background-color:rgba(0, 0, 0, 0.5);} +.nav .divider{height:40px;width:1px;margin:0 5px;overflow:hidden;background-color:#222;border-right:1px solid #444;} +.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-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);background-repeat:repeat-x;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;} .tabs,.pills{padding:0;margin:0 0 20px;list-style:none;zoom:1;}.tabs:before,.pills:before,.tabs:after,.pills:after{display:table;*display:inline;content:"";zoom:1;} .tabs:after,.pills:after{clear:both;} .tabs>li,.pills>li{float:left;}.tabs>li>a,.pills>li>a{display:block;} .tabs{border-color:#ddd;border-style:solid;border-width:0 0 1px;}.tabs>li{position:relative;margin-bottom:-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 .active>a,.tabs .active>a:hover{color:#808080;background-color:#ffffff;border:1px solid #ddd;border-bottom-color:transparent;cursor:default;} +.tabs .active>a,.tabs .active>a:hover{color:#555555;background-color:#ffffff;border:1px solid #ddd;border-bottom-color:transparent;cursor:default;} .tabbable{margin-bottom:18px;}.tabbable .tabs{margin-bottom:0;border-bottom:0;} .tabbable .tab-content{padding:19px;border:1px solid #ddd;} .tabbable.tabs-bottom .tabs>li{margin-top:-1px;margin-bottom:0;} @@ -369,29 +322,37 @@ i{background-image:url(docs/assets/img/glyphicons-halflings-sprite.png);backgrou .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;} -.pills>li>a{padding:0 15px;margin:5px 3px 5px 0;line-height:30px;text-shadow:0 1px 1px #ffffff;-webkit-border-radius:15px;-moz-border-radius:15px;border-radius:15px;}.pills>li>a:hover{color:#ffffff;text-decoration:none;text-shadow:0 1px 1px rgba(0, 0, 0, 0.25);background-color:#00438a;} -.pills .active>a{color:#ffffff;text-shadow:0 1px 1px rgba(0, 0, 0, 0.25);background-color:#0069d6;} +.pills>li>a{padding:0 15px;margin:5px 3px 5px 0;line-height:30px;text-shadow:0 1px 1px #ffffff;-webkit-border-radius:15px;-moz-border-radius:15px;border-radius:15px;}.pills>li>a:hover{color:#ffffff;text-decoration:none;text-shadow:0 1px 1px rgba(0, 0, 0, 0.25);background-color:#005580;} +.pills .active>a{color:#ffffff;text-shadow:0 1px 1px rgba(0, 0, 0, 0.25);background-color:#0088cc;} .pills-vertical>li{float:none;} .tab-content>.tab-pane,.pill-content>.pill-pane{display:none;} .tab-content>.active,.pill-content>.active{display:block;} -.step-nav{position:relative;margin:0 0 18px;list-style:none;line-height:30px;text-align:center;background-color:#f5f5f5;-webkit-border-radius:15px;-moz-border-radius:15px;border-radius:15px;}.step-nav li{display:inline;color:#bfbfbf;} +.step-nav{position:relative;margin:0 0 18px;list-style:none;line-height:30px;text-align:center;background-color:#f5f5f5;-webkit-border-radius:15px;-moz-border-radius:15px;border-radius:15px;}.step-nav li{display:inline;color:#999999;} .step-nav .prev,.step-nav .next{position:absolute;top:6px;} .step-nav .prev{left:15px;} .step-nav .next{right:15px;} -.step-nav .dot{display:inline-block;width:10px;height:10px;margin:0 3px;text-indent:-999em;background-color:#bfbfbf;-webkit-border-radius:5px;-moz-border-radius:5px;border-radius:5px;-webkit-box-shadow:inset 0 1px 1px rgba(0, 0, 0, 0.25);-moz-box-shadow:inset 0 1px 1px rgba(0, 0, 0, 0.25);box-shadow:inset 0 1px 1px rgba(0, 0, 0, 0.25);} -.step-nav .dot:hover,.step-nav .active .dot{background-color:#404040;} -.subnav{background-color:#eeeeee;background-image:-khtml-gradient(linear, left top, left bottom, from(#f5f5f5), to(#eeeeee));background-image:-moz-linear-gradient(top, #f5f5f5, #eeeeee);background-image:-ms-linear-gradient(top, #f5f5f5, #eeeeee);background-image:-webkit-gradient(linear, left top, left bottom, color-stop(0%, #f5f5f5), color-stop(100%, #eeeeee));background-image:-webkit-linear-gradient(top, #f5f5f5, #eeeeee);background-image:-o-linear-gradient(top, #f5f5f5, #eeeeee);background-image:linear-gradient(top, #f5f5f5, #eeeeee);background-repeat:repeat-x;filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#f5f5f5', endColorstr='#eeeeee', GradientType=0);-webkit-box-shadow:inset 0 1px 0 #ffffff,0 0 5px rgba(0, 0, 0, 0.5);-moz-box-shadow:inset 0 1px 0 #ffffff,0 0 5px rgba(0, 0, 0, 0.5);box-shadow:inset 0 1px 0 #ffffff,0 0 5px rgba(0, 0, 0, 0.5);}.subnav a{padding:8px 10px;font-size:12px;color:#0069d6;text-shadow:0 1px 0 #fff;border-left:1px solid #f9f9f9;border-right:1px solid #e5e5e5;}.subnav a:hover{color:#00438a;background-color:#eee;} +.step-nav .dot{display:inline-block;width:10px;height:10px;margin:0 3px;text-indent:-999em;background-color:#999999;-webkit-border-radius:5px;-moz-border-radius:5px;border-radius:5px;-webkit-box-shadow:inset 0 1px 1px rgba(0, 0, 0, 0.25);-moz-box-shadow:inset 0 1px 1px rgba(0, 0, 0, 0.25);box-shadow:inset 0 1px 1px rgba(0, 0, 0, 0.25);} +.step-nav .dot:hover,.step-nav .active .dot{background-color:#333333;} +.subnav{background-color:#eeeeee;background-image:-khtml-gradient(linear, left top, left bottom, from(#f5f5f5), to(#eeeeee));background-image:-moz-linear-gradient(top, #f5f5f5, #eeeeee);background-image:-ms-linear-gradient(top, #f5f5f5, #eeeeee);background-image:-webkit-gradient(linear, left top, left bottom, color-stop(0%, #f5f5f5), color-stop(100%, #eeeeee));background-image:-webkit-linear-gradient(top, #f5f5f5, #eeeeee);background-image:-o-linear-gradient(top, #f5f5f5, #eeeeee);background-image:linear-gradient(top, #f5f5f5, #eeeeee);background-repeat:repeat-x;filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#f5f5f5', endColorstr='#eeeeee', GradientType=0);-webkit-box-shadow:inset 0 1px 0 #ffffff,0 0 5px rgba(0, 0, 0, 0.5);-moz-box-shadow:inset 0 1px 0 #ffffff,0 0 5px rgba(0, 0, 0, 0.5);box-shadow:inset 0 1px 0 #ffffff,0 0 5px rgba(0, 0, 0, 0.5);}.subnav a{padding:8px 10px;font-size:12px;color:#0088cc;text-shadow:0 1px 0 #fff;border-left:1px solid #f9f9f9;border-right:1px solid #e5e5e5;}.subnav a:hover{color:#005580;background-color:#eee;} .subnav li:first-child a{border-left:0;-webkit-border-radius:6px 0 0 6px;-moz-border-radius:6px 0 0 6px;border-radius:6px 0 0 6px;} .subnav li:last-child a{border-right:0;-webkit-border-radius:0 6px 6px 0;-moz-border-radius:0 6px 6px 0;border-radius:0 6px 6px 0;} -.subnav ul .active>a{color:#404040;background-color:#eee;} +.subnav ul .active>a{color:#333333;background-color:#eee;} +.side-nav{padding:9px 0;} +.side-nav .nav-label,.side-nav .nav-item{display:block;padding:3px 16px;text-shadow:0 1px 0 rgba(255, 255, 255, 0.5);} +.side-nav .nav-label{font-size:11px;line-height:18px;color:#333333;text-transform:uppercase;} +.side-nav .nav-group{margin:0 -1px;list-style:none;} +.side-nav .nav-item{font-weight:bold;} +.side-nav .nav-item i{vertical-align:-2px;} +.side-nav .nav-item:hover{text-decoration:none;} +.side-nav .active .nav-item{color:#fff;text-shadow:0 -1px 0 rgba(0, 0, 0, 0.3);background-color:#aaaaaa;background-image:-khtml-gradient(linear, left top, left bottom, from(#cccccc), to(#aaaaaa));background-image:-moz-linear-gradient(top, #cccccc, #aaaaaa);background-image:-ms-linear-gradient(top, #cccccc, #aaaaaa);background-image:-webkit-gradient(linear, left top, left bottom, color-stop(0%, #cccccc), color-stop(100%, #aaaaaa));background-image:-webkit-linear-gradient(top, #cccccc, #aaaaaa);background-image:-o-linear-gradient(top, #cccccc, #aaaaaa);background-image:linear-gradient(top, #cccccc, #aaaaaa);background-repeat:repeat-x;filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#cccccc', endColorstr='#aaaaaa', GradientType=0);-webkit-box-shadow:inset 0 1px 0 rgba(0, 0, 0, 0.05),inset 0 -1px 0 rgba(0, 0, 0, 0.05);-moz-box-shadow:inset 0 1px 0 rgba(0, 0, 0, 0.05),inset 0 -1px 0 rgba(0, 0, 0, 0.05);box-shadow:inset 0 1px 0 rgba(0, 0, 0, 0.05),inset 0 -1px 0 rgba(0, 0, 0, 0.05);} .breadcrumb{padding:7px 14px;margin:0 0 18px;background-color:#f5f5f5;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);background-repeat:repeat-x;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;} +.breadcrumb .divider{padding:0 5px;color:#999999;} +.breadcrumb .active a{color:#333333;} .pagination{height:36px;margin:18px 0;}.pagination ul{display:inline-block;*display:inline;*zoom:1;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 li{display:inline;} .pagination a{float:left;padding:0 14px;line-height:34px;text-decoration:none;border-right:1px solid;border-right-color:#ddd;border-right-color:rgba(0, 0, 0, 0.15);*border-right-color:#ddd;} .pagination a:hover,.pagination .active a{background-color:#c7eefe;} -.pagination .disabled a,.pagination .disabled a:hover{color:#bfbfbf;background-color:transparent;} +.pagination .disabled a,.pagination .disabled a:hover{color:#999999;background-color:transparent;} .pagination .next a{border:0;} .pagination.centered{text-align:center;} .modal-backdrop{position:fixed;top:0;right:0;bottom:0;left:0;z-index:10000;background-color:#000000;}.modal-backdrop.fade{opacity:0;} @@ -427,19 +388,49 @@ i{background-image:url(docs/assets/img/glyphicons-halflings-sprite.png);backgrou .popover .inner{padding:3px;width:280px;overflow:hidden;background-color:#000000;background-color:rgba(0, 0, 0, 0.8);-webkit-border-radius:6px;-moz-border-radius:6px;border-radius:6px;-webkit-box-shadow:0 3px 7px rgba(0, 0, 0, 0.3);-moz-box-shadow:0 3px 7px rgba(0, 0, 0, 0.3);box-shadow:0 3px 7px rgba(0, 0, 0, 0.3);} .popover .title{padding:9px 15px;line-height:1;background-color:#f5f5f5;border-bottom:1px solid #eee;-webkit-border-radius:3px 3px 0 0;-moz-border-radius:3px 3px 0 0;border-radius:3px 3px 0 0;} .popover .content{padding:14px;background-color:#ffffff;-webkit-border-radius:0 0 3px 3px;-moz-border-radius:0 0 3px 3px;border-radius:0 0 3px 3px;-webkit-background-clip:padding-box;-moz-background-clip:padding-box;background-clip:padding-box;}.popover .content p,.popover .content ul,.popover .content ol{margin-bottom:0;} -.side-nav{padding:9px 0;} -.side-nav .nav-label,.side-nav .nav-item{display:block;padding:3px 16px;text-shadow:0 1px 0 rgba(255, 255, 255, 0.5);} -.side-nav .nav-label{font-size:11px;line-height:18px;color:#404040;text-transform:uppercase;} -.side-nav .nav-group{margin:0 -1px;list-style:none;} -.side-nav .nav-item{font-weight:bold;} -.side-nav .nav-item i{vertical-align:-2px;} -.side-nav .nav-item:hover{text-decoration:none;} -.side-nav .active .nav-item{color:#fff;text-shadow:0 -1px 0 rgba(0, 0, 0, 0.3);background-color:#aaaaaa;background-image:-khtml-gradient(linear, left top, left bottom, from(#cccccc), to(#aaaaaa));background-image:-moz-linear-gradient(top, #cccccc, #aaaaaa);background-image:-ms-linear-gradient(top, #cccccc, #aaaaaa);background-image:-webkit-gradient(linear, left top, left bottom, color-stop(0%, #cccccc), color-stop(100%, #aaaaaa));background-image:-webkit-linear-gradient(top, #cccccc, #aaaaaa);background-image:-o-linear-gradient(top, #cccccc, #aaaaaa);background-image:linear-gradient(top, #cccccc, #aaaaaa);background-repeat:repeat-x;filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#cccccc', endColorstr='#aaaaaa', GradientType=0);-webkit-box-shadow:inset 0 1px 0 rgba(0, 0, 0, 0.05),inset 0 -1px 0 rgba(0, 0, 0, 0.05);-moz-box-shadow:inset 0 1px 0 rgba(0, 0, 0, 0.05),inset 0 -1px 0 rgba(0, 0, 0, 0.05);box-shadow:inset 0 1px 0 rgba(0, 0, 0, 0.05),inset 0 -1px 0 rgba(0, 0, 0, 0.05);} +.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-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);background-repeat:repeat-x;filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ee5f5b', endColorstr='#c43c35', GradientType=0);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);} +.btn.success,.alert-message.success{background-color:#57a957;background-image:-khtml-gradient(linear, left top, left bottom, from(#62c462), to(#57a957));background-image:-moz-linear-gradient(top, #62c462, #57a957);background-image:-ms-linear-gradient(top, #62c462, #57a957);background-image:-webkit-gradient(linear, left top, left bottom, color-stop(0%, #62c462), color-stop(100%, #57a957));background-image:-webkit-linear-gradient(top, #62c462, #57a957);background-image:-o-linear-gradient(top, #62c462, #57a957);background-image:linear-gradient(top, #62c462, #57a957);background-repeat:repeat-x;filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#62c462', endColorstr='#57a957', GradientType=0);border-color:#57a957 #57a957 #3d773d;border-color:rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);} +.btn.info,.alert-message.info{background-color:#339bb9;background-image:-khtml-gradient(linear, left top, left bottom, from(#5bc0de), to(#339bb9));background-image:-moz-linear-gradient(top, #5bc0de, #339bb9);background-image:-ms-linear-gradient(top, #5bc0de, #339bb9);background-image:-webkit-gradient(linear, left top, left bottom, color-stop(0%, #5bc0de), color-stop(100%, #339bb9));background-image:-webkit-linear-gradient(top, #5bc0de, #339bb9);background-image:-o-linear-gradient(top, #5bc0de, #339bb9);background-image:linear-gradient(top, #5bc0de, #339bb9);background-repeat:repeat-x;filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#5bc0de', endColorstr='#339bb9', GradientType=0);border-color:#339bb9 #339bb9 #22697d;border-color:rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);} +.btn{display:inline-block;padding:5px 14px 6px;font-size:13px;line-height:normal;color:#333;text-shadow:0 1px 1px rgba(255, 255, 255, 0.75);background-color:#e6e6e6;background-image:-webkit-gradient(linear, 0 0, 0 100%, from(#ffffff), color-stop(25%, #ffffff), to(#e6e6e6));background-image:-webkit-linear-gradient(#ffffff, #ffffff 25%, #e6e6e6);background-image:-moz-linear-gradient(top, #ffffff, #ffffff 25%, #e6e6e6);background-image:-ms-linear-gradient(#ffffff, #ffffff 25%, #e6e6e6);background-image:-o-linear-gradient(#ffffff, #ffffff 25%, #e6e6e6);background-image:linear-gradient(#ffffff, #ffffff 25%, #e6e6e6);background-repeat:no-repeat;filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#e6e6e6', GradientType=0);border:1px solid #ccc;border-bottom-color:#bbb;-webkit-border-radius:4px;-moz-border-radius:4px;border-radius:4px;-webkit-box-shadow:inset 0 1px 0 rgba(255, 255, 255, 0.2),0 1px 2px rgba(0, 0, 0, 0.05);-moz-box-shadow:inset 0 1px 0 rgba(255, 255, 255, 0.2),0 1px 2px rgba(0, 0, 0, 0.05);box-shadow:inset 0 1px 0 rgba(255, 255, 255, 0.2),0 1px 2px rgba(0, 0, 0, 0.05);cursor:pointer;-webkit-transition:0.1s linear all;-moz-transition:0.1s linear all;-ms-transition:0.1s linear all;-o-transition:0.1s linear all;transition:0.1s linear all;}.btn:hover{color:#333333;text-decoration:none;background-position:0 -15px;} +.btn:focus{outline:1px dotted #666;} +.btn.primary{color:#ffffff;text-shadow:0 -1px 0 rgba(0, 0, 0, 0.25);background-color:#0064cd;background-image:-khtml-gradient(linear, left top, left bottom, from(#049cdb), to(#0064cd));background-image:-moz-linear-gradient(top, #049cdb, #0064cd);background-image:-ms-linear-gradient(top, #049cdb, #0064cd);background-image:-webkit-gradient(linear, left top, left bottom, color-stop(0%, #049cdb), color-stop(100%, #0064cd));background-image:-webkit-linear-gradient(top, #049cdb, #0064cd);background-image:-o-linear-gradient(top, #049cdb, #0064cd);background-image:linear-gradient(top, #049cdb, #0064cd);background-repeat:repeat-x;filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#049cdb', endColorstr='#0064cd', GradientType=0);border-color:#0064cd #0064cd #003f81;border-color:rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);} +.btn.active,.btn:active{-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);} +.btn.disabled{cursor:default;background-image:none;filter:progid:DXImageTransform.Microsoft.gradient(enabled = false);filter:alpha(opacity=65);-moz-opacity:0.65;opacity:0.65;-webkit-box-shadow:none;-moz-box-shadow:none;box-shadow:none;} +.btn[disabled]{cursor:default;background-image:none;filter:progid:DXImageTransform.Microsoft.gradient(enabled = false);filter:alpha(opacity=65);-moz-opacity:0.65;opacity:0.65;-webkit-box-shadow:none;-moz-box-shadow:none;box-shadow:none;} +.btn.large{padding:9px 14px 9px;font-size:15px;line-height:normal;-webkit-border-radius:6px;-moz-border-radius:6px;border-radius:6px;} +.btn.small{padding:7px 9px 7px;font-size:11px;} +:root .alert-message,:root .btn{border-radius:0 \0;} +button.btn::-moz-focus-inner,input[type=submit].btn::-moz-focus-inner{padding:0;border:0;} +.btn-toolbar{zoom:1;}.btn-toolbar:before,.btn-toolbar:after{display:table;*display:inline;content:"";zoom:1;} +.btn-toolbar:after{clear:both;} +.btn-toolbar .btn-group{float:left;margin-right:10px;} +.btn-group{zoom:1;}.btn-group:before,.btn-group:after{display:table;*display:inline;content:"";zoom:1;} +.btn-group:after{clear:both;} +.btn-group .btn{position:relative;float:left;margin-left:-1px;-webkit-border-radius:0;-moz-border-radius:0;border-radius:0;}.btn-group .btn:first-child{margin-left:0;-webkit-border-top-left-radius:4px;-moz-border-radius-topleft:4px;border-top-left-radius:4px;-webkit-border-bottom-left-radius:4px;-moz-border-radius-bottomleft:4px;border-bottom-left-radius:4px;} +.btn-group .btn:last-child{-webkit-border-top-right-radius:4px;-moz-border-radius-topright:4px;border-top-right-radius:4px;-webkit-border-bottom-right-radius:4px;-moz-border-radius-bottomright:4px;border-bottom-right-radius:4px;} +.btn-group .btn.large:first-child{margin-left:0;-webkit-border-top-left-radius:6px;-moz-border-radius-topleft:6px;border-top-left-radius:6px;-webkit-border-bottom-left-radius:6px;-moz-border-radius-bottomleft:6px;border-bottom-left-radius:6px;} +.btn-group .btn.large:last-child{-webkit-border-top-right-radius:6px;-moz-border-radius-topright:6px;border-top-right-radius:6px;-webkit-border-bottom-right-radius:6px;-moz-border-radius-bottomright:6px;border-bottom-right-radius:6px;} +.btn-group .btn:hover,.btn-group .btn:focus,.btn-group .btn:active{z-index:2;} +.alert-message{position:relative;padding:7px 15px;margin-bottom:18px;color:#333333;text-shadow:0 1px 0 rgba(255, 255, 255, 0.5);background-color:#eedc94;background-image:-khtml-gradient(linear, left top, left bottom, from(#fceec1), to(#eedc94));background-image:-moz-linear-gradient(top, #fceec1, #eedc94);background-image:-ms-linear-gradient(top, #fceec1, #eedc94);background-image:-webkit-gradient(linear, left top, left bottom, color-stop(0%, #fceec1), color-stop(100%, #eedc94));background-image:-webkit-linear-gradient(top, #fceec1, #eedc94);background-image:-o-linear-gradient(top, #fceec1, #eedc94);background-image:linear-gradient(top, #fceec1, #eedc94);background-repeat:repeat-x;filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#fceec1', endColorstr='#eedc94', GradientType=0);border-color:#eedc94 #eedc94 #e4c652;border-color:rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);border-width:1px;border-style:solid;-webkit-border-radius:4px;-moz-border-radius:4px;border-radius:4px;-webkit-box-shadow:inset 0 1px 0 rgba(255, 255, 255, 0.25);-moz-box-shadow:inset 0 1px 0 rgba(255, 255, 255, 0.25);box-shadow:inset 0 1px 0 rgba(255, 255, 255, 0.25);}.alert-message .close{*margin-top:3px;} +.alert-message h5{line-height:18px;} +.alert-message p{margin-bottom:0;} +.alert-message div{margin-top:5px;margin-bottom:2px;line-height:28px;} +.alert-message .btn{-webkit-box-shadow:0 1px 0 rgba(255, 255, 255, 0.25);-moz-box-shadow:0 1px 0 rgba(255, 255, 255, 0.25);box-shadow:0 1px 0 rgba(255, 255, 255, 0.25);} +.alert-message.error,.alert-message.success,.alert-message.info{text-shadow:0 -1px 0 rgba(0, 0, 0, 0.25);} +.alert-message.block-message{padding:14px;background-image:none;background-color:#fdf5d9;filter:progid:DXImageTransform.Microsoft.gradient(enabled = false);border-color:#fceec1;-webkit-box-shadow:none;-moz-box-shadow:none;box-shadow:none;}.alert-message.block-message ul,.alert-message.block-message p{margin-right:30px;} +.alert-message.block-message ul{margin-bottom:0;} +.alert-message.block-message li{color:#333333;} +.alert-message.block-message .alert-actions{margin-top:5px;} +.alert-message.block-message.error,.alert-message.block-message.success,.alert-message.block-message.info{color:#333333;text-shadow:0 1px 0 rgba(255, 255, 255, 0.5);} +.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;} .thumbnails{margin-left:-20px;margin-bottom:0;list-style:none;zoom:1;}.thumbnails:before,.thumbnails:after{display:table;*display:inline;content:"";zoom:1;} .thumbnails:after{clear:both;} .thumbnails>li{float:left;margin:0 0 20px 20px;} .thumbnail{display:block;padding:4px;line-height:1;border:1px solid #ddd;-webkit-border-radius:4px;-moz-border-radius:4px;border-radius:4px;-webkit-box-shadow:0 1px 1px rgba(0, 0, 0, 0.075);-moz-box-shadow:0 1px 1px rgba(0, 0, 0, 0.075);box-shadow:0 1px 1px rgba(0, 0, 0, 0.075);} -a.thumbnail:hover{border-color:#0069d6;-webkit-box-shadow:0 1px 4px rgba(0, 105, 214, 0.25);-moz-box-shadow:0 1px 4px rgba(0, 105, 214, 0.25);box-shadow:0 1px 4px rgba(0, 105, 214, 0.25);} +a.thumbnail:hover{border-color:#0088cc;-webkit-box-shadow:0 1px 4px rgba(0, 105, 214, 0.25);-moz-box-shadow:0 1px 4px rgba(0, 105, 214, 0.25);box-shadow:0 1px 4px rgba(0, 105, 214, 0.25);} .thumbnail>img{display:block;max-width:100%;} .thumbnail .caption{padding:9px;} .carousel{position:relative;}.carousel .carousel-inner{overflow:hidden;width:100%;position:relative;} @@ -453,5 +444,9 @@ a.thumbnail:hover{border-color:#0069d6;-webkit-box-shadow:0 1px 4px rgba(0, 105, .carousel .active.right{left:100%;} .carousel .nav{width:auto;-webkit-border-radius:0;-moz-border-radius:0;border-radius:0;height:50px;position:absolute;top:50%;margin:-25px 0 0;cursor:pointer;background:rgba(0, 0, 0, 0.7);color:white;font-size:42px;left:5px;font-weight:100;padding:0 15px;}.carousel .nav.right{right:5px;left:auto;} .carousel .nav:hover{text-decoration:none;background:rgba(0, 0, 0, 0.8);} +.label{padding:1px 3px 2px;font-size:9.75px;font-weight:bold;color:#ffffff;text-transform:uppercase;background-color:#999999;-webkit-border-radius:3px;-moz-border-radius:3px;border-radius:3px;}.label.important{background-color:#c43c35;} +.label.warning{background-color:#f89406;} +.label.success{background-color:#46a546;} +.label.notice{background-color:#62cffc;} .hidden{display:none;visibility:hidden;} @media (max-width: 480px){.modal{width:auto;margin:0;} .horizontal-form .control-group>label{float:none;width:auto;padding-top:0;text-align:left;} .horizontal-form .controls{margin-left:0;} .horizontal-form .control-list{padding-top:0;} .horizontal-form .form-actions{padding-left:0;} .modal{position:fixed;top:20px;left:20px;right:20px;width:auto;}.modal .close{padding:10px;}}@media (max-width: 768px){.container{width:auto;padding:0 20px;} .row{margin-left:0;} .row>[class*="span"]{float:none;display:block;width:auto;margin:0;} .nav{position:absolute;top:0;left:0;width:180px;padding-top:40px;list-style:none;} .nav,.nav>li:last-child a{-webkit-border-radius:0 0 4px 0;-moz-border-radius:0 0 4px 0;border-radius:0 0 4px 0;} .nav>li{float:none;display:none;} .nav>li>a{float:none;background-color:#222;} .nav>.active{display:block;position:absolute;top:0;left:0;} .navbar ul .active>a{background-color:transparent;} .nav>.active a:after{display:inline-block;width:0;height:0;margin-top:8px;margin-left:6px;text-indent:-99999px;vertical-align:top;border-left:4px solid transparent;border-right:4px solid transparent;border-top:4px solid #ffffff;filter:alpha(opacity=100);-moz-opacity:1;opacity:1;content:"↓";} .nav>.active a:hover{background-color:rgba(255, 255, 255, 0.05);}}@media (min-width: 768px) and (max-width: 940px){.container{width:748px;} .span1{width:44px;} .span2{width:108px;} .span3{width:172px;} .span4{width:236px;} .span5{width:300px;} .span6{width:364px;} .span7{width:428px;} .span8{width:492px;} .span9{width:556px;} .span10{width:620px;} .span11{width:684px;} .span12{width:748px;} .offset1{margin-left:64px;} .offset2{margin-left:128px;} .offset3{margin-left:192px;} .offset4{margin-left:256px;} .offset5{margin-left:320px;} .offset6{margin-left:384px;} .offset7{margin-left:448px;} .offset8{margin-left:512px;} .offset9{margin-left:576px;} .offset10{margin-left:640px;} .offset11{margin-left:704px;} .offset12{margin-left:768px;}} diff --git a/docs/assets/css/docs.css b/docs/assets/css/docs.css index b218b465c5..a4573448f2 100644 --- a/docs/assets/css/docs.css +++ b/docs/assets/css/docs.css @@ -171,7 +171,7 @@ body > .navbar-fixed .brand:hover { font-weight: 300; } .marketing h2 { - margin-bottom: 9px; + font-size: 22px; } .marketing p { margin-right: 10px; diff --git a/docs/base-css.html b/docs/base-css.html index 37fa97ba85..58d42c2b06 100644 --- a/docs/base-css.html +++ b/docs/base-css.html @@ -973,40 +973,36 @@ Form states <fieldset class="control-group"> <label class="control-label" for="optionsCheckboxes">Checkboxes</label> <div class="controls"> - <div class="control-list"> - <label class="checkbox"> - <input type="checkbox" name="optionsCheckboxes" value="option1"> - Option one is this and that—be sure to include why it’s great - </label> - <label class="checkbox"> - <input type="checkbox" name="optionsCheckboxes" value="option2"> - Option two can also be checked and included in form results - </label> - <label class="checkbox"> - <input type="checkbox" name="optionsCheckboxes" value="option3"> - Option three can—yes, you guessed it—also be checked and included in form results - </label> - <label class="checkbox"> - <input type="checkbox" name="optionsCheckboxes" value="option4"> - Option four cannot be checked as it is disabled - </label> - </div> + <label class="checkbox"> + <input type="checkbox" name="optionsCheckboxes" value="option1"> + Option one is this and that—be sure to include why it’s great + </label> + <label class="checkbox"> + <input type="checkbox" name="optionsCheckboxes" value="option2"> + Option two can also be checked and included in form results + </label> + <label class="checkbox"> + <input type="checkbox" name="optionsCheckboxes" value="option3"> + Option three can—yes, you guessed it—also be checked and included in form results + </label> + <label class="checkbox"> + <input type="checkbox" name="optionsCheckboxes" value="option4"> + Option four cannot be checked as it is disabled + </label> <p class="help-text"><strong>Note:</strong> Labels surround all the options for much larger click areas and a more usable form.</p> </div> </fieldset> <fieldset class="control-group"> <label class="control-label" for="optionsRadios">Radio buttons</label> <div class="controls"> - <div class="control-list"> - <label> - <input type="radio" checked name="optionsRadios" value="option1"> - <span>Option one is this and that—be sure to include why it’s great</span> - </label> - <label> - <input type="radio" name="optionsRadios" value="option2"> - <span>Option two can is something else and selecting it will deselect options 1</span> - </label> - </div> + <label class="radio"> + <input type="radio" checked name="optionsRadios" value="option1"> + Option one is this and that—be sure to include why it’s great + </label> + <label class="radio"> + <input type="radio" name="optionsRadios" value="option2"> + Option two can is something else and selecting it will deselect options 1 + </label> <p class="help-text"><strong>Note:</strong> Labels surround all the options for much larger click areas and a more usable form.</p> </div> </fieldset> @@ -1040,17 +1036,15 @@ Form states <fieldset class="control-group"> <label class="control-label" for="input02">Label</label> <div class="controls"> - <div class="control-list"> - <label class="checkbox"> - <input type="checkbox"> Something something something something something - </label> - <label class="checkbox"> - <input type="checkbox"> Something something something something - </label> - <label class="checkbox"> - <input type="checkbox"> Something something something - </label> - </div> + <label class="checkbox"> + <input type="checkbox"> Something something something something something + </label> + <label class="checkbox"> + <input type="checkbox"> Something something something something + </label> + <label class="checkbox"> + <input type="checkbox"> Something something something + </label> </div> </fieldset> <fieldset class="form-actions"> diff --git a/docs/components.html b/docs/components.html index d9d6b10d62..e57d1fd179 100644 --- a/docs/components.html +++ b/docs/components.html @@ -230,27 +230,33 @@ <h1>Side nav <small></small></h1> </div> - <div class="well side-nav"> - <h6 class="nav-label">Your account</h6> - <ul class="nav-group"> - <li class="active"><a class="nav-item" href="#">Home</a></li> - <li><a class="nav-item" href="#">Library</a></li> - <li><a class="nav-item" href="#">Profile</a></li> - <li><a class="nav-item" href="#">Settings</a></li> - <li><a class="nav-item" href="#">Help</a></li> - </ul> - </div> - - <div class="well side-nav"> - <h6 class="nav-label">Your account</h6> - <ul class="nav-group"> - <li class="active"><a class="nav-item" href="#"><i class="home"></i> Home</a></li> - <li><a class="nav-item" href="#"><i class="book"></i> Library</a></li> - <li><a class="nav-item" href="#"><i class="user"></i> Profile</a></li> - <li><a class="nav-item" href="#"><i class="cog"></i> Settings</a></li> - <li><a class="nav-item" href="#"><i class="time"></i> Help</a></li> - </ul> + <div class="row"> + <div class="span3"> + <div class="well side-nav"> + <h6 class="nav-label">Your account</h6> + <ul class="nav-group"> + <li class="active"><a class="nav-item" href="#">Home</a></li> + <li><a class="nav-item" href="#">Library</a></li> + <li><a class="nav-item" href="#">Profile</a></li> + <li><a class="nav-item" href="#">Settings</a></li> + <li><a class="nav-item" href="#">Help</a></li> + </ul> + </div> + </div> + <div class="span3"> + <div class="well side-nav"> + <h6 class="nav-label">Your account</h6> + <ul class="nav-group"> + <li class="active"><a class="nav-item" href="#"><i class="home"></i> Home</a></li> + <li><a class="nav-item" href="#"><i class="book"></i> Library</a></li> + <li><a class="nav-item" href="#"><i class="user"></i> Profile</a></li> + <li><a class="nav-item" href="#"><i class="cog"></i> Settings</a></li> + <li><a class="nav-item" href="#"><i class="time"></i> Help</a></li> + </ul> + </div> + </div> </div> + </section> diff --git a/lib/alerts.less b/lib/alerts.less new file mode 100644 index 0000000000..bb0bd5d99e --- /dev/null +++ b/lib/alerts.less @@ -0,0 +1,83 @@ +// ALERT STYLES +// ------------ + +// Base alert styles +.alert-message { + position: relative; + padding: 7px 15px; + margin-bottom: @baseLineHeight; + color: @grayDark; + text-shadow: 0 1px 0 rgba(255,255,255,.5); + .gradientBar(#fceec1, #eedc94); // warning by default + border-width: 1px; + border-style: solid; + .border-radius(4px); + .box-shadow(inset 0 1px 0 rgba(255,255,255,.25)); + + // Adjust close icon + .close { + *margin-top: 3px; /* IE7 spacing */ + } + + // Remove extra margin from content + h5 { + line-height: @baseLineHeight; + } + p { + margin-bottom: 0; + } + div { + margin-top: 5px; + margin-bottom: 2px; + line-height: 28px; + } + .btn { + // Provide actions with buttons + .box-shadow(0 1px 0 rgba(255,255,255,.25)); + } + + &.error, + &.success, + &.info { + text-shadow: 0 -1px 0 rgba(0,0,0,.25); + } + + &.block-message { + padding: 14px; + background-image: none; + background-color: lighten(#fceec1, 5%); + .reset-filter(); // undo gradient for IE9 + border-color: #fceec1; + .box-shadow(none); + ul, p { + margin-right: 30px; + } + ul { + margin-bottom: 0; + } + li { + color: @grayDark; + } + .alert-actions { + margin-top: 5px; + } + &.error, + &.success, + &.info { + color: @grayDark; + text-shadow: 0 1px 0 rgba(255,255,255,.5); + } + &.error { + background-color: lighten(#f56a66, 25%); + border-color: lighten(#f56a66, 20%); + } + &.success { + background-color: lighten(#62c462, 30%); + border-color: lighten(#62c462, 25%); + } + &.info { + background-color: lighten(#6bd0ee, 25%); + border-color: lighten(#6bd0ee, 20%); + } + } +} diff --git a/lib/bootstrap.less b/lib/bootstrap.less index 8b821825c7..df233f1280 100644 --- a/lib/bootstrap.less +++ b/lib/bootstrap.less @@ -19,24 +19,38 @@ // Grid system and page structure @import "scaffolding.less"; -// Styled patterns and elements +// Base CSS @import "type.less"; @import "forms.less"; @import "tables.less"; -// Temp catchall for what's missing thus far -@import "patterns.less"; - +// Components: common @import "sprites.less"; @import "dropdowns.less"; +@import "wells.less"; +@import "component-animations.less"; +@import "close.less"; + +// Components: Nav +@import "navbar.less"; @import "tabs-pills.less"; +@import "sidenav.less"; @import "breadcrumbs.less"; @import "pagination.less"; + +// Components: Popovers @import "modals.less"; @import "twipsy.less"; @import "popovers.less"; -@import "sidenav.less"; + +// Components: Buttons & Alerts +@import "buttons.less"; +@import "button-groups.less"; +@import "alerts.less"; // Note: alerts share common CSS with buttons and thus have styles in buttons.less + +// Components: Misc @import "thumbnails.less"; +@import "labels.less"; // Responsive @import "responsive.less"; \ No newline at end of file diff --git a/lib/button-groups.less b/lib/button-groups.less new file mode 100644 index 0000000000..3024ecd65a --- /dev/null +++ b/lib/button-groups.less @@ -0,0 +1,65 @@ +// BUTTON GROUPS +// ------------- + +// Group multiple button groups together for a toolbar +.btn-toolbar { + .clearfix(); + .btn-group { + float: left; + margin-right: 10px; + } +} + +// Clear the float +.btn-group { + .clearfix(); +} +// Float them, remove border radius, then re-add to first and last elements +.btn-group .btn { + position: relative; + float: left; + margin-left: -1px; + .border-radius(0); + // Set corners individual because sometimes a single button can be in a .btn-group and we need :first-child and :last-child to both match + &:first-child { + margin-left: 0; + -webkit-border-top-left-radius: 4px; + -moz-border-radius-topleft: 4px; + border-top-left-radius: 4px; + -webkit-border-bottom-left-radius: 4px; + -moz-border-radius-bottomleft: 4px; + border-bottom-left-radius: 4px; + } + &:last-child { + -webkit-border-top-right-radius: 4px; + -moz-border-radius-topright: 4px; + border-top-right-radius: 4px; + -webkit-border-bottom-right-radius: 4px; + -moz-border-radius-bottomright: 4px; + border-bottom-right-radius: 4px; + } + // Reset corners for large buttons + &.large:first-child { + margin-left: 0; + -webkit-border-top-left-radius: 6px; + -moz-border-radius-topleft: 6px; + border-top-left-radius: 6px; + -webkit-border-bottom-left-radius: 6px; + -moz-border-radius-bottomleft: 6px; + border-bottom-left-radius: 6px; + } + &.large:last-child { + -webkit-border-top-right-radius: 6px; + -moz-border-radius-topright: 6px; + border-top-right-radius: 6px; + -webkit-border-bottom-right-radius: 6px; + -moz-border-radius-bottomright: 6px; + border-bottom-right-radius: 6px; + } +} +// On hover/focus/active, bring the proper btn to front +.btn-group .btn:hover, +.btn-group .btn:focus, +.btn-group .btn:active { + z-index: 2; +} diff --git a/lib/buttons.less b/lib/buttons.less new file mode 100644 index 0000000000..aeb70605b4 --- /dev/null +++ b/lib/buttons.less @@ -0,0 +1,119 @@ +// BUTTON STYLES +// ------------- + +// Shared colors for buttons and alerts +.btn, +.alert-message { + // Set text color + &.danger, + &.danger:hover, + &.error, + &.error:hover, + &.success, + &.success:hover, + &.info, + &.info:hover { + color: @white + } + // Danger and error appear as red + &.danger, + &.error { + .gradientBar(#ee5f5b, #c43c35); + } + // Success appears as green + &.success { + .gradientBar(#62c462, #57a957); + } + // Info appears as a neutral blue + &.info { + .gradientBar(#5bc0de, #339bb9); + } +} + +// Base .btn styles +.btn { + // Button Base + display: inline-block; + padding: 5px 14px 6px; + font-size: @baseFontSize; + line-height: normal; + color: #333; + text-shadow: 0 1px 1px rgba(255,255,255,.75); + #gradient > .vertical-three-colors(#ffffff, #ffffff, 25%, darken(#ffffff, 10%)); // Don't use .gradientbar() here since it does a three-color gradient + border: 1px solid #ccc; + border-bottom-color: #bbb; + .border-radius(4px); + @shadow: inset 0 1px 0 rgba(255,255,255,.2), 0 1px 2px rgba(0,0,0,.05); + .box-shadow(@shadow); + cursor: pointer; + + &:hover { + color: @grayDark; + text-decoration: none; + background-position: 0 -15px; + } + + // Focus state for keyboard and accessibility + &:focus { + outline: 1px dotted #666; + } + + // Primary Button Type + &.primary { + color: @white; + text-shadow: 0 -1px 0 rgba(0,0,0,.25); + .gradientBar(@blue, @blueDark) + } + + // Transitions + .transition(.1s linear all); + + // Active and Disabled states + &.active, + &:active { + @shadow: inset 0 2px 4px rgba(0,0,0,.25), 0 1px 2px rgba(0,0,0,.05); + .box-shadow(@shadow); + } + &.disabled { + cursor: default; + background-image: none; + .reset-filter(); + .opacity(65); + .box-shadow(none); + } + &[disabled] { + // disabled pseudo can't be included with .disabled + // def because IE8 and below will drop it ;_; + cursor: default; + background-image: none; + .reset-filter(); + .opacity(65); + .box-shadow(none); + } + + // Button Sizes + &.large { + padding: 9px 14px 9px; + font-size: @baseFontSize + 2px; + line-height: normal; + .border-radius(6px); + } + &.small { + padding: 7px 9px 7px; + font-size: @baseFontSize - 2px; + } +} +// Super jank hack for removing border-radius from IE9 so we can keep filter gradients on alerts and buttons +:root .alert-message, +:root .btn { + border-radius: 0 \0; +} + +// Help Firefox not be a jerk about adding extra padding to buttons +button.btn, +input[type=submit].btn { + &::-moz-focus-inner { + padding: 0; + border: 0; + } +} \ No newline at end of file diff --git a/lib/close.less b/lib/close.less new file mode 100644 index 0000000000..25a0c3ef3e --- /dev/null +++ b/lib/close.less @@ -0,0 +1,17 @@ +// CLOSE ICONS +// ----------- + +.close { + float: right; + font-size: 20px; + font-weight: bold; + line-height: @baseLineHeight * .75; + color: @black; + text-shadow: 0 1px 0 rgba(255,255,255,1); + .opacity(20); + &:hover { + color: @black; + text-decoration: none; + .opacity(40); + } +} diff --git a/lib/component-animations.less b/lib/component-animations.less new file mode 100644 index 0000000000..4f2a4fd118 --- /dev/null +++ b/lib/component-animations.less @@ -0,0 +1,18 @@ +// COMPONENT ANIMATIONS +// -------------------- + +.fade { + .transition(opacity .15s linear); + opacity: 0; + &.in { + opacity: 1; + } +} + +.collapse { + .transition(height .35s ease); + position:relative; + overflow:hidden; + height: 0; + &.in { height: auto; } +} diff --git a/lib/forms.less b/lib/forms.less index ededc772ed..0c624fa884 100644 --- a/lib/forms.less +++ b/lib/forms.less @@ -391,7 +391,8 @@ textarea[readonly] { margin-left: 150px; } // Move the options list down to align with labels - .control-list { + .controls > .radio:first-child, + .controls > .checkbox:first-child { padding-top: 6px; // has to be padding because margin collaspes } // Move over buttons in .form-actions to align with .controls diff --git a/lib/labels.less b/lib/labels.less new file mode 100644 index 0000000000..114bc85b56 --- /dev/null +++ b/lib/labels.less @@ -0,0 +1,16 @@ +// LABELS +// ------ + +.label { + padding: 1px 3px 2px; + font-size: @baseFontSize * .75; + font-weight: bold; + color: @white; + text-transform: uppercase; + background-color: @grayLight; + .border-radius(3px); + &.important { background-color: #c43c35; } + &.warning { background-color: @orange; } + &.success { background-color: @green; } + &.notice { background-color: lighten(@blue, 25%); } +} diff --git a/lib/navbar.less b/lib/navbar.less new file mode 100644 index 0000000000..d57f316f59 --- /dev/null +++ b/lib/navbar.less @@ -0,0 +1,206 @@ +// NAVBAR (FIXED AND STATIC) +// ------------------------- + +// Navbar variables +@navBarHeight: 40px; +@navBarBgStart: #333; +@navBarBgEnd: #222; + +// Common styles +.navbar { + overflow: visible; +} +// gradient is applied to it's own element because overflow visible is not honored by ie when filter is present +.navbar-inner { + background-color: @navBarBgEnd; + #gradient > .vertical(@navBarBgStart, @navBarBgEnd); + @shadow: 0 1px 3px rgba(0,0,0,.25), inset 0 -1px 0 rgba(0,0,0,.1); + .box-shadow(@shadow); +} +// Text and links +.navbar { + // Hover and active states + .brand a:hover, + ul .active > a { + color: @white; + text-decoration: none; + background-color: @navBarBgStart; + background-color: rgba(255,255,255,.05); + } + // Website or project name + .brand { + float: left; + display: block; + padding: 8px 20px 12px; + margin-left: -20px; // negative indent to left-align the text down the page + font-size: 20px; + font-weight: 200; + line-height: 1; + color: @white; + } + // Plain text in topbar + p { + margin: 0; + line-height: 40px; + a:hover { + color: @white; + background-color: transparent; + } + } + // Buttons in navbar + .btn { + margin-top: 5px; // make buttons vertically centered in navbar + } +} + +// Navbar search +.navbar-search { + position: relative; + float: left; + margin-top: 6px; + margin-bottom: 0; + .search-query { + padding: 4px 9px; + #font > .sans-serif(13px, normal, 1); + color: @white; + color: rgba(255,255,255,.75); + background-color: #444; + background-color: rgba(255,255,255,.3); + border: 1px solid #111; + @shadow: inset 0 1px 2px rgba(0,0,0,.1), 0 1px 0px rgba(255,255,255,.15); + .box-shadow(@shadow); + .transition(none); + + // Placeholder text gets special styles; can't be bundled together though for some reason + &:-moz-placeholder { + color: @grayLighter; + } + &::-webkit-input-placeholder { + color: @grayLighter; + } + // Hover states + &:hover { + color: @white; + background-color: @grayLight; + background-color: rgba(255,255,255,.5); + } + // Focus states (we use .focused since IE8 and down doesn't support :focus) + &:focus, + &.focused { + padding: 5px 10px; + color: @grayDark; + text-shadow: 0 1px 0 @white; + background-color: @white; + border: 0; + .box-shadow(0 0 3px rgba(0,0,0,.15)); + outline: 0; + } + } +} + + +// Static navbar +.navbar-static { + margin-bottom: @baseLineHeight; +} +.navbar-static .navbar-inner { + padding-left: 20px; + padding-right: 20px; + .border-radius(4px); +} + +// Fixed navbar +.navbar-fixed { + position: fixed; + top: 0; + right: 0; + left: 0; + z-index: 10000; +} + + + +// NAVIGATION +// ---------- + +// Nav for navbar and topbar +// ul.nav for all topbar based navigation to avoid inheritance issues and over-specificity +.nav { + position: relative; + left: 0; + display: block; + float: left; + margin: 0 10px 0 0; + > li { + display: block; + float: left; + } + a { + display: block; + float: none; + padding: 10px 10px 11px; + line-height: 19px; + color: @grayLight; + text-decoration: none; + text-shadow: 0 -1px 0 rgba(0,0,0,.25); + &:hover { + color: @white; + text-decoration: none; + } + } + .active > a { + background-color: #222; + background-color: rgba(0,0,0,.5); + } + // Dividers (basically a vertical hr) + .divider { + height: 40px; + width: 1px; + margin: 0 5px; + overflow: hidden; + background-color: #222; + border-right: 1px solid #444; + } + + // Secondary (floated right) nav in topbar + &.secondary-nav { + float: right; + margin-left: 10px; + margin-right: 0; + .dropdown-menu { + right: 0; + border: 0; + } + } + // Dropdowns within the .nav + .dropdown-toggle:hover, + .dropdown.open .dropdown-toggle { + background: #444; + background: rgba(255,255,255,.05); + } + .dropdown-menu { + background-color: #333; + .dropdown-toggle { + color: @white; + &.open { + background: #444; + background: rgba(255,255,255,.05); + } + } + li a { + color: #999; + text-shadow: 0 1px 0 rgba(0,0,0,.5); + &:hover { + #gradient > .vertical(#292929,#191919); + color: @white; + } + } + .active a { + color: @white; + } + .divider { + background-color: #222; + border-color: #444; + } + } +} diff --git a/lib/patterns.less b/lib/patterns.less index 7c9ee7e48f..72c3e8ec5f 100644 --- a/lib/patterns.less +++ b/lib/patterns.less @@ -3,220 +3,6 @@ // ---------------------------------------------------------------------------- -// NAVBAR (FIXED AND STATIC) -// ------------------------- - -// Navbar variables -@navBarHeight: 40px; -@navBarBgStart: #333; -@navBarBgEnd: #222; - -// Common styles -.navbar { - overflow: visible; -} -// gradient is applied to it's own element because overflow visible is not honored by ie when filter is present -.navbar-inner { - background-color: @navBarBgEnd; - #gradient > .vertical(@navBarBgStart, @navBarBgEnd); - @shadow: 0 1px 3px rgba(0,0,0,.25), inset 0 -1px 0 rgba(0,0,0,.1); - .box-shadow(@shadow); -} -// Text and links -.navbar { - // Hover and active states - .brand a:hover, - ul .active > a { - color: @white; - text-decoration: none; - background-color: @navBarBgStart; - background-color: rgba(255,255,255,.05); - } - // Website or project name - .brand { - float: left; - display: block; - padding: 8px 20px 12px; - margin-left: -20px; // negative indent to left-align the text down the page - font-size: 20px; - font-weight: 200; - line-height: 1; - color: @white; - } - // Plain text in topbar - p { - margin: 0; - line-height: 40px; - a:hover { - color: @white; - background-color: transparent; - } - } - // Buttons in navbar - .btn { - margin-top: 5px; // make buttons vertically centered in navbar - } -} - -// Navbar search -.navbar-search { - position: relative; - float: left; - margin-top: 6px; - margin-bottom: 0; - .search-query { - padding: 4px 9px; - #font > .sans-serif(13px, normal, 1); - color: @white; - color: rgba(255,255,255,.75); - background-color: #444; - background-color: rgba(255,255,255,.3); - border: 1px solid #111; - @shadow: inset 0 1px 2px rgba(0,0,0,.1), 0 1px 0px rgba(255,255,255,.15); - .box-shadow(@shadow); - .transition(none); - - // Placeholder text gets special styles; can't be bundled together though for some reason - &:-moz-placeholder { - color: @grayLighter; - } - &::-webkit-input-placeholder { - color: @grayLighter; - } - // Hover states - &:hover { - color: @white; - background-color: @grayLight; - background-color: rgba(255,255,255,.5); - } - // Focus states (we use .focused since IE8 and down doesn't support :focus) - &:focus, - &.focused { - padding: 5px 10px; - color: @grayDark; - text-shadow: 0 1px 0 @white; - background-color: @white; - border: 0; - .box-shadow(0 0 3px rgba(0,0,0,.15)); - outline: 0; - } - } -} - - -// Static navbar -.navbar-static { - margin-bottom: @baseLineHeight; -} -.navbar-static .navbar-inner { - padding-left: 20px; - padding-right: 20px; - .border-radius(4px); -} - -// Fixed navbar -.navbar-fixed { - position: fixed; - top: 0; - right: 0; - left: 0; - z-index: 10000; -} - - - -// NAVIGATION -// ---------- - -// Nav for navbar and topbar -// ul.nav for all topbar based navigation to avoid inheritance issues and over-specificity -.nav { - position: relative; - left: 0; - display: block; - float: left; - margin: 0 10px 0 0; - > li { - display: block; - float: left; - } - a { - display: block; - float: none; - padding: 10px 10px 11px; - line-height: 19px; - color: @grayLight; - text-decoration: none; - text-shadow: 0 -1px 0 rgba(0,0,0,.25); - &:hover { - color: @white; - text-decoration: none; - } - } - .active > a { - background-color: #222; - background-color: rgba(0,0,0,.5); - } - // Dividers (basically a vertical hr) - .divider { - height: 40px; - width: 1px; - margin: 0 5px; - overflow: hidden; - background-color: #222; - border-right: 1px solid #444; - } - - // Secondary (floated right) nav in topbar - &.secondary-nav { - float: right; - margin-left: 10px; - margin-right: 0; - .dropdown-menu { - right: 0; - border: 0; - } - } - // Dropdowns within the .nav - .dropdown-toggle:hover, - .dropdown.open .dropdown-toggle { - background: #444; - background: rgba(255,255,255,.05); - } - .dropdown-menu { - background-color: #333; - .dropdown-toggle { - color: @white; - &.open { - background: #444; - background: rgba(255,255,255,.05); - } - } - li a { - color: #999; - text-shadow: 0 1px 0 rgba(0,0,0,.5); - &:hover { - #gradient > .vertical(#292929,#191919); - color: @white; - } - } - .active a { - color: @white; - } - .divider { - background-color: #222; - border-color: #444; - } - } -} - -.topbar ul .dropdown-menu li a { - padding: 4px 15px; -} - - - - // PAGE HEADERS // ------------ @@ -255,354 +41,3 @@ footer { margin-bottom: @baseLineHeight * .75; } } - - -// BUTTON STYLES -// ------------- - -// Shared colors for buttons and alerts -.btn, -.alert-message { - // Set text color - &.danger, - &.danger:hover, - &.error, - &.error:hover, - &.success, - &.success:hover, - &.info, - &.info:hover { - color: @white - } - // Danger and error appear as red - &.danger, - &.error { - .gradientBar(#ee5f5b, #c43c35); - } - // Success appears as green - &.success { - .gradientBar(#62c462, #57a957); - } - // Info appears as a neutral blue - &.info { - .gradientBar(#5bc0de, #339bb9); - } -} - -// Base .btn styles -.btn { - // Button Base - display: inline-block; - padding: 5px 14px 6px; - font-size: @baseFontSize; - line-height: normal; - color: #333; - text-shadow: 0 1px 1px rgba(255,255,255,.75); - #gradient > .vertical-three-colors(#ffffff, #ffffff, 25%, darken(#ffffff, 10%)); // Don't use .gradientbar() here since it does a three-color gradient - border: 1px solid #ccc; - border-bottom-color: #bbb; - .border-radius(4px); - @shadow: inset 0 1px 0 rgba(255,255,255,.2), 0 1px 2px rgba(0,0,0,.05); - .box-shadow(@shadow); - cursor: pointer; - - &:hover { - color: @grayDark; - text-decoration: none; - background-position: 0 -15px; - } - - // Focus state for keyboard and accessibility - &:focus { - outline: 1px dotted #666; - } - - // Primary Button Type - &.primary { - color: @white; - text-shadow: 0 -1px 0 rgba(0,0,0,.25); - .gradientBar(@blue, @blueDark) - } - - // Transitions - .transition(.1s linear all); - - // Active and Disabled states - &.active, - &:active { - @shadow: inset 0 2px 4px rgba(0,0,0,.25), 0 1px 2px rgba(0,0,0,.05); - .box-shadow(@shadow); - } - &.disabled { - cursor: default; - background-image: none; - .reset-filter(); - .opacity(65); - .box-shadow(none); - } - &[disabled] { - // disabled pseudo can't be included with .disabled - // def because IE8 and below will drop it ;_; - cursor: default; - background-image: none; - .reset-filter(); - .opacity(65); - .box-shadow(none); - } - - // Button Sizes - &.large { - padding: 9px 14px 9px; - font-size: @baseFontSize + 2px; - line-height: normal; - .border-radius(6px); - } - &.small { - padding: 7px 9px 7px; - font-size: @baseFontSize - 2px; - } -} -// Super jank hack for removing border-radius from IE9 so we can keep filter gradients on alerts and buttons -:root .alert-message, -:root .btn { - border-radius: 0 \0; -} - -// Help Firefox not be a jerk about adding extra padding to buttons -button.btn, -input[type=submit].btn { - &::-moz-focus-inner { - padding: 0; - border: 0; - } -} - -// Button groups -// ------------- - -// Group multiple button groups together for a toolbar -.btn-toolbar { - .clearfix(); - .btn-group { - float: left; - margin-right: 10px; - } -} - -// Clear the float -.btn-group { - .clearfix(); -} -// Float them, remove border radius, then re-add to first and last elements -.btn-group .btn { - position: relative; - float: left; - margin-left: -1px; - .border-radius(0); - // Set corners individual because sometimes a single button can be in a .btn-group and we need :first-child and :last-child to both match - &:first-child { - margin-left: 0; - -webkit-border-top-left-radius: 4px; - -moz-border-radius-topleft: 4px; - border-top-left-radius: 4px; - -webkit-border-bottom-left-radius: 4px; - -moz-border-radius-bottomleft: 4px; - border-bottom-left-radius: 4px; - } - &:last-child { - -webkit-border-top-right-radius: 4px; - -moz-border-radius-topright: 4px; - border-top-right-radius: 4px; - -webkit-border-bottom-right-radius: 4px; - -moz-border-radius-bottomright: 4px; - border-bottom-right-radius: 4px; - } - // Reset corners for large buttons - &.large:first-child { - margin-left: 0; - -webkit-border-top-left-radius: 6px; - -moz-border-radius-topleft: 6px; - border-top-left-radius: 6px; - -webkit-border-bottom-left-radius: 6px; - -moz-border-radius-bottomleft: 6px; - border-bottom-left-radius: 6px; - } - &.large:last-child { - -webkit-border-top-right-radius: 6px; - -moz-border-radius-topright: 6px; - border-top-right-radius: 6px; - -webkit-border-bottom-right-radius: 6px; - -moz-border-radius-bottomright: 6px; - border-bottom-right-radius: 6px; - } -} -// On hover/focus/active, bring the proper btn to front -.btn-group .btn:hover, -.btn-group .btn:focus, -.btn-group .btn:active { - z-index: 2; -} - - - -// CLOSE ICONS -// ----------- -.close { - float: right; - font-size: 20px; - font-weight: bold; - line-height: @baseLineHeight * .75; - color: @black; - text-shadow: 0 1px 0 rgba(255,255,255,1); - .opacity(20); - &:hover { - color: @black; - text-decoration: none; - .opacity(40); - } -} - - -// ERROR STYLES -// ------------ - -// Base alert styles -.alert-message { - position: relative; - padding: 7px 15px; - margin-bottom: @baseLineHeight; - color: @grayDark; - text-shadow: 0 1px 0 rgba(255,255,255,.5); - .gradientBar(#fceec1, #eedc94); // warning by default - border-width: 1px; - border-style: solid; - .border-radius(4px); - .box-shadow(inset 0 1px 0 rgba(255,255,255,.25)); - - // Adjust close icon - .close { - *margin-top: 3px; /* IE7 spacing */ - } - - // Remove extra margin from content - h5 { - line-height: @baseLineHeight; - } - p { - margin-bottom: 0; - } - div { - margin-top: 5px; - margin-bottom: 2px; - line-height: 28px; - } - .btn { - // Provide actions with buttons - .box-shadow(0 1px 0 rgba(255,255,255,.25)); - } - - &.error, - &.success, - &.info { - text-shadow: 0 -1px 0 rgba(0,0,0,.25); - } - - &.block-message { - padding: 14px; - background-image: none; - background-color: lighten(#fceec1, 5%); - .reset-filter(); // undo gradient for IE9 - border-color: #fceec1; - .box-shadow(none); - ul, p { - margin-right: 30px; - } - ul { - margin-bottom: 0; - } - li { - color: @grayDark; - } - .alert-actions { - margin-top: 5px; - } - &.error, - &.success, - &.info { - color: @grayDark; - text-shadow: 0 1px 0 rgba(255,255,255,.5); - } - &.error { - background-color: lighten(#f56a66, 25%); - border-color: lighten(#f56a66, 20%); - } - &.success { - background-color: lighten(#62c462, 30%); - border-color: lighten(#62c462, 25%); - } - &.info { - background-color: lighten(#6bd0ee, 25%); - border-color: lighten(#6bd0ee, 20%); - } - } -} - - - - -// WELLS -// ----- - -.well { - min-height: 20px; - padding: 19px; - margin-bottom: 20px; - background-color: #f5f5f5; - border: 1px solid #eee; - border: 1px solid rgba(0,0,0,.05); - .border-radius(4px); - .box-shadow(inset 0 1px 1px rgba(0,0,0,.05)); - blockquote { - border-color: #ddd; - border-color: rgba(0,0,0,.15); - } -} - - -// PATTERN ANIMATIONS -// ------------------ - -.fade { - .transition(opacity .15s linear); - opacity: 0; - &.in { - opacity: 1; - } -} - -.collapse { - .transition(height .35s ease); - position:relative; - overflow:hidden; - height: 0; - &.in { height: auto; } -} - - -// LABELS -// ------ - -.label { - padding: 1px 3px 2px; - font-size: @baseFontSize * .75; - font-weight: bold; - color: @white; - text-transform: uppercase; - background-color: @grayLight; - .border-radius(3px); - &.important { background-color: #c43c35; } - &.warning { background-color: @orange; } - &.success { background-color: @green; } - &.notice { background-color: lighten(@blue, 25%); } -} - diff --git a/lib/scaffolding.less b/lib/scaffolding.less index 3e231aae5e..d75adba56b 100644 --- a/lib/scaffolding.less +++ b/lib/scaffolding.less @@ -12,7 +12,7 @@ body { font-family: @baseFontFamily; font-size: @baseFontSize; line-height: @baseLineHeight; - color: @grayDark; + color: @gray; background-color: @white; } diff --git a/lib/variables.less b/lib/variables.less index caa9c0f602..03f1028f85 100644 --- a/lib/variables.less +++ b/lib/variables.less @@ -6,7 +6,7 @@ // LINK COLORS // ----------- -@linkColor: #0069d6; +@linkColor: #08c; @linkColorHover: darken(@linkColor, 15); @@ -14,10 +14,10 @@ // ----- @black: #000; -@grayDark: lighten(@black, 25%); -@gray: lighten(@black, 50%); -@grayLight: lighten(@black, 75%); -@grayLighter: lighten(@black, 90%); +@grayDark: #333; +@gray: #555; +@grayLight: #999; +@grayLighter: #eee; @white: #fff; diff --git a/lib/wells.less b/lib/wells.less new file mode 100644 index 0000000000..244b8ca102 --- /dev/null +++ b/lib/wells.less @@ -0,0 +1,17 @@ +// WELLS +// ----- + +.well { + min-height: 20px; + padding: 19px; + margin-bottom: 20px; + background-color: #f5f5f5; + border: 1px solid #eee; + border: 1px solid rgba(0,0,0,.05); + .border-radius(4px); + .box-shadow(inset 0 1px 1px rgba(0,0,0,.05)); + blockquote { + border-color: #ddd; + border-color: rgba(0,0,0,.15); + } +} -- GitLab From 23e5fc2133dd748ba4a7df52b598a24a2915811a Mon Sep 17 00:00:00 2001 From: Mark Otto <markdotto@gmail.com> Date: Thu, 5 Jan 2012 14:11:41 -0800 Subject: [PATCH 183/318] Tweak the docs and address the new forms list of controls: radios and checkboxes are now hanging controls to wrap text properly --- bootstrap.css | 15 +++++++++++---- bootstrap.min.css | 4 +++- docs/assets/css/docs.css | 6 +++++- docs/base-css.html | 9 ++++++++- lib/forms.less | 27 ++++++++++++++++++++++----- lib/patterns.less | 13 ------------- 6 files changed, 49 insertions(+), 25 deletions(-) diff --git a/bootstrap.css b/bootstrap.css index 55706e2a3c..ea084d5f05 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: Thu Jan 5 10:00:31 PST 2012 + * Date: Thu Jan 5 14:10:04 PST 2012 */ html, body { margin: 0; @@ -615,6 +615,16 @@ input[type=image] { textarea { height: auto; } +.radio, .checkbox { + padding-left: 18px; +} +.radio input[type=radio], .checkbox input[type=checkbox] { + float: left; + margin-left: -18px; +} +.controls > .radio:first-child, .controls > .checkbox:first-child { + padding-top: 6px; +} input, textarea { -webkit-box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.1); -moz-box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.1); @@ -986,9 +996,6 @@ textarea[readonly] { .horizontal-form .controls { margin-left: 150px; } -.horizontal-form .controls > .radio:first-child, .horizontal-form .controls > .checkbox:first-child { - padding-top: 6px; -} .horizontal-form .form-actions { padding-left: 150px; } diff --git a/bootstrap.min.css b/bootstrap.min.css index d0ba4dc53e..a021bf774f 100644 --- a/bootstrap.min.css +++ b/bootstrap.min.css @@ -104,6 +104,9 @@ select{background-color:#ffffff;vertical-align:middle;} select[multiple],select[size]{height:inherit;} input[type=image]{-webkit-box-shadow:none;-moz-box-shadow:none;box-shadow:none;} textarea{height:auto;} +.radio,.checkbox{padding-left:18px;} +.radio input[type=radio],.checkbox input[type=checkbox]{float:left;margin-left:-18px;} +.controls>.radio:first-child,.controls>.checkbox:first-child{padding-top:6px;} input,textarea{-webkit-box-shadow:inset 0 1px 3px rgba(0, 0, 0, 0.1);-moz-box-shadow:inset 0 1px 3px rgba(0, 0, 0, 0.1);box-shadow:inset 0 1px 3px rgba(0, 0, 0, 0.1);-webkit-transition:border linear 0.2s,box-shadow linear 0.2s;-moz-transition:border linear 0.2s,box-shadow linear 0.2s;-ms-transition:border linear 0.2s,box-shadow linear 0.2s;-o-transition:border linear 0.2s,box-shadow linear 0.2s;transition:border linear 0.2s,box-shadow linear 0.2s;} input:focus,textarea:focus{border-color:rgba(82, 168, 236, 0.8);-webkit-box-shadow:inset 0 1px 3px rgba(0, 0, 0, 0.1),0 0 8px rgba(82, 168, 236, 0.6);-moz-box-shadow:inset 0 1px 3px rgba(0, 0, 0, 0.1),0 0 8px rgba(82, 168, 236, 0.6);box-shadow:inset 0 1px 3px rgba(0, 0, 0, 0.1),0 0 8px rgba(82, 168, 236, 0.6);outline:0;} input[type=file]:focus,input[type=checkbox]:focus,select:focus{-webkit-box-shadow:none;-moz-box-shadow:none;box-shadow:none;outline:1px dotted #666;} @@ -159,7 +162,6 @@ input[disabled],select[disabled],textarea[disabled],input[readonly],select[reado .control-group>label{font-weight:bold;} .horizontal-form .control-group>label{float:left;width:130px;padding-top:5px;text-align:right;} .horizontal-form .controls{margin-left:150px;} -.horizontal-form .controls>.radio:first-child,.horizontal-form .controls>.checkbox:first-child{padding-top:6px;} .horizontal-form .form-actions{padding-left:150px;} table{width:100%;margin-bottom:18px;} th,td{padding:8px;line-height:18px;text-align:left;border-top:1px solid #ddd;} diff --git a/docs/assets/css/docs.css b/docs/assets/css/docs.css index a4573448f2..9501ec5dc4 100644 --- a/docs/assets/css/docs.css +++ b/docs/assets/css/docs.css @@ -36,7 +36,11 @@ body > .navbar-fixed .brand:hover { /* Space out sub-sections more -------------------------------------------------- */ .page-header { - margin-top: 36px; + margin: 36px 0 18px; + border-bottom: 1px solid #eee; +} +.page-header h1 { + margin-bottom: 9px; } diff --git a/docs/base-css.html b/docs/base-css.html index 58d42c2b06..1ec808a394 100644 --- a/docs/base-css.html +++ b/docs/base-css.html @@ -795,9 +795,16 @@ Form states warning error success - --> +<div class="row"> + <div class="span4"> + <h3>Flexible markup and styles</h3> + <p>The best part about forms in Bootstrap is that all your inputs and controls look great no matter how you build them in your markup. No superfluous HTML is required, but we provide the patterns for those who require it.</p> + </div> +</div> + + <h2>Four types of forms</h2> <table class="bordered-table striped-table"> <thead> diff --git a/lib/forms.less b/lib/forms.less index 0c624fa884..32acbdaba9 100644 --- a/lib/forms.less +++ b/lib/forms.less @@ -116,6 +116,28 @@ textarea { +// CHECKBOXES & RADIOS +// ------------------- + +// Indent the labels to position radios/checkboxes as hanging +.radio, +.checkbox { + padding-left: 18px; +} +.radio input[type=radio], +.checkbox input[type=checkbox] { + float: left; + margin-left: -18px; +} + +// Move the options list down to align with labels +.controls > .radio:first-child, +.controls > .checkbox:first-child { + padding-top: 6px; // has to be padding because margin collaspes +} + + + // FOCUS STATE // ----------- @@ -390,11 +412,6 @@ textarea[readonly] { .controls { margin-left: 150px; } - // Move the options list down to align with labels - .controls > .radio:first-child, - .controls > .checkbox:first-child { - padding-top: 6px; // has to be padding because margin collaspes - } // Move over buttons in .form-actions to align with .controls .form-actions { padding-left: 150px; diff --git a/lib/patterns.less b/lib/patterns.less index 72c3e8ec5f..7a039ce265 100644 --- a/lib/patterns.less +++ b/lib/patterns.less @@ -28,16 +28,3 @@ footer { margin-top: @baseLineHeight - 1; border-top: 1px solid #eee; } - - -// PAGE HEADERS -// ------------ - -.page-header { - margin-bottom: @baseLineHeight * 1.5; - border-bottom: 1px solid #eee; - .box-shadow(0 1px 0 rgba(255,255,255,.5)); - h1 { - margin-bottom: @baseLineHeight * .75; - } -} -- GitLab From 621dd13d87b6ba5fd351966056ea335c6a946f45 Mon Sep 17 00:00:00 2001 From: Mark Otto <markdotto@gmail.com> Date: Thu, 5 Jan 2012 15:43:07 -0800 Subject: [PATCH 184/318] move mega link footer to scaffolding to try it out, fix broken button text shadow, change UL/OL margins back, make li color same as body --- bootstrap.css | 7 +++-- bootstrap.min.css | 6 ++-- docs/assets/css/docs.css | 22 ++++++++++++++ docs/base-css.html | 2 ++ docs/scaffolding.html | 64 ++++++++++++++++++++++++++++++++++++++++ lib/buttons.less | 1 + lib/type.less | 4 +-- 7 files changed, 98 insertions(+), 8 deletions(-) diff --git a/bootstrap.css b/bootstrap.css index ea084d5f05..6b6fd9e52b 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: Thu Jan 5 14:10:04 PST 2012 + * Date: Thu Jan 5 15:42:23 PST 2012 */ html, body { margin: 0; @@ -401,7 +401,7 @@ h6 { text-transform: uppercase; } ul, ol { - margin: 13px 0 14px 25px; + margin: 0 0 9px 25px; } ul ul, ul ol, @@ -417,7 +417,7 @@ ol { } li { line-height: 18px; - color: #333333; + color: #555555; } ul.unstyled { margin-left: 0; @@ -2503,6 +2503,7 @@ i { .alert-message.info, .btn.info:hover, .alert-message.info:hover { + text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25); color: #ffffff; } .btn.danger, diff --git a/bootstrap.min.css b/bootstrap.min.css index a021bf774f..d61bc58cd4 100644 --- a/bootstrap.min.css +++ b/bootstrap.min.css @@ -69,11 +69,11 @@ h3{line-height:27px;font-size:18px;}h3 small{font-size:14px;} h4{font-size:16px;line-height:36px;}h4 small{font-size:12px;} h5{font-size:14px;line-height:18px;} h6{font-size:13px;line-height:18px;color:#999999;text-transform:uppercase;} -ul,ol{margin:13px 0 14px 25px;} +ul,ol{margin:0 0 9px 25px;} ul ul,ul ol,ol ol,ol ul{margin-bottom:0;} ul{list-style:disc;} ol{list-style:decimal;} -li{line-height:18px;color:#333333;} +li{line-height:18px;color:#555555;} ul.unstyled{margin-left:0;list-style:none;} dl{margin-bottom:18px;}dl dt,dl dd{line-height:18px;} dl dt{font-weight:bold;} @@ -390,7 +390,7 @@ i{background-image:url(docs/assets/img/glyphicons-halflings-sprite.png);backgrou .popover .inner{padding:3px;width:280px;overflow:hidden;background-color:#000000;background-color:rgba(0, 0, 0, 0.8);-webkit-border-radius:6px;-moz-border-radius:6px;border-radius:6px;-webkit-box-shadow:0 3px 7px rgba(0, 0, 0, 0.3);-moz-box-shadow:0 3px 7px rgba(0, 0, 0, 0.3);box-shadow:0 3px 7px rgba(0, 0, 0, 0.3);} .popover .title{padding:9px 15px;line-height:1;background-color:#f5f5f5;border-bottom:1px solid #eee;-webkit-border-radius:3px 3px 0 0;-moz-border-radius:3px 3px 0 0;border-radius:3px 3px 0 0;} .popover .content{padding:14px;background-color:#ffffff;-webkit-border-radius:0 0 3px 3px;-moz-border-radius:0 0 3px 3px;border-radius:0 0 3px 3px;-webkit-background-clip:padding-box;-moz-background-clip:padding-box;background-clip:padding-box;}.popover .content p,.popover .content ul,.popover .content ol{margin-bottom:0;} -.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.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{text-shadow:0 -1px 0 rgba(0, 0, 0, 0.25);color:#ffffff;} .btn.danger,.alert-message.danger,.btn.error,.alert-message.error{background-color:#c43c35;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);background-repeat:repeat-x;filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ee5f5b', endColorstr='#c43c35', GradientType=0);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);} .btn.success,.alert-message.success{background-color:#57a957;background-image:-khtml-gradient(linear, left top, left bottom, from(#62c462), to(#57a957));background-image:-moz-linear-gradient(top, #62c462, #57a957);background-image:-ms-linear-gradient(top, #62c462, #57a957);background-image:-webkit-gradient(linear, left top, left bottom, color-stop(0%, #62c462), color-stop(100%, #57a957));background-image:-webkit-linear-gradient(top, #62c462, #57a957);background-image:-o-linear-gradient(top, #62c462, #57a957);background-image:linear-gradient(top, #62c462, #57a957);background-repeat:repeat-x;filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#62c462', endColorstr='#57a957', GradientType=0);border-color:#57a957 #57a957 #3d773d;border-color:rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);} .btn.info,.alert-message.info{background-color:#339bb9;background-image:-khtml-gradient(linear, left top, left bottom, from(#5bc0de), to(#339bb9));background-image:-moz-linear-gradient(top, #5bc0de, #339bb9);background-image:-ms-linear-gradient(top, #5bc0de, #339bb9);background-image:-webkit-gradient(linear, left top, left bottom, color-stop(0%, #5bc0de), color-stop(100%, #339bb9));background-image:-webkit-linear-gradient(top, #5bc0de, #339bb9);background-image:-o-linear-gradient(top, #5bc0de, #339bb9);background-image:linear-gradient(top, #5bc0de, #339bb9);background-repeat:repeat-x;filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#5bc0de', endColorstr='#339bb9', GradientType=0);border-color:#339bb9 #339bb9 #22697d;border-color:rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);} diff --git a/docs/assets/css/docs.css b/docs/assets/css/docs.css index 9501ec5dc4..5eafb962b7 100644 --- a/docs/assets/css/docs.css +++ b/docs/assets/css/docs.css @@ -202,6 +202,28 @@ body > .navbar-fixed .brand:hover { margin-bottom: 0; color: #555; } +.footer dl { + margin-bottom: 0; +} +.footer dl dt { + font-size: 11px; + color: #999; + text-transform: uppercase; +} +.footer dl dd + dt { + margin-top: 18px; +} +.footer dl dd { + margin-left: 0; + font-size: 12px; +} +.footer dl a { + color: #999; +} +.footer dl a:hover { + color: #555; +} + /* Special grid styles diff --git a/docs/base-css.html b/docs/base-css.html index 1ec808a394..10be4c3d48 100644 --- a/docs/base-css.html +++ b/docs/base-css.html @@ -802,6 +802,8 @@ Form states <h3>Flexible markup and styles</h3> <p>The best part about forms in Bootstrap is that all your inputs and controls look great no matter how you build them in your markup. No superfluous HTML is required, but we provide the patterns for those who require it.</p> </div> + <div class="span4"> + </div> </div> diff --git a/docs/scaffolding.html b/docs/scaffolding.html index 0a46252ddb..87394006bf 100644 --- a/docs/scaffolding.html +++ b/docs/scaffolding.html @@ -361,6 +361,70 @@ <!-- Footer ================================================== --> <footer class="footer"> + <div class="row"> + <dl class="span2"> + <dt>Bootstrap</dt> + <dd><a href="./index.html">Overview</a></dd> + <dd><a href="./index.html#gettingstarted">Getting started</a></dd> + <dt>Elsewhere</dt> + <dd><a href="https://github.com/twitter/bootstrap/">GitHub</a></dd> + <dd><a href="https://github.com/twitter/bootstrap/issues?state=open">Issues</a></dd> + <dd><a href="https://github.com/twitter/bootstrap/wiki/Roadmap">Roadmap</a></dd> + <dd><a href="https://github.com/twitter/bootstrap/wiki/Changelog">Changelog</a></dd> + </dl> + <dl class="span2"> + <dt>Scaffolding</dt> + <dd><a href="./scaffolding.html#grid">Grid system</a></dd> + <dd><a href="./scaffolding.html#layouts">Layouts</a></dd> + <dd><a href="./scaffolding.html#responsive">Responsive design</a></dd> + </dl> + <dl class="span2"> + <dt>Base CSS</dt> + <dd><a href="./base-css.html#type">Type</a></dd> + <dd><a href="./base-css.html#tables">Tables</a></dd> + <dd><a href="./base-css.html#forms">Forms</a></dd> + <dd><a href="./base-css.html#buttons">Buttons</a></dd> + <dd><a href="./base-css.html#buttongroups">Button groups</a></dd> + <dd><a href="./base-css.html#icons">Icons</a></dd> + </dl> + <dl class="span2"> + <dt>Components</dt> + <dd><a href="./components.html#thumbnails">Thumbnails</a></dd> + <dd><a href="./components.html#autocomplete">Autocomplete</a></dd> + <dd><a href="./components.html#carousel">Carousel</a></dd> + <dd><a href="./components.html#sidenav">Side nav</a></dd> + <dd><a href="./components.html#navbar">Navbar</a></dd> + <dd><a href="./components.html#tabspills">Tabs and pills</a></dd> + <dd><a href="./components.html#stepnav">Step nav</a></dd> + <dd><a href="./components.html#pagination">Pagination</a></dd> + <dd><a href="./components.html#alerts">Alerts and errors</a></dd> + <dd><a href="./components.html#modals">Modals</a></dd> + <dd><a href="./components.html#twipsy">Twipsy tooltips</a></dd> + <dd><a href="./components.html#popover">Popovers</a></dd> + </dl> + <dl class="span2"> + <dt>Javascript plugins</dt> + <dd><a href="">Transitions</a></dd> + <dd><a href="./javasript.html#modals">Modals</a></dd> + <dd><a href="./javasript.html#dropdowns">Dropdowns</a></dd> + <dd><a href="./javasript.html#scrollspy">Scrollspy</a></dd> + <dd><a href="./javasript.html#tabs">Tabs</a></dd> + <dd><a href="./javasript.html#twipsy">Twipsy tooltips</a></dd> + <dd><a href="./javasript.html#popovers">Popovers</a></dd> + <dd><a href="./javasript.html#alerts">Alerts</a></dd> + <dd><a href="./javasript.html#buttons">Buttons</a></dd> + <dd><a href="./javasript.html#accordion">Accordion</a></dd> + <dd><a href="./javasript.html#carousel">Carousel</a></dd> + </dl> + <dl class="span2"> + <dt>Using LESS</dt> + <dd><a href="./less.html#intro">Introduction to LESS</a></dd> + <dd><a href="./less.html#variables">Variables</a></dd> + <dd><a href="./less.html#mixins">Mixins</a></dd> + <dd><a href="./less.html#compiling">Compiling Bootstrap</a></dd> + </dl> + </div> + <hr> <p class="pull-right"><a href="#">Back to top</a></p> <p>Designed and built with all the love in the world <a href="http://twitter.com/twitter" target="_blank">@twitter</a> by <a href="http://twitter.com/mdo" target="_blank">@mdo</a> and <a href="http://twitter.com/fat" target="_blank">@fat</a>.</p> <p>Code licensed under the <a href="http://www.apache.org/licenses/LICENSE-2.0" target="_blank">Apache License v2.0</a>. Documentation licensed under <a href="http://creativecommons.org/licenses/by/3.0/">CC BY 3.0</a>.</p> diff --git a/lib/buttons.less b/lib/buttons.less index aeb70605b4..bc2df0fb63 100644 --- a/lib/buttons.less +++ b/lib/buttons.less @@ -13,6 +13,7 @@ &.success:hover, &.info, &.info:hover { + text-shadow: 0 -1px 0 rgba(0,0,0,.25); color: @white } // Danger and error appear as red diff --git a/lib/type.less b/lib/type.less index cc446a69d5..59dae717fb 100644 --- a/lib/type.less +++ b/lib/type.less @@ -74,7 +74,7 @@ h6 { // Unordered and Ordered lists ul, ol { - margin: 13px 0 14px 25px; + margin: 0 0 @baseLineHeight / 2 25px; } ul ul, ul ol, @@ -90,7 +90,7 @@ ol { } li { line-height: @baseLineHeight; - color: @grayDark; + color: @gray; } ul.unstyled { margin-left: 0; -- GitLab From 03d7c1a65e0321445842a4925d19331fda200c02 Mon Sep 17 00:00:00 2001 From: Mark Otto <markdotto@gmail.com> Date: Thu, 5 Jan 2012 15:46:48 -0800 Subject: [PATCH 185/318] make dropdowns use unicode character for :after --- bootstrap.css | 4 ++-- bootstrap.min.css | 2 +- lib/dropdowns.less | 2 +- 3 files changed, 4 insertions(+), 4 deletions(-) diff --git a/bootstrap.css b/bootstrap.css index 6b6fd9e52b..0624b31049 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: Thu Jan 5 15:42:23 PST 2012 + * Date: Thu Jan 5 15:46:10 PST 2012 */ html, body { margin: 0; @@ -1486,7 +1486,7 @@ i { filter: alpha(opacity=30); -moz-opacity: 0.3; opacity: 0.3; - content: "↓"; + content: "\2193"; } .dropdown:hover .dropdown-toggle:after { filter: alpha(opacity=100); diff --git a/bootstrap.min.css b/bootstrap.min.css index d61bc58cd4..cda70c6d1a 100644 --- a/bootstrap.min.css +++ b/bootstrap.min.css @@ -267,7 +267,7 @@ i{background-image:url(docs/assets/img/glyphicons-halflings-sprite.png);backgrou .minus{background-position:-432px -96px;} .asterisk{background-position:-456px -96px;} .dropdown{position:relative;} -.dropdown-toggle:after{display:inline-block;width:0;height:0;margin-top:8px;margin-left:6px;text-indent:-99999px;vertical-align:top;border-left:4px solid transparent;border-right:4px solid transparent;border-top:4px solid #ffffff;filter:alpha(opacity=30);-moz-opacity:0.3;opacity:0.3;content:"↓";} +.dropdown-toggle:after{display:inline-block;width:0;height:0;margin-top:8px;margin-left:6px;text-indent:-99999px;vertical-align:top;border-left:4px solid transparent;border-right:4px solid transparent;border-top:4px solid #ffffff;filter:alpha(opacity=30);-moz-opacity:0.3;opacity:0.3;content:"\2193";} .dropdown:hover .dropdown-toggle:after{filter:alpha(opacity=100);-moz-opacity:1;opacity:1;} .dropdown-menu{position:absolute;top:40px;z-index:900;float:left;display:none;min-width:160px;max-width:220px;_width:160px;padding:6px 0;margin-left:0;margin-right:0;background-color:#ffffff;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;zoom:1;}.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;} diff --git a/lib/dropdowns.less b/lib/dropdowns.less index 7436f6a2c5..18856cf05c 100644 --- a/lib/dropdowns.less +++ b/lib/dropdowns.less @@ -16,7 +16,7 @@ border-right: 4px solid transparent; border-top: 4px solid @white; .opacity(30); - content: "↓"; + content: "\2193"; } .dropdown:hover .dropdown-toggle:after { .opacity(100); -- GitLab From aa5342888bf9b3041d2f703349d7ff94cf8b5f43 Mon Sep 17 00:00:00 2001 From: Mark Otto <markdotto@gmail.com> Date: Thu, 5 Jan 2012 15:48:40 -0800 Subject: [PATCH 186/318] default cursor for disabled links in pagination --- bootstrap.css | 3 ++- bootstrap.min.css | 2 +- lib/pagination.less | 1 + 3 files changed, 4 insertions(+), 2 deletions(-) diff --git a/bootstrap.css b/bootstrap.css index 0624b31049..aa13815fde 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: Thu Jan 5 15:46:10 PST 2012 + * Date: Thu Jan 5 15:48:31 PST 2012 */ html, body { margin: 0; @@ -2223,6 +2223,7 @@ i { .pagination .disabled a, .pagination .disabled a:hover { color: #999999; background-color: transparent; + cursor: default; } .pagination .next a { border: 0; diff --git a/bootstrap.min.css b/bootstrap.min.css index cda70c6d1a..8d7c8bd4cf 100644 --- a/bootstrap.min.css +++ b/bootstrap.min.css @@ -354,7 +354,7 @@ i{background-image:url(docs/assets/img/glyphicons-halflings-sprite.png);backgrou .pagination li{display:inline;} .pagination a{float:left;padding:0 14px;line-height:34px;text-decoration:none;border-right:1px solid;border-right-color:#ddd;border-right-color:rgba(0, 0, 0, 0.15);*border-right-color:#ddd;} .pagination a:hover,.pagination .active a{background-color:#c7eefe;} -.pagination .disabled a,.pagination .disabled a:hover{color:#999999;background-color:transparent;} +.pagination .disabled a,.pagination .disabled a:hover{color:#999999;background-color:transparent;cursor:default;} .pagination .next a{border:0;} .pagination.centered{text-align:center;} .modal-backdrop{position:fixed;top:0;right:0;bottom:0;left:0;z-index:10000;background-color:#000000;}.modal-backdrop.fade{opacity:0;} diff --git a/lib/pagination.less b/lib/pagination.less index f630511689..e388057604 100644 --- a/lib/pagination.less +++ b/lib/pagination.less @@ -34,6 +34,7 @@ .disabled a:hover { color: @grayLight; background-color: transparent; + cursor: default; } .next a { border: 0; -- GitLab From 90e3a706ba8c01462516efd3c60cd124620950b9 Mon Sep 17 00:00:00 2001 From: Mark Otto <markdotto@gmail.com> Date: Thu, 5 Jan 2012 16:03:05 -0800 Subject: [PATCH 187/318] add jank js back to docs application.js for responsive dropdown in topbar --- docs/assets/js/application.js | 11 +++++++++++ 1 file changed, 11 insertions(+) diff --git a/docs/assets/js/application.js b/docs/assets/js/application.js index eae84b138f..63791bd37d 100644 --- a/docs/assets/js/application.js +++ b/docs/assets/js/application.js @@ -4,6 +4,7 @@ $(function(){ // IT'S ALL JUST JUNK FOR OUR DOCS! // ++++++++++++++++++++++++++++++++++++++++++ + // Hide the Mobile Safari address bar once loaded // ============================================== @@ -13,6 +14,16 @@ $(function(){ window.scrollTo(0, 1); }, 0); + + // Docs topbar nav + // =============== + + $('.nav .active').on('click', function (e) { + e.preventDefault() + $(this).siblings().toggle() + }); + + // table sort example // ================== -- GitLab From 314feb702f9a95ee473e529650e16654714cd9f4 Mon Sep 17 00:00:00 2001 From: Jacob Thornton <jacobthornton@gmail.com> Date: Thu, 5 Jan 2012 18:32:08 -0800 Subject: [PATCH 188/318] listen to window for dropdown clear --- docs/assets/js/application.js | 9 --------- js/bootstrap-dropdown.js | 2 +- 2 files changed, 1 insertion(+), 10 deletions(-) diff --git a/docs/assets/js/application.js b/docs/assets/js/application.js index 63791bd37d..6194b88db5 100644 --- a/docs/assets/js/application.js +++ b/docs/assets/js/application.js @@ -15,15 +15,6 @@ $(function(){ }, 0); - // Docs topbar nav - // =============== - - $('.nav .active').on('click', function (e) { - e.preventDefault() - $(this).siblings().toggle() - }); - - // table sort example // ================== diff --git a/js/bootstrap-dropdown.js b/js/bootstrap-dropdown.js index 15f4677b9d..d846f1af1b 100644 --- a/js/bootstrap-dropdown.js +++ b/js/bootstrap-dropdown.js @@ -74,7 +74,7 @@ * =================================== */ $(function () { - $('html').on('click.dropdown.data-api', clearMenus) + $(window).on('click.dropdown.data-api', clearMenus) $('body').on('click.dropdown.data-api', toggle, Dropdown.prototype.toggle) }) -- GitLab From c56e9d2d35299b4c9e4e3d1aabcf59cedc9143f2 Mon Sep 17 00:00:00 2001 From: Mark Otto <markdotto@gmail.com> Date: Thu, 5 Jan 2012 21:43:28 -0800 Subject: [PATCH 189/318] massive docs update, mostly to all our new forms, and to the buttons --- bootstrap.css | 52 +++-- bootstrap.min.css | 50 ++--- docs/assets/css/docs.css | 44 +++- docs/assets/js/application.js | 8 +- docs/base-css.html | 381 ++++++++++++++++++++-------------- lib/buttons.less | 2 +- lib/forms.less | 32 ++- lib/mixins.less | 1 - 8 files changed, 338 insertions(+), 232 deletions(-) diff --git a/bootstrap.css b/bootstrap.css index aa13815fde..0014fcdcc2 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: Thu Jan 5 15:48:31 PST 2012 + * Date: Thu Jan 5 21:43:09 PST 2012 */ html, body { margin: 0; @@ -261,7 +261,6 @@ a:hover { clear: both; } [class*="span"] { - display: inline; float: left; margin-left: 20px; } @@ -555,10 +554,11 @@ input, textarea, select, .uneditable-input { - display: inline-block; + display: block; width: 210px; height: 18px; padding: 4px; + margin-bottom: 9px; font-size: 13px; line-height: 18px; color: #555555; @@ -670,7 +670,6 @@ input.span1, textarea.span1, select.span1, .uneditable-input.span1 { - display: inline-block; float: none; width: 50px; margin-left: 0; @@ -679,7 +678,6 @@ input.span2, textarea.span2, select.span2, .uneditable-input.span2 { - display: inline-block; float: none; width: 130px; margin-left: 0; @@ -688,7 +686,6 @@ input.span3, textarea.span3, select.span3, .uneditable-input.span3 { - display: inline-block; float: none; width: 210px; margin-left: 0; @@ -697,7 +694,6 @@ input.span4, textarea.span4, select.span4, .uneditable-input.span4 { - display: inline-block; float: none; width: 290px; margin-left: 0; @@ -706,7 +702,6 @@ input.span5, textarea.span5, select.span5, .uneditable-input.span5 { - display: inline-block; float: none; width: 370px; margin-left: 0; @@ -715,7 +710,6 @@ input.span6, textarea.span6, select.span6, .uneditable-input.span6 { - display: inline-block; float: none; width: 450px; margin-left: 0; @@ -724,7 +718,6 @@ input.span7, textarea.span7, select.span7, .uneditable-input.span7 { - display: inline-block; float: none; width: 530px; margin-left: 0; @@ -733,7 +726,6 @@ input.span8, textarea.span8, select.span8, .uneditable-input.span8 { - display: inline-block; float: none; width: 610px; margin-left: 0; @@ -742,7 +734,6 @@ input.span9, textarea.span9, select.span9, .uneditable-input.span9 { - display: inline-block; float: none; width: 690px; margin-left: 0; @@ -751,7 +742,6 @@ input.span10, textarea.span10, select.span10, .uneditable-input.span10 { - display: inline-block; float: none; width: 770px; margin-left: 0; @@ -760,7 +750,6 @@ input.span11, textarea.span11, select.span11, .uneditable-input.span11 { - display: inline-block; float: none; width: 850px; margin-left: 0; @@ -769,7 +758,6 @@ input.span12, textarea.span12, select.span12, .uneditable-input.span12 { - display: inline-block; float: none; width: 930px; margin-left: 0; @@ -778,7 +766,6 @@ input.span13, textarea.span13, select.span13, .uneditable-input.span13 { - display: inline-block; float: none; width: 1010px; margin-left: 0; @@ -787,7 +774,6 @@ input.span14, textarea.span14, select.span14, .uneditable-input.span14 { - display: inline-block; float: none; width: 1090px; margin-left: 0; @@ -796,7 +782,6 @@ input.span15, textarea.span15, select.span15, .uneditable-input.span15 { - display: inline-block; float: none; width: 1170px; margin-left: 0; @@ -805,7 +790,6 @@ input.span16, textarea.span16, select.span16, .uneditable-input.span16 { - display: inline-block; float: none; width: 1250px; margin-left: 0; @@ -890,13 +874,13 @@ textarea[readonly] { box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.025); cursor: not-allowed; } -:-moz-placeholder { +input:-moz-placeholder { color: #999999; } -::-webkit-input-placeholder { +input::-webkit-input-placeholder { color: #999999; } -.help-text { +.help-block { margin-top: 5px; margin-bottom: 0; color: #999999; @@ -911,11 +895,8 @@ textarea[readonly] { display: inline; padding-left: 5px; } -.help-block { - display: block; - max-width: 600px; -} .input-prepend, .input-append { + margin-bottom: 5px; zoom: 1; } .input-prepend:before, @@ -977,10 +958,27 @@ textarea[readonly] { border-radius: 0 3px 3px 0; } .search-form .search-query { + padding-left: 14px; + padding-right: 14px; -webkit-border-radius: 14px; -moz-border-radius: 14px; border-radius: 14px; } +.search-form input, +.inline-form input, +.horizontal-form input, +.search-form textarea, +.inline-form textarea, +.horizontal-form textarea, +.search-form select, +.inline-form select, +.horizontal-form select, +.search-form .uneditable-input, +.inline-form .uneditable-input, +.horizontal-form .uneditable-input { + display: inline-block; + margin-bottom: 0; +} .control-group { margin-bottom: 18px; } @@ -2554,7 +2552,7 @@ i { } .btn { display: inline-block; - padding: 5px 14px 6px; + padding: 5px 10px 6px; font-size: 13px; line-height: normal; color: #333; diff --git a/bootstrap.min.css b/bootstrap.min.css index 8d7c8bd4cf..86aa51cda9 100644 --- a/bootstrap.min.css +++ b/bootstrap.min.css @@ -37,7 +37,7 @@ a{font-weight:inherit;line-height:inherit;color:#0088cc;text-decoration:none;}a: .show{display:block;} .row{margin-left:-20px;zoom:1;}.row:before,.row:after{display:table;*display:inline;content:"";zoom:1;} .row:after{clear:both;} -[class*="span"]{display:inline;float:left;margin-left:20px;} +[class*="span"]{float:left;margin-left:20px;} .span1{width:60px;} .span2{width:140px;} .span3{width:220px;} @@ -95,7 +95,7 @@ form{margin-bottom:18px;} legend{display:block;width:100%;margin-bottom:27px;font-size:19.5px;line-height:36px;color:#333333;border-bottom:1px solid #eee;} label,input,select,textarea{font-family:"Helvetica Neue",Helvetica,Arial,sans-serif;font-size:normal;font-weight:13px;line-height:18px;} label{display:block;margin-bottom:5px;color:#333333;} -input,textarea,select,.uneditable-input{display:inline-block;width:210px;height:18px;padding:4px;font-size:13px;line-height:18px;color:#555555;border:1px solid #ccc;-webkit-border-radius:3px;-moz-border-radius:3px;border-radius:3px;} +input,textarea,select,.uneditable-input{display:block;width:210px;height:18px;padding:4px;margin-bottom:9px;font-size:13px;line-height:18px;color:#555555;border:1px solid #ccc;-webkit-border-radius:3px;-moz-border-radius:3px;border-radius:3px;} input[type=image],input[type=checkbox],input[type=radio]{width:auto;height:auto;padding:0;margin:3px 0;*margin-top:0;line-height:normal;border:none;cursor:pointer;} input[type=file]{padding:initial;line-height:initial;border:initial;background-color:#ffffff;background-color:initial;-webkit-box-shadow:none;-moz-box-shadow:none;box-shadow:none;} input[type=button],input[type=reset],input[type=submit]{width:auto;height:auto;} @@ -116,22 +116,22 @@ input[type=file]:focus,input[type=checkbox]:focus,select:focus{-webkit-box-shado .input-large{width:210px;} .input-xlarge{width:270px;} .input-xxlarge{width:530px;} -input.span1,textarea.span1,select.span1,.uneditable-input.span1{display:inline-block;float:none;width:50px;margin-left:0;} -input.span2,textarea.span2,select.span2,.uneditable-input.span2{display:inline-block;float:none;width:130px;margin-left:0;} -input.span3,textarea.span3,select.span3,.uneditable-input.span3{display:inline-block;float:none;width:210px;margin-left:0;} -input.span4,textarea.span4,select.span4,.uneditable-input.span4{display:inline-block;float:none;width:290px;margin-left:0;} -input.span5,textarea.span5,select.span5,.uneditable-input.span5{display:inline-block;float:none;width:370px;margin-left:0;} -input.span6,textarea.span6,select.span6,.uneditable-input.span6{display:inline-block;float:none;width:450px;margin-left:0;} -input.span7,textarea.span7,select.span7,.uneditable-input.span7{display:inline-block;float:none;width:530px;margin-left:0;} -input.span8,textarea.span8,select.span8,.uneditable-input.span8{display:inline-block;float:none;width:610px;margin-left:0;} -input.span9,textarea.span9,select.span9,.uneditable-input.span9{display:inline-block;float:none;width:690px;margin-left:0;} -input.span10,textarea.span10,select.span10,.uneditable-input.span10{display:inline-block;float:none;width:770px;margin-left:0;} -input.span11,textarea.span11,select.span11,.uneditable-input.span11{display:inline-block;float:none;width:850px;margin-left:0;} -input.span12,textarea.span12,select.span12,.uneditable-input.span12{display:inline-block;float:none;width:930px;margin-left:0;} -input.span13,textarea.span13,select.span13,.uneditable-input.span13{display:inline-block;float:none;width:1010px;margin-left:0;} -input.span14,textarea.span14,select.span14,.uneditable-input.span14{display:inline-block;float:none;width:1090px;margin-left:0;} -input.span15,textarea.span15,select.span15,.uneditable-input.span15{display:inline-block;float:none;width:1170px;margin-left:0;} -input.span16,textarea.span16,select.span16,.uneditable-input.span16{display:inline-block;float:none;width:1250px;margin-left:0;} +input.span1,textarea.span1,select.span1,.uneditable-input.span1{float:none;width:50px;margin-left:0;} +input.span2,textarea.span2,select.span2,.uneditable-input.span2{float:none;width:130px;margin-left:0;} +input.span3,textarea.span3,select.span3,.uneditable-input.span3{float:none;width:210px;margin-left:0;} +input.span4,textarea.span4,select.span4,.uneditable-input.span4{float:none;width:290px;margin-left:0;} +input.span5,textarea.span5,select.span5,.uneditable-input.span5{float:none;width:370px;margin-left:0;} +input.span6,textarea.span6,select.span6,.uneditable-input.span6{float:none;width:450px;margin-left:0;} +input.span7,textarea.span7,select.span7,.uneditable-input.span7{float:none;width:530px;margin-left:0;} +input.span8,textarea.span8,select.span8,.uneditable-input.span8{float:none;width:610px;margin-left:0;} +input.span9,textarea.span9,select.span9,.uneditable-input.span9{float:none;width:690px;margin-left:0;} +input.span10,textarea.span10,select.span10,.uneditable-input.span10{float:none;width:770px;margin-left:0;} +input.span11,textarea.span11,select.span11,.uneditable-input.span11{float:none;width:850px;margin-left:0;} +input.span12,textarea.span12,select.span12,.uneditable-input.span12{float:none;width:930px;margin-left:0;} +input.span13,textarea.span13,select.span13,.uneditable-input.span13{float:none;width:1010px;margin-left:0;} +input.span14,textarea.span14,select.span14,.uneditable-input.span14{float:none;width:1090px;margin-left:0;} +input.span15,textarea.span15,select.span15,.uneditable-input.span15{float:none;width:1170px;margin-left:0;} +input.span16,textarea.span16,select.span16,.uneditable-input.span16{float:none;width:1250px;margin-left:0;} input[disabled],select[disabled],textarea[disabled],input[readonly],select[readonly],textarea[readonly]{background-color:#f5f5f5;border-color:#ddd;cursor:not-allowed;} .control-group.error>label,.control-group.error .help-block,.control-group.error .help-inline{color:#b94a48;} .control-group.error input,.control-group.error textarea{color:#b94a48;border-color:#ee5f5b;}.control-group.error input:focus,.control-group.error textarea:focus{border-color:#e9322d;-webkit-box-shadow:0 0 6px #f8b9b7;-moz-box-shadow:0 0 6px #f8b9b7;box-shadow:0 0 6px #f8b9b7;} @@ -144,12 +144,11 @@ input[disabled],select[disabled],textarea[disabled],input[readonly],select[reado .control-group.success .input-prepend .add-on,.control-group.success .input-append .add-on{color:#468847;background-color:#bcddbc;border-color:#468847;} .form-actions{padding:17px 20px 18px;margin-top:18px;margin-bottom:18px;background-color:#f5f5f5;border-top:1px solid #ddd;} .uneditable-input{display:block;background-color:#ffffff;border-color:#eee;-webkit-box-shadow:inset 0 1px 2px rgba(0, 0, 0, 0.025);-moz-box-shadow:inset 0 1px 2px rgba(0, 0, 0, 0.025);box-shadow:inset 0 1px 2px rgba(0, 0, 0, 0.025);cursor:not-allowed;} -:-moz-placeholder{color:#999999;} -::-webkit-input-placeholder{color:#999999;} -.help-text{margin-top:5px;margin-bottom:0;color:#999999;} +input:-moz-placeholder{color:#999999;} +input::-webkit-input-placeholder{color:#999999;} +.help-block{margin-top:5px;margin-bottom:0;color:#999999;} .help-inline{*position:relative;*top:-5px;display:inline;padding-left:5px;} -.help-block{display:block;max-width:600px;} -.input-prepend,.input-append{zoom:1;}.input-prepend:before,.input-append:before,.input-prepend:after,.input-append:after{display:table;*display:inline;content:"";zoom:1;} +.input-prepend,.input-append{margin-bottom:5px;zoom:1;}.input-prepend:before,.input-append:before,.input-prepend:after,.input-append:after{display:table;*display:inline;content:"";zoom:1;} .input-prepend:after,.input-append:after{clear:both;} .input-prepend input,.input-append input{-webkit-border-radius:0 3px 3px 0;-moz-border-radius:0 3px 3px 0;border-radius:0 3px 3px 0;} .input-prepend .add-on,.input-append .add-on{float:left;display:block;width:auto;min-width:16px;height:18px;margin-right:-1px;padding:4px 4px 4px 5px;font-weight:normal;line-height:18px;color:#999999;text-align:center;text-shadow:0 1px 0 #ffffff;background-color:#f5f5f5;border:1px solid #ccc;-webkit-border-radius:3px 0 0 3px;-moz-border-radius:3px 0 0 3px;border-radius:3px 0 0 3px;} @@ -157,7 +156,8 @@ input[disabled],select[disabled],textarea[disabled],input[readonly],select[reado .input-prepend .add-on{*margin-top:1px;} .input-append input{float:left;-webkit-border-radius:3px 0 0 3px;-moz-border-radius:3px 0 0 3px;border-radius:3px 0 0 3px;} .input-append .add-on{margin-right:0;margin-left:-1px;-webkit-border-radius:0 3px 3px 0;-moz-border-radius:0 3px 3px 0;border-radius:0 3px 3px 0;} -.search-form .search-query{-webkit-border-radius:14px;-moz-border-radius:14px;border-radius:14px;} +.search-form .search-query{padding-left:14px;padding-right:14px;-webkit-border-radius:14px;-moz-border-radius:14px;border-radius:14px;} +.search-form input,.inline-form input,.horizontal-form input,.search-form textarea,.inline-form textarea,.horizontal-form textarea,.search-form select,.inline-form select,.horizontal-form select,.search-form .uneditable-input,.inline-form .uneditable-input,.horizontal-form .uneditable-input{display:inline-block;margin-bottom:0;} .control-group{margin-bottom:18px;} .control-group>label{font-weight:bold;} .horizontal-form .control-group>label{float:left;width:130px;padding-top:5px;text-align:right;} @@ -394,7 +394,7 @@ i{background-image:url(docs/assets/img/glyphicons-halflings-sprite.png);backgrou .btn.danger,.alert-message.danger,.btn.error,.alert-message.error{background-color:#c43c35;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);background-repeat:repeat-x;filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ee5f5b', endColorstr='#c43c35', GradientType=0);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);} .btn.success,.alert-message.success{background-color:#57a957;background-image:-khtml-gradient(linear, left top, left bottom, from(#62c462), to(#57a957));background-image:-moz-linear-gradient(top, #62c462, #57a957);background-image:-ms-linear-gradient(top, #62c462, #57a957);background-image:-webkit-gradient(linear, left top, left bottom, color-stop(0%, #62c462), color-stop(100%, #57a957));background-image:-webkit-linear-gradient(top, #62c462, #57a957);background-image:-o-linear-gradient(top, #62c462, #57a957);background-image:linear-gradient(top, #62c462, #57a957);background-repeat:repeat-x;filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#62c462', endColorstr='#57a957', GradientType=0);border-color:#57a957 #57a957 #3d773d;border-color:rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);} .btn.info,.alert-message.info{background-color:#339bb9;background-image:-khtml-gradient(linear, left top, left bottom, from(#5bc0de), to(#339bb9));background-image:-moz-linear-gradient(top, #5bc0de, #339bb9);background-image:-ms-linear-gradient(top, #5bc0de, #339bb9);background-image:-webkit-gradient(linear, left top, left bottom, color-stop(0%, #5bc0de), color-stop(100%, #339bb9));background-image:-webkit-linear-gradient(top, #5bc0de, #339bb9);background-image:-o-linear-gradient(top, #5bc0de, #339bb9);background-image:linear-gradient(top, #5bc0de, #339bb9);background-repeat:repeat-x;filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#5bc0de', endColorstr='#339bb9', GradientType=0);border-color:#339bb9 #339bb9 #22697d;border-color:rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);} -.btn{display:inline-block;padding:5px 14px 6px;font-size:13px;line-height:normal;color:#333;text-shadow:0 1px 1px rgba(255, 255, 255, 0.75);background-color:#e6e6e6;background-image:-webkit-gradient(linear, 0 0, 0 100%, from(#ffffff), color-stop(25%, #ffffff), to(#e6e6e6));background-image:-webkit-linear-gradient(#ffffff, #ffffff 25%, #e6e6e6);background-image:-moz-linear-gradient(top, #ffffff, #ffffff 25%, #e6e6e6);background-image:-ms-linear-gradient(#ffffff, #ffffff 25%, #e6e6e6);background-image:-o-linear-gradient(#ffffff, #ffffff 25%, #e6e6e6);background-image:linear-gradient(#ffffff, #ffffff 25%, #e6e6e6);background-repeat:no-repeat;filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#e6e6e6', GradientType=0);border:1px solid #ccc;border-bottom-color:#bbb;-webkit-border-radius:4px;-moz-border-radius:4px;border-radius:4px;-webkit-box-shadow:inset 0 1px 0 rgba(255, 255, 255, 0.2),0 1px 2px rgba(0, 0, 0, 0.05);-moz-box-shadow:inset 0 1px 0 rgba(255, 255, 255, 0.2),0 1px 2px rgba(0, 0, 0, 0.05);box-shadow:inset 0 1px 0 rgba(255, 255, 255, 0.2),0 1px 2px rgba(0, 0, 0, 0.05);cursor:pointer;-webkit-transition:0.1s linear all;-moz-transition:0.1s linear all;-ms-transition:0.1s linear all;-o-transition:0.1s linear all;transition:0.1s linear all;}.btn:hover{color:#333333;text-decoration:none;background-position:0 -15px;} +.btn{display:inline-block;padding:5px 10px 6px;font-size:13px;line-height:normal;color:#333;text-shadow:0 1px 1px rgba(255, 255, 255, 0.75);background-color:#e6e6e6;background-image:-webkit-gradient(linear, 0 0, 0 100%, from(#ffffff), color-stop(25%, #ffffff), to(#e6e6e6));background-image:-webkit-linear-gradient(#ffffff, #ffffff 25%, #e6e6e6);background-image:-moz-linear-gradient(top, #ffffff, #ffffff 25%, #e6e6e6);background-image:-ms-linear-gradient(#ffffff, #ffffff 25%, #e6e6e6);background-image:-o-linear-gradient(#ffffff, #ffffff 25%, #e6e6e6);background-image:linear-gradient(#ffffff, #ffffff 25%, #e6e6e6);background-repeat:no-repeat;filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#e6e6e6', GradientType=0);border:1px solid #ccc;border-bottom-color:#bbb;-webkit-border-radius:4px;-moz-border-radius:4px;border-radius:4px;-webkit-box-shadow:inset 0 1px 0 rgba(255, 255, 255, 0.2),0 1px 2px rgba(0, 0, 0, 0.05);-moz-box-shadow:inset 0 1px 0 rgba(255, 255, 255, 0.2),0 1px 2px rgba(0, 0, 0, 0.05);box-shadow:inset 0 1px 0 rgba(255, 255, 255, 0.2),0 1px 2px rgba(0, 0, 0, 0.05);cursor:pointer;-webkit-transition:0.1s linear all;-moz-transition:0.1s linear all;-ms-transition:0.1s linear all;-o-transition:0.1s linear all;transition:0.1s linear all;}.btn:hover{color:#333333;text-decoration:none;background-position:0 -15px;} .btn:focus{outline:1px dotted #666;} .btn.primary{color:#ffffff;text-shadow:0 -1px 0 rgba(0, 0, 0, 0.25);background-color:#0064cd;background-image:-khtml-gradient(linear, left top, left bottom, from(#049cdb), to(#0064cd));background-image:-moz-linear-gradient(top, #049cdb, #0064cd);background-image:-ms-linear-gradient(top, #049cdb, #0064cd);background-image:-webkit-gradient(linear, left top, left bottom, color-stop(0%, #049cdb), color-stop(100%, #0064cd));background-image:-webkit-linear-gradient(top, #049cdb, #0064cd);background-image:-o-linear-gradient(top, #049cdb, #0064cd);background-image:linear-gradient(top, #049cdb, #0064cd);background-repeat:repeat-x;filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#049cdb', endColorstr='#0064cd', GradientType=0);border-color:#0064cd #0064cd #003f81;border-color:rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);} .btn.active,.btn:active{-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);} diff --git a/docs/assets/css/docs.css b/docs/assets/css/docs.css index 5eafb962b7..41c7ae4b64 100644 --- a/docs/assets/css/docs.css +++ b/docs/assets/css/docs.css @@ -36,11 +36,13 @@ body > .navbar-fixed .brand:hover { /* Space out sub-sections more -------------------------------------------------- */ .page-header { - margin: 36px 0 18px; + margin: 45px 0 18px; border-bottom: 1px solid #eee; } .page-header h1 { - margin-bottom: 9px; + margin-bottom: 17px; + font-size: 36px; + line-height: 1; } @@ -327,10 +329,6 @@ pre.prettyprint { overflow: hidden; } -.well form { - margin-bottom: 0; -} - .browser-support { max-width: 100%; } @@ -356,6 +354,40 @@ h2 + table { position: relative; } +/* Remove bottom margin on example forms in wells */ +form.well { + margin-bottom: 0; +} + +/* Tighten up spacing */ +.well hr { + margin: 18px 0; +} + +/* Form docs for horizontal forms */ +.form-docs { + padding-left: 10px; +} +.form-docs h3, +.form-docs p, +.form-docs li { + color: #777; +} +.form-docs hr { + margin: 18px 0; +} + +/* Fake the :focus state to demo it */ +.focused { + border-color: rgba(82,168,236,.8); + -webkit-box-shadow: inset 0 1px 3px rgba(0,0,0,.1), 0 0 8px rgba(82,168,236,.6); + -moz-box-shadow: inset 0 1px 3px rgba(0,0,0,.1), 0 0 8px rgba(82,168,236,.6); + box-shadow: inset 0 1px 3px rgba(0,0,0,.1), 0 0 8px rgba(82,168,236,.6); + outline: 0; +} + + + /* Icons ------------------------- */ .the-icons { diff --git a/docs/assets/js/application.js b/docs/assets/js/application.js index 63791bd37d..5fe8b53ef4 100644 --- a/docs/assets/js/application.js +++ b/docs/assets/js/application.js @@ -9,10 +9,10 @@ $(function(){ // ============================================== // Set a timeout... - setTimeout(function(){ - // Hide the address bar! - window.scrollTo(0, 1); - }, 0); + // setTimeout(function(){ + // // Hide the address bar! + // window.scrollTo(0, 1); + // }, 0); // Docs topbar nav diff --git a/docs/base-css.html b/docs/base-css.html index 10be4c3d48..225f10ae2d 100644 --- a/docs/base-css.html +++ b/docs/base-css.html @@ -593,6 +593,9 @@ <table> ... </table></pre> + + <br> + <h3>2. Striped table</h3> <p>Get a little fancy with your tables by adding zebra-striping—just add the <code>.striped-table</code> class.</p> <table class="striped-table"> @@ -630,6 +633,9 @@ <table class="striped-table"> ... </table></pre> + + <br> + <h3>3. Bordered table</h3> <p>Add borders around the entire table and between each row, plus a bit of rounded corners for aesthetic purposes.</p> <p><span class="label">Note</span> Bordered tables do not work well with <code>rowspan</code> due to somewhat hacky CSS applied to the tables. Sorry about that!</p> @@ -671,6 +677,9 @@ <table class="bordered-table"> ... </table></pre> + + <br> + <h3>4. Condensed table</h3> <p>Make your tables more compact by adding the <code>.condensed-table</code> class to cut table cell padding in half (from 10px to 5px).</p> <table class="condensed-table"> @@ -707,6 +716,9 @@ <table class="condensed-table"> ... </table></pre> + + <br> + <h3>5. Striped table w/ TableSorter.js</h3> <p>Taking the previous example, we improve the usefulness of our tables by providing sorting functionality via <a href="http://jquery.com">jQuery</a> and the <a href="http://tablesorter.com/docs/">Tablesorter</a> plugin. <strong>Click any column’s header to change the sort.</strong></p> <table class="striped-table" id="sortTableExample"> @@ -760,54 +772,32 @@ <div class="page-header"> <h1>Forms</h1> </div> - -<!-- - -Types of forms - default (stacked) - horizontal (change the class) - search - inline -Form elements - form - fieldset - legend - label - input - text (password, email, etc) - radio - checkbox - textarea - rows - select - single - multiple - size -Custom form elements - Input prepend and append (for @ and $) - checkbox and radio lists -Explaining the default Bootstrap form structure - Bulletproofing our forms means adding a bit of extra structure and providing more classes for customization and event handling - Form vertical and horizontal forms, we require a wrapping element. - we suggest a fieldset - but could be anthing so long as it uses the proper class -Form states - warning - error - success ---> - -<div class="row"> - <div class="span4"> - <h3>Flexible markup and styles</h3> - <p>The best part about forms in Bootstrap is that all your inputs and controls look great no matter how you build them in your markup. No superfluous HTML is required, but we provide the patterns for those who require it.</p> - </div> - <div class="span4"> + <div class="row"> + <div class="span4"> + <h2>Flexible HTML and CSS</h2> + <p>The best part about forms in Bootstrap is that all your inputs and controls look great no matter how you build them in your markup. No superfluous HTML is required, but we provide the patterns for those who require it.</p> + <p>More complicated layouts come with succinct and scalable classes for easy styling and event binding, so you're covered at every step.</p> + </div> + <div class="span4"> + <h2>Four layouts included</h2> + <p>Bootstrap comes with support for four types of form layouts:</p> + <ul> + <li>Vertical (default)</li> + <li>Search</li> + <li>Inline</li> + <li>Horizontal</li> + </ul> + <p>Different types of form layouts require some changes to markup, but the controls themselves remain and behave the same.</p> + </div> + <div class="span4"> + <h2>Control states and more</h2> + <p>Bootstrap's forms include styles for all the base form controls like input, textarea, and select you'd expect. But it also comes with a number of custom components like appended and prepended inputs and support for lists of checkboxes.</p> + <p>States like error, warning, and success are included for each type of form control. Also included are styles for disabled controls.</p> + </div> </div> -</div> - <h2>Four types of forms</h2> + <p>Bootstrap provides simple markup and styles for four styles of common web forms.</p> <table class="bordered-table striped-table"> <thead> <tr> @@ -823,7 +813,7 @@ Form states <td>Stacked, left-aligned labels over controls</td> </tr> <tr> - <th>Horiztonal</th> + <th>Horizontal</th> <td><code>.horizontal-form</code></td> <td>Float left, right-aligned labels on same line as controls</td> </tr> @@ -841,78 +831,60 @@ Form states </table> + <h2>Example forms <small>using just form controls, no extra markup</small></h2> <div class="row"> <div class="span4"> - <h3>Why four types</h3> - <p>With Bootstrap 2, we completely recoded our forms to allow for simple base styles and improved namespacing on labels and controls. To address the many uses of forms, we've included some base styles to help get you started.</p> + <h3>Basic form</h3> + <p>With v2.0, we have lighter and smarter defaults for form styles. No extra markup, just form controls.</p> + <form class="well"> + <label>Label name</label> + <input type="text" class="span3" placeholder="Type something..."> + <label class="checkbox"> + <input type="checkbox"> Check me out + </label> + <button type="submit" class="btn">Submit</button> + </form> </div> <div class="span4"> - <h3>Vertical or horizontal</h3> - <p>Our default form styles are now vertical, not horizontal. This makes it easier to customize bare-bones forms, as well as forms in tricker situations like sign-up, modals, etc. <strong>They share the same exact markup; just swap the class.</strong></p> - </div> - </div><!-- /row --> - <div class="row"> - <div class="span3"> - <h2>Search form</h2> - </div> - <div class="span9"> - <div class="well"> - <form class="search-form"> - <input type="text" class="search-query"> - <button type="submit" class="btn">Search</button> - </form> - </div><!--/well--> - </div> - </div><!-- /row --> - <div class="row"> - <div class="span3"> - <h2>Inline form</h2> + <h3>Search form</h3> + <p>Reflecting default WebKit styles, just add <code>.search-form</code> for extra rounded search fields.</p> + <form class="well search-form"> + <input type="text" class="input-medium search-query"> + <button type="submit" class="btn">Search</button> + </form> </div> - <div class="span9"> - <div class="well"> - <form class="inline-form"> - <h4>Some directional text</h4> - <p>And maybe some kind of optional supporting text right here.</p> - <input type="text" class="input-medium"> - <input type="text" class="input-medium"> - <input type="text" class="input-medium"> - <button type="submit" class="btn">Search</button> - </form> - </div><!--/well--> + <div class="span4"> + <h3>Inline form</h3> + <p>Inputs are block level to start. For <code>.inline-form</code> and <code>.horizontal-form</code>, we use inline-block.</p> + <form class="well search-form"> + <input type="text" class="input-small" placeholder="Email"> + <input type="password" class="input-small" placeholder="Password"> + <button type="submit" class="btn">Go</button> + </form> </div> </div><!-- /row --> + + <br> + + <h2>Horizontal forms</h2> <div class="row"> - <div class="span3"> - <h2>Horizontal form</h2> - </div> - <div class="span9"> + <div class="span8"> <form class="horizontal-form"> - <legend>Example form section</legend> + <legend>Controls Bootstrap supports</legend> <fieldset class="control-group"> <label class="control-label" for="input01">Text input</label> <div class="controls"> <input type="text" class="xlarge" name="input01"> - <p class="help-text">Help text here. Be sure to fill this out like so, or else!</p> - </div> - </fieldset> - <fieldset class="control-group"> - <label class="control-label" for="prependedInput">Prepended text</label> - <div class="controls"> - <div class="input-prepend"> - <span class="add-on">@</span> - <input class="input-small" id="prependedInput" name="prependedInput" size="16" type="text"> - </div> - <p class="help-block">Here's some help text</p> + <p class="help-block">In addition to freeform text, any HTML5 text-based input appears like so.</p> </div> </fieldset> <fieldset class="control-group"> - <label class="control-label" for="appendedInput">Appended text</label> + <label class="control-label" for="optionsCheckbox">Checkbox</label> <div class="controls"> - <div class="input-append"> - <input class="input-small" id="appendedInput" name="appendedInput" size="16" type="text"> - <span class="add-on">.00</span> - </div> - <p class="help-block">Here's more help text</p> + <label class="checkbox"> + <input type="checkbox" name="optionsCheckbox" value="option1"> + Option one is this and that—be sure to include why it’s great + </label> </div> </fieldset> <fieldset class="control-group"> @@ -939,23 +911,69 @@ Form states </select> </div> </fieldset> - <legend>Example form section</legend> + <fieldset class="control-group"> + <label class="control-label" for="fileInput">File input</label> + <div class="controls"> + <input class="input-file" id="fileInput" name="fileInput" type="file"> + </div> + </fieldset> <fieldset class="control-group"> <label class="control-label" for="textarea">Textarea</label> <div class="controls"> <textarea class="input-xlarge" name="textarea" id="textarea" rows="3"></textarea> </div> </fieldset> + <fieldset class="form-actions"> + <button type="submit" class="btn primary">Save changes</button> + <button type="reset" class="btn">Cancel</button> + </fieldset> + </form> + </div> + <div class="span4"> + <div class="form-docs"> + <h3>What's included</h3> + <p>Shown on the left are all the default form controls we support. Here's the bulleted list:</p> + <ul> + <li>text inputs (text, password, email, etc)</li> + <li>checkbox</li> + <li>radio</li> + <li>select</li> + <li>multiple select</li> + <li>file input</li> + <li>textarea</li> + </ul> + <hr> + <h3>New defaults with v2.0</h3> + <p>Up to v1.4, Bootstrap's default form styles used the horizontal layout. With Bootstrap 2, we removed that constraint to have smarter, more scalable defaults for any form.</p> + </div> + </div> + </div> + + <br> + + <div class="row"> + <div class="span8"> + <form class="horizontal-form"> + <legend>Form control states</legend> <fieldset class="control-group"> - <label class="control-label" for="fileInput">Disabled input</label> + <label class="control-label" for="focusedInput">Focused input</label> <div class="controls"> - <input class="input-xlarge disabled" id="disabledInput" name="disabledInput" size="30" type="text" placeholder="Disabled input here... carry on." disabled> + <input class="input-xlarge focused" id="focusedInput" name="focusedInput" type="text" value="This is focused..."> </div> </fieldset> <fieldset class="control-group"> - <label class="control-label" for="fileInput">File input</label> + <label class="control-label" for="disabledInput">Disabled input</label> <div class="controls"> - <input class="input-file" id="fileInput" name="fileInput" type="file"> + <input class="input-xlarge disabled" id="disabledInput" name="disabledInput" type="text" placeholder="Disabled input here..." disabled> + </div> + </fieldset> + <fieldset class="control-group"> + <label class="control-label" for="optionsCheckbox">Disabled checkbox</label> + <div class="controls"> + <label class="checkbox"> + <input type="checkbox" name="optionsCheckbox" value="option1" disabled> + This is a disabled checkbox + </label> </div> </fieldset> <fieldset class="control-group warning"> @@ -979,6 +997,54 @@ Form states <span class="help-inline">Woohoo!</span> </div> </fieldset> + <fieldset class="form-actions"> + <button type="submit" class="btn primary">Save changes</button> + <button type="reset" class="btn">Cancel</button> + </fieldset> + </form> + </div> + <div class="span4"> + <div class="form-docs"> + <h3>Redesigned browser states</h3> + <p>Bootstrap features styles for browser-supported focused and <code>disabled</code> states. We remove the default Webkit <code>outline</code> and apply a <code>box-shadow</code> in it's place for <code>:focus</code>.</p> + <hr> + <h3>Form validation</h3> + <p>It also includes validation styles for errors, warnings, and success. To use, add the a class to the surrounding <code>.control-group</code>.</p> +<pre class="prettyprint"> +<fieldset class="control-group error"> + ... +</fieldset> +</pre> + </div> + </div> + </div> + + <br> + + <div class="row"> + <div class="span8"> + <form class="horizontal-form"> + <legend>Extending form controls</legend> + <fieldset class="control-group"> + <label class="control-label" for="prependedInput">Prepended text</label> + <div class="controls"> + <div class="input-prepend"> + <span class="add-on">@</span> + <input class="input-small" id="prependedInput" name="prependedInput" size="16" type="text"> + </div> + <p class="help-block">Here's some help text</p> + </div> + </fieldset> + <fieldset class="control-group"> + <label class="control-label" for="appendedInput">Appended text</label> + <div class="controls"> + <div class="input-append"> + <input class="input-small" id="appendedInput" name="appendedInput" size="16" type="text"> + <span class="add-on">.00</span> + </div> + <p class="help-block">Here's more help text</p> + </div> + </fieldset> <fieldset class="control-group"> <label class="control-label" for="optionsCheckboxes">Checkboxes</label> <div class="controls"> @@ -994,10 +1060,6 @@ Form states <input type="checkbox" name="optionsCheckboxes" value="option3"> Option three can—yes, you guessed it—also be checked and included in form results </label> - <label class="checkbox"> - <input type="checkbox" name="optionsCheckboxes" value="option4"> - Option four cannot be checked as it is disabled - </label> <p class="help-text"><strong>Note:</strong> Labels surround all the options for much larger click areas and a more usable form.</p> </div> </fieldset> @@ -1010,9 +1072,8 @@ Form states </label> <label class="radio"> <input type="radio" name="optionsRadios" value="option2"> - Option two can is something else and selecting it will deselect options 1 + Option two can is something else and selecting it will deselect option one </label> - <p class="help-text"><strong>Note:</strong> Labels surround all the options for much larger click areas and a more usable form.</p> </div> </fieldset> <fieldset class="form-actions"> @@ -1021,52 +1082,24 @@ Form states </fieldset> </form> </div> - </div><!-- /row --> - <div class="row"> - <div class="span3"> - <h2>Vertical form</h2> - </div> - <div class="span9"> - <form class="vertical-form"> - <legend>Example form</legend> - <fieldset class="control-group"> - <label class="control-label" for="input01">Label</label> - <div class="controls"> - <input type="text" class="xlarge" name="input01"> - <p class="help-text">Be sure to fill this out like so, or else!</p> - </div> - </fieldset> - <fieldset class="control-group"> - <label class="control-label" for="select01">Label</label> - <div class="controls"> - <select name="select01"></select> - </div> - </fieldset> - <fieldset class="control-group"> - <label class="control-label" for="input02">Label</label> - <div class="controls"> - <label class="checkbox"> - <input type="checkbox"> Something something something something something - </label> - <label class="checkbox"> - <input type="checkbox"> Something something something something - </label> - <label class="checkbox"> - <input type="checkbox"> Something something something - </label> - </div> - </fieldset> - <fieldset class="form-actions"> - <button type="submit" class="btn primary">Save changes</button> - <button type="reset" class="btn">Cancel</button> - </fieldset> - </form> + <div class="span4"> + <div class="form-docs"> + <h3>Prepend & append inputs</h3> + <p>Input groups—with appended or prepended text—provide an easy way to give more context for your inputs. Great examples include the @ sign for Twitter usernames or $ for finances.</p> + <hr> + <h3>Checkboxes and radios</h3> + <p>Up to v1.4, Bootstrap required extra markup around checkboxes and radios to stack them. Now, it's a simple matter of repeating the <code><label class="checkbox"></code> that wraps the <code><input type="checkbox"></code>.</p> + </div> </div> </div><!-- /row --> +</section> - <h2>Buttons</h2> +<section id="buttons"> + <div class="page-header"> + <h1>Buttons</h1> + </div> <table class="bordered-table striped-table"> <thead> <tr> @@ -1084,7 +1117,7 @@ Form states <tr> <td><a class="btn primary" href="#">Primary</a></td> <td><code>.primary</code></td> - <td>Makes button blue for more visual weight to indicate the primary action in a set of buttons</td> + <td>Provides extra visual weight and identifies the primary action in a set of buttons</td> </tr> <tr> <td><a class="btn info" href="#">Info</a></td> @@ -1094,12 +1127,12 @@ Form states <tr> <td><a class="btn success" href="#">Success</a></td> <td><code>.success</code></td> - <td>Used to indicate a successful or positive action will be taken</td> + <td>Indicates a successful or positive action</td> </tr> <tr> <td><a class="btn danger" href="#">Danger</a></td> <td><code>.danger</code></td> - <td>Used to indicate a dangerous or potentially negative action will be taken</td> + <td>Indicates a dangerous or potentially negative action</td> </tr> </tbody> </table> @@ -1296,6 +1329,9 @@ Form states <i class="asterisk"></i> </div> </div> + <div class="span2"> + <p class="muted">Light red background color is only used to show the dimensions of the icons in the docs.</p> + </div> </div> <br> @@ -1328,7 +1364,38 @@ Form states </div> <h3>Examples</h3> - <p><a class="btn" href="#"><i class="check"></i> Button</a></p> + <div class="row"> + <div class="span4"> + <p>Use them in buttons, or in button groups for a toolbar style presentation.</p> + <p> + <a class="btn" href="#"><i class="refresh"></i> Refresh</a> + <a class="btn" href="#"><i class="cog"></i> Settings</a> + </p> + <div class="btn-toolbar"> + <div class="btn-group"> + <a class="btn" href="#"><i class="font"></i></a> + <a class="btn" href="#"><i class="bold"></i></a> + <a class="btn" href="#"><i class="italic"></i></a> + </div> + <div class="btn-group"> + <a class="btn" href="#"><i class="align-left"></i></a> + <a class="btn" href="#"><i class="align-center"></i></a> + <a class="btn" href="#"><i class="align-right"></i></a> + <a class="btn" href="#"><i class="align-justify"></i></a> + </div> + </div> + </div> + <div class="span3"> + <p>Or, use them in navigation.</p> + <div class="well side-nav"> + <ul class="nav-group"> + <li class="active"><a class="nav-item" href="#"><i class="home"></i> Home</a></li> + <li><a class="nav-item" href="#"><i class="book"></i> Library</a></li> + <li><a class="nav-item" href="#"><i class="cog"></i> Settings</a></li> + </ul> + </div> + </div> + </div> </section> diff --git a/lib/buttons.less b/lib/buttons.less index bc2df0fb63..3fab6e0390 100644 --- a/lib/buttons.less +++ b/lib/buttons.less @@ -35,7 +35,7 @@ .btn { // Button Base display: inline-block; - padding: 5px 14px 6px; + padding: 5px 10px 6px; font-size: @baseFontSize; line-height: normal; color: #333; diff --git a/lib/forms.less b/lib/forms.less index 32acbdaba9..ddd735cc41 100644 --- a/lib/forms.less +++ b/lib/forms.less @@ -42,10 +42,11 @@ input, textarea, select, .uneditable-input { - display: inline-block; + display: block; width: 210px; height: @baseLineHeight; padding: 4px; + margin-bottom: 9px; font-size: @baseFontSize; line-height: @baseLineHeight; color: @gray; @@ -177,7 +178,6 @@ select:focus { // Grid style input sizes // This is a duplication of the main grid .columns() mixin, but subtracts 10px to account for input padding and border .formColumns(@columnSpan: 1) { - display: inline-block; float: none; width: ((@gridColumnWidth) * @columnSpan) + (@gridGutterWidth * (@columnSpan - 1)) - 10; margin-left: 0; @@ -224,6 +224,7 @@ textarea[readonly] { + // FORM FIELD FEEDBACK STATES // -------------------------- @@ -289,10 +290,10 @@ textarea[readonly] { } // Placeholder text gets special styles; can't be bundled together though for some reason -:-moz-placeholder { +input:-moz-placeholder { color: @grayLight; } -::-webkit-input-placeholder { +input::-webkit-input-placeholder { color: @grayLight; } @@ -301,7 +302,7 @@ textarea[readonly] { // HELP TEXT // --------- -.help-text { +.help-block { margin-top: 5px; margin-bottom: 0; color: @grayLight; @@ -314,12 +315,6 @@ textarea[readonly] { padding-left: 5px; } -// Big blocks of help text -.help-block { - display: block; - max-width: 600px; -} - // INPUT GROUPS @@ -328,6 +323,7 @@ textarea[readonly] { // Allow us to put symbols and text within the input field for a cleaner look .input-prepend, .input-append { + margin-bottom: 5px; .clearfix(); // Clear the float to prevent wrapping input { .border-radius(0 3px 3px 0); @@ -377,6 +373,8 @@ textarea[readonly] { // ----------- .search-form .search-query { + padding-left: 14px; + padding-right: 14px; .border-radius(14px); } @@ -388,6 +386,18 @@ textarea[readonly] { // Common properties // ----------------- +.search-form, +.inline-form, +.horizontal-form { + input, + textarea, + select, + .uneditable-input { + display: inline-block; + margin-bottom: 0; + } +} + // Margin to space out fieldsets .control-group { margin-bottom: @baseLineHeight; diff --git a/lib/mixins.less b/lib/mixins.less index 32d3a83acc..49eabb8751 100644 --- a/lib/mixins.less +++ b/lib/mixins.less @@ -98,7 +98,6 @@ // Necessary grid styles for every column to make them appear next to each other horizontally .gridColumn() { - display: inline; float: left; margin-left: @gridGutterWidth; } -- GitLab From 7582520808ad6c3610831652d0d4d33ea4ebf15b Mon Sep 17 00:00:00 2001 From: Mark Otto <markdotto@gmail.com> Date: Thu, 5 Jan 2012 22:37:23 -0800 Subject: [PATCH 190/318] docs cleanup and navbar brand hover --- bootstrap.css | 4 +-- bootstrap.min.css | 2 +- docs/base-css.html | 68 ++++++++++++++++++++++++++++------------------ lib/navbar.less | 2 +- 4 files changed, 45 insertions(+), 31 deletions(-) diff --git a/bootstrap.css b/bootstrap.css index 0014fcdcc2..e2ef40a6c5 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: Thu Jan 5 21:43:09 PST 2012 + * Date: Thu Jan 5 22:37:16 PST 2012 */ html, body { margin: 0; @@ -1644,7 +1644,7 @@ i { -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); } -.navbar .brand a:hover, .navbar ul .active > a { +.navbar .brand:hover, .navbar ul .active > a { color: #ffffff; text-decoration: none; background-color: #333333; diff --git a/bootstrap.min.css b/bootstrap.min.css index 86aa51cda9..3d5ec0d6c5 100644 --- a/bootstrap.min.css +++ b/bootstrap.min.css @@ -280,7 +280,7 @@ i{background-image:url(docs/assets/img/glyphicons-halflings-sprite.png);backgrou .close{float:right;font-size:20px;font-weight:bold;line-height:13.5px;color:#000000;text-shadow:0 1px 0 #ffffff;filter:alpha(opacity=20);-moz-opacity:0.2;opacity:0.2;}.close:hover{color:#000000;text-decoration:none;filter:alpha(opacity=40);-moz-opacity:0.4;opacity:0.4;} .navbar{overflow:visible;} .navbar-inner{background-color:#222222;background-color:#222222;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);background-repeat:repeat-x;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);} -.navbar .brand a:hover,.navbar ul .active>a{color:#ffffff;text-decoration:none;background-color:#333333;background-color:rgba(255, 255, 255, 0.05);} +.navbar .brand:hover,.navbar ul .active>a{color:#ffffff;text-decoration:none;background-color:#333333;background-color:rgba(255, 255, 255, 0.05);} .navbar .brand{float:left;display:block;padding:8px 20px 12px;margin-left:-20px;font-size:20px;font-weight:200;line-height:1;color:#ffffff;} .navbar p{margin:0;line-height:40px;}.navbar p a:hover{color:#ffffff;background-color:transparent;} .navbar .btn{margin-top:5px;} diff --git a/docs/base-css.html b/docs/base-css.html index 225f10ae2d..a0c3c4cf14 100644 --- a/docs/base-css.html +++ b/docs/base-css.html @@ -638,7 +638,6 @@ <h3>3. Bordered table</h3> <p>Add borders around the entire table and between each row, plus a bit of rounded corners for aesthetic purposes.</p> - <p><span class="label">Note</span> Bordered tables do not work well with <code>rowspan</code> due to somewhat hacky CSS applied to the tables. Sorry about that!</p> <table class="bordered-table"> <thead> <tr> @@ -1177,37 +1176,52 @@ </div> </div> - <h2>Button groups</h2> - <div class="well"> - <div class="btn-group"> - <a class="btn" href="#">Left</a> - <a class="btn" href="#">Middle</a> - <a class="btn" href="#">Right</a> + <br> + + <div class="row"> + <div class="span4"> + <h2>Button groups</h2> + <p>Use button groups to join multiple buttons together as one composite component. Button groups can be built with not only <code><a></code> or <code><button></code> elements, but also radios and checkboxes.</p> + <p>You can also combine sets of button groups into a toolbar for more complex projects.</p> + <p><a class="btn js-btn" href="./javascript.html#buttons">Get the javascript »</a></p> + <p class="muted">Heads up: CSS for button groups is in a separate file, button-groups.less.</p> </div> - </div> - <div class="well"> - <div class="btn-toolbar"> - <div class="btn-group"> - <a class="btn" href="#">1</a> - <a class="btn" href="#">2</a> - <a class="btn" href="#">3</a> - <a class="btn" href="#">4</a> - <a class="btn" href="#">5</a> - </div> - <div class="btn-group"> - <a class="btn" href="#">6</a> - <a class="btn" href="#">7</a> - <a class="btn" href="#">8</a> - </div> - <div class="btn-group"> - <a class="btn" href="#">9</a> + <div class="span8"> + <h3>Linked button group</h3> + <p>Using the standard <code><a class="btn" href="#">...</a></code> markup, simply add all the buttons you need.</p> + <div class="well" style="padding: 10px; margin-bottom: 9px;"> + <div class="btn-group"> + <a class="btn" href="#">Left</a> + <a class="btn" href="#">Middle</a> + <a class="btn" href="#">Right</a> + </div> </div> - <div class="btn-group"> - <a class="btn" href="#">10</a> + <p>Level up one more time by wrapping multiple instances of <code><div class="btn-group"></code> with <code><div class="btn-toolbar"></code>.</p> + <div class="well" style="padding: 10px;"> + <div class="btn-toolbar"> + <div class="btn-group"> + <a class="btn" href="#">1</a> + <a class="btn" href="#">2</a> + <a class="btn" href="#">3</a> + <a class="btn" href="#">4</a> + <a class="btn" href="#">5</a> + </div> + <div class="btn-group"> + <a class="btn" href="#">6</a> + <a class="btn" href="#">7</a> + <a class="btn" href="#">8</a> + </div> + <div class="btn-group"> + <a class="btn" href="#">9</a> + </div> + <div class="btn-group"> + <a class="btn" href="#">10</a> + </div> + </div> </div> </div> </div> - + </section> diff --git a/lib/navbar.less b/lib/navbar.less index d57f316f59..7e0b17d435 100644 --- a/lib/navbar.less +++ b/lib/navbar.less @@ -20,7 +20,7 @@ // Text and links .navbar { // Hover and active states - .brand a:hover, + .brand:hover, ul .active > a { color: @white; text-decoration: none; -- GitLab From 5cb76037ae70ca26a923750ca9441b04d2fbd6a7 Mon Sep 17 00:00:00 2001 From: Mark Otto <markdotto@gmail.com> Date: Thu, 5 Jan 2012 23:24:19 -0800 Subject: [PATCH 191/318] fixing conflict in dividers in navbar, fix navbar docs, fix search form in navbar --- bootstrap.css | 8 +++++--- bootstrap.min.css | 6 +++--- docs/assets/css/docs.css | 1 - docs/base-css.html | 2 +- docs/components.html | 11 +++++------ lib/forms.less | 3 ++- lib/navbar.less | 3 ++- 7 files changed, 18 insertions(+), 16 deletions(-) diff --git a/bootstrap.css b/bootstrap.css index e2ef40a6c5..4d8edd4fbf 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: Thu Jan 5 22:37:16 PST 2012 + * Date: Thu Jan 5 23:24:01 PST 2012 */ html, body { margin: 0; @@ -957,9 +957,10 @@ input::-webkit-input-placeholder { -moz-border-radius: 0 3px 3px 0; border-radius: 0 3px 3px 0; } -.search-form .search-query { +.search-query { padding-left: 14px; padding-right: 14px; + margin-bottom: 0; -webkit-border-radius: 14px; -moz-border-radius: 14px; border-radius: 14px; @@ -1764,7 +1765,7 @@ i { background-color: #222; background-color: rgba(0, 0, 0, 0.5); } -.nav .divider { +.nav .vertical-divider { height: 40px; width: 1px; margin: 0 5px; @@ -1796,6 +1797,7 @@ i { background: rgba(255, 255, 255, 0.05); } .nav .dropdown-menu li a { + padding: 4px 15px; color: #999; text-shadow: 0 1px 0 rgba(0, 0, 0, 0.5); } diff --git a/bootstrap.min.css b/bootstrap.min.css index 3d5ec0d6c5..c93f333ee6 100644 --- a/bootstrap.min.css +++ b/bootstrap.min.css @@ -156,7 +156,7 @@ input::-webkit-input-placeholder{color:#999999;} .input-prepend .add-on{*margin-top:1px;} .input-append input{float:left;-webkit-border-radius:3px 0 0 3px;-moz-border-radius:3px 0 0 3px;border-radius:3px 0 0 3px;} .input-append .add-on{margin-right:0;margin-left:-1px;-webkit-border-radius:0 3px 3px 0;-moz-border-radius:0 3px 3px 0;border-radius:0 3px 3px 0;} -.search-form .search-query{padding-left:14px;padding-right:14px;-webkit-border-radius:14px;-moz-border-radius:14px;border-radius:14px;} +.search-query{padding-left:14px;padding-right:14px;margin-bottom:0;-webkit-border-radius:14px;-moz-border-radius:14px;border-radius:14px;} .search-form input,.inline-form input,.horizontal-form input,.search-form textarea,.inline-form textarea,.horizontal-form textarea,.search-form select,.inline-form select,.horizontal-form select,.search-form .uneditable-input,.inline-form .uneditable-input,.horizontal-form .uneditable-input{display:inline-block;margin-bottom:0;} .control-group{margin-bottom:18px;} .control-group>label{font-weight:bold;} @@ -294,11 +294,11 @@ i{background-image:url(docs/assets/img/glyphicons-halflings-sprite.png);backgrou .nav{position:relative;left:0;display:block;float:left;margin:0 10px 0 0;}.nav>li{display:block;float:left;} .nav a{display:block;float:none;padding:10px 10px 11px;line-height:19px;color:#999999;text-decoration:none;text-shadow:0 -1px 0 rgba(0, 0, 0, 0.25);}.nav a:hover{color:#ffffff;text-decoration:none;} .nav .active>a{background-color:#222;background-color:rgba(0, 0, 0, 0.5);} -.nav .divider{height:40px;width:1px;margin:0 5px;overflow:hidden;background-color:#222;border-right:1px solid #444;} +.nav .vertical-divider{height:40px;width:1px;margin:0 5px;overflow:hidden;background-color:#222;border-right:1px solid #444;} .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-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);background-repeat:repeat-x;filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#292929', endColorstr='#191919', GradientType=0);color:#ffffff;} +.nav .dropdown-menu li a{padding:4px 15px;color:#999;text-shadow:0 1px 0 rgba(0, 0, 0, 0.5);}.nav .dropdown-menu li a:hover{background-color:#191919;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);background-repeat:repeat-x;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;} .tabs,.pills{padding:0;margin:0 0 20px;list-style:none;zoom:1;}.tabs:before,.pills:before,.tabs:after,.pills:after{display:table;*display:inline;content:"";zoom:1;} diff --git a/docs/assets/css/docs.css b/docs/assets/css/docs.css index 41c7ae4b64..6cffcbc207 100644 --- a/docs/assets/css/docs.css +++ b/docs/assets/css/docs.css @@ -41,7 +41,6 @@ body > .navbar-fixed .brand:hover { } .page-header h1 { margin-bottom: 17px; - font-size: 36px; line-height: 1; } diff --git a/docs/base-css.html b/docs/base-css.html index a0c3c4cf14..399a414637 100644 --- a/docs/base-css.html +++ b/docs/base-css.html @@ -1181,7 +1181,7 @@ <div class="row"> <div class="span4"> <h2>Button groups</h2> - <p>Use button groups to join multiple buttons together as one composite component. Button groups can be built with not only <code><a></code> or <code><button></code> elements, but also radios and checkboxes.</p> + <p>Use button groups to join multiple buttons together as one composite component. Just build them with a series of <code><a></code> or <code><button></code> elements. Button groups can also function as radios and checkboxes (see <a href="./javascript.html#buttons">the Javascript docs</a> for that).</p> <p>You can also combine sets of button groups into a toolbar for more complex projects.</p> <p><a class="btn js-btn" href="./javascript.html#buttons">Get the javascript »</a></p> <p class="muted">Heads up: CSS for button groups is in a separate file, button-groups.less.</p> diff --git a/docs/components.html b/docs/components.html index e57d1fd179..5c25a98a40 100644 --- a/docs/components.html +++ b/docs/components.html @@ -267,7 +267,6 @@ <div class="page-header"> <h1>Navbar</h1> </div> - <h2>Fixed navbar</h2> <div class="navbar navbar-static" > <div class="navbar-inner"> <div class="container" style="width: auto;"> @@ -287,11 +286,11 @@ </ul> </li> </ul> - <form class="form-search navbar-search pull-left" action=""> + <form class="navbar-search pull-left" action=""> <input type="text" class="search-query span2" placeholder="Search"> </form> <ul class="nav secondary-nav"> - <li class="divider"></li> + <li class="vertical-divider"></li> <li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown</a> <ul class="dropdown-menu"> @@ -308,15 +307,15 @@ <div class="row"> <div class="span4"> - <h4>What is it</h4> + <h3>What is it</h3> <p>Our navbar is a fixed bar that houses a website’s logo or name, primary navigation, and search form.</p> </div> <div class="span4"> - <h4>Customizable</h4> + <h3>Customizable</h3> <p>All elements within, and the entire navbar as well, are optional. You can choose to include a logo/name, nav, search, and a secondary nav—or any combination of that.</p> </div> <div class="span4"> - <h4>Dropdowns included</h4> + <h3>Dropdowns included</h3> <p>As part of the main navigation, we’ve included the ability for you to add dropdowns to your nav. Check out the secondary nav above (right aligned) to see how it’s done. Dropdowns <code><li></code> tags also support <code>.active</code> for showing current page selection.</p> </div> </div> diff --git a/lib/forms.less b/lib/forms.less index ddd735cc41..938983536e 100644 --- a/lib/forms.less +++ b/lib/forms.less @@ -372,9 +372,10 @@ input::-webkit-input-placeholder { // SEARCH FORM // ----------- -.search-form .search-query { +.search-query { padding-left: 14px; padding-right: 14px; + margin-bottom: 0; // remove the default margin on all inputs .border-radius(14px); } diff --git a/lib/navbar.less b/lib/navbar.less index 7e0b17d435..a96aa941c1 100644 --- a/lib/navbar.less +++ b/lib/navbar.less @@ -153,7 +153,7 @@ background-color: rgba(0,0,0,.5); } // Dividers (basically a vertical hr) - .divider { + .vertical-divider { height: 40px; width: 1px; margin: 0 5px; @@ -188,6 +188,7 @@ } } li a { + padding: 4px 15px; color: #999; text-shadow: 0 1px 0 rgba(0,0,0,.5); &:hover { -- GitLab From f07bcafd397dd39c5490e192ab7b52c49acd3d9b Mon Sep 17 00:00:00 2001 From: Nicklas Ansman Giertz <nicklas@ansman.se> Date: Fri, 6 Jan 2012 11:16:29 +0100 Subject: [PATCH 192/318] Make twipsy respect custom classes when using a custom template If you had a custom class to the root object twipsy would overwrite that class ($tip[0].className = 'twipsy'), now this has been changed so it removes only classes that twipsy adds. --- js/bootstrap-twipsy.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/js/bootstrap-twipsy.js b/js/bootstrap-twipsy.js index a176f09088..1ce4ad85b6 100644 --- a/js/bootstrap-twipsy.js +++ b/js/bootstrap-twipsy.js @@ -155,7 +155,7 @@ , setContent: function () { var $tip = this.tip() $tip.find('.twipsy-inner').html(this.getTitle()) - $tip[0].className = 'twipsy' + $tip.removeClass('fade in top bottom left right') } , hide: function () { -- GitLab From 969fbe71504f6a8159688634cce774d7ffc7ac67 Mon Sep 17 00:00:00 2001 From: Nicklas Ansman Giertz <nicklas@ansman.se> Date: Fri, 6 Jan 2012 11:32:11 +0100 Subject: [PATCH 193/318] Add a test case for issue #908 (twipsy doesn't respect custom classes) The test case verifies that a custom class is respected. --- js/tests/unit/bootstrap-twipsy.js | 11 +++++++++++ 1 file changed, 11 insertions(+) diff --git a/js/tests/unit/bootstrap-twipsy.js b/js/tests/unit/bootstrap-twipsy.js index 6623fc026e..08512ca979 100644 --- a/js/tests/unit/bootstrap-twipsy.js +++ b/js/tests/unit/bootstrap-twipsy.js @@ -48,4 +48,15 @@ $(function () { ok(!$(".twipsy").length, 'twipsy removed') }) + test("should respect custom classes", function () { + var twipsy = $('<a href="#" rel="twipsy" title="Another twipsy"></a>') + .appendTo('#qunit-fixture') + .twipsy({ template: '<div class="twipsy some-class"><div class="twipsy-arrow"/><div class="twipsy-inner"/></div>'}) + .twipsy('show') + + ok($('.twipsy').hasClass('some-class'), 'custom class is present') + twipsy.twipsy('hide') + ok(!$(".twipsy").length, 'twipsy removed') + }) + }) \ No newline at end of file -- GitLab From dd99e2d0488c503d929909e431a544e472782178 Mon Sep 17 00:00:00 2001 From: Jacob Thornton <jacobthornton@gmail.com> Date: Fri, 6 Jan 2012 18:30:32 -0800 Subject: [PATCH 194/318] start of autocomplete plugin --- js/bootstrap-typeahead.js | 190 +++++++++++++++++++++++++++ js/tests/index.html | 2 + js/tests/unit/bootstrap-typeahead.js | 122 +++++++++++++++++ 3 files changed, 314 insertions(+) create mode 100644 js/bootstrap-typeahead.js create mode 100644 js/tests/unit/bootstrap-typeahead.js diff --git a/js/bootstrap-typeahead.js b/js/bootstrap-typeahead.js new file mode 100644 index 0000000000..52ced3fef8 --- /dev/null +++ b/js/bootstrap-typeahead.js @@ -0,0 +1,190 @@ +/* ============================================================= + * bootstrap-typeahead.js v2.0.0 + * http://twitter.github.com/bootstrap/javascript.html#collapsible + * ============================================================= + * Copyright 2011 Twitter, Inc. + * + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + * ============================================================ */ + +!function( $ ){ + + "use strict" + + var Typeahead = function ( element, options ) { + this.$element = $(element) + this.options = $.extend({}, $.fn.typeahead.defaults, options) + this.$menu = $(this.options.menu).appendTo('body') + this.data = this.options.data + this.shown = false + this.listen() + } + + Typeahead.prototype = { + + constructor: Typeahead + + , matcher: function(item, query) { + return ~item.indexOf(query) + } + + , select: function(event) { + this.$element.val($(event.target).attr('data-value')) + this.hide() + } + + , show: function () { + this.shown = true + this.$menu.show() + return this + } + + , hide: function () { + this.shown = false + this.$menu.hide() + return this + } + + , lookup: function (event) { + var query = this.$element.val() + , that = this + + var items = this.data.filter(function (item) { + if (that.matcher(item, query)) { + return item + } + }) + + if (!items.length) { + return this.shown ? this.hide() : this + } + + return this.render(items).show() + } + + , render: function(items) { + var that = this + + items = $(items).map(function (i, item) { + return $(that.options.item) + .text(item) + .attr('data-value', item)[0] + }) + + items.first().addClass('active') + + this.$menu.append(items) + + return this + } + + , next: function (event) { + var active = this.$menu.find('.active').removeClass('active') + , next = active.next() || $(this.$menu.find('li')[0]) + + next.addClass('active') + } + + , prev: function (event) { + var active = this.$menu.find('.active').removeClass('active') + , next = active.prev() || this.$menu.find('li').last() + + next.addClass('active') + } + + , keyup: function () { + event + .stopPropagation() + .preventDefault() + + switch(event.keyCode) { + case 9: // tab + case 13: // enter + this.select() + break + + case 27: // escape + this.hide() + break + + default: + this.lookup() + } + } + + , keypress: function (event) { + event.stopPropagation() + switch(event.keyCode) { + case 9: // tab + case 13: // enter + case 27: // escape + event.preventDefault() + break + + case 38: // up arrow + this.prev() + event.preventDefault() + break + + case 40: // down arrow + this.next() + event.preventDefault() + break + } + } + + , listen: function () { + this.$element + .on('focus', this.show) + .on('blur', $.proxy(this.hide, this)) + .on('keypress', $.proxy(this.keypress, this)) + .on('keyup', this.keyup) + .on('change', $.proxy(this.lookup, this)) + + if ($.browser.webkit || $.browser.msie) { + this.$element.on('keydown', this.keypress) + } + + this.$menu + .on('click', '* > *', $.proxy(this.select, this)) + .on('mouseenter', function () { + /* remove selected class, add to mouseover */ + }) + } + } + + /* TYPEAHEAD PLUGIN DEFINITION + * ============================== */ + + $.fn.typeahead = function ( option ) { + return this.each(function () { + var $this = $(this) + , data = $this.data('typeahead') + , options = typeof option == 'object' && option + if (!data) $this.data('typeahead', (data = new Typeahead(this, options))) + if (typeof option == 'string') data[option]() + }) + } + + $.fn.typeahead.defaults = { + data: null + , items: 8 + , empty: false + , noresults: false + , menu: '<ul class="dropdown-menu"></ul>' + , item: '<li></li>' + } + + $.fn.typeahead.Constructor = Typeahead + +}( window.jQuery ) \ No newline at end of file diff --git a/js/tests/index.html b/js/tests/index.html index e8ed2c5feb..27c2b34125 100644 --- a/js/tests/index.html +++ b/js/tests/index.html @@ -22,6 +22,7 @@ <script src="../../js/bootstrap-tab.js"></script> <script src="../../js/bootstrap-twipsy.js"></script> <script src="../../js/bootstrap-popover.js"></script> + <script src="../../js/bootstrap-typeahead.js"></script> <!-- unit tests --> <script src="unit/bootstrap-transition.js"></script> @@ -34,6 +35,7 @@ <script src="unit/bootstrap-tab.js"></script> <script src="unit/bootstrap-twipsy.js"></script> <script src="unit/bootstrap-popover.js"></script> + <script src="unit/bootstrap-typeahead.js"></script> <body> <div> diff --git a/js/tests/unit/bootstrap-typeahead.js b/js/tests/unit/bootstrap-typeahead.js new file mode 100644 index 0000000000..dc46a79909 --- /dev/null +++ b/js/tests/unit/bootstrap-typeahead.js @@ -0,0 +1,122 @@ +$(function () { + + module("bootstrap-typeahead") + + test("should be defined on jquery object", function () { + ok($(document.body).typeahead, 'alert method is defined') + }) + + test("should return element", function () { + ok($(document.body).typeahead()[0] == document.body, 'document.body returned') + }) + + test("should listen to an input", function () { + var $input = $('<input />') + $input.typeahead() + ok($input.data('events').focus, 'has a focus event') + ok($input.data('events').blur, 'has a blur event') + ok($input.data('events').keypress, 'has a keypress event') + ok($input.data('events').keyup, 'has a keyup event') + ok($input.data('events').change, 'has a change event') + if ($.browser.webkit || $.browser.msie) { + ok($input.data('events').keydown, 'has a keydown event') + } else { + ok($input.data('events').keydown, 'does not have a keydown event') + } + }) + + test("should create a menu", function () { + var $input = $('<input />') + ok($input.typeahead().data('typeahead').$menu, 'has a menu') + }) + + test("should listen to the menu", function () { + var $input = $('<input />') + , $menu = $input.typeahead().data('typeahead').$menu + + ok($menu.data('events').mouseover, 'has a mouseover(pseudo: mouseenter)') + ok($menu.data('events').click, 'has a click') + }) + + test("should show menu when query entered", function () { + var $input = $('<input />').typeahead({ + data: ['aa', 'ab', 'ac'] + }) + , typeahead = $input.data('typeahead') + + $input.val('a').change() + + ok(typeahead.$menu.is(":visible"), 'typeahead is visible') + equals(typeahead.$menu.find('li').length, 3, 'has 3 items in menu') + equals(typeahead.$menu.find('.active').length, 1, 'one item is active') + + typeahead.$menu.remove() + }) + + test("should hide menu when query entered", function () { + var $input = $('<input />').typeahead({ + data: ['aa', 'ab', 'ac'] + }) + , typeahead = $input.data('typeahead') + + $input.val('a').change() + + ok(typeahead.$menu.is(":visible"), 'typeahead is visible') + equals(typeahead.$menu.find('li').length, 3, 'has 3 items in menu') + equals(typeahead.$menu.find('.active').length, 1, 'one item is active') + + $input.blur() + + ok(!typeahead.$menu.is(":visible"), "typeahead is no longer visible") + + typeahead.$menu.remove() + }) + + test("should set next item when down arrow is pressed", function () { + var $input = $('<input />').typeahead({ + data: ['aa', 'ab', 'ac'] + }) + , typeahead = $input.data('typeahead') + + $input.val('a').change() + + ok(typeahead.$menu.is(":visible"), 'typeahead is visible') + equals(typeahead.$menu.find('li').length, 3, 'has 3 items in menu') + equals(typeahead.$menu.find('.active').length, 1, 'one item is active') + ok(typeahead.$menu.find('li').first().hasClass('active'), "first item is active") + + $input.trigger({ + type: 'keypress' + , keyCode: 40 + }) + + ok(typeahead.$menu.find('li').first().next().hasClass('active'), "second item is active") + + + $input.trigger({ + type: 'keypress' + , keyCode: 38 + }) + + ok(typeahead.$menu.find('li').first().hasClass('active'), "first item is active") + + typeahead.$menu.remove() + }) + + + test("should set input value to selected item", function () { + var $input = $('<input />').typeahead({ + data: ['aa', 'ab', 'ac'] + }) + , typeahead = $input.data('typeahead') + + $input.val('a').change() + + $(typeahead.$menu.find('li')[2]).trigger('click') + + equals($input.val(), 'ac', 'input value was correctly set') + ok(!typeahead.$menu.is(':visible'), 'the menu was hidden') + + typeahead.$menu.remove() + }) +}) \ No newline at end of file -- GitLab From cfc2353059df628c67d19a3c5c3ead2cc6051f53 Mon Sep 17 00:00:00 2001 From: Mark Otto <markdotto@gmail.com> Date: Fri, 6 Jan 2012 23:59:22 -0800 Subject: [PATCH 195/318] front page docs updated to include old getting started section, update code styles to look like github gists, and lots more docs updates --- bootstrap.css | 50 +++-- bootstrap.min.css | 19 +- docs/assets/css/docs.css | 73 +++++++- .../js/google-code-prettify/prettify.css | 16 +- docs/base-css.html | 14 ++ docs/components.html | 171 +++++++++++++----- docs/index.html | 40 +++- docs/less.html | 6 +- docs/scaffolding.html | 1 - docs/upgrading.html | 3 + lib/forms.less | 10 + lib/navbar.less | 5 + lib/sidenav.less | 11 +- lib/type.less | 12 +- 14 files changed, 340 insertions(+), 91 deletions(-) diff --git a/bootstrap.css b/bootstrap.css index 4d8edd4fbf..85ed7961a3 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: Thu Jan 5 23:24:01 PST 2012 + * Date: Fri Jan 6 23:58:33 PST 2012 */ html, body { margin: 0; @@ -382,20 +382,20 @@ h3 { h3 small { font-size: 14px; } +h4, h5, h6 { + line-height: 18px; +} h4 { - font-size: 16px; - line-height: 36px; + font-size: 14px; } h4 small { font-size: 12px; } h5 { - font-size: 14px; - line-height: 18px; + font-size: 12px; } h6 { - font-size: 13px; - line-height: 18px; + font-size: 11px; color: #999999; text-transform: uppercase; } @@ -625,6 +625,12 @@ textarea { .controls > .radio:first-child, .controls > .checkbox:first-child { padding-top: 6px; } +.radio.inline, .checkbox.inline { + display: inline-block; +} +.radio.inline + .radio.inline, .checkbox.inline + .checkbox.inline { + margin-left: 10px; +} input, textarea { -webkit-box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.1); -moz-box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.1); @@ -1672,6 +1678,9 @@ i { .navbar .btn { margin-top: 5px; } +.navbar-form { + margin-bottom: 0; +} .navbar-search { position: relative; float: left; @@ -2111,19 +2120,22 @@ i { } .side-nav .nav-label, .side-nav .nav-item { display: block; - padding: 3px 16px; + padding: 3px 15px; text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5); } .side-nav .nav-label { font-size: 11px; line-height: 18px; - color: #333333; + color: #999999; text-transform: uppercase; } .side-nav .nav-group { - margin: 0 -1px; + margin: 0; list-style: none; } +.side-nav .nav-group + .nav-label { + margin-top: 9px; +} .side-nav .nav-item { font-weight: bold; } @@ -2136,16 +2148,16 @@ i { .side-nav .active .nav-item { color: #fff; text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.3); - background-color: #aaaaaa; - background-image: -khtml-gradient(linear, left top, left bottom, from(#cccccc), to(#aaaaaa)); - background-image: -moz-linear-gradient(top, #cccccc, #aaaaaa); - background-image: -ms-linear-gradient(top, #cccccc, #aaaaaa); - background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #cccccc), color-stop(100%, #aaaaaa)); - background-image: -webkit-linear-gradient(top, #cccccc, #aaaaaa); - background-image: -o-linear-gradient(top, #cccccc, #aaaaaa); - background-image: linear-gradient(top, #cccccc, #aaaaaa); + background-color: #999999; + background-image: -khtml-gradient(linear, left top, left bottom, from(#cccccc), to(#999999)); + background-image: -moz-linear-gradient(top, #cccccc, #999999); + background-image: -ms-linear-gradient(top, #cccccc, #999999); + background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #cccccc), color-stop(100%, #999999)); + background-image: -webkit-linear-gradient(top, #cccccc, #999999); + background-image: -o-linear-gradient(top, #cccccc, #999999); + background-image: linear-gradient(top, #cccccc, #999999); background-repeat: repeat-x; - filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#cccccc', endColorstr='#aaaaaa', GradientType=0); + filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#cccccc', endColorstr='#999999', GradientType=0); -webkit-box-shadow: inset 0 1px 0 rgba(0, 0, 0, 0.05), inset 0 -1px 0 rgba(0, 0, 0, 0.05); -moz-box-shadow: inset 0 1px 0 rgba(0, 0, 0, 0.05), inset 0 -1px 0 rgba(0, 0, 0, 0.05); box-shadow: inset 0 1px 0 rgba(0, 0, 0, 0.05), inset 0 -1px 0 rgba(0, 0, 0, 0.05); diff --git a/bootstrap.min.css b/bootstrap.min.css index c93f333ee6..16f9fb76bd 100644 --- a/bootstrap.min.css +++ b/bootstrap.min.css @@ -66,9 +66,10 @@ h1,h2,h3,h4,h5,h6{font-weight:bold;color:#333333;text-rendering:optimizelegibili h1{font-size:30px;line-height:36px;}h1 small{font-size:18px;} h2{font-size:24px;line-height:36px;}h2 small{font-size:18px;} h3{line-height:27px;font-size:18px;}h3 small{font-size:14px;} -h4{font-size:16px;line-height:36px;}h4 small{font-size:12px;} -h5{font-size:14px;line-height:18px;} -h6{font-size:13px;line-height:18px;color:#999999;text-transform:uppercase;} +h4,h5,h6{line-height:18px;} +h4{font-size:14px;}h4 small{font-size:12px;} +h5{font-size:12px;} +h6{font-size:11px;color:#999999;text-transform:uppercase;} ul,ol{margin:0 0 9px 25px;} ul ul,ul ol,ol ol,ol ul{margin-bottom:0;} ul{list-style:disc;} @@ -107,6 +108,8 @@ textarea{height:auto;} .radio,.checkbox{padding-left:18px;} .radio input[type=radio],.checkbox input[type=checkbox]{float:left;margin-left:-18px;} .controls>.radio:first-child,.controls>.checkbox:first-child{padding-top:6px;} +.radio.inline,.checkbox.inline{display:inline-block;} +.radio.inline+.radio.inline,.checkbox.inline+.checkbox.inline{margin-left:10px;} input,textarea{-webkit-box-shadow:inset 0 1px 3px rgba(0, 0, 0, 0.1);-moz-box-shadow:inset 0 1px 3px rgba(0, 0, 0, 0.1);box-shadow:inset 0 1px 3px rgba(0, 0, 0, 0.1);-webkit-transition:border linear 0.2s,box-shadow linear 0.2s;-moz-transition:border linear 0.2s,box-shadow linear 0.2s;-ms-transition:border linear 0.2s,box-shadow linear 0.2s;-o-transition:border linear 0.2s,box-shadow linear 0.2s;transition:border linear 0.2s,box-shadow linear 0.2s;} input:focus,textarea:focus{border-color:rgba(82, 168, 236, 0.8);-webkit-box-shadow:inset 0 1px 3px rgba(0, 0, 0, 0.1),0 0 8px rgba(82, 168, 236, 0.6);-moz-box-shadow:inset 0 1px 3px rgba(0, 0, 0, 0.1),0 0 8px rgba(82, 168, 236, 0.6);box-shadow:inset 0 1px 3px rgba(0, 0, 0, 0.1),0 0 8px rgba(82, 168, 236, 0.6);outline:0;} input[type=file]:focus,input[type=checkbox]:focus,select:focus{-webkit-box-shadow:none;-moz-box-shadow:none;box-shadow:none;outline:1px dotted #666;} @@ -284,6 +287,7 @@ i{background-image:url(docs/assets/img/glyphicons-halflings-sprite.png);backgrou .navbar .brand{float:left;display:block;padding:8px 20px 12px;margin-left:-20px;font-size:20px;font-weight:200;line-height:1;color:#ffffff;} .navbar p{margin:0;line-height:40px;}.navbar p a:hover{color:#ffffff;background-color:transparent;} .navbar .btn{margin-top:5px;} +.navbar-form{margin-bottom:0;} .navbar-search{position:relative;float:left;margin-top:6px;margin-bottom:0;}.navbar-search .search-query{padding:4px 9px;font-family:"Helvetica Neue",Helvetica,Arial,sans-serif;font-size:13px;font-weight:normal;line-height:1;color:#ffffff;color:rgba(255, 255, 255, 0.75);background-color:#444;background-color:rgba(255, 255, 255, 0.3);border:1px solid #111;-webkit-box-shadow:inset 0 1px 2px rgba(0, 0, 0, 0.1),0 1px 0px rgba(255, 255, 255, 0.15);-moz-box-shadow:inset 0 1px 2px rgba(0, 0, 0, 0.1),0 1px 0px rgba(255, 255, 255, 0.15);box-shadow:inset 0 1px 2px rgba(0, 0, 0, 0.1),0 1px 0px rgba(255, 255, 255, 0.15);-webkit-transition:none;-moz-transition:none;-ms-transition:none;-o-transition:none;transition:none;}.navbar-search .search-query:-moz-placeholder{color:#eeeeee;} .navbar-search .search-query::-webkit-input-placeholder{color:#eeeeee;} .navbar-search .search-query:hover{color:#ffffff;background-color:#999999;background-color:rgba(255, 255, 255, 0.5);} @@ -340,13 +344,14 @@ i{background-image:url(docs/assets/img/glyphicons-halflings-sprite.png);backgrou .subnav li:last-child a{border-right:0;-webkit-border-radius:0 6px 6px 0;-moz-border-radius:0 6px 6px 0;border-radius:0 6px 6px 0;} .subnav ul .active>a{color:#333333;background-color:#eee;} .side-nav{padding:9px 0;} -.side-nav .nav-label,.side-nav .nav-item{display:block;padding:3px 16px;text-shadow:0 1px 0 rgba(255, 255, 255, 0.5);} -.side-nav .nav-label{font-size:11px;line-height:18px;color:#333333;text-transform:uppercase;} -.side-nav .nav-group{margin:0 -1px;list-style:none;} +.side-nav .nav-label,.side-nav .nav-item{display:block;padding:3px 15px;text-shadow:0 1px 0 rgba(255, 255, 255, 0.5);} +.side-nav .nav-label{font-size:11px;line-height:18px;color:#999999;text-transform:uppercase;} +.side-nav .nav-group{margin:0;list-style:none;} +.side-nav .nav-group+.nav-label{margin-top:9px;} .side-nav .nav-item{font-weight:bold;} .side-nav .nav-item i{vertical-align:-2px;} .side-nav .nav-item:hover{text-decoration:none;} -.side-nav .active .nav-item{color:#fff;text-shadow:0 -1px 0 rgba(0, 0, 0, 0.3);background-color:#aaaaaa;background-image:-khtml-gradient(linear, left top, left bottom, from(#cccccc), to(#aaaaaa));background-image:-moz-linear-gradient(top, #cccccc, #aaaaaa);background-image:-ms-linear-gradient(top, #cccccc, #aaaaaa);background-image:-webkit-gradient(linear, left top, left bottom, color-stop(0%, #cccccc), color-stop(100%, #aaaaaa));background-image:-webkit-linear-gradient(top, #cccccc, #aaaaaa);background-image:-o-linear-gradient(top, #cccccc, #aaaaaa);background-image:linear-gradient(top, #cccccc, #aaaaaa);background-repeat:repeat-x;filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#cccccc', endColorstr='#aaaaaa', GradientType=0);-webkit-box-shadow:inset 0 1px 0 rgba(0, 0, 0, 0.05),inset 0 -1px 0 rgba(0, 0, 0, 0.05);-moz-box-shadow:inset 0 1px 0 rgba(0, 0, 0, 0.05),inset 0 -1px 0 rgba(0, 0, 0, 0.05);box-shadow:inset 0 1px 0 rgba(0, 0, 0, 0.05),inset 0 -1px 0 rgba(0, 0, 0, 0.05);} +.side-nav .active .nav-item{color:#fff;text-shadow:0 -1px 0 rgba(0, 0, 0, 0.3);background-color:#999999;background-image:-khtml-gradient(linear, left top, left bottom, from(#cccccc), to(#999999));background-image:-moz-linear-gradient(top, #cccccc, #999999);background-image:-ms-linear-gradient(top, #cccccc, #999999);background-image:-webkit-gradient(linear, left top, left bottom, color-stop(0%, #cccccc), color-stop(100%, #999999));background-image:-webkit-linear-gradient(top, #cccccc, #999999);background-image:-o-linear-gradient(top, #cccccc, #999999);background-image:linear-gradient(top, #cccccc, #999999);background-repeat:repeat-x;filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#cccccc', endColorstr='#999999', GradientType=0);-webkit-box-shadow:inset 0 1px 0 rgba(0, 0, 0, 0.05),inset 0 -1px 0 rgba(0, 0, 0, 0.05);-moz-box-shadow:inset 0 1px 0 rgba(0, 0, 0, 0.05),inset 0 -1px 0 rgba(0, 0, 0, 0.05);box-shadow:inset 0 1px 0 rgba(0, 0, 0, 0.05),inset 0 -1px 0 rgba(0, 0, 0, 0.05);} .breadcrumb{padding:7px 14px;margin:0 0 18px;background-color:#f5f5f5;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);background-repeat:repeat-x;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:#999999;} .breadcrumb .active a{color:#333333;} diff --git a/docs/assets/css/docs.css b/docs/assets/css/docs.css index 6cffcbc207..579baad7d9 100644 --- a/docs/assets/css/docs.css +++ b/docs/assets/css/docs.css @@ -192,6 +192,75 @@ body > .navbar-fixed .brand:hover { } +/* Quickstart section for getting le code +-------------------------------------------------- */ +.getting-started { + background-color: #f5f5f5; + background-repeat: repeat-x; + background-image: -khtml-gradient(linear, left top, left bottom, from(#f9f9f9), to(#f5f5f5)); + background-image: -moz-linear-gradient(#f9f9f9, #f5f5f5); + background-image: -ms-linear-gradient(#f9f9f9, #f5f5f5); + background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #f9f9f9), color-stop(100%, #f5f5f5)); + background-image: -webkit-linear-gradient(#f9f9f9, #f5f5f5); + background-image: -o-linear-gradient(#f9f9f9, #f5f5f5); + -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr='#f9f9f9', endColorstr='#f5f5f5', GradientType=0)"; + filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#f9f9f9', endColorstr='#f5f5f5', GradientType=0); + background-image: linear-gradient(#f9f9f9, #f5f5f5); + -webkit-border-radius: 4px; + -moz-border-radius: 4px; + border-radius: 4px; +} +.getting-started { + border-color: #eee; +} +.getting-started td { + width: 33%; + border-right: 1px solid #eee; +} +.getting-started td + td { + border-left: 1px solid #fff; +} +.getting-started td:last-child { + border-right: 0; +} +.quick-start { + padding: 17px 20px; +} +.quick-start h3, +.quick-start p { + line-height: 18px; + text-align: center; + margin-bottom: 9px; +} +.quick-start p { + color: #777; +} +.quick-start .current-version, +.quick-start .current-version a { + color: #999; +} +.quick-start form { + margin-bottom: 0; +} +.quick-start textarea { + display: block; + width: 100%; + height: auto; + margin-bottom: 0; + line-height: 21px; + white-space: nowrap; + overflow: hidden; + /* Makes inputs behave like true block-level elements */ + -webkit-box-sizing: border-box; /* Older Webkit */ + -moz-box-sizing: border-box; /* Older FF */ + -ms-box-sizing: border-box; /* IE8 */ + box-sizing: border-box; /* CSS3 spec*/ + /* Hacks for IE7 to make this work just okay enough to function */ + *width: 90%; + *height: 24px; +} + + /* Footer -------------------------------------------------- */ .footer { @@ -341,8 +410,10 @@ h2 + table { .example-sites img { max-width: 290px; } -.built-with { +.marketing-byline { margin: -18px 0 27px; + font-size: 18px; + font-weight: 300; color: #999; text-align: center; } diff --git a/docs/assets/js/google-code-prettify/prettify.css b/docs/assets/js/google-code-prettify/prettify.css index 7ff618550a..e3bbf8b6cb 100644 --- a/docs/assets/js/google-code-prettify/prettify.css +++ b/docs/assets/js/google-code-prettify/prettify.css @@ -2,10 +2,10 @@ .lit { color: #195f91; } .pun, .opn, .clo { color: #93a1a1; } .fun { color: #dc322f; } -.str, .atv { color: #62C462; } -.kwd, .linenums .tag { color: #049CD9; } -.typ, .atn, .dec, .var { color: #EE5F5B; } -.pln { color: #93a1a1; } +.str, .atv { color: #D14; } +.kwd, .linenums .tag { color: #1e347b; } +.typ, .atn, .dec, .var { color: teal; } +.pln { color: #48484c; } pre.prettyprint { background-color: #fefbf3; padding: 9px; @@ -17,8 +17,14 @@ pre.prettyprint { background-color: #252525; } +pre.prettyprint { + padding: 8px; + background-color: #f7f7f9; + border: 1px solid #e1e1e8; +} + /* Specify class=linenums on a pre to get line numbering */ ol.linenums { margin: 0 0 0 40px; } /* IE indents via margin-left */ -ol.linenums li { color: #444; line-height: 18px; } +ol.linenums li { color: #bebec5; line-height: 18px; text-shadow: 0 1px 0 #fff; } /* Alternate shading for lines */ li.L1, li.L3, li.L5, li.L7, li.L9 { } \ No newline at end of file diff --git a/docs/base-css.html b/docs/base-css.html index 399a414637..cbdf5ea194 100644 --- a/docs/base-css.html +++ b/docs/base-css.html @@ -1044,6 +1044,20 @@ <p class="help-block">Here's more help text</p> </div> </fieldset> + <fieldset class="control-group"> + <label class="control-label" for="inlineCheckboxes">Inline checkboxes</label> + <div class="controls"> + <label class="checkbox inline"> + <input type="checkbox" name="inlineCheckbox1" value="option1"> 1 + </label> + <label class="checkbox inline"> + <input type="checkbox" name="inlineCheckbox1" value="option1"> 2 + </label> + <label class="checkbox inline"> + <input type="checkbox" name="inlineCheckbox1" value="option1"> 3 + </label> + </div> + </fieldset> <fieldset class="control-group"> <label class="control-label" for="optionsCheckboxes">Checkboxes</label> <div class="controls"> diff --git a/docs/components.html b/docs/components.html index 5c25a98a40..5bafc5a60a 100644 --- a/docs/components.html +++ b/docs/components.html @@ -227,27 +227,27 @@ ================================================== --> <section id="sidenav"> <div class="page-header"> - <h1>Side nav <small></small></h1> + <h1>Side nav <small>for lists of links</small></h1> </div> <div class="row"> <div class="span3"> + <h3>Examples</h3> + <p>Side navs can be just links, links with headings, and links with icons.</p> <div class="well side-nav"> - <h6 class="nav-label">Your account</h6> <ul class="nav-group"> <li class="active"><a class="nav-item" href="#">Home</a></li> <li><a class="nav-item" href="#">Library</a></li> + <li><a class="nav-item" href="#">Help</a></li> + </ul> + <h6 class="nav-label">Your account</h6> + <ul class="nav-group"> <li><a class="nav-item" href="#">Profile</a></li> <li><a class="nav-item" href="#">Settings</a></li> - <li><a class="nav-item" href="#">Help</a></li> </ul> - </div> - </div> - <div class="span3"> - <div class="well side-nav"> <h6 class="nav-label">Your account</h6> <ul class="nav-group"> - <li class="active"><a class="nav-item" href="#"><i class="home"></i> Home</a></li> + <li><a class="nav-item" href="#"><i class="home"></i> Home</a></li> <li><a class="nav-item" href="#"><i class="book"></i> Library</a></li> <li><a class="nav-item" href="#"><i class="user"></i> Profile</a></li> <li><a class="nav-item" href="#"><i class="cog"></i> Settings</a></li> @@ -255,6 +255,34 @@ </ul> </div> </div> + <div class="span3"> + <h3>Why use it</h3> + <p></p> + </div> + <div class="span6"> + <h3>Markup</h3> + <p>Marking up a side nav is at the core just writing an unordered list of links.</p> +<pre class="prettyprint linenums"> + <ul class="nav-group"> + <li class="active"> + <a class="nav-item" href="#">Home</a> + </li> + <li><a class="nav-item" href="#">Library</a></li> + <li><a class="nav-item" href="#">Help</a></li> + </ul> +</pre> + <p>Bootstrap also makes it easy to expand a regular list of links with multiple groups and headings.</p> +<pre class="prettyprint linenums"> + <h6 class="nav-label"></h6> + <ul class="nav-group"> + ... + </ul> + <h6 class="nav-label"></h6> + <ul class="nav-group"> + ... + </ul> +</pre> + </div> </div> </section> @@ -267,10 +295,12 @@ <div class="page-header"> <h1>Navbar</h1> </div> - <div class="navbar navbar-static" > + <h2>Static navbar example</h2> + <p>An example of a static (not fixed to the top) navbar with project name, navigation, and search form.</p> + <div class="navbar navbar-static"> <div class="navbar-inner"> <div class="container" style="width: auto;"> - <a class="brand" href="#">Project Name</a> + <a class="brand" href="#">Project name</a> <ul class="nav"> <li class="active"><a href="#">Home</a></li> <li><a href="#">Link</a></li> @@ -306,20 +336,70 @@ </div><!-- /navbar --> <div class="row"> - <div class="span4"> - <h3>What is it</h3> - <p>Our navbar is a fixed bar that houses a website’s logo or name, primary navigation, and search form.</p> - </div> - <div class="span4"> - <h3>Customizable</h3> - <p>All elements within, and the entire navbar as well, are optional. You can choose to include a logo/name, nav, search, and a secondary nav—or any combination of that.</p> + <div class="span8"> + <h3>Navbar scaffolding</h3> + <p>The navbar requires only a few divs to structure it well for static or fixed display.</p> +<pre class="prettyprint linenums"> +<div class="navbar navbar-static"> + <div class="navbar-inner"> + <div class="container" style="width: auto;"> + ... + </div> + </div> +</div> +</pre> + <p>To make the navbar fixed, swamp the <code>.navbar-static</code> class for <code>.navbar-fixed</code>. In your CSS, you will also need to account for the overlap it causes by adding <code>padding-top: 40px;</code> to your <code><body></code>.</p> +<pre class="prettyprint linenums"> +<div class="navbar navbar-fixed"> + ... +</div> +</pre> + <br> + <h3>Brand name</h3> + <p>A simple link to show your brand or project name only requires an anchor tag.</p> +<pre class="prettyprint linenums"> +<a class="brand" href="#"> + Project name +</a> +</pre> + <br> + <h3>Search form</h3> + <p>Search forms receive custom styles in the navbar with the <code>.navbar-search</code> class. Include <code>.pull-left</code> or <code>.pull-right</code> on the <code>form</code> to align it.</p> +<pre class="prettyprint linenums"> +<form class="navbar-search"> + <input type="text" class="search-query pull-left" placeholder="Search"> +</form> +</pre> </div> <div class="span4"> - <h3>Dropdowns included</h3> - <p>As part of the main navigation, we’ve included the ability for you to add dropdowns to your nav. Check out the secondary nav above (right aligned) to see how it’s done. Dropdowns <code><li></code> tags also support <code>.active</code> for showing current page selection.</p> + <h3>Nav links</h3> + <p>Nav items are simple to add via unordered lists.</p> +<pre class="prettyprint linenums"> +<ul class="nav"> + <li class="active"> + <a href="#">Home</a> + </li> + <li><a href="#">Link</a></li> + <li><a href="#">Link</a></li> +</ul> +</pre> + <p>Adding dropdowns to the nav is super simple, but does require the use of <a href="./javascript.html/#dropdowns">our javascript plugin</a>.</p> +<pre class="prettyprint linenums"> +<ul class="nav"> + <li class="dropdown"> + <a href="#" + class="dropdown-toggle" + data-toggle="dropdown"> + Account + </a> + <ul class="dropdown-menu"> + ... + </ul> + </li> +</ul> +</pre> </div> </div> - <p><strong>Note:</strong> When using the navbar on any page, be sure to account for the overlap it causes by adding <code>padding-top: 40px;</code> to your <code><body></code>.</p> </section> @@ -507,34 +587,39 @@ </div> <div class="row"> - <div class="span3"> - <p>Breadcrumb navigation is used as a way to show users where they are within an app or a site, but not for primary navigation.</p> - </div> - <div class="span9"> + <div class="span6"> + <h3>Why use them</h3> + <p>Breadcrumb navigation is used as a way to show users where they are within an app or a site, but not for primary navigation. Keep their use sparse and succinct to be most effective.</p> + + <h3>Examples</h3> + <p>A single example shown as it might be displayed across multiple pages.</p> <ul class="breadcrumb"> <li class="active">Home</li> </ul> <ul class="breadcrumb"> <li><a href="#">Home</a> <span class="divider">/</span></li> - <li class="active">Middle page</li> - </ul> - <ul class="breadcrumb"> - <li><a href="#">Home</a> <span class="divider">/</span></li> - <li><a href="#">Middle page</a> <span class="divider">/</span></li> - <li class="active">Another one</li> + <li class="active">Library</li> </ul> <ul class="breadcrumb"> <li><a href="#">Home</a> <span class="divider">/</span></li> - <li><a href="#">Middle page</a> <span class="divider">/</span></li> - <li><a href="#">Another one</a> <span class="divider">/</span></li> - <li class="active">You are here</li> + <li><a href="#">Library</a> <span class="divider">/</span></li> + <li class="active">Data</li> </ul> + </div> + <div class="span6"> + <h3>Markup</h3> + <p>HTML is your standard unordered list with links.</p> <pre class="prettyprint linenums"> <ul class="breadcrumb"> - <li><a href="#">Home</a> <span class="divider">/</span></li> - <li><a href="#">Middle page</a> <span class="divider">/</span></li> - <li><a href="#">Another one</a> <span class="divider">/</span></li> - <li class="active">You are here</li> + <li> + <a href="#">Home</a> <span class="divider">/</span> + </li> + <li> + <a href="#">Library</a> <span class="divider">/</span> + </li> + <li class="active"> + <a href="#">Data</a> + </li> </ul> </pre> </div> @@ -545,13 +630,14 @@ <!-- Step nav -================================================== --> +================================================== + +COMMENTED OUT AND NOT SUPPORTED AT THIS TIME. + <section id="stepNav"> <div class="page-header"> <h1>Step nav <small></small></h1> </div> - - <!-- Step nav --> <div class="row"> <div class="span3"> <p>Placeholder for now!</p> @@ -571,8 +657,8 @@ <br> </div> </div> - </section> +--> @@ -682,6 +768,9 @@ </pre> </div> </div><!-- /row --> + + <br> + <!-- Block messages --> <div class="row"> <div class="span3"> diff --git a/docs/index.html b/docs/index.html index 0d340fa1ab..231ed2066b 100644 --- a/docs/index.html +++ b/docs/index.html @@ -106,8 +106,8 @@ <div class="marketing"> - <h1>Built with Bootstrap</h1> - <p class="built-with">For even more sites built with Bootstrap, <a href="http://builtwithbootstrap.tumblr.com/" target="_blank">visit the unofficial Tumblr</a>.</p> + <h1>Built with Bootstrap.</h1> + <p class="marketing-byline">For even more sites built with Bootstrap, <a href="http://builtwithbootstrap.tumblr.com/" target="_blank">visit the unofficial Tumblr</a>.</p> <ul class="thumbnails example-sites"> <li class="span4"> <a class="thumbnail" href="http://kippt.com/" target="_blank"> @@ -126,7 +126,7 @@ </li> </ul> - <h1>Designed for everyone, everywhere</h1> + <h1>Designed for everyone, everywhere.</h1> <div class="row"> <div class="span4"> <img class="icon" src="assets/img/glyphicons/glyphicons_042_group.png"> @@ -200,8 +200,40 @@ <p>Brought to you by an experienced <a href="http://twitter.com/fat">engineer</a> and <a href="http://twitter.com/mdo">designer</a>.</p> </div> </div><!--/row--> - </div> + + <!-- Quickstart options + ================================================== --> + <h1>Get started in no time.</h1> + <p class="marketing-byline">Built for any skill level, Bootstrap fits your workflow and development process.</p> + <table class="bordered-table getting-started"> + <tbody> + <tr> + <td class="quick-start"> + <h3>Hotlink the CSS</h3> + <p>For the quickest and easiest start, just copy this snippet into your webpage.</p> + <form> + <textarea class="copy-code" rows="1"><link rel="stylesheet" href="http://twitter.github.com/bootstrap/assets/css/bootstrap.min.css"></textarea> + </form> + </td> + <td class="quick-start"> + <h3>Use it with LESS</h3> + <p>A fan of using LESS? No problem, just clone the repo and add these lines:</p> + <form> + <textarea class="copy-code" rows="2"><link rel="stylesheet/less" href="/path/to/bootstrap.less"> + <script src="/path/to/less.js"></script></textarea> + </form> + </td> + <td class="quick-start"> + <h3>Fork on GitHub</h3> + <p>Download, fork, pull, file issues, and more with the official Bootstrap repo on Github.</p> + <p><a target="_blank" href="https://github.com/twitter/bootstrap" class="btn primary">Bootstrap on GitHub »</a></p> + <p class="current-version">Currently <a href="https://github.com/twitter/bootstrap/wiki/Changelog">v2.0.0</a></p> + </td> + </tr> + </tbody> + </table> + </div><!-- /.marketing --> </div><!-- /#overview --> diff --git a/docs/less.html b/docs/less.html index 7d3efd296c..05398e9665 100644 --- a/docs/less.html +++ b/docs/less.html @@ -403,8 +403,8 @@ <tr> <td>Node with makefile</td> <td> - <p>Install the less command line compiler with npm by running the following command:</p> - <pre>$ npm install lessc</pre> + <p>Install the LESS command line compiler with npm by running the following command:</p> + <pre>$ npm install less</pre> <p>Once installed just run <code>make</code> from the root of your bootstrap directory and you're all set.</p> <p>Additionally, if you have <a href="https://github.com/mynyml/watchr">watchr</a> installed, you may run <code>make watch</code> to have bootstrap automatically rebuilt every time you edit a file in the bootstrap lib (this isn't required, just a convenience method).</p> </td> @@ -422,7 +422,7 @@ <tr> <td>Command line</td> <td> - <p>If you already have the less command line tool installed, simply run the following command:</p> + <p>Install the LESS command line tool via Node and run the following command:</p> <pre>$ lessc ./lib/bootstrap.less > bootstrap.css</pre> <p>Be sure to include <code>--compress</code> in that command if you're trying to save some bytes!</p> </td> diff --git a/docs/scaffolding.html b/docs/scaffolding.html index 87394006bf..bf42d44687 100644 --- a/docs/scaffolding.html +++ b/docs/scaffolding.html @@ -395,7 +395,6 @@ <dd><a href="./components.html#sidenav">Side nav</a></dd> <dd><a href="./components.html#navbar">Navbar</a></dd> <dd><a href="./components.html#tabspills">Tabs and pills</a></dd> - <dd><a href="./components.html#stepnav">Step nav</a></dd> <dd><a href="./components.html#pagination">Pagination</a></dd> <dd><a href="./components.html#alerts">Alerts and errors</a></dd> <dd><a href="./components.html#modals">Modals</a></dd> diff --git a/docs/upgrading.html b/docs/upgrading.html index 7be1fd7089..c84cba1232 100644 --- a/docs/upgrading.html +++ b/docs/upgrading.html @@ -92,6 +92,9 @@ <li>Typography <ul> <li>Right-aligned option for blockquotes if float: right;</li> + <li><code>h4</code> elements were dropped from 16px to 14px with a default <code>line-height</code> of 18px</li> + <li><code>h5</code> elements were dropped from 14px to 12px</li> + <li><code>h6</code> elements were dropped from 13px to 11px</li> </ul> </li> <li>Buttons diff --git a/lib/forms.less b/lib/forms.less index 938983536e..8b85d240af 100644 --- a/lib/forms.less +++ b/lib/forms.less @@ -137,6 +137,16 @@ textarea { padding-top: 6px; // has to be padding because margin collaspes } +// Radios and checkboxes on same line +.radio.inline, +.checkbox.inline { + display: inline-block; +} +.radio.inline + .radio.inline, +.checkbox.inline + .checkbox.inline { + margin-left: 10px; +} + // FOCUS STATE diff --git a/lib/navbar.less b/lib/navbar.less index a96aa941c1..edc19c641c 100644 --- a/lib/navbar.less +++ b/lib/navbar.less @@ -53,6 +53,11 @@ } } +// Navbar forms +.navbar-form { + margin-bottom: 0; // remove default bottom margin +} + // Navbar search .navbar-search { position: relative; diff --git a/lib/sidenav.less b/lib/sidenav.less index afc5ea1ddf..51f97f44d2 100644 --- a/lib/sidenav.less +++ b/lib/sidenav.less @@ -8,19 +8,22 @@ .side-nav .nav-label, .side-nav .nav-item { display: block; - padding: 3px 16px; + padding: 3px 15px; text-shadow: 0 1px 0 rgba(255,255,255,.5); } .side-nav .nav-label { font-size: 11px; line-height: @baseLineHeight; - color: @grayDark; + color: @grayLight; text-transform: uppercase; } .side-nav .nav-group { - margin: 0 -1px; + margin: 0; // clear default ul margins list-style: none; } +.side-nav .nav-group + .nav-label { + margin-top: 9px; +} .side-nav .nav-item { font-weight: bold; @@ -34,7 +37,7 @@ .side-nav .active .nav-item { color: #fff; text-shadow: 0 -1px 0 rgba(0,0,0,.3); - #gradient > .vertical(#ccc, #aaa); + #gradient > .vertical(#ccc, #999); @shadow: inset 0 1px 0 rgba(0,0,0,.05), inset 0 -1px 0 rgba(0,0,0,.05); .box-shadow(@shadow); } \ No newline at end of file diff --git a/lib/type.less b/lib/type.less index 59dae717fb..4aa6423586 100644 --- a/lib/type.less +++ b/lib/type.less @@ -50,20 +50,20 @@ h3 { font-size: 14px; } } +h4, h5, h6 { + line-height: @baseLineHeight; +} h4 { - font-size: 16px; - line-height: @baseLineHeight * 2; + font-size: 14px; small { font-size: 12px; } } h5 { - font-size: 14px; - line-height: @baseLineHeight; + font-size: 12px; } h6 { - font-size: 13px; - line-height: @baseLineHeight; + font-size: 11px; color: @grayLight; text-transform: uppercase; } -- GitLab From 36e7660383a7639f5d538efb7dc0f349e285b42d Mon Sep 17 00:00:00 2001 From: Mark Otto <markdotto@gmail.com> Date: Sat, 7 Jan 2012 00:26:58 -0800 Subject: [PATCH 196/318] fix forms in navbars, fix examples' navbars --- bootstrap.css | 7 ++++++- bootstrap.min.css | 4 ++-- docs/base-css.html | 1 + examples/container-app.html | 2 +- examples/fluid-reverse.html | 18 +++++++++--------- examples/fluid.html | 10 +++++----- examples/hero.html | 10 +++++----- lib/forms.less | 3 ++- lib/navbar.less | 5 +++++ 9 files changed, 36 insertions(+), 24 deletions(-) diff --git a/bootstrap.css b/bootstrap.css index 85ed7961a3..f10d872acc 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 Jan 6 23:58:33 PST 2012 + * Date: Sat Jan 7 00:24:46 PST 2012 */ html, body { margin: 0; @@ -627,6 +627,7 @@ textarea { } .radio.inline, .checkbox.inline { display: inline-block; + margin-bottom: 0; } .radio.inline + .radio.inline, .checkbox.inline + .checkbox.inline { margin-left: 10px; @@ -1681,6 +1682,10 @@ i { .navbar-form { margin-bottom: 0; } +.navbar-form input, .navbar-form select { + display: inline-block; + margin-bottom: 0; +} .navbar-search { position: relative; float: left; diff --git a/bootstrap.min.css b/bootstrap.min.css index 16f9fb76bd..17d3c4b397 100644 --- a/bootstrap.min.css +++ b/bootstrap.min.css @@ -108,7 +108,7 @@ textarea{height:auto;} .radio,.checkbox{padding-left:18px;} .radio input[type=radio],.checkbox input[type=checkbox]{float:left;margin-left:-18px;} .controls>.radio:first-child,.controls>.checkbox:first-child{padding-top:6px;} -.radio.inline,.checkbox.inline{display:inline-block;} +.radio.inline,.checkbox.inline{display:inline-block;margin-bottom:0;} .radio.inline+.radio.inline,.checkbox.inline+.checkbox.inline{margin-left:10px;} input,textarea{-webkit-box-shadow:inset 0 1px 3px rgba(0, 0, 0, 0.1);-moz-box-shadow:inset 0 1px 3px rgba(0, 0, 0, 0.1);box-shadow:inset 0 1px 3px rgba(0, 0, 0, 0.1);-webkit-transition:border linear 0.2s,box-shadow linear 0.2s;-moz-transition:border linear 0.2s,box-shadow linear 0.2s;-ms-transition:border linear 0.2s,box-shadow linear 0.2s;-o-transition:border linear 0.2s,box-shadow linear 0.2s;transition:border linear 0.2s,box-shadow linear 0.2s;} input:focus,textarea:focus{border-color:rgba(82, 168, 236, 0.8);-webkit-box-shadow:inset 0 1px 3px rgba(0, 0, 0, 0.1),0 0 8px rgba(82, 168, 236, 0.6);-moz-box-shadow:inset 0 1px 3px rgba(0, 0, 0, 0.1),0 0 8px rgba(82, 168, 236, 0.6);box-shadow:inset 0 1px 3px rgba(0, 0, 0, 0.1),0 0 8px rgba(82, 168, 236, 0.6);outline:0;} @@ -287,7 +287,7 @@ i{background-image:url(docs/assets/img/glyphicons-halflings-sprite.png);backgrou .navbar .brand{float:left;display:block;padding:8px 20px 12px;margin-left:-20px;font-size:20px;font-weight:200;line-height:1;color:#ffffff;} .navbar p{margin:0;line-height:40px;}.navbar p a:hover{color:#ffffff;background-color:transparent;} .navbar .btn{margin-top:5px;} -.navbar-form{margin-bottom:0;} +.navbar-form{margin-bottom:0;}.navbar-form input,.navbar-form select{display:inline-block;margin-bottom:0;} .navbar-search{position:relative;float:left;margin-top:6px;margin-bottom:0;}.navbar-search .search-query{padding:4px 9px;font-family:"Helvetica Neue",Helvetica,Arial,sans-serif;font-size:13px;font-weight:normal;line-height:1;color:#ffffff;color:rgba(255, 255, 255, 0.75);background-color:#444;background-color:rgba(255, 255, 255, 0.3);border:1px solid #111;-webkit-box-shadow:inset 0 1px 2px rgba(0, 0, 0, 0.1),0 1px 0px rgba(255, 255, 255, 0.15);-moz-box-shadow:inset 0 1px 2px rgba(0, 0, 0, 0.1),0 1px 0px rgba(255, 255, 255, 0.15);box-shadow:inset 0 1px 2px rgba(0, 0, 0, 0.1),0 1px 0px rgba(255, 255, 255, 0.15);-webkit-transition:none;-moz-transition:none;-ms-transition:none;-o-transition:none;transition:none;}.navbar-search .search-query:-moz-placeholder{color:#eeeeee;} .navbar-search .search-query::-webkit-input-placeholder{color:#eeeeee;} .navbar-search .search-query:hover{color:#ffffff;background-color:#999999;background-color:rgba(255, 255, 255, 0.5);} diff --git a/docs/base-css.html b/docs/base-css.html index cbdf5ea194..cc92bc2217 100644 --- a/docs/base-css.html +++ b/docs/base-css.html @@ -1102,6 +1102,7 @@ <hr> <h3>Checkboxes and radios</h3> <p>Up to v1.4, Bootstrap required extra markup around checkboxes and radios to stack them. Now, it's a simple matter of repeating the <code><label class="checkbox"></code> that wraps the <code><input type="checkbox"></code>.</p> + <p>Inline checkboxes and radios are also supported. Just add <code>.inline</code> to any <code>.checkbox</code> or <code>.radio</code> and you're done.</p> </div> </div> </div><!-- /row --> diff --git a/examples/container-app.html b/examples/container-app.html index 28807bb05e..778bceacf6 100644 --- a/examples/container-app.html +++ b/examples/container-app.html @@ -75,7 +75,7 @@ <body> - <div class="navbar"> + <div class="navbar navbar-fixed"> <div class="navbar-inner"> <div class="container"> <a class="brand" href="#">Project name</a> diff --git a/examples/fluid-reverse.html b/examples/fluid-reverse.html index a32291d46c..8df7311816 100644 --- a/examples/fluid-reverse.html +++ b/examples/fluid-reverse.html @@ -28,7 +28,7 @@ <body> - <div class="navbar"> + <div class="navbar navbar-fixed"> <div class="navbar-inner"> <div class="fluid-container"> <a class="brand" href="#">Project name</a> @@ -78,17 +78,17 @@ <!-- Example row of columns --> <div class="row"> - <div class="span6"> + <div class="span4"> <h2>Heading</h2> - <p>Etiam porta sem malesuada magna mollis euismod. Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit.</p> + <p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. </p> <p><a class="btn" href="#">View details »</a></p> </div> - <div class="span5"> + <div class="span4"> <h2>Heading</h2> <p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. </p> <p><a class="btn" href="#">View details »</a></p> </div> - <div class="span5"> + <div class="span4"> <h2>Heading</h2> <p>Donec sed odio dui. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Vestibulum id ligula porta felis euismod semper. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.</p> <p><a class="btn" href="#">View details »</a></p> @@ -99,17 +99,17 @@ <!-- Example row of columns --> <div class="row"> - <div class="span6"> + <div class="span4"> <h2>Heading</h2> - <p>Etiam porta sem malesuada magna mollis euismod. Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit.</p> + <p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. </p> <p><a class="btn" href="#">View details »</a></p> </div> - <div class="span5"> + <div class="span4"> <h2>Heading</h2> <p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. </p> <p><a class="btn" href="#">View details »</a></p> </div> - <div class="span5"> + <div class="span4"> <h2>Heading</h2> <p>Donec sed odio dui. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Vestibulum id ligula porta felis euismod semper. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.</p> <p><a class="btn" href="#">View details »</a></p> diff --git a/examples/fluid.html b/examples/fluid.html index 3b8bb46a8d..66e07c82ed 100644 --- a/examples/fluid.html +++ b/examples/fluid.html @@ -28,7 +28,7 @@ <body> - <div class="navbar"> + <div class="navbar navbar-fixed"> <div class="navbar-inner"> <div class="fluid-container"> <a class="brand" href="#">Project name</a> @@ -78,9 +78,9 @@ <!-- Example row of columns --> <div class="row"> - <div class="span6"> + <div class="span4"> <h2>Heading</h2> - <p>Etiam porta sem malesuada magna mollis euismod. Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit.</p> + <p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. </p> <p><a class="btn" href="#">View details »</a></p> </div> <div class="span5"> @@ -99,9 +99,9 @@ <!-- Example row of columns --> <div class="row"> - <div class="span6"> + <div class="span4"> <h2>Heading</h2> - <p>Etiam porta sem malesuada magna mollis euismod. Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit.</p> + <p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. </p> <p><a class="btn" href="#">View details »</a></p> </div> <div class="span5"> diff --git a/examples/hero.html b/examples/hero.html index d84eb88434..3a7a539839 100644 --- a/examples/hero.html +++ b/examples/hero.html @@ -28,7 +28,7 @@ <body> - <div class="navbar"> + <div class="navbar navbar-fixed"> <div class="navbar-inner"> <div class="container"> <a class="brand" href="#">Project name</a> @@ -52,17 +52,17 @@ <!-- Example row of columns --> <div class="row"> - <div class="span6"> + <div class="span4"> <h2>Heading</h2> - <p>Etiam porta sem malesuada magna mollis euismod. Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit.</p> + <p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. </p> <p><a class="btn" href="#">View details »</a></p> </div> - <div class="span5"> + <div class="span4"> <h2>Heading</h2> <p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. </p> <p><a class="btn" href="#">View details »</a></p> </div> - <div class="span5"> + <div class="span4"> <h2>Heading</h2> <p>Donec sed odio dui. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Vestibulum id ligula porta felis euismod semper. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.</p> <p><a class="btn" href="#">View details »</a></p> diff --git a/lib/forms.less b/lib/forms.less index 8b85d240af..9e0b843628 100644 --- a/lib/forms.less +++ b/lib/forms.less @@ -141,10 +141,11 @@ textarea { .radio.inline, .checkbox.inline { display: inline-block; + margin-bottom: 0; } .radio.inline + .radio.inline, .checkbox.inline + .checkbox.inline { - margin-left: 10px; + margin-left: 10px; // space out consecutive inline controls } diff --git a/lib/navbar.less b/lib/navbar.less index edc19c641c..516890ba79 100644 --- a/lib/navbar.less +++ b/lib/navbar.less @@ -56,6 +56,11 @@ // Navbar forms .navbar-form { margin-bottom: 0; // remove default bottom margin + input, + select { + display: inline-block; + margin-bottom: 0; + } } // Navbar search -- GitLab From 0cb2866409c674f834f8e0f4e204c3c3331abbcd Mon Sep 17 00:00:00 2001 From: Mark Otto <markdotto@gmail.com> Date: Sat, 7 Jan 2012 00:29:36 -0800 Subject: [PATCH 197/318] fix reponsive 1200+ media query to resolve mismatched gutters and negative margins on the row --- bootstrap.css | 7 +++++-- lib/responsive.less | 5 ++++- 2 files changed, 9 insertions(+), 3 deletions(-) diff --git a/bootstrap.css b/bootstrap.css index f10d872acc..eb338c0385 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: Sat Jan 7 00:24:46 PST 2012 + * Date: Sat Jan 7 00:29:11 PST 2012 */ html, body { margin: 0; @@ -3160,6 +3160,9 @@ a.thumbnail:hover { .container { width: @siteWidth; } + .row { + margin-left: @gridGutterWidth * -1; + } [class*="span"] { margin-left: @gridGutterWidth; } @@ -3193,4 +3196,4 @@ a.thumbnail:hover { .offset12 { .offset(12); } } -*/ +*/ \ No newline at end of file diff --git a/lib/responsive.less b/lib/responsive.less index fe2b7cd49a..4cef89180f 100644 --- a/lib/responsive.less +++ b/lib/responsive.less @@ -205,6 +205,9 @@ .container { width: @siteWidth; } + .row { + margin-left: @gridGutterWidth * -1; + } [class*="span"] { margin-left: @gridGutterWidth; } @@ -238,4 +241,4 @@ .offset12 { .offset(12); } } -*/ +*/ \ No newline at end of file -- GitLab From bcf1136f2c8236cd3fa28eac7e57a9a3fc17d104 Mon Sep 17 00:00:00 2001 From: Mark Otto <markdotto@gmail.com> Date: Sat, 7 Jan 2012 00:47:53 -0800 Subject: [PATCH 198/318] fix form field sizing for selects, document form field grid sizing --- bootstrap.css | 155 ++++++++++++++------------------------- bootstrap.min.css | 43 ++++++----- docs/assets/css/docs.css | 6 +- docs/base-css.html | 9 +++ lib/forms.less | 63 ++++++++++------ 5 files changed, 136 insertions(+), 140 deletions(-) diff --git a/bootstrap.css b/bootstrap.css index eb338c0385..4f086520a5 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: Sat Jan 7 00:29:11 PST 2012 + * Date: Sat Jan 7 00:47:37 PST 2012 */ html, body { margin: 0; @@ -601,8 +601,10 @@ select, input[type=file] { line-height: 27px; } select { - background-color: #ffffff; + width: 220px; + padding: 0; vertical-align: middle; + background-color: #ffffff; } select[multiple], select[size] { height: inherit; @@ -673,133 +675,84 @@ input[type=file]:focus, input[type=checkbox]:focus, select:focus { .input-xxlarge { width: 530px; } -input.span1, -textarea.span1, -select.span1, -.uneditable-input.span1 { +input[class*="span"], +select[class*="span"], +textarea[class*="span"], +.uneditable-input[class*="span"] { float: none; - width: 50px; margin-left: 0; } -input.span2, -textarea.span2, -select.span2, -.uneditable-input.span2 { - float: none; +input.span1, textarea.span1, .uneditable-input.span1 { + width: 50px; +} +input.span2, textarea.span2, .uneditable-input.span2 { width: 130px; - margin-left: 0; } -input.span3, -textarea.span3, -select.span3, -.uneditable-input.span3 { - float: none; +input.span3, textarea.span3, .uneditable-input.span3 { width: 210px; - margin-left: 0; } -input.span4, -textarea.span4, -select.span4, -.uneditable-input.span4 { - float: none; +input.span4, textarea.span4, .uneditable-input.span4 { width: 290px; - margin-left: 0; } -input.span5, -textarea.span5, -select.span5, -.uneditable-input.span5 { - float: none; +input.span5, textarea.span5, .uneditable-input.span5 { width: 370px; - margin-left: 0; } -input.span6, -textarea.span6, -select.span6, -.uneditable-input.span6 { - float: none; +input.span6, textarea.span6, .uneditable-input.span6 { width: 450px; - margin-left: 0; } -input.span7, -textarea.span7, -select.span7, -.uneditable-input.span7 { - float: none; +input.span7, textarea.span7, .uneditable-input.span7 { width: 530px; - margin-left: 0; } -input.span8, -textarea.span8, -select.span8, -.uneditable-input.span8 { - float: none; +input.span8, textarea.span8, .uneditable-input.span8 { width: 610px; - margin-left: 0; } -input.span9, -textarea.span9, -select.span9, -.uneditable-input.span9 { - float: none; +input.span9, textarea.span9, .uneditable-input.span9 { width: 690px; - margin-left: 0; } -input.span10, -textarea.span10, -select.span10, -.uneditable-input.span10 { - float: none; +input.span10, textarea.span10, .uneditable-input.span10 { width: 770px; - margin-left: 0; } -input.span11, -textarea.span11, -select.span11, -.uneditable-input.span11 { - float: none; +input.span11, textarea.span11, .uneditable-input.span11 { width: 850px; - margin-left: 0; } -input.span12, -textarea.span12, -select.span12, -.uneditable-input.span12 { - float: none; +input.span12, textarea.span12, .uneditable-input.span12 { width: 930px; - margin-left: 0; } -input.span13, -textarea.span13, -select.span13, -.uneditable-input.span13 { - float: none; - width: 1010px; - margin-left: 0; +select.span1 { + width: 70px; } -input.span14, -textarea.span14, -select.span14, -.uneditable-input.span14 { - float: none; - width: 1090px; - margin-left: 0; +select.span2 { + width: 150px; } -input.span15, -textarea.span15, -select.span15, -.uneditable-input.span15 { - float: none; - width: 1170px; - margin-left: 0; +select.span3 { + width: 230px; } -input.span16, -textarea.span16, -select.span16, -.uneditable-input.span16 { - float: none; - width: 1250px; - margin-left: 0; +select.span4 { + width: 310px; +} +select.span5 { + width: 390px; +} +select.span6 { + width: 470px; +} +select.span7 { + width: 550px; +} +select.span8 { + width: 630px; +} +select.span9 { + width: 710px; +} +select.span10 { + width: 790px; +} +select.span11 { + width: 870px; +} +select.span12 { + width: 950px; } input[disabled], select[disabled], diff --git a/bootstrap.min.css b/bootstrap.min.css index 17d3c4b397..156efff597 100644 --- a/bootstrap.min.css +++ b/bootstrap.min.css @@ -101,7 +101,7 @@ input[type=image],input[type=checkbox],input[type=radio]{width:auto;height:auto; input[type=file]{padding:initial;line-height:initial;border:initial;background-color:#ffffff;background-color:initial;-webkit-box-shadow:none;-moz-box-shadow:none;box-shadow:none;} input[type=button],input[type=reset],input[type=submit]{width:auto;height:auto;} select,input[type=file]{height:27px;*margin-top:4px;line-height:27px;} -select{background-color:#ffffff;vertical-align:middle;} +select{width:220px;padding:0;vertical-align:middle;background-color:#ffffff;} select[multiple],select[size]{height:inherit;} input[type=image]{-webkit-box-shadow:none;-moz-box-shadow:none;box-shadow:none;} textarea{height:auto;} @@ -119,22 +119,31 @@ input[type=file]:focus,input[type=checkbox]:focus,select:focus{-webkit-box-shado .input-large{width:210px;} .input-xlarge{width:270px;} .input-xxlarge{width:530px;} -input.span1,textarea.span1,select.span1,.uneditable-input.span1{float:none;width:50px;margin-left:0;} -input.span2,textarea.span2,select.span2,.uneditable-input.span2{float:none;width:130px;margin-left:0;} -input.span3,textarea.span3,select.span3,.uneditable-input.span3{float:none;width:210px;margin-left:0;} -input.span4,textarea.span4,select.span4,.uneditable-input.span4{float:none;width:290px;margin-left:0;} -input.span5,textarea.span5,select.span5,.uneditable-input.span5{float:none;width:370px;margin-left:0;} -input.span6,textarea.span6,select.span6,.uneditable-input.span6{float:none;width:450px;margin-left:0;} -input.span7,textarea.span7,select.span7,.uneditable-input.span7{float:none;width:530px;margin-left:0;} -input.span8,textarea.span8,select.span8,.uneditable-input.span8{float:none;width:610px;margin-left:0;} -input.span9,textarea.span9,select.span9,.uneditable-input.span9{float:none;width:690px;margin-left:0;} -input.span10,textarea.span10,select.span10,.uneditable-input.span10{float:none;width:770px;margin-left:0;} -input.span11,textarea.span11,select.span11,.uneditable-input.span11{float:none;width:850px;margin-left:0;} -input.span12,textarea.span12,select.span12,.uneditable-input.span12{float:none;width:930px;margin-left:0;} -input.span13,textarea.span13,select.span13,.uneditable-input.span13{float:none;width:1010px;margin-left:0;} -input.span14,textarea.span14,select.span14,.uneditable-input.span14{float:none;width:1090px;margin-left:0;} -input.span15,textarea.span15,select.span15,.uneditable-input.span15{float:none;width:1170px;margin-left:0;} -input.span16,textarea.span16,select.span16,.uneditable-input.span16{float:none;width:1250px;margin-left:0;} +input[class*="span"],select[class*="span"],textarea[class*="span"],.uneditable-input[class*="span"]{float:none;margin-left:0;} +input.span1,textarea.span1,.uneditable-input.span1{width:50px;} +input.span2,textarea.span2,.uneditable-input.span2{width:130px;} +input.span3,textarea.span3,.uneditable-input.span3{width:210px;} +input.span4,textarea.span4,.uneditable-input.span4{width:290px;} +input.span5,textarea.span5,.uneditable-input.span5{width:370px;} +input.span6,textarea.span6,.uneditable-input.span6{width:450px;} +input.span7,textarea.span7,.uneditable-input.span7{width:530px;} +input.span8,textarea.span8,.uneditable-input.span8{width:610px;} +input.span9,textarea.span9,.uneditable-input.span9{width:690px;} +input.span10,textarea.span10,.uneditable-input.span10{width:770px;} +input.span11,textarea.span11,.uneditable-input.span11{width:850px;} +input.span12,textarea.span12,.uneditable-input.span12{width:930px;} +select.span1{width:70px;} +select.span2{width:150px;} +select.span3{width:230px;} +select.span4{width:310px;} +select.span5{width:390px;} +select.span6{width:470px;} +select.span7{width:550px;} +select.span8{width:630px;} +select.span9{width:710px;} +select.span10{width:790px;} +select.span11{width:870px;} +select.span12{width:950px;} input[disabled],select[disabled],textarea[disabled],input[readonly],select[readonly],textarea[readonly]{background-color:#f5f5f5;border-color:#ddd;cursor:not-allowed;} .control-group.error>label,.control-group.error .help-block,.control-group.error .help-inline{color:#b94a48;} .control-group.error input,.control-group.error textarea{color:#b94a48;border-color:#ee5f5b;}.control-group.error input:focus,.control-group.error textarea:focus{border-color:#e9322d;-webkit-box-shadow:0 0 6px #f8b9b7;-moz-box-shadow:0 0 6px #f8b9b7;box-shadow:0 0 6px #f8b9b7;} diff --git a/docs/assets/css/docs.css b/docs/assets/css/docs.css index 579baad7d9..1180effd12 100644 --- a/docs/assets/css/docs.css +++ b/docs/assets/css/docs.css @@ -456,7 +456,11 @@ form.well { outline: 0; } - +/* For input sizes, make them display block */ +.docs-input-sizes input[type=text] { + display: block; + margin-bottom: 9px; +} /* Icons ------------------------- */ diff --git a/docs/base-css.html b/docs/base-css.html index cc92bc2217..b8a6a2f8de 100644 --- a/docs/base-css.html +++ b/docs/base-css.html @@ -1024,6 +1024,15 @@ <div class="span8"> <form class="horizontal-form"> <legend>Extending form controls</legend> + <fieldset class="control-group"> + <label class="control-label">Form sizes</label> + <div class="controls docs-input-sizes"> + <input class="span2" type="text" name="" placeholder=".span2"> + <input class="span3" type="text" name="" placeholder=".span3"> + <input class="span4" type="text" name="" placeholder=".span4"> + <p class="help-block">Use the same <code>.span*</code> classes from the grid system for input sizes.</p> + </div> + </fieldset> <fieldset class="control-group"> <label class="control-label" for="prependedInput">Prepended text</label> <div class="controls"> diff --git a/lib/forms.less b/lib/forms.less index 9e0b843628..433b1ff987 100644 --- a/lib/forms.less +++ b/lib/forms.less @@ -96,8 +96,10 @@ input[type=file] { // Chrome on Linux and Mobile Safari need background-color select { - background-color: @white; + width: 220px; // default input width + 10px of padding that doesn't get applied + padding: 0; vertical-align: middle; + background-color: @white; } // Make multiple select elements height not fixed @@ -187,33 +189,52 @@ select:focus { .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 -.formColumns(@columnSpan: 1) { +input[class*="span"], +select[class*="span"], +textarea[class*="span"], +.uneditable-input[class*="span"] { float: none; - width: ((@gridColumnWidth) * @columnSpan) + (@gridGutterWidth * (@columnSpan - 1)) - 10; margin-left: 0; } + +// This is a duplication of the main grid .columns() mixin, but subtracts 10px to account for input padding and border +.inputColumns(@columnSpan: 1) { + width: ((@gridColumnWidth) * @columnSpan) + (@gridGutterWidth * (@columnSpan - 1)) - 10; +} input, textarea, -select, .uneditable-input { // Default columns - &.span1 { .formColumns(1); } - &.span2 { .formColumns(2); } - &.span3 { .formColumns(3); } - &.span4 { .formColumns(4); } - &.span5 { .formColumns(5); } - &.span6 { .formColumns(6); } - &.span7 { .formColumns(7); } - &.span8 { .formColumns(8); } - &.span9 { .formColumns(9); } - &.span10 { .formColumns(10); } - &.span11 { .formColumns(11); } - &.span12 { .formColumns(12); } - &.span13 { .formColumns(13); } - &.span14 { .formColumns(14); } - &.span15 { .formColumns(15); } - &.span16 { .formColumns(16); } + &.span1 { .inputColumns(1); } + &.span2 { .inputColumns(2); } + &.span3 { .inputColumns(3); } + &.span4 { .inputColumns(4); } + &.span5 { .inputColumns(5); } + &.span6 { .inputColumns(6); } + &.span7 { .inputColumns(7); } + &.span8 { .inputColumns(8); } + &.span9 { .inputColumns(9); } + &.span10 { .inputColumns(10); } + &.span11 { .inputColumns(11); } + &.span12 { .inputColumns(12); } +} + +.selectColumns(@columnSpan: 1) { + width: ((@gridColumnWidth) * @columnSpan) + (@gridGutterWidth * (@columnSpan - 1)) + 10; +} +select { + &.span1 { .selectColumns(1); } + &.span2 { .selectColumns(2); } + &.span3 { .selectColumns(3); } + &.span4 { .selectColumns(4); } + &.span5 { .selectColumns(5); } + &.span6 { .selectColumns(6); } + &.span7 { .selectColumns(7); } + &.span8 { .selectColumns(8); } + &.span9 { .selectColumns(9); } + &.span10 { .selectColumns(10); } + &.span11 { .selectColumns(11); } + &.span12 { .selectColumns(12); } } -- GitLab From d6a1402f2af5111e11a87a6029b642dc0b814854 Mon Sep 17 00:00:00 2001 From: Mark Otto <markdotto@gmail.com> Date: Sat, 7 Jan 2012 01:03:26 -0800 Subject: [PATCH 199/318] update form shadows and tweak prettyprint styles --- bootstrap.css | 14 +++++++------- bootstrap.min.css | 4 ++-- .../js/google-code-prettify/prettify.css | 18 +++++++++++++++--- docs/base-css.html | 5 +++-- lib/forms.less | 4 ++-- 5 files changed, 29 insertions(+), 16 deletions(-) diff --git a/bootstrap.css b/bootstrap.css index 4f086520a5..a5bdf25940 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: Sat Jan 7 00:47:37 PST 2012 + * Date: Sat Jan 7 00:50:40 PST 2012 */ html, body { margin: 0; @@ -635,9 +635,9 @@ textarea { margin-left: 10px; } input, textarea { - -webkit-box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.1); - -moz-box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.1); - box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.1); + -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.1); + -moz-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.1); + box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.1); -webkit-transition: border linear 0.2s, box-shadow linear 0.2s; -moz-transition: border linear 0.2s, box-shadow linear 0.2s; -ms-transition: border linear 0.2s, box-shadow linear 0.2s; @@ -646,9 +646,9 @@ input, textarea { } input:focus, textarea:focus { border-color: rgba(82, 168, 236, 0.8); - -webkit-box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.1), 0 0 8px rgba(82, 168, 236, 0.6); - -moz-box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.1), 0 0 8px rgba(82, 168, 236, 0.6); - box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.1), 0 0 8px rgba(82, 168, 236, 0.6); + -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.1), 0 0 8px rgba(82, 168, 236, 0.6); + -moz-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.1), 0 0 8px rgba(82, 168, 236, 0.6); + box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.1), 0 0 8px rgba(82, 168, 236, 0.6); outline: 0; } input[type=file]:focus, input[type=checkbox]:focus, select:focus { diff --git a/bootstrap.min.css b/bootstrap.min.css index 156efff597..c0b0bf1049 100644 --- a/bootstrap.min.css +++ b/bootstrap.min.css @@ -110,8 +110,8 @@ textarea{height:auto;} .controls>.radio:first-child,.controls>.checkbox:first-child{padding-top:6px;} .radio.inline,.checkbox.inline{display:inline-block;margin-bottom:0;} .radio.inline+.radio.inline,.checkbox.inline+.checkbox.inline{margin-left:10px;} -input,textarea{-webkit-box-shadow:inset 0 1px 3px rgba(0, 0, 0, 0.1);-moz-box-shadow:inset 0 1px 3px rgba(0, 0, 0, 0.1);box-shadow:inset 0 1px 3px rgba(0, 0, 0, 0.1);-webkit-transition:border linear 0.2s,box-shadow linear 0.2s;-moz-transition:border linear 0.2s,box-shadow linear 0.2s;-ms-transition:border linear 0.2s,box-shadow linear 0.2s;-o-transition:border linear 0.2s,box-shadow linear 0.2s;transition:border linear 0.2s,box-shadow linear 0.2s;} -input:focus,textarea:focus{border-color:rgba(82, 168, 236, 0.8);-webkit-box-shadow:inset 0 1px 3px rgba(0, 0, 0, 0.1),0 0 8px rgba(82, 168, 236, 0.6);-moz-box-shadow:inset 0 1px 3px rgba(0, 0, 0, 0.1),0 0 8px rgba(82, 168, 236, 0.6);box-shadow:inset 0 1px 3px rgba(0, 0, 0, 0.1),0 0 8px rgba(82, 168, 236, 0.6);outline:0;} +input,textarea{-webkit-box-shadow:inset 0 1px 1px rgba(0, 0, 0, 0.1);-moz-box-shadow:inset 0 1px 1px rgba(0, 0, 0, 0.1);box-shadow:inset 0 1px 1px rgba(0, 0, 0, 0.1);-webkit-transition:border linear 0.2s,box-shadow linear 0.2s;-moz-transition:border linear 0.2s,box-shadow linear 0.2s;-ms-transition:border linear 0.2s,box-shadow linear 0.2s;-o-transition:border linear 0.2s,box-shadow linear 0.2s;transition:border linear 0.2s,box-shadow linear 0.2s;} +input:focus,textarea:focus{border-color:rgba(82, 168, 236, 0.8);-webkit-box-shadow:inset 0 1px 1px rgba(0, 0, 0, 0.1),0 0 8px rgba(82, 168, 236, 0.6);-moz-box-shadow:inset 0 1px 1px rgba(0, 0, 0, 0.1),0 0 8px rgba(82, 168, 236, 0.6);box-shadow:inset 0 1px 1px rgba(0, 0, 0, 0.1),0 0 8px rgba(82, 168, 236, 0.6);outline:0;} input[type=file]:focus,input[type=checkbox]:focus,select:focus{-webkit-box-shadow:none;-moz-box-shadow:none;box-shadow:none;outline:1px dotted #666;} .input-mini{width:60px;} .input-small{width:90px;} diff --git a/docs/assets/js/google-code-prettify/prettify.css b/docs/assets/js/google-code-prettify/prettify.css index e3bbf8b6cb..c2031b5940 100644 --- a/docs/assets/js/google-code-prettify/prettify.css +++ b/docs/assets/js/google-code-prettify/prettify.css @@ -21,10 +21,22 @@ pre.prettyprint { padding: 8px; background-color: #f7f7f9; border: 1px solid #e1e1e8; + -webkit-box-shadow: inset 40px 0 0 #fbfbfc, inset 41px 0 0 #ececf0; + -moz-box-shadow: inset 40px 0 0 #fbfbfc, inset 41px 0 0 #ececf0; + box-shadow: inset 40px 0 0 #fbfbfc, inset 41px 0 0 #ececf0; } /* Specify class=linenums on a pre to get line numbering */ -ol.linenums { margin: 0 0 0 40px; } /* IE indents via margin-left */ -ol.linenums li { color: #bebec5; line-height: 18px; text-shadow: 0 1px 0 #fff; } +ol.linenums { + margin: 0 0 0 33px; /* IE indents via margin-left */ +} +ol.linenums li { + padding-left: 7px; + color: #bebec5; + line-height: 18px; + text-shadow: 0 1px 0 #fff; +} /* Alternate shading for lines */ -li.L1, li.L3, li.L5, li.L7, li.L9 { } \ No newline at end of file +li.L1, li.L3, li.L5, li.L7, li.L9 { + +} \ No newline at end of file diff --git a/docs/base-css.html b/docs/base-css.html index b8a6a2f8de..5ae1790f77 100644 --- a/docs/base-css.html +++ b/docs/base-css.html @@ -1009,8 +1009,9 @@ <hr> <h3>Form validation</h3> <p>It also includes validation styles for errors, warnings, and success. To use, add the a class to the surrounding <code>.control-group</code>.</p> -<pre class="prettyprint"> -<fieldset class="control-group error"> +<pre class="prettyprint linenums"> +<fieldset + class="control-group error"> ... </fieldset> </pre> diff --git a/lib/forms.less b/lib/forms.less index 433b1ff987..5e02b7fdec 100644 --- a/lib/forms.less +++ b/lib/forms.less @@ -157,14 +157,14 @@ textarea { input, textarea { - .box-shadow(inset 0 1px 3px rgba(0,0,0,.1)); + .box-shadow(inset 0 1px 1px rgba(0,0,0,.1)); @transition: border linear .2s, box-shadow linear .2s; .transition(@transition); } input:focus, textarea:focus { border-color: rgba(82,168,236,.8); - @shadow: inset 0 1px 3px rgba(0,0,0,.1), 0 0 8px rgba(82,168,236,.6); + @shadow: inset 0 1px 1px rgba(0,0,0,.1), 0 0 8px rgba(82,168,236,.6); .box-shadow(@shadow); outline: 0; } -- GitLab From e23448ab1b2cc627a3cab54406ffce6c915297b6 Mon Sep 17 00:00:00 2001 From: Mark Otto <markdotto@gmail.com> Date: Sat, 7 Jan 2012 01:08:58 -0800 Subject: [PATCH 200/318] make fixed navbars have lower z-index --- bootstrap.css | 4 ++-- bootstrap.min.css | 2 +- lib/navbar.less | 2 +- 3 files changed, 4 insertions(+), 4 deletions(-) diff --git a/bootstrap.css b/bootstrap.css index a5bdf25940..38ce72cba8 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: Sat Jan 7 00:50:40 PST 2012 + * Date: Sat Jan 7 01:08:05 PST 2012 */ html, body { margin: 0; @@ -1702,7 +1702,7 @@ i { top: 0; right: 0; left: 0; - z-index: 10000; + z-index: 999; } .nav { position: relative; diff --git a/bootstrap.min.css b/bootstrap.min.css index c0b0bf1049..353a68ebfe 100644 --- a/bootstrap.min.css +++ b/bootstrap.min.css @@ -303,7 +303,7 @@ i{background-image:url(docs/assets/img/glyphicons-halflings-sprite.png);backgrou .navbar-search .search-query:focus,.navbar-search .search-query.focused{padding:5px 10px;color:#333333;text-shadow:0 1px 0 #ffffff;background-color:#ffffff;border:0;-webkit-box-shadow:0 0 3px rgba(0, 0, 0, 0.15);-moz-box-shadow:0 0 3px rgba(0, 0, 0, 0.15);box-shadow:0 0 3px rgba(0, 0, 0, 0.15);outline:0;} .navbar-static{margin-bottom:18px;} .navbar-static .navbar-inner{padding-left:20px;padding-right:20px;-webkit-border-radius:4px;-moz-border-radius:4px;border-radius:4px;} -.navbar-fixed{position:fixed;top:0;right:0;left:0;z-index:10000;} +.navbar-fixed{position:fixed;top:0;right:0;left:0;z-index:999;} .nav{position:relative;left:0;display:block;float:left;margin:0 10px 0 0;}.nav>li{display:block;float:left;} .nav a{display:block;float:none;padding:10px 10px 11px;line-height:19px;color:#999999;text-decoration:none;text-shadow:0 -1px 0 rgba(0, 0, 0, 0.25);}.nav a:hover{color:#ffffff;text-decoration:none;} .nav .active>a{background-color:#222;background-color:rgba(0, 0, 0, 0.5);} diff --git a/lib/navbar.less b/lib/navbar.less index 516890ba79..9756ce2ca8 100644 --- a/lib/navbar.less +++ b/lib/navbar.less @@ -125,7 +125,7 @@ top: 0; right: 0; left: 0; - z-index: 10000; + z-index: 999; } -- GitLab From 45d671d97f4d448780729bbb6357e9ec776f980c Mon Sep 17 00:00:00 2001 From: Mark Otto <markdotto@gmail.com> Date: Sat, 7 Jan 2012 01:22:52 -0800 Subject: [PATCH 201/318] tweak spacing once more on prettify; add support for uneditable inputs to input-append and prepend --- bootstrap.css | 17 +++++++++++++---- bootstrap.min.css | 8 +++++--- .../assets/js/google-code-prettify/prettify.css | 2 +- docs/base-css.html | 4 ++-- lib/forms.less | 14 +++++++++++--- 5 files changed, 32 insertions(+), 13 deletions(-) diff --git a/bootstrap.css b/bootstrap.css index 38ce72cba8..411bc9c438 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: Sat Jan 7 01:08:05 PST 2012 + * Date: Sat Jan 7 01:22:18 PST 2012 */ html, body { margin: 0; @@ -678,7 +678,7 @@ input[type=file]:focus, input[type=checkbox]:focus, select:focus { input[class*="span"], select[class*="span"], textarea[class*="span"], -.uneditable-input[class*="span"] { +.uneditable-input { float: none; margin-left: 0; } @@ -871,11 +871,17 @@ input::-webkit-input-placeholder { .input-prepend:after, .input-append:after { clear: both; } -.input-prepend input, .input-append input { +.input-prepend input, +.input-append input, +.input-prepend .uneditable-input, +.input-append .uneditable-input { -webkit-border-radius: 0 3px 3px 0; -moz-border-radius: 0 3px 3px 0; border-radius: 0 3px 3px 0; } +.input-prepend .uneditable-input, .input-append .uneditable-input { + border-left-color: #ccc; +} .input-prepend .add-on, .input-append .add-on { float: left; display: block; @@ -904,12 +910,15 @@ input::-webkit-input-placeholder { /* IE6-7 */ } -.input-append input { +.input-append input, .input-append .uneditable-input { float: left; -webkit-border-radius: 3px 0 0 3px; -moz-border-radius: 3px 0 0 3px; border-radius: 3px 0 0 3px; } +.input-append .uneditable-input { + border-right-color: #ccc; +} .input-append .add-on { margin-right: 0; margin-left: -1px; diff --git a/bootstrap.min.css b/bootstrap.min.css index 353a68ebfe..fb036b6a08 100644 --- a/bootstrap.min.css +++ b/bootstrap.min.css @@ -119,7 +119,7 @@ input[type=file]:focus,input[type=checkbox]:focus,select:focus{-webkit-box-shado .input-large{width:210px;} .input-xlarge{width:270px;} .input-xxlarge{width:530px;} -input[class*="span"],select[class*="span"],textarea[class*="span"],.uneditable-input[class*="span"]{float:none;margin-left:0;} +input[class*="span"],select[class*="span"],textarea[class*="span"],.uneditable-input{float:none;margin-left:0;} input.span1,textarea.span1,.uneditable-input.span1{width:50px;} input.span2,textarea.span2,.uneditable-input.span2{width:130px;} input.span3,textarea.span3,.uneditable-input.span3{width:210px;} @@ -162,11 +162,13 @@ input::-webkit-input-placeholder{color:#999999;} .help-inline{*position:relative;*top:-5px;display:inline;padding-left:5px;} .input-prepend,.input-append{margin-bottom:5px;zoom:1;}.input-prepend:before,.input-append:before,.input-prepend:after,.input-append:after{display:table;*display:inline;content:"";zoom:1;} .input-prepend:after,.input-append:after{clear:both;} -.input-prepend input,.input-append input{-webkit-border-radius:0 3px 3px 0;-moz-border-radius:0 3px 3px 0;border-radius:0 3px 3px 0;} +.input-prepend input,.input-append input,.input-prepend .uneditable-input,.input-append .uneditable-input{-webkit-border-radius:0 3px 3px 0;-moz-border-radius:0 3px 3px 0;border-radius:0 3px 3px 0;} +.input-prepend .uneditable-input,.input-append .uneditable-input{border-left-color:#ccc;} .input-prepend .add-on,.input-append .add-on{float:left;display:block;width:auto;min-width:16px;height:18px;margin-right:-1px;padding:4px 4px 4px 5px;font-weight:normal;line-height:18px;color:#999999;text-align:center;text-shadow:0 1px 0 #ffffff;background-color:#f5f5f5;border:1px solid #ccc;-webkit-border-radius:3px 0 0 3px;-moz-border-radius:3px 0 0 3px;border-radius:3px 0 0 3px;} .input-prepend .active,.input-append .active{background-color:#a9dba9;border-color:#46a546;} .input-prepend .add-on{*margin-top:1px;} -.input-append input{float:left;-webkit-border-radius:3px 0 0 3px;-moz-border-radius:3px 0 0 3px;border-radius:3px 0 0 3px;} +.input-append input,.input-append .uneditable-input{float:left;-webkit-border-radius:3px 0 0 3px;-moz-border-radius:3px 0 0 3px;border-radius:3px 0 0 3px;} +.input-append .uneditable-input{border-right-color:#ccc;} .input-append .add-on{margin-right:0;margin-left:-1px;-webkit-border-radius:0 3px 3px 0;-moz-border-radius:0 3px 3px 0;border-radius:0 3px 3px 0;} .search-query{padding-left:14px;padding-right:14px;margin-bottom:0;-webkit-border-radius:14px;-moz-border-radius:14px;border-radius:14px;} .search-form input,.inline-form input,.horizontal-form input,.search-form textarea,.inline-form textarea,.horizontal-form textarea,.search-form select,.inline-form select,.horizontal-form select,.search-form .uneditable-input,.inline-form .uneditable-input,.horizontal-form .uneditable-input{display:inline-block;margin-bottom:0;} diff --git a/docs/assets/js/google-code-prettify/prettify.css b/docs/assets/js/google-code-prettify/prettify.css index c2031b5940..f195124a9b 100644 --- a/docs/assets/js/google-code-prettify/prettify.css +++ b/docs/assets/js/google-code-prettify/prettify.css @@ -31,7 +31,7 @@ ol.linenums { margin: 0 0 0 33px; /* IE indents via margin-left */ } ol.linenums li { - padding-left: 7px; + padding-left: 12px; color: #bebec5; line-height: 18px; text-shadow: 0 1px 0 #fff; diff --git a/docs/base-css.html b/docs/base-css.html index 5ae1790f77..910ea10bb0 100644 --- a/docs/base-css.html +++ b/docs/base-css.html @@ -1039,7 +1039,7 @@ <div class="controls"> <div class="input-prepend"> <span class="add-on">@</span> - <input class="input-small" id="prependedInput" name="prependedInput" size="16" type="text"> + <input class="span2" id="prependedInput" name="prependedInput" size="16" type="text"> </div> <p class="help-block">Here's some help text</p> </div> @@ -1048,7 +1048,7 @@ <label class="control-label" for="appendedInput">Appended text</label> <div class="controls"> <div class="input-append"> - <input class="input-small" id="appendedInput" name="appendedInput" size="16" type="text"> + <input class="span2" id="appendedInput" name="appendedInput" size="16" type="text"> <span class="add-on">.00</span> </div> <p class="help-block">Here's more help text</p> diff --git a/lib/forms.less b/lib/forms.less index 5e02b7fdec..f0b7c2ea66 100644 --- a/lib/forms.less +++ b/lib/forms.less @@ -192,7 +192,7 @@ select:focus { input[class*="span"], select[class*="span"], textarea[class*="span"], -.uneditable-input[class*="span"] { +.uneditable-input { float: none; margin-left: 0; } @@ -357,9 +357,13 @@ input::-webkit-input-placeholder { .input-append { margin-bottom: 5px; .clearfix(); // Clear the float to prevent wrapping - input { + input, + .uneditable-input { .border-radius(0 3px 3px 0); } + .uneditable-input { + border-left-color: #ccc; + } .add-on { float: left; display: block; @@ -388,10 +392,14 @@ input::-webkit-input-placeholder { } } .input-append { - input { + input, + .uneditable-input { float: left; .border-radius(3px 0 0 3px); } + .uneditable-input { + border-right-color: #ccc; + } .add-on { margin-right: 0; margin-left: -1px; -- GitLab From 5fb2c666acfd5e7d2f134d2cb5b65b828102c5a9 Mon Sep 17 00:00:00 2001 From: Mark Otto <markdotto@gmail.com> Date: Sat, 7 Jan 2012 01:59:53 -0800 Subject: [PATCH 202/318] update the fluid examples to use new classes and clear the floats properly from sidebar --- bootstrap.css | 24 ++++++++++++-------- bootstrap.min.css | 11 +++++----- docs/upgrading.html | 5 +++++ examples/fluid-reverse.html | 6 +++-- examples/fluid.html | 44 +++++++++++++++++++------------------ lib/scaffolding.less | 22 ++++++++++--------- 6 files changed, 65 insertions(+), 47 deletions(-) diff --git a/bootstrap.css b/bootstrap.css index 411bc9c438..2f57e5f95c 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: Sat Jan 7 01:22:18 PST 2012 + * Date: Sat Jan 7 01:58:07 PST 2012 */ html, body { margin: 0; @@ -209,21 +209,27 @@ body { .fluid-container:after { clear: both; } -.fluid-sidebar-left, .fluid-sidebar-right { +.fluid-sidebar { width: 220px; + margin: 0 20px 18px; } -.fluid-sidebar-left { +.sidebar-left { + padding-left: 260px; +} +.sidebar-right { + padding-right: 260px; +} +.sidebar-left .fluid-sidebar { float: left; + margin-left: -240px; } -.fluid-sidebar-right { +.sidebar-right .fluid-sidebar { float: right; + margin-right: -240px; } .fluid-content { - margin-left: 240px; -} -.fluid-container.reverse .fluid-content { - margin-left: 0; - margin-right: 240px; + float: left; + width: 100%; } a { font-weight: inherit; diff --git a/bootstrap.min.css b/bootstrap.min.css index fb036b6a08..9996dc3183 100644 --- a/bootstrap.min.css +++ b/bootstrap.min.css @@ -25,11 +25,12 @@ body{margin:0;font-family:"Helvetica Neue",Helvetica,Arial,sans-serif;font-size: .container:after{clear:both;} .fluid-container{position:relative;min-width:940px;padding-left:20px;padding-right:20px;zoom:1;}.fluid-container:before,.fluid-container:after{display:table;*display:inline;content:"";zoom:1;} .fluid-container:after{clear:both;} -.fluid-sidebar-left,.fluid-sidebar-right{width:220px;} -.fluid-sidebar-left{float:left;} -.fluid-sidebar-right{float:right;} -.fluid-content{margin-left:240px;} -.fluid-container.reverse .fluid-content{margin-left:0;margin-right:240px;} +.fluid-sidebar{width:220px;margin:0 20px 18px;} +.sidebar-left{padding-left:260px;} +.sidebar-right{padding-right:260px;} +.sidebar-left .fluid-sidebar{float:left;margin-left:-240px;} +.sidebar-right .fluid-sidebar{float:right;margin-right:-240px;} +.fluid-content{float:left;width:100%;} a{font-weight:inherit;line-height:inherit;color:#0088cc;text-decoration:none;}a:hover{color:#005580;text-decoration:underline;} .pull-right{float:right;} .pull-left{float:left;} diff --git a/docs/upgrading.html b/docs/upgrading.html index c84cba1232..d22fa8c27f 100644 --- a/docs/upgrading.html +++ b/docs/upgrading.html @@ -102,6 +102,11 @@ <li>Added button bar options</li> </ul> </li> + <li>Examples + <ul> + <li>Fluid examples redone. <code>.fluid-container</code> now requires a <code>.sidebar-left</code> or <code>.sidebar-right</code> as well. Fluid sidebar element has a new class, <code>.fluid-sidebar</code>.</li> + </ul> + </li> </ul> <!-- <li> diff --git a/examples/fluid-reverse.html b/examples/fluid-reverse.html index 8df7311816..61aa08de99 100644 --- a/examples/fluid-reverse.html +++ b/examples/fluid-reverse.html @@ -42,8 +42,8 @@ </div> </div> - <div class="fluid-container reverse"> - <div class="fluid-sidebar-right"> + <div class="fluid-container sidebar-right"> + <div class="fluid-sidebar"> <div class="well"> <h5>Sidebar</h5> <ul> @@ -116,6 +116,8 @@ </div> </div> + <hr> + <footer> <p>© Company 2011</p> </footer> diff --git a/examples/fluid.html b/examples/fluid.html index 66e07c82ed..bba78a329b 100644 --- a/examples/fluid.html +++ b/examples/fluid.html @@ -42,29 +42,29 @@ </div> </div> - <div class="fluid-container"> - <div class="fluid-sidebar-left"> - <div class="well"> - <h5>Sidebar</h5> - <ul> - <li><a href="#">Link</a></li> - <li><a href="#">Link</a></li> - <li><a href="#">Link</a></li> - <li><a href="#">Link</a></li> + <div class="fluid-container sidebar-left"> + <div class="fluid-sidebar"> + <div class="well side-nav"> + <h5 class="nav-label">Sidebar</h5> + <ul class="nav-group"> + <li class="active"><a class="nav-item" href="#">Link</a></li> + <li><a class="nav-item" href="#">Link</a></li> + <li><a class="nav-item" href="#">Link</a></li> + <li><a class="nav-item" href="#">Link</a></li> </ul> - <h5>Sidebar</h5> - <ul> - <li><a href="#">Link</a></li> - <li><a href="#">Link</a></li> - <li><a href="#">Link</a></li> - <li><a href="#">Link</a></li> - <li><a href="#">Link</a></li> - <li><a href="#">Link</a></li> + <h5 class="nav-label">Sidebar</h5> + <ul class="nav-group"> + <li><a class="nav-item" href="#">Link</a></li> + <li><a class="nav-item" href="#">Link</a></li> + <li><a class="nav-item" href="#">Link</a></li> + <li><a class="nav-item" href="#">Link</a></li> + <li><a class="nav-item" href="#">Link</a></li> + <li><a class="nav-item" href="#">Link</a></li> </ul> - <h5>Sidebar</h5> - <ul> - <li><a href="#">Link</a></li> - <li><a href="#">Link</a></li> + <h5 class="nav-label">Sidebar</h5> + <ul class="nav-group"> + <li><a class="nav-item" href="#">Link</a></li> + <li><a class="nav-item" href="#">Link</a></li> </ul> </div> </div> @@ -116,6 +116,8 @@ </div> </div> + <hr> + <footer> <p>© Company 2011</p> </footer> diff --git a/lib/scaffolding.less b/lib/scaffolding.less index d75adba56b..f454b2e91d 100644 --- a/lib/scaffolding.less +++ b/lib/scaffolding.less @@ -29,21 +29,23 @@ body { padding-right: 20px; .clearfix(); } + // Sidebars (left and right options) -.fluid-sidebar-left, -.fluid-sidebar-right { +.fluid-sidebar { width: 220px; + margin: 0 20px 18px; } -.fluid-sidebar-left { float: left; } -.fluid-sidebar-right { float: right; } +.sidebar-left { padding-left: 260px; } +.sidebar-right { padding-right: 260px; } + +// Float the sidebars accordingly +.sidebar-left .fluid-sidebar { float: left; margin-left: -240px; } +.sidebar-right .fluid-sidebar { float: right; margin-right: -240px; } + // The main content area .fluid-content { - margin-left: 240px; -} -// Reverse layout for sidebar on right -.fluid-container.reverse .fluid-content { - margin-left: 0; - margin-right: 240px; + float: left; + width: 100%; } -- GitLab From 8ccc3bcf03fedbe8c3a19a96c08a5cad6ae456e8 Mon Sep 17 00:00:00 2001 From: Mark Otto <markdotto@gmail.com> Date: Sat, 7 Jan 2012 03:45:24 -0800 Subject: [PATCH 203/318] overhauled dropdowns now require use of .caret for dropdown arrow, redid the button group docs section, added the split button dropdown docs section --- bootstrap.css | 143 ++++++++++++++++++++++----------------- bootstrap.min.css | 31 +++++---- docs/assets/css/docs.css | 3 +- docs/base-css.html | 142 +++++++++++++++++++++++++++++++++----- docs/javascript.html | 6 +- docs/upgrading.html | 6 ++ lib/button-groups.less | 139 +++++++++++++++++++++++++------------ lib/dropdowns.less | 58 ++++++++-------- lib/type.less | 2 +- 9 files changed, 359 insertions(+), 171 deletions(-) diff --git a/bootstrap.css b/bootstrap.css index 2f57e5f95c..98aec3f27b 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: Sat Jan 7 01:58:07 PST 2012 + * Date: Sat Jan 7 03:37:53 PST 2012 */ html, body { margin: 0; @@ -441,7 +441,7 @@ dl dd { margin-left: 9px; } hr { - margin: 27px 0; + margin: 18px 0; border: 0; border-top: 1px solid #e5e5e5; border-bottom: 1px solid #fff; @@ -1446,23 +1446,25 @@ i { .dropdown { position: relative; } -.dropdown-toggle:after { +.caret { display: inline-block; width: 0; height: 0; - margin-top: 8px; - margin-left: 6px; text-indent: -99999px; vertical-align: top; border-left: 4px solid transparent; border-right: 4px solid transparent; - border-top: 4px solid #ffffff; + border-top: 4px solid #000; filter: alpha(opacity=30); -moz-opacity: 0.3; opacity: 0.3; content: "\2193"; } -.dropdown:hover .dropdown-toggle:after { +.dropdown .caret { + margin-top: 8px; + margin-left: 2px; +} +.dropdown:hover .caret { filter: alpha(opacity=100); -moz-opacity: 1; opacity: 1; @@ -1476,62 +1478,57 @@ i { min-width: 160px; max-width: 220px; _width: 160px; - padding: 6px 0; - margin-left: 0; - margin-right: 0; + padding: 5px 0; + margin: 0; + list-style: none; background-color: #ffffff; border-color: #999; - border-color: rgba(0, 0, 0, 0.2); + border-color: rgba(0, 0, 0, 0.1); 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); + border-width: 1px; + -webkit-border-radius: 0 0 5px 5px; + -moz-border-radius: 0 0 5px 5px; + border-radius: 0 0 5px 5px; + -webkit-box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2); + -moz-box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2); + box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2); -webkit-background-clip: padding-box; - -moz-background-clip: padding-box; + -moz-background-clip: padding; background-clip: padding-box; zoom: 1; } -.dropdown-menu li { - float: none; - display: block; - background-color: none; -} .dropdown-menu .divider { height: 1px; - margin: 5px 0; + margin: 5px 1px; overflow: hidden; - background-color: #eee; + background-color: #e5e5e5; border-bottom: 1px solid #ffffff; } -.topbar .dropdown-menu a, .dropdown-menu a { +.dropdown-menu a { display: block; - padding: 4px 15px; + padding: 2px 15px; clear: both; font-weight: normal; line-height: 18px; color: #555555; - text-shadow: 0 1px 0 #ffffff; } -.topbar .dropdown-menu a:hover, .dropdown-menu a:hover { - color: #333333; +.dropdown-menu a:hover { + color: #fff; text-decoration: none; - background-color: #dddddd; - 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); + text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25); + background-color: #0064cd; + background-image: -khtml-gradient(linear, left top, left bottom, from(#049cdb), to(#0064cd)); + background-image: -moz-linear-gradient(top, #049cdb, #0064cd); + background-image: -ms-linear-gradient(top, #049cdb, #0064cd); + background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #049cdb), color-stop(100%, #0064cd)); + background-image: -webkit-linear-gradient(top, #049cdb, #0064cd); + background-image: -o-linear-gradient(top, #049cdb, #0064cd); + background-image: linear-gradient(top, #049cdb, #0064cd); background-repeat: repeat-x; - filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#eeeeee', endColorstr='#dddddd', GradientType=0); - -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); + filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#049cdb', endColorstr='#0064cd', GradientType=0); + -webkit-box-shadow: inset 0 1px 0 rgba(0, 0, 0, 0.075), inset 0 -1px rgba(0, 0, 0, 0.075); + -moz-box-shadow: inset 0 1px 0 rgba(0, 0, 0, 0.075), inset 0 -1px rgba(0, 0, 0, 0.075); + box-shadow: inset 0 1px 0 rgba(0, 0, 0, 0.075), inset 0 -1px rgba(0, 0, 0, 0.075); } .dropdown.open .dropdown-toggle { color: #ffffff; @@ -2638,23 +2635,8 @@ button.btn::-moz-focus-inner, input[type=submit].btn::-moz-focus-inner { padding: 0; border: 0; } -.btn-toolbar { - zoom: 1; -} -.btn-toolbar:before, .btn-toolbar:after { - display: table; - *display: inline; - content: ""; - zoom: 1; -} -.btn-toolbar:after { - clear: both; -} -.btn-toolbar .btn-group { - float: left; - margin-right: 10px; -} .btn-group { + position: relative; zoom: 1; } .btn-group:before, .btn-group:after { @@ -2666,6 +2648,12 @@ button.btn::-moz-focus-inner, input[type=submit].btn::-moz-focus-inner { .btn-group:after { clear: both; } +.btn-group + .btn-group { + margin-left: 5px; +} +.btn-toolbar .btn-group { + display: inline-block; +} .btn-group .btn { position: relative; float: left; @@ -2683,7 +2671,7 @@ button.btn::-moz-focus-inner, input[type=submit].btn::-moz-focus-inner { -moz-border-radius-bottomleft: 4px; border-bottom-left-radius: 4px; } -.btn-group .btn:last-child { +.btn-group .btn:last-child, .btn-group .dropdown-toggle { -webkit-border-top-right-radius: 4px; -moz-border-radius-topright: 4px; border-top-right-radius: 4px; @@ -2700,7 +2688,7 @@ button.btn::-moz-focus-inner, input[type=submit].btn::-moz-focus-inner { -moz-border-radius-bottomleft: 6px; border-bottom-left-radius: 6px; } -.btn-group .btn.large:last-child { +.btn-group .btn.large:last-child, .btn-group .large.dropdown-toggle { -webkit-border-top-right-radius: 6px; -moz-border-radius-topright: 6px; border-top-right-radius: 6px; @@ -2711,6 +2699,39 @@ button.btn::-moz-focus-inner, input[type=submit].btn::-moz-focus-inner { .btn-group .btn:hover, .btn-group .btn:focus, .btn-group .btn:active { z-index: 2; } +.btn-group .dropdown-toggle { + padding-left: 8px; + padding-right: 8px; + -webkit-box-shadow: inset 1px 0 0 rgba(255, 255, 255, 0.125), 0 1px 2px rgba(0, 0, 0, 0.05); + -moz-box-shadow: inset 1px 0 0 rgba(255, 255, 255, 0.125), 0 1px 2px rgba(0, 0, 0, 0.05); + box-shadow: inset 1px 0 0 rgba(255, 255, 255, 0.125), 0 1px 2px rgba(0, 0, 0, 0.05); +} +.btn-group.open .dropdown-menu { + display: block; + top: 30px; + -webkit-border-radius: 5px; + -moz-border-radius: 5px; + border-radius: 5px; +} +.btn-group.open .dropdown-toggle { + background-image: none; + -webkit-box-shadow: inset 0 1px 6px rgba(0, 0, 0, 0.15), 0 1px 2px rgba(0, 0, 0, 0.05); + -moz-box-shadow: inset 0 1px 6px rgba(0, 0, 0, 0.15), 0 1px 2px rgba(0, 0, 0, 0.05); + box-shadow: inset 0 1px 6px rgba(0, 0, 0, 0.15), 0 1px 2px rgba(0, 0, 0, 0.05); +} +.btn .caret { + margin-top: 6px; + margin-left: 0; +} +.primary .caret, +.danger .caret, +.info .caret, +.success .caret { + border-top-color: #fff; + filter: alpha(opacity=75); + -moz-opacity: 0.75; + opacity: 0.75; +} .alert-message { position: relative; padding: 7px 15px; diff --git a/bootstrap.min.css b/bootstrap.min.css index 9996dc3183..57dd13d555 100644 --- a/bootstrap.min.css +++ b/bootstrap.min.css @@ -80,7 +80,7 @@ ul.unstyled{margin-left:0;list-style:none;} dl{margin-bottom:18px;}dl dt,dl dd{line-height:18px;} dl dt{font-weight:bold;} dl dd{margin-left:9px;} -hr{margin:27px 0;border:0;border-top:1px solid #e5e5e5;border-bottom:1px solid #fff;} +hr{margin:18px 0;border:0;border-top:1px solid #e5e5e5;border-bottom:1px solid #fff;} strong{font-style:inherit;font-weight:bold;} em{font-style:italic;font-weight:inherit;line-height:inherit;} .muted{color:#999999;} @@ -282,11 +282,11 @@ i{background-image:url(docs/assets/img/glyphicons-halflings-sprite.png);backgrou .minus{background-position:-432px -96px;} .asterisk{background-position:-456px -96px;} .dropdown{position:relative;} -.dropdown-toggle:after{display:inline-block;width:0;height:0;margin-top:8px;margin-left:6px;text-indent:-99999px;vertical-align:top;border-left:4px solid transparent;border-right:4px solid transparent;border-top:4px solid #ffffff;filter:alpha(opacity=30);-moz-opacity:0.3;opacity:0.3;content:"\2193";} -.dropdown:hover .dropdown-toggle:after{filter:alpha(opacity=100);-moz-opacity:1;opacity:1;} -.dropdown-menu{position:absolute;top:40px;z-index:900;float:left;display:none;min-width:160px;max-width:220px;_width:160px;padding:6px 0;margin-left:0;margin-right:0;background-color:#ffffff;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;zoom:1;}.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:#555555;text-shadow:0 1px 0 #ffffff;}.topbar .dropdown-menu a:hover,.dropdown-menu a:hover{color:#333333;text-decoration:none;background-color:#dddddd;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);background-repeat:repeat-x;filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#eeeeee', endColorstr='#dddddd', GradientType=0);-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);} +.caret{display:inline-block;width:0;height:0;text-indent:-99999px;vertical-align:top;border-left:4px solid transparent;border-right:4px solid transparent;border-top:4px solid #000;filter:alpha(opacity=30);-moz-opacity:0.3;opacity:0.3;content:"\2193";} +.dropdown .caret{margin-top:8px;margin-left:2px;} +.dropdown:hover .caret{filter:alpha(opacity=100);-moz-opacity:1;opacity:1;} +.dropdown-menu{position:absolute;top:40px;z-index:900;float:left;display:none;min-width:160px;max-width:220px;_width:160px;padding:5px 0;margin:0;list-style:none;background-color:#ffffff;border-color:#999;border-color:rgba(0, 0, 0, 0.1);border-style:solid;border-width:1px;-webkit-border-radius:0 0 5px 5px;-moz-border-radius:0 0 5px 5px;border-radius:0 0 5px 5px;-webkit-box-shadow:0 5px 10px rgba(0, 0, 0, 0.2);-moz-box-shadow:0 5px 10px rgba(0, 0, 0, 0.2);box-shadow:0 5px 10px rgba(0, 0, 0, 0.2);-webkit-background-clip:padding-box;-moz-background-clip:padding;background-clip:padding-box;zoom:1;}.dropdown-menu .divider{height:1px;margin:5px 1px;overflow:hidden;background-color:#e5e5e5;border-bottom:1px solid #ffffff;} +.dropdown-menu a{display:block;padding:2px 15px;clear:both;font-weight:normal;line-height:18px;color:#555555;}.dropdown-menu a:hover{color:#fff;text-decoration:none;text-shadow:0 -1px 0 rgba(0, 0, 0, 0.25);background-color:#0064cd;background-image:-khtml-gradient(linear, left top, left bottom, from(#049cdb), to(#0064cd));background-image:-moz-linear-gradient(top, #049cdb, #0064cd);background-image:-ms-linear-gradient(top, #049cdb, #0064cd);background-image:-webkit-gradient(linear, left top, left bottom, color-stop(0%, #049cdb), color-stop(100%, #0064cd));background-image:-webkit-linear-gradient(top, #049cdb, #0064cd);background-image:-o-linear-gradient(top, #049cdb, #0064cd);background-image:linear-gradient(top, #049cdb, #0064cd);background-repeat:repeat-x;filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#049cdb', endColorstr='#0064cd', GradientType=0);-webkit-box-shadow:inset 0 1px 0 rgba(0, 0, 0, 0.075),inset 0 -1px rgba(0, 0, 0, 0.075);-moz-box-shadow:inset 0 1px 0 rgba(0, 0, 0, 0.075),inset 0 -1px rgba(0, 0, 0, 0.075);box-shadow:inset 0 1px 0 rgba(0, 0, 0, 0.075),inset 0 -1px rgba(0, 0, 0, 0.075);} .dropdown.open .dropdown-toggle{color:#ffffff;background:#ccc;background:rgba(0, 0, 0, 0.3);} .dropdown.open .dropdown-menu{display:block;} .well{min-height:20px;padding:19px;margin-bottom:20px;background-color:#f5f5f5;border:1px solid #eee;border:1px solid rgba(0, 0, 0, 0.05);-webkit-border-radius:4px;-moz-border-radius:4px;border-radius:4px;-webkit-box-shadow:inset 0 1px 1px rgba(0, 0, 0, 0.05);-moz-box-shadow:inset 0 1px 1px rgba(0, 0, 0, 0.05);box-shadow:inset 0 1px 1px rgba(0, 0, 0, 0.05);}.well blockquote{border-color:#ddd;border-color:rgba(0, 0, 0, 0.15);} @@ -421,16 +421,21 @@ i{background-image:url(docs/assets/img/glyphicons-halflings-sprite.png);backgrou .btn.small{padding:7px 9px 7px;font-size:11px;} :root .alert-message,:root .btn{border-radius:0 \0;} button.btn::-moz-focus-inner,input[type=submit].btn::-moz-focus-inner{padding:0;border:0;} -.btn-toolbar{zoom:1;}.btn-toolbar:before,.btn-toolbar:after{display:table;*display:inline;content:"";zoom:1;} -.btn-toolbar:after{clear:both;} -.btn-toolbar .btn-group{float:left;margin-right:10px;} -.btn-group{zoom:1;}.btn-group:before,.btn-group:after{display:table;*display:inline;content:"";zoom:1;} +.btn-group{position:relative;zoom:1;}.btn-group:before,.btn-group:after{display:table;*display:inline;content:"";zoom:1;} .btn-group:after{clear:both;} -.btn-group .btn{position:relative;float:left;margin-left:-1px;-webkit-border-radius:0;-moz-border-radius:0;border-radius:0;}.btn-group .btn:first-child{margin-left:0;-webkit-border-top-left-radius:4px;-moz-border-radius-topleft:4px;border-top-left-radius:4px;-webkit-border-bottom-left-radius:4px;-moz-border-radius-bottomleft:4px;border-bottom-left-radius:4px;} -.btn-group .btn:last-child{-webkit-border-top-right-radius:4px;-moz-border-radius-topright:4px;border-top-right-radius:4px;-webkit-border-bottom-right-radius:4px;-moz-border-radius-bottomright:4px;border-bottom-right-radius:4px;} +.btn-group+.btn-group{margin-left:5px;} +.btn-toolbar .btn-group{display:inline-block;} +.btn-group .btn{position:relative;float:left;margin-left:-1px;-webkit-border-radius:0;-moz-border-radius:0;border-radius:0;} +.btn-group .btn:first-child{margin-left:0;-webkit-border-top-left-radius:4px;-moz-border-radius-topleft:4px;border-top-left-radius:4px;-webkit-border-bottom-left-radius:4px;-moz-border-radius-bottomleft:4px;border-bottom-left-radius:4px;} +.btn-group .btn:last-child,.btn-group .dropdown-toggle{-webkit-border-top-right-radius:4px;-moz-border-radius-topright:4px;border-top-right-radius:4px;-webkit-border-bottom-right-radius:4px;-moz-border-radius-bottomright:4px;border-bottom-right-radius:4px;} .btn-group .btn.large:first-child{margin-left:0;-webkit-border-top-left-radius:6px;-moz-border-radius-topleft:6px;border-top-left-radius:6px;-webkit-border-bottom-left-radius:6px;-moz-border-radius-bottomleft:6px;border-bottom-left-radius:6px;} -.btn-group .btn.large:last-child{-webkit-border-top-right-radius:6px;-moz-border-radius-topright:6px;border-top-right-radius:6px;-webkit-border-bottom-right-radius:6px;-moz-border-radius-bottomright:6px;border-bottom-right-radius:6px;} +.btn-group .btn.large:last-child,.btn-group .large.dropdown-toggle{-webkit-border-top-right-radius:6px;-moz-border-radius-topright:6px;border-top-right-radius:6px;-webkit-border-bottom-right-radius:6px;-moz-border-radius-bottomright:6px;border-bottom-right-radius:6px;} .btn-group .btn:hover,.btn-group .btn:focus,.btn-group .btn:active{z-index:2;} +.btn-group .dropdown-toggle{padding-left:8px;padding-right:8px;-webkit-box-shadow:inset 1px 0 0 rgba(255, 255, 255, 0.125),0 1px 2px rgba(0, 0, 0, 0.05);-moz-box-shadow:inset 1px 0 0 rgba(255, 255, 255, 0.125),0 1px 2px rgba(0, 0, 0, 0.05);box-shadow:inset 1px 0 0 rgba(255, 255, 255, 0.125),0 1px 2px rgba(0, 0, 0, 0.05);} +.btn-group.open .dropdown-menu{display:block;top:30px;-webkit-border-radius:5px;-moz-border-radius:5px;border-radius:5px;} +.btn-group.open .dropdown-toggle{background-image:none;-webkit-box-shadow:inset 0 1px 6px rgba(0, 0, 0, 0.15),0 1px 2px rgba(0, 0, 0, 0.05);-moz-box-shadow:inset 0 1px 6px rgba(0, 0, 0, 0.15),0 1px 2px rgba(0, 0, 0, 0.05);box-shadow:inset 0 1px 6px rgba(0, 0, 0, 0.15),0 1px 2px rgba(0, 0, 0, 0.05);} +.btn .caret{margin-top:6px;margin-left:0;} +.primary .caret,.danger .caret,.info .caret,.success .caret{border-top-color:#fff;filter:alpha(opacity=75);-moz-opacity:0.75;opacity:0.75;} .alert-message{position:relative;padding:7px 15px;margin-bottom:18px;color:#333333;text-shadow:0 1px 0 rgba(255, 255, 255, 0.5);background-color:#eedc94;background-image:-khtml-gradient(linear, left top, left bottom, from(#fceec1), to(#eedc94));background-image:-moz-linear-gradient(top, #fceec1, #eedc94);background-image:-ms-linear-gradient(top, #fceec1, #eedc94);background-image:-webkit-gradient(linear, left top, left bottom, color-stop(0%, #fceec1), color-stop(100%, #eedc94));background-image:-webkit-linear-gradient(top, #fceec1, #eedc94);background-image:-o-linear-gradient(top, #fceec1, #eedc94);background-image:linear-gradient(top, #fceec1, #eedc94);background-repeat:repeat-x;filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#fceec1', endColorstr='#eedc94', GradientType=0);border-color:#eedc94 #eedc94 #e4c652;border-color:rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);border-width:1px;border-style:solid;-webkit-border-radius:4px;-moz-border-radius:4px;border-radius:4px;-webkit-box-shadow:inset 0 1px 0 rgba(255, 255, 255, 0.25);-moz-box-shadow:inset 0 1px 0 rgba(255, 255, 255, 0.25);box-shadow:inset 0 1px 0 rgba(255, 255, 255, 0.25);}.alert-message .close{*margin-top:3px;} .alert-message h5{line-height:18px;} .alert-message p{margin-bottom:0;} diff --git a/docs/assets/css/docs.css b/docs/assets/css/docs.css index 1180effd12..c359cf73ba 100644 --- a/docs/assets/css/docs.css +++ b/docs/assets/css/docs.css @@ -402,7 +402,8 @@ pre.prettyprint { } /* Make tables spaced out a bit more */ -h2 + table { +h2 + table, +h2 + .row { margin-top: 5px; } diff --git a/docs/base-css.html b/docs/base-css.html index 910ea10bb0..5a8b0b2679 100644 --- a/docs/base-css.html +++ b/docs/base-css.html @@ -1203,17 +1203,12 @@ <br> + <h2>Button groups <small>Join buttons for more toolbar-like functionality</small></h2> <div class="row"> <div class="span4"> - <h2>Button groups</h2> - <p>Use button groups to join multiple buttons together as one composite component. Just build them with a series of <code><a></code> or <code><button></code> elements. Button groups can also function as radios and checkboxes (see <a href="./javascript.html#buttons">the Javascript docs</a> for that).</p> - <p>You can also combine sets of button groups into a toolbar for more complex projects.</p> - <p><a class="btn js-btn" href="./javascript.html#buttons">Get the javascript »</a></p> - <p class="muted">Heads up: CSS for button groups is in a separate file, button-groups.less.</p> - </div> - <div class="span8"> - <h3>Linked button group</h3> - <p>Using the standard <code><a class="btn" href="#">...</a></code> markup, simply add all the buttons you need.</p> + <h3>Button groups</h3> + <p>Use button groups to join multiple buttons together as one composite component. Build them with a series of <code><a></code> or <code><button></code> elements.</p> + <p>You can also combine sets of <code><div class="btn-group"></code> into a <code><div class="btn-toolbar"></code> for more complex projects.</p> <div class="well" style="padding: 10px; margin-bottom: 9px;"> <div class="btn-group"> <a class="btn" href="#">Left</a> @@ -1221,7 +1216,6 @@ <a class="btn" href="#">Right</a> </div> </div> - <p>Level up one more time by wrapping multiple instances of <code><div class="btn-group"></code> with <code><div class="btn-toolbar"></code>.</p> <div class="well" style="padding: 10px;"> <div class="btn-toolbar"> <div class="btn-group"> @@ -1229,24 +1223,132 @@ <a class="btn" href="#">2</a> <a class="btn" href="#">3</a> <a class="btn" href="#">4</a> - <a class="btn" href="#">5</a> </div> <div class="btn-group"> + <a class="btn" href="#">5</a> <a class="btn" href="#">6</a> <a class="btn" href="#">7</a> - <a class="btn" href="#">8</a> - </div> - <div class="btn-group"> - <a class="btn" href="#">9</a> </div> <div class="btn-group"> - <a class="btn" href="#">10</a> + <a class="btn" href="#">8</a> </div> </div> </div> + + </div> + <div class="span4"> + <h3>Example markup</h3> + <p>Here's how the HTML looks for a standard button group built with anchor tag buttons:</p> +<pre class="prettyprint linenums"> +<div class="btn-group"> + <a class="btn" href="#">1</a> + <a class="btn" href="#">2</a> + <a class="btn" href="#">3</a> +</div> +</pre> + <p>And with a toolbar for multiple groups:</p> +<pre class="prettyprint linenums"> +<div class="btn-toolbar"> + <div class="btn-group"> + ... + </div> +</div> +</pre> + </div> + <div class="span4"> + <h3>Checkbox and radio flavors</h3> + <p>Button groups can also function as radios, where only one button may be active, or checkboxes, where any number of buttons may be active. View <a href="./javascript.html#buttons">the Javascript docs</a> for that.</p> + <p><a class="btn js-btn" href="./javascript.html#buttons">Get the javascript »</a></p> + <hr> + <h4 class="muted">Heads up</h4> + <p class="muted">CSS for button groups is in a separate file, button-groups.less.</p> + </div> + </div> + + <br> + <h2>Button dropdowns <small>Built on button groups to provide contextual menus</small></h2> + <div class="row"> + <div class="span4"> + <h3>Split button dropdowns</h3> + <p>Building on the button group styles and markup, we can easily create a split button. Split buttons feature a standard action on the left and a dropdown toggle on the right with contextual links.</p> + <div class="well" style="padding: 10px; margin-bottom: 9px;"> + <div class="btn-toolbar" style="margin-bottom: 9px;"> + <div class="btn-group"> + <a class="btn" href="#">Action</a> + <a class="btn dropdown-toggle" data-toggle="dropdown" href="#"><span class="caret"></span></a> + <ul class="dropdown-menu"> + <li><a href="#">Action</a></li> + <li><a href="#">Another action</a></li> + <li><a href="#">Something else here</a></li> + <li class="divider"></li> + <li><a href="#">Separated link</a></li> + </ul> + </div><!-- /btn-group --> + <div class="btn-group"> + <a class="btn primary" href="#">Action</a> + <a class="btn primary dropdown-toggle" data-toggle="dropdown" href="#"><span class="caret"></span></a> + <ul class="dropdown-menu"> + <li><a href="#">Action</a></li> + <li><a href="#">Another action</a></li> + <li><a href="#">Something else here</a></li> + <li class="divider"></li> + <li><a href="#">Separated link</a></li> + </ul> + </div><!-- /btn-group --> + <div class="btn-group"> + <a class="btn danger" href="#">Danger</a> + <a class="btn danger dropdown-toggle" data-toggle="dropdown" href="#"><span class="caret"></span></a> + <ul class="dropdown-menu"> + <li><a href="#">Action</a></li> + <li><a href="#">Another action</a></li> + <li><a href="#">Something else here</a></li> + <li class="divider"></li> + <li><a href="#">Separated link</a></li> + </ul> + </div><!-- /btn-group --> + </div> + <div class="btn-toolbar"> + <div class="btn-group"> + <a class="btn success" href="#">Success</a> + <a class="btn success dropdown-toggle" data-toggle="dropdown" href="#"><span class="caret"></span></a> + <ul class="dropdown-menu"> + <li><a href="#">Action</a></li> + <li><a href="#">Another action</a></li> + <li><a href="#">Something else here</a></li> + <li class="divider"></li> + <li><a href="#">Separated link</a></li> + </ul> + </div><!-- /btn-group --> + <div class="btn-group"> + <a class="btn info" href="#">Info</a> + <a class="btn info dropdown-toggle" data-toggle="dropdown" href="#"><span class="caret"></span></a> + <ul class="dropdown-menu"> + <li><a href="#">Action</a></li> + <li><a href="#">Another action</a></li> + <li><a href="#">Something else here</a></li> + <li class="divider"></li> + <li><a href="#">Separated link</a></li> + </ul> + </div><!-- /btn-group --> + </div> + </div> <!-- /well --> + </div> + <div class="span8"> + <h3>Example markup</h3> + <p>Similar to a button group, our markup uses regular button markup, but with a handful of additions to refine the style and support Bootstrap's dropdown jQuery plugin.</p> +<pre class="prettyprint linenums"> +<div class="btn-group"> + <a class="btn" href="#">Action</a> + <a class="btn dropdown-toggle" data-toggle="dropdown" href="#"> + <span class="caret"></span> + </a> + <ul class="dropdown-menu"> + <!-- dropdown menu links --> + </ul> +</div> +</pre> </div> </div> - </section> @@ -1454,5 +1556,11 @@ <script src="http://code.jquery.com/jquery-1.7.min.js"></script> <script src="assets/js/google-code-prettify/prettify.js"></script> <script src="assets/js/application.js"></script> + <script src="../js/bootstrap-dropdown.js"></script> + <script> + $(function () { + $('.dropdown-toggle').dropdown(); + }) + </script> </body> </html> diff --git a/docs/javascript.html b/docs/javascript.html index 1cba7766f9..4671dd6eb8 100644 --- a/docs/javascript.html +++ b/docs/javascript.html @@ -274,7 +274,7 @@ $('#myModal').on('hidden', function () { <ul class="tabs"> <li class="active"><a href="#">Home</a></li> <li id="secondary" class="dropdown"> - <a href="#secondary" class="dropdown-toggle" data-toggle="dropdown">Dropdown</a> + <a href="#secondary" class="dropdown-toggle" data-toggle="dropdown">Dropdown <span class="caret"></span></a> <ul class="dropdown-menu"> <li><a href="#">Secondary link</a></li> <li><a href="#">Something else here</a></li> @@ -302,7 +302,7 @@ $('#myModal').on('hidden', function () { </form> <ul class="nav secondary-nav"> <li id="fat-menu" class="dropdown"> - <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown 1</a> + <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown 1 <span class="caret"></span></a> <ul class="dropdown-menu"> <li><a href="#">Secondary link</a></li> <li><a href="#">Something else here</a></li> @@ -311,7 +311,7 @@ $('#myModal').on('hidden', function () { </ul> </li> <li id="mdo-menu" class="dropdown"> - <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown 2</a> + <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown 2 <span class="caret"></span></a> <ul class="dropdown-menu"> <li><a href="#">Secondary link</a></li> <li><a href="#">Something else here</a></li> diff --git a/docs/upgrading.html b/docs/upgrading.html index d22fa8c27f..3e7e2c768b 100644 --- a/docs/upgrading.html +++ b/docs/upgrading.html @@ -107,6 +107,12 @@ <li>Fluid examples redone. <code>.fluid-container</code> now requires a <code>.sidebar-left</code> or <code>.sidebar-right</code> as well. Fluid sidebar element has a new class, <code>.fluid-sidebar</code>.</li> </ul> </li> + <li>Dropdown menus + <ul> + <li>Updated the <code>.dropdown-menu</code> to tighten up spacing</li> + <li>Now requires you to add a <code><span class="caret"></span></code> to show the dropdown arrow</li> + </ul> + </li> </ul> <!-- <li> diff --git a/lib/button-groups.less b/lib/button-groups.less index 3024ecd65a..d2307018eb 100644 --- a/lib/button-groups.less +++ b/lib/button-groups.less @@ -1,65 +1,116 @@ // BUTTON GROUPS // ------------- -// Group multiple button groups together for a toolbar + +// Make the div behave like a button +.btn-group { + position: relative; + .clearfix(); // clears the floated buttons +} + +// Space out series of button groups +.btn-group + .btn-group { + margin-left: 5px; +} + +// Optional: Group multiple button groups together for a toolbar .btn-toolbar { - .clearfix(); .btn-group { - float: left; - margin-right: 10px; + display: inline-block; } } -// Clear the float -.btn-group { - .clearfix(); -} // Float them, remove border radius, then re-add to first and last elements .btn-group .btn { position: relative; float: left; margin-left: -1px; .border-radius(0); - // Set corners individual because sometimes a single button can be in a .btn-group and we need :first-child and :last-child to both match - &:first-child { - margin-left: 0; - -webkit-border-top-left-radius: 4px; - -moz-border-radius-topleft: 4px; - border-top-left-radius: 4px; - -webkit-border-bottom-left-radius: 4px; - -moz-border-radius-bottomleft: 4px; - border-bottom-left-radius: 4px; - } - &:last-child { - -webkit-border-top-right-radius: 4px; - -moz-border-radius-topright: 4px; - border-top-right-radius: 4px; - -webkit-border-bottom-right-radius: 4px; - -moz-border-radius-bottomright: 4px; - border-bottom-right-radius: 4px; - } - // Reset corners for large buttons - &.large:first-child { - margin-left: 0; - -webkit-border-top-left-radius: 6px; - -moz-border-radius-topleft: 6px; - border-top-left-radius: 6px; - -webkit-border-bottom-left-radius: 6px; - -moz-border-radius-bottomleft: 6px; - border-bottom-left-radius: 6px; - } - &.large:last-child { - -webkit-border-top-right-radius: 6px; - -moz-border-radius-topright: 6px; - border-top-right-radius: 6px; - -webkit-border-bottom-right-radius: 6px; - -moz-border-radius-bottomright: 6px; - border-bottom-right-radius: 6px; - } } +// Set corners individual because sometimes a single button can be in a .btn-group and we need :first-child and :last-child to both match +.btn-group .btn:first-child { + margin-left: 0; + -webkit-border-top-left-radius: 4px; + -moz-border-radius-topleft: 4px; + border-top-left-radius: 4px; + -webkit-border-bottom-left-radius: 4px; + -moz-border-radius-bottomleft: 4px; + border-bottom-left-radius: 4px; +} +.btn-group .btn:last-child, +.btn-group .dropdown-toggle { + -webkit-border-top-right-radius: 4px; + -moz-border-radius-topright: 4px; + border-top-right-radius: 4px; + -webkit-border-bottom-right-radius: 4px; + -moz-border-radius-bottomright: 4px; + border-bottom-right-radius: 4px; +} +// Reset corners for large buttons +.btn-group .btn.large:first-child { + margin-left: 0; + -webkit-border-top-left-radius: 6px; + -moz-border-radius-topleft: 6px; + border-top-left-radius: 6px; + -webkit-border-bottom-left-radius: 6px; + -moz-border-radius-bottomleft: 6px; + border-bottom-left-radius: 6px; +} +.btn-group .btn.large:last-child, +.btn-group .large.dropdown-toggle { + -webkit-border-top-right-radius: 6px; + -moz-border-radius-topright: 6px; + border-top-right-radius: 6px; + -webkit-border-bottom-right-radius: 6px; + -moz-border-radius-bottomright: 6px; + border-bottom-right-radius: 6px; +} + // On hover/focus/active, bring the proper btn to front .btn-group .btn:hover, .btn-group .btn:focus, .btn-group .btn:active { z-index: 2; } + + +// Split button dropdowns +// ---------------------- + +// Give the line between buttons some depth +.btn-group .dropdown-toggle { + padding-left: 8px; + padding-right: 8px; + @shadow: inset 1px 0 0 rgba(255,255,255,.125), 0 1px 2px rgba(0,0,0,.05); + .box-shadow(@shadow); +} + +// Reposition menu on open and round all corners +.btn-group.open .dropdown-menu { + display: block; + top: 30px; + .border-radius(5px); +} +.btn-group.open .dropdown-toggle { + background-image: none; + @shadow: inset 0 1px 6px rgba(0,0,0,.15), 0 1px 2px rgba(0,0,0,.05); + .box-shadow(@shadow); +} + +// Reposition the caret +.btn .caret { + margin-top: 6px; + margin-left: 0; +} + +// Account for other colors +.primary, +.danger, +.info, +.success { + .caret { + border-top-color: #fff; + .opacity(75); + } +} + diff --git a/lib/dropdowns.less b/lib/dropdowns.less index 18856cf05c..e2bca04ac7 100644 --- a/lib/dropdowns.less +++ b/lib/dropdowns.less @@ -3,22 +3,24 @@ .dropdown { position: relative; } -// The link that is clicked to toggle the dropdown -.dropdown-toggle:after { +// Dropdown arrow/caret +.caret { display: inline-block; width: 0; height: 0; - margin-top: 8px; - margin-left: 6px; text-indent: -99999px; vertical-align: top; - border-left: 4px solid transparent; + border-left: 4px solid transparent; border-right: 4px solid transparent; - border-top: 4px solid @white; + border-top: 4px solid #000; .opacity(30); content: "\2193"; } -.dropdown:hover .dropdown-toggle:after { +.dropdown .caret { + margin-top: 8px; + margin-left: 2px; +} +.dropdown:hover .caret { .opacity(100); } // The dropdown menu (ul) @@ -27,55 +29,49 @@ top: 40px; z-index: 900; float: left; - display: none; // None by default, but block on "open" of the menu + display: none; // none by default, but block on "open" of the menu min-width: 160px; max-width: 220px; _width: 160px; - padding: 6px 0; - margin-left: 0; // override default ul styles - margin-right: 0; + padding: 5px 0; + margin: 0; // override default ul + list-style: none; background-color: @white; border-color: #999; - border-color: rgba(0,0,0,.2); + border-color: rgba(0,0,0,.1); 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); + border-width: 1px; + .border-radius(0 0 5px 5px); + .box-shadow(0 5px 10px rgba(0,0,0,.2)); + -webkit-background-clip: padding-box; + -moz-background-clip: padding; + background-clip: padding-box; zoom: 1; // do we need this? - // Unfloat any li's to make them stack - li { - float: none; - display: block; - background-color: none; - } // Dividers (basically an hr) within the dropdown .divider { height: 1px; - margin: 5px 0; + margin: 5px 1px; overflow: hidden; - background-color: #eee; + background-color: #e5e5e5; border-bottom: 1px solid @white; } -} -.topbar .dropdown-menu, .dropdown-menu { // Links within the dropdown menu a { display: block; - padding: 4px 15px; + padding: 2px 15px; clear: both; font-weight: normal; line-height: 18px; color: @gray; - text-shadow: 0 1px 0 @white; // Hover state &:hover { - color: @grayDark; + color: #fff; text-decoration: none; - #gradient > .vertical(#eeeeee, #dddddd); - @shadow: inset 0 1px 0 rgba(0,0,0,.025), inset 0 -1px rgba(0,0,0,.025); + text-shadow: 0 -1px 0 rgba(0,0,0,.25); + #gradient > .vertical(@blue, @blueDark); + @shadow: inset 0 1px 0 rgba(0,0,0,.075), inset 0 -1px rgba(0,0,0,.075); .box-shadow(@shadow); } } diff --git a/lib/type.less b/lib/type.less index 4aa6423586..32cb094310 100644 --- a/lib/type.less +++ b/lib/type.less @@ -116,7 +116,7 @@ dl { // Horizontal rules hr { - margin: @baseLineHeight * 1.5 0; + margin: @baseLineHeight 0; border: 0; border-top: 1px solid #e5e5e5; border-bottom: 1px solid #fff; -- GitLab From 33dad13014ae2272d3fcf799f114bfcf8256d968 Mon Sep 17 00:00:00 2001 From: Mark Otto <markdotto@gmail.com> Date: Sat, 7 Jan 2012 03:53:20 -0800 Subject: [PATCH 204/318] update fluid layout to use variable for sidebar width --- bootstrap.css | 2 +- lib/scaffolding.less | 10 +++++----- lib/variables.less | 3 +++ 3 files changed, 9 insertions(+), 6 deletions(-) diff --git a/bootstrap.css b/bootstrap.css index 98aec3f27b..8d80b4adff 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: Sat Jan 7 03:37:53 PST 2012 + * Date: Sat Jan 7 03:52:42 PST 2012 */ html, body { margin: 0; diff --git a/lib/scaffolding.less b/lib/scaffolding.less index f454b2e91d..7432e849ba 100644 --- a/lib/scaffolding.less +++ b/lib/scaffolding.less @@ -32,15 +32,15 @@ body { // Sidebars (left and right options) .fluid-sidebar { - width: 220px; + width: @fluidSidebarWidth; margin: 0 20px 18px; } -.sidebar-left { padding-left: 260px; } -.sidebar-right { padding-right: 260px; } +.sidebar-left { padding-left: @fluidSidebarWidth + 40; } +.sidebar-right { padding-right: @fluidSidebarWidth + 40; } // Float the sidebars accordingly -.sidebar-left .fluid-sidebar { float: left; margin-left: -240px; } -.sidebar-right .fluid-sidebar { float: right; margin-right: -240px; } +.sidebar-left .fluid-sidebar { float: left; margin-left: (@fluidSidebarWidth + 20) * -1; } +.sidebar-right .fluid-sidebar { float: right; margin-right: (@fluidSidebarWidth + 20) * -1; } // The main content area .fluid-content { diff --git a/lib/variables.less b/lib/variables.less index 03f1028f85..dfd7733048 100644 --- a/lib/variables.less +++ b/lib/variables.less @@ -43,6 +43,9 @@ @gridGutterWidth: 20px; @siteWidth: (@gridColumns * @gridColumnWidth) + (@gridGutterWidth * (@gridColumns - 1)); +// Fluid width sidebar +@fluidSidebarWidth: 220px; + // THEME VARIABLES // --------------- -- GitLab From 2540caeddd59822cd8f7c805e777adc7504b87b3 Mon Sep 17 00:00:00 2001 From: Mark Otto <markdotto@gmail.com> Date: Sat, 7 Jan 2012 03:58:48 -0800 Subject: [PATCH 205/318] quick stab at fixing modal placement on 480px and down --- bootstrap.css | 5 ++++- bootstrap.min.css | 2 +- lib/responsive.less | 1 + 3 files changed, 6 insertions(+), 2 deletions(-) diff --git a/bootstrap.css b/bootstrap.css index 8d80b4adff..899e61a179 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: Sat Jan 7 03:52:42 PST 2012 + * Date: Sat Jan 7 03:57:28 PST 2012 */ html, body { margin: 0; @@ -2962,6 +2962,9 @@ a.thumbnail:hover { width: auto; margin: 0; } + .modal.fade.in { + top: auto; + } .horizontal-form .control-group > label { float: none; width: auto; diff --git a/bootstrap.min.css b/bootstrap.min.css index 57dd13d555..b038f62461 100644 --- a/bootstrap.min.css +++ b/bootstrap.min.css @@ -473,4 +473,4 @@ a.thumbnail:hover{border-color:#0088cc;-webkit-box-shadow:0 1px 4px rgba(0, 105, .label.success{background-color:#46a546;} .label.notice{background-color:#62cffc;} .hidden{display:none;visibility:hidden;} -@media (max-width: 480px){.modal{width:auto;margin:0;} .horizontal-form .control-group>label{float:none;width:auto;padding-top:0;text-align:left;} .horizontal-form .controls{margin-left:0;} .horizontal-form .control-list{padding-top:0;} .horizontal-form .form-actions{padding-left:0;} .modal{position:fixed;top:20px;left:20px;right:20px;width:auto;}.modal .close{padding:10px;}}@media (max-width: 768px){.container{width:auto;padding:0 20px;} .row{margin-left:0;} .row>[class*="span"]{float:none;display:block;width:auto;margin:0;} .nav{position:absolute;top:0;left:0;width:180px;padding-top:40px;list-style:none;} .nav,.nav>li:last-child a{-webkit-border-radius:0 0 4px 0;-moz-border-radius:0 0 4px 0;border-radius:0 0 4px 0;} .nav>li{float:none;display:none;} .nav>li>a{float:none;background-color:#222;} .nav>.active{display:block;position:absolute;top:0;left:0;} .navbar ul .active>a{background-color:transparent;} .nav>.active a:after{display:inline-block;width:0;height:0;margin-top:8px;margin-left:6px;text-indent:-99999px;vertical-align:top;border-left:4px solid transparent;border-right:4px solid transparent;border-top:4px solid #ffffff;filter:alpha(opacity=100);-moz-opacity:1;opacity:1;content:"↓";} .nav>.active a:hover{background-color:rgba(255, 255, 255, 0.05);}}@media (min-width: 768px) and (max-width: 940px){.container{width:748px;} .span1{width:44px;} .span2{width:108px;} .span3{width:172px;} .span4{width:236px;} .span5{width:300px;} .span6{width:364px;} .span7{width:428px;} .span8{width:492px;} .span9{width:556px;} .span10{width:620px;} .span11{width:684px;} .span12{width:748px;} .offset1{margin-left:64px;} .offset2{margin-left:128px;} .offset3{margin-left:192px;} .offset4{margin-left:256px;} .offset5{margin-left:320px;} .offset6{margin-left:384px;} .offset7{margin-left:448px;} .offset8{margin-left:512px;} .offset9{margin-left:576px;} .offset10{margin-left:640px;} .offset11{margin-left:704px;} .offset12{margin-left:768px;}} +@media (max-width: 480px){.modal{width:auto;margin:0;}.modal.fade.in{top:auto;} .horizontal-form .control-group>label{float:none;width:auto;padding-top:0;text-align:left;} .horizontal-form .controls{margin-left:0;} .horizontal-form .control-list{padding-top:0;} .horizontal-form .form-actions{padding-left:0;} .modal{position:fixed;top:20px;left:20px;right:20px;width:auto;}.modal .close{padding:10px;}}@media (max-width: 768px){.container{width:auto;padding:0 20px;} .row{margin-left:0;} .row>[class*="span"]{float:none;display:block;width:auto;margin:0;} .nav{position:absolute;top:0;left:0;width:180px;padding-top:40px;list-style:none;} .nav,.nav>li:last-child a{-webkit-border-radius:0 0 4px 0;-moz-border-radius:0 0 4px 0;border-radius:0 0 4px 0;} .nav>li{float:none;display:none;} .nav>li>a{float:none;background-color:#222;} .nav>.active{display:block;position:absolute;top:0;left:0;} .navbar ul .active>a{background-color:transparent;} .nav>.active a:after{display:inline-block;width:0;height:0;margin-top:8px;margin-left:6px;text-indent:-99999px;vertical-align:top;border-left:4px solid transparent;border-right:4px solid transparent;border-top:4px solid #ffffff;filter:alpha(opacity=100);-moz-opacity:1;opacity:1;content:"↓";} .nav>.active a:hover{background-color:rgba(255, 255, 255, 0.05);}}@media (min-width: 768px) and (max-width: 940px){.container{width:748px;} .span1{width:44px;} .span2{width:108px;} .span3{width:172px;} .span4{width:236px;} .span5{width:300px;} .span6{width:364px;} .span7{width:428px;} .span8{width:492px;} .span9{width:556px;} .span10{width:620px;} .span11{width:684px;} .span12{width:748px;} .offset1{margin-left:64px;} .offset2{margin-left:128px;} .offset3{margin-left:192px;} .offset4{margin-left:256px;} .offset5{margin-left:320px;} .offset6{margin-left:384px;} .offset7{margin-left:448px;} .offset8{margin-left:512px;} .offset9{margin-left:576px;} .offset10{margin-left:640px;} .offset11{margin-left:704px;} .offset12{margin-left:768px;}} diff --git a/lib/responsive.less b/lib/responsive.less index 4cef89180f..7856121be1 100644 --- a/lib/responsive.less +++ b/lib/responsive.less @@ -22,6 +22,7 @@ .modal { width: auto; margin: 0; + &.fade.in { top: auto; } } // Remove the horizontal form styles -- GitLab From 8bdaf1f36451266064ec460b87a12f21a2caa65b Mon Sep 17 00:00:00 2001 From: Mark Otto <markdotto@gmail.com> Date: Sat, 7 Jan 2012 04:01:09 -0800 Subject: [PATCH 206/318] better ranking of z-indexes for tipsies so they appear above dropdown menus but below fixed topbar --- bootstrap.css | 8 ++++---- bootstrap.min.css | 6 +++--- lib/dropdowns.less | 2 +- lib/popovers.less | 2 +- lib/twipsy.less | 2 +- 5 files changed, 10 insertions(+), 10 deletions(-) diff --git a/bootstrap.css b/bootstrap.css index 899e61a179..187c469181 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: Sat Jan 7 03:57:28 PST 2012 + * Date: Sat Jan 7 04:00:34 PST 2012 */ html, body { margin: 0; @@ -1472,7 +1472,7 @@ i { .dropdown-menu { position: absolute; top: 40px; - z-index: 900; + z-index: 1000; float: left; display: none; min-width: 160px; @@ -2304,7 +2304,7 @@ i { } .twipsy { position: absolute; - z-index: 1000; + z-index: 1005; display: block; visibility: visible; padding: 5px; @@ -2382,7 +2382,7 @@ i { position: absolute; top: 0; left: 0; - z-index: 1000; + z-index: 1005; display: none; padding: 5px; } diff --git a/bootstrap.min.css b/bootstrap.min.css index b038f62461..89d77e783a 100644 --- a/bootstrap.min.css +++ b/bootstrap.min.css @@ -285,7 +285,7 @@ i{background-image:url(docs/assets/img/glyphicons-halflings-sprite.png);backgrou .caret{display:inline-block;width:0;height:0;text-indent:-99999px;vertical-align:top;border-left:4px solid transparent;border-right:4px solid transparent;border-top:4px solid #000;filter:alpha(opacity=30);-moz-opacity:0.3;opacity:0.3;content:"\2193";} .dropdown .caret{margin-top:8px;margin-left:2px;} .dropdown:hover .caret{filter:alpha(opacity=100);-moz-opacity:1;opacity:1;} -.dropdown-menu{position:absolute;top:40px;z-index:900;float:left;display:none;min-width:160px;max-width:220px;_width:160px;padding:5px 0;margin:0;list-style:none;background-color:#ffffff;border-color:#999;border-color:rgba(0, 0, 0, 0.1);border-style:solid;border-width:1px;-webkit-border-radius:0 0 5px 5px;-moz-border-radius:0 0 5px 5px;border-radius:0 0 5px 5px;-webkit-box-shadow:0 5px 10px rgba(0, 0, 0, 0.2);-moz-box-shadow:0 5px 10px rgba(0, 0, 0, 0.2);box-shadow:0 5px 10px rgba(0, 0, 0, 0.2);-webkit-background-clip:padding-box;-moz-background-clip:padding;background-clip:padding-box;zoom:1;}.dropdown-menu .divider{height:1px;margin:5px 1px;overflow:hidden;background-color:#e5e5e5;border-bottom:1px solid #ffffff;} +.dropdown-menu{position:absolute;top:40px;z-index:1000;float:left;display:none;min-width:160px;max-width:220px;_width:160px;padding:5px 0;margin:0;list-style:none;background-color:#ffffff;border-color:#999;border-color:rgba(0, 0, 0, 0.1);border-style:solid;border-width:1px;-webkit-border-radius:0 0 5px 5px;-moz-border-radius:0 0 5px 5px;border-radius:0 0 5px 5px;-webkit-box-shadow:0 5px 10px rgba(0, 0, 0, 0.2);-moz-box-shadow:0 5px 10px rgba(0, 0, 0, 0.2);box-shadow:0 5px 10px rgba(0, 0, 0, 0.2);-webkit-background-clip:padding-box;-moz-background-clip:padding;background-clip:padding-box;zoom:1;}.dropdown-menu .divider{height:1px;margin:5px 1px;overflow:hidden;background-color:#e5e5e5;border-bottom:1px solid #ffffff;} .dropdown-menu a{display:block;padding:2px 15px;clear:both;font-weight:normal;line-height:18px;color:#555555;}.dropdown-menu a:hover{color:#fff;text-decoration:none;text-shadow:0 -1px 0 rgba(0, 0, 0, 0.25);background-color:#0064cd;background-image:-khtml-gradient(linear, left top, left bottom, from(#049cdb), to(#0064cd));background-image:-moz-linear-gradient(top, #049cdb, #0064cd);background-image:-ms-linear-gradient(top, #049cdb, #0064cd);background-image:-webkit-gradient(linear, left top, left bottom, color-stop(0%, #049cdb), color-stop(100%, #0064cd));background-image:-webkit-linear-gradient(top, #049cdb, #0064cd);background-image:-o-linear-gradient(top, #049cdb, #0064cd);background-image:linear-gradient(top, #049cdb, #0064cd);background-repeat:repeat-x;filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#049cdb', endColorstr='#0064cd', GradientType=0);-webkit-box-shadow:inset 0 1px 0 rgba(0, 0, 0, 0.075),inset 0 -1px rgba(0, 0, 0, 0.075);-moz-box-shadow:inset 0 1px 0 rgba(0, 0, 0, 0.075),inset 0 -1px rgba(0, 0, 0, 0.075);box-shadow:inset 0 1px 0 rgba(0, 0, 0, 0.075),inset 0 -1px rgba(0, 0, 0, 0.075);} .dropdown.open .dropdown-toggle{color:#ffffff;background:#ccc;background:rgba(0, 0, 0, 0.3);} .dropdown.open .dropdown-menu{display:block;} @@ -384,7 +384,7 @@ i{background-image:url(docs/assets/img/glyphicons-halflings-sprite.png);backgrou .modal-footer{padding:14px 15px 15px;margin-bottom:0;background-color:#f5f5f5;border-top:1px solid #ddd;-webkit-border-radius:0 0 6px 6px;-moz-border-radius:0 0 6px 6px;border-radius:0 0 6px 6px;-webkit-box-shadow:inset 0 1px 0 #ffffff;-moz-box-shadow:inset 0 1px 0 #ffffff;box-shadow:inset 0 1px 0 #ffffff;zoom:1;}.modal-footer:before,.modal-footer:after{display:table;*display:inline;content:"";zoom:1;} .modal-footer:after{clear:both;} .modal-footer .btn{float:right;margin-left:5px;} -.twipsy{position:absolute;z-index:1000;display:block;visibility:visible;padding:5px;font-size:11px;filter:alpha(opacity=0);-moz-opacity:0;opacity:0;}.twipsy.in{filter:alpha(opacity=80);-moz-opacity:0.8;opacity:0.8;} +.twipsy{position:absolute;z-index:1005;display:block;visibility:visible;padding:5px;font-size:11px;filter:alpha(opacity=0);-moz-opacity:0;opacity:0;}.twipsy.in{filter:alpha(opacity=80);-moz-opacity:0.8;opacity:0.8;} .twipsy.top{margin-top:-2px;} .twipsy.right{margin-left:2px;} .twipsy.bottom{margin-top:2px;} @@ -395,7 +395,7 @@ i{background-image:url(docs/assets/img/glyphicons-halflings-sprite.png);backgrou .twipsy.right .twipsy-arrow{top:50%;left:0;margin-top:-5px;border-top:5px solid transparent;border-bottom:5px solid transparent;border-right:5px solid #000000;} .twipsy-inner{max-width:200px;padding:3px 8px;color:white;text-align:center;text-decoration:none;background-color:#000000;-webkit-border-radius:4px;-moz-border-radius:4px;border-radius:4px;} .twipsy-arrow{position:absolute;width:0;height:0;} -.popover{position:absolute;top:0;left:0;z-index:1000;display:none;padding:5px;}.popover.top{margin-top:-5px;} +.popover{position:absolute;top:0;left:0;z-index:1005;display:none;padding:5px;}.popover.top{margin-top:-5px;} .popover.right{margin-left:5px;} .popover.bottom{margin-top:5px;} .popover.left{margin-left:-5px;} diff --git a/lib/dropdowns.less b/lib/dropdowns.less index e2bca04ac7..a87641d64c 100644 --- a/lib/dropdowns.less +++ b/lib/dropdowns.less @@ -27,7 +27,7 @@ .dropdown-menu { position: absolute; top: 40px; - z-index: 900; + z-index: 1000; float: left; display: none; // none by default, but block on "open" of the menu min-width: 160px; diff --git a/lib/popovers.less b/lib/popovers.less index 5ecde09233..ec91ab9238 100644 --- a/lib/popovers.less +++ b/lib/popovers.less @@ -5,7 +5,7 @@ position: absolute; top: 0; left: 0; - z-index: 1000; + z-index: 1005; display: none; padding: 5px; &.top { margin-top: -5px; } diff --git a/lib/twipsy.less b/lib/twipsy.less index abd0599f4e..9e3cf2f149 100644 --- a/lib/twipsy.less +++ b/lib/twipsy.less @@ -3,7 +3,7 @@ .twipsy { position: absolute; - z-index: 1000; + z-index: 1005; display: block; visibility: visible; padding: 5px; -- GitLab From 5ba7c14afe0fbe1eb9ba18e6a06cc298362ec159 Mon Sep 17 00:00:00 2001 From: Mark Otto <markdotto@gmail.com> Date: Sat, 7 Jan 2012 04:07:53 -0800 Subject: [PATCH 207/318] another quick pass at ranking all zindexes and listing them in variables for quick overview and editing later --- bootstrap.css | 10 +++++----- bootstrap.min.css | 8 ++++---- lib/dropdowns.less | 2 +- lib/modals.less | 2 +- lib/navbar.less | 2 +- lib/popovers.less | 2 +- lib/twipsy.less | 2 +- lib/variables.less | 11 ++++++++++- 8 files changed, 24 insertions(+), 15 deletions(-) diff --git a/bootstrap.css b/bootstrap.css index 187c469181..273cbfa69e 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: Sat Jan 7 04:00:34 PST 2012 + * Date: Sat Jan 7 04:06:22 PST 2012 */ html, body { margin: 0; @@ -1714,7 +1714,7 @@ i { top: 0; right: 0; left: 0; - z-index: 999; + z-index: 1010; } .nav { position: relative; @@ -2219,7 +2219,7 @@ i { right: 0; bottom: 0; left: 0; - z-index: 10000; + z-index: 1020; background-color: #000000; } .modal-backdrop.fade { @@ -2304,7 +2304,7 @@ i { } .twipsy { position: absolute; - z-index: 1005; + z-index: 1000; display: block; visibility: visible; padding: 5px; @@ -2382,7 +2382,7 @@ i { position: absolute; top: 0; left: 0; - z-index: 1005; + z-index: 1020; display: none; padding: 5px; } diff --git a/bootstrap.min.css b/bootstrap.min.css index 89d77e783a..395f287d6b 100644 --- a/bootstrap.min.css +++ b/bootstrap.min.css @@ -306,7 +306,7 @@ i{background-image:url(docs/assets/img/glyphicons-halflings-sprite.png);backgrou .navbar-search .search-query:focus,.navbar-search .search-query.focused{padding:5px 10px;color:#333333;text-shadow:0 1px 0 #ffffff;background-color:#ffffff;border:0;-webkit-box-shadow:0 0 3px rgba(0, 0, 0, 0.15);-moz-box-shadow:0 0 3px rgba(0, 0, 0, 0.15);box-shadow:0 0 3px rgba(0, 0, 0, 0.15);outline:0;} .navbar-static{margin-bottom:18px;} .navbar-static .navbar-inner{padding-left:20px;padding-right:20px;-webkit-border-radius:4px;-moz-border-radius:4px;border-radius:4px;} -.navbar-fixed{position:fixed;top:0;right:0;left:0;z-index:999;} +.navbar-fixed{position:fixed;top:0;right:0;left:0;z-index:1010;} .nav{position:relative;left:0;display:block;float:left;margin:0 10px 0 0;}.nav>li{display:block;float:left;} .nav a{display:block;float:none;padding:10px 10px 11px;line-height:19px;color:#999999;text-decoration:none;text-shadow:0 -1px 0 rgba(0, 0, 0, 0.25);}.nav a:hover{color:#ffffff;text-decoration:none;} .nav .active>a{background-color:#222;background-color:rgba(0, 0, 0, 0.5);} @@ -374,7 +374,7 @@ i{background-image:url(docs/assets/img/glyphicons-halflings-sprite.png);backgrou .pagination .disabled a,.pagination .disabled a:hover{color:#999999;background-color:transparent;cursor:default;} .pagination .next a{border:0;} .pagination.centered{text-align:center;} -.modal-backdrop{position:fixed;top:0;right:0;bottom:0;left:0;z-index:10000;background-color:#000000;}.modal-backdrop.fade{opacity:0;} +.modal-backdrop{position:fixed;top:0;right:0;bottom:0;left:0;z-index:1020;background-color:#000000;}.modal-backdrop.fade{opacity:0;} .modal-backdrop,.modal-backdrop.fade.in{filter:alpha(opacity=80);-moz-opacity:0.8;opacity:0.8;} .modal{position:fixed;top:50%;left:50%;z-index:11000;max-height:500px;overflow:auto;width:560px;margin:-250px 0 0 -250px;background-color:#ffffff;border:1px solid #999;border:1px solid rgba(0, 0, 0, 0.3);*border:1px solid #999;-webkit-border-radius:6px;-moz-border-radius:6px;border-radius:6px;-webkit-box-shadow:0 3px 7px rgba(0, 0, 0, 0.3);-moz-box-shadow:0 3px 7px rgba(0, 0, 0, 0.3);box-shadow:0 3px 7px rgba(0, 0, 0, 0.3);-webkit-background-clip:padding-box;-moz-background-clip:padding-box;background-clip:padding-box;}.modal .close{margin-top:7px;} .modal.fade{-webkit-transition:opacity .3s linear, top .3s ease-out;-moz-transition:opacity .3s linear, top .3s ease-out;-ms-transition:opacity .3s linear, top .3s ease-out;-o-transition:opacity .3s linear, top .3s ease-out;transition:opacity .3s linear, top .3s ease-out;top:-25%;} @@ -384,7 +384,7 @@ i{background-image:url(docs/assets/img/glyphicons-halflings-sprite.png);backgrou .modal-footer{padding:14px 15px 15px;margin-bottom:0;background-color:#f5f5f5;border-top:1px solid #ddd;-webkit-border-radius:0 0 6px 6px;-moz-border-radius:0 0 6px 6px;border-radius:0 0 6px 6px;-webkit-box-shadow:inset 0 1px 0 #ffffff;-moz-box-shadow:inset 0 1px 0 #ffffff;box-shadow:inset 0 1px 0 #ffffff;zoom:1;}.modal-footer:before,.modal-footer:after{display:table;*display:inline;content:"";zoom:1;} .modal-footer:after{clear:both;} .modal-footer .btn{float:right;margin-left:5px;} -.twipsy{position:absolute;z-index:1005;display:block;visibility:visible;padding:5px;font-size:11px;filter:alpha(opacity=0);-moz-opacity:0;opacity:0;}.twipsy.in{filter:alpha(opacity=80);-moz-opacity:0.8;opacity:0.8;} +.twipsy{position:absolute;z-index:1000;display:block;visibility:visible;padding:5px;font-size:11px;filter:alpha(opacity=0);-moz-opacity:0;opacity:0;}.twipsy.in{filter:alpha(opacity=80);-moz-opacity:0.8;opacity:0.8;} .twipsy.top{margin-top:-2px;} .twipsy.right{margin-left:2px;} .twipsy.bottom{margin-top:2px;} @@ -395,7 +395,7 @@ i{background-image:url(docs/assets/img/glyphicons-halflings-sprite.png);backgrou .twipsy.right .twipsy-arrow{top:50%;left:0;margin-top:-5px;border-top:5px solid transparent;border-bottom:5px solid transparent;border-right:5px solid #000000;} .twipsy-inner{max-width:200px;padding:3px 8px;color:white;text-align:center;text-decoration:none;background-color:#000000;-webkit-border-radius:4px;-moz-border-radius:4px;border-radius:4px;} .twipsy-arrow{position:absolute;width:0;height:0;} -.popover{position:absolute;top:0;left:0;z-index:1005;display:none;padding:5px;}.popover.top{margin-top:-5px;} +.popover{position:absolute;top:0;left:0;z-index:1020;display:none;padding:5px;}.popover.top{margin-top:-5px;} .popover.right{margin-left:5px;} .popover.bottom{margin-top:5px;} .popover.left{margin-left:-5px;} diff --git a/lib/dropdowns.less b/lib/dropdowns.less index a87641d64c..fc333a4cd1 100644 --- a/lib/dropdowns.less +++ b/lib/dropdowns.less @@ -27,7 +27,7 @@ .dropdown-menu { position: absolute; top: 40px; - z-index: 1000; + z-index: @zindexDropdowns; float: left; display: none; // none by default, but block on "open" of the menu min-width: 160px; diff --git a/lib/modals.less b/lib/modals.less index 96f9a488ec..8183194b74 100644 --- a/lib/modals.less +++ b/lib/modals.less @@ -7,7 +7,7 @@ right: 0; bottom: 0; left: 0; - z-index: 10000; + z-index: @zindexPopover; background-color: @black; // Fade for backdrop &.fade { opacity: 0; } diff --git a/lib/navbar.less b/lib/navbar.less index 9756ce2ca8..90ff786767 100644 --- a/lib/navbar.less +++ b/lib/navbar.less @@ -125,7 +125,7 @@ top: 0; right: 0; left: 0; - z-index: 999; + z-index: @zindexFixedNavbar; } diff --git a/lib/popovers.less b/lib/popovers.less index ec91ab9238..9ecdf5fd98 100644 --- a/lib/popovers.less +++ b/lib/popovers.less @@ -5,7 +5,7 @@ position: absolute; top: 0; left: 0; - z-index: 1005; + z-index: @zindexPopover; display: none; padding: 5px; &.top { margin-top: -5px; } diff --git a/lib/twipsy.less b/lib/twipsy.less index 9e3cf2f149..7eaa7d5bfd 100644 --- a/lib/twipsy.less +++ b/lib/twipsy.less @@ -3,7 +3,7 @@ .twipsy { position: absolute; - z-index: 1005; + z-index: @zindexTwipsy; display: block; visibility: visible; padding: 5px; diff --git a/lib/variables.less b/lib/variables.less index dfd7733048..3db5839b0e 100644 --- a/lib/variables.less +++ b/lib/variables.less @@ -44,7 +44,16 @@ @siteWidth: (@gridColumns * @gridColumnWidth) + (@gridGutterWidth * (@gridColumns - 1)); // Fluid width sidebar -@fluidSidebarWidth: 220px; +@fluidSidebarWidth: 220px; + + +// Z-INDEX +// ------- +@zindexDropdowns: 1000; +@zindexTwipsy: 1000; +@zindexFixedNavbar: 1010; +@zindexPopover: 1020; +@zindexModal: 1030; // THEME VARIABLES -- GitLab From e594107f37ede1ea8bee05d8f4b22aeba89bf458 Mon Sep 17 00:00:00 2001 From: Mark Otto <markdotto@gmail.com> Date: Sat, 7 Jan 2012 04:17:33 -0800 Subject: [PATCH 208/318] change up the z-indexing and add some popover/twipsy content to the test modal on the js docs to help avoid future bugs --- bootstrap.css | 8 ++++---- bootstrap.min.css | 6 +++--- docs/javascript.html | 10 +++++++++- lib/dropdowns.less | 2 +- lib/modals.less | 4 ++-- lib/variables.less | 11 ++++++----- 6 files changed, 25 insertions(+), 16 deletions(-) diff --git a/bootstrap.css b/bootstrap.css index 273cbfa69e..0b6a411184 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: Sat Jan 7 04:06:22 PST 2012 + * Date: Sat Jan 7 04:15:19 PST 2012 */ html, body { margin: 0; @@ -2234,7 +2234,7 @@ i { position: fixed; top: 50%; left: 50%; - z-index: 11000; + z-index: 1030; max-height: 500px; overflow: auto; width: 560px; @@ -2304,7 +2304,7 @@ i { } .twipsy { position: absolute; - z-index: 1000; + z-index: 1050; display: block; visibility: visible; padding: 5px; @@ -2382,7 +2382,7 @@ i { position: absolute; top: 0; left: 0; - z-index: 1020; + z-index: 1040; display: none; padding: 5px; } diff --git a/bootstrap.min.css b/bootstrap.min.css index 395f287d6b..eeec05c161 100644 --- a/bootstrap.min.css +++ b/bootstrap.min.css @@ -376,7 +376,7 @@ i{background-image:url(docs/assets/img/glyphicons-halflings-sprite.png);backgrou .pagination.centered{text-align:center;} .modal-backdrop{position:fixed;top:0;right:0;bottom:0;left:0;z-index:1020;background-color:#000000;}.modal-backdrop.fade{opacity:0;} .modal-backdrop,.modal-backdrop.fade.in{filter:alpha(opacity=80);-moz-opacity:0.8;opacity:0.8;} -.modal{position:fixed;top:50%;left:50%;z-index:11000;max-height:500px;overflow:auto;width:560px;margin:-250px 0 0 -250px;background-color:#ffffff;border:1px solid #999;border:1px solid rgba(0, 0, 0, 0.3);*border:1px solid #999;-webkit-border-radius:6px;-moz-border-radius:6px;border-radius:6px;-webkit-box-shadow:0 3px 7px rgba(0, 0, 0, 0.3);-moz-box-shadow:0 3px 7px rgba(0, 0, 0, 0.3);box-shadow:0 3px 7px rgba(0, 0, 0, 0.3);-webkit-background-clip:padding-box;-moz-background-clip:padding-box;background-clip:padding-box;}.modal .close{margin-top:7px;} +.modal{position:fixed;top:50%;left:50%;z-index:1030;max-height:500px;overflow:auto;width:560px;margin:-250px 0 0 -250px;background-color:#ffffff;border:1px solid #999;border:1px solid rgba(0, 0, 0, 0.3);*border:1px solid #999;-webkit-border-radius:6px;-moz-border-radius:6px;border-radius:6px;-webkit-box-shadow:0 3px 7px rgba(0, 0, 0, 0.3);-moz-box-shadow:0 3px 7px rgba(0, 0, 0, 0.3);box-shadow:0 3px 7px rgba(0, 0, 0, 0.3);-webkit-background-clip:padding-box;-moz-background-clip:padding-box;background-clip:padding-box;}.modal .close{margin-top:7px;} .modal.fade{-webkit-transition:opacity .3s linear, top .3s ease-out;-moz-transition:opacity .3s linear, top .3s ease-out;-ms-transition:opacity .3s linear, top .3s ease-out;-o-transition:opacity .3s linear, top .3s ease-out;transition:opacity .3s linear, top .3s ease-out;top:-25%;} .modal.fade.in{top:50%;} .modal-header{padding:5px 15px;border-bottom:1px solid #eee;} @@ -384,7 +384,7 @@ i{background-image:url(docs/assets/img/glyphicons-halflings-sprite.png);backgrou .modal-footer{padding:14px 15px 15px;margin-bottom:0;background-color:#f5f5f5;border-top:1px solid #ddd;-webkit-border-radius:0 0 6px 6px;-moz-border-radius:0 0 6px 6px;border-radius:0 0 6px 6px;-webkit-box-shadow:inset 0 1px 0 #ffffff;-moz-box-shadow:inset 0 1px 0 #ffffff;box-shadow:inset 0 1px 0 #ffffff;zoom:1;}.modal-footer:before,.modal-footer:after{display:table;*display:inline;content:"";zoom:1;} .modal-footer:after{clear:both;} .modal-footer .btn{float:right;margin-left:5px;} -.twipsy{position:absolute;z-index:1000;display:block;visibility:visible;padding:5px;font-size:11px;filter:alpha(opacity=0);-moz-opacity:0;opacity:0;}.twipsy.in{filter:alpha(opacity=80);-moz-opacity:0.8;opacity:0.8;} +.twipsy{position:absolute;z-index:1050;display:block;visibility:visible;padding:5px;font-size:11px;filter:alpha(opacity=0);-moz-opacity:0;opacity:0;}.twipsy.in{filter:alpha(opacity=80);-moz-opacity:0.8;opacity:0.8;} .twipsy.top{margin-top:-2px;} .twipsy.right{margin-left:2px;} .twipsy.bottom{margin-top:2px;} @@ -395,7 +395,7 @@ i{background-image:url(docs/assets/img/glyphicons-halflings-sprite.png);backgrou .twipsy.right .twipsy-arrow{top:50%;left:0;margin-top:-5px;border-top:5px solid transparent;border-bottom:5px solid transparent;border-right:5px solid #000000;} .twipsy-inner{max-width:200px;padding:3px 8px;color:white;text-align:center;text-decoration:none;background-color:#000000;-webkit-border-radius:4px;-moz-border-radius:4px;border-radius:4px;} .twipsy-arrow{position:absolute;width:0;height:0;} -.popover{position:absolute;top:0;left:0;z-index:1020;display:none;padding:5px;}.popover.top{margin-top:-5px;} +.popover{position:absolute;top:0;left:0;z-index:1040;display:none;padding:5px;}.popover.top{margin-top:-5px;} .popover.right{margin-left:5px;} .popover.bottom{margin-top:5px;} .popover.left{margin-left:-5px;} diff --git a/docs/javascript.html b/docs/javascript.html index 4671dd6eb8..0aebf8609a 100644 --- a/docs/javascript.html +++ b/docs/javascript.html @@ -235,7 +235,14 @@ $('#myModal').on('hidden', function () { <h3>Modal Heading</h3> </div> <div class="modal-body"> - <p>One fine body…</p> + <h4>Text in a modal</h4> + <p>Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem.</p> + + <h4>Popover in a modal</h4> + <p>This <a href="#" class="btn" rel="popover" title="A Title" data-content="And here's some amazing content. It's very engaging. right?">button</a> should trigger a popover on hover.</p> + + <h4>Twipsy tooltips in a modal</h4> + <p><a href="#" class="twipsy-test" title="Tooltip">This link</a> and <a href="#" class="twipsy-test" title="Tooltip">that link</a> should have Twipsy tooltips on hover.</p> </div> <div class="modal-footer"> <a href="#" class="btn primary">Save changes</a> @@ -1144,6 +1151,7 @@ $('.myCarousel').carousel({ $('.twipsy-demo.well').twipsy({ selector: "a[rel=twipsy]" }) + $('.twipsy-test').twipsy() // popover demo $("a[rel=popover]") diff --git a/lib/dropdowns.less b/lib/dropdowns.less index fc333a4cd1..00c686dc22 100644 --- a/lib/dropdowns.less +++ b/lib/dropdowns.less @@ -27,7 +27,7 @@ .dropdown-menu { position: absolute; top: 40px; - z-index: @zindexDropdowns; + z-index: @zindexDropdown; float: left; display: none; // none by default, but block on "open" of the menu min-width: 160px; diff --git a/lib/modals.less b/lib/modals.less index 8183194b74..dbac5ff87d 100644 --- a/lib/modals.less +++ b/lib/modals.less @@ -7,7 +7,7 @@ right: 0; bottom: 0; left: 0; - z-index: @zindexPopover; + z-index: @zindexModalBackdrop; background-color: @black; // Fade for backdrop &.fade { opacity: 0; } @@ -22,7 +22,7 @@ position: fixed; top: 50%; left: 50%; - z-index: 11000; + z-index: @zindexModal; max-height: 500px; overflow: auto; width: 560px; diff --git a/lib/variables.less b/lib/variables.less index 3db5839b0e..37f5adb71d 100644 --- a/lib/variables.less +++ b/lib/variables.less @@ -49,11 +49,12 @@ // Z-INDEX // ------- -@zindexDropdowns: 1000; -@zindexTwipsy: 1000; -@zindexFixedNavbar: 1010; -@zindexPopover: 1020; -@zindexModal: 1030; +@zindexDropdown: 1000; +@zindexFixedNavbar: 1010; +@zindexModalBackdrop: 1020; +@zindexModal: 1030; +@zindexPopover: 1040; +@zindexTwipsy: 1050; // THEME VARIABLES -- GitLab From b6d50c892d6ae8ed42ff0bfbba4252c7dc47417e Mon Sep 17 00:00:00 2001 From: Mark Otto <markdotto@gmail.com> Date: Sat, 7 Jan 2012 04:20:56 -0800 Subject: [PATCH 209/318] scope close icon in modal to modal-header to allow alerts in modals to use close icons --- bootstrap.css | 8 ++++---- bootstrap.min.css | 5 ++--- lib/modals.less | 3 ++- 3 files changed, 8 insertions(+), 8 deletions(-) diff --git a/bootstrap.css b/bootstrap.css index 0b6a411184..54c1b06514 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: Sat Jan 7 04:15:19 PST 2012 + * Date: Sat Jan 7 04:20:37 PST 2012 */ html, body { margin: 0; @@ -2255,9 +2255,6 @@ i { -moz-background-clip: padding-box; background-clip: padding-box; } -.modal .close { - margin-top: 7px; -} .modal.fade { -webkit-transition: opacity .3s linear, top .3s ease-out; -moz-transition: opacity .3s linear, top .3s ease-out; @@ -2273,6 +2270,9 @@ i { padding: 5px 15px; border-bottom: 1px solid #eee; } +.modal-header .close { + margin-top: 7px; +} .modal-body { padding: 15px; } diff --git a/bootstrap.min.css b/bootstrap.min.css index eeec05c161..2f0839b931 100644 --- a/bootstrap.min.css +++ b/bootstrap.min.css @@ -376,10 +376,9 @@ i{background-image:url(docs/assets/img/glyphicons-halflings-sprite.png);backgrou .pagination.centered{text-align:center;} .modal-backdrop{position:fixed;top:0;right:0;bottom:0;left:0;z-index:1020;background-color:#000000;}.modal-backdrop.fade{opacity:0;} .modal-backdrop,.modal-backdrop.fade.in{filter:alpha(opacity=80);-moz-opacity:0.8;opacity:0.8;} -.modal{position:fixed;top:50%;left:50%;z-index:1030;max-height:500px;overflow:auto;width:560px;margin:-250px 0 0 -250px;background-color:#ffffff;border:1px solid #999;border:1px solid rgba(0, 0, 0, 0.3);*border:1px solid #999;-webkit-border-radius:6px;-moz-border-radius:6px;border-radius:6px;-webkit-box-shadow:0 3px 7px rgba(0, 0, 0, 0.3);-moz-box-shadow:0 3px 7px rgba(0, 0, 0, 0.3);box-shadow:0 3px 7px rgba(0, 0, 0, 0.3);-webkit-background-clip:padding-box;-moz-background-clip:padding-box;background-clip:padding-box;}.modal .close{margin-top:7px;} -.modal.fade{-webkit-transition:opacity .3s linear, top .3s ease-out;-moz-transition:opacity .3s linear, top .3s ease-out;-ms-transition:opacity .3s linear, top .3s ease-out;-o-transition:opacity .3s linear, top .3s ease-out;transition:opacity .3s linear, top .3s ease-out;top:-25%;} +.modal{position:fixed;top:50%;left:50%;z-index:1030;max-height:500px;overflow:auto;width:560px;margin:-250px 0 0 -250px;background-color:#ffffff;border:1px solid #999;border:1px solid rgba(0, 0, 0, 0.3);*border:1px solid #999;-webkit-border-radius:6px;-moz-border-radius:6px;border-radius:6px;-webkit-box-shadow:0 3px 7px rgba(0, 0, 0, 0.3);-moz-box-shadow:0 3px 7px rgba(0, 0, 0, 0.3);box-shadow:0 3px 7px rgba(0, 0, 0, 0.3);-webkit-background-clip:padding-box;-moz-background-clip:padding-box;background-clip:padding-box;}.modal.fade{-webkit-transition:opacity .3s linear, top .3s ease-out;-moz-transition:opacity .3s linear, top .3s ease-out;-ms-transition:opacity .3s linear, top .3s ease-out;-o-transition:opacity .3s linear, top .3s ease-out;transition:opacity .3s linear, top .3s ease-out;top:-25%;} .modal.fade.in{top:50%;} -.modal-header{padding:5px 15px;border-bottom:1px solid #eee;} +.modal-header{padding:5px 15px;border-bottom:1px solid #eee;}.modal-header .close{margin-top:7px;} .modal-body{padding:15px;} .modal-footer{padding:14px 15px 15px;margin-bottom:0;background-color:#f5f5f5;border-top:1px solid #ddd;-webkit-border-radius:0 0 6px 6px;-moz-border-radius:0 0 6px 6px;border-radius:0 0 6px 6px;-webkit-box-shadow:inset 0 1px 0 #ffffff;-moz-box-shadow:inset 0 1px 0 #ffffff;box-shadow:inset 0 1px 0 #ffffff;zoom:1;}.modal-footer:before,.modal-footer:after{display:table;*display:inline;content:"";zoom:1;} .modal-footer:after{clear:both;} diff --git a/lib/modals.less b/lib/modals.less index dbac5ff87d..46fcd880b9 100644 --- a/lib/modals.less +++ b/lib/modals.less @@ -34,7 +34,6 @@ .border-radius(6px); .box-shadow(0 3px 7px rgba(0,0,0,0.3)); .background-clip(padding-box); - .close { margin-top: 7px; } &.fade { .transition(e('opacity .3s linear, top .3s ease-out')); top: -25%; @@ -44,6 +43,8 @@ .modal-header { padding: 5px 15px; border-bottom: 1px solid #eee; + // Close icon + .close { margin-top: 7px; } } .modal-body { padding: 15px; -- GitLab From 7728f7b8241dc43292c3f897fdfe08a13f58e40b Mon Sep 17 00:00:00 2001 From: Mark Otto <markdotto@gmail.com> Date: Sat, 7 Jan 2012 04:28:30 -0800 Subject: [PATCH 210/318] add html5 invalid state for super fancy errors via browser --- bootstrap.css | 12 +++++++++++- bootstrap.min.css | 1 + lib/forms.less | 13 +++++++++++++ 3 files changed, 25 insertions(+), 1 deletion(-) diff --git a/bootstrap.css b/bootstrap.css index 54c1b06514..8b943e2d3a 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: Sat Jan 7 04:20:37 PST 2012 + * Date: Sat Jan 7 04:26:09 PST 2012 */ html, body { margin: 0; @@ -824,6 +824,16 @@ textarea[readonly] { background-color: #bcddbc; border-color: #468847; } +input:invalid, textarea:invalid, select:invalid { + color: #b94a48; + border-color: #ee5f5b; +} +input:invalid:focus, textarea:invalid:focus, select:invalid:focus { + border-color: #e9322d; + -webkit-box-shadow: 0 0 6px #f8b9b7; + -moz-box-shadow: 0 0 6px #f8b9b7; + box-shadow: 0 0 6px #f8b9b7; +} .form-actions { padding: 17px 20px 18px; margin-top: 18px; diff --git a/bootstrap.min.css b/bootstrap.min.css index 2f0839b931..4075d46deb 100644 --- a/bootstrap.min.css +++ b/bootstrap.min.css @@ -155,6 +155,7 @@ input[disabled],select[disabled],textarea[disabled],input[readonly],select[reado .control-group.success>label,.control-group.success .help-block,.control-group.success .help-inline{color:#468847;} .control-group.success input,.control-group.success textarea{color:#468847;border-color:#57a957;}.control-group.success input:focus,.control-group.success textarea:focus{border-color:#458845;-webkit-box-shadow:0 0 6px #9acc9a;-moz-box-shadow:0 0 6px #9acc9a;box-shadow:0 0 6px #9acc9a;} .control-group.success .input-prepend .add-on,.control-group.success .input-append .add-on{color:#468847;background-color:#bcddbc;border-color:#468847;} +input:invalid,textarea:invalid,select:invalid{color:#b94a48;border-color:#ee5f5b;}input:invalid:focus,textarea:invalid:focus,select:invalid:focus{border-color:#e9322d;-webkit-box-shadow:0 0 6px #f8b9b7;-moz-box-shadow:0 0 6px #f8b9b7;box-shadow:0 0 6px #f8b9b7;} .form-actions{padding:17px 20px 18px;margin-top:18px;margin-bottom:18px;background-color:#f5f5f5;border-top:1px solid #ddd;} .uneditable-input{display:block;background-color:#ffffff;border-color:#eee;-webkit-box-shadow:inset 0 1px 2px rgba(0, 0, 0, 0.025);-moz-box-shadow:inset 0 1px 2px rgba(0, 0, 0, 0.025);box-shadow:inset 0 1px 2px rgba(0, 0, 0, 0.025);cursor:not-allowed;} input:-moz-placeholder{color:#999999;} diff --git a/lib/forms.less b/lib/forms.less index f0b7c2ea66..19e2aa8bc1 100644 --- a/lib/forms.less +++ b/lib/forms.less @@ -299,6 +299,19 @@ textarea[readonly] { .formFieldState(#468847, #57a957, lighten(#57a957, 30%)); } +// HTML5 invalid states +// Shares styles with the .control-group.error above +input:invalid, +textarea:invalid, +select:invalid { + color: #b94a48; + border-color: #ee5f5b; + &:focus { + border-color: darken(#ee5f5b, 10%); + .box-shadow(0 0 6px lighten(#ee5f5b, 20%)); + } +} + // FORM ACTIONS -- GitLab From 6dee40f46990b39bb33b4c42aa003df784cff8fc Mon Sep 17 00:00:00 2001 From: Mark Otto <markdotto@gmail.com> Date: Sat, 7 Jan 2012 04:34:30 -0800 Subject: [PATCH 211/318] adding back table grid sizing; will need support for responsive perhaps --- bootstrap.css | 190 ++++++++++++++-------------------------------- bootstrap.min.css | 12 +++ lib/tables.less | 121 ++--------------------------- 3 files changed, 77 insertions(+), 246 deletions(-) diff --git a/bootstrap.css b/bootstrap.css index 8b943e2d3a..71637d42f0 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: Sat Jan 7 04:26:09 PST 2012 + * Date: Sat Jan 7 04:34:04 PST 2012 */ html, body { margin: 0; @@ -1042,138 +1042,66 @@ td { .striped-table tbody tr:nth-child(odd) td, .striped-table tbody tr:nth-child(odd) th { background-color: #f9f9f9; } -/* -// ---------------- - -// This is a duplication of the main grid .columns() mixin, but subtracts 20px to account for input padding and border -.tableColumns(@columnSpan: 1) { - width: ((@gridColumnWidth - 20) * @columnSpan) + ((@gridColumnWidth - 20) * (@columnSpan - 1)); +table .span1 { + float: none; + width: 44px; + margin-left: 0; } -table { - // Default columns - .span1 { .tableColumns(1); } - .span2 { .tableColumns(2); } - .span3 { .tableColumns(3); } - .span4 { .tableColumns(4); } - .span5 { .tableColumns(5); } - .span6 { .tableColumns(6); } - .span7 { .tableColumns(7); } - .span8 { .tableColumns(8); } - .span9 { .tableColumns(9); } - .span10 { .tableColumns(10); } - .span11 { .tableColumns(11); } - .span12 { .tableColumns(12); } - .span13 { .tableColumns(13); } - .span14 { .tableColumns(14); } - .span15 { .tableColumns(15); } - .span16 { .tableColumns(16); } +table .span2 { + float: none; + width: 124px; + margin-left: 0; +} +table .span3 { + float: none; + width: 204px; + margin-left: 0; +} +table .span4 { + float: none; + width: 284px; + margin-left: 0; +} +table .span5 { + float: none; + width: 364px; + margin-left: 0; +} +table .span6 { + float: none; + width: 444px; + margin-left: 0; +} +table .span7 { + float: none; + width: 524px; + margin-left: 0; +} +table .span8 { + float: none; + width: 604px; + margin-left: 0; +} +table .span9 { + float: none; + width: 684px; + margin-left: 0; +} +table .span10 { + float: none; + width: 764px; + margin-left: 0; +} +table .span11 { + float: none; + width: 844px; + margin-left: 0; +} +table .span12 { + float: none; + width: 924px; + margin-left: 0; } - - -// TABLESORTER -// ----------- - -table { - // Tablesorting styles w/ jQuery plugin - .header { - cursor: pointer; - &:after { - float: right; - margin-top: 7px; - border-width: 0 4px 4px; - border-style: solid; - border-color: #000 transparent; - content: ""; - visibility: hidden; - } - } - // Style the sorted column headers (THs) - .headerSortUp, - .headerSortDown { - text-shadow: 0 1px 1px rgba(255,255,255,.75); - background-color: rgba(141,192,219,.25); - } - // Style the ascending (reverse alphabetical) column header - .header:hover { - &:after { - visibility: visible; - } - } - // Style the descending (alphabetical) column header - .headerSortDown, - .headerSortDown:hover { - &:after { - visibility: visible; - .opacity(60); - } - } - // Style the ascending (reverse alphabetical) column header - .headerSortUp { - &:after { - border-bottom: none; - border-left: 4px solid transparent; - border-right: 4px solid transparent; - border-top: 4px solid #000; - visibility:visible; - .box-shadow(none); //can't add boxshadow to downward facing arrow :( - .opacity(60); - } - } - // Blue Table Headings - .blue { - color: @blue; - border-bottom-color: @blue; - } - .headerSortUp.blue, - .headerSortDown.blue { - background-color: lighten(@blue, 40%); - } - // Green Table Headings - .green { - color: @green; - border-bottom-color: @green; - } - .headerSortUp.green, - .headerSortDown.green { - background-color: lighten(@green, 40%); - } - // Red Table Headings - .red { - color: @red; - border-bottom-color: @red; - } - .headerSortUp.red, - .headerSortDown.red { - background-color: lighten(@red, 50%); - } - // Yellow Table Headings - .yellow { - color: @yellow; - border-bottom-color: @yellow; - } - .headerSortUp.yellow, - .headerSortDown.yellow { - background-color: lighten(@yellow, 40%); - } - // Orange Table Headings - .orange { - color: @orange; - border-bottom-color: @orange; - } - .headerSortUp.orange, - .headerSortDown.orange { - background-color: lighten(@orange, 40%); - } - // Purple Table Headings - .purple { - color: @purple; - border-bottom-color: @purple; - } - .headerSortUp.purple, - .headerSortDown.purple { - background-color: lighten(@purple, 40%); - } -}*/ i { background-image: url(docs/assets/img/glyphicons-halflings-sprite.png); background-position: 0 0; diff --git a/bootstrap.min.css b/bootstrap.min.css index 4075d46deb..b0df320366 100644 --- a/bootstrap.min.css +++ b/bootstrap.min.css @@ -191,6 +191,18 @@ td{vertical-align:top;} .bordered-table thead:last-child tr:last-child th:first-child,.bordered-table tbody:last-child tr:last-child td:first-child{-webkit-border-radius:0 0 0 4px;-moz-border-radius:0 0 0 4px;border-radius:0 0 0 4px;} .bordered-table thead:last-child tr:last-child th:last-child,.bordered-table tbody:last-child tr:last-child td:last-child{-webkit-border-radius:0 0 4px 0;-moz-border-radius:0 0 4px 0;border-radius:0 0 4px 0;} .striped-table tbody tr:nth-child(odd) td,.striped-table tbody tr:nth-child(odd) th{background-color:#f9f9f9;} +table .span1{float:none;width:44px;margin-left:0;} +table .span2{float:none;width:124px;margin-left:0;} +table .span3{float:none;width:204px;margin-left:0;} +table .span4{float:none;width:284px;margin-left:0;} +table .span5{float:none;width:364px;margin-left:0;} +table .span6{float:none;width:444px;margin-left:0;} +table .span7{float:none;width:524px;margin-left:0;} +table .span8{float:none;width:604px;margin-left:0;} +table .span9{float:none;width:684px;margin-left:0;} +table .span10{float:none;width:764px;margin-left:0;} +table .span11{float:none;width:844px;margin-left:0;} +table .span12{float:none;width:924px;margin-left:0;} i{background-image:url(docs/assets/img/glyphicons-halflings-sprite.png);background-position:0 0;background-repeat:no-repeat;display:inline-block;vertical-align:text-top;width:14px;height:14px;} .glass{background-position:0 0;} .music{background-position:-24px 0;} diff --git a/lib/tables.less b/lib/tables.less index e1c9ed53bc..d1a690a3fd 100644 --- a/lib/tables.less +++ b/lib/tables.less @@ -93,15 +93,16 @@ td { -/* -// ---------------- +// TABLE CELL SIZING +// ----------------- -// This is a duplication of the main grid .columns() mixin, but subtracts 20px to account for input padding and border +// Change the columns .tableColumns(@columnSpan: 1) { - width: ((@gridColumnWidth - 20) * @columnSpan) + ((@gridColumnWidth - 20) * (@columnSpan - 1)); + float: none; + width: ((@gridColumnWidth) * @columnSpan) + (@gridGutterWidth * (@columnSpan - 1)) - 16; + margin-left: 0; } table { - // Default columns .span1 { .tableColumns(1); } .span2 { .tableColumns(2); } .span3 { .tableColumns(3); } @@ -114,114 +115,4 @@ table { .span10 { .tableColumns(10); } .span11 { .tableColumns(11); } .span12 { .tableColumns(12); } - .span13 { .tableColumns(13); } - .span14 { .tableColumns(14); } - .span15 { .tableColumns(15); } - .span16 { .tableColumns(16); } } - - -// TABLESORTER -// ----------- - -table { - // Tablesorting styles w/ jQuery plugin - .header { - cursor: pointer; - &:after { - float: right; - margin-top: 7px; - border-width: 0 4px 4px; - border-style: solid; - border-color: #000 transparent; - content: ""; - visibility: hidden; - } - } - // Style the sorted column headers (THs) - .headerSortUp, - .headerSortDown { - text-shadow: 0 1px 1px rgba(255,255,255,.75); - background-color: rgba(141,192,219,.25); - } - // Style the ascending (reverse alphabetical) column header - .header:hover { - &:after { - visibility: visible; - } - } - // Style the descending (alphabetical) column header - .headerSortDown, - .headerSortDown:hover { - &:after { - visibility: visible; - .opacity(60); - } - } - // Style the ascending (reverse alphabetical) column header - .headerSortUp { - &:after { - border-bottom: none; - border-left: 4px solid transparent; - border-right: 4px solid transparent; - border-top: 4px solid #000; - visibility:visible; - .box-shadow(none); //can't add boxshadow to downward facing arrow :( - .opacity(60); - } - } - // Blue Table Headings - .blue { - color: @blue; - border-bottom-color: @blue; - } - .headerSortUp.blue, - .headerSortDown.blue { - background-color: lighten(@blue, 40%); - } - // Green Table Headings - .green { - color: @green; - border-bottom-color: @green; - } - .headerSortUp.green, - .headerSortDown.green { - background-color: lighten(@green, 40%); - } - // Red Table Headings - .red { - color: @red; - border-bottom-color: @red; - } - .headerSortUp.red, - .headerSortDown.red { - background-color: lighten(@red, 50%); - } - // Yellow Table Headings - .yellow { - color: @yellow; - border-bottom-color: @yellow; - } - .headerSortUp.yellow, - .headerSortDown.yellow { - background-color: lighten(@yellow, 40%); - } - // Orange Table Headings - .orange { - color: @orange; - border-bottom-color: @orange; - } - .headerSortUp.orange, - .headerSortDown.orange { - background-color: lighten(@orange, 40%); - } - // Purple Table Headings - .purple { - color: @purple; - border-bottom-color: @purple; - } - .headerSortUp.purple, - .headerSortDown.purple { - background-color: lighten(@purple, 40%); - } -}*/ -- GitLab From 3eb80591b2c8bb2850caf27da7d6b8c8b747063a Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Piotrek=20Oko=C5=84ski?= <piotrek@okonski.org> Date: Sat, 26 Nov 2011 19:41:17 +0100 Subject: [PATCH 212/318] Progress bars --- bootstrap.css | 174 ++++++++++++++++++++++++++++++++++++++++- bootstrap.min.css | 12 ++- docs/components.html | 41 ++++++++++ docs/javascript.html | 43 ++++++++++ lib/bootstrap.less | 1 + lib/mixins.less | 16 ++++ lib/progress-bars.less | 100 +++++++++++++++++++++++ 7 files changed, 385 insertions(+), 2 deletions(-) create mode 100644 lib/progress-bars.less diff --git a/bootstrap.css b/bootstrap.css index 54c1b06514..224e1a5a66 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: Sat Jan 7 04:20:37 PST 2012 + * Date: Sat Jan 7 13:39:22 CET 2012 */ html, body { margin: 0; @@ -1598,6 +1598,178 @@ i { -moz-opacity: 0.4; opacity: 0.4; } +@-webkit-keyframes progress-bar-stripes { + from { + background-position: 0 0; + } + to { + background-position: 40px 0; + } +} +@-moz-keyframes progress-bar-stripes { + from { + background-position: 0 0; + } + to { + background-position: 40px 0; + } +} +@keyframes progress-bar-stripes { + from { + background-position: 0 0; + } + to { + background-position: 40px 0; + } +} +.progress { + height: 25px; + margin-bottom: 18px; + overflow: hidden; + -webkit-box-shadow: inset 0 1px 1px 0 rgba(0, 0, 0, 0.3); + -moz-box-shadow: inset 0 1px 1px 0 rgba(0, 0, 0, 0.3); + box-shadow: inset 0 1px 1px 0 rgba(0, 0, 0, 0.3); + background-color: #f5f5f5; + 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); + background-repeat: repeat-x; + filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#f5f5f5', GradientType=0); + -webkit-border-radius: 10px; + -moz-border-radius: 10px; + border-radius: 10px; + border: 1px solid #ddd; + border-color: rgba(0, 0, 0, 0); +} +.progress.active .bar { + -webkit-animation: progress-bar-stripes 2s linear infinite; + -moz-animation: progress-bar-stripes 2s linear infinite; + animation: progress-bar-stripes 2s linear infinite; +} +.progress.animated .bar { + -webkit-transition: width 0.6s ease; + -moz-transition: width 0.6s ease; + -ms-transition: width 0.6s ease; + -o-transition: width 0.6s ease; + transition: width 0.6s ease; +} +.progress.danger .bar, .progress.error .bar { + background-color: #c43c35; + 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); + background-repeat: repeat-x; + filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ee5f5b', endColorstr='#c43c35', GradientType=0); +} +.progress.danger.striped .bar, .progress.error.striped .bar { + -webkit-background-size: 40px 40px; + -moz-background-size: 40px 40px; + -o-background-size: 40px 40px; + background-size: 40px 40px; + background-color: #ee5f5b; + background-image: -webkit-gradient(linear, 0 100%, 100% 0, color-stop(0.25, rgba(255, 255, 255, 0.2)), color-stop(0.25, transparent), color-stop(0.5, transparent), color-stop(0.5, rgba(255, 255, 255, 0.2)), color-stop(0.75, rgba(255, 255, 255, 0.2)), color-stop(0.75, transparent), to(transparent)); + background-image: -webkit-linear-gradient(-45deg, rgba(255, 255, 255, 0.2) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.2) 50%, rgba(255, 255, 255, 0.2) 75%, transparent 75%, transparent); + background-image: -moz-linear-gradient(-45deg, rgba(255, 255, 255, 0.2) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.2) 50%, rgba(255, 255, 255, 0.2) 75%, transparent 75%, transparent); + background-image: -ms-linear-gradient(-45deg, rgba(255, 255, 255, 0.2) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.2) 50%, rgba(255, 255, 255, 0.2) 75%, transparent 75%, transparent); + background-image: -o-linear-gradient(-45deg, rgba(255, 255, 255, 0.2) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.2) 50%, rgba(255, 255, 255, 0.2) 75%, transparent 75%, transparent); + background-image: linear-gradient(-45deg, rgba(255, 255, 255, 0.2) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.2) 50%, rgba(255, 255, 255, 0.2) 75%, transparent 75%, transparent); +} +.progress.success .bar { + background-color: #57a957; + background-image: -khtml-gradient(linear, left top, left bottom, from(#62c462), to(#57a957)); + background-image: -moz-linear-gradient(top, #62c462, #57a957); + background-image: -ms-linear-gradient(top, #62c462, #57a957); + background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #62c462), color-stop(100%, #57a957)); + background-image: -webkit-linear-gradient(top, #62c462, #57a957); + background-image: -o-linear-gradient(top, #62c462, #57a957); + background-image: linear-gradient(top, #62c462, #57a957); + background-repeat: repeat-x; + filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#62c462', endColorstr='#57a957', GradientType=0); +} +.progress.success.striped .bar { + -webkit-background-size: 40px 40px; + -moz-background-size: 40px 40px; + -o-background-size: 40px 40px; + background-size: 40px 40px; + background-color: #62c462; + background-image: -webkit-gradient(linear, 0 100%, 100% 0, color-stop(0.25, rgba(255, 255, 255, 0.2)), color-stop(0.25, transparent), color-stop(0.5, transparent), color-stop(0.5, rgba(255, 255, 255, 0.2)), color-stop(0.75, rgba(255, 255, 255, 0.2)), color-stop(0.75, transparent), to(transparent)); + background-image: -webkit-linear-gradient(-45deg, rgba(255, 255, 255, 0.2) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.2) 50%, rgba(255, 255, 255, 0.2) 75%, transparent 75%, transparent); + background-image: -moz-linear-gradient(-45deg, rgba(255, 255, 255, 0.2) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.2) 50%, rgba(255, 255, 255, 0.2) 75%, transparent 75%, transparent); + background-image: -ms-linear-gradient(-45deg, rgba(255, 255, 255, 0.2) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.2) 50%, rgba(255, 255, 255, 0.2) 75%, transparent 75%, transparent); + background-image: -o-linear-gradient(-45deg, rgba(255, 255, 255, 0.2) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.2) 50%, rgba(255, 255, 255, 0.2) 75%, transparent 75%, transparent); + background-image: linear-gradient(-45deg, rgba(255, 255, 255, 0.2) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.2) 50%, rgba(255, 255, 255, 0.2) 75%, transparent 75%, transparent); +} +.progress.info .bar { + background-color: #339bb9; + background-image: -khtml-gradient(linear, left top, left bottom, from(#5bc0de), to(#339bb9)); + background-image: -moz-linear-gradient(top, #5bc0de, #339bb9); + background-image: -ms-linear-gradient(top, #5bc0de, #339bb9); + background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #5bc0de), color-stop(100%, #339bb9)); + background-image: -webkit-linear-gradient(top, #5bc0de, #339bb9); + background-image: -o-linear-gradient(top, #5bc0de, #339bb9); + background-image: linear-gradient(top, #5bc0de, #339bb9); + background-repeat: repeat-x; + filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#5bc0de', endColorstr='#339bb9', GradientType=0); +} +.progress.info.striped .bar { + -webkit-background-size: 40px 40px; + -moz-background-size: 40px 40px; + -o-background-size: 40px 40px; + background-size: 40px 40px; + background-color: #5bc0de; + background-image: -webkit-gradient(linear, 0 100%, 100% 0, color-stop(0.25, rgba(255, 255, 255, 0.2)), color-stop(0.25, transparent), color-stop(0.5, transparent), color-stop(0.5, rgba(255, 255, 255, 0.2)), color-stop(0.75, rgba(255, 255, 255, 0.2)), color-stop(0.75, transparent), to(transparent)); + background-image: -webkit-linear-gradient(-45deg, rgba(255, 255, 255, 0.2) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.2) 50%, rgba(255, 255, 255, 0.2) 75%, transparent 75%, transparent); + background-image: -moz-linear-gradient(-45deg, rgba(255, 255, 255, 0.2) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.2) 50%, rgba(255, 255, 255, 0.2) 75%, transparent 75%, transparent); + background-image: -ms-linear-gradient(-45deg, rgba(255, 255, 255, 0.2) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.2) 50%, rgba(255, 255, 255, 0.2) 75%, transparent 75%, transparent); + background-image: -o-linear-gradient(-45deg, rgba(255, 255, 255, 0.2) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.2) 50%, rgba(255, 255, 255, 0.2) 75%, transparent 75%, transparent); + background-image: linear-gradient(-45deg, rgba(255, 255, 255, 0.2) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.2) 50%, rgba(255, 255, 255, 0.2) 75%, transparent 75%, transparent); +} +.progress.striped .bar { + -webkit-background-size: 40px 40px; + -moz-background-size: 40px 40px; + -o-background-size: 40px 40px; + background-size: 40px 40px; + background-color: #62c462; + background-image: -webkit-gradient(linear, 0 100%, 100% 0, color-stop(0.25, rgba(255, 255, 255, 0.2)), color-stop(0.25, transparent), color-stop(0.5, transparent), color-stop(0.5, rgba(255, 255, 255, 0.2)), color-stop(0.75, rgba(255, 255, 255, 0.2)), color-stop(0.75, transparent), to(transparent)); + background-image: -webkit-linear-gradient(-45deg, rgba(255, 255, 255, 0.2) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.2) 50%, rgba(255, 255, 255, 0.2) 75%, transparent 75%, transparent); + background-image: -moz-linear-gradient(-45deg, rgba(255, 255, 255, 0.2) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.2) 50%, rgba(255, 255, 255, 0.2) 75%, transparent 75%, transparent); + background-image: -ms-linear-gradient(-45deg, rgba(255, 255, 255, 0.2) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.2) 50%, rgba(255, 255, 255, 0.2) 75%, transparent 75%, transparent); + background-image: -o-linear-gradient(-45deg, rgba(255, 255, 255, 0.2) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.2) 50%, rgba(255, 255, 255, 0.2) 75%, transparent 75%, transparent); + background-image: linear-gradient(-45deg, rgba(255, 255, 255, 0.2) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.2) 50%, rgba(255, 255, 255, 0.2) 75%, transparent 75%, transparent); +} +.progress .bar { + width: 0%; + height: 100%; + -webkit-box-sizing: border-box; + -moz-box-sizing: border-box; + box-sizing: border-box; + background-color: #57a957; + background-image: -khtml-gradient(linear, left top, left bottom, from(#62c462), to(#57a957)); + background-image: -moz-linear-gradient(top, #62c462, #57a957); + background-image: -ms-linear-gradient(top, #62c462, #57a957); + background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #62c462), color-stop(100%, #57a957)); + background-image: -webkit-linear-gradient(top, #62c462, #57a957); + background-image: -o-linear-gradient(top, #62c462, #57a957); + background-image: linear-gradient(top, #62c462, #57a957); + background-repeat: repeat-x; + filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#62c462', endColorstr='#57a957', GradientType=0); + border-color: #57a957 #57a957 #3d773d; + border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25); + -webkit-box-shadow: inset 0 2px 0 rgba(255, 255, 255, 0.2), inset -1px -1px 0 rgba(0, 0, 0, 0.25), inset 1px 1px 0 rgba(0, 0, 0, 0.25); + -moz-box-shadow: inset 0 2px 0 rgba(255, 255, 255, 0.2), inset -1px -1px 0 rgba(0, 0, 0, 0.25), inset 1px 1px 0 rgba(0, 0, 0, 0.25); + box-shadow: inset 0 2px 0 rgba(255, 255, 255, 0.2), inset -1px -1px 0 rgba(0, 0, 0, 0.25), inset 1px 1px 0 rgba(0, 0, 0, 0.25); + -webkit-border-radius: 10px; + -moz-border-radius: 10px; + border-radius: 10px; +} .navbar { overflow: visible; } diff --git a/bootstrap.min.css b/bootstrap.min.css index 2f0839b931..b278aa7c38 100644 --- a/bootstrap.min.css +++ b/bootstrap.min.css @@ -293,6 +293,16 @@ i{background-image:url(docs/assets/img/glyphicons-halflings-sprite.png);backgrou .fade{-webkit-transition:opacity 0.15s linear;-moz-transition:opacity 0.15s linear;-ms-transition:opacity 0.15s linear;-o-transition:opacity 0.15s linear;transition:opacity 0.15s linear;opacity:0;}.fade.in{opacity:1;} .collapse{-webkit-transition:height 0.35s ease;-moz-transition:height 0.35s ease;-ms-transition:height 0.35s ease;-o-transition:height 0.35s ease;transition:height 0.35s ease;position:relative;overflow:hidden;height:0;}.collapse.in{height:auto;} .close{float:right;font-size:20px;font-weight:bold;line-height:13.5px;color:#000000;text-shadow:0 1px 0 #ffffff;filter:alpha(opacity=20);-moz-opacity:0.2;opacity:0.2;}.close:hover{color:#000000;text-decoration:none;filter:alpha(opacity=40);-moz-opacity:0.4;opacity:0.4;} +@-webkit-keyframes progress-bar-stripes{from{background-position:0 0;} to{background-position:40px 0;}}@-moz-keyframes progress-bar-stripes{from{background-position:0 0;} to{background-position:40px 0;}}@keyframes progress-bar-stripes{from{background-position:0 0;} to{background-position:40px 0;}}.progress{height:25px;margin-bottom:18px;overflow:hidden;-webkit-box-shadow:inset 0 1px 1px 0 rgba(0, 0, 0, 0.3);-moz-box-shadow:inset 0 1px 1px 0 rgba(0, 0, 0, 0.3);box-shadow:inset 0 1px 1px 0 rgba(0, 0, 0, 0.3);background-color:#f5f5f5;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);background-repeat:repeat-x;filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#f5f5f5', GradientType=0);-webkit-border-radius:10px;-moz-border-radius:10px;border-radius:10px;border:1px solid #ddd;border-color:rgba(0, 0, 0, 0);}.progress.active .bar{-webkit-animation:progress-bar-stripes 2s linear infinite;-moz-animation:progress-bar-stripes 2s linear infinite;animation:progress-bar-stripes 2s linear infinite;} +.progress.animated .bar{-webkit-transition:width 0.6s ease;-moz-transition:width 0.6s ease;-ms-transition:width 0.6s ease;-o-transition:width 0.6s ease;transition:width 0.6s ease;} +.progress.danger .bar,.progress.error .bar{background-color:#c43c35;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);background-repeat:repeat-x;filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ee5f5b', endColorstr='#c43c35', GradientType=0);} +.progress.danger.striped .bar,.progress.error.striped .bar{-webkit-background-size:40px 40px;-moz-background-size:40px 40px;-o-background-size:40px 40px;background-size:40px 40px;background-color:#ee5f5b;background-image:-webkit-gradient(linear, 0 100%, 100% 0, color-stop(0.25, rgba(255, 255, 255, 0.2)), color-stop(0.25, transparent), color-stop(0.5, transparent), color-stop(0.5, rgba(255, 255, 255, 0.2)), color-stop(0.75, rgba(255, 255, 255, 0.2)), color-stop(0.75, transparent), to(transparent));background-image:-webkit-linear-gradient(-45deg, rgba(255, 255, 255, 0.2) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.2) 50%, rgba(255, 255, 255, 0.2) 75%, transparent 75%, transparent);background-image:-moz-linear-gradient(-45deg, rgba(255, 255, 255, 0.2) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.2) 50%, rgba(255, 255, 255, 0.2) 75%, transparent 75%, transparent);background-image:-ms-linear-gradient(-45deg, rgba(255, 255, 255, 0.2) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.2) 50%, rgba(255, 255, 255, 0.2) 75%, transparent 75%, transparent);background-image:-o-linear-gradient(-45deg, rgba(255, 255, 255, 0.2) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.2) 50%, rgba(255, 255, 255, 0.2) 75%, transparent 75%, transparent);background-image:linear-gradient(-45deg, rgba(255, 255, 255, 0.2) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.2) 50%, rgba(255, 255, 255, 0.2) 75%, transparent 75%, transparent);} +.progress.success .bar{background-color:#57a957;background-image:-khtml-gradient(linear, left top, left bottom, from(#62c462), to(#57a957));background-image:-moz-linear-gradient(top, #62c462, #57a957);background-image:-ms-linear-gradient(top, #62c462, #57a957);background-image:-webkit-gradient(linear, left top, left bottom, color-stop(0%, #62c462), color-stop(100%, #57a957));background-image:-webkit-linear-gradient(top, #62c462, #57a957);background-image:-o-linear-gradient(top, #62c462, #57a957);background-image:linear-gradient(top, #62c462, #57a957);background-repeat:repeat-x;filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#62c462', endColorstr='#57a957', GradientType=0);} +.progress.success.striped .bar{-webkit-background-size:40px 40px;-moz-background-size:40px 40px;-o-background-size:40px 40px;background-size:40px 40px;background-color:#62c462;background-image:-webkit-gradient(linear, 0 100%, 100% 0, color-stop(0.25, rgba(255, 255, 255, 0.2)), color-stop(0.25, transparent), color-stop(0.5, transparent), color-stop(0.5, rgba(255, 255, 255, 0.2)), color-stop(0.75, rgba(255, 255, 255, 0.2)), color-stop(0.75, transparent), to(transparent));background-image:-webkit-linear-gradient(-45deg, rgba(255, 255, 255, 0.2) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.2) 50%, rgba(255, 255, 255, 0.2) 75%, transparent 75%, transparent);background-image:-moz-linear-gradient(-45deg, rgba(255, 255, 255, 0.2) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.2) 50%, rgba(255, 255, 255, 0.2) 75%, transparent 75%, transparent);background-image:-ms-linear-gradient(-45deg, rgba(255, 255, 255, 0.2) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.2) 50%, rgba(255, 255, 255, 0.2) 75%, transparent 75%, transparent);background-image:-o-linear-gradient(-45deg, rgba(255, 255, 255, 0.2) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.2) 50%, rgba(255, 255, 255, 0.2) 75%, transparent 75%, transparent);background-image:linear-gradient(-45deg, rgba(255, 255, 255, 0.2) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.2) 50%, rgba(255, 255, 255, 0.2) 75%, transparent 75%, transparent);} +.progress.info .bar{background-color:#339bb9;background-image:-khtml-gradient(linear, left top, left bottom, from(#5bc0de), to(#339bb9));background-image:-moz-linear-gradient(top, #5bc0de, #339bb9);background-image:-ms-linear-gradient(top, #5bc0de, #339bb9);background-image:-webkit-gradient(linear, left top, left bottom, color-stop(0%, #5bc0de), color-stop(100%, #339bb9));background-image:-webkit-linear-gradient(top, #5bc0de, #339bb9);background-image:-o-linear-gradient(top, #5bc0de, #339bb9);background-image:linear-gradient(top, #5bc0de, #339bb9);background-repeat:repeat-x;filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#5bc0de', endColorstr='#339bb9', GradientType=0);} +.progress.info.striped .bar{-webkit-background-size:40px 40px;-moz-background-size:40px 40px;-o-background-size:40px 40px;background-size:40px 40px;background-color:#5bc0de;background-image:-webkit-gradient(linear, 0 100%, 100% 0, color-stop(0.25, rgba(255, 255, 255, 0.2)), color-stop(0.25, transparent), color-stop(0.5, transparent), color-stop(0.5, rgba(255, 255, 255, 0.2)), color-stop(0.75, rgba(255, 255, 255, 0.2)), color-stop(0.75, transparent), to(transparent));background-image:-webkit-linear-gradient(-45deg, rgba(255, 255, 255, 0.2) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.2) 50%, rgba(255, 255, 255, 0.2) 75%, transparent 75%, transparent);background-image:-moz-linear-gradient(-45deg, rgba(255, 255, 255, 0.2) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.2) 50%, rgba(255, 255, 255, 0.2) 75%, transparent 75%, transparent);background-image:-ms-linear-gradient(-45deg, rgba(255, 255, 255, 0.2) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.2) 50%, rgba(255, 255, 255, 0.2) 75%, transparent 75%, transparent);background-image:-o-linear-gradient(-45deg, rgba(255, 255, 255, 0.2) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.2) 50%, rgba(255, 255, 255, 0.2) 75%, transparent 75%, transparent);background-image:linear-gradient(-45deg, rgba(255, 255, 255, 0.2) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.2) 50%, rgba(255, 255, 255, 0.2) 75%, transparent 75%, transparent);} +.progress.striped .bar{-webkit-background-size:40px 40px;-moz-background-size:40px 40px;-o-background-size:40px 40px;background-size:40px 40px;background-color:#62c462;background-image:-webkit-gradient(linear, 0 100%, 100% 0, color-stop(0.25, rgba(255, 255, 255, 0.2)), color-stop(0.25, transparent), color-stop(0.5, transparent), color-stop(0.5, rgba(255, 255, 255, 0.2)), color-stop(0.75, rgba(255, 255, 255, 0.2)), color-stop(0.75, transparent), to(transparent));background-image:-webkit-linear-gradient(-45deg, rgba(255, 255, 255, 0.2) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.2) 50%, rgba(255, 255, 255, 0.2) 75%, transparent 75%, transparent);background-image:-moz-linear-gradient(-45deg, rgba(255, 255, 255, 0.2) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.2) 50%, rgba(255, 255, 255, 0.2) 75%, transparent 75%, transparent);background-image:-ms-linear-gradient(-45deg, rgba(255, 255, 255, 0.2) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.2) 50%, rgba(255, 255, 255, 0.2) 75%, transparent 75%, transparent);background-image:-o-linear-gradient(-45deg, rgba(255, 255, 255, 0.2) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.2) 50%, rgba(255, 255, 255, 0.2) 75%, transparent 75%, transparent);background-image:linear-gradient(-45deg, rgba(255, 255, 255, 0.2) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.2) 50%, rgba(255, 255, 255, 0.2) 75%, transparent 75%, transparent);} +.progress .bar{width:0%;height:100%;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;background-color:#57a957;background-image:-khtml-gradient(linear, left top, left bottom, from(#62c462), to(#57a957));background-image:-moz-linear-gradient(top, #62c462, #57a957);background-image:-ms-linear-gradient(top, #62c462, #57a957);background-image:-webkit-gradient(linear, left top, left bottom, color-stop(0%, #62c462), color-stop(100%, #57a957));background-image:-webkit-linear-gradient(top, #62c462, #57a957);background-image:-o-linear-gradient(top, #62c462, #57a957);background-image:linear-gradient(top, #62c462, #57a957);background-repeat:repeat-x;filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#62c462', endColorstr='#57a957', GradientType=0);border-color:#57a957 #57a957 #3d773d;border-color:rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);-webkit-box-shadow:inset 0 2px 0 rgba(255, 255, 255, 0.2),inset -1px -1px 0 rgba(0, 0, 0, 0.25),inset 1px 1px 0 rgba(0, 0, 0, 0.25);-moz-box-shadow:inset 0 2px 0 rgba(255, 255, 255, 0.2),inset -1px -1px 0 rgba(0, 0, 0, 0.25),inset 1px 1px 0 rgba(0, 0, 0, 0.25);box-shadow:inset 0 2px 0 rgba(255, 255, 255, 0.2),inset -1px -1px 0 rgba(0, 0, 0, 0.25),inset 1px 1px 0 rgba(0, 0, 0, 0.25);-webkit-border-radius:10px;-moz-border-radius:10px;border-radius:10px;} .navbar{overflow:visible;} .navbar-inner{background-color:#222222;background-color:#222222;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);background-repeat:repeat-x;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);} .navbar .brand:hover,.navbar ul .active>a{color:#ffffff;text-decoration:none;background-color:#333333;background-color:rgba(255, 255, 255, 0.05);} @@ -472,4 +482,4 @@ a.thumbnail:hover{border-color:#0088cc;-webkit-box-shadow:0 1px 4px rgba(0, 105, .label.success{background-color:#46a546;} .label.notice{background-color:#62cffc;} .hidden{display:none;visibility:hidden;} -@media (max-width: 480px){.modal{width:auto;margin:0;}.modal.fade.in{top:auto;} .horizontal-form .control-group>label{float:none;width:auto;padding-top:0;text-align:left;} .horizontal-form .controls{margin-left:0;} .horizontal-form .control-list{padding-top:0;} .horizontal-form .form-actions{padding-left:0;} .modal{position:fixed;top:20px;left:20px;right:20px;width:auto;}.modal .close{padding:10px;}}@media (max-width: 768px){.container{width:auto;padding:0 20px;} .row{margin-left:0;} .row>[class*="span"]{float:none;display:block;width:auto;margin:0;} .nav{position:absolute;top:0;left:0;width:180px;padding-top:40px;list-style:none;} .nav,.nav>li:last-child a{-webkit-border-radius:0 0 4px 0;-moz-border-radius:0 0 4px 0;border-radius:0 0 4px 0;} .nav>li{float:none;display:none;} .nav>li>a{float:none;background-color:#222;} .nav>.active{display:block;position:absolute;top:0;left:0;} .navbar ul .active>a{background-color:transparent;} .nav>.active a:after{display:inline-block;width:0;height:0;margin-top:8px;margin-left:6px;text-indent:-99999px;vertical-align:top;border-left:4px solid transparent;border-right:4px solid transparent;border-top:4px solid #ffffff;filter:alpha(opacity=100);-moz-opacity:1;opacity:1;content:"↓";} .nav>.active a:hover{background-color:rgba(255, 255, 255, 0.05);}}@media (min-width: 768px) and (max-width: 940px){.container{width:748px;} .span1{width:44px;} .span2{width:108px;} .span3{width:172px;} .span4{width:236px;} .span5{width:300px;} .span6{width:364px;} .span7{width:428px;} .span8{width:492px;} .span9{width:556px;} .span10{width:620px;} .span11{width:684px;} .span12{width:748px;} .offset1{margin-left:64px;} .offset2{margin-left:128px;} .offset3{margin-left:192px;} .offset4{margin-left:256px;} .offset5{margin-left:320px;} .offset6{margin-left:384px;} .offset7{margin-left:448px;} .offset8{margin-left:512px;} .offset9{margin-left:576px;} .offset10{margin-left:640px;} .offset11{margin-left:704px;} .offset12{margin-left:768px;}} +@media (max-width:480px){.modal{width:auto;margin:0;}.modal.fade.in{top:auto;} .horizontal-form .control-group>label{float:none;width:auto;padding-top:0;text-align:left;} .horizontal-form .controls{margin-left:0;} .horizontal-form .control-list{padding-top:0;} .horizontal-form .form-actions{padding-left:0;} .modal{position:fixed;top:20px;left:20px;right:20px;width:auto;}.modal .close{padding:10px;}}@media (max-width:768px){.container{width:auto;padding:0 20px;} .row{margin-left:0;} .row>[class*="span"]{float:none;display:block;width:auto;margin:0;} .nav{position:absolute;top:0;left:0;width:180px;padding-top:40px;list-style:none;} .nav,.nav>li:last-child a{-webkit-border-radius:0 0 4px 0;-moz-border-radius:0 0 4px 0;border-radius:0 0 4px 0;} .nav>li{float:none;display:none;} .nav>li>a{float:none;background-color:#222;} .nav>.active{display:block;position:absolute;top:0;left:0;} .navbar ul .active>a{background-color:transparent;} .nav>.active a:after{display:inline-block;width:0;height:0;margin-top:8px;margin-left:6px;text-indent:-99999px;vertical-align:top;border-left:4px solid transparent;border-right:4px solid transparent;border-top:4px solid #ffffff;filter:alpha(opacity=100);-moz-opacity:1;opacity:1;content:"↓";} .nav>.active a:hover{background-color:rgba(255, 255, 255, 0.05);}}@media (min-width:768px) and (max-width:940px){.container{width:748px;} .span1{width:44px;} .span2{width:108px;} .span3{width:172px;} .span4{width:236px;} .span5{width:300px;} .span6{width:364px;} .span7{width:428px;} .span8{width:492px;} .span9{width:556px;} .span10{width:620px;} .span11{width:684px;} .span12{width:748px;} .offset1{margin-left:64px;} .offset2{margin-left:128px;} .offset3{margin-left:192px;} .offset4{margin-left:256px;} .offset5{margin-left:320px;} .offset6{margin-left:384px;} .offset7{margin-left:448px;} .offset8{margin-left:512px;} .offset9{margin-left:576px;} .offset10{margin-left:640px;} .offset11{margin-left:704px;} .offset12{margin-left:768px;}} diff --git a/docs/components.html b/docs/components.html index 5bafc5a60a..0974a233f9 100644 --- a/docs/components.html +++ b/docs/components.html @@ -925,6 +925,47 @@ Lorem ipsum dolar sit amet illo error <a href="#" title="bottom">ipsum</a> verit </div><!-- /row --> </section> +<!-- Progress bars +================================================== --> + <section id="progresss"> + <div class="page-header"> + <h1>Progress bars <small>... for indicating progress</small></h1> + </div> + <div class="row"> + <div class="span3"> + <h2>Basic bars</h2> + <p>Default look of progress bars. Absolute minimum.</p> + </div> + <div class="span9"> + <div class="progress"> + <div class="bar" style="width: 50%;"></div> + </div> + </div> + </div> + <div class="row"> + <div class="span3"> + <h2>Striped bars</h2> + <p>Bars with stripes painted.</p> + </div> + <div class="span9"> + <div class="progress info striped"> + <div class="bar" style="width: 20%;"></div> + </div> + </div> + </div> + <div class="row"> + <div class="span3"> + <h2>Active state</h2> + <p>Animated stripes! <small>Not on Opera, though :(</small></p> + </div> + <div class="span3"> + <div class="progress danger active striped"> + <div class="bar" style="width: 45%"></div> + </div> + </div> + </div> + </section> + <!-- Footer ================================================== --> <footer class="footer"> diff --git a/docs/javascript.html b/docs/javascript.html index 0aebf8609a..7e10d63b9c 100644 --- a/docs/javascript.html +++ b/docs/javascript.html @@ -23,6 +23,49 @@ <link rel="apple-touch-icon" sizes="72x72" href="images/apple-touch-icon-72x72.png"> <link rel="apple-touch-icon" sizes="114x114" href="images/apple-touch-icon-114x114.png"> + <!-- Le javascript --> + <!-- placed up here so that the inline demos can be next to their markup --> + <script src="http://code.jquery.com/jquery-1.7.min.js"></script> + + <script type="text/javascript"> + // NOT FINAL BY ANY MEANS, JUST MAH JANK CODE BRO + $(document).ready(function() { + $('.nav .active').click(function(e) { + e.preventDefault(); + $(this).siblings().toggle(); + }); + }); + </script> + + <script src="assets/js/google-code-prettify/prettify.js"></script> + <script>$(function () { prettyPrint() })</script> + <script src="../js/bootstrap-transition.js"></script> + <script src="../js/bootstrap-alert.js"></script> + <script src="../js/bootstrap-modal.js"></script> + <script src="../js/bootstrap-dropdown.js"></script> + <script src="../js/bootstrap-scrollspy.js"></script> + <script src="../js/bootstrap-tab.js"></script> + <script src="../js/bootstrap-twipsy.js"></script> + <script src="../js/bootstrap-popover.js"></script> + <script src="../js/bootstrap-button.js"></script> + <script> + $(function () { + // twipsy demo + $("a[rel=twipsy]").twipsy({ + live: true + }) + + //popover demo + $("a[rel=popover]") + .popover({ + offset: 10 + }) + .click(function(e) { + e.preventDefault() + }) + }) + </script> + </head> <body id="bootstrap-js"> diff --git a/lib/bootstrap.less b/lib/bootstrap.less index df233f1280..0335f86517 100644 --- a/lib/bootstrap.less +++ b/lib/bootstrap.less @@ -30,6 +30,7 @@ @import "wells.less"; @import "component-animations.less"; @import "close.less"; +@import "progress-bars.less"; // Components: Nav @import "navbar.less"; diff --git a/lib/mixins.less b/lib/mixins.less index 49eabb8751..ea8d685f03 100644 --- a/lib/mixins.less +++ b/lib/mixins.less @@ -270,6 +270,15 @@ background-repeat: no-repeat; // Opera cannot do radial gradients yet } + .striped(@color,@angle: -45deg) { + background-color: @color; + background-image: -webkit-gradient(linear, 0 100%, 100% 0, color-stop(.25, rgba(255, 255, 255, .2)), color-stop(.25, transparent), color-stop(.5, transparent), color-stop(.5, rgba(255, 255, 255, .2)), color-stop(.75, rgba(255, 255, 255, .2)), color-stop(.75, transparent), to(transparent)); + background-image: -webkit-linear-gradient(@angle, rgba(255, 255, 255, .2) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .2) 50%, rgba(255, 255, 255, .2) 75%, transparent 75%, transparent); + background-image: -moz-linear-gradient(@angle, rgba(255, 255, 255, .2) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .2) 50%, rgba(255, 255, 255, .2) 75%, transparent 75%, transparent); + background-image: -ms-linear-gradient(@angle, rgba(255, 255, 255, .2) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .2) 50%, rgba(255, 255, 255, .2) 75%, transparent 75%, transparent); + background-image: -o-linear-gradient(@angle, rgba(255, 255, 255, .2) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .2) 50%, rgba(255, 255, 255, .2) 75%, transparent 75%, transparent); + background-image: linear-gradient(@angle, rgba(255, 255, 255, .2) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .2) 50%, rgba(255, 255, 255, .2) 75%, transparent 75%, transparent); + } } // Reset filters for IE @@ -320,3 +329,10 @@ border-right: @arrowWidth solid @black; } } + +.background-size(@width, @height){ + -webkit-background-size: @width @height; + -moz-background-size: @width @height; + -o-background-size: @width @height; + background-size: @width @height; +} diff --git a/lib/progress-bars.less b/lib/progress-bars.less new file mode 100644 index 0000000000..cc524cc9f0 --- /dev/null +++ b/lib/progress-bars.less @@ -0,0 +1,100 @@ +@-webkit-keyframes progress-bar-stripes { + from { + background-position: 0 0; + } + to { + background-position: 40px 0; + } +} + +@-moz-keyframes progress-bar-stripes { + from { + background-position: 0 0; + } + to { + background-position: 40px 0; + } +} + +@keyframes progress-bar-stripes { + from { + background-position: 0 0; + } + to { + background-position: 40px 0; + } +} + +.progress { + height: 25px; + margin-bottom: 18px; + overflow: hidden; + .box-shadow(inset 0 1px 1px 0 rgba(0,0,0,.3), 0 1px 0 0 #fff); + #gradient > .vertical(#fff, #f5f5f5); + .border-radius(10px); + border: 1px solid #ddd; + border-color: rgba(0,0,0,.0); + &.active { + .bar { + -webkit-animation: progress-bar-stripes 2s linear infinite; + -moz-animation: progress-bar-stripes 2s linear infinite; + animation: progress-bar-stripes 2s linear infinite; + } + } + &.animated { + .bar { + .transition(width .6s ease); + } + } + &.danger, + &.error { + .bar { + #gradient > .vertical(#ee5f5b, #c43c35); + } + &.striped { + .bar { + .background-size(40px, 40px); + #gradient > .striped(#ee5f5b); + } + } + } + &.success { + .bar { + #gradient > .vertical(#62c462, #57a957); + } + &.striped { + .bar { + .background-size(40px, 40px); + #gradient > .striped(#62c462); + } + } + } + &.info { + .bar { + #gradient > .vertical(#5bc0de, #339bb9); + } + &.striped { + .bar { + .background-size(40px, 40px); + #gradient > .striped(#5bc0de); + } + } + } + &.striped { + .bar { + .background-size(40px, 40px); + #gradient > .striped(#62c462); + } + } + .bar { + width: 0%; + height: 100%; + -webkit-box-sizing: border-box; + -moz-box-sizing: border-box; + box-sizing: border-box; + .gradientBar(#62c462, #57a957); + @shadow: inset 0 2px 0 rgba(255,255,255,.2), inset -1px -1px 0 rgba(0,0,0,.25),inset 1px 1px 0 rgba(0,0,0,.25); + .box-shadow(@shadow); + .border-radius(10px); + } +} \ No newline at end of file -- GitLab From 95c88a2953d6493050192f9c99c8e5597e591ac3 Mon Sep 17 00:00:00 2001 From: Mark Otto <markdotto@gmail.com> Date: Sat, 7 Jan 2012 04:40:32 -0800 Subject: [PATCH 213/318] scratch that, tweaking dropdowns in tabs --- docs/components.html | 2 +- lib/tabs-pills.less | 19 +++---------------- 2 files changed, 4 insertions(+), 17 deletions(-) diff --git a/docs/components.html b/docs/components.html index 5bafc5a60a..baeccd6ed6 100644 --- a/docs/components.html +++ b/docs/components.html @@ -427,7 +427,7 @@ <li><a href="#">Settings</a></li> <li><a href="#">Contact</a></li> <li class="dropdown"> - <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown</a> + <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <span class="caret"></span></a> <ul class="dropdown-menu"> <li><a href="#">Secondary link</a></li> <li><a href="#">Something else here</a></li> diff --git a/lib/tabs-pills.less b/lib/tabs-pills.less index 23ba9ccfac..8e8856a567 100644 --- a/lib/tabs-pills.less +++ b/lib/tabs-pills.less @@ -154,30 +154,17 @@ // Dropdowns in tabs .tabs { - // first one for backwards compatibility - .menu-dropdown, .dropdown-menu { - top: 35px; + top: 36px; border-width: 1px; - .border-radius(0 6px 6px 6px); } - // first one for backwards compatibility - a.menu:after, - .dropdown-toggle:after { - border-top-color: #999; + .dropdown-toggle .caret { margin-top: 15px; margin-left: 5px; } - // first one for backwards compatibility - li.open.menu .menu, - .open.dropdown .dropdown-toggle { + .open .dropdown-toggle { border-color: #999; } - // first one for backwards compatibility - li.open a.menu:after, - .dropdown.open .dropdown-toggle:after { - border-top-color: #555; - } } // Pills -- GitLab From fbb42ccbbbfcab985a2c588532511f4af324ebc1 Mon Sep 17 00:00:00 2001 From: Jacob Thornton <jacobthornton@gmail.com> Date: Sat, 7 Jan 2012 10:56:00 -0800 Subject: [PATCH 214/318] update link to collapse plugin --- docs/javascript.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/javascript.html b/docs/javascript.html index 1cba7766f9..c20098085d 100644 --- a/docs/javascript.html +++ b/docs/javascript.html @@ -869,7 +869,7 @@ $('#my-alert').bind('closed', function () { <div class="row"> <div class="span3 columns"> <p>The collapse plugin offers simple, flexible collapsible element support for making accordions and other collapsible ui components.</p> - <a href="../js/bootstrap-collapsible.js" target="_blank" class="btn primary">Download</a> + <a href="../js/bootstrap-collapse.js" target="_blank" class="btn primary">Download</a> </div> <div class="span9 columns"> <h3>Using bootstrap-collapse.js</h3> -- GitLab From a339f0051b21f9e51d47c3eb1fd7d37f126e87a0 Mon Sep 17 00:00:00 2001 From: Mark Otto <markdotto@gmail.com> Date: Sat, 7 Jan 2012 12:22:51 -0800 Subject: [PATCH 215/318] fixing tablesorter styles by adding the jquery plugin back to the lib, fixing the docs examples --- bootstrap.css | 59 ++++++++++++++++++++++------ bootstrap.min.css | 13 ++++-- docs/assets/js/jquery.tablesorter.js | 3 ++ docs/base-css.html | 4 +- lib/tables.less | 54 +++++++++++++++++++++++++ lib/tabs-pills.less | 6 ++- 6 files changed, 122 insertions(+), 17 deletions(-) create mode 100644 docs/assets/js/jquery.tablesorter.js diff --git a/bootstrap.css b/bootstrap.css index 71637d42f0..4c56efca57 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: Sat Jan 7 04:34:04 PST 2012 + * Date: Sat Jan 7 12:21:05 PST 2012 */ html, body { margin: 0; @@ -1102,6 +1102,44 @@ table .span12 { width: 924px; margin-left: 0; } +table .header { + cursor: pointer; +} +table .header:after { + content: ""; + float: right; + margin-top: 7px; + border-width: 0 4px 4px; + border-style: solid; + border-color: #000 transparent; + visibility: hidden; +} +table .headerSortUp, table .headerSortDown { + background-color: rgba(141, 192, 219, 0.25); + text-shadow: 0 1px 1px rgba(255, 255, 255, 0.75); +} +table .header:hover:after { + visibility: visible; +} +table .headerSortDown:after, table .headerSortDown:hover:after { + visibility: visible; + filter: alpha(opacity=60); + -moz-opacity: 0.6; + opacity: 0.6; +} +table .headerSortUp:after { + border-bottom: none; + border-left: 4px solid transparent; + border-right: 4px solid transparent; + border-top: 4px solid #000; + visibility: visible; + -webkit-box-shadow: none; + -moz-box-shadow: none; + box-shadow: none; + filter: alpha(opacity=60); + -moz-opacity: 0.6; + opacity: 0.6; +} i { background-image: url(docs/assets/img/glyphicons-halflings-sprite.png); background-position: 0 0; @@ -1891,23 +1929,22 @@ i { border-color: #ddd; border-left-color: transparent; } -.tabs .menu-dropdown, .tabs .dropdown-menu { - top: 35px; +.tabs .dropdown-menu { + top: 37px; 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; +.tabs .dropdown-toggle .caret { margin-top: 15px; margin-left: 5px; } -.tabs li.open.menu .menu, .tabs .open.dropdown .dropdown-toggle { +.tabs .open .dropdown-toggle { border-color: #999; } -.tabs li.open a.menu:after, .tabs .dropdown.open .dropdown-toggle:after { - border-top-color: #555; +.tabs .open .dropdown-toggle .caret { + border-top-color: #fff; + filter: alpha(opacity=100); + -moz-opacity: 1; + opacity: 1; } .pills > li > a { padding: 0 15px; diff --git a/bootstrap.min.css b/bootstrap.min.css index b0df320366..bb491b7ac4 100644 --- a/bootstrap.min.css +++ b/bootstrap.min.css @@ -203,6 +203,11 @@ table .span9{float:none;width:684px;margin-left:0;} table .span10{float:none;width:764px;margin-left:0;} table .span11{float:none;width:844px;margin-left:0;} table .span12{float:none;width:924px;margin-left:0;} +table .header{cursor:pointer;}table .header:after{content:"";float:right;margin-top:7px;border-width:0 4px 4px;border-style:solid;border-color:#000 transparent;visibility:hidden;} +table .headerSortUp,table .headerSortDown{background-color:rgba(141, 192, 219, 0.25);text-shadow:0 1px 1px rgba(255, 255, 255, 0.75);} +table .header:hover:after{visibility:visible;} +table .headerSortDown:after,table .headerSortDown:hover:after{visibility:visible;filter:alpha(opacity=60);-moz-opacity:0.6;opacity:0.6;} +table .headerSortUp:after{border-bottom:none;border-left:4px solid transparent;border-right:4px solid transparent;border-top:4px solid #000;visibility:visible;-webkit-box-shadow:none;-moz-box-shadow:none;box-shadow:none;filter:alpha(opacity=60);-moz-opacity:0.6;opacity:0.6;} i{background-image:url(docs/assets/img/glyphicons-halflings-sprite.png);background-position:0 0;background-repeat:no-repeat;display:inline-block;vertical-align:text-top;width:14px;height:14px;} .glass{background-position:0 0;} .music{background-position:-24px 0;} @@ -349,10 +354,10 @@ i{background-image:url(docs/assets/img/glyphicons-halflings-sprite.png);backgrou .tabbable.tabs-right .tab-content{margin-right:100px;} .tabbable.tabs-right .tabs{float:right;}.tabbable.tabs-right .tabs>li{margin-left:-1px;}.tabbable.tabs-right .tabs>li>a{margin-left:0;-webkit-border-radius:0 4px 4px 0;-moz-border-radius:0 4px 4px 0;border-radius:0 4px 4px 0;}.tabbable.tabs-right .tabs>li>a:hover{border-left-color:#ddd;} .tabbable.tabs-right .tabs .active>a,.tabbable.tabs-right .tabs .active>a:hover{border-color:#ddd;border-left-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:37px;border-width:1px;} +.tabs .dropdown-toggle .caret{margin-top:15px;margin-left:5px;} +.tabs .open .dropdown-toggle{border-color:#999;} +.tabs .open .dropdown-toggle .caret{border-top-color:#fff;filter:alpha(opacity=100);-moz-opacity:1;opacity:1;} .pills>li>a{padding:0 15px;margin:5px 3px 5px 0;line-height:30px;text-shadow:0 1px 1px #ffffff;-webkit-border-radius:15px;-moz-border-radius:15px;border-radius:15px;}.pills>li>a:hover{color:#ffffff;text-decoration:none;text-shadow:0 1px 1px rgba(0, 0, 0, 0.25);background-color:#005580;} .pills .active>a{color:#ffffff;text-shadow:0 1px 1px rgba(0, 0, 0, 0.25);background-color:#0088cc;} .pills-vertical>li{float:none;} diff --git a/docs/assets/js/jquery.tablesorter.js b/docs/assets/js/jquery.tablesorter.js new file mode 100644 index 0000000000..8ca383e39d --- /dev/null +++ b/docs/assets/js/jquery.tablesorter.js @@ -0,0 +1,3 @@ +(function($){$.extend({tablesorter:new +function(){var parsers=[],widgets=[];this.defaults={cssHeader:"header",cssAsc:"headerSortUp",cssDesc:"headerSortDown",cssChildRow:"expand-child",sortInitialOrder:"asc",sortMultiSortKey:"shiftKey",sortForce:null,sortAppend:null,sortLocaleCompare:true,textExtraction:"simple",parsers:{},widgets:[],widgetZebra:{css:["even","odd"]},headers:{},widthFixed:false,cancelSelection:true,sortList:[],headerList:[],dateFormat:"us",decimal:'/\.|\,/g',onRenderHeader:null,selectorHeaders:'thead th',debug:false};function benchmark(s,d){log(s+","+(new Date().getTime()-d.getTime())+"ms");}this.benchmark=benchmark;function log(s){if(typeof console!="undefined"&&typeof console.debug!="undefined"){console.log(s);}else{alert(s);}}function buildParserCache(table,$headers){if(table.config.debug){var parsersDebug="";}if(table.tBodies.length==0)return;var rows=table.tBodies[0].rows;if(rows[0]){var list=[],cells=rows[0].cells,l=cells.length;for(var i=0;i<l;i++){var p=false;if($.metadata&&($($headers[i]).metadata()&&$($headers[i]).metadata().sorter)){p=getParserById($($headers[i]).metadata().sorter);}else if((table.config.headers[i]&&table.config.headers[i].sorter)){p=getParserById(table.config.headers[i].sorter);}if(!p){p=detectParserForColumn(table,rows,-1,i);}if(table.config.debug){parsersDebug+="column:"+i+" parser:"+p.id+"\n";}list.push(p);}}if(table.config.debug){log(parsersDebug);}return list;};function detectParserForColumn(table,rows,rowIndex,cellIndex){var l=parsers.length,node=false,nodeValue=false,keepLooking=true;while(nodeValue==''&&keepLooking){rowIndex++;if(rows[rowIndex]){node=getNodeFromRowAndCellIndex(rows,rowIndex,cellIndex);nodeValue=trimAndGetNodeText(table.config,node);if(table.config.debug){log('Checking if value was empty on row:'+rowIndex);}}else{keepLooking=false;}}for(var i=1;i<l;i++){if(parsers[i].is(nodeValue,table,node)){return parsers[i];}}return parsers[0];}function getNodeFromRowAndCellIndex(rows,rowIndex,cellIndex){return rows[rowIndex].cells[cellIndex];}function trimAndGetNodeText(config,node){return $.trim(getElementText(config,node));}function getParserById(name){var l=parsers.length;for(var i=0;i<l;i++){if(parsers[i].id.toLowerCase()==name.toLowerCase()){return parsers[i];}}return false;}function buildCache(table){if(table.config.debug){var cacheTime=new Date();}var totalRows=(table.tBodies[0]&&table.tBodies[0].rows.length)||0,totalCells=(table.tBodies[0].rows[0]&&table.tBodies[0].rows[0].cells.length)||0,parsers=table.config.parsers,cache={row:[],normalized:[]};for(var i=0;i<totalRows;++i){var c=$(table.tBodies[0].rows[i]),cols=[];if(c.hasClass(table.config.cssChildRow)){cache.row[cache.row.length-1]=cache.row[cache.row.length-1].add(c);continue;}cache.row.push(c);for(var j=0;j<totalCells;++j){cols.push(parsers[j].format(getElementText(table.config,c[0].cells[j]),table,c[0].cells[j]));}cols.push(cache.normalized.length);cache.normalized.push(cols);cols=null;};if(table.config.debug){benchmark("Building cache for "+totalRows+" rows:",cacheTime);}return cache;};function getElementText(config,node){var text="";if(!node)return"";if(!config.supportsTextContent)config.supportsTextContent=node.textContent||false;if(config.textExtraction=="simple"){if(config.supportsTextContent){text=node.textContent;}else{if(node.childNodes[0]&&node.childNodes[0].hasChildNodes()){text=node.childNodes[0].innerHTML;}else{text=node.innerHTML;}}}else{if(typeof(config.textExtraction)=="function"){text=config.textExtraction(node);}else{text=$(node).text();}}return text;}function appendToTable(table,cache){if(table.config.debug){var appendTime=new Date()}var c=cache,r=c.row,n=c.normalized,totalRows=n.length,checkCell=(n[0].length-1),tableBody=$(table.tBodies[0]),rows=[];for(var i=0;i<totalRows;i++){var pos=n[i][checkCell];rows.push(r[pos]);if(!table.config.appender){var l=r[pos].length;for(var j=0;j<l;j++){tableBody[0].appendChild(r[pos][j]);}}}if(table.config.appender){table.config.appender(table,rows);}rows=null;if(table.config.debug){benchmark("Rebuilt table:",appendTime);}applyWidget(table);setTimeout(function(){$(table).trigger("sortEnd");},0);};function buildHeaders(table){if(table.config.debug){var time=new Date();}var meta=($.metadata)?true:false;var header_index=computeTableHeaderCellIndexes(table);$tableHeaders=$(table.config.selectorHeaders,table).each(function(index){this.column=header_index[this.parentNode.rowIndex+"-"+this.cellIndex];this.order=formatSortingOrder(table.config.sortInitialOrder);this.count=this.order;if(checkHeaderMetadata(this)||checkHeaderOptions(table,index))this.sortDisabled=true;if(checkHeaderOptionsSortingLocked(table,index))this.order=this.lockedOrder=checkHeaderOptionsSortingLocked(table,index);if(!this.sortDisabled){var $th=$(this).addClass(table.config.cssHeader);if(table.config.onRenderHeader)table.config.onRenderHeader.apply($th);}table.config.headerList[index]=this;});if(table.config.debug){benchmark("Built headers:",time);log($tableHeaders);}return $tableHeaders;};function computeTableHeaderCellIndexes(t){var matrix=[];var lookup={};var thead=t.getElementsByTagName('THEAD')[0];var trs=thead.getElementsByTagName('TR');for(var i=0;i<trs.length;i++){var cells=trs[i].cells;for(var j=0;j<cells.length;j++){var c=cells[j];var rowIndex=c.parentNode.rowIndex;var cellId=rowIndex+"-"+c.cellIndex;var rowSpan=c.rowSpan||1;var colSpan=c.colSpan||1 +var firstAvailCol;if(typeof(matrix[rowIndex])=="undefined"){matrix[rowIndex]=[];}for(var k=0;k<matrix[rowIndex].length+1;k++){if(typeof(matrix[rowIndex][k])=="undefined"){firstAvailCol=k;break;}}lookup[cellId]=firstAvailCol;for(var k=rowIndex;k<rowIndex+rowSpan;k++){if(typeof(matrix[k])=="undefined"){matrix[k]=[];}var matrixrow=matrix[k];for(var l=firstAvailCol;l<firstAvailCol+colSpan;l++){matrixrow[l]="x";}}}}return lookup;}function checkCellColSpan(table,rows,row){var arr=[],r=table.tHead.rows,c=r[row].cells;for(var i=0;i<c.length;i++){var cell=c[i];if(cell.colSpan>1){arr=arr.concat(checkCellColSpan(table,headerArr,row++));}else{if(table.tHead.length==1||(cell.rowSpan>1||!r[row+1])){arr.push(cell);}}}return arr;};function checkHeaderMetadata(cell){if(($.metadata)&&($(cell).metadata().sorter===false)){return true;};return false;}function checkHeaderOptions(table,i){if((table.config.headers[i])&&(table.config.headers[i].sorter===false)){return true;};return false;}function checkHeaderOptionsSortingLocked(table,i){if((table.config.headers[i])&&(table.config.headers[i].lockedOrder))return table.config.headers[i].lockedOrder;return false;}function applyWidget(table){var c=table.config.widgets;var l=c.length;for(var i=0;i<l;i++){getWidgetById(c[i]).format(table);}}function getWidgetById(name){var l=widgets.length;for(var i=0;i<l;i++){if(widgets[i].id.toLowerCase()==name.toLowerCase()){return widgets[i];}}};function formatSortingOrder(v){if(typeof(v)!="Number"){return(v.toLowerCase()=="desc")?1:0;}else{return(v==1)?1:0;}}function isValueInArray(v,a){var l=a.length;for(var i=0;i<l;i++){if(a[i][0]==v){return true;}}return false;}function setHeadersCss(table,$headers,list,css){$headers.removeClass(css[0]).removeClass(css[1]);var h=[];$headers.each(function(offset){if(!this.sortDisabled){h[this.column]=$(this);}});var l=list.length;for(var i=0;i<l;i++){h[list[i][0]].addClass(css[list[i][1]]);}}function fixColumnWidth(table,$headers){var c=table.config;if(c.widthFixed){var colgroup=$('<colgroup>');$("tr:first td",table.tBodies[0]).each(function(){colgroup.append($('<col>').css('width',$(this).width()));});$(table).prepend(colgroup);};}function updateHeaderSortCount(table,sortList){var c=table.config,l=sortList.length;for(var i=0;i<l;i++){var s=sortList[i],o=c.headerList[s[0]];o.count=s[1];o.count++;}}function multisort(table,sortList,cache){if(table.config.debug){var sortTime=new Date();}var dynamicExp="var sortWrapper = function(a,b) {",l=sortList.length;for(var i=0;i<l;i++){var c=sortList[i][0];var order=sortList[i][1];var s=(table.config.parsers[c].type=="text")?((order==0)?makeSortFunction("text","asc",c):makeSortFunction("text","desc",c)):((order==0)?makeSortFunction("numeric","asc",c):makeSortFunction("numeric","desc",c));var e="e"+i;dynamicExp+="var "+e+" = "+s;dynamicExp+="if("+e+") { return "+e+"; } ";dynamicExp+="else { ";}var orgOrderCol=cache.normalized[0].length-1;dynamicExp+="return a["+orgOrderCol+"]-b["+orgOrderCol+"];";for(var i=0;i<l;i++){dynamicExp+="}; ";}dynamicExp+="return 0; ";dynamicExp+="}; ";if(table.config.debug){benchmark("Evaling expression:"+dynamicExp,new Date());}eval(dynamicExp);cache.normalized.sort(sortWrapper);if(table.config.debug){benchmark("Sorting on "+sortList.toString()+" and dir "+order+" time:",sortTime);}return cache;};function makeSortFunction(type,direction,index){var a="a["+index+"]",b="b["+index+"]";if(type=='text'&&direction=='asc'){return"("+a+" == "+b+" ? 0 : ("+a+" === null ? Number.POSITIVE_INFINITY : ("+b+" === null ? Number.NEGATIVE_INFINITY : ("+a+" < "+b+") ? -1 : 1 )));";}else if(type=='text'&&direction=='desc'){return"("+a+" == "+b+" ? 0 : ("+a+" === null ? Number.POSITIVE_INFINITY : ("+b+" === null ? Number.NEGATIVE_INFINITY : ("+b+" < "+a+") ? -1 : 1 )));";}else if(type=='numeric'&&direction=='asc'){return"("+a+" === null && "+b+" === null) ? 0 :("+a+" === null ? Number.POSITIVE_INFINITY : ("+b+" === null ? Number.NEGATIVE_INFINITY : "+a+" - "+b+"));";}else if(type=='numeric'&&direction=='desc'){return"("+a+" === null && "+b+" === null) ? 0 :("+a+" === null ? Number.POSITIVE_INFINITY : ("+b+" === null ? Number.NEGATIVE_INFINITY : "+b+" - "+a+"));";}};function makeSortText(i){return"((a["+i+"] < b["+i+"]) ? -1 : ((a["+i+"] > b["+i+"]) ? 1 : 0));";};function makeSortTextDesc(i){return"((b["+i+"] < a["+i+"]) ? -1 : ((b["+i+"] > a["+i+"]) ? 1 : 0));";};function makeSortNumeric(i){return"a["+i+"]-b["+i+"];";};function makeSortNumericDesc(i){return"b["+i+"]-a["+i+"];";};function sortText(a,b){if(table.config.sortLocaleCompare)return a.localeCompare(b);return((a<b)?-1:((a>b)?1:0));};function sortTextDesc(a,b){if(table.config.sortLocaleCompare)return b.localeCompare(a);return((b<a)?-1:((b>a)?1:0));};function sortNumeric(a,b){return a-b;};function sortNumericDesc(a,b){return b-a;};function getCachedSortType(parsers,i){return parsers[i].type;};this.construct=function(settings){return this.each(function(){if(!this.tHead||!this.tBodies)return;var $this,$document,$headers,cache,config,shiftDown=0,sortOrder;this.config={};config=$.extend(this.config,$.tablesorter.defaults,settings);$this=$(this);$.data(this,"tablesorter",config);$headers=buildHeaders(this);this.config.parsers=buildParserCache(this,$headers);cache=buildCache(this);var sortCSS=[config.cssDesc,config.cssAsc];fixColumnWidth(this);$headers.click(function(e){var totalRows=($this[0].tBodies[0]&&$this[0].tBodies[0].rows.length)||0;if(!this.sortDisabled&&totalRows>0){$this.trigger("sortStart");var $cell=$(this);var i=this.column;this.order=this.count++%2;if(this.lockedOrder)this.order=this.lockedOrder;if(!e[config.sortMultiSortKey]){config.sortList=[];if(config.sortForce!=null){var a=config.sortForce;for(var j=0;j<a.length;j++){if(a[j][0]!=i){config.sortList.push(a[j]);}}}config.sortList.push([i,this.order]);}else{if(isValueInArray(i,config.sortList)){for(var j=0;j<config.sortList.length;j++){var s=config.sortList[j],o=config.headerList[s[0]];if(s[0]==i){o.count=s[1];o.count++;s[1]=o.count%2;}}}else{config.sortList.push([i,this.order]);}};setTimeout(function(){setHeadersCss($this[0],$headers,config.sortList,sortCSS);appendToTable($this[0],multisort($this[0],config.sortList,cache));},1);return false;}}).mousedown(function(){if(config.cancelSelection){this.onselectstart=function(){return false};return false;}});$this.bind("update",function(){var me=this;setTimeout(function(){me.config.parsers=buildParserCache(me,$headers);cache=buildCache(me);},1);}).bind("updateCell",function(e,cell){var config=this.config;var pos=[(cell.parentNode.rowIndex-1),cell.cellIndex];cache.normalized[pos[0]][pos[1]]=config.parsers[pos[1]].format(getElementText(config,cell),cell);}).bind("sorton",function(e,list){$(this).trigger("sortStart");config.sortList=list;var sortList=config.sortList;updateHeaderSortCount(this,sortList);setHeadersCss(this,$headers,sortList,sortCSS);appendToTable(this,multisort(this,sortList,cache));}).bind("appendCache",function(){appendToTable(this,cache);}).bind("applyWidgetId",function(e,id){getWidgetById(id).format(this);}).bind("applyWidgets",function(){applyWidget(this);});if($.metadata&&($(this).metadata()&&$(this).metadata().sortlist)){config.sortList=$(this).metadata().sortlist;}if(config.sortList.length>0){$this.trigger("sorton",[config.sortList]);}applyWidget(this);});};this.addParser=function(parser){var l=parsers.length,a=true;for(var i=0;i<l;i++){if(parsers[i].id.toLowerCase()==parser.id.toLowerCase()){a=false;}}if(a){parsers.push(parser);};};this.addWidget=function(widget){widgets.push(widget);};this.formatFloat=function(s){var i=parseFloat(s);return(isNaN(i))?0:i;};this.formatInt=function(s){var i=parseInt(s);return(isNaN(i))?0:i;};this.isDigit=function(s,config){return/^[-+]?\d*$/.test($.trim(s.replace(/[,.']/g,'')));};this.clearTableBody=function(table){if($.browser.msie){function empty(){while(this.firstChild)this.removeChild(this.firstChild);}empty.apply(table.tBodies[0]);}else{table.tBodies[0].innerHTML="";}};}});$.fn.extend({tablesorter:$.tablesorter.construct});var ts=$.tablesorter;ts.addParser({id:"text",is:function(s){return true;},format:function(s){return $.trim(s.toLocaleLowerCase());},type:"text"});ts.addParser({id:"digit",is:function(s,table){var c=table.config;return $.tablesorter.isDigit(s,c);},format:function(s){return $.tablesorter.formatFloat(s);},type:"numeric"});ts.addParser({id:"currency",is:function(s){return/^[£$€?.]/.test(s);},format:function(s){return $.tablesorter.formatFloat(s.replace(new RegExp(/[£$€]/g),""));},type:"numeric"});ts.addParser({id:"ipAddress",is:function(s){return/^\d{2,3}[\.]\d{2,3}[\.]\d{2,3}[\.]\d{2,3}$/.test(s);},format:function(s){var a=s.split("."),r="",l=a.length;for(var i=0;i<l;i++){var item=a[i];if(item.length==2){r+="0"+item;}else{r+=item;}}return $.tablesorter.formatFloat(r);},type:"numeric"});ts.addParser({id:"url",is:function(s){return/^(https?|ftp|file):\/\/$/.test(s);},format:function(s){return jQuery.trim(s.replace(new RegExp(/(https?|ftp|file):\/\//),''));},type:"text"});ts.addParser({id:"isoDate",is:function(s){return/^\d{4}[\/-]\d{1,2}[\/-]\d{1,2}$/.test(s);},format:function(s){return $.tablesorter.formatFloat((s!="")?new Date(s.replace(new RegExp(/-/g),"/")).getTime():"0");},type:"numeric"});ts.addParser({id:"percent",is:function(s){return/\%$/.test($.trim(s));},format:function(s){return $.tablesorter.formatFloat(s.replace(new RegExp(/%/g),""));},type:"numeric"});ts.addParser({id:"usLongDate",is:function(s){return s.match(new RegExp(/^[A-Za-z]{3,10}\.? [0-9]{1,2}, ([0-9]{4}|'?[0-9]{2}) (([0-2]?[0-9]:[0-5][0-9])|([0-1]?[0-9]:[0-5][0-9]\s(AM|PM)))$/));},format:function(s){return $.tablesorter.formatFloat(new Date(s).getTime());},type:"numeric"});ts.addParser({id:"shortDate",is:function(s){return/\d{1,2}[\/\-]\d{1,2}[\/\-]\d{2,4}/.test(s);},format:function(s,table){var c=table.config;s=s.replace(/\-/g,"/");if(c.dateFormat=="us"){s=s.replace(/(\d{1,2})[\/\-](\d{1,2})[\/\-](\d{4})/,"$3/$1/$2");}else if(c.dateFormat=="uk"){s=s.replace(/(\d{1,2})[\/\-](\d{1,2})[\/\-](\d{4})/,"$3/$2/$1");}else if(c.dateFormat=="dd/mm/yy"||c.dateFormat=="dd-mm-yy"){s=s.replace(/(\d{1,2})[\/\-](\d{1,2})[\/\-](\d{2})/,"$1/$2/$3");}return $.tablesorter.formatFloat(new Date(s).getTime());},type:"numeric"});ts.addParser({id:"time",is:function(s){return/^(([0-2]?[0-9]:[0-5][0-9])|([0-1]?[0-9]:[0-5][0-9]\s(am|pm)))$/.test(s);},format:function(s){return $.tablesorter.formatFloat(new Date("2000/01/01 "+s).getTime());},type:"numeric"});ts.addParser({id:"metadata",is:function(s){return false;},format:function(s,table,cell){var c=table.config,p=(!c.parserMetadataName)?'sortValue':c.parserMetadataName;return $(cell).metadata()[p];},type:"numeric"});ts.addWidget({id:"zebra",format:function(table){if(table.config.debug){var time=new Date();}var $tr,row=-1,odd;$("tr:visible",table.tBodies[0]).each(function(i){$tr=$(this);if(!$tr.hasClass(table.config.cssChildRow))row++;odd=(row%2==0);$tr.removeClass(table.config.widgetZebra.css[odd?0:1]).addClass(table.config.widgetZebra.css[odd?1:0])});if(table.config.debug){$.tablesorter.benchmark("Applying Zebra widget",time);}}});})(jQuery); \ No newline at end of file diff --git a/docs/base-css.html b/docs/base-css.html index 5a8b0b2679..47858fe102 100644 --- a/docs/base-css.html +++ b/docs/base-css.html @@ -1486,7 +1486,7 @@ <div class="span4"> <h3>How to use</h3> <p>With v2.0.0, the <code><i></code> tag is essentially dedicated to iconography. To use the icons, you can place the follow code wherever you like one to appear:</p> -<pre class="prettyprint"> +<pre class="prettyprint linenums"> <i class="chevron-left"></i> </pre> <p>There are over 100 classes to choose from for your icons. Just add an <code><i></code> tag with the right class and you're set. You can find the full list in sprites.less or right here in this document.</p> @@ -1554,11 +1554,13 @@ <!-- Le javascript --> <!-- Placed at the end of the document so the pages load faster --> <script src="http://code.jquery.com/jquery-1.7.min.js"></script> + <script src="assets/js/jquery.tablesorter.js"></script> <script src="assets/js/google-code-prettify/prettify.js"></script> <script src="assets/js/application.js"></script> <script src="../js/bootstrap-dropdown.js"></script> <script> $(function () { + $("#sortTableExample").tablesorter({ sortList: [[1,0]] }); $('.dropdown-toggle').dropdown(); }) </script> diff --git a/lib/tables.less b/lib/tables.less index d1a690a3fd..92ac57c39c 100644 --- a/lib/tables.less +++ b/lib/tables.less @@ -116,3 +116,57 @@ table { .span11 { .tableColumns(11); } .span12 { .tableColumns(12); } } + + + +// TABLESORTER +// ----------- +// Support for the tablesorter jQuerdy plugin + +table { + // Tablesorting styles w/ jQuery plugin + .header { + cursor: pointer; + &:after { + content: ""; + float: right; + margin-top: 7px; + border-width: 0 4px 4px; + border-style: solid; + border-color: #000 transparent; + visibility: hidden; + } + } + // Style the sorted column headers (THs) + .headerSortUp, + .headerSortDown { + background-color: rgba(141,192,219,.25); + text-shadow: 0 1px 1px rgba(255,255,255,.75); + } + // Style the ascending (reverse alphabetical) column header + .header:hover { + &:after { + visibility:visible; + } + } + // Style the descending (alphabetical) column header + .headerSortDown, + .headerSortDown:hover { + &:after { + visibility:visible; + .opacity(60); + } + } + // Style the ascending (reverse alphabetical) column header + .headerSortUp { + &:after { + border-bottom: none; + border-left: 4px solid transparent; + border-right: 4px solid transparent; + border-top: 4px solid #000; + visibility:visible; + .box-shadow(none); //can't add boxshadow to downward facing arrow :( + .opacity(60); + } + } +} diff --git a/lib/tabs-pills.less b/lib/tabs-pills.less index 8e8856a567..4a94266a34 100644 --- a/lib/tabs-pills.less +++ b/lib/tabs-pills.less @@ -155,7 +155,7 @@ // Dropdowns in tabs .tabs { .dropdown-menu { - top: 36px; + top: 37px; border-width: 1px; } .dropdown-toggle .caret { @@ -165,6 +165,10 @@ .open .dropdown-toggle { border-color: #999; } + .open .dropdown-toggle .caret { + border-top-color: #fff; + .opacity(100); + } } // Pills -- GitLab From 28420311d89fe2656320cee7306d01a361f1c3c7 Mon Sep 17 00:00:00 2001 From: Mark Otto <markdotto@gmail.com> Date: Sat, 7 Jan 2012 13:40:05 -0800 Subject: [PATCH 216/318] more table docs cleanup --- docs/base-css.html | 414 ++++++++++++++++++++++++++------------------- 1 file changed, 244 insertions(+), 170 deletions(-) diff --git a/docs/base-css.html b/docs/base-css.html index 47858fe102..c1cb3fd2dd 100644 --- a/docs/base-css.html +++ b/docs/base-css.html @@ -556,211 +556,285 @@ </tbody> </table> + <h2>Example tables</h2> + <h3>1. Default table styles</h3> - <p>All tables will be automatically styled with only the essential borders to ensure readability and maintain structure. No need to add extra classes or attributes.</p> - <table> - <thead> - <tr> - <th>#</th> - <th>First Name</th> - <th>Last Name</th> - <th>Language</th> - </tr> - </thead> - <tbody> - <tr> - <td>1</td> - <td>Some</td> - <td>One</td> - <td>English</td> - </tr> - <tr> - <td>2</td> - <td>Joe</td> - <td>Sixpack</td> - <td>English</td> - </tr> - <tr> - <td>3</td> - <td>Stu</td> - <td>Dent</td> - <td>Code</td> - </tr> - </tbody> - </table> + <div class="row"> + <div class="span4"> + <p>Tables are automatically styled with only the a few borders to ensure readability and maintain structure. No classes are required.</p> <pre class="prettyprint linenums"> <table> ... </table></pre> + </div> + <div class="span8"> + <table> + <thead> + <tr> + <th>#</th> + <th>First Name</th> + <th>Last Name</th> + <th>Language</th> + </tr> + </thead> + <tbody> + <tr> + <td>1</td> + <td>Mark</td> + <td>Otto</td> + <td>CSS</td> + </tr> + <tr> + <td>2</td> + <td>Jacob</td> + <td>Thornton</td> + <td>Javascript</td> + </tr> + <tr> + <td>3</td> + <td>Stu</td> + <td>Dent</td> + <td>HTML</td> + </tr> + </tbody> + </table> + </div> + </div> - <br> <h3>2. Striped table</h3> - <p>Get a little fancy with your tables by adding zebra-striping—just add the <code>.striped-table</code> class.</p> - <table class="striped-table"> - <thead> - <tr> - <th>#</th> - <th>First Name</th> - <th>Last Name</th> - <th>Language</th> - </tr> - </thead> - <tbody> - <tr> - <td>1</td> - <td>Some</td> - <td>One</td> - <td>English</td> - </tr> - <tr> - <td>2</td> - <td>Joe</td> - <td>Sixpack</td> - <td>English</td> - </tr> - <tr> - <td>3</td> - <td>Stu</td> - <td>Dent</td> - <td>Code</td> - </tr> - </tbody> - </table> - <p><strong>Note:</strong> Zebra-striping is a progressive enhancement not available for older browsers like IE8 and below.</p> -<pre class="prettyprint linenums"> + <div class="row"> + <div class="span4"> + <p>Get a little fancy with your tables by adding zebra-striping—just add the <code>.striped-table</code> class.</p> + <p class="muted"><strong>Note:</strong> Sprited tables use the <code>:nth-child</code> CSS selector and is not available in IE7-IE8.</p> +<pre class="prettyprint linenums" style="margin-bottom: 18px;"> <table class="striped-table"> ... </table></pre> + </div> + <div class="span8"> + <table class="striped-table"> + <thead> + <tr> + <th>#</th> + <th>First Name</th> + <th>Last Name</th> + <th>Language</th> + </tr> + </thead> + <tbody> + <tr> + <td>1</td> + <td>Mark</td> + <td>Otto</td> + <td>CSS</td> + </tr> + <tr> + <td>2</td> + <td>Jacob</td> + <td>Thornton</td> + <td>Javascript</td> + </tr> + <tr> + <td>3</td> + <td>Stu</td> + <td>Dent</td> + <td>HTML</td> + </tr> + </tbody> + </table> + </div> + </div> - <br> <h3>3. Bordered table</h3> - <p>Add borders around the entire table and between each row, plus a bit of rounded corners for aesthetic purposes.</p> - <table class="bordered-table"> - <thead> - <tr> - <th>#</th> - <th>First Name</th> - <th>Last Name</th> - <th>Language</th> - </tr> - </thead> - <tbody> - <tr> - <td>1</td> - <td colspan="2">Some One</td> - <td>HTML</td> - </tr> - <tr> - <td>2</td> - <td>Joe</td> - <td>Sixpack</td> - <td rowspan="2">Javascript</td> - </tr> - </tr> - <td>3</td> - <td>Joe</td> - <td>Sixpack</td> - </tr> - <tr> - <td>3</td> - <td>Stu</td> - <td>Dent</td> - <td>CSS</td> - </tr> - </tbody> - </table> + <div class="row"> + <div class="span4"> + <p>Add borders around the entire table and rounded corners for aesthetic purposes.</p> <pre class="prettyprint linenums"> <table class="bordered-table"> ... </table></pre> + </div> + <div class="span8"> + <table class="bordered-table"> + <thead> + <tr> + <th>#</th> + <th>First Name</th> + <th>Last Name</th> + <th>Language</th> + </tr> + </thead> + <tbody> + <tr> + <td>1</td> + <td colspan="2">Mark Otto</td> + <td>CSS</td> + </tr> + <tr> + <td>2</td> + <td>Jacob</td> + <td>Thornton</td> + <td rowspan="2">Javascript</td> + </tr> + </tr> + <td>3</td> + <td>Stu</td> + <td>Dent</td> + </tr> + <tr> + <td>3</td> + <td>Brosef</td> + <td>Stalin</td> + <td>HTML</td> + </tr> + </tbody> + </table> + </div> + </div> - <br> <h3>4. Condensed table</h3> - <p>Make your tables more compact by adding the <code>.condensed-table</code> class to cut table cell padding in half (from 10px to 5px).</p> - <table class="condensed-table"> - <thead> - <tr> - <th>#</th> - <th>First Name</th> - <th>Last Name</th> - <th>Language</th> - </tr> - </thead> - <tbody> - <tr> - <td>1</td> - <td>Some</td> - <td>One</td> - <td>English</td> - </tr> - <tr> - <td>2</td> - <td>Joe</td> - <td>Sixpack</td> - <td>English</td> - </tr> - <tr> - <td>3</td> - <td>Stu</td> - <td>Dent</td> - <td>Code</td> - </tr> - </tbody> - </table> -<pre class="prettyprint linenums"> + <div class="row"> + <div class="span4"> + <p>Make your tables more compact by adding the <code>.condensed-table</code> class to cut table cell padding in half (from 10px to 5px).</p> +<pre class="prettyprint linenums" style="margin-bottom: 18px;"> <table class="condensed-table"> ... </table></pre> + </div> + <div class="span8"> + <table class="condensed-table"> + <thead> + <tr> + <th>#</th> + <th>First Name</th> + <th>Last Name</th> + <th>Language</th> + </tr> + </thead> + <tbody> + <tr> + <td>1</td> + <td>Mark</td> + <td>Otto</td> + <td>CSS</td> + </tr> + <tr> + <td>2</td> + <td>Jacob</td> + <td>Thornton</td> + <td>Javascript</td> + </tr> + <tr> + <td>3</td> + <td>Stu</td> + <td>Dent</td> + <td>HTML</td> + </tr> + </tbody> + </table> + </div> + </div> + - <br> <h3>5. Striped table w/ TableSorter.js</h3> - <p>Taking the previous example, we improve the usefulness of our tables by providing sorting functionality via <a href="http://jquery.com">jQuery</a> and the <a href="http://tablesorter.com/docs/">Tablesorter</a> plugin. <strong>Click any column’s header to change the sort.</strong></p> - <table class="striped-table" id="sortTableExample"> - <thead> - <tr> - <th>#</th> - <th class="yellow">First Name</th> - <th class="blue">Last Name</th> - <th class="green">Language</th> - </tr> - </thead> - <tbody> - <tr> - <td>1</td> - <td>Your</td> - <td>One</td> - <td>English</td> - </tr> - <tr> - <td>2</td> - <td>Joe</td> - <td>Sixpack</td> - <td>English</td> - </tr> - <tr> - <td>3</td> - <td>Stu</td> - <td>Dent</td> - <td>Code</td> - </tr> - </tbody> - </table> + <div class="row"> + <div class="span4"> + <p>Include the <a href="http://jquery.com">jQuery</a> <a href="http://tablesorter.com/docs/">Tablesorter</a> plugin and automaically get clear styles for sorted columns.</p> <pre class="prettyprint linenums"> -<script src="js/jquery/jquery.tablesorter.min.js"></script> +<script src="jquery.tablesorter.js"></script> <script > $(function() { - $("table#sortTableExample").tablesorter({ sortList: [[1,0]] }); + $("table#sortTableExample") + .tablesorter({ + sortList: [[1,0]] + }); }); </script> <table class="striped-table"> ... </table></pre> - + </div> + <div class="span8"> + <table class="striped-table tablesorter-example"> + <thead> + <tr> + <th>#</th> + <th class="yellow">First Name</th> + <th class="blue">Last Name</th> + <th class="green">Language</th> + </tr> + </thead> + <tbody> + <tr> + <td>1</td> + <td>Mark</td> + <td>Otto</td> + <td>CSS</td> + </tr> + <tr> + <td>2</td> + <td>Jacob</td> + <td>Thornton</td> + <td>Javascript</td> + </tr> + <tr> + <td>3</td> + <td>Stu</td> + <td>Dent</td> + <td>HTML</td> + </tr> + <tr> + <td>4</td> + <td>Brosef</td> + <td>Stalin</td> + <td>HTML</td> + </tr> + </tbody> + </table> + <p>Styles for the Tablesorter, zebra striping, borders, and condensing may all compound in any variation to fit your needs.</p> + <table class="striped-table bordered-table condensed-table tablesorter-example"> + <thead> + <tr> + <th>#</th> + <th class="yellow">First Name</th> + <th class="blue">Last Name</th> + <th class="green">Language</th> + </tr> + </thead> + <tbody> + <tr> + <td>1</td> + <td>Mark</td> + <td>Otto</td> + <td>CSS</td> + </tr> + <tr> + <td>2</td> + <td>Jacob</td> + <td>Thornton</td> + <td>Javascript</td> + </tr> + <tr> + <td>3</td> + <td>Stu</td> + <td>Dent</td> + <td>HTML</td> + </tr> + <tr> + <td>4</td> + <td>Brosef</td> + <td>Stalin</td> + <td>HTML</td> + </tr> + </tbody> + </table> + </div> + </div> </section> @@ -1560,7 +1634,7 @@ <script src="../js/bootstrap-dropdown.js"></script> <script> $(function () { - $("#sortTableExample").tablesorter({ sortList: [[1,0]] }); + $(".tablesorter-example").tablesorter({ sortList: [[1,0]] }); $('.dropdown-toggle').dropdown(); }) </script> -- GitLab From 1438b14f74fc30c3b9bd63bd54d3bcfe5ce33c3c Mon Sep 17 00:00:00 2001 From: Mark Otto <markdotto@gmail.com> Date: Sat, 7 Jan 2012 15:52:57 -0800 Subject: [PATCH 217/318] overhauled docs to include example markup, add language around browser support and classes --- bootstrap.css | 332 +++++++++++++++++++---------------------- bootstrap.min.css | 21 +-- docs/components.html | 81 +++++++--- lib/bootstrap.less | 2 +- lib/mixins.less | 19 ++- lib/progress-bars.less | 180 +++++++++++----------- 6 files changed, 330 insertions(+), 305 deletions(-) diff --git a/bootstrap.css b/bootstrap.css index cc58b2ab81..f6dd392266 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: Sat Jan 7 13:52:27 PST 2012 + * Date: Sat Jan 7 15:52:40 PST 2012 */ html, body { margin: 0; @@ -1574,180 +1574,6 @@ i { -moz-opacity: 0.4; opacity: 0.4; } -@-webkit-keyframes progress-bar-stripes { - from { - background-position: 0 0; - } - to { - background-position: 40px 0; - } -} -/* COMMENTED OUT SO LESS COMPILES -@-moz-keyframes progress-bar-stripes { - from { - background-position: 0 0; - } - to { - background-position: 40px 0; - } -} -*/ -@keyframes progress-bar-stripes { - from { - background-position: 0 0; - } - to { - background-position: 40px 0; - } -} -.progress { - height: 25px; - margin-bottom: 18px; - overflow: hidden; - -webkit-box-shadow: inset 0 1px 1px 0 rgba(0, 0, 0, 0.3); - -moz-box-shadow: inset 0 1px 1px 0 rgba(0, 0, 0, 0.3); - box-shadow: inset 0 1px 1px 0 rgba(0, 0, 0, 0.3); - background-color: #f5f5f5; - 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); - background-repeat: repeat-x; - filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#f5f5f5', GradientType=0); - -webkit-border-radius: 10px; - -moz-border-radius: 10px; - border-radius: 10px; - border: 1px solid #ddd; - border-color: rgba(0, 0, 0, 0); -} -.progress.active .bar { - -webkit-animation: progress-bar-stripes 2s linear infinite; - -moz-animation: progress-bar-stripes 2s linear infinite; - animation: progress-bar-stripes 2s linear infinite; -} -.progress.animated .bar { - -webkit-transition: width 0.6s ease; - -moz-transition: width 0.6s ease; - -ms-transition: width 0.6s ease; - -o-transition: width 0.6s ease; - transition: width 0.6s ease; -} -.progress.danger .bar, .progress.error .bar { - background-color: #c43c35; - 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); - background-repeat: repeat-x; - filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ee5f5b', endColorstr='#c43c35', GradientType=0); -} -.progress.danger.striped .bar, .progress.error.striped .bar { - -webkit-background-size: 40px 40px; - -moz-background-size: 40px 40px; - -o-background-size: 40px 40px; - background-size: 40px 40px; - background-color: #ee5f5b; - background-image: -webkit-gradient(linear, 0 100%, 100% 0, color-stop(0.25, rgba(255, 255, 255, 0.2)), color-stop(0.25, transparent), color-stop(0.5, transparent), color-stop(0.5, rgba(255, 255, 255, 0.2)), color-stop(0.75, rgba(255, 255, 255, 0.2)), color-stop(0.75, transparent), to(transparent)); - background-image: -webkit-linear-gradient(-45deg, rgba(255, 255, 255, 0.2) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.2) 50%, rgba(255, 255, 255, 0.2) 75%, transparent 75%, transparent); - background-image: -moz-linear-gradient(-45deg, rgba(255, 255, 255, 0.2) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.2) 50%, rgba(255, 255, 255, 0.2) 75%, transparent 75%, transparent); - background-image: -ms-linear-gradient(-45deg, rgba(255, 255, 255, 0.2) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.2) 50%, rgba(255, 255, 255, 0.2) 75%, transparent 75%, transparent); - background-image: -o-linear-gradient(-45deg, rgba(255, 255, 255, 0.2) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.2) 50%, rgba(255, 255, 255, 0.2) 75%, transparent 75%, transparent); - background-image: linear-gradient(-45deg, rgba(255, 255, 255, 0.2) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.2) 50%, rgba(255, 255, 255, 0.2) 75%, transparent 75%, transparent); -} -.progress.success .bar { - background-color: #57a957; - background-image: -khtml-gradient(linear, left top, left bottom, from(#62c462), to(#57a957)); - background-image: -moz-linear-gradient(top, #62c462, #57a957); - background-image: -ms-linear-gradient(top, #62c462, #57a957); - background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #62c462), color-stop(100%, #57a957)); - background-image: -webkit-linear-gradient(top, #62c462, #57a957); - background-image: -o-linear-gradient(top, #62c462, #57a957); - background-image: linear-gradient(top, #62c462, #57a957); - background-repeat: repeat-x; - filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#62c462', endColorstr='#57a957', GradientType=0); -} -.progress.success.striped .bar { - -webkit-background-size: 40px 40px; - -moz-background-size: 40px 40px; - -o-background-size: 40px 40px; - background-size: 40px 40px; - background-color: #62c462; - background-image: -webkit-gradient(linear, 0 100%, 100% 0, color-stop(0.25, rgba(255, 255, 255, 0.2)), color-stop(0.25, transparent), color-stop(0.5, transparent), color-stop(0.5, rgba(255, 255, 255, 0.2)), color-stop(0.75, rgba(255, 255, 255, 0.2)), color-stop(0.75, transparent), to(transparent)); - background-image: -webkit-linear-gradient(-45deg, rgba(255, 255, 255, 0.2) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.2) 50%, rgba(255, 255, 255, 0.2) 75%, transparent 75%, transparent); - background-image: -moz-linear-gradient(-45deg, rgba(255, 255, 255, 0.2) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.2) 50%, rgba(255, 255, 255, 0.2) 75%, transparent 75%, transparent); - background-image: -ms-linear-gradient(-45deg, rgba(255, 255, 255, 0.2) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.2) 50%, rgba(255, 255, 255, 0.2) 75%, transparent 75%, transparent); - background-image: -o-linear-gradient(-45deg, rgba(255, 255, 255, 0.2) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.2) 50%, rgba(255, 255, 255, 0.2) 75%, transparent 75%, transparent); - background-image: linear-gradient(-45deg, rgba(255, 255, 255, 0.2) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.2) 50%, rgba(255, 255, 255, 0.2) 75%, transparent 75%, transparent); -} -.progress.info .bar { - background-color: #339bb9; - background-image: -khtml-gradient(linear, left top, left bottom, from(#5bc0de), to(#339bb9)); - background-image: -moz-linear-gradient(top, #5bc0de, #339bb9); - background-image: -ms-linear-gradient(top, #5bc0de, #339bb9); - background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #5bc0de), color-stop(100%, #339bb9)); - background-image: -webkit-linear-gradient(top, #5bc0de, #339bb9); - background-image: -o-linear-gradient(top, #5bc0de, #339bb9); - background-image: linear-gradient(top, #5bc0de, #339bb9); - background-repeat: repeat-x; - filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#5bc0de', endColorstr='#339bb9', GradientType=0); -} -.progress.info.striped .bar { - -webkit-background-size: 40px 40px; - -moz-background-size: 40px 40px; - -o-background-size: 40px 40px; - background-size: 40px 40px; - background-color: #5bc0de; - background-image: -webkit-gradient(linear, 0 100%, 100% 0, color-stop(0.25, rgba(255, 255, 255, 0.2)), color-stop(0.25, transparent), color-stop(0.5, transparent), color-stop(0.5, rgba(255, 255, 255, 0.2)), color-stop(0.75, rgba(255, 255, 255, 0.2)), color-stop(0.75, transparent), to(transparent)); - background-image: -webkit-linear-gradient(-45deg, rgba(255, 255, 255, 0.2) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.2) 50%, rgba(255, 255, 255, 0.2) 75%, transparent 75%, transparent); - background-image: -moz-linear-gradient(-45deg, rgba(255, 255, 255, 0.2) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.2) 50%, rgba(255, 255, 255, 0.2) 75%, transparent 75%, transparent); - background-image: -ms-linear-gradient(-45deg, rgba(255, 255, 255, 0.2) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.2) 50%, rgba(255, 255, 255, 0.2) 75%, transparent 75%, transparent); - background-image: -o-linear-gradient(-45deg, rgba(255, 255, 255, 0.2) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.2) 50%, rgba(255, 255, 255, 0.2) 75%, transparent 75%, transparent); - background-image: linear-gradient(-45deg, rgba(255, 255, 255, 0.2) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.2) 50%, rgba(255, 255, 255, 0.2) 75%, transparent 75%, transparent); -} -.progress.striped .bar { - -webkit-background-size: 40px 40px; - -moz-background-size: 40px 40px; - -o-background-size: 40px 40px; - background-size: 40px 40px; - background-color: #62c462; - background-image: -webkit-gradient(linear, 0 100%, 100% 0, color-stop(0.25, rgba(255, 255, 255, 0.2)), color-stop(0.25, transparent), color-stop(0.5, transparent), color-stop(0.5, rgba(255, 255, 255, 0.2)), color-stop(0.75, rgba(255, 255, 255, 0.2)), color-stop(0.75, transparent), to(transparent)); - background-image: -webkit-linear-gradient(-45deg, rgba(255, 255, 255, 0.2) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.2) 50%, rgba(255, 255, 255, 0.2) 75%, transparent 75%, transparent); - background-image: -moz-linear-gradient(-45deg, rgba(255, 255, 255, 0.2) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.2) 50%, rgba(255, 255, 255, 0.2) 75%, transparent 75%, transparent); - background-image: -ms-linear-gradient(-45deg, rgba(255, 255, 255, 0.2) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.2) 50%, rgba(255, 255, 255, 0.2) 75%, transparent 75%, transparent); - background-image: -o-linear-gradient(-45deg, rgba(255, 255, 255, 0.2) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.2) 50%, rgba(255, 255, 255, 0.2) 75%, transparent 75%, transparent); - background-image: linear-gradient(-45deg, rgba(255, 255, 255, 0.2) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.2) 50%, rgba(255, 255, 255, 0.2) 75%, transparent 75%, transparent); -} -.progress .bar { - width: 0%; - height: 100%; - -webkit-box-sizing: border-box; - -moz-box-sizing: border-box; - box-sizing: border-box; - background-color: #57a957; - background-image: -khtml-gradient(linear, left top, left bottom, from(#62c462), to(#57a957)); - background-image: -moz-linear-gradient(top, #62c462, #57a957); - background-image: -ms-linear-gradient(top, #62c462, #57a957); - background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #62c462), color-stop(100%, #57a957)); - background-image: -webkit-linear-gradient(top, #62c462, #57a957); - background-image: -o-linear-gradient(top, #62c462, #57a957); - background-image: linear-gradient(top, #62c462, #57a957); - background-repeat: repeat-x; - filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#62c462', endColorstr='#57a957', GradientType=0); - border-color: #57a957 #57a957 #3d773d; - border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25); - -webkit-box-shadow: inset 0 2px 0 rgba(255, 255, 255, 0.2), inset -1px -1px 0 rgba(0, 0, 0, 0.25), inset 1px 1px 0 rgba(0, 0, 0, 0.25); - -moz-box-shadow: inset 0 2px 0 rgba(255, 255, 255, 0.2), inset -1px -1px 0 rgba(0, 0, 0, 0.25), inset 1px 1px 0 rgba(0, 0, 0, 0.25); - box-shadow: inset 0 2px 0 rgba(255, 255, 255, 0.2), inset -1px -1px 0 rgba(0, 0, 0, 0.25), inset 1px 1px 0 rgba(0, 0, 0, 0.25); - -webkit-border-radius: 10px; - -moz-border-radius: 10px; - border-radius: 10px; -} .navbar { overflow: visible; } @@ -3102,6 +2928,162 @@ a.thumbnail:hover { .label.notice { background-color: #62cffc; } +@-webkit-keyframes progress-bar-stripes { + from { + background-position: 0 0; + } + to { + background-position: 40px 0; + } +} +@keyframes progress-bar-stripes { + from { + background-position: 0 0; + } + to { + background-position: 40px 0; + } +} +.progress, .progress .bar { + -webkit-border-radius: 4px; + -moz-border-radius: 4px; + border-radius: 4px; +} +.progress { + height: 18px; + margin-bottom: 18px; + background-color: #f9f9f9; + background-image: -khtml-gradient(linear, left top, left bottom, from(#f5f5f5), to(#f9f9f9)); + background-image: -moz-linear-gradient(top, #f5f5f5, #f9f9f9); + background-image: -ms-linear-gradient(top, #f5f5f5, #f9f9f9); + background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #f5f5f5), color-stop(100%, #f9f9f9)); + background-image: -webkit-linear-gradient(top, #f5f5f5, #f9f9f9); + background-image: -o-linear-gradient(top, #f5f5f5, #f9f9f9); + background-image: linear-gradient(top, #f5f5f5, #f9f9f9); + background-repeat: repeat-x; + filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#f5f5f5', endColorstr='#f9f9f9', GradientType=0); + border: 1px solid #ddd; + -webkit-box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1); + -moz-box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1); + box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1); +} +.progress .bar { + width: 0%; + height: 20px; + margin: -1px; + background-color: #57a957; + background-image: -khtml-gradient(linear, left top, left bottom, from(#62c462), to(#57a957)); + background-image: -moz-linear-gradient(top, #62c462, #57a957); + background-image: -ms-linear-gradient(top, #62c462, #57a957); + background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #62c462), color-stop(100%, #57a957)); + background-image: -webkit-linear-gradient(top, #62c462, #57a957); + background-image: -o-linear-gradient(top, #62c462, #57a957); + background-image: linear-gradient(top, #62c462, #57a957); + background-repeat: repeat-x; + filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#62c462', endColorstr='#57a957', GradientType=0); + background-color: #0480be; + background-image: -khtml-gradient(linear, left top, left bottom, from(#149bdf), to(#0480be)); + background-image: -moz-linear-gradient(top, #149bdf, #0480be); + background-image: -ms-linear-gradient(top, #149bdf, #0480be); + background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #149bdf), color-stop(100%, #0480be)); + background-image: -webkit-linear-gradient(top, #149bdf, #0480be); + background-image: -o-linear-gradient(top, #149bdf, #0480be); + background-image: linear-gradient(top, #149bdf, #0480be); + background-repeat: repeat-x; + filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#149bdf', endColorstr='#0480be', GradientType=0); + -webkit-box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.15); + -moz-box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.15); + box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.15); + -webkit-box-sizing: border-box; + -moz-box-sizing: border-box; + box-sizing: border-box; + -webkit-transition: width 0.6s ease; + -moz-transition: width 0.6s ease; + -ms-transition: width 0.6s ease; + -o-transition: width 0.6s ease; + transition: width 0.6s ease; +} +.progress.striped .bar { + background-color: #62c462; + background-image: -webkit-gradient(linear, 0 100%, 100% 0, color-stop(0.25, rgba(255, 255, 255, 0.15)), color-stop(0.25, transparent), color-stop(0.5, transparent), color-stop(0.5, rgba(255, 255, 255, 0.15)), color-stop(0.75, rgba(255, 255, 255, 0.15)), color-stop(0.75, transparent), to(transparent)); + background-image: -webkit-linear-gradient(-45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent); + background-image: -moz-linear-gradient(-45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent); + background-image: -ms-linear-gradient(-45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent); + background-image: -o-linear-gradient(-45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent); + background-image: linear-gradient(-45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent); + -webkit-background-size: 40px 40px; + -moz-background-size: 40px 40px; + -o-background-size: 40px 40px; + background-size: 40px 40px; +} +.progress.active .bar { + -webkit-animation: progress-bar-stripes 2s linear infinite; + -moz-animation: progress-bar-stripes 2s linear infinite; + animation: progress-bar-stripes 2s linear infinite; +} +.progress.danger .bar { + background-color: #c43c35; + 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); + background-repeat: repeat-x; + filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ee5f5b', endColorstr='#c43c35', GradientType=0); +} +.progress.danger.striped .bar { + background-color: #ee5f5b; + background-image: -webkit-gradient(linear, 0 100%, 100% 0, color-stop(0.25, rgba(255, 255, 255, 0.15)), color-stop(0.25, transparent), color-stop(0.5, transparent), color-stop(0.5, rgba(255, 255, 255, 0.15)), color-stop(0.75, rgba(255, 255, 255, 0.15)), color-stop(0.75, transparent), to(transparent)); + background-image: -webkit-linear-gradient(-45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent); + background-image: -moz-linear-gradient(-45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent); + background-image: -ms-linear-gradient(-45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent); + background-image: -o-linear-gradient(-45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent); + background-image: linear-gradient(-45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent); +} +.progress.success .bar { + background-color: #57a957; + background-image: -khtml-gradient(linear, left top, left bottom, from(#62c462), to(#57a957)); + background-image: -moz-linear-gradient(top, #62c462, #57a957); + background-image: -ms-linear-gradient(top, #62c462, #57a957); + background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #62c462), color-stop(100%, #57a957)); + background-image: -webkit-linear-gradient(top, #62c462, #57a957); + background-image: -o-linear-gradient(top, #62c462, #57a957); + background-image: linear-gradient(top, #62c462, #57a957); + background-repeat: repeat-x; + filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#62c462', endColorstr='#57a957', GradientType=0); +} +.progress.success.striped .bar { + background-color: #62c462; + background-image: -webkit-gradient(linear, 0 100%, 100% 0, color-stop(0.25, rgba(255, 255, 255, 0.15)), color-stop(0.25, transparent), color-stop(0.5, transparent), color-stop(0.5, rgba(255, 255, 255, 0.15)), color-stop(0.75, rgba(255, 255, 255, 0.15)), color-stop(0.75, transparent), to(transparent)); + background-image: -webkit-linear-gradient(-45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent); + background-image: -moz-linear-gradient(-45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent); + background-image: -ms-linear-gradient(-45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent); + background-image: -o-linear-gradient(-45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent); + background-image: linear-gradient(-45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent); +} +.progress.info .bar { + background-color: #339bb9; + background-image: -khtml-gradient(linear, left top, left bottom, from(#5bc0de), to(#339bb9)); + background-image: -moz-linear-gradient(top, #5bc0de, #339bb9); + background-image: -ms-linear-gradient(top, #5bc0de, #339bb9); + background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #5bc0de), color-stop(100%, #339bb9)); + background-image: -webkit-linear-gradient(top, #5bc0de, #339bb9); + background-image: -o-linear-gradient(top, #5bc0de, #339bb9); + background-image: linear-gradient(top, #5bc0de, #339bb9); + background-repeat: repeat-x; + filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#5bc0de', endColorstr='#339bb9', GradientType=0); +} +.progress.info.striped .bar { + background-color: #5bc0de; + background-image: -webkit-gradient(linear, 0 100%, 100% 0, color-stop(0.25, rgba(255, 255, 255, 0.15)), color-stop(0.25, transparent), color-stop(0.5, transparent), color-stop(0.5, rgba(255, 255, 255, 0.15)), color-stop(0.75, rgba(255, 255, 255, 0.15)), color-stop(0.75, transparent), to(transparent)); + background-image: -webkit-linear-gradient(-45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent); + background-image: -moz-linear-gradient(-45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent); + background-image: -ms-linear-gradient(-45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent); + background-image: -o-linear-gradient(-45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent); + background-image: linear-gradient(-45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent); +} .hidden { display: none; visibility: hidden; diff --git a/bootstrap.min.css b/bootstrap.min.css index fd23c25cce..e08068a78e 100644 --- a/bootstrap.min.css +++ b/bootstrap.min.css @@ -311,16 +311,6 @@ i{background-image:url(docs/assets/img/glyphicons-halflings-sprite.png);backgrou .fade{-webkit-transition:opacity 0.15s linear;-moz-transition:opacity 0.15s linear;-ms-transition:opacity 0.15s linear;-o-transition:opacity 0.15s linear;transition:opacity 0.15s linear;opacity:0;}.fade.in{opacity:1;} .collapse{-webkit-transition:height 0.35s ease;-moz-transition:height 0.35s ease;-ms-transition:height 0.35s ease;-o-transition:height 0.35s ease;transition:height 0.35s ease;position:relative;overflow:hidden;height:0;}.collapse.in{height:auto;} .close{float:right;font-size:20px;font-weight:bold;line-height:13.5px;color:#000000;text-shadow:0 1px 0 #ffffff;filter:alpha(opacity=20);-moz-opacity:0.2;opacity:0.2;}.close:hover{color:#000000;text-decoration:none;filter:alpha(opacity=40);-moz-opacity:0.4;opacity:0.4;} -@-webkit-keyframes progress-bar-stripes{from{background-position:0 0;} to{background-position:40px 0;}}@keyframes progress-bar-stripes{from{background-position:0 0;} to{background-position:40px 0;}}.progress{height:25px;margin-bottom:18px;overflow:hidden;-webkit-box-shadow:inset 0 1px 1px 0 rgba(0, 0, 0, 0.3);-moz-box-shadow:inset 0 1px 1px 0 rgba(0, 0, 0, 0.3);box-shadow:inset 0 1px 1px 0 rgba(0, 0, 0, 0.3);background-color:#f5f5f5;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);background-repeat:repeat-x;filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#f5f5f5', GradientType=0);-webkit-border-radius:10px;-moz-border-radius:10px;border-radius:10px;border:1px solid #ddd;border-color:rgba(0, 0, 0, 0);}.progress.active .bar{-webkit-animation:progress-bar-stripes 2s linear infinite;-moz-animation:progress-bar-stripes 2s linear infinite;animation:progress-bar-stripes 2s linear infinite;} -.progress.animated .bar{-webkit-transition:width 0.6s ease;-moz-transition:width 0.6s ease;-ms-transition:width 0.6s ease;-o-transition:width 0.6s ease;transition:width 0.6s ease;} -.progress.danger .bar,.progress.error .bar{background-color:#c43c35;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);background-repeat:repeat-x;filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ee5f5b', endColorstr='#c43c35', GradientType=0);} -.progress.danger.striped .bar,.progress.error.striped .bar{-webkit-background-size:40px 40px;-moz-background-size:40px 40px;-o-background-size:40px 40px;background-size:40px 40px;background-color:#ee5f5b;background-image:-webkit-gradient(linear, 0 100%, 100% 0, color-stop(0.25, rgba(255, 255, 255, 0.2)), color-stop(0.25, transparent), color-stop(0.5, transparent), color-stop(0.5, rgba(255, 255, 255, 0.2)), color-stop(0.75, rgba(255, 255, 255, 0.2)), color-stop(0.75, transparent), to(transparent));background-image:-webkit-linear-gradient(-45deg, rgba(255, 255, 255, 0.2) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.2) 50%, rgba(255, 255, 255, 0.2) 75%, transparent 75%, transparent);background-image:-moz-linear-gradient(-45deg, rgba(255, 255, 255, 0.2) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.2) 50%, rgba(255, 255, 255, 0.2) 75%, transparent 75%, transparent);background-image:-ms-linear-gradient(-45deg, rgba(255, 255, 255, 0.2) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.2) 50%, rgba(255, 255, 255, 0.2) 75%, transparent 75%, transparent);background-image:-o-linear-gradient(-45deg, rgba(255, 255, 255, 0.2) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.2) 50%, rgba(255, 255, 255, 0.2) 75%, transparent 75%, transparent);background-image:linear-gradient(-45deg, rgba(255, 255, 255, 0.2) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.2) 50%, rgba(255, 255, 255, 0.2) 75%, transparent 75%, transparent);} -.progress.success .bar{background-color:#57a957;background-image:-khtml-gradient(linear, left top, left bottom, from(#62c462), to(#57a957));background-image:-moz-linear-gradient(top, #62c462, #57a957);background-image:-ms-linear-gradient(top, #62c462, #57a957);background-image:-webkit-gradient(linear, left top, left bottom, color-stop(0%, #62c462), color-stop(100%, #57a957));background-image:-webkit-linear-gradient(top, #62c462, #57a957);background-image:-o-linear-gradient(top, #62c462, #57a957);background-image:linear-gradient(top, #62c462, #57a957);background-repeat:repeat-x;filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#62c462', endColorstr='#57a957', GradientType=0);} -.progress.success.striped .bar{-webkit-background-size:40px 40px;-moz-background-size:40px 40px;-o-background-size:40px 40px;background-size:40px 40px;background-color:#62c462;background-image:-webkit-gradient(linear, 0 100%, 100% 0, color-stop(0.25, rgba(255, 255, 255, 0.2)), color-stop(0.25, transparent), color-stop(0.5, transparent), color-stop(0.5, rgba(255, 255, 255, 0.2)), color-stop(0.75, rgba(255, 255, 255, 0.2)), color-stop(0.75, transparent), to(transparent));background-image:-webkit-linear-gradient(-45deg, rgba(255, 255, 255, 0.2) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.2) 50%, rgba(255, 255, 255, 0.2) 75%, transparent 75%, transparent);background-image:-moz-linear-gradient(-45deg, rgba(255, 255, 255, 0.2) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.2) 50%, rgba(255, 255, 255, 0.2) 75%, transparent 75%, transparent);background-image:-ms-linear-gradient(-45deg, rgba(255, 255, 255, 0.2) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.2) 50%, rgba(255, 255, 255, 0.2) 75%, transparent 75%, transparent);background-image:-o-linear-gradient(-45deg, rgba(255, 255, 255, 0.2) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.2) 50%, rgba(255, 255, 255, 0.2) 75%, transparent 75%, transparent);background-image:linear-gradient(-45deg, rgba(255, 255, 255, 0.2) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.2) 50%, rgba(255, 255, 255, 0.2) 75%, transparent 75%, transparent);} -.progress.info .bar{background-color:#339bb9;background-image:-khtml-gradient(linear, left top, left bottom, from(#5bc0de), to(#339bb9));background-image:-moz-linear-gradient(top, #5bc0de, #339bb9);background-image:-ms-linear-gradient(top, #5bc0de, #339bb9);background-image:-webkit-gradient(linear, left top, left bottom, color-stop(0%, #5bc0de), color-stop(100%, #339bb9));background-image:-webkit-linear-gradient(top, #5bc0de, #339bb9);background-image:-o-linear-gradient(top, #5bc0de, #339bb9);background-image:linear-gradient(top, #5bc0de, #339bb9);background-repeat:repeat-x;filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#5bc0de', endColorstr='#339bb9', GradientType=0);} -.progress.info.striped .bar{-webkit-background-size:40px 40px;-moz-background-size:40px 40px;-o-background-size:40px 40px;background-size:40px 40px;background-color:#5bc0de;background-image:-webkit-gradient(linear, 0 100%, 100% 0, color-stop(0.25, rgba(255, 255, 255, 0.2)), color-stop(0.25, transparent), color-stop(0.5, transparent), color-stop(0.5, rgba(255, 255, 255, 0.2)), color-stop(0.75, rgba(255, 255, 255, 0.2)), color-stop(0.75, transparent), to(transparent));background-image:-webkit-linear-gradient(-45deg, rgba(255, 255, 255, 0.2) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.2) 50%, rgba(255, 255, 255, 0.2) 75%, transparent 75%, transparent);background-image:-moz-linear-gradient(-45deg, rgba(255, 255, 255, 0.2) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.2) 50%, rgba(255, 255, 255, 0.2) 75%, transparent 75%, transparent);background-image:-ms-linear-gradient(-45deg, rgba(255, 255, 255, 0.2) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.2) 50%, rgba(255, 255, 255, 0.2) 75%, transparent 75%, transparent);background-image:-o-linear-gradient(-45deg, rgba(255, 255, 255, 0.2) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.2) 50%, rgba(255, 255, 255, 0.2) 75%, transparent 75%, transparent);background-image:linear-gradient(-45deg, rgba(255, 255, 255, 0.2) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.2) 50%, rgba(255, 255, 255, 0.2) 75%, transparent 75%, transparent);} -.progress.striped .bar{-webkit-background-size:40px 40px;-moz-background-size:40px 40px;-o-background-size:40px 40px;background-size:40px 40px;background-color:#62c462;background-image:-webkit-gradient(linear, 0 100%, 100% 0, color-stop(0.25, rgba(255, 255, 255, 0.2)), color-stop(0.25, transparent), color-stop(0.5, transparent), color-stop(0.5, rgba(255, 255, 255, 0.2)), color-stop(0.75, rgba(255, 255, 255, 0.2)), color-stop(0.75, transparent), to(transparent));background-image:-webkit-linear-gradient(-45deg, rgba(255, 255, 255, 0.2) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.2) 50%, rgba(255, 255, 255, 0.2) 75%, transparent 75%, transparent);background-image:-moz-linear-gradient(-45deg, rgba(255, 255, 255, 0.2) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.2) 50%, rgba(255, 255, 255, 0.2) 75%, transparent 75%, transparent);background-image:-ms-linear-gradient(-45deg, rgba(255, 255, 255, 0.2) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.2) 50%, rgba(255, 255, 255, 0.2) 75%, transparent 75%, transparent);background-image:-o-linear-gradient(-45deg, rgba(255, 255, 255, 0.2) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.2) 50%, rgba(255, 255, 255, 0.2) 75%, transparent 75%, transparent);background-image:linear-gradient(-45deg, rgba(255, 255, 255, 0.2) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.2) 50%, rgba(255, 255, 255, 0.2) 75%, transparent 75%, transparent);} -.progress .bar{width:0%;height:100%;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;background-color:#57a957;background-image:-khtml-gradient(linear, left top, left bottom, from(#62c462), to(#57a957));background-image:-moz-linear-gradient(top, #62c462, #57a957);background-image:-ms-linear-gradient(top, #62c462, #57a957);background-image:-webkit-gradient(linear, left top, left bottom, color-stop(0%, #62c462), color-stop(100%, #57a957));background-image:-webkit-linear-gradient(top, #62c462, #57a957);background-image:-o-linear-gradient(top, #62c462, #57a957);background-image:linear-gradient(top, #62c462, #57a957);background-repeat:repeat-x;filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#62c462', endColorstr='#57a957', GradientType=0);border-color:#57a957 #57a957 #3d773d;border-color:rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);-webkit-box-shadow:inset 0 2px 0 rgba(255, 255, 255, 0.2),inset -1px -1px 0 rgba(0, 0, 0, 0.25),inset 1px 1px 0 rgba(0, 0, 0, 0.25);-moz-box-shadow:inset 0 2px 0 rgba(255, 255, 255, 0.2),inset -1px -1px 0 rgba(0, 0, 0, 0.25),inset 1px 1px 0 rgba(0, 0, 0, 0.25);box-shadow:inset 0 2px 0 rgba(255, 255, 255, 0.2),inset -1px -1px 0 rgba(0, 0, 0, 0.25),inset 1px 1px 0 rgba(0, 0, 0, 0.25);-webkit-border-radius:10px;-moz-border-radius:10px;border-radius:10px;} .navbar{overflow:visible;} .navbar-inner{background-color:#222222;background-color:#222222;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);background-repeat:repeat-x;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);} .navbar .brand:hover,.navbar ul .active>a{color:#ffffff;text-decoration:none;background-color:#333333;background-color:rgba(255, 255, 255, 0.05);} @@ -499,5 +489,16 @@ a.thumbnail:hover{border-color:#0088cc;-webkit-box-shadow:0 1px 4px rgba(0, 105, .label.warning{background-color:#f89406;} .label.success{background-color:#46a546;} .label.notice{background-color:#62cffc;} +@-webkit-keyframes progress-bar-stripes{from{background-position:0 0;} to{background-position:40px 0;}}@keyframes progress-bar-stripes{from{background-position:0 0;} to{background-position:40px 0;}}.progress,.progress .bar{-webkit-border-radius:4px;-moz-border-radius:4px;border-radius:4px;} +.progress{height:18px;margin-bottom:18px;background-color:#f9f9f9;background-image:-khtml-gradient(linear, left top, left bottom, from(#f5f5f5), to(#f9f9f9));background-image:-moz-linear-gradient(top, #f5f5f5, #f9f9f9);background-image:-ms-linear-gradient(top, #f5f5f5, #f9f9f9);background-image:-webkit-gradient(linear, left top, left bottom, color-stop(0%, #f5f5f5), color-stop(100%, #f9f9f9));background-image:-webkit-linear-gradient(top, #f5f5f5, #f9f9f9);background-image:-o-linear-gradient(top, #f5f5f5, #f9f9f9);background-image:linear-gradient(top, #f5f5f5, #f9f9f9);background-repeat:repeat-x;filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#f5f5f5', endColorstr='#f9f9f9', GradientType=0);border:1px solid #ddd;-webkit-box-shadow:inset 0 1px 2px rgba(0, 0, 0, 0.1);-moz-box-shadow:inset 0 1px 2px rgba(0, 0, 0, 0.1);box-shadow:inset 0 1px 2px rgba(0, 0, 0, 0.1);} +.progress .bar{width:0%;height:20px;margin:-1px;background-color:#57a957;background-image:-khtml-gradient(linear, left top, left bottom, from(#62c462), to(#57a957));background-image:-moz-linear-gradient(top, #62c462, #57a957);background-image:-ms-linear-gradient(top, #62c462, #57a957);background-image:-webkit-gradient(linear, left top, left bottom, color-stop(0%, #62c462), color-stop(100%, #57a957));background-image:-webkit-linear-gradient(top, #62c462, #57a957);background-image:-o-linear-gradient(top, #62c462, #57a957);background-image:linear-gradient(top, #62c462, #57a957);background-repeat:repeat-x;filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#62c462', endColorstr='#57a957', GradientType=0);background-color:#0480be;background-image:-khtml-gradient(linear, left top, left bottom, from(#149bdf), to(#0480be));background-image:-moz-linear-gradient(top, #149bdf, #0480be);background-image:-ms-linear-gradient(top, #149bdf, #0480be);background-image:-webkit-gradient(linear, left top, left bottom, color-stop(0%, #149bdf), color-stop(100%, #0480be));background-image:-webkit-linear-gradient(top, #149bdf, #0480be);background-image:-o-linear-gradient(top, #149bdf, #0480be);background-image:linear-gradient(top, #149bdf, #0480be);background-repeat:repeat-x;filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#149bdf', endColorstr='#0480be', GradientType=0);-webkit-box-shadow:inset 0 -1px 0 rgba(0, 0, 0, 0.15);-moz-box-shadow:inset 0 -1px 0 rgba(0, 0, 0, 0.15);box-shadow:inset 0 -1px 0 rgba(0, 0, 0, 0.15);-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;-webkit-transition:width 0.6s ease;-moz-transition:width 0.6s ease;-ms-transition:width 0.6s ease;-o-transition:width 0.6s ease;transition:width 0.6s ease;} +.progress.striped .bar{background-color:#62c462;background-image:-webkit-gradient(linear, 0 100%, 100% 0, color-stop(0.25, rgba(255, 255, 255, 0.15)), color-stop(0.25, transparent), color-stop(0.5, transparent), color-stop(0.5, rgba(255, 255, 255, 0.15)), color-stop(0.75, rgba(255, 255, 255, 0.15)), color-stop(0.75, transparent), to(transparent));background-image:-webkit-linear-gradient(-45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);background-image:-moz-linear-gradient(-45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);background-image:-ms-linear-gradient(-45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);background-image:-o-linear-gradient(-45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);background-image:linear-gradient(-45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);-webkit-background-size:40px 40px;-moz-background-size:40px 40px;-o-background-size:40px 40px;background-size:40px 40px;} +.progress.active .bar{-webkit-animation:progress-bar-stripes 2s linear infinite;-moz-animation:progress-bar-stripes 2s linear infinite;animation:progress-bar-stripes 2s linear infinite;} +.progress.danger .bar{background-color:#c43c35;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);background-repeat:repeat-x;filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ee5f5b', endColorstr='#c43c35', GradientType=0);} +.progress.danger.striped .bar{background-color:#ee5f5b;background-image:-webkit-gradient(linear, 0 100%, 100% 0, color-stop(0.25, rgba(255, 255, 255, 0.15)), color-stop(0.25, transparent), color-stop(0.5, transparent), color-stop(0.5, rgba(255, 255, 255, 0.15)), color-stop(0.75, rgba(255, 255, 255, 0.15)), color-stop(0.75, transparent), to(transparent));background-image:-webkit-linear-gradient(-45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);background-image:-moz-linear-gradient(-45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);background-image:-ms-linear-gradient(-45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);background-image:-o-linear-gradient(-45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);background-image:linear-gradient(-45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);} +.progress.success .bar{background-color:#57a957;background-image:-khtml-gradient(linear, left top, left bottom, from(#62c462), to(#57a957));background-image:-moz-linear-gradient(top, #62c462, #57a957);background-image:-ms-linear-gradient(top, #62c462, #57a957);background-image:-webkit-gradient(linear, left top, left bottom, color-stop(0%, #62c462), color-stop(100%, #57a957));background-image:-webkit-linear-gradient(top, #62c462, #57a957);background-image:-o-linear-gradient(top, #62c462, #57a957);background-image:linear-gradient(top, #62c462, #57a957);background-repeat:repeat-x;filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#62c462', endColorstr='#57a957', GradientType=0);} +.progress.success.striped .bar{background-color:#62c462;background-image:-webkit-gradient(linear, 0 100%, 100% 0, color-stop(0.25, rgba(255, 255, 255, 0.15)), color-stop(0.25, transparent), color-stop(0.5, transparent), color-stop(0.5, rgba(255, 255, 255, 0.15)), color-stop(0.75, rgba(255, 255, 255, 0.15)), color-stop(0.75, transparent), to(transparent));background-image:-webkit-linear-gradient(-45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);background-image:-moz-linear-gradient(-45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);background-image:-ms-linear-gradient(-45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);background-image:-o-linear-gradient(-45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);background-image:linear-gradient(-45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);} +.progress.info .bar{background-color:#339bb9;background-image:-khtml-gradient(linear, left top, left bottom, from(#5bc0de), to(#339bb9));background-image:-moz-linear-gradient(top, #5bc0de, #339bb9);background-image:-ms-linear-gradient(top, #5bc0de, #339bb9);background-image:-webkit-gradient(linear, left top, left bottom, color-stop(0%, #5bc0de), color-stop(100%, #339bb9));background-image:-webkit-linear-gradient(top, #5bc0de, #339bb9);background-image:-o-linear-gradient(top, #5bc0de, #339bb9);background-image:linear-gradient(top, #5bc0de, #339bb9);background-repeat:repeat-x;filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#5bc0de', endColorstr='#339bb9', GradientType=0);} +.progress.info.striped .bar{background-color:#5bc0de;background-image:-webkit-gradient(linear, 0 100%, 100% 0, color-stop(0.25, rgba(255, 255, 255, 0.15)), color-stop(0.25, transparent), color-stop(0.5, transparent), color-stop(0.5, rgba(255, 255, 255, 0.15)), color-stop(0.75, rgba(255, 255, 255, 0.15)), color-stop(0.75, transparent), to(transparent));background-image:-webkit-linear-gradient(-45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);background-image:-moz-linear-gradient(-45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);background-image:-ms-linear-gradient(-45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);background-image:-o-linear-gradient(-45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);background-image:linear-gradient(-45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);} .hidden{display:none;visibility:hidden;} @media (max-width: 480px){.modal{width:auto;margin:0;}.modal.fade.in{top:auto;} .horizontal-form .control-group>label{float:none;width:auto;padding-top:0;text-align:left;} .horizontal-form .controls{margin-left:0;} .horizontal-form .control-list{padding-top:0;} .horizontal-form .form-actions{padding-left:0;} .modal{position:fixed;top:20px;left:20px;right:20px;width:auto;}.modal .close{padding:10px;}}@media (max-width: 768px){.container{width:auto;padding:0 20px;} .row{margin-left:0;} .row>[class*="span"]{float:none;display:block;width:auto;margin:0;} .nav{position:absolute;top:0;left:0;width:180px;padding-top:40px;list-style:none;} .nav,.nav>li:last-child a{-webkit-border-radius:0 0 4px 0;-moz-border-radius:0 0 4px 0;border-radius:0 0 4px 0;} .nav>li{float:none;display:none;} .nav>li>a{float:none;background-color:#222;} .nav>.active{display:block;position:absolute;top:0;left:0;} .navbar ul .active>a{background-color:transparent;} .nav>.active a:after{display:inline-block;width:0;height:0;margin-top:8px;margin-left:6px;text-indent:-99999px;vertical-align:top;border-left:4px solid transparent;border-right:4px solid transparent;border-top:4px solid #ffffff;filter:alpha(opacity=100);-moz-opacity:1;opacity:1;content:"↓";} .nav>.active a:hover{background-color:rgba(255, 255, 255, 0.05);}}@media (min-width: 768px) and (max-width: 940px){.container{width:748px;} .span1{width:44px;} .span2{width:108px;} .span3{width:172px;} .span4{width:236px;} .span5{width:300px;} .span6{width:364px;} .span7{width:428px;} .span8{width:492px;} .span9{width:556px;} .span10{width:620px;} .span11{width:684px;} .span12{width:748px;} .offset1{margin-left:64px;} .offset2{margin-left:128px;} .offset3{margin-left:192px;} .offset4{margin-left:256px;} .offset5{margin-left:320px;} .offset6{margin-left:384px;} .offset7{margin-left:448px;} .offset8{margin-left:512px;} .offset9{margin-left:576px;} .offset10{margin-left:640px;} .offset11{margin-left:704px;} .offset12{margin-left:768px;}} diff --git a/docs/components.html b/docs/components.html index 8be1f824a1..ce16c80925 100644 --- a/docs/components.html +++ b/docs/components.html @@ -929,43 +929,82 @@ Lorem ipsum dolar sit amet illo error <a href="#" title="bottom">ipsum</a> verit ================================================== --> <section id="progresss"> <div class="page-header"> - <h1>Progress bars <small>... for indicating progress</small></h1> + <h1>Progress bars <small>For loading, redirecting, or action status</small></h1> </div> + + <h2>Examples and markup</h2> <div class="row"> - <div class="span3"> - <h2>Basic bars</h2> - <p>Default look of progress bars. Absolute minimum.</p> - </div> - <div class="span9"> + <div class="span4"> + <h3>Basic</h3> + <p>Default progress bar with a vertical gradient.</p> <div class="progress"> - <div class="bar" style="width: 50%;"></div> + <div class="bar" style="width: 60%;"></div> </div> +<pre class="prettyprint linenums"> +<div class="progress"> + <div class="bar" + style="width: 60%;"></div> +</div> +</pre> </div> - </div> - <div class="row"> - <div class="span3"> - <h2>Striped bars</h2> - <p>Bars with stripes painted.</p> - </div> - <div class="span9"> + <div class="span4"> + <h3>Striped</h3> + <p>Uses a gradient to create a striped effect.</p> <div class="progress info striped"> <div class="bar" style="width: 20%;"></div> </div> +<pre class="prettyprint linenums"> +<div class="progress info + striped"> + <div class="bar" + style="width: 20%;"></div> +</div> +</pre> </div> - </div> - <div class="row"> - <div class="span3"> - <h2>Active state</h2> - <p>Animated stripes! <small>Not on Opera, though :(</small></p> - </div> - <div class="span3"> + <div class="span4"> + <h3>Animated</h3> + <p>Takes the striped example and animates it.</p> <div class="progress danger active striped"> <div class="bar" style="width: 45%"></div> </div> +<pre class="prettyprint linenums"> +<div class="progress danger + striped active"> + <div class="bar" + style="width: 40%;"></div> +</div> +</pre> </div> </div> + + <h2>Options and browser support</h2> + <div class="row"> + <div class="span4"> + <h3>Additional colors</h3> + <p>Progress bars utilize some of the same classes as buttons and alert messages for quick styling.</p> + <ul> + <li><code>.info</code></li> + <li><code>.success</code></li> + <li><code>.danger</code></li> + </ul> + <p>Alternatively, you can customize the LESS files and roll your own colors and sizes.</p> + </div> + <div class="span4"> + <h3>Behavior</h3> + <p>Progress bars use CSS3 transitions, so if you dynamically adjust the width via javascript, it will smoothly resize.</p> + <p>If you use the <code>.active</code> class, your <code>.striped</code> progress bars will animate the stripes left to right.</p> + </div> + <div class="span4"> + <h3>Browser support</h3> + <p>Progress bars use CSS3 gradients, transitions, and animations to achieve all theire effects. These features are not supported in IE7-8 or older versions of Firefox.</p> + <p>Opera does not support animations at this time.</p> + </div> + </div> + </section> + + <!-- Footer ================================================== --> <footer class="footer"> diff --git a/lib/bootstrap.less b/lib/bootstrap.less index 0335f86517..d82dffc652 100644 --- a/lib/bootstrap.less +++ b/lib/bootstrap.less @@ -30,7 +30,6 @@ @import "wells.less"; @import "component-animations.less"; @import "close.less"; -@import "progress-bars.less"; // Components: Nav @import "navbar.less"; @@ -52,6 +51,7 @@ // Components: Misc @import "thumbnails.less"; @import "labels.less"; +@import "progress-bars.less"; // Responsive @import "responsive.less"; \ No newline at end of file diff --git a/lib/mixins.less b/lib/mixins.less index ea8d685f03..50986c68cd 100644 --- a/lib/mixins.less +++ b/lib/mixins.less @@ -179,6 +179,13 @@ background-clip: @clip; } +// Box sizing +.box-sizing(@boxmodel) { + -webkit-box-sizing: @boxmodel; + -moz-box-sizing: @boxmodel; + box-sizing: @boxmodel; +} + // Resize anything .resizable(@direction: both) { resize: @direction; // Options: horizontal, vertical, both @@ -272,12 +279,12 @@ } .striped(@color,@angle: -45deg) { background-color: @color; - background-image: -webkit-gradient(linear, 0 100%, 100% 0, color-stop(.25, rgba(255, 255, 255, .2)), color-stop(.25, transparent), color-stop(.5, transparent), color-stop(.5, rgba(255, 255, 255, .2)), color-stop(.75, rgba(255, 255, 255, .2)), color-stop(.75, transparent), to(transparent)); - background-image: -webkit-linear-gradient(@angle, rgba(255, 255, 255, .2) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .2) 50%, rgba(255, 255, 255, .2) 75%, transparent 75%, transparent); - background-image: -moz-linear-gradient(@angle, rgba(255, 255, 255, .2) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .2) 50%, rgba(255, 255, 255, .2) 75%, transparent 75%, transparent); - background-image: -ms-linear-gradient(@angle, rgba(255, 255, 255, .2) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .2) 50%, rgba(255, 255, 255, .2) 75%, transparent 75%, transparent); - background-image: -o-linear-gradient(@angle, rgba(255, 255, 255, .2) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .2) 50%, rgba(255, 255, 255, .2) 75%, transparent 75%, transparent); - background-image: linear-gradient(@angle, rgba(255, 255, 255, .2) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .2) 50%, rgba(255, 255, 255, .2) 75%, transparent 75%, transparent); + background-image: -webkit-gradient(linear, 0 100%, 100% 0, color-stop(.25, rgba(255,255,255,.15)), color-stop(.25, transparent), color-stop(.5, transparent), color-stop(.5, rgba(255,255,255,.15)), color-stop(.75, rgba(255,255,255,.15)), color-stop(.75, transparent), to(transparent)); + background-image: -webkit-linear-gradient(@angle, rgba(255,255,255,.15) 25%, transparent 25%, transparent 50%, rgba(255,255,255,.15) 50%, rgba(255,255,255,.15) 75%, transparent 75%, transparent); + background-image: -moz-linear-gradient(@angle, rgba(255,255,255,.15) 25%, transparent 25%, transparent 50%, rgba(255,255,255,.15) 50%, rgba(255,255,255,.15) 75%, transparent 75%, transparent); + background-image: -ms-linear-gradient(@angle, rgba(255,255,255,.15) 25%, transparent 25%, transparent 50%, rgba(255,255,255,.15) 50%, rgba(255,255,255,.15) 75%, transparent 75%, transparent); + background-image: -o-linear-gradient(@angle, rgba(255,255,255,.15) 25%, transparent 25%, transparent 50%, rgba(255,255,255,.15) 50%, rgba(255,255,255,.15) 75%, transparent 75%, transparent); + background-image: linear-gradient(@angle, rgba(255,255,255,.15) 25%, transparent 25%, transparent 50%, rgba(255,255,255,.15) 50%, rgba(255,255,255,.15) 75%, transparent 75%, transparent); } } diff --git a/lib/progress-bars.less b/lib/progress-bars.less index 1a9afb275d..28c56d131c 100644 --- a/lib/progress-bars.less +++ b/lib/progress-bars.less @@ -1,102 +1,98 @@ +// PROGRESS BARS +// ------------- + + +// ANIMATIONS +// ---------- + +// Webkit @-webkit-keyframes progress-bar-stripes { - from { - background-position: 0 0; - } - to { - background-position: 40px 0; - } + from { background-position: 0 0; } + to { background-position: 40px 0; } } -/* COMMENTED OUT SO LESS COMPILES -@-moz-keyframes progress-bar-stripes { - from { - background-position: 0 0; - } - to { - background-position: 40px 0; - } -} -*/ +// Temporarily commented out since LESS won't compile with this +// @-moz-keyframes progress-bar-stripes { +// from { background-position: 0 0; } +// to { background-position: 40px 0; } +// } +// Spec @keyframes progress-bar-stripes { - from { - background-position: 0 0; - } - to { - background-position: 40px 0; - } + from { background-position: 0 0; } + to { background-position: 40px 0; } +} + + + +// THE BARS +// -------- + +// Common styles +.progress, +.progress .bar { + .border-radius(4px); } +// Outer container .progress { - height: 25px; + height: 18px; margin-bottom: 18px; - overflow: hidden; - .box-shadow(inset 0 1px 1px 0 rgba(0,0,0,.3), 0 1px 0 0 #fff); - #gradient > .vertical(#fff, #f5f5f5); - .border-radius(10px); + #gradient > .vertical(#f5f5f5, #f9f9f9); border: 1px solid #ddd; - border-color: rgba(0,0,0,.0); - &.active { - .bar { - -webkit-animation: progress-bar-stripes 2s linear infinite; - -moz-animation: progress-bar-stripes 2s linear infinite; - animation: progress-bar-stripes 2s linear infinite; - } - } - &.animated { - .bar { - .transition(width .6s ease); - } - } - &.danger, - &.error { - .bar { - #gradient > .vertical(#ee5f5b, #c43c35); - } - &.striped { - .bar { - .background-size(40px, 40px); - #gradient > .striped(#ee5f5b); - } - } - } - &.success { - .bar { - #gradient > .vertical(#62c462, #57a957); - } - &.striped { - .bar { - .background-size(40px, 40px); - #gradient > .striped(#62c462); - } - } - } - &.info { - .bar { - #gradient > .vertical(#5bc0de, #339bb9); - } - &.striped { - .bar { - .background-size(40px, 40px); - #gradient > .striped(#5bc0de); - } - } - } - &.striped { - .bar { - .background-size(40px, 40px); - #gradient > .striped(#62c462); - } - } - .bar { - width: 0%; - height: 100%; - -webkit-box-sizing: border-box; - -moz-box-sizing: border-box; - box-sizing: border-box; - .gradientBar(#62c462, #57a957); - @shadow: inset 0 2px 0 rgba(255,255,255,.2), inset -1px -1px 0 rgba(0,0,0,.25),inset 1px 1px 0 rgba(0,0,0,.25); - .box-shadow(@shadow); - .border-radius(10px); - } -} \ No newline at end of file + .box-shadow(inset 0 1px 2px rgba(0,0,0,.1)); +} + +// Bar of progress +.progress .bar { + width: 0%; + height: 20px; + margin: -1px; + #gradient > .vertical(#62c462, #57a957); + #gradient > .vertical(#149bdf, #0480be); + .box-shadow(inset 0 -1px 0 rgba(0,0,0,.15)); + .box-sizing(border-box); + .transition(width .6s ease); +} + +// Striped bars +.progress.striped .bar { + #gradient > .striped(#62c462); + .background-size(40px, 40px); +} + +// Call animation for the active one +.progress.active .bar { + -webkit-animation: progress-bar-stripes 2s linear infinite; + -moz-animation: progress-bar-stripes 2s linear infinite; + animation: progress-bar-stripes 2s linear infinite; +} + + + +// COLORS +// ------ + +// Danger (red) +.progress.danger .bar { + #gradient > .vertical(#ee5f5b, #c43c35); +} +.progress.danger.striped .bar { + #gradient > .striped(#ee5f5b); +} + +// Success (green) +.progress.success .bar { + #gradient > .vertical(#62c462, #57a957); +} +.progress.success.striped .bar { + #gradient > .striped(#62c462); +} + +// Info (teal) +.progress.info .bar { + #gradient > .vertical(#5bc0de, #339bb9); +} +.progress.info.striped .bar { + #gradient > .striped(#5bc0de); +} -- GitLab From 4961aa8c2306b77dae2c0d5d54edc9d40b138217 Mon Sep 17 00:00:00 2001 From: Purwandi <free6300@gmail.com> Date: Sun, 8 Jan 2012 08:17:54 +0700 Subject: [PATCH 218/318] Fix line number pretyprint in javascript docs --- docs/javascript.html | 1 - 1 file changed, 1 deletion(-) diff --git a/docs/javascript.html b/docs/javascript.html index d19343675b..ca9217674f 100644 --- a/docs/javascript.html +++ b/docs/javascript.html @@ -38,7 +38,6 @@ </script> <script src="assets/js/google-code-prettify/prettify.js"></script> - <script>$(function () { prettyPrint() })</script> <script src="../js/bootstrap-transition.js"></script> <script src="../js/bootstrap-alert.js"></script> <script src="../js/bootstrap-modal.js"></script> -- GitLab From 2948d1c3b247a5aff1fd1f15cf72540e3f492f57 Mon Sep 17 00:00:00 2001 From: Mark Otto <markdotto@gmail.com> Date: Sat, 7 Jan 2012 20:40:28 -0800 Subject: [PATCH 219/318] overhaul the entire tabs component structure and docs; remove side nav and make it a nav list to build on new .nav base class --- bootstrap.css | 302 ++++--- bootstrap.min.css | 70 +- .../js/google-code-prettify/prettify.css | 14 +- docs/components.html | 837 +++++++++--------- docs/upgrading.html | 9 + lib/bootstrap.less | 3 +- lib/dropdowns.less | 5 +- lib/forms.less | 1 + lib/navbar.less | 7 +- lib/navs.less | 327 +++++++ lib/sidenav.less | 43 - lib/tabs-pills.less | 285 ------ lib/type.less | 2 +- 13 files changed, 1005 insertions(+), 900 deletions(-) create mode 100644 lib/navs.less delete mode 100644 lib/sidenav.less delete mode 100644 lib/tabs-pills.less diff --git a/bootstrap.css b/bootstrap.css index f6dd392266..5c9d4aa97b 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: Sat Jan 7 15:52:40 PST 2012 + * Date: Sat Jan 7 20:25:41 PST 2012 */ html, body { margin: 0; @@ -516,9 +516,9 @@ pre { background-color: #f5f5f5; border: 1px solid #ccc; border: 1px solid rgba(0, 0, 0, 0.15); - -webkit-border-radius: 3px; - -moz-border-radius: 3px; - border-radius: 3px; + -webkit-border-radius: 4px; + -moz-border-radius: 4px; + border-radius: 4px; white-space: pre; white-space: pre-wrap; word-break: break-all; @@ -541,6 +541,7 @@ legend { line-height: 36px; color: #333333; border-bottom: 1px solid #eee; + -webkit-margin-collapse: separate; } label, input, @@ -1502,6 +1503,16 @@ i { background-image: linear-gradient(top, #049cdb, #0064cd); background-repeat: repeat-x; filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#049cdb', endColorstr='#0064cd', GradientType=0); + background-color: #0077b3; + background-image: -khtml-gradient(linear, left top, left bottom, from(#0088cc), to(#0077b3)); + background-image: -moz-linear-gradient(top, #0088cc, #0077b3); + background-image: -ms-linear-gradient(top, #0088cc, #0077b3); + background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #0088cc), color-stop(100%, #0077b3)); + background-image: -webkit-linear-gradient(top, #0088cc, #0077b3); + background-image: -o-linear-gradient(top, #0088cc, #0077b3); + background-image: linear-gradient(top, #0088cc, #0077b3); + background-repeat: repeat-x; + filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#0088cc', endColorstr='#0077b3', GradientType=0); -webkit-box-shadow: inset 0 1px 0 rgba(0, 0, 0, 0.075), inset 0 -1px rgba(0, 0, 0, 0.075); -moz-box-shadow: inset 0 1px 0 rgba(0, 0, 0, 0.075), inset 0 -1px rgba(0, 0, 0, 0.075); box-shadow: inset 0 1px 0 rgba(0, 0, 0, 0.075), inset 0 -1px rgba(0, 0, 0, 0.075); @@ -1692,19 +1703,51 @@ i { left: 0; z-index: 1010; } -.nav { +.navbar .nav { position: relative; left: 0; display: block; float: left; margin: 0 10px 0 0; + /* // Dropdowns within the .nav + .dropdown-toggle:hover, + .dropdown.open .dropdown-toggle { + background: #444; + background: rgba(255,255,255,.05); + } + .dropdown-menu { + background-color: #333; + .dropdown-toggle { + color: @white; + &.open { + background: #444; + background: rgba(255,255,255,.05); + } + } + li a { + padding: 4px 15px; + color: #999; + text-shadow: 0 1px 0 rgba(0,0,0,.5); + &:hover { + #gradient > .vertical(#292929,#191919); + color: @white; + } + } + .active a { + color: @white; + } + .divider { + background-color: #222; + border-color: #444; + } + }*/ + } -.nav > li { +.navbar .nav > li { display: block; float: left; } -.nav a { - display: block; +.navbar .nav a { float: none; padding: 10px 10px 11px; line-height: 19px; @@ -1712,15 +1755,15 @@ i { text-decoration: none; text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25); } -.nav a:hover { +.navbar .nav a:hover { color: #ffffff; text-decoration: none; } -.nav .active > a { +.navbar .nav .active > a { background-color: #222; background-color: rgba(0, 0, 0, 0.5); } -.nav .vertical-divider { +.navbar .nav .vertical-divider { height: 40px; width: 1px; margin: 0 5px; @@ -1728,58 +1771,55 @@ i { background-color: #222; border-right: 1px solid #444; } -.nav.secondary-nav { +.navbar .nav.secondary-nav { float: right; margin-left: 10px; margin-right: 0; } -.nav.secondary-nav .dropdown-menu { +.navbar .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 { + margin-left: 0; + margin-bottom: 18px; + list-style: none; } -.nav .dropdown-menu { - background-color: #333; +.nav > li > a { + display: block; } -.nav .dropdown-menu .dropdown-toggle { - color: #ffffff; +.nav > li > a:hover { + text-decoration: none; + background-color: #eee; } -.nav .dropdown-menu .dropdown-toggle.open { - background: #444; - background: rgba(255, 255, 255, 0.05); -} -.nav .dropdown-menu li a { - padding: 4px 15px; - color: #999; - text-shadow: 0 1px 0 rgba(0, 0, 0, 0.5); -} -.nav .dropdown-menu li a:hover { - background-color: #191919; - 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); - background-repeat: repeat-x; - filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#292929', endColorstr='#191919', GradientType=0); - color: #ffffff; +.nav.list { + padding-left: 14px; + padding-right: 14px; + margin-bottom: 0; } -.nav .dropdown-menu .active a { - color: #ffffff; +.nav.list > li > a, .nav.list .nav-header { + display: block; + padding: 3px 15px; + margin-left: -15px; + margin-right: -15px; + text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5); } -.nav .dropdown-menu .divider { - background-color: #222; - border-color: #444; +.nav.list .nav-header { + font-size: 11px; + font-weight: bold; + line-height: 18px; + color: #999999; + text-transform: uppercase; +} +.nav.list > li + .nav-header { + margin-top: 9px; +} +.nav.list .active > a { + color: #ffffff; + text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.2); + background-color: #0088cc; } .tabs, .pills { - padding: 0; - margin: 0 0 20px; - list-style: none; zoom: 1; } .tabs:before, @@ -1798,29 +1838,26 @@ i { float: left; } .tabs > li > a, .pills > li > a { - display: block; + padding-right: 12px; + padding-left: 12px; + margin-right: 2px; + line-height: 14px; } .tabs { - border-color: #ddd; - border-style: solid; - border-width: 0 0 1px; + border-bottom: 1px solid #ddd; } .tabs > li { - position: relative; margin-bottom: -1px; } .tabs > li > a { - padding: 0 15px; - margin-right: 2px; - line-height: 36px; + padding-top: 9px; + padding-bottom: 9px; 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 .active > a, .tabs .active > a:hover { @@ -1830,6 +1867,76 @@ i { border-bottom-color: transparent; cursor: default; } +.pills > li > a { + padding-top: 8px; + padding-bottom: 8px; + margin-top: 2px; + margin-bottom: 2px; + -webkit-border-radius: 5px; + -moz-border-radius: 5px; + border-radius: 5px; +} +.pills .active > a, .pills .active > a:hover { + color: #ffffff; + background-color: #0088cc; +} +.nav.stacked > li { + float: none; +} +.nav.stacked > li > a { + margin-right: 0; +} +.tabs.stacked { + border-bottom: 0; +} +.tabs.stacked > li > a { + border: 1px solid #ddd; + -webkit-border-radius: 0; + -moz-border-radius: 0; + border-radius: 0; +} +.tabs.stacked > li:first-child > a { + -webkit-border-radius: 4px 4px 0 0; + -moz-border-radius: 4px 4px 0 0; + border-radius: 4px 4px 0 0; +} +.tabs.stacked > li:last-child > a { + -webkit-border-radius: 0 0 4px 4px; + -moz-border-radius: 0 0 4px 4px; + border-radius: 0 0 4px 4px; +} +.tabs.stacked > li > a:hover { + border-color: #ddd; + z-index: 2; +} +.pills.stacked > li > a { + margin-bottom: 3px; +} +.pills.stacked > li:last-child > a { + margin-bottom: 1px; +} +.tabs .dropdown-menu, .pills .dropdown-menu { + top: 33px; + border-width: 1px; +} +.pills .dropdown-menu { + -webkit-border-radius: 4px; + -moz-border-radius: 4px; + border-radius: 4px; +} +.tabs .dropdown-toggle .caret, .pills .dropdown-toggle .caret { + margin-top: 6px; +} +.tabs .open .dropdown-toggle, .pills .open .dropdown-toggle { + background-color: #999; + border-color: #999; +} +.tabs .open .caret, .pills .open .caret { + border-top-color: #fff; + filter: alpha(opacity=100); + -moz-opacity: 1; + opacity: 1; +} .tabbable { margin-bottom: 18px; } @@ -1929,46 +2036,6 @@ i { border-color: #ddd; border-left-color: transparent; } -.tabs .dropdown-menu { - top: 37px; - border-width: 1px; -} -.tabs .dropdown-toggle .caret { - margin-top: 15px; - margin-left: 5px; -} -.tabs .open .dropdown-toggle { - border-color: #999; -} -.tabs .open .dropdown-toggle .caret { - border-top-color: #fff; - filter: alpha(opacity=100); - -moz-opacity: 1; - opacity: 1; -} -.pills > li > a { - padding: 0 15px; - margin: 5px 3px 5px 0; - line-height: 30px; - text-shadow: 0 1px 1px #ffffff; - -webkit-border-radius: 15px; - -moz-border-radius: 15px; - border-radius: 15px; -} -.pills > li > a:hover { - color: #ffffff; - text-decoration: none; - text-shadow: 0 1px 1px rgba(0, 0, 0, 0.25); - background-color: #005580; -} -.pills .active > a { - color: #ffffff; - text-shadow: 0 1px 1px rgba(0, 0, 0, 0.25); - background-color: #0088cc; -} -.pills-vertical > li { - float: none; -} .tab-content > .tab-pane, .pill-content > .pill-pane { display: none; } @@ -2060,27 +2127,29 @@ i { color: #333333; background-color: #eee; } -.side-nav { - padding: 9px 0; +/*.side-nav { + padding: @baseLineHeight / 2 0; } -.side-nav .nav-label, .side-nav .nav-item { +.side-nav .nav-label, +.side-nav .nav-item { display: block; padding: 3px 15px; - text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5); + text-shadow: 0 1px 0 rgba(255,255,255,.5); } .side-nav .nav-label { font-size: 11px; - line-height: 18px; - color: #999999; + line-height: @baseLineHeight; + color: @grayLight; text-transform: uppercase; } .side-nav .nav-group { - margin: 0; + margin: 0; // clear default ul margins list-style: none; } .side-nav .nav-group + .nav-label { margin-top: 9px; } + .side-nav .nav-item { font-weight: bold; } @@ -2092,22 +2161,11 @@ i { } .side-nav .active .nav-item { color: #fff; - text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.3); - background-color: #999999; - background-image: -khtml-gradient(linear, left top, left bottom, from(#cccccc), to(#999999)); - background-image: -moz-linear-gradient(top, #cccccc, #999999); - background-image: -ms-linear-gradient(top, #cccccc, #999999); - background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #cccccc), color-stop(100%, #999999)); - background-image: -webkit-linear-gradient(top, #cccccc, #999999); - background-image: -o-linear-gradient(top, #cccccc, #999999); - background-image: linear-gradient(top, #cccccc, #999999); - background-repeat: repeat-x; - filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#cccccc', endColorstr='#999999', GradientType=0); - -webkit-box-shadow: inset 0 1px 0 rgba(0, 0, 0, 0.05), inset 0 -1px 0 rgba(0, 0, 0, 0.05); - -moz-box-shadow: inset 0 1px 0 rgba(0, 0, 0, 0.05), inset 0 -1px 0 rgba(0, 0, 0, 0.05); - box-shadow: inset 0 1px 0 rgba(0, 0, 0, 0.05), inset 0 -1px 0 rgba(0, 0, 0, 0.05); -} -.breadcrumb { + text-shadow: 0 -1px 0 rgba(0,0,0,.3); + #gradient > .vertical(#ccc, #999); + @shadow: inset 0 1px 0 rgba(0,0,0,.05), inset 0 -1px 0 rgba(0,0,0,.05); + .box-shadow(@shadow); +}*/.breadcrumb { padding: 7px 14px; margin: 0 0 18px; background-color: #f5f5f5; diff --git a/bootstrap.min.css b/bootstrap.min.css index e08068a78e..5597bf1ef9 100644 --- a/bootstrap.min.css +++ b/bootstrap.min.css @@ -91,10 +91,10 @@ blockquote.pull-right{float:right;}blockquote.pull-right p,blockquote.pull-right address{display:block;margin-bottom:18px;line-height:18px;} code,pre{padding:0 3px 2px;font-family:Menlo,Monaco,"Courier New",monospace;font-size:12px;color:#333333;-webkit-border-radius:3px;-moz-border-radius:3px;border-radius:3px;} code{padding:1px 3px;background-color:#fee9cc;} -pre{display:block;padding:8.5px;margin:0 0 9px;font-size:12px;line-height:18px;background-color:#f5f5f5;border:1px solid #ccc;border:1px solid rgba(0, 0, 0, 0.15);-webkit-border-radius:3px;-moz-border-radius:3px;border-radius:3px;white-space:pre;white-space:pre-wrap;word-break:break-all;}pre.prettyprint{margin-bottom:18px;} +pre{display:block;padding:8.5px;margin:0 0 9px;font-size:12px;line-height:18px;background-color:#f5f5f5;border:1px solid #ccc;border:1px solid rgba(0, 0, 0, 0.15);-webkit-border-radius:4px;-moz-border-radius:4px;border-radius:4px;white-space:pre;white-space:pre-wrap;word-break:break-all;}pre.prettyprint{margin-bottom:18px;} pre code{padding:0;background-color:transparent;} form{margin-bottom:18px;} -legend{display:block;width:100%;margin-bottom:27px;font-size:19.5px;line-height:36px;color:#333333;border-bottom:1px solid #eee;} +legend{display:block;width:100%;margin-bottom:27px;font-size:19.5px;line-height:36px;color:#333333;border-bottom:1px solid #eee;-webkit-margin-collapse:separate;} label,input,select,textarea{font-family:"Helvetica Neue",Helvetica,Arial,sans-serif;font-size:normal;font-weight:13px;line-height:18px;} label{display:block;margin-bottom:5px;color:#333333;} input,textarea,select,.uneditable-input{display:block;width:210px;height:18px;padding:4px;margin-bottom:9px;font-size:13px;line-height:18px;color:#555555;border:1px solid #ccc;-webkit-border-radius:3px;-moz-border-radius:3px;border-radius:3px;} @@ -304,7 +304,7 @@ i{background-image:url(docs/assets/img/glyphicons-halflings-sprite.png);backgrou .dropdown .caret{margin-top:8px;margin-left:2px;} .dropdown:hover .caret{filter:alpha(opacity=100);-moz-opacity:1;opacity:1;} .dropdown-menu{position:absolute;top:40px;z-index:1000;float:left;display:none;min-width:160px;max-width:220px;_width:160px;padding:5px 0;margin:0;list-style:none;background-color:#ffffff;border-color:#999;border-color:rgba(0, 0, 0, 0.1);border-style:solid;border-width:1px;-webkit-border-radius:0 0 5px 5px;-moz-border-radius:0 0 5px 5px;border-radius:0 0 5px 5px;-webkit-box-shadow:0 5px 10px rgba(0, 0, 0, 0.2);-moz-box-shadow:0 5px 10px rgba(0, 0, 0, 0.2);box-shadow:0 5px 10px rgba(0, 0, 0, 0.2);-webkit-background-clip:padding-box;-moz-background-clip:padding;background-clip:padding-box;zoom:1;}.dropdown-menu .divider{height:1px;margin:5px 1px;overflow:hidden;background-color:#e5e5e5;border-bottom:1px solid #ffffff;} -.dropdown-menu a{display:block;padding:2px 15px;clear:both;font-weight:normal;line-height:18px;color:#555555;}.dropdown-menu a:hover{color:#fff;text-decoration:none;text-shadow:0 -1px 0 rgba(0, 0, 0, 0.25);background-color:#0064cd;background-image:-khtml-gradient(linear, left top, left bottom, from(#049cdb), to(#0064cd));background-image:-moz-linear-gradient(top, #049cdb, #0064cd);background-image:-ms-linear-gradient(top, #049cdb, #0064cd);background-image:-webkit-gradient(linear, left top, left bottom, color-stop(0%, #049cdb), color-stop(100%, #0064cd));background-image:-webkit-linear-gradient(top, #049cdb, #0064cd);background-image:-o-linear-gradient(top, #049cdb, #0064cd);background-image:linear-gradient(top, #049cdb, #0064cd);background-repeat:repeat-x;filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#049cdb', endColorstr='#0064cd', GradientType=0);-webkit-box-shadow:inset 0 1px 0 rgba(0, 0, 0, 0.075),inset 0 -1px rgba(0, 0, 0, 0.075);-moz-box-shadow:inset 0 1px 0 rgba(0, 0, 0, 0.075),inset 0 -1px rgba(0, 0, 0, 0.075);box-shadow:inset 0 1px 0 rgba(0, 0, 0, 0.075),inset 0 -1px rgba(0, 0, 0, 0.075);} +.dropdown-menu a{display:block;padding:2px 15px;clear:both;font-weight:normal;line-height:18px;color:#555555;}.dropdown-menu a:hover{color:#fff;text-decoration:none;text-shadow:0 -1px 0 rgba(0, 0, 0, 0.25);background-color:#0064cd;background-image:-khtml-gradient(linear, left top, left bottom, from(#049cdb), to(#0064cd));background-image:-moz-linear-gradient(top, #049cdb, #0064cd);background-image:-ms-linear-gradient(top, #049cdb, #0064cd);background-image:-webkit-gradient(linear, left top, left bottom, color-stop(0%, #049cdb), color-stop(100%, #0064cd));background-image:-webkit-linear-gradient(top, #049cdb, #0064cd);background-image:-o-linear-gradient(top, #049cdb, #0064cd);background-image:linear-gradient(top, #049cdb, #0064cd);background-repeat:repeat-x;filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#049cdb', endColorstr='#0064cd', GradientType=0);background-color:#0077b3;background-image:-khtml-gradient(linear, left top, left bottom, from(#0088cc), to(#0077b3));background-image:-moz-linear-gradient(top, #0088cc, #0077b3);background-image:-ms-linear-gradient(top, #0088cc, #0077b3);background-image:-webkit-gradient(linear, left top, left bottom, color-stop(0%, #0088cc), color-stop(100%, #0077b3));background-image:-webkit-linear-gradient(top, #0088cc, #0077b3);background-image:-o-linear-gradient(top, #0088cc, #0077b3);background-image:linear-gradient(top, #0088cc, #0077b3);background-repeat:repeat-x;filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#0088cc', endColorstr='#0077b3', GradientType=0);-webkit-box-shadow:inset 0 1px 0 rgba(0, 0, 0, 0.075),inset 0 -1px rgba(0, 0, 0, 0.075);-moz-box-shadow:inset 0 1px 0 rgba(0, 0, 0, 0.075),inset 0 -1px rgba(0, 0, 0, 0.075);box-shadow:inset 0 1px 0 rgba(0, 0, 0, 0.075),inset 0 -1px rgba(0, 0, 0, 0.075);} .dropdown.open .dropdown-toggle{color:#ffffff;background:#ccc;background:rgba(0, 0, 0, 0.3);} .dropdown.open .dropdown-menu{display:block;} .well{min-height:20px;padding:19px;margin-bottom:20px;background-color:#f5f5f5;border:1px solid #eee;border:1px solid rgba(0, 0, 0, 0.05);-webkit-border-radius:4px;-moz-border-radius:4px;border-radius:4px;-webkit-box-shadow:inset 0 1px 1px rgba(0, 0, 0, 0.05);-moz-box-shadow:inset 0 1px 1px rgba(0, 0, 0, 0.05);box-shadow:inset 0 1px 1px rgba(0, 0, 0, 0.05);}.well blockquote{border-color:#ddd;border-color:rgba(0, 0, 0, 0.15);} @@ -325,21 +325,43 @@ i{background-image:url(docs/assets/img/glyphicons-halflings-sprite.png);backgrou .navbar-static{margin-bottom:18px;} .navbar-static .navbar-inner{padding-left:20px;padding-right:20px;-webkit-border-radius:4px;-moz-border-radius:4px;border-radius:4px;} .navbar-fixed{position:fixed;top:0;right:0;left:0;z-index:1010;} -.nav{position:relative;left:0;display:block;float:left;margin:0 10px 0 0;}.nav>li{display:block;float:left;} -.nav a{display:block;float:none;padding:10px 10px 11px;line-height:19px;color:#999999;text-decoration:none;text-shadow:0 -1px 0 rgba(0, 0, 0, 0.25);}.nav a:hover{color:#ffffff;text-decoration:none;} -.nav .active>a{background-color:#222;background-color:rgba(0, 0, 0, 0.5);} -.nav .vertical-divider{height:40px;width:1px;margin:0 5px;overflow:hidden;background-color:#222;border-right:1px solid #444;} -.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{padding:4px 15px;color:#999;text-shadow:0 1px 0 rgba(0, 0, 0, 0.5);}.nav .dropdown-menu li a:hover{background-color:#191919;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);background-repeat:repeat-x;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;} -.tabs,.pills{padding:0;margin:0 0 20px;list-style:none;zoom:1;}.tabs:before,.pills:before,.tabs:after,.pills:after{display:table;*display:inline;content:"";zoom:1;} +.navbar .nav{position:relative;left:0;display:block;float:left;margin:0 10px 0 0;}.navbar .nav>li{display:block;float:left;} +.navbar .nav a{float:none;padding:10px 10px 11px;line-height:19px;color:#999999;text-decoration:none;text-shadow:0 -1px 0 rgba(0, 0, 0, 0.25);}.navbar .nav a:hover{color:#ffffff;text-decoration:none;} +.navbar .nav .active>a{background-color:#222;background-color:rgba(0, 0, 0, 0.5);} +.navbar .nav .vertical-divider{height:40px;width:1px;margin:0 5px;overflow:hidden;background-color:#222;border-right:1px solid #444;} +.navbar .nav.secondary-nav{float:right;margin-left:10px;margin-right:0;}.navbar .nav.secondary-nav .dropdown-menu{right:0;border:0;} +.nav{margin-left:0;margin-bottom:18px;list-style:none;} +.nav>li>a{display:block;} +.nav>li>a:hover{text-decoration:none;background-color:#eee;} +.nav.list{padding-left:14px;padding-right:14px;margin-bottom:0;} +.nav.list>li>a,.nav.list .nav-header{display:block;padding:3px 15px;margin-left:-15px;margin-right:-15px;text-shadow:0 1px 0 rgba(255, 255, 255, 0.5);} +.nav.list .nav-header{font-size:11px;font-weight:bold;line-height:18px;color:#999999;text-transform:uppercase;} +.nav.list>li+.nav-header{margin-top:9px;} +.nav.list .active>a{color:#ffffff;text-shadow:0 -1px 0 rgba(0, 0, 0, 0.2);background-color:#0088cc;} +.tabs,.pills{zoom:1;}.tabs:before,.pills:before,.tabs:after,.pills:after{display:table;*display:inline;content:"";zoom:1;} .tabs:after,.pills:after{clear:both;} -.tabs>li,.pills>li{float:left;}.tabs>li>a,.pills>li>a{display:block;} -.tabs{border-color:#ddd;border-style:solid;border-width:0 0 1px;}.tabs>li{position:relative;margin-bottom:-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,.pills>li{float:left;} +.tabs>li>a,.pills>li>a{padding-right:12px;padding-left:12px;margin-right:2px;line-height:14px;} +.tabs{border-bottom:1px solid #ddd;} +.tabs>li{margin-bottom:-1px;} +.tabs>li>a{padding-top:9px;padding-bottom:9px;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{border-color:#eee #eee #ddd;} .tabs .active>a,.tabs .active>a:hover{color:#555555;background-color:#ffffff;border:1px solid #ddd;border-bottom-color:transparent;cursor:default;} +.pills>li>a{padding-top:8px;padding-bottom:8px;margin-top:2px;margin-bottom:2px;-webkit-border-radius:5px;-moz-border-radius:5px;border-radius:5px;} +.pills .active>a,.pills .active>a:hover{color:#ffffff;background-color:#0088cc;} +.nav.stacked>li{float:none;} +.nav.stacked>li>a{margin-right:0;} +.tabs.stacked{border-bottom:0;} +.tabs.stacked>li>a{border:1px solid #ddd;-webkit-border-radius:0;-moz-border-radius:0;border-radius:0;} +.tabs.stacked>li:first-child>a{-webkit-border-radius:4px 4px 0 0;-moz-border-radius:4px 4px 0 0;border-radius:4px 4px 0 0;} +.tabs.stacked>li:last-child>a{-webkit-border-radius:0 0 4px 4px;-moz-border-radius:0 0 4px 4px;border-radius:0 0 4px 4px;} +.tabs.stacked>li>a:hover{border-color:#ddd;z-index:2;} +.pills.stacked>li>a{margin-bottom:3px;} +.pills.stacked>li:last-child>a{margin-bottom:1px;} +.tabs .dropdown-menu,.pills .dropdown-menu{top:33px;border-width:1px;} +.pills .dropdown-menu{-webkit-border-radius:4px;-moz-border-radius:4px;border-radius:4px;} +.tabs .dropdown-toggle .caret,.pills .dropdown-toggle .caret{margin-top:6px;} +.tabs .open .dropdown-toggle,.pills .open .dropdown-toggle{background-color:#999;border-color:#999;} +.tabs .open .caret,.pills .open .caret{border-top-color:#fff;filter:alpha(opacity=100);-moz-opacity:1;opacity:1;} .tabbable{margin-bottom:18px;}.tabbable .tabs{margin-bottom:0;border-bottom:0;} .tabbable .tab-content{padding:19px;border:1px solid #ddd;} .tabbable.tabs-bottom .tabs>li{margin-top:-1px;margin-bottom:0;} @@ -354,13 +376,6 @@ i{background-image:url(docs/assets/img/glyphicons-halflings-sprite.png);backgrou .tabbable.tabs-right .tab-content{margin-right:100px;} .tabbable.tabs-right .tabs{float:right;}.tabbable.tabs-right .tabs>li{margin-left:-1px;}.tabbable.tabs-right .tabs>li>a{margin-left:0;-webkit-border-radius:0 4px 4px 0;-moz-border-radius:0 4px 4px 0;border-radius:0 4px 4px 0;}.tabbable.tabs-right .tabs>li>a:hover{border-left-color:#ddd;} .tabbable.tabs-right .tabs .active>a,.tabbable.tabs-right .tabs .active>a:hover{border-color:#ddd;border-left-color:transparent;} -.tabs .dropdown-menu{top:37px;border-width:1px;} -.tabs .dropdown-toggle .caret{margin-top:15px;margin-left:5px;} -.tabs .open .dropdown-toggle{border-color:#999;} -.tabs .open .dropdown-toggle .caret{border-top-color:#fff;filter:alpha(opacity=100);-moz-opacity:1;opacity:1;} -.pills>li>a{padding:0 15px;margin:5px 3px 5px 0;line-height:30px;text-shadow:0 1px 1px #ffffff;-webkit-border-radius:15px;-moz-border-radius:15px;border-radius:15px;}.pills>li>a:hover{color:#ffffff;text-decoration:none;text-shadow:0 1px 1px rgba(0, 0, 0, 0.25);background-color:#005580;} -.pills .active>a{color:#ffffff;text-shadow:0 1px 1px rgba(0, 0, 0, 0.25);background-color:#0088cc;} -.pills-vertical>li{float:none;} .tab-content>.tab-pane,.pill-content>.pill-pane{display:none;} .tab-content>.active,.pill-content>.active{display:block;} .step-nav{position:relative;margin:0 0 18px;list-style:none;line-height:30px;text-align:center;background-color:#f5f5f5;-webkit-border-radius:15px;-moz-border-radius:15px;border-radius:15px;}.step-nav li{display:inline;color:#999999;} @@ -373,15 +388,6 @@ i{background-image:url(docs/assets/img/glyphicons-halflings-sprite.png);backgrou .subnav li:first-child a{border-left:0;-webkit-border-radius:6px 0 0 6px;-moz-border-radius:6px 0 0 6px;border-radius:6px 0 0 6px;} .subnav li:last-child a{border-right:0;-webkit-border-radius:0 6px 6px 0;-moz-border-radius:0 6px 6px 0;border-radius:0 6px 6px 0;} .subnav ul .active>a{color:#333333;background-color:#eee;} -.side-nav{padding:9px 0;} -.side-nav .nav-label,.side-nav .nav-item{display:block;padding:3px 15px;text-shadow:0 1px 0 rgba(255, 255, 255, 0.5);} -.side-nav .nav-label{font-size:11px;line-height:18px;color:#999999;text-transform:uppercase;} -.side-nav .nav-group{margin:0;list-style:none;} -.side-nav .nav-group+.nav-label{margin-top:9px;} -.side-nav .nav-item{font-weight:bold;} -.side-nav .nav-item i{vertical-align:-2px;} -.side-nav .nav-item:hover{text-decoration:none;} -.side-nav .active .nav-item{color:#fff;text-shadow:0 -1px 0 rgba(0, 0, 0, 0.3);background-color:#999999;background-image:-khtml-gradient(linear, left top, left bottom, from(#cccccc), to(#999999));background-image:-moz-linear-gradient(top, #cccccc, #999999);background-image:-ms-linear-gradient(top, #cccccc, #999999);background-image:-webkit-gradient(linear, left top, left bottom, color-stop(0%, #cccccc), color-stop(100%, #999999));background-image:-webkit-linear-gradient(top, #cccccc, #999999);background-image:-o-linear-gradient(top, #cccccc, #999999);background-image:linear-gradient(top, #cccccc, #999999);background-repeat:repeat-x;filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#cccccc', endColorstr='#999999', GradientType=0);-webkit-box-shadow:inset 0 1px 0 rgba(0, 0, 0, 0.05),inset 0 -1px 0 rgba(0, 0, 0, 0.05);-moz-box-shadow:inset 0 1px 0 rgba(0, 0, 0, 0.05),inset 0 -1px 0 rgba(0, 0, 0, 0.05);box-shadow:inset 0 1px 0 rgba(0, 0, 0, 0.05),inset 0 -1px 0 rgba(0, 0, 0, 0.05);} .breadcrumb{padding:7px 14px;margin:0 0 18px;background-color:#f5f5f5;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);background-repeat:repeat-x;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:#999999;} .breadcrumb .active a{color:#333333;} diff --git a/docs/assets/js/google-code-prettify/prettify.css b/docs/assets/js/google-code-prettify/prettify.css index f195124a9b..0d54905fbc 100644 --- a/docs/assets/js/google-code-prettify/prettify.css +++ b/docs/assets/js/google-code-prettify/prettify.css @@ -6,21 +6,13 @@ .kwd, .linenums .tag { color: #1e347b; } .typ, .atn, .dec, .var { color: teal; } .pln { color: #48484c; } -pre.prettyprint { - background-color: #fefbf3; - padding: 9px; - margin-bottom: 9px; -} - -pre.prettyprint { - color: #ccc; - background-color: #252525; -} -pre.prettyprint { +.prettyprint { padding: 8px; background-color: #f7f7f9; border: 1px solid #e1e1e8; +} +.prettyprint.linenums { -webkit-box-shadow: inset 40px 0 0 #fbfbfc, inset 41px 0 0 #ececf0; -moz-box-shadow: inset 40px 0 0 #fbfbfc, inset 41px 0 0 #ececf0; box-shadow: inset 40px 0 0 #fbfbfc, inset 41px 0 0 #ececf0; diff --git a/docs/components.html b/docs/components.html index ce16c80925..eb9932473d 100644 --- a/docs/components.html +++ b/docs/components.html @@ -54,397 +54,218 @@ </header> -<!-- Media + +<!-- Nav, Tabs, & Pills ================================================== --> -<section id="media"> +<section id="tabsAndPills"> <div class="page-header"> - <h1>Thumbnails <small>Grids of images, videos, text, and more</small></h1> + <h1>Nav, tabs, and pills <small>Highly customizable list-style navigation</small></h1> </div> + <h2>Lightweight defaults <small>Same markup, different classes</small></h2> <div class="row"> - <div class="span6"> - <h2>Default thumbnails</h2> - <p>By default, Bootstrap's thumbnails are designed to showcase linked images with minimal required markup.</p> - <ul class="thumbnails"> - <li class="span3"> - <a href="#" class="thumbnail"> - <img src="http://placehold.it/210x150" alt=""> - </a> - </li> - <li class="span3"> - <a href="#" class="thumbnail"> - <img src="http://placehold.it/210x150" alt=""> - </a> - </li> - <li class="span3"> - <a href="#" class="thumbnail"> - <img src="http://placehold.it/210x150" alt=""> - </a> - </li> - <li class="span3"> - <a href="#" class="thumbnail"> - <img src="http://placehold.it/210x150" alt=""> - </a> - </li> + <div class="span4"> + <h3>Powerful base class</h3> + <p>All nav components here—tabs, pills, and lists—<strong>share the same base markup and styles</strong> through the <code>.nav</code> class.</p> + <h3>Why tabs and pills</h3> + <p>Tabs and pills in Bootstrap are built on a <code><ul></code> with the same core HTML, a list of links. Swap between tabs or pills with only a class.</p> + <p>Both options are great for sub-sections of content or navigating between pages of related content.</p> + </div> + <div class="span4"> + <h3>Basic tabs</h3> + <p>Take a regular <code><ul></code> of links and add <code>.tabs</code>:</p> + <ul class="nav tabs"> + <li class="active"><a href="#">Home</a></li> + <li><a href="#">Profile</a></li> + <li><a href="#">Messages</a></li> </ul> +<pre class="prettyprint linenums"> +<ul class="nav tabs"> + <li class="active"> + <a href="#">Home</a> + </li> + <li><a href="#">...</a></li> + <li><a href="#">...</a></li> +</ul> +</pre> </div> - <div class="span6"> - <h2>Highly customizable</h2> - <p>With a bit of extra markup, it's possible to add any kind of HTML content like headings, paragraphs, or buttons into thumbnails.</p> - <ul class="thumbnails"> - <li class="span3"> - <div class="thumbnail"> - <img src="http://placehold.it/210x150" alt=""> - <div class="caption"> - <h5>Thumbnail label</h5> - <p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p> - <p><a href="#" class="btn primary">Action</a> <a href="#" class="btn">Action</a></p> - </div> - </div> - </li> - <li class="span3"> - <div class="thumbnail"> - <img src="http://placehold.it/210x150" alt=""> - <div class="caption"> - <h5>Thumbnail label</h5> - <p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p> - <p><a href="#" class="btn primary">Action</a> <a href="#" class="btn">Action</a></p> - </div> - </div> - </li> + <div class="span4"> + <h3>Basic pills</h3> + <p>Take that same HTML, but use <code>.pills</code> instead:</p> + <ul class="nav pills"> + <li class="active"><a href="#">Home</a></li> + <li><a href="#">Profile</a></li> + <li><a href="#">Messages</a></li> </ul> +<pre class="prettyprint linenums"> +<ul class="nav pills"> + <li class="active"> + <a href="#">Home</a> + </li> + <li><a href="#">...</a></li> + <li><a href="#">...</a></li> +</ul> +</pre> </div> </div> + <h2>Stackable <small>Make tabs or pills vertical</small></h2> <div class="row"> <div class="span4"> - <h3>Why use thumbnails</h3> - <p>Thumbnails (previously <code>.media-grid</code> up until v1.4) are great for grids of photos or videos, image search results, retail products, portfolios, and much more. They can be links or static content.</p> + <h3>How to stack 'em</h3> + <p>As tabs and pills are horizontal by default, just add a second class, <code>.stacked</code>, to make them appear vertically stacked.</p> </div> <div class="span4"> - <h3>Simple, flexible markup</h3> - <p>Thumbnail markup is simple—a <code>ul</code> with any number of <code>li</code> elements is all that is required. It's also super flexible, allowing for any type of content with just a bit more markup to wrap your contents.</p> - </div> - <div class="span4"> - <h3>Uses grid column sizes</h3> - <p>Lastly, the thumbnails component uses existing grid system classes—like <code>.span2</code> or <code>.span3</code>—for control of thumbnail dimensions.</p> - </div> - </div> - - <div class="row"> - <div class="span6"> - <h2>The markup</h2> - <p>As mentioned previously, the required markup for thumbnails is light and straightforward. Here's a look at the default setup <strong>for linked images</strong>:</p> + <h3>Stacked tabs</h3> + <ul class="nav tabs stacked"> + <li class="active"><a href="#">Home</a></li> + <li><a href="#">Profile</a></li> + <li><a href="#">Messages</a></li> + </ul> <pre class="prettyprint linenums"> -<ul class="thumbnails"> - <li class="span3"> - <a href="#" class="thumbnail"> - <img src="http://placehold.it/210x150" alt=""> - </a> - </li> +<ul class="nav tabs stacked"> ... </ul> </pre> - <p>For custom HTML content in thumbnails, the markup changes slightly. To allow block level content anywhere, we swap the <code><a></code> for a <code><div></code> like so:</p> + </div> + <div class="span4"> + <h3>Stacked pills</h3> + <ul class="nav pills stacked"> + <li class="active"><a href="#">Home</a></li> + <li><a href="#">Profile</a></li> + <li><a href="#">Messages</a></li> + </ul> <pre class="prettyprint linenums"> -<ul class="thumbnails"> - <li class="span3"> - <div class="thumbnail"> - <img src="http://placehold.it/210x150" alt=""> - <h5>Thumbnail label</h5> - <p>Thumbnail caption right here...</p> - </div> - </li> +<ul class="nav pills stacked"> ... </ul> </pre> </div> - <div class="span6"> - <h2>More examples</h2> - <p>Explore all your options with the various grid classes available to you. You can also mix and match different sizes.</p> - <ul class="thumbnails"> - <li class="span4"> - <a href="#" class="thumbnail"> - <img src="http://placehold.it/290x230" alt=""> - </a> - </li> - <li class="span2"> - <a href="#" class="thumbnail"> - <img src="http://placehold.it/130x100" alt=""> - </a> - </li> - <li class="span2"> - <a href="#" class="thumbnail"> - <img src="http://placehold.it/130x100" alt=""> - </a> - </li> - <li class="span2"> - <a href="#" class="thumbnail"> - <img src="http://placehold.it/130x100" alt=""> - </a> - </li> - <li class="span2"> - <a href="#" class="thumbnail"> - <img src="http://placehold.it/130x100" alt=""> - </a> - </li> - <li class="span2"> - <a href="#" class="thumbnail"> - <img src="http://placehold.it/130x100" alt=""> - </a> - </li> - </ul> - </div> - </div> - -</section> - - - -<!-- Autocomplete -================================================== --> -<section id="autocomplete"> - <div class="page-header"> - <h1>Autocomplete <small></small></h1> - </div> - -</section> - - - -<!-- Carousel -================================================== --> -<section id="carousel"> - <div class="page-header"> - <h1>Carousel <small></small></h1> - </div> - -</section> - - - -<!-- Side nav -================================================== --> -<section id="sidenav"> - <div class="page-header"> - <h1>Side nav <small>for lists of links</small></h1> </div> + <h2>Dropdowns <small>For advanced nav components</small></h2> <div class="row"> - <div class="span3"> - <h3>Examples</h3> - <p>Side navs can be just links, links with headings, and links with icons.</p> - <div class="well side-nav"> - <ul class="nav-group"> - <li class="active"><a class="nav-item" href="#">Home</a></li> - <li><a class="nav-item" href="#">Library</a></li> - <li><a class="nav-item" href="#">Help</a></li> - </ul> - <h6 class="nav-label">Your account</h6> - <ul class="nav-group"> - <li><a class="nav-item" href="#">Profile</a></li> - <li><a class="nav-item" href="#">Settings</a></li> - </ul> - <h6 class="nav-label">Your account</h6> - <ul class="nav-group"> - <li><a class="nav-item" href="#"><i class="home"></i> Home</a></li> - <li><a class="nav-item" href="#"><i class="book"></i> Library</a></li> - <li><a class="nav-item" href="#"><i class="user"></i> Profile</a></li> - <li><a class="nav-item" href="#"><i class="cog"></i> Settings</a></li> - <li><a class="nav-item" href="#"><i class="time"></i> Help</a></li> - </ul> - </div> - </div> - <div class="span3"> - <h3>Why use it</h3> - <p></p> + <div class="span4"> + <h3>Rich menus made easy</h3> + <p>Dropdown menus in Bootstrap tabs and pills are super easy and require only a little extra HTML and a lightweight jQuery plugin.</p> + <p>Head over to the Javascript page to read the docs on <a href="./javascript.html#tabs">initializing dropdowns</a> in Bootstrap.</p> </div> - <div class="span6"> - <h3>Markup</h3> - <p>Marking up a side nav is at the core just writing an unordered list of links.</p> + <div class="span4"> + <h3>Tabs with dropdowns</h3> + <ul class="nav tabs"> + <li class="active"><a href="#">Home</a></li> + <li><a href="#">Profile</a></li> + <li class="dropdown"> + <a class="dropdown-toggle" data-toggle="dropdown" href="#">Dropdown <b class="caret"></b></a> + <ul class="dropdown-menu"> + <li><a href="#">Action</a></li> + <li><a href="#">Another action</a></li> + <li><a href="#">Something else here</a></li> + <li class="divider"></li> + <li><a href="#">Separated link</a></li> + </ul> + </li> + </ul> <pre class="prettyprint linenums"> - <ul class="nav-group"> - <li class="active"> - <a class="nav-item" href="#">Home</a> - </li> - <li><a class="nav-item" href="#">Library</a></li> - <li><a class="nav-item" href="#">Help</a></li> - </ul> +<ul class="nav tabs"> + <li class="dropdown"> + <a class="dropdown-toggle" + data-toggle="dropdown" + href="#"> + Dropdown + <b class="caret"></b> + </a> + <ul class="dropdown-menu"> + <!-- links --> + </ul> + </li> +</ul> </pre> - <p>Bootstrap also makes it easy to expand a regular list of links with multiple groups and headings.</p> + </div> + <div class="span4"> + <h3>Pills with dropdowns</h3> + <ul class="nav pills"> + <li class="active"><a href="#">Home</a></li> + <li><a href="#">Profile</a></li> + <li class="dropdown"> + <a class="dropdown-toggle" data-toggle="dropdown" href="#">Dropdown <b class="caret"></b></a> + <ul class="dropdown-menu"> + <li><a href="#">Action</a></li> + <li><a href="#">Another action</a></li> + <li><a href="#">Something else here</a></li> + <li class="divider"></li> + <li><a href="#">Separated link</a></li> + </ul> + </li> + </ul> <pre class="prettyprint linenums"> - <h6 class="nav-label"></h6> - <ul class="nav-group"> - ... - </ul> - <h6 class="nav-label"></h6> - <ul class="nav-group"> - ... - </ul> +<ul class="nav pills"> + <li class="dropdown"> + <a class="dropdown-toggle" + data-toggle="dropdown" + href="#"> + Dropdown + <b class="caret"></b> + </a> + <ul class="dropdown-menu"> + <!-- links --> + </ul> + </li> +</ul> </pre> </div> </div> - -</section> - - -<!-- Navbar -================================================== --> -<section id="navbar"> - <div class="page-header"> - <h1>Navbar</h1> - </div> - <h2>Static navbar example</h2> - <p>An example of a static (not fixed to the top) navbar with project name, navigation, and search form.</p> - <div class="navbar navbar-static"> - <div class="navbar-inner"> - <div class="container" style="width: auto;"> - <a class="brand" href="#">Project name</a> - <ul class="nav"> + <h2>Nav lists <small>Build simple stacked navs, great for sidebars</small></h2> + <div class="row"> + <div class="span4"> + <h3>Application-style navigation</h3> + <p>Nav lists provide a simple and easy way to build groups of nav links with optional headers. They're best used in sidebars like the Finder in OS X.</p> + <p>Structurally, they're built on the same core nav styles as tabs and pills, so usage and customization are straightforward.</p> + </div> + <div class="span4"> + <h3>Example sidebar navigation</h3> + <div class="well" style="padding: 8px 0;"> + <ul class="nav list"> + <li class="nav-header">List header</li> <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" data-toggle="dropdown">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 class="navbar-search pull-left" action=""> - <input type="text" class="search-query span2" placeholder="Search"> - </form> - <ul class="nav secondary-nav"> - <li class="vertical-divider"></li> - <li class="dropdown"> - <a href="#" class="dropdown-toggle" data-toggle="dropdown">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> + <li><a href="#">Library</a></li> + <li><a href="#">Applications</a></li> + <li class="nav-header">Another list header</li> + <li><a href="#">Profile</a></li> + <li><a href="#">Settings</a></li> + <li><a href="#">Help</a></li> </ul> - </div> - </div><!-- /navbar-inner --> - </div><!-- /navbar --> - - <div class="row"> - <div class="span8"> - <h3>Navbar scaffolding</h3> - <p>The navbar requires only a few divs to structure it well for static or fixed display.</p> -<pre class="prettyprint linenums"> -<div class="navbar navbar-static"> - <div class="navbar-inner"> - <div class="container" style="width: auto;"> - ... - </div> - </div> -</div> -</pre> - <p>To make the navbar fixed, swamp the <code>.navbar-static</code> class for <code>.navbar-fixed</code>. In your CSS, you will also need to account for the overlap it causes by adding <code>padding-top: 40px;</code> to your <code><body></code>.</p> -<pre class="prettyprint linenums"> -<div class="navbar navbar-fixed"> - ... -</div> -</pre> - <br> - <h3>Brand name</h3> - <p>A simple link to show your brand or project name only requires an anchor tag.</p> -<pre class="prettyprint linenums"> -<a class="brand" href="#"> - Project name -</a> -</pre> - <br> - <h3>Search form</h3> - <p>Search forms receive custom styles in the navbar with the <code>.navbar-search</code> class. Include <code>.pull-left</code> or <code>.pull-right</code> on the <code>form</code> to align it.</p> -<pre class="prettyprint linenums"> -<form class="navbar-search"> - <input type="text" class="search-query pull-left" placeholder="Search"> -</form> -</pre> + </div> <!-- /well --> </div> <div class="span4"> - <h3>Nav links</h3> - <p>Nav items are simple to add via unordered lists.</p> + <h3>Simple markup</h3> <pre class="prettyprint linenums"> -<ul class="nav"> +<ul class="nav list"> + <li class="nav-header"> + List header + </li> <li class="active"> - <a href="#">Home</a> + <a href="#">Home</a> </li> - <li><a href="#">Link</a></li> - <li><a href="#">Link</a></li> -</ul> -</pre> - <p>Adding dropdowns to the nav is super simple, but does require the use of <a href="./javascript.html/#dropdowns">our javascript plugin</a>.</p> -<pre class="prettyprint linenums"> -<ul class="nav"> - <li class="dropdown"> - <a href="#" - class="dropdown-toggle" - data-toggle="dropdown"> - Account - </a> - <ul class="dropdown-menu"> - ... - </ul> + <li> + <a href="#">Library</a> </li> + ... </ul> </pre> </div> </div> -</section> -<!-- Tabs & Pills -================================================== --> -<section id="tabsAndPills"> - <div class="page-header"> - <h1>Tabs and pills <small></small></h1> - </div> - <div class="row"> - <div class="span3"> - <p>Create simple secondary navigation with a <code><ul></code>. Swap between tabs or pills by adding the appropriate class.</p> - <p>Great for sub-sections of content like our account settings pages and user timelines for toggling between pages of like content. Available in tabbed or pill styles.</p> - </div> - <div class="span9"> - <h3>Basic tabs example</h3> - <p>Tabs can be used as regular navigation (loading external pages in the same tab) or as tabbable content areas for swapping out panes of content. We have a <a href="./javascript.html#tabs">tabs plugin</a> that can be used to integrate the latter.</p> - <ul class="tabs"> - <li class="active"><a href="#">Home</a></li> - <li><a href="#">Profile</a></li> - <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" data-toggle="dropdown">Dropdown <span class="caret"></span></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"> -<ul class="tabs"> - <li class="active"><a href="#">Home</a></li> - <li><a href="#">Profile</a></li> - <li><a href="#">Messages</a></li> - <li><a href="#">Settings</a></li> - <li><a href="#">Contact</a></li> -</ul> -</pre> + + + + + <h3>Tabbable tabs</h3> <p>As mentioned above, you can bring your tabs to life with a simple plugin. Here we have integrated all four variations of the tabs—default (top), right, bottom, left—with example tab areas.</p> @@ -543,37 +364,119 @@ </ul> </div> - - <p>In addition to tabs, we have pills! Though a bit more limited in functionality, they share much of the same markup.</p> - <hr> - <h3>Basic pills example</h3> - <ul class="pills"> - <li class="active"><a href="#">Home</a></li> - <li><a href="#">Profile</a></li> - <li><a href="#">Messages</a></li> - <li><a href="#">Settings</a></li> - <li><a href="#">Contact</a></li> - </ul> +</section> + + + +<!-- Navbar +================================================== --> +<section id="navbar"> + <div class="page-header"> + <h1>Navbar</h1> + </div> + <h2>Static navbar example</h2> + <p>An example of a static (not fixed to the top) navbar with project name, navigation, and search form.</p> + <div class="navbar navbar-static"> + <div class="navbar-inner"> + <div class="container" style="width: auto;"> + <a class="brand" href="#">Project name</a> + <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" data-toggle="dropdown">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 class="navbar-search pull-left" action=""> + <input type="text" class="search-query span2" placeholder="Search"> + </form> + <ul class="nav secondary-nav"> + <li class="vertical-divider"></li> + <li class="dropdown"> + <a href="#" class="dropdown-toggle" data-toggle="dropdown">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> + </div> + </div><!-- /navbar-inner --> + </div><!-- /navbar --> + + <div class="row"> + <div class="span8"> + <h3>Navbar scaffolding</h3> + <p>The navbar requires only a few divs to structure it well for static or fixed display.</p> +<pre class="prettyprint linenums"> +<div class="navbar navbar-static"> + <div class="navbar-inner"> + <div class="container" style="width: auto;"> + ... + </div> + </div> +</div> +</pre> + <p>To make the navbar fixed, swamp the <code>.navbar-static</code> class for <code>.navbar-fixed</code>. In your CSS, you will also need to account for the overlap it causes by adding <code>padding-top: 40px;</code> to your <code><body></code>.</p> +<pre class="prettyprint linenums"> +<div class="navbar navbar-fixed"> + ... +</div> +</pre> + <h3>Brand name</h3> + <p>A simple link to show your brand or project name only requires an anchor tag.</p> +<pre class="prettyprint linenums"> +<a class="brand" href="#"> + Project name +</a> +</pre> + <h3>Search form</h3> + <p>Search forms receive custom styles in the navbar with the <code>.navbar-search</code> class. Include <code>.pull-left</code> or <code>.pull-right</code> on the <code>form</code> to align it.</p> +<pre class="prettyprint linenums"> +<form class="navbar-search"> + <input type="text" class="search-query pull-left" placeholder="Search"> +</form> +</pre> + </div> + <div class="span4"> + <h3>Nav links</h3> + <p>Nav items are simple to add via unordered lists.</p> <pre class="prettyprint linenums"> -<ul class="pills"> - <li class="active"><a href="#">Home</a></li> - <li><a href="#">Profile</a></li> - <li><a href="#">Messages</a></li> - <li><a href="#">Settings</a></li> - <li><a href="#">Contact</a></li> +<ul class="nav"> + <li class="active"> + <a href="#">Home</a> + </li> + <li><a href="#">Link</a></li> + <li><a href="#">Link</a></li> +</ul> +</pre> + <p>Adding dropdowns to the nav is super simple, but does require the use of <a href="./javascript.html/#dropdowns">our javascript plugin</a>.</p> +<pre class="prettyprint linenums"> +<ul class="nav"> + <li class="dropdown"> + <a href="#" + class="dropdown-toggle" + data-toggle="dropdown"> + Account + </a> + <ul class="dropdown-menu"> + ... + </ul> + </li> </ul> </pre> - <h3>Vertical pill nav</h3> - <p>With a pill-style nav, you can also stack the list items to have a simple sidebar. We don't offer left or right aligned versions here because that's easy enough to customize based on your own needs</p> - <ul class="pills pills-vertical span4"> - <li class="active"><a href="#">Home</a></li> - <li><a href="#">Profile</a></li> - <li><a href="#">Messages</a></li> - <li><a href="#">Settings</a></li> - <li><a href="#">Contact</a></li> - </ul> </div> - </div><!-- /row --> + </div> </section> @@ -629,39 +532,6 @@ -<!-- Step nav -================================================== - -COMMENTED OUT AND NOT SUPPORTED AT THIS TIME. - -<section id="stepNav"> - <div class="page-header"> - <h1>Step nav <small></small></h1> - </div> - <div class="row"> - <div class="span3"> - <p>Placeholder for now!</p> - </div> - <div class="span9"> - <br> - <ul class="step-nav"> - <li class="prev"><a href="#">« Overview</a></li> - <li class="active"><a class="dot" href="#">1</a></li> - <li><a class="dot" href="#">2</a></li> - <li><a class="dot" href="#">3</a></li> - <li><a class="dot" href="#">4</a></li> - <li><a class="dot" href="#">5</a></li> - <li class="next"><a href="#">Base CSS »</a></li> - </ul> - <br> - <br> - </div> - </div> -</section> ---> - - - <!-- Pagination ================================================== --> <section id="carousel"> @@ -727,6 +597,175 @@ COMMENTED OUT AND NOT SUPPORTED AT THIS TIME. +<!-- Media +================================================== --> +<section id="media"> + <div class="page-header"> + <h1>Thumbnails <small>Grids of images, videos, text, and more</small></h1> + </div> + + <div class="row"> + <div class="span6"> + <h2>Default thumbnails</h2> + <p>By default, Bootstrap's thumbnails are designed to showcase linked images with minimal required markup.</p> + <ul class="thumbnails"> + <li class="span3"> + <a href="#" class="thumbnail"> + <img src="http://placehold.it/210x150" alt=""> + </a> + </li> + <li class="span3"> + <a href="#" class="thumbnail"> + <img src="http://placehold.it/210x150" alt=""> + </a> + </li> + <li class="span3"> + <a href="#" class="thumbnail"> + <img src="http://placehold.it/210x150" alt=""> + </a> + </li> + <li class="span3"> + <a href="#" class="thumbnail"> + <img src="http://placehold.it/210x150" alt=""> + </a> + </li> + </ul> + </div> + <div class="span6"> + <h2>Highly customizable</h2> + <p>With a bit of extra markup, it's possible to add any kind of HTML content like headings, paragraphs, or buttons into thumbnails.</p> + <ul class="thumbnails"> + <li class="span3"> + <div class="thumbnail"> + <img src="http://placehold.it/210x150" alt=""> + <div class="caption"> + <h5>Thumbnail label</h5> + <p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p> + <p><a href="#" class="btn primary">Action</a> <a href="#" class="btn">Action</a></p> + </div> + </div> + </li> + <li class="span3"> + <div class="thumbnail"> + <img src="http://placehold.it/210x150" alt=""> + <div class="caption"> + <h5>Thumbnail label</h5> + <p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p> + <p><a href="#" class="btn primary">Action</a> <a href="#" class="btn">Action</a></p> + </div> + </div> + </li> + </ul> + </div> + </div> + + <div class="row"> + <div class="span4"> + <h3>Why use thumbnails</h3> + <p>Thumbnails (previously <code>.media-grid</code> up until v1.4) are great for grids of photos or videos, image search results, retail products, portfolios, and much more. They can be links or static content.</p> + </div> + <div class="span4"> + <h3>Simple, flexible markup</h3> + <p>Thumbnail markup is simple—a <code>ul</code> with any number of <code>li</code> elements is all that is required. It's also super flexible, allowing for any type of content with just a bit more markup to wrap your contents.</p> + </div> + <div class="span4"> + <h3>Uses grid column sizes</h3> + <p>Lastly, the thumbnails component uses existing grid system classes—like <code>.span2</code> or <code>.span3</code>—for control of thumbnail dimensions.</p> + </div> + </div> + + <div class="row"> + <div class="span6"> + <h2>The markup</h2> + <p>As mentioned previously, the required markup for thumbnails is light and straightforward. Here's a look at the default setup <strong>for linked images</strong>:</p> +<pre class="prettyprint linenums"> +<ul class="thumbnails"> + <li class="span3"> + <a href="#" class="thumbnail"> + <img src="http://placehold.it/210x150" alt=""> + </a> + </li> + ... +</ul> +</pre> + <p>For custom HTML content in thumbnails, the markup changes slightly. To allow block level content anywhere, we swap the <code><a></code> for a <code><div></code> like so:</p> +<pre class="prettyprint linenums"> +<ul class="thumbnails"> + <li class="span3"> + <div class="thumbnail"> + <img src="http://placehold.it/210x150" alt=""> + <h5>Thumbnail label</h5> + <p>Thumbnail caption right here...</p> + </div> + </li> + ... +</ul> +</pre> + </div> + <div class="span6"> + <h2>More examples</h2> + <p>Explore all your options with the various grid classes available to you. You can also mix and match different sizes.</p> + <ul class="thumbnails"> + <li class="span4"> + <a href="#" class="thumbnail"> + <img src="http://placehold.it/290x230" alt=""> + </a> + </li> + <li class="span2"> + <a href="#" class="thumbnail"> + <img src="http://placehold.it/130x100" alt=""> + </a> + </li> + <li class="span2"> + <a href="#" class="thumbnail"> + <img src="http://placehold.it/130x100" alt=""> + </a> + </li> + <li class="span2"> + <a href="#" class="thumbnail"> + <img src="http://placehold.it/130x100" alt=""> + </a> + </li> + <li class="span2"> + <a href="#" class="thumbnail"> + <img src="http://placehold.it/130x100" alt=""> + </a> + </li> + <li class="span2"> + <a href="#" class="thumbnail"> + <img src="http://placehold.it/130x100" alt=""> + </a> + </li> + </ul> + </div> + </div> + +</section> + + + +<!-- Autocomplete +================================================== --> +<section id="autocomplete"> + <div class="page-header"> + <h1>Autocomplete <small></small></h1> + </div> + +</section> + + + +<!-- Carousel +================================================== --> +<section id="carousel"> + <div class="page-header"> + <h1>Carousel <small></small></h1> + </div> + +</section> + + + <!-- Alerts & Messages ================================================== --> <section id="alerts"> diff --git a/docs/upgrading.html b/docs/upgrading.html index 3e7e2c768b..f6070f8468 100644 --- a/docs/upgrading.html +++ b/docs/upgrading.html @@ -113,6 +113,15 @@ <li>Now requires you to add a <code><span class="caret"></span></code> to show the dropdown arrow</li> </ul> </li> + <li>Navigation + <ul> + <li>Tabs and pills now require the use of a new base class, <code>.nav</code>, on their <code><ul></code></li> + <li>New nav list component added that uses the same base class, <code>.nav</code></li> + <li>Vertical tabs and pills have been added—just add <code>.stacked</code> to the <code><ul></code></li> + <li>Pills were restyled to be less rounded by default</li> + <li>Pills now have dropdown menu support (they share the same markup and styles as tabs)</li> + </ul> + </li> </ul> <!-- <li> diff --git a/lib/bootstrap.less b/lib/bootstrap.less index d82dffc652..2bec3dd016 100644 --- a/lib/bootstrap.less +++ b/lib/bootstrap.less @@ -33,8 +33,7 @@ // Components: Nav @import "navbar.less"; -@import "tabs-pills.less"; -@import "sidenav.less"; +@import "navs.less"; @import "breadcrumbs.less"; @import "pagination.less"; diff --git a/lib/dropdowns.less b/lib/dropdowns.less index 00c686dc22..a1b9e37bc2 100644 --- a/lib/dropdowns.less +++ b/lib/dropdowns.less @@ -1,4 +1,6 @@ -// Dropdown Menus +// 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; @@ -71,6 +73,7 @@ text-decoration: none; text-shadow: 0 -1px 0 rgba(0,0,0,.25); #gradient > .vertical(@blue, @blueDark); + #gradient > .vertical(@linkColor, darken(@linkColor, 5%)); @shadow: inset 0 1px 0 rgba(0,0,0,.075), inset 0 -1px rgba(0,0,0,.075); .box-shadow(@shadow); } diff --git a/lib/forms.less b/lib/forms.less index 19e2aa8bc1..5053310448 100644 --- a/lib/forms.less +++ b/lib/forms.less @@ -20,6 +20,7 @@ legend { line-height: @baseLineHeight * 2; color: @grayDark; border-bottom: 1px solid #eee; + -webkit-margin-collapse: separate; } // Set font for forms diff --git a/lib/navbar.less b/lib/navbar.less index 90ff786767..00afe3d8fe 100644 --- a/lib/navbar.less +++ b/lib/navbar.less @@ -135,7 +135,7 @@ // Nav for navbar and topbar // ul.nav for all topbar based navigation to avoid inheritance issues and over-specificity -.nav { +.navbar .nav { position: relative; left: 0; display: block; @@ -146,7 +146,6 @@ float: left; } a { - display: block; float: none; padding: 10px 10px 11px; line-height: 19px; @@ -182,7 +181,7 @@ border: 0; } } - // Dropdowns within the .nav +/* // Dropdowns within the .nav .dropdown-toggle:hover, .dropdown.open .dropdown-toggle { background: #444; @@ -213,5 +212,5 @@ background-color: #222; border-color: #444; } - } + }*/ } diff --git a/lib/navs.less b/lib/navs.less new file mode 100644 index 0000000000..8616ea0471 --- /dev/null +++ b/lib/navs.less @@ -0,0 +1,327 @@ +// NAVIGATIONS +// ----------- + + + +// BASE CLASS +// ---------- + +.nav { + margin-left: 0; + margin-bottom: @baseLineHeight; + list-style: none; +} + +// Make links block level +.nav > li > a { + display: block; +} +.nav > li > a:hover { + text-decoration: none; + background-color: #eee; +} + + + +// NAV LIST +// -------- + +.nav.list { + padding-left: 14px; + padding-right: 14px; + margin-bottom: 0; +} +.nav.list > li > a, +.nav.list .nav-header { + display: block; + padding: 3px 15px; + margin-left: -15px; + margin-right: -15px; + text-shadow: 0 1px 0 rgba(255,255,255,.5); +} +.nav.list .nav-header { + font-size: 11px; + font-weight: bold; + line-height: @baseLineHeight; + color: @grayLight; + text-transform: uppercase; +} +.nav.list > li + .nav-header { + margin-top: 9px; +} +.nav.list .active > a { + color: @white; + text-shadow: 0 -1px 0 rgba(0,0,0,.2); + background-color: @linkColor; +} + + + +// TABS AND PILLS +// ------------- + +// Common styles +.tabs, +.pills { + .clearfix(); +} +.tabs > li, +.pills > li { + float: left; +} +.tabs > li > a, +.pills > li > a { + padding-right: 12px; + padding-left: 12px; + margin-right: 2px; + line-height: 14px; // keeps the overall height an even number +} + +// TABS +// ---- + +// Give the tabs something to sit on +.tabs { + border-bottom: 1px solid #ddd; +} + +// Make the list-items overlay the bottom border +.tabs > li { + margin-bottom: -1px; +} + +// Actual tabs (as links) +.tabs > li > a { + padding-top: 9px; + padding-bottom: 9px; + border: 1px solid transparent; + .border-radius(4px 4px 0 0); + &:hover { + border-color: #eee #eee #ddd; + } +} +// Active state, and it's :hover to override normal :hover +.tabs .active > a, +.tabs .active > a:hover { + color: @gray; + background-color: @white; + border: 1px solid #ddd; + border-bottom-color: transparent; + cursor: default; +} + +// PILLS +// ----- + +// Links rendered as pills +.pills > li > a { + padding-top: 8px; + padding-bottom: 8px; + margin-top: 2px; + margin-bottom: 2px; + .border-radius(5px); +} + +// Active state +.pills .active > a, +.pills .active > a:hover { + color: @white; + background-color: @linkColor; +} + + + +// STACKED NAV +// ----------- + +// Stacked tabs and pills +.nav.stacked > li { + float: none; +} +.nav.stacked > li > a { + margin-right: 0; // no need for the gap between nav items +} + +// Tabs +.tabs.stacked { + border-bottom: 0; +} +.tabs.stacked > li > a { + border: 1px solid #ddd; + .border-radius(0); +} +.tabs.stacked > li:first-child > a { + .border-radius(4px 4px 0 0); +} +.tabs.stacked > li:last-child > a { + .border-radius(0 0 4px 4px); +} +.tabs.stacked > li > a:hover { + border-color: #ddd; + z-index: 2; +} + +// Pills +.pills.stacked > li > a { + margin-bottom: 3px; +} +.pills.stacked > li:last-child > a { + margin-bottom: 1px; // decrease margin to match sizing of stacked tabs +} + + + +// DROPDOWNS +// --------- + +// Position the menu +.tabs .dropdown-menu, +.pills .dropdown-menu { + top: 33px; + border-width: 1px; +} +.pills .dropdown-menu { + .border-radius(4px); +} +.tabs .dropdown-toggle .caret, +.pills .dropdown-toggle .caret { + margin-top: 6px; +} +.tabs .open .dropdown-toggle, +.pills .open .dropdown-toggle { + background-color: #999; + border-color: #999; +} +.tabs .open .caret, +.pills .open .caret { + border-top-color: #fff; + .opacity(100); +} + + + +// TABBABLE +// -------- + +.tabbable { + margin-bottom: @baseLineHeight; + + // Tabs on top + .tabs { + margin-bottom: 0; + border-bottom: 0; + } + .tab-content { + padding: 19px; + border: 1px solid #ddd; + } + + // Tabs on bottom + &.tabs-bottom .tabs > li { + margin-top: -1px; + margin-bottom: 0; + } + &.tabs-bottom .tabs > li > a { + .border-radius(0 0 4px 4px); + &:hover { + border-bottom-color: transparent; + border-top-color: #ddd; + } + } + &.tabs-bottom .tabs > .active > a, + &.tabs-bottom .tabs > .active > a:hover { + border-color: transparent #ddd #ddd #ddd; + } + + // Tabs on left and right + &.tabs-left, + &.tabs-right { + .clearfix(); + .tabs { + // Give a fixed width to avoid floating .tab-con + width: 100px; + // Unfloat them so they stack + > li { + float: none; + margin-bottom: -1px; + > a { + margin-bottom: 2px; + &:hover { + border-color: transparent; + } + } + } + } + } + + // Tabs on left + &.tabs-left { + .tab-content { + margin-left: 100px; + } + .tabs { + float: left; + > li { + margin-right: -1px; + > a { + margin-right: 0; + .border-radius(4px 0 0 4px); + + &:hover { + border-right-color: #ddd; + } + } + } + // Active state + .active > a, + .active > a:hover { + border-color: #ddd; + border-right-color: transparent; + } + } + } + + // Tabs on right + &.tabs-right { + .tab-content { + margin-right: 100px; + } + .tabs { + float: right; + > li { + margin-left: -1px; + > a { + margin-left: 0; + .border-radius(0 4px 4px 0); + + &:hover { + border-left-color: #ddd; + } + } + } + // Active state + .active > a, + .active > a:hover { + border-color: #ddd; + border-left-color: transparent; + } + } + } +} + + + + + + + +// Tabbable areas +.tab-content > .tab-pane, +.pill-content > .pill-pane { + display: none; +} +.tab-content > .active, +.pill-content > .active { + display: block; +} + diff --git a/lib/sidenav.less b/lib/sidenav.less deleted file mode 100644 index 51f97f44d2..0000000000 --- a/lib/sidenav.less +++ /dev/null @@ -1,43 +0,0 @@ -// SIDE NAV -// -------- - - -.side-nav { - padding: @baseLineHeight / 2 0; -} -.side-nav .nav-label, -.side-nav .nav-item { - display: block; - padding: 3px 15px; - text-shadow: 0 1px 0 rgba(255,255,255,.5); -} -.side-nav .nav-label { - font-size: 11px; - line-height: @baseLineHeight; - color: @grayLight; - text-transform: uppercase; -} -.side-nav .nav-group { - margin: 0; // clear default ul margins - list-style: none; -} -.side-nav .nav-group + .nav-label { - margin-top: 9px; -} - -.side-nav .nav-item { - font-weight: bold; -} -.side-nav .nav-item i { - vertical-align: -2px; -} -.side-nav .nav-item:hover { - text-decoration: none; -} -.side-nav .active .nav-item { - color: #fff; - text-shadow: 0 -1px 0 rgba(0,0,0,.3); - #gradient > .vertical(#ccc, #999); - @shadow: inset 0 1px 0 rgba(0,0,0,.05), inset 0 -1px 0 rgba(0,0,0,.05); - .box-shadow(@shadow); -} \ No newline at end of file diff --git a/lib/tabs-pills.less b/lib/tabs-pills.less deleted file mode 100644 index 4a94266a34..0000000000 --- a/lib/tabs-pills.less +++ /dev/null @@ -1,285 +0,0 @@ -// Tabs and Pills -.tabs, -.pills { - padding: 0; - margin: 0 0 20px; - list-style: none; - .clearfix(); - > li { - float: left; - > a { - display: block; - } - } -} - -// Tabs -.tabs { - border-color: #ddd; - border-style: solid; - border-width: 0 0 1px; - > li { - position: relative; // For the dropdowns mostly - margin-bottom: -1px; - > a { - padding: 0 15px; - margin-right: 2px; - line-height: @baseLineHeight * 2; - border: 1px solid transparent; - .border-radius(4px 4px 0 0); - &:hover { - text-decoration: none; - background-color: #eee; - border-color: #eee #eee #ddd; - } - } - } - // Active state, and it's :hover to override normal :hover - .active > a, - .active > a:hover { - color: @gray; - background-color: @white; - border: 1px solid #ddd; - border-bottom-color: transparent; - cursor: default; - } -} - -.tabbable { - margin-bottom: @baseLineHeight; - - // Tabs on top - .tabs { - margin-bottom: 0; - border-bottom: 0; - } - .tab-content { - padding: 19px; - border: 1px solid #ddd; - } - - // Tabs on bottom - &.tabs-bottom .tabs > li { - margin-top: -1px; - margin-bottom: 0; - } - &.tabs-bottom .tabs > li > a { - .border-radius(0 0 4px 4px); - &:hover { - border-bottom-color: transparent; - border-top-color: #ddd; - } - } - &.tabs-bottom .tabs > .active > a, - &.tabs-bottom .tabs > .active > a:hover { - border-color: transparent #ddd #ddd #ddd; - } - - // Tabs on left and right - &.tabs-left, - &.tabs-right { - .clearfix(); - .tabs { - // Give a fixed width to avoid floating .tab-con - width: 100px; - // Unfloat them so they stack - > li { - float: none; - margin-bottom: -1px; - > a { - margin-bottom: 2px; - &:hover { - border-color: transparent; - } - } - } - } - } - - // Tabs on left - &.tabs-left { - .tab-content { - margin-left: 100px; - } - .tabs { - float: left; - > li { - margin-right: -1px; - > a { - margin-right: 0; - .border-radius(4px 0 0 4px); - - &:hover { - border-right-color: #ddd; - } - } - } - // Active state - .active > a, - .active > a:hover { - border-color: #ddd; - border-right-color: transparent; - } - } - } - - // Tabs on right - &.tabs-right { - .tab-content { - margin-right: 100px; - } - .tabs { - float: right; - > li { - margin-left: -1px; - > a { - margin-left: 0; - .border-radius(0 4px 4px 0); - - &:hover { - border-left-color: #ddd; - } - } - } - // Active state - .active > a, - .active > a:hover { - border-color: #ddd; - border-left-color: transparent; - } - } - } -} - - -// Dropdowns in tabs -.tabs { - .dropdown-menu { - top: 37px; - border-width: 1px; - } - .dropdown-toggle .caret { - margin-top: 15px; - margin-left: 5px; - } - .open .dropdown-toggle { - border-color: #999; - } - .open .dropdown-toggle .caret { - border-top-color: #fff; - .opacity(100); - } -} - -// Pills -.pills { - > li > a { - padding: 0 15px; - margin: 5px 3px 5px 0; - line-height: 30px; - text-shadow: 0 1px 1px @white; - .border-radius(15px); - &:hover { - color: @white; - text-decoration: none; - text-shadow: 0 1px 1px rgba(0,0,0,.25); - background-color: @linkColorHover; - } - } - .active > a { - color: @white; - text-shadow: 0 1px 1px rgba(0,0,0,.25); - background-color: @linkColor; - } -} - -// Stacked pills -.pills-vertical > li { - float: none; -} - -// Tabbable areas -.tab-content > .tab-pane, -.pill-content > .pill-pane { - display: none; -} -.tab-content > .active, -.pill-content > .active { - display: block; -} - - -// Step nav -.step-nav { - position: relative; // for prev/next links - margin: 0 0 @baseLineHeight; - list-style: none; - line-height: 30px; - text-align: center; - background-color: #f5f5f5; - .border-radius(15px); - li { - display: inline; - color: @grayLight; - } - // prev/next links - .prev, - .next { - position: absolute; - top: 6px; - } - .prev { - left: 15px; - } - .next { - right: 15px; - } - // indicators for each step/page/item/etc - .dot { - display: inline-block; - width: 10px; - height: 10px; - margin: 0 3px; - text-indent: -999em; - background-color: @grayLight; - .border-radius(5px); - .box-shadow(inset 0 1px 1px rgba(0,0,0,.25)); - } - .dot:hover, - .active .dot { - background-color: @grayDark; - } -} - - -// Subnav -// STILL A WIP -.subnav { - #gradient > .vertical(#f5f5f5, #eeeeee); - @shadow: inset 0 1px 0 #fff, 0 0 5px rgba(0,0,0,.5); - .box-shadow(@shadow); - a { - padding: 8px 10px; - font-size: 12px; - color: @linkColor; - text-shadow: 0 1px 0 #fff; - border-left: 1px solid #f9f9f9; - border-right: 1px solid #e5e5e5; - &:hover { - color: @linkColorHover; - background-color: #eee; - } - } - li:first-child a { - border-left: 0; - .border-radius(6px 0 0 6px); - } - li:last-child a { - border-right: 0; - .border-radius(0 6px 6px 0); - } - ul .active > a { - color: @grayDark; - background-color: #eee; - } -} \ No newline at end of file diff --git a/lib/type.less b/lib/type.less index 32cb094310..7e2c4a7a86 100644 --- a/lib/type.less +++ b/lib/type.less @@ -201,7 +201,7 @@ pre { background-color: #f5f5f5; border: 1px solid #ccc; border: 1px solid rgba(0,0,0,.15); - .border-radius(3px); + .border-radius(4px); white-space: pre; white-space: pre-wrap; word-break: break-all; -- GitLab From 95f47026cf55dc029d266e80bb4fab00b85af0e8 Mon Sep 17 00:00:00 2001 From: Mark Otto <markdotto@gmail.com> Date: Sat, 7 Jan 2012 21:09:02 -0800 Subject: [PATCH 220/318] fix up dropdowns and navbar docs for the new dropdown styles --- bootstrap.css | 251 +++++++++++++++---------------------------- bootstrap.min.css | 29 +++-- docs/components.html | 22 ++-- docs/javascript.html | 20 ++-- lib/dropdowns.less | 3 +- lib/navbar.less | 137 ++++++++++++++++------- 6 files changed, 220 insertions(+), 242 deletions(-) diff --git a/bootstrap.css b/bootstrap.css index 5c9d4aa97b..f16ce9e3d3 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: Sat Jan 7 20:25:41 PST 2012 + * Date: Sat Jan 7 20:56:31 PST 2012 */ html, body { margin: 0; @@ -1441,7 +1441,7 @@ i { margin-top: 8px; margin-left: 2px; } -.dropdown:hover .caret { +.dropdown:hover .caret, .open.dropdown .caret { filter: alpha(opacity=100); -moz-opacity: 1; opacity: 1; @@ -1709,45 +1709,15 @@ i { display: block; float: left; margin: 0 10px 0 0; - /* // Dropdowns within the .nav - .dropdown-toggle:hover, - .dropdown.open .dropdown-toggle { - background: #444; - background: rgba(255,255,255,.05); - } - .dropdown-menu { - background-color: #333; - .dropdown-toggle { - color: @white; - &.open { - background: #444; - background: rgba(255,255,255,.05); - } - } - li a { - padding: 4px 15px; - color: #999; - text-shadow: 0 1px 0 rgba(0,0,0,.5); - &:hover { - #gradient > .vertical(#292929,#191919); - color: @white; - } - } - .active a { - color: @white; - } - .divider { - background-color: #222; - border-color: #444; - } - }*/ - +} +.navbar .nav.pull-right { + float: right; } .navbar .nav > li { display: block; float: left; } -.navbar .nav a { +.navbar .nav > li > a { float: none; padding: 10px 10px 11px; line-height: 19px; @@ -1755,7 +1725,8 @@ i { text-decoration: none; text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25); } -.navbar .nav a:hover { +.navbar .nav > li > a:hover { + background-color: transparent; color: #ffffff; text-decoration: none; } @@ -1763,7 +1734,7 @@ i { background-color: #222; background-color: rgba(0, 0, 0, 0.5); } -.navbar .nav .vertical-divider { +.navbar .vertical-divider { height: 40px; width: 1px; margin: 0 5px; @@ -1771,15 +1742,86 @@ i { background-color: #222; border-right: 1px solid #444; } -.navbar .nav.secondary-nav { - float: right; +.navbar .nav.pull-right { margin-left: 10px; margin-right: 0; } -.navbar .nav.secondary-nav .dropdown-menu { +.navbar .dropdown-menu { + top: 42px; + -webkit-border-radius: 4px; + -moz-border-radius: 4px; + border-radius: 4px; +} +.navbar .dropdown-menu:before { + content: ''; + display: inline-block; + border-left: 7px solid transparent; + border-right: 7px solid transparent; + border-bottom: 7px solid #ccc; + border-bottom-color: rgba(0, 0, 0, 0.1); + position: absolute; + top: -7px; + left: 12px; +} +.navbar .dropdown-menu:after { + content: ''; + display: inline-block; + border-left: 6px solid transparent; + border-right: 6px solid transparent; + border-bottom: 6px solid #fff; + position: absolute; + top: -6px; + left: 13px; +} +.navbar .dropdown-toggle .caret, .navbar .open.dropdown .caret { + border-top-color: #fff; +} +.navbar .open .dropdown-toggle { + background-color: transparent; +} +.navbar .nav.pull-right .dropdown-menu { right: 0; - border: 0; } +.navbar .nav.pull-right .dropdown-menu:before { + left: auto; + right: 12px; +} +.navbar .nav.pull-right .dropdown-menu:after { + left: auto; + right: 13px; +} +/* // Dropdowns within the .nav + .dropdown-toggle:hover, + .dropdown.open .dropdown-toggle { + background: #444; + background: rgba(255,255,255,.05); + } + .dropdown-menu { + background-color: #333; + .dropdown-toggle { + color: @white; + &.open { + background: #444; + background: rgba(255,255,255,.05); + } + } + li a { + padding: 4px 15px; + color: #999; + text-shadow: 0 1px 0 rgba(0,0,0,.5); + &:hover { + #gradient > .vertical(#292929,#191919); + color: @white; + } + } + .active a { + color: @white; + } + .divider { + background-color: #222; + border-color: #444; + } + }*/ .nav { margin-left: 0; margin-bottom: 18px; @@ -2042,130 +2084,7 @@ i { .tab-content > .active, .pill-content > .active { display: block; } -.step-nav { - position: relative; - margin: 0 0 18px; - list-style: none; - line-height: 30px; - text-align: center; - background-color: #f5f5f5; - -webkit-border-radius: 15px; - -moz-border-radius: 15px; - border-radius: 15px; -} -.step-nav li { - display: inline; - color: #999999; -} -.step-nav .prev, .step-nav .next { - position: absolute; - top: 6px; -} -.step-nav .prev { - left: 15px; -} -.step-nav .next { - right: 15px; -} -.step-nav .dot { - display: inline-block; - width: 10px; - height: 10px; - margin: 0 3px; - text-indent: -999em; - background-color: #999999; - -webkit-border-radius: 5px; - -moz-border-radius: 5px; - border-radius: 5px; - -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.25); - -moz-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.25); - box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.25); -} -.step-nav .dot:hover, .step-nav .active .dot { - background-color: #333333; -} -.subnav { - background-color: #eeeeee; - background-image: -khtml-gradient(linear, left top, left bottom, from(#f5f5f5), to(#eeeeee)); - background-image: -moz-linear-gradient(top, #f5f5f5, #eeeeee); - background-image: -ms-linear-gradient(top, #f5f5f5, #eeeeee); - background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #f5f5f5), color-stop(100%, #eeeeee)); - background-image: -webkit-linear-gradient(top, #f5f5f5, #eeeeee); - background-image: -o-linear-gradient(top, #f5f5f5, #eeeeee); - background-image: linear-gradient(top, #f5f5f5, #eeeeee); - background-repeat: repeat-x; - filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#f5f5f5', endColorstr='#eeeeee', GradientType=0); - -webkit-box-shadow: inset 0 1px 0 #ffffff, 0 0 5px rgba(0, 0, 0, 0.5); - -moz-box-shadow: inset 0 1px 0 #ffffff, 0 0 5px rgba(0, 0, 0, 0.5); - box-shadow: inset 0 1px 0 #ffffff, 0 0 5px rgba(0, 0, 0, 0.5); -} -.subnav a { - padding: 8px 10px; - font-size: 12px; - color: #0088cc; - text-shadow: 0 1px 0 #fff; - border-left: 1px solid #f9f9f9; - border-right: 1px solid #e5e5e5; -} -.subnav a:hover { - color: #005580; - background-color: #eee; -} -.subnav li:first-child a { - border-left: 0; - -webkit-border-radius: 6px 0 0 6px; - -moz-border-radius: 6px 0 0 6px; - border-radius: 6px 0 0 6px; -} -.subnav li:last-child a { - border-right: 0; - -webkit-border-radius: 0 6px 6px 0; - -moz-border-radius: 0 6px 6px 0; - border-radius: 0 6px 6px 0; -} -.subnav ul .active > a { - color: #333333; - background-color: #eee; -} -/*.side-nav { - padding: @baseLineHeight / 2 0; -} -.side-nav .nav-label, -.side-nav .nav-item { - display: block; - padding: 3px 15px; - text-shadow: 0 1px 0 rgba(255,255,255,.5); -} -.side-nav .nav-label { - font-size: 11px; - line-height: @baseLineHeight; - color: @grayLight; - text-transform: uppercase; -} -.side-nav .nav-group { - margin: 0; // clear default ul margins - list-style: none; -} -.side-nav .nav-group + .nav-label { - margin-top: 9px; -} - -.side-nav .nav-item { - font-weight: bold; -} -.side-nav .nav-item i { - vertical-align: -2px; -} -.side-nav .nav-item:hover { - text-decoration: none; -} -.side-nav .active .nav-item { - color: #fff; - text-shadow: 0 -1px 0 rgba(0,0,0,.3); - #gradient > .vertical(#ccc, #999); - @shadow: inset 0 1px 0 rgba(0,0,0,.05), inset 0 -1px 0 rgba(0,0,0,.05); - .box-shadow(@shadow); -}*/.breadcrumb { +.breadcrumb { padding: 7px 14px; margin: 0 0 18px; background-color: #f5f5f5; diff --git a/bootstrap.min.css b/bootstrap.min.css index 5597bf1ef9..9974092057 100644 --- a/bootstrap.min.css +++ b/bootstrap.min.css @@ -302,7 +302,7 @@ i{background-image:url(docs/assets/img/glyphicons-halflings-sprite.png);backgrou .dropdown{position:relative;} .caret{display:inline-block;width:0;height:0;text-indent:-99999px;vertical-align:top;border-left:4px solid transparent;border-right:4px solid transparent;border-top:4px solid #000;filter:alpha(opacity=30);-moz-opacity:0.3;opacity:0.3;content:"\2193";} .dropdown .caret{margin-top:8px;margin-left:2px;} -.dropdown:hover .caret{filter:alpha(opacity=100);-moz-opacity:1;opacity:1;} +.dropdown:hover .caret,.open.dropdown .caret{filter:alpha(opacity=100);-moz-opacity:1;opacity:1;} .dropdown-menu{position:absolute;top:40px;z-index:1000;float:left;display:none;min-width:160px;max-width:220px;_width:160px;padding:5px 0;margin:0;list-style:none;background-color:#ffffff;border-color:#999;border-color:rgba(0, 0, 0, 0.1);border-style:solid;border-width:1px;-webkit-border-radius:0 0 5px 5px;-moz-border-radius:0 0 5px 5px;border-radius:0 0 5px 5px;-webkit-box-shadow:0 5px 10px rgba(0, 0, 0, 0.2);-moz-box-shadow:0 5px 10px rgba(0, 0, 0, 0.2);box-shadow:0 5px 10px rgba(0, 0, 0, 0.2);-webkit-background-clip:padding-box;-moz-background-clip:padding;background-clip:padding-box;zoom:1;}.dropdown-menu .divider{height:1px;margin:5px 1px;overflow:hidden;background-color:#e5e5e5;border-bottom:1px solid #ffffff;} .dropdown-menu a{display:block;padding:2px 15px;clear:both;font-weight:normal;line-height:18px;color:#555555;}.dropdown-menu a:hover{color:#fff;text-decoration:none;text-shadow:0 -1px 0 rgba(0, 0, 0, 0.25);background-color:#0064cd;background-image:-khtml-gradient(linear, left top, left bottom, from(#049cdb), to(#0064cd));background-image:-moz-linear-gradient(top, #049cdb, #0064cd);background-image:-ms-linear-gradient(top, #049cdb, #0064cd);background-image:-webkit-gradient(linear, left top, left bottom, color-stop(0%, #049cdb), color-stop(100%, #0064cd));background-image:-webkit-linear-gradient(top, #049cdb, #0064cd);background-image:-o-linear-gradient(top, #049cdb, #0064cd);background-image:linear-gradient(top, #049cdb, #0064cd);background-repeat:repeat-x;filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#049cdb', endColorstr='#0064cd', GradientType=0);background-color:#0077b3;background-image:-khtml-gradient(linear, left top, left bottom, from(#0088cc), to(#0077b3));background-image:-moz-linear-gradient(top, #0088cc, #0077b3);background-image:-ms-linear-gradient(top, #0088cc, #0077b3);background-image:-webkit-gradient(linear, left top, left bottom, color-stop(0%, #0088cc), color-stop(100%, #0077b3));background-image:-webkit-linear-gradient(top, #0088cc, #0077b3);background-image:-o-linear-gradient(top, #0088cc, #0077b3);background-image:linear-gradient(top, #0088cc, #0077b3);background-repeat:repeat-x;filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#0088cc', endColorstr='#0077b3', GradientType=0);-webkit-box-shadow:inset 0 1px 0 rgba(0, 0, 0, 0.075),inset 0 -1px rgba(0, 0, 0, 0.075);-moz-box-shadow:inset 0 1px 0 rgba(0, 0, 0, 0.075),inset 0 -1px rgba(0, 0, 0, 0.075);box-shadow:inset 0 1px 0 rgba(0, 0, 0, 0.075),inset 0 -1px rgba(0, 0, 0, 0.075);} .dropdown.open .dropdown-toggle{color:#ffffff;background:#ccc;background:rgba(0, 0, 0, 0.3);} @@ -325,11 +325,20 @@ i{background-image:url(docs/assets/img/glyphicons-halflings-sprite.png);backgrou .navbar-static{margin-bottom:18px;} .navbar-static .navbar-inner{padding-left:20px;padding-right:20px;-webkit-border-radius:4px;-moz-border-radius:4px;border-radius:4px;} .navbar-fixed{position:fixed;top:0;right:0;left:0;z-index:1010;} -.navbar .nav{position:relative;left:0;display:block;float:left;margin:0 10px 0 0;}.navbar .nav>li{display:block;float:left;} -.navbar .nav a{float:none;padding:10px 10px 11px;line-height:19px;color:#999999;text-decoration:none;text-shadow:0 -1px 0 rgba(0, 0, 0, 0.25);}.navbar .nav a:hover{color:#ffffff;text-decoration:none;} +.navbar .nav{position:relative;left:0;display:block;float:left;margin:0 10px 0 0;} +.navbar .nav.pull-right{float:right;} +.navbar .nav>li{display:block;float:left;} +.navbar .nav>li>a{float:none;padding:10px 10px 11px;line-height:19px;color:#999999;text-decoration:none;text-shadow:0 -1px 0 rgba(0, 0, 0, 0.25);} +.navbar .nav>li>a:hover{background-color:transparent;color:#ffffff;text-decoration:none;} .navbar .nav .active>a{background-color:#222;background-color:rgba(0, 0, 0, 0.5);} -.navbar .nav .vertical-divider{height:40px;width:1px;margin:0 5px;overflow:hidden;background-color:#222;border-right:1px solid #444;} -.navbar .nav.secondary-nav{float:right;margin-left:10px;margin-right:0;}.navbar .nav.secondary-nav .dropdown-menu{right:0;border:0;} +.navbar .vertical-divider{height:40px;width:1px;margin:0 5px;overflow:hidden;background-color:#222;border-right:1px solid #444;} +.navbar .nav.pull-right{margin-left:10px;margin-right:0;} +.navbar .dropdown-menu{top:42px;-webkit-border-radius:4px;-moz-border-radius:4px;border-radius:4px;}.navbar .dropdown-menu:before{content:'';display:inline-block;border-left:7px solid transparent;border-right:7px solid transparent;border-bottom:7px solid #ccc;border-bottom-color:rgba(0, 0, 0, 0.1);position:absolute;top:-7px;left:12px;} +.navbar .dropdown-menu:after{content:'';display:inline-block;border-left:6px solid transparent;border-right:6px solid transparent;border-bottom:6px solid #fff;position:absolute;top:-6px;left:13px;} +.navbar .dropdown-toggle .caret,.navbar .open.dropdown .caret{border-top-color:#fff;} +.navbar .open .dropdown-toggle{background-color:transparent;} +.navbar .nav.pull-right .dropdown-menu{right:0;}.navbar .nav.pull-right .dropdown-menu:before{left:auto;right:12px;} +.navbar .nav.pull-right .dropdown-menu:after{left:auto;right:13px;} .nav{margin-left:0;margin-bottom:18px;list-style:none;} .nav>li>a{display:block;} .nav>li>a:hover{text-decoration:none;background-color:#eee;} @@ -378,16 +387,6 @@ i{background-image:url(docs/assets/img/glyphicons-halflings-sprite.png);backgrou .tabbable.tabs-right .tabs .active>a,.tabbable.tabs-right .tabs .active>a:hover{border-color:#ddd;border-left-color:transparent;} .tab-content>.tab-pane,.pill-content>.pill-pane{display:none;} .tab-content>.active,.pill-content>.active{display:block;} -.step-nav{position:relative;margin:0 0 18px;list-style:none;line-height:30px;text-align:center;background-color:#f5f5f5;-webkit-border-radius:15px;-moz-border-radius:15px;border-radius:15px;}.step-nav li{display:inline;color:#999999;} -.step-nav .prev,.step-nav .next{position:absolute;top:6px;} -.step-nav .prev{left:15px;} -.step-nav .next{right:15px;} -.step-nav .dot{display:inline-block;width:10px;height:10px;margin:0 3px;text-indent:-999em;background-color:#999999;-webkit-border-radius:5px;-moz-border-radius:5px;border-radius:5px;-webkit-box-shadow:inset 0 1px 1px rgba(0, 0, 0, 0.25);-moz-box-shadow:inset 0 1px 1px rgba(0, 0, 0, 0.25);box-shadow:inset 0 1px 1px rgba(0, 0, 0, 0.25);} -.step-nav .dot:hover,.step-nav .active .dot{background-color:#333333;} -.subnav{background-color:#eeeeee;background-image:-khtml-gradient(linear, left top, left bottom, from(#f5f5f5), to(#eeeeee));background-image:-moz-linear-gradient(top, #f5f5f5, #eeeeee);background-image:-ms-linear-gradient(top, #f5f5f5, #eeeeee);background-image:-webkit-gradient(linear, left top, left bottom, color-stop(0%, #f5f5f5), color-stop(100%, #eeeeee));background-image:-webkit-linear-gradient(top, #f5f5f5, #eeeeee);background-image:-o-linear-gradient(top, #f5f5f5, #eeeeee);background-image:linear-gradient(top, #f5f5f5, #eeeeee);background-repeat:repeat-x;filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#f5f5f5', endColorstr='#eeeeee', GradientType=0);-webkit-box-shadow:inset 0 1px 0 #ffffff,0 0 5px rgba(0, 0, 0, 0.5);-moz-box-shadow:inset 0 1px 0 #ffffff,0 0 5px rgba(0, 0, 0, 0.5);box-shadow:inset 0 1px 0 #ffffff,0 0 5px rgba(0, 0, 0, 0.5);}.subnav a{padding:8px 10px;font-size:12px;color:#0088cc;text-shadow:0 1px 0 #fff;border-left:1px solid #f9f9f9;border-right:1px solid #e5e5e5;}.subnav a:hover{color:#005580;background-color:#eee;} -.subnav li:first-child a{border-left:0;-webkit-border-radius:6px 0 0 6px;-moz-border-radius:6px 0 0 6px;border-radius:6px 0 0 6px;} -.subnav li:last-child a{border-right:0;-webkit-border-radius:0 6px 6px 0;-moz-border-radius:0 6px 6px 0;border-radius:0 6px 6px 0;} -.subnav ul .active>a{color:#333333;background-color:#eee;} .breadcrumb{padding:7px 14px;margin:0 0 18px;background-color:#f5f5f5;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);background-repeat:repeat-x;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:#999999;} .breadcrumb .active a{color:#333333;} diff --git a/docs/components.html b/docs/components.html index eb9932473d..934a90fbcc 100644 --- a/docs/components.html +++ b/docs/components.html @@ -386,27 +386,30 @@ <li><a href="#">Link</a></li> <li><a href="#">Link</a></li> <li class="dropdown"> - <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown</a> + <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a> <ul class="dropdown-menu"> - <li><a href="#">Secondary link</a></li> + <li><a href="#">Action</a></li> + <li><a href="#">Another action</a></li> <li><a href="#">Something else here</a></li> <li class="divider"></li> - <li><a href="#">Another link</a></li> + <li><a href="#">Separated link</a></li> </ul> </li> </ul> <form class="navbar-search pull-left" action=""> <input type="text" class="search-query span2" placeholder="Search"> </form> - <ul class="nav secondary-nav"> + <ul class="nav pull-right"> + <li><a href="#">Link</a></li> <li class="vertical-divider"></li> <li class="dropdown"> - <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown</a> + <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a> <ul class="dropdown-menu"> - <li><a href="#">Secondary link</a></li> + <li><a href="#">Action</a></li> + <li><a href="#">Another action</a></li> <li><a href="#">Something else here</a></li> <li class="divider"></li> - <li><a href="#">Another link</a></li> + <li><a href="#">Separated link</a></li> </ul> </li> </ul> @@ -460,7 +463,8 @@ <li><a href="#">Link</a></li> </ul> </pre> - <p>Adding dropdowns to the nav is super simple, but does require the use of <a href="./javascript.html/#dropdowns">our javascript plugin</a>.</p> + <h3>Adding dropdowns</h3> + <p>Adding dropdowns to the nav is super simple, but does require the use of <a href="./javascript.html/#dropdown">our javascript plugin</a>.</p> <pre class="prettyprint linenums"> <ul class="nav"> <li class="dropdown"> @@ -468,6 +472,7 @@ class="dropdown-toggle" data-toggle="dropdown"> Account + <b class="caret"></b> </a> <ul class="dropdown-menu"> ... @@ -475,6 +480,7 @@ </li> </ul> </pre> + <p><a class="btn" href="./javascript.html/#dropdown">Get the javascript →</a></p> </div> </div> diff --git a/docs/javascript.html b/docs/javascript.html index ca9217674f..dbf8d922a2 100644 --- a/docs/javascript.html +++ b/docs/javascript.html @@ -323,7 +323,7 @@ $('#myModal').on('hidden', function () { <ul class="tabs"> <li class="active"><a href="#">Home</a></li> <li id="secondary" class="dropdown"> - <a href="#secondary" class="dropdown-toggle" data-toggle="dropdown">Dropdown <span class="caret"></span></a> + <a href="#secondary" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a> <ul class="dropdown-menu"> <li><a href="#">Secondary link</a></li> <li><a href="#">Something else here</a></li> @@ -349,23 +349,15 @@ $('#myModal').on('hidden', function () { <form class="form-search navbar-search pull-left" action=""> <input type="text" class="search-query span2" placeholder="Search"> </form> - <ul class="nav secondary-nav"> + <ul class="nav pull-right"> <li id="fat-menu" class="dropdown"> - <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown 1 <span class="caret"></span></a> + <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown 1 <b class="caret"></b></a> <ul class="dropdown-menu"> - <li><a href="#">Secondary link</a></li> + <li><a href="#">Action</a></li> + <li><a href="#">Another action</a></li> <li><a href="#">Something else here</a></li> <li class="divider"></li> - <li><a href="#">Another link</a></li> - </ul> - </li> - <li id="mdo-menu" class="dropdown"> - <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown 2 <span class="caret"></span></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> + <li><a href="#">Separated link</a></li> </ul> </li> </ul> diff --git a/lib/dropdowns.less b/lib/dropdowns.less index a1b9e37bc2..f59ab3728b 100644 --- a/lib/dropdowns.less +++ b/lib/dropdowns.less @@ -22,7 +22,8 @@ margin-top: 8px; margin-left: 2px; } -.dropdown:hover .caret { +.dropdown:hover .caret, +.open.dropdown .caret { .opacity(100); } // The dropdown menu (ul) diff --git a/lib/navbar.less b/lib/navbar.less index 00afe3d8fe..b7f2231417 100644 --- a/lib/navbar.less +++ b/lib/navbar.less @@ -133,54 +133,116 @@ // NAVIGATION // ---------- -// Nav for navbar and topbar -// ul.nav for all topbar based navigation to avoid inheritance issues and over-specificity .navbar .nav { position: relative; left: 0; display: block; float: left; margin: 0 10px 0 0; - > li { - display: block; - float: left; +} +.navbar .nav.pull-right { + float: right; // redeclare due to specificity +} +.navbar .nav > li { + display: block; + float: left; +} + +// Links +.navbar .nav > li > a { + float: none; + padding: 10px 10px 11px; + line-height: 19px; + color: @grayLight; + text-decoration: none; + text-shadow: 0 -1px 0 rgba(0,0,0,.25); +} +// Hover +.navbar .nav > li > a:hover { + background-color: transparent; + color: @white; + text-decoration: none; +} + +// Active nav items +.navbar .nav .active > a { + background-color: #222; + background-color: rgba(0,0,0,.5); +} + +// Dividers (basically a vertical hr) +.navbar .vertical-divider { + height: 40px; + width: 1px; + margin: 0 5px; + overflow: hidden; + background-color: #222; + border-right: 1px solid #444; +} + +// Secondary (floated right) nav in topbar +.navbar .nav.pull-right { + margin-left: 10px; + margin-right: 0; +} + + + +// Dropdown menus +// -------------- + +// Menu position and menu carets +.navbar .dropdown-menu { + top: 42px; + .border-radius(4px); + &:before { + content: ''; + display: inline-block; + border-left: 7px solid transparent; + border-right: 7px solid transparent; + border-bottom: 7px solid #ccc; + border-bottom-color: rgba(0,0,0,.1); + position: absolute; + top: -7px; + left: 12px; } - a { - float: none; - padding: 10px 10px 11px; - line-height: 19px; - color: @grayLight; - text-decoration: none; - text-shadow: 0 -1px 0 rgba(0,0,0,.25); - &:hover { - color: @white; - text-decoration: none; - } + &:after { + content: ''; + display: inline-block; + border-left: 6px solid transparent; + border-right: 6px solid transparent; + border-bottom: 6px solid #fff; + position: absolute; + top: -6px; + left: 13px; } - .active > a { - background-color: #222; - background-color: rgba(0,0,0,.5); +} + +// Dropdown toggle caret +.navbar .dropdown-toggle .caret, +.navbar .open.dropdown .caret { + border-top-color: #fff; +} + +// Remove background color from open dropdown +.navbar .open .dropdown-toggle { + background-color: transparent; +} + +// Right aligned menus need alt position +.navbar .nav.pull-right .dropdown-menu { + right: 0; + &:before { + left: auto; + right: 12px; } - // Dividers (basically a vertical hr) - .vertical-divider { - height: 40px; - width: 1px; - margin: 0 5px; - overflow: hidden; - background-color: #222; - border-right: 1px solid #444; + &:after { + left: auto; + right: 13px; } +} + - // Secondary (floated right) nav in topbar - &.secondary-nav { - float: right; - margin-left: 10px; - margin-right: 0; - .dropdown-menu { - right: 0; - border: 0; - } - } /* // Dropdowns within the .nav .dropdown-toggle:hover, .dropdown.open .dropdown-toggle { @@ -213,4 +275,3 @@ border-color: #444; } }*/ -} -- GitLab From ecffa038903412419163c7aed9299a7289ad14ad Mon Sep 17 00:00:00 2001 From: Mark Otto <markdotto@gmail.com> Date: Sat, 7 Jan 2012 21:10:17 -0800 Subject: [PATCH 221/318] nuke unused code, add to upgrading page --- bootstrap.css | 34 +--------------------------------- docs/upgrading.html | 1 + lib/navbar.less | 34 ---------------------------------- 3 files changed, 2 insertions(+), 67 deletions(-) diff --git a/bootstrap.css b/bootstrap.css index f16ce9e3d3..6d9d78ebb1 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: Sat Jan 7 20:56:31 PST 2012 + * Date: Sat Jan 7 21:10:08 PST 2012 */ html, body { margin: 0; @@ -1790,38 +1790,6 @@ i { left: auto; right: 13px; } -/* // Dropdowns within the .nav - .dropdown-toggle:hover, - .dropdown.open .dropdown-toggle { - background: #444; - background: rgba(255,255,255,.05); - } - .dropdown-menu { - background-color: #333; - .dropdown-toggle { - color: @white; - &.open { - background: #444; - background: rgba(255,255,255,.05); - } - } - li a { - padding: 4px 15px; - color: #999; - text-shadow: 0 1px 0 rgba(0,0,0,.5); - &:hover { - #gradient > .vertical(#292929,#191919); - color: @white; - } - } - .active a { - color: @white; - } - .divider { - background-color: #222; - border-color: #444; - } - }*/ .nav { margin-left: 0; margin-bottom: 18px; diff --git a/docs/upgrading.html b/docs/upgrading.html index f6070f8468..916240794f 100644 --- a/docs/upgrading.html +++ b/docs/upgrading.html @@ -111,6 +111,7 @@ <ul> <li>Updated the <code>.dropdown-menu</code> to tighten up spacing</li> <li>Now requires you to add a <code><span class="caret"></span></code> to show the dropdown arrow</li> + <li>The navbar (fixed topbar) has brand new dropdowns. Gone are the dark versions and in their place are the standard white ones with an additional caret at their tops for clarity of position.</li> </ul> </li> <li>Navigation diff --git a/lib/navbar.less b/lib/navbar.less index b7f2231417..8ee203307f 100644 --- a/lib/navbar.less +++ b/lib/navbar.less @@ -241,37 +241,3 @@ right: 13px; } } - - -/* // Dropdowns within the .nav - .dropdown-toggle:hover, - .dropdown.open .dropdown-toggle { - background: #444; - background: rgba(255,255,255,.05); - } - .dropdown-menu { - background-color: #333; - .dropdown-toggle { - color: @white; - &.open { - background: #444; - background: rgba(255,255,255,.05); - } - } - li a { - padding: 4px 15px; - color: #999; - text-shadow: 0 1px 0 rgba(0,0,0,.5); - &:hover { - #gradient > .vertical(#292929,#191919); - color: @white; - } - } - .active a { - color: @white; - } - .divider { - background-color: #222; - border-color: #444; - } - }*/ -- GitLab From d0eecc85f89fd258a2e58d7be06a8b6068da90e4 Mon Sep 17 00:00:00 2001 From: Mark Otto <markdotto@gmail.com> Date: Sat, 7 Jan 2012 21:18:14 -0800 Subject: [PATCH 222/318] remove tabbable stuff to try new approach --- docs/components.html | 19 ++++++++++++++++++- lib/navs.less | 3 ++- 2 files changed, 20 insertions(+), 2 deletions(-) diff --git a/docs/components.html b/docs/components.html index 934a90fbcc..e0ce812976 100644 --- a/docs/components.html +++ b/docs/components.html @@ -258,7 +258,24 @@ </div> - + <h2>Tabbable tabs</h2> + <div class="row"> + <div class="span4"> + <h3>What's included</h3> + <p>Bring your tabs to life with a simple plugin to toggle between content via tabs. Bootstrap integrates tabbable tabs in four styles:</p> + <ul> + <li>top (default)</li> + <li>right</li> + <li>bottom</li> + <li>left</li> + </ul> + <p>Changing between them is easy and only requires changing very little markup.</p> + </div> + <div class="span4"> + </div> + <div class="span4"> + </div> + </div> diff --git a/lib/navs.less b/lib/navs.less index 8616ea0471..0d31cf3bcf 100644 --- a/lib/navs.less +++ b/lib/navs.less @@ -203,6 +203,7 @@ // TABBABLE // -------- +/* .tabbable { margin-bottom: @baseLineHeight; @@ -308,7 +309,7 @@ } } } - +*/ -- GitLab From 22e0c5f7c8c092531b111b6042a7d7ee87d406b6 Mon Sep 17 00:00:00 2001 From: Mark Otto <markdotto@gmail.com> Date: Sat, 7 Jan 2012 22:06:44 -0800 Subject: [PATCH 223/318] redoing the tabs on bottom, left, and right --- bootstrap.css | 180 ++++++++++++++++++++++++++--------------- bootstrap.min.css | 31 ++++---- docs/components.html | 186 +++++++++++++++++++++++-------------------- lib/navs.less | 113 ++++++++++++++++++++------ 4 files changed, 321 insertions(+), 189 deletions(-) diff --git a/bootstrap.css b/bootstrap.css index 6d9d78ebb1..ebb3cbe294 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: Sat Jan 7 21:10:08 PST 2012 + * Date: Sat Jan 7 22:06:30 PST 2012 */ html, body { margin: 0; @@ -1948,104 +1948,160 @@ i { opacity: 1; } .tabbable { - margin-bottom: 18px; + zoom: 1; } -.tabbable .tabs { - margin-bottom: 0; +.tabbable:before, .tabbable:after { + display: table; + *display: inline; + content: ""; + zoom: 1; +} +.tabbable:after { + clear: both; +} +.tabs-below .tabs, .tabs-right .tabs, .tabs-left .tabs { border-bottom: 0; } -.tabbable .tab-content { - padding: 19px; - border: 1px solid #ddd; +.tabs-below .tabs { + border-top: 1px solid #ddd; } -.tabbable.tabs-bottom .tabs > li { +.tabs-below .tabs > li { margin-top: -1px; margin-bottom: 0; } -.tabbable.tabs-bottom .tabs > li > a { +.tabs-below .tabs > li > a { -webkit-border-radius: 0 0 4px 4px; -moz-border-radius: 0 0 4px 4px; border-radius: 0 0 4px 4px; } -.tabbable.tabs-bottom .tabs > li > a:hover { +.tabs-below .tabs > li > a:hover { border-bottom-color: transparent; border-top-color: #ddd; } -.tabbable.tabs-bottom .tabs > .active > a, .tabbable.tabs-bottom .tabs > .active > a:hover { +.tabs-below .tabs .active > a, .tabs-below .tabs .active > a:hover { border-color: transparent #ddd #ddd #ddd; } -.tabbable.tabs-left, .tabbable.tabs-right { - zoom: 1; -} -.tabbable.tabs-left:before, -.tabbable.tabs-right:before, -.tabbable.tabs-left:after, -.tabbable.tabs-right:after { - display: table; - *display: inline; - content: ""; - zoom: 1; -} -.tabbable.tabs-left:after, .tabbable.tabs-right:after { - clear: both; -} -.tabbable.tabs-left .tabs, .tabbable.tabs-right .tabs { - width: 100px; -} -.tabbable.tabs-left .tabs > li, .tabbable.tabs-right .tabs > li { +.tabs-left .tabs > li, .tabs-right .tabs > li { float: none; - margin-bottom: -1px; -} -.tabbable.tabs-left .tabs > li > a, .tabbable.tabs-right .tabs > li > a { - margin-bottom: 2px; -} -.tabbable.tabs-left .tabs > li > a:hover, .tabbable.tabs-right .tabs > li > a:hover { - border-color: transparent; } -.tabbable.tabs-left .tab-content { - margin-left: 100px; +.tabs-left .tabs > li > a, .tabs-right .tabs > li > a { + min-width: 74px; + margin-right: 0; + margin-bottom: 3px; } -.tabbable.tabs-left .tabs { +.tabs-left .tabs { float: left; + margin-right: 19px; + border-right: 1px solid #ddd; } -.tabbable.tabs-left .tabs > li { +.tabs-left .tabs > li > a { margin-right: -1px; -} -.tabbable.tabs-left .tabs > li > a { - margin-right: 0; -webkit-border-radius: 4px 0 0 4px; -moz-border-radius: 4px 0 0 4px; border-radius: 4px 0 0 4px; } -.tabbable.tabs-left .tabs > li > a:hover { - border-right-color: #ddd; -} -.tabbable.tabs-left .tabs .active > a, .tabbable.tabs-left .tabs .active > a:hover { - border-color: #ddd; - border-right-color: transparent; +.tabs-left .tabs > li > a:hover { + border-color: #eee #ddd #eee #eee; } -.tabbable.tabs-right .tab-content { - margin-right: 100px; +.tabs-left .tabs .active > a, .tabs-left .tabs .active > a:hover { + border-color: #ddd transparent #ddd #ddd; } -.tabbable.tabs-right .tabs { +.tabs-right .tabs { float: right; + margin-left: 19px; + border-left: 1px solid #ddd; } -.tabbable.tabs-right .tabs > li { +.tabs-right .tabs > li > a { margin-left: -1px; -} -.tabbable.tabs-right .tabs > li > a { - margin-left: 0; -webkit-border-radius: 0 4px 4px 0; -moz-border-radius: 0 4px 4px 0; border-radius: 0 4px 4px 0; } -.tabbable.tabs-right .tabs > li > a:hover { - border-left-color: #ddd; +.tabs-right .tabs > li > a:hover { + border-color: #eee #eee #eee #ddd; } -.tabbable.tabs-right .tabs .active > a, .tabbable.tabs-right .tabs .active > a:hover { - border-color: #ddd; - border-left-color: transparent; +.tabs-right .tabs .active > a, .tabs-right .tabs .active > a:hover { + border-color: #ddd #ddd #ddd transparent; +} +/* +.tabbable { + + // Tabs on left and right + &.tabs-left, + &.tabs-right { + .clearfix(); + .tabs { + // Give a fixed width to avoid floating .tab-con + width: 100px; + // Unfloat them so they stack + > li { + float: none; + margin-bottom: -1px; + > a { + margin-bottom: 2px; + &:hover { + border-color: transparent; + } + } + } + } + } + + // Tabs on left + &.tabs-left { + .tab-content { + margin-left: 100px; + } + .tabs { + float: left; + > li { + margin-right: -1px; + > a { + margin-right: 0; + .border-radius(4px 0 0 4px); + + &:hover { + border-right-color: #ddd; + } + } + } + // Active state + .active > a, + .active > a:hover { + border-color: #ddd; + border-right-color: transparent; + } + } + } + + // Tabs on right + &.tabs-right { + .tab-content { + margin-right: 100px; + } + .tabs { + float: right; + > li { + margin-left: -1px; + > a { + margin-left: 0; + .border-radius(0 4px 4px 0); + + &:hover { + border-left-color: #ddd; + } + } + } + // Active state + .active > a, + .active > a:hover { + border-color: #ddd; + border-left-color: transparent; + } + } + } } +*/ .tab-content > .tab-pane, .pill-content > .pill-pane { display: none; } diff --git a/bootstrap.min.css b/bootstrap.min.css index 9974092057..868cfcb659 100644 --- a/bootstrap.min.css +++ b/bootstrap.min.css @@ -371,20 +371,23 @@ i{background-image:url(docs/assets/img/glyphicons-halflings-sprite.png);backgrou .tabs .dropdown-toggle .caret,.pills .dropdown-toggle .caret{margin-top:6px;} .tabs .open .dropdown-toggle,.pills .open .dropdown-toggle{background-color:#999;border-color:#999;} .tabs .open .caret,.pills .open .caret{border-top-color:#fff;filter:alpha(opacity=100);-moz-opacity:1;opacity:1;} -.tabbable{margin-bottom:18px;}.tabbable .tabs{margin-bottom:0;border-bottom:0;} -.tabbable .tab-content{padding:19px;border:1px solid #ddd;} -.tabbable.tabs-bottom .tabs>li{margin-top:-1px;margin-bottom:0;} -.tabbable.tabs-bottom .tabs>li>a{-webkit-border-radius:0 0 4px 4px;-moz-border-radius:0 0 4px 4px;border-radius:0 0 4px 4px;}.tabbable.tabs-bottom .tabs>li>a:hover{border-bottom-color:transparent;border-top-color:#ddd;} -.tabbable.tabs-bottom .tabs>.active>a,.tabbable.tabs-bottom .tabs>.active>a:hover{border-color:transparent #ddd #ddd #ddd;} -.tabbable.tabs-left,.tabbable.tabs-right{zoom:1;}.tabbable.tabs-left:before,.tabbable.tabs-right:before,.tabbable.tabs-left:after,.tabbable.tabs-right:after{display:table;*display:inline;content:"";zoom:1;} -.tabbable.tabs-left:after,.tabbable.tabs-right:after{clear:both;} -.tabbable.tabs-left .tabs,.tabbable.tabs-right .tabs{width:100px;}.tabbable.tabs-left .tabs>li,.tabbable.tabs-right .tabs>li{float:none;margin-bottom:-1px;}.tabbable.tabs-left .tabs>li>a,.tabbable.tabs-right .tabs>li>a{margin-bottom:2px;}.tabbable.tabs-left .tabs>li>a:hover,.tabbable.tabs-right .tabs>li>a:hover{border-color:transparent;} -.tabbable.tabs-left .tab-content{margin-left:100px;} -.tabbable.tabs-left .tabs{float:left;}.tabbable.tabs-left .tabs>li{margin-right:-1px;}.tabbable.tabs-left .tabs>li>a{margin-right:0;-webkit-border-radius:4px 0 0 4px;-moz-border-radius:4px 0 0 4px;border-radius:4px 0 0 4px;}.tabbable.tabs-left .tabs>li>a:hover{border-right-color:#ddd;} -.tabbable.tabs-left .tabs .active>a,.tabbable.tabs-left .tabs .active>a:hover{border-color:#ddd;border-right-color:transparent;} -.tabbable.tabs-right .tab-content{margin-right:100px;} -.tabbable.tabs-right .tabs{float:right;}.tabbable.tabs-right .tabs>li{margin-left:-1px;}.tabbable.tabs-right .tabs>li>a{margin-left:0;-webkit-border-radius:0 4px 4px 0;-moz-border-radius:0 4px 4px 0;border-radius:0 4px 4px 0;}.tabbable.tabs-right .tabs>li>a:hover{border-left-color:#ddd;} -.tabbable.tabs-right .tabs .active>a,.tabbable.tabs-right .tabs .active>a:hover{border-color:#ddd;border-left-color:transparent;} +.tabbable{zoom:1;}.tabbable:before,.tabbable:after{display:table;*display:inline;content:"";zoom:1;} +.tabbable:after{clear:both;} +.tabs-below .tabs,.tabs-right .tabs,.tabs-left .tabs{border-bottom:0;} +.tabs-below .tabs{border-top:1px solid #ddd;} +.tabs-below .tabs>li{margin-top:-1px;margin-bottom:0;} +.tabs-below .tabs>li>a{-webkit-border-radius:0 0 4px 4px;-moz-border-radius:0 0 4px 4px;border-radius:0 0 4px 4px;}.tabs-below .tabs>li>a:hover{border-bottom-color:transparent;border-top-color:#ddd;} +.tabs-below .tabs .active>a,.tabs-below .tabs .active>a:hover{border-color:transparent #ddd #ddd #ddd;} +.tabs-left .tabs>li,.tabs-right .tabs>li{float:none;} +.tabs-left .tabs>li>a,.tabs-right .tabs>li>a{min-width:74px;margin-right:0;margin-bottom:3px;} +.tabs-left .tabs{float:left;margin-right:19px;border-right:1px solid #ddd;} +.tabs-left .tabs>li>a{margin-right:-1px;-webkit-border-radius:4px 0 0 4px;-moz-border-radius:4px 0 0 4px;border-radius:4px 0 0 4px;} +.tabs-left .tabs>li>a:hover{border-color:#eee #ddd #eee #eee;} +.tabs-left .tabs .active>a,.tabs-left .tabs .active>a:hover{border-color:#ddd transparent #ddd #ddd;} +.tabs-right .tabs{float:right;margin-left:19px;border-left:1px solid #ddd;} +.tabs-right .tabs>li>a{margin-left:-1px;-webkit-border-radius:0 4px 4px 0;-moz-border-radius:0 4px 4px 0;border-radius:0 4px 4px 0;} +.tabs-right .tabs>li>a:hover{border-color:#eee #eee #eee #ddd;} +.tabs-right .tabs .active>a,.tabs-right .tabs .active>a:hover{border-color:#ddd #ddd #ddd transparent;} .tab-content>.tab-pane,.pill-content>.pill-pane{display:none;} .tab-content>.active,.pill-content>.active{display:block;} .breadcrumb{padding:7px 14px;margin:0 0 18px;background-color:#f5f5f5;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);background-repeat:repeat-x;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;} diff --git a/docs/components.html b/docs/components.html index e0ce812976..6fca1268f7 100644 --- a/docs/components.html +++ b/docs/components.html @@ -258,7 +258,7 @@ </div> - <h2>Tabbable tabs</h2> + <h2>Tabbable nav <small>Bring tabs to life via javascript</small></h2> <div class="row"> <div class="span4"> <h3>What's included</h3> @@ -270,116 +270,128 @@ <li>left</li> </ul> <p>Changing between them is easy and only requires changing very little markup.</p> + <hr> + <h3>Custom jQuery plugin</h3> + <p>All tabbable tabs are powered by our lightweight jQuery plugin. Read more about how to bring tabbable tabs to life on the javascript docs page.</p> + <p><a class="btn" href="./javascript.html/#tabs">Get the javascript →</a></p> </div> - <div class="span4"> - </div> - <div class="span4"> - </div> - </div> - - - - - - - - <h3>Tabbable tabs</h3> - <p>As mentioned above, you can bring your tabs to life with a simple plugin. Here we have integrated all four variations of the tabs—default (top), right, bottom, left—with example tab areas.</p> - + <div class="span8"> + <h3>Tabbable example</h3> + <p>To make tabs tabbable, wrap the <code>.tabs</code> in another div with class <code>.tabbable</code>.</p> <div class="tabbable"> - <ul class="tabs"> + <ul class="nav tabs"> <li class="active"><a href="#1" data-toggle="tab">Section 1</a></li> <li><a href="#2" data-toggle="tab">Section 2</a></li> <li><a href="#3" data-toggle="tab">Section 3</a></li> - <li><a href="#4" data-toggle="tab">Section 4</a></li> </ul> <div class="tab-content"> <div class="tab-pane active" id="1"> - <p>Oh hai #1!</p> + <p>I'm in Section 1.</p> </div> <div class="tab-pane" id="2"> - <p>Oh hai #2!</p> + <p>Howdy, I'm in Section 2.</p> </div> <div class="tab-pane" id="3"> - <p>Oh hai #3!</p> - </div> - <div class="tab-pane" id="4"> - <p>Oh hai #4!</p> + <p>What up girl, this is Section 3.</p> </div> </div> - </div> + </div> <!-- /tabbable --> + <hr> + <h3>Straightforward markup</h3> + <p>Using tabbable tabs requires a wrapping div, a set of tabs, and a set of tabbable panes of content.</p> +<pre class="prettyprint linenums"> +<div class="tabbable"> + <ul class="nav tabs"> + <li class="active"><a href="#1" data-toggle="tab">Section 1</a></li> + <li><a href="#2" data-toggle="tab">Section 2</a></li> + </ul> + <div class="tab-content"> + <div class="tab-pane active" id="1"> + <p>I'm in Section 1.</p> + </div> + <div class="tab-pane" id="2"> + <p>Howdy, I'm in Section 2.</p> + </div> + </div> +</div> +</pre> + </div> + </div> - <div class="row"> - <div class="span4"> - <div class="tabbable tabs-left"> - <ul class="tabs"> - <li class="active"><a href="#5" data-toggle="tab">Section 1</a></li> - <li><a href="#6" data-toggle="tab">Section 2</a></li> - <li><a href="#7" data-toggle="tab">Section 3</a></li> - </ul> - <div class="tab-content" id="myTabContent2"> - <div class="tab-pane active" id="5"> - <h4>Section 1</h4> - <p>Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Maecenas sed diam eget risus varius blandit sit amet non magna. Vestibulum id ligula porta felis euismod semper.</p> - </div> - <div class="tab-pane" id="6"> - <h4>Section 2</h4> - <p>Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Maecenas sed diam eget risus varius blandit sit amet non magna. Vestibulum id ligula porta felis euismod semper.</p> - </div> - <div class="tab-pane" id="7"> - <h4>Section 3</h4> - <p>Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Maecenas sed diam eget risus varius blandit sit amet non magna. Vestibulum id ligula porta felis euismod semper.</p> - </div> - </div> + <h3>Tabbable in any direction</h3> + <div class="row"> +<!-- + <div class="span4"> + <p>Swap the order of your HTML—placing <code>.tabs</code> after <code>.tab-content</code>—for tabs on the bottom.</p> + </div> +--> + <div class="span4"> + <h4>Tabs on the bottom</h4> + <p>Flip the order of the HTML and add a class to put tabs on the bottom.</p> + <div class="tabbable tabs-below"> + <div class="tab-content"> + <div class="tab-pane active" id="A"> + <p>I'm in Section A.</p> </div> - </div> - <div class="span4 offset1"> - <div class="tabbable tabs-right"> - <ul class="tabs"> - <li class="active"><a href="#8" data-toggle="tab">Section 1</a></li> - <li><a href="#9" data-toggle="tab">Section 2</a></li> - <li><a href="#10" data-toggle="tab">Section 3</a></li> - </ul> - <div class="tab-content" id="myTabContent3"> - <div class="tab-pane active" id="8"> - <h4>Section 1</h4> - <p>Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Maecenas sed diam eget risus varius blandit sit amet non magna. Vestibulum id ligula porta felis euismod semper.</p> - </div> - <div class="tab-pane" id="9"> - <h4>Section 2</h4> - <p>Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Maecenas sed diam eget risus varius blandit sit amet non magna. Vestibulum id ligula porta felis euismod semper.</p> - </div> - <div class="tab-pane" id="10"> - <h4>Section 3</h4> - <p>Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Maecenas sed diam eget risus varius blandit sit amet non magna. Vestibulum id ligula porta felis euismod semper.</p> - </div> - </div> + <div class="tab-pane" id="B"> + <p>Howdy, I'm in Section B.</p> + </div> + <div class="tab-pane" id="C"> + <p>What up girl, this is Section C.</p> </div> </div> - </div> - - <div class="tabbable tabs-bottom"> + <ul class="nav tabs"> + <li class="active"><a href="#A" data-toggle="tab">Section 1</a></li> + <li><a href="#B" data-toggle="tab">Section 2</a></li> + <li><a href="#C" data-toggle="tab">Section 3</a></li> + </ul> + </div> <!-- /tabbable --> + </div> + <div class="span4"> + <h4>Tabs on the left</h4> + <p>Swap the class to put tabs on the left.</p> + <div class="tabbable tabs-left"> + <ul class="nav tabs"> + <li class="active"><a href="#lA" data-toggle="tab">Section 1</a></li> + <li><a href="#lB" data-toggle="tab">Section 2</a></li> + <li><a href="#lC" data-toggle="tab">Section 3</a></li> + </ul> <div class="tab-content"> - <div class="tab-pane active" id="11"> - <p>Oh hai #1!</p> - </div> - <div class="tab-pane" id="12"> - <p>Oh hai #2!</p> + <div class="tab-pane active" id="lA"> + <p>I'm in Section A.</p> </div> - <div class="tab-pane" id="13"> - <p>Oh hai #3!</p> + <div class="tab-pane" id="lB"> + <p>Howdy, I'm in Section B.</p> </div> - <div class="tab-pane" id="14"> - <p>Oh hai #4!</p> + <div class="tab-pane" id="lC"> + <p>What up girl, this is Section C.</p> </div> </div> - <ul class="tabs"> - <li class="active"><a href="#11" data-toggle="tab">Section 1</a></li> - <li><a href="#12" data-toggle="tab">Section 2</a></li> - <li><a href="#13" data-toggle="tab">Section 3</a></li> - <li><a href="#14" data-toggle="tab">Section 4</a></li> + </div> <!-- /tabbable --> + </div> + <div class="span4"> + <h4>Tabs on the right</h4> + <p>Swap the class to put tabs on the right.</p> + <div class="tabbable tabs-right"> + <ul class="nav tabs"> + <li class="active"><a href="#rA" data-toggle="tab">Section 1</a></li> + <li><a href="#rB" data-toggle="tab">Section 2</a></li> + <li><a href="#rC" data-toggle="tab">Section 3</a></li> </ul> - </div> + <div class="tab-content"> + <div class="tab-pane active" id="rA"> + <p>I'm in Section A.</p> + </div> + <div class="tab-pane" id="rB"> + <p>Howdy, I'm in Section B.</p> + </div> + <div class="tab-pane" id="rC"> + <p>What up girl, this is Section C.</p> + </div> + </div> + </div> <!-- /tabbable --> + </div> + </div> </section> diff --git a/lib/navs.less b/lib/navs.less index 0d31cf3bcf..f76f1acad0 100644 --- a/lib/navs.less +++ b/lib/navs.less @@ -203,36 +203,97 @@ // TABBABLE // -------- -/* + +// COMMON STYLES +// ------------- + +// Clear any floats .tabbable { - margin-bottom: @baseLineHeight; + .clearfix(); +} +// Remove border on bottom, left, right +.tabs-below .tabs, +.tabs-right .tabs, +.tabs-left .tabs { + border-bottom: 0; +} - // Tabs on top - .tabs { - margin-bottom: 0; - border-bottom: 0; - } - .tab-content { - padding: 19px; - border: 1px solid #ddd; - } +// BOTTOM +// ------ - // Tabs on bottom - &.tabs-bottom .tabs > li { - margin-top: -1px; - margin-bottom: 0; - } - &.tabs-bottom .tabs > li > a { - .border-radius(0 0 4px 4px); - &:hover { - border-bottom-color: transparent; - border-top-color: #ddd; - } - } - &.tabs-bottom .tabs > .active > a, - &.tabs-bottom .tabs > .active > a:hover { - border-color: transparent #ddd #ddd #ddd; +.tabs-below .tabs { + border-top: 1px solid #ddd; +} +.tabs-below .tabs > li { + margin-top: -1px; + margin-bottom: 0; +} +.tabs-below .tabs > li > a { + .border-radius(0 0 4px 4px); + &:hover { + border-bottom-color: transparent; + border-top-color: #ddd; } +} +.tabs-below .tabs .active > a, +.tabs-below .tabs .active > a:hover { + border-color: transparent #ddd #ddd #ddd; +} + +// LEFT & RIGHT +// ------------ + +// Common styles +.tabs-left .tabs > li, +.tabs-right .tabs > li { + float: none; +} +.tabs-left .tabs > li > a, +.tabs-right .tabs > li > a { + min-width: 74px; + margin-right: 0; + margin-bottom: 3px; +} + +// Tabs on the left +.tabs-left .tabs { + float: left; + margin-right: 19px; + border-right: 1px solid #ddd; +} +.tabs-left .tabs > li > a { + margin-right: -1px; + .border-radius(4px 0 0 4px); +} +.tabs-left .tabs > li > a:hover { + border-color: #eee #ddd #eee #eee; +} +.tabs-left .tabs .active > a, +.tabs-left .tabs .active > a:hover { + border-color: #ddd transparent #ddd #ddd; +} + +// Tabs on the right +.tabs-right .tabs { + float: right; + margin-left: 19px; + border-left: 1px solid #ddd; +} +.tabs-right .tabs > li > a { + margin-left: -1px; + .border-radius(0 4px 4px 0); +} +.tabs-right .tabs > li > a:hover { + border-color: #eee #eee #eee #ddd; +} +.tabs-right .tabs .active > a, +.tabs-right .tabs .active > a:hover { + border-color: #ddd #ddd #ddd transparent; +} + + +/* +.tabbable { // Tabs on left and right &.tabs-left, -- GitLab From 961c479422f10cb566ade1f3a08d1b807d590b7a Mon Sep 17 00:00:00 2001 From: Mark Otto <markdotto@gmail.com> Date: Sat, 7 Jan 2012 22:07:18 -0800 Subject: [PATCH 224/318] remove unused css and reorder the toggle classes --- lib/navs.less | 109 ++++++-------------------------------------------- 1 file changed, 12 insertions(+), 97 deletions(-) diff --git a/lib/navs.less b/lib/navs.less index f76f1acad0..743d772f37 100644 --- a/lib/navs.less +++ b/lib/navs.less @@ -211,6 +211,7 @@ .tabbable { .clearfix(); } + // Remove border on bottom, left, right .tabs-below .tabs, .tabs-right .tabs, @@ -218,6 +219,17 @@ border-bottom: 0; } +// Show/hide tabbable areas +.tab-content > .tab-pane, +.pill-content > .pill-pane { + display: none; +} +.tab-content > .active, +.pill-content > .active { + display: block; +} + + // BOTTOM // ------ @@ -290,100 +302,3 @@ .tabs-right .tabs .active > a:hover { border-color: #ddd #ddd #ddd transparent; } - - -/* -.tabbable { - - // Tabs on left and right - &.tabs-left, - &.tabs-right { - .clearfix(); - .tabs { - // Give a fixed width to avoid floating .tab-con - width: 100px; - // Unfloat them so they stack - > li { - float: none; - margin-bottom: -1px; - > a { - margin-bottom: 2px; - &:hover { - border-color: transparent; - } - } - } - } - } - - // Tabs on left - &.tabs-left { - .tab-content { - margin-left: 100px; - } - .tabs { - float: left; - > li { - margin-right: -1px; - > a { - margin-right: 0; - .border-radius(4px 0 0 4px); - - &:hover { - border-right-color: #ddd; - } - } - } - // Active state - .active > a, - .active > a:hover { - border-color: #ddd; - border-right-color: transparent; - } - } - } - - // Tabs on right - &.tabs-right { - .tab-content { - margin-right: 100px; - } - .tabs { - float: right; - > li { - margin-left: -1px; - > a { - margin-left: 0; - .border-radius(0 4px 4px 0); - - &:hover { - border-left-color: #ddd; - } - } - } - // Active state - .active > a, - .active > a:hover { - border-color: #ddd; - border-left-color: transparent; - } - } - } -} -*/ - - - - - - -// Tabbable areas -.tab-content > .tab-pane, -.pill-content > .pill-pane { - display: none; -} -.tab-content > .active, -.pill-content > .active { - display: block; -} - -- GitLab From d170224457581b6ab7305b29b4e2a15cb50ab853 Mon Sep 17 00:00:00 2001 From: Mark Otto <markdotto@gmail.com> Date: Sat, 7 Jan 2012 23:21:40 -0800 Subject: [PATCH 225/318] fix progress bars by removing border and negative margins --- bootstrap.css | 108 ++++------------------------------------- bootstrap.min.css | 8 +-- docs/components.html | 30 ++++++++++++ lib/progress-bars.less | 6 +-- 4 files changed, 45 insertions(+), 107 deletions(-) diff --git a/bootstrap.css b/bootstrap.css index ebb3cbe294..6417871fbc 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: Sat Jan 7 22:06:30 PST 2012 + * Date: Sat Jan 7 23:21:05 PST 2012 */ html, body { margin: 0; @@ -1962,6 +1962,12 @@ i { .tabs-below .tabs, .tabs-right .tabs, .tabs-left .tabs { border-bottom: 0; } +.tab-content > .tab-pane, .pill-content > .pill-pane { + display: none; +} +.tab-content > .active, .pill-content > .active { + display: block; +} .tabs-below .tabs { border-top: 1px solid #ddd; } @@ -2023,91 +2029,6 @@ i { .tabs-right .tabs .active > a, .tabs-right .tabs .active > a:hover { border-color: #ddd #ddd #ddd transparent; } -/* -.tabbable { - - // Tabs on left and right - &.tabs-left, - &.tabs-right { - .clearfix(); - .tabs { - // Give a fixed width to avoid floating .tab-con - width: 100px; - // Unfloat them so they stack - > li { - float: none; - margin-bottom: -1px; - > a { - margin-bottom: 2px; - &:hover { - border-color: transparent; - } - } - } - } - } - - // Tabs on left - &.tabs-left { - .tab-content { - margin-left: 100px; - } - .tabs { - float: left; - > li { - margin-right: -1px; - > a { - margin-right: 0; - .border-radius(4px 0 0 4px); - - &:hover { - border-right-color: #ddd; - } - } - } - // Active state - .active > a, - .active > a:hover { - border-color: #ddd; - border-right-color: transparent; - } - } - } - - // Tabs on right - &.tabs-right { - .tab-content { - margin-right: 100px; - } - .tabs { - float: right; - > li { - margin-left: -1px; - > a { - margin-left: 0; - .border-radius(0 4px 4px 0); - - &:hover { - border-left-color: #ddd; - } - } - } - // Active state - .active > a, - .active > a:hover { - border-color: #ddd; - border-left-color: transparent; - } - } - } -} -*/ -.tab-content > .tab-pane, .pill-content > .pill-pane { - display: none; -} -.tab-content > .active, .pill-content > .active { - display: block; -} .breadcrumb { padding: 7px 14px; margin: 0 0 18px; @@ -2963,25 +2884,14 @@ a.thumbnail:hover { background-image: linear-gradient(top, #f5f5f5, #f9f9f9); background-repeat: repeat-x; filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#f5f5f5', endColorstr='#f9f9f9', GradientType=0); - border: 1px solid #ddd; -webkit-box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1); -moz-box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1); box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1); } .progress .bar { width: 0%; - height: 20px; - margin: -1px; - background-color: #57a957; - background-image: -khtml-gradient(linear, left top, left bottom, from(#62c462), to(#57a957)); - background-image: -moz-linear-gradient(top, #62c462, #57a957); - background-image: -ms-linear-gradient(top, #62c462, #57a957); - background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #62c462), color-stop(100%, #57a957)); - background-image: -webkit-linear-gradient(top, #62c462, #57a957); - background-image: -o-linear-gradient(top, #62c462, #57a957); - background-image: linear-gradient(top, #62c462, #57a957); - background-repeat: repeat-x; - filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#62c462', endColorstr='#57a957', GradientType=0); + height: 18px; + margin: ; background-color: #0480be; background-image: -khtml-gradient(linear, left top, left bottom, from(#149bdf), to(#0480be)); background-image: -moz-linear-gradient(top, #149bdf, #0480be); diff --git a/bootstrap.min.css b/bootstrap.min.css index 868cfcb659..db1393fb43 100644 --- a/bootstrap.min.css +++ b/bootstrap.min.css @@ -374,6 +374,8 @@ i{background-image:url(docs/assets/img/glyphicons-halflings-sprite.png);backgrou .tabbable{zoom:1;}.tabbable:before,.tabbable:after{display:table;*display:inline;content:"";zoom:1;} .tabbable:after{clear:both;} .tabs-below .tabs,.tabs-right .tabs,.tabs-left .tabs{border-bottom:0;} +.tab-content>.tab-pane,.pill-content>.pill-pane{display:none;} +.tab-content>.active,.pill-content>.active{display:block;} .tabs-below .tabs{border-top:1px solid #ddd;} .tabs-below .tabs>li{margin-top:-1px;margin-bottom:0;} .tabs-below .tabs>li>a{-webkit-border-radius:0 0 4px 4px;-moz-border-radius:0 0 4px 4px;border-radius:0 0 4px 4px;}.tabs-below .tabs>li>a:hover{border-bottom-color:transparent;border-top-color:#ddd;} @@ -388,8 +390,6 @@ i{background-image:url(docs/assets/img/glyphicons-halflings-sprite.png);backgrou .tabs-right .tabs>li>a{margin-left:-1px;-webkit-border-radius:0 4px 4px 0;-moz-border-radius:0 4px 4px 0;border-radius:0 4px 4px 0;} .tabs-right .tabs>li>a:hover{border-color:#eee #eee #eee #ddd;} .tabs-right .tabs .active>a,.tabs-right .tabs .active>a:hover{border-color:#ddd #ddd #ddd transparent;} -.tab-content>.tab-pane,.pill-content>.pill-pane{display:none;} -.tab-content>.active,.pill-content>.active{display:block;} .breadcrumb{padding:7px 14px;margin:0 0 18px;background-color:#f5f5f5;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);background-repeat:repeat-x;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:#999999;} .breadcrumb .active a{color:#333333;} @@ -498,8 +498,8 @@ a.thumbnail:hover{border-color:#0088cc;-webkit-box-shadow:0 1px 4px rgba(0, 105, .label.success{background-color:#46a546;} .label.notice{background-color:#62cffc;} @-webkit-keyframes progress-bar-stripes{from{background-position:0 0;} to{background-position:40px 0;}}@keyframes progress-bar-stripes{from{background-position:0 0;} to{background-position:40px 0;}}.progress,.progress .bar{-webkit-border-radius:4px;-moz-border-radius:4px;border-radius:4px;} -.progress{height:18px;margin-bottom:18px;background-color:#f9f9f9;background-image:-khtml-gradient(linear, left top, left bottom, from(#f5f5f5), to(#f9f9f9));background-image:-moz-linear-gradient(top, #f5f5f5, #f9f9f9);background-image:-ms-linear-gradient(top, #f5f5f5, #f9f9f9);background-image:-webkit-gradient(linear, left top, left bottom, color-stop(0%, #f5f5f5), color-stop(100%, #f9f9f9));background-image:-webkit-linear-gradient(top, #f5f5f5, #f9f9f9);background-image:-o-linear-gradient(top, #f5f5f5, #f9f9f9);background-image:linear-gradient(top, #f5f5f5, #f9f9f9);background-repeat:repeat-x;filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#f5f5f5', endColorstr='#f9f9f9', GradientType=0);border:1px solid #ddd;-webkit-box-shadow:inset 0 1px 2px rgba(0, 0, 0, 0.1);-moz-box-shadow:inset 0 1px 2px rgba(0, 0, 0, 0.1);box-shadow:inset 0 1px 2px rgba(0, 0, 0, 0.1);} -.progress .bar{width:0%;height:20px;margin:-1px;background-color:#57a957;background-image:-khtml-gradient(linear, left top, left bottom, from(#62c462), to(#57a957));background-image:-moz-linear-gradient(top, #62c462, #57a957);background-image:-ms-linear-gradient(top, #62c462, #57a957);background-image:-webkit-gradient(linear, left top, left bottom, color-stop(0%, #62c462), color-stop(100%, #57a957));background-image:-webkit-linear-gradient(top, #62c462, #57a957);background-image:-o-linear-gradient(top, #62c462, #57a957);background-image:linear-gradient(top, #62c462, #57a957);background-repeat:repeat-x;filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#62c462', endColorstr='#57a957', GradientType=0);background-color:#0480be;background-image:-khtml-gradient(linear, left top, left bottom, from(#149bdf), to(#0480be));background-image:-moz-linear-gradient(top, #149bdf, #0480be);background-image:-ms-linear-gradient(top, #149bdf, #0480be);background-image:-webkit-gradient(linear, left top, left bottom, color-stop(0%, #149bdf), color-stop(100%, #0480be));background-image:-webkit-linear-gradient(top, #149bdf, #0480be);background-image:-o-linear-gradient(top, #149bdf, #0480be);background-image:linear-gradient(top, #149bdf, #0480be);background-repeat:repeat-x;filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#149bdf', endColorstr='#0480be', GradientType=0);-webkit-box-shadow:inset 0 -1px 0 rgba(0, 0, 0, 0.15);-moz-box-shadow:inset 0 -1px 0 rgba(0, 0, 0, 0.15);box-shadow:inset 0 -1px 0 rgba(0, 0, 0, 0.15);-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;-webkit-transition:width 0.6s ease;-moz-transition:width 0.6s ease;-ms-transition:width 0.6s ease;-o-transition:width 0.6s ease;transition:width 0.6s ease;} +.progress{height:18px;margin-bottom:18px;background-color:#f9f9f9;background-image:-khtml-gradient(linear, left top, left bottom, from(#f5f5f5), to(#f9f9f9));background-image:-moz-linear-gradient(top, #f5f5f5, #f9f9f9);background-image:-ms-linear-gradient(top, #f5f5f5, #f9f9f9);background-image:-webkit-gradient(linear, left top, left bottom, color-stop(0%, #f5f5f5), color-stop(100%, #f9f9f9));background-image:-webkit-linear-gradient(top, #f5f5f5, #f9f9f9);background-image:-o-linear-gradient(top, #f5f5f5, #f9f9f9);background-image:linear-gradient(top, #f5f5f5, #f9f9f9);background-repeat:repeat-x;filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#f5f5f5', endColorstr='#f9f9f9', GradientType=0);-webkit-box-shadow:inset 0 1px 2px rgba(0, 0, 0, 0.1);-moz-box-shadow:inset 0 1px 2px rgba(0, 0, 0, 0.1);box-shadow:inset 0 1px 2px rgba(0, 0, 0, 0.1);} +.progress .bar{width:0%;height:18px;margin:;background-color:#0480be;background-image:-khtml-gradient(linear, left top, left bottom, from(#149bdf), to(#0480be));background-image:-moz-linear-gradient(top, #149bdf, #0480be);background-image:-ms-linear-gradient(top, #149bdf, #0480be);background-image:-webkit-gradient(linear, left top, left bottom, color-stop(0%, #149bdf), color-stop(100%, #0480be));background-image:-webkit-linear-gradient(top, #149bdf, #0480be);background-image:-o-linear-gradient(top, #149bdf, #0480be);background-image:linear-gradient(top, #149bdf, #0480be);background-repeat:repeat-x;filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#149bdf', endColorstr='#0480be', GradientType=0);-webkit-box-shadow:inset 0 -1px 0 rgba(0, 0, 0, 0.15);-moz-box-shadow:inset 0 -1px 0 rgba(0, 0, 0, 0.15);box-shadow:inset 0 -1px 0 rgba(0, 0, 0, 0.15);-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;-webkit-transition:width 0.6s ease;-moz-transition:width 0.6s ease;-ms-transition:width 0.6s ease;-o-transition:width 0.6s ease;transition:width 0.6s ease;} .progress.striped .bar{background-color:#62c462;background-image:-webkit-gradient(linear, 0 100%, 100% 0, color-stop(0.25, rgba(255, 255, 255, 0.15)), color-stop(0.25, transparent), color-stop(0.5, transparent), color-stop(0.5, rgba(255, 255, 255, 0.15)), color-stop(0.75, rgba(255, 255, 255, 0.15)), color-stop(0.75, transparent), to(transparent));background-image:-webkit-linear-gradient(-45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);background-image:-moz-linear-gradient(-45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);background-image:-ms-linear-gradient(-45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);background-image:-o-linear-gradient(-45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);background-image:linear-gradient(-45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);-webkit-background-size:40px 40px;-moz-background-size:40px 40px;-o-background-size:40px 40px;background-size:40px 40px;} .progress.active .bar{-webkit-animation:progress-bar-stripes 2s linear infinite;-moz-animation:progress-bar-stripes 2s linear infinite;animation:progress-bar-stripes 2s linear infinite;} .progress.danger .bar{background-color:#c43c35;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);background-repeat:repeat-x;filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ee5f5b', endColorstr='#c43c35', GradientType=0);} diff --git a/docs/components.html b/docs/components.html index 6fca1268f7..bd8753401a 100644 --- a/docs/components.html +++ b/docs/components.html @@ -346,6 +346,16 @@ <li><a href="#C" data-toggle="tab">Section 3</a></li> </ul> </div> <!-- /tabbable --> +<pre class="prettyprint linenums" style="margin-top: 11px;"> +<div class="tabbable tabs-bottom"> + <ul class="nav tabs"> + ... + </ul> + <div class="tab-content"> + ... + </div> +</div> +</pre> </div> <div class="span4"> <h4>Tabs on the left</h4> @@ -368,6 +378,16 @@ </div> </div> </div> <!-- /tabbable --> +<pre class="prettyprint linenums"> +<div class="tabbable tabs-left"> + <ul class="nav tabs"> + ... + </ul> + <div class="tab-content"> + ... + </div> +</div> +</pre> </div> <div class="span4"> <h4>Tabs on the right</h4> @@ -390,6 +410,16 @@ </div> </div> </div> <!-- /tabbable --> +<pre class="prettyprint linenums"> +<div class="tabbable tabs-right"> + <ul class="nav tabs"> + ... + </ul> + <div class="tab-content"> + ... + </div> +</div> +</pre> </div> </div> diff --git a/lib/progress-bars.less b/lib/progress-bars.less index 28c56d131c..f5a8398340 100644 --- a/lib/progress-bars.less +++ b/lib/progress-bars.less @@ -39,16 +39,14 @@ height: 18px; margin-bottom: 18px; #gradient > .vertical(#f5f5f5, #f9f9f9); - border: 1px solid #ddd; .box-shadow(inset 0 1px 2px rgba(0,0,0,.1)); } // Bar of progress .progress .bar { width: 0%; - height: 20px; - margin: -1px; - #gradient > .vertical(#62c462, #57a957); + height: 18px; + margin: ; #gradient > .vertical(#149bdf, #0480be); .box-shadow(inset 0 -1px 0 rgba(0,0,0,.15)); .box-sizing(border-box); -- GitLab From 3c2f82f469be4792e85eb73fd1e3b882dcadd48d Mon Sep 17 00:00:00 2001 From: Mark Otto <markdotto@gmail.com> Date: Sat, 7 Jan 2012 23:31:00 -0800 Subject: [PATCH 226/318] recomment out the moz stuff for progress bars since less can't compile it right now --- bootstrap.css | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/bootstrap.css b/bootstrap.css index 6417871fbc..2881afefde 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: Sat Jan 7 23:21:05 PST 2012 + * Date: Sat Jan 7 23:30:30 PST 2012 */ html, body { margin: 0; -- GitLab From 4478df768168fe41599508688046612bf5f1e526 Mon Sep 17 00:00:00 2001 From: Jacob Thornton <jacobthornton@gmail.com> Date: Sun, 8 Jan 2012 00:49:38 -0800 Subject: [PATCH 227/318] first pass at ultra basic autocomplete --- bootstrap.css | 243 +-------------------------- bootstrap.min.css | 20 +-- docs/javascript.html | 95 ++++++----- js/bootstrap-typeahead.js | 147 ++++++++++------ js/tests/unit/bootstrap-typeahead.js | 22 ++- lib/dropdowns.less | 21 +-- 6 files changed, 189 insertions(+), 359 deletions(-) diff --git a/bootstrap.css b/bootstrap.css index ebb3cbe294..7d6263c6bd 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: Sat Jan 7 22:06:30 PST 2012 + * Date: Sat Jan 7 23:50:13 PST 2012 */ html, body { margin: 0; @@ -1489,7 +1489,7 @@ i { line-height: 18px; color: #555555; } -.dropdown-menu a:hover { +.dropdown-menu.typeahead .active a, .dropdown-menu a:hover { color: #fff; text-decoration: none; text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25); @@ -1962,6 +1962,12 @@ i { .tabs-below .tabs, .tabs-right .tabs, .tabs-left .tabs { border-bottom: 0; } +.tab-content > .tab-pane, .pill-content > .pill-pane { + display: none; +} +.tab-content > .active, .pill-content > .active { + display: block; +} .tabs-below .tabs { border-top: 1px solid #ddd; } @@ -2023,91 +2029,6 @@ i { .tabs-right .tabs .active > a, .tabs-right .tabs .active > a:hover { border-color: #ddd #ddd #ddd transparent; } -/* -.tabbable { - - // Tabs on left and right - &.tabs-left, - &.tabs-right { - .clearfix(); - .tabs { - // Give a fixed width to avoid floating .tab-con - width: 100px; - // Unfloat them so they stack - > li { - float: none; - margin-bottom: -1px; - > a { - margin-bottom: 2px; - &:hover { - border-color: transparent; - } - } - } - } - } - - // Tabs on left - &.tabs-left { - .tab-content { - margin-left: 100px; - } - .tabs { - float: left; - > li { - margin-right: -1px; - > a { - margin-right: 0; - .border-radius(4px 0 0 4px); - - &:hover { - border-right-color: #ddd; - } - } - } - // Active state - .active > a, - .active > a:hover { - border-color: #ddd; - border-right-color: transparent; - } - } - } - - // Tabs on right - &.tabs-right { - .tab-content { - margin-right: 100px; - } - .tabs { - float: right; - > li { - margin-left: -1px; - > a { - margin-left: 0; - .border-radius(0 4px 4px 0); - - &:hover { - border-left-color: #ddd; - } - } - } - // Active state - .active > a, - .active > a:hover { - border-color: #ddd; - border-left-color: transparent; - } - } - } -} -*/ -.tab-content > .tab-pane, .pill-content > .pill-pane { - display: none; -} -.tab-content > .active, .pill-content > .active { - display: block; -} .breadcrumb { padding: 7px 14px; margin: 0 0 18px; @@ -2937,154 +2858,6 @@ a.thumbnail:hover { background-position: 40px 0; } } -@keyframes progress-bar-stripes { - from { - background-position: 0 0; - } - to { - background-position: 40px 0; - } -} -.progress, .progress .bar { - -webkit-border-radius: 4px; - -moz-border-radius: 4px; - border-radius: 4px; -} -.progress { - height: 18px; - margin-bottom: 18px; - background-color: #f9f9f9; - background-image: -khtml-gradient(linear, left top, left bottom, from(#f5f5f5), to(#f9f9f9)); - background-image: -moz-linear-gradient(top, #f5f5f5, #f9f9f9); - background-image: -ms-linear-gradient(top, #f5f5f5, #f9f9f9); - background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #f5f5f5), color-stop(100%, #f9f9f9)); - background-image: -webkit-linear-gradient(top, #f5f5f5, #f9f9f9); - background-image: -o-linear-gradient(top, #f5f5f5, #f9f9f9); - background-image: linear-gradient(top, #f5f5f5, #f9f9f9); - background-repeat: repeat-x; - filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#f5f5f5', endColorstr='#f9f9f9', GradientType=0); - border: 1px solid #ddd; - -webkit-box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1); - -moz-box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1); - box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1); -} -.progress .bar { - width: 0%; - height: 20px; - margin: -1px; - background-color: #57a957; - background-image: -khtml-gradient(linear, left top, left bottom, from(#62c462), to(#57a957)); - background-image: -moz-linear-gradient(top, #62c462, #57a957); - background-image: -ms-linear-gradient(top, #62c462, #57a957); - background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #62c462), color-stop(100%, #57a957)); - background-image: -webkit-linear-gradient(top, #62c462, #57a957); - background-image: -o-linear-gradient(top, #62c462, #57a957); - background-image: linear-gradient(top, #62c462, #57a957); - background-repeat: repeat-x; - filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#62c462', endColorstr='#57a957', GradientType=0); - background-color: #0480be; - background-image: -khtml-gradient(linear, left top, left bottom, from(#149bdf), to(#0480be)); - background-image: -moz-linear-gradient(top, #149bdf, #0480be); - background-image: -ms-linear-gradient(top, #149bdf, #0480be); - background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #149bdf), color-stop(100%, #0480be)); - background-image: -webkit-linear-gradient(top, #149bdf, #0480be); - background-image: -o-linear-gradient(top, #149bdf, #0480be); - background-image: linear-gradient(top, #149bdf, #0480be); - background-repeat: repeat-x; - filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#149bdf', endColorstr='#0480be', GradientType=0); - -webkit-box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.15); - -moz-box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.15); - box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.15); - -webkit-box-sizing: border-box; - -moz-box-sizing: border-box; - box-sizing: border-box; - -webkit-transition: width 0.6s ease; - -moz-transition: width 0.6s ease; - -ms-transition: width 0.6s ease; - -o-transition: width 0.6s ease; - transition: width 0.6s ease; -} -.progress.striped .bar { - background-color: #62c462; - background-image: -webkit-gradient(linear, 0 100%, 100% 0, color-stop(0.25, rgba(255, 255, 255, 0.15)), color-stop(0.25, transparent), color-stop(0.5, transparent), color-stop(0.5, rgba(255, 255, 255, 0.15)), color-stop(0.75, rgba(255, 255, 255, 0.15)), color-stop(0.75, transparent), to(transparent)); - background-image: -webkit-linear-gradient(-45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent); - background-image: -moz-linear-gradient(-45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent); - background-image: -ms-linear-gradient(-45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent); - background-image: -o-linear-gradient(-45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent); - background-image: linear-gradient(-45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent); - -webkit-background-size: 40px 40px; - -moz-background-size: 40px 40px; - -o-background-size: 40px 40px; - background-size: 40px 40px; -} -.progress.active .bar { - -webkit-animation: progress-bar-stripes 2s linear infinite; - -moz-animation: progress-bar-stripes 2s linear infinite; - animation: progress-bar-stripes 2s linear infinite; -} -.progress.danger .bar { - background-color: #c43c35; - 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); - background-repeat: repeat-x; - filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ee5f5b', endColorstr='#c43c35', GradientType=0); -} -.progress.danger.striped .bar { - background-color: #ee5f5b; - background-image: -webkit-gradient(linear, 0 100%, 100% 0, color-stop(0.25, rgba(255, 255, 255, 0.15)), color-stop(0.25, transparent), color-stop(0.5, transparent), color-stop(0.5, rgba(255, 255, 255, 0.15)), color-stop(0.75, rgba(255, 255, 255, 0.15)), color-stop(0.75, transparent), to(transparent)); - background-image: -webkit-linear-gradient(-45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent); - background-image: -moz-linear-gradient(-45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent); - background-image: -ms-linear-gradient(-45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent); - background-image: -o-linear-gradient(-45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent); - background-image: linear-gradient(-45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent); -} -.progress.success .bar { - background-color: #57a957; - background-image: -khtml-gradient(linear, left top, left bottom, from(#62c462), to(#57a957)); - background-image: -moz-linear-gradient(top, #62c462, #57a957); - background-image: -ms-linear-gradient(top, #62c462, #57a957); - background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #62c462), color-stop(100%, #57a957)); - background-image: -webkit-linear-gradient(top, #62c462, #57a957); - background-image: -o-linear-gradient(top, #62c462, #57a957); - background-image: linear-gradient(top, #62c462, #57a957); - background-repeat: repeat-x; - filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#62c462', endColorstr='#57a957', GradientType=0); -} -.progress.success.striped .bar { - background-color: #62c462; - background-image: -webkit-gradient(linear, 0 100%, 100% 0, color-stop(0.25, rgba(255, 255, 255, 0.15)), color-stop(0.25, transparent), color-stop(0.5, transparent), color-stop(0.5, rgba(255, 255, 255, 0.15)), color-stop(0.75, rgba(255, 255, 255, 0.15)), color-stop(0.75, transparent), to(transparent)); - background-image: -webkit-linear-gradient(-45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent); - background-image: -moz-linear-gradient(-45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent); - background-image: -ms-linear-gradient(-45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent); - background-image: -o-linear-gradient(-45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent); - background-image: linear-gradient(-45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent); -} -.progress.info .bar { - background-color: #339bb9; - background-image: -khtml-gradient(linear, left top, left bottom, from(#5bc0de), to(#339bb9)); - background-image: -moz-linear-gradient(top, #5bc0de, #339bb9); - background-image: -ms-linear-gradient(top, #5bc0de, #339bb9); - background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #5bc0de), color-stop(100%, #339bb9)); - background-image: -webkit-linear-gradient(top, #5bc0de, #339bb9); - background-image: -o-linear-gradient(top, #5bc0de, #339bb9); - background-image: linear-gradient(top, #5bc0de, #339bb9); - background-repeat: repeat-x; - filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#5bc0de', endColorstr='#339bb9', GradientType=0); -} -.progress.info.striped .bar { - background-color: #5bc0de; - background-image: -webkit-gradient(linear, 0 100%, 100% 0, color-stop(0.25, rgba(255, 255, 255, 0.15)), color-stop(0.25, transparent), color-stop(0.5, transparent), color-stop(0.5, rgba(255, 255, 255, 0.15)), color-stop(0.75, rgba(255, 255, 255, 0.15)), color-stop(0.75, transparent), to(transparent)); - background-image: -webkit-linear-gradient(-45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent); - background-image: -moz-linear-gradient(-45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent); - background-image: -ms-linear-gradient(-45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent); - background-image: -o-linear-gradient(-45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent); - background-image: linear-gradient(-45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent); -} .hidden { display: none; visibility: hidden; diff --git a/bootstrap.min.css b/bootstrap.min.css index 868cfcb659..6ad22faca0 100644 --- a/bootstrap.min.css +++ b/bootstrap.min.css @@ -304,7 +304,8 @@ i{background-image:url(docs/assets/img/glyphicons-halflings-sprite.png);backgrou .dropdown .caret{margin-top:8px;margin-left:2px;} .dropdown:hover .caret,.open.dropdown .caret{filter:alpha(opacity=100);-moz-opacity:1;opacity:1;} .dropdown-menu{position:absolute;top:40px;z-index:1000;float:left;display:none;min-width:160px;max-width:220px;_width:160px;padding:5px 0;margin:0;list-style:none;background-color:#ffffff;border-color:#999;border-color:rgba(0, 0, 0, 0.1);border-style:solid;border-width:1px;-webkit-border-radius:0 0 5px 5px;-moz-border-radius:0 0 5px 5px;border-radius:0 0 5px 5px;-webkit-box-shadow:0 5px 10px rgba(0, 0, 0, 0.2);-moz-box-shadow:0 5px 10px rgba(0, 0, 0, 0.2);box-shadow:0 5px 10px rgba(0, 0, 0, 0.2);-webkit-background-clip:padding-box;-moz-background-clip:padding;background-clip:padding-box;zoom:1;}.dropdown-menu .divider{height:1px;margin:5px 1px;overflow:hidden;background-color:#e5e5e5;border-bottom:1px solid #ffffff;} -.dropdown-menu a{display:block;padding:2px 15px;clear:both;font-weight:normal;line-height:18px;color:#555555;}.dropdown-menu a:hover{color:#fff;text-decoration:none;text-shadow:0 -1px 0 rgba(0, 0, 0, 0.25);background-color:#0064cd;background-image:-khtml-gradient(linear, left top, left bottom, from(#049cdb), to(#0064cd));background-image:-moz-linear-gradient(top, #049cdb, #0064cd);background-image:-ms-linear-gradient(top, #049cdb, #0064cd);background-image:-webkit-gradient(linear, left top, left bottom, color-stop(0%, #049cdb), color-stop(100%, #0064cd));background-image:-webkit-linear-gradient(top, #049cdb, #0064cd);background-image:-o-linear-gradient(top, #049cdb, #0064cd);background-image:linear-gradient(top, #049cdb, #0064cd);background-repeat:repeat-x;filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#049cdb', endColorstr='#0064cd', GradientType=0);background-color:#0077b3;background-image:-khtml-gradient(linear, left top, left bottom, from(#0088cc), to(#0077b3));background-image:-moz-linear-gradient(top, #0088cc, #0077b3);background-image:-ms-linear-gradient(top, #0088cc, #0077b3);background-image:-webkit-gradient(linear, left top, left bottom, color-stop(0%, #0088cc), color-stop(100%, #0077b3));background-image:-webkit-linear-gradient(top, #0088cc, #0077b3);background-image:-o-linear-gradient(top, #0088cc, #0077b3);background-image:linear-gradient(top, #0088cc, #0077b3);background-repeat:repeat-x;filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#0088cc', endColorstr='#0077b3', GradientType=0);-webkit-box-shadow:inset 0 1px 0 rgba(0, 0, 0, 0.075),inset 0 -1px rgba(0, 0, 0, 0.075);-moz-box-shadow:inset 0 1px 0 rgba(0, 0, 0, 0.075),inset 0 -1px rgba(0, 0, 0, 0.075);box-shadow:inset 0 1px 0 rgba(0, 0, 0, 0.075),inset 0 -1px rgba(0, 0, 0, 0.075);} +.dropdown-menu a{display:block;padding:2px 15px;clear:both;font-weight:normal;line-height:18px;color:#555555;} +.dropdown-menu.typeahead .active a,.dropdown-menu a:hover{color:#fff;text-decoration:none;text-shadow:0 -1px 0 rgba(0, 0, 0, 0.25);background-color:#0064cd;background-image:-khtml-gradient(linear, left top, left bottom, from(#049cdb), to(#0064cd));background-image:-moz-linear-gradient(top, #049cdb, #0064cd);background-image:-ms-linear-gradient(top, #049cdb, #0064cd);background-image:-webkit-gradient(linear, left top, left bottom, color-stop(0%, #049cdb), color-stop(100%, #0064cd));background-image:-webkit-linear-gradient(top, #049cdb, #0064cd);background-image:-o-linear-gradient(top, #049cdb, #0064cd);background-image:linear-gradient(top, #049cdb, #0064cd);background-repeat:repeat-x;filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#049cdb', endColorstr='#0064cd', GradientType=0);background-color:#0077b3;background-image:-khtml-gradient(linear, left top, left bottom, from(#0088cc), to(#0077b3));background-image:-moz-linear-gradient(top, #0088cc, #0077b3);background-image:-ms-linear-gradient(top, #0088cc, #0077b3);background-image:-webkit-gradient(linear, left top, left bottom, color-stop(0%, #0088cc), color-stop(100%, #0077b3));background-image:-webkit-linear-gradient(top, #0088cc, #0077b3);background-image:-o-linear-gradient(top, #0088cc, #0077b3);background-image:linear-gradient(top, #0088cc, #0077b3);background-repeat:repeat-x;filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#0088cc', endColorstr='#0077b3', GradientType=0);-webkit-box-shadow:inset 0 1px 0 rgba(0, 0, 0, 0.075),inset 0 -1px rgba(0, 0, 0, 0.075);-moz-box-shadow:inset 0 1px 0 rgba(0, 0, 0, 0.075),inset 0 -1px rgba(0, 0, 0, 0.075);box-shadow:inset 0 1px 0 rgba(0, 0, 0, 0.075),inset 0 -1px rgba(0, 0, 0, 0.075);} .dropdown.open .dropdown-toggle{color:#ffffff;background:#ccc;background:rgba(0, 0, 0, 0.3);} .dropdown.open .dropdown-menu{display:block;} .well{min-height:20px;padding:19px;margin-bottom:20px;background-color:#f5f5f5;border:1px solid #eee;border:1px solid rgba(0, 0, 0, 0.05);-webkit-border-radius:4px;-moz-border-radius:4px;border-radius:4px;-webkit-box-shadow:inset 0 1px 1px rgba(0, 0, 0, 0.05);-moz-box-shadow:inset 0 1px 1px rgba(0, 0, 0, 0.05);box-shadow:inset 0 1px 1px rgba(0, 0, 0, 0.05);}.well blockquote{border-color:#ddd;border-color:rgba(0, 0, 0, 0.15);} @@ -374,6 +375,8 @@ i{background-image:url(docs/assets/img/glyphicons-halflings-sprite.png);backgrou .tabbable{zoom:1;}.tabbable:before,.tabbable:after{display:table;*display:inline;content:"";zoom:1;} .tabbable:after{clear:both;} .tabs-below .tabs,.tabs-right .tabs,.tabs-left .tabs{border-bottom:0;} +.tab-content>.tab-pane,.pill-content>.pill-pane{display:none;} +.tab-content>.active,.pill-content>.active{display:block;} .tabs-below .tabs{border-top:1px solid #ddd;} .tabs-below .tabs>li{margin-top:-1px;margin-bottom:0;} .tabs-below .tabs>li>a{-webkit-border-radius:0 0 4px 4px;-moz-border-radius:0 0 4px 4px;border-radius:0 0 4px 4px;}.tabs-below .tabs>li>a:hover{border-bottom-color:transparent;border-top-color:#ddd;} @@ -388,8 +391,6 @@ i{background-image:url(docs/assets/img/glyphicons-halflings-sprite.png);backgrou .tabs-right .tabs>li>a{margin-left:-1px;-webkit-border-radius:0 4px 4px 0;-moz-border-radius:0 4px 4px 0;border-radius:0 4px 4px 0;} .tabs-right .tabs>li>a:hover{border-color:#eee #eee #eee #ddd;} .tabs-right .tabs .active>a,.tabs-right .tabs .active>a:hover{border-color:#ddd #ddd #ddd transparent;} -.tab-content>.tab-pane,.pill-content>.pill-pane{display:none;} -.tab-content>.active,.pill-content>.active{display:block;} .breadcrumb{padding:7px 14px;margin:0 0 18px;background-color:#f5f5f5;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);background-repeat:repeat-x;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:#999999;} .breadcrumb .active a{color:#333333;} @@ -497,16 +498,5 @@ a.thumbnail:hover{border-color:#0088cc;-webkit-box-shadow:0 1px 4px rgba(0, 105, .label.warning{background-color:#f89406;} .label.success{background-color:#46a546;} .label.notice{background-color:#62cffc;} -@-webkit-keyframes progress-bar-stripes{from{background-position:0 0;} to{background-position:40px 0;}}@keyframes progress-bar-stripes{from{background-position:0 0;} to{background-position:40px 0;}}.progress,.progress .bar{-webkit-border-radius:4px;-moz-border-radius:4px;border-radius:4px;} -.progress{height:18px;margin-bottom:18px;background-color:#f9f9f9;background-image:-khtml-gradient(linear, left top, left bottom, from(#f5f5f5), to(#f9f9f9));background-image:-moz-linear-gradient(top, #f5f5f5, #f9f9f9);background-image:-ms-linear-gradient(top, #f5f5f5, #f9f9f9);background-image:-webkit-gradient(linear, left top, left bottom, color-stop(0%, #f5f5f5), color-stop(100%, #f9f9f9));background-image:-webkit-linear-gradient(top, #f5f5f5, #f9f9f9);background-image:-o-linear-gradient(top, #f5f5f5, #f9f9f9);background-image:linear-gradient(top, #f5f5f5, #f9f9f9);background-repeat:repeat-x;filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#f5f5f5', endColorstr='#f9f9f9', GradientType=0);border:1px solid #ddd;-webkit-box-shadow:inset 0 1px 2px rgba(0, 0, 0, 0.1);-moz-box-shadow:inset 0 1px 2px rgba(0, 0, 0, 0.1);box-shadow:inset 0 1px 2px rgba(0, 0, 0, 0.1);} -.progress .bar{width:0%;height:20px;margin:-1px;background-color:#57a957;background-image:-khtml-gradient(linear, left top, left bottom, from(#62c462), to(#57a957));background-image:-moz-linear-gradient(top, #62c462, #57a957);background-image:-ms-linear-gradient(top, #62c462, #57a957);background-image:-webkit-gradient(linear, left top, left bottom, color-stop(0%, #62c462), color-stop(100%, #57a957));background-image:-webkit-linear-gradient(top, #62c462, #57a957);background-image:-o-linear-gradient(top, #62c462, #57a957);background-image:linear-gradient(top, #62c462, #57a957);background-repeat:repeat-x;filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#62c462', endColorstr='#57a957', GradientType=0);background-color:#0480be;background-image:-khtml-gradient(linear, left top, left bottom, from(#149bdf), to(#0480be));background-image:-moz-linear-gradient(top, #149bdf, #0480be);background-image:-ms-linear-gradient(top, #149bdf, #0480be);background-image:-webkit-gradient(linear, left top, left bottom, color-stop(0%, #149bdf), color-stop(100%, #0480be));background-image:-webkit-linear-gradient(top, #149bdf, #0480be);background-image:-o-linear-gradient(top, #149bdf, #0480be);background-image:linear-gradient(top, #149bdf, #0480be);background-repeat:repeat-x;filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#149bdf', endColorstr='#0480be', GradientType=0);-webkit-box-shadow:inset 0 -1px 0 rgba(0, 0, 0, 0.15);-moz-box-shadow:inset 0 -1px 0 rgba(0, 0, 0, 0.15);box-shadow:inset 0 -1px 0 rgba(0, 0, 0, 0.15);-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;-webkit-transition:width 0.6s ease;-moz-transition:width 0.6s ease;-ms-transition:width 0.6s ease;-o-transition:width 0.6s ease;transition:width 0.6s ease;} -.progress.striped .bar{background-color:#62c462;background-image:-webkit-gradient(linear, 0 100%, 100% 0, color-stop(0.25, rgba(255, 255, 255, 0.15)), color-stop(0.25, transparent), color-stop(0.5, transparent), color-stop(0.5, rgba(255, 255, 255, 0.15)), color-stop(0.75, rgba(255, 255, 255, 0.15)), color-stop(0.75, transparent), to(transparent));background-image:-webkit-linear-gradient(-45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);background-image:-moz-linear-gradient(-45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);background-image:-ms-linear-gradient(-45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);background-image:-o-linear-gradient(-45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);background-image:linear-gradient(-45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);-webkit-background-size:40px 40px;-moz-background-size:40px 40px;-o-background-size:40px 40px;background-size:40px 40px;} -.progress.active .bar{-webkit-animation:progress-bar-stripes 2s linear infinite;-moz-animation:progress-bar-stripes 2s linear infinite;animation:progress-bar-stripes 2s linear infinite;} -.progress.danger .bar{background-color:#c43c35;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);background-repeat:repeat-x;filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ee5f5b', endColorstr='#c43c35', GradientType=0);} -.progress.danger.striped .bar{background-color:#ee5f5b;background-image:-webkit-gradient(linear, 0 100%, 100% 0, color-stop(0.25, rgba(255, 255, 255, 0.15)), color-stop(0.25, transparent), color-stop(0.5, transparent), color-stop(0.5, rgba(255, 255, 255, 0.15)), color-stop(0.75, rgba(255, 255, 255, 0.15)), color-stop(0.75, transparent), to(transparent));background-image:-webkit-linear-gradient(-45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);background-image:-moz-linear-gradient(-45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);background-image:-ms-linear-gradient(-45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);background-image:-o-linear-gradient(-45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);background-image:linear-gradient(-45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);} -.progress.success .bar{background-color:#57a957;background-image:-khtml-gradient(linear, left top, left bottom, from(#62c462), to(#57a957));background-image:-moz-linear-gradient(top, #62c462, #57a957);background-image:-ms-linear-gradient(top, #62c462, #57a957);background-image:-webkit-gradient(linear, left top, left bottom, color-stop(0%, #62c462), color-stop(100%, #57a957));background-image:-webkit-linear-gradient(top, #62c462, #57a957);background-image:-o-linear-gradient(top, #62c462, #57a957);background-image:linear-gradient(top, #62c462, #57a957);background-repeat:repeat-x;filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#62c462', endColorstr='#57a957', GradientType=0);} -.progress.success.striped .bar{background-color:#62c462;background-image:-webkit-gradient(linear, 0 100%, 100% 0, color-stop(0.25, rgba(255, 255, 255, 0.15)), color-stop(0.25, transparent), color-stop(0.5, transparent), color-stop(0.5, rgba(255, 255, 255, 0.15)), color-stop(0.75, rgba(255, 255, 255, 0.15)), color-stop(0.75, transparent), to(transparent));background-image:-webkit-linear-gradient(-45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);background-image:-moz-linear-gradient(-45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);background-image:-ms-linear-gradient(-45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);background-image:-o-linear-gradient(-45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);background-image:linear-gradient(-45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);} -.progress.info .bar{background-color:#339bb9;background-image:-khtml-gradient(linear, left top, left bottom, from(#5bc0de), to(#339bb9));background-image:-moz-linear-gradient(top, #5bc0de, #339bb9);background-image:-ms-linear-gradient(top, #5bc0de, #339bb9);background-image:-webkit-gradient(linear, left top, left bottom, color-stop(0%, #5bc0de), color-stop(100%, #339bb9));background-image:-webkit-linear-gradient(top, #5bc0de, #339bb9);background-image:-o-linear-gradient(top, #5bc0de, #339bb9);background-image:linear-gradient(top, #5bc0de, #339bb9);background-repeat:repeat-x;filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#5bc0de', endColorstr='#339bb9', GradientType=0);} -.progress.info.striped .bar{background-color:#5bc0de;background-image:-webkit-gradient(linear, 0 100%, 100% 0, color-stop(0.25, rgba(255, 255, 255, 0.15)), color-stop(0.25, transparent), color-stop(0.5, transparent), color-stop(0.5, rgba(255, 255, 255, 0.15)), color-stop(0.75, rgba(255, 255, 255, 0.15)), color-stop(0.75, transparent), to(transparent));background-image:-webkit-linear-gradient(-45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);background-image:-moz-linear-gradient(-45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);background-image:-ms-linear-gradient(-45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);background-image:-o-linear-gradient(-45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);background-image:linear-gradient(-45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);} -.hidden{display:none;visibility:hidden;} +@-webkit-keyframes progress-bar-stripes{from{background-position:0 0;} to{background-position:40px 0;}}.hidden{display:none;visibility:hidden;} @media (max-width: 480px){.modal{width:auto;margin:0;}.modal.fade.in{top:auto;} .horizontal-form .control-group>label{float:none;width:auto;padding-top:0;text-align:left;} .horizontal-form .controls{margin-left:0;} .horizontal-form .control-list{padding-top:0;} .horizontal-form .form-actions{padding-left:0;} .modal{position:fixed;top:20px;left:20px;right:20px;width:auto;}.modal .close{padding:10px;}}@media (max-width: 768px){.container{width:auto;padding:0 20px;} .row{margin-left:0;} .row>[class*="span"]{float:none;display:block;width:auto;margin:0;} .nav{position:absolute;top:0;left:0;width:180px;padding-top:40px;list-style:none;} .nav,.nav>li:last-child a{-webkit-border-radius:0 0 4px 0;-moz-border-radius:0 0 4px 0;border-radius:0 0 4px 0;} .nav>li{float:none;display:none;} .nav>li>a{float:none;background-color:#222;} .nav>.active{display:block;position:absolute;top:0;left:0;} .navbar ul .active>a{background-color:transparent;} .nav>.active a:after{display:inline-block;width:0;height:0;margin-top:8px;margin-left:6px;text-indent:-99999px;vertical-align:top;border-left:4px solid transparent;border-right:4px solid transparent;border-top:4px solid #ffffff;filter:alpha(opacity=100);-moz-opacity:1;opacity:1;content:"↓";} .nav>.active a:hover{background-color:rgba(255, 255, 255, 0.05);}}@media (min-width: 768px) and (max-width: 940px){.container{width:748px;} .span1{width:44px;} .span2{width:108px;} .span3{width:172px;} .span4{width:236px;} .span5{width:300px;} .span6{width:364px;} .span7{width:428px;} .span8{width:492px;} .span9{width:556px;} .span10{width:620px;} .span11{width:684px;} .span12{width:748px;} .offset1{margin-left:64px;} .offset2{margin-left:128px;} .offset3{margin-left:192px;} .offset4{margin-left:256px;} .offset5{margin-left:320px;} .offset6{margin-left:384px;} .offset7{margin-left:448px;} .offset8{margin-left:512px;} .offset9{margin-left:576px;} .offset10{margin-left:640px;} .offset11{margin-left:704px;} .offset12{margin-left:768px;}} diff --git a/docs/javascript.html b/docs/javascript.html index dbf8d922a2..1ea618a689 100644 --- a/docs/javascript.html +++ b/docs/javascript.html @@ -23,48 +23,6 @@ <link rel="apple-touch-icon" sizes="72x72" href="images/apple-touch-icon-72x72.png"> <link rel="apple-touch-icon" sizes="114x114" href="images/apple-touch-icon-114x114.png"> - <!-- Le javascript --> - <!-- placed up here so that the inline demos can be next to their markup --> - <script src="http://code.jquery.com/jquery-1.7.min.js"></script> - - <script type="text/javascript"> - // NOT FINAL BY ANY MEANS, JUST MAH JANK CODE BRO - $(document).ready(function() { - $('.nav .active').click(function(e) { - e.preventDefault(); - $(this).siblings().toggle(); - }); - }); - </script> - - <script src="assets/js/google-code-prettify/prettify.js"></script> - <script src="../js/bootstrap-transition.js"></script> - <script src="../js/bootstrap-alert.js"></script> - <script src="../js/bootstrap-modal.js"></script> - <script src="../js/bootstrap-dropdown.js"></script> - <script src="../js/bootstrap-scrollspy.js"></script> - <script src="../js/bootstrap-tab.js"></script> - <script src="../js/bootstrap-twipsy.js"></script> - <script src="../js/bootstrap-popover.js"></script> - <script src="../js/bootstrap-button.js"></script> - <script> - $(function () { - // twipsy demo - $("a[rel=twipsy]").twipsy({ - live: true - }) - - //popover demo - $("a[rel=popover]") - .popover({ - offset: 10 - }) - .click(function(e) { - e.preventDefault() - }) - }) - </script> - </head> <body id="bootstrap-js"> @@ -163,6 +121,10 @@ <td><a href="./javascript.html#carousel">bootstrap-carousel.js</a></td> <td>A plugin for rotating through elements. A merry-go-round.</td> </tr> + <tr> + <td><a href="./javascript.html#typeahead">bootstrap-typeahead.js</a></td> + <td>A basic, easily extended plugin for quickly creating elegant typeaheads.</td> + </tr> </tbody> </table> <h3>Is javascript necessary?</h3> @@ -1151,6 +1113,54 @@ $('.myCarousel').carousel({ </div> </section> + <!-- Typeahead + ================================================== --> + + <section id="typeahead"> + <div class="page-header"> + <h1>Typeahead <small>bootstrap-typeahead.js</small></h1> + </div> + <div class="row"> + <div class="span3 columns"> + <p>A basic, easily extended plugin for quickly creating elegant typeaheads.</p> + <a href="../js/bootstrap-carousel.js" target="_blank" class="btn primary">Download</a> + </div> + <div class="span9 columns"> + <h3>Using bootstrap-typeahead.js</h3> + <pre class="prettyprint linenums">$('.typeahead').typeahead()</pre> + + <h3>Options</h3> + <table class="bordered-table striped-table"> + <thead> + <tr> + <th style="width: 100px;">Name</th> + <th style="width: 50px;">type</th> + <th style="width: 50px;">default</th> + <th>description</th> + </tr> + </thead> + <tbody> + <tr> + <td>items</td> + <td>number</td> + <td>8</td> + <td>The max number of items to display in the dropdown.</td> + </tr> + </tbody> + </table> + + <h3>Markup</h3> + <p>Add data attributes to register an element with typeahead functionality.</p> +<pre class="prettyprint linenums"> +<input type="text" data-provide="typeahead" /> +</pre> + <h3>Demo</h3> + <input type="text" data-provide="typeahead" data-items="4" data-data='["Alabama","Alaska","Arizona","Arkansas","California","Colorado","Connecticut","Delaware","Florida","Georgia","Hawaii","Idaho","Illinois","Indiana","Iowa","Kansas","Kentucky","Louisiana","Maine","Maryland","Massachusetts","Michigan","Minnesota","Mississippi","Missouri","Montana","Nebraska","Nevada","New Hampshire","New Jersey","New Mexico","New York","North Dakota","North Carolina","Ohio","Oklahoma","Oregon","Pennsylvania","Rhode Island","South Carolina","South Dakota","Tennessee","Texas","Utah","Vermont","Virginia","Washington","West Virginia","Wisconsin","Wyoming"]'> + </div> + </div> + </section> + + <!-- Footer ================================================== --> <footer class="footer"> @@ -1178,6 +1188,7 @@ $('.myCarousel').carousel({ <script src="../js/bootstrap-button.js"></script> <script src="../js/bootstrap-collapse.js"></script> <script src="../js/bootstrap-carousel.js"></script> + <script src="../js/bootstrap-typeahead.js"></script> <script src="assets/js/application.js"></script> <script> $(function () { diff --git a/js/bootstrap-typeahead.js b/js/bootstrap-typeahead.js index 52ced3fef8..4933f96057 100644 --- a/js/bootstrap-typeahead.js +++ b/js/bootstrap-typeahead.js @@ -34,80 +34,102 @@ constructor: Typeahead - , matcher: function(item, query) { + , matcher: function (item, query) { return ~item.indexOf(query) } - , select: function(event) { - this.$element.val($(event.target).attr('data-value')) - this.hide() + , select: function () { + var val = this.$menu.find('.active').attr('data-value') + this.$element.val(val) + return this.hide() } , show: function () { - this.shown = true + var pos = $.extend({}, this.$element.offset(), { + height: this.$element[0].offsetHeight + }) + + this.$menu.css({ + top: pos.top + pos.height + , left: pos.left + }) + this.$menu.show() + this.shown = true return this } , hide: function () { - this.shown = false this.$menu.hide() + this.shown = false return this } , lookup: function (event) { var query = this.$element.val() , that = this + , items + + if (!query) { + return this.shown ? this.hide() : this + } - var items = this.data.filter(function (item) { - if (that.matcher(item, query)) { - return item - } + items = this.data.filter(function (item) { + if (that.matcher(item, query)) return item }) if (!items.length) { return this.shown ? this.hide() : this } - return this.render(items).show() + return this.render(items.slice(0, this.options.items)).show() } - , render: function(items) { + , render: function (items) { var that = this items = $(items).map(function (i, item) { - return $(that.options.item) - .text(item) - .attr('data-value', item)[0] + i = $(that.options.item).attr('data-value', item) + i.find('a').text(item) + return i[0] }) items.first().addClass('active') - - this.$menu.append(items) - + this.$menu.html(items) return this } , next: function (event) { var active = this.$menu.find('.active').removeClass('active') - , next = active.next() || $(this.$menu.find('li')[0]) + , next = active.next() + + if (!next.length) { + next = $(this.$menu.find('li')[0]) + } next.addClass('active') } , prev: function (event) { var active = this.$menu.find('.active').removeClass('active') - , next = active.prev() || this.$menu.find('li').last() + , prev = active.prev() - next.addClass('active') + if (!prev.length) { + prev = this.$menu.find('li').last() + } + + prev.addClass('active') } - , keyup: function () { - event - .stopPropagation() - .preventDefault() + , keyup: function (e) { + e.stopPropagation() + e.preventDefault() + + switch(e.keyCode) { + case 40: // down arrow + case 38: // up arrow + break - switch(event.keyCode) { case 9: // tab case 13: // enter this.select() @@ -120,51 +142,68 @@ default: this.lookup() } + } - , keypress: function (event) { - event.stopPropagation() - switch(event.keyCode) { + , keypress: function (e) { + e.stopPropagation() + + switch(e.keyCode) { case 9: // tab case 13: // enter case 27: // escape - event.preventDefault() + e.preventDefault() break case 38: // up arrow + e.preventDefault() this.prev() - event.preventDefault() break case 40: // down arrow + e.preventDefault() this.next() - event.preventDefault() break } - } + } + + , blur: function (e) { + var that = this + e.stopPropagation() + e.preventDefault() + setTimeout(function () { that.hide() }, 150) + } + + , click: function (e) { + e.stopPropagation() + e.preventDefault() + this.select() + } + + , mouseenter: function (e) { + this.$menu.find('.active').removeClass('active') + $(e.currentTarget).addClass('active') + } , listen: function () { this.$element - .on('focus', this.show) - .on('blur', $.proxy(this.hide, this)) + .on('blur', $.proxy(this.blur, this)) .on('keypress', $.proxy(this.keypress, this)) - .on('keyup', this.keyup) - .on('change', $.proxy(this.lookup, this)) + .on('keyup', $.proxy(this.keyup, this)) if ($.browser.webkit || $.browser.msie) { - this.$element.on('keydown', this.keypress) + this.$element.on('keydown', $.proxy(this.keypress, this)) } this.$menu - .on('click', '* > *', $.proxy(this.select, this)) - .on('mouseenter', function () { - /* remove selected class, add to mouseover */ - }) + .on('click', $.proxy(this.click, this)) + .on('mouseenter', 'li', $.proxy(this.mouseenter, this)) } } + /* TYPEAHEAD PLUGIN DEFINITION - * ============================== */ + * =========================== */ $.fn.typeahead = function ( option ) { return this.each(function () { @@ -177,14 +216,24 @@ } $.fn.typeahead.defaults = { - data: null - , items: 8 - , empty: false - , noresults: false - , menu: '<ul class="dropdown-menu"></ul>' - , item: '<li></li>' + items: 8 + , menu: '<ul class="typeahead dropdown-menu"></ul>' + , item: '<li><a href="#"></a></li>' } $.fn.typeahead.Constructor = Typeahead + + /* TYPEAHEAD DATA-API + * ================== */ + + $(function () { + $('body').on('focus.typeahead.data-api', '[data-provide="typeahead"]', function (e) { + var $this = $(this) + if ($this.data('typeahead')) return + e.preventDefault() + $this.typeahead($this.data()) + }) + }) + }( window.jQuery ) \ No newline at end of file diff --git a/js/tests/unit/bootstrap-typeahead.js b/js/tests/unit/bootstrap-typeahead.js index dc46a79909..10b2a3f174 100644 --- a/js/tests/unit/bootstrap-typeahead.js +++ b/js/tests/unit/bootstrap-typeahead.js @@ -13,11 +13,9 @@ $(function () { test("should listen to an input", function () { var $input = $('<input />') $input.typeahead() - ok($input.data('events').focus, 'has a focus event') ok($input.data('events').blur, 'has a blur event') ok($input.data('events').keypress, 'has a keypress event') ok($input.data('events').keyup, 'has a keyup event') - ok($input.data('events').change, 'has a change event') if ($.browser.webkit || $.browser.msie) { ok($input.data('events').keydown, 'has a keydown event') } else { @@ -44,7 +42,8 @@ $(function () { }) , typeahead = $input.data('typeahead') - $input.val('a').change() + $input.val('a') + typeahead.lookup() ok(typeahead.$menu.is(":visible"), 'typeahead is visible') equals(typeahead.$menu.find('li').length, 3, 'has 3 items in menu') @@ -54,12 +53,14 @@ $(function () { }) test("should hide menu when query entered", function () { + stop() var $input = $('<input />').typeahead({ data: ['aa', 'ab', 'ac'] }) , typeahead = $input.data('typeahead') - $input.val('a').change() + $input.val('a') + typeahead.lookup() ok(typeahead.$menu.is(":visible"), 'typeahead is visible') equals(typeahead.$menu.find('li').length, 3, 'has 3 items in menu') @@ -67,7 +68,10 @@ $(function () { $input.blur() - ok(!typeahead.$menu.is(":visible"), "typeahead is no longer visible") + setTimeout(function () { + ok(!typeahead.$menu.is(":visible"), "typeahead is no longer visible") + start() + }, 200) typeahead.$menu.remove() }) @@ -78,7 +82,8 @@ $(function () { }) , typeahead = $input.data('typeahead') - $input.val('a').change() + $input.val('a') + typeahead.lookup() ok(typeahead.$menu.is(":visible"), 'typeahead is visible') equals(typeahead.$menu.find('li').length, 3, 'has 3 items in menu') @@ -110,9 +115,10 @@ $(function () { }) , typeahead = $input.data('typeahead') - $input.val('a').change() + $input.val('a') + typeahead.lookup() - $(typeahead.$menu.find('li')[2]).trigger('click') + $(typeahead.$menu.find('li')[2]).mouseover().click() equals($input.val(), 'ac', 'input value was correctly set') ok(!typeahead.$menu.is(':visible'), 'the menu was hidden') diff --git a/lib/dropdowns.less b/lib/dropdowns.less index f59ab3728b..5dea8d6781 100644 --- a/lib/dropdowns.less +++ b/lib/dropdowns.less @@ -68,16 +68,17 @@ font-weight: normal; line-height: 18px; color: @gray; - // Hover state - &:hover { - color: #fff; - text-decoration: none; - text-shadow: 0 -1px 0 rgba(0,0,0,.25); - #gradient > .vertical(@blue, @blueDark); - #gradient > .vertical(@linkColor, darken(@linkColor, 5%)); - @shadow: inset 0 1px 0 rgba(0,0,0,.075), inset 0 -1px rgba(0,0,0,.075); - .box-shadow(@shadow); - } + } + + // Hover state + &.typeahead .active a, a:hover { + color: #fff; + text-decoration: none; + text-shadow: 0 -1px 0 rgba(0,0,0,.25); + #gradient > .vertical(@blue, @blueDark); + #gradient > .vertical(@linkColor, darken(@linkColor, 5%)); + @shadow: inset 0 1px 0 rgba(0,0,0,.075), inset 0 -1px rgba(0,0,0,.075); + .box-shadow(@shadow); } } -- GitLab From 19986b3dd8e921e9f0b4e238af6b4af83ef5bebe Mon Sep 17 00:00:00 2001 From: Mark Otto <markdotto@gmail.com> Date: Sun, 8 Jan 2012 01:45:49 -0800 Subject: [PATCH 228/318] remove / on js, fix link to typeahead, remove old gradient on dropdown hover --- bootstrap.css | 149 +++++++++++++++++++++++++++++++++++++++---- bootstrap.min.css | 15 ++++- docs/javascript.html | 4 +- lib/dropdowns.less | 1 - 4 files changed, 153 insertions(+), 16 deletions(-) diff --git a/bootstrap.css b/bootstrap.css index a46f6ca85a..1439ad4bb2 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 Jan 8 00:50:20 PST 2012 + * Date: Sun Jan 8 01:45:29 PST 2012 */ html, body { margin: 0; @@ -1493,16 +1493,6 @@ i { color: #fff; text-decoration: none; text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25); - background-color: #0064cd; - background-image: -khtml-gradient(linear, left top, left bottom, from(#049cdb), to(#0064cd)); - background-image: -moz-linear-gradient(top, #049cdb, #0064cd); - background-image: -ms-linear-gradient(top, #049cdb, #0064cd); - background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #049cdb), color-stop(100%, #0064cd)); - background-image: -webkit-linear-gradient(top, #049cdb, #0064cd); - background-image: -o-linear-gradient(top, #049cdb, #0064cd); - background-image: linear-gradient(top, #049cdb, #0064cd); - background-repeat: repeat-x; - filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#049cdb', endColorstr='#0064cd', GradientType=0); background-color: #0077b3; background-image: -khtml-gradient(linear, left top, left bottom, from(#0088cc), to(#0077b3)); background-image: -moz-linear-gradient(top, #0088cc, #0077b3); @@ -2858,6 +2848,143 @@ a.thumbnail:hover { background-position: 40px 0; } } +@keyframes progress-bar-stripes { + from { + background-position: 0 0; + } + to { + background-position: 40px 0; + } +} +.progress, .progress .bar { + -webkit-border-radius: 4px; + -moz-border-radius: 4px; + border-radius: 4px; +} +.progress { + height: 18px; + margin-bottom: 18px; + background-color: #f9f9f9; + background-image: -khtml-gradient(linear, left top, left bottom, from(#f5f5f5), to(#f9f9f9)); + background-image: -moz-linear-gradient(top, #f5f5f5, #f9f9f9); + background-image: -ms-linear-gradient(top, #f5f5f5, #f9f9f9); + background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #f5f5f5), color-stop(100%, #f9f9f9)); + background-image: -webkit-linear-gradient(top, #f5f5f5, #f9f9f9); + background-image: -o-linear-gradient(top, #f5f5f5, #f9f9f9); + background-image: linear-gradient(top, #f5f5f5, #f9f9f9); + background-repeat: repeat-x; + filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#f5f5f5', endColorstr='#f9f9f9', GradientType=0); + -webkit-box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1); + -moz-box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1); + box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1); +} +.progress .bar { + width: 0%; + height: 18px; + margin: ; + background-color: #0480be; + background-image: -khtml-gradient(linear, left top, left bottom, from(#149bdf), to(#0480be)); + background-image: -moz-linear-gradient(top, #149bdf, #0480be); + background-image: -ms-linear-gradient(top, #149bdf, #0480be); + background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #149bdf), color-stop(100%, #0480be)); + background-image: -webkit-linear-gradient(top, #149bdf, #0480be); + background-image: -o-linear-gradient(top, #149bdf, #0480be); + background-image: linear-gradient(top, #149bdf, #0480be); + background-repeat: repeat-x; + filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#149bdf', endColorstr='#0480be', GradientType=0); + -webkit-box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.15); + -moz-box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.15); + box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.15); + -webkit-box-sizing: border-box; + -moz-box-sizing: border-box; + box-sizing: border-box; + -webkit-transition: width 0.6s ease; + -moz-transition: width 0.6s ease; + -ms-transition: width 0.6s ease; + -o-transition: width 0.6s ease; + transition: width 0.6s ease; +} +.progress.striped .bar { + background-color: #62c462; + background-image: -webkit-gradient(linear, 0 100%, 100% 0, color-stop(0.25, rgba(255, 255, 255, 0.15)), color-stop(0.25, transparent), color-stop(0.5, transparent), color-stop(0.5, rgba(255, 255, 255, 0.15)), color-stop(0.75, rgba(255, 255, 255, 0.15)), color-stop(0.75, transparent), to(transparent)); + background-image: -webkit-linear-gradient(-45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent); + background-image: -moz-linear-gradient(-45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent); + background-image: -ms-linear-gradient(-45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent); + background-image: -o-linear-gradient(-45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent); + background-image: linear-gradient(-45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent); + -webkit-background-size: 40px 40px; + -moz-background-size: 40px 40px; + -o-background-size: 40px 40px; + background-size: 40px 40px; +} +.progress.active .bar { + -webkit-animation: progress-bar-stripes 2s linear infinite; + -moz-animation: progress-bar-stripes 2s linear infinite; + animation: progress-bar-stripes 2s linear infinite; +} +.progress.danger .bar { + background-color: #c43c35; + 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); + background-repeat: repeat-x; + filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ee5f5b', endColorstr='#c43c35', GradientType=0); +} +.progress.danger.striped .bar { + background-color: #ee5f5b; + background-image: -webkit-gradient(linear, 0 100%, 100% 0, color-stop(0.25, rgba(255, 255, 255, 0.15)), color-stop(0.25, transparent), color-stop(0.5, transparent), color-stop(0.5, rgba(255, 255, 255, 0.15)), color-stop(0.75, rgba(255, 255, 255, 0.15)), color-stop(0.75, transparent), to(transparent)); + background-image: -webkit-linear-gradient(-45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent); + background-image: -moz-linear-gradient(-45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent); + background-image: -ms-linear-gradient(-45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent); + background-image: -o-linear-gradient(-45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent); + background-image: linear-gradient(-45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent); +} +.progress.success .bar { + background-color: #57a957; + background-image: -khtml-gradient(linear, left top, left bottom, from(#62c462), to(#57a957)); + background-image: -moz-linear-gradient(top, #62c462, #57a957); + background-image: -ms-linear-gradient(top, #62c462, #57a957); + background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #62c462), color-stop(100%, #57a957)); + background-image: -webkit-linear-gradient(top, #62c462, #57a957); + background-image: -o-linear-gradient(top, #62c462, #57a957); + background-image: linear-gradient(top, #62c462, #57a957); + background-repeat: repeat-x; + filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#62c462', endColorstr='#57a957', GradientType=0); +} +.progress.success.striped .bar { + background-color: #62c462; + background-image: -webkit-gradient(linear, 0 100%, 100% 0, color-stop(0.25, rgba(255, 255, 255, 0.15)), color-stop(0.25, transparent), color-stop(0.5, transparent), color-stop(0.5, rgba(255, 255, 255, 0.15)), color-stop(0.75, rgba(255, 255, 255, 0.15)), color-stop(0.75, transparent), to(transparent)); + background-image: -webkit-linear-gradient(-45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent); + background-image: -moz-linear-gradient(-45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent); + background-image: -ms-linear-gradient(-45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent); + background-image: -o-linear-gradient(-45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent); + background-image: linear-gradient(-45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent); +} +.progress.info .bar { + background-color: #339bb9; + background-image: -khtml-gradient(linear, left top, left bottom, from(#5bc0de), to(#339bb9)); + background-image: -moz-linear-gradient(top, #5bc0de, #339bb9); + background-image: -ms-linear-gradient(top, #5bc0de, #339bb9); + background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #5bc0de), color-stop(100%, #339bb9)); + background-image: -webkit-linear-gradient(top, #5bc0de, #339bb9); + background-image: -o-linear-gradient(top, #5bc0de, #339bb9); + background-image: linear-gradient(top, #5bc0de, #339bb9); + background-repeat: repeat-x; + filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#5bc0de', endColorstr='#339bb9', GradientType=0); +} +.progress.info.striped .bar { + background-color: #5bc0de; + background-image: -webkit-gradient(linear, 0 100%, 100% 0, color-stop(0.25, rgba(255, 255, 255, 0.15)), color-stop(0.25, transparent), color-stop(0.5, transparent), color-stop(0.5, rgba(255, 255, 255, 0.15)), color-stop(0.75, rgba(255, 255, 255, 0.15)), color-stop(0.75, transparent), to(transparent)); + background-image: -webkit-linear-gradient(-45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent); + background-image: -moz-linear-gradient(-45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent); + background-image: -ms-linear-gradient(-45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent); + background-image: -o-linear-gradient(-45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent); + background-image: linear-gradient(-45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent); +} .hidden { display: none; visibility: hidden; diff --git a/bootstrap.min.css b/bootstrap.min.css index 6ad22faca0..b7b2291d51 100644 --- a/bootstrap.min.css +++ b/bootstrap.min.css @@ -305,7 +305,7 @@ i{background-image:url(docs/assets/img/glyphicons-halflings-sprite.png);backgrou .dropdown:hover .caret,.open.dropdown .caret{filter:alpha(opacity=100);-moz-opacity:1;opacity:1;} .dropdown-menu{position:absolute;top:40px;z-index:1000;float:left;display:none;min-width:160px;max-width:220px;_width:160px;padding:5px 0;margin:0;list-style:none;background-color:#ffffff;border-color:#999;border-color:rgba(0, 0, 0, 0.1);border-style:solid;border-width:1px;-webkit-border-radius:0 0 5px 5px;-moz-border-radius:0 0 5px 5px;border-radius:0 0 5px 5px;-webkit-box-shadow:0 5px 10px rgba(0, 0, 0, 0.2);-moz-box-shadow:0 5px 10px rgba(0, 0, 0, 0.2);box-shadow:0 5px 10px rgba(0, 0, 0, 0.2);-webkit-background-clip:padding-box;-moz-background-clip:padding;background-clip:padding-box;zoom:1;}.dropdown-menu .divider{height:1px;margin:5px 1px;overflow:hidden;background-color:#e5e5e5;border-bottom:1px solid #ffffff;} .dropdown-menu a{display:block;padding:2px 15px;clear:both;font-weight:normal;line-height:18px;color:#555555;} -.dropdown-menu.typeahead .active a,.dropdown-menu a:hover{color:#fff;text-decoration:none;text-shadow:0 -1px 0 rgba(0, 0, 0, 0.25);background-color:#0064cd;background-image:-khtml-gradient(linear, left top, left bottom, from(#049cdb), to(#0064cd));background-image:-moz-linear-gradient(top, #049cdb, #0064cd);background-image:-ms-linear-gradient(top, #049cdb, #0064cd);background-image:-webkit-gradient(linear, left top, left bottom, color-stop(0%, #049cdb), color-stop(100%, #0064cd));background-image:-webkit-linear-gradient(top, #049cdb, #0064cd);background-image:-o-linear-gradient(top, #049cdb, #0064cd);background-image:linear-gradient(top, #049cdb, #0064cd);background-repeat:repeat-x;filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#049cdb', endColorstr='#0064cd', GradientType=0);background-color:#0077b3;background-image:-khtml-gradient(linear, left top, left bottom, from(#0088cc), to(#0077b3));background-image:-moz-linear-gradient(top, #0088cc, #0077b3);background-image:-ms-linear-gradient(top, #0088cc, #0077b3);background-image:-webkit-gradient(linear, left top, left bottom, color-stop(0%, #0088cc), color-stop(100%, #0077b3));background-image:-webkit-linear-gradient(top, #0088cc, #0077b3);background-image:-o-linear-gradient(top, #0088cc, #0077b3);background-image:linear-gradient(top, #0088cc, #0077b3);background-repeat:repeat-x;filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#0088cc', endColorstr='#0077b3', GradientType=0);-webkit-box-shadow:inset 0 1px 0 rgba(0, 0, 0, 0.075),inset 0 -1px rgba(0, 0, 0, 0.075);-moz-box-shadow:inset 0 1px 0 rgba(0, 0, 0, 0.075),inset 0 -1px rgba(0, 0, 0, 0.075);box-shadow:inset 0 1px 0 rgba(0, 0, 0, 0.075),inset 0 -1px rgba(0, 0, 0, 0.075);} +.dropdown-menu.typeahead .active a,.dropdown-menu a:hover{color:#fff;text-decoration:none;text-shadow:0 -1px 0 rgba(0, 0, 0, 0.25);background-color:#0077b3;background-image:-khtml-gradient(linear, left top, left bottom, from(#0088cc), to(#0077b3));background-image:-moz-linear-gradient(top, #0088cc, #0077b3);background-image:-ms-linear-gradient(top, #0088cc, #0077b3);background-image:-webkit-gradient(linear, left top, left bottom, color-stop(0%, #0088cc), color-stop(100%, #0077b3));background-image:-webkit-linear-gradient(top, #0088cc, #0077b3);background-image:-o-linear-gradient(top, #0088cc, #0077b3);background-image:linear-gradient(top, #0088cc, #0077b3);background-repeat:repeat-x;filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#0088cc', endColorstr='#0077b3', GradientType=0);-webkit-box-shadow:inset 0 1px 0 rgba(0, 0, 0, 0.075),inset 0 -1px rgba(0, 0, 0, 0.075);-moz-box-shadow:inset 0 1px 0 rgba(0, 0, 0, 0.075),inset 0 -1px rgba(0, 0, 0, 0.075);box-shadow:inset 0 1px 0 rgba(0, 0, 0, 0.075),inset 0 -1px rgba(0, 0, 0, 0.075);} .dropdown.open .dropdown-toggle{color:#ffffff;background:#ccc;background:rgba(0, 0, 0, 0.3);} .dropdown.open .dropdown-menu{display:block;} .well{min-height:20px;padding:19px;margin-bottom:20px;background-color:#f5f5f5;border:1px solid #eee;border:1px solid rgba(0, 0, 0, 0.05);-webkit-border-radius:4px;-moz-border-radius:4px;border-radius:4px;-webkit-box-shadow:inset 0 1px 1px rgba(0, 0, 0, 0.05);-moz-box-shadow:inset 0 1px 1px rgba(0, 0, 0, 0.05);box-shadow:inset 0 1px 1px rgba(0, 0, 0, 0.05);}.well blockquote{border-color:#ddd;border-color:rgba(0, 0, 0, 0.15);} @@ -498,5 +498,16 @@ a.thumbnail:hover{border-color:#0088cc;-webkit-box-shadow:0 1px 4px rgba(0, 105, .label.warning{background-color:#f89406;} .label.success{background-color:#46a546;} .label.notice{background-color:#62cffc;} -@-webkit-keyframes progress-bar-stripes{from{background-position:0 0;} to{background-position:40px 0;}}.hidden{display:none;visibility:hidden;} +@-webkit-keyframes progress-bar-stripes{from{background-position:0 0;} to{background-position:40px 0;}}@keyframes progress-bar-stripes{from{background-position:0 0;} to{background-position:40px 0;}}.progress,.progress .bar{-webkit-border-radius:4px;-moz-border-radius:4px;border-radius:4px;} +.progress{height:18px;margin-bottom:18px;background-color:#f9f9f9;background-image:-khtml-gradient(linear, left top, left bottom, from(#f5f5f5), to(#f9f9f9));background-image:-moz-linear-gradient(top, #f5f5f5, #f9f9f9);background-image:-ms-linear-gradient(top, #f5f5f5, #f9f9f9);background-image:-webkit-gradient(linear, left top, left bottom, color-stop(0%, #f5f5f5), color-stop(100%, #f9f9f9));background-image:-webkit-linear-gradient(top, #f5f5f5, #f9f9f9);background-image:-o-linear-gradient(top, #f5f5f5, #f9f9f9);background-image:linear-gradient(top, #f5f5f5, #f9f9f9);background-repeat:repeat-x;filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#f5f5f5', endColorstr='#f9f9f9', GradientType=0);-webkit-box-shadow:inset 0 1px 2px rgba(0, 0, 0, 0.1);-moz-box-shadow:inset 0 1px 2px rgba(0, 0, 0, 0.1);box-shadow:inset 0 1px 2px rgba(0, 0, 0, 0.1);} +.progress .bar{width:0%;height:18px;margin:;background-color:#0480be;background-image:-khtml-gradient(linear, left top, left bottom, from(#149bdf), to(#0480be));background-image:-moz-linear-gradient(top, #149bdf, #0480be);background-image:-ms-linear-gradient(top, #149bdf, #0480be);background-image:-webkit-gradient(linear, left top, left bottom, color-stop(0%, #149bdf), color-stop(100%, #0480be));background-image:-webkit-linear-gradient(top, #149bdf, #0480be);background-image:-o-linear-gradient(top, #149bdf, #0480be);background-image:linear-gradient(top, #149bdf, #0480be);background-repeat:repeat-x;filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#149bdf', endColorstr='#0480be', GradientType=0);-webkit-box-shadow:inset 0 -1px 0 rgba(0, 0, 0, 0.15);-moz-box-shadow:inset 0 -1px 0 rgba(0, 0, 0, 0.15);box-shadow:inset 0 -1px 0 rgba(0, 0, 0, 0.15);-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;-webkit-transition:width 0.6s ease;-moz-transition:width 0.6s ease;-ms-transition:width 0.6s ease;-o-transition:width 0.6s ease;transition:width 0.6s ease;} +.progress.striped .bar{background-color:#62c462;background-image:-webkit-gradient(linear, 0 100%, 100% 0, color-stop(0.25, rgba(255, 255, 255, 0.15)), color-stop(0.25, transparent), color-stop(0.5, transparent), color-stop(0.5, rgba(255, 255, 255, 0.15)), color-stop(0.75, rgba(255, 255, 255, 0.15)), color-stop(0.75, transparent), to(transparent));background-image:-webkit-linear-gradient(-45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);background-image:-moz-linear-gradient(-45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);background-image:-ms-linear-gradient(-45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);background-image:-o-linear-gradient(-45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);background-image:linear-gradient(-45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);-webkit-background-size:40px 40px;-moz-background-size:40px 40px;-o-background-size:40px 40px;background-size:40px 40px;} +.progress.active .bar{-webkit-animation:progress-bar-stripes 2s linear infinite;-moz-animation:progress-bar-stripes 2s linear infinite;animation:progress-bar-stripes 2s linear infinite;} +.progress.danger .bar{background-color:#c43c35;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);background-repeat:repeat-x;filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ee5f5b', endColorstr='#c43c35', GradientType=0);} +.progress.danger.striped .bar{background-color:#ee5f5b;background-image:-webkit-gradient(linear, 0 100%, 100% 0, color-stop(0.25, rgba(255, 255, 255, 0.15)), color-stop(0.25, transparent), color-stop(0.5, transparent), color-stop(0.5, rgba(255, 255, 255, 0.15)), color-stop(0.75, rgba(255, 255, 255, 0.15)), color-stop(0.75, transparent), to(transparent));background-image:-webkit-linear-gradient(-45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);background-image:-moz-linear-gradient(-45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);background-image:-ms-linear-gradient(-45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);background-image:-o-linear-gradient(-45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);background-image:linear-gradient(-45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);} +.progress.success .bar{background-color:#57a957;background-image:-khtml-gradient(linear, left top, left bottom, from(#62c462), to(#57a957));background-image:-moz-linear-gradient(top, #62c462, #57a957);background-image:-ms-linear-gradient(top, #62c462, #57a957);background-image:-webkit-gradient(linear, left top, left bottom, color-stop(0%, #62c462), color-stop(100%, #57a957));background-image:-webkit-linear-gradient(top, #62c462, #57a957);background-image:-o-linear-gradient(top, #62c462, #57a957);background-image:linear-gradient(top, #62c462, #57a957);background-repeat:repeat-x;filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#62c462', endColorstr='#57a957', GradientType=0);} +.progress.success.striped .bar{background-color:#62c462;background-image:-webkit-gradient(linear, 0 100%, 100% 0, color-stop(0.25, rgba(255, 255, 255, 0.15)), color-stop(0.25, transparent), color-stop(0.5, transparent), color-stop(0.5, rgba(255, 255, 255, 0.15)), color-stop(0.75, rgba(255, 255, 255, 0.15)), color-stop(0.75, transparent), to(transparent));background-image:-webkit-linear-gradient(-45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);background-image:-moz-linear-gradient(-45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);background-image:-ms-linear-gradient(-45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);background-image:-o-linear-gradient(-45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);background-image:linear-gradient(-45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);} +.progress.info .bar{background-color:#339bb9;background-image:-khtml-gradient(linear, left top, left bottom, from(#5bc0de), to(#339bb9));background-image:-moz-linear-gradient(top, #5bc0de, #339bb9);background-image:-ms-linear-gradient(top, #5bc0de, #339bb9);background-image:-webkit-gradient(linear, left top, left bottom, color-stop(0%, #5bc0de), color-stop(100%, #339bb9));background-image:-webkit-linear-gradient(top, #5bc0de, #339bb9);background-image:-o-linear-gradient(top, #5bc0de, #339bb9);background-image:linear-gradient(top, #5bc0de, #339bb9);background-repeat:repeat-x;filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#5bc0de', endColorstr='#339bb9', GradientType=0);} +.progress.info.striped .bar{background-color:#5bc0de;background-image:-webkit-gradient(linear, 0 100%, 100% 0, color-stop(0.25, rgba(255, 255, 255, 0.15)), color-stop(0.25, transparent), color-stop(0.5, transparent), color-stop(0.5, rgba(255, 255, 255, 0.15)), color-stop(0.75, rgba(255, 255, 255, 0.15)), color-stop(0.75, transparent), to(transparent));background-image:-webkit-linear-gradient(-45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);background-image:-moz-linear-gradient(-45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);background-image:-ms-linear-gradient(-45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);background-image:-o-linear-gradient(-45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);background-image:linear-gradient(-45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);} +.hidden{display:none;visibility:hidden;} @media (max-width: 480px){.modal{width:auto;margin:0;}.modal.fade.in{top:auto;} .horizontal-form .control-group>label{float:none;width:auto;padding-top:0;text-align:left;} .horizontal-form .controls{margin-left:0;} .horizontal-form .control-list{padding-top:0;} .horizontal-form .form-actions{padding-left:0;} .modal{position:fixed;top:20px;left:20px;right:20px;width:auto;}.modal .close{padding:10px;}}@media (max-width: 768px){.container{width:auto;padding:0 20px;} .row{margin-left:0;} .row>[class*="span"]{float:none;display:block;width:auto;margin:0;} .nav{position:absolute;top:0;left:0;width:180px;padding-top:40px;list-style:none;} .nav,.nav>li:last-child a{-webkit-border-radius:0 0 4px 0;-moz-border-radius:0 0 4px 0;border-radius:0 0 4px 0;} .nav>li{float:none;display:none;} .nav>li>a{float:none;background-color:#222;} .nav>.active{display:block;position:absolute;top:0;left:0;} .navbar ul .active>a{background-color:transparent;} .nav>.active a:after{display:inline-block;width:0;height:0;margin-top:8px;margin-left:6px;text-indent:-99999px;vertical-align:top;border-left:4px solid transparent;border-right:4px solid transparent;border-top:4px solid #ffffff;filter:alpha(opacity=100);-moz-opacity:1;opacity:1;content:"↓";} .nav>.active a:hover{background-color:rgba(255, 255, 255, 0.05);}}@media (min-width: 768px) and (max-width: 940px){.container{width:748px;} .span1{width:44px;} .span2{width:108px;} .span3{width:172px;} .span4{width:236px;} .span5{width:300px;} .span6{width:364px;} .span7{width:428px;} .span8{width:492px;} .span9{width:556px;} .span10{width:620px;} .span11{width:684px;} .span12{width:748px;} .offset1{margin-left:64px;} .offset2{margin-left:128px;} .offset3{margin-left:192px;} .offset4{margin-left:256px;} .offset5{margin-left:320px;} .offset6{margin-left:384px;} .offset7{margin-left:448px;} .offset8{margin-left:512px;} .offset9{margin-left:576px;} .offset10{margin-left:640px;} .offset11{margin-left:704px;} .offset12{margin-left:768px;}} diff --git a/docs/javascript.html b/docs/javascript.html index 1ea618a689..8056d7fc5c 100644 --- a/docs/javascript.html +++ b/docs/javascript.html @@ -1123,7 +1123,7 @@ $('.myCarousel').carousel({ <div class="row"> <div class="span3 columns"> <p>A basic, easily extended plugin for quickly creating elegant typeaheads.</p> - <a href="../js/bootstrap-carousel.js" target="_blank" class="btn primary">Download</a> + <a href="../js/bootstrap-typeahead.js" target="_blank" class="btn primary">Download</a> </div> <div class="span9 columns"> <h3>Using bootstrap-typeahead.js</h3> @@ -1152,7 +1152,7 @@ $('.myCarousel').carousel({ <h3>Markup</h3> <p>Add data attributes to register an element with typeahead functionality.</p> <pre class="prettyprint linenums"> -<input type="text" data-provide="typeahead" /> +<input type="text" data-provide="typeahead"> </pre> <h3>Demo</h3> <input type="text" data-provide="typeahead" data-items="4" data-data='["Alabama","Alaska","Arizona","Arkansas","California","Colorado","Connecticut","Delaware","Florida","Georgia","Hawaii","Idaho","Illinois","Indiana","Iowa","Kansas","Kentucky","Louisiana","Maine","Maryland","Massachusetts","Michigan","Minnesota","Mississippi","Missouri","Montana","Nebraska","Nevada","New Hampshire","New Jersey","New Mexico","New York","North Dakota","North Carolina","Ohio","Oklahoma","Oregon","Pennsylvania","Rhode Island","South Carolina","South Dakota","Tennessee","Texas","Utah","Vermont","Virginia","Washington","West Virginia","Wisconsin","Wyoming"]'> diff --git a/lib/dropdowns.less b/lib/dropdowns.less index 5dea8d6781..34d83af2a1 100644 --- a/lib/dropdowns.less +++ b/lib/dropdowns.less @@ -75,7 +75,6 @@ color: #fff; text-decoration: none; text-shadow: 0 -1px 0 rgba(0,0,0,.25); - #gradient > .vertical(@blue, @blueDark); #gradient > .vertical(@linkColor, darken(@linkColor, 5%)); @shadow: inset 0 1px 0 rgba(0,0,0,.075), inset 0 -1px rgba(0,0,0,.075); .box-shadow(@shadow); -- GitLab From b780034a65faf99acffb2c5cea27a98883ddf819 Mon Sep 17 00:00:00 2001 From: Mark Otto <markdotto@gmail.com> Date: Sun, 8 Jan 2012 01:50:12 -0800 Subject: [PATCH 229/318] clean up some spacing on the dropdown for typeahead --- bootstrap.css | 10 ++++++++-- bootstrap.min.css | 3 ++- lib/dropdowns.less | 25 ++++++++++++++++--------- 3 files changed, 26 insertions(+), 12 deletions(-) diff --git a/bootstrap.css b/bootstrap.css index 1439ad4bb2..5eb8a4a7ce 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 Jan 8 01:45:29 PST 2012 + * Date: Sun Jan 8 01:50:02 PST 2012 */ html, body { margin: 0; @@ -1489,7 +1489,7 @@ i { line-height: 18px; color: #555555; } -.dropdown-menu.typeahead .active a, .dropdown-menu a:hover { +.dropdown-menu a:hover, .dropdown-menu .active > a { color: #fff; text-decoration: none; text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25); @@ -1515,6 +1515,12 @@ i { .dropdown.open .dropdown-menu { display: block; } +.typeahead { + margin-top: 2px; + -webkit-border-radius: 4px; + -moz-border-radius: 4px; + border-radius: 4px; +} .well { min-height: 20px; padding: 19px; diff --git a/bootstrap.min.css b/bootstrap.min.css index b7b2291d51..33e4f7f809 100644 --- a/bootstrap.min.css +++ b/bootstrap.min.css @@ -305,9 +305,10 @@ i{background-image:url(docs/assets/img/glyphicons-halflings-sprite.png);backgrou .dropdown:hover .caret,.open.dropdown .caret{filter:alpha(opacity=100);-moz-opacity:1;opacity:1;} .dropdown-menu{position:absolute;top:40px;z-index:1000;float:left;display:none;min-width:160px;max-width:220px;_width:160px;padding:5px 0;margin:0;list-style:none;background-color:#ffffff;border-color:#999;border-color:rgba(0, 0, 0, 0.1);border-style:solid;border-width:1px;-webkit-border-radius:0 0 5px 5px;-moz-border-radius:0 0 5px 5px;border-radius:0 0 5px 5px;-webkit-box-shadow:0 5px 10px rgba(0, 0, 0, 0.2);-moz-box-shadow:0 5px 10px rgba(0, 0, 0, 0.2);box-shadow:0 5px 10px rgba(0, 0, 0, 0.2);-webkit-background-clip:padding-box;-moz-background-clip:padding;background-clip:padding-box;zoom:1;}.dropdown-menu .divider{height:1px;margin:5px 1px;overflow:hidden;background-color:#e5e5e5;border-bottom:1px solid #ffffff;} .dropdown-menu a{display:block;padding:2px 15px;clear:both;font-weight:normal;line-height:18px;color:#555555;} -.dropdown-menu.typeahead .active a,.dropdown-menu a:hover{color:#fff;text-decoration:none;text-shadow:0 -1px 0 rgba(0, 0, 0, 0.25);background-color:#0077b3;background-image:-khtml-gradient(linear, left top, left bottom, from(#0088cc), to(#0077b3));background-image:-moz-linear-gradient(top, #0088cc, #0077b3);background-image:-ms-linear-gradient(top, #0088cc, #0077b3);background-image:-webkit-gradient(linear, left top, left bottom, color-stop(0%, #0088cc), color-stop(100%, #0077b3));background-image:-webkit-linear-gradient(top, #0088cc, #0077b3);background-image:-o-linear-gradient(top, #0088cc, #0077b3);background-image:linear-gradient(top, #0088cc, #0077b3);background-repeat:repeat-x;filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#0088cc', endColorstr='#0077b3', GradientType=0);-webkit-box-shadow:inset 0 1px 0 rgba(0, 0, 0, 0.075),inset 0 -1px rgba(0, 0, 0, 0.075);-moz-box-shadow:inset 0 1px 0 rgba(0, 0, 0, 0.075),inset 0 -1px rgba(0, 0, 0, 0.075);box-shadow:inset 0 1px 0 rgba(0, 0, 0, 0.075),inset 0 -1px rgba(0, 0, 0, 0.075);} +.dropdown-menu a:hover,.dropdown-menu .active>a{color:#fff;text-decoration:none;text-shadow:0 -1px 0 rgba(0, 0, 0, 0.25);background-color:#0077b3;background-image:-khtml-gradient(linear, left top, left bottom, from(#0088cc), to(#0077b3));background-image:-moz-linear-gradient(top, #0088cc, #0077b3);background-image:-ms-linear-gradient(top, #0088cc, #0077b3);background-image:-webkit-gradient(linear, left top, left bottom, color-stop(0%, #0088cc), color-stop(100%, #0077b3));background-image:-webkit-linear-gradient(top, #0088cc, #0077b3);background-image:-o-linear-gradient(top, #0088cc, #0077b3);background-image:linear-gradient(top, #0088cc, #0077b3);background-repeat:repeat-x;filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#0088cc', endColorstr='#0077b3', GradientType=0);-webkit-box-shadow:inset 0 1px 0 rgba(0, 0, 0, 0.075),inset 0 -1px rgba(0, 0, 0, 0.075);-moz-box-shadow:inset 0 1px 0 rgba(0, 0, 0, 0.075),inset 0 -1px rgba(0, 0, 0, 0.075);box-shadow:inset 0 1px 0 rgba(0, 0, 0, 0.075),inset 0 -1px rgba(0, 0, 0, 0.075);} .dropdown.open .dropdown-toggle{color:#ffffff;background:#ccc;background:rgba(0, 0, 0, 0.3);} .dropdown.open .dropdown-menu{display:block;} +.typeahead{margin-top:2px;-webkit-border-radius:4px;-moz-border-radius:4px;border-radius:4px;} .well{min-height:20px;padding:19px;margin-bottom:20px;background-color:#f5f5f5;border:1px solid #eee;border:1px solid rgba(0, 0, 0, 0.05);-webkit-border-radius:4px;-moz-border-radius:4px;border-radius:4px;-webkit-box-shadow:inset 0 1px 1px rgba(0, 0, 0, 0.05);-moz-box-shadow:inset 0 1px 1px rgba(0, 0, 0, 0.05);box-shadow:inset 0 1px 1px rgba(0, 0, 0, 0.05);}.well blockquote{border-color:#ddd;border-color:rgba(0, 0, 0, 0.15);} .fade{-webkit-transition:opacity 0.15s linear;-moz-transition:opacity 0.15s linear;-ms-transition:opacity 0.15s linear;-o-transition:opacity 0.15s linear;transition:opacity 0.15s linear;opacity:0;}.fade.in{opacity:1;} .collapse{-webkit-transition:height 0.35s ease;-moz-transition:height 0.35s ease;-ms-transition:height 0.35s ease;-o-transition:height 0.35s ease;transition:height 0.35s ease;position:relative;overflow:hidden;height:0;}.collapse.in{height:auto;} diff --git a/lib/dropdowns.less b/lib/dropdowns.less index 34d83af2a1..484cbbcd70 100644 --- a/lib/dropdowns.less +++ b/lib/dropdowns.less @@ -69,16 +69,17 @@ line-height: 18px; color: @gray; } +} - // Hover state - &.typeahead .active a, a:hover { - color: #fff; - text-decoration: none; - text-shadow: 0 -1px 0 rgba(0,0,0,.25); - #gradient > .vertical(@linkColor, darken(@linkColor, 5%)); - @shadow: inset 0 1px 0 rgba(0,0,0,.075), inset 0 -1px rgba(0,0,0,.075); - .box-shadow(@shadow); - } +// Hover & Active states +.dropdown-menu a:hover, +.dropdown-menu .active > a { + color: #fff; + text-decoration: none; + text-shadow: 0 -1px 0 rgba(0,0,0,.25); + #gradient > .vertical(@linkColor, darken(@linkColor, 5%)); + @shadow: inset 0 1px 0 rgba(0,0,0,.075), inset 0 -1px rgba(0,0,0,.075); + .box-shadow(@shadow); } // Open state for the dropdown @@ -92,3 +93,9 @@ display: block; } } + +// Typeahead +.typeahead { + margin-top: 2px; // give it some space to breathe + .border-radius(4px); +} -- GitLab From 9daf1661c5c9cce161e1981b484b7d7f04eac2e6 Mon Sep 17 00:00:00 2001 From: Mark Otto <markdotto@gmail.com> Date: Sun, 8 Jan 2012 01:54:59 -0800 Subject: [PATCH 230/318] fix docs for fluid layout, update topbar to fix active text color for links --- bootstrap.css | 4 ++-- bootstrap.min.css | 2 +- docs/scaffolding.html | 6 +++--- lib/navbar.less | 2 +- 4 files changed, 7 insertions(+), 7 deletions(-) diff --git a/bootstrap.css b/bootstrap.css index 5eb8a4a7ce..e55d6d5440 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 Jan 8 01:50:02 PST 2012 + * Date: Sun Jan 8 01:54:42 PST 2012 */ html, body { margin: 0; @@ -1600,7 +1600,7 @@ i { -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); } -.navbar .brand:hover, .navbar ul .active > a { +.navbar .brand:hover, .navbar .nav .active > a { color: #ffffff; text-decoration: none; background-color: #333333; diff --git a/bootstrap.min.css b/bootstrap.min.css index 33e4f7f809..20c8f65397 100644 --- a/bootstrap.min.css +++ b/bootstrap.min.css @@ -315,7 +315,7 @@ i{background-image:url(docs/assets/img/glyphicons-halflings-sprite.png);backgrou .close{float:right;font-size:20px;font-weight:bold;line-height:13.5px;color:#000000;text-shadow:0 1px 0 #ffffff;filter:alpha(opacity=20);-moz-opacity:0.2;opacity:0.2;}.close:hover{color:#000000;text-decoration:none;filter:alpha(opacity=40);-moz-opacity:0.4;opacity:0.4;} .navbar{overflow:visible;} .navbar-inner{background-color:#222222;background-color:#222222;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);background-repeat:repeat-x;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);} -.navbar .brand:hover,.navbar ul .active>a{color:#ffffff;text-decoration:none;background-color:#333333;background-color:rgba(255, 255, 255, 0.05);} +.navbar .brand:hover,.navbar .nav .active>a{color:#ffffff;text-decoration:none;background-color:#333333;background-color:rgba(255, 255, 255, 0.05);} .navbar .brand{float:left;display:block;padding:8px 20px 12px;margin-left:-20px;font-size:20px;font-weight:200;line-height:1;color:#ffffff;} .navbar p{margin:0;line-height:40px;}.navbar p a:hover{color:#ffffff;background-color:transparent;} .navbar .btn{margin-top:5px;} diff --git a/docs/scaffolding.html b/docs/scaffolding.html index bf42d44687..10e5a43be0 100644 --- a/docs/scaffolding.html +++ b/docs/scaffolding.html @@ -243,11 +243,11 @@ </div> <pre class="prettyprint linenums"> <body> - <div class="fluid-container"> - <div class="sidebar"> + <div class="fluid-container sidebar-left"> + <div class="fluid-sidebar"> ... </div> - <div class="content"> + <div class="fluid-content"> ... </div> </div> diff --git a/lib/navbar.less b/lib/navbar.less index 8ee203307f..70be434ba6 100644 --- a/lib/navbar.less +++ b/lib/navbar.less @@ -21,7 +21,7 @@ .navbar { // Hover and active states .brand:hover, - ul .active > a { + .nav .active > a { color: @white; text-decoration: none; background-color: @navBarBgStart; -- GitLab From 916761d56854ca4fcc8ea4afa68511fb26a93e4c Mon Sep 17 00:00:00 2001 From: Mark Otto <markdotto@gmail.com> Date: Sun, 8 Jan 2012 01:57:05 -0800 Subject: [PATCH 231/318] fix styles on right aligned blockquote to flip padding and border appropriately --- bootstrap.css | 6 +++++- bootstrap.min.css | 2 +- lib/type.less | 4 ++++ 3 files changed, 10 insertions(+), 2 deletions(-) diff --git a/bootstrap.css b/bootstrap.css index e55d6d5440..550f7fdcec 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 Jan 8 01:54:42 PST 2012 + * Date: Sun Jan 8 01:56:47 PST 2012 */ html, body { margin: 0; @@ -485,6 +485,10 @@ blockquote small:before { } blockquote.pull-right { float: right; + padding-left: 0; + padding-right: 15px; + border-left: 0; + border-right: 5px solid #eee; } blockquote.pull-right p, blockquote.pull-right small { text-align: right; diff --git a/bootstrap.min.css b/bootstrap.min.css index 20c8f65397..af321d3142 100644 --- a/bootstrap.min.css +++ b/bootstrap.min.css @@ -87,7 +87,7 @@ em{font-style:italic;font-weight:inherit;line-height:inherit;} abbr{font-size:90%;text-transform:uppercase;border-bottom:1px dotted #ddd;cursor:help;} blockquote{padding-left:15px;margin-bottom:18px;border-left:5px solid #eee;}blockquote p{margin-bottom:0;font-size:300;font-weight:16px;line-height:22.5px;} blockquote small{display:block;line-height:18px;color:#999999;}blockquote small:before{content:'\2014 \00A0';} -blockquote.pull-right{float:right;}blockquote.pull-right p,blockquote.pull-right small{text-align:right;} +blockquote.pull-right{float:right;padding-left:0;padding-right:15px;border-left:0;border-right:5px solid #eee;}blockquote.pull-right p,blockquote.pull-right small{text-align:right;} address{display:block;margin-bottom:18px;line-height:18px;} code,pre{padding:0 3px 2px;font-family:Menlo,Monaco,"Courier New",monospace;font-size:12px;color:#333333;-webkit-border-radius:3px;-moz-border-radius:3px;border-radius:3px;} code{padding:1px 3px;background-color:#fee9cc;} diff --git a/lib/type.less b/lib/type.less index 7e2c4a7a86..84130f3fa1 100644 --- a/lib/type.less +++ b/lib/type.less @@ -165,6 +165,10 @@ blockquote { // Float right with text-align: right &.pull-right { float: right; + padding-left: 0; + padding-right: 15px; + border-left: 0; + border-right: 5px solid #eee; p, small { text-align: right; -- GitLab From 0bbb64be4dc7a168534e5a18f3a493002ed31293 Mon Sep 17 00:00:00 2001 From: Jacob Thornton <jacobthornton@gmail.com> Date: Sun, 8 Jan 2012 02:04:23 -0800 Subject: [PATCH 232/318] add nav class to tabs in javascript demo --- docs/javascript.html | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/docs/javascript.html b/docs/javascript.html index 8056d7fc5c..ff2f8c0b91 100644 --- a/docs/javascript.html +++ b/docs/javascript.html @@ -479,7 +479,8 @@ $('a[data-toggle="tab"]').on('shown', function (e) { e.relatedTarget // previous tab })</pre> <h3>Demo</h3> - <ul id="tab" class="tabs"> + + <ul id="tab" class="nav tabs"> <li class="active"><a href="#home" data-toggle="tab">Home</a></li> <li><a href="#profile" data-toggle="tab">Profile</a></li> <li><a href="#messages" data-toggle="tab">Messages</a></li> -- GitLab From cf05dc86774ea05aa0f40aff771538e6e2f405d2 Mon Sep 17 00:00:00 2001 From: Mark Otto <markdotto@gmail.com> Date: Sun, 8 Jan 2012 02:15:47 -0800 Subject: [PATCH 233/318] adjust navs for fine details on dropdowns in stacked nav and improved open state there --- bootstrap.css | 17 ++++++++++++----- bootstrap.min.css | 10 ++++++---- lib/navs.less | 22 ++++++++++++++-------- 3 files changed, 32 insertions(+), 17 deletions(-) diff --git a/bootstrap.css b/bootstrap.css index 550f7fdcec..e60baa663b 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 Jan 8 01:56:47 PST 2012 + * Date: Sun Jan 8 02:15:22 PST 2012 */ html, body { margin: 0; @@ -1925,7 +1925,7 @@ i { .pills.stacked > li:last-child > a { margin-bottom: 1px; } -.tabs .dropdown-menu, .pills .dropdown-menu { +.nav .dropdown-menu { top: 33px; border-width: 1px; } @@ -1934,19 +1934,26 @@ i { -moz-border-radius: 4px; border-radius: 4px; } -.tabs .dropdown-toggle .caret, .pills .dropdown-toggle .caret { +.nav .dropdown-toggle .caret { + border-top-color: #0088cc; margin-top: 6px; } -.tabs .open .dropdown-toggle, .pills .open .dropdown-toggle { +.nav .dropdown-toggle:hover .caret { + border-top-color: #005580; +} +.nav .open .dropdown-toggle { background-color: #999; border-color: #999; } -.tabs .open .caret, .pills .open .caret { +.nav .open .caret, .nav .open a:hover .caret { border-top-color: #fff; filter: alpha(opacity=100); -moz-opacity: 1; opacity: 1; } +.tabs.stacked .open > a:hover { + border-color: #999; +} .tabbable { zoom: 1; } diff --git a/bootstrap.min.css b/bootstrap.min.css index af321d3142..a4352cf92a 100644 --- a/bootstrap.min.css +++ b/bootstrap.min.css @@ -368,11 +368,13 @@ i{background-image:url(docs/assets/img/glyphicons-halflings-sprite.png);backgrou .tabs.stacked>li>a:hover{border-color:#ddd;z-index:2;} .pills.stacked>li>a{margin-bottom:3px;} .pills.stacked>li:last-child>a{margin-bottom:1px;} -.tabs .dropdown-menu,.pills .dropdown-menu{top:33px;border-width:1px;} +.nav .dropdown-menu{top:33px;border-width:1px;} .pills .dropdown-menu{-webkit-border-radius:4px;-moz-border-radius:4px;border-radius:4px;} -.tabs .dropdown-toggle .caret,.pills .dropdown-toggle .caret{margin-top:6px;} -.tabs .open .dropdown-toggle,.pills .open .dropdown-toggle{background-color:#999;border-color:#999;} -.tabs .open .caret,.pills .open .caret{border-top-color:#fff;filter:alpha(opacity=100);-moz-opacity:1;opacity:1;} +.nav .dropdown-toggle .caret{border-top-color:#0088cc;margin-top:6px;} +.nav .dropdown-toggle:hover .caret{border-top-color:#005580;} +.nav .open .dropdown-toggle{background-color:#999;border-color:#999;} +.nav .open .caret,.nav .open a:hover .caret{border-top-color:#fff;filter:alpha(opacity=100);-moz-opacity:1;opacity:1;} +.tabs.stacked .open>a:hover{border-color:#999;} .tabbable{zoom:1;}.tabbable:before,.tabbable:after{display:table;*display:inline;content:"";zoom:1;} .tabbable:after{clear:both;} .tabs-below .tabs,.tabs-right .tabs,.tabs-left .tabs{border-bottom:0;} diff --git a/lib/navs.less b/lib/navs.less index 743d772f37..dee482aea2 100644 --- a/lib/navs.less +++ b/lib/navs.less @@ -175,29 +175,35 @@ // --------- // Position the menu -.tabs .dropdown-menu, -.pills .dropdown-menu { +.nav .dropdown-menu { top: 33px; border-width: 1px; } .pills .dropdown-menu { .border-radius(4px); } -.tabs .dropdown-toggle .caret, -.pills .dropdown-toggle .caret { +.nav .dropdown-toggle .caret { + border-top-color: @linkColor; margin-top: 6px; } -.tabs .open .dropdown-toggle, -.pills .open .dropdown-toggle { +.nav .dropdown-toggle:hover .caret { + border-top-color: @linkColorHover; +} +.nav .open .dropdown-toggle { background-color: #999; border-color: #999; } -.tabs .open .caret, -.pills .open .caret { +.nav .open .caret, +.nav .open a:hover .caret { border-top-color: #fff; .opacity(100); } +// Dropdowns in stacked tabs +.tabs.stacked .open > a:hover { + border-color: #999; +} + // TABBABLE -- GitLab From 9e7acc637057292205906edc99fb23a49c937afa Mon Sep 17 00:00:00 2001 From: Mark Otto <markdotto@gmail.com> Date: Sun, 8 Jan 2012 02:30:18 -0800 Subject: [PATCH 234/318] fix responsive navbar nav treatment by using hover instead of click --- bootstrap.css | 26 +++++++----- bootstrap.min.css | 2 +- lib/navbar.less | 2 +- lib/responsive.less | 100 ++++++++++++++++++++++++-------------------- 4 files changed, 73 insertions(+), 57 deletions(-) diff --git a/bootstrap.css b/bootstrap.css index e60baa663b..57acf87757 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 Jan 8 02:15:22 PST 2012 + * Date: Sun Jan 8 02:30:05 PST 2012 */ html, body { margin: 0; @@ -3054,7 +3054,7 @@ a.thumbnail:hover { width: auto; margin: 0; } - .nav { + .navbar .nav { position: absolute; top: 0; left: 0; @@ -3062,29 +3062,32 @@ a.thumbnail:hover { padding-top: 40px; list-style: none; } - .nav, .nav > li:last-child a { + .navbar .nav, .navbar .nav > li:last-child a { -webkit-border-radius: 0 0 4px 0; -moz-border-radius: 0 0 4px 0; border-radius: 0 0 4px 0; } - .nav > li { + .navbar .nav > li { float: none; display: none; } - .nav > li > a { + .navbar .nav > li > a { float: none; background-color: #222; } - .nav > .active { + .navbar .nav > .active { display: block; position: absolute; top: 0; left: 0; } - .navbar ul .active > a { + .navbar .nav > .active > a { background-color: transparent; } - .nav > .active a:after { + .navbar .nav > .active > a:hover { + background-color: #333; + } + .navbar .nav > .active > a:after { display: inline-block; width: 0; height: 0; @@ -3100,8 +3103,11 @@ a.thumbnail:hover { opacity: 1; content: "↓"; } - .nav > .active a:hover { - background-color: rgba(255, 255, 255, 0.05); + .navbar .nav:hover > li { + display: block; + } + .navbar .nav:hover > li > a:hover { + background-color: #333; } } @media (min-width: 768px) and (max-width: 940px) { diff --git a/bootstrap.min.css b/bootstrap.min.css index a4352cf92a..916a6b27b5 100644 --- a/bootstrap.min.css +++ b/bootstrap.min.css @@ -513,4 +513,4 @@ a.thumbnail:hover{border-color:#0088cc;-webkit-box-shadow:0 1px 4px rgba(0, 105, .progress.info .bar{background-color:#339bb9;background-image:-khtml-gradient(linear, left top, left bottom, from(#5bc0de), to(#339bb9));background-image:-moz-linear-gradient(top, #5bc0de, #339bb9);background-image:-ms-linear-gradient(top, #5bc0de, #339bb9);background-image:-webkit-gradient(linear, left top, left bottom, color-stop(0%, #5bc0de), color-stop(100%, #339bb9));background-image:-webkit-linear-gradient(top, #5bc0de, #339bb9);background-image:-o-linear-gradient(top, #5bc0de, #339bb9);background-image:linear-gradient(top, #5bc0de, #339bb9);background-repeat:repeat-x;filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#5bc0de', endColorstr='#339bb9', GradientType=0);} .progress.info.striped .bar{background-color:#5bc0de;background-image:-webkit-gradient(linear, 0 100%, 100% 0, color-stop(0.25, rgba(255, 255, 255, 0.15)), color-stop(0.25, transparent), color-stop(0.5, transparent), color-stop(0.5, rgba(255, 255, 255, 0.15)), color-stop(0.75, rgba(255, 255, 255, 0.15)), color-stop(0.75, transparent), to(transparent));background-image:-webkit-linear-gradient(-45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);background-image:-moz-linear-gradient(-45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);background-image:-ms-linear-gradient(-45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);background-image:-o-linear-gradient(-45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);background-image:linear-gradient(-45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);} .hidden{display:none;visibility:hidden;} -@media (max-width: 480px){.modal{width:auto;margin:0;}.modal.fade.in{top:auto;} .horizontal-form .control-group>label{float:none;width:auto;padding-top:0;text-align:left;} .horizontal-form .controls{margin-left:0;} .horizontal-form .control-list{padding-top:0;} .horizontal-form .form-actions{padding-left:0;} .modal{position:fixed;top:20px;left:20px;right:20px;width:auto;}.modal .close{padding:10px;}}@media (max-width: 768px){.container{width:auto;padding:0 20px;} .row{margin-left:0;} .row>[class*="span"]{float:none;display:block;width:auto;margin:0;} .nav{position:absolute;top:0;left:0;width:180px;padding-top:40px;list-style:none;} .nav,.nav>li:last-child a{-webkit-border-radius:0 0 4px 0;-moz-border-radius:0 0 4px 0;border-radius:0 0 4px 0;} .nav>li{float:none;display:none;} .nav>li>a{float:none;background-color:#222;} .nav>.active{display:block;position:absolute;top:0;left:0;} .navbar ul .active>a{background-color:transparent;} .nav>.active a:after{display:inline-block;width:0;height:0;margin-top:8px;margin-left:6px;text-indent:-99999px;vertical-align:top;border-left:4px solid transparent;border-right:4px solid transparent;border-top:4px solid #ffffff;filter:alpha(opacity=100);-moz-opacity:1;opacity:1;content:"↓";} .nav>.active a:hover{background-color:rgba(255, 255, 255, 0.05);}}@media (min-width: 768px) and (max-width: 940px){.container{width:748px;} .span1{width:44px;} .span2{width:108px;} .span3{width:172px;} .span4{width:236px;} .span5{width:300px;} .span6{width:364px;} .span7{width:428px;} .span8{width:492px;} .span9{width:556px;} .span10{width:620px;} .span11{width:684px;} .span12{width:748px;} .offset1{margin-left:64px;} .offset2{margin-left:128px;} .offset3{margin-left:192px;} .offset4{margin-left:256px;} .offset5{margin-left:320px;} .offset6{margin-left:384px;} .offset7{margin-left:448px;} .offset8{margin-left:512px;} .offset9{margin-left:576px;} .offset10{margin-left:640px;} .offset11{margin-left:704px;} .offset12{margin-left:768px;}} +@media (max-width: 480px){.modal{width:auto;margin:0;}.modal.fade.in{top:auto;} .horizontal-form .control-group>label{float:none;width:auto;padding-top:0;text-align:left;} .horizontal-form .controls{margin-left:0;} .horizontal-form .control-list{padding-top:0;} .horizontal-form .form-actions{padding-left:0;} .modal{position:fixed;top:20px;left:20px;right:20px;width:auto;}.modal .close{padding:10px;}}@media (max-width: 768px){.container{width:auto;padding:0 20px;} .row{margin-left:0;} .row>[class*="span"]{float:none;display:block;width:auto;margin:0;} .navbar .nav{position:absolute;top:0;left:0;width:180px;padding-top:40px;list-style:none;} .navbar .nav,.navbar .nav>li:last-child a{-webkit-border-radius:0 0 4px 0;-moz-border-radius:0 0 4px 0;border-radius:0 0 4px 0;} .navbar .nav>li{float:none;display:none;} .navbar .nav>li>a{float:none;background-color:#222;} .navbar .nav>.active{display:block;position:absolute;top:0;left:0;} .navbar .nav>.active>a{background-color:transparent;} .navbar .nav>.active>a:hover{background-color:#333;} .navbar .nav>.active>a:after{display:inline-block;width:0;height:0;margin-top:8px;margin-left:6px;text-indent:-99999px;vertical-align:top;border-left:4px solid transparent;border-right:4px solid transparent;border-top:4px solid #ffffff;filter:alpha(opacity=100);-moz-opacity:1;opacity:1;content:"↓";} .navbar .nav:hover>li{display:block;} .navbar .nav:hover>li>a:hover{background-color:#333;}}@media (min-width: 768px) and (max-width: 940px){.container{width:748px;} .span1{width:44px;} .span2{width:108px;} .span3{width:172px;} .span4{width:236px;} .span5{width:300px;} .span6{width:364px;} .span7{width:428px;} .span8{width:492px;} .span9{width:556px;} .span10{width:620px;} .span11{width:684px;} .span12{width:748px;} .offset1{margin-left:64px;} .offset2{margin-left:128px;} .offset3{margin-left:192px;} .offset4{margin-left:256px;} .offset5{margin-left:320px;} .offset6{margin-left:384px;} .offset7{margin-left:448px;} .offset8{margin-left:512px;} .offset9{margin-left:576px;} .offset10{margin-left:640px;} .offset11{margin-left:704px;} .offset12{margin-left:768px;}} diff --git a/lib/navbar.less b/lib/navbar.less index 70be434ba6..dbad9dcd86 100644 --- a/lib/navbar.less +++ b/lib/navbar.less @@ -10,7 +10,7 @@ .navbar { overflow: visible; } -// gradient is applied to it's own element because overflow visible is not honored by ie when filter is present +// gradient is applied to it's own element because overflow visible is not honored by IE when filter is present .navbar-inner { background-color: @navBarBgEnd; #gradient > .vertical(@navBarBgStart, @navBarBgEnd); diff --git a/lib/responsive.less b/lib/responsive.less index 7856121be1..9f8f9ec6ca 100644 --- a/lib/responsive.less +++ b/lib/responsive.less @@ -81,52 +81,62 @@ } // Make the nav work for small devices - .nav { - position: absolute; - top: 0; - left: 0; - width: 180px; - padding-top: 40px; - list-style: none; - } - .nav, - .nav > li:last-child a { - .border-radius(0 0 4px 0); - } - .nav > li { - float: none; - display: none; - } - .nav > li > a { - float: none; - background-color: #222; - } - .nav > .active { - display: block; - position: absolute; - top: 0; - left: 0; - } - .navbar ul .active > a { - background-color: transparent; - } - .nav > .active a:after { - display: inline-block; - width: 0; - height: 0; - margin-top: 8px; - margin-left: 6px; - text-indent: -99999px; - vertical-align: top; - border-left: 4px solid transparent; - border-right: 4px solid transparent; - border-top: 4px solid @white; - .opacity(100); - content: "↓"; - } - .nav > .active a:hover { - background-color: rgba(255,255,255,.05); + .navbar { + .nav { + position: absolute; + top: 0; + left: 0; + width: 180px; + padding-top: 40px; + list-style: none; + } + .nav, + .nav > li:last-child a { + .border-radius(0 0 4px 0); + } + .nav > li { + float: none; + display: none; + } + .nav > li > a { + float: none; + background-color: #222; + } + .nav > .active { + display: block; + position: absolute; + top: 0; + left: 0; + } + .nav > .active > a { + background-color: transparent; + } + .nav > .active > a:hover { + background-color: #333; + } + .nav > .active > a:after { + display: inline-block; + width: 0; + height: 0; + margin-top: 8px; + margin-left: 6px; + text-indent: -99999px; + vertical-align: top; + border-left: 4px solid transparent; + border-right: 4px solid transparent; + border-top: 4px solid @white; + .opacity(100); + content: "↓"; + } + + .nav:hover > li { + display: block; + } + .nav:hover > li > a:hover { + background-color: #333; + } } + } -- GitLab From b14426c176689c314a339eaaec389c015e3d33ec Mon Sep 17 00:00:00 2001 From: Purwandi <free6300@gmail.com> Date: Sun, 8 Jan 2012 17:44:19 +0700 Subject: [PATCH 235/318] Added example sidebar navigation with icon in docs --- docs/base-css.html | 11 ++++++----- docs/components.html | 30 +++++++++++++++++++++++++++++- 2 files changed, 35 insertions(+), 6 deletions(-) diff --git a/docs/base-css.html b/docs/base-css.html index c1cb3fd2dd..d764268b46 100644 --- a/docs/base-css.html +++ b/docs/base-css.html @@ -1602,11 +1602,12 @@ </div> <div class="span3"> <p>Or, use them in navigation.</p> - <div class="well side-nav"> - <ul class="nav-group"> - <li class="active"><a class="nav-item" href="#"><i class="home"></i> Home</a></li> - <li><a class="nav-item" href="#"><i class="book"></i> Library</a></li> - <li><a class="nav-item" href="#"><i class="cog"></i> Settings</a></li> + <div class="well" style="padding: 8px 0;"> + <ul class="nav list"> + <li class="nav-header">List header</li> + <li class="active"><a href="#"><i class="home"></i> Home</a></li> + <li><a href="#"><i class="download"></i> Downloads</a></li> + <li><a href="#"><i class="film"></i> Movies</a></li> </ul> </div> </div> diff --git a/docs/components.html b/docs/components.html index bd8753401a..560d5b566b 100644 --- a/docs/components.html +++ b/docs/components.html @@ -256,7 +256,35 @@ </pre> </div> </div> - + <div class="row"> + <div class="span4"> + <h3>Sidebar navigation with icon</h3> + <div class="well" style="padding: 8px 0;"> + <ul class="nav list"> + <li class="nav-header">List header</li> + <li class="active"><a href="#"><i class="home"></i> Home</a></li> + <li><a href="#"><i class="download"></i> Downloads</a></li> + <li><a href="#"><i class="film"></i> Movies</a></li> + <li><a href="#"><i class="picture"></i> Picture</a></li> + <li class="nav-header">Another list header</li> + <li><a href="#"><i class="user"></i> Profile</a></li> + <li><a href="#"><i class="asterisk"></i> Settings</a></li> + </ul> + </div> <!-- /well --> + </div> + <div class="span8"> + <h3>Simple markup</h3> +<pre class="prettyprint linenums"> +<ul class="nav list"> + <li class="nav-header">List header</li> + <li class="active"><a href="#"><i class="home"></i> Home</a></li> + <li><a href="#"><i class="download"></i> Downloads</a></li> + <li><a href="#"><i class="film"></i> Movies</a></li> + ... +</ul> +</pre> + </div> + </div> <h2>Tabbable nav <small>Bring tabs to life via javascript</small></h2> <div class="row"> -- GitLab From b7acbd8476060bc1f2da9837693b0b86b68423c5 Mon Sep 17 00:00:00 2001 From: Mark Otto <markdotto@gmail.com> Date: Sun, 8 Jan 2012 03:00:06 -0800 Subject: [PATCH 236/318] move collapsing navbar nav to 480 and below, unfloat nav for 768 and below to wrap links with position absolute --- bootstrap.css | 102 +++++++++++++++++++----------------- bootstrap.min.css | 2 +- lib/responsive.less | 124 ++++++++++++++++++++++++-------------------- 3 files changed, 122 insertions(+), 106 deletions(-) diff --git a/bootstrap.css b/bootstrap.css index 57acf87757..a9a104ccce 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 Jan 8 02:30:05 PST 2012 + * Date: Sun Jan 8 02:58:37 PST 2012 */ html, body { margin: 0; @@ -3007,53 +3007,6 @@ a.thumbnail:hover { visibility: hidden; } @media (max-width: 480px) { - .modal { - width: auto; - margin: 0; - } - .modal.fade.in { - top: auto; - } - .horizontal-form .control-group > label { - float: none; - width: auto; - padding-top: 0; - text-align: left; - } - .horizontal-form .controls { - margin-left: 0; - } - .horizontal-form .control-list { - padding-top: 0; - } - .horizontal-form .form-actions { - padding-left: 0; - } - .modal { - position: fixed; - top: 20px; - left: 20px; - right: 20px; - width: auto; - } - .modal .close { - padding: 10px; - } -} -@media (max-width: 768px) { - .container { - width: auto; - padding: 0 20px; - } - .row { - margin-left: 0; - } - .row > [class*="span"] { - float: none; - display: block; - width: auto; - margin: 0; - } .navbar .nav { position: absolute; top: 0; @@ -3109,6 +3062,59 @@ a.thumbnail:hover { .navbar .nav:hover > li > a:hover { background-color: #333; } + .modal { + width: auto; + margin: 0; + } + .modal.fade.in { + top: auto; + } + .horizontal-form .control-group > label { + float: none; + width: auto; + padding-top: 0; + text-align: left; + } + .horizontal-form .controls { + margin-left: 0; + } + .horizontal-form .control-list { + padding-top: 0; + } + .horizontal-form .form-actions { + padding-left: 0; + } + .modal { + position: fixed; + top: 20px; + left: 20px; + right: 20px; + width: auto; + } + .modal .close { + padding: 10px; + } +} +@media (max-width: 768px) { + .navbar-fixed { + position: absolute; + } + .navbar-fixed .nav { + float: none; + } + .container { + width: auto; + padding: 0 20px; + } + .row { + margin-left: 0; + } + .row > [class*="span"] { + float: none; + display: block; + width: auto; + margin: 0; + } } @media (min-width: 768px) and (max-width: 940px) { .container { diff --git a/bootstrap.min.css b/bootstrap.min.css index 916a6b27b5..0159780a6c 100644 --- a/bootstrap.min.css +++ b/bootstrap.min.css @@ -513,4 +513,4 @@ a.thumbnail:hover{border-color:#0088cc;-webkit-box-shadow:0 1px 4px rgba(0, 105, .progress.info .bar{background-color:#339bb9;background-image:-khtml-gradient(linear, left top, left bottom, from(#5bc0de), to(#339bb9));background-image:-moz-linear-gradient(top, #5bc0de, #339bb9);background-image:-ms-linear-gradient(top, #5bc0de, #339bb9);background-image:-webkit-gradient(linear, left top, left bottom, color-stop(0%, #5bc0de), color-stop(100%, #339bb9));background-image:-webkit-linear-gradient(top, #5bc0de, #339bb9);background-image:-o-linear-gradient(top, #5bc0de, #339bb9);background-image:linear-gradient(top, #5bc0de, #339bb9);background-repeat:repeat-x;filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#5bc0de', endColorstr='#339bb9', GradientType=0);} .progress.info.striped .bar{background-color:#5bc0de;background-image:-webkit-gradient(linear, 0 100%, 100% 0, color-stop(0.25, rgba(255, 255, 255, 0.15)), color-stop(0.25, transparent), color-stop(0.5, transparent), color-stop(0.5, rgba(255, 255, 255, 0.15)), color-stop(0.75, rgba(255, 255, 255, 0.15)), color-stop(0.75, transparent), to(transparent));background-image:-webkit-linear-gradient(-45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);background-image:-moz-linear-gradient(-45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);background-image:-ms-linear-gradient(-45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);background-image:-o-linear-gradient(-45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);background-image:linear-gradient(-45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);} .hidden{display:none;visibility:hidden;} -@media (max-width: 480px){.modal{width:auto;margin:0;}.modal.fade.in{top:auto;} .horizontal-form .control-group>label{float:none;width:auto;padding-top:0;text-align:left;} .horizontal-form .controls{margin-left:0;} .horizontal-form .control-list{padding-top:0;} .horizontal-form .form-actions{padding-left:0;} .modal{position:fixed;top:20px;left:20px;right:20px;width:auto;}.modal .close{padding:10px;}}@media (max-width: 768px){.container{width:auto;padding:0 20px;} .row{margin-left:0;} .row>[class*="span"]{float:none;display:block;width:auto;margin:0;} .navbar .nav{position:absolute;top:0;left:0;width:180px;padding-top:40px;list-style:none;} .navbar .nav,.navbar .nav>li:last-child a{-webkit-border-radius:0 0 4px 0;-moz-border-radius:0 0 4px 0;border-radius:0 0 4px 0;} .navbar .nav>li{float:none;display:none;} .navbar .nav>li>a{float:none;background-color:#222;} .navbar .nav>.active{display:block;position:absolute;top:0;left:0;} .navbar .nav>.active>a{background-color:transparent;} .navbar .nav>.active>a:hover{background-color:#333;} .navbar .nav>.active>a:after{display:inline-block;width:0;height:0;margin-top:8px;margin-left:6px;text-indent:-99999px;vertical-align:top;border-left:4px solid transparent;border-right:4px solid transparent;border-top:4px solid #ffffff;filter:alpha(opacity=100);-moz-opacity:1;opacity:1;content:"↓";} .navbar .nav:hover>li{display:block;} .navbar .nav:hover>li>a:hover{background-color:#333;}}@media (min-width: 768px) and (max-width: 940px){.container{width:748px;} .span1{width:44px;} .span2{width:108px;} .span3{width:172px;} .span4{width:236px;} .span5{width:300px;} .span6{width:364px;} .span7{width:428px;} .span8{width:492px;} .span9{width:556px;} .span10{width:620px;} .span11{width:684px;} .span12{width:748px;} .offset1{margin-left:64px;} .offset2{margin-left:128px;} .offset3{margin-left:192px;} .offset4{margin-left:256px;} .offset5{margin-left:320px;} .offset6{margin-left:384px;} .offset7{margin-left:448px;} .offset8{margin-left:512px;} .offset9{margin-left:576px;} .offset10{margin-left:640px;} .offset11{margin-left:704px;} .offset12{margin-left:768px;}} +@media (max-width: 480px){.navbar .nav{position:absolute;top:0;left:0;width:180px;padding-top:40px;list-style:none;} .navbar .nav,.navbar .nav>li:last-child a{-webkit-border-radius:0 0 4px 0;-moz-border-radius:0 0 4px 0;border-radius:0 0 4px 0;} .navbar .nav>li{float:none;display:none;} .navbar .nav>li>a{float:none;background-color:#222;} .navbar .nav>.active{display:block;position:absolute;top:0;left:0;} .navbar .nav>.active>a{background-color:transparent;} .navbar .nav>.active>a:hover{background-color:#333;} .navbar .nav>.active>a:after{display:inline-block;width:0;height:0;margin-top:8px;margin-left:6px;text-indent:-99999px;vertical-align:top;border-left:4px solid transparent;border-right:4px solid transparent;border-top:4px solid #ffffff;filter:alpha(opacity=100);-moz-opacity:1;opacity:1;content:"↓";} .navbar .nav:hover>li{display:block;} .navbar .nav:hover>li>a:hover{background-color:#333;} .modal{width:auto;margin:0;}.modal.fade.in{top:auto;} .horizontal-form .control-group>label{float:none;width:auto;padding-top:0;text-align:left;} .horizontal-form .controls{margin-left:0;} .horizontal-form .control-list{padding-top:0;} .horizontal-form .form-actions{padding-left:0;} .modal{position:fixed;top:20px;left:20px;right:20px;width:auto;}.modal .close{padding:10px;}}@media (max-width: 768px){.navbar-fixed{position:absolute;} .navbar-fixed .nav{float:none;} .container{width:auto;padding:0 20px;} .row{margin-left:0;} .row>[class*="span"]{float:none;display:block;width:auto;margin:0;}}@media (min-width: 768px) and (max-width: 940px){.container{width:748px;} .span1{width:44px;} .span2{width:108px;} .span3{width:172px;} .span4{width:236px;} .span5{width:300px;} .span6{width:364px;} .span7{width:428px;} .span8{width:492px;} .span9{width:556px;} .span10{width:620px;} .span11{width:684px;} .span12{width:748px;} .offset1{margin-left:64px;} .offset2{margin-left:128px;} .offset3{margin-left:192px;} .offset4{margin-left:256px;} .offset5{margin-left:320px;} .offset6{margin-left:384px;} .offset7{margin-left:448px;} .offset8{margin-left:512px;} .offset9{margin-left:576px;} .offset10{margin-left:640px;} .offset11{margin-left:704px;} .offset12{margin-left:768px;}} diff --git a/lib/responsive.less b/lib/responsive.less index 9f8f9ec6ca..e87b8495f4 100644 --- a/lib/responsive.less +++ b/lib/responsive.less @@ -18,6 +18,64 @@ // --------------------- @media (max-width: 480px) { + + // Make the nav work for small devices + .navbar { + .nav { + position: absolute; + top: 0; + left: 0; + width: 180px; + padding-top: 40px; + list-style: none; + } + .nav, + .nav > li:last-child a { + .border-radius(0 0 4px 0); + } + .nav > li { + float: none; + display: none; + } + .nav > li > a { + float: none; + background-color: #222; + } + .nav > .active { + display: block; + position: absolute; + top: 0; + left: 0; + } + .nav > .active > a { + background-color: transparent; + } + .nav > .active > a:hover { + background-color: #333; + } + .nav > .active > a:after { + display: inline-block; + width: 0; + height: 0; + margin-top: 8px; + margin-left: 6px; + text-indent: -99999px; + vertical-align: top; + border-left: 4px solid transparent; + border-right: 4px solid transparent; + border-top: 4px solid @white; + .opacity(100); + content: "↓"; + } + + .nav:hover > li { + display: block; + } + .nav:hover > li > a:hover { + background-color: #333; + } + } + // Resize modals .modal { width: auto; @@ -63,6 +121,15 @@ // -------------------------------------------------- @media (max-width: 768px) { + + // Unfix the navbar + .navbar-fixed { + position: absolute; + } + .navbar-fixed .nav { + float: none; + } + // Remove width from containers .container { width: auto; @@ -80,63 +147,6 @@ margin: 0; } - // Make the nav work for small devices - .navbar { - .nav { - position: absolute; - top: 0; - left: 0; - width: 180px; - padding-top: 40px; - list-style: none; - } - .nav, - .nav > li:last-child a { - .border-radius(0 0 4px 0); - } - .nav > li { - float: none; - display: none; - } - .nav > li > a { - float: none; - background-color: #222; - } - .nav > .active { - display: block; - position: absolute; - top: 0; - left: 0; - } - .nav > .active > a { - background-color: transparent; - } - .nav > .active > a:hover { - background-color: #333; - } - .nav > .active > a:after { - display: inline-block; - width: 0; - height: 0; - margin-top: 8px; - margin-left: 6px; - text-indent: -99999px; - vertical-align: top; - border-left: 4px solid transparent; - border-right: 4px solid transparent; - border-top: 4px solid @white; - .opacity(100); - content: "↓"; - } - - .nav:hover > li { - display: block; - } - .nav:hover > li > a:hover { - background-color: #333; - } - } - } -- GitLab From 2376da40fb020289bcec4d2fe49ca2dc6f4eae97 Mon Sep 17 00:00:00 2001 From: Mark Otto <markdotto@gmail.com> Date: Sun, 8 Jan 2012 03:11:51 -0800 Subject: [PATCH 237/318] cleanup organization of tabbable nav section --- docs/components.html | 53 +++++++++++--------------------------------- 1 file changed, 13 insertions(+), 40 deletions(-) diff --git a/docs/components.html b/docs/components.html index bd8753401a..3208e2390e 100644 --- a/docs/components.html +++ b/docs/components.html @@ -262,23 +262,13 @@ <div class="row"> <div class="span4"> <h3>What's included</h3> - <p>Bring your tabs to life with a simple plugin to toggle between content via tabs. Bootstrap integrates tabbable tabs in four styles:</p> - <ul> - <li>top (default)</li> - <li>right</li> - <li>bottom</li> - <li>left</li> - </ul> + <p>Bring your tabs to life with a simple plugin to toggle between content via tabs. Bootstrap integrates tabbable tabs in four styles: top (default), right, bottom, and left.</p> <p>Changing between them is easy and only requires changing very little markup.</p> - <hr> - <h3>Custom jQuery plugin</h3> - <p>All tabbable tabs are powered by our lightweight jQuery plugin. Read more about how to bring tabbable tabs to life on the javascript docs page.</p> - <p><a class="btn" href="./javascript.html/#tabs">Get the javascript →</a></p> </div> - <div class="span8"> + <div class="span4"> <h3>Tabbable example</h3> <p>To make tabs tabbable, wrap the <code>.tabs</code> in another div with class <code>.tabbable</code>.</p> - <div class="tabbable"> + <div class="tabbable" style="margin-bottom: 9px;"> <ul class="nav tabs"> <li class="active"><a href="#1" data-toggle="tab">Section 1</a></li> <li><a href="#2" data-toggle="tab">Section 2</a></li> @@ -296,9 +286,16 @@ </div> </div> </div> <!-- /tabbable --> - <hr> - <h3>Straightforward markup</h3> - <p>Using tabbable tabs requires a wrapping div, a set of tabs, and a set of tabbable panes of content.</p> + </div> + <div class="span4"> + <h3>Custom jQuery plugin</h3> + <p>All tabbable tabs are powered by our lightweight jQuery plugin. Read more about how to bring tabbable tabs to life on the javascript docs page.</p> + <p><a class="btn" href="./javascript.html/#tabs">Get the javascript →</a></p> + </div> + </div> + + <h3>Straightforward markup</h3> + <p>Using tabbable tabs requires a wrapping div, a set of tabs, and a set of tabbable panes of content.</p> <pre class="prettyprint linenums"> <div class="tabbable"> <ul class="nav tabs"> @@ -315,8 +312,6 @@ </div> </div> </pre> - </div> - </div> <h3>Tabbable in any direction</h3> <div class="row"> @@ -809,28 +804,6 @@ -<!-- Autocomplete -================================================== --> -<section id="autocomplete"> - <div class="page-header"> - <h1>Autocomplete <small></small></h1> - </div> - -</section> - - - -<!-- Carousel -================================================== --> -<section id="carousel"> - <div class="page-header"> - <h1>Carousel <small></small></h1> - </div> - -</section> - - - <!-- Alerts & Messages ================================================== --> <section id="alerts"> -- GitLab From 21eb2dac8a650ba13dabb41fd2d221ff918cdd30 Mon Sep 17 00:00:00 2001 From: Mark Otto <markdotto@gmail.com> Date: Sun, 8 Jan 2012 03:18:48 -0800 Subject: [PATCH 238/318] add icons in nav list example and markup --- docs/components.html | 36 ++++++++++++++++++++++++++++++++---- 1 file changed, 32 insertions(+), 4 deletions(-) diff --git a/docs/components.html b/docs/components.html index 3208e2390e..2a9d158461 100644 --- a/docs/components.html +++ b/docs/components.html @@ -222,9 +222,12 @@ <h3>Application-style navigation</h3> <p>Nav lists provide a simple and easy way to build groups of nav links with optional headers. They're best used in sidebars like the Finder in OS X.</p> <p>Structurally, they're built on the same core nav styles as tabs and pills, so usage and customization are straightforward.</p> + <h4>With icons</h4> + <p>Nav lists are also easy to equip with icons. Add the proper <code><i></code> tag with class and you're set.</p> </div> <div class="span4"> - <h3>Example sidebar navigation</h3> + <h3>Example nav list</h3> + <p>Take a list of links and add <code>class="nav list"</code>:</p> <div class="well" style="padding: 8px 0;"> <ul class="nav list"> <li class="nav-header">List header</li> @@ -237,9 +240,6 @@ <li><a href="#">Help</a></li> </ul> </div> <!-- /well --> - </div> - <div class="span4"> - <h3>Simple markup</h3> <pre class="prettyprint linenums"> <ul class="nav list"> <li class="nav-header"> @@ -253,6 +253,34 @@ </li> ... </ul> +</pre> + </div> + <div class="span4"> + <h3>Example with icons</h3> + <p>Same example, but with <code><i></code> tags for icons.</p> + <div class="well" style="padding: 8px 0;"> + <ul class="nav list"> + <li class="nav-header">List header</li> + <li class="active"><a href="#"><i class="home"></i> Home</a></li> + <li><a href="#"><i class="book"></i> Library</a></li> + <li><a href="#"><i class="pencil"></i> Applications</a></li> + <li class="nav-header">Another list header</li> + <li><a href="#"><i class="user"></i> Profile</a></li> + <li><a href="#"><i class="cog"></i> Settings</a></li> + <li><a href="#"><i class="flag"></i> Help</a></li> + </ul> + </div> <!-- /well --> +<pre class="prettyprint linenums"> +<ul class="nav list"> + ... + <li> + <a href="#"> + <i class="book"></i> + Library + </a> + </li> + ... +</ul> </pre> </div> </div> -- GitLab From f1cbd22b99c3fec54d18341c31cfb1c237db44f2 Mon Sep 17 00:00:00 2001 From: Jacob Thornton <jacobthornton@gmail.com> Date: Sun, 8 Jan 2012 11:23:51 -0800 Subject: [PATCH 239/318] fix buttons for firefox --- js/bootstrap-button.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/js/bootstrap-button.js b/js/bootstrap-button.js index 10a85835e6..cb0c45cdf1 100644 --- a/js/bootstrap-button.js +++ b/js/bootstrap-button.js @@ -91,7 +91,7 @@ $(function () { $('body').on('click.button.data-api', '[data-toggle^=button]', function ( e ) { - $(e.srcElement).button('toggle') + $(e.target).button('toggle') }) }) -- GitLab From d4ded76a8fbd35ac66663a6b54f7ab6f85bf0350 Mon Sep 17 00:00:00 2001 From: Jacob Thornton <jacobthornton@gmail.com> Date: Sun, 8 Jan 2012 11:33:55 -0800 Subject: [PATCH 240/318] get carousel working in firefox --- bootstrap.css | 142 ++------------------------------------------ bootstrap.min.css | 14 +---- lib/thumbnails.less | 2 + 3 files changed, 8 insertions(+), 150 deletions(-) diff --git a/bootstrap.css b/bootstrap.css index a9a104ccce..10612de2cf 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 Jan 8 02:58:37 PST 2012 + * Date: Sun Jan 8 11:32:00 PST 2012 */ html, body { margin: 0; @@ -2789,6 +2789,9 @@ a.thumbnail:hover { .carousel .active, .carousel .next, .carousel .prev { display: block; } +.carousel .active { + left: 0; +} .carousel .next, .carousel .prev { position: absolute; top: 0; @@ -2865,143 +2868,6 @@ a.thumbnail:hover { background-position: 40px 0; } } -@keyframes progress-bar-stripes { - from { - background-position: 0 0; - } - to { - background-position: 40px 0; - } -} -.progress, .progress .bar { - -webkit-border-radius: 4px; - -moz-border-radius: 4px; - border-radius: 4px; -} -.progress { - height: 18px; - margin-bottom: 18px; - background-color: #f9f9f9; - background-image: -khtml-gradient(linear, left top, left bottom, from(#f5f5f5), to(#f9f9f9)); - background-image: -moz-linear-gradient(top, #f5f5f5, #f9f9f9); - background-image: -ms-linear-gradient(top, #f5f5f5, #f9f9f9); - background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #f5f5f5), color-stop(100%, #f9f9f9)); - background-image: -webkit-linear-gradient(top, #f5f5f5, #f9f9f9); - background-image: -o-linear-gradient(top, #f5f5f5, #f9f9f9); - background-image: linear-gradient(top, #f5f5f5, #f9f9f9); - background-repeat: repeat-x; - filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#f5f5f5', endColorstr='#f9f9f9', GradientType=0); - -webkit-box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1); - -moz-box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1); - box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1); -} -.progress .bar { - width: 0%; - height: 18px; - margin: ; - background-color: #0480be; - background-image: -khtml-gradient(linear, left top, left bottom, from(#149bdf), to(#0480be)); - background-image: -moz-linear-gradient(top, #149bdf, #0480be); - background-image: -ms-linear-gradient(top, #149bdf, #0480be); - background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #149bdf), color-stop(100%, #0480be)); - background-image: -webkit-linear-gradient(top, #149bdf, #0480be); - background-image: -o-linear-gradient(top, #149bdf, #0480be); - background-image: linear-gradient(top, #149bdf, #0480be); - background-repeat: repeat-x; - filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#149bdf', endColorstr='#0480be', GradientType=0); - -webkit-box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.15); - -moz-box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.15); - box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.15); - -webkit-box-sizing: border-box; - -moz-box-sizing: border-box; - box-sizing: border-box; - -webkit-transition: width 0.6s ease; - -moz-transition: width 0.6s ease; - -ms-transition: width 0.6s ease; - -o-transition: width 0.6s ease; - transition: width 0.6s ease; -} -.progress.striped .bar { - background-color: #62c462; - background-image: -webkit-gradient(linear, 0 100%, 100% 0, color-stop(0.25, rgba(255, 255, 255, 0.15)), color-stop(0.25, transparent), color-stop(0.5, transparent), color-stop(0.5, rgba(255, 255, 255, 0.15)), color-stop(0.75, rgba(255, 255, 255, 0.15)), color-stop(0.75, transparent), to(transparent)); - background-image: -webkit-linear-gradient(-45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent); - background-image: -moz-linear-gradient(-45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent); - background-image: -ms-linear-gradient(-45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent); - background-image: -o-linear-gradient(-45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent); - background-image: linear-gradient(-45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent); - -webkit-background-size: 40px 40px; - -moz-background-size: 40px 40px; - -o-background-size: 40px 40px; - background-size: 40px 40px; -} -.progress.active .bar { - -webkit-animation: progress-bar-stripes 2s linear infinite; - -moz-animation: progress-bar-stripes 2s linear infinite; - animation: progress-bar-stripes 2s linear infinite; -} -.progress.danger .bar { - background-color: #c43c35; - 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); - background-repeat: repeat-x; - filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ee5f5b', endColorstr='#c43c35', GradientType=0); -} -.progress.danger.striped .bar { - background-color: #ee5f5b; - background-image: -webkit-gradient(linear, 0 100%, 100% 0, color-stop(0.25, rgba(255, 255, 255, 0.15)), color-stop(0.25, transparent), color-stop(0.5, transparent), color-stop(0.5, rgba(255, 255, 255, 0.15)), color-stop(0.75, rgba(255, 255, 255, 0.15)), color-stop(0.75, transparent), to(transparent)); - background-image: -webkit-linear-gradient(-45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent); - background-image: -moz-linear-gradient(-45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent); - background-image: -ms-linear-gradient(-45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent); - background-image: -o-linear-gradient(-45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent); - background-image: linear-gradient(-45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent); -} -.progress.success .bar { - background-color: #57a957; - background-image: -khtml-gradient(linear, left top, left bottom, from(#62c462), to(#57a957)); - background-image: -moz-linear-gradient(top, #62c462, #57a957); - background-image: -ms-linear-gradient(top, #62c462, #57a957); - background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #62c462), color-stop(100%, #57a957)); - background-image: -webkit-linear-gradient(top, #62c462, #57a957); - background-image: -o-linear-gradient(top, #62c462, #57a957); - background-image: linear-gradient(top, #62c462, #57a957); - background-repeat: repeat-x; - filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#62c462', endColorstr='#57a957', GradientType=0); -} -.progress.success.striped .bar { - background-color: #62c462; - background-image: -webkit-gradient(linear, 0 100%, 100% 0, color-stop(0.25, rgba(255, 255, 255, 0.15)), color-stop(0.25, transparent), color-stop(0.5, transparent), color-stop(0.5, rgba(255, 255, 255, 0.15)), color-stop(0.75, rgba(255, 255, 255, 0.15)), color-stop(0.75, transparent), to(transparent)); - background-image: -webkit-linear-gradient(-45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent); - background-image: -moz-linear-gradient(-45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent); - background-image: -ms-linear-gradient(-45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent); - background-image: -o-linear-gradient(-45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent); - background-image: linear-gradient(-45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent); -} -.progress.info .bar { - background-color: #339bb9; - background-image: -khtml-gradient(linear, left top, left bottom, from(#5bc0de), to(#339bb9)); - background-image: -moz-linear-gradient(top, #5bc0de, #339bb9); - background-image: -ms-linear-gradient(top, #5bc0de, #339bb9); - background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #5bc0de), color-stop(100%, #339bb9)); - background-image: -webkit-linear-gradient(top, #5bc0de, #339bb9); - background-image: -o-linear-gradient(top, #5bc0de, #339bb9); - background-image: linear-gradient(top, #5bc0de, #339bb9); - background-repeat: repeat-x; - filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#5bc0de', endColorstr='#339bb9', GradientType=0); -} -.progress.info.striped .bar { - background-color: #5bc0de; - background-image: -webkit-gradient(linear, 0 100%, 100% 0, color-stop(0.25, rgba(255, 255, 255, 0.15)), color-stop(0.25, transparent), color-stop(0.5, transparent), color-stop(0.5, rgba(255, 255, 255, 0.15)), color-stop(0.75, rgba(255, 255, 255, 0.15)), color-stop(0.75, transparent), to(transparent)); - background-image: -webkit-linear-gradient(-45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent); - background-image: -moz-linear-gradient(-45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent); - background-image: -ms-linear-gradient(-45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent); - background-image: -o-linear-gradient(-45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent); - background-image: linear-gradient(-45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent); -} .hidden { display: none; visibility: hidden; diff --git a/bootstrap.min.css b/bootstrap.min.css index 0159780a6c..5b740e782e 100644 --- a/bootstrap.min.css +++ b/bootstrap.min.css @@ -489,6 +489,7 @@ a.thumbnail:hover{border-color:#0088cc;-webkit-box-shadow:0 1px 4px rgba(0, 105, .carousel{position:relative;}.carousel .carousel-inner{overflow:hidden;width:100%;position:relative;} .carousel .item{display:none;position:relative;-webkit-transition:0.6s ease-in-out left;-moz-transition:0.6s ease-in-out left;-ms-transition:0.6s ease-in-out left;-o-transition:0.6s ease-in-out left;transition:0.6s ease-in-out left;} .carousel .active,.carousel .next,.carousel .prev{display:block;} +.carousel .active{left:0;} .carousel .next,.carousel .prev{position:absolute;top:0;width:100%;} .carousel .next{left:100%;} .carousel .prev{left:-100%;} @@ -501,16 +502,5 @@ a.thumbnail:hover{border-color:#0088cc;-webkit-box-shadow:0 1px 4px rgba(0, 105, .label.warning{background-color:#f89406;} .label.success{background-color:#46a546;} .label.notice{background-color:#62cffc;} -@-webkit-keyframes progress-bar-stripes{from{background-position:0 0;} to{background-position:40px 0;}}@keyframes progress-bar-stripes{from{background-position:0 0;} to{background-position:40px 0;}}.progress,.progress .bar{-webkit-border-radius:4px;-moz-border-radius:4px;border-radius:4px;} -.progress{height:18px;margin-bottom:18px;background-color:#f9f9f9;background-image:-khtml-gradient(linear, left top, left bottom, from(#f5f5f5), to(#f9f9f9));background-image:-moz-linear-gradient(top, #f5f5f5, #f9f9f9);background-image:-ms-linear-gradient(top, #f5f5f5, #f9f9f9);background-image:-webkit-gradient(linear, left top, left bottom, color-stop(0%, #f5f5f5), color-stop(100%, #f9f9f9));background-image:-webkit-linear-gradient(top, #f5f5f5, #f9f9f9);background-image:-o-linear-gradient(top, #f5f5f5, #f9f9f9);background-image:linear-gradient(top, #f5f5f5, #f9f9f9);background-repeat:repeat-x;filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#f5f5f5', endColorstr='#f9f9f9', GradientType=0);-webkit-box-shadow:inset 0 1px 2px rgba(0, 0, 0, 0.1);-moz-box-shadow:inset 0 1px 2px rgba(0, 0, 0, 0.1);box-shadow:inset 0 1px 2px rgba(0, 0, 0, 0.1);} -.progress .bar{width:0%;height:18px;margin:;background-color:#0480be;background-image:-khtml-gradient(linear, left top, left bottom, from(#149bdf), to(#0480be));background-image:-moz-linear-gradient(top, #149bdf, #0480be);background-image:-ms-linear-gradient(top, #149bdf, #0480be);background-image:-webkit-gradient(linear, left top, left bottom, color-stop(0%, #149bdf), color-stop(100%, #0480be));background-image:-webkit-linear-gradient(top, #149bdf, #0480be);background-image:-o-linear-gradient(top, #149bdf, #0480be);background-image:linear-gradient(top, #149bdf, #0480be);background-repeat:repeat-x;filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#149bdf', endColorstr='#0480be', GradientType=0);-webkit-box-shadow:inset 0 -1px 0 rgba(0, 0, 0, 0.15);-moz-box-shadow:inset 0 -1px 0 rgba(0, 0, 0, 0.15);box-shadow:inset 0 -1px 0 rgba(0, 0, 0, 0.15);-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;-webkit-transition:width 0.6s ease;-moz-transition:width 0.6s ease;-ms-transition:width 0.6s ease;-o-transition:width 0.6s ease;transition:width 0.6s ease;} -.progress.striped .bar{background-color:#62c462;background-image:-webkit-gradient(linear, 0 100%, 100% 0, color-stop(0.25, rgba(255, 255, 255, 0.15)), color-stop(0.25, transparent), color-stop(0.5, transparent), color-stop(0.5, rgba(255, 255, 255, 0.15)), color-stop(0.75, rgba(255, 255, 255, 0.15)), color-stop(0.75, transparent), to(transparent));background-image:-webkit-linear-gradient(-45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);background-image:-moz-linear-gradient(-45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);background-image:-ms-linear-gradient(-45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);background-image:-o-linear-gradient(-45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);background-image:linear-gradient(-45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);-webkit-background-size:40px 40px;-moz-background-size:40px 40px;-o-background-size:40px 40px;background-size:40px 40px;} -.progress.active .bar{-webkit-animation:progress-bar-stripes 2s linear infinite;-moz-animation:progress-bar-stripes 2s linear infinite;animation:progress-bar-stripes 2s linear infinite;} -.progress.danger .bar{background-color:#c43c35;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);background-repeat:repeat-x;filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ee5f5b', endColorstr='#c43c35', GradientType=0);} -.progress.danger.striped .bar{background-color:#ee5f5b;background-image:-webkit-gradient(linear, 0 100%, 100% 0, color-stop(0.25, rgba(255, 255, 255, 0.15)), color-stop(0.25, transparent), color-stop(0.5, transparent), color-stop(0.5, rgba(255, 255, 255, 0.15)), color-stop(0.75, rgba(255, 255, 255, 0.15)), color-stop(0.75, transparent), to(transparent));background-image:-webkit-linear-gradient(-45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);background-image:-moz-linear-gradient(-45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);background-image:-ms-linear-gradient(-45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);background-image:-o-linear-gradient(-45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);background-image:linear-gradient(-45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);} -.progress.success .bar{background-color:#57a957;background-image:-khtml-gradient(linear, left top, left bottom, from(#62c462), to(#57a957));background-image:-moz-linear-gradient(top, #62c462, #57a957);background-image:-ms-linear-gradient(top, #62c462, #57a957);background-image:-webkit-gradient(linear, left top, left bottom, color-stop(0%, #62c462), color-stop(100%, #57a957));background-image:-webkit-linear-gradient(top, #62c462, #57a957);background-image:-o-linear-gradient(top, #62c462, #57a957);background-image:linear-gradient(top, #62c462, #57a957);background-repeat:repeat-x;filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#62c462', endColorstr='#57a957', GradientType=0);} -.progress.success.striped .bar{background-color:#62c462;background-image:-webkit-gradient(linear, 0 100%, 100% 0, color-stop(0.25, rgba(255, 255, 255, 0.15)), color-stop(0.25, transparent), color-stop(0.5, transparent), color-stop(0.5, rgba(255, 255, 255, 0.15)), color-stop(0.75, rgba(255, 255, 255, 0.15)), color-stop(0.75, transparent), to(transparent));background-image:-webkit-linear-gradient(-45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);background-image:-moz-linear-gradient(-45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);background-image:-ms-linear-gradient(-45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);background-image:-o-linear-gradient(-45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);background-image:linear-gradient(-45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);} -.progress.info .bar{background-color:#339bb9;background-image:-khtml-gradient(linear, left top, left bottom, from(#5bc0de), to(#339bb9));background-image:-moz-linear-gradient(top, #5bc0de, #339bb9);background-image:-ms-linear-gradient(top, #5bc0de, #339bb9);background-image:-webkit-gradient(linear, left top, left bottom, color-stop(0%, #5bc0de), color-stop(100%, #339bb9));background-image:-webkit-linear-gradient(top, #5bc0de, #339bb9);background-image:-o-linear-gradient(top, #5bc0de, #339bb9);background-image:linear-gradient(top, #5bc0de, #339bb9);background-repeat:repeat-x;filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#5bc0de', endColorstr='#339bb9', GradientType=0);} -.progress.info.striped .bar{background-color:#5bc0de;background-image:-webkit-gradient(linear, 0 100%, 100% 0, color-stop(0.25, rgba(255, 255, 255, 0.15)), color-stop(0.25, transparent), color-stop(0.5, transparent), color-stop(0.5, rgba(255, 255, 255, 0.15)), color-stop(0.75, rgba(255, 255, 255, 0.15)), color-stop(0.75, transparent), to(transparent));background-image:-webkit-linear-gradient(-45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);background-image:-moz-linear-gradient(-45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);background-image:-ms-linear-gradient(-45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);background-image:-o-linear-gradient(-45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);background-image:linear-gradient(-45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);} -.hidden{display:none;visibility:hidden;} +@-webkit-keyframes progress-bar-stripes{from{background-position:0 0;} to{background-position:40px 0;}}.hidden{display:none;visibility:hidden;} @media (max-width: 480px){.navbar .nav{position:absolute;top:0;left:0;width:180px;padding-top:40px;list-style:none;} .navbar .nav,.navbar .nav>li:last-child a{-webkit-border-radius:0 0 4px 0;-moz-border-radius:0 0 4px 0;border-radius:0 0 4px 0;} .navbar .nav>li{float:none;display:none;} .navbar .nav>li>a{float:none;background-color:#222;} .navbar .nav>.active{display:block;position:absolute;top:0;left:0;} .navbar .nav>.active>a{background-color:transparent;} .navbar .nav>.active>a:hover{background-color:#333;} .navbar .nav>.active>a:after{display:inline-block;width:0;height:0;margin-top:8px;margin-left:6px;text-indent:-99999px;vertical-align:top;border-left:4px solid transparent;border-right:4px solid transparent;border-top:4px solid #ffffff;filter:alpha(opacity=100);-moz-opacity:1;opacity:1;content:"↓";} .navbar .nav:hover>li{display:block;} .navbar .nav:hover>li>a:hover{background-color:#333;} .modal{width:auto;margin:0;}.modal.fade.in{top:auto;} .horizontal-form .control-group>label{float:none;width:auto;padding-top:0;text-align:left;} .horizontal-form .controls{margin-left:0;} .horizontal-form .control-list{padding-top:0;} .horizontal-form .form-actions{padding-left:0;} .modal{position:fixed;top:20px;left:20px;right:20px;width:auto;}.modal .close{padding:10px;}}@media (max-width: 768px){.navbar-fixed{position:absolute;} .navbar-fixed .nav{float:none;} .container{width:auto;padding:0 20px;} .row{margin-left:0;} .row>[class*="span"]{float:none;display:block;width:auto;margin:0;}}@media (min-width: 768px) and (max-width: 940px){.container{width:748px;} .span1{width:44px;} .span2{width:108px;} .span3{width:172px;} .span4{width:236px;} .span5{width:300px;} .span6{width:364px;} .span7{width:428px;} .span8{width:492px;} .span9{width:556px;} .span10{width:620px;} .span11{width:684px;} .span12{width:748px;} .offset1{margin-left:64px;} .offset2{margin-left:128px;} .offset3{margin-left:192px;} .offset4{margin-left:256px;} .offset5{margin-left:320px;} .offset6{margin-left:384px;} .offset7{margin-left:448px;} .offset8{margin-left:512px;} .offset9{margin-left:576px;} .offset10{margin-left:640px;} .offset11{margin-left:704px;} .offset12{margin-left:768px;}} diff --git a/lib/thumbnails.less b/lib/thumbnails.less index 6ac3cb51f1..3d1d5bc246 100644 --- a/lib/thumbnails.less +++ b/lib/thumbnails.less @@ -51,6 +51,8 @@ a.thumbnail:hover { .active, .next, .prev { display: block; } + .active { left: 0 } + .next, .prev { position: absolute; top: 0; -- GitLab From fbd686ad655e1a22450f517e9ec241eaafc167f7 Mon Sep 17 00:00:00 2001 From: Jacob Thornton <jacobthornton@gmail.com> Date: Sun, 8 Jan 2012 12:08:00 -0800 Subject: [PATCH 241/318] get tabs working in ie9 --- docs/javascript.html | 2 +- js/bootstrap-tab.js | 2 ++ 2 files changed, 3 insertions(+), 1 deletion(-) diff --git a/docs/javascript.html b/docs/javascript.html index ff2f8c0b91..864e6784b9 100644 --- a/docs/javascript.html +++ b/docs/javascript.html @@ -486,7 +486,7 @@ $('a[data-toggle="tab"]').on('shown', function (e) { <li><a href="#messages" data-toggle="tab">Messages</a></li> <li><a href="#settings" data-toggle="tab">Settings</a></li> <li class="dropdown"> - <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown</a> + <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a> <ul class="dropdown-menu"> <li><a href="#dropdown1" data-toggle="tab">@fat</a></li> <li><a href="#dropdown2" data-toggle="tab">@mdo</a></li> diff --git a/js/bootstrap-tab.js b/js/bootstrap-tab.js index c7632ded25..8492fe9558 100644 --- a/js/bootstrap-tab.js +++ b/js/bootstrap-tab.js @@ -77,6 +77,8 @@ if (transition) { element[0].offsetWidth // reflow for transition element.addClass('in') + } else { + element.removeClass('fade') } if ( element.parent('.dropdown-menu') ) { -- GitLab From 1ef9cbc6e4b2a002eea4515f3779318f2ee60666 Mon Sep 17 00:00:00 2001 From: Mark Otto <markdotto@gmail.com> Date: Sun, 8 Jan 2012 12:40:30 -0800 Subject: [PATCH 242/318] rejigger z-index ranks for popovers/topbar/etc --- bootstrap.css | 149 +++++++++++++++++++++++++++++++++++++++++++-- bootstrap.min.css | 23 +++++-- lib/variables.less | 11 ++-- 3 files changed, 166 insertions(+), 17 deletions(-) diff --git a/bootstrap.css b/bootstrap.css index 10612de2cf..f2ebd44c39 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 Jan 8 11:32:00 PST 2012 + * Date: Sun Jan 8 12:40:18 PST 2012 */ html, body { margin: 0; @@ -1701,7 +1701,7 @@ i { top: 0; right: 0; left: 0; - z-index: 1010; + z-index: 1030; } .navbar .nav { position: relative; @@ -2123,7 +2123,7 @@ i { right: 0; bottom: 0; left: 0; - z-index: 1020; + z-index: 1040; background-color: #000000; } .modal-backdrop.fade { @@ -2138,7 +2138,7 @@ i { position: fixed; top: 50%; left: 50%; - z-index: 1030; + z-index: 1050; max-height: 500px; overflow: auto; width: 560px; @@ -2208,7 +2208,7 @@ i { } .twipsy { position: absolute; - z-index: 1050; + z-index: 1020; display: block; visibility: visible; padding: 5px; @@ -2286,7 +2286,7 @@ i { position: absolute; top: 0; left: 0; - z-index: 1040; + z-index: 1010; display: none; padding: 5px; } @@ -2868,6 +2868,143 @@ a.thumbnail:hover { background-position: 40px 0; } } +@keyframes progress-bar-stripes { + from { + background-position: 0 0; + } + to { + background-position: 40px 0; + } +} +.progress, .progress .bar { + -webkit-border-radius: 4px; + -moz-border-radius: 4px; + border-radius: 4px; +} +.progress { + height: 18px; + margin-bottom: 18px; + background-color: #f9f9f9; + background-image: -khtml-gradient(linear, left top, left bottom, from(#f5f5f5), to(#f9f9f9)); + background-image: -moz-linear-gradient(top, #f5f5f5, #f9f9f9); + background-image: -ms-linear-gradient(top, #f5f5f5, #f9f9f9); + background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #f5f5f5), color-stop(100%, #f9f9f9)); + background-image: -webkit-linear-gradient(top, #f5f5f5, #f9f9f9); + background-image: -o-linear-gradient(top, #f5f5f5, #f9f9f9); + background-image: linear-gradient(top, #f5f5f5, #f9f9f9); + background-repeat: repeat-x; + filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#f5f5f5', endColorstr='#f9f9f9', GradientType=0); + -webkit-box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1); + -moz-box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1); + box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1); +} +.progress .bar { + width: 0%; + height: 18px; + margin: ; + background-color: #0480be; + background-image: -khtml-gradient(linear, left top, left bottom, from(#149bdf), to(#0480be)); + background-image: -moz-linear-gradient(top, #149bdf, #0480be); + background-image: -ms-linear-gradient(top, #149bdf, #0480be); + background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #149bdf), color-stop(100%, #0480be)); + background-image: -webkit-linear-gradient(top, #149bdf, #0480be); + background-image: -o-linear-gradient(top, #149bdf, #0480be); + background-image: linear-gradient(top, #149bdf, #0480be); + background-repeat: repeat-x; + filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#149bdf', endColorstr='#0480be', GradientType=0); + -webkit-box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.15); + -moz-box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.15); + box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.15); + -webkit-box-sizing: border-box; + -moz-box-sizing: border-box; + box-sizing: border-box; + -webkit-transition: width 0.6s ease; + -moz-transition: width 0.6s ease; + -ms-transition: width 0.6s ease; + -o-transition: width 0.6s ease; + transition: width 0.6s ease; +} +.progress.striped .bar { + background-color: #62c462; + background-image: -webkit-gradient(linear, 0 100%, 100% 0, color-stop(0.25, rgba(255, 255, 255, 0.15)), color-stop(0.25, transparent), color-stop(0.5, transparent), color-stop(0.5, rgba(255, 255, 255, 0.15)), color-stop(0.75, rgba(255, 255, 255, 0.15)), color-stop(0.75, transparent), to(transparent)); + background-image: -webkit-linear-gradient(-45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent); + background-image: -moz-linear-gradient(-45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent); + background-image: -ms-linear-gradient(-45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent); + background-image: -o-linear-gradient(-45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent); + background-image: linear-gradient(-45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent); + -webkit-background-size: 40px 40px; + -moz-background-size: 40px 40px; + -o-background-size: 40px 40px; + background-size: 40px 40px; +} +.progress.active .bar { + -webkit-animation: progress-bar-stripes 2s linear infinite; + -moz-animation: progress-bar-stripes 2s linear infinite; + animation: progress-bar-stripes 2s linear infinite; +} +.progress.danger .bar { + background-color: #c43c35; + 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); + background-repeat: repeat-x; + filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ee5f5b', endColorstr='#c43c35', GradientType=0); +} +.progress.danger.striped .bar { + background-color: #ee5f5b; + background-image: -webkit-gradient(linear, 0 100%, 100% 0, color-stop(0.25, rgba(255, 255, 255, 0.15)), color-stop(0.25, transparent), color-stop(0.5, transparent), color-stop(0.5, rgba(255, 255, 255, 0.15)), color-stop(0.75, rgba(255, 255, 255, 0.15)), color-stop(0.75, transparent), to(transparent)); + background-image: -webkit-linear-gradient(-45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent); + background-image: -moz-linear-gradient(-45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent); + background-image: -ms-linear-gradient(-45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent); + background-image: -o-linear-gradient(-45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent); + background-image: linear-gradient(-45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent); +} +.progress.success .bar { + background-color: #57a957; + background-image: -khtml-gradient(linear, left top, left bottom, from(#62c462), to(#57a957)); + background-image: -moz-linear-gradient(top, #62c462, #57a957); + background-image: -ms-linear-gradient(top, #62c462, #57a957); + background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #62c462), color-stop(100%, #57a957)); + background-image: -webkit-linear-gradient(top, #62c462, #57a957); + background-image: -o-linear-gradient(top, #62c462, #57a957); + background-image: linear-gradient(top, #62c462, #57a957); + background-repeat: repeat-x; + filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#62c462', endColorstr='#57a957', GradientType=0); +} +.progress.success.striped .bar { + background-color: #62c462; + background-image: -webkit-gradient(linear, 0 100%, 100% 0, color-stop(0.25, rgba(255, 255, 255, 0.15)), color-stop(0.25, transparent), color-stop(0.5, transparent), color-stop(0.5, rgba(255, 255, 255, 0.15)), color-stop(0.75, rgba(255, 255, 255, 0.15)), color-stop(0.75, transparent), to(transparent)); + background-image: -webkit-linear-gradient(-45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent); + background-image: -moz-linear-gradient(-45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent); + background-image: -ms-linear-gradient(-45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent); + background-image: -o-linear-gradient(-45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent); + background-image: linear-gradient(-45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent); +} +.progress.info .bar { + background-color: #339bb9; + background-image: -khtml-gradient(linear, left top, left bottom, from(#5bc0de), to(#339bb9)); + background-image: -moz-linear-gradient(top, #5bc0de, #339bb9); + background-image: -ms-linear-gradient(top, #5bc0de, #339bb9); + background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #5bc0de), color-stop(100%, #339bb9)); + background-image: -webkit-linear-gradient(top, #5bc0de, #339bb9); + background-image: -o-linear-gradient(top, #5bc0de, #339bb9); + background-image: linear-gradient(top, #5bc0de, #339bb9); + background-repeat: repeat-x; + filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#5bc0de', endColorstr='#339bb9', GradientType=0); +} +.progress.info.striped .bar { + background-color: #5bc0de; + background-image: -webkit-gradient(linear, 0 100%, 100% 0, color-stop(0.25, rgba(255, 255, 255, 0.15)), color-stop(0.25, transparent), color-stop(0.5, transparent), color-stop(0.5, rgba(255, 255, 255, 0.15)), color-stop(0.75, rgba(255, 255, 255, 0.15)), color-stop(0.75, transparent), to(transparent)); + background-image: -webkit-linear-gradient(-45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent); + background-image: -moz-linear-gradient(-45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent); + background-image: -ms-linear-gradient(-45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent); + background-image: -o-linear-gradient(-45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent); + background-image: linear-gradient(-45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent); +} .hidden { display: none; visibility: hidden; diff --git a/bootstrap.min.css b/bootstrap.min.css index 5b740e782e..be19ce1540 100644 --- a/bootstrap.min.css +++ b/bootstrap.min.css @@ -326,7 +326,7 @@ i{background-image:url(docs/assets/img/glyphicons-halflings-sprite.png);backgrou .navbar-search .search-query:focus,.navbar-search .search-query.focused{padding:5px 10px;color:#333333;text-shadow:0 1px 0 #ffffff;background-color:#ffffff;border:0;-webkit-box-shadow:0 0 3px rgba(0, 0, 0, 0.15);-moz-box-shadow:0 0 3px rgba(0, 0, 0, 0.15);box-shadow:0 0 3px rgba(0, 0, 0, 0.15);outline:0;} .navbar-static{margin-bottom:18px;} .navbar-static .navbar-inner{padding-left:20px;padding-right:20px;-webkit-border-radius:4px;-moz-border-radius:4px;border-radius:4px;} -.navbar-fixed{position:fixed;top:0;right:0;left:0;z-index:1010;} +.navbar-fixed{position:fixed;top:0;right:0;left:0;z-index:1030;} .navbar .nav{position:relative;left:0;display:block;float:left;margin:0 10px 0 0;} .navbar .nav.pull-right{float:right;} .navbar .nav>li{display:block;float:left;} @@ -404,16 +404,16 @@ i{background-image:url(docs/assets/img/glyphicons-halflings-sprite.png);backgrou .pagination .disabled a,.pagination .disabled a:hover{color:#999999;background-color:transparent;cursor:default;} .pagination .next a{border:0;} .pagination.centered{text-align:center;} -.modal-backdrop{position:fixed;top:0;right:0;bottom:0;left:0;z-index:1020;background-color:#000000;}.modal-backdrop.fade{opacity:0;} +.modal-backdrop{position:fixed;top:0;right:0;bottom:0;left:0;z-index:1040;background-color:#000000;}.modal-backdrop.fade{opacity:0;} .modal-backdrop,.modal-backdrop.fade.in{filter:alpha(opacity=80);-moz-opacity:0.8;opacity:0.8;} -.modal{position:fixed;top:50%;left:50%;z-index:1030;max-height:500px;overflow:auto;width:560px;margin:-250px 0 0 -250px;background-color:#ffffff;border:1px solid #999;border:1px solid rgba(0, 0, 0, 0.3);*border:1px solid #999;-webkit-border-radius:6px;-moz-border-radius:6px;border-radius:6px;-webkit-box-shadow:0 3px 7px rgba(0, 0, 0, 0.3);-moz-box-shadow:0 3px 7px rgba(0, 0, 0, 0.3);box-shadow:0 3px 7px rgba(0, 0, 0, 0.3);-webkit-background-clip:padding-box;-moz-background-clip:padding-box;background-clip:padding-box;}.modal.fade{-webkit-transition:opacity .3s linear, top .3s ease-out;-moz-transition:opacity .3s linear, top .3s ease-out;-ms-transition:opacity .3s linear, top .3s ease-out;-o-transition:opacity .3s linear, top .3s ease-out;transition:opacity .3s linear, top .3s ease-out;top:-25%;} +.modal{position:fixed;top:50%;left:50%;z-index:1050;max-height:500px;overflow:auto;width:560px;margin:-250px 0 0 -250px;background-color:#ffffff;border:1px solid #999;border:1px solid rgba(0, 0, 0, 0.3);*border:1px solid #999;-webkit-border-radius:6px;-moz-border-radius:6px;border-radius:6px;-webkit-box-shadow:0 3px 7px rgba(0, 0, 0, 0.3);-moz-box-shadow:0 3px 7px rgba(0, 0, 0, 0.3);box-shadow:0 3px 7px rgba(0, 0, 0, 0.3);-webkit-background-clip:padding-box;-moz-background-clip:padding-box;background-clip:padding-box;}.modal.fade{-webkit-transition:opacity .3s linear, top .3s ease-out;-moz-transition:opacity .3s linear, top .3s ease-out;-ms-transition:opacity .3s linear, top .3s ease-out;-o-transition:opacity .3s linear, top .3s ease-out;transition:opacity .3s linear, top .3s ease-out;top:-25%;} .modal.fade.in{top:50%;} .modal-header{padding:5px 15px;border-bottom:1px solid #eee;}.modal-header .close{margin-top:7px;} .modal-body{padding:15px;} .modal-footer{padding:14px 15px 15px;margin-bottom:0;background-color:#f5f5f5;border-top:1px solid #ddd;-webkit-border-radius:0 0 6px 6px;-moz-border-radius:0 0 6px 6px;border-radius:0 0 6px 6px;-webkit-box-shadow:inset 0 1px 0 #ffffff;-moz-box-shadow:inset 0 1px 0 #ffffff;box-shadow:inset 0 1px 0 #ffffff;zoom:1;}.modal-footer:before,.modal-footer:after{display:table;*display:inline;content:"";zoom:1;} .modal-footer:after{clear:both;} .modal-footer .btn{float:right;margin-left:5px;} -.twipsy{position:absolute;z-index:1050;display:block;visibility:visible;padding:5px;font-size:11px;filter:alpha(opacity=0);-moz-opacity:0;opacity:0;}.twipsy.in{filter:alpha(opacity=80);-moz-opacity:0.8;opacity:0.8;} +.twipsy{position:absolute;z-index:1020;display:block;visibility:visible;padding:5px;font-size:11px;filter:alpha(opacity=0);-moz-opacity:0;opacity:0;}.twipsy.in{filter:alpha(opacity=80);-moz-opacity:0.8;opacity:0.8;} .twipsy.top{margin-top:-2px;} .twipsy.right{margin-left:2px;} .twipsy.bottom{margin-top:2px;} @@ -424,7 +424,7 @@ i{background-image:url(docs/assets/img/glyphicons-halflings-sprite.png);backgrou .twipsy.right .twipsy-arrow{top:50%;left:0;margin-top:-5px;border-top:5px solid transparent;border-bottom:5px solid transparent;border-right:5px solid #000000;} .twipsy-inner{max-width:200px;padding:3px 8px;color:white;text-align:center;text-decoration:none;background-color:#000000;-webkit-border-radius:4px;-moz-border-radius:4px;border-radius:4px;} .twipsy-arrow{position:absolute;width:0;height:0;} -.popover{position:absolute;top:0;left:0;z-index:1040;display:none;padding:5px;}.popover.top{margin-top:-5px;} +.popover{position:absolute;top:0;left:0;z-index:1010;display:none;padding:5px;}.popover.top{margin-top:-5px;} .popover.right{margin-left:5px;} .popover.bottom{margin-top:5px;} .popover.left{margin-left:-5px;} @@ -502,5 +502,16 @@ a.thumbnail:hover{border-color:#0088cc;-webkit-box-shadow:0 1px 4px rgba(0, 105, .label.warning{background-color:#f89406;} .label.success{background-color:#46a546;} .label.notice{background-color:#62cffc;} -@-webkit-keyframes progress-bar-stripes{from{background-position:0 0;} to{background-position:40px 0;}}.hidden{display:none;visibility:hidden;} +@-webkit-keyframes progress-bar-stripes{from{background-position:0 0;} to{background-position:40px 0;}}@keyframes progress-bar-stripes{from{background-position:0 0;} to{background-position:40px 0;}}.progress,.progress .bar{-webkit-border-radius:4px;-moz-border-radius:4px;border-radius:4px;} +.progress{height:18px;margin-bottom:18px;background-color:#f9f9f9;background-image:-khtml-gradient(linear, left top, left bottom, from(#f5f5f5), to(#f9f9f9));background-image:-moz-linear-gradient(top, #f5f5f5, #f9f9f9);background-image:-ms-linear-gradient(top, #f5f5f5, #f9f9f9);background-image:-webkit-gradient(linear, left top, left bottom, color-stop(0%, #f5f5f5), color-stop(100%, #f9f9f9));background-image:-webkit-linear-gradient(top, #f5f5f5, #f9f9f9);background-image:-o-linear-gradient(top, #f5f5f5, #f9f9f9);background-image:linear-gradient(top, #f5f5f5, #f9f9f9);background-repeat:repeat-x;filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#f5f5f5', endColorstr='#f9f9f9', GradientType=0);-webkit-box-shadow:inset 0 1px 2px rgba(0, 0, 0, 0.1);-moz-box-shadow:inset 0 1px 2px rgba(0, 0, 0, 0.1);box-shadow:inset 0 1px 2px rgba(0, 0, 0, 0.1);} +.progress .bar{width:0%;height:18px;margin:;background-color:#0480be;background-image:-khtml-gradient(linear, left top, left bottom, from(#149bdf), to(#0480be));background-image:-moz-linear-gradient(top, #149bdf, #0480be);background-image:-ms-linear-gradient(top, #149bdf, #0480be);background-image:-webkit-gradient(linear, left top, left bottom, color-stop(0%, #149bdf), color-stop(100%, #0480be));background-image:-webkit-linear-gradient(top, #149bdf, #0480be);background-image:-o-linear-gradient(top, #149bdf, #0480be);background-image:linear-gradient(top, #149bdf, #0480be);background-repeat:repeat-x;filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#149bdf', endColorstr='#0480be', GradientType=0);-webkit-box-shadow:inset 0 -1px 0 rgba(0, 0, 0, 0.15);-moz-box-shadow:inset 0 -1px 0 rgba(0, 0, 0, 0.15);box-shadow:inset 0 -1px 0 rgba(0, 0, 0, 0.15);-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;-webkit-transition:width 0.6s ease;-moz-transition:width 0.6s ease;-ms-transition:width 0.6s ease;-o-transition:width 0.6s ease;transition:width 0.6s ease;} +.progress.striped .bar{background-color:#62c462;background-image:-webkit-gradient(linear, 0 100%, 100% 0, color-stop(0.25, rgba(255, 255, 255, 0.15)), color-stop(0.25, transparent), color-stop(0.5, transparent), color-stop(0.5, rgba(255, 255, 255, 0.15)), color-stop(0.75, rgba(255, 255, 255, 0.15)), color-stop(0.75, transparent), to(transparent));background-image:-webkit-linear-gradient(-45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);background-image:-moz-linear-gradient(-45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);background-image:-ms-linear-gradient(-45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);background-image:-o-linear-gradient(-45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);background-image:linear-gradient(-45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);-webkit-background-size:40px 40px;-moz-background-size:40px 40px;-o-background-size:40px 40px;background-size:40px 40px;} +.progress.active .bar{-webkit-animation:progress-bar-stripes 2s linear infinite;-moz-animation:progress-bar-stripes 2s linear infinite;animation:progress-bar-stripes 2s linear infinite;} +.progress.danger .bar{background-color:#c43c35;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);background-repeat:repeat-x;filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ee5f5b', endColorstr='#c43c35', GradientType=0);} +.progress.danger.striped .bar{background-color:#ee5f5b;background-image:-webkit-gradient(linear, 0 100%, 100% 0, color-stop(0.25, rgba(255, 255, 255, 0.15)), color-stop(0.25, transparent), color-stop(0.5, transparent), color-stop(0.5, rgba(255, 255, 255, 0.15)), color-stop(0.75, rgba(255, 255, 255, 0.15)), color-stop(0.75, transparent), to(transparent));background-image:-webkit-linear-gradient(-45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);background-image:-moz-linear-gradient(-45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);background-image:-ms-linear-gradient(-45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);background-image:-o-linear-gradient(-45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);background-image:linear-gradient(-45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);} +.progress.success .bar{background-color:#57a957;background-image:-khtml-gradient(linear, left top, left bottom, from(#62c462), to(#57a957));background-image:-moz-linear-gradient(top, #62c462, #57a957);background-image:-ms-linear-gradient(top, #62c462, #57a957);background-image:-webkit-gradient(linear, left top, left bottom, color-stop(0%, #62c462), color-stop(100%, #57a957));background-image:-webkit-linear-gradient(top, #62c462, #57a957);background-image:-o-linear-gradient(top, #62c462, #57a957);background-image:linear-gradient(top, #62c462, #57a957);background-repeat:repeat-x;filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#62c462', endColorstr='#57a957', GradientType=0);} +.progress.success.striped .bar{background-color:#62c462;background-image:-webkit-gradient(linear, 0 100%, 100% 0, color-stop(0.25, rgba(255, 255, 255, 0.15)), color-stop(0.25, transparent), color-stop(0.5, transparent), color-stop(0.5, rgba(255, 255, 255, 0.15)), color-stop(0.75, rgba(255, 255, 255, 0.15)), color-stop(0.75, transparent), to(transparent));background-image:-webkit-linear-gradient(-45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);background-image:-moz-linear-gradient(-45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);background-image:-ms-linear-gradient(-45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);background-image:-o-linear-gradient(-45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);background-image:linear-gradient(-45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);} +.progress.info .bar{background-color:#339bb9;background-image:-khtml-gradient(linear, left top, left bottom, from(#5bc0de), to(#339bb9));background-image:-moz-linear-gradient(top, #5bc0de, #339bb9);background-image:-ms-linear-gradient(top, #5bc0de, #339bb9);background-image:-webkit-gradient(linear, left top, left bottom, color-stop(0%, #5bc0de), color-stop(100%, #339bb9));background-image:-webkit-linear-gradient(top, #5bc0de, #339bb9);background-image:-o-linear-gradient(top, #5bc0de, #339bb9);background-image:linear-gradient(top, #5bc0de, #339bb9);background-repeat:repeat-x;filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#5bc0de', endColorstr='#339bb9', GradientType=0);} +.progress.info.striped .bar{background-color:#5bc0de;background-image:-webkit-gradient(linear, 0 100%, 100% 0, color-stop(0.25, rgba(255, 255, 255, 0.15)), color-stop(0.25, transparent), color-stop(0.5, transparent), color-stop(0.5, rgba(255, 255, 255, 0.15)), color-stop(0.75, rgba(255, 255, 255, 0.15)), color-stop(0.75, transparent), to(transparent));background-image:-webkit-linear-gradient(-45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);background-image:-moz-linear-gradient(-45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);background-image:-ms-linear-gradient(-45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);background-image:-o-linear-gradient(-45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);background-image:linear-gradient(-45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);} +.hidden{display:none;visibility:hidden;} @media (max-width: 480px){.navbar .nav{position:absolute;top:0;left:0;width:180px;padding-top:40px;list-style:none;} .navbar .nav,.navbar .nav>li:last-child a{-webkit-border-radius:0 0 4px 0;-moz-border-radius:0 0 4px 0;border-radius:0 0 4px 0;} .navbar .nav>li{float:none;display:none;} .navbar .nav>li>a{float:none;background-color:#222;} .navbar .nav>.active{display:block;position:absolute;top:0;left:0;} .navbar .nav>.active>a{background-color:transparent;} .navbar .nav>.active>a:hover{background-color:#333;} .navbar .nav>.active>a:after{display:inline-block;width:0;height:0;margin-top:8px;margin-left:6px;text-indent:-99999px;vertical-align:top;border-left:4px solid transparent;border-right:4px solid transparent;border-top:4px solid #ffffff;filter:alpha(opacity=100);-moz-opacity:1;opacity:1;content:"↓";} .navbar .nav:hover>li{display:block;} .navbar .nav:hover>li>a:hover{background-color:#333;} .modal{width:auto;margin:0;}.modal.fade.in{top:auto;} .horizontal-form .control-group>label{float:none;width:auto;padding-top:0;text-align:left;} .horizontal-form .controls{margin-left:0;} .horizontal-form .control-list{padding-top:0;} .horizontal-form .form-actions{padding-left:0;} .modal{position:fixed;top:20px;left:20px;right:20px;width:auto;}.modal .close{padding:10px;}}@media (max-width: 768px){.navbar-fixed{position:absolute;} .navbar-fixed .nav{float:none;} .container{width:auto;padding:0 20px;} .row{margin-left:0;} .row>[class*="span"]{float:none;display:block;width:auto;margin:0;}}@media (min-width: 768px) and (max-width: 940px){.container{width:748px;} .span1{width:44px;} .span2{width:108px;} .span3{width:172px;} .span4{width:236px;} .span5{width:300px;} .span6{width:364px;} .span7{width:428px;} .span8{width:492px;} .span9{width:556px;} .span10{width:620px;} .span11{width:684px;} .span12{width:748px;} .offset1{margin-left:64px;} .offset2{margin-left:128px;} .offset3{margin-left:192px;} .offset4{margin-left:256px;} .offset5{margin-left:320px;} .offset6{margin-left:384px;} .offset7{margin-left:448px;} .offset8{margin-left:512px;} .offset9{margin-left:576px;} .offset10{margin-left:640px;} .offset11{margin-left:704px;} .offset12{margin-left:768px;}} diff --git a/lib/variables.less b/lib/variables.less index 37f5adb71d..97b6f9e3c8 100644 --- a/lib/variables.less +++ b/lib/variables.less @@ -49,12 +49,13 @@ // Z-INDEX // ------- + @zindexDropdown: 1000; -@zindexFixedNavbar: 1010; -@zindexModalBackdrop: 1020; -@zindexModal: 1030; -@zindexPopover: 1040; -@zindexTwipsy: 1050; +@zindexPopover: 1010; +@zindexTwipsy: 1020; +@zindexFixedNavbar: 1030; +@zindexModalBackdrop: 1040; +@zindexModal: 1050; // THEME VARIABLES -- GitLab From cb9be7bd0cde19b3b401d2dcdfb6162dd00b5ab5 Mon Sep 17 00:00:00 2001 From: Mark Otto <markdotto@gmail.com> Date: Sun, 8 Jan 2012 13:21:44 -0800 Subject: [PATCH 243/318] clean up dup css in responsive, fix navbar dropdown caret --- bootstrap.css | 18 +++++++----------- bootstrap.min.css | 6 +++--- docs/assets/css/docs.css | 2 +- docs/index.html | 5 +++-- lib/navs.less | 6 ++++-- lib/responsive.less | 16 +++++----------- lib/scaffolding.less | 10 ++++++++-- 7 files changed, 31 insertions(+), 32 deletions(-) diff --git a/bootstrap.css b/bootstrap.css index f2ebd44c39..baafd0dd94 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 Jan 8 12:40:18 PST 2012 + * Date: Sun Jan 8 13:21:31 PST 2012 */ html, body { margin: 0; @@ -1934,11 +1934,11 @@ i { -moz-border-radius: 4px; border-radius: 4px; } -.nav .dropdown-toggle .caret { +.tabs .dropdown-toggle .caret, .pills .dropdown-toggle .caret { border-top-color: #0088cc; margin-top: 6px; } -.nav .dropdown-toggle:hover .caret { +.tabs .dropdown-toggle:hover .caret, .pills .dropdown-toggle:hover .caret { border-top-color: #005580; } .nav .open .dropdown-toggle { @@ -3065,13 +3065,6 @@ a.thumbnail:hover { .navbar .nav:hover > li > a:hover { background-color: #333; } - .modal { - width: auto; - margin: 0; - } - .modal.fade.in { - top: auto; - } .horizontal-form .control-group > label { float: none; width: auto; @@ -3094,7 +3087,10 @@ a.thumbnail:hover { right: 20px; width: auto; } - .modal .close { + .modal.fade.in { + top: auto; + } + .modal-header .close { padding: 10px; } } diff --git a/bootstrap.min.css b/bootstrap.min.css index be19ce1540..17a2c107b1 100644 --- a/bootstrap.min.css +++ b/bootstrap.min.css @@ -370,8 +370,8 @@ i{background-image:url(docs/assets/img/glyphicons-halflings-sprite.png);backgrou .pills.stacked>li:last-child>a{margin-bottom:1px;} .nav .dropdown-menu{top:33px;border-width:1px;} .pills .dropdown-menu{-webkit-border-radius:4px;-moz-border-radius:4px;border-radius:4px;} -.nav .dropdown-toggle .caret{border-top-color:#0088cc;margin-top:6px;} -.nav .dropdown-toggle:hover .caret{border-top-color:#005580;} +.tabs .dropdown-toggle .caret,.pills .dropdown-toggle .caret{border-top-color:#0088cc;margin-top:6px;} +.tabs .dropdown-toggle:hover .caret,.pills .dropdown-toggle:hover .caret{border-top-color:#005580;} .nav .open .dropdown-toggle{background-color:#999;border-color:#999;} .nav .open .caret,.nav .open a:hover .caret{border-top-color:#fff;filter:alpha(opacity=100);-moz-opacity:1;opacity:1;} .tabs.stacked .open>a:hover{border-color:#999;} @@ -514,4 +514,4 @@ a.thumbnail:hover{border-color:#0088cc;-webkit-box-shadow:0 1px 4px rgba(0, 105, .progress.info .bar{background-color:#339bb9;background-image:-khtml-gradient(linear, left top, left bottom, from(#5bc0de), to(#339bb9));background-image:-moz-linear-gradient(top, #5bc0de, #339bb9);background-image:-ms-linear-gradient(top, #5bc0de, #339bb9);background-image:-webkit-gradient(linear, left top, left bottom, color-stop(0%, #5bc0de), color-stop(100%, #339bb9));background-image:-webkit-linear-gradient(top, #5bc0de, #339bb9);background-image:-o-linear-gradient(top, #5bc0de, #339bb9);background-image:linear-gradient(top, #5bc0de, #339bb9);background-repeat:repeat-x;filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#5bc0de', endColorstr='#339bb9', GradientType=0);} .progress.info.striped .bar{background-color:#5bc0de;background-image:-webkit-gradient(linear, 0 100%, 100% 0, color-stop(0.25, rgba(255, 255, 255, 0.15)), color-stop(0.25, transparent), color-stop(0.5, transparent), color-stop(0.5, rgba(255, 255, 255, 0.15)), color-stop(0.75, rgba(255, 255, 255, 0.15)), color-stop(0.75, transparent), to(transparent));background-image:-webkit-linear-gradient(-45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);background-image:-moz-linear-gradient(-45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);background-image:-ms-linear-gradient(-45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);background-image:-o-linear-gradient(-45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);background-image:linear-gradient(-45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);} .hidden{display:none;visibility:hidden;} -@media (max-width: 480px){.navbar .nav{position:absolute;top:0;left:0;width:180px;padding-top:40px;list-style:none;} .navbar .nav,.navbar .nav>li:last-child a{-webkit-border-radius:0 0 4px 0;-moz-border-radius:0 0 4px 0;border-radius:0 0 4px 0;} .navbar .nav>li{float:none;display:none;} .navbar .nav>li>a{float:none;background-color:#222;} .navbar .nav>.active{display:block;position:absolute;top:0;left:0;} .navbar .nav>.active>a{background-color:transparent;} .navbar .nav>.active>a:hover{background-color:#333;} .navbar .nav>.active>a:after{display:inline-block;width:0;height:0;margin-top:8px;margin-left:6px;text-indent:-99999px;vertical-align:top;border-left:4px solid transparent;border-right:4px solid transparent;border-top:4px solid #ffffff;filter:alpha(opacity=100);-moz-opacity:1;opacity:1;content:"↓";} .navbar .nav:hover>li{display:block;} .navbar .nav:hover>li>a:hover{background-color:#333;} .modal{width:auto;margin:0;}.modal.fade.in{top:auto;} .horizontal-form .control-group>label{float:none;width:auto;padding-top:0;text-align:left;} .horizontal-form .controls{margin-left:0;} .horizontal-form .control-list{padding-top:0;} .horizontal-form .form-actions{padding-left:0;} .modal{position:fixed;top:20px;left:20px;right:20px;width:auto;}.modal .close{padding:10px;}}@media (max-width: 768px){.navbar-fixed{position:absolute;} .navbar-fixed .nav{float:none;} .container{width:auto;padding:0 20px;} .row{margin-left:0;} .row>[class*="span"]{float:none;display:block;width:auto;margin:0;}}@media (min-width: 768px) and (max-width: 940px){.container{width:748px;} .span1{width:44px;} .span2{width:108px;} .span3{width:172px;} .span4{width:236px;} .span5{width:300px;} .span6{width:364px;} .span7{width:428px;} .span8{width:492px;} .span9{width:556px;} .span10{width:620px;} .span11{width:684px;} .span12{width:748px;} .offset1{margin-left:64px;} .offset2{margin-left:128px;} .offset3{margin-left:192px;} .offset4{margin-left:256px;} .offset5{margin-left:320px;} .offset6{margin-left:384px;} .offset7{margin-left:448px;} .offset8{margin-left:512px;} .offset9{margin-left:576px;} .offset10{margin-left:640px;} .offset11{margin-left:704px;} .offset12{margin-left:768px;}} +@media (max-width: 480px){.navbar .nav{position:absolute;top:0;left:0;width:180px;padding-top:40px;list-style:none;} .navbar .nav,.navbar .nav>li:last-child a{-webkit-border-radius:0 0 4px 0;-moz-border-radius:0 0 4px 0;border-radius:0 0 4px 0;} .navbar .nav>li{float:none;display:none;} .navbar .nav>li>a{float:none;background-color:#222;} .navbar .nav>.active{display:block;position:absolute;top:0;left:0;} .navbar .nav>.active>a{background-color:transparent;} .navbar .nav>.active>a:hover{background-color:#333;} .navbar .nav>.active>a:after{display:inline-block;width:0;height:0;margin-top:8px;margin-left:6px;text-indent:-99999px;vertical-align:top;border-left:4px solid transparent;border-right:4px solid transparent;border-top:4px solid #ffffff;filter:alpha(opacity=100);-moz-opacity:1;opacity:1;content:"↓";} .navbar .nav:hover>li{display:block;} .navbar .nav:hover>li>a:hover{background-color:#333;} .horizontal-form .control-group>label{float:none;width:auto;padding-top:0;text-align:left;} .horizontal-form .controls{margin-left:0;} .horizontal-form .control-list{padding-top:0;} .horizontal-form .form-actions{padding-left:0;} .modal{position:fixed;top:20px;left:20px;right:20px;width:auto;}.modal.fade.in{top:auto;} .modal-header .close{padding:10px;}}@media (max-width: 768px){.navbar-fixed{position:absolute;} .navbar-fixed .nav{float:none;} .container{width:auto;padding:0 20px;} .row{margin-left:0;} .row>[class*="span"]{float:none;display:block;width:auto;margin:0;}}@media (min-width: 768px) and (max-width: 940px){.container{width:748px;} .span1{width:44px;} .span2{width:108px;} .span3{width:172px;} .span4{width:236px;} .span5{width:300px;} .span6{width:364px;} .span7{width:428px;} .span8{width:492px;} .span9{width:556px;} .span10{width:620px;} .span11{width:684px;} .span12{width:748px;} .offset1{margin-left:64px;} .offset2{margin-left:128px;} .offset3{margin-left:192px;} .offset4{margin-left:256px;} .offset5{margin-left:320px;} .offset6{margin-left:384px;} .offset7{margin-left:448px;} .offset8{margin-left:512px;} .offset9{margin-left:576px;} .offset10{margin-left:640px;} .offset11{margin-left:704px;} .offset12{margin-left:768px;}} diff --git a/docs/assets/css/docs.css b/docs/assets/css/docs.css index c359cf73ba..f370672037 100644 --- a/docs/assets/css/docs.css +++ b/docs/assets/css/docs.css @@ -163,7 +163,7 @@ body > .navbar-fixed .brand:hover { /* Marketing section of Overview -------------------------------------------------- */ .marketing .row { - margin-bottom: 18px; + margin-bottom: 9px; } .marketing h1 { margin: 36px 0 27px; diff --git a/docs/index.html b/docs/index.html index 231ed2066b..8f7963afd2 100644 --- a/docs/index.html +++ b/docs/index.html @@ -127,6 +127,7 @@ </ul> <h1>Designed for everyone, everywhere.</h1> + <p class="marketing-byline">Need reasons to love Bootstrap? Look no further.</p> <div class="row"> <div class="span4"> <img class="icon" src="assets/img/glyphicons/glyphicons_042_group.png"> @@ -153,7 +154,7 @@ <div class="span4"> <img class="icon" src="assets/img/glyphicons/glyphicons_214_resize_small.png"> <h2>Responsive design</h2> - <p>With Bootstrap 2, we've gone fully responsive. Our components are flexible enough to scale according to whatever resolution or device you're using to provide a consistent experience, no matter what.</p> + <p>With Bootstrap 2, we've gone fully responsive. Our components are scale according to a range of resolutions and devices to provide a consistent experience, no matter what.</p> </div> <div class="span4"> <img class="icon" src="assets/img/glyphicons/glyphicons_266_book_open.png"> @@ -205,7 +206,7 @@ <!-- Quickstart options ================================================== --> <h1>Get started in no time.</h1> - <p class="marketing-byline">Built for any skill level, Bootstrap fits your workflow and development process.</p> + <p class="marketing-byline">Quickly start using Bootstrap within your workflow and development process.</p> <table class="bordered-table getting-started"> <tbody> <tr> diff --git a/lib/navs.less b/lib/navs.less index dee482aea2..65d459da93 100644 --- a/lib/navs.less +++ b/lib/navs.less @@ -182,11 +182,13 @@ .pills .dropdown-menu { .border-radius(4px); } -.nav .dropdown-toggle .caret { +.tabs .dropdown-toggle .caret, +.pills .dropdown-toggle .caret { border-top-color: @linkColor; margin-top: 6px; } -.nav .dropdown-toggle:hover .caret { +.tabs .dropdown-toggle:hover .caret, +.pills .dropdown-toggle:hover .caret { border-top-color: @linkColorHover; } .nav .open .dropdown-toggle { diff --git a/lib/responsive.less b/lib/responsive.less index e87b8495f4..5131aa625b 100644 --- a/lib/responsive.less +++ b/lib/responsive.less @@ -67,7 +67,6 @@ .opacity(100); content: "↓"; } - .nav:hover > li { display: block; } @@ -76,13 +75,6 @@ } } - // Resize modals - .modal { - width: auto; - margin: 0; - &.fade.in { top: auto; } - } - // Remove the horizontal form styles .horizontal-form .control-group > label { float: none; @@ -110,10 +102,12 @@ left: 20px; right: 20px; width: auto; - .close { - padding: 10px; - } + &.fade.in { top: auto; } } + .modal-header .close { + padding: 10px; + } + } diff --git a/lib/scaffolding.less b/lib/scaffolding.less index 7432e849ba..a1f41ab66a 100644 --- a/lib/scaffolding.less +++ b/lib/scaffolding.less @@ -39,8 +39,14 @@ body { .sidebar-right { padding-right: @fluidSidebarWidth + 40; } // Float the sidebars accordingly -.sidebar-left .fluid-sidebar { float: left; margin-left: (@fluidSidebarWidth + 20) * -1; } -.sidebar-right .fluid-sidebar { float: right; margin-right: (@fluidSidebarWidth + 20) * -1; } +.sidebar-left .fluid-sidebar { + float: left; + margin-left: (@fluidSidebarWidth + 20) * -1; +} +.sidebar-right .fluid-sidebar { + float: right; + margin-right: (@fluidSidebarWidth + 20) * -1; +} // The main content area .fluid-content { -- GitLab From 0d62778b28147f599015489d281e749893907087 Mon Sep 17 00:00:00 2001 From: Mark Otto <markdotto@gmail.com> Date: Sun, 8 Jan 2012 13:22:20 -0800 Subject: [PATCH 244/318] correct navbar scaffolding code snippet --- docs/components.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/components.html b/docs/components.html index 2a9d158461..0c70ef1680 100644 --- a/docs/components.html +++ b/docs/components.html @@ -506,7 +506,7 @@ <pre class="prettyprint linenums"> <div class="navbar navbar-static"> <div class="navbar-inner"> - <div class="container" style="width: auto;"> + <div class="container"> ... </div> </div> -- GitLab From 6226b14e3b97819119da0f026e9d3ae6dd0a31c0 Mon Sep 17 00:00:00 2001 From: Mark Otto <markdotto@gmail.com> Date: Sun, 8 Jan 2012 13:30:23 -0800 Subject: [PATCH 245/318] fix placement of dropdowns in navbar after getting to general in those styles --- bootstrap.css | 6 +++--- bootstrap.min.css | 4 ++-- lib/navs.less | 6 ++++-- 3 files changed, 9 insertions(+), 7 deletions(-) diff --git a/bootstrap.css b/bootstrap.css index baafd0dd94..1fc88441ab 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 Jan 8 13:21:31 PST 2012 + * Date: Sun Jan 8 13:30:08 PST 2012 */ html, body { margin: 0; @@ -1925,7 +1925,7 @@ i { .pills.stacked > li:last-child > a { margin-bottom: 1px; } -.nav .dropdown-menu { +.pills .dropdown-menu, .tabs .dropdown-menu { top: 33px; border-width: 1px; } @@ -1941,7 +1941,7 @@ i { .tabs .dropdown-toggle:hover .caret, .pills .dropdown-toggle:hover .caret { border-top-color: #005580; } -.nav .open .dropdown-toggle { +.tabs .open .dropdown-toggle, .pills .open .dropdown-toggle { background-color: #999; border-color: #999; } diff --git a/bootstrap.min.css b/bootstrap.min.css index 17a2c107b1..a776da8886 100644 --- a/bootstrap.min.css +++ b/bootstrap.min.css @@ -368,11 +368,11 @@ i{background-image:url(docs/assets/img/glyphicons-halflings-sprite.png);backgrou .tabs.stacked>li>a:hover{border-color:#ddd;z-index:2;} .pills.stacked>li>a{margin-bottom:3px;} .pills.stacked>li:last-child>a{margin-bottom:1px;} -.nav .dropdown-menu{top:33px;border-width:1px;} +.pills .dropdown-menu,.tabs .dropdown-menu{top:33px;border-width:1px;} .pills .dropdown-menu{-webkit-border-radius:4px;-moz-border-radius:4px;border-radius:4px;} .tabs .dropdown-toggle .caret,.pills .dropdown-toggle .caret{border-top-color:#0088cc;margin-top:6px;} .tabs .dropdown-toggle:hover .caret,.pills .dropdown-toggle:hover .caret{border-top-color:#005580;} -.nav .open .dropdown-toggle{background-color:#999;border-color:#999;} +.tabs .open .dropdown-toggle,.pills .open .dropdown-toggle{background-color:#999;border-color:#999;} .nav .open .caret,.nav .open a:hover .caret{border-top-color:#fff;filter:alpha(opacity=100);-moz-opacity:1;opacity:1;} .tabs.stacked .open>a:hover{border-color:#999;} .tabbable{zoom:1;}.tabbable:before,.tabbable:after{display:table;*display:inline;content:"";zoom:1;} diff --git a/lib/navs.less b/lib/navs.less index 65d459da93..804a273bb4 100644 --- a/lib/navs.less +++ b/lib/navs.less @@ -175,7 +175,8 @@ // --------- // Position the menu -.nav .dropdown-menu { +.pills .dropdown-menu, +.tabs .dropdown-menu { top: 33px; border-width: 1px; } @@ -191,7 +192,8 @@ .pills .dropdown-toggle:hover .caret { border-top-color: @linkColorHover; } -.nav .open .dropdown-toggle { +.tabs .open .dropdown-toggle, +.pills .open .dropdown-toggle { background-color: #999; border-color: #999; } -- GitLab From f83240a8f93349c93582a96c4f4a7541388d6a80 Mon Sep 17 00:00:00 2001 From: Jacob Thornton <jacobthornton@gmail.com> Date: Sun, 8 Jan 2012 13:39:27 -0800 Subject: [PATCH 246/318] add slide and slid events + disable sliding during slide --- js/bootstrap-carousel.js | 10 ++++++++++ 1 file changed, 10 insertions(+) diff --git a/js/bootstrap-carousel.js b/js/bootstrap-carousel.js index fa5247c97e..c49f89ad80 100644 --- a/js/bootstrap-carousel.js +++ b/js/bootstrap-carousel.js @@ -44,10 +44,12 @@ } , next: function () { + if (this.sliding) return return this.slide('next') } , prev: function () { + if (this.sliding) return return this.slide('prev') } @@ -59,21 +61,29 @@ , fallback = type == 'next' ? 'first' : 'last' , that = this + this.sliding = true + isCycling && this.pause() $next = $next.length ? $next : this.$element.find('.item')[fallback]() if (!$.support.transition && this.$element.hasClass('slide')) { + this.$element.trigger('slide') $active.removeClass('active') $next.addClass('active') + this.$element.trigger('slid') + this.sliding = false } else { $next.addClass(type) $next[0].offsetWidth // force reflow $active.addClass(direction) $next.addClass(direction) + this.$element.trigger('slide') this.$element.one($.support.transition.end, function () { $next.removeClass([type, direction].join(' ')).addClass('active') $active.removeClass(['active', direction].join(' ')) + that.$element.trigger('slid') + that.sliding = false }) } -- GitLab From 561fc8cf2a955c28906216301d2fdb3c39b8e981 Mon Sep 17 00:00:00 2001 From: Jacob Thornton <jacobthornton@gmail.com> Date: Sun, 8 Jan 2012 13:54:00 -0800 Subject: [PATCH 247/318] document slide and slid methods --- docs/javascript.html | 53 +++++++++++++++++++++++++++++++------------- 1 file changed, 37 insertions(+), 16 deletions(-) diff --git a/docs/javascript.html b/docs/javascript.html index 864e6784b9..f9877dc028 100644 --- a/docs/javascript.html +++ b/docs/javascript.html @@ -362,7 +362,7 @@ $('#myModal').on('hidden', function () { <li><a href="#fat">@fat</a></li> <li><a href="#mdo">@mdo</a></li> <li class="dropdown"> - <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown</a> + <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a> <ul class="dropdown-menu"> <li><a href="#one">one</a></li> <li><a href="#two">two</a></li> @@ -1058,21 +1058,42 @@ $('#myCollapsible').on('hidden', function () { </div> </pre> -<h3>Methods</h3> -<h4>.carousel(options)</h4> -<p>Initializes the carousel with an optional options <code>object</code> and starts cycling through items.</p> -<pre class="prettyprint linenums"> -$('.myCarousel').carousel({ - interval: 2000 -})</pre> -<h4>.carousel('cycle')</h4> -<p>Cycles through the carousel items from left to right.</p> -<h4>.carousel('pause')</h4> -<p>Stops the carousel from cycling through items.</p> -<h4>.carousel('prev')</h4> -<p>Cycles to the previous item.</p> -<h4>.carousel('next')</h4> -<p>Cycles to the next item.</p> + <h3>Methods</h3> + <h4>.carousel(options)</h4> + <p>Initializes the carousel with an optional options <code>object</code> and starts cycling through items.</p> + <pre class="prettyprint linenums"> + $('.myCarousel').carousel({ + interval: 2000 + })</pre> + <h4>.carousel('cycle')</h4> + <p>Cycles through the carousel items from left to right.</p> + <h4>.carousel('pause')</h4> + <p>Stops the carousel from cycling through items.</p> + <h4>.carousel('prev')</h4> + <p>Cycles to the previous item.</p> + <h4>.carousel('next')</h4> + <p>Cycles to the next item.</p> + <h3>Events</h3> + <p>Bootstrap's modal class exposes a few events for hooking into modal functionality. </p> + <table class="bordered-table striped-table"> + <thead> + <tr> + <th style="width: 150px;">Event</th> + <th>Description</th> + </tr> + </thead> + <tbody> + <tr> + <td>slide</td> + <td>This event fires immediately when the <code>slide</code> instance method is invoked.</td> + </tr> + <tr> + <td>slid</td> + <td>This event is fired when the carousel has completed it's slide transition.</td> + </tr> + </tr> + </tbody> + </table> <h3>Demo</h3> <!-- carousel --> -- GitLab From 5a33c1b96e13a4650a127b0e81a91eb235561170 Mon Sep 17 00:00:00 2001 From: Jacob Thornton <jacobthornton@gmail.com> Date: Sun, 8 Jan 2012 14:19:53 -0800 Subject: [PATCH 248/318] make dropdowns toggle when clicked (for mobile) --- js/bootstrap-dropdown.js | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/js/bootstrap-dropdown.js b/js/bootstrap-dropdown.js index d846f1af1b..3cb2619929 100644 --- a/js/bootstrap-dropdown.js +++ b/js/bootstrap-dropdown.js @@ -38,12 +38,14 @@ var $this = $(this) , selector = $this.attr('data-target') || $this.attr('href') , $parent = $(selector) + , isActive $parent.length || ($parent = $this.parent()) + isActive = $parent.hasClass('open') clearMenus() - !$parent.hasClass('open') && $parent.toggleClass('open') + !isActive && $parent.toggleClass('open') return false } -- GitLab From cb38d08ed4f8d11ddfd0ebb1093c7a3857a7863c Mon Sep 17 00:00:00 2001 From: Mark Otto <markdotto@gmail.com> Date: Sun, 8 Jan 2012 14:33:03 -0800 Subject: [PATCH 249/318] updated js docs page to use grid of plugins instead of table --- docs/javascript.html | 148 ++++++++++++++++++++----------------------- 1 file changed, 68 insertions(+), 80 deletions(-) diff --git a/docs/javascript.html b/docs/javascript.html index 864e6784b9..256c366662 100644 --- a/docs/javascript.html +++ b/docs/javascript.html @@ -50,89 +50,77 @@ ================================================== --> <header class="jumbotron subhead" id="overview"> <h1>Javascript for Bootstrap</h1> - <p class="lead">Bring Bootstrap's components to life — now with 12 custom <a href="http://jquery.com/" target="_blank">jQuery</a> plugins. + <p class="lead">Bring Bootstrap's components to life—now with 12 custom <a href="http://jquery.com/" target="_blank">jQuery</a> plugins. </header> -<!-- Using Javascript w/ Bootstrap - ================================================== --> - - <section id="javascript"> - <div class="page-header"> - <h1>Using javascript with Bootstrap <small>An index of plugins to get you started</small></h1> - </div> - <div class="row"> - <div class="span3"> - <h2>Getting started</h2> - <p>Integrating javascript with the Bootstrap library is super easy. Here we go over the basics and provide you with some awesome plugins to get you started!</p> - </div> - <div class="span9"> - <h3>What's included</h3> - <p>Bring some of Bootstrap's primary components to life with custom <a href="http://jquery.com/" target="_blank">jQuery</a> plugins. We encourage you to extend and modify them to fit your specific development needs.</p> - <table class="bordered-table striped-table"> - <thead> - <tr> - <th style="width: 150px;">File</th> - <th>Description</th> - </tr> - </thead> - <tbody> - <tr> - <td><a href="./javascript.html#transition">bootstrap-transition.js</a></td> - <td>The transition plugin is required for adding animation to other bootstrap plugins. Include this plugin (only once) when sliding in modals or fading out alerts.</td> - </tr> - <tr> - <td><a href="./javascript.html#modal">bootstrap-modal.js</a></td> - <td>Our Modal plugin is a super slim take on the traditional modal js plugin! We took special care to include only the bare functionality that we require here at twitter.</td> - </tr> - <tr> - <td><a href="./javascript.html#dropdown">bootstrap-dropdown.js</a></td> - <td>This plugin is for adding generic dropdown interactions to things like navigation top bars and tabs.</td> - </tr> - <tr> - <td><a href="./javascript.html#scrollspy">bootstrap-scrollspy.js</a></td> - <td>The ScrollSpy plugin is for automatically updating nav targets based on scroll position.</td> - </tr> - <tr> - <td><a href="./javascript.html#tab">bootstrap-tab.js</a></td> - <td>This plugin adds quick, dynamic tab and pill functionality for transitioning through local content.</td> - <tr> - <td><a href="./javascript.html#twipsy">bootstrap-twipsy.js</a></td> - <td>Inspired by the excellent jQuery.tipsy plugin written by Jason Frame; twipsy is an updated version, which doesn't rely on images, uses css3 for animations, data-attributes for local title storage, and now jquery 1.7's new event api!</td> - </tr> - <tr> - <td><a href="./javascript.html#popover">bootstrap-popover.js</a></td> - <td>The popover plugin provides a simple interface for adding popovers to your application. It extends the <a href="#twipsy">bootstrap-twipsy.js</a> plugin, so be sure to grab that file as well when including popovers in your project!</td> - </tr> - </tr> - <tr> - <td><a href="./javascript.html#alert">bootstrap-alert.js</a></td> - <td>The alert plugin is a tiny class for adding close functionality to alerts.</td> - </tr> - <tr> - <td><a href="./javascript.html#button">bootstrap-button.js</a></td> - <td>This plugin offers additional functionality for managing button state in single buttons and button sets.</td> - </tr> - <tr> - <td><a href="./javascript.html#collapse">bootstrap-collapse.js</a></td> - <td>The collapse plugin offers simple, generic collapsible element support for making accordions and other collapsible ui components.</td> - </tr> - <tr> - <td><a href="./javascript.html#carousel">bootstrap-carousel.js</a></td> - <td>A plugin for rotating through elements. A merry-go-round.</td> - </tr> - <tr> - <td><a href="./javascript.html#typeahead">bootstrap-typeahead.js</a></td> - <td>A basic, easily extended plugin for quickly creating elegant typeaheads.</td> - </tr> - </tbody> - </table> - <h3>Is javascript necessary?</h3> - <p><strong>Nope!</strong> Bootstrap is designed first and foremost to be a CSS library. This javascript provides a basic interactive layer on top of the included styles.</p> - <p>However, for those who do need javascript, we've provided the plugins above to help you understand how to integrate Bootstrap with javascript and to give you a quick, lightweight option for the basic functionality right away.</p> - </div> - </div> -</section> + + <!-- Using Javascript w/ Bootstrap + ================================================== --> + + <section id="javascript"> + <div class="page-header"> + <h1>jQuery plugins <small>A dozen Bootstrap plugins to get you started</small></h1> + </div> + <div class="row"> + <div class="span3"> + <h3><a href="#transition">Transitions</a> <small class="muted">*</small></h3> + <p>For simple transition effects, include bootstrap-transition.js once to slide in modals or fade out alert messages.</p> + <p class="muted"><strong>*</strong> Required for animation in plugins</p> + </div> + <div class="span3"> + <h3><a href="#modal">Modals</a></h3> + <p>A streamlined, but flexible, take on the traditional javascript modal plugin with only the minimum required functionality and smart defaults.</p> + </div> + <div class="span3"> + <h3><a href="#dropdown">Dropdowns</a></h3> + <p>Add dropdown menus to nearly anything in Bootstrap with this simple plugin. Bootstrap features full dropdown menu support on in the navbar, tabs, and pills.</p> + </div> + <div class="span3"> + <h3><a href="#scrollspy">Scrollspy</a></h3> + <p>Use scrollspy to automatically update the links in your navbar to show the current active link based on scroll position.</p> + </div> + </div> <!-- /row --> + <div class="row"> + <div class="span3"> + <h3><a href="#tab">Togglable tabs</a></h3> + <p>Use this plugin to make tabs and pills more useful by allowing them to toggle through tabbable panes of local content.</p> + </div> + <div class="span3"> + <h3><a href="#twipsy">Twipsy tooltips</a></h3> + <p>A new take on the jQuery Tipsy plugin, Twipsy uses CSS3 animations, data attributes for titles, and the new event API in jQuery 1.7.</p> + </div> + <div class="span3"> + <h3><a href="#popover">Popovers</a> <small class="muted">*</small></h3> + <p>Add small overlays of content, like those on the iPad, to any element for housing secondary information.</p> + <p class="muted"><strong>*</strong> Requires <a href="#twipsy">Twipsy</a> to be included</p> + </div> + <div class="span3"> + <h3><a href="#alert">Alert messages</a></h3> + <p>The alert plugin is a tiny class for adding close functionality to alerts.</p> + </div> + </div> <!-- /row --> + <div class="row"> + <div class="span3"> + <h3><a href="#button">Buttons</a></h3> + <p>Do more with buttons. Control button states or create groups of buttons for more components like toolbars.</p> + </div> + <div class="span3"> + <h3><a href="#button">Collapse</a></h3> + <p>Get base styles and flexible support for collapsible components like accordions and navigation.</p> + </div> + <div class="span3"> + <h3><a href="#button">Carousel</a></h3> + <p>Create a merry-go-round of any content you wish to provide an interactive slideshow of content.</p> + </div> + <div class="span3"> + <h3><a href="#button">Typeahead</a></h3> + <p>A basic, easily extended plugin for quickly creating elegant typeaheads with any form text input.</p> + </div> + </div> <!-- /row --> + <hr> + <p class="muted"><span class="label warning">Note:</span> All plugins require the latest version of <a href="http://jquery.com/" target="_blank">jQuery</a> to be included.</p> + </section> <!-- Modal -- GitLab From 2c790304393cce3ba7db3b3d5bc9385b1986b838 Mon Sep 17 00:00:00 2001 From: Mark Otto <markdotto@gmail.com> Date: Sun, 8 Jan 2012 14:33:14 -0800 Subject: [PATCH 250/318] fix navbar styles for .brand --- bootstrap.css | 8 ++++---- bootstrap.min.css | 4 ++-- docs/javascript.html | 24 ++++++++++++------------ lib/navbar.less | 7 +++---- 4 files changed, 21 insertions(+), 22 deletions(-) diff --git a/bootstrap.css b/bootstrap.css index 1fc88441ab..d040f329b8 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 Jan 8 13:30:08 PST 2012 + * Date: Sun Jan 8 14:33:06 PST 2012 */ html, body { margin: 0; @@ -1604,11 +1604,9 @@ i { -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); } -.navbar .brand:hover, .navbar .nav .active > a { +.navbar .brand:hover { color: #ffffff; text-decoration: none; - background-color: #333333; - background-color: rgba(255, 255, 255, 0.05); } .navbar .brand { float: left; @@ -1731,6 +1729,8 @@ i { text-decoration: none; } .navbar .nav .active > a { + color: #ffffff; + text-decoration: none; background-color: #222; background-color: rgba(0, 0, 0, 0.5); } diff --git a/bootstrap.min.css b/bootstrap.min.css index a776da8886..89e61a0b64 100644 --- a/bootstrap.min.css +++ b/bootstrap.min.css @@ -315,7 +315,7 @@ i{background-image:url(docs/assets/img/glyphicons-halflings-sprite.png);backgrou .close{float:right;font-size:20px;font-weight:bold;line-height:13.5px;color:#000000;text-shadow:0 1px 0 #ffffff;filter:alpha(opacity=20);-moz-opacity:0.2;opacity:0.2;}.close:hover{color:#000000;text-decoration:none;filter:alpha(opacity=40);-moz-opacity:0.4;opacity:0.4;} .navbar{overflow:visible;} .navbar-inner{background-color:#222222;background-color:#222222;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);background-repeat:repeat-x;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);} -.navbar .brand:hover,.navbar .nav .active>a{color:#ffffff;text-decoration:none;background-color:#333333;background-color:rgba(255, 255, 255, 0.05);} +.navbar .brand:hover{color:#ffffff;text-decoration:none;} .navbar .brand{float:left;display:block;padding:8px 20px 12px;margin-left:-20px;font-size:20px;font-weight:200;line-height:1;color:#ffffff;} .navbar p{margin:0;line-height:40px;}.navbar p a:hover{color:#ffffff;background-color:transparent;} .navbar .btn{margin-top:5px;} @@ -332,7 +332,7 @@ i{background-image:url(docs/assets/img/glyphicons-halflings-sprite.png);backgrou .navbar .nav>li{display:block;float:left;} .navbar .nav>li>a{float:none;padding:10px 10px 11px;line-height:19px;color:#999999;text-decoration:none;text-shadow:0 -1px 0 rgba(0, 0, 0, 0.25);} .navbar .nav>li>a:hover{background-color:transparent;color:#ffffff;text-decoration:none;} -.navbar .nav .active>a{background-color:#222;background-color:rgba(0, 0, 0, 0.5);} +.navbar .nav .active>a{color:#ffffff;text-decoration:none;background-color:#222;background-color:rgba(0, 0, 0, 0.5);} .navbar .vertical-divider{height:40px;width:1px;margin:0 5px;overflow:hidden;background-color:#222;border-right:1px solid #444;} .navbar .nav.pull-right{margin-left:10px;margin-right:0;} .navbar .dropdown-menu{top:42px;-webkit-border-radius:4px;-moz-border-radius:4px;border-radius:4px;}.navbar .dropdown-menu:before{content:'';display:inline-block;border-left:7px solid transparent;border-right:7px solid transparent;border-bottom:7px solid #ccc;border-bottom-color:rgba(0, 0, 0, 0.1);position:absolute;top:-7px;left:12px;} diff --git a/docs/javascript.html b/docs/javascript.html index 256c366662..a63350c3d9 100644 --- a/docs/javascript.html +++ b/docs/javascript.html @@ -64,57 +64,57 @@ </div> <div class="row"> <div class="span3"> - <h3><a href="#transition">Transitions</a> <small class="muted">*</small></h3> + <h3><a href="./javascript.html#transition">Transitions</a> <small class="muted">*</small></h3> <p>For simple transition effects, include bootstrap-transition.js once to slide in modals or fade out alert messages.</p> <p class="muted"><strong>*</strong> Required for animation in plugins</p> </div> <div class="span3"> - <h3><a href="#modal">Modals</a></h3> + <h3><a href="./javascript.html#modal">Modals</a></h3> <p>A streamlined, but flexible, take on the traditional javascript modal plugin with only the minimum required functionality and smart defaults.</p> </div> <div class="span3"> - <h3><a href="#dropdown">Dropdowns</a></h3> + <h3><a href="./javascript.html#dropdown">Dropdowns</a></h3> <p>Add dropdown menus to nearly anything in Bootstrap with this simple plugin. Bootstrap features full dropdown menu support on in the navbar, tabs, and pills.</p> </div> <div class="span3"> - <h3><a href="#scrollspy">Scrollspy</a></h3> + <h3><a href="./javascript.html#scrollspy">Scrollspy</a></h3> <p>Use scrollspy to automatically update the links in your navbar to show the current active link based on scroll position.</p> </div> </div> <!-- /row --> <div class="row"> <div class="span3"> - <h3><a href="#tab">Togglable tabs</a></h3> + <h3><a href="./javascript.html#tab">Togglable tabs</a></h3> <p>Use this plugin to make tabs and pills more useful by allowing them to toggle through tabbable panes of local content.</p> </div> <div class="span3"> - <h3><a href="#twipsy">Twipsy tooltips</a></h3> + <h3><a href="./javascript.html#twipsy">Twipsy tooltips</a></h3> <p>A new take on the jQuery Tipsy plugin, Twipsy uses CSS3 animations, data attributes for titles, and the new event API in jQuery 1.7.</p> </div> <div class="span3"> - <h3><a href="#popover">Popovers</a> <small class="muted">*</small></h3> + <h3><a href="./javascript.html#popover">Popovers</a> <small class="muted">*</small></h3> <p>Add small overlays of content, like those on the iPad, to any element for housing secondary information.</p> <p class="muted"><strong>*</strong> Requires <a href="#twipsy">Twipsy</a> to be included</p> </div> <div class="span3"> - <h3><a href="#alert">Alert messages</a></h3> + <h3><a href="./javascript.html#alert">Alert messages</a></h3> <p>The alert plugin is a tiny class for adding close functionality to alerts.</p> </div> </div> <!-- /row --> <div class="row"> <div class="span3"> - <h3><a href="#button">Buttons</a></h3> + <h3><a href="./javascript.html#button">Buttons</a></h3> <p>Do more with buttons. Control button states or create groups of buttons for more components like toolbars.</p> </div> <div class="span3"> - <h3><a href="#button">Collapse</a></h3> + <h3><a href="./javascript.html#collapse">Collapse</a></h3> <p>Get base styles and flexible support for collapsible components like accordions and navigation.</p> </div> <div class="span3"> - <h3><a href="#button">Carousel</a></h3> + <h3><a href="./javascript.html#carousel">Carousel</a></h3> <p>Create a merry-go-round of any content you wish to provide an interactive slideshow of content.</p> </div> <div class="span3"> - <h3><a href="#button">Typeahead</a></h3> + <h3><a href="./javascript.html#typeahead">Typeahead</a></h3> <p>A basic, easily extended plugin for quickly creating elegant typeaheads with any form text input.</p> </div> </div> <!-- /row --> diff --git a/lib/navbar.less b/lib/navbar.less index dbad9dcd86..82f9f7d2e4 100644 --- a/lib/navbar.less +++ b/lib/navbar.less @@ -20,12 +20,9 @@ // Text and links .navbar { // Hover and active states - .brand:hover, - .nav .active > a { + .brand:hover { color: @white; text-decoration: none; - background-color: @navBarBgStart; - background-color: rgba(255,255,255,.05); } // Website or project name .brand { @@ -166,6 +163,8 @@ // Active nav items .navbar .nav .active > a { + color: @white; + text-decoration: none; background-color: #222; background-color: rgba(0,0,0,.5); } -- GitLab From 76cadd1d2a493d4cbcfe8acd984bd4f908b25abf Mon Sep 17 00:00:00 2001 From: Jacob Thornton <jacobthornton@gmail.com> Date: Sun, 8 Jan 2012 14:36:41 -0800 Subject: [PATCH 251/318] only append modal to dom if not already present --- js/bootstrap-modal.js | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/js/bootstrap-modal.js b/js/bootstrap-modal.js index 98a62865b3..670d55c4ec 100644 --- a/js/bootstrap-modal.js +++ b/js/bootstrap-modal.js @@ -51,8 +51,9 @@ backdrop.call(this, function () { var transition = $.support.transition && that.$element.hasClass('fade') + !that.$element.parent() && that.$element.appendTo(document.body) //don't move modals dom position + that.$element - .appendTo(document.body) .show() if (transition) { -- GitLab From aa0c4acd80562645ae85ef9a76f6b45e778d7acd Mon Sep 17 00:00:00 2001 From: Jacob Thornton <jacobthornton@gmail.com> Date: Sun, 8 Jan 2012 14:38:21 -0800 Subject: [PATCH 252/318] fix modal insertion boolean --- js/bootstrap-modal.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/js/bootstrap-modal.js b/js/bootstrap-modal.js index 670d55c4ec..df4f3c7643 100644 --- a/js/bootstrap-modal.js +++ b/js/bootstrap-modal.js @@ -51,7 +51,7 @@ backdrop.call(this, function () { var transition = $.support.transition && that.$element.hasClass('fade') - !that.$element.parent() && that.$element.appendTo(document.body) //don't move modals dom position + !that.$element.parent().length && that.$element.appendTo(document.body) //don't move modals dom position that.$element .show() -- GitLab From 6e8a3bba32312cb13cf70acca0575ff14651437e Mon Sep 17 00:00:00 2001 From: Jacob Thornton <jacobthornton@gmail.com> Date: Sun, 8 Jan 2012 14:54:36 -0800 Subject: [PATCH 253/318] add note about firefox persisting disabled state on buttons --- docs/javascript.html | 3 +++ 1 file changed, 3 insertions(+) diff --git a/docs/javascript.html b/docs/javascript.html index f9877dc028..76b5edb87e 100644 --- a/docs/javascript.html +++ b/docs/javascript.html @@ -811,6 +811,9 @@ $('#my-alert').bind('closed', function () { <p>Sets button state to loading - disables button and swaps text to loading text. Loading text should be defined on the button element using the data attribute <code>data-loading-text</code>. </p> <pre class="prettyprint linenums"><button class="btn" data-loading-text="loading stuff..." >...</button></pre> + <p> + <span class="label notice">Notice</span> Firefox persists the disabled state across page loads. A workaround for this is to use: <code>autocomplete="off"</code>. More info can be found <a href="https://github.com/twitter/bootstrap/issues/793">here</a>. + </p> <h4>$().button('reset')</h4> <p>Resets button state - swaps text to original text.</p> <h4>$().button(string)</h4> -- GitLab From 91d393fd4705faff072a33f9697e0bf194fe40db Mon Sep 17 00:00:00 2001 From: Jacob Thornton <jacobthornton@gmail.com> Date: Sun, 8 Jan 2012 15:01:23 -0800 Subject: [PATCH 254/318] change prepend to append --- js/bootstrap-twipsy.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/js/bootstrap-twipsy.js b/js/bootstrap-twipsy.js index 1ce4ad85b6..756775f43e 100644 --- a/js/bootstrap-twipsy.js +++ b/js/bootstrap-twipsy.js @@ -123,7 +123,7 @@ $tip .remove() .css({ top: 0, left: 0, display: 'block' }) - .prependTo(inside ? this.$element : document.body) + .appendTo(inside ? this.$element : document.body) pos = this.getPosition(inside) -- GitLab From dbe5e666af51a4d85923c1a7754da1c929dfc249 Mon Sep 17 00:00:00 2001 From: Maik Schreiber <blizzy@blizzy.de> Date: Mon, 9 Jan 2012 00:02:13 +0100 Subject: [PATCH 255/318] fix typo --- docs/components.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/components.html b/docs/components.html index 0c70ef1680..104bedf54f 100644 --- a/docs/components.html +++ b/docs/components.html @@ -512,7 +512,7 @@ </div> </div> </pre> - <p>To make the navbar fixed, swamp the <code>.navbar-static</code> class for <code>.navbar-fixed</code>. In your CSS, you will also need to account for the overlap it causes by adding <code>padding-top: 40px;</code> to your <code><body></code>.</p> + <p>To make the navbar fixed, swap the <code>.navbar-static</code> class for <code>.navbar-fixed</code>. In your CSS, you will also need to account for the overlap it causes by adding <code>padding-top: 40px;</code> to your <code><body></code>.</p> <pre class="prettyprint linenums"> <div class="navbar navbar-fixed"> ... -- GitLab From 7aca72322effb717804af8348d3b58cfa2cbe000 Mon Sep 17 00:00:00 2001 From: Jacob Thornton <jacobthornton@gmail.com> Date: Sun, 8 Jan 2012 15:12:34 -0800 Subject: [PATCH 256/318] move hover state out of timeout duh --- docs/javascript.html | 2 +- js/bootstrap-twipsy.js | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/docs/javascript.html b/docs/javascript.html index 76b5edb87e..f7980d86b5 100644 --- a/docs/javascript.html +++ b/docs/javascript.html @@ -517,7 +517,7 @@ $('a[data-toggle="tab"]').on('shown', function (e) { </div> </section> - <!-- Tips + <!-- Twipsy ================================================== --> <section id="twipsy"> diff --git a/js/bootstrap-twipsy.js b/js/bootstrap-twipsy.js index 756775f43e..b7b802926d 100644 --- a/js/bootstrap-twipsy.js +++ b/js/bootstrap-twipsy.js @@ -88,8 +88,8 @@ if (!self.options.delay || !self.options.delay.hide) { self.hide() } else { + self.hoverState = 'out' setTimeout(function() { - self.hoverState = 'out' if (self.hoverState == 'out') { self.hide() } -- GitLab From 4b79443bba6ad83d9da62e00765ef45121fb39ff Mon Sep 17 00:00:00 2001 From: Mark Otto <markdotto@gmail.com> Date: Sun, 8 Jan 2012 15:33:44 -0800 Subject: [PATCH 257/318] fix dropdowns for active state in dropdown menus --- bootstrap.css | 23 ++++++++++++++++++----- bootstrap.min.css | 11 +++++++---- lib/dropdowns.less | 13 ++++++++++--- lib/navs.less | 30 +++++++++++++++++++++++++++--- 4 files changed, 62 insertions(+), 15 deletions(-) diff --git a/bootstrap.css b/bootstrap.css index d040f329b8..f4a604e014 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 Jan 8 14:33:06 PST 2012 + * Date: Sun Jan 8 15:33:29 PST 2012 */ html, body { margin: 0; @@ -1493,7 +1493,7 @@ i { line-height: 18px; color: #555555; } -.dropdown-menu a:hover, .dropdown-menu .active > a { +.dropdown-menu li > a:hover { color: #fff; text-decoration: none; text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25); @@ -1511,6 +1511,11 @@ i { -moz-box-shadow: inset 0 1px 0 rgba(0, 0, 0, 0.075), inset 0 -1px rgba(0, 0, 0, 0.075); box-shadow: inset 0 1px 0 rgba(0, 0, 0, 0.075), inset 0 -1px rgba(0, 0, 0, 0.075); } +.dropdown-menu .active > a, .dropdown-menu .active > a:hover { + color: #fff; + background-color: #999; + background-image: none; +} .dropdown.open .dropdown-toggle { color: #ffffff; background: #ccc; @@ -1870,7 +1875,7 @@ i { .tabs > li > a:hover { border-color: #eee #eee #ddd; } -.tabs .active > a, .tabs .active > a:hover { +.tabs > .active > a, .tabs > .active > a:hover { color: #555555; background-color: #ffffff; border: 1px solid #ddd; @@ -1941,11 +1946,19 @@ i { .tabs .dropdown-toggle:hover .caret, .pills .dropdown-toggle:hover .caret { border-top-color: #005580; } -.tabs .open .dropdown-toggle, .pills .open .dropdown-toggle { +.tabs .active .dropdown-toggle .caret, .pills .active .dropdown-toggle .caret { + border-top-color: #333; +} +.nav > .dropdown.active > a:hover { + color: #000; + cursor: pointer; +} +.tabs .open .dropdown-toggle, .pills .open .dropdown-toggle, .nav > .open.active > a:hover { + color: #fff; background-color: #999; border-color: #999; } -.nav .open .caret, .nav .open a:hover .caret { +.nav .open .caret, .nav .open.active .caret, .nav .open a:hover .caret { border-top-color: #fff; filter: alpha(opacity=100); -moz-opacity: 1; diff --git a/bootstrap.min.css b/bootstrap.min.css index 89e61a0b64..2af6114680 100644 --- a/bootstrap.min.css +++ b/bootstrap.min.css @@ -305,7 +305,8 @@ i{background-image:url(docs/assets/img/glyphicons-halflings-sprite.png);backgrou .dropdown:hover .caret,.open.dropdown .caret{filter:alpha(opacity=100);-moz-opacity:1;opacity:1;} .dropdown-menu{position:absolute;top:40px;z-index:1000;float:left;display:none;min-width:160px;max-width:220px;_width:160px;padding:5px 0;margin:0;list-style:none;background-color:#ffffff;border-color:#999;border-color:rgba(0, 0, 0, 0.1);border-style:solid;border-width:1px;-webkit-border-radius:0 0 5px 5px;-moz-border-radius:0 0 5px 5px;border-radius:0 0 5px 5px;-webkit-box-shadow:0 5px 10px rgba(0, 0, 0, 0.2);-moz-box-shadow:0 5px 10px rgba(0, 0, 0, 0.2);box-shadow:0 5px 10px rgba(0, 0, 0, 0.2);-webkit-background-clip:padding-box;-moz-background-clip:padding;background-clip:padding-box;zoom:1;}.dropdown-menu .divider{height:1px;margin:5px 1px;overflow:hidden;background-color:#e5e5e5;border-bottom:1px solid #ffffff;} .dropdown-menu a{display:block;padding:2px 15px;clear:both;font-weight:normal;line-height:18px;color:#555555;} -.dropdown-menu a:hover,.dropdown-menu .active>a{color:#fff;text-decoration:none;text-shadow:0 -1px 0 rgba(0, 0, 0, 0.25);background-color:#0077b3;background-image:-khtml-gradient(linear, left top, left bottom, from(#0088cc), to(#0077b3));background-image:-moz-linear-gradient(top, #0088cc, #0077b3);background-image:-ms-linear-gradient(top, #0088cc, #0077b3);background-image:-webkit-gradient(linear, left top, left bottom, color-stop(0%, #0088cc), color-stop(100%, #0077b3));background-image:-webkit-linear-gradient(top, #0088cc, #0077b3);background-image:-o-linear-gradient(top, #0088cc, #0077b3);background-image:linear-gradient(top, #0088cc, #0077b3);background-repeat:repeat-x;filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#0088cc', endColorstr='#0077b3', GradientType=0);-webkit-box-shadow:inset 0 1px 0 rgba(0, 0, 0, 0.075),inset 0 -1px rgba(0, 0, 0, 0.075);-moz-box-shadow:inset 0 1px 0 rgba(0, 0, 0, 0.075),inset 0 -1px rgba(0, 0, 0, 0.075);box-shadow:inset 0 1px 0 rgba(0, 0, 0, 0.075),inset 0 -1px rgba(0, 0, 0, 0.075);} +.dropdown-menu li>a:hover{color:#fff;text-decoration:none;text-shadow:0 -1px 0 rgba(0, 0, 0, 0.25);background-color:#0077b3;background-image:-khtml-gradient(linear, left top, left bottom, from(#0088cc), to(#0077b3));background-image:-moz-linear-gradient(top, #0088cc, #0077b3);background-image:-ms-linear-gradient(top, #0088cc, #0077b3);background-image:-webkit-gradient(linear, left top, left bottom, color-stop(0%, #0088cc), color-stop(100%, #0077b3));background-image:-webkit-linear-gradient(top, #0088cc, #0077b3);background-image:-o-linear-gradient(top, #0088cc, #0077b3);background-image:linear-gradient(top, #0088cc, #0077b3);background-repeat:repeat-x;filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#0088cc', endColorstr='#0077b3', GradientType=0);-webkit-box-shadow:inset 0 1px 0 rgba(0, 0, 0, 0.075),inset 0 -1px rgba(0, 0, 0, 0.075);-moz-box-shadow:inset 0 1px 0 rgba(0, 0, 0, 0.075),inset 0 -1px rgba(0, 0, 0, 0.075);box-shadow:inset 0 1px 0 rgba(0, 0, 0, 0.075),inset 0 -1px rgba(0, 0, 0, 0.075);} +.dropdown-menu .active>a,.dropdown-menu .active>a:hover{color:#fff;background-color:#999;background-image:none;} .dropdown.open .dropdown-toggle{color:#ffffff;background:#ccc;background:rgba(0, 0, 0, 0.3);} .dropdown.open .dropdown-menu{display:block;} .typeahead{margin-top:2px;-webkit-border-radius:4px;-moz-border-radius:4px;border-radius:4px;} @@ -356,7 +357,7 @@ i{background-image:url(docs/assets/img/glyphicons-halflings-sprite.png);backgrou .tabs{border-bottom:1px solid #ddd;} .tabs>li{margin-bottom:-1px;} .tabs>li>a{padding-top:9px;padding-bottom:9px;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{border-color:#eee #eee #ddd;} -.tabs .active>a,.tabs .active>a:hover{color:#555555;background-color:#ffffff;border:1px solid #ddd;border-bottom-color:transparent;cursor:default;} +.tabs>.active>a,.tabs>.active>a:hover{color:#555555;background-color:#ffffff;border:1px solid #ddd;border-bottom-color:transparent;cursor:default;} .pills>li>a{padding-top:8px;padding-bottom:8px;margin-top:2px;margin-bottom:2px;-webkit-border-radius:5px;-moz-border-radius:5px;border-radius:5px;} .pills .active>a,.pills .active>a:hover{color:#ffffff;background-color:#0088cc;} .nav.stacked>li{float:none;} @@ -372,8 +373,10 @@ i{background-image:url(docs/assets/img/glyphicons-halflings-sprite.png);backgrou .pills .dropdown-menu{-webkit-border-radius:4px;-moz-border-radius:4px;border-radius:4px;} .tabs .dropdown-toggle .caret,.pills .dropdown-toggle .caret{border-top-color:#0088cc;margin-top:6px;} .tabs .dropdown-toggle:hover .caret,.pills .dropdown-toggle:hover .caret{border-top-color:#005580;} -.tabs .open .dropdown-toggle,.pills .open .dropdown-toggle{background-color:#999;border-color:#999;} -.nav .open .caret,.nav .open a:hover .caret{border-top-color:#fff;filter:alpha(opacity=100);-moz-opacity:1;opacity:1;} +.tabs .active .dropdown-toggle .caret,.pills .active .dropdown-toggle .caret{border-top-color:#333;} +.nav>.dropdown.active>a:hover{color:#000;cursor:pointer;} +.tabs .open .dropdown-toggle,.pills .open .dropdown-toggle,.nav>.open.active>a:hover{color:#fff;background-color:#999;border-color:#999;} +.nav .open .caret,.nav .open.active .caret,.nav .open a:hover .caret{border-top-color:#fff;filter:alpha(opacity=100);-moz-opacity:1;opacity:1;} .tabs.stacked .open>a:hover{border-color:#999;} .tabbable{zoom:1;}.tabbable:before,.tabbable:after{display:table;*display:inline;content:"";zoom:1;} .tabbable:after{clear:both;} diff --git a/lib/dropdowns.less b/lib/dropdowns.less index 484cbbcd70..85f74b6322 100644 --- a/lib/dropdowns.less +++ b/lib/dropdowns.less @@ -71,9 +71,8 @@ } } -// Hover & Active states -.dropdown-menu a:hover, -.dropdown-menu .active > a { +// Hover state +.dropdown-menu li > a:hover { color: #fff; text-decoration: none; text-shadow: 0 -1px 0 rgba(0,0,0,.25); @@ -82,6 +81,14 @@ .box-shadow(@shadow); } +// Active state +.dropdown-menu .active > a, +.dropdown-menu .active > a:hover { + color: #fff; + background-color: #999; + background-image: none; // remove the gradient +} + // Open state for the dropdown .dropdown.open { .dropdown-toggle { diff --git a/lib/navs.less b/lib/navs.less index 804a273bb4..432ab3cbd1 100644 --- a/lib/navs.less +++ b/lib/navs.less @@ -101,8 +101,8 @@ } } // Active state, and it's :hover to override normal :hover -.tabs .active > a, -.tabs .active > a:hover { +.tabs > .active > a, +.tabs > .active > a:hover { color: @gray; background-color: @white; border: 1px solid #ddd; @@ -183,6 +183,10 @@ .pills .dropdown-menu { .border-radius(4px); } + +// Default dropdown links +// ------------------------- +// Make carets use linkColor to start .tabs .dropdown-toggle .caret, .pills .dropdown-toggle .caret { border-top-color: @linkColor; @@ -192,12 +196,32 @@ .pills .dropdown-toggle:hover .caret { border-top-color: @linkColorHover; } + +// Active dropdown links +// ------------------------- +.tabs .active .dropdown-toggle .caret, +.pills .active .dropdown-toggle .caret { + border-top-color: #333; +} + +// Active:hover dropdown links +// ------------------------- +.nav > .dropdown.active > a:hover { + color: #000; + cursor: pointer; +} + +// Open dropdowns +// ------------------------- .tabs .open .dropdown-toggle, -.pills .open .dropdown-toggle { +.pills .open .dropdown-toggle, +.nav > .open.active > a:hover { + color: #fff; background-color: #999; border-color: #999; } .nav .open .caret, +.nav .open.active .caret, .nav .open a:hover .caret { border-top-color: #fff; .opacity(100); -- GitLab From eaa8220d70f84a710c9dfa1bd49a7c35bcab1a3b Mon Sep 17 00:00:00 2001 From: Mark Otto <markdotto@gmail.com> Date: Sun, 8 Jan 2012 15:38:57 -0800 Subject: [PATCH 258/318] add utilities.less file for generic classes --- bootstrap.css | 29 ++++++++++++++++------------- bootstrap.min.css | 9 +++++---- lib/bootstrap.less | 3 +++ lib/scaffolding.less | 16 ---------------- lib/utilities.less | 23 +++++++++++++++++++++++ 5 files changed, 47 insertions(+), 33 deletions(-) create mode 100644 lib/utilities.less diff --git a/bootstrap.css b/bootstrap.css index f4a604e014..5fa1067a05 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 Jan 8 15:33:29 PST 2012 + * Date: Sun Jan 8 15:38:44 PST 2012 */ html, body { margin: 0; @@ -241,18 +241,6 @@ a:hover { color: #005580; text-decoration: underline; } -.pull-right { - float: right; -} -.pull-left { - float: left; -} -.hide { - display: none; -} -.show { - display: block; -} .row { margin-left: -20px; zoom: 1; @@ -3018,6 +3006,21 @@ a.thumbnail:hover { background-image: -o-linear-gradient(-45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent); background-image: linear-gradient(-45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent); } +.pull-right { + float: right; +} +.pull-left { + float: left; +} +.hide { + display: none; +} +.show { + display: block; +} +.invisible { + visibility: hidden; +} .hidden { display: none; visibility: hidden; diff --git a/bootstrap.min.css b/bootstrap.min.css index 2af6114680..648efecb7e 100644 --- a/bootstrap.min.css +++ b/bootstrap.min.css @@ -32,10 +32,6 @@ body{margin:0;font-family:"Helvetica Neue",Helvetica,Arial,sans-serif;font-size: .sidebar-right .fluid-sidebar{float:right;margin-right:-240px;} .fluid-content{float:left;width:100%;} a{font-weight:inherit;line-height:inherit;color:#0088cc;text-decoration:none;}a:hover{color:#005580;text-decoration:underline;} -.pull-right{float:right;} -.pull-left{float:left;} -.hide{display:none;} -.show{display:block;} .row{margin-left:-20px;zoom:1;}.row:before,.row:after{display:table;*display:inline;content:"";zoom:1;} .row:after{clear:both;} [class*="span"]{float:left;margin-left:20px;} @@ -516,5 +512,10 @@ a.thumbnail:hover{border-color:#0088cc;-webkit-box-shadow:0 1px 4px rgba(0, 105, .progress.success.striped .bar{background-color:#62c462;background-image:-webkit-gradient(linear, 0 100%, 100% 0, color-stop(0.25, rgba(255, 255, 255, 0.15)), color-stop(0.25, transparent), color-stop(0.5, transparent), color-stop(0.5, rgba(255, 255, 255, 0.15)), color-stop(0.75, rgba(255, 255, 255, 0.15)), color-stop(0.75, transparent), to(transparent));background-image:-webkit-linear-gradient(-45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);background-image:-moz-linear-gradient(-45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);background-image:-ms-linear-gradient(-45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);background-image:-o-linear-gradient(-45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);background-image:linear-gradient(-45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);} .progress.info .bar{background-color:#339bb9;background-image:-khtml-gradient(linear, left top, left bottom, from(#5bc0de), to(#339bb9));background-image:-moz-linear-gradient(top, #5bc0de, #339bb9);background-image:-ms-linear-gradient(top, #5bc0de, #339bb9);background-image:-webkit-gradient(linear, left top, left bottom, color-stop(0%, #5bc0de), color-stop(100%, #339bb9));background-image:-webkit-linear-gradient(top, #5bc0de, #339bb9);background-image:-o-linear-gradient(top, #5bc0de, #339bb9);background-image:linear-gradient(top, #5bc0de, #339bb9);background-repeat:repeat-x;filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#5bc0de', endColorstr='#339bb9', GradientType=0);} .progress.info.striped .bar{background-color:#5bc0de;background-image:-webkit-gradient(linear, 0 100%, 100% 0, color-stop(0.25, rgba(255, 255, 255, 0.15)), color-stop(0.25, transparent), color-stop(0.5, transparent), color-stop(0.5, rgba(255, 255, 255, 0.15)), color-stop(0.75, rgba(255, 255, 255, 0.15)), color-stop(0.75, transparent), to(transparent));background-image:-webkit-linear-gradient(-45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);background-image:-moz-linear-gradient(-45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);background-image:-ms-linear-gradient(-45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);background-image:-o-linear-gradient(-45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);background-image:linear-gradient(-45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);} +.pull-right{float:right;} +.pull-left{float:left;} +.hide{display:none;} +.show{display:block;} +.invisible{visibility:hidden;} .hidden{display:none;visibility:hidden;} @media (max-width: 480px){.navbar .nav{position:absolute;top:0;left:0;width:180px;padding-top:40px;list-style:none;} .navbar .nav,.navbar .nav>li:last-child a{-webkit-border-radius:0 0 4px 0;-moz-border-radius:0 0 4px 0;border-radius:0 0 4px 0;} .navbar .nav>li{float:none;display:none;} .navbar .nav>li>a{float:none;background-color:#222;} .navbar .nav>.active{display:block;position:absolute;top:0;left:0;} .navbar .nav>.active>a{background-color:transparent;} .navbar .nav>.active>a:hover{background-color:#333;} .navbar .nav>.active>a:after{display:inline-block;width:0;height:0;margin-top:8px;margin-left:6px;text-indent:-99999px;vertical-align:top;border-left:4px solid transparent;border-right:4px solid transparent;border-top:4px solid #ffffff;filter:alpha(opacity=100);-moz-opacity:1;opacity:1;content:"↓";} .navbar .nav:hover>li{display:block;} .navbar .nav:hover>li>a:hover{background-color:#333;} .horizontal-form .control-group>label{float:none;width:auto;padding-top:0;text-align:left;} .horizontal-form .controls{margin-left:0;} .horizontal-form .control-list{padding-top:0;} .horizontal-form .form-actions{padding-left:0;} .modal{position:fixed;top:20px;left:20px;right:20px;width:auto;}.modal.fade.in{top:auto;} .modal-header .close{padding:10px;}}@media (max-width: 768px){.navbar-fixed{position:absolute;} .navbar-fixed .nav{float:none;} .container{width:auto;padding:0 20px;} .row{margin-left:0;} .row>[class*="span"]{float:none;display:block;width:auto;margin:0;}}@media (min-width: 768px) and (max-width: 940px){.container{width:748px;} .span1{width:44px;} .span2{width:108px;} .span3{width:172px;} .span4{width:236px;} .span5{width:300px;} .span6{width:364px;} .span7{width:428px;} .span8{width:492px;} .span9{width:556px;} .span10{width:620px;} .span11{width:684px;} .span12{width:748px;} .offset1{margin-left:64px;} .offset2{margin-left:128px;} .offset3{margin-left:192px;} .offset4{margin-left:256px;} .offset5{margin-left:320px;} .offset6{margin-left:384px;} .offset7{margin-left:448px;} .offset8{margin-left:512px;} .offset9{margin-left:576px;} .offset10{margin-left:640px;} .offset11{margin-left:704px;} .offset12{margin-left:768px;}} diff --git a/lib/bootstrap.less b/lib/bootstrap.less index 2bec3dd016..57ada98a98 100644 --- a/lib/bootstrap.less +++ b/lib/bootstrap.less @@ -52,5 +52,8 @@ @import "labels.less"; @import "progress-bars.less"; +// Utility classes +@import "utilities.less"; // Has to be last to override when necessary + // Responsive @import "responsive.less"; \ No newline at end of file diff --git a/lib/scaffolding.less b/lib/scaffolding.less index a1f41ab66a..a0d54a8865 100644 --- a/lib/scaffolding.less +++ b/lib/scaffolding.less @@ -70,22 +70,6 @@ a { } } -// Quick floats -.pull-right { - float: right; -} -.pull-left { - float: left; -} - -// Toggling content -.hide { - display: none; -} -.show { - display: block; -} - // GRID SYSTEM // ----------- diff --git a/lib/utilities.less b/lib/utilities.less new file mode 100644 index 0000000000..d60d220311 --- /dev/null +++ b/lib/utilities.less @@ -0,0 +1,23 @@ +// UTILITY CLASSES +// --------------- + +// Quick floats +.pull-right { + float: right; +} +.pull-left { + float: left; +} + +// Toggling content +.hide { + display: none; +} +.show { + display: block; +} + +// Visibility +.invisible { + visibility: hidden; +} -- GitLab From 83c0896999c91f4d85bb75434f4a4ecfaff07fe0 Mon Sep 17 00:00:00 2001 From: Mark Otto <markdotto@gmail.com> Date: Sun, 8 Jan 2012 21:48:07 -0800 Subject: [PATCH 259/318] updated js pages to put examples first --- bootstrap.css | 8 +- bootstrap.min.css | 2 +- docs/base-css.html | 146 --------- docs/components.html | 164 ++++++++- docs/javascript.html | 748 ++++++++++++++++++++++++------------------ docs/scaffolding.html | 41 ++- lib/buttons.less | 2 +- 7 files changed, 619 insertions(+), 492 deletions(-) diff --git a/bootstrap.css b/bootstrap.css index 5fa1067a05..b859657ef0 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 Jan 8 15:38:44 PST 2012 + * Date: Sun Jan 8 19:32:37 PST 2012 */ html, body { margin: 0; @@ -2525,9 +2525,9 @@ i { padding: 9px 14px 9px; font-size: 15px; line-height: normal; - -webkit-border-radius: 6px; - -moz-border-radius: 6px; - border-radius: 6px; + -webkit-border-radius: 5px; + -moz-border-radius: 5px; + border-radius: 5px; } .btn.small { padding: 7px 9px 7px; diff --git a/bootstrap.min.css b/bootstrap.min.css index 648efecb7e..3dc0151638 100644 --- a/bootstrap.min.css +++ b/bootstrap.min.css @@ -445,7 +445,7 @@ i{background-image:url(docs/assets/img/glyphicons-halflings-sprite.png);backgrou .btn.active,.btn:active{-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);} .btn.disabled{cursor:default;background-image:none;filter:progid:DXImageTransform.Microsoft.gradient(enabled = false);filter:alpha(opacity=65);-moz-opacity:0.65;opacity:0.65;-webkit-box-shadow:none;-moz-box-shadow:none;box-shadow:none;} .btn[disabled]{cursor:default;background-image:none;filter:progid:DXImageTransform.Microsoft.gradient(enabled = false);filter:alpha(opacity=65);-moz-opacity:0.65;opacity:0.65;-webkit-box-shadow:none;-moz-box-shadow:none;box-shadow:none;} -.btn.large{padding:9px 14px 9px;font-size:15px;line-height:normal;-webkit-border-radius:6px;-moz-border-radius:6px;border-radius:6px;} +.btn.large{padding:9px 14px 9px;font-size:15px;line-height:normal;-webkit-border-radius:5px;-moz-border-radius:5px;border-radius:5px;} .btn.small{padding:7px 9px 7px;font-size:11px;} :root .alert-message,:root .btn{border-radius:0 \0;} button.btn::-moz-focus-inner,input[type=submit].btn::-moz-focus-inner{padding:0;border:0;} diff --git a/docs/base-css.html b/docs/base-css.html index c1cb3fd2dd..29f5d1d197 100644 --- a/docs/base-css.html +++ b/docs/base-css.html @@ -1277,152 +1277,6 @@ <br> - <h2>Button groups <small>Join buttons for more toolbar-like functionality</small></h2> - <div class="row"> - <div class="span4"> - <h3>Button groups</h3> - <p>Use button groups to join multiple buttons together as one composite component. Build them with a series of <code><a></code> or <code><button></code> elements.</p> - <p>You can also combine sets of <code><div class="btn-group"></code> into a <code><div class="btn-toolbar"></code> for more complex projects.</p> - <div class="well" style="padding: 10px; margin-bottom: 9px;"> - <div class="btn-group"> - <a class="btn" href="#">Left</a> - <a class="btn" href="#">Middle</a> - <a class="btn" href="#">Right</a> - </div> - </div> - <div class="well" style="padding: 10px;"> - <div class="btn-toolbar"> - <div class="btn-group"> - <a class="btn" href="#">1</a> - <a class="btn" href="#">2</a> - <a class="btn" href="#">3</a> - <a class="btn" href="#">4</a> - </div> - <div class="btn-group"> - <a class="btn" href="#">5</a> - <a class="btn" href="#">6</a> - <a class="btn" href="#">7</a> - </div> - <div class="btn-group"> - <a class="btn" href="#">8</a> - </div> - </div> - </div> - - </div> - <div class="span4"> - <h3>Example markup</h3> - <p>Here's how the HTML looks for a standard button group built with anchor tag buttons:</p> -<pre class="prettyprint linenums"> -<div class="btn-group"> - <a class="btn" href="#">1</a> - <a class="btn" href="#">2</a> - <a class="btn" href="#">3</a> -</div> -</pre> - <p>And with a toolbar for multiple groups:</p> -<pre class="prettyprint linenums"> -<div class="btn-toolbar"> - <div class="btn-group"> - ... - </div> -</div> -</pre> - </div> - <div class="span4"> - <h3>Checkbox and radio flavors</h3> - <p>Button groups can also function as radios, where only one button may be active, or checkboxes, where any number of buttons may be active. View <a href="./javascript.html#buttons">the Javascript docs</a> for that.</p> - <p><a class="btn js-btn" href="./javascript.html#buttons">Get the javascript »</a></p> - <hr> - <h4 class="muted">Heads up</h4> - <p class="muted">CSS for button groups is in a separate file, button-groups.less.</p> - </div> - </div> - - <br> - <h2>Button dropdowns <small>Built on button groups to provide contextual menus</small></h2> - <div class="row"> - <div class="span4"> - <h3>Split button dropdowns</h3> - <p>Building on the button group styles and markup, we can easily create a split button. Split buttons feature a standard action on the left and a dropdown toggle on the right with contextual links.</p> - <div class="well" style="padding: 10px; margin-bottom: 9px;"> - <div class="btn-toolbar" style="margin-bottom: 9px;"> - <div class="btn-group"> - <a class="btn" href="#">Action</a> - <a class="btn dropdown-toggle" data-toggle="dropdown" href="#"><span class="caret"></span></a> - <ul class="dropdown-menu"> - <li><a href="#">Action</a></li> - <li><a href="#">Another action</a></li> - <li><a href="#">Something else here</a></li> - <li class="divider"></li> - <li><a href="#">Separated link</a></li> - </ul> - </div><!-- /btn-group --> - <div class="btn-group"> - <a class="btn primary" href="#">Action</a> - <a class="btn primary dropdown-toggle" data-toggle="dropdown" href="#"><span class="caret"></span></a> - <ul class="dropdown-menu"> - <li><a href="#">Action</a></li> - <li><a href="#">Another action</a></li> - <li><a href="#">Something else here</a></li> - <li class="divider"></li> - <li><a href="#">Separated link</a></li> - </ul> - </div><!-- /btn-group --> - <div class="btn-group"> - <a class="btn danger" href="#">Danger</a> - <a class="btn danger dropdown-toggle" data-toggle="dropdown" href="#"><span class="caret"></span></a> - <ul class="dropdown-menu"> - <li><a href="#">Action</a></li> - <li><a href="#">Another action</a></li> - <li><a href="#">Something else here</a></li> - <li class="divider"></li> - <li><a href="#">Separated link</a></li> - </ul> - </div><!-- /btn-group --> - </div> - <div class="btn-toolbar"> - <div class="btn-group"> - <a class="btn success" href="#">Success</a> - <a class="btn success dropdown-toggle" data-toggle="dropdown" href="#"><span class="caret"></span></a> - <ul class="dropdown-menu"> - <li><a href="#">Action</a></li> - <li><a href="#">Another action</a></li> - <li><a href="#">Something else here</a></li> - <li class="divider"></li> - <li><a href="#">Separated link</a></li> - </ul> - </div><!-- /btn-group --> - <div class="btn-group"> - <a class="btn info" href="#">Info</a> - <a class="btn info dropdown-toggle" data-toggle="dropdown" href="#"><span class="caret"></span></a> - <ul class="dropdown-menu"> - <li><a href="#">Action</a></li> - <li><a href="#">Another action</a></li> - <li><a href="#">Something else here</a></li> - <li class="divider"></li> - <li><a href="#">Separated link</a></li> - </ul> - </div><!-- /btn-group --> - </div> - </div> <!-- /well --> - </div> - <div class="span8"> - <h3>Example markup</h3> - <p>Similar to a button group, our markup uses regular button markup, but with a handful of additions to refine the style and support Bootstrap's dropdown jQuery plugin.</p> -<pre class="prettyprint linenums"> -<div class="btn-group"> - <a class="btn" href="#">Action</a> - <a class="btn dropdown-toggle" data-toggle="dropdown" href="#"> - <span class="caret"></span> - </a> - <ul class="dropdown-menu"> - <!-- dropdown menu links --> - </ul> -</div> -</pre> - </div> - </div> </section> diff --git a/docs/components.html b/docs/components.html index 104bedf54f..f3e8d42a5e 100644 --- a/docs/components.html +++ b/docs/components.html @@ -55,9 +55,171 @@ + <!-- Button Groups + ================================================== --> + <section id="buttonGroups"> + <div class="page-header"> + <h1>Button groups <small>Join buttons for more toolbar-like functionality</small></h1> + </div> + <div class="row"> + <div class="span4"> + <h3>Button groups</h3> + <p>Use button groups to join multiple buttons together as one composite component. Build them with a series of <code><a></code> or <code><button></code> elements.</p> + <p>You can also combine sets of <code><div class="btn-group"></code> into a <code><div class="btn-toolbar"></code> for more complex projects.</p> + <div class="well" style="padding: 10px; margin-bottom: 9px;"> + <div class="btn-group"> + <a class="btn" href="#">Left</a> + <a class="btn" href="#">Middle</a> + <a class="btn" href="#">Right</a> + </div> + </div> + <div class="well" style="padding: 10px;"> + <div class="btn-toolbar"> + <div class="btn-group"> + <a class="btn" href="#">1</a> + <a class="btn" href="#">2</a> + <a class="btn" href="#">3</a> + <a class="btn" href="#">4</a> + </div> + <div class="btn-group"> + <a class="btn" href="#">5</a> + <a class="btn" href="#">6</a> + <a class="btn" href="#">7</a> + </div> + <div class="btn-group"> + <a class="btn" href="#">8</a> + </div> + </div> + </div> + + </div> + <div class="span4"> + <h3>Example markup</h3> + <p>Here's how the HTML looks for a standard button group built with anchor tag buttons:</p> +<pre class="prettyprint linenums"> +<div class="btn-group"> + <a class="btn" href="#">1</a> + <a class="btn" href="#">2</a> + <a class="btn" href="#">3</a> +</div> +</pre> + <p>And with a toolbar for multiple groups:</p> +<pre class="prettyprint linenums"> +<div class="btn-toolbar"> + <div class="btn-group"> + ... + </div> +</div> +</pre> + </div> + <div class="span4"> + <h3>Checkbox and radio flavors</h3> + <p>Button groups can also function as radios, where only one button may be active, or checkboxes, where any number of buttons may be active. View <a href="./javascript.html#buttons">the Javascript docs</a> for that.</p> + <p><a class="btn js-btn" href="./javascript.html#buttons">Get the javascript »</a></p> + <hr> + <h4 class="muted">Heads up</h4> + <p class="muted">CSS for button groups is in a separate file, button-groups.less.</p> + </div> + </div> + </section> + + + + <!-- Split button dropdowns + ================================================== --> + <section id="buttonGroups"> + <div class="page-header"> + <h1>Split button dropdowns <small>Built on button groups to provide contextual menus</small></h1> + </div> + <div class="row"> + <div class="span4"> + <h3>Split button dropdowns</h3> + <p>Building on the button group styles and markup, we can easily create a split button. Split buttons feature a standard action on the left and a dropdown toggle on the right with contextual links.</p> + <div class="well" style="padding: 10px; margin-bottom: 9px;"> + <div class="btn-toolbar" style="margin-bottom: 9px;"> + <div class="btn-group"> + <a class="btn" href="#">Action</a> + <a class="btn dropdown-toggle" data-toggle="dropdown" href="#"><span class="caret"></span></a> + <ul class="dropdown-menu"> + <li><a href="#">Action</a></li> + <li><a href="#">Another action</a></li> + <li><a href="#">Something else here</a></li> + <li class="divider"></li> + <li><a href="#">Separated link</a></li> + </ul> + </div><!-- /btn-group --> + <div class="btn-group"> + <a class="btn primary" href="#">Action</a> + <a class="btn primary dropdown-toggle" data-toggle="dropdown" href="#"><span class="caret"></span></a> + <ul class="dropdown-menu"> + <li><a href="#">Action</a></li> + <li><a href="#">Another action</a></li> + <li><a href="#">Something else here</a></li> + <li class="divider"></li> + <li><a href="#">Separated link</a></li> + </ul> + </div><!-- /btn-group --> + <div class="btn-group"> + <a class="btn danger" href="#">Danger</a> + <a class="btn danger dropdown-toggle" data-toggle="dropdown" href="#"><span class="caret"></span></a> + <ul class="dropdown-menu"> + <li><a href="#">Action</a></li> + <li><a href="#">Another action</a></li> + <li><a href="#">Something else here</a></li> + <li class="divider"></li> + <li><a href="#">Separated link</a></li> + </ul> + </div><!-- /btn-group --> + </div> + <div class="btn-toolbar"> + <div class="btn-group"> + <a class="btn success" href="#">Success</a> + <a class="btn success dropdown-toggle" data-toggle="dropdown" href="#"><span class="caret"></span></a> + <ul class="dropdown-menu"> + <li><a href="#">Action</a></li> + <li><a href="#">Another action</a></li> + <li><a href="#">Something else here</a></li> + <li class="divider"></li> + <li><a href="#">Separated link</a></li> + </ul> + </div><!-- /btn-group --> + <div class="btn-group"> + <a class="btn info" href="#">Info</a> + <a class="btn info dropdown-toggle" data-toggle="dropdown" href="#"><span class="caret"></span></a> + <ul class="dropdown-menu"> + <li><a href="#">Action</a></li> + <li><a href="#">Another action</a></li> + <li><a href="#">Something else here</a></li> + <li class="divider"></li> + <li><a href="#">Separated link</a></li> + </ul> + </div><!-- /btn-group --> + </div> + </div> <!-- /well --> + </div> + <div class="span8"> + <h3>Example markup</h3> + <p>Similar to a button group, our markup uses regular button markup, but with a handful of additions to refine the style and support Bootstrap's dropdown jQuery plugin.</p> +<pre class="prettyprint linenums"> +<div class="btn-group"> + <a class="btn" href="#">Action</a> + <a class="btn dropdown-toggle" data-toggle="dropdown" href="#"> + <span class="caret"></span> + </a> + <ul class="dropdown-menu"> + <!-- dropdown menu links --> + </ul> +</div> +</pre> + </div> + </div> + </section> + + + <!-- Nav, Tabs, & Pills ================================================== --> -<section id="tabsAndPills"> +<section id="navs"> <div class="page-header"> <h1>Nav, tabs, and pills <small>Highly customizable list-style navigation</small></h1> </div> diff --git a/docs/javascript.html b/docs/javascript.html index 63a51dc43b..c0469c0a76 100644 --- a/docs/javascript.html +++ b/docs/javascript.html @@ -57,54 +57,48 @@ <!-- Using Javascript w/ Bootstrap ================================================== --> - <section id="javascript"> <div class="page-header"> <h1>jQuery plugins <small>A dozen Bootstrap plugins to get you started</small></h1> </div> <div class="row"> <div class="span3"> - <h3><a href="./javascript.html#transition">Transitions</a> <small class="muted">*</small></h3> - <p>For simple transition effects, include bootstrap-transition.js once to slide in modals or fade out alert messages.</p> - <p class="muted"><strong>*</strong> Required for animation in plugins</p> - </div> - <div class="span3"> - <h3><a href="./javascript.html#modal">Modals</a></h3> + <h3><a href="./javascript.html#modals">Modals</a></h3> <p>A streamlined, but flexible, take on the traditional javascript modal plugin with only the minimum required functionality and smart defaults.</p> </div> <div class="span3"> - <h3><a href="./javascript.html#dropdown">Dropdowns</a></h3> + <h3><a href="./javascript.html#dropdowns">Dropdowns</a></h3> <p>Add dropdown menus to nearly anything in Bootstrap with this simple plugin. Bootstrap features full dropdown menu support on in the navbar, tabs, and pills.</p> </div> <div class="span3"> <h3><a href="./javascript.html#scrollspy">Scrollspy</a></h3> <p>Use scrollspy to automatically update the links in your navbar to show the current active link based on scroll position.</p> </div> - </div> <!-- /row --> - <div class="row"> <div class="span3"> - <h3><a href="./javascript.html#tab">Togglable tabs</a></h3> + <h3><a href="./javascript.html#tabs">Togglable tabs</a></h3> <p>Use this plugin to make tabs and pills more useful by allowing them to toggle through tabbable panes of local content.</p> </div> + </div> <!-- /row --> + <div class="row"> <div class="span3"> <h3><a href="./javascript.html#twipsy">Twipsy tooltips</a></h3> <p>A new take on the jQuery Tipsy plugin, Twipsy uses CSS3 animations, data attributes for titles, and the new event API in jQuery 1.7.</p> </div> <div class="span3"> - <h3><a href="./javascript.html#popover">Popovers</a> <small class="muted">*</small></h3> + <h3><a href="./javascript.html#popovers">Popovers</a> <small class="muted">*</small></h3> <p>Add small overlays of content, like those on the iPad, to any element for housing secondary information.</p> <p class="muted"><strong>*</strong> Requires <a href="#twipsy">Twipsy</a> to be included</p> </div> <div class="span3"> - <h3><a href="./javascript.html#alert">Alert messages</a></h3> + <h3><a href="./javascript.html#alerts">Alert messages</a></h3> <p>The alert plugin is a tiny class for adding close functionality to alerts.</p> </div> - </div> <!-- /row --> - <div class="row"> <div class="span3"> - <h3><a href="./javascript.html#button">Buttons</a></h3> + <h3><a href="./javascript.html#buttons">Buttons</a></h3> <p>Do more with buttons. Control button states or create groups of buttons for more components like toolbars.</p> </div> + </div> <!-- /row --> + <div class="row"> <div class="span3"> <h3><a href="./javascript.html#collapse">Collapse</a></h3> <p>Get base styles and flexible support for collapsible components like accordions and navigation.</p> @@ -117,26 +111,78 @@ <h3><a href="./javascript.html#typeahead">Typeahead</a></h3> <p>A basic, easily extended plugin for quickly creating elegant typeaheads with any form text input.</p> </div> + <div class="span3"> + <h3><a href="./javascript.html#transitions">Transitions</a> <small class="muted">*</small></h3> + <p>For simple transition effects, include bootstrap-transition.js once to slide in modals or fade out alert messages.</p> + <p class="muted"><strong>*</strong> Required for animation in plugins</p> + </div> </div> <!-- /row --> <hr> <p class="muted"><span class="label warning">Note:</span> All plugins require the latest version of <a href="http://jquery.com/" target="_blank">jQuery</a> to be included.</p> </section> + <!-- Modal ================================================== --> - - <section id="modal"> + <section id="modals"> <div class="page-header"> <h1>Modals <small>bootstrap-modal.js</small></h1> </div> <div class="row"> <div class="span3 columns"> - <p>Our Modal plugin is a super slim take on the traditional modal js plugin, taking special care to include only the bare functionality that we require here at twitter.</p> - <a href="../js/bootstrap-modal.js" target="_blank" class="btn primary">Download</a> + <h3>About modals</h3> + <p>A streamlined, but flexible, take on the traditional javascript modal plugin with only the minimum required functionality and smart defaults.</p> + <a href="../js/bootstrap-modal.js" target="_blank" class="btn">Download file</a> </div> <div class="span9 columns"> - <h3>Using bootstrap-modal</h3> + <h2>Static example</h2> + <p>Below is a statically rendered modal.</p> + <div class="well" style="background-color: #888; border: none;"> + <div class="modal" style="position: relative; top: auto; left: auto; margin: 0 auto; z-index: 1"> + <div class="modal-header"> + <a href="#" class="close js-dismiss">×</a> + <h3>Modal header</h3> + </div> + <div class="modal-body"> + <p>One fine body…</p> + </div> + <div class="modal-footer"> + <a href="#" class="btn primary">Save changes</a> + <a href="#" class="btn">Close</a> + </div> + </div> + </div> <!-- /well --> + + <h2>Live demo</h2> + <p>Toggle a modal via javascript by clicking the button below. It will slide down and fade in from the top of the page.</p> + <!-- sample modal content --> + <div id="myModal" class="modal hide fade"> + <div class="modal-header"> + <a href="#" class="close" data-dismiss="modal" >×</a> + <h3>Modal Heading</h3> + </div> + <div class="modal-body"> + <h4>Text in a modal</h4> + <p>Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem.</p> + + <h4>Popover in a modal</h4> + <p>This <a href="#" class="btn" rel="popover" title="A Title" data-content="And here's some amazing content. It's very engaging. right?">button</a> should trigger a popover on hover.</p> + + <h4>Twipsy tooltips in a modal</h4> + <p><a href="#" class="twipsy-test" title="Tooltip">This link</a> and <a href="#" class="twipsy-test" title="Tooltip">that link</a> should have Twipsy tooltips on hover.</p> + </div> + <div class="modal-footer"> + <a href="#" class="btn primary">Save changes</a> + <a href="#" class="btn" data-dismiss="modal" >Close</a> + </div> + </div> + <a data-toggle="modal" href="#myModal" class="btn primary large">Launch demo modal</a> + + <hr> + + <h2>Using bootstrap-modal</h2> + <p>Call the modal via javascript:</p> <pre class="prettyprint linenums">$('#myModal').modal(options)</pre> <h3>Options</h3> <table class="bordered-table striped-table"> @@ -168,6 +214,22 @@ <p>Also, to add options to your modal instance, just include them as additional data attributes on either the control element or the modal markup itself.</p> <pre class="prettyprint linenums"> <a class="btn" data-toggle="modal" href="#myModal" >Launch Modal</a> +</pre> + +<pre class="prettyprint linenums"> +<div class="modal"> + <div class="modal-header"> + <a href="#" class="close js-dismiss">×</a> + <h3>Modal header</h3> + </div> + <div class="modal-body"> + <p>One fine body…</p> + </div> + <div class="modal-footer"> + <a href="#" class="btn primary">Save changes</a> + <a href="#" class="btn">Close</a> + </div> +</div> </pre> <p><span class="label notice">Notice</span> If you want your modal to animate in and out, just add a <code>.fade</code> class to the <code>.modal</code> element (refer to the demo to see this in action).</p> <h3>Methods</h3> @@ -219,89 +281,56 @@ $('#myModal').modal({ $('#myModal').on('hidden', function () { // do something ... })</pre> - <h3>Demo</h3> - <!-- sample modal content --> - <div id="myModal" class="modal hide fade"> - <div class="modal-header"> - <a href="#" class="close" data-dismiss="modal" >×</a> - <h3>Modal Heading</h3> - </div> - <div class="modal-body"> - <h4>Text in a modal</h4> - <p>Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem.</p> - - <h4>Popover in a modal</h4> - <p>This <a href="#" class="btn" rel="popover" title="A Title" data-content="And here's some amazing content. It's very engaging. right?">button</a> should trigger a popover on hover.</p> - - <h4>Twipsy tooltips in a modal</h4> - <p><a href="#" class="twipsy-test" title="Tooltip">This link</a> and <a href="#" class="twipsy-test" title="Tooltip">that link</a> should have Twipsy tooltips on hover.</p> - </div> - <div class="modal-footer"> - <a href="#" class="btn primary">Save changes</a> - <a href="#" class="btn" data-dismiss="modal" >Close</a> - </div> - </div> - - <a data-toggle="modal" href="#myModal" class="btn danger"> - Launch Modal - </a> </div> </div> </section> + <!-- Dropdown ================================================== --> - - <section id="dropdown"> + <section id="dropdowns"> <div class="page-header"> - <h1>Dropdown <small>bootstrap-dropdown.js</small></h1> + <h1>Dropdowns <small>bootstrap-dropdown.js</small></h1> </div> <div class="row"> <div class="span3 columns"> - <p>This plugin is for adding generic dropdown interactions to things like navigation top bars and tabs.</p> - <a href="../js/bootstrap-dropdown.js" target="_blank" class="btn primary">Download</a> + <h3>About dropdowns</h3> + <p>Add dropdown menus to nearly anything in Bootstrap with this simple plugin. Bootstrap features full dropdown menu support on in the navbar, tabs, and pills.</p> + <a href="../js/bootstrap-dropdown.js" target="_blank" class="btn">Download file</a> </div> <div class="span9 columns"> - <h3>Using bootstrap-dropdown.js</h3> - <pre class="prettyprint linenums">$('.dropdown-toggle').dropdown()</pre> - <h3>Markup</h3> - <p>To quickly add dropdown functionality to any element just add <code>data-toggle="dropdown"</code> and any valid bootstrap dropdown will automatically be activated.</p> - <p><span class="label notice">Notice</span> For added control and flexibility, optionally specify a <code>data-target="#fat"</code> or <code>href="#fat"</code> - this allows you to target specific dropdowns.</p> - -<pre class="prettyprint linenums"> -<ul class="tabs"> - <li class="active"><a href="#">Home</a></li> - <li id="secondary" class="dropdown"> - <a href="#secondary" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></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> - <h3>Methods</h3> - <h4>$().dropdown()</h4> - <p> - A programatic api for activating menus for a given navbar or tabbed navigation. - </p> - <h3>Demo</h3> + <h2>Examples</h2> + <p>Click on the dropdown nav links in the navbar and pills below to test dropdowns.</p> <div id="navbar-example" class="navbar navbar-static"> <div class="navbar-inner"> <div class="container" style="width: auto;"> <a class="brand" href="#">Project Name</a> <ul class="nav"> - <li><a href="#">Link</a></li> - <li><a href="#">Link</a></li> + <li class="dropdown"> + <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a> + <ul class="dropdown-menu"> + <li><a href="#">Action</a></li> + <li><a href="#">Another action</a></li> + <li><a href="#">Something else here</a></li> + <li class="divider"></li> + <li><a href="#">Separated link</a></li> + </ul> + </li> + <li class="dropdown"> + <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown 2 <b class="caret"></b></a> + <ul class="dropdown-menu"> + <li><a href="#">Action</a></li> + <li><a href="#">Another action</a></li> + <li><a href="#">Something else here</a></li> + <li class="divider"></li> + <li><a href="#">Separated link</a></li> + </ul> + </li> </ul> - <form class="form-search navbar-search pull-left" action=""> - <input type="text" class="search-query span2" placeholder="Search"> - </form> <ul class="nav pull-right"> <li id="fat-menu" class="dropdown"> - <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown 1 <b class="caret"></b></a> + <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown 3 <b class="caret"></b></a> <ul class="dropdown-menu"> <li><a href="#">Action</a></li> <li><a href="#">Another action</a></li> @@ -313,14 +342,82 @@ $('#myModal').on('hidden', function () { </ul> </div> </div> - </div> + </div> <!-- /navbar-example --> + + <ul class="nav pills"> + <li class="active"><a href="#">Regular link</a></li> + <li class="dropdown"> + <a class="dropdown-toggle" data-toggle="dropdown" href="#menu1">Dropdown <b class="caret"></b></a> + <ul id="menu1" class="dropdown-menu"> + <li><a href="#">Action</a></li> + <li><a href="#">Another action</a></li> + <li><a href="#">Something else here</a></li> + <li class="divider"></li> + <li><a href="#">Separated link</a></li> + </ul> + </li> + <li class="dropdown"> + <a class="dropdown-toggle" data-toggle="dropdown" href="#menu2">Dropdown 2 <b class="caret"></b></a> + <ul id="menu2" class="dropdown-menu"> + <li><a href="#">Action</a></li> + <li><a href="#">Another action</a></li> + <li><a href="#">Something else here</a></li> + <li class="divider"></li> + <li><a href="#">Separated link</a></li> + </ul> + </li> + <li class="dropdown"> + <a class="dropdown-toggle" data-toggle="dropdown" href="#menu3">Dropdown 3 <b class="caret"></b></a> + <ul id="menu3" class="dropdown-menu"> + <li><a href="#">Action</a></li> + <li><a href="#">Another action</a></li> + <li><a href="#">Something else here</a></li> + <li class="divider"></li> + <li><a href="#">Separated link</a></li> + </ul> + </li> + </ul> <!-- /tabs --> + + <hr> + + <h2>Using bootstrap-dropdown.js</h2> + <p>Call the dropdowns via javascript:</p> + <pre class="prettyprint linenums">$('.dropdown-toggle').dropdown()</pre> + <h3>Markup</h3> + <p>To quickly add dropdown functionality to any element just add <code>data-toggle="dropdown"</code> and any valid bootstrap dropdown will automatically be activated.</p> + <p><span class="label notice">Notice</span> For added control and flexibility, optionally specify a <code>data-target="#fat"</code> or <code>href="#fat"</code> - this allows you to target specific dropdowns.</p> + +<pre class="prettyprint linenums"> +<ul class="nav pills"> + <li class="active"><a href="#">Regular link</a></li> + <li class="dropdown"> + <a class="dropdown-toggle" data-toggle="dropdown" href="#menu1"> + Dropdown + <b class="caret"></b> + </a> + <ul id="menu1" class="dropdown-menu"> + <li><a href="#">Action</a></li> + <li><a href="#">Another action</a></li> + <li><a href="#">Something else here</a></li> + <li class="divider"></li> + <li><a href="#">Separated link</a></li> + </ul> + </li> + ... +</ul></pre> + <h3>Methods</h3> + <h4>$().dropdown()</h4> + <p> + A programatic api for activating menus for a given navbar or tabbed navigation. + </p> </div> </div> </section> + + <!-- ScrollSpy ================================================== --> - <section id="scrollspy"> <div class="page-header"> <h1>ScrollSpy <small>bootstrap-scrollspy.js</small></h1> @@ -328,20 +425,11 @@ $('#myModal').on('hidden', function () { <div class="row"> <div class="span3 columns"> <p>The ScrollSpy plugin is for automatically updating nav targets based on scroll position.</p> - <a href="../js/bootstrap-scrollspy.js" target="_blank" class="btn primary">Download</a> + <a href="../js/bootstrap-scrollspy.js" target="_blank" class="btn">Download file</a> </div> <div class="span9 columns"> - <h2>Using bootstrap-scrollspy.js</h2> - <pre class="prettyprint linenums">$('#navbar').dropdown()</pre> - <h3>Markup</h3> - <p>To easily add scrollspy behavior to your topbar navigation, just add <code>data-spy="scroll"</code> to the element you want to spy on (most typically this would be the body). - <pre class="prettyprint linenums"><body data-spy="scroll" >...</body></pre> - <p><span class="label notice">Notice</span> Navbar anchor tags must have resolvable id targets. For example, a <code><a href="#home">home</a></code> must correspond to something in the dom like <code><div id="home"></div></code>. - <h3>Demo</h3> - <p> - Scroll the area below and watch the navigation update. The dropdown sub items will be highlighted as well. Try it!</p> - <p> - + <h2>Example navbar with scrollspy</h2> + <p>Scroll the area below and watch the navigation update. The dropdown sub items will be highlighted as well. Try it!</p> <div id="navbarExample" class="navbar navbar-static"> <div class="navbar-inner"> <div class="container" style="width: auto;"> @@ -362,7 +450,6 @@ $('#myModal').on('hidden', function () { </div> </div> </div> - <div data-spy="scroll" data-target="#navbarExample" class="scrollspy-example"> <h4 id="fat">@fat</h4> <p> @@ -387,25 +474,70 @@ $('#myModal').on('hidden', function () { <p>Keytar twee blog, culpa messenger bag marfa whatever delectus food truck. Sapiente synth id assumenda. Locavore sed helvetica cliche irony, thundercats you probably haven't heard of them consequat hoodie gluten-free lo-fi fap aliquip. Labore elit placeat before they sold out, terry richardson proident brunch nesciunt quis cosby sweater pariatur keffiyeh ut helvetica artisan. Cardigan craft beer seitan readymade velit. VHS chambray laboris tempor veniam. Anim mollit minim commodo ullamco thundercats. </p> </div> - + <hr> + <h2>Using bootstrap-scrollspy.js</h2> + <p>Call the scrollspy via javascript:</p> + <pre class="prettyprint linenums">$('#navbar').dropdown()</pre> + <h3>Markup</h3> + <p>To easily add scrollspy behavior to your topbar navigation, just add <code>data-spy="scroll"</code> to the element you want to spy on (most typically this would be the body). + <pre class="prettyprint linenums"><body data-spy="scroll" >...</body></pre> + <p><span class="label notice">Notice</span> Navbar anchor tags must have resolvable id targets. For example, a <code><a href="#home">home</a></code> must correspond to something in the dom like <code><div id="home"></div></code>. </div> </div> </section> + + <!-- Tabs ================================================== --> - <section id="tab"> <div class="page-header"> - <h1>Tab <small>bootstrap-tab.js</small></h1> + <h1>Togglable tabs <small>bootstrap-tab.js</small></h1> </div> <div class="row"> <div class="span3 columns"> <p>This plugin adds quick, dynamic tab and pill functionality for transitioning through local content.</p> - <a href="../js/bootstrap-tab.js" target="_blank" class="btn primary">Download</a> + <a href="../js/bootstrap-tab.js" target="_blank" class="btn">Download file</a> </div> <div class="span9 columns"> - <h3>Using bootstrap-tab.js</h3> + <h2>Example tabs</h2> + <p>Click the tabs below to toggle between hidden panes, even via dropdown menus.</p> + <ul id="tab" class="nav tabs"> + <li class="active"><a href="#home" data-toggle="tab">Home</a></li> + <li><a href="#profile" data-toggle="tab">Profile</a></li> + <li><a href="#messages" data-toggle="tab">Messages</a></li> + <li><a href="#settings" data-toggle="tab">Settings</a></li> + <li class="dropdown"> + <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a> + <ul class="dropdown-menu"> + <li><a href="#dropdown1" data-toggle="tab">@fat</a></li> + <li><a href="#dropdown2" data-toggle="tab">@mdo</a></li> + </ul> + </li> + </ul> + <div id="myTabContent" class="tab-content"> + <div class="tab-pane fade in active" id="home"> + <p>Raw denim you probably haven't heard of them jean shorts Austin. Nesciunt tofu stumptown aliqua, retro synth master cleanse. Mustache cliche tempor, williamsburg carles vegan helvetica. Reprehenderit butcher retro keffiyeh dreamcatcher synth. Cosby sweater eu banh mi, qui irure terry richardson ex squid. Aliquip placeat salvia cillum iphone. Seitan aliquip quis cardigan american apparel, butcher voluptate nisi qui.</p> + </div> + <div class="tab-pane fade" id="profile"> + <p>Food truck fixie locavore, accusamus mcsweeney's marfa nulla single-origin coffee squid. Exercitation +1 labore velit, blog sartorial PBR leggings next level wes anderson artisan four loko farm-to-table craft beer twee. Qui photo booth letterpress, commodo enim craft beer mlkshk aliquip jean shorts ullamco ad vinyl cillum PBR. Homo nostrud organic, assumenda labore aesthetic magna delectus mollit. Keytar helvetica VHS salvia yr, vero magna velit sapiente labore stumptown. Vegan fanny pack odio cillum wes anderson 8-bit, sustainable jean shorts beard ut DIY ethical culpa terry richardson biodiesel. Art party scenester stumptown, tumblr butcher vero sint qui sapiente accusamus tattooed echo park.</p> + </div> + <div class="tab-pane fade" id="messages"> + <p>Banksy do proident, brooklyn photo booth delectus sunt artisan sed organic exercitation eiusmod four loko. Quis tattooed iphone esse aliqua. Master cleanse vero fixie mcsweeney's. Ethical portland aute, irony food truck pitchfork lomo eu anim. Aesthetic blog DIY, ethical beard leggings tofu consequat whatever cardigan nostrud. Helvetica you probably haven't heard of them carles, marfa veniam occaecat lomo before they sold out in shoreditch scenester sustainable thundercats. Consectetur tofu craft beer, mollit brunch fap echo park pitchfork mustache dolor.</p> + </div> + <div class="tab-pane fade" id="settings"> + <p>Sunt qui biodiesel mollit officia, fanny pack put a bird on it thundercats seitan squid ad wolf bicycle rights blog. Et aute readymade farm-to-table carles 8-bit, nesciunt nulla etsy adipisicing organic ea. Master cleanse mollit high life, next level Austin nesciunt american apparel twee mustache adipisicing reprehenderit hoodie portland irony. Aliqua tofu quinoa +1 commodo eiusmod. High life williamsburg cupidatat twee homo leggings. Four loko vinyl DIY consectetur nisi, marfa retro keffiyeh vegan. Fanny pack viral retro consectetur gentrify fap.</p> + </div> + <div class="tab-pane fade" id="dropdown1"> + <p>Etsy mixtape wayfarers, ethical wes anderson tofu before they sold out mcsweeney's organic lomo retro fanny pack lo-fi farm-to-table readymade. Messenger bag gentrify pitchfork tattooed craft beer, iphone skateboard locavore carles etsy salvia banksy hoodie helvetica. DIY synth PBR banksy irony. Leggings gentrify squid 8-bit cred pitchfork. Williamsburg banh mi whatever gluten-free, carles pitchfork biodiesel fixie etsy retro mlkshk vice blog. Scenester cred you probably haven't heard of them, vinyl craft beer blog stumptown. Pitchfork sustainable tofu synth chambray yr.</p> + </div> + <div class="tab-pane fade" id="dropdown2"> + <p>Trust fund seitan letterpress, keytar raw denim keffiyeh etsy art party before they sold out master cleanse gluten-free squid scenester freegan cosby sweater. Fanny pack portland seitan DIY, art party locavore wolf cliche high life echo park Austin. Cred vinyl keffiyeh DIY salvia PBR, banh mi before they sold out farm-to-table VHS viral locavore cosby sweater. Lomo wolf viral, mustache readymade thundercats keffiyeh craft beer marfa ethical. Wolf salvia freegan, sartorial keffiyeh echo park vegan.</p> + </div> + </div> + <hr> + <h2>Using bootstrap-tab.js</h2> + <p>Enable tabbable tabs via javascript:</p> <pre class="prettyprint linenums">$('#myTab').tab('show')</pre> <h3>Markup</h3> <p>You can activate a tab or pill navigation without writing any javascript by simply specifying <code>data-toggle="tab"</code> or <code>data-toggle="pill"</code> on an element.</p> @@ -413,7 +545,8 @@ $('#myModal').on('hidden', function () { <ul class="tabs"> <li><a href="#home" data-toggle="tab">Home</a></li> <li><a href="#profile" data-toggle="tab">Profile</a></li> - <li><a href="http://twitter.com/fat">twitter</a></li> + <li><a href="#messages" data-toggle="tab">Messages</a></li> + <li><a href="#ettings" data-toggle="tab">Settings</a></li> </ul></pre> <h3>Methods</h3> <h4>$().tab</h4> @@ -428,7 +561,7 @@ $('#myModal').on('hidden', function () { <li><a href="#settings">Settings</a></li> </ul> -<div class="pill-content"> +<div class="tab-content"> <div class="active" id="home">...</div> <div id="profile">...</div> <div id="messages">...</div> @@ -466,59 +599,34 @@ $('a[data-toggle="tab"]').on('shown', function (e) { e.target // activated tab e.relatedTarget // previous tab })</pre> - <h3>Demo</h3> - - <ul id="tab" class="nav tabs"> - <li class="active"><a href="#home" data-toggle="tab">Home</a></li> - <li><a href="#profile" data-toggle="tab">Profile</a></li> - <li><a href="#messages" data-toggle="tab">Messages</a></li> - <li><a href="#settings" data-toggle="tab">Settings</a></li> - <li class="dropdown"> - <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a> - <ul class="dropdown-menu"> - <li><a href="#dropdown1" data-toggle="tab">@fat</a></li> - <li><a href="#dropdown2" data-toggle="tab">@mdo</a></li> - </ul> - </li> - </ul> - <div id="myTabContent" class="tab-content"> - <div class="tab-pane fade in active" id="home"> - <p>Raw denim you probably haven't heard of them jean shorts Austin. Nesciunt tofu stumptown aliqua, retro synth master cleanse. Mustache cliche tempor, williamsburg carles vegan helvetica. Reprehenderit butcher retro keffiyeh dreamcatcher synth. Cosby sweater eu banh mi, qui irure terry richardson ex squid. Aliquip placeat salvia cillum iphone. Seitan aliquip quis cardigan american apparel, butcher voluptate nisi qui.</p> - </div> - <div class="tab-pane fade" id="profile"> - <p>Food truck fixie locavore, accusamus mcsweeney's marfa nulla single-origin coffee squid. Exercitation +1 labore velit, blog sartorial PBR leggings next level wes anderson artisan four loko farm-to-table craft beer twee. Qui photo booth letterpress, commodo enim craft beer mlkshk aliquip jean shorts ullamco ad vinyl cillum PBR. Homo nostrud organic, assumenda labore aesthetic magna delectus mollit. Keytar helvetica VHS salvia yr, vero magna velit sapiente labore stumptown. Vegan fanny pack odio cillum wes anderson 8-bit, sustainable jean shorts beard ut DIY ethical culpa terry richardson biodiesel. Art party scenester stumptown, tumblr butcher vero sint qui sapiente accusamus tattooed echo park.</p> - </div> - <div class="tab-pane fade" id="messages"> - <p>Banksy do proident, brooklyn photo booth delectus sunt artisan sed organic exercitation eiusmod four loko. Quis tattooed iphone esse aliqua. Master cleanse vero fixie mcsweeney's. Ethical portland aute, irony food truck pitchfork lomo eu anim. Aesthetic blog DIY, ethical beard leggings tofu consequat whatever cardigan nostrud. Helvetica you probably haven't heard of them carles, marfa veniam occaecat lomo before they sold out in shoreditch scenester sustainable thundercats. Consectetur tofu craft beer, mollit brunch fap echo park pitchfork mustache dolor.</p> - </div> - <div class="tab-pane fade" id="settings"> - <p>Sunt qui biodiesel mollit officia, fanny pack put a bird on it thundercats seitan squid ad wolf bicycle rights blog. Et aute readymade farm-to-table carles 8-bit, nesciunt nulla etsy adipisicing organic ea. Master cleanse mollit high life, next level Austin nesciunt american apparel twee mustache adipisicing reprehenderit hoodie portland irony. Aliqua tofu quinoa +1 commodo eiusmod. High life williamsburg cupidatat twee homo leggings. Four loko vinyl DIY consectetur nisi, marfa retro keffiyeh vegan. Fanny pack viral retro consectetur gentrify fap.</p> - </div> - <div class="tab-pane fade" id="dropdown1"> - <p>Etsy mixtape wayfarers, ethical wes anderson tofu before they sold out mcsweeney's organic lomo retro fanny pack lo-fi farm-to-table readymade. Messenger bag gentrify pitchfork tattooed craft beer, iphone skateboard locavore carles etsy salvia banksy hoodie helvetica. DIY synth PBR banksy irony. Leggings gentrify squid 8-bit cred pitchfork. Williamsburg banh mi whatever gluten-free, carles pitchfork biodiesel fixie etsy retro mlkshk vice blog. Scenester cred you probably haven't heard of them, vinyl craft beer blog stumptown. Pitchfork sustainable tofu synth chambray yr.</p> - </div> - <div class="tab-pane fade" id="dropdown2"> - <p>Trust fund seitan letterpress, keytar raw denim keffiyeh etsy art party before they sold out master cleanse gluten-free squid scenester freegan cosby sweater. Fanny pack portland seitan DIY, art party locavore wolf cliche high life echo park Austin. Cred vinyl keffiyeh DIY salvia PBR, banh mi before they sold out farm-to-table VHS viral locavore cosby sweater. Lomo wolf viral, mustache readymade thundercats keffiyeh craft beer marfa ethical. Wolf salvia freegan, sartorial keffiyeh echo park vegan.</p> - </div> - </div> - </div> + </div> </div> </section> + + <!-- Twipsy ================================================== --> - <section id="twipsy"> <div class="page-header"> <h1>Twipsy <small>bootstrap-twipsy.js</small></h1> </div> <div class="row"> <div class="span3 columns"> + <h3>About Twipsy tooltips</h3> <p>Inspired by the excellent jQuery.tipsy plugin written by Jason Frame; twipsy is an updated version, which doesn't rely on images, uses css3 for animations, data-attributes for local title storage, and now jquery 1.7's new event api!</p> - <a href="../js/bootstrap-twipsy.js" target="_blank" class="btn primary">Download</a> + <a href="../js/bootstrap-twipsy.js" target="_blank" class="btn">Download file</a> </div> <div class="span9 columns"> - <h3>Using bootstrap-twipsy.js</h3> + <h2>Example use of Twipsy</h2> + <p>Hover over the links below to see tooltips:</p> + <div class="twipsy-demo well"> + <p class="muted" style="margin-bottom: 0;">Tight pants next level keffiyeh <a href="#" rel='twipsy' title="first twipsy">you probably</a> haven't heard of them. Photo booth beard raw denim letterpress vegan messenger bag stumptown. Farm-to-table seitan, mcsweeney's fixie sustainable quinoa 8-bit american apparel <a href="#" rel='twipsy' title='Another twipsy'>have a</a> terry richardson vinyl chambray. Beard stumptown, cardigans banh mi lomo thundercats. Tofu biodiesel williamsburg marfa, four loko mcsweeney's cleanse vegan chambray. A <a href="#" rel='twipsy' title='Another one here too'>really ironic</a> artisan whatever keytar, scenester farm-to-table banksy Austin <a href="#" rel='twipsy' title='The last tip!'>twitter handle</a> freegan cred raw denim single-origin coffee viral. + </p> + </div> + <hr> + <h2>Using bootstrap-twipsy.js</h2> + <p>Trigger the Twipsy tooltips via javascript:</p> <pre class="prettyprint linenums">$('#example').twipsy(options)</pre> <h3>Options</h3> <table class="bordered-table striped-table"> @@ -575,8 +683,7 @@ $('a[data-toggle="tab"]').on('shown', function (e) { </table> <p><span class="label notice">Notice</span> Individual twipsy instance options can alternatively be specified through the use of data attributes.</code></p> <h3>Markup</h3> - <p> - For performance reasons, the Twipsy and Popover data-apis are opt in. If you would like to use them just specify a selector option.</p> + <p>For performance reasons, the Twipsy and Popover data-apis are opt in. If you would like to use them just specify a selector option.</p> <h3>Methods</h3> <h4>$().twipsy(options)</h4> <p>Attaches a twipsy handler to an element collection.</p> @@ -586,29 +693,34 @@ $('a[data-toggle="tab"]').on('shown', function (e) { <h4>.twipsy('hide')</h4> <p>Hides an elements twipsy.</p> <pre class="prettyprint linenums">$('#element').twipsy('hide')</pre> - <h3>Demo</h3> - <div class="twipsy-demo well"> - <p class="muted">Tight pants next level keffiyeh <a href="#" rel='twipsy' title="first twipsy">you probably</a> haven't heard of them. Photo booth beard raw denim letterpress vegan messenger bag stumptown. Farm-to-table seitan, mcsweeney's fixie sustainable quinoa 8-bit american apparel <a href="#" rel='twipsy' title='Another twipsy'>have a</a> terry richardson vinyl chambray. Beard stumptown, cardigans banh mi lomo thundercats. Tofu biodiesel williamsburg marfa, four loko mcsweeney's cleanse vegan chambray. A <a href="#" rel='twipsy' title='Another one here too'>really ironic</a> artisan whatever keytar, scenester farm-to-table banksy Austin <a href="#" rel='twipsy' title='The last tip!'>twitter handle</a> freegan cred raw denim single-origin coffee viral. - </p> - </div> </div> </div> </section> + + <!-- Popovers ================================================== --> - - <section id="popover"> + <section id="popovers"> <div class="page-header"> <h1>Popovers <small>bootstrap-popover.js</small></h1> </div> <div class="row"> <div class="span3 columns"> - <p>The popover plugin provides a simple interface for adding popovers to your application. It extends the <a href="#twipsy">bootstrap-twipsy.js</a> plugin, so be sure to grab that file as well when including popovers in your project!</p> - <a href="../js/bootstrap-popover.js" target="_blank" class="btn primary">Download</a> + <h3>About popovers</h3> + <p>Add small overlays of content, like those on the iPad, to any element for housing secondary information.</p> + <p class="muted"><strong>*</strong> Requires <a href="#twipsy">Twipsy</a> to be included</p> + <a href="../js/bootstrap-popover.js" target="_blank" class="btn">Download file</a> </div> <div class="span9 columns"> - <h3>Using bootstrap-popover.js</h3> + <h2>Example hover popover</h2> + <p>Hover over the button to trigger the popover.</p> + <div class="well"> + <a href="#" class="btn danger" rel="popover" title="A Title" data-content="And here's some amazing content. It's very engaging. right?">hover for popover</a> + </div> + <hr> + <h2>Using bootstrap-popover.js</h2> + <p>Enable popovers via javascript:</p> <pre class="prettyprint linenums">$('#example').popover(options)</pre> <h3>Options</h3> <table class="bordered-table striped-table"> @@ -683,27 +795,41 @@ $('a[data-toggle="tab"]').on('shown', function (e) { <h4>.popover('hide')</h4> <p>Hides an elements popover.</p> <pre class="prettyprint linenums">$('#element').popover('hide')</pre> - <h3>Demo</h3> - <a href="#" class="btn danger" rel="popover" title="A Title" data-content="And here's some amazing content. It's very engaging. right?">hover for popover</a> </div> </div> </section> + <!-- Alert ================================================== --> - <section id="alert"> <div class="page-header"> - <h1>Alert <small>bootstrap-alert.js</small></h1> + <h1>Alert messages <small>bootstrap-alert.js</small></h1> </div> <div class="row"> <div class="span3 columns"> - <p>The alert plugin is a super tiny class for adding close functionality to alerts.</p> - <a href="../js/bootstrap-alerts.js" target="_blank" class="btn primary">Download</a> + <h3>About alerts</h3> + <p>The alert plugin is a tiny class for adding close functionality to alerts.</p> + <a href="../js/bootstrap-alerts.js" target="_blank" class="btn">Download</a> </div> <div class="span9 columns"> - <h3>Using bootstrap-alerts.js</h3> + <h2>Example alerts</h2> + <p>The alerts plugin works on regular alert messages, and block messages.</p> + <div class="alert-message warning fade in"> + <a class="close" data-dismiss="alert" href="#">×</a> + <p><strong>Holy guacamole!</strong> Best check yo self, you’re not looking too good.</p> + </div> + <div class="alert-message block-message error fade in"> + <a class="close" data-dismiss="alert" href="#">×</a> + <p><strong>Oh snap! You got an error!</strong> Change this and that and try again. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Cras mattis consectetur purus sit amet fermentum.</p> + <div class="alert-actions"> + <a class="btn small" href="#">Take this action</a> <a class="btn small" href="#">Or do this</a> + </div> + </div> + <hr> + <h2>Using bootstrap-alerts.js</h2> + <p>Enable dismissal of an alert via javascript:</p> <pre class="prettyprint linenums">$(".alert-message").alert()</pre> <h3>Markup</h3> <p>Just add <code>data-dismiss="alert"</code> to your close button to automatically give an alert close functionality.</p> @@ -738,37 +864,68 @@ $('a[data-toggle="tab"]').on('shown', function (e) { $('#my-alert').bind('closed', function () { // do something ... })</pre> - <h3>Demo</h3> - <div class="alert-message warning fade in"> - <a class="close" data-dismiss="alert" href="#">×</a> - <p><strong>Holy guacamole!</strong> Best check yo self, you’re not looking too good.</p> - </div> - <div class="alert-message block-message error fade in"> - <a class="close" data-dismiss="alert" href="#">×</a> - <p><strong>Oh snap! You got an error!</strong> Change this and that and try again. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Cras mattis consectetur purus sit amet fermentum.</p> - <div class="alert-actions"> - <a class="btn small" href="#">Take this action</a> <a class="btn small" href="#">Or do this</a> - </div> - </div> </div> </div> </section> - <!-- Button - ================================================== --> + <!-- Buttons + ================================================== --> <section id="button"> <div class="page-header"> - <h1>Button <small>bootstrap-button.js</small></h1> + <h1>Buttons <small>bootstrap-button.js</small></h1> </div> <div class="row"> <div class="span3 columns"> - <p>This plugin offers additional functionality for managing button state.</p> - <a href="../js/bootstrap-button.js" target="_blank" class="btn primary">Download</a> + <h3>About</h3> + <p>Do more with buttons. Control button states or create groups of buttons for more components like toolbars.</p> + <a href="../js/bootstrap-button.js" target="_blank" class="btn">Download file</a> </div> <div class="span9 columns"> - <h3>Using bootstrap-button.js</h3> + <h2>Example uses</h2> + <p>Use the buttons plugin for states and toggles.</p> + <table class="bordered-table striped-table"> + <tbody> + <tr> + <td>Stateful</td> + <td> + <button id="fat-btn" data-loading-text="loading..." class="btn primary"> + Loading State + </button> + </td> + </tr> + <tr> + <td>Single toggle</td> + <td> + <button class="btn primary" data-toggle="button">Single Toggle</button> + </td> + </tr> + <tr> + <td>Checkbox</td> + <td> + <div class="btn-group" data-toggle="buttons-checkbox"> + <button class="btn primary">Left</button> + <button class="btn primary">Middle</button> + <button class="btn primary">Right</button> + </div> + </td> + </tr> + <tr> + <td>Radio</td> + <td> + <div class="btn-group" data-toggle="buttons-radio"> + <button class="btn primary">Left</button> + <button class="btn primary">Middle</button> + <button class="btn primary">Right</button> + </div> + </td> + </tr> + </tbody> + </table> + <hr> + <h2>Using bootstrap-button.js</h2> + <p>Enable buttons via javascript:</p> <pre class="prettyprint linenums">$('.tabs').button()</pre> <h3>Markup</h3> <p>Data attributes are integral to the button plugin. Check out the example code below for the various markup types.</p> @@ -810,64 +967,62 @@ $('#my-alert').bind('closed', function () { <script> $('.btn').button('complete') </script></pre> - <h3>Demo</h3> - <table class="bordered-table striped-table"> - <tbody> - <tr> - <td>Stateful</td> - <td> - <button id="fat-btn" data-loading-text="loading..." class="btn"> - Loading State - </button> - </td> - </tr> - <tr> - <td>Single Toggle</td> - <td> - <button class="btn" data-toggle="button">Single Toggle</button> - </td> - </tr> - <tr> - <td>Checkbox</td> - <td> - <div class="btn-group" data-toggle="buttons-checkbox"> - <button class="btn">Left</button> - <button class="btn">Middle</button> - <button class="btn">Right</button> - </div> - </td> - </tr> - <tr> - <td>Radio</td> - <td> - <div class="btn-group" data-toggle="buttons-radio"> - <button class="btn">Left</button> - <button class="btn">Middle</button> - <button class="btn">Right</button> - </div> - </td> - </tr> - </tbody> - </table> </div> </div> </section> + <!-- Collapse ================================================== --> - <section id="collapse"> <div class="page-header"> - <h1>collapse <small>bootstrap-collapse.js</small></h1> + <h1>Collapse <small>bootstrap-collapse.js</small></h1> </div> <div class="row"> <div class="span3 columns"> - <p>The collapse plugin offers simple, flexible collapsible element support for making accordions and other collapsible ui components.</p> - <a href="../js/bootstrap-collapse.js" target="_blank" class="btn primary">Download</a> + <h3>About</h3> + <p>Get base styles and flexible support for collapsible components like accordions and navigation.</p> + <a href="../js/bootstrap-collapse.js" target="_blank" class="btn">Download file</a> </div> <div class="span9 columns"> - <h3>Using bootstrap-collapse.js</h3> + <h2>Example accordion</h2> + <p>Using the collapse plugin, we built a simple accordion style widget:</p> + <dl id="accordion"> + <dt> + <a data-toggle="collapse" data-parent="#accordion" href="#collapseOne"> + Collapsible Group Item #1 + </a> + </dt> + <dd id="collapseOne" class="collapse in"> + <p> + Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS. + </p> + </dd> + <dt> + <a data-toggle="collapse" data-parent="#accordion" href="#collapseTwo"> + Collapsible Group Item #2 + </a> + </dt> + <dd id="collapseTwo" class="collapse"> + <p> + Blog +1 eiusmod, williamsburg chambray craft beer brooklyn. Trust fund squid whatever, sunt hoodie skateboard mustache 3 wolf moon art party wes anderson ad leggings officia. Skateboard keytar incididunt gluten-free retro sartorial, single-origin coffee et viral. Art party blog sunt, readymade fugiat 8-bit aesthetic ex echo park fanny pack keytar. Thundercats sustainable labore, mustache adipisicing tattooed dolore aute occaecat velit 8-bit raw denim letterpress. In occaecat freegan, next level single-origin coffee chambray excepteur nihil duis exercitation adipisicing ex sartorial twee squid. You probably haven't heard of them fugiat ea retro eiusmod quis cosby sweater, +1 fap sapiente biodiesel banksy. + </p> + </dd> + <dt> + <a data-toggle="collapse" data-parent="#accordion" href="#collapseThree"> + Collapsible Group Item #3 + </a> + </dt> + <dd id="collapseThree" class="collapse"> + <p> + Tempor gentrify pariatur nihil salvia, irony synth incididunt odio commodo brunch aute. Four loko est vice echo park wes anderson jean shorts, tempor ea vero locavore. Seitan DIY dolore readymade williamsburg viral. Dolor fap master cleanse delectus, ad butcher labore duis vice mollit cillum exercitation eu banh mi. Austin banksy 3 wolf moon locavore sed, helvetica next level VHS you probably haven't heard of them ethical odio. Incididunt locavore minim, do seitan consequat qui thundercats labore before they sold out retro laborum. Esse twee readymade laboris fap vice, voluptate DIY. + </p> + </dd> + </dl> + <hr> + <h2>Using bootstrap-collapse.js</h2> + <p>Enable via javascript:</p> <pre class="prettyprint linenums">$(".collapse").collapse()</pre> <h3>Options</h3> <table class="bordered-table striped-table"> @@ -953,68 +1108,57 @@ $('#myCollapsible').collapse({ $('#myCollapsible').on('hidden', function () { // do something ... })</pre> - <h3>Demo</h3> - - <!-- single collapse --> - <p> - <button class="btn danger" data-toggle="collapse" data-target="#collapseDemoWrap"> - simple collapsible - </button> - </p> - - <div id="collapseDemoWrap" class="collapse"> - <!-- group collapse --> - <dl id="accordion" > - <dt> - <a data-toggle="collapse" data-parent="#accordion" href="#collapseOne"> - Collapsible Group Item #1 - </a> - </dt> - <dd id="collapseOne" class="collapse in"> - <p> - Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS. - </p> - </dd> - <dt> - <a data-toggle="collapse" data-parent="#accordion" href="#collapseTwo"> - Collapsible Group Item #2 - </a> - </dt> - <dd id="collapseTwo" class="collapse"> - <p> - Blog +1 eiusmod, williamsburg chambray craft beer brooklyn. Trust fund squid whatever, sunt hoodie skateboard mustache 3 wolf moon art party wes anderson ad leggings officia. Skateboard keytar incididunt gluten-free retro sartorial, single-origin coffee et viral. Art party blog sunt, readymade fugiat 8-bit aesthetic ex echo park fanny pack keytar. Thundercats sustainable labore, mustache adipisicing tattooed dolore aute occaecat velit 8-bit raw denim letterpress. In occaecat freegan, next level single-origin coffee chambray excepteur nihil duis exercitation adipisicing ex sartorial twee squid. You probably haven't heard of them fugiat ea retro eiusmod quis cosby sweater, +1 fap sapiente biodiesel banksy. - </p> - </dd> - <dt> - <a data-toggle="collapse" data-parent="#accordion" href="#collapseThree"> - Collapsible Group Item #3 - </a> - </dt> - <dd id="collapseThree" class="collapse"> - <p> - Tempor gentrify pariatur nihil salvia, irony synth incididunt odio commodo brunch aute. Four loko est vice echo park wes anderson jean shorts, tempor ea vero locavore. Seitan DIY dolore readymade williamsburg viral. Dolor fap master cleanse delectus, ad butcher labore duis vice mollit cillum exercitation eu banh mi. Austin banksy 3 wolf moon locavore sed, helvetica next level VHS you probably haven't heard of them ethical odio. Incididunt locavore minim, do seitan consequat qui thundercats labore before they sold out retro laborum. Esse twee readymade laboris fap vice, voluptate DIY. - </p> - </dd> - </dl> - </div> </div> </div> </section> + + <!-- Carousel ================================================== --> - <section id="carousel"> <div class="page-header"> <h1>Carousel <small>bootstrap-carousel.js</small></h1> </div> <div class="row"> <div class="span3 columns"> + <h3>About</h3> <p>A generic plugin for cycling through elements. A merry-go-round.</p> - <a href="../js/bootstrap-carousel.js" target="_blank" class="btn primary">Download</a> + <a href="../js/bootstrap-carousel.js" target="_blank" class="btn">Download file</a> </div> <div class="span9 columns"> - <h3>Using bootstrap-carousel.js</h3> + <h2>Example carousel</h2> + <p>Watch the slideshow below.</p> + <div id="myCarousel" class="thumbnail carousel slide"> + <div class="carousel-inner"> + <div class="item active"> + <img src="http://placehold.it/1100x400" alt=""> + <div class="caption"> + <h5>First Thumbnail label</h5> + <p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p> + </div> + </div> + <div class="item"> + <img src="http://placehold.it/1100x400" alt=""> + <div class="caption"> + <h5>Second Thumbnail label</h5> + <p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p> + </div> + </div> + <div class="item"> + <img src="http://placehold.it/1100x400" alt=""> + <div class="caption"> + <h5>Third Thumbnail label</h5> + <p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p> + </div> + </div> + </div> + <a class="left nav" href="#myCarousel" data-slide="prev">«</a> + <a class="right nav" href="#myCarousel" data-slide="next">»</a> + </div> + <hr> + <h2>Using bootstrap-carousel.js</h2> + <p>Call via javascript:</p> <pre class="prettyprint linenums">$('.carousel').carousel()</pre> <h3>Options</h3> <table class="bordered-table striped-table"> @@ -1085,63 +1229,34 @@ $('#myCollapsible').on('hidden', function () { </tr> </tbody> </table> - <h3>Demo</h3> - - <!-- carousel --> - - <div id="myCarousel" class="thumbnail carousel slide"> - - <div class="carousel-inner"> - <div class="item active"> - <img src="http://placehold.it/1100x400" alt=""> - <div class="caption"> - <h5>First Thumbnail label</h5> - <p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p> - </div> - </div> - - <div class="item"> - <img src="http://placehold.it/1100x400" alt=""> - <div class="caption"> - <h5>Second Thumbnail label</h5> - <p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p> - </div> - </div> - - <div class="item"> - <img src="http://placehold.it/1100x400" alt=""> - <div class="caption"> - <h5>Third Thumbnail label</h5> - <p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p> - </div> - </div> - </div> - - <a class="left nav" href="#myCarousel" data-slide="prev">«</a> - <a class="right nav" href="#myCarousel" data-slide="next">»</a> - - </div> - </div> </div> </section> - <!-- Typeahead - ================================================== --> + + <!-- Typeahead + ================================================== --> <section id="typeahead"> <div class="page-header"> <h1>Typeahead <small>bootstrap-typeahead.js</small></h1> </div> <div class="row"> <div class="span3 columns"> - <p>A basic, easily extended plugin for quickly creating elegant typeaheads.</p> - <a href="../js/bootstrap-typeahead.js" target="_blank" class="btn primary">Download</a> + <h3>About</h3> + <p>A basic, easily extended plugin for quickly creating elegant typeaheads with any form text input.</p> + <a href="../js/bootstrap-typeahead.js" target="_blank" class="btn">Download file</a> </div> <div class="span9 columns"> - <h3>Using bootstrap-typeahead.js</h3> + <h2>Example</h2> + <p>Start typing in the field below to show the typeahead results.</p> + <div class="well"> + <input type="text" class="span3" style="margin: 0 auto;" data-provide="typeahead" data-items="4" data-data='["Alabama","Alaska","Arizona","Arkansas","California","Colorado","Connecticut","Delaware","Florida","Georgia","Hawaii","Idaho","Illinois","Indiana","Iowa","Kansas","Kentucky","Louisiana","Maine","Maryland","Massachusetts","Michigan","Minnesota","Mississippi","Missouri","Montana","Nebraska","Nevada","New Hampshire","New Jersey","New Mexico","New York","North Dakota","North Carolina","Ohio","Oklahoma","Oregon","Pennsylvania","Rhode Island","South Carolina","South Dakota","Tennessee","Texas","Utah","Vermont","Virginia","Washington","West Virginia","Wisconsin","Wyoming"]'> + </div> + <hr> + <h2>Using bootstrap-typeahead.js</h2> + <p>Call the typeahead via javascript:</p> <pre class="prettyprint linenums">$('.typeahead').typeahead()</pre> - <h3>Options</h3> <table class="bordered-table striped-table"> <thead> @@ -1167,13 +1282,12 @@ $('#myCollapsible').on('hidden', function () { <pre class="prettyprint linenums"> <input type="text" data-provide="typeahead"> </pre> - <h3>Demo</h3> - <input type="text" data-provide="typeahead" data-items="4" data-data='["Alabama","Alaska","Arizona","Arkansas","California","Colorado","Connecticut","Delaware","Florida","Georgia","Hawaii","Idaho","Illinois","Indiana","Iowa","Kansas","Kentucky","Louisiana","Maine","Maryland","Massachusetts","Michigan","Minnesota","Mississippi","Missouri","Montana","Nebraska","Nevada","New Hampshire","New Jersey","New Mexico","New York","North Dakota","North Carolina","Ohio","Oklahoma","Oregon","Pennsylvania","Rhode Island","South Carolina","South Dakota","Tennessee","Texas","Utah","Vermont","Virginia","Washington","West Virginia","Wisconsin","Wyoming"]'> </div> </div> </section> + <!-- Footer ================================================== --> <footer class="footer"> diff --git a/docs/scaffolding.html b/docs/scaffolding.html index 10e5a43be0..5b6f7c7c37 100644 --- a/docs/scaffolding.html +++ b/docs/scaffolding.html @@ -384,36 +384,33 @@ <dd><a href="./base-css.html#tables">Tables</a></dd> <dd><a href="./base-css.html#forms">Forms</a></dd> <dd><a href="./base-css.html#buttons">Buttons</a></dd> - <dd><a href="./base-css.html#buttongroups">Button groups</a></dd> - <dd><a href="./base-css.html#icons">Icons</a></dd> + <dd><a href="./base-css.html#icons">Icons by Glyphicons</a></dd> </dl> <dl class="span2"> <dt>Components</dt> - <dd><a href="./components.html#thumbnails">Thumbnails</a></dd> - <dd><a href="./components.html#autocomplete">Autocomplete</a></dd> - <dd><a href="./components.html#carousel">Carousel</a></dd> - <dd><a href="./components.html#sidenav">Side nav</a></dd> + <dd><a href="./base-css.html#buttonGroups">Button groups</a></dd> + <dd><a href="./base-css.html#buttonDropdowns">Split button dropdowns</a></dd> + <dd><a href="./components.html#navs">Nav, tabs, pills</a></dd> <dd><a href="./components.html#navbar">Navbar</a></dd> - <dd><a href="./components.html#tabspills">Tabs and pills</a></dd> + <dd><a href="./components.html#breadcrumbs">Breadcrumbs</a></dd> <dd><a href="./components.html#pagination">Pagination</a></dd> - <dd><a href="./components.html#alerts">Alerts and errors</a></dd> - <dd><a href="./components.html#modals">Modals</a></dd> - <dd><a href="./components.html#twipsy">Twipsy tooltips</a></dd> - <dd><a href="./components.html#popover">Popovers</a></dd> + <dd><a href="./components.html#thumbnails">Thumbnails</a></dd> + <dd><a href="./components.html#alerts">Alert messages</a></dd> </dl> <dl class="span2"> <dt>Javascript plugins</dt> - <dd><a href="">Transitions</a></dd> - <dd><a href="./javasript.html#modals">Modals</a></dd> - <dd><a href="./javasript.html#dropdowns">Dropdowns</a></dd> - <dd><a href="./javasript.html#scrollspy">Scrollspy</a></dd> - <dd><a href="./javasript.html#tabs">Tabs</a></dd> - <dd><a href="./javasript.html#twipsy">Twipsy tooltips</a></dd> - <dd><a href="./javasript.html#popovers">Popovers</a></dd> - <dd><a href="./javasript.html#alerts">Alerts</a></dd> - <dd><a href="./javasript.html#buttons">Buttons</a></dd> - <dd><a href="./javasript.html#accordion">Accordion</a></dd> - <dd><a href="./javasript.html#carousel">Carousel</a></dd> + <dd><a href="./javascript.html#transitions">Transitions</a></dd> + <dd><a href="./javascript.html#modals">Modals</a></dd> + <dd><a href="./javascript.html#dropdowns">Dropdowns</a></dd> + <dd><a href="./javascript.html#scrollspy">Scrollspy</a></dd> + <dd><a href="./javascript.html#tabs">Tabs</a></dd> + <dd><a href="./javascript.html#twipsy">Twipsy tooltips</a></dd> + <dd><a href="./javascript.html#popovers">Popovers</a></dd> + <dd><a href="./javascript.html#alerts">Alerts</a></dd> + <dd><a href="./javascript.html#buttons">Buttons</a></dd> + <dd><a href="./javascript.html#collapse">Collapse</a></dd> + <dd><a href="./javascript.html#carousel">Carousel</a></dd> + <dd><a href="./javascript.html#typeahead">Typeahead</a></dd> </dl> <dl class="span2"> <dt>Using LESS</dt> diff --git a/lib/buttons.less b/lib/buttons.less index 3fab6e0390..140d1112ce 100644 --- a/lib/buttons.less +++ b/lib/buttons.less @@ -97,7 +97,7 @@ padding: 9px 14px 9px; font-size: @baseFontSize + 2px; line-height: normal; - .border-radius(6px); + .border-radius(5px); } &.small { padding: 7px 9px 7px; -- GitLab From 5032ef9b54b92443f1dbaa2594468dcd84b6bd9e Mon Sep 17 00:00:00 2001 From: Mark Otto <markdotto@gmail.com> Date: Sun, 8 Jan 2012 23:14:07 -0800 Subject: [PATCH 260/318] remove static popovers, modals, and twipsies from components in favor of full javascript page --- bootstrap.css | 3 +- bootstrap.min.css | 2 +- docs/components.html | 115 ++++--------------------------------------- lib/close.less | 1 + 4 files changed, 14 insertions(+), 107 deletions(-) diff --git a/bootstrap.css b/bootstrap.css index b859657ef0..81ae2e6c42 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 Jan 8 19:32:37 PST 2012 + * Date: Sun Jan 8 21:54:13 PST 2012 */ html, body { margin: 0; @@ -1577,6 +1577,7 @@ i { filter: alpha(opacity=40); -moz-opacity: 0.4; opacity: 0.4; + cursor: pointer; } .navbar { overflow: visible; diff --git a/bootstrap.min.css b/bootstrap.min.css index 3dc0151638..0a85016436 100644 --- a/bootstrap.min.css +++ b/bootstrap.min.css @@ -309,7 +309,7 @@ i{background-image:url(docs/assets/img/glyphicons-halflings-sprite.png);backgrou .well{min-height:20px;padding:19px;margin-bottom:20px;background-color:#f5f5f5;border:1px solid #eee;border:1px solid rgba(0, 0, 0, 0.05);-webkit-border-radius:4px;-moz-border-radius:4px;border-radius:4px;-webkit-box-shadow:inset 0 1px 1px rgba(0, 0, 0, 0.05);-moz-box-shadow:inset 0 1px 1px rgba(0, 0, 0, 0.05);box-shadow:inset 0 1px 1px rgba(0, 0, 0, 0.05);}.well blockquote{border-color:#ddd;border-color:rgba(0, 0, 0, 0.15);} .fade{-webkit-transition:opacity 0.15s linear;-moz-transition:opacity 0.15s linear;-ms-transition:opacity 0.15s linear;-o-transition:opacity 0.15s linear;transition:opacity 0.15s linear;opacity:0;}.fade.in{opacity:1;} .collapse{-webkit-transition:height 0.35s ease;-moz-transition:height 0.35s ease;-ms-transition:height 0.35s ease;-o-transition:height 0.35s ease;transition:height 0.35s ease;position:relative;overflow:hidden;height:0;}.collapse.in{height:auto;} -.close{float:right;font-size:20px;font-weight:bold;line-height:13.5px;color:#000000;text-shadow:0 1px 0 #ffffff;filter:alpha(opacity=20);-moz-opacity:0.2;opacity:0.2;}.close:hover{color:#000000;text-decoration:none;filter:alpha(opacity=40);-moz-opacity:0.4;opacity:0.4;} +.close{float:right;font-size:20px;font-weight:bold;line-height:13.5px;color:#000000;text-shadow:0 1px 0 #ffffff;filter:alpha(opacity=20);-moz-opacity:0.2;opacity:0.2;}.close:hover{color:#000000;text-decoration:none;filter:alpha(opacity=40);-moz-opacity:0.4;opacity:0.4;cursor:pointer;} .navbar{overflow:visible;} .navbar-inner{background-color:#222222;background-color:#222222;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);background-repeat:repeat-x;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);} .navbar .brand:hover{color:#ffffff;text-decoration:none;} diff --git a/docs/components.html b/docs/components.html index f3e8d42a5e..ee1634ccac 100644 --- a/docs/components.html +++ b/docs/components.html @@ -1010,26 +1010,26 @@ </div> <div class="span9"> <div class="alert-message warning"> - <a class="close" href="#">×</a> + <a class="close">×</a> <p><strong>Holy guacamole!</strong> Best check yo self, you’re not looking too good.</p> </div> <div class="alert-message error"> - <a class="close" href="#">×</a> + <a class="close">×</a> <p><strong>Oh snap!</strong> Change this and that and try again.</p> </div> <div class="alert-message success"> - <a class="close" href="#">×</a> + <a class="close">×</a> <p><strong>Well done!</strong> You successfully read this alert message.</p> </div> <div class="alert-message info"> - <a class="close" href="#">×</a> + <a class="close">×</a> <p><strong>Heads up!</strong> This is an alert that needs your attention, but it’s not a huge priority just yet.</p> </div> <h4>Example code</h4> <pre class="prettyprint linenums"> <div class="alert-message warning"> - <a class="close" href="#">×</a> + <a class="close">×</a> <p><strong>Holy guacamole!</strong> Best check yo self, you’re not looking too good.</p> </div> </pre> @@ -1048,14 +1048,14 @@ </div> <div class="span9"> <div class="alert-message block-message warning"> - <a class="close" href="#">×</a> + <a class="close">×</a> <p><strong>Holy guacamole! This is a warning!</strong> Best check yo self, you’re not looking too good. Nulla vitae elit libero, a pharetra augue. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.</p> <div class="alert-actions"> <a class="btn small" href="#">Take this action</a> <a class="btn small" href="#">Or do this</a> </div> </div> <div class="alert-message block-message error"> - <a class="close" href="#">×</a> + <a class="close">×</a> <p><strong>Oh snap! You got an error!</strong> Change this and that and try again.</p> <ul> <li>Duis mollis est non commodo luctus</li> @@ -1067,14 +1067,14 @@ </div> </div> <div class="alert-message block-message success"> - <a class="close" href="#">×</a> + <a class="close">×</a> <p><strong>Well done!</strong> You successfully read this alert message. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Maecenas faucibus mollis interdum.</p> <div class="alert-actions"> <a class="btn small" href="#">Take this action</a> <a class="btn small" href="#">Or do this</a> </div> </div> <div class="alert-message block-message info"> - <a class="close" href="#">×</a> + <a class="close">×</a> <p><strong>Heads up!</strong> This is an alert that needs your attention, but it’s not a huge priority just yet.</p> <div class="alert-actions"> <a class="btn small" href="#">Take this action</a> <a class="btn small" href="#">Or do this</a> @@ -1084,7 +1084,7 @@ <h4>Example code</h4> <pre class="prettyprint linenums"> <div class="alert-message block-message warning"> - <a class="close" href="#">×</a> + <a class="close">×</a> <p><strong>Holy guacamole! This is a warning!</strong> Best check yo self, you’re not looking too good. Nulla vitae elit libero, a pharetra augue. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.</p> <div class="alert-actions"> <a class="btn small" href="#">Take this action</a> <a class="btn small" href="#">Or do this</a> @@ -1096,101 +1096,6 @@ </section> -<!-- Modals -================================================== --> -<section id="popovers"> - <div class="page-header"> - <h1>Modals <small></small></h1> - </div> - <div class="row"> - <div class="span3"> - <h2>Modals</h2> - <p>Modals—dialogs or lightboxes—are great for contextual actions in situations where it’s important that the background context be maintained.</p> - <p><a class="btn js-btn" href="./javascript.html#modal">Get the javascript »</a></p> - </div> - <div class="span9"> - <div class="well" style="background-color: #888; border: none; "> - <!-- Modal --> - <div class="modal" style="position: relative; top: auto; left: auto; margin: 0 auto; z-index: 1"> - <div class="modal-header"> - <a href="#" class="close js-dismiss">×</a> - <h3>Modal Heading</h3> - </div> - <div class="modal-body"> - <p>One fine body…</p> - </div> - <div class="modal-footer"> - <a href="#" class="btn primary">Primary</a> - <a href="#" class="btn">Secondary</a> - </div> - </div> - </div> - </div> - </div><!-- /row --> - -</section> - - - -<!-- Twipsies -================================================== --> -<section id="carousel"> - <div class="page-header"> - <h1>Twipsy tooltips <small></small></h1> - </div> - - <div class="row"> - <div class="span3"> - <h2>Tooltips</h2> - <p>Twipsies are super useful for aiding a confused user and pointing them in the right direction.</p> - <p><a class="btn js-btn" href="./javascript.html#twipsy">Get the javascript »</a></p> - </div> - <div class="span9"> - <div class="twipsies well"> - <div style="position: relative"> - <p class="muted" style="margin-bottom: 0"> -Lorem ipsum dolar sit amet illo error <a href="#" title="bottom">ipsum</a> veritatis aut iste perspiciatis iste voluptas natus illo quasi odit aut natus consequuntur consequuntur, aut natus illo voluptatem odit perspiciatis laudantium rem doloremque totam voluptas. <a href="#" title="right">Voluptasdicta</a> eaque beatae aperiam ut enim voluptatem explicabo explicabo, voluptas quia odit fugit accusantium totam totam architecto explicabo sit quasi fugit fugit, totam doloremque unde sunt <a href="#" title="left">sed</a> dicta quae accusantium fugit voluptas nemo voluptas voluptatem <a href="#" title="top">rem</a> quae aut veritatis quasi quae. - </p> - </div> - </div> - </div> - </div><!-- /row --> - -</section> - - - -<!-- Popovers -================================================== --> -<section id="popovers"> - <div class="page-header"> - <h1>Popovers <small></small></h1> - </div> - - <div class="row"> - <div class="span3"> - <h2>Popovers</h2> - <p>Use popovers to provide subtextual information to a page without affecting layout.</p> - <p><a class="btn js-btn" href="./javascript.html#popover">Get the javascript »</a></p> - </div> - <div class="span9"> - <div class="well popover-well"> - <div class="popover-wrapper"> - <div class="popover left"> - <div class="arrow"></div> - <div class="inner"> - <h3 class="title">Popover Title</h3> - <div class="content"> - <p>Etiam porta sem malesuada magna mollis euismod. Maecenas faucibus mollis interdum. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.</p> - </div> - </div> - </div> - <img class="large-bird" src="assets/img/bird.png" > - </div> - </div> - </div> - </div><!-- /row --> -</section> <!-- Progress bars ================================================== --> diff --git a/lib/close.less b/lib/close.less index 25a0c3ef3e..1210ec4638 100644 --- a/lib/close.less +++ b/lib/close.less @@ -13,5 +13,6 @@ color: @black; text-decoration: none; .opacity(40); + cursor: pointer; } } -- GitLab From 5c2bf0feef7f7f64584cbd0cb6a2ef74dbba80d2 Mon Sep 17 00:00:00 2001 From: Mark Otto <markdotto@gmail.com> Date: Mon, 9 Jan 2012 09:15:42 -0800 Subject: [PATCH 261/318] remove empty margin property --- bootstrap.css | 3 +-- bootstrap.min.css | 2 +- lib/progress-bars.less | 1 - 3 files changed, 2 insertions(+), 4 deletions(-) diff --git a/bootstrap.css b/bootstrap.css index 81ae2e6c42..32f8b9da43 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 Jan 8 21:54:13 PST 2012 + * Date: Mon Jan 9 09:15:32 PST 2012 */ html, body { margin: 0; @@ -2903,7 +2903,6 @@ a.thumbnail:hover { .progress .bar { width: 0%; height: 18px; - margin: ; background-color: #0480be; background-image: -khtml-gradient(linear, left top, left bottom, from(#149bdf), to(#0480be)); background-image: -moz-linear-gradient(top, #149bdf, #0480be); diff --git a/bootstrap.min.css b/bootstrap.min.css index 0a85016436..e535f1e51a 100644 --- a/bootstrap.min.css +++ b/bootstrap.min.css @@ -503,7 +503,7 @@ a.thumbnail:hover{border-color:#0088cc;-webkit-box-shadow:0 1px 4px rgba(0, 105, .label.notice{background-color:#62cffc;} @-webkit-keyframes progress-bar-stripes{from{background-position:0 0;} to{background-position:40px 0;}}@keyframes progress-bar-stripes{from{background-position:0 0;} to{background-position:40px 0;}}.progress,.progress .bar{-webkit-border-radius:4px;-moz-border-radius:4px;border-radius:4px;} .progress{height:18px;margin-bottom:18px;background-color:#f9f9f9;background-image:-khtml-gradient(linear, left top, left bottom, from(#f5f5f5), to(#f9f9f9));background-image:-moz-linear-gradient(top, #f5f5f5, #f9f9f9);background-image:-ms-linear-gradient(top, #f5f5f5, #f9f9f9);background-image:-webkit-gradient(linear, left top, left bottom, color-stop(0%, #f5f5f5), color-stop(100%, #f9f9f9));background-image:-webkit-linear-gradient(top, #f5f5f5, #f9f9f9);background-image:-o-linear-gradient(top, #f5f5f5, #f9f9f9);background-image:linear-gradient(top, #f5f5f5, #f9f9f9);background-repeat:repeat-x;filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#f5f5f5', endColorstr='#f9f9f9', GradientType=0);-webkit-box-shadow:inset 0 1px 2px rgba(0, 0, 0, 0.1);-moz-box-shadow:inset 0 1px 2px rgba(0, 0, 0, 0.1);box-shadow:inset 0 1px 2px rgba(0, 0, 0, 0.1);} -.progress .bar{width:0%;height:18px;margin:;background-color:#0480be;background-image:-khtml-gradient(linear, left top, left bottom, from(#149bdf), to(#0480be));background-image:-moz-linear-gradient(top, #149bdf, #0480be);background-image:-ms-linear-gradient(top, #149bdf, #0480be);background-image:-webkit-gradient(linear, left top, left bottom, color-stop(0%, #149bdf), color-stop(100%, #0480be));background-image:-webkit-linear-gradient(top, #149bdf, #0480be);background-image:-o-linear-gradient(top, #149bdf, #0480be);background-image:linear-gradient(top, #149bdf, #0480be);background-repeat:repeat-x;filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#149bdf', endColorstr='#0480be', GradientType=0);-webkit-box-shadow:inset 0 -1px 0 rgba(0, 0, 0, 0.15);-moz-box-shadow:inset 0 -1px 0 rgba(0, 0, 0, 0.15);box-shadow:inset 0 -1px 0 rgba(0, 0, 0, 0.15);-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;-webkit-transition:width 0.6s ease;-moz-transition:width 0.6s ease;-ms-transition:width 0.6s ease;-o-transition:width 0.6s ease;transition:width 0.6s ease;} +.progress .bar{width:0%;height:18px;background-color:#0480be;background-image:-khtml-gradient(linear, left top, left bottom, from(#149bdf), to(#0480be));background-image:-moz-linear-gradient(top, #149bdf, #0480be);background-image:-ms-linear-gradient(top, #149bdf, #0480be);background-image:-webkit-gradient(linear, left top, left bottom, color-stop(0%, #149bdf), color-stop(100%, #0480be));background-image:-webkit-linear-gradient(top, #149bdf, #0480be);background-image:-o-linear-gradient(top, #149bdf, #0480be);background-image:linear-gradient(top, #149bdf, #0480be);background-repeat:repeat-x;filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#149bdf', endColorstr='#0480be', GradientType=0);-webkit-box-shadow:inset 0 -1px 0 rgba(0, 0, 0, 0.15);-moz-box-shadow:inset 0 -1px 0 rgba(0, 0, 0, 0.15);box-shadow:inset 0 -1px 0 rgba(0, 0, 0, 0.15);-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;-webkit-transition:width 0.6s ease;-moz-transition:width 0.6s ease;-ms-transition:width 0.6s ease;-o-transition:width 0.6s ease;transition:width 0.6s ease;} .progress.striped .bar{background-color:#62c462;background-image:-webkit-gradient(linear, 0 100%, 100% 0, color-stop(0.25, rgba(255, 255, 255, 0.15)), color-stop(0.25, transparent), color-stop(0.5, transparent), color-stop(0.5, rgba(255, 255, 255, 0.15)), color-stop(0.75, rgba(255, 255, 255, 0.15)), color-stop(0.75, transparent), to(transparent));background-image:-webkit-linear-gradient(-45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);background-image:-moz-linear-gradient(-45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);background-image:-ms-linear-gradient(-45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);background-image:-o-linear-gradient(-45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);background-image:linear-gradient(-45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);-webkit-background-size:40px 40px;-moz-background-size:40px 40px;-o-background-size:40px 40px;background-size:40px 40px;} .progress.active .bar{-webkit-animation:progress-bar-stripes 2s linear infinite;-moz-animation:progress-bar-stripes 2s linear infinite;animation:progress-bar-stripes 2s linear infinite;} .progress.danger .bar{background-color:#c43c35;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);background-repeat:repeat-x;filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ee5f5b', endColorstr='#c43c35', GradientType=0);} diff --git a/lib/progress-bars.less b/lib/progress-bars.less index f5a8398340..fd9d3f4271 100644 --- a/lib/progress-bars.less +++ b/lib/progress-bars.less @@ -46,7 +46,6 @@ .progress .bar { width: 0%; height: 18px; - margin: ; #gradient > .vertical(#149bdf, #0480be); .box-shadow(inset 0 -1px 0 rgba(0,0,0,.15)); .box-sizing(border-box); -- GitLab From 51e4e77034e14074cb442138e84b98efd288ccfd Mon Sep 17 00:00:00 2001 From: Jacob Thornton <jacobthornton@gmail.com> Date: Mon, 9 Jan 2012 19:53:52 -0800 Subject: [PATCH 262/318] remove some tabs from demo + fix dropdowns for pills --- docs/javascript.html | 14 +++----------- 1 file changed, 3 insertions(+), 11 deletions(-) diff --git a/docs/javascript.html b/docs/javascript.html index c0469c0a76..119066895c 100644 --- a/docs/javascript.html +++ b/docs/javascript.html @@ -347,7 +347,7 @@ $('#myModal').on('hidden', function () { <ul class="nav pills"> <li class="active"><a href="#">Regular link</a></li> <li class="dropdown"> - <a class="dropdown-toggle" data-toggle="dropdown" href="#menu1">Dropdown <b class="caret"></b></a> + <a class="dropdown-toggle" data-toggle="dropdown" href="#">Dropdown <b class="caret"></b></a> <ul id="menu1" class="dropdown-menu"> <li><a href="#">Action</a></li> <li><a href="#">Another action</a></li> @@ -357,7 +357,7 @@ $('#myModal').on('hidden', function () { </ul> </li> <li class="dropdown"> - <a class="dropdown-toggle" data-toggle="dropdown" href="#menu2">Dropdown 2 <b class="caret"></b></a> + <a class="dropdown-toggle" data-toggle="dropdown" href="#">Dropdown 2 <b class="caret"></b></a> <ul id="menu2" class="dropdown-menu"> <li><a href="#">Action</a></li> <li><a href="#">Another action</a></li> @@ -367,7 +367,7 @@ $('#myModal').on('hidden', function () { </ul> </li> <li class="dropdown"> - <a class="dropdown-toggle" data-toggle="dropdown" href="#menu3">Dropdown 3 <b class="caret"></b></a> + <a class="dropdown-toggle" data-toggle="dropdown" href="#">Dropdown 3 <b class="caret"></b></a> <ul id="menu3" class="dropdown-menu"> <li><a href="#">Action</a></li> <li><a href="#">Another action</a></li> @@ -505,8 +505,6 @@ $('#myModal').on('hidden', function () { <ul id="tab" class="nav tabs"> <li class="active"><a href="#home" data-toggle="tab">Home</a></li> <li><a href="#profile" data-toggle="tab">Profile</a></li> - <li><a href="#messages" data-toggle="tab">Messages</a></li> - <li><a href="#settings" data-toggle="tab">Settings</a></li> <li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a> <ul class="dropdown-menu"> @@ -522,12 +520,6 @@ $('#myModal').on('hidden', function () { <div class="tab-pane fade" id="profile"> <p>Food truck fixie locavore, accusamus mcsweeney's marfa nulla single-origin coffee squid. Exercitation +1 labore velit, blog sartorial PBR leggings next level wes anderson artisan four loko farm-to-table craft beer twee. Qui photo booth letterpress, commodo enim craft beer mlkshk aliquip jean shorts ullamco ad vinyl cillum PBR. Homo nostrud organic, assumenda labore aesthetic magna delectus mollit. Keytar helvetica VHS salvia yr, vero magna velit sapiente labore stumptown. Vegan fanny pack odio cillum wes anderson 8-bit, sustainable jean shorts beard ut DIY ethical culpa terry richardson biodiesel. Art party scenester stumptown, tumblr butcher vero sint qui sapiente accusamus tattooed echo park.</p> </div> - <div class="tab-pane fade" id="messages"> - <p>Banksy do proident, brooklyn photo booth delectus sunt artisan sed organic exercitation eiusmod four loko. Quis tattooed iphone esse aliqua. Master cleanse vero fixie mcsweeney's. Ethical portland aute, irony food truck pitchfork lomo eu anim. Aesthetic blog DIY, ethical beard leggings tofu consequat whatever cardigan nostrud. Helvetica you probably haven't heard of them carles, marfa veniam occaecat lomo before they sold out in shoreditch scenester sustainable thundercats. Consectetur tofu craft beer, mollit brunch fap echo park pitchfork mustache dolor.</p> - </div> - <div class="tab-pane fade" id="settings"> - <p>Sunt qui biodiesel mollit officia, fanny pack put a bird on it thundercats seitan squid ad wolf bicycle rights blog. Et aute readymade farm-to-table carles 8-bit, nesciunt nulla etsy adipisicing organic ea. Master cleanse mollit high life, next level Austin nesciunt american apparel twee mustache adipisicing reprehenderit hoodie portland irony. Aliqua tofu quinoa +1 commodo eiusmod. High life williamsburg cupidatat twee homo leggings. Four loko vinyl DIY consectetur nisi, marfa retro keffiyeh vegan. Fanny pack viral retro consectetur gentrify fap.</p> - </div> <div class="tab-pane fade" id="dropdown1"> <p>Etsy mixtape wayfarers, ethical wes anderson tofu before they sold out mcsweeney's organic lomo retro fanny pack lo-fi farm-to-table readymade. Messenger bag gentrify pitchfork tattooed craft beer, iphone skateboard locavore carles etsy salvia banksy hoodie helvetica. DIY synth PBR banksy irony. Leggings gentrify squid 8-bit cred pitchfork. Williamsburg banh mi whatever gluten-free, carles pitchfork biodiesel fixie etsy retro mlkshk vice blog. Scenester cred you probably haven't heard of them, vinyl craft beer blog stumptown. Pitchfork sustainable tofu synth chambray yr.</p> </div> -- GitLab From a34231d94d37bd30b59577580a12c20a9939f5fa Mon Sep 17 00:00:00 2001 From: Mark Otto <markdotto@gmail.com> Date: Tue, 10 Jan 2012 15:58:44 -0800 Subject: [PATCH 263/318] typo --- docs/scaffolding.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/scaffolding.html b/docs/scaffolding.html index 5b6f7c7c37..895eaa19d9 100644 --- a/docs/scaffolding.html +++ b/docs/scaffolding.html @@ -196,7 +196,7 @@ <div class="row"> <div class="span4"> <h3>Variables in LESS</h3> - <p>Built into Bootstrap are a handful of variables for customizing the default 940px grid system, documented above. All variables for the grid are stored in mixins.less.</p> + <p>Built into Bootstrap are a handful of variables for customizing the default 940px grid system, documented above. All variables for the grid are stored in variables.less.</p> </div> <div class="span4"> <h3>How to customize</h3> -- GitLab From a2ebf0c0c1381c38dda24bf12aebd5f9b4907e06 Mon Sep 17 00:00:00 2001 From: Mark Otto <markdotto@gmail.com> Date: Tue, 10 Jan 2012 21:54:11 -0800 Subject: [PATCH 264/318] account for multiple tbody with 2px border between --- bootstrap.css | 5 ++++- bootstrap.min.css | 1 + lib/tables.less | 3 +++ 3 files changed, 8 insertions(+), 1 deletion(-) diff --git a/bootstrap.css b/bootstrap.css index 32f8b9da43..561a705720 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: Mon Jan 9 09:15:32 PST 2012 + * Date: Tue Jan 10 21:52:26 PST 2012 */ html, body { margin: 0; @@ -993,6 +993,9 @@ th { td { vertical-align: top; } +tbody + tbody { + border-top: 2px solid #ddd; +} .condensed-table th, .condensed-table td { padding: 4px 5px; } diff --git a/bootstrap.min.css b/bootstrap.min.css index e535f1e51a..6c6ed89856 100644 --- a/bootstrap.min.css +++ b/bootstrap.min.css @@ -179,6 +179,7 @@ table{width:100%;margin-bottom:18px;} th,td{padding:8px;line-height:18px;text-align:left;border-top:1px solid #ddd;} th{font-weight:bold;vertical-align:bottom;} td{vertical-align:top;} +tbody+tbody{border-top:2px solid #ddd;} .condensed-table th,.condensed-table td{padding:4px 5px;} .bordered-table{border:1px solid #ddd;border-collapse:separate;-webkit-border-radius:4px;-moz-border-radius:4px;border-radius:4px;}.bordered-table th+th,.bordered-table td+td,.bordered-table th+td,.bordered-table td+th{border-left:1px solid #ddd;} .bordered-table thead:first-child tr:first-child th,.bordered-table tbody:first-child tr:first-child td{border-top:0;} diff --git a/lib/tables.less b/lib/tables.less index 92ac57c39c..4c1fb6e071 100644 --- a/lib/tables.less +++ b/lib/tables.less @@ -26,6 +26,9 @@ th { td { vertical-align: top; } +tbody + tbody { + border-top: 2px solid #ddd; +} // CONDENSED TABLE W/ HALF PADDING -- GitLab From 32c628725924ca014df208fa57de4c5a4050733e Mon Sep 17 00:00:00 2001 From: Mark Otto <markdotto@gmail.com> Date: Wed, 11 Jan 2012 09:43:13 -0800 Subject: [PATCH 265/318] comments and borders for multiple tbody --- bootstrap.css | 5 ++++- bootstrap.min.css | 1 + lib/tables.less | 8 ++++++++ 3 files changed, 13 insertions(+), 1 deletion(-) diff --git a/bootstrap.css b/bootstrap.css index 561a705720..6ac110e296 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: Tue Jan 10 21:52:26 PST 2012 + * Date: Wed Jan 11 09:43:04 PST 2012 */ html, body { margin: 0; @@ -993,6 +993,9 @@ th { td { vertical-align: top; } +thead:first-child tr th, thead:first-child tr td { + border-top: 0; +} tbody + tbody { border-top: 2px solid #ddd; } diff --git a/bootstrap.min.css b/bootstrap.min.css index 6c6ed89856..761fb53bec 100644 --- a/bootstrap.min.css +++ b/bootstrap.min.css @@ -179,6 +179,7 @@ table{width:100%;margin-bottom:18px;} th,td{padding:8px;line-height:18px;text-align:left;border-top:1px solid #ddd;} th{font-weight:bold;vertical-align:bottom;} td{vertical-align:top;} +thead:first-child tr th,thead:first-child tr td{border-top:0;} tbody+tbody{border-top:2px solid #ddd;} .condensed-table th,.condensed-table td{padding:4px 5px;} .bordered-table{border:1px solid #ddd;border-collapse:separate;-webkit-border-radius:4px;-moz-border-radius:4px;border-radius:4px;}.bordered-table th+th,.bordered-table td+td,.bordered-table th+td,.bordered-table td+th{border-left:1px solid #ddd;} diff --git a/lib/tables.less b/lib/tables.less index 4c1fb6e071..8b69f5d7f9 100644 --- a/lib/tables.less +++ b/lib/tables.less @@ -26,6 +26,14 @@ th { td { vertical-align: top; } + +// Remove top border from thead by default +thead:first-child tr th, +thead:first-child tr td { + border-top: 0; +} + +// Account for multiple tbody instances tbody + tbody { border-top: 2px solid #ddd; } -- GitLab From 6f2f947a4309a8fdeb7067612447c0f1a15dcfd9 Mon Sep 17 00:00:00 2001 From: Jacob Thornton <jacobthornton@gmail.com> Date: Wed, 11 Jan 2012 21:42:55 -0800 Subject: [PATCH 266/318] add build tool for js + rename twipsy to tooltip + lots of little doc cleanup --- Makefile | 2 +- bootstrap.css | 29 ++-- bootstrap.min.css | 26 +-- docs/assets/css/docs.css | 9 +- docs/assets/js/application.js | 83 ++++++++- docs/components.html | 18 +- docs/javascript.html | 159 +++++++++++------- docs/scaffolding.html | 18 +- js/bootstrap-popover.js | 8 +- ...otstrap-twipsy.js => bootstrap-tooltip.js} | 38 ++--- js/bootstrap-typeahead.js | 2 + js/tests/index.html | 4 +- js/tests/unit/bootstrap-twipsy.js | 48 +++--- lib/bootstrap.less | 2 +- lib/button-groups.less | 1 + lib/{twipsy.less => tooltip.less} | 20 +-- lib/variables.less | 2 +- 17 files changed, 297 insertions(+), 172 deletions(-) rename js/{bootstrap-twipsy.js => bootstrap-tooltip.js} (87%) rename lib/{twipsy.less => tooltip.less} (60%) diff --git a/Makefile b/Makefile index 5eee74f2e5..0dddb13dd0 100644 --- a/Makefile +++ b/Makefile @@ -31,7 +31,7 @@ uglify: uglifyjs -o js/min/bootstrap-scrollspy.js js/bootstrap-scrollspy.js;\ uglifyjs -o js/min/bootstrap-tabs.js js/bootstrap-tab.js;\ uglifyjs -o js/min/bootstrap-transitions.js js/bootstrap-transition.js;\ - uglifyjs -o js/min/bootstrap-twipsy.js js/bootstrap-twipsy.js;\ + uglifyjs -o js/min/bootstrap-tooltip.js js/bootstrap-tooltip.js;\ else \ echo "You must have the UGLIFYJS minifier installed in order to minify Bootstrap's js."; \ echo "You can install it by running: npm install uglify-js -g"; \ diff --git a/bootstrap.css b/bootstrap.css index 32f8b9da43..09b7b41821 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: Mon Jan 9 09:15:32 PST 2012 + * Date: Wed Jan 11 20:37:24 PST 2012 */ html, body { margin: 0; @@ -2208,7 +2208,7 @@ i { float: right; margin-left: 5px; } -.twipsy { +.tooltip { position: absolute; z-index: 1020; display: block; @@ -2219,24 +2219,24 @@ i { -moz-opacity: 0; opacity: 0; } -.twipsy.in { +.tooltip.in { filter: alpha(opacity=80); -moz-opacity: 0.8; opacity: 0.8; } -.twipsy.top { +.tooltip.top { margin-top: -2px; } -.twipsy.right { +.tooltip.right { margin-left: 2px; } -.twipsy.bottom { +.tooltip.bottom { margin-top: 2px; } -.twipsy.left { +.tooltip.left { margin-left: -2px; } -.twipsy.top .twipsy-arrow { +.tooltip.top .tooltip-arrow { bottom: 0; left: 50%; margin-left: -5px; @@ -2244,7 +2244,7 @@ i { border-right: 5px solid transparent; border-top: 5px solid #000000; } -.twipsy.left .twipsy-arrow { +.tooltip.left .tooltip-arrow { top: 50%; right: 0; margin-top: -5px; @@ -2252,7 +2252,7 @@ i { border-bottom: 5px solid transparent; border-left: 5px solid #000000; } -.twipsy.bottom .twipsy-arrow { +.tooltip.bottom .tooltip-arrow { top: 0; left: 50%; margin-left: -5px; @@ -2260,7 +2260,7 @@ i { border-right: 5px solid transparent; border-bottom: 5px solid #000000; } -.twipsy.right .twipsy-arrow { +.tooltip.right .tooltip-arrow { top: 50%; left: 0; margin-top: -5px; @@ -2268,7 +2268,7 @@ i { border-bottom: 5px solid transparent; border-right: 5px solid #000000; } -.twipsy-inner { +.tooltip-inner { max-width: 200px; padding: 3px 8px; color: white; @@ -2279,7 +2279,7 @@ i { -moz-border-radius: 4px; border-radius: 4px; } -.twipsy-arrow { +.tooltip-arrow { position: absolute; width: 0; height: 0; @@ -2619,6 +2619,9 @@ button.btn::-moz-focus-inner, input[type=submit].btn::-moz-focus-inner { -moz-border-radius: 5px; border-radius: 5px; } +.btn-group.open .dropdown-menu.large { + top: 40px; +} .btn-group.open .dropdown-toggle { background-image: none; -webkit-box-shadow: inset 0 1px 6px rgba(0, 0, 0, 0.15), 0 1px 2px rgba(0, 0, 0, 0.05); diff --git a/bootstrap.min.css b/bootstrap.min.css index e535f1e51a..bf7cd42003 100644 --- a/bootstrap.min.css +++ b/bootstrap.min.css @@ -412,17 +412,17 @@ i{background-image:url(docs/assets/img/glyphicons-halflings-sprite.png);backgrou .modal-footer{padding:14px 15px 15px;margin-bottom:0;background-color:#f5f5f5;border-top:1px solid #ddd;-webkit-border-radius:0 0 6px 6px;-moz-border-radius:0 0 6px 6px;border-radius:0 0 6px 6px;-webkit-box-shadow:inset 0 1px 0 #ffffff;-moz-box-shadow:inset 0 1px 0 #ffffff;box-shadow:inset 0 1px 0 #ffffff;zoom:1;}.modal-footer:before,.modal-footer:after{display:table;*display:inline;content:"";zoom:1;} .modal-footer:after{clear:both;} .modal-footer .btn{float:right;margin-left:5px;} -.twipsy{position:absolute;z-index:1020;display:block;visibility:visible;padding:5px;font-size:11px;filter:alpha(opacity=0);-moz-opacity:0;opacity:0;}.twipsy.in{filter:alpha(opacity=80);-moz-opacity:0.8;opacity:0.8;} -.twipsy.top{margin-top:-2px;} -.twipsy.right{margin-left:2px;} -.twipsy.bottom{margin-top:2px;} -.twipsy.left{margin-left:-2px;} -.twipsy.top .twipsy-arrow{bottom:0;left:50%;margin-left:-5px;border-left:5px solid transparent;border-right:5px solid transparent;border-top:5px solid #000000;} -.twipsy.left .twipsy-arrow{top:50%;right:0;margin-top:-5px;border-top:5px solid transparent;border-bottom:5px solid transparent;border-left:5px solid #000000;} -.twipsy.bottom .twipsy-arrow{top:0;left:50%;margin-left:-5px;border-left:5px solid transparent;border-right:5px solid transparent;border-bottom:5px solid #000000;} -.twipsy.right .twipsy-arrow{top:50%;left:0;margin-top:-5px;border-top:5px solid transparent;border-bottom:5px solid transparent;border-right:5px solid #000000;} -.twipsy-inner{max-width:200px;padding:3px 8px;color:white;text-align:center;text-decoration:none;background-color:#000000;-webkit-border-radius:4px;-moz-border-radius:4px;border-radius:4px;} -.twipsy-arrow{position:absolute;width:0;height:0;} +.tooltip{position:absolute;z-index:1020;display:block;visibility:visible;padding:5px;font-size:11px;filter:alpha(opacity=0);-moz-opacity:0;opacity:0;}.tooltip.in{filter:alpha(opacity=80);-moz-opacity:0.8;opacity:0.8;} +.tooltip.top{margin-top:-2px;} +.tooltip.right{margin-left:2px;} +.tooltip.bottom{margin-top:2px;} +.tooltip.left{margin-left:-2px;} +.tooltip.top .tooltip-arrow{bottom:0;left:50%;margin-left:-5px;border-left:5px solid transparent;border-right:5px solid transparent;border-top:5px solid #000000;} +.tooltip.left .tooltip-arrow{top:50%;right:0;margin-top:-5px;border-top:5px solid transparent;border-bottom:5px solid transparent;border-left:5px solid #000000;} +.tooltip.bottom .tooltip-arrow{top:0;left:50%;margin-left:-5px;border-left:5px solid transparent;border-right:5px solid transparent;border-bottom:5px solid #000000;} +.tooltip.right .tooltip-arrow{top:50%;left:0;margin-top:-5px;border-top:5px solid transparent;border-bottom:5px solid transparent;border-right:5px solid #000000;} +.tooltip-inner{max-width:200px;padding:3px 8px;color:white;text-align:center;text-decoration:none;background-color:#000000;-webkit-border-radius:4px;-moz-border-radius:4px;border-radius:4px;} +.tooltip-arrow{position:absolute;width:0;height:0;} .popover{position:absolute;top:0;left:0;z-index:1010;display:none;padding:5px;}.popover.top{margin-top:-5px;} .popover.right{margin-left:5px;} .popover.bottom{margin-top:5px;} @@ -460,7 +460,7 @@ button.btn::-moz-focus-inner,input[type=submit].btn::-moz-focus-inner{padding:0; .btn-group .btn.large:last-child,.btn-group .large.dropdown-toggle{-webkit-border-top-right-radius:6px;-moz-border-radius-topright:6px;border-top-right-radius:6px;-webkit-border-bottom-right-radius:6px;-moz-border-radius-bottomright:6px;border-bottom-right-radius:6px;} .btn-group .btn:hover,.btn-group .btn:focus,.btn-group .btn:active{z-index:2;} .btn-group .dropdown-toggle{padding-left:8px;padding-right:8px;-webkit-box-shadow:inset 1px 0 0 rgba(255, 255, 255, 0.125),0 1px 2px rgba(0, 0, 0, 0.05);-moz-box-shadow:inset 1px 0 0 rgba(255, 255, 255, 0.125),0 1px 2px rgba(0, 0, 0, 0.05);box-shadow:inset 1px 0 0 rgba(255, 255, 255, 0.125),0 1px 2px rgba(0, 0, 0, 0.05);} -.btn-group.open .dropdown-menu{display:block;top:30px;-webkit-border-radius:5px;-moz-border-radius:5px;border-radius:5px;} +.btn-group.open .dropdown-menu{display:block;top:30px;-webkit-border-radius:5px;-moz-border-radius:5px;border-radius:5px;}.btn-group.open .dropdown-menu.large{top:40px;} .btn-group.open .dropdown-toggle{background-image:none;-webkit-box-shadow:inset 0 1px 6px rgba(0, 0, 0, 0.15),0 1px 2px rgba(0, 0, 0, 0.05);-moz-box-shadow:inset 0 1px 6px rgba(0, 0, 0, 0.15),0 1px 2px rgba(0, 0, 0, 0.05);box-shadow:inset 0 1px 6px rgba(0, 0, 0, 0.15),0 1px 2px rgba(0, 0, 0, 0.05);} .btn .caret{margin-top:6px;margin-left:0;} .primary .caret,.danger .caret,.info .caret,.success .caret{border-top-color:#fff;filter:alpha(opacity=75);-moz-opacity:0.75;opacity:0.75;} @@ -518,4 +518,4 @@ a.thumbnail:hover{border-color:#0088cc;-webkit-box-shadow:0 1px 4px rgba(0, 105, .show{display:block;} .invisible{visibility:hidden;} .hidden{display:none;visibility:hidden;} -@media (max-width: 480px){.navbar .nav{position:absolute;top:0;left:0;width:180px;padding-top:40px;list-style:none;} .navbar .nav,.navbar .nav>li:last-child a{-webkit-border-radius:0 0 4px 0;-moz-border-radius:0 0 4px 0;border-radius:0 0 4px 0;} .navbar .nav>li{float:none;display:none;} .navbar .nav>li>a{float:none;background-color:#222;} .navbar .nav>.active{display:block;position:absolute;top:0;left:0;} .navbar .nav>.active>a{background-color:transparent;} .navbar .nav>.active>a:hover{background-color:#333;} .navbar .nav>.active>a:after{display:inline-block;width:0;height:0;margin-top:8px;margin-left:6px;text-indent:-99999px;vertical-align:top;border-left:4px solid transparent;border-right:4px solid transparent;border-top:4px solid #ffffff;filter:alpha(opacity=100);-moz-opacity:1;opacity:1;content:"↓";} .navbar .nav:hover>li{display:block;} .navbar .nav:hover>li>a:hover{background-color:#333;} .horizontal-form .control-group>label{float:none;width:auto;padding-top:0;text-align:left;} .horizontal-form .controls{margin-left:0;} .horizontal-form .control-list{padding-top:0;} .horizontal-form .form-actions{padding-left:0;} .modal{position:fixed;top:20px;left:20px;right:20px;width:auto;}.modal.fade.in{top:auto;} .modal-header .close{padding:10px;}}@media (max-width: 768px){.navbar-fixed{position:absolute;} .navbar-fixed .nav{float:none;} .container{width:auto;padding:0 20px;} .row{margin-left:0;} .row>[class*="span"]{float:none;display:block;width:auto;margin:0;}}@media (min-width: 768px) and (max-width: 940px){.container{width:748px;} .span1{width:44px;} .span2{width:108px;} .span3{width:172px;} .span4{width:236px;} .span5{width:300px;} .span6{width:364px;} .span7{width:428px;} .span8{width:492px;} .span9{width:556px;} .span10{width:620px;} .span11{width:684px;} .span12{width:748px;} .offset1{margin-left:64px;} .offset2{margin-left:128px;} .offset3{margin-left:192px;} .offset4{margin-left:256px;} .offset5{margin-left:320px;} .offset6{margin-left:384px;} .offset7{margin-left:448px;} .offset8{margin-left:512px;} .offset9{margin-left:576px;} .offset10{margin-left:640px;} .offset11{margin-left:704px;} .offset12{margin-left:768px;}} +@media (max-width:480px){.navbar .nav{position:absolute;top:0;left:0;width:180px;padding-top:40px;list-style:none;} .navbar .nav,.navbar .nav>li:last-child a{-webkit-border-radius:0 0 4px 0;-moz-border-radius:0 0 4px 0;border-radius:0 0 4px 0;} .navbar .nav>li{float:none;display:none;} .navbar .nav>li>a{float:none;background-color:#222;} .navbar .nav>.active{display:block;position:absolute;top:0;left:0;} .navbar .nav>.active>a{background-color:transparent;} .navbar .nav>.active>a:hover{background-color:#333;} .navbar .nav>.active>a:after{display:inline-block;width:0;height:0;margin-top:8px;margin-left:6px;text-indent:-99999px;vertical-align:top;border-left:4px solid transparent;border-right:4px solid transparent;border-top:4px solid #ffffff;filter:alpha(opacity=100);-moz-opacity:1;opacity:1;content:"↓";} .navbar .nav:hover>li{display:block;} .navbar .nav:hover>li>a:hover{background-color:#333;} .horizontal-form .control-group>label{float:none;width:auto;padding-top:0;text-align:left;} .horizontal-form .controls{margin-left:0;} .horizontal-form .control-list{padding-top:0;} .horizontal-form .form-actions{padding-left:0;} .modal{position:fixed;top:20px;left:20px;right:20px;width:auto;}.modal.fade.in{top:auto;} .modal-header .close{padding:10px;}}@media (max-width:768px){.navbar-fixed{position:absolute;} .navbar-fixed .nav{float:none;} .container{width:auto;padding:0 20px;} .row{margin-left:0;} .row>[class*="span"]{float:none;display:block;width:auto;margin:0;}}@media (min-width:768px) and (max-width:940px){.container{width:748px;} .span1{width:44px;} .span2{width:108px;} .span3{width:172px;} .span4{width:236px;} .span5{width:300px;} .span6{width:364px;} .span7{width:428px;} .span8{width:492px;} .span9{width:556px;} .span10{width:620px;} .span11{width:684px;} .span12{width:748px;} .offset1{margin-left:64px;} .offset2{margin-left:128px;} .offset3{margin-left:192px;} .offset4{margin-left:256px;} .offset5{margin-left:320px;} .offset6{margin-left:384px;} .offset7{margin-left:448px;} .offset8{margin-left:512px;} .offset9{margin-left:576px;} .offset10{margin-left:640px;} .offset11{margin-left:704px;} .offset12{margin-left:768px;}} diff --git a/docs/assets/css/docs.css b/docs/assets/css/docs.css index f370672037..134224e567 100644 --- a/docs/assets/css/docs.css +++ b/docs/assets/css/docs.css @@ -466,7 +466,7 @@ form.well { /* Icons ------------------------- */ .the-icons { - + } .the-icons i { display: block; @@ -481,6 +481,13 @@ form.well { width: 100px; } +#javascript input[type='checkbox'] { +display: inline; +margin-left: 6px; +position: relative; +top: -1px; +} + /* Responsive Docs -------------------------------------------------- */ diff --git a/docs/assets/js/application.js b/docs/assets/js/application.js index c31fc97a06..0e14a53508 100644 --- a/docs/assets/js/application.js +++ b/docs/assets/js/application.js @@ -48,18 +48,18 @@ $(function(){ setTimeout(function () { $(el).select() }, 0) }) - if ($.fn.twipsy) { + if ($.fn.tooltip) { // position static twipsies for components page if ($(".twipsies a").length) { $(window).on('load resize', function () { $(".twipsies a").each(function () { $(this) - .twipsy({ + .tooltip({ placement: $(this).attr('title') , trigger: 'manual' }) - .twipsy('show') + .tooltip('show') }) }) } @@ -67,7 +67,7 @@ $(function(){ // add tipsies to grid for scaffolding if ($('#grid-system').length) { - $('#grid-system').twipsy({ + $('#grid-system').tooltip({ selector: '.show-grid > div' , title: function () { return $(this).width() + 'px' } }) @@ -75,4 +75,79 @@ $(function(){ } } + // javascript build logic + + var inputs = $("#javascript input") + + // toggle all plugin checkboxes + $('#selectAll').on('click', function (e) { + e.preventDefault() + inputs.attr('checked', !inputs.is(':checked')) + }) + + // handle build button dropdown + var buildTypes = $('#javascriptBuilder .dropdown-menu li').on('click', function () { + buildTypes.removeClass('active') + $(this).addClass('active') + }) + + // request built javascript + $('#javascriptBuild').on('click', function () { + + var names = $("#javascript input:checked") + .map(function () { return this.value }) + .toArray() + + if (names[names.length - 1] == 'bootstrap-transition.js') { + names.unshift(names.pop()) + } + + $.ajax({ + type: 'POST' + , dataType: 'jsonpi' + , params: { + branch: '2.0-wip' + , dir: 'js' + , filenames: names + , compress: buildTypes.first().hasClass('active') + } + , url: "http://bootstrap.herokuapp.com" + }) + }) + }) + + +// Modified from the original jsonpi https://github.com/benvinegar/jquery-jsonpi +// by the talented Ben Vinegar +!function($) { + $.ajaxTransport('jsonpi', function(opts, originalOptions, jqXHR) { + var url = opts.url; + + return { + send: function(_, completeCallback) { + var name = 'jQuery_iframe_' + jQuery.now(), + iframe, form; + + iframe = $('<iframe>') + .attr('name', name) + .appendTo('head'); + + form = $('<form>') + .attr('method', opts.type) // GET or POST + .attr('action', url) + .attr('target', name); + + $.each(opts.params, function(k, v) { + $('<input>') + .attr('type', 'hidden') + .attr('name', k) + .attr('value', v) + .appendTo(form); + }); + + form.appendTo('body').submit(); + } + }; + }); +}(jQuery); \ No newline at end of file diff --git a/docs/components.html b/docs/components.html index ee1634ccac..873bbf6823 100644 --- a/docs/components.html +++ b/docs/components.html @@ -147,7 +147,7 @@ <li class="divider"></li> <li><a href="#">Separated link</a></li> </ul> - </div><!-- /btn-group --> + </div><!-- /btn-group --> <div class="btn-group"> <a class="btn primary" href="#">Action</a> <a class="btn primary dropdown-toggle" data-toggle="dropdown" href="#"><span class="caret"></span></a> @@ -158,7 +158,7 @@ <li class="divider"></li> <li><a href="#">Separated link</a></li> </ul> - </div><!-- /btn-group --> + </div><!-- /btn-group --> <div class="btn-group"> <a class="btn danger" href="#">Danger</a> <a class="btn danger dropdown-toggle" data-toggle="dropdown" href="#"><span class="caret"></span></a> @@ -214,7 +214,7 @@ </div> </div> </section> - + <!-- Nav, Tabs, & Pills @@ -331,7 +331,7 @@ <pre class="prettyprint linenums"> <ul class="nav tabs"> <li class="dropdown"> - <a class="dropdown-toggle" + <a class="dropdown-toggle" data-toggle="dropdown" href="#"> Dropdown @@ -363,7 +363,7 @@ <pre class="prettyprint linenums"> <ul class="nav pills"> <li class="dropdown"> - <a class="dropdown-toggle" + <a class="dropdown-toggle" data-toggle="dropdown" href="#"> Dropdown @@ -483,7 +483,7 @@ <p><a class="btn" href="./javascript.html/#tabs">Get the javascript →</a></p> </div> </div> - + <h3>Straightforward markup</h3> <p>Using tabbable tabs requires a wrapping div, a set of tabs, and a set of tabbable panes of content.</p> <pre class="prettyprint linenums"> @@ -509,7 +509,7 @@ <div class="span4"> <p>Swap the order of your HTML—placing <code>.tabs</code> after <code>.tab-content</code>—for tabs on the bottom.</p> </div> ---> +--> <div class="span4"> <h4>Tabs on the bottom</h4> <p>Flip the order of the HTML and add a class to put tabs on the bottom.</p> @@ -1035,7 +1035,7 @@ </pre> </div> </div><!-- /row --> - + <br> <!-- Block messages --> @@ -1195,7 +1195,7 @@ <script src="../js/bootstrap-dropdown.js"></script> <script src="../js/bootstrap-tab.js"></script> <script src="../js/bootstrap-scrollspy.js"></script> - <script src="../js/bootstrap-twipsy.js"></script> + <script src="../js/bootstrap-tooltip.js"></script> <script src="assets/js/application.js"></script> </body> </html> diff --git a/docs/javascript.html b/docs/javascript.html index 119066895c..51f3d691e0 100644 --- a/docs/javascript.html +++ b/docs/javascript.html @@ -54,7 +54,6 @@ </header> - <!-- Using Javascript w/ Bootstrap ================================================== --> <section id="javascript"> @@ -63,61 +62,100 @@ </div> <div class="row"> <div class="span3"> - <h3><a href="./javascript.html#modals">Modals</a></h3> - <p>A streamlined, but flexible, take on the traditional javascript modal plugin with only the minimum required functionality and smart defaults.</p> + <label> + <h3><a href="./javascript.html#modals">Modals</a><input checked="true" value="bootstrap-modal.js" type="checkbox"></h3> + <p>A streamlined, but flexible, take on the traditional javascript modal plugin with only the minimum required functionality and smart defaults.</p> + </label> </div> <div class="span3"> - <h3><a href="./javascript.html#dropdowns">Dropdowns</a></h3> - <p>Add dropdown menus to nearly anything in Bootstrap with this simple plugin. Bootstrap features full dropdown menu support on in the navbar, tabs, and pills.</p> + <label> + <h3><a href="./javascript.html#dropdowns">Dropdowns</a><input checked="true" value="bootstrap-dropdown.js" type="checkbox"></h3> + <p>Add dropdown menus to nearly anything in Bootstrap with this simple plugin. Bootstrap features full dropdown menu support on in the navbar, tabs, and pills.</p> + </label> </div> <div class="span3"> - <h3><a href="./javascript.html#scrollspy">Scrollspy</a></h3> - <p>Use scrollspy to automatically update the links in your navbar to show the current active link based on scroll position.</p> + <label> + <h3><a href="./javascript.html#scrollspy">Scrollspy</a><input checked="true" value="bootstrap-scrollspy.js" type="checkbox"></h3> + <p>Use scrollspy to automatically update the links in your navbar to show the current active link based on scroll position.</p> + </label> </div> <div class="span3"> - <h3><a href="./javascript.html#tabs">Togglable tabs</a></h3> - <p>Use this plugin to make tabs and pills more useful by allowing them to toggle through tabbable panes of local content.</p> + <label> + <h3><a href="./javascript.html#tabs">Togglable tabs</a><input checked="true" value="bootstrap-tab.js" type="checkbox"></h3> + <p>Use this plugin to make tabs and pills more useful by allowing them to toggle through tabbable panes of local content.</p> + </label> </div> </div> <!-- /row --> <div class="row"> <div class="span3"> - <h3><a href="./javascript.html#twipsy">Twipsy tooltips</a></h3> - <p>A new take on the jQuery Tipsy plugin, Twipsy uses CSS3 animations, data attributes for titles, and the new event API in jQuery 1.7.</p> + <label> + <h3><a href="./javascript.html#tooltips">Tooltips</a><input checked="true" value="bootstrap-tooltip.js" type="checkbox"></h3> + <p>A new take on the jQuery Tipsy plugin, Tooltips are an updated version, which don't rely on images, uss css3 for animations, and data-attributes for local title storage.</p> + </label> </div> <div class="span3"> - <h3><a href="./javascript.html#popovers">Popovers</a> <small class="muted">*</small></h3> - <p>Add small overlays of content, like those on the iPad, to any element for housing secondary information.</p> - <p class="muted"><strong>*</strong> Requires <a href="#twipsy">Twipsy</a> to be included</p> + <label> + <h3><a href="./javascript.html#popovers">Popovers</a> <small class="muted">*</small><input checked="true" value="bootstrap-popover.js" type="checkbox"></h3> + <p>Add small overlays of content, like those on the iPad, to any element for housing secondary information.</p> + <p class="muted"><strong>*</strong> Requires <a href="#tooltips">Tooltips</a> to be included</p> + </label> </div> <div class="span3"> - <h3><a href="./javascript.html#alerts">Alert messages</a></h3> - <p>The alert plugin is a tiny class for adding close functionality to alerts.</p> + <label> + <h3><a href="./javascript.html#alerts">Alert messages</a><input checked="true" value="bootstrap-alert.js" type="checkbox"></h3> + <p>The alert plugin is a tiny class for adding close functionality to alerts.</p> + </label> </div> <div class="span3"> - <h3><a href="./javascript.html#buttons">Buttons</a></h3> - <p>Do more with buttons. Control button states or create groups of buttons for more components like toolbars.</p> + <label> + <h3><a href="./javascript.html#buttons">Buttons</a><input checked="true" value="bootstrap-button.js" type="checkbox"></h3> + <p>Do more with buttons. Control button states or create groups of buttons for more components like toolbars.</p> + </label> </div> </div> <!-- /row --> <div class="row"> <div class="span3"> - <h3><a href="./javascript.html#collapse">Collapse</a></h3> - <p>Get base styles and flexible support for collapsible components like accordions and navigation.</p> + <label> + <h3><a href="./javascript.html#collapse">Collapse</a><input checked="true" value="bootstrap-collapse.js" type="checkbox"></h3> + <p>Get base styles and flexible support for collapsible components like accordions and navigation.</p> + </label> </div> <div class="span3"> - <h3><a href="./javascript.html#carousel">Carousel</a></h3> - <p>Create a merry-go-round of any content you wish to provide an interactive slideshow of content.</p> + <label> + <h3><a href="./javascript.html#carousel">Carousel</a><input checked="true" value="bootstrap-carousel.js" type="checkbox"></h3> + <p>Create a merry-go-round of any content you wish to provide an interactive slideshow of content.</p> + </label> </div> <div class="span3"> - <h3><a href="./javascript.html#typeahead">Typeahead</a></h3> - <p>A basic, easily extended plugin for quickly creating elegant typeaheads with any form text input.</p> + <label> + <h3><a href="./javascript.html#typeahead">Typeahead</a><input checked="true" value="bootstrap-typeahead.js" type="checkbox"></h3> + <p>A basic, easily extended plugin for quickly creating elegant typeaheads with any form text input.</p> + </label> </div> <div class="span3"> - <h3><a href="./javascript.html#transitions">Transitions</a> <small class="muted">*</small></h3> - <p>For simple transition effects, include bootstrap-transition.js once to slide in modals or fade out alert messages.</p> - <p class="muted"><strong>*</strong> Required for animation in plugins</p> + <label> + <h3><a href="./javascript.html#transitions">Transitions</a> <small class="muted">*</small><input value="bootstrap-transition.js" checked="true" type="checkbox"></h3> + <p>For simple transition effects, include bootstrap-transition.js once to slide in modals or fade out alert messages.</p> + <p class="muted"><strong>*</strong> Required for animation in plugins</p> + </label> </div> </div> <!-- /row --> + <div class="row"> + <div class="span5"> + <div class="btn-group" id="javascriptBuilder"> + <a id="javascriptBuild" class="btn primary large" href="#">Download Source</a> + <a class="btn primary large dropdown-toggle" data-toggle="dropdown" href="#"> + <span class="caret"></span> + </a> + <ul class="dropdown-menu large"> + <li class="active"><a href="#">Compressed</a></li> + <li><a href="#">Uncompressed</a></li> + </ul> + </div> + </div> + </div> <hr> + <a id="selectAll" href="#" style="float:right">Select/Unselect All Plugins</a> <p class="muted"><span class="label warning">Note:</span> All plugins require the latest version of <a href="http://jquery.com/" target="_blank">jQuery</a> to be included.</p> </section> @@ -169,8 +207,8 @@ <h4>Popover in a modal</h4> <p>This <a href="#" class="btn" rel="popover" title="A Title" data-content="And here's some amazing content. It's very engaging. right?">button</a> should trigger a popover on hover.</p> - <h4>Twipsy tooltips in a modal</h4> - <p><a href="#" class="twipsy-test" title="Tooltip">This link</a> and <a href="#" class="twipsy-test" title="Tooltip">that link</a> should have Twipsy tooltips on hover.</p> + <h4>Tooltips in a modal</h4> + <p><a href="#" class="tooltip-test" title="Tooltip">This link</a> and <a href="#" class="tooltip-test" title="Tooltip">that link</a> should have tooltips on hover.</p> </div> <div class="modal-footer"> <a href="#" class="btn primary">Save changes</a> @@ -596,30 +634,29 @@ $('a[data-toggle="tab"]').on('shown', function (e) { </section> - - <!-- Twipsy + <!-- Tooltips ================================================== --> - <section id="twipsy"> + <section id="tooltips"> <div class="page-header"> - <h1>Twipsy <small>bootstrap-twipsy.js</small></h1> + <h1>Tooltips <small>bootstrap-tooltip.js</small></h1> </div> <div class="row"> <div class="span3 columns"> - <h3>About Twipsy tooltips</h3> - <p>Inspired by the excellent jQuery.tipsy plugin written by Jason Frame; twipsy is an updated version, which doesn't rely on images, uses css3 for animations, data-attributes for local title storage, and now jquery 1.7's new event api!</p> - <a href="../js/bootstrap-twipsy.js" target="_blank" class="btn">Download file</a> + <h3>About Tooltips</h3> + <p>Inspired by the excellent jQuery.tipsy plugin written by Jason Frame; Tooltips are an updated version, which don't rely on images, uss css3 for animations, and data-attributes for local title storage.</p> + <a href="../js/bootstrap-tooltip.js" target="_blank" class="btn">Download file</a> </div> <div class="span9 columns"> - <h2>Example use of Twipsy</h2> + <h2>Example use of Tooltips</h2> <p>Hover over the links below to see tooltips:</p> - <div class="twipsy-demo well"> - <p class="muted" style="margin-bottom: 0;">Tight pants next level keffiyeh <a href="#" rel='twipsy' title="first twipsy">you probably</a> haven't heard of them. Photo booth beard raw denim letterpress vegan messenger bag stumptown. Farm-to-table seitan, mcsweeney's fixie sustainable quinoa 8-bit american apparel <a href="#" rel='twipsy' title='Another twipsy'>have a</a> terry richardson vinyl chambray. Beard stumptown, cardigans banh mi lomo thundercats. Tofu biodiesel williamsburg marfa, four loko mcsweeney's cleanse vegan chambray. A <a href="#" rel='twipsy' title='Another one here too'>really ironic</a> artisan whatever keytar, scenester farm-to-table banksy Austin <a href="#" rel='twipsy' title='The last tip!'>twitter handle</a> freegan cred raw denim single-origin coffee viral. + <div class="tooltip-demo well"> + <p class="muted" style="margin-bottom: 0;">Tight pants next level keffiyeh <a href="#" rel='tooltip' title="first tooltip">you probably</a> haven't heard of them. Photo booth beard raw denim letterpress vegan messenger bag stumptown. Farm-to-table seitan, mcsweeney's fixie sustainable quinoa 8-bit american apparel <a href="#" rel='tooltip' title='Another tooltip'>have a</a> terry richardson vinyl chambray. Beard stumptown, cardigans banh mi lomo thundercats. Tofu biodiesel williamsburg marfa, four loko mcsweeney's cleanse vegan chambray. A <a href="#" rel='tooltip' title='Another one here too'>really ironic</a> artisan whatever keytar, scenester farm-to-table banksy Austin <a href="#" rel='tooltip' title='The last tip!'>twitter handle</a> freegan cred raw denim single-origin coffee viral. </p> </div> <hr> - <h2>Using bootstrap-twipsy.js</h2> - <p>Trigger the Twipsy tooltips via javascript:</p> - <pre class="prettyprint linenums">$('#example').twipsy(options)</pre> + <h2>Using bootstrap-tooltip.js</h2> + <p>Trigger the tooltip via javascript:</p> + <pre class="prettyprint linenums">$('#example').tooltip(options)</pre> <h3>Options</h3> <table class="bordered-table striped-table"> <thead> @@ -647,7 +684,7 @@ $('a[data-toggle="tab"]').on('shown', function (e) { <td>selector</td> <td>string</td> <td>false</td> - <td>If a selector is provided, twipsy objects will be delegated to the specified targets.</td> + <td>If a selector is provided, tooltip objects will be delegated to the specified targets.</td> </tr> <tr> <td>title</td> @@ -673,18 +710,18 @@ $('a[data-toggle="tab"]').on('shown', function (e) { </tr> </tbody> </table> - <p><span class="label notice">Notice</span> Individual twipsy instance options can alternatively be specified through the use of data attributes.</code></p> + <p><span class="label notice">Notice</span> Individual tooltip instance options can alternatively be specified through the use of data attributes.</code></p> <h3>Markup</h3> - <p>For performance reasons, the Twipsy and Popover data-apis are opt in. If you would like to use them just specify a selector option.</p> + <p>For performance reasons, the Tooltip and Popover data-apis are opt in. If you would like to use them just specify a selector option.</p> <h3>Methods</h3> - <h4>$().twipsy(options)</h4> - <p>Attaches a twipsy handler to an element collection.</p> - <h4>.twipsy('show')</h4> - <p>Reveals an elements twipsy.</p> - <pre class="prettyprint linenums">$('#element').twipsy('show')</pre> - <h4>.twipsy('hide')</h4> - <p>Hides an elements twipsy.</p> - <pre class="prettyprint linenums">$('#element').twipsy('hide')</pre> + <h4>$().tooltip(options)</h4> + <p>Attaches a tooltip handler to an element collection.</p> + <h4>.tooltip('show')</h4> + <p>Reveals an elements tooltip.</p> + <pre class="prettyprint linenums">$('#element').tooltip('show')</pre> + <h4>.tooltip('hide')</h4> + <p>Hides an elements tooltip.</p> + <pre class="prettyprint linenums">$('#element').tooltip('hide')</pre> </div> </div> </section> @@ -701,7 +738,7 @@ $('a[data-toggle="tab"]').on('shown', function (e) { <div class="span3 columns"> <h3>About popovers</h3> <p>Add small overlays of content, like those on the iPad, to any element for housing secondary information.</p> - <p class="muted"><strong>*</strong> Requires <a href="#twipsy">Twipsy</a> to be included</p> + <p class="muted"><strong>*</strong> Requires <a href="#tooltip">Tooltip</a> to be included</p> <a href="../js/bootstrap-popover.js" target="_blank" class="btn">Download file</a> </div> <div class="span9 columns"> @@ -741,7 +778,7 @@ $('a[data-toggle="tab"]').on('shown', function (e) { <td>selector</td> <td>string</td> <td>false</td> - <td>if a selector is provided, twipsy objects will be delegated to the specified targets</td> + <td>if a selector is provided, tooltip objects will be delegated to the specified targets</td> </tr> <tr> <td>trigger</td> @@ -776,7 +813,7 @@ $('a[data-toggle="tab"]').on('shown', function (e) { <p><span class="label notice">Notice</span> Individual popover instance options can alternatively be specified through the use of data attributes.</code></p> <h3>Markup</h3> <p> - For performance reasons, the Twipsy and Popover data-apis are opt in. If you would like to use them just specify a the selector option. + For performance reasons, the Tooltip and Popover data-apis are opt in. If you would like to use them just specify a the selector option. </p> <h3>Methods</h3> <h4>$().popover(options)</h4> @@ -1302,7 +1339,7 @@ $('#myCollapsible').on('hidden', function () { <script src="../js/bootstrap-dropdown.js"></script> <script src="../js/bootstrap-scrollspy.js"></script> <script src="../js/bootstrap-tab.js"></script> - <script src="../js/bootstrap-twipsy.js"></script> + <script src="../js/bootstrap-tooltip.js"></script> <script src="../js/bootstrap-popover.js"></script> <script src="../js/bootstrap-button.js"></script> <script src="../js/bootstrap-collapse.js"></script> @@ -1311,11 +1348,11 @@ $('#myCollapsible').on('hidden', function () { <script src="assets/js/application.js"></script> <script> $(function () { - // twipsy demo - $('.twipsy-demo.well').twipsy({ - selector: "a[rel=twipsy]" + // tooltip demo + $('.tooltip-demo.well').tooltip({ + selector: "a[rel=tooltip]" }) - $('.twipsy-test').twipsy() + $('.tooltip-test').tooltip() // popover demo $("a[rel=popover]") diff --git a/docs/scaffolding.html b/docs/scaffolding.html index 5b6f7c7c37..3a0cce80a0 100644 --- a/docs/scaffolding.html +++ b/docs/scaffolding.html @@ -399,15 +399,15 @@ </dl> <dl class="span2"> <dt>Javascript plugins</dt> - <dd><a href="./javascript.html#transitions">Transitions</a></dd> - <dd><a href="./javascript.html#modals">Modals</a></dd> - <dd><a href="./javascript.html#dropdowns">Dropdowns</a></dd> + <dd><a href="./javascript.html#transition">Transition</a></dd> + <dd><a href="./javascript.html#modal">Modal</a></dd> + <dd><a href="./javascript.html#dropdown">Dropdown</a></dd> <dd><a href="./javascript.html#scrollspy">Scrollspy</a></dd> - <dd><a href="./javascript.html#tabs">Tabs</a></dd> - <dd><a href="./javascript.html#twipsy">Twipsy tooltips</a></dd> - <dd><a href="./javascript.html#popovers">Popovers</a></dd> - <dd><a href="./javascript.html#alerts">Alerts</a></dd> - <dd><a href="./javascript.html#buttons">Buttons</a></dd> + <dd><a href="./javascript.html#tab">Tab</a></dd> + <dd><a href="./javascript.html#tooltip">Tooltip</a></dd> + <dd><a href="./javascript.html#popover">Popover</a></dd> + <dd><a href="./javascript.html#alerts">Alert</a></dd> + <dd><a href="./javascript.html#buttons">Button</a></dd> <dd><a href="./javascript.html#collapse">Collapse</a></dd> <dd><a href="./javascript.html#carousel">Carousel</a></dd> <dd><a href="./javascript.html#typeahead">Typeahead</a></dd> @@ -433,7 +433,7 @@ <script src="http://code.jquery.com/jquery-1.7.min.js"></script> <script src="assets/js/google-code-prettify/prettify.js"></script> <script src="../js/bootstrap-transition.js"></script> - <script src="../js/bootstrap-twipsy.js"></script> + <script src="../js/bootstrap-tooltip.js"></script> <script src="assets/js/application.js"></script> </body> diff --git a/js/bootstrap-popover.js b/js/bootstrap-popover.js index 746699d372..9f60cbe957 100644 --- a/js/bootstrap-popover.js +++ b/js/bootstrap-popover.js @@ -26,10 +26,10 @@ this.init('popover', element, options) } - /* NOTE: POPOVER EXTENDS BOOTSTRAP-TWIPSY.js - ========================================= */ + /* NOTE: POPOVER EXTENDS BOOTSTRAP-TOOLTIP.js + ========================================== */ - Popover.prototype = $.extend({}, $.fn.twipsy.Constructor.prototype, { + Popover.prototype = $.extend({}, $.fn.tooltip.Constructor.prototype, { constructor: Popover @@ -86,7 +86,7 @@ $.fn.popover.Constructor = Popover - $.fn.popover.defaults = $.extend({} , $.fn.twipsy.defaults, { + $.fn.popover.defaults = $.extend({} , $.fn.tooltip.defaults, { placement: 'right' , content: '' , template: '<div class="popover"><div class="arrow"></div><div class="inner"><h3 class="title"></h3><div class="content"><p></p></div></div></div>' diff --git a/js/bootstrap-twipsy.js b/js/bootstrap-tooltip.js similarity index 87% rename from js/bootstrap-twipsy.js rename to js/bootstrap-tooltip.js index b7b802926d..241a44e248 100644 --- a/js/bootstrap-twipsy.js +++ b/js/bootstrap-tooltip.js @@ -1,8 +1,8 @@ -/* ========================================================== - * bootstrap-twipsy.js v2.0.0 - * http://twitter.github.com/bootstrap/javascript.html#twipsy +/* =========================================================== + * bootstrap-tooltip.js v2.0.0 + * http://twitter.github.com/bootstrap/javascript.html#tooltip * Inspired by the original jQuery.tipsy by Jason Frame - * ========================================================== + * =========================================================== * Copyright 2011 Twitter, Inc. * * Licensed under the Apache License, Version 2.0 (the "License"); @@ -22,16 +22,16 @@ "use strict" - /* TWIPSY PUBLIC CLASS DEFINITION - * ============================== */ + /* TOOLTIP PUBLIC CLASS DEFINITION + * =============================== */ - var Twipsy = function ( element, options ) { - this.init('twipsy', element, options) + var Tooltip = function ( element, options ) { + this.init('tooltip', element, options) } - Twipsy.prototype = { + Tooltip.prototype = { - constructor: Twipsy + constructor: Tooltip , init: function ( type, element, options ) { var eventIn @@ -154,7 +154,7 @@ , setContent: function () { var $tip = this.tip() - $tip.find('.twipsy-inner').html(this.getTitle()) + $tip.find('.tooltip-inner').html(this.getTitle()) $tip.removeClass('fade in top bottom left right') } @@ -242,29 +242,29 @@ } - /* TWIPSY PLUGIN DEFINITION - * ======================== */ + /* TOOLTIP PLUGIN DEFINITION + * ========================= */ - $.fn.twipsy = function ( option ) { + $.fn.tooltip = function ( option ) { return this.each(function () { var $this = $(this) - , data = $this.data('twipsy') + , data = $this.data('tooltip') , options = typeof option == 'object' && option - if (!data) $this.data('twipsy', (data = new Twipsy(this, options))) + if (!data) $this.data('tooltip', (data = new Tooltip(this, options))) if (typeof option == 'string') data[option]() }) } - $.fn.twipsy.Constructor = Twipsy + $.fn.tooltip.Constructor = Tooltip - $.fn.twipsy.defaults = { + $.fn.tooltip.defaults = { animation: true , delay: 0 , selector: false , placement: 'top' , trigger: 'hover' , title: '' - , template: '<div class="twipsy"><div class="twipsy-arrow"></div><div class="twipsy-inner"></div></div>' + , template: '<div class="tooltip"><div class="tooltip-arrow"></div><div class="tooltip-inner"></div></div>' } }( window.jQuery ) \ No newline at end of file diff --git a/js/bootstrap-typeahead.js b/js/bootstrap-typeahead.js index 4933f96057..180466a74b 100644 --- a/js/bootstrap-typeahead.js +++ b/js/bootstrap-typeahead.js @@ -156,11 +156,13 @@ break case 38: // up arrow + if (!this.shown) return e.preventDefault() this.prev() break case 40: // down arrow + if (!this.shown) return e.preventDefault() this.next() break diff --git a/js/tests/index.html b/js/tests/index.html index 27c2b34125..8c710de366 100644 --- a/js/tests/index.html +++ b/js/tests/index.html @@ -20,7 +20,7 @@ <script src="../../js/bootstrap-modal.js"></script> <script src="../../js/bootstrap-scrollspy.js"></script> <script src="../../js/bootstrap-tab.js"></script> - <script src="../../js/bootstrap-twipsy.js"></script> + <script src="../../js/bootstrap-tooltip.js"></script> <script src="../../js/bootstrap-popover.js"></script> <script src="../../js/bootstrap-typeahead.js"></script> @@ -33,7 +33,7 @@ <script src="unit/bootstrap-modal.js"></script> <script src="unit/bootstrap-scrollspy.js"></script> <script src="unit/bootstrap-tab.js"></script> - <script src="unit/bootstrap-twipsy.js"></script> + <script src="unit/bootstrap-tooltip.js"></script> <script src="unit/bootstrap-popover.js"></script> <script src="unit/bootstrap-typeahead.js"></script> diff --git a/js/tests/unit/bootstrap-twipsy.js b/js/tests/unit/bootstrap-twipsy.js index 08512ca979..8543162c6a 100644 --- a/js/tests/unit/bootstrap-twipsy.js +++ b/js/tests/unit/bootstrap-twipsy.js @@ -1,62 +1,62 @@ $(function () { - module("bootstrap-twipsy") + module("bootstrap-tooltip") test("should be defined on jquery object", function () { var div = $("<div></div>") - ok(div.twipsy, 'popover method is defined') + ok(div.tooltip, 'popover method is defined') }) test("should return element", function () { var div = $("<div></div>") - ok(div.twipsy() == div, 'document.body returned') + ok(div.tooltip() == div, 'document.body returned') }) test("should expose default settings", function () { - ok(!!$.fn.twipsy.defaults, 'defaults is defined') + ok(!!$.fn.tooltip.defaults, 'defaults is defined') }) test("should remove title attribute", function () { - var twipsy = $('<a href="#" rel="twipsy" title="Another twipsy"></a>').twipsy() - ok(!twipsy.attr('title'), 'title tag was removed') + var tooltip = $('<a href="#" rel="tooltip" title="Another tooltip"></a>').tooltip() + ok(!tooltip.attr('title'), 'title tag was removed') }) test("should add data attribute for referencing original title", function () { - var twipsy = $('<a href="#" rel="twipsy" title="Another twipsy"></a>').twipsy() - equals(twipsy.attr('data-original-title'), 'Another twipsy', 'original title preserved in data attribute') + var tooltip = $('<a href="#" rel="tooltip" title="Another tooltip"></a>').tooltip() + equals(tooltip.attr('data-original-title'), 'Another tooltip', 'original title preserved in data attribute') }) test("should place tooltips relative to placement option", function () { $.support.transition = false - var twipsy = $('<a href="#" rel="twipsy" title="Another twipsy"></a>') + var tooltip = $('<a href="#" rel="tooltip" title="Another tooltip"></a>') .appendTo('#qunit-fixture') - .twipsy({placement: 'bottom'}) - .twipsy('show') + .tooltip({placement: 'bottom'}) + .tooltip('show') - ok($(".twipsy").hasClass('fade bottom in'), 'has correct classes applied') - twipsy.twipsy('hide') + ok($(".tooltip").hasClass('fade bottom in'), 'has correct classes applied') + tooltip.tooltip('hide') }) test("should always allow html entities", function () { $.support.transition = false - var twipsy = $('<a href="#" rel="twipsy" title="<b>@fat</b>"></a>') + var tooltip = $('<a href="#" rel="tooltip" title="<b>@fat</b>"></a>') .appendTo('#qunit-fixture') - .twipsy('show') + .tooltip('show') - ok($('.twipsy b').length, 'b tag was inserted') - twipsy.twipsy('hide') - ok(!$(".twipsy").length, 'twipsy removed') + ok($('.tooltip b').length, 'b tag was inserted') + tooltip.tooltip('hide') + ok(!$(".tooltip").length, 'tooltip removed') }) test("should respect custom classes", function () { - var twipsy = $('<a href="#" rel="twipsy" title="Another twipsy"></a>') + var tooltip = $('<a href="#" rel="tooltip" title="Another tooltip"></a>') .appendTo('#qunit-fixture') - .twipsy({ template: '<div class="twipsy some-class"><div class="twipsy-arrow"/><div class="twipsy-inner"/></div>'}) - .twipsy('show') + .tooltip({ template: '<div class="tooltip some-class"><div class="tooltip-arrow"/><div class="tooltip-inner"/></div>'}) + .tooltip('show') - ok($('.twipsy').hasClass('some-class'), 'custom class is present') - twipsy.twipsy('hide') - ok(!$(".twipsy").length, 'twipsy removed') + ok($('.tooltip').hasClass('some-class'), 'custom class is present') + tooltip.tooltip('hide') + ok(!$(".tooltip").length, 'tooltip removed') }) }) \ No newline at end of file diff --git a/lib/bootstrap.less b/lib/bootstrap.less index 57ada98a98..d71002c468 100644 --- a/lib/bootstrap.less +++ b/lib/bootstrap.less @@ -39,7 +39,7 @@ // Components: Popovers @import "modals.less"; -@import "twipsy.less"; +@import "tooltip.less"; @import "popovers.less"; // Components: Buttons & Alerts diff --git a/lib/button-groups.less b/lib/button-groups.less index d2307018eb..e9724ba8c2 100644 --- a/lib/button-groups.less +++ b/lib/button-groups.less @@ -90,6 +90,7 @@ display: block; top: 30px; .border-radius(5px); + &.large { top: 40px; } } .btn-group.open .dropdown-toggle { background-image: none; diff --git a/lib/twipsy.less b/lib/tooltip.less similarity index 60% rename from lib/twipsy.less rename to lib/tooltip.less index 7eaa7d5bfd..b21c6bb7a5 100644 --- a/lib/twipsy.less +++ b/lib/tooltip.less @@ -1,9 +1,9 @@ -// TWIPSY -// ------ +// TOOLTIP +// ------= -.twipsy { +.tooltip { position: absolute; - z-index: @zindexTwipsy; + z-index: @zindexTooltip; display: block; visibility: visible; padding: 5px; @@ -14,12 +14,12 @@ &.right { margin-left: 2px; } &.bottom { margin-top: 2px; } &.left { margin-left: -2px; } - &.top .twipsy-arrow { #popoverArrow > .top(); } - &.left .twipsy-arrow { #popoverArrow > .left(); } - &.bottom .twipsy-arrow { #popoverArrow > .bottom(); } - &.right .twipsy-arrow { #popoverArrow > .right(); } + &.top .tooltip-arrow { #popoverArrow > .top(); } + &.left .tooltip-arrow { #popoverArrow > .left(); } + &.bottom .tooltip-arrow { #popoverArrow > .bottom(); } + &.right .tooltip-arrow { #popoverArrow > .right(); } } -.twipsy-inner { +.tooltip-inner { max-width: 200px; padding: 3px 8px; color: white; @@ -28,7 +28,7 @@ background-color: @black; .border-radius(4px); } -.twipsy-arrow { +.tooltip-arrow { position: absolute; width: 0; height: 0; diff --git a/lib/variables.less b/lib/variables.less index 97b6f9e3c8..3f32c36f4d 100644 --- a/lib/variables.less +++ b/lib/variables.less @@ -52,7 +52,7 @@ @zindexDropdown: 1000; @zindexPopover: 1010; -@zindexTwipsy: 1020; +@zindexTooltip: 1020; @zindexFixedNavbar: 1030; @zindexModalBackdrop: 1040; @zindexModal: 1050; -- GitLab From 1fa94bdbf47e592e8c51920bb9489ef760e04830 Mon Sep 17 00:00:00 2001 From: Davide Bellini <bellini.davide@gmail.com> Date: Thu, 12 Jan 2012 12:04:17 +0100 Subject: [PATCH 267/318] Fixed broken anchors on js docs page --- docs/javascript.html | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/docs/javascript.html b/docs/javascript.html index 51f3d691e0..0350103fab 100644 --- a/docs/javascript.html +++ b/docs/javascript.html @@ -528,7 +528,7 @@ $('#myModal').on('hidden', function () { <!-- Tabs ================================================== --> - <section id="tab"> + <section id="tabs"> <div class="page-header"> <h1>Togglable tabs <small>bootstrap-tab.js</small></h1> </div> @@ -832,7 +832,7 @@ $('a[data-toggle="tab"]').on('shown', function (e) { <!-- Alert ================================================== --> - <section id="alert"> + <section id="alerts"> <div class="page-header"> <h1>Alert messages <small>bootstrap-alert.js</small></h1> </div> @@ -901,7 +901,7 @@ $('#my-alert').bind('closed', function () { <!-- Buttons ================================================== --> - <section id="button"> + <section id="buttons"> <div class="page-header"> <h1>Buttons <small>bootstrap-button.js</small></h1> </div> -- GitLab From 5e3c21133430112bf8361827dc7a6a29f3f56c72 Mon Sep 17 00:00:00 2001 From: Mark Otto <markdotto@gmail.com> Date: Thu, 12 Jan 2012 10:19:07 -0800 Subject: [PATCH 268/318] fix type shorthand in blockquote --- bootstrap.css | 6 +++--- bootstrap.min.css | 2 +- lib/type.less | 2 +- 3 files changed, 5 insertions(+), 5 deletions(-) diff --git a/bootstrap.css b/bootstrap.css index 1250507b5e..59cec1cd6b 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: Wed Jan 11 21:59:22 PST 2012 + * Date: Thu Jan 12 10:18:57 PST 2012 */ html, body { margin: 0; @@ -459,8 +459,8 @@ blockquote { } blockquote p { margin-bottom: 0; - font-size: 300; - font-weight: 16px; + font-size: 16px; + font-weight: 300; line-height: 22.5px; } blockquote small { diff --git a/bootstrap.min.css b/bootstrap.min.css index 3e220de3ca..2cbb4427e5 100644 --- a/bootstrap.min.css +++ b/bootstrap.min.css @@ -81,7 +81,7 @@ strong{font-style:inherit;font-weight:bold;} em{font-style:italic;font-weight:inherit;line-height:inherit;} .muted{color:#999999;} abbr{font-size:90%;text-transform:uppercase;border-bottom:1px dotted #ddd;cursor:help;} -blockquote{padding-left:15px;margin-bottom:18px;border-left:5px solid #eee;}blockquote p{margin-bottom:0;font-size:300;font-weight:16px;line-height:22.5px;} +blockquote{padding-left:15px;margin-bottom:18px;border-left:5px solid #eee;}blockquote p{margin-bottom:0;font-size:16px;font-weight:300;line-height:22.5px;} blockquote small{display:block;line-height:18px;color:#999999;}blockquote small:before{content:'\2014 \00A0';} blockquote.pull-right{float:right;padding-left:0;padding-right:15px;border-left:0;border-right:5px solid #eee;}blockquote.pull-right p,blockquote.pull-right small{text-align:right;} address{display:block;margin-bottom:18px;line-height:18px;} diff --git a/lib/type.less b/lib/type.less index 84130f3fa1..73462b38a4 100644 --- a/lib/type.less +++ b/lib/type.less @@ -151,7 +151,7 @@ blockquote { border-left: 5px solid #eee; p { margin-bottom: 0; - #font > .shorthand(300,16px,@baseLineHeight * 1.25); + #font > .shorthand(16px,300,@baseLineHeight * 1.25); } small { display: block; -- GitLab From ef8b27cdc7ad490b4b52003a7178bd1465ee5dc9 Mon Sep 17 00:00:00 2001 From: Mark Otto <markdotto@gmail.com> Date: Thu, 12 Jan 2012 12:30:36 -0800 Subject: [PATCH 269/318] fix heading --- bootstrap.css | 2 +- lib/type.less | 4 ++-- 2 files changed, 3 insertions(+), 3 deletions(-) diff --git a/bootstrap.css b/bootstrap.css index 59cec1cd6b..8d08470121 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: Thu Jan 12 10:18:57 PST 2012 + * Date: Thu Jan 12 12:30:32 PST 2012 */ html, body { margin: 0; diff --git a/lib/type.less b/lib/type.less index 73462b38a4..f7d5077cf5 100644 --- a/lib/type.less +++ b/lib/type.less @@ -69,8 +69,8 @@ h6 { } -// COLORS -// ------ +// LISTS +// ----- // Unordered and Ordered lists ul, ol { -- GitLab From 391248c0e3ba9b00b0b4a02e4d94475e9ae9877a Mon Sep 17 00:00:00 2001 From: Mark Otto <markdotto@gmail.com> Date: Thu, 12 Jan 2012 15:29:16 -0800 Subject: [PATCH 270/318] nuke uber footer, bring back topbar dropdowns --- bootstrap.css | 40 ++++++------- bootstrap.min.css | 14 +++-- docs/base-css.html | 70 +++++++++++++++++++++-- docs/components.html | 72 +++++++++++++++++++++-- docs/index.html | 71 +++++++++++++++++++++-- docs/javascript.html | 70 +++++++++++++++++++++-- docs/less.html | 70 +++++++++++++++++++++-- docs/scaffolding.html | 130 +++++++++++++++++++++--------------------- docs/upgrading.html | 70 +++++++++++++++++++++-- lib/dropdowns.less | 10 ++-- lib/navbar.less | 20 +++++-- 11 files changed, 502 insertions(+), 135 deletions(-) diff --git a/bootstrap.css b/bootstrap.css index 8d08470121..8e5ad131c1 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: Thu Jan 12 12:30:32 PST 2012 + * Date: Thu Jan 12 15:28:03 PST 2012 */ html, body { margin: 0; @@ -1453,12 +1453,12 @@ i { min-width: 160px; max-width: 220px; _width: 160px; - padding: 5px 0; + padding: 4px 0; margin: 0; list-style: none; background-color: #ffffff; border-color: #999; - border-color: rgba(0, 0, 0, 0.1); + border-color: rgba(0, 0, 0, 0.2); border-style: solid; border-width: 1px; -webkit-border-radius: 0 0 5px 5px; @@ -1486,24 +1486,12 @@ i { font-weight: normal; line-height: 18px; color: #555555; + white-space: nowrap; } .dropdown-menu li > a:hover { color: #fff; text-decoration: none; - text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25); - background-color: #0077b3; - background-image: -khtml-gradient(linear, left top, left bottom, from(#0088cc), to(#0077b3)); - background-image: -moz-linear-gradient(top, #0088cc, #0077b3); - background-image: -ms-linear-gradient(top, #0088cc, #0077b3); - background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #0088cc), color-stop(100%, #0077b3)); - background-image: -webkit-linear-gradient(top, #0088cc, #0077b3); - background-image: -o-linear-gradient(top, #0088cc, #0077b3); - background-image: linear-gradient(top, #0088cc, #0077b3); - background-repeat: repeat-x; - filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#0088cc', endColorstr='#0077b3', GradientType=0); - -webkit-box-shadow: inset 0 1px 0 rgba(0, 0, 0, 0.075), inset 0 -1px rgba(0, 0, 0, 0.075); - -moz-box-shadow: inset 0 1px 0 rgba(0, 0, 0, 0.075), inset 0 -1px rgba(0, 0, 0, 0.075); - box-shadow: inset 0 1px 0 rgba(0, 0, 0, 0.075), inset 0 -1px rgba(0, 0, 0, 0.075); + background-color: #0088cc; } .dropdown-menu .active > a, .dropdown-menu .active > a:hover { color: #fff; @@ -1747,7 +1735,7 @@ i { margin-right: 0; } .navbar .dropdown-menu { - top: 42px; + top: 41px; -webkit-border-radius: 4px; -moz-border-radius: 4px; border-radius: 4px; @@ -1758,10 +1746,10 @@ i { border-left: 7px solid transparent; border-right: 7px solid transparent; border-bottom: 7px solid #ccc; - border-bottom-color: rgba(0, 0, 0, 0.1); + border-bottom-color: rgba(0, 0, 0, 0.2); position: absolute; top: -7px; - left: 12px; + left: 9px; } .navbar .dropdown-menu:after { content: ''; @@ -1771,14 +1759,22 @@ i { border-bottom: 6px solid #fff; position: absolute; top: -6px; - left: 13px; + left: 10px; } .navbar .dropdown-toggle .caret, .navbar .open.dropdown .caret { border-top-color: #fff; } -.navbar .open .dropdown-toggle { +.navbar .nav .active .caret { + filter: alpha(opacity=100); + -moz-opacity: 1; + opacity: 1; +} +.navbar .nav .open > .dropdown-toggle, .navbar .nav .active > .dropdown-toggle, .navbar .nav .open.active > .dropdown-toggle { background-color: transparent; } +.navbar .nav .active > .dropdown-toggle:hover { + color: #fff; +} .navbar .nav.pull-right .dropdown-menu { right: 0; } diff --git a/bootstrap.min.css b/bootstrap.min.css index 2cbb4427e5..1723ca555e 100644 --- a/bootstrap.min.css +++ b/bootstrap.min.css @@ -301,9 +301,9 @@ i{background-image:url(docs/assets/img/glyphicons-halflings-sprite.png);backgrou .caret{display:inline-block;width:0;height:0;text-indent:-99999px;vertical-align:top;border-left:4px solid transparent;border-right:4px solid transparent;border-top:4px solid #000;filter:alpha(opacity=30);-moz-opacity:0.3;opacity:0.3;content:"\2193";} .dropdown .caret{margin-top:8px;margin-left:2px;} .dropdown:hover .caret,.open.dropdown .caret{filter:alpha(opacity=100);-moz-opacity:1;opacity:1;} -.dropdown-menu{position:absolute;top:40px;z-index:1000;float:left;display:none;min-width:160px;max-width:220px;_width:160px;padding:5px 0;margin:0;list-style:none;background-color:#ffffff;border-color:#999;border-color:rgba(0, 0, 0, 0.1);border-style:solid;border-width:1px;-webkit-border-radius:0 0 5px 5px;-moz-border-radius:0 0 5px 5px;border-radius:0 0 5px 5px;-webkit-box-shadow:0 5px 10px rgba(0, 0, 0, 0.2);-moz-box-shadow:0 5px 10px rgba(0, 0, 0, 0.2);box-shadow:0 5px 10px rgba(0, 0, 0, 0.2);-webkit-background-clip:padding-box;-moz-background-clip:padding;background-clip:padding-box;zoom:1;}.dropdown-menu .divider{height:1px;margin:5px 1px;overflow:hidden;background-color:#e5e5e5;border-bottom:1px solid #ffffff;} -.dropdown-menu a{display:block;padding:2px 15px;clear:both;font-weight:normal;line-height:18px;color:#555555;} -.dropdown-menu li>a:hover{color:#fff;text-decoration:none;text-shadow:0 -1px 0 rgba(0, 0, 0, 0.25);background-color:#0077b3;background-image:-khtml-gradient(linear, left top, left bottom, from(#0088cc), to(#0077b3));background-image:-moz-linear-gradient(top, #0088cc, #0077b3);background-image:-ms-linear-gradient(top, #0088cc, #0077b3);background-image:-webkit-gradient(linear, left top, left bottom, color-stop(0%, #0088cc), color-stop(100%, #0077b3));background-image:-webkit-linear-gradient(top, #0088cc, #0077b3);background-image:-o-linear-gradient(top, #0088cc, #0077b3);background-image:linear-gradient(top, #0088cc, #0077b3);background-repeat:repeat-x;filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#0088cc', endColorstr='#0077b3', GradientType=0);-webkit-box-shadow:inset 0 1px 0 rgba(0, 0, 0, 0.075),inset 0 -1px rgba(0, 0, 0, 0.075);-moz-box-shadow:inset 0 1px 0 rgba(0, 0, 0, 0.075),inset 0 -1px rgba(0, 0, 0, 0.075);box-shadow:inset 0 1px 0 rgba(0, 0, 0, 0.075),inset 0 -1px rgba(0, 0, 0, 0.075);} +.dropdown-menu{position:absolute;top:40px;z-index:1000;float:left;display:none;min-width:160px;max-width:220px;_width:160px;padding:4px 0;margin:0;list-style:none;background-color:#ffffff;border-color:#999;border-color:rgba(0, 0, 0, 0.2);border-style:solid;border-width:1px;-webkit-border-radius:0 0 5px 5px;-moz-border-radius:0 0 5px 5px;border-radius:0 0 5px 5px;-webkit-box-shadow:0 5px 10px rgba(0, 0, 0, 0.2);-moz-box-shadow:0 5px 10px rgba(0, 0, 0, 0.2);box-shadow:0 5px 10px rgba(0, 0, 0, 0.2);-webkit-background-clip:padding-box;-moz-background-clip:padding;background-clip:padding-box;zoom:1;}.dropdown-menu .divider{height:1px;margin:5px 1px;overflow:hidden;background-color:#e5e5e5;border-bottom:1px solid #ffffff;} +.dropdown-menu a{display:block;padding:2px 15px;clear:both;font-weight:normal;line-height:18px;color:#555555;white-space:nowrap;} +.dropdown-menu li>a:hover{color:#fff;text-decoration:none;background-color:#0088cc;} .dropdown-menu .active>a,.dropdown-menu .active>a:hover{color:#fff;background-color:#999;background-image:none;} .dropdown.open .dropdown-toggle{color:#ffffff;background:#ccc;background:rgba(0, 0, 0, 0.3);} .dropdown.open .dropdown-menu{display:block;} @@ -334,10 +334,12 @@ i{background-image:url(docs/assets/img/glyphicons-halflings-sprite.png);backgrou .navbar .nav .active>a{color:#ffffff;text-decoration:none;background-color:#222;background-color:rgba(0, 0, 0, 0.5);} .navbar .vertical-divider{height:40px;width:1px;margin:0 5px;overflow:hidden;background-color:#222;border-right:1px solid #444;} .navbar .nav.pull-right{margin-left:10px;margin-right:0;} -.navbar .dropdown-menu{top:42px;-webkit-border-radius:4px;-moz-border-radius:4px;border-radius:4px;}.navbar .dropdown-menu:before{content:'';display:inline-block;border-left:7px solid transparent;border-right:7px solid transparent;border-bottom:7px solid #ccc;border-bottom-color:rgba(0, 0, 0, 0.1);position:absolute;top:-7px;left:12px;} -.navbar .dropdown-menu:after{content:'';display:inline-block;border-left:6px solid transparent;border-right:6px solid transparent;border-bottom:6px solid #fff;position:absolute;top:-6px;left:13px;} +.navbar .dropdown-menu{top:41px;-webkit-border-radius:4px;-moz-border-radius:4px;border-radius:4px;}.navbar .dropdown-menu:before{content:'';display:inline-block;border-left:7px solid transparent;border-right:7px solid transparent;border-bottom:7px solid #ccc;border-bottom-color:rgba(0, 0, 0, 0.2);position:absolute;top:-7px;left:9px;} +.navbar .dropdown-menu:after{content:'';display:inline-block;border-left:6px solid transparent;border-right:6px solid transparent;border-bottom:6px solid #fff;position:absolute;top:-6px;left:10px;} .navbar .dropdown-toggle .caret,.navbar .open.dropdown .caret{border-top-color:#fff;} -.navbar .open .dropdown-toggle{background-color:transparent;} +.navbar .nav .active .caret{filter:alpha(opacity=100);-moz-opacity:1;opacity:1;} +.navbar .nav .open>.dropdown-toggle,.navbar .nav .active>.dropdown-toggle,.navbar .nav .open.active>.dropdown-toggle{background-color:transparent;} +.navbar .nav .active>.dropdown-toggle:hover{color:#fff;} .navbar .nav.pull-right .dropdown-menu{right:0;}.navbar .nav.pull-right .dropdown-menu:before{left:auto;right:12px;} .navbar .nav.pull-right .dropdown-menu:after{left:auto;right:13px;} .nav{margin-left:0;margin-bottom:18px;list-style:none;} diff --git a/docs/base-css.html b/docs/base-css.html index 29f5d1d197..7f60580b4a 100644 --- a/docs/base-css.html +++ b/docs/base-css.html @@ -34,11 +34,71 @@ <a class="brand" href="./index.html">Bootstrap</a> <ul class="nav"> <li><a href="./index.html">Overview</a></li> - <li><a href="./scaffolding.html">Scaffolding</a></li> - <li class="active"><a href="./base-css.html">Base CSS</a></li> - <li><a href="./components.html">Components</a></li> - <li><a href="./javascript.html">Javascript plugins</a></li> - <li><a href="./less.html">Using LESS</a></li> + <li class="dropdown"> + <a href="./scaffolding.html" class="dropdown-toggle" data-toggle="dropdown"> + Scaffolding + <b class="caret"></b> + </a> + <ul class="dropdown-menu"> + <li><a href="./scaffolding.html#grid">Grid system</a></li> + <li><a href="./scaffolding.html#layouts">Layouts</a></li> + <li><a href="./scaffolding.html#responsive">Responsive design</a></li> + </ul> + </li> + <li class="dropdown active"> + <a href="./base-css.html" class="dropdown-toggle" data-toggle="dropdown"> + Base CSS + <b class="caret"></b> + </a> + <ul class="dropdown-menu"> + <li><a href="./base-css.html#type">Type</a></li> + <li><a href="./base-css.html#tables">Tables</a></li> + <li><a href="./base-css.html#forms">Forms</a></li> + <li><a href="./base-css.html#buttons">Buttons</a></li> + <li><a href="./base-css.html#icons">Icons by Glyphicons</a></li> + </ul> + </li> + <li class="dropdown"> + <a href="./components.html" class="dropdown-toggle" data-toggle="dropdown"> + Components + <b class="caret"></b> + </a> + <ul class="dropdown-menu"> + <li><a href="./components.html#buttonGroups">Button groups</a></li> + <li><a href="./components.html#buttonDropdowns">Split button dropdowns</a></li> + <li><a href="./components.html#navs">Nav, tabs, pills</a></li> + <li><a href="./components.html#navbar">Navbar</a></li> + <li><a href="./components.html#breadcrumbs">Breadcrumbs</a></li> + <li><a href="./components.html#pagination">Pagination</a></li> + <li><a href="./components.html#thumbnails">Thumbnails</a></li> + <li><a href="./components.html#alerts">Alert messages</a></li> + </ul> + </li> + <li class="dropdown"> + <a href="./javascript.html" class="dropdown-toggle" data-toggle="dropdown"> + Javascript plugins + <b class="caret"></b> + </a> + <ul class="dropdown-menu"> + <li><a href="./javascript.html#transition">Transition</a></li> + <li><a href="./javascript.html#modal">Modal</a></li> + <li><a href="./javascript.html#dropdown">Dropdown</a></li> + <li><a href="./javascript.html#scrollspy">Scrollspy</a></li> + <li><a href="./javascript.html#tab">Tab</a></li> + <li><a href="./javascript.html#tooltip">Tooltip</a></li> + <li><a href="./javascript.html#popover">Popover</a></li> + <li><a href="./javascript.html#alerts">Alert</a></li> + <li><a href="./javascript.html#buttons">Button</a></li> + <li><a href="./javascript.html#collapse">Collapse</a></li> + <li><a href="./javascript.html#carousel">Carousel</a></li> + <li><a href="./javascript.html#typeahead">Typeahead</a></li> + </ul> + </li> + <li> + <a href="./less.html"> + Using LESS + </a> + </li> </ul> </div> </div> diff --git a/docs/components.html b/docs/components.html index 873bbf6823..b9d75edbef 100644 --- a/docs/components.html +++ b/docs/components.html @@ -34,11 +34,71 @@ <a class="brand" href="./index.html">Bootstrap</a> <ul class="nav"> <li><a href="./index.html">Overview</a></li> - <li><a href="./scaffolding.html">Scaffolding</a></li> - <li><a href="./base-css.html">Base CSS</a></li> - <li class="active"><a href="./components.html">Components</a></li> - <li><a href="./javascript.html">Javascript plugins</a></li> - <li><a href="./less.html">Using LESS</a></li> + <li class="dropdown"> + <a href="./scaffolding.html" class="dropdown-toggle" data-toggle="dropdown"> + Scaffolding + <b class="caret"></b> + </a> + <ul class="dropdown-menu"> + <li><a href="./scaffolding.html#grid">Grid system</a></li> + <li><a href="./scaffolding.html#layouts">Layouts</a></li> + <li><a href="./scaffolding.html#responsive">Responsive design</a></li> + </ul> + </li> + <li class="dropdown"> + <a href="./base-css.html" class="dropdown-toggle" data-toggle="dropdown"> + Base CSS + <b class="caret"></b> + </a> + <ul class="dropdown-menu"> + <li><a href="./base-css.html#type">Type</a></li> + <li><a href="./base-css.html#tables">Tables</a></li> + <li><a href="./base-css.html#forms">Forms</a></li> + <li><a href="./base-css.html#buttons">Buttons</a></li> + <li><a href="./base-css.html#icons">Icons by Glyphicons</a></li> + </ul> + </li> + <li class="dropdown active"> + <a href="./components.html" class="dropdown-toggle" data-toggle="dropdown"> + Components + <b class="caret"></b> + </a> + <ul class="dropdown-menu"> + <li><a href="./components.html#buttonGroups">Button groups</a></li> + <li><a href="./components.html#buttonDropdowns">Split button dropdowns</a></li> + <li><a href="./components.html#navs">Nav, tabs, pills</a></li> + <li><a href="./components.html#navbar">Navbar</a></li> + <li><a href="./components.html#breadcrumbs">Breadcrumbs</a></li> + <li><a href="./components.html#pagination">Pagination</a></li> + <li><a href="./components.html#thumbnails">Thumbnails</a></li> + <li><a href="./components.html#alerts">Alert messages</a></li> + </ul> + </li> + <li class="dropdown"> + <a href="./javascript.html" class="dropdown-toggle" data-toggle="dropdown"> + Javascript plugins + <b class="caret"></b> + </a> + <ul class="dropdown-menu"> + <li><a href="./javascript.html#transition">Transition</a></li> + <li><a href="./javascript.html#modal">Modal</a></li> + <li><a href="./javascript.html#dropdown">Dropdown</a></li> + <li><a href="./javascript.html#scrollspy">Scrollspy</a></li> + <li><a href="./javascript.html#tab">Tab</a></li> + <li><a href="./javascript.html#tooltip">Tooltip</a></li> + <li><a href="./javascript.html#popover">Popover</a></li> + <li><a href="./javascript.html#alerts">Alert</a></li> + <li><a href="./javascript.html#buttons">Button</a></li> + <li><a href="./javascript.html#collapse">Collapse</a></li> + <li><a href="./javascript.html#carousel">Carousel</a></li> + <li><a href="./javascript.html#typeahead">Typeahead</a></li> + </ul> + </li> + <li> + <a href="./less.html"> + Using LESS + </a> + </li> </ul> </div> </div> @@ -127,7 +187,7 @@ <!-- Split button dropdowns ================================================== --> - <section id="buttonGroups"> + <section id="buttonDropdowns"> <div class="page-header"> <h1>Split button dropdowns <small>Built on button groups to provide contextual menus</small></h1> </div> diff --git a/docs/index.html b/docs/index.html index 8f7963afd2..8d5448ce1d 100644 --- a/docs/index.html +++ b/docs/index.html @@ -35,11 +35,71 @@ <a class="brand" href="./index.html">Bootstrap</a> <ul class="nav"> <li class="active"><a href="./index.html">Overview</a></li> - <li><a href="./scaffolding.html">Scaffolding</a></li> - <li><a href="./base-css.html">Base CSS</a></li> - <li><a href="./components.html">Components</a></li> - <li><a href="./javascript.html">Javascript plugins</a></li> - <li><a href="./less.html">Using LESS</a></li> + <li class="dropdown"> + <a href="./scaffolding.html" class="dropdown-toggle" data-toggle="dropdown"> + Scaffolding + <b class="caret"></b> + </a> + <ul class="dropdown-menu"> + <li><a href="./scaffolding.html#grid">Grid system</a></li> + <li><a href="./scaffolding.html#layouts">Layouts</a></li> + <li><a href="./scaffolding.html#responsive">Responsive design</a></li> + </ul> + </li> + <li class="dropdown"> + <a href="./base-css.html" class="dropdown-toggle" data-toggle="dropdown"> + Base CSS + <b class="caret"></b> + </a> + <ul class="dropdown-menu"> + <li><a href="./base-css.html#type">Type</a></li> + <li><a href="./base-css.html#tables">Tables</a></li> + <li><a href="./base-css.html#forms">Forms</a></li> + <li><a href="./base-css.html#buttons">Buttons</a></li> + <li><a href="./base-css.html#icons">Icons by Glyphicons</a></li> + </ul> + </li> + <li class="dropdown"> + <a href="./components.html" class="dropdown-toggle" data-toggle="dropdown"> + Components + <b class="caret"></b> + </a> + <ul class="dropdown-menu"> + <li><a href="./components.html#buttonGroups">Button groups</a></li> + <li><a href="./components.html#buttonDropdowns">Split button dropdowns</a></li> + <li><a href="./components.html#navs">Nav, tabs, pills</a></li> + <li><a href="./components.html#navbar">Navbar</a></li> + <li><a href="./components.html#breadcrumbs">Breadcrumbs</a></li> + <li><a href="./components.html#pagination">Pagination</a></li> + <li><a href="./components.html#thumbnails">Thumbnails</a></li> + <li><a href="./components.html#alerts">Alert messages</a></li> + </ul> + </li> + <li class="dropdown"> + <a href="./javascript.html" class="dropdown-toggle" data-toggle="dropdown"> + Javascript plugins + <b class="caret"></b> + </a> + <ul class="dropdown-menu"> + <li><a href="./javascript.html#transition">Transition</a></li> + <li><a href="./javascript.html#modal">Modal</a></li> + <li><a href="./javascript.html#dropdown">Dropdown</a></li> + <li><a href="./javascript.html#scrollspy">Scrollspy</a></li> + <li><a href="./javascript.html#tab">Tab</a></li> + <li><a href="./javascript.html#tooltip">Tooltip</a></li> + <li><a href="./javascript.html#popover">Popover</a></li> + <li><a href="./javascript.html#alerts">Alert</a></li> + <li><a href="./javascript.html#buttons">Button</a></li> + <li><a href="./javascript.html#collapse">Collapse</a></li> + <li><a href="./javascript.html#carousel">Carousel</a></li> + <li><a href="./javascript.html#typeahead">Typeahead</a></li> + </ul> + </li> + <li> + <a href="./less.html"> + Using LESS + </a> + </li> </ul> </div> </div> @@ -253,5 +313,6 @@ <script type="text/javascript" src="http://platform.twitter.com/widgets.js"></script> <script src="http://code.jquery.com/jquery-1.7.min.js"></script> <script src="assets/js/application.js"></script> + <script src="../js/bootstrap-dropdown.js"></script> </body> </html> diff --git a/docs/javascript.html b/docs/javascript.html index 0350103fab..216bcdef5a 100644 --- a/docs/javascript.html +++ b/docs/javascript.html @@ -35,11 +35,71 @@ <a class="brand" href="./index.html">Bootstrap</a> <ul class="nav"> <li><a href="./index.html">Overview</a></li> - <li><a href="./scaffolding.html">Scaffolding</a></li> - <li><a href="./base-css.html">Base CSS</a></li> - <li><a href="./components.html">Components</a></li> - <li class="active"><a href="./javascript.html">Javascript plugins</a></li> - <li><a href="./less.html">Using LESS</a></li> + <li class="dropdown"> + <a href="./scaffolding.html" class="dropdown-toggle" data-toggle="dropdown"> + Scaffolding + <b class="caret"></b> + </a> + <ul class="dropdown-menu"> + <li><a href="./scaffolding.html#grid">Grid system</a></li> + <li><a href="./scaffolding.html#layouts">Layouts</a></li> + <li><a href="./scaffolding.html#responsive">Responsive design</a></li> + </ul> + </li> + <li class="dropdown"> + <a href="./base-css.html" class="dropdown-toggle" data-toggle="dropdown"> + Base CSS + <b class="caret"></b> + </a> + <ul class="dropdown-menu"> + <li><a href="./base-css.html#type">Type</a></li> + <li><a href="./base-css.html#tables">Tables</a></li> + <li><a href="./base-css.html#forms">Forms</a></li> + <li><a href="./base-css.html#buttons">Buttons</a></li> + <li><a href="./base-css.html#icons">Icons by Glyphicons</a></li> + </ul> + </li> + <li class="dropdown"> + <a href="./components.html" class="dropdown-toggle" data-toggle="dropdown"> + Components + <b class="caret"></b> + </a> + <ul class="dropdown-menu"> + <li><a href="./components.html#buttonGroups">Button groups</a></li> + <li><a href="./components.html#buttonDropdowns">Split button dropdowns</a></li> + <li><a href="./components.html#navs">Nav, tabs, pills</a></li> + <li><a href="./components.html#navbar">Navbar</a></li> + <li><a href="./components.html#breadcrumbs">Breadcrumbs</a></li> + <li><a href="./components.html#pagination">Pagination</a></li> + <li><a href="./components.html#thumbnails">Thumbnails</a></li> + <li><a href="./components.html#alerts">Alert messages</a></li> + </ul> + </li> + <li class="dropdown active"> + <a href="./javascript.html" class="dropdown-toggle" data-toggle="dropdown"> + Javascript plugins + <b class="caret"></b> + </a> + <ul class="dropdown-menu"> + <li><a href="./javascript.html#transition">Transition</a></li> + <li><a href="./javascript.html#modal">Modal</a></li> + <li><a href="./javascript.html#dropdown">Dropdown</a></li> + <li><a href="./javascript.html#scrollspy">Scrollspy</a></li> + <li><a href="./javascript.html#tab">Tab</a></li> + <li><a href="./javascript.html#tooltip">Tooltip</a></li> + <li><a href="./javascript.html#popover">Popover</a></li> + <li><a href="./javascript.html#alerts">Alert</a></li> + <li><a href="./javascript.html#buttons">Button</a></li> + <li><a href="./javascript.html#collapse">Collapse</a></li> + <li><a href="./javascript.html#carousel">Carousel</a></li> + <li><a href="./javascript.html#typeahead">Typeahead</a></li> + </ul> + </li> + <li> + <a href="./less.html"> + Using LESS + </a> + </li> </ul> </div> </div> diff --git a/docs/less.html b/docs/less.html index 05398e9665..cecf22da40 100644 --- a/docs/less.html +++ b/docs/less.html @@ -34,11 +34,71 @@ <a class="brand" href="./index.html">Bootstrap</a> <ul class="nav"> <li><a href="./index.html">Overview</a></li> - <li><a href="./scaffolding.html">Scaffolding</a></li> - <li><a href="./base-css.html">Base CSS</a></li> - <li><a href="./components.html">Components</a></li> - <li><a href="./javascript.html">Javascript plugins</a></li> - <li class="active"><a href="./less.html">Using LESS</a></li> + <li class="dropdown"> + <a href="./scaffolding.html" class="dropdown-toggle" data-toggle="dropdown"> + Scaffolding + <b class="caret"></b> + </a> + <ul class="dropdown-menu"> + <li><a href="./scaffolding.html#grid">Grid system</a></li> + <li><a href="./scaffolding.html#layouts">Layouts</a></li> + <li><a href="./scaffolding.html#responsive">Responsive design</a></li> + </ul> + </li> + <li class="dropdown"> + <a href="./base-css.html" class="dropdown-toggle" data-toggle="dropdown"> + Base CSS + <b class="caret"></b> + </a> + <ul class="dropdown-menu"> + <li><a href="./base-css.html#type">Type</a></li> + <li><a href="./base-css.html#tables">Tables</a></li> + <li><a href="./base-css.html#forms">Forms</a></li> + <li><a href="./base-css.html#buttons">Buttons</a></li> + <li><a href="./base-css.html#icons">Icons by Glyphicons</a></li> + </ul> + </li> + <li class="dropdown"> + <a href="./components.html" class="dropdown-toggle" data-toggle="dropdown"> + Components + <b class="caret"></b> + </a> + <ul class="dropdown-menu"> + <li><a href="./components.html#buttonGroups">Button groups</a></li> + <li><a href="./components.html#buttonDropdowns">Split button dropdowns</a></li> + <li><a href="./components.html#navs">Nav, tabs, pills</a></li> + <li><a href="./components.html#navbar">Navbar</a></li> + <li><a href="./components.html#breadcrumbs">Breadcrumbs</a></li> + <li><a href="./components.html#pagination">Pagination</a></li> + <li><a href="./components.html#thumbnails">Thumbnails</a></li> + <li><a href="./components.html#alerts">Alert messages</a></li> + </ul> + </li> + <li class="dropdown"> + <a href="./javascript.html" class="dropdown-toggle" data-toggle="dropdown"> + Javascript plugins + <b class="caret"></b> + </a> + <ul class="dropdown-menu"> + <li><a href="./javascript.html#transition">Transition</a></li> + <li><a href="./javascript.html#modal">Modal</a></li> + <li><a href="./javascript.html#dropdown">Dropdown</a></li> + <li><a href="./javascript.html#scrollspy">Scrollspy</a></li> + <li><a href="./javascript.html#tab">Tab</a></li> + <li><a href="./javascript.html#tooltip">Tooltip</a></li> + <li><a href="./javascript.html#popover">Popover</a></li> + <li><a href="./javascript.html#alerts">Alert</a></li> + <li><a href="./javascript.html#buttons">Button</a></li> + <li><a href="./javascript.html#collapse">Collapse</a></li> + <li><a href="./javascript.html#carousel">Carousel</a></li> + <li><a href="./javascript.html#typeahead">Typeahead</a></li> + </ul> + </li> + <li class="active"> + <a href="./less.html"> + Using LESS + </a> + </li> </ul> </div> </div> diff --git a/docs/scaffolding.html b/docs/scaffolding.html index b868fd215c..546a2755ad 100644 --- a/docs/scaffolding.html +++ b/docs/scaffolding.html @@ -34,11 +34,71 @@ <a class="brand" href="./index.html">Bootstrap</a> <ul class="nav"> <li><a href="./index.html">Overview</a></li> - <li class="active"><a href="./scaffolding.html">Scaffolding</a></li> - <li><a href="./base-css.html">Base CSS</a></li> - <li><a href="./components.html">Components</a></li> - <li><a href="./javascript.html">Javascript plugins</a></li> - <li><a href="./less.html">Using LESS</a></li> + <li class="dropdown active"> + <a href="./scaffolding.html" class="dropdown-toggle" data-toggle="dropdown"> + Scaffolding + <b class="caret"></b> + </a> + <ul class="dropdown-menu"> + <li><a href="./scaffolding.html#grid">Grid system</a></li> + <li><a href="./scaffolding.html#layouts">Layouts</a></li> + <li><a href="./scaffolding.html#responsive">Responsive design</a></li> + </ul> + </li> + <li class="dropdown"> + <a href="./base-css.html" class="dropdown-toggle" data-toggle="dropdown"> + Base CSS + <b class="caret"></b> + </a> + <ul class="dropdown-menu"> + <li><a href="./base-css.html#type">Type</a></li> + <li><a href="./base-css.html#tables">Tables</a></li> + <li><a href="./base-css.html#forms">Forms</a></li> + <li><a href="./base-css.html#buttons">Buttons</a></li> + <li><a href="./base-css.html#icons">Icons by Glyphicons</a></li> + </ul> + </li> + <li class="dropdown"> + <a href="./components.html" class="dropdown-toggle" data-toggle="dropdown"> + Components + <b class="caret"></b> + </a> + <ul class="dropdown-menu"> + <li><a href="./components.html#buttonGroups">Button groups</a></li> + <li><a href="./components.html#buttonDropdowns">Split button dropdowns</a></li> + <li><a href="./components.html#navs">Nav, tabs, pills</a></li> + <li><a href="./components.html#navbar">Navbar</a></li> + <li><a href="./components.html#breadcrumbs">Breadcrumbs</a></li> + <li><a href="./components.html#pagination">Pagination</a></li> + <li><a href="./components.html#thumbnails">Thumbnails</a></li> + <li><a href="./components.html#alerts">Alert messages</a></li> + </ul> + </li> + <li class="dropdown"> + <a href="./javascript.html" class="dropdown-toggle" data-toggle="dropdown"> + Javascript plugins + <b class="caret"></b> + </a> + <ul class="dropdown-menu"> + <li><a href="./javascript.html#transition">Transition</a></li> + <li><a href="./javascript.html#modal">Modal</a></li> + <li><a href="./javascript.html#dropdown">Dropdown</a></li> + <li><a href="./javascript.html#scrollspy">Scrollspy</a></li> + <li><a href="./javascript.html#tab">Tab</a></li> + <li><a href="./javascript.html#tooltip">Tooltip</a></li> + <li><a href="./javascript.html#popover">Popover</a></li> + <li><a href="./javascript.html#alerts">Alert</a></li> + <li><a href="./javascript.html#buttons">Button</a></li> + <li><a href="./javascript.html#collapse">Collapse</a></li> + <li><a href="./javascript.html#carousel">Carousel</a></li> + <li><a href="./javascript.html#typeahead">Typeahead</a></li> + </ul> + </li> + <li> + <a href="./less.html"> + Using LESS + </a> + </li> </ul> </div> </div> @@ -361,66 +421,6 @@ <!-- Footer ================================================== --> <footer class="footer"> - <div class="row"> - <dl class="span2"> - <dt>Bootstrap</dt> - <dd><a href="./index.html">Overview</a></dd> - <dd><a href="./index.html#gettingstarted">Getting started</a></dd> - <dt>Elsewhere</dt> - <dd><a href="https://github.com/twitter/bootstrap/">GitHub</a></dd> - <dd><a href="https://github.com/twitter/bootstrap/issues?state=open">Issues</a></dd> - <dd><a href="https://github.com/twitter/bootstrap/wiki/Roadmap">Roadmap</a></dd> - <dd><a href="https://github.com/twitter/bootstrap/wiki/Changelog">Changelog</a></dd> - </dl> - <dl class="span2"> - <dt>Scaffolding</dt> - <dd><a href="./scaffolding.html#grid">Grid system</a></dd> - <dd><a href="./scaffolding.html#layouts">Layouts</a></dd> - <dd><a href="./scaffolding.html#responsive">Responsive design</a></dd> - </dl> - <dl class="span2"> - <dt>Base CSS</dt> - <dd><a href="./base-css.html#type">Type</a></dd> - <dd><a href="./base-css.html#tables">Tables</a></dd> - <dd><a href="./base-css.html#forms">Forms</a></dd> - <dd><a href="./base-css.html#buttons">Buttons</a></dd> - <dd><a href="./base-css.html#icons">Icons by Glyphicons</a></dd> - </dl> - <dl class="span2"> - <dt>Components</dt> - <dd><a href="./base-css.html#buttonGroups">Button groups</a></dd> - <dd><a href="./base-css.html#buttonDropdowns">Split button dropdowns</a></dd> - <dd><a href="./components.html#navs">Nav, tabs, pills</a></dd> - <dd><a href="./components.html#navbar">Navbar</a></dd> - <dd><a href="./components.html#breadcrumbs">Breadcrumbs</a></dd> - <dd><a href="./components.html#pagination">Pagination</a></dd> - <dd><a href="./components.html#thumbnails">Thumbnails</a></dd> - <dd><a href="./components.html#alerts">Alert messages</a></dd> - </dl> - <dl class="span2"> - <dt>Javascript plugins</dt> - <dd><a href="./javascript.html#transition">Transition</a></dd> - <dd><a href="./javascript.html#modal">Modal</a></dd> - <dd><a href="./javascript.html#dropdown">Dropdown</a></dd> - <dd><a href="./javascript.html#scrollspy">Scrollspy</a></dd> - <dd><a href="./javascript.html#tab">Tab</a></dd> - <dd><a href="./javascript.html#tooltip">Tooltip</a></dd> - <dd><a href="./javascript.html#popover">Popover</a></dd> - <dd><a href="./javascript.html#alerts">Alert</a></dd> - <dd><a href="./javascript.html#buttons">Button</a></dd> - <dd><a href="./javascript.html#collapse">Collapse</a></dd> - <dd><a href="./javascript.html#carousel">Carousel</a></dd> - <dd><a href="./javascript.html#typeahead">Typeahead</a></dd> - </dl> - <dl class="span2"> - <dt>Using LESS</dt> - <dd><a href="./less.html#intro">Introduction to LESS</a></dd> - <dd><a href="./less.html#variables">Variables</a></dd> - <dd><a href="./less.html#mixins">Mixins</a></dd> - <dd><a href="./less.html#compiling">Compiling Bootstrap</a></dd> - </dl> - </div> - <hr> <p class="pull-right"><a href="#">Back to top</a></p> <p>Designed and built with all the love in the world <a href="http://twitter.com/twitter" target="_blank">@twitter</a> by <a href="http://twitter.com/mdo" target="_blank">@mdo</a> and <a href="http://twitter.com/fat" target="_blank">@fat</a>.</p> <p>Code licensed under the <a href="http://www.apache.org/licenses/LICENSE-2.0" target="_blank">Apache License v2.0</a>. Documentation licensed under <a href="http://creativecommons.org/licenses/by/3.0/">CC BY 3.0</a>.</p> diff --git a/docs/upgrading.html b/docs/upgrading.html index 916240794f..d91bf20af8 100644 --- a/docs/upgrading.html +++ b/docs/upgrading.html @@ -34,11 +34,71 @@ <a class="brand" href="./index.html">Bootstrap</a> <ul class="nav"> <li><a href="./index.html">Overview</a></li> - <li><a href="./scaffolding.html">Scaffolding</a></li> - <li><a href="./base-css.html">Base CSS</a></li> - <li><a href="./components.html">Components</a></li> - <li><a href="./javascript.html">Javascript plugins</a></li> - <li><a href="./less.html">Using LESS</a></li> + <li class="dropdown"> + <a href="./scaffolding.html" class="dropdown-toggle" data-toggle="dropdown"> + Scaffolding + <b class="caret"></b> + </a> + <ul class="dropdown-menu"> + <li><a href="./scaffolding.html#grid">Grid system</a></li> + <li><a href="./scaffolding.html#layouts">Layouts</a></li> + <li><a href="./scaffolding.html#responsive">Responsive design</a></li> + </ul> + </li> + <li class="dropdown"> + <a href="./base-css.html" class="dropdown-toggle" data-toggle="dropdown"> + Base CSS + <b class="caret"></b> + </a> + <ul class="dropdown-menu"> + <li><a href="./base-css.html#type">Type</a></li> + <li><a href="./base-css.html#tables">Tables</a></li> + <li><a href="./base-css.html#forms">Forms</a></li> + <li><a href="./base-css.html#buttons">Buttons</a></li> + <li><a href="./base-css.html#icons">Icons by Glyphicons</a></li> + </ul> + </li> + <li class="dropdown"> + <a href="./components.html" class="dropdown-toggle" data-toggle="dropdown"> + Components + <b class="caret"></b> + </a> + <ul class="dropdown-menu"> + <li><a href="./components.html#buttonGroups">Button groups</a></li> + <li><a href="./components.html#buttonDropdowns">Split button dropdowns</a></li> + <li><a href="./components.html#navs">Nav, tabs, pills</a></li> + <li><a href="./components.html#navbar">Navbar</a></li> + <li><a href="./components.html#breadcrumbs">Breadcrumbs</a></li> + <li><a href="./components.html#pagination">Pagination</a></li> + <li><a href="./components.html#thumbnails">Thumbnails</a></li> + <li><a href="./components.html#alerts">Alert messages</a></li> + </ul> + </li> + <li class="dropdown"> + <a href="./javascript.html" class="dropdown-toggle" data-toggle="dropdown"> + Javascript plugins + <b class="caret"></b> + </a> + <ul class="dropdown-menu"> + <li><a href="./javascript.html#transition">Transition</a></li> + <li><a href="./javascript.html#modal">Modal</a></li> + <li><a href="./javascript.html#dropdown">Dropdown</a></li> + <li><a href="./javascript.html#scrollspy">Scrollspy</a></li> + <li><a href="./javascript.html#tab">Tab</a></li> + <li><a href="./javascript.html#tooltip">Tooltip</a></li> + <li><a href="./javascript.html#popover">Popover</a></li> + <li><a href="./javascript.html#alerts">Alert</a></li> + <li><a href="./javascript.html#buttons">Button</a></li> + <li><a href="./javascript.html#collapse">Collapse</a></li> + <li><a href="./javascript.html#carousel">Carousel</a></li> + <li><a href="./javascript.html#typeahead">Typeahead</a></li> + </ul> + </li> + <li> + <a href="./less.html"> + Using LESS + </a> + </li> </ul> </div> </div> diff --git a/lib/dropdowns.less b/lib/dropdowns.less index 85f74b6322..daa7003e31 100644 --- a/lib/dropdowns.less +++ b/lib/dropdowns.less @@ -36,12 +36,12 @@ min-width: 160px; max-width: 220px; _width: 160px; - padding: 5px 0; + padding: 4px 0; margin: 0; // override default ul list-style: none; background-color: @white; border-color: #999; - border-color: rgba(0,0,0,.1); + border-color: rgba(0,0,0,.2); border-style: solid; border-width: 1px; .border-radius(0 0 5px 5px); @@ -68,6 +68,7 @@ font-weight: normal; line-height: 18px; color: @gray; + white-space: nowrap; } } @@ -75,10 +76,7 @@ .dropdown-menu li > a:hover { color: #fff; text-decoration: none; - text-shadow: 0 -1px 0 rgba(0,0,0,.25); - #gradient > .vertical(@linkColor, darken(@linkColor, 5%)); - @shadow: inset 0 1px 0 rgba(0,0,0,.075), inset 0 -1px rgba(0,0,0,.075); - .box-shadow(@shadow); + background-color: @linkColor; } // Active state diff --git a/lib/navbar.less b/lib/navbar.less index 82f9f7d2e4..a3e64cde86 100644 --- a/lib/navbar.less +++ b/lib/navbar.less @@ -192,7 +192,7 @@ // Menu position and menu carets .navbar .dropdown-menu { - top: 42px; + top: 41px; .border-radius(4px); &:before { content: ''; @@ -200,10 +200,10 @@ border-left: 7px solid transparent; border-right: 7px solid transparent; border-bottom: 7px solid #ccc; - border-bottom-color: rgba(0,0,0,.1); + border-bottom-color: rgba(0,0,0,.2); position: absolute; top: -7px; - left: 12px; + left: 9px; } &:after { content: ''; @@ -213,7 +213,7 @@ border-bottom: 6px solid #fff; position: absolute; top: -6px; - left: 13px; + left: 10px; } } @@ -222,12 +222,22 @@ .navbar .open.dropdown .caret { border-top-color: #fff; } +.navbar .nav .active .caret { + .opacity(100); +} // Remove background color from open dropdown -.navbar .open .dropdown-toggle { +.navbar .nav .open > .dropdown-toggle, +.navbar .nav .active > .dropdown-toggle, +.navbar .nav .open.active > .dropdown-toggle { background-color: transparent; } +// Dropdown link on hover +.navbar .nav .active > .dropdown-toggle:hover { + color: #fff; +} + // Right aligned menus need alt position .navbar .nav.pull-right .dropdown-menu { right: 0; -- GitLab From 11be9cd16370ecd15d227917d98ff63eccae68ae Mon Sep 17 00:00:00 2001 From: Purwandi <free6300@gmail.com> Date: Fri, 13 Jan 2012 14:57:21 +0700 Subject: [PATCH 271/318] Fix id anchor javascript --- docs/base-css.html | 12 ++++++------ docs/components.html | 12 ++++++------ docs/index.html | 12 ++++++------ docs/javascript.html | 12 ++++++------ docs/less.html | 12 ++++++------ docs/scaffolding.html | 12 ++++++------ docs/upgrading.html | 12 ++++++------ 7 files changed, 42 insertions(+), 42 deletions(-) diff --git a/docs/base-css.html b/docs/base-css.html index 7f60580b4a..9491f40aab 100644 --- a/docs/base-css.html +++ b/docs/base-css.html @@ -80,13 +80,13 @@ <b class="caret"></b> </a> <ul class="dropdown-menu"> - <li><a href="./javascript.html#transition">Transition</a></li> - <li><a href="./javascript.html#modal">Modal</a></li> - <li><a href="./javascript.html#dropdown">Dropdown</a></li> + <li><a href="./javascript.html#transitions">Transition</a></li> + <li><a href="./javascript.html#modals">Modal</a></li> + <li><a href="./javascript.html#dropdowns">Dropdown</a></li> <li><a href="./javascript.html#scrollspy">Scrollspy</a></li> - <li><a href="./javascript.html#tab">Tab</a></li> - <li><a href="./javascript.html#tooltip">Tooltip</a></li> - <li><a href="./javascript.html#popover">Popover</a></li> + <li><a href="./javascript.html#tabs">Tab</a></li> + <li><a href="./javascript.html#tooltips">Tooltip</a></li> + <li><a href="./javascript.html#popovers">Popover</a></li> <li><a href="./javascript.html#alerts">Alert</a></li> <li><a href="./javascript.html#buttons">Button</a></li> <li><a href="./javascript.html#collapse">Collapse</a></li> diff --git a/docs/components.html b/docs/components.html index b9d75edbef..fa3dc5a20b 100644 --- a/docs/components.html +++ b/docs/components.html @@ -80,13 +80,13 @@ <b class="caret"></b> </a> <ul class="dropdown-menu"> - <li><a href="./javascript.html#transition">Transition</a></li> - <li><a href="./javascript.html#modal">Modal</a></li> - <li><a href="./javascript.html#dropdown">Dropdown</a></li> + <li><a href="./javascript.html#transitions">Transition</a></li> + <li><a href="./javascript.html#modals">Modal</a></li> + <li><a href="./javascript.html#dropdowns">Dropdown</a></li> <li><a href="./javascript.html#scrollspy">Scrollspy</a></li> - <li><a href="./javascript.html#tab">Tab</a></li> - <li><a href="./javascript.html#tooltip">Tooltip</a></li> - <li><a href="./javascript.html#popover">Popover</a></li> + <li><a href="./javascript.html#tabs">Tab</a></li> + <li><a href="./javascript.html#tooltips">Tooltip</a></li> + <li><a href="./javascript.html#popovers">Popover</a></li> <li><a href="./javascript.html#alerts">Alert</a></li> <li><a href="./javascript.html#buttons">Button</a></li> <li><a href="./javascript.html#collapse">Collapse</a></li> diff --git a/docs/index.html b/docs/index.html index 8d5448ce1d..5d8e61dedb 100644 --- a/docs/index.html +++ b/docs/index.html @@ -81,13 +81,13 @@ <b class="caret"></b> </a> <ul class="dropdown-menu"> - <li><a href="./javascript.html#transition">Transition</a></li> - <li><a href="./javascript.html#modal">Modal</a></li> - <li><a href="./javascript.html#dropdown">Dropdown</a></li> + <li><a href="./javascript.html#transitions">Transition</a></li> + <li><a href="./javascript.html#modals">Modal</a></li> + <li><a href="./javascript.html#dropdowns">Dropdown</a></li> <li><a href="./javascript.html#scrollspy">Scrollspy</a></li> - <li><a href="./javascript.html#tab">Tab</a></li> - <li><a href="./javascript.html#tooltip">Tooltip</a></li> - <li><a href="./javascript.html#popover">Popover</a></li> + <li><a href="./javascript.html#tabs">Tab</a></li> + <li><a href="./javascript.html#tooltips">Tooltip</a></li> + <li><a href="./javascript.html#popovers">Popover</a></li> <li><a href="./javascript.html#alerts">Alert</a></li> <li><a href="./javascript.html#buttons">Button</a></li> <li><a href="./javascript.html#collapse">Collapse</a></li> diff --git a/docs/javascript.html b/docs/javascript.html index 216bcdef5a..58cc13e8cd 100644 --- a/docs/javascript.html +++ b/docs/javascript.html @@ -81,13 +81,13 @@ <b class="caret"></b> </a> <ul class="dropdown-menu"> - <li><a href="./javascript.html#transition">Transition</a></li> - <li><a href="./javascript.html#modal">Modal</a></li> - <li><a href="./javascript.html#dropdown">Dropdown</a></li> + <li><a href="./javascript.html#transitions">Transition</a></li> + <li><a href="./javascript.html#modals">Modal</a></li> + <li><a href="./javascript.html#dropdowns">Dropdown</a></li> <li><a href="./javascript.html#scrollspy">Scrollspy</a></li> - <li><a href="./javascript.html#tab">Tab</a></li> - <li><a href="./javascript.html#tooltip">Tooltip</a></li> - <li><a href="./javascript.html#popover">Popover</a></li> + <li><a href="./javascript.html#tabs">Tab</a></li> + <li><a href="./javascript.html#tooltips">Tooltip</a></li> + <li><a href="./javascript.html#popovers">Popover</a></li> <li><a href="./javascript.html#alerts">Alert</a></li> <li><a href="./javascript.html#buttons">Button</a></li> <li><a href="./javascript.html#collapse">Collapse</a></li> diff --git a/docs/less.html b/docs/less.html index cecf22da40..ccde9c87e8 100644 --- a/docs/less.html +++ b/docs/less.html @@ -80,13 +80,13 @@ <b class="caret"></b> </a> <ul class="dropdown-menu"> - <li><a href="./javascript.html#transition">Transition</a></li> - <li><a href="./javascript.html#modal">Modal</a></li> - <li><a href="./javascript.html#dropdown">Dropdown</a></li> + <li><a href="./javascript.html#transitions">Transition</a></li> + <li><a href="./javascript.html#modals">Modal</a></li> + <li><a href="./javascript.html#dropdowns">Dropdown</a></li> <li><a href="./javascript.html#scrollspy">Scrollspy</a></li> - <li><a href="./javascript.html#tab">Tab</a></li> - <li><a href="./javascript.html#tooltip">Tooltip</a></li> - <li><a href="./javascript.html#popover">Popover</a></li> + <li><a href="./javascript.html#tabs">Tab</a></li> + <li><a href="./javascript.html#tooltips">Tooltip</a></li> + <li><a href="./javascript.html#popovers">Popover</a></li> <li><a href="./javascript.html#alerts">Alert</a></li> <li><a href="./javascript.html#buttons">Button</a></li> <li><a href="./javascript.html#collapse">Collapse</a></li> diff --git a/docs/scaffolding.html b/docs/scaffolding.html index 546a2755ad..9cb3b04336 100644 --- a/docs/scaffolding.html +++ b/docs/scaffolding.html @@ -80,13 +80,13 @@ <b class="caret"></b> </a> <ul class="dropdown-menu"> - <li><a href="./javascript.html#transition">Transition</a></li> - <li><a href="./javascript.html#modal">Modal</a></li> - <li><a href="./javascript.html#dropdown">Dropdown</a></li> + <li><a href="./javascript.html#transitions">Transition</a></li> + <li><a href="./javascript.html#modals">Modal</a></li> + <li><a href="./javascript.html#dropdowns">Dropdown</a></li> <li><a href="./javascript.html#scrollspy">Scrollspy</a></li> - <li><a href="./javascript.html#tab">Tab</a></li> - <li><a href="./javascript.html#tooltip">Tooltip</a></li> - <li><a href="./javascript.html#popover">Popover</a></li> + <li><a href="./javascript.html#tabs">Tab</a></li> + <li><a href="./javascript.html#tooltips">Tooltip</a></li> + <li><a href="./javascript.html#popovers">Popover</a></li> <li><a href="./javascript.html#alerts">Alert</a></li> <li><a href="./javascript.html#buttons">Button</a></li> <li><a href="./javascript.html#collapse">Collapse</a></li> diff --git a/docs/upgrading.html b/docs/upgrading.html index d91bf20af8..7e8b966702 100644 --- a/docs/upgrading.html +++ b/docs/upgrading.html @@ -80,13 +80,13 @@ <b class="caret"></b> </a> <ul class="dropdown-menu"> - <li><a href="./javascript.html#transition">Transition</a></li> - <li><a href="./javascript.html#modal">Modal</a></li> - <li><a href="./javascript.html#dropdown">Dropdown</a></li> + <li><a href="./javascript.html#transitions">Transition</a></li> + <li><a href="./javascript.html#modals">Modal</a></li> + <li><a href="./javascript.html#dropdowns">Dropdown</a></li> <li><a href="./javascript.html#scrollspy">Scrollspy</a></li> - <li><a href="./javascript.html#tab">Tab</a></li> - <li><a href="./javascript.html#tooltip">Tooltip</a></li> - <li><a href="./javascript.html#popover">Popover</a></li> + <li><a href="./javascript.html#tabs">Tab</a></li> + <li><a href="./javascript.html#tooltips">Tooltip</a></li> + <li><a href="./javascript.html#popovers">Popover</a></li> <li><a href="./javascript.html#alerts">Alert</a></li> <li><a href="./javascript.html#buttons">Button</a></li> <li><a href="./javascript.html#collapse">Collapse</a></li> -- GitLab From 7b321e9c1fbd5ff124cb190f1375a78b132fb9cb Mon Sep 17 00:00:00 2001 From: Purwandi <free6300@gmail.com> Date: Fri, 13 Jan 2012 15:03:23 +0700 Subject: [PATCH 272/318] Remove sidebar with icon from my own repo --- docs/base-css.html | 11 +++++------ docs/components.html | 30 +----------------------------- 2 files changed, 6 insertions(+), 35 deletions(-) diff --git a/docs/base-css.html b/docs/base-css.html index 8d6c56701d..9491f40aab 100644 --- a/docs/base-css.html +++ b/docs/base-css.html @@ -1516,12 +1516,11 @@ </div> <div class="span3"> <p>Or, use them in navigation.</p> - <div class="well" style="padding: 8px 0;"> - <ul class="nav list"> - <li class="nav-header">List header</li> - <li class="active"><a href="#"><i class="home"></i> Home</a></li> - <li><a href="#"><i class="download"></i> Downloads</a></li> - <li><a href="#"><i class="film"></i> Movies</a></li> + <div class="well side-nav"> + <ul class="nav-group"> + <li class="active"><a class="nav-item" href="#"><i class="home"></i> Home</a></li> + <li><a class="nav-item" href="#"><i class="book"></i> Library</a></li> + <li><a class="nav-item" href="#"><i class="cog"></i> Settings</a></li> </ul> </div> </div> diff --git a/docs/components.html b/docs/components.html index 08a1a7b574..fa3dc5a20b 100644 --- a/docs/components.html +++ b/docs/components.html @@ -506,35 +506,7 @@ </pre> </div> </div> - <div class="row"> - <div class="span4"> - <h3>Sidebar navigation with icon</h3> - <div class="well" style="padding: 8px 0;"> - <ul class="nav list"> - <li class="nav-header">List header</li> - <li class="active"><a href="#"><i class="home"></i> Home</a></li> - <li><a href="#"><i class="download"></i> Downloads</a></li> - <li><a href="#"><i class="film"></i> Movies</a></li> - <li><a href="#"><i class="picture"></i> Picture</a></li> - <li class="nav-header">Another list header</li> - <li><a href="#"><i class="user"></i> Profile</a></li> - <li><a href="#"><i class="asterisk"></i> Settings</a></li> - </ul> - </div> <!-- /well --> - </div> - <div class="span8"> - <h3>Simple markup</h3> -<pre class="prettyprint linenums"> -<ul class="nav list"> - <li class="nav-header">List header</li> - <li class="active"><a href="#"><i class="home"></i> Home</a></li> - <li><a href="#"><i class="download"></i> Downloads</a></li> - <li><a href="#"><i class="film"></i> Movies</a></li> - ... -</ul> -</pre> - </div> - </div> + <h2>Tabbable nav <small>Bring tabs to life via javascript</small></h2> <div class="row"> -- GitLab From 8f09028cff87b68467fb20e295c9dc96ea4a5de0 Mon Sep 17 00:00:00 2001 From: Mark Otto <markdotto@gmail.com> Date: Fri, 13 Jan 2012 09:55:15 -0800 Subject: [PATCH 273/318] updated js includes to make nav work everywhere --- docs/less.html | 1 + docs/scaffolding.html | 1 + docs/upgrading.html | 7 +++++++ 3 files changed, 9 insertions(+) diff --git a/docs/less.html b/docs/less.html index cecf22da40..202e436e29 100644 --- a/docs/less.html +++ b/docs/less.html @@ -529,5 +529,6 @@ <script src="http://code.jquery.com/jquery-1.7.min.js"></script> <script src="assets/js/google-code-prettify/prettify.js"></script> <script src="assets/js/application.js"></script> + <script src="../js/bootstrap-dropdown.js"></script> </body> </html> diff --git a/docs/scaffolding.html b/docs/scaffolding.html index 546a2755ad..d8ff066725 100644 --- a/docs/scaffolding.html +++ b/docs/scaffolding.html @@ -434,6 +434,7 @@ <script src="assets/js/google-code-prettify/prettify.js"></script> <script src="../js/bootstrap-transition.js"></script> <script src="../js/bootstrap-tooltip.js"></script> + <script src="../js/bootstrap-dropdown.js"></script> <script src="assets/js/application.js"></script> </body> diff --git a/docs/upgrading.html b/docs/upgrading.html index d91bf20af8..f8d9a732ad 100644 --- a/docs/upgrading.html +++ b/docs/upgrading.html @@ -204,5 +204,12 @@ </footer> </div><!-- /container --> + <!-- Le javascript --> + <!-- Placed at the end of the document so the pages load faster --> + <script type="text/javascript" src="http://platform.twitter.com/widgets.js"></script> + <script src="http://code.jquery.com/jquery-1.7.min.js"></script> + <script src="assets/js/application.js"></script> + <script src="../js/bootstrap-dropdown.js"></script> + </body> </html> -- GitLab From fc053ac8b27611e3dc7fae769ce28f154250d50e Mon Sep 17 00:00:00 2001 From: Mark Otto <markdotto@gmail.com> Date: Fri, 13 Jan 2012 10:07:56 -0800 Subject: [PATCH 274/318] update dropdowns spacing and docs section spacing --- bootstrap.css | 11 +++-------- bootstrap.min.css | 5 ++--- docs/assets/css/docs.css | 5 ++++- lib/dropdowns.less | 14 ++++---------- 4 files changed, 13 insertions(+), 22 deletions(-) diff --git a/bootstrap.css b/bootstrap.css index 8e5ad131c1..ba51a7d455 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: Thu Jan 12 15:28:03 PST 2012 + * Date: Fri Jan 13 10:05:29 PST 2012 */ html, body { margin: 0; @@ -1481,23 +1481,18 @@ i { } .dropdown-menu a { display: block; - padding: 2px 15px; + padding: 3px 15px; clear: both; font-weight: normal; line-height: 18px; color: #555555; white-space: nowrap; } -.dropdown-menu li > a:hover { +.dropdown-menu li > a:hover, .dropdown-menu .active > a, .dropdown-menu .active > a:hover { color: #fff; text-decoration: none; background-color: #0088cc; } -.dropdown-menu .active > a, .dropdown-menu .active > a:hover { - color: #fff; - background-color: #999; - background-image: none; -} .dropdown.open .dropdown-toggle { color: #ffffff; background: #ccc; diff --git a/bootstrap.min.css b/bootstrap.min.css index 1723ca555e..8f2f020d1b 100644 --- a/bootstrap.min.css +++ b/bootstrap.min.css @@ -302,9 +302,8 @@ i{background-image:url(docs/assets/img/glyphicons-halflings-sprite.png);backgrou .dropdown .caret{margin-top:8px;margin-left:2px;} .dropdown:hover .caret,.open.dropdown .caret{filter:alpha(opacity=100);-moz-opacity:1;opacity:1;} .dropdown-menu{position:absolute;top:40px;z-index:1000;float:left;display:none;min-width:160px;max-width:220px;_width:160px;padding:4px 0;margin:0;list-style:none;background-color:#ffffff;border-color:#999;border-color:rgba(0, 0, 0, 0.2);border-style:solid;border-width:1px;-webkit-border-radius:0 0 5px 5px;-moz-border-radius:0 0 5px 5px;border-radius:0 0 5px 5px;-webkit-box-shadow:0 5px 10px rgba(0, 0, 0, 0.2);-moz-box-shadow:0 5px 10px rgba(0, 0, 0, 0.2);box-shadow:0 5px 10px rgba(0, 0, 0, 0.2);-webkit-background-clip:padding-box;-moz-background-clip:padding;background-clip:padding-box;zoom:1;}.dropdown-menu .divider{height:1px;margin:5px 1px;overflow:hidden;background-color:#e5e5e5;border-bottom:1px solid #ffffff;} -.dropdown-menu a{display:block;padding:2px 15px;clear:both;font-weight:normal;line-height:18px;color:#555555;white-space:nowrap;} -.dropdown-menu li>a:hover{color:#fff;text-decoration:none;background-color:#0088cc;} -.dropdown-menu .active>a,.dropdown-menu .active>a:hover{color:#fff;background-color:#999;background-image:none;} +.dropdown-menu a{display:block;padding:3px 15px;clear:both;font-weight:normal;line-height:18px;color:#555555;white-space:nowrap;} +.dropdown-menu li>a:hover,.dropdown-menu .active>a,.dropdown-menu .active>a:hover{color:#fff;text-decoration:none;background-color:#0088cc;} .dropdown.open .dropdown-toggle{color:#ffffff;background:#ccc;background:rgba(0, 0, 0, 0.3);} .dropdown.open .dropdown-menu{display:block;} .typeahead{margin-top:2px;-webkit-border-radius:4px;-moz-border-radius:4px;border-radius:4px;} diff --git a/docs/assets/css/docs.css b/docs/assets/css/docs.css index 134224e567..ca1c5cb83f 100644 --- a/docs/assets/css/docs.css +++ b/docs/assets/css/docs.css @@ -35,8 +35,11 @@ body > .navbar-fixed .brand:hover { /* Space out sub-sections more -------------------------------------------------- */ +section { + padding-top: 60px; +} .page-header { - margin: 45px 0 18px; + margin: 18px 0; border-bottom: 1px solid #eee; } .page-header h1 { diff --git a/lib/dropdowns.less b/lib/dropdowns.less index daa7003e31..e2d5fef259 100644 --- a/lib/dropdowns.less +++ b/lib/dropdowns.less @@ -63,7 +63,7 @@ // Links within the dropdown menu a { display: block; - padding: 2px 15px; + padding: 3px 15px; clear: both; font-weight: normal; line-height: 18px; @@ -73,18 +73,12 @@ } // Hover state -.dropdown-menu li > a:hover { - color: #fff; - text-decoration: none; - background-color: @linkColor; -} - -// Active state +.dropdown-menu li > a:hover, .dropdown-menu .active > a, .dropdown-menu .active > a:hover { color: #fff; - background-color: #999; - background-image: none; // remove the gradient + text-decoration: none; + background-color: @linkColor; } // Open state for the dropdown -- GitLab From 2cea94e892eabbe5edbca3a51347af57621d672d Mon Sep 17 00:00:00 2001 From: Renault John Lecoultre <renault.john@gmail.com> Date: Fri, 13 Jan 2012 22:33:05 +0100 Subject: [PATCH 275/318] Fixed when placement is a function --- js/bootstrap-tooltip.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/js/bootstrap-tooltip.js b/js/bootstrap-tooltip.js index 241a44e248..8ce30ab82d 100644 --- a/js/bootstrap-tooltip.js +++ b/js/bootstrap-tooltip.js @@ -115,7 +115,7 @@ } placement = typeof this.options.placement == 'function' ? - thing.call(this, $tip[0], this.$element[0]) : + this.options.placement.call(this, $tip[0], this.$element[0]) : this.options.placement inside = /in/.test(placement) @@ -267,4 +267,4 @@ , template: '<div class="tooltip"><div class="tooltip-arrow"></div><div class="tooltip-inner"></div></div>' } -}( window.jQuery ) \ No newline at end of file +}( window.jQuery ) -- GitLab From a4b107bf879d47db0a6e036814f5aeee4316d36c Mon Sep 17 00:00:00 2001 From: Chris Gunther <chris@room118solutions.com> Date: Sat, 14 Jan 2012 15:15:24 -0500 Subject: [PATCH 276/318] fix navbar links to scaffolding > grid system --- docs/base-css.html | 4 ++-- docs/components.html | 2 +- docs/index.html | 2 +- docs/javascript.html | 2 +- docs/less.html | 2 +- docs/scaffolding.html | 2 +- docs/upgrading.html | 2 +- 7 files changed, 8 insertions(+), 8 deletions(-) diff --git a/docs/base-css.html b/docs/base-css.html index 9491f40aab..3ad403ecd8 100644 --- a/docs/base-css.html +++ b/docs/base-css.html @@ -40,7 +40,7 @@ <b class="caret"></b> </a> <ul class="dropdown-menu"> - <li><a href="./scaffolding.html#grid">Grid system</a></li> + <li><a href="./scaffolding.html#grid-system">Grid system</a></li> <li><a href="./scaffolding.html#layouts">Layouts</a></li> <li><a href="./scaffolding.html#responsive">Responsive design</a></li> </ul> @@ -928,7 +928,7 @@ <p>States like error, warning, and success are included for each type of form control. Also included are styles for disabled controls.</p> </div> </div> - + <h2>Four types of forms</h2> <p>Bootstrap provides simple markup and styles for four styles of common web forms.</p> <table class="bordered-table striped-table"> diff --git a/docs/components.html b/docs/components.html index fa3dc5a20b..55a007f90c 100644 --- a/docs/components.html +++ b/docs/components.html @@ -40,7 +40,7 @@ <b class="caret"></b> </a> <ul class="dropdown-menu"> - <li><a href="./scaffolding.html#grid">Grid system</a></li> + <li><a href="./scaffolding.html#grid-system">Grid system</a></li> <li><a href="./scaffolding.html#layouts">Layouts</a></li> <li><a href="./scaffolding.html#responsive">Responsive design</a></li> </ul> diff --git a/docs/index.html b/docs/index.html index 5d8e61dedb..fc1eb498cd 100644 --- a/docs/index.html +++ b/docs/index.html @@ -41,7 +41,7 @@ <b class="caret"></b> </a> <ul class="dropdown-menu"> - <li><a href="./scaffolding.html#grid">Grid system</a></li> + <li><a href="./scaffolding.html#grid-system">Grid system</a></li> <li><a href="./scaffolding.html#layouts">Layouts</a></li> <li><a href="./scaffolding.html#responsive">Responsive design</a></li> </ul> diff --git a/docs/javascript.html b/docs/javascript.html index 58cc13e8cd..ce47c19740 100644 --- a/docs/javascript.html +++ b/docs/javascript.html @@ -41,7 +41,7 @@ <b class="caret"></b> </a> <ul class="dropdown-menu"> - <li><a href="./scaffolding.html#grid">Grid system</a></li> + <li><a href="./scaffolding.html#grid-system">Grid system</a></li> <li><a href="./scaffolding.html#layouts">Layouts</a></li> <li><a href="./scaffolding.html#responsive">Responsive design</a></li> </ul> diff --git a/docs/less.html b/docs/less.html index 8831ce0945..d99a7903ea 100644 --- a/docs/less.html +++ b/docs/less.html @@ -40,7 +40,7 @@ <b class="caret"></b> </a> <ul class="dropdown-menu"> - <li><a href="./scaffolding.html#grid">Grid system</a></li> + <li><a href="./scaffolding.html#grid-system">Grid system</a></li> <li><a href="./scaffolding.html#layouts">Layouts</a></li> <li><a href="./scaffolding.html#responsive">Responsive design</a></li> </ul> diff --git a/docs/scaffolding.html b/docs/scaffolding.html index 57b90d0969..145dd5584c 100644 --- a/docs/scaffolding.html +++ b/docs/scaffolding.html @@ -40,7 +40,7 @@ <b class="caret"></b> </a> <ul class="dropdown-menu"> - <li><a href="./scaffolding.html#grid">Grid system</a></li> + <li><a href="./scaffolding.html#grid-system">Grid system</a></li> <li><a href="./scaffolding.html#layouts">Layouts</a></li> <li><a href="./scaffolding.html#responsive">Responsive design</a></li> </ul> diff --git a/docs/upgrading.html b/docs/upgrading.html index 376aae8564..1b4864ec76 100644 --- a/docs/upgrading.html +++ b/docs/upgrading.html @@ -40,7 +40,7 @@ <b class="caret"></b> </a> <ul class="dropdown-menu"> - <li><a href="./scaffolding.html#grid">Grid system</a></li> + <li><a href="./scaffolding.html#grid-system">Grid system</a></li> <li><a href="./scaffolding.html#layouts">Layouts</a></li> <li><a href="./scaffolding.html#responsive">Responsive design</a></li> </ul> -- GitLab From f82fb2a1976060b2d0b71c3e6ad20f6d7a7772f7 Mon Sep 17 00:00:00 2001 From: Chris Gunther <chris@room118solutions.com> Date: Sat, 14 Jan 2012 15:18:59 -0500 Subject: [PATCH 277/318] fix navbar links to base CSS > typography --- docs/base-css.html | 2 +- docs/components.html | 2 +- docs/index.html | 2 +- docs/javascript.html | 2 +- docs/less.html | 2 +- docs/scaffolding.html | 2 +- docs/upgrading.html | 2 +- 7 files changed, 7 insertions(+), 7 deletions(-) diff --git a/docs/base-css.html b/docs/base-css.html index 3ad403ecd8..7d06ee5d14 100644 --- a/docs/base-css.html +++ b/docs/base-css.html @@ -51,7 +51,7 @@ <b class="caret"></b> </a> <ul class="dropdown-menu"> - <li><a href="./base-css.html#type">Type</a></li> + <li><a href="./base-css.html#typography">Typography</a></li> <li><a href="./base-css.html#tables">Tables</a></li> <li><a href="./base-css.html#forms">Forms</a></li> <li><a href="./base-css.html#buttons">Buttons</a></li> diff --git a/docs/components.html b/docs/components.html index 55a007f90c..223f275847 100644 --- a/docs/components.html +++ b/docs/components.html @@ -51,7 +51,7 @@ <b class="caret"></b> </a> <ul class="dropdown-menu"> - <li><a href="./base-css.html#type">Type</a></li> + <li><a href="./base-css.html#typography">Typography</a></li> <li><a href="./base-css.html#tables">Tables</a></li> <li><a href="./base-css.html#forms">Forms</a></li> <li><a href="./base-css.html#buttons">Buttons</a></li> diff --git a/docs/index.html b/docs/index.html index fc1eb498cd..8dd4935d5d 100644 --- a/docs/index.html +++ b/docs/index.html @@ -52,7 +52,7 @@ <b class="caret"></b> </a> <ul class="dropdown-menu"> - <li><a href="./base-css.html#type">Type</a></li> + <li><a href="./base-css.html#typography">Typography</a></li> <li><a href="./base-css.html#tables">Tables</a></li> <li><a href="./base-css.html#forms">Forms</a></li> <li><a href="./base-css.html#buttons">Buttons</a></li> diff --git a/docs/javascript.html b/docs/javascript.html index ce47c19740..4245856119 100644 --- a/docs/javascript.html +++ b/docs/javascript.html @@ -52,7 +52,7 @@ <b class="caret"></b> </a> <ul class="dropdown-menu"> - <li><a href="./base-css.html#type">Type</a></li> + <li><a href="./base-css.html#typography">Typography</a></li> <li><a href="./base-css.html#tables">Tables</a></li> <li><a href="./base-css.html#forms">Forms</a></li> <li><a href="./base-css.html#buttons">Buttons</a></li> diff --git a/docs/less.html b/docs/less.html index d99a7903ea..5b956f533b 100644 --- a/docs/less.html +++ b/docs/less.html @@ -51,7 +51,7 @@ <b class="caret"></b> </a> <ul class="dropdown-menu"> - <li><a href="./base-css.html#type">Type</a></li> + <li><a href="./base-css.html#typography">Typography</a></li> <li><a href="./base-css.html#tables">Tables</a></li> <li><a href="./base-css.html#forms">Forms</a></li> <li><a href="./base-css.html#buttons">Buttons</a></li> diff --git a/docs/scaffolding.html b/docs/scaffolding.html index 145dd5584c..4617629ae1 100644 --- a/docs/scaffolding.html +++ b/docs/scaffolding.html @@ -51,7 +51,7 @@ <b class="caret"></b> </a> <ul class="dropdown-menu"> - <li><a href="./base-css.html#type">Type</a></li> + <li><a href="./base-css.html#typography">Typography</a></li> <li><a href="./base-css.html#tables">Tables</a></li> <li><a href="./base-css.html#forms">Forms</a></li> <li><a href="./base-css.html#buttons">Buttons</a></li> diff --git a/docs/upgrading.html b/docs/upgrading.html index 1b4864ec76..423c5be27b 100644 --- a/docs/upgrading.html +++ b/docs/upgrading.html @@ -51,7 +51,7 @@ <b class="caret"></b> </a> <ul class="dropdown-menu"> - <li><a href="./base-css.html#type">Type</a></li> + <li><a href="./base-css.html#typography">Typography</a></li> <li><a href="./base-css.html#tables">Tables</a></li> <li><a href="./base-css.html#forms">Forms</a></li> <li><a href="./base-css.html#buttons">Buttons</a></li> -- GitLab From b723db1e42b6450acdc02ee8086da51ac16fcef6 Mon Sep 17 00:00:00 2001 From: Chris Gunther <chris@room118solutions.com> Date: Sat, 14 Jan 2012 15:21:09 -0500 Subject: [PATCH 278/318] fix section ID for pagination --- docs/components.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/components.html b/docs/components.html index 223f275847..e11a7decfd 100644 --- a/docs/components.html +++ b/docs/components.html @@ -844,7 +844,7 @@ <!-- Pagination ================================================== --> -<section id="carousel"> +<section id="pagination"> <div class="page-header"> <h1>Pagination <small></small></h1> </div> -- GitLab From 1f54ff91b2dd70c9a8bb4e460dd7ad02a3c24247 Mon Sep 17 00:00:00 2001 From: Chris Gunther <chris@room118solutions.com> Date: Sat, 14 Jan 2012 15:21:57 -0500 Subject: [PATCH 279/318] fix section ID for thumbnails --- docs/components.html | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/docs/components.html b/docs/components.html index e11a7decfd..0d564cd66d 100644 --- a/docs/components.html +++ b/docs/components.html @@ -907,9 +907,9 @@ -<!-- Media +<!-- Thumbnails ================================================== --> -<section id="media"> +<section id="thumbnails"> <div class="page-header"> <h1>Thumbnails <small>Grids of images, videos, text, and more</small></h1> </div> -- GitLab From ec7f8917b1bfa79dee54cd6c5f6cf0074764fce4 Mon Sep 17 00:00:00 2001 From: Chris Gunther <chris@room118solutions.com> Date: Sat, 14 Jan 2012 15:24:35 -0500 Subject: [PATCH 280/318] add Progress Bars to Components narbar dropdown --- docs/base-css.html | 1 + docs/components.html | 3 ++- docs/index.html | 1 + docs/javascript.html | 1 + docs/less.html | 1 + docs/scaffolding.html | 1 + docs/upgrading.html | 1 + 7 files changed, 8 insertions(+), 1 deletion(-) diff --git a/docs/base-css.html b/docs/base-css.html index 7d06ee5d14..79bbaa7589 100644 --- a/docs/base-css.html +++ b/docs/base-css.html @@ -72,6 +72,7 @@ <li><a href="./components.html#pagination">Pagination</a></li> <li><a href="./components.html#thumbnails">Thumbnails</a></li> <li><a href="./components.html#alerts">Alert messages</a></li> + <li><a href="./components.html#progress">Progress bars</a></li> </ul> </li> <li class="dropdown"> diff --git a/docs/components.html b/docs/components.html index 0d564cd66d..8c91a101fb 100644 --- a/docs/components.html +++ b/docs/components.html @@ -72,6 +72,7 @@ <li><a href="./components.html#pagination">Pagination</a></li> <li><a href="./components.html#thumbnails">Thumbnails</a></li> <li><a href="./components.html#alerts">Alert messages</a></li> + <li><a href="./components.html#progress">Progress bars</a></li> </ul> </li> <li class="dropdown"> @@ -1159,7 +1160,7 @@ <!-- Progress bars ================================================== --> - <section id="progresss"> + <section id="progress"> <div class="page-header"> <h1>Progress bars <small>For loading, redirecting, or action status</small></h1> </div> diff --git a/docs/index.html b/docs/index.html index 8dd4935d5d..ffdac0b3f2 100644 --- a/docs/index.html +++ b/docs/index.html @@ -73,6 +73,7 @@ <li><a href="./components.html#pagination">Pagination</a></li> <li><a href="./components.html#thumbnails">Thumbnails</a></li> <li><a href="./components.html#alerts">Alert messages</a></li> + <li><a href="./components.html#progress">Progress bars</a></li> </ul> </li> <li class="dropdown"> diff --git a/docs/javascript.html b/docs/javascript.html index 4245856119..afe9c329ec 100644 --- a/docs/javascript.html +++ b/docs/javascript.html @@ -73,6 +73,7 @@ <li><a href="./components.html#pagination">Pagination</a></li> <li><a href="./components.html#thumbnails">Thumbnails</a></li> <li><a href="./components.html#alerts">Alert messages</a></li> + <li><a href="./components.html#progress">Progress bars</a></li> </ul> </li> <li class="dropdown active"> diff --git a/docs/less.html b/docs/less.html index 5b956f533b..f3bfa30594 100644 --- a/docs/less.html +++ b/docs/less.html @@ -72,6 +72,7 @@ <li><a href="./components.html#pagination">Pagination</a></li> <li><a href="./components.html#thumbnails">Thumbnails</a></li> <li><a href="./components.html#alerts">Alert messages</a></li> + <li><a href="./components.html#progress">Progress bars</a></li> </ul> </li> <li class="dropdown"> diff --git a/docs/scaffolding.html b/docs/scaffolding.html index 4617629ae1..b2b4b5647f 100644 --- a/docs/scaffolding.html +++ b/docs/scaffolding.html @@ -72,6 +72,7 @@ <li><a href="./components.html#pagination">Pagination</a></li> <li><a href="./components.html#thumbnails">Thumbnails</a></li> <li><a href="./components.html#alerts">Alert messages</a></li> + <li><a href="./components.html#progress">Progress bars</a></li> </ul> </li> <li class="dropdown"> diff --git a/docs/upgrading.html b/docs/upgrading.html index 423c5be27b..e1b9f204e3 100644 --- a/docs/upgrading.html +++ b/docs/upgrading.html @@ -72,6 +72,7 @@ <li><a href="./components.html#pagination">Pagination</a></li> <li><a href="./components.html#thumbnails">Thumbnails</a></li> <li><a href="./components.html#alerts">Alert messages</a></li> + <li><a href="./components.html#progress">Progress bars</a></li> </ul> </li> <li class="dropdown"> -- GitLab From f587e81b7d72e47b16bf808c721c3dfe45ae1062 Mon Sep 17 00:00:00 2001 From: Mark Otto <markdotto@gmail.com> Date: Sat, 14 Jan 2012 16:18:15 -0800 Subject: [PATCH 281/318] rewrite alert messages to use less code, combine the look of default and block messages, simplify docs --- bootstrap.css | 123 ++++++++++++---------------------------- bootstrap.min.css | 36 ++++++------ docs/components.html | 131 ++++++++++++++++++++----------------------- lib/alerts.less | 126 ++++++++++++++++++----------------------- lib/buttons.less | 8 +-- lib/type.less | 1 - 6 files changed, 172 insertions(+), 253 deletions(-) diff --git a/bootstrap.css b/bootstrap.css index ba51a7d455..556112c52d 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 Jan 13 10:05:29 PST 2012 + * Date: Sat Jan 14 16:13:25 PST 2012 */ html, body { margin: 0; @@ -410,7 +410,6 @@ ol { } li { line-height: 18px; - color: #555555; } ul.unstyled { margin-left: 0; @@ -2374,28 +2373,15 @@ i { margin-bottom: 0; } .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 { +.btn.info:hover { text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25); color: #ffffff; } -.btn.danger, -.alert-message.danger, -.btn.error, -.alert-message.error { +.btn.danger { background-color: #c43c35; background-image: -khtml-gradient(linear, left top, left bottom, from(#ee5f5b), to(#c43c35)); background-image: -moz-linear-gradient(top, #ee5f5b, #c43c35); @@ -2409,7 +2395,7 @@ i { 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); } -.btn.success, .alert-message.success { +.btn.success { background-color: #57a957; background-image: -khtml-gradient(linear, left top, left bottom, from(#62c462), to(#57a957)); background-image: -moz-linear-gradient(top, #62c462, #57a957); @@ -2423,7 +2409,7 @@ i { border-color: #57a957 #57a957 #3d773d; border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25); } -.btn.info, .alert-message.info { +.btn.info { background-color: #339bb9; background-image: -khtml-gradient(linear, left top, left bottom, from(#5bc0de), to(#339bb9)); background-image: -moz-linear-gradient(top, #5bc0de, #339bb9); @@ -2638,95 +2624,60 @@ button.btn::-moz-focus-inner, input[type=submit].btn::-moz-focus-inner { -moz-opacity: 0.75; opacity: 0.75; } -.alert-message { +.alert { position: relative; - padding: 7px 15px; + padding: 8px 35px 8px 14px; margin-bottom: 18px; - color: #333333; text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5); - background-color: #eedc94; - background-image: -khtml-gradient(linear, left top, left bottom, from(#fceec1), to(#eedc94)); - background-image: -moz-linear-gradient(top, #fceec1, #eedc94); - background-image: -ms-linear-gradient(top, #fceec1, #eedc94); - background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #fceec1), color-stop(100%, #eedc94)); - background-image: -webkit-linear-gradient(top, #fceec1, #eedc94); - background-image: -o-linear-gradient(top, #fceec1, #eedc94); - background-image: linear-gradient(top, #fceec1, #eedc94); - background-repeat: repeat-x; - filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#fceec1', endColorstr='#eedc94', GradientType=0); - border-color: #eedc94 #eedc94 #e4c652; - border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25); - border-width: 1px; - border-style: solid; + background-color: #fcf8e3; + border: 1px solid #f3edd2; -webkit-border-radius: 4px; -moz-border-radius: 4px; border-radius: 4px; - -webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.25); - -moz-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.25); - box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.25); } -.alert-message .close { +.alert, .alert-heading { + color: #c09853; +} +.alert > .close { *margin-top: 3px; /* IE7 spacing */ + margin-right: -21px; } -.alert-message h5 { - line-height: 18px; +.success-alert { + background-color: #dff0d8; + border-color: #cfe8c4; } -.alert-message p { - margin-bottom: 0; +.success-alert, .success-alert .alert-heading { + color: #468847; } -.alert-message div { - margin-top: 5px; - margin-bottom: 2px; - line-height: 28px; +.danger-alert, .error-alert { + background-color: #f2dede; + border-color: #e9c7c7; } -.alert-message .btn { - -webkit-box-shadow: 0 1px 0 rgba(255, 255, 255, 0.25); - -moz-box-shadow: 0 1px 0 rgba(255, 255, 255, 0.25); - box-shadow: 0 1px 0 rgba(255, 255, 255, 0.25); +.danger-alert, +.error-alert, +.danger-alert .alert-heading, +.error-alert .alert-heading { + color: #B94A48; } -.alert-message.error, .alert-message.success, .alert-message.info { - text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25); +.info-alert { + background-color: #d9edf7; + border-color: #bfe1f2; } -.alert-message.block-message { - padding: 14px; - background-image: none; - background-color: #fdf5d9; - filter: progid:DXImageTransform.Microsoft.gradient(enabled = false); - border-color: #fceec1; - -webkit-box-shadow: none; - -moz-box-shadow: none; - box-shadow: none; +.info-alert, .info-alert .alert-heading { + color: #3a87ad; } -.alert-message.block-message ul, .alert-message.block-message p { - margin-right: 30px; +.block-alert { + padding-top: 14px; + padding-bottom: 14px; } -.alert-message.block-message ul { +.block-alert > p, .block-alert > ul { margin-bottom: 0; } -.alert-message.block-message li { - color: #333333; -} -.alert-message.block-message .alert-actions { +.block-alert p + p { margin-top: 5px; } -.alert-message.block-message.error, .alert-message.block-message.success, .alert-message.block-message.info { - color: #333333; - text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5); -} -.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; -} .thumbnails { margin-left: -20px; margin-bottom: 0; diff --git a/bootstrap.min.css b/bootstrap.min.css index 8f2f020d1b..09d261081a 100644 --- a/bootstrap.min.css +++ b/bootstrap.min.css @@ -71,7 +71,7 @@ ul,ol{margin:0 0 9px 25px;} ul ul,ul ol,ol ol,ol ul{margin-bottom:0;} ul{list-style:disc;} ol{list-style:decimal;} -li{line-height:18px;color:#555555;} +li{line-height:18px;} ul.unstyled{margin-left:0;list-style:none;} dl{margin-bottom:18px;}dl dt,dl dd{line-height:18px;} dl dt{font-weight:bold;} @@ -438,10 +438,10 @@ i{background-image:url(docs/assets/img/glyphicons-halflings-sprite.png);backgrou .popover .inner{padding:3px;width:280px;overflow:hidden;background-color:#000000;background-color:rgba(0, 0, 0, 0.8);-webkit-border-radius:6px;-moz-border-radius:6px;border-radius:6px;-webkit-box-shadow:0 3px 7px rgba(0, 0, 0, 0.3);-moz-box-shadow:0 3px 7px rgba(0, 0, 0, 0.3);box-shadow:0 3px 7px rgba(0, 0, 0, 0.3);} .popover .title{padding:9px 15px;line-height:1;background-color:#f5f5f5;border-bottom:1px solid #eee;-webkit-border-radius:3px 3px 0 0;-moz-border-radius:3px 3px 0 0;border-radius:3px 3px 0 0;} .popover .content{padding:14px;background-color:#ffffff;-webkit-border-radius:0 0 3px 3px;-moz-border-radius:0 0 3px 3px;border-radius:0 0 3px 3px;-webkit-background-clip:padding-box;-moz-background-clip:padding-box;background-clip:padding-box;}.popover .content p,.popover .content ul,.popover .content ol{margin-bottom:0;} -.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{text-shadow:0 -1px 0 rgba(0, 0, 0, 0.25);color:#ffffff;} -.btn.danger,.alert-message.danger,.btn.error,.alert-message.error{background-color:#c43c35;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);background-repeat:repeat-x;filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ee5f5b', endColorstr='#c43c35', GradientType=0);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);} -.btn.success,.alert-message.success{background-color:#57a957;background-image:-khtml-gradient(linear, left top, left bottom, from(#62c462), to(#57a957));background-image:-moz-linear-gradient(top, #62c462, #57a957);background-image:-ms-linear-gradient(top, #62c462, #57a957);background-image:-webkit-gradient(linear, left top, left bottom, color-stop(0%, #62c462), color-stop(100%, #57a957));background-image:-webkit-linear-gradient(top, #62c462, #57a957);background-image:-o-linear-gradient(top, #62c462, #57a957);background-image:linear-gradient(top, #62c462, #57a957);background-repeat:repeat-x;filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#62c462', endColorstr='#57a957', GradientType=0);border-color:#57a957 #57a957 #3d773d;border-color:rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);} -.btn.info,.alert-message.info{background-color:#339bb9;background-image:-khtml-gradient(linear, left top, left bottom, from(#5bc0de), to(#339bb9));background-image:-moz-linear-gradient(top, #5bc0de, #339bb9);background-image:-ms-linear-gradient(top, #5bc0de, #339bb9);background-image:-webkit-gradient(linear, left top, left bottom, color-stop(0%, #5bc0de), color-stop(100%, #339bb9));background-image:-webkit-linear-gradient(top, #5bc0de, #339bb9);background-image:-o-linear-gradient(top, #5bc0de, #339bb9);background-image:linear-gradient(top, #5bc0de, #339bb9);background-repeat:repeat-x;filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#5bc0de', endColorstr='#339bb9', GradientType=0);border-color:#339bb9 #339bb9 #22697d;border-color:rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);} +.btn.danger,.btn.danger:hover,.btn.success,.btn.success:hover,.btn.info,.btn.info:hover{text-shadow:0 -1px 0 rgba(0, 0, 0, 0.25);color:#ffffff;} +.btn.danger{background-color:#c43c35;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);background-repeat:repeat-x;filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ee5f5b', endColorstr='#c43c35', GradientType=0);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);} +.btn.success{background-color:#57a957;background-image:-khtml-gradient(linear, left top, left bottom, from(#62c462), to(#57a957));background-image:-moz-linear-gradient(top, #62c462, #57a957);background-image:-ms-linear-gradient(top, #62c462, #57a957);background-image:-webkit-gradient(linear, left top, left bottom, color-stop(0%, #62c462), color-stop(100%, #57a957));background-image:-webkit-linear-gradient(top, #62c462, #57a957);background-image:-o-linear-gradient(top, #62c462, #57a957);background-image:linear-gradient(top, #62c462, #57a957);background-repeat:repeat-x;filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#62c462', endColorstr='#57a957', GradientType=0);border-color:#57a957 #57a957 #3d773d;border-color:rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);} +.btn.info{background-color:#339bb9;background-image:-khtml-gradient(linear, left top, left bottom, from(#5bc0de), to(#339bb9));background-image:-moz-linear-gradient(top, #5bc0de, #339bb9);background-image:-ms-linear-gradient(top, #5bc0de, #339bb9);background-image:-webkit-gradient(linear, left top, left bottom, color-stop(0%, #5bc0de), color-stop(100%, #339bb9));background-image:-webkit-linear-gradient(top, #5bc0de, #339bb9);background-image:-o-linear-gradient(top, #5bc0de, #339bb9);background-image:linear-gradient(top, #5bc0de, #339bb9);background-repeat:repeat-x;filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#5bc0de', endColorstr='#339bb9', GradientType=0);border-color:#339bb9 #339bb9 #22697d;border-color:rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);} .btn{display:inline-block;padding:5px 10px 6px;font-size:13px;line-height:normal;color:#333;text-shadow:0 1px 1px rgba(255, 255, 255, 0.75);background-color:#e6e6e6;background-image:-webkit-gradient(linear, 0 0, 0 100%, from(#ffffff), color-stop(25%, #ffffff), to(#e6e6e6));background-image:-webkit-linear-gradient(#ffffff, #ffffff 25%, #e6e6e6);background-image:-moz-linear-gradient(top, #ffffff, #ffffff 25%, #e6e6e6);background-image:-ms-linear-gradient(#ffffff, #ffffff 25%, #e6e6e6);background-image:-o-linear-gradient(#ffffff, #ffffff 25%, #e6e6e6);background-image:linear-gradient(#ffffff, #ffffff 25%, #e6e6e6);background-repeat:no-repeat;filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#e6e6e6', GradientType=0);border:1px solid #ccc;border-bottom-color:#bbb;-webkit-border-radius:4px;-moz-border-radius:4px;border-radius:4px;-webkit-box-shadow:inset 0 1px 0 rgba(255, 255, 255, 0.2),0 1px 2px rgba(0, 0, 0, 0.05);-moz-box-shadow:inset 0 1px 0 rgba(255, 255, 255, 0.2),0 1px 2px rgba(0, 0, 0, 0.05);box-shadow:inset 0 1px 0 rgba(255, 255, 255, 0.2),0 1px 2px rgba(0, 0, 0, 0.05);cursor:pointer;-webkit-transition:0.1s linear all;-moz-transition:0.1s linear all;-ms-transition:0.1s linear all;-o-transition:0.1s linear all;transition:0.1s linear all;}.btn:hover{color:#333333;text-decoration:none;background-position:0 -15px;} .btn:focus{outline:1px dotted #666;} .btn.primary{color:#ffffff;text-shadow:0 -1px 0 rgba(0, 0, 0, 0.25);background-color:#0064cd;background-image:-khtml-gradient(linear, left top, left bottom, from(#049cdb), to(#0064cd));background-image:-moz-linear-gradient(top, #049cdb, #0064cd);background-image:-ms-linear-gradient(top, #049cdb, #0064cd);background-image:-webkit-gradient(linear, left top, left bottom, color-stop(0%, #049cdb), color-stop(100%, #0064cd));background-image:-webkit-linear-gradient(top, #049cdb, #0064cd);background-image:-o-linear-gradient(top, #049cdb, #0064cd);background-image:linear-gradient(top, #049cdb, #0064cd);background-repeat:repeat-x;filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#049cdb', endColorstr='#0064cd', GradientType=0);border-color:#0064cd #0064cd #003f81;border-color:rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);} @@ -467,20 +467,18 @@ button.btn::-moz-focus-inner,input[type=submit].btn::-moz-focus-inner{padding:0; .btn-group.open .dropdown-toggle{background-image:none;-webkit-box-shadow:inset 0 1px 6px rgba(0, 0, 0, 0.15),0 1px 2px rgba(0, 0, 0, 0.05);-moz-box-shadow:inset 0 1px 6px rgba(0, 0, 0, 0.15),0 1px 2px rgba(0, 0, 0, 0.05);box-shadow:inset 0 1px 6px rgba(0, 0, 0, 0.15),0 1px 2px rgba(0, 0, 0, 0.05);} .btn .caret{margin-top:6px;margin-left:0;} .primary .caret,.danger .caret,.info .caret,.success .caret{border-top-color:#fff;filter:alpha(opacity=75);-moz-opacity:0.75;opacity:0.75;} -.alert-message{position:relative;padding:7px 15px;margin-bottom:18px;color:#333333;text-shadow:0 1px 0 rgba(255, 255, 255, 0.5);background-color:#eedc94;background-image:-khtml-gradient(linear, left top, left bottom, from(#fceec1), to(#eedc94));background-image:-moz-linear-gradient(top, #fceec1, #eedc94);background-image:-ms-linear-gradient(top, #fceec1, #eedc94);background-image:-webkit-gradient(linear, left top, left bottom, color-stop(0%, #fceec1), color-stop(100%, #eedc94));background-image:-webkit-linear-gradient(top, #fceec1, #eedc94);background-image:-o-linear-gradient(top, #fceec1, #eedc94);background-image:linear-gradient(top, #fceec1, #eedc94);background-repeat:repeat-x;filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#fceec1', endColorstr='#eedc94', GradientType=0);border-color:#eedc94 #eedc94 #e4c652;border-color:rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);border-width:1px;border-style:solid;-webkit-border-radius:4px;-moz-border-radius:4px;border-radius:4px;-webkit-box-shadow:inset 0 1px 0 rgba(255, 255, 255, 0.25);-moz-box-shadow:inset 0 1px 0 rgba(255, 255, 255, 0.25);box-shadow:inset 0 1px 0 rgba(255, 255, 255, 0.25);}.alert-message .close{*margin-top:3px;} -.alert-message h5{line-height:18px;} -.alert-message p{margin-bottom:0;} -.alert-message div{margin-top:5px;margin-bottom:2px;line-height:28px;} -.alert-message .btn{-webkit-box-shadow:0 1px 0 rgba(255, 255, 255, 0.25);-moz-box-shadow:0 1px 0 rgba(255, 255, 255, 0.25);box-shadow:0 1px 0 rgba(255, 255, 255, 0.25);} -.alert-message.error,.alert-message.success,.alert-message.info{text-shadow:0 -1px 0 rgba(0, 0, 0, 0.25);} -.alert-message.block-message{padding:14px;background-image:none;background-color:#fdf5d9;filter:progid:DXImageTransform.Microsoft.gradient(enabled = false);border-color:#fceec1;-webkit-box-shadow:none;-moz-box-shadow:none;box-shadow:none;}.alert-message.block-message ul,.alert-message.block-message p{margin-right:30px;} -.alert-message.block-message ul{margin-bottom:0;} -.alert-message.block-message li{color:#333333;} -.alert-message.block-message .alert-actions{margin-top:5px;} -.alert-message.block-message.error,.alert-message.block-message.success,.alert-message.block-message.info{color:#333333;text-shadow:0 1px 0 rgba(255, 255, 255, 0.5);} -.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;} +.alert{position:relative;padding:8px 35px 8px 14px;margin-bottom:18px;text-shadow:0 1px 0 rgba(255, 255, 255, 0.5);background-color:#fcf8e3;border:1px solid #f3edd2;-webkit-border-radius:4px;-moz-border-radius:4px;border-radius:4px;} +.alert,.alert-heading{color:#c09853;} +.alert>.close{*margin-top:3px;margin-right:-21px;} +.success-alert{background-color:#dff0d8;border-color:#cfe8c4;} +.success-alert,.success-alert .alert-heading{color:#468847;} +.danger-alert,.error-alert{background-color:#f2dede;border-color:#e9c7c7;} +.danger-alert,.error-alert,.danger-alert .alert-heading,.error-alert .alert-heading{color:#B94A48;} +.info-alert{background-color:#d9edf7;border-color:#bfe1f2;} +.info-alert,.info-alert .alert-heading{color:#3a87ad;} +.block-alert{padding-top:14px;padding-bottom:14px;} +.block-alert>p,.block-alert>ul{margin-bottom:0;} +.block-alert p+p{margin-top:5px;} .thumbnails{margin-left:-20px;margin-bottom:0;list-style:none;zoom:1;}.thumbnails:before,.thumbnails:after{display:table;*display:inline;content:"";zoom:1;} .thumbnails:after{clear:both;} .thumbnails>li{float:left;margin:0 0 20px 20px;} diff --git a/docs/components.html b/docs/components.html index fa3dc5a20b..9fc987508f 100644 --- a/docs/components.html +++ b/docs/components.html @@ -1058,101 +1058,90 @@ ================================================== --> <section id="alerts"> <div class="page-header"> - <h1>Alerts & Errors <small>Styles for success, warning, and error messages or alerts</small></h1> + <h1>Alerts <small>Styles for success, warning, and error messages</small></h1> </div> - <!-- Basic alert messages --> + + <h2>Lightweight defaults</h2> <div class="row"> - <div class="span3"> - <h2>Basic alerts</h2> - <p><code>.alert-message</code></p> - <p>One-line messages for highlighting the failure, possible failure, or success of an action. Particularly useful for forms.</p> - <p><a class="btn js-btn" href="./javascript.html#alerts">Get the javascript »</a></p> + <div class="span4"> + <h3>Rewritten base class</h3> + <p>With Bootstrap 2, we've simplified the base class: <code>.alert</code> instead of <code>.alert-message</code>. We've also reduced the minimum required markup—no <code><p></code> is required by default, just the outter <code><div></code>.</p> + <h3>Single alert message</h3> + <p>For a more durable component with less code, we've removed the differentiating look for block alerts, messages that com with more padding and typically more text. The class also has changed to <code>.block-alert</code>.</p> + <hr> + <h3>Goes great with javascript</h3> + <p>Bootstrap comes with a great jQuery plugin that supports alert messages, making dismissing them quick and easy.</p> + <p><a class="btn js-btn" href="./javascript.html#alerts">Get the plugin »</a></p> </div> - <div class="span9"> - <div class="alert-message warning"> - <a class="close">×</a> - <p><strong>Holy guacamole!</strong> Best check yo self, you’re not looking too good.</p> - </div> - <div class="alert-message error"> - <a class="close">×</a> - <p><strong>Oh snap!</strong> Change this and that and try again.</p> - </div> - <div class="alert-message success"> + <div class="span8"> + <h3>Example alerts</h3> + <p>Wrap your message and an optional close icon in a div with simple class.</p> + <div class="alert"> <a class="close">×</a> - <p><strong>Well done!</strong> You successfully read this alert message.</p> + <strong>Warning!</strong> Best check yo self, you’re not looking too good. </div> - <div class="alert-message info"> +<pre class="prettyprint linenums"> +<div class="alert"> + <a class="close">×</a> + <strong>Warning!</strong> Best check yo self, you’re not looking too good. +</div> +</pre> + <p>Easily extend the standard alert message with two optional classes: <code>.block-alert</code> for more padding and text controls and <code>.alert-heading</code> for a matching heading.</p> + <div class="alert block-alert"> <a class="close">×</a> - <p><strong>Heads up!</strong> This is an alert that needs your attention, but it’s not a huge priority just yet.</p> + <h4 class="alert-heading">Warning!</h4> + <p>Best check yo self, you’re not looking too good. Nulla vitae elit libero, a pharetra augue. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.</p> </div> - - <h4>Example code</h4> <pre class="prettyprint linenums"> -<div class="alert-message warning"> +<div class="alert block-alert"> <a class="close">×</a> - <p><strong>Holy guacamole!</strong> Best check yo self, you’re not looking too good.</p> + <h4 class="alert-heading">Warning!</h4> + Best check yo self, you’re not... </div> </pre> </div> - </div><!-- /row --> - - <br> + </div> - <!-- Block messages --> + <h2>Contextual alternatives <small>Add optional classes to change an alert's connotation</small></h2> <div class="row"> - <div class="span3"> - <h2>Block messages</h2> - <p><code><div class="alert-message block-message"></code></p> - <p>For messages that require a bit of explanation, we have paragraph style alerts. These are perfect for bubbling up longer error messages, warning a user of a pending action, or just presenting information for more emphasis on the page.</p> - <p><a class="btn js-btn" href="./javascript.html#alerts">Get the javascript »</a></p> - </div> - <div class="span9"> - <div class="alert-message block-message warning"> - <a class="close">×</a> - <p><strong>Holy guacamole! This is a warning!</strong> Best check yo self, you’re not looking too good. Nulla vitae elit libero, a pharetra augue. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.</p> - <div class="alert-actions"> - <a class="btn small" href="#">Take this action</a> <a class="btn small" href="#">Or do this</a> - </div> - </div> - <div class="alert-message block-message error"> + <div class="span4"> + <h3>Error or danger</h3> + <div class="alert error-alert"> <a class="close">×</a> - <p><strong>Oh snap! You got an error!</strong> Change this and that and try again.</p> - <ul> - <li>Duis mollis est non commodo luctus</li> - <li>Nisi erat porttitor ligula</li> - <li>Eget lacinia odio sem nec elit</li> - </ul> - <div class="alert-actions"> - <a class="btn small" href="#">Take this action</a> <a class="btn small" href="#">Or do this</a> - </div> + <strong>Oh snap!</strong> Change a few things up and try submitting again. </div> - <div class="alert-message block-message success"> +<pre class="prettyprint linenums"> +<div class="alert error-alert"> + ... +</div> +</pre> + </div> + <div class="span4"> + <h3>Success</h3> + <div class="alert success-alert"> <a class="close">×</a> - <p><strong>Well done!</strong> You successfully read this alert message. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Maecenas faucibus mollis interdum.</p> - <div class="alert-actions"> - <a class="btn small" href="#">Take this action</a> <a class="btn small" href="#">Or do this</a> - </div> + <strong>Well done!</strong> You successfully read this important alert message. </div> - <div class="alert-message block-message info"> +<pre class="prettyprint linenums"> +<div class="alert success-alert"> + ... +</div> +</pre> + </div> + <div class="span4"> + <h3>Information</h3> + <div class="alert info-alert"> <a class="close">×</a> - <p><strong>Heads up!</strong> This is an alert that needs your attention, but it’s not a huge priority just yet.</p> - <div class="alert-actions"> - <a class="btn small" href="#">Take this action</a> <a class="btn small" href="#">Or do this</a> - </div> + <strong>Heads up!</strong> This alert needs your attention, but it’s not super important. </div> - - <h4>Example code</h4> <pre class="prettyprint linenums"> -<div class="alert-message block-message warning"> - <a class="close">×</a> - <p><strong>Holy guacamole! This is a warning!</strong> Best check yo self, you’re not looking too good. Nulla vitae elit libero, a pharetra augue. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.</p> - <div class="alert-actions"> - <a class="btn small" href="#">Take this action</a> <a class="btn small" href="#">Or do this</a> - </div> +<div class="alert info-alert"> + ... </div> </pre> </div> - </div><!-- /row --> + </div> + </section> diff --git a/lib/alerts.less b/lib/alerts.less index bb0bd5d99e..d1cd8addd5 100644 --- a/lib/alerts.less +++ b/lib/alerts.less @@ -2,82 +2,68 @@ // ------------ // Base alert styles -.alert-message { +.alert { position: relative; - padding: 7px 15px; + padding: 8px 35px 8px 14px; margin-bottom: @baseLineHeight; - color: @grayDark; text-shadow: 0 1px 0 rgba(255,255,255,.5); - .gradientBar(#fceec1, #eedc94); // warning by default - border-width: 1px; - border-style: solid; + background-color: #fcf8e3; + border: 1px solid #f3edd2; .border-radius(4px); - .box-shadow(inset 0 1px 0 rgba(255,255,255,.25)); +} +.alert, +.alert-heading { + color: #c09853; +} - // Adjust close icon - .close { - *margin-top: 3px; /* IE7 spacing */ - } +// Adjust close link position +.alert > .close { + *margin-top: 3px; /* IE7 spacing */ + margin-right: -21px; +} - // Remove extra margin from content - h5 { - line-height: @baseLineHeight; - } - p { - margin-bottom: 0; - } - div { - margin-top: 5px; - margin-bottom: 2px; - line-height: 28px; - } - .btn { - // Provide actions with buttons - .box-shadow(0 1px 0 rgba(255,255,255,.25)); - } +// Alternate styles +// ---------------- - &.error, - &.success, - &.info { - text-shadow: 0 -1px 0 rgba(0,0,0,.25); - } +.success-alert { + background-color: #dff0d8; + border-color: #cfe8c4; +} +.success-alert, +.success-alert .alert-heading { + color: #468847; +} +.danger-alert, +.error-alert { + background-color: #f2dede; + border-color: #e9c7c7; +} +.danger-alert, +.error-alert, +.danger-alert .alert-heading, +.error-alert .alert-heading { + color: #B94A48; +} +.info-alert { + background-color: #d9edf7; + border-color: #bfe1f2; +} +.info-alert, +.info-alert .alert-heading { + color: #3a87ad; +} - &.block-message { - padding: 14px; - background-image: none; - background-color: lighten(#fceec1, 5%); - .reset-filter(); // undo gradient for IE9 - border-color: #fceec1; - .box-shadow(none); - ul, p { - margin-right: 30px; - } - ul { - margin-bottom: 0; - } - li { - color: @grayDark; - } - .alert-actions { - margin-top: 5px; - } - &.error, - &.success, - &.info { - color: @grayDark; - text-shadow: 0 1px 0 rgba(255,255,255,.5); - } - &.error { - background-color: lighten(#f56a66, 25%); - border-color: lighten(#f56a66, 20%); - } - &.success { - background-color: lighten(#62c462, 30%); - border-color: lighten(#62c462, 25%); - } - &.info { - background-color: lighten(#6bd0ee, 25%); - border-color: lighten(#6bd0ee, 20%); - } - } + +// Block alerts +// ------------------------ +.block-alert { + padding-top: 14px; + padding-bottom: 14px; +} +.block-alert > p, +.block-alert > ul { + margin-bottom: 0; } +.block-alert p + p { + margin-top: 5px; +} \ No newline at end of file diff --git a/lib/buttons.less b/lib/buttons.less index 140d1112ce..a7492f9fd0 100644 --- a/lib/buttons.less +++ b/lib/buttons.less @@ -2,13 +2,10 @@ // ------------- // Shared colors for buttons and alerts -.btn, -.alert-message { +.btn { // Set text color &.danger, &.danger:hover, - &.error, - &.error:hover, &.success, &.success:hover, &.info, @@ -17,8 +14,7 @@ color: @white } // Danger and error appear as red - &.danger, - &.error { + &.danger { .gradientBar(#ee5f5b, #c43c35); } // Success appears as green diff --git a/lib/type.less b/lib/type.less index f7d5077cf5..ab7409ce34 100644 --- a/lib/type.less +++ b/lib/type.less @@ -90,7 +90,6 @@ ol { } li { line-height: @baseLineHeight; - color: @gray; } ul.unstyled { margin-left: 0; -- GitLab From ceb6836e03b03c757578c9e5614f535d9be2ad7f Mon Sep 17 00:00:00 2001 From: Mark Otto <markdotto@gmail.com> Date: Sat, 14 Jan 2012 16:24:23 -0800 Subject: [PATCH 282/318] move up alert message close icon --- bootstrap.css | 4 ++-- bootstrap.min.css | 2 +- lib/close.less | 2 +- 3 files changed, 4 insertions(+), 4 deletions(-) diff --git a/bootstrap.css b/bootstrap.css index 556112c52d..c5d011b7e8 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: Sat Jan 14 16:13:25 PST 2012 + * Date: Sat Jan 14 16:23:58 PST 2012 */ html, body { margin: 0; @@ -1552,7 +1552,7 @@ i { float: right; font-size: 20px; font-weight: bold; - line-height: 13.5px; + line-height: 12px; color: #000000; text-shadow: 0 1px 0 #ffffff; filter: alpha(opacity=20); diff --git a/bootstrap.min.css b/bootstrap.min.css index 09d261081a..637c31ad89 100644 --- a/bootstrap.min.css +++ b/bootstrap.min.css @@ -310,7 +310,7 @@ i{background-image:url(docs/assets/img/glyphicons-halflings-sprite.png);backgrou .well{min-height:20px;padding:19px;margin-bottom:20px;background-color:#f5f5f5;border:1px solid #eee;border:1px solid rgba(0, 0, 0, 0.05);-webkit-border-radius:4px;-moz-border-radius:4px;border-radius:4px;-webkit-box-shadow:inset 0 1px 1px rgba(0, 0, 0, 0.05);-moz-box-shadow:inset 0 1px 1px rgba(0, 0, 0, 0.05);box-shadow:inset 0 1px 1px rgba(0, 0, 0, 0.05);}.well blockquote{border-color:#ddd;border-color:rgba(0, 0, 0, 0.15);} .fade{-webkit-transition:opacity 0.15s linear;-moz-transition:opacity 0.15s linear;-ms-transition:opacity 0.15s linear;-o-transition:opacity 0.15s linear;transition:opacity 0.15s linear;opacity:0;}.fade.in{opacity:1;} .collapse{-webkit-transition:height 0.35s ease;-moz-transition:height 0.35s ease;-ms-transition:height 0.35s ease;-o-transition:height 0.35s ease;transition:height 0.35s ease;position:relative;overflow:hidden;height:0;}.collapse.in{height:auto;} -.close{float:right;font-size:20px;font-weight:bold;line-height:13.5px;color:#000000;text-shadow:0 1px 0 #ffffff;filter:alpha(opacity=20);-moz-opacity:0.2;opacity:0.2;}.close:hover{color:#000000;text-decoration:none;filter:alpha(opacity=40);-moz-opacity:0.4;opacity:0.4;cursor:pointer;} +.close{float:right;font-size:20px;font-weight:bold;line-height:12px;color:#000000;text-shadow:0 1px 0 #ffffff;filter:alpha(opacity=20);-moz-opacity:0.2;opacity:0.2;}.close:hover{color:#000000;text-decoration:none;filter:alpha(opacity=40);-moz-opacity:0.4;opacity:0.4;cursor:pointer;} .navbar{overflow:visible;} .navbar-inner{background-color:#222222;background-color:#222222;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);background-repeat:repeat-x;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);} .navbar .brand:hover{color:#ffffff;text-decoration:none;} diff --git a/lib/close.less b/lib/close.less index 1210ec4638..f2c5157c97 100644 --- a/lib/close.less +++ b/lib/close.less @@ -5,7 +5,7 @@ float: right; font-size: 20px; font-weight: bold; - line-height: @baseLineHeight * .75; + line-height: 12px; color: @black; text-shadow: 0 1px 0 rgba(255,255,255,1); .opacity(20); -- GitLab From a40b2a636c908859c2bb7434f0c050be2dc7e70e Mon Sep 17 00:00:00 2001 From: Mark Otto <markdotto@gmail.com> Date: Sat, 14 Jan 2012 16:38:40 -0800 Subject: [PATCH 283/318] make inline and search form labels inline-block --- bootstrap.css | 5 ++++- bootstrap.min.css | 1 + lib/forms.less | 4 ++++ 3 files changed, 9 insertions(+), 1 deletion(-) diff --git a/bootstrap.css b/bootstrap.css index c5d011b7e8..8d7b08a35d 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: Sat Jan 14 16:23:58 PST 2012 + * Date: Sat Jan 14 16:38:32 PST 2012 */ html, body { margin: 0; @@ -957,6 +957,9 @@ input::-webkit-input-placeholder { display: inline-block; margin-bottom: 0; } +.search-form label, .inline-form label { + display: inline-block; +} .control-group { margin-bottom: 18px; } diff --git a/bootstrap.min.css b/bootstrap.min.css index 637c31ad89..5341d35950 100644 --- a/bootstrap.min.css +++ b/bootstrap.min.css @@ -170,6 +170,7 @@ input::-webkit-input-placeholder{color:#999999;} .input-append .add-on{margin-right:0;margin-left:-1px;-webkit-border-radius:0 3px 3px 0;-moz-border-radius:0 3px 3px 0;border-radius:0 3px 3px 0;} .search-query{padding-left:14px;padding-right:14px;margin-bottom:0;-webkit-border-radius:14px;-moz-border-radius:14px;border-radius:14px;} .search-form input,.inline-form input,.horizontal-form input,.search-form textarea,.inline-form textarea,.horizontal-form textarea,.search-form select,.inline-form select,.horizontal-form select,.search-form .uneditable-input,.inline-form .uneditable-input,.horizontal-form .uneditable-input{display:inline-block;margin-bottom:0;} +.search-form label,.inline-form label{display:inline-block;} .control-group{margin-bottom:18px;} .control-group>label{font-weight:bold;} .horizontal-form .control-group>label{float:left;width:130px;padding-top:5px;text-align:right;} diff --git a/lib/forms.less b/lib/forms.less index 5053310448..ed97d8dd09 100644 --- a/lib/forms.less +++ b/lib/forms.less @@ -452,6 +452,10 @@ input::-webkit-input-placeholder { margin-bottom: 0; } } +.search-form label, +.inline-form label { + display: inline-block; +} // Margin to space out fieldsets .control-group { -- GitLab From 028726a9a3e2acd56195dacd903680db5d934b8e Mon Sep 17 00:00:00 2001 From: Mark Otto <markdotto@gmail.com> Date: Sat, 14 Jan 2012 16:45:01 -0800 Subject: [PATCH 284/318] add user-select mixin --- bootstrap.css | 2 +- lib/mixins.less | 12 ++++++++++-- 2 files changed, 11 insertions(+), 3 deletions(-) diff --git a/bootstrap.css b/bootstrap.css index 8d7b08a35d..1fc0e9edd0 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: Sat Jan 14 16:38:32 PST 2012 + * Date: Sat Jan 14 16:44:52 PST 2012 */ html, body { margin: 0; diff --git a/lib/mixins.less b/lib/mixins.less index 50986c68cd..67e0c27de2 100644 --- a/lib/mixins.less +++ b/lib/mixins.less @@ -147,8 +147,7 @@ transition: @transition; } -// Transform for scale and rotate -// translate, rotate, scale -- need to finalize +// Transformations .rotate(@degrees: 5deg) { -webkit-transform: rotate(@degrees); -moz-transform: rotate(@degrees); @@ -171,6 +170,15 @@ transform: translate(@x, @y); } +// User select +// For selecting text on the page +.user-select(@select) { + -webkit-user-select: @select; + -moz-user-select: @select; + -o-user-select: @select; + user-select: @select; +} + // Background clipping // Heads up: FF 3.6 and under need padding instead of padding-box .background-clip(@clip) { -- GitLab From 55ea574f8a56534b1313b5f2d85e7ee22565ea27 Mon Sep 17 00:00:00 2001 From: Mark Otto <markdotto@gmail.com> Date: Sat, 14 Jan 2012 16:50:36 -0800 Subject: [PATCH 285/318] update preventing double border line for bordered tables by account for th elements in tr elements --- bootstrap.css | 4 ++-- bootstrap.min.css | 2 +- lib/tables.less | 1 + 3 files changed, 4 insertions(+), 3 deletions(-) diff --git a/bootstrap.css b/bootstrap.css index 1fc0e9edd0..dd0c028b8e 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: Sat Jan 14 16:44:52 PST 2012 + * Date: Sat Jan 14 16:50:17 PST 2012 */ html, body { margin: 0; @@ -1017,7 +1017,7 @@ tbody + tbody { .bordered-table td + th { border-left: 1px solid #ddd; } -.bordered-table thead:first-child tr:first-child th, .bordered-table tbody:first-child tr:first-child td { +.bordered-table thead:first-child tr:first-child th, .bordered-table tbody:first-child tr:first-child th, .bordered-table tbody:first-child tr:first-child td { border-top: 0; } .bordered-table thead:first-child tr:first-child th:first-child, .bordered-table tbody:first-child tr:first-child td:first-child { diff --git a/bootstrap.min.css b/bootstrap.min.css index 5341d35950..c5c0c664ef 100644 --- a/bootstrap.min.css +++ b/bootstrap.min.css @@ -184,7 +184,7 @@ thead:first-child tr th,thead:first-child tr td{border-top:0;} tbody+tbody{border-top:2px solid #ddd;} .condensed-table th,.condensed-table td{padding:4px 5px;} .bordered-table{border:1px solid #ddd;border-collapse:separate;-webkit-border-radius:4px;-moz-border-radius:4px;border-radius:4px;}.bordered-table th+th,.bordered-table td+td,.bordered-table th+td,.bordered-table td+th{border-left:1px solid #ddd;} -.bordered-table thead:first-child tr:first-child th,.bordered-table tbody:first-child tr:first-child td{border-top:0;} +.bordered-table thead:first-child tr:first-child th,.bordered-table tbody:first-child tr:first-child th,.bordered-table tbody:first-child tr:first-child td{border-top:0;} .bordered-table thead:first-child tr:first-child th:first-child,.bordered-table tbody:first-child tr:first-child td:first-child{-webkit-border-radius:4px 0 0 0;-moz-border-radius:4px 0 0 0;border-radius:4px 0 0 0;} .bordered-table thead:first-child tr:first-child th:last-child,.bordered-table tbody:first-child tr:first-child td:last-child{-webkit-border-radius:0 4px 0 0;-moz-border-radius:0 4px 0 0;border-radius:0 4px 0 0;} .bordered-table thead:last-child tr:last-child th:first-child,.bordered-table tbody:last-child tr:last-child td:first-child{-webkit-border-radius:0 0 0 4px;-moz-border-radius:0 0 0 4px;border-radius:0 0 0 4px;} diff --git a/lib/tables.less b/lib/tables.less index 8b69f5d7f9..1d044ec7c6 100644 --- a/lib/tables.less +++ b/lib/tables.less @@ -65,6 +65,7 @@ tbody + tbody { } // Prevent a double border thead:first-child tr:first-child th, + tbody:first-child tr:first-child th, tbody:first-child tr:first-child td { border-top: 0; } -- GitLab From 74c0fc17c826d3a16c1b3e45b71138c048f7d630 Mon Sep 17 00:00:00 2001 From: Mark Otto <markdotto@gmail.com> Date: Sat, 14 Jan 2012 16:56:47 -0800 Subject: [PATCH 286/318] fix duplicate icons --- bootstrap.css | 4 ++-- bootstrap.min.css | 2 +- docs/base-css.html | 2 +- lib/sprites.less | 2 +- 4 files changed, 5 insertions(+), 5 deletions(-) diff --git a/bootstrap.css b/bootstrap.css index dd0c028b8e..6bfb8d2da5 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: Sat Jan 14 16:50:17 PST 2012 + * Date: Sat Jan 14 16:56:39 PST 2012 */ html, body { margin: 0; @@ -1183,7 +1183,7 @@ i { .th { background-position: -240px 0; } -.th-lines { +.th-list { background-position: -264px 0; } .ok { diff --git a/bootstrap.min.css b/bootstrap.min.css index c5c0c664ef..ad9c183370 100644 --- a/bootstrap.min.css +++ b/bootstrap.min.css @@ -219,7 +219,7 @@ i{background-image:url(docs/assets/img/glyphicons-halflings-sprite.png);backgrou .film{background-position:-192px 0;} .th-large{background-position:-216px 0;} .th{background-position:-240px 0;} -.th-lines{background-position:-264px 0;} +.th-list{background-position:-264px 0;} .ok{background-position:-288px 0;} .remove{background-position:-312px 0;} .zoom-in{background-position:-336px 0;} diff --git a/docs/base-css.html b/docs/base-css.html index 79bbaa7589..c851c84e92 100644 --- a/docs/base-css.html +++ b/docs/base-css.html @@ -1439,7 +1439,7 @@ <i class="stop"></i> <i class="forward"></i> <i class="fast-forward"></i> - <i class="step-foward"></i> + <i class="step-forward"></i> <i class="eject"></i> <i class="chevron-left"></i> <i class="chevron-right"></i> diff --git a/lib/sprites.less b/lib/sprites.less index 8b5bcd5a5f..aec08a5a27 100644 --- a/lib/sprites.less +++ b/lib/sprites.less @@ -32,7 +32,7 @@ i { .film { background-position: -192px 0; } .th-large { background-position: -216px 0; } .th { background-position: -240px 0; } -.th-lines { background-position: -264px 0; } +.th-list { background-position: -264px 0; } .ok { background-position: -288px 0; } .remove { background-position: -312px 0; } .zoom-in { background-position: -336px 0; } -- GitLab From 2c3365f99ef81e53d90593c45d10ebeb3426dea9 Mon Sep 17 00:00:00 2001 From: Mark Otto <markdotto@gmail.com> Date: Sat, 14 Jan 2012 17:16:46 -0800 Subject: [PATCH 287/318] allow btn-groups to work in navbars --- bootstrap.css | 9 ++++++--- bootstrap.min.css | 5 +++-- docs/index.html | 13 ++++++++++++- lib/navbar.less | 10 +++++++--- 4 files changed, 28 insertions(+), 9 deletions(-) diff --git a/bootstrap.css b/bootstrap.css index 6bfb8d2da5..da68a66a88 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: Sat Jan 14 16:56:39 PST 2012 + * Date: Sat Jan 14 17:11:53 PST 2012 */ html, body { margin: 0; @@ -1611,9 +1611,12 @@ i { color: #ffffff; background-color: transparent; } -.navbar .btn { +.navbar .btn, .navbar .btn-group { margin-top: 5px; } +.navbar .btn-group .btn { + margin-top: 0; +} .navbar-form { margin-bottom: 0; } @@ -1758,7 +1761,7 @@ i { top: -6px; left: 10px; } -.navbar .dropdown-toggle .caret, .navbar .open.dropdown .caret { +.navbar .nav .dropdown-toggle .caret, .navbar .nav .open.dropdown .caret { border-top-color: #fff; } .navbar .nav .active .caret { diff --git a/bootstrap.min.css b/bootstrap.min.css index ad9c183370..0ed8fe1767 100644 --- a/bootstrap.min.css +++ b/bootstrap.min.css @@ -317,7 +317,8 @@ i{background-image:url(docs/assets/img/glyphicons-halflings-sprite.png);backgrou .navbar .brand:hover{color:#ffffff;text-decoration:none;} .navbar .brand{float:left;display:block;padding:8px 20px 12px;margin-left:-20px;font-size:20px;font-weight:200;line-height:1;color:#ffffff;} .navbar p{margin:0;line-height:40px;}.navbar p a:hover{color:#ffffff;background-color:transparent;} -.navbar .btn{margin-top:5px;} +.navbar .btn,.navbar .btn-group{margin-top:5px;} +.navbar .btn-group .btn{margin-top:0;} .navbar-form{margin-bottom:0;}.navbar-form input,.navbar-form select{display:inline-block;margin-bottom:0;} .navbar-search{position:relative;float:left;margin-top:6px;margin-bottom:0;}.navbar-search .search-query{padding:4px 9px;font-family:"Helvetica Neue",Helvetica,Arial,sans-serif;font-size:13px;font-weight:normal;line-height:1;color:#ffffff;color:rgba(255, 255, 255, 0.75);background-color:#444;background-color:rgba(255, 255, 255, 0.3);border:1px solid #111;-webkit-box-shadow:inset 0 1px 2px rgba(0, 0, 0, 0.1),0 1px 0px rgba(255, 255, 255, 0.15);-moz-box-shadow:inset 0 1px 2px rgba(0, 0, 0, 0.1),0 1px 0px rgba(255, 255, 255, 0.15);box-shadow:inset 0 1px 2px rgba(0, 0, 0, 0.1),0 1px 0px rgba(255, 255, 255, 0.15);-webkit-transition:none;-moz-transition:none;-ms-transition:none;-o-transition:none;transition:none;}.navbar-search .search-query:-moz-placeholder{color:#eeeeee;} .navbar-search .search-query::-webkit-input-placeholder{color:#eeeeee;} @@ -336,7 +337,7 @@ i{background-image:url(docs/assets/img/glyphicons-halflings-sprite.png);backgrou .navbar .nav.pull-right{margin-left:10px;margin-right:0;} .navbar .dropdown-menu{top:41px;-webkit-border-radius:4px;-moz-border-radius:4px;border-radius:4px;}.navbar .dropdown-menu:before{content:'';display:inline-block;border-left:7px solid transparent;border-right:7px solid transparent;border-bottom:7px solid #ccc;border-bottom-color:rgba(0, 0, 0, 0.2);position:absolute;top:-7px;left:9px;} .navbar .dropdown-menu:after{content:'';display:inline-block;border-left:6px solid transparent;border-right:6px solid transparent;border-bottom:6px solid #fff;position:absolute;top:-6px;left:10px;} -.navbar .dropdown-toggle .caret,.navbar .open.dropdown .caret{border-top-color:#fff;} +.navbar .nav .dropdown-toggle .caret,.navbar .nav .open.dropdown .caret{border-top-color:#fff;} .navbar .nav .active .caret{filter:alpha(opacity=100);-moz-opacity:1;opacity:1;} .navbar .nav .open>.dropdown-toggle,.navbar .nav .active>.dropdown-toggle,.navbar .nav .open.active>.dropdown-toggle{background-color:transparent;} .navbar .nav .active>.dropdown-toggle:hover{color:#fff;} diff --git a/docs/index.html b/docs/index.html index ffdac0b3f2..a89e01c723 100644 --- a/docs/index.html +++ b/docs/index.html @@ -33,7 +33,7 @@ <div class="navbar-inner"> <div class="container"> <a class="brand" href="./index.html">Bootstrap</a> - <ul class="nav"> + <ul class="nav" style="display: none"> <li class="active"><a href="./index.html">Overview</a></li> <li class="dropdown"> <a href="./scaffolding.html" class="dropdown-toggle" data-toggle="dropdown"> @@ -102,6 +102,17 @@ </a> </li> </ul> + <div class="btn-group"> + <a class="btn" href="#">Action</a> + <a class="btn dropdown-toggle" data-toggle="dropdown" href="#"><span class="caret"></span></a> + <ul class="dropdown-menu"> + <li><a href="#">Action</a></li> + <li><a href="#">Another action</a></li> + <li><a href="#">Something else here</a></li> + <li class="divider"></li> + <li><a href="#">Separated link</a></li> + </ul> + </div><!-- /btn-group --> </div> </div> </div> diff --git a/lib/navbar.less b/lib/navbar.less index a3e64cde86..0d01fe524d 100644 --- a/lib/navbar.less +++ b/lib/navbar.less @@ -45,9 +45,13 @@ } } // Buttons in navbar - .btn { + .btn, + .btn-group { margin-top: 5px; // make buttons vertically centered in navbar } + .btn-group .btn { + margin-top: 0; + } } // Navbar forms @@ -218,8 +222,8 @@ } // Dropdown toggle caret -.navbar .dropdown-toggle .caret, -.navbar .open.dropdown .caret { +.navbar .nav .dropdown-toggle .caret, +.navbar .nav .open.dropdown .caret { border-top-color: #fff; } .navbar .nav .active .caret { -- GitLab From 1c6048bac2d305085f40324223c32e40bb9ea938 Mon Sep 17 00:00:00 2001 From: Mark Otto <markdotto@gmail.com> Date: Sat, 14 Jan 2012 19:17:48 -0800 Subject: [PATCH 288/318] restore top bar on home page --- docs/index.html | 13 +------------ 1 file changed, 1 insertion(+), 12 deletions(-) diff --git a/docs/index.html b/docs/index.html index a89e01c723..ffdac0b3f2 100644 --- a/docs/index.html +++ b/docs/index.html @@ -33,7 +33,7 @@ <div class="navbar-inner"> <div class="container"> <a class="brand" href="./index.html">Bootstrap</a> - <ul class="nav" style="display: none"> + <ul class="nav"> <li class="active"><a href="./index.html">Overview</a></li> <li class="dropdown"> <a href="./scaffolding.html" class="dropdown-toggle" data-toggle="dropdown"> @@ -102,17 +102,6 @@ </a> </li> </ul> - <div class="btn-group"> - <a class="btn" href="#">Action</a> - <a class="btn dropdown-toggle" data-toggle="dropdown" href="#"><span class="caret"></span></a> - <ul class="dropdown-menu"> - <li><a href="#">Action</a></li> - <li><a href="#">Another action</a></li> - <li><a href="#">Something else here</a></li> - <li class="divider"></li> - <li><a href="#">Separated link</a></li> - </ul> - </div><!-- /btn-group --> </div> </div> </div> -- GitLab From 6d916763f82be8c2d4f87842275170c12bea72ec Mon Sep 17 00:00:00 2001 From: Mark Otto <markdotto@gmail.com> Date: Sat, 14 Jan 2012 20:54:37 -0800 Subject: [PATCH 289/318] adding the pager component after rewriting the pagination docs and css --- bootstrap.css | 55 +++++++++++++++++----- bootstrap.min.css | 18 ++++++-- docs/components.html | 106 ++++++++++++++++++++++++++++++++++--------- lib/bootstrap.less | 1 + lib/pager.less | 25 ++++++++++ lib/pagination.less | 76 ++++++++++++++++--------------- 6 files changed, 207 insertions(+), 74 deletions(-) create mode 100644 lib/pager.less diff --git a/bootstrap.css b/bootstrap.css index da68a66a88..a93aaaee6c 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: Sat Jan 14 17:11:53 PST 2012 + * Date: Sat Jan 14 20:53:46 PST 2012 */ html, body { margin: 0; @@ -2082,7 +2082,8 @@ i { /* IE7 inline-block hack */ *zoom: 1; - margin: 0; + margin-left: 0; + margin-bottom: 0; border: 1px solid #ddd; border: 1px solid rgba(0, 0, 0, 0.15); -webkit-border-radius: 3px; @@ -2100,26 +2101,58 @@ i { padding: 0 14px; line-height: 34px; text-decoration: none; - border-right: 1px solid; - border-right-color: #ddd; - border-right-color: rgba(0, 0, 0, 0.15); - *border-right-color: #ddd; - /* IE6-7 */ - + border-right: 1px solid #ddd; + border-right: 1px solid rgba(0, 0, 0, 0.15); } .pagination a:hover, .pagination .active a { - background-color: #c7eefe; + background-color: #f5f5f5; } .pagination .disabled a, .pagination .disabled a:hover { color: #999999; background-color: transparent; cursor: default; } -.pagination .next a { +.pagination li:last-child a { border: 0; } -.pagination.centered { +.pagination-centered { + text-align: center; +} +.pagination-right { + text-align: right; +} +.pager { + margin-left: 0; + margin-bottom: 18px; + list-style: none; text-align: center; + zoom: 1; +} +.pager:before, .pager:after { + display: table; + *display: inline; + content: ""; + zoom: 1; +} +.pager:after { + clear: both; +} +.pager li { + display: inline; +} +.pager a { + display: inline-block; + padding: 6px 15px; + background-color: #f5f5f5; + -webkit-border-radius: 15px; + -moz-border-radius: 15px; + border-radius: 15px; +} +.pager .next a { + float: right; +} +.pager .previous a { + float: left; } .modal-backdrop { position: fixed; diff --git a/bootstrap.min.css b/bootstrap.min.css index 0ed8fe1767..2d5774e34a 100644 --- a/bootstrap.min.css +++ b/bootstrap.min.css @@ -401,13 +401,21 @@ i{background-image:url(docs/assets/img/glyphicons-halflings-sprite.png);backgrou .breadcrumb{padding:7px 14px;margin:0 0 18px;background-color:#f5f5f5;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);background-repeat:repeat-x;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:#999999;} .breadcrumb .active a{color:#333333;} -.pagination{height:36px;margin:18px 0;}.pagination ul{display:inline-block;*display:inline;*zoom:1;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{height:36px;margin:18px 0;} +.pagination ul{display:inline-block;*display:inline;*zoom:1;margin-left:0;margin-bottom: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 li{display:inline;} -.pagination a{float:left;padding:0 14px;line-height:34px;text-decoration:none;border-right:1px solid;border-right-color:#ddd;border-right-color:rgba(0, 0, 0, 0.15);*border-right-color:#ddd;} -.pagination a:hover,.pagination .active a{background-color:#c7eefe;} +.pagination a{float:left;padding:0 14px;line-height:34px;text-decoration:none;border-right:1px solid #ddd;border-right:1px solid rgba(0, 0, 0, 0.15);} +.pagination a:hover,.pagination .active a{background-color:#f5f5f5;} .pagination .disabled a,.pagination .disabled a:hover{color:#999999;background-color:transparent;cursor:default;} -.pagination .next a{border:0;} -.pagination.centered{text-align:center;} +.pagination li:last-child a{border:0;} +.pagination-centered{text-align:center;} +.pagination-right{text-align:right;} +.pager{margin-left:0;margin-bottom:18px;list-style:none;text-align:center;zoom:1;}.pager:before,.pager:after{display:table;*display:inline;content:"";zoom:1;} +.pager:after{clear:both;} +.pager li{display:inline;} +.pager a{display:inline-block;padding:6px 15px;background-color:#f5f5f5;-webkit-border-radius:15px;-moz-border-radius:15px;border-radius:15px;} +.pager .next a{float:right;} +.pager .previous a{float:left;} .modal-backdrop{position:fixed;top:0;right:0;bottom:0;left:0;z-index:1040;background-color:#000000;}.modal-backdrop.fade{opacity:0;} .modal-backdrop,.modal-backdrop.fade.in{filter:alpha(opacity=80);-moz-opacity:0.8;opacity:0.8;} .modal{position:fixed;top:50%;left:50%;z-index:1050;max-height:500px;overflow:auto;width:560px;margin:-250px 0 0 -250px;background-color:#ffffff;border:1px solid #999;border:1px solid rgba(0, 0, 0, 0.3);*border:1px solid #999;-webkit-border-radius:6px;-moz-border-radius:6px;border-radius:6px;-webkit-box-shadow:0 3px 7px rgba(0, 0, 0, 0.3);-moz-box-shadow:0 3px 7px rgba(0, 0, 0, 0.3);box-shadow:0 3px 7px rgba(0, 0, 0, 0.3);-webkit-background-clip:padding-box;-moz-background-clip:padding-box;background-clip:padding-box;}.modal.fade{-webkit-transition:opacity .3s linear, top .3s ease-out;-moz-transition:opacity .3s linear, top .3s ease-out;-ms-transition:opacity .3s linear, top .3s ease-out;-o-transition:opacity .3s linear, top .3s ease-out;transition:opacity .3s linear, top .3s ease-out;top:-25%;} diff --git a/docs/components.html b/docs/components.html index f934ac68eb..e88bd777c8 100644 --- a/docs/components.html +++ b/docs/components.html @@ -847,63 +847,127 @@ ================================================== --> <section id="pagination"> <div class="page-header"> - <h1>Pagination <small></small></h1> + <h1>Pagination <small>Two options for paging through content</small></h1> </div> + <h2>Multi-page pagination</h2> <div class="row"> - <div class="span3"> - <h2>Pagination</h2> - <p>Ultra simplistic and minimally styled pagination inspired by Rdio. The large block is hard to miss, easily scalable, and provides large click areas.</p> + <div class="span4"> + <h3>When to use</h3> + <p>Ultra simplistic and minimally styled pagination inspired by Rdio, great for apps and search results. The large block is hard to miss, easily scalable, and provides large click areas.</p> + <h3>Stateful page links</h3> + <p>Links are customizable and work in a number of circumstances with the right class. <code>.disabled</code> for unclickable links and <code>.active</code> for current page.</p> + <h3>Flexible alignment</h3> + <p>Add either of two optional classes to change the alignment of pagination links: <code>.pagination-centered</code> and <code>.pagination-right</code>.</p> </div> - <div class="span9"> + <div class="span4"> + <h3>Examples</h3> + <p>The default pagination component is flexible and works in a number of variations.</p> <div class="pagination"> <ul> - <li class="prev disabled"><a href="#">← Previous</a></li> + <li class="disabled"><a href="#">← Prev</a></li> <li class="active"><a href="#">1</a></li> <li><a href="#">2</a></li> <li><a href="#">3</a></li> <li><a href="#">4</a></li> - <li class="next"><a href="#">Next →</a></li> + <li><a href="#">Next →</a></li> </ul> </div> <div class="pagination"> <ul> - <li class="prev"><a href="#">←</a></li> + <li><a href="#">←</a></li> + <li><a href="#">10</a></li> + <li><a href="#">11</a></li> + <li class="active"><a href="#">12</a></li> + <li><a href="#">13</a></li> + <li><a href="#">14</a></li> + <li><a href="#">→</a></li> + </ul> + </div> + <div class="pagination"> + <ul> + <li><a href="#">←</a></li> <li class="active"><a href="#">10</a></li> <li><a href="#">11</a></li> <li class="disabled"><a href="#">…</a></li> <li><a href="#">20</a></li> <li><a href="#">21</a></li> - <li class="next"><a href="#">→</a></li> + <li><a href="#">→</a></li> </ul> </div> - <div class="pagination"> + <div class="pagination pagination-centered"> <ul> - <li class="prev"><a href="#">←</a></li> - <li><a href="#">10</a></li> - <li><a href="#">11</a></li> - <li class="active"><a href="#">12</a></li> - <li><a href="#">13</a></li> - <li><a href="#">14</a></li> - <li class="next"><a href="#">→</a></li> + <li class="active"><a href="#">1</a></li> + <li><a href="#">2</a></li> + <li><a href="#">3</a></li> + <li><a href="#">4</a></li> + <li><a href="#">5</a></li> </ul> </div> + </div> + <div class="span4"> + <h3>Markup</h3> + <p>Wrapped in a <code><div></code>, pagination is just a <code><ul></code>.</p> <pre class="prettyprint linenums"> <div class="pagination"> <ul> - <li class="prev disabled"><a href="#">&larr; Previous</a></li> - <li class="active"><a href="#">1</a></li> + <li><a href="#">Prev</a></li> + <li class="active"> + <a href="#">1</a> + </li> <li><a href="#">2</a></li> <li><a href="#">3</a></li> <li><a href="#">4</a></li> - <li><a href="#">5</a></li> - <li class="next"><a href="#">Next &rarr;</a></li> + <li><a href="#">Next</a></li> </ul> </div> </pre> </div> </div><!-- /row --> + <h2>Pager <small>For quick previous and next links</small></h2> + <div class="row"> + <div class="span4"> + <h3>About pager</h3> + <p>The pager component is a set of links for simple pagination implemenations with light markup and even lighter styles. It's great for simple sites like blogs or magazines.</p> + </div> + <div class="span4"> + <h3>Default example</h3> + <p>By default, the pager centers links.</p> + <ul class="pager"> + <li><a href="#">Previous</a></li> + <li><a href="#">Next</a></li> + </ul> +<pre class="prettyprint linenums"> +<ul class="pager"> + <li> + <a href="#">Previous</a> + </li> + <li> + <a href="#">Next</a> + </li> +</ul> +</pre> + </div> + <div class="span4"> + <h3>Aligned links</h3> + <p>Alternatively, you can align each link to the sides:</p> + <ul class="pager"> + <li class="previous"><a href="#">← Older</a></li> + <li class="next"><a href="#">Newer →</a></li> + </ul> +<pre class="prettyprint linenums"> +<ul class="pager"> + <li> + <a href="#">&larr; Older</a> + </li> + <li> + <a href="#">Newer &rarr;</a> + </li> +</ul> +</pre> + </div> + </div><!-- /row --> </section> diff --git a/lib/bootstrap.less b/lib/bootstrap.less index d71002c468..43b5120863 100644 --- a/lib/bootstrap.less +++ b/lib/bootstrap.less @@ -36,6 +36,7 @@ @import "navs.less"; @import "breadcrumbs.less"; @import "pagination.less"; +@import "pager.less"; // Components: Popovers @import "modals.less"; diff --git a/lib/pager.less b/lib/pager.less new file mode 100644 index 0000000000..de009afdaa --- /dev/null +++ b/lib/pager.less @@ -0,0 +1,25 @@ +// PAGER +// ----- + +.pager { + margin-left: 0; + margin-bottom: @baseLineHeight; + list-style: none; + text-align: center; + .clearfix(); +} +.pager li { + display: inline; +} +.pager a { + display: inline-block; + padding: 6px 15px; + background-color: #f5f5f5; + .border-radius(15px); +} +.pager .next a { + float: right; +} +.pager .previous a { + float: left; +} diff --git a/lib/pagination.less b/lib/pagination.less index e388057604..655abe5a38 100644 --- a/lib/pagination.less +++ b/lib/pagination.less @@ -4,44 +4,46 @@ .pagination { height: @baseLineHeight * 2; margin: @baseLineHeight 0; - ul { - display: inline-block; - .ie7-inline-block(); - margin: 0; - border: 1px solid #ddd; - border: 1px solid rgba(0,0,0,.15); - .border-radius(3px); - .box-shadow(0 1px 2px rgba(0,0,0,.05)); - } - li { + } +.pagination ul { + display: inline-block; + .ie7-inline-block(); + margin-left: 0; + margin-bottom: 0; + border: 1px solid #ddd; + border: 1px solid rgba(0,0,0,.15); + .border-radius(3px); + .box-shadow(0 1px 2px rgba(0,0,0,.05)); +} +.pagination li { display: inline; } - a { - float: left; - padding: 0 14px; - line-height: (@baseLineHeight * 2) - 2; - text-decoration: none; - border-right: 1px solid; - border-right-color: #ddd; - border-right-color: rgba(0,0,0,.15); - *border-right-color: #ddd; /* IE6-7 */ - } - a:hover, - .active a { - background-color: lighten(@blue, 45%); - } - .disabled a, - .disabled a:hover { - color: @grayLight; - background-color: transparent; - cursor: default; - } - .next a { - border: 0; - } +.pagination a { + float: left; + padding: 0 14px; + line-height: (@baseLineHeight * 2) - 2; + text-decoration: none; + border-right: 1px solid #ddd; + border-right: 1px solid rgba(0,0,0,.15); +} +.pagination a:hover, +.pagination .active a { + background-color: #f5f5f5; +} +.pagination .disabled a, +.pagination .disabled a:hover { + color: @grayLight; + background-color: transparent; + cursor: default; +} +.pagination li:last-child a { + border: 0; +} - // Centered - &.centered { - text-align: center; - } +// Centered +.pagination-centered { + text-align: center; +} +.pagination-right { + text-align: right; } -- GitLab From dab6d2b17cc2fd67c2462b5a5eb84eb58d9c72bc Mon Sep 17 00:00:00 2001 From: Mark Otto <markdotto@gmail.com> Date: Sat, 14 Jan 2012 21:28:47 -0800 Subject: [PATCH 290/318] change up classes on tables and forms, fix nav list styles in example --- bootstrap.css | 66 +++++++++++++++++----------------- bootstrap.min.css | 28 +++++++-------- docs/assets/css/docs.css | 1 - docs/base-css.html | 76 ++++++++++++++++++++-------------------- docs/index.html | 2 +- docs/javascript.html | 24 ++++++------- docs/less.html | 14 ++++---- docs/scaffolding.html | 4 +-- lib/forms.less | 12 +++---- lib/responsive.less | 8 ++--- lib/tables.less | 6 ++-- 11 files changed, 120 insertions(+), 121 deletions(-) diff --git a/bootstrap.css b/bootstrap.css index a93aaaee6c..dd82e1247a 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: Sat Jan 14 20:53:46 PST 2012 + * Date: Sat Jan 14 21:26:13 PST 2012 */ html, body { margin: 0; @@ -942,22 +942,22 @@ input::-webkit-input-placeholder { -moz-border-radius: 14px; border-radius: 14px; } -.search-form input, -.inline-form input, -.horizontal-form input, -.search-form textarea, -.inline-form textarea, -.horizontal-form textarea, -.search-form select, -.inline-form select, -.horizontal-form select, -.search-form .uneditable-input, -.inline-form .uneditable-input, -.horizontal-form .uneditable-input { +.form-search input, +.form-inline input, +.form-horizontal input, +.form-search textarea, +.form-inline textarea, +.form-horizontal textarea, +.form-search select, +.form-inline select, +.form-horizontal select, +.form-search .uneditable-input, +.form-inline .uneditable-input, +.form-horizontal .uneditable-input { display: inline-block; margin-bottom: 0; } -.search-form label, .inline-form label { +.form-search label, .form-inline label { display: inline-block; } .control-group { @@ -966,16 +966,16 @@ input::-webkit-input-placeholder { .control-group > label { font-weight: bold; } -.horizontal-form .control-group > label { +.form-horizontal .control-group > label { float: left; width: 130px; padding-top: 5px; text-align: right; } -.horizontal-form .controls { +.form-horizontal .controls { margin-left: 150px; } -.horizontal-form .form-actions { +.form-horizontal .form-actions { padding-left: 150px; } table { @@ -1001,46 +1001,46 @@ thead:first-child tr th, thead:first-child tr td { tbody + tbody { border-top: 2px solid #ddd; } -.condensed-table th, .condensed-table td { +.table-condensed th, .table-condensed td { padding: 4px 5px; } -.bordered-table { +.table-bordered { border: 1px solid #ddd; border-collapse: separate; -webkit-border-radius: 4px; -moz-border-radius: 4px; border-radius: 4px; } -.bordered-table th + th, -.bordered-table td + td, -.bordered-table th + td, -.bordered-table td + th { +.table-bordered th + th, +.table-bordered td + td, +.table-bordered th + td, +.table-bordered td + th { border-left: 1px solid #ddd; } -.bordered-table thead:first-child tr:first-child th, .bordered-table tbody:first-child tr:first-child th, .bordered-table tbody:first-child tr:first-child td { +.table-bordered thead:first-child tr:first-child th, .table-bordered tbody:first-child tr:first-child th, .table-bordered tbody:first-child tr:first-child td { border-top: 0; } -.bordered-table thead:first-child tr:first-child th:first-child, .bordered-table tbody:first-child tr:first-child td:first-child { +.table-bordered thead:first-child tr:first-child th:first-child, .table-bordered tbody:first-child tr:first-child td:first-child { -webkit-border-radius: 4px 0 0 0; -moz-border-radius: 4px 0 0 0; border-radius: 4px 0 0 0; } -.bordered-table thead:first-child tr:first-child th:last-child, .bordered-table tbody:first-child tr:first-child td:last-child { +.table-bordered thead:first-child tr:first-child th:last-child, .table-bordered tbody:first-child tr:first-child td:last-child { -webkit-border-radius: 0 4px 0 0; -moz-border-radius: 0 4px 0 0; border-radius: 0 4px 0 0; } -.bordered-table thead:last-child tr:last-child th:first-child, .bordered-table tbody:last-child tr:last-child td:first-child { +.table-bordered thead:last-child tr:last-child th:first-child, .table-bordered tbody:last-child tr:last-child td:first-child { -webkit-border-radius: 0 0 0 4px; -moz-border-radius: 0 0 0 4px; border-radius: 0 0 0 4px; } -.bordered-table thead:last-child tr:last-child th:last-child, .bordered-table tbody:last-child tr:last-child td:last-child { +.table-bordered thead:last-child tr:last-child th:last-child, .table-bordered tbody:last-child tr:last-child td:last-child { -webkit-border-radius: 0 0 4px 0; -moz-border-radius: 0 0 4px 0; border-radius: 0 0 4px 0; } -.striped-table tbody tr:nth-child(odd) td, .striped-table tbody tr:nth-child(odd) th { +.table-striped tbody tr:nth-child(odd) td, .table-striped tbody tr:nth-child(odd) th { background-color: #f9f9f9; } table .span1 { @@ -3071,19 +3071,19 @@ a.thumbnail:hover { .navbar .nav:hover > li > a:hover { background-color: #333; } - .horizontal-form .control-group > label { + .form-horizontal .control-group > label { float: none; width: auto; padding-top: 0; text-align: left; } - .horizontal-form .controls { + .form-horizontal .controls { margin-left: 0; } - .horizontal-form .control-list { + .form-horizontal .control-list { padding-top: 0; } - .horizontal-form .form-actions { + .form-horizontal .form-actions { padding-left: 0; } .modal { diff --git a/bootstrap.min.css b/bootstrap.min.css index 2d5774e34a..1832263f0b 100644 --- a/bootstrap.min.css +++ b/bootstrap.min.css @@ -169,27 +169,27 @@ input::-webkit-input-placeholder{color:#999999;} .input-append .uneditable-input{border-right-color:#ccc;} .input-append .add-on{margin-right:0;margin-left:-1px;-webkit-border-radius:0 3px 3px 0;-moz-border-radius:0 3px 3px 0;border-radius:0 3px 3px 0;} .search-query{padding-left:14px;padding-right:14px;margin-bottom:0;-webkit-border-radius:14px;-moz-border-radius:14px;border-radius:14px;} -.search-form input,.inline-form input,.horizontal-form input,.search-form textarea,.inline-form textarea,.horizontal-form textarea,.search-form select,.inline-form select,.horizontal-form select,.search-form .uneditable-input,.inline-form .uneditable-input,.horizontal-form .uneditable-input{display:inline-block;margin-bottom:0;} -.search-form label,.inline-form label{display:inline-block;} +.form-search input,.form-inline input,.form-horizontal input,.form-search textarea,.form-inline textarea,.form-horizontal textarea,.form-search select,.form-inline select,.form-horizontal select,.form-search .uneditable-input,.form-inline .uneditable-input,.form-horizontal .uneditable-input{display:inline-block;margin-bottom:0;} +.form-search label,.form-inline label{display:inline-block;} .control-group{margin-bottom:18px;} .control-group>label{font-weight:bold;} -.horizontal-form .control-group>label{float:left;width:130px;padding-top:5px;text-align:right;} -.horizontal-form .controls{margin-left:150px;} -.horizontal-form .form-actions{padding-left:150px;} +.form-horizontal .control-group>label{float:left;width:130px;padding-top:5px;text-align:right;} +.form-horizontal .controls{margin-left:150px;} +.form-horizontal .form-actions{padding-left:150px;} table{width:100%;margin-bottom:18px;} th,td{padding:8px;line-height:18px;text-align:left;border-top:1px solid #ddd;} th{font-weight:bold;vertical-align:bottom;} td{vertical-align:top;} thead:first-child tr th,thead:first-child tr td{border-top:0;} tbody+tbody{border-top:2px solid #ddd;} -.condensed-table th,.condensed-table td{padding:4px 5px;} -.bordered-table{border:1px solid #ddd;border-collapse:separate;-webkit-border-radius:4px;-moz-border-radius:4px;border-radius:4px;}.bordered-table th+th,.bordered-table td+td,.bordered-table th+td,.bordered-table td+th{border-left:1px solid #ddd;} -.bordered-table thead:first-child tr:first-child th,.bordered-table tbody:first-child tr:first-child th,.bordered-table tbody:first-child tr:first-child td{border-top:0;} -.bordered-table thead:first-child tr:first-child th:first-child,.bordered-table tbody:first-child tr:first-child td:first-child{-webkit-border-radius:4px 0 0 0;-moz-border-radius:4px 0 0 0;border-radius:4px 0 0 0;} -.bordered-table thead:first-child tr:first-child th:last-child,.bordered-table tbody:first-child tr:first-child td:last-child{-webkit-border-radius:0 4px 0 0;-moz-border-radius:0 4px 0 0;border-radius:0 4px 0 0;} -.bordered-table thead:last-child tr:last-child th:first-child,.bordered-table tbody:last-child tr:last-child td:first-child{-webkit-border-radius:0 0 0 4px;-moz-border-radius:0 0 0 4px;border-radius:0 0 0 4px;} -.bordered-table thead:last-child tr:last-child th:last-child,.bordered-table tbody:last-child tr:last-child td:last-child{-webkit-border-radius:0 0 4px 0;-moz-border-radius:0 0 4px 0;border-radius:0 0 4px 0;} -.striped-table tbody tr:nth-child(odd) td,.striped-table tbody tr:nth-child(odd) th{background-color:#f9f9f9;} +.table-condensed th,.table-condensed td{padding:4px 5px;} +.table-bordered{border:1px solid #ddd;border-collapse:separate;-webkit-border-radius:4px;-moz-border-radius:4px;border-radius:4px;}.table-bordered th+th,.table-bordered td+td,.table-bordered th+td,.table-bordered td+th{border-left:1px solid #ddd;} +.table-bordered thead:first-child tr:first-child th,.table-bordered tbody:first-child tr:first-child th,.table-bordered tbody:first-child tr:first-child td{border-top:0;} +.table-bordered thead:first-child tr:first-child th:first-child,.table-bordered tbody:first-child tr:first-child td:first-child{-webkit-border-radius:4px 0 0 0;-moz-border-radius:4px 0 0 0;border-radius:4px 0 0 0;} +.table-bordered thead:first-child tr:first-child th:last-child,.table-bordered tbody:first-child tr:first-child td:last-child{-webkit-border-radius:0 4px 0 0;-moz-border-radius:0 4px 0 0;border-radius:0 4px 0 0;} +.table-bordered thead:last-child tr:last-child th:first-child,.table-bordered tbody:last-child tr:last-child td:first-child{-webkit-border-radius:0 0 0 4px;-moz-border-radius:0 0 0 4px;border-radius:0 0 0 4px;} +.table-bordered thead:last-child tr:last-child th:last-child,.table-bordered tbody:last-child tr:last-child td:last-child{-webkit-border-radius:0 0 4px 0;-moz-border-radius:0 0 4px 0;border-radius:0 0 4px 0;} +.table-striped tbody tr:nth-child(odd) td,.table-striped tbody tr:nth-child(odd) th{background-color:#f9f9f9;} table .span1{float:none;width:44px;margin-left:0;} table .span2{float:none;width:124px;margin-left:0;} table .span3{float:none;width:204px;margin-left:0;} @@ -529,4 +529,4 @@ a.thumbnail:hover{border-color:#0088cc;-webkit-box-shadow:0 1px 4px rgba(0, 105, .show{display:block;} .invisible{visibility:hidden;} .hidden{display:none;visibility:hidden;} -@media (max-width: 480px){.navbar .nav{position:absolute;top:0;left:0;width:180px;padding-top:40px;list-style:none;} .navbar .nav,.navbar .nav>li:last-child a{-webkit-border-radius:0 0 4px 0;-moz-border-radius:0 0 4px 0;border-radius:0 0 4px 0;} .navbar .nav>li{float:none;display:none;} .navbar .nav>li>a{float:none;background-color:#222;} .navbar .nav>.active{display:block;position:absolute;top:0;left:0;} .navbar .nav>.active>a{background-color:transparent;} .navbar .nav>.active>a:hover{background-color:#333;} .navbar .nav>.active>a:after{display:inline-block;width:0;height:0;margin-top:8px;margin-left:6px;text-indent:-99999px;vertical-align:top;border-left:4px solid transparent;border-right:4px solid transparent;border-top:4px solid #ffffff;filter:alpha(opacity=100);-moz-opacity:1;opacity:1;content:"↓";} .navbar .nav:hover>li{display:block;} .navbar .nav:hover>li>a:hover{background-color:#333;} .horizontal-form .control-group>label{float:none;width:auto;padding-top:0;text-align:left;} .horizontal-form .controls{margin-left:0;} .horizontal-form .control-list{padding-top:0;} .horizontal-form .form-actions{padding-left:0;} .modal{position:fixed;top:20px;left:20px;right:20px;width:auto;}.modal.fade.in{top:auto;} .modal-header .close{padding:10px;}}@media (max-width: 768px){.navbar-fixed{position:absolute;} .navbar-fixed .nav{float:none;} .container{width:auto;padding:0 20px;} .row{margin-left:0;} .row>[class*="span"]{float:none;display:block;width:auto;margin:0;}}@media (min-width: 768px) and (max-width: 940px){.container{width:748px;} .span1{width:44px;} .span2{width:108px;} .span3{width:172px;} .span4{width:236px;} .span5{width:300px;} .span6{width:364px;} .span7{width:428px;} .span8{width:492px;} .span9{width:556px;} .span10{width:620px;} .span11{width:684px;} .span12{width:748px;} .offset1{margin-left:64px;} .offset2{margin-left:128px;} .offset3{margin-left:192px;} .offset4{margin-left:256px;} .offset5{margin-left:320px;} .offset6{margin-left:384px;} .offset7{margin-left:448px;} .offset8{margin-left:512px;} .offset9{margin-left:576px;} .offset10{margin-left:640px;} .offset11{margin-left:704px;} .offset12{margin-left:768px;}} +@media (max-width: 480px){.navbar .nav{position:absolute;top:0;left:0;width:180px;padding-top:40px;list-style:none;} .navbar .nav,.navbar .nav>li:last-child a{-webkit-border-radius:0 0 4px 0;-moz-border-radius:0 0 4px 0;border-radius:0 0 4px 0;} .navbar .nav>li{float:none;display:none;} .navbar .nav>li>a{float:none;background-color:#222;} .navbar .nav>.active{display:block;position:absolute;top:0;left:0;} .navbar .nav>.active>a{background-color:transparent;} .navbar .nav>.active>a:hover{background-color:#333;} .navbar .nav>.active>a:after{display:inline-block;width:0;height:0;margin-top:8px;margin-left:6px;text-indent:-99999px;vertical-align:top;border-left:4px solid transparent;border-right:4px solid transparent;border-top:4px solid #ffffff;filter:alpha(opacity=100);-moz-opacity:1;opacity:1;content:"↓";} .navbar .nav:hover>li{display:block;} .navbar .nav:hover>li>a:hover{background-color:#333;} .form-horizontal .control-group>label{float:none;width:auto;padding-top:0;text-align:left;} .form-horizontal .controls{margin-left:0;} .form-horizontal .control-list{padding-top:0;} .form-horizontal .form-actions{padding-left:0;} .modal{position:fixed;top:20px;left:20px;right:20px;width:auto;}.modal.fade.in{top:auto;} .modal-header .close{padding:10px;}}@media (max-width: 768px){.navbar-fixed{position:absolute;} .navbar-fixed .nav{float:none;} .container{width:auto;padding:0 20px;} .row{margin-left:0;} .row>[class*="span"]{float:none;display:block;width:auto;margin:0;}}@media (min-width: 768px) and (max-width: 940px){.container{width:748px;} .span1{width:44px;} .span2{width:108px;} .span3{width:172px;} .span4{width:236px;} .span5{width:300px;} .span6{width:364px;} .span7{width:428px;} .span8{width:492px;} .span9{width:556px;} .span10{width:620px;} .span11{width:684px;} .span12{width:748px;} .offset1{margin-left:64px;} .offset2{margin-left:128px;} .offset3{margin-left:192px;} .offset4{margin-left:256px;} .offset5{margin-left:320px;} .offset6{margin-left:384px;} .offset7{margin-left:448px;} .offset8{margin-left:512px;} .offset9{margin-left:576px;} .offset10{margin-left:640px;} .offset11{margin-left:704px;} .offset12{margin-left:768px;}} diff --git a/docs/assets/css/docs.css b/docs/assets/css/docs.css index ca1c5cb83f..2f45032f2e 100644 --- a/docs/assets/css/docs.css +++ b/docs/assets/css/docs.css @@ -116,7 +116,6 @@ section { /* supporting docs pages */ .subhead { padding-bottom: 14px; - margin-bottom: 45px; border-bottom: 3px solid #e5e5e5; } .subhead h1, diff --git a/docs/base-css.html b/docs/base-css.html index c851c84e92..ccc2216c67 100644 --- a/docs/base-css.html +++ b/docs/base-css.html @@ -150,7 +150,7 @@ <!-- Misc Elements --> <h2>Emphasis, address, and abbreviation</h2> - <table class="bordered-table striped-table"> + <table class="table-bordered table-striped"> <thead> <tr> <th>Element</th> @@ -237,7 +237,7 @@ <!-- Blockquotes --> <h2>Blockquotes</h2> - <table class="bordered-table striped-table"> + <table class="table-bordered table-striped"> <thead> <tr> <th>Element</th> @@ -383,7 +383,7 @@ <!-- Code --> <h2>Code <small>Inline and block</small></h2> - <table class="bordered-table striped-table"> + <table class="table-bordered table-striped"> <thead> <tr> <th style="width: 190px;">Element</th> @@ -425,7 +425,7 @@ <!-- Labels --> <h2>Inline labels <small>for special attention</small></h2> - <table class="bordered-table striped-table"> + <table class="table-bordered table-striped"> <thead> <tr> <th style="width: 190px;">Labels</th> @@ -490,7 +490,7 @@ <h2>Table markup</h2> <div class="row"> <div class="span8"> - <table class="bordered-table striped-table"> + <table class="table-bordered table-striped"> <thead> <tr> <th>Tag</th> @@ -579,7 +579,7 @@ </div> <h2>Table options</h2> - <table class="bordered-table striped-table"> + <table class="table-bordered table-striped"> <thead> <tr> <th>Name</th> @@ -596,21 +596,21 @@ <tr> <td>Bordered</td> <td> - <code>.bordered-table</code> + <code>.table-bordered</code> </td> <td>Rounds corners and adds outter border</td> </tr> <tr> <td>Zebra-stripe</td> <td> - <code>.striped-table</code> + <code>.table-striped</code> </td> <td>Adds light gray background color to odd rows (1, 3, 5, etc)</td> </tr> <tr> <td>Condensed</td> <td> - <code>.condensed-table</code> + <code>.table-condensed</code> </td> <td>Cuts vertical padding in half, from 8px to 4px, within all <code>td</code> and <code>th</code> elements</td> </tr> @@ -667,15 +667,15 @@ <h3>2. Striped table</h3> <div class="row"> <div class="span4"> - <p>Get a little fancy with your tables by adding zebra-striping—just add the <code>.striped-table</code> class.</p> + <p>Get a little fancy with your tables by adding zebra-striping—just add the <code>.table-striped</code> class.</p> <p class="muted"><strong>Note:</strong> Sprited tables use the <code>:nth-child</code> CSS selector and is not available in IE7-IE8.</p> <pre class="prettyprint linenums" style="margin-bottom: 18px;"> -<table class="striped-table"> +<table class="table-striped"> ... </table></pre> </div> <div class="span8"> - <table class="striped-table"> + <table class="table-striped"> <thead> <tr> <th>#</th> @@ -714,12 +714,12 @@ <div class="span4"> <p>Add borders around the entire table and rounded corners for aesthetic purposes.</p> <pre class="prettyprint linenums"> -<table class="bordered-table"> +<table class="table-bordered"> ... </table></pre> </div> <div class="span8"> - <table class="bordered-table"> + <table class="table-bordered"> <thead> <tr> <th>#</th> @@ -760,14 +760,14 @@ <h3>4. Condensed table</h3> <div class="row"> <div class="span4"> - <p>Make your tables more compact by adding the <code>.condensed-table</code> class to cut table cell padding in half (from 10px to 5px).</p> + <p>Make your tables more compact by adding the <code>.table-condensed</code> class to cut table cell padding in half (from 10px to 5px).</p> <pre class="prettyprint linenums" style="margin-bottom: 18px;"> -<table class="condensed-table"> +<table class="table-condensed"> ... </table></pre> </div> <div class="span8"> - <table class="condensed-table"> + <table class="table-condensed"> <thead> <tr> <th>#</th> @@ -816,12 +816,12 @@ }); }); </script> -<table class="striped-table"> +<table class="table-striped"> ... </table></pre> </div> <div class="span8"> - <table class="striped-table tablesorter-example"> + <table class="table-striped tablesorter-example"> <thead> <tr> <th>#</th> @@ -858,7 +858,7 @@ </tbody> </table> <p>Styles for the Tablesorter, zebra striping, borders, and condensing may all compound in any variation to fit your needs.</p> - <table class="striped-table bordered-table condensed-table tablesorter-example"> + <table class="table-striped table-bordered table-condensed tablesorter-example"> <thead> <tr> <th>#</th> @@ -932,7 +932,7 @@ <h2>Four types of forms</h2> <p>Bootstrap provides simple markup and styles for four styles of common web forms.</p> - <table class="bordered-table striped-table"> + <table class="table-bordered table-striped"> <thead> <tr> <th>Name</th> @@ -948,17 +948,17 @@ </tr> <tr> <th>Horizontal</th> - <td><code>.horizontal-form</code></td> + <td><code>.form-horizontal</code></td> <td>Float left, right-aligned labels on same line as controls</td> </tr> <tr> <th>Inline</th> - <td><code>.inline-form</code></td> + <td><code>.form-inline</code></td> <td>Left-aligned label and inline-block controls for compact style</td> </tr> <tr> <th>Search</th> - <td><code>.search-form</code></td> + <td><code>.form-search</code></td> <td>Extra-rounded text input for a typical search aesthetic</td> </tr> </tbody> @@ -981,16 +981,16 @@ </div> <div class="span4"> <h3>Search form</h3> - <p>Reflecting default WebKit styles, just add <code>.search-form</code> for extra rounded search fields.</p> - <form class="well search-form"> + <p>Reflecting default WebKit styles, just add <code>.form-search</code> for extra rounded search fields.</p> + <form class="well form-search"> <input type="text" class="input-medium search-query"> <button type="submit" class="btn">Search</button> </form> </div> <div class="span4"> <h3>Inline form</h3> - <p>Inputs are block level to start. For <code>.inline-form</code> and <code>.horizontal-form</code>, we use inline-block.</p> - <form class="well search-form"> + <p>Inputs are block level to start. For <code>.form-inline</code> and <code>.form-horizontal</code>, we use inline-block.</p> + <form class="well form-search"> <input type="text" class="input-small" placeholder="Email"> <input type="password" class="input-small" placeholder="Password"> <button type="submit" class="btn">Go</button> @@ -1003,7 +1003,7 @@ <h2>Horizontal forms</h2> <div class="row"> <div class="span8"> - <form class="horizontal-form"> + <form class="form-horizontal"> <legend>Controls Bootstrap supports</legend> <fieldset class="control-group"> <label class="control-label" for="input01">Text input</label> @@ -1087,7 +1087,7 @@ <div class="row"> <div class="span8"> - <form class="horizontal-form"> + <form class="form-horizontal"> <legend>Form control states</legend> <fieldset class="control-group"> <label class="control-label" for="focusedInput">Focused input</label> @@ -1158,7 +1158,7 @@ <div class="row"> <div class="span8"> - <form class="horizontal-form"> + <form class="form-horizontal"> <legend>Extending form controls</legend> <fieldset class="control-group"> <label class="control-label">Form sizes</label> @@ -1259,7 +1259,7 @@ <div class="page-header"> <h1>Buttons</h1> </div> - <table class="bordered-table striped-table"> + <table class="table-bordered table-striped"> <thead> <tr> <th>Button</th> @@ -1517,13 +1517,13 @@ </div> <div class="span3"> <p>Or, use them in navigation.</p> - <div class="well side-nav"> - <ul class="nav-group"> - <li class="active"><a class="nav-item" href="#"><i class="home"></i> Home</a></li> - <li><a class="nav-item" href="#"><i class="book"></i> Library</a></li> - <li><a class="nav-item" href="#"><i class="cog"></i> Settings</a></li> + <div class="well" style="padding: 8px 0;"> + <ul class="nav list"> + <li class="active"><a href="#"><i class="home"></i> Home</a></li> + <li><a href="#"><i class="book"></i> Library</a></li> + <li><a href="#"><i class="pencil"></i> Applications</a></li> </ul> - </div> + </div> <!-- /well --> </div> </div> </section> diff --git a/docs/index.html b/docs/index.html index ffdac0b3f2..cb924bae6d 100644 --- a/docs/index.html +++ b/docs/index.html @@ -268,7 +268,7 @@ ================================================== --> <h1>Get started in no time.</h1> <p class="marketing-byline">Quickly start using Bootstrap within your workflow and development process.</p> - <table class="bordered-table getting-started"> + <table class="table-bordered getting-started"> <tbody> <tr> <td class="quick-start"> diff --git a/docs/javascript.html b/docs/javascript.html index afe9c329ec..64159ede75 100644 --- a/docs/javascript.html +++ b/docs/javascript.html @@ -284,7 +284,7 @@ <p>Call the modal via javascript:</p> <pre class="prettyprint linenums">$('#myModal').modal(options)</pre> <h3>Options</h3> - <table class="bordered-table striped-table"> + <table class="table-bordered table-striped"> <thead> <tr> <th style="width: 100px;">Name</th> @@ -349,7 +349,7 @@ $('#myModal').modal({ <pre class="prettyprint linenums">$('#myModal').modal('hide')</pre> <h3>Events</h3> <p>Bootstrap's modal class exposes a few events for hooking into modal functionality. </p> - <table class="bordered-table striped-table"> + <table class="table-bordered table-striped"> <thead> <tr> <th style="width: 150px;">Event</th> @@ -666,7 +666,7 @@ $('#myModal').on('hidden', function () { </script></pre> </p> <h3>Events</h3> - <table class="bordered-table striped-table"> + <table class="table-bordered table-striped"> <thead> <tr> <th style="width: 150px;">Event</th> @@ -719,7 +719,7 @@ $('a[data-toggle="tab"]').on('shown', function (e) { <p>Trigger the tooltip via javascript:</p> <pre class="prettyprint linenums">$('#example').tooltip(options)</pre> <h3>Options</h3> - <table class="bordered-table striped-table"> + <table class="table-bordered table-striped"> <thead> <tr> <th style="width: 100px;">Name</th> @@ -813,7 +813,7 @@ $('a[data-toggle="tab"]').on('shown', function (e) { <p>Enable popovers via javascript:</p> <pre class="prettyprint linenums">$('#example').popover(options)</pre> <h3>Options</h3> - <table class="bordered-table striped-table"> + <table class="table-bordered table-striped"> <thead> <tr> <th style="width: 100px;">Name</th> @@ -932,7 +932,7 @@ $('a[data-toggle="tab"]').on('shown', function (e) { <pre class="prettyprint linenums">$(".alert-message").alert('close')</pre> <h3>Events</h3> <p>Bootstrap's alert class exposes a few events for hooking into alert functionality. </p> - <table class="bordered-table striped-table"> + <table class="table-bordered table-striped"> <thead> <tr> <th style="width: 150px;">Event</th> @@ -975,7 +975,7 @@ $('#my-alert').bind('closed', function () { <div class="span9 columns"> <h2>Example uses</h2> <p>Use the buttons plugin for states and toggles.</p> - <table class="bordered-table striped-table"> + <table class="table-bordered table-striped"> <tbody> <tr> <td>Stateful</td> @@ -1115,7 +1115,7 @@ $('#my-alert').bind('closed', function () { <p>Enable via javascript:</p> <pre class="prettyprint linenums">$(".collapse").collapse()</pre> <h3>Options</h3> - <table class="bordered-table striped-table"> + <table class="table-bordered table-striped"> <thead> <tr> <th style="width: 100px;">Name</th> @@ -1165,7 +1165,7 @@ $('#myCollapsible').collapse({ <p> Bootstrap's collapse class exposes a few events for hooking into collapse functionality. </p> - <table class="bordered-table striped-table"> + <table class="table-bordered table-striped"> <thead> <tr> <th style="width: 150px;">Event</th> @@ -1251,7 +1251,7 @@ $('#myCollapsible').on('hidden', function () { <p>Call via javascript:</p> <pre class="prettyprint linenums">$('.carousel').carousel()</pre> <h3>Options</h3> - <table class="bordered-table striped-table"> + <table class="table-bordered table-striped"> <thead> <tr> <th style="width: 100px;">Name</th> @@ -1300,7 +1300,7 @@ $('#myCollapsible').on('hidden', function () { <p>Cycles to the next item.</p> <h3>Events</h3> <p>Bootstrap's modal class exposes a few events for hooking into modal functionality. </p> - <table class="bordered-table striped-table"> + <table class="table-bordered table-striped"> <thead> <tr> <th style="width: 150px;">Event</th> @@ -1348,7 +1348,7 @@ $('#myCollapsible').on('hidden', function () { <p>Call the typeahead via javascript:</p> <pre class="prettyprint linenums">$('.typeahead').typeahead()</pre> <h3>Options</h3> - <table class="bordered-table striped-table"> + <table class="table-bordered table-striped"> <thead> <tr> <th style="width: 100px;">Name</th> diff --git a/docs/less.html b/docs/less.html index f3bfa30594..357f242b10 100644 --- a/docs/less.html +++ b/docs/less.html @@ -160,7 +160,7 @@ </div> <h3>Hyperlinks</h3> - <table class="bordered-table striped-table"> + <table class="table-bordered table-striped"> <thead> <tr> <th>Variable</th> @@ -185,7 +185,7 @@ <div class="row"> <div class="span6"> <h3>Grayscale colors</h3> - <table class="bordered-table striped-table"> + <table class="table-bordered table-striped"> <tbody> <tr> <td><code>@black</code></td> @@ -216,7 +216,7 @@ </div> <div class="span6"> <h3>Accent colors</h3> - <table class="bordered-table striped-table"> + <table class="table-bordered table-striped"> <tbody> <tr> <td><code>@blue</code></td> @@ -254,7 +254,7 @@ <div class="row"> <div class="span6"> <h3>Grid system</h3> - <table class="bordered-table striped-table"> + <table class="table-bordered table-striped"> <tbody> <tr> <td><code>@gridColumns</code></td> @@ -277,7 +277,7 @@ </div> <div class="span6"> <h3>Typography</h3> - <table class="bordered-table striped-table"> + <table class="table-bordered table-striped"> <tbody> <tr> <td><code>@baseFontSize</code></td> @@ -302,7 +302,7 @@ <h3>Visuals</h3> </div> <div class="span9"> - <table class="bordered-table striped-table"> + <table class="table-bordered table-striped"> <tbody> <tr> <td><code>@primaryButtonColor</code></td> @@ -453,7 +453,7 @@ <h2 id="compiling">Compiling Less</h2> <p>After modifying the <code>.less</code> files in /lib/, you'll need to recompile them in order to regenerate the bootstrap-*.*.*.css and bootstrap-*.*.*.min.css files. If you're submitting a pull request to GitHub, you must always recompile.</p> <h3>Ways to compile</h3> - <table class="bordered-table striped-table"> + <table class="table-bordered table-striped"> <thead> <tr> <th style="width: 120px;">Method</th> diff --git a/docs/scaffolding.html b/docs/scaffolding.html index b2b4b5647f..eab6fedf52 100644 --- a/docs/scaffolding.html +++ b/docs/scaffolding.html @@ -223,7 +223,7 @@ </div> <h2>Grid customization</h2> - <table class="bordered-table striped-table"> + <table class="table-bordered table-striped"> <thead> <tr> <th>Variable</th> @@ -335,7 +335,7 @@ <div class="span8"> <h2>Supported devices</h2> <p>Bootstrap supports a handful of media queries to help make your projects more appropriate on different devices and screen resolutions. Here's what's included:</p> - <table class="bordered-table striped-table"> + <table class="table-bordered table-striped"> <thead> <tr> <th>Label</th> diff --git a/lib/forms.less b/lib/forms.less index ed97d8dd09..04e684c99c 100644 --- a/lib/forms.less +++ b/lib/forms.less @@ -441,9 +441,9 @@ input::-webkit-input-placeholder { // Common properties // ----------------- -.search-form, -.inline-form, -.horizontal-form { +.form-search, +.form-inline, +.form-horizontal { input, textarea, select, @@ -452,8 +452,8 @@ input::-webkit-input-placeholder { margin-bottom: 0; } } -.search-form label, -.inline-form label { +.form-search label, +.form-inline label { display: inline-block; } @@ -469,7 +469,7 @@ input::-webkit-input-placeholder { // Horizontal-specific styles // -------------------------- -.horizontal-form { +.form-horizontal { // Float the labels left .control-group > label { float: left; diff --git a/lib/responsive.less b/lib/responsive.less index 5131aa625b..f5c23df3cd 100644 --- a/lib/responsive.less +++ b/lib/responsive.less @@ -76,22 +76,22 @@ } // Remove the horizontal form styles - .horizontal-form .control-group > label { + .form-horizontal .control-group > label { float: none; width: auto; padding-top: 0; text-align: left; } // Move over all input controls and content - .horizontal-form .controls { + .form-horizontal .controls { margin-left: 0; } // Move the options list down to align with labels - .horizontal-form .control-list { + .form-horizontal .control-list { padding-top: 0; // has to be padding because margin collaspes } // Move over buttons in .form-actions to align with .controls - .horizontal-form .form-actions { + .form-horizontal .form-actions { padding-left: 0; } diff --git a/lib/tables.less b/lib/tables.less index 1d044ec7c6..5b803b3dfe 100644 --- a/lib/tables.less +++ b/lib/tables.less @@ -42,7 +42,7 @@ tbody + tbody { // CONDENSED TABLE W/ HALF PADDING // ------------------------------- -.condensed-table { +.table-condensed { th, td { padding: 4px 5px; @@ -53,7 +53,7 @@ tbody + tbody { // BORDERED VERSION // ---------------- -.bordered-table { +.table-bordered { border: 1px solid #ddd; border-collapse: separate; // Done so we can round those corners! .border-radius(4px); @@ -94,7 +94,7 @@ tbody + tbody { // -------------- // Default zebra-stripe styles (alternating gray and transparent backgrounds) -.striped-table { +.table-striped { tbody { tr:nth-child(odd) td, tr:nth-child(odd) th { -- GitLab From 16eccc43d9fa6317818b5d1621d0477150214488 Mon Sep 17 00:00:00 2001 From: Mark Otto <markdotto@gmail.com> Date: Sat, 14 Jan 2012 23:28:48 -0800 Subject: [PATCH 291/318] dates updated to 2012 --- LICENSE | 2 +- README.md | 2 +- bootstrap.css | 4 ++-- examples/container-app.html | 2 +- examples/fluid-reverse.html | 2 +- examples/fluid.html | 2 +- examples/hero.html | 2 +- js/bootstrap-alert.js | 2 +- js/bootstrap-button.js | 2 +- js/bootstrap-carousel.js | 2 +- js/bootstrap-collapse.js | 2 +- js/bootstrap-dropdown.js | 2 +- js/bootstrap-modal.js | 2 +- js/bootstrap-popover.js | 2 +- js/bootstrap-scrollspy.js | 2 +- js/bootstrap-tab.js | 2 +- js/bootstrap-tooltip.js | 2 +- js/bootstrap-transition.js | 2 +- js/bootstrap-typeahead.js | 2 +- js/tests/vendor/jquery.js | 4 ++-- js/tests/vendor/qunit.css | 2 +- js/tests/vendor/qunit.js | 2 +- lib/bootstrap.less | 2 +- lib/print.less | 2 +- 24 files changed, 26 insertions(+), 26 deletions(-) diff --git a/LICENSE b/LICENSE index 50a6393c06..1ec0d70dea 100644 --- a/LICENSE +++ b/LICENSE @@ -1,4 +1,4 @@ -Copyright 2011 Twitter, Inc. +Copyright 2012 Twitter, Inc. Licensed under the Apache License, Version 2.0 (the "License"); you may not use this file except in compliance with the License. diff --git a/README.md b/README.md index fd97265840..b77eb95ae0 100644 --- a/README.md +++ b/README.md @@ -100,7 +100,7 @@ Authors Copyright and license --------------------- -Copyright 2011 Twitter, Inc. +Copyright 2012 Twitter, Inc. Licensed under the Apache License, Version 2.0 (the "License"); you may not use this work except in compliance with the License. diff --git a/bootstrap.css b/bootstrap.css index dd82e1247a..9a4e6e1111 100644 --- a/bootstrap.css +++ b/bootstrap.css @@ -1,12 +1,12 @@ /*! * Bootstrap v2.0.0 * - * Copyright 2011 Twitter, Inc + * Copyright 2012 Twitter, Inc * Licensed under the Apache License v2.0 * http://www.apache.org/licenses/LICENSE-2.0 * * Designed and built with all the love in the world @twitter by @mdo and @fat. - * Date: Sat Jan 14 21:26:13 PST 2012 + * Date: Sat Jan 14 23:28:07 PST 2012 */ html, body { margin: 0; diff --git a/examples/container-app.html b/examples/container-app.html index 778bceacf6..788efcbf32 100644 --- a/examples/container-app.html +++ b/examples/container-app.html @@ -110,7 +110,7 @@ </div> <footer> - <p>© Company 2011</p> + <p>© Company 2012</p> </footer> </div> <!-- /container --> diff --git a/examples/fluid-reverse.html b/examples/fluid-reverse.html index 61aa08de99..c03cae723f 100644 --- a/examples/fluid-reverse.html +++ b/examples/fluid-reverse.html @@ -119,7 +119,7 @@ <hr> <footer> - <p>© Company 2011</p> + <p>© Company 2012</p> </footer> </div> </div> diff --git a/examples/fluid.html b/examples/fluid.html index bba78a329b..cb00fb85af 100644 --- a/examples/fluid.html +++ b/examples/fluid.html @@ -119,7 +119,7 @@ <hr> <footer> - <p>© Company 2011</p> + <p>© Company 2012</p> </footer> </div> </div> diff --git a/examples/hero.html b/examples/hero.html index 3a7a539839..9b82ba62a3 100644 --- a/examples/hero.html +++ b/examples/hero.html @@ -70,7 +70,7 @@ </div> <footer> - <p>© Company 2011</p> + <p>© Company 2012</p> </footer> </div> <!-- /container --> diff --git a/js/bootstrap-alert.js b/js/bootstrap-alert.js index 1ce8f01bff..96b9786aa7 100644 --- a/js/bootstrap-alert.js +++ b/js/bootstrap-alert.js @@ -2,7 +2,7 @@ * bootstrap-alert.js v2.0.0 * http://twitter.github.com/bootstrap/javascript.html#alerts * ========================================================== - * Copyright 2011 Twitter, Inc. + * Copyright 2012 Twitter, Inc. * * Licensed under the Apache License, Version 2.0 (the "License"); * you may not use this file except in compliance with the License. diff --git a/js/bootstrap-button.js b/js/bootstrap-button.js index cb0c45cdf1..046d256142 100644 --- a/js/bootstrap-button.js +++ b/js/bootstrap-button.js @@ -2,7 +2,7 @@ * bootstrap-buttons.js v2.0.0 * http://twitter.github.com/bootstrap/javascript.html#buttons * ============================================================ - * Copyright 2011 Twitter, Inc. + * Copyright 2012 Twitter, Inc. * * Licensed under the Apache License, Version 2.0 (the "License"); * you may not use this file except in compliance with the License. diff --git a/js/bootstrap-carousel.js b/js/bootstrap-carousel.js index c49f89ad80..f2d5110a4e 100644 --- a/js/bootstrap-carousel.js +++ b/js/bootstrap-carousel.js @@ -2,7 +2,7 @@ * bootstrap-carousel.js v2.0.0 * http://twitter.github.com/bootstrap/javascript.html#alerts * ========================================================== - * Copyright 2011 Twitter, Inc. + * Copyright 2012 Twitter, Inc. * * Licensed under the Apache License, Version 2.0 (the "License"); * you may not use this file except in compliance with the License. diff --git a/js/bootstrap-collapse.js b/js/bootstrap-collapse.js index 9301c7309d..2521b7c7a7 100644 --- a/js/bootstrap-collapse.js +++ b/js/bootstrap-collapse.js @@ -2,7 +2,7 @@ * bootstrap-collapsible.js v2.0.0 * http://twitter.github.com/bootstrap/javascript.html#collapsible * ============================================================= - * Copyright 2011 Twitter, Inc. + * Copyright 2012 Twitter, Inc. * * Licensed under the Apache License, Version 2.0 (the "License"); * you may not use this file except in compliance with the License. diff --git a/js/bootstrap-dropdown.js b/js/bootstrap-dropdown.js index 3cb2619929..923da6bfa6 100644 --- a/js/bootstrap-dropdown.js +++ b/js/bootstrap-dropdown.js @@ -2,7 +2,7 @@ * bootstrap-dropdown.js v2.0.0 * http://twitter.github.com/bootstrap/javascript.html#dropdown * ============================================================ - * Copyright 2011 Twitter, Inc. + * Copyright 2012 Twitter, Inc. * * Licensed under the Apache License, Version 2.0 (the "License"); * you may not use this file except in compliance with the License. diff --git a/js/bootstrap-modal.js b/js/bootstrap-modal.js index df4f3c7643..3652f5c8b5 100644 --- a/js/bootstrap-modal.js +++ b/js/bootstrap-modal.js @@ -2,7 +2,7 @@ * bootstrap-modal.js v2.0.0 * http://twitter.github.com/bootstrap/javascript.html#modal * ========================================================= - * Copyright 2011 Twitter, Inc. + * Copyright 2012 Twitter, Inc. * * Licensed under the Apache License, Version 2.0 (the "License"); * you may not use this file except in compliance with the License. diff --git a/js/bootstrap-popover.js b/js/bootstrap-popover.js index 9f60cbe957..e908998952 100644 --- a/js/bootstrap-popover.js +++ b/js/bootstrap-popover.js @@ -2,7 +2,7 @@ * bootstrap-popover.js v2.0.0 * http://twitter.github.com/bootstrap/javascript.html#popover * =========================================================== - * Copyright 2011 Twitter, Inc. + * Copyright 2012 Twitter, Inc. * * Licensed under the Apache License, Version 2.0 (the "License"); * you may not use this file except in compliance with the License. diff --git a/js/bootstrap-scrollspy.js b/js/bootstrap-scrollspy.js index 6201d4cefa..63195b4bdf 100644 --- a/js/bootstrap-scrollspy.js +++ b/js/bootstrap-scrollspy.js @@ -2,7 +2,7 @@ * bootstrap-scrollspy.js v2.0.0 * http://twitter.github.com/bootstrap/javascript.html#scrollspy * ============================================================= - * Copyright 2011 Twitter, Inc. + * Copyright 2012 Twitter, Inc. * * Licensed under the Apache License, Version 2.0 (the "License"); * you may not use this file except in compliance with the License. diff --git a/js/bootstrap-tab.js b/js/bootstrap-tab.js index 8492fe9558..e5b85e2325 100644 --- a/js/bootstrap-tab.js +++ b/js/bootstrap-tab.js @@ -2,7 +2,7 @@ * bootstrap-tabs.js v2.0.0 * http://twitter.github.com/bootstrap/javascript.html#tabs * ======================================================== - * Copyright 2011 Twitter, Inc. + * Copyright 2012 Twitter, Inc. * * Licensed under the Apache License, Version 2.0 (the "License"); * you may not use this file except in compliance with the License. diff --git a/js/bootstrap-tooltip.js b/js/bootstrap-tooltip.js index 8ce30ab82d..07a5d46f56 100644 --- a/js/bootstrap-tooltip.js +++ b/js/bootstrap-tooltip.js @@ -3,7 +3,7 @@ * http://twitter.github.com/bootstrap/javascript.html#tooltip * Inspired by the original jQuery.tipsy by Jason Frame * =========================================================== - * Copyright 2011 Twitter, Inc. + * Copyright 2012 Twitter, Inc. * * Licensed under the Apache License, Version 2.0 (the "License"); * you may not use this file except in compliance with the License. diff --git a/js/bootstrap-transition.js b/js/bootstrap-transition.js index 29fa1bdebc..aaaee4bd28 100644 --- a/js/bootstrap-transition.js +++ b/js/bootstrap-transition.js @@ -2,7 +2,7 @@ * bootstrap-transitions.js v2.0.0 * http://twitter.github.com/bootstrap/javascript.html * =================================================== - * Copyright 2011 Twitter, Inc. + * Copyright 2012 Twitter, Inc. * * Licensed under the Apache License, Version 2.0 (the "License"); * you may not use this file except in compliance with the License. diff --git a/js/bootstrap-typeahead.js b/js/bootstrap-typeahead.js index 180466a74b..b4957c3f61 100644 --- a/js/bootstrap-typeahead.js +++ b/js/bootstrap-typeahead.js @@ -2,7 +2,7 @@ * bootstrap-typeahead.js v2.0.0 * http://twitter.github.com/bootstrap/javascript.html#collapsible * ============================================================= - * Copyright 2011 Twitter, Inc. + * Copyright 2012 Twitter, Inc. * * Licensed under the Apache License, Version 2.0 (the "License"); * you may not use this file except in compliance with the License. diff --git a/js/tests/vendor/jquery.js b/js/tests/vendor/jquery.js index 01fbe13c82..4c7013a87d 100644 --- a/js/tests/vendor/jquery.js +++ b/js/tests/vendor/jquery.js @@ -1461,7 +1461,7 @@ jQuery.support = (function() { // Check if div with explicit width and no margin-right incorrectly // gets computed margin-right based on width of container. For more // info see bug #3333 - // Fails in WebKit before Feb 2011 nightlies + // Fails in WebKit before Feb 2012 nightlies // WebKit Bug 13343 - getComputedStyle returns wrong value for margin-right if ( window.getComputedStyle ) { marginDiv = document.createElement( "div" ); @@ -3837,7 +3837,7 @@ jQuery.each( ("blur focus focusin focusout load resize scroll unload click dblcl /*! * Sizzle CSS Selector Engine - * Copyright 2011, The Dojo Foundation + * Copyright 2012, The Dojo Foundation * Released under the MIT, BSD, and GPL Licenses. * More information: http://sizzlejs.com/ */ diff --git a/js/tests/vendor/qunit.css b/js/tests/vendor/qunit.css index 800dac541b..b3e3d002d7 100644 --- a/js/tests/vendor/qunit.css +++ b/js/tests/vendor/qunit.css @@ -3,7 +3,7 @@ * * http://docs.jquery.com/QUnit * - * Copyright (c) 2011 John Resig, Jörn Zaefferer + * Copyright (c) 2012 John Resig, Jörn Zaefferer * Dual licensed under the MIT (MIT-LICENSE.txt) * or GPL (GPL-LICENSE.txt) licenses. */ diff --git a/js/tests/vendor/qunit.js b/js/tests/vendor/qunit.js index 9047f97a01..46c95b298e 100644 --- a/js/tests/vendor/qunit.js +++ b/js/tests/vendor/qunit.js @@ -3,7 +3,7 @@ * * http://docs.jquery.com/QUnit * - * Copyright (c) 2011 John Resig, Jörn Zaefferer + * Copyright (c) 2012 John Resig, Jörn Zaefferer * Dual licensed under the MIT (MIT-LICENSE.txt) * or GPL (GPL-LICENSE.txt) licenses. */ diff --git a/lib/bootstrap.less b/lib/bootstrap.less index 43b5120863..db6a192f59 100644 --- a/lib/bootstrap.less +++ b/lib/bootstrap.less @@ -1,7 +1,7 @@ /*! * Bootstrap @VERSION * - * Copyright 2011 Twitter, Inc + * Copyright 2012 Twitter, Inc * Licensed under the Apache License v2.0 * http://www.apache.org/licenses/LICENSE-2.0 * diff --git a/lib/print.less b/lib/print.less index b45d016fdd..4fd45e2822 100644 --- a/lib/print.less +++ b/lib/print.less @@ -1,7 +1,7 @@ /*! * Bootstrap @VERSION for Print * - * Copyright 2011 Twitter, Inc + * Copyright 2012 Twitter, Inc * Licensed under the Apache License v2.0 * http://www.apache.org/licenses/LICENSE-2.0 * -- GitLab From f989c6892f690cf46b0e67158ebb621c3fe690fe Mon Sep 17 00:00:00 2001 From: Mark Otto <markdotto@gmail.com> Date: Sat, 14 Jan 2012 23:33:42 -0800 Subject: [PATCH 292/318] gray out links for active state on pagination --- bootstrap.css | 5 ++++- bootstrap.min.css | 1 + lib/pagination.less | 3 +++ 3 files changed, 8 insertions(+), 1 deletion(-) diff --git a/bootstrap.css b/bootstrap.css index 9a4e6e1111..37241baf0f 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: Sat Jan 14 23:28:07 PST 2012 + * Date: Sat Jan 14 23:33:26 PST 2012 */ html, body { margin: 0; @@ -2107,6 +2107,9 @@ i { .pagination a:hover, .pagination .active a { background-color: #f5f5f5; } +.pagination .active a { + color: #999999; +} .pagination .disabled a, .pagination .disabled a:hover { color: #999999; background-color: transparent; diff --git a/bootstrap.min.css b/bootstrap.min.css index 1832263f0b..6cc8946a5c 100644 --- a/bootstrap.min.css +++ b/bootstrap.min.css @@ -406,6 +406,7 @@ i{background-image:url(docs/assets/img/glyphicons-halflings-sprite.png);backgrou .pagination li{display:inline;} .pagination a{float:left;padding:0 14px;line-height:34px;text-decoration:none;border-right:1px solid #ddd;border-right:1px solid rgba(0, 0, 0, 0.15);} .pagination a:hover,.pagination .active a{background-color:#f5f5f5;} +.pagination .active a{color:#999999;} .pagination .disabled a,.pagination .disabled a:hover{color:#999999;background-color:transparent;cursor:default;} .pagination li:last-child a{border:0;} .pagination-centered{text-align:center;} diff --git a/lib/pagination.less b/lib/pagination.less index 655abe5a38..064362b7bc 100644 --- a/lib/pagination.less +++ b/lib/pagination.less @@ -30,6 +30,9 @@ .pagination .active a { background-color: #f5f5f5; } +.pagination .active a { + color: @grayLight; +} .pagination .disabled a, .pagination .disabled a:hover { color: @grayLight; -- GitLab From ed9903f797fa6d94789d05c234164bd378a1f3df Mon Sep 17 00:00:00 2001 From: Paul Kauders <kauders@gmail.com> Date: Sun, 15 Jan 2012 07:46:25 -0600 Subject: [PATCH 293/318] Fix typo in Responsive design content --- docs/index.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/index.html b/docs/index.html index cb924bae6d..40ffce1060 100644 --- a/docs/index.html +++ b/docs/index.html @@ -215,7 +215,7 @@ <div class="span4"> <img class="icon" src="assets/img/glyphicons/glyphicons_214_resize_small.png"> <h2>Responsive design</h2> - <p>With Bootstrap 2, we've gone fully responsive. Our components are scale according to a range of resolutions and devices to provide a consistent experience, no matter what.</p> + <p>With Bootstrap 2, we've gone fully responsive. Our components are scaled according to a range of resolutions and devices to provide a consistent experience, no matter what.</p> </div> <div class="span4"> <img class="icon" src="assets/img/glyphicons/glyphicons_266_book_open.png"> -- GitLab From 8ceea1f559fb432fc12df32153911de89caea36f Mon Sep 17 00:00:00 2001 From: Mark Otto <markdotto@gmail.com> Date: Sun, 15 Jan 2012 11:26:06 -0800 Subject: [PATCH 294/318] fix some ie7 bugs, improve dropdowns for ie due to lack of a shadow, fix pager example code --- bootstrap.css | 9 ++++++--- bootstrap.min.css | 6 +++--- docs/assets/css/docs.css | 20 +++++++++----------- docs/components.html | 4 ++-- docs/index.html | 7 +++---- lib/dropdowns.less | 5 ++++- lib/tables.less | 2 +- 7 files changed, 28 insertions(+), 25 deletions(-) diff --git a/bootstrap.css b/bootstrap.css index 37241baf0f..7e2ba80237 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: Sat Jan 14 23:33:26 PST 2012 + * Date: Sun Jan 15 00:04:02 PST 2012 */ html, body { margin: 0; @@ -1116,7 +1116,7 @@ table .header:after { visibility: hidden; } table .headerSortUp, table .headerSortDown { - background-color: rgba(141, 192, 219, 0.25); + background-color: #f7f7f9; text-shadow: 0 1px 1px rgba(255, 255, 255, 0.75); } table .header:hover:after { @@ -1440,6 +1440,7 @@ i { .dropdown .caret { margin-top: 8px; margin-left: 2px; + *margin-top: 7px; } .dropdown:hover .caret, .open.dropdown .caret { filter: alpha(opacity=100); @@ -1459,7 +1460,7 @@ i { margin: 0; list-style: none; background-color: #ffffff; - border-color: #999; + border-color: #ccc; border-color: rgba(0, 0, 0, 0.2); border-style: solid; border-width: 1px; @@ -1473,6 +1474,8 @@ i { -moz-background-clip: padding; background-clip: padding-box; zoom: 1; + *border-right-width: 2px; + *border-bottom-width: 2px; } .dropdown-menu .divider { height: 1px; diff --git a/bootstrap.min.css b/bootstrap.min.css index 6cc8946a5c..6b55745ea7 100644 --- a/bootstrap.min.css +++ b/bootstrap.min.css @@ -203,7 +203,7 @@ table .span10{float:none;width:764px;margin-left:0;} table .span11{float:none;width:844px;margin-left:0;} table .span12{float:none;width:924px;margin-left:0;} table .header{cursor:pointer;}table .header:after{content:"";float:right;margin-top:7px;border-width:0 4px 4px;border-style:solid;border-color:#000 transparent;visibility:hidden;} -table .headerSortUp,table .headerSortDown{background-color:rgba(141, 192, 219, 0.25);text-shadow:0 1px 1px rgba(255, 255, 255, 0.75);} +table .headerSortUp,table .headerSortDown{background-color:#f7f7f9;text-shadow:0 1px 1px rgba(255, 255, 255, 0.75);} table .header:hover:after{visibility:visible;} table .headerSortDown:after,table .headerSortDown:hover:after{visibility:visible;filter:alpha(opacity=60);-moz-opacity:0.6;opacity:0.6;} table .headerSortUp:after{border-bottom:none;border-left:4px solid transparent;border-right:4px solid transparent;border-top:4px solid #000;visibility:visible;-webkit-box-shadow:none;-moz-box-shadow:none;box-shadow:none;filter:alpha(opacity=60);-moz-opacity:0.6;opacity:0.6;} @@ -300,9 +300,9 @@ i{background-image:url(docs/assets/img/glyphicons-halflings-sprite.png);backgrou .asterisk{background-position:-456px -96px;} .dropdown{position:relative;} .caret{display:inline-block;width:0;height:0;text-indent:-99999px;vertical-align:top;border-left:4px solid transparent;border-right:4px solid transparent;border-top:4px solid #000;filter:alpha(opacity=30);-moz-opacity:0.3;opacity:0.3;content:"\2193";} -.dropdown .caret{margin-top:8px;margin-left:2px;} +.dropdown .caret{margin-top:8px;margin-left:2px;*margin-top:7px;} .dropdown:hover .caret,.open.dropdown .caret{filter:alpha(opacity=100);-moz-opacity:1;opacity:1;} -.dropdown-menu{position:absolute;top:40px;z-index:1000;float:left;display:none;min-width:160px;max-width:220px;_width:160px;padding:4px 0;margin:0;list-style:none;background-color:#ffffff;border-color:#999;border-color:rgba(0, 0, 0, 0.2);border-style:solid;border-width:1px;-webkit-border-radius:0 0 5px 5px;-moz-border-radius:0 0 5px 5px;border-radius:0 0 5px 5px;-webkit-box-shadow:0 5px 10px rgba(0, 0, 0, 0.2);-moz-box-shadow:0 5px 10px rgba(0, 0, 0, 0.2);box-shadow:0 5px 10px rgba(0, 0, 0, 0.2);-webkit-background-clip:padding-box;-moz-background-clip:padding;background-clip:padding-box;zoom:1;}.dropdown-menu .divider{height:1px;margin:5px 1px;overflow:hidden;background-color:#e5e5e5;border-bottom:1px solid #ffffff;} +.dropdown-menu{position:absolute;top:40px;z-index:1000;float:left;display:none;min-width:160px;max-width:220px;_width:160px;padding:4px 0;margin:0;list-style:none;background-color:#ffffff;border-color:#ccc;border-color:rgba(0, 0, 0, 0.2);border-style:solid;border-width:1px;-webkit-border-radius:0 0 5px 5px;-moz-border-radius:0 0 5px 5px;border-radius:0 0 5px 5px;-webkit-box-shadow:0 5px 10px rgba(0, 0, 0, 0.2);-moz-box-shadow:0 5px 10px rgba(0, 0, 0, 0.2);box-shadow:0 5px 10px rgba(0, 0, 0, 0.2);-webkit-background-clip:padding-box;-moz-background-clip:padding;background-clip:padding-box;zoom:1;*border-right-width:2px;*border-bottom-width:2px;}.dropdown-menu .divider{height:1px;margin:5px 1px;overflow:hidden;background-color:#e5e5e5;border-bottom:1px solid #ffffff;} .dropdown-menu a{display:block;padding:3px 15px;clear:both;font-weight:normal;line-height:18px;color:#555555;white-space:nowrap;} .dropdown-menu li>a:hover,.dropdown-menu .active>a,.dropdown-menu .active>a:hover{color:#fff;text-decoration:none;background-color:#0088cc;} .dropdown.open .dropdown-toggle{color:#ffffff;background:#ccc;background:rgba(0, 0, 0, 0.3);} diff --git a/docs/assets/css/docs.css b/docs/assets/css/docs.css index 2f45032f2e..416b1830cd 100644 --- a/docs/assets/css/docs.css +++ b/docs/assets/css/docs.css @@ -130,6 +130,7 @@ section { /* Quick links -------------------------------------------------- */ .quick-links { + min-height: 30px; padding: 5px 20px; margin: 45px 0; list-style: none; @@ -141,11 +142,11 @@ section { -webkit-box-shadow: inset 0 1px 0 rgba(0,0,0,.03); -moz-box-shadow: inset 0 1px 0 rgba(0,0,0,.03); box-shadow: inset 0 1px 0 rgba(0,0,0,.03); + overflow: hidden; } .quick-links li { display: inline; margin: 0 5px; - line-height: 30px; } .quick-links .divider { color: #999; @@ -258,7 +259,7 @@ section { -ms-box-sizing: border-box; /* IE8 */ box-sizing: border-box; /* CSS3 spec*/ /* Hacks for IE7 to make this work just okay enough to function */ - *width: 90%; + *width: 270px; *height: 24px; } @@ -386,7 +387,7 @@ section { .popover-well .popover-menu-wrapper { height: 80px; } -img.large-bird { +.large-bird { margin: 5px 0 0 310px; opacity: .1; } @@ -467,9 +468,6 @@ form.well { /* Icons ------------------------- */ -.the-icons { - -} .the-icons i { display: block; margin-bottom: 5px; @@ -483,11 +481,11 @@ form.well { width: 100px; } -#javascript input[type='checkbox'] { -display: inline; -margin-left: 6px; -position: relative; -top: -1px; +#javascript input[type=checkbox] { + position: relative; + top: -1px; + display: inline; + margin-left: 6px; } diff --git a/docs/components.html b/docs/components.html index e88bd777c8..83a0244565 100644 --- a/docs/components.html +++ b/docs/components.html @@ -958,10 +958,10 @@ </ul> <pre class="prettyprint linenums"> <ul class="pager"> - <li> + <li class="previous"> <a href="#">&larr; Older</a> </li> - <li> + <li class="next"> <a href="#">Newer &rarr;</a> </li> </ul> diff --git a/docs/index.html b/docs/index.html index cb924bae6d..736352b439 100644 --- a/docs/index.html +++ b/docs/index.html @@ -119,7 +119,6 @@ <p class="download-info"> <a href="https://github.com/twitter/bootstrap/" class="btn primary btn-large">Download on GitHub</a> <a href="./scaffolding.html" class="btn btn-large">Get started →</a> - Currently v2.0.0 </p> <div class="benefits"> @@ -145,10 +144,10 @@ <li><a href="https://github.com/twitter/bootstrap/wiki/Changelog">Changelog</a></li> <li class="divider">·</li> <li> - <iframe class="github-btn" src="http://markdotto.github.com/github-buttons/github-btn.html?user=twitter&repo=bootstrap&type=watch&count=true" allowtransparency="true" frameborder="0" scrolling="0" width="110px" height="20px"></iframe> + <iframe class="github-btn" src="http://markdotto.github.com/github-buttons/github-btn.html?user=twitter&repo=bootstrap&type=watch&count=true" allowtransparency="true" frameborder="0" scrolling="0" width="114px" height="20px"></iframe> </li> <li> - <iframe class="github-btn" src="http://markdotto.github.com/github-buttons/github-btn.html?user=twitter&repo=bootstrap&type=fork&count=true" allowtransparency="true" frameborder="0" scrolling="0" width="94px" height="20px"></iframe> + <iframe class="github-btn" src="http://markdotto.github.com/github-buttons/github-btn.html?user=twitter&repo=bootstrap&type=fork&count=true" allowtransparency="true" frameborder="0" scrolling="0" width="98px" height="20px"></iframe> </li> <!-- <li><strong>Authors</strong></li> @@ -288,7 +287,7 @@ </td> <td class="quick-start"> <h3>Fork on GitHub</h3> - <p>Download, fork, pull, file issues, and more with the official Bootstrap repo on Github.</p> + <p>Download, fork, pull, file issues, and more with the Bootstrap GitHub repo.</p> <p><a target="_blank" href="https://github.com/twitter/bootstrap" class="btn primary">Bootstrap on GitHub »</a></p> <p class="current-version">Currently <a href="https://github.com/twitter/bootstrap/wiki/Changelog">v2.0.0</a></p> </td> diff --git a/lib/dropdowns.less b/lib/dropdowns.less index e2d5fef259..08054713ce 100644 --- a/lib/dropdowns.less +++ b/lib/dropdowns.less @@ -21,6 +21,7 @@ .dropdown .caret { margin-top: 8px; margin-left: 2px; + *margin-top: 7px; } .dropdown:hover .caret, .open.dropdown .caret { @@ -40,7 +41,7 @@ margin: 0; // override default ul list-style: none; background-color: @white; - border-color: #999; + border-color: #ccc; border-color: rgba(0,0,0,.2); border-style: solid; border-width: 1px; @@ -50,6 +51,8 @@ -moz-background-clip: padding; background-clip: padding-box; zoom: 1; // do we need this? + *border-right-width: 2px; + *border-bottom-width: 2px; // Dividers (basically an hr) within the dropdown .divider { diff --git a/lib/tables.less b/lib/tables.less index 5b803b3dfe..1edd9e3b80 100644 --- a/lib/tables.less +++ b/lib/tables.less @@ -152,7 +152,7 @@ table { // Style the sorted column headers (THs) .headerSortUp, .headerSortDown { - background-color: rgba(141,192,219,.25); + background-color: #f7f7f9; text-shadow: 0 1px 1px rgba(255,255,255,.75); } // Style the ascending (reverse alphabetical) column header -- GitLab From fe160261e460903cae251de25eaf41f236bd051e Mon Sep 17 00:00:00 2001 From: Mark Otto <markdotto@gmail.com> Date: Sun, 15 Jan 2012 11:30:24 -0800 Subject: [PATCH 295/318] normalize the alert classes to match last night's flip for form and table classes --- bootstrap.css | 26 +++++++++++++------------- bootstrap.min.css | 18 +++++++++--------- docs/components.html | 20 ++++++++++---------- lib/alerts.less | 32 ++++++++++++++++---------------- 4 files changed, 48 insertions(+), 48 deletions(-) diff --git a/bootstrap.css b/bootstrap.css index 7e2ba80237..c61c20987f 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 Jan 15 00:04:02 PST 2012 + * Date: Sun Jan 15 11:29:00 PST 2012 */ html, body { margin: 0; @@ -2689,38 +2689,38 @@ button.btn::-moz-focus-inner, input[type=submit].btn::-moz-focus-inner { margin-right: -21px; } -.success-alert { +.alert-success { background-color: #dff0d8; border-color: #cfe8c4; } -.success-alert, .success-alert .alert-heading { +.alert-success, .alert-success .alert-heading { color: #468847; } -.danger-alert, .error-alert { +.alert-danger, .alert-error { background-color: #f2dede; border-color: #e9c7c7; } -.danger-alert, -.error-alert, -.danger-alert .alert-heading, -.error-alert .alert-heading { +.alert-danger, +.alert-error, +.alert-danger .alert-heading, +.alert-error .alert-heading { color: #B94A48; } -.info-alert { +.alert-info { background-color: #d9edf7; border-color: #bfe1f2; } -.info-alert, .info-alert .alert-heading { +.alert-info, .alert-info .alert-heading { color: #3a87ad; } -.block-alert { +.alert-block { padding-top: 14px; padding-bottom: 14px; } -.block-alert > p, .block-alert > ul { +.alert-block > p, .alert-block > ul { margin-bottom: 0; } -.block-alert p + p { +.alert-block p + p { margin-top: 5px; } .thumbnails { diff --git a/bootstrap.min.css b/bootstrap.min.css index 6b55745ea7..ceec492dbd 100644 --- a/bootstrap.min.css +++ b/bootstrap.min.css @@ -481,15 +481,15 @@ button.btn::-moz-focus-inner,input[type=submit].btn::-moz-focus-inner{padding:0; .alert{position:relative;padding:8px 35px 8px 14px;margin-bottom:18px;text-shadow:0 1px 0 rgba(255, 255, 255, 0.5);background-color:#fcf8e3;border:1px solid #f3edd2;-webkit-border-radius:4px;-moz-border-radius:4px;border-radius:4px;} .alert,.alert-heading{color:#c09853;} .alert>.close{*margin-top:3px;margin-right:-21px;} -.success-alert{background-color:#dff0d8;border-color:#cfe8c4;} -.success-alert,.success-alert .alert-heading{color:#468847;} -.danger-alert,.error-alert{background-color:#f2dede;border-color:#e9c7c7;} -.danger-alert,.error-alert,.danger-alert .alert-heading,.error-alert .alert-heading{color:#B94A48;} -.info-alert{background-color:#d9edf7;border-color:#bfe1f2;} -.info-alert,.info-alert .alert-heading{color:#3a87ad;} -.block-alert{padding-top:14px;padding-bottom:14px;} -.block-alert>p,.block-alert>ul{margin-bottom:0;} -.block-alert p+p{margin-top:5px;} +.alert-success{background-color:#dff0d8;border-color:#cfe8c4;} +.alert-success,.alert-success .alert-heading{color:#468847;} +.alert-danger,.alert-error{background-color:#f2dede;border-color:#e9c7c7;} +.alert-danger,.alert-error,.alert-danger .alert-heading,.alert-error .alert-heading{color:#B94A48;} +.alert-info{background-color:#d9edf7;border-color:#bfe1f2;} +.alert-info,.alert-info .alert-heading{color:#3a87ad;} +.alert-block{padding-top:14px;padding-bottom:14px;} +.alert-block>p,.alert-block>ul{margin-bottom:0;} +.alert-block p+p{margin-top:5px;} .thumbnails{margin-left:-20px;margin-bottom:0;list-style:none;zoom:1;}.thumbnails:before,.thumbnails:after{display:table;*display:inline;content:"";zoom:1;} .thumbnails:after{clear:both;} .thumbnails>li{float:left;margin:0 0 20px 20px;} diff --git a/docs/components.html b/docs/components.html index 83a0244565..c9390272d6 100644 --- a/docs/components.html +++ b/docs/components.html @@ -1132,7 +1132,7 @@ <h3>Rewritten base class</h3> <p>With Bootstrap 2, we've simplified the base class: <code>.alert</code> instead of <code>.alert-message</code>. We've also reduced the minimum required markup—no <code><p></code> is required by default, just the outter <code><div></code>.</p> <h3>Single alert message</h3> - <p>For a more durable component with less code, we've removed the differentiating look for block alerts, messages that com with more padding and typically more text. The class also has changed to <code>.block-alert</code>.</p> + <p>For a more durable component with less code, we've removed the differentiating look for block alerts, messages that com with more padding and typically more text. The class also has changed to <code>.alert-block</code>.</p> <hr> <h3>Goes great with javascript</h3> <p>Bootstrap comes with a great jQuery plugin that supports alert messages, making dismissing them quick and easy.</p> @@ -1151,14 +1151,14 @@ <strong>Warning!</strong> Best check yo self, you’re not looking too good. </div> </pre> - <p>Easily extend the standard alert message with two optional classes: <code>.block-alert</code> for more padding and text controls and <code>.alert-heading</code> for a matching heading.</p> - <div class="alert block-alert"> + <p>Easily extend the standard alert message with two optional classes: <code>.alert-block</code> for more padding and text controls and <code>.alert-heading</code> for a matching heading.</p> + <div class="alert alert-block"> <a class="close">×</a> <h4 class="alert-heading">Warning!</h4> <p>Best check yo self, you’re not looking too good. Nulla vitae elit libero, a pharetra augue. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.</p> </div> <pre class="prettyprint linenums"> -<div class="alert block-alert"> +<div class="alert alert-block"> <a class="close">×</a> <h4 class="alert-heading">Warning!</h4> Best check yo self, you’re not... @@ -1171,36 +1171,36 @@ <div class="row"> <div class="span4"> <h3>Error or danger</h3> - <div class="alert error-alert"> + <div class="alert alert-error"> <a class="close">×</a> <strong>Oh snap!</strong> Change a few things up and try submitting again. </div> <pre class="prettyprint linenums"> -<div class="alert error-alert"> +<div class="alert alert-error"> ... </div> </pre> </div> <div class="span4"> <h3>Success</h3> - <div class="alert success-alert"> + <div class="alert alert-success"> <a class="close">×</a> <strong>Well done!</strong> You successfully read this important alert message. </div> <pre class="prettyprint linenums"> -<div class="alert success-alert"> +<div class="alert alert-success"> ... </div> </pre> </div> <div class="span4"> <h3>Information</h3> - <div class="alert info-alert"> + <div class="alert alert-info"> <a class="close">×</a> <strong>Heads up!</strong> This alert needs your attention, but it’s not super important. </div> <pre class="prettyprint linenums"> -<div class="alert info-alert"> +<div class="alert alert-info"> ... </div> </pre> diff --git a/lib/alerts.less b/lib/alerts.less index d1cd8addd5..a338f502a1 100644 --- a/lib/alerts.less +++ b/lib/alerts.less @@ -25,45 +25,45 @@ // Alternate styles // ---------------- -.success-alert { +.alert-success { background-color: #dff0d8; border-color: #cfe8c4; } -.success-alert, -.success-alert .alert-heading { +.alert-success, +.alert-success .alert-heading { color: #468847; } -.danger-alert, -.error-alert { +.alert-danger, +.alert-error { background-color: #f2dede; border-color: #e9c7c7; } -.danger-alert, -.error-alert, -.danger-alert .alert-heading, -.error-alert .alert-heading { +.alert-danger, +.alert-error, +.alert-danger .alert-heading, +.alert-error .alert-heading { color: #B94A48; } -.info-alert { +.alert-info { background-color: #d9edf7; border-color: #bfe1f2; } -.info-alert, -.info-alert .alert-heading { +.alert-info, +.alert-info .alert-heading { color: #3a87ad; } // Block alerts // ------------------------ -.block-alert { +.alert-block { padding-top: 14px; padding-bottom: 14px; } -.block-alert > p, -.block-alert > ul { +.alert-block > p, +.alert-block > ul { margin-bottom: 0; } -.block-alert p + p { +.alert-block p + p { margin-top: 5px; } \ No newline at end of file -- GitLab From 9f732e90d4e8f3a598a798fb8b29a4f59c0b7631 Mon Sep 17 00:00:00 2001 From: Mark Otto <markdotto@gmail.com> Date: Sun, 15 Jan 2012 11:33:30 -0800 Subject: [PATCH 296/318] make horizontal form labels map to default grid sizing --- bootstrap.css | 11 ++++------- bootstrap.min.css | 7 +++---- lib/forms.less | 10 +++------- 3 files changed, 10 insertions(+), 18 deletions(-) diff --git a/bootstrap.css b/bootstrap.css index c61c20987f..a11fed8952 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 Jan 15 11:29:00 PST 2012 + * Date: Sun Jan 15 11:32:55 PST 2012 */ html, body { margin: 0; @@ -963,20 +963,17 @@ input::-webkit-input-placeholder { .control-group { margin-bottom: 18px; } -.control-group > label { - font-weight: bold; -} .form-horizontal .control-group > label { float: left; - width: 130px; + width: 120px; padding-top: 5px; text-align: right; } .form-horizontal .controls { - margin-left: 150px; + margin-left: 140px; } .form-horizontal .form-actions { - padding-left: 150px; + padding-left: 140px; } table { width: 100%; diff --git a/bootstrap.min.css b/bootstrap.min.css index ceec492dbd..524ac7f098 100644 --- a/bootstrap.min.css +++ b/bootstrap.min.css @@ -172,10 +172,9 @@ input::-webkit-input-placeholder{color:#999999;} .form-search input,.form-inline input,.form-horizontal input,.form-search textarea,.form-inline textarea,.form-horizontal textarea,.form-search select,.form-inline select,.form-horizontal select,.form-search .uneditable-input,.form-inline .uneditable-input,.form-horizontal .uneditable-input{display:inline-block;margin-bottom:0;} .form-search label,.form-inline label{display:inline-block;} .control-group{margin-bottom:18px;} -.control-group>label{font-weight:bold;} -.form-horizontal .control-group>label{float:left;width:130px;padding-top:5px;text-align:right;} -.form-horizontal .controls{margin-left:150px;} -.form-horizontal .form-actions{padding-left:150px;} +.form-horizontal .control-group>label{float:left;width:120px;padding-top:5px;text-align:right;} +.form-horizontal .controls{margin-left:140px;} +.form-horizontal .form-actions{padding-left:140px;} table{width:100%;margin-bottom:18px;} th,td{padding:8px;line-height:18px;text-align:left;border-top:1px solid #ddd;} th{font-weight:bold;vertical-align:bottom;} diff --git a/lib/forms.less b/lib/forms.less index 04e684c99c..ef4804afc3 100644 --- a/lib/forms.less +++ b/lib/forms.less @@ -461,10 +461,6 @@ input::-webkit-input-placeholder { .control-group { margin-bottom: @baseLineHeight; } -// Bold the labels so they stand out -.control-group > label { - font-weight: bold; -} // Horizontal-specific styles // -------------------------- @@ -473,16 +469,16 @@ input::-webkit-input-placeholder { // Float the labels left .control-group > label { float: left; - width: 130px; + width: 120px; padding-top: 5px; text-align: right; } // Move over all input controls and content .controls { - margin-left: 150px; + margin-left: 140px; } // Move over buttons in .form-actions to align with .controls .form-actions { - padding-left: 150px; + padding-left: 140px; } } -- GitLab From 6077b7678c8d21eeb4bc33bbfede20a4cc41fa11 Mon Sep 17 00:00:00 2001 From: Mark Otto <markdotto@gmail.com> Date: Sun, 15 Jan 2012 11:41:46 -0800 Subject: [PATCH 297/318] fix modal horizontal alignment --- bootstrap.css | 4 ++-- bootstrap.min.css | 2 +- lib/modals.less | 2 +- 3 files changed, 4 insertions(+), 4 deletions(-) diff --git a/bootstrap.css b/bootstrap.css index a11fed8952..798f808b30 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 Jan 15 11:32:55 PST 2012 + * Date: Sun Jan 15 11:41:37 PST 2012 */ html, body { margin: 0; @@ -2182,7 +2182,7 @@ i { max-height: 500px; overflow: auto; width: 560px; - margin: -250px 0 0 -250px; + margin: -250px 0 0 -280px; background-color: #ffffff; border: 1px solid #999; border: 1px solid rgba(0, 0, 0, 0.3); diff --git a/bootstrap.min.css b/bootstrap.min.css index 524ac7f098..04e3d61383 100644 --- a/bootstrap.min.css +++ b/bootstrap.min.css @@ -418,7 +418,7 @@ i{background-image:url(docs/assets/img/glyphicons-halflings-sprite.png);backgrou .pager .previous a{float:left;} .modal-backdrop{position:fixed;top:0;right:0;bottom:0;left:0;z-index:1040;background-color:#000000;}.modal-backdrop.fade{opacity:0;} .modal-backdrop,.modal-backdrop.fade.in{filter:alpha(opacity=80);-moz-opacity:0.8;opacity:0.8;} -.modal{position:fixed;top:50%;left:50%;z-index:1050;max-height:500px;overflow:auto;width:560px;margin:-250px 0 0 -250px;background-color:#ffffff;border:1px solid #999;border:1px solid rgba(0, 0, 0, 0.3);*border:1px solid #999;-webkit-border-radius:6px;-moz-border-radius:6px;border-radius:6px;-webkit-box-shadow:0 3px 7px rgba(0, 0, 0, 0.3);-moz-box-shadow:0 3px 7px rgba(0, 0, 0, 0.3);box-shadow:0 3px 7px rgba(0, 0, 0, 0.3);-webkit-background-clip:padding-box;-moz-background-clip:padding-box;background-clip:padding-box;}.modal.fade{-webkit-transition:opacity .3s linear, top .3s ease-out;-moz-transition:opacity .3s linear, top .3s ease-out;-ms-transition:opacity .3s linear, top .3s ease-out;-o-transition:opacity .3s linear, top .3s ease-out;transition:opacity .3s linear, top .3s ease-out;top:-25%;} +.modal{position:fixed;top:50%;left:50%;z-index:1050;max-height:500px;overflow:auto;width:560px;margin:-250px 0 0 -280px;background-color:#ffffff;border:1px solid #999;border:1px solid rgba(0, 0, 0, 0.3);*border:1px solid #999;-webkit-border-radius:6px;-moz-border-radius:6px;border-radius:6px;-webkit-box-shadow:0 3px 7px rgba(0, 0, 0, 0.3);-moz-box-shadow:0 3px 7px rgba(0, 0, 0, 0.3);box-shadow:0 3px 7px rgba(0, 0, 0, 0.3);-webkit-background-clip:padding-box;-moz-background-clip:padding-box;background-clip:padding-box;}.modal.fade{-webkit-transition:opacity .3s linear, top .3s ease-out;-moz-transition:opacity .3s linear, top .3s ease-out;-ms-transition:opacity .3s linear, top .3s ease-out;-o-transition:opacity .3s linear, top .3s ease-out;transition:opacity .3s linear, top .3s ease-out;top:-25%;} .modal.fade.in{top:50%;} .modal-header{padding:5px 15px;border-bottom:1px solid #eee;}.modal-header .close{margin-top:7px;} .modal-body{padding:15px;} diff --git a/lib/modals.less b/lib/modals.less index 46fcd880b9..fe3f295b0b 100644 --- a/lib/modals.less +++ b/lib/modals.less @@ -26,7 +26,7 @@ max-height: 500px; overflow: auto; width: 560px; - margin: -250px 0 0 -250px; + margin: -250px 0 0 -280px; background-color: @white; border: 1px solid #999; border: 1px solid rgba(0,0,0,.3); -- GitLab From f43f2c0ea269e72251e7f858b44ccef966d079af Mon Sep 17 00:00:00 2001 From: Mark Otto <markdotto@gmail.com> Date: Sun, 15 Jan 2012 12:53:35 -0800 Subject: [PATCH 298/318] fix grid sized horizontal form layout --- bootstrap.css | 8 ++++---- bootstrap.min.css | 6 +++--- lib/forms.less | 6 +++--- 3 files changed, 10 insertions(+), 10 deletions(-) diff --git a/bootstrap.css b/bootstrap.css index 798f808b30..a57618dc01 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 Jan 15 11:41:37 PST 2012 + * Date: Sun Jan 15 12:53:17 PST 2012 */ html, body { margin: 0; @@ -965,15 +965,15 @@ input::-webkit-input-placeholder { } .form-horizontal .control-group > label { float: left; - width: 120px; + width: 140px; padding-top: 5px; text-align: right; } .form-horizontal .controls { - margin-left: 140px; + margin-left: 160px; } .form-horizontal .form-actions { - padding-left: 140px; + padding-left: 160px; } table { width: 100%; diff --git a/bootstrap.min.css b/bootstrap.min.css index 04e3d61383..1ef582c03a 100644 --- a/bootstrap.min.css +++ b/bootstrap.min.css @@ -172,9 +172,9 @@ input::-webkit-input-placeholder{color:#999999;} .form-search input,.form-inline input,.form-horizontal input,.form-search textarea,.form-inline textarea,.form-horizontal textarea,.form-search select,.form-inline select,.form-horizontal select,.form-search .uneditable-input,.form-inline .uneditable-input,.form-horizontal .uneditable-input{display:inline-block;margin-bottom:0;} .form-search label,.form-inline label{display:inline-block;} .control-group{margin-bottom:18px;} -.form-horizontal .control-group>label{float:left;width:120px;padding-top:5px;text-align:right;} -.form-horizontal .controls{margin-left:140px;} -.form-horizontal .form-actions{padding-left:140px;} +.form-horizontal .control-group>label{float:left;width:140px;padding-top:5px;text-align:right;} +.form-horizontal .controls{margin-left:160px;} +.form-horizontal .form-actions{padding-left:160px;} table{width:100%;margin-bottom:18px;} th,td{padding:8px;line-height:18px;text-align:left;border-top:1px solid #ddd;} th{font-weight:bold;vertical-align:bottom;} diff --git a/lib/forms.less b/lib/forms.less index ef4804afc3..703accff80 100644 --- a/lib/forms.less +++ b/lib/forms.less @@ -469,16 +469,16 @@ input::-webkit-input-placeholder { // Float the labels left .control-group > label { float: left; - width: 120px; + width: 140px; padding-top: 5px; text-align: right; } // Move over all input controls and content .controls { - margin-left: 140px; + margin-left: 160px; } // Move over buttons in .form-actions to align with .controls .form-actions { - padding-left: 140px; + padding-left: 160px; } } -- GitLab From 127c0d0b52c52227dcd3f346d371e5cd4219a08f Mon Sep 17 00:00:00 2001 From: Mark Otto <markdotto@gmail.com> Date: Sun, 15 Jan 2012 13:12:29 -0800 Subject: [PATCH 299/318] make dl and child elements less specific --- bootstrap.css | 8 ++++---- bootstrap.min.css | 7 ++++--- docs/components.html | 18 +++++++----------- lib/type.less | 19 ++++++++++--------- 4 files changed, 25 insertions(+), 27 deletions(-) diff --git a/bootstrap.css b/bootstrap.css index a57618dc01..b5f7949e5c 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 Jan 15 12:53:17 PST 2012 + * Date: Sun Jan 15 13:11:42 PST 2012 */ html, body { margin: 0; @@ -418,13 +418,13 @@ ul.unstyled { dl { margin-bottom: 18px; } -dl dt, dl dd { +dt, dd { line-height: 18px; } -dl dt { +dt { font-weight: bold; } -dl dd { +dd { margin-left: 9px; } hr { diff --git a/bootstrap.min.css b/bootstrap.min.css index 1ef582c03a..2cd9ad8374 100644 --- a/bootstrap.min.css +++ b/bootstrap.min.css @@ -73,9 +73,10 @@ ul{list-style:disc;} ol{list-style:decimal;} li{line-height:18px;} ul.unstyled{margin-left:0;list-style:none;} -dl{margin-bottom:18px;}dl dt,dl dd{line-height:18px;} -dl dt{font-weight:bold;} -dl dd{margin-left:9px;} +dl{margin-bottom:18px;} +dt,dd{line-height:18px;} +dt{font-weight:bold;} +dd{margin-left:9px;} hr{margin:18px 0;border:0;border-top:1px solid #e5e5e5;border-bottom:1px solid #fff;} strong{font-style:inherit;font-weight:bold;} em{font-style:italic;font-weight:inherit;line-height:inherit;} diff --git a/docs/components.html b/docs/components.html index c9390272d6..1343a4279d 100644 --- a/docs/components.html +++ b/docs/components.html @@ -865,33 +865,29 @@ <p>The default pagination component is flexible and works in a number of variations.</p> <div class="pagination"> <ul> - <li class="disabled"><a href="#">← Prev</a></li> + <li class="disabled"><a href="#">«</a></li> <li class="active"><a href="#">1</a></li> <li><a href="#">2</a></li> <li><a href="#">3</a></li> <li><a href="#">4</a></li> - <li><a href="#">Next →</a></li> + <li><a href="#">»</a></li> </ul> </div> <div class="pagination"> <ul> - <li><a href="#">←</a></li> + <li><a href="#">«</a></li> <li><a href="#">10</a></li> - <li><a href="#">11</a></li> - <li class="active"><a href="#">12</a></li> - <li><a href="#">13</a></li> - <li><a href="#">14</a></li> - <li><a href="#">→</a></li> + <li class="active"><a href="#">11</a></li> + <li><a href="#">12</a></li> + <li><a href="#">»</a></li> </ul> </div> <div class="pagination"> <ul> <li><a href="#">←</a></li> <li class="active"><a href="#">10</a></li> - <li><a href="#">11</a></li> - <li class="disabled"><a href="#">…</a></li> + <li class="disabled"><a href="#">...</a></li> <li><a href="#">20</a></li> - <li><a href="#">21</a></li> <li><a href="#">→</a></li> </ul> </div> diff --git a/lib/type.less b/lib/type.less index ab7409ce34..707d2215de 100644 --- a/lib/type.less +++ b/lib/type.less @@ -99,15 +99,16 @@ ul.unstyled { // Description Lists dl { margin-bottom: @baseLineHeight; - dt, dd { - line-height: @baseLineHeight; - } - dt { - font-weight: bold; - } - dd { - margin-left: @baseLineHeight / 2; - } +} +dt, +dd { + line-height: @baseLineHeight; +} +dt { + font-weight: bold; +} +dd { + margin-left: @baseLineHeight / 2; } // MISC -- GitLab From 3d9298b04ba493d877afaa81d8f48545f0a89a3f Mon Sep 17 00:00:00 2001 From: Mark Otto <markdotto@gmail.com> Date: Sun, 15 Jan 2012 15:06:30 -0800 Subject: [PATCH 300/318] fix the js alerts examples --- docs/javascript.html | 13 +++++++------ 1 file changed, 7 insertions(+), 6 deletions(-) diff --git a/docs/javascript.html b/docs/javascript.html index 64159ede75..2d7b74dd3a 100644 --- a/docs/javascript.html +++ b/docs/javascript.html @@ -906,16 +906,17 @@ $('a[data-toggle="tab"]').on('shown', function (e) { <div class="span9 columns"> <h2>Example alerts</h2> <p>The alerts plugin works on regular alert messages, and block messages.</p> - <div class="alert-message warning fade in"> + <div class="alert fade in"> <a class="close" data-dismiss="alert" href="#">×</a> <p><strong>Holy guacamole!</strong> Best check yo self, you’re not looking too good.</p> </div> - <div class="alert-message block-message error fade in"> + <div class="alert alert-block alert-error fade in"> <a class="close" data-dismiss="alert" href="#">×</a> - <p><strong>Oh snap! You got an error!</strong> Change this and that and try again. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Cras mattis consectetur purus sit amet fermentum.</p> - <div class="alert-actions"> - <a class="btn small" href="#">Take this action</a> <a class="btn small" href="#">Or do this</a> - </div> + <h4 class="alert-heading">Oh snap! You got an error!</h4> + <p>Change this and that and try again. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Cras mattis consectetur purus sit amet fermentum.</p> + <p> + <a class="btn danger small" href="#">Take this action</a> <a class="btn small" href="#">Or do this</a> + </p> </div> <hr> <h2>Using bootstrap-alerts.js</h2> -- GitLab From c02501e1b714ebb44c560483316ac36c4f709c50 Mon Sep 17 00:00:00 2001 From: Mark Otto <markdotto@gmail.com> Date: Sun, 15 Jan 2012 16:27:36 -0800 Subject: [PATCH 301/318] move carousel to separate stylesheet, update popovers to fix ie7 bug, fix pagination, fix alerts --- bootstrap.css | 165 ++++++++++++++++++++++--------------------- bootstrap.min.css | 39 +++++----- docs/javascript.html | 2 +- lib/alerts.less | 8 +-- lib/bootstrap.less | 1 + lib/carousel.less | 54 ++++++++++++++ lib/pagination.less | 12 ++-- lib/popovers.less | 4 +- lib/thumbnails.less | 53 -------------- 9 files changed, 174 insertions(+), 164 deletions(-) create mode 100644 lib/carousel.less diff --git a/bootstrap.css b/bootstrap.css index b5f7949e5c..aabc868d2e 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 Jan 15 13:11:42 PST 2012 + * Date: Sun Jan 15 16:27:00 PST 2012 */ html, body { margin: 0; @@ -2084,8 +2084,6 @@ i { *zoom: 1; margin-left: 0; margin-bottom: 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; @@ -2101,8 +2099,8 @@ i { padding: 0 14px; line-height: 34px; text-decoration: none; - border-right: 1px solid #ddd; - border-right: 1px solid rgba(0, 0, 0, 0.15); + border: 1px solid #ddd; + border-left-width: 0; } .pagination a:hover, .pagination .active a { background-color: #f5f5f5; @@ -2115,8 +2113,16 @@ i { background-color: transparent; cursor: default; } +.pagination li:first-child a { + border-left-width: 1px; + -webkit-border-radius: 3px 0 0 3px; + -moz-border-radius: 3px 0 0 3px; + border-radius: 3px 0 0 3px; +} .pagination li:last-child a { - border: 0; + -webkit-border-radius: 0 3px 3px 0; + -moz-border-radius: 0 3px 3px 0; + border-radius: 0 3px 3px 0; } .pagination-centered { text-align: center; @@ -2383,8 +2389,8 @@ i { padding: 3px; width: 280px; overflow: hidden; - background-color: #000000; - background-color: rgba(0, 0, 0, 0.8); + background: #000000; + background: rgba(0, 0, 0, 0.8); -webkit-border-radius: 6px; -moz-border-radius: 6px; border-radius: 6px; @@ -2667,7 +2673,6 @@ button.btn::-moz-focus-inner, input[type=submit].btn::-moz-focus-inner { opacity: 0.75; } .alert { - position: relative; padding: 8px 35px 8px 14px; margin-bottom: 18px; text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5); @@ -2680,11 +2685,12 @@ button.btn::-moz-focus-inner, input[type=submit].btn::-moz-focus-inner { .alert, .alert-heading { color: #c09853; } -.alert > .close { +.alert .close { *margin-top: 3px; /* IE7 spacing */ - margin-right: -21px; + position: relative; + right: -21px; } .alert-success { background-color: #dff0d8; @@ -2722,7 +2728,6 @@ button.btn::-moz-focus-inner, input[type=submit].btn::-moz-focus-inner { } .thumbnails { margin-left: -20px; - margin-bottom: 0; list-style: none; zoom: 1; } @@ -2764,74 +2769,6 @@ a.thumbnail:hover { .thumbnail .caption { padding: 9px; } -.carousel { - position: relative; -} -.carousel .carousel-inner { - overflow: hidden; - width: 100%; - position: relative; -} -.carousel .item { - display: none; - position: relative; - -webkit-transition: 0.6s ease-in-out left; - -moz-transition: 0.6s ease-in-out left; - -ms-transition: 0.6s ease-in-out left; - -o-transition: 0.6s ease-in-out left; - transition: 0.6s ease-in-out left; -} -.carousel .active, .carousel .next, .carousel .prev { - display: block; -} -.carousel .active { - left: 0; -} -.carousel .next, .carousel .prev { - position: absolute; - top: 0; - width: 100%; -} -.carousel .next { - left: 100%; -} -.carousel .prev { - left: -100%; -} -.carousel .next.left, .carousel .prev.right { - left: 0%; -} -.carousel .active.left { - left: -100%; -} -.carousel .active.right { - left: 100%; -} -.carousel .nav { - width: auto; - -webkit-border-radius: 0; - -moz-border-radius: 0; - border-radius: 0; - height: 50px; - position: absolute; - top: 50%; - margin: -25px 0 0; - cursor: pointer; - background: rgba(0, 0, 0, 0.7); - color: white; - font-size: 42px; - left: 5px; - font-weight: 100; - padding: 0 15px; -} -.carousel .nav.right { - right: 5px; - left: auto; -} -.carousel .nav:hover { - text-decoration: none; - background: rgba(0, 0, 0, 0.8); -} .label { padding: 1px 3px 2px; font-size: 9.75px; @@ -2999,6 +2936,74 @@ a.thumbnail:hover { background-image: -o-linear-gradient(-45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent); background-image: linear-gradient(-45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent); } +.carousel { + position: relative; +} +.carousel .carousel-inner { + overflow: hidden; + width: 100%; + position: relative; +} +.carousel .item { + display: none; + position: relative; + -webkit-transition: 0.6s ease-in-out left; + -moz-transition: 0.6s ease-in-out left; + -ms-transition: 0.6s ease-in-out left; + -o-transition: 0.6s ease-in-out left; + transition: 0.6s ease-in-out left; +} +.carousel .active, .carousel .next, .carousel .prev { + display: block; +} +.carousel .active { + left: 0; +} +.carousel .next, .carousel .prev { + position: absolute; + top: 0; + width: 100%; +} +.carousel .next { + left: 100%; +} +.carousel .prev { + left: -100%; +} +.carousel .next.left, .carousel .prev.right { + left: 0%; +} +.carousel .active.left { + left: -100%; +} +.carousel .active.right { + left: 100%; +} +.carousel .nav { + width: auto; + -webkit-border-radius: 0; + -moz-border-radius: 0; + border-radius: 0; + height: 50px; + position: absolute; + top: 50%; + margin: -25px 0 0; + cursor: pointer; + background: rgba(0, 0, 0, 0.7); + color: white; + font-size: 42px; + left: 5px; + font-weight: 100; + padding: 0 15px; +} +.carousel .nav.right { + right: 5px; + left: auto; +} +.carousel .nav:hover { + text-decoration: none; + background: rgba(0, 0, 0, 0.8); +} .pull-right { float: right; } diff --git a/bootstrap.min.css b/bootstrap.min.css index 2cd9ad8374..91c6553f6c 100644 --- a/bootstrap.min.css +++ b/bootstrap.min.css @@ -402,13 +402,14 @@ i{background-image:url(docs/assets/img/glyphicons-halflings-sprite.png);backgrou .breadcrumb .divider{padding:0 5px;color:#999999;} .breadcrumb .active a{color:#333333;} .pagination{height:36px;margin:18px 0;} -.pagination ul{display:inline-block;*display:inline;*zoom:1;margin-left:0;margin-bottom: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{display:inline-block;*display:inline;*zoom:1;margin-left:0;margin-bottom:0;-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 li{display:inline;} -.pagination a{float:left;padding:0 14px;line-height:34px;text-decoration:none;border-right:1px solid #ddd;border-right:1px solid rgba(0, 0, 0, 0.15);} +.pagination a{float:left;padding:0 14px;line-height:34px;text-decoration:none;border:1px solid #ddd;border-left-width:0;} .pagination a:hover,.pagination .active a{background-color:#f5f5f5;} .pagination .active a{color:#999999;} .pagination .disabled a,.pagination .disabled a:hover{color:#999999;background-color:transparent;cursor:default;} -.pagination li:last-child a{border:0;} +.pagination li:first-child a{border-left-width:1px;-webkit-border-radius:3px 0 0 3px;-moz-border-radius:3px 0 0 3px;border-radius:3px 0 0 3px;} +.pagination li:last-child a{-webkit-border-radius:0 3px 3px 0;-moz-border-radius:0 3px 3px 0;border-radius:0 3px 3px 0;} .pagination-centered{text-align:center;} .pagination-right{text-align:right;} .pager{margin-left:0;margin-bottom:18px;list-style:none;text-align:center;zoom:1;}.pager:before,.pager:after{display:table;*display:inline;content:"";zoom:1;} @@ -446,7 +447,7 @@ i{background-image:url(docs/assets/img/glyphicons-halflings-sprite.png);backgrou .popover.bottom .arrow{top:0;left:50%;margin-left:-5px;border-left:5px solid transparent;border-right:5px solid transparent;border-bottom:5px solid #000000;} .popover.left .arrow{top:50%;right:0;margin-top:-5px;border-top:5px solid transparent;border-bottom:5px solid transparent;border-left:5px solid #000000;} .popover .arrow{position:absolute;width:0;height:0;} -.popover .inner{padding:3px;width:280px;overflow:hidden;background-color:#000000;background-color:rgba(0, 0, 0, 0.8);-webkit-border-radius:6px;-moz-border-radius:6px;border-radius:6px;-webkit-box-shadow:0 3px 7px rgba(0, 0, 0, 0.3);-moz-box-shadow:0 3px 7px rgba(0, 0, 0, 0.3);box-shadow:0 3px 7px rgba(0, 0, 0, 0.3);} +.popover .inner{padding:3px;width:280px;overflow:hidden;background:#000000;background:rgba(0, 0, 0, 0.8);-webkit-border-radius:6px;-moz-border-radius:6px;border-radius:6px;-webkit-box-shadow:0 3px 7px rgba(0, 0, 0, 0.3);-moz-box-shadow:0 3px 7px rgba(0, 0, 0, 0.3);box-shadow:0 3px 7px rgba(0, 0, 0, 0.3);} .popover .title{padding:9px 15px;line-height:1;background-color:#f5f5f5;border-bottom:1px solid #eee;-webkit-border-radius:3px 3px 0 0;-moz-border-radius:3px 3px 0 0;border-radius:3px 3px 0 0;} .popover .content{padding:14px;background-color:#ffffff;-webkit-border-radius:0 0 3px 3px;-moz-border-radius:0 0 3px 3px;border-radius:0 0 3px 3px;-webkit-background-clip:padding-box;-moz-background-clip:padding-box;background-clip:padding-box;}.popover .content p,.popover .content ul,.popover .content ol{margin-bottom:0;} .btn.danger,.btn.danger:hover,.btn.success,.btn.success:hover,.btn.info,.btn.info:hover{text-shadow:0 -1px 0 rgba(0, 0, 0, 0.25);color:#ffffff;} @@ -478,9 +479,9 @@ button.btn::-moz-focus-inner,input[type=submit].btn::-moz-focus-inner{padding:0; .btn-group.open .dropdown-toggle{background-image:none;-webkit-box-shadow:inset 0 1px 6px rgba(0, 0, 0, 0.15),0 1px 2px rgba(0, 0, 0, 0.05);-moz-box-shadow:inset 0 1px 6px rgba(0, 0, 0, 0.15),0 1px 2px rgba(0, 0, 0, 0.05);box-shadow:inset 0 1px 6px rgba(0, 0, 0, 0.15),0 1px 2px rgba(0, 0, 0, 0.05);} .btn .caret{margin-top:6px;margin-left:0;} .primary .caret,.danger .caret,.info .caret,.success .caret{border-top-color:#fff;filter:alpha(opacity=75);-moz-opacity:0.75;opacity:0.75;} -.alert{position:relative;padding:8px 35px 8px 14px;margin-bottom:18px;text-shadow:0 1px 0 rgba(255, 255, 255, 0.5);background-color:#fcf8e3;border:1px solid #f3edd2;-webkit-border-radius:4px;-moz-border-radius:4px;border-radius:4px;} +.alert{padding:8px 35px 8px 14px;margin-bottom:18px;text-shadow:0 1px 0 rgba(255, 255, 255, 0.5);background-color:#fcf8e3;border:1px solid #f3edd2;-webkit-border-radius:4px;-moz-border-radius:4px;border-radius:4px;} .alert,.alert-heading{color:#c09853;} -.alert>.close{*margin-top:3px;margin-right:-21px;} +.alert .close{*margin-top:3px;position:relative;right:-21px;} .alert-success{background-color:#dff0d8;border-color:#cfe8c4;} .alert-success,.alert-success .alert-heading{color:#468847;} .alert-danger,.alert-error{background-color:#f2dede;border-color:#e9c7c7;} @@ -490,25 +491,13 @@ button.btn::-moz-focus-inner,input[type=submit].btn::-moz-focus-inner{padding:0; .alert-block{padding-top:14px;padding-bottom:14px;} .alert-block>p,.alert-block>ul{margin-bottom:0;} .alert-block p+p{margin-top:5px;} -.thumbnails{margin-left:-20px;margin-bottom:0;list-style:none;zoom:1;}.thumbnails:before,.thumbnails:after{display:table;*display:inline;content:"";zoom:1;} +.thumbnails{margin-left:-20px;list-style:none;zoom:1;}.thumbnails:before,.thumbnails:after{display:table;*display:inline;content:"";zoom:1;} .thumbnails:after{clear:both;} .thumbnails>li{float:left;margin:0 0 20px 20px;} .thumbnail{display:block;padding:4px;line-height:1;border:1px solid #ddd;-webkit-border-radius:4px;-moz-border-radius:4px;border-radius:4px;-webkit-box-shadow:0 1px 1px rgba(0, 0, 0, 0.075);-moz-box-shadow:0 1px 1px rgba(0, 0, 0, 0.075);box-shadow:0 1px 1px rgba(0, 0, 0, 0.075);} a.thumbnail:hover{border-color:#0088cc;-webkit-box-shadow:0 1px 4px rgba(0, 105, 214, 0.25);-moz-box-shadow:0 1px 4px rgba(0, 105, 214, 0.25);box-shadow:0 1px 4px rgba(0, 105, 214, 0.25);} .thumbnail>img{display:block;max-width:100%;} .thumbnail .caption{padding:9px;} -.carousel{position:relative;}.carousel .carousel-inner{overflow:hidden;width:100%;position:relative;} -.carousel .item{display:none;position:relative;-webkit-transition:0.6s ease-in-out left;-moz-transition:0.6s ease-in-out left;-ms-transition:0.6s ease-in-out left;-o-transition:0.6s ease-in-out left;transition:0.6s ease-in-out left;} -.carousel .active,.carousel .next,.carousel .prev{display:block;} -.carousel .active{left:0;} -.carousel .next,.carousel .prev{position:absolute;top:0;width:100%;} -.carousel .next{left:100%;} -.carousel .prev{left:-100%;} -.carousel .next.left,.carousel .prev.right{left:0%;} -.carousel .active.left{left:-100%;} -.carousel .active.right{left:100%;} -.carousel .nav{width:auto;-webkit-border-radius:0;-moz-border-radius:0;border-radius:0;height:50px;position:absolute;top:50%;margin:-25px 0 0;cursor:pointer;background:rgba(0, 0, 0, 0.7);color:white;font-size:42px;left:5px;font-weight:100;padding:0 15px;}.carousel .nav.right{right:5px;left:auto;} -.carousel .nav:hover{text-decoration:none;background:rgba(0, 0, 0, 0.8);} .label{padding:1px 3px 2px;font-size:9.75px;font-weight:bold;color:#ffffff;text-transform:uppercase;background-color:#999999;-webkit-border-radius:3px;-moz-border-radius:3px;border-radius:3px;}.label.important{background-color:#c43c35;} .label.warning{background-color:#f89406;} .label.success{background-color:#46a546;} @@ -524,6 +513,18 @@ a.thumbnail:hover{border-color:#0088cc;-webkit-box-shadow:0 1px 4px rgba(0, 105, .progress.success.striped .bar{background-color:#62c462;background-image:-webkit-gradient(linear, 0 100%, 100% 0, color-stop(0.25, rgba(255, 255, 255, 0.15)), color-stop(0.25, transparent), color-stop(0.5, transparent), color-stop(0.5, rgba(255, 255, 255, 0.15)), color-stop(0.75, rgba(255, 255, 255, 0.15)), color-stop(0.75, transparent), to(transparent));background-image:-webkit-linear-gradient(-45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);background-image:-moz-linear-gradient(-45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);background-image:-ms-linear-gradient(-45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);background-image:-o-linear-gradient(-45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);background-image:linear-gradient(-45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);} .progress.info .bar{background-color:#339bb9;background-image:-khtml-gradient(linear, left top, left bottom, from(#5bc0de), to(#339bb9));background-image:-moz-linear-gradient(top, #5bc0de, #339bb9);background-image:-ms-linear-gradient(top, #5bc0de, #339bb9);background-image:-webkit-gradient(linear, left top, left bottom, color-stop(0%, #5bc0de), color-stop(100%, #339bb9));background-image:-webkit-linear-gradient(top, #5bc0de, #339bb9);background-image:-o-linear-gradient(top, #5bc0de, #339bb9);background-image:linear-gradient(top, #5bc0de, #339bb9);background-repeat:repeat-x;filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#5bc0de', endColorstr='#339bb9', GradientType=0);} .progress.info.striped .bar{background-color:#5bc0de;background-image:-webkit-gradient(linear, 0 100%, 100% 0, color-stop(0.25, rgba(255, 255, 255, 0.15)), color-stop(0.25, transparent), color-stop(0.5, transparent), color-stop(0.5, rgba(255, 255, 255, 0.15)), color-stop(0.75, rgba(255, 255, 255, 0.15)), color-stop(0.75, transparent), to(transparent));background-image:-webkit-linear-gradient(-45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);background-image:-moz-linear-gradient(-45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);background-image:-ms-linear-gradient(-45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);background-image:-o-linear-gradient(-45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);background-image:linear-gradient(-45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);} +.carousel{position:relative;}.carousel .carousel-inner{overflow:hidden;width:100%;position:relative;} +.carousel .item{display:none;position:relative;-webkit-transition:0.6s ease-in-out left;-moz-transition:0.6s ease-in-out left;-ms-transition:0.6s ease-in-out left;-o-transition:0.6s ease-in-out left;transition:0.6s ease-in-out left;} +.carousel .active,.carousel .next,.carousel .prev{display:block;} +.carousel .active{left:0;} +.carousel .next,.carousel .prev{position:absolute;top:0;width:100%;} +.carousel .next{left:100%;} +.carousel .prev{left:-100%;} +.carousel .next.left,.carousel .prev.right{left:0%;} +.carousel .active.left{left:-100%;} +.carousel .active.right{left:100%;} +.carousel .nav{width:auto;-webkit-border-radius:0;-moz-border-radius:0;border-radius:0;height:50px;position:absolute;top:50%;margin:-25px 0 0;cursor:pointer;background:rgba(0, 0, 0, 0.7);color:white;font-size:42px;left:5px;font-weight:100;padding:0 15px;}.carousel .nav.right{right:5px;left:auto;} +.carousel .nav:hover{text-decoration:none;background:rgba(0, 0, 0, 0.8);} .pull-right{float:right;} .pull-left{float:left;} .hide{display:none;} diff --git a/docs/javascript.html b/docs/javascript.html index 2d7b74dd3a..015f451428 100644 --- a/docs/javascript.html +++ b/docs/javascript.html @@ -908,7 +908,7 @@ $('a[data-toggle="tab"]').on('shown', function (e) { <p>The alerts plugin works on regular alert messages, and block messages.</p> <div class="alert fade in"> <a class="close" data-dismiss="alert" href="#">×</a> - <p><strong>Holy guacamole!</strong> Best check yo self, you’re not looking too good.</p> + <strong>Holy guacamole!</strong> Best check yo self, you’re not looking too good. </div> <div class="alert alert-block alert-error fade in"> <a class="close" data-dismiss="alert" href="#">×</a> diff --git a/lib/alerts.less b/lib/alerts.less index a338f502a1..53a43c6e4f 100644 --- a/lib/alerts.less +++ b/lib/alerts.less @@ -3,7 +3,6 @@ // Base alert styles .alert { - position: relative; padding: 8px 35px 8px 14px; margin-bottom: @baseLineHeight; text-shadow: 0 1px 0 rgba(255,255,255,.5); @@ -17,9 +16,10 @@ } // Adjust close link position -.alert > .close { +.alert .close { *margin-top: 3px; /* IE7 spacing */ - margin-right: -21px; + position: relative; + right: -21px; } // Alternate styles @@ -66,4 +66,4 @@ } .alert-block p + p { margin-top: 5px; -} \ No newline at end of file +} diff --git a/lib/bootstrap.less b/lib/bootstrap.less index db6a192f59..db5ed61f7f 100644 --- a/lib/bootstrap.less +++ b/lib/bootstrap.less @@ -52,6 +52,7 @@ @import "thumbnails.less"; @import "labels.less"; @import "progress-bars.less"; +@import "carousel.less"; // Utility classes @import "utilities.less"; // Has to be last to override when necessary diff --git a/lib/carousel.less b/lib/carousel.less new file mode 100644 index 0000000000..0cfb0127a0 --- /dev/null +++ b/lib/carousel.less @@ -0,0 +1,54 @@ +// CAROUSEL +// -------- + +.carousel { + + position: relative; + + .carousel-inner { + overflow: hidden; + width: 100%; + position: relative; + } + + .item { + display: none; + position: relative; + .transition(.6s ease-in-out left); + } + + .active, .next, .prev { display: block; } + + .active { left: 0 } + + .next, .prev { + position: absolute; + top: 0; + width: 100%; + } + + .next { left: 100%; } + .prev { left: -100%; } + .next.left, .prev.right { left: 0% } + + .active.left { left: -100% } + .active.right { left: 100% } + + .nav { + width: auto; + .border-radius(0); + height: 50px; + position: absolute; + top: 50%; + margin: -25px 0 0; + cursor: pointer; + background: rgba(0, 0, 0, 0.7); + color: white; + font-size: 42px; + left: 5px; + font-weight: 100; + padding: 0 15px; + &.right { right: 5px; left: auto; } + &:hover { text-decoration: none; background: rgba(0, 0, 0, 0.8); } + } +} \ No newline at end of file diff --git a/lib/pagination.less b/lib/pagination.less index 064362b7bc..8ecb2a4015 100644 --- a/lib/pagination.less +++ b/lib/pagination.less @@ -10,8 +10,6 @@ .ie7-inline-block(); margin-left: 0; margin-bottom: 0; - border: 1px solid #ddd; - border: 1px solid rgba(0,0,0,.15); .border-radius(3px); .box-shadow(0 1px 2px rgba(0,0,0,.05)); } @@ -23,8 +21,8 @@ padding: 0 14px; line-height: (@baseLineHeight * 2) - 2; text-decoration: none; - border-right: 1px solid #ddd; - border-right: 1px solid rgba(0,0,0,.15); + border: 1px solid #ddd; + border-left-width: 0; } .pagination a:hover, .pagination .active a { @@ -39,8 +37,12 @@ background-color: transparent; cursor: default; } +.pagination li:first-child a { + border-left-width: 1px; + .border-radius(3px 0 0 3px); +} .pagination li:last-child a { - border: 0; + .border-radius(0 3px 3px 0); } // Centered diff --git a/lib/popovers.less b/lib/popovers.less index 9ecdf5fd98..6de314d860 100644 --- a/lib/popovers.less +++ b/lib/popovers.less @@ -25,8 +25,8 @@ padding: 3px; width: 280px; overflow: hidden; - background-color: @black; - background-color: rgba(0,0,0,.8); + background: @black; // has to be full background declaration for IE fallback + background: rgba(0,0,0,.8); .border-radius(6px); .box-shadow(0 3px 7px rgba(0,0,0,0.3)); } diff --git a/lib/thumbnails.less b/lib/thumbnails.less index 3d1d5bc246..4f9c5f76d3 100644 --- a/lib/thumbnails.less +++ b/lib/thumbnails.less @@ -3,7 +3,6 @@ .thumbnails { margin-left: -20px; - margin-bottom: 0; list-style: none; .clearfix(); } @@ -32,55 +31,3 @@ a.thumbnail:hover { .thumbnail .caption { padding: 9px; } - -.carousel { - - position: relative; - - .carousel-inner { - overflow: hidden; - width: 100%; - position: relative; - } - - .item { - display: none; - position: relative; - .transition(.6s ease-in-out left); - } - - .active, .next, .prev { display: block; } - - .active { left: 0 } - - .next, .prev { - position: absolute; - top: 0; - width: 100%; - } - - .next { left: 100%; } - .prev { left: -100%; } - .next.left, .prev.right { left: 0% } - - .active.left { left: -100% } - .active.right { left: 100% } - - .nav { - width: auto; - .border-radius(0); - height: 50px; - position: absolute; - top: 50%; - margin: -25px 0 0; - cursor: pointer; - background: rgba(0, 0, 0, 0.7); - color: white; - font-size: 42px; - left: 5px; - font-weight: 100; - padding: 0 15px; - &.right { right: 5px; left: auto; } - &:hover { text-decoration: none; background: rgba(0, 0, 0, 0.8); } - } -} \ No newline at end of file -- GitLab From f48278dac6ac89fcf9d1ab7526ec3029dd1a4d8e Mon Sep 17 00:00:00 2001 From: Mark Otto <markdotto@gmail.com> Date: Sun, 15 Jan 2012 18:40:17 -0800 Subject: [PATCH 302/318] updated accordion and carousel; accordion still needs work --- bootstrap.css | 76 ++++++++++++++++++++-------- bootstrap.min.css | 15 ++++-- docs/javascript.html | 64 ++++++++++++------------ lib/accordion.less | 21 ++++++++ lib/bootstrap.less | 1 + lib/carousel.less | 115 +++++++++++++++++++++++++++++++------------ 6 files changed, 204 insertions(+), 88 deletions(-) create mode 100644 lib/accordion.less diff --git a/bootstrap.css b/bootstrap.css index aabc868d2e..8192b24c8a 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 Jan 15 16:27:00 PST 2012 + * Date: Sun Jan 15 18:32:40 PST 2012 */ html, body { margin: 0; @@ -2936,10 +2936,29 @@ a.thumbnail:hover { background-image: -o-linear-gradient(-45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent); background-image: linear-gradient(-45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent); } +.accordion { + padding: 0; +} +.accordion-heading { + padding: 5px 10px; + border: 1px solid #ddd; +} +.accordion-body { + padding: 10px; + margin-left: 0; + margin-bottom: 9px; + border: 1px solid #ddd; + border-top: 0; + display: none; +} +.accordion .in { + display: block; +} .carousel { position: relative; + line-height: 1; } -.carousel .carousel-inner { +.carousel-inner { overflow: hidden; width: 100%; position: relative; @@ -2971,7 +2990,7 @@ a.thumbnail:hover { left: -100%; } .carousel .next.left, .carousel .prev.right { - left: 0%; + left: 0; } .carousel .active.left { left: -100%; @@ -2979,30 +2998,45 @@ a.thumbnail:hover { .carousel .active.right { left: 100%; } -.carousel .nav { - width: auto; - -webkit-border-radius: 0; - -moz-border-radius: 0; - border-radius: 0; - height: 50px; +.carousel-control { position: absolute; - top: 50%; - margin: -25px 0 0; - cursor: pointer; - background: rgba(0, 0, 0, 0.7); - color: white; - font-size: 42px; - left: 5px; + top: 40%; + left: 15px; + width: 40px; + height: 40px; + margin-top: -20px; + font-size: 60px; font-weight: 100; - padding: 0 15px; + line-height: 30px; + color: #ccc; + text-align: center; + background: #999; + background: rgba(0, 0, 0, 0.5); + -webkit-border-radius: 20px; + -moz-border-radius: 20px; + border-radius: 20px; } -.carousel .nav.right { - right: 5px; +.carousel-control.right { left: auto; + right: 15px; } -.carousel .nav:hover { +.carousel-control:hover { + color: #fff; text-decoration: none; - background: rgba(0, 0, 0, 0.8); + background: #333; + background: rgba(0, 0, 0, 0.75); +} +.carousel-caption { + position: absolute; + left: 0; + right: 0; + bottom: 0; + padding: 10px 15px 5px; + background: #333; + background: rgba(0, 0, 0, 0.75); +} +.carousel-caption h4, .carousel-caption p { + color: #fff; } .pull-right { float: right; diff --git a/bootstrap.min.css b/bootstrap.min.css index 91c6553f6c..6e348c597a 100644 --- a/bootstrap.min.css +++ b/bootstrap.min.css @@ -513,18 +513,25 @@ a.thumbnail:hover{border-color:#0088cc;-webkit-box-shadow:0 1px 4px rgba(0, 105, .progress.success.striped .bar{background-color:#62c462;background-image:-webkit-gradient(linear, 0 100%, 100% 0, color-stop(0.25, rgba(255, 255, 255, 0.15)), color-stop(0.25, transparent), color-stop(0.5, transparent), color-stop(0.5, rgba(255, 255, 255, 0.15)), color-stop(0.75, rgba(255, 255, 255, 0.15)), color-stop(0.75, transparent), to(transparent));background-image:-webkit-linear-gradient(-45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);background-image:-moz-linear-gradient(-45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);background-image:-ms-linear-gradient(-45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);background-image:-o-linear-gradient(-45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);background-image:linear-gradient(-45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);} .progress.info .bar{background-color:#339bb9;background-image:-khtml-gradient(linear, left top, left bottom, from(#5bc0de), to(#339bb9));background-image:-moz-linear-gradient(top, #5bc0de, #339bb9);background-image:-ms-linear-gradient(top, #5bc0de, #339bb9);background-image:-webkit-gradient(linear, left top, left bottom, color-stop(0%, #5bc0de), color-stop(100%, #339bb9));background-image:-webkit-linear-gradient(top, #5bc0de, #339bb9);background-image:-o-linear-gradient(top, #5bc0de, #339bb9);background-image:linear-gradient(top, #5bc0de, #339bb9);background-repeat:repeat-x;filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#5bc0de', endColorstr='#339bb9', GradientType=0);} .progress.info.striped .bar{background-color:#5bc0de;background-image:-webkit-gradient(linear, 0 100%, 100% 0, color-stop(0.25, rgba(255, 255, 255, 0.15)), color-stop(0.25, transparent), color-stop(0.5, transparent), color-stop(0.5, rgba(255, 255, 255, 0.15)), color-stop(0.75, rgba(255, 255, 255, 0.15)), color-stop(0.75, transparent), to(transparent));background-image:-webkit-linear-gradient(-45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);background-image:-moz-linear-gradient(-45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);background-image:-ms-linear-gradient(-45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);background-image:-o-linear-gradient(-45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);background-image:linear-gradient(-45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);} -.carousel{position:relative;}.carousel .carousel-inner{overflow:hidden;width:100%;position:relative;} +.accordion{padding:0;} +.accordion-heading{padding:5px 10px;border:1px solid #ddd;} +.accordion-body{padding:10px;margin-left:0;margin-bottom:9px;border:1px solid #ddd;border-top:0;display:none;} +.accordion .in{display:block;} +.carousel{position:relative;line-height:1;} +.carousel-inner{overflow:hidden;width:100%;position:relative;} .carousel .item{display:none;position:relative;-webkit-transition:0.6s ease-in-out left;-moz-transition:0.6s ease-in-out left;-ms-transition:0.6s ease-in-out left;-o-transition:0.6s ease-in-out left;transition:0.6s ease-in-out left;} .carousel .active,.carousel .next,.carousel .prev{display:block;} .carousel .active{left:0;} .carousel .next,.carousel .prev{position:absolute;top:0;width:100%;} .carousel .next{left:100%;} .carousel .prev{left:-100%;} -.carousel .next.left,.carousel .prev.right{left:0%;} +.carousel .next.left,.carousel .prev.right{left:0;} .carousel .active.left{left:-100%;} .carousel .active.right{left:100%;} -.carousel .nav{width:auto;-webkit-border-radius:0;-moz-border-radius:0;border-radius:0;height:50px;position:absolute;top:50%;margin:-25px 0 0;cursor:pointer;background:rgba(0, 0, 0, 0.7);color:white;font-size:42px;left:5px;font-weight:100;padding:0 15px;}.carousel .nav.right{right:5px;left:auto;} -.carousel .nav:hover{text-decoration:none;background:rgba(0, 0, 0, 0.8);} +.carousel-control{position:absolute;top:40%;left:15px;width:40px;height:40px;margin-top:-20px;font-size:60px;font-weight:100;line-height:30px;color:#ccc;text-align:center;background:#999;background:rgba(0, 0, 0, 0.5);-webkit-border-radius:20px;-moz-border-radius:20px;border-radius:20px;}.carousel-control.right{left:auto;right:15px;} +.carousel-control:hover{color:#fff;text-decoration:none;background:#333;background:rgba(0, 0, 0, 0.75);} +.carousel-caption{position:absolute;left:0;right:0;bottom:0;padding:10px 15px 5px;background:#333;background:rgba(0, 0, 0, 0.75);} +.carousel-caption h4,.carousel-caption p{color:#fff;} .pull-right{float:right;} .pull-left{float:left;} .hide{display:none;} diff --git a/docs/javascript.html b/docs/javascript.html index 015f451428..1a6565c399 100644 --- a/docs/javascript.html +++ b/docs/javascript.html @@ -1079,33 +1079,33 @@ $('#my-alert').bind('closed', function () { <div class="span9 columns"> <h2>Example accordion</h2> <p>Using the collapse plugin, we built a simple accordion style widget:</p> - <dl id="accordion"> - <dt> + <dl class="accordion" id="accordion"> + <dt class="accordion-heading"> <a data-toggle="collapse" data-parent="#accordion" href="#collapseOne"> Collapsible Group Item #1 </a> </dt> - <dd id="collapseOne" class="collapse in"> + <dd id="collapseOne" class="accordion-body collapse in"> <p> Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS. </p> </dd> - <dt> + <dt class="accordion-heading"> <a data-toggle="collapse" data-parent="#accordion" href="#collapseTwo"> Collapsible Group Item #2 </a> </dt> - <dd id="collapseTwo" class="collapse"> + <dd id="collapseTwo" class="accordion-body collapse"> <p> Blog +1 eiusmod, williamsburg chambray craft beer brooklyn. Trust fund squid whatever, sunt hoodie skateboard mustache 3 wolf moon art party wes anderson ad leggings officia. Skateboard keytar incididunt gluten-free retro sartorial, single-origin coffee et viral. Art party blog sunt, readymade fugiat 8-bit aesthetic ex echo park fanny pack keytar. Thundercats sustainable labore, mustache adipisicing tattooed dolore aute occaecat velit 8-bit raw denim letterpress. In occaecat freegan, next level single-origin coffee chambray excepteur nihil duis exercitation adipisicing ex sartorial twee squid. You probably haven't heard of them fugiat ea retro eiusmod quis cosby sweater, +1 fap sapiente biodiesel banksy. </p> </dd> - <dt> + <dt class="accordion-heading"> <a data-toggle="collapse" data-parent="#accordion" href="#collapseThree"> Collapsible Group Item #3 </a> </dt> - <dd id="collapseThree" class="collapse"> + <dd id="collapseThree" class="accordion-body collapse"> <p> Tempor gentrify pariatur nihil salvia, irony synth incididunt odio commodo brunch aute. Four loko est vice echo park wes anderson jean shorts, tempor ea vero locavore. Seitan DIY dolore readymade williamsburg viral. Dolor fap master cleanse delectus, ad butcher labore duis vice mollit cillum exercitation eu banh mi. Austin banksy 3 wolf moon locavore sed, helvetica next level VHS you probably haven't heard of them ethical odio. Incididunt locavore minim, do seitan consequat qui thundercats labore before they sold out retro laborum. Esse twee readymade laboris fap vice, voluptate DIY. </p> @@ -1220,32 +1220,32 @@ $('#myCollapsible').on('hidden', function () { <div class="span9 columns"> <h2>Example carousel</h2> <p>Watch the slideshow below.</p> - <div id="myCarousel" class="thumbnail carousel slide"> + <div id="myCarousel" class="carousel slide"> <div class="carousel-inner"> <div class="item active"> - <img src="http://placehold.it/1100x400" alt=""> - <div class="caption"> - <h5>First Thumbnail label</h5> + <img src="http://placehold.it/1000x500" alt=""> + <div class="carousel-caption"> + <h4>First Thumbnail label</h4> <p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p> </div> </div> <div class="item"> - <img src="http://placehold.it/1100x400" alt=""> - <div class="caption"> - <h5>Second Thumbnail label</h5> + <img src="http://placehold.it/1000x500" alt=""> + <div class="carousel-caption"> + <h4>Second Thumbnail label</h4> <p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p> </div> </div> <div class="item"> - <img src="http://placehold.it/1100x400" alt=""> - <div class="caption"> - <h5>Third Thumbnail label</h5> + <img src="http://placehold.it/1000x500" alt=""> + <div class="carousel-caption"> + <h4>Third Thumbnail label</h4> <p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p> </div> </div> </div> - <a class="left nav" href="#myCarousel" data-slide="prev">«</a> - <a class="right nav" href="#myCarousel" data-slide="next">»</a> + <a class="left carousel-control" href="#myCarousel" data-slide="prev">‹</a> + <a class="right carousel-control" href="#myCarousel" data-slide="next">›</a> </div> <hr> <h2>Using bootstrap-carousel.js</h2> @@ -1273,24 +1273,24 @@ $('#myCollapsible').on('hidden', function () { <h3>Markup</h3> <p>Data attributes are integral to the carousel plugin. Check out the example code below for the various markup types.</p> <pre class="prettyprint linenums"> -<div class="thumbnail carousel"> - - <!-- items --> - <div class="carousel-inner">…</div> - - <!-- navigation --> - <a class="nav" href="#myCarousel" data-slide="next">&lt;</a> - <a class="nav" href="#myCarousel" data-slide="prev">&gt;</a> - +<div class="carousel"> + <!-- Carousel items --> + <div class="carousel-inner"> + ... + </div> + <!-- Carousel nav --> + <a class="carousel-control left" href="#myCarousel" data-slide="prev">&lsaquo;</a> + <a class="carousel-control right" href="#myCarousel" data-slide="next">&rsaquo;</a> </div> </pre> <h3>Methods</h3> <h4>.carousel(options)</h4> <p>Initializes the carousel with an optional options <code>object</code> and starts cycling through items.</p> - <pre class="prettyprint linenums"> - $('.myCarousel').carousel({ - interval: 2000 - })</pre> +<pre class="prettyprint linenums"> +$('.myCarousel').carousel({ + interval: 2000 +}) +</pre> <h4>.carousel('cycle')</h4> <p>Cycles through the carousel items from left to right.</p> <h4>.carousel('pause')</h4> diff --git a/lib/accordion.less b/lib/accordion.less new file mode 100644 index 0000000000..babbe85f92 --- /dev/null +++ b/lib/accordion.less @@ -0,0 +1,21 @@ +// ACCORDION +// --------- + +.accordion { + padding: 0; +} +.accordion-heading { + padding: 5px 10px; + border: 1px solid #ddd; +} +.accordion-body { + padding: 10px; + margin-left: 0; + margin-bottom: @baseLineHeight / 2; + border: 1px solid #ddd; + border-top: 0; + display: none; +} +.accordion .in { + display: block; +} diff --git a/lib/bootstrap.less b/lib/bootstrap.less index db5ed61f7f..fec87a3396 100644 --- a/lib/bootstrap.less +++ b/lib/bootstrap.less @@ -52,6 +52,7 @@ @import "thumbnails.less"; @import "labels.less"; @import "progress-bars.less"; +@import "accordion.less"; @import "carousel.less"; // Utility classes diff --git a/lib/carousel.less b/lib/carousel.less index 0cfb0127a0..a9399ef63c 100644 --- a/lib/carousel.less +++ b/lib/carousel.less @@ -2,14 +2,17 @@ // -------- .carousel { + position: relative; + line-height: 1; +} +.carousel-inner { + overflow: hidden; + width: 100%; position: relative; +} - .carousel-inner { - overflow: hidden; - width: 100%; - position: relative; - } +.carousel { .item { display: none; @@ -17,38 +20,88 @@ .transition(.6s ease-in-out left); } - .active, .next, .prev { display: block; } + .active, + .next, + .prev { display: block; } - .active { left: 0 } + .active { + left: 0; + } - .next, .prev { + .next, + .prev { position: absolute; top: 0; width: 100%; } - .next { left: 100%; } - .prev { left: -100%; } - .next.left, .prev.right { left: 0% } + .next { + left: 100%; + } + .prev { + left: -100%; + } + .next.left, + .prev.right { + left: 0; + } + + .active.left { + left: -100%; + } + .active.right { + left: 100%; + } - .active.left { left: -100% } - .active.right { left: 100% } +} - .nav { - width: auto; - .border-radius(0); - height: 50px; - position: absolute; - top: 50%; - margin: -25px 0 0; - cursor: pointer; - background: rgba(0, 0, 0, 0.7); - color: white; - font-size: 42px; - left: 5px; - font-weight: 100; - padding: 0 15px; - &.right { right: 5px; left: auto; } - &:hover { text-decoration: none; background: rgba(0, 0, 0, 0.8); } - } -} \ No newline at end of file +// Left/right controls for nav +// --------------------------- + +.carousel-control { + position: absolute; + top: 40%; + left: 15px; + width: 40px; + height: 40px; + margin-top: -20px; + font-size: 60px; + font-weight: 100; + line-height: 30px; + color: #ccc; + text-align: center; + background: #999; + background: rgba(0,0,0,.5); + .border-radius(20px); + + // Reposition the right one + &.right { + left: auto; + right: 15px; + } + + // Hover state + &:hover { + color: #fff; + text-decoration: none; + background: #333; + background: rgba(0,0,0,.75); + } +} + +// Caption for text below images +// ----------------------------- + +.carousel-caption { + position: absolute; + left: 0; + right: 0; + bottom: 0; + padding: 10px 15px 5px; + background: #333; + background: rgba(0,0,0,.75); +} +.carousel-caption h4, +.carousel-caption p { + color: #fff; +} -- GitLab From b4dd2b9a10a9313bbe0863b9da279e212f8d230d Mon Sep 17 00:00:00 2001 From: Jon Stevens <latchkey@gmail.com> Date: Sun, 15 Jan 2012 19:38:30 -0800 Subject: [PATCH 303/318] fix typo --- docs/base-css.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/base-css.html b/docs/base-css.html index ccc2216c67..99a4efe3a8 100644 --- a/docs/base-css.html +++ b/docs/base-css.html @@ -623,7 +623,7 @@ <h3>1. Default table styles</h3> <div class="row"> <div class="span4"> - <p>Tables are automatically styled with only the a few borders to ensure readability and maintain structure. No classes are required.</p> + <p>Tables are automatically styled with only a few borders to ensure readability and maintain structure. No classes are required.</p> <pre class="prettyprint linenums"> <table> ... -- GitLab From 810bba97a418ae641d9360c232c1492610463dcf Mon Sep 17 00:00:00 2001 From: Jacob Thornton <jacobthornton@gmail.com> Date: Sun, 15 Jan 2012 21:48:58 -0800 Subject: [PATCH 304/318] make accordions little bit smoother --- bootstrap.css | 11 ++++++----- bootstrap.min.css | 9 +++++---- docs/javascript.html | 7 ++++--- lib/accordion.less | 13 +++++++++---- 4 files changed, 24 insertions(+), 16 deletions(-) diff --git a/bootstrap.css b/bootstrap.css index 8192b24c8a..7a34c8d69f 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 Jan 15 18:32:40 PST 2012 + * Date: Sun Jan 15 21:48:07 PST 2012 */ html, body { margin: 0; @@ -2942,17 +2942,18 @@ a.thumbnail:hover { .accordion-heading { padding: 5px 10px; border: 1px solid #ddd; + margin-bottom: 1px; } .accordion-body { - padding: 10px; margin-left: 0; - margin-bottom: 9px; +} +.accordion-inner { + padding: 10px; border: 1px solid #ddd; border-top: 0; - display: none; } .accordion .in { - display: block; + margin-bottom: 9px; } .carousel { position: relative; diff --git a/bootstrap.min.css b/bootstrap.min.css index 6e348c597a..f428436385 100644 --- a/bootstrap.min.css +++ b/bootstrap.min.css @@ -514,9 +514,10 @@ a.thumbnail:hover{border-color:#0088cc;-webkit-box-shadow:0 1px 4px rgba(0, 105, .progress.info .bar{background-color:#339bb9;background-image:-khtml-gradient(linear, left top, left bottom, from(#5bc0de), to(#339bb9));background-image:-moz-linear-gradient(top, #5bc0de, #339bb9);background-image:-ms-linear-gradient(top, #5bc0de, #339bb9);background-image:-webkit-gradient(linear, left top, left bottom, color-stop(0%, #5bc0de), color-stop(100%, #339bb9));background-image:-webkit-linear-gradient(top, #5bc0de, #339bb9);background-image:-o-linear-gradient(top, #5bc0de, #339bb9);background-image:linear-gradient(top, #5bc0de, #339bb9);background-repeat:repeat-x;filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#5bc0de', endColorstr='#339bb9', GradientType=0);} .progress.info.striped .bar{background-color:#5bc0de;background-image:-webkit-gradient(linear, 0 100%, 100% 0, color-stop(0.25, rgba(255, 255, 255, 0.15)), color-stop(0.25, transparent), color-stop(0.5, transparent), color-stop(0.5, rgba(255, 255, 255, 0.15)), color-stop(0.75, rgba(255, 255, 255, 0.15)), color-stop(0.75, transparent), to(transparent));background-image:-webkit-linear-gradient(-45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);background-image:-moz-linear-gradient(-45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);background-image:-ms-linear-gradient(-45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);background-image:-o-linear-gradient(-45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);background-image:linear-gradient(-45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);} .accordion{padding:0;} -.accordion-heading{padding:5px 10px;border:1px solid #ddd;} -.accordion-body{padding:10px;margin-left:0;margin-bottom:9px;border:1px solid #ddd;border-top:0;display:none;} -.accordion .in{display:block;} +.accordion-heading{padding:5px 10px;border:1px solid #ddd;margin-bottom:1px;} +.accordion-body{margin-left:0;} +.accordion-inner{padding:10px;border:1px solid #ddd;border-top:0;} +.accordion .in{margin-bottom:9px;} .carousel{position:relative;line-height:1;} .carousel-inner{overflow:hidden;width:100%;position:relative;} .carousel .item{display:none;position:relative;-webkit-transition:0.6s ease-in-out left;-moz-transition:0.6s ease-in-out left;-ms-transition:0.6s ease-in-out left;-o-transition:0.6s ease-in-out left;transition:0.6s ease-in-out left;} @@ -538,4 +539,4 @@ a.thumbnail:hover{border-color:#0088cc;-webkit-box-shadow:0 1px 4px rgba(0, 105, .show{display:block;} .invisible{visibility:hidden;} .hidden{display:none;visibility:hidden;} -@media (max-width: 480px){.navbar .nav{position:absolute;top:0;left:0;width:180px;padding-top:40px;list-style:none;} .navbar .nav,.navbar .nav>li:last-child a{-webkit-border-radius:0 0 4px 0;-moz-border-radius:0 0 4px 0;border-radius:0 0 4px 0;} .navbar .nav>li{float:none;display:none;} .navbar .nav>li>a{float:none;background-color:#222;} .navbar .nav>.active{display:block;position:absolute;top:0;left:0;} .navbar .nav>.active>a{background-color:transparent;} .navbar .nav>.active>a:hover{background-color:#333;} .navbar .nav>.active>a:after{display:inline-block;width:0;height:0;margin-top:8px;margin-left:6px;text-indent:-99999px;vertical-align:top;border-left:4px solid transparent;border-right:4px solid transparent;border-top:4px solid #ffffff;filter:alpha(opacity=100);-moz-opacity:1;opacity:1;content:"↓";} .navbar .nav:hover>li{display:block;} .navbar .nav:hover>li>a:hover{background-color:#333;} .form-horizontal .control-group>label{float:none;width:auto;padding-top:0;text-align:left;} .form-horizontal .controls{margin-left:0;} .form-horizontal .control-list{padding-top:0;} .form-horizontal .form-actions{padding-left:0;} .modal{position:fixed;top:20px;left:20px;right:20px;width:auto;}.modal.fade.in{top:auto;} .modal-header .close{padding:10px;}}@media (max-width: 768px){.navbar-fixed{position:absolute;} .navbar-fixed .nav{float:none;} .container{width:auto;padding:0 20px;} .row{margin-left:0;} .row>[class*="span"]{float:none;display:block;width:auto;margin:0;}}@media (min-width: 768px) and (max-width: 940px){.container{width:748px;} .span1{width:44px;} .span2{width:108px;} .span3{width:172px;} .span4{width:236px;} .span5{width:300px;} .span6{width:364px;} .span7{width:428px;} .span8{width:492px;} .span9{width:556px;} .span10{width:620px;} .span11{width:684px;} .span12{width:748px;} .offset1{margin-left:64px;} .offset2{margin-left:128px;} .offset3{margin-left:192px;} .offset4{margin-left:256px;} .offset5{margin-left:320px;} .offset6{margin-left:384px;} .offset7{margin-left:448px;} .offset8{margin-left:512px;} .offset9{margin-left:576px;} .offset10{margin-left:640px;} .offset11{margin-left:704px;} .offset12{margin-left:768px;}} +@media (max-width:480px){.navbar .nav{position:absolute;top:0;left:0;width:180px;padding-top:40px;list-style:none;} .navbar .nav,.navbar .nav>li:last-child a{-webkit-border-radius:0 0 4px 0;-moz-border-radius:0 0 4px 0;border-radius:0 0 4px 0;} .navbar .nav>li{float:none;display:none;} .navbar .nav>li>a{float:none;background-color:#222;} .navbar .nav>.active{display:block;position:absolute;top:0;left:0;} .navbar .nav>.active>a{background-color:transparent;} .navbar .nav>.active>a:hover{background-color:#333;} .navbar .nav>.active>a:after{display:inline-block;width:0;height:0;margin-top:8px;margin-left:6px;text-indent:-99999px;vertical-align:top;border-left:4px solid transparent;border-right:4px solid transparent;border-top:4px solid #ffffff;filter:alpha(opacity=100);-moz-opacity:1;opacity:1;content:"↓";} .navbar .nav:hover>li{display:block;} .navbar .nav:hover>li>a:hover{background-color:#333;} .form-horizontal .control-group>label{float:none;width:auto;padding-top:0;text-align:left;} .form-horizontal .controls{margin-left:0;} .form-horizontal .control-list{padding-top:0;} .form-horizontal .form-actions{padding-left:0;} .modal{position:fixed;top:20px;left:20px;right:20px;width:auto;}.modal.fade.in{top:auto;} .modal-header .close{padding:10px;}}@media (max-width:768px){.navbar-fixed{position:absolute;} .navbar-fixed .nav{float:none;} .container{width:auto;padding:0 20px;} .row{margin-left:0;} .row>[class*="span"]{float:none;display:block;width:auto;margin:0;}}@media (min-width:768px) and (max-width:940px){.container{width:748px;} .span1{width:44px;} .span2{width:108px;} .span3{width:172px;} .span4{width:236px;} .span5{width:300px;} .span6{width:364px;} .span7{width:428px;} .span8{width:492px;} .span9{width:556px;} .span10{width:620px;} .span11{width:684px;} .span12{width:748px;} .offset1{margin-left:64px;} .offset2{margin-left:128px;} .offset3{margin-left:192px;} .offset4{margin-left:256px;} .offset5{margin-left:320px;} .offset6{margin-left:384px;} .offset7{margin-left:448px;} .offset8{margin-left:512px;} .offset9{margin-left:576px;} .offset10{margin-left:640px;} .offset11{margin-left:704px;} .offset12{margin-left:768px;}} diff --git a/docs/javascript.html b/docs/javascript.html index 1a6565c399..b582b13954 100644 --- a/docs/javascript.html +++ b/docs/javascript.html @@ -1079,6 +1079,7 @@ $('#my-alert').bind('closed', function () { <div class="span9 columns"> <h2>Example accordion</h2> <p>Using the collapse plugin, we built a simple accordion style widget:</p> + <dl class="accordion" id="accordion"> <dt class="accordion-heading"> <a data-toggle="collapse" data-parent="#accordion" href="#collapseOne"> @@ -1086,7 +1087,7 @@ $('#my-alert').bind('closed', function () { </a> </dt> <dd id="collapseOne" class="accordion-body collapse in"> - <p> + <p class="accordion-inner"> Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS. </p> </dd> @@ -1096,7 +1097,7 @@ $('#my-alert').bind('closed', function () { </a> </dt> <dd id="collapseTwo" class="accordion-body collapse"> - <p> + <p class="accordion-inner"> Blog +1 eiusmod, williamsburg chambray craft beer brooklyn. Trust fund squid whatever, sunt hoodie skateboard mustache 3 wolf moon art party wes anderson ad leggings officia. Skateboard keytar incididunt gluten-free retro sartorial, single-origin coffee et viral. Art party blog sunt, readymade fugiat 8-bit aesthetic ex echo park fanny pack keytar. Thundercats sustainable labore, mustache adipisicing tattooed dolore aute occaecat velit 8-bit raw denim letterpress. In occaecat freegan, next level single-origin coffee chambray excepteur nihil duis exercitation adipisicing ex sartorial twee squid. You probably haven't heard of them fugiat ea retro eiusmod quis cosby sweater, +1 fap sapiente biodiesel banksy. </p> </dd> @@ -1106,7 +1107,7 @@ $('#my-alert').bind('closed', function () { </a> </dt> <dd id="collapseThree" class="accordion-body collapse"> - <p> + <p class="accordion-inner"> Tempor gentrify pariatur nihil salvia, irony synth incididunt odio commodo brunch aute. Four loko est vice echo park wes anderson jean shorts, tempor ea vero locavore. Seitan DIY dolore readymade williamsburg viral. Dolor fap master cleanse delectus, ad butcher labore duis vice mollit cillum exercitation eu banh mi. Austin banksy 3 wolf moon locavore sed, helvetica next level VHS you probably haven't heard of them ethical odio. Incididunt locavore minim, do seitan consequat qui thundercats labore before they sold out retro laborum. Esse twee readymade laboris fap vice, voluptate DIY. </p> </dd> diff --git a/lib/accordion.less b/lib/accordion.less index babbe85f92..ab450d10e3 100644 --- a/lib/accordion.less +++ b/lib/accordion.less @@ -4,18 +4,23 @@ .accordion { padding: 0; } + .accordion-heading { padding: 5px 10px; border: 1px solid #ddd; + margin-bottom: 1px; } + .accordion-body { - padding: 10px; margin-left: 0; - margin-bottom: @baseLineHeight / 2; +} + +.accordion-inner { + padding: 10px; border: 1px solid #ddd; border-top: 0; - display: none; } + .accordion .in { - display: block; + margin-bottom: @baseLineHeight / 2; } -- GitLab From 036b98535711941ba64d9bb507f57ca60ec3cdc3 Mon Sep 17 00:00:00 2001 From: Jacob Thornton <jacobthornton@gmail.com> Date: Sun, 15 Jan 2012 21:50:04 -0800 Subject: [PATCH 305/318] fix margin --- bootstrap.css | 5 ++--- bootstrap.min.css | 4 ++-- lib/accordion.less | 3 +-- 3 files changed, 5 insertions(+), 7 deletions(-) diff --git a/bootstrap.css b/bootstrap.css index 7a34c8d69f..6e8d32be50 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 Jan 15 21:48:07 PST 2012 + * Date: Sun Jan 15 21:49:43 PST 2012 */ html, body { margin: 0; @@ -2942,10 +2942,9 @@ a.thumbnail:hover { .accordion-heading { padding: 5px 10px; border: 1px solid #ddd; - margin-bottom: 1px; } .accordion-body { - margin-left: 0; + margin: 0 0 1px 0; } .accordion-inner { padding: 10px; diff --git a/bootstrap.min.css b/bootstrap.min.css index f428436385..93fbf03d49 100644 --- a/bootstrap.min.css +++ b/bootstrap.min.css @@ -514,8 +514,8 @@ a.thumbnail:hover{border-color:#0088cc;-webkit-box-shadow:0 1px 4px rgba(0, 105, .progress.info .bar{background-color:#339bb9;background-image:-khtml-gradient(linear, left top, left bottom, from(#5bc0de), to(#339bb9));background-image:-moz-linear-gradient(top, #5bc0de, #339bb9);background-image:-ms-linear-gradient(top, #5bc0de, #339bb9);background-image:-webkit-gradient(linear, left top, left bottom, color-stop(0%, #5bc0de), color-stop(100%, #339bb9));background-image:-webkit-linear-gradient(top, #5bc0de, #339bb9);background-image:-o-linear-gradient(top, #5bc0de, #339bb9);background-image:linear-gradient(top, #5bc0de, #339bb9);background-repeat:repeat-x;filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#5bc0de', endColorstr='#339bb9', GradientType=0);} .progress.info.striped .bar{background-color:#5bc0de;background-image:-webkit-gradient(linear, 0 100%, 100% 0, color-stop(0.25, rgba(255, 255, 255, 0.15)), color-stop(0.25, transparent), color-stop(0.5, transparent), color-stop(0.5, rgba(255, 255, 255, 0.15)), color-stop(0.75, rgba(255, 255, 255, 0.15)), color-stop(0.75, transparent), to(transparent));background-image:-webkit-linear-gradient(-45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);background-image:-moz-linear-gradient(-45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);background-image:-ms-linear-gradient(-45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);background-image:-o-linear-gradient(-45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);background-image:linear-gradient(-45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);} .accordion{padding:0;} -.accordion-heading{padding:5px 10px;border:1px solid #ddd;margin-bottom:1px;} -.accordion-body{margin-left:0;} +.accordion-heading{padding:5px 10px;border:1px solid #ddd;} +.accordion-body{margin:0 0 1px 0;} .accordion-inner{padding:10px;border:1px solid #ddd;border-top:0;} .accordion .in{margin-bottom:9px;} .carousel{position:relative;line-height:1;} diff --git a/lib/accordion.less b/lib/accordion.less index ab450d10e3..8485ee4273 100644 --- a/lib/accordion.less +++ b/lib/accordion.less @@ -8,11 +8,10 @@ .accordion-heading { padding: 5px 10px; border: 1px solid #ddd; - margin-bottom: 1px; } .accordion-body { - margin-left: 0; + margin: 0 0 1px 0; } .accordion-inner { -- GitLab From 87bd0e0b88b9c5a836bfde1478839e542c74ac05 Mon Sep 17 00:00:00 2001 From: Jacob Thornton <jacobthornton@gmail.com> Date: Sun, 15 Jan 2012 21:54:58 -0800 Subject: [PATCH 306/318] do some trickery to get borders looking right --- bootstrap.css | 7 +++++-- bootstrap.min.css | 6 +++--- lib/accordion.less | 5 ++++- 3 files changed, 12 insertions(+), 6 deletions(-) diff --git a/bootstrap.css b/bootstrap.css index 6e8d32be50..efc1343178 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 Jan 15 21:49:43 PST 2012 + * Date: Sun Jan 15 21:54:32 PST 2012 */ html, body { margin: 0; @@ -2942,14 +2942,17 @@ a.thumbnail:hover { .accordion-heading { padding: 5px 10px; border: 1px solid #ddd; + border-bottom: 0; } .accordion-body { + border-bottom: 1px solid #ddd; margin: 0 0 1px 0; } .accordion-inner { padding: 10px; border: 1px solid #ddd; - border-top: 0; + border-bottom: 0; + margin-bottom: 0; } .accordion .in { margin-bottom: 9px; diff --git a/bootstrap.min.css b/bootstrap.min.css index 93fbf03d49..95229b2d97 100644 --- a/bootstrap.min.css +++ b/bootstrap.min.css @@ -514,9 +514,9 @@ a.thumbnail:hover{border-color:#0088cc;-webkit-box-shadow:0 1px 4px rgba(0, 105, .progress.info .bar{background-color:#339bb9;background-image:-khtml-gradient(linear, left top, left bottom, from(#5bc0de), to(#339bb9));background-image:-moz-linear-gradient(top, #5bc0de, #339bb9);background-image:-ms-linear-gradient(top, #5bc0de, #339bb9);background-image:-webkit-gradient(linear, left top, left bottom, color-stop(0%, #5bc0de), color-stop(100%, #339bb9));background-image:-webkit-linear-gradient(top, #5bc0de, #339bb9);background-image:-o-linear-gradient(top, #5bc0de, #339bb9);background-image:linear-gradient(top, #5bc0de, #339bb9);background-repeat:repeat-x;filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#5bc0de', endColorstr='#339bb9', GradientType=0);} .progress.info.striped .bar{background-color:#5bc0de;background-image:-webkit-gradient(linear, 0 100%, 100% 0, color-stop(0.25, rgba(255, 255, 255, 0.15)), color-stop(0.25, transparent), color-stop(0.5, transparent), color-stop(0.5, rgba(255, 255, 255, 0.15)), color-stop(0.75, rgba(255, 255, 255, 0.15)), color-stop(0.75, transparent), to(transparent));background-image:-webkit-linear-gradient(-45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);background-image:-moz-linear-gradient(-45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);background-image:-ms-linear-gradient(-45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);background-image:-o-linear-gradient(-45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);background-image:linear-gradient(-45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);} .accordion{padding:0;} -.accordion-heading{padding:5px 10px;border:1px solid #ddd;} -.accordion-body{margin:0 0 1px 0;} -.accordion-inner{padding:10px;border:1px solid #ddd;border-top:0;} +.accordion-heading{padding:5px 10px;border:1px solid #ddd;border-bottom:0;} +.accordion-body{border-bottom:1px solid #ddd;margin:0 0 1px 0;} +.accordion-inner{padding:10px;border:1px solid #ddd;border-bottom:0;margin-bottom:0;} .accordion .in{margin-bottom:9px;} .carousel{position:relative;line-height:1;} .carousel-inner{overflow:hidden;width:100%;position:relative;} diff --git a/lib/accordion.less b/lib/accordion.less index 8485ee4273..c5fd657e02 100644 --- a/lib/accordion.less +++ b/lib/accordion.less @@ -8,16 +8,19 @@ .accordion-heading { padding: 5px 10px; border: 1px solid #ddd; + border-bottom: 0; } .accordion-body { + border-bottom: 1px solid #ddd; margin: 0 0 1px 0; } .accordion-inner { padding: 10px; border: 1px solid #ddd; - border-top: 0; + border-bottom: 0; + margin-bottom: 0; } .accordion .in { -- GitLab From 7ec4e91324e6e490291f3de22e1127c4fa55f82a Mon Sep 17 00:00:00 2001 From: Jacob Thornton <jacobthornton@gmail.com> Date: Sun, 15 Jan 2012 21:58:45 -0800 Subject: [PATCH 307/318] reorder properties --- bootstrap.css | 6 +++--- bootstrap.min.css | 4 ++-- lib/accordion.less | 4 ++-- 3 files changed, 7 insertions(+), 7 deletions(-) diff --git a/bootstrap.css b/bootstrap.css index efc1343178..8b82efd579 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 Jan 15 21:54:32 PST 2012 + * Date: Sun Jan 15 21:58:40 PST 2012 */ html, body { margin: 0; @@ -2945,14 +2945,14 @@ a.thumbnail:hover { border-bottom: 0; } .accordion-body { - border-bottom: 1px solid #ddd; margin: 0 0 1px 0; + border-bottom: 1px solid #ddd; } .accordion-inner { padding: 10px; + margin-bottom: 0; border: 1px solid #ddd; border-bottom: 0; - margin-bottom: 0; } .accordion .in { margin-bottom: 9px; diff --git a/bootstrap.min.css b/bootstrap.min.css index 95229b2d97..a3e2b35460 100644 --- a/bootstrap.min.css +++ b/bootstrap.min.css @@ -515,8 +515,8 @@ a.thumbnail:hover{border-color:#0088cc;-webkit-box-shadow:0 1px 4px rgba(0, 105, .progress.info.striped .bar{background-color:#5bc0de;background-image:-webkit-gradient(linear, 0 100%, 100% 0, color-stop(0.25, rgba(255, 255, 255, 0.15)), color-stop(0.25, transparent), color-stop(0.5, transparent), color-stop(0.5, rgba(255, 255, 255, 0.15)), color-stop(0.75, rgba(255, 255, 255, 0.15)), color-stop(0.75, transparent), to(transparent));background-image:-webkit-linear-gradient(-45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);background-image:-moz-linear-gradient(-45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);background-image:-ms-linear-gradient(-45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);background-image:-o-linear-gradient(-45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);background-image:linear-gradient(-45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);} .accordion{padding:0;} .accordion-heading{padding:5px 10px;border:1px solid #ddd;border-bottom:0;} -.accordion-body{border-bottom:1px solid #ddd;margin:0 0 1px 0;} -.accordion-inner{padding:10px;border:1px solid #ddd;border-bottom:0;margin-bottom:0;} +.accordion-body{margin:0 0 1px 0;border-bottom:1px solid #ddd;} +.accordion-inner{padding:10px;margin-bottom:0;border:1px solid #ddd;border-bottom:0;} .accordion .in{margin-bottom:9px;} .carousel{position:relative;line-height:1;} .carousel-inner{overflow:hidden;width:100%;position:relative;} diff --git a/lib/accordion.less b/lib/accordion.less index c5fd657e02..7bd0b8278e 100644 --- a/lib/accordion.less +++ b/lib/accordion.less @@ -12,15 +12,15 @@ } .accordion-body { - border-bottom: 1px solid #ddd; margin: 0 0 1px 0; + border-bottom: 1px solid #ddd; } .accordion-inner { padding: 10px; + margin-bottom: 0; border: 1px solid #ddd; border-bottom: 0; - margin-bottom: 0; } .accordion .in { -- GitLab From f1a88eede391cbb4beaadce60768a351724d7633 Mon Sep 17 00:00:00 2001 From: Mark Otto <markdotto@gmail.com> Date: Mon, 16 Jan 2012 17:27:30 -0800 Subject: [PATCH 308/318] fix js link in docs nav, restyle accordion with new css --- bootstrap.css | 24 ++++++++++----- bootstrap.min.css | 5 ++-- docs/base-css.html | 2 +- docs/components.html | 2 +- docs/index.html | 2 +- docs/javascript.html | 69 +++++++++++++++++++++++-------------------- docs/less.html | 2 +- docs/scaffolding.html | 2 +- docs/upgrading.html | 2 +- lib/accordion.less | 18 ++++++----- 10 files changed, 73 insertions(+), 55 deletions(-) diff --git a/bootstrap.css b/bootstrap.css index 8192b24c8a..acd0ae5c88 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 Jan 15 18:32:40 PST 2012 + * Date: Mon Jan 16 16:01:19 PST 2012 */ html, body { margin: 0; @@ -2939,17 +2939,25 @@ a.thumbnail:hover { .accordion { padding: 0; } +.accordion-group { + margin-bottom: 9px; + background-color: #eee; + -webkit-border-radius: 4px; + -moz-border-radius: 4px; + border-radius: 4px; +} .accordion-heading { - padding: 5px 10px; - border: 1px solid #ddd; + display: block; + padding: 9px 15px; } .accordion-body { - padding: 10px; - margin-left: 0; - margin-bottom: 9px; - border: 1px solid #ddd; - border-top: 0; display: none; + padding: 15px; + margin-left: 0; + border-top: 1px solid #ddd; + -webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.25); + -moz-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.25); + box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.25); } .accordion .in { display: block; diff --git a/bootstrap.min.css b/bootstrap.min.css index 6e348c597a..93b85abc1a 100644 --- a/bootstrap.min.css +++ b/bootstrap.min.css @@ -514,8 +514,9 @@ a.thumbnail:hover{border-color:#0088cc;-webkit-box-shadow:0 1px 4px rgba(0, 105, .progress.info .bar{background-color:#339bb9;background-image:-khtml-gradient(linear, left top, left bottom, from(#5bc0de), to(#339bb9));background-image:-moz-linear-gradient(top, #5bc0de, #339bb9);background-image:-ms-linear-gradient(top, #5bc0de, #339bb9);background-image:-webkit-gradient(linear, left top, left bottom, color-stop(0%, #5bc0de), color-stop(100%, #339bb9));background-image:-webkit-linear-gradient(top, #5bc0de, #339bb9);background-image:-o-linear-gradient(top, #5bc0de, #339bb9);background-image:linear-gradient(top, #5bc0de, #339bb9);background-repeat:repeat-x;filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#5bc0de', endColorstr='#339bb9', GradientType=0);} .progress.info.striped .bar{background-color:#5bc0de;background-image:-webkit-gradient(linear, 0 100%, 100% 0, color-stop(0.25, rgba(255, 255, 255, 0.15)), color-stop(0.25, transparent), color-stop(0.5, transparent), color-stop(0.5, rgba(255, 255, 255, 0.15)), color-stop(0.75, rgba(255, 255, 255, 0.15)), color-stop(0.75, transparent), to(transparent));background-image:-webkit-linear-gradient(-45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);background-image:-moz-linear-gradient(-45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);background-image:-ms-linear-gradient(-45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);background-image:-o-linear-gradient(-45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);background-image:linear-gradient(-45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);} .accordion{padding:0;} -.accordion-heading{padding:5px 10px;border:1px solid #ddd;} -.accordion-body{padding:10px;margin-left:0;margin-bottom:9px;border:1px solid #ddd;border-top:0;display:none;} +.accordion-group{margin-bottom:9px;background-color:#eee;-webkit-border-radius:4px;-moz-border-radius:4px;border-radius:4px;} +.accordion-heading{display:block;padding:9px 15px;} +.accordion-body{display:none;padding:15px;margin-left:0;border-top:1px solid #ddd;-webkit-box-shadow:inset 0 1px 0 rgba(255, 255, 255, 0.25);-moz-box-shadow:inset 0 1px 0 rgba(255, 255, 255, 0.25);box-shadow:inset 0 1px 0 rgba(255, 255, 255, 0.25);} .accordion .in{display:block;} .carousel{position:relative;line-height:1;} .carousel-inner{overflow:hidden;width:100%;position:relative;} diff --git a/docs/base-css.html b/docs/base-css.html index ccc2216c67..3ba3e4525d 100644 --- a/docs/base-css.html +++ b/docs/base-css.html @@ -81,7 +81,7 @@ <b class="caret"></b> </a> <ul class="dropdown-menu"> - <li><a href="./javascript.html#transitions">Transition</a></li> + <li><a href="./javascript.html#javascript">Overview</a></li> <li><a href="./javascript.html#modals">Modal</a></li> <li><a href="./javascript.html#dropdowns">Dropdown</a></li> <li><a href="./javascript.html#scrollspy">Scrollspy</a></li> diff --git a/docs/components.html b/docs/components.html index 1343a4279d..dd7f098b5f 100644 --- a/docs/components.html +++ b/docs/components.html @@ -81,7 +81,7 @@ <b class="caret"></b> </a> <ul class="dropdown-menu"> - <li><a href="./javascript.html#transitions">Transition</a></li> + <li><a href="./javascript.html#javascript">Overview</a></li> <li><a href="./javascript.html#modals">Modal</a></li> <li><a href="./javascript.html#dropdowns">Dropdown</a></li> <li><a href="./javascript.html#scrollspy">Scrollspy</a></li> diff --git a/docs/index.html b/docs/index.html index 62931daac1..c30417c8f5 100644 --- a/docs/index.html +++ b/docs/index.html @@ -82,7 +82,7 @@ <b class="caret"></b> </a> <ul class="dropdown-menu"> - <li><a href="./javascript.html#transitions">Transition</a></li> + <li><a href="./javascript.html#javascript">Overview</a></li> <li><a href="./javascript.html#modals">Modal</a></li> <li><a href="./javascript.html#dropdowns">Dropdown</a></li> <li><a href="./javascript.html#scrollspy">Scrollspy</a></li> diff --git a/docs/javascript.html b/docs/javascript.html index 1a6565c399..5435784266 100644 --- a/docs/javascript.html +++ b/docs/javascript.html @@ -82,7 +82,7 @@ <b class="caret"></b> </a> <ul class="dropdown-menu"> - <li><a href="./javascript.html#transitions">Transition</a></li> + <li><a href="./javascript.html#javascript">Overview</a></li> <li><a href="./javascript.html#modals">Modal</a></li> <li><a href="./javascript.html#dropdowns">Dropdown</a></li> <li><a href="./javascript.html#scrollspy">Scrollspy</a></li> @@ -151,7 +151,7 @@ <div class="span3"> <label> <h3><a href="./javascript.html#tooltips">Tooltips</a><input checked="true" value="bootstrap-tooltip.js" type="checkbox"></h3> - <p>A new take on the jQuery Tipsy plugin, Tooltips are an updated version, which don't rely on images, uss css3 for animations, and data-attributes for local title storage.</p> + <p>A new take on the jQuery Tipsy plugin, Tooltips don't rely on images, uss CSS3 for animations, and data-attributes for local title storage.</p> </label> </div> <div class="span3"> @@ -196,7 +196,7 @@ <div class="span3"> <label> <h3><a href="./javascript.html#transitions">Transitions</a> <small class="muted">*</small><input value="bootstrap-transition.js" checked="true" type="checkbox"></h3> - <p>For simple transition effects, include bootstrap-transition.js once to slide in modals or fade out alert messages.</p> + <p>For simple transition effects, include bootstrap-transition.js once to slide in modals or fade out alerts.</p> <p class="muted"><strong>*</strong> Required for animation in plugins</p> </label> </div> @@ -1079,38 +1079,43 @@ $('#my-alert').bind('closed', function () { <div class="span9 columns"> <h2>Example accordion</h2> <p>Using the collapse plugin, we built a simple accordion style widget:</p> - <dl class="accordion" id="accordion"> - <dt class="accordion-heading"> - <a data-toggle="collapse" data-parent="#accordion" href="#collapseOne"> - Collapsible Group Item #1 + + <div class="accordion"> + <div class="accordion-group"> + <a class="accordion-heading" data-toggle="collapse" data-parent="#accordion" href="#collapseOne"> + Collapsible group #1 </a> - </dt> - <dd id="collapseOne" class="accordion-body collapse in"> - <p> - Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS. - </p> - </dd> - <dt class="accordion-heading"> - <a data-toggle="collapse" data-parent="#accordion" href="#collapseTwo"> - Collapsible Group Item #2 + <div class="accordion-body collapse in" id="collapseOne"> + <h5>Lorem ipsum</h5> + <p>Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod.</p> + <p>Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et.</p> + <p>Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.</p> + </div> + </div> + <div class="accordion-group"> + <a class="accordion-heading" data-toggle="collapse" data-parent="#accordion" href="#collapseTwo"> + Collapsible group #2 </a> - </dt> - <dd id="collapseTwo" class="accordion-body collapse"> - <p> - Blog +1 eiusmod, williamsburg chambray craft beer brooklyn. Trust fund squid whatever, sunt hoodie skateboard mustache 3 wolf moon art party wes anderson ad leggings officia. Skateboard keytar incididunt gluten-free retro sartorial, single-origin coffee et viral. Art party blog sunt, readymade fugiat 8-bit aesthetic ex echo park fanny pack keytar. Thundercats sustainable labore, mustache adipisicing tattooed dolore aute occaecat velit 8-bit raw denim letterpress. In occaecat freegan, next level single-origin coffee chambray excepteur nihil duis exercitation adipisicing ex sartorial twee squid. You probably haven't heard of them fugiat ea retro eiusmod quis cosby sweater, +1 fap sapiente biodiesel banksy. - </p> - </dd> - <dt class="accordion-heading"> - <a data-toggle="collapse" data-parent="#accordion" href="#collapseThree"> - Collapsible Group Item #3 + <div class="accordion-body collapse" id="collapseTwo"> + <h5>Lorem ipsum</h5> + <p>Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod.</p> + <p>Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et.</p> + <p>Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.</p> + </div> + </div> + <div class="accordion-group"> + <a class="accordion-heading" data-toggle="collapse" data-parent="#accordion" href="#collapseThree"> + Collapsible group #3 </a> - </dt> - <dd id="collapseThree" class="accordion-body collapse"> - <p> - Tempor gentrify pariatur nihil salvia, irony synth incididunt odio commodo brunch aute. Four loko est vice echo park wes anderson jean shorts, tempor ea vero locavore. Seitan DIY dolore readymade williamsburg viral. Dolor fap master cleanse delectus, ad butcher labore duis vice mollit cillum exercitation eu banh mi. Austin banksy 3 wolf moon locavore sed, helvetica next level VHS you probably haven't heard of them ethical odio. Incididunt locavore minim, do seitan consequat qui thundercats labore before they sold out retro laborum. Esse twee readymade laboris fap vice, voluptate DIY. - </p> - </dd> - </dl> + <div class="accordion-body collapse" id="collapseThree"> + <h5>Lorem ipsum</h5> + <p>Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod.</p> + <p>Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et.</p> + <p>Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.</p> + </div> + </div> + </div> + <hr> <h2>Using bootstrap-collapse.js</h2> <p>Enable via javascript:</p> diff --git a/docs/less.html b/docs/less.html index 357f242b10..6e43d95bd1 100644 --- a/docs/less.html +++ b/docs/less.html @@ -81,7 +81,7 @@ <b class="caret"></b> </a> <ul class="dropdown-menu"> - <li><a href="./javascript.html#transitions">Transition</a></li> + <li><a href="./javascript.html#javascript">Overview</a></li> <li><a href="./javascript.html#modals">Modal</a></li> <li><a href="./javascript.html#dropdowns">Dropdown</a></li> <li><a href="./javascript.html#scrollspy">Scrollspy</a></li> diff --git a/docs/scaffolding.html b/docs/scaffolding.html index eab6fedf52..77b94d8ce3 100644 --- a/docs/scaffolding.html +++ b/docs/scaffolding.html @@ -81,7 +81,7 @@ <b class="caret"></b> </a> <ul class="dropdown-menu"> - <li><a href="./javascript.html#transitions">Transition</a></li> + <li><a href="./javascript.html#javascript">Overview</a></li> <li><a href="./javascript.html#modals">Modal</a></li> <li><a href="./javascript.html#dropdowns">Dropdown</a></li> <li><a href="./javascript.html#scrollspy">Scrollspy</a></li> diff --git a/docs/upgrading.html b/docs/upgrading.html index e1b9f204e3..42521bb9a8 100644 --- a/docs/upgrading.html +++ b/docs/upgrading.html @@ -81,7 +81,7 @@ <b class="caret"></b> </a> <ul class="dropdown-menu"> - <li><a href="./javascript.html#transitions">Transition</a></li> + <li><a href="./javascript.html#javascript">Overview</a></li> <li><a href="./javascript.html#modals">Modal</a></li> <li><a href="./javascript.html#dropdowns">Dropdown</a></li> <li><a href="./javascript.html#scrollspy">Scrollspy</a></li> diff --git a/lib/accordion.less b/lib/accordion.less index babbe85f92..25e8fec631 100644 --- a/lib/accordion.less +++ b/lib/accordion.less @@ -4,17 +4,21 @@ .accordion { padding: 0; } +.accordion-group { + margin-bottom: @baseLineHeight / 2; + background-color: #eee; + .border-radius(4px); +} .accordion-heading { - padding: 5px 10px; - border: 1px solid #ddd; + display: block; + padding: 9px 15px; } .accordion-body { - padding: 10px; - margin-left: 0; - margin-bottom: @baseLineHeight / 2; - border: 1px solid #ddd; - border-top: 0; display: none; + padding: 15px; + margin-left: 0; + border-top: 1px solid #ddd; + .box-shadow(inset 0 1px 0 rgba(255,255,255,.25)); } .accordion .in { display: block; -- GitLab From 593b062c7a9781272b983a1a2e1af0824d79e1c4 Mon Sep 17 00:00:00 2001 From: Jacob Thornton <jacobthornton@gmail.com> Date: Tue, 17 Jan 2012 10:32:25 -0800 Subject: [PATCH 309/318] wrap transition --- js/bootstrap-transition.js | 50 ++++++++++++++++++++------------------ 1 file changed, 27 insertions(+), 23 deletions(-) diff --git a/js/bootstrap-transition.js b/js/bootstrap-transition.js index aaaee4bd28..8f6e86e442 100644 --- a/js/bootstrap-transition.js +++ b/js/bootstrap-transition.js @@ -17,31 +17,35 @@ * limitations under the License. * ========================================================== */ -$(function () { +!function( $ ) { - "use strict" + $(function () { - /* CSS TRANSITION SUPPORT (https://gist.github.com/373874) - * ======================================================= */ + "use strict" - $.support.transition = (function () { - var thisBody = document.body || document.documentElement - , thisStyle = thisBody.style - , support = thisStyle.transition !== undefined || thisStyle.WebkitTransition !== undefined || thisStyle.MozTransition !== undefined || thisStyle.MsTransition !== undefined || thisStyle.OTransition !== undefined + /* CSS TRANSITION SUPPORT (https://gist.github.com/373874) + * ======================================================= */ - return support && { - end: (function () { - var transitionEnd = "TransitionEnd" - if ( $.browser.webkit ) { - transitionEnd = "webkitTransitionEnd" - } else if ( $.browser.mozilla ) { - transitionEnd = "transitionend" - } else if ( $.browser.opera ) { - transitionEnd = "oTransitionEnd" - } - return transitionEnd - }()) - } - })() + $.support.transition = (function () { + var thisBody = document.body || document.documentElement + , thisStyle = thisBody.style + , support = thisStyle.transition !== undefined || thisStyle.WebkitTransition !== undefined || thisStyle.MozTransition !== undefined || thisStyle.MsTransition !== undefined || thisStyle.OTransition !== undefined -}) \ No newline at end of file + return support && { + end: (function () { + var transitionEnd = "TransitionEnd" + if ( $.browser.webkit ) { + transitionEnd = "webkitTransitionEnd" + } else if ( $.browser.mozilla ) { + transitionEnd = "transitionend" + } else if ( $.browser.opera ) { + transitionEnd = "oTransitionEnd" + } + return transitionEnd + }()) + } + })() + + }) + +}( window.jQuery ) \ No newline at end of file -- GitLab From 4d098a7f8e2a39e7eb9baf36087e0c9856205413 Mon Sep 17 00:00:00 2001 From: Ben Oberkfell <boberkfell@gmail.com> Date: Wed, 18 Jan 2012 00:37:24 -0600 Subject: [PATCH 310/318] typo fix in component docs --- docs/components.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/components.html b/docs/components.html index 1343a4279d..bc7d335c8d 100644 --- a/docs/components.html +++ b/docs/components.html @@ -1278,7 +1278,7 @@ </div> <div class="span4"> <h3>Browser support</h3> - <p>Progress bars use CSS3 gradients, transitions, and animations to achieve all theire effects. These features are not supported in IE7-8 or older versions of Firefox.</p> + <p>Progress bars use CSS3 gradients, transitions, and animations to achieve all their effects. These features are not supported in IE7-8 or older versions of Firefox.</p> <p>Opera does not support animations at this time.</p> </div> </div> -- GitLab From 51f5b7b8af6e0f6ef0dbe86528209cd664af240a Mon Sep 17 00:00:00 2001 From: Mark Otto <markdotto@gmail.com> Date: Tue, 17 Jan 2012 23:24:59 -0800 Subject: [PATCH 311/318] cleanup accordion css and add comments --- bootstrap.css | 9 +++------ bootstrap.min.css | 5 ++--- docs/javascript.html | 2 +- lib/accordion.less | 11 +++++------ 4 files changed, 11 insertions(+), 16 deletions(-) diff --git a/bootstrap.css b/bootstrap.css index 9d3f9d9b6c..d573d34366 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: Tue Jan 17 23:17:49 PST 2012 + * Date: Tue Jan 17 23:24:38 PST 2012 */ html, body { margin: 0; @@ -2937,7 +2937,7 @@ a.thumbnail:hover { background-image: linear-gradient(-45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent); } .accordion { - padding: 0; + margin-bottom: 18px; } .accordion-group { background-color: #f5f5f5; @@ -2950,15 +2950,12 @@ a.thumbnail:hover { border-bottom: 0; } .accordion-body { - margin: 0 0 2px; + margin-bottom: 2px; } .accordion-inner { padding: 9px 15px; border-top: 1px solid #e5e5e5; } -.accordion .in { - margin-bottom: 9px; -} .carousel { position: relative; line-height: 1; diff --git a/bootstrap.min.css b/bootstrap.min.css index 09ecc6663a..1255854f80 100644 --- a/bootstrap.min.css +++ b/bootstrap.min.css @@ -513,12 +513,11 @@ a.thumbnail:hover{border-color:#0088cc;-webkit-box-shadow:0 1px 4px rgba(0, 105, .progress.success.striped .bar{background-color:#62c462;background-image:-webkit-gradient(linear, 0 100%, 100% 0, color-stop(0.25, rgba(255, 255, 255, 0.15)), color-stop(0.25, transparent), color-stop(0.5, transparent), color-stop(0.5, rgba(255, 255, 255, 0.15)), color-stop(0.75, rgba(255, 255, 255, 0.15)), color-stop(0.75, transparent), to(transparent));background-image:-webkit-linear-gradient(-45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);background-image:-moz-linear-gradient(-45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);background-image:-ms-linear-gradient(-45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);background-image:-o-linear-gradient(-45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);background-image:linear-gradient(-45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);} .progress.info .bar{background-color:#339bb9;background-image:-khtml-gradient(linear, left top, left bottom, from(#5bc0de), to(#339bb9));background-image:-moz-linear-gradient(top, #5bc0de, #339bb9);background-image:-ms-linear-gradient(top, #5bc0de, #339bb9);background-image:-webkit-gradient(linear, left top, left bottom, color-stop(0%, #5bc0de), color-stop(100%, #339bb9));background-image:-webkit-linear-gradient(top, #5bc0de, #339bb9);background-image:-o-linear-gradient(top, #5bc0de, #339bb9);background-image:linear-gradient(top, #5bc0de, #339bb9);background-repeat:repeat-x;filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#5bc0de', endColorstr='#339bb9', GradientType=0);} .progress.info.striped .bar{background-color:#5bc0de;background-image:-webkit-gradient(linear, 0 100%, 100% 0, color-stop(0.25, rgba(255, 255, 255, 0.15)), color-stop(0.25, transparent), color-stop(0.5, transparent), color-stop(0.5, rgba(255, 255, 255, 0.15)), color-stop(0.75, rgba(255, 255, 255, 0.15)), color-stop(0.75, transparent), to(transparent));background-image:-webkit-linear-gradient(-45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);background-image:-moz-linear-gradient(-45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);background-image:-ms-linear-gradient(-45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);background-image:-o-linear-gradient(-45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);background-image:linear-gradient(-45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);} -.accordion{padding:0;} +.accordion{margin-bottom:18px;} .accordion-group{background-color:#f5f5f5;-webkit-border-radius:4px;-moz-border-radius:4px;border-radius:4px;} .accordion-heading{padding:8px 15px;border-bottom:0;} -.accordion-body{margin:0 0 2px;} +.accordion-body{margin-bottom:2px;} .accordion-inner{padding:9px 15px;border-top:1px solid #e5e5e5;} -.accordion .in{margin-bottom:9px;} .carousel{position:relative;line-height:1;} .carousel-inner{overflow:hidden;width:100%;position:relative;} .carousel .item{display:none;position:relative;-webkit-transition:0.6s ease-in-out left;-moz-transition:0.6s ease-in-out left;-ms-transition:0.6s ease-in-out left;-o-transition:0.6s ease-in-out left;transition:0.6s ease-in-out left;} diff --git a/docs/javascript.html b/docs/javascript.html index 34dfc1c4b6..a132a40118 100644 --- a/docs/javascript.html +++ b/docs/javascript.html @@ -1080,7 +1080,7 @@ $('#my-alert').bind('closed', function () { <h2>Example accordion</h2> <p>Using the collapse plugin, we built a simple accordion style widget:</p> - <div class="accordion2" id="accordion2"> + <div class="accordion" id="accordion2"> <div class="accordion-group"> <div class="accordion-heading"> <a data-toggle="collapse" data-parent="#accordion2" href="#collapseOne"> diff --git a/lib/accordion.less b/lib/accordion.less index b7542b18f2..a57683e7b0 100644 --- a/lib/accordion.less +++ b/lib/accordion.less @@ -1,10 +1,13 @@ // ACCORDION // --------- + +// Parent container .accordion { margin-bottom: @baseLineHeight; } +// Group == heading + body .accordion-group { background-color: #f5f5f5; .border-radius(4px); @@ -13,16 +16,12 @@ padding: 8px 15px; border-bottom: 0; } - .accordion-body { - margin: 0 0 2px; + margin-bottom: 2px; } +// Inner needs the styles because you can't animate properly with any styles on the element .accordion-inner { padding: 9px 15px; border-top: 1px solid #e5e5e5; } - -.accordion .in { - margin-bottom: @baseLineHeight / 2; -} -- GitLab From 47b8184bbb5784eb373ffbb905c8a1756eba3c6d Mon Sep 17 00:00:00 2001 From: Mark Otto <markdotto@gmail.com> Date: Tue, 17 Jan 2012 23:39:18 -0800 Subject: [PATCH 312/318] scope table styles to a class, .table, instead of on the generic element as a smarter default --- bootstrap.css | 14 ++++++------ bootstrap.min.css | 11 +++++----- docs/base-css.html | 47 ++++++++++++++++++++++----------------- docs/index.html | 2 +- docs/javascript.html | 24 ++++++++++---------- docs/less.html | 14 ++++++------ docs/scaffolding.html | 4 ++-- lib/tables.less | 51 +++++++++++++++++++++---------------------- 8 files changed, 86 insertions(+), 81 deletions(-) diff --git a/bootstrap.css b/bootstrap.css index d573d34366..c184d1332a 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: Tue Jan 17 23:24:38 PST 2012 + * Date: Tue Jan 17 23:38:42 PST 2012 */ html, body { margin: 0; @@ -975,27 +975,27 @@ input::-webkit-input-placeholder { .form-horizontal .form-actions { padding-left: 160px; } -table { +.table { width: 100%; margin-bottom: 18px; } -th, td { +.table th, .table td { padding: 8px; line-height: 18px; text-align: left; border-top: 1px solid #ddd; } -th { +.table th { font-weight: bold; vertical-align: bottom; } -td { +.table td { vertical-align: top; } -thead:first-child tr th, thead:first-child tr td { +.table thead:first-child tr th, .table thead:first-child tr td { border-top: 0; } -tbody + tbody { +.table tbody + tbody { border-top: 2px solid #ddd; } .table-condensed th, .table-condensed td { diff --git a/bootstrap.min.css b/bootstrap.min.css index 1255854f80..a6128a0b5e 100644 --- a/bootstrap.min.css +++ b/bootstrap.min.css @@ -176,12 +176,11 @@ input::-webkit-input-placeholder{color:#999999;} .form-horizontal .control-group>label{float:left;width:140px;padding-top:5px;text-align:right;} .form-horizontal .controls{margin-left:160px;} .form-horizontal .form-actions{padding-left:160px;} -table{width:100%;margin-bottom:18px;} -th,td{padding:8px;line-height:18px;text-align:left;border-top:1px solid #ddd;} -th{font-weight:bold;vertical-align:bottom;} -td{vertical-align:top;} -thead:first-child tr th,thead:first-child tr td{border-top:0;} -tbody+tbody{border-top:2px solid #ddd;} +.table{width:100%;margin-bottom:18px;}.table th,.table td{padding:8px;line-height:18px;text-align:left;border-top:1px solid #ddd;} +.table th{font-weight:bold;vertical-align:bottom;} +.table td{vertical-align:top;} +.table thead:first-child tr th,.table thead:first-child tr td{border-top:0;} +.table tbody+tbody{border-top:2px solid #ddd;} .table-condensed th,.table-condensed td{padding:4px 5px;} .table-bordered{border:1px solid #ddd;border-collapse:separate;-webkit-border-radius:4px;-moz-border-radius:4px;border-radius:4px;}.table-bordered th+th,.table-bordered td+td,.table-bordered th+td,.table-bordered td+th{border-left:1px solid #ddd;} .table-bordered thead:first-child tr:first-child th,.table-bordered tbody:first-child tr:first-child th,.table-bordered tbody:first-child tr:first-child td{border-top:0;} diff --git a/docs/base-css.html b/docs/base-css.html index 1d64a57870..fa60204a84 100644 --- a/docs/base-css.html +++ b/docs/base-css.html @@ -150,7 +150,7 @@ <!-- Misc Elements --> <h2>Emphasis, address, and abbreviation</h2> - <table class="table-bordered table-striped"> + <table class="table table-bordered table-striped"> <thead> <tr> <th>Element</th> @@ -237,7 +237,7 @@ <!-- Blockquotes --> <h2>Blockquotes</h2> - <table class="table-bordered table-striped"> + <table class="table table-bordered table-striped"> <thead> <tr> <th>Element</th> @@ -383,7 +383,7 @@ <!-- Code --> <h2>Code <small>Inline and block</small></h2> - <table class="table-bordered table-striped"> + <table class="table table-bordered table-striped"> <thead> <tr> <th style="width: 190px;">Element</th> @@ -425,7 +425,7 @@ <!-- Labels --> <h2>Inline labels <small>for special attention</small></h2> - <table class="table-bordered table-striped"> + <table class="table table-bordered table-striped"> <thead> <tr> <th style="width: 190px;">Labels</th> @@ -490,7 +490,7 @@ <h2>Table markup</h2> <div class="row"> <div class="span8"> - <table class="table-bordered table-striped"> + <table class="table table-bordered table-striped"> <thead> <tr> <th>Tag</th> @@ -579,7 +579,7 @@ </div> <h2>Table options</h2> - <table class="table-bordered table-striped"> + <table class="table table-bordered table-striped"> <thead> <tr> <th>Name</th> @@ -591,6 +591,13 @@ <tr> <td>Default</td> <td class="muted">None</td> + <td>No styles, just columns and rows</td> + </tr> + <tr> + <td>Basic</td> + <td> + <code>.table</code> + </td> <td>Only horizontal lines between rows</td> </tr> <tr> @@ -623,14 +630,14 @@ <h3>1. Default table styles</h3> <div class="row"> <div class="span4"> - <p>Tables are automatically styled with only a few borders to ensure readability and maintain structure. No classes are required.</p> + <p>Tables are automatically styled with only a few borders to ensure readability and maintain structure. With 2.0, the <code>.table</code> class is required.</p> <pre class="prettyprint linenums"> -<table> +<table class="table"> ... </table></pre> </div> <div class="span8"> - <table> + <table class="table"> <thead> <tr> <th>#</th> @@ -670,12 +677,12 @@ <p>Get a little fancy with your tables by adding zebra-striping—just add the <code>.table-striped</code> class.</p> <p class="muted"><strong>Note:</strong> Sprited tables use the <code>:nth-child</code> CSS selector and is not available in IE7-IE8.</p> <pre class="prettyprint linenums" style="margin-bottom: 18px;"> -<table class="table-striped"> +<table class="table table-striped"> ... </table></pre> </div> <div class="span8"> - <table class="table-striped"> + <table class="table table-striped"> <thead> <tr> <th>#</th> @@ -714,12 +721,12 @@ <div class="span4"> <p>Add borders around the entire table and rounded corners for aesthetic purposes.</p> <pre class="prettyprint linenums"> -<table class="table-bordered"> +<table class="table table-bordered"> ... </table></pre> </div> <div class="span8"> - <table class="table-bordered"> + <table class="table table-bordered"> <thead> <tr> <th>#</th> @@ -762,12 +769,12 @@ <div class="span4"> <p>Make your tables more compact by adding the <code>.table-condensed</code> class to cut table cell padding in half (from 10px to 5px).</p> <pre class="prettyprint linenums" style="margin-bottom: 18px;"> -<table class="table-condensed"> +<table class="table table-condensed"> ... </table></pre> </div> <div class="span8"> - <table class="table-condensed"> + <table class="table table-condensed"> <thead> <tr> <th>#</th> @@ -816,12 +823,12 @@ }); }); </script> -<table class="table-striped"> +<table class="table table-striped"> ... </table></pre> </div> <div class="span8"> - <table class="table-striped tablesorter-example"> + <table class="table table-striped tablesorter-example"> <thead> <tr> <th>#</th> @@ -858,7 +865,7 @@ </tbody> </table> <p>Styles for the Tablesorter, zebra striping, borders, and condensing may all compound in any variation to fit your needs.</p> - <table class="table-striped table-bordered table-condensed tablesorter-example"> + <table class="table table-striped table-bordered table-condensed tablesorter-example"> <thead> <tr> <th>#</th> @@ -932,7 +939,7 @@ <h2>Four types of forms</h2> <p>Bootstrap provides simple markup and styles for four styles of common web forms.</p> - <table class="table-bordered table-striped"> + <table class="table table-bordered table-striped"> <thead> <tr> <th>Name</th> @@ -1259,7 +1266,7 @@ <div class="page-header"> <h1>Buttons</h1> </div> - <table class="table-bordered table-striped"> + <table class="table table-bordered table-striped"> <thead> <tr> <th>Button</th> diff --git a/docs/index.html b/docs/index.html index c30417c8f5..ce56a04ef6 100644 --- a/docs/index.html +++ b/docs/index.html @@ -267,7 +267,7 @@ ================================================== --> <h1>Get started in no time.</h1> <p class="marketing-byline">Quickly start using Bootstrap within your workflow and development process.</p> - <table class="table-bordered getting-started"> + <table class="table table-bordered getting-started"> <tbody> <tr> <td class="quick-start"> diff --git a/docs/javascript.html b/docs/javascript.html index a132a40118..fb854d2814 100644 --- a/docs/javascript.html +++ b/docs/javascript.html @@ -284,7 +284,7 @@ <p>Call the modal via javascript:</p> <pre class="prettyprint linenums">$('#myModal').modal(options)</pre> <h3>Options</h3> - <table class="table-bordered table-striped"> + <table class="table table-bordered table-striped"> <thead> <tr> <th style="width: 100px;">Name</th> @@ -349,7 +349,7 @@ $('#myModal').modal({ <pre class="prettyprint linenums">$('#myModal').modal('hide')</pre> <h3>Events</h3> <p>Bootstrap's modal class exposes a few events for hooking into modal functionality. </p> - <table class="table-bordered table-striped"> + <table class="table table-bordered table-striped"> <thead> <tr> <th style="width: 150px;">Event</th> @@ -666,7 +666,7 @@ $('#myModal').on('hidden', function () { </script></pre> </p> <h3>Events</h3> - <table class="table-bordered table-striped"> + <table class="table table-bordered table-striped"> <thead> <tr> <th style="width: 150px;">Event</th> @@ -719,7 +719,7 @@ $('a[data-toggle="tab"]').on('shown', function (e) { <p>Trigger the tooltip via javascript:</p> <pre class="prettyprint linenums">$('#example').tooltip(options)</pre> <h3>Options</h3> - <table class="table-bordered table-striped"> + <table class="table table-bordered table-striped"> <thead> <tr> <th style="width: 100px;">Name</th> @@ -813,7 +813,7 @@ $('a[data-toggle="tab"]').on('shown', function (e) { <p>Enable popovers via javascript:</p> <pre class="prettyprint linenums">$('#example').popover(options)</pre> <h3>Options</h3> - <table class="table-bordered table-striped"> + <table class="table table-bordered table-striped"> <thead> <tr> <th style="width: 100px;">Name</th> @@ -933,7 +933,7 @@ $('a[data-toggle="tab"]').on('shown', function (e) { <pre class="prettyprint linenums">$(".alert-message").alert('close')</pre> <h3>Events</h3> <p>Bootstrap's alert class exposes a few events for hooking into alert functionality. </p> - <table class="table-bordered table-striped"> + <table class="table table-bordered table-striped"> <thead> <tr> <th style="width: 150px;">Event</th> @@ -976,7 +976,7 @@ $('#my-alert').bind('closed', function () { <div class="span9 columns"> <h2>Example uses</h2> <p>Use the buttons plugin for states and toggles.</p> - <table class="table-bordered table-striped"> + <table class="table table-bordered table-striped"> <tbody> <tr> <td>Stateful</td> @@ -1125,7 +1125,7 @@ $('#my-alert').bind('closed', function () { <p>Enable via javascript:</p> <pre class="prettyprint linenums">$(".collapse").collapse()</pre> <h3>Options</h3> - <table class="table-bordered table-striped"> + <table class="table table-bordered table-striped"> <thead> <tr> <th style="width: 100px;">Name</th> @@ -1175,7 +1175,7 @@ $('#myCollapsible').collapse({ <p> Bootstrap's collapse class exposes a few events for hooking into collapse functionality. </p> - <table class="table-bordered table-striped"> + <table class="table table-bordered table-striped"> <thead> <tr> <th style="width: 150px;">Event</th> @@ -1261,7 +1261,7 @@ $('#myCollapsible').on('hidden', function () { <p>Call via javascript:</p> <pre class="prettyprint linenums">$('.carousel').carousel()</pre> <h3>Options</h3> - <table class="table-bordered table-striped"> + <table class="table table-bordered table-striped"> <thead> <tr> <th style="width: 100px;">Name</th> @@ -1310,7 +1310,7 @@ $('.myCarousel').carousel({ <p>Cycles to the next item.</p> <h3>Events</h3> <p>Bootstrap's modal class exposes a few events for hooking into modal functionality. </p> - <table class="table-bordered table-striped"> + <table class="table table-bordered table-striped"> <thead> <tr> <th style="width: 150px;">Event</th> @@ -1358,7 +1358,7 @@ $('.myCarousel').carousel({ <p>Call the typeahead via javascript:</p> <pre class="prettyprint linenums">$('.typeahead').typeahead()</pre> <h3>Options</h3> - <table class="table-bordered table-striped"> + <table class="table table-bordered table-striped"> <thead> <tr> <th style="width: 100px;">Name</th> diff --git a/docs/less.html b/docs/less.html index 6e43d95bd1..09ff3e8e10 100644 --- a/docs/less.html +++ b/docs/less.html @@ -160,7 +160,7 @@ </div> <h3>Hyperlinks</h3> - <table class="table-bordered table-striped"> + <table class="table table-bordered table-striped"> <thead> <tr> <th>Variable</th> @@ -185,7 +185,7 @@ <div class="row"> <div class="span6"> <h3>Grayscale colors</h3> - <table class="table-bordered table-striped"> + <table class="table table-bordered table-striped"> <tbody> <tr> <td><code>@black</code></td> @@ -216,7 +216,7 @@ </div> <div class="span6"> <h3>Accent colors</h3> - <table class="table-bordered table-striped"> + <table class="table table-bordered table-striped"> <tbody> <tr> <td><code>@blue</code></td> @@ -254,7 +254,7 @@ <div class="row"> <div class="span6"> <h3>Grid system</h3> - <table class="table-bordered table-striped"> + <table class="table table-bordered table-striped"> <tbody> <tr> <td><code>@gridColumns</code></td> @@ -277,7 +277,7 @@ </div> <div class="span6"> <h3>Typography</h3> - <table class="table-bordered table-striped"> + <table class="table table-bordered table-striped"> <tbody> <tr> <td><code>@baseFontSize</code></td> @@ -302,7 +302,7 @@ <h3>Visuals</h3> </div> <div class="span9"> - <table class="table-bordered table-striped"> + <table class="table table-bordered table-striped"> <tbody> <tr> <td><code>@primaryButtonColor</code></td> @@ -453,7 +453,7 @@ <h2 id="compiling">Compiling Less</h2> <p>After modifying the <code>.less</code> files in /lib/, you'll need to recompile them in order to regenerate the bootstrap-*.*.*.css and bootstrap-*.*.*.min.css files. If you're submitting a pull request to GitHub, you must always recompile.</p> <h3>Ways to compile</h3> - <table class="table-bordered table-striped"> + <table class="table table-bordered table-striped"> <thead> <tr> <th style="width: 120px;">Method</th> diff --git a/docs/scaffolding.html b/docs/scaffolding.html index 77b94d8ce3..f068c837c7 100644 --- a/docs/scaffolding.html +++ b/docs/scaffolding.html @@ -223,7 +223,7 @@ </div> <h2>Grid customization</h2> - <table class="table-bordered table-striped"> + <table class="table table-bordered table-striped"> <thead> <tr> <th>Variable</th> @@ -335,7 +335,7 @@ <div class="span8"> <h2>Supported devices</h2> <p>Bootstrap supports a handful of media queries to help make your projects more appropriate on different devices and screen resolutions. Here's what's included:</p> - <table class="table-bordered table-striped"> + <table class="table table-bordered table-striped"> <thead> <tr> <th>Label</th> diff --git a/lib/tables.less b/lib/tables.less index 1edd9e3b80..29e1e2d465 100644 --- a/lib/tables.less +++ b/lib/tables.less @@ -4,39 +4,38 @@ // ---------------------------------------- - // BASELINE STYLES // --------------- -table { +.table { width: 100%; margin-bottom: @baseLineHeight; -} -th, -td { - padding: 8px; - line-height: @baseLineHeight; - text-align: left; - border-top: 1px solid #ddd; -} -th { - font-weight: bold; - vertical-align: bottom; -} -td { - vertical-align: top; -} - -// Remove top border from thead by default -thead:first-child tr th, -thead:first-child tr td { - border-top: 0; + // Cells + th, + td { + padding: 8px; + line-height: @baseLineHeight; + text-align: left; + border-top: 1px solid #ddd; + } + th { + font-weight: bold; + vertical-align: bottom; + } + td { + vertical-align: top; + } + // Remove top border from thead by default + thead:first-child tr th, + thead:first-child tr td { + border-top: 0; + } + // Account for multiple tbody instances + tbody + tbody { + border-top: 2px solid #ddd; + } } -// Account for multiple tbody instances -tbody + tbody { - border-top: 2px solid #ddd; -} // CONDENSED TABLE W/ HALF PADDING -- GitLab From dd4140319ab4380dd21f5e90e65ef855c54c3420 Mon Sep 17 00:00:00 2001 From: Mark Otto <markdotto@gmail.com> Date: Tue, 17 Jan 2012 23:52:49 -0800 Subject: [PATCH 313/318] revamp the mixins file to organize things a bit more, make placeholder text use a new variable instead of relying solely on @grayLight --- bootstrap.css | 2 +- lib/mixins.less | 97 +++++++++++++++++++++++++++++------------- lib/progress-bars.less | 2 +- lib/variables.less | 4 ++ 4 files changed, 74 insertions(+), 31 deletions(-) diff --git a/bootstrap.css b/bootstrap.css index c184d1332a..e2fd3539d1 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: Tue Jan 17 23:38:42 PST 2012 + * Date: Tue Jan 17 23:52:18 PST 2012 */ html, body { margin: 0; diff --git a/lib/mixins.less b/lib/mixins.less index 67e0c27de2..bcc67954af 100644 --- a/lib/mixins.less +++ b/lib/mixins.less @@ -3,7 +3,12 @@ // ----------------------------------------------------------------- -// Clearfix for clearing floats like a boss h5bp.com/q +// UTILITY MIXINS +// -------------------------------------------------- + +// Clearfix +// ------------------------- +// For clearing floats like a boss h5bp.com/q .clearfix() { zoom: 1; &:before, @@ -19,6 +24,7 @@ } // Center-align a block level element +// ------------------------- .center-block() { display: block; margin-left: auto; @@ -26,12 +32,14 @@ } // IE7 inline-block +// ------------------------- .ie7-inline-block() { *display: inline; /* IE7 inline-block hack */ *zoom: 1; } // Sizing shortcuts +// ------------------------- .size(@height: 5px, @width: 5px) { width: @width; height: @height; @@ -40,8 +48,9 @@ .size(@size, @size); } -// Input placeholder text -.placeholder(@color: @grayLight) { +// Placeholder text +// ------------------------- +.placeholder(@color: @placeHolderText) { :-moz-placeholder { color: @color; } @@ -50,7 +59,11 @@ } } -// Font Stacks + + +// FONTS +// -------------------------------------------------- + #font { #family { .serif() { @@ -82,20 +95,28 @@ } } -// Grid System + + +// GRID SYSTEM +// -------------------------------------------------- + +// Site container +// ------------------------- .fixed-container() { width: @siteWidth; margin-left: auto; margin-right: auto; .clearfix(); } + +// Columns and offseting +// ------------------------- .columns(@columns: 1) { width: (@gridColumnWidth * @columns) + (@gridGutterWidth * (@columns - 1)); } .offset(@columns: 1) { margin-left: (@gridColumnWidth * @columns) + (@gridGutterWidth * (@columns - 1)) + (@gridGutterWidth * 2); } - // Necessary grid styles for every column to make them appear next to each other horizontally .gridColumn() { float: left; @@ -107,6 +128,11 @@ .columns(@columnSpan); } + + +// CSS3 PROPERTIES +// -------------------------------------------------- + // Border Radius .border-radius(@radius: 5px) { -webkit-border-radius: @radius; @@ -170,15 +196,6 @@ transform: translate(@x, @y); } -// User select -// For selecting text on the page -.user-select(@select) { - -webkit-user-select: @select; - -moz-user-select: @select; - -o-user-select: @select; - user-select: @select; -} - // Background clipping // Heads up: FF 3.6 and under need padding instead of padding-box .background-clip(@clip) { @@ -187,6 +204,15 @@ background-clip: @clip; } +// Background sizing +.background-size(@size){ + -webkit-background-size: @size; + -moz-background-size: @size; + -o-background-size: @size; + background-size: @size; +} + + // Box sizing .box-sizing(@boxmodel) { -webkit-box-sizing: @boxmodel; @@ -194,6 +220,15 @@ box-sizing: @boxmodel; } +// User select +// For selecting text on the page +.user-select(@select) { + -webkit-user-select: @select; + -moz-user-select: @select; + -o-user-select: @select; + user-select: @select; +} + // Resize anything .resizable(@direction: both) { resize: @direction; // Options: horizontal, vertical, both @@ -210,6 +245,18 @@ column-gap: @columnGap; } +// Opacity +.opacity(@opacity: 100) { + filter: e(%("alpha(opacity=%d)", @opacity)); + -moz-opacity: @opacity / 100; + opacity: @opacity / 100; +} + + + +// BACKGROUNDS +// -------------------------------------------------- + // Add an alphatransparency value to any background or border color (via Elyse Holladay) #translucent { .background(@color: @white, @alpha: 1) { @@ -301,14 +348,13 @@ filter: e(%("progid:DXImageTransform.Microsoft.gradient(enabled = false)")); } -// Opacity -.opacity(@opacity: 100) { - filter: e(%("alpha(opacity=%d)", @opacity)); - -moz-opacity: @opacity / 100; - opacity: @opacity / 100; -} -// Popover arrows + +// COMPONENT MIXINS +// -------------------------------------------------- + +// POPOVER ARROWS +// ------------------------- // For tipsies and popovers #popoverArrow { .top(@arrowWidth: 5px) { @@ -344,10 +390,3 @@ border-right: @arrowWidth solid @black; } } - -.background-size(@width, @height){ - -webkit-background-size: @width @height; - -moz-background-size: @width @height; - -o-background-size: @width @height; - background-size: @width @height; -} diff --git a/lib/progress-bars.less b/lib/progress-bars.less index fd9d3f4271..e8557a99e7 100644 --- a/lib/progress-bars.less +++ b/lib/progress-bars.less @@ -55,7 +55,7 @@ // Striped bars .progress.striped .bar { #gradient > .striped(#62c462); - .background-size(40px, 40px); + .background-size(40px 40px); } // Call animation for the active one diff --git a/lib/variables.less b/lib/variables.less index 3f32c36f4d..3709d598d1 100644 --- a/lib/variables.less +++ b/lib/variables.less @@ -68,3 +68,7 @@ // Visuals @primaryButtonColor: @blue; + + + +@placeHolderText: @grayLight; -- GitLab From a920fa2993fa91f3ad62e154eaa6ff7b2481f615 Mon Sep 17 00:00:00 2001 From: Mark Otto <markdotto@gmail.com> Date: Wed, 18 Jan 2012 00:12:58 -0800 Subject: [PATCH 314/318] re-org variables --- lib/variables.less | 98 +++++++++++++++++++++------------------------- 1 file changed, 44 insertions(+), 54 deletions(-) diff --git a/lib/variables.less b/lib/variables.less index 3709d598d1..8afe000326 100644 --- a/lib/variables.less +++ b/lib/variables.less @@ -3,53 +3,56 @@ // ----------------------------------------------------- -// LINK COLORS -// ----------- - -@linkColor: #08c; -@linkColorHover: darken(@linkColor, 15); - - -// GRAYS -// ----- - -@black: #000; -@grayDark: #333; -@gray: #555; -@grayLight: #999; -@grayLighter: #eee; -@white: #fff; - - -// ACCENT COLORS -// ------------- - -@blue: #049CDB; -@blueDark: #0064CD; -@green: #46a546; -@red: #9d261d; -@yellow: #ffc40d; -@orange: #f89406; -@pink: #c3325f; -@purple: #7a43b6; +// GLOBAL VALUES +// -------------------------------------------------- + +// Links +@linkColor: #08c; +@linkColorHover: darken(@linkColor, 15); + +// Grays +@black: #000; +@grayDark: #333; +@gray: #555; +@grayLight: #999; +@grayLighter: #eee; +@white: #fff; + +// Accent colors +@blue: #049CDB; +@blueDark: #0064CD; +@green: #46a546; +@red: #9d261d; +@yellow: #ffc40d; +@orange: #f89406; +@pink: #c3325f; +@purple: #7a43b6; + +// Grid system +// Modify the grid styles in mixins.less +@gridColumns: 12; +@gridColumnWidth: 60px; +@gridGutterWidth: 20px; +@siteWidth: (@gridColumns * @gridColumnWidth) + (@gridGutterWidth * (@gridColumns - 1)); +// Fluid width sidebar +@fluidSidebarWidth: 220px; -// GRID -// ---- +// Typography +@baseFontSize: 13px; +@baseFontFamily: "Helvetica Neue", Helvetica, Arial, sans-serif; +@baseLineHeight: 18px; -// Modify the grid styles in mixins.less -@gridColumns: 12; -@gridColumnWidth: 60px; -@gridGutterWidth: 20px; -@siteWidth: (@gridColumns * @gridColumnWidth) + (@gridGutterWidth * (@gridColumns - 1)); +// Buttons +@primaryButtonColor: @blue; -// Fluid width sidebar -@fluidSidebarWidth: 220px; -// Z-INDEX -// ------- +// COMPONENT VARIABLES +// -------------------------------------------------- +// Z-index master list +// Used for a bird's eye view of components dependent on the z-axis @zindexDropdown: 1000; @zindexPopover: 1010; @zindexTooltip: 1020; @@ -57,18 +60,5 @@ @zindexModalBackdrop: 1040; @zindexModal: 1050; - -// THEME VARIABLES -// --------------- - -// Typography -@baseFontSize: 13px; -@baseFontFamily: "Helvetica Neue", Helvetica, Arial, sans-serif; -@baseLineHeight: 18px; - -// Visuals -@primaryButtonColor: @blue; - - - +// Input placeholder text color @placeHolderText: @grayLight; -- GitLab From f2fadf1f0a3f444893fec394fd0180d03e1058a3 Mon Sep 17 00:00:00 2001 From: Mark Otto <markdotto@gmail.com> Date: Wed, 18 Jan 2012 00:24:10 -0800 Subject: [PATCH 315/318] rename navbar variables, change navbar search placeholder to mixin --- bootstrap.css | 434 ++++++++++++++++++++++----------------------- bootstrap.min.css | 62 +++---- lib/bootstrap.less | 2 +- lib/navbar.less | 25 ++- lib/variables.less | 11 +- 5 files changed, 268 insertions(+), 266 deletions(-) diff --git a/bootstrap.css b/bootstrap.css index e2fd3539d1..681605a88a 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: Tue Jan 17 23:52:18 PST 2012 + * Date: Wed Jan 18 00:23:51 PST 2012 */ html, body { margin: 0; @@ -1570,222 +1570,6 @@ i { opacity: 0.4; cursor: pointer; } -.navbar { - overflow: visible; -} -.navbar-inner { - background-color: #222222; - background-color: #222222; - 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); - background-repeat: repeat-x; - 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); -} -.navbar .brand:hover { - color: #ffffff; - text-decoration: none; -} -.navbar .brand { - float: left; - display: block; - padding: 8px 20px 12px; - margin-left: -20px; - font-size: 20px; - font-weight: 200; - line-height: 1; - color: #ffffff; -} -.navbar p { - margin: 0; - line-height: 40px; -} -.navbar p a:hover { - color: #ffffff; - background-color: transparent; -} -.navbar .btn, .navbar .btn-group { - margin-top: 5px; -} -.navbar .btn-group .btn { - margin-top: 0; -} -.navbar-form { - margin-bottom: 0; -} -.navbar-form input, .navbar-form select { - display: inline-block; - margin-bottom: 0; -} -.navbar-search { - position: relative; - float: left; - margin-top: 6px; - margin-bottom: 0; -} -.navbar-search .search-query { - padding: 4px 9px; - font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; - font-size: 13px; - font-weight: normal; - line-height: 1; - color: #ffffff; - color: rgba(255, 255, 255, 0.75); - background-color: #444; - background-color: rgba(255, 255, 255, 0.3); - border: 1px solid #111; - -webkit-box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1), 0 1px 0px rgba(255, 255, 255, 0.15); - -moz-box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1), 0 1px 0px rgba(255, 255, 255, 0.15); - box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1), 0 1px 0px rgba(255, 255, 255, 0.15); - -webkit-transition: none; - -moz-transition: none; - -ms-transition: none; - -o-transition: none; - transition: none; -} -.navbar-search .search-query:-moz-placeholder { - color: #eeeeee; -} -.navbar-search .search-query::-webkit-input-placeholder { - color: #eeeeee; -} -.navbar-search .search-query:hover { - color: #ffffff; - background-color: #999999; - background-color: rgba(255, 255, 255, 0.5); -} -.navbar-search .search-query:focus, .navbar-search .search-query.focused { - padding: 5px 10px; - color: #333333; - text-shadow: 0 1px 0 #ffffff; - background-color: #ffffff; - border: 0; - -webkit-box-shadow: 0 0 3px rgba(0, 0, 0, 0.15); - -moz-box-shadow: 0 0 3px rgba(0, 0, 0, 0.15); - box-shadow: 0 0 3px rgba(0, 0, 0, 0.15); - outline: 0; -} -.navbar-static { - margin-bottom: 18px; -} -.navbar-static .navbar-inner { - padding-left: 20px; - padding-right: 20px; - -webkit-border-radius: 4px; - -moz-border-radius: 4px; - border-radius: 4px; -} -.navbar-fixed { - position: fixed; - top: 0; - right: 0; - left: 0; - z-index: 1030; -} -.navbar .nav { - position: relative; - left: 0; - display: block; - float: left; - margin: 0 10px 0 0; -} -.navbar .nav.pull-right { - float: right; -} -.navbar .nav > li { - display: block; - float: left; -} -.navbar .nav > li > a { - float: none; - padding: 10px 10px 11px; - line-height: 19px; - color: #999999; - text-decoration: none; - text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25); -} -.navbar .nav > li > a:hover { - background-color: transparent; - color: #ffffff; - text-decoration: none; -} -.navbar .nav .active > a { - color: #ffffff; - text-decoration: none; - background-color: #222; - background-color: rgba(0, 0, 0, 0.5); -} -.navbar .vertical-divider { - height: 40px; - width: 1px; - margin: 0 5px; - overflow: hidden; - background-color: #222; - border-right: 1px solid #444; -} -.navbar .nav.pull-right { - margin-left: 10px; - margin-right: 0; -} -.navbar .dropdown-menu { - top: 41px; - -webkit-border-radius: 4px; - -moz-border-radius: 4px; - border-radius: 4px; -} -.navbar .dropdown-menu:before { - content: ''; - display: inline-block; - border-left: 7px solid transparent; - border-right: 7px solid transparent; - border-bottom: 7px solid #ccc; - border-bottom-color: rgba(0, 0, 0, 0.2); - position: absolute; - top: -7px; - left: 9px; -} -.navbar .dropdown-menu:after { - content: ''; - display: inline-block; - border-left: 6px solid transparent; - border-right: 6px solid transparent; - border-bottom: 6px solid #fff; - position: absolute; - top: -6px; - left: 10px; -} -.navbar .nav .dropdown-toggle .caret, .navbar .nav .open.dropdown .caret { - border-top-color: #fff; -} -.navbar .nav .active .caret { - filter: alpha(opacity=100); - -moz-opacity: 1; - opacity: 1; -} -.navbar .nav .open > .dropdown-toggle, .navbar .nav .active > .dropdown-toggle, .navbar .nav .open.active > .dropdown-toggle { - background-color: transparent; -} -.navbar .nav .active > .dropdown-toggle:hover { - color: #fff; -} -.navbar .nav.pull-right .dropdown-menu { - right: 0; -} -.navbar .nav.pull-right .dropdown-menu:before { - left: auto; - right: 12px; -} -.navbar .nav.pull-right .dropdown-menu:after { - left: auto; - right: 13px; -} .nav { margin-left: 0; margin-bottom: 18px; @@ -2040,6 +1824,222 @@ i { .tabs-right .tabs .active > a, .tabs-right .tabs .active > a:hover { border-color: #ddd #ddd #ddd transparent; } +.navbar { + overflow: visible; +} +.navbar-inner { + background-color: #222222; + background-color: #222222; + 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); + background-repeat: repeat-x; + 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); +} +.navbar .brand:hover { + color: #ffffff; + text-decoration: none; +} +.navbar .brand { + float: left; + display: block; + padding: 8px 20px 12px; + margin-left: -20px; + font-size: 20px; + font-weight: 200; + line-height: 1; + color: #ffffff; +} +.navbar p { + margin: 0; + line-height: 40px; +} +.navbar p a:hover { + color: #ffffff; + background-color: transparent; +} +.navbar .btn, .navbar .btn-group { + margin-top: 5px; +} +.navbar .btn-group .btn { + margin-top: 0; +} +.navbar-form { + margin-bottom: 0; +} +.navbar-form input, .navbar-form select { + display: inline-block; + margin-bottom: 0; +} +.navbar-search { + position: relative; + float: left; + margin-top: 6px; + margin-bottom: 0; +} +.navbar-search .search-query { + padding: 4px 9px; + font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; + font-size: 13px; + font-weight: normal; + line-height: 1; + color: #ffffff; + color: rgba(255, 255, 255, 0.75); + background: #444; + background: rgba(255, 255, 255, 0.3); + border: 1px solid #111; + -webkit-box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1), 0 1px 0px rgba(255, 255, 255, 0.15); + -moz-box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1), 0 1px 0px rgba(255, 255, 255, 0.15); + box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1), 0 1px 0px rgba(255, 255, 255, 0.15); + -webkit-transition: none; + -moz-transition: none; + -ms-transition: none; + -o-transition: none; + transition: none; +} +.navbar-search .search-query :-moz-placeholder { + color: #eeeeee; +} +.navbar-search .search-query ::-webkit-input-placeholder { + color: #eeeeee; +} +.navbar-search .search-query:hover { + color: #ffffff; + background-color: #999999; + background-color: rgba(255, 255, 255, 0.5); +} +.navbar-search .search-query:focus, .navbar-search .search-query.focused { + padding: 5px 10px; + color: #333333; + text-shadow: 0 1px 0 #ffffff; + background-color: #ffffff; + border: 0; + -webkit-box-shadow: 0 0 3px rgba(0, 0, 0, 0.15); + -moz-box-shadow: 0 0 3px rgba(0, 0, 0, 0.15); + box-shadow: 0 0 3px rgba(0, 0, 0, 0.15); + outline: 0; +} +.navbar-static { + margin-bottom: 18px; +} +.navbar-static .navbar-inner { + padding-left: 20px; + padding-right: 20px; + -webkit-border-radius: 4px; + -moz-border-radius: 4px; + border-radius: 4px; +} +.navbar-fixed { + position: fixed; + top: 0; + right: 0; + left: 0; + z-index: 1030; +} +.navbar .nav { + position: relative; + left: 0; + display: block; + float: left; + margin: 0 10px 0 0; +} +.navbar .nav.pull-right { + float: right; +} +.navbar .nav > li { + display: block; + float: left; +} +.navbar .nav > li > a { + float: none; + padding: 10px 10px 11px; + line-height: 19px; + color: #999999; + text-decoration: none; + text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25); +} +.navbar .nav > li > a:hover { + background-color: transparent; + color: #ffffff; + text-decoration: none; +} +.navbar .nav .active > a { + color: #ffffff; + text-decoration: none; + background-color: #222; + background-color: rgba(0, 0, 0, 0.5); +} +.navbar .vertical-divider { + height: 40px; + width: 1px; + margin: 0 5px; + overflow: hidden; + background-color: #222; + border-right: 1px solid #444; +} +.navbar .nav.pull-right { + margin-left: 10px; + margin-right: 0; +} +.navbar .dropdown-menu { + top: 41px; + -webkit-border-radius: 4px; + -moz-border-radius: 4px; + border-radius: 4px; +} +.navbar .dropdown-menu:before { + content: ''; + display: inline-block; + border-left: 7px solid transparent; + border-right: 7px solid transparent; + border-bottom: 7px solid #ccc; + border-bottom-color: rgba(0, 0, 0, 0.2); + position: absolute; + top: -7px; + left: 9px; +} +.navbar .dropdown-menu:after { + content: ''; + display: inline-block; + border-left: 6px solid transparent; + border-right: 6px solid transparent; + border-bottom: 6px solid #fff; + position: absolute; + top: -6px; + left: 10px; +} +.navbar .nav .dropdown-toggle .caret, .navbar .nav .open.dropdown .caret { + border-top-color: #fff; +} +.navbar .nav .active .caret { + filter: alpha(opacity=100); + -moz-opacity: 1; + opacity: 1; +} +.navbar .nav .open > .dropdown-toggle, .navbar .nav .active > .dropdown-toggle, .navbar .nav .open.active > .dropdown-toggle { + background-color: transparent; +} +.navbar .nav .active > .dropdown-toggle:hover { + color: #fff; +} +.navbar .nav.pull-right .dropdown-menu { + right: 0; +} +.navbar .nav.pull-right .dropdown-menu:before { + left: auto; + right: 12px; +} +.navbar .nav.pull-right .dropdown-menu:after { + left: auto; + right: 13px; +} .breadcrumb { padding: 7px 14px; margin: 0 0 18px; diff --git a/bootstrap.min.css b/bootstrap.min.css index a6128a0b5e..9fd65f9a8f 100644 --- a/bootstrap.min.css +++ b/bootstrap.min.css @@ -311,37 +311,6 @@ i{background-image:url(docs/assets/img/glyphicons-halflings-sprite.png);backgrou .fade{-webkit-transition:opacity 0.15s linear;-moz-transition:opacity 0.15s linear;-ms-transition:opacity 0.15s linear;-o-transition:opacity 0.15s linear;transition:opacity 0.15s linear;opacity:0;}.fade.in{opacity:1;} .collapse{-webkit-transition:height 0.35s ease;-moz-transition:height 0.35s ease;-ms-transition:height 0.35s ease;-o-transition:height 0.35s ease;transition:height 0.35s ease;position:relative;overflow:hidden;height:0;}.collapse.in{height:auto;} .close{float:right;font-size:20px;font-weight:bold;line-height:12px;color:#000000;text-shadow:0 1px 0 #ffffff;filter:alpha(opacity=20);-moz-opacity:0.2;opacity:0.2;}.close:hover{color:#000000;text-decoration:none;filter:alpha(opacity=40);-moz-opacity:0.4;opacity:0.4;cursor:pointer;} -.navbar{overflow:visible;} -.navbar-inner{background-color:#222222;background-color:#222222;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);background-repeat:repeat-x;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);} -.navbar .brand:hover{color:#ffffff;text-decoration:none;} -.navbar .brand{float:left;display:block;padding:8px 20px 12px;margin-left:-20px;font-size:20px;font-weight:200;line-height:1;color:#ffffff;} -.navbar p{margin:0;line-height:40px;}.navbar p a:hover{color:#ffffff;background-color:transparent;} -.navbar .btn,.navbar .btn-group{margin-top:5px;} -.navbar .btn-group .btn{margin-top:0;} -.navbar-form{margin-bottom:0;}.navbar-form input,.navbar-form select{display:inline-block;margin-bottom:0;} -.navbar-search{position:relative;float:left;margin-top:6px;margin-bottom:0;}.navbar-search .search-query{padding:4px 9px;font-family:"Helvetica Neue",Helvetica,Arial,sans-serif;font-size:13px;font-weight:normal;line-height:1;color:#ffffff;color:rgba(255, 255, 255, 0.75);background-color:#444;background-color:rgba(255, 255, 255, 0.3);border:1px solid #111;-webkit-box-shadow:inset 0 1px 2px rgba(0, 0, 0, 0.1),0 1px 0px rgba(255, 255, 255, 0.15);-moz-box-shadow:inset 0 1px 2px rgba(0, 0, 0, 0.1),0 1px 0px rgba(255, 255, 255, 0.15);box-shadow:inset 0 1px 2px rgba(0, 0, 0, 0.1),0 1px 0px rgba(255, 255, 255, 0.15);-webkit-transition:none;-moz-transition:none;-ms-transition:none;-o-transition:none;transition:none;}.navbar-search .search-query:-moz-placeholder{color:#eeeeee;} -.navbar-search .search-query::-webkit-input-placeholder{color:#eeeeee;} -.navbar-search .search-query:hover{color:#ffffff;background-color:#999999;background-color:rgba(255, 255, 255, 0.5);} -.navbar-search .search-query:focus,.navbar-search .search-query.focused{padding:5px 10px;color:#333333;text-shadow:0 1px 0 #ffffff;background-color:#ffffff;border:0;-webkit-box-shadow:0 0 3px rgba(0, 0, 0, 0.15);-moz-box-shadow:0 0 3px rgba(0, 0, 0, 0.15);box-shadow:0 0 3px rgba(0, 0, 0, 0.15);outline:0;} -.navbar-static{margin-bottom:18px;} -.navbar-static .navbar-inner{padding-left:20px;padding-right:20px;-webkit-border-radius:4px;-moz-border-radius:4px;border-radius:4px;} -.navbar-fixed{position:fixed;top:0;right:0;left:0;z-index:1030;} -.navbar .nav{position:relative;left:0;display:block;float:left;margin:0 10px 0 0;} -.navbar .nav.pull-right{float:right;} -.navbar .nav>li{display:block;float:left;} -.navbar .nav>li>a{float:none;padding:10px 10px 11px;line-height:19px;color:#999999;text-decoration:none;text-shadow:0 -1px 0 rgba(0, 0, 0, 0.25);} -.navbar .nav>li>a:hover{background-color:transparent;color:#ffffff;text-decoration:none;} -.navbar .nav .active>a{color:#ffffff;text-decoration:none;background-color:#222;background-color:rgba(0, 0, 0, 0.5);} -.navbar .vertical-divider{height:40px;width:1px;margin:0 5px;overflow:hidden;background-color:#222;border-right:1px solid #444;} -.navbar .nav.pull-right{margin-left:10px;margin-right:0;} -.navbar .dropdown-menu{top:41px;-webkit-border-radius:4px;-moz-border-radius:4px;border-radius:4px;}.navbar .dropdown-menu:before{content:'';display:inline-block;border-left:7px solid transparent;border-right:7px solid transparent;border-bottom:7px solid #ccc;border-bottom-color:rgba(0, 0, 0, 0.2);position:absolute;top:-7px;left:9px;} -.navbar .dropdown-menu:after{content:'';display:inline-block;border-left:6px solid transparent;border-right:6px solid transparent;border-bottom:6px solid #fff;position:absolute;top:-6px;left:10px;} -.navbar .nav .dropdown-toggle .caret,.navbar .nav .open.dropdown .caret{border-top-color:#fff;} -.navbar .nav .active .caret{filter:alpha(opacity=100);-moz-opacity:1;opacity:1;} -.navbar .nav .open>.dropdown-toggle,.navbar .nav .active>.dropdown-toggle,.navbar .nav .open.active>.dropdown-toggle{background-color:transparent;} -.navbar .nav .active>.dropdown-toggle:hover{color:#fff;} -.navbar .nav.pull-right .dropdown-menu{right:0;}.navbar .nav.pull-right .dropdown-menu:before{left:auto;right:12px;} -.navbar .nav.pull-right .dropdown-menu:after{left:auto;right:13px;} .nav{margin-left:0;margin-bottom:18px;list-style:none;} .nav>li>a{display:block;} .nav>li>a:hover{text-decoration:none;background-color:#eee;} @@ -397,6 +366,37 @@ i{background-image:url(docs/assets/img/glyphicons-halflings-sprite.png);backgrou .tabs-right .tabs>li>a{margin-left:-1px;-webkit-border-radius:0 4px 4px 0;-moz-border-radius:0 4px 4px 0;border-radius:0 4px 4px 0;} .tabs-right .tabs>li>a:hover{border-color:#eee #eee #eee #ddd;} .tabs-right .tabs .active>a,.tabs-right .tabs .active>a:hover{border-color:#ddd #ddd #ddd transparent;} +.navbar{overflow:visible;} +.navbar-inner{background-color:#222222;background-color:#222222;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);background-repeat:repeat-x;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);} +.navbar .brand:hover{color:#ffffff;text-decoration:none;} +.navbar .brand{float:left;display:block;padding:8px 20px 12px;margin-left:-20px;font-size:20px;font-weight:200;line-height:1;color:#ffffff;} +.navbar p{margin:0;line-height:40px;}.navbar p a:hover{color:#ffffff;background-color:transparent;} +.navbar .btn,.navbar .btn-group{margin-top:5px;} +.navbar .btn-group .btn{margin-top:0;} +.navbar-form{margin-bottom:0;}.navbar-form input,.navbar-form select{display:inline-block;margin-bottom:0;} +.navbar-search{position:relative;float:left;margin-top:6px;margin-bottom:0;}.navbar-search .search-query{padding:4px 9px;font-family:"Helvetica Neue",Helvetica,Arial,sans-serif;font-size:13px;font-weight:normal;line-height:1;color:#ffffff;color:rgba(255, 255, 255, 0.75);background:#444;background:rgba(255, 255, 255, 0.3);border:1px solid #111;-webkit-box-shadow:inset 0 1px 2px rgba(0, 0, 0, 0.1),0 1px 0px rgba(255, 255, 255, 0.15);-moz-box-shadow:inset 0 1px 2px rgba(0, 0, 0, 0.1),0 1px 0px rgba(255, 255, 255, 0.15);box-shadow:inset 0 1px 2px rgba(0, 0, 0, 0.1),0 1px 0px rgba(255, 255, 255, 0.15);-webkit-transition:none;-moz-transition:none;-ms-transition:none;-o-transition:none;transition:none;}.navbar-search .search-query :-moz-placeholder{color:#eeeeee;} +.navbar-search .search-query ::-webkit-input-placeholder{color:#eeeeee;} +.navbar-search .search-query:hover{color:#ffffff;background-color:#999999;background-color:rgba(255, 255, 255, 0.5);} +.navbar-search .search-query:focus,.navbar-search .search-query.focused{padding:5px 10px;color:#333333;text-shadow:0 1px 0 #ffffff;background-color:#ffffff;border:0;-webkit-box-shadow:0 0 3px rgba(0, 0, 0, 0.15);-moz-box-shadow:0 0 3px rgba(0, 0, 0, 0.15);box-shadow:0 0 3px rgba(0, 0, 0, 0.15);outline:0;} +.navbar-static{margin-bottom:18px;} +.navbar-static .navbar-inner{padding-left:20px;padding-right:20px;-webkit-border-radius:4px;-moz-border-radius:4px;border-radius:4px;} +.navbar-fixed{position:fixed;top:0;right:0;left:0;z-index:1030;} +.navbar .nav{position:relative;left:0;display:block;float:left;margin:0 10px 0 0;} +.navbar .nav.pull-right{float:right;} +.navbar .nav>li{display:block;float:left;} +.navbar .nav>li>a{float:none;padding:10px 10px 11px;line-height:19px;color:#999999;text-decoration:none;text-shadow:0 -1px 0 rgba(0, 0, 0, 0.25);} +.navbar .nav>li>a:hover{background-color:transparent;color:#ffffff;text-decoration:none;} +.navbar .nav .active>a{color:#ffffff;text-decoration:none;background-color:#222;background-color:rgba(0, 0, 0, 0.5);} +.navbar .vertical-divider{height:40px;width:1px;margin:0 5px;overflow:hidden;background-color:#222;border-right:1px solid #444;} +.navbar .nav.pull-right{margin-left:10px;margin-right:0;} +.navbar .dropdown-menu{top:41px;-webkit-border-radius:4px;-moz-border-radius:4px;border-radius:4px;}.navbar .dropdown-menu:before{content:'';display:inline-block;border-left:7px solid transparent;border-right:7px solid transparent;border-bottom:7px solid #ccc;border-bottom-color:rgba(0, 0, 0, 0.2);position:absolute;top:-7px;left:9px;} +.navbar .dropdown-menu:after{content:'';display:inline-block;border-left:6px solid transparent;border-right:6px solid transparent;border-bottom:6px solid #fff;position:absolute;top:-6px;left:10px;} +.navbar .nav .dropdown-toggle .caret,.navbar .nav .open.dropdown .caret{border-top-color:#fff;} +.navbar .nav .active .caret{filter:alpha(opacity=100);-moz-opacity:1;opacity:1;} +.navbar .nav .open>.dropdown-toggle,.navbar .nav .active>.dropdown-toggle,.navbar .nav .open.active>.dropdown-toggle{background-color:transparent;} +.navbar .nav .active>.dropdown-toggle:hover{color:#fff;} +.navbar .nav.pull-right .dropdown-menu{right:0;}.navbar .nav.pull-right .dropdown-menu:before{left:auto;right:12px;} +.navbar .nav.pull-right .dropdown-menu:after{left:auto;right:13px;} .breadcrumb{padding:7px 14px;margin:0 0 18px;background-color:#f5f5f5;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);background-repeat:repeat-x;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:#999999;} .breadcrumb .active a{color:#333333;} diff --git a/lib/bootstrap.less b/lib/bootstrap.less index fec87a3396..67642d1c45 100644 --- a/lib/bootstrap.less +++ b/lib/bootstrap.less @@ -32,8 +32,8 @@ @import "close.less"; // Components: Nav -@import "navbar.less"; @import "navs.less"; +@import "navbar.less"; @import "breadcrumbs.less"; @import "pagination.less"; @import "pager.less"; diff --git a/lib/navbar.less b/lib/navbar.less index 0d01fe524d..94bc652410 100644 --- a/lib/navbar.less +++ b/lib/navbar.less @@ -1,22 +1,21 @@ // NAVBAR (FIXED AND STATIC) // ------------------------- -// Navbar variables -@navBarHeight: 40px; -@navBarBgStart: #333; -@navBarBgEnd: #222; -// Common styles +// COMMON STYLES +// ------------- + .navbar { overflow: visible; } // gradient is applied to it's own element because overflow visible is not honored by IE when filter is present .navbar-inner { - background-color: @navBarBgEnd; - #gradient > .vertical(@navBarBgStart, @navBarBgEnd); + background-color: @navbarBackground; + #gradient > .vertical(@navbarBackgroundHighlight, @navbarBackground); @shadow: 0 1px 3px rgba(0,0,0,.25), inset 0 -1px 0 rgba(0,0,0,.1); .box-shadow(@shadow); } + // Text and links .navbar { // Hover and active states @@ -75,20 +74,16 @@ #font > .sans-serif(13px, normal, 1); color: @white; color: rgba(255,255,255,.75); - background-color: #444; - background-color: rgba(255,255,255,.3); + background: #444; + background: rgba(255,255,255,.3); border: 1px solid #111; @shadow: inset 0 1px 2px rgba(0,0,0,.1), 0 1px 0px rgba(255,255,255,.15); .box-shadow(@shadow); .transition(none); // Placeholder text gets special styles; can't be bundled together though for some reason - &:-moz-placeholder { - color: @grayLighter; - } - &::-webkit-input-placeholder { - color: @grayLighter; - } + .placeholder(@grayLighter); + // Hover states &:hover { color: @white; diff --git a/lib/variables.less b/lib/variables.less index 8afe000326..807a9ea0d5 100644 --- a/lib/variables.less +++ b/lib/variables.less @@ -51,6 +51,9 @@ // COMPONENT VARIABLES // -------------------------------------------------- +// Input placeholder text color +@placeHolderText: @grayLight; + // Z-index master list // Used for a bird's eye view of components dependent on the z-axis @zindexDropdown: 1000; @@ -60,5 +63,9 @@ @zindexModalBackdrop: 1040; @zindexModal: 1050; -// Input placeholder text color -@placeHolderText: @grayLight; +// Navbar +@navBarHeight: 40px; +@navbarBackground: #222; +@navbarBackgroundHighlight: #333; + + -- GitLab From d12560c0ee77e69011012095b04332aeb97b9c42 Mon Sep 17 00:00:00 2001 From: Mark Otto <markdotto@gmail.com> Date: Wed, 18 Jan 2012 00:30:49 -0800 Subject: [PATCH 316/318] make button active state clearer by lightening the inner shadow and removing the background image --- bootstrap.css | 9 +++++---- bootstrap.min.css | 2 +- lib/buttons.less | 3 ++- 3 files changed, 8 insertions(+), 6 deletions(-) diff --git a/bootstrap.css b/bootstrap.css index 681605a88a..2ba50f1de6 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: Wed Jan 18 00:23:51 PST 2012 + * Date: Wed Jan 18 00:30:09 PST 2012 */ html, body { margin: 0; @@ -2527,9 +2527,10 @@ i { border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25); } .btn.active, .btn:active { - -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-image: none; + -webkit-box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.15), 0 1px 2px rgba(0, 0, 0, 0.05); + -moz-box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.15), 0 1px 2px rgba(0, 0, 0, 0.05); + box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.15), 0 1px 2px rgba(0, 0, 0, 0.05); } .btn.disabled { cursor: default; diff --git a/bootstrap.min.css b/bootstrap.min.css index 9fd65f9a8f..7a98ef05cd 100644 --- a/bootstrap.min.css +++ b/bootstrap.min.css @@ -456,7 +456,7 @@ i{background-image:url(docs/assets/img/glyphicons-halflings-sprite.png);backgrou .btn{display:inline-block;padding:5px 10px 6px;font-size:13px;line-height:normal;color:#333;text-shadow:0 1px 1px rgba(255, 255, 255, 0.75);background-color:#e6e6e6;background-image:-webkit-gradient(linear, 0 0, 0 100%, from(#ffffff), color-stop(25%, #ffffff), to(#e6e6e6));background-image:-webkit-linear-gradient(#ffffff, #ffffff 25%, #e6e6e6);background-image:-moz-linear-gradient(top, #ffffff, #ffffff 25%, #e6e6e6);background-image:-ms-linear-gradient(#ffffff, #ffffff 25%, #e6e6e6);background-image:-o-linear-gradient(#ffffff, #ffffff 25%, #e6e6e6);background-image:linear-gradient(#ffffff, #ffffff 25%, #e6e6e6);background-repeat:no-repeat;filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#e6e6e6', GradientType=0);border:1px solid #ccc;border-bottom-color:#bbb;-webkit-border-radius:4px;-moz-border-radius:4px;border-radius:4px;-webkit-box-shadow:inset 0 1px 0 rgba(255, 255, 255, 0.2),0 1px 2px rgba(0, 0, 0, 0.05);-moz-box-shadow:inset 0 1px 0 rgba(255, 255, 255, 0.2),0 1px 2px rgba(0, 0, 0, 0.05);box-shadow:inset 0 1px 0 rgba(255, 255, 255, 0.2),0 1px 2px rgba(0, 0, 0, 0.05);cursor:pointer;-webkit-transition:0.1s linear all;-moz-transition:0.1s linear all;-ms-transition:0.1s linear all;-o-transition:0.1s linear all;transition:0.1s linear all;}.btn:hover{color:#333333;text-decoration:none;background-position:0 -15px;} .btn:focus{outline:1px dotted #666;} .btn.primary{color:#ffffff;text-shadow:0 -1px 0 rgba(0, 0, 0, 0.25);background-color:#0064cd;background-image:-khtml-gradient(linear, left top, left bottom, from(#049cdb), to(#0064cd));background-image:-moz-linear-gradient(top, #049cdb, #0064cd);background-image:-ms-linear-gradient(top, #049cdb, #0064cd);background-image:-webkit-gradient(linear, left top, left bottom, color-stop(0%, #049cdb), color-stop(100%, #0064cd));background-image:-webkit-linear-gradient(top, #049cdb, #0064cd);background-image:-o-linear-gradient(top, #049cdb, #0064cd);background-image:linear-gradient(top, #049cdb, #0064cd);background-repeat:repeat-x;filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#049cdb', endColorstr='#0064cd', GradientType=0);border-color:#0064cd #0064cd #003f81;border-color:rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);} -.btn.active,.btn:active{-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);} +.btn.active,.btn:active{background-image:none;-webkit-box-shadow:inset 0 2px 4px rgba(0, 0, 0, 0.15),0 1px 2px rgba(0, 0, 0, 0.05);-moz-box-shadow:inset 0 2px 4px rgba(0, 0, 0, 0.15),0 1px 2px rgba(0, 0, 0, 0.05);box-shadow:inset 0 2px 4px rgba(0, 0, 0, 0.15),0 1px 2px rgba(0, 0, 0, 0.05);} .btn.disabled{cursor:default;background-image:none;filter:progid:DXImageTransform.Microsoft.gradient(enabled = false);filter:alpha(opacity=65);-moz-opacity:0.65;opacity:0.65;-webkit-box-shadow:none;-moz-box-shadow:none;box-shadow:none;} .btn[disabled]{cursor:default;background-image:none;filter:progid:DXImageTransform.Microsoft.gradient(enabled = false);filter:alpha(opacity=65);-moz-opacity:0.65;opacity:0.65;-webkit-box-shadow:none;-moz-box-shadow:none;box-shadow:none;} .btn.large{padding:9px 14px 9px;font-size:15px;line-height:normal;-webkit-border-radius:5px;-moz-border-radius:5px;border-radius:5px;} diff --git a/lib/buttons.less b/lib/buttons.less index a7492f9fd0..e53dce7af5 100644 --- a/lib/buttons.less +++ b/lib/buttons.less @@ -68,7 +68,8 @@ // Active and Disabled states &.active, &:active { - @shadow: inset 0 2px 4px rgba(0,0,0,.25), 0 1px 2px rgba(0,0,0,.05); + background-image: none; + @shadow: inset 0 2px 4px rgba(0,0,0,.15), 0 1px 2px rgba(0,0,0,.05); .box-shadow(@shadow); } &.disabled { -- GitLab From ab8f2e2767be77120fedb07269dc7db078101dba Mon Sep 17 00:00:00 2001 From: Mark Otto <markdotto@gmail.com> Date: Wed, 18 Jan 2012 00:35:14 -0800 Subject: [PATCH 317/318] don't scope placeholder text color to just inputs --- bootstrap.css | 6 +++--- bootstrap.min.css | 4 ++-- lib/forms.less | 7 +------ 3 files changed, 6 insertions(+), 11 deletions(-) diff --git a/bootstrap.css b/bootstrap.css index 2ba50f1de6..460cd7ba02 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: Wed Jan 18 00:30:09 PST 2012 + * Date: Wed Jan 18 00:34:59 PST 2012 */ html, body { margin: 0; @@ -842,10 +842,10 @@ input:invalid:focus, textarea:invalid:focus, select:invalid:focus { box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.025); cursor: not-allowed; } -input:-moz-placeholder { +:-moz-placeholder { color: #999999; } -input::-webkit-input-placeholder { +::-webkit-input-placeholder { color: #999999; } .help-block { diff --git a/bootstrap.min.css b/bootstrap.min.css index 7a98ef05cd..0027eaf1cc 100644 --- a/bootstrap.min.css +++ b/bootstrap.min.css @@ -155,8 +155,8 @@ input[disabled],select[disabled],textarea[disabled],input[readonly],select[reado input:invalid,textarea:invalid,select:invalid{color:#b94a48;border-color:#ee5f5b;}input:invalid:focus,textarea:invalid:focus,select:invalid:focus{border-color:#e9322d;-webkit-box-shadow:0 0 6px #f8b9b7;-moz-box-shadow:0 0 6px #f8b9b7;box-shadow:0 0 6px #f8b9b7;} .form-actions{padding:17px 20px 18px;margin-top:18px;margin-bottom:18px;background-color:#f5f5f5;border-top:1px solid #ddd;} .uneditable-input{display:block;background-color:#ffffff;border-color:#eee;-webkit-box-shadow:inset 0 1px 2px rgba(0, 0, 0, 0.025);-moz-box-shadow:inset 0 1px 2px rgba(0, 0, 0, 0.025);box-shadow:inset 0 1px 2px rgba(0, 0, 0, 0.025);cursor:not-allowed;} -input:-moz-placeholder{color:#999999;} -input::-webkit-input-placeholder{color:#999999;} +:-moz-placeholder{color:#999999;} +::-webkit-input-placeholder{color:#999999;} .help-block{margin-top:5px;margin-bottom:0;color:#999999;} .help-inline{*position:relative;*top:-5px;display:inline;padding-left:5px;} .input-prepend,.input-append{margin-bottom:5px;zoom:1;}.input-prepend:before,.input-append:before,.input-prepend:after,.input-append:after{display:table;*display:inline;content:"";zoom:1;} diff --git a/lib/forms.less b/lib/forms.less index 703accff80..e956b0046f 100644 --- a/lib/forms.less +++ b/lib/forms.less @@ -336,12 +336,7 @@ select:invalid { } // Placeholder text gets special styles; can't be bundled together though for some reason -input:-moz-placeholder { - color: @grayLight; -} -input::-webkit-input-placeholder { - color: @grayLight; -} +.placeholder(@grayLight); -- GitLab From cab3093d61c3aa5073809035b6156356d3d2d4cf Mon Sep 17 00:00:00 2001 From: Kaelig <kaelig@deloumeau.fr> Date: Thu, 19 Jan 2012 14:20:14 +0100 Subject: [PATCH 318/318] Typo fix (jQuerdy -> jQuery) --- lib/tables.less | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/lib/tables.less b/lib/tables.less index 29e1e2d465..5dad3e896f 100644 --- a/lib/tables.less +++ b/lib/tables.less @@ -132,7 +132,7 @@ table { // TABLESORTER // ----------- -// Support for the tablesorter jQuerdy plugin +// Support for the tablesorter jQuery plugin table { // Tablesorting styles w/ jQuery plugin -- GitLab