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

updated gradient example to use sass script color stop function, added radial gradient support

Browse Source
This commit is contained in:
B Mathis 2009-11-21 14:47:32 -06:00
parent 9d8253fa05
commit a3b52a23ee
1 changed files with 35 additions and 14 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

49
lib/compass/frameworks/compass/stylesheets/compass/css3/_gradient.sass
View File

@ -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(!type, !coords, !color_start, !color_end, !color_stop = false)
!gradient: #{!coords}, from(#{!color_start}), to(#{!color_end}) !gradient= "#{!coords}, from(#{!color_start}), to(#{!color_end})"
@if !stop_1 != 0 @if !color_stop
!gradient= !gradient + color-stop(#{!stop_1_pos}, #{!stop_1}) !gradient= !gradient + ", " + !color_stop
@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})
background: -webkit-gradient(#{!type}, #{!gradient}) background: -webkit-gradient(#{!type}, #{!gradient})
background: -moz-#{!type}-gradient(#{!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(!start, !end, !color1, !color2, !color_stop = false)
=linear-gradient("left top, right top", !color1, !color2) !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)