_gradient.scss in compass-0.11.alpha.0

- old
+ new
@@ -1,82 +1,106 @@
-@import "shared";
+@import "compass/utilities/general/hacks";
+@import "images";
 
-// This yields a linear gradient spanning from top to bottom
+// The linear gradient mixin works best across browsers if you use percentage-based color stops.
 //
+// Examples:
+//
+//     // This yields a linear gradient spanning from top to bottom
 //     +linear-gradient(color-stops(white, black))
 //
-// This yields a linear gradient spanning from bottom to top
-//
+//     // This yields a linear gradient spanning from bottom to top
 //     +linear-gradient(color-stops(white, black), bottom)
 //
-// This yields a linear gradient spanning from left to right
-//
+//     // This yields a linear gradient spanning from left to right
 //     +linear-gradient(color-stops(white, black), left)
 //
-// This yields a linear gradient starting at white passing
-// thru blue at 33% down and then to black
-//
+//     // This yields a linear gradient starting at white passing
+//     // thru blue at 33% down and then to black
 //     +linear-gradient(color-stops(white, blue 33%, black))
 //
-// This yields a linear gradient starting at white passing
-// thru blue at 33% down and then to black at 67% until the end
-//
+//     // This yields a linear gradient starting at white passing
+//     // thru blue at 33% down and then to black at 67% until the end
 //     +linear-gradient(color-stops(white, blue 33%, black 67%))
 //
-// This yields a linear gradient on top of a background image
-//
+//     // This yields a background image on top of the gradient; requires an image
+//     // with an alpha-layer.
 //     +linear-gradient(color_stops(white,black), top, image-url('noise.png'))
+//
 // Browsers Supported:
 //
 // - Chrome
 // - Safari
 // - Firefox 3.6
+// - Opera
 
-@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(", "); }
-  $start: unquote($start);
-  $end: opposite-position($start);
-  @if $experimental-support-for-webkit {
-    background-image: #{$background}-webkit-gradient(linear, grad-point($start), grad-point($end), grad-color-stops($color-stops));
+@mixin linear-gradient($color-stops, $start: false, $image: false) {
+  @if $image {
+    @if $start {
+      @warn "The linear-gradient mixin is deprecated. Instead use: @include background-image(#{$image}, linear-gradient(#{$start}, #{$color-stops}))";
+    } @else {
+      @warn "The linear-gradient mixin is deprecated. Instead use: @include background-image(#{$image}, linear-gradient(#{$color-stops}))";
+    }
+  } @else {
+    @if $start {
+      @warn "The linear-gradient mixin is deprecated. Instead use: @include background-image(linear-gradient(#{$start}, #{$color-stops}))";
+    } @else {
+      @warn "The linear-gradient mixin is deprecated. Instead use: @include background-image(linear-gradient(#{$color-stops}))";
+    }
   }
-  @if $experimental-support-for-mozilla {
-    background-image: #{$background}-moz-linear-gradient($start, $color-stops);
-  }
-  background-image: #{$background}linear-gradient($start, $color-stops);
+  @if not $start { $start: top; }
+  @include background-image($image, linear-gradient($start, $color-stops));
 }
 
-// Due to limitation's of webkit, the radial gradient mixin works best if you use
+// Emit a IE-Specific filters that renders a simple linear gradient.
+// 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.
+@mixin filter-gradient($start-color, $end-color, $orientation: vertical) {
+  @include has-layout;
+  $gradient-type: if($orientation == vertical, 0, 1);
+  filter: progid:DXImageTransform.Microsoft.gradient(gradientType=#{$gradient-type}, startColorstr='#{ie-hex-str($start-color)}', endColorstr='#{ie-hex-str($end-color)}');
+  -ms-filter: "progid:DXImageTransform.Microsoft.gradient(gradientType=#{$gradient-type}, startColorstr='#{ie-hex-str($start-color)}', endColorstr='#{ie-hex-str($end-color)}')";
+}
+
+// Because of webkit's limitations, the radial gradient mixin works best if you use
 // pixel-based color stops.
 //
 // Examples:
 //
 //     // Defaults to a centered, 100px radius gradient
 //     +radial-gradient(color-stops(#c00, #00c))
+//
 //     // 100px radius gradient in the top left corner
 //     +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))
-//     // a background image on top of the gradient
-//     // Requires an image with an alpha-layer.
+//
+//     // A background image on top of a 100px radius gradient; requires an image
+//     // with an alpha-layer.
 //     +radial-gradient(color_stops(#c00, #fff), top left, image-url("noise.png")))
+//
 // Browsers Supported:
 //
 // - Chrome
 // - Safari
 // - Firefox 3.6
+// - Opera
 
-@mixin radial-gradient($color-stops, $center-position: center center, $image: false) {
-  $center-position: unquote($center-position);
-  $end-pos: grad-end-position($color-stops, true);
-  $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));
+@mixin radial-gradient($color-stops, $center-position: false, $image: false) {
+  @if $image {
+    @if $center-position {
+      @warn "The radial-gradient mixin is deprecated. Instead use: @include background-image(#{$image}, radial-gradient(#{$center-position}, #{$color-stops}))";
+    } @else {
+      @warn "The radial-gradient mixin is deprecated. Instead use: @include background-image(#{$image}, radial-gradient(#{$color-stops}))";
+    }
+  } @else {
+    @if $center-position {
+      @warn "The radial-gradient mixin is deprecated. Instead use: @include background-image(radial-gradient(#{$center-position}, #{$color-stops}))";
+    } @else {
+      @warn "The radial-gradient mixin is deprecated. Instead use: @include background-image(radial-gradient(#{$color-stops}))";
+    }
   }
-  @if $experimental-support-for-mozilla {
-    background-image: #{$background}-moz-radial-gradient($center-position, circle, $color-stops);
-  }
-  background-image: #{$background}radial-gradient($center-position, circle, $color-stops);
-}
\ No newline at end of file
+  @if not $center-position { $center-position: center center; }
+  @include background-image($image, radial-gradient($center-position, $color-stops));
+}