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

Handle the transparent keyword identifier in gradients.

Browse Source 
Closes GH-356
This commit is contained in:
Chris Eppstein 2012-02-26 17:23:13 -08:00
parent 001fa41142
commit fee53b1a60
4 changed files with 49 additions and 17 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
doc-src/content/CHANGELOG.markdown
View File

@ -14,7 +14,12 @@ The Documentation for the [latest stable release](http://compass-style.org/docs/
The Documentation for the [latest preview release](http://beta.compass-style.org/) The Documentation for the [latest preview release](http://beta.compass-style.org/)
0.11.7 (UNRELEASED) 0.11.8 (02/26/2012)
-------------------
* Fix a bug in gradients that used the transparent keyword
0.11.7 (01/05/2012)
------------------- -------------------
* Update to font-face mixin to make it work on IE8. * Update to font-face mixin to make it work on IE8.

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

@ -8,7 +8,9 @@ module Compass::SassExtensions::Functions::GradientSupport
[color, stop].compact [color, stop].compact
end end
def initialize(color, stop = nil) def initialize(color, stop = nil)
unless Sass::Script::Color === color || Sass::Script::Funcall === color unless Sass::Script::Color === color ||
Sass::Script::Funcall === color ||
(Sass::Script::String === color && color.value == "transparent")
raise Sass::SyntaxError, "Expected a color. Got: #{color}" raise Sass::SyntaxError, "Expected a color. Got: #{color}"
end end
if stop && !stop.is_a?(Sass::Script::Number) if stop && !stop.is_a?(Sass::Script::Number)
@ -19,8 +21,16 @@ module Compass::SassExtensions::Functions::GradientSupport
def inspect def inspect
to_s to_s
end end
def self.color_to_s(c)
if c.is_a?(Sass::Script::String)
c.value.dup
else
c.inspect.dup
end
end
def to_s(options = self.options) def to_s(options = self.options)
s = color.inspect.dup s = self.class.color_to_s(color)
if stop if stop
s << " " s << " "
if stop.unitless? if stop.unitless?
@ -227,13 +237,14 @@ module Compass::SassExtensions::Functions::GradientSupport
def color_stops(*args) def color_stops(*args)
Sass::Script::List.new(args.map do |arg| Sass::Script::List.new(args.map do |arg|
case arg if ColorStop === arg
when ColorStop
arg arg
when Sass::Script::Color elsif Sass::Script::Color === arg
ColorStop.new(arg) ColorStop.new(arg)
when Sass::Script::List elsif Sass::Script::List === arg
ColorStop.new(*arg.value) ColorStop.new(*arg.value)
elsif Sass::Script::String === arg && arg.value == "transparent"
ColorStop.new(arg)
else else
raise Sass::SyntaxError, "Not a valid color stop: #{arg.class.name}: #{arg}" raise Sass::SyntaxError, "Not a valid color stop: #{arg.class.name}: #{arg}"
end end
@ -288,7 +299,7 @@ module Compass::SassExtensions::Functions::GradientSupport
# returns color-stop() calls for use in webkit. # returns color-stop() calls for use in webkit.
def grad_color_stops(color_list) def grad_color_stops(color_list)
stops = color_stops_in_percentages(color_list).map do |stop, color| stops = color_stops_in_percentages(color_list).map do |stop, color|
"color-stop(#{stop.inspect}, #{color.inspect})" "color-stop(#{stop.inspect}, #{ColorStop.color_to_s(color)})"
end end
Sass::Script::String.new(stops.join(", ")) Sass::Script::String.new(stops.join(", "))
end end

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

@ -82,15 +82,25 @@
background-image: -ms-linear-gradient(left, #dddddd 10px, #aaaaaa 40px); background-image: -ms-linear-gradient(left, #dddddd 10px, #aaaaaa 40px);
background-image: linear-gradient(left, #dddddd 10px, #aaaaaa 40px); } background-image: linear-gradient(left, #dddddd 10px, #aaaaaa 40px); }
.bg-radial-gradient { .transparent-in-linear-gradient {
background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PHJhZGlhbEdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgY3g9IjUwJSIgY3k9IjUwJSIgcj0iMTAwIj48c3RvcCBvZmZzZXQ9IjAlIiBzdG9wLWNvbG9yPSIjZGRkZGRkIi8+PHN0b3Agb2Zmc2V0PSIxMDAlIiBzdG9wLWNvbG9yPSIjYWFhYWFhIi8+PC9yYWRpYWxHcmFkaWVudD48L2RlZnM+PHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgZmlsbD0idXJsKCNncmFkKSIgLz48L3N2Zz4g'); background-image: white url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIxMDAlIiB5Mj0iMTAwJSI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iInRyYW5zcGFyZW50IiIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iI2FhYWFhYSIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA==');
background-size: 100%; background-size: 100%;
background-image: -webkit-gradient(radial, 50% 50%, 0, 50% 50%, 100, color-stop(0%, #dddddd), color-stop(100%, #aaaaaa)); background-image: white -webkit-gradient(linear, 0% 0%, 100% 100%, color-stop(0%, transparent), color-stop(100%, #aaaaaa));
background-image: -webkit-radial-gradient(center center, #dddddd, #aaaaaa 100px); background-image: white -webkit-linear-gradient(top left, transparent, #aaaaaa);
background-image: -moz-radial-gradient(center center, #dddddd, #aaaaaa 100px); background-image: white -moz-linear-gradient(top left, transparent, #aaaaaa);
background-image: -o-radial-gradient(center center, #dddddd, #aaaaaa 100px); background-image: white -o-linear-gradient(top left, transparent, #aaaaaa);
background-image: -ms-radial-gradient(center center, #dddddd, #aaaaaa 100px); background-image: white -ms-linear-gradient(top left, transparent, #aaaaaa);
background-image: radial-gradient(center center, #dddddd, #aaaaaa 100px); } background-image: white linear-gradient(top left, transparent, #aaaaaa); }
.transparent-in-linear-gradient {
background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PHJhZGlhbEdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgY3g9IjUwJSIgY3k9IjUwJSIgcj0iMTAwIj48c3RvcCBvZmZzZXQ9IjAlIiBzdG9wLWNvbG9yPSIjZGRkZGRkIi8+PHN0b3Agb2Zmc2V0PSIxMDAlIiBzdG9wLWNvbG9yPSIidHJhbnNwYXJlbnQiIi8+PC9yYWRpYWxHcmFkaWVudD48L2RlZnM+PHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgZmlsbD0idXJsKCNncmFkKSIgLz48L3N2Zz4g');
background-size: 100%;
background-image: -webkit-gradient(radial, 50% 50%, 0, 50% 50%, 100, color-stop(0%, #dddddd), color-stop(100%, transparent));
background-image: -webkit-radial-gradient(center center, #dddddd, transparent 100px);
background-image: -moz-radial-gradient(center center, #dddddd, transparent 100px);
background-image: -o-radial-gradient(center center, #dddddd, transparent 100px);
background-image: -ms-radial-gradient(center center, #dddddd, transparent 100px);
background-image: radial-gradient(center center, #dddddd, transparent 100px); }
.bg-linear-gradient-with-angle { .bg-linear-gradient-with-angle {
background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9Ii00NSIgeTE9IiIgeDI9Ii00NSIgeTI9IiIgZ3JhZGllbnRUcmFuc2Zvcm0gPSAicm90YXRlKC00NSkiPjxzdG9wIG9mZnNldD0iMCUiIHN0b3AtY29sb3I9IiNkZGRkZGQiLz48c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiNhYWFhYWEiLz48L2xpbmVhckdyYWRpZW50PjwvZGVmcz48cmVjdCB4PSIwIiB5PSIwIiB3aWR0aD0iMTAwJSIgaGVpZ2h0PSIxMDAlIiBmaWxsPSJ1cmwoI2dyYWQpIiAvPjwvc3ZnPiA='); background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9Ii00NSIgeTE9IiIgeDI9Ii00NSIgeTI9IiIgZ3JhZGllbnRUcmFuc2Zvcm0gPSAicm90YXRlKC00NSkiPjxzdG9wIG9mZnNldD0iMCUiIHN0b3AtY29sb3I9IiNkZGRkZGQiLz48c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiNhYWFhYWEiLz48L2xpbmVhckdyYWRpZW50PjwvZGVmcz48cmVjdCB4PSIwIiB5PSIwIiB3aWR0aD0iMTAwJSIgaGVpZ2h0PSIxMDAlIiBmaWxsPSJ1cmwoI2dyYWQpIiAvPjwvc3ZnPiA=');

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

@ -31,8 +31,13 @@ $experimental-support-for-svg: true
.bg-linear-gradient-pixel-stop-from-left .bg-linear-gradient-pixel-stop-from-left
+background-image(linear-gradient(left, #ddd 10px, #aaa 40px)) +background-image(linear-gradient(left, #ddd 10px, #aaa 40px))
.transparent-in-linear-gradient
+background-image(#fff linear-gradient(top left, transparent, #aaa))
.transparent-in-linear-gradient
+background-image(radial-gradient(center center, #ddd, transparent 100px))
.bg-radial-gradient .bg-radial-gradient
+background-image(radial-gradient(center center, #ddd, #aaa 100px))
.bg-linear-gradient-with-angle .bg-linear-gradient-with-angle
+background-image(linear-gradient(-45deg, #ddd, #aaa)) +background-image(linear-gradient(-45deg, #ddd, #aaa))
@ -231,3 +236,4 @@ $experimental-support-for-svg: true
.ie-alpha-filter .ie-alpha-filter
+filter-gradient(rgba(#fff, 1), rgba(#fff, 0)) +filter-gradient(rgba(#fff, 1), rgba(#fff, 0))