compass 0.11.beta.6 → 0.11.beta.7

data/VERSION.yml

@@ -2,4 +2,4 @@
 :major: 0
 :minor: 11
 :state: beta
-:build: 6
+:build: 7

data/frameworks/blueprint/stylesheets/blueprint/_debug.scss

@@ -1,8 +1,25 @@
-@mixin showgrid($image: "grid.png") {
-  background: image-url($image);
+@import "compass/layout/grid-background";
+@import "blueprint/grid";
+
+// Shows a background that can be used to check grid alignment.
+// By default this is a pure css version that only works in browsers
+// that support gradients and multiple backgrounds, but you can pass
+// an image url if you prefer.
+@mixin showgrid($image: false) {
+  @if $image {
+    background: image-url($image);
+  }
+  @else {
+    @include grid-background(
+      $total    : $blueprint-grid-columns,
+      $column   : $blueprint-grid-width,
+      $gutter   : $blueprint-grid-margin,
+      $baseline : 20px
+    );
+  }
 }
 
-@mixin blueprint-debug($grid-image: "grid.png") {
+@mixin blueprint-debug($grid-image: false) {
   // Use this class on any column or container to see the grid.
   // TODO: prefix this with the project path.
   .showgrid {

data/frameworks/compass/stylesheets/compass/_layout.scss

@@ -1,2 +1,3 @@
+@import "layout/grid-background";
 @import "layout/sticky-footer";
 @import "layout/stretching";

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

@@ -17,18 +17,22 @@ $legacy-support-for-ie8: $legacy-support-for-ie !default;
 $legacy-support-for-ie: $legacy-support-for-ie6 or $legacy-support-for-ie7 or $legacy-support-for-ie8;
 
 // Support for mozilla in experimental css3 properties.
-$experimental-support-for-mozilla   : true !default;
+$experimental-support-for-mozilla      : true !default;
 // Support for webkit in experimental css3 properties.
-$experimental-support-for-webkit    : true !default;
+$experimental-support-for-webkit       : true !default;
+// Support for webkit in experimental css3 properties.
+$experimental-support-for-webkit       : true !default;
+// Support for webkit's original (non-standard) gradient syntax.
+$support-for-original-webkit-gradients : true !default;
 // Support for opera in experimental css3 properties.
-$experimental-support-for-opera     : true !default;
+$experimental-support-for-opera        : true !default;
 // Support for microsoft in experimental css3 properties.
-$experimental-support-for-microsoft : true !default;
+$experimental-support-for-microsoft    : true !default;
 // Support for khtml in experimental css3 properties.
-$experimental-support-for-khtml     : true !default;
+$experimental-support-for-khtml        : true !default;
 // Support for svg in experimental css3 properties.
 // Setting this to true might add significant size to your
 // generated stylesheets.
-$experimental-support-for-svg     : false !default;
+$experimental-support-for-svg          : false !default;
 // Support for CSS PIE in experimental css3 properties.
-$experimental-support-for-pie     : false !default;
+$experimental-support-for-pie          : false !default;

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

@@ -8,9 +8,19 @@ $default-background-size: 100% auto !default;
 //
 // * percentages are relative to the background-origin (default = padding-box)
 // * mixin defaults to: `$default-background-size`
-@mixin background-size($size: $default-background-size) {
-  @if type-of($size) == string {
-    $size: unquote($size);
-  }
-  @include experimental(background-size, $size, -moz, -webkit, -o, not -ms, not -khtml);
+@mixin background-size(
+  $size-1: $default-background-size,
+  $size-2: false,
+  $size-3: false,
+  $size-4: false,
+  $size-5: false,
+  $size-6: false,
+  $size-7: false,
+  $size-8: false,
+  $size-9: false,
+  $size-10: false
+) {
+  $size-1: if(type-of($size-1) == string, unquote($size-1), $size-1);
+  $sizes: compact($size-1, $size-2, $size-3, $size-4, $size-5, $size-6, $size-7, $size-8, $size-9, $size-10);
+  @include experimental(background-size, $sizes, -moz, -webkit, -o, not -ms, not -khtml);
 }

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

@@ -1,4 +1,5 @@
 @import "shared";
+@import "compass/utilities/general/hacks";
 
 // Background property support for vendor prefixing within values.
 @mixin background(
@@ -16,12 +17,14 @@
   $backgrounds: compact($background-1, $background-2, $background-3, $background-4, $background-5,
                         $background-6, $background-7, $background-8, $background-9, $background-10);
   $mult-bgs: -compass-list-size($backgrounds) > 1;
-  @if $experimental-support-for-svg     and prefixed(-svg,    $backgrounds)               {       background:    -svg($backgrounds); }
-  @if $experimental-support-for-webkit  and prefixed(-webkit, $backgrounds)               {       background: -webkit($backgrounds); }
-  @if $experimental-support-for-mozilla and prefixed(-moz,    $backgrounds)               {       background:    -moz($backgrounds); }
-  @if $experimental-support-for-opera   and prefixed(-o,      $backgrounds)               {       background:      -o($backgrounds); }
-  @if $experimental-support-for-pie     and (prefixed(-pie,   $backgrounds) or $mult-bgs) {  -pie-background:    -pie($backgrounds); }
-                                                                                                  background:         $backgrounds;
+  $add-pie-bg: prefixed(-pie,   $backgrounds) or $mult-bgs;
+  @if $experimental-support-for-svg          and prefixed(-svg,    $backgrounds) {      background:    -svg($backgrounds); }
+  @if $support-for-original-webkit-gradients and prefixed(-owg,    $backgrounds) {      background:    -owg($backgrounds); }
+  @if $experimental-support-for-webkit       and prefixed(-webkit, $backgrounds) {      background: -webkit($backgrounds); }
+  @if $experimental-support-for-mozilla      and prefixed(-moz,    $backgrounds) {      background:    -moz($backgrounds); }
+  @if $experimental-support-for-opera        and prefixed(-o,      $backgrounds) {      background:      -o($backgrounds); }
+  @if $experimental-support-for-pie          and $add-pie-bg                     { -pie-background:    -pie($backgrounds); }
+                                                                                        background:         $backgrounds ;
 }
 
 @mixin background-with-css2-fallback(
@@ -60,13 +63,15 @@
   $image-10: false
 ) {
   $images: compact($image-1, $image-2, $image-3, $image-4, $image-5, $image-6, $image-7, $image-8, $image-9, $image-10);
+  $add-pie-bg: prefixed(-pie,   $images) or -compass-list-size($images) > 1;
 
-  @if $experimental-support-for-svg     and prefixed(-svg,    $images) { background-image:    -svg($images); background-size: 100%; }
-  @if $experimental-support-for-webkit  and prefixed(-webkit, $images) { background-image: -webkit($images); }
-  @if $experimental-support-for-mozilla and prefixed(-moz,    $images) { background-image:    -moz($images); }
-  @if $experimental-support-for-opera   and prefixed(-o,      $images) { background-image:      -o($images); }
-  @if $experimental-support-for-pie     and (prefixed(-pie,   $images) or -compass-list-size($images) > 1) { @warn "PIE does not support background-image. Use @include background(#{$images}) instead." }
-                                                                         background-image:         $images ;
+  @if $experimental-support-for-svg          and prefixed(-svg,    $images) { background-image:    -svg($images); background-size: 100%; }
+  @if $support-for-original-webkit-gradients and prefixed(-owg,    $images) { background-image:    -owg($images); }
+  @if $experimental-support-for-webkit       and prefixed(-webkit, $images) { background-image: -webkit($images); }
+  @if $experimental-support-for-mozilla      and prefixed(-moz,    $images) { background-image:    -moz($images); }
+  @if $experimental-support-for-opera        and prefixed(-o,      $images) { background-image:      -o($images); }
+  @if $experimental-support-for-pie          and $add-pie-bg                { @warn "PIE does not support background-image. Use @include background(#{$images}) instead." }
+                                                                              background-image:         $images ;
 }
 
 // Emit a IE-Specific filters that renders a simple linear gradient.
@@ -87,38 +92,42 @@
 
 // Border image property support for vendor prefixing properties and values.
 @mixin border-image($value) {
-  @if $experimental-support-for-mozilla {    -moz-border-image:    -moz(-compass-list($value)); }
-  @if $experimental-support-for-webkit  { -webkit-border-image: -webkit(-compass-list($value)); }
-  @if $experimental-support-for-opera   {      -o-border-image:      -o(-compass-list($value)); }
-  @if $experimental-support-for-svg     {         border-image:    -svg(-compass-list($value)); }
-                                                  border-image:                       $value;
+  @if $experimental-support-for-mozilla      {    -moz-border-image:    -moz(-compass-list($value)); }
+  @if $support-for-original-webkit-gradients { -webkit-border-image:    -owg(-compass-list($value)); }
+  @if $experimental-support-for-webkit       { -webkit-border-image: -webkit(-compass-list($value)); }
+  @if $experimental-support-for-opera        {      -o-border-image:      -o(-compass-list($value)); }
+  @if $experimental-support-for-svg          {         border-image:    -svg(-compass-list($value)); }
+                                                       border-image:                       $value;
 }
 
 // List style image property support for vendor prefixing within values.
 @mixin list-style-image($image) {
-  @if $experimental-support-for-mozilla and prefixed(-moz,    $image) { list-style-image:    -moz($image); }
-  @if $experimental-support-for-webkit  and prefixed(-webkit, $image) { list-style-image: -webkit($image); }
-  @if $experimental-support-for-opera   and prefixed(-o,      $image) { list-style-image:      -o($image); }
-  @if $experimental-support-for-svg     and prefixed(-svg,    $image) { list-style-image:    -svg($image); }
-                                                                        list-style-image:         $image ;
+  @if $experimental-support-for-mozilla      and prefixed(-moz,    $image) { list-style-image:    -moz($image); }
+  @if $support-for-original-webkit-gradients and prefixed(-owg,    $image) { list-style-image:    -owg($image); }
+  @if $experimental-support-for-webkit       and prefixed(-webkit, $image) { list-style-image: -webkit($image); }
+  @if $experimental-support-for-opera        and prefixed(-o,      $image) { list-style-image:      -o($image); }
+  @if $experimental-support-for-svg          and prefixed(-svg,    $image) { list-style-image:    -svg($image); }
+                                                                             list-style-image:         $image ;
 }
 
 // List style property support for vendor prefixing within values.
 @mixin list-style($value) {
   $value: -compass-list($value);
-  @if $experimental-support-for-mozilla and prefixed(-moz,    $value) { list-style-image:    -moz($value); }
-  @if $experimental-support-for-webkit  and prefixed(-webkit, $value) { list-style-image: -webkit($value); }
-  @if $experimental-support-for-opera   and prefixed(-o,      $value) { list-style-image:      -o($value); }
-  @if $experimental-support-for-svg     and prefixed(-svg,    $value) { list-style-image:    -svg($value); }
-                                                                        list-style-image:         $value ;
+  @if $experimental-support-for-mozilla      and prefixed(-moz,    $value) { list-style-image:    -moz($value); }
+  @if $support-for-original-webkit-gradients and prefixed(-owg,    $value) { list-style-image:    -owg($value); }
+  @if $experimental-support-for-webkit       and prefixed(-webkit, $value) { list-style-image: -webkit($value); }
+  @if $experimental-support-for-opera        and prefixed(-o,      $value) { list-style-image:      -o($value); }
+  @if $experimental-support-for-svg          and prefixed(-svg,    $value) { list-style-image:    -svg($value); }
+                                                                             list-style-image:         $value ;
 }
 
 // content property support for vendor prefixing within values.
 @mixin content($value) {
   $value: -compass-list($value);
-  @if $experimental-support-for-mozilla and prefixed(-moz,    $value) { content:    -moz($value); }
-  @if $experimental-support-for-webkit  and prefixed(-webkit, $value) { content: -webkit($value); }
-  @if $experimental-support-for-opera   and prefixed(-o,      $value) { content:      -o($value); }
-  @if $experimental-support-for-svg     and prefixed(-svg,    $value) { content:    -svg($value); }
-                                                                        content:         $value ;
+  @if $experimental-support-for-mozilla      and prefixed(-moz,    $value) { content:    -moz($value); }
+  @if $support-for-original-webkit-gradients and prefixed(-owg,    $value) { content:    -owg($value); }
+  @if $experimental-support-for-webkit       and prefixed(-webkit, $value) { content: -webkit($value); }
+  @if $experimental-support-for-opera        and prefixed(-o,      $value) { content:      -o($value); }
+  @if $experimental-support-for-svg          and prefixed(-svg,    $value) { content:    -svg($value); }
+                                                                             content:         $value ;
 }

data/frameworks/compass/stylesheets/compass/layout/_grid-background.scss

@@ -0,0 +1,160 @@
+@import "compass/css3/images";
+@import "compass/css3/background-size";
+
+// Set the color of your columns
+$grid-background-column-color     : rgba(100, 100, 225, 0.25)    !default;
+// Set the color of your gutters
+$grid-background-gutter-color     : rgba(0, 0, 0, 0)             !default;
+
+// Set the total number of columns in your grid
+$grid-background-total-columns    : 24                           !default;
+// Set the width of your columns
+$grid-background-column-width     : 30px                         !default;
+// Set the width of your gutters
+$grid-background-gutter-width     : 10px                         !default;
+// Set the offset, if your columns are padded in from the container edge
+$grid-background-offset           : 0px                          !default;
+
+// Set the color of your baseline
+$grid-background-baseline-color   : rgba(0, 0, 0, 0.5)           !default;
+// Set the height of your baseline grid
+$grid-background-baseline-height  : 1.5em                        !default;
+
+// optionally force your grid-image to remain fluid
+// no matter what units you used to declared your grid.
+$grid-background-force-fluid      : false                        !default;
+
+
+// Create the gradient needed for baseline grids
+@function get-baseline-gradient(
+  $color : $grid-background-baseline-color
+) {
+  $gradient: linear-gradient(bottom, $color 5%, rgba($color,0) 5%);
+  @return $gradient;
+}
+
+// Create the color-stops needed for horizontal grids
+@function build-grid-background(
+  $total          : $grid-background-total-columns,
+  $column         : $grid-background-column-width,
+  $gutter         : $grid-background-gutter-width,
+  $offset         : $grid-background-offset,
+  $column-color   : $grid-background-column-color,
+  $gutter-color   : $grid-background-gutter-color
+) {
+  $grid: compact();
+  $grid: append($grid, $gutter-color $offset, comma);
+  @for $i from 0 to $total {
+
+    // $a represents the start of this column, initially equal to the offset
+    $a: $offset;
+    @if $i > 0 { $a: $a + (($column + $gutter) * $i); }
+
+    // $g represents the start of this gutter, equal to $a plus one column-width
+    $g: $a + $column;
+
+    // $z represents the end of a gutter, equal to $g plus one gutter-width
+    $z: $g + $gutter;
+
+    @if (unit($a) == "%") and ($i == ($total - 1)) {
+      $z: 100%;
+    }
+
+    // and we add this column/gutter pair to our grid
+    $grid: join($grid, ($column-color $a, $column-color $g, $gutter-color $g, $gutter-color $z));
+  }
+
+  @return $grid;
+}
+
+// Return the gradient needed for horizontal grids
+@function get-column-gradient(
+  $total          : $grid-background-total-columns,
+  $column         : $grid-background-column-width,
+  $gutter         : $grid-background-gutter-width,
+  $offset         : $grid-background-offset,
+  $column-color   : $grid-background-column-color,
+  $gutter-color   : $grid-background-gutter-color,
+  $force-fluid    : $grid-background-force-fluid
+) {
+  $grid: unquote("");
+
+  // don't force fluid grids when they are already fluid.
+  @if unit($column) == "%" { $force-fluid: false; }
+
+  @if $force-fluid {
+    $grid: get-column-fluid-grid($total,$column,$gutter,$offset,$column-color,$gutter-color);
+  } @else {
+    $grid: build-grid-background($total,$column,$gutter,$offset,$column-color,$gutter-color);
+  }
+
+  // return the horizontal grid as a gradient
+  $gradient: linear-gradient(left, $grid);
+  @return $gradient;
+}
+
+// Convert a grid from fixed units into percentages.
+@function get-column-fluid-grid(
+  $total          : $grid-background-total-columns,
+  $column         : $grid-background-column-width,
+  $gutter         : $grid-background-gutter-width,
+  $offset         : $grid-background-offset,
+  $column-color   : $grid-background-column-color,
+  $gutter-color   : $grid-background-gutter-color
+) {
+  $context: ($column * $total) + ($gutter * ($total - 1) + ($offset * 2));
+  $offset: $offset / $context * 100%;
+  $column: $column / $context * 100%;
+  $gutter: $gutter / $context * 100%;
+
+  // return the horizontal grid as a set of color-stops
+  $grid: build-grid-background($total,$column,$gutter,$offset,$column-color,$gutter-color);
+  @return $grid;
+}
+
+
+// Add just the baseline grid to an element's background
+@mixin baseline-grid-background(
+  $baseline : $grid-background-baseline-height,
+  $color    : $grid-background-baseline-color
+) {
+  @include background-image(get-baseline-gradient($color));
+  @include background-size(100% $baseline);
+  background-position: left top;
+}
+
+// Add just the horizontal grid to an element's background
+@mixin column-grid-background(
+  $total          : $grid-background-total-columns,
+  $column         : $grid-background-column-width,
+  $gutter         : $grid-background-gutter-width,
+  $offset         : $grid-background-offset,
+  $column-color   : $grid-background-column-color,
+  $gutter-color   : $grid-background-gutter-color,
+  $force-fluid    : $grid-background-force-fluid
+) {
+  @include background-image(
+    get-column-gradient($total,$column,$gutter,$offset,$column-color,$gutter-color, $force-fluid)
+  );
+  background-position: left top;
+}
+
+// Add both horizontal and baseline grids to an element's background
+@mixin grid-background(
+  $total          : $grid-background-total-columns,
+  $column         : $grid-background-column-width,
+  $gutter         : $grid-background-gutter-width,
+  $baseline       : $grid-background-baseline-height,
+  $offset         : $grid-background-offset,
+  $column-color   : $grid-background-column-color,
+  $gutter-color   : $grid-background-gutter-color,
+  $baseline-color : $grid-background-baseline-color,
+  $force-fluid    : $grid-background-force-fluid
+) {
+  @include background-image(
+    get-baseline-gradient($baseline-color),
+    get-column-gradient($total,$column,$gutter,$offset,$column-color,$gutter-color, $force-fluid)
+  );
+  @include background-size(100% $baseline, auto);
+  background-position: left top;
+}

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

@@ -25,16 +25,16 @@ $base-half-leader: $base-leader / 2;
 @mixin establish-baseline($font-size: $base-font-size) {
   body {
     font-size: $font-size / $ie-font-ratio;
-    @include adjust-leading-to(1, $font-size); 
+    @include adjust-leading-to(1, $font-size);
   }
   html>body {
-    font-size: $font-size; 
-  } 
+    font-size: $font-size;
+  }
 }
 
 // Show a background image that can be used to debug your alignments.
 @mixin debug-vertical-alignment($img: 'underline.png') {
-  background: url($img); 
+  background: url($img);
 }
 
 // Adjust a block to have a different font size and leading to maintain the rhythm.
@@ -44,37 +44,46 @@ $base-half-leader: $base-leader / 2;
 // Use $from_size to adjust from a non-base font-size.
 @mixin adjust-font-size-to($to-size, $lines: ceil($to-size / $base-line-height), $from-size: $base-font-size) {
   font-size: 1em * $to-size / $from-size;
-  @include adjust-leading-to($lines, $to-size); 
+  @include adjust-leading-to($lines, $to-size);
 }
 
 @mixin adjust-leading-to($lines, $font-size: $base-font-size) {
-  line-height: 1em * $lines * $base-line-height / $font-size; 
+  line-height: 1em * $lines * $base-line-height / $font-size;
+}
+
+// Calculate rhythm units
+@function rhythm(
+  $lines: 1,
+  $font-size: $base-font-size
+) {
+  $rhythm: 1em * $lines * $base-line-height / $font-size;
+  @return $rhythm;
 }
 
 // Apply leading whitespace
 @mixin leader($lines: 1, $font-size: $base-font-size, $property: margin) {
-  #{$property}-top: 1em * $lines * $base-line-height / $font-size; 
+  #{$property}-top: rhythm($lines, $font-size);
 }
 
 @mixin padding-leader($lines: 1, $font-size: $base-font-size) {
-  @include leader($lines, $font-size, padding); 
+  @include leader($lines, $font-size, padding);
 }
 
 @mixin margin-leader($lines: 1, $font-size: $base-font-size) {
-  @include leader($lines, $font-size, margin); 
+  @include leader($lines, $font-size, margin);
 }
 
 // Apply trailing whitespace
 @mixin trailer($lines: 1, $font-size: $base-font-size, $property: margin) {
-  #{$property}-bottom: 1em * $lines * $base-line-height / $font-size; 
+  #{$property}-bottom: rhythm($lines, $font-size);
 }
 
 @mixin padding-trailer($lines: 1, $font-size: $base-font-size) {
-  @include trailer($lines, $font-size, padding); 
+  @include trailer($lines, $font-size, padding);
 }
 
 @mixin margin-trailer($lines: 1, $font-size: $base-font-size) {
-  @include trailer($lines, $font-size, margin); 
+  @include trailer($lines, $font-size, margin);
 }
 
 // Whitespace application shortcut
@@ -90,9 +99,9 @@ $base-half-leader: $base-leader / 2;
 @mixin apply-side-rhythm-border($side, $width: 1px, $lines: 1, $font-size: $base-font-size, $border-style: $default-rhythm-border-style) {
   border-#{$side}: {
     style: $border-style;
-    width: 1em * $width / $font-size; 
+    width: 1em * $width / $font-size;
   };
-  padding-#{$side}: 1em / $font-size * ($lines * $base-line-height - $width); 
+  padding-#{$side}: 1em / $font-size * ($lines * $base-line-height - $width);
 }
 
 // Aplly rhythm borders equally to all sides
@@ -100,25 +109,25 @@ $base-half-leader: $base-leader / 2;
   border: {
     style: $border-style;
     width: 1em * $width / $font-size; };
-  padding: 1em / $font-size * ($lines * $base-line-height - $width); 
+  padding: 1em / $font-size * ($lines * $base-line-height - $width);
 }
 
 // Apply a leading rhythm border
 @mixin leading-border($width: 1px, $lines: 1, $font-size: $base-font-size, $border-style: $default-rhythm-border-style) {
-  @include apply-side-rhythm-border(top, $width, $lines, $font-size, $border-style); 
+  @include apply-side-rhythm-border(top, $width, $lines, $font-size, $border-style);
 }
 
 // Apply a trailing rhythm border
 @mixin trailing-border($width: 1px, $lines: 1, $font-size: $base-font-size, $border-style: $default-rhythm-border-style) {
-  @include apply-side-rhythm-border(bottom, $width, $lines, $font-size, $border-style); 
+  @include apply-side-rhythm-border(bottom, $width, $lines, $font-size, $border-style);
 }
 
 // Apply both leading and trailing rhythm borders
 @mixin horizontal-borders($width: 1px, $lines: 1, $font-size: $base-font-size, $border-style: $default-rhythm-border-style) {
   @include leading-border($width, $lines, $font-size, $border-style);
-  @include trailing-border($width, $lines, $font-size, $border-style); 
+  @include trailing-border($width, $lines, $font-size, $border-style);
 }
 
 @mixin h-borders($width: 1px, $lines: 1, $font-size: $base-font-size, $border-style: $default-rhythm-border-style) {
-  @include horizontal-borders($width, $lines, $font-size, $border-style); 
+  @include horizontal-borders($width, $lines, $font-size, $border-style);
 }