84 lines
1.9 KiB
SCSS
84 lines
1.9 KiB
SCSS
|
// # Book
|
||
|
// Defines styles for the book's body
|
||
|
|
||
|
// *******************************************************
|
||
|
// ## Variables
|
||
|
// *******************************************************
|
||
|
|
||
|
// The color of the book background
|
||
|
$book-background : white !default;
|
||
|
// Styling for main book div
|
||
|
$book-map : () !default;
|
||
|
// Styling for book body div
|
||
|
$book-body-map : () !default;
|
||
|
// Styling for inner book div
|
||
|
$book-inner-map : (
|
||
|
color: $color-text,
|
||
|
background: $book-background
|
||
|
) !default;
|
||
|
|
||
|
|
||
|
// *******************************************************
|
||
|
// ## Main book div
|
||
|
// *******************************************************
|
||
|
|
||
|
|
||
|
.book
|
||
|
{
|
||
|
position: relative;
|
||
|
width: 100%;
|
||
|
height: 100%;
|
||
|
|
||
|
@include print( $book-map );
|
||
|
}
|
||
|
|
||
|
.book.with-summary
|
||
|
{
|
||
|
@media (max-width: $mobile-breakpoint) { overflow: hidden; }
|
||
|
}
|
||
|
|
||
|
// *******************************************************
|
||
|
// ## Book wrappers and innerds
|
||
|
// *******************************************************
|
||
|
|
||
|
.book-body
|
||
|
{
|
||
|
position: absolute;
|
||
|
top: 0px;
|
||
|
right: 0px;
|
||
|
left: 0px;
|
||
|
bottom: 0px;
|
||
|
overflow-y: auto;
|
||
|
|
||
|
@include print( $book-body-map );
|
||
|
|
||
|
@media (max-width: $mobileMaxWidth)
|
||
|
{
|
||
|
padding-bottom: 20px;
|
||
|
}
|
||
|
|
||
|
.book.without-animation & { transition : none !important; }
|
||
|
|
||
|
.book.with-summary &
|
||
|
{
|
||
|
@media (max-width: $mobile-breakpoint) { transform: translate( calc(100% - 60px), 0px ); }
|
||
|
}
|
||
|
}
|
||
|
|
||
|
.book-body .body-inner
|
||
|
{
|
||
|
position: absolute;
|
||
|
top: 0px;
|
||
|
right: 0px;
|
||
|
left: 0px;
|
||
|
bottom: 0px;
|
||
|
overflow-y: auto;
|
||
|
|
||
|
@include print( $book-inner-map );
|
||
|
|
||
|
@media (max-width: $mobileMaxWidth)
|
||
|
{
|
||
|
position: static;
|
||
|
min-height: calc( 100% - 50px );
|
||
|
}
|
||
|
}
|