bansho/app/components/sidebar/_sidebar.scss

//----------------------------------*\
// SIDEBAR
//----------------------------------*/
.sidebar-wrapper {
    @extend %colorBkgPanel;
    padding-bottom:em(72+$_space, $_base_font_size);
}

//.sidebar {}

.sidebar__close {
    @extend %button-reset;
    display:block;
    font-size:em(15, $_base_font_size);
    height:45px;
    margin:0 auto;
    text-align:center;
    width:45px;

    @include large-xlarge-screen {
        display:none;
    }

    .color-scheme--dark & {
        background:$_color_dark_beta;
        color:$_color_omega;
    }

    .color-scheme--light & {
        background:$_color_light_beta;
        color:$_color_dark_alpha;
    }

    .no-js & {display:none;}
}

.sidebar__header {
    text-align:center;

    // Todo add constants for padding
    padding:12px;


    @include large-xlarge-screen {
        padding:12px;
    }
}

.sidebar__applogo {
    width: 100%;
}

.sidebar__appname {
    @extend %colorHightContrast;
    margin:0;
}

.sidebar__date {
    @extend %typo-more-info--little;
    display:block;
    margin-top:$_space_narrow;

    .color-scheme--dark & {
        color:$_color_dark_gamma;
    }

    .color-scheme--light & {
        color:$_color_light_gamma;
    }
}

//.sidebar__nav {}

.sidebar__item {
    border-top:1px solid;
    position:relative;

    .size-scheme--small & {
        margin-bottom:$_space - 20px;
    }
    .size-scheme--normal & {
        margin-bottom:$_space - 15px;
    }
    .size-scheme--big & {
        margin-bottom:$_space;
    }


    .color-scheme--dark & {
        border-top-color:$_color_dark_gamma;
    }

    .color-scheme--light & {
        border-top-color:$_color_light_gamma;
    }

    &:first-child {border:0;}
}

.sidebar__category {
    @extend %button-reset;
    @extend %typo-title;
    display:block;

    .size-scheme--small & {
        padding-top:$_space - 20px;
        padding-right: $_space_narrow;
        padding-bottom: 0;
        padding-left: $_space - 22px;
    }
    .size-scheme--normal & {
        padding-top:$_space - 15px;
        padding-right: $_space_narrow;
        padding-bottom: 0;
        padding-left: $_space - 15px;
    }
    .size-scheme--big & {
        padding:$_space $_space_narrow 0 $_space;
    }

    text-align:left;
    width:100%;

    @include large-xlarge-screen {
        padding:$_space $_space 0;
    }

    .js & {
        cursor:pointer;
    }

    .color-scheme--dark & {
        color:$_color_dark_gamma;
    }

    .color-scheme--light & {
        color:$_color_light_gamma
    }

    .sidebar__item:first-child & {padding-top:0;}
}

.sidebar__customize {
    @extend %button-reset;
    display:inline-block;
    font-size:em(24, $_base_font_size);
    line-height:1;

    .size-scheme--small & {
        padding-top:$_space - 20px;
        padding-right: $_space_narrow;
        padding-bottom: 0;
        padding-left: $_space_narrow;
    }
    .size-scheme--normal & {
        padding-top:$_space - 15px;
        padding-right: $_space_narrow;
        padding-bottom: 0;
        padding-left: $_space_narrow;
    }
    .size-scheme--big & {
        padding:$_space $_space_narrow 0;
    }



    position:absolute;
    right:0;
    top:0 ;
    transition-duration:0.5s;
    transition-property:color;

    @include large-xlarge-screen {
        padding:$_space $_space 0;
    }

    .color-scheme--dark & {
        color:$_color_dark_gamma;
    }

    .color-scheme--light & {
        color:$_color_light_gamma;
    }

    &:focus,
    &:hover {
        .color-scheme--dark & {
            color:$_color_omega;
        }
        .color-scheme--light & {
            color:$_color_dark_alpha;
        }
    }

    &:before {margin:0;}

    .sidebar__item:first-child & {padding-top:0;}
}

.sidebar__sublist {
    padding-top:0;
    padding-bottom: 0;

    .size-scheme--small & {
        padding-right: $_space_narrow;
        padding-left: $_space - 15px;
    }
    .size-scheme--normal & {
        padding-right: $_space_narrow;
        padding-left: $_space - 5px;
    }
    .size-scheme--big & {
        padding-right: $_space_narrow;
        padding-left: $_space;
    }

    @include large-xlarge-screen {
        padding:0 $_space;
    }
}

.sidebar__subitem {
    @extend %typo-menu;

    .size-scheme--small & {
        margin-top:$_space - 20px;
    }
    .size-scheme--normal & {
        margin-top:$_space - 15px;
    }
    .size-scheme--big & {
        margin-top:$_space;
    }

    .state--current {
        .color-scheme--dark & {
            color:$_color_omega;
        }
        .color-scheme--light & {
            color:$_color_dark_alpha;
        }

        position:relative;

        &:before {
            @extend %ico;
            content:"\e812";
            display:inline-block;
            font-size:em(8, $_base_font_size);
            left:-$_space_narrow;
            margin-top:-0.5em;
            position:absolute;
            top:50%;
        }
    }
}

.sidebar__profile {
    bottom:0;
    left:0;
    padding:0 $_space_narrow 0 $_space;
    position:absolute;
    right:0;

    @include large-xlarge-screen {
        padding:0 $_space;
    }

    .color-scheme--dark & {
        background:$_color_dark_beta;
    }

    .color-scheme--light & {
        background:$_color_light_beta;
    }

    .sidebar__profile__toggle {
        @extend %typo-more-info--little;
        .color-scheme--dark & {
            color:$_color_omega;
        }

        .color-scheme--light & {
            color:$_color_dark_alpha;
        }
        display:block;
        line-height:72px;
        min-height:72px;
        padding-left:(36+15) + px;
        position:relative;
        text-decoration:none;

        &:after {
            @extend %ico;
            content:"\e809";
            display:inline-block;
            position:absolute;
            right:0;

            .color-scheme--dark & {
                color:$_color_omega;
            }

            .color-scheme--light & {
                color:$_color_dark_alpha;
            }
        }
    }

    .sidebar__profile__name {
        display:inline-block;
        line-height:em(18, 12);
        vertical-align:middle;

        &:before,
        &:after {
            display:block;
            position:absolute;
        }

        &:before {
            border-radius:100%;
            content:"";
            height:36px;
            left:0;
            top:18px;
            width:36px;

            .color-scheme--dark & {
                background:$_color_dark_gamma;
            }

            .color-scheme--light & {
                background:$_color_light_gamma;
            }
        }

        &:after {
            @extend %ico;
            content:"\e800";
            font-size:em(24, $_base_font_size);
            left:7px;
            position:absolute;
            top:28px;

            .color-scheme--dark & {
                color:$_color_dark_alpha;
            }

            .color-scheme--light & {
                color:$_color_light_alpha;
            }
        }

    }
}