compass 0.12.2 → 0.13.alpha.4

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

@@ -1,7 +1,16 @@
+// Border Radius
+
 @import "shared";
 
+// @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 length of a border-radius to be used by default.
 $default-border-radius: 5px !default;
 
+
 // Round all corners by a specific amount, defaults to value of `$default-border-radius`.
 //
 // When two values are passed, the first is the horizontal radius
@@ -23,89 +32,59 @@ $default-border-radius: 5px !default;
 //      -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; }
-
 @mixin border-radius($radius: $default-border-radius, $vertical-radius: false) {
 
-  @if $vertical-radius {
-    // Webkit doesn't understand the official shorthand syntax for specifying
-    // a vertical radius unless so in case there's several we only take the first.
-    @include experimental(border-radius, first-value-of($radius) first-value-of($vertical-radius),
-      not -moz,
-      -webkit,
-      not -o,
-      not -ms,
-      not -khtml,
-      not official
-    );
-    @include experimental("border-radius", $radius unquote("/") $vertical-radius,
-      -moz,
-      not -webkit,
-      not -o,
-      not -ms,
-      -khtml,
-      official
-    );
-  }
-  @else {
-    @include experimental(border-radius, $radius);
-  }
+  // 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...);
 }
 
 // Round radius at position by amount.
 //
 // * 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("border-radius-#{$vert}#{$horz}", $radius,
-    -moz,
-    not -webkit,
-    not -o,
-    not -ms,
-    not -khtml,
-    not official
-  );
-  @include experimental("border-#{$vert}-#{$horz}-radius", $radius,
-    not -moz,
-    -webkit,
-    not -o,
-    not -ms,
-    -khtml,
-    official
-  );
-  
+  @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...);
 }
 
 // Round top-left corner only
-
 @mixin border-top-left-radius($radius: $default-border-radius) {
   @include border-corner-radius(top, left, $radius); }
 
 // Round top-right corner only
-
 @mixin border-top-right-radius($radius: $default-border-radius) {
   @include border-corner-radius(top, right, $radius); }
 
 // Round bottom-left corner only
-
 @mixin border-bottom-left-radius($radius: $default-border-radius) {
   @include border-corner-radius(bottom, left, $radius); }
 
 // Round bottom-right corner only
-
 @mixin border-bottom-right-radius($radius: $default-border-radius) {
   @include border-corner-radius(bottom, right, $radius); }
 

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

@@ -1,69 +1,56 @@
-// @doc off
-// These defaults make the arguments optional for this mixin
-// If you like, set different defaults before importing.
-// @doc on
+// Box Shadow
 
 @import "shared";
 
+// @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 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      : false     !default;
 
 // The default shadow inset: inset or false (for standard shadow).
-$default-box-shadow-inset : false !default;
+$default-box-shadow-inset       : false     !default;
 
-// 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-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
-) {
-  @if $shadow-1 == default {
-    $shadow-1 : -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 : 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, not -o, not -ms, not -khtml, official
-  );
+
+// 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...);
 }
 
 // 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,
+  $color  : $default-box-shadow-color,
   $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 {
+  @if $hoff == none {
     @include box-shadow(none);
   } @else {
     $full   : $hoff $voff;

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

@@ -1,13 +1,17 @@
+// Box Sizing
+
 @import "shared";
 
+// @private css3-feature-support variables must always include a list of five boolean values
+// representing in order: -moz, -webkit, -ms, -o, -khtml
+$box-sizing-support:  -moz, -webkit, not -ms, not -o, not -khtml;
+
+
 // Change the box model for Mozilla, Webkit, IE8 and the future
 //
-// @param $bs
-//   [ content-box | border-box ]
-
-@mixin box-sizing($bs) {
-  $bs: unquote($bs);
-  @include experimental(box-sizing, $bs,
-    -moz, -webkit, not -o, not -ms, not -khtml, official
-  );
+// @param $box-model
+//   [ content-box | border-box | padding-box ]
+@mixin box-sizing($box-model) {
+  $box-model: unquote($box-model);
+  @include experimental(box-sizing, $box-model, $box-sizing-support...);
 }

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

@@ -1,111 +1,86 @@
+// Flexible Box
+
 @import "shared";
 
-// display:box; must be used for any of the other flexbox mixins to work properly
-@mixin display-box {
-  @include experimental-value(display, box,
-    -moz, -webkit, not -o, -ms, not -khtml, official
-  );
-}
+// @private css3-feature-support variables must always include a list of five boolean values
+// representing in order: -moz, -webkit, -ms, -o, -khtml
+$flexbox-support: -moz, -webkit, -ms, not -o, not -khtml;
+
 
 // Default box orientation, assuming that the user wants something less block-like
-$default-box-orient: horizontal !default;
+$default-box-orient         : horizontal      !default;
+
+// Default box-align
+$default-box-align          : stretch         !default;
+
+// Default box flex
+$default-box-flex           : 0               !default;
+
+// Default flex group
+$default-box-flex-group     : 1               !default;
+
+// Box direction default value
+$default-box-direction      : normal          !default;
+
+// Default ordinal group
+$default-box-ordinal-group  : 1               !default;
+
+// Default box lines
+$default-box-lines          : single          !default;
+
+// Default box pack
+$default-box-pack           : start           !default;
+
+
+// Apply 'display:box;' to an element.
+// - must be used for any of the other flexbox mixins to work properly
+@mixin display-box {
+  @include experimental-value(display, box, $flexbox-support...);
+}
 
 // Box orientation [ horizontal | vertical | inline-axis | block-axis | inherit ]
-@mixin box-orient(
-  $orientation: $default-box-orient
-) {
+@mixin box-orient($orientation: $default-box-orient) {
   $orientation : unquote($orientation);
-  @include experimental(box-orient, $orientation,
-    -moz, -webkit, not -o, -ms, not -khtml, official
-  );
+  @include experimental(box-orient, $orientation, $flexbox-support...);
 }
 
-// Default box-align
-$default-box-align: stretch !default;
-
 // Box align [ start | end | center | baseline | stretch ]
-@mixin box-align(
-  $alignment: $default-box-align
-) {
+@mixin box-align($alignment: $default-box-align) {
   $alignment : unquote($alignment);
-  @include experimental(box-align, $alignment,
-    -moz, -webkit, not -o, -ms, not -khtml, official
-  );
+  @include experimental(box-align, $alignment, $flexbox-support...);
 }
 
-// Default box flex
-$default-box-flex: 0 !default;
-
-// mixin which takes an int argument for box flex. Apply this to the children inside the box.
+// Takes an int argument for box flex. Apply this to the children inside the box.
 //
 // For example: "div.display-box > div.child-box" would get the box flex mixin.
-@mixin box-flex(
-  $flex: $default-box-flex
-) {
-  @include experimental(box-flex, $flex,
-    -moz, -webkit, not -o, -ms, not -khtml, official
-  );
+@mixin box-flex($flex: $default-box-flex) {
+  @include experimental(box-flex, $flex, $flexbox-support...);
 }
 
-// Default flex group
-$default-box-flex-group: 1 !default;
-
-// mixin which takes an int argument for flexible grouping
-@mixin box-flex-group(
-  $group: $default-box-flex-group
-) {
-  @include experimental(box-flex-group, $group,
-    -moz, -webkit, not -o, -ms, not -khtml, official
-  );
+// Takes an int argument for flexible grouping
+@mixin box-flex-group($group: $default-box-flex-group) {
+  @include experimental(box-flex-group, $group, $flexbox-support...);
 }
 
-// default for ordinal group
-$default-box-ordinal-group: 1 !default;
-
-// mixin which takes an int argument for ordinal grouping and rearranging the order
-@mixin box-ordinal-group(
-  $group: $default-ordinal-flex-group
-) {
-  @include experimental(box-ordinal-group, $group,
-    -moz, -webkit, not -o, -ms, not -khtml, official
-  );
+// Takes an int argument for ordinal grouping and rearranging the order
+@mixin box-ordinal-group($group: $default-box-ordinal-group) {
+  @include experimental(box-ordinal-group, $group, $flexbox-support...);
 }
 
-// Box direction default value
-$default-box-direction: normal !default;
-
-// mixin for box-direction [ normal | reverse | inherit ]
-@mixin box-direction(
-  $direction: $default-box-direction
-) {
+// Box direction [ normal | reverse | inherit ]
+@mixin box-direction($direction: $default-box-direction) {
   $direction: unquote($direction);
-  @include experimental(box-direction, $direction,
-    -moz, -webkit, not -o, -ms, not -khtml, official
-  );
+  @include experimental(box-direction, $direction, $flexbox-support...);
 }
 
-// default for box lines
-$default-box-lines: single !default;
-
-// mixin for box lines [ single | multiple ]
-@mixin box-lines(
-  $lines: $default-box-lines
-) {
+// Box lines [ single | multiple ]
+@mixin box-lines($lines: $default-box-lines) {
   $lines: unquote($lines);
-  @include experimental(box-lines, $lines,
-    -moz, -webkit, not -o, -ms, not -khtml, official
-  );
+  @include experimental(box-lines, $lines, $flexbox-support...);
 }
 
-// default for box pack
-$default-box-pack: start !default;
-
-// mixin for box pack [ start | end | center | justify ]
-@mixin box-pack(
-  $pack: $default-box-pack
-) {
+// Box pack [ start | end | center | justify ]
+@mixin box-pack($pack: $default-box-pack) {
   $pack: unquote($pack);
-  @include experimental(box-pack, $pack,
-    -moz, -webkit, not -o, -ms, not -khtml, official
-  );
-}
+  @include experimental(box-pack, $pack, $flexbox-support...);
+}

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

@@ -1,58 +1,60 @@
+// Columns
+
 @import "shared";
 
+// @private css3-feature-support variables must always include a list of five boolean values
+// representing in order: -moz, -webkit, -ms, -o, -khtml
+$multicolumn-support: -moz, -webkit, not -ms, not -o, not -khtml;
+
+
 // Specify the shorthand `columns` property.
 //
 // Example:
 //
-//     @include columns(20em 2)
+//     @include columns(20em 2);
 @mixin columns($width-and-count) {
-  @include experimental(columns, $width-and-count,
-    -moz, -webkit, -o, -ms, not -khtml, official
-  );
+  @include experimental(columns, $width-and-count, $multicolumn-support...);
 }
 
 // Specify the number of columns
 @mixin column-count($count) {
-  @include experimental(column-count, $count,
-    -moz, -webkit, -o, -ms, not -khtml, official
-  );
+  @include experimental(column-count, $count, $multicolumn-support...);
 }
 
 // Specify the gap between columns e.g. `20px`
 @mixin column-gap($width) {
-  @include experimental(column-gap, $width,
-    -moz, -webkit, -o, -ms, not -khtml, official
-  );
+  @include experimental(column-gap, $width, $multicolumn-support...);
 }
 
 // Specify the width of columns e.g. `100px`
 @mixin column-width($width) {
-  @include experimental(column-width, $width,
-    -moz, -webkit, -o, -ms, not -khtml, official
-  );
+  @include experimental(column-width, $width, $multicolumn-support...);
+}
+
+// Specify how many columns an element should span across.
+//
+// * legal values are 1, all
+@mixin column-span($columns) {
+	@include experimental(column-span, $columns,
+		-moz, -webkit, -o, -ms, not -khtml, official
+	);
 }
 
 // Specify the width of the rule between columns e.g. `1px`
 @mixin column-rule-width($width) {
-  @include experimental(column-rule-width, $width,
-    -moz, -webkit, -o, -ms, not -khtml, official
-  );
+  @include experimental(rule-width, $width, $multicolumn-support...);
 }
 
 // Specify the style of the rule between columns e.g. `dotted`.
 // This works like border-style.
 @mixin column-rule-style($style) {
-  @include experimental(column-rule-style, unquote($style),
-    -moz, -webkit, -o, -ms, not -khtml, official
-  );
+  @include experimental(rule-style, unquote($style), $multicolumn-support...);
 }
 
 // Specify the color of the rule between columns e.g. `blue`.
 // This works like border-color.
 @mixin column-rule-color($color) {
-  @include experimental(column-rule-color, $color,
-    -moz, -webkit, -o, -ms, not -khtml, official
-  );
+  @include experimental(rule-color, $color, $multicolumn-support...);
 }
 
 // Mixin encompassing all column rule properties
@@ -65,84 +67,124 @@
 //     @include column-rule(1px solid #c00)
 @mixin column-rule($width, $style: false, $color: false) {
   $full : -compass-space-list(compact($width, $style, $color));
-  @include experimental(column-rule, $full,
-    -moz, -webkit, -o, -ms, not -khtml, official
-  );
+  @include experimental(column-rule, $full, $multicolumn-support...);
 }
 
-// Mixin for setting column-break-before
+// All-purpose mixin for setting column breaks.
+//
+// * legal values for $type : before, after, inside
+// * legal values for '$value' are dependent on $type
+//    * when $type = before, legal values are auto, always, avoid, left, right, page, column, avoid-page, avoid-column
+//    * when $type = after, legal values are auto, always, avoid, left, right, page, column, avoid-page, avoid-column
+//    * when $type = inside, legal values are auto, avoid, avoid-page, avoid-column
+//
+//  Examples:
+//    h2.before {@include column-break(before, always);}
+//    h2.after {@include column-break(after, always); }
+//    h2.inside {@include column-break(inside); }
+//
+//  Which generates:
+//  h2.before {
+//    -webkit-column-break-before: always;
+//    break-before: always;}
+//
+//  h2.after {
+//    -webkit-column-break-after: always;
+//    break-after: always; }
+//
+//  h2.inside {
+//    -webkit-column-break-inside: auto;
+//    break-inside: auto;}
+
+@mixin column-break($type: before, $value: auto){
+  // Webkit uses non-standard syntax
+  @if $experimental-support-for-webkit {
+    -webkit-column-break-#{$type}: $value;
+  }
+
+  // Official syntax
+  break-#{$type}: $value;
+}
+
+// Mixin for setting break-before
 //
 // * legal values are auto, always, avoid, left, right, page, column, avoid-page, avoid-column
 //
-//  Example: 
-//    h2.before {@include column-break-before(always);}
+//  Example:
+//    h2.before {@include break-before(always);}
 //
-//  Which generates: 
+//  Which generates:
 //
-//  h2.before {    
+//  h2.before {
 //    -webkit-column-break-before: always;
-//    column-break-before: always;}
+//    break-before: always;}
+@mixin break-before($value: auto){
+  @include column-break(before, $value);
+}
+
 @mixin column-break-before($value: auto){
-   @include experimental(column-break-before, $value, not -moz, -webkit, not -o, not -ms, not -khtml, official );
+  @include column-break(before, $value);
+  @warn '"column-break-before" has been deprecated in favor of the official syntax: "break-before".';
 }
 
-// Mixin for setting column-break-after
+// Mixin for setting break-after
 //
 // * legal values are auto, always, avoid, left, right, page, column, avoid-page, avoid-column
 //
-//  Example: 
-//    h2.after {@include column-break-after(always); }
+//  Example:
+//    h2.after {@include break-after(always); }
 //
-//  Which generates: 
+//  Which generates:
 //
 //  h2.after {
 //    -webkit-column-break-after: always;
-//    column-break-after: always; }
+//    break-after: always; }
+@mixin break-after($value: auto){
+  @include column-break(after, $value);
+}
+
 @mixin column-break-after($value: auto){
-   @include experimental(column-break-after, $value, not -moz, -webkit, not -o, not -ms, not -khtml, official );
+  @include column-break(after, $value);
+  @warn '"column-break-after" has been deprecated in favor of the official syntax: "break-after".';
 }
 
-// Mixin for setting column-break-inside
+// Mixin for setting break-inside
 //
 // * legal values are auto, avoid, avoid-page, avoid-column
 //
-//  Example: 
-//    h2.inside {@include column-break-inside();}
-//  Which generates: 
-//  
+//  Example:
+//    h2.inside {@include break-inside();}
+//
+//  Which generates:
+//
 //  h2.inside {
 //    -webkit-column-break-inside: auto;
-//    column-break-inside: auto;}
+//    break-inside: auto;}
+@mixin break-inside($value: auto){
+  @include column-break(inside, $value);
+}
+
 @mixin column-break-inside($value: auto){
-   @include experimental(column-break-inside, $value, not -moz, -webkit, not -o, not -ms, not -khtml, official );
+  @include column-break(inside, $value);
+  @warn '"column-break-inside" has been deprecated in favor of the official syntax: "break-inside".';
 }
 
-// All-purpose mixin for setting column breaks.
+// Mixin for setting column-span
 //
-// * legal values for $type : before, after, inside 
-// * legal values for '$value' are dependent on $type
-//    * when $type = before, legal values are auto, always, avoid, left, right, page, column, avoid-page, avoid-column
-//    * when $type = after, legal values are auto, always, avoid, left, right, page, column, avoid-page, avoid-column
-//    * when $type = inside, legal values are auto, avoid, avoid-page, avoid-column
-//  
-//  Examples: 
-//    h2.before {@include column-break(before, always);}
-//    h2.after {@include column-break(after, always); }
-//    h2.inside {@include column-break(inside); }
+// * legal values: none, all
 //
-//  Which generates: 
-//  h2.before {    
-//    -webkit-column-break-before: always;
-//    column-break-before: always;}
-//  
-//  h2.after {
-//    -webkit-column-break-after: always;
-//    column-break-after: always; }
+//  Example:
+//    h2.span {@include column-span();}
+@mixin column-span($span: all){
+  @include experimental(column-span, unquote($span), $multicolumn-support...);
+}
+
+// Mixin for setting column-fill
 //
-//  h2.inside {
-//    -webkit-column-break-inside: auto;
-//    column-break-inside: auto;}
- 
-@mixin column-break($type: before, $value: auto){
-   @include experimental("column-break-#{$type}", $value, not -moz, -webkit, not -o, not -ms, not -khtml, official );
-}
+// * legal values: auto, balance
+//
+//  Example:
+//    h2.fill {@include column-fill();}
+@mixin column-fill($fill: balance){
+  @include experimental(column-fill, unquote($fill), $multicolumn-support...);
+}