extras.less 2.3 KB

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