compass-core 1.0.0.alpha.13
Sign up to get free protection for your applications and to get access to all the features.
- checksums.yaml +7 -0
- data/LICENSE.txt +22 -0
- data/VERSION +1 -0
- data/data/caniuse.json +1 -0
- data/data/caniuse_extras/css-placeholder.json +171 -0
- data/lib/compass-core.rb +1 -0
- data/lib/compass/browser_support.rb +62 -0
- data/lib/compass/configuration.rb +168 -0
- data/lib/compass/configuration/data.rb +178 -0
- data/lib/compass/configuration/defaults.rb +197 -0
- data/lib/compass/configuration/inheritance.rb +304 -0
- data/lib/compass/configuration/paths.rb +19 -0
- data/lib/compass/core.rb +64 -0
- data/lib/compass/core/caniuse.rb +282 -0
- data/lib/compass/core/sass_extensions.rb +10 -0
- data/lib/compass/core/sass_extensions/functions.rb +39 -0
- data/lib/compass/core/sass_extensions/functions/colors.rb +67 -0
- data/lib/compass/core/sass_extensions/functions/configuration.rb +162 -0
- data/lib/compass/core/sass_extensions/functions/constants.rb +74 -0
- data/lib/compass/core/sass_extensions/functions/cross_browser_support.rb +269 -0
- data/lib/compass/core/sass_extensions/functions/display.rb +32 -0
- data/lib/compass/core/sass_extensions/functions/enumerate.rb +7 -0
- data/lib/compass/core/sass_extensions/functions/env.rb +60 -0
- data/lib/compass/core/sass_extensions/functions/font_files.rb +41 -0
- data/lib/compass/core/sass_extensions/functions/gradient_support.rb +616 -0
- data/lib/compass/core/sass_extensions/functions/image_size.rb +117 -0
- data/lib/compass/core/sass_extensions/functions/inline_image.rb +64 -0
- data/lib/compass/core/sass_extensions/functions/lists.rb +101 -0
- data/lib/compass/core/sass_extensions/functions/math.rb +92 -0
- data/lib/compass/core/sass_extensions/functions/selectors.rb +64 -0
- data/lib/compass/core/sass_extensions/functions/urls.rb +297 -0
- data/lib/compass/core/sass_extensions/monkey_patches.rb +3 -0
- data/lib/compass/core/sass_extensions/monkey_patches/browser_support.rb +118 -0
- data/lib/compass/core/sass_extensions/monkey_patches/traversal.rb +23 -0
- data/lib/compass/core/version.rb +5 -0
- data/lib/compass/error.rb +5 -0
- data/stylesheets/_compass.scss +3 -0
- data/stylesheets/_lemonade.scss +38 -0
- data/stylesheets/compass/_configuration.scss +54 -0
- data/stylesheets/compass/_css3.scss +21 -0
- data/stylesheets/compass/_layout.scss +3 -0
- data/stylesheets/compass/_reset-legacy.scss +3 -0
- data/stylesheets/compass/_reset.scss +3 -0
- data/stylesheets/compass/_support.scss +441 -0
- data/stylesheets/compass/_typography.scss +4 -0
- data/stylesheets/compass/_utilities.scss +9 -0
- data/stylesheets/compass/css3/_animation.scss +122 -0
- data/stylesheets/compass/css3/_appearance.scss +17 -0
- data/stylesheets/compass/css3/_background-clip.scss +35 -0
- data/stylesheets/compass/css3/_background-origin.scss +37 -0
- data/stylesheets/compass/css3/_background-size.scss +19 -0
- data/stylesheets/compass/css3/_border-radius.scss +107 -0
- data/stylesheets/compass/css3/_box-shadow.scss +88 -0
- data/stylesheets/compass/css3/_box-sizing.scss +15 -0
- data/stylesheets/compass/css3/_box.scss +85 -0
- data/stylesheets/compass/css3/_columns.scss +210 -0
- data/stylesheets/compass/css3/_deprecated-support.scss +272 -0
- data/stylesheets/compass/css3/_filter.scss +50 -0
- data/stylesheets/compass/css3/_flexbox.scss +156 -0
- data/stylesheets/compass/css3/_font-face.scss +48 -0
- data/stylesheets/compass/css3/_hyphenation.scss +71 -0
- data/stylesheets/compass/css3/_images.scss +139 -0
- data/stylesheets/compass/css3/_inline-block.scss +31 -0
- data/stylesheets/compass/css3/_opacity.scss +23 -0
- data/stylesheets/compass/css3/_pie.scss +1 -0
- data/stylesheets/compass/css3/_regions.scss +27 -0
- data/stylesheets/compass/css3/_selection.scss +59 -0
- data/stylesheets/compass/css3/_shared.scss +5 -0
- data/stylesheets/compass/css3/_text-shadow.scss +82 -0
- data/stylesheets/compass/css3/_transform.scss +590 -0
- data/stylesheets/compass/css3/_transition.scss +171 -0
- data/stylesheets/compass/css3/_user-interface.scss +71 -0
- data/stylesheets/compass/layout/_grid-background.scss +178 -0
- data/stylesheets/compass/layout/_sticky-footer.scss +23 -0
- data/stylesheets/compass/layout/_stretching.scss +24 -0
- data/stylesheets/compass/reset/_utilities-legacy.scss +135 -0
- data/stylesheets/compass/reset/_utilities.scss +142 -0
- data/stylesheets/compass/typography/_links.scss +3 -0
- data/stylesheets/compass/typography/_lists.scss +4 -0
- data/stylesheets/compass/typography/_text.scss +4 -0
- data/stylesheets/compass/typography/_units.scss +152 -0
- data/stylesheets/compass/typography/_vertical_rhythm.scss +300 -0
- data/stylesheets/compass/typography/links/_hover-link.scss +5 -0
- data/stylesheets/compass/typography/links/_link-colors.scss +28 -0
- data/stylesheets/compass/typography/links/_unstyled-link.scss +7 -0
- data/stylesheets/compass/typography/lists/_bullets.scss +34 -0
- data/stylesheets/compass/typography/lists/_horizontal-list.scss +63 -0
- data/stylesheets/compass/typography/lists/_inline-block-list.scss +50 -0
- data/stylesheets/compass/typography/lists/_inline-list.scss +47 -0
- data/stylesheets/compass/typography/text/_ellipsis.scss +25 -0
- data/stylesheets/compass/typography/text/_force-wrap.scss +12 -0
- data/stylesheets/compass/typography/text/_nowrap.scss +2 -0
- data/stylesheets/compass/typography/text/_replacement.scss +68 -0
- data/stylesheets/compass/utilities/_color.scss +1 -0
- data/stylesheets/compass/utilities/_general.scss +6 -0
- data/stylesheets/compass/utilities/_links.scss +5 -0
- data/stylesheets/compass/utilities/_lists.scss +6 -0
- data/stylesheets/compass/utilities/_print.scss +17 -0
- data/stylesheets/compass/utilities/_sass.scss +2 -0
- data/stylesheets/compass/utilities/_sprites.scss +2 -0
- data/stylesheets/compass/utilities/_tables.scss +3 -0
- data/stylesheets/compass/utilities/_text.scss +5 -0
- data/stylesheets/compass/utilities/color/_brightness.scss +12 -0
- data/stylesheets/compass/utilities/color/_contrast.scss +52 -0
- data/stylesheets/compass/utilities/general/_clearfix.scss +44 -0
- data/stylesheets/compass/utilities/general/_float.scss +38 -0
- data/stylesheets/compass/utilities/general/_hacks.scss +65 -0
- data/stylesheets/compass/utilities/general/_min.scss +16 -0
- data/stylesheets/compass/utilities/general/_reset.scss +2 -0
- data/stylesheets/compass/utilities/general/_tabs.scss +1 -0
- data/stylesheets/compass/utilities/general/_tag-cloud.scss +18 -0
- data/stylesheets/compass/utilities/links/_hover-link.scss +3 -0
- data/stylesheets/compass/utilities/links/_link-colors.scss +3 -0
- data/stylesheets/compass/utilities/links/_unstyled-link.scss +3 -0
- data/stylesheets/compass/utilities/lists/_bullets.scss +3 -0
- data/stylesheets/compass/utilities/lists/_horizontal-list.scss +3 -0
- data/stylesheets/compass/utilities/lists/_inline-block-list.scss +3 -0
- data/stylesheets/compass/utilities/lists/_inline-list.scss +3 -0
- data/stylesheets/compass/utilities/sass/_lists.scss +16 -0
- data/stylesheets/compass/utilities/sass/_maps.scss +19 -0
- data/stylesheets/compass/utilities/sprites/_base.scss +92 -0
- data/stylesheets/compass/utilities/sprites/_sprite-img.scss +81 -0
- data/stylesheets/compass/utilities/tables/_alternating-rows-and-columns.scss +22 -0
- data/stylesheets/compass/utilities/tables/_borders.scss +38 -0
- data/stylesheets/compass/utilities/tables/_scaffolding.scss +9 -0
- data/stylesheets/compass/utilities/text/_ellipsis.scss +3 -0
- data/stylesheets/compass/utilities/text/_nowrap.scss +3 -0
- data/stylesheets/compass/utilities/text/_replacement.scss +3 -0
- data/templates/ellipsis/ellipsis.sass +9 -0
- data/templates/ellipsis/manifest.rb +27 -0
- data/templates/ellipsis/xml/ellipsis.xml +14 -0
- data/templates/extension/manifest.rb +26 -0
- data/templates/extension/stylesheets/main.sass +1 -0
- data/templates/extension/templates/project/manifest.rb +2 -0
- data/templates/extension/templates/project/screen.sass +2 -0
- data/templates/project/USAGE.markdown +32 -0
- data/templates/project/ie.sass +6 -0
- data/templates/project/manifest.rb +4 -0
- data/templates/project/print.sass +6 -0
- data/templates/project/screen.sass +7 -0
- metadata +241 -0
@@ -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
|
+
}
|
@@ -0,0 +1,38 @@
|
|
1
|
+
@import "compass/support";
|
2
|
+
|
3
|
+
// The legacy support threshold for float.
|
4
|
+
// Defaults to the $critical-usage-threshold.
|
5
|
+
$legacy-float-support-threshold: $critical-usage-threshold !default;
|
6
|
+
|
7
|
+
// Implementation of float:left with fix for the
|
8
|
+
// [double-margin bug in IE5/6](http://www.positioniseverything.net/explorer/doubled-margin.html)
|
9
|
+
@mixin float-left {
|
10
|
+
@include float(left); }
|
11
|
+
|
12
|
+
// Implementation of float:right with fix for the
|
13
|
+
// [double-margin bug in IE5/6](http://www.positioniseverything.net/explorer/doubled-margin.html)
|
14
|
+
@mixin float-right {
|
15
|
+
@include float(right); }
|
16
|
+
|
17
|
+
// Direction independent float mixin that fixes the
|
18
|
+
// [double-margin bug in IE5/6](http://www.positioniseverything.net/explorer/doubled-margin.html)
|
19
|
+
@mixin float($side: left) {
|
20
|
+
float: unquote($side);
|
21
|
+
@if support-legacy-browser("ie", "6", $threshold: $legacy-float-support-threshold) {
|
22
|
+
display: inline; } }
|
23
|
+
|
24
|
+
// Resets floated elements back to their default of `float: none` and defaults
|
25
|
+
// to `display: block` unless you pass `inline` as an argument
|
26
|
+
//
|
27
|
+
// Usage Example:
|
28
|
+
//
|
29
|
+
// body.homepage
|
30
|
+
// #footer li
|
31
|
+
// +float-left
|
32
|
+
// body.signup
|
33
|
+
// #footer li
|
34
|
+
// +reset-float
|
35
|
+
@mixin reset-float($display: block) {
|
36
|
+
float: none;
|
37
|
+
@if support-legacy-browser("ie", "6", $threshold: $legacy-float-support-threshold) {
|
38
|
+
display: $display; } }
|
@@ -0,0 +1,65 @@
|
|
1
|
+
@import "compass/support";
|
2
|
+
|
3
|
+
// The legacy support threshold for has-layout.
|
4
|
+
// Defaults to the $critical-usage-threshold.
|
5
|
+
$has-layout-support-threshold: $critical-usage-threshold !default;
|
6
|
+
|
7
|
+
// The `zoom` approach generates less CSS but does not validate.
|
8
|
+
// Set this to `block` to use the display-property to hack the
|
9
|
+
// element to gain layout.
|
10
|
+
$default-has-layout-approach: zoom !default;
|
11
|
+
|
12
|
+
// This mixin causes an element matching the selector
|
13
|
+
// to gain the "hasLayout" property in internet explorer.
|
14
|
+
// More information on [hasLayout](http://reference.sitepoint.com/css/haslayout).
|
15
|
+
@mixin has-layout($approach: $default-has-layout-approach) {
|
16
|
+
@if support-legacy-browser("ie", "7", $threshold: $has-layout-support-threshold) {
|
17
|
+
@if $approach == zoom {
|
18
|
+
@include has-layout-zoom;
|
19
|
+
} @else if $approach == block {
|
20
|
+
@include has-layout-block;
|
21
|
+
} @else {
|
22
|
+
@warn "Unknown has-layout approach: #{$approach}";
|
23
|
+
@include has-layout-zoom;
|
24
|
+
}
|
25
|
+
}
|
26
|
+
}
|
27
|
+
|
28
|
+
@mixin has-layout-zoom {
|
29
|
+
@if support-legacy-browser("ie", "7", $threshold: $has-layout-support-threshold) {
|
30
|
+
*zoom: 1;
|
31
|
+
}
|
32
|
+
}
|
33
|
+
|
34
|
+
@mixin has-layout-block {
|
35
|
+
@if support-legacy-browser("ie", "7", $threshold: $has-layout-support-threshold) {
|
36
|
+
// This makes ie6 get layout
|
37
|
+
display: inline-block;
|
38
|
+
// and this puts it back to block
|
39
|
+
& { display: block; }
|
40
|
+
}
|
41
|
+
}
|
42
|
+
|
43
|
+
|
44
|
+
// The legacy support threshold for IE6 attribute hack.
|
45
|
+
// Defaults to the $critical-usage-threshold.
|
46
|
+
$ie6-attribute-hack-support-threshold: $critical-usage-threshold !default;
|
47
|
+
|
48
|
+
// A hack to supply IE6 (and below) with a different property value.
|
49
|
+
// [Read more](http://www.cssportal.com/css-hacks/#in_css-important).
|
50
|
+
@mixin bang-hack($property, $value, $ie6-value) {
|
51
|
+
@if support-legacy-browser("ie", "6", $threshold: $ie6-attribute-hack-support-threshold) {
|
52
|
+
@warn "it's recommended to use the underscore-hack() mixin instead of bang-hack()";
|
53
|
+
#{$property}: #{$value} !important;
|
54
|
+
#{$property}: #{$ie6-value};
|
55
|
+
}
|
56
|
+
}
|
57
|
+
|
58
|
+
// A hack to supply IE6 (and below) with a different property value.
|
59
|
+
// [Read more](http://www.paulirish.com/2009/browser-specific-css-hacks/)
|
60
|
+
@mixin underscore-hack($property, $value, $ie6-value) {
|
61
|
+
@if support-legacy-browser("ie", "6", $threshold: $ie6-attribute-hack-support-threshold) {
|
62
|
+
#{$property}: #{$value};
|
63
|
+
_#{$property}: #{$ie6-value};
|
64
|
+
}
|
65
|
+
}
|
@@ -0,0 +1,16 @@
|
|
1
|
+
@import "hacks";
|
2
|
+
|
3
|
+
//**
|
4
|
+
// Cross browser min-height mixin.
|
5
|
+
@mixin min-height($value) {
|
6
|
+
@include hacked-minimum(height, $value); }
|
7
|
+
|
8
|
+
//**
|
9
|
+
// Cross browser min-width mixin.
|
10
|
+
@mixin min-width($value) {
|
11
|
+
@include hacked-minimum(width, $value); }
|
12
|
+
|
13
|
+
// @private This mixin is not meant to be used directly.
|
14
|
+
@mixin hacked-minimum($property, $value) {
|
15
|
+
min-#{$property}: $value;
|
16
|
+
@include underscore-hack($property, auto, $value); }
|
@@ -0,0 +1 @@
|
|
1
|
+
|
@@ -0,0 +1,18 @@
|
|
1
|
+
// Emits styles for a tag cloud
|
2
|
+
@mixin tag-cloud($base-size: 1em) {
|
3
|
+
font-size: $base-size;
|
4
|
+
line-height: 1.2 * $base-size;
|
5
|
+
.xxs, .xs, .s, .l, .xl, .xxl {
|
6
|
+
line-height: 1.2 * $base-size; }
|
7
|
+
.xxs {
|
8
|
+
font-size: $base-size / 2; }
|
9
|
+
.xs {
|
10
|
+
font-size: 2 * $base-size / 3; }
|
11
|
+
.s {
|
12
|
+
font-size: 3 * $base-size / 4; }
|
13
|
+
.l {
|
14
|
+
font-size: 4 * $base-size / 3; }
|
15
|
+
.xl {
|
16
|
+
font-size: 3 * $base-size / 2; }
|
17
|
+
.xxl {
|
18
|
+
font-size: 2 * $base-size; } }
|
@@ -0,0 +1,16 @@
|
|
1
|
+
@function newline() {
|
2
|
+
@return "
|
3
|
+
";
|
4
|
+
}
|
5
|
+
|
6
|
+
// Joins a list into a string with the separator given.
|
7
|
+
@function list-join($list, $separator: ", ") {
|
8
|
+
$result: "";
|
9
|
+
@each $value in $list {
|
10
|
+
@if str-length($result) > 0 {
|
11
|
+
$result: $result + $separator;
|
12
|
+
}
|
13
|
+
$result: $result + #{$value};
|
14
|
+
}
|
15
|
+
@return $result;
|
16
|
+
}
|
@@ -0,0 +1,19 @@
|
|
1
|
+
// Returns true if a $map is a superset of $sub-map.
|
2
|
+
@function map-contains-all($map, $sub-map) {
|
3
|
+
@each $key, $value in $sub-map {
|
4
|
+
@if not (map-has-key($map, $key) and map-get($map, $key) == $value) {
|
5
|
+
@return false;
|
6
|
+
}
|
7
|
+
}
|
8
|
+
@return true;
|
9
|
+
}
|
10
|
+
|
11
|
+
// Returns true if a $map has any key-value pair in $sub-map.
|
12
|
+
@function map-contains-any($map, $sub-map) {
|
13
|
+
@each $key, $value in $sub-map {
|
14
|
+
@if map-has-key($map, $key) and map-get($map, $key) == $value {
|
15
|
+
@return true;
|
16
|
+
}
|
17
|
+
}
|
18
|
+
@return false;
|
19
|
+
}
|
@@ -0,0 +1,92 @@
|
|
1
|
+
// Determines those states for which you want to enable magic sprite selectors
|
2
|
+
$sprite-selectors: hover, target, active, focus !default;
|
3
|
+
|
4
|
+
// Set the width and height of an element to the original
|
5
|
+
// dimensions of an image before it was included in the sprite.
|
6
|
+
@mixin sprite-dimensions($map, $sprite) {
|
7
|
+
height: image-height(sprite-file($map, $sprite));
|
8
|
+
width: image-width(sprite-file($map, $sprite));
|
9
|
+
}
|
10
|
+
|
11
|
+
// Set the background position of the given sprite `$map` to display the
|
12
|
+
// sprite of the given `$sprite` name. You can move the image relative to its
|
13
|
+
// natural position by passing `$offset-x` and `$offset-y`.
|
14
|
+
// The background-position will be returned in pixels. By passing `true
|
15
|
+
// for `$use_percentages`, you get percentages instead.
|
16
|
+
@mixin sprite-background-position($map, $sprite, $offset-x: 0, $offset-y: 0,
|
17
|
+
$use-percentages: false) {
|
18
|
+
background-position: sprite-position($map, $sprite, $offset-x, $offset-y,
|
19
|
+
$use-percentages);
|
20
|
+
}
|
21
|
+
|
22
|
+
|
23
|
+
// Determines if you want to include magic selectors in your sprites
|
24
|
+
$disable-magic-sprite-selectors: false !default;
|
25
|
+
|
26
|
+
// Set this to underscore if you prefer
|
27
|
+
$default-sprite-separator: "-" !default;
|
28
|
+
|
29
|
+
// Include the position and (optionally) dimensions of this `$sprite`
|
30
|
+
// in the given sprite `$map`. The sprite url should come from either a base
|
31
|
+
// class or you can specify the `sprite-url` explicitly like this:
|
32
|
+
//
|
33
|
+
// background: $map no-repeat;
|
34
|
+
@mixin sprite($map, $sprite, $dimensions: false, $offset-x: 0, $offset-y: 0,
|
35
|
+
$use-percentages: false,
|
36
|
+
$use-magic-selectors: not $disable-magic-sprite-selectors,
|
37
|
+
$separator: $default-sprite-separator) {
|
38
|
+
@include sprite-background-position($map, $sprite, $offset-x, $offset-y,
|
39
|
+
$use-percentages);
|
40
|
+
@if $dimensions {
|
41
|
+
@include sprite-dimensions($map, $sprite);
|
42
|
+
}
|
43
|
+
@if $use-magic-selectors {
|
44
|
+
@include sprite-selectors($map, $sprite, $sprite, $offset-x, $offset-y,
|
45
|
+
$use-percentages, $separator);
|
46
|
+
}
|
47
|
+
}
|
48
|
+
|
49
|
+
// Include the selectors for the `$sprite` given the `$map` and the
|
50
|
+
// `$full-sprite-name`
|
51
|
+
// @private
|
52
|
+
@mixin sprite-selectors($map, $sprite-name, $full-sprite-name, $offset-x: 0,
|
53
|
+
$offset-y: 0, $use-percentages: false,
|
54
|
+
$separator: $default-sprite-separator) {
|
55
|
+
@each $state in $sprite-selectors {
|
56
|
+
$sprite-class: "#{$full-sprite-name}#{$separator}#{$state}";
|
57
|
+
@if sprite_has_selector($map, $sprite-name, $state) {
|
58
|
+
@if sprite_has_valid_selector($sprite-class) {
|
59
|
+
&:#{$state}, &.#{$sprite-class} {
|
60
|
+
@include sprite-background-position($map, sprite_selector_file($map, $sprite-name, $state),
|
61
|
+
$offset-x, $offset-y, $use-percentages);
|
62
|
+
}
|
63
|
+
}
|
64
|
+
}
|
65
|
+
}
|
66
|
+
}
|
67
|
+
|
68
|
+
// Generates a class for each space separated name in `$sprite-names`.
|
69
|
+
// The class will be of the form .<map-name>-<sprite-name>.
|
70
|
+
//
|
71
|
+
// If a base class is provided, then each class will extend it.
|
72
|
+
//
|
73
|
+
// If `$dimensions` is `true`, the sprite dimensions will specified.
|
74
|
+
// Positions are returned in pixel units. Set `$use_percentages` to true to
|
75
|
+
// instead get percentages.
|
76
|
+
@mixin sprites($map, $sprite-names, $base-class: false, $dimensions: false,
|
77
|
+
$prefix: sprite-map-name($map), $offset-x: 0, $offset-y: 0,
|
78
|
+
$use-percentages: false,
|
79
|
+
$separator: $default-sprite-separator) {
|
80
|
+
@each $sprite-name in $sprite-names {
|
81
|
+
@if sprite_does_not_have_parent($map, $sprite-name) {
|
82
|
+
$full-sprite-name: "#{$prefix}#{$separator}#{$sprite-name}";
|
83
|
+
@if sprite_has_valid_selector($full-sprite-name) {
|
84
|
+
.#{$full-sprite-name} {
|
85
|
+
@if $base-class { @extend #{$base-class}; }
|
86
|
+
@include sprite($map, $sprite-name, $dimensions, $offset-x, $offset-y,
|
87
|
+
$use-percentages, $separator: $separator);
|
88
|
+
}
|
89
|
+
}
|
90
|
+
}
|
91
|
+
}
|
92
|
+
}
|
@@ -0,0 +1,81 @@
|
|
1
|
+
@import "compass/typography/text/replacement";
|
2
|
+
|
3
|
+
// @doc off
|
4
|
+
// Example 1:
|
5
|
+
//
|
6
|
+
// a.twitter
|
7
|
+
// +sprite-img("icons-32.png", 1)
|
8
|
+
// a.facebook
|
9
|
+
// +sprite-img("icons-32png", 2)
|
10
|
+
//
|
11
|
+
// Example 2:
|
12
|
+
//
|
13
|
+
// a
|
14
|
+
// +sprite-background("icons-32.png")
|
15
|
+
// a.twitter
|
16
|
+
// +sprite-column(1)
|
17
|
+
// a.facebook
|
18
|
+
// +sprite-row(2)
|
19
|
+
// @doc on
|
20
|
+
|
21
|
+
$sprite-default-size: 32px !default;
|
22
|
+
|
23
|
+
$sprite-default-margin: 0px !default;
|
24
|
+
|
25
|
+
$sprite-image-default-width: $sprite-default-size !default;
|
26
|
+
|
27
|
+
$sprite-image-default-height: $sprite-default-size !default;
|
28
|
+
|
29
|
+
// Sets all the rules for a sprite from a given sprite image to show just one of the sprites.
|
30
|
+
// To reduce duplication use a sprite-bg mixin for common properties and a sprite-select mixin for positioning.
|
31
|
+
@mixin sprite-img($img, $col, $row: 1, $width: $sprite-image-default-width, $height: $sprite-image-default-height, $margin: $sprite-default-margin) {
|
32
|
+
@include sprite-background($img, $width, $height);
|
33
|
+
@include sprite-position($col, $row, $width, $height, $margin);
|
34
|
+
}
|
35
|
+
|
36
|
+
// Sets rules common for all sprites, assumes you want a square, but allows a rectangular region.
|
37
|
+
@mixin sprite-background($img, $width: $sprite-default-size, $height: $width) {
|
38
|
+
@include sprite-background-rectangle($img, $width, $height);
|
39
|
+
}
|
40
|
+
|
41
|
+
// Sets rules common for all sprites, assumes a rectangular region.
|
42
|
+
@mixin sprite-background-rectangle($img, $width: $sprite-image-default-width, $height: $sprite-image-default-height) {
|
43
|
+
background: image-url($img) no-repeat;
|
44
|
+
width: $width;
|
45
|
+
height: $height;
|
46
|
+
overflow: hidden;
|
47
|
+
}
|
48
|
+
|
49
|
+
// Allows horizontal sprite positioning optimized for a single row of sprites.
|
50
|
+
@mixin sprite-column($col, $width: $sprite-image-default-width, $margin: $sprite-default-margin) {
|
51
|
+
@include sprite-position($col, 1, $width, 0px, $margin);
|
52
|
+
}
|
53
|
+
|
54
|
+
// Allows vertical sprite positioning optimized for a single column of sprites.
|
55
|
+
@mixin sprite-row($row, $height: $sprite-image-default-height, $margin: $sprite-default-margin) {
|
56
|
+
@include sprite-position(1, $row, 0px, $height, $margin);
|
57
|
+
}
|
58
|
+
|
59
|
+
// Allows vertical and horizontal sprite positioning from a grid of equal dimensioned sprites.
|
60
|
+
@mixin sprite-position($col, $row: 1, $width: $sprite-image-default-width, $height: $sprite-image-default-height, $margin: $sprite-default-margin) {
|
61
|
+
$x: ($col - 1) * -$width - ($col - 1) * $margin;
|
62
|
+
$y: ($row - 1) * -$height - ($row - 1) * $margin;
|
63
|
+
background-position: $x $y;
|
64
|
+
}
|
65
|
+
|
66
|
+
|
67
|
+
|
68
|
+
// Similar to 'sprite-replace-text-with-dimensions' but does not autmaticly set the demensions
|
69
|
+
@mixin sprite-replace-text ($map, $sprite, $dimensions: false, $offset-x: 0, $offset-y: 0) {
|
70
|
+
@include hide-text;
|
71
|
+
@include sprite($map, $sprite, $dimensions, $offset-x, $offset-y);
|
72
|
+
background-image: $map;
|
73
|
+
background-repeat: no-repeat;
|
74
|
+
}
|
75
|
+
|
76
|
+
// Similar to 'replace-text-with-dimensions' but with sprites
|
77
|
+
// To use, create your sprite and then pass it in the `$map` param
|
78
|
+
// The name of the image in the sprite folder should be `$img-name`
|
79
|
+
@mixin sprite-replace-text-with-dimensions ($map, $sprite, $offset-x: 0, $offset-y: 0){
|
80
|
+
@include sprite-replace-text ($map, $sprite, true, $offset-x, $offset-y);
|
81
|
+
}
|
@@ -0,0 +1,22 @@
|
|
1
|
+
@mixin alternating-rows-and-columns($even-row-color, $odd-row-color, $dark-intersection, $header-color: white, $footer-color: white) {
|
2
|
+
th {
|
3
|
+
background-color: $header-color;
|
4
|
+
&.even, &:nth-child(2n) {
|
5
|
+
background-color: $header-color - $dark-intersection; } }
|
6
|
+
tr {
|
7
|
+
&.odd, &:nth-child(2n+1) {
|
8
|
+
td {
|
9
|
+
background-color: $odd-row-color;
|
10
|
+
&.even, &:nth-child(2n) {
|
11
|
+
background-color: $odd-row-color - $dark-intersection; } } }
|
12
|
+
}
|
13
|
+
tr.even {
|
14
|
+
td {
|
15
|
+
background-color: $even-row-color;
|
16
|
+
&.even, &:nth-child(2n) {
|
17
|
+
background-color: $even-row-color - $dark-intersection; } } }
|
18
|
+
tfoot {
|
19
|
+
th, td {
|
20
|
+
background-color: $footer-color;
|
21
|
+
&.even, &:nth-child(2n) {
|
22
|
+
background-color: $footer-color - $dark-intersection; } } } }
|