cremeaux/assets/styles/header.sass

229 lines
4.2 KiB
Sass

// HEADER
.header
height: 40vh
position: relative
&.home
height: 80vh
.hero
height: 80vh
.hero
position: absolute
top: 0
bottom: 0
left: 0
right: 0
z-index: -1
object-fit: cover
width: 100%
height: 40vh
background-color: $orange
$nav-height: 70px
.nav
position: absolute
top: 50px
bottom: 0
left: 0
right: 0
background-color: $vert
height: $nav-height
@media screen and (max-width: $size-md)
top: 30px
height: 50px
.container
display: flex
align-items: center
justify-content: space-between
.logo
$size-border-logo: 20px
position: relative
padding-left: $size-border-logo
z-index: 20
margin-right: 40px
&::after
position: absolute
content: ""
top: -$size-border-logo
bottom: -$size-border-logo
left: 0
right: -$size-border-logo
background-color: white
z-index: 10
a
display: block
img
position: relative
height: $nav-height
width: 214px
z-index: 30
text-align: center
@media screen and (max-width: $size-md)
height: 50px
width: 154px
#menu
list-style-type: none
display: flex
align-items: center
padding: 0
margin: 0
height: $nav-height
@media screen and (max-width: $size-xl)
font-size: .95rem
.submenu
list-style-type: none
display: none
position: absolute
color: $vert
background: white
top: $nav-height
flex-direction: column
margin: 0
padding: 1rem
width: max-content
box-shadow: rgba(0, 0, 0, 0.15) 0px 3px 3px 0px
a
color: $vert
padding: 10px 0 0
.menu:hover .submenu
display: flex
.menu.withSubmenu:hover::after
content: ''
display: block
position: absolute
left: calc(50% - 7.5px)
top: 100%
width: 0
height: 0
border-top: 15px solid $vert
border-right: 15px solid transparent
border-bottom: 0 solid transparent
border-left: 15px solid transparent
z-index: 10000
.menu
display: flex
align-items: center
position: relative
height: 100%
&:first-child::before
content: none
&::before
content: ""
border-right: 1px white solid
right: 0
height: 20px
a
color: white
display: flex
align-items: center
padding: 0 10px
height: 100%
text-decoration: none
&:hover
transform: scale(1.05)
img
margin: 0 10px 0 0
@media screen and (max-width: $size-lg) and (min-width: $size-md)
display: none
span
white-space: nowrap
@media screen and (max-width: $size-md)
display: none
position: fixed
top: 0
bottom: 0
left: 0
right: 0
height: 100vh
z-index: 100
background: $vert
flex-direction: column
justify-content: center
&:hover
display: inherit
&:hover + .close-button
display: inherit
img
display: inherit
.menu
height: auto
flex-direction: column
margin-bottom: 1rem
.menu.withSubmenu
padding: 10px
.submenu
display: flex
position: relative
top: 0
padding: 0
margin-top: 1rem
border-radius: 6px
&::before
content: ''
display: block
position: absolute
left: calc(50% - 15px)
top: -15px
width: 0
height: 0
border-top: 0 solid transparent
border-right: 15px solid transparent
border-bottom: 15px solid white
border-left: 15px solid transparent
z-index: 10000
a
padding: 2px 10px
.menu:before
content: none
.open-button
display: none
white-space: nowrap
&:focus + #menu
display: inherit
&:focus + #menu + .close-button
display: inherit
@media screen and (max-width: $size-md)
display: inherit
.close-button
white-space: nowrap
display: none
z-index: 200