compass 0.13.alpha.0 → 0.13.alpha.2

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

@@ -7,10 +7,16 @@ $default-text-shadow-color:    #aaa !default;
 $default-text-shadow-h-offset: 0px  !default;
 $default-text-shadow-v-offset: 0px  !default;
 $default-text-shadow-blur:     1px  !default;
+$default-text-shadow-spread:   false  !default;
 
 // Provides cross-browser text shadows when one or more shadows are needed.
 // Each shadow argument should adhere to the standard css3 syntax for the
 // text-shadow property.
+//
+// Note: if any shadow has a spread parameter, this will cause the mixin
+// to emit the shadow declaration twice, first without the spread,
+// then with the spread included. This allows you to progressively
+// enhance the browsers that do support the spread parameter.
 @mixin text-shadow(
   $shadow-1 : default,
   $shadow-2 : false,
@@ -24,25 +30,58 @@ $default-text-shadow-blur:     1px  !default;
   $shadow-10: false
 ) {
   @if $shadow-1 == default {
-    $shadow-1: $default-text-shadow-color $default-text-shadow-h-offset $default-text-shadow-v-offset $default-text-shadow-blur;
+    $shadow-1: compact($default-text-shadow-h-offset $default-text-shadow-v-offset $default-text-shadow-blur $default-text-shadow-spread $default-text-shadow-color);
   }
-  text-shadow: compact($shadow-1, $shadow-2, $shadow-3,
-                       $shadow-4, $shadow-5, $shadow-6,
-                       $shadow-7, $shadow-8, $shadow-9, $shadow-10);
+  $shadows-without-spread: join((),(),comma);
+  $shadows: join((),(),comma);
+  $has-spread: false;
+  @each $shadow in compact($shadow-1, $shadow-2, $shadow-3, $shadow-4, $shadow-5,
+                           $shadow-6, $shadow-7, $shadow-8, $shadow-9, $shadow-10) {
+    @if length($shadow) > 4 {
+      $has-spread: true;
+      $shadows-without-spread: append($shadows-without-spread, nth($shadow,1) nth($shadow,2) nth($shadow,3) nth($shadow,5));
+      $shadows: append($shadows, $shadow);
+    } else {
+      $shadows-without-spread: append($shadows-without-spread, $shadow);
+      $shadows: append($shadows, $shadow);
+    }
+  }
+  @if $has-spread {
+    text-shadow: $shadows-without-spread;
+  }
+  text-shadow: $shadows;
 }
 
 // Provides a single cross-browser CSS text shadow.
-// Includes default arguments for color, horizontal offset, vertical offset, and blur
+//
+// Provides sensible defaults for the color, horizontal offset, vertical offset, blur, and spread
+// according to the configuration defaults above.
 @mixin single-text-shadow(
-  $color: $default-text-shadow-color,
-  $hoff: $default-text-shadow-h-offset,
-  $voff: $default-text-shadow-v-offset,
-  $blur: $default-text-shadow-blur
+  $hoff: false,
+  $voff: false,
+  $blur: false,
+  $spread: false,
+  $color: false
 ) {
-  // XXX I'm surprised we don't need experimental support for this property.
-  @if $color == none {
-    text-shadow: none;
+  // A lot of people think the color comes first. It doesn't.
+  @if type-of($hoff) == color {
+    $temp-color: $hoff;
+    $hoff: $voff;
+    $voff: $blur;
+    $blur: $spread;
+    $spread: $color;
+    $color: $temp-color;
+  }
+  // Can't rely on default assignment with multiple supported argument orders.
+  $hoff:   if($hoff,   $hoff,   $default-text-shadow-h-offset);
+  $voff:   if($voff,   $voff,   $default-text-shadow-v-offset);
+  $blur:   if($blur,   $blur,   $default-text-shadow-blur    );
+  $spread: if($spread, $spread, $default-text-shadow-spread  );
+  $color:  if($color,  $color,  $default-text-shadow-color   );
+  // We don't need experimental support for this property.
+  @if $color == none or $hoff == none {
+    @include text-shadow(none);
   } @else {
-    text-shadow: $color $hoff $voff $blur;
+    @include text-shadow(compact($hoff $voff $blur $spread $color));
   }
 }

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

@@ -140,7 +140,7 @@ $default-skew-y      : 5deg                  !default;
 //
 //     @include transform( transforms [, 3D-only ] )
 //
-// where 'transforms' is a space separated list of all the transforms to be applied
+// where 'transforms' is a space separated list of all the transforms to be applied.
 @mixin transform(
   $transform,
   $only3d: false
@@ -174,8 +174,8 @@ $default-skew-y      : 5deg                  !default;
 //
 //      @include perspective( perspective )
 //
-// where 'perspective' is a uniless number representing the depth of the z-axis
-// the higher the perspective, the more exagerated the foreshortening.
+// where 'perspective' is a unitless number representing the depth of the
+// z-axis. The higher the perspective, the more exaggerated the foreshortening.
 // values from 500 to 1000 are more-or-less "normal" - a good starting-point.
 @mixin perspective($p) {
   @include experimental(perspective, $p,
@@ -198,8 +198,8 @@ $default-skew-y      : 5deg                  !default;
 //
 //      @include transform-style( [ style ] )
 //
-// where `style` can be either `flat` or `preserve-3d`
-// browsers default to `flat`, mixin defaults to `preserve-3d`
+// where `style` can be either `flat` or `preserve-3d`.
+// Browsers default to `flat`, mixin defaults to `preserve-3d`.
 @mixin transform-style($style: preserve-3d) {
   @include experimental(transform-style, $style,
     -moz, -webkit, -o, -ms, not -khtml, official
@@ -210,8 +210,8 @@ $default-skew-y      : 5deg                  !default;
 //
 //     @include backface-visibility( [ visibility ] )
 //
-// where `visibility` can be either `visible` or `hidden`
-// browsers default to visible, mixin defaults to hidden
+// where `visibility` can be either `visible` or `hidden`.
+// Browsers default to visible, mixin defaults to hidden
 @mixin backface-visibility($visibility: hidden) {
   @include experimental(backface-visibility, $visibility,
     -moz, -webkit, -o, -ms, not -khtml, official
@@ -362,9 +362,9 @@ $default-skew-y      : 5deg                  !default;
 
 // Rotate an object around an arbitrary axis (3D)
 // @include rotate( [ vector-x, vector-y, vector-z, rotation, perspective ] )
-// where the 'vector-' arguments accept unitless numbers
-// these numbers are not important on their own, but in relation to one another
-// creating an axis from your transform-origin, along the axis of Xx = Yy = Zz
+// where the 'vector-' arguments accept unitless numbers.
+// These numbers are not important on their own, but in relation to one another
+// creating an axis from your transform-origin, along the axis of Xx = Yy = Zz.
 //
 // **Note** This mixin cannot be combined with other transform mixins.
 @mixin rotate3d(
@@ -385,7 +385,7 @@ $default-skew-y      : 5deg                  !default;
 
 // Move an object along the x or y axis (2D)
 // @include translate( [ translate-x, translate-y, perspective, 3D-only ] )
-// where the 'translate-' arguments accept any distance in percentages or absolute (px, cm, in, em etc..) units
+// where the 'translate-' arguments accept any distance in percentages or absolute (px, cm, in, em etc..) units.
 //
 // **Note** This mixin cannot be combined with other transform mixins.
 @mixin translate(
@@ -463,7 +463,7 @@ $default-skew-y      : 5deg                  !default;
 //
 //     @include skew( [ skew-x, skew-y, 3D-only ] )
 //
-// where the 'skew-' arguments accept css angles in degrees (deg) or radian (rad) units
+// where the 'skew-' arguments accept css angles in degrees (deg) or radian (rad) units.
 //
 // **Note** This mixin cannot be combined with other transform mixins.
 @mixin skew(
@@ -504,8 +504,8 @@ $default-skew-y      : 5deg                  !default;
 
 // Full transform mixins
 // For settings any combination of transforms as arguments
-// These are complex and not highly recommended for daily use
-// They are mainly here for backwards-compatability purposes
+// These are complex and not highly recommended for daily use. They are mainly
+// here for backward-compatibility purposes.
 //
 // * they include origin adjustments
 // * scale takes a multiplier (unitless), rotate and skew take degrees (deg)

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

@@ -30,9 +30,23 @@ $transitionable-prefixed-values: transform, transform-origin !default;
 // * for multiple, use a comma-delimited list
 // * also accepts "all" or "none"
 
-@mixin transition-property($properties: $default-transition-property) {
-  @if type-of($properties) == string { $properties: unquote($properties); }
-  @include build-prefix-values(transition-property, $properties);
+@mixin transition-property($property-1: $default-transition-property,
+  $property-2 : false,
+  $property-3 : false,
+  $property-4 : false,
+  $property-5 : false,
+  $property-6 : false,
+  $property-7 : false,
+  $property-8 : false,
+  $property-9 : false,
+  $property-10: false
+) {
+  @if type-of($property-1) == string { $property-1: unquote($property-1); }
+  $properties: compact($property-1, $property-2, $property-3, $property-4, $property-5, $property-6, $property-7, $property-8, $property-9, $property-10);
+  @if $experimental-support-for-webkit    {       -webkit-transition-property : prefixed-for-transition(-webkit, $properties); }
+  @if $experimental-support-for-mozilla   {          -moz-transition-property : prefixed-for-transition(-moz,    $properties); }
+  @if $experimental-support-for-opera     {            -o-transition-property : prefixed-for-transition(-o,      $properties); }
+                                                          transition-property : $properties;
 }
 
 // One or more durations in seconds
@@ -40,10 +54,21 @@ $transitionable-prefixed-values: transform, transform-origin !default;
 // * for multiple, use a comma-delimited list
 // * these durations will affect the properties in the same list position
 
-@mixin transition-duration($duration: $default-transition-duration) {
-  @if type-of($duration) == string { $duration: unquote($duration); }
-  @include experimental(transition-duration, $duration,
-    -moz, -webkit, -o, -ms, not -khtml, official
+@mixin transition-duration($duration-1: $default-transition-duration,
+  $duration-2 : false,
+  $duration-3 : false,
+  $duration-4 : false,
+  $duration-5 : false,
+  $duration-6 : false,
+  $duration-7 : false,
+  $duration-8 : false,
+  $duration-9 : false,
+  $duration-10: false
+) {
+  @if type-of($duration-1) == string { $duration-1: unquote($duration-1); }
+  $durations: compact($duration-1, $duration-2, $duration-3, $duration-4, $duration-5, $duration-6, $duration-7, $duration-8, $duration-9, $duration-10);
+  @include experimental(transition-duration, $durations,
+    -moz, -webkit, -o, not -ms, not -khtml, official
   );
 }
 
@@ -53,9 +78,21 @@ $transitionable-prefixed-values: transform, transform-origin !default;
 // * For multiple, use a comma-delimited list
 // * These functions will effect the properties in the same list position
 
-@mixin transition-timing-function($function: $default-transition-function) {
-  @include experimental(transition-timing-function, unquote($function),
-    -moz, -webkit, -o, -ms, not -khtml, official
+@mixin transition-timing-function($function-1: $default-transition-function,
+  $function-2 : false,
+  $function-3 : false,
+  $function-4 : false,
+  $function-5 : false,
+  $function-6 : false,
+  $function-7 : false,
+  $function-8 : false,
+  $function-9 : false,
+  $function-10: false
+) {
+  $function-1: unquote($function-1);
+  $functions: compact($function-1, $function-2, $function-3, $function-4, $function-5, $function-6, $function-7, $function-8, $function-9, $function-10);
+  @include experimental(transition-timing-function, $functions,
+    -moz, -webkit, -o, not -ms, not -khtml, official
   );
 }
 
@@ -64,10 +101,21 @@ $transitionable-prefixed-values: transform, transform-origin !default;
 // * for multiple, use a comma-delimited list
 // * these delays will effect the properties in the same list position
 
-@mixin transition-delay($delay: $default-transition-delay) {
-  @if type-of($delay) == string { $delay: unquote($delay); }
-  @include experimental(transition-delay, $delay,
-    -moz, -webkit, -o, -ms, not -khtml, official
+@mixin transition-delay($delay-1: $default-transition-delay,
+  $delay-2 : false,
+  $delay-3 : false,
+  $delay-4 : false,
+  $delay-5 : false,
+  $delay-6 : false,
+  $delay-7 : false,
+  $delay-8 : false,
+  $delay-9 : false,
+  $delay-10: false
+) {
+  @if type-of($delay-1) == string { $delay-1: unquote($delay-1); }
+  $delays: compact($delay-1, $delay-2, $delay-3, $delay-4, $delay-5, $delay-6, $delay-7, $delay-8, $delay-9, $delay-10);
+  @include experimental(transition-delay, $delays,
+    -moz, -webkit, -o, not -ms, not -khtml, official
   );
 }
 
@@ -79,7 +127,7 @@ $transitionable-prefixed-values: transform, transform-origin !default;
   $function: $default-transition-function,
   $delay: $default-transition-delay
 ) {
-  @include build-prefix-values(transition, compact($property $duration $function, false), $delay);
+  @include transition(compact($property $duration $function $delay));
 }
 
 @mixin transition(
@@ -97,58 +145,77 @@ $transitionable-prefixed-values: transform, transform-origin !default;
   @if $transition-1 == default {
     $transition-1 : compact($default-transition-property $default-transition-duration $default-transition-function $default-transition-delay);
   }
+  $transitions: false;
+  @if type-of($transition-1) == list and type-of(nth($transition-1,1)) == list {
+    $transitions: join($transition-1, compact($transition-2, $transition-3, $transition-4, $transition-5, $transition-6, $transition-7, $transition-8, $transition-9, $transition-10), comma);
+  } @else {
+    $transitions : compact($transition-1, $transition-2, $transition-3, $transition-4, $transition-5, $transition-6, $transition-7, $transition-8, $transition-9, $transition-10);
+  }
+  $delays: comma-list();
+  $has-delays: false;
+  $webkit-value: comma-list();
+  $moz-value: comma-list();
+  $o-value: comma-list();
+
+  // This block can be made considerably simpler at the point in time that
+  // we no longer need to deal with the differences in how delays are treated.
+  @each $transition in $transitions {
+    // Extract the values from the list
+    // (this would be cleaner if nth took a 3rd argument to provide a default value).
+    $property: nth($transition, 1);
+    $duration: false;
+    $timing-function: false;
+    $delay: false;
+    @if length($transition) > 1 { $duration:        nth($transition, 2); }
+    @if length($transition) > 2 { $timing-function: nth($transition, 3); }
+    @if length($transition) > 3 { $delay:           nth($transition, 4); $has-delays: true; }
+
+    // If a delay is provided without a timing function
+    @if is-time($timing-function) and not $delay { $delay: $timing-function; $timing-function: false; $has-delays: true; }
+
+    // Keep a list of delays in case one is specified
+    $delays: append($delays, if($delay, $delay, 0s));
+
+    $webkit-value: append($webkit-value, compact(prefixed-for-transition(-webkit, $property) $duration $timing-function));
+       $moz-value: append(   $moz-value, compact(prefixed-for-transition(   -moz, $property) $duration $timing-function $delay));
+         $o-value: append(     $o-value, compact(prefixed-for-transition(     -o, $property) $duration $timing-function $delay));
+  }
 
-  $transition : compact($transition-1, $transition-2, $transition-3, $transition-4, $transition-5, $transition-6, $transition-7, $transition-8, $transition-9, $transition-10);
-  @include build-prefix-values(transition, $transition);
+  @if $experimental-support-for-webkit    {       -webkit-transition : $webkit-value;
+    // old webkit doesn't support the delay parameter in the shorthand so we progressively enhance it.
+    @if $has-delays                       { -webkit-transition-delay : $delays;       } }
+  @if $experimental-support-for-mozilla   {          -moz-transition : $moz-value;    }
+  @if $experimental-support-for-opera     {            -o-transition : $o-value;      }
+                                                          transition : $transitions;
 }
 
-@mixin build-prefix-values($property, $values, $delay: false) {
-  $raw-values: ($values);
-  $index: compact(false);
-
-  $webkit-value: compact(false);
-  $moz-value: compact(false);
-  $ms-value: compact(false);
-  $o-value: compact(false);
-
-  @each $value in $raw-values {
-    $value: compact(join($value, false));
-    $match: false;
+// coerce a list to be comma delimited or make a new, empty comma delimited list.
+@function comma-list($list: ()) {
+  @return join((), $list, comma);
+}
 
-    @each $prefixed-value in $transitionable-prefixed-values {
-      @if index($value, $prefixed-value) {
-        $index: index($value, $prefixed-value);
-        $match: true;
-      }
+// Returns `$property` with the given prefix if it is found in `$transitionable-prefixed-values`.
+@function prefixed-for-transition($prefix, $property) {
+  @if type-of($property) == list {
+    $new-list: comma-list();
+    @each $v in $property {
+      $new-list: append($new-list, prefixed-for-transition($prefix, $v));
     }
-
-    @if $match {
-      $value-prefix: nth($value, $index);
-      $value-suffix: compact(false);
-
-      @for $i from 2 through length($value) {
-        $value-suffix: append($value-suffix, nth($value, $i), space);
-      }
-
-      $non-webkit-suffix: compact(append($value-suffix, $delay, space));
-
-      $webkit-value: append($webkit-value, compact(join(-webkit-#{$value-prefix}, $value-suffix)), comma);
-      $moz-value: append($moz-value, compact(join(-moz-#{$value-prefix}, $non-webkit-suffix)), comma);
-      $ms-value: append($ms-value, compact(join(-ms-#{$value-prefix}, $non-webkit-suffix)), comma);
-      $o-value: append($o-value, compact(join(-o-#{$value-prefix}, $non-webkit-suffix)), comma);
+    @return $new-list;
+  } @else {
+    @if index($transitionable-prefixed-values, $property) {
+      @return #{$prefix}-#{$property};
     } @else {
-      $non-webkit-value: compact(append($value, $delay, space));
-
-      $webkit-value: append($webkit-value, $value, comma);
-      $moz-value: append($moz-value, $non-webkit-value, comma);
-      $ms-value: append($ms-value, $non-webkit-value, comma);
-      $o-value: append($o-value, $non-webkit-value, comma);
+      @return $property;
     }
   }
+}
 
-  @if $experimental-support-for-webkit    { -webkit-#{$property} : $webkit-value; @if $delay { -webkit-#{$property}-delay : $delay; } }
-  @if $experimental-support-for-mozilla   {    -moz-#{$property} :    $moz-value; }
-  @if $experimental-support-for-microsoft {     -ms-#{$property} :     $ms-value; }
-  @if $experimental-support-for-opera     {      -o-#{$property} :      $o-value; }
-                                                    #{$property} :      compact($values $delay);
+// Checks if the value given is a unit of time.
+@function is-time($value) {
+  @if type-of($value) == number {
+    @return not not index(s ms, unit($value));
+  } @else {
+    @return false;
+  }
 }

data/frameworks/compass/stylesheets/compass/css3/_user-interface.scss

@@ -4,6 +4,14 @@
 // http://www.w3.org/TR/2000/WD-css3-userint-20000216
 @import "shared";
 
+// ----------------------------------------------------------------------------
+// @private css3-feature-support variables must always include a list of five boolean values
+// representing in order: -moz, -webkit, -o, -ms, -khtml
+//   - mozilla support handled seperately below
+$userselect-support: not -moz, -webkit, not -o, -ms, -khtml;
+
+// ----------------------------------------------------------------------------
+// Mixins
 
 // This property controls the selection model and granularity of an element.
 //
@@ -11,28 +19,40 @@
 //   [ none | text | toggle | element | elements | all | inherit ]
 @mixin user-select($select) {
   $select: unquote($select);
-  @include experimental(user-select, $select,
-    -moz, -webkit, not -o, not -ms, -khtml, official
-  );
+
+  @if $experimental-support-for-mozilla {
+    -moz-user-select: if($select == 'none', -moz-none, $select);
+  }
+  @include experimental(user-select, $select, $userselect-support...);
 }
 
 // Style the html5 input placeholder in browsers that support it.
 //
-// The styles for the input placeholder are passed as mixin content.
-// For example:
+// 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:
 //
 //     @include input-placeholder {
 //       color: #bfbfbf;
 //       font-style: italic;
 //     }
-@mixin input-placeholder {
-	@if $experimental-support-for-webkit {
-		&::-webkit-input-placeholder { @content; }
-	}
-	@if $experimental-support-for-mozilla {
-		&:-moz-placeholder { @content; }
-	}
-	@if $experimental-support-for-microsoft {
-		&:-ms-input-placeholder { @content; }
-	}
+//
+// If a specific element is being styled, pass "&" as an argument to the mixin
+// as well. For example:
+//
+//     .textinput {
+//       @include input-placeholder("&") {
+//         color: #bfbfbf;
+//         font-style: italic;
+//       }
+//     }
+@mixin input-placeholder($selector: "") {
+  @if $experimental-support-for-webkit {
+    #{$selector}::-webkit-input-placeholder { @content; }
+  }
+  @if $experimental-support-for-mozilla {
+    #{$selector}:-moz-placeholder { @content; }
+  }
+  @if $experimental-support-for-microsoft {
+    #{$selector}:-ms-input-placeholder { @content; }
+  }
 }