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.
Files changed (32) hide show
  1. data/README.markdown +15 -45
  2. data/VERSION.yml +3 -1
  3. data/features/command_line.feature +1 -0
  4. data/frameworks/compass/stylesheets/compass/_css3.scss +1 -0
  5. data/frameworks/compass/stylesheets/compass/css3/_appearance.scss +6 -3
  6. data/frameworks/compass/stylesheets/compass/css3/_border-radius.scss +4 -10
  7. data/frameworks/compass/stylesheets/compass/css3/_columns.scss +18 -7
  8. data/frameworks/compass/stylesheets/compass/css3/_regions.scss +22 -0
  9. data/frameworks/compass/stylesheets/compass/css3/_transform.scss +6 -6
  10. data/frameworks/compass/stylesheets/compass/reset/_utilities.scss +4 -2
  11. data/frameworks/compass/stylesheets/compass/typography/_vertical_rhythm.scss +19 -11
  12. data/frameworks/compass/stylesheets/compass/typography/text/_replacement.scss +25 -5
  13. data/frameworks/compass/stylesheets/compass/utilities/general/_hacks.scss +1 -1
  14. data/lib/compass/commands.rb +4 -3
  15. data/lib/compass/commands/extension_command.rb +60 -0
  16. data/lib/compass/configuration/adapters.rb +8 -2
  17. data/lib/compass/configuration/data.rb +1 -0
  18. data/lib/compass/exec/global_options_parser.rb +8 -1
  19. data/lib/compass/sass_extensions/functions/sprites.rb +10 -2
  20. data/lib/compass/version.rb +2 -1
  21. data/test/fixtures/stylesheets/blueprint/css/screen.css +2 -2
  22. data/test/fixtures/stylesheets/compass/css/border_radius.css +0 -6
  23. data/test/fixtures/stylesheets/compass/css/columns.css +15 -0
  24. data/test/fixtures/stylesheets/compass/css/regions.css +7 -0
  25. data/test/fixtures/stylesheets/compass/css/reset.css +2 -2
  26. data/test/fixtures/stylesheets/compass/css/transform.css +108 -0
  27. data/test/fixtures/stylesheets/compass/css/vertical_rhythm.css +5 -5
  28. data/test/fixtures/stylesheets/compass/sass/columns.scss +1 -0
  29. data/test/fixtures/stylesheets/compass/sass/regions.scss +4 -0
  30. data/test/integrations/sprites_test.rb +4 -4
  31. data/test/units/configuration_test.rb +15 -0
  32. metadata +51 -70
@@ -1,59 +1,29 @@
1
- # Compass
1
+ # Compass Stylesheet Authoring Framework
2
2
 
3
3
  Build Status: ![Build Status](https://secure.travis-ci.org/chriseppstein/compass.png)
4
4
 
5
- A [Sass][sass]-based CSS Meta-Framework that allows you to mix and match any of the following CSS frameworks:
5
+ ## Resources
6
6
 
7
- - [Compass Core][compass_core_website] - [Wiki Documentation][compass_core_wiki]
8
- - [Blueprint][blueprint_website] - [Wiki Documentation][bleuprint_wiki]
9
- - [960][ninesixty_website] - [Wiki Documentation][ninesixty_wiki]
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
- ## Compass Provides
16
-
17
- 1. A [command line tool][command_line_wiki] for managing your Sass projects.
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
- ## Quick Start
15
+ ## Core Team Members
22
16
 
23
- $ (sudo) gem install compass
24
- $ compass create my_compass_project --using blueprint
25
- $ cd my_compass_project
26
- $ compass watch
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
- ## More Information
29
- Please see the [wiki][wiki]
22
+ ## Major Contributors
30
23
 
31
- ## Author
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
@@ -1,5 +1,7 @@
1
1
  ---
2
2
  :major: 0
3
3
  :minor: 12
4
- :build: 1
4
+ :build: 2
5
+ :state: rc
6
+ :iteration: 0
5
7
  :name: Alnilam
@@ -151,6 +151,7 @@ Feature: Command Line
151
151
  | watch |
152
152
  And I should see the following "other" commands:
153
153
  | config |
154
+ | extension |
154
155
  | frameworks |
155
156
  | grid-img |
156
157
  | help |
@@ -14,3 +14,4 @@
14
14
  @import "css3/transform";
15
15
  @import "css3/transition";
16
16
  @import "css3/appearance";
17
+ @import "css3/regions";
@@ -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
- // @param $ap
6
- // [ none | normal | icon | window | button | menu | field ]
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, not -ms, not -khtml, official
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, not -ms, not -khtml, official
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, not -ms, not -khtml, official
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, not -ms, not -khtml, official
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, not -ms, not -khtml, official
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, not -ms, not -khtml, official
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, not -ms, not -khtml, official
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
- not -moz, -webkit, not -o, not -ms, not -khtml, official
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
- not -moz, -webkit, not -o, not -ms, not -khtml, official
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
- not -moz, -webkit, not -o, not -ms, not -khtml, official
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
- not -moz, -webkit, not -o, not -ms, not -khtml, official
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
- not -moz, -webkit, not -o, not -ms, not -khtml, official
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
- not -moz, -webkit, not -o, not -ms, not -khtml, official
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
- body {
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 IE font ratio is a fact of life. Deal with it.
13
- $ie-font-ratio: 16px / 100%;
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
- body {
59
- font-size: $font-size / $ie-font-ratio;
60
- @include adjust-leading-to(1, if($relative-font-sizing, $font-size, $base-font-size));
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>body {
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
- // resets the baseline to 1 leading unit
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}: $font-unit / $font-size * ($lines * $base-line-height - $width);
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: $font-unit / $font-size * ($lines * $base-line-height - $width);
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
- @mixin hide-text {
29
- // slightly wider than the box prevents issues with inline-block elements
30
- text-indent: 110%;
31
- white-space: nowrap;
32
- overflow: hidden;
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.
@@ -22,7 +22,7 @@ $default-has-layout-approach: zoom !default;
22
22
  }
23
23
 
24
24
  @mixin has-layout-zoom {
25
- @if $legacy-support-for-ie {
25
+ @if $legacy-support-for-ie6 or $legacy-support-for-ie7 {
26
26
  *zoom: 1;
27
27
  }
28
28
  }