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:
+7
-3
@@ -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
@@ -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) {
|
||||
|
||||
@@ -14,6 +14,6 @@
|
||||
|
||||
// Fixed grid
|
||||
#grid > .core(@gridColumnWidth1200, @gridGutterWidth1200, @gridRowWidth1200);
|
||||
#grid > .input(@gridColumnWidth1200, @gridGutterWidth1200, @gridRowWidth1200);
|
||||
// #grid > .input(@gridColumnWidth1200, @gridGutterWidth1200, @gridRowWidth1200);
|
||||
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user