Connected.Components/Styles/layout/_drawer.scss

@import '../abstracts/variables';

.drawer {
    display: flex;
    flex-shrink: 0;
    flex-grow: 1;
    flex: 0 0 auto;
    outline: 0;
    position: fixed;
    z-index: var(--zindex-drawer);
    overflow-y: auto;
    flex-direction: column;
    color: var(--palette-drawer-text);
    background-color: var(--palette-drawer-background);
    --drawer-content-height: 0;

    .drawer-content {
        height: 100%;
        max-height: 100%;
        display: flex;
        flex-shrink: 0;
        flex-grow: 1;
        flex: 0 0 auto;
        flex-direction: column;
    }

    &:not(.drawer-fixed) {
        position: absolute;
    }

    @each $breakpoint in map-keys($breakpoints) {
        &.drawer-mini.drawer-#{$breakpoint}:not(.drawer--closed), &.drawer-responsive.drawer-#{$breakpoint} {
            @media (max-width: map-get($breakpoints, $breakpoint) - 1px) {
                z-index: calc(var(--zindex-appbar) + 2);

                &.drawer--initial:not(.drawer-mini) {
                    display: none !important;
                }
            }
        }
    }

    &.drawer-responsive, &.drawer-persistent {
        height: 100%;

        &.drawer-pos-left {
            right: auto;
            width: var(--drawer-width, var(--drawer-width-left));

            &.drawer--open {
                left: 0;

                &:not(.drawer--initial) {
                    animation: drawer-slide-in-left 225ms cubic-bezier(0, 0, 0.2, 1);
                }
            }

            &.drawer--closed {
                box-shadow: none;
                left: calc(-1 * var(--drawer-width, var(--drawer-width-left)));

                &:not(.drawer--initial) {
                    animation: drawer-slide-out-left 225ms cubic-bezier(0, 0, 0.2, 1);
                }
            }
        }

        &.drawer-pos-right {
            left: auto;
            width: var(--drawer-width, var(--drawer-width-right));

            &.drawer--open {
                right: 0;

                &:not(.drawer--initial) {
                    animation: drawer-slide-in-right 225ms cubic-bezier(0, 0, 0.2, 1);
                }
            }

            &.drawer--closed {
                box-shadow: none;
                right: calc(-1 * var(--drawer-width, var(--drawer-width-right)));

                &:not(.drawer--initial) {
                    animation: drawer-slide-out-right 225ms cubic-bezier(0, 0, 0.2, 1);
                }
            }
        }
    }

    &.drawer-mini {
        height: 100%;
        transition: width 225ms cubic-bezier(0, 0, 0.2, 1);

        &.drawer-pos-left {
            left: 0;
            right: auto;

            &.drawer--closed {
                width: var(--drawer-width-mini-left);
            }

            &.drawer--open {
                width: var(--drawer-width-left);
            }
        }

        &.drawer-pos-right {
            left: auto;
            right: 0;

            &.drawer--closed {
                width: var(--drawer-width-mini-right);
            }

            &.drawer--open {
                width: var(--drawer-width-right);
            }
        }
    }

    &.drawer-temporary {
        margin: 0 !important;
        z-index: calc(var(--zindex-appbar) + 2);
        transition: transform 225ms cubic-bezier(0, 0, 0.2, 1) 0ms;

        &.drawer-pos-left {
            right: auto;
            top: 0;
            height: 100%;
            width: var(--drawer-width, var(--drawer-width-left));

            &.drawer--open {
                left: 0;

                &:not(.drawer--initial) {
                    animation: drawer-slide-in-left 225ms cubic-bezier(0, 0, 0.2, 1)forwards;
                }
            }

            &.drawer--closed {
                left: calc(-1 * var(--drawer-width, var(--drawer-width-left)));

                &:not(.drawer--initial) {
                    animation: drawer-slide-out-left 225ms cubic-bezier(0, 0, 0.2, 1)forwards;
                }
            }
        }

        &.drawer-pos-right {
            left: auto;
            top: 0;
            height: 100%;
            width: var(--drawer-width, var(--drawer-width-right));

            &.drawer--open {
                right: 0;

                &:not(.drawer--initial) {
                    animation: drawer-slide-in-right 225ms cubic-bezier(0, 0, 0.2, 1)forwards;
                }
            }

            &.drawer--closed {
                right: calc(-1 * var(--drawer-width, var(--drawer-width-right)));

                &:not(.drawer--initial) {
                    animation: drawer-slide-out-right 225ms cubic-bezier(0, 0, 0.2, 1)forwards;
                }
            }
        }

        &.drawer-pos-bottom {
            left: 0;
            top: auto;
            width: 100%;

            &.drawer--open {
                bottom: 0;

                &:not(.drawer--initial) {
                    animation: drawer-slide-in-bottom 225ms cubic-bezier(0, 0, 0.2, 1) 0ms 1;
                }
            }

            &.drawer--closed {
                bottom: calc(-1 * var(--drawer-content-height));

                &:not(.drawer--initial) {
                    animation: drawer-slide-out-bottom 225ms cubic-bezier(0, 0, 0.2, 1) 0ms 1;
                }
            }
        }

        &.drawer-pos-top {
            left: 0;
            bottom: auto;
            width: 100%;

            &.drawer--open {
                top: 0;

                &:not(.drawer--initial) {
                    animation: drawer-slide-in-top 225ms cubic-bezier(0, 0, 0.2, 1) 0ms 1;
                }
            }

            &.drawer--closed {
                top: calc(-1 * var(--drawer-content-height));

                &:not(.drawer--initial) {
                    animation: drawer-slide-out-top 225ms cubic-bezier(0, 0, 0.2, 1) 0ms 1;
                }
            }
        }
    }

    &.drawer-mini.drawer-pos-left ~ div:not(.main-content),
    &.drawer-mini.drawer-pos-right ~ div:not(.main-content),
    &.drawer-persistent.drawer-pos-left ~ div:not(.main-content),
    &.drawer-persistent.drawer-pos-right ~ div:not(.main-content) {
        transition: margin 225ms cubic-bezier(0.0, 0, 0.2, 1) 0ms;
    }

    &.drawer-mini.drawer-pos-left.drawer--open ~ div:not(.main-content),
    &.drawer-persistent.drawer-pos-left.drawer--open ~ div:not(.main-content) {
        margin-left: var(--drawer-width, var(--drawer-width-left));
    }

    &.drawer-mini.drawer-pos-right.drawer--open ~ div:not(.main-content),
    &.drawer-persistent.drawer-pos-right.drawer--open ~ div:not(.main-content) {
        margin-right: var(--drawer-width, var(--drawer-width-right));
    }

    &.drawer-mini.drawer-pos-left.drawer--closed ~ div:not(.main-content) {
        margin-left: var(--drawer-width, var(--drawer-width-mini-left));
    }

    &.drawer-mini.drawer-pos-right.drawer--closed ~ div:not(.main-content) {
        margin-right: var(--drawer-width, var(--drawer-width-mini-right));
    }
}

.drawer-header {
    display: flex;
    min-height: var(--appbar-height);
    padding: 12px 24px 12px 24px;

    &.drawer-header-dense {
        min-height: calc(var(--appbar-height) - var(--appbar-height) / 4);
        padding: 8px 24px 8px 24px;
    }
}

.drawer-fixed {
    &.drawer-mini.drawer-clipped-always,
    &.drawer-persistent:not(.drawer-clipped-never),
    &.drawer-responsive.drawer-clipped-always,
    &.drawer-temporary.drawer-clipped-always {
        top: var(--appbar-height);
        height: calc(100% - var(--appbar-height));

        @media (max-width:$breakpoint-sm - 1px) and (orientation: landscape) {
            top: calc(var(--appbar-height) - var(--appbar-height) / 4);
            height: calc(100% - calc(var(--appbar-height) - var(--appbar-height)/4));
        }

        @media (max-width:$breakpoint-sm - 1px) and (orientation: portrait) {
            top: calc(var(--appbar-height) - var(--appbar-height) / 8);
            height: calc(100% - calc(var(--appbar-height) - var(--appbar-height)/8));
        }
    }

    @each $breakpoint in map-keys($breakpoints) {
        &.drawer-mini.drawer-clipped-docked.drawer-#{$breakpoint},
        &.drawer-responsive.drawer-clipped-docked.drawer-#{$breakpoint} {
            @media (min-width: map-get($breakpoints, $breakpoint)) {
                top: var(--appbar-height);
                height: calc(100% - var(--appbar-height));

                @media (max-width:$breakpoint-sm - 1px) and (orientation: landscape) {
                    top: calc(var(--appbar-height) - var(--appbar-height) - var(--appbar-height) / 4);
                    height: calc(100% - var(--appbar-height) + var(--appbar-height) - var(--appbar-height) / 4);
                }

                @media (max-width:$breakpoint-sm - 1px) and (orientation: portrait) {
                    top: calc(var(--appbar-height) - var(--appbar-height) / 8);
                    height: calc(100% - var(--appbar-height) / 8);
                }
            }
        }
    }
}

.appbar-dense ~ .drawer-fixed {
    &.drawer-mini:not(.drawer-clipped-never),
    &.drawer-persistent:not(.drawer-clipped-never),
    &.drawer-responsive.drawer-clipped-always,
    &.drawer-temporary.drawer-clipped-always {
        top: calc(var(--appbar-height) - var(--appbar-height) / 4);
        height: calc(100% - var(--appbar-height) + var(--appbar-height) / 4);
    }

    @each $breakpoint in map-keys($breakpoints) {
        @media (min-width: map-get($breakpoints, $breakpoint)) {
            &.drawer-responsive.drawer-clipped-docked.drawer-#{$breakpoint} {
                top: calc(var(--appbar-height) - var(--appbar-height) / 4);
                height: calc(100% - var(--appbar-height) + var(--appbar-height) / 4);
            }
        }
    }
}

.drawer-overlay {
    display: none;

    &.drawer-overlay--open {
        @each $breakpoint in map-keys($breakpoints) {
            &.drawer-overlay-responsive.drawer-overlay-#{$breakpoint} {
                @media (max-width: map-get($breakpoints, $breakpoint) - 1px) {
                    display: block;

                    &.drawer--initial {
                        display: none;
                    }
                }
            }

            &.drawer-overlay-mini.drawer-overlay-#{$breakpoint} {
                @media (max-width: map-get($breakpoints, $breakpoint) - 1px) {
                    display: block;
                }
            }
        }

        &.drawer-overlay-temporary {
            display: block;
        }
    }
}

/*#region keyframes*/
@keyframes drawer-slide-in-left {
    from {
        left: calc(-1 * var(--drawer-width, var(--drawer-width-left)));
    }
}

@keyframes drawer-slide-out-left {
    from {
        left: 0;
    }
}

@keyframes drawer-slide-in-right {
    from {
        right: calc(-1 * var(--drawer-width, var(--drawer-width-right)));
    }
}

@keyframes drawer-slide-out-right {
    from {
        right: 0;
    }
}

@keyframes drawer-slide-in-bottom {
    from {
        bottom: calc(-1 * var(--drawer-content-height));
    }
}

@keyframes drawer-slide-out-bottom {
    from {
        bottom: 0;
    }
}

@keyframes drawer-slide-in-top {
    from {
        top: calc(-1 * var(--drawer-content-height));
    }
}

@keyframes drawer-slide-out-top {
    from {
        top: 0;
    }
}
/*#endregion*/