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

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

nav
  section header > &
    &:not(.on-right)
      & a, button
        color: darken(THEME, 55%)
    &.on-right
      & a, button
        color: lighten(THEME, 95%)

  aside header > &
    & a, button
      color: lighten(ASIDE, 25%)
      text-shadow: 0 1px darken(ASIDE, 10%)

  header > &
    a, button
      &:active, &.active
        color: WHITE !important
        text-shadow: 0 0 1em WHITE

  section > footer > & > a, &[data-control=groupbar] > a
    color: NAV_LINK
    transition text-shadow TRANSITION_time TRANSITION_easing
    &.active
      color: NAV_LINK_ACTIVE
      text-shadow: 0 0 1em NAV_LINK

  &[data-control=menu]
    background-color: rgba(0,0,0,0.9)
    box-shadow 0 2px 0 SHADOW
    &.icons
      & > a
        & > .icon
          color: NAV_LINK_ACTIVE
        & > abbr
          color: NAV_LINK
        &:active, &:hover
          & > .icon
            text-shadow: 0 0 2em NAV_LINK_ACTIVE

    &:not(.icons)
      & > a
        & > .icon
          color: NAV_LINK
        & > abbr
          color: NAV_LINK_ACTIVE
        &:active, &:hover
          background-color: rgba(255,255,255,0.2)
          & > .icon
            color: THEME