test/styles/website/_sidebar.scss
2018-12-13 14:35:49 +01:00

222 lines
6 KiB
SCSS
Executable file

// # 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;
}