@progress/kendo-ui/css/web/Default/scrollview/_theme.less

This package is part of the [Kendo UI for jQuery](http://www.telerik.com/kendo-ui) suite.

// ScrollView
kendo-scrollview.k-scrollview-wrap,
div.k-scrollview {
    .fill( @scrollview-text, @scrollview-bg, @scrollview-border );
    -webkit-tap-highlight-color: transparent;

    &.k-scrollview-dark {
        .k-scrollview-pageable,
        .k-scrollview-nav {
            background-color: @scrollview-dark-bg;
        }

        .k-scrollview-next,
        .k-scrollview-prev {
            color: @scrollview-dark-bg;
        }
    }

    &.k-scrollview-light {
        .k-scrollview-pageable,
        .k-scrollview-nav {
            background-color: @scrollview-light-bg;
        }
    }
}

kendo-scrollview.k-scrollview-wrap .k-scrollview,
.k-widget.k-scrollview .k-scrollview-wrap {
    &:focus,
    &.k-state-focused,
    &:hover,
    &.k-state-hovered {
        outline: none;

        ~ .k-scrollview-elements .k-scrollview-pageable,
        ~ .k-scrollview-elements .k-scrollview-nav {
            opacity: @scrollview-navigation-hover-opacity;
        }
    }
}

.k-scrollview-next,
.k-scrollview-prev {
    color: @scrollview-navigation-color;
    background-color: @scrollview-navigation-bg;
    text-shadow: @scrollview-navigation-icon-shadow;
    opacity: @scrollview-navigation-default-opacity;
    outline-width: 0;
    -webkit-tap-highlight-color: @scrollview-arrow-tap-highlight-color;

    &:focus,
    &.k-state-focused {
        color: @scrollview-navigation-color;
        opacity: @scrollview-navigation-hover-opacity;

        .k-icon::before {
            box-shadow: @scrollview-pagebutton-shadow;
            background-color: @scrollview-navigation-hover-span-bg;
        }
    }

    &:hover,
    &.k-state-hovered {
        color: @scrollview-navigation-color;
        opacity: @scrollview-navigation-hover-opacity;

        .k-icon::before {
            background-color: @scrollview-navigation-hover-span-bg;
        }
    }
}

kendo-scrollview.k-scrollview-wrap .k-scrollview-pageable,
.k-scrollview .k-scrollview-nav {
    opacity: @scrollview-navigation-default-opacity;

    &:focus-within,
    &:focus,
    &.k-state-focused,
    &:hover,
    &.k-state-hovered {
        opacity: @scrollview-navigation-hover-opacity;
        background-color: @scrollview-navigation-hover-span-bg;
    }
}

kendo-scrollview.k-scrollview-wrap .k-scrollview-pageable > .k-button,
.k-scrollview .k-scrollview-nav > .k-link {
    background: @scrollview-pagebutton-bg;
    border: @scrollview-pagebutton-border;
    background-clip: padding-box;

    &.k-primary {
        background: @scrollview-pagebutton-primary-bg;
        border: @scrollview-pagebutton-primary-border;
    }

    &:focus,
    &.k-state-focused,
    &:hover,
    &.k-state-hovered {
        box-shadow: @scrollview-pagebutton-shadow;
    }
}