_mixins.scss 1.2 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869
  1. /* stylelint-disable property-no-vendor-prefix */
  2. /* FUNCTIONS */
  3. //animation
  4. @mixin transition($target, $duration, $ease) {
  5. -webkit-transition: $target $duration $ease;
  6. -moz-transition: $target $duration $ease;
  7. -o-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. animation: $animations;
  30. }
  31. //keyframes
  32. @mixin keyframes($animationName) {
  33. @-webkit-keyframes #{$animationName} {
  34. @content;
  35. }
  36. @-moz-keyframes #{$animationName} {
  37. @content;
  38. }
  39. @-o-keyframes #{$animationName} {
  40. @content;
  41. }
  42. @keyframes #{$animationName} {
  43. @content;
  44. }
  45. }
  46. @mixin border-radius($radius: 4px) {
  47. -moz-border-radius: $radius;
  48. -webkit-border-radius: $radius;
  49. -ms-border-radius: $radius;
  50. -o-border-radius: $radius;
  51. -khtml-border-radius: $radius;
  52. border-radius: $radius;
  53. }