rooty/Bootstrap
0
0
Fork 0
mirror of https://github.com/twbs/bootstrap.git synced 2024-11-29 11:24:18 +01:00
Code Issues Actions Packages Releases Activity

Merge branch '3.0.0-wip' of github.com:twbs/bootstrap into 3.0.0-wip

Browse Source
This commit is contained in:
fat 2013-08-02 15:10:47 -07:00
commit e969d2ff18
26 changed files with 441 additions and 277 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
_includes/nav-components.html
View File

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

39
assets/css/docs.css
View File

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

20
components.html
View File

@ -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">&times;</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">&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 %}
<h3 id="alerts-alternatives">Contextual alternatives</h3>

60
css.html
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>
<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>&lt;section&gt;</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>&lt;section&gt;</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
View File

@ -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
View File

File diff suppressed because one or more lines are too long

8
dist/js/bootstrap.js vendored
View File

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

File diff suppressed because one or more lines are too long

2
getting-started.html
View File

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

2
index.html
View File

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

18
javascript.html
View File

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

2
js/collapse.js
View File

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

12
js/tests/unit/dropdown.js
View File

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

6
js/tooltip.js
View File

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

35
less/alerts.less
View File

@ -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);
}

2
less/badges.less
View File

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

13
less/buttons.less
View File

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

6
less/dropdowns.less
View File

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

8
less/forms.less
View File

@ -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
View File

@ -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
less/input-groups.less
View File

@ -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;
}

2
less/labels.less
View File

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

38
less/mixins.less
View File

@ -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);
}
@ -158,9 +158,9 @@
// Default value is `visible`, but can be changed to `hidden`
// See git pull https://github.com/dannykeane/bootstrap.git backface-visibility for examples
.backface-visibility(@visibility){
-webkit-backface-visibility: @visibility;
-moz-backface-visibility: @visibility;
backface-visibility: @visibility;
-webkit-backface-visibility: @visibility;
-moz-backface-visibility: @visibility;
backface-visibility: @visibility;
}
// Background clipping
@ -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 {

10
less/navs.less
View File

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

6
less/pagination.less
View File

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

79
less/variables.less
View File

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