stylesheets/toolkit/_clearfix.scss in toolkit-1.2.1 vs stylesheets/toolkit/_clearfix.scss in toolkit-1.2.2

- old
+ new

@@ -1,16 +1,78 @@ ////////////////////////////// +// Legacy Clearfix +// +// For when you need full Legacy support, including old IE and old Firefox +// +// From http://www.css-101.org/articles/clearfix/latest-new-clearfix-so-far.php +////////////////////////////// +%clearfix-legacy { + /* for IE 6/7 */ + *zoom: expression(this.runtimeStyle.zoom="1", this.appendChild(document.createElement("br")).style.cssText="clear:both;font:0/0 serif"); + /* non-JS fallback */ + *zoom: 1; + + &:before, + &:after { + content: "."; + display: block; + height: 0; + overflow: hidden; + } + + &:after { + clear: both; + } +} + +////////////////////////////// +// Micro Clearfix +// +// For when you need old IE support, but not concerned with old Firefox +// From http://nicolasgallagher.com/better-float-containment-in-ie/ +////////////////////////////// +%clearfix-micro { + /* for IE 6/7 */ + *zoom: expression(this.runtimeStyle.zoom="1", this.appendChild(document.createElement("br")).style.cssText="clear:both;font:0/0 serif"); + /* non-JS fallback */ + *zoom: 1; + + &:before, + &:after { + content: ""; + display: table; + } + + &:after { + clear: both; + } +} + +////////////////////////////// +// Modern Clearfix +// +// Clearfix for modern browsers, especiall when using border-box +// +// From http://www.css-101.org/articles/clearfix/latest-new-clearfix-so-far.php +////////////////////////////// +%clearfix:after { + content: ""; + display: table; + clear: both; +} + +////////////////////////////// // Massive Clearfix Mixin // // Clearfix mixin for all of your clearfixing needs. Will choose the right mixin for you. // Can choose whether to extend or to write. ////////////////////////////// $clearfix-extend: false !default; $legacy-support-for-mozilla: true !default; -@mixin clearfix($extend: $clearfix-extend, $direct: 'modern') { - @if ($legacy-support-for-ie6 and $legacy-support-for-ie7 and not $legacy-support-for-mozilla) or ($direct == 'micro') { +@mixin clearfix($extend: $clearfix-extend) { + @if $legacy-support-for-ie6 and $legacy-support-for-ie7 and not $legacy-support-for-mozilla { @if $extend { @extend %clearfix-micro; } @else { /* for IE 6/7 */ @@ -27,11 +89,11 @@ &:after { clear: both; } } } - @else if ($legacy-support-for-ie6 and $legacy-support-for-ie7 and $legacy-support-for-mozilla) or ($direct == 'legacy') { + @else if $legacy-support-for-ie6 and $legacy-support-for-ie7 and $legacy-support-for-mozilla { @if $extend { @extend %clearfix-legacy; } @else { /* for IE 6/7 */ @@ -62,38 +124,6 @@ display: table; clear: both; } } } -} - -////////////////////////////// -// Legacy Clearfix -// -// For when you need full Legacy support, including old IE and old Firefox -// -// From http://www.css-101.org/articles/clearfix/latest-new-clearfix-so-far.php -////////////////////////////// -%clearfix-legacy { - @include clearfix(false, 'legacy'); -} - -////////////////////////////// -// Micro Clearfix -// -// For when you need old IE support, but not concerned with old Firefox -// From http://nicolasgallagher.com/better-float-containment-in-ie/ -////////////////////////////// -%clearfix-micro { - @include clearfix(false, 'micro'); -} - -////////////////////////////// -// Modern Clearfix -// -// Clearfix for modern browsers, especiall when using border-box -// -// From http://www.css-101.org/articles/clearfix/latest-new-clearfix-so-far.php -////////////////////////////// -%clearfix:after { - @include clearfix(false, 'modern'); } \ No newline at end of file