compass 0.12.1 → 0.12.2.rc.0
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.
- data/README.markdown +15 -45
- data/VERSION.yml +3 -1
- data/features/command_line.feature +1 -0
- data/frameworks/compass/stylesheets/compass/_css3.scss +1 -0
- data/frameworks/compass/stylesheets/compass/css3/_appearance.scss +6 -3
- data/frameworks/compass/stylesheets/compass/css3/_border-radius.scss +4 -10
- data/frameworks/compass/stylesheets/compass/css3/_columns.scss +18 -7
- data/frameworks/compass/stylesheets/compass/css3/_regions.scss +22 -0
- data/frameworks/compass/stylesheets/compass/css3/_transform.scss +6 -6
- data/frameworks/compass/stylesheets/compass/reset/_utilities.scss +4 -2
- data/frameworks/compass/stylesheets/compass/typography/_vertical_rhythm.scss +19 -11
- data/frameworks/compass/stylesheets/compass/typography/text/_replacement.scss +25 -5
- data/frameworks/compass/stylesheets/compass/utilities/general/_hacks.scss +1 -1
- data/lib/compass/commands.rb +4 -3
- data/lib/compass/commands/extension_command.rb +60 -0
- data/lib/compass/configuration/adapters.rb +8 -2
- data/lib/compass/configuration/data.rb +1 -0
- data/lib/compass/exec/global_options_parser.rb +8 -1
- data/lib/compass/sass_extensions/functions/sprites.rb +10 -2
- data/lib/compass/version.rb +2 -1
- data/test/fixtures/stylesheets/blueprint/css/screen.css +2 -2
- data/test/fixtures/stylesheets/compass/css/border_radius.css +0 -6
- data/test/fixtures/stylesheets/compass/css/columns.css +15 -0
- data/test/fixtures/stylesheets/compass/css/regions.css +7 -0
- data/test/fixtures/stylesheets/compass/css/reset.css +2 -2
- data/test/fixtures/stylesheets/compass/css/transform.css +108 -0
- data/test/fixtures/stylesheets/compass/css/vertical_rhythm.css +5 -5
- data/test/fixtures/stylesheets/compass/sass/columns.scss +1 -0
- data/test/fixtures/stylesheets/compass/sass/regions.scss +4 -0
- data/test/integrations/sprites_test.rb +4 -4
- data/test/units/configuration_test.rb +15 -0
- metadata +51 -70
data/README.markdown
CHANGED
@@ -1,59 +1,29 @@
|
|
1
|
-
# Compass
|
1
|
+
# Compass Stylesheet Authoring Framework
|
2
2
|
|
3
3
|
Build Status: 
|
4
4
|
|
5
|
-
|
5
|
+
## Resources
|
6
6
|
|
7
|
-
|
8
|
-
|
9
|
-
|
10
|
-
- [Susy][susy_website] - [Wiki Documentation][susy_wiki]
|
11
|
-
- [YUI][yui_website] - [Wiki Documentation][yui_wiki]
|
12
|
-
- New frameworks and extensions are [tracked on the wiki][plugins_wiki] as they are created.
|
13
|
-
- Other frameworks can be added relatively easily. Create your own!
|
7
|
+
* [Compass Homepage](http://compass-style.org/)
|
8
|
+
* [Installing Compass](http://compass-style.org/install/)
|
9
|
+
* [Compass Reference](http://compass-style.org/install/reference/)
|
14
10
|
|
15
|
-
##
|
16
|
-
|
17
|
-
|
18
|
-
2. Simple integration with [Ruby-on-Rails][ruby_on_rails_wiki], [Merb][merb_wiki], [StaticMatic][static_matic_wiki], and even [non-ruby application servers][command_line_wiki].
|
19
|
-
3. Loads of Sass mixins to make building your website a snap.
|
11
|
+
## Author
|
12
|
+
Compass is written by [Chris Eppstein][chris_eppstein].<br>
|
13
|
+
Chris is the Software Architect of [Caring.com][caring.com] and a member of the [Sass][sass] core team.
|
20
14
|
|
21
|
-
##
|
15
|
+
## Core Team Members
|
22
16
|
|
23
|
-
|
24
|
-
|
25
|
-
|
26
|
-
|
17
|
+
* [Scott Davis](https://github.com/scottdavis)
|
18
|
+
* [Eric Meyer](https://github.com/ericam)
|
19
|
+
* [Brandon Mathis](https://github.com/imathis)
|
20
|
+
* [Anthony Short](https://github.com/anthonyshort/)
|
27
21
|
|
28
|
-
##
|
29
|
-
Please see the [wiki][wiki]
|
22
|
+
## Major Contributors
|
30
23
|
|
31
|
-
|
32
|
-
Compass is written by [Chris Eppstein][chris_eppstein].<br>
|
33
|
-
Chris is the Software Architect of [Caring.com][caring.com] and a member of the [Sass][sass] core team.
|
24
|
+
* [Nico Hagenburger](https://github.com/hagenburger)
|
34
25
|
|
35
26
|
## License
|
36
27
|
Copyright (c) 2008-2009 Christopher M. Eppstein<br>
|
37
28
|
All Rights Reserved.<br>
|
38
29
|
Released under a [slightly modified MIT License][license].
|
39
|
-
|
40
|
-
[sass]: http://sass-lang.com/ "Syntactically Awesome StyleSheets"
|
41
|
-
[compass_core_website]: http://github.com/chriseppstein/compass/tree/master/frameworks/compass
|
42
|
-
[compass_core_wiki]: http://github.com/chriseppstein/compass/wikis/compass-core-documentation
|
43
|
-
[blueprint_website]: http://blueprintcss.org/
|
44
|
-
[bleuprint_wiki]: http://github.com/chriseppstein/compass/wikis/blueprint-documentation
|
45
|
-
[yui_website]: http://developer.yahoo.com/yui/grids/
|
46
|
-
[yui_wiki]: http://github.com/chriseppstein/compass/wikis/yui-documentation
|
47
|
-
[plugins_wiki]: http://github.com/chriseppstein/compass/wikis/compass-plugins
|
48
|
-
[ninesixty_website]: http://960.gs/
|
49
|
-
[ninesixty_wiki]: http://github.com/chriseppstein/compass/wikis/960gs-documentation
|
50
|
-
[command_line_wiki]: http://wiki.github.com/chriseppstein/compass/command-line-tool
|
51
|
-
[wiki]: http://github.com/chriseppstein/compass/wikis/home
|
52
|
-
[ruby_on_rails_wiki]: http://wiki.github.com/chriseppstein/compass/ruby-on-rails-integration
|
53
|
-
[merb_wiki]: http://wiki.github.com/chriseppstein/compass/merb-integration
|
54
|
-
[static_matic_wiki]: http://wiki.github.com/chriseppstein/compass/staticmatic-integration
|
55
|
-
[chris_eppstein]: http://chriseppstein.github.com
|
56
|
-
[caring.com]: http://www.caring.com/ "Senior Care Resources"
|
57
|
-
[license]: http://github.com/chriseppstein/compass/tree/master/LICENSE.markdown
|
58
|
-
[susy_website]: http://www.oddbird.net/susy/
|
59
|
-
[susy_wiki]: http://github.com/chriseppstein/compass/wikis/susy-documentation
|
data/VERSION.yml
CHANGED
@@ -1,9 +1,12 @@
|
|
1
1
|
@import "shared";
|
2
2
|
|
3
|
-
// Change the appearance for Mozilla, Webkit and the future
|
3
|
+
// Change the appearance for Mozilla, Webkit and possibly the future.
|
4
|
+
// The appearance property is currently not present in any newer CSS specification.
|
4
5
|
//
|
5
|
-
//
|
6
|
-
//
|
6
|
+
// There is no official list of accepted values, but you might check these source:
|
7
|
+
// Mozilla : https://developer.mozilla.org/en/CSS/-moz-appearance
|
8
|
+
// Webkit : http://code.google.com/p/webkit-mirror/source/browse/Source/WebCore/css/CSSValueKeywords.in?spec=svnf1aea559dcd025a8946aa7da6e4e8306f5c1b604&r=63c7d1af44430b314233fea342c3ddb2a052e365
|
9
|
+
// (search for 'appearance' within the page)
|
7
10
|
|
8
11
|
@mixin appearance($ap) {
|
9
12
|
$ap: unquote($ap);
|
@@ -21,24 +21,18 @@ $default-border-radius: 5px !default;
|
|
21
21
|
// .simple {
|
22
22
|
// -webkit-border-radius: 4px 4px;
|
23
23
|
// -moz-border-radius: 4px / 4px;
|
24
|
-
// -o-border-radius: 4px / 4px;
|
25
|
-
// -ms-border-radius: 4px / 4px;
|
26
24
|
// -khtml-border-radius: 4px / 4px;
|
27
25
|
// border-radius: 4px / 4px; }
|
28
26
|
//
|
29
27
|
// .compound {
|
30
28
|
// -webkit-border-radius: 2px 3px;
|
31
29
|
// -moz-border-radius: 2px 5px / 3px 6px;
|
32
|
-
// -o-border-radius: 2px 5px / 3px 6px;
|
33
|
-
// -ms-border-radius: 2px 5px / 3px 6px;
|
34
30
|
// -khtml-border-radius: 2px 5px / 3px 6px;
|
35
31
|
// border-radius: 2px 5px / 3px 6px; }
|
36
32
|
//
|
37
33
|
// .crazy {
|
38
34
|
// -webkit-border-radius: 1px 2px;
|
39
35
|
// -moz-border-radius: 1px 3px 5px 7px / 2px 4px 6px 8px;
|
40
|
-
// -o-border-radius: 1px 3px 5px 7px / 2px 4px 6px 8px;
|
41
|
-
// -ms-border-radius: 1px 3px 5px 7px / 2px 4px 6px 8px;
|
42
36
|
// -khtml-border-radius: 1px 3px 5px 7px / 2px 4px 6px 8px;
|
43
37
|
// border-radius: 1px 3px 5px 7px / 2px 4px 6px 8px; }
|
44
38
|
|
@@ -58,8 +52,8 @@ $default-border-radius: 5px !default;
|
|
58
52
|
@include experimental("border-radius", $radius unquote("/") $vertical-radius,
|
59
53
|
-moz,
|
60
54
|
not -webkit,
|
61
|
-
-o,
|
62
|
-
-ms,
|
55
|
+
not -o,
|
56
|
+
not -ms,
|
63
57
|
-khtml,
|
64
58
|
official
|
65
59
|
);
|
@@ -87,8 +81,8 @@ $default-border-radius: 5px !default;
|
|
87
81
|
@include experimental("border-#{$vert}-#{$horz}-radius", $radius,
|
88
82
|
not -moz,
|
89
83
|
-webkit,
|
90
|
-
-o,
|
91
|
-
-ms,
|
84
|
+
not -o,
|
85
|
+
not -ms,
|
92
86
|
-khtml,
|
93
87
|
official
|
94
88
|
);
|
@@ -1,30 +1,41 @@
|
|
1
1
|
@import "shared";
|
2
2
|
|
3
|
+
// Specify the shorthand `columns` property.
|
4
|
+
//
|
5
|
+
// Example:
|
6
|
+
//
|
7
|
+
// @include columns(20em 2)
|
8
|
+
@mixin columns($width-and-count) {
|
9
|
+
@include experimental(columns, $width-and-count,
|
10
|
+
-moz, -webkit, -o, -ms, not -khtml, official
|
11
|
+
);
|
12
|
+
}
|
13
|
+
|
3
14
|
// Specify the number of columns
|
4
15
|
@mixin column-count($count) {
|
5
16
|
@include experimental(column-count, $count,
|
6
|
-
-moz, -webkit, -o,
|
17
|
+
-moz, -webkit, -o, -ms, not -khtml, official
|
7
18
|
);
|
8
19
|
}
|
9
20
|
|
10
21
|
// Specify the gap between columns e.g. `20px`
|
11
22
|
@mixin column-gap($width) {
|
12
23
|
@include experimental(column-gap, $width,
|
13
|
-
-moz, -webkit, -o,
|
24
|
+
-moz, -webkit, -o, -ms, not -khtml, official
|
14
25
|
);
|
15
26
|
}
|
16
27
|
|
17
28
|
// Specify the width of columns e.g. `100px`
|
18
29
|
@mixin column-width($width) {
|
19
30
|
@include experimental(column-width, $width,
|
20
|
-
-moz, -webkit, -o,
|
31
|
+
-moz, -webkit, -o, -ms, not -khtml, official
|
21
32
|
);
|
22
33
|
}
|
23
34
|
|
24
35
|
// Specify the width of the rule between columns e.g. `1px`
|
25
36
|
@mixin column-rule-width($width) {
|
26
37
|
@include experimental(rule-width, $width,
|
27
|
-
-moz, -webkit, -o,
|
38
|
+
-moz, -webkit, -o, -ms, not -khtml, official
|
28
39
|
);
|
29
40
|
}
|
30
41
|
|
@@ -32,7 +43,7 @@
|
|
32
43
|
// This works like border-style.
|
33
44
|
@mixin column-rule-style($style) {
|
34
45
|
@include experimental(rule-style, unquote($style),
|
35
|
-
-moz, -webkit, -o,
|
46
|
+
-moz, -webkit, -o, -ms, not -khtml, official
|
36
47
|
);
|
37
48
|
}
|
38
49
|
|
@@ -40,7 +51,7 @@
|
|
40
51
|
// This works like border-color.
|
41
52
|
@mixin column-rule-color($color) {
|
42
53
|
@include experimental(rule-color, $color,
|
43
|
-
-moz, -webkit, -o,
|
54
|
+
-moz, -webkit, -o, -ms, not -khtml, official
|
44
55
|
);
|
45
56
|
}
|
46
57
|
|
@@ -55,6 +66,6 @@
|
|
55
66
|
@mixin column-rule($width, $style: false, $color: false) {
|
56
67
|
$full : -compass-space-list(compact($width, $style, $color));
|
57
68
|
@include experimental(column-rule, $full,
|
58
|
-
-moz, -webkit, -o,
|
69
|
+
-moz, -webkit, -o, -ms, not -khtml, official
|
59
70
|
);
|
60
71
|
}
|
@@ -0,0 +1,22 @@
|
|
1
|
+
@import "shared";
|
2
|
+
|
3
|
+
// Webkit, IE10 and future support for [CSS Regions](http://dev.w3.org/csswg/css3-regions/)
|
4
|
+
//
|
5
|
+
// $target is a value you use to link two regions of your css. Give the source of your content the flow-into property, and give your target container the flow-from property.
|
6
|
+
//
|
7
|
+
// For a visual explanation, see the diagrams at Chris Coyier's
|
8
|
+
// [CSS-Tricks](http://css-tricks.com/content-folding/)
|
9
|
+
|
10
|
+
@mixin flow-into($target) {
|
11
|
+
$target: unquote($target);
|
12
|
+
@include experimental(flow-into, $target,
|
13
|
+
not -moz, -webkit, not -o, -ms, not -khtml, not official
|
14
|
+
);
|
15
|
+
}
|
16
|
+
|
17
|
+
@mixin flow-from($target) {
|
18
|
+
$target: unquote($target);
|
19
|
+
@include experimental(flow-from, $target,
|
20
|
+
not -moz, -webkit, not -o, -ms, not -khtml, not official
|
21
|
+
);
|
22
|
+
}
|
@@ -104,7 +104,7 @@ $default-skew-y : 5deg !default;
|
|
104
104
|
$only3d: $only3d or -compass-list-size(-compass-list($origin)) > 2;
|
105
105
|
@if $only3d {
|
106
106
|
@include experimental(transform-origin, $origin,
|
107
|
-
|
107
|
+
-moz, -webkit, -o, -ms, not -khtml, official
|
108
108
|
);
|
109
109
|
} @else {
|
110
110
|
@include experimental(transform-origin, $origin,
|
@@ -147,7 +147,7 @@ $default-skew-y : 5deg !default;
|
|
147
147
|
) {
|
148
148
|
@if $only3d {
|
149
149
|
@include experimental(transform, $transform,
|
150
|
-
|
150
|
+
-moz, -webkit, -o, -ms, not -khtml, official
|
151
151
|
);
|
152
152
|
} @else {
|
153
153
|
@include experimental(transform, $transform,
|
@@ -179,7 +179,7 @@ $default-skew-y : 5deg !default;
|
|
179
179
|
// values from 500 to 1000 are more-or-less "normal" - a good starting-point.
|
180
180
|
@mixin perspective($p) {
|
181
181
|
@include experimental(perspective, $p,
|
182
|
-
|
182
|
+
-moz, -webkit, -o, -ms, not -khtml, official
|
183
183
|
);
|
184
184
|
}
|
185
185
|
|
@@ -190,7 +190,7 @@ $default-skew-y : 5deg !default;
|
|
190
190
|
// where the two arguments represent x/y coordinates
|
191
191
|
@mixin perspective-origin($origin: 50%) {
|
192
192
|
@include experimental(perspective-origin, $origin,
|
193
|
-
|
193
|
+
-moz, -webkit, -o, -ms, not -khtml, official
|
194
194
|
);
|
195
195
|
}
|
196
196
|
|
@@ -202,7 +202,7 @@ $default-skew-y : 5deg !default;
|
|
202
202
|
// browsers default to `flat`, mixin defaults to `preserve-3d`
|
203
203
|
@mixin transform-style($style: preserve-3d) {
|
204
204
|
@include experimental(transform-style, $style,
|
205
|
-
|
205
|
+
-moz, -webkit, -o, -ms, not -khtml, official
|
206
206
|
);
|
207
207
|
}
|
208
208
|
|
@@ -214,7 +214,7 @@ $default-skew-y : 5deg !default;
|
|
214
214
|
// browsers default to visible, mixin defaults to hidden
|
215
215
|
@mixin backface-visibility($visibility: hidden) {
|
216
216
|
@include experimental(backface-visibility, $visibility,
|
217
|
-
|
217
|
+
-moz, -webkit, -o, -ms, not -khtml, official
|
218
218
|
);
|
219
219
|
}
|
220
220
|
|
@@ -17,7 +17,9 @@
|
|
17
17
|
time, mark, audio, video {
|
18
18
|
@include reset-box-model;
|
19
19
|
@include reset-font; }
|
20
|
-
|
20
|
+
// Unlike Eric's original reset, we reset the html element to be compatible
|
21
|
+
// with the vertical rhythm mixins.
|
22
|
+
html {
|
21
23
|
@include reset-body; }
|
22
24
|
ol, ul {
|
23
25
|
@include reset-list-style; }
|
@@ -67,8 +69,8 @@
|
|
67
69
|
|
68
70
|
// Reset the font and vertical alignment.
|
69
71
|
@mixin reset-font {
|
70
|
-
font-size: 100%;
|
71
72
|
font: inherit;
|
73
|
+
font-size: 100%;
|
72
74
|
vertical-align: baseline; }
|
73
75
|
|
74
76
|
// Resets the outline when focus.
|
@@ -9,8 +9,8 @@ $base-line-height: 24px !default;
|
|
9
9
|
// Set the default border style for rhythm borders.
|
10
10
|
$default-rhythm-border-style: solid !default;
|
11
11
|
|
12
|
-
// The
|
13
|
-
$
|
12
|
+
// The default font size in all browsers.
|
13
|
+
$browser-default-font-size: 16px;
|
14
14
|
|
15
15
|
// Set to false if you want to use absolute pixels in sizing your typography.
|
16
16
|
$relative-font-sizing: true !default;
|
@@ -55,16 +55,23 @@ $base-half-leader: $base-leader / 2;
|
|
55
55
|
|
56
56
|
// Establishes a font baseline for the given font-size.
|
57
57
|
@mixin establish-baseline($font-size: $base-font-size) {
|
58
|
-
|
59
|
-
|
60
|
-
|
58
|
+
// IE 6 refuses to resize fonts set in pixels and it weirdly resizes fonts
|
59
|
+
// whose root is set in ems. So we set the root font size in percentages of
|
60
|
+
// the default font size.
|
61
|
+
* html {
|
62
|
+
font-size: 100% * ($font-size / $browser-default-font-size);
|
61
63
|
}
|
62
|
-
html
|
64
|
+
html {
|
63
65
|
font-size: $font-size;
|
66
|
+
@include adjust-leading-to(1, if($relative-font-sizing, $font-size, $base-font-size));
|
64
67
|
}
|
65
68
|
}
|
66
69
|
|
67
|
-
//
|
70
|
+
// Resets the line-height to 1 vertical rhythm unit.
|
71
|
+
// Does not work on elements whose font-size is different from $base-font-size.
|
72
|
+
//
|
73
|
+
// @deprecated This mixin will be removed in the next release.
|
74
|
+
// Please use the `adjust-leading-to` mixin instead.
|
68
75
|
@mixin reset-baseline {
|
69
76
|
@include adjust-leading-to(1, if($relative-font-sizing, $base-font-size, $base-font-size));
|
70
77
|
}
|
@@ -104,12 +111,13 @@ $base-half-leader: $base-leader / 2;
|
|
104
111
|
// Calculate rhythm units.
|
105
112
|
@function rhythm(
|
106
113
|
$lines: 1,
|
107
|
-
$font-size: $base-font-size
|
114
|
+
$font-size: $base-font-size,
|
115
|
+
$offset: 0
|
108
116
|
) {
|
109
117
|
@if not $relative-font-sizing and $font-size != $base-font-size {
|
110
118
|
@warn "$relative-font-sizing is false but a relative font size was passed to the rhythm function";
|
111
119
|
}
|
112
|
-
$rhythm: $font-unit * $lines * $base-line-height / $font-size;
|
120
|
+
$rhythm: $font-unit * ($lines * $base-line-height - $offset) / $font-size;
|
113
121
|
// Round the pixels down to nearest integer.
|
114
122
|
@if unit($rhythm) == px {
|
115
123
|
$rhythm: floor($rhythm);
|
@@ -176,7 +184,7 @@ $base-half-leader: $base-leader / 2;
|
|
176
184
|
style: $border-style;
|
177
185
|
width: $font-unit * $width / $font-size;
|
178
186
|
};
|
179
|
-
padding-#{$side}: $
|
187
|
+
padding-#{$side}: rhythm($lines, $font-size, $offset: $width);
|
180
188
|
}
|
181
189
|
|
182
190
|
// Apply borders and whitespace equally to all sides.
|
@@ -188,7 +196,7 @@ $base-half-leader: $base-leader / 2;
|
|
188
196
|
style: $border-style;
|
189
197
|
width: $font-unit * $width / $font-size;
|
190
198
|
};
|
191
|
-
padding: $
|
199
|
+
padding: rhythm($lines, $font-size, $offset: $width);
|
192
200
|
}
|
193
201
|
|
194
202
|
// Apply a leading border.
|
@@ -1,3 +1,10 @@
|
|
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
|
+
|
1
8
|
// Hides html text and replaces it with an image.
|
2
9
|
// If you use this on an inline element, you will need to change the display to block or inline-block.
|
3
10
|
// Also, if the size of the image differs significantly from the font size, you'll need to set the width and/or height.
|
@@ -25,11 +32,24 @@
|
|
25
32
|
}
|
26
33
|
|
27
34
|
// Hides text in an element so you can see the background.
|
28
|
-
|
29
|
-
|
30
|
-
|
31
|
-
|
32
|
-
|
35
|
+
//
|
36
|
+
// The direction indicates how the text should be moved out of view.
|
37
|
+
//
|
38
|
+
// See `$hide-text-direction` for more information and to set this globally
|
39
|
+
// for your application.
|
40
|
+
@mixin hide-text($direction: $hide-text-direction) {
|
41
|
+
@if $direction == left {
|
42
|
+
$approximate-em-value: 12px / 1em;
|
43
|
+
$wider-than-any-screen: -9999em;
|
44
|
+
text-indent: $wider-than-any-screen * $approximate-em-value;
|
45
|
+
overflow: hidden;
|
46
|
+
text-align: left;
|
47
|
+
} @else {
|
48
|
+
// slightly wider than the box prevents issues with inline-block elements
|
49
|
+
text-indent: 110%;
|
50
|
+
white-space: nowrap;
|
51
|
+
overflow: hidden;
|
52
|
+
}
|
33
53
|
}
|
34
54
|
|
35
55
|
// Hides text in an element by squishing the text into oblivion.
|