compass-core 1.0.0.alpha.13
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- 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; } } } }
|