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: WHITE
    &.on-right
      & a, button
        color: lighten(THEME, 50%)
    & a, button
      text-shadow: 0 1px darken(THEME, 10%)

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

  header > &
    & a, button
      text-shadow: 0 1px darken(THEME, 10%)
      transition text-shadow TRANSITION_time TRANSITION_easing
      &:active, &.active
        color: WHITE
        text-shadow: 0 0 0.5em WHITE

  section > footer > & > a, &[data-control=groupbar] > a
    color: NAV_LINK
    transition box-shadow TRANSITION_time TRANSITION_easing
    & .icon
      transition color TRANSITION_time TRANSITION_easing
    &.active
      color: NAV_LINK_ACTIVE

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

  section > footer > & > a.active
      box-shadow inset 0 3px 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)