Update clearfix mixin and class per @necolas's feedback

diff --git a/docs/assets/css/bootstrap.css b/docs/assets/css/bootstrap.css
index f443e17b7ce289346a3f543f9805d42c7448068c..33581659ddd2d96bf19ea8745100eda101f9026e 100644 (file)
--- a/docs/assets/css/bootstrap.css
+++ b/docs/assets/css/bootstrap.css
@@ -232,8 +232,7 @@ a:hover {
 .container:before,
 .container:after {
   display: table;
-  line-height: 0;
-  content: "";
+  content: " ";
 }
 
 .container:after {
@@ -248,8 +247,7 @@ a:hover {
 .row:before,
 .row:after {
   display: table;
-  line-height: 0;
-  content: "";
+  content: " ";
 }
 
 .row:after {
@@ -562,8 +560,7 @@ dd {
 .dl-horizontal:before,
 .dl-horizontal:after {
   display: table;
-  line-height: 0;
-  content: "";
+  content: " ";
 }
 
 .dl-horizontal:after {
@@ -1109,8 +1106,7 @@ textarea[class*="span"],
 .controls-row:before,
 .controls-row:after {
   display: table;
-  line-height: 0;
-  content: "";
+  content: " ";
 }
 
 .controls-row:after {
@@ -1317,8 +1313,7 @@ select:focus:invalid:focus {
 .form-actions:before,
 .form-actions:after {
   display: table;
-  line-height: 0;
-  content: "";
+  content: " ";
 }
 
 .form-actions:after {
@@ -1609,8 +1604,7 @@ legend + .control-group {
 .form-horizontal .control-group:before,
 .form-horizontal .control-group:after {
   display: table;
-  line-height: 0;
-  content: "";
+  content: " ";
 }
 
 .form-horizontal .control-group:after {
@@ -3376,8 +3370,7 @@ input[type="button"].btn-block {
 .nav:before,
 .nav:after {
   display: table;
-  line-height: 0;
-  content: "";
+  content: " ";
 }
 
 .nav:after {
@@ -3586,8 +3579,7 @@ input[type="button"].btn-block {
 .tabbable:before,
 .tabbable:after {
   display: table;
-  line-height: 0;
-  content: "";
+  content: " ";
 }
 
 .tabbable:after {
@@ -3639,8 +3631,7 @@ input[type="button"].btn-block {
 .navbar:before,
 .navbar:after {
   display: table;
-  line-height: 0;
-  content: "";
+  content: " ";
 }
 
 .navbar:after {
@@ -3710,8 +3701,7 @@ input[type="button"].btn-block {
 .navbar-form:before,
 .navbar-form:after {
   display: table;
-  line-height: 0;
-  content: "";
+  content: " ";
 }
 
 .navbar-form:after {
@@ -4292,8 +4282,7 @@ input[type="button"].btn-block {
 .pager:before,
 .pager:after {
   display: table;
-  line-height: 0;
-  content: "";
+  content: " ";
 }
 
 .pager:after {
@@ -4426,8 +4415,7 @@ input[type="button"].btn-block {
 .modal-footer:before,
 .modal-footer:after {
   display: table;
-  line-height: 0;
-  content: "";
+  content: " ";
 }
 
 .modal-footer:after {
@@ -5232,14 +5220,13 @@ a.badge:hover {
   line-height: 30px;
 }
 
-.clear:before,
-.clear:after {
+.clearfix:before,
+.clearfix:after {
   display: table;
-  line-height: 0;
-  content: "";
+  content: " ";
 }
 
-.clear:after {
+.clearfix:after {
   clear: both;
 }
 
@@ -5342,8 +5329,7 @@ a.badge:hover {
   .row:before,
   .row:after {
     display: table;
-    line-height: 0;
-    content: "";
+    content: " ";
   }
   .row:after {
     clear: both;
@@ -5439,8 +5425,7 @@ a.badge:hover {
   .row:before,
   .row:after {
     display: table;
-    line-height: 0;
-    content: "";
+    content: " ";
   }
   .row:after {
     clear: both;

diff --git a/less/mixins.less b/less/mixins.less
index 63be2318ca46a1c1acb9242df3205b0d6bfe89f2..1da27586348a0a4485cf37cdeea7e9f829589886 100644 (file)
--- a/less/mixins.less
+++ b/less/mixins.less
@@ -3,20 +3,24 @@
 // --------------------------------------------------
 
 
-// UTILITY MIXINS
-// --------------------------------------------------
+// Utilities
+// -------------------------
 
 // Clearfix
-// --------
-// For clearing floats like a boss h5bp.com/q
-.clearfix() {
+// Source: http://nicolasgallagher.com/micro-clearfix-hack/
+//
+// For modern browsers
+// 1. The space content is one way to avoid an Opera bug when the
+//    contenteditable attribute is included anywhere else in the document.
+//    Otherwise it causes space to appear at the top and bottom of elements
+//    that are clearfixed.
+// 2. The use of `table` rather than `block` is only necessary if using
+//    `:before` to contain the top-margins of child elements.
+.clear_float() {
   &:before,
   &:after {
-    display: table;
-    content: "";
-    // Fixes Opera/contenteditable bug:
-    // http://nicolasgallagher.com/micro-clearfix-hack/#comment-36952
-    line-height: 0;
+    content: " "; /* 1 */
+    display: table; /* 2 */
   }
   &:after {
     clear: both;
@@ -24,7 +28,6 @@
 }
 
 // Webkit-style focus
-// ------------------
 .tab-focus() {
   // Default
   outline: thin dotted #333;
@@ -34,7 +37,6 @@
 }
 
 // Center-align a block level element
-// ----------------------------------
 .center-block() {
   display: block;
   margin-left: auto;
@@ -42,7 +44,6 @@
 }
 
 // Sizing shortcuts
-// -------------------------
 .size(@width, @height) {
   width: @width;
   height: @height;
@@ -52,7 +53,6 @@
 }
 
 // Placeholder text
-// -------------------------
 .placeholder(@color: @input-color-placeholder) {
   &:-moz-placeholder {
     color: @color;
@@ -66,7 +66,6 @@
 }
 
 // Text overflow
-// -------------------------
 // Requires inline-block or block for proper styling
 .text-overflow() {
   overflow: hidden;
@@ -75,7 +74,6 @@
 }
 
 // CSS image replacement
-// -------------------------
 // Source: https://github.com/h5bp/html5-boilerplate/commit/aa0396eae757
 .hide-text() {
   font: 0/0 a;

diff --git a/less/utilities.less b/less/utilities.less
index 32247325514bb5e7c096fb458f8cd9380afdab10..b11bcb3e2750db1574788500fa91c8567fbe160c 100644 (file)
--- a/less/utilities.less
+++ b/less/utilities.less
@@ -6,8 +6,8 @@
 // Floats
 // -------------------------
 
-.clear {
-  .clearfix();
+.clearfix {
+  .clear_float();
 }
 .pull-right {
   float: right;