FlandreScarle7/Fork-Awesome
1
0
Fork 0
mirror of https://github.com/ForkAwesome/Fork-Awesome.git synced 2024-12-27 14:01:32 +08:00
Code Issues Actions Packages Projects Releases Wiki Activity

straight port of extras.scss

Browse Source
This commit is contained in:
davegandy 2013-06-12 10:51:29 -04:00
parent fb07367e33
commit ba907e7ede
2 changed files with 102 additions and 94 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

98
scss/_extras.scss
View File

@ -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
View File

@ -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; }
}
} }