mirror of
https://github.com/twbs/bootstrap.git
synced 2024-09-24 12:07:18 +00:00
Merge branch '3.0.0-wip' of github.com:twbs/bootstrap into 3.0.0-wip
This commit is contained in:
fat
commit
e969d2ff18
@ -85,7 +85,6 @@
|
||||
<a href="#alerts">Alerts</a>
|
||||
<ul class="nav">
|
||||
<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-links">Links in alerts</a></li>
|
||||
</ul>
|
||||
|
||||
@ -27,6 +27,20 @@ body {
|
||||
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 */
|
||||
.bs-customize-placeholder {
|
||||
margin-bottom: -100px;
|
||||
@ -75,8 +89,21 @@ body {
|
||||
color: #555;
|
||||
}
|
||||
.bs-docs-home .bs-old-docs {
|
||||
padding-top: 0;
|
||||
padding-bottom: 0;
|
||||
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 {
|
||||
font-size: 50px;
|
||||
line-height: 1;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
/* Download button */
|
||||
.bs-masthead .btn-bs {
|
||||
.bs-masthead .btn-outline {
|
||||
margin-top: 5px;
|
||||
margin-bottom: 5px;
|
||||
padding: 18px 24px;
|
||||
@ -120,6 +148,9 @@ body {
|
||||
.bs-masthead-links li + li {
|
||||
margin-left: 20px;
|
||||
}
|
||||
.bs-masthead-links a {
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
|
||||
|
||||
@ -796,8 +827,8 @@ input.focused {
|
||||
|
||||
/* Tweak display of docs jumbotrons */
|
||||
.bs-masthead {
|
||||
padding-top: 100px;
|
||||
padding-bottom: 100px;
|
||||
padding-top: 140px;
|
||||
padding-bottom: 140px;
|
||||
}
|
||||
.bs-masthead h1 {
|
||||
font-size: 100px;
|
||||
|
||||
@ -203,8 +203,8 @@ base_url: "../"
|
||||
<div class="bs-example">
|
||||
<div class="btn-group btn-group-justified">
|
||||
<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">Right</a>
|
||||
</div>
|
||||
</div>
|
||||
{% highlight html %}
|
||||
@ -782,6 +782,7 @@ base_url: "../"
|
||||
</div>
|
||||
{% endhighlight %}
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
@ -1812,23 +1813,6 @@ body { padding-bottom: 70px; }
|
||||
<button type="button" class="close" data-dismiss="alert">×</button>
|
||||
<strong>Warning!</strong> Best check yo self, you're not looking too good.
|
||||
</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">×</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">×</button>
|
||||
<h4>Warning!</h4>
|
||||
<p>...</p>
|
||||
</div>
|
||||
{% endhighlight %}
|
||||
|
||||
<h3 id="alerts-alternatives">Contextual alternatives</h3>
|
||||
|
||||
60
css.html
60
css.html
@ -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>
|
||||
<div class="bs-docs-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-6 col-sm-4 col-lg-4">.col-6 .col-lg-4</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-sm-4 .col-lg-4</div>
|
||||
</div>
|
||||
<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-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-sm-4 .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 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-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-sm-6 .col-lg-6</div>
|
||||
</div>
|
||||
</div>
|
||||
{% highlight html %}
|
||||
<div class="row">
|
||||
<div class="col-12 col-sm-8 col-lg-8">.col-12 .col-lg-8</div>
|
||||
<div class="col-6 col-sm-4 col-lg-4">.col-6 .col-lg-4</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-sm-4 .col-lg-4</div>
|
||||
</div>
|
||||
<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-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-sm-4 .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 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-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-sm-6 .col-lg-6</div>
|
||||
</div>
|
||||
{% endhighlight %}
|
||||
|
||||
@ -299,31 +299,31 @@ base_url: "../"
|
||||
</div>
|
||||
|
||||
<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="row show-grid">
|
||||
<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 class="row show-grid">
|
||||
<div class="col-lg-3 col-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 class="col-lg-3 col-lg-offset-3">3 offset 3</div>
|
||||
</div><!-- /row -->
|
||||
<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>
|
||||
{% highlight html %}
|
||||
<div class="row">
|
||||
<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 class="row">
|
||||
<div class="col-lg-3 col-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 class="col-lg-3 col-lg-offset-3">3 offset 3</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-lg-6 col-offset-3">...</div>
|
||||
<div class="col-lg-6 col-lg-offset-3">...</div>
|
||||
</div>
|
||||
{% endhighlight %}
|
||||
|
||||
@ -360,16 +360,16 @@ base_url: "../"
|
||||
{% endhighlight %}
|
||||
|
||||
<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="col-lg-9 col-push-3">9</div>
|
||||
<div class="col-lg-3 col-pull-9">3</div>
|
||||
<div class="col-lg-9 col-lg-push-3">9</div>
|
||||
<div class="col-lg-3 col-lg-pull-9">3</div>
|
||||
</div>
|
||||
|
||||
{% highlight html %}
|
||||
<div class="row">
|
||||
<div class="col-lg-9 col-push-3">9</div>
|
||||
<div class="col-lg-3 col-pull-9">3</div>
|
||||
<div class="col-lg-9 col-lg-push-3">9</div>
|
||||
<div class="col-lg-3 col-lg-pull-9">3</div>
|
||||
</div>
|
||||
{% endhighlight %}
|
||||
|
||||
@ -1536,7 +1536,7 @@ For example, <code><section></code> should be wrapped as inline.
|
||||
{% endhighlight %}
|
||||
|
||||
<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">
|
||||
<div class="form-group has-warning">
|
||||
@ -1592,7 +1592,7 @@ For example, <code><section></code> should be wrapped as inline.
|
||||
</form>
|
||||
{% highlight html %}
|
||||
<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">
|
||||
|
||||
<select class="form-control input-large">...</select>
|
||||
|
||||
236
dist/css/bootstrap.css
vendored
236
dist/css/bootstrap.css
vendored
@ -931,72 +931,105 @@ pre code {
|
||||
.col-sm-12 {
|
||||
width: 100%;
|
||||
}
|
||||
.col-push-1 {
|
||||
.col-sm-push-1 {
|
||||
left: 8.333333333333332%;
|
||||
}
|
||||
.col-push-2 {
|
||||
.col-sm-push-2 {
|
||||
left: 16.666666666666664%;
|
||||
}
|
||||
.col-push-3 {
|
||||
.col-sm-push-3 {
|
||||
left: 25%;
|
||||
}
|
||||
.col-push-4 {
|
||||
.col-sm-push-4 {
|
||||
left: 33.33333333333333%;
|
||||
}
|
||||
.col-push-5 {
|
||||
.col-sm-push-5 {
|
||||
left: 41.66666666666667%;
|
||||
}
|
||||
.col-push-6 {
|
||||
.col-sm-push-6 {
|
||||
left: 50%;
|
||||
}
|
||||
.col-push-7 {
|
||||
.col-sm-push-7 {
|
||||
left: 58.333333333333336%;
|
||||
}
|
||||
.col-push-8 {
|
||||
.col-sm-push-8 {
|
||||
left: 66.66666666666666%;
|
||||
}
|
||||
.col-push-9 {
|
||||
.col-sm-push-9 {
|
||||
left: 75%;
|
||||
}
|
||||
.col-push-10 {
|
||||
.col-sm-push-10 {
|
||||
left: 83.33333333333334%;
|
||||
}
|
||||
.col-push-11 {
|
||||
.col-sm-push-11 {
|
||||
left: 91.66666666666666%;
|
||||
}
|
||||
.col-pull-1 {
|
||||
.col-sm-pull-1 {
|
||||
right: 8.333333333333332%;
|
||||
}
|
||||
.col-pull-2 {
|
||||
.col-sm-pull-2 {
|
||||
right: 16.666666666666664%;
|
||||
}
|
||||
.col-pull-3 {
|
||||
.col-sm-pull-3 {
|
||||
right: 25%;
|
||||
}
|
||||
.col-pull-4 {
|
||||
.col-sm-pull-4 {
|
||||
right: 33.33333333333333%;
|
||||
}
|
||||
.col-pull-5 {
|
||||
.col-sm-pull-5 {
|
||||
right: 41.66666666666667%;
|
||||
}
|
||||
.col-pull-6 {
|
||||
.col-sm-pull-6 {
|
||||
right: 50%;
|
||||
}
|
||||
.col-pull-7 {
|
||||
.col-sm-pull-7 {
|
||||
right: 58.333333333333336%;
|
||||
}
|
||||
.col-pull-8 {
|
||||
.col-sm-pull-8 {
|
||||
right: 66.66666666666666%;
|
||||
}
|
||||
.col-pull-9 {
|
||||
.col-sm-pull-9 {
|
||||
right: 75%;
|
||||
}
|
||||
.col-pull-10 {
|
||||
.col-sm-pull-10 {
|
||||
right: 83.33333333333334%;
|
||||
}
|
||||
.col-pull-11 {
|
||||
.col-sm-pull-11 {
|
||||
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) {
|
||||
@ -1053,37 +1086,103 @@ pre code {
|
||||
.col-lg-12 {
|
||||
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%;
|
||||
}
|
||||
.col-offset-2 {
|
||||
.col-lg-offset-2 {
|
||||
margin-left: 16.666666666666664%;
|
||||
}
|
||||
.col-offset-3 {
|
||||
.col-lg-offset-3 {
|
||||
margin-left: 25%;
|
||||
}
|
||||
.col-offset-4 {
|
||||
.col-lg-offset-4 {
|
||||
margin-left: 33.33333333333333%;
|
||||
}
|
||||
.col-offset-5 {
|
||||
.col-lg-offset-5 {
|
||||
margin-left: 41.66666666666667%;
|
||||
}
|
||||
.col-offset-6 {
|
||||
.col-lg-offset-6 {
|
||||
margin-left: 50%;
|
||||
}
|
||||
.col-offset-7 {
|
||||
.col-lg-offset-7 {
|
||||
margin-left: 58.333333333333336%;
|
||||
}
|
||||
.col-offset-8 {
|
||||
.col-lg-offset-8 {
|
||||
margin-left: 66.66666666666666%;
|
||||
}
|
||||
.col-offset-9 {
|
||||
.col-lg-offset-9 {
|
||||
margin-left: 75%;
|
||||
}
|
||||
.col-offset-10 {
|
||||
.col-lg-offset-10 {
|
||||
margin-left: 83.33333333333334%;
|
||||
}
|
||||
.col-offset-11 {
|
||||
.col-lg-offset-11 {
|
||||
margin-left: 91.66666666666666%;
|
||||
}
|
||||
}
|
||||
@ -1354,8 +1453,8 @@ input[type="number"]::-webkit-inner-spin-button {
|
||||
.form-control {
|
||||
display: block;
|
||||
width: 100%;
|
||||
height: 38px;
|
||||
padding: 8px 12px;
|
||||
height: 34px;
|
||||
padding: 6px 12px;
|
||||
font-size: 14px;
|
||||
line-height: 1.428571429;
|
||||
color: #555555;
|
||||
@ -1439,9 +1538,10 @@ textarea.form-control {
|
||||
}
|
||||
|
||||
.input-large {
|
||||
height: 56px;
|
||||
padding: 14px 16px;
|
||||
height: 45px;
|
||||
padding: 10px 16px;
|
||||
font-size: 18px;
|
||||
line-height: 1.33;
|
||||
border-radius: 6px;
|
||||
}
|
||||
|
||||
@ -1449,12 +1549,13 @@ textarea.form-control {
|
||||
height: 30px;
|
||||
padding: 5px 10px;
|
||||
font-size: 12px;
|
||||
line-height: 1.5;
|
||||
border-radius: 3px;
|
||||
}
|
||||
|
||||
select.input-large {
|
||||
height: 56px;
|
||||
line-height: 56px;
|
||||
height: 45px;
|
||||
line-height: 45px;
|
||||
}
|
||||
|
||||
select.input-small {
|
||||
@ -1548,7 +1649,7 @@ textarea.input-small {
|
||||
|
||||
.btn {
|
||||
display: inline-block;
|
||||
padding: 8px 12px;
|
||||
padding: 6px 12px;
|
||||
margin-bottom: 0;
|
||||
font-size: 14px;
|
||||
font-weight: 500;
|
||||
@ -1833,8 +1934,9 @@ fieldset[disabled] .btn-link:focus {
|
||||
}
|
||||
|
||||
.btn-large {
|
||||
padding: 14px 16px;
|
||||
padding: 10px 16px;
|
||||
font-size: 18px;
|
||||
line-height: 1.33;
|
||||
border-radius: 6px;
|
||||
}
|
||||
|
||||
@ -1894,6 +1996,7 @@ input[type="button"].btn-block {
|
||||
}
|
||||
|
||||
.input-group {
|
||||
position: relative;
|
||||
display: table;
|
||||
border-collapse: separate;
|
||||
}
|
||||
@ -1929,7 +2032,7 @@ input[type="button"].btn-block {
|
||||
}
|
||||
|
||||
.input-group-addon {
|
||||
padding: 8px 12px;
|
||||
padding: 6px 12px;
|
||||
font-size: 14px;
|
||||
font-weight: normal;
|
||||
line-height: 1.428571429;
|
||||
@ -1949,7 +2052,7 @@ input[type="button"].btn-block {
|
||||
}
|
||||
|
||||
.input-group-addon.input-large {
|
||||
padding: 14px 16px;
|
||||
padding: 10px 16px;
|
||||
font-size: 18px;
|
||||
border-radius: 6px;
|
||||
}
|
||||
@ -2015,7 +2118,9 @@ input[type="button"].btn-block {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.form-horizontal .control-label {
|
||||
.form-horizontal .control-label,
|
||||
.form-horizontal .radio-inline,
|
||||
.form-horizontal .checkbox-inline {
|
||||
padding-top: 9px;
|
||||
}
|
||||
|
||||
@ -2069,6 +2174,10 @@ input[type="button"].btn-block {
|
||||
content: "";
|
||||
}
|
||||
|
||||
.dropdown {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.dropdown-menu {
|
||||
position: absolute;
|
||||
top: 100%;
|
||||
@ -2798,8 +2907,8 @@ button.close {
|
||||
}
|
||||
|
||||
.navbar-form {
|
||||
margin-top: 6px;
|
||||
margin-bottom: 6px;
|
||||
margin-top: 8px;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
.navbar-form .form-control,
|
||||
@ -2970,7 +3079,7 @@ button.close {
|
||||
}
|
||||
|
||||
.navbar-btn {
|
||||
margin-top: 6px;
|
||||
margin-top: 8px;
|
||||
}
|
||||
|
||||
.navbar-text {
|
||||
@ -3251,7 +3360,7 @@ button.close {
|
||||
|
||||
.pagination-large > li > a,
|
||||
.pagination-large > li > span {
|
||||
padding: 14px 16px;
|
||||
padding: 10px 16px;
|
||||
font-size: 18px;
|
||||
}
|
||||
|
||||
@ -3750,7 +3859,7 @@ button.close {
|
||||
}
|
||||
|
||||
.alert {
|
||||
padding: 10px 35px 10px 15px;
|
||||
padding: 15px 35px 15px 15px;
|
||||
margin-bottom: 20px;
|
||||
color: #c09853;
|
||||
background-color: #fcf8e3;
|
||||
@ -3768,7 +3877,7 @@ button.close {
|
||||
}
|
||||
|
||||
.alert .alert-link {
|
||||
font-weight: 500;
|
||||
font-weight: bold;
|
||||
color: #a47e3c;
|
||||
}
|
||||
|
||||
@ -3779,6 +3888,15 @@ button.close {
|
||||
color: inherit;
|
||||
}
|
||||
|
||||
.alert > p,
|
||||
.alert > ul {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.alert > p + p {
|
||||
margin-top: 5px;
|
||||
}
|
||||
|
||||
.alert-success {
|
||||
color: #468847;
|
||||
background-color: #dff0d8;
|
||||
@ -3821,20 +3939,6 @@ button.close {
|
||||
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,
|
||||
.img-thumbnail {
|
||||
padding: 4px;
|
||||
@ -3917,7 +4021,7 @@ a.thumbnail:focus {
|
||||
color: #ffffff;
|
||||
text-align: center;
|
||||
white-space: nowrap;
|
||||
vertical-align: middle;
|
||||
vertical-align: baseline;
|
||||
background-color: #999999;
|
||||
border-radius: .25em;
|
||||
}
|
||||
@ -3976,7 +4080,7 @@ a.thumbnail:focus {
|
||||
color: #ffffff;
|
||||
text-align: center;
|
||||
white-space: nowrap;
|
||||
vertical-align: middle;
|
||||
vertical-align: baseline;
|
||||
background-color: #999999;
|
||||
border-radius: 10px;
|
||||
}
|
||||
|
||||
2
dist/css/bootstrap.min.css
vendored
2
dist/css/bootstrap.min.css
vendored
File diff suppressed because one or more lines are too long
6
dist/js/bootstrap.js
vendored
6
dist/js/bootstrap.js
vendored
@ -1313,6 +1313,8 @@ if (!jQuery) { throw new Error("Bootstrap requires jQuery") }
|
||||
var $tip = this.tip()
|
||||
var e = $.Event('hide.bs.' + this.type)
|
||||
|
||||
function complete() { $tip.detach() }
|
||||
|
||||
this.$element.trigger(e)
|
||||
|
||||
if (e.isDefaultPrevented()) return
|
||||
@ -1321,9 +1323,9 @@ if (!jQuery) { throw new Error("Bootstrap requires jQuery") }
|
||||
|
||||
$.support.transition && this.$tip.hasClass('fade') ?
|
||||
$tip
|
||||
.one($.support.transition.end, $tip.detach)
|
||||
.one($.support.transition.end, complete)
|
||||
.emulateTransitionEnd(150) :
|
||||
$tip.detach()
|
||||
complete()
|
||||
|
||||
this.$element.trigger('hidden.bs.' + this.type)
|
||||
|
||||
|
||||
2
dist/js/bootstrap.min.js
vendored
2
dist/js/bootstrap.min.js
vendored
File diff suppressed because one or more lines are too long
@ -112,7 +112,7 @@ bootstrap/
|
||||
<!-- Include all compiled plugins (below), or include individual files as needed -->
|
||||
<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>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@ -9,7 +9,7 @@ base_url: "./"
|
||||
<h1>Bootstrap 3</h1>
|
||||
<p class="lead">Sleek, intuitive, and powerful mobile-first front-end framework for faster and easier web development.</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>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -168,7 +168,7 @@ $('#myModal').on('show.bs.modal', function (e) {
|
||||
|
||||
<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>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>
|
||||
@ -262,7 +262,7 @@ $('#myModal').on('show.bs.modal', function (e) {
|
||||
<td>remote</td>
|
||||
<td>path</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 %}
|
||||
<a data-toggle="modal" href="remote.html" data-target="#modal">Click me</a>
|
||||
{% endhighlight %}
|
||||
@ -397,7 +397,7 @@ $('#myModal').on('hidden.bs.modal', function () {
|
||||
<ul class="nav nav-pills">
|
||||
<li class="active"><a href="#">Regular link</a></li>
|
||||
<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">
|
||||
<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>
|
||||
@ -407,7 +407,7 @@ $('#myModal').on('hidden.bs.modal', function () {
|
||||
</ul>
|
||||
</li>
|
||||
<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">
|
||||
<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>
|
||||
@ -417,7 +417,7 @@ $('#myModal').on('hidden.bs.modal', function () {
|
||||
</ul>
|
||||
</li>
|
||||
<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">
|
||||
<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>
|
||||
@ -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>
|
||||
{% highlight html %}
|
||||
<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>
|
||||
@ -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>
|
||||
{% highlight html %}
|
||||
<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>
|
||||
</a>
|
||||
<ul class="dropdown-menu" role="menu" aria-labelledby="dLabel">
|
||||
@ -802,7 +802,7 @@ $('#example').tooltip(options)
|
||||
<td>title</td>
|
||||
<td>string | function</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>
|
||||
<td>trigger</td>
|
||||
@ -1480,7 +1480,7 @@ $(".collapse").collapse()
|
||||
<td>parent</td>
|
||||
<td>selector</td>
|
||||
<td>false</td>
|
||||
<td>If selector then all collapsible elements under the specified parent will be closed when this 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>
|
||||
<td>toggle</td>
|
||||
|
||||
@ -249,6 +249,8 @@
|
||||
var $tip = this.tip()
|
||||
var e = $.Event('hide.bs.' + this.type)
|
||||
|
||||
function complete() { $tip.detach() }
|
||||
|
||||
this.$element.trigger(e)
|
||||
|
||||
if (e.isDefaultPrevented()) return
|
||||
@ -257,9 +259,9 @@
|
||||
|
||||
$.support.transition && this.$tip.hasClass('fade') ?
|
||||
$tip
|
||||
.one($.support.transition.end, $tip.detach)
|
||||
.one($.support.transition.end, complete)
|
||||
.emulateTransitionEnd(150) :
|
||||
$tip.detach()
|
||||
complete()
|
||||
|
||||
this.$element.trigger('hidden.bs.' + this.type)
|
||||
|
||||
|
||||
@ -7,7 +7,7 @@
|
||||
// -------------------------
|
||||
|
||||
.alert {
|
||||
padding: 10px 35px 10px 15px;
|
||||
padding: 15px 35px 15px 15px;
|
||||
margin-bottom: @line-height-computed;
|
||||
color: @alert-text;
|
||||
background-color: @alert-bg;
|
||||
@ -26,7 +26,7 @@
|
||||
}
|
||||
// Provide class for links that match alerts
|
||||
.alert-link {
|
||||
font-weight: 500;
|
||||
font-weight: bold;
|
||||
color: darken(@alert-text, 10%);
|
||||
}
|
||||
|
||||
@ -37,33 +37,26 @@
|
||||
right: -21px;
|
||||
color: inherit;
|
||||
}
|
||||
|
||||
// Improve alignment and spacing of inner content
|
||||
> p,
|
||||
> ul {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
> p + p {
|
||||
margin-top: 5px;
|
||||
}
|
||||
}
|
||||
|
||||
// Alternate styles
|
||||
// -------------------------
|
||||
|
||||
.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-variant(@alert-danger-bg, @alert-danger-border, @alert-danger-text);
|
||||
.alert-variant(@alert-danger-bg; @alert-danger-border; @alert-danger-text);
|
||||
}
|
||||
.alert-info {
|
||||
.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;
|
||||
}
|
||||
.alert-variant(@alert-info-bg; @alert-info-border; @alert-info-text);
|
||||
}
|
||||
|
||||
@ -12,7 +12,7 @@
|
||||
font-weight: bold;
|
||||
color: @badge-color;
|
||||
line-height: 1;
|
||||
vertical-align: middle;
|
||||
vertical-align: baseline;
|
||||
white-space: nowrap;
|
||||
text-align: center;
|
||||
background-color: @badge-bg;
|
||||
|
||||
@ -54,26 +54,26 @@
|
||||
// --------------------------------------------------
|
||||
|
||||
.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-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
|
||||
.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
|
||||
.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
|
||||
.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
|
||||
.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 {
|
||||
padding: @padding-large-vertical @padding-large-horizontal;
|
||||
font-size: @font-size-large;
|
||||
line-height: 1.33; // ensure even-numbered height of butotn next to large input
|
||||
border-radius: @border-radius-large;
|
||||
}
|
||||
.btn-small,
|
||||
|
||||
@ -17,6 +17,12 @@
|
||||
content: "";
|
||||
}
|
||||
|
||||
// The dropdown wrapper (div)
|
||||
// --------------------------
|
||||
.dropdown {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
// The dropdown menu (ul)
|
||||
// ----------------------
|
||||
.dropdown-menu {
|
||||
|
||||
@ -222,12 +222,14 @@ input[type="number"] {
|
||||
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-small {
|
||||
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;
|
||||
}
|
||||
|
||||
@ -255,15 +257,15 @@ textarea {
|
||||
|
||||
// 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
|
||||
.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
|
||||
.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);
|
||||
}
|
||||
|
||||
|
||||
|
||||
104
less/grid.less
104
less/grid.less
@ -125,29 +125,42 @@
|
||||
.col-sm-12 { width: 100%; }
|
||||
|
||||
// Push and pull columns for source order changes
|
||||
.col-push-1 { left: percentage((1 / @grid-columns)); }
|
||||
.col-push-2 { left: percentage((2 / @grid-columns)); }
|
||||
.col-push-3 { left: percentage((3 / @grid-columns)); }
|
||||
.col-push-4 { left: percentage((4 / @grid-columns)); }
|
||||
.col-push-5 { left: percentage((5 / @grid-columns)); }
|
||||
.col-push-6 { left: percentage((6 / @grid-columns)); }
|
||||
.col-push-7 { left: percentage((7 / @grid-columns)); }
|
||||
.col-push-8 { left: percentage((8 / @grid-columns)); }
|
||||
.col-push-9 { left: percentage((9 / @grid-columns)); }
|
||||
.col-push-10 { left: percentage((10/ @grid-columns)); }
|
||||
.col-push-11 { left: percentage((11/ @grid-columns)); }
|
||||
.col-sm-push-1 { left: percentage((1 / @grid-columns)); }
|
||||
.col-sm-push-2 { left: percentage((2 / @grid-columns)); }
|
||||
.col-sm-push-3 { left: percentage((3 / @grid-columns)); }
|
||||
.col-sm-push-4 { left: percentage((4 / @grid-columns)); }
|
||||
.col-sm-push-5 { left: percentage((5 / @grid-columns)); }
|
||||
.col-sm-push-6 { left: percentage((6 / @grid-columns)); }
|
||||
.col-sm-push-7 { left: percentage((7 / @grid-columns)); }
|
||||
.col-sm-push-8 { left: percentage((8 / @grid-columns)); }
|
||||
.col-sm-push-9 { left: percentage((9 / @grid-columns)); }
|
||||
.col-sm-push-10 { left: percentage((10/ @grid-columns)); }
|
||||
.col-sm-push-11 { left: percentage((11/ @grid-columns)); }
|
||||
|
||||
.col-pull-1 { right: percentage((1 / @grid-columns)); }
|
||||
.col-pull-2 { right: percentage((2 / @grid-columns)); }
|
||||
.col-pull-3 { right: percentage((3 / @grid-columns)); }
|
||||
.col-pull-4 { right: percentage((4 / @grid-columns)); }
|
||||
.col-pull-5 { right: percentage((5 / @grid-columns)); }
|
||||
.col-pull-6 { right: percentage((6 / @grid-columns)); }
|
||||
.col-pull-7 { right: percentage((7 / @grid-columns)); }
|
||||
.col-pull-8 { right: percentage((8 / @grid-columns)); }
|
||||
.col-pull-9 { right: percentage((9 / @grid-columns)); }
|
||||
.col-pull-10 { right: percentage((10/ @grid-columns)); }
|
||||
.col-pull-11 { right: percentage((11/ @grid-columns)); }
|
||||
.col-sm-pull-1 { right: percentage((1 / @grid-columns)); }
|
||||
.col-sm-pull-2 { right: percentage((2 / @grid-columns)); }
|
||||
.col-sm-pull-3 { right: percentage((3 / @grid-columns)); }
|
||||
.col-sm-pull-4 { right: percentage((4 / @grid-columns)); }
|
||||
.col-sm-pull-5 { right: percentage((5 / @grid-columns)); }
|
||||
.col-sm-pull-6 { right: percentage((6 / @grid-columns)); }
|
||||
.col-sm-pull-7 { right: percentage((7 / @grid-columns)); }
|
||||
.col-sm-pull-8 { right: percentage((8 / @grid-columns)); }
|
||||
.col-sm-pull-9 { right: percentage((9 / @grid-columns)); }
|
||||
.col-sm-pull-10 { right: percentage((10/ @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)
|
||||
@ -182,18 +195,43 @@
|
||||
.col-lg-11 { width: percentage((11/ @grid-columns)); }
|
||||
.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
|
||||
.col-offset-1 { margin-left: percentage((1 / @grid-columns)); }
|
||||
.col-offset-2 { margin-left: percentage((2 / @grid-columns)); }
|
||||
.col-offset-3 { margin-left: percentage((3 / @grid-columns)); }
|
||||
.col-offset-4 { margin-left: percentage((4 / @grid-columns)); }
|
||||
.col-offset-5 { margin-left: percentage((5 / @grid-columns)); }
|
||||
.col-offset-6 { margin-left: percentage((6 / @grid-columns)); }
|
||||
.col-offset-7 { margin-left: percentage((7 / @grid-columns)); }
|
||||
.col-offset-8 { margin-left: percentage((8 / @grid-columns)); }
|
||||
.col-offset-9 { margin-left: percentage((9 / @grid-columns)); }
|
||||
.col-offset-10 { margin-left: percentage((10/ @grid-columns)); }
|
||||
.col-offset-11 { margin-left: percentage((11/ @grid-columns)); }
|
||||
.col-lg-offset-1 { margin-left: percentage((1 / @grid-columns)); }
|
||||
.col-lg-offset-2 { margin-left: percentage((2 / @grid-columns)); }
|
||||
.col-lg-offset-3 { margin-left: percentage((3 / @grid-columns)); }
|
||||
.col-lg-offset-4 { margin-left: percentage((4 / @grid-columns)); }
|
||||
.col-lg-offset-5 { margin-left: percentage((5 / @grid-columns)); }
|
||||
.col-lg-offset-6 { margin-left: percentage((6 / @grid-columns)); }
|
||||
.col-lg-offset-7 { margin-left: percentage((7 / @grid-columns)); }
|
||||
.col-lg-offset-8 { margin-left: percentage((8 / @grid-columns)); }
|
||||
.col-lg-offset-9 { margin-left: percentage((9 / @grid-columns)); }
|
||||
.col-lg-offset-10 { margin-left: percentage((10/ @grid-columns)); }
|
||||
.col-lg-offset-11 { margin-left: percentage((11/ @grid-columns)); }
|
||||
}
|
||||
|
||||
// Large desktops and up
|
||||
|
||||
@ -5,6 +5,7 @@
|
||||
// Base styles
|
||||
// -------------------------
|
||||
.input-group {
|
||||
position: relative; // For dropdowns
|
||||
display: table;
|
||||
border-collapse: separate; // prevent input groups from inheriting border styles from table cells when placed within a table
|
||||
|
||||
@ -135,7 +136,9 @@
|
||||
// --------------------------------------------------
|
||||
// Horizontal forms are built on grid classes.
|
||||
|
||||
.form-horizontal .control-label {
|
||||
.form-horizontal .control-label,
|
||||
.form-horizontal .radio-inline,
|
||||
.form-horizontal .checkbox-inline {
|
||||
padding-top: 9px;
|
||||
}
|
||||
|
||||
|
||||
@ -11,7 +11,7 @@
|
||||
color: @label-color;
|
||||
text-align: center;
|
||||
white-space: nowrap;
|
||||
vertical-align: middle;
|
||||
vertical-align: baseline;
|
||||
background-color: @gray-light;
|
||||
border-radius: .25em;
|
||||
|
||||
|
||||
@ -44,12 +44,12 @@
|
||||
}
|
||||
|
||||
// Sizing shortcuts
|
||||
.size(@width, @height) {
|
||||
.size(@width; @height) {
|
||||
width: @width;
|
||||
height: @height;
|
||||
}
|
||||
.square(@size) {
|
||||
.size(@size, @size);
|
||||
.size(@size; @size);
|
||||
}
|
||||
|
||||
// Placeholder text
|
||||
@ -138,17 +138,17 @@
|
||||
-ms-transform: scale(@ratio);
|
||||
transform: scale(@ratio);
|
||||
}
|
||||
.translate(@x, @y) {
|
||||
.translate(@x; @y) {
|
||||
-webkit-transform: translate(@x, @y);
|
||||
-ms-transform: translate(@x, @y);
|
||||
transform: translate(@x, @y);
|
||||
}
|
||||
.skew(@x, @y) {
|
||||
.skew(@x; @y) {
|
||||
-webkit-transform: skew(@x, @y);
|
||||
-ms-transform: skewX(@x) skewY(@y); // See https://github.com/twbs/bootstrap/issues/4885
|
||||
transform: skew(@x, @y);
|
||||
}
|
||||
.translate3d(@x, @y, @z) {
|
||||
.translate3d(@x; @y; @z) {
|
||||
-webkit-transform: translate3d(@x, @y, @z);
|
||||
transform: translate3d(@x, @y, @z);
|
||||
}
|
||||
@ -197,7 +197,7 @@
|
||||
}
|
||||
|
||||
// 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;
|
||||
-moz-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
|
||||
}
|
||||
|
||||
.directional(@start-color: #555, @end-color: #333, @deg: 45deg) {
|
||||
.directional(@start-color: #555; @end-color: #333; @deg: 45deg) {
|
||||
background-color: @end-color;
|
||||
background-repeat: repeat-x;
|
||||
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: 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-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);
|
||||
@ -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
|
||||
}
|
||||
|
||||
.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-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);
|
||||
@ -285,7 +285,7 @@
|
||||
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
|
||||
}
|
||||
.radial(@inner-color: #555, @outer-color: #333) {
|
||||
.radial(@inner-color: #555; @outer-color: #333) {
|
||||
background-color: @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);
|
||||
@ -293,7 +293,7 @@
|
||||
background-image: radial-gradient(circle, @inner-color, @outer-color);
|
||||
background-repeat: no-repeat;
|
||||
}
|
||||
.striped(@color: #555, @angle: 45deg) {
|
||||
.striped(@color: #555; @angle: 45deg) {
|
||||
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-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
|
||||
.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}");
|
||||
|
||||
@media
|
||||
@ -347,7 +347,7 @@
|
||||
|
||||
// Alerts
|
||||
// -------------------------
|
||||
.alert-variant(@background, @border, @text-color) {
|
||||
.alert-variant(@background; @border; @text-color) {
|
||||
background-color: @background;
|
||||
border-color: @border;
|
||||
color: @text-color;
|
||||
@ -363,7 +363,7 @@
|
||||
// -------------------------
|
||||
// Easily pump out default styles, as well as :hover, :focus, :active,
|
||||
// and disabled options for all buttons
|
||||
.btn-pseudo-states(@color, @background, @border) {
|
||||
.btn-pseudo-states(@color; @background; @border) {
|
||||
color: @color;
|
||||
background-color: @background;
|
||||
border-color: @border;
|
||||
@ -405,7 +405,7 @@
|
||||
// Navbar vertical align
|
||||
// -------------------------
|
||||
// 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) {
|
||||
margin-top: ((@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,
|
||||
// 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
|
||||
.help-block,
|
||||
.control-label {
|
||||
|
||||
@ -69,10 +69,6 @@
|
||||
}
|
||||
|
||||
|
||||
|
||||
// Nav variations
|
||||
// --------------------------------------------------
|
||||
|
||||
// Tabs
|
||||
// -------------------------
|
||||
|
||||
@ -154,6 +150,10 @@
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// Nav variations
|
||||
// --------------------------------------------------
|
||||
|
||||
// Justified nav links
|
||||
// -------------------------
|
||||
|
||||
@ -181,11 +181,9 @@
|
||||
> .active > a {
|
||||
border-bottom-color: @nav-tabs-justified-active-link-border-color;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
|
||||
|
||||
// Tabbable tabs
|
||||
// -------------------------
|
||||
|
||||
|
||||
@ -60,15 +60,18 @@
|
||||
// -------------------------
|
||||
// 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-large-vertical: 14px;
|
||||
@padding-large-vertical: 10px;
|
||||
@padding-large-horizontal: 16px;
|
||||
|
||||
@padding-small-vertical: 5px;
|
||||
@padding-small-horizontal: 10px;
|
||||
|
||||
@line-height-large: 1.33;
|
||||
@line-height-small: 1.5;
|
||||
|
||||
@border-radius-base: 4px;
|
||||
@border-radius-large: 6px;
|
||||
@border-radius-small: 3px;
|
||||
@ -132,8 +135,8 @@
|
||||
@input-color-placeholder: @gray-light;
|
||||
|
||||
@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-small: (ceil(@font-size-small * @line-height-base) + (@padding-small-vertical * 2) + 2);
|
||||
@input-height-large: (floor(@font-size-large * @line-height-large) + (@padding-large-vertical * 2) + 2);
|
||||
@input-height-small: (floor(@font-size-small * @line-height-small) + (@padding-small-vertical * 2) + 2);
|
||||
|
||||
@legend-border-color: #e5e5e5;
|
||||
|
||||
@ -174,6 +177,39 @@
|
||||
@zindex-modal-background: 1040;
|
||||
@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
|
||||
// -------------------------
|
||||
@ -520,30 +556,6 @@
|
||||
@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
|
||||
// --------------------------------------------------
|
||||
|
||||
@ -555,14 +567,3 @@
|
||||
|
||||
// Large screen / wide desktop
|
||||
@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;
|
||||
|
||||
Loading…
Reference in New Issue
Block a user