donmahallem/TrapezeClientNg

:host {
    position: absolute;
    width: 100%;
    height: 100%;
    margin: 0px;
    padding: 0px;
    top: 0px;
    left: 0px;
    right: 0px;
    bottom: 0px;
    overflow: hidden;
    flex-direction: column;
    display: flex;
}

@import './box-settings.scss';
mat-sidenav-container {
    flex: 1 1 auto;
    display: flex;
    flex-direction: row;
}

mat-sidenav-content{
    align-self: stretch;
    display:block;
    width:100%;
    height:100%;
    overflow:hidden;
    position:fixed;
}
map[appMainMap]{
    height:100%;
    width:100%;
    display:block;
}

button.sidebar-toggle {
    position: absolute;
    top: 8px;
    left: 16px;
    z-index: 10001;
}

mat-sidenav.main-nav {
    width: 100%;
    max-width: 400px;
    display: flex;
    overflow: hidden;
}

@import '~@angular/material/theming';

$searchBorderRadius: 8px;

app-main-toolbar{
    max-width: $boxMaxWidth;
    position: absolute;
    top:0px;
    left:0px;
    right:0px;
    margin:$boxMarginVertical auto 0px auto;
    z-index: #{$overlayZIndex};
    border-radius: $searchBorderRadius;
    border:1px solid rgb(87, 99, 207);
    @include mat-elevation(4);
    overflow: hidden;
}
@keyframes overlay-box-expand-animation {
    to {
        width:100vw;
    }
    from {
        width:#{$boxMaxWidth + (2 * $boxMarginHorizontal)};
    }
}
@keyframes overlay-box-contract-animation {
    from {
        width:100vw;
    }
    to {
        width:#{$boxMaxWidth + (2 * $boxMarginHorizontal)};
    }
}

.overlay-box{
    display:block;
    z-index: #{$overlayZIndex - 1};
    width: 100vw;
    position: absolute;
    top:0px;
    left:0px;
    right:0px;
    bottom:0px;
    pointer-events:none;
    animation-name: overlay-box-expand-animation;
    animation-duration: 1s;
    app-main-toolbar{
        margin:#{$boxMarginVertical} auto 0 auto;
        pointer-events:visible;
    }
    .router-box{
        z-index: #{$overlayZIndex - 1};
        width: 100%;
        position: absolute;
        top:0px;
        left:0px;
        right:0px;
        bottom:0px;
        overflow:auto;
        ::ng-deep > *:not(:first-child) {
            background-color:#F9F9F9;
            pointer-events:visible;
            height:100%;
            background-attachment: fixed;
            display: flex;
            flex: 1;
            flex-direction: column;
            overflow-y: auto;
            @include mat-elevation(4);
        }
    }
    @media (max-width: #{$boxMaxWidth + (2 * $boxMarginHorizontal)}) and (min-width: #{$boxMaxWidth + 1}){
        app-main-toolbar{
            border-radius: calc( #{$searchBorderRadius /(2 * $boxMarginHorizontal)}*(100vw - #{$boxMaxWidth}) );
            margin-top: calc( #{$boxMarginVertical /(2 * $boxMarginHorizontal)}*(100vw - #{$boxMaxWidth}) );
        }
    }
    @media (min-width: $breakpoint){
        app-main-toolbar{
            right:unset;
            margin:$boxMarginVertical 0px 0px $boxMarginHorizontal;
            width:$boxMaxWidth;
        }
    
        // Needed for dropshadow to appear for nav box
        $rightPadding: 20px;
        .router-box{
            padding-right:$rightPadding;
        }
    }

    @media (max-width: #{$boxMaxWidth} ){
        app-main-toolbar{
            border-radius: 0px;
            margin-top: 0px;
        }
    }
}

@media (min-width: #{$breakpoint }){
    .overlay-box{
        animation-name: overlay-box-contract-animation;
        animation-duration: 1s;
        width:#{$boxMaxWidth + (2 * $boxMarginHorizontal)};
        right:unset;
    }
}
@media (max-width: #{$boxMaxWidth} ){
    .overlay-box{
        display:flex;
        flex-direction: column;
        position: absolute;
        align-items: stretch;
        app-main-toolbar{
            margin:0px;
            position: relative;
            flex:0 0 auto;
            order: 1;
        }
        .router-box{
            position: unset;
            flex:1 1 auto;
            order: 2;
            height: 100%;
        }
    }
}