_mixins.scss 1.3 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657
  1. /* FUNCTIONS */
  2. //animation
  3. @mixin transition($target, $duration, $ease) {
  4. -webkit-transition: $target $duration $ease;
  5. -moz-transition: $target $duration $ease;
  6. -o-transition: $target $duration $ease;
  7. transition: $target $duration $ease;
  8. }
  9. //animation
  10. @mixin animation-delay($delay) {
  11. -webkit-animation-delay: $delay;
  12. /* Safari 4.0 - 8.0 */
  13. animation-delay: $delay;
  14. }
  15. //animation
  16. @mixin animation($animate...) {
  17. $max: length($animate);
  18. $animations: '';
  19. @for $i from 1 through $max {
  20. $animations: #{$animations + nth($animate, $i)};
  21. @if $i < $max {
  22. $animations: #{$animations + ", "};
  23. }
  24. }
  25. -webkit-animation: $animations;
  26. -moz-animation: $animations;
  27. -o-animation: $animations;
  28. animation: $animations;
  29. }
  30. //keyframes
  31. @mixin keyframes($animationName) {
  32. @-webkit-keyframes #{$animationName} {
  33. @content;
  34. }
  35. @-moz-keyframes #{$animationName} {
  36. @content;
  37. }
  38. @-o-keyframes #{$animationName} {
  39. @content;
  40. }
  41. @keyframes #{$animationName} {
  42. @content;
  43. }
  44. }
  45. @mixin border-radius($radius: 4px){
  46. -moz-border-radius: $radius;
  47. -webkit-border-radius: $radius;
  48. -ms-border-radius: $radius;
  49. -o-border-radius: $radius;
  50. -khtml-border-radius: $radius;
  51. border-radius: $radius;
  52. }