From 2f40eb9f7f76a50c2b024b94290abf6ec3673e63 Mon Sep 17 00:00:00 2001
From: Chris Eppstein <chris@eppsteins.net>
Date: Sat, 13 Nov 2010 00:49:16 -0800
Subject: [PATCH] Gradient mixin for IE6-8 using filters, only does simple
 linear gradients and must be applied seperately from the linear-gradient
 mixin. Closes GH-183.

---
 .../stylesheets/compass/css3/_gradient.scss       | 12 ++++++++++++
 lib/compass/sass_extensions/functions/colors.rb   |  9 +++++++++
 .../stylesheets/compass/css/gradients.css         | 15 +++++++++++++++
 .../stylesheets/compass/sass/gradients.sass       |  9 +++++++++
 4 files changed, 45 insertions(+)

diff --git a/frameworks/compass/stylesheets/compass/css3/_gradient.scss b/frameworks/compass/stylesheets/compass/css3/_gradient.scss
index bec19a89..fdf0b965 100644
--- a/frameworks/compass/stylesheets/compass/css3/_gradient.scss
+++ b/frameworks/compass/stylesheets/compass/css3/_gradient.scss
@@ -1,4 +1,5 @@
 @import "shared";
+@import "compass/utilities/general/hacks";
 
 // The linear gradient mixin works best across browsers if you use percentage-based color stops.
 //
@@ -52,6 +53,17 @@
   background-image: #{$background}linear-gradient($start, $color-stops);
 }
 
+// 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.
 //
diff --git a/lib/compass/sass_extensions/functions/colors.rb b/lib/compass/sass_extensions/functions/colors.rb
index 39643756..8f5f78ab 100644
--- a/lib/compass/sass_extensions/functions/colors.rb
+++ b/lib/compass/sass_extensions/functions/colors.rb
@@ -37,6 +37,15 @@ module Compass::SassExtensions::Functions::Colors
     color.with(:saturation => scale_color_value(color.saturation, amount.value))
   end
 
+  # returns an IE hex string for a color with an alpha channel
+  # suitable for passing to IE filters.
+  def ie_hex_str(color)
+    assert_type color, :Color
+    alpha = (color.alpha * 255).round
+    alphastr = alpha.to_s(16).rjust(2, '0')
+    Sass::Script::String.new("##{alphastr}#{color.send(:hex_str)[1..-1]}".upcase)
+  end
+
   private
   def scale_color_value(value, amount)
     if amount > 0
diff --git a/test/fixtures/stylesheets/compass/css/gradients.css b/test/fixtures/stylesheets/compass/css/gradients.css
index 4986f032..a3bcdd3d 100644
--- a/test/fixtures/stylesheets/compass/css/gradients.css
+++ b/test/fixtures/stylesheets/compass/css/gradients.css
@@ -217,3 +217,18 @@
   background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(40%, rgba(255, 255, 255, 0)), color-stop(45%, rgba(255, 127, 127, 0.5)), color-stop(50%, #ffffff));
   background-image: -moz-linear-gradient(top, rgba(255, 255, 255, 0) 40%, rgba(255, 127, 127, 0.5) 45%, #ffffff 50%);
   background-image: linear-gradient(top, rgba(255, 255, 255, 0) 40%, rgba(255, 127, 127, 0.5) 45%, #ffffff 50%); }
+
+.ie-horizontal-filter {
+  *zoom: 1;
+  filter: progid:DXImageTransform.Microsoft.gradient(gradientType=1, startColorstr='#FFFFFFFF', endColorstr='#FF000000');
+  -ms-filter: "progid:DXImageTransform.Microsoft.gradient(gradientType=1, startColorstr='#FFFFFFFF', endColorstr='#FF000000')"; }
+
+.ie-vertical-filter {
+  *zoom: 1;
+  filter: progid:DXImageTransform.Microsoft.gradient(gradientType=0, startColorstr='#FFFFFFFF', endColorstr='#FF000000');
+  -ms-filter: "progid:DXImageTransform.Microsoft.gradient(gradientType=0, startColorstr='#FFFFFFFF', endColorstr='#FF000000')"; }
+
+.ie-alpha-filter {
+  *zoom: 1;
+  filter: progid:DXImageTransform.Microsoft.gradient(gradientType=0, startColorstr='#FFFFFFFF', endColorstr='#00FFFFFF');
+  -ms-filter: "progid:DXImageTransform.Microsoft.gradient(gradientType=0, startColorstr='#FFFFFFFF', endColorstr='#00FFFFFF')"; }
diff --git a/test/fixtures/stylesheets/compass/sass/gradients.sass b/test/fixtures/stylesheets/compass/sass/gradients.sass
index 764cbb36..539c3f2b 100644
--- a/test/fixtures/stylesheets/compass/sass/gradients.sass
+++ b/test/fixtures/stylesheets/compass/sass/gradients.sass
@@ -140,3 +140,12 @@ $experimental-support-for-svg: true
 
 .alpha-linear-svg
   +linear-gradient(color_stops(rgba(255, 255, 255, 0) 40%, rgba(255, 127, 127, 0.5), rgba(255, 255, 255, 1) 50%))
+
+.ie-horizontal-filter
+  +filter-gradient(white, black, horizontal)
+
+.ie-vertical-filter
+  +filter-gradient(white, black, vertical)
+
+.ie-alpha-filter
+  +filter-gradient(rgba(#fff, 1), rgba(#fff, 0))
\ No newline at end of file