Joran design system

Pagination Pages: Last Page 

<div class="o-container o-region c-pagination-pages">
    <nav aria-labelledby="pagination-title">
        <h2 id="pagination-title" class="u-visually-hidden">Pagination</h2>
        <ul class="c-pagination-pages__list" aria-label="Pagination">

            <li class="c-pagination-pages__list-item">
                <a href="#nowhere" class="c-pagination-pages__link" aria-label="Page précédente">
                    <span class="sr-only">Précédent</span>
                    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 8 14">
                        <path d="M7 1L1 7l6 6" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" />
                    </svg>

                </a>
            </li>

            <li class="c-pagination-pages__list-item">
                <a href="#nowhere" class="c-pagination-pages__link" aria-label="Page 29">29</a>
            </li>

            <li class="c-pagination-pages__list-item">
                <a href="#nowhere" class="c-pagination-pages__link" aria-label="Page 30">30</a>
            </li>

            <li class="c-pagination-pages__list-item">
                <a href="#nowhere" class="c-pagination-pages__link" aria-label="Page 31">31</a>
            </li>

            <li class="c-pagination-pages__list-item">
                <span class="c-pagination-pages__link" aria-label="Page 32" aria-current="page">32</span>
            </li>

        </ul>
    </nav>
</div>
 
<div class="o-container o-region c-pagination-pages">
  <nav aria-labelledby="pagination-title">
    <h2 id="pagination-title" class="u-visually-hidden">Pagination</h2>
    <ul class="c-pagination-pages__list" aria-label="Pagination">
      {% if previous %}
      <li class="c-pagination-pages__list-item">
        <a href="#nowhere" class="c-pagination-pages__link" aria-label="Page précédente">
          <span class="sr-only">{{ previousLabel }}</span>
          {% render '@svg-chevron-left' %}
        </a>
      </li>
      {% endif %} {% for item in items %}
      <li class="c-pagination-pages__list-item">
        {% if item.current -%}
        <span 
        class="c-pagination-pages__link"
        aria-label="Page {{ item.text }}"
        aria-current="page">
        {%- else -%}
        <a
          href="#nowhere"
          class="c-pagination-pages__link"
          aria-label="Page {{ item.text }}">
        {%- endif -%}
       {{- item.text -}}
       {%- if item.current -%}
       </span>
       {%- else -%}
       </a>
       {%- endif -%}
      </li>
      {% endfor %}
      {% if next %}
      <li class="c-pagination-pages__list-item">
        <a href="#nowhere" class="c-pagination-pages__link" aria-label="Page suivante">
          <span class="sr-only">{{ nextLabel }}</span>
          {% render '@svg-chevron-right' %}
        </a>
      </li>
      {% endif %}
    </ul>
  </nav>
</div>
 
{
  "previousLabel": "Précédent",
  "nextLabel": "Suivant",
  "previous": true,
  "items": [
    {
      "text": 29
    },
    {
      "text": 30
    },
    {
      "text": 31
    },
    {
      "text": 32,
      "current": true
    }
  ],
  "next": false
}
  • Content: 
    /* ======================================================================
   # _components.pagination.css
   ====================================================================== */

.c-pagination-pages {
  @extend .u-print-hidden;
}

.c-pagination-pages__list {
  @apply
    flex
    flex-wrap
    justify-center

    rounded-md
    no-underline
    text-xs
    ;
}

.c-pagination-pages__list-item {
  @apply
    mb-4
    mx-2
  ;
}

/***
 * 1. Center content
 * 2. If there more than one digit
 */

.c-pagination-pages__link {
  @extend %caption;

  @apply
    flex /* [1] */
    items-center /* [1] */
    justify-center /* [1] */

    text-white
    bg-primary-400
    rounded
    shadow

    inline-block
    h-8
    px-2 /* [2] */
  ;

  min-width: 2rem;
}

.c-pagination-pages__link svg {
  height: 1em;
}

.c-pagination-pages__link:hover,
.c-pagination-pages__link:active,
.c-pagination-pages__link[aria-current="page"] {
  @apply
    bg-primary-cta
  ;
}

.c-pagination-pages__link:focus {
  @apply
    outline-focus
  ;
}
  • URL: /components/raw/pagination-pages/_components.pagination-pages.css
  • Filesystem Path: src/components/04-Components/pagination/pagination-pages/_components.pagination-pages.css
  • Size: 1 KB

No notes defined.