Contents

$bourbon-nav-background-color: #5b5e63;

nav.bourbon {
  @include clearfix;
  background-color: $bourbon-nav-background-color;
  padding: 0 2em 0 1em;
  text-rendering: optimizeLegibility;

  @include media(max-width 32em) {
    padding: 0;
  };

  ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    text-align: center;

    @include media(56.25em) {
      float: left;
      text-align: left;
    };
  }

  li {
    display: inline-block;
  }

  a {
    background-position: 1em center;
    background-repeat: no-repeat;
    color: #fff;
    display: inline-block;
    font-weight: bold;
    padding: 1em 1em 1em 3em;
    text-decoration: none;

    @include media(max-width 32em) {
      padding: 0.75em 0.5em;
      text-align: center;
    };

    @include media(max-width 56.25em) {
      display: block;
    };

    &:focus,
    &:hover {
      background-color: darken($bourbon-nav-background-color, 10);
      color: #fff;
    }

    &.current {
      background-color: darken($bourbon-nav-background-color, 5);
    }

    $sites: bourbon, neat, bitters, refills;

    @each $site in $sites {
      &.#{$site} {
        background-image: url("/images/bourbon-nav/#{$site}.png");

        @media only screen and (min-resolution: 125dpi) {
          background-image: url("/images/bourbon-nav/#{$site}@2x.png");
          background-size: 20%;
        }

        @include media(max-width 32em) {
          background-image: none;
        };
      }
    }
  }

  h1 {
    color: rgba(#fff, 0.6);
    float: right;
    font-size: 1em;
    margin: 0;

    @include media(max-width 56.25em) {
      display: none;
    };

    a {
      padding: 1em 0;
      text-decoration: none;

      &:hover {
        background-color: transparent;
      }
    }
  }
}

Version data entries

1 entries across 1 versions & 1 rubygems

Version	Path
refills-0.2.0	source/stylesheets/_bourbon-nav.scss