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

Adding support for pixel-stops for webkit if the gradient goes from left-to-right or top-to-bottom.

Browse Source
This commit is contained in:
Steve Hull 2011-03-24 18:54:24 -07:00
parent 0fdf606ad3
commit 9940ee8cbb
3 changed files with 41 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -120,7 +120,7 @@ module Compass::SassExtensions::Functions::GradientSupport
def to_webkit(options = self.options)
args = []
args << grad_point(position_and_angle || Sass::Script::String.new("top"))
args << grad_point(opposite_position(position_and_angle || Sass::Script::String.new("top")))
args << linear_end_position(position_and_angle, color_stops)
args << grad_color_stops(color_stops)
args.each{|a| a.options = options}
Sass::Script::String.new("-webkit-gradient(linear, #{args.join(', ')})")
@ -142,7 +142,6 @@ module Compass::SassExtensions::Functions::GradientSupport
end
module Functions
# given a position list, return a corresponding position in percents
def grad_point(position)
position = unless position.is_a?(Sass::Script::List)
@ -263,6 +262,25 @@ module Compass::SassExtensions::Functions::GradientSupport
end
end
# only used for webkit
def linear_end_position(position_and_angle, color_list)
start_point = grad_point(position_and_angle || Sass::Script::String.new("top"))
end_point = grad_point(opposite_position(position_and_angle || Sass::Script::String.new("top")))
end_target = color_list.value.last.stop
if color_list.value.last.stop && color_list.value.last.stop.numerator_units == ["px"]
new_end = color_list.value.last.stop.value
if start_point.value.first == end_point.value.first && start_point.value.last.value == 0
# this means top-to-bottom
end_point.value[1] = Sass::Script::Number.new(end_target.value)
elsif start_point.value.last == end_point.value.last && start_point.value.first.value == 0
# this implies left-to-right
end_point.value[0] = Sass::Script::Number.new(end_target.value)
end
end
end_point
end
# returns the end position of the gradient from the color stop
def grad_end_position(color_list, radial = Sass::Script::Bool.new(false))
assert_type color_list, :List

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

@ -25,6 +25,20 @@
background-image: -moz-linear-gradient(top left, #dddddd, #aaaaaa);
background-image: linear-gradient(top left, #dddddd, #aaaaaa); }
.bg-linear-gradient-pixel-stop-from-top {
background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiB4MT0iNTAlIiB5MT0iMCUiIHgyPSI1MCUiIHkyPSIxMDAlIj48c3RvcCBvZmZzZXQ9IjI1JSIgc3RvcC1jb2xvcj0iI2RkZGRkZCIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iI2FhYWFhYSIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA==');
background-size: 100%;
background-image: -webkit-gradient(linear, 50% 0%, 50% 40, color-stop(25%, #dddddd), color-stop(100%, #aaaaaa));
background-image: -moz-linear-gradient(top, #dddddd 10px, #aaaaaa 40px);
background-image: linear-gradient(top, #dddddd 10px, #aaaaaa 40px); }
.bg-linear-gradient-pixel-stop-from-left {
background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiB4MT0iMCUiIHkxPSI1MCUiIHgyPSIxMDAlIiB5Mj0iNTAlIj48c3RvcCBvZmZzZXQ9IjI1JSIgc3RvcC1jb2xvcj0iI2RkZGRkZCIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iI2FhYWFhYSIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA==');
background-size: 100%;
background-image: -webkit-gradient(linear, 0% 50%, 40 50%, color-stop(25%, #dddddd), color-stop(100%, #aaaaaa));
background-image: -moz-linear-gradient(left, #dddddd 10px, #aaaaaa 40px);
background-image: linear-gradient(left, #dddddd 10px, #aaaaaa 40px); }
.bg-radial-gradient {
background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PHJhZGlhbEdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgY3g9IjUwJSIgY3k9IjUwJSIgcj0iMTAwIj48c3RvcCBvZmZzZXQ9IjAlIiBzdG9wLWNvbG9yPSIjZGRkZGRkIi8+PHN0b3Agb2Zmc2V0PSIxMDAlIiBzdG9wLWNvbG9yPSIjYWFhYWFhIi8+PC9yYWRpYWxHcmFkaWVudD48L2RlZnM+PHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgZmlsbD0idXJsKCNncmFkKSIgLz48L3N2Zz4g');
background-size: 100%;

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

@ -16,6 +16,12 @@ $experimental-support-for-svg: true
.bg-linear-gradient
+background-image(linear-gradient(top left, #ddd, #aaa))
.bg-linear-gradient-pixel-stop-from-top
+background-image(linear-gradient(top, #ddd 10px, #aaa 40px))
.bg-linear-gradient-pixel-stop-from-left
+background-image(linear-gradient(left, #ddd 10px, #aaa 40px))
.bg-radial-gradient
+background-image(radial-gradient(center center, #ddd, #aaa 100px))
@ -215,4 +221,4 @@ $experimental-support-for-svg: true
+filter-gradient(white, black, vertical)
.ie-alpha-filter
+filter-gradient(rgba(#fff, 1), rgba(#fff, 0))
+filter-gradient(rgba(#fff, 1), rgba(#fff, 0))