compass 0.11.alpha.0 → 0.11.alpha.1

data/VERSION.yml

@@ -2,4 +2,4 @@
 :major: 0
 :minor: 11
 :state: alpha
-:build: 0
+:build: 1

data/examples/compass/headers.txt

@@ -0,0 +1,7 @@
+HTTP/1.1 200 OK
+Connection: close
+Date: Thu, 18 Nov 2010 17:15:33 GMT
+Last-Modified: Thu, 18 Nov 2010 01:45:54 GMT
+Content-Type: text/x-component
+Content-Length: 28280
+

data/examples/compass/pie.html.haml

@@ -0,0 +1,73 @@
+!!! 5
+%html
+  %head
+    %meta{:content => "text/html; charset=UTF-8", "http-equiv" => "content-type"}/
+    %title Basic CSS3 Demos
+    %link{:charset => "utf-8", :href => "stylesheets/pie.css", :media => "screen", :rel => "stylesheet", :type => "text/css"}/
+  %body
+    .section
+      %h2 border-radius
+      #test1.test Cherry
+      %code
+        %strong
+          border-radius: 1em;   /* Standard */
+          \-moz-border-radius: 1em;   /* Gecko */
+          \-webkit-border-radius: 1em;   /* WebKit */
+    .section
+      %h2 box-shadow
+      #test2.test Apple
+      %code
+        border-radius: 1em;
+        \-moz-border-radius: 1em;
+        \-webkit-border-radius: 1em;
+        %strong
+          box-shadow: #999 0 .25em .5em;
+          \-webkit-box-shadow: #999 0 .25em .5em;
+          \-moz-box-shadow: #999 0 .25em .5em;
+    .section
+      %h2 linear-gradient
+      #test3.test Blueberry
+      %code
+        border-radius: 1em;
+        \-moz-border-radius: 1em;
+        \-webkit-border-radius: 1em;
+        box-shadow: #999 0 .25em .5em;
+        \-webkit-box-shadow: #999 0 .25em .5em;
+        \-moz-box-shadow: #999 0 .25em .5em;
+        %strong
+          background: #9CF;   /* Fallback */
+          background: -webkit-gradient(linear, 0 0, 0 100%, from(#9CF), to(#03C));
+          background: -moz-linear-gradient(#9CF, #03C);
+          background: linear-gradient(#9CF, #03C);
+    .section
+      %h2 multiple background images
+      #test4.test Rhubarb
+      %code
+        border-radius: 1em;
+        \-moz-border-radius: 1em;
+        \-webkit-border-radius: 1em;
+        box-shadow: #999 0 .25em .5em;
+        \-webkit-box-shadow: #999 0 .25em .5em;
+        \-moz-box-shadow: #999 0 .25em .5em;
+        %strong
+          background: url(icon-ie.png) no-repeat 50% 0 #FFF;   /* Fallback */
+          background: url(icon-ie.png) no-repeat 50% 0,
+          url(icon-firefox.png) no-repeat 0 0,
+          url(icon-chrome.png) no-repeat 100% 0,
+          url(icon-safari.png) no-repeat 0 100%,
+          url(icon-opera.png) no-repeat 100% 100% #FFF;
+    .section
+      %h2 border-image
+      #test5.test Pumpkin
+      %code
+        border-radius: 1em;
+        \-moz-border-radius: 1em;
+        \-webkit-border-radius: 1em;
+        box-shadow: #999 0 .25em .5em;
+        \-webkit-box-shadow: #999 0 .25em .5em;
+        \-moz-box-shadow: #999 0 .25em .5em;
+        %strong
+          border-image: url(border2.png) 15 fill stretch;
+          \-moz-border-image: url(border2.png) 15 stretch;
+          \-webkit-border-image: url(border2.png) 15 stretch;
+          border: 15px solid transparent;

data/examples/compass/src/pie.scss

@@ -0,0 +1,110 @@
+// this file demonstrates how to use the CSS PIE extension for
+// legacy versions of Internet Explorer. In many cases, PIE will allow
+// you to style in CSS things that you'd have to do using image chops otherwise.
+//
+// Note: Each element that has PIE enabled on it will add about 10ms to your page load.
+@import "compass/css3";
+@import "compass/css3/pie";
+
+$pie-behavior: url("/stylesheets/PIE.htc");
+
+// It is suggested that you use Sass's @extend directive to apply the PIE
+// behavior to your elements. Setting this variable will tell the `pie` mixin
+// to extend. Or you can just extend the base class yourself.
+$pie-base-class: pie-element;
+
+// There are two approaches to creating PIE elements
+// The default approach is to make the element position: relative.
+.pie-element {
+  // relative is the default, so passing relative
+  // is redundant, but we do it here for clarity.
+  @include pie-element(relative);
+}
+
+html, body {
+    margin: 0;
+    padding: 0;
+    font-family: sans-serif;
+    font-size: 16px;
+    background: #EEE;
+}
+
+.section {
+    border: 1px solid #CCC;
+    padding: 1em 2em 2em;
+    margin: 3em;
+    background: #FFF;
+}
+
+.section h2 {
+    border: 1px solid #CCC;
+    position: relative;
+    left: -3em;
+    top: -2em;
+    background: #FFF;
+    font-size: 1em;
+    padding: .25em 1em;
+    margin: 0;
+}
+
+.section code {
+    display: block;
+    white-space: pre;
+    margin-left: 250px;
+    min-height: 100px;
+    color: #999;
+    overflow: auto;
+}
+.section code strong {
+    color: #000;
+}
+
+.test {
+    width: 200px;
+    height: 100px;
+    line-height: 100px;
+    text-align: center;
+    border: 2px solid;
+    background: #FFF;
+    float: left;
+    @include pie;
+}
+
+#test1 {
+    border-color: #c00;
+    @include border-radius(1em);
+}
+
+#test2 {
+    border-color: #090;
+    @include border-radius(1em);
+    @include box-shadow(#999 0 .25em .5em);
+}
+
+#test3 {
+    border-color: #00c;
+    @include border-radius(1em);
+    @include box-shadow(#999 0 .25em .5em);
+    @include background(linear-gradient(#9CF, #03C));
+}
+
+#test4 {
+    border-color: #F99;
+    @include border-radius(1em);
+    @include box-shadow(#999 0 .25em .5em);
+    background: #FFF image-url("icon-ie.png") no-repeat 50% 0;
+    @include background(
+      image-url("icon-ie.png") no-repeat 50% 0,
+      image-url("icon-firefox.png") no-repeat 0 0,
+      image-url("icon-chrome.png") no-repeat 100% 0,
+      image-url("icon-safari.png") no-repeat 0 100%,
+      image-url("icon-opera.png") no-repeat 100% 100% #FFF
+    );
+}
+
+#test5 {
+    @include border-image(image-url("border2.png") 15 stretch);
+    border: 15px solid transparent;
+    width: 180px;
+}
+

data/features/command_line.feature

@@ -7,12 +7,9 @@ Feature: Command Line
     When I create a project using: compass create my_project
     Then a directory my_project/ is created
     And a configuration file my_project/config.rb is created
-    And a sass file my_project/src/screen.scss is created
-    And a sass file my_project/src/print.scss is created
-    And a sass file my_project/src/ie.scss is created
-    And a sass file my_project/src/screen.scss is compiled
-    And a sass file my_project/src/print.scss is compiled
-    And a sass file my_project/src/ie.scss is compiled
+    And a sass file my_project/sass/screen.scss is created
+    And a sass file my_project/sass/print.scss is created
+    And a sass file my_project/sass/ie.scss is created
     And a css file my_project/stylesheets/screen.css is created
     And a css file my_project/stylesheets/print.css is created
     And a css file my_project/stylesheets/ie.css is created
@@ -24,12 +21,9 @@ Feature: Command Line
     When I create a project using: compass create bp_project --using blueprint
     Then a directory bp_project/ is created
     And a configuration file bp_project/config.rb is created
-    And a sass file bp_project/src/screen.scss is created
-    And a sass file bp_project/src/print.scss is created
-    And a sass file bp_project/src/ie.scss is created
-    And a sass file bp_project/src/screen.scss is compiled
-    And a sass file bp_project/src/print.scss is compiled
-    And a sass file bp_project/src/ie.scss is compiled
+    And a sass file bp_project/sass/screen.scss is created
+    And a sass file bp_project/sass/print.scss is created
+    And a sass file bp_project/sass/ie.scss is created
     And a css file bp_project/stylesheets/screen.css is created
     And a css file bp_project/stylesheets/print.css is created
     And a css file bp_project/stylesheets/ie.css is created
@@ -52,9 +46,9 @@ Feature: Command Line
     When I create a project using: compass create my_project --dry-run
     Then a directory my_project/ is not created
     But a configuration file my_project/config.rb is reported created
-    And a sass file my_project/src/screen.scss is reported created
-    And a sass file my_project/src/print.scss is reported created
-    And a sass file my_project/src/ie.scss is reported created
+    And a sass file my_project/sass/screen.scss is reported created
+    And a sass file my_project/sass/print.scss is reported created
+    And a sass file my_project/sass/ie.scss is reported created
     And I am told how to link to /stylesheets/screen.css for media "screen, projection"
     And I am told how to link to /stylesheets/print.css for media "print"
     And I am told how to conditionally link "IE" to /stylesheets/ie.css for media "screen, projection"
@@ -63,10 +57,10 @@ Feature: Command Line
     When I create a project using: compass create bare_project --bare
     Then a directory bare_project/ is created
     And a configuration file bare_project/config.rb is created
-    And a directory bare_project/src/ is created
+    And a directory bare_project/sass/ is created
     And a directory bare_project/stylesheets/ is not created
     And I am congratulated
-    And I am told that I can place stylesheets in the src subdirectory
+    And I am told that I can place stylesheets in the sass subdirectory
     And I am told how to compile my sass stylesheets
 
   Scenario: Creating a bare project with a framework
@@ -87,10 +81,6 @@ Feature: Command Line
     Given I am using the existing project in test/fixtures/stylesheets/compass
     When I run: compass compile
     Then a directory tmp/ is created
-    And a sass file sass/layout.sass is reported compiled
-    And a sass file sass/print.sass is reported compiled
-    And a sass file sass/reset.sass is reported compiled
-    And a sass file sass/utilities.scss is reported compiled
     And a css file tmp/layout.css is created
     And a css file tmp/print.css is created
     And a css file tmp/reset.css is created
@@ -101,10 +91,6 @@ Feature: Command Line
     And I am in the parent directory
     When I run: compass compile tmp_compass
     Then a directory tmp_compass/tmp/ is created
-    And a sass file tmp_compass/sass/layout.sass is reported compiled
-    And a sass file tmp_compass/sass/print.sass is reported compiled
-    And a sass file tmp_compass/sass/reset.sass is reported compiled
-    And a sass file tmp_compass/sass/utilities.scss is reported compiled
     And a css file tmp_compass/tmp/layout.css is created
     And a css file tmp_compass/tmp/print.css is created
     And a css file tmp_compass/tmp/reset.css is created
@@ -114,10 +100,6 @@ Feature: Command Line
     Given I am using the existing project in test/fixtures/stylesheets/compass
     When I run: compass compile --dry-run
     Then a directory tmp/ is not created
-    And a sass file sass/layout.sass is reported compiled
-    And a sass file sass/print.sass is reported compiled
-    And a sass file sass/reset.sass is reported compiled
-    And a sass file sass/utilities.scss is reported compiled
     And a css file tmp/layout.css is not created
     And a css file tmp/print.css is not created
     And a css file tmp/reset.css is not created
@@ -142,7 +124,6 @@ Feature: Command Line
     Then a sass file sass/layout.sass is not mentioned
     And a sass file sass/print.sass is not mentioned
     And a sass file sass/reset.sass is not mentioned
-    And a sass file sass/utilities.scss is reported compiled
     And a css file tmp/utilities.css is reported created
     And a css file tmp/utilities.css is created
 
@@ -153,7 +134,6 @@ Feature: Command Line
     Then a sass file sass/layout.sass is not mentioned
     And a sass file sass/print.sass is not mentioned
     And a sass file sass/reset.sass is not mentioned
-    And a sass file sass/utilities.scss is reported compiled
     And a css file tmp/utilities.css is reported identical
 
   Scenario: Installing a pattern into a project
@@ -191,7 +171,6 @@ Feature: Command Line
     And I wait 1 second
     And I touch sass/layout.sass
     And I run: compass compile
-    Then a sass file sass/layout.sass is reported compiled
     Then a css file tmp/layout.css is reported identical
     And a sass file sass/print.sass is reported unchanged
     And a sass file sass/reset.sass is reported unchanged
@@ -203,7 +182,6 @@ Feature: Command Line
     And I wait 1 second
     And I add some sass to sass/layout.sass
     And I run: compass compile
-    Then a sass file sass/layout.sass is reported compiled
     And a css file tmp/layout.css is reported overwritten
     And a sass file sass/print.sass is reported unchanged
     And a sass file sass/reset.sass is reported unchanged

data/features/step_definitions/command_line_steps.rb

@@ -115,23 +115,23 @@ Then /an? \w+ file ([^ ]+) is (not )?created/ do |filename, negated|
 end
 
 Then /an? \w+ file ([^ ]+) is reported created/ do |filename|
-  @last_result.should =~ /create #{Regexp.escape(filename)}/
+  @last_result.should =~ /create.*#{Regexp.escape(filename)}/
 end
 
 Then /a \w+ file ([^ ]+) is (?:reported )?compiled/ do |filename|
-  @last_result.should =~ /compile #{Regexp.escape(filename)}/
+  @last_result.should =~ /compile.*#{Regexp.escape(filename)}/
 end
 
 Then /a \w+ file ([^ ]+) is reported unchanged/ do |filename|
-  @last_result.should =~ /unchanged #{Regexp.escape(filename)}/
+  @last_result.should =~ /unchanged.*#{Regexp.escape(filename)}/
 end
 
 Then /a \w+ file ([^ ]+) is reported identical/ do |filename|
-  @last_result.should =~ /identical #{Regexp.escape(filename)}/
+  @last_result.should =~ /identical.*#{Regexp.escape(filename)}/
 end
 
 Then /a \w+ file ([^ ]+) is reported overwritten/ do |filename|
-  @last_result.should =~ /overwrite #{Regexp.escape(filename)}/
+  @last_result.should =~ /overwrite.*#{Regexp.escape(filename)}/
 end
 
 Then /a \w+ file ([^ ]+) is not mentioned/ do |filename|

data/frameworks/blueprint/templates/project/screen.sass

@@ -11,10 +11,9 @@
 // configuration applied, uncomment:
 // @include blueprint
 
-// But Compass recommends that you scope your blueprint styles
-// So that you can better control what pages use blueprint
-// when stylesheets are concatenated together.
-+blueprint-scaffolding("body.bp")
+// If you are doing a lot of stylesheet concatenation, it is suggested
+// that you scope your blueprint styles, so that you can better control
+// what pages use blueprint when stylesheets are concatenated together.
 body.bp
   +blueprint-typography(true)
   +blueprint-utilities
@@ -24,6 +23,8 @@ body.bp
   // Or leave it in if you're happy with how blueprint looks out-of-the-box
 form.bp
   +blueprint-form
+  // You'll probably want to remove the scaffolding once you start styling your site.
+  +blueprint-scaffolding
 
 // Page layout can be done using mixins applied to your semantic classes and IDs:
 body.two-col

data/frameworks/blueprint/templates/semantic/partials/_page.sass

@@ -11,8 +11,7 @@ body.bp
   +blueprint-utilities
   +blueprint-debug
   +blueprint-interaction
-
-// Remove the scaffolding when you're ready to start doing visual design.
-// Or leave it in if you're happy with how blueprint looks out-of-the-box
-+blueprint-scaffolding("body.bp")
+  // Remove the scaffolding when you're ready to start doing visual design.
+  // Or leave it in if you're happy with how blueprint looks out-of-the-box
+  +blueprint-scaffolding
 

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

@@ -1 +1,16 @@
-@import "css3/version-1";
+@import "css3/border-radius";
+@import "css3/inline-block";
+@import "css3/opacity";
+@import "css3/box-shadow";
+@import "css3/text-shadow";
+@import "css3/columns";
+@import "css3/box-sizing";
+@import "css3/box";
+@import "css3/gradient";
+@import "css3/images";
+@import "css3/background-clip";
+@import "css3/background-origin";
+@import "css3/background-size";
+@import "css3/font-face";
+@import "css3/transform";
+@import "css3/transition";

data/frameworks/compass/stylesheets/compass/_support.scss

@@ -27,3 +27,5 @@ $experimental-support-for-khtml     : true !default;
 // Setting this to true might add significant size to your
 // generated stylesheets.
 $experimental-support-for-svg     : false !default;
+// Support for CSS PIE in experimental css3 properties.
+$experimental-support-for-pie     : false !default;

data/frameworks/compass/stylesheets/compass/css3/_background-clip.scss

@@ -5,7 +5,7 @@
 // If you wish to do so, you can override the default constant with `border-box`
 //
 // To override to the default border-box model, use this code:
-//     $default-background-clip = border-box
+//     $default-background-clip: border-box
 
 $default-background-clip: padding-box !default;
 

data/frameworks/compass/stylesheets/compass/css3/_box-shadow.scss

@@ -1,17 +1,90 @@
-@import "box-shadow-v2";
+// @doc off
+// These defaults make the arguments optional for this mixin
+// If you like, set different defaults before importing.
+// @doc on
 
-// This mixin is deprecated.
-// Use the box-shadow mixin from compass/css3/box-shadow-v2 instead.
-// @deprecated
+@import "shared";
+
+
+// The default color for box shadows
+$default-box-shadow-color: #333333 !default;
+
+// The default horizontal offset. Positive is to the right.
+$default-box-shadow-h-offset: 0px !default;
+
+// The default vertical offset. Positive is down.
+$default-box-shadow-v-offset: 0px !default;
+
+// The default blur length.
+$default-box-shadow-blur: 5px !default;
+
+// The default spread length.
+$default-box-shadow-spread : false !default;
+
+// The default shadow inset: inset or false (for standard shadow).
+$default-box-shadow-inset : false !default;
+
+// Provides cross-browser for Webkit, Gecko, and CSS3 box shadows when one or more box shadows are needed.
 @mixin box-shadow(
-  $color  : $default-box-shadow-color, 
-  $hoff   : $default-box-shadow-h-offset, 
-  $voff   : $default-box-shadow-v-offset, 
-  $blur   : $default-box-shadow-blur, 
-  $spread : $default-box-shadow-spread, 
-  $inset  : $default-box-shadow-inset
+  $shadow-1 : default,
+  $shadow-2 : false,
+  $shadow-3 : false,
+  $shadow-4 : false,
+  $shadow-5 : false,
+  $shadow-6 : false,
+  $shadow-7 : false,
+  $shadow-8 : false,
+  $shadow-9 : false,
+  $shadow-10: false
 ) {
-  @warn "This version of the box-shadow mixin has been deprecated. Please read: http://compass-style.org/docs/upgrading/css3-v2/#box-shadow for details.";
-  @include single-box-shadow($color, $hoff, $voff, $blur, $spread, $inset);
+  // This has to be on a single line due to a bug in the scss parser: https://github.com/nex3/sass/issues/issue/26
+  $legacy: (type-of($shadow-1) == color and type-of(if($shadow-2, $shadow-2, 0)) == number and type-of(if($shadow-3, $shadow-3, 0)) == number and type-of(if($shadow-4, $shadow-4, 0)) == number and type-of(if($shadow-5, $shadow-5, 0)) == number and ($shadow-6 == inset or type-of($shadow-6) == bool) and ($shadow-2 or $shadow-3 or $shadow-4 or $shadow-5 or $shadow-6));
+  @if $legacy {
+    @warn "Passing separate arguments for a single shadow to box-shadow is deprecated. " +
+          "Pass the values as a single space-separated list, or use the single-box-shadow mixin. " +
+          "See http://beta.compass-style.org/help/tutorials/upgrading/antares/ for more info.";
+    @include single-box-shadow(
+      if($shadow-1, $shadow-1, $default-box-shadow-color),
+      if($shadow-2, $shadow-2, $default-box-shadow-h-offset),
+      if($shadow-3, $shadow-3, $default-box-shadow-v-offset),
+      if($shadow-4, $shadow-4, $default-box-shadow-blur),
+      if($shadow-5, $shadow-5, $default-box-shadow-spread),
+      if($shadow-6, $shadow-6, $default-box-shadow-inset)
+    );
+  }
+  @else {
+    @if $shadow-1 == default {
+      $shadow-1 : -compass-space-list(compact(if($default-box-shadow-inset, inset), $default-box-shadow-h-offset, $default-box-shadow-v-offset, $default-box-shadow-blur, $default-box-shadow-spread, $default-box-shadow-color));
+    }
+    $shadow : compact($shadow-1, $shadow-2, $shadow-3, $shadow-4, $shadow-5, $shadow-6, $shadow-7, $shadow-8, $shadow-9, $shadow-10);
+    @include experimental(box-shadow, $shadow,
+      -moz, -webkit, -o, not -ms, not -khtml, official
+    );
+  }
 }
 
+// Provides a single cross-browser CSS box shadow for Webkit, Gecko, and CSS3.
+// Includes default arguments for color, horizontal offset, vertical offset, blur length, spread length, and inset.
+@mixin single-box-shadow(
+  $color  : $default-box-shadow-color,
+  $hoff   : $default-box-shadow-h-offset,
+  $voff   : $default-box-shadow-v-offset,
+  $blur   : $default-box-shadow-blur,
+  $spread : $default-box-shadow-spread,
+  $inset  : $default-box-shadow-inset
+) {
+  @if not ($inset == true or $inset == false or $inset == inset) {
+    @warn "$inset expected to be true or the inset keyword. Got #{$inset} instead. Using: inset";
+  }
+
+  @if $color == none {
+    @include box-shadow(none);
+  } @else {
+    $full   : $hoff $voff;
+    @if $blur   { $full: $full $blur;   }
+    @if $spread { $full: $full $spread; }
+    @if $color  { $full: $full $color;  }
+    @if $inset  { $full: inset $full;   }
+    @include box-shadow($full);
+  }
+}