_mixins.scss 1.1 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546
  1. // Transition
  2. @mixin transition($what: all, $time: 0.2s, $how: ease-in-out) {
  3. -webkit-transition: $what $time $how;
  4. -moz-transition: $what $time $how;
  5. -ms-transition: $what $time $how;
  6. -o-transition: $what $time $how;
  7. transition: $what $time $how;
  8. }
  9. // Transform
  10. @mixin transform($transforms) {
  11. -moz-transform: $transforms;
  12. -o-transform: $transforms;
  13. -ms-transform: $transforms;
  14. -webkit-transform: $transforms;
  15. transform: $transforms;
  16. }
  17. // rotate
  18. @mixin rotate ($deg) {
  19. @include transform(rotate(#{$deg}deg));
  20. }
  21. // scale
  22. @mixin scale($scale) {
  23. @include transform(scale($scale));
  24. }
  25. // translate
  26. @mixin translate ($x, $y) {
  27. @include transform(translate($x, $y));
  28. }
  29. // skew
  30. @mixin skew ($x, $y) {
  31. @include transform(skew(#{$x}deg, #{$y}deg));
  32. }
  33. //transform origin
  34. @mixin transform-origin ($origin) {
  35. moz-transform-origin: $origin;
  36. -o-transform-origin: $origin;
  37. -ms-transform-origin: $origin;
  38. -webkit-transform-origin: $origin;
  39. transform-origin: $origin;
  40. }