diff --git a/bootstrap.css b/bootstrap.css index 4d8edd4fbf..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: Thu Jan 5 23:24:01 PST 2012 + * Date: Sat Jan 7 04:20:37 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; @@ -382,20 +388,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; } @@ -435,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; @@ -601,8 +607,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; @@ -625,10 +633,17 @@ textarea { .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-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; @@ -637,9 +652,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 { @@ -666,133 +681,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 { float: none; + margin-left: 0; +} +input.span1, textarea.span1, .uneditable-input.span1 { width: 50px; - margin-left: 0; } -input.span2, -textarea.span2, -select.span2, -.uneditable-input.span2 { - float: none; +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], @@ -911,11 +877,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; @@ -944,12 +916,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; @@ -1471,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; @@ -1495,68 +1472,63 @@ i { .dropdown-menu { position: absolute; top: 40px; - z-index: 900; + z-index: 1000; float: left; display: none; 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; @@ -1672,6 +1644,13 @@ i { .navbar .btn { margin-top: 5px; } +.navbar-form { + margin-bottom: 0; +} +.navbar-form input, .navbar-form select { + display: inline-block; + margin-bottom: 0; +} .navbar-search { position: relative; float: left; @@ -1735,7 +1714,7 @@ i { top: 0; right: 0; left: 0; - z-index: 10000; + z-index: 1010; } .nav { position: relative; @@ -2111,19 +2090,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 +2118,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); @@ -2237,7 +2219,7 @@ i { right: 0; bottom: 0; left: 0; - z-index: 10000; + z-index: 1020; background-color: #000000; } .modal-backdrop.fade { @@ -2252,7 +2234,7 @@ i { position: fixed; top: 50%; left: 50%; - z-index: 11000; + z-index: 1030; max-height: 500px; overflow: auto; width: 560px; @@ -2273,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; @@ -2291,6 +2270,9 @@ i { padding: 5px 15px; border-bottom: 1px solid #eee; } +.modal-header .close { + margin-top: 7px; +} .modal-body { padding: 15px; } @@ -2322,7 +2304,7 @@ i { } .twipsy { position: absolute; - z-index: 1000; + z-index: 1050; display: block; visibility: visible; padding: 5px; @@ -2400,7 +2382,7 @@ i { position: absolute; top: 0; left: 0; - z-index: 1000; + z-index: 1040; display: none; padding: 5px; } @@ -2653,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 { @@ -2681,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; @@ -2698,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; @@ -2715,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; @@ -2726,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; @@ -2956,6 +2962,9 @@ a.thumbnail:hover { width: auto; margin: 0; } + .modal.fade.in { + top: auto; + } .horizontal-form .control-group > label { float: none; width: auto; @@ -3143,6 +3152,9 @@ a.thumbnail:hover { .container { width: @siteWidth; } + .row { + margin-left: @gridGutterWidth * -1; + } [class*="span"] { margin-left: @gridGutterWidth; } @@ -3176,4 +3188,4 @@ a.thumbnail:hover { .offset12 { .offset(12); } } -*/ +*/ \ No newline at end of file diff --git a/bootstrap.min.css b/bootstrap.min.css index c93f333ee6..2f0839b931 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;} @@ -66,9 +67,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;} @@ -78,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;} @@ -100,15 +102,17 @@ 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;} .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;} +.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 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;} @@ -116,22 +120,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{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;} @@ -150,11 +163,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;} @@ -267,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: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;} .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);} @@ -284,13 +299,14 @@ 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 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:10000;} +.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);} @@ -340,13 +356,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;} @@ -357,17 +374,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: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%;} +.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;} .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;} @@ -378,7 +394,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: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;} @@ -404,16 +420,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;} @@ -451,4 +472,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/docs/assets/css/docs.css b/docs/assets/css/docs.css index 6cffcbc207..c359cf73ba 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 { @@ -333,7 +402,8 @@ pre.prettyprint { } /* Make tables spaced out a bit more */ -h2 + table { +h2 + table, +h2 + .row { margin-top: 5px; } @@ -341,8 +411,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; } @@ -385,7 +457,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/assets/js/google-code-prettify/prettify.css b/docs/assets/js/google-code-prettify/prettify.css index 7ff618550a..f195124a9b 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,26 @@ pre.prettyprint { background-color: #252525; } +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: #444; line-height: 18px; } +ol.linenums { + margin: 0 0 0 33px; /* IE indents via margin-left */ +} +ol.linenums li { + padding-left: 12px; + 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 399a414637..5a8b0b2679 100644 --- a/docs/base-css.html +++ b/docs/base-css.html @@ -1009,8 +1009,9 @@

Form validation

It also includes validation styles for errors, warnings, and success. To use, add the a class to the surrounding .control-group.

-
-<fieldset class="control-group error">
+
+<fieldset
+  class="control-group error">
   ...
 </fieldset>
 

@@ -1024,12 +1025,21 @@
     

       

         Extending form controls
+        

+          
+          

+            
+            
+            
+            
Use the same .span* classes from the grid system for input sizes.

+          

+        

         

           
           

             

               @
-              
+              
             

             
Here's some help text

           

@@ -1038,12 +1048,26 @@
           
           

             

-              
+              
               .00
             

             
Here's more help text

           

         

+        

+          
+          

+            
+            
+            
+          

+        

         

           
           

@@ -1088,6 +1112,7 @@
         

         
Checkboxes and radios

         
Up to v1.4, Bootstrap required extra markup around checkboxes and radios to stack them. Now, it's a simple matter of repeating the <label class="checkbox"> that wraps the <input type="checkbox">.

+        
Inline checkboxes and radios are also supported. Just add .inline to any .checkbox or .radio and you're done.

       

     

   
@@ -1178,17 +1203,12 @@
 
   

 
+  
Button groups Join buttons for more toolbar-like functionality

   

     

-      
Button groups

-      
Use button groups to join multiple buttons together as one composite component. Just build them with a series of <a> or <button> elements. Button groups can also function as radios and checkboxes (see the Javascript docs for that).

-      
You can also combine sets of button groups into a toolbar for more complex projects.

-      
Get the javascript »

-      
Heads up: CSS for button groups is in a separate file, button-groups.less.

-    

-    

-      
Linked button group

-      
Using the standard <a class="btn" href="#">...</a> markup, simply add all the buttons you need.

+      
Button groups

+      
Use button groups to join multiple buttons together as one composite component. Build them with a series of <a> or <button> elements.

+      
You can also combine sets of <div class="btn-group"> into a <div class="btn-toolbar"> for more complex projects.

       

         

           Left
@@ -1196,7 +1216,6 @@
           Right
         

       

-      
Level up one more time by wrapping multiple instances of <div class="btn-group"> with <div class="btn-toolbar">.

       

         

           

@@ -1204,24 +1223,132 @@
             2
             3
             4
-            5
           

           

+            5
             6
             7
+          

+          

             8
           

-          

-            9
-          

-          

-            10
-          

         

       

+
+    

+    

+      
Example markup

+      
Here's how the HTML looks for a standard button group built with anchor tag buttons:

+
+<div class="btn-group">
+  <a class="btn" href="#">1</a>
+  <a class="btn" href="#">2</a>
+  <a class="btn" href="#">3</a>
+</div>
+

+      
And with a toolbar for multiple groups:

+
+<div class="btn-toolbar">
+  <div class="btn-group">
+    ...
+  </div>
+</div>
+

+    

+    

+      
Checkbox and radio flavors

+      
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 the Javascript docs for that.

+      
Get the javascript »

+      

+      
Heads up

+      
CSS for button groups is in a separate file, button-groups.less.

+    

+  

+  
+  

+  
Button dropdowns Built on button groups to provide contextual menus

+  

+    

+      
Split button dropdowns

+      
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.

+      

+        

+          

+            Action
+            
+            
+          
        
+          

+            Action
+            
+            
+          
     
+          

+            Danger
+            
+            
+          

+        

+        

+          

+            Success
+            
+            
+          

+          

+            Info
+            
+            
+          

+        

+      
 
+    

+    

+      
Example markup

+      
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.

+
+<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>
+

     

   

-    
 
 
 
@@ -1429,5 +1556,11 @@
     
     
     
+    
+    
   
 
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 @@
 ================================================== -->
 

   

-    
Side nav 

+    
Side nav for lists of links

   

 
   

     

+      
Examples

+      
Side navs can be just links, links with headings, and links with icons.

       

-        
Your account

         
-      

-    

-    

-      

         
Your account

         
+        
Your account

+        
       

     

+    

+      
Why use it

+      

+    

+    

+      
Markup

+      
Marking up a side nav is at the core just writing an unordered list of links.

+
+  <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>
+

+      
Bootstrap also makes it easy to expand a regular list of links with multiple groups and headings.

+
+  <h6 class="nav-label"></h6>
+  <ul class="nav-group">
+    ...
+  </ul>
+  <h6 class="nav-label"></h6>
+  <ul class="nav-group">
+    ...
+  </ul>
+

+    

   

   
 

@@ -267,10 +295,12 @@
   

     
Navbar

   

-  

+  
Static navbar example

+  
An example of a static (not fixed to the top) navbar with project name, navigation, and search form.

+  

     

       

-        Project Name
+        Project name
         

 
   

-    

-      
What is it

-      
Our navbar is a fixed bar that houses a website’s logo or name, primary navigation, and search form.

+    

+      
Navbar scaffolding

+      
The navbar requires only a few divs to structure it well for static or fixed display.

+
+<div class="navbar navbar-static">
+  <div class="navbar-inner">
+    <div class="container" style="width: auto;">
+      ...
+    </div>
+  </div>
+</div>
+

+      
To make the navbar fixed, swamp the .navbar-static class for .navbar-fixed. In your CSS, you will also need to account for the overlap it causes by adding padding-top: 40px; to your <body>.

+
+<div class="navbar navbar-fixed">
+  ...
+</div>
+

+      

+      
Brand name

+      
A simple link to show your brand or project name only requires an anchor tag.

+
+<a class="brand" href="#">
+  Project name
+</a>
+

+      

+      
Search form

+      
Search forms receive custom styles in the navbar with the .navbar-search class. Include .pull-left or .pull-right on the form to align it.

+
+<form class="navbar-search">
+  <input type="text" class="search-query pull-left" placeholder="Search">
+</form>
+

     

     

-      
Customizable

-      
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.

-    

-    

-      
Dropdowns included

-      
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 <li> tags also support .active for showing current page selection.

+      
Nav links

+      
Nav items are simple to add via unordered lists.

+
+<ul class="nav">
+  <li class="active">
+    <a href="#">Home</a>
+  </li>
+  <li><a href="#">Link</a></li>
+  <li><a href="#">Link</a></li>
+</ul>
+

+      
Adding dropdowns to the nav is super simple, but does require the use of our javascript plugin.

+
+<ul class="nav">
+  <li class="dropdown">
+    <a href="#"
+          class="dropdown-toggle"
+          data-toggle="dropdown">
+          Account
+    </a>
+    <ul class="dropdown-menu">
+      ...
+    </ul>
+  </li>
+</ul>
+

     

   

-  
Note: When using the navbar on any page, be sure to account for the overlap it causes by adding padding-top: 40px; to your <body>.

 
 
 
@@ -507,34 +587,39 @@
   

 
   

-    

-      
Breadcrumb navigation is used as a way to show users where they are within an app or a site, but not for primary navigation.

-    

-    

+    

+      
Why use them

+      
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.

+
+      
Examples

+      
A single example shown as it might be displayed across multiple pages.

       
    
         
  • Home
    • 
       

       
    
         
  • Home /
    • 
-        
  • Middle page
    • 
+        
  • Library
    • 
       

       
-      
+    

+    

+      
Markup

+      
HTML is your standard unordered list with links.

 
 <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>
 

     

@@ -545,13 +630,14 @@
 
 
 
+==================================================
+
+COMMENTED OUT AND NOT SUPPORTED AT THIS TIME.
+
 

   

     
Step nav 

   

-
-  
   

     

       
Placeholder for now!

@@ -571,8 +657,8 @@
       

     

   

-
 

+-->
 
 
 
@@ -682,6 +768,9 @@
+ +
+
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 @@
-

Built with Bootstrap

-

For even more sites built with Bootstrap, visit the unofficial Tumblr.

+

Built with Bootstrap.

+

For even more sites built with Bootstrap, visit the unofficial Tumblr.

-

Designed for everyone, everywhere

+

Designed for everyone, everywhere.

@@ -200,8 +200,40 @@

Brought to you by an experienced engineer and designer.

-
+ + +

Get started in no time.

+

Built for any skill level, Bootstrap fits your workflow and development process.

+ + + + + + + + +
+

Hotlink the CSS

+

For the quickest and easiest start, just copy this snippet into your webpage.

+ + + + 		+

Use it with LESS

+

A fan of using LESS? No problem, just clone the repo and add these lines:

+
+ +
+ 		+

Fork on GitHub

+

Download, fork, pull, file issues, and more with the official Bootstrap repo on Github.

+

Bootstrap on GitHub »

+

Currently v2.0.0

+
+
diff --git a/docs/javascript.html b/docs/javascript.html index c20098085d..28d91cb4ec 100644 --- a/docs/javascript.html +++ b/docs/javascript.html @@ -235,7 +235,14 @@ $('#myModal').on('hidden', function () {

Modal Heading

-

One fine body…

+

Text in a modal

+

Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem.

+ +

Popover in a modal

+

This button should trigger a popover on hover.

+ +

Twipsy tooltips in a modal

+

This link and that link should have Twipsy tooltips on hover.

Save changes @@ -274,7 +281,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 +309,7 @@ $('#myModal').on('hidden', function () {
-
+

Heading

-

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.

+

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.

View details »

-
+

Heading

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.

View details »

-
+

Heading

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.

View details »

@@ -99,23 +99,25 @@
-
+

Heading

-

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.

+

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.

View details »

-
+

Heading

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.

View details »

-
+

Heading

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.

View details »

+
+

© Company 2011

diff --git a/examples/fluid.html b/examples/fluid.html index 3b8bb46a8d..bba78a329b 100644 --- a/examples/fluid.html +++ b/examples/fluid.html @@ -28,7 +28,7 @@ -
+
Project name @@ -42,29 +42,29 @@
-
-
-
-
Sidebar
-
    -
  • Link
    • -
  • Link
    • -
  • Link
    • -
  • Link
    • +
    +
    +
    +
    Sidebar
    + -
    Sidebar
    -
    @@ -78,9 +78,9 @@
    -
    +

    Heading

    -

    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.

    +

    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.

    View details »

    @@ -99,9 +99,9 @@
    -
    +

    Heading

    -

    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.

    +

    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.

    View details »

    @@ -116,6 +116,8 @@
    +
    +

    © Company 2011

    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 @@ -
    +
    Project name @@ -52,17 +52,17 @@
    -
    +

    Heading

    -

    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.

    +

    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.

    View details »

    -
    +

    Heading

    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.

    View details »

    -
    +

    Heading

    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.

    View details »

    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..00c686dc22 100644 --- a/lib/dropdowns.less +++ b/lib/dropdowns.less @@ -3,79 +3,75 @@ .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) .dropdown-menu { position: absolute; top: 40px; - z-index: 900; + z-index: @zindexDropdown; 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/forms.less b/lib/forms.less index 938983536e..f0b7c2ea66 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 @@ -137,6 +139,17 @@ textarea { padding-top: 6px; // has to be padding because margin collaspes } +// Radios and checkboxes on same line +.radio.inline, +.checkbox.inline { + display: inline-block; + margin-bottom: 0; +} +.radio.inline + .radio.inline, +.checkbox.inline + .checkbox.inline { + margin-left: 10px; // space out consecutive inline controls +} + // FOCUS STATE @@ -144,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; } @@ -176,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 { 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); } } @@ -325,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; @@ -356,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; diff --git a/lib/modals.less b/lib/modals.less index 96f9a488ec..46fcd880b9 100644 --- a/lib/modals.less +++ b/lib/modals.less @@ -7,7 +7,7 @@ right: 0; bottom: 0; left: 0; - z-index: 10000; + 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; @@ -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; diff --git a/lib/navbar.less b/lib/navbar.less index a96aa941c1..90ff786767 100644 --- a/lib/navbar.less +++ b/lib/navbar.less @@ -53,6 +53,16 @@ } } +// Navbar forms +.navbar-form { + margin-bottom: 0; // remove default bottom margin + input, + select { + display: inline-block; + margin-bottom: 0; + } +} + // Navbar search .navbar-search { position: relative; @@ -115,7 +125,7 @@ top: 0; right: 0; left: 0; - z-index: 10000; + z-index: @zindexFixedNavbar; } diff --git a/lib/popovers.less b/lib/popovers.less index 5ecde09233..9ecdf5fd98 100644 --- a/lib/popovers.less +++ b/lib/popovers.less @@ -5,7 +5,7 @@ position: absolute; top: 0; left: 0; - z-index: 1000; + z-index: @zindexPopover; display: none; padding: 5px; &.top { margin-top: -5px; } diff --git a/lib/responsive.less b/lib/responsive.less index fe2b7cd49a..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 @@ -205,6 +206,9 @@ .container { width: @siteWidth; } + .row { + margin-left: @gridGutterWidth * -1; + } [class*="span"] { margin-left: @gridGutterWidth; } @@ -238,4 +242,4 @@ .offset12 { .offset(12); } } -*/ +*/ \ No newline at end of file diff --git a/lib/scaffolding.less b/lib/scaffolding.less index d75adba56b..7432e849ba 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 { - width: 220px; +.fluid-sidebar { + width: @fluidSidebarWidth; + margin: 0 20px 18px; } -.fluid-sidebar-left { float: left; } -.fluid-sidebar-right { float: right; } +.sidebar-left { padding-left: @fluidSidebarWidth + 40; } +.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; } + // 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%; } 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/twipsy.less b/lib/twipsy.less index abd0599f4e..7eaa7d5bfd 100644 --- a/lib/twipsy.less +++ b/lib/twipsy.less @@ -3,7 +3,7 @@ .twipsy { position: absolute; - z-index: 1000; + z-index: @zindexTwipsy; display: block; visibility: visible; padding: 5px; diff --git a/lib/type.less b/lib/type.less index 59dae717fb..32cb094310 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; } @@ -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; diff --git a/lib/variables.less b/lib/variables.less index 03f1028f85..37f5adb71d 100644 --- a/lib/variables.less +++ b/lib/variables.less @@ -43,6 +43,19 @@ @gridGutterWidth: 20px; @siteWidth: (@gridColumns * @gridColumnWidth) + (@gridGutterWidth * (@gridColumns - 1)); +// Fluid width sidebar +@fluidSidebarWidth: 220px; + + +// Z-INDEX +// ------- +@zindexDropdown: 1000; +@zindexFixedNavbar: 1010; +@zindexModalBackdrop: 1020; +@zindexModal: 1030; +@zindexPopover: 1040; +@zindexTwipsy: 1050; + // THEME VARIABLES // ---------------