| /* EXTRAS |
| * -------------------------- */ |
| |
| /* Stacked and layered icon */ |
| .icon-stack(); |
| |
| /* Animated rotating icon */ |
| .icon-spin { |
| display: inline-block; |
| -moz-animation: spin 2s infinite linear; |
| -o-animation: spin 2s infinite linear; |
| -webkit-animation: spin 2s infinite linear; |
| animation: spin 2s infinite linear; |
| } |
| |
| /* Prevent stack and spinners from being taken inline when inside a link */ |
| a .icon-stack, |
| a .icon-spin { |
| display: inline-block; |
| text-decoration: none; |
| } |
| |
| @-moz-keyframes spin { |
| 0% { -moz-transform: rotate(0deg); } |
| 100% { -moz-transform: rotate(359deg); } |
| } |
| @-webkit-keyframes spin { |
| 0% { -webkit-transform: rotate(0deg); } |
| 100% { -webkit-transform: rotate(359deg); } |
| } |
| @-o-keyframes spin { |
| 0% { -o-transform: rotate(0deg); } |
| 100% { -o-transform: rotate(359deg); } |
| } |
| @-ms-keyframes spin { |
| 0% { -ms-transform: rotate(0deg); } |
| 100% { -ms-transform: rotate(359deg); } |
| } |
| @keyframes spin { |
| 0% { transform: rotate(0deg); } |
| 100% { transform: rotate(359deg); } |
| } |
| |
| /* Icon rotations and mirroring */ |
| .icon-rotate-90:before { |
| -webkit-transform: rotate(90deg); |
| -moz-transform: rotate(90deg); |
| -ms-transform: rotate(90deg); |
| -o-transform: rotate(90deg); |
| transform: rotate(90deg); |
| filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=1); |
| } |
| |
| .icon-rotate-180:before { |
| -webkit-transform: rotate(180deg); |
| -moz-transform: rotate(180deg); |
| -ms-transform: rotate(180deg); |
| -o-transform: rotate(180deg); |
| transform: rotate(180deg); |
| filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=2); |
| } |
| |
| .icon-rotate-270:before { |
| -webkit-transform: rotate(270deg); |
| -moz-transform: rotate(270deg); |
| -ms-transform: rotate(270deg); |
| -o-transform: rotate(270deg); |
| transform: rotate(270deg); |
| filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3); |
| } |
| |
| .icon-flip-horizontal:before { |
| -webkit-transform: scale(-1, 1); |
| -moz-transform: scale(-1, 1); |
| -ms-transform: scale(-1, 1); |
| -o-transform: scale(-1, 1); |
| transform: scale(-1, 1); |
| } |
| |
| .icon-flip-vertical:before { |
| -webkit-transform: scale(1, -1); |
| -moz-transform: scale(1, -1); |
| -ms-transform: scale(1, -1); |
| -o-transform: scale(1, -1); |
| transform: scale(1, -1); |
| } |
| |
| /* ensure rotation occurs inside anchor tags */ |
| a { |
| .icon-rotate-90, .icon-rotate-180, .icon-rotate-270, .icon-flip-horizontal, .icon-flip-vertical { |
| &:before { display: inline-block; } |
| } |
| } |