{{_i}}The default and simple 940px-wide, centered layout for just about any website or page provided by a single <div class="container">.{{/i}}
-
+
<body>
@@ -219,9 +309,9 @@
{{_i}}Fluid layout{{/i}}
{{_i}}<div class="container-fluid"> gives flexible page structure, min- and max-widths, and a left-hand sidebar. It's great for apps and docs.{{/i}}
-
-
-
+
<div class="container-fluid">
diff --git a/docs/upgrading.html b/docs/upgrading.html
index 5416b9987..0c9ab1673 100644
--- a/docs/upgrading.html
+++ b/docs/upgrading.html
@@ -15,7 +15,7 @@
diff --git a/less/button-groups.less b/less/button-groups.less
index 4b0523df2..a04220a9a 100644
--- a/less/button-groups.less
+++ b/less/button-groups.less
@@ -133,7 +133,8 @@
.btn-primary,
.btn-danger,
.btn-info,
-.btn-success {
+.btn-success,
+.btn-inverse {
.caret {
border-top-color: @white;
.opacity(75);
diff --git a/less/buttons.less b/less/buttons.less
index 0dc9e374b..292e04626 100644
--- a/less/buttons.less
+++ b/less/buttons.less
@@ -16,7 +16,7 @@
text-align: center;
text-shadow: 0 1px 1px rgba(255,255,255,.75);
vertical-align: middle;
- #gradient > .vertical-three-colors(@white, @white, 25%, darken(@white, 10%)); // Don't use .gradientbar() here since it does a three-color gradient
+ .buttonBackground(@white, darken(@white, 10%));
border: 1px solid #ccc;
border-bottom-color: #bbb;
.border-radius(4px);
@@ -25,6 +25,7 @@
cursor: pointer;
// Give IE7 some love
+ .reset-filter();
.ie7-restore-left-whitespace();
}
@@ -106,7 +107,9 @@
.btn-success,
.btn-success:hover,
.btn-info,
-.btn-info:hover {
+.btn-info:hover,
+.btn-inverse,
+.btn-inverse:hover {
text-shadow: 0 -1px 0 rgba(0,0,0,.25);
color: @white;
}
@@ -115,7 +118,8 @@
.btn-warning.active,
.btn-danger.active,
.btn-success.active,
-.btn-info.active {
+.btn-info.active,
+.btn-dark.active {
color: rgba(255,255,255,.75);
}
@@ -140,6 +144,10 @@
.btn-info {
.buttonBackground(#5bc0de, #2f96b4);
}
+// Inverse appears as dark gray
+.btn-inverse {
+ .buttonBackground(#454545, #262626);
+}
// Cross-browser Jank
@@ -147,6 +155,8 @@
button.btn,
input[type="submit"].btn {
+
+ // Firefox 3.6 only I believe
&::-moz-focus-inner {
padding: 0;
border: 0;
diff --git a/less/forms.less b/less/forms.less
index 81833b064..be9dbfaa9 100644
--- a/less/forms.less
+++ b/less/forms.less
@@ -42,7 +42,13 @@ input,
button,
select,
textarea {
- #font > .sans-serif(@baseFontSize,normal,@baseLineHeight);
+ #font > .shorthand(@baseFontSize,normal,@baseLineHeight); // Set size, weight, line-height here
+}
+input,
+button,
+select,
+textarea {
+ #font > #family > .sans-serif(); // And only set font-family here for those that need it (note the missing label element)
}
// Identify controls by their labels
@@ -327,6 +333,7 @@ select:focus:required:invalid {
// ---------
.help-block {
+ display: block; // account for any element using help-block
margin-top: 5px;
margin-bottom: 0;
color: @grayLight;
@@ -395,6 +402,7 @@ select:focus:required:invalid {
.border-radius(3px 0 0 3px);
}
.uneditable-input {
+ border-left-color: #eee;
border-right-color: #ccc;
}
.add-on {
diff --git a/less/mixins.less b/less/mixins.less
index fffb6c1ce..93bb229b5 100644
--- a/less/mixins.less
+++ b/less/mixins.less
@@ -208,13 +208,13 @@
// Setup the mixins to be used
.columns(@fluidGridGutterWidth, @fluidGridColumnWidth, @columns) {
width: 1% * (@fluidGridColumnWidth * @columns) + (@fluidGridGutterWidth * (@columns - 1));
- }
+ }
.gridColumn(@fluidGridGutterWidth) {
float: left;
margin-left: @fluidGridGutterWidth;
}
// Take these values and mixins, and make 'em do their thang
- .generate(@gridColumns, @fluidGridColumnWidth, @fluidGridGutterWidth) {
+ .generate(@gridColumns, @fluidGridColumnWidth, @fluidGridGutterWidth) {
// Row surrounds the columns
.row-fluid {
width: 100%;
@@ -228,18 +228,18 @@
margin-left: 0;
}
// Default columns
- .span1 { #fluidGridSystem > .columns(@fluidGridGutterWidth, @fluidGridColumnWidth, 1); }
- .span2 { #fluidGridSystem > .columns(@fluidGridGutterWidth, @fluidGridColumnWidth, 2); }
- .span3 { #fluidGridSystem > .columns(@fluidGridGutterWidth, @fluidGridColumnWidth, 3); }
- .span4 { #fluidGridSystem > .columns(@fluidGridGutterWidth, @fluidGridColumnWidth, 4); }
- .span5 { #fluidGridSystem > .columns(@fluidGridGutterWidth, @fluidGridColumnWidth, 5); }
- .span6 { #fluidGridSystem > .columns(@fluidGridGutterWidth, @fluidGridColumnWidth, 6); }
- .span7 { #fluidGridSystem > .columns(@fluidGridGutterWidth, @fluidGridColumnWidth, 7); }
- .span8 { #fluidGridSystem > .columns(@fluidGridGutterWidth, @fluidGridColumnWidth, 8); }
- .span9 { #fluidGridSystem > .columns(@fluidGridGutterWidth, @fluidGridColumnWidth, 9); }
- .span10 { #fluidGridSystem > .columns(@fluidGridGutterWidth, @fluidGridColumnWidth, 10); }
- .span11 { #fluidGridSystem > .columns(@fluidGridGutterWidth, @fluidGridColumnWidth, 11); }
- .span12 { #fluidGridSystem > .columns(@fluidGridGutterWidth, @fluidGridColumnWidth, 12); }
+ > .span1 { #fluidGridSystem > .columns(@fluidGridGutterWidth, @fluidGridColumnWidth, 1); }
+ > .span2 { #fluidGridSystem > .columns(@fluidGridGutterWidth, @fluidGridColumnWidth, 2); }
+ > .span3 { #fluidGridSystem > .columns(@fluidGridGutterWidth, @fluidGridColumnWidth, 3); }
+ > .span4 { #fluidGridSystem > .columns(@fluidGridGutterWidth, @fluidGridColumnWidth, 4); }
+ > .span5 { #fluidGridSystem > .columns(@fluidGridGutterWidth, @fluidGridColumnWidth, 5); }
+ > .span6 { #fluidGridSystem > .columns(@fluidGridGutterWidth, @fluidGridColumnWidth, 6); }
+ > .span7 { #fluidGridSystem > .columns(@fluidGridGutterWidth, @fluidGridColumnWidth, 7); }
+ > .span8 { #fluidGridSystem > .columns(@fluidGridGutterWidth, @fluidGridColumnWidth, 8); }
+ > .span9 { #fluidGridSystem > .columns(@fluidGridGutterWidth, @fluidGridColumnWidth, 9); }
+ > .span10 { #fluidGridSystem > .columns(@fluidGridGutterWidth, @fluidGridColumnWidth, 10); }
+ > .span11 { #fluidGridSystem > .columns(@fluidGridGutterWidth, @fluidGridColumnWidth, 11); }
+ > .span12 { #fluidGridSystem > .columns(@fluidGridGutterWidth, @fluidGridColumnWidth, 12); }
}
}
}
@@ -270,6 +270,19 @@
}
}
+// Make a Grid
+// -------------------------
+// Use .makeRow and .makeColumn to assign semantic layouts grid system behavior
+.makeRow() {
+ margin-left: @gridGutterWidth * -1;
+ .clearfix();
+}
+.makeColumn(@columns: 1) {
+ float: left;
+ margin-left: @gridGutterWidth;
+ width: (@gridColumnWidth * @columns) + (@gridGutterWidth * (@columns - 1));
+}
+
// Form field states (used in forms.less)
diff --git a/less/modals.less b/less/modals.less
index aa14675ed..d1e06dc26 100644
--- a/less/modals.less
+++ b/less/modals.less
@@ -1,6 +1,7 @@
// MODALS
// ------
+// Recalculate z-index where appropriate
.modal-open {
.dropdown-menu { z-index: @zindexDropdown + @zindexModal; }
.dropdown.open { *z-index: @zindexDropdown + @zindexModal; }
@@ -8,6 +9,7 @@
.tooltip { z-index: @zindexTooltip + @zindexModal; }
}
+// Background
.modal-backdrop {
position: fixed;
top: 0;
@@ -25,6 +27,7 @@
.opacity(80);
}
+// Base modal
.modal {
position: fixed;
top: 50%;
@@ -53,9 +56,17 @@
// Close icon
.close { margin-top: 2px; }
}
+
+// Body (where all modal content resises)
.modal-body {
padding: 15px;
}
+// Remove bottom margin if need be
+.modal-body .modal-form {
+ margin-bottom: 0;
+}
+
+// Footer (for actions)
.modal-footer {
padding: 14px 15px 15px;
margin-bottom: 0;
diff --git a/less/navbar.less b/less/navbar.less
index 3ad2a0743..16553c1ff 100644
--- a/less/navbar.less
+++ b/less/navbar.less
@@ -81,7 +81,7 @@
margin-top: 5px; // make buttons vertically centered in navbar
}
.btn-group .btn {
- margin-top: 0;
+ margin-top: 0; // then undo the margin here so we don't accidentally double it
}
}
@@ -104,6 +104,14 @@
input[type="radio"] {
margin-top: 3px;
}
+ .input-append,
+ .input-prepend {
+ margin-top: 6px;
+ white-space: nowrap; // preven two items from separating within a .navbar-form that has .pull-left
+ input {
+ margin-top: 0; // remove the margin on top since it's on the parent
+ }
+ }
}
// Navbar search
@@ -133,7 +141,7 @@
background-color: @grayLight;
background-color: rgba(255,255,255,.5);
}
- // Focus states (we use .focused since IE8 and down doesn't support :focus)
+ // Focus states (we use .focused since IE7-8 and down doesn't support :focus)
&:focus,
&.focused {
padding: 5px 10px;
@@ -194,7 +202,7 @@
}
// Hover
.navbar .nav > li > a:hover {
- background-color: transparent;
+ background-color: @navbarLinkBackgroundHover; // "transparent" is default to differentiate :hover from .active
color: @navbarLinkColorHover;
text-decoration: none;
}
diff --git a/less/navs.less b/less/navs.less
index 0d37ea388..06219fa62 100644
--- a/less/navs.less
+++ b/less/navs.less
@@ -21,6 +21,21 @@
background-color: @grayLighter;
}
+// Nav headers (for dropdowns and lists)
+.nav .nav-header {
+ display: block;
+ padding: 3px 15px;
+ font-size: 11px;
+ font-weight: bold;
+ line-height: @baseLineHeight;
+ color: @grayLight;
+ text-shadow: 0 1px 0 rgba(255,255,255,.5);
+ text-transform: uppercase;
+}
+// Space them out when they follow another list item (link)
+.nav li + .nav-header {
+ margin-top: 9px;
+}
// NAV LIST
@@ -33,21 +48,12 @@
}
.nav-list > li > a,
.nav-list .nav-header {
- display: block;
- padding: 3px 15px;
margin-left: -15px;
margin-right: -15px;
text-shadow: 0 1px 0 rgba(255,255,255,.5);
}
-.nav-list .nav-header {
- font-size: 11px;
- font-weight: bold;
- line-height: @baseLineHeight;
- color: @grayLight;
- text-transform: uppercase;
-}
-.nav-list > li + .nav-header {
- margin-top: 9px;
+.nav-list > li > a {
+ padding: 3px 15px;
}
.nav-list .active > a,
.nav-list .active > a:hover {
diff --git a/less/responsive.less b/less/responsive.less
index 1e3bf371c..c55af0236 100644
--- a/less/responsive.less
+++ b/less/responsive.less
@@ -215,6 +215,10 @@
.navbar .nav > .divider-vertical {
display: none;
}
+ .navbar .nav .nav-header {
+ color: @navbarText;
+ text-shadow: none;
+ }
// Nav and dropdown links in navbar
.navbar .nav > li > a,
.navbar .dropdown-menu a {
diff --git a/less/variables.less b/less/variables.less
index ced64d7cd..3d448ab21 100644
--- a/less/variables.less
+++ b/less/variables.less
@@ -68,6 +68,7 @@
@navbarHeight: 40px;
@navbarBackground: @grayDarker;
@navbarBackgroundHighlight: @grayDark;
+@navbarLinkBackgroundHover: transparent;
@navbarText: @grayLight;
@navbarLinkColor: @grayLight;