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