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

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

/*!
 * Copyright 2019 Progress Software Corporation and/or one of its subsidiaries or affiliates. All rights reserved.
 *
 * Licensed under the Apache License, Version 2.0 (the "License");
 * you may not use this file except in compliance with the License.
 * You may obtain a copy of the License at
 *
 *     http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing, software
 * distributed under the License is distributed on an "AS IS" BASIS,
 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 * See the License for the specific language governing permissions and
 * limitations under the License.
 */
.k-scrollview {
    position: relative;
    overflow: hidden;
    outline: 0;
    display: block;
}

ul.k-scrollview-wrap {
    list-style-type: none;
    position: absolute;
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;
    cursor: default;

    img {
        user-select: none;
    }

    & > li {
        display: inline-block;
        overflow: hidden;
        position: absolute;
        top: 0;
        left: 0;
    }
}

div.k-scrollview-wrap {
    white-space: nowrap;

    & > [data-role=page] {
        vertical-align: top;
        display: inline-block;
        min-height: 1px;
    }
}

.k-scrollview-nav-wrap {
    position: absolute;
    bottom: (@scrollview-pager-offset - (@scrollview-pager-item-spacing / 4));
    left: (@scrollview-pager-item-spacing / 2);
    right: (@scrollview-pager-item-spacing / 2);
    height: @scrollview-pager-height;
    overflow: hidden;
}

.k-scrollview-nav {
    margin: 0;
    padding: (@scrollview-pager-item-spacing / 4) 0 0 0;;
    display: block;
    white-space: nowrap;
    overflow-x: scroll;
    overflow-y: hidden;
    text-align: center;
    list-style: none;
    pointer-events: initial;
}

.k-scrollview-nav > li.k-link {
    margin: 0 @scrollview-pager-item-spacing;
    padding: 0;
    width: @scrollview-pagebutton-size;
    height: @scrollview-pagebutton-size;
    box-sizing: content-box;
    vertical-align: top;
    display: inline-block;
    position: relative;
    border-width: @scrollview-pager-item-border-width;
    border-style: solid;
    border-radius: 50%;
    cursor: pointer;
    pointer-events: all;

    &::before {
        content: "";
        width: (@scrollview-pagebutton-size + @scrollview-pager-item-spacing);
        height: @scrollview-pager-height;
        display: block;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
    }
}

.k-scrollview-next,
.k-scrollview-prev {
    display: table;
    position: absolute;
    padding: 0;
    height: 60%;
    top: 20%;
    text-decoration: none;
    user-select: none;
    cursor: pointer;
    overflow: hidden;
}

.k-scrollview-prev {
    left: 0;
}

.k-scrollview-next {
    right: 0;
}

.k-scrollview-next span,
.k-scrollview-prev span {
    display: table-cell;
    margin: 0;
    padding: 0;
    vertical-align: middle;
    font-size: @scrollview-navigation-size;
    font-weight: normal;
    //IE11 override:
    position: static;
}

.k-scrollview-elements {
    width: 100%;
}

.k-scrollview-animation {
    transition-duration: .3s;
    transition-timing-function: ease-in-out;
}

.k-i-arrowhead-e::before {
    content: "\e014";
}

.k-i-arrowhead-w::before {
    content: "\e016";
}

@supports (-webkit-user-select: none) {
    div.k-scrollview ul.k-scrollview-wrap li > *  {
        pointer-events: auto;
    }
}

@supports (not (-webkit-user-select: none)) {
    div.k-scrollview ul.k-scrollview-wrap li > *  {
        pointer-events: none;
    }
}