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

Full featured mobile HTML framework for building iOS & Android apps

/* === Pull To Refresh === */
.pull-to-refresh-layer {
    position: relative;
    margin-top: -@toolbarSize;
    left:0; 
    top:0; 
    width:100%; 
    height:@toolbarSize; 
    
    .preloader {
        position: absolute;
        left: 50%;
        top: 50%;
        margin-left: -16px;
        margin-top: -16px;
        visibility: hidden;
        
    }
    .pull-to-refresh-arrow {
        width: 24px;
        height: 24px;
        position: absolute;
        left: 50%;
        top: 50%;
        margin-left: -12px;
        margin-top: -12px;
        background: no-repeat center;
        .encoded-svg-background("<svg xmlns='http://www.w3.org/2000/svg' viewBox='-80 4 24 24'><path d='M-69,8v12.2l-5.6-5.6L-76,16l8,8l8-8l-1.4-1.4l-5.6,5.6V8H-69z' fill='#8c8c8c'/></svg>");
        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));
        }
    }
    
}