204 lines
3.9 KiB
Sass
204 lines
3.9 KiB
Sass
@use './base' as *
|
|
|
|
// Navigation Variables
|
|
$content-width: 1000px
|
|
$breakpoint: 799px
|
|
$nav-height: 70px
|
|
$nav-background: $backgroundTxt
|
|
$link-hover-color: Lightgrey
|
|
$nav-background2: url("../inc/bg/christmas-banner-6739203.jpg") 0 86% no-repeat
|
|
|
|
// Blauer klik Hintergrund entfernen
|
|
*:focus
|
|
-webkit-tap-highlight-color: transparent
|
|
-webkit-touch-callout: none
|
|
-webkit-user-select: none
|
|
-khtml-user-select: none
|
|
-moz-user-select: none
|
|
-ms-user-select: none
|
|
user-select: none
|
|
outline: none !important
|
|
|
|
// Outer navigation wrapper
|
|
.navigation
|
|
height: $nav-height
|
|
background: $nav-background2
|
|
border-radius: 0 0 2rem 2rem
|
|
background-size: 100%
|
|
border-bottom: 4px ridge $siteColor
|
|
background-size: 100%
|
|
|
|
// Logo and branding
|
|
.brand
|
|
text-align: left
|
|
position: absolute
|
|
padding-left: 20px
|
|
float: left
|
|
/*line-height: $nav-height
|
|
text-transform: uppercase
|
|
font-size: 1.2em
|
|
font-weight: bold
|
|
text-shadow: 1px 0 #fff, 0 1px #fff, -1px 0 #fff, 0 -1px #fff
|
|
margin: 0.9rem 0 0 3rem
|
|
a,
|
|
a:visited
|
|
color: $headerFontColor
|
|
text-decoration: none
|
|
|
|
|
|
// Container with no padding for navbar
|
|
.nav-container
|
|
max-width: $content-width
|
|
margin: 0 auto
|
|
|
|
|
|
// Navigation
|
|
nav
|
|
display: block
|
|
float: right
|
|
font-weight: bold
|
|
//text-shadow: 1px 0 #fff, 0 1px #fff, -1px 0 #fff, 0 -1px #fff
|
|
padding-right: 1rem
|
|
margin: 2rem 1rem 0 0
|
|
border-radius: 2rem
|
|
background: hsl(0,0%,100%,0.7)
|
|
|
|
ul
|
|
list-style: none
|
|
margin: 0
|
|
padding: 0
|
|
background-color: $nav-background
|
|
li
|
|
float: left
|
|
position: relative
|
|
padding: 0
|
|
|
|
a,
|
|
a:visited
|
|
display: block
|
|
padding: 0.5rem 0.5rem
|
|
//line-height: $nav-height
|
|
color: $headerFontColor
|
|
text-decoration: none
|
|
|
|
&:hover, &:active, &.active
|
|
//background: $link-hover-color
|
|
color: $siteColor
|
|
text-decoration: underline
|
|
//transform: scale(1.1)
|
|
|
|
&:not(:only-child):after
|
|
padding-left: 10px
|
|
content: '▾'
|
|
|
|
// Dropdown list
|
|
ul li
|
|
min-width: 190px
|
|
a
|
|
padding: 15px
|
|
line-height: 20px
|
|
|
|
|
|
|
|
|
|
// Dropdown list binds to JS toggle event
|
|
.nav-dropdown
|
|
position: absolute
|
|
display: none
|
|
z-index: 1
|
|
box-shadow: 0 3px 12px rgba(0, 0, 0, 0.20)
|
|
margin-top: 4px
|
|
font-weight: bold
|
|
|
|
|
|
/* Mobile navigation */
|
|
|
|
// Binds to JS Toggle
|
|
.nav-mobile
|
|
display: none
|
|
position: absolute
|
|
top: 0
|
|
right: 0
|
|
height: $nav-height
|
|
width: $nav-height
|
|
|
|
@media only screen and (max-width: 798px)
|
|
// Hamburger nav visible on mobile only
|
|
.brand
|
|
margin: 0.9rem 0 0 1rem
|
|
.nav-mobile
|
|
display: block
|
|
|
|
nav
|
|
width: 100%
|
|
padding: $nav-height 0 15px 0
|
|
text-shadow: none
|
|
margin: 0px
|
|
background: none
|
|
ul
|
|
display: none
|
|
border: 4px ridge $siteColor
|
|
border-radius: 2rem
|
|
|
|
li
|
|
float: none
|
|
padding-top: 0
|
|
a
|
|
padding: 15px
|
|
background: none
|
|
line-height: 15px
|
|
|
|
ul li a
|
|
//padding-left: 30px
|
|
|
|
|
|
.nav-dropdown
|
|
position: static
|
|
background: none
|
|
border: none
|
|
box-shadow: none
|
|
|
|
|
|
@media screen and (min-width: $breakpoint)
|
|
.nav-list
|
|
display: block !important
|
|
|
|
#nav-toggle
|
|
position: absolute
|
|
left: 18px
|
|
top: 22px
|
|
cursor: pointer
|
|
padding: 10px 0px 16px 0px
|
|
|
|
span,
|
|
span:before,
|
|
span:after
|
|
cursor: pointer
|
|
border-radius: 1px
|
|
height: 5px
|
|
width: 35px
|
|
background: black
|
|
position: absolute
|
|
display: block
|
|
content: ''
|
|
transition: all 300ms ease-in-out
|
|
|
|
span:before
|
|
top: -10px
|
|
|
|
span:after
|
|
bottom: -10px
|
|
|
|
&.active span
|
|
background-color: transparent
|
|
&:before,
|
|
&:after
|
|
top: 0
|
|
|
|
&:before
|
|
transform: rotate(45deg)
|
|
|
|
&:after
|
|
transform: rotate(-45deg)
|
|
|