1
  2// Scroll refresher (for pull to refresh)
  3.scroll-refresher {
  4  position: absolute;
  5  top: -60px;
  6  right: 0;
  7  left: 0;
  8  overflow: hidden;
  9  margin: auto;
 10  height: 60px;
 11  .ionic-refresher-content {
 12    position: absolute;
 13    bottom: 15px;
 14    left: 0;
 15    width: 100%;
 16    color: $scroll-refresh-icon-color;
 17    text-align: center;
 18
 19    font-size: 30px;
 20
 21    .text-refreshing,
 22    .text-pulling {
 23      font-size: 16px;
 24      line-height: 16px;
 25    }
 26    &.ionic-refresher-with-text {
 27      bottom: 10px;
 28    }
 29  }
 30
 31  .icon-refreshing,
 32  .icon-pulling {
 33    width: 100%;
 34    -webkit-backface-visibility: hidden;
 35    backface-visibility: hidden;
 36    -webkit-transform-style: preserve-3d;
 37    transform-style: preserve-3d;
 38  }
 39  .icon-pulling {
 40    @include animation-name(refresh-spin-back);
 41    @include animation-duration(200ms);
 42    @include animation-timing-function(linear);
 43    @include animation-fill-mode(none);
 44    -webkit-transform: translate3d(0,0,0) rotate(0deg);
 45    transform: translate3d(0,0,0) rotate(0deg);
 46  }
 47  .icon-refreshing,
 48  .text-refreshing {
 49    display: none;
 50  }
 51  .icon-refreshing {
 52    @include animation-duration(1.5s);
 53  }
 54
 55  &.active {
 56    .icon-pulling:not(.pulling-rotation-disabled) {
 57      @include animation-name(refresh-spin);
 58      -webkit-transform: translate3d(0,0,0) rotate(-180deg);
 59      transform: translate3d(0,0,0) rotate(-180deg);
 60    }
 61    &.refreshing {
 62      @include transition(-webkit-transform .2s);
 63      @include transition(transform .2s);
 64      -webkit-transform: scale(1,1);
 65      transform: scale(1,1);
 66
 67      .icon-pulling,
 68      .text-pulling {
 69        display: none;
 70      }
 71      .icon-refreshing,
 72      .text-refreshing {
 73        display: block;
 74      }
 75      &.refreshing-tail {
 76        -webkit-transform: scale(0,0);
 77        transform: scale(0,0);
 78      }
 79    }
 80  }
 81}
 82.overflow-scroll > .scroll{
 83  &.overscroll{
 84    position:fixed;
 85    right: 0;
 86    left: 0;
 87  }
 88  -webkit-overflow-scrolling:touch;
 89  width:100%;
 90}
 91
 92.overflow-scroll.padding > .scroll.overscroll{
 93    padding: 10px;
 94}
 95@-webkit-keyframes refresh-spin {
 96  0%   { -webkit-transform: translate3d(0,0,0) rotate(0); }
 97  100% { -webkit-transform: translate3d(0,0,0) rotate(180deg); }
 98}
 99
100@keyframes refresh-spin {
101  0%   { transform: translate3d(0,0,0) rotate(0); }
102  100% { transform: translate3d(0,0,0) rotate(180deg); }
103}
104
105@-webkit-keyframes refresh-spin-back {
106  0%   { -webkit-transform: translate3d(0,0,0) rotate(180deg); }
107  100% { -webkit-transform: translate3d(0,0,0) rotate(0); }
108}
109
110@keyframes refresh-spin-back {
111  0%   { transform: translate3d(0,0,0) rotate(180deg); }
112  100% { transform: translate3d(0,0,0) rotate(0); }
113}