_mixins.scss 1.4 KB

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