spaCy/website/assets/css/_components/_navigation.sass

62 lines
1.3 KiB
Sass

//- 💫 CSS > COMPONENTS > NAVIGATION
.c-nav
@include position(fixed, top, left, 0, 0)
@include size(100%, $nav-height)
background: $color-back
color: $color-theme
align-items: center
display: flex
justify-content: space-between
flex-flow: row nowrap
padding: 0 0 0 1rem
z-index: 30
width: 100%
box-shadow: $box-shadow
&.is-fixed
animation: slideInDown 0.5s ease-in-out
position: fixed
.c-nav__menu
@include size(100%)
display: flex
flex-flow: row nowrap
border-color: inherit
flex: 1
@include breakpoint(max, sm)
@include scroll-shadow-base($color-front)
overflow-x: auto
overflow-y: hidden
-webkit-overflow-scrolling: touch
@include breakpoint(min, md)
justify-content: flex-end
.c-nav__menu__item
display: flex
align-items: center
height: 100%
text-transform: uppercase
font-family: $font-secondary
font-size: 1.6rem
font-weight: bold
color: $color-theme
&:not(:first-child)
margin-left: 2em
&:last-child
@include scroll-shadow-cover(right, $color-back)
padding-right: 2rem
&:first-child
@include scroll-shadow-cover(left, $color-back)
padding-left: 2rem
&.is-active
color: $color-dark
pointer-events: none