Lungo2.0.js/src/stylesheets/lungo.layout.nav.styl

/**
 * Stylesheet
 *
 * @namespace Lungo.Layout
 * @class Nav
 *
 * @author Javier Jimenez Villar <javi@tapquo.com> || @soyjavi
 */

@import "constants.styl"

HEADER_GROUPBAR_HEIGHT = 32px

nav
  &.groupbar, footer &
    display-box()
    box-pack(justify)
    width: 100%
    & > a
      box-flex(1)

  header &
    & a
      padding: 0px 11px !important
      z-index: 1000
      float: left

    & .button, button
      margin: 6px 2px 0 2px
      line-height: 31px !important
      & > .icon
        font-size: 1.5em
        position: relative
        top: 3px
        height: SIZE = 20px
        width: SIZE
        line-height: SIZE
        display: inline-block


    &.right a.button, .right button
      margin-right: 6px
    &:not(.right) a.button, :not(.right) button
      margin-left: 6px

    & a:not(.button)
      height: HEADER_HEIGHT
      & > .icon
        font-size: 1.8em

    & .tag
      position: relative
      top:  -12px
      left: -12px
      margin-right: -20px

    & abbr
      font-size: FONT_SIZE_SMALL
      font-weight: 700

    & .icon ~ abbr
      margin-left: 4px
      float: right

    & .loading
      margin-top: .5em
      font-size: 1.6em
      & + .icon
        display: none


  &.groupbar
    height: HEADER_GROUPBAR_HEIGHT
    width: 100%
    z-index: 2
    line-height: HEADER_GROUPBAR_HEIGHT
    & > a
      padding: 0px
      margin: 0px
      height: HEADER_GROUPBAR_HEIGHT !important
      display: block
      text-align: center

      & .icon
          font-size: 1.0em
          margin-right: 2px

      & .tag
          position: relative
          top: -1px
          left: 2px


  footer &
    & a
      text-align: center
      display: block
      padding: 0
      height:  HEADER_HEIGHT

    & .icon
      font-size: 2.0em !important
      line-height: HEADER_HEIGHT
      width: 32px
      display: inline-block

    & .tag
      top:  -42px
      left: 4px
      & .loading
        top: 0
        font-size: 1.4em

    abbr
      display: none

    & .tag
      position: relative
      top:  -12px
      left: -12px
      margin-right: -20px

    &.with-labels
      & .icon
        line-height: 36px
      & abbr
        display: block !important
        margin-top: -8px
        z-index: 1

        font-size: 11px
        line-height: 14px

        overflow: hidden
        white-space: nowrap
        text-overflow: ellipsis


  /* ========================================================================= */
  /* ================================= MENU ================================== */
  /* ========================================================================= */
  &[data-control=menu]
    position: absolute
    left: 0px
    top: HEADER_HEIGHT
    visibility: hidden
    z-index: 2
    width: inherit
    font-size: FONT_SIZE_BIG
    text-align: center

    transform translateY(-120%)
    transition-property transform
    transition-duration TRANSITION_TIME
    transition-timing-function DEFAULT_TRANSITION
    backface-visibility hidden

    &.show
      visibility: visible
      transform translateY(0%)

    & > a
      display: block
      position: relative
      padding: 14px 10px
      text-shadow 0 1px 0 #111

      &:active
        border-color: transparent

      & > .icon
        position: absolute
        left: 0.5em
        font-size: 1.5em