diff --git a/frameworks/compass/stylesheets/compass/_support.scss b/frameworks/compass/stylesheets/compass/_support.scss index ec87aeaf..f6e61615 100644 --- a/frameworks/compass/stylesheets/compass/_support.scss +++ b/frameworks/compass/stylesheets/compass/_support.scss @@ -23,3 +23,5 @@ $experimental-support-for-opera : true !default; $experimental-support-for-microsoft : true !default; // Support for khtml in experimental css3 properties. $experimental-support-for-khtml : true !default; +// Support for svg in experimental css3 properties. +$experimental-support-for-svg : false !default; diff --git a/frameworks/compass/stylesheets/compass/css3/_gradient.scss b/frameworks/compass/stylesheets/compass/css3/_gradient.scss index b002ac62..45ec3317 100644 --- a/frameworks/compass/stylesheets/compass/css3/_gradient.scss +++ b/frameworks/compass/stylesheets/compass/css3/_gradient.scss @@ -30,6 +30,7 @@ // - Chrome // - Safari // - Firefox 3.6 +// - Opera @mixin linear-gradient($color-stops, $start: top, $image: false) { // Firefox's gradient api is nice. @@ -38,6 +39,10 @@ @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)); } @@ -66,12 +71,17 @@ // - 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-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)); } @@ -79,4 +89,4 @@ 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 +} diff --git a/lib/compass/sass_extensions/functions/gradient_support.rb b/lib/compass/sass_extensions/functions/gradient_support.rb index 8f4a4289..09df7cf5 100644 --- a/lib/compass/sass_extensions/functions/gradient_support.rb +++ b/lib/compass/sass_extensions/functions/gradient_support.rb @@ -38,6 +38,13 @@ module Compass::SassExtensions::Functions::GradientSupport module Functions # returns color-stop() calls for use in webkit. def grad_color_stops(color_list) + stops = color_stops_in_percentages(color_list).map do |stop, color| + "color-stop(#{stop.inspect}, #{color.inspect})" + end + Sass::Script::String.new(stops.join(", ")) + end + + def color_stops_in_percentages(color_list) assert_list(color_list) normalize_stops!(color_list) max = color_list.values.last.stop @@ -51,10 +58,8 @@ module Compass::SassExtensions::Functions::GradientSupport raise Sass::SyntaxError.new("Color stops must be specified in increasing order") end last_value = stop - "color-stop(#{stop.inspect}, #{pos.color.inspect})" + [stop, pos.color] end - - Sass::Script::String.new(color_stops.join(", ")) end # returns the end position of the gradient from the color stop @@ -148,6 +153,25 @@ module Compass::SassExtensions::Functions::GradientSupport end end) end + + def linear_svg_gradient(color_stops, start) + x1, y1 = grad_point(start).to_s.split + x2, y2 = grad_point(opposite_position(start)).to_s.split + stops = color_stops_in_percentages(color_stops) + + svg = linear_svg(stops, x1, y1, x2, y2) + inline_image_string(svg.gsub(/\s+/, ' '), 'image/svg+xml') + end + + def radial_svg_gradient(color_stops, center) + cx, cy = grad_point(center).to_s.split + r = grad_end_position(color_stops, Sass::Script::Bool.new(true)) + stops = color_stops_in_percentages(color_stops) + + svg = radial_svg(stops, cx, cy, r) + inline_image_string(svg.gsub(/\s+/, ' '), 'image/svg+xml') + end + private def normalize_stops!(color_list) positions = color_list.values @@ -186,5 +210,40 @@ module Compass::SassExtensions::Functions::GradientSupport return if value.is_a?(List) raise ArgumentError.new("#{value.inspect} is not a list of color stops. Expected: color_stops( ?, ...)") end + + def linear_svg(color_stops, x1, y1, x2, y2) + gradient = <<-EOG + + #{color_stops_svg(color_stops)} + + EOG + svg(gradient) + end + + def radial_svg(color_stops, cx, cy, r) + gradient = <<-EOG + + #{color_stops_svg(color_stops)} + + EOG + svg(gradient) + end + + # color_stops = array of: [stop, color] + def color_stops_svg(color_stops) + color_stops.each.map{ |stop, color| + %{} + }.join + end + + def svg(gradient) + svg = <<-EOS + + + #{gradient} + + + EOS + end end end diff --git a/lib/compass/sass_extensions/functions/inline_image.rb b/lib/compass/sass_extensions/functions/inline_image.rb index 59dd60a7..9e411751 100644 --- a/lib/compass/sass_extensions/functions/inline_image.rb +++ b/lib/compass/sass_extensions/functions/inline_image.rb @@ -3,8 +3,7 @@ module Compass::SassExtensions::Functions::InlineImage def inline_image(path, mime_type = nil) path = path.value real_path = File.join(Compass.configuration.images_path, path) - url = "url('data:#{compute_mime_type(path,mime_type)};base64,#{data(real_path)}')" - Sass::Script::String.new(url) + inline_image_string(data(real_path), compute_mime_type(path, mime_type)) end def inline_font_files(*args) @@ -19,6 +18,13 @@ module Compass::SassExtensions::Functions::InlineImage Sass::Script::String.new(files.join(", ")) end +protected + def inline_image_string(data, mime_type) + data = [data].flatten.pack('m').gsub("\n","") + url = "url('data:#{mime_type};base64,#{data}')" + Sass::Script::String.new(url) + end + private def compute_mime_type(path, mime_type = nil) return mime_type if mime_type @@ -46,7 +52,7 @@ private def data(real_path) if File.readable?(real_path) - [File.open(real_path, "rb") {|io| io.read}].pack('m').gsub("\n","") + File.open(real_path, "rb") {|io| io.read} else raise Compass::Error, "File not found or cannot be read: #{real_path}" end diff --git a/test/fixtures/stylesheets/compass/css/gradients.css b/test/fixtures/stylesheets/compass/css/gradients.css index 7dd758aa..37b3d5c6 100644 --- a/test/fixtures/stylesheets/compass/css/gradients.css +++ b/test/fixtures/stylesheets/compass/css/gradients.css @@ -1,11 +1,11 @@ @charset "UTF-8"; .linear-1 { - background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, color-stop(0%, #dddddd), color-stop(100%, #aaaaaa)); + background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #dddddd), color-stop(100%, #aaaaaa)); background-image: -moz-linear-gradient(top, #dddddd 0%, #aaaaaa 100%); background-image: linear-gradient(top, #dddddd 0%, #aaaaaa 100%); } .linear-2 { - background-image: -webkit-gradient(linear, 0% 0%, 100% 0%, color-stop(0%, #dddddd), color-stop(100%, #aaaaaa)); + background-image: -webkit-gradient(linear, 0% 50%, 100% 50%, color-stop(0%, #dddddd), color-stop(100%, #aaaaaa)); background-image: -moz-linear-gradient(left, #dddddd 0%, #aaaaaa 100%); background-image: linear-gradient(left, #dddddd 0%, #aaaaaa 100%); } @@ -20,42 +20,42 @@ background-image: linear-gradient(top right, #dddddd 0%, #aaaaaa 100%); } .linear-5 { - background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, color-stop(0%, #dddddd), color-stop(50%, #cccccc), color-stop(100%, #aaaaaa)); + background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #dddddd), color-stop(50%, #cccccc), color-stop(100%, #aaaaaa)); background-image: -moz-linear-gradient(top, #dddddd 0%, #cccccc 50%, #aaaaaa 100%); background-image: linear-gradient(top, #dddddd 0%, #cccccc 50%, #aaaaaa 100%); } .linear-6 { - background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, color-stop(0%, #dddddd), color-stop(20%, #cccccc), color-stop(100%, #aaaaaa)); + background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #dddddd), color-stop(20%, #cccccc), color-stop(100%, #aaaaaa)); background-image: -moz-linear-gradient(top, #dddddd 0%, #cccccc 20%, #aaaaaa 100%); background-image: linear-gradient(top, #dddddd 0%, #cccccc 20%, #aaaaaa 100%); } .linear-7 { - background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, color-stop(0%, #dddddd), color-stop(20%, #cccccc), color-stop(60%, #eeeeee), color-stop(100%, #aaaaaa)); + background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #dddddd), color-stop(20%, #cccccc), color-stop(60%, #eeeeee), color-stop(100%, #aaaaaa)); background-image: -moz-linear-gradient(top, #dddddd 0%, #cccccc 20%, #eeeeee 60%, #aaaaaa 100%); background-image: linear-gradient(top, #dddddd 0%, #cccccc 20%, #eeeeee 60%, #aaaaaa 100%); } .linear-8 { - background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, color-stop(80%, #dddddd), color-stop(100%, #aaaaaa)); + background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(80%, #dddddd), color-stop(100%, #aaaaaa)); background-image: -moz-linear-gradient(top, #dddddd 80%, #aaaaaa 100%); background-image: linear-gradient(top, #dddddd 80%, #aaaaaa 100%); } .linear-9 { - background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, color-stop(0%, #dddddd), color-stop(20%, #aaaaaa)); + background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #dddddd), color-stop(20%, #aaaaaa)); background-image: -moz-linear-gradient(top, #dddddd 0%, #aaaaaa 20%); background-image: linear-gradient(top, #dddddd 0%, #aaaaaa 20%); } .linear-10 { - background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, color-stop(40%, #dddddd), color-stop(50%, #aaaaaa)); + background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(40%, #dddddd), color-stop(50%, #aaaaaa)); background-image: -moz-linear-gradient(top, #dddddd 40%, #aaaaaa 50%); background-image: linear-gradient(top, #dddddd 40%, #aaaaaa 50%); } .linear-11 { - background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, color-stop(40%, #dddddd), color-stop(45%, #000000), color-stop(50%, #aaaaaa)); + background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(40%, #dddddd), color-stop(45%, #000000), color-stop(50%, #aaaaaa)); background-image: -moz-linear-gradient(top, #dddddd 40%, #000000 45%, #aaaaaa 50%); background-image: linear-gradient(top, #dddddd 40%, #000000 45%, #aaaaaa 50%); } .linear-12 { - background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, color-stop(0%, #ffffff), color-stop(33%, #0000ff), color-stop(67%, #000000)); + background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #ffffff), color-stop(33%, #0000ff), color-stop(67%, #000000)); background-image: -moz-linear-gradient(top, #ffffff 0%, #0000ff 33%, #000000 67%); background-image: linear-gradient(top, #ffffff 0%, #0000ff 33%, #000000 67%); } @@ -95,6 +95,126 @@ background-image: radial-gradient(center center, circle, #dddddd 20%, #aaaaaa 50px); } .alpha-linear { - background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, color-stop(40%, rgba(255, 255, 255, 0)), color-stop(45%, rgba(255, 127, 127, 0.5)), color-stop(50%, #ffffff)); + 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%); } + +.linear-svg-1 { + background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+IDxkZWZzPiA8bGluZWFyR3JhZGllbnQgaWQ9ImdyYWQiIHgxPSI1MCUiIHkxPSIwJSIgeDI9IjUwJSIgeTI9IjEwMCUiPiA8c3RvcCBvZmZzZXQ9IjAlIiBzdG9wLWNvbG9yPSIjZGRkZGRkIiAvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iI2FhYWFhYSIgLz4gPC9saW5lYXJHcmFkaWVudD4gPC9kZWZzPiA8cmVjdCB4PSIwIiB5PSIwIiB3aWR0aD0iMTAwJSIgaGVpZ2h0PSIxMDAlIiBmaWxsPSJ1cmwoI2dyYWQpIiAvPiA8L3N2Zz4g'); + background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #dddddd), color-stop(100%, #aaaaaa)); + background-image: -moz-linear-gradient(top, #dddddd 0%, #aaaaaa 100%); + background-image: linear-gradient(top, #dddddd 0%, #aaaaaa 100%); } + +.linear-svg-2 { + background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+IDxkZWZzPiA8bGluZWFyR3JhZGllbnQgaWQ9ImdyYWQiIHgxPSIwJSIgeTE9IjUwJSIgeDI9IjEwMCUiIHkyPSI1MCUiPiA8c3RvcCBvZmZzZXQ9IjAlIiBzdG9wLWNvbG9yPSIjZGRkZGRkIiAvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iI2FhYWFhYSIgLz4gPC9saW5lYXJHcmFkaWVudD4gPC9kZWZzPiA8cmVjdCB4PSIwIiB5PSIwIiB3aWR0aD0iMTAwJSIgaGVpZ2h0PSIxMDAlIiBmaWxsPSJ1cmwoI2dyYWQpIiAvPiA8L3N2Zz4g'); + background-image: -webkit-gradient(linear, 0% 50%, 100% 50%, color-stop(0%, #dddddd), color-stop(100%, #aaaaaa)); + background-image: -moz-linear-gradient(left, #dddddd 0%, #aaaaaa 100%); + background-image: linear-gradient(left, #dddddd 0%, #aaaaaa 100%); } + +.linear-svg-3 { + background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+IDxkZWZzPiA8bGluZWFyR3JhZGllbnQgaWQ9ImdyYWQiIHgxPSIwJSIgeTE9IjAlIiB4Mj0iMTAwJSIgeTI9IjEwMCUiPiA8c3RvcCBvZmZzZXQ9IjAlIiBzdG9wLWNvbG9yPSIjZGRkZGRkIiAvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iI2FhYWFhYSIgLz4gPC9saW5lYXJHcmFkaWVudD4gPC9kZWZzPiA8cmVjdCB4PSIwIiB5PSIwIiB3aWR0aD0iMTAwJSIgaGVpZ2h0PSIxMDAlIiBmaWxsPSJ1cmwoI2dyYWQpIiAvPiA8L3N2Zz4g'); + 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%); } + +.linear-svg-4 { + background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+IDxkZWZzPiA8bGluZWFyR3JhZGllbnQgaWQ9ImdyYWQiIHgxPSIxMDAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPiA8c3RvcCBvZmZzZXQ9IjAlIiBzdG9wLWNvbG9yPSIjZGRkZGRkIiAvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iI2FhYWFhYSIgLz4gPC9saW5lYXJHcmFkaWVudD4gPC9kZWZzPiA8cmVjdCB4PSIwIiB5PSIwIiB3aWR0aD0iMTAwJSIgaGVpZ2h0PSIxMDAlIiBmaWxsPSJ1cmwoI2dyYWQpIiAvPiA8L3N2Zz4g'); + background-image: -webkit-gradient(linear, 100% 0%, 0% 100%, color-stop(0%, #dddddd), color-stop(100%, #aaaaaa)); + background-image: -moz-linear-gradient(top right, #dddddd 0%, #aaaaaa 100%); + background-image: linear-gradient(top right, #dddddd 0%, #aaaaaa 100%); } + +.linear-svg-5 { + background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+IDxkZWZzPiA8bGluZWFyR3JhZGllbnQgaWQ9ImdyYWQiIHgxPSI1MCUiIHkxPSIwJSIgeDI9IjUwJSIgeTI9IjEwMCUiPiA8c3RvcCBvZmZzZXQ9IjAlIiBzdG9wLWNvbG9yPSIjZGRkZGRkIiAvPjxzdG9wIG9mZnNldD0iNTAlIiBzdG9wLWNvbG9yPSIjY2NjY2NjIiAvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iI2FhYWFhYSIgLz4gPC9saW5lYXJHcmFkaWVudD4gPC9kZWZzPiA8cmVjdCB4PSIwIiB5PSIwIiB3aWR0aD0iMTAwJSIgaGVpZ2h0PSIxMDAlIiBmaWxsPSJ1cmwoI2dyYWQpIiAvPiA8L3N2Zz4g'); + background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #dddddd), color-stop(50%, #cccccc), color-stop(100%, #aaaaaa)); + background-image: -moz-linear-gradient(top, #dddddd 0%, #cccccc 50%, #aaaaaa 100%); + background-image: linear-gradient(top, #dddddd 0%, #cccccc 50%, #aaaaaa 100%); } + +.linear-svg-6 { + background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+IDxkZWZzPiA8bGluZWFyR3JhZGllbnQgaWQ9ImdyYWQiIHgxPSI1MCUiIHkxPSIwJSIgeDI9IjUwJSIgeTI9IjEwMCUiPiA8c3RvcCBvZmZzZXQ9IjAlIiBzdG9wLWNvbG9yPSIjZGRkZGRkIiAvPjxzdG9wIG9mZnNldD0iMjAlIiBzdG9wLWNvbG9yPSIjY2NjY2NjIiAvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iI2FhYWFhYSIgLz4gPC9saW5lYXJHcmFkaWVudD4gPC9kZWZzPiA8cmVjdCB4PSIwIiB5PSIwIiB3aWR0aD0iMTAwJSIgaGVpZ2h0PSIxMDAlIiBmaWxsPSJ1cmwoI2dyYWQpIiAvPiA8L3N2Zz4g'); + background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #dddddd), color-stop(20%, #cccccc), color-stop(100%, #aaaaaa)); + background-image: -moz-linear-gradient(top, #dddddd 0%, #cccccc 20%, #aaaaaa 100%); + background-image: linear-gradient(top, #dddddd 0%, #cccccc 20%, #aaaaaa 100%); } + +.linear-svg-7 { + background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+IDxkZWZzPiA8bGluZWFyR3JhZGllbnQgaWQ9ImdyYWQiIHgxPSI1MCUiIHkxPSIwJSIgeDI9IjUwJSIgeTI9IjEwMCUiPiA8c3RvcCBvZmZzZXQ9IjAlIiBzdG9wLWNvbG9yPSIjZGRkZGRkIiAvPjxzdG9wIG9mZnNldD0iMjAlIiBzdG9wLWNvbG9yPSIjY2NjY2NjIiAvPjxzdG9wIG9mZnNldD0iNjAlIiBzdG9wLWNvbG9yPSIjZWVlZWVlIiAvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iI2FhYWFhYSIgLz4gPC9saW5lYXJHcmFkaWVudD4gPC9kZWZzPiA8cmVjdCB4PSIwIiB5PSIwIiB3aWR0aD0iMTAwJSIgaGVpZ2h0PSIxMDAlIiBmaWxsPSJ1cmwoI2dyYWQpIiAvPiA8L3N2Zz4g'); + background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #dddddd), color-stop(20%, #cccccc), color-stop(60%, #eeeeee), color-stop(100%, #aaaaaa)); + background-image: -moz-linear-gradient(top, #dddddd 0%, #cccccc 20%, #eeeeee 60%, #aaaaaa 100%); + background-image: linear-gradient(top, #dddddd 0%, #cccccc 20%, #eeeeee 60%, #aaaaaa 100%); } + +.linear-svg-8 { + background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+IDxkZWZzPiA8bGluZWFyR3JhZGllbnQgaWQ9ImdyYWQiIHgxPSI1MCUiIHkxPSIwJSIgeDI9IjUwJSIgeTI9IjEwMCUiPiA8c3RvcCBvZmZzZXQ9IjgwJSIgc3RvcC1jb2xvcj0iI2RkZGRkZCIgLz48c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiNhYWFhYWEiIC8+IDwvbGluZWFyR3JhZGllbnQ+IDwvZGVmcz4gPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgZmlsbD0idXJsKCNncmFkKSIgLz4gPC9zdmc+IA=='); + background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(80%, #dddddd), color-stop(100%, #aaaaaa)); + background-image: -moz-linear-gradient(top, #dddddd 80%, #aaaaaa 100%); + background-image: linear-gradient(top, #dddddd 80%, #aaaaaa 100%); } + +.linear-svg-9 { + background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+IDxkZWZzPiA8bGluZWFyR3JhZGllbnQgaWQ9ImdyYWQiIHgxPSI1MCUiIHkxPSIwJSIgeDI9IjUwJSIgeTI9IjEwMCUiPiA8c3RvcCBvZmZzZXQ9IjAlIiBzdG9wLWNvbG9yPSIjZGRkZGRkIiAvPjxzdG9wIG9mZnNldD0iMjAlIiBzdG9wLWNvbG9yPSIjYWFhYWFhIiAvPiA8L2xpbmVhckdyYWRpZW50PiA8L2RlZnM+IDxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+IDwvc3ZnPiA='); + background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #dddddd), color-stop(20%, #aaaaaa)); + background-image: -moz-linear-gradient(top, #dddddd 0%, #aaaaaa 20%); + background-image: linear-gradient(top, #dddddd 0%, #aaaaaa 20%); } + +.linear-svg-10 { + background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+IDxkZWZzPiA8bGluZWFyR3JhZGllbnQgaWQ9ImdyYWQiIHgxPSI1MCUiIHkxPSIwJSIgeDI9IjUwJSIgeTI9IjEwMCUiPiA8c3RvcCBvZmZzZXQ9IjQwJSIgc3RvcC1jb2xvcj0iI2RkZGRkZCIgLz48c3RvcCBvZmZzZXQ9IjUwJSIgc3RvcC1jb2xvcj0iI2FhYWFhYSIgLz4gPC9saW5lYXJHcmFkaWVudD4gPC9kZWZzPiA8cmVjdCB4PSIwIiB5PSIwIiB3aWR0aD0iMTAwJSIgaGVpZ2h0PSIxMDAlIiBmaWxsPSJ1cmwoI2dyYWQpIiAvPiA8L3N2Zz4g'); + background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(40%, #dddddd), color-stop(50%, #aaaaaa)); + background-image: -moz-linear-gradient(top, #dddddd 40%, #aaaaaa 50%); + background-image: linear-gradient(top, #dddddd 40%, #aaaaaa 50%); } + +.linear-svg-11 { + background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+IDxkZWZzPiA8bGluZWFyR3JhZGllbnQgaWQ9ImdyYWQiIHgxPSI1MCUiIHkxPSIwJSIgeDI9IjUwJSIgeTI9IjEwMCUiPiA8c3RvcCBvZmZzZXQ9IjQwJSIgc3RvcC1jb2xvcj0iI2RkZGRkZCIgLz48c3RvcCBvZmZzZXQ9IjQ1JSIgc3RvcC1jb2xvcj0iIzAwMDAwMCIgLz48c3RvcCBvZmZzZXQ9IjUwJSIgc3RvcC1jb2xvcj0iI2FhYWFhYSIgLz4gPC9saW5lYXJHcmFkaWVudD4gPC9kZWZzPiA8cmVjdCB4PSIwIiB5PSIwIiB3aWR0aD0iMTAwJSIgaGVpZ2h0PSIxMDAlIiBmaWxsPSJ1cmwoI2dyYWQpIiAvPiA8L3N2Zz4g'); + background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(40%, #dddddd), color-stop(45%, #000000), color-stop(50%, #aaaaaa)); + background-image: -moz-linear-gradient(top, #dddddd 40%, #000000 45%, #aaaaaa 50%); + background-image: linear-gradient(top, #dddddd 40%, #000000 45%, #aaaaaa 50%); } + +.linear-svg-12 { + background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+IDxkZWZzPiA8bGluZWFyR3JhZGllbnQgaWQ9ImdyYWQiIHgxPSI1MCUiIHkxPSIwJSIgeDI9IjUwJSIgeTI9IjEwMCUiPiA8c3RvcCBvZmZzZXQ9IjAlIiBzdG9wLWNvbG9yPSIjZmZmZmZmIiAvPjxzdG9wIG9mZnNldD0iMzMlIiBzdG9wLWNvbG9yPSIjMDAwMGZmIiAvPjxzdG9wIG9mZnNldD0iNjclIiBzdG9wLWNvbG9yPSIjMDAwMDAwIiAvPiA8L2xpbmVhckdyYWRpZW50PiA8L2RlZnM+IDxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+IDwvc3ZnPiA='); + background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #ffffff), color-stop(33%, #0000ff), color-stop(67%, #000000)); + background-image: -moz-linear-gradient(top, #ffffff 0%, #0000ff 33%, #000000 67%); + background-image: linear-gradient(top, #ffffff 0%, #0000ff 33%, #000000 67%); } + +.radial-svg-1 { + background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+IDxkZWZzPiA8cmFkaWFsR3JhZGllbnQgaWQ9ImdyYWQiIGdyYWRpZW50VW5pdHM9InVzZXJTcGFjZU9uVXNlIiBjeD0iNTAlIiBjeT0iNTAlIiByPSIxMDAiPiA8c3RvcCBvZmZzZXQ9IjAlIiBzdG9wLWNvbG9yPSIjZGRkZGRkIiAvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iI2FhYWFhYSIgLz4gPC9yYWRpYWxHcmFkaWVudD4gPC9kZWZzPiA8cmVjdCB4PSIwIiB5PSIwIiB3aWR0aD0iMTAwJSIgaGVpZ2h0PSIxMDAlIiBmaWxsPSJ1cmwoI2dyYWQpIiAvPiA8L3N2Zz4g'); + 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%); } + +.radial-svg-2 { + background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+IDxkZWZzPiA8cmFkaWFsR3JhZGllbnQgaWQ9ImdyYWQiIGdyYWRpZW50VW5pdHM9InVzZXJTcGFjZU9uVXNlIiBjeD0iNTAlIiBjeT0iNTAlIiByPSIxMDAiPiA8c3RvcCBvZmZzZXQ9IjAlIiBzdG9wLWNvbG9yPSIjZGRkZGRkIiAvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iI2FhYWFhYSIgLz4gPC9yYWRpYWxHcmFkaWVudD4gPC9kZWZzPiA8cmVjdCB4PSIwIiB5PSIwIiB3aWR0aD0iMTAwJSIgaGVpZ2h0PSIxMDAlIiBmaWxsPSJ1cmwoI2dyYWQpIiAvPiA8L3N2Zz4g'); + 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%); } + +.radial-svg-3 { + background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+IDxkZWZzPiA8cmFkaWFsR3JhZGllbnQgaWQ9ImdyYWQiIGdyYWRpZW50VW5pdHM9InVzZXJTcGFjZU9uVXNlIiBjeD0iNTAlIiBjeT0iMCUiIHI9IjEwMCI+IDxzdG9wIG9mZnNldD0iMCUiIHN0b3AtY29sb3I9IiNkZGRkZGQiIC8+PHN0b3Agb2Zmc2V0PSIxMDAlIiBzdG9wLWNvbG9yPSIjYWFhYWFhIiAvPiA8L3JhZGlhbEdyYWRpZW50PiA8L2RlZnM+IDxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+IDwvc3ZnPiA='); + 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%); } + +.radial-svg-4 { + background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+IDxkZWZzPiA8cmFkaWFsR3JhZGllbnQgaWQ9ImdyYWQiIGdyYWRpZW50VW5pdHM9InVzZXJTcGFjZU9uVXNlIiBjeD0iNTAlIiBjeT0iNTAlIiByPSIxMDAiPiA8c3RvcCBvZmZzZXQ9IjAlIiBzdG9wLWNvbG9yPSIjZGRkZGRkIiAvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iI2FhYWFhYSIgLz4gPC9yYWRpYWxHcmFkaWVudD4gPC9kZWZzPiA8cmVjdCB4PSIwIiB5PSIwIiB3aWR0aD0iMTAwJSIgaGVpZ2h0PSIxMDAlIiBmaWxsPSJ1cmwoI2dyYWQpIiAvPiA8L3N2Zz4g'); + 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%); } + +.radial-svg-5 { + background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+IDxkZWZzPiA8cmFkaWFsR3JhZGllbnQgaWQ9ImdyYWQiIGdyYWRpZW50VW5pdHM9InVzZXJTcGFjZU9uVXNlIiBjeD0iNTAlIiBjeT0iMCUiIHI9IjEwMCI+IDxzdG9wIG9mZnNldD0iMCUiIHN0b3AtY29sb3I9IiNkZGRkZGQiIC8+PHN0b3Agb2Zmc2V0PSIxMDAlIiBzdG9wLWNvbG9yPSIjYWFhYWFhIiAvPiA8L3JhZGlhbEdyYWRpZW50PiA8L2RlZnM+IDxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+IDwvc3ZnPiA='); + 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%); } + +.radial-svg-6 { + background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+IDxkZWZzPiA8cmFkaWFsR3JhZGllbnQgaWQ9ImdyYWQiIGdyYWRpZW50VW5pdHM9InVzZXJTcGFjZU9uVXNlIiBjeD0iNTAlIiBjeT0iNTAlIiByPSI1MCI+IDxzdG9wIG9mZnNldD0iNDAlIiBzdG9wLWNvbG9yPSIjZGRkZGRkIiAvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iI2FhYWFhYSIgLz4gPC9yYWRpYWxHcmFkaWVudD4gPC9kZWZzPiA8cmVjdCB4PSIwIiB5PSIwIiB3aWR0aD0iMTAwJSIgaGVpZ2h0PSIxMDAlIiBmaWxsPSJ1cmwoI2dyYWQpIiAvPiA8L3N2Zz4g'); + 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); } + +.radial-svg-7 { + background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+IDxkZWZzPiA8cmFkaWFsR3JhZGllbnQgaWQ9ImdyYWQiIGdyYWRpZW50VW5pdHM9InVzZXJTcGFjZU9uVXNlIiBjeD0iNTAlIiBjeT0iNTAlIiByPSI1MCI+IDxzdG9wIG9mZnNldD0iMjAlIiBzdG9wLWNvbG9yPSIjZGRkZGRkIiAvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iI2FhYWFhYSIgLz4gPC9yYWRpYWxHcmFkaWVudD4gPC9kZWZzPiA8cmVjdCB4PSIwIiB5PSIwIiB3aWR0aD0iMTAwJSIgaGVpZ2h0PSIxMDAlIiBmaWxsPSJ1cmwoI2dyYWQpIiAvPiA8L3N2Zz4g'); + 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); } + +.alpha-linear-svg { + background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+IDxkZWZzPiA8bGluZWFyR3JhZGllbnQgaWQ9ImdyYWQiIHgxPSI1MCUiIHkxPSIwJSIgeDI9IjUwJSIgeTI9IjEwMCUiPiA8c3RvcCBvZmZzZXQ9IjQwJSIgc3RvcC1jb2xvcj0icmdiYSgyNTUsIDI1NSwgMjU1LCAwKSIgLz48c3RvcCBvZmZzZXQ9IjQ1JSIgc3RvcC1jb2xvcj0icmdiYSgyNTUsIDEyNywgMTI3LCAwLjUpIiAvPjxzdG9wIG9mZnNldD0iNTAlIiBzdG9wLWNvbG9yPSIjZmZmZmZmIiAvPiA8L2xpbmVhckdyYWRpZW50PiA8L2RlZnM+IDxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+IDwvc3ZnPiA='); + 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%); } diff --git a/test/fixtures/stylesheets/compass/sass/gradients.sass b/test/fixtures/stylesheets/compass/sass/gradients.sass index 9ae631e6..764cbb36 100644 --- a/test/fixtures/stylesheets/compass/sass/gradients.sass +++ b/test/fixtures/stylesheets/compass/sass/gradients.sass @@ -69,3 +69,74 @@ .alpha-linear +linear-gradient(color_stops(rgba(255, 255, 255, 0) 40%, rgba(255, 127, 127, 0.5), rgba(255, 255, 255, 1) 50%)) + +$experimental-support-for-svg: true +.linear-svg-1 + +linear-gradient(color_stops(#dddddd, #aaaaaa)) + +.linear-svg-2 + +linear-gradient(color_stops(#dddddd, #aaaaaa), left) + +.linear-svg-3 + +linear-gradient(color_stops(#dddddd, #aaaaaa), unquote("top left")) + +.linear-svg-4 + +linear-gradient(color_stops(#dddddd, #aaaaaa), unquote("top right")) + +.linear-svg-5 + +linear-gradient(color_stops(#dddddd, #cccccc, #aaaaaa)) + +.linear-svg-6 + +linear-gradient(color_stops(#dddddd, #cccccc 20%, #aaaaaa)) + +.linear-svg-7 + +linear-gradient(color_stops(#dddddd, #cccccc 20%, #eeeeee, #aaaaaa)) + +.linear-svg-8 + +linear-gradient(color_stops(#dddddd 80%, #aaaaaa)) + +.linear-svg-9 + +linear-gradient(color_stops(#dddddd, #aaaaaa 20%)) + +.linear-svg-10 + +linear-gradient(color_stops(#dddddd 40%, #aaaaaa 50%)) + +.linear-svg-11 + +linear-gradient(color_stops(#dddddd 40%, black, #aaaaaa 50%)) + +.linear-svg-12 + +linear-gradient(color-stops(white, blue 33%, black 67%)) + +.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-svg-2 + // A centered gradient having the shape of the container (aka ellipse) + +radial-gradient(color_stops(#dddddd, #aaaaaa)) + +.radial-svg-3 + // A centered gradient at the top having the shape of the container (aka ellipse) + +radial-gradient(color_stops(#dddddd, #aaaaaa), unquote("top center")) + +.radial-svg-4 + // A centered gradient having a circular shape + +radial-gradient(color_stops(#dddddd, #aaaaaa)) + +.radial-svg-5 + // A centered gradient at the top having a circular shape + +radial-gradient(color_stops(#dddddd, #aaaaaa), unquote("top center")) + +.radial-svg-6 + // A centered circular gradient with color stops + The color stops must be absolute units + +radial-gradient(color_stops(#dddddd 20px, #aaaaaa 50px)) + +.radial-svg-7 + // A centered elliptical gradient with color stops + The color stops must be relative units + +radial-gradient(color_stops(#dddddd 20%, #aaaaaa 50px)) + +.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%))