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

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

@@ -1,8 +1,8 @@
-@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.
-$animation-support: -moz, -webkit, not -ms, -o, -khtml;
+// The prefixed support threshold for animation.
+// Defaults to the $graceful-usage-threshold.
+$animation-support-threshold: $graceful-usage-threshold !default;
 
 
 // Name of any animation as a string.
@@ -34,88 +34,89 @@ $default-animation-play-state       : null !default;
 //
 //     $name    - The name of your animation.
 //     @content - The keyframes of the animation.
-@mixin keyframes(
-  $name,
-  $moz      : $experimental-support-for-mozilla,
-  $webkit   : $experimental-support-for-webkit,
-  $o        : $experimental-support-for-opera,
-  $khtml    : $experimental-support-for-khtml,
-  $official : true
-) {
-  @if $moz and nth($animation-support,1) {
-    @include with-only-support-for($moz: true) {
-      @-moz-keyframes #{$name} { @content; }
-    }
-  }
-  @if $webkit and nth($animation-support,2) {
-    @include with-only-support-for($webkit: true) {
-      @-webkit-keyframes #{$name} { @content; }
-    }
-  }
-  @if $o and nth($animation-support,4) {
-    @include with-only-support-for($o: true) {
-      @-o-keyframes #{$name} { @content; }
-    }
-  }
-  @if $khtml and nth($animation-support,5) {
-    @include with-only-support-for($khtml: true) {
-      @-khtml-keyframes #{$name} { @content; }
-    }
-  }
-  @if $official {
-    @include with-only-support-for {
-      @keyframes #{$name} { @content; }
-    }
+@mixin keyframes($name, $deprecated-prefixes...) {
+  $warned: warn-about-useless-prefix-arguments($deprecated-prefixes...);
+
+  @include with-each-prefix(css-animation, $animation-support-threshold) {
+    // It would be nice if we could dynamically construct directive names.
+    @if $current-prefix == -moz    { @-moz-keyframes    #{$name} { @content; } }
+    @if $current-prefix == -webkit { @-webkit-keyframes #{$name} { @content; } }
+    @if $current-prefix == -o      { @-o-keyframes      #{$name} { @content; } }
+    @if $current-prefix == -ms     { @-ms-keyframes     #{$name} { @content; } }
+    @if $current-prefix == null    { @keyframes         #{$name} { @content; } }
   }
 }
 
+// @private
+@mixin animation-properties($properties) {
+  @include prefixed-properties(css-animation, $animation-support-threshold, $properties);
+}
+
 
 // Apply any number of animation names.
 @mixin animation-name($name...) {
   $name: set-arglist-default($name, $default-animation-name);
-  @include experimental(animation-name, $name, $animation-support...); }
+  @include animation-properties((animation-name: $name));
+}
 
 // Apply any number of animation durations.
 @mixin animation-duration($duration...) {
   $duration: set-arglist-default($duration, $default-animation-duration);
-  @include experimental(animation-duration, $duration, $animation-support...); }
+  @include animation-properties((animation-duration: $duration));
+}
 
 // Apply any number of animation delays.
 @mixin animation-delay($delay...) {
   $delay: set-arglist-default($delay, $default-animation-delay);
-  @include experimental(animation-delay, $delay, $animation-support...); }
+  @include animation-properties((animation-delay: $delay));
+}
 
 // Apply any number of animation timing functions.
 @mixin animation-timing-function($function...) {
   $function: set-arglist-default($function, $default-animation-timing-function);
-  @include experimental(animation-timing-function, $function, $animation-support...); }
+  @include animation-properties((animation-timing-function: $function));
+}
 
 // Apply any number of animation iteration counts.
 @mixin animation-iteration-count($count...) {
   $count: set-arglist-default($count, $default-animation-iteration-count);
-  @include experimental(animation-iteration-count, $count, $animation-support...); }
+  @include animation-properties((animation-iteration-count: $count));
+}
 
 // Apply any number of animation directions.
 @mixin animation-direction($direction...) {
   $direction: set-arglist-default($direction, $default-animation-direction);
-  @include experimental(animation-direction, $direction, $animation-support...); }
+  @include animation-properties((animation-direction: $direction));
+}
 
 // Apply any number of animation fill modes.
 @mixin animation-fill-mode($mode...) {
   $mode: set-arglist-default($mode, $default-animation-fill-mode);
-  @include experimental(animation-fill-mode, $mode, $animation-support...); }
+  @include animation-properties((animation-fill-mode: $mode));
+}
 
 // Apply any number of animation play states.
 @mixin animation-play-state($state...) {
   $state: set-arglist-default($state, $default-animation-play-state);
-  @include experimental(animation-play-state, $state, $animation-support...); }
+  @include animation-properties((animation-play-state: $state));
+}
+
+// @private
+@function default-animation() {
+  @return compact($default-animation-name
+                  $default-animation-duration
+                  $default-animation-timing-function
+                  $default-animation-delay
+                  $default-animation-iteration-count
+                  $default-animation-direction
+                  $default-animation-fill-mode
+                  $default-animation-play-state);
+}
 
 // Shortcut to apply any number of animations to an element, with all the settings.
 //
 //     $animation... : Name and settings. [<values> | default]
 @mixin animation($animation...) {
-  $default: -compass-space-list(compact($default-animation-name $default-animation-duration $default-animation-timing-function $default-animation-delay $default-animation-iteration-count $default-animation-direction $default-animation-fill-mode $default-animation-play-state));
-  $animation: set-arglist-default($animation, $default);
-  @include experimental(animation, $animation, $animation-support...);
+  $animation: if(length($animation) > 0, $animation, default-animation());
+  @include animation-properties((animation: $animation));
 }
-

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

@@ -1,11 +1,5 @@
 // Appearance
-
-@import "shared";
-
-// @private css3-feature-support variables must always include a list of five boolean values
-// representing in order: -moz, -webkit, -ms, -o, -khtml.
-$appearance-support: -moz, -webkit, not -ms, not -o, not -khtml;
-
+@import "compass/support";
 
 // Change the appearance for Mozilla, Webkit and possibly the future.
 // The appearance property is currently not present in any newer CSS specification.
@@ -16,6 +10,8 @@ $appearance-support: -moz, -webkit, not -ms, not -o, not -khtml;
 //   * [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($appearance) {
+  // There is no caniuse tracking for appearance.
   $appearance: unquote($appearance);
-  @include experimental(appearance, $appearance, $appearance-support...);
+  @include with-prefix(-moz)    {    -moz-appearance: $appearance; }
+  @include with-prefix(-webkit) { -webkit-appearance: $appearance; }
 }

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

@@ -1,12 +1,8 @@
 // Background Clip
+@import "compass/support";
 
-@import "shared";
-
-// @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
-$background-clip-support: not -moz, not -webkit, not -ms, not -o, -khtml;
-
+// The the user threshold for background-clip support. Defaults to `$critical-usage-threshold`
+$background-clip-support-threshold: $critical-usage-threshold !default;
 
 // The default border-box model: [border-box | padding-box | content-box]
 $default-background-clip: padding-box !default;
@@ -15,25 +11,25 @@ $default-background-clip: padding-box !default;
 // Clip the background (image and color) at the edge of the padding, border, or content.
 //   $clip... : [padding-box | border-box | content-box]
 @mixin background-clip($clip...) {
-  $output: compact();
-  $deprecated: compact();
+  $output: ();
+  $deprecated: ();
 
   @if (length($clip) > 0) {
     @each $layer in $clip {
-      $output: append($output, unquote($layer));
-      $deprecated: append($deprecated, legacy-box($layer));
+      $output: append($output, unquote($layer), comma);
+      $deprecated: append($deprecated, legacy-box($layer), comma);
     }
   } @else {
     $output: $default-background-clip;
     $deprecated: legacy-box($default-background-clip);
   }
 
-  // Legacy versions of Mozilla support a different syntax, prefixed.
-  @include experimental-only-for(background-clip, $deprecated,
-    $moz: $legacy-support-for-mozilla,
-    $webkit: $legacy-support-for-webkit
-  );
-
-  // Official syntax for the rest
-  @include experimental(background-clip, $output, $background-clip-support...);
+  @include with-each-prefix(background-img-opts, $background-clip-support-threshold) {
+    @if $current-prefix == -moz or $current-prefix == -webkit {
+      // Legacy versions of Mozilla support a different syntax, prefixed.
+      @include prefix-prop(background-clip, $deprecated);
+    } @else {
+      @include prefix-prop(background-clip, $output);
+    }
+  }
 }

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

@@ -1,11 +1,8 @@
 // Background Origin
+@import "compass/support";
 
-@import "shared";
-
-// @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
-$background-origin-support: not -moz, not -webkit, not -ms, not -o, -khtml;
+// The the user threshold for background-origin support. Defaults to `$critical-usage-threshold`
+$background-origin-threshold: $critical-usage-threshold !default;
 
 
 // The default background-origin: [border-box | padding-box | content-box]
@@ -13,27 +10,28 @@ $default-background-origin: content-box !default;
 
 
 // Set the origin of the background (image and color) at the edge of the padding, border, or content.
-//   $origin... : [padding-box | border-box | content-box]
+//
+//     $origin... : [padding-box | border-box | content-box]
 @mixin background-origin($origin...) {
-  $output: compact();
-  $deprecated: compact();
+  $output: ();
+  $deprecated: ();
 
   @if (length($origin) > 0) {
     @each $layer in $origin {
-      $output: append($output, unquote($layer));
-      $deprecated: append($deprecated, legacy-box($layer));
+      $output: append($output, unquote($layer), comma);
+      $deprecated: append($deprecated, legacy-box($layer), comma);
     }
   } @else {
     $output: $default-background-origin;
     $deprecated: legacy-box($default-background-origin);
   }
 
-  // Legacy versions of Mozilla support a different syntax, prefixed.
-  @include experimental-only-for(background-origin, $deprecated,
-    $moz: $legacy-support-for-mozilla,
-    $webkit: $legacy-support-for-webkit
-  );
-
-  // Official syntax for the rest
-  @include experimental(background-origin, $output, $background-origin-support...);
+  @include with-each-prefix(background-img-opts, $background-origin-threshold) {
+    @if $current-prefix == -moz or $current-prefix == -webkit {
+      // Legacy versions of Mozilla support a different syntax, prefixed.
+      @include prefix-prop(background-origin, $deprecated)
+    } @else {
+      @include prefix-prop(background-origin, $output)
+    }
+  }
 }

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

@@ -1,12 +1,8 @@
 // Background Size
+@import "compass/support";
 
-@import "shared";
-
-// @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
-$background-size-support: -moz, -webkit, not -ms, -o, -khtml;
-
+// The the user threshold for background-clip support. Defaults to `$critical-usage-threshold`
+$background-size-threshold: $critical-usage-threshold !default;
 
 //  override to change the default
 $default-background-size: 100% auto !default;
@@ -19,5 +15,5 @@ $default-background-size: 100% auto !default;
 // * mixin defaults to: `$default-background-size`
 @mixin background-size($size...) {
   $size: set-arglist-default($size, $default-background-size);
-  @include experimental(background-size, $size, $background-size-support...);
+  @include prefixed-properties(background-img-opts, $background-size-threshold, (background-size: $size));
 }

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

@@ -1,11 +1,10 @@
 // Border Radius
 
-@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
-$border-radius-support: not -moz, not -webkit, not -ms, not -o, -khtml;
 
+// The the user threshold for border-radius support. Defaults to `$graceful-usage-threshold`
+$border-radius-threshold: $graceful-usage-threshold;
 
 // The length of a border-radius to be used by default.
 $default-border-radius: 5px !default;
@@ -27,34 +26,32 @@ $default-border-radius: 5px !default;
 //
 // Which generates:
 //
-//    .simple {
-//      -webkit-border-radius: 4px 4px;
-//      -moz-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;
-//      -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;
-//      -khtml-border-radius: 1px 3px 5px 7px / 2px 4px 6px 8px;
-//      border-radius: 1px 3px 5px 7px / 2px 4px 6px 8px; }
+//     .simple {
+//       -moz-border-radius: 4px / 4px;
+//       -webkit-border-radius: 4px 4px;
+//       border-radius: 4px / 4px; }
+//     
+//     .compound {
+//       -moz-border-radius: 2px 5px / 3px 6px;
+//       -webkit-border-radius: 2px 3px;
+//       border-radius: 2px 5px / 3px 6px; }
+//     
+//     .crazy {
+//       -moz-border-radius: 1px 3px 5px 7px / 2px 4px 6px 8px;
+//       -webkit-border-radius: 1px 2px;
+//       border-radius: 1px 3px 5px 7px / 2px 4px 6px 8px; }
 @mixin border-radius($radius: $default-border-radius, $vertical-radius: false) {
-
-  // Legacy Webkit didn't understand the official shorthand syntax for specifying a vertical radius.
-  $legacy-webkit-radius: first-value-of($radius);
-  @if $vertical-radius { $legacy-webkit-radius: append($legacy-webkit-radius, first-value-of($vertical-radius)); }
-  @include experimental-only-for(border-radius, $legacy-webkit-radius, $webkit: $legacy-support-for-webkit);
-
-  // Official syntax for everyone else
-  $radius: if($vertical-radius, #{$radius} / #{$vertical-radius}, $radius);
-  @include experimental-only-for(border-radius, $radius, $moz: $legacy-support-for-mozilla);
-  @include experimental(border-radius, $radius, $border-radius-support...);
+  @include with-each-prefix(border-radius, $border-radius-threshold) {
+    @if $current-prefix == -webkit {
+      // Legacy Webkit didn't understand the official shorthand syntax for specifying a vertical radius.
+      $legacy-webkit-radius: first-value-of($radius);
+      @if $vertical-radius { $legacy-webkit-radius: append($legacy-webkit-radius, first-value-of($vertical-radius)); }
+      @include prefix-prop(border-radius, $legacy-webkit-radius);
+    } @else {
+      // Official syntax for everyone else
+      @include prefix-prop(border-radius, if($vertical-radius, #{$radius} / #{$vertical-radius}, $radius));
+    }
+  }
 }
 
 // Round radius at position by amount.
@@ -62,14 +59,15 @@ $default-border-radius: 5px !default;
 // * legal values for `$vert`: `top`, `bottom`
 // * legal values for `$horz`: `left`, `right`
 @mixin border-corner-radius($vert, $horz, $radius: $default-border-radius) {
-
-  // Support for mozilla's syntax for specifying a corner
-  @include experimental-only-for("border-radius-#{$vert}#{$horz}", $radius, $moz: $legacy-support-for-mozilla);
-
-  // Official syntax for everyone else
-  $corners: "border-#{$vert}-#{$horz}-radius";
-  @include experimental-only-for($corners, $radius, $webkit: $legacy-support-for-webkit);
-  @include experimental($corners, $radius, $border-radius-support...);
+  @include with-each-prefix(border-radius, $border-radius-threshold) {
+    @if $current-prefix == -moz {
+      // Support for mozilla's syntax for specifying a corner
+      @include prefix-prop("border-radius-#{$vert}#{$horz}", $radius);
+    } @else {
+      // Official syntax for everyone else
+      @include prefix-prop("border-#{$vert}-#{$horz}-radius", $radius);
+    }
+  }
 }
 
 // Round top-left corner only

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

@@ -1,52 +1,77 @@
 // Box Shadow
 
-@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
-$box-shadow-support: -moz, -webkit, not -ms, not -o, not -khtml;
+// The prefixed support threshold for box-shadow.
+// Defaults to the $graceful-usage-threshold.
+$box-shadow-support-threshold: $graceful-usage-threshold !default;
 
 
 // The default color for box shadows
-$default-box-shadow-color       : #333333   !default;
+$default-box-shadow-color: #333333 !default;
 
 // The default horizontal offset. Positive is to the right.
-$default-box-shadow-h-offset    : 0px       !default;
+$default-box-shadow-h-offset: 0px !default;
 
 // The default vertical offset. Positive is down.
-$default-box-shadow-v-offset    : 0px       !default;
+$default-box-shadow-v-offset: 0px !default;
 
 // The default blur length.
-$default-box-shadow-blur        : 5px       !default;
+$default-box-shadow-blur: 5px !default;
 
 // The default spread length.
-$default-box-shadow-spread      : false     !default;
+$default-box-shadow-spread: null !default;
 
-// The default shadow inset: inset or false (for standard shadow).
-$default-box-shadow-inset       : false     !default;
+// The default shadow inset: inset or null (for standard shadow).
+$default-box-shadow-inset: null !default;
 
+@function default-box-shadow() {
+  @return compact(if($default-box-shadow-inset, inset, null)
+                  $default-box-shadow-h-offset
+                  $default-box-shadow-v-offset
+                  $default-box-shadow-blur
+                  $default-box-shadow-spread
+                  $default-box-shadow-color);
+}
 
 // Provides cross-browser for Webkit, Gecko, and CSS3 box shadows
 // when one or more box shadows are needed.
 // Each shadow argument should adhere to the standard css3 syntax
 // for the box-shadow property.
 @mixin box-shadow($shadow...) {
-  $default: -compass-space-list(compact(if($default-box-shadow-inset, inset, false), $default-box-shadow-h-offset, $default-box-shadow-v-offset, $default-box-shadow-blur, $default-box-shadow-spread, $default-box-shadow-color));
-  $shadow: set-arglist-default($shadow, $default);
-  @include experimental(box-shadow, $shadow, $box-shadow-support...);
+  $shadow: set-arglist-default($shadow, default-box-shadow());
+  @include prefixed-properties(css-boxshadow, $box-shadow-support-threshold, (box-shadow: $shadow));
 }
 
 // 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(
-  $hoff   : $default-box-shadow-h-offset,
-  $voff   : $default-box-shadow-v-offset,
-  $blur   : $default-box-shadow-blur,
-  $spread : $default-box-shadow-spread,
-  $color  : $default-box-shadow-color,
+  $hoff   : null,
+  $voff   : null,
+  $blur   : null,
+  $spread : null,
+  $color  : null,
   $inset  : $default-box-shadow-inset
 ) {
-  @if not ($inset == true or $inset == false or $inset == inset) {
+  // Handle legacy argument order
+  @if $hoff != none and type-of($hoff) != number {
+    @warn "The $color argument for single-box-shadow is now the 5th argument instead of the 1st.";
+    $tmp-color: $color;
+    $color: $hoff;
+    $hoff: $voff;
+    $voff: $blur;
+    $blur: $spread;
+    $spread: $tmp-color
+  }
+
+  // Need to set these defaults here instead of the arglist to support the above backwards compat handling
+  @if $hoff   == null { $hoff:   $default-box-shadow-h-offset; }
+  @if $voff   == null { $hoff:   $default-box-shadow-v-offset; }
+  @if $blur   == null { $blur:   $default-box-shadow-blur;     }
+  @if $spread == null { $spread: $default-box-shadow-spread;   }
+  @if $color  == null { $color:  $default-box-shadow-color;    }
+
+  @if not ($inset == true or $inset == false or $inset == null or $inset == inset) {
     @warn "$inset expected to be true or the inset keyword. Got #{$inset} instead. Using: inset";
   }