devextreme/less/sources/widgets/generic/scrollable.generic.less

HTML5 JavaScript Component Suite for Responsive Web Development

/**
* DevExtreme (widgets/generic/scrollable.generic.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/
*/
@SCROLLBAR_SIZE_THIN: 8px;
@SCROLLBAR_SIZE: 15px;

.dx-scrollable-content {
    -webkit-transform: none; // stylelint-disable-line property-no-vendor-prefix
}

.dx-scrollable-scroll {
    padding: 2px;
    background-color: transparent;
    opacity: 1;
    overflow: hidden;
    transition: opacity 0s linear;
}

.dx-scrollable-scroll.dx-state-invisible {
    opacity: 0;
    transition: opacity 0.5s linear 1s;
}

.dx-scrollable-scroll-content {
    width: 100%;
    height: 100%;
    background-color: @scrollable-scroll-bg;
    box-shadow: 0 0 0 1px @scrollable-scroll-shadow-color;
}


.dx-scrollbar-hoverable {
    background-color: @scrollable-scrollbar-bg;

    &.dx-state-hover,
    &.dx-scrollable-scrollbar-active {
        background-color: @scrollable-scrollbar-active-bg;
    }

    &.dx-scrollable-scrollbar-active .dx-scrollable-scroll-content {
        background-color: @scrollable-scroll-active-bg;
    }

    .dx-scrollable-scroll.dx-state-invisible {
        opacity: 1;

        .dx-scrollable-scroll-content {
            background-color: transparent;
            background-color: rgba(0, 0, 0, 0);
            box-shadow: 0 0 0 1px transparent;
        }
    }
}

.dx-scrollbar-vertical {
    .dx-scrollable-scroll {
        float: right;
        width: @SCROLLBAR_SIZE_THIN;
    }

    &.dx-scrollbar-hoverable {
        width: @SCROLLBAR_SIZE_THIN;
        transition: width 0.2s linear 0.15s, background-color 0.2s linear 0.15s;

        .dx-scrollable-scroll {
            transition: background-color 0.5s linear 1s, width 0.2s linear 150ms;

            .dx-scrollable-scroll-content {
                transition: box-shadow 0.15s linear 0.15s, background-color 0.15s linear 0.15s;
            }

            &.dx-state-invisible {
                transition: background-color 0.5s linear 1s, width 0.2s linear 0.15s;

                .dx-scrollable-scroll-content {
                    transition: box-shadow 0.5s linear 1s, background-color 0.5s linear 1s;
                }
            }
        }

        &.dx-state-hover,
        &.dx-scrollable-scrollbar-active {
            width: @SCROLLBAR_SIZE;

            .dx-scrollable-scroll {
                width: @SCROLLBAR_SIZE;
            }
        }
    }
}

.dx-scrollbar-horizontal {
    .dx-scrollable-scroll {
        height: @SCROLLBAR_SIZE_THIN;
    }

    &.dx-scrollbar-hoverable {
        height: @SCROLLBAR_SIZE_THIN;
        transition: height 0.2s linear 0.15s, background-color 0.2s linear 0.15s;

        .dx-scrollable-scroll {
            transition: background-color 0.5s linear 1s, height 0.2s linear 0.15s;

            .dx-scrollable-scroll-content {
                transition: box-shadow 0.15s linear 0.15s, background-color 0.15s linear 0.15s;
            }

            &.dx-state-invisible {
                transition: background-color 0.5s linear 1s, height 0.2s linear 0.15s;

                .dx-scrollable-scroll-content {
                    transition: box-shadow 0.5s linear 1s, background-color 0.5s linear 1s;
                }
            }
        }

        &.dx-state-hover,
        &.dx-scrollable-scrollbar-active {
            height: @SCROLLBAR_SIZE;

            .dx-scrollable-scroll {
                height: @SCROLLBAR_SIZE;
            }
        }
    }
}

.dx-scrollable-scrollbars-alwaysvisible {
    &.dx-scrollable-vertical,
    &.dx-scrollable-both {
        > .dx-scrollable-wrapper {
            > .dx-scrollable-container {
                > .dx-scrollable-content {
                    padding-right: @SCROLLBAR_SIZE_THIN;

                    .dx-rtl&,
                    .dx-rtl & {
                        padding-right: 0;
                        padding-left: @SCROLLBAR_SIZE_THIN;
                    }
                }
            }
        }
    }

    &.dx-scrollable-horizontal,
    &.dx-scrollable-both {
        > .dx-scrollable-wrapper {
            > .dx-scrollable-container {
                > .dx-scrollable-content {
                    padding-bottom: @SCROLLBAR_SIZE_THIN;
                }
            }
        }
    }
}

.dx-scrollable-customizable-scrollbars .dx-scrollable-container {
    -ms-scrollbar-base-color: @scrollable-scrollbar-msie-base-color;
    -ms-scrollbar-arrow-color: @scrollable-scrollbar-msie-arrow-color;
    -ms-scrollbar-shadow-color: @scrollable-scrollbar-msie-shadow-color;
    -ms-scrollbar-track-color: @scrollable-scrollbar-msie-track-color;
    &::-webkit-scrollbar:horizontal {
        height: 19px;
    }

    &::-webkit-scrollbar:vertical {
        width: 19px;
    }

    &::-webkit-scrollbar {
        background-color: transparent;
    }

    &::-webkit-scrollbar-thumb {
        background-color: @scrollable-scrollbar-thumb-bg;
        border-right: 2px solid transparent;
        border-left: 1px solid transparent;
        background-clip: content-box;
    }

    &::-webkit-scrollbar-track {
        background-color: transparent;
    }

    &::-webkit-scrollbar-corner {
        background-color: transparent;
    }

    &::-webkit-scrollbar-button {
        background-color: transparent;
    }

    &::-webkit-scrollbar-button:horizontal:decrement {
        background: @scrollbar-button-horizontal-decrement-bg;
        background-position: center;
    }

    &::-webkit-scrollbar-button:horizontal:increment {
        background: @scrollbar-button-horizontal-increment-bg;
        background-position: center;
    }

    &::-webkit-scrollbar-button:vertical:decrement {
        background: @scrollbar-button-vertical-decrement-bg;
        background-position: 3px 5px;
    }

    &::-webkit-scrollbar-button:vertical:increment {
        background: @scrollbar-button-vertical-increment-bg;
        background-position: 3px 5px;
    }
}

.dx-rtl .dx-scrollable,
.dx-rtl.dx-scrollable {
    .dx-scrollable-scroll {
        float: left;
    }
}