Better formatting of the gradient mixin code comments.

This commit is contained in:
Chris Eppstein 2010-03-29 00:05:17 -07:00
parent 128a551960
commit 4aa2cc7a51

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