simple-compass 0.0.1

Sign up to get free protection for your applications and to get access to all the features.
Files changed (102) hide show
  1. data/.gitignore +2 -0
  2. data/.rspec +1 -0
  3. data/Gemfile +6 -0
  4. data/Gemfile.lock +26 -0
  5. data/Rakefile +8 -0
  6. data/lib/simple-compass.rb +17 -0
  7. data/lib/simple-compass/sass/functions/display.rb +27 -0
  8. data/lib/simple-compass/sass/functions/lists.rb +101 -0
  9. data/lib/simple-compass/sass/functions/selectors.rb +64 -0
  10. data/lib/simple-compass/sass/functions/sprites.rb +218 -0
  11. data/lib/simple-compass/version.rb +3 -0
  12. data/sass/compass.scss +1 -0
  13. data/sass/compass/_css3.scss +20 -0
  14. data/sass/compass/_layout.scss +3 -0
  15. data/sass/compass/_reset-legacy.scss +3 -0
  16. data/sass/compass/_reset.scss +3 -0
  17. data/sass/compass/_support.scss +40 -0
  18. data/sass/compass/_typography.scss +4 -0
  19. data/sass/compass/_utilities.scss +9 -0
  20. data/sass/compass/css3/_appearance.scss +17 -0
  21. data/sass/compass/css3/_background-clip.scss +43 -0
  22. data/sass/compass/css3/_background-origin.scss +42 -0
  23. data/sass/compass/css3/_background-size.scss +26 -0
  24. data/sass/compass/css3/_border-radius.scss +130 -0
  25. data/sass/compass/css3/_box-shadow.scss +76 -0
  26. data/sass/compass/css3/_box-sizing.scss +13 -0
  27. data/sass/compass/css3/_box.scss +111 -0
  28. data/sass/compass/css3/_columns.scss +157 -0
  29. data/sass/compass/css3/_filter.scss +23 -0
  30. data/sass/compass/css3/_font-face.scss +48 -0
  31. data/sass/compass/css3/_hyphenation.scss +77 -0
  32. data/sass/compass/css3/_images.scss +132 -0
  33. data/sass/compass/css3/_inline-block.scss +22 -0
  34. data/sass/compass/css3/_opacity.scss +19 -0
  35. data/sass/compass/css3/_pie.scss +73 -0
  36. data/sass/compass/css3/_regions.scss +22 -0
  37. data/sass/compass/css3/_shared.scss +38 -0
  38. data/sass/compass/css3/_text-shadow.scss +87 -0
  39. data/sass/compass/css3/_transform-legacy.scss +87 -0
  40. data/sass/compass/css3/_transform.scss +598 -0
  41. data/sass/compass/css3/_transition.scss +221 -0
  42. data/sass/compass/css3/_user-interface.scss +17 -0
  43. data/sass/compass/layout/_grid-background.scss +178 -0
  44. data/sass/compass/layout/_sticky-footer.scss +23 -0
  45. data/sass/compass/layout/_stretching.scss +24 -0
  46. data/sass/compass/reset/_utilities-legacy.scss +135 -0
  47. data/sass/compass/reset/_utilities.scss +142 -0
  48. data/sass/compass/typography/_links.scss +3 -0
  49. data/sass/compass/typography/_lists.scss +4 -0
  50. data/sass/compass/typography/_text.scss +4 -0
  51. data/sass/compass/typography/_vertical_rhythm.scss +221 -0
  52. data/sass/compass/typography/links/_hover-link.scss +5 -0
  53. data/sass/compass/typography/links/_link-colors.scss +28 -0
  54. data/sass/compass/typography/links/_unstyled-link.scss +7 -0
  55. data/sass/compass/typography/lists/_bullets.scss +34 -0
  56. data/sass/compass/typography/lists/_horizontal-list.scss +61 -0
  57. data/sass/compass/typography/lists/_inline-block-list.scss +50 -0
  58. data/sass/compass/typography/lists/_inline-list.scss +44 -0
  59. data/sass/compass/typography/text/_ellipsis.scss +25 -0
  60. data/sass/compass/typography/text/_force-wrap.scss +12 -0
  61. data/sass/compass/typography/text/_nowrap.scss +2 -0
  62. data/sass/compass/typography/text/_replacement.scss +68 -0
  63. data/sass/compass/utilities/_color.scss +1 -0
  64. data/sass/compass/utilities/_general.scss +6 -0
  65. data/sass/compass/utilities/_links.scss +5 -0
  66. data/sass/compass/utilities/_lists.scss +6 -0
  67. data/sass/compass/utilities/_print.scss +17 -0
  68. data/sass/compass/utilities/_sprites.scss +2 -0
  69. data/sass/compass/utilities/_tables.scss +3 -0
  70. data/sass/compass/utilities/_text.scss +5 -0
  71. data/sass/compass/utilities/color/_contrast.scss +28 -0
  72. data/sass/compass/utilities/general/_clearfix.scss +44 -0
  73. data/sass/compass/utilities/general/_float.scss +30 -0
  74. data/sass/compass/utilities/general/_hacks.scss +46 -0
  75. data/sass/compass/utilities/general/_min.scss +16 -0
  76. data/sass/compass/utilities/general/_reset.scss +2 -0
  77. data/sass/compass/utilities/general/_tabs.scss +1 -0
  78. data/sass/compass/utilities/general/_tag-cloud.scss +18 -0
  79. data/sass/compass/utilities/links/_hover-link.scss +3 -0
  80. data/sass/compass/utilities/links/_link-colors.scss +3 -0
  81. data/sass/compass/utilities/links/_unstyled-link.scss +3 -0
  82. data/sass/compass/utilities/lists/_bullets.scss +3 -0
  83. data/sass/compass/utilities/lists/_horizontal-list.scss +3 -0
  84. data/sass/compass/utilities/lists/_inline-block-list.scss +3 -0
  85. data/sass/compass/utilities/lists/_inline-list.scss +3 -0
  86. data/sass/compass/utilities/sprites/_base.scss +66 -0
  87. data/sass/compass/utilities/sprites/_sprite-img.scss +79 -0
  88. data/sass/compass/utilities/tables/_alternating-rows-and-columns.scss +22 -0
  89. data/sass/compass/utilities/tables/_borders.scss +33 -0
  90. data/sass/compass/utilities/tables/_scaffolding.scss +9 -0
  91. data/sass/compass/utilities/text/_ellipsis.scss +3 -0
  92. data/sass/compass/utilities/text/_nowrap.scss +3 -0
  93. data/sass/compass/utilities/text/_replacement.scss +3 -0
  94. data/simple-compass.gemspec +21 -0
  95. data/spec/fixtures/headings_test.sass +2 -0
  96. data/spec/fixtures/opacity_test.sass +7 -0
  97. data/spec/fixtures/reset_test.sass +1 -0
  98. data/spec/headings_spec.rb +9 -0
  99. data/spec/opacity_spec.rb +9 -0
  100. data/spec/reset_spec.rb +9 -0
  101. data/spec/spec_helper.rb +7 -0
  102. metadata +169 -0
@@ -0,0 +1,5 @@
1
+ // a link that only has an underline when you hover over it
2
+ @mixin hover-link {
3
+ text-decoration: none;
4
+ &:hover {
5
+ text-decoration: underline; } }
@@ -0,0 +1,28 @@
1
+ // Set all the colors for a link with one mixin call.
2
+ // Order of arguments is:
3
+ //
4
+ // 1. normal
5
+ // 2. hover
6
+ // 3. active
7
+ // 4. visited
8
+ // 5. focus
9
+ //
10
+ // Those states not specified will inherit.
11
+ // Mixin to an anchor link like so:
12
+ // a
13
+ // +link-colors(#00c, #0cc, #c0c, #ccc, #cc0)
14
+
15
+ @mixin link-colors($normal, $hover: false, $active: false, $visited: false, $focus: false) {
16
+ color: $normal;
17
+ @if $visited {
18
+ &:visited {
19
+ color: $visited; } }
20
+ @if $focus {
21
+ &:focus {
22
+ color: $focus; } }
23
+ @if $hover {
24
+ &:hover {
25
+ color: $hover; } }
26
+ @if $active {
27
+ &:active {
28
+ color: $active; } } }
@@ -0,0 +1,7 @@
1
+ // A link that looks and acts like the text it is contained within
2
+ @mixin unstyled-link {
3
+ color: inherit;
4
+ text-decoration: inherit;
5
+ cursor: inherit;
6
+ &:active, &:focus {
7
+ outline: none; } }
@@ -0,0 +1,34 @@
1
+ // Turn off the bullet for an element of a list
2
+ @mixin no-bullet {
3
+ list-style-image : none;
4
+ list-style-type : none;
5
+ margin-left : 0;
6
+ }
7
+
8
+ // turns off the bullets for an entire list
9
+ @mixin no-bullets {
10
+ list-style: none;
11
+ li { @include no-bullet; }
12
+ }
13
+
14
+ // Make a list(ul/ol) have an image bullet.
15
+ //
16
+ // The mixin should be used like this for an icon that is 5x7:
17
+ //
18
+ // ul.pretty
19
+ // +pretty-bullets("my-icon.png", 5px, 7px)
20
+ //
21
+ // Additionally, if the image dimensions are not provided,
22
+ // The image dimensions will be extracted from the image itself.
23
+ //
24
+ // ul.pretty
25
+ // +pretty-bullets("my-icon.png")
26
+ //
27
+ @mixin pretty-bullets($bullet-icon, $width: image-width($bullet-icon), $height: image-height($bullet-icon), $line-height: 18px, $padding: 14px) {
28
+ margin-left: 0;
29
+ li {
30
+ padding-left: $padding;
31
+ background: image-url($bullet-icon) no-repeat ($padding - $width) / 2 ($line-height - $height) / 2;
32
+ list-style-type: none;
33
+ }
34
+ }
@@ -0,0 +1,61 @@
1
+ // Horizontal list layout module.
2
+ //
3
+ // Easy mode using simple descendant li selectors:
4
+ //
5
+ // ul.nav
6
+ // +horizontal-list
7
+ //
8
+ // Advanced mode:
9
+ // If you need to target the list items using a different selector then use
10
+ // +horizontal-list-container on your ul/ol and +horizontal-list-item on your li.
11
+ // This may help when working on layouts involving nested lists. For example:
12
+ //
13
+ // ul.nav
14
+ // +horizontal-list-container
15
+ // > li
16
+ // +horizontal-list-item
17
+
18
+ @import "bullets";
19
+ @import "compass/utilities/general/clearfix";
20
+ @import "compass/utilities/general/reset";
21
+ @import "compass/utilities/general/float";
22
+
23
+ // Can be mixed into any selector that target a ul or ol that is meant
24
+ // to have a horizontal layout. Used to implement +horizontal-list.
25
+ @mixin horizontal-list-container {
26
+ @include reset-box-model;
27
+ @include clearfix; }
28
+
29
+ // Can be mixed into any li selector that is meant to participate in a horizontal layout.
30
+ // Used to implement +horizontal-list.
31
+ //
32
+ // :last-child is not fully supported
33
+ // see http://www.quirksmode.org/css/contents.html#t29 for the support matrix
34
+ //
35
+ // IE8 ignores rules that are included on the same line as :last-child
36
+ // see http://www.richardscarrott.co.uk/posts/view/ie8-last-child-bug for details
37
+ //
38
+ // Setting `$padding` to `false` disables the padding between list elements
39
+ @mixin horizontal-list-item($padding: 4px, $direction: left) {
40
+ @include no-bullet;
41
+ white-space: nowrap;
42
+ @include float($direction);
43
+ @if $padding {
44
+ padding: {
45
+ left: $padding;
46
+ right: $padding;
47
+ }
48
+ &:first-child, &.first { padding-#{$direction}: 0; }
49
+ &:last-child { padding-#{opposite-position($direction)}: 0; }
50
+ &.last { padding-#{opposite-position($direction)}: 0; }
51
+ }
52
+ }
53
+
54
+ // A list(ol,ul) that is layed out such that the elements are floated left and won't wrap.
55
+ // This is not an inline list.
56
+ //
57
+ // Setting `$padding` to `false` disables the padding between list elements
58
+ @mixin horizontal-list($padding: 4px, $direction: left) {
59
+ @include horizontal-list-container;
60
+ li {
61
+ @include horizontal-list-item($padding, $direction); } }
@@ -0,0 +1,50 @@
1
+ // Inline-Block list layout module.
2
+ //
3
+ // Easy mode using simple descendant li selectors:
4
+ //
5
+ // ul.nav {
6
+ // @import inline-block-list;
7
+ // }
8
+ //
9
+ // Advanced mode:
10
+ // If you need to target the list items using a different selector then use
11
+ // `@include inline-block-list-container` on your ul/ol and
12
+ // `@include inline-block-list-item` on your li. This may help when working
13
+ // on layouts involving nested lists. For example:
14
+ //
15
+ // ul.nav {
16
+ // @include inline-block-list-container;
17
+ // > li {
18
+ // @include inline-block-list-item;
19
+ // }
20
+ // }
21
+
22
+ @import "bullets";
23
+ @import "horizontal-list";
24
+ @import "compass/utilities/general/float";
25
+ @import "compass/css3/inline-block";
26
+
27
+ // Can be mixed into any selector that target a ul or ol that is meant
28
+ // to have an inline-block layout. Used to implement `inline-block-list`.
29
+ @mixin inline-block-list-container {
30
+ @include horizontal-list-container; }
31
+
32
+ // Can be mixed into any li selector that is meant to participate in a horizontal layout.
33
+ // Used to implement `inline-block-list`.
34
+ @mixin inline-block-list-item($padding: false) {
35
+ @include no-bullet;
36
+ @include inline-block;
37
+ white-space: nowrap;
38
+ @if $padding {
39
+ padding: {
40
+ left: $padding;
41
+ right: $padding;
42
+ };
43
+ }
44
+ }
45
+
46
+ // A list(ol,ul) that is layed out such that the elements are inline-block and won't wrap.
47
+ @mixin inline-block-list($padding: false) {
48
+ @include inline-block-list-container;
49
+ li {
50
+ @include inline-block-list-item($padding); } }
@@ -0,0 +1,44 @@
1
+ // makes a list inline.
2
+
3
+ @mixin inline-list {
4
+ list-style-type: none;
5
+ &, & li {
6
+ margin: 0px;
7
+ padding: 0px;
8
+ display: inline;
9
+ }
10
+ }
11
+
12
+ // makes an inline list delimited with the passed string.
13
+ // Defaults to making a comma-separated list.
14
+ //
15
+ // Please make note of the browser support issues before using this mixin:
16
+ //
17
+ // use of `content` and `:after` is not fully supported in all browsers.
18
+ // See quirksmode for the [support matrix](http://www.quirksmode.org/css/contents.html#t15)
19
+ //
20
+ // `:last-child` is not fully supported.
21
+ // see quirksmode for the [support matrix](http://www.quirksmode.org/css/contents.html#t29).
22
+ //
23
+ // IE8 ignores rules that are included on the same line as :last-child
24
+ // see http://www.richardscarrott.co.uk/posts/view/ie8-last-child-bug for details
25
+
26
+ @mixin delimited-list($separator: ", ") {
27
+ @include inline-list;
28
+ li {
29
+ &:after { content: $separator; }
30
+ &:last-child {
31
+ &:after { content: ""; }
32
+ }
33
+ &.last {
34
+ &:after { content: ""; }
35
+ }
36
+ }
37
+ }
38
+
39
+ // See [delimited-list](#mixin-delimited-list)
40
+ // @deprecated
41
+ @mixin comma-delimited-list {
42
+ @warn "comma-delimited-list is deprecated. Please use delimited-list instead.";
43
+ @include delimited-list;
44
+ }
@@ -0,0 +1,25 @@
1
+ @import "compass/css3/shared";
2
+
3
+ // To get full firefox support, you must install the ellipsis pattern:
4
+ //
5
+ // compass install compass/ellipsis
6
+ $use-mozilla-ellipsis-binding: false !default;
7
+
8
+ // This technique, by [Justin Maxwell](http://code404.com/), was originally
9
+ // published [here](http://mattsnider.com/css/css-string-truncation-with-ellipsis/).
10
+ // Firefox implementation by [Rikkert Koppes](http://www.rikkertkoppes.com/thoughts/2008/6/).
11
+ @mixin ellipsis($no-wrap: true) {
12
+ @if $no-wrap { white-space: nowrap; }
13
+ overflow: hidden;
14
+ @include experimental(text-overflow, ellipsis,
15
+ not -moz,
16
+ not -webkit,
17
+ -o,
18
+ -ms,
19
+ not -khtml,
20
+ official
21
+ );
22
+ @if $experimental-support-for-mozilla and $use-mozilla-ellipsis-binding {
23
+ -moz-binding: stylesheet-url(unquote("xml/ellipsis.xml#ellipsis"));
24
+ }
25
+ }
@@ -0,0 +1,12 @@
1
+ // Prevent long urls and text from breaking layouts
2
+ // [originally from perishablepress.com](http://perishablepress.com/press/2010/06/01/wrapping-content/)
3
+ @mixin force-wrap {
4
+ white-space: pre; // CSS 2.0
5
+ white-space: pre-wrap; // CSS 2.1
6
+ white-space: pre-line; // CSS 3.0
7
+ white-space: -pre-wrap; // Opera 4-6
8
+ white-space: -o-pre-wrap; // Opera 7
9
+ white-space: -moz-pre-wrap; // Mozilla
10
+ white-space: -hp-pre-wrap; // HP Printers
11
+ word-wrap: break-word; // IE 5+
12
+ }
@@ -0,0 +1,2 @@
1
+ // When remembering whether or not there's a hyphen in white-space is too hard
2
+ @mixin nowrap { white-space: nowrap; }
@@ -0,0 +1,68 @@
1
+ // Indicates the direction you prefer to move your text
2
+ // when hiding it.
3
+ //
4
+ // `left` is more robust, especially in older browsers.
5
+ // `right` seems have better runtime performance.
6
+ $hide-text-direction: left !default;
7
+
8
+ // Hides html text and replaces it with an image.
9
+ // If you use this on an inline element, you will need to change the display to block or inline-block.
10
+ // Also, if the size of the image differs significantly from the font size, you'll need to set the width and/or height.
11
+ //
12
+ // Parameters:
13
+ //
14
+ // * `img` -- the relative path from the project image directory to the image, or a url literal.
15
+ // * `x` -- the x position of the background image.
16
+ // * `y` -- the y position of the background image.
17
+ @mixin replace-text($img, $x: 50%, $y: 50%) {
18
+ @include hide-text;
19
+ background: {
20
+ @if is-url($img) {
21
+ image: $img;
22
+ } @else {
23
+ image: image-url($img);
24
+ }
25
+ repeat: no-repeat;
26
+ position: $x $y;
27
+ };
28
+ }
29
+
30
+ // Like the `replace-text` mixin, but also sets the width
31
+ // and height of the element according the dimensions of the image.
32
+ //
33
+ // If you set `$inline` to true, then an inline image (data uri) will be used.
34
+ @mixin replace-text-with-dimensions($img, $x: 50%, $y: 50%, $inline: false) {
35
+ @include replace-text(if($inline, inline-image($img), $img), $x, $y);
36
+ width: image-width($img);
37
+ height: image-height($img);
38
+ }
39
+
40
+ // Hides text in an element so you can see the background.
41
+ //
42
+ // The direction indicates how the text should be moved out of view.
43
+ //
44
+ // See `$hide-text-direction` for more information and to set this globally
45
+ // for your application.
46
+ @mixin hide-text($direction: $hide-text-direction) {
47
+ @if $direction == left {
48
+ $approximate-em-value: 12px / 1em;
49
+ $wider-than-any-screen: -9999em;
50
+ text-indent: $wider-than-any-screen * $approximate-em-value;
51
+ overflow: hidden;
52
+ text-align: left;
53
+ } @else {
54
+ // slightly wider than the box prevents issues with inline-block elements
55
+ text-indent: 110%;
56
+ white-space: nowrap;
57
+ overflow: hidden;
58
+ }
59
+ }
60
+
61
+ // Hides text in an element by squishing the text into oblivion.
62
+ // Use this if you need to hide text contained in an inline element
63
+ // but still have it read by a screen reader.
64
+ @mixin squish-text {
65
+ font: 0/0 serif;
66
+ text-shadow: none;
67
+ color: transparent;
68
+ }
@@ -0,0 +1 @@
1
+ @import "color/contrast";
@@ -0,0 +1,6 @@
1
+ @import "general/reset";
2
+ @import "general/clearfix";
3
+ @import "general/float";
4
+ @import "general/tag-cloud";
5
+ @import "general/hacks";
6
+ @import "general/min";
@@ -0,0 +1,5 @@
1
+ @warn "This import is deprecated. Use 'compass/typography/links' instead.";
2
+
3
+ @import "../typography/links/hover-link";
4
+ @import "../typography/links/link-colors";
5
+ @import "../typography/links/unstyled-link";
@@ -0,0 +1,6 @@
1
+ @warn "This import is deprecated. Use 'compass/typography/lists' instead.";
2
+
3
+ @import "../typography/lists/horizontal-list";
4
+ @import "../typography/lists/inline-list";
5
+ @import "../typography/lists/inline-block-list";
6
+ @import "../typography/lists/bullets";
@@ -0,0 +1,17 @@
1
+ // Classes that are useful for controlling what gets printed.
2
+ // You must mix `+print-utilities` into your print stylesheet
3
+ // and `+print-utilities(screen)` into your screen stylesheet.
4
+ // Note: these aren't semantic.
5
+ @mixin print-utilities($media: print) {
6
+ @if $media == print {
7
+ .noprint, .no-print { display: none; }
8
+ #{elements-of-type(block)} {
9
+ &.print-only { display: block; }
10
+ }
11
+ #{elements-of-type(inline)} {
12
+ &.print-only { display: inline; }
13
+ }
14
+ } @else {
15
+ .print-only { display: none; }
16
+ }
17
+ }
@@ -0,0 +1,2 @@
1
+ @import "sprites/base";
2
+ @import "sprites/sprite-img";
@@ -0,0 +1,3 @@
1
+ @import "tables/alternating-rows-and-columns";
2
+ @import "tables/borders";
3
+ @import "tables/scaffolding";
@@ -0,0 +1,5 @@
1
+ @warn "This import is deprecated. Use 'compass/typography/text' instead.";
2
+
3
+ @import "../typography/text/ellipsis";
4
+ @import "../typography/text/nowrap";
5
+ @import "../typography/text/replacement";
@@ -0,0 +1,28 @@
1
+ $contrasted-dark-default: #000 !default;
2
+ $contrasted-light-default: #fff !default;
3
+ $contrasted-lightness-threshold: 30% !default;
4
+
5
+ // Returns the `$light` color when the `$color` is dark
6
+ // and the `$dark` color when the `$color` is light.
7
+ // The `$threshold` is a percent between `0%` and `100%` and it determines
8
+ // when the lightness of `$color` changes from "dark" to "light".
9
+ @function contrast-color(
10
+ $color,
11
+ $dark: $contrasted-dark-default,
12
+ $light: $contrasted-light-default,
13
+ $threshold: $contrasted-lightness-threshold
14
+ ) {
15
+ @return if(lightness($color) < $threshold, $light, $dark)
16
+ }
17
+
18
+ // Sets the specified background color and calculates a dark or light contrasted text color.
19
+ // The arguments are passed through to the [contrast-color function](#function-contrast-color).
20
+ @mixin contrasted(
21
+ $background-color,
22
+ $dark: $contrasted-dark-default,
23
+ $light: $contrasted-light-default,
24
+ $threshold: $contrasted-lightness-threshold
25
+ ) {
26
+ background-color: $background-color;
27
+ color: contrast-color($background-color, $dark, $light, $threshold);
28
+ }
@@ -0,0 +1,44 @@
1
+ // @doc off
2
+ // Extends the bottom of the element to enclose any floats it contains.
3
+ // @doc on
4
+
5
+ @import "hacks";
6
+
7
+ // This basic method is preferred for the usual case, when positioned
8
+ // content will not show outside the bounds of the container.
9
+ //
10
+ // Recommendations include using this in conjunction with a width.
11
+ // Credit: [quirksmode.org](http://www.quirksmode.org/blog/archives/2005/03/clearing_floats.html)
12
+ @mixin clearfix {
13
+ overflow: hidden;
14
+ @include has-layout;
15
+ }
16
+
17
+ // This older method from Position Is Everything called
18
+ // [Easy Clearing](http://www.positioniseverything.net/easyclearing.html)
19
+ // has the advantage of allowing positioned elements to hang
20
+ // outside the bounds of the container at the expense of more tricky CSS.
21
+ @mixin legacy-pie-clearfix {
22
+ &:after {
23
+ content : "\0020";
24
+ display : block;
25
+ height : 0;
26
+ clear : both;
27
+ overflow : hidden;
28
+ visibility : hidden;
29
+ }
30
+ @include has-layout;
31
+ }
32
+
33
+ // This is an updated version of the PIE clearfix method that reduces the amount of CSS output.
34
+ // If you need to support Firefox before 3.5 you need to use `legacy-pie-clearfix` instead.
35
+ //
36
+ // Adapted from: [A new micro clearfix hack](http://nicolasgallagher.com/micro-clearfix-hack/)
37
+ @mixin pie-clearfix {
38
+ &:after {
39
+ content: "";
40
+ display: table;
41
+ clear: both;
42
+ }
43
+ @include has-layout;
44
+ }