<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 for this component. */
  • Content:
    .paginator {
      @extend %heading-font-regular;
      display: flex;
      flex-wrap: wrap;
      margin: $spacer-sm 0;
      font-size: $paginator-font-size;
    }
    
    .paginator__list {
      @extend %list-unstyled;
      display: flex;
      margin: 0;
    }
    
    .paginator__item {
      @extend %heading-font-bold;
      @extend %link-unstyled;
      position: relative;
      // display: inline-block;
    }
    
    .paginator__item--active {
      // TODO: put this in a placeholder selector
      &::after {
        display: block;
        position: absolute;
        bottom: -.15em;
        background-color: $brand-interaction;
        width: 100%;
        height: 3px;
        content: '';
      }
    }
    
    // .paginator__item + .paginator__item {
    //   margin-left: $spacer-xs;
    // }
    
    .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: $paginator-font-size-small;
      }
    
      .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/02-molecules/visual-elements/paginator/_paginator.scss
  • Size: 1.5 KB
  • Handle: @paginator
  • Preview:
  • Filesystem Path: components/02-molecules/visual-elements/paginator/paginator.html

There are no notes for this item.