222 lines
6 KiB
SCSS
Executable file
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;
|
|
}
|
|
|
|
|