clean up some css for github issues: input prepend z-index, modals revamped for responsive

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: Tue Dec 27 12:39:01 CST 2011
+ * Date: Tue Dec 27 15:23:07 CST 2011
  */
 html, body {
   margin: 0;
@@ -602,6 +602,7 @@ select, input[type=file] {
 }
 select {
   background-color: #ffffff;
+  vertical-align: middle;
 }
 select[multiple] {
   height: inherit;
@@ -904,17 +905,12 @@ textarea[readonly] {
   display: block;
   max-width: 600px;
 }
-.input-prepend, .input-append {
-  overflow: hidden;
-}
 .input-prepend input, .input-append input {
   -webkit-border-radius: 0 3px 3px 0;
   -moz-border-radius: 0 3px 3px 0;
   border-radius: 0 3px 3px 0;
 }
 .input-prepend .add-on, .input-append .add-on {
-  position: relative;
-  z-index: 2;
   float: left;
   display: block;
   width: auto;
@@ -2574,6 +2570,16 @@ a.thumbnail:hover {
   .horizontal-form .form-actions {
     padding-left: 0;
   }
+  .modal {
+    position: fixed;
+    top: 20px;
+    left: 20px;
+    right: 20px;
+    width: auto;
+  }
+  .modal .close {
+    padding: 10px;
+  }
 }
 @media (max-width: 768px) {
   .container {

bootstrap.min.css

@@ -100,7 +100,7 @@ input[type=image],input[type=checkbox],input[type=radio]{width:auto;height:auto;
 input[type=file]{padding:initial;line-height:initial;border:initial;background-color:#ffffff;background-color:initial;-webkit-box-shadow:none;-moz-box-shadow:none;box-shadow:none;}
 input[type=button],input[type=reset],input[type=submit]{width:auto;height:auto;}
 select,input[type=file]{height:27px;*margin-top:4px;line-height:27px;}
-select{background-color:#ffffff;}
+select{background-color:#ffffff;vertical-align:middle;}
 select[multiple]{height:inherit;}
 input[type=image]{-webkit-box-shadow:none;-moz-box-shadow:none;box-shadow:none;}
 textarea{height:auto;}
@@ -146,8 +146,8 @@ input[disabled],select[disabled],textarea[disabled],input[readonly],select[reado
 .help-text{margin-top:5px;margin-bottom:0;color:#bfbfbf;}
 .help-inline{*position:relative;*top:-5px;display:inline;padding-left:5px;}
 .help-block{display:block;max-width:600px;}
-.input-prepend,.input-append{overflow:hidden;}.input-prepend input,.input-append input{-webkit-border-radius:0 3px 3px 0;-moz-border-radius:0 3px 3px 0;border-radius:0 3px 3px 0;}
-.input-prepend .add-on,.input-append .add-on{position:relative;z-index:2;float:left;display:block;width:auto;min-width:16px;height:18px;margin-right:-1px;padding:4px 4px 4px 5px;font-weight:normal;line-height:18px;color:#bfbfbf;text-align:center;text-shadow:0 1px 0 #ffffff;background-color:#f5f5f5;border:1px solid #ccc;-webkit-border-radius:3px 0 0 3px;-moz-border-radius:3px 0 0 3px;border-radius:3px 0 0 3px;}
+.input-prepend input,.input-append input{-webkit-border-radius:0 3px 3px 0;-moz-border-radius:0 3px 3px 0;border-radius:0 3px 3px 0;}
+.input-prepend .add-on,.input-append .add-on{float:left;display:block;width:auto;min-width:16px;height:18px;margin-right:-1px;padding:4px 4px 4px 5px;font-weight:normal;line-height:18px;color:#bfbfbf;text-align:center;text-shadow:0 1px 0 #ffffff;background-color:#f5f5f5;border:1px solid #ccc;-webkit-border-radius:3px 0 0 3px;-moz-border-radius:3px 0 0 3px;border-radius:3px 0 0 3px;}
 .input-prepend .active,.input-append .active{background-color:#a9dba9;border-color:#46a546;}
 .input-prepend .add-on{*margin-top:1px;}
 .input-append input{float:left;-webkit-border-radius:3px 0 0 3px;-moz-border-radius:3px 0 0 3px;border-radius:3px 0 0 3px;}
@@ -339,4 +339,4 @@ a.thumbnail:hover{border-color:#0069d6;-webkit-box-shadow:0 1px 4px rgba(0, 105,
 .thumbnail>img{display:block;max-width:100%;}
 .thumbnail .caption{padding:9px;}
 .hidden{display:none;visibility:hidden;}
-@media (max-width: 480px){.modal{width:auto;margin:0;} .horizontal-form .control-group>label{float:none;width:auto;padding-top:0;text-align:left;} .horizontal-form .controls{margin-left:0;} .horizontal-form .control-list{padding-top:0;} .horizontal-form .form-actions{padding-left:0;}}@media (max-width: 768px){.container{width:auto;padding:0 20px;} .row{margin-left:0;} .row>[class*="span"]{float:none;display:block;width:auto;margin:0;} .nav{position:absolute;top:0;left:0;width:180px;padding-top:40px;list-style:none;} .nav,.nav>li:last-child a{-webkit-border-radius:0 0 4px 0;-moz-border-radius:0 0 4px 0;border-radius:0 0 4px 0;} .nav>li{float:none;display:none;} .nav>li>a{float:none;background-color:#222;} .nav>.active{display:block;position:absolute;top:0;left:0;} .navbar ul .active>a{background-color:transparent;} .nav>.active a:after{display:inline-block;width:0;height:0;margin-top:8px;margin-left:6px;text-indent:-99999px;vertical-align:top;border-left:4px solid transparent;border-right:4px solid transparent;border-top:4px solid #ffffff;filter:alpha(opacity=100);-moz-opacity:1;opacity:1;content:"↓";} .nav>.active a:hover{background-color:rgba(255, 255, 255, 0.05);}}@media (min-width: 768px) and (max-width: 940px){.container{width:748px;} .span1{width:44px;} .span2{width:108px;} .span3{width:172px;} .span4{width:236px;} .span5{width:300px;} .span6{width:364px;} .span7{width:428px;} .span8{width:492px;} .span9{width:556px;} .span10{width:620px;} .span11{width:684px;} .span12{width:748px;} .offset1{margin-left:64px;} .offset2{margin-left:128px;} .offset3{margin-left:192px;} .offset4{margin-left:256px;} .offset5{margin-left:320px;} .offset6{margin-left:384px;} .offset7{margin-left:448px;} .offset8{margin-left:512px;} .offset9{margin-left:576px;} .offset10{margin-left:640px;} .offset11{margin-left:704px;} .offset12{margin-left:768px;}}
+@media (max-width: 480px){.modal{width:auto;margin:0;} .horizontal-form .control-group>label{float:none;width:auto;padding-top:0;text-align:left;} .horizontal-form .controls{margin-left:0;} .horizontal-form .control-list{padding-top:0;} .horizontal-form .form-actions{padding-left:0;} .modal{position:fixed;top:20px;left:20px;right:20px;width:auto;}.modal .close{padding:10px;}}@media (max-width: 768px){.container{width:auto;padding:0 20px;} .row{margin-left:0;} .row>[class*="span"]{float:none;display:block;width:auto;margin:0;} .nav{position:absolute;top:0;left:0;width:180px;padding-top:40px;list-style:none;} .nav,.nav>li:last-child a{-webkit-border-radius:0 0 4px 0;-moz-border-radius:0 0 4px 0;border-radius:0 0 4px 0;} .nav>li{float:none;display:none;} .nav>li>a{float:none;background-color:#222;} .nav>.active{display:block;position:absolute;top:0;left:0;} .navbar ul .active>a{background-color:transparent;} .nav>.active a:after{display:inline-block;width:0;height:0;margin-top:8px;margin-left:6px;text-indent:-99999px;vertical-align:top;border-left:4px solid transparent;border-right:4px solid transparent;border-top:4px solid #ffffff;filter:alpha(opacity=100);-moz-opacity:1;opacity:1;content:"↓";} .nav>.active a:hover{background-color:rgba(255, 255, 255, 0.05);}}@media (min-width: 768px) and (max-width: 940px){.container{width:748px;} .span1{width:44px;} .span2{width:108px;} .span3{width:172px;} .span4{width:236px;} .span5{width:300px;} .span6{width:364px;} .span7{width:428px;} .span8{width:492px;} .span9{width:556px;} .span10{width:620px;} .span11{width:684px;} .span12{width:748px;} .offset1{margin-left:64px;} .offset2{margin-left:128px;} .offset3{margin-left:192px;} .offset4{margin-left:256px;} .offset5{margin-left:320px;} .offset6{margin-left:384px;} .offset7{margin-left:448px;} .offset8{margin-left:512px;} .offset9{margin-left:576px;} .offset10{margin-left:640px;} .offset11{margin-left:704px;} .offset12{margin-left:768px;}}

docs/base-css.html

@@ -894,7 +894,7 @@ Form states
               <span class="add-on">@</span>
               <input class="input-small" id="prependedInput" name="prependedInput" size="16" type="text">
             </div>
-            <span class="help-block">Here's some help text</span>
+            <p class="help-block">Here's some help text</p>
           </div>
         </fieldset>
         <fieldset class="control-group">

docs/components.html

@@ -716,7 +716,7 @@
       <p><a class="btn js-btn" href="./javascript.html#modal">Get the javascript &raquo;</a></p>
     </div>
     <div class="span9">
-      <div class="well" style="background-color: #888; border: none; padding: 40px;">
+      <div class="well" style="background-color: #888; border: none; ">
         <!-- Modal -->
         <div class="modal" style="position: relative; top: auto; left: auto; margin: 0 auto; z-index: 1">
           <div class="modal-header">

lib/forms.less

@@ -96,6 +96,7 @@ input[type=file] {
 // Chrome on Linux and Mobile Safari need background-color
 select {
   background-color: @white;
+  vertical-align: middle;
 }
 
 // Make multiple select elements height not fixed
@@ -304,13 +305,10 @@ textarea[readonly] {
 // Allow us to put symbols and text within the input field for a cleaner look
 .input-prepend,
 .input-append {
-  overflow: hidden;
   input {
     .border-radius(0 3px 3px 0);
   }
   .add-on {
-    position: relative;
-    z-index: 2;
     float: left;
     display: block;
     width: auto;

lib/modals.less

@@ -13,7 +13,8 @@
   &.fade { opacity: 0; }
 }
 
-.modal-backdrop, .modal-backdrop.fade.in {
+.modal-backdrop,
+.modal-backdrop.fade.in {
   .opacity(80);
 }
 

lib/responsive.less

@@ -43,6 +43,18 @@
   .horizontal-form .form-actions {
     padding-left: 0;
   }
+
+  // Modals
+  .modal {
+    position: fixed;
+    top: 20px;
+    left: 20px;
+    right: 20px;
+    width: auto;
+    .close {
+      padding: 10px;
+    }
+  }
 }