devextreme/less/sources/widgets/material/scrollView.material.less

HTML5 JavaScript Component Suite for Responsive Web Development

/**
* DevExtreme (widgets/material/scrollView.material.less)
* Version: 19.2.6
* Build date: Thu Jan 30 2020
*
* Copyright (c) 2012 - 2020 Developer Express Inc. ALL RIGHTS RESERVED
* Read about DevExtreme licensing here: https://js.devexpress.com/Licensing/
*/
@import (once) "./scrollable.material.less";
@import (once) "./loadPanel.material.less";

@SCROLLVIEW_LOADING_INDICATOR_SIZE: 42px;

.dx-scrollable-native.dx-scrollable-native-android .dx-scrollview-pull-down {
    background-color: @scrollable-bg;
    box-shadow: 0 1px 4px 0 @scrollview-shadow-color;
}

.dx-scrollview-scrollbottom-loading {
    .dx-scrollview-scrollbottom-image {
        width: 24px;
        height: 24px;
    }
}

.dx-scrollview-scrollbottom-indicator,
.dx-scrollview-pull-down-indicator {
    margin-right: 0;
    height: @SCROLLVIEW_LOADING_INDICATOR_SIZE;
    width: @SCROLLVIEW_LOADING_INDICATOR_SIZE;
    border-radius: @SCROLLVIEW_LOADING_INDICATOR_SIZE / 2;
    display: inline-flex;
    justify-content: center;
    flex-direction: column;
    align-items: center;
    box-shadow: 0 1px 3px 1px @scrollview-shadow-color;
    opacity: 1;


    > .dx-loadindicator {
        height: 24px;
        width: 24px;

        > .dx-loadindicator-wrapper {
            font-size: 24px;
        }
    }
}

.dx-scrollview-pull-down-indicator {
    position: relative;
    margin-left: 0;
    margin-top: -@SCROLLVIEW_LOADING_INDICATOR_SIZE / 2;
}

.dx-scrollview-pull-down-text {
    > div {
        display: none;

        &.dx-scrollview-pull-down-text-visible {
            display: block;
        }
    }
}