Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP

Loading…

Snugug clearfix #1485

Closed
wants to merge 7 commits into from

3 participants

@Snugug

Homygod Clearfix!

Update for #1151, will resolve #974 and #386.

The overflow clearfix method, while super small, in most cases isn't desired as it does more than just fix floating issues. A clearfix should, by default, only fix floating issues. If someone wants to use the overflow method, that should be called explicitly.

As for all of the extends, they're there to reduce overall output. I'm open to debating whether or not it should be enabled by default, but IMO most uses of clearfix don't happen from behind media queries and as such the extends should be fine.

Snugug added some commits
@Snugug Snugug The Clearfixes! THE CLEARFIXES!
Four clearfix mixins based on their commonly understood names; overflow, legacy, micro, and modern. Fifth clearfix mixin, simply "clearfix", will choose the correct clearfix mixin based on either a keyword input or based on levels of browser support. Each clearfix mixin by default will also extend silent selectors to allow for smaller output by default from the mixins.
1ad4d68
@Snugug Snugug Clearfix Examples 828fc22
@Snugug

I forgot tests! Sorry @chriseppstein! I'll do those this morning!

@ericam
Owner

Thanks @Snugug! This is a really cool feature, and I'd like to get it merged in.

I think the failing test is not actually related to this change? The latest commit on master is passing, so try merging that in, and see if the tests pass. I'll leave my other thoughts inline.

@ericam ericam commented on the diff
.../stylesheets/compass/utilities/general/_clearfix.scss
((22 lines not shown))
- &:after {
- content : "\0020";
- display : block;
- height : 0;
- clear : both;
- overflow : hidden;
- visibility : hidden;
- }
- @include has-layout;
-}
-
-// This is an updated version of the PIE clearfix method that reduces the amount of CSS output.
-// If you need to support Firefox before 3.5 you need to use `legacy-pie-clearfix` instead.
-//
-// Adapted from: [A new micro clearfix hack](http://nicolasgallagher.com/micro-clearfix-hack/)
-@mixin pie-clearfix {
@ericam Owner
ericam added a note

We'll need to deprecate the old pie-clearfix and legacy-pie-clearfix before we can remove them. That can happen with @warn and a re-direction to the most appropriate new mixin.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
@ericam ericam commented on the diff
.../stylesheets/compass/utilities/general/_clearfix.scss
((42 lines not shown))
- }
- @include has-layout;
+// Determines whether the clearfix mixin should extend selectors by default
+// Default to true
+$default-clearfix-extend: true !default;
+
+// The type of clearfix to use by default
+// Default to false
+$default-clearfix-type: false !default;
+
+//////////////////////////////
+// Clearfix Mixins
+//////////////////////////////
+// [Overflow Clearfix](http://www.quirksmode.org/blog/archives/2005/03/clearing_floats.html)
+@mixin clearfix-overflow($extend: $default-clearfix-extend) {
+ @if not $extend {
@ericam Owner
ericam added a note

While this use of @extend is an interesting feature to consider across compass more broadly, it requires a bit more thought. I'd prefer to discuss it as a separate feature, with an issue/pull-request of its own. As far as I'm aware, Compass currently has no output (including placeholder classes) unless explicitly requested — and I'd like to keep it that way. It's not hard for a user to create their own clearfix classes/placeholders as they want, and if we plan to provide that feature, it should be opt-in.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
@chriseppstein

I'm closing this PR because there's been too much change since it was initially submitted. Sorry, We're going to do better going forward. Hopefully, someone can resubmit the change against 1.0. Features should be submitted to the master branch, bug fixes to the stable branch.

@Snugug

I'll do that.

@chriseppstein

@Snugug Thanks. I'm with eric on this one, can we leave out the extend parts for right now so that we can think about that as a more comprehensive strategy?

@Snugug
@chriseppstein

#1746 appears to be an updated version. Thoughts?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Commits on Dec 16, 2013
  1. @Snugug

    The Clearfixes! THE CLEARFIXES!

    Snugug authored
    Four clearfix mixins based on their commonly understood names; overflow, legacy, micro, and modern. Fifth clearfix mixin, simply "clearfix", will choose the correct clearfix mixin based on either a keyword input or based on levels of browser support. Each clearfix mixin by default will also extend silent selectors to allow for smaller output by default from the mixins.
  2. @Snugug

    Clearfix Examples

    Snugug authored
  3. @Snugug

    Backwards logic, fixed.

    Snugug authored
  4. @Snugug
  5. @Snugug

    Removed legacy clearfix tests

    Snugug authored
  6. @Snugug
  7. @Snugug
This page is out of date. Refresh to see the latest.
Showing with 695 additions and 150 deletions.
  1. +9 −0 cli/test/fixtures/stylesheets/compass/css/clearfix-currentIE-currentFF.css
  2. +15 −0 cli/test/fixtures/stylesheets/compass/css/clearfix-oldIE-currentFF.css
  3. +19 −0 cli/test/fixtures/stylesheets/compass/css/clearfix-oldIE-oldFF.css
  4. +0 −26 cli/test/fixtures/stylesheets/compass/css/legacy_clearfix.css
  5. +70 −10 cli/test/fixtures/stylesheets/compass/css/utilities.css
  6. +22 −0 cli/test/fixtures/stylesheets/compass/sass/clearfix-currentIE-currentFF.scss
  7. +22 −0 cli/test/fixtures/stylesheets/compass/sass/clearfix-oldIE-currentFF.scss
  8. +22 −0 cli/test/fixtures/stylesheets/compass/sass/clearfix-oldIE-oldFF.scss
  9. +0 −14 cli/test/fixtures/stylesheets/compass/sass/legacy_clearfix.scss
  10. +60 −6 cli/test/fixtures/stylesheets/compass/sass/utilities.scss
  11. +8 −0 compass-style.org/content/examples/compass/utilities/clearfix.haml
  12. +25 −0 compass-style.org/content/examples/compass/utilities/clearfix/markup.haml
  13. +44 −0 compass-style.org/content/examples/compass/utilities/clearfix/stylesheet.scss
  14. +141 −37 core/stylesheets/compass/utilities/general/_clearfix.scss
  15. +9 −0 core/test/integrations/projects/compass/css/clearfix-currentIE-currentFF.css
  16. +15 −0 core/test/integrations/projects/compass/css/clearfix-oldIE-currentFF.css
  17. +19 −0 core/test/integrations/projects/compass/css/clearfix-oldIE-oldFF.css
  18. +0 −26 core/test/integrations/projects/compass/css/legacy_clearfix.css
  19. +70 −10 core/test/integrations/projects/compass/css/utilities.css
  20. +22 −0 core/test/integrations/projects/compass/sass/clearfix-currentIE-currentFF.scss
  21. +22 −0 core/test/integrations/projects/compass/sass/clearfix-oldIE-currentFF.scss
  22. +22 −0 core/test/integrations/projects/compass/sass/clearfix-oldIE-oldFF.scss
  23. +0 −15 core/test/integrations/projects/compass/sass/legacy_clearfix.scss
  24. +59 −6 core/test/integrations/projects/compass/sass/utilities.scss
View
9 cli/test/fixtures/stylesheets/compass/css/clearfix-currentIE-currentFF.css
@@ -0,0 +1,9 @@
+.modern-clearfix:after, .clearfix-extend:after {
+ content: "";
+ display: table;
+ clear: both; }
+
+.clearfix-no-extend:after {
+ content: "";
+ display: table;
+ clear: both; }
View
15 cli/test/fixtures/stylesheets/compass/css/clearfix-oldIE-currentFF.css
@@ -0,0 +1,15 @@
+.micro-clearfix, .clearfix-extend {
+ *zoom: 1; }
+ .micro-clearfix:before, .clearfix-extend:before, .micro-clearfix:after, .clearfix-extend:after {
+ content: "";
+ display: table; }
+ .micro-clearfix:after, .clearfix-extend:after {
+ clear: both; }
+
+.clearfix-no-extend {
+ *zoom: 1; }
+ .clearfix-no-extend:before, .clearfix-no-extend:after {
+ content: "";
+ display: table; }
+ .clearfix-no-extend:after {
+ clear: both; }
View
19 cli/test/fixtures/stylesheets/compass/css/clearfix-oldIE-oldFF.css
@@ -0,0 +1,19 @@
+.legacy-clearfix, .clearfix-extend {
+ *zoom: 1; }
+ .legacy-clearfix:before, .clearfix-extend:before, .legacy-clearfix:after, .clearfix-extend:after {
+ content: ".";
+ display: block;
+ height: 0;
+ overflow: hidden; }
+ .legacy-clearfix:after, .clearfix-extend:after {
+ clear: both; }
+
+.clearfix-no-extend {
+ *zoom: 1; }
+ .clearfix-no-extend:before, .clearfix-no-extend:after {
+ content: ".";
+ display: block;
+ height: 0;
+ overflow: hidden; }
+ .clearfix-no-extend:after {
+ clear: both; }
View
26 cli/test/fixtures/stylesheets/compass/css/legacy_clearfix.css
@@ -1,26 +0,0 @@
-.clearfix {
- overflow: hidden;
- display: inline-block; }
- .clearfix {
- display: block; }
-
-.pie-clearfix {
- display: inline-block; }
- .pie-clearfix:after {
- content: "\0020";
- display: block;
- height: 0;
- clear: both;
- overflow: hidden;
- visibility: hidden; }
- .pie-clearfix {
- display: block; }
-
-.simplified-pie-clearfix {
- display: inline-block; }
- .simplified-pie-clearfix:after {
- content: "";
- display: table;
- clear: both; }
- .simplified-pie-clearfix {
- display: block; }
View
80 cli/test/fixtures/stylesheets/compass/css/utilities.css
@@ -1,24 +1,84 @@
-.clearfix {
+.clearfix-overflow__mixin-extend, .clearfix-overflow__master-mixin-type-extend, .clearfix-overflow__extend {
overflow: hidden;
*zoom: 1; }
-.pie-clearfix {
+.clearfix-legacy__mixin-extend, .clearfix-legacy__master-mixin-type-extend, .clearfix-legacy__extend {
*zoom: 1; }
- .pie-clearfix:after {
- content: "\0020";
+ .clearfix-legacy__mixin-extend:before, .clearfix-legacy__master-mixin-type-extend:before, .clearfix-legacy__extend:before, .clearfix-legacy__mixin-extend:after, .clearfix-legacy__master-mixin-type-extend:after, .clearfix-legacy__extend:after {
+ content: ".";
display: block;
height: 0;
- clear: both;
- overflow: hidden;
- visibility: hidden; }
+ overflow: hidden; }
+ .clearfix-legacy__mixin-extend:after, .clearfix-legacy__master-mixin-type-extend:after, .clearfix-legacy__extend:after {
+ clear: both; }
+
+.clearfix-micro__mixin-extend, .clearfix-micro__master-mixin-type-extend, .clearfix-micro__extend {
+ *zoom: 1; }
+ .clearfix-micro__mixin-extend:before, .clearfix-micro__master-mixin-type-extend:before, .clearfix-micro__extend:before, .clearfix-micro__mixin-extend:after, .clearfix-micro__master-mixin-type-extend:after, .clearfix-micro__extend:after {
+ content: "";
+ display: table; }
+ .clearfix-micro__mixin-extend:after, .clearfix-micro__master-mixin-type-extend:after, .clearfix-micro__extend:after {
+ clear: both; }
+
+.clearfix-modern__mixin-extend:after, .clearfix-modern__master-mixin-type-extend:after, .clearfix-modern__extend:after {
+ content: "";
+ display: table;
+ clear: both; }
+
+.clearfix-overflow__mixin-no-extend {
+ overflow: hidden;
+ *zoom: 1; }
+
+.clearfix-overflow__master-mixin-type-no-extend {
+ overflow: hidden;
+ *zoom: 1; }
+
+.clearfix-legacy__mixin-no-extend {
+ *zoom: 1; }
+ .clearfix-legacy__mixin-no-extend:before, .clearfix-legacy__mixin-no-extend:after {
+ content: ".";
+ display: block;
+ height: 0;
+ overflow: hidden; }
+ .clearfix-legacy__mixin-no-extend:after {
+ clear: both; }
+
+.clearfix-legacy__master-mixin-type-no-extend {
+ *zoom: 1; }
+ .clearfix-legacy__master-mixin-type-no-extend:before, .clearfix-legacy__master-mixin-type-no-extend:after {
+ content: ".";
+ display: block;
+ height: 0;
+ overflow: hidden; }
+ .clearfix-legacy__master-mixin-type-no-extend:after {
+ clear: both; }
-.simple-pie-clearfix {
+.clearfix-micro {
*zoom: 1; }
- .simple-pie-clearfix:after {
+ .clearfix-micro:before, .clearfix-micro:after {
content: "";
- display: table;
+ display: table; }
+ .clearfix-micro:after {
clear: both; }
+.clearfix-micro__master-mixin-type-no-extend {
+ *zoom: 1; }
+ .clearfix-micro__master-mixin-type-no-extend:before, .clearfix-micro__master-mixin-type-no-extend:after {
+ content: "";
+ display: table; }
+ .clearfix-micro__master-mixin-type-no-extend:after {
+ clear: both; }
+
+.clearfix-modern:after {
+ content: "";
+ display: table;
+ clear: both; }
+
+.clearfix-modern__master-mixin-type-no-extend:after {
+ content: "";
+ display: table;
+ clear: both; }
+
p.light {
background-color: #f3aead;
color: black; }
View
22 cli/test/fixtures/stylesheets/compass/sass/clearfix-currentIE-currentFF.scss
@@ -0,0 +1,22 @@
+$graceful-usage-threshold: 1;
+$critical-usage-threshold: 1;
+
+$browser-minimum-versions: (
+ "ie": "8",
+ "firefox": "3.5"
+);
+
+@import "project-setup";
+@import "compass/utilities";
+
+.modern-clearfix {
+ @include clearfix-modern(true);
+}
+
+.clearfix-extend {
+ @include clearfix;
+}
+
+.clearfix-no-extend {
+ @include clearfix(false);
+}
View
22 cli/test/fixtures/stylesheets/compass/sass/clearfix-oldIE-currentFF.scss
@@ -0,0 +1,22 @@
+$graceful-usage-threshold: 1;
+$critical-usage-threshold: 1;
+
+$browser-minimum-versions: (
+ "ie": "6",
+ "firefox": "3.5"
+);
+
+@import "project-setup";
+@import "compass/utilities";
+
+.micro-clearfix {
+ @include clearfix-micro(true);
+}
+
+.clearfix-extend {
+ @include clearfix;
+}
+
+.clearfix-no-extend {
+ @include clearfix(false);
+}
View
22 cli/test/fixtures/stylesheets/compass/sass/clearfix-oldIE-oldFF.scss
@@ -0,0 +1,22 @@
+$graceful-usage-threshold: 1;
+$critical-usage-threshold: 1;
+
+$browser-minimum-versions: (
+ "ie": "6",
+ "firefox": "2"
+);
+
+@import "project-setup";
+@import "compass/utilities";
+
+.legacy-clearfix {
+ @include clearfix-legacy(true);
+}
+
+.clearfix-extend {
+ @include clearfix;
+}
+
+.clearfix-no-extend {
+ @include clearfix(false);
+}
View
14 cli/test/fixtures/stylesheets/compass/sass/legacy_clearfix.scss
@@ -1,14 +0,0 @@
-$default-has-layout-approach: block;
-
-@import "compass/utilities";
-
-.clearfix {
- @include clearfix;
-}
-
-.pie-clearfix {
- @include legacy-pie-clearfix;
-}
-.simplified-pie-clearfix {
- @include pie-clearfix;
-}
View
66 cli/test/fixtures/stylesheets/compass/sass/utilities.scss
@@ -1,14 +1,68 @@
+@import "project-setup";
@import "compass/utilities";
-.clearfix {
- @include clearfix;
+.clearfix-overflow__mixin-no-extend {
+ @include clearfix-overflow(false);
+}
+.clearfix-overflow__mixin-extend {
+ @include clearfix-overflow(true);
+}
+.clearfix-overflow__master-mixin-type-no-extend {
+ @include clearfix(false, 'overflow');
+}
+.clearfix-overflow__master-mixin-type-extend {
+ @include clearfix(true, 'overflow');
+}
+.clearfix-overflow__extend {
+ @extend %clearfix-overflow;
+}
+
+.clearfix-legacy__mixin-no-extend {
+ @include clearfix-legacy(false);
+}
+.clearfix-legacy__mixin-extend {
+ @include clearfix-legacy(true);
+}
+.clearfix-legacy__master-mixin-type-no-extend {
+ @include clearfix(false, 'legacy');
+}
+.clearfix-legacy__master-mixin-type-extend {
+ @include clearfix(true, 'legacy');
+}
+.clearfix-legacy__extend {
+ @extend %clearfix-legacy;
}
-.pie-clearfix {
- @include legacy-pie-clearfix;
+.clearfix-micro {
+ @include clearfix-micro(false);
+}
+.clearfix-micro__mixin-extend {
+ @include clearfix-micro(true);
+}
+.clearfix-micro__master-mixin-type-no-extend {
+ @include clearfix(false, 'micro');
+}
+.clearfix-micro__master-mixin-type-extend {
+ @include clearfix(true, 'micro');
+}
+.clearfix-micro__extend {
+ @extend %clearfix-micro;
+}
+
+.clearfix-modern {
+ @include clearfix-modern(false);
+}
+.clearfix-modern__mixin-extend {
+ @include clearfix-modern(true);
+}
+.clearfix-modern__master-mixin-type-no-extend {
+ @include clearfix(false, 'modern');
+}
+.clearfix-modern__master-mixin-type-extend {
+ @include clearfix(true, 'modern');
}
-.simple-pie-clearfix {
- @include pie-clearfix;
+.clearfix-modern__extend {
+ @extend %clearfix-modern;
}
p.light { @include contrasted(#f3aead); }
View
8 compass-style.org/content/examples/compass/utilities/clearfix.haml
@@ -0,0 +1,8 @@
+---
+title: Compass Clearfix Example
+description: A clearfix will extend the bottom of the element to enclose any floated elements it contains.
+framework: compass
+stylesheet: compass/utilities/general/_clearfix.scss
+example: true
+---
+= render "partials/example"
View
25 compass-style.org/content/examples/compass/utilities/clearfix/markup.haml
@@ -0,0 +1,25 @@
+.example
+ .no-clearfix
+ .float No Clearfix. All floats will leak outside the containing box
+ .overflow-clearfix
+ .float Overflow Clearfix. All floats will be contained inside of the current box unless affected by leaking floats.
+ .overflow-clearfix
+ .float Overflow Clearfix. All floats will be contained inside of the current box unless affected by leaking floats.
+ .no-clearfix
+ .float No Clearfix. All floats will leak outside the containing box
+ .legacy-clearfix
+ .float Legacy Clearfix. All floats will be contained inside of the current box unless affected by leaking floats.
+ .legacy-clearfix
+ .float Legacy Clearfix. All floats will be contained inside of the current box unless affected by leaking floats.
+ .no-clearfix
+ .float No Clearfix. All floats will leak outside the containing box
+ .micro-clearfix
+ .float Micro Clearfix. All floats will be contained inside of the current box unless affected by leaking floats.
+ .micro-clearfix
+ .float Micro Clearfix. All floats will be contained inside of the current box unless affected by leaking floats.
+ .no-clearfix
+ .float No Clearfix. All floats will leak outside the containing box
+ .modern-clearfix
+ .float Modern Clearfix. All floats will be contained inside of the current box unless affected by leaking floats.
+ .modern-clearfix
+ .float Modern Clearfix. All floats will be contained inside of the current box unless affected by leaking floats.
View
44 compass-style.org/content/examples/compass/utilities/clearfix/stylesheet.scss
@@ -0,0 +1,44 @@
+@import "compass/utilities/general/clearfix";
+
+.example {
+ [class$="clearfix"] {
+ /* Basic styling for classes ending in clearfix */
+ border: 1px solid black;
+ background: rgba(blue, .25);
+ margin-bottom: 1em;
+ @include box-sizing(border-box);
+ }
+
+ .float {
+ /* Basic styling for floated items */
+ width: 50%;
+ padding: .5em;
+ float: left;
+ border: 1px solid black;
+ background: rgba(red, .25);
+ @include box-sizing(border-box);
+ }
+
+ .overflow-clearfix {
+ /* Can also be used via `@extend %clearfix-overflow` or `@include clearfix-overflow` */
+ @include clearfix($type: "overflow");
+ }
+
+ .legacy-clearfix {
+ /* Chosen automatically if IE6, IE7 or Firefox < 3.5 is needed. */
+ /* Can also be used via `@extend %clearfix-legacy` or `@include clearfix-legacy` */
+ @include clearfix($type: "legacy");
+ }
+
+ .micro-clearfix {
+ /* Chosen automatically if IE6, IE7 and Firefox >= 3.5 is needed. */
+ /* Can also be used via `@extend %clearfix-micro` or `@include clearfix-micro` */
+ @include clearfix($type: "micro");
+ }
+
+ .modern-clearfix {
+ /* Chosen automatically if IE6 and IE7 not needed. */
+ /* Can also be used via `@extend %clearfix-modern` or `@include clearfix-modern` */
+ @include clearfix($type: "modern");
+ }
+}
View
178 core/stylesheets/compass/utilities/general/_clearfix.scss
@@ -2,43 +2,147 @@
// Extends the bottom of the element to enclose any floats it contains.
// @doc on
+@import "compass/support";
@import "hacks";
-// This basic method is preferred for the usual case, when positioned
-// content will not show outside the bounds of the container.
-//
-// Recommendations include using this in conjunction with a width.
-// Credit: [quirksmode.org](http://www.quirksmode.org/blog/archives/2005/03/clearing_floats.html)
-@mixin clearfix {
- overflow: hidden;
- @include has-layout;
-}
-
-// This older method from Position Is Everything called
-// [Easy Clearing](http://www.positioniseverything.net/easyclearing.html)
-// has the advantage of allowing positioned elements to hang
-// outside the bounds of the container at the expense of more tricky CSS.
-@mixin legacy-pie-clearfix {
- &:after {
- content : "\0020";
- display : block;
- height : 0;
- clear : both;
- overflow : hidden;
- visibility : hidden;
- }
- @include has-layout;
-}
-
-// This is an updated version of the PIE clearfix method that reduces the amount of CSS output.
-// If you need to support Firefox before 3.5 you need to use `legacy-pie-clearfix` instead.
-//
-// Adapted from: [A new micro clearfix hack](http://nicolasgallagher.com/micro-clearfix-hack/)
-@mixin pie-clearfix {
@ericam Owner
ericam added a note

We'll need to deprecate the old pie-clearfix and legacy-pie-clearfix before we can remove them. That can happen with @warn and a re-direction to the most appropriate new mixin.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
- &:after {
- content: "";
- display: table;
- clear: both;
- }
- @include has-layout;
+// Determines whether the clearfix mixin should extend selectors by default
+// Default to true
+$default-clearfix-extend: true !default;
+
+// The type of clearfix to use by default
+// Default to false
+$default-clearfix-type: false !default;
+
+//////////////////////////////
+// Clearfix Mixins
+//////////////////////////////
+// [Overflow Clearfix](http://www.quirksmode.org/blog/archives/2005/03/clearing_floats.html)
+@mixin clearfix-overflow($extend: $default-clearfix-extend) {
+ @if not $extend {
@ericam Owner
ericam added a note

While this use of @extend is an interesting feature to consider across compass more broadly, it requires a bit more thought. I'd prefer to discuss it as a separate feature, with an issue/pull-request of its own. As far as I'm aware, Compass currently has no output (including placeholder classes) unless explicitly requested — and I'd like to keep it that way. It's not hard for a user to create their own clearfix classes/placeholders as they want, and if we plan to provide that feature, it should be opt-in.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
+ overflow: hidden;
+ @include has-layout;
+ }
+ @else {
+ @extend %clearfix-overflow;
+ }
+}
+
+// [Legacy Clearfix](http://www.css-101.org/articles/clearfix/latest-new-clearfix-so-far.php)
+// Chosen automatically if IE6, IE7 or Firefox < 3.5 is needed.
+@mixin clearfix-legacy($extend: $default-clearfix-extend) {
+ @if not $extend {
+ // Legacy IE layout
+ @include has-layout;
+
+ &:before,
+ &:after {
+ content: ".";
+ display: block;
+ height: 0;
+ overflow: hidden;
+ }
+
+ &:after {
+ clear: both;
+ }
+ }
+ @else {
+ @extend %clearfix-legacy;
+ }
}
+
+// [Micro Clearfix](http://nicolasgallagher.com/better-float-containment-in-ie/)
+// Chosen automatically if IE6, IE7 and Firefox < 3.5 is not needed.
+@mixin clearfix-micro($extend: $default-clearfix-extend) {
+ @if not $extend {
+ // Legacy IE layout
+ @include has-layout;
+
+ &:before,
+ &:after {
+ content: "";
+ display: table;
+ }
+
+ &:after {
+ clear: both;
+ }
+ }
+ @else {
+ @extend %clearfix-micro;
+ }
+}
+
+// [Modern Clearfix](http://www.css-101.org/articles/clearfix/latest-new-clearfix-so-far.php)
+// Chosen automatically if IE6 and IE7 not needed.
+@mixin clearfix-modern($extend: $default-clearfix-extend) {
+ @if not $extend {
+ &:after {
+ content: "";
+ display: table;
+ clear: both;
+ }
+ }
+ @else {
+ @extend %clearfix;
+ }
+}
+
+// Smart mixin to determine which clearfix type to use
+@mixin clearfix($extend: $default-clearfix-extend, $type: $default-clearfix-type) {
+ // Overflow Clearfix
+ @if $type == 'overflow' {
+ @include clearfix-overflow($extend);
+ }
+ // Legacy Clearfix
+ @else if $type == 'legacy' {
+ @include clearfix-legacy($extend);
+ }
+ // Micro Clearfix
+ @else if $type == 'micro' {
+ @include clearfix-micro($extend);
+ }
+ // Modern Clearfix
+ @else if $type == 'modern' {
+ @include clearfix-modern($extend);
+ }
+ // Clearfix based on browser support needs
+ // Legacy and Micro Clearfixes
+ @else if support-legacy-browser("ie", "6", "7") {
+ // Legacy Clearfix
+ @if support-legacy-browser("firefox", "2", "3") {
+ @include clearfix-legacy($extend);
+ }
+ // Micro Clearfix
+ @else {
+ @include clearfix-micro($extend);
+ }
+ }
+ // Modern Clearfix
+ @else {
+ @include clearfix-modern($extend);
+ }
+}
+
+//////////////////////////////
+// Clearfix Extendables
+//////////////////////////////
+%clearfix-overflow {
+ @include clearfix(false, overflow);
+}
+
+%clearfix-legacy {
+ @include clearfix(false, legacy);
+}
+
+%clearfix-micro {
+ @include clearfix(false, micro);
+}
+
+%clearfix-modern {
+ @include clearfix(false, modern);
+}
+
+%clearfix {
+ @extend %clearfix-modern;
+}
View
9 core/test/integrations/projects/compass/css/clearfix-currentIE-currentFF.css
@@ -0,0 +1,9 @@
+.modern-clearfix:after, .clearfix-extend:after {
+ content: "";
+ display: table;
+ clear: both; }
+
+.clearfix-no-extend:after {
+ content: "";
+ display: table;
+ clear: both; }
View
15 core/test/integrations/projects/compass/css/clearfix-oldIE-currentFF.css
@@ -0,0 +1,15 @@
+.micro-clearfix, .clearfix-extend {
+ *zoom: 1; }
+ .micro-clearfix:before, .clearfix-extend:before, .micro-clearfix:after, .clearfix-extend:after {
+ content: "";
+ display: table; }
+ .micro-clearfix:after, .clearfix-extend:after {
+ clear: both; }
+
+.clearfix-no-extend {
+ *zoom: 1; }
+ .clearfix-no-extend:before, .clearfix-no-extend:after {
+ content: "";
+ display: table; }
+ .clearfix-no-extend:after {
+ clear: both; }
View
19 core/test/integrations/projects/compass/css/clearfix-oldIE-oldFF.css
@@ -0,0 +1,19 @@
+.legacy-clearfix, .clearfix-extend {
+ *zoom: 1; }
+ .legacy-clearfix:before, .clearfix-extend:before, .legacy-clearfix:after, .clearfix-extend:after {
+ content: ".";
+ display: block;
+ height: 0;
+ overflow: hidden; }
+ .legacy-clearfix:after, .clearfix-extend:after {
+ clear: both; }
+
+.clearfix-no-extend {
+ *zoom: 1; }
+ .clearfix-no-extend:before, .clearfix-no-extend:after {
+ content: ".";
+ display: block;
+ height: 0;
+ overflow: hidden; }
+ .clearfix-no-extend:after {
+ clear: both; }
View
26 core/test/integrations/projects/compass/css/legacy_clearfix.css
@@ -1,26 +0,0 @@
-.clearfix {
- overflow: hidden;
- display: inline-block; }
- .clearfix {
- display: block; }
-
-.pie-clearfix {
- display: inline-block; }
- .pie-clearfix:after {
- content: "\0020";
- display: block;
- height: 0;
- clear: both;
- overflow: hidden;
- visibility: hidden; }
- .pie-clearfix {
- display: block; }
-
-.simplified-pie-clearfix {
- display: inline-block; }
- .simplified-pie-clearfix:after {
- content: "";
- display: table;
- clear: both; }
- .simplified-pie-clearfix {
- display: block; }
View
80 core/test/integrations/projects/compass/css/utilities.css
@@ -1,24 +1,84 @@
-.clearfix {
+.clearfix-overflow__mixin-extend, .clearfix-overflow__master-mixin-type-extend, .clearfix-overflow__extend {
overflow: hidden;
*zoom: 1; }
-.pie-clearfix {
+.clearfix-legacy__mixin-extend, .clearfix-legacy__master-mixin-type-extend, .clearfix-legacy__extend {
*zoom: 1; }
- .pie-clearfix:after {
- content: "\0020";
+ .clearfix-legacy__mixin-extend:before, .clearfix-legacy__master-mixin-type-extend:before, .clearfix-legacy__extend:before, .clearfix-legacy__mixin-extend:after, .clearfix-legacy__master-mixin-type-extend:after, .clearfix-legacy__extend:after {
+ content: ".";
display: block;
height: 0;
- clear: both;
- overflow: hidden;
- visibility: hidden; }
+ overflow: hidden; }
+ .clearfix-legacy__mixin-extend:after, .clearfix-legacy__master-mixin-type-extend:after, .clearfix-legacy__extend:after {
+ clear: both; }
+
+.clearfix-micro__mixin-extend, .clearfix-micro__master-mixin-type-extend, .clearfix-micro__extend {
+ *zoom: 1; }
+ .clearfix-micro__mixin-extend:before, .clearfix-micro__master-mixin-type-extend:before, .clearfix-micro__extend:before, .clearfix-micro__mixin-extend:after, .clearfix-micro__master-mixin-type-extend:after, .clearfix-micro__extend:after {
+ content: "";
+ display: table; }
+ .clearfix-micro__mixin-extend:after, .clearfix-micro__master-mixin-type-extend:after, .clearfix-micro__extend:after {
+ clear: both; }
+
+.clearfix-modern__mixin-extend:after, .clearfix-modern__master-mixin-type-extend:after, .clearfix-modern__extend:after {
+ content: "";
+ display: table;
+ clear: both; }
+
+.clearfix-overflow__mixin-no-extend {
+ overflow: hidden;
+ *zoom: 1; }
+
+.clearfix-overflow__master-mixin-type-no-extend {
+ overflow: hidden;
+ *zoom: 1; }
+
+.clearfix-legacy__mixin-no-extend {
+ *zoom: 1; }
+ .clearfix-legacy__mixin-no-extend:before, .clearfix-legacy__mixin-no-extend:after {
+ content: ".";
+ display: block;
+ height: 0;
+ overflow: hidden; }
+ .clearfix-legacy__mixin-no-extend:after {
+ clear: both; }
+
+.clearfix-legacy__master-mixin-type-no-extend {
+ *zoom: 1; }
+ .clearfix-legacy__master-mixin-type-no-extend:before, .clearfix-legacy__master-mixin-type-no-extend:after {
+ content: ".";
+ display: block;
+ height: 0;
+ overflow: hidden; }
+ .clearfix-legacy__master-mixin-type-no-extend:after {
+ clear: both; }
-.simple-pie-clearfix {
+.clearfix-micro {
*zoom: 1; }
- .simple-pie-clearfix:after {
+ .clearfix-micro:before, .clearfix-micro:after {
content: "";
- display: table;
+ display: table; }
+ .clearfix-micro:after {
clear: both; }
+.clearfix-micro__master-mixin-type-no-extend {
+ *zoom: 1; }
+ .clearfix-micro__master-mixin-type-no-extend:before, .clearfix-micro__master-mixin-type-no-extend:after {
+ content: "";
+ display: table; }
+ .clearfix-micro__master-mixin-type-no-extend:after {
+ clear: both; }
+
+.clearfix-modern:after {
+ content: "";
+ display: table;
+ clear: both; }
+
+.clearfix-modern__master-mixin-type-no-extend:after {
+ content: "";
+ display: table;
+ clear: both; }
+
p.light {
background-color: #f3aead;
color: black; }
View
22 core/test/integrations/projects/compass/sass/clearfix-currentIE-currentFF.scss
@@ -0,0 +1,22 @@
+$graceful-usage-threshold: 1;
+$critical-usage-threshold: 1;
+
+$browser-minimum-versions: (
+ "ie": "8",
+ "firefox": "3.5"
+);
+
+@import "project-setup";
+@import "compass/utilities";
+
+.modern-clearfix {
+ @include clearfix-modern(true);
+}
+
+.clearfix-extend {
+ @include clearfix;
+}
+
+.clearfix-no-extend {
+ @include clearfix(false);
+}
View
22 core/test/integrations/projects/compass/sass/clearfix-oldIE-currentFF.scss
@@ -0,0 +1,22 @@
+$graceful-usage-threshold: 1;
+$critical-usage-threshold: 1;
+
+$browser-minimum-versions: (
+ "ie": "6",
+ "firefox": "3.5"
+);
+
+@import "project-setup";
+@import "compass/utilities";
+
+.micro-clearfix {
+ @include clearfix-micro(true);
+}
+
+.clearfix-extend {
+ @include clearfix;
+}
+
+.clearfix-no-extend {
+ @include clearfix(false);
+}
View
22 core/test/integrations/projects/compass/sass/clearfix-oldIE-oldFF.scss
@@ -0,0 +1,22 @@
+$graceful-usage-threshold: 1;
+$critical-usage-threshold: 1;
+
+$browser-minimum-versions: (
+ "ie": "6",
+ "firefox": "2"
+);
+
+@import "project-setup";
+@import "compass/utilities";
+
+.legacy-clearfix {
+ @include clearfix-legacy(true);
+}
+
+.clearfix-extend {
+ @include clearfix;
+}
+
+.clearfix-no-extend {
+ @include clearfix(false);
+}
View
15 core/test/integrations/projects/compass/sass/legacy_clearfix.scss
@@ -1,15 +0,0 @@
-@import "project-setup";
-$default-has-layout-approach: block;
-
-@import "compass/utilities";
-
-.clearfix {
- @include clearfix;
-}
-
-.pie-clearfix {
- @include legacy-pie-clearfix;
-}
-.simplified-pie-clearfix {
- @include pie-clearfix;
-}
View
65 core/test/integrations/projects/compass/sass/utilities.scss
@@ -1,15 +1,68 @@
@import "project-setup";
@import "compass/utilities";
-.clearfix {
- @include clearfix;
+.clearfix-overflow__mixin-no-extend {
+ @include clearfix-overflow(false);
+}
+.clearfix-overflow__mixin-extend {
+ @include clearfix-overflow(true);
+}
+.clearfix-overflow__master-mixin-type-no-extend {
+ @include clearfix(false, 'overflow');
+}
+.clearfix-overflow__master-mixin-type-extend {
+ @include clearfix(true, 'overflow');
+}
+.clearfix-overflow__extend {
+ @extend %clearfix-overflow;
+}
+
+.clearfix-legacy__mixin-no-extend {
+ @include clearfix-legacy(false);
+}
+.clearfix-legacy__mixin-extend {
+ @include clearfix-legacy(true);
+}
+.clearfix-legacy__master-mixin-type-no-extend {
+ @include clearfix(false, 'legacy');
+}
+.clearfix-legacy__master-mixin-type-extend {
+ @include clearfix(true, 'legacy');
+}
+.clearfix-legacy__extend {
+ @extend %clearfix-legacy;
}
-.pie-clearfix {
- @include legacy-pie-clearfix;
+.clearfix-micro {
+ @include clearfix-micro(false);
+}
+.clearfix-micro__mixin-extend {
+ @include clearfix-micro(true);
+}
+.clearfix-micro__master-mixin-type-no-extend {
+ @include clearfix(false, 'micro');
+}
+.clearfix-micro__master-mixin-type-extend {
+ @include clearfix(true, 'micro');
+}
+.clearfix-micro__extend {
+ @extend %clearfix-micro;
+}
+
+.clearfix-modern {
+ @include clearfix-modern(false);
+}
+.clearfix-modern__mixin-extend {
+ @include clearfix-modern(true);
+}
+.clearfix-modern__master-mixin-type-no-extend {
+ @include clearfix(false, 'modern');
+}
+.clearfix-modern__master-mixin-type-extend {
+ @include clearfix(true, 'modern');
}
-.simple-pie-clearfix {
- @include pie-clearfix;
+.clearfix-modern__extend {
+ @extend %clearfix-modern;
}
p.light { @include contrasted(#f3aead); }
Something went wrong with that request. Please try again.