@pi0/framework7/src/components/pull-to-refresh/pull-to-refresh-ios.less

Full featured mobile HTML framework for building iOS & Android apps

.ios {
  @import (multiple) '../../less/colors-ios.less';
  .ptr-preloader {
    position: relative;
    height: 44px;
    margin-top: -44px;
    width: 100%;
    left: 0;
    top: 0;
    .preloader {
      width: 27px;
      height: 27px;
      margin-left: -13px;
      margin-top: -13px;
      visibility: hidden;
      top: 50%;
    }
  }
  .ptr-arrow {
    position: absolute;
    left: 50%;
    top: 50%;
    background: no-repeat center;
    z-index: 10;
    transform: rotate(0deg) translate3d(0,0,0);
    transition-duration: 300ms;
    transition-property: transform;
    width: 13px;
    height: 20px;
    margin-left: -6px;
    margin-top: -10px;
    .svg-background("<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 26 40'><polygon points='9,22 9,0 17,0 17,22 26,22 13.5,40 0,22' fill='#8c8c8c'/></svg>");
    background-size: 13px 20px;
    visibility: visible;
  }
  .ptr-content {

  }
  .ptr-content:not(.ptr-refreshing) {
    .ptr-preloader .preloader {
      animation: none;
    }
  }
  .ptr-transitioning, .ptr-refreshing {
    transition-duration: 300ms;
    transition-property: transform;
  }
  .ptr-refreshing {
    transform: translate3d(0, 44px, 0);
    .ptr-arrow {
      visibility: hidden;
    }
    .ptr-preloader .preloader {
      visibility: visible;
    }
  }
  .ptr-pull-up {
    .ptr-arrow {
      transform: rotate(180deg) translate3d(0,0,0);
    }
  }
  .ptr-no-navbar {
    margin-top: -44px;
    height: ~"calc(100% + 44px)";
    .ptr-preloader {
      margin-top: 0;
    }
  }
}