sass-site/source/assets/stylesheets/regions/_navigation.scss

// ===========================================================================
// NAVIGATION



$navigation-background-color: $pale-sky    !default;
$navigation-text-color:       $iron        !default;
$navigation-border-color:     $regent-grey !default;



.navigation {
  padding: {
       top: 1em;
    bottom: 1em;
  }
  background: $navigation-background-color;
  color: $navigation-text-color;
  @include text-shadow-dark;

  a {
    @extend %caps;
    border: 0;
    @include link(lighten($navigation-text-color, 5%),
                  lighten($navigation-text-color, 15%),
                  lighten($navigation-text-color, 25%));
  }
}



// ---------------------------------------------------------------------------
// iPhone

@mixin navigation-iPhone {
  .navigation {
    display: none;
    padding: {
         top: .5em;
      bottom: .5em;
    }

    li {
      border-bottom: 1px solid $navigation-border-color;

      &:last-child { border: 0; }
    }

    a {
      @include tappable;
      display: block;
    }
  }
}



// ---------------------------------------------------------------------------
// SMALL TABLET

@mixin navigation-small-tablet {
  .navigation {
    padding: {
      top:    0;
      bottom: 0;
    }

    li { border-bottom: 0; }

    ul {
      @extend %horizontal-list-inline-small-tablet;
      margin: {
        right: -$gutter-width;
        left:  -$gutter-width;
      }
      white-space: nowrap;
    }

    a {
      padding: {
        right: $gutter-width;
         left: $gutter-width;
      }
    }
  }
}



// ---------------------------------------------------------------------------
// iPad

@mixin navigation-iPad {
  .navigation { display: block; }
}