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