2
0
mirror of https://github.com/tenrok/bootstrap.git synced 2026-06-05 16:42:29 +03:00

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
This commit is contained in:
Mark Otto
2012-11-30 00:53:07 -08:00
parent 8d09e7c24d
commit 7313702cf3
6 changed files with 54 additions and 325 deletions
+7 -3
View File
@@ -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;
}
+4 -3
View File
@@ -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) {
+1 -1
View File
@@ -14,6 +14,6 @@
// Fixed grid
#grid > .core(@gridColumnWidth1200, @gridGutterWidth1200, @gridRowWidth1200);
#grid > .input(@gridColumnWidth1200, @gridGutterWidth1200, @gridRowWidth1200);
// #grid > .input(@gridColumnWidth1200, @gridGutterWidth1200, @gridRowWidth1200);
}