diff --git a/docs/assets/css/bootstrap.css b/docs/assets/css/bootstrap.css index f49500b4e0..30512c7348 100644 --- a/docs/assets/css/bootstrap.css +++ b/docs/assets/css/bootstrap.css @@ -790,9 +790,10 @@ input[type="color"], } input, +select, textarea, .uneditable-input { - width: 220px; + width: 100%; } textarea { @@ -877,7 +878,6 @@ input[type="file"] { } select { - width: 220px; border: 1px solid #cccccc; } @@ -1037,114 +1037,6 @@ textarea[class*="span"], margin-left: 0; } -.controls-row input.span12, -textarea.span12, -select.span12, -.uneditable-input.span12 { - width: 97.87234042553192%; - margin-right: 1.0638297872340425%; - margin-left: 1.0638297872340425%; -} - -.controls-row input.span11, -textarea.span11, -select.span11, -.uneditable-input.span11 { - width: 89.53900709219857%; - margin-right: 1.0638297872340425%; - margin-left: 1.0638297872340425%; -} - -.controls-row input.span10, -textarea.span10, -select.span10, -.uneditable-input.span10 { - width: 81.20567375886526%; - margin-right: 1.0638297872340425%; - margin-left: 1.0638297872340425%; -} - -.controls-row input.span9, -textarea.span9, -select.span9, -.uneditable-input.span9 { - width: 72.87234042553192%; - margin-right: 1.0638297872340425%; - margin-left: 1.0638297872340425%; -} - -.controls-row input.span8, -textarea.span8, -select.span8, -.uneditable-input.span8 { - width: 64.53900709219857%; - margin-right: 1.0638297872340425%; - margin-left: 1.0638297872340425%; -} - -.controls-row input.span7, -textarea.span7, -select.span7, -.uneditable-input.span7 { - width: 56.20567375886525%; - margin-right: 1.0638297872340425%; - margin-left: 1.0638297872340425%; -} - -.controls-row input.span6, -textarea.span6, -select.span6, -.uneditable-input.span6 { - width: 47.87234042553192%; - margin-right: 1.0638297872340425%; - margin-left: 1.0638297872340425%; -} - -.controls-row input.span5, -textarea.span5, -select.span5, -.uneditable-input.span5 { - width: 39.53900709219859%; - margin-right: 1.0638297872340425%; - margin-left: 1.0638297872340425%; -} - -.controls-row input.span4, -textarea.span4, -select.span4, -.uneditable-input.span4 { - width: 31.205673758865245%; - margin-right: 1.0638297872340425%; - margin-left: 1.0638297872340425%; -} - -.controls-row input.span3, -textarea.span3, -select.span3, -.uneditable-input.span3 { - width: 22.872340425531917%; - margin-right: 1.0638297872340425%; - margin-left: 1.0638297872340425%; -} - -.controls-row input.span2, -textarea.span2, -select.span2, -.uneditable-input.span2 { - width: 14.53900709219858%; - margin-right: 1.0638297872340425%; - margin-left: 1.0638297872340425%; -} - -.controls-row input.span1, -textarea.span1, -select.span1, -.uneditable-input.span1 { - width: 6.205673758865247%; - margin-right: 1.0638297872340425%; - margin-left: 1.0638297872340425%; -} - .controls-row input.offset12, textarea.offset12, select.offset12, @@ -5665,174 +5557,6 @@ a.badge:hover { .offset1 { margin-left: 8.333333333333332%; } - input.span12, - textarea.span12, - select.span12, - .uneditable-input.span12 { - width: 97.43589743589743%; - margin-right: 1.282051282051282%; - margin-left: 1.282051282051282%; - } - input.span11, - textarea.span11, - select.span11, - .uneditable-input.span11 { - width: 89.10256410256409%; - margin-right: 1.282051282051282%; - margin-left: 1.282051282051282%; - } - input.span10, - textarea.span10, - select.span10, - .uneditable-input.span10 { - width: 80.76923076923077%; - margin-right: 1.282051282051282%; - margin-left: 1.282051282051282%; - } - input.span9, - textarea.span9, - select.span9, - .uneditable-input.span9 { - width: 72.43589743589743%; - margin-right: 1.282051282051282%; - margin-left: 1.282051282051282%; - } - input.span8, - textarea.span8, - select.span8, - .uneditable-input.span8 { - width: 64.10256410256409%; - margin-right: 1.282051282051282%; - margin-left: 1.282051282051282%; - } - input.span7, - textarea.span7, - select.span7, - .uneditable-input.span7 { - width: 55.769230769230774%; - margin-right: 1.282051282051282%; - margin-left: 1.282051282051282%; - } - input.span6, - textarea.span6, - select.span6, - .uneditable-input.span6 { - width: 47.43589743589744%; - margin-right: 1.282051282051282%; - margin-left: 1.282051282051282%; - } - input.span5, - textarea.span5, - select.span5, - .uneditable-input.span5 { - width: 39.10256410256411%; - margin-right: 1.282051282051282%; - margin-left: 1.282051282051282%; - } - input.span4, - textarea.span4, - select.span4, - .uneditable-input.span4 { - width: 30.769230769230766%; - margin-right: 1.282051282051282%; - margin-left: 1.282051282051282%; - } - input.span3, - textarea.span3, - select.span3, - .uneditable-input.span3 { - width: 22.435897435897438%; - margin-right: 1.282051282051282%; - margin-left: 1.282051282051282%; - } - input.span2, - textarea.span2, - select.span2, - .uneditable-input.span2 { - width: 14.1025641025641%; - margin-right: 1.282051282051282%; - margin-left: 1.282051282051282%; - } - input.span1, - textarea.span1, - select.span1, - .uneditable-input.span1 { - width: 5.769230769230768%; - margin-right: 1.282051282051282%; - margin-left: 1.282051282051282%; - } - input.offset12, - textarea.offset12, - select.offset12, - uneditable-input.offset12 { - margin-left: 101.28205128205128%; - } - input.offset11, - textarea.offset11, - select.offset11, - uneditable-input.offset11 { - margin-left: 92.94871794871794%; - } - input.offset10, - textarea.offset10, - select.offset10, - uneditable-input.offset10 { - margin-left: 84.61538461538463%; - } - input.offset9, - textarea.offset9, - select.offset9, - uneditable-input.offset9 { - margin-left: 76.28205128205128%; - } - input.offset8, - textarea.offset8, - select.offset8, - uneditable-input.offset8 { - margin-left: 67.94871794871794%; - } - input.offset7, - textarea.offset7, - select.offset7, - uneditable-input.offset7 { - margin-left: 59.61538461538462%; - } - input.offset6, - textarea.offset6, - select.offset6, - uneditable-input.offset6 { - margin-left: 51.282051282051285%; - } - input.offset5, - textarea.offset5, - select.offset5, - uneditable-input.offset5 { - margin-left: 42.948717948717956%; - } - input.offset4, - textarea.offset4, - select.offset4, - uneditable-input.offset4 { - margin-left: 34.61538461538461%; - } - input.offset3, - textarea.offset3, - select.offset3, - uneditable-input.offset3 { - margin-left: 26.28205128205128%; - } - input.offset2, - textarea.offset2, - select.offset2, - uneditable-input.offset2 { - margin-left: 17.948717948717945%; - } - input.offset1, - textarea.offset1, - select.offset1, - uneditable-input.offset1 { - margin-left: 9.615384615384613%; - } } @media (min-width: 768px) and (max-width: 979px) { diff --git a/docs/base-css.html b/docs/base-css.html index eaa5aa51e5..8ddb107fff 100644 --- a/docs/base-css.html +++ b/docs/base-css.html @@ -923,12 +923,12 @@ For example, <code><section></code> should be wrapped as inlin

Search form

Add .form-search to the form and .search-query to the <input> for an extra-rounded text input.

- + 
 <form class="form-search">
-  <input type="text" class="input-medium search-query">
+  <input type="text" class="span3 search-query">
   <button type="submit" class="btn">Search</button>
 </form>
@@ -936,8 +936,8 @@ For example, <code><section></code> should be wrapped as inlin

Inline form

Add .form-inline for left-aligned labels and inline-block controls for a compact layout.

- - + + @@ -945,8 +945,8 @@ For example, <code><section></code> should be wrapped as inlin 
 <form class="form-inline">
-  <input type="text" class="input-small" placeholder="Email">
-  <input type="password" class="input-small" placeholder="Password">
+  <input type="text" class="span3" placeholder="Email">
+  <input type="password" class="span3" placeholder="Password">
   <label class="checkbox">
     <input type="checkbox"> Remember me
   </label>
@@ -1186,26 +1186,26 @@ For example, <code><section></code> should be wrapped as inlin
           
Instead of a <span> with text, use a .btn to attach a button (or two) to an input.

           

             

-              
+              
               
             

           

 
 <div class="input-append">
-  <input class="span2" id="appendedInputButton" type="text">
+  <input class="span3" id="appendedInputButton" type="text">
   <button class="btn" type="button">Go!</button>
 </div>
 

           

             

-              
+              
               
               
             

           

 
 <div class="input-append">
-  <input id="appendedInputButton" type="text">
+  <input class="span3" id="appendedInputButton" type="text">
   <button class="btn" type="button">Search</button>
   <button class="btn" type="button">Options</button>
 </div>
@@ -1215,7 +1215,7 @@ For example, <code><section></code> should be wrapped as inlin
           

           

             

-              
+              
               

                 
                 
    
@@ -1231,7 +1231,7 @@ For example, <code><section></code> should be wrapped as inlin
 
     <div class="input-append">
   <input id="appendedInputButtons" type="text">
-  <input class="span2" id="appendedDropdownButton" type="text">
+  <input class="span3" id="appendedDropdownButton" type="text">
   <div class="btn-group">
     <button class="btn dropdown-toggle" data-toggle="dropdown">
       Action
@@ -1339,10 +1339,10 @@ For example, <code><section></code> should be wrapped as inlin
                   
  • Separated link
    • 
                 

               

-              
+              
             

             

-              
+              
               

                 
                 
             

             

               
-              
+              
             

           
 
 <form class="form-search">
   <div class="input-append">
-    <input type="text" class="search-query">
+    <input type="text" class="search-query span3">
     <button type="submit" class="btn">Search</button>
   </div>
   <div class="input-prepend">
     <button type="submit" class="btn">Search</button>
-    <input type="text" class="search-query">
+    <input type="text" class="search-query span3">
   </div>
 </form>
 

diff --git a/docs/templates/pages/base-css.mustache b/docs/templates/pages/base-css.mustache
index 42c4bd0fd4..8dda0cb204 100644
--- a/docs/templates/pages/base-css.mustache
+++ b/docs/templates/pages/base-css.mustache
@@ -863,12 +863,12 @@
           
{{_i}}Search form{{/i}}

           
{{_i}}Add .form-search to the form and .search-query to the <input> for an extra-rounded text input.{{/i}}

           

-            
+            
             
           
{{! /example }}
 
 <form class="form-search">
-  <input type="text" class="input-medium search-query">
+  <input type="text" class="span3 search-query">
   <button type="submit" class="btn">{{_i}}Search{{/i}}</button>
 </form>
 

@@ -876,8 +876,8 @@
           
{{_i}}Inline form{{/i}}

           
{{_i}}Add .form-inline for left-aligned labels and inline-block controls for a compact layout.{{/i}}

           

-            
-            
+            
+            
             
@@ -885,8 +885,8 @@
           
{{! /example }}
 
 <form class="form-inline">
-  <input type="text" class="input-small" placeholder="{{_i}}Email{{/i}}">
-  <input type="password" class="input-small" placeholder="{{_i}}Password{{/i}}">
+  <input type="text" class="span3" placeholder="{{_i}}Email{{/i}}">
+  <input type="password" class="span3" placeholder="{{_i}}Password{{/i}}">
   <label class="checkbox">
     <input type="checkbox"> {{_i}}Remember me{{/i}}
   </label>
@@ -1126,26 +1126,26 @@
           
{{_i}}Instead of a <span> with text, use a .btn to attach a button (or two) to an input.{{/i}}

           

             

-              
+              
               
             

           

 
 <div class="input-append">
-  <input class="span2" id="appendedInputButton" type="text">
+  <input class="span3" id="appendedInputButton" type="text">
   <button class="btn" type="button">Go!</button>
 </div>
 

           

             

-              
+              
               
               
             

           

 
 <div class="input-append">
-  <input id="appendedInputButton" type="text">
+  <input class="span3" id="appendedInputButton" type="text">
   <button class="btn" type="button">Search</button>
   <button class="btn" type="button">Options</button>
 </div>
@@ -1155,7 +1155,7 @@
           
{{_i}}{{/i}}

           

             

-              
+              
               

                 
                 
    
@@ -1171,7 +1171,7 @@
 
     <div class="input-append">
   <input id="appendedInputButtons" type="text">
-  <input class="span2" id="appendedDropdownButton" type="text">
+  <input class="span3" id="appendedDropdownButton" type="text">
   <div class="btn-group">
     <button class="btn dropdown-toggle" data-toggle="dropdown">
       {{_i}}Action{{/i}}
@@ -1279,10 +1279,10 @@
                   
  • {{_i}}Separated link{{/i}}
    • 
                 

               

-              
+              
             

             

-              
+              
               

                 
                 
             

             

               
-              
+              
             

           {{! /example }}
 
 <form class="form-search">
   <div class="input-append">
-    <input type="text" class="search-query">
+    <input type="text" class="search-query span3">
     <button type="submit" class="btn">{{_i}}Search{{/i}}</button>
   </div>
   <div class="input-prepend">
     <button type="submit" class="btn">{{_i}}Search{{/i}}</button>
-    <input type="text" class="search-query">
+    <input type="text" class="search-query span3">
   </div>
 </form>
 

diff --git a/less/forms.less b/less/forms.less
index 3dd8f306b5..383f105fc6 100644
--- a/less/forms.less
+++ b/less/forms.less
@@ -6,6 +6,7 @@
 // General styles
 // -------------------------
 
+
 form {
   margin: 0 0 @baseLineHeight;
 }
@@ -68,16 +69,19 @@ input[type="color"],
 }
 
 // Reset appearance properties for textual inputs and textarea
-// Declare width for legacy (can't be on input[type=*] selectors or it's too specific)
+// Can't be on input[type=*] selectors or it's too specific
 input,
+select,
 textarea,
 .uneditable-input {
-  width: 220px;
+  width: 100%;
 }
+
 // Reset height since textareas have rows
 textarea {
   height: auto;
 }
+
 // Everything else
 textarea,
 input[type="text"],
@@ -135,8 +139,8 @@ input[type="file"] {
 }
 
 // Make select elements obey height by applying a border
+// TODO: See if this can be part of the above selector stack
 select {
-  width: 220px; // default input width + 10px of padding that doesn't get applied
   border: 1px solid @inputBorder;
 }
 
diff --git a/less/mixins.less b/less/mixins.less
index e477f71131..467ce14c17 100644
--- a/less/mixins.less
+++ b/less/mixins.less
@@ -550,11 +550,12 @@
     .offsetX(0) {}
 
     .span(@columns) {
+      // TODO: Figure out how to add this back behind a class
       // Part 1: Since inputs require padding *and* margin, we subtract the grid gutter width, as a percent of the row, from the default column width.
-      width: percentage(@columns / @gridColumns) - percentage(@gridGutterWidth / @gridRowWidth);
+      //width: percentage(@columns / @gridColumns) - percentage(@gridGutterWidth / @gridRowWidth);
       // Part 2: That subtracted width then gets split in half and added to the left and right margins.
-      margin-left: percentage((@gridGutterWidth / 2) / @gridRowWidth);
-      margin-right: percentage((@gridGutterWidth / 2) / @gridRowWidth);
+      // margin-left: percentage((@gridGutterWidth / 2) / @gridRowWidth);
+      // margin-right: percentage((@gridGutterWidth / 2) / @gridRowWidth);
     }
 
     .offset(@columns) {
diff --git a/less/responsive-1200px-min.less b/less/responsive-1200px-min.less
index d028ef7243..aa7d9b9d78 100644
--- a/less/responsive-1200px-min.less
+++ b/less/responsive-1200px-min.less
@@ -14,6 +14,6 @@
 
   // Fixed grid
   #grid > .core(@gridColumnWidth1200, @gridGutterWidth1200, @gridRowWidth1200);
-  #grid > .input(@gridColumnWidth1200, @gridGutterWidth1200, @gridRowWidth1200);
+  // #grid > .input(@gridColumnWidth1200, @gridGutterWidth1200, @gridRowWidth1200);
 
 }