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

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

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

@mixin panel-icon {
    color: $color-panel-icon;
    font-size: 1.2rem;
    font-weight: 400;
    text-decoration: none;
    text-align: center;
    padding: .6rem;
    cursor: pointer;

    &:hover,
    &:focus {
        text-decoration: none;
        color: darken($color-panel-icon, 10%);
    }

    &.active {
        color: $color-theme-blue;
    }
}

.panel {
    & {
        @include flex-box;
        @include flex-flow(column);
        height: 100%;
        background: $color-background;
        border-right: 1px solid $color-border;
    }

    &-header {
        & {
            background: $panel-light-background;
            min-height: $panel-header;
            max-height: $panel-header;
            padding: $panel-padding;
            position: relative;
        }

        &-row {
            @include flex-box;
            @include flex-flow(row);
            margin-top: 1.2rem;
            position: relative;
        }
    }

    &-main {
        @include flex-box;
        @include flex-flow(row);
        @include flex-grow(1);
        overflow: hidden;
    }

    &-content {
        & {
            @include flex-grow(1);
            border-top: 1px solid $color-border;
            background: $color-background;
            padding: $panel-padding;
            overflow-y: auto;
        }

        &-blank {
            background: $panel-light-background;
            border: 0;
        }

        &-scroll {
            overflow-y: scroll;
        }

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

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

    &-sidebar {
        & {
            background: $panel-light-background;
            border-left: 1px solid $color-border;
            min-width: $panel-sidebar;
            max-width: $panel-sidebar;
        }

        & .panel-link {
            & {
                @include transition(background-color .3s ease);
                @include panel-icon;
                display: block;
                padding-top: .6rem;
                padding-bottom: .6rem;
            }

            &:hover {
                color: $color-theme-blue-dark;
            }

            &.active {
                color: $color-dark-foreground;
                border: 0;
                background: $color-theme-blue;
            }
        }
    }

    &-title {
        @include truncate;
        line-height: 2rem;
        font-size: 1.5rem;
        font-weight: 400;
        padding-right: 2rem;
    }

    &-row {
        margin-top: 1rem;
    }

    &-title-row {
        padding-right: $panel-sidebar - $panel-padding;
    }

    &-close {
        @include absolute($panel-padding - .2rem, $panel-padding - .8rem, auto, auto);
        @include panel-icon;
        font-size: 1rem;
        font-weight: 300;
    }
}

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

    .panel-content,
    .panel-header {
        background: $color-dark2-background;
        border: 0;
    }

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

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

    .nav-link {
        @include transition(color .4s ease);
    }
}


.sidebar {
    & {
        @include fixed($size-navbar-height, auto, 0, 0);
        @include box-shadow-colored(2px, 0, 0, $color-dark1-border2);
        min-width: $size-sidebar-width;
        max-width: $size-sidebar-width;
        border-right: 1px solid $color-dark1-border1;
        background: $color-dark1-background;
        z-index: 100;
    }

    .nav {
        &-icon {
            font-size: 2rem;
        }

        &-text {
            font-size: .9rem;
        }

        &-link {
            & {
                @include transition(color .3s ease);
                padding: 1.25rem;
                display: block;
                text-align: center;
                text-decoration: none;
                color: $color-dark1-foreground;
            }

            &:hover,
            &.active {
                color: $color-dark1-focus-foreground;

                .nav-icon {
                    color: $color-theme-blue;
                }
            }

            &.active {
                background: $color-dark1-active-background;
            }
        }
    }
}