compass-core 1.0.0.alpha.13

Sign up to get free protection for your applications and to get access to all the features.
Files changed (141) hide show
  1. checksums.yaml +7 -0
  2. data/LICENSE.txt +22 -0
  3. data/VERSION +1 -0
  4. data/data/caniuse.json +1 -0
  5. data/data/caniuse_extras/css-placeholder.json +171 -0
  6. data/lib/compass-core.rb +1 -0
  7. data/lib/compass/browser_support.rb +62 -0
  8. data/lib/compass/configuration.rb +168 -0
  9. data/lib/compass/configuration/data.rb +178 -0
  10. data/lib/compass/configuration/defaults.rb +197 -0
  11. data/lib/compass/configuration/inheritance.rb +304 -0
  12. data/lib/compass/configuration/paths.rb +19 -0
  13. data/lib/compass/core.rb +64 -0
  14. data/lib/compass/core/caniuse.rb +282 -0
  15. data/lib/compass/core/sass_extensions.rb +10 -0
  16. data/lib/compass/core/sass_extensions/functions.rb +39 -0
  17. data/lib/compass/core/sass_extensions/functions/colors.rb +67 -0
  18. data/lib/compass/core/sass_extensions/functions/configuration.rb +162 -0
  19. data/lib/compass/core/sass_extensions/functions/constants.rb +74 -0
  20. data/lib/compass/core/sass_extensions/functions/cross_browser_support.rb +269 -0
  21. data/lib/compass/core/sass_extensions/functions/display.rb +32 -0
  22. data/lib/compass/core/sass_extensions/functions/enumerate.rb +7 -0
  23. data/lib/compass/core/sass_extensions/functions/env.rb +60 -0
  24. data/lib/compass/core/sass_extensions/functions/font_files.rb +41 -0
  25. data/lib/compass/core/sass_extensions/functions/gradient_support.rb +616 -0
  26. data/lib/compass/core/sass_extensions/functions/image_size.rb +117 -0
  27. data/lib/compass/core/sass_extensions/functions/inline_image.rb +64 -0
  28. data/lib/compass/core/sass_extensions/functions/lists.rb +101 -0
  29. data/lib/compass/core/sass_extensions/functions/math.rb +92 -0
  30. data/lib/compass/core/sass_extensions/functions/selectors.rb +64 -0
  31. data/lib/compass/core/sass_extensions/functions/urls.rb +297 -0
  32. data/lib/compass/core/sass_extensions/monkey_patches.rb +3 -0
  33. data/lib/compass/core/sass_extensions/monkey_patches/browser_support.rb +118 -0
  34. data/lib/compass/core/sass_extensions/monkey_patches/traversal.rb +23 -0
  35. data/lib/compass/core/version.rb +5 -0
  36. data/lib/compass/error.rb +5 -0
  37. data/stylesheets/_compass.scss +3 -0
  38. data/stylesheets/_lemonade.scss +38 -0
  39. data/stylesheets/compass/_configuration.scss +54 -0
  40. data/stylesheets/compass/_css3.scss +21 -0
  41. data/stylesheets/compass/_layout.scss +3 -0
  42. data/stylesheets/compass/_reset-legacy.scss +3 -0
  43. data/stylesheets/compass/_reset.scss +3 -0
  44. data/stylesheets/compass/_support.scss +441 -0
  45. data/stylesheets/compass/_typography.scss +4 -0
  46. data/stylesheets/compass/_utilities.scss +9 -0
  47. data/stylesheets/compass/css3/_animation.scss +122 -0
  48. data/stylesheets/compass/css3/_appearance.scss +17 -0
  49. data/stylesheets/compass/css3/_background-clip.scss +35 -0
  50. data/stylesheets/compass/css3/_background-origin.scss +37 -0
  51. data/stylesheets/compass/css3/_background-size.scss +19 -0
  52. data/stylesheets/compass/css3/_border-radius.scss +107 -0
  53. data/stylesheets/compass/css3/_box-shadow.scss +88 -0
  54. data/stylesheets/compass/css3/_box-sizing.scss +15 -0
  55. data/stylesheets/compass/css3/_box.scss +85 -0
  56. data/stylesheets/compass/css3/_columns.scss +210 -0
  57. data/stylesheets/compass/css3/_deprecated-support.scss +272 -0
  58. data/stylesheets/compass/css3/_filter.scss +50 -0
  59. data/stylesheets/compass/css3/_flexbox.scss +156 -0
  60. data/stylesheets/compass/css3/_font-face.scss +48 -0
  61. data/stylesheets/compass/css3/_hyphenation.scss +71 -0
  62. data/stylesheets/compass/css3/_images.scss +139 -0
  63. data/stylesheets/compass/css3/_inline-block.scss +31 -0
  64. data/stylesheets/compass/css3/_opacity.scss +23 -0
  65. data/stylesheets/compass/css3/_pie.scss +1 -0
  66. data/stylesheets/compass/css3/_regions.scss +27 -0
  67. data/stylesheets/compass/css3/_selection.scss +59 -0
  68. data/stylesheets/compass/css3/_shared.scss +5 -0
  69. data/stylesheets/compass/css3/_text-shadow.scss +82 -0
  70. data/stylesheets/compass/css3/_transform.scss +590 -0
  71. data/stylesheets/compass/css3/_transition.scss +171 -0
  72. data/stylesheets/compass/css3/_user-interface.scss +71 -0
  73. data/stylesheets/compass/layout/_grid-background.scss +178 -0
  74. data/stylesheets/compass/layout/_sticky-footer.scss +23 -0
  75. data/stylesheets/compass/layout/_stretching.scss +24 -0
  76. data/stylesheets/compass/reset/_utilities-legacy.scss +135 -0
  77. data/stylesheets/compass/reset/_utilities.scss +142 -0
  78. data/stylesheets/compass/typography/_links.scss +3 -0
  79. data/stylesheets/compass/typography/_lists.scss +4 -0
  80. data/stylesheets/compass/typography/_text.scss +4 -0
  81. data/stylesheets/compass/typography/_units.scss +152 -0
  82. data/stylesheets/compass/typography/_vertical_rhythm.scss +300 -0
  83. data/stylesheets/compass/typography/links/_hover-link.scss +5 -0
  84. data/stylesheets/compass/typography/links/_link-colors.scss +28 -0
  85. data/stylesheets/compass/typography/links/_unstyled-link.scss +7 -0
  86. data/stylesheets/compass/typography/lists/_bullets.scss +34 -0
  87. data/stylesheets/compass/typography/lists/_horizontal-list.scss +63 -0
  88. data/stylesheets/compass/typography/lists/_inline-block-list.scss +50 -0
  89. data/stylesheets/compass/typography/lists/_inline-list.scss +47 -0
  90. data/stylesheets/compass/typography/text/_ellipsis.scss +25 -0
  91. data/stylesheets/compass/typography/text/_force-wrap.scss +12 -0
  92. data/stylesheets/compass/typography/text/_nowrap.scss +2 -0
  93. data/stylesheets/compass/typography/text/_replacement.scss +68 -0
  94. data/stylesheets/compass/utilities/_color.scss +1 -0
  95. data/stylesheets/compass/utilities/_general.scss +6 -0
  96. data/stylesheets/compass/utilities/_links.scss +5 -0
  97. data/stylesheets/compass/utilities/_lists.scss +6 -0
  98. data/stylesheets/compass/utilities/_print.scss +17 -0
  99. data/stylesheets/compass/utilities/_sass.scss +2 -0
  100. data/stylesheets/compass/utilities/_sprites.scss +2 -0
  101. data/stylesheets/compass/utilities/_tables.scss +3 -0
  102. data/stylesheets/compass/utilities/_text.scss +5 -0
  103. data/stylesheets/compass/utilities/color/_brightness.scss +12 -0
  104. data/stylesheets/compass/utilities/color/_contrast.scss +52 -0
  105. data/stylesheets/compass/utilities/general/_clearfix.scss +44 -0
  106. data/stylesheets/compass/utilities/general/_float.scss +38 -0
  107. data/stylesheets/compass/utilities/general/_hacks.scss +65 -0
  108. data/stylesheets/compass/utilities/general/_min.scss +16 -0
  109. data/stylesheets/compass/utilities/general/_reset.scss +2 -0
  110. data/stylesheets/compass/utilities/general/_tabs.scss +1 -0
  111. data/stylesheets/compass/utilities/general/_tag-cloud.scss +18 -0
  112. data/stylesheets/compass/utilities/links/_hover-link.scss +3 -0
  113. data/stylesheets/compass/utilities/links/_link-colors.scss +3 -0
  114. data/stylesheets/compass/utilities/links/_unstyled-link.scss +3 -0
  115. data/stylesheets/compass/utilities/lists/_bullets.scss +3 -0
  116. data/stylesheets/compass/utilities/lists/_horizontal-list.scss +3 -0
  117. data/stylesheets/compass/utilities/lists/_inline-block-list.scss +3 -0
  118. data/stylesheets/compass/utilities/lists/_inline-list.scss +3 -0
  119. data/stylesheets/compass/utilities/sass/_lists.scss +16 -0
  120. data/stylesheets/compass/utilities/sass/_maps.scss +19 -0
  121. data/stylesheets/compass/utilities/sprites/_base.scss +92 -0
  122. data/stylesheets/compass/utilities/sprites/_sprite-img.scss +81 -0
  123. data/stylesheets/compass/utilities/tables/_alternating-rows-and-columns.scss +22 -0
  124. data/stylesheets/compass/utilities/tables/_borders.scss +38 -0
  125. data/stylesheets/compass/utilities/tables/_scaffolding.scss +9 -0
  126. data/stylesheets/compass/utilities/text/_ellipsis.scss +3 -0
  127. data/stylesheets/compass/utilities/text/_nowrap.scss +3 -0
  128. data/stylesheets/compass/utilities/text/_replacement.scss +3 -0
  129. data/templates/ellipsis/ellipsis.sass +9 -0
  130. data/templates/ellipsis/manifest.rb +27 -0
  131. data/templates/ellipsis/xml/ellipsis.xml +14 -0
  132. data/templates/extension/manifest.rb +26 -0
  133. data/templates/extension/stylesheets/main.sass +1 -0
  134. data/templates/extension/templates/project/manifest.rb +2 -0
  135. data/templates/extension/templates/project/screen.sass +2 -0
  136. data/templates/project/USAGE.markdown +32 -0
  137. data/templates/project/ie.sass +6 -0
  138. data/templates/project/manifest.rb +4 -0
  139. data/templates/project/print.sass +6 -0
  140. data/templates/project/screen.sass +7 -0
  141. 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,2 @@
1
+ // This module has moved.
2
+ @import "compass/reset/utilities";
@@ -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,3 @@
1
+ @warn "This import is deprecated. Use 'compass/typography/links/hover-link' instead.";
2
+
3
+ @import "../../typography/links/hover-link";
@@ -0,0 +1,3 @@
1
+ @warn "This import is deprecated. Use 'compass/typography/links/link-colors' instead.";
2
+
3
+ @import "../../typography/links/link-colors";
@@ -0,0 +1,3 @@
1
+ @warn "This import is deprecated. Use 'compass/typography/links/unstyled-link' instead.";
2
+
3
+ @import "../../typography/links/unstyled-link";
@@ -0,0 +1,3 @@
1
+ @warn "This import is deprecated. Use 'compass/typography/lists/bullets' instead.";
2
+
3
+ @import "../../typography/lists/bullets";
@@ -0,0 +1,3 @@
1
+ @warn "This import is deprecated. Use 'compass/typography/lists/horizontal-list' instead.";
2
+
3
+ @import "../../typography/lists/horizontal-list";
@@ -0,0 +1,3 @@
1
+ @warn "This import is deprecated. Use 'compass/typography/lists/inline-block-list' instead.";
2
+
3
+ @import "../../typography/lists/inline-block-list";
@@ -0,0 +1,3 @@
1
+ @warn "This import is deprecated. Use 'compass/typography/lists/inline-list' instead.";
2
+
3
+ @import "../../typography/lists/inline-list";
@@ -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; } } } }