lestoitsduval/assets/css/nav.sass

135 lines
2.4 KiB
Sass

.nav
// position: fixed
z-index: 10
top: 0
background-color: white
width: 100%
#menu_checkbox
display: none
.icon-menu
display: none
background-color: white
border-radius: 1.5rem
width: 3rem
height: 3rem
position: fixed
top: 1rem
right: 1rem
box-sizing: border-box
box-shadow: 0px 3px 5px -1px rgba(0,0,0,0.2),0px 6px 10px 0px rgba(0,0,0,0.14),0px 1px 18px 0px rgba(0,0,0,0.12)
border: 0
padding: 0
margin: 0
.icon
position: absolute
transition: all 0.1s ease-in-out
left: .75rem
right: .75rem
width: 1.5rem
height: 4px
top: calc(3rem / 2 - 2px)
background-color: $color-primary
&::before, &::after
position: absolute
content: ""
background-color: $color-primary
height: 4px
width: 100%
display: block
&::before
top: -.5rem
&::after
top: .5rem
nav
left: 0
right: 0
margin-bottom: 4rem
ul
list-style: none
margin: 0
padding: 0
li
display: inline
border-right: 1px solid $color-primary
border-bottom: 1px solid $color-primary
&:last-child
border-right: none
&.active
background: $color-primary
color: white
a
color: white
text-decoration-color: white
a
display: inline-block
padding: 1rem
font-size: 1rem
font-weight: bold
@media screen and (max-width: 839px)
.nav
position: absolute
.grid
flex-direction: column
.cell
flex: 0 0 auto
nav
display: none
top: 0
left: 0
right: 0
bottom: 0
position: relative
background-color: white
z-index: 500
ul
li
border: 0
text-align: center
a
width: 100%
box-sizing: border-box
.icon-menu
display: block
z-index: 501
#menu_checkbox:checked
#menu_checkbox:checked ~ nav
position: fixed
display: block
height: 100vh
.grid
justify-content: center
height: 100%
#menu_checkbox:checked ~ .icon-menu
.icon
width: 60%
transform: rotate(45deg) translate(5px, 7px)
top: 14px
&::before
display: none
&::after
transform: rotate(-90deg)translate(-5px, 12px)
transform-origin: 5%