Paginator 

<nav class="paginator">
    <div class="paginator__prevs">
        <a href="#" class="paginator__item paginator__link">First</a>
        <a href="#" class="paginator__item paginator__link">Previous</a>
    </div>
    <ul class="paginator__list">
        <li class="paginator__item paginator__item--active"><a href="#" class="paginator__link paginator__link--number">1</a></li>
        <li class="paginator__item"><a href="#" class="paginator__link paginator__link--number">2</a></li>
        <li class="paginator__item"><a href="#" class="paginator__link paginator__link--number">3</a></li>
        <li class="paginator__item"><a href="#" class="paginator__link paginator__link--number">4</a></li>
        <li class="paginator__item"><a href="#" class="paginator__link paginator__link--number">5</a></li>
        <li class="paginator__item paginator__dots">…</li>
    </ul>
    <div class="paginator__nexts">
        <a href="#" class="paginator__item paginator__link">Next</a>
        <a href="#" class="paginator__item paginator__link">Last</a>
    </div>
</nav>
 
<nav class="paginator">
    <div class="paginator__prevs">
        <a href="#" class="paginator__item paginator__link">First</a>
        <a href="#" class="paginator__item paginator__link">Previous</a>
    </div>
    <ul class="paginator__list">
        <li class="paginator__item paginator__item--active"><a href="#" class="paginator__link paginator__link--number">1</a></li>
        <li class="paginator__item"><a href="#" class="paginator__link paginator__link--number">2</a></li>
        <li class="paginator__item"><a href="#" class="paginator__link paginator__link--number">3</a></li>
        <li class="paginator__item"><a href="#" class="paginator__link paginator__link--number">4</a></li>
        <li class="paginator__item"><a href="#" class="paginator__link paginator__link--number">5</a></li>
        <li class="paginator__item paginator__dots">…</li>
    </ul>
    <div class="paginator__nexts">
        <a href="#" class="paginator__item paginator__link">Next</a>
        <a href="#" class="paginator__item paginator__link">Last</a>
    </div>
</nav>
 
/* No context defined. */
  • Content: 
    .paginator {
  @extend %heading-font-regular;

  display: flex;
  flex-wrap: wrap;
  justify-content: center;

  margin: $spacer-sm 0;

  font-size: $font-size-md;
  color: $paginator-text-color;
}

.paginator__list {
  @extend %list-unstyled;

  display: flex;
  margin: 0;
}

.paginator__item {
  @extend %heading-font-bold;
  @extend %link-unstyled;

  position: relative;
}

.paginator__item--active {
  &::after {
    content: '';

    position: absolute;
    bottom: -0.15em;

    display: block;

    width: 100%;
    height: 3px;

    background-color: $paginator-active-color;
  }
}

.paginator__link,
.paginator__dots {
  padding: $spacer-xxs $spacer-xs;
}

.paginator__link {
  @extend %link-unstyled;

  display: inline-block;
  transition: standard-transition(color);

  &:hover,
  &focus {
    color: $paginator-focus-color;
  }
}

.paginator__prevs {
  > *:first-child {
    padding-left: 0;
  }
}

.paginator__nexts {
  > *:last-child {
    padding-right: 0;
  }
}

@media screen and (max-width: $grid-breakpoint-sm) {
  .paginator {
    justify-content: space-between;
    margin-top: $spacer-md;
    font-size: $font-size-base;
  }

  .paginator__list {
    justify-content: space-between;
    order: -1;
    width: 100%;
  }

  .paginator__prevs {
    text-align: left;
  }

  .paginator__nexts {
    text-align: right;
  }

  .paginator__nexts,
  .paginator__prevs {
    flex-grow: 1;
    margin-top: $spacer-sm;
  }
}
  • URL: /components/raw/paginator/_paginator.scss
  • Filesystem Path: components/04-molecules/paginator/_paginator.scss
  • Size: 1.4 KB

No notes defined.