codecombat/app/styles/common/top_nav.sass

@import "app/styles/bootstrap/variables"
@import "app/styles/mixins"

// This is still very blocky. Browser reflows? Investigate why.
.open > .dropdown-menu
  animation-name: fadeAnimation
  animation-duration: .7s
  animation-iteration-count: 1
  animation-timing-function: ease
  animation-fill-mode: forwards
  -webkit-animation-name: fadeAnimation
  -webkit-animation-duration: .7s
  -webkit-animation-iteration-count: 1
  -webkit-animation-timing-function: ease
  -webkit-animation-fill-mode: backwards
  -moz-animation-name: fadeAnimation
  -moz-animation-duration: .7s
  -moz-animation-iteration-count: 1
  -moz-animation-timing-function: ease
  -moz-animation-fill-mode: forwards

@keyframes fadeAnimation
  from
    opacity: 0
    top: 120%
  to
    opacity: 1
    top: 100%

@-webkit-keyframes fadeAnimation
  from
    opacity: 0
    top: 120%
  to
    opacity: 1
    top: 100%

a.disabled
  color: #5b5855
  text-decoration: none
  cursor: default

#top-nav
  a.navbar-brand
    padding: 4px 20px 0px 20px
    margin-left: -20px

  .navbar-nav
    float: right

  .navbuttontext, .fancy-select .trigger
    font-size: 20px
    font-weight: 400
    letter-spacing: 1px

  .navbuttontext-account
    display: inline-block
    padding: 0 5px 0 0
    margin: 0 5px 0 0
    height: 18px

  .account-settings-image
    width: 18px
    height: 18px
    margin-right: 5px

  .glyphicon-user
    font-size: 16px
    margin-right: 5px

  .dropdown
    .dropdown-menu
      left: auto
      width: 280px
      padding: 0px
      border-radius: 0px
      font-family: Bangers

      > .user-dropdown-header
        position: relative
        background: #E4CF8C
        height: 160px
        padding: 10px
        text-align: center
        color: black
        border-bottom: #32281e 1px solid
        > a:hover
          background-color: transparent
        img
          border: #e3be7a 8px solid
          height: 98px // Includes the border
          &:hover
            box-shadow: 0 0 20px #e3be7a
        > h3
          margin-top: 10px
          text-shadow: 2px 2px 3px white
          color: #31281E
        .user-level
          position: absolute
          top: 73px
          right: 86px
          color: gold
          text-shadow: 1px 1px black, -1px -1px 0 black, 1px -1px 0 black, -1px 1px 0 black

      .user-dropdown-body
        color: black
        padding: 15px
        letter-spacing: 1px
        font: 15px 'Helvetica Neue', Helvetica, Arial, sans-serif
        +clearfix()

      .user-dropdown-footer
        padding: 10px
        margin-left: 0px
        font-size: 14px
        +clearfix()

        .btn-flat
          border: #ddd 1px solid
          border-radius: 0px
          margin: 0px

  .nav.navbar-link-text > li > a
    font-weight: normal
    font-size: 25px
    letter-spacing: 2px
    color: $white
    &:hover
      color: #f8e413

  .navbar-link-text > li > a:hover
    background: darken($body-bg, 3%)

  .btn, .btn-group, .fancy-select
    margin-top: 13px

  .nav-tabs > .active > a, .nav-tabs > .active > a:hover, .nav-tabs > .active > a:focus
    background-color: #eee

  .nav-tabs > li
    cursor: pointer

  font-size: 25px
  a:not(.btn)
    line-height: 25px

  .btn
    font-size: 20px
    padding: 4px 12px

  .btn, .fancy-select
    float: right
    margin-left: 10px
    line-height: 20px

  select
    opacity: 0

  .fancy-select
    .trigger
      padding: 5px 25px 3px 10px
      width: auto
      &:after
        top: 13px
      max-width: 140px

  div.fancy-select
    text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25)
    div.trigger
      background-color: #9d8f5a
      background-image: linear-gradient(to bottom, #a4955e, #948754)
      background-repeat: repeat-x
      border: 1px solid #cccccc
      border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25)
      box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05)
      color: white
      &:after
        border-top-color: white
      &.open
        background-color: #8B7F51
        color: #ebebeb
        &:after
          border-top-color: #ebebeb
    ul.options
      max-height: 415px
      background-color: #9d8f5a
      right: 0
      left: auto
      overflow-x: hidden
      &.open
        top: 36px
      li
        color: #ebebeb
        padding: 8px 20px

  .navbar-toggle
    display: none

@media only screen and (max-width: 768px)
  #top-nav
    display: inline
    button.navbar-toggle
      background: #483a2d
      border: 2px solid #2f261d
      display: inline-block
  
      span.icon-bar
        background: #F9E612

    a.navbar-brand
      padding: 4px 20px 0px 20px
      margin-left: 0

    .navbar-nav
      float: none
      margin: 0 0 20px 0
      overflow: visible

      .dropdown-menu
        background-color: white
        position: absolute

      .btn, .fancy-select
        margin-bottom: 10px

      .btn, .fancy-select
        float: none

      .fancy-select .options
        right: auto