Refresh spin keyframes

This commit is contained in:
Max Lynch
2013-12-03 19:03:30 -06:00
parent f3bf2c1348
commit 2c4e363638
2 changed files with 26 additions and 13 deletions

27
dist/css/ionic.css vendored
View File

@@ -2298,7 +2298,23 @@ body, .ionic-body {
width: 100%;
text-align: center;
font-size: 30px;
color: #666666; }
color: #666666;
-webkit-animation-duration: 200ms;
-moz-animation-duration: 200ms;
animation-duration: 200ms;
-webkit-animation-timing-function: linear;
-moz-animation-timing-function: linear;
animation-timing-function: linear;
-webkit-animation-fill-mode: both;
-moz-animation-fill-mode: both;
animation-fill-mode: both; }
@keyframes refresh-spin {
0% {
transform: rotate(0); }
100% {
transform: rotate(-180deg); } }
@-webkit-keyframes refresh-spin {
0% {
@@ -2316,15 +2332,6 @@ body, .ionic-body {
.scroll-refresher.active.refreshing .icon-refreshing {
display: block; }
.scroll-refresher.active .ionic-refresher-content {
-webkit-animation-duration: 200ms;
-moz-animation-duration: 200ms;
animation-duration: 200ms;
-webkit-animation-timing-function: linear;
-moz-animation-timing-function: linear;
animation-timing-function: linear;
-webkit-animation-fill-mode: both;
-moz-animation-fill-mode: both;
animation-fill-mode: both;
-webkit-animation-name: refresh-spin;
-moz-animation-name: refresh-spin;
animation-name: refresh-spin; }

View File

@@ -116,6 +116,15 @@ body, .ionic-body {
font-size: 30px;
color: $scroll-refresh-icon-color;
@include animation-duration(200ms);
@include animation-timing-function(linear);
@include animation-fill-mode(both);
}
@keyframes refresh-spin {
0% { transform: rotate(0); }
100% { transform: rotate(-180deg); }
}
@-webkit-keyframes refresh-spin {
@@ -142,9 +151,6 @@ body, .ionic-body {
}
.ionic-refresher-content {
@include animation-duration(200ms);
@include animation-timing-function(linear);
@include animation-fill-mode(both);
@include animation-name(refresh-spin);
}
}