TheaterMania Component Library

Pagination 

<ul class="pagination">
    <li class="pagination-control">
        <a href="#page-link" class="pagination-item">
            <svg class="icon icon--arrow-left">
  <use xlink:href="/assets/icons/sprite-sheet.svg#arrow-left"></use>
</svg>
            <span class="visually-hidden-medium-up prev">Previous</span>
        </a>
    </li>
    <li class="pagination-control">
        <a href="" class="pagination-item">1</a>
    </li>
    <li class="pagination-control">
        <a href="" class="pagination-item">2</a>
    </li>
    <li class="pagination-control">
        <a href="" class="pagination-item">3</a>
    </li>
    <li class="pagination-control">
        <a href="" class="pagination-item">4</a>
    </li>
    <li class="pagination-control">
        <a href="" class="pagination-item pagination-item--active">5</a>
    </li>
    <li class="pagination-control">
        <a href="" class="pagination-item">6</a>
    </li>
    <li class="pagination-control">
        <a href="" class="pagination-item">7</a>
    </li>
    <li class="pagination-control">
        <a href="" class="pagination-item">8</a>
    </li>
    <li class="pagination-control">
        <a href="" class="pagination-item">9</a>
    </li>
    <li class="pagination-control">
        <a href="#page-link" class="pagination-item">
            <svg class="icon icon--arrow-right">
  <use xlink:href="/assets/icons/sprite-sheet.svg#arrow-right"></use>
</svg>
            <span class="visually-hidden-medium-up next">Next</span>
        </a>
    </li>
</ul>
 
<ul class="pagination">
  <li class="pagination-control">
    <a href="{{url}}" class="pagination-item">
      {{render '@icons--arrow-left'}}
      <span class="visually-hidden-medium-up prev">{{prev}}</span>
    </a>
  </li>
  {{#each items}}
  <li class="pagination-control">
    <a href="{{url}}" class="pagination-item{{#if active}} pagination-item--active{{/if}}">{{number}}</a>
  </li>
  {{/each}}
  <li class="pagination-control">
    <a href="{{url}}" class="pagination-item">
      {{render '@icons--arrow-right'}}
      <span class="visually-hidden-medium-up next">{{next}}</span>
    </a>
  </li>
</ul>
 
{
  "prev": "Previous",
  "next": "Next",
  "url": "#page-link",
  "items": [
    {
      "number": 1
    },
    {
      "number": 2
    },
    {
      "number": 3
    },
    {
      "number": 4
    },
    {
      "number": 5,
      "active": true
    },
    {
      "number": 6
    },
    {
      "number": 7
    },
    {
      "number": 8
    },
    {
      "number": 9
    }
  ]
}
  • Content: 
    .pagination {
  margin: 0 auto;
  padding: 0;
  list-style: none;

  @include breakpoint($break-medium) {
    text-align: center;
  }

  .icon {
    position: relative;
    width: 1.25rem;
    height: 1.25rem;
    stroke: $color-white;
    stroke-width: 4;
  }

  &::after {
    content: '';
    display: block;
    clear: both;
  }
}

.pagination-control {
  display: inline;
  margin: 0;
  padding: 0;

  @include breakpoint($break-medium) {
    display: inline-block;
  }

  .next {
    order: -1;
  }
}

.pagination-item {
  align-items: center;
  display: none;
  float: left;
  box-sizing: border-box;
  padding: 0.5rem 1.25em;
  height: 2.5rem;
  font-size: $ms-neg-1;
  text-align: center;

  @include breakpoint($break-medium) {
    display: flex;
    margin: 0 0.25rem;
    border-radius: $border-radius;
  }

  &:hover {
    background: $color-gray-lightest;
    color: $color-primary;
  }

  .pagination-control:first-child &,
  .pagination-control:last-child & {
    display: flex;
    width: 50%;
    font-size: $ms-0;
    background: $color-primary;
    color: $color-white;
    transition: $transition;

    @include breakpoint($break-medium) {
      width: auto;
    }

    &:hover {
      background: $color-primary-light;
    }
  }

  .pagination-control:first-child & {
    border-top-left-radius: $border-radius;
    border-bottom-left-radius: $border-radius;
    border-right: 1px solid $color-white;

    @include breakpoint($break-medium) {
      border-right: none;
    }
  }

  .pagination-control:last-child & {
    justify-content: flex-end;
    border-top-right-radius: $border-radius;
    border-bottom-right-radius: $border-radius;
  }
}

.pagination-item--active,
.pagination-item--active:hover {
  cursor: default;
  background: $color-gray-lightest;
}
  • URL: /components/raw/pagination/Pagination.scss
  • Filesystem Path: src/components/01-Units/Pagination/Pagination.scss
  • Size: 1.8 KB

There are no notes for this item.