squidex/src/Squidex/app/theme/_panels.scss

@import '_mixins';
@import '_vars';

$panel-padding: 20px;
$panel-header: 70px;
$panel-sidebar: 60px;

.panel-container {
    @include absolute($size-navbar-height, 0, 0, $size-sidebar-width);
    overflow-x: auto;
}

.panel {
    & {
        @include flex-box;
        @include absolute(0, auto, 0, auto);
        height: 100%;
        flex-direction: column;
    }

    &-header,
    &-content {
        padding: $panel-padding;
    }

    &-main,
    &-content {
        @include flex-grow(1);
    }

    &-main {
        @include flex-box;
        flex-direction: row;
    }

    &-title {
        font-size: 1.5rem;
        font-weight: 400;
    }

    &-header {
        min-height: $panel-header;
        max-height: $panel-header;
        position: relative;
        padding-right: 60px;
    }

    &-content {
        & {
            overflow-y: auto;
        }

        & .nav-stacked {
            margin-left: -$panel-padding;
            margin-right: -$panel-padding;
        }

        & .nav-link {
            padding-left: $panel-padding;
        }
    }

    &-sidebar {
        & {
            min-width: $panel-sidebar;
            max-width: $panel-sidebar;
        }

        & .nav-link {
            text-align: center;
        }
    }

    &-close {
        & {
            @include absolute($panel-padding, $panel-padding, auto, auto);
            font-size: 1.5rem;
            font-weight: 400;
            cursor: pointer;
        }

        &:hover,
        &:focus {
            text-decoration: none;
        }
    }

    &-dark {
        & {
            @include box-shadow(2px, 0, 1px, .3);
            background: $color-dark-background;
            border-right: 1px solid darken($color-dark-foreground, 15%);
            color: $color-dark-foreground;
        }

        .panel-close {
            & {
                color: $color-dark-foreground;
            }

            &:hover {
                color: lighten($color-dark-foreground, 15%);
            }
        }
    }

    &-light {
        & {
            border-right: 1px solid $color-border;
        }

        .panel-header {
            background: $color-card-footer;
        }

        .panel-content {
            border-top: 1px solid $color-border;
        }

        .panel-content-blank {
            border: 0;
            background: $color-card-footer;
        }

        .panel-sidebar {
            background: $color-card-footer;
            border-left: 1px solid $color-border;
            color: lighten($color-dark-foreground, 20%);
        }

        .panel-close {
            & {
                color: lighten($color-dark-foreground, 20%);
            }

            &:hover {
                color: darken($color-dark-foreground, 15%);
            }
        }
    }
}

.panel-menu {
    & {
        margin-left: -$panel-padding;
        margin-right: -$panel-padding;
    }
}