diff --git a/lib/compass/frameworks/compass/stylesheets/compass/css3/_gradient.sass b/lib/compass/frameworks/compass/stylesheets/compass/css3/_gradient.sass index b8cc79f8..d67d863a 100644 --- a/lib/compass/frameworks/compass/stylesheets/compass/css3/_gradient.sass +++ b/lib/compass/frameworks/compass/stylesheets/compass/css3/_gradient.sass @@ -1,19 +1,40 @@ -=gradient(!type, !coords, !color_start, !color_end, !stop_1 = 0, !stop_1_pos = .3, !stop_2 = 0, !stop_2_pos = .6, !stop_3 = 0, !stop_3_pos = .9) - !gradient: #{!coords}, from(#{!color_start}), to(#{!color_end}) - @if !stop_1 != 0 - !gradient= !gradient + color-stop(#{!stop_1_pos}, #{!stop_1}) - @if !stop_2 != 0 - !gradient= !gradient + color-stop(#{!stop_2_pos}, #{!stop_2}) - @if !stop_3 != 0 - !gradient= !gradient + color-stop(#{!stop_3_pos}, #{!stop_3}) +=gradient(!type, !coords, !color_start, !color_end, !color_stop = false) + !gradient= "#{!coords}, from(#{!color_start}), to(#{!color_end})" + @if !color_stop + !gradient= !gradient + ", " + !color_stop background: -webkit-gradient(#{!type}, #{!gradient}) background: -moz-#{!type}-gradient(#{!gradient}) -=linear-gradient(!coords, !color1, !color2) - +gradient("linear", !coords, !color1, !color2) +//* + // This will yeild a radial gradient with an apparent specular highlight + +radial-gradient("45 45, 10, 52 50, 30", Cyan, DodgerBlue) + +=radial-gradient(!coords, !color1, !color2, !color_stop = false) + +gradient("radial", !coords, !color1, !color2, !color_stop) -=v-gradient(!color1, !color2) - =linear-gradient("left top, left bottom", !color1, !color2) +//* + // This yields a linear gradient spanning from !start to !end coordinates + +linear-gradient("left top", "left bottom", #fff, #ddd) -=h-gradient(!color1, !color2) - =linear-gradient("left top, right top", !color1, !color2) \ No newline at end of file +=linear-gradient(!start, !end, !color1, !color2, !color_stop = false) + !coords = !start + ", " + !end + +gradient("linear", !coords, !color1, !color2, !color_stop) + +//* + // This yields a gradient starting at the top with #fff, ending in #aaa + +v-gradient(#fff, #aaa) + // Same as above but with a #ccc at the halfway point + +v-gradient(#fff, #aaa, color_stop(50%, #ccc)) + // Same as the first example but with #ccc at the 30% from the top, and #bbb at 70% from the top + +v-gradient(#fff, #aaa, color_stop(30%, #ccc, 70%, #bbb)) + +=v-gradient(!color1, !color2, !color_stop = false) + +linear-gradient("left top", "left bottom", !color1, !color2, !color_stop) + +//* + // This yields a horizontal linear gradient spanning from left to right + // It can be used just like v-gradient above + h-gradient(#fff, #ddd) + +=h-gradient(!color1, !color2, !color_stop = false) + +linear-gradient("left top", "right top", !color1, !color2, !color_stop) \ No newline at end of file