compass 0.12.1 → 0.12.2.rc.0

data/README.markdown

@@ -1,59 +1,29 @@
-# Compass
+# Compass Stylesheet Authoring Framework
 
 Build Status: ![Build Status](https://secure.travis-ci.org/chriseppstein/compass.png)
 
-A [Sass][sass]-based CSS Meta-Framework that allows you to mix and match any of the following CSS frameworks:
+## Resources
 
-- [Compass Core][compass_core_website] - [Wiki Documentation][compass_core_wiki]
-- [Blueprint][blueprint_website] - [Wiki Documentation][bleuprint_wiki]
-- [960][ninesixty_website] - [Wiki Documentation][ninesixty_wiki]
-- [Susy][susy_website] - [Wiki Documentation][susy_wiki]
-- [YUI][yui_website] - [Wiki Documentation][yui_wiki]
-- New frameworks and extensions are [tracked on the wiki][plugins_wiki] as they are created.
-- Other frameworks can be added relatively easily. Create your own!
+* [Compass Homepage](http://compass-style.org/)
+* [Installing Compass](http://compass-style.org/install/)
+* [Compass Reference](http://compass-style.org/install/reference/)
 
-## Compass Provides
-
-1. A [command line tool][command_line_wiki] for managing your Sass projects.
-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].
-3. Loads of Sass mixins to make building your website a snap.
+## Author
+Compass is written by [Chris Eppstein][chris_eppstein].<br>
+Chris is the Software Architect of [Caring.com][caring.com] and a member of the [Sass][sass] core team.
 
-## Quick Start
+## Core Team Members
 
-    $ (sudo) gem install compass
-    $ compass create my_compass_project --using blueprint
-    $ cd my_compass_project
-    $ compass watch
+* [Scott Davis](https://github.com/scottdavis)
+* [Eric Meyer](https://github.com/ericam)
+* [Brandon Mathis](https://github.com/imathis)
+* [Anthony Short](https://github.com/anthonyshort/)
 
-## More Information
-Please see the [wiki][wiki]
+## Major Contributors
 
-## Author
-Compass is written by [Chris Eppstein][chris_eppstein].<br>
-Chris is the Software Architect of [Caring.com][caring.com] and a member of the [Sass][sass] core team.
+* [Nico Hagenburger](https://github.com/hagenburger)
 
 ## License
 Copyright (c) 2008-2009 Christopher M. Eppstein<br>
 All Rights Reserved.<br>
 Released under a [slightly modified MIT License][license].
-
-[sass]: http://sass-lang.com/ "Syntactically Awesome StyleSheets"
-[compass_core_website]: http://github.com/chriseppstein/compass/tree/master/frameworks/compass
-[compass_core_wiki]: http://github.com/chriseppstein/compass/wikis/compass-core-documentation
-[blueprint_website]: http://blueprintcss.org/
-[bleuprint_wiki]: http://github.com/chriseppstein/compass/wikis/blueprint-documentation
-[yui_website]: http://developer.yahoo.com/yui/grids/
-[yui_wiki]: http://github.com/chriseppstein/compass/wikis/yui-documentation
-[plugins_wiki]: http://github.com/chriseppstein/compass/wikis/compass-plugins
-[ninesixty_website]: http://960.gs/
-[ninesixty_wiki]: http://github.com/chriseppstein/compass/wikis/960gs-documentation
-[command_line_wiki]: http://wiki.github.com/chriseppstein/compass/command-line-tool
-[wiki]: http://github.com/chriseppstein/compass/wikis/home
-[ruby_on_rails_wiki]: http://wiki.github.com/chriseppstein/compass/ruby-on-rails-integration
-[merb_wiki]: http://wiki.github.com/chriseppstein/compass/merb-integration
-[static_matic_wiki]: http://wiki.github.com/chriseppstein/compass/staticmatic-integration
-[chris_eppstein]: http://chriseppstein.github.com
-[caring.com]: http://www.caring.com/ "Senior Care Resources"
-[license]: http://github.com/chriseppstein/compass/tree/master/LICENSE.markdown
-[susy_website]: http://www.oddbird.net/susy/
-[susy_wiki]: http://github.com/chriseppstein/compass/wikis/susy-documentation 

data/VERSION.yml

@@ -1,5 +1,7 @@
 --- 
 :major: 0
 :minor: 12
-:build: 1
+:build: 2
+:state: rc
+:iteration: 0
 :name: Alnilam

data/features/command_line.feature

@@ -151,6 +151,7 @@ Feature: Command Line
       | watch   |
     And I should see the following "other" commands:
       | config      |
+      | extension   |
       | frameworks  |
       | grid-img    |
       | help        |

data/frameworks/compass/stylesheets/compass/_css3.scss

@@ -14,3 +14,4 @@
 @import "css3/transform";
 @import "css3/transition";
 @import "css3/appearance";
+@import "css3/regions";

data/frameworks/compass/stylesheets/compass/css3/_appearance.scss

@@ -1,9 +1,12 @@
 @import "shared";
 
-// Change the appearance for Mozilla, Webkit and the future
+// Change the appearance for Mozilla, Webkit and possibly the future.
+// The appearance property is currently not present in any newer CSS specification.
 //
-// @param $ap
-//   [ none | normal | icon | window | button | menu | field ]
+// There is no official list of accepted values, but you might check these source:
+//   Mozilla : https://developer.mozilla.org/en/CSS/-moz-appearance
+//   Webkit  : http://code.google.com/p/webkit-mirror/source/browse/Source/WebCore/css/CSSValueKeywords.in?spec=svnf1aea559dcd025a8946aa7da6e4e8306f5c1b604&r=63c7d1af44430b314233fea342c3ddb2a052e365
+//   (search for 'appearance' within the page)
 
 @mixin appearance($ap) {
   $ap: unquote($ap);

data/frameworks/compass/stylesheets/compass/css3/_border-radius.scss

@@ -21,24 +21,18 @@ $default-border-radius: 5px !default;
 //    .simple {
 //      -webkit-border-radius: 4px 4px;
 //      -moz-border-radius: 4px / 4px;
-//      -o-border-radius: 4px / 4px;
-//      -ms-border-radius: 4px / 4px;
 //      -khtml-border-radius: 4px / 4px;
 //      border-radius: 4px / 4px; }
 //    
 //    .compound {
 //      -webkit-border-radius: 2px 3px;
 //      -moz-border-radius: 2px 5px / 3px 6px;
-//      -o-border-radius: 2px 5px / 3px 6px;
-//      -ms-border-radius: 2px 5px / 3px 6px;
 //      -khtml-border-radius: 2px 5px / 3px 6px;
 //      border-radius: 2px 5px / 3px 6px; }
 //    
 //    .crazy {
 //      -webkit-border-radius: 1px 2px;
 //      -moz-border-radius: 1px 3px 5px 7px / 2px 4px 6px 8px;
-//      -o-border-radius: 1px 3px 5px 7px / 2px 4px 6px 8px;
-//      -ms-border-radius: 1px 3px 5px 7px / 2px 4px 6px 8px;
 //      -khtml-border-radius: 1px 3px 5px 7px / 2px 4px 6px 8px;
 //      border-radius: 1px 3px 5px 7px / 2px 4px 6px 8px; }
 
@@ -58,8 +52,8 @@ $default-border-radius: 5px !default;
     @include experimental("border-radius", $radius unquote("/") $vertical-radius,
       -moz,
       not -webkit,
-      -o,
-      -ms,
+      not -o,
+      not -ms,
       -khtml,
       official
     );
@@ -87,8 +81,8 @@ $default-border-radius: 5px !default;
   @include experimental("border-#{$vert}-#{$horz}-radius", $radius,
     not -moz,
     -webkit,
-    -o,
-    -ms,
+    not -o,
+    not -ms,
     -khtml,
     official
   );

data/frameworks/compass/stylesheets/compass/css3/_columns.scss

@@ -1,30 +1,41 @@
 @import "shared";
 
+// Specify the shorthand `columns` property.
+//
+// Example:
+//
+//     @include columns(20em 2)
+@mixin columns($width-and-count) {
+  @include experimental(columns, $width-and-count,
+    -moz, -webkit, -o, -ms, not -khtml, official
+  );
+}
+
 // Specify the number of columns
 @mixin column-count($count) {
   @include experimental(column-count, $count,
-    -moz, -webkit, -o, not -ms, not -khtml, official
+    -moz, -webkit, -o, -ms, not -khtml, official
   );
 }
 
 // Specify the gap between columns e.g. `20px`
 @mixin column-gap($width) {
   @include experimental(column-gap, $width,
-    -moz, -webkit, -o, not -ms, not -khtml, official
+    -moz, -webkit, -o, -ms, not -khtml, official
   );
 }
 
 // Specify the width of columns e.g. `100px`
 @mixin column-width($width) {
   @include experimental(column-width, $width,
-    -moz, -webkit, -o, not -ms, not -khtml, official
+    -moz, -webkit, -o, -ms, not -khtml, official
   );
 }
 
 // Specify the width of the rule between columns e.g. `1px`
 @mixin column-rule-width($width) {
   @include experimental(rule-width, $width,
-    -moz, -webkit, -o, not -ms, not -khtml, official
+    -moz, -webkit, -o, -ms, not -khtml, official
   );
 }
 
@@ -32,7 +43,7 @@
 // This works like border-style.
 @mixin column-rule-style($style) {
   @include experimental(rule-style, unquote($style),
-    -moz, -webkit, -o, not -ms, not -khtml, official
+    -moz, -webkit, -o, -ms, not -khtml, official
   );
 }
 
@@ -40,7 +51,7 @@
 // This works like border-color.
 @mixin column-rule-color($color) {
   @include experimental(rule-color, $color,
-    -moz, -webkit, -o, not -ms, not -khtml, official
+    -moz, -webkit, -o, -ms, not -khtml, official
   );
 }
 
@@ -55,6 +66,6 @@
 @mixin column-rule($width, $style: false, $color: false) {
   $full : -compass-space-list(compact($width, $style, $color));
   @include experimental(column-rule, $full,
-    -moz, -webkit, -o, not -ms, not -khtml, official
+    -moz, -webkit, -o, -ms, not -khtml, official
   );
 }

data/frameworks/compass/stylesheets/compass/css3/_regions.scss

@@ -0,0 +1,22 @@
+@import "shared";
+
+// Webkit, IE10 and future support for [CSS Regions](http://dev.w3.org/csswg/css3-regions/)
+//
+// $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.
+//
+// For a visual explanation, see the diagrams at Chris Coyier's
+// [CSS-Tricks](http://css-tricks.com/content-folding/)
+
+@mixin flow-into($target) {
+  $target: unquote($target);
+  @include experimental(flow-into, $target,
+    not -moz, -webkit, not -o, -ms, not -khtml, not official
+  );
+}
+
+@mixin flow-from($target) {
+  $target: unquote($target);
+  @include experimental(flow-from, $target,
+    not -moz, -webkit, not -o, -ms, not -khtml, not official
+  );
+}

data/frameworks/compass/stylesheets/compass/css3/_transform.scss

@@ -104,7 +104,7 @@ $default-skew-y      : 5deg                  !default;
   $only3d: $only3d or -compass-list-size(-compass-list($origin)) > 2;
   @if $only3d {
     @include experimental(transform-origin, $origin,
-      not -moz, -webkit, not -o, not -ms, not -khtml, official
+      -moz, -webkit, -o, -ms, not -khtml, official
     );
   } @else {
     @include experimental(transform-origin, $origin,
@@ -147,7 +147,7 @@ $default-skew-y      : 5deg                  !default;
 ) {
   @if $only3d {
     @include experimental(transform, $transform,
-      not -moz, -webkit, not -o, not -ms, not -khtml, official
+      -moz, -webkit, -o, -ms, not -khtml, official
     );
   } @else {
     @include experimental(transform, $transform,
@@ -179,7 +179,7 @@ $default-skew-y      : 5deg                  !default;
 // values from 500 to 1000 are more-or-less "normal" - a good starting-point.
 @mixin perspective($p) {
   @include experimental(perspective, $p,
-    not -moz, -webkit, not -o, not -ms, not -khtml, official
+    -moz, -webkit, -o, -ms, not -khtml, official
   );
 }
 
@@ -190,7 +190,7 @@ $default-skew-y      : 5deg                  !default;
 // where the two arguments represent x/y coordinates
 @mixin perspective-origin($origin: 50%) {
   @include experimental(perspective-origin, $origin,
-    not -moz, -webkit, not -o, not -ms, not -khtml, official
+    -moz, -webkit, -o, -ms, not -khtml, official
   );
 }
 
@@ -202,7 +202,7 @@ $default-skew-y      : 5deg                  !default;
 // browsers default to `flat`, mixin defaults to `preserve-3d`
 @mixin transform-style($style: preserve-3d) {
   @include experimental(transform-style, $style,
-    not -moz, -webkit, not -o, not -ms, not -khtml, official
+    -moz, -webkit, -o, -ms, not -khtml, official
   );
 }
 
@@ -214,7 +214,7 @@ $default-skew-y      : 5deg                  !default;
 // browsers default to visible, mixin defaults to hidden
 @mixin backface-visibility($visibility: hidden) {
   @include experimental(backface-visibility, $visibility,
-    not -moz, -webkit, not -o, not -ms, not -khtml, official
+    -moz, -webkit, -o, -ms, not -khtml, official
   );
 }
 

data/frameworks/compass/stylesheets/compass/reset/_utilities.scss

@@ -17,7 +17,9 @@
   time, mark, audio, video {
     @include reset-box-model;
     @include reset-font; }
-  body {
+  // Unlike Eric's original reset, we reset the html element to be compatible
+  // with the vertical rhythm mixins.
+  html {
     @include reset-body; }
   ol, ul {
     @include reset-list-style; }
@@ -67,8 +69,8 @@
 
 // Reset the font and vertical alignment.
 @mixin reset-font {
-  font-size: 100%;
   font: inherit;
+  font-size: 100%;
   vertical-align: baseline; }
 
 // Resets the outline when focus.

data/frameworks/compass/stylesheets/compass/typography/_vertical_rhythm.scss

@@ -9,8 +9,8 @@ $base-line-height: 24px !default;
 // Set the default border style for rhythm borders.
 $default-rhythm-border-style: solid !default;
 
-// The IE font ratio is a fact of life. Deal with it.
-$ie-font-ratio: 16px / 100%;
+// The default font size in all browsers.
+$browser-default-font-size: 16px;
 
 // Set to false if you want to use absolute pixels in sizing your typography.
 $relative-font-sizing: true !default;
@@ -55,16 +55,23 @@ $base-half-leader: $base-leader / 2;
 
 // Establishes a font baseline for the given font-size.
 @mixin establish-baseline($font-size: $base-font-size) {
-  body {
-    font-size: $font-size / $ie-font-ratio;
-    @include adjust-leading-to(1, if($relative-font-sizing, $font-size, $base-font-size));
+  // IE 6 refuses to resize fonts set in pixels and it weirdly resizes fonts
+  // whose root is set in ems. So we set the root font size in percentages of
+  // the default font size.
+  * html {
+    font-size: 100% * ($font-size / $browser-default-font-size);
   }
-  html>body {
+  html {
     font-size: $font-size;
+    @include adjust-leading-to(1, if($relative-font-sizing, $font-size, $base-font-size));
   }
 }
 
-// resets the baseline to 1 leading unit
+// Resets the line-height to 1 vertical rhythm unit.
+// Does not work on elements whose font-size is different from $base-font-size.
+//
+// @deprecated This mixin will be removed in the next release.
+// Please use the `adjust-leading-to` mixin instead.
 @mixin reset-baseline {
   @include adjust-leading-to(1, if($relative-font-sizing, $base-font-size, $base-font-size));
 }
@@ -104,12 +111,13 @@ $base-half-leader: $base-leader / 2;
 // Calculate rhythm units.
 @function rhythm(
   $lines: 1,
-  $font-size: $base-font-size
+  $font-size: $base-font-size,
+  $offset: 0
 ) {
   @if not $relative-font-sizing and $font-size != $base-font-size {
     @warn "$relative-font-sizing is false but a relative font size was passed to the rhythm function";
   }
-  $rhythm: $font-unit * $lines * $base-line-height / $font-size;
+  $rhythm: $font-unit * ($lines * $base-line-height - $offset) / $font-size;
   // Round the pixels down to nearest integer.
   @if unit($rhythm) == px {
     $rhythm: floor($rhythm);
@@ -176,7 +184,7 @@ $base-half-leader: $base-leader / 2;
     style: $border-style;
     width: $font-unit * $width / $font-size;
   };
-  padding-#{$side}: $font-unit / $font-size * ($lines * $base-line-height - $width);
+  padding-#{$side}: rhythm($lines, $font-size, $offset: $width);
 }
 
 // Apply borders and whitespace equally to all sides.
@@ -188,7 +196,7 @@ $base-half-leader: $base-leader / 2;
     style: $border-style;
     width: $font-unit * $width / $font-size;
   };
-  padding: $font-unit / $font-size * ($lines * $base-line-height - $width);
+  padding: rhythm($lines, $font-size, $offset: $width);
 }
 
 // Apply a leading border.

data/frameworks/compass/stylesheets/compass/typography/text/_replacement.scss

@@ -1,3 +1,10 @@
+// Indicates the direction you prefer to move your text
+// when hiding it.
+//
+// `left` is more robust, especially in older browsers.
+// `right` seems have better runtime performance.
+$hide-text-direction: left !default;
+
 // Hides html text and replaces it with an image.
 // If you use this on an inline element, you will need to change the display to block or inline-block.
 // 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 @@
 }
 
 // Hides text in an element so you can see the background.
-@mixin hide-text {
-  // slightly wider than the box prevents issues with inline-block elements
-  text-indent: 110%;
-  white-space: nowrap;
-  overflow: hidden;
+//
+// The direction indicates how the text should be moved out of view.
+//
+// See `$hide-text-direction` for more information and to set this globally
+// for your application.
+@mixin hide-text($direction: $hide-text-direction) {
+  @if $direction == left {
+    $approximate-em-value: 12px / 1em;
+    $wider-than-any-screen: -9999em;
+    text-indent: $wider-than-any-screen * $approximate-em-value;
+    overflow: hidden;
+    text-align: left;
+  } @else {
+    // slightly wider than the box prevents issues with inline-block elements
+    text-indent: 110%;
+    white-space: nowrap;
+    overflow: hidden;
+  }
 }
 
 // Hides text in an element by squishing the text into oblivion.

data/frameworks/compass/stylesheets/compass/utilities/general/_hacks.scss

@@ -22,7 +22,7 @@ $default-has-layout-approach: zoom !default;
 }
 
 @mixin has-layout-zoom {
-  @if $legacy-support-for-ie {
+  @if $legacy-support-for-ie6 or $legacy-support-for-ie7 {
     *zoom: 1;
   }
 }