Merge branch 'ie_7_components' of https://github.com/phopkins/bootstrap into phopkins-ie_7_components

Conflicts:
	docs/assets/css/bootstrap.css

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;

docs/base-css.html

@@ -1034,6 +1034,12 @@
               <input class="input-xlarge focused" id="focusedInput" type="text" value="This is focused…">
             </div>
           </div>
+          <div class="control-group">
+            <label class="control-label">Uneditable input</label>
+            <div class="controls">
+              <span class="input-xlarge uneditable-input">Some value here</span>
+            </div>
+          </div>
           <div class="control-group">
             <label class="control-label" for="disabledInput">Disabled input</label>
             <div class="controls">
@@ -1530,6 +1536,7 @@
   </div>
 </section>
 
+
      <!-- Footer
       ================================================== -->
       <footer class="footer">

docs/templates/pages/base-css.mustache

@@ -969,6 +969,12 @@
               <input class="input-xlarge focused" id="focusedInput" type="text" value="{{_i}}This is focused…{{/i}}">
             </div>
           </div>
+          <div class="control-group">
+            <label class="control-label">Uneditable input</label>
+            <div class="controls">
+              <span class="input-xlarge uneditable-input">Some value here</span>
+            </div>
+          </div>
           <div class="control-group">
             <label class="control-label" for="disabledInput">{{_i}}Disabled input{{/i}}</label>
             <div class="controls">
@@ -1463,4 +1469,4 @@
       </div> <!-- /well -->
     </div>
   </div>
-</section>
+</section>

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 {
-.btn-group.open .dropdown-menu {
+  // IE7's z-index only goes to the nearest positioned ancestor, which would
-  display: block;
+  // make the menu appear below buttons that appeared later on the page
-  margin-top: 1px;
+  *z-index: @zindexDropdown;
-  .border-radius(5px);
+
-}
+  // Reposition menu on open and round all corners
-.btn-group.open .dropdown-toggle {
+  .dropdown-menu {
-  background-image: none;
+    display: block;
-  @shadow: inset 0 1px 6px rgba(0,0,0,.15), 0 1px 2px rgba(0,0,0,.05);
+    margin-top: 1px;
-  .box-shadow(@shadow);
+    .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

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;
+  }
 }

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;

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;

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
 // --------------------------------------------------

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);

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;
 }

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);