84 lines
2.1 KiB
SCSS
84 lines
2.1 KiB
SCSS
|
// # Navigation
|
||
|
|
// Right/Left buttons to change page
|
||
|
|
|
||
|
|
|
||
|
|
// *******************************************************
|
||
|
|
// ## Variables
|
||
|
|
// *******************************************************
|
||
|
|
|
||
|
|
// Shows/hide the left/right arrows
|
||
|
|
$navigation-show : true !default;
|
||
|
|
// Styling for the left/right arrows
|
||
|
|
$navigation-map : (
|
||
|
|
max-width: 150px,
|
||
|
|
min-width: 90px,
|
||
|
|
font-size: 40px,
|
||
|
|
color: $color-button
|
||
|
|
) !default;
|
||
|
|
// Styling for the left/right arrows on hover
|
||
|
|
$navigation-hover-map : (
|
||
|
|
text-decoration: none,
|
||
|
|
color: $color-button-hover
|
||
|
|
) !default;
|
||
|
|
|
||
|
|
|
||
|
|
// *******************************************************
|
||
|
|
// ## Nav buttons
|
||
|
|
// *******************************************************
|
||
|
|
|
||
|
|
// Shows/hide the left/right arrows
|
||
|
|
@if $navigation-show == false {
|
||
|
|
.navigation { display: none !important; }
|
||
|
|
}
|
||
|
|
|
||
|
|
.navigation
|
||
|
|
{
|
||
|
|
position: absolute;
|
||
|
|
top: $header-height;
|
||
|
|
bottom: 0px;
|
||
|
|
margin: 0;
|
||
|
|
|
||
|
|
|
||
|
|
display: flex;
|
||
|
|
justify-content: center;
|
||
|
|
align-content: center;
|
||
|
|
flex-direction: column;
|
||
|
|
|
||
|
|
text-align: center;
|
||
|
|
|
||
|
|
@include print( $navigation-map );
|
||
|
|
|
||
|
|
transition: all 350ms ease;
|
||
|
|
|
||
|
|
@media (max-width: $mobileMaxWidth)
|
||
|
|
{
|
||
|
|
position: static;
|
||
|
|
top: auto;
|
||
|
|
max-width: 50%;
|
||
|
|
width: 50%;
|
||
|
|
display: inline-block;
|
||
|
|
float: left;
|
||
|
|
|
||
|
|
&.navigation-unique
|
||
|
|
{
|
||
|
|
max-width: 100%;
|
||
|
|
width: 100%;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
.navigation:hover
|
||
|
|
{
|
||
|
|
@include print( $navigation-hover-map );
|
||
|
|
}
|
||
|
|
|
||
|
|
// *******************************************************
|
||
|
|
// ## Specific nav buttons
|
||
|
|
// *******************************************************
|
||
|
|
|
||
|
|
.navigation.navigation-next { right: 0px; }
|
||
|
|
.navigation.navigation-prev { left: 0px; }
|
||
|
|
|
||
|
|
|
||
|
|
|