Commit ee5d2ec9 authored by Mark Otto's avatar Mark Otto
Browse files

add block level input mixin for border-box box-sizing

parent c8f4325c
Showing with 39 additions and 17 deletions
+39 -17
No preview for this file type
...@@ -23,6 +23,19 @@ ...@@ -23,6 +23,19 @@
text-indent: 100%; text-indent: 100%;
white-space: nowrap; white-space: nowrap;
} }
.input-block-level {
display: block;
width: 100%;
min-height: 28px;
/* Make inputs at least the height of their button counterpart */
/* Makes inputs behave like true block-level elements */
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
-ms-box-sizing: border-box;
box-sizing: border-box;
}
.hidden { .hidden {
display: none; display: none;
visibility: hidden; visibility: hidden;
...@@ -160,17 +173,9 @@ ...@@ -160,17 +173,9 @@
/* Makes inputs behave like true block-level elements */ /* Makes inputs behave like true block-level elements */
-webkit-box-sizing: border-box; -webkit-box-sizing: border-box;
/* Older Webkit */
-moz-box-sizing: border-box; -moz-box-sizing: border-box;
/* Older FF */
-ms-box-sizing: border-box; -ms-box-sizing: border-box;
/* IE8 */
box-sizing: border-box; box-sizing: border-box;
/* CSS3 spec*/
} }
.input-prepend input[class*="span"], .input-prepend input[class*="span"],
.input-append input[class*="span"] { .input-append input[class*="span"] {
......
...@@ -117,6 +117,19 @@ textarea { ...@@ -117,6 +117,19 @@ textarea {
text-indent: 100%; text-indent: 100%;
white-space: nowrap; white-space: nowrap;
} }
.input-block-level {
display: block;
width: 100%;
min-height: 28px;
/* Make inputs at least the height of their button counterpart */
/* Makes inputs behave like true block-level elements */
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
-ms-box-sizing: border-box;
box-sizing: border-box;
}
body { body {
margin: 0; margin: 0;
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
......
...@@ -107,6 +107,7 @@ ...@@ -107,6 +107,7 @@
white-space: nowrap; white-space: nowrap;
} }
// FONTS // FONTS
// -------------------------------------------------- // --------------------------------------------------
...@@ -142,9 +143,19 @@ ...@@ -142,9 +143,19 @@
} }
// Form field states (used in forms.less) // FORMS
// -------------------------------------------------- // --------------------------------------------------
// Block level inputs
.input-block-level {
display: block;
width: 100%;
min-height: 28px; /* Make inputs at least the height of their button counterpart */
/* Makes inputs behave like true block-level elements */
.box-sizing(border-box);
}
// Mixin for form field states // Mixin for form field states
.formFieldState(@textColor: #555, @borderColor: #ccc, @backgroundColor: #f5f5f5) { .formFieldState(@textColor: #555, @borderColor: #ccc, @backgroundColor: #f5f5f5) {
// Set the text color // Set the text color
......
...@@ -182,14 +182,7 @@ ...@@ -182,14 +182,7 @@
select[class*="span"], select[class*="span"],
textarea[class*="span"], textarea[class*="span"],
.uneditable-input { .uneditable-input {
display: block; .input-block-level();
width: 100%;
min-height: 28px; /* Make inputs at least the height of their button counterpart */
/* Makes inputs behave like true block-level elements */
-webkit-box-sizing: border-box; /* Older Webkit */
-moz-box-sizing: border-box; /* Older FF */
-ms-box-sizing: border-box; /* IE8 */
box-sizing: border-box; /* CSS3 spec*/
} }
// But don't let it screw up prepend/append inputs // But don't let it screw up prepend/append inputs
.input-prepend input[class*="span"], .input-prepend input[class*="span"],
......
Supports Markdown
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment