github-migration/compass
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Change the legacy gradient mixins to use the new background-image mixin.

Browse Source
This commit is contained in:
Chris Eppstein 2010-11-14 20:30:04 -08:00
parent a0f5b5a6ae
commit 3e01a9e990
5 changed files with 83 additions and 81 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

35
frameworks/compass/stylesheets/compass/css3/_gradient.scss
View File

@ -1,4 +1,5 @@
@import "compass/utilities/general/hacks";
@import "images";
// The linear gradient mixin works best across browsers if you use percentage-based color stops.
//
@ -33,23 +34,7 @@
// - 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-svg {
background-image: #{$background}linear-svg-gradient($color-stops, $start);
}
@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);
}
background-image: #{$background}#{linear}-gradient($start, $color-stops);
@include background-image($image, linear-gradient($start, $color-stops));
}
// Emit a IE-Specific filters that renders a simple linear gradient.
@ -89,19 +74,5 @@
// - 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-svg {
background-image: #{$background}radial-svg-gradient($color-stops, $center-position);
}
@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);
}
background-image: #{$background}#{radial}-gradient($center-position, circle, $color-stops);
@include background-image($image, radial-gradient($center-position, $color-stops));
}

4
frameworks/compass/stylesheets/compass/css3/_images.scss
View File

@ -15,9 +15,9 @@
) {
$images: compact($image-1, $image-2, $image-3, $image-4, $image-5, $image-6, $image-7, $image-8, $image-9, $image-10);
@if $experimental-support-for-mozilla and prefixed(-moz, $images) { background-image: -moz($images); }
@if $experimental-support-for-webkit and prefixed(-webkit, $images) { background-image: -webkit($images); }
@if $experimental-support-for-svg and prefixed(-svg, $images) { background-image: -svg($images); }
@if $experimental-support-for-webkit and prefixed(-webkit, $images) { background-image: -webkit($images); }
@if $experimental-support-for-mozilla and prefixed(-moz, $images) { background-image: -moz($images); }
background-image: $images;
}

33
lib/compass/sass_extensions/functions/gradient_support.rb
View File

@ -123,13 +123,29 @@ module Compass::SassExtensions::Functions::GradientSupport
module Functions
def radial_gradient(position_or_angle, shape_or_size, *color_stops)
# Have to deal with variable length/meaning arguments.
if color_stop?(shape_or_size)
color_stops.unshift(shape_or_size)
shape_or_size = nil
elsif list_of_color_stops?(shape_or_size)
# Support legacy use of the color-stops() function
color_stops = shape_or_size.values + color_stops
shape_or_size = nil
end
shape_or_size = nil if shape_or_size && !shape_or_size.to_bool # nil out explictly passed falses
# ditto for position_or_angle
if color_stop?(position_or_angle)
color_stops.unshift(position_or_angle)
position_or_angle = nil
elsif list_of_color_stops?(position_or_angle)
color_stops = position_or_angle.values + color_stops
position_or_angle = nil
end
position_or_angle = nil if position_or_angle && !position_or_angle.to_bool
# Support legacy use of the color-stops() function
if color_stops.size == 1 && list_of_color_stops?(color_stops.first)
color_stops = color_stops.first.values
end
RadialGradient.new(position_or_angle, shape_or_size, send(:color_stops, *color_stops))
end
@ -138,6 +154,15 @@ module Compass::SassExtensions::Functions::GradientSupport
if color_stop?(position_or_angle)
color_stops.unshift(position_or_angle)
position_or_angle = nil
elsif list_of_color_stops?(position_or_angle)
color_stops = position_or_angle.values + color_stops
position_or_angle = nil
end
position_or_angle = nil if position_or_angle && !position_or_angle.to_bool
# Support legacy use of the color-stops() function
if color_stops.size == 1 && list_of_color_stops?(color_stops.first)
color_stops = color_stops.first.values
end
LinearGradient.new(position_or_angle, send(:color_stops, *color_stops))
end
@ -233,6 +258,8 @@ module Compass::SassExtensions::Functions::GradientSupport
def color_stops(*args)
List.new(*args.map do |arg|
case arg
when ColorStop
arg
when Sass::Script::Color
ColorStop.new(arg)
when Sass::Script::String
@ -240,7 +267,7 @@ module Compass::SassExtensions::Functions::GradientSupport
# So we have to reparse the expression
parse_color_stop(arg)
else
raise Sass::SyntaxError, "Not a valid color stop: #{arg}"
raise Sass::SyntaxError, "Not a valid color stop: #{arg.class.name}: #{arg}"
end
end)
end
@ -423,6 +450,10 @@ module Compass::SassExtensions::Functions::GradientSupport
nil
end
def list_of_color_stops?(arg)
arg.is_a?(List) && arg.values.first.is_a?(ColorStop)
end
def linear_svg(color_stops, x1, y1, x2, y2)
gradient = %Q{<linearGradient id="grad" x1="#{x1}" y1="#{y1}" x2="#{x2}" y2="#{y2}">#{color_stops_svg(color_stops)}</linearGradient>}
svg(gradient)

72
test/fixtures/stylesheets/compass/css/gradients.css vendored
View File

@ -2,21 +2,21 @@
background-image: url("foo.png"); }
.bg-linear-gradient {
background-image: -moz-linear-gradient(top left, #dddddd, #aaaaaa);
background-image: -webkit-gradient(linear, 0% 0%, 100% 100%, color-stop(0%, #dddddd), color-stop(100%, #aaaaaa));
background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiB4MT0iMCUiIHkxPSIwJSIgeDI9IjEwMCUiIHkyPSIxMDAlIj48c3RvcCBvZmZzZXQ9IjAlIiBzdG9wLWNvbG9yPSIjZGRkZGRkIi8+PHN0b3Agb2Zmc2V0PSIxMDAlIiBzdG9wLWNvbG9yPSIjYWFhYWFhIi8+PC9saW5lYXJHcmFkaWVudD48L2RlZnM+PHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgZmlsbD0idXJsKCNncmFkKSIgLz48L3N2Zz4g');
background-image: -webkit-gradient(linear, 0% 0%, 100% 100%, color-stop(0%, #dddddd), color-stop(100%, #aaaaaa));
background-image: -moz-linear-gradient(top left, #dddddd 0%, #aaaaaa 100%);
background-image: linear-gradient(top left, #dddddd 0%, #aaaaaa 100%); }
.bg-radial-gradient {
background-image: -moz-radial-gradient(center center, #dddddd, #aaaaaa 100px);
background-image: -webkit-gradient(radial, 50% 50%, 0, 50% 50%, 100, color-stop(0%, #dddddd), color-stop(100%, #aaaaaa));
background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PHJhZGlhbEdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgY3g9IjUwJSIgY3k9IjUwJSIgcj0iMTAwIj48c3RvcCBvZmZzZXQ9IjAlIiBzdG9wLWNvbG9yPSIjZGRkZGRkIi8+PHN0b3Agb2Zmc2V0PSIxMDAlIiBzdG9wLWNvbG9yPSIjYWFhYWFhIi8+PC9yYWRpYWxHcmFkaWVudD48L2RlZnM+PHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgZmlsbD0idXJsKCNncmFkKSIgLz48L3N2Zz4g');
background-image: -webkit-gradient(radial, 50% 50%, 0, 50% 50%, 100, color-stop(0%, #dddddd), color-stop(100%, #aaaaaa));
background-image: -moz-radial-gradient(center center, #dddddd 0%, #aaaaaa 100px);
background-image: radial-gradient(center center, #dddddd 0%, #aaaaaa 100px); }
.bg-all-gradient-types {
background-image: url('/images/4x6.png?busted=true'), -moz-linear-gradient(top left, #dddddd, #aaaaaa), -moz-radial-gradient(center center, #dddddd, #aaaaaa 100px);
background-image: url('/images/4x6.png?busted=true'), -webkit-gradient(linear, 0% 0%, 100% 100%, color-stop(0%, #dddddd), color-stop(100%, #aaaaaa)), -webkit-gradient(radial, 50% 50%, 0, 50% 50%, 100, color-stop(0%, #dddddd), color-stop(100%, #aaaaaa));
background-image: url('/images/4x6.png?busted=true'), url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiB4MT0iMCUiIHkxPSIwJSIgeDI9IjEwMCUiIHkyPSIxMDAlIj48c3RvcCBvZmZzZXQ9IjAlIiBzdG9wLWNvbG9yPSIjZGRkZGRkIi8+PHN0b3Agb2Zmc2V0PSIxMDAlIiBzdG9wLWNvbG9yPSIjYWFhYWFhIi8+PC9saW5lYXJHcmFkaWVudD48L2RlZnM+PHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgZmlsbD0idXJsKCNncmFkKSIgLz48L3N2Zz4g'), url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PHJhZGlhbEdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgY3g9IjUwJSIgY3k9IjUwJSIgcj0iMTAwIj48c3RvcCBvZmZzZXQ9IjAlIiBzdG9wLWNvbG9yPSIjZGRkZGRkIi8+PHN0b3Agb2Zmc2V0PSIxMDAlIiBzdG9wLWNvbG9yPSIjYWFhYWFhIi8+PC9yYWRpYWxHcmFkaWVudD48L2RlZnM+PHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgZmlsbD0idXJsKCNncmFkKSIgLz48L3N2Zz4g');
background-image: url('/images/4x6.png?busted=true'), -webkit-gradient(linear, 0% 0%, 100% 100%, color-stop(0%, #dddddd), color-stop(100%, #aaaaaa)), -webkit-gradient(radial, 50% 50%, 0, 50% 50%, 100, color-stop(0%, #dddddd), color-stop(100%, #aaaaaa));
background-image: url('/images/4x6.png?busted=true'), -moz-linear-gradient(top left, #dddddd 0%, #aaaaaa 100%), -moz-radial-gradient(center center, #dddddd 0%, #aaaaaa 100px);
background-image: url('/images/4x6.png?busted=true'), linear-gradient(top left, #dddddd 0%, #aaaaaa 100%), radial-gradient(center center, #dddddd 0%, #aaaaaa 100px); }
.border-image-gradient {
@ -53,13 +53,13 @@
content: radial-gradient(#00ff00 0%, #ff0000 10px); }
.bg-linear-gradient-no-position {
background-image: -moz-linear-gradient(#dddddd, #aaaaaa);
background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #dddddd), color-stop(100%, #aaaaaa));
background-image: -moz-linear-gradient(#dddddd 0%, #aaaaaa 100%);
background-image: linear-gradient(#dddddd 0%, #aaaaaa 100%); }
.bg-radial-gradient-no-position {
background-image: -moz-radial-gradient(#dddddd, #aaaaaa 100px);
background-image: -webkit-gradient(radial, 50% 50%, 0, 50% 50%, 100, color-stop(0%, #dddddd), color-stop(100%, #aaaaaa));
background-image: -moz-radial-gradient(#dddddd 0%, #aaaaaa 100px);
background-image: radial-gradient(#dddddd 0%, #aaaaaa 100px); }
.linear-1 {
@ -124,38 +124,38 @@
.radial-1 {
background-image: -webkit-gradient(radial, 50% 50%, 0, 50% 50%, 100, color-stop(0%, #dddddd), color-stop(100%, #aaaaaa));
background-image: -moz-radial-gradient(center center, circle, #dddddd 0%, #aaaaaa 100%);
background-image: radial-gradient(center center, circle, #dddddd 0%, #aaaaaa 100%); }
background-image: -moz-radial-gradient(center center, #dddddd 0%, #aaaaaa 100px);
background-image: radial-gradient(center center, #dddddd 0%, #aaaaaa 100px); }
.radial-2 {
background-image: -webkit-gradient(radial, 50% 50%, 0, 50% 50%, 100, color-stop(0%, #dddddd), color-stop(100%, #aaaaaa));
background-image: -moz-radial-gradient(center center, circle, #dddddd 0%, #aaaaaa 100%);
background-image: radial-gradient(center center, circle, #dddddd 0%, #aaaaaa 100%); }
background-image: -moz-radial-gradient(center center, #dddddd 0%, #aaaaaa 100px);
background-image: radial-gradient(center center, #dddddd 0%, #aaaaaa 100px); }
.radial-3 {
background-image: -webkit-gradient(radial, 50% 0%, 0, 50% 0%, 100, color-stop(0%, #dddddd), color-stop(100%, #aaaaaa));
background-image: -moz-radial-gradient(top center, circle, #dddddd 0%, #aaaaaa 100%);
background-image: radial-gradient(top center, circle, #dddddd 0%, #aaaaaa 100%); }
background-image: -moz-radial-gradient(top center, #dddddd 0%, #aaaaaa 100px);
background-image: radial-gradient(top center, #dddddd 0%, #aaaaaa 100px); }
.radial-4 {
background-image: -webkit-gradient(radial, 50% 50%, 0, 50% 50%, 100, color-stop(0%, #dddddd), color-stop(100%, #aaaaaa));
background-image: -moz-radial-gradient(center center, circle, #dddddd 0%, #aaaaaa 100%);
background-image: radial-gradient(center center, circle, #dddddd 0%, #aaaaaa 100%); }
background-image: -moz-radial-gradient(center center, #dddddd 0%, #aaaaaa 100px);
background-image: radial-gradient(center center, #dddddd 0%, #aaaaaa 100px); }
.radial-5 {
background-image: -webkit-gradient(radial, 50% 0%, 0, 50% 0%, 100, color-stop(0%, #dddddd), color-stop(100%, #aaaaaa));
background-image: -moz-radial-gradient(top center, circle, #dddddd 0%, #aaaaaa 100%);
background-image: radial-gradient(top center, circle, #dddddd 0%, #aaaaaa 100%); }
background-image: -moz-radial-gradient(top center, #dddddd 0%, #aaaaaa 100px);
background-image: radial-gradient(top center, #dddddd 0%, #aaaaaa 100px); }
.radial-6 {
background-image: -webkit-gradient(radial, 50% 50%, 0, 50% 50%, 50, color-stop(40%, #dddddd), color-stop(100%, #aaaaaa));
background-image: -moz-radial-gradient(center center, circle, #dddddd 20px, #aaaaaa 50px);
background-image: radial-gradient(center center, circle, #dddddd 20px, #aaaaaa 50px); }
background-image: -moz-radial-gradient(center center, #dddddd 20px, #aaaaaa 50px);
background-image: radial-gradient(center center, #dddddd 20px, #aaaaaa 50px); }
.radial-7 {
background-image: -webkit-gradient(radial, 50% 50%, 0, 50% 50%, 50, color-stop(20%, #dddddd), color-stop(100%, #aaaaaa));
background-image: -moz-radial-gradient(center center, circle, #dddddd 20%, #aaaaaa 50px);
background-image: radial-gradient(center center, circle, #dddddd 20%, #aaaaaa 50px); }
background-image: -moz-radial-gradient(center center, #dddddd 20%, #aaaaaa 50px);
background-image: radial-gradient(center center, #dddddd 20%, #aaaaaa 50px); }
.alpha-linear {
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));
@ -237,44 +237,44 @@
.radial-svg-1 {
background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PHJhZGlhbEdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgY3g9IjUwJSIgY3k9IjUwJSIgcj0iMTAwIj48c3RvcCBvZmZzZXQ9IjAlIiBzdG9wLWNvbG9yPSIjZGRkZGRkIi8+PHN0b3Agb2Zmc2V0PSIxMDAlIiBzdG9wLWNvbG9yPSIjYWFhYWFhIi8+PC9yYWRpYWxHcmFkaWVudD48L2RlZnM+PHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgZmlsbD0idXJsKCNncmFkKSIgLz48L3N2Zz4g');
background-image: -webkit-gradient(radial, 50% 50%, 0, 50% 50%, 100, color-stop(0%, #dddddd), color-stop(100%, #aaaaaa));
background-image: -moz-radial-gradient(center center, circle, #dddddd 0%, #aaaaaa 100%);
background-image: radial-gradient(center center, circle, #dddddd 0%, #aaaaaa 100%); }
background-image: -moz-radial-gradient(center center, #dddddd 0%, #aaaaaa 100px);
background-image: radial-gradient(center center, #dddddd 0%, #aaaaaa 100px); }
.radial-svg-2 {
background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PHJhZGlhbEdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgY3g9IjUwJSIgY3k9IjUwJSIgcj0iMTAwIj48c3RvcCBvZmZzZXQ9IjAlIiBzdG9wLWNvbG9yPSIjZGRkZGRkIi8+PHN0b3Agb2Zmc2V0PSIxMDAlIiBzdG9wLWNvbG9yPSIjYWFhYWFhIi8+PC9yYWRpYWxHcmFkaWVudD48L2RlZnM+PHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgZmlsbD0idXJsKCNncmFkKSIgLz48L3N2Zz4g');
background-image: -webkit-gradient(radial, 50% 50%, 0, 50% 50%, 100, color-stop(0%, #dddddd), color-stop(100%, #aaaaaa));
background-image: -moz-radial-gradient(center center, circle, #dddddd 0%, #aaaaaa 100%);
background-image: radial-gradient(center center, circle, #dddddd 0%, #aaaaaa 100%); }
background-image: -moz-radial-gradient(center center, #dddddd 0%, #aaaaaa 100px);
background-image: radial-gradient(center center, #dddddd 0%, #aaaaaa 100px); }
.radial-svg-3 {
background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PHJhZGlhbEdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgY3g9IjUwJSIgY3k9IjAlIiByPSIxMDAiPjxzdG9wIG9mZnNldD0iMCUiIHN0b3AtY29sb3I9IiNkZGRkZGQiLz48c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiNhYWFhYWEiLz48L3JhZGlhbEdyYWRpZW50PjwvZGVmcz48cmVjdCB4PSIwIiB5PSIwIiB3aWR0aD0iMTAwJSIgaGVpZ2h0PSIxMDAlIiBmaWxsPSJ1cmwoI2dyYWQpIiAvPjwvc3ZnPiA=');
background-image: -webkit-gradient(radial, 50% 0%, 0, 50% 0%, 100, color-stop(0%, #dddddd), color-stop(100%, #aaaaaa));
background-image: -moz-radial-gradient(top center, circle, #dddddd 0%, #aaaaaa 100%);
background-image: radial-gradient(top center, circle, #dddddd 0%, #aaaaaa 100%); }
background-image: -moz-radial-gradient(top center, #dddddd 0%, #aaaaaa 100px);
background-image: radial-gradient(top center, #dddddd 0%, #aaaaaa 100px); }
.radial-svg-4 {
background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PHJhZGlhbEdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgY3g9IjUwJSIgY3k9IjUwJSIgcj0iMTAwIj48c3RvcCBvZmZzZXQ9IjAlIiBzdG9wLWNvbG9yPSIjZGRkZGRkIi8+PHN0b3Agb2Zmc2V0PSIxMDAlIiBzdG9wLWNvbG9yPSIjYWFhYWFhIi8+PC9yYWRpYWxHcmFkaWVudD48L2RlZnM+PHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgZmlsbD0idXJsKCNncmFkKSIgLz48L3N2Zz4g');
background-image: -webkit-gradient(radial, 50% 50%, 0, 50% 50%, 100, color-stop(0%, #dddddd), color-stop(100%, #aaaaaa));
background-image: -moz-radial-gradient(center center, circle, #dddddd 0%, #aaaaaa 100%);
background-image: radial-gradient(center center, circle, #dddddd 0%, #aaaaaa 100%); }
background-image: -moz-radial-gradient(center center, #dddddd 0%, #aaaaaa 100px);
background-image: radial-gradient(center center, #dddddd 0%, #aaaaaa 100px); }
.radial-svg-5 {
background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PHJhZGlhbEdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgY3g9IjUwJSIgY3k9IjAlIiByPSIxMDAiPjxzdG9wIG9mZnNldD0iMCUiIHN0b3AtY29sb3I9IiNkZGRkZGQiLz48c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiNhYWFhYWEiLz48L3JhZGlhbEdyYWRpZW50PjwvZGVmcz48cmVjdCB4PSIwIiB5PSIwIiB3aWR0aD0iMTAwJSIgaGVpZ2h0PSIxMDAlIiBmaWxsPSJ1cmwoI2dyYWQpIiAvPjwvc3ZnPiA=');
background-image: -webkit-gradient(radial, 50% 0%, 0, 50% 0%, 100, color-stop(0%, #dddddd), color-stop(100%, #aaaaaa));
background-image: -moz-radial-gradient(top center, circle, #dddddd 0%, #aaaaaa 100%);
background-image: radial-gradient(top center, circle, #dddddd 0%, #aaaaaa 100%); }
background-image: -moz-radial-gradient(top center, #dddddd 0%, #aaaaaa 100px);
background-image: radial-gradient(top center, #dddddd 0%, #aaaaaa 100px); }
.radial-svg-6 {
background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PHJhZGlhbEdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgY3g9IjUwJSIgY3k9IjUwJSIgcj0iNTAiPjxzdG9wIG9mZnNldD0iNDAlIiBzdG9wLWNvbG9yPSIjZGRkZGRkIi8+PHN0b3Agb2Zmc2V0PSIxMDAlIiBzdG9wLWNvbG9yPSIjYWFhYWFhIi8+PC9yYWRpYWxHcmFkaWVudD48L2RlZnM+PHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgZmlsbD0idXJsKCNncmFkKSIgLz48L3N2Zz4g');
background-image: -webkit-gradient(radial, 50% 50%, 0, 50% 50%, 50, color-stop(40%, #dddddd), color-stop(100%, #aaaaaa));
background-image: -moz-radial-gradient(center center, circle, #dddddd 20px, #aaaaaa 50px);
background-image: radial-gradient(center center, circle, #dddddd 20px, #aaaaaa 50px); }
background-image: -moz-radial-gradient(center center, #dddddd 20px, #aaaaaa 50px);
background-image: radial-gradient(center center, #dddddd 20px, #aaaaaa 50px); }
.radial-svg-7 {
background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PHJhZGlhbEdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgY3g9IjUwJSIgY3k9IjUwJSIgcj0iNTAiPjxzdG9wIG9mZnNldD0iMjAlIiBzdG9wLWNvbG9yPSIjZGRkZGRkIi8+PHN0b3Agb2Zmc2V0PSIxMDAlIiBzdG9wLWNvbG9yPSIjYWFhYWFhIi8+PC9yYWRpYWxHcmFkaWVudD48L2RlZnM+PHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgZmlsbD0idXJsKCNncmFkKSIgLz48L3N2Zz4g');
background-image: -webkit-gradient(radial, 50% 50%, 0, 50% 50%, 50, color-stop(20%, #dddddd), color-stop(100%, #aaaaaa));
background-image: -moz-radial-gradient(center center, circle, #dddddd 20%, #aaaaaa 50px);
background-image: radial-gradient(center center, circle, #dddddd 20%, #aaaaaa 50px); }
background-image: -moz-radial-gradient(center center, #dddddd 20%, #aaaaaa 50px);
background-image: radial-gradient(center center, #dddddd 20%, #aaaaaa 50px); }
.alpha-linear-svg {
background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiB4MT0iNTAlIiB5MT0iMCUiIHgyPSI1MCUiIHkyPSIxMDAlIj48c3RvcCBvZmZzZXQ9IjQwJSIgc3RvcC1jb2xvcj0icmdiYSgyNTUsIDI1NSwgMjU1LCAwKSIvPjxzdG9wIG9mZnNldD0iNDUlIiBzdG9wLWNvbG9yPSJyZ2JhKDI1NSwgMTI3LCAxMjcsIDAuNSkiLz48c3RvcCBvZmZzZXQ9IjUwJSIgc3RvcC1jb2xvcj0iI2ZmZmZmZiIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA==');

20
test/fixtures/stylesheets/compass/sass/gradients.sass vendored
View File

@ -82,23 +82,23 @@ $experimental-support-for-svg: false
.radial-1
// A default radial gradient:
A centered gradient having the shape of the container (aka ellipse)
+radial-gradient(color-stops(#dddddd, #aaaaaa))
+radial-gradient(color-stops(#dddddd, #aaaaaa 100px))
.radial-2
// A centered gradient having the shape of the container (aka ellipse)
+radial-gradient(color-stops(#dddddd, #aaaaaa))
+radial-gradient(color-stops(#dddddd, #aaaaaa 100px))
.radial-3
// A centered gradient at the top having the shape of the container (aka ellipse)
+radial-gradient(color-stops(#dddddd, #aaaaaa), top center)
+radial-gradient(color-stops(#dddddd, #aaaaaa 100px), top center)
.radial-4
// A centered gradient having a circular shape
+radial-gradient(color-stops(#dddddd, #aaaaaa))
+radial-gradient(color-stops(#dddddd, #aaaaaa 100px))
.radial-5
// A centered gradient at the top having a circular shape
+radial-gradient(color-stops(#dddddd, #aaaaaa), top center)
+radial-gradient(color-stops(#dddddd, #aaaaaa 100px), top center)
.radial-6
// A centered circular gradient with color stops
@ -153,23 +153,23 @@ $experimental-support-for-svg: true
.radial-svg-1
// A default radial gradient:
A centered gradient having the shape of the container (aka ellipse)
+radial-gradient(color-stops(#dddddd, #aaaaaa))
+radial-gradient(color-stops(#dddddd, #aaaaaa 100px))
.radial-svg-2
// A centered gradient having the shape of the container (aka ellipse)
+radial-gradient(color-stops(#dddddd, #aaaaaa))
+radial-gradient(color-stops(#dddddd, #aaaaaa 100px))
.radial-svg-3
// A centered gradient at the top having the shape of the container (aka ellipse)
+radial-gradient(color-stops(#dddddd, #aaaaaa), top center)
+radial-gradient(color-stops(#dddddd, #aaaaaa 100px), top center)
.radial-svg-4
// A centered gradient having a circular shape
+radial-gradient(color-stops(#dddddd, #aaaaaa))
+radial-gradient(color-stops(#dddddd, #aaaaaa 100px))
.radial-svg-5
// A centered gradient at the top having a circular shape
+radial-gradient(color-stops(#dddddd, #aaaaaa), top center)
+radial-gradient(color-stops(#dddddd, #aaaaaa 100px), top center)
.radial-svg-6
// A centered circular gradient with color stops