PDJ Brandbox

paging 

<div class="paging">
    <div class="paging__header">
        <span class="paging__label">Results page</span>
    </div>

    <div class="paging__list">
        <div class="paging__item">
            <a href="/en/search-results/?q=ddj-&amp;page=1" class="paging__dir paging__dir--left">
                <svg class="icon-chevron" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16">
                    <path fill="currentColor" d="M11.172 9.82L13 8 9.906 4.99 6.04 1.21c-.281-.28-.703-.28-.914 0l-.914.91c-.281.28-.281.7 0 .91L9.273 8l-5.062 4.97c-.281.28-.281.7 0 .91l.914.91c.281.28.703.28.914 0l5.133-4.97z" />
                </svg>

            </a>
        </div>

        <div class="paging__item">
            <a href="/en/search-results/?q=ddj-&amp;page=1" class="paging__link">1</a>
        </div>

        <div class="paging__item">
            <a href="/en/search-results/?q=ddj-&amp;page=2" class="paging__link">2</a>
        </div>

        <div class="paging__item">
            <a href="/en/search-results/?q=ddj-&amp;page=3" class="paging__link is-active">3</a>
        </div>

        <div class="paging__item">
            <span class="paging__link">&hellip;</span>
        </div>

        <div class="paging__item">
            <a href="/en/search-results/?q=ddj-&amp;page=5" class="paging__link">19</a>
        </div>

        <div class="paging__item">
            <a href="/en/search-results/?q=ddj-&amp;page=2" class="paging__dir paging__dir--right is-active">
                <svg class="icon-chevron" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16">
                    <path fill="currentColor" d="M11.172 9.82L13 8 9.906 4.99 6.04 1.21c-.281-.28-.703-.28-.914 0l-.914.91c-.281.28-.281.7 0 .91L9.273 8l-5.062 4.97c-.281.28-.281.7 0 .91l.914.91c.281.28.703.28.914 0l5.133-4.97z" />
                </svg>

            </a>
        </div>
    </div>
</div>
 
<div class="paging">
  <div class="paging__header">
    <span class="paging__label">Results page</span>
  </div>

  <div class="paging__list">
    <div class="paging__item">
      <a href="/en/search-results/?q=ddj-&amp;page=1" class="paging__dir paging__dir--left">
        {{render '@icon-chevron' }}
      </a>
    </div>

    <div class="paging__item">
      <a href="/en/search-results/?q=ddj-&amp;page=1" class="paging__link">1</a>
    </div>

    <div class="paging__item">
      <a href="/en/search-results/?q=ddj-&amp;page=2" class="paging__link">2</a>
    </div>

    <div class="paging__item">
      <a href="/en/search-results/?q=ddj-&amp;page=3" class="paging__link is-active">3</a>
    </div>

    <div class="paging__item">
      <span class="paging__link">&hellip;</span>
    </div>

    <div class="paging__item">
      <a href="/en/search-results/?q=ddj-&amp;page=5" class="paging__link">19</a>
    </div>

    <div class="paging__item">
      <a href="/en/search-results/?q=ddj-&amp;page=2" class="paging__dir paging__dir--right is-active">
        {{render '@icon-chevron' }}
      </a>
    </div>
  </div>
</div>
 
/* No context defined. */
  • Content: 
    .paging__header {
  display: flex;
  align-items: center;
  justify-content: center;
  max-width: 200px;
  height: 20px;
  margin: 0 auto;
  font-size: var(--p--2);
  text-align: center;
}

.paging__label {
  flex: 0 0 auto;
  padding: 0 var(--gap--3);
  background-color: var(--color--neutrals-0);
}

.paging__header:before,
.paging__header:after {
  display: block;
  flex: 1 1 auto;
  height: 10px;
  border-top: 1px solid var(--color--neutrals-3);
  content: '';

  align-self: flex-end;
}

.paging__header:before {
  border-radius: 10px 0 0 0;
}

.paging__header:after {
  border-radius: 0 10px 0 0;
}

.paging__list {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  max-width: 520px;
  margin: var(--gap--5) auto 0;
  padding: 0 var(--gap--8);
}

.paging__item {
  padding: 0 var(--gap--2);
}

.paging__dir {
  display: block;
  width: 12px;
  color: var(--color--neutrals-2);

  &.is-active {
    color: var(--color--neutrals-4);
  }
}

.paging__dir--left {
  margin-right: var(--gap--2);

  svg {
    transform: rotate(180deg);
  }
}

.paging__dir--right {
  margin-left: var(--gap--2);
}

.paging__link {
  color: var(--color--neutrals-4);
  text-decoration: none;

  &.is-active {
    position: relative;
    color: var(--color--action);
    font-size: 20px;
    pointer-events: none;

    &:after {
      position: absolute;
      top: 100%;
      left: 0;
      width: 100%;
      height: 3px;
      background-color: currentColor;
      content: '';
    }
  }
}
  • URL: /components/raw/paging/paging.scss
  • Filesystem Path: ../src/04_organisms/paging/paging.scss
  • Size: 1.5 KB

No notes defined.