159 lines
2.9 KiB
Sass
159 lines
2.9 KiB
Sass
#logo
|
|
position: absolute
|
|
@media (min-width: 960px)
|
|
position: fixed
|
|
|
|
width: calc(1rem + 9vw)
|
|
left: 10px
|
|
top: -0.5rem
|
|
|
|
.nav
|
|
position: absolute
|
|
top: 0
|
|
width: 100%
|
|
transition: height 0.4s cubic-bezier(0.52, 0.16, 0.24, 1)
|
|
z-index: 999
|
|
|
|
&_main_item
|
|
display: none !important
|
|
@media (min-width: 960px)
|
|
display: inline !important
|
|
|
|
&_bar
|
|
width: 100%
|
|
position: relative
|
|
display: block
|
|
@media (min-width: 960px)
|
|
display: none
|
|
|
|
&-wrap
|
|
width: 1.8rem
|
|
height: 1.8rem
|
|
display: grid
|
|
align-items: center
|
|
cursor: pointer
|
|
z-index: 99
|
|
min-height: 1.5rem
|
|
|
|
&,
|
|
&::after,
|
|
&::before
|
|
padding: 1px
|
|
border-radius: 2px
|
|
background-color: var(--text)
|
|
|
|
&::after,
|
|
&::before
|
|
content: ""
|
|
position: absolute
|
|
width: 1.2rem
|
|
|
|
&::before
|
|
top: -0.5rem
|
|
|
|
&::after
|
|
top: 0.5rem
|
|
right: 0
|
|
|
|
|
|
&-body
|
|
box-shadow: 0 1.5rem 6rem rgba(0,0,0,0.17)
|
|
position: fixed
|
|
right: 10px
|
|
z-index: 1
|
|
top: 100%
|
|
opacity: 0
|
|
overflow: hidden
|
|
transition:top 0.33s linear
|
|
background: transparent
|
|
background-color: var(--accent)
|
|
width: 16rem
|
|
padding: 100px 0
|
|
min-height: 100vh
|
|
z-index: 1
|
|
&:hover
|
|
box-shadow: 0 1.5rem 6rem rgba(0,0,0,0.27)
|
|
|
|
a
|
|
display: block
|
|
padding: 12.5px 25px
|
|
margin-bottom: 2px
|
|
border-bottom: 1px solid var(--accent)
|
|
transition:color 0.25s ease-in-out
|
|
&:hover
|
|
color: var(--theme)
|
|
|
|
|
|
|
|
&-brand
|
|
font-family: 'Signika', sans-serif
|
|
font-size: 1.5em !important
|
|
padding-top: 0 !important
|
|
padding-bottom: 0 !important
|
|
color: var(--title) !important
|
|
|
|
&-close
|
|
display: flex
|
|
justify-content: flex-start
|
|
align-items: center
|
|
position: absolute
|
|
top: 0
|
|
right: 0
|
|
width: 100%
|
|
cursor:pointer
|
|
padding: 25px
|
|
&:after,
|
|
&:before
|
|
content: ''
|
|
width: 18px
|
|
border-radius 50%
|
|
padding: 1.5px
|
|
background: var(--text)
|
|
opacity: 0.7
|
|
position: relative
|
|
|
|
&:before
|
|
transform: rotate(20deg) translateX(1.5px)
|
|
|
|
&:after
|
|
transform: rotate(-20deg) translateX(-1.5px)
|
|
|
|
|
|
&-drop
|
|
cursor: pointer
|
|
top: 0
|
|
bottom: 0
|
|
z-index: 1000
|
|
|
|
&-exit
|
|
animation: hideMenu 0.5s cubic-bezier(0.52, 0.16, 0.24, 1) forwards
|
|
|
|
&-menu
|
|
position: relative
|
|
padding: 10px 25px 10px 0
|
|
padding-left: 15vw
|
|
@media (min-width: 1150px)
|
|
padding-left: 3vw
|
|
|
|
height: 100%
|
|
max-width: 1024px
|
|
margin: 0 auto
|
|
display: flex
|
|
align-items: center
|
|
justify-content: space-between
|
|
a
|
|
color: inherit
|
|
display: block
|
|
font-size: 105%
|
|
|
|
&-pop
|
|
position: fixed
|
|
width: 100vw
|
|
background: rgba(0,0,0,0.05)
|
|
|
|
&-open
|
|
animation: showMenu 0.5s cubic-bezier(0.52, 0.16, 0.24, 1) forwards
|
|
|
|
&_item
|
|
text-transform: capitalize
|
|
|