File: D:/HostingSpaces/SBogers84/zuiderbos.nl/wwwroot/css/partials/_navigation.sass
/*==========================================================================
Navigation / Header
========================================================================== */
header
padding-bottom: 80px
position: relative
.grid-row
overflow: visible
.grid-col
vertical-align: top
// Main logo
.logo
padding-top: 75px
overflow: visible
a
text-decoration: none
span
+sprite(0 0, 94px, 200px)
display: block
p
font-weight: medium()
color: white
strong
font-weight: medium()
color: $blue
.root-link
position: absolute
width: 100%
min-width: 220px
left: 0
bottom: -30px
color: $brightBlue
font-size: 0.7rem
transition: color 0.3s
&:before
content: ''
display: inline-block
margin-right: 10px
+arrowTurquoise
+translate3dRotate(0,0,0, 180deg)
opacity: 0.6
transition: transform 0.3s, opacity 0.3s
&:hover
color: lighten($brightBlue, 10%)
&:before
opacity: 1
+translate3dRotate(-5px,0,0, 180deg)
// College colors
[class^="vso"] &
.logo
span
+sprite(0 -205px, 94px, 200px)
p
color: $lightTurquoise
strong
color: $turquoise
.root-link
color: $turquoise
&:hover
color: lighten($turquoise, 15%)
[class^="services"] &,
[class^="foundation"] &,
[class^="jobs"] &
.logo
span
+sprite(-210px -220px, 94px, 200px)
p, p strong
color: $servicesLighterBlue
.root-link
color: $servicesLighterBlue
&:before
+arrowWhite
&:hover
color: lighten($servicesLighterBlue, 15%)
/* Navigation
========================================================================== */
nav
position: relative
// Tablet Logo
.tablet-logo
position: absolute
left: column(1, 12)
top: 20px
transform: scale(0.6)
transform-origin: 0 0
display: none
a
text-decoration: none
span
+sprite(0 0, 94px, 200px)
display: block
[class^="vso"] &
+sprite(0 -205px, 94px, 200px)
// Office login
.office
+flex(flex-end, center)
height: 75px
text-align: right
font-size: 0.7rem
font-weight: semi-bold()
a
+flex(flex-end, center)
color: $brightBlue
text-decoration: none
transition: color 0.3s
&:hover
color: lighten($brightBlue, 10%)
&:before
content: ''
display: inline-block
margin-right: 10px
+sprite(-95px -155px, 17px, 17px)
// College colors
[class^="vso"] &
color: $turquoise
&:hover
color: lighten($turquoise, 15%)
&:before
+sprite(-131px -155px, 17px, 17px)
[class^="services"] &,
[class^="foundation"] &,
[class^="jobs"] &
color: $servicesLightBlue
&:hover
color: lighten($servicesLightBlue, 5%)
&:before
+sprite(-131px -155px, 17px, 17px)
/* Secondary navigation
===============================*/
.secondary
list-style: none
margin: 0
padding: 0
text-align: right
font-size: 0.8rem
line-height: 1
li
display: inline-block
&:before
content: '•'
display: inline-block
margin: 0 8px
color: $lightPurple
&:first-of-type
&:before
display: none
&:last-of-type
padding-right: 0
a
padding-bottom: 6px
color: $lightPurple
text-decoration: none
transition: color 0.3s
&:hover
a
color: white
&.active
a
border-bottom: 3px solid $yellow
color: white
// College colors
[class^="vso"] &
li
&:before
color: $lightTurquoise
a
color: $lightTurquoise
&:hover
a
color: white
&.active
a
color: white
[class^="services"] &,
[class^="foundation"] &,
[class^="jobs"] &
li
&:before
color: $servicesLighterBlue
a
color: $servicesLighterBlue
&:hover
a
color: white
&.active
a
color: white
/* Primary navigation
===============================*/
.primary
position: relative
list-style: none
height: 60px
width: column(6, 8)
margin: 60px 0 0 auto
border-radius: 30px
overflow: hidden
font-size: 0.9rem
background-color: $darkerBlue
+respond-to-width(1200)
font-size: 0.8rem
+respond-to-width(1000)
font-size: 0.9rem
ul
+flex(space-around, center)
list-style: none
width: calc( 100% - 60px)
height: 100%
margin: 0
padding: 0
li
display: inline-block
height: 100%
line-height: 1
background-color: transparent
flex-grow: 1
transition: all 0.3s
&:first-of-type
padding-left: 10px
a
+flex(center, center)
height: 100%
color: $lightPurple
text-decoration: none
&:hover
background-color: darken($darkerBlue, 5%)
&.active
background-color: $yellow
a
color: white
font-weight: semi-bold()
[class^="vso"] &
background-color: $turquoise
ul
li
background-color: transparent
a
color: white
opacity: 0.8
&:hover
background-color: darken($turquoise, 5%)
&.active
background-color: $yellow
a
opacity: 1
[class^="services"] &,
[class^="foundation"] &,
[class^="jobs"] &
background-color: $servicesBlue
ul
li
background-color: transparent
a
color: white
opacity: 0.8
&:hover
background-color: darken($servicesBlue, 5%)
&.active
background-color: $yellow
a
opacity: 1
+respond-to-width(1500)
width: 100%
/* Search block
===============================*/
#search-form
position: absolute
z-index: 3
top: 0
right: 0
width: 60px
height: 100%
background-color: transparent
transition: background-color 0.5s, width 0.5s
&.show
width: 100%
background-color: $lighterGray
.submit-button
z-index: 4
width: 150px
opacity: 1
#enable-search
width: 150px
&:before
opacity: 0
input
opacity: 1
.close
opacity: 1
right: 175px
transition: right 0.4s ease-in-out 0s, transform 0.4s ease-in-out 0s, opacity 0.4s ease-in-out 0.3s
#enable-search
position: absolute
right: 0
top: 0
z-index: 4
+flex(center, center)
width: 60px
height: 60px
background-color: $blue
cursor: pointer
transition: width 0.3s, background-color 0.3s
border-radius: 0 60px 60px 0
&:before
content: ''
position: relative
left: -3px
display: inline-block
opacity: 1
+sprite(-135px -175px, 16px, 16px)
transition: opacity 0.4s
&:hover
background-color: darken($blue, 10%)
[class^="vso"] &
background-color: $brightTurquoise
&:hover
background-color: darken($brightTurquoise, 12%)
[class^="services"] &,
[class^="foundation"] &,
[class^="jobs"] &
background-color: $blue
&:hover
background-color: darken($blue, 5%)
.close
position: absolute
z-index: 5
right: -15px
top: 23px
display: inline-block
cursor: pointer
+sprite(-154px -180px, 14px, 14px)
opacity: 0
transform-origin: 50% 50%
transition: right 0.4s ease-in-out 0s, transform 0.4s ease-in-out 0s, opacity 0.4s ease-in-out 0s
[class^="vso"] &
+sprite(-168px -180px, 14px, 14px)
&:hover
transform: rotate(180deg)
input
position: absolute
width: calc(100% - 120px)
padding-left: 4%
height: 100%
font-size: 1rem
color: $darkBlue
+appearance(none)
opacity: 0
background-color: transparent
border: none
transition: opacity 0.3s
&:focus
outline: none
&:-webkit-autofill, &:-webkit-autofill:hover, &:-webkit-autofill:focus, &:-webkit-autofill:active
transition: 9999s background-color
-webkit-text-fill-color: $darkBlue
transition-delay: 9999s
+placeholder
color: $darkBlue
&[type=submit]
display: none
.submit-button
position: absolute
right: 0
top: 0
+flex(center, center)
width: 0
height: 60px
opacity: 0
cursor: pointer
color: white
background-color: transparent
font-weight: bold()
transition: opacity 0.3s, background-color 0.3s
&:after
content: ''
+arrowWhite
margin-left: 20px
+translate3d(0,0,0)
transition: transform 0.3s
&:hover
background-color: darken($blue, 10%)
[class^="vso"] &
background-color: darken($brightTurquoise, 12%)
[class^="services"] &,
[class^="foundation"] &,
[class^="jobs"] &
background-color: darken($blue, 5%)
&:after
+translate3d(5px,0,0)
// Special styling for small tablet till 840
+respond-to-width(1000)
.grid-row
+flex(flex-start, flex-start)
+flex-rows
.logo
+order(2)
padding-top: 20px
width: 40%
span
display: none
nav
+order(1)
+flex(flex-start, center)
width: 100% !important
overflow: visible !important
.primary
width: column(11, 12)
.office
height: 100px
.tablet-logo
display: block
.breadcrumb
margin-top: -20px
position: relative
top: 62px
width: 50%
+respond-to-width(840)
display: none