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

This commit is contained in:
Mark Otto 2012-03-11 21:21:51 -07:00
parent c8f4325c19
commit ee5d2ec91a
5 changed files with 39 additions and 17 deletions

Binary file not shown.

View File

@ -23,6 +23,19 @@
text-indent: 100%;
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 {
display: none;
visibility: hidden;
@ -160,17 +173,9 @@
/* 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*/
}
.input-prepend input[class*="span"],
.input-append input[class*="span"] {

View File

@ -117,6 +117,19 @@ textarea {
text-indent: 100%;
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 {
margin: 0;
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;

View File

@ -107,6 +107,7 @@
white-space: nowrap;
}
// FONTS
// --------------------------------------------------
@ -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
.formFieldState(@textColor: #555, @borderColor: #ccc, @backgroundColor: #f5f5f5) {
// Set the text color

View File

@ -182,14 +182,7 @@
select[class*="span"],
textarea[class*="span"],
.uneditable-input {
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; /* Older Webkit */
-moz-box-sizing: border-box; /* Older FF */
-ms-box-sizing: border-box; /* IE8 */
box-sizing: border-box; /* CSS3 spec*/
.input-block-level();
}
// But don't let it screw up prepend/append inputs
.input-prepend input[class*="span"],