File: D:/HostingSpaces/Lacom/lacom.nl/resources/assets/sass/site/partials/_navigation.sass
//Colors used in Mobile Menu
$listColor: $lightGrey
$listHoverColor: rgba($lightGrey, 0.5)
$listActiveColor: white
$barColor: $blue
$barMenuColor: white
$menuBackground: $darkGrey
$shaderBackground: white
$shaderOpacity: 0.8
.preventScroll
+respond-to-width(700)
overflow: hidden
overflow-y: scroll
position: fixed
width: 100%
#navigation
position: fixed
z-index: -1
left: 0
top: 0
overflow: hidden
display: none
height: 100vh
width: 100%
pointer-events: none
opacity: 0
transition: opacity 0.5s ease-in-out, z-index 0s ease 0.5s
.shader
width: 100%
height: 100%
position: absolute
z-index: 2
left: 0
top: 0
background-color: $shaderBackground
opacity: $shaderOpacity
transition-delay: 0.4s
.menu
position: absolute
right: 0
top: 0
height: 100%
width: 100%
overflow-x: hidden
pointer-events: all
z-index: 5
.grid-row
position: relative
z-index: 2
pointer-events: none
.background
position: absolute
left: 25%
top: 0
min-height: 100vh
height: 100%
width: 100vw
background-color: $menuBackground
transform: translate3d(25%, 0, 0)
nav
position: relative
width: 75%
min-height: 100vh
margin-left: 25%
+flex(flex-start,center)
padding: 80px 0
pointer-events: all
.menu-list
width: 75%
margin-left: column(2, 9)
ul
margin: 0
padding: 0
list-style: none
font-size: 2rem
line-height: 1.2
+respond-to-height(950)
font-size: 1.5rem
+respond-to-width(475)
font-size: 1.2rem
+ ul
margin-top: 24px
li
border-bottom: 2px solid $listColor
transition: border 0.2s
a
position: relative
+flex(flex-start, center)
padding: 4vh 0 2.5vh
cursor: pointer
text-decoration: none
p
margin: 0
color: $listColor
transition: color 0.2s
.icon
+flex(center, center)
margin-right: 20px
width: 30px
height: 30px
opacity: 1
transition: opacity 0.3s
&:before
content: ''
&.home
a .icon:before
+sprite(227px 198px, 25px, 28px)
&.active
a .icon:before
+sprite(200px 167px, 25px, 28px)
.lacom-machinefabriek &
+sprite(227px 167px, 25px, 28px)
.jansen-machining-technology &
+sprite(227px 167px, 25px, 28px)
.job-precision &
+sprite(227px 167px, 25px, 28px)
.lc-hydraulics &
+sprite(227px 167px, 25px, 28px)
.rols-machineonderdelen &
+sprite(253px 167px, 25px, 28px)
.vdb-machinefabriek &
+sprite(280px 167px, 25px, 28px)
&.group, &.about
a .icon:before
+sprite(412px 28px, 26px, 25px)
&.active
a .icon:before
+sprite(412px 1px, 26px, 25px)
.lacom-machinefabriek &
+sprite(412px 55px, 26px, 25px)
.jansen-machining-technology &
+sprite(412px 55px, 26px, 25px)
.job-precision &
+sprite(412px 55px, 26px, 25px)
.lc-hydraulics &
+sprite(412px 55px, 26px, 25px)
.rols-machineonderdelen &
+sprite(412px 108px, 26px, 25px)
.vdb-machinefabriek &
+sprite(412px 134px, 26px, 25px)
&.specialisms
a .icon:before
+sprite(355px 25px, 27px, 22px)
&.active
a .icon:before
+sprite(355px 1px, 27px, 22px)
.lacom-machinefabriek &
+sprite(355px 48px, 27px, 22px)
.jansen-machining-technology &
+sprite(355px 48px, 27px, 22px)
.job-precision &
+sprite(355px 48px, 27px, 22px)
.lc-hydraulics &
+sprite(355px 48px, 27px, 22px)
.rols-machineonderdelen &
+sprite(355px 95px, 27px, 22px)
.vdb-machinefabriek &
+sprite(355px 118px, 27px, 22px)
&.segments
a .icon:before
+sprite(385px 28px, 25px, 25px)
&.active
a .icon:before
+sprite(385px 1px, 25px, 25px)
.lacom-machinefabriek &
+sprite(385px 55px, 25px, 25px)
.jansen-machining-technology &
+sprite(385px 55px, 25px, 25px)
.job-precision &
+sprite(385px 55px, 25px, 25px)
.lc-hydraulics &
+sprite(385px 55px, 25px, 25px)
.rols-machineonderdelen &
+sprite(385px 108px, 25px, 25px)
.vdb-machinefabriek &
+sprite(385px 134px, 25px, 25px)
&.machine_park
a .icon:before
+sprite(278px 229px, 25px, 25px)
&.active
a .icon:before
+sprite(254px 200px, 25px, 25px)
.lacom-machinefabriek &
+sprite(280px 200px, 25px, 25px)
.jansen-machining-technology &
+sprite(280px 200px, 25px, 25px)
.job-precision &
+sprite(280px 200px, 25px, 25px)
.lc-hydraulics &
+sprite(280px 200px, 25px, 25px)
.rols-machineonderdelen &
+sprite(200px 229px, 25px, 25px)
.vdb-machinefabriek &
+sprite(226px 229px, 25px, 25px)
&.vacancies
a .icon:before
+sprite(310px 255px, 25px, 25px)
&.active
a .icon:before
+sprite(310px 124px, 25px, 26px)
.lacom-machinefabriek &
+sprite(310px 150px, 25px, 26px)
.jansen-machining-technology &
+sprite(310px 150px, 25px, 26px)
.job-precision &
+sprite(310px 150px, 25px, 26px)
.lc-hydraulics &
+sprite(310px 150px, 25px, 26px)
.rols-machineonderdelen &
+sprite(310px 176px, 25px, 26px)
.vdb-machinefabriek &
+sprite(310px 202px, 25px, 26px)
&.contact
a .icon:before
+sprite(467px 129px, 23px, 29px)
&.active
a .icon:before
+sprite(442px 70px, 23px, 29px)
.lacom-machinefabriek &
+sprite(467px 70px, 23px, 29px)
.jansen-machining-technology &
+sprite(467px 70px, 23px, 29px)
.job-precision &
+sprite(467px 70px, 23px, 29px)
.lc-hydraulics &
+sprite(467px 70px, 23px, 29px)
.rols-machineonderdelen &
+sprite(442px 100px, 23px, 29px)
.vdb-machinefabriek &
+sprite(467px 100px, 23px, 29px)
&:hover
border-color: $listHoverColor
a
p
color: $listHoverColor
&:not(.active)
a
.icon
opacity: 0.5
ul
font-size: 0.85em
&.active
border-color: $listActiveColor
a
p
color: $listActiveColor
&.active
z-index: 900
opacity: 1
transition: opacity 0.5s ease-in-out, z-index 0s
.menu
.background
transform: translate3d(0, 0, 0)
//&.shader-active
// .shader
// pointer-events: all
&.allow-animation
display: block
.shader
transition: all 0.2s
.menu
transition: all 0.3s
transition-timing-function: ease-in-out
.background
transition: transform 0.3s ease-in-out
+respond-to-width(700)
display: block
.menu
.grid-row
width: 100%
margin: 0
max-width: none
.background
left: 0
nav
width: calc(100% - 80px)
margin: 0 auto
.menu-list
width: 100%
margin-left: 0