Inputs now 100% width by default

* Includes text inputs, selects, and textareas
* Updated docs to include .span* sizes wherever possible
* Commented out responsive 1200px inputs grid
* Still some derp to be done to improve more, but this is a decent first stab

3 files changed, 12 insertions, 7 deletions

diff --git a/less/forms.less b/less/forms.less
index 3dd8f306b..383f105fc 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 e477f7113..467ce14c1 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 d028ef724..aa7d9b9d7 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);
 
 }