@progress/kendo-ui/css/web/Default/drawer/_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-drawer-container {
    border-style: solid;
    border-width: 0;
    box-sizing: border-box;
    overflow-x: hidden;
    white-space: nowrap;
    user-select: none;
    width: 0;
    transition: all 300ms ease-out;

    &,
    .k-drawer-items {
        overflow-y: auto;

        /* Scrollbar styles for Chrome, Safari and Opera */
        &::-webkit-scrollbar {
            width: @drawer-scrollbar-width;
        }

        &::-webkit-scrollbar-thumb {
            border-radius: @drawer-scrollbar-radius;
        }

        /* Scrollbar styles for Mozilla */
        scrollbar-width: thin;
    }

    .k-drawer-items {
        padding: 0;
        transition: all 300ms ease-out;
        overflow-x: hidden;

        ul {
            padding: 0;
            margin: 0;
        }

        .k-drawer-item {
            display: block;
            list-style: none;
            line-height: @drawer-item-line-height;
            font-size: @drawer-item-font-size;
            padding: @drawer-item-padding-y @drawer-item-padding-x;

            &.k-drawer-separator {
                padding: 0;
                height: 1px;
            }
        }

        .k-icon {
            display: inline-block;
            font-size: @drawer-icon-size;
            margin: 0 @drawer-item-padding-x;
        }

        .k-item-text {
            display: inline-block;
            padding: 0 @drawer-item-padding-x;
            vertical-align: middle;
        }
    }

    &.k-drawer-expanded {
        border-right-width: @drawer-border-width;
    }
}

.k-drawer-wrapper {
    overflow-x: hidden;

    &.k-drawer-mini-mode {
        .k-drawer-container {
            border-right-width: @drawer-border-width;
            width: auto;
        }

        .k-drawer-items {
            overflow-y: visible;
            overflow-x: initial;
            width: @drawer-mini-initial-width; /* Default width of mini sidebar */
        }
    }

    &.k-drawer-overlay {
        .k-drawer-container {
            position: fixed;
            left: 0;
            right: auto;
            height: 100%;
            z-index: 10002;
        }

        .k-drawer-items {
            max-width: 80vw;
        }
    }

    &.k-drawer-push {
        display: flex;
        height: 100%;

        .k-drawer-content {
            flex: 1 1 auto;
        }

        .k-drawer-container {
            position: relative;
            flex: 0 0 auto;
        }
    }

    .k-overlay {
        display: none;
    }

    &.k-drawer-right {
        &.k-drawer-overlay {
            .k-drawer-container {
                left: auto;
                right: 0;
            }
        }

        &.k-drawer-push {
            .k-drawer-container {
                order: 1;
            }
        }

        .k-drawer-container.k-drawer-expanded,
        &.k-drawer-mini-mode .k-drawer-container {
            border-left-width: @drawer-border-width;
            border-right-width: 0;
        }
    }
}

.k-rtl,
[dir="rtl"] {
    .k-drawer-wrapper {
        &.k-drawer-left.k-drawer-push .k-drawer-container {
            order: 1;
        }

        &.k-drawer-right.k-drawer-push .k-drawer-container {
            order: 0;
        }
    }
}