main.scss

@charset "UTF-8";

@import "../core/index-noreset.scss";
@import "scss/mixin";
@import "scss/variable";
@import "./rtl.scss";

#{$shell-prefix} {
    @include box-sizing;
    position: relative;
    display: flex;
    flex-direction: column;
    transition: all .2s $motion-ease;

    &-content-wrapper {
        overflow: auto;
    }

    &-header {
        display: flex;
        width: 100%;
        justify-content: space-between;
        align-items: center;
        z-index: 9;

        .dock-trigger,
        .nav-trigger {
            outline: 0;
            // background: $shell-dark-header-background;
            display: flex;
            justify-content: center;
            align-items: center;
            cursor: pointer;
            width: 32px;
            height: 32px;
        }

        .nav-trigger {
            margin-right: 10px;
        }
        .dock-trigger {
            margin-left: 10px;
        }

        &#{$shell-prefix}-fixed-header {
            position: sticky;
            top: 0;
        }

        #{$shell-prefix}-navigation {
            flex: 1 1;
            display: flex;
            align-items: center;
            flex-direction: row;
        }
        #{$shell-prefix}-branding {
            display: flex;
            align-items: center;
        }
        #{$shell-prefix}-action {
            display: flex;
            align-items: center;
        }
    }

    &-sub-main {
        flex: 1 1;
        display: flex;
        flex-direction: column;
        height: 100%;
        overflow: auto;
        outline: 0;
    }
    &-main {
        display: flex;
        flex: 1 1 auto;
        flex-direction: row;
        position: relative;
        height: 100%;
        box-sizing: content-box;
        overflow: auto;
        transition: all .2s $motion-ease;

        #{$shell-prefix}-content {
            flex: 1 1 auto;
        }

        #{$shell-prefix}-content-inner {
            margin: 0 auto;
            // display: grid;
        }

        #{$shell-prefix}-footer {
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            width: 100%;
        }
    }

    .#{$css-prefix}aside-navigation,
    .#{$css-prefix}aside-tooldock {
        display: flex;
        &.fixed {
            position: fixed;
            top: 0;
            bottom: 0;
            z-index: 1;
        }
    }

    .#{$css-prefix}aside-navigation.fixed {
        left: 0;
    }
    .#{$css-prefix}aside-tooldock.fixed {
        right: 0;
    }

    &-aside {
        transition: all .2s $motion-ease;

        .aside-trigger {
            cursor: pointer;
            outline: 0;
            position: absolute;
            right: 0;
            top: 50%;
            width: 20px;
            height: 48px;
            display: flex;
            border: 1px solid #DDD;
            align-items: center;
            justify-content: center;
        }
        .local-nav-trigger {
            outline: 0;
            border-left: none;
            transform: translate(100%, -50%);
            right: 0;
        }
        .ancillary-trigger {
            outline: 0;
            transform: translate(-100%, -50%);
            border-right: 0;
            left: 1px;
        }

        &.#{$css-prefix}aside-localnavigation {
            position: relative;
        }

        &.#{$css-prefix}aside-ancillary {
            position: relative;
        }


        &#{$shell-prefix}-navigation {
            overflow-x: auto;
            display: flex;
            flex-direction: column;
            justify-self: flex-start;
            transition: all .2s $motion-ease;
        }

        &#{$shell-prefix}-tooldock {
            overflow-x: auto;
            display: flex;
            flex-direction: column;
            align-items: center;
        }

        #{$shell-prefix}-tooldockitem {
            width: 100%;
            text-align: center;
        }

        #{$shell-prefix}-localnavigation {
            position: relative;
            height: 100%;
            display: flex;
            flex-direction: column;
            justify-self: flex-start;
            transition: all .2s $motion-ease;
        }

        #{$shell-prefix}-ancillary {
            height: 100%;
            display: flex;
            flex-direction: column;
            justify-self: flex-start;
            transition: all .2s $motion-ease;
        }
    }

    &-light {
        @include shell-trigger-background(
            $shell-light-header-background,
            $shell-light-header-background,
            $shell-light-local-navigation-background,
            $shell-light-ancillary-background
        );

        #{$shell-prefix}-header {
            @include shell-header-type(
                $shell-light-header-color,
                $shell-light-header-height,
                $shell-light-header-background,
                $shell-light-header-divider,
                $shell-light-header-shadow,
                $shell-light-header-paddingLeft
            );

            #{$shell-prefix}-navigation {
                @include shell-header-navigation(
                    $shell-light-navigation-hoz-align,
                    $shell-light-header-height,
                    $shell-light-header-height,
                    $shell-light-navigation-hoz-marginLeft
                );
            }
        }

        #{$shell-prefix}-task-header {
            @include shell-task-header(
                $shell-light-multitask-min-height,
                $shell-light-multitask-background,
                $shell-light-multitask-divider,
                $shell-light-multitask-shadow,
                $shell-light-multitask-paddingLeft
            );
        }

        #{$shell-prefix}-main {
            background: $shell-light-content-background;

            #{$shell-prefix}-appbar {
                @include shell-appbar(
                    $shell-light-appbar-min-height,
                    $shell-light-appbar-background,
                    $shell-light-appbar-divider,
                    $shell-light-appbar-shadow,
                    $shell-light-appbar-paddingLeft
                );
            }

            @include shell-content(
                $shell-light-content-paddingTop,
                $shell-light-content-paddingLeft,
                $shell-light-content-max-width,
                $shell-light-content-gutter-row,
                $shell-light-content-gutter-column,
                $shell-light-content-columns
            );

            #{$shell-prefix}-footer {
                background: $shell-light-footer-background;
                min-height: $shell-light-footer-min-height;
                color: $shell-light-footer-color;
                font-size: $shell-light-footer-font-size;
            }
        }

        #{$shell-prefix}-aside {
            &#{$shell-prefix}-navigation {
                @include shell-navigation(
                    $shell-light-navigation-ver-width,
                    $shell-light-navigation-ver-background,
                    $shell-light-navigation-ver-divider,
                    $shell-light-navigation-ver-shadow,
                    $shell-light-navigation-ver-paddingTop,
                    $shell-light-navigation-ver-paddingBottom,
                    $shell-light-navigation-ver-width-mini
                );
            }
            &#{$shell-prefix}-tooldock {
                @include shell-tooldock(
                    $shell-light-tooldock-width,
                    $shell-light-tooldock-background,
                    $shell-light-tooldock-divider,
                    $shell-light-tooldock-shadow,
                    $shell-light-tooldock-paddingTop,
                    $shell-light-tooldock-paddingBottom
                );
            }
            #{$shell-prefix}-tooldockitem {
                @include shell-tooldock-item(
                    $shell-light-tooldock-item-paddingTop,
                    $shell-light-tooldock-item-color,
                    $shell-light-tooldock-item-background,
                    $shell-light-tooldock-item-color-hover,
                    $shell-light-tooldock-item-background-hover
                );
            }
            #{$shell-prefix}-localnavigation {
                @include shell-localnavigation(
                    $shell-light-local-navigation-width,
                    $shell-light-local-navigation-background,
                    $shell-light-local-navigation-divider,
                    $shell-light-local-navigation-shadow,
                    $shell-light-local-navigation-paddingTop,
                    $shell-light-local-navigation-paddingBottom
                );
            }
            #{$shell-prefix}-ancillary {
                @include shell-ancillary(
                    $shell-light-ancillary-width,
                    $shell-light-ancillary-background,
                    $shell-light-ancillary-divider,
                    $shell-light-ancillary-shadow,
                    $shell-light-ancillary-paddingTop,
                    $shell-light-ancillary-paddingBottom
                );
            }
        }
    }

    &-dark {
        @include shell-trigger-background(
            $shell-dark-header-background,
            $shell-dark-header-background,
            $shell-dark-local-navigation-background,
            $shell-dark-ancillary-background
        );

        #{$shell-prefix}-header {
            @include shell-header-type(
                $shell-dark-header-color,
                $shell-dark-header-height,
                $shell-dark-header-background,
                $shell-dark-header-divider,
                $shell-dark-header-shadow,
                $shell-dark-header-paddingLeft
            );

            #{$shell-prefix}-navigation {
                @include shell-header-navigation(
                    $shell-dark-navigation-hoz-align,
                    $shell-dark-header-height,
                    $shell-dark-header-height,
                    $shell-dark-navigation-hoz-marginLeft
                );
            }
        }

        #{$shell-prefix}-task-header {
            @include shell-task-header(
                $shell-dark-multitask-min-height,
                $shell-dark-multitask-background,
                $shell-dark-multitask-divider,
                $shell-dark-multitask-shadow,
                $shell-dark-multitask-paddingLeft
            );
        }

        #{$shell-prefix}-main {
            background: $shell-dark-content-background;

            #{$shell-prefix}-appbar {
                @include shell-appbar(
                    $shell-dark-appbar-min-height,
                    $shell-dark-appbar-background,
                    $shell-dark-appbar-divider,
                    $shell-dark-appbar-shadow,
                    $shell-dark-appbar-paddingLeft
                );
            }

            @include shell-content(
                $shell-dark-content-paddingTop,
                $shell-dark-content-paddingLeft,
                $shell-dark-content-max-width,
                $shell-dark-content-gutter-row,
                $shell-dark-content-gutter-column,
                $shell-dark-content-columns
            );

            #{$shell-prefix}-footer {
                background: $shell-dark-footer-background;
                min-height: $shell-dark-footer-min-height;
                color: $shell-dark-footer-color;
                font-size: $shell-dark-footer-font-size;
            }
        }

        #{$shell-prefix}-aside {
            &#{$shell-prefix}-navigation {
                @include shell-navigation(
                    $shell-dark-navigation-ver-width,
                    $shell-dark-navigation-ver-background,
                    $shell-dark-navigation-ver-divider,
                    $shell-dark-navigation-ver-shadow,
                    $shell-dark-navigation-ver-paddingTop,
                    $shell-dark-navigation-ver-paddingBottom,
                    $shell-dark-navigation-ver-width-mini
                );
            }
            &#{$shell-prefix}-tooldock {
                @include shell-tooldock(
                    $shell-dark-tooldock-width,
                    $shell-dark-tooldock-background,
                    $shell-dark-tooldock-divider,
                    $shell-dark-tooldock-shadow,
                    $shell-dark-tooldock-paddingTop,
                    $shell-dark-tooldock-paddingBottom
                );
            }
            #{$shell-prefix}-tooldockitem {
                @include shell-tooldock-item(
                    $shell-dark-tooldock-item-paddingTop,
                    $shell-dark-tooldock-item-color,
                    $shell-dark-tooldock-item-background,
                    $shell-dark-tooldock-item-color-hover,
                    $shell-dark-tooldock-item-background-hover
                );
            }
            #{$shell-prefix}-localnavigation {
                @include shell-localnavigation(
                    $shell-dark-local-navigation-width,
                    $shell-dark-local-navigation-background,
                    $shell-dark-local-navigation-divider,
                    $shell-dark-local-navigation-shadow,
                    $shell-dark-local-navigation-paddingTop,
                    $shell-dark-local-navigation-paddingBottom
                );
            }
            #{$shell-prefix}-ancillary {
                @include shell-ancillary(
                    $shell-dark-ancillary-width,
                    $shell-dark-ancillary-background,
                    $shell-dark-ancillary-divider,
                    $shell-dark-ancillary-shadow,
                    $shell-dark-ancillary-paddingTop,
                    $shell-dark-ancillary-paddingBottom
                );
            }
        }
    }

    &-brand {
        @include shell-trigger-background(
            $shell-brand-header-background,
            $shell-brand-header-background,
            $shell-brand-local-navigation-background,
            $shell-brand-ancillary-background
        );

        #{$shell-prefix}-header {
            @include shell-header-type(
                $shell-brand-header-color,
                $shell-brand-header-height,
                $shell-brand-header-background,
                $shell-brand-header-divider,
                $shell-brand-header-shadow,
                $shell-brand-header-paddingLeft
            );

            #{$shell-prefix}-navigation {
                @include shell-header-navigation(
                    $shell-brand-navigation-hoz-align,
                    $shell-brand-header-height,
                    $shell-brand-header-height,
                    $shell-brand-navigation-hoz-marginLeft
                );
            }
        }

        #{$shell-prefix}-task-header {
            @include shell-task-header(
                $shell-brand-multitask-min-height,
                $shell-brand-multitask-background,
                $shell-brand-multitask-divider,
                $shell-brand-multitask-shadow,
                $shell-brand-multitask-paddingLeft
            );
        }

        #{$shell-prefix}-main {
            background: $shell-brand-content-background;

            #{$shell-prefix}-appbar {
                @include shell-appbar(
                    $shell-brand-appbar-min-height,
                    $shell-brand-appbar-background,
                    $shell-brand-appbar-divider,
                    $shell-brand-appbar-shadow,
                    $shell-brand-appbar-paddingLeft
                );
            }

            @include shell-content(
                $shell-brand-content-paddingTop,
                $shell-brand-content-paddingLeft,
                $shell-brand-content-max-width,
                $shell-brand-content-gutter-row,
                $shell-brand-content-gutter-column,
                $shell-brand-content-columns
            );

            #{$shell-prefix}-footer {
                background: $shell-brand-footer-background;
                min-height: $shell-brand-footer-min-height;
                color: $shell-brand-footer-color;
                font-size: $shell-brand-footer-font-size;
            }
        }

        #{$shell-prefix}-aside {
            &#{$shell-prefix}-navigation {
                @include shell-navigation(
                    $shell-brand-navigation-ver-width,
                    $shell-brand-navigation-ver-background,
                    $shell-brand-navigation-ver-divider,
                    $shell-brand-navigation-ver-shadow,
                    $shell-brand-navigation-ver-paddingTop,
                    $shell-brand-navigation-ver-paddingBottom,
                    $shell-brand-navigation-ver-width-mini
                );
            }

            &#{$shell-prefix}-tooldock {
                @include shell-tooldock(
                    $shell-brand-tooldock-width,
                    $shell-brand-tooldock-background,
                    $shell-brand-tooldock-divider,
                    $shell-brand-tooldock-shadow,
                    $shell-brand-tooldock-paddingTop,
                    $shell-brand-tooldock-paddingBottom
                );
            }
            #{$shell-prefix}-tooldockitem {
                @include shell-tooldock-item(
                    $shell-brand-tooldock-item-paddingTop,
                    $shell-brand-tooldock-item-color,
                    $shell-brand-tooldock-item-background,
                    $shell-brand-tooldock-item-color-hover,
                    $shell-brand-tooldock-item-background-hover
                );
            }
            #{$shell-prefix}-localnavigation {
                @include shell-localnavigation(
                    $shell-brand-local-navigation-width,
                    $shell-brand-local-navigation-background,
                    $shell-brand-local-navigation-divider,
                    $shell-brand-local-navigation-shadow,
                    $shell-brand-local-navigation-paddingTop,
                    $shell-brand-local-navigation-paddingBottom
                );
            }
            #{$shell-prefix}-ancillary {
                @include shell-ancillary(
                    $shell-brand-ancillary-width,
                    $shell-brand-ancillary-background,
                    $shell-brand-ancillary-divider,
                    $shell-brand-ancillary-shadow,
                    $shell-brand-ancillary-paddingTop,
                    $shell-brand-ancillary-paddingBottom
                );
            }
        }
    }

    &-header #{$shell-prefix}-navigation {
        &#{$shell-prefix}-nav-left {
            justify-content: flex-start;
        }
        &#{$shell-prefix}-nav-right {
            justify-content: flex-end;
        }
        &#{$shell-prefix}-nav-center {
            justify-content: center;
        }
    }

    &#{$shell-prefix}-phone {
        .#{$css-prefix}aside-navigation {
            width: 100%;

            &#{$shell-prefix}-collapse {
                width: 0;
            }
        }
        #{$shell-prefix}-header #{$shell-prefix}-navigation {
            display: none;
        }
        #{$shell-prefix}-navigation {
            width: 100%;
            height: 100%;
            transition: height .2s $motion-ease;
            &#{$shell-prefix}-collapse {
                padding: 0;
                height: 0;
                transition: height .2s $motion-ease;
            }
        }
        #{$shell-prefix}-tooldock {
            height: $shell-dark-tooldock-height;
            left: 0;
            right: 0;
            position: absolute;
            width: 100%;
            flex-direction: row;
            justify-content: center;
            &#{$shell-prefix}-collapse {
                display: none;
                height: 0;
                padding: 0;
                transition: all .2s $motion-ease;
            }
        }
    }

    &#{$shell-prefix}-tablet,
    &#{$shell-prefix}-phone {
        #{$shell-prefix}-aside.#{$css-prefix}aside-ancillary {
            width: 0;
        }
        #{$shell-prefix}-ancillary {
            transform: translateX(-100%);
        }
        #{$shell-prefix}-aside.#{$css-prefix}aside-localnavigation {
            width: 0;
        }
    }
}