// =========================================================================== // 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; } }