test/styles/website/_sidebar.scss

//  #   Sidebar
//      Defines styles for the book's sidebar

//  *******************************************************
//  ##  Variables
//  *******************************************************

// The width of the entire sidebar
$sidebar-width                      : 300px !default;
// Amount of time the sidebar animates when toggled
$sidebar-transition-duration        : 250ms !default;

// The increment of padding used throughout the sidebar
$sidebar-padding-unit               : $spacing-unit;
// The amount of horizontal padding for each section of the sidebar
$sidebar-padding-h                  : $sidebar-padding-unit * 1.5;
// The amount of vertical padding for each section of the sidebar
$sidebar-padding-v                  : $sidebar-padding-unit * 2;

// The text color of the sidebar
$sidebar-color                      : hsl(207, 15%, 25%) !default;
// 
$sidebar-font-size                  : 0.8em !default;
// The background color of the sidebar
$sidebar-background                 : #fafafa !default;
// The color of right border of the entire sidebar
$sidebar-border-right               : 1px solid $color-border !default;


// Styling for logo div
$sidebar-logo-map                   : (
                                        background: white,
                                        border-bottom: 1px solid $color-border
                                    ) !default;

// The height of the logo image
$sidebar-logo-height                : 30px !default;



// The amount of indentation for each level of nav links
$sidebar-nested-padding             : $sidebar-padding-unit !default;
// Hides/shows nested levels when not active
$sidebar-show-nested-levels         : false;
// The vertical padding between links
$sidebar-link-padding-v             : $sidebar-padding-unit !default;
// The horizontal padding on the sides of links
$sidebar-link-padding-h             : 0 !default;



// Sidebar link headers styling
$sidebar-header-map                 : (
                                        color: #939da3,
                                        text-transform: uppercase,
                                        font-family: $font-family-headings
                                    ) !default;
// Headers that are parent to currently active page
$sidebar-header-selected-map        : ( color: $color-primary ) !default;



// Sidebar link styling
$sidebar-link-map                   : ( 
                                        color: $color-text,
                                        font-family: $font-family-base
                                    ) !default;
// Sidebar link hover styling
$sidebar-link-hover-map             : (
                                        color: $color-primary,
                                        text-decoration: none
                                    ) !default;
// Links that are parent to current page
$sidebar-link-selected-map          : ( font-weight: bold ) !default;



// Sidebar dividers styling
$sidebar-divider-map                : ( background: $color-border ) !default;


//  *******************************************************
//  ## The logo
//  *******************************************************

.book-logo
{
    padding: $sidebar-padding-v $sidebar-padding-h;
    @include print( $sidebar-logo-map );
}

.book-logo img
{
    max-height: $sidebar-logo-height;
}

//  *******************************************************
//  ## The sidebar
//  *******************************************************

.book-summary
{
    position: absolute;
    top: 0;
    left: $sidebar-width * -1;
    bottom: 0;
    z-index: 1;
    overflow-y: auto;

    width: $sidebar-width;

    color: $sidebar-color;
    background: $sidebar-background;
    border-right: $sidebar-border-right;

    font-family: $font-family-sans;
    font-size: $sidebar-font-size;

    transition: left $sidebar-transition-duration ease;

    @media (max-width: $mobile-breakpoint)
    {
        width: calc( 100% - 60px );
        bottom: 0;
        left: -100%;
    }
}

// When the sidebar is toggled on
.book.with-summary .book-summary { left: 0; }
// When animation is turned off
.book.without-animation .book-summary { transition: none !important; }

// Handle sizing of book body for sidebar states
.book-body
{
    transition: left $sidebar-transition-duration ease, transform $sidebar-transition-duration ease;
}

.book.with-summary .book-body
{
    @media (min-width: $mobile-breakpoint) { left: $sidebar-width; }
}



//  *******************************************************
//  ## The list of links
//  *******************************************************

.book-summary ul.summary
{
    list-style: none;
    margin: 0;
    padding: $sidebar-padding-v $sidebar-padding-h;

    transition: top 0.5s ease;
}

// Hide nested levels when not active
.book-summary .hide { @if $sidebar-show-nested-levels == false { display: none !important } }

.book-summary ul.summary li { list-style: none; }

.book-summary ul.summary li.header
{
    padding: $sidebar-link-padding-v $sidebar-link-padding-h;
    padding-top: $sidebar-padding-unit * 2;

    @include print( $sidebar-header-map );
}
.book-summary ul.summary li.header:first-child { padding-top: 0; }

.book-summary ul.summary li.header.selected
{
    @include print( $sidebar-header-selected-map );
}

.book-summary ul.summary li.divider
{
    height: 1px;
    margin: $sidebar-padding-unit/2 0;
    overflow: hidden;

    @include print( $sidebar-divider-map );
}

.book-summary ul.summary li a,
.book-summary ul.summary li span
{
    position: relative;
    display: block;
    overflow: hidden;

    text-overflow: ellipsis;
    white-space: nowrap;
    
    padding: $sidebar-link-padding-v $sidebar-link-padding-h;

    border-bottom: none;

    @include print( $sidebar-link-map );
}

.book-summary ul.summary li.selected > a,
.book-summary ul.summary li.selected > span
{
    @include print( $sidebar-link-selected-map );
}

.book-summary ul.summary li.active > a,
.book-summary ul.summary li a:hover
{
    @include print( $sidebar-link-hover-map );
}

.book-summary ul.summary li ul
{
    padding-left: $sidebar-nested-padding;
}