Lungo.js/src/stylesheets/theme/theme.layout.nav.styl

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

nav
  header > &
    & a:not(.button)
      color: THEME
    & .button, button
      color: lighten(COLOR, 20%)
    & a, button
      &:active
        color: WHITE
        text-shadow: 0 0 1em WHITE

  section > footer > & > a, &[data-control=groupbar] > a
    color: NAV_LINK
    & .icon
      text-shadow: 0 1px darken(COLOR, 25%)
    & abbr
      font-weight: 600
    &.active
      transition box-shadow TRANSITION_time TRANSITION_easing
      color: NAV_LINK_ACTIVE
      background-color: lighten(COLOR, 5%)

  section > &[data-control=groupbar] > a.active
      box-shadow inset 0 -2px 0 THEME

  section > footer > & > a.active
      box-shadow inset 0 2px THEME

  &[data-control=menu]
    background-color: rgba(0,0,0,0.8)
    box-shadow 0 2px 0 SHADOW
    &.icons
      & > a
        color: lighten(COLOR, 40%)
        &:active > .icon
          text-shadow: 0 0 2em #fff
        & > .icon
          color: #fff
    &:not(.icons)
      & > a
        color: #fff
        & > .icon
          color: lighten(COLOR, 40%)
        &:active, &:hover
          background-color: rgba(255,255,255,0.2)