@import "../../../variables"

.top-nav
  +flex(space-between)
  +transition(all .5s ease-out)
  +opacity(0)
  position: fixed
  top: 0
  left: 0
  right: 0
  background-color: $borders-bg
  box-shadow: 0 2px 2px 0 $borders-bs-1, 0 0 0 1px $borders-bs-2
  width: 100%
  height: 60px
  z-index: z('bg')

  a
    +transition(all .25s ease-out)
    color: $borders
    text-decoration: none

    &:hover,
    &:active
      color: $borders-hv

  .top-nav-title
    padding-left: 60px

    a
      display: inline-block
      background: url("/assets/img/logo.png") center center / contain no-repeat
      width: 68px
      height: 30px

  .top-nav-menu
    a
      display: inline-block
      color: $borders-menu
      padding: 3px 10px

      &.active
        color: $borders-menu-hv

  .top-nav-social
    padding-right: 60px

    a
      margin-left: 15px

  &.show
    +opacity(1)

@import "../../../variables"

.top-nav
  +flex(space-between)
  +opacity(0)
  +transition(all .5s ease-out)
  position: fixed
  top: 0
  left: 0
  right: 0
  background-color: $top-nav-bg
  box-shadow: 0 2px 2px 0 $top-nav-bs-1, 0 0 0 1px $top-nav-bs-2
  width: 100%
  height: 60px
  z-index: z('bg')

  a
    +transition(all .25s ease-out)
    color: $top-nav
    text-decoration: none

    &:hover,
    &:active
      color: $top-nav-hv

  .top-nav-title
    padding-left: 60px

    a
      display: inline-block
      background: url("/assets/img/logo.png") center center / contain no-repeat
      width: 68px
      height: 30px

  .top-nav-menu
    a
      display: inline-block
      color: $top-nav-menu
      padding: 3px 10px

      &.active
        color: $top-nav-menu-hv

  .top-nav-social
    padding-right: 60px

    a
      margin-left: 15px

  &.show
    +opacity(1)

Edit top nav color variables
Edit top nav color variables
