From 840e47eabdcf41239d55d6bf046ea8cc9e2065da Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Wed, 19 Dec 2012 17:49:20 -0800 Subject: [PATCH] Update clearfix mixin and class per @necolas's feedback --- docs/assets/css/bootstrap.css | 51 +++++++++++++---------------------- less/mixins.less | 30 ++++++++++----------- less/utilities.less | 4 +-- 3 files changed, 34 insertions(+), 51 deletions(-) diff --git a/docs/assets/css/bootstrap.css b/docs/assets/css/bootstrap.css index f443e17b7c..33581659dd 100644 --- 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 63be2318ca..1da2758634 100644 --- 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 3224732551..b11bcb3e27 100644 --- a/less/utilities.less +++ b/less/utilities.less @@ -6,8 +6,8 @@ // Floats // ------------------------- -.clear { - .clearfix(); +.clearfix { + .clear_float(); } .pull-right { float: right;