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

Better formatting of the gradient mixin code comments.

Browse Source
This commit is contained in:
Chris Eppstein 2010-03-29 00:05:17 -07:00
parent 128a551960
commit 4aa2cc7a51
1 changed files with 44 additions and 42 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

86
frameworks/compass/stylesheets/compass/css3/_gradient.sass
View File

@ -1,30 +1,31 @@
// This yields a linear gradient spanning from top to bottom
//
// +linear-gradient(color_stops(white, black))
//
// This yields a linear gradient spanning from bottom to top
//
// +linear-gradient(color_stops(white, black), "bottom")
//
// This yields a linear gradient spanning from left to right
//
// +linear-gradient(color_stops(white, black), "left")
//
// This yields a linear gradient starting at white passing
// thru blue at 33% down and then to black
//
// +linear-gradient(color_stops(white, blue 33%, black))
//
// This yields a linear gradient starting at white passing
// thru blue at 33% down and then to black at 67% until the end
//
// +linear-gradient(color_stops(white, blue 33%, black 67%))
//
// Browsers Supported:
//
// - Chrome
// - Safari
// - Firefox 3.6
This yields a linear gradient spanning from top to bottom
+linear-gradient(color_stops(white, black))
This yields a linear gradient spanning from bottom to top
+linear-gradient(color_stops(white, black), "bottom")
This yields a linear gradient spanning from left to right
+linear-gradient(color_stops(white, black), "left")
This yields a linear gradient starting at white passing
thru blue at 33% down and then to black
+linear-gradient(color_stops(white, blue 33%, black))
This yields a linear gradient starting at white passing
thru blue at 33% down and then to black at 67% until the end
+linear-gradient(color_stops(white, blue 33%, black 67%))
Browsers Supported:
- Chrome
- Safari
- Firefox 3.6
=linear-gradient(!color_stops, !start = "top")
// Firefox's gradient api is nice.
@ -33,23 +34,24 @@
background-image: -webkit-gradient(linear, #{grad_point(!start)}, #{grad_point(!end)}, #{grad_color_stops(!color_stops)})
background-image: -moz-linear-gradient(#{!start}, #{!color_stops})
// Due to limitation's of webkit, the radial gradient mixin works best if you use
// pixel-based color stops.
//
// Examples:
//
// // Defaults to a centered, 100px radius gradient
// +radial-gradient(color_stops(#c00, #00c))
// // 100px radius gradient in the top left corner
// +radial-gradient(color_stops(#c00, #00c), "top left")
// // Three colors, ending at 50px and passing thru #fff at 25px
// +radial-gradient(color_stops(#c00, #fff, #00c 50px))
//
// Browsers Supported:
//
// - Chrome
// - Safari
// - Firefox 3.6
Due to limitation's of webkit, the radial gradient mixin works best if you use
pixel-based color stops.
Examples:
// Defaults to a centered, 100px radius gradient
+radial-gradient(color_stops(#c00, #00c))
// 100px radius gradient in the top left corner
+radial-gradient(color_stops(#c00, #00c), "top left")
// Three colors, ending at 50px and passing thru #fff at 25px
+radial-gradient(color_stops(#c00, #fff, #00c 50px))
Browsers Supported:
- Chrome
- Safari
- Firefox 3.6
=radial-gradient(!color_stops, !center_position = "center center")
!end_pos = grad_end_position(!color_stops, true)