compass 0.10.0.rc4 → 0.10.0.rc5

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

@@ -1,29 +1,55 @@
 @import "shared";
 
 // Specify the number of columns
-@mixin column-count($n) { @include experimental(column-count, $n); }
+@mixin column-count($n) {
+  @include experimental(column-count, $n,
+    -moz, -webkit, -o, not -ms, not -khtml, official
+  );
+}
 
 // Specify the gap between columns e.g. `20px`
-@mixin column-gap($u) { @include experimental(column-gap, $u); }
+@mixin column-gap($u) {
+  @include experimental(column-gap, $u,
+    -moz, -webkit, -o, not -ms, not -khtml, official
+  );
+}
 
 // Specify the width of columns e.g. `100px`
-@mixin column-width($u) { @include experimental(column-width, $u); }
+@mixin column-width($u) {
+  @include experimental(column-width, $u,
+    -moz, -webkit, -o, not -ms, not -khtml, official
+  );
+}
 
 // Specify the width of the rule between columns e.g. `1px`
-@mixin column-rule-width($w) { @include experimental(rule-width, $w); }
+@mixin column-rule-width($w) {
+  @include experimental(rule-width, $w,
+    -moz, -webkit, -o, not -ms, not -khtml, official
+  );
+}
 
 // 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); }
+@mixin column-rule-style($s) {
+  @include experimental(rule-style, $s,
+    -moz, -webkit, -o, not -ms, not -khtml, official
+  );
+}
 
 // Specify the style of the rule between columns e.g. `dotted`.
 // This works like border-color.
 
-@mixin column-rule-color($c) { @include experimental(rule-color, $s); }
+@mixin column-rule-color($c) {
+  @include experimental(rule-color, $s,
+    -moz, -webkit, -o, not -ms, not -khtml, official
+  );
+}
 
 // Mixin encompassing all column rule rules
 // For example:
 //     +column-rule(1px, solid, #c00)
 @mixin column-rule($w, $s: solid, $c: black) {
-  @include experimental(column-rule, $w $s $c);
+  @include experimental(column-rule, $w $s $c,
+    -moz, -webkit, -o, not -ms, not -khtml, official
+  );
 }

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

@@ -22,18 +22,28 @@
 //
 //     +linear-gradient(color-stops(white, blue 33%, black 67%))
 //
+// This yields a linear gradient on top of a background image
+//
+//     +linear-gradient(color_stops(white,black), "top", image-url('noise.png'))
 // Browsers Supported:
 //
 // - Chrome
 // - Safari
 // - Firefox 3.6
 
-@mixin linear-gradient($color-stops, $start: top) {
+@mixin linear-gradient($color-stops, $start: top, $image: false) {
   // Firefox's gradient api is nice.
   // Webkit's gradient api sucks -- hence these backflips:
+  $background: unquote("");
+  @if $image { $background : $image + unquote(", "); }
   $end: grad-opposite-position($start);
-  background-image: -webkit-gradient(linear, #{grad-point($start)}, #{grad-point($end)}, #{grad-color-stops($color-stops)});
-  background-image: -moz-linear-gradient(#{$start}, #{$color-stops}); }
+  @if $experimental-support-for-webkit {
+    background-image: #{$background}-webkit-gradient(linear, grad-point($start), grad-point($end), grad-color-stops($color-stops));
+  }
+  @if $experimental-support-for-mozilla {
+    background-image: #{$background}-moz-linear-gradient($start, $color-stops);
+  }
+}
 
 // Due to limitation's of webkit, the radial gradient mixin works best if you use
 // pixel-based color stops.
@@ -46,14 +56,22 @@
 //     +radial-gradient(color-stops(#c00, #00c), "top left")
 //     // Three colors, ending at 50px and passing thru #fff at 25px
 //     +radial-gradient(color-stops(#c00, #fff, #00c 50px))
-//
+//     // gradient on top of a background image
+//     +radial-gradient(color_stops(#c00, #fff), "top left", image-url("noise.png")))
 // Browsers Supported:
 //
 // - Chrome
 // - Safari
 // - Firefox 3.6
 
-@mixin radial-gradient($color-stops, $center-position: unquote("center center")) {
+@mixin radial-gradient($color-stops, $center-position: center center, $image: false) {
   $end-pos: grad-end-position($color-stops, true);
-  background-image: -webkit-gradient(radial, #{grad-point($center-position)}, 0, #{grad-point($center-position)}, #{$end-pos}, #{grad-color-stops($color-stops)});
-  background-image: -moz-radial-gradient(#{$center-position}, circle, #{$color-stops}); }
+  $background: unquote("");
+  @if $image { $background: $image + unquote(", "); }
+  @if $experimental-support-for-webkit {
+    background-image: #{$background}-webkit-gradient(radial, grad-point($center-position), 0, grad-point($center-position), $end-pos, grad-color-stops($color-stops));
+  }
+  @if $experimental-support-for-mozilla {
+    background-image: #{$background}-moz-radial-gradient($center-position, circle, $color-stops);
+  }
+}

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

@@ -6,16 +6,26 @@
 //         A number between 0 and 1, where 0 is transparent and 1 is opaque.
 
 @mixin opacity($opacity) {
+  // XXX consider only using the official property. I think -moz, -webkit, and -o support it.
   @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
+    -moz,
+    -webkit,
+    -o,
+    not -ms, // microsoft uses the filters below instead
+    -khtml,
+    official
   );
-  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=#{round($opacity * 100)})";
-  filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=#{round($opacity * 100)});
+  @if $experimental-support-for-microsoft {
+    $value: unquote("progid:DXImageTransform.Microsoft.Alpha(Opacity=#{round($opacity * 100)})");
+    @include experimental(filter, $value,
+      not -moz,
+      not -webkit,
+      not -o,
+      -ms,
+      not -khtml,
+      official // even though filter is not an official css3 property, IE 6/7 expect it.
+    );
+  }
 }
 
 // Make an element completely transparent.

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

@@ -3,11 +3,11 @@ $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;
+$experimental-support-for-opera     : true !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;
+$experimental-support-for-khtml     : true !default;
 
 // This mixin provides basic support for CSS3 properties and
 // their corresponding experimental CSS2 properties when
@@ -21,12 +21,12 @@ $experimental-support-for-khtml     : false !default;
   $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; }
+  @if $moz     and $experimental-support-for-mozilla   {    -moz-#{$property} : $value; }
+  @if $webkit  and $experimental-support-for-webkit    { -webkit-#{$property} : $value; }
+  @if $o       and $experimental-support-for-opera     {      -o-#{$property} : $value; }
+  @if $ms      and $experimental-support-for-microsoft {     -ms-#{$property} : $value; }
+  @if $khtml   and $experimental-support-for-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
@@ -38,10 +38,10 @@ $experimental-support-for-khtml     : false !default;
   $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}; }
+  @if $moz     and $experimental-support-for-mozilla   { #{$property} :    -moz-#{$value}; }
+  @if $webkit  and $experimental-support-for-webkit    { #{$property} : -webkit-#{$value}; }
+  @if $o       and $experimental-support-for-opera     { #{$property} :      -o-#{$value}; }
+  @if $ms      and $experimental-support-for-microsoft { #{$property} :     -ms-#{$value}; }
+  @if $khtml   and $experimental-support-for-khtml     { #{$property} :  -khtml-#{$value}; }
+  @if $official                                        { #{$property} :         #{$value}; }
 }

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

@@ -1,26 +1,25 @@
 @import "shared";
 
-// Provides CSS text shadows.
-//
-// Arguments are color, horizontal offset, vertical offset, and blur
-
 // These defaults make the arguments optional for this mixin
-//
 // If you like, set different defaults in your project
 
-$default-text-shadow-color: #aaaaaa !default;
-
-$default-text-shadow-h-offset: 1px !default;
-
-$default-text-shadow-v-offset: 1px !default;
-
-$default-text-shadow-blur: 1px !default;
+$default-text-shadow-color:    #aaa !default;
+$default-text-shadow-h-offset: 1px  !default;
+$default-text-shadow-v-offset: 1px  !default;
+$default-text-shadow-blur:     1px  !default;
 
+// Provides CSS text shadows.
+// Arguments are color, horizontal offset, vertical offset, and blur
 @mixin text-shadow(
   $color: $default-text-shadow-color,
   $hoff: $default-text-shadow-h-offset,
   $voff: $default-text-shadow-v-offset,
   $blur: $default-text-shadow-blur
 ) {
-  text-shadow: $color $hoff $voff $blur;
+  // XXX I'm surprised we don't need experimental support for this property.
+  @if $color == none {
+    text-shadow: none;
+  } @else {
+    text-shadow: $color $hoff $voff $blur;    
+  }
 }

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

@@ -5,13 +5,17 @@
 // Apply a transform sent as a complete string.
 
 @mixin apply-transform($transform) {
-  @include experimental(transform, $transform);
+  @include experimental(transform, $transform,
+    -moz, -webkit, -o, not -ms, not -khtml, official
+  );
 }
 
 // Apply a transform-origin sent as a complete string.
 
 @mixin apply-origin($origin) {
-  @include experimental(transform-origin, $origin);
+  @include experimental(transform-origin, $origin,
+    -moz, -webkit, -o, not -ms, not -khtml, official
+  );
 }
 
 // transform-origin requires x and y coordinates

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

@@ -29,7 +29,9 @@ $default-transition-delay: false !default;
 // * also accepts "all" or "none"
 
 @mixin transition-property($properties: $default-transition-property) {
-  @include experimental(transition-property, $properties);
+  @include experimental(transition-property, $properties,
+    -moz, -webkit, -o, not -ms, not -khtml, official
+  );
 }
 
 // One or more durations in seconds
@@ -38,7 +40,9 @@ $default-transition-delay: false !default;
 // * these durations will affect the properties in the same list position
 
 @mixin transition-duration($duration: $default-transition-duration) {
-  @include experimental(transition-duration, $duration);
+  @include experimental(transition-duration, $duration,
+    -moz, -webkit, -o, not -ms, not -khtml, official
+  );
 }
 
 // One or more timing functions
@@ -48,7 +52,9 @@ $default-transition-delay: false !default;
 // * These functions will effect the properties in the same list position
 
 @mixin transition-timing-function($function: $default-transition-function) {
-  @include experimental(transition-timing-function, $function);
+  @include experimental(transition-timing-function, $function,
+    -moz, -webkit, -o, not -ms, not -khtml, official
+  );
 }
 
 // One or more transition-delays in seconds
@@ -57,7 +63,9 @@ $default-transition-delay: false !default;
 // * these delays will effect the properties in the same list position
 
 @mixin transition-delay($delay: $default-transition-delay) {
-  @include experimental(transition-delay, $delay);
+  @include experimental(transition-delay, $delay,
+    -moz, -webkit, -o, not -ms, not -khtml, official
+  );
 }
 
 // Transition all-in-one shorthand

data/frameworks/compass/stylesheets/compass/reset/_utilities.scss

@@ -0,0 +1,133 @@
+// Based on [Eric Meyer's reset](http://meyerweb.com/eric/thoughts/2007/05/01/reset-reloaded/)
+// Global reset rules.
+// For more specific resets, use the reset mixins provided below
+//
+// *Please Note*: tables still need `cellspacing="0"` in the markup.
+@mixin global-reset {
+  html, body, div, span, applet, object, iframe,
+  h1, h2, h3, h4, h5, h6, p, blockquote, pre,
+  a, abbr, acronym, address, big, cite, code,
+  del, dfn, em, font, img, ins, kbd, q, s, samp,
+  small, strike, strong, sub, sup, tt, var,
+  dl, dt, dd, ol, ul, li,
+  fieldset, form, label, legend,
+  table, caption, tbody, tfoot, thead, tr, th, td {
+    @include reset-box-model;
+    @include reset-font; }
+  body {
+    @include reset-body; }
+  ol, ul {
+    @include reset-list-style; }
+  table {
+    @include reset-table; }
+  caption, th, td {
+    @include reset-table-cell; }
+  q, blockquote {
+    @include reset-quotation; }
+  a img {
+    @include reset-image-anchor-border; } }
+
+// Reset all elements within some selector scope. To reset the selector itself,
+// mixin the appropriate reset mixin for that element type as well. This could be
+// useful if you want to style a part of your page in a dramatically different way.
+//
+// *Please Note*: tables still need `cellspacing="0"` in the markup.
+@mixin nested-reset {
+  div, span, object, iframe, h1, h2, h3, h4, h5, h6, p,
+  pre, a, abbr, acronym, address, code, del, dfn, em, img,
+  dl, dt, dd, ol, ul, li, fieldset, form, label, legend, caption, tbody, tfoot, thead, tr {
+    @include reset-box-model;
+    @include reset-font; }
+  table {
+    @include reset-table; }
+  caption, th, td {
+    @include reset-table-cell; }
+  q, blockquote {
+    @include reset-quotation; }
+  a img {
+    @include reset-image-anchor-border; } }
+
+// Reset the box model measurements.
+@mixin reset-box-model {
+  margin: 0;
+  padding: 0;
+  border: 0;
+  outline: 0; }
+
+// Reset the font and vertical alignment.
+@mixin reset-font {
+  font: {
+    weight: inherit;
+    style: inherit;
+    size: 100%;
+    family: inherit; };
+  vertical-align: baseline; }
+
+// Resets the outline when focus.
+// For accessibility you need to apply some styling in its place.
+@mixin reset-focus {
+  outline: 0; }
+
+// Reset a body element.
+@mixin reset-body {
+  line-height: 1;
+  color: black;
+  background: white; }
+
+// Reset the list style of an element.
+@mixin reset-list-style {
+  list-style: none; }
+
+// Reset a table
+@mixin reset-table {
+  border-collapse: separate;
+  border-spacing: 0;
+  vertical-align: middle; }
+
+// Reset a table cell (`th`, `td`)
+@mixin reset-table-cell {
+  text-align: left;
+  font-weight: normal;
+  vertical-align: middle; }
+
+// Reset a quotation (`q`, `blockquote`)
+@mixin reset-quotation {
+  quotes: "" "";
+  &:before, &:after {
+    content: ""; } }
+
+// Resets the border.
+@mixin reset-image-anchor-border {
+  border: none; }
+
+// Unrecognized elements are displayed inline.
+// This reset provides a basic reset for html5 elements
+// so they are rendered correctly in browsers that don't recognize them.
+@mixin reset-html5 {
+  section, article, aside, header, footer, nav, dialog, figure {
+    display: block; } }
+
+// Resets the display of inline and block elements to their default display
+// according to their tag type. Elements that have a default display that varies across
+// versions of html or browser are not handled here, but this covers the 90% use case.
+// Usage Example:
+//
+//     // Turn off the display for both of these classes
+//     .unregistered-only, .registered-only
+//       display: none
+//     // Now turn only one of them back on depending on some other context.
+//     body.registered
+//       +reset-display(".registered-only")
+//     body.unregistered
+//       +reset-display(".unregistered-only")
+@mixin reset-display($selector: "", $important: false) {
+  #{append-selector(elements-of-type("inline"), $selector)} {
+    @if $important {
+      display: inline !important; }
+    @else {
+      display: inline; } }
+  #{append-selector(elements-of-type("block"), $selector)} {
+    @if $important {
+      display: block !important; }
+    @else {
+      display: block; } } }

data/frameworks/compass/stylesheets/compass/utilities/_text.scss

@@ -1,2 +1,3 @@
+@import "text/ellipsis";
 @import "text/nowrap";
 @import "text/replacement";