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: 0;
      bottom: 0;
    }

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

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

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



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

@mixin navigation-small-tablet {
  .navigation {
    li { border-bottom: 0; }

    ul {
      margin: {
        right: -$gutter-width;
         left: -$gutter-width;
      }

      li { display: inline-block; }
    }

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