summaryrefslogtreecommitdiff
path: root/www/lib/ionic/scss/_refresher.scss
diff options
context:
space:
mode:
Diffstat (limited to 'www/lib/ionic/scss/_refresher.scss')
-rw-r--r--www/lib/ionic/scss/_refresher.scss113
1 files changed, 113 insertions, 0 deletions
diff --git a/www/lib/ionic/scss/_refresher.scss b/www/lib/ionic/scss/_refresher.scss
new file mode 100644
index 00000000..a3bfd185
--- /dev/null
+++ b/www/lib/ionic/scss/_refresher.scss
@@ -0,0 +1,113 @@
+
+// Scroll refresher (for pull to refresh)
+.scroll-refresher {
+ position: absolute;
+ top: -60px;
+ right: 0;
+ left: 0;
+ overflow: hidden;
+ margin: auto;
+ height: 60px;
+ .ionic-refresher-content {
+ position: absolute;
+ bottom: 15px;
+ left: 0;
+ width: 100%;
+ color: $scroll-refresh-icon-color;
+ text-align: center;
+
+ font-size: 30px;
+
+ .text-refreshing,
+ .text-pulling {
+ font-size: 16px;
+ line-height: 16px;
+ }
+ &.ionic-refresher-with-text {
+ bottom: 10px;
+ }
+ }
+
+ .icon-refreshing,
+ .icon-pulling {
+ width: 100%;
+ -webkit-backface-visibility: hidden;
+ backface-visibility: hidden;
+ -webkit-transform-style: preserve-3d;
+ transform-style: preserve-3d;
+ }
+ .icon-pulling {
+ @include animation-name(refresh-spin-back);
+ @include animation-duration(200ms);
+ @include animation-timing-function(linear);
+ @include animation-fill-mode(none);
+ -webkit-transform: translate3d(0,0,0) rotate(0deg);
+ transform: translate3d(0,0,0) rotate(0deg);
+ }
+ .icon-refreshing,
+ .text-refreshing {
+ display: none;
+ }
+ .icon-refreshing {
+ @include animation-duration(1.5s);
+ }
+
+ &.active {
+ .icon-pulling:not(.pulling-rotation-disabled) {
+ @include animation-name(refresh-spin);
+ -webkit-transform: translate3d(0,0,0) rotate(-180deg);
+ transform: translate3d(0,0,0) rotate(-180deg);
+ }
+ &.refreshing {
+ @include transition(-webkit-transform .2s);
+ @include transition(transform .2s);
+ -webkit-transform: scale(1,1);
+ transform: scale(1,1);
+
+ .icon-pulling,
+ .text-pulling {
+ display: none;
+ }
+ .icon-refreshing,
+ .text-refreshing {
+ display: block;
+ }
+ &.refreshing-tail {
+ -webkit-transform: scale(0,0);
+ transform: scale(0,0);
+ }
+ }
+ }
+}
+.overflow-scroll > .scroll{
+ &.overscroll{
+ position:fixed;
+ right: 0;
+ left: 0;
+ }
+ -webkit-overflow-scrolling:touch;
+ width:100%;
+}
+
+.overflow-scroll.padding > .scroll.overscroll{
+ padding: 10px;
+}
+@-webkit-keyframes refresh-spin {
+ 0% { -webkit-transform: translate3d(0,0,0) rotate(0); }
+ 100% { -webkit-transform: translate3d(0,0,0) rotate(180deg); }
+}
+
+@keyframes refresh-spin {
+ 0% { transform: translate3d(0,0,0) rotate(0); }
+ 100% { transform: translate3d(0,0,0) rotate(180deg); }
+}
+
+@-webkit-keyframes refresh-spin-back {
+ 0% { -webkit-transform: translate3d(0,0,0) rotate(180deg); }
+ 100% { -webkit-transform: translate3d(0,0,0) rotate(0); }
+}
+
+@keyframes refresh-spin-back {
+ 0% { transform: translate3d(0,0,0) rotate(180deg); }
+ 100% { transform: translate3d(0,0,0) rotate(0); }
+}