You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

_mixins.scss 1.0KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152
  1. /**
  2. * Animation mixin.
  3. */
  4. @mixin animation($animate...) {
  5. $max: length($animate);
  6. $animations: '';
  7. @for $i from 1 through $max {
  8. $animations: #{$animations + nth($animate, $i)};
  9. @if $i < $max {
  10. $animations: #{$animations + ", "};
  11. }
  12. }
  13. -webkit-animation: $animations;
  14. -moz-animation: $animations;
  15. -o-animation: $animations;
  16. animation: $animations;
  17. }
  18. /**
  19. * Keyframes mixin.
  20. */
  21. @mixin keyframes($animationName) {
  22. @-webkit-keyframes #{$animationName} {
  23. @content;
  24. }
  25. @-moz-keyframes #{$animationName} {
  26. @content;
  27. }
  28. @-o-keyframes #{$animationName} {
  29. @content;
  30. }
  31. @keyframes #{$animationName} {
  32. @content;
  33. }
  34. }
  35. @mixin transform($func) {
  36. -moz-transform: $func;
  37. -ms-transform: $func;
  38. -webkit-transform: $func;
  39. -o-transform: $func;
  40. transform: $func;
  41. }
  42. @mixin transition($transition...) {
  43. -moz-transition: $transition;
  44. -o-transition: $transition;
  45. -webkit-transition: $transition;
  46. transition: $transition;
  47. }