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

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

@@ -1,58 +1,61 @@
 @import "shared";
 
+// ----------------------------------------------------------------------------
+// @private css3-feature-support variables must always include a list of five boolean values
+// representing in order: -moz, -webkit, -o, -ms, -khtml
+$multicolumn-support: -moz, -webkit, not -o, not -ms, not -khtml;
+
+// ----------------------------------------------------------------------------
+// Mixins
+
 // 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, not -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, not -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, not -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, not -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(rule-width, $width,
-    -moz, -webkit, not -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(rule-style, unquote($style),
-    -moz, -webkit, not -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(rule-color, $color,
-    -moz, -webkit, not -o, -ms, not -khtml, official
-  );
+  @include experimental(rule-color, $color, $multicolumn-support...);
 }
 
 // Mixin encompassing all column rule properties
@@ -65,7 +68,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, not -o, -ms, not -khtml, official
-  );
+  @include experimental(column-rule, $full, $multicolumn-support...);
+}
+
+// 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 break-before(always);}
+//
+//  Which generates:
+//
+//  h2.before {
+//    -webkit-column-break-before: always;
+//    break-before: always;}
+@mixin break-before($value: auto){
+  @include column-break(before, $value);
+}
+
+@mixin column-break-before($value: auto){
+  @include column-break(before, $value);
+  @warn '"column-break-before" has been deprecated in favor of the official syntax: "break-before".'
+}
+
+// Mixin for setting break-after
+//
+// * legal values are auto, always, avoid, left, right, page, column, avoid-page, avoid-column
+//
+//  Example:
+//    h2.after {@include break-after(always); }
+//
+//  Which generates:
+//
+//  h2.after {
+//    -webkit-column-break-after: always;
+//    break-after: always; }
+@mixin break-after($value: auto){
+  @include column-break(after, $value);
+}
+
+@mixin column-break-after($value: auto){
+  @include column-break(after, $value);
+  @warn '"column-break-after" has been deprecated in favor of the official syntax: "break-after".'
+}
+
+// Mixin for setting break-inside
+//
+// * legal values are auto, avoid, avoid-page, avoid-column
+//
+//  Example:
+//    h2.inside {@include break-inside();}
+//
+//  Which generates:
+//
+//  h2.inside {
+//    -webkit-column-break-inside: auto;
+//    break-inside: auto;}
+@mixin break-inside($value: auto){
+  @include column-break(inside, $value);
+}
+
+@mixin column-break-inside($value: auto){
+  @include column-break(inside, $value);
+  @warn '"column-break-inside" has been deprecated in favor of the official syntax: "break-inside".'
+}
+
+// Mixin for setting column-span
+//
+// * legal values: none, all
+//
+//  Example:
+//    h2.span {@include column-span();}
+@mixin column-span($span: all){
+  @include experimental(column-span, unquote($span), $multicolumn-support...);
+}
+
+// Mixin for setting column-fill
+//
+// * legal values: auto, balance
+//
+//  Example:
+//    h2.fill {@include column-fill();}
+@mixin column-fill($fill: balance){
+  @include experimental(column-fill, unquote($fill), $multicolumn-support...);
 }

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

@@ -0,0 +1,44 @@
+@import "shared";
+
+// ----------------------------------------------------------------------------
+// @private css3-feature-support variables must always include a list of five boolean values
+// representing in order: -moz, -webkit, -o, -ms, -khtml
+$filter-support: -moz, -webkit, not -o, not -ms, not -khtml;
+
+// ----------------------------------------------------------------------------
+// Mixins
+
+// Provides cross-browser support for the upcoming (?) css3 filter property.
+//
+// The filter argument should adhere to the standard css3 syntax
+// for the filter property.
+@mixin filter($filters) {
+  @include experimental(filter, $filters, $filter-support...);
+}
+
+// @private Apply filter-margins
+@mixin apply-filter-margin($position, $width) {
+  @include experimental(filter-margin-#{$position}, $width, $filter-support...);
+}
+
+// filter-margin-top
+@mixin filter-margin-top($width) { @include apply-filter-margin(top, $width); }
+
+// filter-margin-right
+@mixin filter-margin-right($width) { @include apply-filter-margin(right, $width); }
+
+// filter-margin-bottom
+@mixin filter-margin-bottom($width) { @include apply-filter-margin(bottom, $width); }
+
+// filter-margin-left
+@mixin filter-margin-left($width) { @include apply-filter-margin(left, $width); }
+
+// filter-margin
+@mixin filter-margin($widths) {
+  @include experimental(filter-margin, $widths, $filter-support...);
+}
+
+// color-interpolation-filters (auto | sRGB | linearRGB )
+@mixin color-interpolation-filters($value) {
+  @include experimental(color-interpolation-filters, $value, $filter-support...);
+}

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

@@ -0,0 +1,77 @@
+@import "shared";
+
+// Mixins to support specific CSS Text Level 3 elements
+//
+//
+//
+// Mixin for word-break properties
+// http://www.w3.org/css3-text/#word-break
+// * legal values for $type : normal, keep-all, break-all
+//
+// Example:
+//    p.wordBreak {@include word-break(break-all);}
+//
+// Which generates:
+//    p.wordBreak {
+//      -ms-word-break: break-all;
+//      word-break: break-all;
+//      word-break: break-word;}
+//
+@mixin word-break($value: normal){
+  @if $value == break-all {
+    //Most browsers handle the break-all case the same...
+    @include experimental(word-break, $value,
+      not -moz, not -webkit, not -o, -ms, not -khtml, official
+    );
+    //Webkit handles break-all differently... as break-word
+    @include experimental(word-break, break-word,
+      not -moz, not -webkit, not -o, not -ms, not -khtml, official
+    );
+  }
+  @else {
+    @include experimental(word-break, $value,
+      not -moz, not -webkit, not -o, -ms, not -khtml, official
+    );
+  }
+}
+
+// Mixin for the hyphens property
+//
+// W3C specification: http://www.w3.org/TR/css3-text/#hyphens
+// * legal values for $type : auto, manual, none
+//
+// Example:
+//  p {
+//    @include hyphens(auto);}
+// Which generates:
+//  p {
+//    -moz-hyphens: auto;
+//    -webkit-hyphens: auto;
+//    hyphens: auto;}
+//
+@mixin hyphens($value: auto){
+  @include experimental(hyphens, $value,
+    -moz, -webkit, not -o, not -ms, not -khtml, official
+  );
+}
+
+// Mixin for x-browser hyphenation based on @auchenberg's post:
+// Removes the need for the <wbr/> HTML tag
+// http://blog.kenneth.io/blog/2012/03/04/word-wrapping-hypernation-using-css/
+//
+//  Example:
+//  div {@include hyphenation;}
+//
+//  Which generates:
+//    div {
+//      -ms-word-break: break-all;
+//      word-break: break-all;
+//      word-break: break-word;
+//      -moz-hyphens: auto;
+//      -webkit-hyphens: auto;
+//      hyphens: auto;}
+//
+@mixin hyphenation{
+  @include word-break(break-all);
+  @include hyphens;
+}

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

@@ -23,7 +23,6 @@
   @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-microsoft    and prefixed(-ms,     $backgrounds) {      background:     -ms($backgrounds); }
   @if $experimental-support-for-pie          and $add-pie-bg                     { -pie-background:    -pie($backgrounds); }
                                                                                         background:         $backgrounds ;
 }
@@ -71,7 +70,6 @@
   @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-microsoft    and prefixed(-ms,     $images) { background-image:     -ms($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 ;
 }
@@ -80,6 +78,8 @@
 // For use in IE 6 - 8. Best practice would have you apply this via a
 // conditional IE stylesheet, but if you must, you should place this before
 // any background-image properties that you have specified.
+//
+// For the `$orientation` parameter, you can pass `vertical` or `horizontal`.
 @mixin filter-gradient($start-color, $end-color, $orientation: vertical) {
   @include has-layout;
   $gradient-type: if($orientation == vertical, 0, 1);

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

@@ -1,16 +1,22 @@
 @import "shared";
 
-// Provides a cross-browser method to implement `display: inline-block;`
+// Set `$inline-block-alignment` to `none` or `false` to disable the output
+// of a vertical-align property in the inline-block mixin.
+// Or set it to a legal value for `vertical-align` to change the default.
+$inline-block-alignment: middle !default;
 
-@mixin inline-block {
-  @if $legacy-support-for-ie {
-    & { *display: inline; }
+// Provides a cross-browser method to implement `display: inline-block;`
+@mixin inline-block($alignment: $inline-block-alignment) {
+  @if $legacy-support-for-mozilla {
+    display: -moz-inline-stack;
   }
-  display: -moz-inline-box;
-  -moz-box-orient: vertical;
   display: inline-block;
-  vertical-align: middle;
-  @if $legacy-support-for-ie {
+  @if $alignment and $alignment != none {
+    vertical-align: $alignment;
+  }
+  @if $legacy-support-for-ie6 or $legacy-support-for-ie7 {
     *vertical-align: auto;
+    zoom: 1;
+    *display: inline;
   }
 }

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

@@ -0,0 +1,31 @@
+@import "shared";
+
+// Add the selection selector to any element
+//
+// 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 selection {
+//       background-color: #fe57a1;
+//       color: #fff;
+//     }
+//
+// If a specific element is being styled, pass "&" as an argument to the mixin
+// as well. For example:
+//
+//     .hot-pink {
+//       @include selection("&") {
+//         background-color: #fe57a1;
+//         color: #fff;
+//       }
+//     }
+@mixin selection($selector: "") {
+  #{$selector}::selection {
+    @content;
+  }
+  @if $experimental-support-for-mozilla {
+    #{$selector}::-moz-selection {
+      @content;
+    }
+  }
+}

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

@@ -20,6 +20,18 @@
   @if $official                                        {         #{$property} : $value; }
 }
 
+// This mixin is a shortcut for applying only a single experimental value
+@mixin experimental-only-for($property, $value,
+  $moz      : false,
+  $webkit   : false,
+  $o        : false,
+  $ms       : false,
+  $khtml    : false,
+  $official : false
+) {
+  @include experimental($property, $value, $moz, $webkit, $o, $ms, $khtml, $official);
+}
+
 // Same as experimental(), but for cases when the property is the same and the value is vendorized
 @mixin experimental-value($property, $value,
   $moz      : $experimental-support-for-mozilla,
@@ -37,40 +49,214 @@
   @if $official                                        { #{$property} :         #{$value}; }
 }
 
+// A debug tool for checking browser support
+@mixin debug-support-matrix($experimental: true, $ie: true) {
+  @debug  #{'$moz-'}$experimental-support-for-mozilla
+          #{'$webkit-'}$experimental-support-for-webkit
+          #{'$microsoft-'}$experimental-support-for-microsoft
+          #{'$opera-'}$experimental-support-for-opera
+          #{'$khtml-'}$experimental-support-for-khtml;
+  @debug  #{'$ie6-'}$legacy-support-for-ie6
+          #{'$ie7-'}$legacy-support-for-ie7
+          #{'$ie8-'}$legacy-support-for-ie8;
+}
+
+// Capture the current exerimental support settings
+@function capture-experimental-matrix() {
+  @return $experimental-support-for-mozilla
+          $experimental-support-for-webkit
+          $experimental-support-for-microsoft
+          $experimental-support-for-opera
+          $experimental-support-for-khtml;
+}
+
+// Capture the current legacy-ie support settings
+@function capture-legacy-ie-matrix() {
+  @return $legacy-support-for-ie6
+          $legacy-support-for-ie7
+          $legacy-support-for-ie8;
+}
+
+// Capture and store support
+$experimental-matrix: capture-experimental-matrix();
+$legacy-ie-matrix: capture-legacy-ie-matrix();
+
+@mixin capture-experimental-matrix {
+  $experimental-matrix: capture-experimental-matrix();
+}
+
+@mixin capture-legacy-ie-matrix {
+  $legacy-ie-matrix: capture-legacy-ie-matrix();
+}
+
+@mixin capture-support-matrix {
+  @include capture-experimental-matrix;
+  @include capture-legacy-ie-matrix;
+}
+
 // Change the experimental-support settings in specific contexts.
-@mixin set-experimental-support($moz: false, $webkit: false, $ms: false, $o: false, $khtml: false) {
-  $experimental-support-for-mozilla: $moz;
-  $experimental-support-for-webkit: $webkit;
-  $experimental-support-for-microsoft: $ms;
-  $experimental-support-for-opera: $o;
-  $experimental-support-for-khtml: $khtml;
+@mixin set-experimental-support(
+  $moz    : false,
+  $webkit : false,
+  $ms     : false,
+  $o      : false,
+  $khtml  : false
+) {
+  $experimental-support-for-mozilla   : $moz;
+  $experimental-support-for-webkit    : $webkit;
+  $experimental-support-for-microsoft : $ms;
+  $experimental-support-for-opera     : $o;
+  $experimental-support-for-khtml     : $khtml;
+}
+
+@mixin capture-and-set-experimental(
+  $moz    : false,
+  $webkit : false,
+  $ms     : false,
+  $o      : false,
+  $khtml  : false
+) {
+  @include capture-experimental-matrix;
+  @include set-experimental-support($moz, $webkit, $ms, $o, $khtml);
+}
+
+@mixin capture-and-adjust-experimental(
+  $moz    : $experimental-support-for-mozilla,
+  $webkit : $experimental-support-for-webkit,
+  $ms     : $experimental-support-for-microsoft,
+  $o      : $experimental-support-for-opera,
+  $khtml  : $experimental-support-for-khtml
+) {
+  @include capture-experimental-matrix;
+  @include set-experimental-support($moz, $webkit, $ms, $o, $khtml);
 }
 
 // Change the legacy-support-for-ie* settings in specific contexts.
-@mixin set-legacy-ie-support($ie6: false, $ie7: false, $ie8: false) {
+@mixin set-legacy-ie-support(
+  $ie6: false,
+  $ie7: false,
+  $ie8: false
+) {
   $legacy-support-for-ie6: $ie6;
   $legacy-support-for-ie7: $ie7;
   $legacy-support-for-ie8: $ie8;
 }
 
-// This mixin allows you to change the experimental support settings for
-// child (@content) styles.
-@mixin with-only-support-for($moz: false, $webkit: false, $ms: false, $o: false, $khtml: false, $legacy-ie: false) {
+@mixin capture-and-set-legacy-ie(
+  $ie6: false,
+  $ie7: false,
+  $ie8: false
+) {
+  @include capture-legacy-ie-matrix;
+  @include set-legacy-ie-support($ie6, $ie7, $ie8);
+}
+
+@mixin capture-and-adjust-legacy-ie(
+  $ie6: $legacy-support-for-ie6,
+  $ie7: $legacy-support-for-ie7,
+  $ie8: $legacy-support-for-ie8
+) {
+  @include capture-and-set-legacy-ie($ie6, $ie7, $ie8);
+}
+
+// Capture current browser support matrix, and set a new matrix of support.
+@mixin capture-and-set-support(
+  $moz    : false,
+  $webkit : false,
+  $ms     : false,
+  $o      : false,
+  $khtml  : false,
+  $ie6    : false,
+  $ie7    : false,
+  $ie8    : false
+) {
   // Capture the current state
-  $original-moz: $experimental-support-for-mozilla;
-  $original-webkit: $experimental-support-for-webkit;
-  $original-o: $experimental-support-for-opera;
-  $original-ms: $experimental-support-for-microsoft;
-  $original-khtml: $experimental-support-for-khtml;
-  $original-ie6: $legacy-support-for-ie6;
-  $original-ie7: $legacy-support-for-ie7;
-  $original-ie8: $legacy-support-for-ie8;
+  @include capture-support-matrix;
+
   // Change support settings
   @include set-experimental-support($moz, $webkit, $ms, $o, $khtml);
-  @include set-legacy-ie-support($legacy-ie, $legacy-ie, $legacy-ie);
+  @include set-legacy-ie-support($ie6, $ie7, $ie8);
+}
+
+// Capture current browser support matrix, and set a new matrix of support.
+@mixin capture-and-adjust-support(
+  $moz        : $experimental-support-for-mozilla,
+  $webkit     : $experimental-support-for-webkit,
+  $ms         : $experimental-support-for-microsoft,
+  $o          : $experimental-support-for-opera,
+  $khtml      : $experimental-support-for-khtml,
+  $ie6        : $legacy-support-for-ie6,
+  $ie7        : $legacy-support-for-ie7,
+  $ie8        : $legacy-support-for-ie8
+) {
+  @include capture-and-set-support($moz, $webkit, $ms, $o, $khtml, $ie6, $ie7, $ie8);
+}
+
+
+// This mixin allows you to change the experimental support settings for
+// child (@content) styles.
+@mixin with-only-support-for(
+  $moz    : false,
+  $webkit : false,
+  $ms     : false,
+  $o      : false,
+  $khtml  : false,
+  $ie6    : false,
+  $ie7    : false,
+  $ie8    : false
+) {
+  // Capture current state
+  $wo-experimental-matrix : capture-experimental-matrix();
+  $wo-legacy-ie-matrix    : capture-legacy-ie-matrix();
+
+  // Set new states
+  @include set-experimental-support($moz, $webkit, $ms, $o, $khtml);
+  @include set-legacy-ie-support($ie6, $ie7, $ie8);
+
   // Apply styles
   @content;
+
   // Return to original support settings
-  @include set-legacy-ie-support($original-ie6, $original-ie7, $original-ie8);
-  @include set-experimental-support($original-moz, $original-webkit, $original-ms, $original-o, $original-khtml);
+  @include set-experimental-support($wo-experimental-matrix...);
+  @include set-legacy-ie-support($wo-legacy-ie-matrix...);
+}
+
+// This mixin is a shortcut for making slight adjustments to browser support
+// for child (@content) styles
+@mixin adjust-support-for(
+    $moz        : $experimental-support-for-mozilla,
+    $webkit     : $experimental-support-for-webkit,
+    $ms         : $experimental-support-for-microsoft,
+    $o          : $experimental-support-for-opera,
+    $khtml      : $experimental-support-for-khtml,
+    $ie6        : $legacy-support-for-ie6,
+    $ie7        : $legacy-support-for-ie7,
+    $ie8        : $legacy-support-for-ie8
+) {
+  @include with-only-support-for($moz, $webkit, $ms, $o, $khtml, $ie6, $ie7, $ie8) {
+    @content;
+  }
+}
+
+// Set a default value if the given arglist is empty
+@function set-arglist-default(
+  $arglist,
+  $default
+) {
+  $default: if(length($default) > 0, $default, null);
+  $output: compact();
+  @each $layer in $arglist {
+    $output: append($output, if($layer == 'default', $default, $layer));
+  }
+  @return if(length($output) > 0, $output, $default);
+}
+
+// @private Returns the legacy value for a given box-model
+// - Used by background-clip and -origin.
+@function legacy-box($box) {
+  $box: unquote($box);
+  @if $box == padding-box { $box: padding; }
+  @if $box == border-box { $box: border; }
+  @if $box == content-box { $box: content; }
+  @return $box;
 }