ESPTrainer built with Meteor and React

_gradient.scss 2.1KB

12345678910111213141516171819202122232425262728293031323334353637383940414243
  1. @mixin gradient($one, $two, $direction) {
  2. $deg: if($direction == 'top', 45deg, -45deg);
  3. $word: if($direction == 'top', bottom, top);
  4. $opposite: if($direction == 'top', top, bottom);
  5. background: $one;
  6. background: -moz-linear-gradient($deg, $one 0%, $two 100%);
  7. background: -webkit-gradient(left $word, right $opposite, color-stop(0%, $one), color-stop(100%, $two));
  8. background: -webkit-linear-gradient($deg, $one 0%, $two 100%);
  9. background: -o-linear-gradient($deg, $one 0%, $two 100%);
  10. background: -ms-linear-gradient($deg, $one 0%, $two 100%);
  11. background: linear-gradient($deg, $one 0%, $two 100%);
  12. filter: progid:DXImageTransform.Microsoft.gradient(
  13. startColorstr='#{ie_hex_str($one)}',
  14. endColorstr='#{ie_hex_str($two)}',
  15. GradientType=1
  16. );
  17. }
  18. @mixin linear-gradient($color) {
  19. $lighten: lighten($color, 10);
  20. background: $color;
  21. background: -moz-linear-gradient(top, $color 0%, $lighten 100%);
  22. background: -webkit-linear-gradient(top, $color 0%, $lighten 100%);
  23. background: linear-gradient(to bottom, $color 0%, $lighten 100%);
  24. filter: progid:DXImageTransform.Microsoft.gradient(
  25. startColorstr='#{ie_hex_str($color)}',
  26. endColorstr='#{ie_hex_str($lighten)}',
  27. GradientType=0
  28. );
  29. }
  30. @mixin radial-gradient($color) {
  31. $lighten: lighten($color, 35);
  32. background: $lighten;
  33. background: -moz-radial-gradient(center, ellipse cover, $lighten 0%, $color 100%);
  34. background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%, $lighten), color-stop(100%, $color));
  35. background: -webkit-radial-gradient(center, ellipse cover, $lighten 0%, $color 100%);
  36. background: -o-radial-gradient(center, ellipse cover, $lighten 0%, $color 100%);
  37. background: -ms-radial-gradient(center, ellipse cover, $lighten 0%, $color 100%);
  38. background: radial-gradient(ellipse at center, $lighten 0%, $color 100%);
  39. filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#{ie_hex_str($lighten)}', endColorstr='#{ie_hex_str($color)}', GradientType=1 );
  40. }