0
0
mirror of https://github.com/twbs/bootstrap.git synced 2025-02-05 03:52:21 +01:00

Merge branch '3.0.0-wip' into gh-pages

This commit is contained in:
Mark Otto 2013-08-02 19:45:57 -07:00
commit 5abdcb3e71
30 changed files with 603 additions and 420 deletions

View File

@ -85,7 +85,6 @@
<a href="#alerts">Alerts</a> <a href="#alerts">Alerts</a>
<ul class="nav"> <ul class="nav">
<li><a href="#alerts-default">Default alert</a></li> <li><a href="#alerts-default">Default alert</a></li>
<li><a href="#alerts-block">Block alerts</a></li>
<li><a href="#alerts-alternatives">Contextual alternatives</a></li> <li><a href="#alerts-alternatives">Contextual alternatives</a></li>
<li><a href="#alerts-links">Links in alerts</a></li> <li><a href="#alerts-links">Links in alerts</a></li>
</ul> </ul>

View File

@ -27,6 +27,20 @@ body {
border-color: #563d7c; border-color: #563d7c;
} }
/* Homepage button */
.btn-outline {
color: #fff;
background-color: transparent;
border-color: #cdbfe3;
}
.btn-outline:hover,
.btn-outline:focus,
.btn-outline:active {
color: #563d7c;
background-color: #fff;
border-color: #fff;
}
/* Temp CSS until RC2 */ /* Temp CSS until RC2 */
.bs-customize-placeholder { .bs-customize-placeholder {
margin-bottom: -100px; margin-bottom: -100px;
@ -75,8 +89,21 @@ body {
color: #555; color: #555;
} }
.bs-docs-home .bs-old-docs { .bs-docs-home .bs-old-docs {
padding-top: 0;
padding-bottom: 0;
text-align: center; text-align: center;
border-top: 1px solid #e5e5e5; color: inherit;
background-color: transparent;
border-color: transparent;
}
.bs-docs-home .bs-old-docs a {
color: #fff;
}
/* Homepage */
.bs-docs-home {
color: #cdbfe3;
background-color: #563d7c;
} }
@ -91,10 +118,11 @@ body {
.bs-masthead h1 { .bs-masthead h1 {
font-size: 50px; font-size: 50px;
line-height: 1; line-height: 1;
color: #fff;
} }
/* Download button */ /* Download button */
.bs-masthead .btn-bs { .bs-masthead .btn-outline {
margin-top: 5px; margin-top: 5px;
margin-bottom: 5px; margin-bottom: 5px;
padding: 18px 24px; padding: 18px 24px;
@ -120,6 +148,9 @@ body {
.bs-masthead-links li + li { .bs-masthead-links li + li {
margin-left: 20px; margin-left: 20px;
} }
.bs-masthead-links a {
color: #fff;
}
@ -796,8 +827,8 @@ input.focused {
/* Tweak display of docs jumbotrons */ /* Tweak display of docs jumbotrons */
.bs-masthead { .bs-masthead {
padding-top: 100px; padding-top: 140px;
padding-bottom: 100px; padding-bottom: 140px;
} }
.bs-masthead h1 { .bs-masthead h1 {
font-size: 100px; font-size: 100px;

View File

@ -203,8 +203,8 @@ base_url: "../"
<div class="bs-example"> <div class="bs-example">
<div class="btn-group btn-group-justified"> <div class="btn-group btn-group-justified">
<a href="#" class="btn btn-default">Left</a> <a href="#" class="btn btn-default">Left</a>
<a href="#" class="btn btn-default">Right</a>
<a href="#" class="btn btn-default">Middle</a> <a href="#" class="btn btn-default">Middle</a>
<a href="#" class="btn btn-default">Right</a>
</div> </div>
</div> </div>
{% highlight html %} {% highlight html %}
@ -782,6 +782,7 @@ base_url: "../"
</div> </div>
{% endhighlight %} {% endhighlight %}
</div>
@ -1812,23 +1813,6 @@ body { padding-bottom: 70px; }
<button type="button" class="close" data-dismiss="alert">&times;</button> <button type="button" class="close" data-dismiss="alert">&times;</button>
<strong>Warning!</strong> Best check yo self, you're not looking too good. <strong>Warning!</strong> Best check yo self, you're not looking too good.
</div> </div>
{% endhighlight %}
<h3 id="alerts-block">Block alerts</h3>
<p>For longer messages, increase the padding on the top and bottom of the alert wrapper by adding <code>.alert-block</code>.</p>
<div class="bs-example">
<div class="alert alert-block">
<button type="button" class="close" data-dismiss="alert">&times;</button>
<h4>Warning!</h4>
<p>Best check yo self, you're not looking too good. Nulla vitae elit libero, a pharetra augue. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.</p>
</div>
</div>
{% highlight html %}
<div class="alert alert-block">
<button type="button" class="close" data-dismiss="alert">&times;</button>
<h4>Warning!</h4>
<p>...</p>
</div>
{% endhighlight %} {% endhighlight %}
<h3 id="alerts-alternatives">Contextual alternatives</h3> <h3 id="alerts-alternatives">Contextual alternatives</h3>
@ -2366,7 +2350,7 @@ body { padding-bottom: 70px; }
<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> <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>
<!-- List group --> <!-- List group -->
<ul class="list-group list-group-flush"> <ul class="list-group">
<li class="list-group-item">Cras justo odio</li> <li class="list-group-item">Cras justo odio</li>
<li class="list-group-item">Dapibus ac facilisis in</li> <li class="list-group-item">Dapibus ac facilisis in</li>
<li class="list-group-item">Morbi leo risus</li> <li class="list-group-item">Morbi leo risus</li>
@ -2382,7 +2366,7 @@ body { padding-bottom: 70px; }
<p>...</p> <p>...</p>
<!-- List group --> <!-- List group -->
<ul class="list-group list-group-flush"> <ul class="list-group">
<li class="list-group-item">Cras justo odio</li> <li class="list-group-item">Cras justo odio</li>
<li class="list-group-item">Dapibus ac facilisis in</li> <li class="list-group-item">Dapibus ac facilisis in</li>
<li class="list-group-item">Morbi leo risus</li> <li class="list-group-item">Morbi leo risus</li>

View File

@ -263,32 +263,32 @@ base_url: "../"
<p>Build on the previous example by creating even more dynamic and powerful layouts with tablet <code>.col-sm-*</code> classes.</p> <p>Build on the previous example by creating even more dynamic and powerful layouts with tablet <code>.col-sm-*</code> classes.</p>
<div class="bs-docs-grid"> <div class="bs-docs-grid">
<div class="row show-grid"> <div class="row show-grid">
<div class="col-12 col-sm-8 col-lg-8">.col-12 .col-lg-8</div> <div class="col-12 col-sm-8 col-lg-8">.col-12 .col-sm-8 .col-lg-8</div>
<div class="col-6 col-sm-4 col-lg-4">.col-6 .col-lg-4</div> <div class="col-6 col-sm-4 col-lg-4">.col-6 .col-sm-4 .col-lg-4</div>
</div> </div>
<div class="row show-grid"> <div class="row show-grid">
<div class="col-6 col-sm-4 col-lg-4">.col-6 .col-lg-4</div> <div class="col-6 col-sm-4 col-lg-4">.col-6 .col-sm-4 .col-lg-4</div>
<div class="col-6 col-sm-4 col-lg-4">.col-6 .col-lg-4</div> <div class="col-6 col-sm-4 col-lg-4">.col-6 .col-sm-4 .col-lg-4</div>
<div class="col-6 col-sm-4 col-lg-4">.col-6 .col-lg-4</div> <div class="col-6 col-sm-4 col-lg-4">.col-6 .col-sm-4 .col-lg-4</div>
</div> </div>
<div class="row show-grid"> <div class="row show-grid">
<div class="col-6 col-sm-6 col-lg-6">.col-6 .col-lg-6</div> <div class="col-6 col-sm-6 col-lg-6">.col-6 .col-sm-6 .col-lg-6</div>
<div class="col-6 col-sm-6 col-lg-6">.col-6 .col-lg-6</div> <div class="col-6 col-sm-6 col-lg-6">.col-6 .col-sm-6 .col-lg-6</div>
</div> </div>
</div> </div>
{% highlight html %} {% highlight html %}
<div class="row"> <div class="row">
<div class="col-12 col-sm-8 col-lg-8">.col-12 .col-lg-8</div> <div class="col-12 col-sm-8 col-lg-8">.col-12 .col-sm-8 .col-lg-8</div>
<div class="col-6 col-sm-4 col-lg-4">.col-6 .col-lg-4</div> <div class="col-6 col-sm-4 col-lg-4">.col-6 .col-sm-4 .col-lg-4</div>
</div> </div>
<div class="row"> <div class="row">
<div class="col-6 col-sm-4 col-lg-4">.col-6 .col-lg-4</div> <div class="col-6 col-sm-4 col-lg-4">.col-6 .col-sm-4 .col-lg-4</div>
<div class="col-6 col-sm-4 col-lg-4">.col-6 .col-lg-4</div> <div class="col-6 col-sm-4 col-lg-4">.col-6 .col-sm-4 .col-lg-4</div>
<div class="col-6 col-sm-4 col-lg-4">.col-6 .col-lg-4</div> <div class="col-6 col-sm-4 col-lg-4">.col-6 .col-sm-4 .col-lg-4</div>
</div> </div>
<div class="row"> <div class="row">
<div class="col-6 col-sm-6 col-lg-6">.col-6 .col-lg-6</div> <div class="col-6 col-sm-6 col-lg-6">.col-6 .col-sm-6 .col-lg-6</div>
<div class="col-6 col-sm-6 col-lg-6">.col-6 .col-lg-6</div> <div class="col-6 col-sm-6 col-lg-6">.col-6 .col-sm-6 .col-lg-6</div>
</div> </div>
{% endhighlight %} {% endhighlight %}
@ -299,31 +299,31 @@ base_url: "../"
</div> </div>
<h3 id="grid-offsetting">Offsetting columns</h3> <h3 id="grid-offsetting">Offsetting columns</h3>
<p>Move columns to the right using <code>.col-offset-*</code> classes. These classes increase the left margin of a column by <code>*</code> columns. For example, <code>.col-offset-4</code> moves <code>.col-lg-4</code> over four columns.</p> <p>Move columns to the right using <code>.col-lg-offset-*</code> classes. These classes increase the left margin of a column by <code>*</code> columns. For example, <code>.col-lg-offset-4</code> moves <code>.col-lg-4</code> over four columns.</p>
<div class="bs-docs-grid"> <div class="bs-docs-grid">
<div class="row show-grid"> <div class="row show-grid">
<div class="col-lg-4">4</div> <div class="col-lg-4">4</div>
<div class="col-lg-4 col-offset-4">4 offset 4</div> <div class="col-lg-4 col-lg-offset-4">4 offset 4</div>
</div><!-- /row --> </div><!-- /row -->
<div class="row show-grid"> <div class="row show-grid">
<div class="col-lg-3 col-offset-3">3 offset 3</div> <div class="col-lg-3 col-lg-offset-3">3 offset 3</div>
<div class="col-lg-3 col-offset-3">3 offset 3</div> <div class="col-lg-3 col-lg-offset-3">3 offset 3</div>
</div><!-- /row --> </div><!-- /row -->
<div class="row show-grid"> <div class="row show-grid">
<div class="col-lg-6 col-offset-3">6 offset 3</div> <div class="col-lg-6 col-lg-offset-3">6 offset 3</div>
</div><!-- /row --> </div><!-- /row -->
</div> </div>
{% highlight html %} {% highlight html %}
<div class="row"> <div class="row">
<div class="col-lg-4">...</div> <div class="col-lg-4">...</div>
<div class="col-lg-4 col-offset-4">...</div> <div class="col-lg-4 col-lg-offset-4">...</div>
</div> </div>
<div class="row"> <div class="row">
<div class="col-lg-3 col-offset-3">3 offset 3</div> <div class="col-lg-3 col-lg-offset-3">3 offset 3</div>
<div class="col-lg-3 col-offset-3">3 offset 3</div> <div class="col-lg-3 col-lg-offset-3">3 offset 3</div>
</div> </div>
<div class="row"> <div class="row">
<div class="col-lg-6 col-offset-3">...</div> <div class="col-lg-6 col-lg-offset-3">...</div>
</div> </div>
{% endhighlight %} {% endhighlight %}
@ -360,16 +360,16 @@ base_url: "../"
{% endhighlight %} {% endhighlight %}
<h3 id="grid-column-ordering">Column ordering</h3> <h3 id="grid-column-ordering">Column ordering</h3>
<p>Easily change the order of our built-in grid columns with <code>.col-push-*</code> and <code>.col-pull-*</code> modifier classes.</p> <p>Easily change the order of our built-in grid columns with <code>.col-lg-push-*</code> and <code>.col-lg-pull-*</code> modifier classes.</p>
<div class="row show-grid"> <div class="row show-grid">
<div class="col-lg-9 col-push-3">9</div> <div class="col-lg-9 col-lg-push-3">9</div>
<div class="col-lg-3 col-pull-9">3</div> <div class="col-lg-3 col-lg-pull-9">3</div>
</div> </div>
{% highlight html %} {% highlight html %}
<div class="row"> <div class="row">
<div class="col-lg-9 col-push-3">9</div> <div class="col-lg-9 col-lg-push-3">9</div>
<div class="col-lg-3 col-pull-9">3</div> <div class="col-lg-3 col-lg-pull-9">3</div>
</div> </div>
{% endhighlight %} {% endhighlight %}
@ -1302,11 +1302,19 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
<label for="inputPassword" class="col-lg-2 control-label">Password</label> <label for="inputPassword" class="col-lg-2 control-label">Password</label>
<div class="col-lg-10"> <div class="col-lg-10">
<input type="password" class="form-control" id="inputPassword" placeholder="Password"> <input type="password" class="form-control" id="inputPassword" placeholder="Password">
</div>
</div>
<div class="form-group">
<div class="col-offset-2 col-lg-10">
<div class="checkbox"> <div class="checkbox">
<label> <label>
<input type="checkbox"> Remember me <input type="checkbox"> Remember me
</label> </label>
</div> </div>
</div>
</div>
<div class="form-group">
<div class="col-offset-2 col-lg-10">
<button type="submit" class="btn btn-default">Sign in</button> <button type="submit" class="btn btn-default">Sign in</button>
</div> </div>
</div> </div>
@ -1323,11 +1331,19 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
<label for="inputPassword" class="col-lg-2 control-label">Password</label> <label for="inputPassword" class="col-lg-2 control-label">Password</label>
<div class="col-lg-10"> <div class="col-lg-10">
<input type="password" class="form-control" id="inputPassword" placeholder="Password"> <input type="password" class="form-control" id="inputPassword" placeholder="Password">
</div>
</div>
<div class="form-group">
<div class="col-offset-2 col-lg-10">
<div class="checkbox"> <div class="checkbox">
<label> <label>
<input type="checkbox"> Remember me <input type="checkbox"> Remember me
</label> </label>
</div> </div>
</div>
</div>
<div class="form-group">
<div class="col-offset-2 col-lg-10">
<button type="submit" class="btn btn-default">Sign in</button> <button type="submit" class="btn btn-default">Sign in</button>
</div> </div>
</div> </div>
@ -1536,7 +1552,7 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
{% endhighlight %} {% endhighlight %}
<h3 id="forms-validation">Validation states</h3> <h3 id="forms-validation">Validation states</h3>
<p>Bootstrap includes validation styles for error, warning, and success states on from controls. To use, add <code>.has-warning</code>, <code>.has-error</code>, or <code>.has-success</code> to the parent element. Any <code>.control-label</code>, <code>.form-control</code>, and <code>.help-block</code> within that element will receive the validation styles.</li> <p>Bootstrap includes validation styles for error, warning, and success states on form controls. To use, add <code>.has-warning</code>, <code>.has-error</code>, or <code>.has-success</code> to the parent element. Any <code>.control-label</code>, <code>.form-control</code>, and <code>.help-block</code> within that element will receive the validation styles.</li>
<form class="bs-example"> <form class="bs-example">
<div class="form-group has-warning"> <div class="form-group has-warning">
@ -1592,7 +1608,7 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
</form> </form>
{% highlight html %} {% highlight html %}
<input class="form-control input-large" type="text" placeholder=".input-large"> <input class="form-control input-large" type="text" placeholder=".input-large">
<input class="form-control"type="text" placeholder="Default input"> <input class="form-control" type="text" placeholder="Default input">
<input class="form-control input-small" type="text" placeholder=".input-small"> <input class="form-control input-small" type="text" placeholder=".input-small">
<select class="form-control input-large">...</select> <select class="form-control input-large">...</select>

378
dist/css/bootstrap.css vendored
View File

@ -931,72 +931,105 @@ pre code {
.col-sm-12 { .col-sm-12 {
width: 100%; width: 100%;
} }
.col-push-1 { .col-sm-push-1 {
left: 8.333333333333332%; left: 8.333333333333332%;
} }
.col-push-2 { .col-sm-push-2 {
left: 16.666666666666664%; left: 16.666666666666664%;
} }
.col-push-3 { .col-sm-push-3 {
left: 25%; left: 25%;
} }
.col-push-4 { .col-sm-push-4 {
left: 33.33333333333333%; left: 33.33333333333333%;
} }
.col-push-5 { .col-sm-push-5 {
left: 41.66666666666667%; left: 41.66666666666667%;
} }
.col-push-6 { .col-sm-push-6 {
left: 50%; left: 50%;
} }
.col-push-7 { .col-sm-push-7 {
left: 58.333333333333336%; left: 58.333333333333336%;
} }
.col-push-8 { .col-sm-push-8 {
left: 66.66666666666666%; left: 66.66666666666666%;
} }
.col-push-9 { .col-sm-push-9 {
left: 75%; left: 75%;
} }
.col-push-10 { .col-sm-push-10 {
left: 83.33333333333334%; left: 83.33333333333334%;
} }
.col-push-11 { .col-sm-push-11 {
left: 91.66666666666666%; left: 91.66666666666666%;
} }
.col-pull-1 { .col-sm-pull-1 {
right: 8.333333333333332%; right: 8.333333333333332%;
} }
.col-pull-2 { .col-sm-pull-2 {
right: 16.666666666666664%; right: 16.666666666666664%;
} }
.col-pull-3 { .col-sm-pull-3 {
right: 25%; right: 25%;
} }
.col-pull-4 { .col-sm-pull-4 {
right: 33.33333333333333%; right: 33.33333333333333%;
} }
.col-pull-5 { .col-sm-pull-5 {
right: 41.66666666666667%; right: 41.66666666666667%;
} }
.col-pull-6 { .col-sm-pull-6 {
right: 50%; right: 50%;
} }
.col-pull-7 { .col-sm-pull-7 {
right: 58.333333333333336%; right: 58.333333333333336%;
} }
.col-pull-8 { .col-sm-pull-8 {
right: 66.66666666666666%; right: 66.66666666666666%;
} }
.col-pull-9 { .col-sm-pull-9 {
right: 75%; right: 75%;
} }
.col-pull-10 { .col-sm-pull-10 {
right: 83.33333333333334%; right: 83.33333333333334%;
} }
.col-pull-11 { .col-sm-pull-11 {
right: 91.66666666666666%; right: 91.66666666666666%;
} }
.col-sm-offset-1 {
margin-left: 8.333333333333332%;
}
.col-sm-offset-2 {
margin-left: 16.666666666666664%;
}
.col-sm-offset-3 {
margin-left: 25%;
}
.col-sm-offset-4 {
margin-left: 33.33333333333333%;
}
.col-sm-offset-5 {
margin-left: 41.66666666666667%;
}
.col-sm-offset-6 {
margin-left: 50%;
}
.col-sm-offset-7 {
margin-left: 58.333333333333336%;
}
.col-sm-offset-8 {
margin-left: 66.66666666666666%;
}
.col-sm-offset-9 {
margin-left: 75%;
}
.col-sm-offset-10 {
margin-left: 83.33333333333334%;
}
.col-sm-offset-11 {
margin-left: 91.66666666666666%;
}
} }
@media (min-width: 992px) { @media (min-width: 992px) {
@ -1053,37 +1086,103 @@ pre code {
.col-lg-12 { .col-lg-12 {
width: 100%; width: 100%;
} }
.col-offset-1 { .col-lg-push-1 {
left: 8.333333333333332%;
}
.col-lg-push-2 {
left: 16.666666666666664%;
}
.col-lg-push-3 {
left: 25%;
}
.col-lg-push-4 {
left: 33.33333333333333%;
}
.col-lg-push-5 {
left: 41.66666666666667%;
}
.col-lg-push-6 {
left: 50%;
}
.col-lg-push-7 {
left: 58.333333333333336%;
}
.col-lg-push-8 {
left: 66.66666666666666%;
}
.col-lg-push-9 {
left: 75%;
}
.col-lg-push-10 {
left: 83.33333333333334%;
}
.col-lg-push-11 {
left: 91.66666666666666%;
}
.col-lg-pull-1 {
right: 8.333333333333332%;
}
.col-lg-pull-2 {
right: 16.666666666666664%;
}
.col-lg-pull-3 {
right: 25%;
}
.col-lg-pull-4 {
right: 33.33333333333333%;
}
.col-lg-pull-5 {
right: 41.66666666666667%;
}
.col-lg-pull-6 {
right: 50%;
}
.col-lg-pull-7 {
right: 58.333333333333336%;
}
.col-lg-pull-8 {
right: 66.66666666666666%;
}
.col-lg-pull-9 {
right: 75%;
}
.col-lg-pull-10 {
right: 83.33333333333334%;
}
.col-lg-pull-11 {
right: 91.66666666666666%;
}
.col-lg-offset-1 {
margin-left: 8.333333333333332%; margin-left: 8.333333333333332%;
} }
.col-offset-2 { .col-lg-offset-2 {
margin-left: 16.666666666666664%; margin-left: 16.666666666666664%;
} }
.col-offset-3 { .col-lg-offset-3 {
margin-left: 25%; margin-left: 25%;
} }
.col-offset-4 { .col-lg-offset-4 {
margin-left: 33.33333333333333%; margin-left: 33.33333333333333%;
} }
.col-offset-5 { .col-lg-offset-5 {
margin-left: 41.66666666666667%; margin-left: 41.66666666666667%;
} }
.col-offset-6 { .col-lg-offset-6 {
margin-left: 50%; margin-left: 50%;
} }
.col-offset-7 { .col-lg-offset-7 {
margin-left: 58.333333333333336%; margin-left: 58.333333333333336%;
} }
.col-offset-8 { .col-lg-offset-8 {
margin-left: 66.66666666666666%; margin-left: 66.66666666666666%;
} }
.col-offset-9 { .col-lg-offset-9 {
margin-left: 75%; margin-left: 75%;
} }
.col-offset-10 { .col-lg-offset-10 {
margin-left: 83.33333333333334%; margin-left: 83.33333333333334%;
} }
.col-offset-11 { .col-lg-offset-11 {
margin-left: 91.66666666666666%; margin-left: 91.66666666666666%;
} }
} }
@ -1354,8 +1453,8 @@ input[type="number"]::-webkit-inner-spin-button {
.form-control { .form-control {
display: block; display: block;
width: 100%; width: 100%;
height: 38px; height: 34px;
padding: 8px 12px; padding: 6px 12px;
font-size: 14px; font-size: 14px;
line-height: 1.428571429; line-height: 1.428571429;
color: #555555; color: #555555;
@ -1439,9 +1538,10 @@ textarea.form-control {
} }
.input-large { .input-large {
height: 56px; height: 45px;
padding: 14px 16px; padding: 10px 16px;
font-size: 18px; font-size: 18px;
line-height: 1.33;
border-radius: 6px; border-radius: 6px;
} }
@ -1449,12 +1549,13 @@ textarea.form-control {
height: 30px; height: 30px;
padding: 5px 10px; padding: 5px 10px;
font-size: 12px; font-size: 12px;
line-height: 1.5;
border-radius: 3px; border-radius: 3px;
} }
select.input-large { select.input-large {
height: 56px; height: 45px;
line-height: 56px; line-height: 45px;
} }
select.input-small { select.input-small {
@ -1546,9 +1647,65 @@ textarea.input-small {
color: #737373; color: #737373;
} }
.form-inline .form-control,
.form-inline .radio,
.form-inline .checkbox {
display: inline-block;
}
.form-inline .radio,
.form-inline .checkbox {
margin-top: 0;
margin-bottom: 0;
}
.form-horizontal .control-label,
.form-horizontal .radio-inline,
.form-horizontal .checkbox-inline {
padding-top: 9px;
}
.form-horizontal .form-group:before,
.form-horizontal .form-group:after {
display: table;
content: " ";
}
.form-horizontal .form-group:after {
clear: both;
}
.form-horizontal .form-group:before,
.form-horizontal .form-group:after {
display: table;
content: " ";
}
.form-horizontal .form-group:after {
clear: both;
}
@media (min-width: 768px) {
.form-horizontal .form-group {
margin-right: -15px;
margin-left: -15px;
}
}
.form-horizontal .form-group .row {
margin-right: -15px;
margin-left: -15px;
}
@media (min-width: 768px) {
.form-horizontal .control-label {
text-align: right;
}
}
.btn { .btn {
display: inline-block; display: inline-block;
padding: 8px 12px; padding: 6px 12px;
margin-bottom: 0; margin-bottom: 0;
font-size: 14px; font-size: 14px;
font-weight: 500; font-weight: 500;
@ -1833,8 +1990,9 @@ fieldset[disabled] .btn-link:focus {
} }
.btn-large { .btn-large {
padding: 14px 16px; padding: 10px 16px;
font-size: 18px; font-size: 18px;
line-height: 1.33;
border-radius: 6px; border-radius: 6px;
} }
@ -1894,6 +2052,7 @@ input[type="button"].btn-block {
} }
.input-group { .input-group {
position: relative;
display: table; display: table;
border-collapse: separate; border-collapse: separate;
} }
@ -1929,7 +2088,7 @@ input[type="button"].btn-block {
} }
.input-group-addon { .input-group-addon {
padding: 8px 12px; padding: 6px 12px;
font-size: 14px; font-size: 14px;
font-weight: normal; font-weight: normal;
line-height: 1.428571429; line-height: 1.428571429;
@ -1949,7 +2108,7 @@ input[type="button"].btn-block {
} }
.input-group-addon.input-large { .input-group-addon.input-large {
padding: 14px 16px; padding: 10px 16px;
font-size: 18px; font-size: 18px;
border-radius: 6px; border-radius: 6px;
} }
@ -2003,60 +2162,6 @@ input[type="button"].btn-block {
z-index: 2; z-index: 2;
} }
.form-inline .form-control,
.form-inline .radio,
.form-inline .checkbox {
display: inline-block;
}
.form-inline .radio,
.form-inline .checkbox {
margin-top: 0;
margin-bottom: 0;
}
.form-horizontal .control-label {
padding-top: 9px;
}
.form-horizontal .form-group:before,
.form-horizontal .form-group:after {
display: table;
content: " ";
}
.form-horizontal .form-group:after {
clear: both;
}
.form-horizontal .form-group:before,
.form-horizontal .form-group:after {
display: table;
content: " ";
}
.form-horizontal .form-group:after {
clear: both;
}
@media (min-width: 768px) {
.form-horizontal .form-group {
margin-right: -15px;
margin-left: -15px;
}
}
.form-horizontal .form-group .row {
margin-right: -15px;
margin-left: -15px;
}
@media (min-width: 768px) {
.form-horizontal .control-label {
text-align: right;
}
}
.caret { .caret {
display: inline-block; display: inline-block;
width: 0; width: 0;
@ -2069,6 +2174,10 @@ input[type="button"].btn-block {
content: ""; content: "";
} }
.dropdown {
position: relative;
}
.dropdown-menu { .dropdown-menu {
position: absolute; position: absolute;
top: 100%; top: 100%;
@ -2277,6 +2386,23 @@ a.list-group-item.active .list-group-item-text {
box-shadow: 0 1px 1px rgba(0, 0, 0, 0.05); box-shadow: 0 1px 1px rgba(0, 0, 0, 0.05);
} }
.panel .list-group {
margin: 15px -15px -15px;
}
.panel .list-group .list-group-item {
border-width: 1px 0;
}
.panel .list-group .list-group-item:first-child {
border-top-right-radius: 0;
border-top-left-radius: 0;
}
.panel .list-group .list-group-item:last-child {
border-bottom: 0;
}
.panel-heading { .panel-heading {
padding: 10px 15px; padding: 10px 15px;
margin: -15px -15px 15px; margin: -15px -15px 15px;
@ -2352,23 +2478,6 @@ a.list-group-item.active .list-group-item-text {
border-color: #bce8f1; border-color: #bce8f1;
} }
.list-group-flush {
margin: 15px -15px -15px;
}
.list-group-flush .list-group-item {
border-width: 1px 0;
}
.list-group-flush .list-group-item:first-child {
border-top-right-radius: 0;
border-top-left-radius: 0;
}
.list-group-flush .list-group-item:last-child {
border-bottom: 0;
}
.well { .well {
min-height: 20px; min-height: 20px;
padding: 19px; padding: 19px;
@ -2798,8 +2907,8 @@ button.close {
} }
.navbar-form { .navbar-form {
margin-top: 6px; margin-top: 8px;
margin-bottom: 6px; margin-bottom: 8px;
} }
.navbar-form .form-control, .navbar-form .form-control,
@ -2970,10 +3079,12 @@ button.close {
} }
.navbar-btn { .navbar-btn {
margin-top: 6px; margin-top: 8px;
} }
.navbar-text { .navbar-text {
float: left;
padding: 0 15px;
margin-top: 15px; margin-top: 15px;
margin-bottom: 15px; margin-bottom: 15px;
} }
@ -3251,7 +3362,7 @@ button.close {
.pagination-large > li > a, .pagination-large > li > a,
.pagination-large > li > span { .pagination-large > li > span {
padding: 14px 16px; padding: 10px 16px;
font-size: 18px; font-size: 18px;
} }
@ -3750,7 +3861,7 @@ button.close {
} }
.alert { .alert {
padding: 10px 35px 10px 15px; padding: 15px 35px 15px 15px;
margin-bottom: 20px; margin-bottom: 20px;
color: #c09853; color: #c09853;
background-color: #fcf8e3; background-color: #fcf8e3;
@ -3768,7 +3879,7 @@ button.close {
} }
.alert .alert-link { .alert .alert-link {
font-weight: 500; font-weight: bold;
color: #a47e3c; color: #a47e3c;
} }
@ -3779,6 +3890,15 @@ button.close {
color: inherit; color: inherit;
} }
.alert > p,
.alert > ul {
margin-bottom: 0;
}
.alert > p + p {
margin-top: 5px;
}
.alert-success { .alert-success {
color: #468847; color: #468847;
background-color: #dff0d8; background-color: #dff0d8;
@ -3821,20 +3941,6 @@ button.close {
color: #2d6987; color: #2d6987;
} }
.alert-block {
padding-top: 15px;
padding-bottom: 15px;
}
.alert-block > p,
.alert-block > ul {
margin-bottom: 0;
}
.alert-block p + p {
margin-top: 5px;
}
.thumbnail, .thumbnail,
.img-thumbnail { .img-thumbnail {
padding: 4px; padding: 4px;
@ -3917,7 +4023,7 @@ a.thumbnail:focus {
color: #ffffff; color: #ffffff;
text-align: center; text-align: center;
white-space: nowrap; white-space: nowrap;
vertical-align: middle; vertical-align: baseline;
background-color: #999999; background-color: #999999;
border-radius: .25em; border-radius: .25em;
} }
@ -3976,7 +4082,7 @@ a.thumbnail:focus {
color: #ffffff; color: #ffffff;
text-align: center; text-align: center;
white-space: nowrap; white-space: nowrap;
vertical-align: middle; vertical-align: baseline;
background-color: #999999; background-color: #999999;
border-radius: 10px; border-radius: 10px;
} }

File diff suppressed because one or more lines are too long

18
dist/js/bootstrap.js vendored
View File

@ -219,7 +219,9 @@ if (!jQuery) { throw new Error("Bootstrap requires jQuery") }
var $parent = this.$element.closest('[data-toggle="buttons"]') var $parent = this.$element.closest('[data-toggle="buttons"]')
if ($parent.length) { if ($parent.length) {
var $input = this.$element.find('input').prop('checked', !this.$element.hasClass('active')) var $input = this.$element.find('input')
.prop('checked', !this.$element.hasClass('active'))
.trigger('change')
if ($input.prop('type') === 'radio') $parent.find('.active').removeClass('active') if ($input.prop('type') === 'radio') $parent.find('.active').removeClass('active')
} }
@ -235,7 +237,7 @@ if (!jQuery) { throw new Error("Bootstrap requires jQuery") }
$.fn.button = function (option) { $.fn.button = function (option) {
return this.each(function () { return this.each(function () {
var $this = $(this) var $this = $(this)
var data = $this.data('button') var data = $this.data('bs.button')
var options = typeof option == 'object' && option var options = typeof option == 'object' && option
if (!data) $this.data('bs.button', (data = new Button(this, options))) if (!data) $this.data('bs.button', (data = new Button(this, options)))
@ -533,7 +535,7 @@ if (!jQuery) { throw new Error("Bootstrap requires jQuery") }
this.$element.trigger(startEvent) this.$element.trigger(startEvent)
if (startEvent.isDefaultPrevented()) return if (startEvent.isDefaultPrevented()) return
var actives = this.$parent && this.$parent.find('> .accordion-group > .in') var actives = this.$parent && this.$parent.find('> .accordion-group > .in')
if (actives && actives.length) { if (actives && actives.length) {
var hasData = actives.data('bs.collapse') var hasData = actives.data('bs.collapse')
@ -1313,6 +1315,8 @@ if (!jQuery) { throw new Error("Bootstrap requires jQuery") }
var $tip = this.tip() var $tip = this.tip()
var e = $.Event('hide.bs.' + this.type) var e = $.Event('hide.bs.' + this.type)
function complete() { $tip.detach() }
this.$element.trigger(e) this.$element.trigger(e)
if (e.isDefaultPrevented()) return if (e.isDefaultPrevented()) return
@ -1321,9 +1325,9 @@ if (!jQuery) { throw new Error("Bootstrap requires jQuery") }
$.support.transition && this.$tip.hasClass('fade') ? $.support.transition && this.$tip.hasClass('fade') ?
$tip $tip
.one($.support.transition.end, $tip.detach) .one($.support.transition.end, complete)
.emulateTransitionEnd(150) : .emulateTransitionEnd(150) :
$tip.detach() complete()
this.$element.trigger('hidden.bs.' + this.type) this.$element.trigger('hidden.bs.' + this.type)
@ -1509,10 +1513,6 @@ if (!jQuery) { throw new Error("Bootstrap requires jQuery") }
return this.$tip return this.$tip
} }
Popover.prototype.destroy = function () {
this.hide().$element.off('.' + this.type).removeData(this.type)
}
// POPOVER PLUGIN DEFINITION // POPOVER PLUGIN DEFINITION
// ========================= // =========================

File diff suppressed because one or more lines are too long

View File

@ -112,7 +112,7 @@ bootstrap/
<!-- Include all compiled plugins (below), or include individual files as needed --> <!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="js/bootstrap.min.js"></script> <script src="js/bootstrap.min.js"></script>
<!-- Optionally enable responsive features in IE8 --> <!-- Optionally enable responsive features in IE8. Respond.js can be obtained from https://github.com/scottjehl/Respond -->
<script src="js/respond.js"></script> <script src="js/respond.js"></script>
</body> </body>
</html> </html>

View File

@ -9,7 +9,7 @@ base_url: "./"
<h1>Bootstrap 3</h1> <h1>Bootstrap 3</h1>
<p class="lead">Sleek, intuitive, and powerful mobile-first front-end framework for faster and easier web development.</p> <p class="lead">Sleek, intuitive, and powerful mobile-first front-end framework for faster and easier web development.</p>
<p> <p>
<a href="{{ site.download_dist }}" class="btn btn-bs btn-large" onclick="_gaq.push(['_trackEvent', 'Jumbotron actions', 'Download', 'Download 3.0.0 RC1']);">Download Bootstrap</a> <a href="{{ site.download_dist }}" class="btn btn-outline btn-large" onclick="_gaq.push(['_trackEvent', 'Jumbotron actions', 'Download', 'Download 3.0.0 RC1']);">Download Bootstrap</a>
</p> </p>
</div> </div>
</div> </div>

View File

@ -24,7 +24,7 @@ base_url: "../"
<div class="bs-callout bs-callout-danger"> <div class="bs-callout bs-callout-danger">
<h4>Plugin dependencies</h4> <h4>Plugin dependencies</h4>
<p>Some plugins and CSS components depend on other plugins. If you include plugins individually, make sure to check for these dependencies in the docs.</p> <p>Some plugins and CSS components depend on other plugins. If you include plugins individually, make sure to check for these dependencies in the docs. Also note that all plugins depend on jQuery (this means jQuery must be included <strong>before</strong> the plugin files).</p>
</div> </div>
<h3 id="js-data-attrs">Data attributes</h3> <h3 id="js-data-attrs">Data attributes</h3>
@ -168,7 +168,7 @@ $('#myModal').on('show.bs.modal', function (e) {
<hr> <hr>
<h4>Overflowing text to show optional scrollbar</h4> <h4>Overflowing text to show scroll behavior</h4>
<p>Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.</p> <p>Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.</p>
<p>Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.</p> <p>Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.</p>
<p>Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.</p> <p>Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.</p>
@ -262,7 +262,7 @@ $('#myModal').on('show.bs.modal', function (e) {
<td>remote</td> <td>remote</td>
<td>path</td> <td>path</td>
<td>false</td> <td>false</td>
<td><p>If a remote URL is provided, content will be loaded via jQuery's <code>load</code> method and injected into the <code>.modal-body</code>. If you're using the data api, you may alternatively use the <code>href</code> tag to specify the remote source. An example of this is shown below:</p> <td><p>If a remote URL is provided, content will be loaded via jQuery's <code>load</code> method and injected into the <code>.modal-body</code>. If you're using the data api, you may alternatively use the <code>href</code> attribute to specify the remote source. An example of this is shown below:</p>
{% highlight html %} {% highlight html %}
<a data-toggle="modal" href="remote.html" data-target="#modal">Click me</a> <a data-toggle="modal" href="remote.html" data-target="#modal">Click me</a>
{% endhighlight %} {% endhighlight %}
@ -397,7 +397,7 @@ $('#myModal').on('hidden.bs.modal', function () {
<ul class="nav nav-pills"> <ul class="nav nav-pills">
<li class="active"><a href="#">Regular link</a></li> <li class="active"><a href="#">Regular link</a></li>
<li class="dropdown"> <li class="dropdown">
<a class="dropdown-toggle" id="drop4" role="button" data-toggle="dropdown" href="#">Dropdown <b class="caret"></b></a> <a id="drop4" role="button" data-toggle="dropdown" href="#">Dropdown <b class="caret"></b></a>
<ul id="menu1" class="dropdown-menu" role="menu" aria-labelledby="drop4"> <ul id="menu1" class="dropdown-menu" role="menu" aria-labelledby="drop4">
<li role="presentation"><a role="menuitem" tabindex="-1" href="http://twitter.com/fat">Action</a></li> <li role="presentation"><a role="menuitem" tabindex="-1" href="http://twitter.com/fat">Action</a></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="http://twitter.com/fat">Another action</a></li> <li role="presentation"><a role="menuitem" tabindex="-1" href="http://twitter.com/fat">Another action</a></li>
@ -407,7 +407,7 @@ $('#myModal').on('hidden.bs.modal', function () {
</ul> </ul>
</li> </li>
<li class="dropdown"> <li class="dropdown">
<a class="dropdown-toggle" id="drop5" role="button" data-toggle="dropdown" href="#">Dropdown 2 <b class="caret"></b></a> <a id="drop5" role="button" data-toggle="dropdown" href="#">Dropdown 2 <b class="caret"></b></a>
<ul id="menu2" class="dropdown-menu" role="menu" aria-labelledby="drop5"> <ul id="menu2" class="dropdown-menu" role="menu" aria-labelledby="drop5">
<li role="presentation"><a role="menuitem" tabindex="-1" href="http://twitter.com/fat">Action</a></li> <li role="presentation"><a role="menuitem" tabindex="-1" href="http://twitter.com/fat">Action</a></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="http://twitter.com/fat">Another action</a></li> <li role="presentation"><a role="menuitem" tabindex="-1" href="http://twitter.com/fat">Another action</a></li>
@ -417,7 +417,7 @@ $('#myModal').on('hidden.bs.modal', function () {
</ul> </ul>
</li> </li>
<li class="dropdown"> <li class="dropdown">
<a class="dropdown-toggle" id="drop6" role="button" data-toggle="dropdown" href="#">Dropdown 3 <b class="caret"></b></a> <a id="drop6" role="button" data-toggle="dropdown" href="#">Dropdown 3 <b class="caret"></b></a>
<ul id="menu3" class="dropdown-menu" role="menu" aria-labelledby="drop6"> <ul id="menu3" class="dropdown-menu" role="menu" aria-labelledby="drop6">
<li role="presentation"><a role="menuitem" tabindex="-1" href="http://twitter.com/fat">Action</a></li> <li role="presentation"><a role="menuitem" tabindex="-1" href="http://twitter.com/fat">Action</a></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="http://twitter.com/fat">Another action</a></li> <li role="presentation"><a role="menuitem" tabindex="-1" href="http://twitter.com/fat">Another action</a></li>
@ -436,7 +436,7 @@ $('#myModal').on('hidden.bs.modal', function () {
<p>Add <code>data-toggle="dropdown"</code> to a link or button to toggle a dropdown.</p> <p>Add <code>data-toggle="dropdown"</code> to a link or button to toggle a dropdown.</p>
{% highlight html %} {% highlight html %}
<div class="dropdown"> <div class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">Dropdown trigger</a> <a data-toggle="dropdown" href="#">Dropdown trigger</a>
<ul class="dropdown-menu" role="menu" aria-labelledby="dLabel"> <ul class="dropdown-menu" role="menu" aria-labelledby="dLabel">
... ...
</ul> </ul>
@ -445,7 +445,7 @@ $('#myModal').on('hidden.bs.modal', function () {
<p>To keep URLs intact, use the <code>data-target</code> attribute instead of <code>href="#"</code>.</p> <p>To keep URLs intact, use the <code>data-target</code> attribute instead of <code>href="#"</code>.</p>
{% highlight html %} {% highlight html %}
<div class="dropdown"> <div class="dropdown">
<a class="dropdown-toggle" id="dLabel" role="button" data-toggle="dropdown" data-target="#" href="/page.html"> <a id="dLabel" role="button" data-toggle="dropdown" data-target="#" href="/page.html">
Dropdown <span class="caret"></span> Dropdown <span class="caret"></span>
</a> </a>
<ul class="dropdown-menu" role="menu" aria-labelledby="dLabel"> <ul class="dropdown-menu" role="menu" aria-labelledby="dLabel">
@ -531,7 +531,7 @@ $('.dropdown-toggle').dropdown()
<h3>Via JavaScript</h3> <h3>Via JavaScript</h3>
<p>Call the scrollspy via JavaScript:</p> <p>Call the scrollspy via JavaScript:</p>
{% highlight js %} {% highlight js %}
$('#navbar-example').scrollspy() $('#navbar-example').scrollspy(options)
{% endhighlight %} {% endhighlight %}
<div class="bs-callout bs-callout-danger"> <div class="bs-callout bs-callout-danger">
@ -802,7 +802,7 @@ $('#example').tooltip(options)
<td>title</td> <td>title</td>
<td>string | function</td> <td>string | function</td>
<td>''</td> <td>''</td>
<td>default title value if <code>title</code> tag isn't present</td> <td>default title value if <code>title</code> attribute isn't present</td>
</tr> </tr>
<tr> <tr>
<td>trigger</td> <td>trigger</td>
@ -1480,7 +1480,7 @@ $(".collapse").collapse()
<td>parent</td> <td>parent</td>
<td>selector</td> <td>selector</td>
<td>false</td> <td>false</td>
<td>If selector then all collapsible elements under the specified parent will be closed when this collapsible item is shown. (similar to traditional accordion behavior)</td> <td>If selector then all collapsible elements under the specified parent will be closed when this collapsible item is shown. (similar to traditional accordion behavior - this dependent on the <code>accordion-group</code> class)</td>
</tr> </tr>
<tr> <tr>
<td>toggle</td> <td>toggle</td>

View File

@ -56,7 +56,9 @@
var $parent = this.$element.closest('[data-toggle="buttons"]') var $parent = this.$element.closest('[data-toggle="buttons"]')
if ($parent.length) { if ($parent.length) {
var $input = this.$element.find('input').prop('checked', !this.$element.hasClass('active')) var $input = this.$element.find('input')
.prop('checked', !this.$element.hasClass('active'))
.trigger('change')
if ($input.prop('type') === 'radio') $parent.find('.active').removeClass('active') if ($input.prop('type') === 'radio') $parent.find('.active').removeClass('active')
} }
@ -72,7 +74,7 @@
$.fn.button = function (option) { $.fn.button = function (option) {
return this.each(function () { return this.each(function () {
var $this = $(this) var $this = $(this)
var data = $this.data('button') var data = $this.data('bs.button')
var options = typeof option == 'object' && option var options = typeof option == 'object' && option
if (!data) $this.data('bs.button', (data = new Button(this, options))) if (!data) $this.data('bs.button', (data = new Button(this, options)))

View File

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

View File

@ -80,10 +80,6 @@
return this.$tip return this.$tip
} }
Popover.prototype.destroy = function () {
this.hide().$element.off('.' + this.type).removeData(this.type)
}
// POPOVER PLUGIN DEFINITION // POPOVER PLUGIN DEFINITION
// ========================= // =========================

View File

@ -165,9 +165,9 @@ $(function () {
.appendTo('#qunit-fixture') .appendTo('#qunit-fixture')
.find('[data-toggle="dropdown"]') .find('[data-toggle="dropdown"]')
.dropdown() .dropdown()
stop() stop()
dropdown dropdown
.parent('.dropdown') .parent('.dropdown')
.bind('show.bs.dropdown', function () { .bind('show.bs.dropdown', function () {
@ -177,7 +177,7 @@ $(function () {
ok(true, 'hide was called') ok(true, 'hide was called')
start() start()
}) })
dropdown.click() dropdown.click()
$(document.body).click() $(document.body).click()
}) })
@ -199,9 +199,9 @@ $(function () {
.appendTo('#qunit-fixture') .appendTo('#qunit-fixture')
.find('[data-toggle="dropdown"]') .find('[data-toggle="dropdown"]')
.dropdown() .dropdown()
stop() stop()
dropdown dropdown
.parent('.dropdown') .parent('.dropdown')
.bind('shown.bs.dropdown', function () { .bind('shown.bs.dropdown', function () {
@ -211,7 +211,7 @@ $(function () {
ok(true, 'hide was called') ok(true, 'hide was called')
start() start()
}) })
dropdown.click() dropdown.click()
$(document.body).click() $(document.body).click()
}) })

View File

@ -249,6 +249,8 @@
var $tip = this.tip() var $tip = this.tip()
var e = $.Event('hide.bs.' + this.type) var e = $.Event('hide.bs.' + this.type)
function complete() { $tip.detach() }
this.$element.trigger(e) this.$element.trigger(e)
if (e.isDefaultPrevented()) return if (e.isDefaultPrevented()) return
@ -257,9 +259,9 @@
$.support.transition && this.$tip.hasClass('fade') ? $.support.transition && this.$tip.hasClass('fade') ?
$tip $tip
.one($.support.transition.end, $tip.detach) .one($.support.transition.end, complete)
.emulateTransitionEnd(150) : .emulateTransitionEnd(150) :
$tip.detach() complete()
this.$element.trigger('hidden.bs.' + this.type) this.$element.trigger('hidden.bs.' + this.type)

View File

@ -7,7 +7,7 @@
// ------------------------- // -------------------------
.alert { .alert {
padding: 10px 35px 10px 15px; padding: 15px 35px 15px 15px;
margin-bottom: @line-height-computed; margin-bottom: @line-height-computed;
color: @alert-text; color: @alert-text;
background-color: @alert-bg; background-color: @alert-bg;
@ -26,7 +26,7 @@
} }
// Provide class for links that match alerts // Provide class for links that match alerts
.alert-link { .alert-link {
font-weight: 500; font-weight: bold;
color: darken(@alert-text, 10%); color: darken(@alert-text, 10%);
} }
@ -37,33 +37,26 @@
right: -21px; right: -21px;
color: inherit; color: inherit;
} }
// Improve alignment and spacing of inner content
> p,
> ul {
margin-bottom: 0;
}
> p + p {
margin-top: 5px;
}
} }
// Alternate styles // Alternate styles
// ------------------------- // -------------------------
.alert-success { .alert-success {
.alert-variant(@alert-success-bg, @alert-success-border, @alert-success-text); .alert-variant(@alert-success-bg; @alert-success-border; @alert-success-text);
} }
.alert-danger { .alert-danger {
.alert-variant(@alert-danger-bg, @alert-danger-border, @alert-danger-text); .alert-variant(@alert-danger-bg; @alert-danger-border; @alert-danger-text);
} }
.alert-info { .alert-info {
.alert-variant(@alert-info-bg, @alert-info-border, @alert-info-text); .alert-variant(@alert-info-bg; @alert-info-border; @alert-info-text);
}
// Block alerts
// -------------------------
.alert-block {
padding-top: 15px;
padding-bottom: 15px;
> p,
> ul {
margin-bottom: 0;
}
p + p {
margin-top: 5px;
}
} }

View File

@ -12,7 +12,7 @@
font-weight: bold; font-weight: bold;
color: @badge-color; color: @badge-color;
line-height: 1; line-height: 1;
vertical-align: middle; vertical-align: baseline;
white-space: nowrap; white-space: nowrap;
text-align: center; text-align: center;
background-color: @badge-bg; background-color: @badge-bg;

View File

@ -54,26 +54,26 @@
// -------------------------------------------------- // --------------------------------------------------
.btn-default { .btn-default {
.btn-pseudo-states(@btn-default-color, @btn-default-bg, @btn-default-border); .btn-pseudo-states(@btn-default-color; @btn-default-bg; @btn-default-border);
} }
.btn-primary { .btn-primary {
.btn-pseudo-states(@btn-primary-color, @btn-primary-bg, @btn-primary-border); .btn-pseudo-states(@btn-primary-color; @btn-primary-bg; @btn-primary-border);
} }
// Warning appears as orange // Warning appears as orange
.btn-warning { .btn-warning {
.btn-pseudo-states(@btn-warning-color, @btn-warning-bg, @btn-warning-border); .btn-pseudo-states(@btn-warning-color; @btn-warning-bg; @btn-warning-border);
} }
// Danger and error appear as red // Danger and error appear as red
.btn-danger { .btn-danger {
.btn-pseudo-states(@btn-danger-color, @btn-danger-bg, @btn-danger-border); .btn-pseudo-states(@btn-danger-color; @btn-danger-bg; @btn-danger-border);
} }
// Success appears as green // Success appears as green
.btn-success { .btn-success {
.btn-pseudo-states(@btn-success-color, @btn-success-bg, @btn-success-border); .btn-pseudo-states(@btn-success-color; @btn-success-bg; @btn-success-border);
} }
// Info appears as blue-green // Info appears as blue-green
.btn-info { .btn-info {
.btn-pseudo-states(@btn-info-color, @btn-info-bg, @btn-info-border); .btn-pseudo-states(@btn-info-color; @btn-info-bg; @btn-info-border);
} }
@ -123,6 +123,7 @@
.btn-large { .btn-large {
padding: @padding-large-vertical @padding-large-horizontal; padding: @padding-large-vertical @padding-large-horizontal;
font-size: @font-size-large; font-size: @font-size-large;
line-height: 1.33; // ensure even-numbered height of button next to large input
border-radius: @border-radius-large; border-radius: @border-radius-large;
} }
.btn-small, .btn-small,

View File

@ -17,6 +17,12 @@
content: ""; content: "";
} }
// The dropdown wrapper (div)
// --------------------------
.dropdown {
position: relative;
}
// The dropdown menu (ul) // The dropdown menu (ul)
// ---------------------- // ----------------------
.dropdown-menu { .dropdown-menu {

View File

@ -77,7 +77,7 @@ input[type="checkbox"]:focus {
// See https://github.com/twbs/bootstrap/issues/8350 for more. // See https://github.com/twbs/bootstrap/issues/8350 for more.
input[type="number"] { input[type="number"] {
&::-webkit-outer-spin-button, &::-webkit-outer-spin-button,
&::-webkit-inner-spin-button { &::-webkit-inner-spin-button {
height: auto; height: auto;
} }
} }
@ -222,12 +222,14 @@ input[type="number"] {
height: @input-height-large; height: @input-height-large;
padding: @padding-large-vertical @padding-large-horizontal; padding: @padding-large-vertical @padding-large-horizontal;
font-size: @font-size-large; font-size: @font-size-large;
line-height: @line-height-large;
border-radius: @border-radius-large; border-radius: @border-radius-large;
} }
.input-small { .input-small {
height: @input-height-small; height: @input-height-small;
padding: @padding-small-vertical @padding-small-horizontal; padding: @padding-small-vertical @padding-small-horizontal;
font-size: @font-size-small; font-size: @font-size-small;
line-height: @line-height-small;
border-radius: @border-radius-small; border-radius: @border-radius-small;
} }
@ -255,15 +257,15 @@ textarea {
// Warning // Warning
.has-warning { .has-warning {
.form-control-validation(@state-warning-text, @state-warning-text, @state-warning-bg); .form-control-validation(@state-warning-text; @state-warning-text; @state-warning-bg);
} }
// Error // Error
.has-error { .has-error {
.form-control-validation(@state-danger-text, @state-danger-text, @state-danger-bg); .form-control-validation(@state-danger-text; @state-danger-text; @state-danger-bg);
} }
// Success // Success
.has-success { .has-success {
.form-control-validation(@state-success-text, @state-success-text, @state-success-bg); .form-control-validation(@state-success-text; @state-success-text; @state-success-bg);
} }
@ -278,3 +280,47 @@ textarea {
margin-bottom: 10px; margin-bottom: 10px;
color: lighten(@text-color, 25%); // lighten the text some for contrast color: lighten(@text-color, 25%); // lighten the text some for contrast
} }
// Inline forms
//
// Make forms appear inline(-block).
.form-inline {
.form-control,
.radio,
.checkbox {
display: inline-block;
}
.radio,
.checkbox {
margin-top: 0;
margin-bottom: 0;
}
}
// Horizontal forms
//
// Horizontal forms are built on grid classes and allow you to create forms with
// labels on the left and inputs on the right.
.form-horizontal .control-label,
.form-horizontal .radio-inline,
.form-horizontal .checkbox-inline {
padding-top: 9px;
}
.form-horizontal {
.form-group {
.make-row();
}
}
// Only right align form labels here when the columns stop stacking
@media (min-width: @screen-tablet) {
.form-horizontal .control-label {
text-align: right;
}
}

View File

@ -125,29 +125,42 @@
.col-sm-12 { width: 100%; } .col-sm-12 { width: 100%; }
// Push and pull columns for source order changes // Push and pull columns for source order changes
.col-push-1 { left: percentage((1 / @grid-columns)); } .col-sm-push-1 { left: percentage((1 / @grid-columns)); }
.col-push-2 { left: percentage((2 / @grid-columns)); } .col-sm-push-2 { left: percentage((2 / @grid-columns)); }
.col-push-3 { left: percentage((3 / @grid-columns)); } .col-sm-push-3 { left: percentage((3 / @grid-columns)); }
.col-push-4 { left: percentage((4 / @grid-columns)); } .col-sm-push-4 { left: percentage((4 / @grid-columns)); }
.col-push-5 { left: percentage((5 / @grid-columns)); } .col-sm-push-5 { left: percentage((5 / @grid-columns)); }
.col-push-6 { left: percentage((6 / @grid-columns)); } .col-sm-push-6 { left: percentage((6 / @grid-columns)); }
.col-push-7 { left: percentage((7 / @grid-columns)); } .col-sm-push-7 { left: percentage((7 / @grid-columns)); }
.col-push-8 { left: percentage((8 / @grid-columns)); } .col-sm-push-8 { left: percentage((8 / @grid-columns)); }
.col-push-9 { left: percentage((9 / @grid-columns)); } .col-sm-push-9 { left: percentage((9 / @grid-columns)); }
.col-push-10 { left: percentage((10/ @grid-columns)); } .col-sm-push-10 { left: percentage((10/ @grid-columns)); }
.col-push-11 { left: percentage((11/ @grid-columns)); } .col-sm-push-11 { left: percentage((11/ @grid-columns)); }
.col-pull-1 { right: percentage((1 / @grid-columns)); } .col-sm-pull-1 { right: percentage((1 / @grid-columns)); }
.col-pull-2 { right: percentage((2 / @grid-columns)); } .col-sm-pull-2 { right: percentage((2 / @grid-columns)); }
.col-pull-3 { right: percentage((3 / @grid-columns)); } .col-sm-pull-3 { right: percentage((3 / @grid-columns)); }
.col-pull-4 { right: percentage((4 / @grid-columns)); } .col-sm-pull-4 { right: percentage((4 / @grid-columns)); }
.col-pull-5 { right: percentage((5 / @grid-columns)); } .col-sm-pull-5 { right: percentage((5 / @grid-columns)); }
.col-pull-6 { right: percentage((6 / @grid-columns)); } .col-sm-pull-6 { right: percentage((6 / @grid-columns)); }
.col-pull-7 { right: percentage((7 / @grid-columns)); } .col-sm-pull-7 { right: percentage((7 / @grid-columns)); }
.col-pull-8 { right: percentage((8 / @grid-columns)); } .col-sm-pull-8 { right: percentage((8 / @grid-columns)); }
.col-pull-9 { right: percentage((9 / @grid-columns)); } .col-sm-pull-9 { right: percentage((9 / @grid-columns)); }
.col-pull-10 { right: percentage((10/ @grid-columns)); } .col-sm-pull-10 { right: percentage((10/ @grid-columns)); }
.col-pull-11 { right: percentage((11/ @grid-columns)); } .col-sm-pull-11 { right: percentage((11/ @grid-columns)); }
// Offsets
.col-sm-offset-1 { margin-left: percentage((1 / @grid-columns)); }
.col-sm-offset-2 { margin-left: percentage((2 / @grid-columns)); }
.col-sm-offset-3 { margin-left: percentage((3 / @grid-columns)); }
.col-sm-offset-4 { margin-left: percentage((4 / @grid-columns)); }
.col-sm-offset-5 { margin-left: percentage((5 / @grid-columns)); }
.col-sm-offset-6 { margin-left: percentage((6 / @grid-columns)); }
.col-sm-offset-7 { margin-left: percentage((7 / @grid-columns)); }
.col-sm-offset-8 { margin-left: percentage((8 / @grid-columns)); }
.col-sm-offset-9 { margin-left: percentage((9 / @grid-columns)); }
.col-sm-offset-10 { margin-left: percentage((10/ @grid-columns)); }
.col-sm-offset-11 { margin-left: percentage((11/ @grid-columns)); }
} }
// Medium and large device columns (desktop and up) // Medium and large device columns (desktop and up)
@ -182,18 +195,43 @@
.col-lg-11 { width: percentage((11/ @grid-columns)); } .col-lg-11 { width: percentage((11/ @grid-columns)); }
.col-lg-12 { width: 100%; } .col-lg-12 { width: 100%; }
// Push and pull columns for source order changes
.col-lg-push-1 { left: percentage((1 / @grid-columns)); }
.col-lg-push-2 { left: percentage((2 / @grid-columns)); }
.col-lg-push-3 { left: percentage((3 / @grid-columns)); }
.col-lg-push-4 { left: percentage((4 / @grid-columns)); }
.col-lg-push-5 { left: percentage((5 / @grid-columns)); }
.col-lg-push-6 { left: percentage((6 / @grid-columns)); }
.col-lg-push-7 { left: percentage((7 / @grid-columns)); }
.col-lg-push-8 { left: percentage((8 / @grid-columns)); }
.col-lg-push-9 { left: percentage((9 / @grid-columns)); }
.col-lg-push-10 { left: percentage((10/ @grid-columns)); }
.col-lg-push-11 { left: percentage((11/ @grid-columns)); }
.col-lg-pull-1 { right: percentage((1 / @grid-columns)); }
.col-lg-pull-2 { right: percentage((2 / @grid-columns)); }
.col-lg-pull-3 { right: percentage((3 / @grid-columns)); }
.col-lg-pull-4 { right: percentage((4 / @grid-columns)); }
.col-lg-pull-5 { right: percentage((5 / @grid-columns)); }
.col-lg-pull-6 { right: percentage((6 / @grid-columns)); }
.col-lg-pull-7 { right: percentage((7 / @grid-columns)); }
.col-lg-pull-8 { right: percentage((8 / @grid-columns)); }
.col-lg-pull-9 { right: percentage((9 / @grid-columns)); }
.col-lg-pull-10 { right: percentage((10/ @grid-columns)); }
.col-lg-pull-11 { right: percentage((11/ @grid-columns)); }
// Offsets // Offsets
.col-offset-1 { margin-left: percentage((1 / @grid-columns)); } .col-lg-offset-1 { margin-left: percentage((1 / @grid-columns)); }
.col-offset-2 { margin-left: percentage((2 / @grid-columns)); } .col-lg-offset-2 { margin-left: percentage((2 / @grid-columns)); }
.col-offset-3 { margin-left: percentage((3 / @grid-columns)); } .col-lg-offset-3 { margin-left: percentage((3 / @grid-columns)); }
.col-offset-4 { margin-left: percentage((4 / @grid-columns)); } .col-lg-offset-4 { margin-left: percentage((4 / @grid-columns)); }
.col-offset-5 { margin-left: percentage((5 / @grid-columns)); } .col-lg-offset-5 { margin-left: percentage((5 / @grid-columns)); }
.col-offset-6 { margin-left: percentage((6 / @grid-columns)); } .col-lg-offset-6 { margin-left: percentage((6 / @grid-columns)); }
.col-offset-7 { margin-left: percentage((7 / @grid-columns)); } .col-lg-offset-7 { margin-left: percentage((7 / @grid-columns)); }
.col-offset-8 { margin-left: percentage((8 / @grid-columns)); } .col-lg-offset-8 { margin-left: percentage((8 / @grid-columns)); }
.col-offset-9 { margin-left: percentage((9 / @grid-columns)); } .col-lg-offset-9 { margin-left: percentage((9 / @grid-columns)); }
.col-offset-10 { margin-left: percentage((10/ @grid-columns)); } .col-lg-offset-10 { margin-left: percentage((10/ @grid-columns)); }
.col-offset-11 { margin-left: percentage((11/ @grid-columns)); } .col-lg-offset-11 { margin-left: percentage((11/ @grid-columns)); }
} }
// Large desktops and up // Large desktops and up

View File

@ -5,6 +5,7 @@
// Base styles // Base styles
// ------------------------- // -------------------------
.input-group { .input-group {
position: relative; // For dropdowns
display: table; display: table;
border-collapse: separate; // prevent input groups from inheriting border styles from table cells when placed within a table border-collapse: separate; // prevent input groups from inheriting border styles from table cells when placed within a table
@ -112,42 +113,3 @@
z-index: 2; z-index: 2;
} }
} }
// Inline forms
// --------------------------------------------------
.form-inline {
.form-control,
.radio,
.checkbox {
display: inline-block;
}
.radio,
.checkbox {
margin-top: 0;
margin-bottom: 0;
}
}
// Horizontal forms
// --------------------------------------------------
// Horizontal forms are built on grid classes.
.form-horizontal .control-label {
padding-top: 9px;
}
.form-horizontal {
.form-group {
.make-row();
}
}
// Only right align form labels here when the columns stop stacking
@media (min-width: @screen-tablet) {
.form-horizontal .control-label {
text-align: right;
}
}

View File

@ -11,7 +11,7 @@
color: @label-color; color: @label-color;
text-align: center; text-align: center;
white-space: nowrap; white-space: nowrap;
vertical-align: middle; vertical-align: baseline;
background-color: @gray-light; background-color: @gray-light;
border-radius: .25em; border-radius: .25em;

View File

@ -44,12 +44,12 @@
} }
// Sizing shortcuts // Sizing shortcuts
.size(@width, @height) { .size(@width; @height) {
width: @width; width: @width;
height: @height; height: @height;
} }
.square(@size) { .square(@size) {
.size(@size, @size); .size(@size; @size);
} }
// Placeholder text // Placeholder text
@ -138,17 +138,17 @@
-ms-transform: scale(@ratio); -ms-transform: scale(@ratio);
transform: scale(@ratio); transform: scale(@ratio);
} }
.translate(@x, @y) { .translate(@x; @y) {
-webkit-transform: translate(@x, @y); -webkit-transform: translate(@x, @y);
-ms-transform: translate(@x, @y); -ms-transform: translate(@x, @y);
transform: translate(@x, @y); transform: translate(@x, @y);
} }
.skew(@x, @y) { .skew(@x; @y) {
-webkit-transform: skew(@x, @y); -webkit-transform: skew(@x, @y);
-ms-transform: skewX(@x) skewY(@y); // See https://github.com/twbs/bootstrap/issues/4885 -ms-transform: skewX(@x) skewY(@y); // See https://github.com/twbs/bootstrap/issues/4885
transform: skew(@x, @y); transform: skew(@x, @y);
} }
.translate3d(@x, @y, @z) { .translate3d(@x; @y; @z) {
-webkit-transform: translate3d(@x, @y, @z); -webkit-transform: translate3d(@x, @y, @z);
transform: translate3d(@x, @y, @z); transform: translate3d(@x, @y, @z);
} }
@ -158,9 +158,9 @@
// Default value is `visible`, but can be changed to `hidden` // Default value is `visible`, but can be changed to `hidden`
// See git pull https://github.com/dannykeane/bootstrap.git backface-visibility for examples // See git pull https://github.com/dannykeane/bootstrap.git backface-visibility for examples
.backface-visibility(@visibility){ .backface-visibility(@visibility){
-webkit-backface-visibility: @visibility; -webkit-backface-visibility: @visibility;
-moz-backface-visibility: @visibility; -moz-backface-visibility: @visibility;
backface-visibility: @visibility; backface-visibility: @visibility;
} }
// Background clipping // Background clipping
@ -197,7 +197,7 @@
} }
// CSS3 Content Columns // CSS3 Content Columns
.content-columns(@column-count, @column-gap: @grid-gutter-width) { .content-columns(@column-count; @column-gap: @grid-gutter-width) {
-webkit-column-count: @column-count; -webkit-column-count: @column-count;
-moz-column-count: @column-count; -moz-column-count: @column-count;
column-count: @column-count; column-count: @column-count;
@ -259,14 +259,14 @@
filter: e(%("progid:DXImageTransform.Microsoft.gradient(startColorstr='%d', endColorstr='%d', GradientType=0)",argb(@start-color),argb(@end-color))); // IE9 and down filter: e(%("progid:DXImageTransform.Microsoft.gradient(startColorstr='%d', endColorstr='%d', GradientType=0)",argb(@start-color),argb(@end-color))); // IE9 and down
} }
.directional(@start-color: #555, @end-color: #333, @deg: 45deg) { .directional(@start-color: #555; @end-color: #333; @deg: 45deg) {
background-color: @end-color; background-color: @end-color;
background-repeat: repeat-x; background-repeat: repeat-x;
background-image: -webkit-linear-gradient(@deg, @start-color, @end-color); // Safari 5.1+, Chrome 10+ background-image: -webkit-linear-gradient(@deg, @start-color, @end-color); // Safari 5.1+, Chrome 10+
background-image: -moz-linear-gradient(@deg, @start-color, @end-color); // FF 3.6+ background-image: -moz-linear-gradient(@deg, @start-color, @end-color); // FF 3.6+
background-image: linear-gradient(@deg, @start-color, @end-color); // Standard, IE10 background-image: linear-gradient(@deg, @start-color, @end-color); // Standard, IE10
} }
.horizontal-three-colors(@start-color: #00b3ee, @mid-color: #7a43b6, @color-stop: 50%, @end-color: #c3325f) { .horizontal-three-colors(@start-color: #00b3ee; @mid-color: #7a43b6; @color-stop: 50%; @end-color: #c3325f) {
background-color: mix(@mid-color, @end-color, 80%); background-color: mix(@mid-color, @end-color, 80%);
background-image: -webkit-gradient(left, linear, 0 0, 0 100%, from(@start-color), color-stop(@color-stop, @mid-color), to(@end-color)); background-image: -webkit-gradient(left, linear, 0 0, 0 100%, from(@start-color), color-stop(@color-stop, @mid-color), to(@end-color));
background-image: -webkit-linear-gradient(left, @start-color, @mid-color @color-stop, @end-color); background-image: -webkit-linear-gradient(left, @start-color, @mid-color @color-stop, @end-color);
@ -276,7 +276,7 @@
filter: e(%("progid:DXImageTransform.Microsoft.gradient(startColorstr='%d', endColorstr='%d', GradientType=1)",argb(@start-color),argb(@end-color))); // IE9 and down, gets no color-stop at all for proper fallback filter: e(%("progid:DXImageTransform.Microsoft.gradient(startColorstr='%d', endColorstr='%d', GradientType=1)",argb(@start-color),argb(@end-color))); // IE9 and down, gets no color-stop at all for proper fallback
} }
.vertical-three-colors(@start-color: #00b3ee, @mid-color: #7a43b6, @color-stop: 50%, @end-color: #c3325f) { .vertical-three-colors(@start-color: #00b3ee; @mid-color: #7a43b6; @color-stop: 50%; @end-color: #c3325f) {
background-color: mix(@mid-color, @end-color, 80%); background-color: mix(@mid-color, @end-color, 80%);
background-image: -webkit-gradient(linear, 0 0, 0 100%, from(@start-color), color-stop(@color-stop, @mid-color), to(@end-color)); background-image: -webkit-gradient(linear, 0 0, 0 100%, from(@start-color), color-stop(@color-stop, @mid-color), to(@end-color));
background-image: -webkit-linear-gradient(@start-color, @mid-color @color-stop, @end-color); background-image: -webkit-linear-gradient(@start-color, @mid-color @color-stop, @end-color);
@ -285,7 +285,7 @@
background-repeat: no-repeat; background-repeat: no-repeat;
filter: e(%("progid:DXImageTransform.Microsoft.gradient(startColorstr='%d', endColorstr='%d', GradientType=0)",argb(@start-color),argb(@end-color))); // IE9 and down, gets no color-stop at all for proper fallback filter: e(%("progid:DXImageTransform.Microsoft.gradient(startColorstr='%d', endColorstr='%d', GradientType=0)",argb(@start-color),argb(@end-color))); // IE9 and down, gets no color-stop at all for proper fallback
} }
.radial(@inner-color: #555, @outer-color: #333) { .radial(@inner-color: #555; @outer-color: #333) {
background-color: @outer-color; background-color: @outer-color;
background-image: -webkit-gradient(radial, center center, 0, center center, 460, from(@inner-color), to(@outer-color)); background-image: -webkit-gradient(radial, center center, 0, center center, 460, from(@inner-color), to(@outer-color));
background-image: -webkit-radial-gradient(circle, @inner-color, @outer-color); background-image: -webkit-radial-gradient(circle, @inner-color, @outer-color);
@ -293,7 +293,7 @@
background-image: radial-gradient(circle, @inner-color, @outer-color); background-image: radial-gradient(circle, @inner-color, @outer-color);
background-repeat: no-repeat; background-repeat: no-repeat;
} }
.striped(@color: #555, @angle: 45deg) { .striped(@color: #555; @angle: 45deg) {
background-color: @color; background-color: @color;
background-image: -webkit-gradient(linear, 0 100%, 100% 0, color-stop(.25, rgba(255,255,255,.15)), color-stop(.25, transparent), color-stop(.5, transparent), color-stop(.5, rgba(255,255,255,.15)), color-stop(.75, rgba(255,255,255,.15)), color-stop(.75, transparent), to(transparent)); background-image: -webkit-gradient(linear, 0 100%, 100% 0, color-stop(.25, rgba(255,255,255,.15)), color-stop(.25, transparent), color-stop(.5, transparent), color-stop(.5, rgba(255,255,255,.15)), color-stop(.75, rgba(255,255,255,.15)), color-stop(.75, transparent), to(transparent));
background-image: -webkit-linear-gradient(@angle, rgba(255,255,255,.15) 25%, transparent 25%, transparent 50%, rgba(255,255,255,.15) 50%, rgba(255,255,255,.15) 75%, transparent 75%, transparent); background-image: -webkit-linear-gradient(@angle, rgba(255,255,255,.15) 25%, transparent 25%, transparent 50%, rgba(255,255,255,.15) 50%, rgba(255,255,255,.15) 75%, transparent 75%, transparent);
@ -316,7 +316,7 @@
// -------------------------------------------------- // --------------------------------------------------
// Short retina mixin for setting background-image and -size // Short retina mixin for setting background-image and -size
.img-retina(@file-1x, @file-2x, @width-1x, @height-1x) { .img-retina(@file-1x; @file-2x; @width-1x; @height-1x) {
background-image: url("@{file-1x}"); background-image: url("@{file-1x}");
@media @media
@ -347,7 +347,7 @@
// Alerts // Alerts
// ------------------------- // -------------------------
.alert-variant(@background, @border, @text-color) { .alert-variant(@background; @border; @text-color) {
background-color: @background; background-color: @background;
border-color: @border; border-color: @border;
color: @text-color; color: @text-color;
@ -363,7 +363,7 @@
// ------------------------- // -------------------------
// Easily pump out default styles, as well as :hover, :focus, :active, // Easily pump out default styles, as well as :hover, :focus, :active,
// and disabled options for all buttons // and disabled options for all buttons
.btn-pseudo-states(@color, @background, @border) { .btn-pseudo-states(@color; @background; @border) {
color: @color; color: @color;
background-color: @background; background-color: @background;
border-color: @border; border-color: @border;
@ -405,7 +405,7 @@
// Navbar vertical align // Navbar vertical align
// ------------------------- // -------------------------
// Vertically center elements in the navbar. // Vertically center elements in the navbar.
// Example: an element has a height of 30px, so write out `.navbarVerticalAlign(30px);` to calculate the appropriate top margin. // Example: an element has a height of 30px, so write out `.navbar-vertical-align(30px);` to calculate the appropriate top margin.
.navbar-vertical-align(@element-height) { .navbar-vertical-align(@element-height) {
margin-top: ((@navbar-height - @element-height) / 2); margin-top: ((@navbar-height - @element-height) / 2);
margin-bottom: ((@navbar-height - @element-height) / 2); margin-bottom: ((@navbar-height - @element-height) / 2);
@ -520,7 +520,7 @@
// Used in forms.less to generate the form validation CSS for warnings, errors, // Used in forms.less to generate the form validation CSS for warnings, errors,
// and successes. // and successes.
.form-control-validation(@text-color: #555, @border-color: #ccc, @background-color: #f5f5f5) { .form-control-validation(@text-color: #555; @border-color: #ccc; @background-color: #f5f5f5) {
// Color the label and help text // Color the label and help text
.help-block, .help-block,
.control-label { .control-label {

View File

@ -354,6 +354,8 @@
// Add a class to make any element properly align itself vertically within the navbars. // Add a class to make any element properly align itself vertically within the navbars.
.navbar-text { .navbar-text {
float: left;
padding: 0 @navbar-padding-horizontal;
.navbar-vertical-align(@line-height-computed); .navbar-vertical-align(@line-height-computed);
} }

View File

@ -69,10 +69,6 @@
} }
// Nav variations
// --------------------------------------------------
// Tabs // Tabs
// ------------------------- // -------------------------
@ -154,6 +150,10 @@
} }
} }
// Nav variations
// --------------------------------------------------
// Justified nav links // Justified nav links
// ------------------------- // -------------------------
@ -181,11 +181,9 @@
> .active > a { > .active > a {
border-bottom-color: @nav-tabs-justified-active-link-border-color; border-bottom-color: @nav-tabs-justified-active-link-border-color;
} }
} }
// Tabbable tabs // Tabbable tabs
// ------------------------- // -------------------------

View File

@ -6,7 +6,7 @@
padding-left: 0; padding-left: 0;
margin: @line-height-computed 0; margin: @line-height-computed 0;
border-radius: @border-radius-base; border-radius: @border-radius-base;
> li { > li {
display: inline; // Remove list-style and block-level defaults display: inline; // Remove list-style and block-level defaults
> a, > a,
@ -33,7 +33,7 @@
} }
} }
} }
> li > a:hover, > li > a:hover,
> li > a:focus, > li > a:focus,
> .active > a, > .active > a,
@ -45,7 +45,7 @@
color: @pagination-active-color; color: @pagination-active-color;
cursor: default; cursor: default;
} }
> .disabled { > .disabled {
> span, > span,
> a, > a,

View File

@ -11,6 +11,24 @@
border: 1px solid @panel-border; border: 1px solid @panel-border;
border-radius: @panel-border-radius; border-radius: @panel-border-radius;
.box-shadow(0 1px 1px rgba(0,0,0,.05)); .box-shadow(0 1px 1px rgba(0,0,0,.05));
// List groups in panels
.list-group {
margin: 15px -15px -15px;
.list-group-item {
border-width: 1px 0;
// Remove border radius for top one
&:first-child {
.border-top-radius(0);
}
// But keep it for the last one
&:last-child {
border-bottom: 0;
}
}
}
} }
// Optional heading // Optional heading
@ -82,21 +100,3 @@
border-color: @panel-info-border; border-color: @panel-info-border;
} }
} }
// List groups in panels
.list-group-flush {
margin: 15px -15px -15px;
.list-group-item {
border-width: 1px 0;
// Remove border radius for top one
&:first-child {
.border-top-radius(0);
}
// But keep it for the last one
&:last-child {
border-bottom: 0;
}
}
}

View File

@ -60,15 +60,18 @@
// ------------------------- // -------------------------
// Based on 14px font-size and 1.428 line-height (~20px to start) // Based on 14px font-size and 1.428 line-height (~20px to start)
@padding-base-vertical: 8px; @padding-base-vertical: 6px;
@padding-base-horizontal: 12px; @padding-base-horizontal: 12px;
@padding-large-vertical: 14px; @padding-large-vertical: 10px;
@padding-large-horizontal: 16px; @padding-large-horizontal: 16px;
@padding-small-vertical: 5px; @padding-small-vertical: 5px;
@padding-small-horizontal: 10px; @padding-small-horizontal: 10px;
@line-height-large: 1.33;
@line-height-small: 1.5;
@border-radius-base: 4px; @border-radius-base: 4px;
@border-radius-large: 6px; @border-radius-large: 6px;
@border-radius-small: 3px; @border-radius-small: 3px;
@ -132,8 +135,8 @@
@input-color-placeholder: @gray-light; @input-color-placeholder: @gray-light;
@input-height-base: (@line-height-computed + (@padding-base-vertical * 2) + 2); @input-height-base: (@line-height-computed + (@padding-base-vertical * 2) + 2);
@input-height-large: (ceil(@font-size-large * @line-height-base) + (@padding-large-vertical * 2) + 2); @input-height-large: (floor(@font-size-large * @line-height-large) + (@padding-large-vertical * 2) + 2);
@input-height-small: (ceil(@font-size-small * @line-height-base) + (@padding-small-vertical * 2) + 2); @input-height-small: (floor(@font-size-small * @line-height-small) + (@padding-small-vertical * 2) + 2);
@legend-border-color: #e5e5e5; @legend-border-color: #e5e5e5;
@ -174,6 +177,39 @@
@zindex-modal-background: 1040; @zindex-modal-background: 1040;
@zindex-modal: 1050; @zindex-modal: 1050;
// Media queries breakpoints
// --------------------------------------------------
// Tiny screen / phone
@screen-tiny: 480px;
@screen-phone: @screen-tiny;
// Small screen / tablet
@screen-small: 768px;
@screen-tablet: @screen-small;
// Medium screen / desktop
@screen-medium: 992px;
@screen-desktop: @screen-medium;
// So media queries don't overlap when required, provide a maximum
@screen-small-max: (@screen-medium - 1);
@screen-tablet-max: @screen-small-max;
// Large screen / wide desktop
@screen-large: 1200px;
@screen-large-desktop: @screen-large;
// Grid system
// --------------------------------------------------
// Number of columns in the grid system
@grid-columns: 12;
// Padding, to be divided by two and applied to the left and right of all columns
@grid-gutter-width: 30px;
// Point at which the navbar stops collapsing
@grid-float-breakpoint: @screen-tablet;
// Navbar // Navbar
// ------------------------- // -------------------------
@ -520,30 +556,6 @@
@component-offset-horizontal: 180px; @component-offset-horizontal: 180px;
// Media queries breakpoints
// --------------------------------------------------
// Tiny screen / phone
@screen-tiny: 480px;
@screen-phone: @screen-tiny;
// Small screen / tablet
@screen-small: 768px;
@screen-tablet: @screen-small;
// Medium screen / desktop
@screen-medium: 992px;
@screen-desktop: @screen-medium;
// So media queries don't overlap when required, provide a maximum
@screen-small-max: (@screen-medium - 1);
@screen-tablet-max: @screen-small-max;
// Large screen / wide desktop
@screen-large: 1200px;
@screen-large-desktop: @screen-large;
// Container sizes // Container sizes
// -------------------------------------------------- // --------------------------------------------------
@ -555,14 +567,3 @@
// Large screen / wide desktop // Large screen / wide desktop
@container-large-desktop: 1170px; @container-large-desktop: 1170px;
// Grid system
// --------------------------------------------------
// Number of columns in the grid system
@grid-columns: 12;
// Padding, to be divided by two and applied to the left and right of all columns
@grid-gutter-width: 30px;
// Point at which the navbar stops collapsing
@grid-float-breakpoint: @screen-tablet;