College of Business Style Guide

Pagination 

<ol class="pagination">
    <li class="previous"><a href="#">previous</a></li>
    <li><a href="#">1</a></li>
    <li><a href="#">2</a></li>
    <li><a href="#">3</a></li>
    <li><a href="#">4</a></li>
    <li><a href="#">5</a></li>
    <li class="next"><a href="#">next</a></li>
    <li class="last"><a href="#">last</a></li>
</ol>
 
<ol class="pagination">
    <li class="previous"><a href="#">previous</a></li>
    {% for i in 1..5 %}
        <li><a href="#">{{ i }}</a></li>
    {% endfor %}
    <li class="next"><a href="#">next</a></li>
    <li class="last"><a href="#">last</a></li>
</ol>
 
/* No context defined. */
  • Content: 
    .pagination {
  @include reset-list-nav;
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: center;

  li {
    margin: 0 $space-one-half;
    font-size: 0.9rem;

    @media only screen and (min-width: $break-desktop) {
      margin: 0 $space;
      font-size: 1rem;
    }

    a {
      color: $grey_dark;
    }

    &.previous {
      &::before {
        display: inline-block;
        font-family: $font-awesome;
        content: "\f0de";
        margin: 0 2px 0 0;
        transform: rotate(270deg);
        position: relative;
        top: 1px;
      }
    }

    &.next,
    &.last {
      &::after {
        display: inline-block;
        font-family: $font-awesome;
        content: "\f0de";
        margin: 0 2px 0 0;
        transform: rotate(90deg);
        position: relative;
        top: 1px;
      }
    }
  }
}
  • URL: /components/raw/pagination/pagination.scss
  • Filesystem Path: components/02-pieces/00-pagination/pagination.scss
  • Size: 856 Bytes

No notes defined.