- Home @@ -4246,7 +4246,7 @@ body {
Contextual alternatives
Add optional classes to change an alert's connotation.
-
{% highlight html linenos %}
-
+
Oh snap! Change a few things up and try submitting again.
@@ -4260,7 +4260,7 @@ body {
...
+...
...
...
{% endhighlight %}
@@ -5327,7 +5327,7 @@ $('.dropdown-toggle').dropdown()
Example in navbar
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.
-
+
-
+
-
- -
@fat
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.
@mdo
@@ -5364,15 +5364,12 @@ $('.dropdown-toggle').dropdown()- -
Usage
Via data attributes
-To easily add scrollspy behavior to your topbar navigation, just add data-spy="scroll" to the element you want to spy on (most typically this would be the body) and data-target=".navbar" to select which nav to use. You'll want to use scrollspy with a .nav component.
To easily add scrollspy behavior to your topbar navigation, add data-spy="scroll" to the element you want to spy on (most typically this would be the <body>. Then add the data-target attribute with the ID or class of the parent element of any Bootstrap .nav component.
Via JavaScript
Call the scrollspy via JavaScript:
{% highlight js linenos %} -$('.navbar').scrollspy() +$('#navbar-example').scrollspy() {% endhighlight %}
@@ -6332,11 +6329,11 @@ $('#myCollapsible').on('hidden', function () {
Examples
The slideshow below shows a generic plugin and component for cycling through elements like a carousel.
-
{% highlight html linenos %}
-
@@ -6394,11 +6391,11 @@ $('#myCollapsible').on('hidden', function () {
Captions are hidden by default and will show up only with viewports greater than 768px wide.
-
diff --git a/less/alerts.less b/less/alerts.less
index e3637ead91..882b25bef9 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 9cbb0f23a0..4281550f0d 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 9d8f23af2f..feb4f771d4 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 a412bd5ff5..b65e3fdc7e 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 c55f32fe7e..d9ddbc3a44 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 7f9f776035..c4fd8598bb 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 8ef99d0e25..e0017fac7f 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 74018b1dee..dbaff88642 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 49aaba8769..de054784d8 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 5455f510f3..86e9caaf9f 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 105880086a..cc1947a91f 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 c2158cef0b..bb44fa8cf9 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 bf43e8ef73..4275264d91 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 4ea27f517b..f31d78617f 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 5305a0df69..f6b5eecd58 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 37e602631f..1c19fd5143 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;