From ba907e7edea1d6971ac8f723eb50dc72b494c0ad Mon Sep 17 00:00:00 2001 From: davegandy Date: Wed, 12 Jun 2013 10:51:29 -0400 Subject: [PATCH] straight port of extras.scss --- scss/_extras.scss | 98 ++++++++++++----------- src/assets/font-awesome/scss/_extras.scss | 98 ++++++++++++----------- 2 files changed, 102 insertions(+), 94 deletions(-) diff --git a/scss/_extras.scss b/scss/_extras.scss index 97dda3579..9882cdc3c 100644 --- a/scss/_extras.scss +++ b/scss/_extras.scss @@ -2,85 +2,89 @@ * -------------------------- */ /* Stacked and layered icon */ -@include icon-stack; +@include icon-stack(); /* Animated rotating icon */ .icon-spin { display: inline-block; - @include animation(spin 2s infinite linear); + -moz-animation: spin 2s infinite linear; + -o-animation: spin 2s infinite linear; + -webkit-animation: spin 2s infinite linear; + animation: spin 2s infinite linear; +} +a .icon-spin { + display: inline-block; + text-decoration: none; } @-moz-keyframes spin { - 0% { - -moz-transform: rotate(0deg); - } - 100% { - -moz-transform: rotate(359deg); - } + 0% { -moz-transform: rotate(0deg); } + 100% { -moz-transform: rotate(359deg); } } - - @-webkit-keyframes spin { - 0% { - -webkit-transform: rotate(0deg); - } - 100% { - -webkit-transform: rotate(359deg); - } + 0% { -webkit-transform: rotate(0deg); } + 100% { -webkit-transform: rotate(359deg); } } - - @-o-keyframes spin { - 0% { - -o-transform: rotate(0deg); - } - 100% { - -o-transform: rotate(359deg); - } + 0% { -o-transform: rotate(0deg); } + 100% { -o-transform: rotate(359deg); } } - - @-ms-keyframes spin { - 0% { - -ms-transform: rotate(0deg); - } - 100% { - -ms-transform: rotate(359deg); - } + 0% { -ms-transform: rotate(0deg); } + 100% { -ms-transform: rotate(359deg); } } - - @keyframes spin { - 0% { - transform: rotate(0deg); - } - 100% { - transform: rotate(359deg); - } + 0% { transform: rotate(0deg); } + 100% { transform: rotate(359deg); } } - /* Icon rotations and mirroring */ - .icon-rotate-90:before { - @include transform(rotate(90deg)); + -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 { - @include transform(rotate(180deg)); + -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 { - @include transform(rotate(270deg)); + -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 { - @include transform(scale(-1, 1)); + -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 { - @include transform(scale(1, -1)); + -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; } + } } diff --git a/src/assets/font-awesome/scss/_extras.scss b/src/assets/font-awesome/scss/_extras.scss index 97dda3579..9882cdc3c 100644 --- a/src/assets/font-awesome/scss/_extras.scss +++ b/src/assets/font-awesome/scss/_extras.scss @@ -2,85 +2,89 @@ * -------------------------- */ /* Stacked and layered icon */ -@include icon-stack; +@include icon-stack(); /* Animated rotating icon */ .icon-spin { display: inline-block; - @include animation(spin 2s infinite linear); + -moz-animation: spin 2s infinite linear; + -o-animation: spin 2s infinite linear; + -webkit-animation: spin 2s infinite linear; + animation: spin 2s infinite linear; +} +a .icon-spin { + display: inline-block; + text-decoration: none; } @-moz-keyframes spin { - 0% { - -moz-transform: rotate(0deg); - } - 100% { - -moz-transform: rotate(359deg); - } + 0% { -moz-transform: rotate(0deg); } + 100% { -moz-transform: rotate(359deg); } } - - @-webkit-keyframes spin { - 0% { - -webkit-transform: rotate(0deg); - } - 100% { - -webkit-transform: rotate(359deg); - } + 0% { -webkit-transform: rotate(0deg); } + 100% { -webkit-transform: rotate(359deg); } } - - @-o-keyframes spin { - 0% { - -o-transform: rotate(0deg); - } - 100% { - -o-transform: rotate(359deg); - } + 0% { -o-transform: rotate(0deg); } + 100% { -o-transform: rotate(359deg); } } - - @-ms-keyframes spin { - 0% { - -ms-transform: rotate(0deg); - } - 100% { - -ms-transform: rotate(359deg); - } + 0% { -ms-transform: rotate(0deg); } + 100% { -ms-transform: rotate(359deg); } } - - @keyframes spin { - 0% { - transform: rotate(0deg); - } - 100% { - transform: rotate(359deg); - } + 0% { transform: rotate(0deg); } + 100% { transform: rotate(359deg); } } - /* Icon rotations and mirroring */ - .icon-rotate-90:before { - @include transform(rotate(90deg)); + -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 { - @include transform(rotate(180deg)); + -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 { - @include transform(rotate(270deg)); + -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 { - @include transform(scale(-1, 1)); + -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 { - @include transform(scale(1, -1)); + -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; } + } }