framework7-without-localstorage/src/less/ios/pull-to-refresh.less

Full featured mobile HTML framework for building iOS & Android apps

/* === Pull To Refresh === */
.pull-to-refresh-layer {
    position:absolute; 
    position: relative;
    margin-top: -@toolbarSize;
    left:0; 
    top:0; 
    width:100%; 
    height:@toolbarSize; 
    
    .preloader {
        position: absolute;
        left: 50%;
        top: 50%;
        margin-left: -10px;
        margin-top: -10px;
        visibility: hidden;
        
    }
    .pull-to-refresh-arrow {
        width: 13px;
        height: 20px;
        position: absolute;
        left: 50%;
        top: 50%;
        margin-left: -6px;
        margin-top: -10px;
        background: no-repeat center;
        .encoded-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;
        z-index: 10;
        .transform(rotate(0deg) translate3d(0,0,0));
        .transition(300ms);
    }
    
}
.pull-to-refresh-content {
    &.pull-to-refresh-no-navbar {
        margin-top: -@toolbarSize;
        height: ~"-webkit-calc(100% + @{toolbarSize})";
        height: ~"-moz-calc(100% + @{toolbarSize})";
        height: ~"calc(100% + @{toolbarSize})";
        .pull-to-refresh-layer {
            margin-top: 0;
        }
    }
    &.transitioning, &.refreshing {
        .transition(400ms); 
    }
    &:not(.refreshing) {
        .pull-to-refresh-layer .preloader {
            .animation(none);
        }
    }
    &.refreshing {
        .translate3d(0,@toolbarSize,0);
        .pull-to-refresh-arrow {
            visibility: hidden;
            .transition(0ms);
        }
        .preloader {
            visibility: visible;
        }   
    }
    &.pull-up {
        .pull-to-refresh-arrow {
            .transform(rotate(180deg) translate3d(0,0,0));
        }
    }
    
}