diff --git a/README.md b/README.md
index 1cf79d3bf044c0f1157ff1e2d46c61bd63b5c924..3ecafb6f1f93a07174621a667389e571fef7623a 100644
--- a/README.md
+++ b/README.md
@@ -58,7 +58,7 @@ When completed, you'll be able to run the various make commands provided:
Runs jshint and qunit tests headlessly in [phantomjs](http://code.google.com/p/phantomjs/) (used for ci). **Requires phantomjs.**
#### watch - `make watch`
-This is a convenience method for watching just Less files and automatically building them whenever you save. **Requires the Watchr gem.**
+This is a convenience method for watching just Less files and automatically building them whenever you save. **Requires the watchr gem.**
Should you encounter problems with installing dependencies or running the makefile commands, uninstall any previous versions (global and local) you may have installed, and then rerun `npm install`.
diff --git a/docs/assets/css/bootstrap.css b/docs/assets/css/bootstrap.css
index 5e5c7d44daa54bccd93cc6df4db530cde96b6d38..3a6866785af0b0add736b876dfd1c2c419e59c53 100644
--- a/docs/assets/css/bootstrap.css
+++ b/docs/assets/css/bootstrap.css
@@ -623,18 +623,21 @@ abbr.initialism {
}
blockquote {
- padding: 0 0 0 15px;
+ padding: 10px 20px;
margin: 0 0 20px;
border-left: 5px solid #eeeeee;
}
blockquote p {
- margin-bottom: 0;
font-size: 17.5px;
font-weight: 300;
line-height: 1.25;
}
+blockquote p:last-child {
+ margin-bottom: 0;
+}
+
blockquote small {
display: block;
line-height: 20px;
@@ -2874,10 +2877,9 @@ fieldset[disabled] .btn-link:focus {
color: #ffffff;
text-decoration: none;
background-color: #357ebd;
- background-image: -moz-linear-gradient(top, #428bca, #357ebd);
background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#428bca), to(#357ebd));
background-image: -webkit-linear-gradient(top, #428bca, #357ebd);
- background-image: -o-linear-gradient(top, #428bca, #357ebd);
+ background-image: -moz-linear-gradient(top, #428bca, #357ebd);
background-image: linear-gradient(to bottom, #428bca, #357ebd);
background-repeat: repeat-x;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff428bca', endColorstr='#ff357ebd', GradientType=0);
@@ -2889,10 +2891,9 @@ fieldset[disabled] .btn-link:focus {
color: #ffffff;
text-decoration: none;
background-color: #357ebd;
- background-image: -moz-linear-gradient(top, #428bca, #357ebd);
background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#428bca), to(#357ebd));
background-image: -webkit-linear-gradient(top, #428bca, #357ebd);
- background-image: -o-linear-gradient(top, #428bca, #357ebd);
+ background-image: -moz-linear-gradient(top, #428bca, #357ebd);
background-image: linear-gradient(to bottom, #428bca, #357ebd);
background-repeat: repeat-x;
outline: 0;
@@ -3470,8 +3471,8 @@ button.close {
.nav-pills .open .dropdown-toggle,
.nav > li.dropdown.open.active > a:hover {
color: #fff;
- background-color: @grayLight;
- border-color: @grayLight;
+ background-color: @gray-light;
+ border-color: @gray-light;
}
.nav li.dropdown.open .caret,
.nav li.dropdown.open.active .caret,
@@ -3483,7 +3484,7 @@ button.close {
// Dropdowns in stacked tabs
.tabs-stacked .open > a:hover {
- border-color: @grayLight;
+ border-color: @gray-light;
}
*/
@@ -4662,22 +4663,18 @@ button.close {
color: #356635;
}
-.alert-danger,
-.alert-error {
+.alert-danger {
color: #b94a48;
background-color: #f2dede;
border-color: #eed3d7;
}
-.alert-danger hr,
-.alert-error hr {
+.alert-danger hr {
border-top-color: #e6c1c7;
}
.alert-danger > a,
-.alert-error > a,
-.alert-danger > p > a,
-.alert-error > p > a {
+.alert-danger > p > a {
color: #953b39;
}
@@ -4714,7 +4711,8 @@ button.close {
.img-thumbnail {
padding: 4px;
line-height: 20px;
- border: 1px solid #ddd;
+ background-color: #ffffff;
+ border: 1px solid #dddddd;
border-radius: 4px;
-webkit-transition: all 0.2s ease-in-out;
-moz-transition: all 0.2s ease-in-out;
@@ -4744,7 +4742,7 @@ a.thumbnail:focus {
.thumbnail .caption {
padding: 9px;
- color: #555555;
+ color: #333333;
}
.media,
@@ -4958,7 +4956,6 @@ a.list-group-item.active > .badge,
background-image: -webkit-gradient(linear, 0 100%, 100% 0, color-stop(0.25, rgba(255, 255, 255, 0.15)), color-stop(0.25, transparent), color-stop(0.5, transparent), color-stop(0.5, rgba(255, 255, 255, 0.15)), color-stop(0.75, rgba(255, 255, 255, 0.15)), color-stop(0.75, transparent), to(transparent));
background-image: -webkit-linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);
background-image: -moz-linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);
- background-image: -o-linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);
background-image: linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);
-webkit-background-size: 40px 40px;
-moz-background-size: 40px 40px;
@@ -4983,7 +4980,6 @@ a.list-group-item.active > .badge,
background-image: -webkit-gradient(linear, 0 100%, 100% 0, color-stop(0.25, rgba(255, 255, 255, 0.15)), color-stop(0.25, transparent), color-stop(0.5, transparent), color-stop(0.5, rgba(255, 255, 255, 0.15)), color-stop(0.75, rgba(255, 255, 255, 0.15)), color-stop(0.75, transparent), to(transparent));
background-image: -webkit-linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);
background-image: -moz-linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);
- background-image: -o-linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);
background-image: linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);
}
@@ -4996,7 +4992,6 @@ a.list-group-item.active > .badge,
background-image: -webkit-gradient(linear, 0 100%, 100% 0, color-stop(0.25, rgba(255, 255, 255, 0.15)), color-stop(0.25, transparent), color-stop(0.5, transparent), color-stop(0.5, rgba(255, 255, 255, 0.15)), color-stop(0.75, rgba(255, 255, 255, 0.15)), color-stop(0.75, transparent), to(transparent));
background-image: -webkit-linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);
background-image: -moz-linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);
- background-image: -o-linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);
background-image: linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);
}
@@ -5009,7 +5004,6 @@ a.list-group-item.active > .badge,
background-image: -webkit-gradient(linear, 0 100%, 100% 0, color-stop(0.25, rgba(255, 255, 255, 0.15)), color-stop(0.25, transparent), color-stop(0.5, transparent), color-stop(0.5, rgba(255, 255, 255, 0.15)), color-stop(0.75, rgba(255, 255, 255, 0.15)), color-stop(0.75, transparent), to(transparent));
background-image: -webkit-linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);
background-image: -moz-linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);
- background-image: -o-linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);
background-image: linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);
}
@@ -5022,7 +5016,6 @@ a.list-group-item.active > .badge,
background-image: -webkit-gradient(linear, 0 100%, 100% 0, color-stop(0.25, rgba(255, 255, 255, 0.15)), color-stop(0.25, transparent), color-stop(0.5, transparent), color-stop(0.5, rgba(255, 255, 255, 0.15)), color-stop(0.75, rgba(255, 255, 255, 0.15)), color-stop(0.75, transparent), to(transparent));
background-image: -webkit-linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);
background-image: -moz-linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);
- background-image: -o-linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);
background-image: linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);
}
@@ -5134,10 +5127,9 @@ a.list-group-item.active > .badge,
.carousel-control.left {
background-color: rgba(0, 0, 0, 0.0001);
background-color: transparent;
- background-image: -moz-linear-gradient(left, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.0001));
background-image: -webkit-gradient(linear, 0 0, 100% 0, from(rgba(0, 0, 0, 0.5)), to(rgba(0, 0, 0, 0.0001)));
background-image: -webkit-linear-gradient(left, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.0001));
- background-image: -o-linear-gradient(left, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.0001));
+ background-image: -moz-linear-gradient(left, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.0001));
background-image: linear-gradient(to right, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.0001));
background-repeat: repeat-x;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#80000000', endColorstr='#00000000', GradientType=1);
@@ -5148,10 +5140,9 @@ a.list-group-item.active > .badge,
left: auto;
background-color: rgba(0, 0, 0, 0.5);
background-color: transparent;
- background-image: -moz-linear-gradient(left, rgba(0, 0, 0, 0.0001), rgba(0, 0, 0, 0.5));
background-image: -webkit-gradient(linear, 0 0, 100% 0, from(rgba(0, 0, 0, 0.0001)), to(rgba(0, 0, 0, 0.5)));
background-image: -webkit-linear-gradient(left, rgba(0, 0, 0, 0.0001), rgba(0, 0, 0, 0.5));
- background-image: -o-linear-gradient(left, rgba(0, 0, 0, 0.0001), rgba(0, 0, 0, 0.5));
+ background-image: -moz-linear-gradient(left, rgba(0, 0, 0, 0.0001), rgba(0, 0, 0, 0.5));
background-image: linear-gradient(to right, rgba(0, 0, 0, 0.0001), rgba(0, 0, 0, 0.5));
background-repeat: repeat-x;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#00000000', endColorstr='#80000000', GradientType=1);
@@ -5311,53 +5302,79 @@ a.list-group-item.active > .badge,
width: device-width;
}
+@media screen and (max-width: 400px) {
+ @-ms-viewport {
+ width: 320px;
+ }
+}
+
.hidden {
display: none;
visibility: hidden;
}
.visible-phone {
- display: none !important;
+ display: inherit !important;
}
.visible-tablet {
display: none !important;
}
-.hidden-desktop {
+.visible-desktop {
display: none !important;
}
-.visible-desktop {
+.hidden-phone {
+ display: none !important;
+}
+
+.hidden-tablet {
+ display: inherit !important;
+}
+
+.hidden-desktop {
display: inherit !important;
}
@media (min-width: 768px) and (max-width: 979px) {
- .hidden-desktop {
+ .visible-phone {
+ display: none !important;
+ }
+ .visible-tablet {
display: inherit !important;
}
.visible-desktop {
- display: none !important ;
+ display: none !important;
}
- .visible-tablet {
+ .hidden-phone {
display: inherit !important;
}
.hidden-tablet {
display: none !important;
}
-}
-
-@media (max-width: 767px) {
.hidden-desktop {
display: inherit !important;
}
- .visible-desktop {
+}
+
+@media (min-width: 980px) {
+ .visible-phone {
display: none !important;
}
- .visible-phone {
+ .visible-tablet {
+ display: none !important;
+ }
+ .visible-desktop {
display: inherit !important;
}
.hidden-phone {
+ display: inherit !important;
+ }
+ .hidden-tablet {
+ display: inherit !important;
+ }
+ .hidden-desktop {
display: none !important;
}
}
diff --git a/docs/docs.html b/docs/docs.html
index 976396eba7279c66b28f7a4284d92d2bf2342820..e62e44661f7343d551d52fc10643b554ebdc1293 100644
--- a/docs/docs.html
+++ b/docs/docs.html
@@ -1896,7 +1896,7 @@ For example, <code><section></code> should be wrapped as inline.
{% endhighlight %}
<h3 id="forms-control-sizes">Control sizing</h3>
- <p>Use relative sizing classes like <code>.input-large</code> or match your inputs to the grid column sizes using <code>.span*</code> classes.</p>
+ <p>Use relative sizing classes like <code>.input-large</code> or match your inputs to the grid column sizes using <code>.col-span-*</code> classes.</p>
<h4>Relative sizing</h4>
<p>Create larger or smaller form controls that match button sizes.</p>
@@ -2679,7 +2679,7 @@ For example, <code><section></code> should be wrapped as inline.
<div class="controls">
<div class="input-group">
<span class="input-group-addon"><span class="glyphicon glyphicon-envelope"></span></span>
- <input class="span2" id="inputIcon" type="text">
+ <input class="col-span-2" id="inputIcon" type="text">
</div>
</div>
</div>
@@ -2690,7 +2690,7 @@ For example, <code><section></code> should be wrapped as inline.
<div class="controls">
<div class="input-group">
<span class="input-group-addon"><span class="glyphicon glyphicon-envelope"></span></span>
- <input class="span2" id="inputIcon" type="text">
+ <input class="col-span-2" id="inputIcon" type="text">
</div>
</div>
</div>
@@ -3761,7 +3761,7 @@ body {
<h1>Breadcrumbs <small></small></h1>
</div>
<p class="lead">Indicate the current page's location within a navigational hierarchy.</p>
-
+ <p>Separators are automatically added in CSS through `:after` and `content`.</p>
<div class="bs-docs-example">
<ul class="breadcrumb">
<li class="active">Home</li>
@@ -4246,7 +4246,7 @@ body {
<h3 id="alerts-alternatives">Contextual alternatives</h3>
<p>Add optional classes to change an alert's connotation.</p>
<div class="bs-docs-example">
- <div class="alert alert-error">
+ <div class="alert alert-danger">
<button type="button" class="close" data-dismiss="alert">×</button>
<strong>Oh snap!</strong> Change a few things up and try submitting again.
</div>
@@ -4260,7 +4260,7 @@ body {
</div>
</div>
{% highlight html linenos %}
-<div class="alert alert-error">...</div>
+<div class="alert alert-danger">...</div>
<div class="alert alert-success">...</div>
<div class="alert alert-info">...</div>
{% endhighlight %}
@@ -5327,7 +5327,7 @@ $('.dropdown-toggle').dropdown()
<h2>Example in navbar</h2>
<p>The ScrollSpy plugin is for automatically updating nav targets based on scroll position. Scroll the area below the navbar and watch the active class change. The dropdown sub items will be highlighted as well.</p>
<div class="bs-docs-example">
- <div id="navbarExample" class="navbar navbar-static">
+ <div id="navbar-example" class="navbar navbar-static">
<div class="navbar-inner">
<div class="container" style="width: auto;">
<a class="navbar-brand" href="#">Project Name</a>
@@ -5347,7 +5347,7 @@ $('.dropdown-toggle').dropdown()
</div>
</div>
</div>
- <div data-spy="scroll" data-target="#navbarExample" data-offset="0" class="scrollspy-example">
+ <div data-spy="scroll" data-target="#navbar-example" data-offset="0" class="scrollspy-example">
<h4 id="fat">@fat</h4>
<p>Ad leggings keytar, brunch id art party dolor labore. Pitchfork yr enim lo-fi before they sold out qui. Tumblr farm-to-table bicycle rights whatever. Anim keffiyeh carles cardigan. Velit seitan mcsweeney's photo booth 3 wolf moon irure. Cosby sweater lomo jean shorts, williamsburg hoodie minim qui you probably haven't heard of them et cardigan trust fund culpa biodiesel wes anderson aesthetic. Nihil tattooed accusamus, cred irony biodiesel keffiyeh artisan ullamco consequat.</p>
<h4 id="mdo">@mdo</h4>
@@ -5364,15 +5364,12 @@ $('.dropdown-toggle').dropdown()
</div><!-- /example -->
- <hr class="bs-docs-separator">
-
-
<h2>Usage</h2>
<h3>Via data attributes</h3>
- <p>To easily add scrollspy behavior to your topbar navigation, just add <code>data-spy="scroll"</code> to the element you want to spy on (most typically this would be the body) and <code>data-target=".navbar"</code> to select which nav to use. You'll want to use scrollspy with a <code>.nav</code> component.</p>
+ <p>To easily add scrollspy behavior to your topbar navigation, add <code>data-spy="scroll"</code> to the element you want to spy on (most typically this would be the <code><body></code>. Then add the <code>data-target</code> attribute with the ID or class of the parent element of any Bootstrap <code>.nav</code> component.</p>
{% highlight html linenos %}
-<body data-spy="scroll" data-target=".navbar">
+<body data-spy="scroll" data-target="#navbar-example">
...
</body>
{% endhighlight %}
@@ -5380,7 +5377,7 @@ $('.dropdown-toggle').dropdown()
<h3>Via JavaScript</h3>
<p>Call the scrollspy via JavaScript:</p>
{% highlight js linenos %}
-$('.navbar').scrollspy()
+$('#navbar-example').scrollspy()
{% endhighlight %}
<div class="bs-docs-sidenote">
@@ -6332,11 +6329,11 @@ $('#myCollapsible').on('hidden', function () {
<h2>Examples</h2>
<p>The slideshow below shows a generic plugin and component for cycling through elements like a carousel.</p>
<div class="bs-docs-example">
- <div class="carousel slide bs-docs-carousel-example">
+ <div id="carousel-example-generic" class="carousel slide bs-docs-carousel-example">
<ol class="carousel-indicators">
- <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
- <li data-target="#myCarousel" data-slide-to="1"></li>
- <li data-target="#myCarousel" data-slide-to="2"></li>
+ <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
+ <li data-target="#carousel-example-generic" data-slide-to="1"></li>
+ <li data-target="#carousel-example-generic" data-slide-to="2"></li>
</ol>
<div class="carousel-inner">
<div class="item active">
@@ -6349,21 +6346,21 @@ $('#myCollapsible').on('hidden', function () {
<img data-src="holder.js/900x500/auto/#777:#fff/text:Third slide" alt="">
</div>
</div>
- <a class="left carousel-control" href="#myCarousel" data-slide="prev">
+ <a class="left carousel-control" href="#carousel-example-generic" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left"></span>
</a>
- <a class="right carousel-control" href="#myCarousel" data-slide="next">
+ <a class="right carousel-control" href="#carousel-example-generic" data-slide="next">
<span class="glyphicon glyphicon-chevron-right"></span>
</a>
</div>
</div><!-- /example -->
{% highlight html linenos %}
-<div class="carousel slide">
+<div id="carousel-example-generic" class="carousel slide">
<!-- Indicators -->
<ol class="carousel-indicators">
- <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
- <li data-target="#myCarousel" data-slide-to="1"></li>
- <li data-target="#myCarousel" data-slide-to="2"></li>
+ <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
+ <li data-target="#carousel-example-generic" data-slide-to="1"></li>
+ <li data-target="#carousel-example-generic" data-slide-to="2"></li>
</ol>
<!-- Wrapper for slides -->
@@ -6378,10 +6375,10 @@ $('#myCollapsible').on('hidden', function () {
</div>
<!-- Controls -->
- <a class="left carousel-control" href="#myCarousel" data-slide="prev">
+ <a class="left carousel-control" href="#carousel-example-generic" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left"></span>
</a>
- <a class="right carousel-control" href="#myCarousel" data-slide="next">
+ <a class="right carousel-control" href="#carousel-example-generic" data-slide="next">
<span class="glyphicon glyphicon-chevron-right"></span>
</a>
</div>
@@ -6394,11 +6391,11 @@ $('#myCollapsible').on('hidden', function () {
<p><strong>Captions are hidden by default</strong> and will show up only with viewports greater than 768px wide.</p>
</div>
<div class="bs-docs-example">
- <div class="carousel slide bs-docs-carousel-example">
+ <div id="carousel-example-captions" class="carousel slide bs-docs-carousel-example">
<ol class="carousel-indicators">
- <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
- <li data-target="#myCarousel" data-slide-to="1"></li>
- <li data-target="#myCarousel" data-slide-to="2"></li>
+ <li data-target="#carousel-example-captions" data-slide-to="0" class="active"></li>
+ <li data-target="#carousel-example-captions" data-slide-to="1"></li>
+ <li data-target="#carousel-example-captions" data-slide-to="2"></li>
</ol>
<div class="carousel-inner">
<div class="item active">
@@ -6423,10 +6420,10 @@ $('#myCollapsible').on('hidden', function () {
</div>
</div>
</div>
- <a class="left carousel-control" href="#myCarousel" data-slide="prev">
+ <a class="left carousel-control" href="#carousel-example-captions" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left"></span>
</a>
- <a class="right carousel-control" href="#myCarousel" data-slide="next">
+ <a class="right carousel-control" href="#carousel-example-captions" data-slide="next">
<span class="glyphicon glyphicon-chevron-right"></span>
</a>
</div>
diff --git a/less/alerts.less b/less/alerts.less
index e3637ead91255ea86c45beed2b23a4f8327931c8..882b25bef9bfef7e8026c98313bece3c963a40a2 100644
--- a/less/alerts.less
+++ b/less/alerts.less
@@ -9,10 +9,10 @@
.alert {
padding: 8px 35px 8px 14px;
margin-bottom: @line-height-base;
- color: @state-warning-text;
- background-color: @state-warning-bg;
- border: 1px solid @state-warning-border;
- border-radius: @border-radius-base;
+ color: @alert-text;
+ background-color: @alert-bg;
+ border: 1px solid @alert-border;
+ border-radius: @alert-border-radius;
// Headings for larger alerts
h4 {
@@ -22,13 +22,13 @@
}
// Match the hr to the border of the alert
hr {
- border-top-color: darken(@state-warning-border, 5%);
+ border-top-color: darken(@alert-border, 5%);
}
// Inherit color for immediate links and bolden them some
> a,
> p > a {
font-weight: 500;
- color: darken(@state-warning-text, 10%);
+ color: darken(@alert-text, 10%);
}
// Adjust close link position
@@ -44,40 +44,39 @@
// -------------------------
.alert-success {
- background-color: @state-success-bg;
- border-color: @state-success-border;
- color: @state-success-text;
+ background-color: @alert-success-bg;
+ border-color: @alert-success-border;
+ color: @alert-success-text;
hr {
- border-top-color: darken(@state-success-border, 5%);
+ border-top-color: darken(@alert-success-border, 5%);
}
> a,
> p > a {
- color: darken(@state-success-text, 10%);
+ color: darken(@alert-success-text, 10%);
}
}
-.alert-danger,
-.alert-error {
- background-color: @state-danger-bg;
- border-color: @state-danger-border;
- color: @state-danger-text;
+.alert-danger {
+ background-color: @alert-danger-bg;
+ border-color: @alert-danger-border;
+ color: @alert-danger-text;
hr {
- border-top-color: darken(@state-danger-border, 5%);
+ border-top-color: darken(@alert-danger-border, 5%);
}
> a,
> p > a {
- color: darken(@state-danger-text, 10%);
+ color: darken(@alert-danger-text, 10%);
}
}
.alert-info {
- background-color: @state-info-bg;
- border-color: @state-info-border;
- color: @state-info-text;
+ background-color: @alert-info-bg;
+ border-color: @alert-info-border;
+ color: @alert-info-text;
hr {
- border-top-color: darken(@state-info-border, 5%);
+ border-top-color: darken(@alert-info-border, 5%);
}
> a,
> p > a {
- color: darken(@state-info-text, 10%);
+ color: darken(@alert-info-text, 10%);
}
}
diff --git a/less/badges.less b/less/badges.less
index 9cbb0f23a0d4f667be7e491ef986356f03c8a549..4281550f0d4f10265b082b6322bfd0b1aa1cd5a4 100644
--- a/less/badges.less
+++ b/less/badges.less
@@ -15,7 +15,7 @@
vertical-align: middle;
white-space: nowrap;
text-align: center;
- background-color: @grayLight;
+ background-color: @gray-light;
border-radius: 10px;
// Empty labels/badges collapse
diff --git a/less/breadcrumbs.less b/less/breadcrumbs.less
index 9d8f23af2f1d292803802678e02bff807cdc701f..feb4f771d49cebd58157d932f30e4ac6e0b59b77 100644
--- a/less/breadcrumbs.less
+++ b/less/breadcrumbs.less
@@ -23,6 +23,6 @@
}
}
> .active {
- color: @grayLight;
+ color: @gray-light;
}
}
diff --git a/less/buttons.less b/less/buttons.less
index a412bd5ff561e80fae79dae62a57350847dc216d..b65e3fdc7ef5a8ae15060319774d9a378d6b5fc0 100644
--- a/less/buttons.less
+++ b/less/buttons.less
@@ -168,7 +168,7 @@ fieldset[disabled] .btn-link {
fieldset[disabled] & {
&:hover,
&:focus {
- color: @grayDark;
+ color: @gray-dark;
text-decoration: none;
}
}
diff --git a/less/code.less b/less/code.less
index c55f32fe7e90c3cb643b4551289b455e59ea0e74..d9ddbc3a448e446a453fb4abe1a6474ef31a6e4f 100644
--- a/less/code.less
+++ b/less/code.less
@@ -9,7 +9,7 @@ pre {
padding: 0 3px 2px;
font-family: @font-family-monospace;
font-size: (@font-size-base - 2);
- color: @grayDark;
+ color: @gray-dark;
border-radius: 4px;
}
diff --git a/less/dropdowns.less b/less/dropdowns.less
index 7f9f776035aa08b425d865178832053923afccdc..c4fd8598bb5d0bd405fdfd2164c3317d365afb56 100644
--- a/less/dropdowns.less
+++ b/less/dropdowns.less
@@ -103,7 +103,7 @@
.dropdown-menu > .disabled > a,
.dropdown-menu > .disabled > a:hover,
.dropdown-menu > .disabled > a:focus {
- color: @grayLight;
+ color: @gray-light;
}
// Nuke hover/focus effects
.dropdown-menu > .disabled > a:hover,
diff --git a/less/forms.less b/less/forms.less
index 8ef99d0e257a5cfd08593a69c710f71ed895eb75..e0017fac7fe7a5df9f3ede6f0b74d6f40283a093 100644
--- a/less/forms.less
+++ b/less/forms.less
@@ -23,7 +23,7 @@ legend {
margin-bottom: @line-height-base;
font-size: (@font-size-base * 1.5);
line-height: (@line-height-base * 2);
- color: @grayDark;
+ color: @gray-dark;
border: 0;
border-bottom: 1px solid #e5e5e5;
}
@@ -426,7 +426,7 @@ select:focus:invalid {
line-height: @line-height-base;
text-align: center;
text-shadow: 0 1px 0 #fff;
- background-color: @grayLighter;
+ background-color: @gray-lighter;
border: 1px solid #ccc;
&.input-small {
diff --git a/less/labels.less b/less/labels.less
index 74018b1deed217e7e4053f2c566003637e7a0994..dbaff88642a0f20bb3a7e388a3bd4a5139765642 100644
--- a/less/labels.less
+++ b/less/labels.less
@@ -14,7 +14,7 @@
vertical-align: middle;
white-space: nowrap;
text-align: center;
- background-color: @grayLight;
+ background-color: @gray-light;
border-radius: .25em;
// Hover state, but only for links - as a mixin which will be accessible as LESS shorthand: .label > .a;
@@ -95,4 +95,4 @@ a.label {
.label-info {
.label > .label-info;
.label > .label-info > .a;
-}
\ No newline at end of file
+}
diff --git a/less/mixins.less b/less/mixins.less
index 49aaba87693e694f9ecaafa8bce8151fc8be14c1..de054784d89ef1ef48f50fc01724ba25840c7a2d 100644
--- a/less/mixins.less
+++ b/less/mixins.less
@@ -248,20 +248,18 @@
#gradient {
.horizontal(@startColor: #555, @endColor: #333) {
background-color: @endColor;
- background-image: -moz-linear-gradient(left, @startColor, @endColor); // FF 3.6+
background-image: -webkit-gradient(linear, 0 0, 100% 0, from(@startColor), to(@endColor)); // Safari 4+, Chrome 2+
background-image: -webkit-linear-gradient(left, @startColor, @endColor); // Safari 5.1+, Chrome 10+
- background-image: -o-linear-gradient(left, @startColor, @endColor); // Opera 11.10
+ background-image: -moz-linear-gradient(left, @startColor, @endColor); // FF 3.6+
background-image: linear-gradient(to right, @startColor, @endColor); // Standard, IE10
background-repeat: repeat-x;
filter: e(%("progid:DXImageTransform.Microsoft.gradient(startColorstr='%d', endColorstr='%d', GradientType=1)",argb(@startColor),argb(@endColor))); // IE9 and down
}
.vertical(@startColor: #555, @endColor: #333) {
background-color: @endColor;
- background-image: -moz-linear-gradient(top, @startColor, @endColor); // FF 3.6+
background-image: -webkit-gradient(linear, 0 0, 0 100%, from(@startColor), to(@endColor)); // Safari 4+, Chrome 2+
background-image: -webkit-linear-gradient(top, @startColor, @endColor); // Safari 5.1+, Chrome 10+
- background-image: -o-linear-gradient(top, @startColor, @endColor); // Opera 11.10
+ background-image: -moz-linear-gradient(top, @startColor, @endColor); // FF 3.6+
background-image: linear-gradient(to bottom, @startColor, @endColor); // Standard, IE10
background-repeat: repeat-x;
filter: e(%("progid:DXImageTransform.Microsoft.gradient(startColorstr='%d', endColorstr='%d', GradientType=0)",argb(@startColor),argb(@endColor))); // IE9 and down
@@ -269,9 +267,8 @@
.directional(@startColor: #555, @endColor: #333, @deg: 45deg) {
background-color: @endColor;
background-repeat: repeat-x;
- background-image: -moz-linear-gradient(@deg, @startColor, @endColor); // FF 3.6+
background-image: -webkit-linear-gradient(@deg, @startColor, @endColor); // Safari 5.1+, Chrome 10+
- background-image: -o-linear-gradient(@deg, @startColor, @endColor); // Opera 11.10
+ background-image: -moz-linear-gradient(@deg, @startColor, @endColor); // FF 3.6+
background-image: linear-gradient(@deg, @startColor, @endColor); // Standard, IE10
}
.horizontal-three-colors(@startColor: #00b3ee, @midColor: #7a43b6, @colorStop: 50%, @endColor: #c3325f) {
@@ -279,7 +276,6 @@
background-image: -webkit-gradient(left, linear, 0 0, 0 100%, from(@startColor), color-stop(@colorStop, @midColor), to(@endColor));
background-image: -webkit-linear-gradient(left, @startColor, @midColor @colorStop, @endColor);
background-image: -moz-linear-gradient(left, @startColor, @midColor @colorStop, @endColor);
- background-image: -o-linear-gradient(left, @startColor, @midColor @colorStop, @endColor);
background-image: linear-gradient(to right, @startColor, @midColor @colorStop, @endColor);
background-repeat: no-repeat;
filter: e(%("progid:DXImageTransform.Microsoft.gradient(startColorstr='%d', endColorstr='%d', GradientType=1)",argb(@startColor),argb(@endColor))); // IE9 and down, gets no color-stop at all for proper fallback
@@ -290,7 +286,6 @@
background-image: -webkit-gradient(linear, 0 0, 0 100%, from(@startColor), color-stop(@colorStop, @midColor), to(@endColor));
background-image: -webkit-linear-gradient(@startColor, @midColor @colorStop, @endColor);
background-image: -moz-linear-gradient(top, @startColor, @midColor @colorStop, @endColor);
- background-image: -o-linear-gradient(@startColor, @midColor @colorStop, @endColor);
background-image: linear-gradient(@startColor, @midColor @colorStop, @endColor);
background-repeat: no-repeat;
filter: e(%("progid:DXImageTransform.Microsoft.gradient(startColorstr='%d', endColorstr='%d', GradientType=0)",argb(@startColor),argb(@endColor))); // IE9 and down, gets no color-stop at all for proper fallback
@@ -300,7 +295,6 @@
background-image: -webkit-gradient(radial, center center, 0, center center, 460, from(@innerColor), to(@outerColor));
background-image: -webkit-radial-gradient(circle, @innerColor, @outerColor);
background-image: -moz-radial-gradient(circle, @innerColor, @outerColor);
- background-image: -o-radial-gradient(circle, @innerColor, @outerColor);
background-image: radial-gradient(circle, @innerColor, @outerColor);
background-repeat: no-repeat;
}
@@ -309,7 +303,6 @@
background-image: -webkit-gradient(linear, 0 100%, 100% 0, color-stop(.25, rgba(255,255,255,.15)), color-stop(.25, transparent), color-stop(.5, transparent), color-stop(.5, rgba(255,255,255,.15)), color-stop(.75, rgba(255,255,255,.15)), color-stop(.75, transparent), to(transparent));
background-image: -webkit-linear-gradient(@angle, rgba(255,255,255,.15) 25%, transparent 25%, transparent 50%, rgba(255,255,255,.15) 50%, rgba(255,255,255,.15) 75%, transparent 75%, transparent);
background-image: -moz-linear-gradient(@angle, rgba(255,255,255,.15) 25%, transparent 25%, transparent 50%, rgba(255,255,255,.15) 50%, rgba(255,255,255,.15) 75%, transparent 75%, transparent);
- background-image: -o-linear-gradient(@angle, rgba(255,255,255,.15) 25%, transparent 25%, transparent 50%, rgba(255,255,255,.15) 50%, rgba(255,255,255,.15) 75%, transparent 75%, transparent);
background-image: 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);
}
}
@@ -445,6 +438,16 @@
right: percentage((@columns / @grid-columns));
}
}
+// Small, mobile-first columns
+.make-small-column(@columns) {
+ position: relative;
+ float: left;
+ // Prevent columns from collapsing when empty
+ min-height: 1px;
+ // Set inner padding as gutters instead of margin
+ padding-left: (@grid-gutter-width / 2);
+ padding-right: (@grid-gutter-width / 2);
+}
diff --git a/less/navs.less b/less/navs.less
index 5455f510f3e2d79d40e485dbd426679a765b02e9..86e9caaf9f10216c90671e5dbcdae212dd932745 100644
--- a/less/navs.less
+++ b/less/navs.less
@@ -21,7 +21,7 @@
&:hover,
&:focus {
text-decoration: none;
- background-color: @grayLighter;
+ background-color: @gray-lighter;
}
}
@@ -33,12 +33,12 @@
// Gray out text
&.disabled > a {
- color: @grayLight;
+ color: @gray-light;
}
// Nuke hover effects
&.disabled > a:hover,
&.disabled > a:focus {
- color: @grayLight;
+ color: @gray-light;
text-decoration: none;
background-color: transparent;
cursor: default;
@@ -54,7 +54,7 @@
> .pull-right {
float: right;
}
-
+
// Dividers (basically an hr) within the dropdown
.divider {
.nav-divider();
@@ -75,7 +75,7 @@
> li {
float: left;
// Make the list-items overlay the bottom border
- margin-bottom: -1px;
+ margin-bottom: -1px;
// Actual tabs (as links)
> a {
@@ -84,7 +84,7 @@
border: 1px solid transparent;
border-radius: @border-radius-base @border-radius-base 0 0;
&:hover {
- border-color: @grayLighter @grayLighter #ddd;
+ border-color: @gray-lighter @gray-lighter #ddd;
}
}
@@ -96,7 +96,7 @@
background-color: @body-bg;
border: 1px solid #ddd;
border-bottom-color: transparent;
- cursor: default;
+ cursor: default;
}
}
// pulling this in mainly for less shorthand
@@ -128,7 +128,7 @@
&.active > a:hover,
&.active > a:focus {
color: #fff;
- background-color: @component-active-bg;
+ background-color: @component-active-bg;
}
}
}
@@ -141,7 +141,7 @@
+ li {
> a {
margin-top: 2px;
- margin-left: 0; // no need for this gap between nav items
+ margin-left: 0; // no need for this gap between nav items
}
}
}
@@ -186,7 +186,7 @@
font-size: 11px;
font-weight: bold;
line-height: @line-height-base;
- color: @grayLight;
+ color: @gray-light;
text-shadow: 0 1px 0 rgba(255,255,255,.5);
text-transform: uppercase;
}
@@ -264,8 +264,8 @@
.nav-pills .open .dropdown-toggle,
.nav > li.dropdown.open.active > a:hover {
color: #fff;
- background-color: @grayLight;
- border-color: @grayLight;
+ background-color: @gray-light;
+ border-color: @gray-light;
}
.nav li.dropdown.open .caret,
.nav li.dropdown.open.active .caret,
@@ -277,7 +277,7 @@
// Dropdowns in stacked tabs
.tabs-stacked .open > a:hover {
- border-color: @grayLight;
+ border-color: @gray-light;
}
*/
diff --git a/less/pager.less b/less/pager.less
index 105880086aee60ee829d83d7dd31d7fbd1ab4883..cc1947a91fcfadae656462489ebb34b18186e394 100644
--- a/less/pager.less
+++ b/less/pager.less
@@ -32,7 +32,7 @@
float: right;
}
}
-
+
.previous {
> a,
> span {
@@ -45,7 +45,7 @@
> a:hover,
> a:focus,
> span {
- color: @grayLight;
+ color: @gray-light;
background-color: @pagination-bg;
cursor: default;
}
diff --git a/less/pagination.less b/less/pagination.less
index c2158cef0bd0d841e978d82b1bae399fb2fd4095..bb44fa8cf9aca6fd84b08d5eb476de942a2d1f1d 100644
--- a/less/pagination.less
+++ b/less/pagination.less
@@ -27,14 +27,14 @@
}
.pagination > .active > a,
.pagination > .active > span {
- color: @grayLight;
+ color: @gray-light;
cursor: default;
}
.pagination > .disabled > span,
.pagination > .disabled > a,
.pagination > .disabled > a:hover,
.pagination > .disabled > a:focus {
- color: @grayLight;
+ color: @gray-light;
background-color: @pagination-bg;
cursor: default;
}
diff --git a/less/responsive-utilities.less b/less/responsive-utilities.less
index bf43e8ef73994c71dd69dd40839f835dbed592f9..4275264d918a342f2f80ba4fdf06a65b4b6182e2 100644
--- a/less/responsive-utilities.less
+++ b/less/responsive-utilities.less
@@ -5,11 +5,27 @@
// IE10 Metro responsive
// Required for Windows 8 Metro split-screen snapping with IE10
+//
// Source: http://timkadlec.com/2012/10/ie10-snap-mode-and-responsive-design/
@-ms-viewport{
width: device-width;
}
+// IE10 on Windows Phone 8
+// IE10 on WP8 doesn't report CSS pixels, but actual device pixels. In
+// other words, say on a Lumia, you'll get 768px as the device width,
+// meaning users will see the tablet styles and not phone styles.
+//
+// Alternatively you can override this with JS (see source below), but
+// we won't be doing that here given our limited scope.
+//
+// Source: http://timkadlec.com/2013/01/windows-phone-8-and-device-width/
+@media screen and (max-width: 400px) {
+ @-ms-viewport{
+ width: 320px;
+ }
+}
+
// Hide from screenreaders and browsers
// Credit: HTML5 Boilerplate
.hidden {
@@ -19,34 +35,36 @@
// Visibility utilities
-// For desktops
-.visible-phone { display: none !important; }
+// For Phones
+.visible-phone { display: inherit !important; }
.visible-tablet { display: none !important; }
-.hidden-phone { }
-.hidden-tablet { }
-.hidden-desktop { display: none !important; }
-.visible-desktop { display: inherit !important; }
+.visible-desktop { display: none !important; }
+
+.hidden-phone { display: none !important; }
+.hidden-tablet { display: inherit !important; }
+.hidden-desktop { display: inherit !important; }
+
// Tablets & small desktops only
@media (min-width: 768px) and (max-width: 979px) {
- // Hide everything else
- .hidden-desktop { display: inherit !important; }
- .visible-desktop { display: none !important ; }
- // Show
+ .visible-phone { display: none !important; }
.visible-tablet { display: inherit !important; }
- // Hide
+ .visible-desktop { display: none !important; }
+
+ .hidden-phone { display: inherit !important; }
.hidden-tablet { display: none !important; }
+ .hidden-desktop { display: inherit !important; }
}
-// Phones only
-@media (max-width: 767px) {
- // Hide everything else
- .hidden-desktop { display: inherit !important; }
- .visible-desktop { display: none !important; }
- // Show
- .visible-phone { display: inherit !important; } // Use inherit to restore previous behavior
- // Hide
- .hidden-phone { display: none !important; }
+// For desktops
+@media (min-width: 980px) {
+ .visible-phone { display: none !important; }
+ .visible-tablet { display: none !important; }
+ .visible-desktop { display: inherit !important; }
+
+ .hidden-phone { display: inherit !important; }
+ .hidden-tablet { display: inherit !important; }
+ .hidden-desktop { display: none !important; }
}
// Print utilities
@@ -56,4 +74,4 @@
@media print {
.visible-print { display: inherit !important; }
.hidden-print { display: none !important; }
-}
+}
\ No newline at end of file
diff --git a/less/thumbnails.less b/less/thumbnails.less
index 4ea27f517bd11d234b5967e61ee1a0b8c6813deb..f31d78617f0845e4e6e7551c603ba89acb5f3ca9 100644
--- a/less/thumbnails.less
+++ b/less/thumbnails.less
@@ -12,8 +12,9 @@
.img-thumbnail {
padding: 4px;
line-height: @line-height-base;
- border: 1px solid #ddd;
- border-radius: @border-radius-base;
+ background-color: @thumbnail-bg;
+ border: 1px solid @thumbnail-border;
+ border-radius: @thumbnail-border-radius;
.transition(all .2s ease-in-out);
}
.thumbnail {
@@ -38,5 +39,5 @@ a.thumbnail:focus {
}
.thumbnail .caption {
padding: 9px;
- color: @gray;
+ color: @thumbnail-caption-color;
}
diff --git a/less/type.less b/less/type.less
index 5305a0df6901cbb04863d641e20bbe2ed4911952..f6b5eecd58de792b675ca7eda9e8addfacaf2c64 100644
--- a/less/type.less
+++ b/less/type.less
@@ -28,9 +28,9 @@ em { font-style: italic; }
cite { font-style: normal; }
// Utility classes
-.text-muted { color: @grayLight; }
+.text-muted { color: @gray-light; }
a.text-muted:hover,
-a.text-muted:focus { color: darken(@grayLight, 10%); }
+a.text-muted:focus { color: darken(@gray-light, 10%); }
.text-warning { color: @state-warning-text; }
a.text-warning:hover,
@@ -60,7 +60,7 @@ h1, h2, h3, h4, h5, h6,
small {
font-weight: normal;
line-height: 1;
- color: @grayLight;
+ color: @gray-light;
}
}
@@ -100,7 +100,7 @@ h4 small, .h4 small { font-size: @font-size-base; }
.page-header {
padding-bottom: ((@line-height-base / 2) - 1);
margin: (@line-height-base * 2) 0 @line-height-base;
- border-bottom: 1px solid @grayLighter;
+ border-bottom: 1px solid @gray-lighter;
}
@@ -187,7 +187,7 @@ abbr[title],
// Added data-* attribute to help out our tooltip plugin, per https://github.com/twitter/bootstrap/issues/5257
abbr[data-original-title] {
cursor: help;
- border-bottom: 1px dotted @grayLight;
+ border-bottom: 1px dotted @gray-light;
}
abbr.initialism {
font-size: 90%;
@@ -196,19 +196,21 @@ abbr.initialism {
// Blockquotes
blockquote {
- padding: 0 0 0 15px;
+ padding: (@line-height-base/2) @line-height-base;
margin: 0 0 @line-height-base;
- border-left: 5px solid @grayLighter;
+ border-left: 5px solid @gray-lighter;
p {
- margin-bottom: 0;
font-size: (@font-size-base * 1.25);
font-weight: 300;
line-height: 1.25;
}
+ p:last-child {
+ margin-bottom: 0;
+ }
small {
display: block;
line-height: @line-height-base;
- color: @grayLight;
+ color: @gray-light;
&:before {
content: '\2014 \00A0';
}
@@ -219,7 +221,7 @@ blockquote {
float: right;
padding-right: 15px;
padding-left: 0;
- border-right: 5px solid @grayLighter;
+ border-right: 5px solid @gray-lighter;
border-left: 0;
p,
small {
diff --git a/less/variables.less b/less/variables.less
index 37e602631fe841a2aea2fb413b8694ae6357451b..1c19fd514339d8b099700a6d57145b2ae30962ed 100644
--- a/less/variables.less
+++ b/less/variables.less
@@ -10,11 +10,11 @@
// Grays
// -------------------------
-@grayDarker: #222;
-@grayDark: #333;
-@gray: #555;
-@grayLight: #999;
-@grayLighter: #eee;
+@gray-darker: lighten(#000, 13.5%); // #222
+@gray-dark: lighten(#000, 20%); // #333
+@gray: lighten(#000, 33.5%); // #555
+@gray-light: lighten(#000, 60%); // #999
+@gray-lighter: lighten(#000, 93.5%); // #eee
// Brand colors
// -------------------------
@@ -29,7 +29,7 @@
// -------------------------
@body-bg: #fff;
-@text-color: @grayDark;
+@text-color: @gray-dark;
// Links
// -------------------------
@@ -109,12 +109,12 @@
// -------------------------
@input-bg: #fff;
-@input-bg-disabled: @grayLighter;
+@input-bg-disabled: @gray-lighter;
@input-border: #ccc;
@input-border-radius: @border-radius-base;
-@input-color-placeholder: @grayLight;
+@input-color-placeholder: @gray-light;
@input-height-base: (@line-height-base + 14px); // base line-height + 12px vertical padding + 2px top/bottom border
@input-height-large: (@line-height-base + 24px); // base line-height + 22px vertical padding + 2px top/bottom border
@@ -134,7 +134,7 @@
@dropdown-link-active-color: #fff;
@dropdown-link-active-bg: @component-active-bg;
-@dropdown-link-color: @grayDark;
+@dropdown-link-color: @gray-dark;
@dropdown-link-hover-color: #fff;
@dropdown-link-hover-bg: @dropdown-link-active-bg;
@@ -184,11 +184,11 @@
@navbar-brand-hover-bg: transparent;
// Inverted navbar
-@navbar-inverse-text: @grayLight;
+@navbar-inverse-text: @gray-light;
@navbar-inverse-bg: #222;
// Inverted navbar links
-@navbar-inverse-link-color: @grayLight;
+@navbar-inverse-link-color: @gray-light;
@navbar-inverse-link-hover-color: #fff;
@navbar-inverse-link-hover-bg: transparent;
@navbar-inverse-link-active-color: @navbar-inverse-link-hover-color;
@@ -220,7 +220,7 @@
// Jumbotron
// -------------------------
-@jumbotron-bg: @grayLighter;
+@jumbotron-bg: @gray-lighter;
@jumbotron-heading-color: inherit;
@jumbotron-lead-color: inherit;
@@ -277,6 +277,25 @@
@modal-title-padding: 15px;
@modal-title-line-height: @line-height-base;
+// Alerts
+// -------------------------
+@alert-bg: @state-warning-bg;
+@alert-text: @state-warning-text;
+@alert-border: @state-warning-border;
+@alert-border-radius: @border-radius-base;
+
+@alert-success-bg: @state-success-bg;
+@alert-success-text: @state-success-text;
+@alert-success-border: @state-success-border;
+
+@alert-danger-bg: @state-danger-bg;
+@alert-danger-text: @state-danger-text;
+@alert-danger-border: @state-danger-border;
+
+@alert-info-bg: @state-info-bg;
+@alert-info-text: @state-info-text;
+@alert-info-border: @state-info-border;
+
// Progress bars
// -------------------------
@@ -327,6 +346,14 @@
@panel-info-heading-bg: @state-info-bg;
+// Thumbnails
+// -------------------------
+@thumbnail-caption-color: @text-color;
+@thumbnail-bg: @body-bg;
+@thumbnail-border: #ddd;
+@thumbnail-border-radius: @border-radius-base;
+
+
// Wells
// -------------------------
@well-bg: #f5f5f5;
@@ -336,7 +363,7 @@
// -------------------------
// Hr border color
-@hr-border: @grayLighter;
+@hr-border: @gray-lighter;
// Horizontal forms & lists
@component-offset-horizontal: 180px;