ESPTrainer/imports/ui/styles/_gradient.scss

@mixin gradient($one, $two, $direction) {
  $deg: if($direction == 'top', 45deg, -45deg);
  $word: if($direction == 'top', bottom, top);
  $opposite: if($direction == 'top', top, bottom);
  background: $one;
  background: -moz-linear-gradient($deg, $one 0%, $two 100%);
  background: -webkit-gradient(left $word, right $opposite, color-stop(0%, $one), color-stop(100%, $two));
  background: -webkit-linear-gradient($deg, $one 0%, $two 100%);
  background: -o-linear-gradient($deg, $one 0%, $two 100%);
  background: -ms-linear-gradient($deg, $one 0%, $two 100%);
  background: linear-gradient($deg, $one 0%, $two 100%);
  filter: progid:DXImageTransform.Microsoft.gradient(
                  startColorstr='#{ie_hex_str($one)}',
                  endColorstr='#{ie_hex_str($two)}',
                  GradientType=1
  );
}

@mixin linear-gradient($color) {
  $lighten: lighten($color, 10);
  background: $color;
  background: -moz-linear-gradient(top, $color 0%, $lighten 100%);
  background: -webkit-linear-gradient(top, $color 0%, $lighten 100%);
  background: linear-gradient(to bottom, $color 0%, $lighten 100%);
  filter: progid:DXImageTransform.Microsoft.gradient(
                  startColorstr='#{ie_hex_str($color)}',
                  endColorstr='#{ie_hex_str($lighten)}',
                  GradientType=0
  );
}


@mixin radial-gradient($color) {
  $lighten: lighten($color, 35);
  background: $lighten;
  background: -moz-radial-gradient(center, ellipse cover, $lighten 0%, $color 100%);
  background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%, $lighten), color-stop(100%, $color));
  background: -webkit-radial-gradient(center, ellipse cover, $lighten 0%, $color 100%);
  background: -o-radial-gradient(center, ellipse cover, $lighten 0%, $color 100%);
  background: -ms-radial-gradient(center, ellipse cover, $lighten 0%, $color 100%);
  background: radial-gradient(ellipse at center, $lighten 0%, $color 100%);
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#{ie_hex_str($lighten)}', endColorstr='#{ie_hex_str($color)}', GradientType=1 );
}

@mixin rainbow-gradient() {
  background: cyan; /* For browsers that do not support gradients */
  background: -webkit-linear-gradient(left, cyan, blue, green, yellow, orange, red, violet); /* For Safari 5.1 to 6.0 */
  background: -o-linear-gradient(right, cyan, blue, green, yellow, orange, red, violet); /* For Opera 11.1 to 12.0 */
  background: -moz-linear-gradient(right, cyan, blue, green, yellow, orange, red, violet); /* For Firefox 3.6 to 15 */
  background: linear-gradient(to right, cyan, blue, green, yellow, orange, red, violet); /* Standard syntax (must be last) */
}