extras.less 2.3 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293
  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. /* Prevent stack and spinners from being taken inline when inside a link */
  14. a .icon-stack,
  15. a .icon-spin {
  16. display: inline-block;
  17. text-decoration: none;
  18. }
  19. @-moz-keyframes spin {
  20. 0% { -moz-transform: rotate(0deg); }
  21. 100% { -moz-transform: rotate(359deg); }
  22. }
  23. @-webkit-keyframes spin {
  24. 0% { -webkit-transform: rotate(0deg); }
  25. 100% { -webkit-transform: rotate(359deg); }
  26. }
  27. @-o-keyframes spin {
  28. 0% { -o-transform: rotate(0deg); }
  29. 100% { -o-transform: rotate(359deg); }
  30. }
  31. @-ms-keyframes spin {
  32. 0% { -ms-transform: rotate(0deg); }
  33. 100% { -ms-transform: rotate(359deg); }
  34. }
  35. @keyframes spin {
  36. 0% { transform: rotate(0deg); }
  37. 100% { transform: rotate(359deg); }
  38. }
  39. /* Icon rotations and mirroring */
  40. .icon-rotate-90:before {
  41. -webkit-transform: rotate(90deg);
  42. -moz-transform: rotate(90deg);
  43. -ms-transform: rotate(90deg);
  44. -o-transform: rotate(90deg);
  45. transform: rotate(90deg);
  46. filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=1);
  47. }
  48. .icon-rotate-180:before {
  49. -webkit-transform: rotate(180deg);
  50. -moz-transform: rotate(180deg);
  51. -ms-transform: rotate(180deg);
  52. -o-transform: rotate(180deg);
  53. transform: rotate(180deg);
  54. filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=2);
  55. }
  56. .icon-rotate-270:before {
  57. -webkit-transform: rotate(270deg);
  58. -moz-transform: rotate(270deg);
  59. -ms-transform: rotate(270deg);
  60. -o-transform: rotate(270deg);
  61. transform: rotate(270deg);
  62. filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
  63. }
  64. .icon-flip-horizontal:before {
  65. -webkit-transform: scale(-1, 1);
  66. -moz-transform: scale(-1, 1);
  67. -ms-transform: scale(-1, 1);
  68. -o-transform: scale(-1, 1);
  69. transform: scale(-1, 1);
  70. }
  71. .icon-flip-vertical:before {
  72. -webkit-transform: scale(1, -1);
  73. -moz-transform: scale(1, -1);
  74. -ms-transform: scale(1, -1);
  75. -o-transform: scale(1, -1);
  76. transform: scale(1, -1);
  77. }
  78. /* ensure rotation occurs inside anchor tags */
  79. a {
  80. .icon-rotate-90, .icon-rotate-180, .icon-rotate-270, .icon-flip-horizontal, .icon-flip-vertical {
  81. &:before { display: inline-block; }
  82. }
  83. }