@import “shared”;

// 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%)) // // This yields a linear gradient on top of a background image // // +linear-gradient(color_stops(white,black), top, image-url('noise.png')) // Browsers Supported: // // - Chrome // - Safari // - Firefox 3.6

@mixin linear-gradient($color-stops, $start: top, $image: false) {

// Firefox's gradient api is nice.
// Webkit's gradient api sucks -- hence these backflips:
$background: unquote("");
@if $image { $background : $image + unquote(", "); }
$start: unquote($start);
$end: opposite-position($start);
@if $experimental-support-for-webkit {
  background-image: #{$background}-webkit-gradient(linear, grad-point($start), grad-point($end), grad-color-stops($color-stops));
}
@if $experimental-support-for-mozilla {
  background-image: #{$background}-moz-linear-gradient($start, $color-stops);
}
background-image: 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)) // // a background image on top of the gradient // // Requires an image with an alpha-layer. // +radial-gradient(color_stops(c00, fff), top left, circle, image-url(“noise.png”))) // Browsers Supported: // // - Chrome // - Safari // - Firefox 3.6

@mixin radial-gradient($color-stops, $center-position: center center, $image: false) {

$center-position: unquote($center-position);
$end-pos: grad-end-position($color-stops, true);
$background: unquote("");
@if $image { $background: $image + unquote(", "); }
@if $experimental-support-for-webkit {
  background-image: #{$background}-webkit-gradient(radial, grad-point($center-position), 0, grad-point($center-position), $end-pos, grad-color-stops($color-stops));
}
@if $experimental-support-for-mozilla {
  background-image: #{$background}-moz-radial-gradient($center-position, circle, $color-stops);
}
background-image: radial-gradient($center-position, circle, $color-stops);

}