123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293 |
- /* EXTRAS
- * -------------------------- */
- /* Stacked and layered icon */
- @include 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; }
- }
- }
|