com.phloxui/styles/lib/directive/ScrollLoad.less

PhloxUI Ng2+ Framework

.ua-firefox {
    .phx-scroll-load {  
        .below-reload { 
            margin-top: 80px !important; 
        }  
    }
} 
.phx-scroll-load { 
    transition: all 0.5s ease 0s;
    & {
        // overflow: auto;
        overflow-x: hidden;

        &::-webkit-scrollbar-track {
            // -webkit-box-shadow: inset 0 0 0 rgba(0,0,0,0);
            background-color: @SCROLL_LOAD_WHITE_COLOR;
        }

        &::-webkit-scrollbar {
            width: @SCROLL_WIDTH_HEIGHT;
            background-color: @SCROLL_LOAD_WHITE_COLOR;
        }

        &::-webkit-scrollbar-thumb {
            border-radius: 4px;
            background-color: extract(@CLR_1, 5);
        }
    }
    .color-icon-load-next {
        background: @SCROLL_LOAD_MAIN_COLOR !important;
    }
    .color-icon-reload {
        background-color: @SCROLL_LOAD_MAIN_COLOR !important;
    }
    .loadMore { 
        .no-select();
        display: flex;
        align-items: center;
        justify-content: center;
        width: 100%;
        height: 45pt;
        background-color: extract(@CLR_1, 6); 
        color: @SCROLL_LOAD_FONT_COLOR;
        cursor: pointer; 
        border-bottom: @SCROLL_LOAD_BORDER_BOTTOM;
        .FC1();
        font-weight: bold;
        &:hover { 
            background-color: @SCROLL_LOAD_MAIN_COLOR; 
            color: @SCROLL_LOAD_WHITE_COLOR;
        } 
    }   
    .icon-loading-next { 
        display: flex;
        width: 100%;
        height: 45pt;
        justify-content: center;
        align-items: center; 
    } 
    .wrapper-icon-reload { 
        display: flex;
        align-items: center;
        justify-content: center;
        position: absolute;
        margin: 0 auto; 
        top: 20pt; 
        width: 100%;
        height: 50pt;
        transition: all 0.5s ease 0s;
        pointer-events: none; 
        z-index: 1;
    }
    .show-wrapper-icon-reload {
        top: 160pt !important;
    } 
    .icon-reloader {
        display: flex;
        height: 50px;
        width: 50px;
        background-color: @SCROLL_LOAD_WHITE_COLOR;
        box-shadow: 0 0 14px extract(@CLR_1, 7);
        border: 0.5px solid extract(@CLR_1, 7);
        color: @SCROLL_LOAD_MAIN_COLOR;
        border-radius: 50%; 
        pointer-events: auto;  
        cursor: pointer;
        justify-content: center;
        align-items: center;   
        .reloader {
            display: inline-block;
            position: relative;
            height: 2em;
            padding: .25em;
            width: 2em;   
            &:before, &:after {
                content: '';
                display: block; 
            }
            &:before {
                border-color: transparent @SCROLL_LOAD_MAIN_COLOR @SCROLL_LOAD_MAIN_COLOR @SCROLL_LOAD_MAIN_COLOR;
                border-radius: 50%;
                border-style: solid;
                border-width: .125em;
                height: 1.5em;
                width: 1.5em;
                -webkit-transform: scale(1.3) rotate(45deg);
                transform: scale(1.3) rotate(45deg);
            }
            &:after {
                border-color: transparent transparent transparent @SCROLL_LOAD_MAIN_COLOR;
                border-style: solid;
                border-width: .3em 0 .3em .4em;
                height: 0;
                position: absolute;
                top: -1.3px;
                left: 53%;
                width: 0;
                -webkit-transform: scale(1.3);
                transform: scale(1.3);
            } 
        } 
    } 
    .below-reload {
        display: flex;
        margin-top: 40px;
        position: absolute;
        width: 160px;
        .FC0();
        font-weight: bold;
        color: @SCROLL_LOAD_FONT_COLOR;
        justify-content: center;
        align-items: center; 
    }   
    .reloader-manual {
        display: flex; 
        position: absolute; 
        top: 0;
        width: 100%;
        height: 12pt;
        z-index: 1;
    } 
    .show-reloader-manual { 
        top: 72pt; 
    }
}