compass 0.13.alpha.4 → 0.13.alpha.5

data/frameworks/compass/stylesheets/compass/css3/_font-face.scss

@@ -1,4 +1,4 @@
-@import "shared";
+@import "compass/support";
 
 // Cross-browser support for @font-face. Supports IE, Gecko, Webkit, Opera.
 //
@@ -16,7 +16,7 @@
 // [font generator](http://www.fontsquirrel.com/fontface/generator)
 //
 
-// In order to refer to a specific style of the font in your stylesheets as 
+// In order to refer to a specific style of the font in your stylesheets as
 // e.g. "font-style: italic;",  you may add a couple of @font-face includes
 // containing the respective font files for each style and specying
 // respective the $style parameter.
@@ -24,8 +24,8 @@
 // Order of the includes matters, and it is: normal, bold, italic, bold+italic.
 
 @mixin font-face(
-  $name, 
-  $font-files, 
+  $name,
+  $font-files,
   $eot: false,
   $weight: false,
   $style: false
@@ -35,7 +35,7 @@
     font-family: quote($name);
     @if $eot {
       src: font-url($eot);
-      $font-files: font-url($iefont) unquote("format('eot')"), $font-files; 
+      $font-files: font-url($iefont) unquote("format('embedded-opentype')"), $font-files;
     }
     src: $font-files;
     @if $weight {

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

@@ -1,11 +1,10 @@
 // Mixins to support specific CSS Text Level 3 elements
 
-@import "shared";
+@import "compass/support";
 
-// @private css3-feature-support variables must always include a list of five boolean values
-// representing in order: -moz, -webkit, -ms, -o, -khtml
-//   - mozilla/webkit legacy support handled seperately below
-$hyphens-support: -moz, -webkit, -ms, -o, not -khtml;
+// The the user threshold for hyphens support.
+// Defaults to `$graceful-usage-threshold`.
+$hyphens-support-threshold: $graceful-usage-threshold;
 
 
 // Mixin for word-break properties
@@ -17,15 +16,17 @@ $hyphens-support: -moz, -webkit, -ms, -o, not -khtml;
 //
 // Which generates:
 //    p.wordBreak {
-//      -ms-word-break: break-all;
 //      word-break: break-all;
 //      word-break: break-word;}
 //
 @mixin word-break($value: normal){
   word-break: $value;
-
-  //Webkit handles break-all differently... as break-word
-  @if $value == break-all { word-break: break-word; }
+  @if $value == break-all {
+    //Webkit handles break-all differently... as break-word
+    @include with-prefix(-webkit) {
+      word-break: break-word;
+    }
+  }
 }
 
 // Mixin for the hyphens property
@@ -43,7 +44,9 @@ $hyphens-support: -moz, -webkit, -ms, -o, not -khtml;
 //    hyphens: auto;}
 //
 @mixin hyphens($value: auto){
-  @include experimental(hyphens, $value, $hyphens-support);
+  @include prefixed-properties(css-hyphens, $hyphens-support-threshold, (
+    hyphens: $value
+  ));
 }
 
 // Mixin for x-browser hyphenation based on @auchenberg's post:
@@ -62,7 +65,7 @@ $hyphens-support: -moz, -webkit, -ms, -o, not -khtml;
 //      -webkit-hyphens: auto;
 //      hyphens: auto;}
 //
-@mixin hyphenation{
+@mixin hyphenation {
   @include word-break(break-all);
   @include hyphens;
 }

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

@@ -1,6 +1,10 @@
-@import "shared";
+@import "compass/support";
 @import "compass/utilities/general/hacks";
 
+$gradient-support-threshold: $graceful-usage-threshold !default;
+$svg-gradient-shim-threshold: 10.0 !default;
+$border-image-support-threshold: $graceful-usage-threshold !default;
+
 // Compass assumes you will use the official gradient syntax,
 // unless otherwise instructed.
 $use-legacy-gradient-syntax: false !default;
@@ -23,44 +27,66 @@ $use-legacy-gradient-syntax: false !default;
   }
 }
 
+// These browsers support svg but not gradients
+// so we can shim the gradient with an inline svg file.
+$browsers-supporting-svg-but-not-gradients: (ie: "9", opera: "9.5-9.6");
+
+@mixin each-gradient-prefix($values) {
+  @if prefixed(-svg, $values) {
+    @include for-legacy-browsers($browsers-supporting-svg-but-not-gradients,
+                                 $svg-gradient-shim-threshold)
+    {
+      @include with-prefix(-svg) {
+        @content;
+      }
+    }
+  }
+  @include with-each-prefix(css-gradients, $gradient-support-threshold) {
+    @if $current-prefix {
+      @if prefixed($current-prefix, $values) {
+        @content;
+      } @else if $debug-browser-support {
+        /* There is not a value that needs to be prefixed with #{$current-prefix} in: #{$values} */
+      }
+    } @else {
+      @content;
+    }
+  }
+}
+
+@mixin image-property($property, $values...) {
+  @include each-gradient-prefix($values) {
+    @if $current-prefix {
+      #{$property}: prefix($current-prefix, $values);
+    } @else {
+      #{$property}: $values;
+    }
+    @content;
+  }
+}
+
 // Background property support for vendor prefixing within values.
-@mixin background(
-  $backgrounds...
-) {
-  $mult-bgs: -compass-list-size($backgrounds) > 1;
-  $add-pie-bg: prefixed(-pie,   $backgrounds) or $mult-bgs;
-  @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 $add-pie-bg                     { -pie-background:    -pie($backgrounds); }
-                                                                                        background:         $backgrounds ;
+@mixin background($backgrounds...) {
+  @include image-property(background, $backgrounds...);
 }
 
 // Set any number of background layers, along with a fallback.
 // The final argument will be output separately, first, as a css2 fallback.
-@mixin background-with-css2-fallback(
-  $backgrounds...
-) {
-  $mult-bgs: -compass-list-size($backgrounds) > 1;
-  $simple-background: if($mult-bgs or prefixed(-css2, $backgrounds), -css2(-compass-nth($backgrounds, last)), false);
-  @if not blank($simple-background) { background: $simple-background; }
-  @include background($backgrounds);
+@mixin background-with-css2-fallback($backgrounds...) {
+  @if length($backgrounds) > 1 or prefixed(-css2, $backgrounds) {
+    background: -css2(nth($backgrounds, -1));
+  }
+  @include background($backgrounds...);
 }
 
 
 // Background image property support for vendor prefixing within values.
-@mixin background-image(
-  $images...
-) {
-  $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 $add-pie-bg                { @warn "PIE does not support background-image. Use @include background(#{$images}) instead." }
-                                                                              background-image:         $images ;
+@mixin background-image($images...) {
+  @include image-property(background-image, $images...) {
+    @if $current-prefix == -svg {
+      background-size: 100%;
+    }
+  }
 }
 
 // Emit a IE-Specific filters that renders a simple linear gradient.
@@ -74,56 +100,40 @@ $use-legacy-gradient-syntax: false !default;
   $end-color,
   $orientation: vertical
 ) {
-  @include has-layout;
-  $gradient-type: if($orientation == vertical, 0, 1);
-  @if $legacy-support-for-ie6 or $legacy-support-for-ie7 or $legacy-support-for-ie8 {
+  @include for-legacy-browsers((ie: "8"), $gradient-support-threshold) {
+    @include has-layout;
+    $gradient-type: if($orientation == vertical, 0, 1);
     filter: progid:DXImageTransform.Microsoft.gradient(gradientType=#{$gradient-type}, startColorstr='#{ie-hex-str($start-color)}', endColorstr='#{ie-hex-str($end-color)}');
   }
 }
 
 
 // Border image property support for vendor prefixing properties and values.
-@mixin border-image(
-  $value
-) {
-  @if $experimental-support-for-mozilla      {    -moz-border-image:    -moz(reject(-compass-list($value), fill)); }
-  @if $experimental-support-for-webkit       { -webkit-border-image: -webkit(reject(-compass-list($value), fill)); }
-  @if $experimental-support-for-opera        {      -o-border-image:      -o(reject(-compass-list($value), fill)); }
-  @if $experimental-support-for-svg          {         border-image:    -svg(reject(-compass-list($value), fill)); }
-                                                       border-image:                              $value;
+@mixin border-image($value) {
+  @include with-each-prefix(border-image, $border-image-support-threshold) {
+    $border-prefix: $current-prefix;
+    @include each-gradient-prefix($value) {
+      @if $current-prefix and prefixed($current-prefix, $value) {
+        $legacy-value: reject($value, fill);
+        @include prefix-prop(border-image, prefix($current-prefix, $legacy-value), $prefix: $border-prefix);
+      } @else {
+        @include prefix-prop(border-image, $value, $prefix: $border-prefix);
+      }
+    }
+  }
 }
 
 // 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 ;
+@mixin list-style-image($image) {
+  @include image-property(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 ;
+@mixin list-style($value) {
+  @include image-property(list-style, $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 ;
+@mixin content($value) {
+  @include image-property(content, $value);
 }

data/frameworks/compass/stylesheets/compass/css3/_inline-block.scss

@@ -1,4 +1,8 @@
-@import "shared";
+@import "compass/support";
+
+// The legacy support for inline-block.
+// Defaults to the $graceful-usage-threshold.
+$inline-block-support-threshold: $graceful-usage-threshold !default;
 
 // Set `$inline-block-alignment` to `none` or `false` to disable the output
 // of a vertical-align property in the inline-block mixin.
@@ -6,17 +10,22 @@
 $inline-block-alignment: middle !default;
 
 // Provides a cross-browser method to implement `display: inline-block;`
-@mixin inline-block($alignment: $inline-block-alignment) {
-  @if $legacy-support-for-mozilla {
+@mixin inline-block($alignment: $inline-block-alignment, $ie-alignment: auto) {
+  // legacy support for VERY old firefox
+  @if support-legacy-browser("firefox", "2", $inline-block-support-threshold) {
     display: -moz-inline-stack;
   }
+  // standard
   display: inline-block;
   @if $alignment and $alignment != none {
     vertical-align: $alignment;
   }
-  @if $legacy-support-for-ie6 or $legacy-support-for-ie7 {
-    *vertical-align: auto;
-    zoom: 1;
+  // legacy IE support
+  @if support-legacy-browser("ie", "7", $inline-block-support-threshold) {
+    @if $ie-alignment and $ie-alignment != none {
+      *vertical-align: $ie-alignment;
+    }
+    *zoom: 1;
     *display: inline;
   }
 }

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

@@ -1,4 +1,8 @@
-@import "shared";
+@import "compass/support";
+
+// The support usage threshold for opacity. Defaults to the global
+// threshold for graceful degradation.
+$opacity-usage-threshold: $graceful-usage-threshold;
 
 // Provides cross-browser CSS opacity. Takes a number between 0 and 1 as the argument, e.g. 0.5 for 50% opacity.
 //
@@ -6,7 +10,7 @@
 //         A number between 0 and 1, where 0 is transparent and 1 is opaque.
 
 @mixin opacity($opacity) {
-  @if $legacy-support-for-ie6 or $legacy-support-for-ie7 or $legacy-support-for-ie8 {
+  @include for-legacy-browser("ie", "8", $opacity-usage-threshold) {
     filter: unquote("progid:DXImageTransform.Microsoft.Alpha(Opacity=#{round($opacity * 100)})");
   }
   opacity: $opacity;

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

@@ -1,73 +1 @@
-$experimental-support-for-pie: true;
-
-// It is recommended that you use Sass's @extend directive to apply the behavior
-// to your PIE elements. To assist you, Compass provides this variable.
-// When set, it will cause the `@include pie` mixin to extend this class.
-// The class name you provide should **not** include the `.`.
-$pie-base-class: false !default;
-
-// The default approach to using PIE.
-// Can be one of:
-//
-// * relative (default)
-// * z-index
-// * none
-$pie-default-approach: relative !default;
-
-// The location of your PIE behavior file
-// This should be root-relative to your web server
-// relative assets don't work. It is recommended that
-// you set this yourself.
-$pie-behavior: stylesheet-url("PIE.htc") !default;
-
-// When using the z-index approach, the
-// first ancestor of the PIE element at
-// or before the container's opaque background
-// should have a z-index set as well to ensure
-// propert z-index stacking.
-//
-// The `$position` argument must be some non-static
-// value (absolute, relative, etc.)
-@mixin pie-container($z-index: 0, $position: relative) {
-  z-index: $z-index;
-  position: $position;
-}
-
-// PIE elements must have this behavior attached to them.
-// IE is broken -- it doesn't think of behavior urls as
-// relative to the stylesheet. It considers them relative
-// to the webpage. As a result, you cannot reliably use
-// compass's relative_assets with PIE.
-// 
-// * `$approach` - one of: relative, z-index, or none
-// * `$z-index` - when using the z-index approach, this
-//                is the z-index that is applied.
-@mixin pie-element(
-  $approach: $pie-default-approach,
-  $z-index: 0
-) {
-  behavior: $pie-behavior;
-  @if $approach == relative {
-    position: relative;
-  }
-  @else if $approach == z-index {
-    z-index: $z-index;
-  }
-}
-
-// a smart mixin that knows to extend or include pie-element according
-// to your stylesheet's configuration variables.
-@mixin pie($base-class: $pie-base-class) {
-  @if $base-class {
-    @extend .#{$base-class};
-  }
-  @else {
-    @include pie-element;
-  }
-}
-
-// Watch `$n` levels of ancestors for changes to their class attribute
-// So that cascading styles will work correctly on the PIE element.
-@mixin pie-watch-ancestors($n) {
-  -pie-watch-ancestors: $n;
-}
+@warn "Support for CSS3Pie has been removed.";

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

@@ -1,10 +1,11 @@
 // Regions
 
-@import "shared";
+@import "compass/support";
+
+// The prefixed support threshold for css regions.
+// Defaults to the $graceful-usage-threshold.
+$regions-support-threshold: $graceful-usage-threshold !default;
 
-// @private css3-feature-support variables must always include a list of five boolean values
-// representing in order: -moz, -webkit, -ms, -o, -khtml.
-$regions-support: not -moz, -webkit, -ms, not -o, not -khtml;
 
 // Webkit, IE10 and future support for [CSS Regions](http://dev.w3.org/csswg/css3-regions/)
 //
@@ -17,10 +18,10 @@ $regions-support: not -moz, -webkit, -ms, not -o, not -khtml;
 
 @mixin flow-into($target) {
   $target: unquote($target);
-  @include experimental(flow-into, $target, $regions-support...);
+  @include prefixed-properties(css-regions, $regions-support-threshold, (flow-into: $target));
 }
 
 @mixin flow-from($target) {
   $target: unquote($target);
-  @include experimental(flow-from, $target, $regions-support...);
+  @include prefixed-properties(css-regions, $regions-support-threshold, (flow-from: $target));
 }

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

@@ -1,30 +1,58 @@
-@import "shared";
+@import "compass/support";
+@import "compass/utilities/color";
 
-// Add the selection selector to any element
+// The prefixed support threshold for ::selection.
+// Defaults to the $graceful-usage-threshold.
+$selection-support-threshold: $graceful-usage-threshold !default;
+
+// Style selected text.
+//
+// At this time, only two CSS properties are supported in most browsers
+// during selection: color and background-color. Firefox supports the
+// text-shadow property.
+//
+// At the stylesheet root, include the mixin within the * selector.
+//
+//     * {
+//       @include selection(#fe57a1, #fff)
+//     }
 //
-// There are two usage modes: at the stylesheet root, include the mixin with
-// styles passed as mixin content. This applies to all elements. For example:
+// If a specific element or selector's selection is being styled
+// you can use that selector instead. For example:
 //
-//     @include selection {
-//       background-color: #fe57a1;
-//       color: #fff;
+//     .hot-pink {
+//       @include selection(#fe57a1, #fff)
 //     }
 //
-// If a specific element is being styled, pass "&" as an argument to the mixin
-// as well. For example:
+// These properties can be passed as arguments or you can set them via mixin
+// content.
+//
+// For future-forward compatibility with other properties and aesthetic freedom,
+// a mixin content block can be passed to this mixin in addition to or in place of
+// passing arguments.
 //
 //     .hot-pink {
-//       @include selection("&") {
-//         background-color: #fe57a1;
+//       @include selection {
+//         background: #fe57a1;
 //         color: #fff;
 //       }
 //     }
-@mixin selection($selector: "") {
-  #{$selector}::selection {
-    @content;
-  }
-  @if $experimental-support-for-mozilla {
-    #{$selector}::-moz-selection {
+//
+// When `$background-color` is specified, but `$color` is not, this mixin
+// styles the foreground color like the [contrasted
+// mixin](/reference/compass/utilities/color/contrast/#mixin-contrasted).  To
+// specify only the background-color, you should pass an explicit `null` value
+// for `$color` or use mixin content.
+@mixin selection($background-color: null, $color: contrast-color($background-color)) {
+  @include with-each-prefix(css-selection, $selection-support-threshold) {
+    $selector: '';
+    @if $current-prefix != null {
+      $selector: $current-prefix + '-';
+    }
+    $selector: "&::#{$selector}selection";
+    #{$selector} {
+      color: $color;
+      background-color: $background-color;
       @content;
     }
   }