| 123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133 |
- // Components
- .nav-toggle
- @extend .hamburger
- // Responsiveness
- +tablet
- display: none
- .nav-item
- align-items: center
- display: flex
- justify-content: center
- padding: 10px
- a
- flex-grow: 1
- img
- max-height: 24px
- .button + .button
- margin-left: 10px
- .tag
- &:first-child
- margin-right: 5px
- &:last-child
- margin-left: 5px
- // Responsiveness
- +mobile
- justify-content: flex-start
- .nav-item a,
- a.nav-item
- color: $text
- &:hover
- color: $link-hover
- // Modifiers
- &.is-active
- color: $link-active
- &.is-tab
- border-bottom: 1px solid transparent
- border-top: 1px solid transparent
- padding-left: 12px
- padding-right: 12px
- &:hover
- border-bottom: 1px solid $link
- border-top: 1px solid transparent
- &.is-active
- border-bottom: 3px solid $link
- border-top: 3px solid transparent
- color: $link
- // Containers
- .nav-menu
- // Responsiveness
- +mobile
- background-color: $white
- box-shadow: 0 4px 7px rgba($black, 0.1)
- left: 0
- display: none
- right: 0
- top: 100%
- position: absolute
- .nav-item
- border-top: 1px solid rgba($border, 0.5)
- padding: 10px
- &.is-active
- display: block
- +tablet-only
- padding-right: 20px
- .nav-left
- align-items: stretch
- display: flex
- flex-basis: 0
- flex-grow: 1
- justify-content: flex-start
- overflow: hidden
- overflow-x: auto
- white-space: nowrap
- .nav-center
- align-items: stretch
- display: flex
- justify-content: center
- margin-left: auto
- margin-right: auto
- .nav-right
- // Responsiveness
- +tablet
- align-items: stretch
- display: flex
- flex-basis: 0
- flex-grow: 1
- justify-content: flex-end
- // Main container
- .nav
- align-items: stretch
- background-color: $white
- display: flex
- min-height: $nav-height
- position: relative
- text-align: center
- z-index: 2
- & > .container
- align-items: stretch
- display: flex
- min-height: $nav-height
- width: 100%
- & > .nav-left
- & > .nav-item:first-child:not(.is-tab)
- padding-left: 0
- & > .nav-right
- & > .nav-item:last-child:not(.is-tab)
- padding-right: 0
- .container > &
- & > .nav-left
- & > .nav-item:first-child:not(.is-tab)
- padding-left: 0
- & > .nav-right
- & > .nav-item:last-child:not(.is-tab)
- padding-right: 0
- // Modifiers
- &.has-shadow
- box-shadow: 0 2px 3px rgba($black, 0.1)
- // Responsiveness
- +touch
- & > .container,
- .container > &
- & > .nav-left
- & > .nav-item.is-brand:first-child
- padding-left: 20px
|
