diff --git a/docs/assets/css/bootstrap.css b/docs/assets/css/bootstrap.css
index fb95729d90..b87a1c8048 100644
--- a/docs/assets/css/bootstrap.css
+++ b/docs/assets/css/bootstrap.css
@@ -6,7 +6,7 @@
* http://www.apache.org/licenses/LICENSE-2.0
*
* Designed and built with all the love in the world @twitter by @mdo and @fat.
- * Date: Fri Jan 27 16:25:59 PST 2012
+ * Date: Fri Jan 27 16:35:26 PST 2012
*/
article,
aside,
@@ -822,6 +822,10 @@ input:focus:required:invalid:focus, textarea:focus:required:invalid:focus, selec
}
.help-inline {
display: inline-block;
+ *display: inline;
+ /* IE7 inline-block hack */
+
+ *zoom: 1;
margin-bottom: 9px;
vertical-align: middle;
padding-left: 5px;
@@ -1091,6 +1095,10 @@ table .span12 {
vertical-align: text-top;
width: 14px;
height: 14px;
+ *margin-right: .3em;
+}
+.icon:last-child {
+ *margin-left: 0;
}
.icon.white {
background-image: url(../img/glyphicons-halflings-white.png);
@@ -1458,11 +1466,15 @@ table .span12 {
.dropdown {
position: relative;
}
+.dropdown .dropdown-toggle {
+ *margin-bottom: -3px;
+}
.caret {
display: inline-block;
width: 0;
height: 0;
text-indent: -99999px;
+ *text-indent: 0;
vertical-align: top;
border-left: 4px solid transparent;
border-right: 4px solid transparent;
@@ -1474,7 +1486,6 @@ table .span12 {
.dropdown .caret {
margin-top: 8px;
margin-left: 2px;
- *margin-top: 7px;
}
.dropdown:hover .caret, .open.dropdown .caret {
opacity: 1;
@@ -1483,6 +1494,7 @@ table .span12 {
.dropdown-menu {
position: absolute;
top: 100%;
+ left: 0;
z-index: 1000;
float: left;
display: none;
@@ -1506,7 +1518,6 @@ table .span12 {
-webkit-background-clip: padding-box;
-moz-background-clip: padding;
background-clip: padding-box;
- zoom: 1;
*border-right-width: 2px;
*border-bottom-width: 2px;
}
@@ -1521,6 +1532,8 @@ table .span12 {
overflow: hidden;
background-color: #e5e5e5;
border-bottom: 1px solid #ffffff;
+ *width: 100%;
+ *margin: -5px 0 5px;
}
.dropdown-menu a {
display: block;
@@ -1536,6 +1549,9 @@ table .span12 {
text-decoration: none;
background-color: #0088cc;
}
+.dropdown.open {
+ *z-index: 1000;
+}
.dropdown.open .dropdown-toggle {
color: #ffffff;
background: #ccc;
@@ -1840,6 +1856,7 @@ table .span12 {
}
.tabs-left .tabs .active > a, .tabs-left .tabs .active > a:hover {
border-color: #ddd transparent #ddd #ddd;
+ *border-right-color: #ffffff;
}
.tabs-right .tabs {
float: right;
@@ -1857,6 +1874,7 @@ table .span12 {
}
.tabs-right .tabs .active > a, .tabs-right .tabs .active > a:hover {
border-color: #ddd #ddd #ddd transparent;
+ *border-left-color: #ffffff;
}
.navbar {
overflow: visible;
@@ -1926,7 +1944,7 @@ table .span12 {
line-height: 1;
color: #ffffff;
color: rgba(255, 255, 255, 0.75);
- background: #444;
+ background: #6a6a6a;
background: rgba(255, 255, 255, 0.3);
border: 1px solid #111;
-webkit-box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1), 0 1px 0px rgba(255, 255, 255, 0.15);
@@ -2555,8 +2573,6 @@ table .span12 {
.btn {
display: inline-block;
padding: 4px 10px 4px;
- *padding: 2px 10px;
- *margin-left: 4px;
font-size: 13px;
line-height: 18px;
color: #333333;
@@ -2579,6 +2595,7 @@ table .span12 {
-moz-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05);
cursor: pointer;
+ *margin-left: .3em;
}
.btn:first-child {
*margin-left: 0;
@@ -2626,7 +2643,7 @@ table .span12 {
box-shadow: none;
}
.btn.large {
- padding: 9px 14px 9px;
+ padding: 9px 14px;
font-size: 15px;
line-height: normal;
-webkit-border-radius: 5px;
@@ -2637,20 +2654,33 @@ table .span12 {
margin-top: 1px;
}
.btn.small {
- padding: 5px 9px 5px;
+ padding: 5px 9px;
font-size: 11px;
line-height: 16px;
}
.btn.small .icon {
margin-top: -2px;
}
+button.btn, input[type=submit].btn {
+ *padding-top: 2px;
+ *padding-bottom: 2px;
+}
button.btn::-moz-focus-inner, input[type=submit].btn::-moz-focus-inner {
padding: 0;
border: 0;
}
+button.btn.large, input[type=submit].btn.large {
+ *padding-top: 7px;
+ *padding-bottom: 7px;
+}
+button.btn.small, input[type=submit].btn.small {
+ *padding-top: 3px;
+ *padding-bottom: 3px;
+}
.btn-group {
position: relative;
*zoom: 1;
+ *margin-left: .3em;
}
.btn-group:before, .btn-group:after {
display: table;
@@ -2659,11 +2689,18 @@ button.btn::-moz-focus-inner, input[type=submit].btn::-moz-focus-inner {
.btn-group:after {
clear: both;
}
+.btn-group:first-child {
+ *margin-left: 0;
+}
.btn-group + .btn-group {
margin-left: 5px;
}
.btn-toolbar .btn-group {
display: inline-block;
+ *display: inline;
+ /* IE7 inline-block hack */
+
+ *zoom: 1;
}
.btn-group .btn {
position: relative;
@@ -2716,6 +2753,11 @@ button.btn::-moz-focus-inner, input[type=submit].btn::-moz-focus-inner {
-webkit-box-shadow: inset 1px 0 0 rgba(255, 255, 255, 0.125), inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05);
-moz-box-shadow: inset 1px 0 0 rgba(255, 255, 255, 0.125), inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05);
box-shadow: inset 1px 0 0 rgba(255, 255, 255, 0.125), inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05);
+ *padding-top: 5px;
+ *padding-bottom: 5px;
+}
+.btn-group.open {
+ *z-index: 1000;
}
.btn-group.open .dropdown-menu {
display: block;
diff --git a/docs/base-css.html b/docs/base-css.html
index 698b68ea19..efc7e18e2e 100644
--- a/docs/base-css.html
+++ b/docs/base-css.html
@@ -1034,6 +1034,12 @@
+
+
+
+ Some value here
+
+
@@ -1530,6 +1536,7 @@
+
+
+
+
+ Some value here
+
+
@@ -1463,4 +1469,4 @@
-
\ No newline at end of file
+
diff --git a/less/button-groups.less b/less/button-groups.less
index 5fb0a8e975..a058f03448 100644
--- a/less/button-groups.less
+++ b/less/button-groups.less
@@ -6,6 +6,7 @@
.btn-group {
position: relative;
.clearfix(); // clears the floated buttons
+ .ie7-restore-left-whitespace;
}
// Space out series of button groups
@@ -17,6 +18,7 @@
.btn-toolbar {
.btn-group {
display: inline-block;
+ .ie7-inline-block;
}
}
@@ -83,18 +85,27 @@
padding-right: 8px;
@shadow: inset 1px 0 0 rgba(255,255,255,.125), inset 0 1px 0 rgba(255,255,255,.2), 0 1px 2px rgba(0,0,0,.05);
.box-shadow(@shadow);
+ *padding-top: 5px;
+ *padding-bottom: 5px;
}
-// Reposition menu on open and round all corners
-.btn-group.open .dropdown-menu {
- display: block;
- margin-top: 1px;
- .border-radius(5px);
-}
-.btn-group.open .dropdown-toggle {
- background-image: none;
- @shadow: inset 0 1px 6px rgba(0,0,0,.15), 0 1px 2px rgba(0,0,0,.05);
- .box-shadow(@shadow);
+.btn-group.open {
+ // IE7's z-index only goes to the nearest positioned ancestor, which would
+ // make the menu appear below buttons that appeared later on the page
+ *z-index: @zindexDropdown;
+
+ // Reposition menu on open and round all corners
+ .dropdown-menu {
+ display: block;
+ margin-top: 1px;
+ .border-radius(5px);
+ }
+
+ .dropdown-toggle {
+ background-image: none;
+ @shadow: inset 0 1px 6px rgba(0,0,0,.15), 0 1px 2px rgba(0,0,0,.05);
+ .box-shadow(@shadow);
+ }
}
// Reposition the caret
diff --git a/less/buttons.less b/less/buttons.less
index 08620a3c3d..75fe48f8a7 100644
--- a/less/buttons.less
+++ b/less/buttons.less
@@ -35,31 +35,6 @@
}
}
-
-// Mixin for generating button backgrounds
-// ---------------------------------------
-.buttonBackground(@startColor, @endColor) {
- // gradientBar will set the background to a pleasing blend of these, to support IE<=9
- .gradientBar(@startColor, @endColor);
-
- // in these cases the gradient won't cover the background, so we override
- &:hover, &:active, &.active, &.disabled {
- background-color: @endColor;
- }
-
- // called out separately because IE8 would ignore otherwise
- &[disabled] {
- background-color: @endColor;
- }
-
- // IE 7 + 8 can't handle box-shadow to show active, so we darken a bit ourselves
- &:active,
- &.active {
- background-color: darken(@endColor, 10%) e("\9");
- }
-}
-
-
// Base styles
// -----------
@@ -67,13 +42,6 @@
// Button Base
display: inline-block;
padding: 4px 10px 4px;
- *padding: 2px 10px;
- // IE7 likes to collapse the whitespace before the button, so bring it back...
- *margin-left: 4px;
- &:first-child {
- // ...but not before the first button
- *margin-left: 0;
- }
font-size: @baseFontSize;
line-height: @baseLineHeight;
color: @grayDark;
@@ -87,6 +55,8 @@
.box-shadow(@shadow);
cursor: pointer;
+ .ie7-restore-left-whitespace;
+
&:hover {
color: @grayDark;
text-decoration: none;
@@ -131,7 +101,7 @@
// Button Sizes
&.large {
- padding: 9px 14px 9px;
+ padding: 9px 14px;
font-size: @baseFontSize + 2px;
line-height: normal;
.border-radius(5px);
@@ -140,7 +110,7 @@
margin-top: 1px;
}
&.small {
- padding: 5px 9px 5px;
+ padding: 5px 9px;
font-size: @baseFontSize - 2px;
line-height: @baseLineHeight - 2px;
}
@@ -156,4 +126,16 @@ input[type=submit].btn {
padding: 0;
border: 0;
}
+
+ // IE7 has some default padding on button controls
+ *padding-top: 2px;
+ *padding-bottom: 2px;
+ &.large {
+ *padding-top: 7px;
+ *padding-bottom: 7px;
+ }
+ &.small {
+ *padding-top: 3px;
+ *padding-bottom: 3px;
+ }
}
diff --git a/less/dropdowns.less b/less/dropdowns.less
index 06114b254d..e73b056e96 100644
--- a/less/dropdowns.less
+++ b/less/dropdowns.less
@@ -5,12 +5,19 @@
.dropdown {
position: relative;
}
+.dropdown .dropdown-toggle {
+ // The caret makes the toggle a bit too tall in IE7
+ *margin-bottom: -3px;
+}
// Dropdown arrow/caret
.caret {
display: inline-block;
width: 0;
height: 0;
text-indent: -99999px;
+ // IE7 won't do the border trick if there's a text indent, but it doesn't
+ // do the content that text-indent is hiding, either, so we're ok.
+ *text-indent: 0;
vertical-align: top;
border-left: 4px solid transparent;
border-right: 4px solid transparent;
@@ -21,7 +28,6 @@
.dropdown .caret {
margin-top: 8px;
margin-left: 2px;
- *margin-top: 7px;
}
.dropdown:hover .caret,
.open.dropdown .caret {
@@ -31,6 +37,7 @@
.dropdown-menu {
position: absolute;
top: 100%;
+ left: 0;
z-index: @zindexDropdown;
float: left;
display: none; // none by default, but block on "open" of the menu
@@ -50,7 +57,6 @@
-webkit-background-clip: padding-box;
-moz-background-clip: padding;
background-clip: padding-box;
- zoom: 1; // do we need this?
*border-right-width: 2px;
*border-bottom-width: 2px;
@@ -68,6 +74,13 @@
overflow: hidden;
background-color: #e5e5e5;
border-bottom: 1px solid @white;
+
+ // IE7 needs a set width since we gave a height. Restricting just
+ // to IE7 to keep the 1px left/right space in other browsers.
+ // It is unclear where IE is getting the extra space that we need
+ // to negative-margin away, but so it goes.
+ *width: 100%;
+ *margin: -5px 0 5px;
}
// Links within the dropdown menu
@@ -93,6 +106,10 @@
// Open state for the dropdown
.dropdown.open {
+ // IE7's z-index only goes to the nearest positioned ancestor, which would
+ // make the menu appear below buttons that appeared later on the page
+ *z-index: @zindexDropdown;
+
.dropdown-toggle {
color: @white;
background: #ccc;
diff --git a/less/forms.less b/less/forms.less
index 55a6463687..52f5063f05 100644
--- a/less/forms.less
+++ b/less/forms.less
@@ -377,6 +377,7 @@ select:focus:required:invalid {
.help-inline {
display: inline-block;
+ .ie7-inline-block;
margin-bottom: 9px;
vertical-align: middle;
padding-left: 5px;
diff --git a/less/mixins.less b/less/mixins.less
index dd331ebf28..bbbba1e025 100644
--- a/less/mixins.less
+++ b/less/mixins.less
@@ -36,6 +36,28 @@
*zoom: 1;
}
+// IE7 likes to collapse whitespace on either side of the inline-block elements.
+// Ems because we're attempting to match the width of a space character. Left
+// version is for form buttons, which typically come after other elements, and
+// right version is for icons, which come before. Applying both is ok, but it will
+// mean that space between those elements will be .6em (~2 space characters) in IE7,
+// instead of the 1 space in other browsers.
+.ie7-restore-left-whitespace() {
+ *margin-left: .3em;
+
+ &:first-child {
+ *margin-left: 0;
+ }
+}
+
+.ie7-restore-right-whitespace() {
+ *margin-right: .3em;
+
+ &:last-child {
+ *margin-left: 0;
+ }
+}
+
// Sizing shortcuts
// -------------------------
.size(@height: 5px, @width: 5px) {
@@ -317,6 +339,29 @@
}
+// Mixin for generating button backgrounds
+// ---------------------------------------
+.buttonBackground(@startColor, @endColor) {
+ // gradientBar will set the background to a pleasing blend of these, to support IE<=9
+ .gradientBar(@startColor, @endColor);
+
+ // in these cases the gradient won't cover the background, so we override
+ &:hover, &:active, &.active, &.disabled {
+ background-color: @endColor;
+ }
+
+ // called out separately because IE8 would ignore otherwise
+ &[disabled] {
+ background-color: @endColor;
+ }
+
+ // IE 7 + 8 can't handle box-shadow to show active, so we darken a bit ourselves
+ &:active,
+ &.active {
+ background-color: darken(@endColor, 10%) e("\9");
+ }
+}
+
// COMPONENT MIXINS
// --------------------------------------------------
diff --git a/less/navbar.less b/less/navbar.less
index 07e2bed8bd..7291eccebd 100644
--- a/less/navbar.less
+++ b/less/navbar.less
@@ -76,7 +76,7 @@
#font > .sans-serif(13px, normal, 1);
color: @white;
color: rgba(255,255,255,.75);
- background: #444;
+ background: #6a6a6a;
background: rgba(255,255,255,.3);
border: 1px solid #111;
@shadow: inset 0 1px 2px rgba(0,0,0,.1), 0 1px 0px rgba(255,255,255,.15);
diff --git a/less/navs.less b/less/navs.less
index cd356d9bb8..f1d5b565c4 100644
--- a/less/navs.less
+++ b/less/navs.less
@@ -317,6 +317,7 @@
.tabs-left .tabs .active > a,
.tabs-left .tabs .active > a:hover {
border-color: #ddd transparent #ddd #ddd;
+ *border-right-color: @white;
}
// Tabs on the right
@@ -335,4 +336,5 @@
.tabs-right .tabs .active > a,
.tabs-right .tabs .active > a:hover {
border-color: #ddd #ddd #ddd transparent;
+ *border-left-color: @white;
}
diff --git a/less/sprites.less b/less/sprites.less
index c7cdc17108..ed456de1a5 100644
--- a/less/sprites.less
+++ b/less/sprites.less
@@ -21,6 +21,8 @@
vertical-align: text-top;
width: 14px;
height: 14px;
+
+ .ie7-restore-right-whitespace;
}
.icon.white {
background-image: url(../img/glyphicons-halflings-white.png);