simple-compass 0.0.1
Sign up to get free protection for your applications and to get access to all the features.
- data/.gitignore +2 -0
- data/.rspec +1 -0
- data/Gemfile +6 -0
- data/Gemfile.lock +26 -0
- data/Rakefile +8 -0
- data/lib/simple-compass.rb +17 -0
- data/lib/simple-compass/sass/functions/display.rb +27 -0
- data/lib/simple-compass/sass/functions/lists.rb +101 -0
- data/lib/simple-compass/sass/functions/selectors.rb +64 -0
- data/lib/simple-compass/sass/functions/sprites.rb +218 -0
- data/lib/simple-compass/version.rb +3 -0
- data/sass/compass.scss +1 -0
- data/sass/compass/_css3.scss +20 -0
- data/sass/compass/_layout.scss +3 -0
- data/sass/compass/_reset-legacy.scss +3 -0
- data/sass/compass/_reset.scss +3 -0
- data/sass/compass/_support.scss +40 -0
- data/sass/compass/_typography.scss +4 -0
- data/sass/compass/_utilities.scss +9 -0
- data/sass/compass/css3/_appearance.scss +17 -0
- data/sass/compass/css3/_background-clip.scss +43 -0
- data/sass/compass/css3/_background-origin.scss +42 -0
- data/sass/compass/css3/_background-size.scss +26 -0
- data/sass/compass/css3/_border-radius.scss +130 -0
- data/sass/compass/css3/_box-shadow.scss +76 -0
- data/sass/compass/css3/_box-sizing.scss +13 -0
- data/sass/compass/css3/_box.scss +111 -0
- data/sass/compass/css3/_columns.scss +157 -0
- data/sass/compass/css3/_filter.scss +23 -0
- data/sass/compass/css3/_font-face.scss +48 -0
- data/sass/compass/css3/_hyphenation.scss +77 -0
- data/sass/compass/css3/_images.scss +132 -0
- data/sass/compass/css3/_inline-block.scss +22 -0
- data/sass/compass/css3/_opacity.scss +19 -0
- data/sass/compass/css3/_pie.scss +73 -0
- data/sass/compass/css3/_regions.scss +22 -0
- data/sass/compass/css3/_shared.scss +38 -0
- data/sass/compass/css3/_text-shadow.scss +87 -0
- data/sass/compass/css3/_transform-legacy.scss +87 -0
- data/sass/compass/css3/_transform.scss +598 -0
- data/sass/compass/css3/_transition.scss +221 -0
- data/sass/compass/css3/_user-interface.scss +17 -0
- data/sass/compass/layout/_grid-background.scss +178 -0
- data/sass/compass/layout/_sticky-footer.scss +23 -0
- data/sass/compass/layout/_stretching.scss +24 -0
- data/sass/compass/reset/_utilities-legacy.scss +135 -0
- data/sass/compass/reset/_utilities.scss +142 -0
- data/sass/compass/typography/_links.scss +3 -0
- data/sass/compass/typography/_lists.scss +4 -0
- data/sass/compass/typography/_text.scss +4 -0
- data/sass/compass/typography/_vertical_rhythm.scss +221 -0
- data/sass/compass/typography/links/_hover-link.scss +5 -0
- data/sass/compass/typography/links/_link-colors.scss +28 -0
- data/sass/compass/typography/links/_unstyled-link.scss +7 -0
- data/sass/compass/typography/lists/_bullets.scss +34 -0
- data/sass/compass/typography/lists/_horizontal-list.scss +61 -0
- data/sass/compass/typography/lists/_inline-block-list.scss +50 -0
- data/sass/compass/typography/lists/_inline-list.scss +44 -0
- data/sass/compass/typography/text/_ellipsis.scss +25 -0
- data/sass/compass/typography/text/_force-wrap.scss +12 -0
- data/sass/compass/typography/text/_nowrap.scss +2 -0
- data/sass/compass/typography/text/_replacement.scss +68 -0
- data/sass/compass/utilities/_color.scss +1 -0
- data/sass/compass/utilities/_general.scss +6 -0
- data/sass/compass/utilities/_links.scss +5 -0
- data/sass/compass/utilities/_lists.scss +6 -0
- data/sass/compass/utilities/_print.scss +17 -0
- data/sass/compass/utilities/_sprites.scss +2 -0
- data/sass/compass/utilities/_tables.scss +3 -0
- data/sass/compass/utilities/_text.scss +5 -0
- data/sass/compass/utilities/color/_contrast.scss +28 -0
- data/sass/compass/utilities/general/_clearfix.scss +44 -0
- data/sass/compass/utilities/general/_float.scss +30 -0
- data/sass/compass/utilities/general/_hacks.scss +46 -0
- data/sass/compass/utilities/general/_min.scss +16 -0
- data/sass/compass/utilities/general/_reset.scss +2 -0
- data/sass/compass/utilities/general/_tabs.scss +1 -0
- data/sass/compass/utilities/general/_tag-cloud.scss +18 -0
- data/sass/compass/utilities/links/_hover-link.scss +3 -0
- data/sass/compass/utilities/links/_link-colors.scss +3 -0
- data/sass/compass/utilities/links/_unstyled-link.scss +3 -0
- data/sass/compass/utilities/lists/_bullets.scss +3 -0
- data/sass/compass/utilities/lists/_horizontal-list.scss +3 -0
- data/sass/compass/utilities/lists/_inline-block-list.scss +3 -0
- data/sass/compass/utilities/lists/_inline-list.scss +3 -0
- data/sass/compass/utilities/sprites/_base.scss +66 -0
- data/sass/compass/utilities/sprites/_sprite-img.scss +79 -0
- data/sass/compass/utilities/tables/_alternating-rows-and-columns.scss +22 -0
- data/sass/compass/utilities/tables/_borders.scss +33 -0
- data/sass/compass/utilities/tables/_scaffolding.scss +9 -0
- data/sass/compass/utilities/text/_ellipsis.scss +3 -0
- data/sass/compass/utilities/text/_nowrap.scss +3 -0
- data/sass/compass/utilities/text/_replacement.scss +3 -0
- data/simple-compass.gemspec +21 -0
- data/spec/fixtures/headings_test.sass +2 -0
- data/spec/fixtures/opacity_test.sass +7 -0
- data/spec/fixtures/reset_test.sass +1 -0
- data/spec/headings_spec.rb +9 -0
- data/spec/opacity_spec.rb +9 -0
- data/spec/reset_spec.rb +9 -0
- data/spec/spec_helper.rb +7 -0
- metadata +169 -0
@@ -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,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,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,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,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
|
+
}
|