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

liuqingjie06 · Mar 12, 2012 · ee5d2ec · ee5d2ec
1 parent c8f4325
commit ee5d2ec
Show file tree

Hide file tree

Showing 5 changed files with 39 additions and 17 deletions.
diff --git a/docs/assets/bootstrap.zip b/docs/assets/bootstrap.zip
diff --git a/docs/assets/css/bootstrap-responsive.css b/docs/assets/css/bootstrap-responsive.css
@@ -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"] {

diff --git a/docs/assets/css/bootstrap.css b/docs/assets/css/bootstrap.css
@@ -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;

diff --git a/less/mixins.less b/less/mixins.less
@@ -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

diff --git a/less/responsive.less b/less/responsive.less
@@ -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"],