Responsive breadcrumbs for ZURB Foundation 5

breadcrumbs.css.scss

.breadcrumbs {
  @include crumb-container;
  background: none;
  border: 0;
  margin: 0;
  padding: rem-calc(3);

  li {
    display: none;

    &:last-child {
      @include crumbs;
      display: block;
      font-size: rem-calc(13);

      &:before {
        content: "\00AB" !important;
        margin: 0;
        position: relative;
        top: rem-calc(-1);
      }
    }

    @media #{$medium-up} {
      @include crumbs;
      display: block;

      &:before {
        content: "";
        margin: 0;
      }

      &:after {
        content: "#{$crumb-slash}";
        color: $crumb-slash-color;
        margin: 0 $crumb-side-padding;
        position: relative;
        top: rem-calc(1);
      }

      &:last-child {
        font-size: $crumb-font-size;

        &:before {
          content: "" !important;
          margin: 0;
        }
      }
    }
  }
}