117 lines
3.1 KiB
SCSS
Executable file
117 lines
3.1 KiB
SCSS
Executable file
// # Header
|
|
// Defines styles for the book's header
|
|
|
|
// *******************************************************
|
|
// ## Variables
|
|
// *******************************************************
|
|
|
|
// ### Header styling
|
|
// The height of the header
|
|
$header-height : 50px !default;
|
|
// Styling for the header div
|
|
$header-map : (
|
|
padding: 0px $spacing-unit / 2,
|
|
color: $color-text,
|
|
background: transparent
|
|
) !default;
|
|
|
|
// ### Header buttons
|
|
// Styling for icon buttons
|
|
$header-button-map : ( color: $color-button ) !default;
|
|
// Styling for icon buttons on hover
|
|
$header-button-hover-map : ( color: $color-button-hover ) !default;
|
|
|
|
// ### Header title
|
|
// Permanently hides/shows the title in the header
|
|
$header-show-title : false !default;
|
|
// Styling for the title
|
|
$header-title-map : (
|
|
font-size: 1.25rem,
|
|
font-weight: 200
|
|
) !default;
|
|
|
|
// *******************************************************
|
|
// ## The header
|
|
// *******************************************************
|
|
|
|
.book-header
|
|
{
|
|
font-family: $font-family-sans;
|
|
|
|
overflow: visible;
|
|
height: $header-height;
|
|
z-index: 2;
|
|
|
|
@include print( $header-map );
|
|
}
|
|
|
|
// *******************************************************
|
|
// ## Header buttons
|
|
// *******************************************************
|
|
|
|
.book-header .btn
|
|
{
|
|
display: block;
|
|
height: $header-height;
|
|
padding: 0px 15px;
|
|
border-bottom: none;
|
|
text-transform: uppercase;
|
|
line-height: $header-height;
|
|
box-shadow: none !important;
|
|
position:relative;
|
|
font-size: $font-size-base;
|
|
|
|
@include print( $header-button-map );
|
|
}
|
|
|
|
.book-header .btn:hover
|
|
{
|
|
position: relative;
|
|
text-decoration: none;
|
|
|
|
@include print( $header-button-hover-map );
|
|
}
|
|
|
|
.book-header .btn:focus { outline: none; }
|
|
|
|
// *******************************************************
|
|
// ## The current page title
|
|
// *******************************************************
|
|
|
|
// Permanently hides/shows the title in the header
|
|
.book-header h1 { @if $header-show-title == false { display: none; } }
|
|
|
|
.book-header h1
|
|
{
|
|
margin: 0px;
|
|
text-align: center;
|
|
line-height: $header-height;
|
|
opacity: 0;
|
|
transition : opacity ease 0.4s;
|
|
|
|
padding-left: 200px;
|
|
padding-right: 200px;
|
|
transition : opacity 0.2s ease;
|
|
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
|
|
@include print( $header-title-map );
|
|
|
|
@media (max-width: 1000px) { display: none; }
|
|
}
|
|
|
|
.book-header h1 a,
|
|
.book-header h1 a:hover
|
|
{
|
|
color: inherit;
|
|
text-decoration: none;
|
|
}
|
|
|
|
.book-header h1 i { display: none; }
|
|
|
|
.book-header:hover h1 { opacity: 1; }
|
|
|
|
.book.is-loading .book-header h1 i { display: inline-block; }
|
|
.book.is-loading .book-header h1 a { display: none; }
|