devextreme/less/sources/widgets/common/scrollable.less

HTML5 JavaScript Component Suite for Responsive Web Development

/**
* DevExtreme (widgets/common/scrollable.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/
*/
.dx-scrollable-scrollbar-simulated {
    position: relative;
}

.dx-scrollable {
    display: block;
    height: 100%;
    min-height: 0;
}

.dx-scrollable-native {
    -ms-overflow-style: -ms-autohiding-scrollbar;
    -ms-scroll-snap-type: proximity; // stylelint-disable-line property-no-vendor-prefix

    .dx-scrollable-scrollbar {
        display: none;
    }

    &.dx-scrollable-scrollbar-simulated .dx-scrollable-scrollbar {
        display: block;
    }

    .dx-scrollable-container {
        -webkit-overflow-scrolling: touch;
        position: relative;
        height: 100%;
    }

    &.dx-scrollable-vertical,
    &.dx-scrollable-vertical > .dx-scrollable-wrapper > .dx-scrollable-container {
        touch-action: pan-y;
        overflow-x: hidden;
        overflow-y: auto;
    }

    &.dx-scrollable-horizontal,
    &.dx-scrollable-horizontal > .dx-scrollable-wrapper > .dx-scrollable-container {
        touch-action: pan-x;
        float: none;
        overflow-x: auto;
        overflow-y: hidden;
    }

    &.dx-scrollable-both,
    &.dx-scrollable-both > .dx-scrollable-wrapper > .dx-scrollable-container {
        touch-action: pan-y pan-x;
        float: none;
        overflow-x: auto;
        overflow-y: auto;
    }

    &.dx-scrollable-disabled,
    &.dx-scrollable-disabled .dx-scrollable-container {
        touch-action: auto;
    }

    &.dx-scrollable-scrollbars-hidden {
        ::-webkit-scrollbar {
            opacity: 0;
        }
    }

    &.dx-scrollable-native-ios {
        .dx-scrollable-content {
            min-height: 101%;
            box-sizing: content-box;
        }

        &.dx-scrollable-horizontal {
            .dx-scrollable-content {
                min-height: 0;
                padding: 0;
            }
        }
    }

    &.dx-scrollable-native-generic {
        -ms-overflow-style: auto;
        overflow: hidden;

        .dx-scrollable-content {
            height: auto;
        }
    }

    &.dx-scrollable-native-android .dx-scrollable-content {
        transform: none;
        z-index: 0;
    }
}

.dx-scrollable-scrollbar-simulated { // stylelint-disable-line no-duplicate-selectors
    &,
    .dx-scrollable-container {
        ::-webkit-scrollbar {
            display: none;
        }
    }
}

.dx-scrollable-container {
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
    overflow: hidden;
    width: 100%;
    height: 100%;

    &:focus {
        outline: none;
    }
}

.dx-scrollable-wrapper {
    position: relative;
    width: 100%;
    height: 100%;
}

.dx-scrollable-content {
    position: relative;
    min-height: 100%;
    box-sizing: border-box;
    .dx-clearfix-mixin();
}

.dx-scrollable-horizontal .dx-scrollable-content,
.dx-scrollable-both .dx-scrollable-content {
    display: block;
    float: left;
    min-width: 100%;
}

.dx-scrollable-scrollbar {
    position: absolute;
    pointer-events: auto;
}

.dx-scrollbar-vertical {
    top: 0;
    right: 0;
    height: 100%;

    .dx-scrollable-scroll {
        width: 5px;
    }
}

.dx-scrollbar-horizontal {
    bottom: 0;
    left: 0;
    width: 100%;

    .dx-scrollable-scroll {
        height: 5px;
    }
}

.dx-scrollable-scroll {
    position: relative;
    background-color: #888;
    background-color: rgba(0, 0, 0, 0.5);
    -webkit-transform: translate(0, 0); //stylelint-disable-line property-no-vendor-prefix
    transition: background-color 0s linear;

    &.dx-state-invisible {
        display: block !important; // stylelint-disable-line declaration-no-important
        background-color: transparent;
        background-color: rgba(0, 0, 0, 0);
        transition: background-color 0.5s linear 1s;
    }
}

.dx-rtl .dx-scrollable,
.dx-rtl.dx-scrollable {
    direction: ltr;

    .dx-scrollable-content,
    .dx-scrollable-container {
        direction: ltr;
    }

    .dx-scrollable-content > * {
        direction: rtl;
    }

    .dx-scrollable-scrollbar {
        &.dx-scrollbar-vertical {
            right: auto;
            left: 0;
        }

        &.dx-scrollbar-horizontal {
            direction: ltr;
        }
    }
}

.dx-device-ios-6 {
    .dx-scrollable-content {
        backface-visibility: hidden;
    }
}

.dx-device-android {
    .dx-scrollable-native.dx-scrollable-scrollbars-hidden {
        ::-webkit-scrollbar {
            display: none;
        }
    }
}

.dx-scrollable-simulated {
    .dx-scrollable-content {
        overflow-anchor: none;
    }

    &.dx-scrollable-disabled {
        .dx-scrollable-scrollbar {
            pointer-events: none;
        }
    }
}