compass 0.10.0.rc3 → 0.10.0.rc4

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

@@ -1,5 +1,7 @@
 // Override `$default-background-origin` to change the default.
 
+@import "shared";
+
 $default-background-origin: content-box !default;
 
 // Position the background off the edge of the padding, border or content
@@ -14,11 +16,26 @@ $default-background-origin: content-box !default;
 
 @mixin background-origin($origin: $default-background-origin) {
   // webkit and mozilla use the deprecated short [border | padding | content]
-  $deprecated: padding;
-  @if $origin == border-box { $deprecated: border; }
+  $deprecated: $origin;
+  @if $origin == padding-box { $deprecated: padding; }
+  @if $origin == border-box  { $deprecated: border;  }
   @if $origin == content-box { $deprecated: content; }
 
-          background-origin: $origin;
-  -webkit-background-origin: $deprecated;
-     -moz-background-origin: $deprecated;
+  // Support for webkit and mozilla's use of the deprecated short form
+  @include experimental(background-origin, $deprecated,
+    $experimental-support-for-mozilla,
+    $experimental-support-for-webkit,
+    false, // opera
+    false, // microsoft
+    false, // khtml
+    false  // official
+  );
+  @include experimental(background-origin, $origin,
+    false, // mozilla
+    false, // webkit
+    $experimental-support-for-opera,
+    $experimental-support-for-microsoft,
+    $experimental-support-for-khtml,
+    true // official
+  );
 }

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

@@ -1,15 +1,13 @@
-// Set the size of background images using px, width and height, or percentages. Supported in: Opera, Gecko, Webkit.
-//
-// * percentages are relative to the background-origin (default = padding-box)
-// * mixin defaults to "100% auto"
+@import "shared";
 
-//  override constants to change defaults
+//  override to change the default
 $default-background-size: 100% auto !default;
 
+// Set the size of background images using px, width and height, or percentages.
+// Currently supported in: Opera, Gecko, Webkit.
+//
+// * percentages are relative to the background-origin (default = padding-box)
+// * mixin defaults to: `$default-background-size`
 @mixin background-size($size: $default-background-size) {
-          background-size: $size;
-  -webkit-background-size: $size;
-       -o-background-size: $size;
-   -khtml-background-size: $size;
-     -moz-background-size: $size;
+  @include experimental(background-size, $size);
 }

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

@@ -1,58 +1,78 @@
+@import "shared";
+
 $default-border-radius: 5px !default;
 
-// Round all borders by a specific amount, defaults to value of $default-border-radius
+// Round all corners by a specific amount, defaults to value of `$default-border-radius`.
 
 @mixin border-radius($radius: $default-border-radius) {
-  border-radius: $radius;
-  -moz-border-radius: $radius;
-  -webkit-border-radius: $radius; }
+  @include experimental(border-radius, $radius);
+}
 
 // Round radius at position by amount.
 //
-// * values for $vert: "top", "bottom"
-// * values for $horz: "left", "right"
+// * legal values for `$vert`: `top`, `bottom`
+// * legal values for `$horz`: `left`, `right`
 
 @mixin border-corner-radius($vert, $horz, $radius: $default-border-radius) {
   border-#{$vert}-#{$horz}-radius: $radius;
   -moz-border-radius-#{$vert}#{$horz}: $radius;
-  -webkit-border-#{$vert}-#{$horz}-radius: $radius; }
-
-// Round top-left radius only
+  -webkit-border-#{$vert}-#{$horz}-radius: $radius;
+  // Support for mozilla's syntax for specifying a corner
+  @include experimental("border-radius-#{$vert}#{$horz}", $radius,
+    $experimental-support-for-mozilla,
+    false, // webkit
+    false, // opera
+    false, // microsoft
+    false, // khtml
+    false  // official
+  );
+  @include experimental("border-#{$vert}-#{$horz}-radius", $radius,
+    false, // mozilla
+    $experimental-support-for-webkit,
+    $experimental-support-for-opera,
+    $experimental-support-for-microsoft,
+    $experimental-support-for-khtml,
+    true // official
+  );
+  
+}
+
+// Round top-left corner only
 
 @mixin border-top-left-radius($radius: $default-border-radius) {
   @include border-corner-radius(top, left, $radius); }
 
-// Round top-right radius only
+// Round top-right corner only
 
 @mixin border-top-right-radius($radius: $default-border-radius) {
   @include border-corner-radius(top, right, $radius); }
 
-// Round bottom-left radius only
+// Round bottom-left corner only
 
 @mixin border-bottom-left-radius($radius: $default-border-radius) {
   @include border-corner-radius(bottom, left, $radius); }
 
-// Round bottom-right radius only
+// Round bottom-right corner only
 
 @mixin border-bottom-right-radius($radius: $default-border-radius) {
   @include border-corner-radius(bottom, right, $radius); }
 
-// Round top corners by amount
+// Round both top corners by amount
 @mixin border-top-radius($radius: $default-border-radius) {
   @include border-top-left-radius($radius);
   @include border-top-right-radius($radius); }
 
-// Round right corners by amount
+// Round both right corners by amount
 @mixin border-right-radius($radius: $default-border-radius) {
   @include border-top-right-radius($radius);
   @include border-bottom-right-radius($radius); }
 
-// Round bottom corners by amount
+// Round both bottom corners by amount
 @mixin border-bottom-radius($radius: $default-border-radius) {
   @include border-bottom-left-radius($radius);
   @include border-bottom-right-radius($radius); }
 
-// Round left corners by amount
+// Round both left corners by amount
 @mixin border-left-radius($radius: $default-border-radius) {
   @include border-top-left-radius($radius);
   @include border-bottom-left-radius($radius); }

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

@@ -3,6 +3,8 @@
 // If you like, set different defaults before importing.
 // @doc on
 
+@import "shared";
+
 // The default color for box shadows
 $default-box-shadow-color: #333333 !default;
 
@@ -18,10 +20,15 @@ $default-box-shadow-blur: 5px !default;
 // Provides cross-browser CSS box shadows for Webkit, Gecko, and CSS3.
 // Arguments are color, horizontal offset, vertical offset, and blur length.
 
-@mixin box-shadow($color: $default-box-shadow-color, $hoff: $default-box-shadow-h-offset, $voff: $default-box-shadow-v-offset, $blur: $default-box-shadow-blur) {
-  /* Webkit (Safari, Chrome) */
-  -webkit-box-shadow: $color $hoff $voff $blur;
-  /* Gecko (Firefox, Camino) */
-  -moz-box-shadow: $color $hoff $voff $blur;
-  /* CSS3 */
-  box-shadow: $color $hoff $voff $blur; }
+@mixin box-shadow(
+  $color: $default-box-shadow-color,
+  $hoff: $default-box-shadow-h-offset,
+  $voff: $default-box-shadow-v-offset,
+  $blur: $default-box-shadow-blur
+) {
+  @if $color == none {
+    @include experimental(box-shadow, none);
+  } @else {
+    @include experimental(box-shadow, $color $hoff $voff $blur);
+  }
+}

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

@@ -1,14 +1,10 @@
+@import "shared";
+
 // Change the box model for Mozilla, Webkit, IE8 and the future
 //
 // @param $bs
 //   [ content-box | border-box ]
 
 @mixin box-sizing($bs) {
-  /* Mozilla (FireFox, Camino) */
-  -moz-box-sizing: $bs;
-  /* Webkit (Safari, Chrome) */
-  -webkit-box-sizing: $bs;
-  /* IE (8) */
-  -ms-box-sizing: $bs;
-  /* CSS3 */
-  box-sizing: $bs; }
+  @include experimental(box-sizing, $bs);
+}

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

@@ -0,0 +1,89 @@
+@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);
+}
+
+// Default box orientation, assuming that the user wants something less block-like
+$default-box-orient: horizontal !default;
+
+// Box orientation [ horizontal | vertical | inline-axis | block-axis | inherit ]
+@mixin box-orient(
+  $orientation: $default-box-orient
+) {
+  @include experimental(box-orient, $orientation);
+}
+
+// Default box-align
+$default-box-align: stretch !default;
+
+// Box align [ start | end | center | baseline | stretch ]
+@mixin box-align(
+  $alignment: $default-box-align
+) {
+  @include experimental(box-align, $alignment);
+}
+
+// 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.
+//
+// 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);
+  display: block;
+}
+
+// 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);
+}
+
+// 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);
+}
+
+// Box direction default value
+$default-box-direction: normal !default;
+
+// mixin for box-direction [ normal | reverse | inherit ]
+@mixin box-direction(
+  $direction: $default-box-direction
+) {
+  @include experimental(box-direction, $direction);
+}
+
+// default for box lines
+$default-box-lines: single !default;
+
+// mixin for box lines [ single | multiple ]
+@mixin box-lines(
+  $lines: $default-box-lines
+) {
+  @include experimental(box-lines, $lines);
+}
+
+// default for box pack
+$default-box-pack: start !default;
+
+// mixin for box pack [ start | end | center | justify ]
+@mixin box-pack(
+  $pack: $default-box-pack
+) {
+  @include experimental(box-pack, $pack);
+}

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

@@ -1,50 +1,29 @@
-// Specify the # of columns
+@import "shared";
 
-@mixin column-count($n) {
-  -moz-column-count: $n;
-  -webkit-column-count: $n;
-  column-count: $n; }
+// Specify the number of columns
+@mixin column-count($n) { @include experimental(column-count, $n); }
 
-// Specify the gap between columns e.g. 20px
+// Specify the gap between columns e.g. `20px`
+@mixin column-gap($u) { @include experimental(column-gap, $u); }
 
-@mixin column-gap($u) {
-  -moz-column-gap: $u;
-  -webkit-column-gap: $u;
-  column-gap: $u; }
+// Specify the width of columns e.g. `100px`
+@mixin column-width($u) { @include experimental(column-width, $u); }
 
-// Specify the width of columns e.g. 100px
+// Specify the width of the rule between columns e.g. `1px`
+@mixin column-rule-width($w) { @include experimental(rule-width, $w); }
 
-@mixin column-width($u) {
-  -moz-column-width: $u;
-  -webkit-column-width: $u;
-  column-width: $u; }
+// Specify the style of the rule between columns e.g. `dotted`.
+// This works like border-style.
+@mixin column-rule-style($s) { @include experimental(rule-style, $s); }
 
-// Specify the width of the rule between columns e.g. 1px
+// Specify the style of the rule between columns e.g. `dotted`.
+// This works like border-color.
 
-@mixin column-rule-width($w) {
-  -moz-column-rule-width: $w;
-  -webkit-column-rule-width: $w;
-  column-rule-width: $w; }
-
-// Specify the style of the rule between columns e.g. 'dotted'. This works like border-style.
-
-@mixin column-rule-style($s) {
-  -moz-column-rule-style: $s;
-  -webkit-column-rule-style: $s;
-  column-rule-style: $s; }
-
-// Specify the style of the rule between columns e.g. 'dotted'. This works like border-color.
-
-@mixin column-rule-color($c) {
-  -moz-column-rule-color: $c;
-  -webkit-column-rule-color: $c;
-  column-rule-color: $c; }
+@mixin column-rule-color($c) { @include experimental(rule-color, $s); }
 
 // Mixin encompassing all column rule rules
 // For example:
-//     +column-rule('1px', 'solid', '#000')
-
-@mixin column-rule($w, $s: solid, $c: unquote(" ")) {
-  @include column-rule-width($w);
-  @include column-rule-style($s);
-  @include column-rule-color($c); }
+//     +column-rule(1px, solid, #c00)
+@mixin column-rule($w, $s: solid, $c: black) {
+  @include experimental(column-rule, $w $s $c);
+}

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

@@ -1,8 +1,10 @@
+@import "shared";
+
 // Cross-browser support for @font-face. Supports IE, Gecko, Webkit, Opera.
 //
 // * $name is required, arbitrary, and what you will use in font stacks.
 // * $font-files is required using font-files('relative/location', 'format').
-//   * for best results use this order: woff, opentype/truetype, svg
+//   for best results use this order: woff, opentype/truetype, svg
 // * $eot is required by IE, and is a relative location of the eot file.
 // * postscript name is required by some browsers to look for local fonts.
 

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

@@ -1,3 +1,5 @@
+@import "shared";
+
 // This yields a linear gradient spanning from top to bottom
 //
 //     +linear-gradient(color-stops(white, black))

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

@@ -1,13 +1,12 @@
+@import "shared";
+
 // Provides a cross-browser method to implement `display: inline-block;`
-//
-// This file is a sass file to work around the fact that the
-// SCSS parser does not support the #prop hack at this time.
-// http://github.com/nex3/haml/issues/issue/119
 
 @mixin inline-block {
   display: -moz-inline-box;
   -moz-box-orient: vertical;
   display: inline-block;
   vertical-align: middle;
-  #display: inline;
-  #vertical-align: auto; }
+  *display: inline;
+  *vertical-align: auto;
+}

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

@@ -1,19 +1,25 @@
+@import "shared";
+
 // Provides cross-browser CSS opacity. Takes a number between 0 and 1 as the argument, e.g. 0.5 for 50% opacity.
 //
 //     @param $opacity
 //         A number between 0 and 1, where 0 is transparent and 1 is opaque.
 
 @mixin opacity($opacity) {
-  opacity: $opacity;
-  -moz-opacity: $opacity;
-  -khtml-opacity: $opacity;
-  -ms-filter: unquote("progid:DXImageTransform.Microsoft.Alpha(Opacity=") + round($opacity * 100) + unquote(")");
-  filter: unquote("alpha(opacity=") + round($opacity * 100) + unquote(")"); }
+  @include experimental(opacity, $opacity,
+    $experimental-support-for-mozilla,
+    $experimental-support-for-webkit,
+    $experimental-support-for-opera,
+    false, // microsoft uses filters below instead
+    $experimental-support-for-khtml,
+    true // official
+  );
+  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=#{round($opacity * 100)})";
+  filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=#{round($opacity * 100)});
+}
 
 // Make an element completely transparent.
-@mixin transparent {
-  @include opacity(0); }
+@mixin transparent { @include opacity(0); }
 
 // Make an element completely opaque.
-@mixin opaque {
-  @include opacity(1); }
+@mixin opaque { @include opacity(1); }

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

@@ -0,0 +1,47 @@
+// Support for mozilla in experimental css3 properties.
+$experimental-support-for-mozilla   : true !default;
+// Support for webkit in experimental css3 properties.
+$experimental-support-for-webkit    : true !default;
+// Support for opera in experimental css3 properties.
+$experimental-support-for-opera     : false !default;
+// Support for microsoft in experimental css3 properties.
+$experimental-support-for-microsoft : true !default;
+// Support for khtml in experimental css3 properties.
+$experimental-support-for-khtml     : false !default;
+
+// This mixin provides basic support for CSS3 properties and
+// their corresponding experimental CSS2 properties when
+// the implementations are identical except for the property
+// prefix.
+@mixin experimental($property, $value,
+  $moz      : $experimental-support-for-mozilla,
+  $webkit   : $experimental-support-for-webkit,
+  $o        : $experimental-support-for-opera,
+  $ms       : $experimental-support-for-microsoft,
+  $khtml    : $experimental-support-for-khtml,
+  $official : true
+) {
+  @if $moz      {    -moz-#{$property} : $value; }
+  @if $webkit   { -webkit-#{$property} : $value; }
+  @if $o        {      -o-#{$property} : $value; }
+  @if $ms       {     -ms-#{$property} : $value; }
+  @if $khtml    {  -khtml-#{$property} : $value; }
+  @if $official {         #{$property} : $value; }
+}
+
+// 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,
+  $webkit   : $experimental-support-for-webkit,
+  $o        : $experimental-support-for-opera,
+  $ms       : $experimental-support-for-microsoft,
+  $khtml    : $experimental-support-for-khtml,
+  $official : true
+) {
+  @if $moz      { #{$property} :    -moz-#{$value}; }
+  @if $webkit   { #{$property} : -webkit-#{$value}; }
+  @if $o        { #{$property} :      -o-#{$value}; }
+  @if $ms       { #{$property} :     -ms-#{$value}; }
+  @if $khtml    { #{$property} :  -khtml-#{$value}; }
+  @if $official { #{$property} :         #{$value}; }
+}