_extras.scss 1.3 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586
  1. /* EXTRAS
  2. * -------------------------- */
  3. /* Stacked and layered icon */
  4. @include icon-stack;
  5. /* Animated rotating icon */
  6. .icon-spin {
  7. display: inline-block;
  8. @include animation(spin 2s infinite linear);
  9. }
  10. @-moz-keyframes spin {
  11. 0% {
  12. -moz-transform: rotate(0deg);
  13. }
  14. 100% {
  15. -moz-transform: rotate(359deg);
  16. }
  17. }
  18. @-webkit-keyframes spin {
  19. 0% {
  20. -webkit-transform: rotate(0deg);
  21. }
  22. 100% {
  23. -webkit-transform: rotate(359deg);
  24. }
  25. }
  26. @-o-keyframes spin {
  27. 0% {
  28. -o-transform: rotate(0deg);
  29. }
  30. 100% {
  31. -o-transform: rotate(359deg);
  32. }
  33. }
  34. @-ms-keyframes spin {
  35. 0% {
  36. -ms-transform: rotate(0deg);
  37. }
  38. 100% {
  39. -ms-transform: rotate(359deg);
  40. }
  41. }
  42. @keyframes spin {
  43. 0% {
  44. transform: rotate(0deg);
  45. }
  46. 100% {
  47. transform: rotate(359deg);
  48. }
  49. }
  50. /* Icon rotations and mirroring */
  51. .icon-rotate-90:before {
  52. @include transform(rotate(90deg));
  53. filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=1);
  54. }
  55. .icon-rotate-180:before {
  56. @include transform(rotate(180deg));
  57. filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=2);
  58. }
  59. .icon-rotate-270:before {
  60. @include transform(rotate(270deg));
  61. filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
  62. }
  63. .icon-flip-horizontal:before {
  64. @include transform(scale(-1, 1));
  65. }
  66. .icon-flip-vertical:before {
  67. @include transform(scale(1, -1));
  68. }