<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.