devextreme/less/sources/widgets/common/scrollView.less

HTML5 JavaScript Component Suite for Responsive Web Development

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

@PULLDOWN_HEIGHT: 50px;
@PULLDOWN_PADDING: 15px;

.dx-scrollable-native {
    &.dx-scrollable-native-generic {
        .dx-scrollview-top-pocket {
            position: absolute;
            display: none;
        }
    }

    &.dx-scrollable-native-android {
        .dx-scrollview-top-pocket {
            width: 40px;
            height: 40px;
            left: 50%;
            position: absolute;
            z-index: 1;
        }

        .dx-scrollview-pull-down {
            background-image: none;
            position: static;
            height: 100%;
            width: 100%;
            left: -50%;
            margin-left: -20px;
            padding: 0;
            border-radius: 50%;

            &.dx-scrollview-pull-down-loading {
                transition: transform 100ms linear;
            }

            .dx-scrollview-pull-down-indicator {
                position: relative;
                top: 0;
                padding: 4px;
                margin: 0;
                height: 100%;
                width: 100%;
                float: left;
                box-sizing: border-box;

                .dx-loadindicator {
                    float: left;
                }
            }
        }

        .dx-icon-pulldown {
            width: 100%;
            height: 100%;
            padding: 8px;
            font-size: 24px;
            box-sizing: border-box;
            transition: opacity 0.2s;
        }

        .dx-scrollview-pull-down-loading.dx-scrollview-pull-down {
            transition: top 0.2s ease-out 0s;
        }

        .dx-scrollview-pull-down-image {
            position: absolute;
            margin: 0;
            width: 100%;
            height: 100%;
            top: 0;
            left: 0;
            background-size: contain;
            transition: opacity 0.2s ease 0s;
        }

        .dx-scrollview-pull-down-loading .dx-icon-pulldown {
            display: none;
        }
    }

    &.dx-scrollable-native-ios {
        .dx-scrollview-top-pocket {
            position: absolute;
            left: 0;
            width: 100%;
            overflow-y: auto;
            transition: transform 400ms ease;
            transform: translate(0, 0);
        }

        .dx-scrollview-content {
            transition: transform 400ms ease;
            transform: none;
        }
    }

    &.dx-scrollable-native-win8 {
        &.dx-scrollable-disabled {
            overflow-y: auto;

            .dx-scrollable-container {
                overflow-y: auto;
                overflow-x: hidden;
            }

            .dx-scrollable-content {
                overflow-y: hidden;
            }

            .dx-scrollview-content {
                overflow-y: hidden;
            }
        }

        .dx-scrollable-container {
            -ms-overflow-style: -ms-autohiding-scrollbar;
        }

        .dx-scrollview-bottom-pocket {
            width: 100%;
            text-align: center;
        }
    }
}


.dx-device-android-4 .dx-scrollable-native.dx-scrollable-native-android {
    .dx-scrollview-pull-down-loading .dx-icon-pulldown {
        display: block;
    }
}

.dx-scrollview-content {
    position: static;
    .dx-clearfix-mixin();
}

.dx-scrollview-pull-down {
    width: 100%;
    height: @PULLDOWN_HEIGHT;
    padding: @PULLDOWN_PADDING 0;
    top: -(@PULLDOWN_HEIGHT + @PULLDOWN_PADDING*2);
    overflow: hidden;
    transform: translate(0, 0);
    -webkit-user-drag: none;
    box-sizing: content-box;
}

.dx-scrollview-pull-down-container {
    display: inline-block;
    width: 49%;
    text-align: right;
}

.dx-scrollview-pull-down-indicator {
    opacity: 0;
    position: absolute;
    left: 0;
    top: 50%;
    display: inline-block;
    margin: -15px 20px 0 15px;
    width: 20px;
    -webkit-user-drag: none;
}

.dx-scrollview-pull-down-image {
    display: inline-block;
    vertical-align: middle;
    margin: 0 20px;
    width: 20px;
    height: 50px;
    background-size: contain;
    -webkit-user-drag: none;
    // B231062
    transform: translate(0, 0) rotate(0deg);
    transition: transform 0.2s linear;
}

.dx-scrollview-pull-down-text {
    display: inline;
    vertical-align: middle;
    position: relative;
    overflow: visible;
    -webkit-user-drag: none;

    div {
        position: absolute;
        left: 0;
        top: 0;
        white-space: nowrap;
        overflow: visible;
        opacity: 0;

        &.dx-scrollview-pull-down-text-visible {
            opacity: 1;
        }
    }
}

.dx-scrollview-pull-down-ready {
    .dx-scrollview-pull-down-image {
        // B231062
        transform: translate(0, 0) rotate(-180deg);
    }
}

.dx-scrollview-pull-down-loading {
    .dx-scrollview-pull-down-image {
        opacity: 0;
    }

    .dx-scrollview-pull-down-indicator {
        opacity: 1;
    }
}

.dx-scrollview-scrollbottom {
    width: 100%;
    padding: 10px 0;
    overflow: hidden;
    text-align: center;
    transform: translate(0, 0);

    &:before {
        content: '';
        display: inline-block;
        height: 100%;
        vertical-align: middle;
    }
}

.dx-scrollview-scrollbottom-indicator {
    display: inline-block;
    margin: 0 10px 0 0;
    -webkit-user-drag: none;
}

.dx-scrollview-scrollbottom-text {
    display: inline-block;
    margin-top: -20px;
    vertical-align: middle;
    -webkit-user-drag: none;
}

.dx-scrollview-scrollbottom-end {
    opacity: 0;
}

.dx-rtl .dx-scrollable-native,
.dx-scrollable-native.dx-rtl {
    &.dx-scrollable-native-ios {
        .dx-scrollview-top-pocket {
            left: auto;
            right: 0;
        }
    }
}

.dx-rtl .dx-scrollview-pull-down-container {
    text-align: left;
}

.dx-rtl .dx-scrollview-pull-down-indicator {
    left: auto;
    right: 0;
}

.dx-rtl .dx-scrollview-pull-down-text {
    div {
        left: auto;
        right: 0;
    }
}

.dx-rtl .dx-scrollview-scrollbottom-indicator {
    margin: 0 0 0 10px;
}