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

83 lines
2.1 KiB
SCSS
Executable file

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