kotovalexarian-likes-github/twbs--bootstrap
1
0
Fork 0
mirror of https://github.com/twbs/bootstrap.git synced 2022-11-09 12:25:43 -05:00
Code Releases Activity

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

Browse source
This commit is contained in:
Artur Kwiatkowski 2013-04-22 15:21:55 +02:00
commit b7dcefea83
19 changed files with 241 additions and 177 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
README.md
View file

@ -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.** Runs jshint and qunit tests headlessly in [phantomjs](http://code.google.com/p/phantomjs/) (used for ci). **Requires phantomjs.**
#### watch - `make watch` #### 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`. 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`.

93
docs/assets/css/bootstrap.css vendored
View file

@ -623,18 +623,21 @@ abbr.initialism {
} }
blockquote { blockquote {
padding: 0 0 0 15px; padding: 10px 20px;
margin: 0 0 20px; margin: 0 0 20px;
border-left: 5px solid #eeeeee; border-left: 5px solid #eeeeee;
} }
blockquote p { blockquote p {
margin-bottom: 0;
font-size: 17.5px; font-size: 17.5px;
font-weight: 300; font-weight: 300;
line-height: 1.25; line-height: 1.25;
} }
blockquote p:last-child {
margin-bottom: 0;
}
blockquote small { blockquote small {
display: block; display: block;
line-height: 20px; line-height: 20px;
@ -2874,10 +2877,9 @@ fieldset[disabled] .btn-link:focus {
color: #ffffff; color: #ffffff;
text-decoration: none; text-decoration: none;
background-color: #357ebd; 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-gradient(linear, 0 0, 0 100%, from(#428bca), to(#357ebd));
background-image: -webkit-linear-gradient(top, #428bca, #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-image: linear-gradient(to bottom, #428bca, #357ebd);
background-repeat: repeat-x; background-repeat: repeat-x;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff428bca', endColorstr='#ff357ebd', GradientType=0); filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff428bca', endColorstr='#ff357ebd', GradientType=0);
@ -2889,10 +2891,9 @@ fieldset[disabled] .btn-link:focus {
color: #ffffff; color: #ffffff;
text-decoration: none; text-decoration: none;
background-color: #357ebd; 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-gradient(linear, 0 0, 0 100%, from(#428bca), to(#357ebd));
background-image: -webkit-linear-gradient(top, #428bca, #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-image: linear-gradient(to bottom, #428bca, #357ebd);
background-repeat: repeat-x; background-repeat: repeat-x;
outline: 0; outline: 0;
@ -3470,8 +3471,8 @@ button.close {
.nav-pills .open .dropdown-toggle, .nav-pills .open .dropdown-toggle,
.nav > li.dropdown.open.active > a:hover { .nav > li.dropdown.open.active > a:hover {
color: #fff; color: #fff;
background-color: @grayLight; background-color: @gray-light;
border-color: @grayLight; border-color: @gray-light;
} }
.nav li.dropdown.open .caret, .nav li.dropdown.open .caret,
.nav li.dropdown.open.active .caret, .nav li.dropdown.open.active .caret,
@ -3483,7 +3484,7 @@ button.close {
// Dropdowns in stacked tabs // Dropdowns in stacked tabs
.tabs-stacked .open > a:hover { .tabs-stacked .open > a:hover {
border-color: @grayLight; border-color: @gray-light;
} }
*/ */
@ -4662,22 +4663,18 @@ button.close {
color: #356635; color: #356635;
} }
.alert-danger, .alert-danger {
.alert-error {
color: #b94a48; color: #b94a48;
background-color: #f2dede; background-color: #f2dede;
border-color: #eed3d7; border-color: #eed3d7;
} }
.alert-danger hr, .alert-danger hr {
.alert-error hr {
border-top-color: #e6c1c7; border-top-color: #e6c1c7;
} }
.alert-danger > a, .alert-danger > a,
.alert-error > a, .alert-danger > p > a {
.alert-danger > p > a,
.alert-error > p > a {
color: #953b39; color: #953b39;
} }
@ -4714,7 +4711,8 @@ button.close {
.img-thumbnail { .img-thumbnail {
padding: 4px; padding: 4px;
line-height: 20px; line-height: 20px;
border: 1px solid #ddd; background-color: #ffffff;
border: 1px solid #dddddd;
border-radius: 4px; border-radius: 4px;
-webkit-transition: all 0.2s ease-in-out; -webkit-transition: all 0.2s ease-in-out;
-moz-transition: all 0.2s ease-in-out; -moz-transition: all 0.2s ease-in-out;
@ -4744,7 +4742,7 @@ a.thumbnail:focus {
.thumbnail .caption { .thumbnail .caption {
padding: 9px; padding: 9px;
color: #555555; color: #333333;
} }
.media, .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-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: -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: -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); 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; -webkit-background-size: 40px 40px;
-moz-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-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: -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: -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); 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-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: -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: -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); 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-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: -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: -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); 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-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: -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: -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); 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 { .carousel-control.left {
background-color: rgba(0, 0, 0, 0.0001); background-color: rgba(0, 0, 0, 0.0001);
background-color: transparent; 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-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: -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-image: linear-gradient(to right, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.0001));
background-repeat: repeat-x; background-repeat: repeat-x;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#80000000', endColorstr='#00000000', GradientType=1); filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#80000000', endColorstr='#00000000', GradientType=1);
@ -5148,10 +5140,9 @@ a.list-group-item.active > .badge,
left: auto; left: auto;
background-color: rgba(0, 0, 0, 0.5); background-color: rgba(0, 0, 0, 0.5);
background-color: transparent; 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-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: -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-image: linear-gradient(to right, rgba(0, 0, 0, 0.0001), rgba(0, 0, 0, 0.5));
background-repeat: repeat-x; background-repeat: repeat-x;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#00000000', endColorstr='#80000000', GradientType=1); filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#00000000', endColorstr='#80000000', GradientType=1);
@ -5311,53 +5302,79 @@ a.list-group-item.active > .badge,
width: device-width; width: device-width;
} }
@media screen and (max-width: 400px) {
@-ms-viewport {
width: 320px;
}
}
.hidden { .hidden {
display: none; display: none;
visibility: hidden; visibility: hidden;
} }
.visible-phone { .visible-phone {
display: none !important; display: inherit !important;
} }
.visible-tablet { .visible-tablet {
display: none !important; display: none !important;
} }
.hidden-desktop { .visible-desktop {
display: none !important; display: none !important;
} }
.visible-desktop { .hidden-phone {
display: none !important;
}
.hidden-tablet {
display: inherit !important;
}
.hidden-desktop {
display: inherit !important; display: inherit !important;
} }
@media (min-width: 768px) and (max-width: 979px) { @media (min-width: 768px) and (max-width: 979px) {
.hidden-desktop { .visible-phone {
display: none !important;
}
.visible-tablet {
display: inherit !important; display: inherit !important;
} }
.visible-desktop { .visible-desktop {
display: none !important ; display: none !important;
} }
.visible-tablet { .hidden-phone {
display: inherit !important; display: inherit !important;
} }
.hidden-tablet { .hidden-tablet {
display: none !important; display: none !important;
} }
}
@media (max-width: 767px) {
.hidden-desktop { .hidden-desktop {
display: inherit !important; display: inherit !important;
} }
.visible-desktop { }
@media (min-width: 980px) {
.visible-phone {
display: none !important; display: none !important;
} }
.visible-phone { .visible-tablet {
display: none !important;
}
.visible-desktop {
display: inherit !important; display: inherit !important;
} }
.hidden-phone { .hidden-phone {
display: inherit !important;
}
.hidden-tablet {
display: inherit !important;
}
.hidden-desktop {
display: none !important; display: none !important;
} }
} }

61
docs/docs.html
View file

@ -1896,7 +1896,7 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
{% endhighlight %} {% endhighlight %}
<h3 id="forms-control-sizes">Control sizing</h3> <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> <h4>Relative sizing</h4>
<p>Create larger or smaller form controls that match button sizes.</p> <p>Create larger or smaller form controls that match button sizes.</p>
@ -2679,7 +2679,7 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
<div class="controls"> <div class="controls">
<div class="input-group"> <div class="input-group">
<span class="input-group-addon"><span class="glyphicon glyphicon-envelope"></span></span> <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> </div>
</div> </div>
@ -2690,7 +2690,7 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
<div class="controls"> <div class="controls">
<div class="input-group"> <div class="input-group">
<span class="input-group-addon"><span class="glyphicon glyphicon-envelope"></span></span> <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> </div>
</div> </div>
@ -3761,7 +3761,7 @@ body {
<h1>Breadcrumbs <small></small></h1> <h1>Breadcrumbs <small></small></h1>
</div> </div>
<p class="lead">Indicate the current page's location within a navigational hierarchy.</p> <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"> <div class="bs-docs-example">
<ul class="breadcrumb"> <ul class="breadcrumb">
<li class="active">Home</li> <li class="active">Home</li>
@ -4246,7 +4246,7 @@ body {
<h3 id="alerts-alternatives">Contextual alternatives</h3> <h3 id="alerts-alternatives">Contextual alternatives</h3>
<p>Add optional classes to change an alert's connotation.</p> <p>Add optional classes to change an alert's connotation.</p>
<div class="bs-docs-example"> <div class="bs-docs-example">
<div class="alert alert-error"> <div class="alert alert-danger">
<button type="button" class="close" data-dismiss="alert">&times;</button> <button type="button" class="close" data-dismiss="alert">&times;</button>
<strong>Oh snap!</strong> Change a few things up and try submitting again. <strong>Oh snap!</strong> Change a few things up and try submitting again.
</div> </div>
@ -4260,7 +4260,7 @@ body {
</div> </div>
</div> </div>
{% highlight html linenos %} {% 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-success">...</div>
<div class="alert alert-info">...</div> <div class="alert alert-info">...</div>
{% endhighlight %} {% endhighlight %}
@ -5327,7 +5327,7 @@ $('.dropdown-toggle').dropdown()
<h2>Example in navbar</h2> <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> <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 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="navbar-inner">
<div class="container" style="width: auto;"> <div class="container" style="width: auto;">
<a class="navbar-brand" href="#">Project Name</a> <a class="navbar-brand" href="#">Project Name</a>
@ -5347,7 +5347,7 @@ $('.dropdown-toggle').dropdown()
</div> </div>
</div> </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> <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> <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> <h4 id="mdo">@mdo</h4>
@ -5364,15 +5364,12 @@ $('.dropdown-toggle').dropdown()
</div><!-- /example --> </div><!-- /example -->
<hr class="bs-docs-separator">
<h2>Usage</h2> <h2>Usage</h2>
<h3>Via data attributes</h3> <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>&lt;body&gt;</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 %} {% highlight html linenos %}
<body data-spy="scroll" data-target=".navbar"> <body data-spy="scroll" data-target="#navbar-example">
... ...
</body> </body>
{% endhighlight %} {% endhighlight %}
@ -5380,7 +5377,7 @@ $('.dropdown-toggle').dropdown()
<h3>Via JavaScript</h3> <h3>Via JavaScript</h3>
<p>Call the scrollspy via JavaScript:</p> <p>Call the scrollspy via JavaScript:</p>
{% highlight js linenos %} {% highlight js linenos %}
$('.navbar').scrollspy() $('#navbar-example').scrollspy()
{% endhighlight %} {% endhighlight %}
<div class="bs-docs-sidenote"> <div class="bs-docs-sidenote">
@ -6332,11 +6329,11 @@ $('#myCollapsible').on('hidden', function () {
<h2>Examples</h2> <h2>Examples</h2>
<p>The slideshow below shows a generic plugin and component for cycling through elements like a carousel.</p> <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="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"> <ol class="carousel-indicators">
<li data-target="#myCarousel" data-slide-to="0" class="active"></li> <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
<li data-target="#myCarousel" data-slide-to="1"></li> <li data-target="#carousel-example-generic" data-slide-to="1"></li>
<li data-target="#myCarousel" data-slide-to="2"></li> <li data-target="#carousel-example-generic" data-slide-to="2"></li>
</ol> </ol>
<div class="carousel-inner"> <div class="carousel-inner">
<div class="item active"> <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=""> <img data-src="holder.js/900x500/auto/#777:#fff/text:Third slide" alt="">
</div> </div>
</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> <span class="glyphicon glyphicon-chevron-left"></span>
</a> </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> <span class="glyphicon glyphicon-chevron-right"></span>
</a> </a>
</div> </div>
</div><!-- /example --> </div><!-- /example -->
{% highlight html linenos %} {% highlight html linenos %}
<div class="carousel slide"> <div id="carousel-example-generic" class="carousel slide">
<!-- Indicators --> <!-- Indicators -->
<ol class="carousel-indicators"> <ol class="carousel-indicators">
<li data-target="#myCarousel" data-slide-to="0" class="active"></li> <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
<li data-target="#myCarousel" data-slide-to="1"></li> <li data-target="#carousel-example-generic" data-slide-to="1"></li>
<li data-target="#myCarousel" data-slide-to="2"></li> <li data-target="#carousel-example-generic" data-slide-to="2"></li>
</ol> </ol>
<!-- Wrapper for slides --> <!-- Wrapper for slides -->
@ -6378,10 +6375,10 @@ $('#myCollapsible').on('hidden', function () {
</div> </div>
<!-- Controls --> <!-- 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> <span class="glyphicon glyphicon-chevron-left"></span>
</a> </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> <span class="glyphicon glyphicon-chevron-right"></span>
</a> </a>
</div> </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> <p><strong>Captions are hidden by default</strong> and will show up only with viewports greater than 768px wide.</p>
</div> </div>
<div class="bs-docs-example"> <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"> <ol class="carousel-indicators">
<li data-target="#myCarousel" data-slide-to="0" class="active"></li> <li data-target="#carousel-example-captions" data-slide-to="0" class="active"></li>
<li data-target="#myCarousel" data-slide-to="1"></li> <li data-target="#carousel-example-captions" data-slide-to="1"></li>
<li data-target="#myCarousel" data-slide-to="2"></li> <li data-target="#carousel-example-captions" data-slide-to="2"></li>
</ol> </ol>
<div class="carousel-inner"> <div class="carousel-inner">
<div class="item active"> <div class="item active">
@ -6423,10 +6420,10 @@ $('#myCollapsible').on('hidden', function () {
</div> </div>
</div> </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> <span class="glyphicon glyphicon-chevron-left"></span>
</a> </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> <span class="glyphicon glyphicon-chevron-right"></span>
</a> </a>
</div> </div>

45
less/alerts.less
View file

@ -9,10 +9,10 @@
.alert { .alert {
padding: 8px 35px 8px 14px; padding: 8px 35px 8px 14px;
margin-bottom: @line-height-base; margin-bottom: @line-height-base;
color: @state-warning-text; color: @alert-text;
background-color: @state-warning-bg; background-color: @alert-bg;
border: 1px solid @state-warning-border; border: 1px solid @alert-border;
border-radius: @border-radius-base; border-radius: @alert-border-radius;
// Headings for larger alerts // Headings for larger alerts
h4 { h4 {
@ -22,13 +22,13 @@
} }
// Match the hr to the border of the alert // Match the hr to the border of the alert
hr { 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 // Inherit color for immediate links and bolden them some
> a, > a,
> p > a { > p > a {
font-weight: 500; font-weight: 500;
color: darken(@state-warning-text, 10%); color: darken(@alert-text, 10%);
} }
// Adjust close link position // Adjust close link position
@ -44,40 +44,39 @@
// ------------------------- // -------------------------
.alert-success { .alert-success {
background-color: @state-success-bg; background-color: @alert-success-bg;
border-color: @state-success-border; border-color: @alert-success-border;
color: @state-success-text; color: @alert-success-text;
hr { hr {
border-top-color: darken(@state-success-border, 5%); border-top-color: darken(@alert-success-border, 5%);
} }
> a, > a,
> p > a { > p > a {
color: darken(@state-success-text, 10%); color: darken(@alert-success-text, 10%);
} }
} }
.alert-danger, .alert-danger {
.alert-error { background-color: @alert-danger-bg;
background-color: @state-danger-bg; border-color: @alert-danger-border;
border-color: @state-danger-border; color: @alert-danger-text;
color: @state-danger-text;
hr { hr {
border-top-color: darken(@state-danger-border, 5%); border-top-color: darken(@alert-danger-border, 5%);
} }
> a, > a,
> p > a { > p > a {
color: darken(@state-danger-text, 10%); color: darken(@alert-danger-text, 10%);
} }
} }
.alert-info { .alert-info {
background-color: @state-info-bg; background-color: @alert-info-bg;
border-color: @state-info-border; border-color: @alert-info-border;
color: @state-info-text; color: @alert-info-text;
hr { hr {
border-top-color: darken(@state-info-border, 5%); border-top-color: darken(@alert-info-border, 5%);
} }
> a, > a,
> p > a { > p > a {
color: darken(@state-info-text, 10%); color: darken(@alert-info-text, 10%);
} }
} }

2
less/badges.less
View file

@ -15,7 +15,7 @@
vertical-align: middle; vertical-align: middle;
white-space: nowrap; white-space: nowrap;
text-align: center; text-align: center;
background-color: @grayLight; background-color: @gray-light;
border-radius: 10px; border-radius: 10px;
// Empty labels/badges collapse // Empty labels/badges collapse

2
less/breadcrumbs.less
View file

@ -23,6 +23,6 @@
} }
} }
> .active { > .active {
color: @grayLight; color: @gray-light;
} }
} }

2
less/buttons.less
View file

@ -168,7 +168,7 @@ fieldset[disabled] .btn-link {
fieldset[disabled] & { fieldset[disabled] & {
&:hover, &:hover,
&:focus { &:focus {
color: @grayDark; color: @gray-dark;
text-decoration: none; text-decoration: none;
} }
} }

2
less/code.less
View file

@ -9,7 +9,7 @@ pre {
padding: 0 3px 2px; padding: 0 3px 2px;
font-family: @font-family-monospace; font-family: @font-family-monospace;
font-size: (@font-size-base - 2); font-size: (@font-size-base - 2);
color: @grayDark; color: @gray-dark;
border-radius: 4px; border-radius: 4px;
} }

2
less/dropdowns.less
View file

@ -103,7 +103,7 @@
.dropdown-menu > .disabled > a, .dropdown-menu > .disabled > a,
.dropdown-menu > .disabled > a:hover, .dropdown-menu > .disabled > a:hover,
.dropdown-menu > .disabled > a:focus { .dropdown-menu > .disabled > a:focus {
color: @grayLight; color: @gray-light;
} }
// Nuke hover/focus effects // Nuke hover/focus effects
.dropdown-menu > .disabled > a:hover, .dropdown-menu > .disabled > a:hover,

4
less/forms.less
View file

@ -23,7 +23,7 @@ legend {
margin-bottom: @line-height-base; margin-bottom: @line-height-base;
font-size: (@font-size-base * 1.5); font-size: (@font-size-base * 1.5);
line-height: (@line-height-base * 2); line-height: (@line-height-base * 2);
color: @grayDark; color: @gray-dark;
border: 0; border: 0;
border-bottom: 1px solid #e5e5e5; border-bottom: 1px solid #e5e5e5;
} }
@ -426,7 +426,7 @@ select:focus:invalid {
line-height: @line-height-base; line-height: @line-height-base;
text-align: center; text-align: center;
text-shadow: 0 1px 0 #fff; text-shadow: 0 1px 0 #fff;
background-color: @grayLighter; background-color: @gray-lighter;
border: 1px solid #ccc; border: 1px solid #ccc;
&.input-small { &.input-small {

4
less/labels.less
View file

@ -14,7 +14,7 @@
vertical-align: middle; vertical-align: middle;
white-space: nowrap; white-space: nowrap;
text-align: center; text-align: center;
background-color: @grayLight; background-color: @gray-light;
border-radius: .25em; border-radius: .25em;
// Hover state, but only for links - as a mixin which will be accessible as LESS shorthand: .label > .a; // 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-info {
.label > .label-info; .label > .label-info;
.label > .label-info > .a; .label > .label-info > .a;
} }

23
less/mixins.less
View file

@ -248,20 +248,18 @@
#gradient { #gradient {
.horizontal(@startColor: #555, @endColor: #333) { .horizontal(@startColor: #555, @endColor: #333) {
background-color: @endColor; 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-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: -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-image: linear-gradient(to right, @startColor, @endColor); // Standard, IE10
background-repeat: repeat-x; background-repeat: repeat-x;
filter: e(%("progid:DXImageTransform.Microsoft.gradient(startColorstr='%d', endColorstr='%d', GradientType=1)",argb(@startColor),argb(@endColor))); // IE9 and down filter: e(%("progid:DXImageTransform.Microsoft.gradient(startColorstr='%d', endColorstr='%d', GradientType=1)",argb(@startColor),argb(@endColor))); // IE9 and down
} }
.vertical(@startColor: #555, @endColor: #333) { .vertical(@startColor: #555, @endColor: #333) {
background-color: @endColor; 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-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: -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-image: linear-gradient(to bottom, @startColor, @endColor); // Standard, IE10
background-repeat: repeat-x; background-repeat: repeat-x;
filter: e(%("progid:DXImageTransform.Microsoft.gradient(startColorstr='%d', endColorstr='%d', GradientType=0)",argb(@startColor),argb(@endColor))); // IE9 and down 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) { .directional(@startColor: #555, @endColor: #333, @deg: 45deg) {
background-color: @endColor; background-color: @endColor;
background-repeat: repeat-x; 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: -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 background-image: linear-gradient(@deg, @startColor, @endColor); // Standard, IE10
} }
.horizontal-three-colors(@startColor: #00b3ee, @midColor: #7a43b6, @colorStop: 50%, @endColor: #c3325f) { .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-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: -webkit-linear-gradient(left, @startColor, @midColor @colorStop, @endColor);
background-image: -moz-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-image: linear-gradient(to right, @startColor, @midColor @colorStop, @endColor);
background-repeat: no-repeat; 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 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-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: -webkit-linear-gradient(@startColor, @midColor @colorStop, @endColor);
background-image: -moz-linear-gradient(top, @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-image: linear-gradient(@startColor, @midColor @colorStop, @endColor);
background-repeat: no-repeat; 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 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-gradient(radial, center center, 0, center center, 460, from(@innerColor), to(@outerColor));
background-image: -webkit-radial-gradient(circle, @innerColor, @outerColor); background-image: -webkit-radial-gradient(circle, @innerColor, @outerColor);
background-image: -moz-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-image: radial-gradient(circle, @innerColor, @outerColor);
background-repeat: no-repeat; 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-gradient(linear, 0 100%, 100% 0, color-stop(.25, rgba(255,255,255,.15)), color-stop(.25, transparent), color-stop(.5, transparent), color-stop(.5, rgba(255,255,255,.15)), color-stop(.75, rgba(255,255,255,.15)), color-stop(.75, transparent), to(transparent));
background-image: -webkit-linear-gradient(@angle, rgba(255,255,255,.15) 25%, transparent 25%, transparent 50%, rgba(255,255,255,.15) 50%, rgba(255,255,255,.15) 75%, transparent 75%, transparent); background-image: -webkit-linear-gradient(@angle, rgba(255,255,255,.15) 25%, transparent 25%, transparent 50%, rgba(255,255,255,.15) 50%, rgba(255,255,255,.15) 75%, transparent 75%, transparent);
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: -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); 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)); 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);
}

26
less/navs.less
View file

@ -21,7 +21,7 @@
&:hover, &:hover,
&:focus { &:focus {
text-decoration: none; text-decoration: none;
background-color: @grayLighter; background-color: @gray-lighter;
} }
} }
@ -33,12 +33,12 @@
// Gray out text // Gray out text
&.disabled > a { &.disabled > a {
color: @grayLight; color: @gray-light;
} }
// Nuke hover effects // Nuke hover effects
&.disabled > a:hover, &.disabled > a:hover,
&.disabled > a:focus { &.disabled > a:focus {
color: @grayLight; color: @gray-light;
text-decoration: none; text-decoration: none;
background-color: transparent; background-color: transparent;
cursor: default; cursor: default;
@ -54,7 +54,7 @@
> .pull-right { > .pull-right {
float: right; float: right;
} }
// Dividers (basically an hr) within the dropdown // Dividers (basically an hr) within the dropdown
.divider { .divider {
.nav-divider(); .nav-divider();
@ -75,7 +75,7 @@
> li { > li {
float: left; float: left;
// Make the list-items overlay the bottom border // Make the list-items overlay the bottom border
margin-bottom: -1px; margin-bottom: -1px;
// Actual tabs (as links) // Actual tabs (as links)
> a { > a {
@ -84,7 +84,7 @@
border: 1px solid transparent; border: 1px solid transparent;
border-radius: @border-radius-base @border-radius-base 0 0; border-radius: @border-radius-base @border-radius-base 0 0;
&:hover { &:hover {
border-color: @grayLighter @grayLighter #ddd; border-color: @gray-lighter @gray-lighter #ddd;
} }
} }
@ -96,7 +96,7 @@
background-color: @body-bg; background-color: @body-bg;
border: 1px solid #ddd; border: 1px solid #ddd;
border-bottom-color: transparent; border-bottom-color: transparent;
cursor: default; cursor: default;
} }
} }
// pulling this in mainly for less shorthand // pulling this in mainly for less shorthand
@ -128,7 +128,7 @@
&.active > a:hover, &.active > a:hover,
&.active > a:focus { &.active > a:focus {
color: #fff; color: #fff;
background-color: @component-active-bg; background-color: @component-active-bg;
} }
} }
} }
@ -141,7 +141,7 @@
+ li { + li {
> a { > a {
margin-top: 2px; 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-size: 11px;
font-weight: bold; font-weight: bold;
line-height: @line-height-base; line-height: @line-height-base;
color: @grayLight; color: @gray-light;
text-shadow: 0 1px 0 rgba(255,255,255,.5); text-shadow: 0 1px 0 rgba(255,255,255,.5);
text-transform: uppercase; text-transform: uppercase;
} }
@ -264,8 +264,8 @@
.nav-pills .open .dropdown-toggle, .nav-pills .open .dropdown-toggle,
.nav > li.dropdown.open.active > a:hover { .nav > li.dropdown.open.active > a:hover {
color: #fff; color: #fff;
background-color: @grayLight; background-color: @gray-light;
border-color: @grayLight; border-color: @gray-light;
} }
.nav li.dropdown.open .caret, .nav li.dropdown.open .caret,
.nav li.dropdown.open.active .caret, .nav li.dropdown.open.active .caret,
@ -277,7 +277,7 @@
// Dropdowns in stacked tabs // Dropdowns in stacked tabs
.tabs-stacked .open > a:hover { .tabs-stacked .open > a:hover {
border-color: @grayLight; border-color: @gray-light;
} }
*/ */

4
less/pager.less
View file

@ -32,7 +32,7 @@
float: right; float: right;
} }
} }
.previous { .previous {
> a, > a,
> span { > span {
@ -45,7 +45,7 @@
> a:hover, > a:hover,
> a:focus, > a:focus,
> span { > span {
color: @grayLight; color: @gray-light;
background-color: @pagination-bg; background-color: @pagination-bg;
cursor: default; cursor: default;
} }

4
less/pagination.less
View file

@ -27,14 +27,14 @@
} }
.pagination > .active > a, .pagination > .active > a,
.pagination > .active > span { .pagination > .active > span {
color: @grayLight; color: @gray-light;
cursor: default; cursor: default;
} }
.pagination > .disabled > span, .pagination > .disabled > span,
.pagination > .disabled > a, .pagination > .disabled > a,
.pagination > .disabled > a:hover, .pagination > .disabled > a:hover,
.pagination > .disabled > a:focus { .pagination > .disabled > a:focus {
color: @grayLight; color: @gray-light;
background-color: @pagination-bg; background-color: @pagination-bg;
cursor: default; cursor: default;
} }

60
less/responsive-utilities.less
View file

@ -5,11 +5,27 @@
// IE10 Metro responsive // IE10 Metro responsive
// Required for Windows 8 Metro split-screen snapping with IE10 // Required for Windows 8 Metro split-screen snapping with IE10
//
// Source: http://timkadlec.com/2012/10/ie10-snap-mode-and-responsive-design/ // Source: http://timkadlec.com/2012/10/ie10-snap-mode-and-responsive-design/
@-ms-viewport{ @-ms-viewport{
width: device-width; 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 // Hide from screenreaders and browsers
// Credit: HTML5 Boilerplate // Credit: HTML5 Boilerplate
.hidden { .hidden {
@ -19,34 +35,36 @@
// Visibility utilities // Visibility utilities
// For desktops // For Phones
.visible-phone { display: none !important; } .visible-phone { display: inherit !important; }
.visible-tablet { display: none !important; } .visible-tablet { display: none !important; }
.hidden-phone { } .visible-desktop { display: none !important; }
.hidden-tablet { }
.hidden-desktop { display: none !important; } .hidden-phone { display: none !important; }
.visible-desktop { display: inherit !important; } .hidden-tablet { display: inherit !important; }
.hidden-desktop { display: inherit !important; }
// Tablets & small desktops only // Tablets & small desktops only
@media (min-width: 768px) and (max-width: 979px) { @media (min-width: 768px) and (max-width: 979px) {
// Hide everything else .visible-phone { display: none !important; }
.hidden-desktop { display: inherit !important; }
.visible-desktop { display: none !important ; }
// Show
.visible-tablet { display: inherit !important; } .visible-tablet { display: inherit !important; }
// Hide .visible-desktop { display: none !important; }
.hidden-phone { display: inherit !important; }
.hidden-tablet { display: none !important; } .hidden-tablet { display: none !important; }
.hidden-desktop { display: inherit !important; }
} }
// Phones only // For desktops
@media (max-width: 767px) { @media (min-width: 980px) {
// Hide everything else .visible-phone { display: none !important; }
.hidden-desktop { display: inherit !important; } .visible-tablet { display: none !important; }
.visible-desktop { display: none !important; } .visible-desktop { display: inherit !important; }
// Show
.visible-phone { display: inherit !important; } // Use inherit to restore previous behavior .hidden-phone { display: inherit !important; }
// Hide .hidden-tablet { display: inherit !important; }
.hidden-phone { display: none !important; } .hidden-desktop { display: none !important; }
} }
// Print utilities // Print utilities
@ -56,4 +74,4 @@
@media print { @media print {
.visible-print { display: inherit !important; } .visible-print { display: inherit !important; }
.hidden-print { display: none !important; } .hidden-print { display: none !important; }
} }

7
less/thumbnails.less
View file

@ -12,8 +12,9 @@
.img-thumbnail { .img-thumbnail {
padding: 4px; padding: 4px;
line-height: @line-height-base; line-height: @line-height-base;
border: 1px solid #ddd; background-color: @thumbnail-bg;
border-radius: @border-radius-base; border: 1px solid @thumbnail-border;
border-radius: @thumbnail-border-radius;
.transition(all .2s ease-in-out); .transition(all .2s ease-in-out);
} }
.thumbnail { .thumbnail {
@ -38,5 +39,5 @@ a.thumbnail:focus {
} }
.thumbnail .caption { .thumbnail .caption {
padding: 9px; padding: 9px;
color: @gray; color: @thumbnail-caption-color;
} }

22
less/type.less
View file

@ -28,9 +28,9 @@ em { font-style: italic; }
cite { font-style: normal; } cite { font-style: normal; }
// Utility classes // Utility classes
.text-muted { color: @grayLight; } .text-muted { color: @gray-light; }
a.text-muted:hover, 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; } .text-warning { color: @state-warning-text; }
a.text-warning:hover, a.text-warning:hover,
@ -60,7 +60,7 @@ h1, h2, h3, h4, h5, h6,
small { small {
font-weight: normal; font-weight: normal;
line-height: 1; line-height: 1;
color: @grayLight; color: @gray-light;
} }
} }
@ -100,7 +100,7 @@ h4 small, .h4 small { font-size: @font-size-base; }
.page-header { .page-header {
padding-bottom: ((@line-height-base / 2) - 1); padding-bottom: ((@line-height-base / 2) - 1);
margin: (@line-height-base * 2) 0 @line-height-base; 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 // Added data-* attribute to help out our tooltip plugin, per https://github.com/twitter/bootstrap/issues/5257
abbr[data-original-title] { abbr[data-original-title] {
cursor: help; cursor: help;
border-bottom: 1px dotted @grayLight; border-bottom: 1px dotted @gray-light;
} }
abbr.initialism { abbr.initialism {
font-size: 90%; font-size: 90%;
@ -196,19 +196,21 @@ abbr.initialism {
// Blockquotes // Blockquotes
blockquote { blockquote {
padding: 0 0 0 15px; padding: (@line-height-base/2) @line-height-base;
margin: 0 0 @line-height-base; margin: 0 0 @line-height-base;
border-left: 5px solid @grayLighter; border-left: 5px solid @gray-lighter;
p { p {
margin-bottom: 0;
font-size: (@font-size-base * 1.25); font-size: (@font-size-base * 1.25);
font-weight: 300; font-weight: 300;
line-height: 1.25; line-height: 1.25;
} }
p:last-child {
margin-bottom: 0;
}
small { small {
display: block; display: block;
line-height: @line-height-base; line-height: @line-height-base;
color: @grayLight; color: @gray-light;
&:before { &:before {
content: '\2014 \00A0'; content: '\2014 \00A0';
} }
@ -219,7 +221,7 @@ blockquote {
float: right; float: right;
padding-right: 15px; padding-right: 15px;
padding-left: 0; padding-left: 0;
border-right: 5px solid @grayLighter; border-right: 5px solid @gray-lighter;
border-left: 0; border-left: 0;
p, p,
small { small {

53
less/variables.less
View file

@ -10,11 +10,11 @@
// Grays // Grays
// ------------------------- // -------------------------
@grayDarker: #222; @gray-darker: lighten(#000, 13.5%); // #222
@grayDark: #333; @gray-dark: lighten(#000, 20%); // #333
@gray: #555; @gray: lighten(#000, 33.5%); // #555
@grayLight: #999; @gray-light: lighten(#000, 60%); // #999
@grayLighter: #eee; @gray-lighter: lighten(#000, 93.5%); // #eee
// Brand colors // Brand colors
// ------------------------- // -------------------------
@ -29,7 +29,7 @@
// ------------------------- // -------------------------
@body-bg: #fff; @body-bg: #fff;
@text-color: @grayDark; @text-color: @gray-dark;
// Links // Links
// ------------------------- // -------------------------
@ -109,12 +109,12 @@
// ------------------------- // -------------------------
@input-bg: #fff; @input-bg: #fff;
@input-bg-disabled: @grayLighter; @input-bg-disabled: @gray-lighter;
@input-border: #ccc; @input-border: #ccc;
@input-border-radius: @border-radius-base; @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-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 @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-color: #fff;
@dropdown-link-active-bg: @component-active-bg; @dropdown-link-active-bg: @component-active-bg;
@dropdown-link-color: @grayDark; @dropdown-link-color: @gray-dark;
@dropdown-link-hover-color: #fff; @dropdown-link-hover-color: #fff;
@dropdown-link-hover-bg: @dropdown-link-active-bg; @dropdown-link-hover-bg: @dropdown-link-active-bg;
@ -184,11 +184,11 @@
@navbar-brand-hover-bg: transparent; @navbar-brand-hover-bg: transparent;
// Inverted navbar // Inverted navbar
@navbar-inverse-text: @grayLight; @navbar-inverse-text: @gray-light;
@navbar-inverse-bg: #222; @navbar-inverse-bg: #222;
// Inverted navbar links // Inverted navbar links
@navbar-inverse-link-color: @grayLight; @navbar-inverse-link-color: @gray-light;
@navbar-inverse-link-hover-color: #fff; @navbar-inverse-link-hover-color: #fff;
@navbar-inverse-link-hover-bg: transparent; @navbar-inverse-link-hover-bg: transparent;
@navbar-inverse-link-active-color: @navbar-inverse-link-hover-color; @navbar-inverse-link-active-color: @navbar-inverse-link-hover-color;
@ -220,7 +220,7 @@
// Jumbotron // Jumbotron
// ------------------------- // -------------------------
@jumbotron-bg: @grayLighter; @jumbotron-bg: @gray-lighter;
@jumbotron-heading-color: inherit; @jumbotron-heading-color: inherit;
@jumbotron-lead-color: inherit; @jumbotron-lead-color: inherit;
@ -277,6 +277,25 @@
@modal-title-padding: 15px; @modal-title-padding: 15px;
@modal-title-line-height: @line-height-base; @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 // Progress bars
// ------------------------- // -------------------------
@ -327,6 +346,14 @@
@panel-info-heading-bg: @state-info-bg; @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 // Wells
// ------------------------- // -------------------------
@well-bg: #f5f5f5; @well-bg: #f5f5f5;
@ -336,7 +363,7 @@
// ------------------------- // -------------------------
// Hr border color // Hr border color
@hr-border: @grayLighter; @hr-border: @gray-lighter;
// Horizontal forms & lists // Horizontal forms & lists
@component-offset-horizontal: 180px; @component-offset-horizontal: 180px;