0
0
mirror of https://github.com/twbs/bootstrap.git synced 2024-12-01 13:24:25 +01:00

Merge branch '3.0.0-wip' into bs3_navbar_overhaul

Conflicts:
	dist/css/bootstrap.min.css
This commit is contained in:
Mark Otto 2013-08-13 13:48:33 -07:00
commit bd93ed2cb6
24 changed files with 577 additions and 310 deletions

3
.gitignore vendored
View File

@ -33,6 +33,9 @@ nbproject
*.komodoproject
.komodotools
# grunt-html-validation
validation-staus.json
# Folders to ignore
.hg
.svn

View File

@ -2,6 +2,7 @@ language: node_js
node_js:
- 0.8
before_script:
- gem install jekyll
- npm install -g grunt-cli
env:
global:

View File

@ -102,6 +102,19 @@ module.exports = function(grunt) {
}
},
jekyll: {
docs: {}
},
validation: {
options: {
reset: true,
},
files: {
src: ["_gh_pages/**/*.html"]
}
},
watch: {
src: {
files: '<%= jshint.src.src %>',
@ -127,12 +140,17 @@ module.exports = function(grunt) {
grunt.loadNpmTasks('grunt-contrib-qunit');
grunt.loadNpmTasks('grunt-contrib-uglify');
grunt.loadNpmTasks('grunt-contrib-watch');
grunt.loadNpmTasks('grunt-html-validation');
grunt.loadNpmTasks('grunt-jekyll');
grunt.loadNpmTasks('grunt-recess');
grunt.loadNpmTasks('browserstack-runner');
// Docs HTML validation task
grunt.registerTask('validate-docs', ['jekyll', 'validation']);
// Test task.
var testSubtasks = ['jshint', 'qunit'];
var testSubtasks = ['jshint', 'qunit', 'validate-docs'];
// Only run BrowserStack tests under Travis
if (process.env.TRAVIS) {
// Only run BrowserStack tests if this is a mainline commit in twbs/bootstrap, or you have your own BrowserStack key

View File

@ -13,7 +13,7 @@ port: 9001
# Custom vars
repo: https://github.com/twbs/bootstrap
download: https://github.com/twbs/bootstrap/archive/3.0.0-wip.zip
download_dist: http://getbootstrap.com/bs-v3.0.0-rc1-dist.zip
download_dist: http://getbootstrap.com/bs-v3.0.0-rc.2-dist.zip
examples: http://examples.getbootstrap.com
examples_repo: https://github.com/twbs/bootstrap-examples
@ -24,5 +24,5 @@ glyphicons_repo: https://github.com/twbs/bootstrap-glyphicons
blog: http://blog.getbootstrap.com
expo: http://expo.getbootstrap.com
cdn_css: //netdna.bootstrapcdn.com/bootstrap/3.0.0-rc1/css/bootstrap.min.css
cdn_js: //netdna.bootstrapcdn.com/bootstrap/3.0.0-rc1/js/bootstrap.min.js
cdn_css: //netdna.bootstrapcdn.com/bootstrap/3.0.0-wip/css/bootstrap.min.css
cdn_js: //netdna.bootstrapcdn.com/bootstrap/3.0.0-wip/js/bootstrap.min.js

View File

@ -719,7 +719,7 @@ body {
-------------------------------------------------- */
/* Pseudo :focus state for showing how it looks in the docs */
input.focused {
#focusedInput {
border-color: rgba(82,168,236,.8);
outline: 0;
outline: thin dotted \9; /* IE6-9 */

View File

@ -1,7 +1,7 @@
{
"name": "bootstrap",
"version": "3.0.0",
"main": ["./dist/js/bootstrap.min.js", "./dist/js/bootstrap.js", "./dist/css/bootstrap.min.css", "./dist/css/bootstrap.css"],
"main": ["./dist/js/bootstrap.min.js", "./dist/css/bootstrap.min.css"],
"ignore": [
"**/.*"
],

View File

@ -19,24 +19,25 @@ base_url: "../"
<p>Wrap the dropdown's trigger and the dropdown menu within <code>.dropdown</code>, or another element that declares <code>position: relative;</code>. Then add the menu's HTML.</p>
<div class="bs-example">
<div class="dropdown clearfix">
<ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu">
<li><a tabindex="-1" href="#">Action</a></li>
<li><a tabindex="-1" href="#">Another action</a></li>
<li><a tabindex="-1" href="#">Something else here</a></li>
<li class="divider"></li>
<li><a tabindex="-1" href="#">Separated link</a></li>
<a id="dropdownMenu1" href="#" role="button" class="sr-only dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a>
<ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu1">
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">Action</a></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">Another action</a></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">Something else here</a></li>
<li role="presentation" class="divider"></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">Separated link</a></li>
</ul>
</div>
</div><!-- /example -->
{% highlight html %}
<div class="dropdown">
<!-- Link or button to toggle dropdown -->
<ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu">
<li><a tabindex="-1" href="#">Action</a></li>
<li><a tabindex="-1" href="#">Another action</a></li>
<li><a tabindex="-1" href="#">Something else here</a></li>
<li class="divider"></li>
<li><a tabindex="-1" href="#">Separated link</a></li>
<ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu1">
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">Action</a></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">Another action</a></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">Something else here</a></li>
<li role="presentation" class="divider"></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">Separated link</a></li>
</ul>
</div>
{% endhighlight %}
@ -53,23 +54,24 @@ base_url: "../"
<p>Add a header to label sections of actions in any dropdown menu.</p>
<div class="bs-example">
<div class="dropdown clearfix">
<ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu">
<li class="dropdown-header">Dropdown header</li>
<li><a tabindex="-1" href="#">Action</a></li>
<li><a tabindex="-1" href="#">Another action</a></li>
<li><a tabindex="-1" href="#">Something else here</a></li>
<li class="divider"></li>
<li class="dropdown-header">Dropdown header</li>
<li><a tabindex="-1" href="#">Separated link</a></li>
<a id="dropdownMenu2" href="#" role="button" class="sr-only dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a>
<ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu2">
<li role="presentation" class="dropdown-header">Dropdown header</li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">Action</a></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">Another action</a></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">Something else here</a></li>
<li role="presentation" class="divider"></li>
<li role="presentation" class="dropdown-header">Dropdown header</li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">Separated link</a></li>
</ul>
</div>
</div><!-- /example -->
{% highlight html %}
<ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu">
<li class="dropdown-header">Dropdown header</li>
<ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu2">
<li role="presentation" class="dropdown-header">Dropdown header</li>
...
<li class="divider"></li>
<li class="dropdown-header">Dropdown header</li>
<li role="presentation" class="divider"></li>
<li role="presentation" class="dropdown-header">Dropdown header</li>
...
</ul>
{% endhighlight %}
@ -78,18 +80,19 @@ base_url: "../"
<p>Add <code>.disabled</code> to a <code>&lt;li&gt;</code> in the dropdown to disable the link.</p>
<div class="bs-example">
<div class="dropdown clearfix">
<ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu">
<li><a tabindex="-1" href="#">Regular link</a></li>
<li class="disabled"><a tabindex="-1" href="#">Disabled link</a></li>
<li><a tabindex="-1" href="#">Another link</a></li>
<a id="dropdownMenu3" href="#" role="button" class="sr-only dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a>
<ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu3">
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">Regular link</a></li>
<li role="presentation" class="disabled"><a role="menuitem" tabindex="-1" href="#">Disabled link</a></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">Another link</a></li>
</ul>
</div>
</div><!-- /example -->
{% highlight html %}
<ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu">
<li><a tabindex="-1" href="#">Regular link</a></li>
<li class="disabled"><a tabindex="-1" href="#">Disabled link</a></li>
<li><a tabindex="-1" href="#">Another link</a></li>
<ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu3">
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">Regular link</a></li>
<li role="presentation" class="disabled"><a role="menuitem" tabindex="-1" href="#">Disabled link</a></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">Another link</a></li>
</ul>
{% endhighlight %}
</div>
@ -230,8 +233,48 @@ base_url: "../"
<div class="btn-group-vertical">
<button type="button" class="btn btn-default">Button</button>
<button type="button" class="btn btn-default">Button</button>
<div class="btn-group">
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
Dropdown
<span class="caret"></span>
</button>
<ul class="dropdown-menu">
<li><a href="#">Dropdown link</a></li>
<li><a href="#">Dropdown link</a></li>
</ul>
</div>
<button type="button" class="btn btn-default">Button</button>
<button type="button" class="btn btn-default">Button</button>
<div class="btn-group">
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
Dropdown
<span class="caret"></span>
</button>
<ul class="dropdown-menu">
<li><a href="#">Dropdown link</a></li>
<li><a href="#">Dropdown link</a></li>
</ul>
</div>
<div class="btn-group">
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
Dropdown
<span class="caret"></span>
</button>
<ul class="dropdown-menu">
<li><a href="#">Dropdown link</a></li>
<li><a href="#">Dropdown link</a></li>
</ul>
</div>
<div class="btn-group">
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
Dropdown
<span class="caret"></span>
</button>
<ul class="dropdown-menu">
<li><a href="#">Dropdown link</a></li>
<li><a href="#">Dropdown link</a></li>
</ul>
</div>
</div>
</div>
{% highlight html %}
@ -1743,22 +1786,22 @@ body { padding-bottom: 70px; }
<div class="row">
<div class="col-lg-3">
<a href="#" class="thumbnail">
<img data-src="holder.js/100%x180" alt="Generic placeholder thumbnail">
<img data-src="holder.js/100%x180" alt="Generic placeholder thumbnail" src="data:image/png;base64,">
</a>
</div>
<div class="col-lg-3">
<a href="#" class="thumbnail">
<img data-src="holder.js/100%x180" alt="Generic placeholder thumbnail">
<img data-src="holder.js/100%x180" alt="Generic placeholder thumbnail" src="data:image/png;base64,">
</a>
</div>
<div class="col-lg-3">
<a href="#" class="thumbnail">
<img data-src="holder.js/100%x180" alt="Generic placeholder thumbnail">
<img data-src="holder.js/100%x180" alt="Generic placeholder thumbnail" src="data:image/png;base64,">
</a>
</div>
<div class="col-lg-3">
<a href="#" class="thumbnail">
<img data-src="holder.js/100%x180" alt="Generic placeholder thumbnail">
<img data-src="holder.js/100%x180" alt="Generic placeholder thumbnail" src="data:image/png;base64,">
</a>
</div>
</div>
@ -1780,7 +1823,7 @@ body { padding-bottom: 70px; }
<div class="row">
<div class="col-lg-4">
<div class="thumbnail">
<img data-src="holder.js/300x200" alt="">
<img data-src="holder.js/300x200" alt="Generic placeholder thumbnail" src="data:image/png;base64,">
<div class="caption">
<h3>Thumbnail label</h3>
<p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
@ -1790,7 +1833,7 @@ body { padding-bottom: 70px; }
</div>
<div class="col-lg-4">
<div class="thumbnail">
<img data-src="holder.js/300x200" alt="">
<img data-src="holder.js/300x200" alt="Generic placeholder thumbnail" src="data:image/png;base64,">
<div class="caption">
<h3>Thumbnail label</h3>
<p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
@ -1800,7 +1843,7 @@ body { padding-bottom: 70px; }
</div>
<div class="col-lg-4">
<div class="thumbnail">
<img data-src="holder.js/300x200" alt="">
<img data-src="holder.js/300x200" alt="Generic placeholder thumbnail" src="data:image/png;base64,">
<div class="caption">
<h3>Thumbnail label</h3>
<p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
@ -1814,7 +1857,7 @@ body { padding-bottom: 70px; }
<div class="row">
<div class="col-lg-4">
<div class="thumbnail">
<img data-src="holder.js/300x200" alt="">
<img data-src="holder.js/300x200" alt="...">
<div class="caption">
<h3>Thumbnail label</h3>
<p>...</p>
@ -2072,7 +2115,7 @@ body { padding-bottom: 70px; }
<div class="bs-example">
<div class="media">
<a class="pull-left" href="#">
<img class="media-object" data-src="holder.js/64x64" alt="Generic placeholder image">
<img class="media-object" data-src="holder.js/64x64" alt="Generic placeholder image" src="data:image/png;base64,">
</a>
<div class="media-body">
<h4 class="media-heading">Media heading</h4>
@ -2081,14 +2124,14 @@ body { padding-bottom: 70px; }
</div>
<div class="media">
<a class="pull-left" href="#">
<img class="media-object" data-src="holder.js/64x64" alt="Generic placeholder image">
<img class="media-object" data-src="holder.js/64x64" alt="Generic placeholder image" src="data:image/png;base64,">
</a>
<div class="media-body">
<h4 class="media-heading">Media heading</h4>
Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.
<div class="media">
<a class="pull-left" href="#">
<img class="media-object" data-src="holder.js/64x64" alt="Generic placeholder image">
<img class="media-object" data-src="holder.js/64x64" alt="Generic placeholder image" src="data:image/png;base64,">
</a>
<div class="media-body">
<h4 class="media-heading">Media heading</h4>
@ -2116,7 +2159,7 @@ body { padding-bottom: 70px; }
<ul class="media-list">
<li class="media">
<a class="pull-left" href="#">
<img class="media-object" data-src="holder.js/64x64" alt="Generic placeholder image">
<img class="media-object" data-src="holder.js/64x64" alt="Generic placeholder image" src="data:image/png;base64,">
</a>
<div class="media-body">
<h4 class="media-heading">Media heading</h4>
@ -2124,7 +2167,7 @@ body { padding-bottom: 70px; }
<!-- Nested media object -->
<div class="media">
<a class="pull-left" href="#">
<img class="media-object" data-src="holder.js/64x64" alt="Generic placeholder image">
<img class="media-object" data-src="holder.js/64x64" alt="Generic placeholder image" src="data:image/png;base64,">
</a>
<div class="media-body">
<h4 class="media-heading">Nested media heading</h4>
@ -2132,7 +2175,7 @@ body { padding-bottom: 70px; }
<!-- Nested media object -->
<div class="media">
<a class="pull-left" href="#">
<img class="media-object" data-src="holder.js/64x64" alt="Generic placeholder image">
<img class="media-object" data-src="holder.js/64x64" alt="Generic placeholder image" src="data:image/png;base64,">
</a>
<div class="media-body">
<h4 class="media-heading">Nested media heading</h4>
@ -2144,7 +2187,7 @@ body { padding-bottom: 70px; }
<!-- Nested media object -->
<div class="media">
<a class="pull-left" href="#">
<img class="media-object" data-src="holder.js/64x64" alt="Generic placeholder image">
<img class="media-object" data-src="holder.js/64x64" alt="Generic placeholder image" src="data:image/png;base64,">
</a>
<div class="media-body">
<h4 class="media-heading">Nested media heading</h4>
@ -2155,7 +2198,7 @@ body { padding-bottom: 70px; }
</li>
<li class="media">
<a class="pull-right" href="#">
<img class="media-object" data-src="holder.js/64x64" alt="Generic placeholder image">
<img class="media-object" data-src="holder.js/64x64" alt="Generic placeholder image" src="data:image/png;base64,">
</a>
<div class="media-body">
<h4 class="media-heading">Media heading</h4>
@ -2307,12 +2350,16 @@ body { padding-bottom: 70px; }
<p>By default, all the <code>.panel</code> does is apply some basic border and padding to contain some content.</p>
<div class="bs-example">
<div class="panel">
<div class="panel-body">
Basic panel example
</div>
</div>
</div>
{% highlight html %}
<div class="panel">
<div class="panel-body">
Basic panel example
</div>
</div>
{% endhighlight %}
@ -2321,26 +2368,34 @@ body { padding-bottom: 70px; }
<div class="bs-example">
<div class="panel">
<div class="panel-heading">Panel heading</div>
<div class="panel-body">
Panel content
</div>
</div>
<div class="panel">
<div class="panel-heading">
<h3 class="panel-title">Panel title</h3>
</div>
<div class="panel-body">
Panel content
</div>
</div>
</div>
{% highlight html %}
<div class="panel">
<div class="panel-heading">Panel heading</div>
<div class="panel-body">
Panel content
</div>
</div>
<div class="panel">
<div class="panel-heading">
<h3 class="panel-title">Panel title</h3>
</div>
<div class="panel-body">
Panel content
</div>
</div>
{% endhighlight %}
@ -2348,13 +2403,17 @@ body { padding-bottom: 70px; }
<p>Wrap buttons or secondary text in <code>.panel-footer</code>.</p>
<div class="bs-example">
<div class="panel">
<div class="panel-body">
Panel content
</div>
<div class="panel-footer">Panel footer</div>
</div>
</div>
{% highlight html %}
<div class="panel">
<div class="panel-body">
Panel content
</div>
<div class="panel-footer">Panel footer</div>
</div>
{% endhighlight %}
@ -2366,33 +2425,43 @@ body { padding-bottom: 70px; }
<div class="panel-heading">
<h3 class="panel-title">Panel title</h3>
</div>
<div class="panel-body">
Panel content
</div>
</div>
<div class="panel panel-success">
<div class="panel-heading">
<h3 class="panel-title">Panel title</h3>
</div>
<div class="panel-body">
Panel content
</div>
</div>
<div class="panel panel-warning">
<div class="panel-heading">
<h3 class="panel-title">Panel title</h3>
</div>
<div class="panel-body">
Panel content
</div>
</div>
<div class="panel panel-danger">
<div class="panel-heading">
<h3 class="panel-title">Panel title</h3>
</div>
<div class="panel-body">
Panel content
</div>
</div>
<div class="panel panel-info">
<div class="panel-heading">
<h3 class="panel-title">Panel title</h3>
</div>
<div class="panel-body">
Panel content
</div>
</div>
</div>
{% highlight html %}
<div class="panel panel-primary">...</div>
<div class="panel panel-success">...</div>
@ -2407,7 +2476,9 @@ body { padding-bottom: 70px; }
<div class="panel">
<!-- Default panel contents -->
<div class="panel-heading">Panel heading</div>
<div class="panel-body">
<p>Some default panel content here. Nulla vitae elit libero, a pharetra augue. Aenean lacinia bibendum nulla sed consectetur. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
</div>
<!-- List group -->
<ul class="list-group">
@ -2423,7 +2494,9 @@ body { padding-bottom: 70px; }
<div class="panel">
<!-- Default panel contents -->
<div class="panel-heading">Panel heading</div>
<div class="panel-body">
<p>...</p>
</div>
<!-- List group -->
<ul class="list-group">

View File

@ -602,7 +602,7 @@ base_url: "../"
</tr>
<tr>
<td><h5>Bootstrap heading</h5></td>
<td>Semibold 16px</td>
<td>Semibold 14px</td>
</tr>
<tr>
<td><h6>Bootstrap heading</h6></td>
@ -2012,9 +2012,9 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
<p>Keep in mind that Internet Explorer 8 lacks support for rounded corners.</p>
</div>
<div class="bs-example bs-example-images">
<img data-src="holder.js/140x140" class="img-rounded" alt="A generic square placeholder image with rounded corners">
<img data-src="holder.js/140x140" class="img-circle" alt="A generic square placeholder image where only the portion within the circle circumscribed about said square is visible">
<img data-src="holder.js/140x140" class="img-thumbnail" alt="A generic square placeholder image with a white border around it, making it resemble a photograph taken with an old instant camera">
<img data-src="holder.js/140x140" src="data:image/png;base64," class="img-rounded" alt="A generic square placeholder image with rounded corners">
<img data-src="holder.js/140x140" src="data:image/png;base64," class="img-circle" alt="A generic square placeholder image where only the portion within the circle circumscribed about said square is visible">
<img data-src="holder.js/140x140" src="data:image/png;base64," class="img-thumbnail" alt="A generic square placeholder image with a white border around it, making it resemble a photograph taken with an old instant camera">
</div>
{% highlight html %}
<img src="..." alt="..." class="img-rounded">
@ -2075,7 +2075,7 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
{% endhighlight %}
{% highlight css %}
// Mixin
.clearfix {
.clearfix() {
&:before,
&:after {
content: " ";

231
dist/css/bootstrap.css vendored
View File

@ -1704,7 +1704,7 @@ textarea.form-control {
margin-left: 10px;
}
.input-lg {
.input-sm {
height: 45px;
padding: 10px 16px;
font-size: 18px;
@ -1712,7 +1712,16 @@ textarea.form-control {
border-radius: 6px;
}
.input-sm {
select.input-sm {
height: 45px;
line-height: 45px;
}
textarea.input-sm {
height: auto;
}
.input-lg {
height: 30px;
padding: 5px 10px;
font-size: 12px;
@ -1721,17 +1730,11 @@ textarea.form-control {
}
select.input-lg {
height: 45px;
line-height: 45px;
}
select.input-sm {
height: 30px;
line-height: 30px;
}
textarea.input-lg,
textarea.input-sm {
textarea.input-lg {
height: auto;
}
@ -2256,6 +2259,29 @@ input[type="button"].btn-block {
.input-group-lg > .form-control,
.input-group-lg > .input-group-addon,
.input-group-lg > .input-group-btn > .btn {
height: 30px;
padding: 5px 10px;
font-size: 12px;
line-height: 1.5;
border-radius: 3px;
}
select.input-group-lg > .form-control,
select.input-group-lg > .input-group-addon,
select.input-group-lg > .input-group-btn > .btn {
height: 30px;
line-height: 30px;
}
textarea.input-group-lg > .form-control,
textarea.input-group-lg > .input-group-addon,
textarea.input-group-lg > .input-group-btn > .btn {
height: auto;
}
.input-group-sm > .form-control,
.input-group-sm > .input-group-addon,
.input-group-lg > .input-group-btn > .btn {
height: 45px;
padding: 10px 16px;
@ -2264,14 +2290,17 @@ input[type="button"].btn-block {
border-radius: 6px;
}
.input-group-sm > .form-control,
.input-group-sm > .input-group-addon,
.input-group-lg > .input-group-btn > .btn {
height: 30px;
padding: 5px 10px;
font-size: 12px;
line-height: 1.5;
border-radius: 3px;
select.input-group-sm > .form-control,
select.input-group-sm > .input-group-addon,
select.input-group-lg > .input-group-btn > .btn {
height: 45px;
line-height: 45px;
}
textarea.input-group-sm > .form-control,
textarea.input-group-sm > .input-group-addon,
textarea.input-group-lg > .input-group-btn > .btn {
height: auto;
}
.input-group-addon,
@ -2395,6 +2424,7 @@ input[type="button"].btn-block {
min-width: 160px;
padding: 5px 0;
margin: 2px 0 0;
font-size: 14px;
list-style: none;
background-color: #ffffff;
border: 1px solid #cccccc;
@ -2593,7 +2623,6 @@ a.list-group-item:focus {
}
.panel {
padding: 15px;
margin-bottom: 20px;
background-color: #ffffff;
border: 1px solid #dddddd;
@ -2602,8 +2631,12 @@ a.list-group-item:focus {
box-shadow: 0 1px 1px rgba(0, 0, 0, 0.05);
}
.panel-body {
padding: 15px;
}
.panel .list-group {
margin: 15px -15px -15px;
margin-bottom: 0;
}
.panel .list-group .list-group-item {
@ -2619,17 +2652,12 @@ a.list-group-item:focus {
border-bottom: 0;
}
.panel-heading + .list-group {
margin-top: -15px;
}
.panel-heading + .list-group .list-group-item:first-child {
border-top-width: 0;
}
.panel-heading {
padding: 10px 15px;
margin: -15px -15px 15px;
background-color: #f5f5f5;
border-bottom: 1px solid #dddddd;
border-top-right-radius: 3px;
@ -2648,13 +2676,38 @@ a.list-group-item:focus {
.panel-footer {
padding: 10px 15px;
margin: 15px -15px -15px;
background-color: #f5f5f5;
border-top: 1px solid #dddddd;
border-bottom-right-radius: 3px;
border-bottom-left-radius: 3px;
}
.panel-group .panel {
margin-bottom: 0;
overflow: hidden;
border-radius: 4px;
}
.panel-group .panel + .panel {
margin-top: 5px;
}
.panel-group .panel-heading {
border-bottom: 0;
}
.panel-group .panel-heading + .panel-collapse .panel-body {
border-top: 1px solid #dddddd;
}
.panel-group .panel-footer {
border-top: 0;
}
.panel-group .panel-footer + .panel-collapse .panel-body {
border-bottom: 1px solid #dddddd;
}
.panel-primary {
border-color: #428bca;
}
@ -2665,6 +2718,14 @@ a.list-group-item:focus {
border-color: #428bca;
}
.panel-primary .panel-heading + .panel-collapse .panel-body {
border-top-color: #428bca;
}
.panel-primary .panel-footer + .panel-collapse .panel-body {
border-bottom-color: #428bca;
}
.panel-success {
border-color: #d6e9c6;
}
@ -2675,6 +2736,14 @@ a.list-group-item:focus {
border-color: #d6e9c6;
}
.panel-success .panel-heading + .panel-collapse .panel-body {
border-top-color: #d6e9c6;
}
.panel-success .panel-footer + .panel-collapse .panel-body {
border-bottom-color: #d6e9c6;
}
.panel-warning {
border-color: #fbeed5;
}
@ -2685,6 +2754,14 @@ a.list-group-item:focus {
border-color: #fbeed5;
}
.panel-warning .panel-heading + .panel-collapse .panel-body {
border-top-color: #fbeed5;
}
.panel-warning .panel-footer + .panel-collapse .panel-body {
border-bottom-color: #fbeed5;
}
.panel-danger {
border-color: #eed3d7;
}
@ -2695,6 +2772,14 @@ a.list-group-item:focus {
border-color: #eed3d7;
}
.panel-danger .panel-heading + .panel-collapse .panel-body {
border-top-color: #eed3d7;
}
.panel-danger .panel-footer + .panel-collapse .panel-body {
border-bottom-color: #eed3d7;
}
.panel-info {
border-color: #bce8f1;
}
@ -2705,6 +2790,14 @@ a.list-group-item:focus {
border-color: #bce8f1;
}
.panel-info .panel-heading + .panel-collapse .panel-body {
border-top-color: #bce8f1;
}
.panel-info .panel-footer + .panel-collapse .panel-body {
border-bottom-color: #bce8f1;
}
.well {
min-height: 20px;
padding: 19px;
@ -3562,7 +3655,10 @@ button.close {
outline: none;
}
.btn-group .btn + .btn {
.btn-group .btn + .btn,
.btn-group .btn + .btn-group,
.btn-group .btn-group + .btn,
.btn-group .btn-group + .btn-group {
margin-left: -1px;
}
@ -3689,27 +3785,73 @@ button.close {
border-bottom-width: 5px;
}
.btn-group-vertical > .btn {
.btn-group-vertical > .btn,
.btn-group-vertical > .btn-group {
display: block;
float: none;
width: 100%;
max-width: 100%;
}
.btn-group-vertical > .btn + .btn {
margin-top: -1px;
.btn-group-vertical > .btn-group:before,
.btn-group-vertical > .btn-group:after {
display: table;
content: " ";
}
.btn-group-vertical .btn:not(:first-child):not(:last-child) {
.btn-group-vertical > .btn-group:after {
clear: both;
}
.btn-group-vertical > .btn-group:before,
.btn-group-vertical > .btn-group:after {
display: table;
content: " ";
}
.btn-group-vertical > .btn-group:after {
clear: both;
}
.btn-group-vertical > .btn-group > .btn {
float: none;
}
.btn-group-vertical > .btn + .btn,
.btn-group-vertical > .btn + .btn-group,
.btn-group-vertical > .btn-group + .btn,
.btn-group-vertical > .btn-group + .btn-group {
margin-top: -1px;
margin-left: 0;
}
.btn-group-vertical > .btn:not(:first-child):not(:last-child) {
border-radius: 0;
}
.btn-group-vertical .btn:first-child:not(:last-child) {
.btn-group-vertical > .btn:first-child:not(:last-child) {
border-top-right-radius: 4px;
border-bottom-right-radius: 0;
border-bottom-left-radius: 0;
}
.btn-group-vertical .btn:last-child:not(:first-child) {
.btn-group-vertical > .btn:last-child:not(:first-child) {
border-top-right-radius: 0;
border-bottom-left-radius: 4px;
border-top-left-radius: 0;
}
.btn-group-vertical > .btn-group:not(:first-child):not(:last-child) > .btn {
border-radius: 0;
}
.btn-group-vertical > .btn-group:first-child > .btn:last-child,
.btn-group-vertical > .btn-group:first-child > .dropdown-toggle {
border-bottom-right-radius: 0;
border-bottom-left-radius: 0;
}
.btn-group-vertical > .btn-group:last-child > .btn:first-child {
border-top-right-radius: 0;
border-top-left-radius: 0;
}
@ -4696,31 +4838,6 @@ a.list-group-item.active > .badge,
background-image: linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);
}
.accordion {
margin-bottom: 20px;
}
.accordion-group {
margin-bottom: 2px;
border: 1px solid #e5e5e5;
border-radius: 4px;
}
.accordion-heading {
border-bottom: 0;
}
.accordion-heading .accordion-toggle {
display: block;
padding: 8px 15px;
cursor: pointer;
}
.accordion-inner {
padding: 9px 15px;
border-top: 1px solid #e5e5e5;
}
.carousel {
position: relative;
}

File diff suppressed because one or more lines are too long

View File

@ -539,7 +539,7 @@ if (!jQuery) { throw new Error("Bootstrap requires jQuery") }
this.$element.trigger(startEvent)
if (startEvent.isDefaultPrevented()) return
var actives = this.$parent && this.$parent.find('> .accordion-group > .in')
var actives = this.$parent && this.$parent.find('> .panel > .in')
if (actives && actives.length) {
var hasData = actives.data('bs.collapse')

File diff suppressed because one or more lines are too long

View File

@ -15,9 +15,14 @@ base_url: "../"
</div>
<p class="lead">There are a few easy ways to quickly get started with Bootstrap, each one appealing to a different skill level and use case. Read through to see what suits your particular needs.</p>
<h3>Download latest full source</h3>
<p class="lead">Until Bootstrap 3.0.0 is finalized, download the latest full source code (includes compiled and minified versions of our CSS and JavaScript under the <code>dist/</code> directory).</p>
<a href="{{ site.download }}" onclick="_gaq.push(['_trackEvent', 'Getting started', 'Download', 'Download source']);">Download latest Bootstrap 3</a>
<!--
<h3>Download compiled CSS and JS</h3>
<p class="lead">The fastest way to get started is to get the compiled and minified versions of our CSS and JavaScript. No documentation or original source files are included.</p>
<p><a class="btn btn-lg btn-primary" href="{{ site.download_dist }}" onclick="_gaq.push(['_trackEvent', 'Getting started', 'Download', 'Download compiled']);">Download Bootstrap</a></p>
-->
<h3 id="download-options">More download options</h3>
<div class="bs-docs-dl-options">
@ -180,6 +185,9 @@ if (navigator.userAgent.match(/IEMobile\/10\.0/)) {
<li>Tweak your percentages manually to get the perfect rounding for Safari (more difficult than the first option)</li>
</ul>
<p>We'll keep an eye on this though and update our code if we have an easy solution.</p>
<h3>Modals and mobile devices</h3>
<p>Support for <code>overflow: hidden</code> on the <code>&lt;body&gt;</code> element is quite limited in iOS and Android. To that end, when you scroll past the top or bottom of a modal in either of those devices' browsers, the <code>&lt;body&gt;</code> content will begin to scroll.</p>
</div>

View File

@ -1401,42 +1401,48 @@ $('.nav-tabs').button()
</div>
<h2 id="collapse-examples">Example accordion</h2>
<p>Using the collapse plugin, we built a simple accordion style widget:</p>
<p>Using the collapse plugin, we built a simple accordion by extending the panel component.</p>
<div class="bs-example">
<div class="accordion" id="accordion2">
<div class="accordion-group">
<div class="accordion-heading">
<a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion2" href="#collapseOne">
<div class="panel-group" id="accordion">
<div class="panel">
<div class="panel-heading">
<h3 class="panel-title">
<a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion" href="#collapseOne">
Collapsible Group Item #1
</a>
</h3>
</div>
<div id="collapseOne" class="accordion-body collapse in">
<div class="accordion-inner">
<div id="collapseOne" class="panel-collapse collapse in">
<div class="panel-body">
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
</div>
</div>
</div>
<div class="accordion-group">
<div class="accordion-heading">
<a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion2" href="#collapseTwo">
<div class="panel">
<div class="panel-heading">
<h3 class="panel-title">
<a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion" href="#collapseTwo">
Collapsible Group Item #2
</a>
</h3>
</div>
<div id="collapseTwo" class="accordion-body collapse">
<div class="accordion-inner">
<div id="collapseTwo" class="panel-collapse collapse">
<div class="panel-body">
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
</div>
</div>
</div>
<div class="accordion-group">
<div class="accordion-heading">
<a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion2" href="#collapseThree">
<div class="panel">
<div class="panel-heading">
<h3 class="panel-title">
<a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion" href="#collapseThree">
Collapsible Group Item #3
</a>
</h3>
</div>
<div id="collapseThree" class="accordion-body collapse">
<div class="accordion-inner">
<div id="collapseThree" class="panel-collapse collapse">
<div class="panel-body">
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
</div>
</div>
@ -1444,40 +1450,46 @@ $('.nav-tabs').button()
</div>
</div><!-- /example -->
{% highlight html %}
<div class="accordion" id="accordion2">
<div class="accordion-group">
<div class="accordion-heading">
<a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion2" href="#collapseOne">
<div class="panel-group" id="accordion">
<div class="panel">
<div class="panel-heading">
<h3 class="panel-title">
<a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion" href="#collapseOne">
Collapsible Group Item #1
</a>
</h3>
</div>
<div id="collapseOne" class="accordion-body collapse in">
<div class="accordion-inner">
...
<div id="collapseOne" class="panel-collapse collapse in">
<div class="panel-body">
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
</div>
</div>
</div>
<div class="accordion-group">
<div class="accordion-heading">
<a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion2" href="#collapseTwo">
<div class="panel">
<div class="panel-heading">
<h3 class="panel-title">
<a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion" href="#collapseTwo">
Collapsible Group Item #2
</a>
</h3>
</div>
<div id="collapseTwo" class="accordion-body collapse">
<div class="accordion-inner">
...
<div id="collapseTwo" class="panel-collapse collapse">
<div class="panel-body">
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
</div>
</div>
</div>
<div class="accordion-group">
<div class="accordion-heading">
<a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion2" href="#collapseThree">
<div class="panel">
<div class="panel-heading">
<h3 class="panel-title">
<a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion" href="#collapseThree">
Collapsible Group Item #3
</a>
</h3>
</div>
<div id="collapseThree" class="accordion-body collapse">
<div class="accordion-inner">
...
<div id="collapseThree" class="panel-collapse collapse">
<div class="panel-body">
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
</div>
</div>
</div>
@ -1613,13 +1625,13 @@ $('#myCollapsible').on('hidden.bs.collapse', function () {
</ol>
<div class="carousel-inner">
<div class="item active">
<img data-src="holder.js/900x500/auto/#777:#555/text:First slide" alt="First slide">
<img src="data:image/png;base64," data-src="holder.js/900x500/auto/#777:#555/text:First slide" alt="First slide">
</div>
<div class="item">
<img data-src="holder.js/900x500/auto/#666:#444/text:Second slide" alt="Second slide">
<img src="data:image/png;base64," data-src="holder.js/900x500/auto/#666:#444/text:Second slide" alt="Second slide">
</div>
<div class="item">
<img data-src="holder.js/900x500/auto/#555:#333/text:Third slide" alt="Third slide">
<img src="data:image/png;base64," data-src="holder.js/900x500/auto/#555:#333/text:Third slide" alt="Third slide">
</div>
</div>
<a class="left carousel-control" href="#carousel-example-generic" data-slide="prev">
@ -1675,21 +1687,21 @@ $('#myCollapsible').on('hidden.bs.collapse', function () {
</ol>
<div class="carousel-inner">
<div class="item active">
<img data-src="holder.js/900x500/auto/#777:#777" alt="">
<img data-src="holder.js/900x500/auto/#777:#777" src="data:image/png;base64," alt="First slide image">
<div class="carousel-caption">
<h3>First slide label</h3>
<p>Nulla vitae elit libero, a pharetra augue mollis interdum.</p>
</div>
</div>
<div class="item">
<img data-src="holder.js/900x500/auto/#666:#666" alt="">
<img data-src="holder.js/900x500/auto/#666:#666" src="data:image/png;base64," alt="Second slide image">
<div class="carousel-caption">
<h3>Second slide label</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>
</div>
<div class="item">
<img data-src="holder.js/900x500/auto/#555:#5555" alt="">
<img data-src="holder.js/900x500/auto/#555:#5555" src="data:image/png;base64," alt="Third slide image">
<div class="carousel-caption">
<h3>Third slide label</h3>
<p>Praesent commodo cursus magna, vel scelerisque nisl consectetur.</p>
@ -1706,7 +1718,7 @@ $('#myCollapsible').on('hidden.bs.collapse', function () {
</div><!-- /example -->
{% highlight html %}
<div class="item active">
<img src="..." alt="">
<img src="..." alt="...">
<div class="carousel-caption">
<h3>...</h3>
<p>...</p>
@ -1769,7 +1781,7 @@ $('.carousel').carousel()
<h4>.carousel(options)</h4>
<p>Initializes the carousel with an optional options <code>object</code> and starts cycling through items.</p>
{% highlight html %}
{% highlight js %}
$('.carousel').carousel({
interval: 2000
})

View File

@ -48,7 +48,7 @@
this.$element.trigger(startEvent)
if (startEvent.isDefaultPrevented()) return
var actives = this.$parent && this.$parent.find('> .accordion-group > .in')
var actives = this.$parent && this.$parent.find('> .panel > .in')
if (actives && actives.length) {
var hasData = actives.data('bs.collapse')

View File

@ -1,31 +0,0 @@
//
// Accordion
// --------------------------------------------------
// Parent container
.accordion {
margin-bottom: @line-height-computed;
}
// Group == heading + body
.accordion-group {
margin-bottom: 2px;
border: 1px solid @accordion-border-color;
border-radius: @border-radius-base;
}
.accordion-heading {
border-bottom: 0;
.accordion-toggle {
display: block;
padding: 8px 15px;
cursor: pointer;
}
}
// Inner needs the styles because you can't animate properly with any styles on the element
.accordion-inner {
padding: 9px 15px;
border-top: 1px solid @accordion-border-color;
}

1
less/bootstrap.less vendored
View File

@ -55,7 +55,6 @@
@import "labels.less";
@import "badges.less";
@import "progress-bars.less";
@import "accordion.less";
@import "carousel.less";
@import "jumbotron.less";

View File

@ -55,8 +55,13 @@
}
// Prevent double borders when buttons are next to each other
.btn-group .btn + .btn {
.btn-group {
.btn + .btn,
.btn + .btn-group,
.btn-group + .btn,
.btn-group + .btn-group {
margin-left: -1px;
}
}
// Optional: Group multiple button groups together for a toolbar
@ -163,26 +168,58 @@
// Vertical button groups
// ----------------------
.btn-group-vertical > .btn {
.btn-group-vertical {
> .btn,
> .btn-group {
display: block;
float: none;
width: 100%;
max-width: 100%;
+ .btn {
}
// Clear floats so dropdown menus can be properly placed
> .btn-group {
.clearfix();
> .btn {
float: none;
}
}
> .btn + .btn,
> .btn + .btn-group,
> .btn-group + .btn,
> .btn-group + .btn-group {
margin-top: -1px;
margin-left: 0;
}
}
.btn-group-vertical .btn {
.btn-group-vertical > .btn {
&:not(:first-child):not(:last-child) {
border-radius: 0;
}
&:first-child:not(:last-child) {
border-top-right-radius: @border-radius-base;
.border-bottom-radius(0);
}
&:last-child:not(:first-child) {
border-bottom-left-radius: @border-radius-base;
.border-top-radius(0);
}
}
.btn-group-vertical > .btn-group:not(:first-child):not(:last-child) > .btn {
border-radius: 0;
}
.btn-group-vertical > .btn-group:first-child {
> .btn:last-child,
> .dropdown-toggle {
.border-bottom-radius(0);
}
}
.btn-group-vertical > .btn-group:last-child > .btn:first-child {
.border-top-radius(0);
}
// Justified button groups

View File

@ -38,6 +38,7 @@
padding: 5px 0;
margin: 2px 0 0; // override default ul
list-style: none;
font-size: @font-size-base;
background-color: @dropdown-bg;
border: 1px solid @dropdown-fallback-border; // IE8 fallback
border: 1px solid @dropdown-border;

View File

@ -208,43 +208,13 @@ input[type="number"] {
}
// Form control sizing
//
// Relative text size, padding, and border-radii changes for form controls. For
// horizontal sizing, wrap controls in the predefined grid classes. `<select>`
// element gets special love because it's special, and that's a fact!
.input-sm {
.input-size(@input-height-large; @padding-large-vertical; @padding-large-horizontal; @font-size-large; @line-height-large; @border-radius-large);
}
.input-lg {
height: @input-height-large;
padding: @padding-large-vertical @padding-large-horizontal;
font-size: @font-size-large;
line-height: @line-height-large;
border-radius: @border-radius-large;
}
.input-sm {
height: @input-height-small;
padding: @padding-small-vertical @padding-small-horizontal;
font-size: @font-size-small;
line-height: @line-height-small;
border-radius: @border-radius-small;
}
select {
&.input-lg {
height: @input-height-large;
line-height: @input-height-large;
}
&.input-sm {
height: @input-height-small;
line-height: @input-height-small;
}
}
textarea {
&.input-lg,
&.input-sm {
height: auto;
}
.input-size(@input-height-small; @padding-small-vertical; @padding-small-horizontal; @font-size-small; @line-height-small; @border-radius-small);
}

View File

@ -335,6 +335,14 @@
color: @heading-text-color;
background-color: @heading-bg-color;
border-color: @heading-border;
+ .panel-collapse .panel-body {
border-top-color: @border;
}
}
.panel-footer {
+ .panel-collapse .panel-body {
border-bottom-color: @border;
}
}
}
@ -393,6 +401,30 @@
border-radius: @border-radius;
}
// Pagination
// -------------------------
.pagination-size(@padding-vertical; @padding-horizontal; @font-size; @border-radius) {
> li {
> a,
> span {
padding: @padding-vertical @padding-horizontal;
font-size: @font-size;
}
&:first-child {
> a,
> span {
.border-left-radius(@border-radius);
}
}
&:last-child {
> a,
> span {
.border-right-radius(@border-radius);
}
}
}
}
// Labels
// -------------------------
.label-variant(@color) {
@ -636,3 +668,26 @@
.box-shadow(~"inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px @{color-rgba}");
}
}
// Form control sizing
//
// Relative text size, padding, and border-radii changes for form controls. For
// horizontal sizing, wrap controls in the predefined grid classes. `<select>`
// element gets special love because it's special, and that's a fact!
.input-size(@input-height; @padding-vertical; @padding-horizontal; @font-size; @line-height; @border-radius) {
height: @input-height;
padding: @padding-vertical @padding-horizontal;
font-size: @font-size;
line-height: @line-height;
border-radius: @border-radius;
select& {
height: @input-height;
line-height: @input-height;
}
textarea& {
height: auto;
}
}

View File

@ -63,46 +63,10 @@
// Large
.pagination-lg {
> li {
> a,
> span {
padding: @padding-large-vertical @padding-large-horizontal;
font-size: @font-size-large;
}
&:first-child {
> a,
> span {
.border-left-radius(@border-radius-large);
}
}
&:last-child {
> a,
> span {
.border-right-radius(@border-radius-large);
}
}
}
.pagination-size(@padding-large-vertical; @padding-large-horizontal; @font-size-large; @border-radius-large);
}
// Small
.pagination-sm {
> li {
> a,
> span {
padding: @padding-small-vertical @padding-small-horizontal;
font-size: @font-size-small;
}
&:first-child {
> a,
> span {
.border-left-radius(@border-radius-small);
}
}
&:last-child {
> a,
> span {
.border-right-radius(@border-radius-small);
}
}
}
.pagination-size(@padding-small-vertical; @padding-small-horizontal; @font-size-small; @border-radius-small);
}

View File

@ -5,14 +5,18 @@
// Base class
.panel {
padding: 15px;
margin-bottom: 20px;
margin-bottom: @line-height-computed;
background-color: @panel-bg;
border: 1px solid @panel-border;
border-radius: @panel-border-radius;
.box-shadow(0 1px 1px rgba(0,0,0,.05));
}
// Panel contents
.panel-body {
padding: 15px;
}
// List groups in panels
//
// By default, space out list group content from panel headings to account for
@ -20,7 +24,7 @@
.panel {
.list-group {
margin: 15px -15px -15px;
margin-bottom: 0;
.list-group-item {
border-width: 1px 0;
@ -38,7 +42,6 @@
}
// Collapse space between when there's no additional content.
.panel-heading + .list-group {
margin-top: -15px;
.list-group-item:first-child {
border-top-width: 0;
}
@ -46,7 +49,6 @@
// Optional heading
.panel-heading {
margin: -15px -15px 15px;
padding: 10px 15px;
background-color: @panel-heading-bg;
border-bottom: 1px solid @panel-border;
@ -65,13 +67,49 @@
// Optional footer (stays gray in every modifier class)
.panel-footer {
margin: 15px -15px -15px;
padding: 10px 15px;
background-color: @panel-footer-bg;
border-top: 1px solid @panel-border;
.border-bottom-radius(@panel-border-radius - 1);
}
// Collapsable panels (aka, accordion)
//
// Wrap a series of panels in `.panel-group` to turn them into an accordion with
// the help of our collapse JavaScript plugin.
.panel-group {
// Tighten up margin so it's only between panels
.panel {
margin-bottom: 0;
border-radius: @panel-border-radius;
overflow: hidden; // crop contents when collapsed
+ .panel {
margin-top: 5px;
}
}
.panel-heading {
border-bottom: 0;
+ .panel-collapse .panel-body {
border-top: 1px solid @panel-border;
}
}
.panel-footer {
border-top: 0;
+ .panel-collapse .panel-body {
border-bottom: 1px solid @panel-border;
}
}
// New subcomponent for wrapping collapsable content for proper animations
.panel-collapse {
}
}
// Contextual variations
.panel-primary {
.panel-variant(@panel-primary-border; @panel-primary-text; @panel-primary-heading-bg; @panel-primary-border);

View File

@ -25,6 +25,8 @@
, "grunt-contrib-uglify": "~0.2.2"
, "grunt-contrib-qunit": "~0.2.2"
, "grunt-contrib-watch": "~0.5.1"
, "grunt-html-validation": "git://github.com/praveenvijayan/grunt-html-validation.git"
, "grunt-jekyll": "~0.3.8"
, "grunt-recess": "~0.3.3"
, "browserstack-runner": "~0.0.11"
}