File: D:/HostingSpaces/SBogers110/franciscaansebeweging.nl/wwwroot/css/partials/_subMenu.sass
/*==========================================================================
Header submenu
========================================================================== */
.sub-menu
position: relative
vertical-align: bottom
min-width: 250px
z-index: 2
background: $bluePurple2
background: linear-gradient(-45deg, $bluePurpleGradient23)
border-radius: 0 10px 0 0
padding: 45px 18px 55px
.return-to-overview
+flex(flex-start, center)
padding-left: 25px
margin-bottom: 60px
color: white
text-decoration: none
opacity: 0.6
line-height: 1
transition: opacity 0.3s
+respond-to-width(1050)
font-size: 0.9rem
span
+flex(center, center)
margin-right: 10px
width: 22px
height: 22px
border-radius: 5px
border: 1px solid white
&:before
content: ''
display: inline-block
+sprite(-33px -75px, 12px, 12px)
&:hover
opacity: 1
ul
list-style: none
padding: 0
margin: 0
li
border-bottom: 1px solid rgba(white, 0.25)
a
position: relative
display: block
text-decoration: none
color: white
opacity: 0.75
padding: 12px 25px
&:before
content: ''
position: absolute
z-index: -1
left: 0
top: 0
height: 100%
width: 0
opacity: 0
background-color: $darkerPurple
transition: all 0.3s
&:after
content: ''
position: absolute
right: 15px
top: 26px
+sprite(-33px -90px, 5px, 8px)
+respond-to-width(1080)
top: 23px
&:hover
&:before
width: 100%
opacity: 0.15
&:first-of-type
border-radius: 10px 10px 0 0
&.active
background-color: rgba(white, 0.07)
a
opacity: 1
font-weight: bold()
&:before
display: none
&.post-detail, &.travel-detail
padding: 30px 30px 25px 20px
//padding-bottom: 45px
width: auto
//padding-right: 30px
.return-to-overview
margin-bottom: 0
padding-left: 10px
+respond-to-width(750)
width: 100%
border-radius: 0
display: none
&.post-detail, &.travel-detail
width: 100%
.mobile-submenu
display: none
+respond-to-width(750)
display: block
.travel-menu, .sub-menu
display: block