mirror of
https://github.com/ForkAwesome/Fork-Awesome
synced 2024-05-29 11:52:22 +02:00
straight port of extras.scss
This commit is contained in:
davegandy
parent
fb07367e33
commit
ba907e7ede
|
|
@ -2,85 +2,89 @@
|
||||||
* -------------------------- */
|
* -------------------------- */
|
||||||
|
|
||||||
/* Stacked and layered icon */
|
/* Stacked and layered icon */
|
||||||
@include icon-stack;
|
@include icon-stack();
|
||||||
|
|
||||||
/* Animated rotating icon */
|
/* Animated rotating icon */
|
||||||
.icon-spin {
|
.icon-spin {
|
||||||
display: inline-block;
|
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 {
|
@-moz-keyframes spin {
|
||||||
0% {
|
0% { -moz-transform: rotate(0deg); }
|
||||||
-moz-transform: rotate(0deg);
|
100% { -moz-transform: rotate(359deg); }
|
||||||
}
|
|
||||||
100% {
|
|
||||||
-moz-transform: rotate(359deg);
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
@-webkit-keyframes spin {
|
@-webkit-keyframes spin {
|
||||||
0% {
|
0% { -webkit-transform: rotate(0deg); }
|
||||||
-webkit-transform: rotate(0deg);
|
100% { -webkit-transform: rotate(359deg); }
|
||||||
}
|
|
||||||
100% {
|
|
||||||
-webkit-transform: rotate(359deg);
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
@-o-keyframes spin {
|
@-o-keyframes spin {
|
||||||
0% {
|
0% { -o-transform: rotate(0deg); }
|
||||||
-o-transform: rotate(0deg);
|
100% { -o-transform: rotate(359deg); }
|
||||||
}
|
|
||||||
100% {
|
|
||||||
-o-transform: rotate(359deg);
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
@-ms-keyframes spin {
|
@-ms-keyframes spin {
|
||||||
0% {
|
0% { -ms-transform: rotate(0deg); }
|
||||||
-ms-transform: rotate(0deg);
|
100% { -ms-transform: rotate(359deg); }
|
||||||
}
|
|
||||||
100% {
|
|
||||||
-ms-transform: rotate(359deg);
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
@keyframes spin {
|
@keyframes spin {
|
||||||
0% {
|
0% { transform: rotate(0deg); }
|
||||||
transform: rotate(0deg);
|
100% { transform: rotate(359deg); }
|
||||||
}
|
|
||||||
100% {
|
|
||||||
transform: rotate(359deg);
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
/* Icon rotations and mirroring */
|
/* Icon rotations and mirroring */
|
||||||
|
|
||||||
.icon-rotate-90:before {
|
.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);
|
filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=1);
|
||||||
}
|
}
|
||||||
|
|
||||||
.icon-rotate-180:before {
|
.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);
|
filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=2);
|
||||||
}
|
}
|
||||||
|
|
||||||
.icon-rotate-270:before {
|
.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);
|
filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
|
||||||
}
|
}
|
||||||
|
|
||||||
.icon-flip-horizontal:before {
|
.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 {
|
.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; }
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
|
||||||
98
src/assets/font-awesome/scss/_extras.scss
vendored
98
src/assets/font-awesome/scss/_extras.scss
vendored
|
|
@ -2,85 +2,89 @@
|
||||||
* -------------------------- */
|
* -------------------------- */
|
||||||
|
|
||||||
/* Stacked and layered icon */
|
/* Stacked and layered icon */
|
||||||
@include icon-stack;
|
@include icon-stack();
|
||||||
|
|
||||||
/* Animated rotating icon */
|
/* Animated rotating icon */
|
||||||
.icon-spin {
|
.icon-spin {
|
||||||
display: inline-block;
|
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 {
|
@-moz-keyframes spin {
|
||||||
0% {
|
0% { -moz-transform: rotate(0deg); }
|
||||||
-moz-transform: rotate(0deg);
|
100% { -moz-transform: rotate(359deg); }
|
||||||
}
|
|
||||||
100% {
|
|
||||||
-moz-transform: rotate(359deg);
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
@-webkit-keyframes spin {
|
@-webkit-keyframes spin {
|
||||||
0% {
|
0% { -webkit-transform: rotate(0deg); }
|
||||||
-webkit-transform: rotate(0deg);
|
100% { -webkit-transform: rotate(359deg); }
|
||||||
}
|
|
||||||
100% {
|
|
||||||
-webkit-transform: rotate(359deg);
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
@-o-keyframes spin {
|
@-o-keyframes spin {
|
||||||
0% {
|
0% { -o-transform: rotate(0deg); }
|
||||||
-o-transform: rotate(0deg);
|
100% { -o-transform: rotate(359deg); }
|
||||||
}
|
|
||||||
100% {
|
|
||||||
-o-transform: rotate(359deg);
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
@-ms-keyframes spin {
|
@-ms-keyframes spin {
|
||||||
0% {
|
0% { -ms-transform: rotate(0deg); }
|
||||||
-ms-transform: rotate(0deg);
|
100% { -ms-transform: rotate(359deg); }
|
||||||
}
|
|
||||||
100% {
|
|
||||||
-ms-transform: rotate(359deg);
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
@keyframes spin {
|
@keyframes spin {
|
||||||
0% {
|
0% { transform: rotate(0deg); }
|
||||||
transform: rotate(0deg);
|
100% { transform: rotate(359deg); }
|
||||||
}
|
|
||||||
100% {
|
|
||||||
transform: rotate(359deg);
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
/* Icon rotations and mirroring */
|
/* Icon rotations and mirroring */
|
||||||
|
|
||||||
.icon-rotate-90:before {
|
.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);
|
filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=1);
|
||||||
}
|
}
|
||||||
|
|
||||||
.icon-rotate-180:before {
|
.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);
|
filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=2);
|
||||||
}
|
}
|
||||||
|
|
||||||
.icon-rotate-270:before {
|
.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);
|
filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
|
||||||
}
|
}
|
||||||
|
|
||||||
.icon-flip-horizontal:before {
|
.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 {
|
.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; }
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue