File: D:/HostingSpaces/SBogers10/douven.komma.pro/resources/assets/sass/site/partials/_header.sass
header
background: $douvBlue url('/img/bg_repeat.png') repeat
background-image: url('/img/bg_repeat.png'), linear-gradient(90deg, $douvBlue, $douvDarkBlueGrad)
color: white
height: 200px
position: relative
&:before
content: ''
display: block
position: absolute
top: 0
left: 0
width: 100%
height: 100%
z-index: 0
+background(linear-gradient(left, rgba(0,0,0,0.1) 0%,rgba(255,255,255,0.1) 50%))
.menu-substitute
display: none
width: 100%
height: 100px
&.small
.menu-substitute
display: block
height: 200px
.menu-wrapper
height: 100px
position: fixed
width: 100%
background: $douvBlue95 url('/img/bg_repeat.png') repeat
background-image: url('/img/bg_repeat.png'), linear-gradient(90deg, $douvBlue95, rgba($douvDarkBlueGrad, 0.95))
.primary-menu
height: 100px
.logo-holder
z-index: 15
.logo
width: 145px
height: 57px
.menu-right
top: 25%
.button
&.menuToggle
top: 25%
nav
top: 100px
.nav-bg-overlay
top: 100px
.menu-wrapper
position: static
height: 200px
z-index: 5
transition: background 0.2s
&.open
background-color: rgba($douvDarkBlue, 0.95)
.primary-menu
position: relative
+flex(center, center)
font-size: 1rem
line-height: 1
height: 200px
padding: 0
top: 0
transition: height 0.2s
.logo-holder
z-index: 15
.logo
display: block
background: transparent url('/img/svg/logo_full.svg') no-repeat
width: 243px
height: 87px
transition: width 0.2s, height 0.2s
.menu-right
position: absolute
margin: 0
right: 0
top: 35%
.button
width: auto
border: solid 1px rgba(#ffffff, 0.75)
.button
cursor: pointer
z-index: 5
font-weight: 600
font-size: 16px
letter-spacing: -0.08px
padding: 16px 12px
text-align: center
width: 180px
margin-right: 10px
transition: background-color 0.3s
&:hover
background-color: lighten($douvBlue, 5%)
&:last-child
margin-right: 0
&.menuToggle
min-width: 140px
position: absolute
left: column(0.5, 12)
top: 35%
border-color: $douvYellow
span
&.email, &.offerte
background-size: 150px
width: 32px
margin: -20px 5px -22px 10px
&.offerte
background-position: -44px top
&.shoppingCartButtonCounter
position: absolute
right: -13px
top: -15px
width: 1.7em
line-height: 1.7em
border-radius: 50%
color: black
background-color: $douvYellow
transition: width 0.3s, height 0.3s
&.lines
position: absolute
border-top: solid 1.5px white
width: 28px
margin-left: 115px
margin-top: 6px
left: 0
&:before
content: ' '
display: block
width: 50%
height: 5px
border-bottom: 1.5px solid white
&.extra
+respond-to-width(1200)
display: none
nav
display: block
position: fixed
font-size: 0.9rem
line-height: 1.2
height: 0
width: 100%
top: 196px
left: 0
padding: 0 0 0 column(0.5, 8)
z-index: 10
background-color: rgba(0, 30, 46, 0.95)
-webkit-box-shadow: inset 0 35px 35px -20px rgba(0,0,0,0.35)
-moz-box-shadow: inset 0 35px 35px -20px rgba(0,0,0,0.35)
box-shadow: inset 0 35px 35px -20px rgba(0,0,0,0.35)
transition: height 0.3s, top 0.1s
&.visible
height: 550px
.nav-bg-overlay
opacity: 0.5
z-index: 0
height: 100%
position: fixed
.menu-cat, .menu-nav
overflow: visible
padding-top: 50px
height: auto
.menu-cat
&:after
height: 550px
ul
ul.open
opacity: 1
height: 550px
z-index: 15
.menu-nav
padding-top: 80px
.nav-bg-overlay
//content: ''
display: block
position: static
top: 200px
left: 0
width: 100%
height: 0
background-color: $douvDarkBlue
opacity: 0
z-index: -1
transition: opacity 0.3s
.menu-cat, .menu-nav
overflow: hidden
height: 0
z-index: 1
ul
list-style: none
margin: 0
padding: 0
li
h3, a
display: block
margin: 0
padding: 21px 0
position: relative
z-index: 2
color: $douvBlue
text-decoration: none
transition: color 0.3s
&:hover
color: lighten($douvBlue, 10%)
h3
font-weight: 600
span
border-radius: 50px
transition: background-color 0.3s
a
padding: 7px 0
&.active, &:hover
h3, a
color: $douvLightBlue
span
border-radius: 50px
background-color: $douvBlue
background-image: none
&:before
margin: 0
&.cooling
&:before
background-position: 11px -82px
&.events
&:before
background-position: -35px -81px
&.mobility
&:before
background-position: -82px -81px
&.transportservice
&:before
background-position: -128px -81px
&.extra
margin-top: 30px
color: white
font-size: 16px
letter-spacing: 0.5px
a
color: white
.menu-cat
width: column(7,12)
&:after
content: ''
position: absolute
left: column(2.5,9)
top: 0
z-index: 2
width: column(4.5,8)
height: 0
padding-left: column(0.5,8)
transition: height 0.3s
background: $douvBlue url('/img/bg_repeat.png') repeat
-webkit-box-shadow: inset 0 35px 35px -20px rgba(0,0,0,0.35)
-moz-box-shadow: inset 0 35px 35px -20px rgba(0,0,0,0.35)
box-shadow: inset 0 35px 35px -20px rgba(0,0,0,0.35)
h3.aanbod
display: block
font-weight: normal
margin: 0
padding-bottom: 5px
position: relative
z-index: 12
text-decoration: none
border-bottom: solid 1px $douvBlue
width: column(2.5,9)
color: #CED5D3
&:after
content: ''
display: block
position: absolute
width: 100%
left: 100%
height: 0.25em
border-bottom: solid 1px white
ul
li
cursor: pointer
span
background-image: none
display: block
width: 75%
height: 55px
position: absolute
left: -60px
margin-top: 11px
&:before
content: ''
display: block
width: 55px
height: 40px
position: relative
background-image: url(/img/svg/icons.svg)
background-repeat: no-repeat
background-size: 174px
margin: 0
top: 6px
-webkit-transition: background-position .2s ease-in
-moz-transition: background-position .2s ease-in
-o-transition: background-position .2s ease-in
transition: background-position .2s ease-in
&.cooling
&:before
background-position: 11px -39px
&.events
&:before
background-position: -35px -38px
&.mobility
&:before
background-position: -82px -38px
&.transportservice
&:before
background-position: -128px -38px
a
padding: 0
&:hover
color: lighten($douvBlue, 10%)
h3.arrow
width: column(2.5,9)
&:after
position: absolute
top: 0
right: 10%
width: 8px
height: 100%
content: ""
background-position: -8px center
background-size: 102px 12.5px
background-repeat: no-repeat
background-image: url("/img/svg/button_arrow_right.svg")
transition: background-position 0.2s
&.active
h4, a
color: $douvYellow
h3.arrow:after
display: none
ul
opacity: 0
display: block
position: absolute
left: column(2.5,9)
top: 0
z-index: 10
width: column(4.5,8)
height: 0
padding-top: 90px
padding-left: column(0.5,8)
transition: height 0.3s, opacity 0.3s
li
a
padding: 0
h4
color: $douvLightBlue
transition: color 0.3s
&:hover
h4
color: $douvYellow
.menu-nav
width: column(4,12)
margin-left: column(1, 12)
font-size: 22px
.home-streamert
padding-top: 50px
width: column(4.6, 12)
max-width: 540px
margin-left: column(1,12)
span.huge-text
font-size: 120px
line-height: 72.36px
font-family: $douvHeaderFont
display: inline-block
span.xxl-text
font-size: 38px
line-height: 41.68px
letter-spacing: 0.19px
text-transform: uppercase
font-family: $douvHeaderFont
display: inline-block
padding-top: 20px
max-width: 300px
p
font-size: 38px
line-height: 41.68px
margin: 0
.button
width: 100%
font-size: 16px
font-weight: bold
margin-top: 50px
max-width: 300px
body.home, body.contact
header
height: 650px
background: $douvDarkBlue url('/img/Header.jpg') 0 0 no-repeat
background-size: cover
background-position: center 30%
+respond-to-width(840)
header
height: 500px
.home-streamert
padding-top: 130px
&.small
.primary-menu
background-color: rgba(0,30,46, 0.95)
background-image: none
body.about
header
height: 425px
body.contact
header
height: 550px
.menu-wrapper
background: $douvBlue95 url('/img/bg_repeat.png') repeat
.home-streamert
margin-left: column(0.5,12)
width: column(4, 12)
h2
font-size: 30px
p
font-size : 18px
line-height : 26px
+respond-to-width(840)
header
height: 350px
.home-streamert
padding-top: 80px
width: 100%
margin-left: 0
html.ie
header
.menu-wrapper
.primary-menu
.menu-right
top: 35%
.button
&.menuToggle
top: 35%
span.email, span.offerte
margin: -18px 0
nav
.menu-cat
ul
li
span
&:before
width: 36px
height: 38px
top: 8px
left: 10px
&.cooling
&:before
background-position: -7px -38px
&.events
&:before
background-position: -48px -37px
&.mobility
&:before
background-position: -90px -37px
&.transportservice
&:before
background-position: -132px -37px
&.active, &:hover
span
&.cooling
&:before
background-position: -7px -78px
&.events
&:before
background-position: -48px -77px
&.mobility
&:before
background-position: -90px -77px
&.transportservice
&:before
background-position: -132px -77px
&.small
.menu-wrapper
.primary-menu
.menu-right
top: 25%
.button
&.menuToggle
top: 25%
+respond-to-width(1350)
header
.menu-wrapper
.primary-menu
nav
.menu-cat
&:after
left: column(3.5, 9)
h3.aanbod
width: column(3.5, 9)
ul
ul
left: column(3.5, 9)
+respond-to-width(840)
header
&.small
.menu-wrapper,
.menu-substitute
height: 0
.primary-menu
display: none
.grid-row
width: 100%
.menu-wrapper
height: 0
.primary-menu
display: none
.home-streamert
padding-top: 80px
padding-left: column(1, 12)
padding-right: column(1, 12)
width: 100%
margin: 0 auto
max-width: 100%
//+flex(center, center)
//flex-direction: column
.streamert-content
max-width: 300px
span.huge-text,
span.xxl-text
width: 100%
body.about
header
height: 60px